Repository: uiverse-io/galaxy
Branch: main
Commit: adbd2adde0a2
Files: 3804
Total size: 9.8 MB

Directory structure:
gitextract_6wrjoehl/

├── Buttons/
│   ├── 0x-Sarthak_hungry-penguin-30.html
│   ├── 0x3ther_afraid-eagle-38.html
│   ├── 0x3ther_heavy-dragon-56.html
│   ├── 0xnihilism_fast-cat-82.html
│   ├── 0xnihilism_helpless-rattlesnake-54.html
│   ├── 0xnihilism_pretty-fireant-33.html
│   ├── 0xnihilism_quiet-dog-6.html
│   ├── 1osm_black-chicken-65.html
│   ├── 1osm_rude-panda-79.html
│   ├── 212004ALJI_fat-eagle-24.html
│   ├── 212004ALJI_sour-bullfrog-96.html
│   ├── 212004ALJI_strange-bat-74.html
│   ├── 2Fl00rian6_empty-dolphin-52.html
│   ├── 3bdel3ziz-T_brown-earwig-37.html
│   ├── 3bdel3ziz-T_dangerous-newt-76.html
│   ├── A3zra_empty-lionfish-28.html
│   ├── AKAspidey01_brown-quail-36.html
│   ├── AKAspidey01_jolly-tiger-60.html
│   ├── AKAspidey01_little-penguin-74.html
│   ├── AKAspidey01_moody-moose-26.html
│   ├── AKAspidey01_orange-donkey-78.html
│   ├── AKAspidey01_selfish-puma-31.html
│   ├── AKAspidey01_sour-eagle-93.html
│   ├── AKAspidey01_spotty-husky-49.html
│   ├── AKAspidey01_ugly-horse-68.html
│   ├── AKHILJITH-VN_curly-lionfish-0.html
│   ├── Adir-SL_quiet-goose-19.html
│   ├── Admin12121_cold-dodo-65.html
│   ├── Admin12121_lovely-cat-86.html
│   ├── Afacanc38_polite-chipmunk-64.html
│   ├── AhSiber_great-gecko-98.html
│   ├── Ahemtan_strong-impala-57.html
│   ├── AkashKobal_blue-octopus-30.html
│   ├── Ali-Tahmazi99_big-stingray-4.html
│   ├── AlimurtuzaCodes_average-liger-0.html
│   ├── AlimurtuzaCodes_blue-quail-54.html
│   ├── AlimurtuzaCodes_rare-impala-32.html
│   ├── Allyhere_strong-pug-22.html
│   ├── AmIt-DasIT_evil-wolverine-68.html
│   ├── AmIt-DasIT_gentle-gecko-87.html
│   ├── Amikas_polite-seahorse-89.html
│   ├── Amir10Amir_big-dolphin-56.html
│   ├── AndiBumann_wet-robin-100.html
│   ├── AndrewHeinke_pink-lion-94.html
│   ├── AnshKaushal_shy-grasshopper-99.html
│   ├── AnthonyPreite_kind-fish-73.html
│   ├── AqFox_fat-ladybug-84.html
│   ├── AqFox_happy-zebra-99.html
│   ├── AqFox_nervous-crab-0.html
│   ├── AqFox_pretty-lionfish-11.html
│   ├── AqFox_tasty-robin-91.html
│   ├── ArnavK-09_serious-mouse-19.html
│   ├── Artahs_yellow-skunk-98.html
│   ├── ArturCodeCraft_afraid-fish-22.html
│   ├── ArturCodeCraft_bad-mayfly-19.html
│   ├── ArturCodeCraft_big-chipmunk-22.html
│   ├── ArturCodeCraft_black-chicken-8.html
│   ├── ArturCodeCraft_calm-dingo-44.html
│   ├── ArturCodeCraft_fresh-hound-11.html
│   ├── ArturCodeCraft_helpless-baboon-96.html
│   ├── ArturCodeCraft_horrible-mule-54.html
│   ├── ArturCodeCraft_lazy-skunk-20.html
│   ├── ArturCodeCraft_new-dog-56.html
│   ├── ArturCodeCraft_silly-firefox-72.html
│   ├── ArturCodeCraft_witty-deer-63.html
│   ├── AyuuLima_modern-wasp-21.html
│   ├── Ayzen-Dev_empty-dog-31.html
│   ├── BHARGAVPATEL1244_great-catfish-18.html
│   ├── BHARGAVPATEL1244_wise-shrimp-88.html
│   ├── BachWorks_heavy-panda-60.html
│   ├── Baimyrzaev_foolish-mouse-95.html
│   ├── Balthasar42_evil-grasshopper-45.html
│   ├── Bartek1238462_dry-parrot-99.html
│   ├── Bastiennnn_strong-lionfish-94.html
│   ├── Bastimans_itchy-dragon-81.html
│   ├── Bodyhc_great-walrus-67.html
│   ├── Bodyhc_itchy-dragonfly-35.html
│   ├── Bodyhc_orange-puma-60.html
│   ├── Bodyhc_rare-ladybug-6.html
│   ├── Bodyhc_rude-otter-33.html
│   ├── Bodyhc_sharp-seahorse-46.html
│   ├── Bodyhc_smart-puma-31.html
│   ├── Bodyhc_splendid-chicken-97.html
│   ├── Boosterrohit_smooth-swan-20.html
│   ├── Botwe-Felix5820_big-baboon-67.html
│   ├── Botwe-Felix5820_nasty-deer-97.html
│   ├── Brian-Pob_spotty-treefrog-35.html
│   ├── BurgiSimon_cuddly-monkey-7.html
│   ├── BurgiSimon_strange-hound-0.html
│   ├── BurgiSimon_wonderful-seahorse-35.html
│   ├── CPC23_short-gecko-89.html
│   ├── CYBWEBALI_unlucky-insect-96.html
│   ├── CaptainToy_witty-ladybug-99.html
│   ├── Carlos-vargs_breezy-horse-95.html
│   ├── Carlos-vargs_pink-ladybug-22.html
│   ├── Cevorob_heavy-grasshopper-82.html
│   ├── Cevorob_serious-shrimp-82.html
│   ├── ChRotsides_polite-penguin-53.html
│   ├── ChanduOffl_helpless-chipmunk-35.html
│   ├── ChanduOffl_itchy-vampirebat-74.html
│   ├── Cherie05_yellow-bobcat-58.html
│   ├── Cobp_horrible-bird-48.html
│   ├── Cobp_wet-mayfly-67.html
│   ├── CodeGame2010_fuzzy-bear-92.html
│   ├── Codecite_angry-bullfrog-58.html
│   ├── Codecite_dry-fish-68.html
│   ├── Codecite_evil-ape-86.html
│   ├── Codecite_fluffy-bear-28.html
│   ├── Codecite_modern-pig-84.html
│   ├── Coderlab05_honest-cougar-76.html
│   ├── Cornerstone-04_bitter-impala-54.html
│   ├── Cornerstone-04_chatty-eel-89.html
│   ├── Cornerstone-04_helpless-cheetah-32.html
│   ├── Cornerstone-04_rude-snake-92.html
│   ├── Creatlydev_dangerous-donkey-67.html
│   ├── Creatlydev_dull-chicken-81.html
│   ├── Creatlydev_fresh-goose-83.html
│   ├── Creatlydev_grumpy-crab-66.html
│   ├── Creatlydev_pretty-grasshopper-57.html
│   ├── Creatlydev_rare-treefrog-56.html
│   ├── Creatlydev_silly-cat-86.html
│   ├── CristianMontoya98_nasty-fish-9.html
│   ├── Custyyyy_fuzzy-fireant-2.html
│   ├── Custyyyy_short-lizard-47.html
│   ├── Custyyyy_silent-sheep-31.html
│   ├── Custyyyy_witty-baboon-62.html
│   ├── Cybercom682_little-owl-63.html
│   ├── DGtalsam_neat-kangaroo-25.html
│   ├── Damithkumara_green-chipmunk-67.html
│   ├── Dashrath-Sharma_chatty-tiger-70.html
│   ├── Dashrath-Sharma_cowardly-dingo-27.html
│   ├── Dashrath-Sharma_heavy-squid-49.html
│   ├── Dashrath-Sharma_popular-cobra-99.html
│   ├── Dashrath-Sharma_tall-robin-16.html
│   ├── Dashrath-Sharma_thin-mole-87.html
│   ├── Dashrath-Sharma_wet-zebra-95.html
│   ├── Dear31_good-yak-38.html
│   ├── Dear31_hard-moose-96.html
│   ├── DeepanshuKant_dry-rattlesnake-75.html
│   ├── Deri-Kurniawan_helpless-insect-19.html
│   ├── Deri-Kurniawan_moody-bulldog-20.html
│   ├── Deri-Kurniawan_moody-cat-79.html
│   ├── Deri-Kurniawan_moody-lion-47.html
│   ├── DevPTG_funny-quail-20.html
│   ├── DevVaradPatil_terrible-frog-3.html
│   ├── Df12345677_black-rat-82.html
│   ├── Diox221_hungry-husky-80.html
│   ├── Divyank-Gupta-g_happy-robin-54.html
│   ├── EcheverriaJesus_chatty-lizard-18.html
│   ├── EcheverriaJesus_chilly-donkey-13.html
│   ├── EcheverriaJesus_clever-owl-29.html
│   ├── EcheverriaJesus_evil-eagle-46.html
│   ├── EcheverriaJesus_hungry-dingo-62.html
│   ├── EcheverriaJesus_itchy-ape-8.html
│   ├── EcheverriaJesus_kind-badger-70.html
│   ├── EcheverriaJesus_nasty-zebra-71.html
│   ├── EcheverriaJesus_red-duck-59.html
│   ├── EcheverriaJesus_yellow-dodo-45.html
│   ├── EddyBel_brave-horse-21.html
│   ├── EmaCoto_breezy-cobra-71.html
│   ├── EmmaxPlay_rude-yak-98.html
│   ├── ErzenXz_slimy-chicken-63.html
│   ├── FWDJc_moody-penguin-63.html
│   ├── Fadhilmagass_proud-quail-48.html
│   ├── Fatima-Zahrae-Acharki_witty-dolphin-100.html
│   ├── G4b413l_slippery-owl-85.html
│   ├── Galahhad_ancient-emu-61.html
│   ├── Galahhad_kind-cheetah-52.html
│   ├── Galahhad_odd-yak-40.html
│   ├── Gaurav-WebDev_hard-cougar-70.html
│   ├── Gaurav-WebDev_tall-mayfly-60.html
│   ├── Gaurav-WebDev_tame-hound-72.html
│   ├── Gautammsharma_funny-fly-33.html
│   ├── Gautammsharma_silent-turtle-50.html
│   ├── Gautammsharma_wicked-cobra-3.html
│   ├── GetYourCode8605_ordinary-wombat-64.html
│   ├── Gianluks90_strange-snake-10.html
│   ├── Github-Suriya_chilly-wasp-20.html
│   ├── Gumpack_jolly-zebra-42.html
│   ├── HarryProCW_shaggy-snail-5.html
│   ├── HauNTH_dull-donkey-56.html
│   ├── HecktorViegas_green-cow-45.html
│   ├── Hysean2_unlucky-cat-84.html
│   ├── Iliasman2_grumpy-lizard-3.html
│   ├── ItsEnigma143_silent-donkey-68.html
│   ├── ItsEnigma143_tender-ape-26.html
│   ├── Itskrish01_angry-bird-46.html
│   ├── Itskrish01_chatty-lionfish-23.html
│   ├── Itskrish01_dry-cougar-15.html
│   ├── Itskrish01_giant-chipmunk-98.html
│   ├── Itskrish01_loud-squid-89.html
│   ├── Itskrish01_soft-skunk-68.html
│   ├── Itskrish01_tough-frog-18.html
│   ├── JOBOYA_tiny-goose-31.html
│   ├── JakkarinKr_tough-goat-61.html
│   ├── JamesAchiver_fluffy-newt-25.html
│   ├── JasonMep_modern-dragon-25.html
│   ├── Javierrocadev_angry-dodo-51.html
│   ├── Javierrocadev_fat-snail-15.html
│   ├── Javierrocadev_fuzzy-rabbit-3.html
│   ├── Javierrocadev_hard-cheetah-69.html
│   ├── Javierrocadev_selfish-goat-55.html
│   ├── Javierrocadev_slimy-baboon-89.html
│   ├── Javierrocadev_slimy-eagle-32.html
│   ├── Javierrocadev_warm-moth-60.html
│   ├── Javierrocadev_witty-ape-6.html
│   ├── JaydipPrajapati1910_big-horse-30.html
│   ├── JaydipPrajapati1910_brave-walrus-11.html
│   ├── JaydipPrajapati1910_dry-frog-0.html
│   ├── JaydipPrajapati1910_foolish-dragon-2.html
│   ├── JaydipPrajapati1910_foolish-robin-0.html
│   ├── JaydipPrajapati1910_giant-mouse-100.html
│   ├── JaydipPrajapati1910_helpless-firefox-29.html
│   ├── JaydipPrajapati1910_honest-parrot-89.html
│   ├── JaydipPrajapati1910_itchy-octopus-28.html
│   ├── JaydipPrajapati1910_lazy-mouse-44.html
│   ├── JaydipPrajapati1910_quick-stingray-2.html
│   ├── JaydipPrajapati1910_splendid-mayfly-81.html
│   ├── JaydipPrajapati1910_tender-dolphin-96.html
│   ├── JaydipPrajapati1910_tiny-moose-9.html
│   ├── JaydipPrajapati1910_wonderful-walrus-87.html
│   ├── Jedi-hongbin_modern-sloth-8.html
│   ├── Jerome-W-90_nervous-dragon-80.html
│   ├── JesscMendesr_lucky-eagle-6.html
│   ├── JesusRafaelNavaCruz_grumpy-cougar-86.html
│   ├── JesusRafaelNavaCruz_modern-robin-64.html
│   ├── JesusRafaelNavaCruz_pretty-yak-93.html
│   ├── JhaveLang_hard-penguin-52.html
│   ├── JkHuger_brown-lion-61.html
│   ├── JkHuger_evil-dodo-27.html
│   ├── JkHuger_fat-bat-0.html
│   ├── JkHuger_heavy-lion-95.html
│   ├── JkHuger_little-pug-16.html
│   ├── JkHuger_loud-baboon-15.html
│   ├── JkHuger_tough-skunk-14.html
│   ├── John-CFO_calm-kangaroo-15.html
│   ├── John-CFO_green-rabbit-93.html
│   ├── JohnnyCSilva_brave-cougar-40.html
│   ├── JohnnyCSilva_red-gecko-43.html
│   ├── Jonathan2004-binjin_silly-insect-14.html
│   ├── JorgeJimSports_fast-treefrog-94.html
│   ├── JsGrisales_wise-ladybug-7.html
│   ├── Juanes200122_horrible-stingray-49.html
│   ├── Juanes200122_smart-skunk-68.html
│   ├── Jules-gitclerc_quiet-donkey-50.html
│   ├── Jules-gitclerc_slimy-mouse-94.html
│   ├── Julian956_slippery-catfish-88.html
│   ├── KINGFRESS_giant-deer-25.html
│   ├── KINGFRESS_nice-deer-12.html
│   ├── KINGFRESS_purple-kangaroo-17.html
│   ├── KINGFRESS_young-dragon-73.html
│   ├── KSAplay_horrible-jellyfish-30.html
│   ├── KSAplay_lazy-lion-26.html
│   ├── KSAplay_nasty-otter-73.html
│   ├── KSAplay_pink-dolphin-76.html
│   ├── KSAplay_proud-bullfrog-29.html
│   ├── KSAplay_strong-panther-58.html
│   ├── Kabak_unlucky-treefrog-77.html
│   ├── Kemboi-Dun_calm-stingray-84.html
│   ├── Kemboi-Dun_lazy-puma-63.html
│   ├── Kenny10000_wonderful-ape-22.html
│   ├── KhaledMatalkah_chatty-sheep-5.html
│   ├── KhaledMatalkah_cuddly-zebra-19.html
│   ├── KhaledMatalkah_grumpy-monkey-74.html
│   ├── KhaledMatalkah_light-goat-63.html
│   ├── KhaledMatalkah_lucky-dragon-53.html
│   ├── KhaledMatalkah_modern-kangaroo-63.html
│   ├── KhaledMatalkah_neat-snake-57.html
│   ├── KhaledMatalkah_odd-gecko-75.html
│   ├── KhaledMatalkah_old-emu-32.html
│   ├── KhaledMatalkah_selfish-rabbit-36.html
│   ├── KhaledMatalkah_stale-squid-66.html
│   ├── KhaledMatalkah_tough-rat-6.html
│   ├── KhelVers_loud-lion-80.html
│   ├── KhelVers_orange-lionfish-62.html
│   ├── Kilian-DM_slimy-baboon-11.html
│   ├── KingHendrie_heavy-wombat-40.html
│   ├── KitoC_curly-cheetah-59.html
│   ├── KlaujonRuamni_evil-sheep-56.html
│   ├── Lakshay-art_chilly-goat-78.html
│   ├── Lakshay-art_nice-insect-63.html
│   ├── Lakshay-art_polite-tiger-43.html
│   ├── Laurits123456_slippery-squid-55.html
│   ├── LeHuyHieu_little-skunk-12.html
│   ├── Leoodaviid_loud-pug-70.html
│   ├── LeryLey_big-baboon-18.html
│   ├── LeryLey_massive-panda-53.html
│   ├── LeryLey_white-monkey-16.html
│   ├── Li-Deheng_dangerous-bulldog-28.html
│   ├── Li-Deheng_shy-moth-10.html
│   ├── LilaRest_afraid-fox-80.html
│   ├── LilaRest_chilly-moth-52.html
│   ├── LilaRest_lazy-lionfish-12.html
│   ├── LilaRest_loud-walrus-26.html
│   ├── LilaRest_strong-fly-77.html
│   ├── Lokesh1379_rude-mule-58.html
│   ├── Lucaasbre_happy-elephant-36.html
│   ├── Lucaasbre_quiet-bat-17.html
│   ├── LuisEgan_mighty-stingray-31.html
│   ├── MINOTAURO18_tasty-warthog-50.html
│   ├── MRez321_tame-squid-31.html
│   ├── Madflows_dangerous-husky-17.html
│   ├── Madflows_stale-baboon-45.html
│   ├── Madflows_terrible-catfish-72.html
│   ├── Mahalakshmiiii_thin-snail-33.html
│   ├── Manish-Tamang_spicy-panther-59.html
│   ├── Manish-Tamang_swift-warthog-30.html
│   ├── Manish-Tamang_wicked-wasp-100.html
│   ├── McHaXYT_evil-parrot-13.html
│   ├── McHaXYT_fresh-turkey-35.html
│   ├── McHaXYT_hungry-starfish-43.html
│   ├── McHaXYT_swift-mayfly-80.html
│   ├── Medisetti-Venkata-Saikiran_silly-duck-5.html
│   ├── MeetJF_average-deer-50.html
│   ├── Melo034_stupid-bear-67.html
│   ├── MetaBlue2000_friendly-chipmunk-57.html
│   ├── MetaBlue2000_hard-fly-61.html
│   ├── Mhyar-nsi_tiny-wasp-99.html
│   ├── Mike11jr_perfect-badger-81.html
│   ├── Mike11jr_soft-mayfly-11.html
│   ├── Mike11jr_warm-zebra-80.html
│   ├── Mike11jr_white-emu-65.html
│   ├── MikeAndrewDesigner_evil-snake-57.html
│   ├── Mini-khamasino_cowardly-parrot-21.html
│   ├── Mohammad-Rahme-576_spicy-grasshopper-17.html
│   ├── Mohsinech_tidy-yak-66.html
│   ├── MopokD71304_lazy-husky-72.html
│   ├── Muhammad-Usman-911_heavy-moose-44.html
│   ├── MuhammadHasann_average-ape-81.html
│   ├── MuhammadHasann_calm-quail-31.html
│   ├── MuhammadHasann_dull-mole-2.html
│   ├── MuhammadHasann_great-fish-88.html
│   ├── MuhammadHasann_happy-cobra-7.html
│   ├── MuhammadHasann_hungry-cougar-64.html
│   ├── MuhammadHasann_lucky-mouse-99.html
│   ├── MuhammadHasann_mean-bird-62.html
│   ├── MuhammadHasann_old-wombat-33.html
│   ├── MuhammadHasann_quick-goose-5.html
│   ├── MuhammadHasann_silent-lizard-44.html
│   ├── MuhammadHasann_slimy-fish-99.html
│   ├── MuhammadHasann_smart-turkey-26.html
│   ├── MuhammadHasann_smooth-stingray-40.html
│   ├── MuhammadHasann_tough-tiger-78.html
│   ├── MusKRI_wise-pig-77.html
│   ├── NAKAMOZ_cowardly-vampirebat-40.html
│   ├── Na3ar-17_fuzzy-penguin-47.html
│   ├── Na3ar-17_shy-firefox-86.html
│   ├── Na3ar-17_sweet-horse-64.html
│   ├── NabeelAhmadK_fat-fox-21.html
│   ├── Navarog21_loud-bird-67.html
│   ├── Navarog21_orange-vampirebat-22.html
│   ├── Navarog21_ordinary-rat-19.html
│   ├── Navs45_quick-dolphin-19.html
│   ├── Nawsome_chilly-moose-65.html
│   ├── Nawsome_tiny-chipmunk-51.html
│   ├── Nawsome_unlucky-mayfly-5.html
│   ├── Nayzerftn_breezy-grasshopper-31.html
│   ├── NguyenHaiNam24082000_nervous-insect-23.html
│   ├── Niranjan360_cowardly-robin-27.html
│   ├── NomNomcats_angry-firefox-98.html
│   ├── NorthFishHasNa_soft-turtle-49.html
│   ├── Nouman64-cat_hard-cow-88.html
│   ├── OnCloud125252_angry-dragonfly-77.html
│   ├── OnCloud125252_tough-moth-4.html
│   ├── Peary74_cuddly-gecko-61.html
│   ├── Peary74_kind-cougar-54.html
│   ├── Peary74_loud-bear-3.html
│   ├── Peary74_loud-warthog-20.html
│   ├── Peary74_tough-panther-45.html
│   ├── Peary74_ugly-ape-46.html
│   ├── Peary74_ugly-parrot-58.html
│   ├── Peary74_wise-falcon-58.html
│   ├── Phelix652_perfect-hound-11.html
│   ├── Philibert-JF_fresh-impala-20.html
│   ├── PozDevill_hard-cow-33.html
│   ├── Praashoo7_average-swan-99.html
│   ├── Praashoo7_black-bat-66.html
│   ├── Praashoo7_brown-quail-45.html
│   ├── Praashoo7_chilly-baboon-67.html
│   ├── Praashoo7_clever-turtle-2.html
│   ├── Praashoo7_mighty-warthog-35.html
│   ├── Praashoo7_quick-fish-43.html
│   ├── Praashoo7_smooth-crab-52.html
│   ├── Pradeepsaranbishnoi_dull-mole-49.html
│   ├── Pradeepsaranbishnoi_itchy-seahorse-91.html
│   ├── Pradeepsaranbishnoi_jolly-robin-0.html
│   ├── Pradeepsaranbishnoi_jolly-sloth-57.html
│   ├── Pradeepsaranbishnoi_nice-earwig-94.html
│   ├── Pradeepsaranbishnoi_spotty-chipmunk-79.html
│   ├── Pradeepsaranbishnoi_wet-donkey-50.html
│   ├── PranabKumarSahoo_popular-fish-62.html
│   ├── PriyanshuGupta28_brave-mole-100.html
│   ├── PriyanshuGupta28_modern-snail-2.html
│   ├── PriyanshuGupta28_nasty-wasp-10.html
│   ├── PriyanshuGupta28_shaggy-wombat-39.html
│   ├── PriyanshuGupta28_short-horse-44.html
│   ├── PriyanshuGupta28_smooth-elephant-43.html
│   ├── PriyanshuGupta28_strong-warthog-30.html
│   ├── PriyanshuGupta28_wise-mule-92.html
│   ├── Progee45_lucky-turkey-67.html
│   ├── Progee45_nice-bobcat-8.html
│   ├── Programming-School-Pro-Coding_polite-frog-59.html
│   ├── Pruthvirajmunde_great-cheetah-48.html
│   ├── Quezaquo_great-ladybug-7.html
│   ├── R0G3RF4_hungry-termite-32.html
│   ├── Ramosspg_moody-rat-66.html
│   ├── Randdose_brown-grasshopper-46.html
│   ├── RashadGhzi_green-sloth-90.html
│   ├── RaspberryBee_warm-mouse-87.html
│   ├── Ratinax_massive-tiger-88.html
│   ├── Remelens_tasty-bobcat-17.html
│   ├── Remon125_empty-squid-90.html
│   ├── Remon125_perfect-shrimp-95.html
│   ├── RenouxM_weak-moose-10.html
│   ├── RichestsoftSukhbir_big-liger-46.html
│   ├── RodrigoRVSN_tidy-dingo-23.html
│   ├── Rodrypaladin_helpless-ladybug-43.html
│   ├── Rodrypaladin_ordinary-vampirebat-21.html
│   ├── Rodrypaladin_pink-hound-35.html
│   ├── Rodrypaladin_short-wasp-25.html
│   ├── Rodrypaladin_smart-puma-20.html
│   ├── Roopaish_wicked-moth-24.html
│   ├── Rudra1725_splendid-fish-19.html
│   ├── Saiyed-Tanvir_hard-eagle-53.html
│   ├── Saiyed-Tanvir_proud-donkey-5.html
│   ├── Salahkarrar_thin-wombat-41.html
│   ├── SalladShooter_neat-bear-90.html
│   ├── Sameer2244_big-robin-49.html
│   ├── Sameer2244_friendly-wasp-57.html
│   ├── Samhubby_fresh-donkey-58.html
│   ├── SanketSuryawanshi_smooth-mouse-22.html
│   ├── SanthoshSJ-Dev_fast-bear-50.html
│   ├── SanthoshSJ-Dev_short-goat-24.html
│   ├── SanthoshSJ-Dev_slimy-lionfish-25.html
│   ├── Satwinder04_big-pug-95.html
│   ├── Satwinder04_plastic-wolverine-30.html
│   ├── Satwinder04_tame-panther-46.html
│   ├── Satwinder04_tasty-horse-82.html
│   ├── SelfMadeSystem_afraid-rabbit-12.html
│   ├── SelfMadeSystem_brown-kangaroo-43.html
│   ├── SelfMadeSystem_lucky-cougar-76.html
│   ├── SelfMadeSystem_modern-fly-8.html
│   ├── SelfMadeSystem_quiet-panda-44.html
│   ├── SelfMadeSystem_strange-cobra-12.html
│   ├── SelfMadeSystem_terrible-rat-80.html
│   ├── SelfMadeSystem_tough-fireant-47.html
│   ├── SelfMadeSystem_white-stingray-85.html
│   ├── Sergestra_angry-dragonfly-60.html
│   ├── SevenAJJY_wet-owl-54.html
│   ├── ShadowShahriar_nervous-goat-3.html
│   ├── Shakil-Babu_moody-mule-8.html
│   ├── SharpTH_itchy-mole-30.html
│   ├── SharpTH_swift-bullfrog-75.html
│   ├── Shashvhat_moody-moth-69.html
│   ├── Shivaraj-Kolekar_horrible-parrot-27.html
│   ├── Shoh2008_brown-gecko-29.html
│   ├── Shoh2008_clever-bullfrog-79.html
│   ├── Shoh2008_hungry-treefrog-88.html
│   ├── Shoh2008_selfish-puma-67.html
│   ├── Shoh2008_short-newt-45.html
│   ├── Showbizfleet_sweet-squid-86.html
│   ├── Shreyanjalipb_helpless-cow-14.html
│   ├── ShrinilDhorda_calm-lionfish-96.html
│   ├── ShrinilDhorda_pink-zebra-4.html
│   ├── ShrinilDhorda_wicked-lionfish-83.html
│   ├── Shubh0408_clever-cobra-74.html
│   ├── Shubh0408_dry-shrimp-75.html
│   ├── Shubh0408_nervous-warthog-96.html
│   ├── Shubh0408_pretty-cobra-79.html
│   ├── SiddhantEngineer_calm-shrimp-74.html
│   ├── SiddhantEngineer_pink-cheetah-76.html
│   ├── Siyu1017_wise-yak-7.html
│   ├── Smit-Prajapati_chatty-pug-36.html
│   ├── SmookyDev_dull-wasp-37.html
│   ├── SmookyDev_great-dragonfly-65.html
│   ├── SmookyDev_kind-firefox-93.html
│   ├── SmookyDev_kind-quail-78.html
│   ├── SmookyDev_proud-dolphin-67.html
│   ├── SmookyDev_red-robin-87.html
│   ├── SmookyDev_sharp-stingray-58.html
│   ├── SoloResearchLab_fast-deer-30.html
│   ├── SouravBandyopadhyay_selfish-skunk-42.html
│   ├── SouravBandyopadhyay_wise-panda-94.html
│   ├── Spacious74_helpless-tiger-55.html
│   ├── Spacious74_horrible-horse-4.html
│   ├── Spacious74_plastic-bulldog-78.html
│   ├── Spacious74_terrible-mole-30.html
│   ├── Spacious74_tidy-moose-60.html
│   ├── SpatexDEV_blue-eagle-63.html
│   ├── StealthWorm_jolly-lion-33.html
│   ├── StealthWorm_polite-mole-15.html
│   ├── StealthWorm_pretty-lion-68.html
│   ├── StealthWorm_spotty-horse-48.html
│   ├── StealthWorm_young-badger-81.html
│   ├── SteveBloX_light-owl-27.html
│   ├── SteveBloX_proud-vampirebat-22.html
│   ├── SteveBloX_short-fish-35.html
│   ├── Subaashbala_new-snail-95.html
│   ├── Subaashbala_quiet-cow-11.html
│   ├── Subaashbala_slippery-goat-18.html
│   ├── Subu19_plastic-skunk-56.html
│   ├── Sujanthapast0_serious-rattlesnake-31.html
│   ├── Sujanthapast0_shy-impala-90.html
│   ├── SujitAdroja_sharp-frog-56.html
│   ├── SujitAdroja_strong-bullfrog-56.html
│   ├── SuliLevente_hard-sloth-56.html
│   ├── SuliLevente_soft-horse-30.html
│   ├── TISEPSE_empty-turkey-39.html
│   ├── TISEPSE_perfect-pig-59.html
│   ├── TISEPSE_smart-newt-43.html
│   ├── TISEPSE_ugly-badger-82.html
│   ├── TISEPSE_young-lionfish-81.html
│   ├── TaniaDou_witty-rabbit-59.html
│   ├── TanimMahbub_selfish-goat-90.html
│   ├── Tanvisharma31_dry-cheetah-92.html
│   ├── TemRevil_shaggy-donkey-83.html
│   ├── TemRevil_slippery-fox-2.html
│   ├── TimTrayler_big-crab-49.html
│   ├── Tsiangana_curly-rat-7.html
│   ├── Tsiangana_rude-wolverine-12.html
│   ├── Tsiangana_smart-starfish-50.html
│   ├── Tsiangana_sweet-rattlesnake-28.html
│   ├── UNDERMAKEING_wonderful-cat-67.html
│   ├── Ubaton_tender-eel-32.html
│   ├── UmangLadha_neat-duck-51.html
│   ├── Uncannypotato69_cuddly-cougar-90.html
│   ├── Uncannypotato69_gentle-mule-75.html
│   ├── Uncannypotato69_loud-cow-23.html
│   ├── Uzmakh_rare-fox-82.html
│   ├── VD232004_silent-puma-3.html
│   ├── Vaperene_afraid-stingray-79.html
│   ├── VashonG_afraid-lion-76.html
│   ├── VashonG_hot-baboon-9.html
│   ├── VashonG_mean-mayfly-77.html
│   ├── VashonG_rotten-frog-52.html
│   ├── VashonG_tiny-snake-44.html
│   ├── VassoD_hard-panther-41.html
│   ├── VassoD_smooth-earwig-8.html
│   ├── Voxybuns_lucky-fireant-71.html
│   ├── Wasim-Rana_lazy-fish-83.html
│   ├── Web-Potato_mighty-chipmunk-64.html
│   ├── Web-Potato_silent-ape-24.html
│   ├── Webdevava_purple-tiger-90.html
│   ├── Wendell47_gentle-cheetah-21.html
│   ├── WhiteNervosa_dull-cougar-87.html
│   ├── WhiteNervosa_popular-ladybug-27.html
│   ├── Wlidha09_chilly-mole-32.html
│   ├── Wlidha09_neat-bird-56.html
│   ├── Wlidha09_slimy-newt-90.html
│   ├── Wlidha09_smooth-mouse-48.html
│   ├── YUGE0_dangerous-parrot-21.html
│   ├── YUGE0_gentle-stingray-37.html
│   ├── Yaseen549_curly-termite-88.html
│   ├── Yaseen549_ordinary-turtle-25.html
│   ├── Yashasewi_evil-dog-33.html
│   ├── Yashwanthnaini_dry-panther-24.html
│   ├── Yatsu68_ancient-ladybug-46.html
│   ├── Yaya12085_blue-shrimp-51.html
│   ├── Yaya12085_fast-goose-7.html
│   ├── Yaya12085_happy-emu-100.html
│   ├── Yaya12085_horrible-pug-35.html
│   ├── Yaya12085_perfect-newt-3.html
│   ├── Yaya12085_plastic-quail-42.html
│   ├── Yaya12085_quick-husky-74.html
│   ├── Yaya12085_serious-snake-25.html
│   ├── Yaya12085_sharp-quail-80.html
│   ├── Yaya12085_short-dodo-73.html
│   ├── Yaya12085_strong-earwig-8.html
│   ├── Yaya12085_swift-mayfly-12.html
│   ├── Yaya12085_tasty-chipmunk-31.html
│   ├── Yaya12085_warm-earwig-85.html
│   ├── Yaya12085_witty-firefox-53.html
│   ├── Yaya12085_wonderful-lion-100.html
│   ├── Yaya12085_wonderful-robin-27.html
│   ├── Z4drus_bitter-turtle-76.html
│   ├── Z4drus_tough-sloth-76.html
│   ├── Z4drus_wonderful-termite-25.html
│   ├── ZacharyCrespin_dull-dragonfly-23.html
│   ├── Zena4L_heavy-yak-65.html
│   ├── ZiyadOuamna_hungry-penguin-18.html
│   ├── ZstarPanda0210_rare-chicken-24.html
│   ├── aadium_grumpy-kangaroo-69.html
│   ├── aadium_massive-seahorse-39.html
│   ├── aadium_purple-insect-27.html
│   ├── aadium_smooth-cow-62.html
│   ├── aadium_warm-catfish-77.html
│   ├── aarjaycreation_fluffy-owl-5.html
│   ├── aaronross1_kind-bobcat-81.html
│   ├── aasisodiya_nasty-cat-19.html
│   ├── abassj1_popular-panda-42.html
│   ├── abbos97_wise-jellyfish-49.html
│   ├── abdulGitHb_tall-cougar-52.html
│   ├── abhayexe_heavy-crab-27.html
│   ├── aboalsim114_neat-cow-49.html
│   ├── aboalsim114_smooth-moose-22.html
│   ├── abrahamcalsin_sour-donkey-65.html
│   ├── absoluteSTrange_helpless-robin-98.html
│   ├── absoluteSTrange_tame-hound-16.html
│   ├── abuayaan01_tall-mayfly-66.html
│   ├── adamgiebl_big-ape-36.html
│   ├── adamgiebl_big-moose-23.html
│   ├── adamgiebl_curly-wombat-58.html
│   ├── adamgiebl_fluffy-liger-17.html
│   ├── adamgiebl_giant-donkey-36.html
│   ├── adamgiebl_good-mouse-67.html
│   ├── adamgiebl_helpless-jellyfish-25.html
│   ├── adamgiebl_hot-catfish-48.html
│   ├── adamgiebl_lucky-donkey-6.html
│   ├── adamgiebl_massive-insect-65.html
│   ├── adamgiebl_new-bird-34.html
│   ├── adamgiebl_pink-chicken-70.html
│   ├── adamgiebl_plastic-parrot-32.html
│   ├── adamgiebl_popular-termite-0.html
│   ├── adamgiebl_purple-wasp-14.html
│   ├── adamgiebl_quiet-duck-78.html
│   ├── adamgiebl_rude-bear-14.html
│   ├── adamgiebl_selfish-turtle-89.html
│   ├── adamgiebl_shaggy-grasshopper-91.html
│   ├── adamgiebl_silent-kangaroo-86.html
│   ├── adamgiebl_smart-moth-68.html
│   ├── adamgiebl_soft-gecko-85.html
│   ├── adamgiebl_ugly-robin-41.html
│   ├── adamgiebl_wise-moth-35.html
│   ├── adilsarfraz02_short-tiger-98.html
│   ├── aguerquin_pretty-bat-39.html
│   ├── ahmed150up_brave-donkey-68.html
│   ├── ahmed150up_moody-turtle-89.html
│   ├── ahmedgamal-hub_yellow-cheetah-82.html
│   ├── ahmedrizk101_green-snake-95.html
│   ├── ahmedyasserdev_cold-ape-21.html
│   ├── akshat-patel28_brown-panther-60.html
│   ├── akshat-patel28_grumpy-lizard-55.html
│   ├── albertofanini-prog_hard-wasp-8.html
│   ├── alessandrodesign_empty-rabbit-96.html
│   ├── alexmaracinaru_brown-bobcat-65.html
│   ├── alexmaracinaru_empty-moose-12.html
│   ├── alexmaracinaru_perfect-panda-77.html
│   ├── alexreyes091_soft-crab-61.html
│   ├── alexroumi_shy-sloth-91.html
│   ├── alkanoidev_wonderful-cheetah-68.html
│   ├── alshahwan_good-dolphin-78.html
│   ├── alshahwan_sour-baboon-86.html
│   ├── alshahwan_ugly-emu-27.html
│   ├── amerfad_fast-moose-81.html
│   ├── amralashi_fat-mule-63.html
│   ├── andrew-demchenk0_afraid-squid-51.html
│   ├── andrew-demchenk0_angry-cow-54.html
│   ├── andrew-demchenk0_chatty-ape-15.html
│   ├── andrew-demchenk0_chatty-quail-30.html
│   ├── andrew-demchenk0_dry-rabbit-60.html
│   ├── andrew-demchenk0_fluffy-fly-35.html
│   ├── andrew-demchenk0_giant-termite-81.html
│   ├── andrew-demchenk0_happy-dragonfly-63.html
│   ├── andrew-demchenk0_itchy-donkey-64.html
│   ├── andrew-demchenk0_mighty-moose-66.html
│   ├── andrew-demchenk0_moody-penguin-72.html
│   ├── andrew-demchenk0_nasty-rabbit-89.html
│   ├── andrew-demchenk0_odd-squid-52.html
│   ├── andrew-demchenk0_plastic-hound-41.html
│   ├── andrew-demchenk0_pretty-squid-78.html
│   ├── andrew-demchenk0_shaggy-vampirebat-24.html
│   ├── andrew-demchenk0_smart-wasp-46.html
│   ├── andrew-demchenk0_splendid-impala-69.html
│   ├── andrew-demchenk0_strange-starfish-32.html
│   ├── andrew-demchenk0_strange-swan-41.html
│   ├── andrew-demchenk0_swift-octopus-68.html
│   ├── andrew-demchenk0_tasty-yak-79.html
│   ├── andrew-demchenk0_tidy-yak-47.html
│   ├── andrew-demchenk0_unlucky-vampirebat-84.html
│   ├── andrew-demchenk0_white-bear-69.html
│   ├── andrew-demchenk0_yellow-otter-87.html
│   ├── andrew-demchenk0_young-chipmunk-91.html
│   ├── another-kennyotsu_sharp-fox-30.html
│   ├── anushikchakhoyan_spotty-earwig-3.html
│   ├── anushkaps_nasty-mouse-56.html
│   ├── arieshiphop_honest-mole-71.html
│   ├── arshshaikh06_friendly-jellyfish-23.html
│   ├── aryansagar2405_bitter-baboon-4.html
│   ├── aryansagar2405_cowardly-treefrog-50.html
│   ├── asgardOP_light-shrimp-73.html
│   ├── asgardOP_quiet-panther-30.html
│   ├── asgardOP_smart-skunk-78.html
│   ├── asgardOP_young-panda-81.html
│   ├── aurellsoleil_quiet-horse-20.html
│   ├── bandirevanth_sweet-bobcat-36.html
│   ├── bandirevanth_tame-fox-42.html
│   ├── barisdogansutcu_average-chipmunk-44.html
│   ├── barisdogansutcu_big-moose-69.html
│   ├── barisdogansutcu_bitter-dragon-16.html
│   ├── barisdogansutcu_black-duck-67.html
│   ├── barisdogansutcu_blue-badger-94.html
│   ├── barisdogansutcu_chatty-snake-91.html
│   ├── barisdogansutcu_fuzzy-bullfrog-72.html
│   ├── barisdogansutcu_heavy-dragon-15.html
│   ├── barisdogansutcu_little-penguin-13.html
│   ├── barisdogansutcu_loud-mayfly-89.html
│   ├── barisdogansutcu_lovely-walrus-42.html
│   ├── barisdogansutcu_quiet-mayfly-12.html
│   ├── barisdogansutcu_rare-owl-43.html
│   ├── barisdogansutcu_red-goat-98.html
│   ├── barisdogansutcu_tall-wombat-35.html
│   ├── barisdogansutcu_warm-skunk-76.html
│   ├── barisdogansutcu_wet-otter-24.html
│   ├── barisdogansutcu_yellow-husky-22.html
│   ├── benjimich_lovely-octopus-40.html
│   ├── benjimich_wonderful-penguin-4.html
│   ├── benjimich_young-pug-75.html
│   ├── bhaveshxrawat_neat-robin-34.html
│   ├── bhaveshxrawat_red-stingray-60.html
│   ├── bhaveshxrawat_spotty-snail-58.html
│   ├── biswacpcode_curvy-crab-71.html
│   ├── bociKond_happy-bear-29.html
│   ├── bociKond_itchy-grasshopper-27.html
│   ├── bociKond_tidy-panda-85.html
│   ├── boryanakrasteva_ancient-mule-42.html
│   ├── boryanakrasteva_massive-jellyfish-28.html
│   ├── boryanakrasteva_shy-treefrog-100.html
│   ├── boryanakrasteva_sour-cow-47.html
│   ├── boryanakrasteva_splendid-goose-38.html
│   ├── boryanakrasteva_spotty-bulldog-3.html
│   ├── boryanakrasteva_terrible-dingo-70.html
│   ├── boryanakrasteva_tidy-falcon-17.html
│   ├── boryanakrasteva_unlucky-duck-40.html
│   ├── btongheng_blue-bobcat-63.html
│   ├── carlosepcc_heavy-emu-25.html
│   ├── catraco_blue-bulldog-58.html
│   ├── catraco_fluffy-quail-74.html
│   ├── catraco_friendly-snake-37.html
│   ├── catraco_funny-impala-9.html
│   ├── catraco_orange-cat-31.html
│   ├── catraco_rare-monkey-14.html
│   ├── catraco_short-starfish-66.html
│   ├── catraco_spotty-catfish-33.html
│   ├── catraco_tasty-shrimp-6.html
│   ├── chethan025_loud-goat-75.html
│   ├── cjnoise_stupid-fish-62.html
│   ├── coding-masala_rotten-chicken-28.html
│   ├── cohencoo_massive-monkey-39.html
│   ├── cosnametv_fast-otter-99.html
│   ├── csemszepp_hot-mole-45.html
│   ├── csemszepp_loud-impala-43.html
│   ├── csemszepp_purple-treefrog-92.html
│   ├── csozidev_lovely-husky-50.html
│   ├── csozidev_pretty-snail-69.html
│   ├── csozidev_spotty-lion-8.html
│   ├── cssbuttons-io_brown-otter-21.html
│   ├── cssbuttons-io_calm-tiger-42.html
│   ├── cssbuttons-io_evil-monkey-41.html
│   ├── cssbuttons-io_fat-tiger-100.html
│   ├── cssbuttons-io_friendly-dragon-76.html
│   ├── cssbuttons-io_funny-dog-69.html
│   ├── cssbuttons-io_massive-mayfly-74.html
│   ├── cssbuttons-io_nice-walrus-6.html
│   ├── cssbuttons-io_plastic-mule-29.html
│   ├── cssbuttons-io_purple-gecko-91.html
│   ├── cssbuttons-io_slippery-jellyfish-67.html
│   ├── cssbuttons-io_stale-rattlesnake-87.html
│   ├── cssbuttons-io_stupid-impala-51.html
│   ├── cssbuttons-io_tame-panda-59.html
│   ├── cssbuttons-io_weak-firefox-5.html
│   ├── cssbuttons-io_wonderful-baboon-62.html
│   ├── cuatrofender_afraid-monkey-100.html
│   ├── cybrejon_old-termite-43.html
│   ├── d3uceY_dry-gecko-28.html
│   ├── d3uceY_unlucky-rat-66.html
│   ├── d4niz_good-octopus-19.html
│   ├── dalioscode_swift-dolphin-48.html
│   ├── dalioscode_swift-wombat-47.html
│   ├── danilppzz_loud-badger-4.html
│   ├── danilppzz_wet-ape-7.html
│   ├── david-mohseni_brave-shrimp-86.html
│   ├── david-mohseni_green-gecko-20.html
│   ├── deepak16375_hungry-tiger-20.html
│   ├── deepak16375_ugly-crab-3.html
│   ├── devestter_serious-insect-76.html
│   ├── devestter_stupid-fly-50.html
│   ├── devkatyall_fuzzy-warthog-26.html
│   ├── doniaskima_brown-falcon-48.html
│   ├── doniaskima_fluffy-bulldog-70.html
│   ├── doniaskima_great-dolphin-45.html
│   ├── doniaskima_happy-moth-17.html
│   ├── doniaskima_happy-turtle-32.html
│   ├── doniaskima_heavy-skunk-100.html
│   ├── doniaskima_hungry-donkey-93.html
│   ├── doniaskima_nervous-wombat-2.html
│   ├── doniaskima_old-catfish-59.html
│   ├── doniaskima_selfish-dingo-7.html
│   ├── doniaskima_shaggy-ape-9.html
│   ├── doniaskima_smart-bear-14.html
│   ├── doniaskima_stupid-walrus-83.html
│   ├── doniaskima_swift-newt-52.html
│   ├── doniaskima_weak-penguin-24.html
│   ├── doniaskima_wicked-eagle-30.html
│   ├── doniaskima_wise-goat-6.html
│   ├── dvirpro_stupid-impala-26.html
│   ├── dylanharriscameron_good-dingo-46.html
│   ├── e-coders_breezy-cobra-8.html
│   ├── e-coders_gentle-seahorse-53.html
│   ├── e-coders_great-falcon-16.html
│   ├── e-coders_nervous-chipmunk-49.html
│   ├── e-coders_new-shrimp-32.html
│   ├── e-coders_smart-ladybug-29.html
│   ├── eduardo-amaro-maciel_honest-bobcat-27.html
│   ├── eduardo-amaro-maciel_slimy-stingray-64.html
│   ├── eirikvold_foolish-grasshopper-52.html
│   ├── ekhassan_friendly-dolphin-62.html
│   ├── elijahgummer_angry-quail-96.html
│   ├── elijahgummer_breezy-liger-35.html
│   ├── elijahgummer_bright-chicken-11.html
│   ├── elijahgummer_fluffy-gecko-12.html
│   ├── elijahgummer_friendly-wasp-61.html
│   ├── elijahgummer_hard-turkey-58.html
│   ├── elijahgummer_proud-goat-69.html
│   ├── elijahgummer_purple-sloth-17.html
│   ├── elijahgummer_short-bird-25.html
│   ├── elijahgummer_slippery-dragonfly-100.html
│   ├── elijahgummer_stale-fireant-57.html
│   ├── elijahgummer_sweet-rabbit-5.html
│   ├── elijahgummer_sweet-vampirebat-42.html
│   ├── elijahgummer_weak-rattlesnake-90.html
│   ├── elijahgummer_wise-jellyfish-93.html
│   ├── elijahwgummer-poc_honest-falcon-100.html
│   ├── emmanuelh-dev_itchy-turtle-88.html
│   ├── ercnersoy_average-warthog-24.html
│   ├── ercnersoy_bitter-swan-59.html
│   ├── ercnersoy_fat-impala-73.html
│   ├── ercnersoy_friendly-catfish-72.html
│   ├── ercnersoy_good-fly-51.html
│   ├── ercnersoy_nasty-panda-71.html
│   ├── ercnersoy_perfect-newt-42.html
│   ├── ercnersoy_pretty-seahorse-32.html
│   ├── ercnersoy_quiet-penguin-43.html
│   ├── ercnersoy_spicy-turkey-3.html
│   ├── ercnersoy_swift-bullfrog-99.html
│   ├── ernestnash_cold-turtle-83.html
│   ├── escannord_lovely-gecko-23.html
│   ├── escannord_old-grasshopper-30.html
│   ├── escannord_smooth-bat-37.html
│   ├── escannord_white-starfish-13.html
│   ├── eslam-hany_fresh-octopus-46.html
│   ├── eslam-hany_grumpy-elephant-48.html
│   ├── estefaniarizzo_dull-donkey-18.html
│   ├── fabiodevbr_shy-termite-9.html
│   ├── faizanullah1999_angry-snake-12.html
│   ├── fanishah_silly-deer-26.html
│   ├── fanishah_smart-dog-17.html
│   ├── fanishah_tame-goose-53.html
│   ├── faxriddin20_lazy-squid-52.html
│   ├── faxriddin20_splendid-wolverine-24.html
│   ├── faxriddin20_tall-kangaroo-61.html
│   ├── faxriddin20_yellow-falcon-57.html
│   ├── fcb4355_breezy-bulldog-15.html
│   ├── fcb4355_nervous-chipmunk-95.html
│   ├── felipesntr_angry-bird-25.html
│   ├── felipesntr_dangerous-deer-2.html
│   ├── felipesntr_quiet-rattlesnake-27.html
│   ├── felipesntr_strange-bobcat-47.html
│   ├── felipesntr_yellow-robin-29.html
│   ├── ferlagher_afraid-dingo-99.html
│   ├── floki1250_purple-otter-34.html
│   ├── flxderdev_fast-treefrog-50.html
│   ├── gagan-gv_fat-pug-54.html
│   ├── gagan-gv_massive-goat-19.html
│   ├── gagan-gv_rotten-fish-89.html
│   ├── gagan-gv_soft-dolphin-57.html
│   ├── gagan-gv_stupid-parrot-100.html
│   ├── gamerlord295_polite-husky-38.html
│   ├── garerim_odd-dragonfly-16.html
│   ├── garerim_splendid-snail-23.html
│   ├── gauravsharmadriveit_unlucky-cat-70.html
│   ├── gharsh11032000_ancient-elephant-87.html
│   ├── gharsh11032000_average-falcon-37.html
│   ├── gharsh11032000_bad-dragon-47.html
│   ├── gharsh11032000_black-dodo-44.html
│   ├── gharsh11032000_bright-warthog-8.html
│   ├── gharsh11032000_cuddly-squid-93.html
│   ├── gharsh11032000_cuddly-turkey-5.html
│   ├── gharsh11032000_foolish-sloth-90.html
│   ├── gharsh11032000_friendly-turkey-54.html
│   ├── gharsh11032000_hot-grasshopper-70.html
│   ├── gharsh11032000_loud-chicken-53.html
│   ├── gharsh11032000_loud-puma-8.html
│   ├── gharsh11032000_massive-gecko-17.html
│   ├── gharsh11032000_massive-yak-100.html
│   ├── gharsh11032000_neat-bullfrog-61.html
│   ├── gharsh11032000_neat-treefrog-57.html
│   ├── gharsh11032000_orange-hound-27.html
│   ├── gharsh11032000_pink-elephant-19.html
│   ├── gharsh11032000_splendid-badger-80.html
│   ├── gharsh11032000_weak-fox-87.html
│   ├── gksckt_moody-dragonfly-90.html
│   ├── gksckt_young-eagle-60.html
│   ├── glisovic01_purple-shrimp-29.html
│   ├── guilhermeyohan_pretty-liger-37.html
│   ├── guilhermeyohan_wet-pug-5.html
│   ├── gustavofusco_lazy-starfish-84.html
│   ├── hakemdamer222_funny-ape-73.html
│   ├── hamoode-taha-04_red-cobra-61.html
│   ├── hannahyockel_wicked-bobcat-71.html
│   ├── hannahyockel_young-termite-87.html
│   ├── himanshu9682_wise-shrimp-26.html
│   ├── hnguyentrung20_slimy-dingo-46.html
│   ├── hssqrshi_light-rattlesnake-90.html
│   ├── htwarriors108_lazy-owl-9.html
│   ├── htwarriors108_spicy-bird-33.html
│   ├── htwarriors108_tender-cobra-44.html
│   ├── iDamjan_horrible-monkey-25.html
│   ├── iZOXVL_wise-goat-75.html
│   ├── iamriishav_old-liger-56.html
│   ├── ilkhoeri_chilly-sloth-36.html
│   ├── ilkhoeri_honest-panther-87.html
│   ├── ilyas-hadi_good-deer-47.html
│   ├── irfnmdlptra_black-warthog-78.html
│   ├── irfnmdlptra_strong-cheetah-50.html
│   ├── isfandiyor132_witty-falcon-39.html
│   ├── iswearcristi_breezy-skunk-21.html
│   ├── itay1313_orange-otter-84.html
│   ├── itay1313_tender-sheep-90.html
│   ├── jdm-encompass_clever-lizard-42.html
│   ├── jeremyssocial_silly-lionfish-21.html
│   ├── joe-herbert_quick-jellyfish-81.html
│   ├── joe-watson-sbf_ordinary-turtle-50.html
│   ├── joe-watson-sbf_swift-husky-44.html
│   ├── kalp-lathia_cold-cougar-17.html
│   ├── kamehame-ha_dull-dog-37.html
│   ├── kamehame-ha_grumpy-vampirebat-43.html
│   ├── kamehame-ha_kind-otter-31.html
│   ├── kamehame-ha_swift-penguin-73.html
│   ├── kandalgaonkarshubham_yellow-dolphin-39.html
│   ├── ke1221_ancient-walrus-24.html
│   ├── kennyotsu_blue-dragon-34.html
│   ├── kennyotsu_witty-bullfrog-54.html
│   ├── kevkevkevin_bright-monkey-48.html
│   ├── kevkevkevin_tall-horse-10.html
│   ├── killiandvcz_giant-turkey-14.html
│   ├── kiru2741_silly-yak-73.html
│   ├── kirzin_selfish-kangaroo-64.html
│   ├── kleenpulse_dangerous-horse-41.html
│   ├── kosedagyazilim_quick-snail-70.html
│   ├── krlozCJ_blue-dodo-17.html
│   ├── kuzanaa_young-rat-5.html
│   ├── kyle1dev_chilly-goose-0.html
│   ├── laminelawal_sharp-dodo-86.html
│   ├── laminelawal_wise-turtle-66.html
│   ├── learnMyHobby_dangerous-sheep-52.html
│   ├── lenfear23_empty-lion-5.html
│   ├── lenfear23_terrible-walrus-31.html
│   ├── levxyca_tidy-mayfly-7.html
│   ├── linkb15_funny-robin-11.html
│   ├── louloudev59_shy-earwig-22.html
│   ├── louloudev59_swift-puma-88.html
│   ├── lumamantelli_happy-falcon-35.html
│   ├── lumamantelli_itchy-elephant-94.html
│   ├── mRcOol7_quiet-moth-18.html
│   ├── mRcOol7_rotten-yak-63.html
│   ├── marcelodolza_fat-zebra-11.html
│   ├── mark-edison-jim_dangerous-penguin-53.html
│   ├── martinval9_nervous-owl-11.html
│   ├── mateusneves_stupid-husky-53.html
│   ├── mawi-man_curvy-tiger-34.html
│   ├── mayurd8862_bad-newt-60.html
│   ├── mayurd8862_itchy-elephant-78.html
│   ├── meermubashar_rotten-swan-33.html
│   ├── megasteve19_shy-eel-92.html
│   ├── menezes11_afraid-lizard-67.html
│   ├── mi-series_bright-termite-75.html
│   ├── mi-series_fat-rabbit-79.html
│   ├── mi-series_little-frog-95.html
│   ├── mi-series_terrible-sheep-85.html
│   ├── mi-series_unlucky-elephant-56.html
│   ├── mi-series_wicked-sloth-7.html
│   ├── milegelu_tough-cobra-42.html
│   ├── mininaim_helpless-horse-85.html
│   ├── misaraadel_dry-cow-55.html
│   ├── misaraadel_smart-otter-53.html
│   ├── misaraadel_tame-elephant-97.html
│   ├── mobinkakei_ancient-goose-30.html
│   ├── mobinkakei_cold-bat-89.html
│   ├── mobinkakei_great-insect-77.html
│   ├── mobinkakei_light-pug-30.html
│   ├── mobinkakei_silent-kangaroo-88.html
│   ├── mobinkakei_wise-walrus-71.html
│   ├── mostafabazyar_horrible-goat-29.html
│   ├── mouadh-n_dry-vampirebat-89.html
│   ├── mrhyddenn_afraid-skunk-10.html
│   ├── mrhyddenn_brown-penguin-10.html
│   ├── mrhyddenn_cuddly-moth-41.html
│   ├── mrhyddenn_cuddly-zebra-68.html
│   ├── mrhyddenn_mighty-duck-73.html
│   ├── mrhyddenn_modern-puma-17.html
│   ├── mrhyddenn_moody-badger-62.html
│   ├── mrhyddenn_popular-sheep-67.html
│   ├── mrhyddenn_red-stingray-4.html
│   ├── mrhyddenn_slimy-jellyfish-95.html
│   ├── mrhyddenn_soft-moose-34.html
│   ├── mrhyddenn_spotty-rabbit-35.html
│   ├── mrhyddenn_stale-cheetah-42.html
│   ├── mrhyddenn_tall-goose-46.html
│   ├── mrhyddenn_tricky-baboon-12.html
│   ├── mrhyddenn_unlucky-wolverine-36.html
│   ├── mrhyddenn_weak-swan-50.html
│   ├── mrhyddenn_wet-cobra-49.html
│   ├── mrtqzbek11_ancient-octopus-81.html
│   ├── mrtqzbek11_moody-bulldog-15.html
│   ├── mtsrakibul1_proud-emu-92.html
│   ├── mucahit312ataman610_bright-rattlesnake-77.html
│   ├── n-jaisabai_lovely-bullfrog-53.html
│   ├── namecho_slippery-moth-23.html
│   ├── natelyt12_calm-pug-41.html
│   ├── nathAd17_heavy-warthog-57.html
│   ├── nazarbayev01_moody-otter-91.html
│   ├── neerajbaniwal_hungry-mule-59.html
│   ├── neerajbaniwal_old-cobra-77.html
│   ├── neerajbaniwal_strong-pig-36.html
│   ├── newrocker2468_tiny-frog-22.html
│   ├── nhfiz_unlucky-pug-80.html
│   ├── niat786_moody-horse-75.html
│   ├── niat786_perfect-warthog-57.html
│   ├── niat786_swift-bullfrog-83.html
│   ├── niat786_tender-cobra-42.html
│   ├── nikk7007_blue-mayfly-40.html
│   ├── nikk7007_chatty-bulldog-58.html
│   ├── nikk7007_nasty-wasp-56.html
│   ├── nima-mollazadeh_cold-monkey-21.html
│   ├── nima-mollazadeh_jolly-cow-72.html
│   ├── nishikalewis_young-rat-46.html
│   ├── njesenberger_thin-owl-11.html
│   ├── nkhlrjrs_hungry-pig-21.html
│   ├── omar-alghaish_spicy-mule-84.html
│   ├── ossoboy_calm-kangaroo-77.html
│   ├── ozgeozkaraa01_curvy-insect-99.html
│   ├── ozgeozkaraa01_great-dolphin-11.html
│   ├── ozgeozkaraa01_jolly-squid-49.html
│   ├── ozgeozkaraa01_plastic-elephant-49.html
│   ├── ozgeozkaraa01_rare-termite-94.html
│   ├── ozgeozkaraa01_unlucky-snail-4.html
│   ├── pamtbi_proud-mayfly-64.html
│   ├── pipic1_slimy-parrot-86.html
│   ├── pminedev_sharp-gecko-68.html
│   ├── portseif_afraid-baboon-7.html
│   ├── portseif_popular-octopus-83.html
│   ├── pradipkaityuiux_hungry-lizard-38.html
│   ├── pranav0s_modern-firefox-53.html
│   ├── praveen-prasad2_jolly-moose-71.html
│   ├── praveen-prasad2_swift-yak-93.html
│   ├── prince192000_bitter-jellyfish-76.html
│   ├── prince192000_heavy-panda-63.html
│   ├── pruthivithejan_horrible-emu-23.html
│   ├── r7chardgh_ancient-starfish-5.html
│   ├── r7chardgh_great-eel-58.html
│   ├── r7chardgh_quiet-wasp-56.html
│   ├── r7chardgh_shaggy-octopus-89.html
│   ├── r7chardgh_stale-wombat-66.html
│   ├── rajanarahul93_sour-eel-71.html
│   ├── ramdaniAli_mean-cobra-4.html
│   ├── reshades_dull-snake-38.html
│   ├── reshades_fast-ladybug-78.html
│   ├── reshades_purple-otter-7.html
│   ├── reyvaxreecded_fat-rabbit-45.html
│   ├── rhino-corey_cowardly-chicken-15.html
│   ├── rohan-krishu_ugly-frog-36.html
│   ├── roroland_brave-moth-43.html
│   ├── roroland_loud-pig-27.html
│   ├── roroland_wonderful-owl-61.html
│   ├── roufkp_chilly-dingo-79.html
│   ├── roufkp_empty-earwig-5.html
│   ├── rrr63_ancient-eel-92.html
│   ├── rrr63_empty-cow-96.html
│   ├── sabbircoder07_pink-turtle-4.html
│   ├── sahilxkhadka_chatty-insect-87.html
│   ├── sahilxkhadka_moody-dodo-87.html
│   ├── sahilxkhadka_pretty-snail-44.html
│   ├── sahilxkhadka_rotten-grasshopper-44.html
│   ├── sahilxkhadka_spotty-dolphin-15.html
│   ├── sahilxkhadka_young-dolphin-79.html
│   ├── sammykINC_average-bat-26.html
│   ├── sashadubovyi_fast-elephant-34.html
│   ├── satyamchaudharydev_afraid-yak-30.html
│   ├── satyamchaudharydev_chatty-chipmunk-42.html
│   ├── satyamchaudharydev_curvy-rat-14.html
│   ├── satyamchaudharydev_dry-sloth-51.html
│   ├── satyamchaudharydev_great-seahorse-44.html
│   ├── satyamchaudharydev_hot-fox-63.html
│   ├── satyamchaudharydev_hungry-parrot-44.html
│   ├── satyamchaudharydev_loud-seahorse-55.html
│   ├── satyamchaudharydev_modern-sheep-10.html
│   ├── satyamchaudharydev_purple-rat-85.html
│   ├── satyamchaudharydev_quick-chicken-50.html
│   ├── satyamchaudharydev_rude-wolverine-24.html
│   ├── sekaiking_tidy-starfish-71.html
│   ├── seyed-mohsen-mousavi_bitter-snail-5.html
│   ├── seyed-mohsen-mousavi_cuddly-newt-70.html
│   ├── seyed-mohsen-mousavi_warm-dingo-23.html
│   ├── seyed-mohsen-mousavi_weak-parrot-44.html
│   ├── shadowfax29_friendly-puma-48.html
│   ├── shadowmurphy_fluffy-dragonfly-11.html
│   ├── shadowmurphy_little-hound-75.html
│   ├── shah1345_spicy-liger-32.html
│   ├── sheptalo_chatty-mule-100.html
│   ├── sherghan7_afraid-owl-82.html
│   ├── simontheonlyone_cuddly-cat-36.html
│   ├── simontheonlyone_happy-baboon-60.html
│   ├── simontheonlyone_loud-husky-46.html
│   ├── simontheonlyone_loud-husky-59.html
│   ├── simontheonlyone_ordinary-starfish-54.html
│   ├── simontheonlyone_warm-duck-56.html
│   ├── snguem_good-jellyfish-18.html
│   ├── sofiapetushok_wet-catfish-33.html
│   ├── sohoning_sharp-impala-97.html
│   ├── sourabhvv_evil-dog-58.html
│   ├── speadfreak_perfect-otter-94.html
│   ├── suda-code_loud-badger-55.html
│   ├── suda-code_unlucky-tiger-39.html
│   ├── sujithg444_nasty-mule-87.html
│   ├── sunnyshaikh_blue-chipmunk-76.html
│   ├── sunnyshaikh_stale-bear-45.html
│   ├── tarantino421_fast-goose-21.html
│   ├── tarantino421_foolish-walrus-75.html
│   ├── tarantino421_light-panther-5.html
│   ├── tarantino421_nasty-wolverine-40.html
│   ├── tarantino421_slimy-newt-73.html
│   ├── tarantino421_swift-zebra-86.html
│   ├── themarcBlanchard_silent-cobra-22.html
│   ├── themrsami_fast-moth-57.html
│   ├── themrsami_helpless-bulldog-100.html
│   ├── themrsami_light-moth-79.html
│   ├── themrsami_sharp-dragonfly-36.html
│   ├── themrsami_tiny-chicken-60.html
│   ├── themrsami_tough-fox-32.html
│   ├── themrsami_weak-deer-87.html
│   ├── tranmanhduy0810_honest-goat-14.html
│   ├── umairmanzoor1143_cuddly-jellyfish-95.html
│   ├── vikas7754_calm-wombat-35.html
│   ├── vikas7754_honest-falcon-30.html
│   ├── vikiWayne_slimy-horse-19.html
│   ├── vikramsinghnegi_massive-panda-81.html
│   ├── vinodjangid07_afraid-falcon-17.html
│   ├── vinodjangid07_afraid-wombat-15.html
│   ├── vinodjangid07_angry-dragonfly-89.html
│   ├── vinodjangid07_average-pig-54.html
│   ├── vinodjangid07_average-zebra-23.html
│   ├── vinodjangid07_brave-goose-29.html
│   ├── vinodjangid07_brave-ladybug-0.html
│   ├── vinodjangid07_brave-treefrog-18.html
│   ├── vinodjangid07_breezy-liger-85.html
│   ├── vinodjangid07_brown-turtle-51.html
│   ├── vinodjangid07_calm-bobcat-18.html
│   ├── vinodjangid07_calm-cougar-24.html
│   ├── vinodjangid07_chilly-kangaroo-37.html
│   ├── vinodjangid07_chilly-newt-81.html
│   ├── vinodjangid07_clever-bird-35.html
│   ├── vinodjangid07_clever-dingo-15.html
│   ├── vinodjangid07_curly-panda-17.html
│   ├── vinodjangid07_curvy-lionfish-94.html
│   ├── vinodjangid07_dangerous-pug-9.html
│   ├── vinodjangid07_dull-ladybug-18.html
│   ├── vinodjangid07_empty-bat-15.html
│   ├── vinodjangid07_evil-chicken-13.html
│   ├── vinodjangid07_fluffy-sheep-17.html
│   ├── vinodjangid07_fresh-tiger-82.html
│   ├── vinodjangid07_funny-panther-79.html
│   ├── vinodjangid07_great-ape-33.html
│   ├── vinodjangid07_grumpy-sloth-7.html
│   ├── vinodjangid07_heavy-badger-29.html
│   ├── vinodjangid07_helpless-starfish-55.html
│   ├── vinodjangid07_horrible-husky-70.html
│   ├── vinodjangid07_horrible-swan-51.html
│   ├── vinodjangid07_lucky-bulldog-57.html
│   ├── vinodjangid07_massive-moose-26.html
│   ├── vinodjangid07_modern-bear-96.html
│   ├── vinodjangid07_nasty-moose-44.html
│   ├── vinodjangid07_neat-panther-45.html
│   ├── vinodjangid07_neat-seahorse-99.html
│   ├── vinodjangid07_nervous-gecko-43.html
│   ├── vinodjangid07_nervous-warthog-37.html
│   ├── vinodjangid07_new-emu-14.html
│   ├── vinodjangid07_new-mole-80.html
│   ├── vinodjangid07_odd-snake-27.html
│   ├── vinodjangid07_orange-donkey-9.html
│   ├── vinodjangid07_ordinary-swan-71.html
│   ├── vinodjangid07_pink-cheetah-68.html
│   ├── vinodjangid07_pretty-octopus-33.html
│   ├── vinodjangid07_proud-quail-59.html
│   ├── vinodjangid07_quiet-turkey-100.html
│   ├── vinodjangid07_rare-stingray-41.html
│   ├── vinodjangid07_red-bobcat-62.html
│   ├── vinodjangid07_slippery-fox-79.html
│   ├── vinodjangid07_smart-emu-83.html
│   ├── vinodjangid07_smooth-rabbit-93.html
│   ├── vinodjangid07_splendid-panda-48.html
│   ├── vinodjangid07_stale-hound-2.html
│   ├── vinodjangid07_strange-penguin-42.html
│   ├── vinodjangid07_tall-termite-79.html
│   ├── vinodjangid07_tame-cobra-18.html
│   ├── vinodjangid07_thin-duck-22.html
│   ├── vinodjangid07_tidy-ape-69.html
│   ├── vinodjangid07_tiny-walrus-86.html
│   ├── vinodjangid07_tricky-bullfrog-41.html
│   ├── vinodjangid07_tricky-rattlesnake-70.html
│   ├── vinodjangid07_wet-catfish-4.html
│   ├── vinodjangid07_wonderful-squid-57.html
│   ├── vinodjangid07_wonderful-yak-52.html
│   ├── vinodjangid07_young-snake-87.html
│   ├── virus231_fat-mouse-84.html
│   ├── vishal2231179_breezy-insect-31.html
│   ├── vishal2231179_giant-frog-58.html
│   ├── vishalparajuli_warm-snake-99.html
│   ├── vladaxnt_neat-badger-22.html
│   ├── wang3616359git_bright-turkey-74.html
│   ├── wang3616359git_hard-pig-94.html
│   ├── watchakorn-18k_chilly-cow-66.html
│   ├── willeumsk_nice-panda-73.html
│   ├── wizard503_breezy-tiger-28.html
│   ├── wizard503_lucky-mouse-88.html
│   ├── xXJollyHAKERXx_swift-fly-20.html
│   ├── xantha01_fresh-earwig-7.html
│   ├── xueyuantan_rotten-pig-19.html
│   ├── yaasiinaxmed_serious-stingray-77.html
│   ├── yaroslavas2001_lovely-fox-50.html
│   ├── yash-mishra150_plastic-zebra-0.html
│   ├── yuuzuk_fat-owl-93.html
│   ├── z1789976172_blue-rat-89.html
│   ├── zanina-yassine_curly-shrimp-52.html
│   ├── zanina-yassine_perfect-penguin-77.html
│   ├── zanina-yassine_shy-octopus-85.html
│   ├── zebra76966_brown-emu-91.html
│   ├── zebra76966_polite-ape-16.html
│   ├── zjssun_curly-seahorse-76.html
│   ├── zjssun_popular-puma-6.html
│   ├── zjssun_tidy-sloth-40.html
│   └── znvscripts_stale-tiger-99.html
├── Cards/
│   ├── 05akalan57_thin-sloth-31.html
│   ├── 0senno_warm-cheetah-38.html
│   ├── 0xnihilism_average-mole-62.html
│   ├── 0xnihilism_cold-tiger-22.html
│   ├── 0xnihilism_moody-moth-91.html
│   ├── 0xnihilism_nasty-husky-13.html
│   ├── 0xnihilism_thin-crab-36.html
│   ├── 1osm_afraid-mouse-29.html
│   ├── 1osm_funny-cat-84.html
│   ├── 1osm_light-chipmunk-10.html
│   ├── 1osm_little-insect-93.html
│   ├── AbanoubMagdy1_hard-zebra-100.html
│   ├── Admin12121_average-parrot-89.html
│   ├── Admin12121_brown-bird-6.html
│   ├── Admin12121_fluffy-vampirebat-68.html
│   ├── Admin12121_little-catfish-39.html
│   ├── Admin12121_plastic-goose-38.html
│   ├── Admin12121_purple-parrot-82.html
│   ├── Admin12121_quick-impala-38.html
│   ├── Admin12121_strange-jellyfish-63.html
│   ├── Admin12121_ugly-sheep-18.html
│   ├── Admin12121_witty-treefrog-58.html
│   ├── Adrwaan_dry-bullfrog-78.html
│   ├── Alaner-xs_sweet-seahorse-62.html
│   ├── Ali-Tahmazi99_curly-insect-62.html
│   ├── AmIt-DasIT_quick-frog-32.html
│   ├── Amine-maker_friendly-pig-12.html
│   ├── AnnixArt_wonderful-liger-82.html
│   ├── AnthonyPreite_tiny-shrimp-10.html
│   ├── Aryan-81_rare-rattlesnake-22.html
│   ├── Bastiennnn_white-lion-97.html
│   ├── Bastiennnn_wicked-dog-68.html
│   ├── Bodyhc_bitter-zebra-88.html
│   ├── Brola2008_calm-octopus-51.html
│   ├── ClawHack1_loud-cat-92.html
│   ├── Clenio21_stale-sloth-57.html
│   ├── Cobp_itchy-ape-77.html
│   ├── Cobp_jolly-skunk-2.html
│   ├── Codewithvinay_afraid-dodo-14.html
│   ├── Codewithvinay_orange-earwig-38.html
│   ├── Cornerstone-04_moody-treefrog-55.html
│   ├── Cornerstone-04_perfect-rattlesnake-29.html
│   ├── Creatlydev_dull-moose-30.html
│   ├── Creatlydev_friendly-fish-0.html
│   ├── Cybercom682_empty-wolverine-58.html
│   ├── Cybercom682_modern-fish-50.html
│   ├── Cybercom682_ordinary-duck-36.html
│   ├── Cybercom682_witty-goose-35.html
│   ├── Dalyn-Liu_polite-deer-52.html
│   ├── Daniel1227k_moody-newt-4.html
│   ├── Darlley_unlucky-mouse-37.html
│   ├── DeepanshuKant_moody-fireant-5.html
│   ├── DellBee_honest-pug-16.html
│   ├── Dhananjoy43_pretty-earwig-32.html
│   ├── EcheverriaJesus_curly-squid-96.html
│   ├── EcheverriaJesus_fluffy-grasshopper-81.html
│   ├── EcheverriaJesus_rare-goat-94.html
│   ├── EcheverriaJesus_stale-yak-33.html
│   ├── EcheverriaJesus_tame-panther-22.html
│   ├── Eclairant69_purple-frog-76.html
│   ├── EddyBel_stale-mule-90.html
│   ├── ElSombrero2_fresh-wombat-97.html
│   ├── ElSombrero2_orange-newt-83.html
│   ├── ElSombrero2_tricky-robin-67.html
│   ├── ElektroRaks_sour-otter-25.html
│   ├── EmmaxPlay_curvy-stingray-36.html
│   ├── EmmaxPlay_itchy-bobcat-50.html
│   ├── EzzoHamdan_strong-earwig-64.html
│   ├── FWDJc_ordinary-mouse-22.html
│   ├── FahadArnob52539_tender-swan-85.html
│   ├── Fatima-Zahrae-Acharki_calm-ape-12.html
│   ├── Fcodingx_afraid-lionfish-0.html
│   ├── FoxVidaan_young-otter-32.html
│   ├── FrM-bot_soft-rabbit-4.html
│   ├── G4b413l_good-crab-75.html
│   ├── G4b413l_polite-wombat-84.html
│   ├── G4b413l_pretty-fireant-44.html
│   ├── G4b413l_smooth-fish-45.html
│   ├── Galahhad_breezy-insect-49.html
│   ├── Gaurav-WebDev_curly-lionfish-2.html
│   ├── Gerente-S4V1T4R_shaggy-kangaroo-21.html
│   ├── Gianluks90_curly-catfish-36.html
│   ├── Giuxpro_quiet-warthog-95.html
│   ├── Hoseinnaqvi_terrible-hound-31.html
│   ├── IWhat1_cold-frog-10.html
│   ├── IWhat1_curvy-fox-39.html
│   ├── IWhat1_nice-pig-2.html
│   ├── IWhat1_old-ladybug-79.html
│   ├── IWhat1_strange-panther-78.html
│   ├── IverMisericordiaM_short-gecko-15.html
│   ├── JOBOYA_chilly-sheep-21.html
│   ├── Jamshibkl_heavy-goat-11.html
│   ├── Jarol20cb_sour-jellyfish-99.html
│   ├── Javierrocadev_angry-puma-14.html
│   ├── Javierrocadev_brave-emu-25.html
│   ├── Javierrocadev_brave-fireant-77.html
│   ├── Javierrocadev_bright-turkey-65.html
│   ├── Javierrocadev_brown-kangaroo-82.html
│   ├── Javierrocadev_calm-firefox-51.html
│   ├── Javierrocadev_chatty-stingray-29.html
│   ├── Javierrocadev_cowardly-starfish-70.html
│   ├── Javierrocadev_curly-wolverine-36.html
│   ├── Javierrocadev_dull-frog-65.html
│   ├── Javierrocadev_fast-panther-65.html
│   ├── Javierrocadev_fluffy-stingray-76.html
│   ├── Javierrocadev_funny-cobra-5.html
│   ├── Javierrocadev_good-sheep-89.html
│   ├── Javierrocadev_great-swan-88.html
│   ├── Javierrocadev_happy-newt-18.html
│   ├── Javierrocadev_itchy-warthog-55.html
│   ├── Javierrocadev_jolly-chipmunk-45.html
│   ├── Javierrocadev_lazy-shrimp-49.html
│   ├── Javierrocadev_loud-dragon-12.html
│   ├── Javierrocadev_lovely-panther-15.html
│   ├── Javierrocadev_modern-dragon-29.html
│   ├── Javierrocadev_nasty-dingo-81.html
│   ├── Javierrocadev_orange-bulldog-55.html
│   ├── Javierrocadev_ordinary-catfish-76.html
│   ├── Javierrocadev_plastic-turtle-87.html
│   ├── Javierrocadev_popular-treefrog-90.html
│   ├── Javierrocadev_pretty-wasp-36.html
│   ├── Javierrocadev_quick-emu-41.html
│   ├── Javierrocadev_red-stingray-37.html
│   ├── Javierrocadev_serious-jellyfish-64.html
│   ├── Javierrocadev_short-bobcat-64.html
│   ├── Javierrocadev_splendid-pig-71.html
│   ├── Javierrocadev_stupid-baboon-34.html
│   ├── Javierrocadev_sweet-cat-65.html
│   ├── Javierrocadev_sweet-chicken-73.html
│   ├── Javierrocadev_sweet-earwig-59.html
│   ├── Javierrocadev_tall-donkey-37.html
│   ├── Javierrocadev_tender-cougar-56.html
│   ├── Javierrocadev_tender-robin-5.html
│   ├── Javierrocadev_terrible-stingray-70.html
│   ├── Javierrocadev_tough-fireant-65.html
│   ├── Javierrocadev_tough-mule-12.html
│   ├── Javierrocadev_wet-panda-59.html
│   ├── Javierrocadev_wicked-skunk-52.html
│   ├── Javierrocadev_wonderful-bobcat-57.html
│   ├── Javierrocadev_young-panda-66.html
│   ├── JaydipPrajapati1910_bitter-fireant-97.html
│   ├── JaydipPrajapati1910_dry-termite-86.html
│   ├── JaydipPrajapati1910_great-panda-16.html
│   ├── JaydipPrajapati1910_kind-lionfish-71.html
│   ├── JaydipPrajapati1910_popular-walrus-75.html
│   ├── JaydipPrajapati1910_slimy-starfish-15.html
│   ├── JaydipPrajapati1910_strange-walrus-5.html
│   ├── JesusRafaelNavaCruz_soft-cat-28.html
│   ├── JinHuynh_friendly-octopus-41.html
│   ├── JkHuger_dull-impala-9.html
│   ├── JkHuger_nice-walrus-27.html
│   ├── JkHuger_spotty-swan-68.html
│   ├── John-CFO_heavy-goose-49.html
│   ├── JohnnyCSilva_black-rabbit-68.html
│   ├── JohnnyCSilva_jolly-elephant-67.html
│   ├── JohnnyCSilva_quick-chicken-16.html
│   ├── JohnnyCSilva_spicy-vampirebat-51.html
│   ├── JohnnyCSilva_ugly-stingray-77.html
│   ├── JoseIsra_white-pug-89.html
│   ├── Juanes200122_light-seahorse-74.html
│   ├── Kagamiie_funny-ladybug-49.html
│   ├── KareemTolan_funny-pug-52.html
│   ├── Kemboi-Dun_grumpy-snail-54.html
│   ├── Kemboi-Dun_slimy-chicken-73.html
│   ├── Kemboi-Dun_spotty-squid-30.html
│   ├── KhaledMatalkah_fuzzy-bullfrog-8.html
│   ├── KhaledMatalkah_slippery-stingray-30.html
│   ├── KillerRP_ordinary-ladybug-100.html
│   ├── Koopro_tidy-cobra-63.html
│   ├── Lakshay-art_lazy-goose-42.html
│   ├── Lakshay-art_light-termite-47.html
│   ├── Lakshay-art_shy-puma-30.html
│   ├── Lakshay-art_soft-dingo-98.html
│   ├── LeonKohli_chatty-lionfish-6.html
│   ├── LeryLey_silent-horse-11.html
│   ├── Li-Deheng_itchy-octopus-9.html
│   ├── Li-Deheng_sweet-liger-88.html
│   ├── LilaRest_quick-dragonfly-7.html
│   ├── Lmickk2_brown-sheep-53.html
│   ├── Lmickk2_wonderful-robin-20.html
│   ├── Lucaasbre_clever-lizard-75.html
│   ├── Luciifer666_soft-eagle-25.html
│   ├── MRez321_slippery-owl-0.html
│   ├── MRez321_tame-rat-4.html
│   ├── MadelineMaid_tidy-parrot-53.html
│   ├── Madflows_great-chipmunk-4.html
│   ├── Manish-Tamang_cold-tiger-81.html
│   ├── Manish-Tamang_cuddly-rabbit-84.html
│   ├── Manish-Tamang_empty-firefox-58.html
│   ├── Manish-Tamang_fluffy-horse-12.html
│   ├── Manish-Tamang_honest-earwig-91.html
│   ├── Manish-Tamang_smooth-quail-65.html
│   ├── Manish-Tamang_weak-vampirebat-44.html
│   ├── Manish-Tamang_witty-bullfrog-37.html
│   ├── Manishtmang_shaggy-parrot-26.html
│   ├── Mhyar-nsi_modern-fly-46.html
│   ├── MijailVillegas_empty-otter-85.html
│   ├── MijailVillegas_kind-gecko-74.html
│   ├── MijailVillegas_smooth-firefox-47.html
│   ├── MikeAndrewDesigner_fast-octopus-78.html
│   ├── Mizohack_old-sloth-96.html
│   ├── Muhammad-Abdullah-Zeeshan_lazy-lion-3.html
│   ├── MuhammadHasann_brown-falcon-18.html
│   ├── MuhammadHasann_calm-sloth-44.html
│   ├── MuhammadHasann_fast-badger-70.html
│   ├── MuhammadHasann_friendly-dragonfly-11.html
│   ├── MuhammadHasann_heavy-skunk-16.html
│   ├── MuhammadHasann_hot-liger-0.html
│   ├── MuhammadHasann_mighty-tiger-68.html
│   ├── MuhammadHasann_old-eagle-40.html
│   ├── MuhammadHasann_proud-vampirebat-28.html
│   ├── MuhammadHasann_smooth-impala-44.html
│   ├── Na3ar-17_afraid-bulldog-66.html
│   ├── Na3ar-17_bitter-moth-75.html
│   ├── Na3ar-17_curvy-bird-92.html
│   ├── Na3ar-17_terrible-gecko-91.html
│   ├── Nayzerftn_mighty-goat-69.html
│   ├── NlghtM4re_evil-warthog-61.html
│   ├── NlghtM4re_pretty-walrus-13.html
│   ├── NotReal22_popular-gecko-14.html
│   ├── NouvelleTechno_bright-cow-83.html
│   ├── NouvelleTechno_fast-dragon-71.html
│   ├── PINKYSEE_nervous-cougar-38.html
│   ├── ParasSalunke_tasty-tiger-60.html
│   ├── Peary74_neat-cobra-65.html
│   ├── Praashoo7_black-lizard-62.html
│   ├── Praashoo7_chilly-dragon-63.html
│   ├── Praashoo7_fat-horse-65.html
│   ├── Praashoo7_horrible-penguin-32.html
│   ├── Praashoo7_jolly-bulldog-31.html
│   ├── Praashoo7_old-dingo-81.html
│   ├── Praashoo7_popular-lionfish-100.html
│   ├── Praashoo7_silent-rabbit-57.html
│   ├── Praashoo7_silent-sheep-14.html
│   ├── Praashoo7_thin-sloth-31.html
│   ├── Pradeepsaranbishnoi_loud-turkey-91.html
│   ├── Pradeepsaranbishnoi_nasty-firefox-56.html
│   ├── Pradeepsaranbishnoi_quick-horse-75.html
│   ├── Pradeepsaranbishnoi_strong-treefrog-90.html
│   ├── Pranali9922_honest-grasshopper-12.html
│   ├── Prince4fff_slippery-baboon-37.html
│   ├── PriyanshuGupta28_cuddly-gecko-29.html
│   ├── PriyanshuGupta28_silly-turtle-43.html
│   ├── PriyanshuGupta28_sour-rat-57.html
│   ├── ProgramaConPid_dangerous-shrimp-68.html
│   ├── Qasimsaifi_brown-cheetah-82.html
│   ├── RashadGhzi_bad-pig-34.html
│   ├── RashadGhzi_tasty-bulldog-46.html
│   ├── Rodrypaladin_fluffy-eagle-31.html
│   ├── Rodrypaladin_funny-grasshopper-66.html
│   ├── Rodrypaladin_itchy-sloth-9.html
│   ├── Rodrypaladin_nasty-turkey-29.html
│   ├── Rodrypaladin_plastic-otter-67.html
│   ├── RozheenNM_tough-impala-7.html
│   ├── SRIMANKS_lazy-jellyfish-5.html
│   ├── Saad3092003_angry-wombat-84.html
│   ├── Saad3092003_chatty-rabbit-71.html
│   ├── Saad3092003_itchy-starfish-99.html
│   ├── Saad3092003_pretty-quail-56.html
│   ├── SachinKumar666_spicy-tiger-75.html
│   ├── Samalander0_sweet-eel-98.html
│   ├── SanthoshSJ-Dev_strong-ladybug-68.html
│   ├── SantiagoBoS_wet-fish-33.html
│   ├── Sashank02_new-warthog-10.html
│   ├── Satwinder04_sour-panda-50.html
│   ├── Satwinder04_sweet-donkey-86.html
│   ├── Satwinder04_young-zebra-44.html
│   ├── SelfMadeSystem_smooth-vampirebat-98.html
│   ├── SelfMadeSystem_swift-bullfrog-34.html
│   ├── Sharkotech_cowardly-walrus-58.html
│   ├── SharpTH_fluffy-liger-83.html
│   ├── Shoh2008_light-squid-68.html
│   ├── Shoh2008_little-termite-6.html
│   ├── Shoh2008_serious-badger-45.html
│   ├── Shohjahon3807_thin-falcon-19.html
│   ├── ShrinilDhorda_strong-mayfly-18.html
│   ├── Smit-Prajapati_curly-goose-86.html
│   ├── Smit-Prajapati_dull-dolphin-40.html
│   ├── Smit-Prajapati_funny-sloth-75.html
│   ├── Smit-Prajapati_great-bat-98.html
│   ├── Smit-Prajapati_massive-insect-5.html
│   ├── Smit-Prajapati_moody-rat-79.html
│   ├── Smit-Prajapati_smart-liger-5.html
│   ├── Smit-Prajapati_spicy-rat-83.html
│   ├── Smit-Prajapati_stupid-bullfrog-39.html
│   ├── Smit-Prajapati_tricky-lionfish-78.html
│   ├── SmookyDev_afraid-liger-45.html
│   ├── SmookyDev_bright-grasshopper-15.html
│   ├── SmookyDev_hungry-cobra-77.html
│   ├── SmookyDev_nasty-zebra-5.html
│   ├── SmookyDev_odd-grasshopper-27.html
│   ├── SmookyDev_polite-puma-22.html
│   ├── SmookyDev_ugly-baboon-35.html
│   ├── SmookyDev_witty-otter-49.html
│   ├── SmookyDev_wonderful-octopus-16.html
│   ├── SouravBandyopadhyay_friendly-skunk-89.html
│   ├── SouravBandyopadhyay_giant-squid-24.html
│   ├── SouravBandyopadhyay_sharp-parrot-48.html
│   ├── SouravBandyopadhyay_tricky-puma-59.html
│   ├── Sourcesketch_giant-owl-78.html
│   ├── Spacious74_black-dragon-31.html
│   ├── Spacious74_moody-owl-18.html
│   ├── Spacious74_new-dog-87.html
│   ├── Spacious74_proud-fly-20.html
│   ├── Spacious74_silent-quail-90.html
│   ├── Spacious74_spotty-crab-93.html
│   ├── Spacious74_tame-catfish-19.html
│   ├── Spacious74_warm-hound-89.html
│   ├── Spacious74_wicked-rat-71.html
│   ├── Spektruml_cowardly-bat-67.html
│   ├── StealthWorm_curvy-gecko-61.html
│   ├── StefanR1901_empty-mule-38.html
│   ├── SteveBloX_dangerous-warthog-85.html
│   ├── SteveBloX_purple-panther-21.html
│   ├── SujitAdroja_big-treefrog-20.html
│   ├── Sujitkavaiya_mighty-pig-81.html
│   ├── TamaniPhiri_smooth-stingray-60.html
│   ├── TemRevil_green-goose-29.html
│   ├── Thomasfadi_fast-puma-64.html
│   ├── Tiagoadag_cuddly-catfish-6.html
│   ├── TimTrayler_strange-cat-80.html
│   ├── Toseef-Ahmad_ancient-pug-90.html
│   ├── Tsiangana_brave-kangaroo-28.html
│   ├── Tsiangana_lovely-bear-22.html
│   ├── Tsiangana_modern-monkey-77.html
│   ├── Uncannypotato69_angry-rattlesnake-53.html
│   ├── Uncannypotato69_odd-pig-10.html
│   ├── Uncannypotato69_polite-sloth-0.html
│   ├── Uncannypotato69_serious-frog-21.html
│   ├── Uncannypotato69_sweet-donkey-14.html
│   ├── Uncannypotato69_tiny-squid-86.html
│   ├── Uncannypotato69_warm-yak-96.html
│   ├── VD232004_orange-cougar-84.html
│   ├── VashonG_big-chipmunk-8.html
│   ├── VashonG_chatty-bear-22.html
│   ├── VashonG_giant-mouse-17.html
│   ├── VashonG_happy-insect-24.html
│   ├── Vikikos_sweet-chipmunk-65.html
│   ├── VinciiAtreus_purple-bird-79.html
│   ├── Web-Potato_quick-bird-33.html
│   ├── WittyHydra_fluffy-newt-18.html
│   ├── WrongCodeU_fast-bulldog-65.html
│   ├── Yaseen549_chilly-dragon-64.html
│   ├── Yaseen549_fat-octopus-26.html
│   ├── Yaya12085_breezy-eagle-39.html
│   ├── Yaya12085_chatty-eel-94.html
│   ├── Yaya12085_cold-elephant-65.html
│   ├── Yaya12085_curvy-otter-58.html
│   ├── Yaya12085_empty-horse-27.html
│   ├── Yaya12085_giant-elephant-67.html
│   ├── Yaya12085_grumpy-fox-39.html
│   ├── Yaya12085_hard-mole-83.html
│   ├── Yaya12085_heavy-gecko-88.html
│   ├── Yaya12085_hot-swan-8.html
│   ├── Yaya12085_hungry-jellyfish-92.html
│   ├── Yaya12085_jolly-bulldog-80.html
│   ├── Yaya12085_light-cheetah-20.html
│   ├── Yaya12085_light-liger-50.html
│   ├── Yaya12085_little-puma-29.html
│   ├── Yaya12085_lovely-cobra-94.html
│   ├── Yaya12085_massive-firefox-9.html
│   ├── Yaya12085_mean-vampirebat-50.html
│   ├── Yaya12085_nasty-firefox-13.html
│   ├── Yaya12085_pink-mouse-40.html
│   ├── Yaya12085_quiet-bear-76.html
│   ├── Yaya12085_rotten-dolphin-86.html
│   ├── Yaya12085_serious-eagle-83.html
│   ├── Yaya12085_serious-falcon-89.html
│   ├── Yaya12085_silent-donkey-69.html
│   ├── Yaya12085_silly-skunk-16.html
│   ├── Yaya12085_slimy-badger-58.html
│   ├── Yaya12085_soft-jellyfish-99.html
│   ├── Yaya12085_splendid-firefox-37.html
│   ├── Yaya12085_tall-goose-27.html
│   ├── Yaya12085_terrible-dodo-9.html
│   ├── Yaya12085_terrible-otter-19.html
│   ├── Yaya12085_tiny-emu-37.html
│   ├── Yaya12085_ugly-cat-20.html
│   ├── Yaya12085_ugly-earwig-69.html
│   ├── Yaya12085_ugly-mule-59.html
│   ├── Ykingdev_tidy-seahorse-73.html
│   ├── ZeroKaarma_angry-ladybug-41.html
│   ├── ZeroKaarma_wet-goat-13.html
│   ├── ZstarPanda0210_wise-monkey-27.html
│   ├── aadium_black-eel-56.html
│   ├── aadium_fast-pig-0.html
│   ├── aadium_foolish-vampirebat-5.html
│   ├── aadium_mighty-dog-12.html
│   ├── aadium_proud-swan-48.html
│   ├── aadium_soft-firefox-58.html
│   ├── aadium_swift-rat-96.html
│   ├── aadium_unlucky-seahorse-76.html
│   ├── aadium_weak-goose-59.html
│   ├── aadium_wet-bird-34.html
│   ├── abdinejad_tall-stingray-83.html
│   ├── abhishek-06-singh_horrible-tiger-98.html
│   ├── abhusha08_happy-cougar-51.html
│   ├── aboalsim114_quiet-hound-47.html
│   ├── abrahamcalsin_grumpy-ape-40.html
│   ├── abrahamcalsin_odd-zebra-96.html
│   ├── absoluteSTrange_cowardly-sloth-96.html
│   ├── adamgiebl_blue-mole-92.html
│   ├── adamgiebl_horrible-rabbit-39.html
│   ├── adamgiebl_new-crab-79.html
│   ├── adamgiebl_new-lionfish-4.html
│   ├── adamgiebl_serious-penguin-95.html
│   ├── adamgiebl_stale-catfish-69.html
│   ├── adamgiebl_strong-zebra-87.html
│   ├── ahkamboh_quiet-rat-82.html
│   ├── ahmed150up_afraid-octopus-75.html
│   ├── ahmed150up_clever-fly-79.html
│   ├── ahmed150up_clever-panda-88.html
│   ├── ahmed150up_dry-monkey-74.html
│   ├── ahmed150up_fluffy-dragonfly-49.html
│   ├── ahmed150up_funny-rabbit-10.html
│   ├── ahmed150up_fuzzy-bird-5.html
│   ├── ahmedgamal-hub_popular-starfish-56.html
│   ├── ahmedyasserdev_cuddly-gecko-77.html
│   ├── ahmedyasserdev_fat-warthog-51.html
│   ├── ahmedyasserdev_lucky-jellyfish-37.html
│   ├── akshat-patel28_light-otter-66.html
│   ├── akshat-patel28_quick-baboon-29.html
│   ├── akshat-patel28_smart-termite-33.html
│   ├── akshat-patel28_tame-termite-90.html
│   ├── alexmaracinaru_loud-goat-60.html
│   ├── alexmaracinaru_pink-tiger-66.html
│   ├── alexmaracinaru_purple-zebra-61.html
│   ├── alexmaracinaru_tender-fly-40.html
│   ├── alexmaracinaru_white-octopus-62.html
│   ├── alexreyes091_ancient-chicken-80.html
│   ├── alexreyes091_hard-firefox-84.html
│   ├── alexroumi_polite-dodo-16.html
│   ├── alexruix_bright-grasshopper-50.html
│   ├── alexruix_cold-cat-38.html
│   ├── alexruix_cowardly-ape-35.html
│   ├── alexruix_gentle-crab-18.html
│   ├── alexruix_heavy-elephant-39.html
│   ├── alexruix_horrible-skunk-73.html
│   ├── alexruix_itchy-mole-56.html
│   ├── alexruix_loud-baboon-79.html
│   ├── alexruix_lucky-dingo-81.html
│   ├── alexruix_moody-goose-93.html
│   ├── alexruix_new-newt-64.html
│   ├── alexruix_silent-bulldog-61.html
│   ├── alexruix_tough-shrimp-75.html
│   ├── alexruix_weak-lionfish-37.html
│   ├── amanrajnarayan_lucky-quail-98.html
│   ├── andrew-demchenk0_bad-squid-34.html
│   ├── andrew-demchenk0_chatty-hound-50.html
│   ├── andrew-demchenk0_chilly-bird-79.html
│   ├── andrew-demchenk0_hard-cougar-86.html
│   ├── andrew-demchenk0_heavy-mule-52.html
│   ├── andrew-demchenk0_hungry-cobra-76.html
│   ├── andrew-demchenk0_little-monkey-23.html
│   ├── andrew-demchenk0_nervous-bear-89.html
│   ├── andrew-demchenk0_perfect-crab-47.html
│   ├── andrew-demchenk0_quick-impala-15.html
│   ├── andrew-demchenk0_quick-seahorse-69.html
│   ├── andrew-demchenk0_strange-frog-13.html
│   ├── andrew-demchenk0_strange-goose-65.html
│   ├── andrew-demchenk0_stupid-liger-18.html
│   ├── andrew-demchenk0_sweet-eel-60.html
│   ├── andrew-demchenk0_warm-gecko-73.html
│   ├── anniekoop_good-wasp-72.html
│   ├── anthondevg_foolish-dog-65.html
│   ├── ardianhu_stale-lionfish-9.html
│   ├── arshshaikh06_dull-newt-33.html
│   ├── arshshaikh06_hard-cobra-69.html
│   ├── asgardOP_serious-warthog-58.html
│   ├── austintirrell_foolish-termite-80.html
│   ├── ayman-ashine_giant-newt-7.html
│   ├── bahnisikhadhar_swift-rat-55.html
│   ├── benjimich_nervous-goose-2.html
│   ├── benjimich_shaggy-otter-87.html
│   ├── bhaveshxrawat_dangerous-quail-58.html
│   ├── bhaveshxrawat_happy-lizard-10.html
│   ├── bociKond_fluffy-zebra-10.html
│   ├── bociKond_perfect-bear-45.html
│   ├── bociKond_shaggy-pug-39.html
│   ├── boryanakrasteva_rude-rabbit-66.html
│   ├── boryanakrasteva_strong-cat-50.html
│   ├── carlosepcc_dangerous-penguin-84.html
│   ├── catraco_bright-bird-12.html
│   ├── catraco_dry-bulldog-95.html
│   ├── catraco_proud-otter-3.html
│   ├── catraco_spotty-rattlesnake-5.html
│   ├── catraco_unlucky-bat-4.html
│   ├── chethan025_lovely-warthog-68.html
│   ├── codebykay101_red-fox-31.html
│   ├── codebykay101_ugly-lion-23.html
│   ├── csemszepp_tiny-firefox-14.html
│   ├── csozidev_bad-chipmunk-3.html
│   ├── csozidev_neat-jellyfish-86.html
│   ├── csozidev_rare-quail-42.html
│   ├── csozidev_ugly-lionfish-97.html
│   ├── david-mohseni_black-bobcat-14.html
│   ├── david-mohseni_swift-penguin-38.html
│   ├── david-mohseni_witty-kangaroo-75.html
│   ├── david-mohseni_young-frog-89.html
│   ├── devkatyall_gentle-fly-78.html
│   ├── devkatyall_spicy-mule-43.html
│   ├── devkennyy_angry-panther-84.html
│   ├── devsleonardo_white-fox-82.html
│   ├── dhruv465_spotty-cow-20.html
│   ├── directhacker_rare-mayfly-46.html
│   ├── dldrs_cowardly-horse-9.html
│   ├── dylanharriscameron_stupid-mole-90.html
│   ├── dylanharriscameron_tiny-shrimp-95.html
│   ├── dzoshi_bad-warthog-50.html
│   ├── e-coders_calm-stingray-80.html
│   ├── e-coders_clever-walrus-99.html
│   ├── eduardo-amaro-maciel_foolish-falcon-87.html
│   ├── eduardo-amaro-maciel_witty-gecko-70.html
│   ├── elijahgummer_hot-fly-77.html
│   ├── elijahgummer_kind-pig-24.html
│   ├── elijahgummer_tasty-dodo-72.html
│   ├── elijahwgummer-poc_heavy-bear-0.html
│   ├── emmanuelh-dev_ancient-pig-83.html
│   ├── emmanuelh-dev_curly-impala-37.html
│   ├── emmanuelh-dev_curvy-robin-66.html
│   ├── emmanuelh-dev_gentle-crab-69.html
│   ├── emmanuelh-dev_jolly-duck-70.html
│   ├── emmanuelh-dev_orange-cougar-98.html
│   ├── emmanuelh-dev_ugly-fly-91.html
│   ├── emmanuelh-dev_yellow-grasshopper-99.html
│   ├── ercnersoy_serious-skunk-43.html
│   ├── escannord_great-cheetah-66.html
│   ├── escannord_lazy-dingo-11.html
│   ├── escannord_light-monkey-9.html
│   ├── escannord_lovely-panther-66.html
│   ├── escannord_tender-deer-30.html
│   ├── eslam-hany_nasty-zebra-54.html
│   ├── eslam-hany_selfish-bobcat-73.html
│   ├── estefaniarizzo_tame-pug-97.html
│   ├── fanishah_average-panther-44.html
│   ├── floki1250_hot-chipmunk-40.html
│   ├── gagan-gv_afraid-otter-91.html
│   ├── gagan-gv_lovely-dragon-72.html
│   ├── gagan-gv_tidy-elephant-18.html
│   ├── garerim_slippery-bear-89.html
│   ├── gharsh11032000_ancient-starfish-68.html
│   ├── gharsh11032000_curly-newt-100.html
│   ├── gharsh11032000_evil-gecko-58.html
│   ├── gharsh11032000_fuzzy-robin-67.html
│   ├── gharsh11032000_happy-hound-90.html
│   ├── gharsh11032000_heavy-dog-45.html
│   ├── gharsh11032000_heavy-snake-69.html
│   ├── gharsh11032000_horrible-donkey-50.html
│   ├── gharsh11032000_perfect-ladybug-87.html
│   ├── gharsh11032000_rare-bobcat-17.html
│   ├── gharsh11032000_red-hound-90.html
│   ├── gharsh11032000_selfish-owl-57.html
│   ├── gharsh11032000_shy-ape-17.html
│   ├── gharsh11032000_slimy-wolverine-10.html
│   ├── gharsh11032000_tasty-frog-49.html
│   ├── gharsh11032000_tricky-cheetah-78.html
│   ├── github-bishwajeet_tricky-dolphin-77.html
│   ├── hoshikawamaki_strange-firefox-50.html
│   ├── howaboutsalman_calm-otter-73.html
│   ├── htwarriors108_brave-grasshopper-38.html
│   ├── htwarriors108_clever-swan-80.html
│   ├── htwarriors108_funny-snail-57.html
│   ├── htwarriors108_little-cat-84.html
│   ├── htwarriors108_odd-turtle-69.html
│   ├── htwarriors108_proud-fish-6.html
│   ├── htwarriors108_tasty-stingray-56.html
│   ├── iSweat-exe_tall-lizard-70.html
│   ├── i_vickykrishna_bitter-ladybug-48.html
│   ├── iconicchandu_slimy-pug-17.html
│   ├── igoramos77_silly-fireant-70.html
│   ├── ilkhoeri_smooth-quail-87.html
│   ├── imPradhyumn_nice-rattlesnake-46.html
│   ├── innocentpice_short-starfish-76.html
│   ├── jamik-dev_black-monkey-11.html
│   ├── jamik-dev_chatty-walrus-78.html
│   ├── javadpg_odd-dragonfly-46.html
│   ├── javadpg_strong-rabbit-3.html
│   ├── javierBarroso_ordinary-frog-45.html
│   ├── javierBarroso_rare-deer-29.html
│   ├── jeremy-deurvillier_great-treefrog-69.html
│   ├── jeremyssocial_lucky-lionfish-47.html
│   ├── jlutrezehue_light-stingray-80.html
│   ├── joe-herbert_new-goose-94.html
│   ├── joe-herbert_young-insect-90.html
│   ├── joe-watson-sbf_honest-bullfrog-6.html
│   ├── joe-watson-sbf_little-goat-24.html
│   ├── joe-watson-sbf_rude-shrimp-21.html
│   ├── joe-watson-sbf_swift-frog-15.html
│   ├── joe-watson-sbf_wise-quail-35.html
│   ├── jubayer-10_white-catfish-8.html
│   ├── jvcrz_quiet-robin-20.html
│   ├── kalifpermadi_grumpy-treefrog-72.html
│   ├── kamehame-ha_ancient-insect-32.html
│   ├── kamehame-ha_chilly-snake-91.html
│   ├── kamehame-ha_dry-bat-57.html
│   ├── kennyotsu-monochromia_popular-dragonfly-22.html
│   ├── kennyotsu_fast-emu-70.html
│   ├── kennyotsu_proud-moth-58.html
│   ├── kennyotsu_short-ape-5.html
│   ├── kennyotsu_stupid-sloth-94.html
│   ├── kennyotsu_tasty-falcon-38.html
│   ├── kennyotsu_wise-rattlesnake-92.html
│   ├── kennyotsu_witty-deer-12.html
│   ├── krokettenkoal_blue-wombat-33.html
│   ├── laminelawal_white-wombat-4.html
│   ├── lonefox-xxx_horrible-snake-61.html
│   ├── mRcOol7_cowardly-chicken-17.html
│   ├── martinval9_heavy-rat-60.html
│   ├── marwam112010_jolly-lionfish-88.html
│   ├── mi-series_splendid-eagle-61.html
│   ├── milegelu_evil-panda-93.html
│   ├── mirbasit01_green-skunk-3.html
│   ├── mnikita7767_wicked-parrot-99.html
│   ├── mobinkakei_heavy-bulldog-78.html
│   ├── mobinkakei_tough-seahorse-37.html
│   ├── mohamedkhire_dull-octopus-41.html
│   ├── mohsinraza0007_lovely-husky-84.html
│   ├── mrhyddenn_massive-earwig-94.html
│   ├── mrhyddenn_tame-mouse-76.html
│   ├── mrhyddenn_warm-wasp-21.html
│   ├── mrpumps31232_wonderful-mouse-36.html
│   ├── mvykool_honest-shrimp-87.html
│   ├── mykill1_rude-dodo-56.html
│   ├── myshy13_tender-donkey-10.html
│   ├── nanda248_average-goat-70.html
│   ├── nanda248_neat-tiger-26.html
│   ├── omar-alghaish_polite-cat-34.html
│   ├── ozgeozkaraa01_happy-sloth-10.html
│   ├── pamtbi_good-dodo-80.html
│   ├── pathikcomp_brave-pig-89.html
│   ├── pedertanberg_dry-goose-81.html
│   ├── reshades_evil-robin-7.html
│   ├── reshades_rude-dingo-96.html
│   ├── revanth-004_brown-pig-37.html
│   ├── revanth-004_gentle-grasshopper-79.html
│   ├── rmdhnkhsn_strong-quail-100.html
│   ├── roroland_heavy-horse-27.html
│   ├── roroland_shy-cat-11.html
│   ├── sabbircoder07_quick-panther-36.html
│   ├── sabbircoder07_selfish-treefrog-55.html
│   ├── sahilxkhadka_afraid-panther-70.html
│   ├── sahilxkhadka_clever-catfish-31.html
│   ├── sahilxkhadka_clever-goose-52.html
│   ├── sahilxkhadka_hot-octopus-44.html
│   ├── sahilxkhadka_rotten-sloth-50.html
│   ├── saidbl1_helpless-cow-87.html
│   ├── saidbl1_wet-warthog-77.html
│   ├── sangmort_tidy-mole-17.html
│   ├── satyamchaudharydev_brown-puma-94.html
│   ├── satyamchaudharydev_itchy-chipmunk-95.html
│   ├── satyamchaudharydev_stupid-bulldog-53.html
│   ├── satyamchaudharydev_tender-robin-90.html
│   ├── scob337_tricky-panda-21.html
│   ├── seyed-mohsen-mousavi_dull-fly-9.html
│   ├── seyed-mohsen-mousavi_heavy-cobra-18.html
│   ├── seyed-mohsen-mousavi_hot-pig-83.html
│   ├── seyed-mohsen-mousavi_light-dingo-21.html
│   ├── seyed-mohsen-mousavi_orange-jellyfish-58.html
│   ├── seyed-mohsen-mousavi_swift-sloth-95.html
│   ├── seyed-mohsen-mousavi_wicked-chipmunk-81.html
│   ├── shadowfax29_wicked-baboon-62.html
│   ├── shadowmurphy_horrible-rat-35.html
│   ├── shadowmurphy_spicy-eel-22.html
│   ├── shahbaz4783_mean-cheetah-86.html
│   ├── shlomo20_wet-treefrog-28.html
│   ├── simontheonlyone_bitter-eel-31.html
│   ├── sofiapetushok_brave-treefrog-56.html
│   ├── sofiapetushok_jolly-snail-62.html
│   ├── sohoning_ugly-horse-87.html
│   ├── srinivasaiml_lucky-cat-7.html
│   ├── sssynk_proud-emu-10.html
│   ├── suleymanlaarabidev_perfect-husky-88.html
│   ├── sushma-godawari-college_tiny-pig-87.html
│   ├── syahrulnaufal_plastic-puma-91.html
│   ├── themrsami_ancient-kangaroo-58.html
│   ├── themrsami_brown-bear-77.html
│   ├── themrsami_friendly-dodo-71.html
│   ├── themrsami_honest-impala-99.html
│   ├── themrsami_neat-turkey-97.html
│   ├── themrsami_orange-husky-56.html
│   ├── themrsami_ordinary-firefox-60.html
│   ├── themrsami_rude-cougar-5.html
│   ├── themrsami_selfish-fox-70.html
│   ├── tofe812_helpless-fly-63.html
│   ├── tsd29142_grumpy-chicken-19.html
│   ├── uctteam_rare-skunk-4.html
│   ├── vamsidevendrakumar_soft-shrimp-94.html
│   ├── vikas7754_fat-monkey-43.html
│   ├── vikas7754_wet-goose-61.html
│   ├── vinodjangid07_bad-deer-17.html
│   ├── vinodjangid07_brave-elephant-94.html
│   ├── vinodjangid07_chilly-walrus-45.html
│   ├── vinodjangid07_empty-rabbit-37.html
│   ├── vinodjangid07_fast-squid-10.html
│   ├── vinodjangid07_fat-puma-69.html
│   ├── vinodjangid07_foolish-rattlesnake-100.html
│   ├── vinodjangid07_grumpy-mule-23.html
│   ├── vinodjangid07_horrible-eel-23.html
│   ├── vinodjangid07_horrible-liger-62.html
│   ├── vinodjangid07_hot-firefox-91.html
│   ├── vinodjangid07_lazy-rattlesnake-93.html
│   ├── vinodjangid07_ordinary-crab-91.html
│   ├── vinodjangid07_ordinary-newt-65.html
│   ├── vinodjangid07_rude-pig-44.html
│   ├── vinodjangid07_silent-emu-97.html
│   ├── vinodjangid07_silent-wasp-13.html
│   ├── vishnu1100_grumpy-swan-28.html
│   ├── vk-uiux_nasty-chicken-72.html
│   ├── vk-uiux_rotten-mouse-64.html
│   ├── vladaxinte_black-mouse-53.html
│   ├── willeumsk_selfish-hound-16.html
│   ├── wizard503_quiet-wombat-54.html
│   ├── wojtek221221_dry-parrot-61.html
│   ├── wztd_tall-rattlesnake-53.html
│   ├── xantha01_odd-eagle-16.html
│   ├── xantha01_wise-crab-55.html
│   ├── xopc333_soft-shrimp-30.html
│   ├── yariklnv_dangerous-donkey-85.html
│   ├── yaroslavas2001_serious-lion-49.html
│   ├── zakareaaljundi_great-snail-48.html
│   ├── zanina-yassine_dangerous-pug-69.html
│   ├── zanina-yassine_fast-bobcat-88.html
│   ├── zanina-yassine_neat-starfish-50.html
│   ├── zanina-yassine_serious-lizard-22.html
│   ├── zebra76966_rude-lizard-24.html
│   └── zohayrslileh_spicy-parrot-94.html
├── Checkboxes/
│   ├── 010binary_empty-falcon-21.html
│   ├── 3bdel3ziz-T_angry-grasshopper-50.html
│   ├── AIVIIID_hungry-robin-21.html
│   ├── AKAspidey01_itchy-wombat-76.html
│   ├── AbanoubMagdy1_ugly-dog-26.html
│   ├── Alaner-xs_white-parrot-57.html
│   ├── Ali-Tahmazi99_unlucky-termite-68.html
│   ├── AnthonyPreite_nasty-zebra-57.html
│   ├── AyuuLima_helpless-vampirebat-96.html
│   ├── Bodyhc_afraid-octopus-70.html
│   ├── Cevorob_good-wolverine-51.html
│   ├── Cornerstone-04_terrible-kangaroo-96.html
│   ├── Custyyyy_slimy-impala-48.html
│   ├── DaniloMGutavo_stupid-mouse-85.html
│   ├── Dev-MdTuhin_grumpy-panda-46.html
│   ├── EddyBel_smart-insect-43.html
│   ├── G4b413l_smooth-duck-62.html
│   ├── Galahhad_mighty-warthog-42.html
│   ├── Galahhad_old-falcon-43.html
│   ├── Galahhad_sweet-ape-100.html
│   ├── Gautammsharma_massive-rabbit-40.html
│   ├── IndexOC_moody-mouse-53.html
│   ├── JOBOYA_mean-dolphin-53.html
│   ├── Jack17432_shaggy-earwig-15.html
│   ├── Javierrocadev_foolish-wasp-20.html
│   ├── Javierrocadev_itchy-shrimp-52.html
│   ├── Javierrocadev_selfish-mule-45.html
│   ├── JaydipPrajapati1910_odd-rat-12.html
│   ├── JkHuger_horrible-lion-90.html
│   ├── JkHuger_tidy-rat-84.html
│   ├── JkHuger_warm-goose-52.html
│   ├── JkHuger_warm-panther-74.html
│   ├── JulanDeAlb_tall-swan-6.html
│   ├── KSAplay_silly-otter-89.html
│   ├── KSAplay_smart-bobcat-50.html
│   ├── KSAplay_tasty-tiger-23.html
│   ├── KSAplay_tough-pug-83.html
│   ├── KhaledMatalkah_tame-owl-66.html
│   ├── LeonKohli_average-impala-100.html
│   ├── LeonKohli_wise-puma-87.html
│   ├── LeryLey_quick-eagle-99.html
│   ├── Lucaasbre_strong-stingray-2.html
│   ├── Manish-Tamang_quick-bulldog-81.html
│   ├── MikeAndrewDesigner_jolly-gecko-33.html
│   ├── NAKAMOZ_pretty-ladybug-100.html
│   ├── Nawsome_heavy-cheetah-95.html
│   ├── OptX71285225_little-lionfish-48.html
│   ├── Praashoo7_cuddly-bat-26.html
│   ├── Praashoo7_moody-sloth-42.html
│   ├── Praashoo7_tough-skunk-14.html
│   ├── Praashoo7_white-seahorse-98.html
│   ├── PriyanshuGupta28_big-bear-38.html
│   ├── PriyanshuGupta28_massive-ape-73.html
│   ├── PriyanshuGupta28_plastic-panther-7.html
│   ├── PriyanshuGupta28_quick-wolverine-69.html
│   ├── PriyanshuGupta28_silent-rabbit-98.html
│   ├── PriyanshuGupta28_soft-goose-97.html
│   ├── PriyanshuGupta28_spicy-starfish-71.html
│   ├── PriyanshuGupta28_thin-hound-49.html
│   ├── PriyanshuGupta28_tough-puma-94.html
│   ├── SalladShooter_hot-rattlesnake-30.html
│   ├── SelfMadeSystem_calm-cat-84.html
│   ├── SelfMadeSystem_green-bobcat-29.html
│   ├── SharpTH_tricky-yak-97.html
│   ├── Shoh2008_bad-emu-73.html
│   ├── Shoh2008_big-deer-80.html
│   ├── Shoh2008_good-bat-75.html
│   ├── Shoh2008_hard-eel-52.html
│   ├── Shoh2008_perfect-mouse-3.html
│   ├── Shoh2008_proud-sloth-70.html
│   ├── Shubh0408_angry-owl-36.html
│   ├── Shubh0408_bad-vampirebat-82.html
│   ├── Shubh0408_pink-cobra-51.html
│   ├── Shubh0408_silly-parrot-64.html
│   ├── Smit-Prajapati_popular-wasp-54.html
│   ├── Smit-Prajapati_white-monkey-91.html
│   ├── TISEPSE_smooth-quail-14.html
│   ├── TechByElijah_stale-treefrog-11.html
│   ├── Timbar09_popular-bulldog-40.html
│   ├── Tsiangana_hot-panther-73.html
│   ├── UmangLadha_big-sheep-9.html
│   ├── Uncannypotato69_afraid-turtle-19.html
│   ├── Uncannypotato69_tidy-vampirebat-71.html
│   ├── Uncannypotato69_ugly-shrimp-58.html
│   ├── WhiteNervosa_green-donkey-82.html
│   ├── WhiteNervosa_orange-chipmunk-72.html
│   ├── WrongCodeU_fast-horse-55.html
│   ├── aadium_nervous-baboon-15.html
│   ├── aboalsim114_mean-vampirebat-54.html
│   ├── adamgiebl_curly-lizard-40.html
│   ├── adamgiebl_new-dingo-22.html
│   ├── adamgiebl_polite-tiger-12.html
│   ├── adamgiebl_proud-donkey-24.html
│   ├── ahmed150up_dull-owl-87.html
│   ├── ahmed150up_strange-fox-68.html
│   ├── ahmedyasserdev_spicy-jellyfish-41.html
│   ├── alexmaracinaru_shy-treefrog-42.html
│   ├── andrew-demchenk0_bright-tiger-84.html
│   ├── andrew-demchenk0_clever-cobra-93.html
│   ├── andrew-demchenk0_happy-vampirebat-41.html
│   ├── andrew-demchenk0_light-lionfish-40.html
│   ├── andrew-demchenk0_nasty-frog-73.html
│   ├── andrew-demchenk0_rotten-catfish-34.html
│   ├── barisdogansutcu_white-sloth-20.html
│   ├── bimbx_spotty-swan-18.html
│   ├── bociKond_spotty-elephant-13.html
│   ├── boryanakrasteva_calm-lionfish-10.html
│   ├── boryanakrasteva_wonderful-deer-76.html
│   ├── catraco_brown-dodo-68.html
│   ├── catraco_hungry-squid-59.html
│   ├── catraco_plastic-moth-91.html
│   ├── catraco_terrible-lion-20.html
│   ├── cbolson_calm-wasp-75.html
│   ├── csemszepp_calm-grasshopper-57.html
│   ├── csemszepp_unlucky-mole-23.html
│   ├── csozidev_shy-horse-87.html
│   ├── cssbuttons-io_short-shrimp-54.html
│   ├── david-mohseni_terrible-mayfly-58.html
│   ├── elijahgummer_afraid-walrus-18.html
│   ├── elijahgummer_foolish-bulldog-87.html
│   ├── elijahgummer_friendly-wombat-2.html
│   ├── elijahgummer_hard-liger-45.html
│   ├── elijahgummer_stale-bobcat-64.html
│   ├── ercnersoy_rare-robin-39.html
│   ├── faxriddin20_wicked-bobcat-36.html
│   ├── gagan-gv_average-warthog-41.html
│   ├── gagan-gv_unlucky-yak-4.html
│   ├── gagan-gv_wonderful-monkey-77.html
│   ├── gamerlord295_shaggy-mule-36.html
│   ├── gharsh11032000_breezy-falcon-75.html
│   ├── gharsh11032000_good-wasp-26.html
│   ├── gharsh11032000_nasty-panda-23.html
│   ├── gharsh11032000_young-baboon-42.html
│   ├── guilhermeyohan_chatty-lion-35.html
│   ├── guilhermeyohan_white-cheetah-13.html
│   ├── hayyangovinda_dangerous-bird-41.html
│   ├── hoshikawamaki_splendid-fish-36.html
│   ├── iArsene69_polite-moose-58.html
│   ├── javierBarroso_light-pig-3.html
│   ├── joe-watson-sbf_average-hound-77.html
│   ├── ke1221_dangerous-puma-90.html
│   ├── krlozCJ_dull-bobcat-80.html
│   ├── lenfear23_hot-badger-62.html
│   ├── lenin55_black-dragon-46.html
│   ├── m-muzammal_bitter-parrot-73.html
│   ├── magbanum_friendly-treefrog-3.html
│   ├── martinval9_wise-elephant-23.html
│   ├── milegelu_grumpy-wombat-18.html
│   ├── mnikita7767_purple-swan-7.html
│   ├── mobinkakei_sour-lionfish-18.html
│   ├── mobinkakei_strange-frog-14.html
│   ├── mobinkakei_tender-badger-3.html
│   ├── mrhyddenn_slippery-bear-64.html
│   ├── mrhyddenn_slippery-pug-63.html
│   ├── mrhyddenn_yellow-donkey-63.html
│   ├── mrpumps31232_heavy-bear-50.html
│   ├── myshy13_blue-frog-13.html
│   ├── nanda248_wonderful-bear-26.html
│   ├── neerajbaniwal_rotten-dingo-46.html
│   ├── nikk7007_kind-jellyfish-57.html
│   ├── ozgeozkaraa01_curly-rabbit-54.html
│   ├── reshades_average-horse-80.html
│   ├── sans-script_modern-stingray-0.html
│   ├── shreyasm-dev_bright-rat-5.html
│   ├── sssynk_tall-octopus-55.html
│   ├── sujeet-12_warm-dragonfly-92.html
│   ├── talhaabu1_odd-cobra-97.html
│   ├── themrsami_ugly-panther-10.html
│   ├── vinodjangid07_sour-rabbit-84.html
│   ├── vinodjangid07_terrible-starfish-29.html
│   └── vishnupprajapat_wicked-catfish-29.html
├── Forms/
│   ├── 3bdel3ziz-T_helpless-wasp-32.html
│   ├── Admin12121_shy-gecko-42.html
│   ├── AmIt-DasIT_stale-snail-53.html
│   ├── Ameth1208_massive-wombat-91.html
│   ├── AnthonyPreite_cowardly-cougar-44.html
│   ├── Cksunandh_purple-zebra-43.html
│   ├── ClawHack1_fuzzy-lionfish-82.html
│   ├── Cybercom682_rare-husky-48.html
│   ├── D3OXY_short-panther-37.html
│   ├── DavidTM96_empty-skunk-88.html
│   ├── FahadArnob52539_bitter-goose-93.html
│   ├── Galahhad_proud-fox-45.html
│   ├── Galahhad_unlucky-rat-64.html
│   ├── Harsha2lucky_dangerous-mouse-44.html
│   ├── HoseinParvaresh_selfish-newt-61.html
│   ├── Itskrish01_purple-stingray-37.html
│   ├── Javierrocadev_chatty-ladybug-95.html
│   ├── Javierrocadev_fresh-moth-39.html
│   ├── Javierrocadev_quick-horse-31.html
│   ├── Javierrocadev_shy-elephant-25.html
│   ├── Jerome-W-90_shy-jellyfish-2.html
│   ├── JkHuger_afraid-frog-82.html
│   ├── JkHuger_sharp-panda-27.html
│   ├── John-CFO_curly-seahorse-18.html
│   ├── John-CFO_spicy-horse-10.html
│   ├── JohnnyCSilva_bad-cheetah-74.html
│   ├── KhelVers_honest-lionfish-67.html
│   ├── KhelVers_hot-panther-2.html
│   ├── KhelVers_spicy-impala-38.html
│   ├── LeryLey_lazy-chicken-4.html
│   ├── LogariusIV_orange-cobra-86.html
│   ├── Manish-Tamang_perfect-husky-48.html
│   ├── MikeAndrewDesigner_pink-duck-8.html
│   ├── Mr-Roy-alt_fat-kangaroo-51.html
│   ├── Phelix652_selfish-pug-28.html
│   ├── Piyush831_rare-dragon-75.html
│   ├── Praashoo7_bitter-pig-24.html
│   ├── Praashoo7_brave-moose-56.html
│   ├── Praashoo7_short-horse-99.html
│   ├── Praashoo7_slippery-treefrog-69.html
│   ├── PriyanshuGupta28_good-dodo-80.html
│   ├── RashadGhzi_fat-husky-58.html
│   ├── RashadGhzi_wise-crab-44.html
│   ├── SelfMadeSystem_pretty-snake-70.html
│   ├── Shamaun-Nabi_sour-fireant-94.html
│   ├── Shamaun-Nabi_stupid-elephant-53.html
│   ├── Shoh2008_gentle-goat-33.html
│   ├── Shoh2008_stale-wasp-53.html
│   ├── Smit-Prajapati_black-cheetah-92.html
│   ├── Smit-Prajapati_swift-liger-76.html
│   ├── SmookyDev_curly-jellyfish-22.html
│   ├── SmookyDev_witty-treefrog-29.html
│   ├── Spacious74_selfish-dragon-64.html
│   ├── SteeveeG_neat-fly-82.html
│   ├── StefanR1901_ancient-cobra-42.html
│   ├── SyedShahzaib7_brave-dog-61.html
│   ├── TasneemHatem97_strange-deer-62.html
│   ├── VitorBaraoDias_splendid-catfish-27.html
│   ├── Yaya12085_dangerous-puma-90.html
│   ├── Yaya12085_foolish-dog-36.html
│   ├── Yaya12085_foolish-husky-65.html
│   ├── Yaya12085_friendly-emu-87.html
│   ├── Yaya12085_horrible-grasshopper-43.html
│   ├── Yaya12085_kind-deer-40.html
│   ├── Yaya12085_massive-warthog-99.html
│   ├── Yaya12085_nasty-wolverine-41.html
│   ├── Yaya12085_ordinary-octopus-24.html
│   ├── Yaya12085_polite-goose-24.html
│   ├── Yaya12085_selfish-impala-100.html
│   ├── Yaya12085_short-panda-24.html
│   ├── Yaya12085_short-turtle-53.html
│   ├── Yaya12085_smart-seahorse-4.html
│   ├── Yaya12085_spicy-panther-48.html
│   ├── Yaya12085_stupid-starfish-12.html
│   ├── Yaya12085_tender-moose-95.html
│   ├── Yaya12085_weak-dodo-82.html
│   ├── Yaya12085_white-treefrog-57.html
│   ├── Yaya12085_yellow-goat-62.html
│   ├── aadium_tall-bear-23.html
│   ├── aboalsim114_selfish-fly-63.html
│   ├── ahkamboh_dangerous-badger-27.html
│   ├── ahmed150up_chilly-rattlesnake-8.html
│   ├── ahmed150up_fluffy-robin-81.html
│   ├── ahmed150up_fuzzy-mole-98.html
│   ├── ahmed150up_quiet-goat-67.html
│   ├── ahmed150up_tiny-yak-9.html
│   ├── akshat-patel28_empty-pug-43.html
│   ├── akshat-patel28_rare-cobra-61.html
│   ├── alexmaracinaru_tall-owl-30.html
│   ├── alexruix_fat-cobra-72.html
│   ├── alexruix_pink-frog-31.html
│   ├── alexruix_stupid-lion-99.html
│   ├── alexruix_tender-badger-50.html
│   ├── ammarsaa_chatty-firefox-25.html
│   ├── andrew-demchenk0_afraid-cougar-9.html
│   ├── andrew-demchenk0_little-treefrog-9.html
│   ├── andrew-demchenk0_ordinary-lizard-16.html
│   ├── andrew-demchenk0_purple-bird-74.html
│   ├── andrew-demchenk0_yellow-cheetah-66.html
│   ├── bociKond_dull-mole-77.html
│   ├── boryanakrasteva_average-bear-68.html
│   ├── codebykay101_warm-pig-33.html
│   ├── csozidev_sour-rabbit-69.html
│   ├── doniaskima_fuzzy-insect-61.html
│   ├── emmanuelh-dev_heavy-bobcat-84.html
│   ├── gharsh11032000_bitter-cow-59.html
│   ├── gharsh11032000_funny-badger-91.html
│   ├── gharsh11032000_nasty-insect-66.html
│   ├── glisovic01_stale-chipmunk-33.html
│   ├── guilhermeyohan_cuddly-kangaroo-87.html
│   ├── guilhermeyohan_fresh-newt-22.html
│   ├── guilhermeyohan_friendly-walrus-55.html
│   ├── guilhermeyohan_warm-mule-6.html
│   ├── guilhermeyohan_yellow-badger-63.html
│   ├── iZOXVL_silly-moth-15.html
│   ├── iZOXVL_slippery-dragonfly-42.html
│   ├── iamriishav_nice-ladybug-64.html
│   ├── jack0237_light-dolphin-75.html
│   ├── jeel-sardhara_foolish-cow-14.html
│   ├── kennyotsu_tender-husky-10.html
│   ├── krlozCJ_average-snake-9.html
│   ├── mi-series_angry-lizard-63.html
│   ├── mi-series_bad-jellyfish-23.html
│   ├── mi-series_blue-mule-76.html
│   ├── mi-series_funny-husky-80.html
│   ├── mi-series_good-walrus-42.html
│   ├── mi-series_spotty-goose-56.html
│   ├── mobinkakei_big-cougar-25.html
│   ├── nathann09_bad-hound-78.html
│   ├── omar-alghaish_breezy-insect-15.html
│   ├── omar-alghaish_fluffy-cougar-42.html
│   ├── rahilansari261_odd-badger-94.html
│   ├── reshades_pink-bobcat-64.html
│   ├── reshades_tiny-monkey-43.html
│   ├── roroland_brave-kangaroo-30.html
│   ├── sahilxkhadka_breezy-liger-0.html
│   ├── sameer2malik_lucky-insect-98.html
│   ├── sameer2malik_serious-duck-16.html
│   ├── satyamchaudharydev_cold-lionfish-49.html
│   ├── shadowmurphy_rotten-bullfrog-69.html
│   ├── somshri16_short-elephant-64.html
│   ├── sonex-ICB_curvy-yak-84.html
│   ├── themrsami_blue-mouse-42.html
│   ├── themrsami_brown-ladybug-94.html
│   ├── themrsami_chatty-goat-55.html
│   ├── themrsami_clever-badger-17.html
│   ├── themrsami_cuddly-moth-67.html
│   ├── themrsami_curly-cat-6.html
│   ├── themrsami_fast-termite-60.html
│   ├── themrsami_friendly-firefox-52.html
│   ├── themrsami_green-lionfish-48.html
│   ├── themrsami_happy-dingo-51.html
│   ├── themrsami_hard-treefrog-45.html
│   ├── themrsami_light-starfish-59.html
│   ├── themrsami_nasty-robin-70.html
│   ├── themrsami_orange-cat-97.html
│   ├── themrsami_orange-impala-97.html
│   ├── themrsami_ordinary-shrimp-82.html
│   ├── themrsami_pink-turtle-25.html
│   ├── themrsami_proud-fireant-91.html
│   ├── themrsami_smart-wasp-13.html
│   ├── themrsami_strong-rat-23.html
│   ├── themrsami_stupid-stingray-40.html
│   ├── themrsami_tame-bear-4.html
│   ├── themrsami_tasty-bat-81.html
│   ├── themrsami_terrible-yak-72.html
│   ├── themrsami_wicked-insect-95.html
│   ├── vinodjangid07_dull-dragonfly-5.html
│   ├── vinodjangid07_horrible-warthog-14.html
│   ├── vinodjangid07_lazy-lionfish-15.html
│   ├── vinodjangid07_ordinary-stingray-51.html
│   ├── vinodjangid07_splendid-bat-9.html
│   ├── vishal2231179_sharp-penguin-54.html
│   ├── zanina-yassine_angry-shrimp-34.html
│   ├── zanina-yassine_bad-cat-10.html
│   ├── zanina-yassine_light-dragonfly-12.html
│   ├── zanina-yassine_quiet-turkey-90.html
│   ├── zanina-yassine_warm-bulldog-97.html
│   ├── zanina-yassine_yellow-jellyfish-91.html
│   └── zombie223_soft-rabbit-58.html
├── Inputs/
│   ├── 0xnihilism_calm-baboon-55.html
│   ├── 0xnihilism_silly-quail-9.html
│   ├── 0xnihilism_wise-lizard-57.html
│   ├── 1osm_pretty-frog-15.html
│   ├── AKAspidey01_fuzzy-liger-17.html
│   ├── ARUSH221617_fresh-bear-10.html
│   ├── AbanoubMagdy1_afraid-yak-99.html
│   ├── Adamsco51_moody-vampirebat-6.html
│   ├── Admin12121_afraid-rattlesnake-2.html
│   ├── Akshdeep74644_dry-mouse-37.html
│   ├── Akshdeep74644_itchy-turtle-76.html
│   ├── Alanav29_tough-ape-65.html
│   ├── Alaner-xs_chatty-snake-44.html
│   ├── Alaner-xs_red-tiger-4.html
│   ├── Alien14k_honest-goat-49.html
│   ├── Allyhere_slippery-fly-8.html
│   ├── AmIt-DasIT_weak-donkey-85.html
│   ├── Amine-maker_ordinary-wombat-53.html
│   ├── AmruthLP12_splendid-zebra-21.html
│   ├── Anas92876_terrible-owl-47.html
│   ├── AtharvaMistry_kind-treefrog-34.html
│   ├── AtharvaMistry_lazy-mole-46.html
│   ├── BlackisPlay_black-tiger-82.html
│   ├── Bodyhc_afraid-eel-42.html
│   ├── Bodyhc_plastic-dodo-97.html
│   ├── BurgiSimon_rotten-dolphin-78.html
│   ├── Christardev_fat-donkey-71.html
│   ├── Cksunandh_purple-moose-3.html
│   ├── ClawHack1_honest-fox-62.html
│   ├── Cobp_lazy-frog-59.html
│   ├── Codewithvinay_silent-earwig-98.html
│   ├── Cornerstone-04_itchy-elephant-39.html
│   ├── Cybercom682_witty-mouse-32.html
│   ├── Darlley_hard-quail-33.html
│   ├── Darlley_purple-badger-78.html
│   ├── DellBee_foolish-panda-69.html
│   ├── Denon761_young-ladybug-43.html
│   ├── Desarrollo3HQ5_yellow-goat-19.html
│   ├── EcheverriaJesus_sour-quail-63.html
│   ├── EddyBel_itchy-squid-77.html
│   ├── EddyBel_rare-baboon-42.html
│   ├── ErzenXz_curvy-fly-31.html
│   ├── ErzenXz_horrible-rattlesnake-14.html
│   ├── Fadhilmagass_proud-mule-71.html
│   ├── G4b413l_mean-stingray-9.html
│   ├── Galahhad_average-snail-50.html
│   ├── Galahhad_breezy-wolverine-23.html
│   ├── Galahhad_happy-dodo-17.html
│   ├── Galahhad_lovely-termite-57.html
│   ├── Galahhad_nasty-robin-22.html
│   ├── Gautammsharma_shaggy-cheetah-41.html
│   ├── Harsha2lucky_lovely-firefox-67.html
│   ├── Itskrish01_bright-moose-63.html
│   ├── Jaareet_serious-lionfish-75.html
│   ├── Javierrocadev_giant-goat-55.html
│   ├── Javierrocadev_nasty-jellyfish-18.html
│   ├── JayRamoliya_loud-rattlesnake-53.html
│   ├── JaydipPrajapati1910_bitter-octopus-23.html
│   ├── JaydipPrajapati1910_black-impala-70.html
│   ├── JaydipPrajapati1910_foolish-liger-62.html
│   ├── JaydipPrajapati1910_shaggy-wasp-51.html
│   ├── JaydipPrajapati1910_shy-turkey-95.html
│   ├── Jules-gitclerc_fresh-emu-37.html
│   ├── Jules-gitclerc_red-bear-19.html
│   ├── Lakshay-art_curvy-earwig-22.html
│   ├── LeonKohli_little-bulldog-27.html
│   ├── LeonKohli_silly-dragonfly-82.html
│   ├── Li-Deheng_rotten-bullfrog-77.html
│   ├── Li-Deheng_stupid-jellyfish-61.html
│   ├── Li-Deheng_tiny-chicken-50.html
│   ├── LightAndy1_spicy-gecko-96.html
│   ├── LightAndy1_tidy-pig-67.html
│   ├── Lucaasbre_blue-ape-11.html
│   ├── Maximinodotpy_thin-sheep-13.html
│   ├── Mhyar-nsi_selfish-parrot-52.html
│   ├── MijailVillegas_grumpy-horse-85.html
│   ├── MijailVillegas_shaggy-husky-62.html
│   ├── Minka1902_neat-bear-54.html
│   ├── Mythsoul_strange-insect-92.html
│   ├── Na3ar-17_calm-panda-30.html
│   ├── Na3ar-17_selfish-dragon-54.html
│   ├── OnCloud125252_chatty-cat-54.html
│   ├── OnlyCodeChannel_ugly-penguin-43.html
│   ├── PhanDangKhoa96_swift-warthog-78.html
│   ├── Praashoo7_tame-sloth-39.html
│   ├── PriyanshuGupta28_bitter-bulldog-63.html
│   ├── PriyanshuGupta28_bright-swan-54.html
│   ├── PriyanshuGupta28_hungry-otter-56.html
│   ├── PriyanshuGupta28_swift-chipmunk-76.html
│   ├── RashadGhzi_smooth-skunk-12.html
│   ├── RashadGhzi_stupid-firefox-88.html
│   ├── Rodrypaladin_bitter-cobra-27.html
│   ├── SARAN2004_swift-chicken-44.html
│   ├── Sahana-Lakshmipathy_hot-panther-0.html
│   ├── SanthoshSJ-Dev_mean-wolverine-8.html
│   ├── Satwinder04_ancient-sloth-30.html
│   ├── Satwinder04_pink-bat-77.html
│   ├── SelfMadeSystem_ancient-goat-9.html
│   ├── Shoh2008_fluffy-vampirebat-90.html
│   ├── Shubh0408_calm-shrimp-66.html
│   ├── Smit-Prajapati_brave-hound-66.html
│   ├── Smit-Prajapati_serious-goose-17.html
│   ├── SouravBandyopadhyay_modern-rabbit-52.html
│   ├── Spacious74_cold-goose-63.html
│   ├── TamaniPhiri_black-ape-85.html
│   ├── TaniaDou_friendly-badger-72.html
│   ├── TechByElijah_fluffy-dolphin-33.html
│   ├── TemRevil_wise-treefrog-32.html
│   ├── TimTrayler_orange-bat-25.html
│   ├── VijinV_mean-goose-92.html
│   ├── WhiteNervosa_bad-mole-33.html
│   ├── Yaseen549_average-firefox-86.html
│   ├── Yaseen549_cowardly-emu-68.html
│   ├── Yaseen549_popular-snake-7.html
│   ├── Yaseen549_stale-frog-25.html
│   ├── Yaya12085_brown-wolverine-18.html
│   ├── Yaya12085_cowardly-jellyfish-9.html
│   ├── Yaya12085_evil-chipmunk-15.html
│   ├── Yaya12085_hungry-goat-59.html
│   ├── Yaya12085_new-rabbit-37.html
│   ├── Yaya12085_red-parrot-45.html
│   ├── Yaya12085_tidy-warthog-91.html
│   ├── absoluteSTrange_smart-turtle-82.html
│   ├── adamgiebl_hot-cat-14.html
│   ├── adamgiebl_ordinary-impala-4.html
│   ├── ahmedyasserdev_funny-treefrog-48.html
│   ├── ainasoa_pretty-donkey-11.html
│   ├── akshat-patel28_tender-dolphin-38.html
│   ├── alexruix_evil-parrot-25.html
│   ├── alexruix_evil-parrot-59.html
│   ├── alexruix_fat-vampirebat-55.html
│   ├── alexruix_jolly-emu-80.html
│   ├── alexruix_plastic-shrimp-54.html
│   ├── alexruix_slippery-frog-10.html
│   ├── alexruix_slippery-snail-18.html
│   ├── andrew-demchenk0_green-deer-16.html
│   ├── andrew-demchenk0_polite-stingray-67.html
│   ├── anniekoop_nasty-impala-89.html
│   ├── ayman-ashine_plastic-parrot-88.html
│   ├── barisdogansutcu_gentle-pig-32.html
│   ├── bedirhan-arslan_stale-fly-98.html
│   ├── benjimich_lucky-baboon-4.html
│   ├── boryanakrasteva_hard-pig-16.html
│   ├── boryanakrasteva_perfect-lizard-67.html
│   ├── catraco_wet-quail-86.html
│   ├── chethan025_tasty-gecko-98.html
│   ├── cohencoo_proud-husky-84.html
│   ├── danilppzz_tiny-robin-35.html
│   ├── deepak16375_neat-impala-82.html
│   ├── denswastaken_stupid-jellyfish-26.html
│   ├── devestter_fuzzy-panda-69.html
│   ├── devkatyall_smart-lionfish-91.html
│   ├── doniaskima_bright-goat-87.html
│   ├── elijahgummer_nice-otter-15.html
│   ├── elijahgummer_short-baboon-22.html
│   ├── emmanuelh-dev_plastic-rattlesnake-49.html
│   ├── emmanuelh-dev_rotten-eagle-16.html
│   ├── ercnersoy_dangerous-cat-78.html
│   ├── escannord_good-insect-28.html
│   ├── escannord_hot-yak-44.html
│   ├── escannord_weak-wombat-42.html
│   ├── eslam-hany_strange-goose-48.html
│   ├── fanishah_fat-pig-29.html
│   ├── fbernack_honest-bat-69.html
│   ├── gaeliam100_hot-rabbit-16.html
│   ├── garerim_bitter-donkey-79.html
│   ├── garerim_rare-moth-56.html
│   ├── guilhermeyohan_hot-termite-89.html
│   ├── jamaldine-hub_cowardly-jellyfish-52.html
│   ├── jamik-dev_shaggy-cheetah-22.html
│   ├── jamik-dev_unlucky-panda-29.html
│   ├── javierBarroso_breezy-fireant-74.html
│   ├── joe-watson-sbf_shy-snake-4.html
│   ├── jubayer-10_cowardly-sloth-72.html
│   ├── jubayer-10_pretty-wolverine-81.html
│   ├── jubayer-10_selfish-fly-10.html
│   ├── jubayer-10_sharp-otter-56.html
│   ├── kamehame-ha_lovely-fly-87.html
│   ├── kamehame-ha_purple-bullfrog-33.html
│   ├── kamehame-ha_silent-dodo-36.html
│   ├── krlozCJ_splendid-starfish-73.html
│   ├── laminelawal_helpless-bulldog-88.html
│   ├── lenfear23_helpless-swan-97.html
│   ├── liyaxu123_warm-eel-62.html
│   ├── mRcOol7_white-wombat-51.html
│   ├── marcelodolza_grumpy-eel-20.html
│   ├── marcos700x_hot-dragonfly-100.html
│   ├── mowalee_wet-bobcat-17.html
│   ├── mrhyddenn_fluffy-bird-66.html
│   ├── naelawadallah_angry-dolphin-56.html
│   ├── omar49511_dangerous-newt-42.html
│   ├── omriluz_good-parrot-26.html
│   ├── ozgeozkaraa01_big-sloth-59.html
│   ├── ozgeozkaraa01_sharp-rattlesnake-74.html
│   ├── pablofernz_yellow-fox-100.html
│   ├── roroland_stale-bobcat-33.html
│   ├── rricol_moody-cow-18.html
│   ├── sabbircoder07_gentle-yak-43.html
│   ├── sabbircoder07_tough-cat-68.html
│   ├── saidbl1_gentle-dragon-92.html
│   ├── saidbl1_little-eagle-84.html
│   ├── saidbl1_polite-dingo-63.html
│   ├── satisshTechie_sharp-hound-14.html
│   ├── satyamchaudharydev_fast-dodo-69.html
│   ├── satyamchaudharydev_plastic-bobcat-37.html
│   ├── satyamchaudharydev_slippery-parrot-22.html
│   ├── satyamchaudharydev_tasty-dingo-5.html
│   ├── seyed-mohsen-mousavi_average-elephant-52.html
│   ├── seyed-mohsen-mousavi_blue-impala-67.html
│   ├── seyed-mohsen-mousavi_chatty-frog-63.html
│   ├── shadowmurphy_hard-warthog-73.html
│   ├── shadowmurphy_selfish-bulldog-79.html
│   ├── siraj-ha_serious-moose-70.html
│   ├── sonusng_lovely-bulldog-50.html
│   ├── themrsami_calm-eel-15.html
│   ├── tiagoadag1203_fat-parrot-54.html
│   ├── vikas7754_yellow-stingray-17.html
│   ├── vikramsinghnegi_selfish-octopus-83.html
│   ├── vinodjangid07_cuddly-deer-66.html
│   ├── vinodjangid07_good-donkey-28.html
│   ├── vinodjangid07_good-grasshopper-52.html
│   ├── vinodjangid07_hot-warthog-7.html
│   ├── vinodjangid07_modern-tiger-48.html
│   ├── vinodjangid07_weak-fish-12.html
│   ├── vnuny_moody-swan-60.html
│   └── xetrov47_quick-fireant-96.html
├── LICENSE
├── Notifications/
│   ├── ActiveIceDigital_fuzzy-fly-47.html
│   ├── Fujitawa_slimy-vampirebat-16.html
│   ├── Gianluks90_funny-impala-78.html
│   ├── JkHuger_tasty-ape-73.html
│   ├── John-CFO_quiet-puma-22.html
│   ├── M4NT_tiny-mayfly-20.html
│   ├── MazontheMoon_curvy-mole-83.html
│   ├── MijailVillegas_swift-fireant-79.html
│   ├── Praashoo7_ugly-walrus-48.html
│   ├── Sameer2244_white-eagle-79.html
│   ├── Santaval_massive-dingo-46.html
│   ├── StealthWorm_weak-rattlesnake-4.html
│   ├── WittyHydra_nervous-zebra-0.html
│   ├── Yaya12085_smooth-seahorse-63.html
│   ├── ahmed150up_terrible-shrimp-45.html
│   ├── alexruix_gentle-octopus-87.html
│   ├── andrew-demchenk0_quiet-liger-31.html
│   ├── devsleonardo_red-goat-27.html
│   ├── guilhermeyohan_white-cat-52.html
│   ├── jyefu013_unlucky-bird-53.html
│   ├── newbiners_warm-deer-90.html
│   ├── tursynbek_gentle-kangaroo-69.html
│   └── yaroslavas2001_stupid-shrimp-89.html
├── Patterns/
│   ├── 16alves02_curly-robin-90.html
│   ├── 16alves02_tender-cougar-31.html
│   ├── AmruthGowda91200_rotten-catfish-64.html
│   ├── ArnavK-09_selfish-moose-79.html
│   ├── AspenBranch_slippery-sheep-50.html
│   ├── AspenBranch_thin-bulldog-22.html
│   ├── BadlyWrittenStylesheet_bad-baboon-47.html
│   ├── BadlyWrittenStylesheet_fluffy-bear-71.html
│   ├── Cybercom682_smooth-parrot-55.html
│   ├── Deri-Kurniawan_spicy-ladybug-25.html
│   ├── Efrain2112_modern-skunk-55.html
│   ├── Efrain2112_nice-mole-58.html
│   ├── Efrain2112_purple-mole-50.html
│   ├── HarryHeywood04_ugly-squid-22.html
│   ├── Javierrocadev_cowardly-rat-28.html
│   ├── Javierrocadev_polite-fox-37.html
│   ├── Javierrocadev_thin-moth-33.html
│   ├── Javierrocadev_wicked-bullfrog-50.html
│   ├── Juanes200122_foolish-swan-57.html
│   ├── Juanes200122_tame-wasp-3.html
│   ├── MikeAndrewDesigner_fuzzy-duck-40.html
│   ├── PriyanshuGupta28_rare-cow-19.html
│   ├── Ratinax_cuddly-shrimp-75.html
│   ├── Ratinax_moody-eel-40.html
│   ├── Ratinax_nervous-mouse-8.html
│   ├── Ratinax_new-fish-98.html
│   ├── Ratinax_weak-yak-80.html
│   ├── Ratinax_wicked-dodo-27.html
│   ├── SmookyDev_dry-frog-14.html
│   ├── SmookyDev_fresh-cow-100.html
│   ├── SouravBandyopadhyay_dangerous-walrus-7.html
│   ├── SouravBandyopadhyay_foolish-mole-21.html
│   ├── Yaya12085_kind-snake-27.html
│   ├── Yaya12085_perfect-skunk-19.html
│   ├── aadium_fluffy-dolphin-60.html
│   ├── aadium_hard-swan-77.html
│   ├── aadium_mighty-rattlesnake-30.html
│   ├── aadium_soft-panda-93.html
│   ├── adamgiebl_curvy-earwig-79.html
│   ├── adilsarfraz02_sweet-termite-95.html
│   ├── alexruix_blue-kangaroo-55.html
│   ├── artvelog_splendid-quail-83.html
│   ├── ayman-ashine_wicked-tiger-22.html
│   ├── bociKond_strong-mayfly-90.html
│   ├── catraco_strange-firefox-86.html
│   ├── csemszepp_average-rat-98.html
│   ├── csemszepp_brown-bulldog-93.html
│   ├── csemszepp_evil-catfish-13.html
│   ├── csemszepp_fat-panther-54.html
│   ├── csemszepp_fresh-bobcat-35.html
│   ├── csemszepp_fuzzy-eel-41.html
│   ├── csemszepp_happy-rattlesnake-25.html
│   ├── csemszepp_kind-frog-70.html
│   ├── csemszepp_lovely-monkey-46.html
│   ├── csemszepp_modern-zebra-66.html
│   ├── csemszepp_nasty-snake-68.html
│   ├── csemszepp_neat-parrot-45.html
│   ├── csemszepp_old-hound-37.html
│   ├── csemszepp_orange-bird-11.html
│   ├── csemszepp_pink-puma-38.html
│   ├── csemszepp_serious-cobra-89.html
│   ├── csemszepp_silent-cow-55.html
│   ├── csemszepp_slimy-dragonfly-4.html
│   ├── csemszepp_smart-ladybug-43.html
│   ├── csemszepp_sour-crab-65.html
│   ├── csemszepp_stupid-insect-76.html
│   ├── csemszepp_ugly-bear-28.html
│   ├── elijahgummer_brown-cheetah-84.html
│   ├── elijahgummer_hungry-bullfrog-10.html
│   ├── elijahgummer_mean-emu-70.html
│   ├── escannord_big-shrimp-86.html
│   ├── escannord_hard-rabbit-4.html
│   ├── escannord_heavy-fish-82.html
│   ├── escannord_little-parrot-76.html
│   ├── escannord_pretty-eagle-45.html
│   ├── escannord_tricky-moth-87.html
│   ├── iSweat-exe_ancient-bulldog-55.html
│   ├── jeremyssocial_afraid-sheep-52.html
│   ├── kennyotsu_short-warthog-33.html
│   ├── kennyotsu_terrible-sloth-75.html
│   ├── lautyYT_spotty-shrimp-35.html
│   ├── liuyingmei_rude-cobra-0.html
│   ├── mRcOol7_grumpy-lizard-36.html
│   ├── milegelu_perfect-fox-0.html
│   ├── mobinkakei_grumpy-baboon-32.html
│   ├── mobinkakei_loud-parrot-63.html
│   ├── mobinkakei_tidy-cheetah-71.html
│   ├── themrsami_black-emu-83.html
│   ├── themrsami_curly-robin-70.html
│   ├── themrsami_dull-moose-46.html
│   ├── themrsami_honest-chicken-11.html
│   ├── themrsami_hot-fly-3.html
│   ├── themrsami_odd-liger-51.html
│   ├── themrsami_old-snail-13.html
│   ├── themrsami_yellow-grasshopper-97.html
│   ├── uiverse-astronaut_jolly-parrot-30.html
│   ├── uiverse-astronaut_mean-eel-73.html
│   ├── uiverse-astronaut_soft-fox-100.html
│   ├── uiverse-astronaut_splendid-goat-87.html
│   ├── uiverse-astronaut_stale-chicken-35.html
│   ├── uiverse-astronaut_tall-vampirebat-56.html
│   ├── vikas7754_grumpy-owl-55.html
│   └── vnuny_tough-dog-52.html
├── README.md
├── Radio-buttons/
│   ├── 3bdel3ziz-T_curly-duck-62.html
│   ├── 3bdel3ziz-T_gentle-vampirebat-46.html
│   ├── 3bdel3ziz-T_lucky-bullfrog-15.html
│   ├── 3bdel3ziz-T_tough-deer-65.html
│   ├── Admin12121_cold-bobcat-20.html
│   ├── AmIt-DasIT_neat-turkey-32.html
│   ├── Arqui9897_stupid-kangaroo-64.html
│   ├── ChristosMourgelas_polite-rattlesnake-85.html
│   ├── Cybercom682_jolly-liger-24.html
│   ├── Galahhad_perfect-cheetah-72.html
│   ├── JaydipPrajapati1910_foolish-donkey-86.html
│   ├── JkHuger_dull-lizard-58.html
│   ├── JkHuger_silly-insect-34.html
│   ├── LilaRest_giant-jellyfish-3.html
│   ├── LilaRest_soft-baboon-75.html
│   ├── MijailVillegas_friendly-panther-39.html
│   ├── Na3ar-17_fast-turtle-85.html
│   ├── Navarog21_good-newt-78.html
│   ├── NlghtM4re_mighty-wasp-74.html
│   ├── Peary74_quiet-pug-68.html
│   ├── Praashoo7_cold-mayfly-100.html
│   ├── Praashoo7_mean-dodo-99.html
│   ├── Pradeepsaranbishnoi_big-swan-35.html
│   ├── Pradeepsaranbishnoi_bitter-rabbit-96.html
│   ├── Pradeepsaranbishnoi_black-husky-57.html
│   ├── Pradeepsaranbishnoi_cuddly-sheep-92.html
│   ├── Pradeepsaranbishnoi_heavy-dragonfly-92.html
│   ├── Pradeepsaranbishnoi_hungry-bat-66.html
│   ├── Pradeepsaranbishnoi_moody-starfish-95.html
│   ├── Pradeepsaranbishnoi_selfish-ladybug-61.html
│   ├── Pradeepsaranbishnoi_slimy-warthog-37.html
│   ├── Pradeepsaranbishnoi_tiny-tiger-4.html
│   ├── Pradeepsaranbishnoi_wet-dragonfly-79.html
│   ├── Pradeepsaranbishnoi_wise-snake-15.html
│   ├── Ratinax_cold-rabbit-43.html
│   ├── Ratinax_itchy-mouse-15.html
│   ├── Safvan-tsy_rare-eagle-99.html
│   ├── Saiyed-Tanvir_stale-parrot-18.html
│   ├── SanjanaSogimatt_short-chipmunk-97.html
│   ├── SelfMadeSystem_fat-bullfrog-40.html
│   ├── SelfMadeSystem_selfish-starfish-40.html
│   ├── Shoh2008_bad-starfish-74.html
│   ├── Shoh2008_popular-octopus-59.html
│   ├── SlowLess0_helpless-termite-82.html
│   ├── SmookyDev_green-lizard-94.html
│   ├── Spacious74_lovely-goose-53.html
│   ├── Subaashbala_silly-sheep-7.html
│   ├── Tsiangana_clever-cheetah-40.html
│   ├── Tsiangana_nasty-lizard-71.html
│   ├── WerlynRodriguez_fuzzy-yak-55.html
│   ├── WhiteNervosa_shy-walrus-83.html
│   ├── WhiteNervosa_wicked-deer-90.html
│   ├── XuYeean_angry-donkey-87.html
│   ├── Yaya12085_empty-badger-73.html
│   ├── Yaya12085_green-wasp-49.html
│   ├── Yaya12085_orange-eagle-19.html
│   ├── Yaya12085_rude-mouse-79.html
│   ├── Yaya12085_silent-liger-85.html
│   ├── Yaya12085_spicy-dingo-98.html
│   ├── Yaya12085_tough-rat-92.html
│   ├── Yaya12085_wonderful-owl-52.html
│   ├── aadium_massive-turtle-43.html
│   ├── aadium_silly-bulldog-25.html
│   ├── aboalsim114_fat-termite-40.html
│   ├── adamgiebl_hard-vampirebat-36.html
│   ├── aguerquin_unlucky-yak-48.html
│   ├── ahmed150up_warm-zebra-29.html
│   ├── andretellao_nasty-horse-50.html
│   ├── andrew-demchenk0_clever-elephant-35.html
│   ├── andrew-demchenk0_dry-elephant-32.html
│   ├── andrew-demchenk0_hot-bird-10.html
│   ├── andrew-demchenk0_lucky-bobcat-25.html
│   ├── andrew-demchenk0_pink-dragon-17.html
│   ├── andrew-demchenk0_spicy-fish-10.html
│   ├── andrew-demchenk0_stupid-seahorse-9.html
│   ├── asgardOP_great-badger-21.html
│   ├── ayman-ashine_wicked-liger-39.html
│   ├── cbolson_ugly-yak-75.html
│   ├── coding-masala_pink-ape-66.html
│   ├── coding-masala_polite-monkey-88.html
│   ├── csozidev_ordinary-stingray-85.html
│   ├── elijahgummer_soft-firefox-40.html
│   ├── escannord_purple-gecko-48.html
│   ├── gharsh11032000_curvy-vampirebat-60.html
│   ├── gharsh11032000_moody-dog-23.html
│   ├── hoshikawamaki_green-chicken-4.html
│   ├── javierBarroso_average-quail-26.html
│   ├── kyle1dev_smart-fox-51.html
│   ├── neerajbaniwal_serious-sheep-31.html
│   ├── ozgeozkaraa01_wet-emu-59.html
│   ├── radwakhalil22_good-quail-97.html
│   ├── roroland_unlucky-goose-22.html
│   ├── sandeepgopan_fluffy-catfish-36.html
│   ├── shadowfax29_nasty-octopus-47.html
│   ├── shadowmurphy_red-mayfly-78.html
│   ├── shadowmurphy_slippery-chicken-56.html
│   ├── shlomo20_tough-parrot-85.html
│   ├── spj2401Dev_lucky-moth-60.html
│   ├── vk-uiux_sour-stingray-86.html
│   ├── watchakorn-18k_slimy-eel-61.html
│   ├── wizard503_serious-monkey-58.html
│   └── yaroslavas2001_white-ape-33.html
├── Toggle-switches/
│   ├── 3bdel3ziz-T_honest-deer-30.html
│   ├── AIVIIID_spicy-horse-27.html
│   ├── AbanoubMagdy1_fluffy-octopus-90.html
│   ├── AbanoubMagdy1_pink-panda-32.html
│   ├── AbanoubMagdy1_ugly-dodo-38.html
│   ├── Adir-SL_warm-falcon-58.html
│   ├── Admin12121_massive-dodo-67.html
│   ├── Admin12121_strong-penguin-65.html
│   ├── Alaner-xs_terrible-snail-51.html
│   ├── Ali-Tahmazi99_fresh-moth-58.html
│   ├── AmIt-DasIT_average-robin-42.html
│   ├── AmIt-DasIT_rotten-rat-40.html
│   ├── AnthonyPreite_neat-bat-64.html
│   ├── BernardoCuevas_old-grasshopper-54.html
│   ├── Bodyhc_loud-badger-7.html
│   ├── Bodyhc_red-lionfish-43.html
│   ├── Bodyhc_wet-squid-26.html
│   ├── BurgiSimon_breezy-donkey-2.html
│   ├── Charly-T_wise-bobcat-72.html
│   ├── Cksunandh_massive-firefox-41.html
│   ├── Cksunandh_slimy-treefrog-92.html
│   ├── ClawHack1_itchy-bobcat-18.html
│   ├── Creatlydev_massive-quail-70.html
│   ├── Creatlydev_terrible-zebra-56.html
│   ├── Creatlydev_white-vampirebat-27.html
│   ├── Creatlydev_wicked-bear-73.html
│   ├── Custyyyy_strange-zebra-89.html
│   ├── Darlley_jolly-yak-41.html
│   ├── DawidMazurek4_tough-monkey-56.html
│   ├── EddyBel_slimy-penguin-36.html
│   ├── ErzenXz_weak-falcon-28.html
│   ├── ForzDz_kind-mule-56.html
│   ├── G4b413l_bitter-hound-66.html
│   ├── G4b413l_giant-panther-83.html
│   ├── Galahhad_happy-warthog-87.html
│   ├── Galahhad_heavy-dog-14.html
│   ├── Galahhad_modern-quail-75.html
│   ├── Galahhad_silent-robin-40.html
│   ├── Galahhad_strong-squid-82.html
│   ├── Galahhad_tame-moth-5.html
│   ├── Gianluks90_ordinary-goat-76.html
│   ├── ICe1BotMaker_quick-goat-3.html
│   ├── Javierrocadev_bright-catfish-97.html
│   ├── Javierrocadev_chilly-zebra-32.html
│   ├── Javierrocadev_proud-goat-59.html
│   ├── Javierrocadev_soft-tiger-98.html
│   ├── Javierrocadev_splendid-insect-57.html
│   ├── Javierrocadev_strange-otter-53.html
│   ├── Jay-9527_weak-dingo-78.html
│   ├── JaydipPrajapati1910_average-shrimp-57.html
│   ├── JaydipPrajapati1910_blue-goat-28.html
│   ├── JaydipPrajapati1910_brave-rattlesnake-29.html
│   ├── JaydipPrajapati1910_neat-newt-18.html
│   ├── JaydipPrajapati1910_spicy-kangaroo-63.html
│   ├── JaydipPrajapati1910_splendid-panda-57.html
│   ├── JkHuger_curvy-liger-67.html
│   ├── JkHuger_itchy-turtle-45.html
│   ├── JkHuger_old-falcon-20.html
│   ├── JkHuger_selfish-mule-85.html
│   ├── JkHuger_short-lizard-27.html
│   ├── JkHuger_smooth-frog-53.html
│   ├── JkHuger_warm-panther-53.html
│   ├── JulioCodesSM_pretty-dingo-70.html
│   ├── KINGFRESS_gentle-chicken-96.html
│   ├── KareemTolan_tasty-snail-21.html
│   ├── KshitijAdhikaree_spotty-insect-89.html
│   ├── Lmickk2_selfish-cougar-98.html
│   ├── MRez321_strong-skunk-73.html
│   ├── Madflows_fresh-fireant-15.html
│   ├── MetaBlue2000_curly-firefox-62.html
│   ├── Mohammad-Rahme-576_weak-deer-13.html
│   ├── Mohsinech_good-duck-38.html
│   ├── Muaz-Aldalil_tasty-fish-22.html
│   ├── MuhammadHasann_nasty-moth-15.html
│   ├── MuhammadHasann_popular-seahorse-73.html
│   ├── Na3ar-17_evil-dragon-24.html
│   ├── Na3ar-17_fast-fireant-25.html
│   ├── Na3ar-17_warm-turtle-37.html
│   ├── Nawsome_dry-treefrog-99.html
│   ├── Nawsome_empty-snail-69.html
│   ├── Nawsome_good-dragon-17.html
│   ├── Nawsome_green-turkey-32.html
│   ├── Nawsome_short-dolphin-98.html
│   ├── Nawsome_silent-owl-45.html
│   ├── Nawsome_witty-emu-55.html
│   ├── NomNomcats_calm-pug-88.html
│   ├── Praashoo7_angry-starfish-78.html
│   ├── Praashoo7_cuddly-moose-15.html
│   ├── Praashoo7_nasty-seahorse-26.html
│   ├── Praashoo7_stupid-termite-0.html
│   ├── Praashoo7_tough-firefox-72.html
│   ├── Praashoo7_tricky-turkey-18.html
│   ├── Praashoo7_witty-dodo-51.html
│   ├── Pradeepsaranbishnoi_cold-gecko-57.html
│   ├── Pradeepsaranbishnoi_honest-penguin-58.html
│   ├── PriyanshuGupta28_itchy-bat-11.html
│   ├── PriyanshuGupta28_little-grasshopper-46.html
│   ├── PriyanshuGupta28_new-dog-15.html
│   ├── PriyanshuGupta28_old-fly-17.html
│   ├── PriyanshuGupta28_ordinary-ape-65.html
│   ├── PriyanshuGupta28_quiet-elephant-56.html
│   ├── RaspberryBee_calm-deer-81.html
│   ├── Ratinax_lucky-puma-4.html
│   ├── Saiyed-Tanvir_pretty-moose-9.html
│   ├── Shoh2008_average-duck-41.html
│   ├── Shoh2008_average-monkey-56.html
│   ├── Shoh2008_brown-bulldog-12.html
│   ├── Shoh2008_cowardly-catfish-27.html
│   ├── Shoh2008_gentle-firefox-59.html
│   ├── Shoh2008_light-shrimp-88.html
│   ├── Shoh2008_quiet-donkey-16.html
│   ├── Shoh2008_splendid-rat-98.html
│   ├── Shubh0408_afraid-octopus-54.html
│   ├── Shubh0408_chilly-cobra-48.html
│   ├── Shubh0408_giant-swan-43.html
│   ├── SmookyDev_tricky-husky-54.html
│   ├── SouravBandyopadhyay_empty-grasshopper-29.html
│   ├── Subaashbala_big-cougar-5.html
│   ├── Subaashbala_hard-monkey-38.html
│   ├── Subaashbala_quiet-ape-66.html
│   ├── Subaashbala_unlucky-turkey-88.html
│   ├── SujitAdroja_nice-otter-97.html
│   ├── TahaShameli_nice-starfish-82.html
│   ├── The-Best-Codes_bright-rabbit-33.html
│   ├── TimTrayler_quiet-swan-35.html
│   ├── TroyRandall_curvy-eagle-61.html
│   ├── Tsiangana_massive-snail-12.html
│   ├── Type-Delta_happy-mule-45.html
│   ├── Type-Delta_smart-fox-47.html
│   ├── Uncannypotato69_unlucky-sheep-74.html
│   ├── Voxybuns_horrible-shrimp-47.html
│   ├── WhiteNervosa_ancient-bullfrog-71.html
│   ├── WriestTavo_cowardly-eel-69.html
│   ├── WrongCodeU_brave-mule-53.html
│   ├── YaroslavFilipenko_red-turtle-90.html
│   ├── Yaya12085_bright-dolphin-91.html
│   ├── Yaya12085_cold-insect-20.html
│   ├── Yaya12085_curvy-frog-97.html
│   ├── Yaya12085_fuzzy-dog-3.html
│   ├── Yaya12085_lovely-firefox-94.html
│   ├── aasisodiya_sour-horse-29.html
│   ├── aboalsim114_clever-chipmunk-18.html
│   ├── adamgiebl_grumpy-moth-36.html
│   ├── ajithrthampi_kind-skunk-95.html
│   ├── alexruix_lazy-dragon-53.html
│   ├── alexruix_silent-otter-72.html
│   ├── alexruix_splendid-liger-23.html
│   ├── alexruix_unlucky-pug-99.html
│   ├── alfoly1988_curly-pug-70.html
│   ├── ami-hp_heavy-horse-9.html
│   ├── andrew-demchenk0_empty-penguin-100.html
│   ├── andrew-demchenk0_honest-stingray-90.html
│   ├── andrew-demchenk0_light-dragonfly-53.html
│   ├── andrew-demchenk0_tiny-fish-66.html
│   ├── anonithrax_brown-dragon-59.html
│   ├── arghyaBiswasDev_shaggy-ape-11.html
│   ├── aymenthedeveloper_polite-elephant-80.html
│   ├── bandirevanth_wonderful-dog-56.html
│   ├── barisdogansutcu_smart-panda-14.html
│   ├── barisdogansutcu_tender-dingo-64.html
│   ├── catraco_brown-termite-67.html
│   ├── catraco_soft-falcon-9.html
│   ├── cbolson_slippery-treefrog-30.html
│   ├── coding-masala_slimy-cow-34.html
│   ├── cosnametv_polite-turtle-80.html
│   ├── csemszepp_curly-parrot-90.html
│   ├── csemszepp_empty-chipmunk-58.html
│   ├── csemszepp_horrible-mouse-59.html
│   ├── csemszepp_rude-dolphin-85.html
│   ├── csemszepp_soft-pug-40.html
│   ├── csemszepp_terrible-frog-94.html
│   ├── csemszepp_tiny-emu-73.html
│   ├── csemszepp_witty-fly-56.html
│   ├── csozidev_weak-cheetah-44.html
│   ├── cssbuttons-io_mean-dolphin-24.html
│   ├── cuzpq_gentle-goat-72.html
│   ├── elijahgummer_light-jellyfish-4.html
│   ├── elijahgummer_lovely-hound-41.html
│   ├── elijahgummer_sharp-ape-65.html
│   ├── elijahgummer_shy-fireant-5.html
│   ├── elijahgummer_silly-starfish-49.html
│   ├── elijahgummer_tender-horse-32.html
│   ├── elijahwgummer-poc_giant-panda-93.html
│   ├── ercnersoy_evil-eel-92.html
│   ├── gharsh11032000_brave-pug-20.html
│   ├── gharsh11032000_green-liger-89.html
│   ├── gharsh11032000_old-horse-22.html
│   ├── gharsh11032000_sour-vampirebat-66.html
│   ├── gharsh11032000_warm-elephant-21.html
│   ├── guilhermeyohan_great-snake-42.html
│   ├── guilhermeyohan_nervous-wasp-81.html
│   ├── hoshikawamaki_cowardly-cougar-86.html
│   ├── iSweat-exe_unlucky-wasp-16.html
│   ├── ilkhoeri_blue-zebra-2.html
│   ├── javierBarroso_sharp-shrimp-7.html
│   ├── jubayer-10_lovely-treefrog-86.html
│   ├── kamehame-ha_rare-fox-50.html
│   ├── lenin55_fast-chicken-43.html
│   ├── martinval9_white-lionfish-18.html
│   ├── misaraadel_tough-termite-75.html
│   ├── mobinkakei_great-skunk-8.html
│   ├── mobinkakei_plastic-snail-19.html
│   ├── mobinkakei_spicy-moose-47.html
│   ├── mobinkakei_strong-lizard-79.html
│   ├── mrhyddenn_old-fish-66.html
│   ├── mrhyddenn_short-treefrog-23.html
│   ├── mrhyddenn_silly-starfish-53.html
│   ├── namecho_quiet-panther-93.html
│   ├── nanda248_helpless-bird-25.html
│   ├── neitt0_odd-hound-66.html
│   ├── nhfiz_old-lion-54.html
│   ├── nikk7007_smooth-fox-6.html
│   ├── njesenberger_brave-firefox-90.html
│   ├── njesenberger_friendly-otter-40.html
│   ├── njesenberger_rude-stingray-22.html
│   ├── omar-alghaish_smooth-chipmunk-60.html
│   ├── omriluz_cuddly-yak-64.html
│   ├── omriluz_tough-crab-66.html
│   ├── ozgeozkaraa01_evil-cheetah-7.html
│   ├── pandey_saurav__friendly-insect-59.html
│   ├── r7chardgh_cold-ape-34.html
│   ├── r7chardgh_dry-rabbit-69.html
│   ├── radwakhalil22_afraid-donkey-40.html
│   ├── rishichawda_fluffy-robin-48.html
│   ├── sabin-koju_spicy-robin-42.html
│   ├── sahilxkhadka_fast-insect-8.html
│   ├── satyamchaudharydev_shy-earwig-18.html
│   ├── shadowfax29_dull-deer-65.html
│   ├── shadowfax29_sweet-warthog-93.html
│   ├── simontheonlyone_bad-mole-99.html
│   ├── solanodz_chatty-kangaroo-46.html
│   ├── tarantino421_evil-squid-86.html
│   ├── varoonrao_spicy-hound-14.html
│   ├── victoryamaykin_funny-rabbit-33.html
│   ├── vikramsinghnegi_evil-lion-15.html
│   ├── vikramsinghnegi_green-monkey-99.html
│   ├── vikramsinghnegi_shaggy-owl-31.html
│   ├── vikramsinghnegi_sharp-cheetah-12.html
│   ├── vikramsinghnegi_sweet-cow-44.html
│   ├── vinodjangid07_average-jellyfish-29.html
│   ├── vinodjangid07_breezy-goose-71.html
│   ├── vinodjangid07_gentle-parrot-87.html
│   ├── vinodjangid07_itchy-mule-52.html
│   ├── vinodjangid07_lazy-cheetah-23.html
│   ├── vinodjangid07_lucky-mole-65.html
│   ├── vinodjangid07_moody-rabbit-65.html
│   ├── vinodjangid07_quick-moth-22.html
│   ├── vinodjangid07_quick-squid-85.html
│   ├── vinodjangid07_rare-duck-10.html
│   ├── vinodjangid07_selfish-snail-81.html
│   ├── vinodjangid07_soft-octopus-29.html
│   ├── vinodjangid07_tame-eagle-29.html
│   ├── vinodjangid07_tricky-turkey-48.html
│   ├── vinodjangid07_unlucky-emu-32.html
│   ├── vk-uiux_lucky-owl-16.html
│   ├── vk-uiux_mighty-quail-93.html
│   ├── vk-uiux_serious-wasp-12.html
│   ├── zanina-yassine_afraid-eel-50.html
│   ├── zebra76966_black-mayfly-32.html
│   └── zjssun_friendly-sheep-29.html
├── Tooltips/
│   ├── Cksunandh_afraid-snail-51.html
│   ├── Cobp_serious-termite-83.html
│   ├── Dyls00_afraid-newt-19.html
│   ├── EcheverriaJesus_hot-fish-35.html
│   ├── EcheverriaJesus_odd-seahorse-52.html
│   ├── G4b413l_dry-turtle-84.html
│   ├── Invacui_smart-kangaroo-41.html
│   ├── Javierrocadev_rude-seahorse-6.html
│   ├── JhaveLang_strange-wasp-98.html
│   ├── Lakshay-art_sour-dragon-56.html
│   ├── MRez321_nice-stingray-21.html
│   ├── MohamedAboSeada_bitter-skunk-14.html
│   ├── Mohammad-Rahme-576_hard-starfish-64.html
│   ├── Pipo-13_ugly-swan-20.html
│   ├── PriyanshuGupta28_chilly-eagle-55.html
│   ├── PriyanshuGupta28_dry-mole-12.html
│   ├── Quezaquo_bitter-wolverine-27.html
│   ├── Sacha-PDV_angry-cat-58.html
│   ├── SelfMadeSystem_neat-emu-37.html
│   ├── Siyu1017_giant-catfish-51.html
│   ├── SmookyDev_itchy-newt-24.html
│   ├── SmookyDev_plastic-dragonfly-83.html
│   ├── SouravBandyopadhyay_rare-sloth-65.html
│   ├── SouravBandyopadhyay_ugly-pug-52.html
│   ├── SteveBloX_orange-fox-41.html
│   ├── TanimMahbub_white-fly-43.html
│   ├── Tsiangana_honest-bobcat-61.html
│   ├── Tsiangana_thin-cougar-23.html
│   ├── Yassin6up_rare-goose-44.html
│   ├── Yaya12085_average-earwig-11.html
│   ├── ahmedyasserdev_wise-newt-71.html
│   ├── akshat-patel28_cold-chicken-82.html
│   ├── andrew-demchenk0_bad-sloth-57.html
│   ├── ayman-ashine_curvy-starfish-3.html
│   ├── ayman-ashine_terrible-puma-8.html
│   ├── barisdogansutcu_plastic-dolphin-67.html
│   ├── bociKond_terrible-emu-64.html
│   ├── csemszepp_ordinary-owl-54.html
│   ├── eduardojsc18_serious-seahorse-3.html
│   ├── elijahgummer_brown-moose-94.html
│   ├── elijahgummer_slimy-bobcat-84.html
│   ├── escannord_spotty-jellyfish-36.html
│   ├── gharsh11032000_spotty-zebra-83.html
│   ├── gouthamnetha02_strong-zebra-90.html
│   ├── iammar99_angry-dragonfly-22.html
│   ├── johnliter_clever-lizard-46.html
│   ├── kyle1dev_quiet-cougar-91.html
│   ├── lvloper_modern-ladybug-94.html
│   ├── nabilbdt_new-robin-92.html
│   ├── neerajbaniwal_gentle-turkey-54.html
│   ├── neerajbaniwal_sweet-sloth-99.html
│   ├── omriluz_heavy-emu-75.html
│   ├── original-lotfy_jolly-turkey-16.html
│   ├── piolho123_lazy-husky-91.html
│   ├── sahilxkhadka_modern-snail-66.html
│   ├── seyed-mohsen-mousavi_red-panda-0.html
│   ├── theleaderofenemy_rotten-liger-72.html
│   ├── themrsami_cold-horse-3.html
│   ├── themrsami_quick-zebra-71.html
│   ├── vikas7754_evil-mule-52.html
│   ├── vinodjangid07_mighty-elephant-52.html
│   └── vnuny_stale-mouse-74.html
└── loaders/
    ├── 0xnihilism_brown-puma-30.html
    ├── A-nshuman_fluffy-fox-90.html
    ├── AHMED-MIT_cold-ape-73.html
    ├── AHMED-MIT_curly-rabbit-4.html
    ├── AHMED-MIT_dry-wolverine-85.html
    ├── AHMED-MIT_quick-dragonfly-5.html
    ├── AHMED-MIT_serious-mule-65.html
    ├── AbanoubMagdy1_evil-bullfrog-30.html
    ├── AbanoubMagdy1_hungry-elephant-87.html
    ├── AbanoubMagdy1_tall-bobcat-75.html
    ├── Abrar-Hussain1_lovely-rabbit-61.html
    ├── Admin12121_black-sheep-17.html
    ├── Admin12121_horrible-hound-96.html
    ├── Admin12121_selfish-starfish-81.html
    ├── Admin12121_stupid-mouse-29.html
    ├── Admin12121_white-husky-41.html
    ├── AkshatDaxini_jolly-hound-16.html
    ├── Akshdeep74644_friendly-turtle-73.html
    ├── Alaner-xs_loud-lizard-23.html
    ├── Ali-Tahmazi99_bad-wasp-77.html
    ├── Ali-Tahmazi99_breezy-squid-90.html
    ├── Ali-Tahmazi99_nervous-firefox-94.html
    ├── Ali-Tahmazi99_smooth-donkey-70.html
    ├── AmIt-DasIT_white-termite-91.html
    ├── Amerss_massive-robin-70.html
    ├── Ankesh2002_lucky-cobra-80.html
    ├── AqFox_clever-eel-67.html
    ├── AqFox_cuddly-turtle-6.html
    ├── AqFox_curly-cheetah-74.html
    ├── AqFox_fast-bat-33.html
    ├── AqFox_little-skunk-97.html
    ├── AqFox_silent-quail-21.html
    ├── AqFox_sour-robin-86.html
    ├── AqFox_tiny-jellyfish-70.html
    ├── AqFox_tiny-wolverine-88.html
    ├── AqFox_young-dragon-29.html
    ├── ArnavK-09_shy-panther-83.html
    ├── ArnavK-09_swift-mule-33.html
    ├── Avishek255874_weak-turtle-32.html
    ├── Bethel-nz_honest-elephant-63.html
    ├── BlackisPlay_fast-lizard-14.html
    ├── BlackisPlay_pretty-sloth-9.html
    ├── BlackisPlay_tasty-otter-13.html
    ├── BlagaDavid74257_warm-walrus-89.html
    ├── Bodyhc_curly-bullfrog-98.html
    ├── Bodyhc_witty-robin-88.html
    ├── Bodyhc_wonderful-panther-25.html
    ├── Cebucoder_foolish-kangaroo-50.html
    ├── CharandeepSingh01_curly-husky-35.html
    ├── Charly-T_swift-bulldog-26.html
    ├── Charly-T_weak-panther-69.html
    ├── ChaudaryHammad_horrible-ape-25.html
    ├── ChaudaryHammad_white-rat-90.html
    ├── CheneyLin_lazy-goat-96.html
    ├── Chriskoziol_bright-ladybug-86.html
    ├── Cksunandh_helpless-moose-39.html
    ├── Cksunandh_nice-panda-34.html
    ├── Cksunandh_young-dragonfly-81.html
    ├── ClawHack1_evil-panda-55.html
    ├── ClawHack1_witty-ladybug-78.html
    ├── Clemix37_young-bulldog-90.html
    ├── Codecite_mean-puma-17.html
    ├── Codecite_witty-falcon-85.html
    ├── Cornerstone-04_chilly-fish-82.html
    ├── Cornerstone-04_little-mouse-69.html
    ├── Cornerstone-04_massive-impala-29.html
    ├── Cornerstone-04_neat-dragon-24.html
    ├── Cornerstone-04_terrible-termite-49.html
    ├── Cornerstone-04_ugly-rattlesnake-41.html
    ├── Cybercom682_happy-mole-82.html
    ├── Cybercom682_pink-shrimp-80.html
    ├── Cybercom682_slippery-bulldog-47.html
    ├── DSB2004_ugly-yak-77.html
    ├── DarrylNoakes_cuddly-falcon-18.html
    ├── Dennyhml_grumpy-squid-93.html
    ├── Deri-Kurniawan_hot-bullfrog-96.html
    ├── Deri-Kurniawan_tall-robin-6.html
    ├── Deri-Kurniawan_young-wolverine-83.html
    ├── DevPTG_chatty-bat-62.html
    ├── DevPTG_old-grasshopper-0.html
    ├── DevVaradPatil_angry-dragonfly-63.html
    ├── Df12345677_honest-seahorse-42.html
    ├── Diox221_silent-termite-64.html
    ├── Donewenfu_massive-badger-47.html
    ├── EddyBel_jolly-monkey-87.html
    ├── EmmaxPlay_polite-husky-37.html
    ├── FWDJc_empty-fish-42.html
    ├── FWDJc_massive-badger-8.html
    ├── FWDJc_strong-mayfly-8.html
    ├── Fadhilmagass_bad-firefox-25.html
    ├── Fareny_bad-snail-59.html
    ├── Fernando-sv_quiet-zebra-41.html
    ├── Flowelife_slippery-catfish-7.html
    ├── Fujitawa_neat-dodo-98.html
    ├── G27XLEO_spotty-chipmunk-84.html
    ├── G4b413l_angry-snail-76.html
    ├── G4b413l_big-bulldog-8.html
    ├── G4b413l_brave-wasp-99.html
    ├── G4b413l_cuddly-turkey-4.html
    ├── G4b413l_heavy-otter-34.html
    ├── G4b413l_hot-crab-48.html
    ├── G4b413l_jolly-kangaroo-36.html
    ├── G4b413l_kind-cougar-54.html
    ├── G4b413l_light-bobcat-34.html
    ├── G4b413l_lovely-kangaroo-88.html
    ├── G4b413l_massive-vampirebat-17.html
    ├── G4b413l_nasty-yak-65.html
    ├── G4b413l_pretty-crab-95.html
    ├── G4b413l_slimy-otter-89.html
    ├── G4b413l_soft-jellyfish-12.html
    ├── G4b413l_tidy-walrus-92.html
    ├── G4b413l_unlucky-stingray-83.html
    ├── Galahhad_cold-yak-10.html
    ├── Gautammsharma_polite-bat-25.html
    ├── Gianluks90_smart-otter-24.html
    ├── Hashir-Ahmed123_spotty-mouse-64.html
    ├── HyuOniichan_proud-rat-96.html
    ├── Iliasman2_tender-bulldog-74.html
    ├── IsaiahAltDelete_witty-deer-53.html
    ├── Itskrish01_modern-moth-47.html
    ├── Javierrocadev_hard-horse-30.html
    ├── Javierrocadev_new-sloth-45.html
    ├── JaydipPrajapati1910_bright-fox-47.html
    ├── JaydipPrajapati1910_curly-monkey-15.html
    ├── JaydipPrajapati1910_good-starfish-60.html
    ├── JaydipPrajapati1910_heavy-crab-98.html
    ├── JaydipPrajapati1910_lazy-lion-40.html
    ├── JaydipPrajapati1910_odd-ladybug-43.html
    ├── JaydipPrajapati1910_pink-octopus-20.html
    ├── JaydipPrajapati1910_smart-falcon-33.html
    ├── JaydipPrajapati1910_spicy-eel-83.html
    ├── JaydipPrajapati1910_stale-pug-89.html
    ├── JaydipPrajapati1910_strong-zebra-9.html
    ├── JaydipPrajapati1910_unlucky-wolverine-27.html
    ├── JesusRafaelNavaCruz_chilly-vampirebat-53.html
    ├── JkHuger_bad-parrot-46.html
    ├── JkHuger_brown-dragon-7.html
    ├── JkHuger_dangerous-chipmunk-23.html
    ├── JkHuger_dangerous-dolphin-42.html
    ├── JkHuger_fuzzy-mouse-64.html
    ├── JkHuger_giant-dodo-93.html
    ├── JkHuger_heavy-walrus-48.html
    ├── JkHuger_light-lion-86.html
    ├── JkHuger_light-monkey-24.html
    ├── JkHuger_little-falcon-22.html
    ├── JkHuger_mean-bobcat-66.html
    ├── JkHuger_moody-crab-18.html
    ├── JkHuger_new-deer-97.html
    ├── JkHuger_odd-insect-77.html
    ├── JkHuger_quick-elephant-91.html
    ├── JkHuger_quick-rattlesnake-57.html
    ├── JkHuger_rotten-baboon-90.html
    ├── JkHuger_selfish-bulldog-36.html
    ├── JkHuger_silly-termite-54.html
    ├── JkHuger_strong-rat-28.html
    ├── JkHuger_sweet-starfish-100.html
    ├── JkHuger_tall-duck-98.html
    ├── JkHuger_tidy-skunk-55.html
    ├── JkHuger_ugly-shrimp-50.html
    ├── JkHuger_unlucky-turkey-82.html
    ├── JorginoSerra_chatty-earwig-93.html
    ├── Juanes200122_fluffy-lizard-32.html
    ├── Juanes200122_funny-frog-63.html
    ├── Juanes200122_great-starfish-26.html
    ├── Juanes200122_orange-bat-7.html
    ├── Juanes200122_ugly-zebra-9.html
    ├── JulioCodesSM_silly-grasshopper-43.html
    ├── K2-dev21_nervous-otter-12.html
    ├── KSAplay_helpless-moose-10.html
    ├── KSAplay_quiet-snake-78.html
    ├── Kemboi-Dun_big-dolphin-10.html
    ├── KhaledMatalkah_modern-rattlesnake-33.html
    ├── KhaledMatalkah_purple-mule-91.html
    ├── Lanicet_fluffy-otter-43.html
    ├── LeonKohli_ordinary-rat-31.html
    ├── Leoodaviid_lazy-mole-28.html
    ├── Li-Deheng_bright-firefox-37.html
    ├── LightAndy1_helpless-fireant-0.html
    ├── Lissy2019_fat-wasp-24.html
    ├── Lmickk2_giant-lion-94.html
    ├── Lmickk2_lovely-fireant-30.html
    ├── Markoslc_gentle-termite-56.html
    ├── MbaziiraRonald_green-insect-40.html
    ├── Mhyar-nsi_lucky-chicken-20.html
    ├── Mike11jr_ancient-mule-46.html
    ├── Mike11jr_fluffy-mule-69.html
    ├── Mike11jr_nice-dog-2.html
    ├── MikeAndrewDesigner_fluffy-dragonfly-21.html
    ├── MiniJohan_quick-otter-37.html
    ├── MiniJohan_sweet-warthog-36.html
    ├── MrLegendGaming_unlucky-goat-90.html
    ├── MyNameJeremy_quick-turkey-64.html
    ├── MyNameJeremy_silent-deer-42.html
    ├── Nadabasuony_cowardly-lionfish-57.html
    ├── Navarog21_little-falcon-37.html
    ├── Nawsome_ancient-yak-42.html
    ├── Nawsome_blue-dragon-70.html
    ├── Nawsome_brave-turtle-26.html
    ├── Nawsome_breezy-ape-20.html
    ├── Nawsome_cold-liger-90.html
    ├── Nawsome_cowardly-squid-50.html
    ├── Nawsome_curly-goose-54.html
    ├── Nawsome_dull-penguin-97.html
    ├── Nawsome_fluffy-seahorse-28.html
    ├── Nawsome_fresh-panther-41.html
    ├── Nawsome_friendly-parrot-96.html
    ├── Nawsome_hungry-pig-72.html
    ├── Nawsome_kind-mole-87.html
    ├── Nawsome_light-husky-91.html
    ├── Nawsome_moody-dingo-3.html
    ├── Nawsome_new-snail-22.html
    ├── Nawsome_odd-rat-61.html
    ├── Nawsome_purple-mule-73.html
    ├── Nawsome_slimy-dodo-36.html
    ├── Nawsome_slimy-tiger-93.html
    ├── Nawsome_sour-fly-72.html
    ├── Nawsome_spicy-wolverine-85.html
    ├── Nawsome_tall-monkey-16.html
    ├── Nawsome_tender-swan-29.html
    ├── Nawsome_terrible-dog-7.html
    ├── Nawsome_tidy-panda-70.html
    ├── Nawsome_ugly-skunk-66.html
    ├── Nawsome_wet-mayfly-23.html
    ├── Nawsome_young-eel-20.html
    ├── Nawsome_young-goat-78.html
    ├── NlghtM4re_jolly-newt-35.html
    ├── NlghtM4re_moody-fly-80.html
    ├── NlghtM4re_new-seahorse-90.html
    ├── NlghtM4re_ordinary-mouse-17.html
    ├── NlghtM4re_popular-crab-99.html
    ├── NlghtM4re_silent-husky-54.html
    ├── NlghtM4re_tasty-puma-74.html
    ├── NlghtM4re_young-swan-89.html
    ├── NourSafta_cold-rabbit-94.html
    ├── OMPRABHU8125_nice-sheep-25.html
    ├── Peary74_foolish-sloth-23.html
    ├── PhilibertGentien_smart-pug-99.html
    ├── Praashoo7_black-bear-45.html
    ├── Praashoo7_funny-treefrog-32.html
    ├── Praashoo7_gentle-grasshopper-65.html
    ├── Praashoo7_giant-mole-65.html
    ├── Praashoo7_green-goat-59.html
    ├── Praashoo7_happy-husky-85.html
    ├── Praashoo7_itchy-jellyfish-43.html
    ├── Praashoo7_lucky-hound-44.html
    ├── Praashoo7_odd-duck-54.html
    ├── Praashoo7_stale-bat-2.html
    ├── Praashoo7_young-turtle-98.html
    ├── Pradeepsaranbishnoi_breezy-grasshopper-79.html
    ├── Pradeepsaranbishnoi_chatty-bird-86.html
    ├── Pradeepsaranbishnoi_curly-wasp-39.html
    ├── Pradeepsaranbishnoi_dangerous-horse-50.html
    ├── Pradeepsaranbishnoi_fast-cobra-20.html
    ├── Pradeepsaranbishnoi_fast-frog-4.html
    ├── Pradeepsaranbishnoi_fuzzy-newt-54.html
    ├── Pradeepsaranbishnoi_neat-swan-21.html
    ├── Pradeepsaranbishnoi_nervous-starfish-15.html
    ├── Pradeepsaranbishnoi_plastic-tiger-87.html
    ├── Pradeepsaranbishnoi_rude-vampirebat-100.html
    ├── Pradeepsaranbishnoi_soft-turkey-91.html
    ├── Pradeepsaranbishnoi_tall-fish-38.html
    ├── Pradeepsaranbishnoi_tall-snail-83.html
    ├── Pradeepsaranbishnoi_tricky-catfish-63.html
    ├── Pradeepsaranbishnoi_witty-chipmunk-68.html
    ├── PriyanshuGupta28_calm-earwig-94.html
    ├── PriyanshuGupta28_chilly-lion-59.html
    ├── PriyanshuGupta28_green-rat-73.html
    ├── PriyanshuGupta28_little-zebra-36.html
    ├── PriyanshuGupta28_popular-cobra-49.html
    ├── PriyanshuGupta28_rare-panda-30.html
    ├── PriyanshuGupta28_strong-monkey-50.html
    ├── PriyanshuGupta28_tricky-wolverine-48.html
    ├── RafaM-dev_rude-panther-60.html
    ├── Rajan1092_helpless-newt-19.html
    ├── Ratinax_hard-chipmunk-89.html
    ├── Ratinax_wonderful-dingo-30.html
    ├── Rkyz_strange-wombat-76.html
    ├── Rodrypaladin_evil-goat-39.html
    ├── Rodrypaladin_lazy-starfish-57.html
    ├── RoninLJY_angry-jellyfish-76.html
    ├── S4tyendra_fast-frog-87.html
    ├── SHABANA7422_honest-dodo-28.html
    ├── Saiyed-Tanvir_blue-tiger-12.html
    ├── Saiyed-Tanvir_terrible-bird-13.html
    ├── Salem795_fluffy-cat-65.html
    ├── SalladShooter_mean-fireant-26.html
    ├── SanthoshSJ-Dev_big-parrot-60.html
    ├── SanthoshSJ-Dev_slippery-eel-89.html
    ├── Satwinder04_afraid-treefrog-79.html
    ├── Satwinder04_cowardly-wasp-94.html
    ├── Satwinder04_new-mayfly-72.html
    ├── Satwinder04_swift-donkey-38.html
    ├── Satwinder04_witty-starfish-81.html
    ├── SchawnnahJ_tough-baboon-87.html
    ├── SelfMadeSystem_black-yak-68.html
    ├── SelfMadeSystem_giant-bird-69.html
    ├── SelfMadeSystem_giant-bobcat-72.html
    ├── SelfMadeSystem_jolly-pig-52.html
    ├── SelfMadeSystem_mean-dragonfly-42.html
    ├── SelfMadeSystem_orange-crab-82.html
    ├── SelfMadeSystem_pretty-treefrog-77.html
    ├── Sendung_average-firefox-33.html
    ├── ShYnGySYes_young-moose-57.html
    ├── Shoh2008_ancient-lionfish-38.html
    ├── Shoh2008_ancient-lionfish-44.html
    ├── Shoh2008_bad-earwig-19.html
    ├── Shoh2008_bad-lionfish-99.html
    ├── Shoh2008_bitter-moth-36.html
    ├── Shoh2008_calm-fish-83.html
    ├── Shoh2008_clever-goose-73.html
    ├── Shoh2008_cold-walrus-85.html
    ├── Shoh2008_curly-wombat-86.html
    ├── Shoh2008_curvy-bulldog-27.html
    ├── Shoh2008_dangerous-sheep-53.html
    ├── Shoh2008_dull-cheetah-34.html
    ├── Shoh2008_fuzzy-tiger-54.html
    ├── Shoh2008_great-pug-66.html
    ├── Shoh2008_hot-dragonfly-11.html
    ├── Shoh2008_hot-hound-11.html
    ├── Shoh2008_hot-skunk-36.html
    ├── Shoh2008_kind-baboon-47.html
    ├── Shoh2008_loud-warthog-69.html
    ├── Shoh2008_lucky-emu-65.html
    ├── Shoh2008_lucky-quail-40.html
    ├── Shoh2008_modern-falcon-64.html
    ├── Shoh2008_nervous-lizard-11.html
    ├── Shoh2008_new-lion-60.html
    ├── Shoh2008_orange-mouse-40.html
    ├── Shoh2008_perfect-bird-26.html
    ├── Shoh2008_perfect-fireant-0.html
    ├── Shoh2008_perfect-monkey-20.html
    ├── Shoh2008_quick-fox-3.html
    ├── Shoh2008_red-mouse-25.html
    ├── Shoh2008_selfish-crab-11.html
    ├── Shoh2008_shaggy-tiger-17.html
    ├── Shoh2008_stale-panda-35.html
    ├── Shoh2008_strange-crab-54.html
    ├── Shoh2008_terrible-fireant-25.html
    ├── Shoh2008_thin-turkey-8.html
    ├── Shoh2008_thin-walrus-48.html
    ├── Shoh2008_ugly-elephant-80.html
    ├── Shoh2008_weak-chipmunk-86.html
    ├── Shoh2008_white-kangaroo-0.html
    ├── Shoh2008_yellow-dolphin-16.html
    ├── Shoh2008_yellow-hound-47.html
    ├── SilasRodrigues19_sweet-monkey-41.html
    ├── Smit-Prajapati_nice-duck-87.html
    ├── Smit-Prajapati_soft-donkey-32.html
    ├── Smit-Prajapati_tricky-turtle-16.html
    ├── SmookyDev_shaggy-donkey-90.html
    ├── SmookyDev_tiny-quail-64.html
    ├── SouravBandyopadhyay_fresh-squid-60.html
    ├── SouravBandyopadhyay_rude-sloth-38.html
    ├── SouravBandyopadhyay_stupid-eagle-66.html
    ├── SouravBandyopadhyay_terrible-dingo-32.html
    ├── Sourcesketch_shy-walrus-51.html
    ├── Sourcesketch_strange-catfish-68.html
    ├── Srivatsajbhat_tidy-parrot-17.html
    ├── StealthWorm_chatty-zebra-11.html
    ├── StealthWorm_cuddly-wasp-46.html
    ├── StealthWorm_mighty-bear-58.html
    ├── StealthWorm_pink-duck-62.html
    ├── SteveBloX_happy-emu-33.html
    ├── SteveBloX_wise-moose-53.html
    ├── Subaashbala_ancient-lizard-57.html
    ├── Subaashbala_average-horse-18.html
    ├── Subaashbala_itchy-husky-37.html
    ├── Subaashbala_massive-moth-6.html
    ├── Subaashbala_polite-newt-9.html
    ├── Subaashbala_red-baboon-28.html
    ├── Subaashbala_tender-baboon-47.html
    ├── Subaashbala_ugly-lizard-47.html
    ├── TamaniPhiri_tidy-newt-97.html
    ├── TechByElijah_ugly-termite-49.html
    ├── TemRevil_green-lion-91.html
    ├── TemRevil_little-duck-0.html
    ├── TemRevil_mean-panda-76.html
    ├── TemRevil_rude-moth-53.html
    ├── TheAbieza_nasty-vampirebat-71.html
    ├── TheAbieza_short-swan-12.html
    ├── TimTrayler_chilly-turtle-66.html
    ├── Tsiangana_mighty-grasshopper-37.html
    ├── Tsiangana_new-owl-29.html
    ├── Tsiangana_purple-fly-11.html
    ├── Tsiangana_tall-duck-28.html
    ├── Uncannypotato69_dull-wolverine-48.html
    ├── Uncannypotato69_shaggy-emu-40.html
    ├── VashonG_clever-bullfrog-59.html
    ├── VashonG_hard-sheep-18.html
    ├── VashonG_jolly-yak-23.html
    ├── VashonG_sour-bat-79.html
    ├── VashonG_spicy-crab-68.html
    ├── VashonG_unlucky-crab-35.html
    ├── Victan78_serious-gecko-84.html
    ├── WerlynRodriguez_hard-fox-45.html
    ├── YarikZhukovDesigner_neat-mole-44.html
    ├── Yaya12085_gentle-robin-36.html
    ├── Yaya12085_giant-shrimp-51.html
    ├── Yaya12085_loud-bullfrog-54.html
    ├── Yaya12085_purple-bullfrog-80.html
    ├── Yaya12085_short-swan-83.html
    ├── Yaya12085_strange-puma-7.html
    ├── Yogeshawghad0477_angry-ladybug-53.html
    ├── Yogeshawghad0477_blue-otter-69.html
    ├── Z4drus_average-lizard-53.html
    ├── Z4drus_cowardly-deer-31.html
    ├── Z4drus_grumpy-bird-12.html
    ├── Z4drus_orange-rattlesnake-68.html
    ├── Z4drus_polite-seahorse-77.html
    ├── ZacharyCrespin_grumpy-stingray-26.html
    ├── Zadrus_bad-penguin-12.html
    ├── Zadrus_sweet-dragon-8.html
    ├── aadil-01_rude-moth-27.html
    ├── aadium_bright-lion-66.html
    ├── aadium_friendly-puma-64.html
    ├── aadium_purple-panda-57.html
    ├── aadium_wonderful-otter-43.html
    ├── abrahamcalsin_breezy-panther-14.html
    ├── abrahamcalsin_hot-lionfish-16.html
    ├── abrahamcalsin_serious-turkey-52.html
    ├── abuayaan01_quiet-gecko-53.html
    ├── adamgiebl_thin-lionfish-5.html
    ├── adilsarfraz02_tough-seahorse-89.html
    ├── ahmed150up_old-moose-46.html
    ├── akshat-patel28_cold-impala-14.html
    ├── akshat-patel28_rare-turtle-53.html
    ├── alexruix_big-octopus-60.html
    ├── alexruix_fast-tiger-58.html
    ├── alexruix_fluffy-starfish-52.html
    ├── alexruix_fuzzy-yak-91.html
    ├── alexruix_neat-tiger-82.html
    ├── alexruix_nervous-sheep-18.html
    ├── alexruix_tame-fly-42.html
    ├── alexruix_white-cat-50.html
    ├── aliaypov1_smooth-hound-6.html
    ├── andrew-demchenk0_kind-ladybug-7.html
    ├── andrew-demchenk0_new-kangaroo-60.html
    ├── andrew-demchenk0_orange-monkey-2.html
    ├── andrew-demchenk0_silent-earwig-10.html
    ├── andrew-demchenk0_white-robin-100.html
    ├── angelo2004-mateus_neat-owl-38.html
    ├── arshshaikh06_purple-sheep-4.html
    ├── aryamitra06_silent-lion-21.html
    ├── asgardOP_ancient-cow-78.html
    ├── asgardOP_little-cougar-80.html
    ├── asgardOP_sour-mayfly-20.html
    ├── ashish-yadv_heavy-walrus-26.html
    ├── ashish-yadv_hungry-otter-20.html
    ├── ayman-ashine_rare-otter-33.html
    ├── barisdogansutcu_light-rat-32.html
    ├── bek_uz_time_old-dodo-74.html
    ├── benjimich_shy-newt-25.html
    ├── bernethe_breezy-bullfrog-65.html
    ├── bernethe_fat-impala-67.html
    ├── bernethe_friendly-termite-42.html
    ├── bernethe_modern-dolphin-97.html
    ├── bernethe_purple-snail-8.html
    ├── bhaveshxrawat_silly-panda-37.html
    ├── bhaveshxrawat_unlucky-wolverine-79.html
    ├── bociKond_breezy-sloth-97.html
    ├── bociKond_foolish-sloth-24.html
    ├── bociKond_green-mayfly-76.html
    ├── bociKond_red-dingo-74.html
    ├── bociKond_wise-bat-13.html
    ├── boryanakrasteva_ancient-quail-68.html
    ├── boryanakrasteva_fast-eagle-21.html
    ├── boryanakrasteva_shy-treefrog-52.html
    ├── bundui_fat-jellyfish-70.html
    ├── carhtube_happy-puma-68.html
    ├── carlosepcc_purple-starfish-41.html
    ├── catraco_green-crab-61.html
    ├── catraco_strong-bat-45.html
    ├── choudhary-usman_swift-hound-29.html
    ├── choudhary-usman_yellow-grasshopper-30.html
    ├── codebykay101_dull-shrimp-28.html
    ├── coding-masala_shaggy-vampirebat-38.html
    ├── coding-masala_smooth-hound-73.html
    ├── coding-masala_strong-fox-19.html
    ├── cohencoo_dry-rat-94.html
    ├── cohencoo_ordinary-kangaroo-82.html
    ├── csemszepp_bright-vampirebat-35.html
    ├── csemszepp_happy-dog-58.html
    ├── csemszepp_helpless-tiger-5.html
    ├── csemszepp_nice-liger-66.html
    ├── csemszepp_nice-octopus-57.html
    ├── csemszepp_quick-sloth-23.html
    ├── csemszepp_spotty-sloth-98.html
    ├── csemszepp_ugly-crab-22.html
    ├── csozidev_afraid-rattlesnake-67.html
    ├── csozidev_curly-crab-48.html
    ├── csozidev_fat-eagle-48.html
    ├── csozidev_jolly-termite-4.html
    ├── csozidev_popular-ape-6.html
    ├── csozidev_weak-bulldog-22.html
    ├── csozidev_young-bat-70.html
    ├── d4niz_bitter-seahorse-2.html
    ├── david-mohseni_breezy-penguin-47.html
    ├── david-mohseni_smart-cow-19.html
    ├── david-mohseni_yellow-cat-24.html
    ├── davidhbt_spicy-eagle-12.html
    ├── devAaus_funny-catfish-94.html
    ├── dhruv465_stupid-starfish-42.html
    ├── dimasptrautmaa_kind-eel-48.html
    ├── doniaskima_big-bear-52.html
    ├── doniaskima_calm-yak-25.html
    ├── doniaskima_clever-wombat-14.html
    ├── doniaskima_cowardly-frog-28.html
    ├── doniaskima_fresh-panther-60.html
    ├── doniaskima_hard-rattlesnake-83.html
    ├── doniaskima_itchy-baboon-21.html
    ├── doniaskima_jolly-fireant-35.html
    ├── doniaskima_light-dog-59.html
    ├── doniaskima_neat-fox-67.html
    ├── doniaskima_pretty-dolphin-47.html
    ├── doniaskima_pretty-mouse-82.html
    ├── doniaskima_rare-falcon-68.html
    ├── doniaskima_rare-newt-29.html
    ├── doniaskima_sharp-sheep-24.html
    ├── doniaskima_silent-skunk-22.html
    ├── doniaskima_sweet-gecko-35.html
    ├── doniaskima_wet-parrot-70.html
    ├── doniaskima_yellow-deer-12.html
    ├── dvhoang2106_orange-fox-63.html
    ├── dylanharriscameron_ancient-falcon-18.html
    ├── e-coders_honest-dingo-15.html
    ├── edwardytb_serious-cat-43.html
    ├── elijahgummer_chatty-rattlesnake-90.html
    ├── elijahgummer_hungry-moth-59.html
    ├── elijahgummer_new-fly-30.html
    ├── elijahgummer_sharp-squid-77.html
    ├── elijahgummer_slippery-puma-80.html
    ├── elijahgummer_sour-earwig-21.html
    ├── elijahgummer_stale-panda-59.html
    ├── elijahgummer_sweet-earwig-47.html
    ├── ercnersoy_massive-mouse-48.html
    ├── escannord_fast-bear-97.html
    ├── escannord_strange-falcon-84.html
    ├── escannord_ugly-octopus-60.html
    ├── eslam-hany_afraid-stingray-62.html
    ├── exyreams_mean-dragon-22.html
    ├── exyreams_pretty-eel-31.html
    ├── fanishah_bitter-dragonfly-93.html
    ├── fanishah_calm-dingo-24.html
    ├── fanishah_dull-vampirebat-56.html
    ├── fanishah_fat-dodo-89.html
    ├── fanishah_funny-cow-54.html
    ├── fanishah_quick-deer-33.html
    ├── fanishah_selfish-goose-88.html
    ├── fanishah_tender-bat-85.html
    ├── fanishah_terrible-goose-14.html
    ├── fanishah_terrible-snake-34.html
    ├── fanishah_wicked-wasp-20.html
    ├── fateself_tricky-crab-38.html
    ├── felipesntr_odd-wasp-90.html
    ├── forgingdestiny_brave-fireant-72.html
    ├── fox-tech0_proud-grasshopper-33.html
    ├── funkyjuice213_chilly-fireant-79.html
    ├── gagan-gv_brave-chipmunk-25.html
    ├── gagan-gv_nervous-wasp-20.html
    ├── gagan-gv_stupid-walrus-23.html
    ├── gagan-gv_wet-dolphin-100.html
    ├── gagan-gv_witty-lizard-19.html
    ├── gagan-gv_yellow-panther-46.html
    ├── garerim_loud-ape-6.html
    ├── gharsh11032000_lucky-horse-98.html
    ├── gharsh11032000_slimy-donkey-39.html
    ├── gharsh11032000_tall-impala-21.html
    ├── gsperandio_shaggy-kangaroo-12.html
    ├── guilhermeyohan_bright-pug-33.html
    ├── guilhermeyohan_fluffy-turtle-93.html
    ├── gustavofusco_rare-pug-90.html
    ├── harman-kanda_purple-falcon-85.html
    ├── hoi-du_dull-stingray-6.html
    ├── htwarriors108_massive-dodo-50.html
    ├── iamrippon_quiet-hound-73.html
    ├── ibrahimjlidi_tasty-impala-53.html
    ├── isfan4ik_fuzzy-badger-100.html
    ├── isfan4ik_nice-mouse-77.html
    ├── jack0237_modern-quail-99.html
    ├── jamik-dev_giant-duck-87.html
    ├── jeremyssocial_curvy-walrus-79.html
    ├── jeremyssocial_great-horse-35.html
    ├── jeremyssocial_helpless-chipmunk-98.html
    ├── jeremyssocial_ordinary-baboon-49.html
    ├── jeremyssocial_rude-shrimp-72.html
    ├── jeremyssocial_ugly-bullfrog-62.html
    ├── kennyotsu_fresh-lizard-20.html
    ├── kerolos23_ancient-lizard-27.html
    ├── kerolos23_curvy-dingo-26.html
    ├── kerolos23_smooth-wombat-54.html
    ├── krlozCJ_horrible-fish-14.html
    ├── lenin55_sour-chipmunk-96.html
    ├── lesimpleliott_purple-dragon-56.html
    ├── lukepadiachy_funny-moose-89.html
    ├── mahendrameghwal_heavy-shrimp-48.html
    ├── milley69_chilly-swan-51.html
    ├── mobineshaghi_happy-duck-88.html
    ├── mobinkakei_bright-wolverine-29.html
    ├── mobinkakei_curly-fish-45.html
    ├── mobinkakei_dry-insect-94.html
    ├── mobinkakei_fuzzy-fish-86.html
    ├── mobinkakei_grumpy-turtle-41.html
    ├── mobinkakei_pink-deer-76.html
    ├── mobinkakei_pretty-fireant-78.html
    ├── mobinkakei_proud-ladybug-46.html
    ├── mobinkakei_tall-robin-8.html
    ├── mobinkakei_tricky-duck-12.html
    ├── mrhyddenn_angry-goat-2.html
    ├── mrhyddenn_average-dodo-53.html
    ├── mrhyddenn_black-bullfrog-16.html
    ├── mrhyddenn_calm-snail-67.html
    ├── mrhyddenn_cowardly-ladybug-61.html
    ├── mrhyddenn_curly-husky-77.html
    ├── mrhyddenn_curly-zebra-89.html
    ├── mrhyddenn_curvy-insect-3.html
    ├── mrhyddenn_fast-bear-60.html
    ├── mrhyddenn_giant-lion-34.html
    ├── mrhyddenn_massive-newt-28.html
    ├── mrhyddenn_new-walrus-45.html
    ├── mrhyddenn_nice-swan-72.html
    ├── mrhyddenn_ordinary-wolverine-98.html
    ├── mrhyddenn_plastic-panther-51.html
    ├── mrhyddenn_spicy-dolphin-98.html
    ├── mrhyddenn_sweet-fish-92.html
    ├── mrhyddenn_tasty-crab-98.html
    ├── mrhyddenn_thin-earwig-32.html
    ├── mrhyddenn_wise-fox-44.html
    ├── mrhyddenn_witty-deer-83.html
    ├── mrpumps31232_strange-dragonfly-94.html
    ├── mrpumps31232_swift-mule-62.html
    ├── myselfvenky_giant-impala-58.html
    ├── omar-alghaish_grumpy-bobcat-32.html
    ├── omar-alghaish_moody-wombat-53.html
    ├── omar-alghaish_wicked-seahorse-54.html
    ├── omriluz_black-panda-47.html
    ├── omriluz_spotty-mule-31.html
    ├── ozgeozkaraa01_strong-dragonfly-81.html
    ├── pasha43_funny-shrimp-71.html
    ├── pedertanberg_helpless-sheep-31.html
    ├── pierregirou_grumpy-cow-45.html
    ├── polidahiya_sharp-cow-38.html
    ├── pradipkaityuiux_mean-yak-69.html
    ├── pravusagar_tidy-zebra-16.html
    ├── preshpi_friendly-donkey-60.html
    ├── r7chardgh_helpless-elephant-82.html
    ├── radwakhalil22_spotty-pug-7.html
    ├── roroland_curly-stingray-36.html
    ├── sabbircoder07_fresh-tiger-75.html
    ├── sahilxkhadka_proud-octopus-27.html
    ├── sahilxkhadka_quiet-monkey-96.html
    ├── satyamchaudharydev_afraid-horse-51.html
    ├── satyamchaudharydev_clever-earwig-74.html
    ├── satyamchaudharydev_fresh-frog-39.html
    ├── satyamchaudharydev_horrible-snake-35.html
    ├── satyamchaudharydev_popular-snake-36.html
    ├── satyamchaudharydev_red-cow-21.html
    ├── satyamchaudharydev_silent-owl-69.html
    ├── satyamchaudharydev_spicy-warthog-11.html
    ├── satyamchaudharydev_splendid-husky-54.html
    ├── satyamchaudharydev_strange-turkey-17.html
    ├── satyamchaudharydev_tough-baboon-84.html
    ├── satyamchaudharydev_ugly-bulldog-75.html
    ├── satyamchaudharydev_yellow-dragon-0.html
    ├── satyamchaudharydev_young-puma-4.html
    ├── seyed-mohsen-mousavi_tough-termite-47.html
    ├── shadowfax29_silly-octopus-9.html
    ├── shadowfax29_slippery-bullfrog-20.html
    ├── shadowfax29_stupid-lionfish-35.html
    ├── shadowmurphy_big-lionfish-7.html
    ├── shadowmurphy_ordinary-snake-31.html
    ├── shadowmurphy_wicked-fish-61.html
    ├── shadowmurphy_yellow-lizard-30.html
    ├── sonex-ICB_hungry-cougar-91.html
    ├── terenceodonoghue_friendly-pug-5.html
    ├── terenceodonoghue_rare-cow-16.html
    ├── themrsami_heavy-puma-9.html
    ├── themrsami_weak-kangaroo-79.html
    ├── tilakjain123_shy-yak-36.html
    ├── timlmit_average-fish-52.html
    ├── timlmit_stupid-mouse-79.html
    ├── usmonovdev_thin-snake-96.html
    ├── vikas7754_sour-goose-62.html
    ├── vikramsinghnegi_curly-mole-58.html
    ├── vikramsinghnegi_dangerous-fireant-25.html
    ├── vikramsinghnegi_fast-parrot-71.html
    ├── vikramsinghnegi_little-sheep-43.html
    ├── vikramsinghnegi_moody-mole-33.html
    ├── vikramsinghnegi_serious-owl-38.html
    ├── vikramsinghnegi_smooth-fox-31.html
    ├── vikramsinghnegi_smooth-lionfish-6.html
    ├── vikramsinghnegi_soft-moth-67.html
    ├── vikramsinghnegi_swift-penguin-59.html
    ├── vikramsinghnegi_witty-skunk-89.html
    ├── vinodjangid07_good-cow-5.html
    ├── vinodjangid07_heavy-cheetah-84.html
    ├── vinodjangid07_odd-cow-41.html
    ├── vinodjangid07_polite-rat-20.html
    ├── vinodjangid07_popular-owl-27.html
    ├── vinodjangid07_sweet-jellyfish-62.html
    ├── vinodjangid07_tall-termite-75.html
    ├── vishnu1100_brave-dog-13.html
    ├── vishnu1100_ordinary-cow-49.html
    ├── vishnu1100_popular-dingo-38.html
    ├── vk-uiux_grumpy-dolphin-30.html
    ├── vk-uiux_light-vampirebat-28.html
    ├── vk-uiux_neat-goat-26.html
    ├── wztd_old-bullfrog-32.html
    ├── xXJollyHAKERXx_lucky-falcon-75.html
    ├── xopc333_wise-fish-34.html
    ├── youngjid_gentle-dragonfly-99.html
    ├── youranonone10_tough-moth-23.html
    ├── youranonone10_young-otter-44.html
    ├── zanina-yassine_short-seahorse-54.html
    ├── zanina-yassine_tame-wolverine-39.html
    ├── zanina-yassine_weak-bobcat-68.html
    ├── zebra76966_quiet-rat-63.html
    ├── zombie223_foolish-insect-45.html
    └── zombie223_stale-badger-47.html

================================================
FILE CONTENTS
================================================

================================================
FILE: Buttons/0x-Sarthak_hungry-penguin-30.html
================================================
<button class="cta">
  <span>Contact Us &nbsp;</span>
  <svg viewBox="0 0 13 10" height="10px" width="15px">
    <path d="M1,5 L11,5"></path>
    <polyline points="8 1 12 5 8 9"></polyline>
  </svg>
</button>

<style>
/* From Uiverse.io by 0x-Sarthak  - Tags: button, hover, rounded, animated, hover button */
.cta {
  position: relative;
  margin: auto;
  padding: 11.5px 18px;
  transition: all 0.2s ease;
  border: 3px solid #552da8;
  border-radius: 50px;
  background: #552da8;
  cursor: pointer;
}

.cta:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  border-radius: 50px;
  background: white;
  width: 45px;
  height: 45px;
  transition: all 0.8s ease;
}

.cta span {
  position: relative;
  font-family: Montserrat;
  font-size: 18px;
  color: white;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.cta svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: white;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.5s ease;
}

.cta:hover:before {
  width: 100%;
  background: #1c1c1c;
}

.cta:hover svg {
  transform: translateX(0);
  transition: all 2s ease;
}

.cta:active {
  transform: scale(0.95);
  transition: all 2s ease;
}

</style>
    

================================================
FILE: Buttons/0x3ther_afraid-eagle-38.html
================================================
<!-- From Uiverse.io by 0x3ther  - Tags: simple, button, social media, hover button, tailwind, tailwindcss -->
<div class="flex items-center justify-center h-full">
  <button
    class="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
    type="button"
  >
    Facebook
  </button>
  <button
    class="text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
    type="button"
  >
    YouTube
  </button>
  <button
    class="text-white bg-gradient-to-r from-blue-400 via-blue-500 to-blue-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-400/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
    type="button"
  >
    Twitter
  </button>
  <button
    class="text-white bg-gradient-to-r from-pink-500 via-pink-600 to-pink-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800 shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
    type="button"
  >
    Instagram
  </button>
</div>


    

================================================
FILE: Buttons/0x3ther_heavy-dragon-56.html
================================================
<!-- From Uiverse.io by 0x3ther  - Tags: icon, animation, button, navigation, hover effect, tailwindbutton, tailwindcss -->
<div class="flex items-center gap-2">
  <button
    class="relative inline-flex items-center justify-center gap-2 text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white hover:bg-[#F5F5F5] h-9 rounded-md px-3 group"
  >
    <svg
      class="lucide lucide-arrow-left"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="currentColor"
      fill="none"
      viewBox="0 0 24 24"
      height="22"
      width="22"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="m12 19-7-7 7-7"></path>
      <path d="M19 12H5"></path>
    </svg>
    <span class="origin-left scale-0 transition-transform group-hover:scale-100"
      >Back</span
    >
  </button>
  <button
    class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#06B6D4] h-9 rounded-md px-3"
  >
    <svg
      class="lucide lucide-rocket text-cyan-500 dark:text-cyan-400"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#06B6D4"
      fill="none"
      viewBox="0 0 24 24"
      height="22"
      width="22"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
      ></path>
      <path
        d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
      ></path>
      <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
      <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
    </svg>
    Dashboard
  </button>
  <button
    class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#60A5FA] h-9 rounded-md px-3"
  >
    <svg
      class="lucide lucide-newspaper text-blue-400 dark:text-blue-600"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#60A5FA"
      fill="none"
      viewBox="0 0 24 24"
      height="22"
      width="22"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"
      ></path>
      <path d="M18 14h-8"></path>
      <path d="M15 18h-5"></path>
      <path d="M10 6h8v4h-8V6Z"></path>
    </svg>
    Articles
  </button>
  <button
    class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#FACC14] h-9 rounded-md px-3"
  >
    <svg
      class="lucide lucide-sticky-note text-yellow-400 dark:text-yellow-600"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#FACC14"
      fill="none"
      viewBox="0 0 24 24"
      height="22"
      width="22"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z"
      ></path>
      <path d="M15 3v6h6"></path>
    </svg>
    Notes
  </button>
  <button
    class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#FB923C] h-9 rounded-md px-3"
  >
    <svg
      class="lucide lucide-star text-orange-400 dark:text-orange-600"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#FB923C"
      fill="#FB923C"
      viewBox="0 0 24 24"
      height="22"
      width="22"
      xmlns="http://www.w3.org/2000/svg"
    >
      <polygon
        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
      ></polygon>
    </svg>
    Reviews
  </button>
</div>


    

================================================
FILE: Buttons/0xnihilism_fast-cat-82.html
================================================
<a class="brutalist-button" href="/">
  <div class="ms-logo">
    <div class="ms-logo-square"></div>
    <div class="ms-logo-square"></div>
    <div class="ms-logo-square"></div>
    <div class="ms-logo-square"></div>
  </div>
  <div class="button-text">
    <span>Get it from</span>
    <span>Microsoft</span>
  </div>
</a>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: button, microsoft, animated, brutalism, brutalist, glare effect */
.brutalist-button {
  display: flex;
  align-items: center;
  width: 169px;
  height: 60px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-weight: bold;
  border: 3px solid #fff;
  outline: 3px solid #000;
  box-shadow: 6px 6px 0 #00a4ef;
  transition: all 0.1s ease-out;
  padding: 0 15px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.brutalist-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  z-index: 1;
  transition: none;
  /* Initially hide the pseudo-element */
  opacity: 0;
}

@keyframes slide {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.brutalist-button:hover::before {
  /* Show the pseudo-element on hover */
  opacity: 1;
  animation: slide 2s infinite;
}

.brutalist-button:hover {
  transform: translate(-4px, -4px);
  box-shadow: 10px 10px 0 #000;
  background-color: #000;
  color: #fff;
}

@keyframes slide {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.brutalist-button:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0 #00a4ef;
  background-color: #fff;
  color: #000;
  border-color: #000;
}

/* Rest of the CSS remains the same */

.ms-logo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  flex-shrink: 0;
  transition: transform 0.2s ease-out;
  position: relative;
  z-index: 1;
}

.brutalist-button:hover .ms-logo {
  transform: rotate(-10deg) scale(1.1);
}

.brutalist-button:active .ms-logo {
  transform: rotate(10deg) scale(0.9);
}

.ms-logo-square {
  width: 100%;
  height: 100%;
}

.ms-logo-square:nth-child(1) {
  background-color: #f25022;
}
.ms-logo-square:nth-child(2) {
  background-color: #7fba00;
}
.ms-logo-square:nth-child(3) {
  background-color: #00a4ef;
}
.ms-logo-square:nth-child(4) {
  background-color: #ffb900;
}

.button-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  transition: transform 0.2s ease-out;
  position: relative;
  z-index: 1;
}

.brutalist-button:hover .button-text {
  transform: skew(-5deg);
}

.brutalist-button:active .button-text {
  transform: skew(5deg);
}

.button-text span:first-child {
  font-size: 11px;
  text-transform: uppercase;
}

.button-text span:last-child {
  font-size: 16px;
  text-transform: uppercase;
}

</style>
    

================================================
FILE: Buttons/0xnihilism_helpless-rattlesnake-54.html
================================================
<a href="/" class="brutalist-button">
  <div class="content-wrapper">
    <div class="claude-logo">
      <span class="starburst">✷</span>
    </div>
    <div class="button-text">
      <span>Powered By</span>
      <span>Claude 3.5</span>
    </div>
  </div>
</a>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: button, microsoft, animated, brutalism, brutalist, glare effect */
.brutalist-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e3d19c;
  border: 3px solid #000000;
  border-radius: 8px;
  padding: 20px;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  position: relative;
  box-shadow: 4px 4px 0px #000000;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: 166px;
  height: 150px;
}

.brutalist-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000000;
}

.brutalist-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #000000;
}

.content-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: 0.8s;
}

.claude-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #eb6c22;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    margin-bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: 0.8s;
  transform: rotate(0deg) scale(1);
}

.starburst {
  font-size: 48px;
  color: #ffffff;
  line-height: 1;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: 0.8s;
}

.button-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: 0.8s;
}

.button-text span:first-child {
  font-size: 14px;
  font-weight: normal;
}

.button-text span:last-child {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brutalist-button:hover .content-wrapper {
  transform: translateY(-10px);
}

@keyframes slow-spin {
  from {
    transform: rotate(0deg) scale(0.8);
  }
  to {
    transform: rotate(360deg) scale(0.8);
  }
}

.brutalist-button:hover .claude-logo {
  animation: slow-spin 12s linear infinite;
  margin-bottom: 5px;
}

.brutalist-button:not(:hover) .claude-logo {
  transform: rotate(0deg) scale(1);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    margin-bottom 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-bottom: 0;
}

.brutalist-button:hover .starburst {
  font-size: 38px;
}

.brutalist-button:hover .button-text {
  opacity: 1;
  max-height: 50px;
  margin-top: 2px;
}

.brutalist-button:not(:hover) .content-wrapper,
.brutalist-button:not(:hover) .starburst,
.brutalist-button:not(:hover) .button-text {
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: 0s;
}

.brutalist-button::before,
.brutalist-button::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  background-color: rgba(200, 183, 128, 0.7);
  border-radius: 50%;
  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
  z-index: 1;
}

.brutalist-button::before {
  left: -20px;
  transform: translate(-50%, -50%);
}

.brutalist-button::after {
  right: -20px;
  transform: translate(50%, -50%);
}

.brutalist-button:hover::before {
  animation: criss-cross-left 0.8s both;
  animation-direction: alternate;
  opacity: 1;
}

.brutalist-button:hover::after {
  animation: criss-cross-right 0.8s both;
  animation-direction: alternate;
  opacity: 1;
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}

@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}

.brutalist-button:hover .button-text {
  color: #ffffff;
}

.brutalist-button:hover .button-text span:last-child {
  color: #4e432d;
}

</style>
    

================================================
FILE: Buttons/0xnihilism_pretty-fireant-33.html
================================================
<div class="button-container">
  <a href="/" class="brutalist-button openai button-1">
    <div class="openai-logo">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        class="openai-icon"
      >
        <path
          fill="#10A37F"
          d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.8956zm16.0993 3.8558L12.5907 8.3829 14.6108 7.2144a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.3927-.6813zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"
        ></path>
      </svg>
    </div>
    <div class="button-text">
      <span>Powered By</span>
      <span>GPT-Omni</span>
    </div>
  </a>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: button, button hover effect , brutalism, minimalism, openai */
.button-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* Common styles for both buttons */
.brutalist-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 142px;
  height: 142px;
  color: #e5dede;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Styles for the first button */
.button-1 {
  background-color: #063525;
  border: 3px solid #42c498;
  border-radius: 12px;
  box-shadow: 4px 4px 1px #000000;
}

.button-1:hover {
  background-color: #1a5c46;
  border-color: #030504;
  transform: translate(-6px, -6px) rotate(1deg);
  box-shadow: 10px 10px 0 #000000, 15px 15px 20px rgba(64, 164, 122, 0.2);
}

.button-1::before,
.button-1::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: 0.6s;
}

.button-1::before {
  left: -100%;
}
.button-1::after {
  left: 100%;
}

.button-1:hover::before {
  animation: swipeRight 1.5s infinite;
}
.button-1:hover::after {
  animation: swipeLeft 1.5s infinite;
}

@keyframes swipeRight {
  100% {
    transform: translateX(200%) skew(-45deg);
  }
}

@keyframes swipeLeft {
  100% {
    transform: translateX(-200%) skew(-45deg);
  }
}

/* Hover effects */
.brutalist-button:hover .openai-logo {
  transform: translateY(-10px);
}

.brutalist-button:hover .openai-icon {
  width: 40px;
  height: 40px;
}

.bruta.brutalist-button:hover .openai-text {
  opacity: 1;
  max-height: 60px;
  margin-top: 8px;
}

/* Styles for the OpenAI logo and text */
.openai-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 3;
}

.openai-icon {
  width: 64px;
  height: 64px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.openai-text {
  font-size: 24px;
  letter-spacing: 0.5px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.button-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 3;
}

.button-text span:first-child {
  font-size: 12px;
  font-weight: normal;
}

.button-text span:last-child {
  font-size: 16px;
}

/* Hover effects */
.brutalist-button:hover .openai-logo {
  transform: translateY(-10px);
}

.brutalist-button:hover .openai-icon {
  width: 40px;
  height: 40px;
}

.brutalist-button:hover .button-text,
.brutalist-button:hover .openai-text {
  opacity: 1;
  max-height: 60px;
  margin-top: 8px;
}

/* Animation for the OpenAI logo */
@keyframes spin-and-zoom {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.brutalist-button:hover .openai-icon {
  animation: spin-and-zoom 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

.brutalist-button:hover .openai-text {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.brutalist-button:active .openai-icon,
.brutalist-button:active .openai-text,
.brutalist-button:active .button-text {
  transform: scale(0.95);
}

</style>
    

================================================
FILE: Buttons/0xnihilism_quiet-dog-6.html
================================================
<div class="button-container">
  <a href="/" class="brutalist-button openai">
    <div class="openai-logo">
      <svg
        class="openai-icon"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.8956zm16.0993 3.8558L12.5907 8.3829 14.6108 7.2144a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.3927-.6813zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"
          fill="#10A37F"
        ></path>
      </svg>
    </div>
    <div class="button-text">
      <span>Powered By</span>
      <span>GPT-Omni</span>
    </div>
  </a>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: button, button hover effect , brutalism, template, minimalism, openai */
.button-container {
  display: flex;
  justify-content: center;
  gap: 20px; /* Adjust this value to increase or decrease space between buttons */
  padding: 20px;
}

.brutalist-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid #000000;
  border-radius: 12px;
  padding: 0;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  position: relative;
  box-shadow: 4px 4px 0px #000000;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: 130px;
  width: 130px;
  cursor: pointer;
}

.brutalist-button.openai {
  background-color: #356854;
}

.brutalist-button::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -150%;
  width: 300%;
  height: 300%;
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 1;
}

.brutalist-button.openai::before {
  background-color: #316b58;
}

.brutalist-button.claude::before {
  background-color: #e3d19c;
}

.brutalist-button:hover::before {
  transform: translateX(-50%) scale(1);
}

.brutalist-button:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0px #000000;
}

.brutalist-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #000000;
}

.openai-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.openai-logo {
  align-items: center;
  justify-content: center;
  background-color: #0f1715; /* OpenAI's green color */
  border-radius: 50%; /* This creates the circular background */
}

.openai-icon {
  width: 54px;
  height: 54px;
  fill: #ffffff; /* White color for the SVG */
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.brutalist-button:hover .openai-logo {
  animation: spin 5s linear infinite;
  width: 50px;
  height: 50px;
  top: 28%;
}

.brutalist-button:hover .openai-icon {
  transform: scale(0.6);
}

.button-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  z-index: 2;
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
}

.button-text span:first-child {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
}

.button-text span:last-child {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #ffffff;
}

.brutalist-button:hover .button-text {
  opacity: 1;
  transform: translateY(0);
}

.brutalist-button.openai:hover .button-text {
  color: #d3d3d3;
}

.brutalist-button.openai:hover .button-text span:last-child {
  color: #d6cbbf;
}

@media (hover: hover) and (pointer: fine) {
  .brutalist-button:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0px #000000;
  }
}

</style>
    

================================================
FILE: Buttons/1osm_black-chicken-65.html
================================================
<button class="Btn">Click Me</button>
<style>
/* From Uiverse.io by 1osm - Tags: button */
/* Button 1 */
.Btn {
  width: 150px;
  height: 50px;
  background-color: transparent;
  color: white;
  font-weight: bold;
  border-width: 2px;
  border-color: #FF5858;
  border-radius: 20px;
  transition: all 0.3s;
}

.Btn:hover {
  transform: translateY(-10px);
  background-color: #FF5858;
}

.Btn::after {
  transform: translateY(0);
}
</style>


================================================
FILE: Buttons/1osm_rude-panda-79.html
================================================
<button>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M5 13c0-5.088 2.903-9.436 7-11.182C16.097 3.564 19 7.912 19 13c0 .823-.076 1.626-.22 2.403l1.94 1.832a.5.5 0 0 1 .095.603l-2.495 4.575a.5.5 0 0 1-.793.114l-2.234-2.234a1 1 0 0 0-.707-.293H9.414a1 1 0 0 0-.707.293l-2.234 2.234a.5.5 0 0 1-.793-.114l-2.495-4.575a.5.5 0 0 1 .095-.603l1.94-1.832C5.077 14.626 5 13.823 5 13zm1.476 6.696l.817-.817A3 3 0 0 1 9.414 18h5.172a3 3 0 0 1 2.121.879l.817.817.982-1.8-1.1-1.04a2 2 0 0 1-.593-1.82c.124-.664.187-1.345.187-2.036 0-3.87-1.995-7.3-5-8.96C8.995 5.7 7 9.13 7 13c0 .691.063 1.372.187 2.037a2 2 0 0 1-.593 1.82l-1.1 1.039.982 1.8zM12 13a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>
  <p class="Click">Click</p>
  <p class="OnHover">Thanks</p>

</button>

<style>
/* From Uiverse.io by 1osm - Tags: button */
button {
  width: 130px;
  height: 45px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-width: 10px;
  background: linear-gradient(to right, #5f6d7c, #456b8b, #49a6fc);
  border: none;
  letter-spacing: 0.05em;
  border-radius: 10px;
}

button svg {
  height: 40px;
  width: 60px;
  transform: translate(-30px,3px) rotate(90deg);
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1)
}

button .Click {
  transform: translate(20px,-33px);
  font-size: 20px;
  transition: 0.3s cubic-bezier(0.76, 0, 0.24, 1)
}

button .OnHover {
  transform: translate(-15px,-56px);
  font-size: 20px;
  opacity: 0%;
  transition: 0.3s cubic-bezier(0.76, 0, 0.24, 1)
}

button:hover svg {
  transform: translate(40px,3px) rotate(90deg);
}

button:hover .Click {
  opacity: 0%;
}

button:hover .OnHover {
  opacity: 100%;
}
</style>


================================================
FILE: Buttons/212004ALJI_fat-eagle-24.html
================================================
<button>
  GLITCH
</button>
<style>
/* From Uiverse.io by 212004ALJI - Tags: button, glitch */
button,button::after {
  padding: 10px 50px;
  font-size: 20px;
  border: none;
  border-radius: 5px;
  color: white;
  background-color: transparent;
  position: relative;
}

button::after {
  --move1: inset(50% 50% 50% 50%);
  --move2: inset(31% 0 40% 0);
  --move3: inset(39% 0 15% 0);
  --move4: inset(45% 0 40% 0);
  --move5: inset(45% 0 6% 0);
  --move6: inset(14% 0 61% 0);
  clip-path: var(--move1);
  content: 'GLITCH';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
}

button:hover::after {
  animation: glitch_4011 1s;
  text-shadow: 10 10px 10px black;
  animation-timing-function: steps(2, end);
  text-shadow: -3px -3px 0px #1df2f0, 3px 3px 0px #E94BE8;
  background-color: transparent;
  border: 3px solid rgb(0, 255, 213);
}

button:hover {
  text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8;
}

button:hover {
  background-color: transparent;
  border: 1px solid rgb(0, 255, 213);
  box-shadow: 0px 10px 10px -10px rgb(0, 255, 213);
}

@keyframes glitch_4011 {
  0% {
    clip-path: var(--move1);
    transform: translate(0px,-10px);
  }

  10% {
    clip-path: var(--move2);
    transform: translate(-10px,10px);
  }

  20% {
    clip-path: var(--move3);
    transform: translate(10px,0px);
  }

  30% {
    clip-path: var(--move4);
    transform: translate(-10px,10px);
  }

  40% {
    clip-path: var(--move5);
    transform: translate(10px,-10px);
  }

  50% {
    clip-path: var(--move6);
    transform: translate(-10px,10px);
  }

  60% {
    clip-path: var(--move1);
    transform: translate(10px,-10px);
  }

  70% {
    clip-path: var(--move3);
    transform: translate(-10px,10px);
  }

  80% {
    clip-path: var(--move2);
    transform: translate(10px,-10px);
  }

  90% {
    clip-path: var(--move4);
    transform: translate(-10px,10px);
  }

  100% {
    clip-path: var(--move1);
    transform: translate(0);
  }
}


</style>


================================================
FILE: Buttons/212004ALJI_sour-bullfrog-96.html
================================================
<button>
  INPUT
</button>
<style>
/* From Uiverse.io by 212004ALJI - Tags: button */
button {
  /* padding: 5px 10px; */
  height: 50px;
  width: 100px;
  font-size: 20px;
  position: relative;
  border: navajowhite;
  background-color: #222;
  color: aliceblue;
  z-index: 1;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 2px 2px 2px red;
}

button::before {
  content: '';
  height: 10px;
  width: 30px;
  position: absolute;
  background-image: linear-gradient(45deg, salmon,red);
  left: -10px;
  top: 0;
  z-index: -1;
  transition: 0.3s ease-in-out;
  border-radius: 5px;
}

button:hover::before {
  height: 100px;
  width: 100px;
}

button:hover {
  border-radius: 5px;
}

</style>


================================================
FILE: Buttons/212004ALJI_strange-bat-74.html
================================================
<button>
  <p class="icon_shadow">HAYABUSA
<svg fill-rule="nonzero" height="40px" width="40px" viewBox="0,0,256,256" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g style="mix-blend-mode: normal" text-anchor="none" font-size="none" font-weight="none" font-family="none" stroke-dashoffset="0" stroke-dasharray="" stroke-miterlimit="10" stroke-linejoin="miter" stroke-linecap="butt" stroke-width="1" stroke="none" fill-rule="nonzero" fill="#ff206e"><g transform="scale(5.12,5.12)"><path d="M9.00586,0c-0.26622,-0.00153 -0.52207,0.10314 -0.71087,0.29084c-0.1888,0.1877 -0.29497,0.44293 -0.29499,0.70916c0,0 -0.00031,2.83655 0.64063,6.42578c0.61624,3.45096 1.81717,7.63635 4.30078,10.82617c-0.03223,0.09658 -0.07,0.1913 -0.09375,0.29102c-0.51237,2.15694 -2.24793,7.75515 -3.67969,9.90234c-0.1714,0.25672 -0.21465,0.5782 -0.11719,0.87109c0.45954,1.38222 1.56103,3.62778 3.01758,6.31836c-0.01566,0.04013 -0.0287,0.08123 -0.03906,0.12305c-0.86684,3.46737 -4.47656,5.34766 -4.47656,5.34766c-0.38199,0.19127 -0.60031,0.60406 -0.54342,1.02745c0.05689,0.42339 0.37644,0.7639 0.79537,0.84755c0,0 4.31619,0.94287 7.71289,-1.3125c0.91656,1.52521 1.87104,3.06527 2.83594,4.55469c0.65113,1.06549 1.71842,1.81101 2.94141,2.05664c0.00065,0 0.0013,0 0.00195,0l3.50781,0.70117c0.12894,0.02568 0.26168,0.02568 0.39062,0l3.50781,-0.70117c1.22163,-0.24407 2.28615,-0.98944 2.9375,-2.05078c0.98284,-1.49004 1.95099,-3.02074 2.87695,-4.53516c3.39115,2.22499 7.67773,1.28711 7.67773,1.28711c0.41893,-0.08365 0.73848,-0.42416 0.79537,-0.84755c0.05689,-0.42339 -0.16143,-0.83618 -0.54342,-1.02745c0,0 -3.60972,-1.88028 -4.47656,-5.34766c-0.00187,-0.00718 -0.00383,-0.01434 -0.00586,-0.02148c1.46264,-2.68934 2.55988,-4.95683 2.99609,-6.45703c0.08216,-0.2834 0.03499,-0.58862 -0.12891,-0.83398c-1.43176,-2.1472 -3.1673,-7.74433 -3.67969,-9.90039c-0.0239,-0.10033 -0.06127,-0.19575 -0.09375,-0.29297c2.48361,-3.18982 3.68454,-7.37521 4.30078,-10.82617c0.64093,-3.58924 0.64063,-6.42578 0.64063,-6.42578c0.00009,-0.27036 -0.10929,-0.52924 -0.3032,-0.71764c-0.19392,-0.1884 -0.45584,-0.29025 -0.72609,-0.28236c-0.36819,0.01085 -0.70062,0.22321 -0.86523,0.55273c0,0 -1.22717,2.45223 -3.06836,5.27539c-1.83801,2.81828 -4.33608,5.97912 -6.53906,7.30664c-0.01664,-0.01026 -0.03357,-0.02003 -0.05078,-0.0293l-4,-2c-0.23724,-0.11863 -0.5119,-0.13815 -0.76353,-0.05427c-0.25164,0.08388 -0.45965,0.26429 -0.57826,0.50153l-0.10547,0.21094l-0.10547,-0.21094c-0.16817,-0.33628 -0.51075,-0.54982 -0.88672,-0.55273c-0.15789,-0.00126 -0.31384,0.03488 -0.45508,0.10547l-4,2c-0.01721,0.00927 -0.03414,0.01904 -0.05078,0.0293c-2.20298,-1.32752 -4.70105,-4.48836 -6.53906,-7.30664c-1.84119,-2.82316 -3.06836,-5.27539 -3.06836,-5.27539c-0.16849,-0.3369 -0.51199,-0.55055 -0.88867,-0.55273zM10.44922,5.48047c0.40281,0.67844 0.33529,0.67075 0.83789,1.44141c1.72202,2.64044 3.92494,5.59777 6.39063,7.38477l-3.50195,2.25781c-1.92627,-2.72329 -3.0125,-6.38833 -3.56641,-9.49023c-0.15981,-0.89493 -0.07317,-0.83633 -0.16016,-1.59375zM39.55078,5.48047c-0.08698,0.75742 -0.00035,0.69882 -0.16016,1.59375c-0.55406,3.10275 -1.64109,6.76867 -3.56836,9.49219l-3.50195,-2.25781c2.46659,-1.78682 4.67004,-4.74549 6.39258,-7.38672c0.5026,-0.77065 0.43508,-0.76296 0.83789,-1.44141zM27.05469,13.64453l2.44922,1.22461l5.24023,3.37891c0.22849,0.20156 0.3928,0.46551 0.46289,0.75977c0.5267,2.2163 1.97899,7.09786 3.70508,9.98047c-0.41087,1.29136 -1.51905,3.66685 -3.10156,6.52734c-0.11737,0.21216 -0.25142,0.44161 -0.37305,0.6582c-0.01256,0.00818 -0.02493,0.01665 -0.03711,0.02539l-2.72266,2.04297c-0.65602,0.49221 -1.4544,0.75781 -2.27539,0.75781h-0.2832c-0.95071,0 -1.87171,0.40914 -2.49414,1.1543c-0.67926,0.81273 -1.96214,1.8457 -2.625,1.8457c-0.66286,0 -1.94574,-1.03297 -2.625,-1.8457c-0.00065,-0.00065 -0.0013,-0.0013 -0.00195,-0.00195c-0.623,-0.7441 -1.54204,-1.15234 -2.49219,-1.15234h-0.2832c-0.82099,0 -1.61937,-0.2656 -2.27539,-0.75781l-2.5957,-1.94727c-0.15289,-0.27378 -0.33972,-0.58094 -0.48633,-0.84766c-1.57979,-2.87411 -2.7014,-5.22715 -3.14648,-6.46875c1.72375,-2.88394 3.17302,-7.75751 3.69922,-9.97266c0.07009,-0.29424 0.23442,-0.55626 0.46289,-0.75781l5.24024,-3.37891l2.41211,-1.20508c-0.17792,0.99687 -0.619,1.95257 -1.23828,2.91016c-1.033,1.622 -2.63797,3.33278 -2.66797,5.42578c-0.054,1.329 0.94872,2.75319 1.76172,3.49219c1.081,0.994 1.65347,2.07444 1.85547,3.52344c0.056,0.429 0.72267,0.41637 0.76367,-0.01562c0.268,-1.571 -0.38119,-3.37231 -1.36719,-4.57031c-2.357,-2.458 -0.04634,-4.32659 1.47266,-6.68359c0.5319,-0.8034 1.01497,-1.75086 1.28711,-2.77344c0.1517,0.03525 0.30954,0.03458 0.46094,-0.00195c0.35062,1.17299 0.9477,2.34876 1.27344,2.77734c1.519,2.357 3.82966,4.22459 1.47266,6.68359c-0.986,1.198 -1.63519,2.99736 -1.36719,4.56836c0.037,0.431 0.70567,0.44562 0.76367,0.01563c0.203,-1.448 0.77447,-2.52944 1.85547,-3.52344c0.489,-0.522 1.13328,-1.14213 1.48828,-2.07813c1.36175,-3.76223 -3.13108,-6.34958 -3.66797,-9.76953zM14.02148,24.43555c-0.28236,-0.0058 -0.554,0.10805 -0.74785,0.31343c-0.19385,0.20538 -0.29182,0.48315 -0.26973,0.7647c0,0 0.10863,1.46594 0.60156,3.09375c0.49293,1.62781 1.34722,3.59721 3.26758,4.32813c0.99298,0.37769 2.03753,0.34296 2.87305,0.26758c0.83552,-0.07538 1.48438,-0.23047 1.48438,-0.23047c0.26102,-0.06188 0.48624,-0.22602 0.62507,-0.45557c0.13883,-0.22954 0.17962,-0.50523 0.11321,-0.76514c0,0 -0.67774,-2.64234 -3.34375,-3.95703c-1.86724,-0.92051 -3.89258,-3.03906 -3.89258,-3.03906c-0.18388,-0.19856 -0.44038,-0.31413 -0.71094,-0.32031zM35.94727,24.4375c-0.2593,0.01386 -0.50305,0.12802 -0.67969,0.31836c0,0 -2.02534,2.11855 -3.89258,3.03906c-2.66601,1.3147 -3.34375,3.95703 -3.34375,3.95703c-0.06641,0.25991 -0.02562,0.5356 0.11321,0.76514c0.13883,0.22954 0.36405,0.39369 0.62507,0.45557c0,0 0.64886,0.15509 1.48438,0.23047c0.83552,0.07538 1.88006,0.11011 2.87305,-0.26758c1.92036,-0.73091 2.77464,-2.70031 3.26758,-4.32812c0.49293,-1.62781 0.60156,-3.09375 0.60156,-3.09375c0.02227,-0.28685 -0.08007,-0.56939 -0.28088,-0.77543c-0.20081,-0.20604 -0.48062,-0.31562 -0.76795,-0.30074zM15.53125,28.05469c0.68725,0.54202 1.36291,1.11611 2.20898,1.5332c0.89522,0.44146 1.43599,1.07873 1.78125,1.61914c-0.67935,0.05639 -1.49476,0.02582 -1.9375,-0.14258c-0.87935,-0.33469 -1.63087,-1.63351 -2.05273,-3.00977zM34.46875,28.05469c-0.42186,1.37626 -1.17338,2.67507 -2.05273,3.00977c-0.44274,0.1684 -1.25815,0.19897 -1.9375,0.14258c0.34526,-0.54041 0.88603,-1.17768 1.78125,-1.61914c0.84608,-0.4171 1.52174,-0.99118 2.20898,-1.5332zM27.99219,33.98633c-0.40904,-0.00235 -0.77828,0.24463 -0.93227,0.62358c-0.15399,0.37895 -0.06169,0.81348 0.23305,1.09712c0.29454,0.29454 0.30273,0.48463 0.31836,0.52344c-0.04939,0.01724 -0.07535,0.04102 -0.25391,0.04102c-0.20398,0.00033 -0.40298,0.06303 -0.57031,0.17969l-1.26953,0.88086c-0.325,0.22538 -0.71016,0.22538 -1.03516,0l-1.26953,-0.88086c-0.16733,-0.11666 -0.36633,-0.17935 -0.57031,-0.17969c-0.17855,0 -0.20452,-0.02378 -0.25391,-0.04102c0.01563,-0.03881 0.02382,-0.2289 0.31836,-0.52344c0.29576,-0.28749 0.38469,-0.72707 0.22393,-1.10691c-0.16075,-0.37985 -0.53821,-0.62204 -0.9505,-0.60988c-0.2598,0.00774 -0.50638,0.11632 -0.6875,0.30273c-0.65827,0.65827 -1.10429,1.48152 -0.91602,2.41602c0.09414,0.46725 0.40294,0.92546 0.82422,1.19336c0.27576,0.17536 0.61685,0.19088 0.94336,0.24219l1.19727,0.83008c0.993,0.68862 2.3234,0.68862 3.31641,0l1.19727,-0.83008c0.32651,-0.05131 0.6676,-0.06683 0.94336,-0.24219c0.42128,-0.2679 0.73008,-0.72611 0.82422,-1.19336c0.18827,-0.93449 -0.25774,-1.75774 -0.91602,-2.41602c-0.18714,-0.19448 -0.44495,-0.30507 -0.71484,-0.30664zM13.35352,37.92188c0.37242,0.65914 0.75112,1.32264 1.15039,2.00586c-1.10139,0.73582 -2.40406,1.03593 -3.54492,1.14258c0.85618,-0.7877 1.75413,-1.82683 2.39453,-3.14844zM36.69336,38.01172c0.63728,1.27795 1.51135,2.28918 2.34766,3.05859c-1.12109,-0.1048 -2.39911,-0.39549 -3.48828,-1.10352c0.39398,-0.66374 0.77367,-1.31354 1.14063,-1.95508zM17.21094,40.41211c0.75295,0.34535 1.54863,0.58789 2.38672,0.58789h0.2832c0.37786,0 0.72803,0.16165 0.95898,0.4375c0.4435,0.53063 1.0736,1.23111 1.86523,1.77344c-0.67877,0.0717 -1.43942,0.09054 -2.00781,0.18359c-0.9398,0.15372 -1.86873,-0.28465 -2.36328,-1.10937zM32.63867,40.49219l-1.19336,1.90625c-0.52279,0.83632 -1.49107,1.24907 -2.45703,1.04883c-0.49569,-0.10254 -1.17427,-0.11834 -1.76172,-0.19727c0.8235,-0.54705 1.47803,-1.26937 1.93359,-1.81445c0.22957,-0.27484 0.5797,-0.43555 0.95898,-0.43555h0.2832c0.78054,0 1.52637,-0.20718 2.23633,-0.50781zM25,45c1.25356,0 2.55018,0.19239 3.58398,0.40625c0.37725,0.0782 0.75597,0.09392 1.12891,0.07227c-0.35918,0.42637 -0.84664,0.72726 -1.40039,0.83789c0,0.00065 0,0.0013 0,0.00195l-3.3125,0.66211l-3.31055,-0.66211h-0.00195c-0.58016,-0.11692 -1.08502,-0.44352 -1.44727,-0.90234c0.25811,0.0054 0.5181,-0.00611 0.7793,-0.04883c1.15191,-0.18858 2.62598,-0.36719 3.98047,-0.36719z"></path></g></g></svg></p>
</button>
<style>
/* From Uiverse.io by 212004ALJI - Tags: button */
button {
  --color2: #ff206e;
  padding: 15px 30px;
  border-radius: 18px;
  border: 1px solid #282828;
  background-color: #212121;
  box-shadow: inset 2px 2px 5px rgb(22, 22, 22);
  position: relative;
  overflow: hidden;
}

button::after {
  content: '';
  height: 30px;
  width: 60px;
  position: absolute;
  box-shadow: 0 0 20px 10px var(--color2);
  bottom: -45px;
  left: 21%;
  transition: 0.4s 0.3s;
}

button svg {
  --move2: inset(31% 0 40% 0);
  --move3: inset(39% 0 15% 0);
  --move4: inset(45% 0 40% 0);
  --move5: inset(45% 0 6% 0);
  --move6: inset(14% 0 61% 0);
  --move7: inset(0 0 0 0);
  clip-path: inset(50% 50% 50% 50%);
  margin-left: 5px;
  transition: 0.4s;
}

button:hover svg {
  clip-path: var(--move7);
  animation: glitch_4011 0.4s;
  animation-timing-function: steps(2, end);
}

button:hover:after {
  bottom: -40px;
  width: 100px;
}

button .icon_shadow {
  display: flex;
  align-items: center;
  transition: 0.4s;
  color: var(--color2);
  font-weight: bold;
  filter: drop-shadow(0 0 10px var(--color2));
}

button:hover .icon_shadow {
  filter: drop-shadow(0 0 10px var(--color2));
}

@keyframes glitch_4011 {
  0% {
    clip-path: var(--move1);
    transform: translate(0px,-10px);
  }

  10% {
    clip-path: var(--move2);
    transform: translate(-10px,10px);
  }

  20% {
    clip-path: var(--move3);
    transform: translate(10px,0px);
  }

  30% {
    clip-path: var(--move4);
    transform: translate(-10px,10px);
  }

  40% {
    clip-path: var(--move5);
    transform: translate(10px,-10px);
  }

  50% {
    clip-path: var(--move6);
    transform: translate(-10px,10px);
  }

  60% {
    clip-path: var(--move1);
    transform: translate(10px,-10px);
  }

  70% {
    clip-path: var(--move3);
    transform: translate(-10px,10px);
  }

  80% {
    clip-path: var(--move2);
    transform: translate(10px,-10px);
  }

  90% {
    clip-path: var(--move4);
    transform: translate(-10px,10px);
  }

  100% {
    transform: translate(0);
  }
}

</style>


================================================
FILE: Buttons/2Fl00rian6_empty-dolphin-52.html
================================================

<button>This is a button :)</button>
<style>
/* From Uiverse.io by 2Fl00rian6 - Tags: button */
button {
 background-color: rgb(20, 87, 244);
 border: 1px solid rgb(20, 87, 244);
 padding: 12px 20px;
 border-radius: 7px;
 transition: .3s;
 color: #fff;
}

button:hover {
 border: 1px solid rgb(20, 87, 244);
 background-color: transparent;
 color: rgb(20, 87, 244);
}

button:focus {
 box-shadow: 0px 0px 0px 5px rgba(20, 87, 244, 0.37), 0px 0px 0px 10px rgba(20, 87, 244, 0.38);
 outline: none;
}
</style>


================================================
FILE: Buttons/3bdel3ziz-T_brown-earwig-37.html
================================================
<button class="button"></button>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: button, hover, smooth, dark, code, hover button, button hover effect , 2d button */
.button,
.button::before {
  box-sizing: border-box;
  --col-orange: #d17842;
  --col-white: #fff;
  --col-dark: #212121;
  cursor: pointer;
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 600;
  fill: var(--col-white);
  color: var(--col-white);

  color: var(col-dark);
  font-family: "arial";
}
.button {
  width: 200px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  background: var(--col-orange);
  padding: 8px 50px;
  position: relative;
  transition: all 200ms;
  border-radius: 25px;
  z-index: 99;
}

.button:hover {
  border-color: transparent;
  color: var(--col-dark);
  background: transparent;
}

.button::before {
  height: fit-content;
  content: "great work🥳";
  position: absolute;
  left: 40px;
  width: 0;
  overflow: hidden;
  transition: all 550ms;
  text-wrap: nowrap;
  z-index: -1;
}

.button:hover::before {
  width: 135px;
  color: var(--col-white);
}

.button::after {
  content: "hover me";
  position: relative;
}

.button:hover::after {
  display: none;
}

</style>
    

================================================
FILE: Buttons/3bdel3ziz-T_dangerous-newt-76.html
================================================
<div class="notification">
  <div class="bell-container">
    <div class="bell"></div>
  </div>
</div>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: icon, animation, notification, button, rotate, light&dark, hover effect, hover button */
/*making bell shape with one div */
.bell {
  border: 2.17px solid white;
  border-radius: 10px 10px 0 0;
  width: 15px;
  height: 17px;
  background: transparent;
  display: block;
  position: relative;
  top: -3px;
}
.bell::before,
.bell::after {
  content: "";
  background: white;
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 2.17px;
}
.bell::before {
  top: 100%;
  width: 20px;
}
.bell::after {
  top: calc(100% + 4px);
  width: 7px;
}
/*container main styling*/
.notification {
  background: transparent;
  border: none;
  padding: 15px 15px;
  border-radius: 50px;
  cursor: pointer;
  transition: 300ms;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*notifications number with before*/
.notification::before {
  content: "1";
  color: white;
  font-size: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  right: 8px;
  top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
/*container background hover effect*/
.notification:hover {
  background: rgba(170, 170, 170, 0.062);
}
/*container animations*/
.notification:hover > .bell-container {
  animation: bell-animation 650ms ease-out 0s 1 normal both;
}
/*bell ring and scale animation*/
@keyframes bell-animation {
  20% {
    transform: rotate(15deg);
  }

  40% {
    transform: rotate(-15deg);
    scale: 1.1;
  }
  60% {
    transform: rotate(10deg);
    scale: 1.1;
  }
  80% {
    transform: rotate(-10deg);
  }
  0%,
  100% {
    transform: rotate(0deg);
  }
}

</style>
    

================================================
FILE: Buttons/A3zra_empty-lionfish-28.html
================================================

<button alt="BECOME A MEMBER">
  <i>B</i>
  <i>E</i>
  <i>C</i>
  <i>O</i>
  <i>M</i>
  <i>E</i>
  <i>&nbsp;</i>
  <i>A</i>
  <i>&nbsp;</i>
  <i>M</i>
  <i>E</i>
  <i>M</i>
  <i>B</i>
  <i>E</i>
  <i>R</i>
</button>


<style>
/* From Uiverse.io by A3zra - Tags: button, 3d cool effect, 3d hover */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  position: relative;
  padding: 0 20px;
  font-size: 18px;
  text-transform: uppercase;
  border: 0;
  background-color: #E15331;
  border-radius: 12px;
  overflow: hidden;
  transition: 31ms cubic-bezier(.5, .7, .4, 1);
  width: 300px;
}

button:before {
  content: attr(alt);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  font-size: 15px;
  font-weight: bold;
  color: white;
  letter-spacing: 4px;
  opacity: 1;
}

button:active {
  box-shadow: none;
  transform: translateY(7px);
  transition: 35ms cubic-bezier(.5, .7, .4, 1);
}

button:hover:before {
  transition: all .0s;
  transform: translateY(100%);
  opacity: 0;
  color: #E15331;
}

button i {
  color: white;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 4px;
  font-style: normal;
  transition: all 2s ease;
  transform: translateY(-20px);
  opacity: 0;
}

button:hover i {
  transition: all .2s ease;
  transform: translateY(0px);
  opacity: 1;
}

button:hover i:nth-child(1) {
  transition-delay: 0.045s;
}

button:hover i:nth-child(2) {
  transition-delay: calc(0.045s * 3);
}

button:hover i:nth-child(3) {
  transition-delay: calc(0.045s * 4);
}

button:hover i:nth-child(4) {
  transition-delay: calc(0.045s * 5);
}

button:hover i:nth-child(6) {
  transition-delay: calc(0.045s * 6);
}

button:hover i:nth-child(7) {
  transition-delay: calc(0.045s * 7);
}

button:hover i:nth-child(8) {
  transition-delay: calc(0.045s * 8);
}

button:hover i:nth-child(9) {
  transition-delay: calc(0.045s * 9);
}

button:hover i:nth-child(10) {
  transition-delay: calc(0.045s * 10);
}

</style>


================================================
FILE: Buttons/AKAspidey01_brown-quail-36.html
================================================
<!-- From Uiverse.io by AKAspidey01  - Tags: simple, animation, button, #button, tailwind, button hover effect  -->
<button
  class="relative border-2 border-black group hover:border-green-500 w-12 h-12 duration-500 overflow-hidden"
  type="button"
>
  <p
    class="font-Manrope text-3xl h-full w-full flex items-center justify-center text-black duration-500 relative z-10 group-hover:scale-0"
  >
    ×
  </p>
  <span
    class="absolute w-full h-full bg-green-500 rotate-45 group-hover:top-9 duration-500 top-12 left-0"
  ></span>
  <span
    class="absolute w-full h-full bg-green-500 rotate-45 top-0 group-hover:left-9 duration-500 left-12"
  ></span>
  <span
    class="absolute w-full h-full bg-green-500 rotate-45 top-0 group-hover:right-9 duration-500 right-12"
  ></span>
  <span
    class="absolute w-full h-full bg-green-500 rotate-45 group-hover:bottom-9 duration-500 bottom-12 right-0"
  ></span>
</button>


    

================================================
FILE: Buttons/AKAspidey01_jolly-tiger-60.html
================================================
<button class="button">
  <div class="button-inner-curve">
    <div class="icon">
      <svg
        class=""
        xml:space="preserve"
        style="enable-background:new 0 0 512 512"
        viewBox="0 0 24 24"
        y="0"
        x="0"
        height="20"
        width="20"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g>
          <g fill="#000">
            <path
              class=""
              data-original="#000000"
              opacity="1"
              fill="#000000"
              d="M14.22 21.63c-1.18 0-2.85-.83-4.17-4.8l-.72-2.16-2.16-.72c-3.96-1.32-4.79-2.99-4.79-4.17 0-1.17.83-2.85 4.79-4.18l8.49-2.83c2.12-.71 3.89-.5 4.98.58s1.3 2.86.59 4.98l-2.83 8.49c-1.33 3.98-3 4.81-4.18 4.81zM7.64 7.03c-2.78.93-3.77 2.03-3.77 2.75 0 .72.99 1.82 3.77 2.74l2.52.84c.22.07.4.25.47.47l.84 2.52c.92 2.78 2.03 3.77 2.75 3.77s1.82-.99 2.75-3.77l2.83-8.49c.51-1.54.42-2.8-.23-3.45s-1.91-.73-3.44-.22z"
            ></path>
            <path
              class=""
              data-original="#000000"
              opacity="1"
              fill="#000000"
              d="M10.11 14.4c-.19 0-.38-.07-.53-.22a.754.754 0 0 1 0-1.06l3.58-3.59c.29-.29.77-.29 1.06 0s.29.77 0 1.06l-3.58 3.59c-.14.15-.34.22-.53.22z"
            ></path>
          </g>
        </g>
      </svg>
    </div>
    <p>Send Message</p>
  </div>
</button>

<style>
/* From Uiverse.io by AKAspidey01  - Tags: neumorphism, flashy, button */
.button {
  cursor: pointer;
  background: linear-gradient(145deg, #f0f0f0, #cacaca);
  box-shadow: 5px 5px 21px #bababa, -5px -5px 21px #ffffff;
  padding: 5px 5px;
  border-radius: 12px;
  border: 1px solid #000000bc;
}
.button-inner-curve {
  border-radius: 50px;
  background: #e0e0e0;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow: inset 5px 5px 15px #bababa, inset -5px -5px 15px #ffffff;
  display: flex;
  padding: 12px 15px 10px 15px;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

</style>
    

================================================
FILE: Buttons/AKAspidey01_little-penguin-74.html
================================================
<!-- From Uiverse.io by AKAspidey01 - Tags: simple, button, hover button -->
<button class="cursor-pointer font-semibold overflow-hidden relative z-100 border border-green-500 group px-8 py-2">
  <span class="relative z-10 text-green-500 group-hover:text-white text-xl duration-500">Magic !</span>
  <span class="absolute w-full h-full bg-green-500 -left-32 top-0 -rotate-45 group-hover:rotate-0 group-hover:left-0 duration-500"></span>
  <span class="absolute w-full h-full bg-green-500 -right-32 top-0 -rotate-45 group-hover:rotate-0 group-hover:right-0 duration-500"></span>
</button>



================================================
FILE: Buttons/AKAspidey01_moody-moose-26.html
================================================
<div class="main-section">
  <button class="first-button"> Hover Me </button>
  <button class="second-button"> <svg viewBox="0 0 24 24" width="20" height="20" stroke="#ffd300" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg> Add To Cart</button>
</div>

<style>
/* From Uiverse.io by AKAspidey01 - Tags: button, add */
.first-button {
  background: rgb(115, 15, 209);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 1em;
  min-height: 60px;
  width: 200px;
  gap: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 0.6s;
}

.main-section {
  display: flex;
  flex-direction: column;
  height: 60px;
  overflow: hidden;
  align-items: flex-start;
}

.main-section:hover .second-button , .main-section:hover .first-button {
  transform: translateY(-60px);
}

.second-button {
  background: rgb(209, 15, 57);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 1em;
  min-height: 60px;
  width: 200px;
  gap: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 0.6s;
}

</style>


================================================
FILE: Buttons/AKAspidey01_orange-donkey-78.html
================================================
<!-- From Uiverse.io by AKAspidey01  - Tags: simple, animation, button, hover effect, tailwindcss -->
<button
  type="button"
  class="bg-white text-center w-48 rounded-2xl h-14 relative font-sans text-black text-xl font-semibold group"
>
  <div
    class="bg-green-400 rounded-xl h-12 w-1/4 flex items-center justify-center absolute left-1 top-[4px] group-hover:w-[184px] z-10 duration-500"
  >
    <svg
      width="25px"
      height="25px"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill="#000000"
        d="M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64z"
      ></path>
      <path
        fill="#000000"
        d="m237.248 512 265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312L237.248 512z"
      ></path>
    </svg>
  </div>
  <p class="translate-x-2">Go Back</p>
</button>


    

================================================
FILE: Buttons/AKAspidey01_selfish-puma-31.html
================================================
<!-- From Uiverse.io by AKAspidey01  - Tags: flashy, icon, social, button, hover effect -->
<div class="flex items-center gap-4">
  <div class="social-button">
    <button class="relative w-12 h-12 rounded-full group">
      <div
        class="floater w-full h-full absolute top-0 left-0 bg-violet-400 rounded-full duration-300 group-hover:-top-8 group-hover:shadow-2xl"
      ></div>
      <div
        class="icon relative z-10 w-full h-full flex items-center justify-center border-2 border-violet-400 rounded-full"
      >
        <svg
          fill="none"
          viewBox="0 0 22 22"
          height="22"
          width="22"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M21.94 6.46809C21.8884 5.2991 21.6994 4.49551 21.4285 3.79911C21.1492 3.05994 20.7194 2.39818 20.1564 1.84802C19.6062 1.28932 18.9401 0.855163 18.2094 0.580194C17.5091 0.309437 16.7096 0.120336 15.5407 0.0688497C14.363 0.0128932 13.9891 0 11.0022 0C8.01527 0 7.64141 0.0128932 6.46808 0.064466C5.29914 0.116039 4.49551 0.305225 3.79932 0.57581C3.05994 0.855163 2.39818 1.28494 1.84802 1.84802C1.28932 2.39813 0.855377 3.06428 0.580193 3.7949C0.309437 4.49551 0.120379 5.2948 0.0688496 6.4637C0.0129362 7.64141 0 8.01527 0 11.0022C0 13.9891 0.0129362 14.363 0.0644659 15.5363C0.116039 16.7053 0.305225 17.5089 0.576025 18.2053C0.855377 18.9444 1.28932 19.6062 1.84802 20.1564C2.39818 20.7151 3.06432 21.1492 3.79494 21.4242C4.49547 21.6949 5.29476 21.884 6.46391 21.9355C7.63702 21.9873 8.0111 22 10.998 22C13.9849 22 14.3588 21.9873 15.5321 21.9355C16.7011 21.884 17.5047 21.695 18.2009 21.4242C18.9321 21.1415 19.5961 20.7091 20.1505 20.1548C20.7048 19.6005 21.1373 18.9365 21.42 18.2053C21.6906 17.5047 21.8798 16.7052 21.9314 15.5363C21.9829 14.363 21.9958 13.9891 21.9958 11.0022C21.9958 8.01527 21.9914 7.64137 21.94 6.46809ZM19.9588 15.4503C19.9114 16.5248 19.731 17.105 19.5805 17.4918C19.2109 18.4502 18.4502 19.2109 17.4918 19.5805C17.105 19.731 16.5206 19.9114 15.4503 19.9586C14.29 20.0103 13.942 20.023 11.0066 20.023C8.07118 20.023 7.71881 20.0103 6.56259 19.9586C5.48816 19.9114 4.90796 19.731 4.52117 19.5805C4.04425 19.4043 3.61014 19.1249 3.25772 18.7596C2.89242 18.4029 2.61306 17.9731 2.43677 17.4961C2.28635 17.1094 2.10589 16.5248 2.05874 15.4547C2.007 14.2943 1.99428 13.9461 1.99428 11.0107C1.99428 8.07535 2.007 7.72298 2.05874 6.56698C2.10589 5.49254 2.28635 4.91235 2.43677 4.52555C2.61306 4.04842 2.89241 3.61439 3.26211 3.26189C3.61865 2.89658 4.04842 2.61723 4.52555 2.44115C4.91235 2.29073 5.49692 2.11023 6.56697 2.06291C7.72736 2.01134 8.07556 1.99844 11.0107 1.99844C13.9505 1.99844 14.2985 2.01134 15.4547 2.06291C16.5292 2.11027 17.1093 2.29069 17.4961 2.44111C17.9731 2.61723 18.4072 2.89658 18.7596 3.26189C19.1249 3.61865 19.4042 4.04842 19.5805 4.52555C19.731 4.91235 19.9114 5.49671 19.9587 6.56698C20.0103 7.72736 20.0232 8.07535 20.0232 11.0107C20.0232 13.9461 20.0104 14.29 19.9588 15.4503Z"
            class="group-hover:fill-[#171543] fill-white duration-300"
          ></path>
          <path
            d="M11.0026 5.35054C7.88252 5.35054 5.35107 7.88182 5.35107 11.0021C5.35107 14.1223 7.88252 16.6536 11.0026 16.6536C14.1227 16.6536 16.6541 14.1223 16.6541 11.0021C16.6541 7.88182 14.1227 5.35054 11.0026 5.35054ZM11.0026 14.668C8.97844 14.668 7.33654 13.0264 7.33654 11.0021C7.33654 8.97774 8.97844 7.33609 11.0025 7.33609C13.0269 7.33609 14.6685 8.97774 14.6685 11.0021C14.6685 13.0264 13.0268 14.668 11.0026 14.668ZM18.1971 5.12706C18.1971 5.85569 17.6063 6.44646 16.8775 6.44646C16.1489 6.44646 15.5581 5.85569 15.5581 5.12706C15.5581 4.39833 16.1489 3.80774 16.8775 3.80774C17.6063 3.80774 18.1971 4.39829 18.1971 5.12706Z"
            class="group-hover:fill-[#171543] fill-white duration-300"
          ></path>
        </svg>
      </div>
    </button>
  </div>
  <div class="social-button">
    <button class="relative w-12 h-12 rounded-full group">
      <div
        class="floater w-full h-full absolute top-0 left-0 bg-black rounded-full duration-300 group-hover:-top-8 group-hover:shadow-2xl"
      ></div>
      <div
        class="icon relative z-10 w-full h-full flex items-center justify-center border-2 border-black rounded-full"
      >
        <svg
          fill="none"
          viewBox="0 0 22 22"
          height="22"
          width="22"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12.8115 9.3155L20.8253 0H18.9263L11.9679 8.08852L6.41015 0H0L8.40433 12.2313L0 22H1.89914L9.24745 13.4583L15.1168 22H21.5269L12.811 9.3155H12.8115ZM10.2103 12.339L9.35878 11.1211L2.58343 1.42964H5.5004L10.9682 9.25094L11.8197 10.4689L18.9272 20.6354H16.0102L10.2103 12.3395V12.339Z"
            class="group-hover:fill-[#171543] fill-white duration-300"
          ></path>
        </svg>
      </div>
    </button>
  </div>
  <div class="social-button">
    <button class="relative w-12 h-12 rounded-full group">
      <div
        class="floater w-full h-full absolute top-0 left-0 bg-blue-500 rounded-full duration-300 group-hover:-top-8 group-hover:shadow-2xl"
      ></div>
      <div
        class="icon relative z-10 w-full h-full flex items-center justify-center border-2 border-blue-500 rounded-full"
      >
        <svg
          fill="none"
          viewBox="0 0 13 22"
          height="22"
          width="13"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M7.71289 22H4.1898C3.60134 22 3.12262 21.5213 3.12262 20.9328V12.9863H1.06717C0.478672 12.9863 0 12.5074 0 11.9191V8.514C0 7.9255 0.478672 7.44683 1.06717 7.44683H3.12262V5.74166C3.12262 4.05092 3.6535 2.6125 4.65773 1.58207C5.6665 0.546992 7.07627 0 8.7346 0L11.4214 0.00438281C12.0089 0.00537109 12.4868 0.484086 12.4868 1.07151V4.23311C12.4868 4.82157 12.0083 5.30028 11.4199 5.30028L9.61091 5.30093C9.05919 5.30093 8.91868 5.41153 8.88864 5.44543C8.83914 5.50172 8.78023 5.66062 8.78023 6.09954V7.4467H11.284C11.4725 7.4467 11.6551 7.49319 11.812 7.58076C12.1506 7.76995 12.3611 8.12762 12.3611 8.51417L12.3597 11.9193C12.3597 12.5074 11.881 12.9861 11.2926 12.9861H8.78019V20.9328C8.78023 21.5213 8.30139 22 7.71289 22ZM4.41233 20.7103H7.49031V12.4089C7.49031 12.016 7.81009 11.6964 8.20282 11.6964H11.07L11.0712 8.73662H8.20265C7.80991 8.73662 7.49031 8.41706 7.49031 8.02411V6.09959C7.49031 5.59573 7.54153 5.0227 7.92185 4.59198C8.38144 4.07133 9.10568 4.01126 9.61056 4.01126L11.1971 4.01057V1.29375L8.73357 1.28975C6.06848 1.28975 4.41238 2.99574 4.41238 5.7417V8.02407C4.41238 8.4168 4.09277 8.73658 3.7 8.73658H1.28975V11.6964H3.7C4.09277 11.6964 4.41238 12.016 4.41238 12.4089L4.41233 20.7103Z"
            class="group-hover:fill-[#171543] fill-white duration-300"
          ></path>
        </svg>
      </div>
    </button>
  </div>
  <div class="social-button">
    <button class="relative w-12 h-12 rounded-full group">
      <div
        class="floater w-full h-full absolute top-0 left-0 bg-red-400 rounded-full duration-300 group-hover:-top-8 group-hover:shadow-2xl"
      ></div>
      <div
        class="icon relative z-10 w-full h-full flex items-center justify-center border-2 border-red-400 rounded-full"
      >
        <svg
          fill="none"
          viewBox="0 0 30 22"
          height="22"
          width="30"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18.9945 9.70081L12.5775 6.18974C12.2085 5.98783 11.7724 5.99538 11.4108 6.20965C11.0489 6.42415 10.833 6.80311 10.833 7.22372V14.1857C10.833 14.6043 11.0476 14.9826 11.407 15.1973C11.5947 15.3094 11.8028 15.3657 12.0113 15.3657C12.2064 15.3654 12.3984 15.3166 12.57 15.2237L18.9872 11.7731C19.1742 11.6726 19.3305 11.5235 19.4397 11.3415C19.5489 11.1596 19.6069 10.9515 19.6077 10.7393C19.6086 10.527 19.552 10.3184 19.4441 10.1356C19.3362 9.95283 19.1808 9.80259 18.9945 9.70081ZM12.5352 13.3099V8.10662L17.3312 10.7308L12.5352 13.3099Z"
            class="group-hover:fill-[#171543] fill-white duration-300"
          ></path>
          <path
            d="M28.8325 5.19239L28.8312 5.17912C28.8065 4.94533 28.5617 2.86581 27.5508 1.80806C26.3822 0.56396 25.0574 0.412829 24.4203 0.340384C24.3722 0.335071 24.3241 0.329304 24.276 0.323081L24.2253 0.317805C20.3854 0.0385769 14.5862 0.000453846 14.5282 0.000226923L14.5231 0L14.518 0.000226923C14.4599 0.000453846 8.66074 0.0385769 4.7862 0.317805L4.73503 0.323081C4.69379 0.328641 4.64834 0.333747 4.59893 0.339533C3.96916 0.412149 2.65857 0.563563 1.48674 1.8526C0.523851 2.89905 0.245531 4.93404 0.216938 5.16272L0.213648 5.19239C0.204968 5.28969 0 7.60572 0 9.93077V12.1042C0 14.4293 0.204968 16.7453 0.213648 16.8428L0.21518 16.8574C0.239801 17.0875 0.484424 19.1289 1.49071 20.1871C2.58947 21.3895 3.97869 21.5486 4.72595 21.6341C4.84407 21.6476 4.94578 21.6592 5.01511 21.6714L5.08228 21.6807C7.29943 21.8916 14.2509 21.9955 14.5456 21.9998L14.5545 22L14.5634 21.9998C14.6214 21.9995 20.4204 21.9614 24.2604 21.6822L24.3111 21.6769C24.3597 21.6705 24.4142 21.6647 24.474 21.6585C25.1003 21.592 26.4037 21.454 27.5594 20.1823C28.5223 19.1358 28.8008 17.1007 28.8292 16.8723L28.8325 16.8426C28.8412 16.7451 29.0464 14.4293 29.0464 12.1042V9.93077C29.0461 7.60566 28.8412 5.28991 28.8325 5.19239ZM27.344 12.1042C27.344 14.2563 27.1561 16.4725 27.1383 16.6759C27.0661 17.2364 26.7724 18.5239 26.3033 19.0338C25.58 19.8296 24.837 19.9085 24.2945 19.9659C24.234 19.9721 24.1736 19.9789 24.1132 19.9863C20.3991 20.2549 14.8189 20.296 14.5619 20.2976C14.2736 20.2934 7.42372 20.1886 5.2742 19.989C5.16403 19.971 5.04501 19.9572 4.91963 19.9431C4.2834 19.8702 3.41247 19.7704 2.74282 19.0338L2.72705 19.017C2.26611 18.5368 1.98092 17.3328 1.90842 16.6826C1.89492 16.5288 1.70215 14.2864 1.70215 12.1042V9.93077C1.70215 7.78124 1.88964 5.56738 1.9078 5.35975C1.99403 4.69957 2.29317 3.49007 2.74282 3.00117C3.48826 2.18124 4.27432 2.09041 4.7942 2.03034C4.84384 2.02455 4.89013 2.01927 4.93291 2.01371C8.70107 1.74379 14.3214 1.70368 14.5231 1.70215C14.7247 1.70345 20.3431 1.74379 24.0778 2.01371C24.1236 2.0195 24.1737 2.02523 24.2275 2.03147C24.7623 2.0924 25.5705 2.18459 26.3122 2.9757L26.319 2.98301C26.78 3.46324 27.0652 4.68828 27.1376 5.35152C27.1505 5.4967 27.344 7.74397 27.344 9.93077V12.1042Z"
            class="group-hover:fill-[#171543] fill-white duration-300"
          ></path>
        </svg>
      </div>
    </button>
  </div>
</div>


    

================================================
FILE: Buttons/AKAspidey01_sour-eagle-93.html
================================================
<!-- From Uiverse.io by AKAspidey01 - Tags: animation, button, transition, hover effect, premium -->
<button class="cursor-pointer relative group overflow-hidden border-2 px-8 py-2 border-green-500">
  <span class="font-bold text-white text-xl relative z-10 group-hover:text-green-500 duration-500">Blink</span>
  <span class="absolute top-0 left-0 w-full bg-green-500 duration-500 group-hover:-translate-x-full h-full"></span>
  <span class="absolute top-0 left-0 w-full bg-green-500 duration-500 group-hover:translate-x-full h-full"></span>
  
    <span class="absolute top-0 left-0 w-full bg-green-500 duration-500 delay-300 group-hover:-translate-y-full h-full"></span>
  <span class="absolute delay-300 top-0 left-0 w-full bg-green-500 duration-500 group-hover:translate-y-full h-full"></span>
</button>



================================================
FILE: Buttons/AKAspidey01_spotty-husky-49.html
================================================
<button class="button">
  <div class="similar-line line-1"></div>
  <div class="similar-line line-2"></div>
  <div class="similar-line line-3"></div>
</button>

<style>
/* From Uiverse.io by AKAspidey01  - Tags: simple, flashy, animation, button, hover, smooth, hover effect, button hover effect  */
.button {
  cursor: pointer;
  position: relative;
  width: 5em;
  height: 4em;
  border: none;
  background: rgb(248, 66, 42);
  padding: 0.5em;
  display: flex;
  justify-content: center;
  gap: 0.7em;
  flex-direction: column;
  transition-duration: 0.5s;
}
.button:hover {
  background: rgb(7, 142, 253);
}
.similar-line {
  height: 0.2em;
  background: #fff;
  border-radius: 1em;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.line-1 {
  width: 40%;
}
.line-2 {
  width: 70%;
}
.line-3 {
  width: 90%;
}
.button:hover .line-1 {
  width: 90%;
}
.button:hover .line-2 {
  width: 70%;
}
.button:hover .line-3 {
  width: 40%;
}

</style>
    

================================================
FILE: Buttons/AKAspidey01_ugly-horse-68.html
================================================
<button class="button">
  <p class="button-text">Read More</p> <p class="iconer"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="currentColor"></path></svg></p>  
</button>
<style>
/* From Uiverse.io by AKAspidey01 - Tags: button, arrow */
.button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border-radius: 10px;
  border: none;
  overflow: hidden;
  background: rgb(164, 46, 194);
  color: #fff;
}

.button-text {
  transform: translateX(15px);
  font-size: 1.5em;
  font-weight: 700;
  transition-duration: 0.3s;
}

.iconer {
  transform: translateY(35px);
  transition-duration: 0.3s;
}

.button:hover .button-text {
  transform: translateX(0px);
}

.button:hover .iconer {
  transform: translateY(0px);
}



</style>


================================================
FILE: Buttons/AKHILJITH-VN_curly-lionfish-0.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by AKHILJITH-VN - Tags: button */
button {
  height: auto;
  width: auto;
  text-align: justify;
  background: linear-gradient(30deg,rgb(32, 252, 252),rgb(101, 101, 255)
    ,rgb(254, 183, 196),rgb(224, 17, 224));
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 8px;
  box-shadow: 2px 4px 6px #25d0e3;
  transition: all 0.5s ease;
}

button:hover {
  background: linear-gradient(30deg,rgb(224, 17, 224), pink, rgb(60, 60, 255), rgb(32, 252, 252));
  box-shadow: 2px 4px 6px #a8097e;
}
  
</style>


================================================
FILE: Buttons/Adir-SL_quiet-goose-19.html
================================================
<button> Click here </button>
<style>
/* From Uiverse.io by Adir-SL - Tags: pink, button, toy */
button {
  --fontSize: 2rem;
  --button: 356, 80%;
  --buttonColor: hsl(var(--button), 70%);
  --sideColor: hsl(var(--button), 40%);
  --text: hsl(var(--button), 30%);
  --bgColor: #e8e8e8;
  position: relative;
  font-size: 0;
  font-family: sans-serif;
  transition: all 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
  border-radius: 999px;
  padding: calc(var(--fontSize) / 2);
  height: calc(var(--fontSize) * 2);
  min-width: calc(var(--fontSize) * 2);
  line-height: calc(var(--fontSize) * 0.75);
  border: none;
  outline: none;
  background-color: var(--buttonColor);
  transform: rotate(-25deg);
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: calc(var(--fontSize) / -25) calc(var(--fontSize) / 25) calc(var(--fontSize) / 25) #ffffffbb inset, calc(var(--fontSize) / -25) calc(var(--fontSize) / -50) calc(var(--fontSize) / 25) #ffffff88 inset,
    0 0 calc(var(--fontSize) / 5) #0f004a77 inset, 0 0 0 calc(var(--fontSize) / 3.6) var(--buttonColor) inset,
    0 0 calc(var(--fontSize) / 6.25) calc(var(--fontSize) / 3.125) #0f004a44 inset, calc(var(--fontSize) / -25) calc(var(--fontSize) / 12.5) 0 var(--sideColor),
    calc(var(--fontSize) / -8.33) calc(var(--fontSize) / 12.5) calc(var(--fontSize) / 6.25) #0f004a44, calc(var(--fontSize) / -16.666) calc(var(--fontSize) / 12.5) calc(var(--fontSize) / 25) #0f004a66;
}

button:hover {
  transform: rotate(0);
  overflow: visible;
  font-size: var(--fontSize);
}

button::before,
button::after {
  content: ": ";
  font-family: serif;
  font-weight: bold;
  text-shadow: calc(var(--fontSize) / 25) 0 0 var(--sideColor), 0 0 calc(var(--fontSize) / 12.5) #0f004a55,
    calc(var(--fontSize) / 50) 0 0 var(--sideColor), calc(var(--fontSize) / 50) calc(var(--fontSize) / -50) 0 var(--sideColor);
  color: var(--bgColor);
  font-size: var(--fontSize);
}
</style>


================================================
FILE: Buttons/Admin12121_cold-dodo-65.html
================================================
<div class="printer">
    <div class="paper">
        <svg viewBox="0 0 8 8" class="svg">
            <path fill="#0077FF" d="M6.28951 1.3867C6.91292 0.809799 7.00842 0 7.00842 0C7.00842 0 6.45246 0.602112 5.54326 0.602112C4.82505 0.602112 4.27655 0.596787 4.07703 0.595012L3.99644 0.594302C1.94904 0.594302 0.290039 2.25224 0.290039 4.29715C0.290039 6.34206 1.94975 8 3.99644 8C6.04312 8 7.70284 6.34206 7.70284 4.29715C7.70347 3.73662 7.57647 3.18331 7.33147 2.67916C7.08647 2.17502 6.7299 1.73327 6.2888 1.38741L6.28951 1.3867ZM3.99679 6.532C2.76133 6.532 1.75875 5.53084 1.75875 4.29609C1.75875 3.06133 2.76097 2.06018 3.99679 2.06018C4.06423 2.06014 4.13163 2.06311 4.1988 2.06905L4.2414 2.07367C4.25028 2.07438 4.26057 2.0758 4.27406 2.07651C4.81533 2.1436 5.31342 2.40616 5.67465 2.81479C6.03589 3.22342 6.23536 3.74997 6.23554 4.29538C6.23554 5.53084 5.23439 6.532 3.9975 6.532H3.99679Z"></path>
            <path fill="#0055BB" d="M6.756 1.82386C6.19293 2.09 5.58359 2.24445 4.96173 2.27864C4.74513 2.17453 4.51296 2.10653 4.27441 2.07734C4.4718 2.09225 5.16906 2.07947 5.90892 1.66374C6.04642 1.58672 6.1743 1.49364 6.28986 1.38647C6.45751 1.51849 6.61346 1.6647 6.756 1.8235V1.82386Z"></path>
        </svg>
    </div>
    <div class="dot"></div>
    <div class="output">
        <div class="paper-out"></div>
    </div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: button, hover, hover effect */
.printer {
  --border: #00104b;
  --background: #fff;
  cursor: pointer;
  width: 32px;
  height: 18px;
  position: relative;
}

.printer:before, .printer:after {
  content: "";
  position: absolute;
  box-shadow: inset 0 0 0 2px var(--border);
  background: var(--background);
}

.printer:before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  border-radius: 3px;
  z-index: 2;
}

.printer:after {
  width: 26px;
  height: 6px;
  top: 0;
  left: 3px;
  border-radius: 3px 3px 0 0;
}

.printer .dot {
  width: 24px;
  height: 2px;
  border-radius: 1px;
  left: 4px;
  bottom: 4px;
  z-index: 4;
  position: absolute;
  background: var(--border);
}

.printer .dot:before, .printer .dot:after {
  content: "";
  position: absolute;
  background: var(--border);
  border-radius: 1px;
  height: 2px;
}

.printer .dot:before {
  width: 2px;
  right: 0;
  top: -5px;
}

.printer .dot:after {
  width: 4px;
  right: 3px;
  top: -5px;
}

.printer .paper {
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 20px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px var(--border);
  background: var(--background);
  left: 7px;
  bottom: 10px;
  display: flex;
  justify-content: center;
  transform: perspective(40px) translateY(0) rotateX(4deg) translateZ(0);
  -webkit-animation: paper 1.2s ease infinite;
  animation: paper 1.2s ease infinite;
  -webkit-animation-play-state: var(--state, running);
  animation-play-state: var(--state, running);
}

.printer .paper .svg {
  display: block;
  width: 8px;
  height: 8px;
  margin-top: 4px;
}

.printer .output {
  width: 32px;
  height: 24px;
  pointer-events: none;
  top: 13px;
  left: 0;
  z-index: 3;
  overflow: hidden;
  position: absolute;
}

.printer .output .paper-out {
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 20px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px var(--border);
  background: var(--background);
  left: 7px;
  bottom: 0;
  transform: perspective(40px) rotateX(40deg) translateY(-12px) translateZ(6px);
  -webkit-animation: paper-out 1.2s ease infinite;
  animation: paper-out 1.2s ease infinite;
  -webkit-animation-play-state: var(--state, running);
  animation-play-state: var(--state, running);
}

.printer .output .paper-out:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  right: 3px;
  height: 2px;
  border-radius: 1px;
  opacity: 0.5;
  background: var(--border);
  box-shadow: 0 3px 0 var(--border), 0 6px 0 var(--border);
}

.printer:not(:hover) {
  --state: paused;
}

@-webkit-keyframes paper {
  50% {
    transform: translateY(10px) translateZ(0);
  }
}

@keyframes paper {
  50% {
    transform: translateY(10px) translateZ(0);
  }
}

@-webkit-keyframes paper-out {
  50% {
    transform: perspective(40px) rotateX(30deg) translateY(-4px) translateZ(6px);
  }
}

@keyframes paper-out {
  50% {
    transform: perspective(40px) rotateX(30deg) translateY(-4px) translateZ(6px);
  }
}

</style>


================================================
FILE: Buttons/Admin12121_lovely-cat-86.html
================================================
<button class="bin">🗑</button>
<div class="div">
  <small>
    <i></i>
  </small>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: delete, animated, 3d button */
.bin {
  --black: #000000;
  --binbg: #e6e6e6;
  --width: 40px;
  --height: 50px;
  background-image: repeating-linear-gradient(to right, transparent, transparent 5px, var(--black) 5px, var(--black) 7px, transparent 7px);
  background-size: 11px calc(var(--height) / 2);
  background-position: 2px center;
  background-repeat: repeat-x;
  margin: auto;
  position: relative;
  background-color: var(--binbg);
  border: 0;
  color: transparent;
  width: var(--width);
  height: var(--height);
  border: 2px solid var(--black);
  border-radius: 0 0 6px 6px;
}

.bin::after, .bin::before {
  content: "";
  position: absolute;
  transform-origin: left bottom;
  transition: 200ms ease-in-out;
  border-width: 2px;
  border-style: solid;
  margin: auto;
  right: 0;
}

.bin::after {
  left: -4px;
  top: -5px;
  height: 7px;
  width: var(--width);
  border: 2px solid var(--black);
  background-color: var(--binbg);
  border-radius: 5px 5px 0 0;
}

.bin::before {
  top: -8px;
  height: 2px;
  width: 10px;
  border-color: var(--black) var(--black) transparent var(--black);
  left: 0;
}

.bin:focus, .bin:active {
  outline: none;
  cursor: none;
}

.bin:focus::before, .bin:focus::after, .bin:active::before, .bin:active::after {
  transform-origin: left bottom;
  transform: rotate(-45deg);
}

.bin:focus::before, .bin:active::before {
  top: -18px;
  left: -23px;
  right: 3px;
}

.bin:focus ~ .div, .bin:active ~ .div {
  cursor: none;
  z-index: 1;
}

.bin:focus ~ .div:hover, .bin:active ~ .div:hover {
  cursor: none;
}

.bin:focus ~ .overlay, .bin:active ~ .overlay {
  pointer-events: inherit;
  z-index: 2;
  cursor: none;
}

.bin:focus ~ .div > small, .bin:active ~ .div > small {
  opacity: 1;
  animation: throw 300ms 30ms cubic-bezier(0.215, 0.61, 0.355, 0.3) forwards;
}

.div:focus, .div:active, .div:hover {
  z-index: 1;
  cursor: none;
}

.div > small {
  position: absolute;
  width: 20px;
  height: 16px;
  left: 0;
  right: -58px;
  margin: auto;
  top: 27px;
  bottom: 0;
  border-left: 1px solid black;
  opacity: 0;
}

.div > small::before, .div > small::after {
  content: "";
  position: absolute;
  width: 1px;
  border-right: 1px solid black;
}

.div > small::before {
  height: 17px;
  transform: rotate(-42deg);
  top: -3px;
  right: 13px;
}

.div > small::after {
  height: 4px;
  transform: rotate(-112deg);
  top: 18px;
  right: 11px;
}

.div > small > i::before, .div > small > i::after {
  content: "";
  position: absolute;
  border-top: 1px solid black;
}

.div > small > i::before {
  border-left: 1px solid black;
  width: 4px;
  bottom: -4px;
  height: 4px;
  transform: rotate(66deg);
}

.div > small > i::after {
  border-right: 1px solid black;
  width: 5px;
  bottom: -2px;
  height: 5px;
  transform: rotate(-114deg);
  right: 6px;
}

@keyframes throw {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, -30px) rotate(-10deg);
  }

  60% {
    transform: translate(0, -40px) rotate(-30deg);
  }

  70% {
    transform: translate(-5px, -50px) rotate(-40deg) scale(1);
    opacity: 1;
  }

  80% {
    transform: translate(-10px, -60px) rotate(-60deg) scale(0.9);
    opacity: 1;
  }

  90% {
    transform: translate(-20px, -50px) rotate(-100deg) scale(0.5);
    opacity: 0.8;
  }

  100% {
    transform: translate(-30px, -20px) rotate(-80deg) scale(0.4);
    opacity: 0;
  }
}
</style>


================================================
FILE: Buttons/Afacanc38_polite-chipmunk-64.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by Afacanc38 - Tags: skeuomorphism, minimalist, black, button, dark, cool btn */
.button {
  padding: 12px 24px;
  border: none;
  border-radius: 2px;
  background: #424242;
  color: white;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, .1) inset,
    0 0 0 1px rgba(0, 0, 0, .7),
    0 -1px 0 0 rgba(0, 0, 0, .7) inset,
    0 1px 2px 1px rgba(0, 0, 0, .6);
  cursor: pointer;
  transition: 50ms ease-out;
  font-weight: 600;
}

.button:hover, .button:focus, .button:focus-visible {
  background: #353535;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, .05) inset,
    0 0 0 1px rgba(0, 0, 0, .7),
    0 -1px 0 0 rgba(0, 0, 0, .7) inset,
    0 1px 2px 1px rgba(0, 0, 0, .6);
  border: none;
  outline: none;
}

.button:active {
  background: #181818;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7) inset,
    0 1px 0 0 rgba(255, 255, 255, .05),
    0 1px 2px 1px rgba(0, 0, 0, .6) inset;
}
</style>


================================================
FILE: Buttons/AhSiber_great-gecko-98.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by AhSiber - Tags: simple, minimalist, button */
button {
 border: 1px solid seagreen;
 border-radius: 5px;
 background: rgb(255, 255, 255);
 color: seagreen;
 font-style: italic;
 padding: 10px;
 padding-right: 14px;
 padding-left: 12px;
 font-size: 17px;
}

button:hover {
 background-color: seagreen;
 color: white;
 border: 1px solid  seagreen;
}

</style>


================================================
FILE: Buttons/Ahemtan_strong-impala-57.html
================================================
<button>
  <span class="text">
      Hover Me!
  </span>
  <svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg" class="star"><path fill="currentcolor" d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path></svg>
  <svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" class="moon"><path fill="currentcolor" d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"></path></svg>
  <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="meteor"><path fill="currentcolor" d="M493.7 .9L299.4 75.6l2.3-29.3c1-12.8-12.8-21.5-24-15.1L101.3 133.4C38.6 169.7 0 236.6 0 309C0 421.1 90.9 512 203 512c72.4 0 139.4-38.6 175.7-101.3L480.8 234.3c6.5-11.1-2.2-25-15.1-24l-29.3 2.3L511.1 18.3c.6-1.5 .9-3.2 .9-4.8C512 6 506 0 498.5 0c-1.7 0-3.3 .3-4.8 .9zM192 192a128 128 0 1 1 0 256 128 128 0 1 1 0-256zm0 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm16 96a16 16 0 1 0 0-32 16 16 0 1 0 0 32z"></path></svg>
</button>
<style>
/* From Uiverse.io by Ahemtan - Tags: button */
button {
  position: relative;
  background: #6a92ef;
  color: white;
  padding: .9rem 2.20rem;
  border-radius: 2rem;
  transition: .5s;
  border: none;
}

button::after {
  content: '';
  width: 80%;
  height: 40%;
  background: linear-gradient(80deg, hsl(217, 77%, 71%) 10%, hsl(218, 76%, 84%) 48%);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  margin: 0 auto;
  border-radius: 2rem;
  filter: blur(8px);
  z-index: -9;
  opacity: 0;
  transition: opacity .4s;
}

.text {
  position: relative;
  z-index: 10;
}

button svg {
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
  transition: .6s;
  opacity: 0;
}

svg.star {
  width: 18px;
  transform: translate(-25px, -6px) rotate(55deg);
  filter: blur(.4px);
  color: hsl(210, 40%, 47%);
}

svg.moon {
  width: 18px;
  transform: translate(7px, -14) rotate(80deg);
  filter: blur(.5px);
  color: hsl(210, 40%, 47%);
}

svg.meteor {
  width: 16px;
  transform: translate(34px, -4px) rotate(-45deg);
  filter: blur(.4px);
  color: hsl(210, 40%, 47%);
}

button:active {
  color: #ffffff;
  transform: scale(1.2);
}

button:hover::after {
  opacity: 1;
}

button:hover {
  transform: scale(1.3);
}

button:hover svg {
  opacity: 1;
}

button:hover svg.star {
  transform: translate(-55px, -20px) rotate(55deg) scale(1.8);
}

button:hover svg.moon {
  transform: translate(50px, -32px) rotate(0deg) scale(1.4);
}

button:hover svg.meteor {
  transform: translate(28px, 30px) rotate(260deg) scale(2);
}
</style>


================================================
FILE: Buttons/AkashKobal_blue-octopus-30.html
================================================

    <button class="buttonDownload">Upload</button>
<style>
/* From Uiverse.io by AkashKobal - Tags: button */
.buttonDownload {
  display: inline-block;
  position: relative;
  padding: 10px 25px;
  background-color: #4CC713;
  color: white;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 0.9em;
  text-align: center;
  text-indent: 15px;
  border: none;
  border-radius: 2em;
  font-weight: bold;
}

.buttonDownload:hover {
  background-color: #1a60a2;
  color: white;
}

.buttonDownload:before, .buttonDownload:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 15px;
  top: 52%;
}

.buttonDownload:before {
  width: 10px;
  height: 2px;
  border-style: solid;
  border-width: 0 2px 2px;
}

.buttonDownload:after {
  width: 0;
  height: 0;
  margin-left: 3px;
  margin-top: -7px;
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: transparent;
  border-top-color: inherit;
  animation: downloadArrow 1s linear infinite;
  animation-play-state: paused;
}

.buttonDownload:hover:before {
  border-color: #bdd3ef;
}

.buttonDownload:hover:after {
  border-top-color: #eff1f7;
  animation-play-state: running;
}

@keyframes downloadArrow {
  0% {
    margin-top: -7px;
    opacity: 1;
  }

  0.001% {
    margin-top: -15px;
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }

  100% {
    margin-top: 0;
    opacity: 0.4;
  }
}

</style>


================================================
FILE: Buttons/Ali-Tahmazi99_big-stingray-4.html
================================================
<button>
  <span> Button
  </span>
</button>
<style>
/* From Uiverse.io by Ali-Tahmazi99 - Tags: button */
/* From uiverse.io by @Ali-Tahmazi99 */
button {
 display: inline-block;
 width: 150px;
 height: 50px;
 border-radius: 10px;
 border: 1px solid #03045e;
 position: relative;
 overflow: hidden;
 transition: all 0.5s ease-in;
 z-index: 1;
}

button::before,
button::after {
 content: '';
 position: absolute;
 top: 0;
 width: 0;
 height: 100%;
 transform: skew(15deg);
 transition: all 0.5s;
 overflow: hidden;
 z-index: -1;
}

button::before {
 left: -10px;
 background: #240046;
}

button::after {
 right: -10px;
 background: #5a189a;
}

button:hover::before,
button:hover::after {
 width: 58%;
}

button:hover span {
 color: #e0aaff;
 transition: 0.3s;
}

button span {
 color: #03045e;
 font-size: 18px;
 transition: all 0.3s ease-in;
}
</style>


================================================
FILE: Buttons/AlimurtuzaCodes_average-liger-0.html
================================================
<button class="btn">
    <svg height="24" width="24" fill="#FFFFFF" viewBox="0 0 24 24" data-name="Layer 1" id="Layer_1" class="sparkle">
        <path d="M10,21.236,6.755,14.745.264,11.5,6.755,8.255,10,1.764l3.245,6.491L19.736,11.5l-6.491,3.245ZM18,21l1.5,3L21,21l3-1.5L21,18l-1.5-3L18,18l-3,1.5ZM19.333,4.667,20.5,7l1.167-2.333L24,3.5,21.667,2.333,20.5,0,19.333,2.333,17,3.5Z"></path>
    </svg>

    <span class="text">Generate</span>
</button>
<style>
/* From Uiverse.io by AlimurtuzaCodes - Tags: gradient, button, stars, css effect, css button, generate */
.btn {
  border: none;
  width: 15em;
  height: 5em;
  border-radius: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: #1C1A1C;
  cursor: pointer;
  transition: all 450ms ease-in-out;
}

.sparkle {
  fill: #AAAAAA;
  transition: all 800ms ease;
}

.text {
  font-weight: 600;
  color: #AAAAAA;
  font-size: medium;
}

.btn:hover {
  background: linear-gradient(0deg,#A47CF3,#683FEA);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
  inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
  0px 0px 0px 4px rgba(255, 255, 255, 0.2),
  0px 0px 180px 0px #9917FF;
  transform: translateY(-2px);
}

.btn:hover .text {
  color: white;
}

.btn:hover .sparkle {
  fill: white;
  transform: scale(1.2);
} 
</style>


================================================
FILE: Buttons/AlimurtuzaCodes_blue-quail-54.html
================================================
<!-- From Uiverse.io by AlimurtuzaCodes - Tags: button, rounded button, hover button, css button, tailwind, tailwindbutton -->
<button class="bg-white w-36 h-12 rounded-md border-2 border-[#333] cursor-pointer relative group hover:bg-[#333] transition duration-300 ease-in hover:-translate-x-2 hover:translate-y-2">
  <h1 class="group-hover:text-white text-[#333] font-bold">SUBMIT</h1>
  <div class="rounded-md group-hover:border-0 w-36 h-12 border-2 border-[#333] absolute top-1 -left-2 -z-10">
  <div class="rounded-md group-hover:border-0 w-36 h-12 border-2 border-[#333] absolute top-1 -left-2 -z-10">
</div></div></button>



================================================
FILE: Buttons/AlimurtuzaCodes_rare-impala-32.html
================================================
<!-- From Uiverse.io by AlimurtuzaCodes - Tags: button, color, tailwind -->
<button class="w-40 h-12 bg-white cursor-pointer rounded-3xl border-2 border-[#9748FF] shadow-[inset_0px_-2px_0px_1px_#9748FF] group hover:bg-[#9748FF] transition duration-300 ease-in-out">
 <span class="font-medium text-[#333] group-hover:text-white">Hover me</span>
</button>



================================================
FILE: Buttons/Allyhere_strong-pug-22.html
================================================
<button class="btn-donate">
    Donate now
</button>
<style>
/* From Uiverse.io by Allyhere - Tags: button, css effect, hoverme */
.btn-donate {
  --clr-font-main: hsla(0 0% 20% / 100);
  --btn-bg-1: hsla(194 100% 69% / 1);
  --btn-bg-2: hsla(217 100% 56% / 1);
  --btn-bg-color: hsla(360 100% 100% / 1);
  --radii: 0.5em;
  cursor: pointer;
  padding: 0.9em 1.4em;
  min-width: 120px;
  min-height: 44px;
  font-size: var(--size, 1rem);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  transition: 0.8s;
  background-size: 280% auto;
  background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
  border: none;
  border-radius: var(--radii);
  color: var(--btn-bg-color);
  box-shadow: 0px 0px 20px rgba(71, 184, 255, 0.5), 0px 5px 5px -1px rgba(58, 125, 233, 0.25), inset 4px 4px 8px rgba(175, 230, 255, 0.5), inset -4px -4px 8px rgba(19, 95, 216, 0.35);
}

.btn-donate:hover {
  background-position: right top;
}

.btn-donate:is(:focus, :focus-visible, :active) {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-2);
}

@media (prefers-reduced-motion: reduce) {
  .btn-donate {
    transition: linear;
  }
}

</style>


================================================
FILE: Buttons/AmIt-DasIT_evil-wolverine-68.html
================================================
<div class="svg-wrapper">
  <svg height="60" width="190" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape" height="60" width="190"></rect>
    </svg>
    <div class="text">Subscribe</div>
</div>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: button, add, btn */
.svg-wrapper {
  position: relative;
  width: 190px;
  height: 60px;
  text-align: center;
  cursor: pointer;
}

.shape {
  stroke-dasharray: 100 300;
  stroke-dashoffset: -297;
  fill: transparent;
  stroke: rgb(220, 20, 60);
  stroke-width: 5px;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}

.text {
  font-size: 22px;
  top: -52px;
  position: relative;
  font-weight: 600;
  color: white;
}

.svg-wrapper:hover .shape {
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
}

.svg-wrapper:hover {
  background-color: rgba(220, 20, 60, 0.2);
  transition: 1s;
}


</style>


================================================
FILE: Buttons/AmIt-DasIT_gentle-gecko-87.html
================================================
<div class="box">
  <div class="arrow right"></div>
  <div class="text">Learn More</div>
</div>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: button */
.box {
  width: 45px;
  height: 45px;
  background: #5cda5c;
  border-radius: 25px;
  display: flex;
  justify-items: center;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  cursor: pointer;
  position: relative;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
}

.box:hover {
  width: 160px;
  background: linear-gradient(to right, #26d526, yellow);
}

.box:hover .arrow {
  display: none;
}

.box .text {
  display: none;
}

.box:hover .text {
  display: flex;
  font-size: 16px;
  font-weight: 550;
  color: black;
  letter-spacing: 0.6px;
  animation: anima 0.6s ease;
}

@keyframes anima {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.box:active {
  background: linear-gradient(to right, rgb(38, 213, 38, 0.8), rgba(255, 255, 0, 0.8));
}

</style>


================================================
FILE: Buttons/Amikas_polite-seahorse-89.html
================================================
<button class="button">
  Click me
</button>
<style>
/* From Uiverse.io by Amikas - Tags: button */
.button {
  background-color: #333;
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  font-size: 17px;
}

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  background-color: rgb(128, 95, 247);
}

.button:active {
  transform: translateY(0.5em);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
</style>


================================================
FILE: Buttons/Amir10Amir_big-dolphin-56.html
================================================
<button class="bn">Hover!</button>
<style>
/* From Uiverse.io by Amir10Amir - Tags: gradient, button */
button {
  --border-radius: 25px;
  --border-width: 7px;
  appearance: none;
  position: relative;
  padding: 1em 2em;
  border: 0;
  background-color: #212121;
  font-family: "Roboto", Arial, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #ffff;
  z-index: 2;
}

button::after {
  --m-i: linear-gradient(#000, #000);
  --m-o: content-box, padding-box;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: var(--border-width);
  background-image: conic-gradient(
		#ff0080,
		#ff0080,
		#ff0080,
		#ff0080,
		#ff0080,
		#ff0080,
		#ff0080
	);
  -webkit-mask-image: var(--m-i), var(--m-i);
  mask-image: var(--m-i), var(--m-i);
  -webkit-mask-origin: var(--m-o);
  mask-origin: var(--m-o);
  mask-clip: var(--m-o);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  filter: hue-rotate(0);
  animation: rotate-hue634 linear 500ms infinite;
  animation-play-state: paused;
  border-radius: 20px;
  border-color: #000;
}

button:hover::after {
  animation-play-state: running;
  border-radius: 10px;
}

@keyframes rotate-hue634 {
  to {
    filter: hue-rotate(1turn);
  }
}

button,
button::after {
  box-sizing: border-box;
  border-radius: 20px;
}

button:active {
  --border-width: 5px;
}

.bn {
  padding: 0.9em 1.6em;
  border: none;
  outline: none;
  color: #FFF;
  font-family: inherit;
  font-weight: 500;
  font-size: 17px;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 32px;
}

.bn::after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgb(46, 46, 46);
  left: 0;
  top: 0;
  border-radius: 10px;
}

.bn::before {
  content: "";
  background: linear-gradient(
    45deg,
    #07d888, #e40851, #2f00ff, #00ff37,
      #ec0808, #2600ff, #0bd157, #2f00ff
);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 600%;
  z-index: -1;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  filter: blur(8px);
  animation: glowing345 20s linear infinite;
  transition: opacity .3s ease-in-out;
  border-radius: 20px;
  opacity: 0;
}

@keyframes glowing345 {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}

.bn:hover::before {
  opacity: 1;
}

.bn:active:after {
  background: transparent;
}

.bn:active {
  color: #000;
  font-weight: bold;
}
</style>


================================================
FILE: Buttons/AndiBumann_wet-robin-100.html
================================================
<div class="container">
  <button class="join-now-button">Join now</button>
</div>

<style>
/* From Uiverse.io by AndiBumann  - Tags: animation, gradient, button */
.join-now-button {
  background-color: #ff69b4; /* Grundfarbe (Pink) */
  background-image: linear-gradient(
    to right,
    #ff69b4 0%,
    #ffffff 25%,
    #f00 50%,
    #ffa500 75%,
    #ff69b4 100%
  ); /* Farbverlauf */
  background-size: 200% 100%; /* Größe des Farbverlaufs */
  background-position: left; /* Position des Farbverlaufs */
  transition: background-position 0.3s; /* Animation des Farbverlaufs */
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatteneffekt */
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.join-now-button:hover {
  background-position: right; /* Animation des Farbverlaufs */
}

</style>
    

================================================
FILE: Buttons/AndrewHeinke_pink-lion-94.html
================================================
<button class="space-btn">
  <svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" stroke-linejoin="round" stroke-linecap="round"></path> </svg>
  to infinity
</button>
<style>
/* From Uiverse.io by AndrewHeinke - Tags: button */
.space-btn {
  background: #FBFBFF;
  border: 2px solid #FF4F00;
  color: #363537;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 1px;
  padding: .5rem .75rem;
  font-family: monospace;
  border-radius: 4px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 1px rgba(0,0,0,0.09), 
              0 4px 2px rgba(0,0,0,0.09), 
              0 8px 4px rgba(0,0,0,0.09), 
              0 16px 8px rgba(0,0,0,0.09),
              0 32px 16px rgba(0,0,0,0.09);
  transition: .3s ease-in;
}

.space-btn:hover {
  background: #FF4F00;
  color: white;
}

.space-btn svg {
  width: 1em;
  height: 1em;
  color: currentColor;
  margin-right: .5rem;
}
</style>


================================================
FILE: Buttons/AnshKaushal_shy-grasshopper-99.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by AnshKaushal - Tags: button */
button {
  border: 1.5px solid black;
  padding: 10px;
  width: 100px;
  margin: 15px;
  color: #f5f0f0;
  background-color: #101014;
  box-shadow: 3px 3px 6px #101014;
  transition: transform 0.3s ease-in-out;
}

button:hover {
  background-color: #f5f0f0;
  color: #101014;
  transform: scale(1.2);
}
</style>


================================================
FILE: Buttons/AnthonyPreite_kind-fish-73.html
================================================
    <button class="button">
      I'm a Button
    </button>

<style>
/* From Uiverse.io by AnthonyPreite - Tags: gradient, button */
.button {
  position: relative;
  height: 50px;
  width: 130px;
  border: none;
  outline: none;
  color: white;
  background: #0f0f0f;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Gruppo', sans-serif;
  transition: all .2s ease-out;
}

.button:before {
  position: absolute;
  content: '';
  top: -4px;
  left: -4px;
  height: calc(100% + 8px);
  width: calc(100% + 8px);
  border-radius: 6px;
  z-index: -1;
  opacity: 1;
  background: linear-gradient(90deg, hsla(141, 54%, 86%, 1) 0%, hsla(333, 73%, 85%, 1) 25%, hsla(141, 54%, 86%, 1)50%);
  background-size: 400%;
  transition: opacity 1s ease-in-out;
  animation: animate 20s linear infinite;
}

.button:hover {
  transform: scale(1.1);
  color: #0f0f0f;
  opacity: 1;
  transition: all .3s ease-in-out;
}

.button:active {
  background: none;
  color: #000000;
  transform: scale(1);
  transition: all .3s ease-in-out;
}

@keyframes animate {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}

</style>


================================================
FILE: Buttons/AqFox_fat-ladybug-84.html
================================================
<button>BUTTON</button>
<style>
/* From Uiverse.io by AqFox - Tags: 3d, blue, button, glossy */
button {
  --c: #fff;
 /* text color */
  background: linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p,100%)/300% no-repeat,
    #004dff;
 /* background color */
  color: #0000;
  border: none;
  transform: perspective(500px) rotateY(calc(20deg*var(--_i,-1)));
  text-shadow: calc(var(--_i,-1)* 0.08em) -.01em 0   var(--c),
    calc(var(--_i,-1)*-0.08em)  .01em 2px #0004;
  outline-offset: .1em;
  transition: 0.3s;
}

button:hover,
button:focus-visible {
  --_p: 0%;
  --_i: 1;
}

button:active {
  text-shadow: none;
  color: var(--c);
  box-shadow: inset 0 0 9e9q #0005;
  transition: 0s;
}

button {
  font-family: system-ui, sans-serif;
  font-weight: bold;
  font-size: 2rem;
  margin: 0;
  cursor: pointer;
  padding: .1em .3em;
}
</style>


================================================
FILE: Buttons/AqFox_happy-zebra-99.html
================================================
<button class="custom-btn btn-4"><span>Read More</span></button>
<style>
/* From Uiverse.io by AqFox - Tags: button */
.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
  font-size: 15px;
}

.btn-4 {
  background-color: #004dff;
  background-image: linear-gradient(315deg, #03c8a8 0%, #004dff 74%);
  line-height: 42px;
  padding: 0;
  border: none;
}

.btn-4:hover {
  background-color: #004dff;
  background-image: linear-gradient(315deg, #004dff 0%, #03c8a8 74%);
}

.btn-4 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.btn-4:before,
.btn-4:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.9),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  transition: all 0.3s ease;
}

.btn-4:before {
  height: 0%;
  width: .1px;
}

.btn-4:after {
  width: 0%;
  height: .1px;
}

.btn-4:hover:before {
  height: 100%;
}

.btn-4:hover:after {
  width: 100%;
}

.btn-4 span:before,
.btn-4 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.9),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  transition: all 0.3s ease;
}

.btn-4 span:before {
  width: .1px;
  height: 0%;
}

.btn-4 span:after {
  width: 0%;
  height: .1px;
}

.btn-4 span:hover:before {
  height: 100%;
}

.btn-4 span:hover:after {
  width: 100%;
}
</style>


================================================
FILE: Buttons/AqFox_nervous-crab-0.html
================================================
<button class="btn btn-1 hover-filled-slide-left">
    <span>hover me</span>
</button>
<style>
/* From Uiverse.io by AqFox - Tags: button */
.btn {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 0px 25px 15px;
  min-width: 150px;
}

.btn span {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 20px;
  transition: 0.3s;
}

.btn-1::before {
  background-color: #004dff;
  transition: 0.3s ease-out;
}

.btn-1 span {
  color: rgb(255,255,255);
  border: 1px solid #004dff;
  transition: 0.2s 0.1s;
}

.btn-1 span:hover {
  color: #004dff;
  transition: 0.2s 0.1s;
}

:active, :hover, :focus {
  outline: 0!important;
  outline-offset: 0;
}

::before,
::after {
  position: absolute;
  content: "";
}

.btn.hover-filled-slide-left::before {
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.btn.hover-filled-slide-left:hover::before {
  width: 0%;
}
</style>


================================================
FILE: Buttons/AqFox_pretty-lionfish-11.html
================================================
<button class="custom-btn btn-2">Read More</button>
<style>
/* From Uiverse.io by AqFox - Tags: skeuomorphism, blue, button, realistic */
.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
  font-size: 15px;
}

.btn-2 {
  background: #004dff;
  background: linear-gradient(0deg, #004dff 0%, #004dff 100%);
  border: none;
}

.btn-2:before {
  height: 0%;
  width: 2px;
}

.btn-2:hover {
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}

</style>


================================================
FILE: Buttons/AqFox_tasty-robin-91.html
================================================
<button>
    <div class="arrow-up"></div>
</button>
<style>
/* From Uiverse.io by AqFox - Tags: icon, blue, button, up, arrow */
button {
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #004dff;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
  border: #004dff;
  transition: 0.5s;
}

button:hover {
  transform: scale(1.1);
}

button:active {
  background-color: #020cd1;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  margin-left: auto;
  margin-right: auto;
  margin-top: 35%;
  margin-bottom: 60%;
  border-bottom: 15px solid white;
}
</style>


================================================
FILE: Buttons/ArnavK-09_serious-mouse-19.html
================================================
<!-- From Uiverse.io by ArnavK-09  - Tags: flashy, button, shadow, gradients, light&dark, transition, premium, tailwind -->
<button
  class="brightness-150 dark:brightness-100 group hover:shadow-lg hover:shadow-yellow-700/60 transition ease-in-out hover:scale-105 p-1 rounded-xl bg-gradient-to-br from-yellow-800 via-yellow-600 to-yellow-800 hover:from-yellow-700 hover:via-yellow-800 hover:to-yellow-600"
>
  <div
    class="px-6 py-2 backdrop-blur-xl bg-black/80 rounded-lg font-bold w-full h-full"
  >
    <div
      class="group-hover:scale-100 flex group-hover:text-yellow-500 text-yellow-600 gap-1"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.8"
        class="w-6 h-6 stroke-yellow-600 group-hover:stroke-yellow-500 group-hover:stroke-{1.99}"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
        ></path>
      </svg>
      Premium
    </div>
  </div>
</button>


    

================================================
FILE: Buttons/Artahs_yellow-skunk-98.html
================================================
<button class="button">Enter the game</button>

<style>
/* From Uiverse.io by Artahs  - Tags: action, red, button, button */
.button {
  cursor: pointer;
  border: solid;
  border-color: #5b5958;
  border-radius: 7px;
  width: 200px;
  height: 50px;
  background-color: #730603;
  color: #ffc900;
  font-size: 1rem;
  font-weight: 600;
  text-shadow: black 2px 1px;
  -web-kit-box-shadow: inset 0px 0px 1.5px 2px #000000, 0px 0px 15px 3px #000000;
  box-shadow: inset 0px 0px 1.5px 2px #000000, 0px 0px 15px 3px #000000;
}
.button:hover {
  background-color: #a50000;
}

</style>
    

================================================
FILE: Buttons/ArturCodeCraft_afraid-fish-22.html
================================================
<div class="main__action">
  <a class="main__scroll" href="#">
    <div class="main__scroll-box">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  	    <path d="M0 0h24v24H0z" fill="none"></path>
  	    <path d="M11.9997 13.1716L7.04996     8.22186L5.63574 9.63607L11.9997 16L18.3637 9.63607L16.9495 8.22186L11.9997 13.1716Z" fill="rgba(28,28,30,1)">
  	    </path>
	  </svg>
    </div>

    <span class="main__scroll-text">Scroll</span>
  </a>
</div>
<style>
/* From Uiverse.io by ArturCodeCraft - Tags: button, scroll, scroll to bottom */
/* <reset-style> ============================ */
a {
  text-decoration: none;
}
/* <main-style> ============================ */
.main__scroll-text {
  color: rgba(28,28,30,1);
}

.main__action:hover .main__scroll-box {
  animation: scroll-down 3s infinite;
}

/* Animate scroll icon */
@keyframes scroll-down {
  0%, 100% {
    transform: translateY(0rem);
    opacity: 1;
  }

  35% {
    transform: translateY(1rem);
    opacity: 0;
  }

  70% {
    transform: translateY(-1rem);
    opacity: 0;
  }
}
</style>


================================================
FILE: Buttons/ArturCodeCraft_bad-mayfly-19.html
================================================
<div class="background">
  <button class="menu__icon">
    <span></span>
    <span></span>
    <span></span>
  </button>
</div>
<style>
/* From Uiverse.io by ArturCodeCraft - Tags: icon, button, menu, menuicon, menu button , hamburger menu */
/* <reset-style> ============================ */
button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}
/* ============================ */
/* <style for bg> ======== */
.background {
  border-radius: 16px;
  border: 1px solid #1a1a1a;
  background: rgba(74, 74, 74, 0.39);
  mix-blend-mode: luminosity;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(15px);
  width: 65px;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* <style for menu__icon> ======== */
.menu__icon {
  width: 32px;
  height: 32px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .4s;
}

.menu__icon span {
  width: 100%;
  height: 0.25rem;
  border-radius: 0.125rem;
  background-color: rgb(0, 122, 255);
  box-shadow: 0 .5px 2px 0 hsla(0, 0%, 0%, .2);
  transition: width .4s, transform .4s, background-color .4s;
}

.menu__icon :nth-child(1) {
  width: 75%;
}

.menu__icon :nth-child(2) {
  width: 50%;
}

.menu__icon:hover {
  transform: rotate(-90deg);
}

.menu__icon:hover span {
  width: .25rem;
  transform: translateX(10px);
  background-color: rgb(255, 59, 48);
}
</style>


================================================
FILE: Buttons/ArturCodeCraft_big-chipmunk-22.html
================================================
<div class="background">
  <button class="change-theme__icon">
    <span class="icon-sun-moon"></span>
    <span class="sun-rays">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </span>
  </button>
</div>
<style>
/* From Uiverse.io by ArturCodeCraft - Tags: icon, button, theme, theme-switch, menu, menuicon, menu button  */
/* <reset-style> ============================ */
button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}
/* ============================ */
/* <style for bg> ======== */
.background {
  border-radius: 16px;
  border: 1px solid #1a1a1a;
  background: rgba(74, 74, 74, 0.39);
  mix-blend-mode: luminosity;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(15px);
  width: 65px;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* <style for change-theme__icon> ======== */
.change-theme__icon {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* .icon-sun-moon */
.change-theme__icon .icon-sun-moon {
  width: 11.5px;
  height: 11.5px;
  border-radius: 100%;
  background-color: rgb(28, 28, 30);
  animation: ease reverse-change-theme .6s forwards;
  transition: background-color .4s;
  z-index: 10;
}

.change-theme__icon:hover .icon-sun-moon {
  animation: change-theme .4s forwards;
  background-color: #fff;
}

@keyframes change-theme {
  0% {
    width: 11.5px;
    height: 11.5px;
  }

  100% {
    width: 20px;
    height: 20px;
  }
}

@keyframes reverse-change-theme {
  0% {
    width: 20px;
    height: 20px;
  }

  50% {
    width: 10px;
    height: 10px;
  }

  100% {
    width: 11.5px;
    height: 11.5px;
  }
}

/* .icon-sun-moon:before */
.change-theme__icon .icon-sun-moon:before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: rgb(49,49,49);
  position: absolute;
  top: 2px;
  right: -2px;
  transform: translateX(100%) scale(.2);
  transition: transform .4s;
}

.change-theme__icon:hover .icon-sun-moon:before {
  transform: scale(1);
  transition: transform .4s .12s;
}

/* sun-rays */
.sun-rays {
  width: 22px;
  height: 22px;
  position: absolute;
}

.sun-rays span {
  width: 2px;
  height: 4px;
  border-radius: 2px;
  background-color: rgb(28, 28, 30);
  position: absolute;
}

/* ray */
.sun-rays span:nth-child(1) {
  left: 50%;
  transform: translateX(-50%);
}

.sun-rays span:nth-child(2) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.sun-rays span:nth-child(3) {
  top: 50%;
  left: 1px;
  transform: translateY(-50%) rotate(90deg);
}

.sun-rays span:nth-child(4) {
  top: 50%;
  right: 1px;
  transform: translateY(-50%) rotate(90deg);
}

.sun-rays span:nth-child(5) {
  top: 2px;
  right: 2.5px;
  transform: rotate(45deg);
}

.sun-rays span:nth-child(6) {
  bottom: 2px;
  left: 2.5px;
  transform: rotate(45deg);
}

.sun-rays span:nth-child(7) {
  top: 2px;
  left: 2.5px;
  transform: rotate(-45deg);
}

.sun-rays span:nth-child(8) {
  bottom: 2px;
  right: 2.5px;
  transform: rotate(-45deg);
}

.sun-rays {
  animation: reverse-sun-rays .6s forwards;
}

.change-theme__icon:hover .sun-rays {
  animation: ease sun-rays .4s forwards;
}

@keyframes sun-rays {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-45deg);
    opacity: 0;
  }
}

@keyframes reverse-sun-rays {
  0% {
    transform: rotate(-45deg);
  }

  50% {
    transform: rotate(8deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
</style>


================================================
FILE: Buttons/ArturCodeCraft_black-chicken-8.html
================================================
<a id="scroll-up" class="scroll-up" href="#">
	<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<path d="M0 0h24v24H0z" fill="none"></path>
		<path fill="rgba(255,255,255,1)" d="M11.9997 10.8284L7.04996 15.7782L5.63574 14.364L11.9997 8L18.3637 14.364L16.9495 15.7782L11.9997 10.8284Z">
		</path>
	</svg>
</a>
<style>
/* From Uiverse.io by ArturCodeCraft - Tags: button, scroll to top, scroll */
/* <reset-style> ============================ */
a {
  text-decoration: none;
}
/* <main-style> ============================ */
.scroll-up {
	/* position: fixed; */
  right: 3rem;
  bottom: -50%;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: rgba(29, 29, 31, 0.7);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: bottom .4s, transform .4s;
}

.scroll-up:hover {
  transform: translateY(-.25rem);
}

/* Show scroll-up */
._show-scroll {
  bottom: 3rem;
}

@media (max-width: 1199.98px) {
  .scroll-up {
    right: 1rem;
  }
}
</style>


================================================
FILE: Buttons/ArturCodeCraft_calm-dingo-44.html
================================================
<div class="background">
  <button class="menu__icon">
    <span></span>
    <span></span>
    <span></span>
  </button>
</div>
<style>
/* From Uiverse.io by ArturCodeCraft - Tags: icon, button, menuicon, menu button , hamburger menu */
/* <reset-style> ============================ */
button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}
/* ============================ */
/* <style for bg> ======== */
.background {
  border-radius: 16px;
  border: 1px solid #1a1a1a;
  background: rgba(74, 74, 74, 0.39);
  mix-blend-mode: luminosity;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(15px);
  width: 65px;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* <style for menu__icon> ======== */
.menu__icon {
  width: 32px;
  height: 32px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.menu__icon span {
  width: 100%;
  height: 0.125rem;
  border-radius: 0.125rem;
  background-color: rgb(0, 122, 255);
  box-shadow: 0 .5px 2px 0 hsla(0, 0%, 0%, .2);
  transition: transform .4s, background-color .4s, opacity .4s;
}

.menu__icon:hover span:nth-child(1) {
  background-color: rgb(255, 59, 48);
  transform: translateY(11px) rotate(-45deg);
}

.menu__icon:hover span:nth-child(2) {
  transform: translate(-50%);
  opacity: 0;
}

.menu__icon:hover span:nth-child(3) {
  background-color: rgb(255, 59, 48);
  transform: translateY(-11px) rotate(45deg);
}
</style>


================================================
FILE: Buttons/ArturCodeCraft_fresh-hound-11.html
================================================
<a href="#" class="menu__link">
  Hover me!
</a>
<style>
/* From Uiverse.io by ArturCodeCraft - Tags: button, links, btn */
/* <reset-style> ============================ */
a {
  text-decoration: none;
}
/* <main-style> ============================ */
.menu__link {
  color: #fff;
  line-height: 2;
  position: relative;
  padding-right: 4px;
}

.menu__link:hover {
  text-decoration: underline;
}

.menu__link::before {
  content: '';
  width: 6px;
  height: 6px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%) rotate(45deg);
}
</style>


================================================
FILE: Buttons/ArturCodeCraft_helpless-baboon-96.html
================================================
<button class="menu__icon">
</button>
<style>
/* From Uiverse.io by ArturCodeCraft - Tags: icon, apple, button, menu, menuicon, menu button , hamburger menu */
/* <reset-style> ============================ */
button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}
/* <main-style> ============================ */
.menu__icon {
  width: 2rem;
  height: 2rem;
  padding: .25rem;
  backdrop-filter: saturate(180%) blur(20px);
  background-color: rgb(29, 29, 31, .7);
  border: solid 1px rgba(66,66,69,0.7);
}

.menu__icon::before {
  display: block;
  content: "+";
  color: rgb(245, 245, 247);
  font-size: 1.125rem;
  font-weight: 400;
  transition: transform .3s ease-out;
  transform-origin: center;
}

.menu__icon:hover::before {
  transform: rotate(45deg) scale(1.08);
}
</style>


================================================
FILE: Buttons/ArturCodeCraft_horrible-mule-54.html
================================================
<a href="#" class="menu__link">Hover me!</a>
<style>
/* From Uiverse.io by ArturCodeCraft - Tags: button, links, btn */
/* <reset-style> ============================ */
a {
  text-decoration: none;
}
/* <main-style> ============================ */
.menu__link {
  color: #fff;
  line-height: 2;
  position: relative;
}

.menu__link::before {
  content: '';
  width: 0;
  height: 2px;
  border-radius: 2px;
  background-color: #fff;
  position: absolute;
  bottom: -.25rem;
  left: 50%;
  transition: width .4s, left .4s;
}

.menu__link:hover::before {
  width: 100%;
  left: 0;
}
</style>


================================================
FILE: Buttons/ArturCodeCraft_lazy-skunk-20.html
================================================
<button class="swallow__icon">
  <span></span>
</button>
<style>
/* From Uiverse.io by ArturCodeCraft - Tags: icon, apple, button, menu, menuicon, menu button , hamburger menu */
/* <reset-style> ============================ */
button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}
/* <main-style> ============================ */
.swallow__icon {
  width: 2rem;
  height: 2rem;
  padding: .25rem;
  background-color: rgb(29, 29, 31, .7);
  backdrop-filter: saturate(180%) blur(20px);
  border: solid 1px rgba(66,66,69,0.7);
  position: relative;
}

.swallow__icon span {
  width: 1.5rem;
  height: .563rem;
  position: absolute;
  top: calc(.25rem + .563rem - 1px);
  left: calc(.25rem - 1px);
  transition: transform 1s cubic-bezier(.86, 0, .07, 1),
              transform-origin 1s cubic-bezier(.86, 0, .07, 1);
}

.swallow__icon span:before,
.swallow__icon span:after {
  content: "";
  width: .75rem;
  height: .125rem;
  background-color: rgb(245, 245, 247);
  position: absolute;
  bottom: 0;
  transition: transform 1s cubic-bezier(.86, 0, .07, 1),
              transform-origin 1s cubic-bezier(.86, 0, .07, 1);
}

.swallow__icon span:before {
  right: 50%;
  border-radius: 2px 0 0 2px;
  transform-origin: 100% 100%;
  transform: rotate(40deg);
}

.swallow__icon span:after {
  left: 50%;
  border-radius: 0 2px 2px 0;
  transform-origin: 0 100%;
  transform: rotate(-40deg);
}

.swallow__icon:hover span {
  transform: translateY(-8px);
}

.swallow__icon:hover span:before {
  transform-origin: 100% 0;
  transform: rotate(-40deg);
}

.swallow__icon:hover span:after {
  transform-origin: 0 0;
  transform: rotate(40deg);
}
</style>


================================================
FILE: Buttons/ArturCodeCraft_new-dog-56.html
================================================
<button class="primary-button">
  Primary button
</button>
<style>
/* From Uiverse.io by ArturCodeCraft - Tags: button, hover, btn, hover effect, hoverme, hover button, diia, Primary button */
/* <reset-style> ============================ */
button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}
/* <main-style> ============================ */
.primary-button {
  min-width: 111px;
  height: 56px;
  border-radius: 40px;
  background: #000;
  padding: 16px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.32px;
  transition: background .2s ease-in-out, color .2s ease-in-out;
  position: relative;
}

.primary-button::before {
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: linear-gradient(69deg, #c3aab2 -4.77%, #9ec 46.72%, #80c0c8 90.23%, #4B8bfa 134.46%);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  transition: opacity .2s ease-in-out;
}

.primary-button:hover {
  background: transparent;
  color: #000;
}

.primary-button:hover::before {
  opacity: 1;
}
</style>


================================================
FILE: Buttons/ArturCodeCraft_silly-firefox-72.html
================================================
<button class="menu__icon">
  <span></span>
  <span></span>
</button>
<style>
/* From Uiverse.io by ArturCodeCraft - Tags: icon, apple, button, menuicon, menu button , hamburger menu */
/* <reset-style> ============================ */
button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}
/* <main-style> ============================ */
.menu__icon {
  width: 2rem;
  height: 2rem;
  padding: .25rem;
  background-color: rgb(29, 29, 31, .7);
  backdrop-filter: saturate(180%) blur(20px);
  border: solid 1px rgba(66,66,69,0.7);
  position: relative;
}

.menu__icon span {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: calc(.25rem - 1px);
  left: calc(.25rem - 1px);
  transition: transform .1806s cubic-bezier(.04,.04,.12,.96);
}

.menu__icon span:before {
  content: '';
  width: 1.5rem;
  height: .125rem;
  background-color: #fff;
  position: absolute;
  left: 0;
  transition: transform .1596s cubic-bezier(.52,.16,.52,.84) .1008s;
}

.menu__icon span:nth-child(1)::before {
  top: .625rem;
  transform: translateY(-3px);
}

.menu__icon span:nth-child(2)::before {
  bottom: .625rem;
  transform: translateY(3px);
}

.menu__icon:hover :nth-child(1),
.menu__icon:hover :nth-child(2) {
  transition: transform .3192s cubic-bezier(.04,.04,.12,.96) .1008s;
}

.menu__icon:hover :nth-child(1)::before,
.menu__icon:hover :nth-child(2)::before {
  transform: none;
  transition: transform .1806s cubic-bezier(.04,.04,.12,.96);
}

.menu__icon:hover :nth-child(1) {
  transform: rotate(45deg) translateY(1px);
}

.menu__icon:hover :nth-child(2) {
  transform: rotate(-45deg) translateY(-1px);
}
</style>


================================================
FILE: Buttons/ArturCodeCraft_witty-deer-63.html
================================================
<button class="menu__button">
  <span>Hover me!</span>
</button>
<style>
/* From Uiverse.io by ArturCodeCraft - Tags: button, links, btn */
/* <reset-style> ============================ */
button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}
/* <main-style> ============================ */
.menu__button {
  min-width: 62px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid #fff;
  background-color: transparent;
  transition: background-color .4s;
}

.menu__button:hover {
  background-color: #fff;
}

.menu__button span {
  color: #fff;
  line-height: 1;
  transition: color .4s;
}

.menu__button:hover span {
  color: #000;
}
</style>


================================================
FILE: Buttons/AyuuLima_modern-wasp-21.html
================================================
<button class="button">Button</button>

<style>
/* From Uiverse.io by AyuuLima  - Tags: simple, material design, neumorphism, animation, gradient, button */
.button {
  position: relative;
  width: 120px;
  height: 40px;
  background-color: rgb(0, 0, 0);
  display: flex;
  align-items: center;
  color: rgb(255, 255, 255);
  flex-direction: column;
  justify-content: center;
  border: none;
  padding: 20px;
  gap: 120px;
  border-radius: 10px;
  cursor: pointer;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 3px;
  top: -4px;
  margin: auto;
  width: -128px;
  height: -48px;
  border-radius: 10px;
  background: linear-gradient(-45deg, #10d32a 0%, rgb(119, 235, 235) 100%);
  z-index: -10;
  pointer-events: visiblePainted;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button::after {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #00ff22 0%, rgb(0, 250, 250) 100%);
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(15px);
}

.button:hover::after {
  filter: blur(40px);
}

.button:hover::before {
  transform: rotate(-180deg);
}

.button:active::before {
  scale: 0.7;
}

</style>
    

================================================
FILE: Buttons/Ayzen-Dev_empty-dog-31.html
================================================
<div class="button">
  <a href="#">Download</a>
  <b class="top">click to download</b>
  <b class="bottom">1.2MB .zip</b>
</div>
<style>
/* From Uiverse.io by Ayzen-Dev - Tags: blue, button, active, download */
.button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.button a {
  display: block;
  height: 50px;
  width: 200px;
  background: #00b7ea;
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
}

b {
  background: #222;
  display: block;
  height: 40px;
  width: 180px;
  margin: -50px 0 0 10px;
  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;
  position: absolute;
  z-index: -1;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.button a, b {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}

.button:hover .bottom {
  margin: -10px 0 0 10px;
}

.button a:active {
  background: #00b7ea;
  background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3));
  background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
  background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
  background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
  background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
}

.button:active .bottom {
  margin: -20px 0 0 10px;
}

.button:active .top {
  margin: -70px 0 0 10px;
}
</style>


================================================
FILE: Buttons/BHARGAVPATEL1244_great-catfish-18.html
================================================
<button> <span>Button</span>
</button>
<style>
/* From Uiverse.io by BHARGAVPATEL1244 - Tags: button */
button {
 outline: none;
 cursor: pointer;
 border: none;
 padding: 0.9rem 2rem;
 margin: 0;
 font-family: inherit;
 font-size: inherit;
 position: relative;
 display: inline-block;
 letter-spacing: 0.05rem;
 font-weight: 700;
 font-size: 17px;
 border-radius: 500px;
 overflow: hidden;
 background: #66ff66;
 color: ghostwhite;
}

button span {
 position: relative;
 z-index: 10;
 transition: color 0.4s;
}

button:hover span {
 color: black;
}

button::before,
button::after {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 0;
}

button::before {
 content: "";
 background: #000;
 width: 120%;
 left: -10%;
 transform: skew(30deg);
 transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

button:hover::before {
 transform: translate3d(100%, 0, 0);
}

</style>


================================================
FILE: Buttons/BHARGAVPATEL1244_wise-shrimp-88.html
================================================
<button class="space-button">
  <span>Explore space</span>
  <svg viewBox="0 0 24 24">
    <path d="M5.5 16.5l5-5-5-5"></path>
    <path d="M11 11h8v2h-8z"></path>
    <path d="M16.5 7.5l5-5-5-5"></path>
    <path d="M19 4v8h-2v-8z"></path>
  </svg>
</button>

<style>
/* From Uiverse.io by BHARGAVPATEL1244 - Tags: button */
.space-button {
  display: inline-block;
  background-color: #111;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 12px 32px;
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.space-button span {
  position: relative;
  z-index: 1;
}

.space-button svg {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  fill: #fff;
  transition: transform 0.3s ease;
}

.space-button:hover {
  background-color: #f8f8f8;
  color: #111;
}

.space-button:hover svg {
  transform: translateX(4px);
}

.space-button:active {
  background-color: #f94b4c;
  color: #fff;
}

</style>


================================================
FILE: Buttons/BachWorks_heavy-panda-60.html
================================================
<!-- From Uiverse.io by BachWorks  - Tags: button, tailwind, tailwindbutton, tailwindcss -->
<button
  class="flex items-center px-4 py-2 bg-gradient-to-r from-blue-500 via-blue-600 to-blue-500 text-white font-extrabold text-lg rounded-full shadow-2xl hover:from-blue-600 hover:via-blue-700 hover:to-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-70 active:bg-blue-800 active:shadow-inner transform hover:scale-110 transition duration-500 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed ml-4"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    stroke="currentColor"
    fill="none"
    class="w-8 h-8 mr-4 -ml-2 text-white animate-pulse"
  >
    <path
      d="M12 4v16m8-8H4"
      stroke-width="2"
      stroke-linejoin="round"
      stroke-linecap="round"
    ></path>
  </svg>
  Hover Me
</button>


    

================================================
FILE: Buttons/Baimyrzaev_foolish-mouse-95.html
================================================
<button>
    <span>Button</span>
    <div class="top"></div>
    <div class="left"></div>
    <div class="bottom"></div>
    <div class="right"></div>
</button>
<style>
/* From Uiverse.io by Baimyrzaev - Tags: button */
button {
  padding: 20px 60px;
  background-color: #000;
  border: none;
  font-size: 18px;
  position: relative;
  /* overflow: hidden; */
  transition: 500ms;
}

button span {
  color: gray;
  position: relative;
  transition: 500ms;
  transition-delay: 500ms;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
}

button:before {
  content: '';
  position: absolute;
  width: 0%;
  height: 0%;
  left: 50%;
  right: 50%;
  top: 50%;
  bottom: 50%;
  transition: 500ms;
  transition-delay: 500ms;
  background-color: red;
  box-shadow: 0 0 10px red,
   0 0 30px red, 
   0 0 50px red;
}

button div {
  transition: 500ms;
  position: absolute;
  background-color: red;
  box-shadow: 0 0 15px red, 0 0 30px red, 0 0 50px red;
}

button .top {
  width: 15px;
  height: 2px;
  top: 0;
  left: 0;
}

button .bottom {
  width: 15px;
  height: 2px;
  bottom: 0;
  right: 0;
}

button .left {
  width: 2px;
  height: 15px;
  top: 0;
  left: 0;
}

button .right {
  width: 2px;
  height: 15px;
  bottom: 0;
  right: 0;
}

button:hover {
  color: #000;
}

button:hover span {
  color: #000;
}

button:hover:before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

button:hover .top, 
button:hover .bottom {
  width: 100%;
}

button:hover .left,
button:hover .right {
  height: 100%;
}
</style>


================================================
FILE: Buttons/Balthasar42_evil-grasshopper-45.html
================================================
<button class="btn btn--primary">

  <span class="btn-inner">
    <span class="btn-label">
      to the galaxy
    </span>
    <span class="btn-blur" aria-hidden=""></span>
  </span>
  
</button>
<style>
/* From Uiverse.io by Balthasar42 - Tags: button */
.btn {
  --btn-gradient: var(--btn-gradient-from),var(--btn-gradient-to);
  border: 0 none;
  appearance: none;
  border-radius: 9999px;
  background-color: var(--btn-bg);
  box-shadow: 0 0 2px 2px var(--btn-shadow), 0 0 4px 4px var(--btn-shadow), 0 0 8px 8px var(--btn-shadow);
}

.btn,
.btn * {
  box-sizing: border-box;
}

.btn-inner {
  position: relative;
  border-radius: inherit;
  border: 1px solid transparent;
  font-size: 1rem;
  display: flex;
  align-items: center;
  min-width: 10rem;
  padding: 1.5rem 2rem;
  overflow: hidden;
  color: var(--btn-text-color);
}

.btn-label {
  position: absolute;
  bottom: 1px;
  left: 1px;
  right: 1px;
  top: 1px;
  border-radius: inherit;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--btn-bg);
  background-image: linear-gradient(to bottom,var(--btn-gradient));
}

.btn-blur {
  position: absolute;
  bottom: 1px;
  left: 1px;
  right: 1px;
  top: 1px;
  z-index: 0;
  transform: scaleX(3.5);
  filter: blur(6px);
}

.btn-blur:before {
  --gradient: var(--btn-color-from), var(--btn-color), var(--btn-color-to);
  --transition: 5s;
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: conic-gradient(var(--gradient));
  animation: turn var(--transition) linear infinite;
}

.btn:hover,
.btn:active {
  transition: transform .5s ease-in-out 0s;
  transform: translateY(-1px);
}

.btn:active .btn-blur:before {
  --transition: 2s;
}

.btn--primary {
  --btn-bg: #111111;
  --btn-gradient-from: #111111;
  --btn-gradient-to: rgba(255, 255, 255, 0.1);
  --btn-text-color: #ffffff;
  --btn-color: #5f17d4;
  --btn-color-from: #c6a3ff;
  --btn-color-to: #966ed8;
  --btn-shadow: #5f17d42d;
}

@keyframes turn {
  0% {
    transform: translateY(-50%) rotate(0deg)
  }

  to {
    transform: translateY(-50%) rotate(1turn)
  }
}
</style>


================================================
FILE: Buttons/Bartek1238462_dry-parrot-99.html
================================================
<button class="button">
  <p class="text-inside">HOVER ME</p>
</button>
<style>
/* From Uiverse.io by Bartek1238462 - Tags: button, hover, neon, hover effect */
.button {
  width: 120px;
  height: 40px;
  background-color: rgb(0, 0, 0);
  border: 3px solid rgb(0, 0, 0);
  color: white;
  border-radius: 25px;
  transition: 1.5s;
}

text-inside. {
  font-weight: bold;
}

.button:hover {
  box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px
,rgba(240, 46, 170, 0.4) 5px -5px, rgba(240, 46, 170, 0.3) 10px -10px, rgba(240, 46, 170, 0.2) 15px -15px, rgba(240, 46, 170, 0.1) 20px -20px, rgba(240, 46, 170, 0.05) 25px -25px
,rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px
,rgba(240, 46, 170, 0.4) -5px -5px, rgba(240, 46, 170, 0.3) -10px -10px, rgba(240, 46, 170, 0.2) -15px -15px, rgba(240, 46, 170, 0.1) -20px -20px, rgba(240, 46, 170, 0.05) -25px -25px;
  background-color: rgba(240, 46, 170, 0.4);
  color: rgb(56, 0, 36);
  border: 2px solid white;
  transform: scale(1.2,1.2);
}
</style>


================================================
FILE: Buttons/Bastiennnn_strong-lionfish-94.html
================================================
<button class="button">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="svg"
    height="25px"
    viewBox="0 0 24 24"
    fill="none"
  >
    <path
      d="M14.2199 21.63C13.0399 21.63 11.3699 20.8 10.0499 16.83L9.32988 14.67L7.16988 13.95C3.20988 12.63 2.37988 10.96 2.37988 9.78001C2.37988 8.61001 3.20988 6.93001 7.16988 5.60001L15.6599 2.77001C17.7799 2.06001 19.5499 2.27001 20.6399 3.35001C21.7299 4.43001 21.9399 6.21001 21.2299 8.33001L18.3999 16.82C17.0699 20.8 15.3999 21.63 14.2199 21.63ZM7.63988 7.03001C4.85988 7.96001 3.86988 9.06001 3.86988 9.78001C3.86988 10.5 4.85988 11.6 7.63988 12.52L10.1599 13.36C10.3799 13.43 10.5599 13.61 10.6299 13.83L11.4699 16.35C12.3899 19.13 13.4999 20.12 14.2199 20.12C14.9399 20.12 16.0399 19.13 16.9699 16.35L19.7999 7.86001C20.3099 6.32001 20.2199 5.06001 19.5699 4.41001C18.9199 3.76001 17.6599 3.68001 16.1299 4.19001L7.63988 7.03001Z"
      fill="#000000"
    ></path>
    <path
      d="M10.11 14.4C9.92005 14.4 9.73005 14.33 9.58005 14.18C9.29005 13.89 9.29005 13.41 9.58005 13.12L13.16 9.53C13.45 9.24 13.93 9.24 14.22 9.53C14.51 9.82 14.51 10.3 14.22 10.59L10.64 14.18C10.5 14.33 10.3 14.4 10.11 14.4Z"
      fill="#000000"
    ></path>
  </svg>
  Send Message
</button>

<style>
/* From Uiverse.io by Bastiennnn  - Tags: simple, animation, button, message, svg */
.button {
  cursor: pointer;
  width: 200px;
  height: 60px;
  background-color: white;
  font-size: medium;
  font-weight: bold;
  box-shadow: 0 5px 10px rgb(122, 122, 122);
  border-radius: 10px;
  border: 2px solid gray;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button:hover {
  box-shadow: 0 5px 10px rgb(58, 58, 58);
  transform: translateY(-10px);
}

.button:active {
  transform: scale(0.95);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.svg {
  padding-right: 8px;
  fill: none;
  height: 25px;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover .svg {
  animation: flyAround 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes flyAround {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(20px, -100px) rotate(-300deg) scale(1);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

</style>
    

================================================
FILE: Buttons/Bastimans_itchy-dragon-81.html
================================================
<button>Don't Click</button>
<style>
/* From Uiverse.io by Bastimans - Tags: button */
button {
  background-color: #ffc600;
 /* sets the background color of the button to yellow */
  color: #000000;
 /* sets the text color of the button to black */
  padding: 12px 24px;
 /* adds some padding to the button */
  border: none;
 /* remove the default border */
  border-radius: 30px;
 /* rounds the corners of the button */
  font-size: 18px;
 /* sets the font size of the button text */
  font-weight: bold;
 /* sets the font weight of the button text to bold */
  cursor: pointer;
 /* changes the cursor to a pointer when hovering over the button */
  text-shadow: 2px 2px 3px #ffc600;
 /* adds a subtle shadow to the button text */
  box-shadow: 2px 2px 3px #ffc600;
 /* adds a subtle shadow to the button */
  transition: all 0.2s ease-in-out;
 /* adds transition effect when hovering over the button */
}

button:hover {
  background-color: #000000;
 /* changes the background color of the button to black when hovered */
  color: #ffc600;
 /* changes the text color of the button to yellow when hovered */
  transform: scale(1.1);
 /* increases the size of the button slightly when hovered */
}

button:active {
  transform: scale(0.97);
}

</style>


================================================
FILE: Buttons/Bodyhc_great-walrus-67.html
================================================
<button class="button"><span>Button</span></button>

<style>
/* From Uiverse.io by Bodyhc  - Tags: button, buttons, simple button, hover button, #button, 3d button, button hover effect , 2d button */
.button,
.button *,
.button :after,
.button :before,
.button:after,
.button:before {
  border: 0 solid;
  box-sizing: border-box;
}
.button {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.button:disabled {
  cursor: default;
}
.button:-moz-focusring {
  outline: auto;
}
.button svg {
  display: block;
}
.button [hidden] {
  display: none;
}
.button {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}
.button span {
  mix-blend-mode: difference;
}
.button:after,
.button:before {
  background: linear-gradient(
    90deg,
    #fff 25%,
    transparent 0,
    transparent 50%,
    #fff 0,
    #fff 75%,
    transparent 0
  );
  content: "";
  inset: 0;
  position: absolute;
  transform: translateY(var(--progress, 100%));
  transition: transform 0.2s ease;
}
.button:after {
  --progress: -100%;
  background: linear-gradient(
    90deg,
    transparent 0,
    transparent 25%,
    #fff 0,
    #fff 50%,
    transparent 0,
    transparent 75%,
    #fff 0
  );
  z-index: -1;
}
.button:hover:after,
.button:hover:before {
  --progress: 0;
}

</style>
    

================================================
FILE: Buttons/Bodyhc_itchy-dragonfly-35.html
================================================
<button class="button">
  CLICK ME
</button>
<style>
/* From Uiverse.io by Bodyhc - Tags: button, bootsrap button, business, 3d button */
button {
  --color: #560bad;
  background-color: #fff;
  font-family: inherit;
  display: inline-block;
  width: 8em;
  height: 2.6em;
  line-height: 2.5em;
  margin: 20px;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--color);
  transition: color .5s;
  z-index: 1;
  font-size: 17px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  color: var(--color);
}

button:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--color);
  height: 150px;
  width: 200px;
  border-radius: 50px;
  bottom: 100%;
  right: 100%;
  transition: .8s ease;
}

button:hover {
  color: #fff;
}

button:hover:before {
  bottom: -30px;
  left: -30px;
}

button:active:before {
  background: #3a0ca3;
  transition: background 2s;
}
</style>


================================================
FILE: Buttons/Bodyhc_orange-puma-60.html
================================================
<button>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
    <path
      d="M0 256L28.5 28c2-16 15.6-28 31.8-28H228.9c15 0 27.1 12.1 27.1 27.1c0 3.2-.6 6.5-1.7 9.5L208 160H347.3c20.2 0 36.7 16.4 36.7 36.7c0 7.4-2.2 14.6-6.4 20.7l-192.2 281c-5.9 8.6-15.6 13.7-25.9 13.7h-2.9c-15.7 0-28.5-12.8-28.5-28.5c0-2.3 .3-4.6 .9-6.9L176 288H32c-17.7 0-32-14.3-32-32z"
    ></path>
  </svg>
  Join Now
</button>

<style>
/* From Uiverse.io by Bodyhc  - Tags: button, buttons, simple button, hover button, #button, tailwindbutton, 3d button, button hover effect  */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 20px;
  background-image: linear-gradient(
    90deg,
    #fa7fe6 0%,
    #ff8e61 50%,
    #fa7fe6 100%
  );
  border: 2px solid #9d098431;
  color: #000000;
  font-weight: 600;
  padding: 20px 40px; /* increase padding to make button bigger */
  cursor: pointer;
}
button svg {
  font-size: 24px; /* increase font size to make lightning bolt bigger */
  margin-right: 10px;
  width: 30px;
  height: 20px;
  color: black;
}
button:hover {
  background-image: linear-gradient(
    90deg,
    #ff8e61 0%,
    #fa7fe6 50%,
    #fe9b74 100%
  );
}

</style>
    

================================================
FILE: Buttons/Bodyhc_rare-ladybug-6.html
================================================
<button class="button">
ALT
</button>
<style>
/* From Uiverse.io by Bodyhc - Tags: button, bootsrap button */
.button {
  --key-text-color: #969faf;
  --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);
  --docsearch-key-gradient: linear-gradient(-225deg,#d5dbe4,#f8f8f8);
  background: var(--docsearch-key-gradient);
  border-radius: 5px;
  box-shadow: var(--docsearch-key-shadow);
  color: var(--key-text-color);
  height: 2.5em;
  text-align: center;
  padding: 0.6em;
  margin: 0 0.6em;
  display: inline-block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1em;
  min-width: 1em;
  line-height: 1em;
  user-select: none;
}

</style>


================================================
FILE: Buttons/Bodyhc_rude-otter-33.html
================================================
<!-- From Uiverse.io by Bodyhc - Tags: button, bootsrap button, butoon -->
<button class="text-3x italic hover:not-italic font-black tracking-wider	bg-fuchsia-600 hover:bg-fuchsia-400 rounded-full border-4 px-10 py-4 border-double shadow-inner shadow-2xl shadow-lg hover:shadow-fuchsia-600 md:shadow-xl w-30">
  BODYHC
</button>



================================================
FILE: Buttons/Bodyhc_sharp-seahorse-46.html
================================================
<button class="button"> 
  <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon"> 
  <path fill="#fff" d="M767.99994 585.142857q75.995429 0 129.462857 53.394286t53.394286 129.462857-53.394286 129.462857-129.462857 53.394286-129.462857-53.394286-53.394286-129.462857q0-6.875429 1.170286-19.456l-205.677714-102.838857q-52.589714 49.152-124.562286 49.152-75.995429 0-129.462857-53.394286t-53.394286-129.462857 53.394286-129.462857 129.462857-53.394286q71.972571 0 124.562286 49.152l205.677714-102.838857q-1.170286-12.580571-1.170286-19.456 0-75.995429 53.394286-129.462857t129.462857-53.394286 129.462857 53.394286 53.394286 129.462857-53.394286 129.462857-129.462857 53.394286q-71.972571 0-124.562286-49.152l-205.677714 102.838857q1.170286 12.580571 1.170286 19.456t-1.170286 19.456l205.677714 102.838857q52.589714-49.152 124.562286-49.152z"></path> 
  </svg> 
  <span class="share">SHARE </span> 
  </button>

<style>
/* From Uiverse.io by Bodyhc - Tags: button */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(66, 13, 240);
  width: 200px;
  height: 50px;
  border-radius: 10px;
  font-size: 18px;
  outline: 3px solid #270092;
  cursor: pointer;
  transition: ease-out .5s;
}

.button:hover {
  width: 180px;
  height: 60px;
  outline-offset: 4px;
  transform: scale(1.3) rotate(2deg);
  background-color: blue;
  box-shadow: 5px 20px #cdcbd4
}

.icon {
  color: #270092;
  margin-right: 5px;
}

.share {
  margin-left: 5px;
  color: #fff;
}


</style>


================================================
FILE: Buttons/Bodyhc_smart-puma-31.html
================================================
<button class="send-button">
  <div class="send">
    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M16.1 260.2c-22.6 12.9-20.5 47.3 3.6 57.3L160 376V479.3c0 18.1 14.6 32.7 32.7 32.7c9.7 0 18.9-4.3 25.1-11.8l62-74.3 123.9 51.6c18.9 7.9 40.8-4.5 43.9-24.7l64-416c1.9-12.1-3.4-24.3-13.5-31.2s-23.3-7.5-34-1.4l-448 256zm52.1 25.5L409.7 90.6 190.1 336l1.2 1L68.2 285.7zM403.3 425.4L236.7 355.9 450.8 116.6 403.3 425.4z"
      ></path>
    </svg>
    Send Message
  </div>
</button>

<style>
/* From Uiverse.io by Bodyhc  - Tags: button, simple button, hover button, #button, tailwindbutton, 3d button, button hover effect , 2d button */
.send-button {
  display: flex;
  height: 60px;
  width: 180px;
  align-items: center;
  justify-content: center;
  border: 2px solid #b7b7b7;
  padding: 2px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-family: "Arial", sans-serif;
  font-size: 16px;
  color: #000;
  cursor: pointer;
  transition: all 0.3s ease;
}

.send {
  display: flex;
  width: 180px;
  height: 100%;
  border-radius: 50px;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  box-shadow: inset -3px 1px 10px #eff1ef, inset -3px 1px 10px #eff1ef;
  transition: all 0.3s ease;
}

.send-button svg {
  margin-right: 10px;
  width: 15px;
  height: 15px;
  transition: all 0.3s ease;
}

.send-button:hover svg {
  transform: rotate(50deg);
}

</style>
    

================================================
FILE: Buttons/Bodyhc_splendid-chicken-97.html
================================================
<button class="button">Button</button>

<style>
/* From Uiverse.io by Bodyhc  - Tags: button, buttons, simple button, hover button, #button, 3d button, button hover effect , 2d button */
button {
  position: relative;
  border: 1px solid #725ac1;
  outline: none;
  background-color: transparent;
  padding: 15px 30px;
  border-radius: 30px;
  z-index: 2;
  cursor: pointer;
  color: #ffff;
  overflow: hidden;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

button::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background-color: #725ac1;
  filter: blur(5px);
  z-index: -1;
  transition: width 0.9s ease-out, height 0.9s ease-out,
    background-color 0.3s ease-out;
  border-radius: 50%;
}

button:hover::before {
  border-radius: 20px;
  width: 300px;
  height: 200px;
  background-color: #725ac1;
}

</style>
    

================================================
FILE: Buttons/Boosterrohit_smooth-swan-20.html
================================================
<button class="box">
  <p class="text-button">Button</p>
</button>

<style>
/* From Uiverse.io by Boosterrohit - Tags: active, about me */
.box {
  position: relative;
  width: 120px;
  height: 45px;
  overflow: hidden;
  border: none;
  background-color: rgb(218, 203, 177);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border-top-left-radius: 20px;
  cursor: pointer;
  border-bottom-right-radius: 20px;
  box-shadow: 0 0 10px rgb(104, 134, 218);
}

.box::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 200px;
  margin-top: -92px;
  background: linear-gradient(#00ccff,#d400d4);
  animation: amm 4s linear infinite;
}

@keyframes amm {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.text-button {
  position: relative;
  font-size: 1.2rem;
  font-weight: bold;
  z-index: 1;
}

.box::after {
  content: "";
  position: absolute;
  inset: 4px;
  background-color: rgb(218, 203, 177);
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
</style>


================================================
FILE: Buttons/Botwe-Felix5820_big-baboon-67.html
================================================
<button> Squeeze me
</button>
<style>
/* From Uiverse.io by Botwe-Felix5820 - Tags: button, squishy */
button {
 height: 2.8em;
 width: 9em;
 background: transparent;
 -webkit-animation: jello-horizontal 0.9s both;
 animation: jello-horizontal 0.9s both;
 border: 2px solid #016DD9;
 outline: none;
 color: #016DD9;
 font-size: 17px;
}

button:hover {
 background: #016DD9;
 color: #ffffff;
 animation: squeeze3124 0.9s both;
}

@keyframes squeeze3124 {
 0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 }

 30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
 }

 40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
 }

 50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
 }

 65% {
  -webkit-transform: scale3d(0.95, 1.05, 1);
  transform: scale3d(0.95, 1.05, 1);
 }

 75% {
  -webkit-transform: scale3d(1.05, 0.95, 1);
  transform: scale3d(1.05, 0.95, 1);
 }

 100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 }
}

</style>


================================================
FILE: Buttons/Botwe-Felix5820_nasty-deer-97.html
================================================
<button> Shake
</button>
<style>
/* From Uiverse.io by Botwe-Felix5820 - Tags: button, shake */
button {
 height: 3em;
 width: 8em;
 border: none;
 border-radius: 10em;
 background: #016DD9;
 font-size: 17px;
 color: #ffffff;
 font-family: inherit;
 font-weight: 500;
}

button:hover {
 animation: shake3856 0.3s linear infinite both;
}

@keyframes shake3856 {
 0% {
  -webkit-transform: translate(0);
  transform: translate(0);
 }

 20% {
  -webkit-transform: translate(-2px, 2px);
  transform: translate(-2px, 2px);
 }

 40% {
  -webkit-transform: translate(-2px, -2px);
  transform: translate(-2px, -2px);
 }

 60% {
  -webkit-transform: translate(2px, 2px);
  transform: translate(2px, 2px);
 }

 80% {
  -webkit-transform: translate(2px, -2px);
  transform: translate(2px, -2px);
 }

 100% {
  -webkit-transform: translate(0);
  transform: translate(0);
 }
}

</style>


================================================
FILE: Buttons/Brian-Pob_spotty-treefrog-35.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by Brian-Pob - Tags: button, css animation, button hover effect  */
button {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: none;
  border-radius: 5px;
  padding: 1rem 2rem;
  font-size: 20px;
  font-family: sans-serif;
  background-color: purple;
  color: white;
  transition: all .7s ease-in-out;
}

button:hover {
  color: purple;
}

button::before {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  width: 0;
  height: 100%;
  content: "";
  background-color: white;
  transition: all 700ms ease-in-out;
}

button:hover::before {
  left: unset;
  right: 0;
  width: 100%;
  transform: rotate(180deg);
}
</style>


================================================
FILE: Buttons/BurgiSimon_cuddly-monkey-7.html
================================================
<button class="button-3d">
  <span class="button-text">CLICK ME</span>
</button>

<style>
/* From Uiverse.io by BurgiSimon  - Website: https://codepen.io/bepctak/pen/ojXjzR - Name: Artur - Tags: simple, 3d, white, button, rounded, light, css, 3d button */
.button-3d {
  position: relative;
  top: -6px;
  border: 1.5px rgb(0, 0, 0) inset;
  border-radius: 10px;
  transition: all 40ms ease-out;
  margin-top: 1px;
  margin-bottom: 1px;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  color: #666666;

  box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.1) inset,
    0 8px 0 0 #f5f5f5, 0 8px 8px 1px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}

.button-text {
  font-family: sans-serif;
  font-weight: 0;
  font-size: 16px;
  letter-spacing: 3px;
  color: #000000;
  border-bottom: 0px solid;
}

.button-3d:hover {
  border: 2px rgb(0, 0, 0) inset;
}

.button-3d:active {
  top: 1px;
  color: #666666;
  box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    0 1px 3px 1px rgba(136, 136, 136, 0.479);
  background-color: #fff;
}

</style>
    

================================================
FILE: Buttons/BurgiSimon_strange-hound-0.html
================================================
<div class="div">
  <button class="button">
    <span class="span"> HOVER ME </span>
  </button>
</div>

<style>
/* From Uiverse.io by BurgiSimon  - Tags: flashy, 3d, white, gradient, button, hover, smooth, neon */
.button {
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 20px;
  background-color: #e8e8e8;
  border: 1.6px solid #e2e2e2;
  box-shadow: 6px 6px 10px #c5c5c5, -6px -6px 12px #ffffff;
  transform: skewX(-5deg);
  position: relative;
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  z-index: -1;
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  border-radius: 30px;
  opacity: 0;
  transition: opacity 0.5s, filter 0.5s;
}

.button:hover::before {
  filter: blur(10px);
  opacity: 1;
  animation: animateBorder 8s linear infinite;
  border: 4px solid rgb(255, 255, 255);
}

@keyframes animateBorder {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}

.span {
  color: black;
  letter-spacing: 3px;
  font-size: 18px;
}

.button:active {
  box-shadow: 5px 5px 12px #cfcece, -4px -4px 12px #fcfcfc;
}

</style>
    

================================================
FILE: Buttons/BurgiSimon_wonderful-seahorse-35.html
================================================
<button class="button font">Hold Me</button>

<style>
/* From Uiverse.io by BurgiSimon  - Tags: simple, green, gradient, button, glow, html, css, click animation */
.button {
  cursor: pointer;
  padding: 10px 20px;
  font-size: 16px;
  color: black;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  outline: none;
  box-shadow: 0 6px 7px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.5); /* Hinzufügen eines inneren Schattens für Tiefe */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  background-image: linear-gradient(
    to top,
    rgba(206, 255, 255, 0.75),
    rgba(216, 255, 244, 0.65)
  );
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 0%;
}

.button:hover {
  box-shadow: 0 7px 9px rgba(0, 0, 0, 0.15),
    inset 0 3px 5px rgba(255, 255, 255, 0.6);
}

@keyframes fillButtonAndPress {
  0% {
    background-size: 100% 0%;
    transform: translateY(0);
    border: 2px solid rgba(255, 255, 255, 0.6);
  }
  100% {
    background-size: 100% 100%;
    transform: translateY(2px);
    border: 1px solid rgba(205, 235, 218, 0.6);
  }
}

.button:active {
  animation: fillButtonAndPress 0.4s ease forwards;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.7);
}

.font {
  font-family: sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

</style>
    

================================================
FILE: Buttons/CPC23_short-gecko-89.html
================================================
<div class="links">
  <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" id="instagram" class="icons-social-media"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" id="twitch" class="icons-social-media"><path d="M391.17,103.47H352.54v109.7h38.63ZM285,103H246.37V212.75H285ZM120.83,0,24.31,91.42V420.58H140.14V512l96.53-91.42h77.25L487.69,256V0ZM449.07,237.75l-77.22,73.12H294.61l-67.6,64v-64H140.14V36.58H449.07Z"></path></svg>
<svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg" id="youtube" class="icons-social-media"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg></div>
<style>
/* From Uiverse.io by CPC23 - Tags: button, hover effect, hoverme, hover button */
.icons-social-media {
  align-items: center;
  margin-top: 10px;
  padding: 5px;
  width: 32px;
  cursor: pointer !important;
  transition: 300ms all ease-in-out;
  position: relative;
}

.icons-social-media:hover {
  translate: -0px -10px;
}

#instagram,
    #youtube,#twitch {
  transition: 300ms all ease-in-out;
  clip-path: circle(65%);
}

#instagram:hover {
  background-color: rgb(221, 157, 189);
}

#youtube {
  height: 35px;
}

#youtube:hover {
  background-color: rgb(241, 96, 96);
}

#twitch:hover {
  background-color: rgb(196, 143, 245);
}
</style>


================================================
FILE: Buttons/CYBWEBALI_unlucky-insect-96.html
================================================
<button class="btn">
  <svg width="40" height="40" fill="#0092E4" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" id="github">
    <path d="M12,2.2467A10.00042,10.00042,0,0,0,8.83752,21.73419c.5.08752.6875-.21247.6875-.475,0-.23749-.01251-1.025-.01251-1.86249C7,19.85919,6.35,18.78423,6.15,18.22173A3.636,3.636,0,0,0,5.125,16.8092c-.35-.1875-.85-.65-.01251-.66248A2.00117,2.00117,0,0,1,6.65,17.17169a2.13742,2.13742,0,0,0,2.91248.825A2.10376,2.10376,0,0,1,10.2,16.65923c-2.225-.25-4.55-1.11254-4.55-4.9375a3.89187,3.89187,0,0,1,1.025-2.6875,3.59373,3.59373,0,0,1,.1-2.65s.83747-.26251,2.75,1.025a9.42747,9.42747,0,0,1,5,0c1.91248-1.3,2.75-1.025,2.75-1.025a3.59323,3.59323,0,0,1,.1,2.65,3.869,3.869,0,0,1,1.025,2.6875c0,3.83747-2.33752,4.6875-4.5625,4.9375a2.36814,2.36814,0,0,1,.675,1.85c0,1.33752-.01251,2.41248-.01251,2.75,0,.26251.1875.575.6875.475A10.0053,10.0053,0,0,0,12,2.2467Z"></path>
  </svg>
</button>
<style>
/* From Uiverse.io by CYBWEBALI - Tags: neumorphism, icon, button, github, btn, cool btn, buttons, rounded button, #ColorfulButton */
.btn {
  display: grid;
  place-items: center;
  background: #e3edf7;
  padding: 1.4em;
  border-radius: 10px;
  box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
	      -6px -6px 10px -1px rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0);
  cursor: pointer;
  transition: transform 0.5s;
}

.btn:hover {
  box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
	      inset -4px -4px 6px -1px rgba(255,255,255,0.7),
	      -0.5px -0.5px 0px rgba(255,255,255,1),
	      0.5px 0.5px 0px rgba(0,0,0,0.15),
	      0px 12px 10px -10px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.1);
  transform: translateY(0.5em);
}

.btn svg {
  transition: transform 0.5s;
}

.btn:hover svg {
  transform: scale(0.9);
  fill: #333333;
}


</style>


================================================
FILE: Buttons/CaptainToy_witty-ladybug-99.html
================================================
<button class="send-message-button">
  <span class="icon">✈️</span> <span class="text">Send Message</span>
</button>

<style>
/* From Uiverse.io by CaptainToy  - Tags: button, buttons, simple button, hover button, bounce animation */
.send-message-button {
  background: #fff;
  border: 1px solid black;
  border-radius: 10px;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.send-message-button .icon {
  font-size: 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: relative;
  left: 0;
}

.send-message-button .text {
  transition: opacity 0.3s ease;
}

.send-message-button:hover .icon {
  transform: translateX(200%);
}

.send-message-button:hover .text {
  opacity: 0;
}

.send-message-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.send-message-button::after {
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s ease;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
}

.send-message-button:hover::after {
  opacity: 1;
}

.send-message-button::before {
  content: "";
  position: absolute;
  width: 300%;
  height: 300%;
  top: 50%;
  left: 50%;
  background: rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
}

.send-message-button:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

</style>
    

================================================
FILE: Buttons/Carlos-vargs_breezy-horse-95.html
================================================
<button class="button">
  <span class="text">send message</span>
  <span class="icon"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" data-icon="paper-plane" width="20px" aria-hidden="true"><path d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z" fill="currentColor"></path></svg></span>
</button>
<style>
/* From Uiverse.io by Carlos-vargs - Tags: button, hover, animated */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  border-radius: 36px;
  font-weight: 700;
  height: 54px;
  font-size: 16px;
  padding-inline: 20px;
  background-color: transparent;
  color: #fff;
  text-transform: uppercase;
  overflow: hidden;
  text-align: center;
  transition: all .25s ease-in-out;
  z-index: 1;
  border: none;
}

.button:is(:hover, :focus)::before {
  transform: translateX(0%);
}

.text {
  white-space: nowrap;
  line-height: 1.2;
  padding-inline-end: 44px;
  z-index: 2;
}

/* change the width and height to 100% when you use it in your layout */
.button::after {
  content: '';
  position: absolute;
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  border: 1px solid #FFB400;
  border-radius: 36px;
  z-index: 2;
}

.button::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #FFB400;
  z-index: 1;
  left: -2px;
  transform: translateX(90%);
  transition: all .3s ease-out;
}

.icon {
  display: inherit;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 54px;
  height: 54px;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  background-color: #FFB400;
  z-index: 2;
}


</style>


================================================
FILE: Buttons/Carlos-vargs_pink-ladybug-22.html
================================================
<button class="button">
  <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="26px"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="currentColor"></path></svg>
</button>
<style>
/* From Uiverse.io by Carlos-vargs - Tags: button, animated, video, play */
.button {
  display: flex;
  justify-content: center;
  color: #fff;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background: linear-gradient(30deg, rgb(255, 130, 0) 20%, rgb(255, 38, 0) 80%);
  transition: all 0.3s ease-in-out 0s;
  box-shadow: rgba(193, 244, 246, 0.698) 0px 0px 0px 0px;
  animation: 1.2s cubic-bezier(0.8, 0, 0, 1) 0s infinite normal none running pulse;
  align-items: center;
  border: 0;
}

.button:is(:hover, :focus) {
  transform: scale(1.2);
}

@keyframes pulse {
  100% {
    box-shadow: 0 0 0 45px rgba(193,244,246,0);
  }
}



</style>


================================================
FILE: Buttons/Cevorob_heavy-grasshopper-82.html
================================================
<button>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path style="fill:#363636" d="M17.1,21a1,1,0,0,1-1-.945C16.036,18.754,16,17.39,16,16a1,1,0,0,1,2,0c0,1.354.035,2.681.1,3.945A1,1,0,0,1,17.159,21,.5.5,0,0,1,17.1,21Z"></path><path style="fill:#363636" d="M46.9,21a.5.5,0,0,1-.055,0,1,1,0,0,1-.945-1.053c.069-1.264.1-2.591.1-3.945a1,1,0,0,1,2,0c0,1.39-.036,2.754-.106,4.055A1,1,0,0,1,46.9,21Z"></path><path style="fill:#ffbd4a" d="M47.544,24.117A1,1,0,0,0,46.551,23H43a4.005,4.005,0,0,1-.28,1,1.994,1.994,0,0,1-2.056.973A1.947,1.947,0,0,1,39.3,24a3.786,3.786,0,0,1-.3-1H17.449a1,1,0,0,0-.993,1.117A57.092,57.092,0,0,0,19.546,37c.388,0,.732-.009,1.048-.029L20.6,37h4.9a2.5,2.5,0,0,1,0,5,2.5,2.5,0,0,1,0,5,2.5,2.5,0,0,1,0,5H24.3a2.145,2.145,0,0,0-1.515,0h-.038v.01a6.155,6.155,0,0,1-1.029.2,50.273,50.273,0,0,1-1.024,6.1A3,3,0,0,0,23.611,62H40.389a3,3,0,0,0,2.92-3.685A50.2,50.2,0,0,1,42,47c0-3.026.921-5.641,1.988-8.668a.975.975,0,0,0,.05-.324A9.1,9.1,0,0,1,43.045,38H38a3,3,0,0,1,0-6h6.987c.006-.023.012-.048.018-.07.306.036.639.055,1.016.062A54.206,54.206,0,0,0,47.544,24.117Z"></path><path style="fill:#363636" d="M19.421,11a.981.981,0,0,1-.4-.084A1,1,0,0,1,18.506,9.6,6,6,0,0,1,24,6a5.742,5.742,0,0,1,1.58.222A6.99,6.99,0,0,1,37.426,4.585,5.939,5.939,0,0,1,40,4a6.006,6.006,0,0,1,6,6,1,1,0,0,1-2,0,3.991,3.991,0,0,0-6.29-3.271,1,1,0,0,1-1.43-.3,4.991,4.991,0,0,0-9.121,1.344,1,1,0,0,1-1.41.652A3.993,3.993,0,0,0,20.338,10.4,1,1,0,0,1,19.421,11Z"></path><path style="fill:#363636" d="M47,17a1,1,0,0,1-1-1,1,1,0,0,0-1-1h-.17a.831.831,0,0,0-.83.83,1,1,0,0,1-2,0A2.834,2.834,0,0,1,44.83,13H45a3,3,0,0,1,3,3A1,1,0,0,1,47,17Z"></path><path style="fill:#363636" d="M32,20c-.071,0-.143,0-.215,0A4.089,4.088,0,0,1,28,15.83a.831.831,0,0,0-.83-.83H19a1,1,0,0,0-1,1,1,1,0,0,1-2,0,3,3,0,0,1,3-3h8.17A2.834,2.834,0,0,1,30,15.83,2.118,2.118,0,0,0,31.891,18,2,2,0,0,0,34,16a3,3,0,0,1,6,0,1,1,0,0,1-2,0,1,1,0,0,0-2,0,4.017,4.017,0,0,1-1.246,2.9A3.968,3.968,0,0,1,32,20Z"></path><path style="fill:#363636" d="M25.5,43h-5a3.5,3.5,0,0,1,0-7h5a3.5,3.5,0,0,1,0,7Zm-5-5a1.5,1.5,0,0,0,0,3h5a1.5,1.5,0,0,0,0-3Z"></path><path style="fill:#363636" d="M25.5,48h-5a3.5,3.5,0,0,1,0-7h5a3.5,3.5,0,0,1,0,7Zm-5-5a1.5,1.5,0,0,0,0,3h5a1.5,1.5,0,0,0,0-3Z"></path><path style="fill:#363636" d="M25.5,53h-5a3.5,3.5,0,0,1,0-7h5a3.5,3.5,0,0,1,0,7Zm-5-5a1.5,1.5,0,0,0,0,3h5a1.5,1.5,0,0,0,0-3Z"></path><path style="fill:#363636" d="M45,39H38a4,4,0,0,1,0-8h8a1,1,0,0,1,0,2H38a2,2,0,0,0,0,4h7a1,1,0,0,1,0,2Z"></path><path style="fill:#363636" d="M58,37H51a1,1,0,0,1-1-1,3,3,0,0,0-3-3H46a1,1,0,0,1,0-2h1a5.008,5.008,0,0,1,4.9,4H58a1,1,0,0,1,0,2Z"></path><path style="fill:#363636" d="M47,55H46a1,1,0,0,1,0-2h1a3,3,0,0,0,3-3,1,1,0,0,1,1-1h7a1,1,0,0,1,0,2H51.9A5.008,5.008,0,0,1,47,55Z"></path><path style="fill:#363636" d="M41,26a3.152,3.152,0,0,1-.493-.04A3.084,3.084,0,0,1,38,22.893V16a1,1,0,0,1,2,0v6.893a1.083,1.083,0,0,0,.825,1.092A1,1,0,0,0,42,23V15.83a1,1,0,1,1,2,0V23a3,3,0,0,1-3,3Z"></path></svg>
  <span> Hold my beer
  </span>
</button>
<style>
/* From Uiverse.io by Cevorob - Tags: button */
button {
 border: 0;
 background: ghostwhite;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 1em 1em 1em 3em;
 position: relative;
 overflow: hidden;
 font-size: 17px;
 font-family: inherit;
 border-radius: 12px;
 box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

button svg {
 position: absolute;
 left: .4em;
 width: 40px;
 height: 40px;
 transform: rotateY(-180deg);
 transition: transform .4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

button:hover svg {
 transform: rotateY(-180deg) translateX(-.25em);
}

button:active {
 transform: scale(0.98);
}
</style>


================================================
FILE: Buttons/Cevorob_serious-shrimp-82.html
================================================
<button>
  <span> GAME ON
  </span>
</button>
<style>
/* From Uiverse.io by Cevorob - Tags: button, game, crosshair */
button {
 position: relative;
 height: 50px;
 padding: 0 30px;
 border: 2px solid #000;
 background: #e8e8e8;
 user-select: none;
 white-space: nowrap;
 transition: all .05s linear;
 font-family: inherit;
}

button:before, button:after {
 content: "";
 position: absolute;
 background: #e8e8e8;
 transition: all .2s linear;
}

button:before {
 width: calc(100% + 6px);
 height: calc(100% - 16px);
 top: 8px;
 left: -3px;
}

button:after {
 width: calc(100% - 16px);
 height: calc(100% + 6px);
 top: -3px;
 left: 8px;
}

button:hover {
 cursor: crosshair;
}

button:active {
 transform: scale(0.95);
}

button:hover:before {
 height: calc(100% - 32px);
 top: 16px;
}

button:hover:after {
 width: calc(100% - 32px);
 left: 16px;
}

button span {
 font-size: 15px;
 z-index: 3;
 position: relative;
 font-weight: 600;
}
</style>


================================================
FILE: Buttons/ChRotsides_polite-penguin-53.html
================================================
<!-- From Uiverse.io by ChRotsides - Tags: simple, button, hover -->
<button class="cursor-pointer text-white font-bold shadow-md hover:scale-[1.2] shadow-purple-400 rounded-full px-5 py-2 bg-gradient-to-bl from-purple-500 to-purple-800">
  Button
</button>



================================================
FILE: Buttons/ChanduOffl_helpless-chipmunk-35.html
================================================
<button class="button">
  <svg
    viewBox="0 0 24 24"
    height="48"
    width="48"
    xmlns="http://www.w3.org/2000/svg"
    class="send-icon"
  >
    <path
      d="m16.066 10.184l-3.89-1.795c-2.154-.994-3.231-1.491-3.725-.982c-.493.509.038 1.572 1.101 3.698c.22.44.33.659.33.895s-.11.456-.33.895c-1.063 2.126-1.594 3.19-1.1 3.698c.493.51 1.57.012 3.725-.982l3.889-1.795c1.698-.784 2.548-1.176 2.548-1.816c0-.64-.85-1.032-2.549-1.816"
      fill-opacity="0.4"
      fill="currentColor"
    ></path>
    <path
      d="M8.895 11.684L8.174 9.52a1 1 0 0 0-.707-.654l-1.78-.445a.8.8 0 0 0-.91 1.134l1.111 2.22a.5.5 0 0 1 0 .448l-1.11 2.22a.8.8 0 0 0 .91 1.134l1.78-.445a1 1 0 0 0 .706-.654l.72-2.163a1 1 0 0 0 0-.632"
      fill="currentColor"
    ></path>
  </svg>
  Send Message
</button>

<style>
/* From Uiverse.io by ChanduOffl  - Tags: icon, animation, white, button, message, btn, buttons, hover button */
.button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #fefefe;
  border: 1px solid #dcdcdc;
  border-radius: 12px;

  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 0;
  outline: 2px solid #fafafa;
  box-shadow: 9px 9px 44px #cecece3a, -9px -9px 44px #d3d3d33d,
    inset 0 0 0 2px rgba(192, 192, 192, 0.25);
}

.button::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 30px;
  background: linear-gradient(
    0deg,
    #fbfbfb 0%,
    #fafafa 5%,
    #f7f7f7 72%,
    #f2f2f2 86%,
    #f0f0f0 100%
  );
  box-shadow: inset 0 2px 7px rgba(143, 143, 143, 0.16);
  transition: all 0.3s ease;
  z-index: -1;
  margin: 2px;
}

.button:hover::before {
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  margin: 5px;
}

.button:focus {
  outline: 2px solid #fefefe;
  box-shadow: 9px 9px 44px #cecece3a, -9px -9px 44px #d3d3d33d,
    inset 0 0 0 2px rgba(192, 192, 192, 0.5);
}

.send-icon {
  margin-right: 5px;
  transition: transform 0.3s ease;
}

.button:hover .send-icon {
  transform: translateX(7px);
}

.button:focus .send-icon {
  transform: rotate(-40deg);
}

</style>
    

================================================
FILE: Buttons/ChanduOffl_itchy-vampirebat-74.html
================================================
<button class="button">
  <svg
    class="send-icon"
    xmlns="http://www.w3.org/2000/svg"
    width="48"
    height="48"
    viewBox="0 0 24 24"
  >
    <path
      fill="currentColor"
      fill-opacity="0.4"
      d="m16.066 10.184l-3.89-1.795c-2.154-.994-3.231-1.491-3.725-.982c-.493.509.038 1.572 1.101 3.698c.22.44.33.659.33.895s-.11.456-.33.895c-1.063 2.126-1.594 3.19-1.1 3.698c.493.51 1.57.012 3.725-.982l3.889-1.795c1.698-.784 2.548-1.176 2.548-1.816c0-.64-.85-1.032-2.549-1.816"
    ></path>
    <path
      fill="currentColor"
      d="M8.895 11.684L8.174 9.52a1 1 0 0 0-.707-.654l-1.78-.445a.8.8 0 0 0-.91 1.134l1.111 2.22a.5.5 0 0 1 0 .448l-1.11 2.22a.8.8 0 0 0 .91 1.134l1.78-.445a1 1 0 0 0 .706-.654l.72-2.163a1 1 0 0 0 0-.632"
    ></path>
  </svg>
  Send Message
</button>

<style>
/* From Uiverse.io by ChanduOffl  - Tags: icon, animation, white, button, message, btn, buttons, hover button */
.button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #fefefe;
  border: 1px solid #dcdcdc;
  border-radius: 12px;

  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 0;
  outline: 2px solid #fafafa;
  box-shadow: 9px 9px 44px #cecece3a, -9px -9px 44px #d3d3d33d,
    inset 0 0 0 2px rgba(192, 192, 192, 0.25);
}

.button::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 30px;
  background: linear-gradient(
    0deg,
    #fbfbfb 0%,
    #fafafa 5%,
    #f7f7f7 72%,
    #f2f2f2 86%,
    #f0f0f0 100%
  );
  box-shadow: inset 0 2px 7px rgba(143, 143, 143, 0.16);
  transition: all 0.3s ease;
  z-index: -1;
  margin: 2px;
}

.button:hover::before {
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  margin: 5px;
}

.button:focus {
  outline: 2px solid #fefefe;
  box-shadow: 9px 9px 44px #cecece3a, -9px -9px 44px #d3d3d33d,
    inset 0 0 0 2px rgba(192, 192, 192, 0.5);
}

.send-icon {
  margin-right: 5px;
  transition: transform 0.3s ease;
}

.button:hover .send-icon {
  transform: translateX(7px);
}

.button:focus .send-icon {
  transform: rotate(-40deg);
}

</style>
    

================================================
FILE: Buttons/Cherie05_yellow-bobcat-58.html
================================================
<!-- From Uiverse.io by Cherie05  - Tags: simple, button, message, btn, #button, tailwind, tailwindbutton -->
<button
  class="cursor-pointer flex gap-x-2 items-center font-semibold bg-white p-1 text-lg rounded-xl border-2 border-gray-300 px-1"
>
  <div
    class="flex gap-x-2 items-center justify-center shadow-inner drop-shadow-sm rounded-full bg-white p-3 px-5"
  >
    <span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="17"
        height="17"
        viewBox="0 0 14 14"
      >
        <path
          fill="none"
          stroke="black"
          stroke-linecap="round"
          stroke-linejoin="round"
          d="m5.812 11l2.178 2.168a1.1 1.1 0 0 0 1.05.3a1.119 1.119 0 0 0 .809-.74l3.576-10.72A1.118 1.118 0 0 0 11.987.57L1.267 4.147a1.119 1.119 0 0 0-.74.859a1.099 1.099 0 0 0 .3 1l2.737 2.737l-.09 3.466zM13.106.79L3.564 8.742"
        ></path>
      </svg>
    </span>
    Send Message
  </div>
</button>


    

================================================
FILE: Buttons/Cobp_horrible-bird-48.html
================================================
<button class="button">
  <span class="bg">
    Join Today
    <svg width="1.2em" height="1.2em" viewBox="0 0 48 48">
      <path
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="4"
        d="M42 24H6m24-12l12 12l-12 12"
      ></path>
    </svg>
  </span>
</button>

<style>
/* From Uiverse.io by Cobp  - Tags: button */
.button {
  position: relative;
  color: white;
  background-image: linear-gradient(0deg, #8a38cd 0%, #f3b0ff 100%);
  padding: 0.1rem;
  border: none;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-15deg);
  cursor: pointer;
  box-shadow:
    -3px 3px 0px 1px rgb(76, 6, 123),
    -4px 4px 4px 1px rgb(76, 6, 123),
    -12px 12px 12px 4px rgb(63, 19, 92, 0.5),
    -18px 18px 16px 8px rgb(63, 19, 92, 0.1);
  gap: 0.4rem;
  overflow: hidden;
  transition: all 0.3s ease;
  transform-origin: left;
}
.bg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: larger;
  padding: 1rem;
  gap: 0.4rem;
  border-radius: 0.65rem;
  background-color: #bd76f6;
  box-shadow:
    inset 3px -4px 8px rgb(119, 36, 185, 0.5),
    inset 0px -2px 2px rgb(119, 36, 185, 0.5);
  transition: all 0.3s ease;
}
.button:hover {
  transform: rotate(0deg);
  box-shadow:
    0px 6px 0px rgb(76, 6, 123),
    0px 8px 4px rgb(76, 6, 123);
}
.button:active {
  transform: translateY(4px);
  box-shadow: 0px 4px 4px rgb(76, 6, 123);
}
.button:active .bg {
  background-color: #9c5fce;
}

</style>
    

================================================
FILE: Buttons/Cobp_wet-mayfly-67.html
================================================
<button class="button">
  <span class="text">
    <svg viewBox="0 0 24 24" height="22px" width="22px">
      <g fill="none">
        <path
          d="m18.636 15.67l1.716-5.15c1.5-4.498 2.25-6.747 1.062-7.934c-1.187-1.187-3.436-.438-7.935 1.062L8.33 5.364C4.7 6.574 2.885 7.18 2.37 8.067a2.717 2.717 0 0 0 0 2.73c.515.888 2.33 1.493 5.96 2.704c.584.194.875.291 1.119.454c.236.158.439.361.597.597c.163.244.26.535.454 1.118c1.21 3.63 1.816 5.446 2.703 5.962a2.72 2.72 0 0 0 2.731 0c.887-.516 1.492-2.331 2.703-5.962Z"
          stroke-width="1.5"
          stroke="currentColor"
        ></path>
        <path
          d="M16.212 8.848a.75.75 0 0 0-1.055-1.066zm-5.55 5.488l5.55-5.488l-1.055-1.066l-5.55 5.488z"
          fill="currentColor"
        ></path>
      </g>
    </svg>
    Send Message
  </span>
</button>

<style>
/* From Uiverse.io by Cobp  - Tags: material design, 3d, button, rounded, light */
.button {
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  outline: 2px solid rgba(225, 225, 225, 0.9);
  padding: 4px;
  border: 3px solid #bfbfbf;
  border-radius: 12px;
  box-shadow: 0px 30px 50px 10px rgba(0, 0, 0, 0.2);
}
.text {
  padding: 16px 10px;
  display: flex;
  aling-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 50px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1),
    inset 0px 5px 20px rgba(0, 0, 0, 0.1);
}

</style>
    

================================================
FILE: Buttons/CodeGame2010_fuzzy-bear-92.html
================================================
<button> Enter Room
    <svg viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" fill-rule="evenodd"></path>
    </svg>
</button>
<style>
/* From Uiverse.io by CodeGame2010 - Tags: button */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  border-radius: 50px;
  border: 0;
  outline: 0;
  font-size: 18px;
  background: #08f;
  color: #fff;
}

svg {
  margin: 0 0 0 10px;
}

button:hover svg {
  margin: 0 0 0 25px;
  transition: 0.3s;
}

button:not(:hover) svg {
  transition: 0.3s;
}

button:active {
  transform: scale(0.9, 0.9);
  transition: 200ms;
}

button:not(:active) {
  transition: 200ms;
}
</style>


================================================
FILE: Buttons/Codecite_angry-bullfrog-58.html
================================================
<button class="btn">
  <span>Get started</span>
</button>
<style>
/* From Uiverse.io by Codecite - Tags: gradient, button, round */
.btn {
  --fancy-button-gradient-0: #8d49fd;
  --fancy-button-gradient-50: #7f56f3;
  --fancy-button-gradient-100: #5691f3;
  --fancy-button-inner-shadow-top: rgba(233, 209, 255, 0.2);
  --fancy-button-inner-shadow-top-lg: rgba(9, 12, 60, 0.1);
  --fancy-button-inner-shadow-bottom: rgba(137, 222, 246, 0.3);
  --fancy-button-shine-top: #e9d1ff;
  --fancy-button-shine-bottom: #adfff9;
  font-family: 'Poppins';
  font-weight: 500;
  font-size: 15px;
  line-height: 21px;
  text-shadow: 0px 0.5px 0.5px rgba(0, 0, 0, 0.2);
  padding: 0;
  margin: 0;
  appearance: none;
  border: none;
  outline: none;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  z-index: 1;
  border-radius: 25px;
  color: #fff;
  background-image: linear-gradient(to bottom, var(--fancy-button-gradient-0) 0%, var(--fancy-button-gradient-50) 50%, var(--fancy-button-gradient-100) 100%);
  box-shadow: 0px 4px 12px rgba(9, 12, 60, 0.15), 0px 2px 8px rgba(9, 12, 60, 0.15), 0px 1px 3px var(--fancy-button-inner-shadow-top-lg), inset 0px 1px 1px var(--fancy-button-inner-shadow-top), inset 0px -1px 3px var(--fancy-button-inner-shadow-bottom);
}

.btn:before, .btn:after {
  content: '';
  position: absolute;
  border-radius: inherit;
  will-change: transform;
}

.btn:before {
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--fancy-button-shine-top);
  width: 96px;
  height: 6px;
  top: -3px;
  opacity: 0.6;
  filter: blur(6px);
  transition: opacity 0.25s;
}

.btn:after {
  inset: 0;
  background-size: cover;
  z-index: 2;
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.btn span {
  display: block;
  padding: 12px 24px;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(to bottom, var(--fancy-button-shine-top), transparent 8px);
  background-position: 0 -6px;
  background-repeat: no-repeat;
  z-index: 1;
}

.btn span:before, .btn span:after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: var(--fancy-button-shine-bottom);
  transition: opacity 0.25s, transform 0.25s;
  will-change: transform;
}

.btn span:before {
  width: 92px;
  height: 8px;
  bottom: -4px;
  opacity: 0.75;
  filter: blur(6px);
}

.btn span:after {
  width: 112px;
  height: 1px;
  bottom: 0;
  opacity: 0.9;
  filter: blur(1px);
}

.btn:hover span:before {
  opacity: 0.8;
}

.btn:hover span:before {
  transform: translateX(-50%) scale(1.25);
}

.btn:hover span:after {
  opacity: 1;
}
</style>


================================================
FILE: Buttons/Codecite_dry-fish-68.html
================================================
<div class="button">
  <a href="#" class="anchor">
    <span>Download CV</span>
  </a>
</div>
<style>
/* From Uiverse.io by Codecite - Tags: button */
.anchor {
  text-decoration: none;
  color: #fff;
  display: inline-block;
  font-family: sans-serif;
  font-weight: 600;
  border-radius: 50px;
  border: 2px solid #ed553b;
  padding: 14px 40px 13px;
  overflow: hidden;
  position: relative;
}

.anchor:hover {
  color: #4e484a;
}

.button a::before {
  position: absolute;
  content: "";
  z-index: 0;
  background-color: #ed553b;
  left: -5px;
  right: -5px;
  bottom: -5px;
  height: 111%;
  transition: all .3s ease;
}

.button a:hover::before {
  height: 11%;
}

.button span {
  position: relative;
  z-index: 2;
  transition: all .3s ease;
}
</style>


================================================
FILE: Buttons/Codecite_evil-ape-86.html
================================================
 <div class="icon-conatiner">
    
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 19 21" height="21px" width="19px">
      <title>Group</title>
      <g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="Page-1">
        <g transform="translate(-142.000000, -122.000000)" id="Artboard">
          <g transform="translate(142.000000, 122.000000)" id="Group">
            <path fill="#C4FFE4" id="Rectangle-Copy" d="M3.4,4 L11.5,4 L11.5,4 L16,8.25 L16,17.6 C16,19.4777681 14.4777681,21 12.6,21 L3.4,21 C1.52223185,21 6.74049485e-16,19.4777681 0,17.6 L0,7.4 C2.14128934e-16,5.52223185 1.52223185,4 3.4,4 Z"></path>
            <path fill="#85EBBC" id="Rectangle" d="M6.4,0 L12,0 L12,0 L19,6.5 L19,14.6 C19,16.4777681 17.4777681,18 15.6,18 L6.4,18 C4.52223185,18 3,16.4777681 3,14.6 L3,3.4 C3,1.52223185 4.52223185,7.89029623e-16 6.4,0 Z"></path>
            <path fill="#64B18D" id="Path-2" d="M12,0 L12,5.5 C12,6.05228475 12.4477153,6.5 13,6.5 L19,6.5 L19,6.5 L12,0 Z"></path>
          </g>
        </g>
      </g>
    </svg>
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 19 21" height="21px" width="19px">
      <title>Group</title>
      <g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="Page-1">
        <g transform="translate(-142.000000, -122.000000)" id="Artboard">
          <g transform="translate(142.000000, 122.000000)" id="Group">
            <path fill="#C4FFE4" id="Rectangle-Copy" d="M3.4,4 L11.5,4 L11.5,4 L16,8.25 L16,17.6 C16,19.4777681 14.4777681,21 12.6,21 L3.4,21 C1.52223185,21 6.74049485e-16,19.4777681 0,17.6 L0,7.4 C2.14128934e-16,5.52223185 1.52223185,4 3.4,4 Z"></path>
            <path fill="#85EBBC" id="Rectangle" d="M6.4,0 L12,0 L12,0 L19,6.5 L19,14.6 C19,16.4777681 17.4777681,18 15.6,18 L6.4,18 C4.52223185,18 3,16.4777681 3,14.6 L3,3.4 C3,1.52223185 4.52223185,7.89029623e-16 6.4,0 Z"></path>
            <path fill="#64B18D" id="Path-2" d="M12,0 L12,5.5 C12,6.05228475 12.4477153,6.5 13,6.5 L19,6.5 L19,6.5 L12,0 Z"></path>
          </g>
        </g>
      </g>
    </svg>
  </div>
<div class="text">long press me</div>
<style>
/* From Uiverse.io by Codecite - Tags: icon, button, copy */
.icon-conatiner {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 15px;
  box-shadow: 20px 20px 15px 0 #ababab4d;
  cursor: pointer;
}

.icon-conatiner svg {
  width: 50px;
  height: auto;
}

.icon-conatiner svg:last-child {
  position: absolute;
}

.icon-conatiner:active {
  animation: press 0.2s 1 linear;
}

.icon-conatiner:active svg:last-child {
  animation: bounce 0.2s 1 linear;
}

.text {
  color: #666;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
  user-select: none;
}

@keyframes press {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.92);
  }

  to {
    transform: scale(1);
  }
}

@keyframes bounce {
  50% {
    transform: rotate(5deg) translate(20px, -50px);
  }

  to {
    transform: scale(0.9) rotate(10deg) translate(50px, -80px);
    opacity: 0;
  }
}

</style>


================================================
FILE: Buttons/Codecite_fluffy-bear-28.html
================================================
<button class="btn"><span>Button</span></button>
<style>
/* From Uiverse.io by Codecite - Tags: button, hover, btn, hover effect */
.btn {
  border: 0 solid;
  cursor: pointer;
  font-family: system-ui;
  font-size: 100%;
  background: linear-gradient(90deg, blue, red);
  border-radius: 999px;
  font-weight: 900;
  padding: 1.8rem 5rem;
  position: relative;
  text-transform: uppercase;
}

.btn span {
  background: #1e293b;
  border-radius: 999px;
  color: #fff;
  display: grid;
  inset: 5px;
  place-items: center;
  position: absolute;
  transition: background 0.3s;
}

.btn:hover span {
  background: none;
}
</style>


================================================
FILE: Buttons/Codecite_modern-pig-84.html
================================================
<button class="btn">Hover</button>
<style>
/* From Uiverse.io by Codecite - Tags: simple, gradient, button, clean */
.btn {
  transition: all 0.3s ease-in-out;
  font-family: "Dosis", sans-serif;
}

.btn {
  width: 150px;
  height: 60px;
  border-radius: 50px;
  background-image: linear-gradient(135deg, #feb692 0%, #ea5455 100%);
  box-shadow: 0 20px 30px -6px rgba(238, 103, 97, 0.5);
  outline: none;
  cursor: pointer;
  border: none;
  font-size: 24px;
  color: white;
}

.btn:hover {
  transform: translateY(3px);
  box-shadow: none;
}

.btn:active {
  opacity: 0.5;
}
</style>


================================================
FILE: Buttons/Coderlab05_honest-cougar-76.html
================================================

<button class="button" role="button">Hover Me</button>

<style>
/* From Uiverse.io by Coderlab05 - Source: Coderlab05 - Tags: button, #button */
.button {
  all: unset;
  width: 100px;
  height: 30px;
  font-size: 16px;
  background: transparent;
  border: none;
  position: relative;
  color: #f0f0f0;
  cursor: pointer;
  z-index: 1;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button::after,
.button::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -99999;
  transition: all .4s;
}

.button::before {
  transform: translate(0%, 0%);
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,#ff0e5e,rgb(15, 159, 255));
  border-radius: 10px;
}

.button::after {
  transform: translate(10px, 10px);
  width: 35px;
  height: 35px;
  background: #ffffff15;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 50px;
}

.button:hover::before {
  transform: translate(5%, 20%);
  width: 110%;
  height: 110%;
}

.button:hover::after {
  border-radius: 10px;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
}

.button:active::after {
  transition: 0s;
  transform: translate(0, 5%);
}
</style>


================================================
FILE: Buttons/Cornerstone-04_bitter-impala-54.html
================================================
<button>
    <span class="box">
        Hover!
    </span>
</button>
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: button */
.box {
  width: 140px;
  height: auto;
  float: left;
  transition: .5s linear;
  position: relative;
  display: block;
  overflow: hidden;
  padding: 15px;
  text-align: center;
  margin: 0 5px;
  background: transparent;
  text-transform: uppercase;
  font-weight: 900;
}

.box:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
  box-sizing: border-box;
  transform: translateX(100%);
}

.box:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  border-top: 4px solid transparent;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  transform: translateX(-100%);
}

.box:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.box:hover:before {
  border-color: #262626;
  height: 100%;
  transform: translateX(0);
  transition: .3s transform linear, .3s height linear .3s;
}

.box:hover:after {
  border-color: #262626;
  height: 100%;
  transform: translateX(0);
  transition: .3s transform linear, .3s height linear .5s;
}

button {
  color: black;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border: none;
  background: transparent;
}
</style>


================================================
FILE: Buttons/Cornerstone-04_chatty-eel-89.html
================================================
<button>
    Button
</button>
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: button */
button {
  position: relative;
  background: none;
  border: solid 1px #121212;
  transition: linear 250ms;
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
}

button:is(:hover,:focus) {
  color: #fff;
}

button::after {
  position: absolute;
  content: '';
  inset: 0;
  z-index: -1;
  background-color: #121212;
  transform-origin: left;
  transform: scaleX(0);
  transition: linear 250ms;
}

button:is(:hover, :focus)::after {
  transform: scale(1);
}
</style>


================================================
FILE: Buttons/Cornerstone-04_helpless-cheetah-32.html
================================================
<button><span>Hover</span></button>
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: button */
button {
  cursor: pointer;
  background: transparent;
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  outline: none;
  border: 2px solid #0f0;
  margin: 40px;
  width: 150px;
  height: 60px;
  text-transform: uppercase;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: 2px;
  color: #fff;
  -webkit-box-reflect: below 0px linear-gradient(transparent, #0002);
  transition: 0.45s;
  transition-delay: 0s;
}

button:hover {
  transition-delay: 1.5s;
  color: #000;
  box-shadow: 0 0 10px #0f0,
                0 0 20px #0f0,
                0 0 40px #0f0, 
                0 0 80px #0f0, 
                0 0 100px #0f0;
}

button span {
  position: relative;
  z-index: 100;
}

button::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: #0f0;
  box-shadow: 5px -8px 0 #0f0, 
              5px 8px 0 #0f0;
  transition: width 0.5s, 
              left 0.5s, 
              height 0.5s, 
              box-shadow 0.5s;
  transition-delay: 1s, 0.5s, 0s, 0s;
}

button:hover::before {
  width: 60%;
  height: 100%;
  /* right: -2px; */
  left: -2px;
  box-shadow: 5px 0 0 #0f0, 
              5px 0 0 #0f0;
  transition-delay: 0s, 0.5s, 1s, 1s;
}

button::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: #0f0;
  box-shadow: -5px -8px 0 #0f0, 
              -5px 8px 0 #0f0;
  transition: width 0.5s, right 0.5s, height 0.5s, box-shadow 0.5s;
  transition-delay: 1s, 0.5s, 0s, 0s;
}

button:hover::after {
  width: 60%;
  height: 102%;
  right: -2px;
  box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0;
  transition-delay: 0s, 0.5s, 1s, 1s;
}

</style>


================================================
FILE: Buttons/Cornerstone-04_rude-snake-92.html
================================================
<button>
    Hover
</button>
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: button */
button {
  display: flex;
  align-items: center;
  color: #000;
  background: none;
  border: none;
  padding: 12px 18px;
  position: relative;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 700;
  font-family: monospace;
  transition: linear .3s;
}

button:hover {
  color: #fff;
}

button::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(calc(100% + 4px));
  width: 45px;
  height: 45px;
  background-color: #dc143c;
  border-radius: 50px;
  transition: transform .25s .25s cubic-bezier(0, 0, .5, 2), width .25s cubic-bezier(0, 0, .5, 2);
  z-index: -1;
}

button:hover::before {
  width: 100%;
  transform: translateY(-50%) translateX(-18px);
  transition: transform .25s cubic-bezier(0,0,.5,2);
}
</style>


================================================
FILE: Buttons/Creatlydev_dangerous-donkey-67.html
================================================
<button class="button">
            <span class="btn__icon">
                <svg stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <path fill="none" d="M0 0h24v24H0z" stroke="none"></path>
                    <path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1"></path>
                    <path d="M9 15l3 -3l3 3"></path>
                    <path d="M12 12l0 9"></path>
                </svg>
            </span>
            <span class="btn__text">Upload</span>
        </button>
<style>
/* From Uiverse.io by Creatlydev - Tags: neumorphism, button, simple button */
.button {
  --bg: linear-gradient(180deg,
            hsla(0, 0%, 100%, .1),
            hsla(0, 0%, 100%, 0)),
        hsl(128, 52%, 45%);
  box-shadow: 0 1px 2px #25114f66, 0 0 0 1px hsla(128, 50%, 45%, 0.761);
  background-color: transparent;
  border: none;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem;
  cursor: pointer;
  padding-right: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--bg);
  white-space: nowrap;
  border-radius: 6px;
  border: 1px solid #fff3;
}
</style>


================================================
FILE: Buttons/Creatlydev_dull-chicken-81.html
================================================
<!-- From Uiverse.io by Creatlydev - Tags: button, hover effect, click effect, tailwind, tailwindbutton -->
<button class="shadow shadow-red-300 cursor-pointer overflow-hidden text-white bg-red-600 px-4 py-3 group active:shadow-green-200 focus:outline-none rounded flex items-center justify-center relative gap-4">
  
  <span class="group-hover:-translate-x-40 transition-transform duration-200">REMOVE</span>

  <div class="w-0.5 h-6 bg-red-800 group-hover:-translate-x-40 transition-transform duration-200"></div>

  <div class="svg-wrapper group-hover:-translate-x-11 transition-transform duration-200">
    <svg class="w-6 h-6" stroke="currentColor" stroke-width="4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M6 18L18 6M6 6l12 12" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
  </div>

  <div class="svg-wrapper group-active:bg-green-600 group-active:flex hidden absolute w-full h-full flex items-center justify-center">
    <svg class="w-6 h-6" stroke="currentColor" stroke-width="4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4.5 12.75l6 6 9-13.5" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>

  </div>

</button>



================================================
FILE: Buttons/Creatlydev_fresh-goose-83.html
================================================
<button class="button">
  <p class="button__text">
    <span style="--index: 0;">A</span>
    <span style="--index: 1;">W</span>
    <span style="--index: 2;">E</span>
    <span style="--index: 3;">S</span>
    <span style="--index: 4;">O</span>
    <span style="--index: 5;">M</span>
    <span style="--index: 6;">E</span>
    <span style="--index: 7;"> </span>
    <span style="--index: 8;">C</span>
    <span style="--index: 9;">S</span>
    <span style="--index: 10;">S</span>
    <span style="--index: 11;"> </span>
    <span style="--index: 12;">B</span>
    <span style="--index: 13;">U</span>
    <span style="--index: 14;">T</span>
    <span style="--index: 15;">T</span>
    <span style="--index: 16;">O</span>
    <span style="--index: 17;">N</span>
  </p>

  <div class="button__circle">
    <svg
      viewBox="0 0 14 15"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="button__icon"
      width="14"
    >
      <path
        d="M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z"
        fill="currentColor"
      ></path>
    </svg>

    <svg
      viewBox="0 0 14 15"
      fill="none"
      width="14"
      xmlns="http://www.w3.org/2000/svg"
      class="button__icon button__icon--copy"
    >
      <path
        d="M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z"
        fill="currentColor"
      ></path>
    </svg>
  </div>
</button>

<style>
/* From Uiverse.io by Creatlydev  - Tags: button, arrow, button, text, circular, modern, purple, interactive, css, awesome */
.button {
  cursor: pointer;
  border: none;
  background: #7808d0;
  color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: grid;
  place-content: center;
  transition:
    background 300ms,
    transform 200ms;
  font-weight: 600;
}

.button__text {
  position: absolute;
  inset: 0;
  animation: text-rotation 8s linear infinite;

  > span {
    position: absolute;
    transform: rotate(calc(19deg * var(--index)));
    inset: 7px;
  }
}

.button__circle {
  position: relative;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: #fff;
  color: #7808d0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button__icon--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

.button:hover {
  background: #000;
  transform: scale(1.05);
}

.button:hover .button__icon {
  color: #000;
}

.button:hover .button__icon:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}

.button:hover .button__icon--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}

@keyframes text-rotation {
  to {
    rotate: 360deg;
  }
}

</style>
    

================================================
FILE: Buttons/Creatlydev_grumpy-crab-66.html
================================================
<button class="button">
  <svg
    stroke-linejoin="round"
    stroke-linecap="round"
    fill="none"
    stroke="currentColor"
    stroke-width="1.5"
    viewBox="0 0 24 24"
    height="40"
    width="40"
    class="button__icon"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path fill="none" d="M0 0h24v24H0z" stroke="none"></path>
    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
    <path d="M7 11l5 5l5 -5"></path>
    <path d="M12 4l0 12"></path>
  </svg>
  <span class="button__text">Download</span>
</button>

<style>
/* From Uiverse.io by Creatlydev  - Tags: button */
.button {
  line-height: 1;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.75em 1em;
  padding-right: 1.25em;
  color: #fff;
  border: 1px solid transparent;
  font-weight: 700;
  border-radius: 2em;
  font-size: 1rem;
  box-shadow: 0 0.7em 1.5em -0.5em hsla(249, 62%, 51%, 0.745);
  transition: transform 0.3s;

  background: linear-gradient(
    90deg,
    rgba(77, 54, 208, 1) 0%,
    rgba(132, 116, 254, 1) 100%
  );
}

.button__icon {
  width: 1.5em;
  height: 1.5em;
}

.button:hover {
  border-color: #f4f5f2;
}

.button:active {
  transform: scale(0.98);
  box-shadow: 0 0.5em 1.5em -0.5em hsla(249, 62%, 51%, 0.745);
}

</style>
    

================================================
FILE: Buttons/Creatlydev_pretty-grasshopper-57.html
================================================
<button class="button" style="--clr: #00ad54;">
    <span class="button-decor"></span>
    <div class="button-content">
        <div class="button__icon">
            <svg viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" width="24">
                <circle opacity="0.5" cx="25" cy="25" r="23" fill="url(#icon-payments-cat_svg__paint0_linear_1141_21101)"></circle>
                <mask id="icon-payments-cat_svg__a" fill="#fff">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M34.42 15.93c.382-1.145-.706-2.234-1.851-1.852l-18.568 6.189c-1.186.395-1.362 2-.29 2.644l5.12 3.072a1.464 1.464 0 001.733-.167l5.394-4.854a1.464 1.464 0 011.958 2.177l-5.154 4.638a1.464 1.464 0 00-.276 1.841l3.101 5.17c.644 1.072 2.25.896 2.645-.29L34.42 15.93z">
                    </path>
                </mask>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M34.42 15.93c.382-1.145-.706-2.234-1.851-1.852l-18.568 6.189c-1.186.395-1.362 2-.29 2.644l5.12 3.072a1.464 1.464 0 001.733-.167l5.394-4.854a1.464 1.464 0 011.958 2.177l-5.154 4.638a1.464 1.464 0 00-.276 1.841l3.101 5.17c.644 1.072 2.25.896 2.645-.29L34.42 15.93z" fill="#fff"></path>
                <path d="M25.958 20.962l-1.47-1.632 1.47 1.632zm2.067.109l-1.632 1.469 1.632-1.469zm-.109 2.068l-1.469-1.633 1.47 1.633zm-5.154 4.638l-1.469-1.632 1.469 1.632zm-.276 1.841l-1.883 1.13 1.883-1.13zM34.42 15.93l-2.084-.695 2.084.695zm-19.725 6.42l18.568-6.189-1.39-4.167-18.567 6.19 1.389 4.166zm5.265 1.75l-5.12-3.072-2.26 3.766 5.12 3.072 2.26-3.766zm2.072 3.348l5.394-4.854-2.938-3.264-5.394 4.854 2.938 3.264zm5.394-4.854a.732.732 0 01-1.034-.054l3.265-2.938a3.66 3.66 0 00-5.17-.272l2.939 3.265zm-1.034-.054a.732.732 0 01.054-1.034l2.938 3.265a3.66 3.66 0 00.273-5.169l-3.265 2.938zm.054-1.034l-5.154 4.639 2.938 3.264 5.154-4.638-2.938-3.265zm1.023 12.152l-3.101-5.17-3.766 2.26 3.101 5.17 3.766-2.26zm4.867-18.423l-6.189 18.568 4.167 1.389 6.19-18.568-4.168-1.389zm-8.633 20.682c1.61 2.682 5.622 2.241 6.611-.725l-4.167-1.39a.732.732 0 011.322-.144l-3.766 2.26zm-6.003-8.05a3.66 3.66 0 004.332-.419l-2.938-3.264a.732.732 0 01.866-.084l-2.26 3.766zm3.592-1.722a3.66 3.66 0 00-.69 4.603l3.766-2.26c.18.301.122.687-.138.921l-2.938-3.264zm11.97-9.984a.732.732 0 01-.925-.926l4.166 1.389c.954-2.861-1.768-5.583-4.63-4.63l1.39 4.167zm-19.956 2.022c-2.967.99-3.407 5.003-.726 6.611l2.26-3.766a.732.732 0 01-.145 1.322l-1.39-4.167z" fill="#fff" mask="url(#icon-payments-cat_svg__a)"></path>
                <defs>
                    <linearGradient id="icon-payments-cat_svg__paint0_linear_1141_21101" x1="25" y1="2" x2="25" y2="48" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#fff" stop-opacity="0.71"></stop>
                        <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
                    </linearGradient>
                </defs>
            </svg>
        </div>
        <span class="button__text">Payments</span>
    </div>
</button>
<style>
/* From Uiverse.io by Creatlydev - Tags: button, hover effect, hover button */
.button {
  text-decoration: none;
  line-height: 1;
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
  box-shadow: 10px 10px 20px rgba(0,0,0,.05);
  background-color: #fff;
  color: #121212;
  border: none;
  cursor: pointer;
}

.button-decor {
  position: absolute;
  inset: 0;
  background-color: var(--clr);
  transform: translateX(-100%);
  transition: transform .3s;
  z-index: 0;
}

.button-content {
  display: flex;
  align-items: center;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.button__icon {
  width: 48px;
  height: 40px;
  background-color: var(--clr);
  display: grid;
  place-items: center;
}

.button__text {
  display: inline-block;
  transition: color .2s;
  padding: 2px 1.5rem 2px;
  padding-left: .75rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}

.button:hover .button__text {
  color: #fff;
}

.button:hover .button-decor {
  transform: translate(0);
}
</style>


================================================
FILE: Buttons/Creatlydev_rare-treefrog-56.html
================================================
<button class="btn-github">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 16 16"
    height="16"
    width="16"
  >
    <path
      fill="currentcolor"
      d="M7.99992 1.33331C7.12444 1.33331 6.25753 1.50575 5.4487 1.84078C4.63986 2.17581 3.90493 2.66688 3.28587 3.28593C2.03563 4.53618 1.33325 6.23187 1.33325 7.99998C1.33325 10.9466 3.24659 13.4466 5.89325 14.3333C6.22659 14.3866 6.33325 14.18 6.33325 14C6.33325 13.8466 6.33325 13.4266 6.33325 12.8733C4.48659 13.2733 4.09325 11.98 4.09325 11.98C3.78659 11.2066 3.35325 11 3.35325 11C2.74659 10.5866 3.39992 10.6 3.39992 10.6C4.06659 10.6466 4.41992 11.2866 4.41992 11.2866C4.99992 12.3 5.97992 12 6.35992 11.84C6.41992 11.4066 6.59325 11.1133 6.77992 10.9466C5.29992 10.78 3.74659 10.2066 3.74659 7.66665C3.74659 6.92665 3.99992 6.33331 4.43325 5.85998C4.36659 5.69331 4.13325 4.99998 4.49992 4.09998C4.49992 4.09998 5.05992 3.91998 6.33325 4.77998C6.85992 4.63331 7.43325 4.55998 7.99992 4.55998C8.56659 4.55998 9.13992 4.63331 9.66659 4.77998C10.9399 3.91998 11.4999 4.09998 11.4999 4.09998C11.8666 4.99998 11.6333 5.69331 11.5666 5.85998C11.9999 6.33331 12.2533 6.92665 12.2533 7.66665C12.2533 10.2133 10.6933 10.7733 9.20659 10.94C9.44659 11.1466 9.66659 11.5533 9.66659 12.1733C9.66659 13.0666 9.66659 13.7866 9.66659 14C9.66659 14.18 9.77325 14.3933 10.1133 14.3333C12.7599 13.44 14.6666 10.9466 14.6666 7.99998C14.6666 7.1245 14.4941 6.25759 14.1591 5.44876C13.8241 4.63992 13.333 3.90499 12.714 3.28593C12.0949 2.66688 11.36 2.17581 10.5511 1.84078C9.7423 1.50575 8.8754 1.33331 7.99992 1.33331V1.33331Z"
    ></path>
  </svg>
  <span>View on Github</span>
</button>

<style>
/* From Uiverse.io by Creatlydev  - Tags: button */
.btn-github {
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  border: none;

  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  border-radius: 100px;
  font-weight: 800;
  place-content: center;

  padding: 0.75rem 1rem;
  font-size: 0.825rem;
  line-height: 1rem;

  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: #fff;
}

.btn-github:hover {
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(252, 232, 3, 0.08);
  color: #fce803;
  transform: translate(0, -0.25rem);
  background-color: rgba(255, 255, 255, 0.16);
}

</style>
    

================================================
FILE: Buttons/Creatlydev_silly-cat-86.html
================================================
<a style="--clr: #7808d0" class="button" href="#">
            <span class="button__icon-wrapper">
                <svg width="10" class="button__icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 15">
                    <path fill="currentColor" d="M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z"></path>
                </svg>
                
                <svg class="button__icon-svg  button__icon-svg--copy" xmlns="http://www.w3.org/2000/svg" width="10" fill="none" viewBox="0 0 14 15">
                    <path fill="currentColor" d="M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z"></path>
                </svg>
            </span>
            Explore All
        </a>
<style>
/* From Uiverse.io by Creatlydev - Tags: button, hover effect, hover button */
.button {
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background-color: var(--clr);
  color: #fff;
  border-radius: 10rem;
  font-weight: 600;
  padding: .75rem 1.5rem;
  padding-left: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color .3s;
}

.button__icon-wrapper {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  color: var(--clr);
  background-color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.button:hover {
  background-color: #000;
}

.button:hover .button__icon-wrapper {
  color: #000;
}

.button__icon-svg--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

.button:hover .button__icon-svg:first-child {
  transition: transform .3s ease-in-out;
  transform: translate(150%, -150%);
}

.button:hover .button__icon-svg--copy {
  transition: transform .3s ease-in-out .1s;
  transform: translate(0);
}
</style>


================================================
FILE: Buttons/CristianMontoya98_nasty-fish-9.html
================================================
<button class="btn"> Button
</button>
<style>
/* From Uiverse.io by CristianMontoya98 - Tags: button */
.btn {
 width: 6.5em;
 height: 2.3em;
 margin: 0.5em;
 background: black;
 color: white;
 border: none;
 border-radius: 0.625em;
 font-size: 20px;
 font-weight: bold;
 cursor: pointer;
 position: relative;
 z-index: 1;
 overflow: hidden;
}

button:hover {
 color: black;
}

button:after {
 content: "";
 background: white;
 position: absolute;
 z-index: -1;
 left: -20%;
 right: -20%;
 top: 0;
 bottom: 0;
 transform: skewX(-45deg) scale(0, 1);
 transition: all 0.5s;
}

button:hover:after {
 transform: skewX(-45deg) scale(1, 1);
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
</style>


================================================
FILE: Buttons/Custyyyy_fuzzy-fireant-2.html
================================================

<button id="bottone1"><strong>Discover features</strong></button>
<style>
/* From Uiverse.io by Custyyyy - Tags: button */
#bottone1 {
 padding-left: 33px;
 padding-right: 33px;
 padding-bottom: 16px;
 padding-top: 16px;
 border-radius: 9px;
 background: #d5f365;
 border: none;
 font-family: inherit;
 text-align: center;
 cursor: pointer;
 transition: 0.4s;
}

#bottone1:hover {
 box-shadow: 7px 5px 56px -14px #C3D900;
}

#bottone1:active {
 transform: scale(0.97);
 box-shadow: 7px 5px 56px -10px #C3D900;
}
</style>


================================================
FILE: Buttons/Custyyyy_short-lizard-47.html
================================================

<button role="button" class="button-name">Button-name</button>
<style>
/* From Uiverse.io by Custyyyy - Tags: skeuomorphism, button, realistic */
.button-name {
 align-items: center;
 appearance: none;
 background-color: #FCFCFD;
 border-radius: 4px;
 border-width: 0;
 box-shadow: rgba(45, 35, 66, 0.2) 0 2px 4px,rgba(45, 35, 66, 0.15) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
 box-sizing: border-box;
 color: #36395A;
 cursor: pointer;
 display: inline-flex;
 font-family: "JetBrains Mono",monospace;
 height: 48px;
 justify-content: center;
 line-height: 1;
 list-style: none;
 overflow: hidden;
 padding-left: 16px;
 padding-right: 16px;
 position: relative;
 text-align: left;
 text-decoration: none;
 transition: box-shadow .15s,transform .15s;
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
 white-space: nowrap;
 will-change: box-shadow,transform;
 font-size: 18px;
}

.button-name:focus {
 box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.button-name:hover {
 box-shadow: rgba(45, 35, 66, 0.3) 0 4px 8px, rgba(45, 35, 66, 0.2) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
 transform: translateY(-2px);
}

.button-name:active {
 box-shadow: #D6D6E7 0 3px 7px inset;
 transform: translateY(2px);
}
</style>


================================================
FILE: Buttons/Custyyyy_silent-sheep-31.html
================================================

<button class="button" style="vertical-align:middle"><span>Download</span></button>
<style>
/* From Uiverse.io by Custyyyy - Tags: button, download */
.button {
 display: inline-block;
 border-radius: 7px;
 border: none;
 background: #1875FF;
 color: white;
 font-family: inherit;
 text-align: center;
 font-size: 13px;
 box-shadow: 0px 14px 56px -11px #1875FF;
 width: 10em;
 padding: 1em;
 transition: all 0.4s;
 cursor: pointer;
}

.button span {
 cursor: pointer;
 display: inline-block;
 position: relative;
 transition: 0.4s;
}

.button span:after {
 content: 'for free';
 position: absolute;
 opacity: 0;
 top: 0;
 right: -20px;
 transition: 0.7s;
}

.button:hover span {
 padding-right: 3.55em;
}

.button:hover span:after {
 opacity: 4;
 right: 0;
}
</style>


================================================
FILE: Buttons/Custyyyy_witty-baboon-62.html
================================================

<button id="bottone5">Copy</button>
<style>
/* From Uiverse.io by Custyyyy - Tags: button */
#bottone5 {
 align-items: center;
 background-color: #FFFFFF;
 border: 1px solid rgba(0, 0, 0, 0.1);
 border-radius: .25rem;
 box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
 box-sizing: border-box;
 color: rgba(0, 0, 0, 0.85);
 cursor: pointer;
 display: inline-flex;
 font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
 font-size: 16px;
 font-weight: 600;
 justify-content: center;
 line-height: 1.25;
 min-height: 3rem;
 padding: calc(.875rem - 1px) calc(1.5rem - 1px);
 text-decoration: none;
 transition: all 250ms;
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
 vertical-align: baseline;
 width: auto;
}

#bottone5:hover,
#bottone5:focus {
 border-color: rgba(0, 0, 0, 0.15);
 box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
 color: rgba(0, 0, 0, 0.65);
}

#bottone5:hover {
 transform: translateY(-1px);
}

#bottone5:active {
 background-color: #F0F0F1;
 border-color: rgba(0, 0, 0, 0.15);
 box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
 color: rgba(0, 0, 0, 0.65);
 transform: translateY(0);
}
</style>


================================================
FILE: Buttons/Cybercom682_little-owl-63.html
================================================
<button class="button">
  <svg height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <path
      fill="transparent"
      stroke-width="30"
      stroke="black"
      d="M429.6 92.1c4.9-11.9 2.1-25.6-7-34.7s-22.8-11.9-34.7-7l-352 144c-14.2 5.8-22.2 20.8-19.3 35.8s16.1 25.8 31.4 25.8H224V432c0 15.3 10.8 28.4 25.8 31.4s30-5.1 35.8-19.3l144-352z"
    ></path>
  </svg>
  &nbsp;Send Message
</button>

<style>
/* From Uiverse.io by Cybercom682  - Tags: button, send, mastery, replica */
.button {
  cursor: pointer;
  position: relative;
  display: flex;
  padding: 0.8em 0.7em 0.8em 0.7em;
  border-color: rgba(0, 0, 0, 0.336);
  box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.158);
  border-radius: 6px;
}
.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: inset 0 0 20px rgb(255, 255, 255);
}

</style>
    

================================================
FILE: Buttons/DGtalsam_neat-kangaroo-25.html
================================================

<button class="custom-btn btn"><span>Button</span></button>
<style>
/* From Uiverse.io by DGtalsam - Tags: button */
.custom-btn {
 width: 130px;
 height: 40px;
 color: #fff;
 border-radius: 5px;
 padding: 10px 25px;
 font-family: 'Lato', sans-serif;
 font-weight: 500;
 background: transparent;
 cursor: pointer;
 transition: all 0.3s ease;
 position: relative;
 display: inline-block;
 box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
 outline: none;
}

.btn {
 background: linear-gradient(0deg, rgba(255, 151, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
 line-height: 42px;
 padding: 0;
 border: none;
}

.btn span {
 position: relative;
 display: block;
 width: 100%;
 height: 100%;
}

.btn:before,
.btn:after {
 position: absolute;
 content: "";
 right: 0;
 bottom: 0;
 background: rgba(251, 75, 2, 1);
 box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9),
        -4px -4px 5px 0px rgba(255, 255, 255, .9),
        7px 7px 20px 0px rgba(0, 0, 0, .2),
        4px 4px 5px 0px rgba(0, 0, 0, .3);
 transition: all 0.3s ease;
}

.btn:before {
 height: 0%;
 width: 2px;
}

.btn:after {
 width: 0%;
 height: 2px;
}

.btn:hover {
 color: rgba(251, 75, 2, 1);
 background: transparent;
}

.btn:hover:before {
 height: 100%;
}

.btn:hover:after {
 width: 100%;
}

.btn span:before,
.btn span:after {
 position: absolute;
 content: "";
 left: 0;
 top: 0;
 background: rgba(251, 75, 2, 1);
 box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9),
        -4px -4px 5px 0px rgba(255, 255, 255, .9),
        7px 7px 20px 0px rgba(0, 0, 0, .2),
        4px 4px 5px 0px rgba(0, 0, 0, .3);
 transition: all 0.3s ease;
}

.btn span:before {
 width: 2px;
 height: 0%;
}

.btn span:after {
 height: 2px;
 width: 0%;
}

.btn span:hover:before {
 height: 100%;
}

.btn span:hover:after {
 width: 100%;
}
</style>


================================================
FILE: Buttons/Damithkumara_green-chipmunk-67.html
================================================

<button><span></span>button</button>
<style>
/* From Uiverse.io by Damithkumara - Tags: button */
button {
 padding: 0.9em 1.8em;
 text-transform: uppercase;
 text-decoration: none;
 letter-spacing: 4px;
 color: transparent;
 border: 3px solid #ff0;
 font-size: 14px;
 position: relative;
 font-family: inherit;
 background: transparent;
}

button::before {
 content: "button";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #363636;
 color: #ff0;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: all 0.5s;
}

button:hover::before {
 left: 100%;
 transform: scale(0) rotateY(360deg);
 opacity: 0;
}

button::after {
 content: "button";
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background-color: #363636;
 color: #ff0;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: all 0.5s;
 transform: scale(0) rotateY(0deg);
 opacity: 0;
}

button:hover::after {
 left: 0;
 transform: scale(1) rotateY(360deg);
 opacity: 1;
}

</style>


================================================
FILE: Buttons/Dashrath-Sharma_chatty-tiger-70.html
================================================
<button class="button">Button</button>

<style>
/* From Uiverse.io by Dashrath-Sharma  - Tags: glassmorphism, flashy, button, shadow, glow, border, box-shadow, buttons */
button {
  cursor: pointer;
  padding: 1em 2em;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
  background: rgba(60, 73, 203, 0.35);
  box-shadow: 0 0px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(14.5px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14.5px);
}

button:hover {
  box-shadow: 0px 0 32px 0 rgba(31, 38, 135, 0.37),
    0px 0 32px 0 rgba(31, 38, 135, 0.37), 0 0 42px 0px rgba(31, 38, 135, 0.37),
    0 0 52px 0 rgba(31, 38, 135, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.58);
}

button,
button::before {
  display: grid;
  place-items: center;
  border-radius: 10px;
  box-shadow: 0 0px 32px 0 rgba(31, 38, 135, 0.37);
}

button::before {
  content: "Button";
  position: absolute;
  background: blue;
  width: 90%;
  height: 80%;
  background: rgba(26, 18, 241, 0.25);
  backdrop-filter: blur(18.5px);
  -webkit-backdrop-filter: blur(18.5px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: 0.4s;
}

button:hover::before {
  background: rgba(51, 57, 236, 0.4);
  box-shadow: 1px 1px 2px 0 rgba(31, 38, 135, 0.37),
    2px 2px 2px 0 rgba(31, 38, 135, 0.37), 0 0px 32px 0 rgba(31, 38, 135, 0.37),
    0 0px 32px 1px rgba(31, 38, 135, 0.37), 0 0px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(5.5px);
  -webkit-backdrop-filter: blur(5.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
button:active::before {
  transform: scale(0.67);
}

</style>
    

================================================
FILE: Buttons/Dashrath-Sharma_cowardly-dingo-27.html
================================================
<button class="btn">
  Button
</button>
<style>
/* From Uiverse.io by Dashrath-Sharma - Tags: button */
.btn {
  border-right: 1px solid #ff758f;
  border-bottom: 1px solid #ff758f;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  outline: none;
  background: #f8f9fa;
  font-size: 17px;
  padding: 1em 2em;
  border-radius: .5em;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: all .5s;
  z-index: 1;
}

.btn:hover {
  color: #212529;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-top: 1px solid #ff758f;
  border-left: 1px solid #ff758f;
  box-shadow: 1px 1px 0 #f8f9fa,
             2px 2px 0 #e9ecef,
             3px 3px 0 #fff0f3,
             4px 4px 0 #ffb3c1,
             5px 5px 0 #ff4d6d,
             6px 6px 0 #6c757d,
             7px 7px 0 #a4133c,
             8px 8px 0 #800f2f,
             9px 9px 0 #212529;
}

.btn:active {
  transition: 0s;
  transform: scale(.93);
}

.btn::before,
.btn::after {
  left: 0;
  content: '';
  position: absolute;
  background: #ffccd5;
  z-index: -1;
}

.btn::before {
  width: 0;
  height: 10%;
  transition: width .5s;
}

.btn:hover::before {
  width: 100%;
}

.btn::after {
  width: 100%;
  height: 0;
  border-radius: 100%;
  transition: all .5s .2s;
}

.btn:hover::after {
  height: 100%;
  border-radius: 0;
}

</style>


================================================
FILE: Buttons/Dashrath-Sharma_heavy-squid-49.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by Dashrath-Sharma - Tags: button, slide */
button {
  border: none;
  outline: none;
  font-size: 17px;
  padding: 1em 2em;
  position: relative;
  color: #14213d;
  background: #f1f1f1;
  display: grid;
  font-weight: 700;
  place-items: center;
  transition: color 350ms linear 650ms;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
  z-index: 1;
}

button:hover {
  color: #fca311;
}

button::before,
button::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 0;
  height: 6%;
}

button::before {
  background: #fca311;
  transition: width 350ms, height 350ms linear 650ms;
}

button:hover::before {
  width: 100%;
  height: 100%;
}

button:after {
  background: #14213d;
  transition: width 350ms linear 175ms, height 350ms linear 650ms;
}

button:hover::after {
  width: 95%;
  height: 100%;
}
</style>


================================================
FILE: Buttons/Dashrath-Sharma_popular-cobra-99.html
================================================
<button class="button">
  Button
  <span></span>
  <span></span>
</button>

<style>
/* From Uiverse.io by Dashrath-Sharma  - Tags: button, active, neon, futuristic, animated, border, advanced, transparent */
.button {
  position: relative;
  font-size: 17px;
  font-weight: 800;
  color: #c77dff;
  padding: 1em 2em;
  border: none;
  background: none;
  clip-path: polygon(0 0, 67% 0, 100% 100%, 33% 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.3s 0.3s;
}

button:hover {
  text-shadow: 1px 1px 20px #e0aaff, 1px 1px 60px #e0aaff;
}

button:active {
  transform: scale(0.89);
}

.button::before,
.button::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background: #c77dff;
  transition: width 0.3s 0.6s;
}

.button::before {
  top: 0;
  left: 0;
  transform-origin: top;
}

.button::after {
  bottom: 0;
  right: 0;
  transform-origin: bottom;
}

.button:hover::before,
.button:hover::after {
  width: 65%;
}

.button span {
  position: absolute;
  width: 0;
  height: 2px;
  background: #c77dff;
  transition: width 0.3s, transform 0.3s 0.3s;
  transform: rotate(22.3deg);
}

.button span:nth-child(1) {
  top: 0;
  left: 0;
  transform-origin: left;
}

.button span:nth-child(2) {
  bottom: 0;
  right: 0;
  transform-origin: right;
}

.button:hover span {
  width: 55%;
  transform: rotate(50deg);
}

</style>
    

================================================
FILE: Buttons/Dashrath-Sharma_tall-robin-16.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by Dashrath-Sharma - Tags: button, text animation, animated, colorful, color, text, btn */
.button {
  border: none;
  font-size: 17px;
  padding: 1em 2em;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 1;
  background: #caf0f8;
  border-radius: 8px;
  box-shadow: 2px 2px 0 #333,
             2px 2px 200px #ffba08 inset;
  color: #fff;
}

.button:active {
  transform: scale(.98);
}

.button:hover {
  box-shadow: 2px 2px 0 #333,
             2px 2px 200px #003566 inset;
}

.button::before {
  content: '';
  position: absolute;
  left: -41%;
  width: 150%;
  height: 300%;
  border-radius: 50%;
  box-shadow: 2px 2px 0 #333,
             0 0 0 8px #d00000 inset,
             0 0 0 16px #dc2f02 inset,
             0 0 0 24px #e85d04 inset,
             0 0 0 32px #f48c06 inset,
             0 0 0 40px #faa307 inset;
  z-index: -1;
  transition: .2s;
}

.button:active::before {
  opacity: .001;
  box-shadow: 2px 2px 200px #03045e inset;
}

.button:hover::before {
  box-shadow: 2px 2px 0 #333,
             0 0 0 8px #90e0ef inset,
             0 0 0 16px #48cae4 inset,
             0 0 0 24px #00b4d8 inset,
             0 0 0 32px #0096c7 inset,
             0 0 0 40px #0077b6 inset;
  left: -9%;
  width: 150%;
  height: 300%;
}
</style>


================================================
FILE: Buttons/Dashrath-Sharma_thin-mole-87.html
================================================
<button class="button">
  <svg
    xml:space="preserve"
    viewBox="0 0 256 256"
    height="256"
    width="256"
    version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns="http://www.w3.org/2000/svg"
  >
    <defs></defs>
    <g
      transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
      style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
    >
      <path
        stroke-linecap="round"
        transform="matrix(1 0 0 1 0 0)"
        style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
        d="M 71.79 34.614 c -0.334 -0.497 -0.926 -0.745 -1.513 -0.63 l -18.311 3.528 l 3.718 -35.877 c 0.071 -0.682 -0.332 -1.32 -0.979 -1.55 c -0.648 -0.229 -1.362 0.011 -1.738 0.585 L 18.202 53.746 c -0.328 0.5 -0.325 1.144 0.008 1.639 c 0.33 0.493 0.922 0.742 1.513 0.632 l 18.312 -3.529 l -3.718 35.876 c -0.071 0.684 0.332 1.322 0.979 1.551 C 35.455 89.971 35.622 90 35.792 90 c 0.502 0 0.965 -0.251 1.241 -0.67 l 34.765 -53.076 C 72.126 35.754 72.122 35.11 71.79 34.614 z"
      ></path>
    </g>
  </svg>
  Join Now
</button>

<style>
/* From Uiverse.io by Dashrath-Sharma  - Tags: material design, animation, 3d, white, black, button, simple button */
.button {
  box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 15px #444,
    inset -5px -5px 15px #222;
}

.button {
  cursor: pointer;
  position: relative;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5em 4.5em;
  border-radius: 15px;
  border: none;
  font-weight: bold;
  transition: 0.5s;
  z-index: 1;
}
.button:active {
  transform: scale(0.8);
}
.button:active::before {
  transform: translateY(-10px);
}

.button > svg {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

.button::before,
.button::after {
  content: "";
  position: absolute;
  transition: 0.2s;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  border: 1px solid rgba(255, 255, 255, 0.58);
  z-index: -1;
}

.button::after {
  width: 90%;
  height: 68%;
}

.button::before {
  width: 99%;
  height: 90%;
}

</style>
    

================================================
FILE: Buttons/Dashrath-Sharma_wet-zebra-95.html
================================================
<button class="border-el-btn">
  Button
  <span class="b1"></span>
  <span class="b2"></span>
  <span class="b3"></span>
  <span class="b4"></span>
</button>
<style>
/* From Uiverse.io by Dashrath-Sharma - Tags: button, hover, glow, code, border, box */
button {
  color: red;
  outline: none;
  border: none;
  font-size: 17px;
  padding: 1em 2em;
  position: relative;
  background: none;
  cursor: pointer;
}

button:active {
  transform: scale(.98);
  box-shadow: .1px .1px 2px red;
}

button span {
  position: absolute;
  background: red;
  transition: .5s;
  box-shadow: 1px 1px 20px red;
}

button span:nth-child(1) {
  top: 0;
  left: 0;
  width: 3px;
  height: 30%;
}

button:hover span:nth-child(1) {
  height: 100%;
}

button span:nth-child(2) {
  top: 0;
  left: 0;
  width: 15%;
  height: 3px;
}

button:hover span:nth-child(2) {
  width: 100%;
}

button span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 3px;
  height: 30%;
}

button:hover span:nth-child(3) {
  height: 100%;
}

button span:nth-child(4) {
  bottom: 0;
  right: 0;
  width: 15%;
  height: 3px;
}

button:hover span:nth-child(4) {
  width: 100%;
}
</style>


================================================
FILE: Buttons/Dear31_good-yak-38.html
================================================
<button>
  Hover Me
</button>
<style>
/* From Uiverse.io by Dear31 - Tags: simple, button, hover */
button {
  padding: 12px 32px;
  border-radius: 10px;
  border: 3px black solid;
  box-shadow: 2px 2px 1px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-weight: 700;
  font-size: 17px;
  background-color: #01aaba68;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

button::after {
  content: "";
  position: absolute;
  background-color: #199fab;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all .3s ease-in;
  z-index: -1;
}

button:hover::after {
  transform-origin: center;
  transition: all .3s ease-in;
  width: 200px;
  height: 200px;
}

</style>


================================================
FILE: Buttons/Dear31_hard-moose-96.html
================================================
<button>
  Hover me
</button>
<style>
/* From Uiverse.io by Dear31 - Tags: button */
button {
  background-color: rgb(255, 255, 255);
  border: 3px solid black;
  padding: 12px 32px;
  border-radius: 22px;
  box-shadow: 2px 2px 1px  black;
  transition: all .2s ease;
  font-size: 1em;
  font-weight: 800;
}

button:hover {
  transform: translate(-2px, -1px);
  box-shadow: 7px 7px 1px  rgb(0, 0, 0);
  transition: all .2s ease-in;
}
</style>


================================================
FILE: Buttons/DeepanshuKant_dry-rattlesnake-75.html
================================================
 <button class="btn">
   Button
</button>
<style>
/* From Uiverse.io by DeepanshuKant - Tags: button */
.btn {
  position: relative;
  padding: 1rem 2.5rem;
  color: #ffd739;
  font-size: 1em;
  background-color: #27045b;
  outline: none;
  border: none;
  font-weight: bold;
  border-radius: 5px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  transition-property: all;
  transition-duration: 0.3s;
  cursor: pointer;
}

.btn:hover {
  background-color: #6807f9;
  box-shadow: 0px 14px 56px -11px #6807f9;
}

.btn::before {
  content: "";
  position: absolute;
  height: 5px;
  width: 5px;
  background-color: white;
  border-radius: 100px;
  right: 2rem;
  bottom: 37%;
  animation: 0.5s both ease-in-out infinite;
}

.btn:hover::before {
  animation-name: bounce_591;
  transition: all 0.3s ease;
}

@keyframes bounce_591 {
  0% {
    bottom: 37%;
  }

  50% {
    bottom: 70%;
  }

  100% {
    bottom: 37%;
  }
}
</style>


================================================
FILE: Buttons/Deri-Kurniawan_helpless-insect-19.html
================================================
<button class="button">
  hover me!
</button>

<style>
/* From Uiverse.io by Deri-Kurniawan - Tags: button, hover, click, slide, hover effect, hover button, button hover effect  */
.button {
  position: relative;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
  background-color: #fff;
  border: none;
  border-radius: 50px;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.button:hover {
  transform: scale(1.05);
  color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: scale(0.9);
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #007bff, #00bfff);
  transition: all 0.4s ease-in-out;
  z-index: -1;
  border-radius: 50px;
}

.button:hover::before {
  left: 0;
}
</style>


================================================
FILE: Buttons/Deri-Kurniawan_moody-bulldog-20.html
================================================
<!-- From Uiverse.io by Deri-Kurniawan  - Tags:  -->
<button
  class="relative py-2 px-8 text-black text-base font-bold nded-full overflow-hidden bg-white rounded-full transition-all duration-400 ease-in-out shadow-md hover:scale-105 hover:text-white hover:shadow-lg active:scale-90 before:absolute before:top-0 before:-left-full before:w-full before:h-full before:bg-gradient-to-r before:from-blue-500 before:to-blue-300 before:transition-all before:duration-500 before:ease-in-out before:z-[-1] before:rounded-full hover:before:left-0"
>
  HOVER ME!
</button>


    

================================================
FILE: Buttons/Deri-Kurniawan_moody-cat-79.html
================================================
<button class="button">
  <span class="button-content">Wavy Button</span>
</button>

<style>
/* From Uiverse.io by Deri-Kurniawan  - Tags: blue, button, hover, smooth, hover effect, hoverme, hover button, button hover effect  */
.button {
  position: relative;
  display: inline-block;
  padding: 16px 32px;
  border-radius: 14px;
  overflow: hidden;
  z-index: 1;
  border: 1px solid rgb(221, 218, 218);
  background: white;
  font-weight: bold;
  font-size: 16px;
  color: #1993e4;
  transition: all 1.2s linear;
  cursor: pointer;
}

.button::after {
  content: "";
  position: absolute;
  background: linear-gradient(to right, #1993e4, #1993e456);
  border-radius: 30%;
  height: 96px;
  width: 96px;
  animation: spin infinite linear 1.8s;
  animation-delay: 0;
  bottom: -38px;
  right: -112px;
  transition: all 1.2s linear;
  z-index: 0;
}

.button:hover {
  color: #fff;
  transition-duration: 1.2s;
}

.button:hover::after {
  right: -60px;
  bottom: -92px;
  width: 256px;
  height: 256px;
}

.button > .button-content {
  position: relative;
  z-index: 2;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

</style>
    

================================================
FILE: Buttons/Deri-Kurniawan_moody-lion-47.html
================================================
<button class="button">
  <div class="light-border">Colorful Shiny</div>
</button>

<style>
/* From Uiverse.io by Deri-Kurniawan  - Tags: button, colorful, btn, hover effect */
.button {
  position: relative;
  cursor: pointer;
  padding: 6px 6px;
  position: relative;
  background: linear-gradient(
    75deg,
    rgba(192, 97, 237, 0.8),
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.4),
    rgba(252, 144, 98, 0.8),
    rgba(252, 144, 98, 0.8),
    rgba(255, 255, 255, 0.4),
    rgba(228, 89, 199, 0.8),
    rgba(255, 255, 255, 0.4),
    rgba(228, 89, 199, 0.8)
  );
  border: 1.5px solid transparent;
  border-radius: 12px;
  inset: 0;
}

.button .light-border {
  padding: 8px 24px;
  border: 0.1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.button:hover {
  filter: contrast(1.2) brightness(1.2);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease-in-out;
}

</style>
    

================================================
FILE: Buttons/DevPTG_funny-quail-20.html
================================================
 <div class="chat">
      <div class="background"></div>
      <svg viewBox="0 0 100 100" height="100" width="100" class="chat-bubble">
        <g class="bubble">
          <path d="M 30.7873,85.113394 30.7873,46.556405 C 30.7873,41.101961
          36.826342,35.342 40.898074,35.342 H 59.113981 C 63.73287,35.342
          69.29995,40.103201 69.29995,46.784744" class="line line1"></path>
          <path d="M 13.461999,65.039335 H 58.028684 C
            63.483128,65.039335
            69.243089,59.000293 69.243089,54.928561 V 45.605853 C
            69.243089,40.986964 65.02087,35.419884 58.339327,35.419884" class="line line2"></path>
        </g>
        <circle cx="42.5" cy="50.7" r="1.9" class="circle circle1"></circle>
        <circle r="1.9" cy="50.7" cx="49.9" class="circle circle2"></circle>
        <circle cx="57.3" cy="50.7" r="1.9" class="circle circle3"></circle>
      </svg>
    </div>
<style>
/* From Uiverse.io by DevPTG - Tags: button */
.chat {
  display: flex;
  position: relative;
}

.background {
  background-color: #1950ff;
  border-radius: 50%;
  box-shadow: 0 2.1px 1.3px rgba(0, 0, 0, 0.044),
    0 5.9px 4.2px rgba(0, 0, 0, 0.054), 0 12.6px 9.5px rgba(0, 0, 0, 0.061),
    0 25px 20px rgba(0, 0, 0, 0.1);
  height: 80px;
  left: 10px;
  position: absolute;
  top: 10px;
  width: 80px;
}

.chat-bubble {
  cursor: pointer;
  position: relative;
}

.bubble {
  transform-origin: 50%;
  transition: transform 500ms cubic-bezier(0.17, 0.61, 0.54, 0.9);
}

.line {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.75;
  stroke-linecap: round;
  transition: stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line1 {
  stroke-dasharray: 60 90;
  stroke-dashoffset: -20;
}

.line2 {
  stroke-dasharray: 67 87;
  stroke-dashoffset: -18;
}

.circle {
  fill: #ffffff;
  stroke: none;
  transform-origin: 50%;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.active .bubble {
  transform: translateX(24px) translateY(4px) rotate(45deg);
}

.active .line1 {
  stroke-dashoffset: 21;
}

.active .line2 {
  stroke-dashoffset: 30;
}

.active .circle {
  transform: scale(0);
}
</style>


================================================
FILE: Buttons/DevVaradPatil_terrible-frog-3.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by DevVaradPatil - Tags: button */
button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 130px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  box-sizing: border-box;
  background: linear-gradient(90deg,#03a9f4,#ffeb3b,#f441af,#03a9f4);
  background-size: 400%;
  border-radius: 30px;
  z-index: 1;
  border: none;
  outline: none;
}

button:hover {
  animation: animate 6s linear infinite;
}

@keyframes animate {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 400%;
  }
}

button::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  background: linear-gradient(90deg,#03a9f4,#ffeb3b,#f441af,#03a9f4);
  border-radius: 40px;
  filter: blur(20px);
  opacity: 0;
  transition: 0.5s;
}

button:hover::before {
  filter: blur(20px);
  opacity: 1;
  animation: animate 6s linear infinite;
}
</style>


================================================
FILE: Buttons/Df12345677_black-rat-82.html
================================================
<button class="button">
  <span>Add to cart</span>
  <svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <defs>  </defs> <g id="cart"> <circle r="1.91" cy="20.59" cx="10.07" class="cls-1"></circle> <circle r="1.91" cy="20.59" cx="18.66" class="cls-1"></circle> <path d="M.52,1.5H3.18a2.87,2.87,0,0,1,2.74,2L9.11,13.91H8.64A2.39,2.39,0,0,0,6.25,16.3h0a2.39,2.39,0,0,0,2.39,2.38h10" class="cls-1"></path> <polyline points="7.21 5.32 22.48 5.32 22.48 7.23 20.57 13.91 9.11 13.91" class="cls-1"></polyline> </g> </g></svg>
</button>
<style>
/* From Uiverse.io by Df12345677 - Tags: button, animated, add */
.button {
  height: 60px;
  width: 200px;
  background-color: #132233;
  border: 2px solid rgb(182, 128, 128);
  color: #eee;
  transition: .6s;
  font-size: 15px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 20px; */
  overflow: hidden;
}

.button span {
  transform: translateX(10px);
  transition: .5s;
}

.button svg {
  transform: translateX(-300px);
  transition: .6s;
  z-index: 3;
  height: 20px;
}

.button:hover {
  width: 60px;
  background-color: rgba(51, 34, 51, 0.815);
  box-shadow: 20px 20px 96px #bebebe,-20px -20px 96px #ffffff;
}

.button:hover svg {
  transform: translateX(-5px);
}

.button:hover span {
  transform: translateY(70px);
  font-size: .1rem;
}
</style>


================================================
FILE: Buttons/Diox221_hungry-husky-80.html
================================================
<button class="btn spacex-btn">
  <span>Launch Rocket</span>
  <div class="btn-bg"></div>
</button>

<style>
/* From Uiverse.io by Diox221 - Tags: button, animated */
.btn {
  position: relative;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background-color: #333;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}

.spacex-btn {
  background-color: #005288;
}

.btn-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  opacity: 0.3;
  z-index: -1;
  transition: transform 0.3s ease-in-out;
}

.spacex-btn:hover .btn-bg {
  transform: translate(-50%, -50%) scale(2);
}

</style>


================================================
FILE: Buttons/Divyank-Gupta-g_happy-robin-54.html
================================================
<!-- From Uiverse.io by Divyank-Gupta-g  - Tags: button -->
<button
  class="bg-[linear-gradient(#e9e9e9,#e9e9e9_50%,#fff)] group w-50 h-16 inline-flex transition-all duration-300 overflow-visible p-1 rounded-full group"
>
  <div
    class="w-half h-full bg-[linear-gradient(to_top,#ececec,#fff)] overflow-hidden shadow-[0_0_1px_rgba(0,0,0,0.07),0_0_1px_rgba(0,0,0,0.05),0_3px_3px_rgba(0,0,0,0.25),0_1px_3px_rgba(0,0,0,0.12)] p-1 rounded-full hover:shadow-none duration-300"
  >
    <div
      class="w-full h-full text-xl gap-x-0.5 gap-y-0.5 justify-center text-[#101010] bg-[linear-gradient(#f4f4f4,#fefefe)] group-hover:bg-[linear-gradient(#e2e2e2,#fefefe)] duration-200 items-center text-[18px] font-medium gap-4 inline-flex overflow-hidden px-4 py-2 rounded-full black group-hover:text-blue-600"
    >
      <svg
        xmlns:xlink="http://www.w3.org/1999/xlink"
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        viewBox="0 0 64 64"
        height="32px"
        width="24px"
      >
        <g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none">
          <g fill-rule="nonzero" transform="translate(3.000000, 2.000000)">
            <path
              fill="#4285F4"
              d="M57.8123233,30.1515267 C57.8123233,27.7263183 57.6155321,25.9565533 57.1896408,24.1212666 L29.4960833,24.1212666 L29.4960833,35.0674653 L45.7515771,35.0674653 C45.4239683,37.7877475 43.6542033,41.8844383 39.7213169,44.6372555 L39.6661883,45.0037254 L48.4223791,51.7870338 L49.0290201,51.8475849 C54.6004021,46.7020943 57.8123233,39.1313952 57.8123233,30.1515267"
            ></path>
            <path
              fill="#34A853"
              d="M29.4960833,58.9921667 C37.4599129,58.9921667 44.1456164,56.3701671 49.0290201,51.8475849 L39.7213169,44.6372555 C37.2305867,46.3742596 33.887622,47.5868638 29.4960833,47.5868638 C21.6960582,47.5868638 15.0758763,42.4415991 12.7159637,35.3297782 L12.3700541,35.3591501 L3.26524241,42.4054492 L3.14617358,42.736447 C7.9965904,52.3717589 17.959737,58.9921667 29.4960833,58.9921667"
            ></path>
            <path
              fill="#FBBC05"
              d="M12.7159637,35.3297782 C12.0932812,33.4944915 11.7329116,31.5279353 11.7329116,29.4960833 C11.7329116,27.4640054 12.0932812,25.4976752 12.6832029,23.6623884 L12.6667095,23.2715173 L3.44779955,16.1120237 L3.14617358,16.2554937 C1.14708246,20.2539019 0,24.7439491 0,29.4960833 C0,34.2482175 1.14708246,38.7380388 3.14617358,42.736447 L12.7159637,35.3297782"
            ></path>
            <path
              fill="#EB4335"
              d="M29.4960833,11.4050769 C35.0347044,11.4050769 38.7707997,13.7975244 40.9011602,15.7968415 L49.2255853,7.66898166 C44.1130815,2.91684746 37.4599129,0 29.4960833,0 C17.959737,0 7.9965904,6.62018183 3.14617358,16.2554937 L12.6832029,23.6623884 C15.0758763,16.5505675 21.6960582,11.4050769 29.4960833,11.4050769"
            ></path>
          </g>
        </g>
      </svg>
      <span class="ml-2">Sign In with Google</span>
    </div>
  </div>
</button>


    

================================================
FILE: Buttons/EcheverriaJesus_chatty-lizard-18.html
================================================
<!-- From Uiverse.io by EcheverriaJesus  - Tags: white, button, hover, modern, animated, tailwind -->
<div class="group relative">
  <button
    class="bg-white w-10 h-10 flex justify-center items-center rounded-lg hover:text-blue-600 hover:translate-y-1 hover:duration-300"
  >
    <svg
      class="w-6 h-6"
      stroke="currentColor"
      stroke-width="1.5"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
  </button>

  <span
    class="absolute w-20 text-center -bottom-12 left-[50%] -translate-x-[50%] origin-bottom tracking-wider z-20 scale-0 px-1 rounded-lg bg-white text-blue-600 py-2 text-sm transition-all duration-300 ease-in-out group-hover:scale-100"
    >00.00 MB<span> </span
  ></span>
</div>


    

================================================
FILE: Buttons/EcheverriaJesus_chilly-donkey-13.html
================================================
<!-- From Uiverse.io by EcheverriaJesus  - Tags: gradient, button, hover, tailwind, tailwindbutton -->
<button
  class="w-28 h-12 text-white font-semibold bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-lg shadow-lg hover:scale-105 duration-200 hover:drop-shadow-2xl hover:shadow-[#7dd3fc] hover:cursor-pointer"
>
  Button
</button>


    

================================================
FILE: Buttons/EcheverriaJesus_clever-owl-29.html
================================================
<!-- From Uiverse.io by EcheverriaJesus  - Tags: red, button, hover, delete, tailwind, tailwindbutton -->
<button
  class="flex justify-center items-center gap-2 w-28 h-12 cursor-pointer rounded-md shadow-2xl text-white font-semibold bg-gradient-to-r from-[#fb7185] via-[#e11d48] to-[#be123c] hover:shadow-xl hover:shadow-red-500 hover:scale-105 duration-300 hover:from-[#be123c] hover:to-[#fb7185]"
>
  <svg viewBox="0 0 15 15" class="w-5 fill-white">
    <svg
      class="w-6 h-6"
      stroke="currentColor"
      stroke-width="1.5"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
    Button
  </svg>
</button>


    

================================================
FILE: Buttons/EcheverriaJesus_evil-eagle-46.html
================================================
<!-- From Uiverse.io by EcheverriaJesus  - Tags: animation, button, hover, rounded, tailwindcss -->
<button
  class="group cursor-pointer border-2 border-gray-300 bg-white px-2 py-1 font-bold rounded-xl shadow-md"
>
  <div class="flex bg-gray-50 rounded-full px-4 py-3 shadow-inner">
    <svg
      stroke="currentColor"
      stroke-width="1.5"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="size-6 -rotate-45 mr-1 group-hover:rotate-0 duration-300"
    >
      <path
        d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
    <span class="group-hover:translate-x-1.5 group-hover:duration-300">
      Send Message</span
    >
  </div>
</button>


    

================================================
FILE: Buttons/EcheverriaJesus_hungry-dingo-62.html
================================================
<!-- From Uiverse.io by EcheverriaJesus  - Tags: green, button, hover, add, tailwind, tailwindbutton -->
<button
  class="flex justify-center items-center gap-2 w-28 h-12 cursor-pointer rounded-md shadow-2xl text-white font-semibold bg-gradient-to-r from-[#14b8a6] via-[#059669] to-[#047857] hover:shadow-xl hover:shadow-green-500 hover:scale-105 duration-300 hover:from-[#047857] hover:to-[#14b8a6]"
>
  <svg class="w-5 fill-white" viewBox="0 0 15 15">
    <svg
      class="w-6 h-6"
      stroke="currentColor"
      stroke-width="1.5"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
  </svg>
</button>


    

================================================
FILE: Buttons/EcheverriaJesus_itchy-ape-8.html
================================================
<!-- From Uiverse.io by EcheverriaJesus  - Tags: material design, button, hover, send, tailwind, tailwindbutton -->
<button
  class="flex items-center bg-blue-500 text-white gap-1 px-4 py-2 cursor-pointer text-gray-800 font-semibold tracking-widest rounded-md hover:bg-blue-400 duration-300 hover:gap-2 hover:translate-x-3"
>
  Send
  <svg
    class="w-5 h-5"
    stroke="currentColor"
    stroke-width="1.5"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"
      stroke-linejoin="round"
      stroke-linecap="round"
    ></path>
  </svg>
</button>


    

================================================
FILE: Buttons/EcheverriaJesus_kind-badger-70.html
================================================
<!-- From Uiverse.io by EcheverriaJesus - Tags: icon, button, active, github, tailwind -->
<div class="group relative">
  <button>
  <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" class="w-8 hover:scale-125 duration-200 hover:stroke-blue-500"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
  </button>
  <span class="absolute -top-14 left-[50%] -translate-x-[50%] 
  z-20 origin-left scale-0 px-3 rounded-lg border 
  border-gray-300 bg-white py-2 text-sm font-bold
  shadow-md transition-all duration-300 ease-in-out 
  group-hover:scale-100">GitHub<span>
</span></span></div>



================================================
FILE: Buttons/EcheverriaJesus_nasty-zebra-71.html
================================================
<!-- From Uiverse.io by EcheverriaJesus  - Tags: animation, button, hover, dark, download, tailwind -->
<button
  class="cursor-pointer bg-gray-800 px-3 py-2 rounded-md text-white tracking-wider shadow-xl animate-bounce hover:animate-none"
>
  <svg
    class="w-5 h-5"
    stroke="currentColor"
    stroke-width="2"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
      stroke-linejoin="round"
      stroke-linecap="round"
    ></path>
  </svg>
</button>


    

================================================
FILE: Buttons/EcheverriaJesus_red-duck-59.html
================================================
<!-- From Uiverse.io by EcheverriaJesus - Tags: button, add, accept -->
<button class="cursor-pointer w-32 h-10 bg-blue-500 tracking-widest
rounded-md text-white text-sm shadow-2xl hover:scale-90 ease-in duration-300
hover:text-base hover:font-semibold hover:rounded-lg">
  Button
</button>



================================================
FILE: Buttons/EcheverriaJesus_yellow-dodo-45.html
================================================
<!-- From Uiverse.io by EcheverriaJesus - Tags: black, gradient, button, hover, hover effect, hover button, tailwind, Github -->
<button class="flex gap-3 cursor-pointer text-white font-semibold bg-gradient-to-r from-gray-800 to-black px-7 py-3 rounded-full border border-gray-600 hover:scale-105 duration-200 hover:text-gray-500 hover:border-gray-800 hover:from-black hover:to-gray-900">
  <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path fill="#FFFFFF" d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg>
  Github
</button>



================================================
FILE: Buttons/EddyBel_brave-horse-21.html
================================================
<button class="button__click">
  <div class="button__click__background"></div>
  Click me
</button>
<style>
/* From Uiverse.io by EddyBel - Tags: gradient, button, click */
.button__click {
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  transition: box-shadow 400ms;
  padding: 0.7em 1.7em;
  font-size: 1rem;
  border-radius: 20px;
  color: rgb(0, 0, 0, 0.75);
  background: transparent;
  transform: scale(1.1) perspective(500px) rotateX(15deg) rotateY(-10deg);
}

.button__click:hover {
  animation: button__click__animation 5.5s infinite both;
}

.button__click__background {
  transition: transform 1.5s;
  z-index: -2;
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  animation: button__click__background 10s infinite;
  background-color: #99fff8;
  background-image: radial-gradient(at 89% 76%, hsla(13,63%,73%,1) 0px, transparent 50%),
  radial-gradient(at 69% 38%, hsla(217,85%,71%,1) 0px, transparent 50%),
  radial-gradient(at 12% 8%, hsla(214,70%,64%,1) 0px, transparent 50%),
  radial-gradient(at 53% 10%, hsla(339,64%,65%,1) 0px, transparent 50%),
  radial-gradient(at 5% 67%, hsla(212,74%,70%,1) 0px, transparent 50%);
}

.button__click::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.295);
}

.button__click:focus {
  box-shadow: 0px 0px 0px 2px #000;
}

@keyframes button__click__animation {
  0%, 100% {
    transform: scale(1.1) perspective(500px) rotateX(15deg) rotateY(-10deg);
  }

  50% {
    transform: scale(0.9) perspective(500px) rotateX(-15deg) rotateY(15deg);
  }
}

@keyframes button__click__background {
  0%, 100% {
    transform: translateX(0%);
  }

  25% {
    transform: translateX(-50%);
  }

  50% {
    transform: translateX(-50%) translateY(-50%);
  }

  75% {
    transform: translateX(0%) translateY(-50%);
  }
}
</style>


================================================
FILE: Buttons/EmaCoto_breezy-cobra-71.html
================================================
<!-- From Uiverse.io by EmaCoto  - Tags: icon, green, button, add -->
<button
  class="rounded-lg relative w-36 h-10 cursor-pointer flex items-center border border-green-500 bg-green-500 group hover:bg-green-500 active:bg-green-500 active:border-green-500"
>
  <span
    class="text-gray-200 font-semibold ml-8 transform group-hover:translate-x-20 transition-all duration-300"
    >Add Item</span
  >
  <span
    class="absolute right-0 h-full w-10 rounded-lg bg-green-500 flex items-center justify-center transform group-hover:translate-x-0 group-hover:w-full transition-all duration-300"
  >
    <svg
      class="svg w-8 text-white"
      fill="none"
      height="24"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <line x1="12" x2="12" y1="5" y2="19"></line>
      <line x1="5" x2="19" y1="12" y2="12"></line>
    </svg>
  </span>
</button>


    

================================================
FILE: Buttons/EmmaxPlay_rude-yak-98.html
================================================

<button class="btn">Hover Me!</button>
<style>
/* From Uiverse.io by EmmaxPlay - Tags: button */
.btn {
 padding: 0.9em 1.6em;
 border: none;
 outline: none;
 color: #FFF;
 font-family: inherit;
 font-weight: 500;
 font-size: 17px;
 cursor: pointer;
 position: relative;
 z-index: 0;
 border-radius: 12px;
}

.btn::after {
 content: "";
 z-index: -1;
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: rgb(46, 46, 46);
 left: 0;
 top: 0;
 border-radius: 10px;
}
/* glow */
.btn::before {
 content: "";
 background: linear-gradient(
    45deg,
    #FF0000, #002BFF, #FF00C8, #002BFF,
      #FF0000, #002BFF, #FF00C8, #002BFF
);
 position: absolute;
 top: -2px;
 left: -2px;
 background-size: 600%;
 z-index: -1;
 width: calc(100% + 4px);
 height: calc(100% + 4px);
 filter: blur(8px);
 animation: glowing 20s linear infinite;
 transition: opacity .3s ease-in-out;
 border-radius: 10px;
 opacity: 0;
}

@keyframes glowing {
 0% {
  background-position: 0 0;
 }

 50% {
  background-position: 400% 0;
 }

 100% {
  background-position: 0 0;
 }
}

/* hover */
.btn:hover::before {
 opacity: 1;
}

.btn:active:after {
 background: transparent;
}

.btn:active {
 color: #000;
 font-weight: bold;
}
</style>


================================================
FILE: Buttons/ErzenXz_slimy-chicken-63.html
================================================
<button>
    Click
</button>
<style>
/* From Uiverse.io by ErzenXz - Tags: button */
button {
  width: fit-content;
  min-width: 100px;
  height: 45px;
  padding: 8px;
  border-radius: 5px;
  border: 2.5px solid #E0E1E4;
  box-shadow: 0px 0px 20px -20px;
  cursor: pointer;
  background-color: white;
  transition: all 0.2s ease-in-out 0ms;
  user-select: none;
  font-family: 'Poppins', sans-serif;
}

button:hover {
  background-color: #F2F2F2;
  box-shadow: 0px 0px 20px -18px;
}

button:active {
  transform: scale(0.95);
}
</style>


================================================
FILE: Buttons/FWDJc_moody-penguin-63.html
================================================
<!-- From Uiverse.io by FWDJc - Tags: button, click, hover button, egg -->
<button class="cursor-grab w-32 h-32 flex items-center justify-center rounded-full bg-white animate-bounce">
  <span class="h-20 w-20 rounded-full bg-yellow-500 hover:bg-red-500 relative rotate-90">
    <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <span class="block h-2 w-2 bg-black rounded-full"></span>
      <span class="block h-2 w-2 bg-black rounded-full mt-3"></span>
    </span>
  </span>
</button>



================================================
FILE: Buttons/Fadhilmagass_proud-quail-48.html
================================================
<button class="space-button">
  <span class="space-button-text">Explore Space</span>
  <svg class="space-button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12 0C8.411 0 5.418 2.993 5.418 6.582c0 3.153 2.443 5.792 5.595 6.473v2.526c0 .748.603 1.352 1.352 1.352s1.352-.604 1.352-1.352V13.05c3.152-.68 5.595-3.32 5.595-6.473C18.582 2.993 15.589 0 12 0zm0 9.288a3.706 3.706 0 1 1 0-7.412 3.706 3.706 0 0 1 0 7.412zM7.292 6.582c0-2.129 1.733-3.862 3.862-3.862s3.862 1.733 3.862 3.862c0 2.129-1.733 3.862-3.862 3.862s-3.862-1.733-3.862-3.862z"></path>
  </svg>
</button>

<style>
/* From Uiverse.io by Fadhilmagass  - Tags: icon, animation, button */
.space-button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  font-size: 1.25rem;
  color: #fff;
  background: -webkit-gradient(linear, left top, right bottom, from(#0a192f), to(#1c3548));
  background: linear-gradient(to bottom right, #0a192f, #1c3548);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.space-button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  -webkit-transition: width 0.3s ease, height 0.3s ease;
  transition: width 0.3s ease, height 0.3s ease;
}

.space-button:hover:before {
  width: 500px;
  height: 500px;
}

.space-button:hover .space-button-icon {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

.space-button:hover {
  background: -webkit-gradient(linear, left top, right bottom, from(#0b5ed7), to(#1c3548));
  background: linear-gradient(to bottom right, #0b5ed7, #1c3548);
}

.space-button:active {
  background-color: #0642ab;
}

.space-button-text {
  margin-right: 0.5rem;
}

.space-button-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
  margin-right: 0.5rem;
}

</style>
    

================================================
FILE: Buttons/Fatima-Zahrae-Acharki_witty-dolphin-100.html
================================================
<button class="btn">
  space
</button>
<style>
/* From Uiverse.io by Fatima-Zahrae-Acharki - Tags: button */
.btn {
  font-size: 16px;
  font-family: monospace;
  color: white;
  border-radius: 8px;
  letter-spacing: 5px;
  font-weight: 800;
  text-transform: uppercase;
  transition: 0.6s;
  padding: 10px 20px;
  border: none;
  transition-property: box-shadow;
}

.btn {
  background: #765ab5;
  box-shadow: 0 0 50px #765ab5;
}

.btn:hover {
  box-shadow: 0 0 5px #765ab5,
              0 0 25px #352552,
              0 0 50px #352552,
              0 0 100px #765ab5,
              0 0 500px #765ab5;
}
</style>


================================================
FILE: Buttons/G4b413l_slippery-owl-85.html
================================================

<button class="buttonDownload">Download</button>
<style>
/* From Uiverse.io by G4b413l - Tags: button, download */
.buttonDownload {
 display: inline-block;
 position: relative;
 padding: 10px 25px;
 background-color: #4CC713;
 color: white;
 font-family: sans-serif;
 text-decoration: none;
 font-size: 0.9em;
 text-align: center;
 text-indent: 15px;
 border: none;
}

.buttonDownload:hover {
 background-color: #45a21a;
 color: white;
}

.buttonDownload:before, .buttonDownload:after {
 content: ' ';
 display: block;
 position: absolute;
 left: 15px;
 top: 52%;
}

.buttonDownload:before {
 width: 10px;
 height: 2px;
 border-style: solid;
 border-width: 0 2px 2px;
}

.buttonDownload:after {
 width: 0;
 height: 0;
 margin-left: 3px;
 margin-top: -7px;
 border-style: solid;
 border-width: 4px 4px 0 4px;
 border-color: transparent;
 border-top-color: inherit;
 animation: downloadArrow 1s linear infinite;
 animation-play-state: paused;
}

.buttonDownload:hover:before {
 border-color: #cdefbd;
}

.buttonDownload:hover:after {
 border-top-color: #cdefbd;
 animation-play-state: running;
}

@keyframes downloadArrow {
 0% {
  margin-top: -7px;
  opacity: 1;
 }

 0.001% {
  margin-top: -15px;
  opacity: 0.4;
 }

 50% {
  opacity: 1;
 }

 100% {
  margin-top: 0;
  opacity: 0.4;
 }
}
</style>


================================================
FILE: Buttons/Galahhad_ancient-emu-61.html
================================================
<button class="ui-btn">
  <span>
    Button 
  </span>
</button>
<style>
/* From Uiverse.io by Galahhad - Tags: button, glitch */
.ui-btn {
  --btn-default-bg: rgb(41, 41, 41);
  --btn-padding: 15px 20px;
  --btn-hover-bg: rgb(51, 51, 51);
  --btn-transition: .3s;
  --btn-letter-spacing: .1rem;
  --btn-animation-duration: 1.2s;
  --btn-shadow-color: rgba(0, 0, 0, 0.137);
  --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
  --hover-btn-color: #FAC921;
  --default-btn-color: #fff;
  --font-size: 16px;
  /* 👆 this field should not be empty */
  --font-weight: 600;
  --font-family: Menlo,Roboto Mono,monospace;
  /* 👆 this field should not be empty */
}

/* button settings 👆 */

.ui-btn {
  box-sizing: border-box;
  padding: var(--btn-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-btn-color);
  font: var(--font-weight) var(--font-size) var(--font-family);
  background: var(--btn-default-bg);
  border: none;
  cursor: pointer;
  transition: var(--btn-transition);
  overflow: hidden;
  box-shadow: var(--btn-shadow);
}

.ui-btn span {
  letter-spacing: var(--btn-letter-spacing);
  transition: var(--btn-transition);
  box-sizing: border-box;
  position: relative;
  background: inherit;
}

.ui-btn span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  background: inherit;
}

.ui-btn:hover, .ui-btn:focus {
  background: var(--btn-hover-bg);
}

.ui-btn:hover span, .ui-btn:focus span {
  color: var(--hover-btn-color);
}

.ui-btn:hover span::before, .ui-btn:focus span::before {
  animation: chitchat linear both var(--btn-animation-duration);
}

@keyframes chitchat {
  0% {
    content: "#";
  }

  5% {
    content: ".";
  }

  10% {
    content: "^{";
  }

  15% {
    content: "-!";
  }

  20% {
    content: "#$_";
  }

  25% {
    content: "№:0";
  }

  30% {
    content: "#{+.";
  }

  35% {
    content: "@}-?";
  }

  40% {
    content: "?{4@%";
  }

  45% {
    content: "=.,^!";
  }

  50% {
    content: "?2@%";
  }

  55% {
    content: "\;1}]";
  }

  60% {
    content: "?{%:%";
    right: 0;
  }

  65% {
    content: "|{f[4";
    right: 0;
  }

  70% {
    content: "{4%0%";
    right: 0;
  }

  75% {
    content: "'1_0<";
    right: 0;
  }

  80% {
    content: "{0%";
    right: 0;
  }

  85% {
    content: "]>'";
    right: 0;
  }

  90% {
    content: "4";
    right: 0;
  }

  95% {
    content: "2";
    right: 0;
  }

  100% {
    content: "";
    right: 0;
  }
}
</style>


================================================
FILE: Buttons/Galahhad_kind-cheetah-52.html
================================================
<button class="copy">
  <span data-text-end="Copied!" data-text-initial="Copy to clipboard" class="tooltip"></span>
  <span>
    <svg xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 6.35 6.35" y="0" x="0" height="20" width="20" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg" class="clipboard">
      <g>
        <path fill="currentColor" d="M2.43.265c-.3 0-.548.236-.573.53h-.328a.74.74 0 0 0-.735.734v3.822a.74.74 0 0 0 .735.734H4.82a.74.74 0 0 0 .735-.734V1.529a.74.74 0 0 0-.735-.735h-.328a.58.58 0 0 0-.573-.53zm0 .529h1.49c.032 0 .049.017.049.049v.431c0 .032-.017.049-.049.049H2.43c-.032 0-.05-.017-.05-.049V.843c0-.032.018-.05.05-.05zm-.901.53h.328c.026.292.274.528.573.528h1.49a.58.58 0 0 0 .573-.529h.328a.2.2 0 0 1 .206.206v3.822a.2.2 0 0 1-.206.205H1.53a.2.2 0 0 1-.206-.205V1.529a.2.2 0 0 1 .206-.206z"></path>
      </g>
    </svg>
    <svg xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 24 24" y="0" x="0" height="18" width="18" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg" class="checkmark">
      <g>
        <path data-original="#000000" fill="currentColor" d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"></path>
      </g>
    </svg>
  </span>
</button>
<style>
/* From Uiverse.io by Galahhad - Tags: icon, button, copy, clipboard */
/* tooltip settings 👇 */

.copy {
  /* button */
  --button-bg: #353434;
  --button-hover-bg: #464646;
  --button-text-color: #CCCCCC;
  --button-hover-text-color: #8bb9fe;
  --button-border-radius: 10px;
  --button-diameter: 36px;
  --button-outline-width: 1px;
  --button-outline-color: rgb(141, 141, 141);
  /* tooltip */
  --tooltip-bg: #f4f3f3;
  --toolptip-border-radius: 4px;
  --tooltip-font-family: Menlo, Roboto Mono, monospace;
  /* 👆 this field should not be empty */
  --tooltip-font-size: 12px;
  /* 👆 this field should not be empty */
  --tootip-text-color: rgb(50, 50, 50);
  --tooltip-padding-x: 7px;
  --tooltip-padding-y: 7px;
  --tooltip-offset: 8px;
  /* --tooltip-transition-duration: 0.3s; */
  /* 👆 if you need a transition, 
  just remove the comment,
  but I didn't like the transition :| */
}

.copy {
  box-sizing: border-box;
  width: var(--button-diameter);
  height: var(--button-diameter);
  border-radius: var(--button-border-radius);
  background-color: var(--button-bg);
  color: var(--button-text-color);
  border: none;
  cursor: pointer;
  position: relative;
  outline: none;
}

.tooltip {
  position: absolute;
  opacity: 0;
  visibility: 0;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font: var(--tooltip-font-size) var(--tooltip-font-family);
  color: var(--tootip-text-color);
  background: var(--tooltip-bg);
  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
  border-radius: var(--toolptip-border-radius);
  pointer-events: none;
  transition: all var(--tooltip-transition-duration) cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.tooltip::before {
  content: attr(data-text-initial);
}

.tooltip::after {
  content: "";
  position: absolute;
  bottom: calc(var(--tooltip-padding-y) / 2 * -1);
  width: var(--tooltip-padding-y);
  height: var(--tooltip-padding-y);
  background: inherit;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  z-index: -999;
  pointer-events: none;
}

.copy svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.checkmark {
  display: none;
}

/* actions */

.copy:hover .tooltip,
.copy:focus:not(:focus-visible) .tooltip {
  opacity: 1;
  visibility: visible;
  top: calc((100% + var(--tooltip-offset)) * -1);
}

.copy:focus:not(:focus-visible) .tooltip::before {
  content: attr(data-text-end);
}

.copy:focus:not(:focus-visible) .clipboard {
  display: none;
}

.copy:focus:not(:focus-visible) .checkmark {
  display: block;
}

.copy:hover,
.copy:focus {
  background-color: var(--button-hover-bg);
}

.copy:active {
  outline: var(--button-outline-width) solid var(--button-outline-color);
}

.copy:hover svg {
  color: var(--button-hover-text-color);
}
</style>


================================================
FILE: Buttons/Galahhad_odd-yak-40.html
================================================
<!-- From Uiverse.io by Galahhad - Tags: button, pixelart, animated -->
<button class="group cursor-none relative cursor-default w-[120px] h-[60px] bg-[linear-gradient(144deg,_#af40ff,_#5b42f3_50%,_#00ddeb)] text-white whitespace-nowrap flex flex-wrap rounded-lg overflow-hidden before:content-['Just_hover'] before:pointer-events-none before:absolute before:z-[1] before:top-[50%] before:left-[50%] before:translate-y-[-50%] before:translate-x-[-50%] after:content-['Click!'] after:absolute after:top-[50%] after:left-[-100%] after:duration-[.4s] after:pointer-events-none before:duration-[.4s] after:translate-x-[-50%] after:translate-y-[-50%] hover:before:translate-x-[100%] hover:after:left-[50%] focus:after:opacity-0 focus:before:opacity-0">
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.5s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[3.5s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.9s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[3.45s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[3.6s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[3.65s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.15s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[3.55s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.85s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[3.4s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.55s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[3.25s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[3.35s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[3.3s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.05s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:blur-none group-focus:delay-[3.05s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[3.15s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.75s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:blur-none group-focus:delay-[3.2s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[3.1s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.8s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2.9s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent delay-0"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2.05s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.15s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[3s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2.85s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:blur-none group-focus:delay-[0.6s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2.1s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.3s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:blur-none group-focus:delay-[1.6s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.7s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.9s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2.75s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.2s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2.8s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.1s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:blur-none group-focus:delay-[2.7s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.55s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2.15s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.65s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2.65s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.45s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.1s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:blur-none group-focus:delay-[0.85s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.7s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.5s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.25s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.65s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.25s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:blur-none group-focus:delay-[2.6s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:blur-none group-focus:delay-[2.2s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:blur-none group-focus:delay-[1.45s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:blur-none group-focus:delay-[2.55s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:blur-none group-focus:delay-[0.2s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:blur-none group-focus:delay-[1s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2.25s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.35s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2.45s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2.5s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.8s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.3s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2.3s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.4s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2.4s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.75s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.05s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[2.35s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[0.4s]"></div>
  <div class="w-[10px] h-[10px] blur-[5px] bg-[rgb(30,41,59)] delay-[0.2s] duration-[0.4s] hover:bg-transparent hover:delay-0 hover:duration-0 group-focus:bg-transparent group-focus:delay-[1.35s]"></div>
</button>



================================================
FILE: Buttons/Gaurav-WebDev_hard-cougar-70.html
================================================
<button class="button">
  <p class="btn-txt">Hello !</p>
</button>

<style>
/* From Uiverse.io by Gaurav-WebDev  - Tags: simple, button, hover, smooth, btn, hover effect */
.button {
  height: 50px;
  width: 150px;
  font-weight: 800;
  border: none;
  background-color: #3434;
  color: #ffff;
  border-radius: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.7s;
}

.button::after {
  content: "Me";
  height: 100%;
  width: 50%;
  background-color: coral;
  position: absolute;
  right: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 10px;
  box-sizing: border-box;
  transition: all 0.7s;
}

.button::before {
  content: "Hover";
  height: 100%;
  width: 50%;
  background-color: teal;
  position: absolute;
  left: 0px;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: end;
  padding-right: 10px;
  box-sizing: border-box;
  transition: all 0.7s;
}

.button:hover::after {
  right: -100px;
}

.button:hover::before {
  left: -100px;
}

.button:hover {
  background-color: #000;
  color: #fff;
  transform: scale(1.2);
}

</style>
    

================================================
FILE: Buttons/Gaurav-WebDev_tall-mayfly-60.html
================================================
<button class="button type1">
  <span class="btn-txt">Hello</span>
</button>

<style>
/* From Uiverse.io by Gaurav-WebDev  - Tags: black, button, dark, animated, hover effect */
.button {
  height: 50px;
  width: 200px;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 2px solid #252525;
  overflow: hidden;
  border-radius: 30px;
  color: #333;
  transition: all 0.5s ease-in-out;
}

.btn-txt {
  z-index: 1;
  font-weight: 800;
  letter-spacing: 4px;
}

.type1::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.5s ease-in-out;
  background-color: #333;
  border-radius: 30px;
  visibility: hidden;
  height: 10px;
  width: 10px;
  z-index: -1;
}

.button:hover {
  box-shadow: 1px 1px 200px #252525;
  color: #fff;
  border: none;
}

.type1:hover::after {
  visibility: visible;
  transform: scale(100) translateX(2px);
}

</style>
    

================================================
FILE: Buttons/Gaurav-WebDev_tame-hound-72.html
================================================
<button class="button type1">
</button>
<style>
/* From Uiverse.io by Gaurav-WebDev - Tags: button, hover effect, cool btn */
.button {
  height: 50px;
  width: 150px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.button:hover {
  box-shadow: .5px .5px 150px #252525;
}

.type1::after {
  content: "Thanks";
  height: 50px;
  width: 150px;
  background-color: #008080;
  color: #fff;
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateY(50px);
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}

.type1::before {
  content: "Hover Me";
  height: 50px;
  width: 150px;
  background-color: #fff;
  color: #008080;
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateY(0px) scale(1.2);
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}

.type1:hover::after {
  transform: translateY(0) scale(1.2);
}

.type1:hover::before {
  transform: translateY(-50px) scale(0) rotate(120deg);
}
</style>


================================================
FILE: Buttons/Gautammsharma_funny-fly-33.html
================================================
<button class="comic-button">Click me!</button>

<style>
/* From Uiverse.io by Gautammsharma - Tags: button */
.comic-button {
  background-color: #ffed4b;
  border: none;
  color: #000;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #fff;
  box-shadow: 4px 4px 0 #000;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.comic-button:before {
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  width: 150%;
  height: 150%;
  background-color: rgba(0,0,0,0.2);
  transform: rotate(45deg);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.comic-button:hover {
  transform: translate(2px, 2px);
  box-shadow: 6px 6px 0 #000;
}

.comic-button:hover:before {
  opacity: 1;
}

.comic-button:active {
  transform: translate(0px, 0px);
  box-shadow: 4px 4px 0 #000;
}

.comic-button:active:before {
  opacity: 0;
}

</style>


================================================
FILE: Buttons/Gautammsharma_silent-turtle-50.html
================================================
<button class="comic-btn">Click me!</button>

<style>
/* From Uiverse.io by Gautammsharma - Tags: button */
.comic-btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 2rem;
  border: none;
  background-color: #ff7675;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 2px 2px #000;
  box-shadow: 6px 6px 0px #d63031;
  cursor: pointer;
  transition: all 0.3s ease;
}

.comic-btn:hover {
  background-color: #fdcb6e;
  box-shadow: 4px 4px 0px #e17055;
  transform: translate(2px, 2px);
}

.comic-btn:active {
  background-color: #e17055;
  box-shadow: 0px 0px 0px #d63031;
  transform: translate(6px, 6px);
}

</style>


================================================
FILE: Buttons/Gautammsharma_wicked-cobra-3.html
================================================
<button class="comic-button">Click me!</button>
<style>
/* From Uiverse.io by Gautammsharma - Tags: button */
.comic-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #ff5252;
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 5px 5px 0px #000;
  transition: all 0.3s ease;
}

.comic-button:hover {
  background-color: #fff;
  color: #ff5252;
  border: 2px solid #ff5252;
  box-shadow: 5px 5px 0px #ff5252;
}

.comic-button:active {
  background-color: #fcf414;
  box-shadow: none;
  transform: translateY(4px);
}

</style>


================================================
FILE: Buttons/GetYourCode8605_ordinary-wombat-64.html
================================================
<button type="button" class="glow-on-hover">
  HOVER AND CLICK ME!
</button>
<style>
/* From Uiverse.io by GetYourCode8605 - Tags: button */
.glow-on-hover {
  width: 220px;
  height: 50px;
  border: none;
  outline: none;
  color: #fff;
  background: rgb(17, 17, 17);
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  font-weight: 600;
}

.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing_54134 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #000
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing_54134 {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}
</style>


================================================
FILE: Buttons/Gianluks90_strange-snake-10.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by Gianluks90 - Tags: button */
button {
  padding: 1em 2em;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #504f4f;
  border: none;
  background: #e0e0e0;
  -webkit-box-shadow: 10px 10px 30px #bebebe, -20px -20px 60px #ffffff;
  box-shadow: 10px 10px 30px #bebebe, -20px -20px 60px #ffffff;
}

button:hover {
  background: #e0e0e0;
  -webkit-box-shadow: inset 10px 10px 30px #bebebe, inset -10px -10px 30px #ffffff;
  box-shadow: inset 10px 10px 30px #bebebe, inset -10px -10px 30px #ffffff;
}
</style>


================================================
FILE: Buttons/Github-Suriya_chilly-wasp-20.html
================================================
<button>
  <div class="svg-name-con">
    <div class="svg-wrapper-1">
      <div class="svg-wrapper">
        <svg
          height="24"
          width="24"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
            fill="currentColor"
          ></path>
        </svg>
      </div>
    </div>
    <span>Send Message</span>
  </div>
</button>

<style>
/* From Uiverse.io by Github-Suriya  - Tags: material design, white, button, smooth, message */
button {
  font-family: inherit;
  font-size: 20px;
  background: #eef0ee;
  padding: 0.3em;
  border: none;
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
  box-shadow: 0px 0px 6px #c5c5c5;
}

button span {
  display: block;
  margin-left: 0.3em;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}

button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

button .svg-name-con {
  background: #fcfdfc;
  border-radius: 25px;
  display: flex;
  align-items: center;
  padding: 0.7em 1em;
}

button:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

button:hover svg {
  transform: translateX(4.2em) rotate(45deg) scale(1.1);
}

button:hover span {
  transform: translateX(9em);
}

button:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}

</style>
    

================================================
FILE: Buttons/Gumpack_jolly-zebra-42.html
================================================
<button class="btn"> Button
</button>
<style>
/* From Uiverse.io by Gumpack - Tags: button */
.btn {
 background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%)
}

.btn {
 margin: 10px;
 padding: 15px 30px;
 text-align: center;
 text-transform: uppercase;
 transition: 0.5s;
 background-size: 200% auto;
 color: white;
 border-radius: 10px;
 display: block;
 border: 0px;
 font-weight: 700;
 box-shadow: 0px 0px 14px -7px #f09819;
}

.btn:hover {
 background-position: right center;
 /* change the direction of the change here */
 color: #fff;
 text-decoration: none;
}

.btn:active {
 transform: scale(0.95);
}
</style>


================================================
FILE: Buttons/HarryProCW_shaggy-snail-5.html
================================================
<!-- From Uiverse.io by HarryProCW - Tags: button, animated, talwindCSS -->
<button class="hover:brightness-110 hover:animate-pulse font-bold py-3 px-6 rounded-full bg-indigo-500 shadow-lg shadow-indigo-500/50 text-white">Click on me</button>



================================================
FILE: Buttons/HauNTH_dull-donkey-56.html
================================================
<ul class="social">
  <li class="social-item">
    <a class="social-link" href="/">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9.19795 21.5H13.198V13.4901H16.8021L17.198 9.50977H13.198V7.5C13.198 6.94772 13.6457 6.5 14.198 6.5H17.198V2.5H14.198C11.4365 2.5 9.19795 4.73858 9.19795 7.5V9.50977H7.19795L6.80206 13.4901H9.19795V21.5Z" fill="currentColor"></path>
      </svg>
    </a>
  </li>
  <li class="social-item">
    <a class="social-link" href="/">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M8 3C9.10457 3 10 3.89543 10 5V8H16C17.1046 8 18 8.89543 18 10C18 11.1046 17.1046 12 16 12H10V14C10 15.6569 11.3431 17 13 17H16C17.1046 17 18 17.8954 18 19C18 20.1046 17.1046 21 16 21H13C9.13401 21 6 17.866 6 14V5C6 3.89543 6.89543 3 8 3Z" fill="currentColor"></path>
      </svg>
    </a>
  </li>
  <li class="social-item">
    <a class="social-link" href="/">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M6 12C6 15.3137 8.68629 18 12 18C14.6124 18 16.8349 16.3304 17.6586 14H12V10H21.8047V14H21.8C20.8734 18.5645 16.8379 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C15.445 2 18.4831 3.742 20.2815 6.39318L17.0039 8.68815C15.9296 7.06812 14.0895 6 12 6C8.68629 6 6 8.68629 6 12Z" fill="currentColor"></path>
      </svg>
    </a>
  </li>
  <li class="social-item">
    <a class="social-link" href="/">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7ZM9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12Z" fill="currentColor"></path>
        <path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="currentColor"></path>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M5 1C2.79086 1 1 2.79086 1 5V19C1 21.2091 2.79086 23 5 23H19C21.2091 23 23 21.2091 23 19V5C23 2.79086 21.2091 1 19 1H5ZM19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z" fill="currentColor"></path>
      </svg>
    </a>
  </li>
</ul>
<style>
/* From Uiverse.io by HauNTH - Source: https://www.youtube.com/@OnlineTutorialsYT - Tags: social, social media, social lincks */
.social {
  margin: 0;
  list-style: none;
  padding-left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.social .social-item {
  margin: 0 30px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social .social-item .social-link {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  text-align: center;
  transform: perspective(1000px) rotate(-30deg) skew(25deg)
    translate(0, 0);
  transition: all 0.4s ease;
}

.social .social-item .social-link::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -10px;
  height: 100%;
  width: 10px;
  background: #b1b1b1;
  transition: all 0.4s ease;
  transform: rotate(0deg) skewY(-45deg);
}

.social .social-item .social-link::after {
  content: "";
  position: absolute;
  top: 40px;
  left: -5px;
  height: 10px;
  width: 100%;
  background: #b1b1b1;
  transition: all 0.4s ease;
  transform: rotate(0deg) skewX(-45deg);
}

.social .social-item .social-link:hover {
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(5px, -5px);
  box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);
}

.social .social-item:nth-child(1) a {
  color: #3b5999;
}

.social .social-item:nth-child(1):hover a {
  background: #3b5999;
}

.social .social-item:nth-child(1):hover a::before {
  background: #3b5999;
}

.social .social-item:nth-child(1):hover a::after {
  background: #3b5999;
}

.social .social-item:nth-child(2) a {
  color: #55acee;
}

.social .social-item:nth-child(2):hover a {
  background: #55acee;
}

.social .social-item:nth-child(2):hover a::before {
  background: #55acee;
}

.social .social-item:nth-child(2):hover a::after {
  background: #55acee;
}

.social .social-item:nth-child(3) a {
  color: #dd4b39;
}

.social .social-item:nth-child(3):hover a {
  background: #dd4b39;
}

.social .social-item:nth-child(3):hover a::before {
  background: #dd4b39;
}

.social .social-item:nth-child(3):hover a::after {
  background: #dd4b39;
}

.social .social-item:nth-child(4) a {
  color: #e4405f;
}

.social .social-item:nth-child(4):hover a {
  background: #e4405f;
}

.social .social-item:nth-child(4):hover a::before {
  background: #e4405f;
}

.social .social-item:nth-child(4):hover a::after {
  background: #e4405f;
}

.social .social-item .social-link:hover {
  color: #ffffff;
}


</style>


================================================
FILE: Buttons/HecktorViegas_green-cow-45.html
================================================
<button class="button">
  <span>Join Today</span>

  <svg
    class="icon"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
    stroke-width="2"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      d="M17 8l4 4m0 0l-4 4m4-4H3"
    ></path>
  </svg>
</button>

<style>
/* From Uiverse.io by HecktorViegas  - Tags: button */
.button {
  cursor: pointer;
  display: flex;
  text-wrap: nowrap;
  align-items: center;
  gap: 0.9rem;
  padding: 1.5rem 2rem;
  border-radius: 1.2rem;
  background: linear-gradient(to bottom, #e3a8fc, #8d38cf);
  box-sizing: border-box;
  box-shadow:
    -3px 5px 1.5px #5a2982,
    -15px 12px 20px #5a2982ba;
  border: none;
  transform: rotate3d(2, -1, 1, 343deg) rotatex(27deg) scale(0.9);
  color: #ffcaf7;
  font-weight: bold;
  font-size: 1.2rem;
  transition: all 0.2s;
}

.button:before {
  content: "";
  width: 97%;
  position: absolute;
  height: 91%;
  top: 4.5%;
  z-index: -2;
  left: 1.3%;
  border-radius: 1.1rem;
  box-shadow: inset 0 -5px 5px -1px #7926bc;
  background: linear-gradient(to bottom, #d591ff, #7f2dc2);
}

.button:hover {
  transition: all 0.2s;
  transform: scale(1.2);
  box-shadow: inset -0.5px -3px 3px 1px #7926bc;
}

.button:active {
  transition: all 0.1s;
  box-shadow: inset 2px 2px 3px #5a2982ba;
  transform: scale(1.15);
}

.icon {
  width: 1.8rem;
  height: 1.8rem;
}

.button span {
  background: -webkit-linear-gradient(#ffe4fe, #ffcaf7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

</style>
    

================================================
FILE: Buttons/Hysean2_unlucky-cat-84.html
================================================
<button class="button">Click me</button>

<style>
/* From Uiverse.io by Hysean2  - Tags: simple, minimalist, button, modern */
.button {
  cursor: pointer;
  padding: 1em 1.8em;
  border-radius: 2em;
  border: 3px solid #414141;
  font-weight: bold;
  font-size: 1em;
  color: white;
  background-color: #222222;
  transition: transform 0.3s ease;
}

.button:hover {
  transform: scale(1.15);
  border: none;
  background: linear-gradient(
    -80deg,
    rgba(150, 93, 233, 1) 10%,
    rgba(99, 88, 238, 1) 95%
  );
}

.button:active {
  transform: scale(0.95);
}

</style>
    

================================================
FILE: Buttons/Iliasman2_grumpy-lizard-3.html
================================================
<button class="designer-btn">Click me</button>

<style>
/* From Uiverse.io by Iliasman2 - Tags: button */
.designer-btn {
  display: inline-block;
  padding: 14px 40px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  border-radius: 30px;
  cursor: pointer;
  border: 2px solid black;
  transition: all 0.3s ease;
  background: linear-gradient(to bottom, #b2b5b3, #a5a7a6);
  color: rgb(57, 53, 53);
}

.designer-btn:hover {
  border: 2px solid rgb(109, 107, 107);
  color: #a5a7a6;
  box-shadow: 0 5px #666;
  transform: translateY(-5px);
  background: linear-gradient(to bottom, #2e2f2e, #323433);
}

.designer-btn:focus,
.designer-btn:active {
  transform: translateY(4px);
}
  

</style>


================================================
FILE: Buttons/ItsEnigma143_silent-donkey-68.html
================================================
<!-- From Uiverse.io by ItsEnigma143  - Tags: simple, button, hover, active, click, buttons, tailwind, 2d button -->
<div class="w-[150px] h-[50px]">
  <button
    class="w-[140px] h-[40px] shadow-2xl bg-sky-600 outline outline-offset-2 outline-1 outline-sky-600 hover:scale-[1.03] hover:outline-none duration-300 active:scale-[0.99]"
  >
    <a class="font-bold" href="#">Button</a>
  </button>
</div>


    

================================================
FILE: Buttons/ItsEnigma143_tender-ape-26.html
================================================
<!-- From Uiverse.io by ItsEnigma143  - Tags: button, hover, hover effect, hoverme, box-shadow, #button, tailwind, tailwindcss -->
<div
  class="max-w-32 bg-transparent items-center justify-center flex border-2 border-sky-500 shadow-lg hover:bg-sky-500 text-sky-500 hover:text-white duration-300 cursor-pointer active:scale-[0.98]"
>
  <button class="px-5 py-2"><a class="" href="">Click Me</a></button>
</div>


    

================================================
FILE: Buttons/Itskrish01_angry-bird-46.html
================================================
<!-- From Uiverse.io by Itskrish01  - Tags: button -->
<button
  class="cursor-pointer transistion-all duration-500 hover:shadow-[0_15px_50px_-15px_#13b6da] p-[12px] rounded-[24px] flex gap-4 bg-gradient-to-r from-[#2891c5] to-[#13b6da]"
>
  <svg
    class="h-12 w-12 bg-[#0a0a0a] shadow-xl rounded-full p-3"
    viewBox="0 0 24 24"
    fill="none"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M15.003 14H3.5v-4h11.502l-4.165-4.538 2.705-2.947 7.353 8.012c.747.813.747 2.133 0 2.947l-7.353 8.011-2.705-2.947L15.003 14z"
      fill="#F0F0F0"
    ></path>
  </svg>
  <span class="text-[1.9rem] font-bold text-white pr-3">Play Now</span>
</button>


    

================================================
FILE: Buttons/Itskrish01_chatty-lionfish-23.html
================================================
<!-- From Uiverse.io by Itskrish01  - Tags: file, fileupload, upload] -->
<div class="relative w-full group">
  <div
    class="relative z-40 cursor-pointer group-hover:translate-x-8 group-hover:shadow-2xl group-hover:-translate-y-8 transition-all duration-500 bg-neutral-900 flex items-center justify-center h-32 w-32 mx-auto rounded-xl"
  >
    <svg
      class="h-6 w-6 text-white/60"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="currentColor"
      fill="none"
      viewBox="0 0 24 24"
      height="24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
      <path d="M7 9l5 -5l5 5"></path>
      <path d="M12 4l0 12"></path>
    </svg>
  </div>
  <div
    class="absolute border opacity-0 group-hover:opacity-80 transition-all duration-300 border-dashed border-sky-400 inset-0 z-30 bg-transparent flex items-center justify-center h-32 w-32 mx-auto rounded-xl"
  ></div>
</div>


    

================================================
FILE: Buttons/Itskrish01_dry-cougar-15.html
================================================
<!-- From Uiverse.io by Itskrish01  - Tags: button -->
<button
  class="relative px-10 py-3.5 overflow-hidden group bg-gradient-to-r from-gray-700 to-black relative hover:bg-gradient-to-r hover:from-gray-600 hover:to-black text-white transition-all ease-out duration-300"
>
  <span
    class="absolute right-0 w-10 h-full top-0 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 -skew-x-12 group-hover:-translate-x-36 ease"
  ></span>
  <span class="relative text-xl font-semibold">Text Button</span>
</button>


    

================================================
FILE: Buttons/Itskrish01_giant-chipmunk-98.html
================================================
<!-- From Uiverse.io by Itskrish01  - Website: https://ui.aceternity.com/ - Name: aceternity - Tags: button -->
<button
  class="px-12 py-4 rounded-full bg-[#1ED760] font-bold text-white tracking-widest uppercase transform hover:scale-105 hover:bg-[#21e065] transition-colors duration-200"
>
  Spotify
</button>


    

================================================
FILE: Buttons/Itskrish01_loud-squid-89.html
================================================
<!-- From Uiverse.io by Itskrish01  - Tags: button -->
<div class="relative group">
  <div
    class="relative w-64 h-14 opacity-90 overflow-hidden rounded-xl bg-black z-10"
  >
    <div
      class="absolute z-10 -translate-x-44 group-hover:translate-x-[30rem] ease-in transistion-all duration-700 h-full w-44 bg-gradient-to-r from-gray-500 to-white/10 opacity-30 -skew-x-12"
    ></div>

    <div
      class="absolute flex items-center justify-center text-white z-[1] opacity-90 rounded-2xl inset-0.5 bg-black"
    >
      <button
        name="text"
        class="input font-semibold text-lg h-full opacity-90 w-full px-16 py-3 rounded-xl bg-black"
      >
        Get Started
      </button>
    </div>
    <div
      class="absolute duration-1000 group-hover:animate-spin w-full h-[100px] bg-gradient-to-r from-green-500 to-yellow-500 blur-[30px]"
    ></div>
  </div>
</div>


    

================================================
FILE: Buttons/Itskrish01_soft-skunk-68.html
================================================
<!-- From Uiverse.io by Itskrish01  - Website: https://devdojo.com/tailwindcss/buttons - Name: devdojo - Tags: button, tailwind -->
<button
  class="relative flex items-center px-6 py-3 overflow-hidden font-medium transition-all bg-indigo-500 rounded-md group"
>
  <span
    class="absolute top-0 right-0 inline-block w-4 h-4 transition-all duration-500 ease-in-out bg-indigo-700 rounded group-hover:-mr-4 group-hover:-mt-4"
  >
    <span
      class="absolute top-0 right-0 w-5 h-5 rotate-45 translate-x-1/2 -translate-y-1/2 bg-white"
    ></span>
  </span>
  <span
    class="absolute bottom-0 rotate-180 left-0 inline-block w-4 h-4 transition-all duration-500 ease-in-out bg-indigo-700 rounded group-hover:-ml-4 group-hover:-mb-4"
  >
    <span
      class="absolute top-0 right-0 w-5 h-5 rotate-45 translate-x-1/2 -translate-y-1/2 bg-white"
    ></span>
  </span>
  <span
    class="absolute bottom-0 left-0 w-full h-full transition-all duration-500 ease-in-out delay-200 -translate-x-full bg-indigo-600 rounded-md group-hover:translate-x-0"
  ></span>
  <span
    class="relative w-full text-left text-white transition-colors duration-200 ease-in-out group-hover:text-white"
    >Get Started</span
  >
</button>


    

================================================
FILE: Buttons/Itskrish01_tough-frog-18.html
================================================
<!-- From Uiverse.io by Itskrish01  - Website: https://ui.aceternity.com/ - Name: aceternity - Tags: button -->
<button
  class="relative inline-flex h-12 active:scale-95 transistion overflow-hidden rounded-lg p-[1px] focus:outline-none"
>
  <span
    class="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#e7029a_0%,#f472b6_50%,#bd5fff_100%)]"
  >
  </span>
  <span
    class="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-slate-950 px-7 text-sm font-medium text-white backdrop-blur-3xl gap-2 undefined"
  >
    Contact me
    <svg
      stroke="currentColor"
      fill="currentColor"
      stroke-width="0"
      viewBox="0 0 448 512"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M429.6 92.1c4.9-11.9 2.1-25.6-7-34.7s-22.8-11.9-34.7-7l-352 144c-14.2 5.8-22.2 20.8-19.3 35.8s16.1 25.8 31.4 25.8H224V432c0 15.3 10.8 28.4 25.8 31.4s30-5.1 35.8-19.3l144-352z"
      ></path>
    </svg>
  </span>
</button>


    

================================================
FILE: Buttons/JOBOYA_tiny-goose-31.html
================================================
<!-- From Uiverse.io by JOBOYA  - Tags: card, card template, card animation -->
<div class="max-w-sm w-full mx-auto mt-5">
  <div
    class="animate-pulse flex space-x-4 border border-gray-300 shadow-lg p-4 rounded-lg"
  >
    <div class="rounded-full bg-gray-300 h-10 w-10"></div>
    <div class="flex-1 space-y-6 py-1">
      <div class="h-2 bg-gray-300 rounded"></div>
      <div class="space-y-3">
        <div class="grid grid-cols-3 gap-4">
          <div class="h-2 bg-gray-300 rounded col-span-2"></div>
          <div class="h-2 bg-gray-300 rounded col-span-1"></div>
        </div>
        <div class="h-2 bg-gray-300 rounded"></div>
      </div>
    </div>
  </div>
</div>


    

================================================
FILE: Buttons/JakkarinKr_tough-goat-61.html
================================================
<button>
  HOVER ME
</button>
<style>
/* From Uiverse.io by JakkarinKr - Tags: button */
button {
  width: 200px;
  height: 70px;
  border-radius: 12px;
  background-image: linear-gradient(to right, rgb(135, 108, 197),rgb(45, 241, 255));
  border: none;
  cursor: pointer;
  color: aliceblue;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: rgba(198, 67, 238, 0.4) -5px 5px, rgba(185, 46, 240, 0.3) -10px 10px;
}

button:hover {
  transform: translate(10px, -15px);
  box-shadow: rgba(198, 67, 238, 0.4) -5px 5px, rgba(185, 46, 240, 0.3) -10px 10px, rgba(198, 67, 238, 0.2) -15px 15px, rgba(198, 67, 238, 0.1) -20px 20px, rgba(198, 67, 238, 0.05) -25px 25px;
}

</style>


================================================
FILE: Buttons/JamesAchiver_fluffy-newt-25.html
================================================
<button class="button">
  <b>
  Button
  </b>
</button>
<style>
/* From Uiverse.io by JamesAchiver - Tags: button */
.button {
  position: relative;
  padding: 0.5em 1.2em;
  font-size: 1.8em;
  font-family: Calibri;
  background-color: #5b04bf;
  border: none;
  color: #FFF;
  cursor: pointer;
  align-items: center;
  box-shadow: inset 0px 38px 25px 0 #5b04bf, inset 0 0px 0px 0px #084748a8, inset 0 69px 0px 0px #d74589af;
  border-radius: 0.6em;
}

.button:hover {
  padding: 0.7em 1.4em;
  transition: 0.4s ease-in-out;
  box-shadow: inset 0px 38px 25px 5px #5b04bf, inset 10px 40px 10px 0px #084748a8, inset 0 69px 0px 0px #31b0d7de;
}

.button:active {
  box-shadow: 0.2em 0.2em 0.3em rgba(0,0,0,0.3);
  transform: translate(0.1em , 0.1em);
}
</style>


================================================
FILE: Buttons/JasonMep_modern-dragon-25.html
================================================

<button class="button">Click Here</button>
<style>
/* From Uiverse.io by JasonMep - Tags: button */
.button {
 color: #ecf0f1;
 font-size: 17px;
 background-color: #e67e22;
 border: 1px solid #f39c12;
 border-radius: 5px;
 padding: 10px;
 box-shadow: 0px 6px 0px #d35400;
 transition: all .1s;
}

.button:active {
 box-shadow: 0px 2px 0px #d35400;
 position: relative;
 top: 2px;
}
</style>


================================================
FILE: Buttons/Javierrocadev_angry-dodo-51.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: gradient, button, hover, hover effect, hoverme, hover button, tailwind, tailwindbutton -->
<button
  class="font-semibold group relative text-2xl bg-gradient-to-t from-slate-50 to-gray-200 text-zinc-800 rounded-full flex gap-4 px-4 py-4 before:w-64 before:h-20 before:bg-gradient-to-b from-slate-50 to-gray-200 before:-z-10 before:absolute before:-top-2 before:-left-2 before:rounded-xl before:border-2 before:border-zinc-400 before:shadow-xl before:hover:opacity-70 hover:shadow-xl hover:before:blur before:duration-500 duration-300"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    class="w-8 h-8 group-hover:scale-125 group-hover:rotate-45 duration-300"
  >
    <path
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="1.5"
      stroke="#292D32"
      d="M7.39999 6.32003L15.89 3.49003C19.7 2.22003 21.77 4.30003 20.51 8.11003L17.68 16.6C15.78 22.31 12.66 22.31 10.76 16.6L9.91999 14.08L7.39999 13.24C1.68999 11.34 1.68999 8.23003 7.39999 6.32003Z"
    ></path>
    <path
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="1.5"
      stroke="#292D32"
      d="M10.11 13.6501L13.69 10.0601"
    ></path>
  </svg>
  Send Message
</button>


    

================================================
FILE: Buttons/Javierrocadev_fat-snail-15.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: button, hover, svg, light&dark, hover effect, hoverme, hover button, button hover effect  -->
<button
  class="group flex justify-center items-center gap-2 group-hover:before:duration-500 group-hover:after:duration-500 after:duration-500 hover:border-neutral-900 duration-500 hover:duration-500 underline underline-offset-2 hover:underline hover:underline-offset-4 origin-left hover:decoration-2 hover:text-neutral-300 relative bg-neutral-900 px-10 py-4 border text-left p-3 text-gray-50 text-base font-bold rounded-lg overflow-hidden after:absolute after:z-10 after:w-12 after:h-12 after:content[''] after:bg-sky-900 after:-left-8 after:top-8 after:rounded-full after:blur-lg hover:after:animate-pulse"
>
  <svg
    class="w-6 h-6 fill-neutral-50"
    height="100"
    preserveAspectRatio="xMidYMid meet"
    viewBox="0 0 100 100"
    width="100"
    x="0"
    xmlns="http://www.w3.org/2000/svg"
    y="0"
  >
    <path
      class="svg-fill-primary"
      d="M50,1.23A50,50,0,0,0,34.2,98.68c2.5.46,3.41-1.09,3.41-2.41s0-4.33-.07-8.5c-13.91,3-16.84-6.71-16.84-6.71-2.28-5.77-5.55-7.31-5.55-7.31-4.54-3.1.34-3,.34-3,5,.35,7.66,5.15,7.66,5.15C27.61,83.5,34.85,81.3,37.7,80a10.72,10.72,0,0,1,3.17-6.69C29.77,72.07,18.1,67.78,18.1,48.62A19.34,19.34,0,0,1,23.25,35.2c-.52-1.26-2.23-6.34.49-13.23,0,0,4.19-1.34,13.75,5.13a47.18,47.18,0,0,1,25,0C72.07,20.63,76.26,22,76.26,22c2.72,6.89,1,12,.49,13.23a19.28,19.28,0,0,1,5.14,13.42c0,19.21-11.69,23.44-22.83,24.67,1.8,1.55,3.4,4.6,3.4,9.26,0,6.69-.06,12.08-.06,13.72,0,1.34.9,2.89,3.44,2.4A50,50,0,0,0,50,1.23Z"
    ></path>
  </svg>
  Github
</button>


    

================================================
FILE: Buttons/Javierrocadev_fuzzy-rabbit-3.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: gradient, button, hover, shadow, blur filter, hover effect, hover button, button hover effect  -->
<button class="group group-hover:before:duration-500 group-hover:after:duration-500 after:duration-500 hover:border-rose-300 hover:before:[box-shadow:_20px_20px_20px_30px_#a21caf] duration-500 before:duration-500 hover:duration-500 underline underline-offset-2 hover:after:-right-8 hover:before:right-12 hover:before:-bottom-8 hover:before:blur hover:underline hover:underline-offset-4  origin-left hover:decoration-2 hover:text-rose-300 relative bg-neutral-800 h-16 w-64 border text-left p-3 text-gray-50 text-base font-bold rounded-lg  overflow-hidden  before:absolute before:w-12 before:h-12 before:content[''] before:right-1 before:top-1 before:z-10 before:bg-violet-500 before:rounded-full before:blur-lg  after:absolute after:z-10 after:w-20 after:h-20 after:content['']  after:bg-rose-300 after:right-8 after:top-3 after:rounded-full after:blur-lg">
  See more
</button>





================================================
FILE: Buttons/Javierrocadev_hard-cheetah-69.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: blue, button, hover, hover effect, scale, hover button, tailwind, button hover effect  -->
<button class="relative border hover:border-sky-600 duration-500 group cursor-pointer text-sky-50  overflow-hidden h-14 w-56 rounded-md bg-sky-800 p-2 flex justify-center items-center font-extrabold">
  <div class="absolute z-10 w-48 h-48 rounded-full group-hover:scale-150 transition-all  duration-500 ease-in-out bg-sky-900 delay-150 group-hover:delay-75"></div>
  <div class="absolute z-10 w-40 h-40 rounded-full group-hover:scale-150 transition-all  duration-500 ease-in-out bg-sky-800 delay-150 group-hover:delay-100"></div>
  <div class="absolute z-10 w-32 h-32 rounded-full group-hover:scale-150 transition-all  duration-500 ease-in-out bg-sky-700 delay-150 group-hover:delay-150"></div>
  <div class="absolute z-10 w-24 h-24 rounded-full group-hover:scale-150 transition-all  duration-500 ease-in-out bg-sky-600 delay-150 group-hover:delay-200"></div>
  <div class="absolute z-10 w-16 h-16 rounded-full group-hover:scale-150 transition-all  duration-500 ease-in-out bg-sky-500 delay-150 group-hover:delay-300"></div>
  <p class="z-10">Discover More</p>
</button>






================================================
FILE: Buttons/Javierrocadev_selfish-goat-55.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: blue, button, hover, hover effect, hoverme -->
<button class="group relative w-28 h-12 text-neutral-50 bg-neutral-800 p-2 overflow-hidden">
  <p class="absolute  font-bold z-10  duration-500"> Button</p>
  <div class="">
    <div class="absolute duration-500 bg-cyan-600 w-4 h-16  bottom-12 group-hover:-bottom-1 delay-500 right-0"></div>
    <div class="absolute duration-500 bg-cyan-600 w-4 h-16  -bottom-16 group-hover:-bottom-1 right-4"></div>
    <div class="absolute duration-500 bg-cyan-600 w-4 h-16  bottom-12 group-hover:-bottom-1 delay-500 right-8"></div>
    <div class="absolute duration-500 bg-cyan-600 w-4 h-16  -bottom-16 group-hover:-bottom-1 right-12"></div>
    <div class="absolute duration-500 bg-cyan-600 w-4 h-16  bottom-12 group-hover:-bottom-1 delay-500 right-16"></div>
    <div class="absolute duration-500 bg-cyan-600 w-4 h-16  -bottom-16 group-hover:-bottom-1 right-20"></div>
    <div class="absolute duration-500 bg-cyan-600 w-4 h-16  bottom-12 group-hover:-bottom-1 delay-500 right-24"></div>
  </div>
  
</button>



================================================
FILE: Buttons/Javierrocadev_slimy-baboon-89.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: button, hover, dots, hover effect, hoverme, hover button -->
<button class="border text-gray-50  duration-300 relative group cursor-pointer   overflow-hidden h-16 w-48 rounded-md bg-neutral-800 p-2  font-extrabold hover:bg-sky-700">

  <div class="absolute group-hover:-top-1 group-hover:-right-2 z-10 w-16 h-16 rounded-full group-hover:scale-150  duration-700 right-12 top-12 bg-yellow-500"></div>
  <div class="absolute group-hover:-top-1 group-hover:-right-2 z-10 w-12 h-12 rounded-full group-hover:scale-150  duration-700 right-20 -top-6 bg-orange-500"></div>
  <div class="absolute group-hover:-top-1 group-hover:-right-2 z-10 w-8 h-8   rounded-full group-hover:scale-150  duration-700 right-32 top-6 bg-pink-500"></div>
  <div class="absolute group-hover:-top-1 group-hover:-right-2 z-10 w-4 h-4   rounded-full group-hover:scale-150  duration-700 right-2 top-12 bg-red-600"></div>
  <p class="z-10 absolute bottom-2 left-2">See more</p>
</button>




================================================
FILE: Buttons/Javierrocadev_slimy-eagle-32.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: simple, blue, button, hover, hover effect, hoverme -->
<button
  class="group w-12 hover:w-44 h-12 hover:bg-sky-600 relative bg-sky-700 rounded text-neutral-50 duration-700 before:duration-700 before:hover:500 font-bold flex justify-start gap-2 items-center p-2 pr-6 before:absolute before:-z-10 before:left-8 before:hover:left-40 before:w-6 before:h-6 before:bg-sky-700 before:hover:bg-sky-600 before:rotate-45"
>
  <svg
    y="0"
    xmlns="http://www.w3.org/2000/svg"
    x="0"
    width="100"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMidYMid meet"
    height="100"
    class="w-8 h-8 shrink-0 fill-neutral-50"
  >
    <path
      d="M92.86,0H7.12A7.17,7.17,0,0,0,0,7.21V92.79A7.17,7.17,0,0,0,7.12,100H92.86A7.19,7.19,0,0,0,100,92.79V7.21A7.19,7.19,0,0,0,92.86,0ZM30.22,85.71H15.4V38H30.25V85.71ZM22.81,31.47a8.59,8.59,0,1,1,8.6-8.59A8.6,8.6,0,0,1,22.81,31.47Zm63,54.24H71V62.5c0-5.54-.11-12.66-7.7-12.66s-8.91,6-8.91,12.26V85.71H39.53V38H53.75v6.52H54c2-3.75,6.83-7.7,14-7.7,15,0,17.79,9.89,17.79,22.74Z"
    ></path>
  </svg>
  <span
    class="origin-left inline-flex duration-100 group-hover:duration-300 group-hover:delay-500 opacity-0 group-hover:opacity-100 border-l-2 px-1 transform scale-x-0 group-hover:scale-x-100 transition-all"
    >Your Name</span
  >
</button>


    

================================================
FILE: Buttons/Javierrocadev_warm-moth-60.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: purple, button, hover, hover effect, hoverme, hover button, tailwind -->
<button
  class="overflow-hidden relative w-32 p-2 h-12 bg-black text-white border-none rounded-md text-xl font-bold cursor-pointer relative z-10 group"
>
  Hover me!
  <span
    class="absolute w-36 h-32 -top-8 -left-2 bg-white rotate-12 transform scale-x-0 group-hover:scale-x-100 transition-transform group-hover:duration-500 duration-1000 origin-left"
  ></span>
  <span
    class="absolute w-36 h-32 -top-8 -left-2 bg-purple-400 rotate-12 transform scale-x-0 group-hover:scale-x-100 transition-transform group-hover:duration-700 duration-700 origin-left"
  ></span>
  <span
    class="absolute w-36 h-32 -top-8 -left-2 bg-purple-600 rotate-12 transform scale-x-0 group-hover:scale-x-100 transition-transform group-hover:duration-1000 duration-500 origin-left"
  ></span>
  <span
    class="group-hover:opacity-100 group-hover:duration-1000 duration-100 opacity-0 absolute top-2.5 left-6 z-10"
    >Explore!</span
  >
</button>


    

================================================
FILE: Buttons/Javierrocadev_witty-ape-6.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: tooltip, blue, button, hover, linkedin, hover effect, hoverme, hover button -->
<button
  class="group hover:bg-sky-600 relative bg-sky-700 rounded text-neutral-50 duration-500 font-bold flex justify-start gap-2 items-center p-2 pr-6"
>
  <svg
    class="w-8 h-8 fill-neutral-50"
    height="100"
    preserveAspectRatio="xMidYMid meet"
    viewBox="0 0 100 100"
    width="100"
    x="0"
    xmlns="http://www.w3.org/2000/svg"
    y="0"
  >
    <path
      d="M92.86,0H7.12A7.17,7.17,0,0,0,0,7.21V92.79A7.17,7.17,0,0,0,7.12,100H92.86A7.19,7.19,0,0,0,100,92.79V7.21A7.19,7.19,0,0,0,92.86,0ZM30.22,85.71H15.4V38H30.25V85.71ZM22.81,31.47a8.59,8.59,0,1,1,8.6-8.59A8.6,8.6,0,0,1,22.81,31.47Zm63,54.24H71V62.5c0-5.54-.11-12.66-7.7-12.66s-8.91,6-8.91,12.26V85.71H39.53V38H53.75v6.52H54c2-3.75,6.83-7.7,14-7.7,15,0,17.79,9.89,17.79,22.74Z"
    ></path>
  </svg>
  <span class="border-l-2 px-1">Your Name</span>
  <div
    class="group-hover:opacity-100 opacity-0 top-16 absolute z-10 inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-500 bg-sky-600 rounded-lg shadow-sm before:w-3 before:h-3 before:rotate-45 before:-top-1 before:left-20 before:bg-sky-600 before:absolute"
  >
    See my profile!
  </div>
</button>


    

================================================
FILE: Buttons/JaydipPrajapati1910_big-horse-30.html
================================================
<button class="button">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="button-inner">Button</div>
</button>


<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: glassmorphism, animation, blue, button, circle */
.button {
  width: 160px;
  height: 55px;
  transition: all 0.2s;
  position: relative;
  cursor: pointer;
  background: none;
  outline: none;
  border: none;
}

.button-inner {
  width: inherit;
  height: inherit;
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .1em;
  color: blue;
}

.button:hover {
  transform: scale(1.04) rotate(1deg);
}

.circle {
  width: 20px;
  height: 20px;
  background: radial-gradient(blue,darkblue);
  border-radius: 50%;
  position: absolute;
  animation: move-up6 2s ease-in infinite alternate-reverse;
}

.circle:nth-child(1) {
  top: 0px;
  left: 0px;
}

.circle:nth-child(2) {
  bottom: 0px;
  right: 0px;
  animation-name: move-down1;
}

@keyframes move-up6 {
  to {
    transform: translateY(-5px);
  }
}

@keyframes move-down1 {
  to {
    transform: translateY(5px);
  }
}


</style>


================================================
FILE: Buttons/JaydipPrajapati1910_brave-walrus-11.html
================================================
<div class="container">
    <div class="center">
      <button class="btn">
        <svg class="border" viewBox="0 0 180 60" height="60px" width="180px">
          <polyline class="bg-line" points="179,1 179,59 1,59 1,1 179,1"></polyline>
          <polyline class="hl-line" points="179,1 179,59 1,59 1,1 179,1"></polyline>
        </svg>
        <span>HOVER ME</span>
      </button>
    </div>
  </div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: button, hover, hover effect */
.container {
  width: 400px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.center {
  width: 180px;
  height: 60px;
  position: absolute;
}

.btn {
  width: 180px;
  height: 60px;
  cursor: pointer;
  background: transparent;
  border: 2px solid #222;
  outline: none;
  transition: 1s ease-in-out;
}

.btn svg {
  position: absolute;
  left: 0;
  top: 0;
  fill: none;
  stroke: #91C9FF;
  stroke-dasharray: 150 480;
  stroke-dashoffset: 150;
  transition: 1s ease-in-out;
}

.btn:hover {
  transition: 1s ease-in-out;
  background: #4F95DA;
}

.btn:hover span {
  transition: 1s ease-in-out;
  color: #fff;
}

.btn:hover svg {
  stroke-dashoffset: -480;
}

.btn span {
  color: black;
  font-size: 18px;
  font-weight: 600;
}

</style>


================================================
FILE: Buttons/JaydipPrajapati1910_dry-frog-0.html
================================================
<button class="button" type="button">
  <svg viewBox="0 0 16 16" class="bi bi-arrow-repeat" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"></path>
  <path d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z" fill-rule="evenodd"></path>
</svg>
    Refresh 
</button>



<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: button, refresh */
.button {
  color: white;
  background-color: #222;
  font-weight: 500;
  border-radius: 0.5rem;
  font-size: 1rem;
  line-height: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  text-align: center;
  margin-right: 0.5rem;
  display: inline-flex;
  align-items: center;
  border: none;
}

.button:hover {
  background-color: #333;
}

.button svg {
  display: inline;
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 0.75rem;
  color: white;
}

.button:focus svg {
  animation: spin_357 0.5s linear;
}

@keyframes spin_357 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


</style>


================================================
FILE: Buttons/JaydipPrajapati1910_foolish-dragon-2.html
================================================
<button>
  <svg viewBox="0 0 16 16" class="bi bi-instagram" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path> </svg>
    <span>Instragram</span>
</button>


<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: instagram, button */
button {
  background: transparent;
  position: relative;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgb(255,0,0);
  border-radius: 25px;
  outline: none;
  overflow: hidden;
  color: rgb(255,0,0);
  transition: color 0.3s 0.1s ease-out;
  text-align: center;
}

button span {
  margin: 10px;
}

button::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: '';
  border-radius: 50%;
  display: block;
  width: 20em;
  height: 20em;
  left: -5em;
  text-align: center;
  transition: box-shadow 0.5s ease-out;
  z-index: -1;
}

button:hover {
  color: #fff;
  border: 1px solid rgb(255,0,0);
}

button:hover::before {
  box-shadow: inset 0 0 0 10em rgb(255, 0, 0);
}
</style>


================================================
FILE: Buttons/JaydipPrajapati1910_foolish-robin-0.html
================================================
<ul class="wrapper">
    <li class="icon black">
        <span class="tooltip">UP</span>
        <span><svg viewBox="0 0 16 16" class="bi bi-chevron-double-up" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708l6-6z" fill-rule="evenodd"></path>
  <path d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z" fill-rule="evenodd"></path>
</svg></span>
    </li>
    <li class="icon black">
        <span class="tooltip">Down</span>
        <span><svg viewBox="0 0 16 16" class="bi bi-chevron-double-down" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" fill-rule="evenodd"></path>
  <path d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" fill-rule="evenodd"></path>
</svg></span>
    </li>
    <li class="icon black">
        <span class="tooltip">Left</span>
        <span><svg viewBox="0 0 16 16" class="bi bi-chevron-double-left" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill-rule="evenodd"></path>
  <path d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill-rule="evenodd"></path>
</svg></span>
    </li>
     <li class="icon black">
        <span class="tooltip">Right</span>
        <span><svg viewBox="0 0 16 16" class="bi bi-chevron-double-right" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z" fill-rule="evenodd"></path>
  <path d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z" fill-rule="evenodd"></path>
</svg></span>
    </li>
</ul>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: button, hover effect, buttons */
.wrapper {
  display: inline-flex;
  list-style: none;
  height: 120px;
  width: 100%;
  padding-top: 40px;
  font-family: "Poppins", sans-serif;
  justify-content: center;
}

.wrapper .icon {
  position: relative;
  background: #fff;
  border-radius: 50%;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #fff;
  color: #fff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #fff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper svg {
  fill: green;
}

.wrapper span:hover,
.wrapper svg:hover,
.wrapper .black:hover,
.wrapper .black:hover .tooltip,
.wrapper .black:hover .tooltip::before {
  background: #222;
  color: white;
  fill: white;
}


</style>


================================================
FILE: Buttons/JaydipPrajapati1910_giant-mouse-100.html
================================================
<button class="button">
<svg viewBox="0 0 16 16" fill="currentColor" height="18" width="18" xmlns="http://www.w3.org/2000/svg" class="game"> <path d="M11.5 6.027a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm-6.5-3h1v1h1v1h-1v1h-1v-1h-1v-1h1v-1z"></path> <path d="M3.051 3.26a.5.5 0 0 1 .354-.613l1.932-.518a.5.5 0 0 1 .62.39c.655-.079 1.35-.117 2.043-.117.72 0 1.443.041 2.12.126a.5.5 0 0 1 .622-.399l1.932.518a.5.5 0 0 1 .306.729c.14.09.266.19.373.297.408.408.78 1.05 1.095 1.772.32.733.599 1.591.805 2.466.206.875.34 1.78.364 2.606.024.816-.059 1.602-.328 2.21a1.42 1.42 0 0 1-1.445.83c-.636-.067-1.115-.394-1.513-.773-.245-.232-.496-.526-.739-.808-.126-.148-.25-.292-.368-.423-.728-.804-1.597-1.527-3.224-1.527-1.627 0-2.496.723-3.224 1.527-.119.131-.242.275-.368.423-.243.282-.494.575-.739.808-.398.38-.877.706-1.513.773a1.42 1.42 0 0 1-1.445-.83c-.27-.608-.352-1.395-.329-2.21.024-.826.16-1.73.365-2.606.206-.875.486-1.733.805-2.466.315-.722.687-1.364 1.094-1.772a2.34 2.34 0 0 1 .433-.335.504.504 0 0 1-.028-.079zm2.036.412c-.877.185-1.469.443-1.733.708-.276.276-.587.783-.885 1.465a13.748 13.748 0 0 0-.748 2.295 12.351 12.351 0 0 0-.339 2.406c-.022.755.062 1.368.243 1.776a.42.42 0 0 0 .426.24c.327-.034.61-.199.929-.502.212-.202.4-.423.615-.674.133-.156.276-.323.44-.504C4.861 9.969 5.978 9.027 8 9.027s3.139.942 3.965 1.855c.164.181.307.348.44.504.214.251.403.472.615.674.318.303.601.468.929.503a.42.42 0 0 0 .426-.241c.18-.408.265-1.02.243-1.776a12.354 12.354 0 0 0-.339-2.406 13.753 13.753 0 0 0-.748-2.295c-.298-.682-.61-1.19-.885-1.465-.264-.265-.856-.523-1.733-.708-.85-.179-1.877-.27-2.913-.27-1.036 0-2.063.091-2.913.27z"></path> </svg>
  Play Now
  <div class="arrow">››</div>
</button>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: red, button, hover, play */
.button {
  width: 140px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0px 15px;
  background-color: red;
  border-radius: 10px;
  border: none;
  color: white;
  position: relative;
  cursor: pointer;
  font-weight: 900;
  transition-duration: .2s;
}

.game path {
  color: white;
}

.button .arrow {
  position: absolute;
  right: 0;
  padding: 0px 5px;
  width: 30px;
  height: 100%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button:hover,
.button:focus {
  background-color: black;
  transition-duration: .2s;
}

.button:hover .arrow {
  animation: slide-right .6s ease-out both;
}
/* arrow animation */
@keyframes slide-right {
  0% {
    transform: translateX(-10px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.button:active {
  transform: translate(1px , 1px);
  transition-duration: .2s;
}
</style>


================================================
FILE: Buttons/JaydipPrajapati1910_helpless-firefox-29.html
================================================
<!-- From Uiverse.io by JaydipPrajapati1910 - Tags: button -->
<button class="relative px-5 py-2 font-medium text-white group">
<span class="absolute inset-0 w-full h-full transition-all duration-300 ease-out transform translate-x-0 -skew-x-12 bg-purple-500 group-hover:bg-purple-700 group-hover:skew-x-12"></span>
<span class="absolute inset-0 w-full h-full transition-all duration-300 ease-out transform skew-x-12 bg-purple-700 group-hover:bg-purple-500 group-hover:-skew-x-12"></span>
<span class="absolute bottom-0 left-0 hidden w-10 h-20 transition-all duration-100 ease-out transform -translate-x-8 translate-y-10 bg-purple-600 -rotate-12"></span>
<span class="absolute bottom-0 right-0 hidden w-10 h-20 transition-all duration-100 ease-out transform translate-x-10 translate-y-8 bg-purple-400 -rotate-12"></span>
<span class="relative">Button </span>
</button>



================================================
FILE: Buttons/JaydipPrajapati1910_honest-parrot-89.html
================================================
<button type="button" class="button">
 <svg viewBox="0 0 16 16" class="bi bi-coin" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M5.5 9.511c.076.954.83 1.697 2.182 1.785V12h.6v-.709c1.4-.098 2.218-.846 2.218-1.932 0-.987-.626-1.496-1.745-1.76l-.473-.112V5.57c.6.068.982.396 1.074.85h1.052c-.076-.919-.864-1.638-2.126-1.716V4h-.6v.719c-1.195.117-2.01.836-2.01 1.853 0 .9.606 1.472 1.613 1.707l.397.098v2.034c-.615-.093-1.022-.43-1.114-.9H5.5zm2.177-2.166c-.59-.137-.91-.416-.91-.836 0-.47.345-.822.915-.925v1.76h-.005zm.692 1.193c.717.166 1.048.435 1.048.91 0 .542-.412.914-1.135.982V8.518l.087.02z"></path>
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
  <path d="M8 13.5a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11zm0 .5A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
</svg>
    Join Now
</button>



<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: button, join now, buttton */
.button {
  color: white;
  background-color: #222;
  font-weight: 600;
  border-radius: 0.5rem;
  font-size: 1rem;
  line-height: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  text-align: center;
  margin-right: 0.5rem;
  display: inline-flex;
  align-items: center;
  border: none;
}

.button:hover {
  background-color: #fff;
  color: #222;
  border: 2px solid #222;
}

.button:hover svg {
  fill: #222;
}

.button svg {
  display: inline;
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 0.75rem;
  color: white;
}

.button:hover svg {
  animation: spin_357 0.5s linear;
}

@keyframes spin_357 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotatey(360deg);
  }
}


</style>


================================================
FILE: Buttons/JaydipPrajapati1910_itchy-octopus-28.html
================================================
<button class="button">
 ㅤ JOIN NOW
</button>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: blue, button, join now, buttons */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #0000FF;
  font-size: 17px;
  border-radius: 5px;
  width: 160px;
  height: 40px;
  border: 1px solid #0000FF;
  position: relative;
  transition: 0.3s;
  background-color: #ffffff;
  font-weight: 600;
}

.button::before {
  content: "FREE";
  display: block;
  font-size: 13px;
  background-color: #0000FF;
  color: #fff;
  border-radius: 3px;
  padding: 3px 5px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-5px, -30%);
  transition: .3s;
}

.button:hover::before {
  transform: translate(-5px, -50%);
}


</style>


================================================
FILE: Buttons/JaydipPrajapati1910_lazy-mouse-44.html
================================================
<button class="button">
  <div class="button-overlay"></div>
  <span>Gradient Button</span>  
</button>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: gradient, button, gradients, css */
.button {
  font-size: 19px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgb(56, 56, 56) 0%, rgb(36, 36, 36) 66%, rgb(41, 41, 41) 100%);
  color: rgb(218, 218, 218);
  border: none;
  padding: 2px;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.button span {
  border-radius: 10px;
  padding: 0.8em 1.3em;
  padding-right: 1.2em;
  text-shadow: 0px 0px 20px #4b4b4b;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s;
  background-image: linear-gradient(to right, #00F260, #f79dee, #0575E6, #64f38c,#e9e93e);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 300%;
  background-position: -100%;
  animation: animatedText 3s infinite alternate-reverse;
}

.button-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-conic-gradient(rgb(48, 47, 47) 0.0000001%, rgb(51, 51, 51) 0.000104%) 60% 60%/600% 600%;
  filter: opacity(10%) contrast(105%);
  -webkit-filter: opacity(10%) contrast(105%);
}

@keyframes animatedText {
  to {
    background-position: 100%;
  }
}
</style>


================================================
FILE: Buttons/JaydipPrajapati1910_quick-stingray-2.html
================================================
<div data-tooltip="Price:-$20" class="button">
<div class="button-wrapper">
  <div class="text">Buy Now</div>
    <span class="icon">
      <svg viewBox="0 0 16 16" class="bi bi-cart2" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"></path>
</svg>
    </span>
  </div>
</div>


<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: button, shipping , buy now */
.button {
  --width: 100px;
  --height: 35px;
  --tooltip-height: 35px;
  --tooltip-width: 90px;
  --gap-between-tooltip-to-button: 18px;
  --button-color: #222;
  --tooltip-color: #fff;
  width: var(--width);
  height: var(--height);
  background: var(--button-color);
  position: relative;
  text-align: center;
  border-radius: 0.45em;
  font-family: "Arial";
  transition: background 0.3s;
}

.button::before {
  position: absolute;
  content: attr(data-tooltip);
  width: var(--tooltip-width);
  height: var(--tooltip-height);
  background-color: #555;
  font-size: 0.9rem;
  color: #fff;
  border-radius: .25em;
  line-height: var(--tooltip-height);
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px);
  left: calc(50% - var(--tooltip-width) / 2);
}

.button::after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #555;
  left: calc(50% - 10px);
  bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px);
}

.button::after,.button::before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-wrapper,.text,.icon {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  color: #fff;
}

.text {
  top: 0
}

.text,.icon {
  transition: top 0.5s;
}

.icon {
  color: #fff;
  top: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon svg {
  width: 24px;
  height: 24px;
}

.button:hover {
  background: #222;
}

.button:hover .text {
  top: -100%;
}

.button:hover .icon {
  top: 0;
}

.button:hover:before,.button:hover:after {
  opacity: 1;
  visibility: visible;
}

.button:hover:after {
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px);
}

.button:hover:before {
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button));
}




</style>


================================================
FILE: Buttons/JaydipPrajapati1910_splendid-mayfly-81.html
================================================
 <button>
   <svg viewBox="0 0 16 16" class="bi bi-discord" fill="currentColor" height="36" width="36" xmlns="http://www.w3.org/2000/svg">
  <path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"></path>
</svg>
    <span class="now">now!</span>
    <span class="play">Join</span>
</button>



<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: blue, button, Discord, join now */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 10px;
  color: white;
  text-shadow: 2px 2px #000;
  text-transform: uppercase;
  border: solid 2px #fff;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 17px;
  background-color: rgba(88, 101, 242, 1);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  transition: all .5s ease;
}

button:active {
  transform: scale(.9);
  transition: all 100ms ease;
}

button svg {
  transition: all .5s ease;
  z-index: 2;
}

.play {
  transition: all .5s ease;
  transition-delay: 300ms;
}

button:hover svg {
  transform: scale(1.3) translate(-40%);
}

.now {
  position: absolute;
  left: 0;
  transform: translateX(290%);
  transition: all .5s ease;
  z-index: 2;
}

button:hover .now {
  transform: translateX(90%);
  transition-delay: 300ms;
}

button:hover .play {
  transform: translateX(200%);
  transition-delay: 300ms;
}



</style>


================================================
FILE: Buttons/JaydipPrajapati1910_tender-dolphin-96.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: button, water, transparent */
button {
  appearance: button;
  outline: none;
  border: none;
  border-radius: 16px;
  box-sizing: border-box;
  color: #222;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 20px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 13px 19px;
  text-align: center;
  text-transform: uppercase;
  touch-action: manipulation;
  transform: translateZ(0);
  transition: filter .2s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

button:after {
  background-clip: padding-box;
  box-shadow: inset 4px 4px 4px rgba(15, 15, 15, 0.315),
    4px 4px 4px rgba(28, 28, 28, 0.13);
  border: none;
  border-radius: 16px;
  outline: none;
  bottom: -4px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

button:main, button:focus {
  user-select: auto;
}

button:hover:not(:disabled) {
  filter: brightness(1.1);
}

button:disabled {
  cursor: auto;
}

button:active:after {
  border-width: 0 0 0px;
}

button:active {
  padding-bottom: 10px;
}


</style>


================================================
FILE: Buttons/JaydipPrajapati1910_tiny-moose-9.html
================================================
<button class="button">
  SIGNUP
  <span>
  <svg viewBox="0 0 16 16" class="bi bi-door-open-fill" fill="currentColor" height="19" width="19" xmlns="http://www.w3.org/2000/svg">
  <path d="M1.5 15a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2.5A1.5 1.5 0 0 0 11.5 1H11V.5a.5.5 0 0 0-.57-.495l-7 1A.5.5 0 0 0 3 1.5V15H1.5zM11 2h.5a.5.5 0 0 1 .5.5V15h-1V2zm-2.5 8c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z"></path>
</svg></span>
</button>


<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: green, button, sign-up, buttons, sign up */
.button {
  backface-visibility: hidden;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  white-space: nowrap;
  background: linear-gradient(180deg,#ce8 0%,#592 100%);
  border-radius: 20px;
  border: 0.5px solid #8c4;
  border-width: 0.5px 0.5px 0.5px 0.5px;
  padding: 12px 50px 12px 15px;
  box-shadow: inset 0px 1px 0px rgba(255,255,255,0.6),0px 1px 2px rgba(0,0,0,0.5);
  color: #372;
  font-size: 16px;
  font-family: Helvetica Neue;
  font-weight: 900;
  font-style: normal;
  text-shadow: 0px 1px 0px rgba(255,255,255,0.5)
}

.button span {
  color: #372;
  background: #fff;
  border-radius: 20px;
  border: 3px solid #371;
  border-width: 3px 3px 3px 3px;
  padding: 8px 8px 7px 8px;
  margin: 0px 0px 0px 0px;
  position: absolute;
  top: 0px;
  right: 0px;
}


</style>


================================================
FILE: Buttons/JaydipPrajapati1910_wonderful-walrus-87.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: gradient, button, gradients, effects, css effect */
.button {
  width: 140px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0px 15px;
  background-color: red;
  border-radius: 10px;
  border: none;
  color: white;
  position: relative;
  cursor: pointer;
  font-weight: 900;
  transition-duration: .2s;
  background: linear-gradient(0deg, #000, #272727);
}

.button:before, .button:after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  border-radius: 10px;
  background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
		#0000ff, #00ff00,#ffff00, #ff0000);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: steam 20s linear infinite;
}

@keyframes steam {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}

.button:after {
  filter: blur(50px);
}


</style>


================================================
FILE: Buttons/Jedi-hongbin_modern-sloth-8.html
================================================
<button>
  <svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M874.690416 495.52477c0 11.2973-9.168824 20.466124-20.466124 20.466124l-604.773963 0 188.083679 188.083679c7.992021 7.992021 7.992021 20.947078 0 28.939099-4.001127 3.990894-9.240455 5.996574-14.46955 5.996574-5.239328 0-10.478655-1.995447-14.479783-5.996574l-223.00912-223.00912c-3.837398-3.837398-5.996574-9.046027-5.996574-14.46955 0-5.433756 2.159176-10.632151 5.996574-14.46955l223.019353-223.029586c7.992021-7.992021 20.957311-7.992021 28.949332 0 7.992021 8.002254 7.992021 20.957311 0 28.949332l-188.073446 188.073446 604.753497 0C865.521592 475.058646 874.690416 484.217237 874.690416 495.52477z"></path></svg>
  <span>Back</span>
</button>
<style>
/* From Uiverse.io by Jedi-hongbin - Tags: icon, button */
button {
 display: flex;
 height: 3em;
 width: 100px;
 align-items: center;
 justify-content: center;
 background-color: #eeeeee4b;
 border-radius: 3px;
 letter-spacing: 1px;
 transition: all 0.2s linear;
 cursor: pointer;
 border: none;
 background: #fff;
}

button > svg {
 margin-right: 5px;
 margin-left: 5px;
 font-size: 20px;
 transition: all 0.4s ease-in;
}

button:hover > svg {
 font-size: 1.2em;
 transform: translateX(-5px);
}

button:hover {
 box-shadow: 9px 9px 33px #d1d1d1, -9px -9px 33px #ffffff;
 transform: translateY(-2px);
}
</style>


================================================
FILE: Buttons/Jerome-W-90_nervous-dragon-80.html
================================================
<div class="box">
  <div class="container">
    <button class="button"><span>A</span></button>
    <button class="button"><span>B</span></button>
    <button class="button"><span>C</span></button>
    <button class="button"><span>D</span></button>
  </div>
</div>

<style>
/* From Uiverse.io by Jerome-W-90  - Website: https://codepen.io/pfndesign/pen/KKYPqMz - Name: pfndesign - Tags: 3d, button, realistic, 3d button */
.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) skew(15deg);
  width: 250px;
  height: 250px;
}
.box .container {
  width: 250px;
  height: 250px;
  background: #2f0000;
  border-radius: 15px;
  border: 10px solid #cbcdcd;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5px;
}
.box .container .button {
  position: relative;
  flex-basis: calc(50% - 0.5px);
  background: #ca0a0b;
  border: 0;
  font-size: 35px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: all 0.5s ease;
}
.box .container .button::before {
  content: "";
  position: absolute;
  width: 94px;
  height: 94px;
  border-radius: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgb(229, 136, 137);
  background: linear-gradient(
    133deg,
    rgba(229, 136, 137, 1) 0%,
    rgba(229, 136, 137, 1) 15%,
    rgba(209, 13, 12, 1) 20%,
    rgba(209, 13, 12, 1) 65%,
    rgba(97, 4, 3, 1) 100%
  );
}
.box .container .button::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  background: rgb(80, 8, 8);
  background: linear-gradient(
    90deg,
    #4c0405 1%,
    rgb(202, 10, 11) 5%,
    rgb(199, 39, 39) 45%,
    #d88180 100%
  );
  left: 0;
  bottom: 0;
  transform: skewY(0deg) skewX(-40deg);
  z-index: -4;
  transition: all 0.5s ease;
}
.box .container .button:hover::after {
  height: 13px;
  bottom: -12px;
  left: -7px;
}
.box .container .button span {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.box .container .button:hover {
  transform: translate(12px, -12px);
  box-shadow: -30px 10px 26px -5px black, -12px 12px 0 0 #ca0a0b,
    -11px 11px 0 0 #ca0a0b, -10px 10px 0 0 #ca0a0b, -9px 9px 0 0 #ca0a0b,
    -8px 8px 0 0 #ca0a0b, -7px 7px 0 0 #ca0a0b, -6px 6px 0 0 #ca0a0b,
    -5px 5px 0 0 #ca0a0b, -4px 4px 0 0 #ca0a0b, -3px 3px 0 0 #ca0a0b,
    -2px 2px 0 0 #ca0a0b, -1px 1px 0 0 #ca0a0b;
  z-index: 999;
}
.box::before {
  content: "";
  width: calc(100% + 25px);
  height: calc(100% + 10px);
  position: absolute;
  left: -25px;
  top: 35px;
  background: rgb(100, 104, 106);
  background: linear-gradient(
    135deg,
    rgba(100, 104, 106, 1) 0%,
    rgba(100, 104, 106, 1) 45%,
    rgba(222, 221, 221, 1) 55%,
    rgba(222, 221, 221, 1) 100%
  );
  z-index: -1;
  border-radius: 15px;
}
.box::after {
  content: "";
  width: 30px;
  height: 45px;
  position: absolute;
  left: -14px;
  top: 12px;
  background: rgba(100, 104, 106, 1);
  z-index: -1;
  transform: rotate(215deg);
}
.box .container::before {
  content: "";
  width: 30px;
  height: 45px;
  position: absolute;
  right: -9px;
  bottom: -39px;
  background: rgba(222, 221, 221, 1);
  z-index: -1;
  transform: rotate(215deg);
}

</style>
    

================================================
FILE: Buttons/JesscMendesr_lucky-eagle-6.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by JesscMendesr - Tags: transition, box-shadow */
.button {
  font-size: 1rem;
  background-color: #F2E1C1 !important;
  transform: translateY(-0.10em);
  box-shadow: 3px 3px 0px rgba(55, 22, 22, 0.67);
  border: 1px solid rgba(55, 22, 22, 0.67);
  border-radius: 50px;
  padding: 0.75em 1.5em;
  transition: 0.2s;
  cursor: pointer;
}

button:hover {
  box-shadow: 4px 6px 0px rgba(55, 22, 22, 0.67);
  transform: translateY(-0.4em);
}

button:active {
  box-shadow: none;
  transform: translateY(0);
}
</style>


================================================
FILE: Buttons/JesusRafaelNavaCruz_grumpy-cougar-86.html
================================================
<!-- From Uiverse.io by JesusRafaelNavaCruz - Tags: button, glitch -->
<button class="cursor-pointer uppercase bg-white px-4 py-2 active:translate-x-0.5 active:translate-y-0.5 hover:shadow-[0.5rem_0.5rem_#F44336,-0.5rem_-0.5rem_#00BCD4] transition">
  Hover me!
</button>



================================================
FILE: Buttons/JesusRafaelNavaCruz_modern-robin-64.html
================================================
<!-- From Uiverse.io by JesusRafaelNavaCruz - Tags: button, retro, click effect -->
<button class="cursor-pointer uppercase font-mono bg-white font-bold py-2 px-4 rounded border-2 border-black shadow-[0.25rem_0.25rem_#121212] transition-[transform_50ms, box-shadow_50ms] active:translate-x-0.5 active:translate-y-0.5 active:shadow-[0.125rem_0.125rem_#121212]">
  Click me!
</button>



================================================
FILE: Buttons/JesusRafaelNavaCruz_pretty-yak-93.html
================================================
<div class="content">
  <div class="text">LOADING...</div>
  <div class="text">LOADING...</div>
</div>
<style>
/* From Uiverse.io by JesusRafaelNavaCruz - Source: Oluwakemi - https://codepen.io/techgirldiaries/pen/LYWPJPN - Tags: loading, animated, loading animation */
.content {
  position: relative;
}

.content .text {
  color: #fff;
  font-size: 3rem;
  position: absolute;
  transform: translate(-50%, -50%);
}

.content .text:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #8338ec;
}

.content .text:nth-child(2) {
  color: #c19bf5;
  animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
  0%,
	100% {
    clip-path: polygon(
			0% 45%,
			16% 44%,
			33% 50%,
			54% 60%,
			70% 61%,
			84% 59%,
			100% 52%,
			100% 100%,
			0% 100%
		);
  }

  50% {
    clip-path: polygon(
			0% 60%,
			15% 65%,
			34% 66%,
			51% 62%,
			67% 50%,
			84% 45%,
			100% 46%,
			100% 100%,
			0% 100%
		);
  }
}
</style>


================================================
FILE: Buttons/JhaveLang_hard-penguin-52.html
================================================
<button class="button">Enter</button>

<style>
/* From Uiverse.io by JhaveLang  - Tags: simple, animation, simple button */
.button {
  font-weight: 600;
  padding: 1em 4em 1em 4em;
  border-radius: 4em;
  border: 0;
  background: rgb(251, 213, 213);
  background: linear-gradient(
    115deg,
    rgba(251, 213, 213, 1) 20%,
    rgba(248, 180, 180, 1) 41%,
    rgba(252, 233, 106, 1) 100%
  );
  cursor: pointer;
  box-shadow: 0em 0em 0em 0.3em rgb(251, 213, 213);
  transition: background 0.3s ease;
}
.button:hover {
  background: rgb(252, 233, 106);
  background: linear-gradient(
    115deg,
    rgba(252, 233, 106, 1) 0%,
    rgba(251, 213, 213, 1) 37%,
    rgba(248, 180, 180, 1) 100%
  );
}
.button:hover {
  background: rgb(252, 233, 106);
  background: linear-gradient(
    115deg,
    rgba(252, 233, 106, 1) 0%,
    rgba(251, 213, 213, 1) 37%,
    rgba(248, 180, 180, 1) 100%
  );
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

</style>
    

================================================
FILE: Buttons/JkHuger_brown-lion-61.html
================================================
<div class="installer">
	<label for="progressLinux"><input id="progressLinux" type="radio"><span></span></label>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: button, progress, progress bar, download */
.installer {
  width: 200px;
  height: 40px;
}

.installer label {
  position: absolute;
  height: 40px;
  width: 200px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}

.installer label input {
  display: none;
}

.installer label span {
  position: absolute;
  height: 40px;
  width: 200px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: #3F8EFC;
  border-radius: 5px;
}

.installer label input:checked ~ span {
  background: #87E544;
  animation: downloadSuccess 3.1s ease;
}

.installer label span:after {
  content: 'DOWNLOAD';
  position: absolute;
  width: 80%;
  height: 100%;
  left: 10%;
}

.installer label input:checked ~ span:after {
  content: 'Thank you!';
  animation: downloadState 3s;
}

.installer label span:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  opacity: 0;
  background: rgba(255,255,255,.2);
}

.installer label input:checked ~ span:before {
  animation: downloadProgress 3s cubic-bezier(.67,.13,.1,.81);
}

@keyframes downloadSuccess {
  0%, 90% {
    background: #3F8EFC;
  }

  100% {
    background: #87E544;
  }
}

@keyframes downloadState {
  0%, 95% {
    content: 'DOWNLOADING...'
  }

  100% {
    content: 'Thank you for download!'
  }
}

@keyframes downloadProgress {
  0% {
    width: 5%;
    opacity: 1;
  }

  35% {
    width: 17%;
  }

  64% {
    width: 51%;
  }

  81% {
    width: 70%;
  }

  90% {
    width: 86%;
    opacity: 1;
  }

  100% {
    width: 100%;
    opacity: 0;
  }
}
</style>


================================================
FILE: Buttons/JkHuger_evil-dodo-27.html
================================================
<button class="click">Click me</button>
<style>
/* From Uiverse.io by JkHuger - Tags: button */
.click {
  margin: 2rem auto;
  display: flex;
  background-color: #7A5FFF;
  color: white;
  cursor: pointer;
  border: none;
  font-size: 1.2rem;
  padding: 10px 15px;
  border-radius: .25rem
}

.click {
  transition: background .8s ease-out;
  background: #7A5FFF radial-gradient(circle, transparent 1%, #7A5FFF 1%) center/15000%;
}

.click:active {
  background-color: #c1b4ff;
  background-size: 100%;
  transition: background 0s;
}
  
</style>


================================================
FILE: Buttons/JkHuger_fat-bat-0.html
================================================
<div class="sp">

  <button class="sparkle-button">
    <span class="spark"></span>
    
    <span class="backdrop"></span>
    <svg class="sparkle" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M14.187 8.096L15 5.25L15.813 8.096C16.0231 8.83114 16.4171 9.50062 16.9577 10.0413C17.4984 10.5819 18.1679 10.9759 18.903 11.186L21.75 12L18.904 12.813C18.1689 13.0231 17.4994 13.4171 16.9587 13.9577C16.4181 14.4984 16.0241 15.1679 15.814 15.903L15 18.75L14.187 15.904C13.9769 15.1689 13.5829 14.4994 13.0423 13.9587C12.5016 13.4181 11.8321 13.0241 11.097 12.814L8.25 12L11.096 11.187C11.8311 10.9769 12.5006 10.5829 13.0413 10.0423C13.5819 9.50162 13.9759 8.83214 14.186 8.097L14.187 8.096Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
      <path d="M6 14.25L5.741 15.285C5.59267 15.8785 5.28579 16.4206 4.85319 16.8532C4.42059 17.2858 3.87853 17.5927 3.285 17.741L2.25 18L3.285 18.259C3.87853 18.4073 4.42059 18.7142 4.85319 19.1468C5.28579 19.5794 5.59267 20.1215 5.741 20.715L6 21.75L6.259 20.715C6.40725 20.1216 6.71398 19.5796 7.14639 19.147C7.5788 18.7144 8.12065 18.4075 8.714 18.259L9.75 18L8.714 17.741C8.12065 17.5925 7.5788 17.2856 7.14639 16.853C6.71398 16.4204 6.40725 15.8784 6.259 15.285L6 14.25Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
      <path d="M6.5 4L6.303 4.5915C6.24777 4.75718 6.15472 4.90774 6.03123 5.03123C5.90774 5.15472 5.75718 5.24777 5.5915 5.303L5 5.5L5.5915 5.697C5.75718 5.75223 5.90774 5.84528 6.03123 5.96877C6.15472 6.09226 6.24777 6.24282 6.303 6.4085L6.5 7L6.697 6.4085C6.75223 6.24282 6.84528 6.09226 6.96877 5.96877C7.09226 5.84528 7.24282 5.75223 7.4085 5.697L8 5.5L7.4085 5.303C7.24282 5.24777 7.09226 5.15472 6.96877 5.03123C6.84528 4.90774 6.75223 4.75718 6.697 4.5915L6.5 4Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
    <span class="text">Generate Site</span>
  </button>
  <div class="bodydrop"></div>
  <span aria-hidden="true" class="particle-pen">
    <svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
    <svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
    <svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
    <svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
    <svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
    <svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
    <svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
    <svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
    <svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
    <svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg><svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg><svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
    <svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg><svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg><svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg><svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg><svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg><svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg><svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg><svg class="particle" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </span>
</div>
<style>
/* From Uiverse.io by JkHuger - Source: Jhey - https://codepen.io/jh3y/pen/LYJMPBL - Website: https://codepen.io/jh3y/pen/LYJMPBL - Name: JHEY - Tags: button, modern, stars */
.sparkle-button {
  --active: 0;
  --bg: radial-gradient(
			40% 50% at center 100%,
			hsl(270 calc(var(--active) * 97%) 72% / var(--active)),
			transparent
		),
		radial-gradient(
			80% 100% at center 120%,
			hsl(260 calc(var(--active) * 97%) 70% / var(--active)),
			transparent
		),
		hsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));
  background: var(--bg);
  font-size: 1.2rem;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  padding: 1em 1em;
  display: flex;
  align-items: center;
  gap: 0.25em;
  white-space: nowrap;
  border-radius: 100px;
  position: relative;
  box-shadow: 0 0 calc(var(--active) * 3em) calc(var(--active) * 1em) hsl(260 97% 61% / 0.75),
		0 0em 0 0 hsl(260 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
		0 -0.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset;
  transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
  scale: calc(1 + (var(--active) * 0.1));
  transition: .3s;
}

.sparkle-button:active {
  scale: 1;
  transition: .3s;
}

.sparkle path {
  color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));
  transform-box: fill-box;
  transform-origin: center;
  fill: currentColor;
  stroke: currentColor;
  animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));
  animation-duration: 0.6s;
  transition: color var(--transition);
}

.sparkle-button:is(:hover, :focus-visible) path {
  animation-name: bounce;
}

@keyframes bounce {
  35%, 65% {
    scale: var(--scale);
  }
}

.sparkle path:nth-of-type(1) {
  --scale: 0.5;
  --delay: 0.1;
  --base: 40%;
}

.sparkle path:nth-of-type(2) {
  --scale: 1.5;
  --delay: 0.2;
  --base: 20%;
}

.sparkle path:nth-of-type(3) {
  --scale: 2.5;
  --delay: 0.35;
  --base: 30%;
}

.sparkle-button:before {
  content: "";
  position: absolute;
  inset: -0.2em;
  z-index: -1;
  border: 0.25em solid hsl(260 97% 50% / 0.5);
  border-radius: 100px;
  opacity: var(--active, 0);
  transition: opacity var(--transition);
}

.spark {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  rotate: 0deg;
  overflow: hidden;
  mask: linear-gradient(white, transparent 50%);
  animation: flip calc(var(--spark) * 2) infinite steps(2, end);
}

@keyframes flip {
  to {
    rotate: 360deg;
  }
}

.spark:before {
  content: "";
  position: absolute;
  width: 200%;
  aspect-ratio: 1;
  top: 0%;
  left: 50%;
  z-index: -1;
  translate: -50% -15%;
  rotate: 0;
  transform: rotate(-90deg);
  opacity: calc((var(--active)) + 0.4);
  background: conic-gradient(
		from 0deg,
		transparent 0 340deg,
		white 360deg
	);
  transition: opacity var(--transition);
  animation: rotate var(--spark) linear infinite both;
}

.spark:after {
  content: "";
  position: absolute;
  inset: var(--cut);
  border-radius: 100px;
}

.backdrop {
  position: absolute;
  inset: var(--cut);
  background: var(--bg);
  border-radius: 100px;
  transition: background var(--transition);
}

@keyframes rotate {
  to {
    transform: rotate(90deg);
  }
}

@supports(selector(:has(:is(+ *)))) {
  body:has(button:is(:hover, :focus-visible)) {
    --active: 1;
    --play-state: running;
  }

  .bodydrop {
    display: none;
  }
}

.sparkle-button:is(:hover, :focus-visible) ~ :is(.bodydrop, .particle-pen) {
  --active: 1;
  --play-state: runnin;
}

.sparkle-button:is(:hover, :focus-visible) {
  --active: 1;
  --play-state: running;
}

.sp {
  position: relative;
}

.particle-pen {
  position: absolute;
  width: 200%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  -webkit-mask: radial-gradient(white, transparent 65%);
  z-index: -1;
  opacity: var(--active, 0);
  transition: opacity var(--transition);
}

.particle {
  fill: white;
  width: calc(var(--size, 0.25) * 1rem);
  aspect-ratio: 1;
  position: absolute;
  top: calc(var(--y) * 1%);
  left: calc(var(--x) * 1%);
  opacity: var(--alpha, 1);
  animation: float-out calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;
  transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%);
  z-index: -1;
  animation-play-state: var(--play-state, paused);
}

.particle path {
  fill: hsl(0 0% 90%);
  stroke: none;
}

.particle:nth-of-type(even) {
  animation-direction: reverse;
}

@keyframes float-out {
  to {
    rotate: 360deg;
  }
}

.text {
  translate: 2% -6%;
  letter-spacing: 0.01ch;
  background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));
  -webkit-background-clip: text;
  color: transparent;
  transition: background var(--transition);
}

.sparkle-button svg {
  inline-size: 1.25em;
  translate: -25% -5%;
}
</style>
    

================================================
FILE: Buttons/JkHuger_heavy-lion-95.html
================================================

  <button class="btn"><svg class="svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000" preserveAspectRatio="xMidYMid meet">
  <g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
  <path d="M200 2525 c-60 -19 -123 -74 -152 -133 -22 -44 -23 -60 -26 -269 -4 -213 -3 -222 17 -242 l21 -21 1180 0 1180 0 -2 -820 -3 -820 -38 -37 -37 -38 -1058 0 c-1041 0 -1057 0 -1084 20 -60 44 -58 23 -58 729 0 633 0 646 -20 666 -11 11 -29 20 -40 20 -11 0 -29 -9 -40 -20 -20 -20 -20 -33 -20 -663 0 -738 -2 -716 80 -797 84 -85 13 -80 1180 -80 1167 0 1096 -5 1180 80 85 84 80 13 80 1180 0 1167 5 1096 -80 1180 -84 85 -12 80 -1184 79 -853 0 -1039 -3 -1076 -14z m231 -254 c64 -65 20 -171 -71 -171 -33 0 -48 6 -71 29 -64 65 -20 171 71 171 33 0 48 -6 71 -29z m400 0 c64 -65 20 -171 -71 -171 -33 0 -48 6 -71 29 -64 65 -20 171 71 171 33 0 48 -6 71 -29z m1427 -27 c30 -20 30 -68 0 -88 -20 -14 -82 -16 -482 -16 -413 0 -461 2 -478 17 -22 20 -23 61 -1 85 15 17 43 18 477 18 402 0 464 -2 484 -16z"></path>
  </g>
  </svg>
      <i class="fas fa-fingerprint"></i>
  </button>
<style>
/* From Uiverse.io by JkHuger - Tags: neumorphism, button */
button {
  width: 60px;
  height: 60px;
  transform: scale(1);
  border-style: none;
  outline: none;
  cursor: pointer;
  border-radius: 50%;
  background: rgb(228, 232, 236);
  background: linear-gradient(45deg, rgb(228, 232, 236) 0%, rgb(234 234 234) 100%);
  box-shadow: -2px -7px 10px #f1f1f1, 4px 6px 10px #d4d7da;
  transition: all .3s;
}

button:active {
  background: rgb(218, 221, 224);
  background: linear-gradient(45deg, rgb(218, 221, 224) 0%, rgb(241, 241, 241) 100%);
  box-shadow: -2px -7px 10px #d4d7da, 
    4px 6px 10px #f1f1f1,
    inset -2px -7px 10px #f1f1f1, 
    inset 4px 6px 10px #d4d7da;
  transition: all .3s;
  transform: scale(.95);
}

button i {
  font-size: 20px;
  background: linear-gradient(-45deg, gray 0%, lightgray 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all .3s;
}

button:active i {
  transform: scale(.9);
  transition: all .3s;
}

.svg {
  width: 25px;
  height: 60px;
  border-style: none;
  align-items: center;
}
</style>


================================================
FILE: Buttons/JkHuger_little-pug-16.html
================================================
<button class="testbutton">
  Click me
</button>
<style>
/* From Uiverse.io by JkHuger - Tags: button, smooth, animated */
.testbutton {
  display: block;
  font-family: helvetica;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 9px 8px 0px -1px#BEE2F9, 9px 8px 0px 1px #000;
  padding: 12px 25px;
  border-radius: 11px;
  border: 2px solid #000;
  background: linear-gradient(to top, #63B8EE, #468CCF);
  transition: .3s;
  cursor: pointer;
}

.testbutton:hover {
  transition: .3s;
  transform: translate(-.3em, -.3em);
  box-shadow: 14px 13px 0px -1px #BEE2F9, 14px 13px 0px 1px #000;
  border: 2px solid #000;
}

.testbutton:active {
  transition: .3s;
  transform: translate(.6em, .6em);
  box-shadow: 0px 0px 0px -1px #BEE2F9, 0px 0px 0px 0.1px#000;
}
</style>


================================================
FILE: Buttons/JkHuger_loud-baboon-15.html
================================================
<button data-label="Register" class="rainbow-hover">
  <span class="sp">Register</span>
</button>

<style>
/* From Uiverse.io by JkHuger - Tags: button */
.rainbow-hover {
  font-size: 16px;
  font-weight: 700;
  color: #ff7576;
  background-color: #2B3044;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 24px;
  position: relative;
  line-height: 24px;
  border-radius: 9px;
  box-shadow: 0px 1px 2px #2B3044,
    0px 4px 16px #2B3044;
  transform-style: preserve-3d;
  transform: scale(var(--s, 1)) perspective(600px)
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  perspective: 600px;
  transition: transform 0.1s;
}

.sp {
  background: linear-gradient(
      90deg,
      #866ee7,
      #ea60da,
      #ed8f57,
      #fbd41d,
      #2cca91
    );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  display: block;
}

.rainbow-hover:active {
  transition: 0.3s;
  transform: scale(0.93);
}
</style>


================================================
FILE: Buttons/JkHuger_tough-skunk-14.html
================================================
<nav class="menu">
   <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open">
   <label class="menu-open-button" for="menu-open">
    <span class="lines line-1"></span>
    <span class="lines line-2"></span>
    <span class="lines line-3"></span>
  </label>

   <a href="#" class="menu-item blue"> <i class="fa fa-anchor"></i> </a>
   <a href="#" class="menu-item green"> <i class="fa fa-coffee"></i> </a>
   <a href="#" class="menu-item red"> <i class="fa fa-heart"></i> </a>
   <a href="#" class="menu-item purple"> <i class="fa fa-microphone"></i> </a>
   <a href="#" class="menu-item orange"> <i class="fa fa-star"></i> </a>
   <a href="#" class="menu-item lightblue"> <i class="fa fa-diamond"></i> </a>
</nav>
<style>
/* From Uiverse.io by JkHuger - Tags: button */
.menu-item,
.menu-open-button {
  background: #EEEEEE;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  position: absolute;
  color: #FFFFFF;
  text-align: center;
  line-height: 80px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
}

.menu-open {
  display: none;
}

.lines {
  width: 25px;
  height: 3px;
  background: #596778;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  -webkit-transition: -webkit-transform 200ms;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
}

.line-1 {
  -webkit-transform: translate3d(0, -8px, 0);
  transform: translate3d(0, -8px, 0);
}

.line-2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.line-3 {
  -webkit-transform: translate3d(0, 8px, 0);
  transform: translate3d(0, 8px, 0);
}

.menu-open:checked + .menu-open-button .line-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.menu-open:checked + .menu-open-button .line-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.menu-open:checked + .menu-open-button .line-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 80px;
  height: 80px;
  text-align: center;
  box-sizing: border-box;
  font-size: 26px;
}


/* .menu-item {
   transition: all 0.1s ease 0s;
} */

.menu-item:hover {
  background: #EEEEEE;
  color: #3290B1;
}

.menu-item:nth-child(3) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(4) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(5) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(6) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(7) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(8) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(9) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-open-button {
  z-index: 2;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
  -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.menu-open:checked ~ .menu-item:nth-child(3) {
  transition-duration: 180ms;
  -webkit-transition-duration: 180ms;
  -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
  transform: translate3d(0.08361px, -104.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(4) {
  transition-duration: 280ms;
  -webkit-transition-duration: 280ms;
  -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
  transform: translate3d(90.9466px, -52.47586px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(5) {
  transition-duration: 380ms;
  -webkit-transition-duration: 380ms;
  -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
  transform: translate3d(90.9466px, 52.47586px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(6) {
  transition-duration: 480ms;
  -webkit-transition-duration: 480ms;
  -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
  transform: translate3d(0.08361px, 104.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(7) {
  transition-duration: 580ms;
  -webkit-transition-duration: 580ms;
  -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
  transform: translate3d(-90.86291px, 52.62064px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(8) {
  transition-duration: 680ms;
  -webkit-transition-duration: 680ms;
  -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
  transform: translate3d(-91.03006px, -52.33095px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(9) {
  transition-duration: 780ms;
  -webkit-transition-duration: 780ms;
  -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
  transform: translate3d(-0.25084px, -104.9997px, 0);
}

.blue {
  background-color: #669AE1;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.blue:hover {
  color: #669AE1;
  text-shadow: none;
}

.green {
  background-color: #70CC72;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.green:hover {
  color: #70CC72;
  text-shadow: none;
}

.red {
  background-color: #FE4365;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.red:hover {
  color: #FE4365;
  text-shadow: none;
}

.purple {
  background-color: #C49CDE;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.purple:hover {
  color: #C49CDE;
  text-shadow: none;
}

.orange {
  background-color: #FC913A;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.orange:hover {
  color: #FC913A;
  text-shadow: none;
}

.lightblue {
  background-color: #62C2E4;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.lightblue:hover {
  color: #62C2E4;
  text-shadow: none;
}

.credit {
  margin: 24px 20px 120px 0;
  text-align: right;
  color: #EEEEEE;
}

.credit a {
  padding: 8px 0;
  color: #C49CDE;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}

.credit a:hover {
  text-decoration: underline;
}
</style>


================================================
FILE: Buttons/John-CFO_calm-kangaroo-15.html
================================================
<button class="BTN-style">
  <span class="BTN-text">Hover me</span>
</button>

<style>
/* From Uiverse.io by John-CFO  - Tags: simple, button, hover, hover effect */
.BTN-style {
  position: relative;
  width: 12em;
  height: 3.8em;
  border-width: 2px;
  border-radius: 6px;
  border-color: #ffff;
  display: block;
  padding: 8px;
  background: linear-gradient(to left, #c0c0c0, #dcdcdc);
  color: #ffffff;
  line-height: 1.25rem;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.BTN-text {
  font-weight: 500;
  font-size: 0.975rem;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
}

.BTN-style:hover {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;

  cursor: pointer;
}

.BTN-style:hover::before {
  -webkit-animation: sh02 0.5s 0s linear;
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 0.5s 0s linear;
}

.BTN-style::before {
  content: "";
  display: block;
  width: 0px;
  height: 85%;
  position: absolute;
  top: 50%;
  left: 0%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 50px 30px #fff;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

@keyframes sh02 {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
    left: 100%;
  }
}

</style>
    

================================================
FILE: Buttons/John-CFO_green-rabbit-93.html
================================================
<button class="btn">
  <span class="text">Button</span>
</button>
<style>
/* From Uiverse.io by John-CFO - Tags: button, glow, reflection */
.btn {
  height: 3.5rem;
  width: 13.2rem;
  border-radius: 5px;
  border: 5px solid rgb(255, 255, 255);
  cursor: pointer;
  filter: drop-shadow(0px 0px 10px rgb(255, 255, 255));
  animation: flickering 2s linear infinite both;
  text-transform: uppercase;
  background-color: rgb(83, 82, 82);
  color: rgb(234, 234, 234);
  font-weight: 700;
  transition: 0.6s;
  box-shadow: 0px 0px 60px #1f4c65;
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

@keyframes flickering {
  0%,
  100% {
    opacity: 1;
  }

  41.99% {
    opacity: 1;
  }

  42% {
    opacity: 0;
  }

  43% {
    opacity: 0;
  }

  43.01% {
    opacity: 1;
  }

  47.99% {
    opacity: 1;
  }

  48% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  49.01% {
    opacity: 1;
  }
}

.text {
  font-size: 1.8rem;
  font-family: Arial, Helvetica, sans-serif;
}

.btn:hover {
  background-color: black;
  border-radius: 0;
}






</style>


================================================
FILE: Buttons/JohnnyCSilva_brave-cougar-40.html
================================================
<button class="btn">Button 
  <span class="icon-right"></span>
  <span class="icon-right after"></span>
</button>
<style>
/* From Uiverse.io by JohnnyCSilva - Tags: button */
button {
  font-family: 'Poppins', sans-serif;
  letter-spacing: 2px;
  background: none;
  color: white;
  position: relative;
  outline: none;
  border: none;
  height: 50px;
  width: 190px;
  font-size: 14px;
  z-index: 2;
  transition: 0.01s 0.23s ease-out all;
  overflow: hidden;
}

button:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 55%;
  background: #303030;
  z-index: -1;
  transition: 0.3s ease-in all;
}

button:after {
  content: "";
  position: absolute;
  left: -5%;
  top: 5%;
  height: 90%;
  width: 5%;
  background: white;
  transition: 0.4s 0.02s ease-in all;
}

button:hover {
  cursor: pointer;
  color: transparent;
}

button:hover:before {
  left: 120%;
  width: 25%;
}

button:hover:after {
  left: 100%;
  width: 70%;
}

button:hover > .icon-right.after:after {
  left: -80px;
  color: white;
  transition: 0.2s 0.2s ease all;
}

button:hover > .icon-right.after:before {
  left: -104px;
  top: 14px;
  opacity: 0.2;
  color: white;
}

.icon-right {
  position: absolute;
  top: 0;
  right: 0;
}

.icon-right:after {
  font-family: "FontAwesome";
  content: "→";
  font-size: 24px;
  display: inline-block;
  position: relative;
  top: 26px;
  transform: translate3D(0, -55%, 0);
}

.icon-right.after:after {
  left: -250px;
  color: black;
  transition: 0.15s 0.25s ease left, 0.5s 0.05s ease color;
}

.icon-right.after:before {
  content: "Click Me!";
  position: absolute;
  left: -230px;
  top: 14px;
  opacity: 0;
  transition: 0.2s ease-in all;
}

.signature {
  position: fixed;
  font-family: sans-serif;
  font-weight: 100;
  bottom: 10px;
  left: 0;
  letter-spacing: 4px;
  font-size: 10px;
  width: 100%;
  text-align: center;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
}
</style>


================================================
FILE: Buttons/JohnnyCSilva_red-gecko-43.html
================================================
<button class="btn_center">
    Click Me
</button>
<style>
/* From Uiverse.io by JohnnyCSilva - Tags: button */
.btn_center {
  display: table-cell;
  vertical-align: middle;
  border: none;
  background-color: transparent;
}

.btn_center {
  color: white;
  margin: auto;
  width: 150px;
  line-height: 50px;
  font-size: 12px;
  letter-spacing: 2px;
  border-radius: 0px;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #031d67;
  box-shadow: 0px 15px 18px -6px rgba(35, 22, 214, 0.65);
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  position: relative;
}

.btn_center:hover {
  background-color: #051749;
  box-shadow: 0px 22px 19px -8px rgba(16, 8, 119, 0.65);
  transform: scale(1.02,1.02);
}

.btn_center:active {
  background-color: #051749;
  box-shadow: 0px 12px 18px -4px rgba(7, 4, 51, 0.65);
  transform: scale(0.95,0.95);
  transition: all 0.4s -0.125s;
}
</style>


================================================
FILE: Buttons/Jonathan2004-binjin_silly-insect-14.html
================================================
<button class="button">Get in touch</button>

<style>
/* From Uiverse.io by Jonathan2004-binjin  - Tags: button */
button {
  background-color: #ffffff;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 0.5rem;
  color: #111827;
  font-family: ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  padding: 0.75rem 1rem;
  text-align: center;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

button:hover {
  background-color: #f9fafb;
}

button:focus {
  outline: 2px solid rgba(0, 0, 0, 0.1);
  outline-offset: 2px;
}

button:focus-visible {
  -webkit-box-shadow: none;
  box-shadow: none;
}

</style>
    

================================================
FILE: Buttons/JorgeJimSports_fast-treefrog-94.html
================================================
<!-- From Uiverse.io by JorgeJimSports - Tags: button, login , signin -->

<button class="dark:hover:bg-[#000000]/90 text-white bg-black font-medium border-gray-600 border-2 rounded-3xl text-sm px-5 py-2.5 text-center inline-flex items-center mr-2 mb-2" type="button">
  <svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" role="img" data-icon="apple" data-prefix="fab" aria-hidden="true" class="w-5 h-5 mr-2 -ml-1"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" fill="currentColor"></path></svg>
  Sign in with Apple
</button>



================================================
FILE: Buttons/JsGrisales_wise-ladybug-7.html
================================================
<button>
  Suscribe
</button>
<style>
/* From Uiverse.io by JsGrisales - Tags: button */
button {
  min-height: 53px;
  min-width: 166px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  position: relative;
  cursor: pointer;
  background: -webkit-gradient(linear, left top, right top, color-stop(-12.74%, rgba(110, 239, 255, .5)), color-stop(56.76%, rgba(106, 224, 255, .271)));
  background: linear-gradient(90deg, rgba(110, 239, 255, .5) -12.74%, rgba(106, 224, 255, .271) 56.76%);
  border: 2px solid #acf7ff;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
}

button:before {
  content: "";
  width: 4px;
  height: 28px;
  background: #19173b;
  border: 2px solid #acf7ff;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  border-top: 0;
  border-left: 0;
  border-bottom: 0;
  bottom: -7px;
  left: 4px;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
}

button:after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -2px;
  border-top: 15px solid transparent;
  border-left: 15px solid #fffcf7;
}
</style>


================================================
FILE: Buttons/Juanes200122_horrible-stingray-49.html
================================================
<ul>
  <li>
    <a class="facebook" href="#">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="29"
        height="29"
        fill="currentColor"
        class="bi bi-facebook"
        viewBox="0 0 16 16"
      >
        <path
          d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"
        ></path>
      </svg>
    </a>
  </li>
</ul>

<style>
/* From Uiverse.io by Juanes200122  - Tags: icon, animation, social, twitter, facebook, instagram, button, hover */
ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  display: flex;
}
ul li {
  list-style: none;
}
ul li a {
  display: block;
  position: relative;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 40px;
  text-align: center;
  text-decoration: none;
  color: #404040;
  margin: 0 30px;
  transition: 0.5s;
}
ul li a span {
  position: absolute;
  transition: transform 0.5s;
}
ul li a span:nth-child(1),
ul li a span:nth-child(3) {
  width: 100%;
  height: 3px;
  background: #404040;
}
ul li a span:nth-child(1) {
  top: 0;
  left: 0;
  transform-origin: right;
}
ul li a:hover span:nth-child(1) {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s;
}

ul li a span:nth-child(3) {
  bottom: 0;
  left: 0;
  transform-origin: left;
}
ul li a:hover span:nth-child(3) {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s;
}

ul li a span:nth-child(2),
ul li a span:nth-child(4) {
  width: 3px;
  height: 100%;
  background: #404040;
}
ul li a span:nth-child(2) {
  top: 0;
  left: 0;
  transform: scale(0);
  transform-origin: bottom;
}
ul li a:hover span:nth-child(2) {
  transform: scale(1);
  transform-origin: top;
  transition: transform 0.5s;
}
ul li a span:nth-child(4) {
  top: 0;
  right: 0;
  transform: scale(0);
  transform-origin: top;
}
ul li a:hover span:nth-child(4) {
  transform: scale(1);
  transform-origin: bottom;
  transition: transform 0.5s;
}

.facebook:hover {
  color: #3b5998;
}
.facebook:hover span {
  background: #3b5998;
}

</style>
    

================================================
FILE: Buttons/Juanes200122_smart-skunk-68.html
================================================
<a href="#" class="ov-btn-slide-left">Izquierda
</a>
<style>
/* From Uiverse.io by Juanes200122 - Tags: simple, animation, button, hover, color, hover effect */
a {
  text-decoration: none;
}

.ov-btn-slide-left {
  background: #fff;
  color: #4741d7;
  border: 2px solid #4741d7;
  padding: 16px 20px;
  border-radius: 3px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}

.ov-btn-slide-left:hover {
  color: #fff;
}

.ov-btn-slide-left::after {
  content: "";
  background: #4741d7;
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  top: 0;
  bottom: 0;
  left: -100%;
  right: 100%;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.ov-btn-slide-left:hover::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
</style>


================================================
FILE: Buttons/Jules-gitclerc_quiet-donkey-50.html
================================================
<!-- From Uiverse.io by Jules-gitclerc  - Tags: simple, icon, animation, button -->
<button
  class="group flex items-center justify-start w-11 h-11 bg-red-600 rounded-full cursor-pointer relative overflow-hidden transition-all duration-200 shadow-lg hover:w-32 hover:rounded-lg active:translate-x-1 active:translate-y-1"
>
  <div
    class="flex items-center justify-center w-full transition-all duration-300 group-hover:justify-start group-hover:px-3"
  >
    <svg class="w-4 h-4" viewBox="0 0 512 512" fill="white">
      <path
        d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"
      ></path>
    </svg>
  </div>
  <div
    class="absolute right-5 transform translate-x-full opacity-0 text-white text-lg font-semibold transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
  >
    Logout
  </div>
</button>


    

================================================
FILE: Buttons/Jules-gitclerc_slimy-mouse-94.html
================================================
<!-- From Uiverse.io by Jules-gitclerc  - Tags: animation, minimalist, button, text animation, svg, tailwind, tailwindcss -->
<div class="w-full h-40 flex items-center justify-center">
  <a
    href="#"
    class="relative inline-flex items-center justify-start py-3 pl-4 pr-12 overflow-hidden font-semibold shadow text-indigo-600 transition-all duration-150 ease-in-out rounded hover:pl-10 hover:pr-6 bg-gray-50 dark:bg-gray-700 dark:text-white dark:hover:text-gray-200 dark:shadow-none group"
  >
    <span
      class="absolute bottom-0 left-0 w-full h-1 transition-all duration-150 ease-in-out bg-indigo-600 group-hover:h-full"
    ></span>
    <span
      class="absolute right-0 pr-4 duration-200 ease-out group-hover:translate-x-12"
    >
      <svg
        class="w-5 h-5 text-green-400"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M14 5l7 7m0 0l-7 7m7-7H3"
        ></path>
      </svg>
    </span>
    <span
      class="absolute left-0 pl-2.5 -translate-x-12 group-hover:translate-x-0 ease-out duration-200"
    >
      <svg
        class="w-5 h-5 text-green-400"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M14 5l7 7m0 0l-7 7m7-7H3"
        ></path>
      </svg>
    </span>
    <span
      class="relative w-full text-left transition-colors duration-200 ease-in-out group-hover:text-white dark:group-hover:text-gray-200"
      >Button</span
    >
  </a>
</div>


    

================================================
FILE: Buttons/Julian956_slippery-catfish-88.html
================================================
<button data-quantity="0" class="btn-cart">
          <svg class="icon-cart" viewBox="0 0 24.38 30.52" height="30.52" width="24.38" xmlns="http://www.w3.org/2000/svg">
            <title>icon-cart</title>
            <path transform="translate(-3.62 -0.85)" d="M28,27.3,26.24,7.51a.75.75,0,0,0-.76-.69h-3.7a6,6,0,0,0-12,0H6.13a.76.76,0,0,0-.76.69L3.62,27.3v.07a4.29,4.29,0,0,0,4.52,4H23.48a4.29,4.29,0,0,0,4.52-4ZM15.81,2.37a4.47,4.47,0,0,1,4.46,4.45H11.35a4.47,4.47,0,0,1,4.46-4.45Zm7.67,27.48H8.13a2.79,2.79,0,0,1-3-2.45L6.83,8.34h3V11a.76.76,0,0,0,1.52,0V8.34h8.92V11a.76.76,0,0,0,1.52,0V8.34h3L26.48,27.4a2.79,2.79,0,0,1-3,2.44Zm0,0"></path>
          </svg>
          <span class="quantity"></span>
        </button>
<style>
/* From Uiverse.io by Julian956 - Tags: button, buy now, cart */
.btn-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: none;
  background-color: transparent;
  position: relative;
}

.btn-cart::after {
  content: attr(data-quantity);
  width: fit-content;
  height: fit-content;
  position: absolute;
  font-size: 15px;
  color: white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: .2s linear;
  top: 115%;
}

.icon-cart {
  width: 24.38px;
  height: 30.52px;
  transition: .2s linear;
}

.icon-cart path {
  fill: rgb(240, 8, 8);
  transition: .2s linear;
}

.btn-cart:hover > .icon-cart {
  transform: scale(1.2);
}

.btn-cart:hover > .icon-cart path {
  fill: rgb(186, 34, 233);
}

.btn-cart:hover::after {
  visibility: visible;
  opacity: 1;
  top: 105%;
}

.quantity {
  display: none;
}

</style>


================================================
FILE: Buttons/KINGFRESS_giant-deer-25.html
================================================
<button>
  <span class="span-mother">
      <span>B</span>
      <span>u</span>
      <span>t</span>
      <span>t</span>
      <span>o</span>
      <span>n</span>
  </span>
  <span class="span-mother2">
      <span>B</span>
      <span>u</span>
      <span>t</span>
      <span>t</span>
      <span>o</span>
      <span>n</span>
  </span>
</button>
<style>
/* From Uiverse.io by KINGFRESS - Tags: button */
button {
  font-weight: bold;
  color: white;
  border-radius: 2rem;
  width: 95.02px;
  height: 42.66px;
  border: none;
  background-color: #3653F8;
  display: flex;
  justify-content: center;
  align-items: center;
}

button .span-mother {
  display: flex;
  overflow: hidden;
}

button:hover .span-mother {
  position: absolute;
}

button:hover .span-mother span {
  transform: translateY(1.2em);
}

button .span-mother span:nth-child(1) {
  transition: .2s;
}

button .span-mother span:nth-child(2) {
  transition: .3s;
}

button .span-mother span:nth-child(3) {
  transition: .4s;
}

button .span-mother span:nth-child(4) {
  transition: .5s;
}

button .span-mother span:nth-child(5) {
  transition: .6s;
}

button .span-mother span:nth-child(6) {
  transition: .7s;
}

button .span-mother2 {
  display: flex;
  position: absolute;
  overflow: hidden;
}

button .span-mother2 span {
  transform: translateY(-1.2em);
}

button:hover .span-mother2 span {
  transform: translateY(0);
}

button .span-mother2 span {
  transition: .2s;
}

button .span-mother2 span:nth-child(2) {
  transition: .3s;
}

button .span-mother2 span:nth-child(3) {
  transition: .4s;
}

button .span-mother2 span:nth-child(4) {
  transition: .5s;
}

button .span-mother2 span:nth-child(5) {
  transition: .6s;
}

button .span-mother2 span:nth-child(6) {
  transition: .7s;
}
</style>


================================================
FILE: Buttons/KINGFRESS_nice-deer-12.html
================================================
<button>
  <span class="txt">click me</span>
  <span class="txt2">You did it</span>
  <span class="gradient"></span>
</button>
<style>
/* From Uiverse.io by KINGFRESS - Tags: gradient, button */
button {
  background-color: transparent;
  color: white;
  font-weight: bold;
  height: 3.3em;
  width: 12em;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: .4s ease;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
}

button .gradient {
  height: 100%;
  width: 350%;
  background: linear-gradient(to right, #156aa3 25%, #64EAE7 65%, #16a085 90%);
  position: absolute;
  top: 0;
  left: 60%;
  transform: translateX(-50%);
  z-index: -1;
  transition: .4s ease;
}

button .txt {
  transition: .4s ease .5s;
}

button .txt2 {
  position: absolute;
  opacity: 0;
  transition: .4s;
}

button:hover .gradient {
  transition: .4s ease;
  transform: translateX(-40%);
}

button:focus .gradient {
  background-size: 200%;
  background-position: right;
  transform: translateX(-88%);
  transition: 1s ease;
}

button:focus .txt {
  opacity: 0;
  transition: .4s ease;
}

button:focus .txt2 {
  opacity: 1;
  transition: 1s ease .5s;
}
</style>


================================================
FILE: Buttons/KINGFRESS_purple-kangaroo-17.html
================================================

<button>
    <span class="circle1"></span>
    <span class="circle2"></span>
    <span class="circle3"></span>
    <span class="circle4"></span>
    <span class="circle5"></span>
    <span class="text">Submit</span>
</button>
<style>
/* From Uiverse.io by KINGFRESS - Tags: button */
button {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: white;
  background-color: #171717;
  padding: 1em 2em;
  border: none;
  border-radius: .6rem;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

button span:not(:nth-child(6)) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 30px;
  width: 30px;
  background-color: #0c66ed;
  border-radius: 50%;
  transition: .6s ease;
}

button span:nth-child(6) {
  position: relative;
}

button span:nth-child(1) {
  transform: translate(-3.3em, -4em);
}

button span:nth-child(2) {
  transform: translate(-6em, 1.3em);
}

button span:nth-child(3) {
  transform: translate(-.2em, 1.8em);
}

button span:nth-child(4) {
  transform: translate(3.5em, 1.4em);
}

button span:nth-child(5) {
  transform: translate(3.5em, -3.8em);
}

button:hover span:not(:nth-child(6)) {
  transform: translate(-50%, -50%) scale(4);
  transition: 1.5s ease;
}
  
</style>


================================================
FILE: Buttons/KINGFRESS_young-dragon-73.html
================================================
<button>
  <span class="txt">submit</span>
  <span class="txt2">sent!</span>
  <span class="loader-container">
    <span class="loader"></span>
  </span>
</button>
<style>
/* From Uiverse.io by KINGFRESS - Tags: button, progress bar */
button {
  background-color: transparent;
  width: 13em;
  height: 3.3em;
  border: 2px solid #1abc9c;
  border-radius: 25px;
  font-weight: bold;
  text-transform: uppercase;
  color: #1abc9c;
  padding: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

button .txt {
  transition: .4s ease-in-out;
  position: absolute;
}

button .txt2 {
  transform: translateY(1em) scale(0);
  color: #212121;
  position: absolute;
}

button .loader-container {
  height: 100%;
  width: 100%;
  background-color: transparent;
  border-radius: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  overflow: hidden;
}

button .loader-container .loader {
  height: 100%;
  width: 100%;
  background-color: #1abc9c;
  border-radius: inherit;
  transform: translateX(-13em);
}

button:focus {
  transition: .4s ease-in-out .4s;
  animation: scaling 1.5s ease-in-out 0s 1 both;
}

button:focus .txt {
  position: absolute;
  transform: translateY(-5em);
  transition: .4s ease-in-out;
}

button:focus .txt2 {
  transform: translateY(0) scale(1);
  transition: .3s ease-in-out 1.7s;
}

button:focus .loader {
  display: block;
  transform: translate(0);
  transition: .8s cubic-bezier(0,.4,1,.28) .4s;
  animation: loading;
}

@keyframes scaling {
  20% {
    height: 1.5em;
  }

  80% {
    height: 1.5em;
  }

  100% {
    height: 3.3em;
  }
}
</style>


================================================
FILE: Buttons/KSAplay_horrible-jellyfish-30.html
================================================
<button class="btn">
  DOWNLOAD
</button>
<style>
/* From Uiverse.io by KSAplay - Tags: button */
.btn {
  padding: 0.8em 2em 0.8em 2.5em;
  font-size: 15px;
  font-weight: bold;
  border-radius: 15px;
  color: #f6fff6;
  letter-spacing: 0.3em;
  text-shadow: -2px 2px 5px #33fd30;
  background-color: transparent;
  border: 2px solid #bbfeb1;
  box-shadow: 0 0 0px 1px #42f112,
    0 0 10px 2px #33fd30,
    inset 0 0 0px 1px #42f112,
    inset 0 0 10px 2px #33fd30;
  transition: 100ms;
}

.btn:hover {
  box-shadow: 0 0 0px 1px #42f112,
    0 0 10px 2px #33fd30,
    inset 0 0 0px 1px #42f112,
    inset 0 0 30px 2px #33fd30;
  text-shadow: 0 0 10px #33fd30;
  transform: translateY(-5px);
}

.btn:active {
  box-shadow: 0 0 0px 1px #42f112,
    0 0 25px 2px #33fd30,
    inset 0 0 0px 1px #42f112,
    inset 0 0 30px 2px #33fd30;
  transform: translateY(1px);
}
</style>


================================================
FILE: Buttons/KSAplay_lazy-lion-26.html
================================================
<div class="container">
  <button class="button">
    <p>PREMIUM</p>
  </button>
</div>
<style>
/* From Uiverse.io by KSAplay - Tags: button */
.container {
  transition: 200ms ease;
}

.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 40px;
  border-width: 0;
  border-radius: 1em;
  background-color: #19171C;
  transition: 500ms ease;
}

.button p {
  font-size: 20px;
  font-weight: bold;
  background: rgb(137,60,21);
  background: linear-gradient(90deg, rgba(137,60,21,1) 0%, rgba(255,222,68,1) 17%, rgba(177,116,30,1) 24%, rgba(255,231,82,1) 40%, rgba(224,147,38,1) 50%, rgba(228,150,42,1) 59%, rgba(176,120,27,1) 70%, rgba(239,179,51,1) 85%, rgba(135,58,26,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.button::before {
  position: absolute;
  content: '';
  width: 190px;
  height: 50px;
  border-radius: 1em;
  background-size: 100%;
  background: rgb(137,60,21);
  background: linear-gradient(90deg, rgba(137,60,21,1) 0%, rgba(255,222,68,1) 17%, rgba(177,116,30,1) 24%, rgba(255,231,82,1) 40%, rgba(224,147,38,1) 50%, rgba(228,150,42,1) 59%, rgba(176,120,27,1) 70%, rgba(239,179,51,1) 85%, rgba(135,58,26,1) 100%);
  z-index: -1;
}

.container:hover .button::before {
  animation: golden 5s infinite alternate ease-in-out;
}

.container:hover .button p {
  animation: golden 5s infinite alternate ease-in-out;
}

.container:hover {
  transform: scale(1.1);
}

.container:active {
  transform: scale(1);
}

.container:active .button::before {
  animation: golden 1s infinite alternate ease-in-out;
}

.container:active .button p {
  animation: golden 1s infinite alternate ease-in-out;
}

@keyframes golden {
  0% {
    background-size: 100%;
    background-position: 50%;
  }

  50% {
    background-size: 500%;
    background-position: 0%;
  }

  100% {
    background-size: 200%;
    background-position: 100%;
  }
}
</style>


================================================
FILE: Buttons/KSAplay_nasty-otter-73.html
================================================
<button class="btn">
  PLAY
</button>
<style>
/* From Uiverse.io by KSAplay - Tags: button */
.btn {
  padding: 0.5em 2em 0.5em 2.5em;
  font-size: 1em;
  font-weight: bold;
  border-radius: 15px;
  color: #fff6fb;
  letter-spacing: 0.3em;
  text-shadow: -2px 2px 5px #FD3084;
  background-color: transparent;
  border: 2px solid #FEB1DE;
  box-shadow: 0 0 0px 1px #F11271,
    0 0 10px 2px #FD3084,
    inset 0 0 0px 1px #F11271,
    inset 0 0 10px 2px #FD3084;
  transition: 100ms;
}

.btn:hover {
  box-shadow: 0 0 0px 1px #F11271,
    0 0 10px 2px #FD3084,
    inset 0 0 0px 1px #F11271,
    inset 0 0 30px 2px #FD3084;
  text-shadow: 0 0 10px #FD3084;
  transform: translateY(-5px);
}

.btn:active {
  box-shadow: 0 0 0px 1px #F11271,
    0 0 25px 2px #FD3084,
    inset 0 0 0px 1px #F11271,
    inset 0 0 30px 2px #FD3084;
  transform: translateY(1px);
}
</style>


================================================
FILE: Buttons/KSAplay_pink-dolphin-76.html
================================================
<button class="button">
  <div class="circle"></div>
  <span>Button</span>
</button>
<style>
/* From Uiverse.io by KSAplay - Tags: button */
.button {
  position: relative;
  display: flex;
  align-items: center;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1em;
  padding: 0.5em 2em;
  border-radius: 2em;
  border: 0 solid #fefefe;
  background-color: #ece5d8;
  color: #3b4255;
  box-shadow: 0 0 9px -4px #797979;
  transition: 100ms;
}

.button::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 2em;
  background-color: #ffdf99;
  opacity: 0;
  z-index: 1;
  transition: 100ms;
}

.circle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0.4em;
  height: 1.5em;
  width: 1.5em;
  border-radius: 1em;
  background-color: #313131;
}

.circle::before {
  position: absolute;
  content: '';
  width: 32%;
  height: 32%;
  border-radius: 1em;
  border: 3px solid #ffcd33;
}

.button span {
  z-index: 2;
  padding-left: 1.1em;
}

.button:hover {
  border: 3px solid #fefefe;
  box-shadow: 0 0 5px 0 #f0f0f0, inset 0 0 3px 0 #656565;
}

.button:active {
  border: 0 solid #fefefe;
  color: white;
  box-shadow: inset 0 0 5px 0 #4b4b4b;
  opacity: .7;
}

.button:active.button::after {
  opacity: .5;
}
</style>


================================================
FILE: Buttons/KSAplay_proud-bullfrog-29.html
================================================
<button>
  START
</button>
<style>
/* From Uiverse.io by KSAplay - Tags: button */
button {
  background-color: #0050ec;
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 20px;
  border-radius: 2em;
  cursor: pointer;
  transition: 0.1s ease;
  border-width: 0;
  box-shadow: 1px 5px 0 0 #0e285d;
}

button:hover {
  transform: translateY(-4px);
  box-shadow: 1px 9px 0 0 #0e285d;
}

button:active {
  transform: translateY(4px);
  box-shadow: 0px 0px 0 0 #0e285d;
}
</style>


================================================
FILE: Buttons/KSAplay_strong-panther-58.html
================================================
<button class="btn">
  <span class="text">Play</span>
</button>
<style>
/* From Uiverse.io by KSAplay - Tags: button */
.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1em 2em;
  font-size: 15px;
  font-weight: bold;
  border-width: 0;
  border-radius: 1.5em;
  text-transform: uppercase;
  transition: .2s ease;
}

.text {
  font-size: 1.2em;
  color: white;
  z-index: 1;
}

.btn::before {
  position: absolute;
  content: '';
  width: 120%;
  height: 260%;
  background-image: linear-gradient(135deg, rgba(0,5,255,1) 0%, rgba(255,0,159,1) 100%);
}

.btn::after {
  position: absolute;
  content: '';
  width: 88%;
  height: 80%;
  border-width: 0;
  border-radius: 1.2em;
  background-color: black;
  opacity: .7;
  transition: 100ms ease;
}

.btn:hover.btn {
  transform: scale(1.1);
}

.btn:hover.btn::after {
  opacity: .5;
}

.btn:hover.btn::before {
  animation: turn_4810 .4s infinite linear;
}

.btn:active.btn {
  transform: scale(1.05);
}

.btn:active.btn::before {
  transform: scale(1.05);
  animation: turn_4810 .2s infinite linear;
}

@keyframes turn_4810 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


</style>


================================================
FILE: Buttons/Kabak_unlucky-treefrog-77.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by Kabak - Tags: button, dark, modern, sleek */
button {
  height: 50px;
  margin: 5px;
  width: 120px;
  background: #333;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: Consolas, Courier New, monospace;
  border: solid #404C5D 1px;
  font-size: 16px;
  color: rgb(161, 161, 161);
  -webkit-transition: 500ms;
  transition: 500ms;
  border-radius: 5px;
  background: linear-gradient(145deg, #2e2d2d, #212121);
  -webkit-box-shadow: -1px -5px 15px #41465B, 
               5px  5px 15px #41465B, 
    inset      5px  5px 10px #212121, 
    inset     -5px -5px 10px #212121;
  box-shadow: -1px -5px 15px #41465B, 
               5px  5px 15px #41465B, 
    inset      5px  5px 10px #212121, 
    inset     -5px -5px 10px #212121;
}

button:hover {
  -webkit-box-shadow: 1px 1px 13px #20232e,
                    -1px -1px 13px #545b78;
  box-shadow: 1px 1px 13px #20232e,
             -1px -1px 13px #545b78;
  color: #d6d6d6;
  -webkit-transition: 500ms;
  transition: 500ms;
}

button:active {
  -webkit-box-shadow: 1px 1px 13px #20232e,
                     -1px -1px 33px #545b78;
  box-shadow: 1px 1px 13px #20232e,
             -1px -1px 33px #545b78;
  color: #d6d6d6;
  -webkit-transition: 100ms;
  transition: 100ms;
}
</style>


================================================
FILE: Buttons/Kemboi-Dun_calm-stingray-84.html
================================================
    <button class="btn">
        Hover me
    </button>
<style>
/* From Uiverse.io by Kemboi-Dun - Tags: button */
.btn {
  font-size: 17px;
  background: transparent;
  border: none;
  padding: 1em 1.5em;
  color: #f8f8f8;
  text-transform: uppercase;
  position: relative;
  transition: .5s ease;
  cursor: pointer;
}

.btn::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 2px;
  width: 0;
  background-color: #f8f8f8;
  transition: .5s ease;
}

.btn:hover {
  color: #181818;
  transition-delay: .5s;
}

.btn:hover::before {
  width: 100%;
}

.btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0;
  width: 100%;
  background-color: #f8f8f8;
  transition: .4s ease;
  z-index: -1;
}

.btn:hover::after {
  height: 100%;
  transition-delay: 0.4s;
}
</style>


================================================
FILE: Buttons/Kemboi-Dun_lazy-puma-63.html
================================================
    <button class="button">
       Hover Button
    </button>
<style>
/* From Uiverse.io by Kemboi-Dun - Tags: button */
.button {
  text-decoration: none;
  padding: 14px 24px;
  color: #121212;
  border: 1px solid #181818;
  overflow: hidden;
  position: relative;
  transition: color .5s .25s;
  border-radius: 2px;
  background: transparent;
}

.button::before,
.button::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #181818;
  z-index: -1;
  transform: scaleX(0);
  transition: transform .5s cubic-bezier(.785, .135, .15, .86);
}

.button::before {
  left: 0;
  transform-origin: left;
}

.button::after {
  right: 0;
  transform-origin: right;
}

.button:hover::before,
.button:hover::after {
  transform: scaleX(1);
}

.button:hover {
  color: #f8f8f8;
  transition-delay: .5s;
}
</style>


================================================
FILE: Buttons/Kenny10000_wonderful-ape-22.html
================================================
<button class="btn-76">
  Button
  <span class="top"></span>
  <span class="right"></span>
  <span class="bottom"></span>
  <span class="left"></span>
</button>

<style>
/* From Uiverse.io by Kenny10000  - Tags: button, #button, button hover effect  */
.btn-76,
.btn-76 *,
.btn-76 :after,
.btn-76 :before,
.btn-76:after,
.btn-76:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-76 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
.btn-76:disabled {
  cursor: default;
}
.btn-76:-moz-focusring {
  outline: auto;
}
.btn-76 svg {
  display: block;
}
.btn-76 [hidden] {
  display: none;
}
.btn-76 {
  --neon: #0ea5e9;
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  outline: 4px solid #fff;
  outline-offset: -4px;
  overflow: hidden;
  padding: 1.2rem 3rem;
  position: relative;
  text-transform: uppercase;
  transition: 0.2s linear 0.1s;
}
.btn-76:hover {
  background: var(--neon);
  box-shadow: 0 0 5px var(--neon), 0 0 25px var(--neon), 0 0 50px var(--neon),
    0 0 100px var(--neon);
  color: #fff;
  outline-color: transparent;
  transition: 0.2s linear 0.6s;
}
.btn-76 span {
  display: block;
  inset: 0;
  position: absolute;
}
.btn-76 .top {
  border-top: 4px solid var(--neon);
  opacity: 0;
  transform: translateX(calc(-100% + var(--progress, 0%)));
  transition: none;
}
.btn-76:hover .top {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear;
}
.btn-76 .right {
  border-right: 4px solid var(--neon);
  opacity: 0;
  transform: translateY(calc(-100% + var(--progress, 0%)));
  transition: none;
}
.btn-76:hover .right {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear 0.2s;
}
.btn-76 .bottom {
  border-bottom: 4px solid var(--neon);
  opacity: 0;
  transform: translateX(calc(100% - var(--progress, 0%)));
  transition: none;
}
.btn-76:hover .bottom {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear 0.4s;
}
.btn-76 .left {
  border-left: 4px solid var(--neon);
  opacity: 0;
  transform: translateY(calc(100% - var(--progress, 0%)));
  transition: none;
}
.btn-76:hover .left {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear 0.6s;
}

</style>
    

================================================
FILE: Buttons/KhaledMatalkah_chatty-sheep-5.html
================================================
<button class="button">
  Hover Me!
</button>

<style>
/* From Uiverse.io by KhaledMatalkah - Tags: button, hover, ease */
.button {
  background-color: transparent;
  color: #ffffff;
  padding: 15px 30px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease-in, transform 0.3s ease;
  font-size: 18px;
  font-weight: bold;
  border: none;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}

.button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #76a6ca;
  opacity: 0;
  transition: width 0.7s ease-in-out, opacity 0.9s ease;
}

.button:hover {
  transform: scale(1.05);
}

.button:hover:before {
  width: 100%;
  opacity: 0.6;
}

.button:active {
  background-color: #76a6ca;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
  transform: scale(0.98);
}

</style>


================================================
FILE: Buttons/KhaledMatalkah_cuddly-zebra-19.html
================================================
<button class="button">
  Hover Me!
</button>
<style>
/* From Uiverse.io by KhaledMatalkah - Tags: button, hover, transition */
.button {
  display: inline-block;
  padding: 15px 32px;
  font-size: 17px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  background: transparent;
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  border: none;
  z-index: 1;
}

.button {
  overflow: hidden;
}

.button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  transition: left 0.8s ease-in-out;
  z-index: -1;
}

.button:hover:before {
  left: 0%;
}

.button:after {
  content: "";
  position: absolute;
  bottom: 50%;
  right: -100%;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  transition: right 0.8s ease-in-out;
  z-index: -1;
}

.button:hover:after {
  right: 0%;
}
</style>


================================================
FILE: Buttons/KhaledMatalkah_grumpy-monkey-74.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by KhaledMatalkah - Tags: gradient, button */
.button {
  display: inline-block;
  padding: 15px 32px;
  font-size: 17px;
  font-weight: bold;
  color: #fff;
  background-color: #000;
  border: none;
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.button:before,
.button:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  opacity: 0.3;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}

.button:before {
  left: -100%;
  background: linear-gradient(90deg, rgba(0, 136, 255, 0.8), rgba(255, 0, 170, 0.8), rgba(0, 136, 255, 0.8));
  z-index: -1;
}

.button:hover:before {
  left: 0;
}

.button:after {
  right: -100%;
  background: linear-gradient(270deg, rgba(0, 136, 255, 0.8), rgba(255, 0, 170, 0.8), rgba(0, 136, 255, 0.8));
  z-index: -1;
}

.button:hover:after {
  right: 0;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: translateY(1px);
  box-shadow: none;
}

</style>


================================================
FILE: Buttons/KhaledMatalkah_light-goat-63.html
================================================
<button class="button">hover me !</button>

<style>
/* From Uiverse.io by KhaledMatalkah - Tags: button, hover, transition, transform */
.button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  background-color: #ff4081;
  border: none;
  border-radius: 50px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(255, 64, 129, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  z-index: -1;
}

.button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-size: 30px 30px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.button:hover {
  background-color: #e91e63;
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
}

.button:hover::before {
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.button:hover::after {
  opacity: 1;
}

.button:active {
  background-color: #e91e63;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transform: translateY(2px);
}

</style>


================================================
FILE: Buttons/KhaledMatalkah_lucky-dragon-53.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by KhaledMatalkah - Tags: button, hover, box-shadow */
.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background-color: #000000;
  border: none;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.button:hover {
  background-color: #111111;
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.3);
}

.button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.button::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}

.button:hover::before {
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
}


</style>


================================================
FILE: Buttons/KhaledMatalkah_modern-kangaroo-63.html
================================================
<button class="button">
  Hover Me!
</button>
<style>
/* From Uiverse.io by KhaledMatalkah - Tags: button, hover, transition, fill up */
.button {
  display: inline-block;
  padding: 15px 32px;
  font-size: 17px;
  font-weight: bold;
  color: rgb(53, 53, 53);
  background: transparent;
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  border: none;
  z-index: 1;
  overflow: hidden;
}

.button:before {
  content: "";
  position: absolute;
  top: 0%;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: blanchedalmond;
  transition: left 0.8s ease-in-out;
  z-index: -1;
}

.button:hover:before {
  left: 0%;
}

.button:after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  transition: background-color 0.8s ease-in-out;
  z-index: -1;
}

.button:hover:after {
  background-color: transparent;
}

</style>


================================================
FILE: Buttons/KhaledMatalkah_neat-snake-57.html
================================================
<button class="button">Hover Me!</button>
<style>
/* From Uiverse.io by KhaledMatalkah - Tags: button, hover, transition */
.button {
  display: inline-block;
  position: relative;
  padding: 13px 20px;
  border: none;
  background: rgba(51, 50, 50, 0.287);
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  cursor: crosshair;
  overflow: hidden;
}

.button:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 50%, transparent 100%);
  transition: left 0.3s ease;
}

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

</style>


================================================
FILE: Buttons/KhaledMatalkah_odd-gecko-75.html
================================================
  <button class="button">HOVER ME!</button>

<style>
/* From Uiverse.io by KhaledMatalkah - Tags: button, hover, animated */
@keyframes glowing-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }

  70% {
    box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.button {
  position: relative;
  display: inline-block;
  background: linear-gradient(to right, #FFB900, #FF7730);
  border: none;
  border-radius: 25px;
  color: white;
  padding: 10px 20px;
  font-size: 18px;
  text-transform: uppercase;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: glowing-pulse 2s infinite;
}

.button::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 30px;
  box-shadow: 0 0 20px #FF7730;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.button:hover::before {
  opacity: 1;
}

</style>


================================================
FILE: Buttons/KhaledMatalkah_old-emu-32.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by KhaledMatalkah - Tags: button, hover */
.button {
  background: transparent;
  color: #fff;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  transition: background-color 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

.button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  pointer-events: none;
}

.button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.button:hover:before {
  transform: translateX(0);
}

</style>


================================================
FILE: Buttons/KhaledMatalkah_selfish-rabbit-36.html
================================================
<button class="realistic-button">
  Button
</button>
<style>
/* From Uiverse.io by KhaledMatalkah - Tags: material design, button, custom, hover button */
.realistic-button {
  display: inline-block;
  position: relative;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to bottom, #3498db, #2980b9);
  border: 1px solid #2980b9;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), inset 0px 2px 4px rgba(255, 255, 255, 0.2);
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.3s, transform 0.3s;
}

.realistic-button::before,
        .realistic-button::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: -1;
  transition: transform 0.3s;
}

.realistic-button::before {
  top: 0;
  left: -100%;
  transform: skewX(-45deg);
}

.realistic-button::after {
  bottom: 0;
  right: -100%;
  transform: skewX(45deg);
}

.realistic-button:hover {
  background: linear-gradient(to bottom, #042b46, #0a525cd8);
  transform: translateY(-2px);
  box-shadow: 0px 6px 8px rgba(0, 195, 255, 0.2), inset 0px 2px 4px rgba(255, 255, 255, 0.1);
}

.realistic-button:hover::before {
  transform: translateX(100%);
}

.realistic-button:hover::after {
  transform: translateX(-100%);
}
</style>


================================================
FILE: Buttons/KhaledMatalkah_stale-squid-66.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by KhaledMatalkah - Tags: button, hover, transition */
.button {
  display: inline-block;
  padding: 15px 32px;
  font-size: 17px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(130deg, #ff6b6b, #c94d4d, #8e3636);
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: none;
  border-style: solid;
  border-width: 2px;
}

.button:before,
.button:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  pointer-events: none;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.button:before {
  left: 100%;
  background: linear-gradient(130deg, #ff6b6b, #c94d4d, #8e3636);
  z-index: -1;
}

.button:hover:before {
  transform: translateX(-50%);
  opacity: 1;
}

.button:after {
  right: 100%;
  background: linear-gradient(130deg, #ff6b6b, #c94d4d, #8e3636);
  z-index: -1;
}

.button:hover:after {
  transform: translateX(50%);
  opacity: 1;
}

.button:hover .button-text {
  transform: translateY(-3px);
}

.button-text {
  transition: transform 0.3s ease-in-out;
}

</style>


================================================
FILE: Buttons/KhaledMatalkah_tough-rat-6.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by KhaledMatalkah - Tags: button, gradients */
.button {
  display: inline-block;
  padding: 15px 32px;
  font-size: 17px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.button:before,
.button:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  opacity: 0.3;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}

.button:before {
  left: -100%;
  background: linear-gradient(90deg, rgba(0, 136, 255, 0.8), rgba(255, 0, 170, 0.8), rgba(0, 136, 255, 0.8));
  z-index: -1;
}

.button:hover:before {
  left: 0;
}

.button:after {
  right: -100%;
  background: linear-gradient(270deg, rgba(0, 136, 255, 0.8), rgba(255, 0, 170, 0.8), rgba(0, 136, 255, 0.8));
  z-index: -1;
}

.button:hover:after {
  right: 0;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: translateY(1px);
  box-shadow: none;
}

</style>


================================================
FILE: Buttons/KhelVers_loud-lion-80.html
================================================
<div class="btnContainer">
  <button class="button">
  Hover Me
</button>
</div>
<style>
/* From Uiverse.io by KhelVers - Tags:  */
.btnContainer {
  /* Appearance */
  background: #e0e0e0;
  -webkit-box-shadow: 6px 6px 16px #bebebe,
             -6px -6px 16px #ffffff9a;
  box-shadow: 6px 6px 16px #bebebe,
             -6px -6px 16px #ffffff9a;
/* Dimensions */
  width: 160px;
  height: 60px;
/* Border */
  border: none;
  border-radius: 16px;
/* Content Aligment */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.button {
  /* Appearance */
  background: #e0e0e0;
  /* Font-Style */
  font-size: 20px;
  font-weight: 600;
  /* Dimensions */
  height: 85%;
  width: 95%;
  /* Border */
  border: none;
  border-radius: 14px;
  /* Transition */
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}

.button:hover {
  /* Appearance */
  background: #e0e0e0;
  -webkit-box-shadow: inset 5px 5px 4px #c0c0c0,
              inset -5px -5px 4px #dddddd;
  box-shadow: inset 5px 5px 4px #c0c0c0,
              inset -5px -5px 4px #dddddd;
  /* Font-Style */
  font-size: 20px;
  font-weight: 400;
  color: #333333;
}


</style>


================================================
FILE: Buttons/KhelVers_orange-lionfish-62.html
================================================
<button class="button">Winter</button>

<style>
/* From Uiverse.io by KhelVers  - Tags: simple, 3d, button */
.button {
  cursor: pointer;
  font-size: large;
  font-family: inherit;
  font-weight: bold;
  color: #0011ff;
  background-color: #f8f8fd;
  padding: 0.8em 2.2em;
  border-radius: 50em;
  border: 6px solid #8b93f8;
  box-shadow: 0px 8px #1f35ff;
}
.button:active {
  position: relative;
  top: 8px;
  border: 6px solid #646fff;
  box-shadow: 0px 0px;
}

</style>
    

================================================
FILE: Buttons/Kilian-DM_slimy-baboon-11.html
================================================
<button class="button-3d">button</button>

<style>
/* From Uiverse.io by Kilian-DM - Tags: 3d, button */
.button-3d {
  display: inline-block;
  padding: 0.5em 1em;
  font-size: 1.06em;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  background-color: #8e44ad;
  border: none;
  border-radius: 0.25em;
  box-shadow: 0 0.15em 0.3em rgba(0, 0, 0, 0.3);
  transform: perspective(1em) rotateX(-1deg) rotateY(1deg);
  transition: all 0.2s ease-in-out;
}

.button-3d:hover {
  transform: perspective(1em) rotateX(-3deg) rotateY(3deg) translateY(-0.05em);
  background-color: #9b59b6;
  box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.3);
}

.button-3d:focus,
.button-3d:active {
  transform: perspective(1em) rotateX(-3deg) rotateY(3deg) translateY(-0.05em);
  background-color: #e74c3c;
  box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.3);
  outline: none;
}
</style>


================================================
FILE: Buttons/KingHendrie_heavy-wombat-40.html
================================================
<input type="checkbox" id="send-checkbox" class="send-checkbox" />
<label for="send-checkbox" class="send-button">
  <svg
    class="svg-style"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    height="20px"
    width="20px"
  >
    <path
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="1.5"
      stroke="#292D32"
      d="M7.39999 6.32003L15.89 3.49003C19.7 2.22003 21.77 4.30003 20.51 8.11003L17.68 16.6C15.78 22.31 12.66 22.31 10.76 16.6L9.91999 14.08L7.39999 13.24C1.68999 11.34 1.68999 8.23003 7.39999 6.32003Z"
    ></path>
    <path
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="1.5"
      stroke="#292D32"
      d="M10.11 13.6501L13.69 10.0601"
    ></path>
  </svg>
  <span class="message">Send Message</span>
  <span class="message-sent">Message Sent</span>
</label>

<style>
/* From Uiverse.io by KingHendrie  - Tags: simple, icon, animation, action, button, rounded, social media, button hover effect  */
.send-checkbox {
  display: none;
}

.send-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 2px solid #ddd;
  border-radius: 15px;
  background-color: #f9f9f9;
  color: #2c2c2c;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1),
    2px 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.send-checkbox:checked + .send-button .message {
  opacity: 0;
}

.send-checkbox:checked + .send-button .message-sent {
  animation: fadeIn 3s forwards;
}

.send-checkbox:checked + .send-button svg {
  animation: send 1s forwards;
}

@keyframes rotate-hover {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(40deg);
  }
}

@keyframes send {
  0% {
    transform: translateX(0) rotate(40deg);
  }
  100% {
    transform: translateX(150px) rotate(40deg);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.send-button .message-sent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  color: #125b96;
}

.send-button:hover {
  background-color: #e0e0e0;
  box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.1),
    3px 3px 7px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.send-button:hover svg {
  animation: rotate-hover 0.2s;
  transform: rotate(40deg);
}

</style>
    

================================================
FILE: Buttons/KitoC_curly-cheetah-59.html
================================================
<button>
  <div class="blackhole">
    <span class="rocket-path">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="rocket"> <g> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M8.498 20h7.004A6.523 6.523 0 0 1 12 23.502 6.523 6.523 0 0 1 8.498 20zM18 14.805l2 2.268V19H4v-1.927l2-2.268V9c0-3.483 2.504-6.447 6-7.545C15.496 2.553 18 5.517 18 9v5.805zM12 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path> </g> </svg>
    </span>
    <span class="ring">
      <span class="block"></span>
    </span>
  </div>
  <span class="text">Don't get lost</span>
</button>
<style>
/* From Uiverse.io by KitoC - Tags: button */
button {
  --black-hole-color-2: rgb(242, 122, 42);
  --black-hole-color: rgb(230, 148, 93);
  font-size: 17px;
  position: relative;
  background: #212121;
  padding: 0.5em;
  border: 2px solid var(--black-hole-color);
  border-radius: 8px;
}

button:hover {
  border: 2px solid var(--black-hole-color-2);
  animation: alert 1s alternate infinite linear;
}

.blackhole {
  padding: 3em;
  background-color: black;
  color: var(--black-hole-color);
  position: absolute;
  animation: wiggle 3s alternate-reverse infinite linear;
  top: -1em;
  left: -8em;
}

.blackhole, .blackhole::after, .blackhole::before, .blackhole .ring, .blackhole .ring::after {
  content: "";
  border: 2px solid var(--black-hole-color);
  border-radius: 50%;
  box-shadow: 0 0 3em,
              0 0 1em;
}

.blackhole::after, .blackhole::before {
  animation: writhe 3s alternate-reverse infinite linear;
}

.blackhole::before {
  position: absolute;
  width: calc(100% + 0.5em);
  height: calc(100% + 0.5em);
  top: -9px;
  left: -7px;
}

.blackhole::after {
  position: absolute;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  top: -6px;
  left: -5px;
}

.blackhole .ring, .blackhole .ring::after {
  content: "";
  position: absolute;
  left: -50%;
  width: 200%;
  border-top: none;
  height: 2em;
  border-width: 5px;
  box-shadow: 0px 5px 10px var(--black-hole-color);
}

.blackhole .ring, .blackhole .ring::after {
  animation: ring-writhe 3s alternate-reverse infinite linear;
}

.blackhole .block {
  position: absolute;
  z-index: 90;
  content: "";
  background-color: black;
  top: -20%;
  left: 25%;
  width: 50%;
  height: 10px;
}

.blackhole .ring::after {
  width: 110%;
  left: -8%;
}

.blackhole .rocket {
  fill: white;
  height: 30px;
  transform: rotate(-140deg);
  animation: idle 1s alternate-reverse infinite linear;
}

.blackhole .rocket-path {
  position: absolute;
  top: -60px;
  right: -60px;
}

button:hover .rocket-path, button:focus .rocket-path {
  z-index: 100;
  animation: engine-start 0.2s alternate-reverse infinite linear;
}

button:focus  .rocket-path {
  animation: descend 1.2s linear forwards, 
             descend-dissapear 0.1s linear forwards;
  animation-delay: 0s, 1s;
}

button .text {
  display: flex;
  color: white;
}

@keyframes idle {
  from {
    transform: rotate(-130deg);
  }

  to {
    transform: rotate(-140deg);
  }
}

@keyframes alert {
  from {
    box-shadow: 0 0 0 var(--black-hole-color);
  }

  to {
    box-shadow: 0 0 8px var(--black-hole-color);
  }
}

@keyframes engine-start {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.05);
  }
}

@keyframes descend {
  from {
    top: -60px;
    right: -60px;
    transform: scale(1);
  }

  to {
    top: -10px;
    right: -10px;
    transform: scale(0.8);
  }
}

@keyframes descend-dissapear {
  from {
    top: -10px;
    right: -10px;
    transform: scale(1);
  }

  to {
    top: 20px;
    right: 20px;
    transform: scale(0);
  }
}

@keyframes writhe {
  from {
    box-shadow: -4px -3px 35px var(--black-hole-color-2),
              -4px -3px 5px;
    transform: translateX(-1px) scale(1);
  }

  to {
    box-shadow: 4px 3px 35px,
              4px 3px 5px var(--black-hole-color-2);
    transform: translateX(1px) scale(0.95);
  }
}

@keyframes wiggle {
  from {
    transform: translateX(-3px);
  }

  to {
    transform: translateX(3px);
  }
}

@keyframes ring-writhe {
  from {
    transform: translateX(-2px) scale(1);
    box-shadow: -2px 5px 10px var(--black-hole-color);
  }

  to {
    box-shadow: 2px 5px 10px var(--black-hole-color-2);
    transform: translateX(2px) scale(0.95);
  }
}

</style>


================================================
FILE: Buttons/KlaujonRuamni_evil-sheep-56.html
================================================
<button class="beautiful-button">
  Click me!
</button>
<style>
/* From Uiverse.io by KlaujonRuamni - Tags: button, html, css, click me */
.beautiful-button {
  position: relative;
  display: inline-block;
  background: linear-gradient(to bottom, #1b1c3f, #4a4e91);
 /* Gradient background */
  color: white;
 /* White text color */
  font-family: "Segoe UI", sans-serif;
 /* Stylish and legible font */
  font-weight: bold;
  font-size: 18px;
 /* Large font size */
  border: none;
 /* No border */
  border-radius: 30px;
 /* Rounded corners */
  padding: 14px 28px;
 /* Large padding */
  cursor: pointer;
 /* Cursor on hover */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 /* Subtle shadow */
  animation: button-shimmer 2s infinite;
  transition: all 0.3s ease-in-out;
 /* Smooth transition */
}

/* Hover animation */
.beautiful-button:hover {
  background: linear-gradient(to bottom, #2c2f63, #5b67b7);
  animation: button-particles 1s ease-in-out infinite;
  transform: translateY(-2px);
}

/* Click animation */
.beautiful-button:active {
  transform: scale(0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Shimmer animation */
@keyframes button-shimmer {
  0% {
    background-position: left top;
  }

  100% {
    background-position: right bottom;
  }
}

/* Particle animation */
@keyframes button-particles {
  0% {
    background-position: left top;
  }

  100% {
    background-position: right bottom;
  }
}
</style>


================================================
FILE: Buttons/Lakshay-art_chilly-goat-78.html
================================================
<button>
  <div class="main">
    <div class="rings" id="ring1"></div>
    <div class="rings" id="ring2"></div>
    <div class="asteriods-large" id="asteriod1"></div>
    <div class="asteriods-large" id="asteriod2"></div>
    <div class="asteriods-large" id="asteriod3"></div>
    <div class="asteriods-large" id="asteriod4"></div>
    <div class="asteriods-large" id="asteriod5"></div>
    <div class="asteriods-small" id="asteriod6"></div>
    <div class="asteriods-small" id="asteriod7"></div>
    <div class="asteriods-small" id="asteriod8"></div>
    <div class="asteriods-small" id="asteriod9"></div>
    <div class="asteriods-small" id="asteriod10"></div>
    <div id="saturn"></div>
    <div id="explore">Explore</div>

  </div>
</button>
<style>
/* From Uiverse.io by Lakshay-art - Tags: button */
button {
  border: 0;
  background: radial-gradient(ellipse at 50% 50%,black 20%,transparent 72%);
  font-size: 17px;
  height: 200px;
  width: 300px;
  zoom: 1.2;
}

.main {
  width: 70px;
  margin: auto;
  position: relative;
  transform: rotateZ(0deg);
  isolation: isolate;
  scale: 1;
  transition: all 1.5s;
}

.main:hover {
  transform: rotateZ(240deg);
  scale: 2;
  /* filter: drop-shadow(10px,10px,10px,white); */
  filter: drop-shadow(-1px -1px 5px #69e9d6);
}

.rings {
  position: absolute;
  width: 200px;
  height: 100px;
  /* background-color: #000000; */
  border-radius: 150px 150px 0 0;
  background: radial-gradient(circle at 50% 100%,transparent 30%, #69e9d6 40%,#404D44 50%,#44867c 60%,#404D44 70%,transparent);
}

#saturn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(80deg,#69e9d6,#404D44,#000000);
}

#ring1 {
  transform: rotateX(80deg);
  top: -20px;
  left: -65px;
}

#ring2 {
  transform: rotateX(-100deg);
  left: -65px;
  z-index: -1;
  top: -3px;
}

.asteriods-large {
  position: absolute;
  width: 8px;
  height: 10px;
  border-radius: 15px 8px;
  background: linear-gradient(220deg,#6f7776,#598ea3,#311515);
  transform: rotateZ(0deg);
  transition: all 3s;
}

#asteriod1 {
  top: 8px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
}

#asteriod2 {
  top: 35px;
  height: 10px;
  left: -55px;
}

#asteriod3 {
  top: 35px;
  height: 8px;
  left: 85px;
}

#asteriod4 {
  top: 40px;
  height: 4px;
  width: 4px;
  left: -40px;
}

#asteriod5 {
  top: 35px;
  height: 4px;
  width: 4px;
  left: 82px;
}

.asteriods-small {
  position: absolute;
  width: 4px;
  height: 3px;
  border-radius: 15px 8px;
  background: linear-gradient(80deg,#6f7776,#598ea3,#311515);
  transform-origin: 50px 50px;
  transform: rotateZ(0deg);
  transition: all 3s;
}

#asteriod6 {
  top: 6px;
  left: -5px;
  border-radius: 50%;
}

#asteriod7 {
  top: 15px;
  left: -35px;
}

#asteriod8 {
  top: 35px;
  left: 65px;
}

#asteriod9 {
  top: 60px;
  left: -10px;
}

#asteriod10 {
  top: 15px;
  left: 112px;
}

#explore {
  position: absolute;
  top: 32px;
  font-size: 15px;
  color: hsl(171, 59%, 74%);
  left: 10px;
  transition: all 3s;
}

.main:hover > .asteriods-large,.main:hover > .asteriods-small {
  transform: translateX(28px);
}

.main:hover > #explore {
  translate: -10px 20px;
  transform: rotateZ(120deg);
}

.main:not(hover) > #explore {
  translate: 0px;
  transform: rotateZ(0deg);
}

.main:not(hover) > .asteriods-large,.main:not(hover) > .asteriods-small {
  transform: translateX(0px);
}

.main:is(:active) > #explore {
  translate: -100px 200px;
}

.main:is(:active) {
  translate: -200px;
}


</style>


================================================
FILE: Buttons/Lakshay-art_nice-insect-63.html
================================================
<div id="bg">
  <div id="orangebg"></div>
  <div id="pinkbg"></div>

  <div id="yellowbg"></div>
  <div id="purplebg"></div>
</div>
<button class="button">
  <div id="pink1" class="pink"></div>
  <div id="pink2" class="pink"></div>
  <div id="pink3" class="pink"></div>
  <div id="pink4" class="pink"></div>
  <div id="pink5" class="pink"></div>
  <div id="pink6" class="pink"></div>

  <div id="orange1" class="orange"></div>
  <div id="orange2" class="orange"></div>
  <div id="orange3" class="orange"></div>
  <div id="orange4" class="orange"></div>

  <div id="white1" class="white"></div>
  <div id="white2" class="white"></div>
  <div id="white3" class="white"></div>
  <div id="white4" class="white"></div>
  <div id="white5" class="white"></div>
  <div id="white6" class="white"></div>
  <div id="white7" class="white"></div>
  <div id="white8" class="white"></div>
  <div id="orange5" class="orangei"></div>
  <div id="orange6" class="orangei"></div>
  <div id="orange7" class="orangei"></div>
  <div id="orange8" class="orangei"></div>
  <div id="orange9" class="orangei"></div>
  <div id="orange10" class="orangei"></div>
  <div id="orange11" class="orange"></div>
  <div id="pink7" class="pinki"></div>
  <div id="pink8" class="pinki"></div>
  <div id="pink9" class="pinki"></div>
  <div id="pink10" class="pinki"></div>
  <div id="pink11" class="pink"></div>
  <div id="white9" class="white"></div>
  <div id="white10" class="white"></div>
  <div id="backdrop2"></div>
  <div id="whiteOverlay"></div>
  <div id="whiteBorder"></div>
  <div id="whiteBorder2"></div>
  <div id="white11" class="white"></div>
  <div id="white12" class="white"></div>
  <div id="white13" class="white"></div>
  <div id="white14" class="white"></div>
  <div id="white15" class="white"></div>
  <div id="white16" class="white"></div>

  <div id="text">
    <svg
      preserveAspectRatio="none"
      viewBox="0 0 256 256"
      height="20"
      width="26"
      version="1.1"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs></defs>
      <g
        transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
        style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
      >
        <path
          stroke-linecap="round"
          transform="matrix(1 0 0 1 0 0)"
          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
          d="M 71.79 34.614 c -0.334 -0.497 -0.926 -0.745 -1.513 -0.63 l -18.311 3.528 l 3.718 -35.877 c 0.071 -0.682 -0.332 -1.32 -0.979 -1.55 c -0.648 -0.229 -1.362 0.011 -1.738 0.585 L 18.202 53.746 c -0.328 0.5 -0.325 1.144 0.008 1.639 c 0.33 0.493 0.922 0.742 1.513 0.632 l 18.312 -3.529 l -3.718 35.876 c -0.071 0.684 0.332 1.322 0.979 1.551 C 35.455 89.971 35.622 90 35.792 90 c 0.502 0 0.965 -0.251 1.241 -0.67 l 34.765 -53.076 C 72.126 35.754 72.122 35.11 71.79 34.614 z"
        ></path>
      </g>
    </svg>
    Join now
  </div>
</button>

<style>
/* From Uiverse.io by Lakshay-art  - Tags: material design, neumorphism, glassmorphism, 3d, button, rounded, glow, creative */
.button {
  cursor: pointer;
  width: 335px;
  height: 110px;
  border-radius: 30px;
  border: 1px solid #e5c3e6;
  position: relative;
  overflow: hidden;
  filter: brightness(0.9) contrast(1.2)
    drop-shadow(0px 20px 16px rgba(0, 0, 0, 0.212));
}
#backdrop {
  height: 110px;
  width: 335px;
  overflow: hidden;
  border-radius: 30px;

  background-color: rgb(255 255 255 / 5%);
  backdrop-filter: blur(10px);
}

#backdrop2 {
  height: 110px;
  width: 335px;
  overflow: hidden;
  border-radius: 30px;

  background-color: rgb(255 255 255 / 5%);
  backdrop-filter: blur(6px);
}
.pink {
  position: absolute;
  background-color: #f05ee7;
  filter: blur(6px);
  border-radius: 50%;
}
.pinki {
  position: absolute;
  background-color: #ba63d9;
  /* filter: blur(6px); */
  border-radius: 50%;
}
.orange {
  position: absolute;
  background-color: #f37130;
  filter: blur(6px);
  border-radius: 50%;
}
.orangei {
  position: absolute;
  background-color: #ff4600;
  filter: blur(3px);
  border-radius: 50%;
}
.white {
  position: absolute;
  background-color: white;
  /* filter: blur(5px); */
  border-radius: 25px;
}

#pink1 {
  top: -10px;
  left: -10px;
  height: 50px;
  width: 150px;
}

#pink2 {
  bottom: -10px;
  left: -10px;
  height: 50px;
  width: 140px;
}
#pink3 {
  top: -5px;
  right: -10px;
  height: 50px;
  width: 120px;
}

#pink4 {
  bottom: -5px;
  right: -10px;
  height: 50px;
  width: 140px;
}

#pink5 {
  top: 25px;
  left: -20px;
  height: 70px;
  width: 120px;
  opacity: 0.7;
}
#pink6 {
  top: 25px;
  right: -20px;
  height: 70px;
  width: 120px;
  opacity: 0.7;
}
#pink7 {
  top: 0px;
  left: -5px;
  height: 30px;
  width: 30px;
  /* opacity: 0.7; */
}
#pink8 {
  bottom: -20px;
  left: -20px;
  height: 110px;
  width: 50px;
  /* opacity: 0.7; */
}
#pink9 {
  top: 0px;
  right: -20px;
  height: 60px;
  width: 50px;
  opacity: 0.7;
}
#pink10 {
  bottom: 0px;
  right: -20px;
  height: 20px;
  width: 50px;
  opacity: 0.7;
}
#pink11 {
  top: 25px;
  right: 40px;
  height: 30px;
  width: 70px;
  opacity: 0.5;
}
#orange1 {
  top: -15px;
  left: 120px;
  height: 50px;
  width: 130px;
}

#orange2 {
  top: 30px;
  left: 90px;
  height: 50px;
  width: 170px;
  opacity: 0.7;
}
#orange3 {
  top: 80px;
  left: 120px;
  height: 50px;
  width: 120px;
}

#orange5 {
  top: 10px;
  left: 160px;
  height: 30px;
  width: 30px;
}
#orange6 {
  top: 15px;
  left: 135px;
  height: 20px;
  width: 20px;
}
#orange7 {
  top: 15px;
  left: 115px;
  height: 20px;
  width: 15px;
}
#orange8 {
  bottom: 15px;
  left: 135px;
  height: 25px;
  width: 20px;
}
#orange9 {
  bottom: 15px;
  left: 195px;
  height: 20px;
  width: 15px;
}

#orange10 {
  bottom: 0px;
  left: 275px;
  height: 25px;
  width: 15px;
}
#orange11 {
  bottom: 55px;
  left: 240px;
  height: 50px;
  width: 35px;
  opacity: 0.8;
}

#white1 {
  top: 8px;
  left: 20px;
  height: 10px;
  width: 130px;
}

#white2 {
  top: 35px;
  left: 40px;
  height: 35px;
  width: 70px;
}
#white3 {
  top: 8px;
  left: 200px;
  height: 10px;
  width: 70px;
}
#white4 {
  top: 35px;
  left: 205px;
  height: 35px;
  width: 120px;
}
#white5 {
  top: 30px;
  right: 9px;
  height: 65px;
  width: 30px;
}
#white6 {
  bottom: 15px;
  left: 40px;
  height: 10px;
  width: 70px;
}
#white7 {
  bottom: 15px;
  right: 40px;
  height: 10px;
  width: 70px;
}
#white8 {
  top: 15px;
  right: 20px;
  height: 50px;
  width: 30px;
}
#white9 {
  top: 30px;
  left: 0px;
  height: 50px;
  width: 5px;
  opacity: 0.6;
}
#white10 {
  top: 30px;
  right: 0px;
  height: 50px;
  width: 3px;
  opacity: 0.9;
}
#white11 {
  top: 6px;
  left: 25px;
  height: 15px;
  width: 100px;
  background-color: transparent;
  border-bottom: 7px solid white;
  border-left: 7px solid white;
  filter: blur(4px);
}
#white12 {
  top: 15px;
  left: 8px;
  height: 25px;
  width: 15px;
  background-color: transparent;
  border-top: 3px solid white;
  border-right: 3px solid #fff9;
  filter: blur(2px);
}
#white13 {
  bottom: 6px;
  right: 9px;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border-right: 7px solid white;
  border-top: 7px solid white;
  filter: blur(3px);
}
#white14 {
  bottom: 28px;
  right: 3px;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border-left: 7px solid white;
  border-bottom: 7px solid white;
  filter: blur(2px);
}
#white15 {
  top: 10px;
  right: 13px;
  height: 10px;
  width: 10px;
  filter: blur(3px);
}

#white16 {
  top: 28px;
  left: 28px;
  height: 12px;
  width: 15px;
  filter: blur(3px);
}
#whiteOverlay {
  position: absolute;
  /* background-color: #ffffff44; */
  background: linear-gradient(
    180deg,
    #ffffff44 92px,
    #ffffff11 96px,
    #ffffff66 100px
  );
  top: 5px;
  left: 5px;
  width: 324px;
  height: 100px;
  border-radius: 26px;
  /* filter: blur(1px); */
}
#whiteBorder {
  position: absolute;
  /* background-color: #ffffff44; */
  /* background: linear-gradient(180deg,#ffffff44 95px,#ffffff11 98px,#ffffff44 100px); */
  top: 15px;
  left: 20px;
  width: 295px;
  height: 74px;
  border-radius: 15px;
  border: 5px solid #ffffff66;
  filter: blur(2px);
}
#whiteBorder2 {
  position: absolute;
  /* background-color: #ffffff44; */
  /* background: linear-gradient(180deg,#ffffff44 95px,#ffffff11 98px,#ffffff44 100px); */
  top: 15px;
  left: 20px;
  width: 295px;
  height: 74px;
  border-radius: 15px;
  border: 2px solid #ffffff44;
  filter: blur(1px);
}
#text {
  height: 110px;
  width: 335px;
  position: absolute;
  top: 40px;
  font-size: 25px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
#bg {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -155deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.15) 50px,
    rgba(0, 0, 0, 0.15) 100px,
    rgba(225, 225, 225, 0.15) 150px
  );
  filter: blur(30px);
}
#pinkbg {
  position: absolute;
  background-color: #e59cfaaa;
  border-radius: 50%;
  bottom: -150px;
  filter: blur(20px);
  width: 400px;
  height: 200px;
  right: 30px;
}
#orangebg {
  position: absolute;
  background-color: #fb9a71aa;
  border-radius: 50%;
  bottom: -150px;
  filter: blur(20px);
  width: 250px;
  height: 200px;
  right: 0px;
}
#yellowbg {
  position: absolute;
  background-color: #f8b74555;
  border-radius: 50%;
  bottom: -150px;
  filter: blur(20px);
  width: 100px;
  height: 200px;
  right: 0px;
}
#purplebg {
  position: absolute;
  background-color: #9b27ee33;
  border-radius: 50%;
  bottom: -150px;
  filter: blur(30px);
  width: 100px;
  height: 200px;
  right: 50%;
}

</style>
    

================================================
FILE: Buttons/Lakshay-art_polite-tiger-43.html
================================================
<button class="button">
  <div id="main-border">
    <div id="main">
      <div id="inner-box">
        <div id="inner-dent"></div>
        <div id="send">Send</div>
        <div id="sent">Sent</div>
        <div id="tick">
          <svg
            stroke-width="1.5"
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke="#000000"
            fill="none"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            height="30px"
            width="30px"
          >
            <path
              d="m1.75 9.75 2.5 2.5m3.5-4 2.5-2.5m-4.5 4 2.5 2.5 6-6.5"
            ></path>
          </svg>
        </div>
        <div tabindex="-1" id="text-container">
          <div id="planebody">
            <svg
              text-rendering="geometricPrecision"
              shape-rendering="geometricPrecision"
              viewBox="0 0 24 24"
              width="30"
              height="30"
            >
              <path
                stroke-width="1"
                stroke="#000"
                transform="matrix(-.613681 0.628244-.642735-.627837 26.9797 9.305393)"
                d="M14.2199,21.63c-1.18,0-2.85-.83-4.17-4.8l-.72002-2.16-2.16-.72c-3.96-1.32-4.79-2.99-4.79-4.16999c0-1.17.83-2.85,4.79-4.18l8.49002-2.83c2.12-.71,3.89-.5,4.98.58s1.3,2.86.59,4.98L18.3999,16.82c-1.33,3.98-3,4.81-4.18,4.81ZM7.63988,7.03001c-2.78.93-3.77,2.03-3.77,2.75s.99,1.81999,3.77,2.73999l2.52002.84c.22.07.4.25.47.47l.84,2.52c.92,2.78,2.03,3.77,2.75,3.77s1.82-.99,2.75-3.77l2.83-8.48999c.51-1.54.42-2.8-.23-3.45s-1.91-.73-3.44-.22l-8.49002,2.84Z"
              ></path>
              <path
                stroke-width="3"
                stroke="#000"
                transform="matrix(.16967 0.39318-.400015 0.172619 21.274592 7.311157)"
                d="M14.2199,21.63c-1.18,0-11.84002-10.67-11.84002-11.84999c0-1.17.83-2.85,4.79-4.18l8.49002-2.83c2.12-.71,3.89-.5,4.98.58s1.3,2.86.59,4.98L18.3999,16.82c-1.33,3.98-3,4.81-4.18,4.81ZM7.63988,7.03001c-2.78.93-3.77,2.03-3.77,2.75s.99,1.81999,3.77,2.73999l3.83002,3.83c.92,2.78,2.03,3.77,2.75,3.77s1.82-.99,2.75-3.77l2.83-8.48999c.51-1.54.42-2.8-.23-3.45s-1.91-.73-3.44-.22l-8.49002,2.84Z"
              ></path>
              <path
                stroke-width="3"
                stroke="#000"
                transform="matrix(-.404334-.141041 0.143493-.411362 8.624859 20.731701)"
                d="M14.2199,21.63c-1.18,0-11.84002-10.67-11.84002-11.84999c0-1.17.83-2.85,4.79-4.18l8.49002-2.83c2.12-.71,3.89-.5,4.98.58s1.3,2.86.59,4.98L18.3999,16.82c-1.33,3.98-3,4.81-4.18,4.81ZM7.63988,7.03001c-2.78.93-3.77,2.03-3.77,2.75s.99,1.81999,3.77,2.73999l3.83002,3.83c.92,2.78,2.03,3.77,2.75,3.77s1.82-.99,2.75-3.77l2.83-8.48999c.51-1.54.42-2.8-.23-3.45s-1.91-.73-3.44-.22l-8.49002,2.84Z"
              ></path>
            </svg>
          </div>
          <div id="arrow">
            <svg
              width="30px"
              height="30px"
              viewBox="0 0 24 24"
              fill="none"
              stroke-width="0.5px"
              stroke="black"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M14.2199 21.63C13.0399 21.63 11.3699 20.8 10.0499 16.83L9.32988 14.67L7.16988 13.95C3.20988 12.63 2.37988 10.96 2.37988 9.78001C2.37988 8.61001 3.20988 6.93001 7.16988 5.60001L15.6599 2.77001C17.7799 2.06001 19.5499 2.27001 20.6399 3.35001C21.7299 4.43001 21.9399 6.21001 21.2299 8.33001L18.3999 16.82C17.0699 20.8 15.3999 21.63 14.2199 21.63ZM7.63988 7.03001C4.85988 7.96001 3.86988 9.06001 3.86988 9.78001C3.86988 10.5 4.85988 11.6 7.63988 12.52L10.1599 13.36C10.3799 13.43 10.5599 13.61 10.6299 13.83L11.4699 16.35C12.3899 19.13 13.4999 20.12 14.2199 20.12C14.9399 20.12 16.0399 19.13 16.9699 16.35L19.7999 7.86001C20.3099 6.32001 20.2199 5.06001 19.5699 4.41001C18.9199 3.76001 17.6599 3.68001 16.1299 4.19001L7.63988 7.03001Z"
                fill="#000000"
              ></path>
              <path
                d="M10.11 14.4C9.92005 14.4 9.73005 14.33 9.58005 14.18C9.29005 13.89 9.29005 13.41 9.58005 13.12L13.16 9.53C13.45 9.24 13.93 9.24 14.22 9.53C14.51 9.82 14.51 10.3 14.22 10.59L10.64 14.18C10.5 14.33 10.3 14.4 10.11 14.4Z"
                fill="#000000"
              ></path>
            </svg>
          </div>
          <div id="text">Message</div>
        </div>
      </div>
    </div>
  </div>
</button>

<style>
/* From Uiverse.io by Lakshay-art  - Tags: simple, animation, button, transition, click animation, bounce animation */
.button {
  cursor: pointer;
  border: none;
  /* margin: 0px !important; */
  background: transparent;
  transition: scale 1s;
}
.button:hover {
  scale: 1.05;
}
#main-border {
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(180deg, #e8e8e8, #d2d2d2);
  box-shadow: 0px 20px 25px #0002, 0px 3px 4px #0004;
}
#main {
  /* border: 2px solid #e4e4e4; */
  border-radius: 21px;
  width: 260px;
  height: 90px;
  background: linear-gradient(180deg, #1111, #0007);
  padding: 4px;

  /* overflow: hidden; */
}
#inner-box {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #fff, #eaeaea);
  border-radius: 16px;
  box-shadow: 0px 2px 3px #0008;
  padding-block: 6px;
  padding-inline: 6px;
  position: relative;
}
#inner-dent {
  border-radius: 35px;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #eaeaea 0%, #fff 70%);
  filter: blur(1.5px);
}
#text-container {
  position: absolute;
  top: 0px;
  left: 0px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 75px;
  /* background-color: red; */
}
#text {
  font-size: 24px;
  font-weight: 600;
}
#text-container:focus > #arrow {
  transform: rotate(-45deg) translateX(110px) translateY(90px);
  /* transform: rotate(45deg) translateX(100px) translateY(-90px); */
  transition: transform 1s;
}
#send {
  font-size: 24px;
  font-weight: 600;
  position: absolute;
  top: 0px;
  left: 57px;
  /* justify-content: center; */
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}
#text-container:focus {
  transform: translateY(-450px);
  transition: transform 1.5s 1s ease-in;
  /* background-color: red; */
}
#inner-box:focus-within > #send {
  opacity: 0;
  transition: opacity 1s 1s;
}
#sent {
  font-size: 24px;
  font-weight: 600;
  position: absolute;
  top: 0px;
  left: 57px;
  /* justify-content: center; */
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  opacity: 0;
}

#inner-box:focus-within > #sent {
  opacity: 1;
  transform: translateX(20px);
  transition: opacity 1s 1s, transform 1s 1s;
}

#tick {
  position: absolute;
  top: 0px;
  right: 0px;
  /* justify-content: center; */
  align-items: center;
  /* width: 100%; */
  height: 100%;
  display: flex;
  opacity: 0;
}
#inner-box:focus-within > #tick {
  opacity: 1;
  transform: translateX(-85px);
  transition: opacity 1s 1.3s, transform 1s 1s;
}
.button:focus-within {
  animation: recoil 0.4s 0.9s;
  /* transform: translateY(10px);
  transition: transform 1s 0.8s; */
}

@keyframes recoil {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}
#planebody {
  position: absolute;
  top: 22px;
  right: 62px;
  /* justify-content: center; */
  align-items: center;
  /* width: 100%; */
  height: 100%;
  display: flex;
  opacity: 0;
}
#text-container:focus-within > #planebody {
  opacity: 1;
  /* transform: translateX(20px); */
  transition: opacity 1s 0.5s;
}

</style>
    

================================================
FILE: Buttons/Laurits123456_slippery-squid-55.html
================================================
<label class="menuButton" for="check">
    <input type="checkbox" id="check">
    <span class="top"></span>
    <span class="mid"></span>
    <span class="bot"></span>
</label>
<style>
/* From Uiverse.io by Laurits123456 - Tags: button, hamburger, menu, menuicon, 3d button, cool hamburger */
/*pushing a hamburger menu into a pillow texture like background*/

.menuButton {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 13%;
  color: #090909;
  width: 3.5em;
  height: 3.5em;
  border-radius: 0.5em;
  background: #171717;
  border: 1px solid #171717;
  transition: all .3s;
  box-shadow: inset 4px 4px 12px #3a3a3a,
             inset -4px -4px 12px #000000;
}

.menuButton:hover {
  border: 1px solid black;
}

.menuButton:active {
  color: #666;
  box-shadow: 6px 6px 12px #3a3a3a,
             -6px -6px 12px #000000;
}

input[type = "checkbox"] {
  -webkit-appearance: none;
  display: none;
  visibility: hidden;
}

.menuButton span {
  width: 30px;
  height: 4px;
  background: rgb(200,200,200);
  border-radius: 100px;
  transition: 0.3s ease;
}

input[type]:checked ~ span.top {
  transform: translateY(290%)rotate(45deg);
  width: 40px;
}

input[type]:checked ~ span.bot {
  transform: translateY(-270%) rotate(-45deg);
  width: 40px;
  box-shadow: 0 0 10px #495057;
}

input[type]:checked ~ span.mid {
  transform: translateX(-20px);
  opacity: 0;
}
</style>


================================================
FILE: Buttons/LeHuyHieu_little-skunk-12.html
================================================
<button class="btn">
  Button
</button>
<style>
/* From Uiverse.io by LeHuyHieu - Tags: button, box */
.btn {
  outline: none;
  display: inline-block;
  border: 1px solid #fff;
  padding: .8rem 2rem;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  transition: .3s;
  cursor: pointer;
  position: relative;
}

.btn::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 5px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  width: 0px;
  height: 0px;
  opacity: 0;
  transition: .3s;
}

.btn::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 5px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  width: 0px;
  height: 0px;
  opacity: 0;
  transition: .3s;
}

.btn:hover {
  box-shadow: 4px 4px 10px rgb(184, 184, 184);
  transform: translateY(-5px);
}

.btn:hover::after, .btn:hover::before {
  height: 20px;
  width: 20px;
  opacity: 1;
}
</style>


================================================
FILE: Buttons/Leoodaviid_loud-pug-70.html
================================================
<button class="loading">
  <p>Loading...</p>
</button>
<style>
/* From Uiverse.io by Leoodaviid - Tags: button */
button {
  position: relative;
  overflow: hidden;
  padding: 1rem 2.5rem 1rem 2.5rem;
  border: 0;
  border-radius: 2rem;
  font-size: 18px;
  font-weight: 500;
  background: transparent;
  color: #1d1d1d;
}

button:hover {
  cursor: wait;
}

button > p {
  position: relative;
  z-index: 3;
}

button::before,
button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  opacity: 0;
}

button::before {
  background: #79efff repeating-linear-gradient(50deg, transparent, transparent 10px, #71e0ef 10px, #71e0ef 20px);
}

button::after {
  z-index: 2;
  background: linear-gradient(#79efff 30%, transparent 100%);
}

button.loading::before,
button.loading::after {
  opacity: 1;
}

@keyframes loading_49100 {
  0% {
    translate: 25px 0;
  }

  100% {
    translate: -30px 0;
  }
}

button.loading::before {
  animation: loading_49100 0.6s infinite linear;
}
</style>


================================================
FILE: Buttons/LeryLey_big-baboon-18.html
================================================
<button class="button">Button</button>

<style>
/* From Uiverse.io by LeryLey  - Tags: button, hover, dark */
.button {
  cursor: pointer;
  position: relative;
  width: 125px;
  height: 40px;
  border-radius: 60px;
  background: #222;
  color: #fff;
  outline: none;
  overflow: hidden;
  border: 2px solid rgb(56, 56, 56);
  font-weight: 600;
  z-index: 1;
  transition: 0.5s;
}
.button:hover {
  color: white;
}
.button::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-radius: 50%;
  background: linear-gradient(
    to right,
    rgb(59, 59, 184),
    rgb(163, 65, 65),
    rgb(172, 26, 26)
  );
  left: -15px;
  bottom: 0;
  transform: translateY(50%);
  transition: 0.5s;
  z-index: -1;
}
.button:hover:before {
  width: 170px;
  height: 170px;
}

</style>
    

================================================
FILE: Buttons/LeryLey_massive-panda-53.html
================================================
<!-- From Uiverse.io by LeryLey  - Tags: button, shadow, submit -->
<button
  class="cursor-pointer shadow-xl hover:shadow-none duration-300 border-2 border-gray-400 p-1 w-40 h-14 rounded-xl bg-gray-50"
>
  <div
    class="h-full flex gap-1 items-center justify-center shadow-inner shadow-black/10 rounded-full"
  >
    <svg
      class="size-4 -rotate-45"
      stroke="currentColor"
      stroke-width="1.5"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
    <span class="font-medium"> Send Telegram </span>
  </div>
</button>


    

================================================
FILE: Buttons/LeryLey_white-monkey-16.html
================================================
<!-- From Uiverse.io by LeryLey  - Tags: icon, button, hover -->
<div
  class="group grid grid-cols-3 gap-0 hover:gap-2 duration-500 relative shadow-sm"
>
  <h1
    class="absolute z-10 group-hover:hidden duration-200 top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2"
  >
    <svg
      viewBox="0 0 24 24"
      fill="none"
      height="24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      class="w-7 h-7 text-gray-800"
    >
      <path
        d="M5 7h14M5 12h14M5 17h14"
        stroke-width="2"
        stroke-linecap="round"
        stroke="currentColor"
      ></path>
    </svg>
  </h1>
  <a href="#">
    <svg
      class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-[#cc39a4] backdrop-blur-md group-hover:shadow-xl rounded-tl-lg flex justify-center items-center w-full h-full text-[#cc39a4] hover:text-white duration-200"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      fill="none"
      viewBox="0 0 24 24"
    >
      <path
        class="opacity-0 group-hover:opacity-100 duration-200"
        fill="currentColor"
        fill-rule="evenodd"
        d="M3 8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8Zm5-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H8Zm7.597 2.214a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2h-.01a1 1 0 0 1-1-1ZM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-5 3a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"
        clip-rule="evenodd"
      ></path>
    </svg>
  </a>
  <a href="#">
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      height="24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-blue-500 backdrop-blur-md group-hover:shadow-xl flex justify-center items-center w-full h-full text-blue-500 hover:text-white duration-200"
    >
      <path
        clip-rule="evenodd"
        d="M22 5.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.343 8.343 0 0 1-2.605.981A4.13 4.13 0 0 0 15.85 4a4.068 4.068 0 0 0-4.1 4.038c0 .31.035.618.105.919A11.705 11.705 0 0 1 3.4 4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 6.1 13.635a4.192 4.192 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 2 18.184 11.732 11.732 0 0 0 8.291 20 11.502 11.502 0 0 0 19.964 8.5c0-.177 0-.349-.012-.523A8.143 8.143 0 0 0 22 5.892Z"
        fill-rule="evenodd"
        class="opacity-0 group-hover:opacity-100 duration-200"
      ></path>
    </svg>
  </a>
  <a href="#">
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      height="24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-red-500 backdrop-blur-md group-hover:shadow-xl rounded-tr-lg flex justify-center items-center w-full h-full text-red-400 hover:text-white duration-200"
    >
      <path
        clip-rule="evenodd"
        d="M12 2a10 10 0 1 0 10 10A10.009 10.009 0 0 0 12 2Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.093 20.093 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM10 3.707a8.82 8.82 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.755 45.755 0 0 0 10 3.707Zm-6.358 6.555a8.57 8.57 0 0 1 4.73-5.981 53.99 53.99 0 0 1 3.168 4.941 32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.641 31.641 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM12 20.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 15.113 13a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
        fill-rule="evenodd"
        class="opacity-0 group-hover:opacity-100 duration-200"
      ></path>
    </svg>
  </a>
  <a href="#">
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      height="24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-green-500 backdrop-blur-md group-hover:shadow-xl flex justify-center items-center w-full h-full text-green-500 hover:text-white duration-200"
    >
      <path
        d="M7.978 4a2.553 2.553 0 0 0-1.926.877C4.233 6.7 3.699 8.751 4.153 10.814c.44 1.995 1.778 3.893 3.456 5.572 1.68 1.679 3.577 3.018 5.57 3.459 2.062.456 4.115-.073 5.94-1.885a2.556 2.556 0 0 0 .001-3.861l-1.21-1.21a2.689 2.689 0 0 0-3.802 0l-.617.618a.806.806 0 0 1-1.14 0l-1.854-1.855a.807.807 0 0 1 0-1.14l.618-.62a2.692 2.692 0 0 0 0-3.803l-1.21-1.211A2.555 2.555 0 0 0 7.978 4Z"
        class="opacity-0 group-hover:opacity-100 duration-200"
      ></path>
    </svg>
  </a>
  <a href="#">
    <svg
      viewBox="0 0 24 24"
      fill="none"
      height="24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-black backdrop-blur-md group-hover:shadow-xl flex justify-center items-center w-full h-full text-black hover:text-white duration-200"
    >
      <path
        d="M12 7.757v8.486M7.757 12h8.486M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke="currentColor"
        class="opacity-0 group-hover:opacity-100 duration-200"
      ></path>
    </svg>
  </a>
  <a href="#">
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      height="24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-blue-600 backdrop-blur-md group-hover:shadow-xl flex justify-center items-center w-full h-full text-blue-700 hover:text-white duration-200"
    >
      <path
        d="M18.942 5.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.586 11.586 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3 17.392 17.392 0 0 0-2.868 11.662 15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.638 10.638 0 0 1-1.706-.83c.143-.106.283-.217.418-.331a11.664 11.664 0 0 0 10.118 0c.137.114.277.225.418.331-.544.328-1.116.606-1.71.832a12.58 12.58 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM8.678 14.813a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.929 1.929 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"
        class="opacity-0 group-hover:opacity-100 duration-200"
      ></path>
    </svg>
  </a>
  <a href="#">
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      height="24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-black backdrop-blur-md group-hover:shadow-xl rounded-bl-lg flex justify-center items-center w-full h-full text-black hover:text-white duration-200"
    >
      <path
        clip-rule="evenodd"
        d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z"
        fill-rule="evenodd"
        class="opacity-0 group-hover:opacity-100 duration-200"
      ></path>
    </svg>
  </a>
  <a href="#">
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      height="24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-blue-600 backdrop-blur-md group-hover:shadow-xl flex justify-center items-center w-full h-full text-blue-600 hover:text-white duration-200"
    >
      <path
        clip-rule="evenodd"
        d="M13.135 6H15V3h-1.865a4.147 4.147 0 0 0-4.142 4.142V9H7v3h2v9.938h3V12h2.021l.592-3H12V6.591A.6.6 0 0 1 12.592 6h.543Z"
        fill-rule="evenodd"
        class="opacity-0 group-hover:opacity-100 duration-200"
      ></path>
    </svg>
  </a>
  <a href="#">
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      height="24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-red-500 backdrop-blur-md group-hover:shadow-xl rounded-br-lg flex justify-center items-center w-full h-full text-red-500 hover:text-white duration-200"
    >
      <path
        clip-rule="evenodd"
        d="M21.7 8.037a4.26 4.26 0 0 0-.789-1.964 2.84 2.84 0 0 0-1.984-.839c-2.767-.2-6.926-.2-6.926-.2s-4.157 0-6.928.2a2.836 2.836 0 0 0-1.983.839 4.225 4.225 0 0 0-.79 1.965 30.146 30.146 0 0 0-.2 3.206v1.5a30.12 30.12 0 0 0 .2 3.206c.094.712.364 1.39.784 1.972.604.536 1.38.837 2.187.848 1.583.151 6.731.2 6.731.2s4.161 0 6.928-.2a2.844 2.844 0 0 0 1.985-.84 4.27 4.27 0 0 0 .787-1.965 30.12 30.12 0 0 0 .2-3.206v-1.516a30.672 30.672 0 0 0-.202-3.206Zm-11.692 6.554v-5.62l5.4 2.819-5.4 2.801Z"
        fill-rule="evenodd"
        class="opacity-0 group-hover:opacity-100 duration-200"
      ></path>
    </svg>
  </a>
</div>


    

================================================
FILE: Buttons/Li-Deheng_dangerous-bulldog-28.html
================================================
<button id="btn-message" class="button-message">
	<div class="content-avatar">
		<div class="status-user"></div>
		<div class="avatar">
			<svg class="user-img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,12.5c-3.04,0-5.5,1.73-5.5,3.5s2.46,3.5,5.5,3.5,5.5-1.73,5.5-3.5-2.46-3.5-5.5-3.5Zm0-.5c1.66,0,3-1.34,3-3s-1.34-3-3-3-3,1.34-3,3,1.34,3,3,3Z"></path></svg>
		</div>
	</div>
	<div class="notice-content">
		<div class="username">Jessica Sanders</div>
		<div class="lable-message">Message<span class="number-message">3</span></div>
		<div class="user-id">@jessisanders</div>
	</div>
</button>
<style>
/* From Uiverse.io by Li-Deheng - Source: Li-Deheng - Tags: icon, animation, button, message, animated, btn, hover effect, username, account, alert message */
#btn-message {
  --text-color: #000;
  --bg-color-sup: #d2d2d2;
  --bg-color: #f4f4f4;
  --bg-hover-color: #ffffff;
  --online-status: #00da00;
  --font-size: 16px;
  --btn-transition: all 0.2s ease-out;
}

.button-message {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 400 var(--font-size) Helvetica Neue, sans-serif;
  box-shadow: 0 0 2.17382px rgba(0,0,0,.049),0 1.75px 6.01034px rgba(0,0,0,.07),0 3.63px 14.4706px rgba(0,0,0,.091),0 22px 48px rgba(0,0,0,.14);
  background-color: var(--bg-color);
  border-radius: 68px;
  cursor: pointer;
  padding: 6px 10px 6px 6px;
  width: fit-content;
  height: 40px;
  border: 0;
  overflow: hidden;
  position: relative;
  transition: var(--btn-transition);
}

.button-message:hover {
  height: 56px;
  padding: 8px 20px 8px 8px;
  background-color: var(--bg-hover-color);
  transition: var(--btn-transition);
}

.button-message:active {
  transform: scale(0.99);
}

.content-avatar {
  width: 30px;
  height: 30px;
  margin: 0;
  transition: var(--btn-transition);
  position: relative;
}

.button-message:hover .content-avatar {
  width: 40px;
  height: 40px;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--bg-color-sup);
}

.user-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.status-user {
  position: absolute;
  width: 6px;
  height: 6px;
  right: 1px;
  bottom: 1px;
  border-radius: 50%;
  outline: solid 2px var(--bg-color);
  background-color: var(--online-status);
  transition: var(--btn-transition);
  animation: active-status 2s ease-in-out infinite;
}

.button-message:hover .status-user {
  width: 10px;
  height: 10px;
  right: 1px;
  bottom: 1px;
  outline: solid 3px var(--bg-hover-color);
}

.notice-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 8px;
  text-align: initial;
  color: var(--text-color);
}

.username {
  letter-spacing: -6px;
  height: 0;
  opacity: 0;
  transform: translateY(-20px);
  transition: var(--btn-transition);
}

.user-id {
  font-size: 12px;
  letter-spacing: -6px;
  height: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: var(--btn-transition);
}

.lable-message {
  display: flex;
  align-items: center;
  opacity: 1;
  transform: scaleY(1);
  transition: var(--btn-transition);
}

.button-message:hover .username {
  height: auto;
  letter-spacing: normal;
  opacity: 1;
  transform: translateY(0);
  transition: var(--btn-transition);
}

.button-message:hover .user-id {
  height: auto;
  letter-spacing: normal;
  opacity: 1;
  transform: translateY(0);
  transition: var(--btn-transition);
}

.button-message:hover .lable-message {
  height: 0;
  transform: scaleY(0);
  transition: var(--btn-transition);
}

.lable-message, .username {
  font-weight: 600;
}

.number-message {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 8px;
  font-size: 12px;
  width: 16px;
  height: 16px;
  background-color: var(--bg-color-sup);
  border-radius: 20px;
}

/*==============================================*/
@keyframes active-status {
  0% {
    background-color: var(--online-status);
  }

  33.33% {
    background-color: #93e200;
  }

  66.33% {
    background-color: #93e200;
  }

  100% {
    background-color: var(--online-status);
  }
}
</style>


================================================
FILE: Buttons/Li-Deheng_shy-moth-10.html
================================================
<div class="btn-conteiner">
  <a class="btn-content" href="#">
    <span class="btn-title">NEXT</span>
    <span class="icon-arrow">
      <svg width="66px" height="43px" viewBox="0 0 66 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="arrow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path id="arrow-icon-one" d="M40.1543933,3.89485454 L43.9763149,0.139296592 C44.1708311,-0.0518420739 44.4826329,-0.0518571125 44.6771675,0.139262789 L65.6916134,20.7848311 C66.0855801,21.1718824 66.0911863,21.8050225 65.704135,22.1989893 C65.7000188,22.2031791 65.6958657,22.2073326 65.6916762,22.2114492 L44.677098,42.8607841 C44.4825957,43.0519059 44.1708242,43.0519358 43.9762853,42.8608513 L40.1545186,39.1069479 C39.9575152,38.9134427 39.9546793,38.5968729 40.1481845,38.3998695 C40.1502893,38.3977268 40.1524132,38.395603 40.1545562,38.3934985 L56.9937789,21.8567812 C57.1908028,21.6632968 57.193672,21.3467273 57.0001876,21.1497035 C56.9980647,21.1475418 56.9959223,21.1453995 56.9937605,21.1432767 L40.1545208,4.60825197 C39.9574869,4.41477773 39.9546013,4.09820839 40.1480756,3.90117456 C40.1501626,3.89904911 40.1522686,3.89694235 40.1543933,3.89485454 Z" fill="#FFFFFF"></path>
          <path id="arrow-icon-two" d="M20.1543933,3.89485454 L23.9763149,0.139296592 C24.1708311,-0.0518420739 24.4826329,-0.0518571125 24.6771675,0.139262789 L45.6916134,20.7848311 C46.0855801,21.1718824 46.0911863,21.8050225 45.704135,22.1989893 C45.7000188,22.2031791 45.6958657,22.2073326 45.6916762,22.2114492 L24.677098,42.8607841 C24.4825957,43.0519059 24.1708242,43.0519358 23.9762853,42.8608513 L20.1545186,39.1069479 C19.9575152,38.9134427 19.9546793,38.5968729 20.1481845,38.3998695 C20.1502893,38.3977268 20.1524132,38.395603 20.1545562,38.3934985 L36.9937789,21.8567812 C37.1908028,21.6632968 37.193672,21.3467273 37.0001876,21.1497035 C36.9980647,21.1475418 36.9959223,21.1453995 36.9937605,21.1432767 L20.1545208,4.60825197 C19.9574869,4.41477773 19.9546013,4.09820839 20.1480756,3.90117456 C20.1501626,3.89904911 20.1522686,3.89694235 20.1543933,3.89485454 Z" fill="#FFFFFF"></path>
          <path id="arrow-icon-three" d="M0.154393339,3.89485454 L3.97631488,0.139296592 C4.17083111,-0.0518420739 4.48263286,-0.0518571125 4.67716753,0.139262789 L25.6916134,20.7848311 C26.0855801,21.1718824 26.0911863,21.8050225 25.704135,22.1989893 C25.7000188,22.2031791 25.6958657,22.2073326 25.6916762,22.2114492 L4.67709797,42.8607841 C4.48259567,43.0519059 4.17082418,43.0519358 3.97628526,42.8608513 L0.154518591,39.1069479 C-0.0424848215,38.9134427 -0.0453206733,38.5968729 0.148184538,38.3998695 C0.150289256,38.3977268 0.152413239,38.395603 0.154556228,38.3934985 L16.9937789,21.8567812 C17.1908028,21.6632968 17.193672,21.3467273 17.0001876,21.1497035 C16.9980647,21.1475418 16.9959223,21.1453995 16.9937605,21.1432767 L0.15452076,4.60825197 C-0.0425130651,4.41477773 -0.0453986756,4.09820839 0.148075568,3.90117456 C0.150162624,3.89904911 0.152268631,3.89694235 0.154393339,3.89485454 Z" fill="#FFFFFF"></path>
        </g>
      </svg>
    </span> 
  </a>
</div>
<style>
/* From Uiverse.io by Li-Deheng - Tags: animation, button, hover, arrow, next */
.btn-conteiner {
  display: flex;
  justify-content: center;
  --color-text: #ffffff;
  --color-background: #ff135a;
  --color-outline: #ff145b80;
  --color-shadow: #00000080;
}

.btn-content {
  display: flex;
  align-items: center;
  padding: 5px 30px;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: var(--color-text);
  background: var(--color-background);
  transition: 1s;
  border-radius: 100px;
  box-shadow: 0 0 0.2em 0 var(--color-background);
}

.btn-content:hover, .btn-content:focus {
  transition: 0.5s;
  -webkit-animation: btn-content 1s;
  animation: btn-content 1s;
  outline: 0.1em solid transparent;
  outline-offset: 0.2em;
  box-shadow: 0 0 0.4em 0 var(--color-background);
}

.btn-content .icon-arrow {
  transition: 0.5s;
  margin-right: 0px;
  transform: scale(0.6);
}

.btn-content:hover .icon-arrow {
  transition: 0.5s;
  margin-right: 25px;
}

.icon-arrow {
  width: 20px;
  margin-left: 15px;
  position: relative;
  top: 6%;
}
  
/* SVG */
#arrow-icon-one {
  transition: 0.4s;
  transform: translateX(-60%);
}

#arrow-icon-two {
  transition: 0.5s;
  transform: translateX(-30%);
}

.btn-content:hover #arrow-icon-three {
  animation: color_anim 1s infinite 0.2s;
}

.btn-content:hover #arrow-icon-one {
  transform: translateX(0%);
  animation: color_anim 1s infinite 0.6s;
}

.btn-content:hover #arrow-icon-two {
  transform: translateX(0%);
  animation: color_anim 1s infinite 0.4s;
}

/* SVG animations */
@keyframes color_anim {
  0% {
    fill: white;
  }

  50% {
    fill: var(--color-background);
  }

  100% {
    fill: white;
  }
}

/* Button animations */
@-webkit-keyframes btn-content {
  0% {
    outline: 0.2em solid var(--color-background);
    outline-offset: 0;
  }
}

@keyframes btn-content {
  0% {
    outline: 0.2em solid var(--color-background);
    outline-offset: 0;
  }
}
</style>


================================================
FILE: Buttons/LilaRest_afraid-fox-80.html
================================================
<button>
  <svg height="32" width="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H24V24H0z" fill="none"></path><path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z"></path></svg>
  Like
</button>
<style>
/* From Uiverse.io by LilaRest - Tags: neumorphism, skeuomorphism, animation, minimalist, social, facebook, button, like, heart, realistic */
button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 25px 20px 22px;
  box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background-color: #e8e8e8;
  border-color: #ffe2e2;
  border-style: solid;
  border-width: 9px;
  border-radius: 35px;
  font-size: 25px;
  font-weight: 900;
  color: rgb(134, 124, 124);
  font-family: monospace;
  transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), 
  border-color 400ms ease-in-out,
  background-color 400ms ease-in-out;
  word-spacing: -2px;
}

@keyframes movingBorders {
  0% {
    border-color: #fce4e4;
  }

  50% {
    border-color: #ffd8d8;
  }

  90% {
    border-color: #fce4e4;
  }
}

button:hover {
  background-color: #eee;
  transform: scale(105%);
  animation: movingBorders 3s infinite;
}

button svg {
  fill: rgb(255, 110, 110);
  margin-right: 13px;
}

@keyframes beatingHeart {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.15);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.15);
  }

  60% {
    transform: scale(1);
  }
}

button:hover svg {
  animation: beatingHeart 1.2s infinite;
}
</style>


================================================
FILE: Buttons/LilaRest_chilly-moth-52.html
================================================
<button>
  <svg height="32" width="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H24V24H0z" fill="none"></path><path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z"></path></svg>
</button>

<style>
/* From Uiverse.io by LilaRest - Tags: neumorphism, skeuomorphism, animation, minimalist, social, button, like, heart, realistic, favorite */
button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 22px 20px 22px;
  box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background-color: #e8e8e8;
  border-color: #ffe2e2;
  border-style: solid;
  border-width: 9px;
  border-radius: 35px;
  transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), 
  border-color 400ms ease-in-out,
  background-color 400ms ease-in-out;
  word-spacing: -2px;
}

@keyframes movingBorders {
  0% {
    border-color: #fce4e4;
  }

  50% {
    border-color: #ffd8d8;
  }

  90% {
    border-color: #fce4e4;
  }
}

button:hover {
  background-color: #eee;
  transform: scale(105%);
  animation: movingBorders 3s infinite;
}

button svg {
  fill: rgb(255, 110, 110);
}

@keyframes beatingHeart {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.15);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.15);
  }

  60% {
    transform: scale(1);
  }
}

button:hover svg {
  transform: scale(105%);
  border-color: #ffd8d8;
  animation: beatingHeart 1.2s infinite;
}

</style>


================================================
FILE: Buttons/LilaRest_lazy-lionfish-12.html
================================================
<button>
  <svg class="empty" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="none" d="M0 0H24V24H0z"></path><path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604c.881-.556 1.676-1.109 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5 5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903.745.592 1.54 1.145 2.421 1.7.299.189.595.37.934.572.339-.202.635-.383.934-.571z"></path></svg>
  <svg class="filled" height="32" width="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H24V24H0z" fill="none"></path><path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z"></path></svg>
</button>

<style>
/* From Uiverse.io by LilaRest - Tags: neumorphism, skeuomorphism, animation, minimalist, social, button, like, heart, realistic, favorite */
button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 22px 20px 22px;
  box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background-color: #e8e8e8;
  border-color: #ffe2e2;
  border-style: solid;
  border-width: 9px;
  border-radius: 35px;
  transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), 
  border-color 400ms ease-in-out,
  background-color 400ms ease-in-out;
  word-spacing: -2px;
}

@keyframes movingBorders {
  0% {
    border-color: #fce4e4;
  }

  50% {
    border-color: #ffd8d8;
  }

  90% {
    border-color: #fce4e4;
  }
}

button:hover {
  background-color: #eee;
  transform: scale(105%);
  animation: movingBorders 3s infinite;
}

.filled,
.empty {
  fill: rgb(255, 110, 110);
  transition: opacity 100ms ease-in-out;
}

.filled {
  position: absolute;
  opacity: 0;
}

@keyframes beatingHeart {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.15);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.15);
  }

  60% {
    transform: scale(1);
  }
}

button:hover .empty {
  opacity: 0;
}

button:hover .filled {
  opacity: 1;
  animation: beatingHeart 1.2s infinite;
}
</style>


================================================
FILE: Buttons/LilaRest_loud-walrus-26.html
================================================
<button>
  <svg class="empty" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="none" d="M0 0H24V24H0z"></path><path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604c.881-.556 1.676-1.109 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5 5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903.745.592 1.54 1.145 2.421 1.7.299.189.595.37.934.572.339-.202.635-.383.934-.571z"></path></svg>
  <svg class="filled" height="32" width="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H24V24H0z" fill="none"></path><path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z"></path></svg>
  Like
</button>
<style>
/* From Uiverse.io by LilaRest  - Tags: neumorphism, skeuomorphism, social, button, like, heart, realistic, favorite */
button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 25px 20px 22px;
  box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background-color: #e8e8e8;
  border-color: #ffe2e2;
  border-style: solid;
  border-width: 9px;
  border-radius: 35px;
  font-size: 25px;
  font-weight: 900;
  color: rgb(134, 124, 124);
  font-family: monospace;
  transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), 
  border-color 400ms ease-in-out,
  background-color 400ms ease-in-out;
  word-spacing: -2px;
}

@keyframes movingBorders {
  0% {
    border-color: #fce4e4;
  }

  50% {
    border-color: #ffd8d8;
  }

  90% {
    border-color: #fce4e4;
  }
}

button:hover {
  background-color: #eee;
  transform: scale(105%);
  animation: movingBorders 3s infinite;
}

button svg {
  margin-right: 11px;
  fill: rgb(255, 110, 110);
  transition: opacity 100ms ease-in-out;
}

.filled {
  position: absolute;
  opacity: 0;
  top: 20px;
  left: 22px;
}

@keyframes beatingHeart {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.15);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.15);
  }

  60% {
    transform: scale(1);
  }
}

button:hover .empty {
  opacity: 0;
}

button:hover .filled {
  opacity: 1;
  animation: beatingHeart 1.2s infinite;
}
</style>
    

================================================
FILE: Buttons/LilaRest_strong-fly-77.html
================================================
<button>
  Support us
  <svg height="32" width="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H24V24H0z" fill="none"></path><path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z"></path></svg>
</button>

<style>
/* From Uiverse.io by LilaRest - Tags: neumorphism, skeuomorphism, animation, minimalist, button, heart, realistic, support */
button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 22px 20px 25px;
  box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background-color: #e8e8e8;
  border-color: #ffe2e2;
  border-style: solid;
  border-width: 9px;
  border-radius: 35px;
  font-size: 25px;
  font-weight: 900;
  color: rgb(134, 124, 124);
  font-family: monospace;
  transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), 
  border-color 400ms ease-in-out,
  background-color 400ms ease-in-out;
  word-spacing: -2px;
}

@keyframes movingBorders {
  0% {
    border-color: #fce4e4;
  }

  50% {
    border-color: #ffd8d8;
  }

  90% {
    border-color: #fce4e4;
  }
}

button:hover {
  background-color: #eee;
  transform: scale(105%);
  animation: movingBorders 3s infinite;
}

button svg {
  fill: rgb(255, 110, 110);
  margin-left: 13px;
}

@keyframes beatingHeart {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.15);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.15);
  }

  60% {
    transform: scale(1);
  }
}

button:hover svg {
  transform: scale(105%);
  border-color: #ffd8d8;
  animation: beatingHeart 1.2s infinite;
}
</style>


================================================
FILE: Buttons/Lokesh1379_rude-mule-58.html
================================================
<div class="parent">
<div class="child child-1">
  <button class="button btn-1">
  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" fill="#1e90ff"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
</button>
</div>
<div class="child child-2">
  <button class="button btn-2">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" fill="#ff00ff"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></button>
</div>
<div class="child child-3">
  <button class="button btn-3">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></button>
</div>
<div class="child child-4">
  <button class="button btn-4">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512" fill="#4267B2"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg></button>
</div>
</div>
<style>
/* From Uiverse.io by Lokesh1379 - Tags: simple, 3d, social, twitter, facebook, instagram, button, light */
.parent {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transition: all 0.5s ease-in-out;
  border-radius: 50%;
  margin: 0 5px;
}

.child:hover {
  background-color: white;
  background-position: -100px 100px, -100px 100px;
  transform: rotate3d(0.5, 1, 0, 30deg);
  transform: perspective(180px) rotateX(60deg) translateY(2px);
  box-shadow: 0px 10px 10px rgb(1, 49, 182);
}

button {
  border: none;
  background-color: transparent;
  font-size: 20px;
}

.button:hover {
  width: inherit;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate3d(0px, 0px, 15px) perspective(180px) rotateX(-35deg) translateY(2px);
  border-radius: 50%;
}
</style>


================================================
FILE: Buttons/Lucaasbre_happy-elephant-36.html
================================================
<div class="container">
  <span class="span-text">
    <svg
      height="20pt"
      width="20pt"
      viewBox="0 0 20 20"
      style="isolation:isolate"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <clipPath id="_clipPath_bC9TwUVn0M3ipVC8aHmmX7RNkfzJwdgL">
          <rect height="20" width="20"></rect>
        </clipPath>
      </defs>
      <g clip-path="url(#_clipPath_bC9TwUVn0M3ipVC8aHmmX7RNkfzJwdgL)">
        <rect
          fill-opacity="0"
          style="fill:rgb(1,0,1)"
          height="20"
          width="20"
        ></rect>
        <path
          stroke-miterlimit="3"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke="rgb(0,0,0)"
          stroke-width="1"
          fill="rgb(0,0,0)"
          d="M 10 1 L 10 9 L 15 9 L 10 19 L 10 12 L 5 12 L 10 1 Z"
        ></path>
      </g>
    </svg>
    Join now
  </span>
  <button class="button">
    <span class="span-outside"> </span>
    <div class="circles">
      <span class="circle"> </span>
      <span class="circle"> </span>
      <span class="circle"> </span>
      <span class="circle"> </span>
      <span class="circle"> </span>
      <span class="circle"> </span>
      <span class="circle"> </span>
      <span class="circle"> </span>
      <span class="circle"> </span>
      <span class="circle"> </span>
      <span class="circle"> </span>
      <span class="circle"> </span>
      <span class="circle"> </span>
      <span class="circle"> </span>
      <span class="circle"> </span>
    </div>
  </button>
</div>

<style>
/* From Uiverse.io by Lucaasbre  - Tags: button, animated, gradients, svg, css effect, multicolor, button hover effect , 2d button */
.container {
  position: relative;
  width: 300px;
  height: 100px;
  border-radius: 30px;
  overflow: hidden;
  cursor: pointer;
}

.button {
  border: none;
  width: 200%;
  height: 100%;
  background: linear-gradient(
      75deg,
      rgb(170, 55, 200) 10%,
      rgb(235, 100, 130) 20%,
      rgb(245, 95, 90) 40%,
      rgb(245, 110, 30) 60%,
      rgb(235, 100, 130) 80%,
      rgb(170, 55, 200) 90%
    ),
    linear-gradient(
      75deg,
      rgb(170, 55, 200) 0%,
      rgb(235, 100, 130) 20%,
      rgb(245, 95, 90) 40%,
      rgb(245, 110, 30) 60%,
      rgb(235, 100, 130) 80%,
      rgb(170, 55, 200) 100%
    );
  background-size: 50% 100%;
  animation: moveGradient 3s linear infinite paused;
}

.container:hover .button {
  animation-play-state: running;
}

.container:active {
  scale: 0.95;
}

@keyframes moveGradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.span-text {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.span-outside {
  width: 300px;
  height: 95px;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 30px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background-color: #ffffff10;
  filter: blur(1px);
  z-index: 3;
}

.span-text > svg {
  position: relative;
  width: 25px;
  height: 25px;
  margin-right: 5px;
}

.circles .circle {
  position: absolute;
  background-color: #fff;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.circles .circle:nth-child(1) {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.2);
  filter: blur(20px);
  top: -80px;
  left: 180px;
}

.circles .circle:nth-child(2) {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 0;
  filter: blur(10px);
  top: -10px;
  left: -50px;
}

.circles .circle:nth-child(3) {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px 80px 80px 40px;
  width: 60px;
  height: 40px;
  top: 30px;
  left: 35px;
  filter: blur(10px);
}

.circles .circle:nth-child(4) {
  position: absolute;
  background-color: #fff;
  rotate: 10deg;
  width: 40px;
  height: 40px;
  top: 60px;
  left: 130px;
  filter: blur(20px);
}

.circles .circle:nth-child(5) {
  position: absolute;
  background-color: #fff;
  width: 70px;
  height: 70px;
  top: 25px;
  left: 250px;
  filter: blur(18px);
}

.circles .circle:nth-child(6) {
  position: absolute;
  background-color: #fff;
  rotate: 10deg;
  width: 40px;
  height: 40px;
  top: 30px;
  left: 190px;
  filter: blur(10px);
}

.circles .circle:nth-child(7) {
  position: absolute;
  background-color: transparent;
  border-radius: 0 0 0 20px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  width: 210px;
  height: 20px;
  top: 0px;
  left: 20px;
  filter: blur(2px);
}

.circles .circle:nth-child(8) {
  position: absolute;
  background-color: transparent;
  border-radius: 0;
  border-bottom: 6px solid #fff;
  width: 60px;
  height: 20px;
  top: 60px;
  left: 60px;
  filter: blur(5px);
}

.circles .circle:nth-child(9) {
  position: absolute;
  background-color: transparent;
  border-radius: 0 20px 0 0;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  width: 50px;
  height: 20px;
  top: 19px;
  right: 20px;
  filter: blur(2px);
}

.circles .circle:nth-child(10) {
  position: absolute;
  background-color: transparent;
  border-radius: 0 20px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  width: 30px;
  height: 50px;
  bottom: 10px;
  right: -10px;
  filter: blur(2px);
}

.circles .circle:nth-child(11) {
  position: absolute;
  background-color: transparent;
  border-radius: 0 20px 0 0;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  width: 50px;
  height: 20px;
  bottom: 1px;
  right: 20px;
  filter: blur(2px);
}

.circles .circle:nth-child(12) {
  position: absolute;
  background-color: transparent;
  border-radius: 0 0 0 20px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  width: 210px;
  height: 20px;
  bottom: 20px;
  left: 20px;
  filter: blur(2px);
}

.circles .circle:nth-child(13) {
  position: absolute;
  background-color: transparent;
  border-radius: 0 20px 0 0;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  width: 20px;
  height: 50px;
  top: 10px;
  left: 0px;
  filter: blur(2px);
}

.circles .circle:nth-child(14) {
  position: absolute;
  background-color: white;
  border-radius: 0 0 80px 40px;
  width: 90px;
  height: 20px;
  top: 0px;
  left: 20px;
  filter: blur(9px);
}

.circles .circle:nth-child(15) {
  position: absolute;
  background-color: transparent;
  border-radius: 0;
  border-bottom: 6px solid #fff;
  width: 60px;
  height: 20px;
  top: 0px;
  left: 30px;
  filter: blur(3px);
}

</style>
    

================================================
FILE: Buttons/Lucaasbre_quiet-bat-17.html
================================================
<button>
  <span class="button-text">
  </span>
  <span class="animation">
    <span class="paper-wrapper">
      <span class="paper">
      </span>
    </span>
    <span class="shredded-wrapper">
      <span class="shredded">
      </span>
    </span>
    <span class="lid">
    </span>
    <span class="can">
      <span class="filler">
      </span>
    </span>
  </span>
</button>
<style>
/* From Uiverse.io by Lucaasbre - Source: Frontend Joe - https://frontendjoe.com - Tags: button, active, delete, animated, css */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 0;
  background: #ff2c6c;
  font-size: 22px;
  font-weight: 400;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #f9f9f9;
  padding: 0 0 0 24px;
  width: 210px;
  height: 64px;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}

.button-text {
  flex: 0 0 120px;
}

.button-text::before {
  content: "Delete";
}

.animation {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  scale: 1;
}

.can {
  overflow: hidden;
  position: relative;
  translate: 0 3px;
  width: 20px;
  height: 22px;
  border-left-radius: 5px;
  border-right-radius: 5px;
  border: 2px solid #ffffff;
}

.lid {
  position: absolute;
  top: 20px;
  left: 50%;
  translate: -50% 0;
  width: 22px;
  height: 2px;
  background: #ffffff;
}

@keyframes move {
  75%,
  100% {
    translate: 0 88px;
  }
}

.paper-wrapper,
.shredded-wrapper {
  overflow: hidden;
  position: absolute;
  display: flex;
  top: -20px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 64px;
}

.paper-wrapper {
  height: 40px;
}

.shredded-wrapper {
  top: 24px;
  height: 20px;
  justify-content: center;
}

.paper, .shredded {
  display: block;
  background: #ffffff;
  height: 20px;
}

.paper {
  width: 10px;
}

.shredded {
  margin-top: -40px;
  width: 2px;
}

.shredded::before,
.shredded::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  width: inherit;
  height: inherit;
  background: inherit;
}

.shredded::before {
  left: -4px;
}

.shredded::after {
  right: -4px;
}

@keyframes fill {
  0%, 20% {
    translate: 0 0;
  }

  40%, 70% {
    translate: 0 -50%;
  }

  90%, 100% {
    translate: 0 -100%;
  }
}

.filler {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -32px;
  width: 64px;
  height: 120%;
  background: #ffffff;
}

button:hover {
  opacity: 0.75;
}

button:active .button-text::before {
  content: "Deleting...";
}

button:active :is(.paper, .shredded) {
  animation: move 1.25s linear 2 both;
}

button:active .filler {
  animation: fill 2.5s both;
}
</style>


================================================
FILE: Buttons/LuisEgan_mighty-stingray-31.html
================================================
<button>
  <svg id="rocket" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 416.449 416.449" xml:space="preserve">
    <g id="tip">
      <path d="M399.76,16.699c10.12,37.84,8.67,78.13-4.34,115.28h-0.01L284.48,21.049v-0.01      C321.63,8.029,361.92,6.579,399.76,16.699z"></path>
    </g>
    <g id="rocket-body">
      <path d="M90.21,207.929l87.14-101.42h0.01l33.71-39.24c21.43-21.43,46.6-36.84,73.41-46.23v0.01      l110.93,110.93h0.01c-9.39,26.81-24.8,51.98-46.23,73.41l-39.24,33.71l-101.43,87.14l-29.57-29.57l-29.58-29.58l-29.58-29.58z"></path>
    </g>
    <g id="wings">
      <path id="wings-top" d="M309.95,239.099c1.74,45.6-14.8,91.78-49.61,126.59c-10.69,10.68-22.44,19.65-34.93,26.89      l-16.89-66.34L309.95,239.099z"></path>
      <path id="wings-bottom" d="M177.35,106.509l-87.14,101.42l-66.33-16.88c7.24-12.49,16.21-24.24,26.89-34.93      C85.58,121.309,131.74,104.769,177.35,106.509z"></path>
    </g>
    <g id="rocket-body-bottom">
      <path d="M208.52,326.239l-39.94,14.71c-10.98,4.05-23.31,1.34-31.58-6.94l-6.85-6.85l48.8-30.49      L208.52,326.239z"></path>
      <polygon points="178.95,296.669 130.15,327.159 130.14,327.159 109.72,306.739 149.37,267.089"></polygon>
      <polygon points="149.37,267.089 109.72,306.739 89.3,286.309 119.79,237.509"></polygon>
      <path d="M119.79,237.509l-30.49,48.8l-6.86-6.85c-8.27-8.28-10.98-20.6-6.94-31.58l14.71-39.95      L119.79,237.509z"></path>
    </g>
    <g id="flames">
      <path d="M28.88,339.459c-2.559,0-5.119-0.977-7.071-2.929c-3.905-3.905-3.905-10.237,0-14.143      l20.54-20.54c3.905-3.904,10.237-3.904,14.143,0c3.905,3.905,3.905,10.237,0,14.143l-20.54,20.54      C33.999,338.482,31.44,339.459,28.88,339.459z"></path>
      <path d="M10,416.439c-2.56,0-5.119-0.977-7.072-2.93c-3.905-3.905-3.904-10.237,0.001-14.142l68.47-68.46      c3.905-3.904,10.237-3.904,14.142,0.001c3.905,3.905,3.904,10.237-0.002,14.142l-68.47,68.46      C15.118,415.463,12.559,416.439,10,416.439z"></path>
      <path d="M73.29,411.259c-2.56,0-5.118-0.977-7.071-2.929c-3.905-3.905-3.905-10.237,0-14.143      l34.23-34.229c3.905-3.904,10.237-3.903,14.142,0c3.905,3.905,3.905,10.237,0,14.143l-34.23,34.229      C78.409,410.282,75.849,411.259,73.29,411.259z"></path>
    </g>
  </svg>

  <div id="smoke">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</button>
<style>
/* From Uiverse.io by LuisEgan - Tags: button */
button {
  background-color: transparent;
  position: relative;
  border: none;
}

button::before {
  content: "Ready";
  animation: .55s cubic-bezier(1,-0.06,.61,.45);
  color: rgb(87, 78, 78);
  font-size: 1.3em;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(43%);
  z-index: 1;
}

/* COLORS */

#tip > path {
  fill: #5b5eb3;
}

#rocket-body > path {
  fill: #cccac6;
  stroke: #cccac6
}

#wings > path {
  fill: #cccac6;
  stroke: #cccac6
}

#rocket-body-bottom > path,
#rocket-body-bottom > polygon {
  fill: #514737;
  stroke: #514737;
}

#flames :nth-child(2n+1) {
  fill: red;
}

#flames :nth-child(2n) {
  fill: yellow;
}

/* SMOKE */

#smoke > span {
  position: absolute;
  left: 0;
  height: 16px;
  width: 16px;
  border-radius: 100%;
  background-color: gray;
  top: 50%;
  z-index: -1;
  animation: .5s linear infinite;
  display: none;
}

#smoke :nth-child(1) {
  top: 40%;
  animation-name: smoke-1;
  animation-delay: 3ms;
  animation-duration: 1s;
}

#smoke :nth-child(2) {
  top: 45%;
  animation-name: smoke-2;
  animation-duration: 1.3s;
}

#smoke :nth-child(3) {
  top: 42%;
  animation-name: smoke-3;
  animation-delay: 3ms;
  animation-duration: 1.6s;
}

#smoke :nth-child(4) {
  top: 43%;
  animation-name: smoke-1;
  animation-duration: .7s;
}

#smoke :nth-child(5) {
  top: 46%;
  animation-name: smoke-2;
  animation-delay: 3ms;
  animation-duration: 1s;
}

#smoke :nth-child(6) {
  top: 48%;
  animation-name: smoke-3;
  animation-duration: 1.2s;
}

/* SET ANIMATIONS */

#rocket {
  animation: .55s cubic-bezier(1,-0.06,.61,.45);
  height: 150px;
  transform: translateX(-20px) rotateZ(45deg);
}

svg #flames > path {
  animation: 1.2s linear infinite forwards;
  transform-origin: center center;
  animation-play-state: paused;
  opacity: 0;
}

svg #wings-top {
  animation: .6s linear forwards;
  animation-name: close-wing-top;
}

svg #wings-bottom {
  animation: .6s linear forwards;
  animation-name: close-wing-bottom;
}

/* HOVER */

button:hover::before {
  content: "Set";
}

button:hover #wings-top,
button:focus #wings-top {
  animation-name: open-wing-top;
}

button:hover #wings-bottom,
button:focus #wings-bottom {
  animation-name: open-wing-bottom;
}

button:hover #smoke > span {
  display: block;
}

/* FOCUS */

button:focus::before {
  content: "Go!";
  animation-name: launch-text;
}

button:focus #rocket {
  animation-name: launch_149;
}

button:focus #flames > path {
  animation-name: flames;
  animation-play-state: running;
}

button:focus #smoke > span {
  display: none;
}

/* ANIMATIONS KEYFRAMES */

@keyframes launch_149 {
  from {
    transform: translateX(-20px) rotateZ(45deg);
  }

  to {
    transform: translateX(2000px) rotateZ(45deg);
  }
}

@keyframes launch-text {
  from {
    transform: translateY(43%);
  }

  to {
    transform: translateY(43%) translateX(2000px);
  }
}

@keyframes open-wing-top {
  from {
    transform: translateY(-100px);
  }

  to {
    transform: translateY(0px);
  }
}

@keyframes open-wing-bottom {
  from {
    transform: translateX(100px);
  }

  to {
    transform: translateX(0px);
  }
}

@keyframes close-wing-top {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(-100px);
  }
}

@keyframes close-wing-bottom {
  from {
    transform: translateX(0px);
  }

  to {
    transform: translateX(100px);
  }
}

@keyframes flames {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  30% {
    transform: scale(.89);
  }

  50% {
    transform: scale(.95);
  }

  70% {
    transform: scale(.9);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes smoke-1 {
  0% {
    opacity: .3;
    transform: translate(0, 0);
  }

  60% {
    opacity: .3;
    transform: translate(-15px, -10px);
  }

  100% {
    opacity: .1;
    transform: translate(-25px, 5px);
  }
}

@keyframes smoke-2 {
  0% {
    opacity: .3;
    transform: translate(0, 0);
  }

  60% {
    opacity: .3;
    transform: translate(-10px, -3px);
  }

  100% {
    opacity: .1;
    transform: translate(-30px, 9px);
  }
}

@keyframes smoke-3 {
  0% {
    opacity: .3;
    transform: translate(0, 0);
  }

  60% {
    opacity: .3;
    transform: translate(-5px, 5px);
  }

  100% {
    opacity: .1;
    transform: translate(-20px, -5px);
  }
}
</style>


================================================
FILE: Buttons/MINOTAURO18_tasty-warthog-50.html
================================================

<div class="redes">
  <a href="#" class="instagram"><svg class="instagram" fill-rule="nonzero" height="25px" width="25px" viewBox="0,0,256,256" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g style="mix-blend-mode: normal" text-anchor="none" font-size="none" font-weight="none" font-family="none" stroke-dashoffset="0" stroke-dasharray="" stroke-miterlimit="10" stroke-linejoin="miter" stroke-linecap="butt" stroke-width="1" stroke="none" fill-rule="nonzero"><g transform="scale(8,8)"><path d="M11.46875,5c-3.55078,0 -6.46875,2.91406 -6.46875,6.46875v9.0625c0,3.55078 2.91406,6.46875 6.46875,6.46875h9.0625c3.55078,0 6.46875,-2.91406 6.46875,-6.46875v-9.0625c0,-3.55078 -2.91406,-6.46875 -6.46875,-6.46875zM11.46875,7h9.0625c2.47266,0 4.46875,1.99609 4.46875,4.46875v9.0625c0,2.47266 -1.99609,4.46875 -4.46875,4.46875h-9.0625c-2.47266,0 -4.46875,-1.99609 -4.46875,-4.46875v-9.0625c0,-2.47266 1.99609,-4.46875 4.46875,-4.46875zM21.90625,9.1875c-0.50391,0 -0.90625,0.40234 -0.90625,0.90625c0,0.50391 0.40234,0.90625 0.90625,0.90625c0.50391,0 0.90625,-0.40234 0.90625,-0.90625c0,-0.50391 -0.40234,-0.90625 -0.90625,-0.90625zM16,10c-3.30078,0 -6,2.69922 -6,6c0,3.30078 2.69922,6 6,6c3.30078,0 6,-2.69922 6,-6c0,-3.30078 -2.69922,-6 -6,-6zM16,12c2.22266,0 4,1.77734 4,4c0,2.22266 -1.77734,4 -4,4c-2.22266,0 -4,-1.77734 -4,-4c0,-2.22266 1.77734,-4 4,-4z"></path></g></g></svg>
    </a>
  <a href="#" class="twitter"> <svg class="twitter" height="25px" width="25px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"></path></svg></a>
  <a href="#" class="github"> <svg class="github" height="25px" width="25px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">    <path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"></path></svg></a>
  <a href="#" class="discord"><svg class="discord" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="25px" height="25px"><path d="M40,12c0,0-4.585-3.588-10-4l-0.488,0.976C34.408,10.174,36.654,11.891,39,14c-4.045-2.065-8.039-4-15-4s-10.955,1.935-15,4c2.346-2.109,5.018-4.015,9.488-5.024L18,8c-5.681,0.537-10,4-10,4s-5.121,7.425-6,22c5.162,5.953,13,6,13,6l1.639-2.185C13.857,36.848,10.715,35.121,8,32c3.238,2.45,8.125,5,16,5s12.762-2.55,16-5c-2.715,3.121-5.857,4.848-8.639,5.815L33,40c0,0,7.838-0.047,13-6C45.121,19.425,40,12,40,12z M17.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C21,28.209,19.433,30,17.5,30z M30.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C34,28.209,32.433,30,30.5,30z"></path></svg>
    </a>
</div>
<style>
/* From Uiverse.io by MINOTAURO18 - Tags: media, social, instagram, button, Discord, github */
.redes {
  width: 80px;
  height: auto;
  display: flex;
  flex-direction: column;
}

.redes a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  transition: all 0.3s ease-in-out;
}

.redes a svg {
  width: 30px;
  fill: #ffffff;
}

.redes .discord {
  background-color: rgb(0, 60, 255);
}

.redes .github {
  background-color: rgb(24, 22, 22);
}

.redes .twitter {
  background-color: #33BBFF;
}

.redes .instagram {
  background: linear-gradient(45deg, #833AB4, #FD1D1D, #F56040);
}

.redes a:hover {
  width: 90px;
}
</style>


================================================
FILE: Buttons/MRez321_tame-squid-31.html
================================================
<button class="button">
  <svg
    viewBox="0 0 48 48"
    height="100"
    width="100"
    y="0px"
    x="0px"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M39.175,10.016c1.687,0,2.131,1.276,1.632,4.272c-0.571,3.426-2.216,14.769-3.528,21.83 c-0.502,2.702-1.407,3.867-2.724,3.867c-0.724,0-1.572-0.352-2.546-0.995c-1.32-0.872-7.984-5.279-9.431-6.314 c-1.32-0.943-3.141-2.078-0.857-4.312c0.813-0.796,6.14-5.883,10.29-9.842c0.443-0.423,0.072-1.068-0.42-1.068 c-0.112,0-0.231,0.034-0.347,0.111c-5.594,3.71-13.351,8.859-14.338,9.53c-0.987,0.67-1.949,1.1-3.231,1.1 c-0.655,0-1.394-0.112-2.263-0.362c-1.943-0.558-3.84-1.223-4.579-1.477c-2.845-0.976-2.17-2.241,0.593-3.457 c11.078-4.873,25.413-10.815,27.392-11.637C36.746,10.461,38.178,10.016,39.175,10.016 M39.175,7.016L39.175,7.016 c-1.368,0-3.015,0.441-5.506,1.474L33.37,8.614C22.735,13.03,13.092,17.128,6.218,20.152c-1.074,0.473-4.341,1.91-4.214,4.916 c0.054,1.297,0.768,3.065,3.856,4.124l0.228,0.078c0.862,0.297,2.657,0.916,4.497,1.445c1.12,0.322,2.132,0.478,3.091,0.478 c1.664,0,2.953-0.475,3.961-1.028c-0.005,0.168-0.001,0.337,0.012,0.507c0.182,2.312,1.97,3.58,3.038,4.338l0.149,0.106 c1.577,1.128,8.714,5.843,9.522,6.376c1.521,1.004,2.894,1.491,4.199,1.491c2.052,0,4.703-1.096,5.673-6.318 c0.921-4.953,1.985-11.872,2.762-16.924c0.331-2.156,0.603-3.924,0.776-4.961c0.349-2.094,0.509-4.466-0.948-6.185 C42.208,7.875,41.08,7.016,39.175,7.016L39.175,7.016z"
    ></path>
  </svg>

  Send Message
</button>

<style>
/* From Uiverse.io by MRez321  - Tags: button, hover, animated, hover button, #button, button hover effect  */
.button {
  position: relative;
  z-index: 5;
  isolation: isolate;
  cursor: pointer;
  transition: 0.4s;

  width: fit-content;
  height: 4.8rem;
  padding: 1rem;
  margin-inline: auto;
  border: solid 3px;
  border-color: #0000004d #0000004d #00000080 #00000080;
  border-radius: 0.8rem;

  font-family: cursive;
  font-size: 1.4rem;
  font-weight: 700;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;

  animation: boxShadowRotation 2s linear infinite;
}
.button:hover,
.button:active {
  scale: 0.96;
  border-color: #00000080 #00000080 #0000004d #0000004d;
  padding: 2rem;
  box-shadow: 0 0 4px 2px rgba(208, 212, 218, 0.979);
  background: #fbfdfc;
}

.button::before,
.button::after {
  position: absolute;
  content: "";
  background: #f4f5f4;
  transition: 0.4s;
}
.button::before {
  z-index: -1;
  inset: 0.3rem;
  border-radius: 4rem;
  box-shadow: inset 0 0 4px 2px rgba(208, 212, 218, 0.979);
}
.button:hover::before {
  inset: 0.1rem;
  z-index: -1;
  margin-inline: auto;
  border: solid 1px;
  border-color: #00000080 #00000080 #0000004d #0000004d;
  border-radius: 0.8rem;
  animation: boxShadowRotation 2s linear infinite;
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
.button::after {
  background: none;
  z-index: -2;
  border-radius: 1rem;
}
.button:hover::after {
  inset: -0.5rem;
  border: solid 1px #00000080;
  box-shadow: 0 0 10px 4px #a1c4fd;
  background: #c2e9fb;
}

.button svg {
  width: 2rem;
  height: 2rem;
  z-index: 10;
}
.button:hover svg {
  animation: rotation 0.8s linear;
  filter: drop-shadow(0 0 10px 10px rgb(170, 166, 166));
}

@keyframes rotation {
  0% {
    transform: rotate(0deg) translate(0, 0) scale(1);
  }
  50% {
    transform: rotate(180deg) translate(-4rem, -2rem) scale(1.4);
  }
  100% {
    transform: rotate(360deg) translate(0, 0) scale(1);
  }
}
@keyframes boxShadowRotation {
  0% {
    box-shadow: inset 10px 10px 20px rgba(29, 43, 83, 0.2);
  }
  25% {
    box-shadow: inset -10px 10px 20px rgba(29, 43, 83, 0.2);
  }
  50% {
    box-shadow: inset -10px -10px 20px rgba(29, 43, 83, 0.2);
  }
  75% {
    box-shadow: inset 10px -10px 20px rgba(29, 43, 83, 0.2);
  }
  100% {
    box-shadow: inset 10px 10px 20px rgba(29, 43, 83, 0.2);
  }
}

</style>
    

================================================
FILE: Buttons/Madflows_dangerous-husky-17.html
================================================
<button class="button">
    Fondle ME!
</button>
<style>
/* From Uiverse.io by Madflows - Tags: button, animated */
.button {
  outline: none;
  border: none;
  height: 3.5em;
  padding: 0 2.5rem;
  border-radius: 0.375rem;
  background: #4503dc;
  color: #fff;
  -webkit-box-shadow: 0 0.4rem 0 0 #3700b8;
  box-shadow: 0 0.4rem 0 0 #3700b8;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-family: sans-serif;
  font-weight: 700;
}

.button:active {
  -webkit-transform: translateY(0.3rem);
  -ms-transform: translateY(0.3rem);
  transform: translateY(0.3rem);
  -webkit-box-shadow: 0 0.2rem 0 0 #3700b8;
  box-shadow: 0 0.2rem 0 0 #3700b8;
}
</style>


================================================
FILE: Buttons/Madflows_stale-baboon-45.html
================================================
<button class="button">
    <span class="button-content">Download </span>
</button>
<style>
/* From Uiverse.io by Madflows - Tags: button, download */
.button {
  position: relative;
  overflow: hidden;
  height: 3rem;
  padding: 0 2rem;
  border-radius: 1.5rem;
  background: #3d3a4e;
  background-size: 400%;
  color: #fff;
  border: none;
}

.button:hover::before {
  transform: scaleX(1);
}

.button-content {
  position: relative;
  z-index: 1;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(
    82.3deg,
    rgba(150, 93, 233, 1) 10.8%,
    rgba(99, 88, 238, 1) 94.3%
  );
  transition: all 0.475s;
}
</style>


================================================
FILE: Buttons/Madflows_terrible-catfish-72.html
================================================
<button class="learn-more"> Learn More
</button>
<style>
/* From Uiverse.io by Madflows - Tags: button */
button {
 position: relative;
 display: inline-block;
 cursor: pointer;
 outline: none;
 border: 0;
 vertical-align: middle;
 text-decoration: none;
 font-family: inherit;
 font-size: 15px;
}

button.learn-more {
 font-weight: 600;
 color: #382b22;
 text-transform: uppercase;
 padding: 1.25em 2em;
 background: #fff0f0;
 border: 2px solid #b18597;
 border-radius: 0.75em;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
 transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
}

button.learn-more::before {
 position: absolute;
 content: '';
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: #f9c4d2;
 border-radius: inherit;
 -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
 box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
 -webkit-transform: translate3d(0, 0.75em, -1em);
 transform: translate3d(0, 0.75em, -1em);
 transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}

button.learn-more:hover {
 background: #ffe9e9;
 -webkit-transform: translate(0, 0.25em);
 transform: translate(0, 0.25em);
}

button.learn-more:hover::before {
 -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
 box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
 -webkit-transform: translate3d(0, 0.5em, -1em);
 transform: translate3d(0, 0.5em, -1em);
}

button.learn-more:active {
 background: #ffe9e9;
 -webkit-transform: translate(0em, 0.75em);
 transform: translate(0em, 0.75em);
}

button.learn-more:active::before {
 -webkit-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
 box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
 -webkit-transform: translate3d(0, 0, -1em);
 transform: translate3d(0, 0, -1em);
}
</style>


================================================
FILE: Buttons/Mahalakshmiiii_thin-snail-33.html
================================================
<button class="space-button">
  To a Galaxy far far away 
  <span class="space-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 256 256"><path fill="white" d="M148 224a4 4 0 0 1-4 4h-32a4 4 0 0 1 0-8h32a4 4 0 0 1 4 4Zm71.1-67.3l-12.4 55.6a12 12 0 0 1-7.7 8.8a14.4 14.4 0 0 1-4 .6a12 12 0 0 1-7.5-2.6L158.6 196H97.4l-28.9 23.1a12 12 0 0 1-7.5 2.6a14.4 14.4 0 0 1-4-.6a12 12 0 0 1-7.7-8.8l-12.4-55.6a12.4 12.4 0 0 1 2.5-10.3l30.5-36.5a117.4 117.4 0 0 1 7.9-35.8c11.8-30.5 33.8-50.3 42.7-57.5a12 12 0 0 1 15 .1c10.9 8.8 30.9 28.1 42.2 57.4a119 119 0 0 1 7.8 35l31.1 37.3a12.4 12.4 0 0 1 2.5 10.3ZM98.3 188h59.4c50.4-91.6-8-149.5-27.2-165.1a3.9 3.9 0 0 0-5 0C106 38.5 46.8 96.3 98.3 188Zm-7.5 3c-13-23.5-20-46.4-21-68.5l-24.2 29a4.1 4.1 0 0 0-.8 3.5l12.3 55.6a4 4 0 0 0 2.6 2.9a4 4 0 0 0 3.8-.6Zm119.6-39.5l-24.7-29.6c-.8 22.3-7.7 45.4-20.6 69.1l27.4 21.9a4 4 0 0 0 3.8.6a4 4 0 0 0 2.6-2.9l12.3-55.6a4.1 4.1 0 0 0-.8-3.5ZM128 104a8 8 0 1 0-8-8a8 8 0 0 0 8 8Z"></path></svg>
    </span>
  </button>
<style>
/* From Uiverse.io by Mahalakshmiiii - Tags: button */
.space-button {
  align-items: center;
  background-image: linear-gradient(to left bottom, #220ee9, #0021d3, #0029bb, #002ca3, #002d8a, #003e92, #004e98, #005d9b, #0084bc, #00acd5, #00d4e6, #5ffbf1);
  border-radius: 0 25px 0 25px;
  border: 0;
  color: #f1f1f1;
  display: flex;
  font-size: 16px;
  padding: 10px 20px;
}

.space-icon {
  margin-left: 10px;
}

.space-button:hover .space-icon {
  animation: move_4001 0.6s infinite alternate;
}

@keyframes move_4001 {
  0% {
    transform: translateY(2px);
  }

  100% {
    transform: translateY(-2px);
  }
}

</style>


================================================
FILE: Buttons/Manish-Tamang_spicy-panther-59.html
================================================
<!-- From Uiverse.io by Manish-Tamang  - Tags: button, tailwindbutton, tailwindcss -->
<button
  class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 group bg-gray-900 hover:bg-gray-950 transition-all duration-200 ease-in-out hover:ring-2 hover:ring-offset-2 hover:ring-gray-900"
>
  <svg
    class="mr-2 text-white"
    stroke-linejoin="round"
    stroke-linecap="round"
    stroke-width="2"
    stroke="currentColor"
    fill="none"
    viewBox="0 0 24 24"
    height="24"
    width="24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
    ></path>
    <path d="M9 18c-4.51 2-5-2-7-2"></path>
  </svg>
  <span class="text-white">Star on Github</span>
  <span
    class="flex items-center ml-4 group-hover:text-yellow-500 transition-colors duration-200 ease-in-out"
  >
    <svg
      class="text-yellow-500"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="currentColor"
      fill="none"
      viewBox="0 0 24 24"
      height="24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <polygon
        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
      ></polygon>
    </svg>
    <span class="text-white ml-2">612</span>
  </span>
</button>


    

================================================
FILE: Buttons/Manish-Tamang_swift-warthog-30.html
================================================
<span><a href="#"></a></span>

<style>
/* From Uiverse.io by Manish-Tamang  - Tags: button, hover effect, html, css, 3d button, button hover effect  */
a {
  position: relative;
  display: inline-flex;
  width: 180px;
  height: 55px;
  margin: 0 15px;
  perspective: 1000px;
  text-decoration: none;
}

a:before,
a:after {
  position: absolute;
  content: "3D HOVER";
  height: 55px;
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid black;
  box-sizing: border-box;
  font-size: 19px;
  letter-spacing: 1px;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  transition: transform 0.25s;
}

a:before {
  color: #fff;
  background: #000;
  transform: rotateY(0deg) translateZ(25px);
}

a:after {
  color: #000;
  transform: rotateX(90deg) translateZ(25px);
}

a:hover:before {
  transform: translateZ(-25px) rotateX(-90deg);
}

a:hover:after {
  transform: rotateY(0deg) translateZ(25px);
}

</style>
    

================================================
FILE: Buttons/Manish-Tamang_wicked-wasp-100.html
================================================
<button class="send-message-btn">
  <div class="inner-randi">
    <span class="khatey">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="20px"
        width="20px"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="#000000"
          d="M11.5003 12H5.41872M5.24634 12.7972L4.24158 15.7986C3.69128 17.4424 3.41613 18.2643 3.61359 18.7704C3.78506 19.21 4.15335 19.5432 4.6078 19.6701C5.13111 19.8161 5.92151 19.4604 7.50231 18.7491L17.6367 14.1886C19.1797 13.4942 19.9512 13.1471 20.1896 12.6648C20.3968 12.2458 20.3968 11.7541 20.1896 11.3351C19.9512 10.8529 19.1797 10.5057 17.6367 9.81135L7.48483 5.24303C5.90879 4.53382 5.12078 4.17921 4.59799 4.32468C4.14397 4.45101 3.77572 4.78336 3.60365 5.22209C3.40551 5.72728 3.67772 6.54741 4.22215 8.18767L5.24829 11.2793C5.34179 11.561 5.38855 11.7019 5.407 11.8459C5.42338 11.9738 5.42321 12.1032 5.40651 12.231C5.38768 12.375 5.34057 12.5157 5.24634 12.7972Z"
        ></path>
      </svg>
    </span>
    Send Message
  </div>
</button>

<style>
/* From Uiverse.io by Manish-Tamang  - Tags: button, challenge, html */
.send-message-btn {
  background-color: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 14px; /* Increased padding to adjust for 4px gap */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.send-message-btn:hover {
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
.send-message-btn:active {
  transform: scale(0.98);
}

.inner-randi {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  border-radius: 24px;
  padding: 10px 16px;
  position: relative;
  width: calc(100% - 1px);
  height: calc(100% - 20px);
  border: 2px solid #e0e0e0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  color: #000;
  white-space: nowrap;
}

.khatey {
  margin-right: 8px;
  transform: rotate(-30deg);
}

</style>
    

================================================
FILE: Buttons/McHaXYT_evil-parrot-13.html
================================================
<button class="button">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="1.25rem"
    height="1.25rem"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
  >
    <path d="M12 19v-7m0 0V5m0 7H5m7 0h7"></path>
  </svg>
  Create
</button>

<style>
/* From Uiverse.io by McHaXYT  - Tags: neumorphism, flashy, icon, purple, button, hover, futuristic, creative */
.button {
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 0.625rem 1rem;
  color: rgb(242 242 242);
  background-color: rgb(79 70 229);
  background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
  font-weight: 600;
  border-radius: 0.5rem;
  border-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.35s linear;
}

.button:hover {
  box-shadow: inset 0 5px 25px 0 #af40ff, inset 0 10px 15px 0px #5b42f3,
    inset 0 5px 25px 0px #00ddeb;
}

</style>
    

================================================
FILE: Buttons/McHaXYT_fresh-turkey-35.html
================================================
<button class="button">
  Get started
  <span class="button-span"> ─ it's free</span>
</button>

<style>
/* From Uiverse.io by McHaXYT  - Tags: simple, minimalist, white, black, button, dark, light, modern */
.button {
  padding: 15px 20px;
  border: none;
  outline: none;
  background-color: #151515;
  color: #eee;
  border-radius: 7px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease-out;
}

.button:hover {
  transform: translateY(-3px);
}

.button-span {
  color: #aaa;
}

</style>
    

================================================
FILE: Buttons/McHaXYT_hungry-starfish-43.html
================================================
<button class="button">
  <a
    class="px-4 py-2.5 font-sans flex items-center gap-2 border-none rounded-lg text-base font-semibold transition-colors duration-200 bg-indigo-600 hover:bg-indigo-700 text-offwhite cursor-pointer z-[21] max-w-fit -top-11 mx-auto bg-indigo-500 hover:bg-indigo-600 relative pr-12 py-3 pl-10 btn-a"
    href="/elements"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      class="btn-svg"
      width="1.5rem"
    >
      <path
        d="M5.83087 18.1693L3.00261 20.9979M7.95219 20.2906L7.24508 20.9977M3.70955 16.0479L3.00244 16.755M11.3588 6.14844L6.98115 6.14844C6.65417 6.14844 6.43834 6.20823 6.15796 6.37645L4.34408 7.46478C3.91094 7.72466 3.69438 7.8546 3.63232 8.01389C3.5783 8.15256 3.58885 8.30808 3.66112 8.43818C3.74412 8.58763 3.97626 8.68711 4.44054 8.88609L7.91447 10.3749M11.3588 6.14844C10.7176 6.79012 10.1116 7.56433 9.18973 8.74215L8.32567 9.84608C8.16879 10.0465 8.0327 10.2204 7.91447 10.3749M11.3588 6.14844C11.6532 5.85384 11.955 5.58717 12.2982 5.32221C13.0456 4.7452 14.6119 3.90719 15.5067 3.6056C16.8125 3.16545 17.3933 3.12131 18.5548 3.03303C19.5534 2.95712 20.3717 3.01164 20.6801 3.32001C20.9885 3.62839 21.043 4.44669 20.9671 5.44536C20.8788 6.60685 20.8347 7.18759 20.3945 8.49341C20.0929 9.38818 19.2549 10.9545 18.6779 11.7019C18.413 12.0451 18.1463 12.3469 17.8517 12.6413M7.91447 10.3749C7.58676 10.8033 7.39618 11.0832 7.27999 11.3693C6.93821 12.2106 6.99595 13.1615 7.43702 13.9554C7.64105 14.3226 7.98047 14.662 8.6593 15.3408C9.33813 16.0197 9.67754 16.3591 10.0448 16.5631C10.8386 17.0042 11.7895 17.0619 12.6309 16.7201C12.9169 16.6039 13.1968 16.4134 13.6252 16.0857M13.6252 16.0857L15.114 19.5596C15.313 20.0239 15.4125 20.256 15.5619 20.339C15.692 20.4113 15.8476 20.4218 15.9862 20.3678C16.1455 20.3057 16.2755 20.0892 16.5353 19.656L17.6237 17.8422C17.7919 17.5618 17.8517 17.346 17.8517 17.019L17.8517 12.6413M13.6252 16.0857C13.7798 15.9674 13.9536 15.8313 14.154 15.6745L15.258 14.8104C16.4358 13.8885 17.21 13.2825 17.8517 12.6413"
        stroke="currentColor"
        fill="none"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path></svg
    >Browse all elements</a
  >
</button>

<style>
/* From Uiverse.io by McHaXYT  - Tags: flashy, icon, blue, minimalist, button, hover, hover button, #button */
.button {
  cursor: pointer;
  border: none;
  max-width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  font-size: 14px;
  padding: 0.75rem 2.5rem;
  background-color: rgb(88, 80, 255);
  transition: all 0.2s linear;
}

.button:hover {
  background-color: #4d44ff;
}

.btn-a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  gap: 0.5rem;
  color: rgb(242 242 242 / 1);
  text-decoration: none;
}

.btn-svg {
  margin-right: 0.375rem;
}

</style>
    

================================================
FILE: Buttons/McHaXYT_swift-mayfly-80.html
================================================
<div class="button-container">
  <button class="button flex-center">
    <svg
      viewBox="0 0 24 24"
      class="btn-svg"
      width="22px"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
      <g
        id="SVGRepo_tracerCarrier"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
          fill="#fff"
        ></path>
        <path
          d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z"
          fill="#fff"
        ></path>
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z"
          fill="#fff"
        ></path>
      </g>
    </svg>
  </button>
  <button class="button flex-center">
    <svg
      fill="#fff"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      class="btn-svg"
      width="22px"
      viewBox="0 -2 20 20"
    >
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <title>twitter [#154]</title>
        <desc>Created with Sketch.</desc>
        <defs></defs>
        <g
          fill-rule="evenodd"
          fill="none"
          stroke-width="1"
          stroke="none"
          id="Page-1"
        >
          <g
            fill="#fff"
            transform="translate(-60.000000, -7521.000000)"
            id="Dribbble-Light-Preview"
          >
            <g transform="translate(56.000000, 160.000000)" id="icons">
              <path
                id="twitter-[#154]"
                d="M10.29,7377 C17.837,7377 21.965,7370.84365 21.965,7365.50546 C21.965,7365.33021 21.965,7365.15595 21.953,7364.98267 C22.756,7364.41163 23.449,7363.70276 24,7362.8915 C23.252,7363.21837 22.457,7363.433 21.644,7363.52751 C22.5,7363.02244 23.141,7362.2289 23.448,7361.2926 C22.642,7361.76321 21.761,7362.095 20.842,7362.27321 C19.288,7360.64674 16.689,7360.56798 15.036,7362.09796 C13.971,7363.08447 13.518,7364.55538 13.849,7365.95835 C10.55,7365.79492 7.476,7364.261 5.392,7361.73762 C4.303,7363.58363 4.86,7365.94457 6.663,7367.12996 C6.01,7367.11125 5.371,7366.93797 4.8,7366.62489 L4.8,7366.67608 C4.801,7368.5989 6.178,7370.2549 8.092,7370.63591 C7.488,7370.79836 6.854,7370.82199 6.24,7370.70483 C6.777,7372.35099 8.318,7373.47829 10.073,7373.51078 C8.62,7374.63513 6.825,7375.24554 4.977,7375.24358 C4.651,7375.24259 4.325,7375.22388 4,7375.18549 C5.877,7376.37088 8.06,7377 10.29,7376.99705"
              ></path>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </button>
  <button class="button flex-center">
    <svg
      viewBox="0 0 20 20"
      width="22px"
      class="btn-svg"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      fill="#fff"
      stroke="#fff"
    >
      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
      <g
        id="SVGRepo_tracerCarrier"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <title>github [#fff142]</title>
        <desc>Created with Sketch.</desc>
        <defs></defs>
        <g
          id="Page-1"
          stroke="none"
          stroke-width="1"
          fill="none"
          fill-rule="evenodd"
        >
          <g
            id="Dribbble-Light-Preview"
            transform="translate(-140.000000, -7559.000000)"
            fill="#fff"
          >
            <g id="icons" transform="translate(56.000000, 160.000000)">
              <path
                d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399"
                id="github-[#fff142]"
              ></path>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </button>
  <button class="button flex-center">
    <svg
      stroke="#fff"
      fill="#fff"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      class="btn-svg"
      width="22px"
      viewBox="0 -3 20 20"
    >
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <title>youtube [#fff168]</title>
        <desc>Created with Sketch.</desc>
        <defs></defs>
        <g
          fill-rule="evenodd"
          fill="none"
          stroke-width="1"
          stroke="none"
          id="Page-1"
        >
          <g
            fill="#fff"
            transform="translate(-300.000000, -7442.000000)"
            id="Dribbble-Light-Preview"
          >
            <g transform="translate(56.000000, 160.000000)" id="icons">
              <path
                id="youtube-[#fff168]"
                d="M251.988432,7291.58588 L251.988432,7285.97425 C253.980638,7286.91168 255.523602,7287.8172 257.348463,7288.79353 C255.843351,7289.62824 253.980638,7290.56468 251.988432,7291.58588 M263.090998,7283.18289 C262.747343,7282.73013 262.161634,7282.37809 261.538073,7282.26141 C259.705243,7281.91336 248.270974,7281.91237 246.439141,7282.26141 C245.939097,7282.35515 245.493839,7282.58153 245.111335,7282.93357 C243.49964,7284.42947 244.004664,7292.45151 244.393145,7293.75096 C244.556505,7294.31342 244.767679,7294.71931 245.033639,7294.98558 C245.376298,7295.33761 245.845463,7295.57995 246.384355,7295.68865 C247.893451,7296.0008 255.668037,7296.17532 261.506198,7295.73552 C262.044094,7295.64178 262.520231,7295.39147 262.895762,7295.02447 C264.385932,7293.53455 264.28433,7285.06174 263.090998,7283.18289"
              ></path>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </button>
</div>

<style>
/* From Uiverse.io by McHaXYT  - Tags: white, black, social, twitter, instagram, button, github, clean */
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.button {
  cursor: pointer;
  text-decoration: none;
  color: #ffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #2d2e32;
  border: 2px solid #2d2e32;
  transition: all 0.45s;
}

.button:hover {
  transform: rotate(360deg);
  transform-origin: center center;
  background-color: #ffff;
  color: #2d2e32;
}

.button:hover .btn-svg {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(305deg)
    brightness(103%) contrast(103%);
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
    

================================================
FILE: Buttons/Medisetti-Venkata-Saikiran_silly-duck-5.html
================================================
<div class="social-login-icons">
  <div class="socialcontainer">
    <div class="social-icon-1">
      <svg
        viewBox="0 0 512 512"
        height="1.7em"
        xmlns="http://www.w3.org/2000/svg"
        class="svgIcontwit"
        fill="white"
      >
        <path
          d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
        ></path>
      </svg>
    </div>
    <div class="social-icon-1">
      <svg
        viewBox="0 0 512 512"
        height="1.7em"
        xmlns="http://www.w3.org/2000/svg"
        class="svgIcontwit"
        fill="white"
      >
        <path
          d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
        ></path>
      </svg>
    </div>
  </div>
  <div class="socialcontainer">
    <div class="social-icon-2">
      <svg
        fill="white"
        class="svgIcon"
        viewBox="0 0 448 512"
        height="1.5em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
        ></path>
      </svg>
    </div>
    <div class="social-icon-2">
      <svg
        fill="white"
        class="svgIcon"
        viewBox="0 0 448 512"
        height="1.5em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
        ></path>
      </svg>
    </div>
  </div>
  <div class="socialcontainer">
    <div class="social-icon-3">
      <svg
        viewBox="0 0 384 512"
        fill="white"
        height="1.6em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"
        ></path>
      </svg>
    </div>
    <div class="social-icon-3">
      <svg
        viewBox="0 0 384 512"
        fill="white"
        height="1.6em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"
        ></path>
      </svg>
    </div>
  </div>
  <div class="socialcontainer">
    <div class="social-icon-4">
      <svg fill="white" viewBox="0 0 496 512" height="1.6em">
        <path
          d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
        ></path>
      </svg>
    </div>
    <div class="social-icon-4">
      <svg fill="white" viewBox="0 0 496 512" height="1.6em">
        <path
          d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
        ></path>
      </svg>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Medisetti-Venkata-Saikiran  - Tags: button */
.social-login-icons {
  display: flex;
  align-items: center;
}
.social-login-icons svg {
  width: 40px;
}

.social-icon-1,
.social-icon-2,
.social-icon-3,
.social-icon-4 {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .social-icon-1 i{
    color: rgba(175, 7, 7, 0.899);
    font-size:50px;

} */
/* .social-icon-2 i{
    color: skyblue;
    font-size:50px;

} */
/* .social-icon-3 i{
    color: rgb(58 58 227 / 87%);
    font-size:50px;

} */
/* .social-login-icons{
    margin: 30px 0px;
} */

.socialcontainer {
  height: 50px;
  overflow: hidden;
}
.social-icon-1 {
  transition-duration: 0.4s;
  background-color: rgb(0, 0, 0);
}
.socialcontainer:hover .social-icon-1 {
  transform: translateY(-50px);
}
.social-icon-2 {
  transition-duration: 0.4s;
  background: linear-gradient(
    72.44deg,
    #ff7a00 11.92%,
    #ff0169 51.56%,
    #d300c5 85.69%
  );
}
.socialcontainer:hover .social-icon-2 {
  transform: translateY(-50px);
}
.social-icon-3 {
  transition-duration: 0.4s;
  background: #316ff6;
}

.socialcontainer:hover .social-icon-3 {
  transform: translateY(-50px);
}
.social-icon-4 {
  transition-duration: 0.4s;
  background: linear-gradient(
    180deg,
    rgba(129, 34, 144, 1) 0%,
    rgba(77, 34, 124, 1) 91%
  );
}

.socialcontainer:hover .social-icon-4 {
  transform: translateY(-50px);
}

</style>
    

================================================
FILE: Buttons/MeetJF_average-deer-50.html
================================================
<!-- From Uiverse.io by MeetJF  - Website: https://tailwindcomponents.com/component/store-buttons-badge - Name: iCodeart - Tags: button, app store, google play, rounded, button, black, play, text, white, icon, colorful, download, store, google, apple, app -->
<div class="flex flex-col gap-3">
  <button class="cursor-pointer">
    <div
      class="flex max-w-48 h-12 px-3 gap-2 rounded-xl items-center justify-center bg-black text-white dark:text-black dark:bg-white sm:h-14"
    >
      <svg viewBox="30 336.7 120.9 129.2" class="w-5 sm:w-7">
        <path
          d="M119.2,421.2c15.3-8.4,27-14.8,28-15.3c3.2-1.7,6.5-6.2,0-9.7  c-2.1-1.1-13.4-7.3-28-15.3l-20.1,20.2L119.2,421.2z"
          fill="#FFD400"
        ></path>
        <path
          d="M99.1,401.1l-64.2,64.7c1.5,0.2,3.2-0.2,5.2-1.3  c4.2-2.3,48.8-26.7,79.1-43.3L99.1,401.1L99.1,401.1z"
          fill="#FF3333"
        ></path>
        <path
          d="M99.1,401.1l20.1-20.2c0,0-74.6-40.7-79.1-43.1  c-1.7-1-3.6-1.3-5.3-1L99.1,401.1z"
          fill="#48FF48"
        ></path>
        <path
          d="M99.1,401.1l-64.3-64.3c-2.6,0.6-4.8,2.9-4.8,7.6  c0,7.5,0,107.5,0,113.8c0,4.3,1.7,7.4,4.9,7.7L99.1,401.1z"
          fill="#3BCCFF"
        ></path>
      </svg>
      <div>
        <div class="text-[.5rem] sm:text-xs text-left">GET IT ON</div>
        <div class="text-sm font-semibold font-sans -mt-1 sm:text-xl">
          Google Play
        </div>
      </div>
    </div>
  </button>

  <button class="cursor-pointer">
    <div
      class="flex max-w-48 h-12 px-3 gap-2 rounded-xl items-center justify-center bg-black text-white dark:text-black dark:bg-white sm:gap-3 sm:h-14"
    >
      <svg viewBox="0 0 384 512" class="w-5 sm:w-7">
        <path
          d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
          fill="currentColor"
        ></path>
      </svg>
      <div>
        <div class="text-[.5rem] sm:text-xs text-left">Download on the</div>
        <div class="text-lg font-semibold font-sans -mt-1 sm:text-2xl">
          App Store
        </div>
      </div>
    </div>
  </button>

  <button class="cursor-pointer">
    <div
      class="flex max-w-48 h-12 px-3 py-4 gap-2 rounded-xl items-center justify-center bg-black text-white dark:text-black dark:bg-white sm:h-14"
    >
      <svg viewBox="0 0 16 16" class="w-5 sm:w-7">
        <path
          fill="currentColor"
          d="m10.213 1.471l.691-1.26q.069-.124-.048-.192q-.128-.057-.195.058l-.7 1.27A4.8 4.8 0 0 0 8.005.941q-1.032 0-1.956.404l-.7-1.27Q5.281-.037 5.154.02q-.117.069-.049.193l.691 1.259a4.25 4.25 0 0 0-1.673 1.476A3.7 3.7 0 0 0 3.5 5.02h9q0-1.125-.623-2.072a4.27 4.27 0 0 0-1.664-1.476ZM6.22 3.303a.37.37 0 0 1-.267.11a.35.35 0 0 1-.263-.11a.37.37 0 0 1-.107-.264a.37.37 0 0 1 .107-.265a.35.35 0 0 1 .263-.11q.155 0 .267.11a.36.36 0 0 1 .112.265a.36.36 0 0 1-.112.264m4.101 0a.35.35 0 0 1-.262.11a.37.37 0 0 1-.268-.11a.36.36 0 0 1-.112-.264q0-.154.112-.265a.37.37 0 0 1 .268-.11q.155 0 .262.11a.37.37 0 0 1 .107.265q0 .153-.107.264M3.5 11.77q0 .441.311.75q.311.306.76.307h.758l.01 2.182q0 .414.292.703a.96.96 0 0 0 .7.288a.97.97 0 0 0 .71-.288a.95.95 0 0 0 .292-.703v-2.182h1.343v2.182q0 .414.292.703a.97.97 0 0 0 .71.288a.97.97 0 0 0 .71-.288a.95.95 0 0 0 .292-.703v-2.182h.76q.436 0 .749-.308q.31-.307.311-.75V5.365h-9zm10.495-6.587a.98.98 0 0 0-.702.278a.9.9 0 0 0-.293.685v4.063q0 .406.293.69a.97.97 0 0 0 .702.284q.42 0 .712-.284a.92.92 0 0 0 .293-.69V6.146a.9.9 0 0 0-.293-.685a1 1 0 0 0-.712-.278m-12.702.283a1 1 0 0 1 .712-.283q.41 0 .702.283a.9.9 0 0 1 .293.68v4.063a.93.93 0 0 1-.288.69a.97.97 0 0 1-.707.284a1 1 0 0 1-.712-.284a.92.92 0 0 1-.293-.69V6.146q0-.396.293-.68"
        ></path>
      </svg>
      <div>
        <div class="text-[.5rem] sm:text-xs text-left">Download</div>
        <div class="text-sm font-semibold font-sans -mt-1 sm:text-xl">
          Android APK
        </div>
      </div>
    </div>
  </button>
</div>


    

================================================
FILE: Buttons/Melo034_stupid-bear-67.html
================================================
<!-- From Uiverse.io by Melo034  - Tags: simple, material design, button -->
<button
  class="relative px-8 py-2 rounded-md bg-white isolation-auto z-10 border-2 border-red-700 before:absolute before:w-full before:transition-all before:duration-700 before:hover:w-full hover:text-white before:-right-full before:hover:right-0 before:rounded-full before:bg-[#A12347] before:-z-10 before:aspect-square before:hover:scale-150 overflow-hidden before:hover:duration-700 inline-flex items-center justify-center px-4 py-3 text-sm font-semibold text-black bg-white border border-gray-200 rounded-lg shadow-sm gap-x-2 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none"
>
  Button
</button>


    

================================================
FILE: Buttons/MetaBlue2000_friendly-chipmunk-57.html
================================================
<button class="button">
  <svg
    class="icon"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    transform="rotate(-45)"
  >
    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
    <g
      id="SVGRepo_tracerCarrier"
      stroke-linecap="round"
      stroke-linejoin="round"
    ></g>
    <g id="SVGRepo_iconCarrier">
      <path
        d="M11.5003 12H5.41872M5.24634 12.7972L4.24158 15.7986C3.69128 17.4424 3.41613 18.2643 3.61359 18.7704C3.78506 19.21 4.15335 19.5432 4.6078 19.6701C5.13111 19.8161 5.92151 19.4604 7.50231 18.7491L17.6367 14.1886C19.1797 13.4942 19.9512 13.1471 20.1896 12.6648C20.3968 12.2458 20.3968 11.7541 20.1896 11.3351C19.9512 10.8529 19.1797 10.5057 17.6367 9.81135L7.48483 5.24303C5.90879 4.53382 5.12078 4.17921 4.59799 4.32468C4.14397 4.45101 3.77572 4.78336 3.60365 5.22209C3.40551 5.72728 3.67772 6.54741 4.22215 8.18767L5.24829 11.2793C5.34179 11.561 5.38855 11.7019 5.407 11.8459C5.42338 11.9738 5.42321 12.1032 5.40651 12.231C5.38768 12.375 5.34057 12.5157 5.24634 12.7972Z"
        stroke="#000000"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
    </g>
  </svg>
  <p class="text">&nbsp;Send message&nbsp;</p>
</button>

<style>
/* From Uiverse.io by MetaBlue2000  - Tags: message, challenge, effect 3d */
.button {
  height: 50px;
  width: 130px;
  display: flex;
  border: rgb(135, 135, 135) 2px solid;
  align-items: center;
  border-radius: 12px;
  box-shadow: 1px 1px 75px 5px grey;
  z-index: -2;
}

.icon {
  height: 18px;
  display: flex;
  margin-left: 5px;
  border-radius: l;
  z-index: -1;
}

.text {
  font-variant: small-caps;
  font-weight: 700;
  font-size: 13.123px;
  border-radius: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  align-items: center;
  box-shadow: inset 10px 4px 8px rgb(209, 209, 209),
    inset -10px -4px 8px rgba(255, 255, 255);
}

</style>
    

================================================
FILE: Buttons/MetaBlue2000_hard-fly-61.html
================================================
<button class="button">
  <div class="msg">
    <p>
      <span style="--i:0">J</span>
      <span style="--i:1">o</span>
      <span style="--i:2">i</span>
      <span style="--i:3">n</span>
      <span>&nbsp;</span>
      <span style="--i:4">T</span>
      <span style="--i:5">o</span>
      <span style="--i:6">d</span>
      <span style="--i:7">a</span>
      <span style="--i:8">y</span>
    </p>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 25 25"
      class="arrow"
    >
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <path
          stroke-width="1.2"
          stroke="#ffffff"
          d="M13 7L18.5 12.5L13 18M18.5 12.5H6"
        ></path>
      </g>
    </svg>
  </div>
</button>

<style>
/* From Uiverse.io by MetaBlue2000  - Tags: button */
.button {
  cursor: pointer;
  border-radius: 15px;
  border: solid 3px #a86bdd;
  width: 210px;
  height: 75px;
  transform: rotate3d(1, 1, 1, 335deg);
  padding-left: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(#bf76f9, #9a48dd);
  backdrop-filter: blur(2px, black);
  box-shadow: -8px 7px 1px #865ba9;
  transition: all 0.4s ease-in-out;
}

.arrow {
  padding: 5px;
  width: 55px;
  transition: all 0.4s ease-in-out;
}

.msg {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button:hover .arrow {
  transform: translateX(5px);
}

.button:hover {
  transform: translateX(10px);
}

.button p span {
  display: inline-block;
  opacity: 1;
  animation: slideDown 0.8s ease forwards calc(var(--i) * 0.03s);
}
.button:hover p span {
  opacity: 1;
  animation: wave 0.5s ease forwards calc(var(--i) * 0.02s);
}
@keyframes wave {
  30% {
    opacity: 1;
    transform: translateY(12px) translateX(0) rotate(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px) translateX(0) rotate(0);
    color: var(--primary);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
  }
}

</style>
    

================================================
FILE: Buttons/Mhyar-nsi_tiny-wasp-99.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by Mhyar-nsi - Tags: blue, button, hover, ring */
button {
  font-family: monospace;
  background-color: #f3f7fe;
  color: #3b82f6;
  border: none;
  border-radius: 8px;
  width: 100px;
  height: 45px;
  transition: .3s;
}

button:hover {
  background-color: #3b82f6;
  box-shadow: 0 0 0 5px #3b83f65f;
  color: #fff;
}

</style>


================================================
FILE: Buttons/Mike11jr_perfect-badger-81.html
================================================
<div class="scene">
  <div class="cube">
    <span class="side top">Easter</span>
    <span class="side front">Happy</span>
  </div>
</div>
<style>
/* From Uiverse.io by Mike11jr - Tags: button */
.scene {
 width: 10em;
 justify-content: center;
 align-items: center;
}

.cube {
 color: #ccc;
 cursor: pointer;
 font-family: 'Roboto', sans-serif;
 transition: all 0.85s cubic-bezier(.17,.67,.14,.93);
 transform-style: preserve-3d;
 transform-origin: 100% 50%;
 width: 10em;
 height: 4em;
}

.cube:hover {
 transform: rotateX(-90deg);
}

.side {
 box-sizing: border-box;
 position: absolute;
 display: inline-block;
 height: 4em;
 width: 10em;
 text-align: center;
 text-transform: uppercase;
 padding-top: 1.5em;
 font-weight: bold;
}

.top {
 background: wheat;
 color: #222229;
 transform: rotateX(90deg) translate3d(0, 0, 2em);
 box-shadow: inset 0 0 0 5px #fff;
}

.front {
 background: #222229;
 color: #fff;
 box-shadow: inset 0 0 0 5px #fff;
 transform: translate3d(0, 0, 2em);
}
</style>


================================================
FILE: Buttons/Mike11jr_soft-mayfly-11.html
================================================
<button class="btn">Hover Me!
</button>
<style>
/* From Uiverse.io by Mike11jr - Tags: button */
.btn {
 width: 130px;
 height: 40px;
 font-size: 1.1em;
 cursor: pointer;
 background-color: #171717;
 color: #fff;
 border: none;
 border-radius: 5px;
 transition: all .4s;
}

.btn:hover {
 border-radius: 5px;
 transform: translateY(-10px);
 box-shadow: 0 7px 0 -2px #f85959,
  0 15px 0 -4px #39a2db,
  0 16px 10px -3px #39a2db;
}

.btn:active {
 transition: all 0.2s;
 transform: translateY(-5px);
 box-shadow: 0 2px 0 -2px #f85959,
  0 8px 0 -4px #39a2db,
  0 12px 10px -3px #39a2db;
}
</style>


================================================
FILE: Buttons/Mike11jr_warm-zebra-80.html
================================================
<button class="btn"> Shop now
</button>
<style>
/* From Uiverse.io by Mike11jr - Tags: button */
.btn {
 padding: 1.1em 2em;
 background: none;
 border: 2px solid #fff;
 font-size: 15px;
 color: #131313;
 cursor: pointer;
 position: relative;
 overflow: hidden;
 transition: all 0.3s;
 border-radius: 12px;
 background-color: #ecd448;
 font-weight: bolder;
 box-shadow: 0 2px 0 2px #000;
}

.btn:before {
 content: "";
 position: absolute;
 width: 100px;
 height: 120%;
 background-color: #ff6700;
 top: 50%;
 transform: skewX(30deg) translate(-150%, -50%);
 transition: all 0.5s;
}

.btn:hover {
 background-color: #4cc9f0;
 color: #fff;
 box-shadow: 0 2px 0 2px #0d3b66;
}

.btn:hover::before {
 transform: skewX(30deg) translate(150%, -50%);
 transition-delay: 0.1s;
}

.btn:active {
 transform: scale(0.9);
}
</style>


================================================
FILE: Buttons/Mike11jr_white-emu-65.html
================================================
<button class="btn"> Hover Me!
</button>
<style>
/* From Uiverse.io by Mike11jr - Tags: button */
.btn {
 padding: 0.9em 1.9em;
 font-size: 16px;
 border: none;
 background: #6285f8;
 color: white;
 cursor: pointer;
 position: relative;
 z-index: 1;
}

.btn:hover {
 color: rgb(255, 255, 255);
}

.btn::before,.btn::after {
 content: "";
 position: absolute;
 top: 0%;
 left: 0%;
 width: 100%;
 height: 100%;
 background: rgba(128, 128, 128, 0.096);
 backdrop-filter: blur(10px);
 z-index: -1;
 transition: all 0.4s;
}

.btn::after {
 z-index: -2;
 transition: all 0.4s;
}

.btn:hover::before {
 background: rgb(0, 0, 0, 0.315);
 border-radius: 10px;
}

.btn:hover::after {
 background: linear-gradient(to right, #cb6ce6, #38b6ff);
 border-radius: 10px;
 transform: scale(1.07, 1.2) rotateX(180deg);
}
</style>


================================================
FILE: Buttons/MikeAndrewDesigner_evil-snake-57.html
================================================
<button class="button">
<div id="ui">UI</div>VERSE</button>
<style>
/* From Uiverse.io by MikeAndrewDesigner - Tags: button, creative, cool btn */
#ui {
  font-weight: bolder;
  background: -webkit-linear-gradient(#B563FF, #535EFC, #0EC8EE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(0.25turn, #535EFC, #0EC8EE, #0EC8EE);
  border-image-slice: 1;
  display: inline;
}

.button {
  position: relative;
  padding: 20px 30px;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-weight: 00;
  cursor: pointer;
  font-size: 1.5em;
  font-weight: 600;
  background-color: #2c2c2c;
  transition: all 0.2s ease;
}

.button:hover {
  background: linear-gradient(144deg, #1e1e1e , 20%,#1e1e1e 50%,#1e1e1e );
  transition: all 0.2s ease;
  color: #fff;
}

.button:active {
  transform: scale(0.96);
}

.button:before,
.button:after {
  position: absolute;
  content: "";
  width: 150%;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1000;
  background-repeat: no-repeat;
}

.button:hover:before {
  top: -70%;
  background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #7d2ae8 20%, transparent 30%),
    radial-gradient(circle, #535EFC 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
    radial-gradient(circle, #0EC8EE 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #0EC8EE 20%, transparent 20%),
    radial-gradient(circle, #0EC8EE 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
  background-position: 50% 120%;
  animation: greentopBubbles 0.6s ease;
}

@keyframes greentopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }

  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
      50% 50%, 65% 20%, 90% 30%;
  }

  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

.button:hover::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #535EFC 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
    radial-gradient(circle, #535EFC 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #535EFC 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 50% 0%;
  animation: greenbottomBubbles 0.6s ease;
}

@keyframes greenbottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
      70% -10%, 70% 0%;
  }

  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
      105% 0%;
  }

  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
      110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
</style>


================================================
FILE: Buttons/Mini-khamasino_cowardly-parrot-21.html
================================================
<button class="button">
  <div class="ellipse">
    <span class="icon"
      ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
        <path
          d="M429.6 92.1c4.9-11.9 2.1-25.6-7-34.7s-22.8-11.9-34.7-7l-352 144c-14.2 5.8-22.2 20.8-19.3 35.8s16.1 25.8 31.4 25.8H224V432c0 15.3 10.8 28.4 25.8 31.4s30-5.1 35.8-19.3l144-352z"
        ></path></svg
    ></span>
    <span class="text1"> Send message </span>
    <span class="text2"> Send </span>
  </div>
</button>

<style>
/* From Uiverse.io by Mini-khamasino  - Tags: simple, animation, button */
.button {
  background-color: rgb(236, 235, 235);
  width: 170px;
  height: 50px;
  border-radius: 10px;
  border: 0.1px solid rgb(179, 178, 178);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 3px 7px rgb(97, 97, 97);
  cursor: pointer;
}
.ellipse {
  position: relative;
  padding-top: 10px;
  width: 160px;
  height: 40px;
  border-radius: 25px;
  border: 0px;
  background-image: linear-gradient(rgb(218, 217, 217), rgb(250, 250, 250));
  box-shadow: 0px 4px 5px rgb(231, 231, 231);
  cursor: pointer;
  font-size: medium;
}
.icon {
  position: absolute;
  width: 18px;
  left: 8%;
  transition-duration: 0.5s;
}

.button:hover .icon {
  left: 80%;
  transform: rotate(45deg);
  fill: rgb(22, 219, 101);
}

.text2 {
  position: absolute;
  left: 30%;
  top: 27%;
  font-weight: bold;
  color: rgb(22, 219, 101, 0);
  letter-spacing: 3px;
  transition: color 0.3s;
}

.button:hover .text1 {
  color: rgb(255, 255, 255, 0);
  transition-duration: 0.3s;
}

.text1 {
  width: 70%;
  position: absolute;
  font-size: 15px;
  left: 24%;
  transition-duration: 1s;
}

.button:hover .text2 {
  color: rgb(22, 219, 101);
  letter-spacing: 3px;
  transition-duration: 0.5s;
}

</style>
    

================================================
FILE: Buttons/Mohammad-Rahme-576_spicy-grasshopper-17.html
================================================
<button class="button">Join Today ➞</button>

<style>
/* From Uiverse.io by Mohammad-Rahme-576  - Tags: button */
.button {
  position: relative;
  padding: 15px 30px; /* Button padding */
  font-size: 18px; /* Button font size */
  font-weight: bold;
  color: #ffffff; /* Text color */
  background: #8a2be2; /* Purple background */
  border: 2px solid #8a2be2;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow:
    0 0 10px #8a2be2,
    0 0 20px #4b0082,
    0 0 30px #da70d6;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: "Arial", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-size: 200% 200%;
  animation:
    gradientShift 5s ease infinite,
    pulse 2s infinite;
  isolation: isolate;
}

.button::before,
.button::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, #e6e6fa 20%, transparent 70%);
  opacity: 0;
  transition:
    opacity 0.3s,
    transform 0.3s;
  pointer-events: none;
}

.button::before {
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.6s;
  z-index: -1;
}

.button::after {
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(218, 112, 214, 0.8) 25%,
    rgba(138, 43, 226, 0.8) 50%,
    rgba(218, 112, 214, 0.8) 75%,
    transparent 100%
  );
  filter: blur(5px);
  transform: translateX(-100%) rotate(45deg);
}

.button:hover {
  background: linear-gradient(
    135deg,
    #8a2be2,
    #4b0082
  ); /* Gradient background on hover */
  transform: scale(1.05) translateY(-3px) rotateY(10deg);
  box-shadow:
    0 0 20px #8a2be2,
    0 0 40px #4b0082,
    0 0 60px #da70d6;
  perspective: 1000px;
  border-color: rgba(218, 112, 214, 0.5);
  filter: brightness(1.1) contrast(1.1);
  animation:
    gradientShift 5s ease infinite,
    pulse 2s infinite,
    gradientBorder 2s linear infinite;
}

.button:hover::before {
  opacity: 0.3;
  transform: translateX(100%);
  animation: pulseGlow 2s infinite;
}

.button:hover::after {
  opacity: 0.5;
  animation: shineEffect 1.5s infinite;
}

.button:active {
  transform: scale(0.98) translateY(2px);
  box-shadow:
    0 0 10px rgba(138, 43, 226, 0.6),
    0 0 20px rgba(138, 43, 226, 0.4) inset;
}

.button span {
  position: relative;
  z-index: 1;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
}

.button:hover span {
  animation:
    textGlow 1.5s infinite alternate,
    textFloat 0.3s ease-out;
}

@keyframes pulseGlow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

@keyframes shineEffect {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

@keyframes ripple {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
  100% {
    transform: scale(0.8);
  }
}

@keyframes textGlow {
  0% {
    text-shadow: 0 0 5px #e6e6fa;
  }
  100% {
    text-shadow:
      0 0 20px #e6e6fa,
      0 0 35px #da70d6;
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes focusPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 4px rgba(138, 43, 226, 0.4),
      0 0 30px rgba(218, 112, 214, 0.6);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(138, 43, 226, 0.2),
      0 0 40px rgba(218, 112, 214, 0.4);
  }
}

@keyframes textFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes particleBurst {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

@keyframes gradientBorder {
  0% {
    border-color: rgba(218, 112, 214, 0.5);
  }
  50% {
    border-color: rgba(138, 43, 226, 0.5);
  }
  100% {
    border-color: rgba(218, 112, 214, 0.5);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.button:focus {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(138, 43, 226, 0.4),
    0 0 30px rgba(218, 112, 214, 0.6);
  animation: focusPulse 1.5s infinite;
}

.button:focus-visible {
  outline: 2px solid #da70d6;
  outline-offset: 2px;
}

.button:active::before {
  opacity: 1;
  transform: translateX(0) rotate(45deg);
  transition: transform 0.2s;
}

.button:active::before {
  animation: particleBurst 0.5s ease-out;
}

.button {
  border: 2px solid transparent;
  background-clip: padding-box;
}

@media (max-width: 768px) {
  .button {
    padding: 12px 24px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .button {
    padding: 10px 20px;
    font-size: 14px;
  }
}

@media (min-width: 1200px) {
  .button {
    padding: 18px 36px;
    font-size: 20px;
  }
}

</style>
    

================================================
FILE: Buttons/Mohsinech_tidy-yak-66.html
================================================
<div class="btn"><span data-text="Click me">Click me</span></div>

<style>
/* From Uiverse.io by Mohsinech  - Tags: black, button, click */
.btn {
  background: transparent;
  border: 1px solid #141414;
  outline: none;
  padding: 12px 40px;
  height: 60px;
  border-radius: 100px;
  overflow: hidden;
  transform: scaleX(1);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.btn:hover {
  animation: animate-scaleX 0.6s cubic-bezier(0.4, 0, 0, 1);
  background: transparent;
}

.btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background: black;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0, 1),
    border-radius 0.5s cubic-bezier(0.4, 0, 0, 1);
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 0 0;
  transform: translateY(100%);
}

.btn:hover::after {
  transform: translateY(0%);
  border-radius: 0;
}

.btn span {
  font-size: 20px;
  font-weight: 500;
  overflow: hidden;
  position: relative;
  color: black;
}

.btn span:after {
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0, 1);
  content: attr(data-text);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  transform: translate(-50%, 100%);
  color: white;
}
.btn:hover span:after {
  transform: translate(-50%, 0);
}

.btn:focus {
  outline: none;
}

@keyframes animate-scaleX {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(1.05);
  }
  100% {
    transform: scaleX(1);
  }
}

</style>
    

================================================
FILE: Buttons/MopokD71304_lazy-husky-72.html
================================================
<div class="nav_bar">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3_h"></div>
  <div class="bar4"></div>
</div>

<style>
/* From Uiverse.io by MopokD71304  - Tags: simple, button, advanced, input effect  */
.nav_bar {
  background-color: rgb(27, 27, 27);
  position: relative;
  display: flex;
  transition: 0.4s;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 15px 15px;
  border-radius: 15px;
}

.bar1 {
  border-radius: 30px;
  background-color: rgb(255, 255, 255);
  width: 50px;
  margin-bottom: 15px;
  transition: 0.4s;
  height: 5px;
}

.bar2 {
  border-radius: 30px;
  background-color: rgb(255, 255, 255);
  width: 50px;
  position: absolute;
  transition: 0.4s;
  height: 5px;
}

.bar3_h {
  border-radius: 30px;
  background-color: rgb(255, 255, 255);
  width: 50px;
  transition: 0.4s;
  height: 5px;
}

.bar4 {
  border-radius: 30px;
  background-color: rgb(255, 255, 255);
  width: 50px;
  margin-top: 15px;
  transition: 0.4s;
  height: 5px;
}

.nav_bar:hover {
  border-radius: 50px;
}
.nav_bar:hover .bar3_h {
  transform: rotate(-45deg);
}
.nav_bar:hover .bar2 {
  transform: rotate(45deg);
}

.nav_bar:hover .bar1 {
  opacity: 0;
  width: 30px;
}
.nav_bar:hover .bar4 {
  opacity: 0;
  width: 30px;
}

</style>
    

================================================
FILE: Buttons/Muhammad-Usman-911_heavy-moose-44.html
================================================
<a class="codepen-button"
  ><span class="span"
    ><p class="p">Shop</p>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="1em"
      viewBox="0 0 576 512"
      fill="#000"
      class="cart"
    >
      <path
        d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"
      ></path></svg></span
></a>

<style>
/* From Uiverse.io by Muhammad-Usman-911  - Website: https://uiverse.io/SelfMadeSystem/strange-cobra-12 - Name: SelfMadeSystem - Tags: button */
.codepen-button {
  font-family: monospace;
  font-weight: bolder;
  display: block;
  cursor: pointer;
  color: #000;
  margin: 0 auto;
  position: relative;
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
  overflow: hidden;
  padding: 3px;
  width: 130px;
  isolation: isolate;
  transform: scale(0.85);
}

.codepen-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 420%;
  height: 120%;
  background: linear-gradient(
    115deg,
    #628fbc,
    hsl(0, 93%, 73%),
    #f032a7,
    #329af0,
    #f032a7
  );
  background-size: 25% 100%;
  animation: border-animation 0.75s linear infinite;
  animation-play-state: paused;
  translate: -5% 0%;
  transition: translate 0.25s ease-out;
}

.codepen-button:hover::before {
  animation-play-state: running;
  transition-duration: 0.75s;
  translate: 0% 0%;
}

@keyframes border-animation {
  to {
    transform: translateX(-25%);
  }
}

.codepen-button span {
  position: relative;
  display: block;
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  background: #fff;
  border-radius: 3px;
  height: 100%;
}

.codepen-button .span {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 10px;
}

.codepen-button .p {
  margin: 0;
}

</style>
    

================================================
FILE: Buttons/MuhammadHasann_average-ape-81.html
================================================
<button>
  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 19.18 20.17" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><g id="_2478177736128"><path class="fil0" d="M9.59 20.17c-2.99,-1.91 -4.97,-2.73 -7.95,-3.34 -0.44,-3.75 -0.99,-6.77 -1.64,-8.96 4.01,0.22 7.06,0.94 9.59,3.14 0,4.34 0,4.81 0,9.16z"></path><path class="fil1" d="M9.59 20.17c2.99,-1.91 4.97,-2.73 7.95,-3.34 0.44,-3.75 0.99,-6.77 1.64,-8.96 -4.01,0.22 -7.06,0.94 -9.59,3.14 0,4.34 0,4.81 0,9.16z"></path><path class="fil2" d="M9.66 10.55c0,0 2.92,-3.03 8.68,-3.05 0,0 0.01,-0.55 0.29,-1 0,0 -6.73,0.43 -8.97,4.05zm-0.13 0c0,0 -2.92,-3.03 -8.68,-3.05 0,0 -0.01,-0.55 -0.29,-1 0,0 6.73,0.43 8.97,4.05z"></path><path class="fil0" d="M9.33 0.92l0.88 0.15 0.42 -0.8 0.12 0.89 0.88 0.15 -0.81 0.4 0.12 0.89 -0.62 -0.65 -0.81 0.4 0.42 -0.8 -0.62 -0.64zm2.06 3.05c0.1,0 0.18,0.08 0.18,0.18 0,0.1 -0.08,0.18 -0.18,0.18 -0.1,0 -0.18,-0.08 -0.18,-0.18 0,-0.1 0.08,-0.18 0.18,-0.18zm-7.43 -0.4c0.12,0 0.22,0.05 0.3,0.12 0.08,0.08 0.12,0.18 0.12,0.3 0,0.12 -0.05,0.22 -0.12,0.3 -0.08,0.08 -0.18,0.12 -0.3,0.12 -0.12,0 -0.22,-0.05 -0.3,-0.12 -0.08,-0.08 -0.12,-0.18 -0.12,-0.3 0,-0.12 0.05,-0.22 0.12,-0.3 0.08,-0.08 0.18,-0.12 0.3,-0.12zm0.25 0.18c-0.06,-0.06 -0.15,-0.1 -0.25,-0.1 -0.1,0 -0.18,0.04 -0.25,0.1 -0.06,0.06 -0.1,0.15 -0.1,0.25 0,0.1 0.04,0.18 0.1,0.25 0.06,0.06 0.15,0.1 0.25,0.1 0.1,0 0.18,-0.04 0.25,-0.1 0.06,-0.06 0.1,-0.15 0.1,-0.25 0,-0.1 -0.04,-0.18 -0.1,-0.25zm3.36 -0.16c0.23,0 0.43,0.09 0.58,0.24 0.15,0.15 0.24,0.35 0.24,0.58 0,0.23 -0.09,0.43 -0.24,0.58 -0.15,0.15 -0.35,0.24 -0.58,0.24 -0.23,0 -0.43,-0.09 -0.58,-0.24 -0.15,-0.15 -0.24,-0.35 -0.24,-0.58 0,-0.23 0.09,-0.43 0.24,-0.58 0.15,-0.15 0.35,-0.24 0.58,-0.24zm0.47 0.35c-0.12,-0.12 -0.29,-0.2 -0.47,-0.2 -0.18,0 -0.35,0.07 -0.47,0.2 -0.12,0.12 -0.2,0.29 -0.2,0.47 0,0.18 0.07,0.35 0.2,0.47 0.12,0.12 0.29,0.2 0.47,0.2 0.18,0 0.35,-0.07 0.47,-0.2 0.12,-0.12 0.2,-0.29 0.2,-0.47 0,-0.18 -0.07,-0.35 -0.2,-0.47z"></path><path class="fil3" d="M6.75 1.49c0.18,0 0.33,0.15 0.33,0.33 0,0.18 -0.15,0.33 -0.33,0.33 -0.18,0 -0.33,-0.15 -0.33,-0.33 0,-0.18 0.15,-0.33 0.33,-0.33zm2.37 4.79l0.45 0.52 0.64 -0.27 -0.37 0.58 0.45 0.52 -0.67 -0.16 -0.36 0.59 -0.05 -0.68 -0.67 -0.16 0.64 -0.26 -0.05 -0.68zm6.92 -5.91l0.9 0.38 0.64 -0.75 -0.09 0.98 0.9 0.37 -0.95 0.23 -0.09 0.98 -0.5 -0.84 -0.95 0.23 0.65 -0.74 -0.5 -0.83z"></path></g></g></svg>
  </div>
</button>
<style>
/* From Uiverse.io by MuhammadHasann - Tags: button */
button {
  position: relative;
  padding: 13px 35px;
  background: transparent;
  font-size: 17px;
  font-weight: 900;
  border: none;
  transition: all .3s ease-in-out;
}

button::after {
  content: "Read More";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 155px;
  height: 47px;
  background-color: #ffffff;
  font-size: 17px;
  font-weight: 900;
  line-height: 47px;
  color: #181818;
  border: 2px solid #181818;
  border-radius: 50px;
  transition: all .3s ease-in-out;
  z-index: 2;
}

button:hover::after {
  width: 165px;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
}

button:focus::after {
  content: "Read less";
  top: 200%;
  width: 155px;
  height: 47px;
  font-size: 17px;
  line-height: 47px;
  z-index: -2;
  pointer-events: none;
}

.icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 20px;
  height: auto;
  z-index: -3;
  transition: all .3s ease-in-out;
}

button:focus .icon {
  top: -250%;
  width: 75px;
  height: auto;
}

.fil0 {
  fill: #333333
}

.fil2 {
  fill: #222222
}

.fil1 {
  fill: #181818
}

.fil3 {
  fill: #181818
}
</style>


================================================
FILE: Buttons/MuhammadHasann_calm-quail-31.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by MuhammadHasann - Tags: button */
button {
  position: relative;
  padding: 13px 35px;
  background: #6d7973;
  font-size: 17px;
  font-weight: 900;
  color: #ffffff;
  border: 2px solid #6d7973;
  border-radius: 25px;
  transition: all .3s ease-in-out;
}

button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 124px;
  height: 45px;
  border: 3px solid #6d7973;
  border-radius: 25px;
  transition: all .3s ease-in-out;
  z-index: 2;
}

button:hover::after {
  animation: radar_45011 1s ease infinite .3s;
}

@keyframes radar_45011 {
  from {
    opacity: 1;
    width: 124px;
    height: 45px;
    border-radius: 25px;
  }

  to {
    opacity: 0;
    width: 470px;
    height: 220px;
    border-radius: 150px;
  }
}

button:active {
  transform: scale(.9);
}
</style>


================================================
FILE: Buttons/MuhammadHasann_dull-mole-2.html
================================================
<button class="button">
  <span class="text-button">Get pro now</span>
</button>

<style>
/* From Uiverse.io by MuhammadHasann  - Tags: simple, subscription, purple, button, button hover effect  */
:root {
  --primary: rgb(122, 48, 143);
  --light: rgb(199, 95, 228);
  --text-color: rgb(184, 132, 199);
}

.button {
  overflow: hidden;
  cursor: pointer;
  position: relative;
  padding: 0.5rem 1.5rem;
  width: fit-content;
  height: fit-content;
  background-color: rgb(122, 48, 143);
  font-size: 0.75rem;
  color: white;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 2px 1px rgb(122, 48, 143);
  transition: all 0.5s cubic-bezier(1, 0, 0, 1);
}

.button .text-button {
  position: relative;
  z-index: 10;
}

.button::before,
.button::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
}
.button::before {
  left: 0;
  background-image: radial-gradient(
    circle at 0% 45%,
    rgba(16, 5, 36, 1) 19%,
    rgba(16, 5, 36, 0.26) 46%,
    rgba(16, 5, 36, 0) 100%
  );
}
.button::after {
  right: 0;
  background-image: radial-gradient(
    circle at 100% 45%,
    rgba(16, 5, 36, 1) 19%,
    rgba(16, 5, 36, 0.26) 46%,
    rgba(16, 5, 36, 0) 100%
  );
}

.button:hover {
  box-shadow: 0px 0px 20px 0 rgb(122, 48, 143);
}

.button:hover::before,
.button:hover::after {
  width: 0;
  opacity: 0;
}

</style>
    

================================================
FILE: Buttons/MuhammadHasann_great-fish-88.html
================================================
<button>Plant based
  <div class="icon-1">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 208.52 511.88" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-leaf-1" d="M121.86 141.25c16.73,2.91 65.77,9.16 77.74,-14.94 14.49,-29.19 12.6,-56.91 -15.12,-69.09 -11.3,-4.96 -22.28,-7.7 -32.28,-9.66 -24.58,24.72 -41.22,75.51 -43.83,83.82 4.31,3.56 8.81,6.86 13.49,9.87zm-17.26 41.05c2.87,7.92 8.26,29.59 7.63,79.7 -0.16,12.74 -0.48,25.41 -0.81,38.43 -1.4,55.59 -2.96,117.52 7.12,210.69l-7.09 0.75c-10.12,-93.56 -8.56,-155.77 -7.15,-211.61 0.33,-13.06 0.65,-25.77 0.81,-38.35 0.53,-42.42 -3.06,-63.29 -5.69,-72.77 -7.55,8.48 -18.48,15.07 -34.33,16.54 -26.77,2.47 -43.19,-16.99 -52.84,-36.58 16.49,-8.49 65.65,-32.22 98.27,-31.47 1.86,1.42 3.76,2.8 5.69,4.13 -0.15,5.56 -1.43,24.61 -11.62,40.53zm-41.18 -148.65c-0.32,0.84 1.68,9.87 -6.19,10.71 -7.87,0.84 -3.26,-5.14 -6.82,-7.98 -3.57,-2.84 -9.97,-14.59 1.99,-15.96 11.97,-1.37 11.02,13.23 11.02,13.23zm124.63 55.54c0,0 -3.89,14.8 -10.18,18.69 -6.3,3.88 -22.78,7.24 -28.87,0.11 -6.09,-7.14 -1.57,-31.71 17.64,-30.45 19.21,1.26 22.68,8.4 21.42,11.65zm-101.53 67.51c0,0 5.88,5.56 5.46,9.87 -0.42,4.3 -5.78,19.21 -14.07,20.05 -8.29,0.84 -24.15,-6.82 -21.84,-17.53 2.31,-10.71 10.5,-11.34 12.6,-10.6 2.1,0.74 3.36,2.1 17.85,-1.78zm61.49 -109.94c-12.74,-2.33 -23.63,-3.69 -31.15,-7.4 0,0 -2.41,15.22 -4.51,19.74 -2.1,4.51 -6.3,17.32 -14.8,21.1 -8.5,3.78 -9.87,-28.14 4.62,-45.15 0,0 -10.13,-4.4 -22.34,-9.92 -11.47,31.21 -7.3,64.58 -7.28,64.68l-0.48 0.06c9.73,14.77 20.76,28.04 33.37,39.01 3.68,-11.43 19.48,-57.46 42.58,-82.12zm-71.44 -23.1c-16.59,-7.55 -35.59,-16.58 -38.25,-19.47 -1.97,-2.14 -4.87,-3.72 -7.63,-4.2 9.11,27.4 20.23,54.59 34.36,78.62 1.13,1.92 2.28,3.82 3.45,5.7 -0.66,-11.21 -0.85,-36.56 8.07,-60.65zm-49.59 -23.57c-2.34,0.66 -4.05,2.62 -4.09,6.41 -0.1,9.45 -9.03,35.38 -9.03,35.38 0,0 33.07,14.91 22.99,23.1 -10.08,8.19 -25.41,-8.5 -26.35,-9.34 0,0 -5.94,16.24 -8.44,35.85 11.53,-1.14 38.81,-2.11 72.53,8.35 -4.45,-6.19 -8.65,-12.68 -12.61,-19.42 -14.44,-24.56 -25.77,-52.36 -35.01,-80.32zm-25.33 95.01c-0.61,6.01 -0.86,12.26 -0.49,18.39 0,0 56.17,-9.87 57.33,8.71 1.15,18.58 -58.48,9.45 -58.48,9.45 0,0 2.71,16.68 10.73,34.23 16.07,-8.25 62.14,-30.45 95.29,-31.76l-1.75 -1.5 0.01 -0.03c-9.54,-8.13 -18.2,-17.54 -26.08,-27.89l-0.01 0.04c-36.16,-12.16 -65.36,-10.82 -76.53,-9.63z"></path></g></svg>
  </div>
  <div class="icon-2">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 420.62 554.38" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-leaf-2" d="M1.57 554.38c-0.01,-0.44 -2.46,-153.75 -1.23,-217.01 0.74,-38.16 6.99,-96.57 32.48,-148.36 17.72,-36 44.66,-68.8 85.37,-89.54l32.28 -4.39c21.9,-6.8 39.46,-7.7 45.04,-7.81 4.32,4.98 10.37,12.18 17.72,21.54 -0.39,10.62 -6.13,113.86 -82.32,208.5 -31.36,-18.46 -51.28,-57.42 -51.28,-57.42 52.13,-30.97 58.88,-51.52 69.61,-68.07 10.73,-16.56 2.45,-44.16 -11.65,-26.06 -14.11,18.09 -65.01,68.07 -65.01,68.07 -12.27,-87.7 33.12,-110.39 33.12,-110.39l0.34 -0.64c-27.64,18.92 -47.12,44.59 -60.77,72.35 -24.37,49.53 -30.35,105.69 -31.07,142.44 -1.22,63.07 1.22,216.14 1.23,216.58l-13.85 0.22zm216.49 -439.34c17.47,22.75 40.96,56.05 66.08,99.4 0.27,13.62 0.62,100.64 -33.48,153.85 -24.85,-9.4 -40.14,-15.03 -40.14,-15.03 12.57,-11.04 46.61,-87.09 23.3,-91.68 -23.3,-4.6 -47.99,84.63 -47.99,84.63 -21.55,-10.35 -42.58,-21.94 -50.33,-26.28 68.93,-86.04 80.61,-179.05 82.56,-204.89zm71.3 108.53c28.78,50.84 59.27,114.6 85.02,190.51 -4.31,0.96 -8.4,-1.03 -8.4,-1.03 -42.77,-17.04 -82,-32.13 -110.36,-42.88 29.72,-47.26 33.46,-119.21 33.74,-146.6zm106.95 70.68c0,0 -16.4,-14.1 -20.54,-22.84 -4.14,-8.74 -15.18,-3.68 -13.95,4.29 1.23,7.97 11.5,45.69 12.27,51.21 0.77,5.52 20.08,6.13 21,-1.99 0.92,-8.13 2.76,-23.61 1.23,-30.66zm-88.46 28.98c0,0 -8.43,4.29 -7.51,15.49 0.92,11.19 10.89,28.36 18.09,30.66 7.21,2.3 18.7,-25.14 -10.58,-46.15zm-109.42 -240.52c15.35,-63.34 56.21,-82.7 93.65,-82.7 38.33,0 65.31,22.23 65.31,22.23 0,0 -11.65,13.03 -33.42,13.95 -21.77,0.92 -28.52,11.65 -28.98,16.41 -0.46,4.75 1.53,16.25 32.35,18.24 30.82,1.99 55.19,-25.14 55.19,-25.14 16.95,23.84 26.52,45.94 31.83,64.51 -16.87,6.83 -73.84,22.75 -197.04,-4.57 -8.01,-10.2 -14.48,-17.86 -18.9,-22.93zm217.3 32.51c7.8,30.68 3.91,50.53 3.91,50.53 -55.65,4.45 -56.73,-5.98 -77.73,-6.59 -21,-0.61 -22.69,28.06 14.41,34.19 37.1,6.13 63.01,-1.99 63.01,-1.99 -1.13,20.07 -2.53,38.3 -4.11,54.87 -17.3,-0.51 -66.77,-6.48 -137.23,-52.73l-0.13 0.2c-21.09,-34.73 -40.52,-62.06 -55.57,-81.67 118.17,25.28 175.11,10.36 193.44,3.2zm-1.01 136.18c-10.45,105.02 -28.21,141.06 -31.88,153.37 -0.95,3.17 -2.29,5.35 -3.82,6.82 -27.16,-79.89 -59.57,-146.38 -89.72,-198.56l-0.02 -0.57 -0.3 0.01c-1.8,-3.11 -3.59,-6.18 -5.38,-9.19 66.28,41.51 113.43,47.51 131.12,48.12z"></path></g></svg>
  </div>
  <div class="icon-3">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 313.64 405.79" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-leaf-3" d="M268.76 135.61c0,0 -22.17,11.9 -50.23,28.92 -21.12,-5.52 -82.36,-27.74 -81.95,-100.04l-0.14 -0.02c3.32,-12.49 5.48,-21.39 6.11,-24.05 10.61,-20.2 38.05,-50.12 105.57,-37.36 98.73,18.65 57.69,95.74 53.71,98.23 -3.98,2.49 -21.39,6.71 -72.86,-30.59 0,0 -18.15,-14.17 -21.88,12.68 -3.73,26.86 48.99,48.99 61.68,52.23zm-6.57 270.17c-0.06,-0.43 -20.14,-148.39 -56.4,-233.41 -9.42,5.88 -19.19,12.19 -28.79,18.69 0,0 -17.41,-10.44 -27.6,-29.59 -10.2,-19.15 -5.22,-21.76 -13.43,-22.26 -8.21,-0.5 -5.1,34.69 19.52,64.78 0,0 -13.7,11.34 -26.34,23.33 -5.68,-9.69 -18.35,-34.11 -23.43,-66.68l-0.05 -0.01c0.31,-0.8 0.62,-1.59 0.93,-2.38 10.57,-26.8 19.85,-57.53 26.36,-81.01 6.01,61.39 57.45,83.42 80.65,90.27 37.09,86.22 59.66,236.37 59.72,236.8l-11.15 1.45zm-136.16 -175.46c-7.88,7.66 -14.84,15.23 -17.05,19.93 0,0 -7.21,-23.75 -14.42,-18.65 -7.21,5.1 2.11,32.08 2.11,36.8 0,0 -17.66,31.83 -20.89,34.57 -0.83,0.7 -1.66,1.24 -2.49,1.6 -0.23,-13.47 2.61,-34.23 7.4,-57.21 5.42,-26.02 13.33,-54.79 22.1,-79.02 5.96,30.61 18.04,53.25 23.24,61.99zm-56.93 74.37c-0.87,-0.37 -1.72,-1.02 -2.52,-1.97 -2.74,-3.23 -15.17,-25.61 -15.17,-25.61 0,0 6.22,-19.03 15.17,-32.95 8.95,-13.93 -5.84,-15.67 -10.82,-7.21 -4.97,8.46 -12.56,24.74 -12.56,24.74 0,0 -6.31,-12.32 -13.32,-27.52 29.11,-16 53.59,-43.62 66.24,-59.59 -7.75,22.68 -14.67,48.42 -19.56,71.93 -4.83,23.18 -7.69,44.25 -7.46,58.19zm-40.98 -74.37c-7.17,-15.81 -14.58,-33.78 -16.38,-44.11 0,0 40.04,-13.68 46.01,-27.11 5.97,-13.43 -12.68,-19.4 -51.23,4.48 0,0 -7.71,-17.19 -6.37,-43.78 66.5,2.13 113.04,-29.91 128.31,-42.15 -6.46,23.16 -15.53,53 -25.8,79.07 -0.57,1.44 -1.13,2.91 -1.7,4.39 -5.54,7.86 -35.3,48.46 -72.84,69.21zm-27.68 -114.74c0.71,-8.36 2.33,-17.55 5.34,-27.35 0,0 47.75,5.84 50.36,-10.57 2.61,-16.41 -41.28,-5.84 -41.28,-5.84 0,0 25.99,-35.56 60.3,-33.82 28.82,1.46 52.37,13.88 59.18,17.82 -1.11,4.27 -2.41,9.2 -3.89,14.62 -5.75,5.22 -54.72,47.49 -130.01,45.14z"></path></g></svg>
  </div>
  <div class="icon-4">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 359.65 724.72" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-leaf-4" d="M251.9 132.52c5.01,7.69 14.83,26.38 10.9,50 12.23,19.64 25.84,44.23 37.91,76.21 15.43,40.91 28.34,93.9 32.59,164.05 8.43,139.15 26.3,300.52 26.36,300.99l-8.9 0.95c-0.05,-0.47 -17.95,-162.05 -26.39,-301.41 -4.19,-69.11 -16.87,-121.23 -32.03,-161.42 -10.46,-27.74 -22.12,-49.81 -32.97,-67.87 -11.69,25.15 -46.54,32.88 -60.3,31.22 0,0 7.39,-21.36 26.38,-35.61 18.99,-14.24 -34.02,-32.18 -48.79,33.5 0,0 -17.36,-0.38 -44.69,-16.34 11.21,-15.23 54.9,-71.68 91.8,-79.27 13.37,2.8 23.04,4.3 28.14,5zm-123.8 71.95c-11.63,-7.19 -24.9,-17.14 -39.29,-30.93 0,0 33.76,-24 51.43,-32.18 3.94,-1.82 6.23,-3.74 7.22,-5.53 0.4,-0.74 0.59,-1.45 0.57,-2.14 -0.14,-5.14 -11.54,-8.37 -24.93,-3.67 -19.52,6.86 -41.67,17.93 -50.64,27.17 0,0 -14.95,-14.16 -27.28,-30.46 13.73,-5.9 46.68,-16.9 105.36,-19.32 1.37,0.46 2.74,0.91 4.09,1.36 23.42,7.71 43.79,13.08 60.01,16.77 -36.68,13.59 -76.29,64.98 -86.55,78.94zm-85.63 -81.43c-0.55,-0.76 -1.08,-1.53 -1.61,-2.3 -3.4,-4.95 -6.39,-9.96 -8.49,-14.72 0,0 8.59,-1.25 17.61,-3.44 10.4,-2.52 21.36,-6.28 20.37,-10.8 -0.81,-3.7 -4.42,-6.8 -10.79,-8.26 -8.15,-1.86 -20.83,-1.06 -38,4.57 0,0 -20.04,-38.77 -21.36,-44.84 -0.46,-2.1 -0.09,-3.88 0.82,-5.27 21.98,13.27 43.46,24.73 64.03,34.61 26.53,12.75 51.57,22.88 74.23,30.91 -53.49,3.36 -83.97,13.91 -96.81,19.53zm-37.55 -87.92c1.59,-0.53 3.43,-0.65 5.29,-0.31 5.8,1.06 22.42,11.6 51.17,8.44 0,0 5.79,9.17 11.47,13.81 1.59,1.3 3.18,2.25 4.62,2.54 5.68,1.14 7.25,-7.71 1.67,-15.07 -0.9,-1.18 -1.98,-2.33 -3.26,-3.39 0,0 2.1,-0.44 5.61,-1.29 3.8,-0.92 9.25,-2.33 15.46,-4.19 14.66,33.07 29.11,52.04 37.62,61.42 -20.84,-7.6 -43.57,-16.96 -67.53,-28.47 -19.97,-9.59 -40.81,-20.68 -62.13,-33.48zm96.34 -0.79c8.37,-2.65 17.67,-6.03 26.06,-10.07 0,0 7.91,43.25 34.29,54.07 0,0 0.41,0.11 1.05,0.18 3.11,0.38 11.59,0.1 4.32,-16.31l-0.1 -0.23c-8.97,-20.04 -20.57,-40.88 -21.36,-45.89 0,0 15.49,-6.72 36.74,-11.5l1.33 -0.3c2.14,70.96 19.13,103.97 27.19,115.76 -15.3,-3.61 -33.91,-8.65 -55,-15.61 -1.04,-0.34 -2.1,-0.69 -3.15,-1.05l0.05 -0.46 -6.39 -1.7 -1.85 -0.64c-3.65,-3.1 -23.05,-20.99 -43.18,-66.26zm86.77 -30.97c8.74,-1.72 18.24,-3.02 27.9,-3.37 0,0 -7.65,53.01 14.24,63.3 0,0 17.41,7.91 6.33,-60.93 0,0 48,6.33 46.95,59.34 -0.91,45.76 -25.8,62.44 -32.59,66.14 -5.12,-0.73 -13.59,-2.1 -24.84,-4.43l-0.01 -0.77 -7.74 -0.89 -0.69 -0.15c-4.02,-4.5 -27.19,-33.99 -29.55,-118.24z"></path></g></svg>
  </div>
  <div class="icon-5">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 513.57 1042.57" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-leaf-5" d="M207.74 252.52c0,0 -3.36,127.53 94.31,130.89 0,0 36.92,0.67 66.79,-32.89 0,0 -39.94,-10.4 -50.01,-47.99 -10.07,-37.59 63.1,-27.52 82.23,3.36 0,0 17.47,-34.44 35.17,-77.24 -60.5,-36.51 -169.57,-35.65 -182.77,-35.4 -16.15,16.52 -28.62,31.28 -37.69,42.91l-0 -0c-3.79,4.86 -6.98,9.18 -9.61,12.86l0.02 -0.03c-0.48,0.66 -0.93,1.31 -1.37,1.93l-0.05 0.08 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.7 1 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07c1.63,-0.35 3.25,-0.73 4.87,-1.16zm202.05 -202.04c0,0 -10.74,-24.5 15.1,-37.92 25.84,-13.42 40.95,2.68 38.93,7.72 -2.01,5.03 -36.92,38.6 -54.03,30.21zm41.95 28.86c0,0 3.69,-24.84 23.16,-20.14 19.47,4.7 -2.35,24.16 -6.71,25.51 -4.36,1.34 -17.79,3.36 -16.45,-5.37zm-13.33 143.98c6.34,-15.57 12.61,-32.08 18.03,-48.32 0,0 -14.77,-5.71 -43.63,-9.06 -28.86,-3.36 -48.67,-8.06 -47.99,-20.47 0.67,-12.42 19.47,-12.42 31.21,-12.08 11.75,0.34 44.3,9.4 65.45,21.48 0,0 6.06,-15.02 14,-34.26 -13.59,-6.7 -55.53,-24.2 -111.04,-17.16 -44.54,28.56 -79.28,58.2 -105.29,84.07 26.84,-0.04 122.78,2.26 179.27,35.82zm39.24 -107.98c11.26,-27.2 25.32,-60.47 31.48,-72.24 2.59,-4.94 4.04,-8.91 4.44,-12.19l-0.07 0.03c-7.86,2.78 -15.55,5.64 -23.08,8.58l-0.06 0.03c-43.75,17.09 -81.99,36.73 -115.12,57.12 50.7,-3.62 88.86,12.06 102.42,18.68zm-266.36 117.31l-0 0 0.19 -0.24c1.61,-2.06 3.33,-4.22 5.15,-6.47l0.6 -0.74c1.8,-2.22 3.71,-4.51 5.72,-6.89l0.53 -0.62c0.65,-0.77 1.31,-1.54 1.99,-2.33l0.45 -0.53c0.8,-0.93 1.62,-1.87 2.44,-2.82l-0.47 -0.16c26.43,-78.83 20.84,-169.24 18.14,-197.94 -29.06,6.17 -63.45,14.58 -92.65,24.81 0,0 -10.74,27.18 -8.73,47.66 2.01,20.47 10.4,39.6 17.79,47.99 7.38,8.39 -4.03,19.8 -14.1,11.08 -10.07,-8.73 -33.9,-27.86 -31.88,-85.58 0,0 -51.69,29.87 -54.37,96.99 -2.41,60.36 60.31,104.42 124.22,99.27 -29.57,40.64 -52.99,92.96 -71.11,145.44 -34.37,99.52 -49.74,199.84 -51.89,221.41 -1.69,16.94 -9.22,61.56 -18.01,108.82 -8.48,45.59 -18.12,93.5 -24.81,121.32 -13.86,57.6 -20.46,188.53 -20.47,188.9l11.37 0.54c0.02,-0.37 6.56,-130.3 20.16,-186.81 6.77,-28.15 16.45,-76.26 24.95,-121.9 8.84,-47.51 16.42,-92.5 18.15,-109.76 2.13,-21.29 17.32,-120.37 51.32,-218.82 17.84,-51.67 40.86,-103.1 69.86,-142.81 3.19,-7.16 11.12,-24.22 15.49,-29.83zm25.46 -30.01c1.38,-1.51 2.8,-3.04 4.25,-4.58l0.29 -0.31c0.84,-0.89 1.69,-1.8 2.55,-2.7l0.67 -0.7c2.7,-2.84 5.52,-5.73 8.45,-8.67l0.65 -0.65c0.97,-0.98 1.96,-1.96 2.96,-2.95l0.38 -0.38c3.13,-3.09 6.39,-6.23 9.77,-9.41l0.58 -0.54c4.62,-4.35 9.48,-8.77 14.57,-13.25l0.68 -0.6c3.78,-3.32 7.7,-6.68 11.74,-10.06l0.29 -0.24c5.54,-4.63 11.33,-9.29 17.36,-13.99l0.57 -0.44c6.07,-4.71 12.39,-9.44 18.97,-14.18l0.24 -0.17c4.93,-3.55 10.01,-7.1 15.23,-10.64l0.24 -0.16c4.13,-2.8 8.36,-5.6 12.68,-8.38 1.65,-4.78 23.49,-68.56 28.59,-99.33 -14.9,-0.31 -31.83,-0.37 -51.18,-0.15 0,0 -12.75,35.24 -9.73,54.03 3.02,18.79 9.73,34.9 -0.34,37.25 -10.07,2.35 -31.21,-20.47 -17.79,-89.27 0,0 -24.82,3.76 -57.81,10.6 2.58,27.06 8.08,112.25 -14.87,189.88zm130.78 -107.89l1.53 -0.95 0.35 -0.22c7.57,-4.71 15.41,-9.39 23.53,-14l0.16 -0.09c6.06,-3.44 12.27,-6.86 18.63,-10.22l0.29 -0.16c8.49,-4.49 17.26,-8.91 26.3,-13.23l0.6 -0.29c6.76,-3.22 13.68,-6.39 20.75,-9.5l0.12 -0.05c2.34,-1.03 4.7,-2.05 7.07,-3.06l0.5 -0.21c7,-2.98 14.15,-5.89 21.45,-8.74l1.17 -0.46c2.38,-0.92 4.78,-1.84 7.19,-2.75l0.09 -0.03c5.13,-1.93 10.34,-3.82 15.61,-5.68l0.07 -0.03c-2.61,-6.39 -11.96,-9.39 -26.62,-13.87 -18.07,-5.52 -44.02,-9.54 -92.15,-10.8 -4.31,26.52 -20.49,76.07 -26.62,94.33z"></path></g></svg>
  </div>
</button>
<style>
/* From Uiverse.io by MuhammadHasann - Tags: icon, button, svg, plant */
button {
  position: relative;
  padding: 13px 35px;
  background: #f5ddb7;
  font-size: 17px;
  font-weight: 900;
  color: #181818;
  border: none;
  border-radius: 8px;
  box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #ffffffb0;
  transition: all .3s ease-in-out;
}

.icon-1 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -1;
}

.icon-2 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-3 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-4 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-5 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

button:hover {
  padding: 13px 25px;
  border-radius: 8px 8px 24px 24px;
}

button:hover .icon-1 {
  top: -250%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50px;
  height: auto;
  animation: inIcon1 1s ease .45s forwards;
}

@keyframes inIcon1 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  25% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(5deg);
  }

  50% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(1deg);
  }

  65% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-2 {
  position: absolute;
  top: -200%;
  left: 90%;
  transform: translate(-50%, 0);
  width: 75px;
  height: auto;
  animation: inIcon2 1s ease .45s forwards;
}

@keyframes inIcon2 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(10deg);
  }

  50% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(4deg);
  }

  80% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(5deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-3 {
  position: absolute;
  top: -130%;
  left: 20%;
  transform: translate(-50%, 0);
  width: 60px;
  height: auto;
  animation: inIcon3 1s ease .45s forwards;
}

@keyframes inIcon3 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-2deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-4 {
  position: absolute;
  top: -300%;
  left: 10%;
  transform: translate(-50%, 0);
  width: 85px;
  height: auto;
  animation: inIcon4 1s ease .45s forwards;
}

@keyframes inIcon4 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  40% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-5 {
  position: absolute;
  top: -350%;
  left: 90%;
  transform: translate(-50%, 0);
  width: 85px;
  height: auto;
  animation: inIcon5 1s ease .45s forwards;
}

@keyframes inIcon5 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.fil-leaf-1 {
  fill: #7B9B3A
}

.fil-leaf-2 {
  fill: #556729;
  fill-rule: nonzero
}

.fil-leaf-3 {
  fill: #556729
}

.fil-leaf-4 {
  fill: #3C4819
}

.fil-leaf-5 {
  fill: #3C4819
}
</style>


================================================
FILE: Buttons/MuhammadHasann_happy-cobra-7.html
================================================
<button class="button">
  <div class="icon_cont">
    <span class="icon">🡪</span>
  </div>
  <span class="text_button">Hover this button</span>
</button>

<style>
/* From Uiverse.io by MuhammadHasann  - Tags: simple, icon, minimalist, button */
.button {
  --dark: #181818;
  --light: #d9d9d9;
  --active: 0;

  cursor: pointer;
  position: relative;

  display: flex;
  align-items: center;
  gap: 0.5rem;

  transform-origin: center;

  background-color: transparent;

  border: none;
}

.button:hover {
  --active: 1;
}

.icon_cont {
  overflow: clip;

  display: flex;
  justify-content: center;
  align-items: center;

  width: calc(var(--active) * 1.5rem + (1 - var(--active)) * 0.5rem);
  height: calc(var(--active) * 1.5rem + (1 - var(--active)) * 0.5rem);
  background-color: hsla(0, 0%, 85%, var(--active));

  border: 1px solid var(--light);
  border-radius: 9999px;
  transition: all 0.5s ease-in-out;
}

.icon {
  font-size: 0.75rem;
  color: var(--dark);
  line-height: 1rem;

  transform: translateX(calc(-1rem * (1 - var(--active))));
  transition: transform 0.5s ease-in-out;
}

.text_button {
  position: relative;

  display: inline-block;

  padding-block: 0.5rem;

  font-size: 1rem;
  font-weight: 600;
  color: var(--light);

  text-transform: capitalize;
}
.text_button::before {
  content: "";

  position: absolute;
  bottom: 0;
  right: 0;

  width: calc((1 - var(--active)) * 100%);
  height: 1px;
  background-color: var(--light);

  border-radius: 9999px;
  transition: width 0.5s ease-in-out;
}

</style>
    

================================================
FILE: Buttons/MuhammadHasann_hungry-cougar-64.html
================================================
<button class="button">
  hover me
  <span></span><span></span><span></span><span></span>
</button>

<style>
/* From Uiverse.io by MuhammadHasann  - Tags: simple, minimalist, button */
.button {
  cursor: pointer;
  --c: #0ea5e9;
  padding: 12px 28px;
  margin: 1em;
  position: relative;
  min-width: 12em;
  background: transparent;
  font-size: 12px;
  font-weight: bold;
  color: var(--c);
  text-align: center;
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 0.1em;
  border: 2px solid var(--c);
  border-radius: 8px;
  overflow: hidden;
  z-index: 1;
  transition: 0.5s;
}

.button span {
  position: absolute;
  width: 25%;
  height: 100%;
  background-color: var(--c);
  transform: translateY(150%);
  border-radius: 50%;
  left: calc((var(--n) - 1) * 25%);
  transition: 0.5s;
  transition-delay: calc((var(--n) - 1) * 0.1s);
  z-index: -1;
}

.button:hover {
  color: black;
}

.button:hover span {
  transform: translateY(0) scale(2);
}

.button span:nth-child(1) {
  --n: 1;
}

.button span:nth-child(2) {
  --n: 2;
}

.button span:nth-child(3) {
  --n: 3;
}

.button span:nth-child(4) {
  --n: 4;
}

</style>
    

================================================
FILE: Buttons/MuhammadHasann_lucky-mouse-99.html
================================================
<button>Button
  <div class="icon-1">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 26.3 65.33" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil0" d="M13.98 52.87c0.37,-0.8 0.6,-1.74 0.67,-2.74 1.01,1.1 2.23,2.68 1.24,3.87 -0.22,0.26 -0.41,0.61 -0.59,0.97 -2.95,5.89 3.44,10.87 2.98,0.78 0.29,0.23 0.73,0.82 1.03,1.18 0.33,0.4 0.7,0.77 1,1.15 0.29,0.64 -0.09,2.68 1.77,4.91 5.42,6.5 5.67,-2.38 0.47,-4.62 -0.41,-0.18 -0.95,-0.26 -1.28,-0.54 -0.5,-0.41 -1.23,-1.37 -1.66,-1.9 0.03,-0.43 -0.17,-0.13 0.11,-0.33 4.98,1.72 8.4,-1.04 2.38,-3.16 -1.98,-0.7 -2.9,-0.36 -4.72,0.16 -0.63,-0.58 -2.38,-3.82 -2.82,-4.76 1.21,0.56 1.72,1.17 3.47,1.3 6.5,0.5 2.31,-4.21 -2.07,-4.04 -1.12,0.04 -1.62,0.37 -2.49,0.62l-1.25 -3.11c0.03,-0.26 0.01,-0.18 0.1,-0.28 1.35,0.86 1.43,1 3.25,1.45 2.35,0.15 3.91,-0.15 1.75,-2.4 -1.22,-1.27 -2.43,-2.04 -4.22,-2.23l-2.08 0.13c-0.35,-0.58 -0.99,-2.59 -1.12,-3.3l-0.01 -0.01 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0c-0.24,-0.36 1.88,1.31 2.58,1.57 1.32,0.49 2.6,0.33 3.82,0 -0.37,-1.08 -1.17,-2.31 -2.13,-3.11 -1.79,-1.51 -3.07,-1.41 -5.22,-1.38l-0.93 -4.07c0.41,-0.57 1.41,0.9 2.82,1.36 0.96,0.31 1.94,0.41 3,0.14 2,-0.52 -2.25,-4.4 -4.53,-4.71 -0.7,-0.1 -1.23,-0.04 -1.92,-0.03 -0.46,-0.82 -0.68,-3.61 -0.92,-4.74 0.8,0.88 1.15,1.54 2.25,2.23 0.8,0.5 1.58,0.78 2.57,0.85 2.54,0.18 -0.1,-3.47 -0.87,-4.24 -1.05,-1.05 -2.34,-1.59 -4.32,-1.78l-0.33 -3.49c0.83,0.67 1.15,1.48 2.3,2.16 1.07,0.63 2.02,0.89 3.58,0.79 0.15,-1.34 -1.07,-3.39 -2.03,-4.3 -1.05,-0.99 -2.08,-1.47 -3.91,-1.68l-0.07 -3.27 0.32 -0.65c0.44,0.88 1.4,1.74 2.24,2.22 0.69,0.39 2.4,1.1 3.44,0.67 0.31,-1.92 -1.84,-4.49 -3.5,-5.29 -0.81,-0.39 -1.61,-0.41 -2.18,-0.68 -0.12,-1.28 0.27,-3.23 0.37,-4.55l-0.89 0c-0.06,1.28 -0.35,3.12 -0.34,4.31 -0.44,0.45 -0.37,0.42 -0.96,0.64 -3.88,1.49 -4.86,6.38 -3.65,7.34 1.42,-0.31 3.69,-2.14 4.16,-3.66 0.23,0.5 0.1,2.36 0.05,3.05 -1.23,0.4 -2.19,1.05 -2.92,1.82 -1.17,1.24 -2.36,4.04 -1.42,5.69 1.52,0.09 4.07,-2.49 4.49,-4.07l0.29 3.18c-2.81,0.96 -5.01,3.68 -4.18,7.43 2.06,-0.09 3.78,-2.56 4.66,-4.15 0.23,1.45 0.67,3.06 0.74,4.52 -1.26,0.93 -2.37,1.8 -2.97,3.55 -0.48,1.4 -0.49,3.72 0.19,4.55 0.59,0.71 2.06,-1.17 2.42,-1.67 1,-1.35 0.81,-1.92 1.29,-2.46l0.7 3.44c-0.49,0.45 -0.94,0.55 -1.5,1.19 -1.93,2.23 -2.14,4.33 -1.01,6.92 0.72,0.09 2.04,-1.4 2.49,-2.06 0.65,-0.95 0.79,-1.68 1.14,-2.88l0.97 2.92c-0.2,0.55 -1.84,1.32 -2.6,3.62 -0.54,1.62 -0.37,3.86 0.67,4.93 0.58,-0.09 1.85,-1.61 2.2,-2.19 0.66,-1.09 0.66,-1.64 1,-2.93l1.32 3.18c-0.23,0.72 -1.63,1.72 -1.82,4.18 -0.17,2.16 1.11,6.88 3.13,2.46zm-4.09 -16.89l-0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 -0 0.01 0.01z"></path></g></svg>
  </div>
  <div class="icon-2">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 11.67 37.63" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil0" d="M7.63 35.26c-0.02,0.13 0.01,0.05 -0.06,0.14 -0,0 -0.08,0.07 -0.11,0.1 -0.42,0.25 -0.55,0.94 -0.23,1.4 0.68,0.95 2.66,0.91 3.75,0.21 0.2,-0.13 0.47,-0.3 0.57,-0.49 0.09,-0.02 0.04,0.03 0.11,-0.07l-1.35 -1.24c-0.78,-0.78 -1.25,-1.9 -2.07,-0.62 -0.11,0.18 -0.06,0.16 -0.22,0.26 -0.4,-0.72 -0.95,-1.79 -1.26,-2.59 0.82,0.02 1.57,-0.12 2.16,-0.45 0.49,-0.27 1.15,-0.89 1.33,-1.4 0.1,-0.06 0.02,0.01 0.06,-0.1 -0.24,-0.16 -0.87,-0.37 -1.19,-0.52 -0.4,-0.19 -0.73,-0.39 -1.09,-0.62 -0.25,-0.16 -0.85,-0.6 -1.18,-0.3 -0.35,0.32 -0.32,0.83 -0.53,1.17 -0.71,-0.3 -0.55,-0.26 -0.84,-1.22 -0.15,-0.5 -0.31,-1.12 -0.41,-1.66l0.03 -0.13c0.56,0.23 1.28,0.37 1.99,0.28 0.56,-0.07 1.33,-0.42 1.62,-0.71l0.1 -0.1c-0.74,-0.68 -1.09,-1.2 -1.65,-1.99 -1.09,-1.52 -1.2,-0.28 -1.92,0.17 -0.26,-0.79 -0.73,0.2 -0.12,-2.76 0.06,-0.3 0.19,-0.7 0.2,-0.98 0.18,0.08 0.01,-0.01 0.11,0.08 0.05,0.05 0.07,0.07 0.1,0.12 0.94,1.17 3.63,0.82 4.21,0.01 0.13,-0.02 0.06,0.03 0.1,-0.1 -1.14,-0.81 -1.91,-2.89 -2.58,-2.67 -0.29,0.09 -0.78,0.63 -0.93,0.87 -0.54,-0.48 -0.36,-0.63 -0.38,-0.81 0.01,-0.01 0.03,-0.04 0.03,-0.03 0.01,0.02 0.36,-0.35 0.45,-0.6 0.13,-0.35 0.04,-0.65 -0.05,-0.95 0.06,-0.41 0.33,-1.33 0.28,-1.71 0.22,-0.05 0.19,0.05 0.45,0.17 0.47,0.23 1.17,0.33 1.7,0.32 0.62,-0 1.74,-0.39 1.94,-0.75 0.14,-0.02 0.05,0.06 0.13,-0.09 -1.05,-1.1 -0.7,-0.64 -1.62,-1.92 -0.58,-0.81 -0.9,-1.27 -1.9,0.12 -0.44,-0.5 -0.64,-0.69 -0.66,-1.24 0.02,-0.31 0.15,-0.36 0.08,-0.73 -0.04,-0.24 -0.14,-0.41 -0.29,-0.59l-0.47 -2.54c0.09,-0.14 -0.09,-0.1 0.2,-0.05 0.06,0.01 0.19,0.05 0.3,0.07 0.54,0.09 1.47,0.01 1.95,-0.15 0.57,-0.19 1.53,-0.8 1.68,-1.18 0.16,-0.07 0.05,0.02 0.15,-0.13 -0.12,-0.15 -0.95,-0.65 -1.15,-0.8 -1.43,-1.08 -2.21,-2.77 -3.16,-0.38 -0.2,-0.1 -0.75,-0.55 -0.83,-0.74 -0.15,-0.35 -0.21,-0.81 -0.37,-1.15l-0.1 -0.25c-0.03,-0.3 -0.44,-1.33 -0.57,-1.64 -0.2,-0.51 -0.47,-1.09 -0.64,-1.6l-0.55 0c0.14,0.42 0.36,0.84 0.53,1.28 0.12,0.3 0.19,0.35 0.06,0.66l-0.21 0.52c-0.01,0.01 -0.01,0.02 -0.02,0.03 -0.06,0.1 -0.03,0.05 -0.06,0.09 -1.44,-1.03 -1.66,-0.73 -2.07,0.46 -0.16,0.46 -0.3,0.93 -0.5,1.36l-0.64 1.28c0.06,0.07 -0,0.03 0.1,0.03 0.05,0.05 0.02,0.03 0.1,0.08l0.49 0.14c0.23,0.05 0.44,0.09 0.66,0.1 0.55,0.04 0.94,-0.06 1.35,-0.19 0.54,-0.18 1.09,-0.44 1.5,-0.82 0.15,-0.14 0.24,-0.3 0.4,-0.41l0.46 1.66c0.03,0.74 -0.09,0.6 0.27,1.21 0.01,0.01 0.01,0.02 0.02,0.03 0.01,0.01 0.01,0.02 0.02,0.04l0.07 0.11c-0.02,0.22 0.19,1.01 0.24,1.29 0.09,0.46 -0.21,0.79 -0.3,1.2 -0.55,-0.23 -1.25,-1.06 -1.66,-0.23 -0.12,0.25 -0.17,0.36 -0.26,0.62 -0.33,1.01 -0.63,1.61 -1.06,2.43l0.12 0.04 0.23 0.11c0.06,0.02 0.17,0.04 0.25,0.06 0.17,0.04 0.34,0.08 0.52,0.09 0.29,0.02 0.93,0.07 1.12,-0.13 0.42,0.01 1.24,-0.49 1.51,-0.71 0.01,0.01 0.03,0 0.04,0.02l0.09 0.06c-0.04,0.29 0.02,0.41 0.03,0.7l-0.05 1.41c-0.06,1.12 -0.29,1.06 -0.76,1.69 -0.08,-0.07 -0.03,-0.01 -0.11,-0.11 -0.03,-0.03 -0.06,-0.08 -0.09,-0.11 -0.2,-0.25 -0.38,-0.54 -0.7,-0.69 -0.7,-0.32 -1.52,1.73 -2.82,2.61 0.04,0.2 -0.01,0.06 0.1,0.11 0.25,0.3 1,0.67 1.5,0.78 0.35,0.08 0.71,0.08 1.09,0.05 0.25,-0.02 0.82,-0.16 0.92,-0.13 -0.16,0.69 -0.35,1.35 -0.52,2.03 -0.25,1 -0.03,0.77 -0.98,1.53 -0.3,-0.31 -0.33,-0.77 -0.77,-1.02 -0.42,-0.25 -0.91,0.35 -1.12,0.55 -0.33,0.32 -0.58,0.6 -0.97,0.89 -0.19,0.14 -0.34,0.26 -0.53,0.4 -0.14,0.11 -0.43,0.29 -0.53,0.4 0.1,0.15 -0.02,0.06 0.15,0.13 0.09,0.22 0.35,0.38 0.54,0.52 0.22,0.16 0.43,0.29 0.69,0.39 0.43,0.17 1.32,0.31 1.87,0.23l0.23 -0.05c0.01,-0 0.03,-0.02 0.04,-0.02 0.01,-0 0.02,-0.01 0.03,-0.02 0.32,0.05 0.52,-0.18 0.79,-0.24l-0.02 0.66c0,0.77 -0.24,0.75 0.16,1.51l0.04 0.07c0,0.01 0.01,0.03 0.02,0.04 -0.05,0.35 0.18,1.03 0.24,1.4 -0.23,0.18 -0.34,0.33 -0.51,0.41 -0.75,-1.17 -0.82,-1.52 -1.92,-0.43 -0.32,0.31 -0.59,0.57 -0.95,0.86 -0.23,0.19 -0.95,0.65 -1.05,0.81l0.13 0.1c0.88,1.15 3.14,1.5 4.1,0.82 0.47,-0.34 0.54,-0.56 0.52,-1.34l0.67 1.84c0.03,0.16 0.06,0.28 0.12,0.42 0.03,0.06 0.05,0.12 0.09,0.17 0.1,0.15 0.03,0.06 0.13,0.14 -0,0.29 0.14,0.22 0.06,0.56 -0.03,0.13 -0.14,0.43 -0.19,0.53 -1.94,-1.27 -1.57,-0.02 -2.28,1.76 -0.16,0.41 -0.37,0.77 -0.53,1.2 0.09,0.08 0.01,0.03 0.15,0.03 0.29,0.33 1.66,0.28 2.36,-0.01 0.48,-0.2 0.96,-0.46 1.3,-0.82 0.15,-0.16 0.16,-0.3 0.38,-0.33 0.14,0.08 0.17,0.19 0.27,0.36zm-3.62 -12.85c0.13,-0.01 0.31,-0.15 0.55,-0.19 -0.01,0.45 0.02,0.74 -0.34,0.45 -0.06,-0.05 -0.09,-0.06 -0.12,-0.09 -0.09,-0.1 -0.04,-0.01 -0.09,-0.17zm1.92 -12.29l-0.04 0.13c-0.07,-0.02 -0.17,-0.02 -0.21,-0.03 -0.27,-0.08 -0.09,0.04 -0.16,-0.16 0.12,-0.08 0.18,-0.23 0.34,-0.35l0.08 0.4zm1.33 3.05l-0.4 0.17c-0,-0.08 -0,-0.15 -0.02,-0.23 -0.02,-0.09 -0.03,-0.07 -0.05,-0.11l0.07 -0.16c0.21,0.11 0.28,0.16 0.4,0.32zm-1.54 6.48l0.16 -0.51c0.17,0.07 0.25,0.14 0.36,0.29l-0.52 0.22zm0.28 10.88l-0.09 -0.38 0.37 0.07c-0.02,0.1 -0.03,0.13 -0.09,0.19 -0.13,0.15 0.01,0.06 -0.19,0.12zm-1.05 -5.97c0.06,0.12 0.16,0.16 0.26,0.23 -0.09,0.14 -0.22,0.18 -0.37,0.21 -0,-0.02 -0.02,-0.27 -0.02,-0.27 0.04,-0.19 -0.06,-0.09 0.13,-0.16zm1.03 -8.01c-0.09,-0.02 -0.15,-0.02 -0.22,-0.07 -0.21,-0.13 -0.08,-0.02 -0.14,-0.18 0.15,-0.05 0.21,-0.15 0.45,-0.24l-0.08 0.48zm0.57 16.58l-0.45 -0c0.02,-0.18 0.12,-0.3 0.26,-0.42l0.18 0.42zm-1.45 -3.7l-0.19 -0.23c-0.06,-0.07 -0.1,-0.13 -0.17,-0.19 -0.24,-0.23 -0.29,-0.14 -0.36,-0.36l0.46 -0.19c0.07,0.14 0.25,0.78 0.26,0.97zm0.37 -23.67l-0.12 -0.57 0.54 0.21c-0.07,0.16 -0.27,0.31 -0.41,0.36zm-1.46 -3.02c-0.07,0.01 -0.19,-0.04 -0.3,-0.06 -0.04,-0.01 -0.14,-0.02 -0.18,-0.03 -0.15,-0.07 -0.06,0.04 -0.14,-0.13 0.11,-0.07 0.2,-0.27 0.37,-0.4 0.13,0.13 0.2,0.43 0.24,0.62z"></path></g></svg>
  </div>
  <div class="icon-3">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 25.29 76.92" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil0" d="M19.14 6.58c0.09,0.1 -0.02,0.03 0.17,0.15 0.04,0.03 0.19,0.09 0.27,0.13l0.16 0.02c0.12,0.14 0.02,0.06 0.22,0.18 0.63,0.37 1.81,0.52 2.51,0.53 0.42,-0.26 0.61,-1.58 0.55,-2.27 -0.11,-1.17 -1.02,-3.42 -2.17,-3.76 -0.84,-0.25 -1.19,0.02 -1.4,0.7 -0.03,0.1 -0.05,0.19 -0.09,0.28l-0.18 0.25c-0.18,-0.36 -0.77,-0.97 -1.2,-1.18 -0.64,-0.31 -0.36,-0.26 -0.84,-1.59l-0.75 0c0.2,0.63 0.44,1.27 0.61,1.92 0.17,0.64 0.47,1.46 0.58,2.05 -0.21,0.36 -0.43,0.5 -0.31,1.1 0.11,0.51 0.35,0.71 0.76,0.9 0.13,0.31 0.36,1.33 0.39,1.78 -0.68,0.24 -1.38,0.85 -1.62,1.43 -0.45,-0.47 -0.29,-1.59 -1.59,-1.22 -0.8,0.22 -1.09,0.8 -1.45,1.52 -0.58,1.18 -0.96,2.15 -0.6,3.58 0.04,0.17 0.13,0.4 0.19,0.55 0.11,0.29 0.09,0.34 0.35,0.44 1.74,-0.01 2.96,-0.82 4.13,-1.55 0.22,-0.13 0.65,-0.39 0.79,-0.62 0.74,-1.2 -0.74,-2.14 -1.7,-2.43 -0.01,-0.51 1.07,-0.87 1.7,-0.82 0.21,1.74 0.56,3.5 0.61,5.33 0.05,2.05 0.01,3.68 -0.08,5.71 -1.2,0.52 -0.99,0.65 -1.77,1.46 -0.39,-0.45 -0.22,-1.6 -1.59,-1.18 -0.79,0.24 -0.91,0.63 -1.42,1.55 -0.78,1.41 -0.95,2.66 -0.36,4.15 0.14,0.35 0.06,0.36 0.36,0.37 0.78,-0 1.47,-0.18 2.09,-0.43 0.51,-0.2 1.26,-0.76 1.69,-0.86 -0.18,0.3 -0.34,0.91 -0.48,1.25l-1.54 3.5c-1.75,0.08 -1.26,0.29 -2.27,0.59 0.1,-1.15 0.1,-1.69 -1.1,-1.78 -0.7,-0.05 -1.5,0.65 -1.91,0.96 -1.04,0.82 -1.93,1.81 -1.94,3.77 0.09,0.22 -0.03,0.09 0.18,0.11 0.24,0.36 1.4,0.49 1.94,0.58l0.19 -0.01 0.71 -0.01 0.08 -0.02 1.74 -0.17c0.25,0.04 0.03,-0.07 0.19,0.09l-2.62 4.74c-0.28,0.51 -0.56,1.2 -0.86,1.61 -0.44,-0.02 -0.69,-0.14 -1.18,-0.08 -0.38,0.04 -0.72,0.17 -1.08,0.22 0.1,-0.53 0.78,-1.5 -0.62,-1.96 -0.79,-0.26 -1.74,0.32 -2.33,0.6 -2.12,1.02 -2.81,3.28 -2.36,3.38 0.01,0.01 0.03,0.02 0.03,0.04l0.11 0.1c0.42,0.34 1.16,0.64 1.66,0.79 0.65,0.19 1.73,0.31 2.43,0.38 3,0.28 1.16,-2.8 1.09,-3.14 0.86,0.12 1.3,-0.05 1.81,0.56 -0.08,0.35 -0.53,1.2 -0.71,1.6 -0.74,1.61 -1.24,3.24 -1.73,4.96 -0.92,0.11 -1.11,0.44 -1.77,0.69 0.01,-1.08 0.1,-1.68 -1.14,-1.71 -0.55,-0.01 -0.8,0.17 -1.11,0.41 -1.43,1.08 -2.52,2.24 -2.53,4.15 -0,0.62 0.11,0.48 0.22,0.54 0.63,0.38 1.79,0.44 2.67,0.35 0.47,-0.05 0.97,-0.11 1.43,-0.2l0.98 -0.22c0.38,-0.08 0.14,-0.15 0.26,0.06 -0.08,0.78 -0.66,2.6 -0.56,3.29 -0.13,0.14 -0.07,0.08 -0.17,0.29 -0.06,0.13 -0.08,0.18 -0.12,0.33 -0.07,0.3 -0.02,0.6 -0.03,0.92 -0.09,0.94 -0.17,0.52 -0.78,0.94 -0.32,0.22 -0.57,0.55 -0.86,0.82 -0.29,-0.69 -0.22,-1.44 -1.39,-1.13 -0.93,0.25 -1.93,2.19 -2.03,3.16 -0.06,0.56 0.02,1.84 0.39,2.08 2,0.02 2.64,-0.6 4.08,-1.25l-0.01 0.28c-0.06,0.58 -0.22,2.09 -0.14,2.62 -0.44,0.37 -0.46,1.03 -0.12,1.49 -0.08,3.97 0.16,2.73 -0.77,3.57 -0.24,0.21 -0.37,0.4 -0.62,0.62 -0.36,-0.53 -0.09,-1.43 -1.37,-1.13 -0.98,0.23 -1.92,2.22 -2.06,3.14 -0.07,0.47 -0.07,1.79 0.41,2.09 0.86,0.04 1.94,-0.12 2.51,-0.52l0.16 -0.08c0.6,-0.17 1.39,-0.67 1.84,-0.94 0.12,0.18 0.04,0.07 0.14,0.1 -0.18,0.38 -0.31,0.07 -0.71,0.58 -0.67,0.86 0.33,1.72 0.89,2.31 0.6,0.64 1.71,1.63 2.94,1.88 0.38,-0.11 0.92,-1.2 1.04,-1.69 0.21,-0.86 0.15,-1.53 -0.05,-2.41 -0.22,-0.94 -0.24,-1.38 -1.01,-1.81 -0.93,-0.52 -1.19,0.28 -1.59,0.76 -0.21,-0.33 -0.33,-0.79 -0.58,-1.12 -0.48,-0.62 -0.48,-0.13 -0.5,-1.22 -0.02,-1.09 0.05,-2.25 0.01,-3.32 0.37,0.22 0.89,0.86 1.37,1.21 0.51,0.37 1.05,0.65 1.76,0.82 0.32,-0.02 0.92,-1.21 1.04,-1.68 0.22,-0.87 0.15,-1.53 -0.04,-2.41 -0.19,-0.86 -0.3,-1.41 -0.96,-1.79 -1.06,-0.6 -1.26,0.38 -1.71,0.74 -0.22,-0.8 -0.65,-1.34 -1.19,-1.71l0.5 -4.35 0.38 0.28c0.23,0.25 0.6,0.67 0.87,0.82 0.07,0.1 0.05,0.1 0.19,0.21 0.18,0.23 0.66,0.57 0.92,0.6 0.1,0.13 -0.01,0.03 0.16,0.16 0.08,0.06 0.1,0.07 0.18,0.11 0.14,0.07 0.26,0.1 0.44,0.15l0.45 0.17c0.35,0.08 0.75,-0.74 0.91,-1.05 0.21,-0.4 0.41,-1.07 0.43,-1.57 -0,-0.28 0.04,-0.67 -0.1,-0.85l0.03 -0.17c-0,-0.04 -0.01,-0.13 -0.01,-0.15 -0.05,-0.13 -0.03,-0.1 -0.09,-0.17 0.06,-0.51 -0.25,-1.75 -0.94,-2.22 -1.11,-0.74 -1.37,0.09 -1.86,0.69l-0.12 -0.2c-0.28,-0.56 -0.41,-1.06 -1,-1.45 0.04,-1.21 1.29,-5.03 1.31,-5.65 0.07,0.06 0.05,0.04 0.12,0.13 0.63,0.83 0.41,0.6 1.22,1.38 0.76,0.74 1.67,1.73 2.95,1.92 0.28,0.13 0.55,-0.41 0.69,-0.64 0.21,-0.34 0.36,-0.64 0.47,-1.02 0.36,-1.24 0.14,-3.92 -1.03,-4.6 -1.23,-0.72 -1.67,0.89 -1.75,0.72 -0.01,-0.01 -0.03,0.02 -0.04,0.03 -0.19,-0.33 -0.3,-0.68 -0.49,-1 -0.22,-0.38 -0.47,-0.51 -0.68,-0.79 0.39,-1.04 1.05,-2.29 1.59,-3.3 0.57,-1.06 1.2,-2.15 1.7,-3.17 1.43,-0.02 1.51,0.55 1.8,0.6 -0.1,0.19 -0.02,0.07 -0.16,0.2 -0.01,0.01 -0.21,0.13 -0.23,0.15 -0.8,0.47 -1.8,0.96 -1.37,2.09 0.14,0.37 0.42,0.53 0.75,0.73 1.23,0.73 2.46,1.53 4.32,1.53 0.28,-0.08 0.25,-0.15 0.35,-0.44 0.22,-0.63 0.33,-1.22 0.26,-1.93 -0.11,-1.05 -1.06,-3.33 -2.21,-3.65 -1.31,-0.37 -1.17,0.6 -1.56,1.21l-0.2 -0.19c-0.84,-0.96 -0.61,-0.56 -1.27,-1.09 0.16,-0.47 0.7,-1.32 0.98,-1.82 1.05,-1.91 1.94,-3.59 2.84,-5.61 0.73,0.01 1.23,0.31 1.57,0.68 -0.26,0.25 -1.37,0.7 -1.67,1.19 -0.51,0.8 -0.07,1.45 0.63,1.87 1.15,0.7 2.56,1.58 4.34,1.55 0.33,-0.09 0.46,-0.67 0.52,-0.98 0.28,-1.4 -0.01,-2.34 -0.66,-3.5 -0.49,-0.87 -0.67,-1.3 -1.44,-1.54 -1.15,-0.36 -1.27,0.44 -1.56,1.23 -0.65,-0.55 0.03,-0.23 -1.38,-1.25 0.22,-0.6 1.08,-2.59 1.06,-3.14 0.38,-0.35 0.52,-0.78 0.43,-1.4 0.22,-0.75 0.67,-4.16 0.53,-5 0.32,0.09 0.75,0.4 1.06,0.57 0.35,0.2 0.71,0.39 1.06,0.57 0.73,0.38 1.61,0.62 2.65,0.61 0.58,-0.21 0.64,-1.82 0.61,-2.32 -0.04,-0.79 -0.45,-1.64 -0.77,-2.19 -0.39,-0.68 -0.64,-1.3 -1.45,-1.52 -1.33,-0.36 -1.16,0.63 -1.55,1.24 -0.67,-0.66 -0.61,-0.87 -1.64,-1.37 -0.06,-2.55 -0.87,-5.97 -0.9,-6.74l0.15 -0.03 0.01 -0.03zm-14.34 62.71l-0.02 1.23c-0.17,-0.13 -0.38,-0.3 -0.62,-0.45 -0.2,-0.13 -0.4,-0.21 -0.59,-0.39 0.26,-0.28 0.65,-0.51 1.16,-0.55l0.07 0.15zm14.26 -66.46c-0.03,0.28 0.03,0.13 -0.15,0.29 -0.01,0.01 -0.24,0.12 -0.24,0.13 -0.22,0.12 -0.24,0.17 -0.54,0.21 0.01,-0.4 -0.17,-0.77 -0.25,-1.14 0.63,0.03 0.9,0.46 1.18,0.51zm-14.86 55.33c0.15,-0.05 0.34,-0.22 0.51,-0.31 0.29,-0.15 0.4,-0.14 0.78,-0.16 -0.03,0.41 -0.14,0.81 -0.08,1.19 -0.26,0.14 -0.08,0.13 -0.34,-0.03 -0.26,-0.16 -0.76,-0.47 -0.88,-0.69zm2.5 -3.73c0.16,-0.41 0.11,-0.97 0.32,-1.32 0.3,0.08 0.44,0.22 0.64,0.41 0.2,0.19 0.27,0.36 0.41,0.49 -0.16,0.21 0.06,0.08 -0.33,0.21 -0.1,0.03 -0.26,0.05 -0.36,0.08 -0.23,0.05 -0.43,0.12 -0.68,0.14zm0.14 8.74l-1.08 0.27c-0.09,-0.08 -0.07,0.14 -0.08,-0.17l0.07 -1.1c0.51,0.12 0.97,0.57 1.09,1.01zm-0.43 8.78c-0.17,0.02 -0.31,0.07 -0.44,0.1 -0.01,0 -0.23,0.03 -0.24,0.03 -0.22,-0.04 0,0.16 -0.14,-0.1l-0.01 -0.9c0.37,0.15 0.68,0.48 0.83,0.88zm7.48 -41.68c0.31,-0.02 0.51,-0.13 0.93,-0.12 0.35,0 0.54,0.09 0.82,0.17 -0.11,0.53 -0.59,0.91 -0.64,1.43 -0.25,-0.04 -0.12,0.01 -0.27,-0.15l-0.84 -1.31zm4.93 -8.23c-0.27,-0 -0.43,-0.17 -0.68,-0.32 -0.41,-0.23 -0.51,-0.16 -0.64,-0.47 0.15,-0.04 0.4,-0.31 0.62,-0.42 0.29,-0.15 0.49,-0.18 0.85,-0.23 0.05,0.51 -0.12,0.95 -0.14,1.43zm-12.94 26.21c0.63,-0.04 0.61,-0.21 1.47,-0.11l-0.33 1.55c-0.33,-0.14 -0.22,-0.21 -0.62,-0.71 -0.32,-0.39 -0.42,-0.39 -0.52,-0.74zm15.47 -33.38c-0.15,0.29 -0.36,0.33 -0.67,0.51 -0.26,0.15 -0.4,0.29 -0.69,0.42 -0.01,-0.23 0.02,-0.53 -0.08,-0.67l0.03 -0.86c0.33,0.01 0.6,0.1 0.83,0.21 0.22,0.11 0.42,0.34 0.58,0.38zm-12.41 30.37c0.14,-0.37 0.45,-1.36 0.68,-1.6 0.66,0.19 1.09,0.56 1.31,1.14 -0.34,0.04 -0.75,0.16 -1.08,0.25 -0.9,0.24 -0.77,0.49 -0.91,0.21z"></path></g></svg>
  </div>
</button>
<style>
/* From Uiverse.io by MuhammadHasann - Tags: button */
button {
  position: relative;
  padding: 15px 45px;
  background: #FEC195;
  font-size: 17px;
  font-weight: 500;
  color: #181818;
  border: 1px solid #FEC195;
  border-radius: 8px;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .2));
}

button:hover {
  border: 1px solid #f3b182;
  background: linear-gradient(85deg, #FEC195, #fcc196, #fabd92, #fac097, #fac39c);
  animation: wind 2s ease-in-out infinite;
}

@keyframes wind {
  0% {
    background-position: 0% 50%;
  }

  0% {
    background-position: 50% 100%;
  }

  0% {
    background-position: 0% 50%;
  }
}

.icon-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  transform-origin: 0 0;
  transform: rotate(10deg);
  transition: all .5s ease-in-out;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .3));
}

button:hover .icon-1 {
  animation: slay-1 3s cubic-bezier(0.52, 0, 0.58, 1) infinite;
  transform: rotate(10deg);
}

@keyframes slay-1 {
  0% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(10deg);
  }
}

.icon-2 {
  position: absolute;
  top: 0;
  left: 25px;
  width: 12px;
  transform-origin: 50% 0;
  transform: rotate(10deg);
  transition: all 1s ease-in-out;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
}

button:hover .icon-2 {
  animation: slay-2 3s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;
  transform: rotate(0);
}

@keyframes slay-2 {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(15deg);
  }

  100% {
    transform: rotate(0);
  }
}

.icon-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  transform-origin: 50% 0;
  transform: rotate(-5deg);
  transition: all 1s ease-in-out;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
}

button:hover .icon-3 {
  animation: slay-3 2s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;
  transform: rotate(0);
}

@keyframes slay-3 {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0);
  }
}
</style>


================================================
FILE: Buttons/MuhammadHasann_mean-bird-62.html
================================================
<button class="button">
  <div class="dots_border"></div>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    class="sparkle"
  >
    <path
      class="path"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke="black"
      fill="black"
      d="M14.187 8.096L15 5.25L15.813 8.096C16.0231 8.83114 16.4171 9.50062 16.9577 10.0413C17.4984 10.5819 18.1679 10.9759 18.903 11.186L21.75 12L18.904 12.813C18.1689 13.0231 17.4994 13.4171 16.9587 13.9577C16.4181 14.4984 16.0241 15.1679 15.814 15.903L15 18.75L14.187 15.904C13.9769 15.1689 13.5829 14.4994 13.0423 13.9587C12.5016 13.4181 11.8321 13.0241 11.097 12.814L8.25 12L11.096 11.187C11.8311 10.9769 12.5006 10.5829 13.0413 10.0423C13.5819 9.50162 13.9759 8.83214 14.186 8.097L14.187 8.096Z"
    ></path>
    <path
      class="path"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke="black"
      fill="black"
      d="M6 14.25L5.741 15.285C5.59267 15.8785 5.28579 16.4206 4.85319 16.8532C4.42059 17.2858 3.87853 17.5927 3.285 17.741L2.25 18L3.285 18.259C3.87853 18.4073 4.42059 18.7142 4.85319 19.1468C5.28579 19.5794 5.59267 20.1215 5.741 20.715L6 21.75L6.259 20.715C6.40725 20.1216 6.71398 19.5796 7.14639 19.147C7.5788 18.7144 8.12065 18.4075 8.714 18.259L9.75 18L8.714 17.741C8.12065 17.5925 7.5788 17.2856 7.14639 16.853C6.71398 16.4204 6.40725 15.8784 6.259 15.285L6 14.25Z"
    ></path>
    <path
      class="path"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke="black"
      fill="black"
      d="M6.5 4L6.303 4.5915C6.24777 4.75718 6.15472 4.90774 6.03123 5.03123C5.90774 5.15472 5.75718 5.24777 5.5915 5.303L5 5.5L5.5915 5.697C5.75718 5.75223 5.90774 5.84528 6.03123 5.96877C6.15472 6.09226 6.24777 6.24282 6.303 6.4085L6.5 7L6.697 6.4085C6.75223 6.24282 6.84528 6.09226 6.96877 5.96877C7.09226 5.84528 7.24282 5.75223 7.4085 5.697L8 5.5L7.4085 5.303C7.24282 5.24777 7.09226 5.15472 6.96877 5.03123C6.84528 4.90774 6.75223 4.75718 6.697 4.5915L6.5 4Z"
    ></path>
  </svg>
  <span class="text_button">Generate Site</span>
</button>

<style>
/* From Uiverse.io by MuhammadHasann  - Website: https://twitter.com/jh3yy/status/1639001228985225228 - Name: Jhey - Tags: simple, neumorphism, button */
.button {
  --black-700: hsla(0 0% 12% / 1);
  --border_radius: 9999px;
  --transtion: 0.3s ease-in-out;
  --offset: 2px;

  cursor: pointer;
  position: relative;

  display: flex;
  align-items: center;
  gap: 0.5rem;

  transform-origin: center;

  padding: 1rem 2rem;
  background-color: transparent;

  border: none;
  border-radius: var(--border_radius);
  transform: scale(calc(1 + (var(--active, 0) * 0.1)));

  transition: transform var(--transtion);
}

.button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 100%;
  height: 100%;
  background-color: var(--black-700);

  border-radius: var(--border_radius);
  box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
    0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active, 0))),
    0 0 0 calc(var(--active, 0) * 0.375rem) hsl(260 97% 50% / 0.75);

  transition: all var(--transtion);
  z-index: 0;
}

.button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 100%;
  height: 100%;
  background-color: hsla(260 97% 61% / 0.75);
  background-image: radial-gradient(
      at 51% 89%,
      hsla(266, 45%, 74%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 100% 100%, hsla(266, 36%, 60%, 1) 0px, transparent 50%),
    radial-gradient(at 22% 91%, hsla(266, 36%, 60%, 1) 0px, transparent 50%);
  background-position: top;

  opacity: var(--active, 0);
  border-radius: var(--border_radius);
  transition: opacity var(--transtion);
  z-index: 2;
}

.button:is(:hover, :focus-visible) {
  --active: 1;
}
.button:active {
  transform: scale(1);
}

.button .dots_border {
  --size_border: calc(100% + 2px);

  overflow: hidden;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: var(--size_border);
  height: var(--size_border);
  background-color: transparent;

  border-radius: var(--border_radius);
  z-index: -10;
}

.button .dots_border::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left;
  transform: rotate(0deg);

  width: 100%;
  height: 2rem;
  background-color: white;

  mask: linear-gradient(transparent 0%, white 120%);
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.button .sparkle {
  position: relative;
  z-index: 10;

  width: 1.75rem;
}

.button .sparkle .path {
  fill: currentColor;
  stroke: currentColor;

  transform-origin: center;

  color: hsl(0, 0%, 100%);
}

.button:is(:hover, :focus) .sparkle .path {
  animation: path 1.5s linear 0.5s infinite;
}

.button .sparkle .path:nth-child(1) {
  --scale_path_1: 1.2;
}
.button .sparkle .path:nth-child(2) {
  --scale_path_2: 1.2;
}
.button .sparkle .path:nth-child(3) {
  --scale_path_3: 1.2;
}

@keyframes path {
  0%,
  34%,
  71%,
  100% {
    transform: scale(1);
  }
  17% {
    transform: scale(var(--scale_path_1, 1));
  }
  49% {
    transform: scale(var(--scale_path_2, 1));
  }
  83% {
    transform: scale(var(--scale_path_3, 1));
  }
}

.button .text_button {
  position: relative;
  z-index: 10;

  background-image: linear-gradient(
    90deg,
    hsla(0 0% 100% / 1) 0%,
    hsla(0 0% 100% / var(--active, 0)) 120%
  );
  background-clip: text;

  font-size: 1rem;
  color: transparent;
}

</style>
    

================================================
FILE: Buttons/MuhammadHasann_old-wombat-33.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by MuhammadHasann - Tags: button */
button {
  position: relative;
  padding: 18px 55px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(87deg, #6d67e4, #7743db, #4e31aa, #6d67e4, #6d67e4);
  background-size: 600% 600%;
  border: 3px solid #7743db;
  border-radius: 8px;
  /* filter: drop-shadow(0 0 4px #9F73AB); */
  box-shadow: inset 0 0 10px 1px #7743db, 0 0 10px 5px #7743db;
  cursor: pointer;
  transition: all 0.5s;
  animation: GradientAnimation 25s ease infinite;
}

button::after {
  content: "";
  position: absolute;
  width: 202px;
  height: 54px;
  top: 0;
  left: -17px;
  border: 5px solid #453c67;
  border-width: 0 2px 4px 0;
  border-radius: 100%;
  filter: drop-shadow(0px 0px 6px rgba(78, 49, 180, 1));
  transform: rotate(-30deg);
  animation: LinerAfter 15s ease infinite;
}

button::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 50px;
  top: 0;
  left: -20px;
  border: 5px solid #6d67e4;
  border-width: 0 12px 8px 4px;
  border-radius: 100%;
  filter: drop-shadow(0px 0px 6px rgba(109, 103, 228, 1));
  /* box-shadow: inset 0 0 10px 1px #4E31AA, 0 0 10px 5px #4E31AA; */
  transform: rotate(-30deg);
  transition: all 0.5s;
  animation: LinerBefore 15s ease infinite;
}

@keyframes GradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes LinerAfter {
  0% {
    left: -27px;
    height: 54px;
  }

  50% {
    left: -7px;
    height: 37px;
  }

  100% {
    left: -27px;
    height: 54px;
  }
}

@keyframes LinerBefore {
  0% {
    left: -30px;
    height: 50px;
  }

  50% {
    left: -10px;
    height: 33px;
  }

  100% {
    left: -30px;
    height: 50px;
  }
}

</style>


================================================
FILE: Buttons/MuhammadHasann_quick-goose-5.html
================================================
<div class="container-button">
  <div class="hover bt-1"></div>
  <div class="hover bt-2"></div>
  <div class="hover bt-3"></div>
  <div class="hover bt-4"></div>
  <div class="hover bt-5"></div>
  <div class="hover bt-6"></div>
  <button></button>
</div>
<style>
/* From Uiverse.io by MuhammadHasann - Tags: complex, 3d, button, hover */
.container-button {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "bt-1 bt-2 bt-3"
    "bt-4 bt-5 bt-6";
  position: relative;
  perspective: 800;
  padding: 0;
  width: 135px;
  height: 47px;
  transition: all 0.3s ease-in-out;
}

.container-button:active {
  transform: scale(0.95);
}

.hover {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 200;
}

.bt-1 {
  grid-area: bt-1;
}

.bt-2 {
  grid-area: bt-2;
}

.bt-3 {
  grid-area: bt-3;
}

.bt-4 {
  grid-area: bt-4;
}

.bt-5 {
  grid-area: bt-5;
}

.bt-6 {
  grid-area: bt-6;
}

.bt-1:hover ~ button {
  transform: rotateX(15deg) rotateY(-15deg) rotateZ(0deg);
  box-shadow: -2px -2px #18181888;
}

.bt-1:hover ~ button::after {
  animation: shake 0.5s ease-in-out 0.3s;
  text-shadow: -2px -2px #18181888;
}

.bt-3:hover ~ button {
  transform: rotateX(15deg) rotateY(15deg) rotateZ(0deg);
  box-shadow: 2px -2px #18181888;
}

.bt-3:hover ~ button::after {
  animation: shake 0.5s ease-in-out 0.3s;
  text-shadow: 2px -2px #18181888;
}

.bt-4:hover ~ button {
  transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg);
  box-shadow: -2px 2px #18181888;
}

.bt-4:hover ~ button::after {
  animation: shake 0.5s ease-in-out 0.3s;
  text-shadow: -2px 2px #18181888;
}

.bt-6:hover ~ button {
  transform: rotateX(-15deg) rotateY(15deg) rotateZ(0deg);
  box-shadow: 2px 2px #18181888;
}

.bt-6:hover ~ button::after {
  animation: shake 0.5s ease-in-out 0.3s;
  text-shadow: 2px 2px #18181888;
}

.hover:hover ~ button::before {
  background: transparent;
}

.hover:hover ~ button::after {
  content: "Click";
  top: -150%;
  transform: translate(-50%, 0);
  font-size: 34px;
  color: #f19c2b;
}

button {
  position: absolute;
  padding: 0;
  width: 135px;
  height: 47px;
  background: transparent;
  font-size: 17px;
  font-weight: 900;
  border: 3px solid #f39923;
  border-radius: 12px;
  transition: all 0.3s ease-in-out;
}

button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 135px;
  height: 47px;
  background-color: #f5ae51;
  border-radius: 12px;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

button::after {
  content: "Hover";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 135px;
  height: 47px;
  background-color: transparent;
  font-size: 17px;
  font-weight: 900;
  line-height: 47px;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  transition: all 0.3s ease-in-out;
  z-index: 2;
}

@keyframes shake {
  0% {
    left: 45%;
  }

  25% {
    left: 54%;
  }

  50% {
    left: 48%;
  }

  75% {
    left: 52%;
  }

  100% {
    left: 50%;
  }
}
</style>


================================================
FILE: Buttons/MuhammadHasann_silent-lizard-44.html
================================================
<button>Button
  <div class="star-1">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-2">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-3">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-4">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-5">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-6">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
</button>
<style>
/* From Uiverse.io by MuhammadHasann - Tags: button, hover, star */
button {
  position: relative;
  padding: 12px 35px;
  background: #FEC195;
  font-size: 17px;
  font-weight: 500;
  color: #181818;
  border: 3px solid #FEC195;
  border-radius: 8px;
  box-shadow: 0 0 0 #fec1958c;
  transition: all .3s ease-in-out;
}

.star-1 {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}

.star-2 {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-3 {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-4 {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-5 {
  position: absolute;
  top: 25%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-6 {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all .8s ease;
}

button:hover {
  background: transparent;
  color: #FEC195;
  box-shadow: 0 0 25px #fec1958c;
}

button:hover .star-1 {
  position: absolute;
  top: -80%;
  left: -30%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}

button:hover .star-2 {
  position: absolute;
  top: -25%;
  left: 10%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}

button:hover .star-3 {
  position: absolute;
  top: 55%;
  left: 25%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}

button:hover .star-4 {
  position: absolute;
  top: 30%;
  left: 80%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}

button:hover .star-5 {
  position: absolute;
  top: 25%;
  left: 115%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}

button:hover .star-6 {
  position: absolute;
  top: 5%;
  left: 60%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}

.fil0 {
  fill: #FFFDEF
}
</style>


================================================
FILE: Buttons/MuhammadHasann_slimy-fish-99.html
================================================
<button>
  <div class="svg-1">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 58.56 116.18" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M51.68 79.32c-5.6,0.48 -18.01,6.61 -22.08,10.58 -0.8,0.78 -1.48,1.77 -2.33,2.43 0.46,-1.76 1.17,-3.5 1.71,-5.18 2.05,-6.36 0.6,-3.94 6.72,-6.92 4.39,-2.13 7.93,-4.39 11.48,-7.91 2.87,-2.84 6.6,-7.49 8.43,-10.95 -3.22,0.75 -8.91,3.73 -12.2,5.14 -3.4,1.56 -7.64,4.64 -10.05,7.42l1.92 -7.77c0.18,-0.6 12.35,-10.32 15.54,-15.33 3.24,-5.07 5.83,-12.73 7.72,-18.52 -3.83,2.95 -11.19,10.7 -14.1,14.29 -2.1,2.58 -4.06,5.29 -6.05,7.95 0.13,-1.52 1.01,-4.66 1.36,-6.17 2.16,-9.19 5.06,-41.4 -1.01,-48.38 0,3.22 -1.49,12.51 -2.05,15.9 -1.29,7.79 -4.08,25.67 -3.07,33.01l0.47 8.51c0.07,2.12 -0.24,6.17 -1.45,7.91 0,-8.9 -9.67,-35.19 -16.51,-40.2 0,5.82 4.29,23.1 6.2,27.9 1.71,4.29 4.8,10.38 7.54,14 1.93,2.55 2.5,2.41 -0.02,9.43l-3.29 11.08 -3.9 -12.16c-2.78,-6.77 -11.01,-23.67 -15.86,-26.92 0,11.78 8.37,33.86 19.11,40.13 -0.29,2.07 -3.42,10.31 -4.93,11.77 -1.78,-10.97 -7.2,-20.86 -13.98,-29.49l-7.03 -8.05c0.06,2.73 1.9,7.3 2.51,10.1 0.36,0.47 3.98,11.12 9.2,19.09 2.49,3.81 6.41,7.11 8.48,10.28 -1.04,3.19 -5.75,9.78 -8.03,12.98l1.81 0.91c2.75,-2.62 8.6,-12.41 9.74,-15.89 6.1,-3.14 7.06,-2.33 14.56,-7.45 5.18,-3.54 5.49,-4.51 8.86,-8.02 1.06,-1.1 4.21,-4.24 4.55,-5.5z" class="fil0"></path></g></svg>
  </div>
  <p>Button</p>
</button>
<style>
/* From Uiverse.io by MuhammadHasann - Tags: button, light, glow */
button {
  position: relative;
  padding: 0;
  width: 135px;
  height: 65px;
  background: transparent;
  font-size: 17px;
  border: 1px solid #ffffff1c;
  border-radius: 8px;
  box-shadow: inset 0 0 10px #ffffff1c;
}

button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 135px;
  height: 65px;
  background: radial-gradient(circle at 100% -50%, #ffffff69 45%, #d4d4d44f 60%, #ffffff36 2%);
  /* background-size: 200%; */
  background-repeat: no-repeat;
  filter: opacity(.3) blur(.3em);
}

button::after {
  content: "";
  position: absolute;
  top: 120%;
  left: 0;
  transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
  height: 100%;
  width: 100%;
  background-color: #fbfd7b;
  filter: blur(2em);
  opacity: 0;
  pointer-events: none;
}

button p {
  display: inline-block;
  width: 135px;
  line-height: 65px;
  font-size: 17px;
  font-weight: 900;
  color: #d6d6d6;
  filter: blur(.02em);
  z-index: 5;
}

button .svg-1 {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(0, -50%) rotate(45deg);
  width: 2.5rem;
  height: auto;
  filter: blur(.1rem) opacity(.5);
  z-index: -5;
}

.fil0 {
  fill: #935E28
}

button:hover {
  filter: blur(.05em);
  animation: lightBox 1s ease-in-out forwards;
}

button:hover::after {
  animation: light 1s ease-in-out forwards;
}

button:hover p {
  animation: lightText 1s ease-in-out forwards;
}

@keyframes lightBox {
  0% {
    border: 1px solid #fbfd7b;
    box-shadow: 0 0 5px 0px #fbfd7b8a, inset 0 0 10px #fbfd7b8a;
  }

  20% {
    border: 1px solid #ffffff1c;
    box-shadow: none;
  }

  30% {
    border: 1px solid #fbfd7b;
    box-shadow: 0 0 10px 0px #fbfd7b8a, inset 0 0 15px #fbfd7b8a;
  }

  38% {
    border: 1px solid #ffffff1c;
    box-shadow: none;
  }

  45% {
    border: 1px solid #fbfd7b;
    box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 20px #fbfd7b8a;
  }

  50% {
    border: 1px solid #ffffff1c;
    box-shadow: none;
  }

  53% {
    border: 1px solid #fbfd7b;
    box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 25px #fbfd7b8a;
  }

  65% {
    border: 1px solid #ffffff1c;
    box-shadow: none;
  }

  100% {
    border: 1px solid #fbfd7b;
    box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 25px #fbfd7b8a;
  }
}

@keyframes light {
  0% {
    opacity: .7;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: .7;
  }

  38% {
    opacity: 0;
  }

  45% {
    opacity: .7;
  }

  50% {
    opacity: 0;
  }

  53% {
    opacity: .7;
  }

  65% {
    opacity: 0;
  }

  100% {
    opacity: .7;
  }
}

@keyframes lightText {
  0% {
    color: #fbfd7b;
    text-shadow: 0 0 5px #fbfd7b8a;
  }

  20% {
    color: #ffffff;
    text-shadow: none;
  }

  30% {
    color: #fbfd7b;
    text-shadow: 0 0 10px #fbfd7b8a;
  }

  38% {
    color: #ffffff;
    text-shadow: none;
  }

  45% {
    color: #fbfd7b;
    text-shadow: 0 0 15px #fbfd7b8a;
  }

  50% {
    color: #ffffff;
    text-shadow: none;
  }

  53% {
    color: #fbfd7b;
    text-shadow: 0 0 15px #fbfd7b8a;
  }

  65% {
    color: #ffffff;
    text-shadow: none;
  }

  100% {
    color: #fbfd7b;
    text-shadow: 0 0 15px #fbfd7b8a;
  }
}
</style>


================================================
FILE: Buttons/MuhammadHasann_smart-turkey-26.html
================================================
 <button>Button
  <p>Button</p>
  <p>Button</p>
  <p>Button</p>
  <p>Button</p>
</button>
<style>
/* From Uiverse.io by MuhammadHasann - Tags: button */
button {
  position: relative;
  padding: 13px 35px;
  background: #2e323c;
  font-size: 17px;
  font-weight: 900;
  color: #FFF;
  border: 3px solid #2e323c;
  border-radius: 8px;
  transition: all .3s ease-in-out;
}

p:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17px;
  font-weight: 900;
  color: #FFF;
  transition: all .3s ease-in-out;
  z-index: -5;
}

p:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17px;
  font-weight: 900;
  color: #FFF;
  transition: all .3s ease-in-out;
  z-index: -5;
}

p:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17px;
  font-weight: 900;
  color: #FFF;
  transition: all .3s ease-in-out;
  z-index: -5;
}

p:nth-child(4) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17px;
  font-weight: 900;
  color: #FFF;
  transition: all .3s ease-in-out;
  z-index: -5;
}

button:hover {
  background: transparent;
  box-shadow: 0 0 15px #2e323c;
}

button:hover p:nth-child(1) {
  top: 0%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}

button:hover p:nth-child(2) {
  top: -50%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}

button:hover p:nth-child(3) {
  top: 100%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}

button:hover p:nth-child(4) {
  top: 150%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}

button:active p:nth-child(1) {
  top: -20%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}

button:active p:nth-child(2) {
  top: -90%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}

button:active p:nth-child(3) {
  top: 120%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}

button:active p:nth-child(4) {
  top: 190%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}
</style>


================================================
FILE: Buttons/MuhammadHasann_smooth-stingray-40.html
================================================
<button>Button
  <div class="icon-1">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 58.56 116.18" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M51.68 79.32c-5.6,0.48 -18.01,6.61 -22.08,10.58 -0.8,0.78 -1.48,1.77 -2.33,2.43 0.46,-1.76 1.17,-3.5 1.71,-5.18 2.05,-6.36 0.6,-3.94 6.72,-6.92 4.39,-2.13 7.93,-4.39 11.48,-7.91 2.87,-2.84 6.6,-7.49 8.43,-10.95 -3.22,0.75 -8.91,3.73 -12.2,5.14 -3.4,1.56 -7.64,4.64 -10.05,7.42l1.92 -7.77c0.18,-0.6 12.35,-10.32 15.54,-15.33 3.24,-5.07 5.83,-12.73 7.72,-18.52 -3.83,2.95 -11.19,10.7 -14.1,14.29 -2.1,2.58 -4.06,5.29 -6.05,7.95 0.13,-1.52 1.01,-4.66 1.36,-6.17 2.16,-9.19 5.06,-41.4 -1.01,-48.38 0,3.22 -1.49,12.51 -2.05,15.9 -1.29,7.79 -4.08,25.67 -3.07,33.01l0.47 8.51c0.07,2.12 -0.24,6.17 -1.45,7.91 0,-8.9 -9.67,-35.19 -16.51,-40.2 0,5.82 4.29,23.1 6.2,27.9 1.71,4.29 4.8,10.38 7.54,14 1.93,2.55 2.5,2.41 -0.02,9.43l-3.29 11.08 -3.9 -12.16c-2.78,-6.77 -11.01,-23.67 -15.86,-26.92 0,11.78 8.37,33.86 19.11,40.13 -0.29,2.07 -3.42,10.31 -4.93,11.77 -1.78,-10.97 -7.2,-20.86 -13.98,-29.49l-7.03 -8.05c0.06,2.73 1.9,7.3 2.51,10.1 0.36,0.47 3.98,11.12 9.2,19.09 2.49,3.81 6.41,7.11 8.48,10.28 -1.04,3.19 -5.75,9.78 -8.03,12.98l1.81 0.91c2.75,-2.62 8.6,-12.41 9.74,-15.89 6.1,-3.14 7.06,-2.33 14.56,-7.45 5.18,-3.54 5.49,-4.51 8.86,-8.02 1.06,-1.1 4.21,-4.24 4.55,-5.5z" class="fil0"></path></g></svg>
  </div>
  <div class="icon-2">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 55.37 64.87" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M17.94 25.14c-0.18,-1.53 1.57,-1.52 1.75,-0.4 0.06,0.34 0.08,0.73 0.12,1.08 0.96,7.92 2.52,16.37 6.09,23.51 0.84,1.68 2.15,3.87 3.34,5.34l1.71 1.96c0.21,0.21 0.41,0.44 0.63,0.62 0.14,0.11 0.2,0.14 0.33,0.27 0.11,0.1 0.19,0.19 0.31,0.29 0.46,0.39 0.89,0.75 1.39,1.12 1.42,1.03 3.07,1.95 4.78,2.59 4.8,1.81 10.13,1.83 15.23,1.06 0.68,-0.1 1.49,-0.25 1.7,0.53 0.1,0.38 -0.02,0.7 -0.25,0.91 -0.25,0.23 -0.57,0.25 -0.95,0.31 -6.48,1.02 -13.05,0.8 -18.88,-2.26 -0.54,-0.28 -1.06,-0.59 -1.55,-0.91 -1.08,-0.69 -1.86,-1.29 -2.8,-2.12 -1.08,-0.95 -2.08,-2.07 -2.99,-3.18 -0.09,-0.11 -0.19,-0.22 -0.27,-0.33 -0.11,-0.14 -0.14,-0.2 -0.25,-0.35 -0.67,-0.86 -1.38,-1.96 -1.97,-3 -1.94,-3.37 -3.24,-6.71 -4.35,-10.45 -1.57,-5.32 -2.45,-10.73 -3.12,-16.59zm12.76 2.95l-0.16 0.32c-0.03,0.1 -0.06,0.19 -0.1,0.31 -0.07,0.23 -0.11,0.41 -0.1,0.68 0.7,0.23 2.41,-0.38 3.05,-0.59 0.89,-0.28 2.2,-0.58 3.26,-0.52 0.54,0.11 0.77,0.01 1.5,0.32 1.35,0.57 1.98,1.9 1.88,3.46 -0.18,2.6 -1.89,5.58 -3.27,7.62 -1.14,1.69 -1.96,2.53 -2.55,4.68 -0.14,0.52 -0.58,2.64 -0.37,3.11 0.04,0.78 0.27,1.67 0.88,1.87 0.69,0.23 1.58,-0.27 2.09,-0.51 1.19,-0.57 2.65,-1.28 4.2,-1.17 0.47,0.17 0.93,0.28 1.29,0.82 0.89,1.35 0.28,3.98 -0.03,5.37 -0.56,2.55 -1.02,4.24 -2.3,6.18 -0.98,1.5 -2.32,0.23 -1.64,-0.79l0.79 -1.31c0.25,-0.47 0.44,-0.95 0.62,-1.49 0.29,-0.85 1.81,-6.41 0.98,-6.99 -0.73,-0.15 -2.4,0.67 -3.05,0.96 -0.92,0.41 -1.89,0.96 -3.13,0.76 -1.1,-0.18 -1.79,-0.94 -2.15,-1.86 -0.92,-2.34 -0.05,-5.92 1.17,-8.12 0.31,-0.56 1.18,-1.73 1.62,-2.39 1.23,-1.84 3.04,-4.85 3.04,-7.02 -0,-1.47 -0.98,-1.79 -2.39,-1.65 -2.03,0.2 -4.88,1.83 -6.51,0.78 -1.77,-1.14 -0.01,-4.42 0.72,-5.77 0.94,-1.77 1.85,-3.64 2.25,-5.76 0.22,-1.16 0.3,-2.53 -0.22,-3.5 -0.63,-1.19 -1.54,-0.93 -2.94,-0.72 -1.97,0.3 -5.63,0.78 -5.21,-2.29 0.13,-0.97 0.68,-2.13 1.08,-2.94 0.81,-1.65 -0.34,-3.83 -1.4,-5.04 -0.81,-0.93 -1.35,-1.61 -2.77,-2.25 -1.96,-0.88 -4.54,-1.12 -6.78,-0.45 -1.07,0.32 -1.99,0.83 -2.56,1.45 -0.81,0.88 -0.88,1.98 -0.58,3.1 0.53,2 2.19,4.52 1.75,6.1 -0.65,2.33 -4.54,1.44 -6.24,1.38 -0.62,-0.02 -1.3,-0.07 -1.84,0.13 -0.53,0.2 -0.75,0.54 -0.87,1.14 -0.26,1.27 0.26,2.13 0.74,3.07 0.96,1.86 1.9,4.14 -0.72,5.38 -1.17,0.56 -1.73,0.29 -1.91,1.1 -0.07,0.3 -0.05,0.56 -0.02,0.88 0.18,1.78 1.57,3.95 3.47,4.56 1.85,0.6 3.93,1.44 5.46,2.57 3.24,2.38 2.89,5.46 -0.07,7.33 -0.41,0.26 -0.82,0.49 -1.28,0.73 -1.52,0.82 -2.36,2.16 -1.84,3.96 0.53,1.85 2.28,3.21 4.28,3.75 1.03,0.28 2.47,0.35 3.59,0.45 1.21,0.11 2.41,0.26 3.56,0.47 0.8,0.15 2.38,0.53 2.84,1.18 1.14,1.63 -0.3,2.83 -1.1,4.06 -1.1,1.71 -1.07,2.84 0.76,3.8 2.11,1.1 5.85,1.41 8.43,1.62 0.49,0.04 1.37,0.01 1.7,0.3 0.35,0.31 0.39,1.03 0,1.36 -0.4,0.34 -1.09,0.2 -1.72,0.15 -4.21,-0.34 -14.48,-1.03 -11,-7.64 0.29,-0.54 0.46,-0.75 0.79,-1.22 0.17,-0.25 0.72,-0.88 0.75,-1.25 -0.51,-0.55 -3.45,-0.86 -4.45,-0.96 -1.52,-0.16 -3.44,-0.23 -4.78,-0.63 -0.86,-0.25 -2.06,-0.78 -2.74,-1.33 -0.27,-0.22 -0.53,-0.4 -0.74,-0.62 -0.44,-0.44 -0.82,-0.86 -1.21,-1.5 -0.34,-0.56 -0.64,-1.22 -0.78,-1.92 -0.35,-1.69 0.16,-3.13 0.99,-4.16 0.96,-1.19 2.01,-1.47 3.17,-2.25 1.32,-0.89 1.83,-2.13 0.73,-3.4 -0.71,-0.82 -1.97,-1.57 -3.23,-2.14 -0.61,-0.27 -1.27,-0.54 -1.94,-0.77 -0.7,-0.24 -1.38,-0.43 -1.94,-0.77 -2.17,-1.32 -4.07,-4.74 -3.37,-7.22 0.53,-1.86 2.03,-1.63 3.09,-2.28 0.72,-0.45 0.4,-1.23 0.08,-1.9 -0.89,-1.87 -2.23,-3.88 -0.97,-6.21 1.74,-3.2 6.8,-0.58 8.6,-1.68 0.09,-0.82 -1.14,-3.25 -1.52,-4.39 -0.59,-1.77 -0.75,-3.18 0.19,-4.78 1.36,-2.32 4.94,-3.53 8.6,-3.1 1.68,0.2 3.16,0.69 4.44,1.48 2.22,1.36 4.56,4.61 4.45,7.38 -0.04,0.91 -0.37,1.53 -0.7,2.25 -0.2,0.45 -0.78,1.66 -0.69,2.23 1.33,0.67 4.4,-0.75 6.12,-0.06 1.64,0.66 2.44,2.24 2.44,4.47 0,2.61 -1.32,5.68 -2.5,7.91 -0.21,0.4 -1.09,2.03 -1.07,2.36z" class="fil0"></path></g></svg>
  </div>
</button>
<style>
/* From Uiverse.io by MuhammadHasann - Tags: button */
button {
  position: relative;
  padding: 15px 35px;
  font-size: 15px;
  font-weight: bold;
  color: #2F5C2F;
  background-color: transparent;
  border: 3px solid #2F5C2F;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.5s;
}

button::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 10px;
  left: 10px;
  background-color: #D5A084;
  border-radius: 8px;
  z-index: -1;
  transition: all 0.5s;
}

button:hover::after {
  top: 0;
  left: 0;
}

.icon-1 {
  position: absolute;
  width: 15%;
  top: 10px;
  right: 15px;
  color: #2F5C2F;
  transform-origin: 100% 100%;
  transform: rotate(-25deg) translateX(120%) translateY(20%);
  z-index: -1;
  transition: all 0.5s;
}

button:hover .icon-1 {
  width: 25%;
  transform: rotate(10deg) translateX(110%) translateY(-40%);
}

.icon-2 {
  position: absolute;
  width: 15%;
  top: 20px;
  left: 10px;
  color: #2F5C2F;
  transform-origin: 100% 100%;
  z-index: -1;
  transition: all 0.5s;
}

button:hover .icon-2 {
  width: 50%;
  top: -40px;
  left: -80px;
  transform: rotate(90deg);
  z-index: 1;
}
</style>


================================================
FILE: Buttons/MuhammadHasann_tough-tiger-78.html
================================================
<div class="button-cont">
  <button class="button">Light Button</button>
</div>

<style>
/* From Uiverse.io by MuhammadHasann  - Tags: simple, glassmorphism, blue, button, shadow */
.button-cont {
  position: relative;
  width: fit-content;
  height: fit-content;
  border-radius: 9999px;
}

.button-cont::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background: #06b5d4;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.8;
  transition: all 0.6s cubic-bezier(1, 0, 0, 1);
}

.button-cont:hover::before {
  width: 100%;
  height: 25px;
}

.button {
  cursor: pointer;
  position: relative;
  padding: 20px 48px;
  background-color: #083344;
  font-size: 16px;
  color: #fefefe;
  font-weight: 500;
  border: none;
  border-radius: 9999px;
  backdrop-filter: blur(4px);
  box-shadow: inset 0px 1px 1px #67e8f9;
  transition: all 0.3s ease-in-out, box-shadow 0.1s ease-in-out;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 0;
  height: 0;
  border-radius: 50%;
  box-shadow: 0px 0px 25px 3px #67e8f97e;
  transition: all 0.5s cubic-bezier(1, 0, 0, 1);
}

.button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 0;
  height: 0;
  background-image: linear-gradient(
    to right,
    #06b5d400,
    #4ec4db00,
    #72d0e200,
    #90ddea3d,
    #ace9f277,
    #ace9f2,
    #ace9f2,
    #ace9f277,
    #90ddea3d,
    #72d0e200,
    #4ec3db00,
    #06b6d400
  );
  border-radius: 0 0 50% 50%;
  opacity: 0.8;
  filter: drop-shadow(0px 0px 30px #06b6d4);
  transition: all 0.5s cubic-bezier(1, 0, 0, 1);
}

.button-cont:hover .button {
  background: #18181898;
  box-shadow: inset 0px 0px 0px #fefefe;
}

.button-cont:hover .button::before {
  width: 30%;
  height: 2px;
}

.button-cont:hover .button::after {
  width: 100%;
  height: 2px;
}

</style>
    

================================================
FILE: Buttons/MusKRI_wise-pig-77.html
================================================
<button class="button">
  <span></span>
  Button
  <span></span>
</button>
<style>
/* From Uiverse.io by MusKRI - Source: https://www.youtube.com/watch?v=e3w9liPXSi4 - Tags: button, active, ripple */
.button {
  padding: 15px 40px;
  background: linear-gradient(to right, #09021c, #0c061d);
  color: white;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 300ms ease-in-out;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.button > span {
  position: absolute;
  z-index: -1;
  background: transparent;
  opacity: 0.5;
  width: 33.333%;
  height: 100%;
}

.button > :first-child {
  left: 0;
  top: 0;
}

.button > :last-child {
  right: 0;
  top: 0;
}

.button::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: hsl(236, 19%, 25%);
  opacity: 0;
  width: 10%;
  aspect-ratio: 1;
  border-radius: 50%;
  inset: 0;
  margin: auto;
  transition: opacity 1000ms 200ms ease-in-out, transform 200ms ease-in-out;
}

.button:active::before {
  transform: scale(13);
  opacity: 1;
  transition: all 400ms ease-in-out;
}

.button:has(:first-child:active)::before {
  margin-left: 0;
}

.button:has(:last-child:active)::before {
  margin-right: 0;
}

.button:has(:first-child:active)::before,
.button:has(:last-child:active)::before {
  transition: all 400ms ease-in-out;
}
</style>


================================================
FILE: Buttons/NAKAMOZ_cowardly-vampirebat-40.html
================================================
<button>
  Hover Me
</button>
<style>
/* From Uiverse.io by NAKAMOZ - Tags: button */
button {
  cursor: pointer;
  background-color: transparent;
  color: white;
  border: none;
  font-size: 17px;
  position: relative;
  z-index: 3;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

button::before {
  content: "";
  border: 3px solid white;
  position: absolute;
  left: -25px;
  bottom: 0;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 60px;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

button:hover::before {
  left: -25px;
  bottom: -17.5px;
  width: 100%;
  padding: 20px;
  background-color: white;
  z-index: -1;
}

button:hover {
  color: #282828;
}

</style>


================================================
FILE: Buttons/Na3ar-17_fuzzy-penguin-47.html
================================================
<div class="container">
  <button class="button">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      class="icon"
    >
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <path
          fill="#000000"
          d="M14.2199 21.63C13.0399 21.63 11.3699 20.8 10.0499 16.83L9.32988 14.67L7.16988 13.95C3.20988 12.63 2.37988 10.96 2.37988 9.78001C2.37988 8.61001 3.20988 6.93001 7.16988 5.60001L15.6599 2.77001C17.7799 2.06001 19.5499 2.27001 20.6399 3.35001C21.7299 4.43001 21.9399 6.21001 21.2299 8.33001L18.3999 16.82C17.0699 20.8 15.3999 21.63 14.2199 21.63ZM7.63988 7.03001C4.85988 7.96001 3.86988 9.06001 3.86988 9.78001C3.86988 10.5 4.85988 11.6 7.63988 12.52L10.1599 13.36C10.3799 13.43 10.5599 13.61 10.6299 13.83L11.4699 16.35C12.3899 19.13 13.4999 20.12 14.2199 20.12C14.9399 20.12 16.0399 19.13 16.9699 16.35L19.7999 7.86001C20.3099 6.32001 20.2199 5.06001 19.5699 4.41001C18.9199 3.76001 17.6599 3.68001 16.1299 4.19001L7.63988 7.03001Z"
        ></path>
        <path
          fill="#000000"
          d="M10.11 14.4C9.92005 14.4 9.73005 14.33 9.58005 14.18C9.29005 13.89 9.29005 13.41 9.58005 13.12L13.16 9.53C13.45 9.24 13.93 9.24 14.22 9.53C14.51 9.82 14.51 10.3 14.22 10.59L10.64 14.18C10.5 14.33 10.3 14.4 10.11 14.4Z"
        ></path>
      </g>
    </svg>
    <p class="text">
      <span style="transition-duration: 100ms">S</span>
      <span style="transition-duration: 150ms">e</span>
      <span style="transition-duration: 200ms">n</span>
      <span style="transition-duration: 250ms">d</span>
      <span class="tab"></span>
      <span style="transition-duration: 350ms">M</span>
      <span style="transition-duration: 400ms">e</span>
      <span style="transition-duration: 450ms">s</span>
      <span style="transition-duration: 500ms">s</span>
      <span style="transition-duration: 550ms">a</span>
      <span style="transition-duration: 600ms">g</span>
      <span style="transition-duration: 650ms">e</span>
    </p>
  </button>
</div>

<style>
/* From Uiverse.io by Na3ar-17  - Tags: icon, animation, white, button, hover, active, rounded, smooth */
.container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container * {
  border: none;
  outline: none;
}

.button {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: end;
  cursor: pointer;
  width: 200px;
  height: 65px;
  border-radius: 13px;
  font-size: 18px;
  font-weight: 500;
  background-color: #f9fbf9;
  border: 3px solid #b7b8b7;
  -webkit-box-shadow: 0px 10px 24px 0px rgba(214, 215, 214, 1);
  -moz-box-shadow: 0px 10px 24px 0px rgba(214, 215, 214, 1);
  box-shadow: 0px 10px 24px 0px rgba(214, 215, 214, 1);
  overflow: hidden;
  padding: 0px 13px;
  border-top-color: #d3d3d3;
  border-bottom-color: #7e7f7e;
  transition: all 0.3s ease;
}

.button .icon {
  aspect-ratio: 1/1;
  width: 25px;
  z-index: 10;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 30px;
}

.button .text {
  z-index: 10;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.button .text .tab {
  margin: 0px 2px;
}
.button .text span {
  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 190px;
  height: 52px;
  background-color: #fff;
  border-radius: 50px;
  -webkit-box-shadow: inset 0px 10px 50px -40px rgba(66, 68, 90, 1);
  -moz-box-shadow: inset 0px 10px 50px -40px rgba(66, 68, 90, 1);
  box-shadow: inset 0px 10px 50px -40px rgba(66, 68, 90, 1);
  transition: all 0.3s ease;
}

.button:hover::before {
  width: 200px;
  height: 64px;
  border-radius: 13px;
  -webkit-box-shadow: inset 0px -10px 50px -40px rgba(66, 68, 90, 1);
  -moz-box-shadow: inset 0px -10px 50px -40px rgba(66, 68, 90, 1);
  box-shadow: inset 0px -10px 50px -40px rgba(66, 68, 90, 1);
}

.button:hover .text span {
  transform: translateY(80px);
  opacity: 0;
}

.button:hover .icon {
  width: 35px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.button:active {
  transform: translateY(5px);
}

</style>
    

================================================
FILE: Buttons/Na3ar-17_shy-firefox-86.html
================================================
<button class="button">
  <svg
    viewBox="0 0 24 24"
    fill="none"
    height="24"
    width="24"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    class="icon"
  >
    <path
      d="M5 12h14m-7 7V5"
      stroke-width="2"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke="currentColor"
    ></path>
  </svg>

  Create Task
</button>

<style>
/* From Uiverse.io by Na3ar-17  - Tags: simple, icon, animation, button */
.button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  font-weight: 500;
  background-color: #268bff;
  color: white;
  border: none;
  gap: 2px;
  border-radius: 8px;
  padding: 4px 8px;
}

.button .icon {
  width: 20px;
}

.button:hover {
  background-color: #268bffaf;
}
.button:active {
  transform: translateY(2px);
}

</style>
    

================================================
FILE: Buttons/Na3ar-17_sweet-horse-64.html
================================================
<div class="container"><button class="button">Hover me</button></div>

<style>
/* From Uiverse.io by Na3ar-17  - Tags: simple, action, button, hover button */
.container {
  * {
    outline: none;
    border: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
  }
}

.button {
  width: 140px;
  height: 32px;
  border-radius: 0.375rem;
  cursor: pointer;
  margin-top: 1rem;
  background-image: linear-gradient(#268bff, hsl(252, 82%, 57%));
  transition: all 0.3s ease;
  color: #fff;
  font-weight: 600;
}

.button:hover {
  -webkit-animation: pulse 2s infinite;
  animation: pulse512 1.5s infinite;
  letter-spacing: 2px;
}

.button:active {
  transform: translateY(4px);
}

@keyframes pulse512 {
  0% {
    box-shadow: 0 0 0 0 rgba(5, 186, 218, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(218, 103, 68, 0%);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(218, 103, 68, 0%);
  }
}

</style>
    

================================================
FILE: Buttons/NabeelAhmadK_fat-fox-21.html
================================================
<button>
    Button
</button>
<style>
/* From Uiverse.io by NabeelAhmadK - Tags: button */
button {
  width: fit-content;
  height: 45px;
  background: #ffffff0d;
  border-radius: 8px;
  border: 2px solid #334b79;
  font-size: 15px;
  font-weight: bold;
  color: #334b79;
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  position: relative;
  overflow: hidden;
  padding: 10px 25px;
  z-index: 1;
}

button:before {
  width: 50%;
  height: 100%;
  content: "";
  margin: auto;
  position: absolute;
  top: 0%;
  left: -50%;
  background: #334b79;
  transition: all 0.5s ease;
  z-index: -1;
}

button:after {
  width: 50%;
  height: 100%;
  content: "";
  margin: auto;
  position: absolute;
  top: 0%;
  left: 100%;
  background: #334b79;
  transition: all 0.5s ease;
  z-index: -1;
}

button:hover {
  color: white;
  cursor: pointer;
}

button:hover:before {
  top: 0;
  left: 0;
}

button:hover:after {
  top: 0;
  left: 50%;
}
</style>


================================================
FILE: Buttons/Navarog21_loud-bird-67.html
================================================
<button>
    Hover me
</button>
<style>
/* From Uiverse.io by Navarog21 - Tags: button */
button {
  width: 10em;
  position: relative;
  height: 3.5em;
  border: 3px ridge #149CEA;
  outline: none;
  background-color: transparent;
  color: white;
  transition: 1s;
  border-radius: 0.3em;
  font-size: 16px;
  font-weight: bold;
}

button::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #212121;
  transition: 0.5s;
  transform-origin: center;
}

button::before {
  content: "";
  transform-origin: center;
  position: absolute;
  top: 80%;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #212121;
  transition: 0.5s;
}

button:hover::before, button:hover::after {
  transform: scale(0)
}

button:hover {
  box-shadow: inset 0px 0px 25px #1479EA;
}
</style>


================================================
FILE: Buttons/Navarog21_orange-vampirebat-22.html
================================================
<button>

<div class="state" id="moon">Send</div>
<div class="state" id="sun">Send</div>
<span class="lightRotation"></span>
<span class="lightRotation2"></span>
<span class="lightRotation3"></span>
<span class="lightRotation4"></span>
</button>
<style>
/* From Uiverse.io by Navarog21 - Tags: button */
button {
  --sunGradient: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
  --moonGradient: linear-gradient(to top, #cc208e 0%, #6713d2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 140px;
  height: 60px;
  color: white;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 15px;
  background-color: transparent;
  transition: 0.5s;
  overflow: hidden;
  border: 4px solid black;
}

button:hover {
  box-shadow: -15px -15px 500px white;
  transition: 0.2s;
}

button:hover span {
  background: var(--sunGradient);
}

.state {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: inherit;
  transition: 0.4s;
  width: 85%;
  height: 82%;
  border: 4px solid black;
}

#sun {
  display: none;
  background-color: #212121;
  opacity: 0.85;
}

#moon {
  background-color: #212121;
  opacity: 0.85;
}

button:hover #sun {
  display: flex;
}

button:hover #moon {
  display: none;
}

button:hover .lightRotation {
  animation: 1s linear reverse infinite rotation413;
}

button:hover .lightRotation2 {
  animation: 2s linear infinite rotation_413;
}

button:hover .lightRotation3 {
  animation: 10s linear reverse infinite rotation_413;
}

button:hover .lightRotation4 {
  animation: 3s linear infinite rotation_413;
}

.lightRotation {
  position: absolute;
  transition: 0.4s;
  z-index: -1;
  width: 60px;
  height: 500px;
  transform: rotate(50deg);
  border-radius: inherit;
  background: var(--moonGradient);
}

.lightRotation2 {
  position: absolute;
  transition: 0.4s;
  z-index: -1;
  width: 75px;
  height: 500px;
  transform: rotate(110deg);
  border-radius: inherit;
  background: var(--moonGradient);
}

.lightRotation3 {
  position: absolute;
  transition: 0.4s;
  z-index: -1;
  width: 40px;
  height: 260px;
  border-radius: inherit;
  background: var(--moonGradient);
}

.lightRotation4 {
  position: absolute;
  transition: 0.4s;
  z-index: -1;
  width: 24px;
  height: 220px;
  transform: rotate(100deg);
  border-radius: inherit;
  background: var(--moonGradient);
}

@keyframes rotation_413 {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

</style>


================================================
FILE: Buttons/Navarog21_ordinary-rat-19.html
================================================
<button>
    P L A Y
    <div id="clip">
        <div id="leftTop" class="corner"></div>
        <div id="rightBottom" class="corner"></div>
        <div id="rightTop" class="corner"></div>
        <div id="leftBottom" class="corner"></div>
    </div>
    <span id="rightArrow" class="arrow"></span>
    <span id="leftArrow" class="arrow"></span>
</button>
<style>
/* From Uiverse.io by Navarog21 - Tags: button */
button {
  position: relative;
  width: 11em;
  height: 4em;
  outline: none;
  transition: 0.1s;
  background-color: transparent;
  border: none;
  font-size: 13px;
  font-weight: bold;
  color: #ddebf0;
}

#clip {
  --color: #2761c3;
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border: 5px double var(--color);
  box-shadow: inset 0px 0px 15px #195480;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.arrow {
  position: absolute;
  transition: 0.2s;
  background-color: #2761c3;
  top: 35%;
  width: 11%;
  height: 30%;
}

#leftArrow {
  left: -13.5%;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

#rightArrow {
  -webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);
  left: 102%;
}

button:hover #rightArrow {
  background-color: #27c39f;
  left: -15%;
  animation: 0.6s ease-in-out both infinite alternate rightArrow8;
}

button:hover #leftArrow {
  background-color: #27c39f;
  left: 103%;
  animation: 0.6s ease-in-out both infinite alternate leftArrow8;
}

.corner {
  position: absolute;
  width: 4em;
  height: 4em;
  background-color: #2761c3;
  box-shadow: inset 1px 1px 8px #2781c3;
  transform: scale(1) rotate(45deg);
  transition: 0.2s;
}

#rightTop {
  top: -1.98em;
  left: 91%;
}

#leftTop {
  top: -1.96em;
  left: -3.0em;
}

#leftBottom {
  top: 2.10em;
  left: -2.15em;
}

#rightBottom {
  top: 45%;
  left: 88%;
}

button:hover #leftTop {
  animation: 0.1s ease-in-out 0.05s both changeColor8,
  0.2s linear 0.4s both lightEffect8;
}

button:hover #rightTop {
  animation: 0.1s ease-in-out 0.15s both changeColor8,
  0.2s linear 0.4s both lightEffect8;
}

button:hover #rightBottom {
  animation: 0.1s ease-in-out 0.25s both changeColor8,
  0.2s linear 0.4s both lightEffect8;
}

button:hover #leftBottom {
  animation: 0.1s ease-in-out 0.35s both changeColor8,
  0.2s linear 0.4s both lightEffect8;
}

button:hover .corner {
  transform: scale(1.25) rotate(45deg);
}

button:hover #clip {
  animation: 0.2s ease-in-out 0.55s both greenLight8;
  --color: #27c39f;
}

@keyframes changeColor8 {
  from {
    background-color: #2781c3;
  }

  to {
    background-color: #27c39f;
  }
}

@keyframes lightEffect8 {
  from {
    box-shadow: 1px 1px 5px #27c39f;
  }

  to {
    box-shadow: 0 0 2px #27c39f;
  }
}

@keyframes greenLight8 {
  from {
  }

  to {
    box-shadow: inset 0px 0px 32px #27c39f;
  }
}

@keyframes leftArrow8 {
  from {
    transform: translate(0px);
  }

  to {
    transform: translateX(10px);
  }
}

@keyframes rightArrow8 {
  from {
    transform: translate(0px);
  }

  to {
    transform: translateX(-10px);
  }
}



</style>


================================================
FILE: Buttons/Navs45_quick-dolphin-19.html
================================================
<button class="button">
  <div class="inner">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      class="icon"
    >
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <path
          fill="#000000"
          d="M14.2199 21.63C13.0399 21.63 11.3699 20.8 10.0499 16.83L9.32988 14.67L7.16988 13.95C3.20988 12.63 2.37988 10.96 2.37988 9.78001C2.37988 8.61001 3.20988 6.93001 7.16988 5.60001L15.6599 2.77001C17.7799 2.06001 19.5499 2.27001 20.6399 3.35001C21.7299 4.43001 21.9399 6.21001 21.2299 8.33001L18.3999 16.82C17.0699 20.8 15.3999 21.63 14.2199 21.63ZM7.63988 7.03001C4.85988 7.96001 3.86988 9.06001 3.86988 9.78001C3.86988 10.5 4.85988 11.6 7.63988 12.52L10.1599 13.36C10.3799 13.43 10.5599 13.61 10.6299 13.83L11.4699 16.35C12.3899 19.13 13.4999 20.12 14.2199 20.12C14.9399 20.12 16.0399 19.13 16.9699 16.35L19.7999 7.86001C20.3099 6.32001 20.2199 5.06001 19.5699 4.41001C18.9199 3.76001 17.6599 3.68001 16.1299 4.19001L7.63988 7.03001Z"
        ></path>
        <path
          fill="#000000"
          d="M10.11 14.4C9.92005 14.4 9.73005 14.33 9.58005 14.18C9.29005 13.89 9.29005 13.41 9.58005 13.12L13.16 9.53C13.45 9.24 13.93 9.24 14.22 9.53C14.51 9.82 14.51 10.3 14.22 10.59L10.64 14.18C10.5 14.33 10.3 14.4 10.11 14.4Z"
        ></path>
      </g>
    </svg>
    <span id="text">Send Message</span>
  </div>
</button>

<style>
/* From Uiverse.io by Navs45  - Tags: icon, white, button, transition, btn, hover effect, html, css */
.button {
  cursor: pointer;
}
.button {
  border: none;
  position: relative;
  width: 249px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 15px;
  background: #fff;
  box-shadow: -2px 2px 1.3px 1px #7f807f,
    -5px 5px 2.8px 0px rgba(255, 255, 255, 0.5), -5px 7px 4.4px 0px #c5c6c5,
    0px 0px 2.4px 4px #e4e5e4;
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
}

.button:hover {
  background-color: #e0e0e0;
  transform: translateY(-5px);
  box-shadow: -2px 2px 1.3px 1px #7f807f,
    -5px 5px 2.8px 0px rgba(255, 255, 255, 0.5), -5px 7px 4.4px 0px #c5c6c5,
    0px 0px 2.4px 4px #e4e5e4, 0px 10px 20px rgba(0, 0, 0, 0.2);
}

.inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 236px;
  height: 69px;
  flex-shrink: 0;
  border-radius: 39px;

  background: #fff;
  box-shadow: -1px -1px 0px 0px rgba(141, 139, 139, 0.35),
    38px 3px 13.2px 0px rgba(196, 196, 196, 0.25) inset,
    -3px 1px 10.1px 0px rgba(87, 87, 87, 0.25) inset;
  margin: 7px 4px 6px 7px;
}

.icon {
  width: 30px;
  height: 30px;
}

#text {
  color: #0b0b0b;
  font-family: "Poppins", sans-serif;
  font-size: 23.1px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding: 4px;
  transition: color 0.3s, transform 0.3s, text-shadow 0.3s;
}
#text:hover {
  color: #fff;
  text-shadow: 1px 1px 1px #acaaaa, 1px 2px 1px #7d7d7d, 1px 1px 1px #acaaaa,
    1px 2px 1px #7d7d7d, 1px 20px 40px rgba(147, 147, 147, 0.3);
}

</style>
    

================================================
FILE: Buttons/Nawsome_chilly-moose-65.html
================================================
<div class="arrow">
  <div class="arrow-top"></div>
  <div class="arrow-bottom"></div>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: button */
.arrow {
  cursor: pointer;
  height: 60px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: transform 0.1s;
  width: 50px;
}

.arrow-top, .arrow-bottom {
  background-color: #666;
  height: 4px;
  left: -5px;
  position: absolute;
  top: 50%;
  width: 100%;
}

.arrow-top:after, .arrow-bottom:after {
  background-color: #fff;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.15s;
}

.arrow-top {
  transform: rotate(45deg);
  transform-origin: bottom right;
}

.arrow-top:after {
  left: 100%;
  right: 0;
  transition-delay: 0s;
}

.arrow-bottom {
  transform: rotate(-45deg);
  transform-origin: top right;
}

.arrow-bottom:after {
  left: 0;
  right: 100%;
  transition-delay: 0.15s;
}

.arrow:hover .arrow-top:after {
  left: 0;
  transition-delay: 0.15s;
}

.arrow:hover .arrow-bottom:after {
  right: 0;
  transition-delay: 0s;
}

.arrow:active {
  transform: translateX(-50%) translateY(-50%) scale(0.9);
}
</style>


================================================
FILE: Buttons/Nawsome_tiny-chipmunk-51.html
================================================
<div class="buttons">
   <button class="btn"><span></span><p data-start="good luck!" data-text="start!" data-title="new game"></p></button>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: button */
/*bg*/
/*txt*/
/*success*/
.buttons {
  display: flex;
  justify-content: space-around;
  top: 20px;
  left: 20px;
}

.buttons button {
  width: 150px;
  height: 50px;
  background-color: white;
  margin: 20px;
  color: #568fa6;
  position: relative;
  overflow: hidden;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

.buttons button:before, .buttons button:after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: #44d8a4;
  transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.buttons button:before {
  right: 0;
  top: 0;
  transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.buttons button:after {
  left: 0;
  bottom: 0;
}

.buttons button span {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.buttons button span:before, .buttons button span:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 0;
  background-color: #44d8a4;
  transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.buttons button span:before {
  right: 0;
  top: 0;
  transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.buttons button span:after {
  left: 0;
  bottom: 0;
}

.buttons button p {
  padding: 0;
  margin: 0;
  transition: all 0.4s cubic-bezier(0.35, 0.1, 0.25, 1);
  position: absolute;
  width: 100%;
  height: 100%;
}

.buttons button p:before, .buttons button p:after {
  position: absolute;
  width: 100%;
  transition: all 0.4s cubic-bezier(0.35, 0.1, 0.25, 1);
  z-index: 1;
  left: 0;
}

.buttons button p:before {
  content: attr(data-title);
  top: 50%;
  transform: translateY(-50%);
}

.buttons button p:after {
  content: attr(data-text);
  top: 150%;
  color: #44d8a4;
}

.buttons button:hover:before, .buttons button:hover:after {
  width: 100%;
}

.buttons button:hover span {
  z-index: 1;
}

.buttons button:hover span:before, .buttons button:hover span:after {
  height: 100%;
}

.buttons button:hover p:before {
  top: -50%;
  transform: rotate(5deg);
}

.buttons button:hover p:after {
  top: 50%;
  transform: translateY(-50%);
}

.buttons button.start {
  background-color: #44d8a4;
  box-shadow: 0px 5px 10px -10px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.buttons button.start p:before {
  top: -50%;
  transform: rotate(5deg);
}

.buttons button.start p:after {
  color: white;
  transition: all 0s ease;
  content: attr(data-start);
  top: 50%;
  transform: translateY(-50%);
  animation: start 0.3s ease;
  animation-fill-mode: forwards;
}

@keyframes start {
  from {
    top: -50%;
  }
}

.buttons button.start:hover:before, .buttons button.start:hover:after {
  display: none;
}

.buttons button.start:hover span {
  display: none;
}

.buttons button:active {
  outline: none;
  border: none;
}

.buttons button:focus {
  outline: 0;
}
</style>


================================================
FILE: Buttons/Nawsome_unlucky-mayfly-5.html
================================================
<button class="continue-application">
    <div>
        <div class="pencil"></div>
        <div class="folder">
            <div class="top">
                <svg viewBox="0 0 24 27">
                    <path d="M1,0 L23,0 C23.5522847,-1.01453063e-16 24,0.44771525 24,1 L24,8.17157288 C24,8.70200585 23.7892863,9.21071368 23.4142136,9.58578644 L20.5857864,12.4142136 C20.2107137,12.7892863 20,13.2979941 20,13.8284271 L20,26 C20,26.5522847 19.5522847,27 19,27 L1,27 C0.44771525,27 6.76353751e-17,26.5522847 0,26 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z"></path>
                </svg>
            </div>
            <div class="paper"></div>
        </div>
    </div>
    Continue Application
</button>
<style>
/* From Uiverse.io by Nawsome - Tags: icon, animation, button */
.continue-application {
  --color: #fff;
  --background: #404660;
  --background-hover: #3A4059;
  --background-left: #2B3044;
  --folder: #F3E9CB;
  --folder-inner: #BEB393;
  --paper: #FFFFFF;
  --paper-lines: #BBC1E1;
  --paper-behind: #E1E6F9;
  --pencil-cap: #fff;
  --pencil-top: #275EFE;
  --pencil-middle: #fff;
  --pencil-bottom: #5C86FF;
  --shadow: rgba(13, 15, 25, .2);
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  padding: 17px 29px 17px 69px;
  transition: background 0.3s;
  color: var(--color);
  background: var(--bg, var(--background));
}

.continue-application > div {
  top: 0;
  left: 0;
  bottom: 0;
  width: 53px;
  position: absolute;
  overflow: hidden;
  border-radius: 5px 0 0 5px;
  background: var(--background-left);
}

.continue-application > div .folder {
  width: 23px;
  height: 27px;
  position: absolute;
  left: 15px;
  top: 13px;
}

.continue-application > div .folder .top {
  left: 0;
  top: 0;
  z-index: 2;
  position: absolute;
  transform: translateX(var(--fx, 0));
  transition: transform 0.4s ease var(--fd, 0.3s);
}

.continue-application > div .folder .top svg {
  width: 24px;
  height: 27px;
  display: block;
  fill: var(--folder);
  transform-origin: 0 50%;
  transition: transform 0.3s ease var(--fds, 0.45s);
  transform: perspective(120px) rotateY(var(--fr, 0deg));
}

.continue-application > div .folder:before, .continue-application > div .folder:after,
.continue-application > div .folder .paper {
  content: "";
  position: absolute;
  left: var(--l, 0);
  top: var(--t, 0);
  width: var(--w, 100%);
  height: var(--h, 100%);
  border-radius: 1px;
  background: var(--b, var(--folder-inner));
}

.continue-application > div .folder:before {
  box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow);
  transform: translateX(var(--fx, 0));
  transition: transform 0.4s ease var(--fd, 0.3s);
}

.continue-application > div .folder:after,
.continue-application > div .folder .paper {
  --l: 1px;
  --t: 1px;
  --w: 21px;
  --h: 25px;
  --b: var(--paper-behind);
}

.continue-application > div .folder:after {
  transform: translate(var(--pbx, 0), var(--pby, 0));
  transition: transform 0.4s ease var(--pbd, 0s);
}

.continue-application > div .folder .paper {
  z-index: 1;
  --b: var(--paper);
}

.continue-application > div .folder .paper:before, .continue-application > div .folder .paper:after {
  content: "";
  width: var(--wp, 14px);
  height: 2px;
  border-radius: 1px;
  transform: scaleY(0.5);
  left: 3px;
  top: var(--tp, 3px);
  position: absolute;
  background: var(--paper-lines);
  box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines);
}

.continue-application > div .folder .paper:after {
  --tp: 6px;
  --wp: 10px;
}

.continue-application > div .pencil {
  height: 2px;
  width: 3px;
  border-radius: 1px 1px 0 0;
  top: 8px;
  left: 105%;
  position: absolute;
  z-index: 3;
  transform-origin: 50% 19px;
  background: var(--pencil-cap);
  transform: translateX(var(--pex, 0)) rotate(35deg);
  transition: transform 0.4s ease var(--pbd, 0s);
}

.continue-application > div .pencil:before, .continue-application > div .pencil:after {
  content: "";
  position: absolute;
  display: block;
  background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, var(--pencil-bottom) 60.1%));
  width: var(--w, 5px);
  height: var(--h, 20px);
  border-radius: var(--br, 2px 2px 0 0);
  top: var(--t, 2px);
  left: var(--l, -1px);
}

.continue-application > div .pencil:before {
  -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
  clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
}

.continue-application > div .pencil:after {
  --b: none;
  --w: 3px;
  --h: 6px;
  --br: 0 2px 1px 0;
  --t: 3px;
  --l: 3px;
  border-top: 1px solid var(--pencil-top);
  border-right: 1px solid var(--pencil-top);
}

.continue-application:before, .continue-application:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--color);
  transform-origin: 9px 1px;
  transform: translateX(var(--cx, 0)) scale(0.5) rotate(var(--r, -45deg));
  top: 26px;
  right: 16px;
  transition: transform 0.3s;
}

.continue-application:after {
  --r: 45deg;
}

.continue-application:hover {
  --cx: 2px;
  --bg: var(--background-hover);
  --fx: -40px;
  --fr: -60deg;
  --fd: .15s;
  --fds: 0s;
  --pbx: 3px;
  --pby: -3px;
  --pbd: .15s;
  --pex: -24px;
}

</style>


================================================
FILE: Buttons/Nayzerftn_breezy-grasshopper-31.html
================================================
<button class="btn-hover">HOVER ME</button>
<style>
/* From Uiverse.io by Nayzerftn - Tags: button, hover, active */
.btn-hover {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ffffff;
  background-color: #4b4b4b;
  border: none;
  outline: none;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.btn-hover:hover {
  background-color: #522ba7;
}

.btn-hover::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 0.8;
  transition: all 0.5s ease-out;
}

.btn-hover:hover::before {
  transform: translate(-50%, -50%) scale(20);
  opacity: 0;
}
</style>


================================================
FILE: Buttons/NguyenHaiNam24082000_nervous-insect-23.html
================================================
<div class="background-button">
  <button class="button">
    EMERGENCY
  </button>
</div>

<style>
/* From Uiverse.io by NguyenHaiNam24082000 - Tags: skeuomorphism, button, emergency */
.background-button {
  background: repeating-linear-gradient(
    45deg,
    #3c2209 0 20px,
    #ff9c00 20px 40px
  );
  width: 10em;
  height: 10em;
  -webkit-box-shadow: 15px 15px 50px 5px #5f5f5f;
  box-shadow: 15px 15px 50px 5px #5f5f5f;
  position: relative;
  display: inline-block;
  outline: 2px solid black;
}

.background-button::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  background: #a0b8c4;
  border: 2px solid #3c2209;
}

.button {
  background: #cc2a1f;
  width: 65%;
  height: 65%;
  border-radius: 50%;
  position: absolute;
  top: 7.5%;
  left: 18.25%;
  color: white;
  font-size: 1em;
  font-weight: 900;
  font-family: 'Courier New', Courier, monospace;
  -webkit-box-shadow: 0 15px 0 0 #842a2a;
  box-shadow: 0 15px 0 0 #842a2a;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  border: 2px solid black;
}

.button:active {
  -webkit-box-shadow: 0 1px 1px 1px #8C0606;
  box-shadow: 0 1px 1px 1px #8C0606;
  top: 15%;
}

.background-button:has(.button:active) + .emergency {
  display: block;
  -webkit-transform: rotate(0deg) scaleY(1);
  -ms-transform: rotate(0deg) scaleY(1);
  transform: rotate(0deg) scaleY(1);
  -webkit-animation: anims 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
  animation: anims 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes anims {
  0% {
    -webkit-transform: rotate(-30deg) scaleY(0.25);
    transform: rotate(-30deg) scaleY(0.25);
  }

  100% {
    -webkit-transform: rotate(0deg) scaleY(1);
    transform: rotate(0deg) scaleY(1);
  }
}

.emergency {
  position: absolute;
  display: none;
}

</style>


================================================
FILE: Buttons/Niranjan360_cowardly-robin-27.html
================================================
<button class="button">
  <span>Button</span>
</button>

<style>
/* From Uiverse.io by Niranjan360  - Tags: simple, button, dark, hover effect */
.button {
  cursor: pointer;
  background-color: black;
  padding: 8px 25px;
  border: solid 2px gold;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: 0.1s linear 0.1s;
}
.button span {
  color: gold;
  font-weight: 500;
  letter-spacing: 2px;
  position: relative;
  z-index: 2;
  transition: 0.2s linear 0.1s;
}
.button::after {
  display: block;
  content: "";
  background-color: gold;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: absolute;
  top: 100%;
  transform: translateX(-40%);
  transition: 0.2s linear 0.1s;
  z-index: 1;
}
.button:hover {
  box-shadow: 0px 0px 20px gold;
}
.button:hover::after {
  top: -50%;
}
.button:hover span {
  color: black;
  letter-spacing: 4px;
}

</style>
    

================================================
FILE: Buttons/NomNomcats_angry-firefox-98.html
================================================
<button class="button10">Button</button>

<style>
/* From Uiverse.io by NomNomcats  - Tags: simple, flashy, button, hover */
.button10 {
  display: inline-block;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: #ffffff;
  padding: 0.8em 2em;
  cursor: pointer;
  font-size: 16px;
  border-radius: 0.5em;
  background: #000;
  border: 2px solid #00ffea;
  box-shadow: 0 0 20px rgba(0, 255, 234, 0.5);
}

.button10:active {
  color: #ffffff;
  box-shadow: inset 0 0 10px rgba(0, 255, 234, 0.7);
}

.button10:before,
.button10:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 255, 234, 0.2);
  z-index: -1;
  transform: scale(0);
  transition: transform 0.5s;
  border-radius: inherit;
}

.button10:before {
  transition-delay: 0s;
}

.button10:after {
  transition-delay: 0.25s;
}

.button10:hover:before,
.button10:hover:after {
  transform: scale(1.2);
}

</style>
    

================================================
FILE: Buttons/NorthFishHasNa_soft-turtle-49.html
================================================
<button>
  <span>Button</span>
</button>
<style>
/* From Uiverse.io by NorthFishHasNa - Tags: button */
button {
 display: inline-block;
 border-radius: 4px;
 background-color: #3d405b;
 border: none;
 color: #FFFFFF;
 text-align: center;
 font-size: 17px;
 padding: 16px;
 width: 130px;
 transition: all 0.5s;
 cursor: pointer;
 margin: 5px;
}

button span {
 cursor: pointer;
 display: inline-block;
 position: relative;
 transition: 0.5s;
}

button span:after {
 content: '»';
 position: absolute;
 opacity: 0;
 top: 0;
 right: -15px;
 transition: 0.5s;
}

button:hover span {
 padding-right: 15px;
}

button:hover span:after {
 opacity: 1;
 right: 0;
}
</style>


================================================
FILE: Buttons/Nouman64-cat_hard-cow-88.html
================================================
<!-- From Uiverse.io by Nouman64-cat - Tags: button, bounce animation, 3d button -->
<button class="cursor-pointer animate-bounce px-10 pt-5 pb-5 rounded-full text-white text-xl 
 bg-gradient-to-r from-cyan-500 to-blue-500 hover:border-cyan-500 hover:shadow-2xl">
  Button
</button>



================================================
FILE: Buttons/OnCloud125252_angry-dragonfly-77.html
================================================
<div tabindex="0" class="plusButton">
  <svg class="plusIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
    <g mask="url(#mask0_21_345)">
      <path d="M13.75 23.75V16.25H6.25V13.75H13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75Z"></path>
    </g>
  </svg>
</div>
<style>
/* From Uiverse.io by OnCloud125252 - Tags: simple, black, button, simple button, more info, read more */
/* Note that you only needs to edit the config to customize the button! */

.plusButton {
  /* Config start */
  --plus_sideLength: 2.5rem;
  --plus_topRightTriangleSideLength: 0.9rem;
  /* Config end */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
  width: var(--plus_sideLength);
  height: var(--plus_sideLength);
  background-color: #000000;
  overflow: hidden;
}

.plusButton::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-width: 0 var(--plus_topRightTriangleSideLength) var(--plus_topRightTriangleSideLength) 0;
  border-style: solid;
  border-color: transparent white transparent transparent;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
}

.plusButton:hover {
  cursor: pointer;
}

.plusButton:hover::before {
  --plus_topRightTriangleSideLength: calc(var(--plus_sideLength) * 2);
}

.plusButton:focus-visible::before {
  --plus_topRightTriangleSideLength: calc(var(--plus_sideLength) * 2);
}

.plusButton>.plusIcon {
  fill: white;
  width: calc(var(--plus_sideLength) * 0.7);
  height: calc(var(--plus_sideLength) * 0.7);
  z-index: 1;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
}

.plusButton:hover>.plusIcon {
  fill: black;
  transform: rotate(180deg);
}

.plusButton:focus-visible>.plusIcon {
  fill: black;
  transform: rotate(180deg);
}
</style>


================================================
FILE: Buttons/OnCloud125252_tough-moth-4.html
================================================
<div tabindex="0" class="signInButton">
  <p class="signInButtonText">Sign In</p>
</div>
<style>
/* From Uiverse.io by OnCloud125252 - Tags: simple, black, button, animated, simple button */
/* Note that you only needs to edit the config to customize the button! */

.signInButton {
  /* Config start */
  --signIn_width: 6rem;
  --signIn_height: 2.5rem;
  --signIn_bottomLeftTriangleSideLength: 1rem;
  --signIn_topRightTriangleSideLength: 0.9rem;
  /* Config end */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
  width: 6rem;
  height: 2.5rem;
  background-color: #000000;
  overflow: hidden;
}

.signInButton::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-width: 0 var(--signIn_bottomLeftTriangleSideLength) var(--signIn_bottomLeftTriangleSideLength) 0;
  border-style: solid;
  border-color: transparent transparent white transparent;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
}

.signInButton::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: calc(var(--signIn_topRightTriangleSideLength) * 1.4142135623730950488016887242097);
  height: calc(var(--signIn_topRightTriangleSideLength) * 1.4142135623730950488016887242097);
  outline: 1px solid white;
  transform: translate(50%, -50%) rotate(45deg);
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
}

.signInButton:hover {
  cursor: pointer;
}

.signInButton:hover::before {
  --signIn_bottomLeftTriangleSideLength: calc(var(--signIn_width) + var(--signIn_height) - var(--signIn_topRightTriangleSideLength) + (var(--signIn_topRightTriangleSideLength) * 0.3));
}

.signInButton:focus-visible::before {
  --signIn_bottomLeftTriangleSideLength: calc(var(--signIn_width) + var(--signIn_height) - var(--signIn_topRightTriangleSideLength) + (var(--signIn_topRightTriangleSideLength) * 0.3));
}

.signInButton:hover::after {
  transform: translate(calc(50% + var(--signIn_topRightTriangleSideLength) * 0.1), calc((50% + var(--signIn_topRightTriangleSideLength) * 0.1) * -1)) rotate(45deg);
}

.signInButton:focus-visible::after {
  transform: translate(calc(50% + var(--signIn_topRightTriangleSideLength) * 0.1), calc((50% + var(--signIn_topRightTriangleSideLength) * 0.1) * -1)) rotate(45deg);
}

.signInButton:hover>.signInButtonText {
  color: black;
}

.signInButton:focus-visible>.signInButtonText {
  color: black;
}

.signInButtonText {
  margin: auto 0;
  color: white;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-align: center;
  z-index: 1;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
}
</style>


================================================
FILE: Buttons/Peary74_cuddly-gecko-61.html
================================================
<div class="del">
    <div>
      Hover
    </div>     
</div>
		
<style>
/* From Uiverse.io by Peary74 - Tags: button, hover, hover button */
.del {
  position: relative;
  top: 0;
  left: 0;
  width: 160px;
  height: 50px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.del div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  letter-spacing: 1px;
  color: #000;
  z-index: 1;
  transition: .6s;
}

.del:hover div {
  letter-spacing: 4px;
  color: #fff;
}

.del::after,
.del::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -99999;
  transition: all .4s;
}

.del::after {
  transform: translate(15px, 15px);
  width: 35px;
  height: 35px;
  background: #000;
  backdrop-filter: blur(5px);
  border-radius: 10px;
}

.del:hover::after {
  border-radius: 10px;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
}




</style>


================================================
FILE: Buttons/Peary74_kind-cougar-54.html
================================================
<button>
  <div class="svg-wrapper-1">
    <div class="svg-wrapper">
      <svg class="icon" height="30" width="30" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22,15.04C22,17.23 20.24,19 18.07,19H5.93C3.76,19 2,17.23 2,15.04C2,13.07 3.43,11.44 5.31,11.14C5.28,11 5.27,10.86 5.27,10.71C5.27,9.33 6.38,8.2 7.76,8.2C8.37,8.2 8.94,8.43 9.37,8.8C10.14,7.05 11.13,5.44 13.91,5.44C17.28,5.44 18.87,8.06 18.87,10.83C18.87,10.94 18.87,11.06 18.86,11.17C20.65,11.54 22,13.13 22,15.04Z">
        </path>
        </svg>
    </div>
  </div>
  <span>Save</span>
</button>
<style>
/* From Uiverse.io by Peary74 - Tags: button, hover, hover button */
button {
  font-family: inherit;
  font-size: 20px;
  background: #212121;
  color: white;
  fill: rgb(155, 153, 153);
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 15px;
  font-weight: 1000;
}

button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

button:hover {
  background: #000;
  bor
}

button:hover .svg-wrapper {
  transform: scale(1.25);
  transition: .5s linear;
}

button:hover svg {
  transform: translateX(1.2em) scale(1.1);
  fill: #fff;
}

button:hover span {
  opacity: 0;
  transition: .5s linear;
}

button:active {
  transform: scale(0.95);
}






</style>


================================================
FILE: Buttons/Peary74_loud-bear-3.html
================================================
<button>Hover me
  <div class="star-1">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="25" height="25">
  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
</svg>


  </div>
  <div class="star-2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="20">
  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
</svg>

  </div>
  <div class="star-3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="9" height="9">
  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
</svg>

  </div>
  <div class="star-4">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="10" height="10">
  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
</svg>

  </div>
  <div class="star-5">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="20">
  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
</svg>

  </div>
  <div class="star-6">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="7" height="7">
  <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"></path>
</svg>

  </div>
</button>



<style>
/* From Uiverse.io by Peary74 - Tags: button */
button {
  background: linear-gradient(45deg, transparent 27%, #fd1853 5%, #fd1853 73%, transparent 27%);
  box-shadow: 6px 0px 0px #00e6f6;
  position: relative;
  padding: 12px 35px;
  font-size: 20px;
  font-weight: 500;
  color: white;
  border: 3px solid #00e6f6;
  border-radius: 8px;
  box-shadow: 0 0 0 #fec1958c;
  transition: all .3s ease-in-out;
}

.star-1 {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}

.star-2 {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-3 {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-4 {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-5 {
  position: absolute;
  top: 25%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-6 {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all .8s ease;
}

button:hover {
  background: transparent;
  color: #00e6f6;
  box-shadow: 0 0 50px #fd1853;
}

button:hover .star-1 {
  position: absolute;
  top: -80%;
  left: -30%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-2 {
  position: absolute;
  top: -25%;
  left: 10%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-3 {
  position: absolute;
  top: 55%;
  left: 25%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-4 {
  position: absolute;
  top: 30%;
  left: 80%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-5 {
  position: absolute;
  top: 25%;
  left: 115%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-6 {
  position: absolute;
  top: 5%;
  left: 60%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

.fil0 {
  fill: #fd1853
}
</style>


================================================
FILE: Buttons/Peary74_loud-warthog-20.html
================================================
<button class="btnCloud">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" class="icon"><path d="M22,15.04C22,17.23 20.24,19 18.07,19H5.93C3.76,19 2,17.23 2,15.04C2,13.07 3.43,11.44 5.31,11.14C5.28,11 5.27,10.86 5.27,10.71C5.27,9.33 6.38,8.2 7.76,8.2C8.37,8.2 8.94,8.43 9.37,8.8C10.14,7.05 11.13,5.44 13.91,5.44C17.28,5.44 18.87,8.06 18.87,10.83C18.87,10.94 18.87,11.06 18.86,11.17C20.65,11.54 22,13.13 22,15.04Z"></path></svg>
</button>

<style>
/* From Uiverse.io by Peary74 - Tags: button, cloud, save */
.btnCloud {
  background-color: transparent;
  position: relative;
  fill: rgb(155, 153, 153);
  border: none;
}

.btnCloud::after {
  content: 'SAVE';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  padding: 3px 9px;
  border-radius: 5px;
  transition: 200ms linear;
  transition-delay: 200ms;
  color: black;
  font-size: 13px;
  visibility: hidden;
}

.icon {
  transform: scale(1.4);
  transition: 200ms linear;
}

.btnCloud:hover > .icon {
  transform: scale(1.7);
}

.btnCloud:hover > .icon path {
  fill: #fff;
  cursor: pointer;
}

.btnCloud:hover::after {
  visibility: visible;
  opacity: 1;
  top: -100%;
}

</style>


================================================
FILE: Buttons/Peary74_tough-panther-45.html
================================================
<div class="del">
    <div>
      Delete
    </div>     
</div>
		
<style>
/* From Uiverse.io by Peary74 - Tags: neumorphism, button, delete */
.del {
  position: relative;
  top: 0;
  left: 0;
  width: 160px;
  height: 50px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.del div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  letter-spacing: 1px;
  color: #ff0000;
  z-index: 1;
  transition: .6s;
}

.del:hover div {
  letter-spacing: 4px;
  color: #fff;
  background: #ff0000;
}





</style>


================================================
FILE: Buttons/Peary74_ugly-ape-46.html
================================================
<button class="btn">
 <svg class="icon" width="30" height="30" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path></svg>
</button>
<style>
/* From Uiverse.io by Peary74 - Tags: button, hover, active */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: none;
  background-color: transparent;
  position: relative;
}

.btn:hover > .icon {
  transform: scale(1.2);
  cursor: pointer;
  transition: .2s linear;
}

.btn:focus > .icon {
  fill: #fd1853;
  animation: grosseur .2s linear;
}

@keyframes grosseur {
  0% {
    width: 50px;
    height: 50px;
    fill: #fd1853;
  }

  100% {
    width: 30px;
    height: 30px;
    fill: #fd1853;
  }
}






</style>


================================================
FILE: Buttons/Peary74_ugly-parrot-58.html
================================================
<button>
  <span class="box">
    HEART
  </span>
  
   <div class="star-1">
    <svg height="25" width="25" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <path d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z" fill="#fd1853"></path>
</svg>


  </div>
  <div class="star-2">
    <svg height="20" width="20" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <path d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z" fill="#fd1853"></path>
</svg>

  </div>
  <div class="star-3">
    <svg height="9" width="9" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <path d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z" fill="#fd1853"></path>
</svg>

  </div>
  <div class="star-4">
    <svg height="10" width="10" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <path d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z" fill="#fd1853"></path>
</svg>

  </div>
  <div class="star-5">
    <svg height="20" width="20" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <path d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z" fill="#fd1853"></path>
</svg>

  </div>
  <div class="star-6">
    <svg height="7" width="7" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <path d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z" fill="#fd1853"></path>
</svg>

  </div>
  
</button>






<style>
/* From Uiverse.io by Peary74 - Tags: red, button, heart */
button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: #fd1853;
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
  border: none;
}

button:after {
  content: " ";
  width: 0%;
  height: 100%;
  background: #fff;
  position: absolute;
  transition: all 0.4s ease-in-out;
  right: 0;
}

button:hover::after {
  right: auto;
  left: 0;
  width: 100%;
}

button span {
  text-align: center;
  text-decoration: none;
  width: 100%;
  padding: 18px 25px;
  color: #fffcfd;
  font-size: 1.125em;
  font-weight: 700;
  letter-spacing: 0.3em;
  z-index: 20;
  transition: all 0.3s ease-in-out;
}

button:hover span {
  animation: scaleUp 0.3s ease-in-out;
  color: #fd1853;
}

button:hover {
  animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

.star-1 {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}

.star-2 {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-3 {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-4 {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-5 {
  position: absolute;
  top: 25%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-6 {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all .8s ease;
}

button:hover .star-1 {
  position: absolute;
  top: -2%;
  left: 0%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-2 {
  position: absolute;
  top: 34%;
  left: 41.5%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-3 {
  position: absolute;
  top: 55%;
  left: 25%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-4 {
  position: absolute;
  top: 0%;
  left: 55%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-5 {
  position: absolute;
  top: 25%;
  left: 85%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

button:hover .star-6 {
  position: absolute;
  top: 75%;
  left: 60%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}


</style>


================================================
FILE: Buttons/Peary74_wise-falcon-58.html
================================================
<button>
  <span class="box">
  Buy BTC
  <div class="star-1">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>bitcoin</title><path d="M14.24 10.56C13.93 11.8 12 11.17 11.4 11L11.95 8.82C12.57 9 14.56 9.26 14.24 10.56M11.13 12.12L10.53 14.53C11.27 14.72 13.56 15.45 13.9 14.09C14.26 12.67 11.87 12.3 11.13 12.12M21.7 14.42C20.36 19.78 14.94 23.04 9.58 21.7C4.22 20.36 .963 14.94 2.3 9.58C3.64 4.22 9.06 .964 14.42 2.3C19.77 3.64 23.03 9.06 21.7 14.42M14.21 8.05L14.66 6.25L13.56 6L13.12 7.73C12.83 7.66 12.54 7.59 12.24 7.53L12.68 5.76L11.59 5.5L11.14 7.29C10.9 7.23 10.66 7.18 10.44 7.12L10.44 7.12L8.93 6.74L8.63 7.91C8.63 7.91 9.45 8.1 9.43 8.11C9.88 8.22 9.96 8.5 9.94 8.75L8.71 13.68C8.66 13.82 8.5 14 8.21 13.95C8.22 13.96 7.41 13.75 7.41 13.75L6.87 15L8.29 15.36C8.56 15.43 8.82 15.5 9.08 15.56L8.62 17.38L9.72 17.66L10.17 15.85C10.47 15.93 10.76 16 11.04 16.08L10.59 17.87L11.69 18.15L12.15 16.33C14 16.68 15.42 16.54 16 14.85C16.5 13.5 16 12.7 15 12.19C15.72 12 16.26 11.55 16.41 10.57C16.61 9.24 15.59 8.53 14.21 8.05Z"></path></svg>


  </div>
  <div class="star-2">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>bitcoin</title><path d="M14.24 10.56C13.93 11.8 12 11.17 11.4 11L11.95 8.82C12.57 9 14.56 9.26 14.24 10.56M11.13 12.12L10.53 14.53C11.27 14.72 13.56 15.45 13.9 14.09C14.26 12.67 11.87 12.3 11.13 12.12M21.7 14.42C20.36 19.78 14.94 23.04 9.58 21.7C4.22 20.36 .963 14.94 2.3 9.58C3.64 4.22 9.06 .964 14.42 2.3C19.77 3.64 23.03 9.06 21.7 14.42M14.21 8.05L14.66 6.25L13.56 6L13.12 7.73C12.83 7.66 12.54 7.59 12.24 7.53L12.68 5.76L11.59 5.5L11.14 7.29C10.9 7.23 10.66 7.18 10.44 7.12L10.44 7.12L8.93 6.74L8.63 7.91C8.63 7.91 9.45 8.1 9.43 8.11C9.88 8.22 9.96 8.5 9.94 8.75L8.71 13.68C8.66 13.82 8.5 14 8.21 13.95C8.22 13.96 7.41 13.75 7.41 13.75L6.87 15L8.29 15.36C8.56 15.43 8.82 15.5 9.08 15.56L8.62 17.38L9.72 17.66L10.17 15.85C10.47 15.93 10.76 16 11.04 16.08L10.59 17.87L11.69 18.15L12.15 16.33C14 16.68 15.42 16.54 16 14.85C16.5 13.5 16 12.7 15 12.19C15.72 12 16.26 11.55 16.41 10.57C16.61 9.24 15.59 8.53 14.21 8.05Z"></path></svg>

  </div>
  <div class="star-3">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>bitcoin</title><path d="M14.24 10.56C13.93 11.8 12 11.17 11.4 11L11.95 8.82C12.57 9 14.56 9.26 14.24 10.56M11.13 12.12L10.53 14.53C11.27 14.72 13.56 15.45 13.9 14.09C14.26 12.67 11.87 12.3 11.13 12.12M21.7 14.42C20.36 19.78 14.94 23.04 9.58 21.7C4.22 20.36 .963 14.94 2.3 9.58C3.64 4.22 9.06 .964 14.42 2.3C19.77 3.64 23.03 9.06 21.7 14.42M14.21 8.05L14.66 6.25L13.56 6L13.12 7.73C12.83 7.66 12.54 7.59 12.24 7.53L12.68 5.76L11.59 5.5L11.14 7.29C10.9 7.23 10.66 7.18 10.44 7.12L10.44 7.12L8.93 6.74L8.63 7.91C8.63 7.91 9.45 8.1 9.43 8.11C9.88 8.22 9.96 8.5 9.94 8.75L8.71 13.68C8.66 13.82 8.5 14 8.21 13.95C8.22 13.96 7.41 13.75 7.41 13.75L6.87 15L8.29 15.36C8.56 15.43 8.82 15.5 9.08 15.56L8.62 17.38L9.72 17.66L10.17 15.85C10.47 15.93 10.76 16 11.04 16.08L10.59 17.87L11.69 18.15L12.15 16.33C14 16.68 15.42 16.54 16 14.85C16.5 13.5 16 12.7 15 12.19C15.72 12 16.26 11.55 16.41 10.57C16.61 9.24 15.59 8.53 14.21 8.05Z"></path></svg>

  </div>
  <div class="star-4">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>bitcoin</title><path d="M14.24 10.56C13.93 11.8 12 11.17 11.4 11L11.95 8.82C12.57 9 14.56 9.26 14.24 10.56M11.13 12.12L10.53 14.53C11.27 14.72 13.56 15.45 13.9 14.09C14.26 12.67 11.87 12.3 11.13 12.12M21.7 14.42C20.36 19.78 14.94 23.04 9.58 21.7C4.22 20.36 .963 14.94 2.3 9.58C3.64 4.22 9.06 .964 14.42 2.3C19.77 3.64 23.03 9.06 21.7 14.42M14.21 8.05L14.66 6.25L13.56 6L13.12 7.73C12.83 7.66 12.54 7.59 12.24 7.53L12.68 5.76L11.59 5.5L11.14 7.29C10.9 7.23 10.66 7.18 10.44 7.12L10.44 7.12L8.93 6.74L8.63 7.91C8.63 7.91 9.45 8.1 9.43 8.11C9.88 8.22 9.96 8.5 9.94 8.75L8.71 13.68C8.66 13.82 8.5 14 8.21 13.95C8.22 13.96 7.41 13.75 7.41 13.75L6.87 15L8.29 15.36C8.56 15.43 8.82 15.5 9.08 15.56L8.62 17.38L9.72 17.66L10.17 15.85C10.47 15.93 10.76 16 11.04 16.08L10.59 17.87L11.69 18.15L12.15 16.33C14 16.68 15.42 16.54 16 14.85C16.5 13.5 16 12.7 15 12.19C15.72 12 16.26 11.55 16.41 10.57C16.61 9.24 15.59 8.53 14.21 8.05Z"></path></svg>

  </div>
  <div class="star-5">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>bitcoin</title><path d="M14.24 10.56C13.93 11.8 12 11.17 11.4 11L11.95 8.82C12.57 9 14.56 9.26 14.24 10.56M11.13 12.12L10.53 14.53C11.27 14.72 13.56 15.45 13.9 14.09C14.26 12.67 11.87 12.3 11.13 12.12M21.7 14.42C20.36 19.78 14.94 23.04 9.58 21.7C4.22 20.36 .963 14.94 2.3 9.58C3.64 4.22 9.06 .964 14.42 2.3C19.77 3.64 23.03 9.06 21.7 14.42M14.21 8.05L14.66 6.25L13.56 6L13.12 7.73C12.83 7.66 12.54 7.59 12.24 7.53L12.68 5.76L11.59 5.5L11.14 7.29C10.9 7.23 10.66 7.18 10.44 7.12L10.44 7.12L8.93 6.74L8.63 7.91C8.63 7.91 9.45 8.1 9.43 8.11C9.88 8.22 9.96 8.5 9.94 8.75L8.71 13.68C8.66 13.82 8.5 14 8.21 13.95C8.22 13.96 7.41 13.75 7.41 13.75L6.87 15L8.29 15.36C8.56 15.43 8.82 15.5 9.08 15.56L8.62 17.38L9.72 17.66L10.17 15.85C10.47 15.93 10.76 16 11.04 16.08L10.59 17.87L11.69 18.15L12.15 16.33C14 16.68 15.42 16.54 16 14.85C16.5 13.5 16 12.7 15 12.19C15.72 12 16.26 11.55 16.41 10.57C16.61 9.24 15.59 8.53 14.21 8.05Z"></path></svg>

  </div>
  <div class="star-6">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>bitcoin</title><path d="M14.24 10.56C13.93 11.8 12 11.17 11.4 11L11.95 8.82C12.57 9 14.56 9.26 14.24 10.56M11.13 12.12L10.53 14.53C11.27 14.72 13.56 15.45 13.9 14.09C14.26 12.67 11.87 12.3 11.13 12.12M21.7 14.42C20.36 19.78 14.94 23.04 9.58 21.7C4.22 20.36 .963 14.94 2.3 9.58C3.64 4.22 9.06 .964 14.42 2.3C19.77 3.64 23.03 9.06 21.7 14.42M14.21 8.05L14.66 6.25L13.56 6L13.12 7.73C12.83 7.66 12.54 7.59 12.24 7.53L12.68 5.76L11.59 5.5L11.14 7.29C10.9 7.23 10.66 7.18 10.44 7.12L10.44 7.12L8.93 6.74L8.63 7.91C8.63 7.91 9.45 8.1 9.43 8.11C9.88 8.22 9.96 8.5 9.94 8.75L8.71 13.68C8.66 13.82 8.5 14 8.21 13.95C8.22 13.96 7.41 13.75 7.41 13.75L6.87 15L8.29 15.36C8.56 15.43 8.82 15.5 9.08 15.56L8.62 17.38L9.72 17.66L10.17 15.85C10.47 15.93 10.76 16 11.04 16.08L10.59 17.87L11.69 18.15L12.15 16.33C14 16.68 15.42 16.54 16 14.85C16.5 13.5 16 12.7 15 12.19C15.72 12 16.26 11.55 16.41 10.57C16.61 9.24 15.59 8.53 14.21 8.05Z"></path></svg>

  </div>
  </span>
</button>



<style>
/* From Uiverse.io by Peary74 - Tags: animation, button, crypto, bitcoin */
button {
  background: linear-gradient(30deg, #000 35%, #ea8b19 73%);
  position: relative;
  padding: 17px 45px;
  font-size: 20px;
  font-weight: 500;
  color: white;
  border: 3px solid #ea8b19;
  border-radius: 8px;
  transition: all .3s ease-in-out;
}

.star-1 {
  position: absolute;
  fill: #ea8b19;
  top: 20%;
  left: 20%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 0 #ea8b19);
  z-index: -5;
  transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}

.star-2 {
  position: absolute;
  fill: #ea8b19;
  top: 45%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #ea8b19);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-3 {
  position: absolute;
  fill: #ea8b19;
  top: 40%;
  left: 40%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #ea8b19);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-4 {
  position: absolute;
  fill: #ea8b19;
  top: 20%;
  left: 40%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 0 #ea8b19);
  z-index: -5;
  transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-5 {
  position: absolute;
  fill: #ea8b19;
  top: 25%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #ea8b19);
  z-index: -5;
  transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-6 {
  position: absolute;
  fill: #ea8b19;
  top: 5%;
  left: 50%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #ea8b19);
  z-index: -5;
  transition: all .8s ease;
}

button:hover {
  background: #000;
  color: #ea8b19;
  box-shadow: 0 0 50px #ea8b19;
}

button:hover .star-1 {
  position: absolute;
  top: -110%;
  left: -60%;
  width: 30px;
  height: auto;
  filter: drop-shadow(0 0 10px #ea8b19);
  z-index: 2;
}

button:hover .star-2 {
  position: absolute;
  top: -45%;
  left: 0%;
  width: 20px;
  height: auto;
  filter: drop-shadow(0 0 10px #ea8b19);
  z-index: 2;
}

button:hover .star-3 {
  position: absolute;
  top: 55%;
  left: 15%;
  width: 11px;
  height: auto;
  filter: drop-shadow(0 0 10px #ea8b19);
  z-index: 2;
}

button:hover .star-4 {
  position: absolute;
  top: 45%;
  left: 85%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #ea8b19);
  z-index: 2;
}

button:hover .star-5 {
  position: absolute;
  top: 25%;
  left: 140%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 10px #ea8b19);
  z-index: 2;
}

button:hover .star-6 {
  position: absolute;
  top: -5%;
  left: 60%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #ea8b19);
  z-index: 2;
}

.fil0 {
  fill: #ea8b19;
}

.box {
  width: 120px;
  height: 45px;
  float: left;
  transition: .5s linear;
  position: relative;
  display: block;
  padding: 8px;
  margin: -10px -15.5px;
  background: transparent;
  text-transform: uppercase;
  font-weight: 900;
}

.box:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  color: white;
  background: black;
}

.box:hover:before {
  border-color: #fff;
  height: 100%;
  transform: translateX(0);
  transition: .3s transform linear, .3s height linear .3s;
}

.box:hover:after {
  border-color: #ea8b19;
  height: 100%;
  transform: translateX(0);
  transition: .3s transform linear, .3s height linear .5s;
}

.box:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
  box-sizing: border-box;
  transform: translateX(100%);
}

.box:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  border-top: 4px solid transparent;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  transform: translateX(-100%);
}

</style>


================================================
FILE: Buttons/Phelix652_perfect-hound-11.html
================================================
<button class="btn btn--primary">

  <span class="btn-inner">
    <span class="btn-label">
      Button 
    </span>
  </span>
  
</button>
<style>
/* From Uiverse.io by Phelix652 - Tags: button */
.btn {
  --btn-gradient: var(--btn-gradient-from),var(--btn-gradient-to);
  border: 0 none;
  appearance: none;
  transition: all .3s;
  border-radius: 10px;
  background-color: var(--btn-bg);
  box-shadow: 0 0 2px 2px var(--btn-shadow), 0 0 4px 4px var(--btn-shadow), 0 0 8px 8px var(--btn-shadow);
}

.btn,
.btn * {
  box-sizing: border-box;
}

.btn-inner {
  position: relative;
  border-radius: inherit;
  border: 1px solid transparent;
  font-size: 1rem;
  display: flex;
  align-items: center;
  min-width: 10rem;
  padding: 1.5rem 2rem;
  overflow: hidden;
  color: var(--btn-text-color);
}

.btn-label {
  position: absolute;
  bottom: 1px;
  left: 1px;
  right: 1px;
  top: 1px;
  border-radius: inherit;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--btn-bg);
  background-image: linear-gradient(to bottom,var(--btn-gradient));
}

.btn:hover {
  transform: translateY(-5px);
  letter-spacing: 3px;
  box-shadow: rgba(0, 131, 253, 0.596) 0px 1px 80px 40px;
}

.btn:active {
  border-radius: 40px;
  transform: translateY(4px);
  transition: 0.1s;
  letter-spacing: 3px;
  box-shadow: rgb(0, 131, 253) 0px 1px 80px 40px;
}

.btn:active .btn-blur:before {
  --transition: 0.5s;
}

.btn--primary {
  --btn-bg: #111111;
  --btn-gradient-from: #111111;
  --btn-gradient-to: rgba(29, 6, 240, 0.5);
  --btn-text-color: #ffffff;
  --btn-shadow: #9b14c438;
}

@keyframes turn {
  0% {
    transform: translateY(-50%) rotate(0deg)
  }

  to {
    transform: translateY(-50%) rotate(1turn)
  }
}

</style>


================================================
FILE: Buttons/Philibert-JF_fresh-impala-20.html
================================================
<a class="button type--A" href="#">
  <div class="button__line"></div>
  <div class="button__line"></div>
  <span class="button__text">ENTRY</span>
  <div class="button__drow1"></div>
  <div class="button__drow2"></div>
</a>

<style>
/* From Uiverse.io by Philibert-JF  - Website: https://codepen.io/ash_creator/pen/oNyNbNO - Name: パステルドローなボタン - Tags: button, hover, animated */
.type--A {
  --line_color: #555555;
  --back_color: #ffecf6;
}

.button {
  position: relative;
  z-index: 0;
  width: 240px;
  height: 56px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  color: var(--line_color);
  letter-spacing: 2px;
  transition: all 0.3s ease;
}
.button:not(:last-child) {
  margin-bottom: 64px;
}
.button__text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.button::before,
.button::after,
.button__text::before,
.button__text::after {
  content: "";
  position: absolute;
  height: 3px;
  border-radius: 2px;
  background: var(--line_color);
  transition: all 0.5s ease;
}
.button::before {
  top: 0;
  left: 54px;
  width: calc(100% - 56px * 2 - 16px);
}
.button::after {
  top: 0;
  right: 54px;
  width: 8px;
}
.button__text::before {
  bottom: 0;
  right: 54px;
  width: calc(100% - 56px * 2 - 16px);
}
.button__text::after {
  bottom: 0;
  left: 54px;
  width: 8px;
}
.button__line {
  position: absolute;
  top: 0;
  width: 56px;
  height: 100%;
  overflow: hidden;
}
.button__line::before {
  content: "";
  position: absolute;
  top: 0;
  width: 150%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 300px;
  border: solid 3px var(--line_color);
}
.button__line:nth-child(1),
.button__line:nth-child(1)::before {
  left: 0;
}
.button__line:nth-child(2),
.button__line:nth-child(2)::before {
  right: 0;
}
.button:hover {
  letter-spacing: 6px;
}
.button:hover::before,
.button:hover .button__text::before {
  width: 8px;
}
.button:hover::after,
.button:hover .button__text::after {
  width: calc(100% - 56px * 2 - 16px);
}
.button__drow1,
.button__drow2 {
  position: absolute;
  z-index: -1;
  border-radius: 16px;
  transform-origin: 16px 16px;
}
.button__drow1 {
  top: -16px;
  left: 40px;
  width: 32px;
  height: 0;
  transform: rotate(30deg);
}
.button__drow2 {
  top: 44px;
  left: 77px;
  width: 32px;
  height: 0;
  transform: rotate(-127deg);
}
.button__drow1::before,
.button__drow1::after,
.button__drow2::before,
.button__drow2::after {
  content: "";
  position: absolute;
}
.button__drow1::before {
  bottom: 0;
  left: 0;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-60deg);
}
.button__drow1::after {
  top: -10px;
  left: 45px;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(69deg);
}
.button__drow2::before {
  bottom: 0;
  left: 0;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-146deg);
}
.button__drow2::after {
  bottom: 26px;
  left: -40px;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-262deg);
}
.button__drow1,
.button__drow1::before,
.button__drow1::after,
.button__drow2,
.button__drow2::before,
.button__drow2::after {
  background: var(--back_color);
}
.button:hover .button__drow1 {
  animation: drow1 ease-in 0.06s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow1::before {
  animation: drow2 linear 0.08s 0.06s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow1::after {
  animation: drow3 linear 0.03s 0.14s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow2 {
  animation: drow4 linear 0.06s 0.2s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow2::before {
  animation: drow3 linear 0.03s 0.26s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow2::after {
  animation: drow5 linear 0.06s 0.32s;
  animation-fill-mode: forwards;
}
@keyframes drow1 {
  0% {
    height: 0;
  }
  100% {
    height: 100px;
  }
}
@keyframes drow2 {
  0% {
    width: 0;
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  100% {
    width: 120px;
  }
}
@keyframes drow3 {
  0% {
    width: 0;
  }
  100% {
    width: 80px;
  }
}
@keyframes drow4 {
  0% {
    height: 0;
  }
  100% {
    height: 120px;
  }
}
@keyframes drow5 {
  0% {
    width: 0;
  }
  100% {
    width: 124px;
  }
}

</style>
    

================================================
FILE: Buttons/PozDevill_hard-cow-33.html
================================================
<button>Button</button>
<style>
/* From Uiverse.io by PozDevill - Tags: button */
button {
  position: relative;
  font-family: 'Heebo', sans-serif;
  padding: 12px 40px;
  border: 0;
  background: rgb(148, 1, 1);
  color: #ffffff;
  font-weight: 500;
  font-size: 1em;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

button:hover {
  text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.562);
  transform: scale(1.01);
  box-shadow: inset 0px 0px 10px rgba(255, 0, 0, 0.575);
}

button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100px;
  width: 50%;
  height: 100%;
  transform: rotate(80deg);
  background: #ffffff77;
  filter: blur(10px);
  transition: 0.6s ease-in-out;
}

button:hover::after {
  left: 100%;
}
</style>


================================================
FILE: Buttons/Praashoo7_average-swan-99.html
================================================
<div class="main">
  <div class="buttons">
    <div class="button_pair">
      <div class="btn">
        <button class="button1">
          <svg
            viewBox="0 -960 960 960"
            class="svg1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M200-440v-80h560v80H200Z"></path>
          </svg>
        </button>
      </div>
      <div class="btn">
        <button class="button2">
          <svg
            viewBox="0 -960 960 960"
            xmlns="http://www.w3.org/2000/svg"
            class="svg2"
          >
            <path
              d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"
            ></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="button_pair">
      <div class="btn">
        <button class="button3">
          <span class="button_text">RECORD</span>
        </button>
      </div>
      <div class="btn">
        <button class="button4">
          <span class="button_text">PLAY</span>
        </button>
      </div>
    </div>
  </div>
  <div class="text">Teenage Engineering [EP-133 K.O. II] - Buttons</div>
</div>

<style>
/* From Uiverse.io by Praashoo7  - Tags: neumorphism, button, realistic, buttons, teenage engineering */
/* Teenage Engineering [EP-133 K.O. II] - Buttons */

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 1.25em;
}

.buttons {
  display: flex;
  flex-direction: column;
  row-gap: 1.5em;
}
.button_pair {
  display: flex;
  column-gap: 1.5em;
}
.button_pair1 {
  display: flex;
  flex-direction: column;
  row-gap: 0.9em;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5em;
  height: 5em;
  background-color: #171717;
  border-radius: 5px;
}

.button1 {
  width: 5.7em;
  height: 5.7em;
  border-radius: 10px;
  border: none;
  outline: none;
  background-color: #c7c3c0;
  box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px,
    #ffffff 1.5px 1.5px 2px 0px inset, #c7c3c0 -3.2px -3.2px 8px 0px inset;
  cursor: pointer;
  font-family: Montserrat;
  transition: 0.1s ease-in-out;
}
.button2 {
  width: 5.7em;
  height: 5.7em;
  border-radius: 10px;
  border: none;
  outline: none;
  background-color: #c7c3c0;
  box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px,
    #ffffff 1.5px 1.5px 2px 0px inset, #c7c3c0 -3.2px -3.2px 8px 0px inset;
  cursor: pointer;
  font-family: Montserrat;
  transition: 0.1s ease-in-out;
}
.svg1 {
  fill: #5f5f5f;
  width: 25px;
  height: 25px;
  transition: 0.1s ease-in-out;
}
.svg2 {
  fill: #5f5f5f;
  width: 25px;
  height: 25px;
  transition: 0.1s ease-in-out;
}

.button3 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 5.7em;
  height: 5.7em;
  border-radius: 10px;
  border: none;
  outline: none;
  background-color: #d42a02;
  box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px, #fb702c 2px 2px 10px 0px inset,
    #d42a02 -4px -4px 1px 0px inset;
  cursor: pointer;
  font-family: Montserrat;
  transition: 0.1s ease-in-out;
}
.button4 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 5.7em;
  height: 5.7em;
  border-radius: 10px;
  border: none;
  outline: none;
  background-color: #545251;
  box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px,
    #a8a6a4 1.5px 1.5px 1px 0px inset, #545251 -3.2px -3.2px 8px 0px inset;
  cursor: pointer;
  font-family: Montserrat;
  transition: 0.1s ease-in-out;
}

.button_text {
  color: white;
  padding-top: 0.9em;
  letter-spacing: 0.075em;
  font-size: 0.85em;
  transition: 0.1s ease-in-out;
}

.text {
  font-family: Montserrat;
  text-align: center;
  font-size: 0.65em;
}

.button1:active,
.button2:active {
  box-shadow: rgba(0, 0, 0, 0.377) 0px 0px 0px, inset 0.5px 0.5px 4px #000000,
    #c7c3c0 -3.2px -3.2px 8px 0px inset;
}
.button1:active .svg1,
.button2:active .svg2 {
  scale: 0.95;
}
.button3:active {
  box-shadow: rgba(0, 0, 0, 0.377) 0px 0px 0px, inset 0.5px 0.5px 4px #000000,
    #d42a02 -3.2px -3.2px 8px 0px inset;
}
.button3:active .button_text {
  transform: translateY(0.5px);
}
.button4:active {
  box-shadow: rgba(0, 0, 0, 0.377) 0px 0px 0px, inset 0.5px 0.5px 4px #000000,
    #545251 -3.2px -3.2px 8px 0px inset;
}
.button4:active .button_text {
  transform: translateY(0.5px);
}

</style>
    

================================================
FILE: Buttons/Praashoo7_black-bat-66.html
================================================
<!-- From Uiverse.io by Praashoo7  - Tags: gradient, button, star, moon, sun, space, cloud, earth -->
<div
  class="flex items-center justify-center rounded-[25px] pointer-events-none w-[20.5em] h-[17em] bg-[#87ceeb] hover:bg-[#171717] active:bg-black transition duration-500 ease-in-out overflow-hidden"
>
  <div class="group">
    <button
      class="relative z-[2] cursor-pointer top-[11.75em] left-[7em] pointer-events-auto w-[6em] h-[6em] rounded-full bg-gradient-to-br from-yellow-400 via-yellow-400 to-orange-500 hover:from-gray-400 hover:to-slate-200 transition duration-500 ease-in-out shadow-[0px_0px_100px_rgba(255,212,59,0.5),0px_0px_100px_rgba(255,102,0,0.5)] hover:shadow-[0px_0px_100px_rgba(233,233,233,0.5),0px_0px_100px_rgba(192,192,192,0.5);] hover:opacity-100 active:shadow-none"
    >
      <div
        class="relative opacity-0 left-[65%] top-[25%] w-[1.1em] h-[1.1em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"
      ></div>
      <div
        class="relative opacity-0 left-[80%] top-[25%] w-[.45em] h-[.45em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"
      ></div>
      <div
        class="relative opacity-0 left-[65%] top-[20%] w-[.8em] h-[.8em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"
      ></div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        id="svg4770"
        viewBox="0 0 500.00001 500.00001"
        height="141.11111mm"
        width="141.11111mm"
        class="relative w-[6em] h-[6em] bottom-[39%] opacity-0 shadow-none transition duration-500 ease-in-out group-active:opacity-100"
      >
        <defs id="defs4772"></defs>
        <metadata id="metadata4775">image/svg+xml</metadata>
        <g transform="translate(92.857148,-1130.9336)" id="layer1">
          <g id="g5318" transform="translate(264.28569,744.28568)">
            <ellipse
              id="circle4657"
              cy="636.64795"
              cx="-107.1429"
              style="fill:#178181;fill-opacity:1"
              rx="249.99994"
              ry="250"
            ></ellipse>
            <path
              id="path4659"
              d="m 142.85704,636.64796 c 0,-50.15918 -14.76953,-96.86621 -40.20019,-136.01074 0,0 -14.261714,20.83398 -11.582027,34.22558 2.677734,13.39356 18.413077,14.41602 16.796867,24.24024 -1.61621,9.82422 -13.223625,-2.81153 -27.511708,23.0791 -14.287106,25.89258 -7.140623,61.61719 13.392575,64.29102 20.534173,2.67187 49.104483,-9.8252 49.104483,-9.8252 z"
              style="fill:#2aa846;fill-opacity:1"
            ></path>
            <path
              id="path4661"
              d="m -41.488621,395.3589 c 29.098626,7.89843 56.087877,20.92187 79.938457,38.03808 0,0 -28.9882739,-4.78125 -39.9697165,5.03711 -10.9804665,9.82129 -26.9951105,33.03907 -39.9697165,0 -12.972653,-33.03711 9.76e-4,-43.07519 9.76e-4,-43.07519 z"
              style="fill:#2aa846;fill-opacity:1"
            ></path>
            <path
              id="path4663"
              d="m -295.11258,471.82276 c 45.81835,-52.21191 113.04294,-85.1748 187.96968,-85.1748 0,0 -16.96093,10.26953 15.181635,27.67969 32.143547,17.41211 17.410152,25.44629 10.713865,30.80371 -6.695311,5.35742 -18.309566,-10.71387 -25.8955,-21.42676 -7.58691,-10.71582 -40.16796,-27.23144 -65.16991,-18.30078 -25.00097,8.93066 -46.42479,15.52734 -42.85643,23.83594 3.56738,8.30664 46.42479,-7.75879 62.49608,-6.87012 16.07128,0.89062 10.71386,10.70996 -4.46192,22.31836 -15.17773,11.6084 -16.96679,25.89258 -0.89453,34.82031 16.07031,8.93164 35.70898,9.8252 40.1787,4.46875 4.4668,-5.35742 -8.03613,-40.17871 22.322264,-25.00195 30.35839,15.17676 55.359361,24.1123 30.35839,46.43066 -25.001946,22.31641 -53.571274,47.3252 -54.465804,61.60547 -0.89453,14.28223 8.93164,25.89844 3.57422,26.78711 -5.35743,0.88867 -10.27442,-5.80176 -13.84375,-10.71582 -3.56738,-4.91113 -20.08886,-6.69434 -28.12402,-3.57227 -8.03613,3.12207 -23.21679,15.17676 -14.73242,26.78516 8.48535,11.61035 20.08301,6.24609 31.69336,11.60449 11.60839,5.35742 22.43358,25.74707 20.21093,30.35547 -2.22266,4.60645 -12.11816,-1.22656 -20.21093,-16.96191 -8.09473,-15.73731 -23.27637,-5.35742 -33.958,-8.03614 -10.68262,-2.67773 -18.71875,-4.46289 -29.43359,-23.21386 -10.71484,-18.74903 -32.89745,-23.9961 -41.9619,-34.82031 -25.96582,-31.00586 -24.1084,-54.46387 -29.46484,-65.17774 -5.35742,-10.7168 -19.22558,-28.22266 -19.22558,-28.22266 z"
              style="fill:#2aa846;fill-opacity:1"
            ></path>
            <path
              id="path4665"
              d="m -83.036462,640.22023 c 0,0 26.786126,2.67382 40.178701,14.28418 13.392575,11.60839 15.181637,16.07519 35.7158115,20.53808 20.5341745,4.46094 29.4648365,16.06543 16.0712852,38.38965 -13.3925749,22.32129 -37.5038967,58.03711 -49.1083867,68.75195 -11.603512,10.71582 -25.890618,19.64356 -31.248039,37.5 -5.356444,17.85449 -7.145506,28.5625 4.46289,35.71094 0,0 -6.246093,15.18066 -20.533198,-4.46289 -14.288082,-19.64551 -2.679687,-42.85645 0,-56.25 2.677733,-13.3916 9.819333,-53.56641 5.355467,-63.39258 -4.460936,-9.82324 -25.000969,-16.07519 -30.358389,-36.60742 -5.35742,-20.5332 4.01855,-60.49219 29.463858,-54.46191 z"
              style="fill:#2aa846;fill-opacity:1"
            ></path>
            <path
              id="path4667"
              d="m -283.92019,459.87256 c 97.63181,-97.63379 255.919848,-97.63184 353.552638,0 97.632792,97.62988 97.632792,255.91992 9.7e-4,353.55175 0,0 113.425772,-149.99023 -47.16111,-310.57714 C -138.11554,342.25927 -283.92019,459.87256 -283.92019,459.87256 Z"
              style="opacity:0.36700056;fill:#414141;fill-opacity:1;enable-background:new"
            ></path>
          </g>
        </g>
      </svg>
    </button>
    <div
      class="relative blur-[0.5px] opacity-80 top-[2.4em] left-[-1em] bg-[#f5f5f5] w-[50px] h-[50px] rounded-full shadow-[#f5f5f5_65px_-15px_0_-5px,#f5f5f5_25px_-25px,#f5f5f5_30px_10px,#f5f5f5_60px_15px_0_-10px,#f5f5f5_85px_5px_0_-5px] group-hover:opacity-0 group-active:opacity-0 transition duration-500 ease-in-out"
    ></div>
    <div
      class="relative blur-[0.5px] opacity-80 opacity-100 top-[6em] left-[13em] bg-[#f5f5f5] w-[50px] h-[50px] rounded-full shadow-[#f5f5f5_65px_-15px_0_-5px,#f5f5f5_25px_-25px,#f5f5f5_30px_10px,#f5f5f5_60px_15px_0_-10px,#f5f5f5_85px_5px_0_-5px] group-hover:opacity-0 group-active:opacity-0 transition duration-500 ease-in-out"
    ></div>
    <div
      class="relative bottom-[6em] left-[0.15em] w-[20em] h-[17em] transition duration-500 ease-in-out opacity-0 group-hover:opacity-100 scale-[1.2] group-active:scale-[1.01]"
    >
      <div
        class="animate-pulse w-[2px] h-[2px] bg-white rounded-full shadow-[220px_118px_#fff,280px_176px_#fff,40px_50px_#fff,60px_180px_#fff,200px_250px_#fff]"
      ></div>
      <div
        class="animate-[pulse_1s_infinite_100ms] w-[2px] h-[2px] bg-white rounded-full shadow-[120px_170px_#fff,_180px_176px_#fff,_140px_45px_#fff,_10px_230px_#fff,_70px_120px_#fff,_170px_10px_#fff,_70px_70px_#fff]"
      ></div>
      <div
        class="animate-[pulse_1s_infinite_200ms] w-[2px] h-[2px] bg-white rounded-full shadow-[20px_130px_#fff,_300px_130px_#fff,_80px_20px_#fff,_190px_50px_#fff,_270px_20px_#fff,_240px_70px_#fff,_170px_210px_#fff]"
      ></div>
      <div
        class="animate-[pulse_1s_infinite_300ms] w-[2px] h-[2px] bg-white rounded-full shadow-[120px_230px_#fff,_110px_80px_#fff,_280px_80px_#fff,_280px_230px_#fff,_220px_190px_#fff,_100px_200px_#fff,_250px_150px_#fff]"
      ></div>
    </div>
  </div>
</div>


    

================================================
FILE: Buttons/Praashoo7_brown-quail-45.html
================================================
<button>
  BUTTON
</button>
<style>
/* From Uiverse.io by Praashoo7 - Tags: neumorphism, button, hover */
button {
  padding: 1em;
  padding-left: 2em;
  padding-right: 2em;
  border-radius: 15px;
  font-weight: bold;
  transition: .4s ease-in-out;
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.2);
  letter-spacing: 0.2em;
  border: none;
}

button:hover {
  letter-spacing: 0.5em;
  transform: translateY(-0.8em);
  background: #171717;
  color: white;
}

button:active {
  letter-spacing: 0.4em;
  transition: 0.1s all;
  transform: translateY(-0.6em);
  background: #171717;
  color: white;
}
</style>


================================================
FILE: Buttons/Praashoo7_chilly-baboon-67.html
================================================
<div class="share">
  <button class="btn1">
    <svg fill-rule="nonzero" height="30px" width="30px" viewBox="0,0,256,256" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="instagram"><g style="mix-blend-mode: normal" text-anchor="none" font-size="none" font-weight="none" font-family="none" stroke-dashoffset="0" stroke-dasharray="" stroke-miterlimit="10" stroke-linejoin="miter" stroke-linecap="butt" stroke-width="1" stroke="none" fill-rule="nonzero"><g transform="scale(8,8)"><path d="M11.46875,5c-3.55078,0 -6.46875,2.91406 -6.46875,6.46875v9.0625c0,3.55078 2.91406,6.46875 6.46875,6.46875h9.0625c3.55078,0 6.46875,-2.91406 6.46875,-6.46875v-9.0625c0,-3.55078 -2.91406,-6.46875 -6.46875,-6.46875zM11.46875,7h9.0625c2.47266,0 4.46875,1.99609 4.46875,4.46875v9.0625c0,2.47266 -1.99609,4.46875 -4.46875,4.46875h-9.0625c-2.47266,0 -4.46875,-1.99609 -4.46875,-4.46875v-9.0625c0,-2.47266 1.99609,-4.46875 4.46875,-4.46875zM21.90625,9.1875c-0.50391,0 -0.90625,0.40234 -0.90625,0.90625c0,0.50391 0.40234,0.90625 0.90625,0.90625c0.50391,0 0.90625,-0.40234 0.90625,-0.90625c0,-0.50391 -0.40234,-0.90625 -0.90625,-0.90625zM16,10c-3.30078,0 -6,2.69922 -6,6c0,3.30078 2.69922,6 6,6c3.30078,0 6,-2.69922 6,-6c0,-3.30078 -2.69922,-6 -6,-6zM16,12c2.22266,0 4,1.77734 4,4c0,2.22266 -1.77734,4 -4,4c-2.22266,0 -4,-1.77734 -4,-4c0,-2.22266 1.77734,-4 4,-4z"></path></g></g></svg>
    <span class="tooltiptext1">
      <div class="card">
        <svg fill="#000000" width="24px" viewBox="0 0 24 24" height="24px" xmlns="http://www.w3.org/2000/svg" class="account"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"></path></svg>
      </div>
      <div class="username">@meoninsta</div>
    </span>
  </button>
  <button class="btn2">
    <svg height="30px" width="30px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" class="twitter"><path d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"></path></svg>
    <span class="tooltiptext2">
      <div class="card">
        <svg fill="#000000" width="24px" viewBox="0 0 24 24" height="24px" xmlns="http://www.w3.org/2000/svg" class="account"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"></path></svg>
      </div>
      <div class="username">@meontwitter</div>
    </span>
  </button>
  <button class="btn3">
    <svg height="30px" width="30px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" class="git">    <path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"></path></svg>
    <span class="tooltiptext3">
      <div class="card">
        <svg fill="#000000" width="24px" viewBox="0 0 24 24" height="24px" xmlns="http://www.w3.org/2000/svg" class="account"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"></path></svg>
      </div>
      <div class="username">@meongit</div>
    </span>
  </button>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: tooltip, social, button, rounded */
.share {
  display: flex;
  flex-direction: row;
  gap: 1em;
  transition: .4s ease-in-out;
  margin-top: 60px;
}

.btn1 {
  position: relative;
  width: 3em;
  height: 3em;
  outline: none;
  border: none;
  border-radius: 50%;
  background-color: white;
  transition: .4s all;
}

.btn1 .instagram {
  margin-top: 0.1em;
  fill: #cc39a4;
}

.btn1 .tooltiptext1 {
  visibility: hidden;
  width: 6em;
  height: 8em;
  background-color: whitesmoke;
  color: black;
  text-align: center;
  border-radius: 10px;
  padding: 1em;
  position: absolute;
  left: -1.5em;
  top: -8em;
  z-index: 1;
  transition: .1s ease-in-out;
}

.btn1 .tooltiptext1 .card {
  width: 4em;
  height: 4em;
  background-color: white;
}

.btn1 .tooltiptext1 .account {
  margin-top: 1em;
}

.btn1 .tooltiptext1 .username {
  font-size: 0.7em;
  margin-top: 1.6em;
  font-weight: bold;
}

.btn1:hover .tooltiptext1 {
  transform: translateY(-1em);
  visibility: visible;
}

.btn1:hover {
  background-color: #cc39a4;
}

.btn1:hover .instagram {
  fill: white;
}

.btn2 {
  position: relative;
  width: 3em;
  height: 3em;
  outline: none;
  border: none;
  border-radius: 50%;
  background-color: white;
  transition: .4s all;
}

.btn2 .twitter {
  margin-top: .25em;
  margin-left: .1em;
  fill: #03A9F4;
}

.btn2 .tooltiptext2 {
  visibility: hidden;
  width: 6em;
  height: 8em;
  background-color: whitesmoke;
  color: black;
  text-align: center;
  border-radius: 10px;
  padding: 1em;
  position: absolute;
  left: -1.5em;
  top: -8em;
  z-index: 1;
  transition: .1s ease-in-out;
}

.btn2 .tooltiptext2 .card {
  width: 4em;
  height: 4em;
  background-color: white;
}

.btn2 .tooltiptext2 .account {
  margin-top: 1em;
}

.btn2 .tooltiptext2 .username {
  font-size: 0.6em;
  margin-top: 1.6em;
  font-weight: bold;
}

.btn2:hover .tooltiptext2 {
  transform: translateY(-1em);
  visibility: visible;
}

.btn2:hover {
  background-color: #03A9F4;
}

.btn2:hover .twitter {
  fill: white;
}

.btn3 {
  position: relative;
  width: 3em;
  height: 3em;
  outline: none;
  border: none;
  border-radius: 50%;
  background-color: white;
  transition: .4s all;
}

.btn3 .tooltiptext3 {
  visibility: hidden;
  width: 6em;
  height: 8em;
  background-color: whitesmoke;
  color: black;
  text-align: center;
  border-radius: 10px;
  padding: 1em;
  position: absolute;
  left: -1.5em;
  top: -8em;
  z-index: 1;
  transition: .1s ease-in-out;
}

.btn3 .tooltiptext3 .card {
  width: 4em;
  height: 4em;
  background-color: white;
}

.btn3 .tooltiptext3 .account {
  margin-top: 1em;
}

.btn3 .tooltiptext3 .username {
  font-size: 0.7em;
  margin-top: 1.6em;
  font-weight: bold;
}

.btn3:hover .tooltiptext3 {
  transform: translateY(-1em);
  visibility: visible;
}

.btn3:hover {
  background-color: black;
}

.btn3:hover .git {
  fill: white;
}
</style>


================================================
FILE: Buttons/Praashoo7_clever-turtle-2.html
================================================
<button>
  BUTTON
</button>
<style>
/* From Uiverse.io by Praashoo7 - Tags: brown, button, stitched */
button {
  outline: none;
  color: #DAA06D;
  padding: 1em;
  padding-left: 3em;
  padding-right: 3em;
  border: 2px dashed #DAA06D;
  border-radius: 15px;
  background-color: #EADDCA;
  box-shadow: 0 0 0 4px #EADDCA, 2px 2px 4px 2px rgba(0, 0, 0, 0.5);
  transition: .1s ease-in-out, .4s color;
}

button:active {
  transform: translateX(0.1em) translateY(0.1em);
  box-shadow: 0 0 0 4px #EADDCA, 1.5px 1.5px 2.5px 1.5px rgba(0, 0, 0, 0.5);
}
</style>


================================================
FILE: Buttons/Praashoo7_mighty-warthog-35.html
================================================
<div class="main">
  <button>
    <div class="text">EXPLORE</div>
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 299 101" width="150px" height="50px" class="planet">
    
      <path d="M 0.00 0.00 Q 17.28 0.00 34.56 0.00 Q 39.65 1.28 44.83 2.11 A 1.80 1.16 61.0 0 1 45.65 2.55 Q 46.53 3.35 47.63 3.09 Q 49.47 2.65 51.28 3.18 Q 57.38 4.96 62.81 1.81 Q 63.87 1.20 69.81 0.00 Q 184.41 0.00 299.00 0.00 Q 299.00 16.66 299.00 33.31 Q 297.66 32.35 296.00 32.23 Q 279.38 31.05 262.75 32.00 Q 257.14 32.32 253.72 33.35 A 1.40 0.42 22.9 0 1 252.82 33.25 Q 252.33 33.10 251.50 33.25 Q 244.92 34.44 233.70 35.12 Q 233.66 35.13 229.33 35.71 Q 227.14 36.00 224.50 35.75 Q 219.35 35.26 213.36 36.66 Q 212.98 36.75 212.63 36.73 Q 210.82 36.64 212.02 36.20 Q 212.47 36.03 212.05 35.83 L 207.66 33.74 A 0.51 0.42 27.9 0 1 207.40 33.11 Q 208.07 31.96 209.50 31.97 A 0.58 0.50 2.1 0 0 210.07 31.51 Q 210.18 30.19 209.25 30.02 A 0.27 0.26 22.5 0 1 209.07 29.61 Q 209.56 28.91 209.42 28.22 A 0.48 0.43 -16.7 0 0 208.79 27.93 Q 205.88 28.99 202.89 28.76 Q 201.39 28.65 197.08 28.14 Q 194.08 27.79 191.31 26.44 Q 189.30 26.08 187.25 26.04 Q 175.73 23.97 163.02 24.89 A 1.54 1.52 -26.4 0 1 161.93 24.53 Q 159.49 22.39 156.50 22.50 Q 154.34 23.29 152.17 24.03 Q 149.88 24.80 147.70 24.70 Q 141.62 24.42 135.79 22.50 L 135.46 22.00 Q 135.56 21.08 134.73 21.15 Q 134.14 21.20 133.79 21.07 Q 129.89 19.65 125.83 20.38 Q 125.19 20.50 124.67 20.41 Q 124.07 20.30 123.49 20.14 A 1.91 1.84 -43.9 0 0 122.52 20.14 Q 119.33 21.00 116.83 19.13 A 1.51 1.46 62.7 0 0 115.94 18.83 L 108.19 18.81 Q 106.89 18.81 106.81 18.81 Q 98.07 19.37 89.50 17.50 Q 86.75 16.90 85.42 15.78 A 0.92 0.61 -69.8 0 1 85.23 14.98 Q 85.30 14.63 85.21 14.25 Q 85.41 13.10 84.50 13.00 Q 82.94 12.82 83.75 13.96 Q 83.34 15.34 82.00 15.38 Q 81.49 15.39 80.12 14.74 Q 77.87 13.67 76.10 15.38 Q 75.74 15.73 75.28 15.91 Q 74.14 16.35 72.69 17.44 Q 66.32 22.24 57.75 22.66 Q 53.49 22.87 49.25 23.25 Q 48.15 23.35 47.50 23.25 Q 41.73 22.38 36.22 24.10 A 0.91 0.88 -32.1 0 1 35.36 23.92 Q 33.78 22.49 32.98 20.53 A 0.48 0.47 -21.3 0 0 32.36 20.26 L 31.03 20.78 A 0.52 0.51 -20.7 0 1 30.36 20.48 Q 29.80 18.93 31.20 18.53 Q 31.74 18.38 31.23 18.26 Q 30.88 18.17 30.52 18.26 A 0.72 0.57 -20.3 0 1 29.79 18.02 Q 28.82 16.38 29.15 14.49 A 1.84 1.49 -57.5 0 0 29.04 13.54 L 28.09 11.41 A 0.24 0.24 -36.2 0 0 27.69 11.35 Q 26.76 12.37 27.19 10.95 A 0.69 0.63 -60.7 0 0 27.03 10.28 Q 24.63 8.01 20.27 8.00 Q 19.27 7.99 18.34 7.65 Q 14.03 6.09 11.02 7.24 A 1.07 0.91 47.0 0 1 10.16 7.14 Q 9.39 6.69 8.85 7.28 A 0.48 0.45 -47.6 0 1 8.20 7.33 Q 5.63 4.90 1.46 5.24 A 0.43 0.43 -2.2 0 0 1.06 5.67 Q 1.05 6.67 0.00 6.94 Q 0.00 3.47 0.00 0.00 Z M 172.90 3.97 Q 172.82 3.38 173.56 3.06 Q 174.73 2.57 174.91 1.56 A 0.72 0.65 17.8 0 0 174.49 0.84 Q 173.20 0.24 172.76 0.76 Q 171.72 1.96 171.61 3.54 Q 171.36 6.94 173.19 7.18 A 0.81 0.79 -70.9 0 0 173.97 6.79 Q 174.74 5.51 173.49 4.68 A 1.23 0.56 25.7 0 1 172.90 3.97 Z M 112.14 8.04 Q 113.98 7.91 112.21 7.28 Q 111.92 7.18 111.65 7.24 Q 110.96 7.41 111.33 7.79 A 1.12 0.78 -17.9 0 0 112.14 8.04 Z M 71.77 10.44 Q 70.75 11.19 71.11 11.69 A 0.92 0.64 -20.6 0 0 71.99 11.91 Q 73.51 11.57 72.64 10.54 A 0.66 0.66 -38.4 0 0 71.77 10.44 Z M 146.53 11.94 Q 146.39 12.23 146.59 12.46 A 0.58 0.47 -42.8 0 0 147.37 12.41 Q 148.31 11.50 147.27 11.52 A 0.90 0.71 8.5 0 0 146.53 11.94 Z M 278.39 22.47 Q 277.84 23.75 278.44 23.93 A 1.01 0.64 -53.9 0 0 279.30 23.59 Q 280.52 22.32 278.72 22.26 A 0.34 0.34 12.2 0 0 278.39 22.47 Z" fill-opacity="1.000" fill="rgb(22,57,132)"></path>
      
      <path d="M 34.56 0.00 Q 52.19 0.00 69.81 0.00 Q 63.87 1.20 62.81 1.81 Q 57.38 4.96 51.28 3.18 Q 49.47 2.65 47.63 3.09 Q 46.53 3.35 45.65 2.55 A 1.80 1.16 61.0 0 0 44.83 2.11 Q 39.65 1.28 34.56 0.00 Z" fill-opacity="1.000" fill="rgb(31,53,127)"></path>
      
      <path d="M 174.91 1.56 Q 174.73 2.57 173.56 3.06 Q 172.82 3.38 172.90 3.97 A 1.23 0.56 25.7 0 0 173.49 4.68 Q 174.74 5.51 173.97 6.79 A 0.81 0.79 -70.9 0 1 173.19 7.18 Q 171.36 6.94 171.61 3.54 Q 171.72 1.96 172.76 0.76 Q 173.20 0.24 174.49 0.84 A 0.72 0.65 17.8 0 1 174.91 1.56 Z" fill-opacity="1.000" fill="rgb(250,225,233)"></path>
      
      <path d="M 1.46 5.24 Q 5.63 4.90 8.20 7.33 A 0.48 0.45 -47.6 0 0 8.85 7.28 Q 9.39 6.69 10.16 7.14 A 1.07 0.91 47.0 0 0 11.02 7.24 Q 14.03 6.09 18.34 7.65 Q 19.27 7.99 20.27 8.00 Q 24.63 8.01 27.03 10.28 A 0.69 0.63 -60.7 0 1 27.19 10.95 Q 26.76 12.37 27.69 11.35 A 0.24 0.24 -36.2 0 1 28.09 11.41 L 29.04 13.54 A 1.84 1.49 -57.5 0 1 29.15 14.49 Q 28.82 16.38 29.79 18.02 A 0.72 0.57 -20.3 0 0 30.52 18.26 Q 30.88 18.17 31.23 18.26 Q 31.74 18.38 31.20 18.53 Q 29.80 18.93 30.36 20.48 A 0.52 0.51 -20.7 0 0 31.03 20.78 L 32.36 20.26 A 0.48 0.47 -21.3 0 1 32.98 20.53 Q 33.78 22.49 35.36 23.92 A 0.91 0.88 -32.1 0 0 36.22 24.10 Q 41.73 22.38 47.50 23.25 Q 48.15 23.35 49.25 23.25 Q 53.49 22.87 57.75 22.66 Q 66.32 22.24 72.69 17.44 Q 74.14 16.35 75.28 15.91 Q 75.74 15.73 76.10 15.38 Q 77.87 13.67 80.12 14.74 Q 81.49 15.39 82.00 15.38 Q 83.34 15.34 83.75 13.96 Q 84.41 14.41 85.21 14.25 Q 85.30 14.63 85.23 14.98 A 0.92 0.61 -69.8 0 0 85.42 15.78 Q 86.75 16.90 89.50 17.50 Q 98.07 19.37 106.81 18.81 Q 106.89 18.81 108.19 18.81 L 115.94 18.83 A 1.51 1.46 62.7 0 1 116.83 19.13 Q 119.33 21.00 122.52 20.14 A 1.91 1.84 -43.9 0 1 123.49 20.14 Q 124.07 20.30 124.67 20.41 Q 125.19 20.50 125.83 20.38 Q 129.89 19.65 133.79 21.07 Q 134.14 21.20 134.73 21.15 Q 135.56 21.08 135.46 22.00 Q 134.73 21.83 134.43 22.29 A 0.65 0.58 36.4 0 0 134.60 23.10 Q 135.41 23.74 135.79 22.50 Q 141.62 24.42 147.70 24.70 Q 149.88 24.80 152.17 24.03 Q 154.34 23.29 156.50 22.50 Q 159.49 22.39 161.93 24.53 A 1.54 1.52 -26.4 0 0 163.02 24.89 Q 175.73 23.97 187.25 26.04 Q 188.19 28.19 185.48 27.62 Q 185.02 27.52 185.17 27.97 L 185.95 30.35 A 0.55 0.52 -9.2 0 1 185.43 31.03 L 176.66 31.26 Q 175.70 31.28 176.54 31.87 L 178.32 33.11 Q 178.80 33.44 178.19 33.39 Q 175.04 33.16 172.06 34.12 Q 171.96 34.15 169.88 34.54 Q 168.49 34.80 167.71 36.20 Q 167.32 36.89 166.70 36.71 A 0.72 0.63 25.5 0 0 165.99 36.91 Q 165.57 37.42 165.26 36.90 A 1.17 0.75 71.5 0 0 164.57 36.35 Q 162.38 36.02 160.19 36.44 Q 155.24 37.39 150.25 36.73 Q 147.36 36.35 145.87 38.57 A 0.43 0.40 15.7 0 1 145.52 38.75 Q 144.61 38.79 145.49 39.12 Q 145.68 39.19 145.47 39.24 Q 142.23 39.93 138.94 39.38 Q 138.63 39.33 138.92 39.41 Q 141.23 40.08 138.25 40.00 Q 130.01 39.79 120.04 42.36 Q 119.83 42.41 118.95 42.46 Q 118.19 42.50 118.00 43.20 A 1.38 0.85 -88.4 0 1 117.51 43.95 Q 113.49 46.39 110.69 47.19 Q 106.76 48.30 103.92 49.62 Q 100.87 51.04 98.68 51.48 Q 95.08 52.20 91.50 53.00 Q 86.38 53.18 81.71 51.20 Q 81.24 51.00 80.75 51.05 Q 77.88 51.35 75.00 51.50 Q 70.25 53.32 65.47 55.08 A 1.73 1.62 40.7 0 1 64.52 55.12 Q 61.13 54.29 57.00 55.00 Q 53.61 55.58 48.69 55.34 A 1.67 1.66 -24.8 0 1 47.79 55.01 L 41.58 50.36 A 1.58 1.18 -85.5 0 1 41.08 49.57 Q 40.50 47.42 38.17 47.83 A 0.72 0.71 69.8 0 1 37.44 47.49 Q 35.28 43.80 31.21 45.75 Q 29.16 45.29 29.05 46.94 A 0.46 0.41 84.9 0 0 29.57 47.43 L 30.21 47.25 Q 31.33 47.69 30.81 48.81 Q 30.71 49.03 28.75 56.25 Q 28.28 57.96 29.86 59.82 A 0.36 0.33 -32.5 0 1 29.72 60.34 L 27.47 61.42 A 0.57 0.44 64.7 0 0 27.31 62.12 L 27.80 63.16 Q 28.13 63.86 27.34 63.76 Q 24.39 63.39 25.75 64.69 Q 26.15 65.07 26.73 65.26 Q 29.11 66.07 31.52 65.40 A 1.15 1.14 52.3 0 1 32.43 65.52 Q 34.76 66.86 37.51 66.68 Q 39.28 66.56 37.75 66.75 Q 35.11 66.63 32.78 66.96 Q 31.48 67.15 32.49 67.99 Q 34.50 69.68 38.11 68.46 Q 38.98 68.17 39.89 68.24 Q 42.69 68.47 40.37 69.23 Q 37.76 70.08 39.75 69.75 Q 42.64 69.50 45.51 69.09 Q 46.87 68.90 49.75 67.72 Q 51.87 66.85 54.25 66.75 Q 56.97 66.13 59.70 65.53 Q 60.14 65.43 65.03 63.92 Q 68.49 62.85 72.19 63.19 Q 76.00 62.66 79.82 62.13 Q 80.28 62.07 80.77 62.25 Q 83.77 63.39 87.75 62.25 Q 89.46 61.76 90.09 60.77 A 0.79 0.65 -67.0 0 1 90.80 60.40 Q 94.49 61.03 97.75 59.50 Q 99.90 58.49 101.50 58.25 Q 112.52 56.60 120.86 49.19 Q 120.87 49.18 122.59 47.28 Q 124.20 45.50 126.69 45.33 A 1.35 0.98 57.0 0 1 127.55 45.66 Q 128.87 46.78 129.99 46.00 A 3.54 3.51 -60.8 0 1 132.18 45.37 Q 135.55 45.56 134.00 46.71 Q 131.57 47.83 133.50 49.54 Q 132.97 50.90 131.84 50.85 Q 131.35 50.84 130.49 50.14 Q 129.29 49.18 128.88 50.57 Q 128.62 51.47 128.36 51.81 Q 126.50 54.27 123.68 53.58 A 0.88 0.83 27.2 0 0 122.85 53.82 Q 121.06 55.82 118.81 57.31 Q 114.89 58.47 111.50 60.75 Q 110.16 61.65 100.89 64.90 Q 94.52 67.13 91.09 67.66 Q 86.01 68.45 80.82 67.92 Q 76.12 67.44 70.94 69.69 Q 67.55 71.16 63.32 71.30 Q 59.90 71.41 57.80 72.05 Q 45.90 75.67 34.56 80.81 Q 31.91 81.12 29.97 79.27 Q 27.51 76.91 24.63 75.08 Q 22.75 73.88 21.72 72.51 Q 20.52 70.92 19.46 69.24 Q 19.21 68.86 18.75 68.55 Q 17.20 67.53 17.20 65.84 Q 17.21 64.85 18.42 62.93 Q 21.39 58.24 20.70 52.75 Q 20.39 50.30 19.19 48.91 Q 17.78 47.27 15.44 46.69 Q 10.71 45.52 6.44 47.44 Q 3.15 47.84 0.00 48.94 Q 0.00 27.94 0.00 6.94 Q 1.05 6.67 1.06 5.67 A 0.43 0.43 -2.2 0 1 1.46 5.24 Z M 4.88 23.59 Q 6.99 23.68 5.05 22.87 A 0.68 0.47 33.9 0 0 4.47 22.88 Q 4.28 23.00 4.28 23.17 A 0.62 0.40 2.4 0 0 4.88 23.59 Z M 75.5507 33.4303 A 1.09 0.92 43.5 0 0 75.3933 32.0127 A 1.09 0.92 43.5 0 0 73.9693 31.9297 A 1.09 0.92 43.5 0 0 74.1267 33.3473 A 1.09 0.92 43.5 0 0 75.5507 33.4303 Z M 89.9965 34.9541 A 0.92 0.70 -15.5 0 0 88.9229 34.5255 A 0.92 0.70 -15.5 0 0 88.2235 35.4459 A 0.92 0.70 -15.5 0 0 89.2971 35.8745 A 0.92 0.70 -15.5 0 0 89.9965 34.9541 Z M 45.13 36.92 Q 45.56 36.27 44.93 36.04 A 0.71 0.64 -62.4 0 0 44.14 36.33 Q 43.57 37.18 44.32 37.30 A 0.85 0.79 -68.2 0 0 45.13 36.92 Z" fill-opacity="1.000" fill="rgb(37,61,150)"></path>
      
      <path d="M 111.33 7.79 Q 110.96 7.41 111.65 7.24 Q 111.92 7.18 112.21 7.28 Q 113.98 7.91 112.14 8.04 A 1.12 0.78 -17.9 0 1 111.33 7.79 Z" fill-opacity="1.000" fill="rgb(150,180,241)"></path>
      
      <path d="M 72.64 10.54 Q 73.51 11.57 71.99 11.91 A 0.92 0.64 -20.6 0 1 71.11 11.69 Q 70.75 11.19 71.77 10.44 A 0.66 0.66 -38.4 0 1 72.64 10.54 Z" fill-opacity="1.000" fill="rgb(108,155,236)"></path>
      
      <path d="M 146.59 12.46 Q 146.39 12.23 146.53 11.94 A 0.90 0.71 8.5 0 1 147.27 11.52 Q 148.31 11.50 147.37 12.41 A 0.58 0.47 -42.8 0 1 146.59 12.46 Z" fill-opacity="1.000" fill="rgb(60,76,177)"></path>
      
      <path d="M 84.50 13.00 Q 85.41 13.10 85.21 14.25 Q 84.41 14.41 83.75 13.96 Q 82.94 12.82 84.50 13.00 Z" fill-opacity="1.000" fill="rgb(150,180,241)"></path>
      
      <path d="M 135.46 22.00 L 135.79 22.50 Q 135.41 23.74 134.60 23.10 A 0.65 0.58 36.4 0 1 134.43 22.29 Q 134.73 21.83 135.46 22.00 Z" fill-opacity="1.000" fill="rgb(150,180,241)"></path>
      
      <path d="M 278.72 22.26 Q 280.52 22.32 279.30 23.59 A 1.01 0.64 -53.9 0 1 278.44 23.93 Q 277.84 23.75 278.39 22.47 A 0.34 0.34 12.2 0 1 278.72 22.26 Z" fill-opacity="1.000" fill="rgb(150,180,241)"></path>
      
      <path d="M 5.05 22.87 Q 6.99 23.68 4.88 23.59 A 0.62 0.40 2.4 0 1 4.28 23.17 Q 4.28 23.00 4.47 22.88 A 0.68 0.47 33.9 0 1 5.05 22.87 Z" fill-opacity="1.000" fill="rgb(60,76,177)"></path>
      
      <path d="M 187.25 26.04 Q 189.30 26.08 191.31 26.44 Q 194.08 27.79 197.08 28.14 Q 201.39 28.65 202.89 28.76 Q 205.88 28.99 208.79 27.93 A 0.48 0.43 -16.7 0 1 209.42 28.22 Q 209.56 28.91 209.07 29.61 A 0.27 0.26 22.5 0 0 209.25 30.02 Q 210.18 30.19 210.07 31.51 A 0.58 0.50 2.1 0 1 209.50 31.97 Q 208.07 31.96 207.40 33.11 A 0.51 0.42 27.9 0 0 207.66 33.74 L 212.05 35.83 Q 212.47 36.03 212.02 36.20 Q 210.82 36.64 212.63 36.73 Q 212.98 36.75 213.36 36.66 Q 219.35 35.26 224.50 35.75 Q 227.14 36.00 229.33 35.71 Q 233.66 35.13 233.70 35.12 Q 244.92 34.44 251.50 33.25 Q 252.33 33.10 252.82 33.25 A 1.40 0.42 22.9 0 0 253.72 33.35 Q 257.14 32.32 262.75 32.00 Q 279.38 31.05 296.00 32.23 Q 297.66 32.35 299.00 33.31 Q 299.00 37.44 299.00 41.56 Q 298.88 41.51 298.75 41.46 L 298.71 39.75 Q 294.54 38.71 290.25 38.50 Q 285.26 39.00 280.25 39.05 Q 272.78 39.13 270.75 39.26 Q 264.35 39.68 261.31 40.31 Q 256.95 41.22 252.50 41.25 Q 245.47 42.97 238.25 43.50 Q 230.53 45.62 222.50 45.75 Q 217.70 47.12 212.75 46.50 Q 198.26 49.19 183.79 51.95 Q 183.48 52.00 183.24 51.91 Q 182.32 51.54 183.76 51.19 Q 184.59 50.98 183.79 50.69 Q 182.05 50.06 183.75 49.76 Q 190.32 48.59 185.75 48.05 Q 185.65 48.04 184.78 48.16 Q 184.16 48.25 183.74 47.57 A 0.43 0.43 71.4 0 1 184.06 46.92 Q 184.64 46.86 184.70 46.60 A 0.73 0.23 -79.4 0 1 184.99 46.05 Q 186.72 45.42 184.96 44.68 A 1.24 0.90 -39.1 0 0 184.05 44.73 Q 182.48 45.41 181.15 44.55 A 1.56 0.87 46.7 0 0 180.26 44.27 L 174.24 44.76 Q 173.70 44.80 174.14 45.10 L 174.49 45.34 Q 174.86 45.59 174.46 45.69 Q 172.44 46.21 170.44 45.94 Q 167.83 45.59 166.52 45.68 Q 163.95 45.84 161.39 45.65 Q 161.37 45.65 158.15 45.85 Q 155.44 46.01 153.39 43.09 A 1.20 1.19 50.0 0 0 151.56 42.93 Q 148.71 45.83 145.44 44.06 Q 145.33 44.01 142.61 43.05 Q 142.53 43.02 140.99 42.24 Q 139.76 41.61 138.39 42.21 A 0.62 0.43 72.2 0 0 138.18 42.88 Q 138.30 43.32 137.88 43.73 Q 137.30 44.30 137.14 44.54 Q 136.28 45.85 135.21 47.00 Q 134.67 46.65 134.00 46.71 Q 135.55 45.56 132.18 45.37 A 3.54 3.51 -60.8 0 0 129.99 46.00 Q 128.87 46.78 127.55 45.66 A 1.35 0.98 57.0 0 0 126.69 45.33 Q 124.20 45.50 122.59 47.28 Q 120.87 49.18 120.86 49.19 Q 112.52 56.60 101.50 58.25 Q 99.90 58.49 97.75 59.50 Q 94.49 61.03 90.80 60.40 A 0.79 0.65 -67.0 0 0 90.09 60.77 Q 89.46 61.76 87.75 62.25 Q 83.77 63.39 80.77 62.25 Q 80.28 62.07 79.82 62.13 Q 76.00 62.66 72.19 63.19 Q 68.49 62.85 65.03 63.92 Q 60.14 65.43 59.70 65.53 Q 56.97 66.13 54.25 66.75 Q 51.87 66.85 49.75 67.72 Q 46.87 68.90 45.51 69.09 Q 42.64 69.50 39.75 69.75 Q 37.76 70.08 40.37 69.23 Q 42.69 68.47 39.89 68.24 Q 38.98 68.17 38.11 68.46 Q 34.50 69.68 32.49 67.99 Q 31.48 67.15 32.78 66.96 Q 35.11 66.63 37.75 66.75 Q 39.28 66.56 37.51 66.68 Q 34.76 66.86 32.43 65.52 A 1.15 1.14 52.3 0 0 31.52 65.40 Q 29.11 66.07 26.73 65.26 Q 26.15 65.07 25.75 64.69 Q 24.39 63.39 27.34 63.76 Q 28.13 63.86 27.80 63.16 L 27.31 62.12 A 0.57 0.44 64.7 0 1 27.47 61.42 L 29.72 60.34 A 0.36 0.33 -32.5 0 0 29.86 59.82 Q 28.28 57.96 28.75 56.25 Q 30.71 49.03 30.81 48.81 Q 31.33 47.69 30.21 47.25 Q 30.89 46.61 31.21 45.75 Q 35.28 43.80 37.44 47.49 A 0.72 0.71 69.8 0 0 38.17 47.83 Q 40.50 47.42 41.08 49.57 A 1.58 1.18 -85.5 0 0 41.58 50.36 L 47.79 55.01 A 1.67 1.66 -24.8 0 0 48.69 55.34 Q 53.61 55.58 57.00 55.00 Q 61.13 54.29 64.52 55.12 A 1.73 1.62 40.7 0 0 65.47 55.08 Q 70.25 53.32 75.00 51.50 Q 77.88 51.35 80.75 51.05 Q 81.24 51.00 81.71 51.20 Q 86.38 53.18 91.50 53.00 Q 95.08 52.20 98.68 51.48 Q 100.87 51.04 103.92 49.62 Q 106.76 48.30 110.69 47.19 Q 113.49 46.39 117.51 43.95 A 1.38 0.85 -88.4 0 0 118.00 43.20 Q 118.19 42.50 118.95 42.46 Q 119.83 42.41 120.04 42.36 Q 130.01 39.79 138.25 40.00 Q 141.23 40.08 138.92 39.41 Q 138.63 39.33 138.94 39.38 Q 142.23 39.93 145.47 39.24 Q 145.68 39.19 145.49 39.12 Q 144.61 38.79 145.52 38.75 A 0.43 0.40 15.7 0 0 145.87 38.57 Q 147.36 36.35 150.25 36.73 Q 155.24 37.39 160.19 36.44 Q 162.38 36.02 164.57 36.35 A 1.17 0.75 71.5 0 1 165.26 36.90 Q 165.57 37.42 165.99 36.91 A 0.72 0.63 25.5 0 1 166.70 36.71 Q 167.32 36.89 167.71 36.20 Q 168.49 34.80 169.88 34.54 Q 171.96 34.15 172.06 34.12 Q 175.04 33.16 178.19 33.39 Q 178.80 33.44 178.32 33.11 L 176.54 31.87 Q 175.70 31.28 176.66 31.26 L 185.43 31.03 A 0.55 0.52 -9.2 0 0 185.95 30.35 L 185.17 27.97 Q 185.02 27.52 185.48 27.62 Q 188.19 28.19 187.25 26.04 Z M 167.15 37.73 Q 166.89 37.44 166.62 37.54 A 0.77 0.49 81.1 0 0 166.32 38.23 Q 166.39 40.21 167.67 38.37 A 0.26 0.20 -48.0 0 0 167.69 38.12 Q 167.64 38.05 167.58 38.01 Q 167.16 37.74 167.15 37.73 Z" fill-opacity="1.000" fill="rgb(33,69,160)"></path>
      
      <ellipse transform="translate(74.76,32.68) rotate(43.5)" ry="0.92" rx="1.09" cy="0" cx="0" fill-opacity="1.000" fill="rgb(204,198,247)"></ellipse>
      
      <ellipse transform="translate(89.11,35.20) rotate(-15.5)" ry="0.70" rx="0.92" cy="0" cx="0" fill-opacity="1.000" fill="rgb(108,155,236)"></ellipse>
      
      <path d="M 44.32 37.30 Q 43.57 37.18 44.14 36.33 A 0.71 0.64 -62.4 0 1 44.93 36.04 Q 45.56 36.27 45.13 36.92 A 0.85 0.79 -68.2 0 1 44.32 37.30 Z" fill-opacity="1.000" fill="rgb(150,180,241)"></path>
      
      <path d="M 167.58 38.01 Q 167.64 38.05 167.69 38.12 A 0.26 0.20 -48.0 0 1 167.67 38.37 Q 166.39 40.21 166.32 38.23 A 0.77 0.49 81.1 0 1 166.62 37.54 Q 166.89 37.44 167.15 37.73 Q 167.16 37.74 167.58 38.01 Z" fill-opacity="1.000" fill="rgb(250,225,233)"></path>
      
      <path d="M 290.25 38.50 Q 294.54 38.71 298.71 39.75 Q 294.30 39.78 288.00 41.00 Q 281.70 42.22 274.54 41.55 Q 272.11 41.32 269.51 41.83 Q 265.06 42.70 260.50 42.50 Q 249.08 45.00 237.44 46.06 Q 235.92 46.20 215.29 49.85 Q 213.36 50.19 210.71 49.95 Q 207.70 49.67 206.06 50.31 Q 203.53 51.30 200.83 51.67 Q 198.98 51.92 200.47 52.04 Q 200.69 52.06 200.49 52.15 Q 197.16 53.63 193.61 53.15 Q 192.54 53.00 191.92 53.25 Q 191.01 53.62 190.51 54.32 A 1.24 0.93 -69.4 0 1 189.76 54.80 Q 186.11 55.25 182.75 56.75 Q 172.44 58.74 161.96 58.55 Q 160.81 58.52 158.62 58.96 Q 156.93 59.29 155.19 59.06 Q 153.75 58.87 150.25 60.29 Q 149.46 59.59 149.00 60.54 Q 148.06 61.67 146.55 61.43 Q 146.02 61.34 145.60 61.49 L 140.04 63.41 A 0.72 0.64 83.2 0 0 139.60 64.05 Q 139.57 64.96 138.56 65.06 Q 136.51 65.88 134.35 66.26 Q 127.56 67.46 121.50 70.75 Q 120.21 71.45 119.49 71.66 Q 118.94 71.82 118.63 72.09 Q 116.54 73.90 113.74 74.27 Q 113.44 74.30 113.73 74.46 Q 114.26 74.73 113.22 75.18 Q 108.37 77.24 103.27 78.57 Q 99.31 79.60 95.25 79.04 L 94.56 77.29 A 0.51 0.46 69.5 0 0 93.97 76.98 Q 86.94 79.56 79.50 80.50 Q 76.15 81.88 72.12 80.64 Q 70.17 80.04 68.49 81.19 Q 68.07 81.49 66.87 81.47 Q 66.38 81.47 65.28 81.21 Q 62.97 80.66 60.61 81.65 Q 58.00 82.74 59.46 80.32 Q 60.48 78.62 64.63 77.93 Q 65.44 77.79 66.18 77.45 Q 73.46 74.09 80.31 74.08 Q 85.26 74.07 85.31 74.07 Q 91.16 73.71 96.94 72.69 Q 106.89 71.88 115.94 67.69 Q 119.71 65.61 123.61 63.77 Q 124.00 63.59 124.55 63.63 Q 125.91 63.73 126.79 62.75 Q 128.78 63.89 127.75 61.79 Q 132.09 61.13 134.98 57.94 A 1.43 1.29 -70.0 0 1 135.81 57.50 L 139.39 57.04 A 0.60 0.36 -3.6 0 0 139.91 56.68 L 139.95 56.28 A 1.03 0.36 -89.4 0 1 140.22 55.54 Q 141.78 54.40 139.68 54.32 A 0.61 0.59 85.7 0 1 139.12 53.82 Q 138.81 52.02 137.36 52.51 A 0.87 0.87 -7.9 0 1 136.22 51.65 Q 136.34 47.91 135.54 47.50 L 135.21 47.00 Q 136.28 45.85 137.14 44.54 Q 137.30 44.30 137.88 43.73 Q 138.30 43.32 138.18 42.88 A 0.62 0.43 72.2 0 1 138.39 42.21 Q 139.76 41.61 140.99 42.24 Q 142.53 43.02 142.61 43.05 Q 145.33 44.01 145.44 44.06 Q 148.71 45.83 151.56 42.93 A 1.20 1.19 50.0 0 1 153.39 43.09 Q 155.44 46.01 158.15 45.85 Q 161.37 45.65 161.39 45.65 Q 163.95 45.84 166.52 45.68 Q 167.83 45.59 170.44 45.94 Q 172.44 46.21 174.46 45.69 Q 174.86 45.59 174.49 45.34 L 174.14 45.10 Q 173.70 44.80 174.24 44.76 L 180.26 44.27 A 1.56 0.87 46.7 0 1 181.15 44.55 Q 182.48 45.41 184.05 44.73 A 1.24 0.90 -39.1 0 1 184.96 44.68 Q 186.72 45.42 184.99 46.05 A 0.73 0.23 -79.4 0 0 184.70 46.60 Q 184.64 46.86 184.06 46.92 A 0.43 0.43 71.4 0 0 183.74 47.57 Q 184.16 48.25 184.78 48.16 Q 185.65 48.04 185.75 48.05 Q 190.32 48.59 183.75 49.76 Q 182.05 50.06 183.79 50.69 Q 184.59 50.98 183.76 51.19 Q 182.32 51.54 183.24 51.91 Q 183.48 52.00 183.79 51.95 Q 198.26 49.19 212.75 46.50 Q 217.70 47.12 222.50 45.75 Q 230.53 45.62 238.25 43.50 Q 245.47 42.97 252.50 41.25 Q 256.95 41.22 261.31 40.31 Q 264.35 39.68 270.75 39.26 Q 272.78 39.13 280.25 39.05 Q 285.26 39.00 290.25 38.50 Z M 154.5000 51.8400 A 1.01 0.78 90.0 0 0 155.2800 50.8300 A 1.01 0.78 90.0 0 0 154.5000 49.8200 A 1.01 0.78 90.0 0 0 153.7200 50.8300 A 1.01 0.78 90.0 0 0 154.5000 51.8400 Z" fill-opacity="1.000" fill="rgb(42,79,178)"></path>
      
      <path d="M 298.71 39.75 L 298.75 41.46 Q 298.33 41.55 298.02 41.81 A 1.71 0.69 -50.5 0 1 297.19 42.26 Q 268.56 46.80 240.25 53.04 L 231.00 54.29 Q 226.47 53.48 222.00 54.50 Q 217.76 55.78 213.50 57.00 Q 203.60 58.59 193.81 60.81 Q 189.81 61.72 187.30 61.29 A 1.52 0.93 64.7 0 1 186.52 60.78 Q 185.47 59.55 185.52 63.06 A 1.61 1.60 -9.2 0 1 184.39 64.62 Q 178.07 66.60 172.01 69.61 Q 171.00 70.11 169.35 70.48 Q 167.95 70.80 166.66 71.42 Q 164.56 72.45 162.96 72.67 Q 159.88 73.09 157.81 73.81 Q 153.41 75.36 149.41 75.93 Q 142.16 76.96 142.16 76.96 Q 128.13 79.85 114.50 84.29 Q 111.07 84.88 112.45 84.17 Q 112.96 83.90 113.32 83.57 Q 115.41 81.71 118.22 81.12 Q 120.07 80.73 119.03 80.24 Q 118.66 80.07 119.06 79.96 Q 119.82 79.73 119.76 79.26 A 0.50 0.39 -16.2 0 0 119.10 79.00 Q 113.14 81.42 107.25 84.00 Q 101.33 85.44 95.30 86.25 Q 94.89 86.30 95.19 86.64 Q 95.76 87.25 93.99 87.06 Q 93.48 87.01 93.04 87.15 Q 91.15 87.78 89.29 88.50 L 89.25 88.29 L 90.19 86.50 A 0.63 0.54 34.7 0 0 90.01 85.80 Q 89.48 85.34 90.24 84.82 Q 90.43 84.68 90.22 84.59 L 90.00 84.50 Q 89.48 84.28 89.98 84.06 L 92.22 83.07 Q 92.59 82.91 92.25 82.73 Q 91.34 82.24 92.43 82.01 A 0.40 0.32 -21.2 0 0 92.74 81.48 Q 92.39 81.01 91.50 80.90 Q 90.66 80.80 91.43 80.50 L 94.49 79.32 A 0.67 0.42 39.2 0 1 94.99 79.38 Q 95.73 79.74 95.25 79.04 Q 99.31 79.60 103.27 78.57 Q 108.37 77.24 113.22 75.18 Q 114.26 74.73 113.73 74.46 Q 113.44 74.30 113.74 74.27 Q 116.54 73.90 118.63 72.09 Q 118.94 71.82 119.49 71.66 Q 120.21 71.45 121.50 70.75 Q 127.56 67.46 134.35 66.26 Q 136.51 65.88 138.56 65.06 Q 139.57 64.96 139.60 64.05 A 0.72 0.64 83.2 0 1 140.04 63.41 L 145.60 61.49 Q 146.02 61.34 146.55 61.43 Q 148.06 61.67 149.00 60.54 Q 150.31 62.53 150.25 60.29 Q 153.75 58.87 155.19 59.06 Q 156.93 59.29 158.62 58.96 Q 160.81 58.52 161.96 58.55 Q 172.44 58.74 182.75 56.75 Q 186.11 55.25 189.76 54.80 A 1.24 0.93 -69.4 0 0 190.51 54.32 Q 191.01 53.62 191.92 53.25 Q 192.54 53.00 193.61 53.15 Q 197.16 53.63 200.49 52.15 Q 200.69 52.06 200.47 52.04 Q 198.98 51.92 200.83 51.67 Q 203.53 51.30 206.06 50.31 Q 207.70 49.67 210.71 49.95 Q 213.36 50.19 215.29 49.85 Q 235.92 46.20 237.44 46.06 Q 249.08 45.00 260.50 42.50 Q 265.06 42.70 269.51 41.83 Q 272.11 41.32 274.54 41.55 Q 281.70 42.22 288.00 41.00 Q 294.30 39.78 298.71 39.75 Z" fill-opacity="1.000" fill="rgb(45,96,197)"></path>
      
      <path d="M 298.75 41.46 Q 298.88 41.51 299.00 41.56 Q 299.00 43.06 299.00 44.56 Q 292.20 45.30 285.75 47.54 L 282.73 46.38 A 0.78 0.56 -57.0 0 0 281.98 46.67 Q 281.41 47.38 280.47 47.16 Q 279.90 47.02 279.52 47.12 Q 274.61 48.34 269.75 49.75 Q 262.80 50.80 256.05 52.79 Q 252.70 53.78 251.00 56.71 Q 228.41 65.25 227.69 65.44 Q 221.41 67.06 215.50 69.75 Q 214.03 70.22 214.50 69.04 Q 221.60 65.07 229.50 63.00 Q 235.28 60.01 241.44 57.94 Q 243.75 57.16 247.95 54.82 Q 248.22 54.67 248.34 54.45 Q 248.69 53.81 247.75 53.99 Q 240.64 55.43 233.74 57.67 Q 232.75 57.99 230.93 59.25 Q 229.51 60.24 227.82 60.49 Q 224.15 61.05 224.12 61.06 Q 211.35 64.64 199.19 69.94 Q 192.03 71.67 187.81 74.56 Q 185.81 75.94 184.79 76.00 Q 184.86 75.64 184.69 75.42 Q 184.57 75.26 184.24 75.21 Q 181.25 74.81 178.83 76.28 Q 176.34 77.80 175.35 78.13 Q 165.12 81.54 158.25 84.75 Q 155.63 85.97 153.75 85.96 Q 153.76 85.29 154.43 85.15 Q 156.88 84.68 158.50 82.79 L 164.77 80.65 A 1.65 1.58 -80.0 0 0 165.53 80.09 Q 166.98 78.19 169.81 78.06 Q 172.00 77.96 174.65 77.06 Q 174.76 77.02 178.60 74.98 Q 180.91 73.75 184.40 73.27 Q 184.90 73.21 185.39 72.99 L 193.50 69.46 L 205.25 64.54 L 240.25 53.04 Q 268.56 46.80 297.19 42.26 A 1.71 0.69 -50.5 0 0 298.02 41.81 Q 298.33 41.55 298.75 41.46 Z" fill-opacity="1.000" fill="rgb(204,198,247)"></path>
      
      <path d="M 299.00 44.56 Q 299.00 53.19 299.00 61.81 Q 297.12 61.00 295.50 62.25 Q 293.68 63.65 292.31 62.69 Q 290.75 61.59 292.53 60.52 Q 293.17 60.13 293.50 59.53 Q 293.75 59.05 293.19 59.08 Q 288.67 59.35 287.25 63.75 A 2.21 2.07 8.1 0 1 285.19 65.19 Q 282.40 65.20 280.32 66.86 A 1.20 1.01 26.6 0 1 279.44 67.07 Q 278.21 66.89 277.26 67.76 Q 273.55 71.12 269.43 73.92 Q 269.05 74.18 264.28 77.88 Q 260.82 80.56 256.43 81.58 A 1.06 0.88 1.9 0 0 255.72 82.13 Q 254.98 83.85 256.76 84.38 A 1.61 0.90 -34.8 0 0 257.70 84.29 Q 258.79 83.88 259.78 84.42 A 0.35 0.35 21.5 0 0 260.29 84.20 Q 260.90 81.65 263.13 80.31 A 1.69 0.89 17.3 0 1 264.06 80.14 Q 265.17 80.21 265.89 79.40 Q 266.82 78.38 266.86 78.34 Q 268.14 77.21 269.31 75.96 Q 270.54 74.64 271.96 73.90 Q 279.44 70.01 282.06 68.06 Q 284.75 66.06 288.77 66.82 A 2.11 2.07 38.0 0 0 290.00 66.68 Q 294.80 64.53 299.00 63.31 Q 299.00 68.69 299.00 74.06 Q 297.04 73.66 295.05 73.78 A 0.52 0.46 88.3 0 0 294.61 74.31 Q 294.63 75.13 294.18 75.68 Q 293.76 76.22 292.62 76.35 Q 287.67 76.92 282.75 77.71 L 282.25 77.79 Q 281.14 77.82 281.56 76.81 Q 282.87 73.74 280.43 72.06 Q 279.50 71.41 279.56 72.55 Q 279.65 74.21 278.08 74.63 Q 277.05 74.90 276.16 75.47 A 0.68 0.65 48.6 0 1 275.38 75.40 Q 273.77 74.05 273.79 77.25 Q 272.17 78.66 270.05 79.00 A 1.18 1.10 11.2 0 0 269.28 79.48 Q 268.36 80.86 267.38 82.19 Q 266.22 83.76 266.35 85.00 Q 266.59 87.12 269.18 86.88 Q 269.84 86.82 270.20 86.94 Q 271.06 87.24 270.81 87.89 A 1.30 0.68 -12.6 0 1 270.10 88.49 Q 267.68 89.50 266.47 91.81 A 1.43 1.31 -85.0 0 1 265.79 92.43 Q 263.48 93.36 261.31 94.56 Q 259.37 95.31 257.91 94.03 A 0.76 0.76 30.7 0 1 257.70 93.21 L 259.55 87.99 Q 259.83 87.21 259.15 87.58 L 255.34 89.65 A 0.70 0.53 68.7 0 0 255.12 90.41 Q 255.67 92.15 254.01 93.53 Q 252.36 94.90 255.15 95.58 A 1.28 1.28 -75.7 0 1 256.08 97.15 Q 255.59 99.02 253.05 99.52 Q 251.79 99.77 251.69 101.00 Q 250.44 101.00 249.19 101.00 Q 250.76 97.22 249.11 93.60 Q 248.70 92.70 248.28 93.09 A 0.98 0.63 64.9 0 0 248.16 93.97 Q 249.42 97.98 246.44 101.00 Q 221.31 101.00 196.19 101.00 Q 196.19 99.88 196.04 98.75 Q 196.28 97.74 197.12 97.68 Q 198.27 97.60 198.36 97.58 Q 201.33 96.70 204.06 95.24 A 1.95 1.43 25.3 0 1 204.99 95.06 Q 206.63 95.17 206.93 93.75 Q 207.07 93.15 207.29 92.85 Q 208.54 91.15 210.15 89.82 Q 210.49 89.54 213.50 88.05 Q 215.28 87.18 216.43 85.43 Q 218.75 81.89 220.69 81.44 Q 224.88 80.45 227.53 77.17 Q 227.84 76.79 228.21 76.61 Q 228.62 76.41 229.04 76.25 Q 230.64 77.29 231.91 76.11 Q 232.32 75.73 232.74 75.61 Q 238.35 73.98 241.50 71.50 Q 244.30 69.29 247.25 70.46 Q 250.73 71.17 252.69 69.69 Q 256.43 66.86 259.45 66.27 A 1.18 1.13 9.6 0 0 260.20 65.76 Q 262.15 62.66 265.27 60.69 A 1.43 0.98 -89.3 0 0 265.79 59.95 Q 266.11 58.90 267.29 58.50 Q 268.34 57.96 269.52 58.00 A 1.08 1.06 -69.5 0 0 270.40 57.59 Q 273.14 54.23 276.44 53.19 Q 280.89 50.03 285.75 47.54 Q 292.20 45.30 299.00 44.56 Z M 279.80 56.39 Q 280.73 56.60 281.81 56.32 Q 282.61 56.12 283.47 55.31 Q 285.02 53.86 286.71 52.58 A 1.04 0.55 -29.1 0 0 287.16 51.89 Q 287.16 51.51 286.66 51.52 Q 286.36 51.53 286.03 51.79 Q 283.18 54.04 279.73 55.26 Q 277.79 55.94 279.80 56.39 Z M 278.18 56.82 Q 278.46 55.25 276.77 56.53 Q 274.94 57.93 273.46 59.20 Q 271.62 60.79 273.99 60.25 Q 276.42 59.70 277.79 57.74 Q 278.09 57.30 278.18 56.82 Z M 269.31 60.76 L 266.02 62.85 A 0.92 0.64 -23.8 0 0 265.58 63.57 Q 265.72 64.74 266.70 63.90 A 1.45 1.41 23.3 0 1 267.56 63.57 Q 269.86 63.45 271.65 61.07 A 0.73 0.73 38.0 0 0 271.52 60.05 Q 269.09 58.13 269.54 59.95 A 0.82 0.60 69.4 0 1 269.31 60.76 Z M 244.20 87.14 Q 241.79 88.11 239.64 89.51 A 1.33 1.32 -38.4 0 1 237.95 89.32 Q 236.81 88.15 235.72 87.87 A 0.37 0.36 -84.1 0 0 235.27 88.24 Q 235.47 92.44 238.53 91.43 A 1.38 1.21 43.7 0 1 239.44 91.47 Q 240.63 91.96 241.15 90.79 A 1.42 1.03 -83.5 0 1 241.77 90.11 Q 244.83 88.71 247.36 86.54 Q 248.94 85.18 250.46 84.43 Q 253.22 83.05 253.69 82.44 Q 254.45 81.43 253.71 81.32 Q 253.39 81.27 252.95 81.49 Q 250.12 82.94 247.73 85.00 Q 246.14 86.37 244.20 87.14 Z M 223.46 94.51 L 222.26 97.32 Q 222.00 97.93 222.65 97.63 L 229.00 94.67 A 1.28 1.25 -1.5 0 0 229.66 93.99 Q 230.16 92.73 228.81 92.76 A 1.75 1.01 -53.3 0 0 227.93 93.14 Q 226.14 94.55 223.96 94.28 A 0.50 0.40 13.5 0 0 223.46 94.51 Z M 216.44 98.80 Q 218.11 98.69 219.59 97.77 A 0.96 0.95 -13.9 0 0 220.05 97.01 Q 220.22 94.53 217.69 95.19 Q 215.16 95.85 215.79 98.33 A 0.63 0.63 -8.9 0 0 216.44 98.80 Z" fill-opacity="1.000" fill="rgb(180,153,226)"></path>
      
      <path d="M 31.21 45.75 Q 30.89 46.61 30.21 47.25 L 29.57 47.43 A 0.46 0.41 84.9 0 1 29.05 46.94 Q 29.16 45.29 31.21 45.75 Z" fill-opacity="1.000" fill="rgb(204,198,247)"></path>
      
      <path d="M 15.44 46.69 Q 17.78 47.27 19.19 48.91 Q 20.39 50.30 20.70 52.75 Q 21.39 58.24 18.42 62.93 Q 17.21 64.85 17.20 65.84 Q 17.20 67.53 18.75 68.55 Q 19.21 68.86 19.46 69.24 Q 20.52 70.92 21.72 72.51 Q 22.75 73.88 24.63 75.08 Q 27.51 76.91 29.97 79.27 Q 31.91 81.12 34.56 80.81 Q 45.90 75.67 57.80 72.05 Q 59.90 71.41 63.32 71.30 Q 67.55 71.16 70.94 69.69 Q 76.12 67.44 80.82 67.92 Q 86.01 68.45 91.09 67.66 Q 94.52 67.13 100.89 64.90 Q 110.16 61.65 111.50 60.75 Q 114.89 58.47 118.81 57.31 Q 121.06 55.82 122.85 53.82 A 0.88 0.83 27.2 0 1 123.68 53.58 Q 126.50 54.27 128.36 51.81 Q 128.62 51.47 128.88 50.57 Q 129.29 49.18 130.49 50.14 Q 131.35 50.84 131.84 50.85 Q 132.97 50.90 133.50 49.54 Q 134.87 48.88 135.54 47.50 Q 136.34 47.91 136.22 51.65 A 0.87 0.87 -7.9 0 0 137.36 52.51 Q 138.81 52.02 139.12 53.82 A 0.61 0.59 85.7 0 0 139.68 54.32 Q 141.78 54.40 140.22 55.54 A 1.03 0.36 -89.4 0 0 139.95 56.28 L 139.91 56.68 A 0.60 0.36 -3.6 0 1 139.39 57.04 L 135.81 57.50 A 1.43 1.29 -70.0 0 0 134.98 57.94 Q 132.09 61.13 127.75 61.79 Q 126.57 61.57 126.79 62.75 Q 125.91 63.73 124.55 63.63 Q 124.00 63.59 123.61 63.77 Q 119.71 65.61 115.94 67.69 Q 106.89 71.88 96.94 72.69 Q 91.16 73.71 85.31 74.07 Q 85.26 74.07 80.31 74.08 Q 73.46 74.09 66.18 77.45 Q 65.44 77.79 64.63 77.93 Q 60.48 78.62 59.46 80.32 Q 58.00 82.74 60.61 81.65 Q 62.97 80.66 65.28 81.21 Q 66.38 81.47 66.87 81.47 Q 68.07 81.49 68.49 81.19 Q 70.17 80.04 72.12 80.64 Q 76.15 81.88 79.50 80.50 Q 86.94 79.56 93.97 76.98 A 0.51 0.46 69.5 0 1 94.56 77.29 L 95.25 79.04 Q 95.73 79.74 94.99 79.38 A 0.67 0.42 39.2 0 0 94.49 79.32 L 91.43 80.50 Q 90.66 80.80 91.50 80.90 Q 92.39 81.01 92.74 81.48 A 0.40 0.32 -21.2 0 1 92.43 82.01 Q 91.34 82.24 92.25 82.73 Q 92.59 82.91 92.22 83.07 L 89.98 84.06 Q 89.48 84.28 90.00 84.50 L 90.22 84.59 Q 90.43 84.68 90.24 84.82 Q 89.48 85.34 90.01 85.80 A 0.63 0.54 34.7 0 1 90.19 86.50 L 89.25 88.29 Q 86.17 87.06 85.94 87.06 Q 80.62 87.07 75.51 88.55 Q 73.75 89.06 75.30 88.36 Q 76.35 87.89 75.72 87.78 Q 75.53 87.74 75.29 87.82 Q 65.60 91.00 65.50 91.00 Q 62.59 90.99 59.96 93.68 Q 58.81 94.85 57.33 95.54 Q 54.22 96.97 54.19 101.00 Q 31.44 101.00 8.69 101.00 Q 8.83 100.82 9.04 100.74 A 0.41 0.31 -21.6 0 0 9.31 100.30 Q 8.81 99.19 7.44 99.94 Q 6.27 100.58 7.44 101.00 Q 3.72 101.00 0.00 101.00 Q 0.00 85.97 0.00 70.94 Q 0.63 65.81 0.00 60.69 Q 0.00 54.81 0.00 48.94 Q 3.15 47.84 6.44 47.44 Q 10.71 45.52 15.44 46.69 Z M 16.32 51.75 Q 14.62 49.00 11.17 49.87 Q 8.29 50.58 6.49 52.66 Q 4.58 54.87 4.09 56.36 Q 3.47 58.23 4.10 61.06 A 2.19 2.18 -4.2 0 0 6.09 62.77 Q 8.60 62.94 11.29 63.14 Q 14.23 63.36 15.69 62.51 Q 17.87 61.25 18.42 58.50 A 1.57 1.11 43.3 0 0 18.23 57.57 Q 17.53 56.31 17.75 55.00 Q 18.04 53.31 16.98 52.46 Q 16.54 52.11 16.32 51.75 Z M 6.35 79.92 Q 6.34 80.44 6.83 80.42 A 1.16 0.83 -68.8 0 0 7.61 79.91 Q 8.48 78.66 6.90 79.25 A 0.84 0.68 -11.8 0 0 6.35 79.92 Z M 57.66 82.68 Q 57.64 84.32 58.66 83.36 A 1.02 0.98 -26.4 0 0 58.97 82.50 Q 58.83 81.44 58.08 81.89 A 0.98 0.83 77.9 0 0 57.66 82.68 Z M 14.4253 86.6949 A 1.71 0.51 59.6 0 0 13.9999 84.9619 A 1.71 0.51 59.6 0 0 12.6947 83.7451 A 1.71 0.51 59.6 0 0 13.1201 85.4781 A 1.71 0.51 59.6 0 0 14.4253 86.6949 Z" fill-opacity="1.000" fill="rgb(60,76,177)"></path>
      
      <path d="M 282.73 46.38 L 285.75 47.54 Q 280.89 50.03 276.44 53.19 Q 273.14 54.23 270.40 57.59 A 1.08 1.06 -69.5 0 1 269.52 58.00 Q 268.34 57.96 267.29 58.50 Q 266.84 56.76 265.44 58.19 Q 264.78 58.86 263.22 59.74 L 254.00 64.96 Q 255.89 61.63 255.54 57.55 A 0.57 0.56 -84.1 0 0 255.14 57.05 Q 253.16 56.41 251.00 56.71 Q 252.70 53.78 256.05 52.79 Q 262.80 50.80 269.75 49.75 Q 274.61 48.34 279.52 47.12 Q 279.90 47.02 280.47 47.16 Q 281.41 47.38 281.98 46.67 A 0.78 0.56 -57.0 0 1 282.73 46.38 Z M 262.95 55.16 Q 264.77 57.38 266.07 56.51 A 1.02 0.87 74.9 0 0 266.46 55.69 Q 266.40 53.43 263.18 54.42 A 0.47 0.46 -27.9 0 0 262.95 55.16 Z" fill-opacity="1.000" fill="rgb(198,182,229)"></path>
      
      <path d="M 134.00 46.71 Q 134.67 46.65 135.21 47.00 L 135.54 47.50 Q 134.87 48.88 133.50 49.54 Q 131.57 47.83 134.00 46.71 Z" fill-opacity="1.000" fill="rgb(250,225,233)"></path>
      
      <path d="M 16.98 52.46 Q 18.04 53.31 17.75 55.00 Q 17.53 56.31 18.23 57.57 A 1.57 1.11 43.3 0 1 18.42 58.50 Q 17.87 61.25 15.69 62.51 Q 14.23 63.36 11.29 63.14 Q 8.60 62.94 6.09 62.77 A 2.19 2.18 -4.2 0 1 4.10 61.06 Q 3.47 58.23 4.09 56.36 Q 4.58 54.87 6.49 52.66 Q 8.29 50.58 11.17 49.87 Q 14.62 49.00 16.32 51.75 Q 16.54 52.11 16.98 52.46 Z M 9.75 55.46 L 7.84 57.69 A 1.25 1.20 -53.4 0 0 8.07 59.53 Q 11.41 61.63 14.06 59.51 A 0.99 0.97 -21.0 0 0 14.44 58.68 Q 14.37 57.33 13.50 56.21 Q 11.92 49.12 9.75 55.46 Z" fill-opacity="1.000" fill="rgb(84,72,162)"></path>
      
      <ellipse transform="translate(154.50,50.83) rotate(90.0)" ry="0.78" rx="1.01" cy="0" cx="0" fill-opacity="1.000" fill="rgb(250,225,233)"></ellipse>
      
      <path d="M 286.66 51.52 Q 287.16 51.51 287.16 51.89 A 1.04 0.55 -29.1 0 1 286.71 52.58 Q 285.02 53.86 283.47 55.31 Q 282.61 56.12 281.81 56.32 Q 280.73 56.60 279.80 56.39 Q 277.79 55.94 279.73 55.26 Q 283.18 54.04 286.03 51.79 Q 286.36 51.53 286.66 51.52 Z" fill-opacity="1.000" fill="rgb(198,182,229)"></path>
      
      <path d="M 13.50 56.21 Q 11.57 56.23 9.75 55.46 Q 11.92 49.12 13.50 56.21 Z" fill-opacity="1.000" fill="rgb(167,111,213)"></path><path d="M 240.25 53.04 L 205.25 64.54 Q 199.33 64.63 194.46 68.00 Q 189.74 69.17 184.93 69.87 Q 181.94 70.30 179.35 71.56 Q 175.59 73.37 173.44 74.19 Q 170.18 75.42 166.06 76.01 Q 163.09 76.43 160.80 77.52 Q 153.08 81.24 145.25 84.75 Q 138.33 87.15 131.47 89.70 Q 126.74 91.46 121.21 94.36 Q 115.31 97.46 111.06 99.31 Q 109.83 99.85 109.94 101.00 Q 100.81 101.00 91.69 101.00 Q 91.40 99.94 91.79 98.95 A 0.96 0.77 2.4 0 1 92.50 98.43 Q 93.61 98.24 92.98 97.96 Q 92.76 97.86 92.12 97.89 Q 91.11 97.94 90.45 96.74 A 0.33 0.33 -13.6 0 1 90.75 96.25 Q 91.74 96.26 91.25 95.79 Q 95.56 93.83 100.25 94.00 Q 106.29 92.25 111.44 88.69 Q 113.72 88.00 115.75 86.79 Q 122.09 84.91 131.50 83.00 Q 143.85 80.49 157.21 75.71 Q 157.30 75.68 159.71 74.62 Q 161.50 73.83 163.50 73.75 Q 175.64 69.77 187.41 64.82 Q 188.52 64.35 190.19 64.22 Q 191.67 64.11 193.04 63.64 Q 195.72 62.71 197.13 62.55 Q 201.92 62.01 206.51 60.53 Q 211.24 59.00 216.15 58.78 Q 218.99 58.65 221.17 57.82 Q 226.05 55.97 231.00 54.29 L 240.25 53.04 Z" fill-opacity="1.000" fill="rgb(72,126,221)"></path>
      
      <path d="M 231.00 54.29 Q 226.05 55.97 221.17 57.82 Q 218.99 58.65 216.15 58.78 Q 211.24 59.00 206.51 60.53 Q 201.92 62.01 197.13 62.55 Q 195.72 62.71 193.04 63.64 Q 191.67 64.11 190.19 64.22 Q 188.52 64.35 187.41 64.82 Q 175.64 69.77 163.50 73.75 Q 161.50 73.83 159.71 74.62 Q 157.30 75.68 157.21 75.71 Q 143.85 80.49 131.50 83.00 Q 122.09 84.91 115.75 86.79 L 111.55 87.34 Q 111.17 87.39 111.51 87.21 Q 114.43 85.67 110.05 86.81 Q 109.56 86.94 110.01 86.70 L 114.50 84.29 Q 128.13 79.85 142.16 76.96 Q 142.16 76.96 149.41 75.93 Q 153.41 75.36 157.81 73.81 Q 159.88 73.09 162.96 72.67 Q 164.56 72.45 166.66 71.42 Q 167.95 70.80 169.35 70.48 Q 171.00 70.11 172.01 69.61 Q 178.07 66.60 184.39 64.62 A 1.61 1.60 -9.2 0 0 185.52 63.06 Q 185.47 59.55 186.52 60.78 A 1.52 0.93 64.7 0 0 187.30 61.29 Q 189.81 61.72 193.81 60.81 Q 203.60 58.59 213.50 57.00 Q 217.76 55.78 222.00 54.50 Q 226.47 53.48 231.00 54.29 Z" fill-opacity="1.000" fill="rgb(54,112,211)"></path>
      
      <path d="M 247.75 53.99 Q 248.69 53.81 248.34 54.45 Q 248.22 54.67 247.95 54.82 Q 243.75 57.16 241.44 57.94 Q 235.28 60.01 229.50 63.00 Q 221.60 65.07 214.50 69.04 Q 212.50 68.79 210.75 69.75 Q 198.02 73.97 185.41 78.51 Q 184.57 78.81 184.05 78.81 Q 182.40 78.79 184.00 76.79 Q 184.50 76.50 184.79 76.00 Q 185.81 75.94 187.81 74.56 Q 192.03 71.67 199.19 69.94 Q 211.35 64.64 224.12 61.06 Q 224.15 61.05 227.82 60.49 Q 229.51 60.24 230.93 59.25 Q 232.75 57.99 233.74 57.67 Q 240.64 55.43 247.75 53.99 Z" fill-opacity="1.000" fill="rgb(190,184,231)"></path>
      
      <path d="M 266.07 56.51 Q 264.77 57.38 262.95 55.16 A 0.47 0.46 -27.9 0 1 263.18 54.42 Q 266.40 53.43 266.46 55.69 A 1.02 0.87 74.9 0 1 266.07 56.51 Z" fill-opacity="1.000" fill="rgb(198,182,229)"></path>
      
      <path d="M 9.75 55.46 Q 11.57 56.23 13.50 56.21 Q 14.37 57.33 14.44 58.68 A 0.99 0.97 -21.0 0 1 14.06 59.51 Q 11.41 61.63 8.07 59.53 A 1.25 1.20 -53.4 0 1 7.84 57.69 L 9.75 55.46 Z" fill-opacity="1.000" fill="rgb(247,190,219)"></path>
      
      <path d="M 277.79 57.74 Q 276.42 59.70 273.99 60.25 Q 271.62 60.79 273.46 59.20 Q 274.94 57.93 276.77 56.53 Q 278.46 55.25 278.18 56.82 Q 278.09 57.30 277.79 57.74 Z" fill-opacity="1.000" fill="rgb(198,182,229)"></path>
      
      <path d="M 255.14 57.05 A 0.57 0.56 -84.1 0 1 255.54 57.55 Q 255.89 61.63 254.00 64.96 L 247.75 69.54 L 246.56 69.48 A 0.65 0.50 84.8 0 1 246.07 68.95 Q 245.96 68.30 245.05 68.64 Q 242.21 69.70 238.00 70.95 A 1.31 1.31 -9.4 0 1 236.31 69.74 Q 236.25 68.32 235.40 67.08 Q 234.40 65.62 234.09 66.76 A 1.09 0.89 -60.6 0 0 234.25 67.68 L 235.43 69.11 A 1.48 0.34 45.7 0 1 235.92 69.92 Q 236.27 72.17 233.81 73.06 Q 231.39 73.94 229.04 76.25 Q 228.62 76.41 228.21 76.61 Q 227.84 76.79 227.53 77.17 Q 224.88 80.45 220.69 81.44 Q 218.75 81.89 216.43 85.43 Q 215.28 87.18 213.50 88.05 Q 210.49 89.54 210.15 89.82 Q 208.54 91.15 207.29 92.85 Q 207.07 93.15 206.93 93.75 Q 206.63 95.17 204.99 95.06 A 1.95 1.43 25.3 0 0 204.06 95.24 Q 201.33 96.70 198.36 97.58 Q 198.27 97.60 197.12 97.68 Q 196.28 97.74 196.04 98.75 Q 194.86 95.56 197.09 96.97 A 1.27 1.07 51.3 0 0 198.00 97.15 Q 200.62 96.57 202.21 94.42 A 1.40 1.01 66.4 0 0 202.41 93.50 Q 202.21 91.71 203.94 91.19 Q 205.90 89.49 206.21 87.00 Q 208.54 85.05 211.32 83.84 Q 211.72 83.67 211.93 83.36 Q 212.71 82.20 210.99 82.70 Q 209.51 83.14 208.00 82.86 A 1.26 1.25 33.1 0 0 207.08 83.05 Q 204.95 84.45 202.47 83.67 Q 202.00 83.52 202.50 83.49 Q 205.02 83.38 204.38 81.52 A 0.81 0.75 -6.4 0 0 203.69 81.01 Q 201.08 80.82 198.71 82.00 Q 197.51 81.29 195.69 81.44 Q 191.79 81.76 186.82 83.06 Q 186.29 83.20 185.75 83.11 Q 180.33 82.29 178.56 86.31 Q 177.37 89.05 175.31 87.18 A 0.88 0.86 -40.1 0 0 174.25 87.10 L 170.18 89.74 A 0.90 0.60 -38.4 0 1 169.28 89.81 Q 168.96 89.56 169.30 89.03 Q 169.82 88.21 169.31 88.07 A 1.25 0.37 -34.5 0 0 168.42 88.36 L 167.25 89.04 L 165.13 90.21 A 1.39 0.95 29.2 0 1 164.22 90.29 Q 162.68 89.93 161.86 91.34 A 0.55 0.43 -65.3 0 1 161.30 91.63 L 160.94 91.50 A 1.52 0.82 31.5 0 0 160.04 91.45 L 150.48 94.86 A 1.28 0.78 39.7 0 1 149.58 94.73 Q 148.42 94.12 147.69 95.44 Q 147.14 96.42 146.35 96.08 A 0.95 0.89 -82.0 0 1 145.82 95.33 Q 145.67 94.02 147.52 93.30 Q 148.00 93.11 148.44 92.85 Q 154.03 89.45 159.18 87.41 Q 166.48 84.53 173.69 81.44 Q 182.43 77.69 184.00 76.79 Q 182.40 78.79 184.05 78.81 Q 184.57 78.81 185.41 78.51 Q 198.02 73.97 210.75 69.75 Q 212.50 68.79 214.50 69.04 Q 214.03 70.22 215.50 69.75 Q 221.41 67.06 227.69 65.44 Q 228.41 65.25 251.00 56.71 Q 253.16 56.41 255.14 57.05 Z" fill-opacity="1.000" fill="rgb(198,182,229)"></path>
      
      <path d="M 267.29 58.50 Q 266.11 58.90 265.79 59.95 A 1.43 0.98 -89.3 0 1 265.27 60.69 Q 262.15 62.66 260.20 65.76 A 1.18 1.13 9.6 0 1 259.45 66.27 Q 256.43 66.86 252.69 69.69 Q 250.73 71.17 247.25 70.46 Q 247.33 69.92 247.75 69.54 L 254.00 64.96 L 263.22 59.74 Q 264.78 58.86 265.44 58.19 Q 266.84 56.76 267.29 58.50 Z" fill-opacity="1.000" fill="rgb(228,204,232)"></path>
      
      <path d="M 271.52 60.05 A 0.73 0.73 38.0 0 1 271.65 61.07 Q 269.86 63.45 267.56 63.57 A 1.45 1.41 23.3 0 0 266.70 63.90 Q 265.72 64.74 265.58 63.57 A 0.92 0.64 -23.8 0 1 266.02 62.85 L 269.31 60.76 A 0.82 0.60 69.4 0 0 269.54 59.95 Q 269.09 58.13 271.52 60.05 Z" fill-opacity="1.000" fill="rgb(198,182,229)"></path>
      
      <path d="M 293.50 59.53 Q 293.17 60.13 292.53 60.52 Q 290.75 61.59 292.31 62.69 Q 293.68 63.65 295.50 62.25 Q 297.12 61.00 299.00 61.81 Q 299.00 62.56 299.00 63.31 Q 294.80 64.53 290.00 66.68 A 2.11 2.07 38.0 0 1 288.77 66.82 Q 284.75 66.06 282.06 68.06 Q 279.44 70.01 271.96 73.90 Q 270.54 74.64 269.31 75.96 Q 268.14 77.21 266.86 78.34 Q 266.82 78.38 265.89 79.40 Q 265.17 80.21 264.06 80.14 A 1.69 0.89 17.3 0 0 263.13 80.31 Q 260.90 81.65 260.29 84.20 A 0.35 0.35 21.5 0 1 259.78 84.42 Q 258.79 83.88 257.70 84.29 A 1.61 0.90 -34.8 0 1 256.76 84.38 Q 254.98 83.85 255.72 82.13 A 1.06 0.88 1.9 0 1 256.43 81.58 Q 260.82 80.56 264.28 77.88 Q 269.05 74.18 269.43 73.92 Q 273.55 71.12 277.26 67.76 Q 278.21 66.89 279.44 67.07 A 1.20 1.01 26.6 0 0 280.32 66.86 Q 282.40 65.20 285.19 65.19 A 2.21 2.07 8.1 0 0 287.25 63.75 Q 288.67 59.35 293.19 59.08 Q 293.75 59.05 293.50 59.53 Z" fill-opacity="1.000" fill="rgb(193,167,228)"></path>
      
      <path d="M 150.25 60.29 Q 150.31 62.53 149.00 60.54 Q 149.46 59.59 150.25 60.29 Z" fill-opacity="1.000" fill="rgb(150,180,241)"></path>
      
      <path d="M 0.00 60.69 Q 0.63 65.81 0.00 70.94 Q 0.00 65.81 0.00 60.69 Z" fill-opacity="1.000" fill="rgb(31,53,127)"></path>
      
      <path d="M 127.75 61.79 Q 128.78 63.89 126.79 62.75 Q 126.57 61.57 127.75 61.79 Z" fill-opacity="1.000" fill="rgb(225,215,245)"></path>
      
      <path d="M 205.25 64.54 L 193.50 69.46 Q 193.77 68.61 194.46 68.00 Q 199.33 64.63 205.25 64.54 Z" fill-opacity="1.000" fill="rgb(150,180,241)"></path>
      
      <path d="M 235.40 67.08 Q 236.25 68.32 236.31 69.74 A 1.31 1.31 -9.4 0 0 238.00 70.95 Q 242.21 69.70 245.05 68.64 Q 245.96 68.30 246.07 68.95 A 0.65 0.50 84.8 0 0 246.56 69.48 L 247.75 69.54 Q 247.33 69.92 247.25 70.46 Q 244.30 69.29 241.50 71.50 Q 238.35 73.98 232.74 75.61 Q 232.32 75.73 231.91 76.11 Q 230.64 77.29 229.04 76.25 Q 231.39 73.94 233.81 73.06 Q 236.27 72.17 235.92 69.92 A 1.48 0.34 45.7 0 0 235.43 69.11 L 234.25 67.68 A 1.09 0.89 -60.6 0 1 234.09 66.76 Q 234.40 65.62 235.40 67.08 Z" fill-opacity="1.000" fill="rgb(198,182,229)"></path>
      
      <path d="M 194.46 68.00 Q 193.77 68.61 193.50 69.46 L 185.39 72.99 Q 184.90 73.21 184.40 73.27 Q 180.91 73.75 178.60 74.98 Q 174.76 77.02 174.65 77.06 Q 172.00 77.96 169.81 78.06 Q 166.98 78.19 165.53 80.09 A 1.65 1.58 -80.0 0 1 164.77 80.65 L 158.50 82.79 Q 155.18 83.24 152.44 85.19 Q 150.05 85.87 147.35 87.83 A 1.96 1.91 23.9 0 1 146.41 88.18 Q 140.25 88.68 135.94 91.69 Q 132.81 93.87 124.00 98.25 Q 123.77 98.36 122.04 99.75 Q 121.22 100.12 121.19 101.00 Q 115.56 101.00 109.94 101.00 Q 109.83 99.85 111.06 99.31 Q 115.31 97.46 121.21 94.36 Q 126.74 91.46 131.47 89.70 Q 138.33 87.15 145.25 84.75 Q 153.08 81.24 160.80 77.52 Q 163.09 76.43 166.06 76.01 Q 170.18 75.42 173.44 74.19 Q 175.59 73.37 179.35 71.56 Q 181.94 70.30 184.93 69.87 Q 189.74 69.17 194.46 68.00 Z" fill-opacity="1.000" fill="rgb(108,155,236)"></path>
      
      <path d="M 280.43 72.06 Q 282.87 73.74 281.56 76.81 Q 281.14 77.82 282.25 77.79 Q 279.71 78.48 279.31 78.81 Q 277.75 80.11 276.01 79.40 A 0.80 0.64 -82.2 0 1 275.59 78.70 Q 275.55 77.10 273.79 77.25 Q 273.77 74.05 275.38 75.40 A 0.68 0.65 48.6 0 0 276.16 75.47 Q 277.05 74.90 278.08 74.63 Q 279.65 74.21 279.56 72.55 Q 279.50 71.41 280.43 72.06 Z" fill-opacity="1.000" fill="rgb(222,157,216)"></path>
      
      <path d="M 299.00 74.06 Q 299.00 77.44 299.00 80.81 Q 297.53 81.26 295.99 81.44 Q 293.71 81.72 294.12 83.76 A 0.95 0.82 64.6 0 1 293.89 84.60 Q 289.46 88.75 283.00 87.00 Q 282.20 86.78 282.00 86.30 A 1.14 0.14 68.2 0 0 281.55 85.48 Q 280.89 85.07 280.04 85.50 Q 275.56 83.82 274.87 87.76 Q 274.59 89.39 274.19 90.65 Q 273.73 92.11 273.73 93.66 Q 273.73 94.38 274.05 94.74 Q 274.48 95.23 275.21 95.25 Q 273.99 97.08 271.75 97.71 L 268.15 98.75 A 0.91 0.68 -89.4 0 0 267.62 99.44 Q 267.48 100.25 267.19 101.00 Q 262.44 101.00 257.69 101.00 Q 258.17 98.66 260.19 98.86 A 1.74 1.40 28.0 0 0 261.13 98.68 Q 263.83 97.18 266.94 96.96 A 1.48 1.47 -67.0 0 0 267.82 96.60 L 271.12 93.82 A 0.41 0.36 43.8 0 0 271.07 93.23 Q 270.44 92.72 270.75 92.00 Q 271.60 90.06 273.28 88.61 Q 274.64 87.44 273.83 85.84 Q 272.75 83.73 274.47 83.34 Q 274.61 83.31 276.52 83.39 Q 278.66 83.48 279.94 81.69 Q 280.63 80.73 282.96 79.44 Q 283.52 79.14 283.78 78.76 Q 284.59 77.56 282.75 77.71 Q 287.67 76.92 292.62 76.35 Q 293.76 76.22 294.18 75.68 Q 294.63 75.13 294.61 74.31 A 0.52 0.46 88.3 0 1 295.05 73.78 Q 297.04 73.66 299.00 74.06 Z M 286.41 83.22 Q 285.37 84.87 287.30 84.60 Q 289.36 84.32 290.89 83.36 Q 292.58 82.30 291.62 81.32 Q 291.05 80.74 290.09 80.85 Q 287.75 81.12 286.41 83.22 Z" fill-opacity="1.000" fill="rgb(222,157,216)"></path>
      
      <path d="M 184.69 75.42 Q 184.86 75.64 184.79 76.00 Q 184.50 76.50 184.00 76.79 Q 182.43 77.69 173.69 81.44 Q 166.48 84.53 159.18 87.41 Q 154.03 89.45 148.44 92.85 Q 148.00 93.11 147.52 93.30 Q 145.67 94.02 145.82 95.33 A 0.95 0.89 -82.0 0 0 146.35 96.08 Q 147.14 96.42 147.69 95.44 Q 148.42 94.12 149.58 94.73 A 1.28 0.78 39.7 0 0 150.48 94.86 L 160.04 91.45 A 1.52 0.82 31.5 0 1 160.94 91.50 L 161.30 91.63 A 0.55 0.43 -65.3 0 0 161.86 91.34 Q 162.68 89.93 164.22 90.29 A 1.39 0.95 29.2 0 0 165.13 90.21 L 167.25 89.04 Q 167.35 90.10 168.07 90.86 A 0.34 0.34 53.9 0 1 167.99 91.40 Q 166.09 92.41 167.50 94.04 Q 166.99 95.26 165.92 95.99 A 1.07 0.80 -22.1 0 0 165.46 96.75 L 165.46 98.24 A 1.12 1.01 -22.8 0 1 165.09 99.03 Q 164.25 99.77 164.94 101.00 Q 163.31 101.00 161.69 101.00 Q 163.21 98.99 163.46 96.50 L 164.48 94.17 A 1.19 0.63 -56.2 0 0 164.57 93.29 Q 163.89 91.87 162.57 92.87 A 1.82 1.45 -59.6 0 1 161.69 93.21 Q 155.33 93.57 150.79 98.08 Q 150.49 98.38 149.96 98.56 Q 148.37 99.09 149.19 101.00 Q 135.19 101.00 121.19 101.00 Q 121.22 100.12 122.04 99.75 L 129.07 98.94 A 1.21 0.73 -68.9 0 0 129.79 98.38 Q 130.61 97.05 132.25 96.99 A 1.21 1.07 17.2 0 0 133.07 96.62 Q 135.71 93.63 139.75 93.00 Q 143.66 91.08 147.69 89.44 Q 149.42 88.73 149.88 87.48 A 0.63 0.61 -78.1 0 1 150.50 87.06 Q 152.35 87.17 153.75 85.96 Q 155.63 85.97 158.25 84.75 Q 165.12 81.54 175.35 78.13 Q 176.34 77.80 178.83 76.28 Q 181.25 74.81 184.24 75.21 Q 184.57 75.26 184.69 75.42 Z" fill-opacity="1.000" fill="rgb(225,215,245)"></path>
      
      <path d="M 273.79 77.25 Q 275.55 77.10 275.59 78.70 A 0.80 0.64 -82.2 0 0 276.01 79.40 Q 277.75 80.11 279.31 78.81 Q 279.71 78.48 282.25 77.79 L 282.75 77.71 Q 284.59 77.56 283.78 78.76 Q 283.52 79.14 282.96 79.44 Q 280.63 80.73 279.94 81.69 Q 278.66 83.48 276.52 83.39 Q 274.61 83.31 274.47 83.34 Q 272.75 83.73 273.83 85.84 Q 274.64 87.44 273.28 88.61 Q 271.60 90.06 270.75 92.00 Q 270.44 92.72 271.07 93.23 A 0.41 0.36 43.8 0 1 271.12 93.82 L 267.82 96.60 A 1.48 1.47 -67.0 0 1 266.94 96.96 Q 263.83 97.18 261.13 98.68 A 1.74 1.40 28.0 0 1 260.19 98.86 Q 258.17 98.66 257.69 101.00 Q 254.69 101.00 251.69 101.00 Q 251.79 99.77 253.05 99.52 Q 255.59 99.02 256.08 97.15 A 1.28 1.28 -75.7 0 0 255.15 95.58 Q 252.36 94.90 254.01 93.53 Q 255.67 92.15 255.12 90.41 A 0.70 0.53 68.7 0 1 255.34 89.65 L 259.15 87.58 Q 259.83 87.21 259.55 87.99 L 257.70 93.21 A 0.76 0.76 30.7 0 0 257.91 94.03 Q 259.37 95.31 261.31 94.56 Q 263.48 93.36 265.79 92.43 A 1.43 1.31 -85.0 0 0 266.47 91.81 Q 267.68 89.50 270.10 88.49 A 1.30 0.68 -12.6 0 0 270.81 87.89 Q 271.06 87.24 270.20 86.94 Q 269.84 86.82 269.18 86.88 Q 266.59 87.12 266.35 85.00 Q 266.22 83.76 267.38 82.19 Q 268.36 80.86 269.28 79.48 A 1.18 1.10 11.2 0 1 270.05 79.00 Q 272.17 78.66 273.79 77.25 Z" fill-opacity="1.000" fill="rgb(247,190,219)"></path>
      
      <path d="M 119.76 79.26 Q 119.82 79.73 119.06 79.96 Q 118.66 80.07 119.03 80.24 Q 120.07 80.73 118.22 81.12 Q 115.41 81.71 113.32 83.57 Q 112.96 83.90 112.45 84.17 Q 111.07 84.88 114.50 84.29 L 110.01 86.70 Q 109.56 86.94 110.05 86.81 Q 114.43 85.67 111.51 87.21 Q 111.17 87.39 111.55 87.34 L 115.75 86.79 Q 113.72 88.00 111.44 88.69 Q 106.29 92.25 100.25 94.00 Q 95.56 93.83 91.25 95.79 L 90.71 95.23 A 1.30 0.58 54.2 0 0 89.94 94.78 L 82.50 94.46 L 87.48 92.41 A 1.19 1.13 -2.4 0 0 88.13 91.74 L 89.29 88.50 Q 91.15 87.78 93.04 87.15 Q 93.48 87.01 93.99 87.06 Q 95.76 87.25 95.19 86.64 Q 94.89 86.30 95.30 86.25 Q 101.33 85.44 107.25 84.00 Q 113.14 81.42 119.10 79.00 A 0.50 0.39 -16.2 0 1 119.76 79.26 Z" fill-opacity="1.000" fill="rgb(63,102,208)"></path>
      
      <path d="M 6.83 80.42 Q 6.34 80.44 6.35 79.92 A 0.84 0.68 -11.8 0 1 6.90 79.25 Q 8.48 78.66 7.61 79.91 A 1.16 0.83 -68.8 0 1 6.83 80.42 Z" fill-opacity="1.000" fill="rgb(108,155,236)"></path><path d="M 291.62 81.32 Q 292.58 82.30 290.89 83.36 Q 289.36 84.32 287.30 84.60 Q 285.37 84.87 286.41 83.22 Q 287.75 81.12 290.09 80.85 Q 291.05 80.74 291.62 81.32 Z" fill-opacity="1.000" fill="rgb(188,128,217)"></path>
      
      <path d="M 299.00 80.81 Q 299.00 84.19 299.00 87.56 Q 297.08 87.91 295.75 89.11 Q 293.52 91.12 293.51 91.13 Q 292.12 92.19 290.90 93.45 A 1.82 1.37 79.2 0 0 290.48 94.31 Q 289.91 97.36 287.19 98.93 Q 284.84 100.28 284.39 98.35 A 1.17 1.16 69.4 0 1 284.97 97.06 Q 287.31 95.79 286.23 95.37 Q 285.72 95.17 285.40 94.88 Q 284.21 93.79 282.69 94.69 Q 280.54 97.28 277.31 98.08 A 2.05 1.45 38.2 0 1 276.33 98.03 Q 274.09 97.35 271.75 97.71 Q 273.99 97.08 275.21 95.25 Q 276.14 92.25 279.00 91.25 Q 282.37 90.07 279.94 88.56 Q 277.67 87.16 280.04 85.50 Q 280.89 85.07 281.55 85.48 A 1.14 0.14 68.2 0 1 282.00 86.30 Q 282.20 86.78 283.00 87.00 Q 289.46 88.75 293.89 84.60 A 0.95 0.82 64.6 0 0 294.12 83.76 Q 293.71 81.72 295.99 81.44 Q 297.53 81.26 299.00 80.81 Z" fill-opacity="1.000" fill="rgb(188,128,217)"></path>
      
      <path d="M 204.38 81.52 Q 205.02 83.38 202.50 83.49 Q 202.00 83.52 202.47 83.67 Q 204.95 84.45 207.08 83.05 A 1.26 1.25 33.1 0 1 208.00 82.86 Q 209.51 83.14 210.99 82.70 Q 212.71 82.20 211.93 83.36 Q 211.72 83.67 211.32 83.84 Q 208.54 85.05 206.21 87.00 L 197.35 92.15 Q 196.86 92.43 196.43 92.46 Q 193.46 92.68 191.11 94.28 Q 188.57 96.02 187.41 96.51 Q 184.80 97.60 182.26 98.84 A 0.67 0.58 72.1 0 0 181.96 99.54 Q 182.12 100.30 181.69 101.00 Q 175.44 101.00 169.19 101.00 Q 169.33 100.09 170.04 99.50 L 173.45 100.09 A 1.68 1.44 34.0 0 0 174.39 99.98 Q 180.96 97.00 186.48 92.35 Q 186.53 92.30 187.21 91.89 Q 187.90 91.47 187.79 90.50 Q 189.00 88.03 192.31 87.31 Q 193.80 86.99 193.81 88.00 A 0.88 0.51 -85.6 0 0 194.17 88.76 Q 195.06 89.09 195.73 87.44 Q 196.00 86.78 196.70 86.23 L 199.33 84.17 A 0.40 0.34 41.0 0 0 199.24 83.58 Q 198.36 83.01 198.71 82.00 Q 201.08 80.82 203.69 81.01 A 0.81 0.75 -6.4 0 1 204.38 81.52 Z M 202.55 86.31 Q 203.57 86.32 204.36 85.80 A 0.37 0.36 -45.9 0 0 204.36 85.19 Q 203.41 84.62 202.28 85.57 Q 201.41 86.31 202.55 86.31 Z" fill-opacity="1.000" fill="rgb(250,225,233)"></path>
      
      <path d="M 198.71 82.00 Q 198.36 83.01 199.24 83.58 A 0.40 0.34 41.0 0 1 199.33 84.17 L 196.70 86.23 Q 196.00 86.78 195.73 87.44 Q 195.06 89.09 194.17 88.76 A 0.88 0.51 -85.6 0 1 193.81 88.00 Q 193.80 86.99 192.31 87.31 Q 189.00 88.03 187.79 90.50 Q 187.12 89.30 186.22 89.77 Q 185.72 90.04 185.31 90.08 L 181.74 90.42 A 0.84 0.68 -81.4 0 0 181.11 90.99 Q 180.11 94.15 176.75 95.04 Q 176.32 95.10 175.99 94.97 A 0.51 0.46 -61.8 0 1 175.81 94.25 Q 176.66 92.89 178.26 92.57 A 0.84 0.57 -5.4 0 0 178.92 92.02 L 179.05 90.74 A 1.38 0.75 83.7 0 1 179.38 89.94 Q 180.34 89.05 178.75 89.00 Q 175.80 88.91 172.03 90.63 Q 171.10 91.05 169.82 92.33 Q 168.81 93.35 167.50 94.04 Q 166.09 92.41 167.99 91.40 A 0.34 0.34 53.9 0 0 168.07 90.86 Q 167.35 90.10 167.25 89.04 L 168.42 88.36 A 1.25 0.37 -34.5 0 1 169.31 88.07 Q 169.82 88.21 169.30 89.03 Q 168.96 89.56 169.28 89.81 A 0.90 0.60 -38.4 0 0 170.18 89.74 L 174.25 87.10 A 0.88 0.86 -40.1 0 1 175.31 87.18 Q 177.37 89.05 178.56 86.31 Q 180.33 82.29 185.75 83.11 Q 186.29 83.20 186.82 83.06 Q 191.79 81.76 195.69 81.44 Q 197.51 81.29 198.71 82.00 Z" fill-opacity="1.000" fill="rgb(228,204,232)"></path>
      
      <path d="M 253.71 81.32 Q 254.45 81.43 253.69 82.44 Q 253.22 83.05 250.46 84.43 Q 248.94 85.18 247.36 86.54 Q 244.83 88.71 241.77 90.11 A 1.42 1.03 -83.5 0 0 241.15 90.79 Q 240.63 91.96 239.44 91.47 A 1.38 1.21 43.7 0 0 238.53 91.43 Q 235.47 92.44 235.27 88.24 A 0.37 0.36 -84.1 0 1 235.72 87.87 Q 236.81 88.15 237.95 89.32 A 1.33 1.32 -38.4 0 0 239.64 89.51 Q 241.79 88.11 244.20 87.14 Q 246.14 86.37 247.73 85.00 Q 250.12 82.94 252.95 81.49 Q 253.39 81.27 253.71 81.32 Z" fill-opacity="1.000" fill="rgb(193,167,228)"></path>
      
      <path d="M 58.66 83.36 Q 57.64 84.32 57.66 82.68 A 0.98 0.83 77.9 0 1 58.08 81.89 Q 58.83 81.44 58.97 82.50 A 1.02 0.98 -26.4 0 1 58.66 83.36 Z" fill-opacity="1.000" fill="rgb(225,215,245)"></path>
      
      <path d="M 158.50 82.79 Q 156.88 84.68 154.43 85.15 Q 153.76 85.29 153.75 85.96 Q 152.35 87.17 150.50 87.06 A 0.63 0.61 -78.1 0 0 149.88 87.48 Q 149.42 88.73 147.69 89.44 Q 143.66 91.08 139.75 93.00 Q 135.71 93.63 133.07 96.62 A 1.21 1.07 17.2 0 1 132.25 96.99 Q 130.61 97.05 129.79 98.38 A 1.21 0.73 -68.9 0 1 129.07 98.94 L 122.04 99.75 Q 123.77 98.36 124.00 98.25 Q 132.81 93.87 135.94 91.69 Q 140.25 88.68 146.41 88.18 A 1.96 1.91 23.9 0 0 147.35 87.83 Q 150.05 85.87 152.44 85.19 Q 155.18 83.24 158.50 82.79 Z" fill-opacity="1.000" fill="rgb(150,180,241)"></path>
      
      <ellipse transform="translate(13.56,85.22) rotate(59.6)" ry="0.51" rx="1.71" cy="0" cx="0" fill-opacity="1.000" fill="rgb(150,180,241)"></ellipse>
      
      <path d="M 204.36 85.80 Q 203.57 86.32 202.55 86.31 Q 201.41 86.31 202.28 85.57 Q 203.41 84.62 204.36 85.19 A 0.37 0.36 -45.9 0 1 204.36 85.80 Z" fill-opacity="1.000" fill="rgb(228,204,232)"></path>
      
      <path d="M 280.04 85.50 Q 277.67 87.16 279.94 88.56 Q 282.37 90.07 279.00 91.25 Q 276.14 92.25 275.21 95.25 Q 274.48 95.23 274.05 94.74 Q 273.73 94.38 273.73 93.66 Q 273.73 92.11 274.19 90.65 Q 274.59 89.39 274.87 87.76 Q 275.56 83.82 280.04 85.50 Z" fill-opacity="1.000" fill="rgb(247,190,219)"></path>
      
      <path d="M 85.94 87.06 Q 86.17 87.06 89.25 88.29 L 89.29 88.50 L 88.13 91.74 A 1.19 1.13 -2.4 0 1 87.48 92.41 L 82.50 94.46 Q 80.10 95.52 77.54 95.25 Q 75.67 93.94 75.21 96.25 Q 70.55 96.11 68.91 100.29 A 0.52 0.39 38.8 0 0 69.03 100.76 Q 69.13 100.87 69.19 101.00 Q 61.69 101.00 54.19 101.00 Q 54.22 96.97 57.33 95.54 Q 58.81 94.85 59.96 93.68 Q 62.59 90.99 65.50 91.00 Q 65.60 91.00 75.29 87.82 Q 75.53 87.74 75.72 87.78 Q 76.35 87.89 75.30 88.36 Q 73.75 89.06 75.51 88.55 Q 80.62 87.07 85.94 87.06 Z M 60.7316 94.9139 A 0.87 0.70 -19.2 0 0 59.6798 94.5389 A 0.87 0.70 -19.2 0 0 59.0884 95.4861 A 0.87 0.70 -19.2 0 0 60.1402 95.8611 A 0.87 0.70 -19.2 0 0 60.7316 94.9139 Z" fill-opacity="1.000" fill="rgb(72,92,198)"></path>
      
      <path d="M 206.21 87.00 Q 205.90 89.49 203.94 91.19 Q 202.21 91.71 202.41 93.50 A 1.40 1.01 66.4 0 1 202.21 94.42 Q 200.62 96.57 198.00 97.15 A 1.27 1.07 51.3 0 1 197.09 96.97 Q 194.86 95.56 196.04 98.75 Q 196.19 99.88 196.19 101.00 Q 188.94 101.00 181.69 101.00 Q 182.12 100.30 181.96 99.54 A 0.67 0.58 72.1 0 1 182.26 98.84 Q 184.80 97.60 187.41 96.51 Q 188.57 96.02 191.11 94.28 Q 193.46 92.68 196.43 92.46 Q 196.86 92.43 197.35 92.15 L 206.21 87.00 Z" fill-opacity="1.000" fill="rgb(228,204,232)"></path>
      
      <path d="M 299.00 87.56 Q 299.00 94.28 299.00 101.00 Q 283.09 101.00 267.19 101.00 Q 267.48 100.25 267.62 99.44 A 0.91 0.68 -89.4 0 1 268.15 98.75 L 271.75 97.71 Q 274.09 97.35 276.33 98.03 A 2.05 1.45 38.2 0 0 277.31 98.08 Q 280.54 97.28 282.69 94.69 Q 284.21 93.79 285.40 94.88 Q 285.72 95.17 286.23 95.37 Q 287.31 95.79 284.97 97.06 A 1.17 1.16 69.4 0 0 284.39 98.35 Q 284.84 100.28 287.19 98.93 Q 289.91 97.36 290.48 94.31 A 1.82 1.37 79.2 0 1 290.90 93.45 Q 292.12 92.19 293.51 91.13 Q 293.52 91.12 295.75 89.11 Q 297.08 87.91 299.00 87.56 Z" fill-opacity="1.000" fill="rgb(167,111,213)"></path>
      
      <path d="M 178.75 89.00 Q 180.34 89.05 179.38 89.94 A 1.38 0.75 83.7 0 0 179.05 90.74 L 178.92 92.02 A 0.84 0.57 -5.4 0 1 178.26 92.57 Q 176.66 92.89 175.81 94.25 A 0.51 0.46 -61.8 0 0 175.99 94.97 Q 176.32 95.10 176.75 95.04 Q 177.99 96.68 176.56 97.06 Q 172.84 98.07 168.56 95.74 A 0.64 0.64 19.4 0 0 167.62 96.19 Q 167.10 99.31 170.04 99.50 Q 169.33 100.09 169.19 101.00 Q 167.06 101.00 164.94 101.00 Q 164.25 99.77 165.09 99.03 A 1.12 1.01 -22.8 0 0 165.46 98.24 L 165.46 96.75 A 1.07 0.80 -22.1 0 1 165.92 95.99 Q 166.99 95.26 167.50 94.04 Q 168.81 93.35 169.82 92.33 Q 171.10 91.05 172.03 90.63 Q 175.80 88.91 178.75 89.00 Z" fill-opacity="1.000" fill="rgb(193,167,228)"></path>
      
      <path d="M 187.79 90.50 Q 187.90 91.47 187.21 91.89 Q 186.53 92.30 186.48 92.35 Q 180.96 97.00 174.39 99.98 A 1.68 1.44 34.0 0 1 173.45 100.09 L 170.04 99.50 Q 167.10 99.31 167.62 96.19 A 0.64 0.64 19.4 0 1 168.56 95.74 Q 172.84 98.07 176.56 97.06 Q 177.99 96.68 176.75 95.04 Q 180.11 94.15 181.11 90.99 A 0.84 0.68 -81.4 0 1 181.74 90.42 L 185.31 90.08 Q 185.72 90.04 186.22 89.77 Q 187.12 89.30 187.79 90.50 Z" fill-opacity="1.000" fill="rgb(198,182,229)"></path>
      
      <path d="M 164.48 94.17 L 163.46 96.50 Q 161.86 95.99 160.70 96.72 Q 159.90 97.23 159.98 96.28 Q 160.12 94.57 159.20 94.80 A 0.59 0.45 76.0 0 0 158.91 95.48 Q 159.46 97.69 155.52 98.12 A 2.37 2.36 12.8 0 0 153.75 99.23 Q 153.31 99.94 151.69 101.00 Q 150.44 101.00 149.19 101.00 Q 148.37 99.09 149.96 98.56 Q 150.49 98.38 150.79 98.08 Q 155.33 93.57 161.69 93.21 A 1.82 1.45 -59.6 0 0 162.57 92.87 Q 163.89 91.87 164.57 93.29 A 1.19 0.63 -56.2 0 1 164.48 94.17 Z" fill-opacity="1.000" fill="rgb(193,167,228)"></path>
      
      <path d="M 228.81 92.76 Q 230.16 92.73 229.66 93.99 A 1.28 1.25 -1.5 0 1 229.00 94.67 L 222.65 97.63 Q 222.00 97.93 222.26 97.32 L 223.46 94.51 A 0.50 0.40 13.5 0 1 223.96 94.28 Q 226.14 94.55 227.93 93.14 A 1.75 1.01 -53.3 0 1 228.81 92.76 Z" fill-opacity="1.000" fill="rgb(222,157,216)"></path>
      
      <path d="M 249.11 93.60 Q 250.76 97.22 249.19 101.00 Q 247.81 101.00 246.44 101.00 Q 249.42 97.98 248.16 93.97 A 0.98 0.63 64.9 0 1 248.28 93.09 Q 248.70 92.70 249.11 93.60 Z" fill-opacity="1.000" fill="rgb(180,153,226)"></path>
      
      <ellipse transform="translate(59.91,95.20) rotate(-19.2)" ry="0.70" rx="0.87" cy="0" cx="0" fill-opacity="1.000" fill="rgb(108,155,236)"></ellipse>
      
      <path d="M 82.50 94.46 L 89.94 94.78 A 1.30 0.58 54.2 0 1 90.71 95.23 L 91.25 95.79 Q 91.74 96.26 90.75 96.25 A 0.33 0.33 -13.6 0 0 90.45 96.74 Q 91.11 97.94 92.12 97.89 Q 92.76 97.86 92.98 97.96 Q 93.61 98.24 92.50 98.43 A 0.96 0.77 2.4 0 0 91.79 98.95 Q 91.40 99.94 91.69 101.00 Q 80.44 101.00 69.19 101.00 Q 69.13 100.87 69.03 100.76 A 0.52 0.39 38.8 0 1 68.91 100.29 Q 70.55 96.11 75.21 96.25 Q 77.09 98.52 77.54 95.25 Q 80.10 95.52 82.50 94.46 Z" fill-opacity="1.000" fill="rgb(79,108,213)"></path>
      
      <path d="M 77.54 95.25 Q 77.09 98.52 75.21 96.25 Q 75.67 93.94 77.54 95.25 Z" fill-opacity="1.000" fill="rgb(204,198,247)"></path>
      
      <path d="M 159.98 96.28 Q 159.90 97.23 160.70 96.72 Q 161.86 95.99 163.46 96.50 Q 163.21 98.99 161.69 101.00 Q 161.31 101.00 160.94 101.00 Q 158.81 100.37 156.69 101.00 Q 154.19 101.00 151.69 101.00 Q 153.31 99.94 153.75 99.23 A 2.37 2.36 12.8 0 1 155.52 98.12 Q 159.46 97.69 158.91 95.48 A 0.59 0.45 76.0 0 1 159.20 94.80 Q 160.12 94.57 159.98 96.28 Z" fill-opacity="1.000" fill="rgb(190,184,231)"></path>
      
      <path d="M 219.59 97.77 Q 218.11 98.69 216.44 98.80 A 0.63 0.63 -8.9 0 1 215.79 98.33 Q 215.16 95.85 217.69 95.19 Q 220.22 94.53 220.05 97.01 A 0.96 0.95 -13.9 0 1 219.59 97.77 Z" fill-opacity="1.000" fill="rgb(222,157,216)"></path>
      
      <path d="M 9.04 100.74 Q 8.83 100.82 8.69 101.00 Q 8.06 101.00 7.44 101.00 Q 6.27 100.58 7.44 99.94 Q 8.81 99.19 9.31 100.30 A 0.41 0.31 -21.6 0 1 9.04 100.74 Z" fill-opacity="1.000" fill="rgb(108,155,236)"></path>
      
      <path d="M 160.94 101.00 Q 158.81 101.00 156.69 101.00 Q 158.81 100.37 160.94 101.00 Z" fill-opacity="1.000" fill="rgb(31,53,127)"></path>
      
    </svg>

    <div class="img">

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 89" width="201px" height="89px" class="stars">
      
        <path d="M 143.15 6.20 Q 144.85 9.35 149.47 12.19 Q 150.21 12.64 149.39 12.95 Q 144.67 14.74 142.86 19.46 Q 142.68 19.92 142.40 19.53 Q 139.67 15.75 135.33 12.62 A 0.33 0.33 -39.4 0 1 135.39 12.05 Q 138.90 10.47 141.23 6.20 Q 142.19 4.43 143.15 6.20 Z" fill-opacity="1.000" fill="rgb(252,216,132)"></path>
        
        <path d="M 95.58 6.37 Q 97.92 9.80 100.06 11.69 Q 101.52 12.27 102.60 13.33 A 0.34 0.32 -32.4 0 1 102.46 13.86 Q 98.88 15.26 95.97 20.14 Q 95.39 21.11 94.92 20.09 Q 93.05 16.07 88.17 13.80 Q 87.59 13.53 88.17 13.26 Q 92.29 11.36 94.84 6.41 A 0.43 0.43 41.6 0 1 95.58 6.37 Z" fill-opacity="1.000" fill="rgb(252,216,132)"></path>
        
        <path d="M 192.13 6.98 Q 194.00 10.81 198.56 13.27 A 0.29 0.29 -47.5 0 1 198.58 13.77 Q 197.23 14.63 195.83 15.42 Q 194.41 16.23 193.59 17.55 Q 192.66 19.05 191.76 20.57 A 0.30 0.30 45.9 0 1 191.25 20.56 Q 188.89 16.50 184.22 13.62 Q 183.72 13.31 184.26 13.09 Q 187.44 11.83 190.71 6.89 Q 191.50 5.69 192.13 6.98 Z" fill-opacity="1.000" fill="rgb(252,216,132)"></path>
        
        <path d="M 50.14 10.80 L 53.46 13.86 A 0.50 0.44 -44.8 0 1 53.41 14.55 L 50.00 17.65 A 0.23 0.22 -37.4 0 1 49.66 17.61 Q 48.59 15.91 46.73 14.63 A 0.59 0.58 -50.6 0 1 46.65 13.74 L 49.40 10.87 A 0.57 0.49 -46.1 0 1 50.14 10.80 Z" fill-opacity="1.000" fill="rgb(247,213,147)"></path>
        
        <path d="M 72.48 11.79 L 75.60 14.64 A 0.81 0.77 -45.4 0 1 75.58 15.80 L 72.78 18.46 A 0.53 0.51 -45.8 0 1 72.08 18.48 L 68.72 15.50 A 0.46 0.43 54.2 0 1 68.82 14.75 Q 70.71 14.02 71.89 11.87 A 0.39 0.36 35.6 0 1 72.48 11.79 Z" fill-opacity="1.000" fill="rgb(254,203,2)"></path>
        
        <path d="M 24.13 16.99 Q 26.01 20.98 30.61 23.16 Q 31.60 23.63 30.56 23.98 Q 25.61 25.66 23.77 30.67 Q 23.51 31.38 23.20 30.69 Q 21.12 26.12 16.63 24.08 Q 15.35 23.50 16.64 22.96 Q 19.50 21.74 22.70 16.89 Q 23.50 15.67 24.13 16.99 Z" fill-opacity="1.000" fill="rgb(252,216,132)"></path>
        
        <path d="M 57.32 26.64 L 60.27 29.34 A 0.41 0.38 52.2 0 1 60.21 29.99 Q 58.04 31.05 57.07 33.05 Q 56.60 34.02 56.12 33.05 Q 55.42 31.63 53.54 30.38 A 0.42 0.41 -50.6 0 1 53.48 29.74 L 56.65 26.62 A 0.51 0.46 43.6 0 1 57.32 26.64 Z" fill-opacity="1.000" fill="rgb(254,203,2)"></path>
        
        <rect transform="translate(122.78,29.78) rotate(44.5)" rx="0.26" height="5.30" width="4.74" y="-2.65" x="-2.37" fill-opacity="1.000" fill="rgb(254,203,2)"></rect>
        
        <path d="M 181.78 28.45 A 4.24 4.23 84.3 0 0 183.79 30.10 Q 185.66 30.85 183.81 31.81 Q 182.62 32.44 181.22 34.51 A 0.33 0.32 -44.3 0 1 180.68 34.51 Q 180.26 33.85 179.77 33.25 Q 179.35 32.72 178.40 32.11 Q 177.87 31.76 177.38 31.34 A 0.41 0.40 -43.3 0 1 177.41 30.71 L 179.43 29.14 A 1.70 1.11 88.0 0 0 179.92 28.33 Q 180.46 26.43 181.78 28.45 Z" fill-opacity="1.000" fill="rgb(247,213,147)"></path>
        
        <path d="M 107.80 28.92 Q 108.88 30.64 110.58 31.74 A 0.46 0.40 38.5 0 1 110.70 32.40 L 107.50 35.43 A 0.50 0.47 50.0 0 1 106.78 35.34 Q 105.29 33.38 103.92 32.81 Q 102.70 32.29 103.95 31.84 Q 105.89 31.15 106.74 29.02 Q 107.18 27.93 107.80 28.92 Z" fill-opacity="1.000" fill="rgb(254,203,2)"></path>
        
        <path d="M 201.00 31.81 Q 201.00 32.31 201.00 32.81 Q 199.53 33.45 199.61 32.37 Q 199.65 31.86 199.98 31.62 Q 200.44 31.29 201.00 31.81 Z" fill-opacity="1.000" fill="rgb(254,203,2)"></path>
        
        <path d="M 157.69 35.31 Q 158.65 36.98 160.49 38.04 Q 161.18 38.44 160.47 38.80 Q 158.66 39.71 157.85 41.71 Q 157.20 43.34 156.57 41.70 Q 156.02 40.29 153.97 39.17 A 0.60 0.59 -48.3 0 1 153.92 38.16 Q 155.76 36.86 156.59 35.33 Q 157.13 34.35 157.69 35.31 Z" fill-opacity="1.000" fill="rgb(247,213,147)"></path>
        
        <path d="M 91.93 35.65 Q 92.96 37.31 94.33 37.95 Q 95.75 38.60 94.26 39.07 Q 92.37 39.66 91.84 41.94 Q 91.55 43.16 90.94 42.07 Q 89.86 40.15 87.98 39.09 Q 87.10 38.59 88.00 38.13 Q 89.58 37.33 90.40 35.71 Q 91.11 34.32 91.93 35.65 Z" fill-opacity="1.000" fill="rgb(247,213,147)"></path>
        
        <path d="M 14.28 38.81 Q 15.37 39.69 16.40 40.66 A 0.49 0.40 -45.9 0 1 16.35 41.29 L 13.35 44.42 A 0.45 0.45 38.4 0 1 12.71 44.44 L 9.41 41.28 A 0.40 0.37 47.6 0 1 9.41 40.70 L 11.56 39.01 A 1.78 1.10 89.5 0 0 12.05 38.20 Q 12.50 36.68 13.48 37.95 Q 13.92 38.52 14.28 38.81 Z" fill-opacity="1.000" fill="rgb(247,213,147)"></path>
        
        <path d="M 72.75 38.53 Q 75.67 42.74 79.65 45.14 A 0.26 0.26 38.8 0 1 79.70 45.55 Q 78.68 46.51 77.37 47.18 Q 74.06 48.87 72.99 52.52 Q 72.74 53.38 72.27 52.62 Q 69.64 48.37 65.50 45.80 A 0.20 0.19 42.0 0 1 65.48 45.48 Q 69.54 42.14 72.00 38.54 A 0.46 0.45 -45.6 0 1 72.75 38.53 Z" fill-opacity="1.000" fill="rgb(252,216,132)"></path>
        
        <path d="M 138.81 38.57 Q 141.37 42.38 145.18 44.93 Q 146.44 45.78 144.99 46.25 Q 140.35 47.75 139.02 52.41 Q 138.81 53.13 138.38 52.52 Q 135.10 47.98 131.68 45.91 A 0.43 0.43 42.8 0 1 131.65 45.19 Q 135.52 42.37 137.91 38.58 A 0.54 0.54 44.3 0 1 138.81 38.57 Z" fill-opacity="1.000" fill="rgb(252,216,132)"></path>
        
        <path d="M 35.77 38.77 Q 36.58 40.88 38.41 41.60 Q 39.97 42.22 38.45 42.93 Q 36.53 43.83 35.94 45.46 A 0.43 0.42 31.1 0 1 35.26 45.62 L 31.88 42.56 A 0.44 0.35 -46.4 0 1 31.93 42.00 L 35.14 38.70 A 0.40 0.35 -35.0 0 1 35.77 38.77 Z" fill-opacity="1.000" fill="rgb(254,203,2)"></path>
        
        <path d="M 194.57 52.39 L 197.53 55.15 A 0.36 0.34 49.0 0 1 197.51 55.70 Q 195.90 56.77 194.67 59.04 Q 194.23 59.84 193.88 58.99 Q 193.13 57.15 191.01 56.14 A 0.50 0.45 28.2 0 1 190.77 55.48 Q 191.11 54.93 191.73 54.62 Q 192.07 54.45 192.45 54.00 L 193.88 52.32 A 0.55 0.40 41.9 0 1 194.57 52.39 Z" fill-opacity="1.000" fill="rgb(247,213,147)"></path>
        
        <path d="M 24.29 53.46 L 27.12 56.26 A 0.63 0.55 55.2 0 1 27.01 57.24 Q 24.90 58.11 24.09 59.86 Q 23.48 61.17 22.94 59.83 Q 22.37 58.40 20.99 57.75 Q 19.47 57.02 20.94 56.19 Q 22.53 55.29 23.55 53.49 A 0.50 0.43 38.5 0 1 24.29 53.46 Z" fill-opacity="1.000" fill="rgb(254,203,2)"></path>
        
        <rect transform="translate(103.79,58.77) rotate(45.0)" rx="0.26" height="5.22" width="4.70" y="-2.61" x="-2.35" fill-opacity="1.000" fill="rgb(254,203,2)"></rect>
        
        <path d="M 175.83 55.60 Q 178.50 59.50 182.53 62.26 Q 183.11 62.66 182.46 62.93 Q 177.97 64.83 176.12 69.19 Q 175.73 70.10 175.15 69.30 Q 172.16 65.20 168.59 62.81 A 0.43 0.43 -45.3 0 1 168.59 62.10 Q 172.77 59.22 174.82 55.64 A 0.60 0.60 42.6 0 1 175.83 55.60 Z" fill-opacity="1.000" fill="rgb(252,216,132)"></path>
        
        <rect transform="translate(61.98,63.04) rotate(44.2)" rx="0.27" height="5.24" width="5.32" y="-2.62" x="-2.66" fill-opacity="1.000" fill="rgb(247,213,147)"></rect>
        
        <path d="M 129.44 60.81 Q 130.57 61.71 131.45 62.85 A 0.54 0.47 -40.8 0 1 131.35 63.53 L 128.10 66.57 A 0.37 0.35 -35.8 0 1 127.53 66.50 Q 126.81 65.09 125.64 64.39 Q 123.02 62.84 125.72 61.63 A 1.29 1.26 -89.7 0 0 126.37 60.97 Q 127.50 58.45 129.44 60.81 Z" fill-opacity="1.000" fill="rgb(247,213,147)"></path>
        
        <rect transform="translate(84.34,64.24) rotate(43.7)" rx="0.26" height="5.18" width="5.18" y="-2.59" x="-2.59" fill-opacity="1.000" fill="rgb(254,203,2)"></rect>
        
        <rect transform="translate(150.33,64.23) rotate(44.2)" rx="0.26" height="5.18" width="5.18" y="-2.59" x="-2.59" fill-opacity="1.000" fill="rgb(254,203,2)"></rect>
        
        <path d="M 8.76 63.36 L 11.59 66.23 A 0.34 0.30 52.1 0 1 11.56 66.73 Q 9.89 67.74 8.63 70.14 Q 8.31 70.75 7.98 70.14 Q 6.89 68.12 4.68 66.92 A 0.31 0.31 -47.7 0 1 4.66 66.39 Q 6.79 64.98 7.49 63.47 A 0.82 0.73 36.4 0 1 8.76 63.36 Z" fill-opacity="1.000" fill="rgb(247,213,147)"></path>
        
        <path d="M 39.85 65.57 Q 42.57 69.55 46.33 72.12 Q 47.27 72.76 46.18 73.11 Q 41.90 74.44 40.18 79.18 Q 39.81 80.19 39.19 79.32 Q 36.52 75.56 32.41 72.54 A 0.33 0.32 47.2 0 1 32.42 71.99 Q 32.99 71.67 33.59 71.42 Q 34.25 71.14 34.66 70.74 Q 36.83 68.62 38.84 65.57 A 0.61 0.61 44.8 0 1 39.85 65.57 Z" fill-opacity="1.000" fill="rgb(252,216,132)"></path>
        
        <rect transform="translate(114.81,77.81) rotate(44.7)" rx="0.26" height="5.26" width="4.78" y="-2.63" x="-2.39" fill-opacity="1.000" fill="rgb(254,203,2)"></rect>
        
        <rect transform="translate(187.34,81.24) rotate(43.4)" rx="0.26" height="5.12" width="5.14" y="-2.56" x="-2.57" fill-opacity="1.000" fill="rgb(254,203,2)"></rect>
        
        <rect transform="translate(78.95,81.08) rotate(44.6)" rx="0.26" height="5.14" width="5.22" y="-2.57" x="-2.61" fill-opacity="1.000" fill="rgb(247,213,147)"></rect>
        
        <path d="M 149.41 83.29 L 150.92 84.89 Q 151.37 85.37 151.66 85.48 Q 153.97 86.35 152.10 87.19 Q 151.42 87.49 150.94 87.95 Q 150.36 88.52 149.69 89.00 Q 148.94 89.00 148.19 89.00 Q 146.90 88.05 145.83 86.88 A 0.42 0.41 -36.0 0 1 145.94 86.25 Q 147.67 85.20 148.75 83.44 A 0.46 0.39 -52.7 0 1 149.41 83.29 Z" fill-opacity="1.000" fill="rgb(247,213,147)"></path>
        
        <path d="M 131.69 89.00 Q 130.31 89.00 128.94 89.00 Q 128.24 88.62 128.72 87.96 Q 131.37 84.24 131.69 89.00 Z" fill-opacity="1.000" fill="rgb(252,216,132)"></path>
        
        <path d="M 30.52 87.78 Q 31.13 88.27 30.69 89.00 Q 29.06 89.00 27.44 89.00 Q 26.61 88.47 27.44 87.94 Q 28.34 85.71 29.92 87.27 Q 29.99 87.34 30.52 87.78 Z" fill-opacity="1.000" fill="rgb(252,216,132)"></path>
        
        <path d="M 174.08 87.53 Q 174.65 88.52 173.94 89.00 Q 173.19 89.00 172.44 89.00 Q 171.62 88.47 172.81 87.34 A 0.82 0.81 -36.4 0 1 174.08 87.53 Z" fill-opacity="1.000" fill="rgb(247,213,147)"></path>
        
        <path d="M 51.95 87.98 Q 52.12 88.50 51.44 89.00 Q 51.06 89.00 50.69 89.00 Q 50.32 87.86 51.19 87.62 A 0.64 0.58 -16.5 0 1 51.95 87.98 Z" fill-opacity="1.000" fill="rgb(254,203,2)"></path>
        
      </svg>


      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px" class="astronaut">
      
        <path d="M 24.50 9.50 Q 24.40 9.93 24.78 10.53 Q 25.07 11.00 25.27 10.48 Q 25.63 9.58 25.60 8.57 A 0.60 0.52 85.7 0 1 26.05 7.96 Q 27.36 7.80 27.09 9.29 Q 26.96 10.02 27.52 9.53 Q 28.83 8.39 29.79 8.94 Q 35.55 12.24 35.93 18.19 Q 36.19 22.18 34.06 25.33 Q 31.75 28.72 27.50 29.75 Q 22.48 30.97 18.22 27.52 Q 12.37 22.77 14.50 15.75 Q 15.97 10.91 20.98 8.75 A 0.63 0.58 60.9 0 1 21.71 8.99 Q 23.09 11.05 22.87 8.56 A 0.67 0.59 78.9 0 1 23.27 7.88 Q 24.99 7.32 24.50 9.50 Z M 33.63 20.12 A 8.60 8.60 0 0 0 25.03 11.52 A 8.60 8.60 0 0 0 16.43 20.12 A 8.60 8.60 0 0 0 25.03 28.72 A 8.60 8.60 0 0 0 33.63 20.12 Z" fill-opacity="1.000" fill="rgb(237,237,237)"></path>
        
        <path d="M 33.63 20.12 A 8.60 8.60 0 0 1 25.03 28.72 A 8.60 8.60 0 0 1 16.43 20.12 A 8.60 8.60 0 0 1 25.03 11.52 A 8.60 8.60 0 0 1 33.63 20.12 Z M 17.96 22.75 Q 19.64 27.49 24.50 27.75 Q 28.46 27.96 30.69 25.39 Q 32.69 23.08 32.67 19.71 Q 32.63 14.81 27.25 12.79 Q 23.07 11.56 19.93 14.43 Q 16.17 17.89 17.96 22.75 Z" fill-opacity="0.996" fill="rgb(3,1,3)"></path>
        
        <path d="M 27.25 12.79 Q 27.08 13.89 25.94 13.87 Q 20.60 13.80 19.06 18.81 Q 19.03 20.95 17.96 22.75 Q 16.17 17.89 19.93 14.43 Q 23.07 11.56 27.25 12.79 Z" fill-opacity="1.000" fill="rgb(237,237,237)"></path>
        
        <path d="M 27.25 12.79 Q 32.63 14.81 32.67 19.71 Q 32.69 23.08 30.69 25.39 Q 28.46 27.96 24.50 27.75 Q 19.64 27.49 17.96 22.75 Q 19.03 20.95 19.06 18.81 Q 20.60 13.80 25.94 13.87 Q 27.08 13.89 27.25 12.79 Z" fill-opacity="1.000" fill="rgb(152,218,248)"></path>
        
        <path d="M 12.58 19.99 Q 11.85 21.41 11.75 23.06 Q 11.62 25.04 11.92 27.00 A 1.11 0.83 69.1 0 1 11.67 27.88 Q 11.18 28.34 10.49 28.46 A 0.56 0.52 79.3 0 1 9.89 28.02 Q 8.91 23.50 11.05 19.53 Q 11.31 19.04 11.66 18.66 Q 13.06 17.12 12.87 19.08 Q 12.84 19.48 12.58 19.99 Z" fill-opacity="1.000" fill="rgb(197,111,59)"></path>
        
        <path d="M 37.81 18.44 Q 39.43 19.58 40.00 21.50 Q 40.11 24.76 40.46 28.00 Q 40.54 28.25 40.46 28.50 Q 39.27 28.66 38.46 27.75 Q 39.15 24.19 38.00 20.79 Q 37.34 19.98 37.00 19.00 Q 36.48 17.50 37.81 18.44 Z" fill-opacity="1.000" fill="rgb(197,111,59)"></path>
        
        <path d="M 38.00 20.79 Q 39.15 24.19 38.46 27.75 Q 37.62 27.71 37.71 26.75 Q 37.19 24.22 37.96 21.75 L 38.00 20.79 Z" fill-opacity="0.996" fill="rgb(3,1,3)"></path>
        
        <path d="M 37.96 21.75 Q 37.19 24.22 37.71 26.75 Q 35.74 27.88 35.25 25.50 Q 35.07 24.63 36.94 21.44 Q 37.56 20.37 37.96 21.75 Z" fill-opacity="0.000" fill="rgb(48,24,28)"></path>
        
        <path d="M 13.78 22.56 Q 13.90 23.62 14.43 24.56 Q 15.53 26.51 13.54 26.99 A 0.54 0.54 0.0 0 1 12.89 26.60 Q 12.22 24.00 12.85 22.25 Q 13.17 21.35 13.61 22.00 Q 13.73 22.19 13.78 22.56 Z" fill-opacity="0.000" fill="rgb(48,24,28)"></path>
        
        <path d="M 17.02 27.76 Q 20.77 31.31 25.81 30.94 Q 30.39 30.60 33.85 27.27 Q 34.10 27.03 34.34 26.99 Q 34.83 26.93 34.75 27.43 Q 34.72 27.66 34.51 27.87 Q 25.72 36.65 16.22 28.56 Q 15.93 28.31 15.73 27.98 Q 14.49 25.95 16.44 27.28 Q 16.70 27.46 17.02 27.76 Z" fill-opacity="1.000" fill="rgb(237,237,237)"></path>
        
        <path d="M 14.69 28.06 Q 16.43 28.72 16.56 30.44 L 17.72 44.79 A 0.75 0.54 80.6 0 1 17.37 45.50 Q 17.14 45.59 16.88 45.52 Q 16.22 45.36 15.94 45.24 Q 15.64 45.11 15.50 44.75 Q 14.85 36.73 13.85 28.76 Q 13.80 28.34 13.96 28.15 Q 14.19 27.88 14.69 28.06 Z" fill-opacity="1.000" fill="rgb(247,87,88)"></path>
        
        <path d="M 36.12 28.80 Q 35.08 36.41 34.55 44.07 Q 34.48 44.98 34.12 45.32 Q 33.65 45.77 32.94 45.48 A 0.86 0.76 -82.3 0 1 32.45 44.75 Q 32.38 43.29 32.69 39.94 Q 33.11 35.38 33.30 31.04 A 1.47 1.42 -26.2 0 1 33.59 30.24 Q 35.01 28.38 35.73 28.19 A 0.52 0.35 -88.9 0 1 36.12 28.80 Z" fill-opacity="1.000" fill="rgb(247,87,88)"></path>
        
        <path d="M 13.21 30.25 Q 9.39 31.63 9.25 35.71 Q 8.19 36.47 8.06 35.44 Q 7.53 31.10 11.69 28.94 Q 13.42 28.04 13.21 30.25 Z" fill-opacity="1.000" fill="rgb(254,229,110)"></path>
        
        <path d="M 39.87 29.88 Q 41.86 31.72 42.03 35.15 A 0.56 0.55 88.5 0 1 41.48 35.74 L 36.81 35.71 A 0.50 0.48 -88.9 0 1 36.33 35.19 Q 36.42 33.46 36.75 31.75 Q 36.22 26.49 39.87 29.88 Z" fill-opacity="1.000" fill="rgb(253,206,34)"></path>
        
        <path d="M 13.21 30.25 L 13.77 35.33 A 0.48 0.46 -2.1 0 1 13.28 35.83 L 9.25 35.71 Q 9.39 31.63 13.21 30.25 Z" fill-opacity="1.000" fill="rgb(253,206,34)"></path>
        
        <path d="M 18.12 31.40 Q 25.64 34.80 31.70 31.43 Q 33.28 30.55 32.53 32.20 Q 32.25 32.83 32.20 34.50 Q 32.05 39.67 31.38 44.81 A 0.61 0.57 -86.0 0 1 30.81 45.34 L 19.45 45.45 A 0.83 0.80 87.3 0 1 18.64 44.68 L 17.68 31.70 A 0.31 0.31 -79.2 0 1 18.12 31.40 Z M 27.9001 35.9998 A 0.47 0.47 0 0 0 27.4317 35.5282 L 22.7517 35.5118 A 0.47 0.47 0 0 0 22.2801 35.9802 L 22.2799 36.0202 A 0.47 0.47 0 0 0 22.7483 36.4918 L 27.4283 36.5082 A 0.47 0.47 0 0 0 27.8999 36.0398 L 27.9001 35.9998 Z M 28.6799 39.0883 A 0.42 0.42 0 0 0 28.2681 38.6604 L 21.9892 38.5398 A 0.42 0.42 0 0 0 21.5612 38.9517 L 21.5601 39.0117 A 0.42 0.42 0 0 0 21.9719 39.4396 L 28.2508 39.5602 A 0.42 0.42 0 0 0 28.6788 39.1483 L 28.6799 39.0883 Z" fill-opacity="1.000" fill="rgb(253,206,34)"></path>
        
        <rect transform="translate(25.09,36.01) rotate(0.2)" rx="0.47" height="0.98" width="5.62" y="-0.49" x="-2.81" fill-opacity="0.996" fill="rgb(3,1,3)"></rect>
        
        <rect transform="translate(11.02,37.86) rotate(0.9)" rx="0.65" height="2.28" width="6.30" y="-1.14" x="-3.15" fill-opacity="1.000" fill="rgb(237,237,237)"></rect>
        
        <rect transform="translate(39.00,37.88) rotate(-0.4)" rx="0.86" height="2.24" width="6.38" y="-1.12" x="-3.19" fill-opacity="1.000" fill="rgb(237,237,237)"></rect>
        
        <rect transform="translate(25.12,39.05) rotate(1.1)" rx="0.42" height="0.90" width="7.12" y="-0.45" x="-3.56" fill-opacity="0.996" fill="rgb(3,1,3)"></rect>
        
        <path d="M 9.50 39.79 Q 10.34 40.34 9.87 40.92 Q 9.42 41.47 9.38 41.73 L 8.75 45.46 Q 7.87 45.33 7.97 44.44 Q 8.19 42.55 7.81 40.69 Q 7.84 39.29 9.50 39.79 Z" fill-opacity="1.000" fill="rgb(254,229,110)"></path>
        
        <path d="M 9.50 39.79 L 13.69 39.79 A 0.67 0.64 82.1 0 1 14.33 40.30 Q 14.56 41.18 14.56 42.10 Q 14.56 42.86 14.78 43.86 Q 15.27 46.08 12.25 45.50 Q 10.50 45.53 8.75 45.46 L 9.38 41.73 Q 9.42 41.47 9.87 40.92 Q 10.34 40.34 9.50 39.79 Z" fill-opacity="1.000" fill="rgb(253,206,34)"></path>
        
        <rect transform="translate(38.76,42.65) rotate(1.0)" rx="0.56" height="5.66" width="6.48" y="-2.83" x="-3.24" fill-opacity="1.000" fill="rgb(253,206,34)"></rect>
        
        <path d="M 1.90 46.20 Q 1.64 46.04 1.74 45.76 A 0.56 0.44 12.2 0 1 2.31 45.48 Q 4.05 45.74 2.47 46.23 Q 2.13 46.34 1.90 46.20 Z" fill-opacity="0.996" fill="rgb(3,1,3)"></path>
        
      </svg>

    </div>
  </button>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" height="50px" class="satalite">
  
    <path d="M 13.67 5.52 L 21.90 13.56 A 0.82 0.81 45.7 0 1 21.89 14.74 L 16.09 20.20 A 0.55 0.54 -43.8 0 1 15.33 20.19 L 7.55 12.38 Q 5.78 10.60 7.47 8.95 L 11.01 5.49 Q 12.33 4.21 13.67 5.52 Z" fill-opacity="1.000" fill="rgb(255,255,255)"></path>
    
    <path d="M 34.21 13.04 Q 36.32 14.96 37.86 17.05 Q 39.14 18.80 37.70 20.42 Q 32.93 25.81 27.59 30.60 Q 25.89 32.12 23.77 31.27 A 0.32 0.32 10.8 0 0 23.33 31.56 Q 23.34 33.57 22.38 35.72 A 0.93 0.92 -55.2 0 1 20.88 36.00 L 13.84 28.86 A 0.52 0.50 45.4 0 1 13.83 28.14 Q 15.72 26.23 18.24 26.86 Q 19.31 27.12 18.82 26.14 Q 18.28 25.06 18.47 24.02 Q 18.61 23.28 19.50 22.31 Q 23.84 17.62 28.41 13.16 Q 31.27 10.38 34.21 13.04 Z" fill-opacity="1.000" fill="rgb(255,255,255)"></path>
    
    <path d="M 36.54 28.16 L 44.08 35.70 Q 45.93 37.56 44.34 39.16 L 40.83 42.70 Q 39.47 44.07 37.99 42.65 L 29.57 34.57 A 0.54 0.52 -45.7 0 1 29.57 33.81 L 35.21 28.16 A 0.95 0.94 -44.8 0 1 36.54 28.16 Z" fill-opacity="1.000" fill="rgb(255,255,255)"></path>
    
  </svg>
  
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: animation, button, star, astronaut, space */
.main {
  align-items: center;
  justify-content: center;
  transform: translate(0%,25%);
}

button {
  width: 13em;
  height: 3.5em;
  border: none;
  display: flex;
  align-items: center;
  background-color: #171717;
  border-radius: 15px;
  padding-left: 1em;
  z-index: 3;
  overflow: hidden;
  transition: .4s ease-in-out;
}

.text {
  color: white;
  padding-left: 0.5em;
  padding-top: 0.1em;
  letter-spacing: 0.8em;
  transition: .4s ease-in-out;
  z-index: 3;
  font-weight: bold;
}

.planet {
  position: relative;
  margin-left: -9.55em;
  left: 2.6em;
  scale: 4;
  transition: .4s ease-in-out;
}

.img {
  margin-left: -7.25em;
  margin-top: 6.3em;
  transition: .4s ease-in-out;
  z-index: -2;
}

.img .stars {
  margin-right: -0.8em;
  margin-top: 7em;
  scale: 0.85;
  opacity: 0;
  transition: .4s ease-in-out;
}

.img .astronaut {
  position: relative;
  top: -6.2em;
  left: .65em;
}

.satalite {
  position: relative;
  left: -1em;
  top: -3em;
  animation: 4s around infinite;
  transition: .4s ease-in-out;
}

@keyframes around {
  0% {
    z-index: 5;
    transform: translateY(-3.5em) translateX(8.5em);
  }

  50% {
    transform: translateX(1em) translateY(3.5em);
  }

  100% {
    transform: translateY(-3.5em) translateX(8.5em);
    z-index: -2;
  }
}

button:hover .img {
  margin-top: -1em;
  z-index: 4;
}

button:hover .text {
  opacity: 0;
}

button:hover .planet {
  opacity: 0;
}

button:hover + .satalite {
  opacity: 0;
}

button:active {
  transform: scale(0.9);
}

button:active .stars {
  opacity: 1;
}
</style>


================================================
FILE: Buttons/Praashoo7_quick-fish-43.html
================================================
<div class="main">
  <div class="up">
    <button class="card1">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="30px" height="30px" fill-rule="nonzero" class="instagram"><g fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(8,8)"><path d="M11.46875,5c-3.55078,0 -6.46875,2.91406 -6.46875,6.46875v9.0625c0,3.55078 2.91406,6.46875 6.46875,6.46875h9.0625c3.55078,0 6.46875,-2.91406 6.46875,-6.46875v-9.0625c0,-3.55078 -2.91406,-6.46875 -6.46875,-6.46875zM11.46875,7h9.0625c2.47266,0 4.46875,1.99609 4.46875,4.46875v9.0625c0,2.47266 -1.99609,4.46875 -4.46875,4.46875h-9.0625c-2.47266,0 -4.46875,-1.99609 -4.46875,-4.46875v-9.0625c0,-2.47266 1.99609,-4.46875 4.46875,-4.46875zM21.90625,9.1875c-0.50391,0 -0.90625,0.40234 -0.90625,0.90625c0,0.50391 0.40234,0.90625 0.90625,0.90625c0.50391,0 0.90625,-0.40234 0.90625,-0.90625c0,-0.50391 -0.40234,-0.90625 -0.90625,-0.90625zM16,10c-3.30078,0 -6,2.69922 -6,6c0,3.30078 2.69922,6 6,6c3.30078,0 6,-2.69922 6,-6c0,-3.30078 -2.69922,-6 -6,-6zM16,12c2.22266,0 4,1.77734 4,4c0,2.22266 -1.77734,4 -4,4c-2.22266,0 -4,-1.77734 -4,-4c0,-2.22266 1.77734,-4 4,-4z"></path></g></g></svg>
    </button>
    <button class="card2">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="30px" height="30px" class="twitter"><path d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"></path></svg>
    </button>
  </div>
  <div class="down">
    <button class="card3">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px" class="github">    <path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"></path></svg>
    </button>
    <button class="card4">
      <svg height="30px" width="30px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" class="discord"><path d="M40,12c0,0-4.585-3.588-10-4l-0.488,0.976C34.408,10.174,36.654,11.891,39,14c-4.045-2.065-8.039-4-15-4s-10.955,1.935-15,4c2.346-2.109,5.018-4.015,9.488-5.024L18,8c-5.681,0.537-10,4-10,4s-5.121,7.425-6,22c5.162,5.953,13,6,13,6l1.639-2.185C13.857,36.848,10.715,35.121,8,32c3.238,2.45,8.125,5,16,5s12.762-2.55,16-5c-2.715,3.121-5.857,4.848-8.639,5.815L33,40c0,0,7.838-0.047,13-6C45.121,19.425,40,12,40,12z M17.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C21,28.209,19.433,30,17.5,30z M30.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C34,28.209,32.433,30,30.5,30z"></path></svg>
    </button>
  </div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: social, twitter, instagram, button, Discord, rounded, github, share, social media */
.main {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.up {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.down {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.card1 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: white;
  border-radius: 90px 5px 5px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.instagram {
  margin-top: 1.5em;
  margin-left: 1.2em;
  fill: #cc39a4;
}

.card2 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: white;
  border-radius: 5px 90px 5px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.twitter {
  margin-top: 1.5em;
  margin-left: -.9em;
  fill: #03A9F4;
}

.card3 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: white;
  border-radius: 5px 5px 5px 90px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.github {
  margin-top: -.6em;
  margin-left: 1.2em;
}

.card4 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: white;
  border-radius: 5px 5px 90px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.discord {
  margin-top: -.9em;
  margin-left: -1.2em;
  fill: #8c9eff;
}

.card1:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #cc39a4;
}

.card1:hover .instagram {
  fill: white;
}

.card2:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #03A9F4;
}

.card2:hover .twitter {
  fill: white;
}

.card3:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: black;
}

.card3:hover .github {
  fill: white;
}

.card4:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #8c9eff;
}

.card4:hover .discord {
  fill: white;
}
</style>


================================================
FILE: Buttons/Praashoo7_smooth-crab-52.html
================================================
<div class="main">
  <div class="card">
    <svg
      fill-rule="nonzero"
      height="30px"
      width="30px"
      viewBox="0,0,256,256"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      class="instagram"
    >
      <g
        style="mix-blend-mode: normal"
        text-anchor="none"
        font-size="none"
        font-weight="none"
        font-family="none"
        stroke-dashoffset="0"
        stroke-dasharray=""
        stroke-miterlimit="10"
        stroke-linejoin="miter"
        stroke-linecap="butt"
        stroke-width="1"
        stroke="none"
        fill-rule="nonzero"
      >
        <g transform="scale(8,8)">
          <path
            d="M11.46875,5c-3.55078,0 -6.46875,2.91406 -6.46875,6.46875v9.0625c0,3.55078 2.91406,6.46875 6.46875,6.46875h9.0625c3.55078,0 6.46875,-2.91406 6.46875,-6.46875v-9.0625c0,-3.55078 -2.91406,-6.46875 -6.46875,-6.46875zM11.46875,7h9.0625c2.47266,0 4.46875,1.99609 4.46875,4.46875v9.0625c0,2.47266 -1.99609,4.46875 -4.46875,4.46875h-9.0625c-2.47266,0 -4.46875,-1.99609 -4.46875,-4.46875v-9.0625c0,-2.47266 1.99609,-4.46875 4.46875,-4.46875zM21.90625,9.1875c-0.50391,0 -0.90625,0.40234 -0.90625,0.90625c0,0.50391 0.40234,0.90625 0.90625,0.90625c0.50391,0 0.90625,-0.40234 0.90625,-0.90625c0,-0.50391 -0.40234,-0.90625 -0.90625,-0.90625zM16,10c-3.30078,0 -6,2.69922 -6,6c0,3.30078 2.69922,6 6,6c3.30078,0 6,-2.69922 6,-6c0,-3.30078 -2.69922,-6 -6,-6zM16,12c2.22266,0 4,1.77734 4,4c0,2.22266 -1.77734,4 -4,4c-2.22266,0 -4,-1.77734 -4,-4c0,-2.22266 1.77734,-4 4,-4z"
          ></path>
        </g>
      </g>
    </svg>
  </div>
  <div class="card">
    <svg
      height="30px"
      width="30px"
      viewBox="0 0 48 48"
      xmlns="http://www.w3.org/2000/svg"
      class="twitter"
    >
      <path
        d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"
      ></path>
    </svg>
  </div>
  <div class="card">
    <svg
      height="30px"
      width="30px"
      viewBox="0 0 40 40"
      xmlns="http://www.w3.org/2000/svg"
      class="dribble"
    >
      <path
        d="M20,38.5C9.799,38.5,1.5,30.201,1.5,20S9.799,1.5,20,1.5S38.5,9.799,38.5,20S30.201,38.5,20,38.5z"
      ></path>
      <path
        d="M20,2c9.925,0,18,8.075,18,18s-8.075,18-18,18S2,29.925,2,20S10.075,2,20,2 M20,1 C9.507,1,1,9.507,1,20s8.507,19,19,19s19-8.507,19-19S30.493,1,20,1L20,1z"
        fill="#ea4c89"
      ></path>
      <path
        d="M28.352 36.914c0 0-3.032-21.087-15.63-34.292M1.269 17.848c0 0 24.2 2.117 32.075-11.102M7.804 34.152c0 0 8.624-19.807 31.058-12.194"
        stroke-miterlimit="10"
        stroke="#ea4c89"
        fill="none"
      ></path>
    </svg>
  </div>
  <div class="card">
    <svg
      height="30px"
      width="30px"
      viewBox="0 0 50 50"
      xmlns="http://www.w3.org/2000/svg"
      class="codepen"
    >
      <path
        d="M 25 4 L 4 17.34375 L 4 32.652344 L 25 46 L 46 32.65625 L 46 17.34375 Z M 25 29.183594 L 19.066406 25.070313 L 25 21.023438 L 30.933594 25.070313 Z M 27 17.605469 L 27 9.949219 L 40.429688 18.484375 L 34.410156 22.65625 Z M 23 17.605469 L 15.589844 22.65625 L 9.570313 18.484375 L 23 9.949219 Z M 12.09375 25.042969 L 8 27.832031 L 8 22.203125 Z M 15.570313 27.453125 L 23 32.605469 L 23 40.050781 L 9.589844 31.527344 Z M 27 32.605469 L 34.429688 27.453125 L 40.410156 31.527344 L 27 40.050781 Z M 37.90625 25.042969 L 42 22.203125 L 42 27.832031 Z"
      ></path>
    </svg>
  </div>
  <div class="card">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"
      height="23px"
      width="23px"
      class="uiverse"
    >
      <path
        fill="url(#paint0_linear_501_142)"
        d="M38.0481 4.82927C38.0481 2.16214 40.018 0 42.4481 0H51.2391C53.6692 0 55.6391 2.16214 55.6391 4.82927V40.1401C55.6391 48.8912 53.2343 55.6657 48.4248 60.4636C43.6153 65.2277 36.7304 67.6098 27.7701 67.6098C18.8099 67.6098 11.925 65.2953 7.11548 60.6663C2.37183 56.0036 3.8147e-06 49.2967 3.8147e-06 40.5456V4.82927C3.8147e-06 2.16213 1.96995 0 4.4 0H13.2405C15.6705 0 17.6405 2.16214 17.6405 4.82927V39.1265C17.6405 43.7892 18.4805 47.2018 20.1605 49.3642C21.8735 51.5267 24.4759 52.6079 27.9678 52.6079C31.4596 52.6079 34.0127 51.5436 35.6268 49.4149C37.241 47.2863 38.0481 43.8399 38.0481 39.0758V4.82927Z"
      ></path>
      <path
        fill="url(#paint1_linear_501_142)"
        d="M86.9 61.8682C86.9 64.5353 84.9301 66.6975 82.5 66.6975H73.6595C71.2295 66.6975 69.2595 64.5353 69.2595 61.8682V4.82927C69.2595 2.16214 71.2295 0 73.6595 0H82.5C84.9301 0 86.9 2.16214 86.9 4.82927V61.8682Z"
      ></path>
      <path
        fill="url(#paint2_linear_501_142)"
        d="M2.86102e-06 83.2195C2.86102e-06 80.5524 1.96995 78.3902 4.4 78.3902H83.6C86.0301 78.3902 88 80.5524 88 83.2195V89.1707C88 91.8379 86.0301 94 83.6 94H4.4C1.96995 94 0 91.8379 0 89.1707L2.86102e-06 83.2195Z"
      ></path>
      <defs>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="87.6201"
          x2="96.1684"
          y1="0"
          x1="0"
          id="paint0_linear_501_142"
        >
          <stop stop-color="#BF66FF"></stop>
          <stop stop-color="#6248FF" offset="0.510417"></stop>
          <stop stop-color="#00DDEB" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="87.6201"
          x2="96.1684"
          y1="0"
          x1="0"
          id="paint1_linear_501_142"
        >
          <stop stop-color="#BF66FF"></stop>
          <stop stop-color="#6248FF" offset="0.510417"></stop>
          <stop stop-color="#00DDEB" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="87.6201"
          x2="96.1684"
          y1="0"
          x1="0"
          id="paint2_linear_501_142"
        >
          <stop stop-color="#BF66FF"></stop>
          <stop stop-color="#6248FF" offset="0.510417"></stop>
          <stop stop-color="#00DDEB" offset="1"></stop>
        </linearGradient>
      </defs>
    </svg>
  </div>
  <div class="card">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 48 48"
      width="30px"
      height="30px"
      class="discord"
    >
      <path
        d="M40,12c0,0-4.585-3.588-10-4l-0.488,0.976C34.408,10.174,36.654,11.891,39,14c-4.045-2.065-8.039-4-15-4s-10.955,1.935-15,4c2.346-2.109,5.018-4.015,9.488-5.024L18,8c-5.681,0.537-10,4-10,4s-5.121,7.425-6,22c5.162,5.953,13,6,13,6l1.639-2.185C13.857,36.848,10.715,35.121,8,32c3.238,2.45,8.125,5,16,5s12.762-2.55,16-5c-2.715,3.121-5.857,4.848-8.639,5.815L33,40c0,0,7.838-0.047,13-6C45.121,19.425,40,12,40,12z M17.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C21,28.209,19.433,30,17.5,30z M30.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C34,28.209,32.433,30,30.5,30z"
      ></path>
    </svg>
  </div>
  <div class="card">
    <svg
      height="30px"
      width="30px"
      viewBox="0 0 30 30"
      xmlns="http://www.w3.org/2000/svg"
      class="github"
    >
      <path
        d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"
      ></path>
    </svg>
  </div>
  <div class="card">
    <svg
      height="30px"
      width="30px"
      viewBox="0 0 48 48"
      xmlns="http://www.w3.org/2000/svg"
      class="telegram"
    >
      <path d="M24 4A20 20 0 1 0 24 44A20 20 0 1 0 24 4Z"></path>
      <path
        d="M33.95,15l-3.746,19.126c0,0-0.161,0.874-1.245,0.874c-0.576,0-0.873-0.274-0.873-0.274l-8.114-6.733 l-3.97-2.001l-5.095-1.355c0,0-0.907-0.262-0.907-1.012c0-0.625,0.933-0.923,0.933-0.923l21.316-8.468 c-0.001-0.001,0.651-0.235,1.126-0.234C33.667,14,34,14.125,34,14.5C34,14.75,33.95,15,33.95,15z"
        fill="#fff"
      ></path>
      <path
        d="M23,30.505l-3.426,3.374c0,0-0.149,0.115-0.348,0.12c-0.069,0.002-0.143-0.009-0.219-0.043 l0.964-5.965L23,30.505z"
        fill="#b0bec5"
      ></path>
      <path
        d="M29.897,18.196c-0.169-0.22-0.481-0.26-0.701-0.093L16,26c0,0,2.106,5.892,2.427,6.912 c0.322,1.021,0.58,1.045,0.58,1.045l0.964-5.965l9.832-9.096C30.023,18.729,30.064,18.416,29.897,18.196z"
        fill="#cfd8dc"
      ></path>
    </svg>
  </div>
  <div class="card">
    <svg
      xml:space="preserve"
      viewBox="0 0 256 256"
      height="30"
      width="30"
      version="1.1"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      class="reddit"
    >
      <defs></defs>
      <g
        transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
        style="stroke: none; border-radius:50%; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
      >
        <circle
          transform="matrix(1 0 0 1 0 0)"
          style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
          r="45"
          cy="45"
          cx="45"
        ></circle>
        <path
          stroke-linecap="round"
          transform="matrix(1 0 0 1 0 0)"
          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
          d="M 75.011 45 c -0.134 -3.624 -3.177 -6.454 -6.812 -6.331 c -1.611 0.056 -3.143 0.716 -4.306 1.823 c -5.123 -3.49 -11.141 -5.403 -17.327 -5.537 l 2.919 -14.038 l 9.631 2.025 c 0.268 2.472 2.483 4.262 4.955 3.993 c 2.472 -0.268 4.262 -2.483 3.993 -4.955 s -2.483 -4.262 -4.955 -3.993 c -1.421 0.145 -2.696 0.973 -3.4 2.204 L 48.68 17.987 c -0.749 -0.168 -1.499 0.302 -1.667 1.063 c 0 0.011 0 0.011 0 0.022 l -3.322 15.615 c -6.264 0.101 -12.36 2.025 -17.55 5.537 c -2.64 -2.483 -6.801 -2.36 -9.284 0.291 c -2.483 2.64 -2.36 6.801 0.291 9.284 c 0.515 0.481 1.107 0.895 1.767 1.186 c -0.045 0.66 -0.045 1.32 0 1.98 c 0 10.078 11.745 18.277 26.23 18.277 c 14.485 0 26.23 -8.188 26.23 -18.277 c 0.045 -0.66 0.045 -1.32 0 -1.98 C 73.635 49.855 75.056 47.528 75.011 45 z M 30.011 49.508 c 0 -2.483 2.025 -4.508 4.508 -4.508 c 2.483 0 4.508 2.025 4.508 4.508 s -2.025 4.508 -4.508 4.508 C 32.025 53.993 30.011 51.991 30.011 49.508 z M 56.152 62.058 v -0.179 c -3.199 2.405 -7.114 3.635 -11.119 3.468 c -4.005 0.168 -7.919 -1.063 -11.119 -3.468 c -0.425 -0.515 -0.347 -1.286 0.168 -1.711 c 0.447 -0.369 1.085 -0.369 1.544 0 c 2.707 1.98 6.007 2.987 9.362 2.83 c 3.356 0.179 6.667 -0.783 9.407 -2.74 c 0.492 -0.481 1.297 -0.47 1.779 0.022 C 56.655 60.772 56.644 61.577 56.152 62.058 z M 55.537 54.34 c -0.078 0 -0.145 0 -0.224 0 l 0.034 -0.168 c -2.483 0 -4.508 -2.025 -4.508 -4.508 s 2.025 -4.508 4.508 -4.508 s 4.508 2.025 4.508 4.508 C 59.955 52.148 58.02 54.239 55.537 54.34 z"
        ></path>
      </g>
    </svg>
  </div>
  <p class="text">HOVER<br /><br />FOR<br /><br />SOCIAL</p>
  <div class="main_back"></div>
</div>

<style>
/* From Uiverse.io by Praashoo7  - Tags: social, twitter, instagram, button, Discord, github, social media, rounded, button, text, gradient, blue, pink, hover, social */
.main_back {
  position: absolute;
  border-radius: 10px;
  transform: rotate(90deg);
  width: 11em;
  height: 11em;
  background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);
  z-index: -2;
  box-shadow: inset 0px 0px 180px 5px #ffffff;
}

.main {
  display: flex;
  flex-wrap: wrap;
  width: 14em;
  align-items: center;
  justify-content: center;
  z-index: -1;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-top-left-radius: 10px;
  background: lightgrey;
  transition: 0.4s ease-in-out, 0.2s background-color ease-in-out,
    0.2s background-image ease-in-out;
  background: rgba(255, 255, 255, 0.596);
  backdrop-filter: blur(5px);
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(5px);
}

.card .instagram {
  opacity: 0;
  transition: 0.2s ease-in-out;
  fill: #cc39a4;
}

.card:nth-child(2) {
  border-radius: 0px;
}

.card:nth-child(2) .twitter {
  opacity: 0;
  transition: 0.2s ease-in-out;
  fill: #03a9f4;
}

.card:nth-child(3) {
  border-top-right-radius: 10px;
  border-top-left-radius: 0px;
}

.card:nth-child(3) .dribble {
  opacity: 0;
  transition: 0.2s ease-in-out;
  fill: #ffb5d2;
}

.card:nth-child(4) {
  border-radius: 0px;
}

.card:nth-child(4) .codepen {
  opacity: 0;
  transition: 0.2s ease-in-out;
  fill: black;
}

.card:nth-child(5) {
  border-radius: 0px;
}

.card:nth-child(5) .uiverse {
  position: absolute;
  margin-left: 0.2em;
  margin-top: 0.2em;
  opacity: 0;
  transition: 0.2s ease-in-out;
}

.card:nth-child(6) {
  border-radius: 0px;
}

.card:nth-child(6) .discord {
  opacity: 0;
  transition: 0.2s ease-in-out;
  fill: #8c9eff;
}

.card:nth-child(7) {
  border-bottom-left-radius: 10px;
  border-top-left-radius: 0px;
}

.card:nth-child(7) .github {
  opacity: 0;
  transition: 0.2s ease-in-out;
  fill: black;
}

.card:nth-child(8) {
  border-radius: 0px;
}

.card:nth-child(8) .telegram {
  opacity: 0;
  transition: 0.2s ease-in-out;
  fill: #29b6f6;
}

.card:nth-child(9) {
  border-bottom-right-radius: 10px;
  border-top-left-radius: 0px;
}

.card:nth-child(9) .reddit {
  opacity: 0;
  transition: 0.2s ease-in-out;
}

.main:hover {
  width: 14em;
  cursor: pointer;
}

.main:hover .main_back {
  opacity: 0;
}

.main:hover .card {
  margin: 0.2em;
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.2);
}

.main:hover .card:nth-child(5) {
  border: transparent;
}

.main:hover .text {
  opacity: 0;
  z-index: -3;
}

.main:hover .instagram {
  opacity: 1;
}

.main:hover .twitter {
  opacity: 1;
}

.main:hover .dribble {
  opacity: 1;
}

.main:hover .codepen {
  opacity: 1;
}

.main:hover .uiverse {
  opacity: 1;
}

.main:hover .discord {
  opacity: 1;
}

.main:hover .github {
  opacity: 1;
}

.main:hover .telegram {
  opacity: 1;
}

.main:hover .reddit {
  opacity: 1;
}

.card:nth-child(1):hover {
  background-color: #cc39a4;
}

.card:nth-child(1):hover .instagram {
  fill: white;
}

.card:nth-child(2):hover {
  background-color: #03a9f4;
}

.card:nth-child(2):hover .twitter {
  fill: white;
}

.card:nth-child(3):hover {
  background-color: #ffb5d2;
}

.card:nth-child(3):hover .dribble {
  fill: white;
}

.card:nth-child(4):hover {
  background-color: #1e1f26;
}

.card:nth-child(4):hover .codepen {
  fill: white;
}

.card:nth-child(5):hover {
  animation: backgroundIMG 0.1s;
  animation-fill-mode: forwards;
}

.card:nth-child(5):hover .uiverse #paint0_linear_501_142 stop {
  stop-color: white;
}

.card:nth-child(5):hover .uiverse #paint1_linear_501_142 stop {
  stop-color: white;
}

.card:nth-child(5):hover .uiverse #paint2_linear_501_142 stop {
  stop-color: white;
}

@keyframes backgroundIMG {
  100% {
    background-image: linear-gradient(#bf66ff, #6248ff, #00ddeb);
  }
}

.card:nth-child(6):hover {
  background-color: #8c9eff;
}

.card:nth-child(6):hover .discord {
  fill: white;
}

.card:nth-child(7):hover {
  background-color: black;
}

.card:nth-child(7):hover .github {
  fill: white;
}

.card:nth-child(8):hover {
  background-color: #29b6f6;
}

.card:nth-child(8):hover .telegram > path:nth-of-type(1) {
  fill: white;
}

.card:nth-child(8):hover .telegram > path:nth-of-type(2) {
  fill: #29b6f6;
}

.card:nth-child(8):hover .telegram > path:nth-of-type(3) {
  fill: #29b6f6;
}

.card:nth-child(9):hover {
  background-color: rgb(255, 69, 0);
}

.card:nth-child(9) .reddit > g circle {
  fill: rgb(255, 69, 0);
}

.card:nth-child(9) .reddit > g path {
  fill: white;
}

.text {
  position: absolute;
  font-size: 0.7em;
  transition: 0.4s ease-in-out;
  color: black;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.33em;
  z-index: 3;
}

</style>
    

================================================
FILE: Buttons/Pradeepsaranbishnoi_dull-mole-49.html
================================================
<div class="voltage-button">
  
  <button>Button</button>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 234.6 61.3" preserveAspectRatio="none" xml:space="preserve">
 
    <filter id="glow">
      <feGaussianBlur class="blur" result="coloredBlur" stdDeviation="2"></feGaussianBlur>
      <feTurbulence type="fractalNoise" baseFrequency="0.075" numOctaves="0.3" result="turbulence"></feTurbulence>
  <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="30" xChannelSelector="R" yChannelSelector="G" result="displace"></feDisplacementMap>
      <feMerge>
        <feMergeNode in="coloredBlur"></feMergeNode>
        <feMergeNode in="coloredBlur"></feMergeNode>
        <feMergeNode in="coloredBlur"></feMergeNode>
        <feMergeNode in="displace"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
    <path class="voltage line-1" d="m216.3 51.2c-3.7 0-3.7-1.1-7.3-1.1-3.7 0-3.7 6.8-7.3 6.8-3.7 0-3.7-4.6-7.3-4.6-3.7 0-3.7 3.6-7.3 3.6-3.7 0-3.7-0.9-7.3-0.9-3.7 0-3.7-2.7-7.3-2.7-3.7 0-3.7 7.8-7.3 7.8-3.7 0-3.7-4.9-7.3-4.9-3.7 0-3.7-7.8-7.3-7.8-3.7 0-3.7-1.1-7.3-1.1-3.7 0-3.7 3.1-7.3 3.1-3.7 0-3.7 10.9-7.3 10.9-3.7 0-3.7-12.5-7.3-12.5-3.7 0-3.7 4.6-7.3 4.6-3.7 0-3.7 4.5-7.3 4.5-3.7 0-3.7 3.6-7.3 3.6-3.7 0-3.7-10-7.3-10-3.7 0-3.7-0.4-7.3-0.4-3.7 0-3.7 2.3-7.3 2.3-3.7 0-3.7 7.1-7.3 7.1-3.7 0-3.7-11.2-7.3-11.2-3.7 0-3.7 3.5-7.3 3.5-3.7 0-3.7 3.6-7.3 3.6-3.7 0-3.7-2.9-7.3-2.9-3.7 0-3.7 8.4-7.3 8.4-3.7 0-3.7-14.6-7.3-14.6-3.7 0-3.7 5.8-7.3 5.8-2.2 0-3.8-0.4-5.5-1.5-1.8-1.1-1.8-2.9-2.9-4.8-1-1.8 1.9-2.7 1.9-4.8 0-3.4-2.1-3.4-2.1-6.8s-9.9-3.4-9.9-6.8 8-3.4 8-6.8c0-2.2 2.1-2.4 3.1-4.2 1.1-1.8 0.2-3.9 2-5 1.8-1 3.1-7.9 5.3-7.9 3.7 0 3.7 0.9 7.3 0.9 3.7 0 3.7 6.7 7.3 6.7 3.7 0 3.7-1.8 7.3-1.8 3.7 0 3.7-0.6 7.3-0.6 3.7 0 3.7-7.8 7.3-7.8h7.3c3.7 0 3.7 4.7 7.3 4.7 3.7 0 3.7-1.1 7.3-1.1 3.7 0 3.7 11.6 7.3 11.6 3.7 0 3.7-2.6 7.3-2.6 3.7 0 3.7-12.9 7.3-12.9 3.7 0 3.7 10.9 7.3 10.9 3.7 0 3.7 1.3 7.3 1.3 3.7 0 3.7-8.7 7.3-8.7 3.7 0 3.7 11.5 7.3 11.5 3.7 0 3.7-1.4 7.3-1.4 3.7 0 3.7-2.6 7.3-2.6 3.7 0 3.7-5.8 7.3-5.8 3.7 0 3.7-1.3 7.3-1.3 3.7 0 3.7 6.6 7.3 6.6s3.7-9.3 7.3-9.3c3.7 0 3.7 0.2 7.3 0.2 3.7 0 3.7 8.5 7.3 8.5 3.7 0 3.7 0.2 7.3 0.2 3.7 0 3.7-1.5 7.3-1.5 3.7 0 3.7 1.6 7.3 1.6s3.7-5.1 7.3-5.1c2.2 0 0.6 9.6 2.4 10.7s4.1-2 5.1-0.1c1 1.8 10.3 2.2 10.3 4.3 0 3.4-10.7 3.4-10.7 6.8s1.2 3.4 1.2 6.8 1.9 3.4 1.9 6.8c0 2.2 7.2 7.7 6.2 9.5-1.1 1.8-12.3-6.5-14.1-5.5-1.7 0.9-0.1 6.2-2.2 6.2z" fill="transparent" stroke="#fff"></path>
    <path class="voltage line-2" d="m216.3 52.1c-3 0-3-0.5-6-0.5s-3 3-6 3-3-2-6-2-3 1.6-6 1.6-3-0.4-6-0.4-3-1.2-6-1.2-3 3.4-6 3.4-3-2.2-6-2.2-3-3.4-6-3.4-3-0.5-6-0.5-3 1.4-6 1.4-3 4.8-6 4.8-3-5.5-6-5.5-3 2-6 2-3 2-6 2-3 1.6-6 1.6-3-4.4-6-4.4-3-0.2-6-0.2-3 1-6 1-3 3.1-6 3.1-3-4.9-6-4.9-3 1.5-6 1.5-3 1.6-6 1.6-3-1.3-6-1.3-3 3.7-6 3.7-3-6.4-6-6.4-3 2.5-6 2.5h-6c-3 0-3-0.6-6-0.6s-3-1.4-6-1.4-3 0.9-6 0.9-3 4.3-6 4.3-3-3.5-6-3.5c-2.2 0-3.4-1.3-5.2-2.3-1.8-1.1-3.6-1.5-4.6-3.3s-4.4-3.5-4.4-5.7c0-3.4 0.4-3.4 0.4-6.8s2.9-3.4 2.9-6.8-0.8-3.4-0.8-6.8c0-2.2 0.3-4.2 1.3-5.9 1.1-1.8 0.8-6.2 2.6-7.3 1.8-1 5.5-2 7.7-2 3 0 3 2 6 2s3-0.5 6-0.5 3 5.1 6 5.1 3-1.1 6-1.1 3-5.6 6-5.6 3 4.8 6 4.8 3 0.6 6 0.6 3-3.8 6-3.8 3 5.1 6 5.1 3-0.6 6-0.6 3-1.2 6-1.2 3-2.6 6-2.6 3-0.6 6-0.6 3 2.9 6 2.9 3-4.1 6-4.1 3 0.1 6 0.1 3 3.7 6 3.7 3 0.1 6 0.1 3-0.6 6-0.6 3 0.7 6 0.7 3-2.2 6-2.2 3 4.4 6 4.4 3-1.7 6-1.7 3-4 6-4 3 4.7 6 4.7 3-0.5 6-0.5 3-0.8 6-0.8 3-3.8 6-3.8 3 6.3 6 6.3 3-4.8 6-4.8 3 1.9 6 1.9 3-1.9 6-1.9 3 1.3 6 1.3c2.2 0 5-0.5 6.7 0.5 1.8 1.1 2.4 4 3.5 5.8 1 1.8 0.3 3.7 0.3 5.9 0 3.4 3.4 3.4 3.4 6.8s-3.3 3.4-3.3 6.8 4 3.4 4 6.8c0 2.2-6 2.7-7 4.4-1.1 1.8 1.1 6.7-0.7 7.7-1.6 0.8-4.7-1.1-6.8-1.1z" fill="transparent" stroke="#fff"></path>
  </svg>
  <div class="dots">
    <div class="dot dot-1"></div>
    <div class="dot dot-2"></div>
    <div class="dot dot-3"></div>
    <div class="dot dot-4"></div>
    <div class="dot dot-5"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: button */
.voltage-button {
  position: relative;
}

.voltage-button button {
  color: white;
  background: #0D1127;
  padding: 1rem 3rem 1rem 3rem;
  border-radius: 5rem;
  border: 5px solid #5978F3;
  font-size: 1.2rem;
  line-height: 1em;
  letter-spacing: 0.075em;
  transition: background 0.3s;
}

.voltage-button button:hover {
  cursor: pointer;
  background: #0F1C53;
}

.voltage-button button:hover + svg, .voltage-button button:hover + svg + .dots {
  opacity: 1;
}

.voltage-button svg {
  display: block;
  position: absolute;
  top: -0.75em;
  left: -0.25em;
  width: calc(100% + 0.5em);
  height: calc(100% + 1.5em);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  transition-delay: 0.1s;
}

.voltage-button svg path {
  stroke-dasharray: 100;
  filter: url("#glow");
}

.voltage-button svg path.line-1 {
  stroke: #f6de8d;
  stroke-dashoffset: 0;
  animation: spark-1 3s linear infinite;
}

.voltage-button svg path.line-2 {
  stroke: #6bfeff;
  stroke-dashoffset: 500;
  animation: spark-2 3s linear infinite;
}

.voltage-button .dots {
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: 0.4s;
}

.voltage-button .dots .dot {
  width: 1rem;
  height: 1rem;
  background: white;
  border-radius: 100%;
  position: absolute;
  opacity: 0;
}

.voltage-button .dots .dot-1 {
  top: 0;
  left: 20%;
  animation: fly-up 3s linear infinite;
}

.voltage-button .dots .dot-2 {
  top: 0;
  left: 55%;
  animation: fly-up 3s linear infinite;
  animation-delay: 0.5s;
}

.voltage-button .dots .dot-3 {
  top: 0;
  left: 80%;
  animation: fly-up 3s linear infinite;
  animation-delay: 1s;
}

.voltage-button .dots .dot-4 {
  bottom: 0;
  left: 30%;
  animation: fly-down 3s linear infinite;
  animation-delay: 2.5s;
}

.voltage-button .dots .dot-5 {
  bottom: 0;
  left: 65%;
  animation: fly-down 3s linear infinite;
  animation-delay: 1.5s;
}

@keyframes spark-1 {
  to {
    stroke-dashoffset: -1000;
  }
}

@keyframes spark-2 {
  to {
    stroke-dashoffset: -500;
  }
}

@keyframes fly-up {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.2);
  }

  5% {
    opacity: 1;
    transform: translateY(-1.5rem) scale(0.4);
  }

  10%, 100% {
    opacity: 0;
    transform: translateY(-3rem) scale(0.2);
  }
}

@keyframes fly-down {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.2);
  }

  5% {
    opacity: 1;
    transform: translateY(1.5rem) scale(0.4);
  }

  10%, 100% {
    opacity: 0;
    transform: translateY(3rem) scale(0.2);
  }
}

</style>


================================================
FILE: Buttons/Pradeepsaranbishnoi_itchy-seahorse-91.html
================================================
<div class="container">
		<div class="btn"><a href="#">Read more</a></div>
	
	</div>		
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: glassmorphism, button, glow */
.container .btn {
  position: relative;
  top: 0;
  left: 0;
  width: 160px;
  height: 50px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .btn a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 10px;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  color: #000;
  font-weight: 400px;
  z-index: 1;
  transition: 0.5s;
  backdrop-filter: blur(15px);
}

.container .btn:hover a {
  letter-spacing: 3px;
}

.container .btn a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(45deg) translate(0);
  transition: 0.5s;
  filter: blur(0px);
}

.container .btn:hover a::before {
  transform: skewX(45deg) translate(200px);
}

.container .btn::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  bottom: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.5;
}

.container .btn:hover::before /*lightup button*/ {
  bottom: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
}

.container .btn::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  top: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.5;
}

.container .btn:hover::after /*lightup button*/ {
  top: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
}

.container .btn:nth-child(1)::before, /*chnage 1*/
.container .btn:nth-child(1)::after {
  background: #ff1f71;
  box-shadow: 0 0 5px #ff1f71, 0 0 15px #ff1f71, 0 0 30px #ff1f71,
		0 0 60px #ff1f71;
}
</style>


================================================
FILE: Buttons/Pradeepsaranbishnoi_jolly-robin-0.html
================================================
<div class="container">
  <div class="toggle">
    <input type="checkbox">
    <span class="button"></span>
    <span class="label">☼</span>
  </div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: simple, neumorphism, skeuomorphism, 3d, button */
.toggle {
  display: inline-block;
}

.toggle {
  position: relative;
  height: 100px;
  width: 100px;
}

.toggle:before {
  box-shadow: 0;
  border-radius: 84.5px;
  background: #fff;
  position: absolute;
  margin-left: -36px;
  margin-top: -36px;
  opacity: 0.2;
  height: 72px;
  width: 72px;
  left: 50%;
  top: 50%;
}

.toogle input:checked~.label {
  color: rgba(255,0,0,0.8);
}

.toggle .button {
  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5), inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 0 20px 30px 0 rgba(255, 255, 255, 0.2);
  border-radius: 68.8px;
  position: absolute;
  background: #eaeaea;
  margin-left: -34.4px;
  margin-top: -34.4px;
  display: block;
  height: 68.8px;
  width: 68.8px;
  left: 50%;
  top: 50%;
}

.toggle .label {
  transition: color 300ms ease-out;
  line-height: 101px;
  text-align: center;
  position: absolute;
  font-weight: 700;
  font-size: 28px;
  display: block;
  opacity: 0.9;
  height: 100%;
  width: 100%;
  color: rgba(0, 0, 0, 0.9);
}

.toggle input {
  opacity: 0;
  position: absolute;
  cursor: pointer;
  z-index: 1;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.toggle input:active ~ .button {
  filter: blur(0.5px);
  box-shadow: 0 12px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 30px 1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 25px 0 rgba(0, 0, 0, 0.4), inset 0 0 10px 1px rgba(255, 255, 255, 0.6);
}

.toggle input:active ~ .label {
  font-size: 26px;
  color: rgba(0, 0, 0, 0.45);
}

.toggle input:checked ~ .button {
  filter: blur(0.5px);
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 20px 0 rgba(0, 0, 0, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.6);
}

.toggle input:checked ~ .label {
  color: rgba(0, 0, 0, 0.8);
}

</style>


================================================
FILE: Buttons/Pradeepsaranbishnoi_jolly-sloth-57.html
================================================
<div class="button-container">
  <svg tabindex="0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100" height="25%" width="25%">
  <rect fill="#763AC2" height="8" width="90.62" y="51" x="5.04999" class="buttonSides"></rect>
  <rect fill="#763AC2" transform="matrix(0.866025 -0.5 0.866025 0.5 1 59)" rx="8" height="57" width="57" class="buttonSides"></rect>
  <g clip-path="url(#clip0_106_11)">
    <rect fill="#A661FF" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57" class="buttonTop"></rect>
    <path fill="#763AC2" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z" class="buttonSides playSides"></path>
    <g filter="url(#filter0_d_106_11)" class="glowAll">
      <path fill="white" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z"></path>
    </g>
    <g filter="url(#filter1_f_106_11)" opacity="0.5" class="glowMe">
      <path fill="white" d="M73.0478 36.9032L58.6665 67.8905L19.3761 45.2062L73.0478 36.9032Z"></path>
    </g>
  </g>
  <path fill="url(#paint0_linear_106_11)" d="M64 43L32 47.8L32 8L64 8L64 43Z" opacity="0.5" class="glowMe"></path>
  <defs>
    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="34.9282" width="48.7846" y="34.5" x="23.4353" id="filter0_d_106_11">
      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
      <feColorMatrix result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" type="matrix" in="SourceAlpha"></feColorMatrix>
      <feOffset></feOffset>
      <feGaussianBlur stdDeviation="4"></feGaussianBlur>
      <feComposite operator="out" in2="hardAlpha"></feComposite>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix"></feColorMatrix>
      <feBlend result="effect1_dropShadow_106_11" in2="BackgroundImageFix" mode="normal"></feBlend>
      <feBlend result="shape" in2="effect1_dropShadow_106_11" in="SourceGraphic" mode="normal"></feBlend>
    </filter>
    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="62.9873" width="85.6716" y="20.9032" x="3.37613" id="filter1_f_106_11">
      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
      <feBlend result="shape" in2="BackgroundImageFix" in="SourceGraphic" mode="normal"></feBlend>
      <feGaussianBlur result="effect1_foregroundBlur_106_11" stdDeviation="8"></feGaussianBlur>
    </filter>
    <linearGradient gradientUnits="userSpaceOnUse" y2="8" x2="47" y1="48" x1="47" id="paint0_linear_106_11">
      <stop stop-color="white"></stop>
      <stop stop-opacity="0" stop-color="white" offset="1"></stop>
    </linearGradient>
    <clipPath id="clip0_106_11">
      <rect fill="white" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57"></rect>
    </clipPath>
  </defs>
</svg>

<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100" height="25%" width="25%">
  <rect fill="#763AC2" height="8" width="90.62" y="51" x="5.04999" class="buttonSides"></rect>
  <rect fill="#763AC2" transform="matrix(0.866025 -0.5 0.866025 0.5 1 59)" rx="8" height="57" width="57" class="buttonSides"></rect>
  <g clip-path="url(#clip0_106_11)">
    <rect fill="#A661FF" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57" class="buttonTop"></rect>
    <path fill="#763AC2" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z" class="buttonSides playSides"></path>
    <g filter="url(#filter0_d_106_11)" class="glowAll">
      <path fill="white" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z"></path>
    </g>
    <g filter="url(#filter1_f_106_11)" opacity="0.5" class="glowMe">
      <path fill="white" d="M73.0478 36.9032L58.6665 67.8905L19.3761 45.2062L73.0478 36.9032Z"></path>
    </g>
  </g>
  <path fill="url(#paint0_linear_106_11)" d="M64 43L32 47.8L32 8L64 8L64 43Z" opacity="0.5" class="glowMe"></path>
  <defs>
    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="34.9282" width="48.7846" y="34.5" x="23.4353" id="filter0_d_106_11">
      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
      <feColorMatrix result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" type="matrix" in="SourceAlpha"></feColorMatrix>
      <feOffset></feOffset>
      <feGaussianBlur stdDeviation="4"></feGaussianBlur>
      <feComposite operator="out" in2="hardAlpha"></feComposite>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix"></feColorMatrix>
      <feBlend result="effect1_dropShadow_106_11" in2="BackgroundImageFix" mode="normal"></feBlend>
      <feBlend result="shape" in2="effect1_dropShadow_106_11" in="SourceGraphic" mode="normal"></feBlend>
    </filter>
    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="62.9873" width="85.6716" y="20.9032" x="3.37613" id="filter1_f_106_11">
      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
      <feBlend result="shape" in2="BackgroundImageFix" in="SourceGraphic" mode="normal"></feBlend>
      <feGaussianBlur result="effect1_foregroundBlur_106_11" stdDeviation="8"></feGaussianBlur>
    </filter>
    <linearGradient gradientUnits="userSpaceOnUse" y2="8" x2="47" y1="48" x1="47" id="paint0_linear_106_11">
      <stop stop-color="white"></stop>
      <stop stop-opacity="0" stop-color="white" offset="1"></stop>
    </linearGradient>
    <clipPath id="clip0_106_11">
      <rect fill="white" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57"></rect>
    </clipPath>
  </defs>
</svg>

<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100" height="25%" width="25%">
  <rect fill="#763AC2" height="8" width="90.62" y="51" x="5.04999" class="buttonSides"></rect>
  <rect fill="#763AC2" transform="matrix(0.866025 -0.5 0.866025 0.5 1 59)" rx="8" height="57" width="57" class="buttonSides"></rect>
  <g clip-path="url(#clip0_106_11)">
    <rect fill="#A661FF" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57" class="buttonTop"></rect>
    <path fill="#763AC2" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z" class="buttonSides playSides"></path>
    <g filter="url(#filter0_d_106_11)" class="glowAll">
      <path fill="white" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z"></path>
    </g>
    <g filter="url(#filter1_f_106_11)" opacity="0.5" class="glowMe">
      <path fill="white" d="M73.0478 36.9032L58.6665 67.8905L19.3761 45.2062L73.0478 36.9032Z"></path>
    </g>
  </g>
  <path fill="url(#paint0_linear_106_11)" d="M64 43L32 47.8L32 8L64 8L64 43Z" opacity="0.5" class="glowMe"></path>
  <defs>
    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="34.9282" width="48.7846" y="34.5" x="23.4353" id="filter0_d_106_11">
      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
      <feColorMatrix result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" type="matrix" in="SourceAlpha"></feColorMatrix>
      <feOffset></feOffset>
      <feGaussianBlur stdDeviation="4"></feGaussianBlur>
      <feComposite operator="out" in2="hardAlpha"></feComposite>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix"></feColorMatrix>
      <feBlend result="effect1_dropShadow_106_11" in2="BackgroundImageFix" mode="normal"></feBlend>
      <feBlend result="shape" in2="effect1_dropShadow_106_11" in="SourceGraphic" mode="normal"></feBlend>
    </filter>
    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="62.9873" width="85.6716" y="20.9032" x="3.37613" id="filter1_f_106_11">
      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
      <feBlend result="shape" in2="BackgroundImageFix" in="SourceGraphic" mode="normal"></feBlend>
      <feGaussianBlur result="effect1_foregroundBlur_106_11" stdDeviation="8"></feGaussianBlur>
    </filter>
    <linearGradient gradientUnits="userSpaceOnUse" y2="8" x2="47" y1="48" x1="47" id="paint0_linear_106_11">
      <stop stop-color="white"></stop>
      <stop stop-opacity="0" stop-color="white" offset="1"></stop>
    </linearGradient>
    <clipPath id="clip0_106_11">
      <rect fill="white" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57"></rect>
    </clipPath>
  </defs>
</svg>
</div>

<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: button */
.glowMe,
.glowAll {
  opacity: 0;
  transition: opacity 300ms linear 0s;
}

.button-container svg {
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.button-container svg:hover .glowMe {
  opacity: 0.5;
}

.button-container svg:hover .glowAll {
  opacity: 1;
}

.button-container .buttonTop {
  fill: #5f309b;
  transition: fill 300ms linear 0s;
}

.button-container svg:hover .buttonTop {
  fill: #a661ff;
}

.button-container .buttonSides {
  fill: #371b5b;
  transition: fill 300ms linear 0s;
}

.button-container svg:hover .buttonSides {
  fill: #763ac2;
}

.button-container svg:focus {
  outline: none;
}

.button-container svg:focus .buttonTop,
.button-container svg:focus .playSides {
  stroke: white;
  stroke-width: 2px;
}

.button-container svg:focus .playSides {
  stroke-width: 1px;
}

.button-container svg:active .buttonTop {
  fill: #c79cff;
}

.button-container svg:nth-of-type(1) {
  transform: translate(37%, -35%);
}

.button-container svg:nth-of-type(3) {
  transform: translate(-37%, 35%);
}

</style>


================================================
FILE: Buttons/Pradeepsaranbishnoi_nice-earwig-94.html
================================================
<div class="social-links">
		<div id="twitter" class="social-btn flex-center">
			<svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg><span>@example</span>
		</div>
	
		<div id="linkedin" class="social-btn flex-center">
			<svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"></path></svg><span>in/example</span>
		</div>

		<div id="github" class="social-btn flex-center">
			<svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg><span>example</span>
	</div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: button */
.social-links,.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-btn {
  cursor: pointer;
  height: 50px;
  width: 50px;
  font-family: 'Titillium Web', sans-serif;
  color: #333;
  border-radius: 10px;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  background: white;
  margin: 5px;
  transition: 0.3s;
  justify-content: center;
}

.social-btn svg {
  height: 24px;
  width: 24px;
}

.social-btn span {
  width: 0px;
  overflow: hidden;
  transition: 0.3s;
  text-align: center;
  margin-left: 5px;
}

.social-btn:hover {
  width: 150px;
  border-radius: 5px;
}

.social-btn:hover span {
  padding: 2px;
  width: 80px;
}

#twitter svg {
  fill: #1da1f2;
}

#linkedin svg {
  fill: #0e76a8;
}

#github {
  fill: #333;
}

</style>


================================================
FILE: Buttons/Pradeepsaranbishnoi_spotty-chipmunk-79.html
================================================
<input id="c" type="checkbox">
<label id="upload_app" for="c">
  <div id="app">
    <div id="arrow"></div>
    <div id="success">
      <i class="fas fa-check-circle"></i>
    </div>
  </div>
</label>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: button */
#c {
  display: none;
}

#upload_app {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 120px;
  height: 42px;
  transform: translateY(-50%);
  transition: 0.3s ease width;
  cursor: pointer;
}

#app {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  border: 2px solid #143240;
  overflow: hidden;
  z-index: 2;
}

#app:before {
  content: "Upload";
  position: absolute;
  top: 0;
  right: 0;
  padding: 12px;
  left: 0;
  color: #143240;
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  z-index: 1;
}

#arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 38px;
  background-color: #fff;
  z-index: 2;
}

#arrow:before,
#arrow:after {
  content: "";
  position: absolute;
  top: 18px;
  width: 10px;
  height: 2px;
  background-color: #143240;
}

#arrow:before {
  right: 17px;
  transform: rotateZ(-45deg);
}

#arrow:after {
  right: 11px;
  transform: rotateZ(45deg);
}

#success {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  margin: -8px;
  background-color: #143240;
  transform: scale(0);
  border-radius: 50%;
  z-index: 3;
}

#success i {
  font-size: 20px;
  color: #fff;
  display: block;
  width: 20px;
  height: 20px;
  margin: 17px auto;
  transform: scale(0);
}

#c:checked + #upload_app {
  width: 42px;
}

#c:checked + #upload_app #arrow:before {
  animation: _a 0.4s ease 0.4s forwards, _incHeight 4s ease 1s forwards;
}

#c:checked + #upload_app #arrow:after {
  animation: _b 0.4s ease 0.4s forwards, _incHeight 4s ease 1s forwards;
}

#c:checked + #upload_app #success {
  animation: _success 0.4s cubic-bezier(0, 0.74, 0.32, 1.21) 5s forwards;
}

#c:checked + #upload_app #success i {
  animation: _success 0.3s cubic-bezier(0, 0.74, 0.32, 1.21) 5.2s forwards;
}

@keyframes _a {
  0% {
    top: 18px;
    right: 17px;
    width: 10px;
    transform: rotateZ(-45deg);
    background-color: #143240;
  }

  100% {
    top: 36px;
    right: 19px;
    width: 19px;
    transform: rotateZ(0deg);
    background-color: #ffc107;
  }
}

@keyframes _b {
  0% {
    top: 18px;
    right: 11px;
    width: 10px;
    transform: rotateZ(45deg);
    background-color: #143240;
  }

  100% {
    top: 36px;
    right: 0;
    width: 19px;
    transform: rotateZ(0deg);
    background-color: #ffc107;
  }
}

@keyframes _incHeight {
  0% {
    top: 36px;
    height: 2px;
  }

  25% {
    top: 31px;
    height: 8px;
  }

  50% {
    top: 21px;
    height: 18px;
  }

  80% {
    top: 11px;
    height: 28px;
  }

  100% {
    top: 0;
    height: 39px;
  }
}

@keyframes _success {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

</style>


================================================
FILE: Buttons/Pradeepsaranbishnoi_wet-donkey-50.html
================================================
<div class="mybutton">
<button class="button" type="button">
   <span>Hello 😊</span>
</button>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: button, claymorphism, emoji */
.mybutton {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  all: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: .5em;
  position: relative;
  border-radius: 50px;
  padding: 16px 24px;
  background-color: #f0f7fa;
  box-shadow: inset 0 -4px 8px #87bfd8, 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  color: #0470e3;
  transition: transform 0.4s cubic-bezier(0.55, 1, 0.15, 1);
  will-change: transform;
}

.button:active {
  transform: scale(0.92);
}

.button:active::after {
  opacity: 1;
  outline: none;
  border: 0;
}

.button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-image-slice: 50%;
  border-image-width: 40px;
  border-style: solid;
  transform: scale(1.04, 1.08);
  opacity: 0;
  border: 0;
  transition-property: opacity;
  transition-duration: .4s;
  transition-timing-function: cubic-bezier(0.55, 1, 0.15, 1);
  will-change: transform;
}

</style>


================================================
FILE: Buttons/PranabKumarSahoo_popular-fish-62.html
================================================
<button>
  <span>Button</span>
</button>
<style>
/* From Uiverse.io by PranabKumarSahoo - Tags: button */
button {
  display: inline-block;
  border-radius: 4px;
  background-color: #560af0;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  padding: 16px;
  width: 130px;
  transition: all 0.2s;
  cursor: pointer;
  margin: 5px;
}

button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.2s;
}

button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -15px;
  transition: 0.2s;
}

button:hover span {
  padding-right: 15px;
}

button:hover span:after {
  opacity: 1;
  right: 0;
}

button:hover {
  color: #560af0;
  background-color: #FFFFFF;
  box-shadow: 4px 5px 17px -4px #560af0;
}
</style>


================================================
FILE: Buttons/PriyanshuGupta28_brave-mole-100.html
================================================
   <button class="pushable">
      <span class="shadow"></span>
      <span class="edge"></span>
      <span class="front">
        Push Me
      </span>
    </button>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: simple, button, css effect, click animation, buttons, bounce animation, 3d button, 2d button */
.pushable {
  position: relative;
  background: transparent;
  padding: 0px;
  border: none;
  cursor: pointer;
  outline-offset: 4px;
  outline-color: deeppink;
  transition: filter 250ms;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: hsl(226, 25%, 69%);
  border-radius: 8px;
  filter: blur(2px);
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.edge {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(
    to right,
    hsl(248, 39%, 39%) 0%,
    hsl(248, 39%, 49%) 8%,
    hsl(248, 39%, 39%) 92%,
    hsl(248, 39%, 29%) 100%
  );
}

.front {
  display: block;
  position: relative;
  border-radius: 8px;
  background: hsl(248, 53%, 58%);
  padding: 16px 32px;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1rem;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.pushable:hover {
  filter: brightness(110%);
}

.pushable:hover .front {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.pushable:active .front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.pushable:hover .shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.pushable:active .shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

.pushable:focus:not(:focus-visible) {
  outline: none;
}

</style>


================================================
FILE: Buttons/PriyanshuGupta28_modern-snail-2.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: button, 3d button, cool button, button hover effect , smooth effect , smooth button */
.button {
  display: inline-block;
  padding: 15px 30px;
  background: linear-gradient(45deg, #00b5ff, #005eff);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(100%) rotateX(90deg);
  transition: transform 0.3s ease-in-out;
}

.button:hover::before {
  transform: translateY(0) rotateX(0);
}

.button::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  border-radius: 15px;
  border: 1px solid #00b5ff;
  z-index: -1;
}

    /* Hover Effect */
.button:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

    /* Active Effect */
.button:active {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: scale(0.95);
}
</style>


================================================
FILE: Buttons/PriyanshuGupta28_nasty-wasp-10.html
================================================
<button class="custom-button">Click Me</button>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: button */
/* styles.css */

/* Reset default styles for the button */
button {
  border: none;
  outline: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Add a pseudo-element for the animation effect */
button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

/* Hover effect for the button */
button:hover::before {
  width: 100%;
}

/* Active effect for the button */
button:active::before {
  background-color: rgba(255, 255, 255, 0.4);
  transition: none;
  animation: ripple 0.4s ease;
}

/* Keyframes animation for the active effect */
@keyframes ripple {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

</style>


================================================
FILE: Buttons/PriyanshuGupta28_shaggy-wombat-39.html
================================================
<button role="button" class="button">Hover Me</button>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: button, hover effect, 3d button, cool button, glass button, onClick effect */
.button {
  all: unset;
  width: 100px;
  height: 30px;
  font-size: 16px;
  background: transparent;
  border: none;
  position: relative;
  color: #f0f0f0;
  cursor: pointer;
  z-index: 1;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: 0.3s ease-in-out;
}

.button:hover {
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.button::after,
.button::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -99999;
  transition: all .4s;
}

.button::before {
  transform: translate(0%, 0%);
  width: 100%;
  height: 100%;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  border-radius: 10px;
}

.button::after {
  transform: translate(10px, 10px);
  width: 35px;
  height: 35px;
  background: #6804da2f;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 50px;
}

.button:hover::before {
  transform: translate(5%, 20%);
  width: 110%;
  height: 110%;
}

.button:hover::after {
  border-radius: 10px;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
}

.button:active::after {
  transition: 0s;
  transform: translate(0, 5%);
}
</style>


================================================
FILE: Buttons/PriyanshuGupta28_short-horse-44.html
================================================
<button class="swipe-button">Hover Me</button>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: button, bootsrap button, button hover effect , 2d button */
.swipe-button {
  padding: 10px 20px;
  font-size: 18px;
  border: none;
  background: linear-gradient(45deg, #3498db, #e74c3c, #9b59b6, #2ecc71);
  background-size: 200% 200%;
  background-position: 0 0;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background-position 0.5s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.swipe-button:hover {
  background-position: 100% 100%;
  transform: scale(1.05);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}

.swipe-button:active {
  transform: translateY(2px);
  color: #fff;
 /* Change text color when active */
}

</style>


================================================
FILE: Buttons/PriyanshuGupta28_smooth-elephant-43.html
================================================
<button class="my-button">Click Me</button>

<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: gradient, button */
.my-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: white;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  transition: 0.2s ease-in-out;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.my-button:hover {
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.my-button:active {
  background-color: #00DBDE;
  background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
}

</style>


================================================
FILE: Buttons/PriyanshuGupta28_strong-warthog-30.html
================================================
<button class="btn">Click Me</button>

<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: button */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #4a5568;
  background-color: #4a5568;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: #fff;
  opacity: 0.2;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out;
}

.btn:hover {
  background-color: #fff;
  color: #4a5568;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.btn:hover::before {
  width: 200%;
  height: 200%;
}

</style>


================================================
FILE: Buttons/PriyanshuGupta28_wise-mule-92.html
================================================
<button class="btn"><span>鬼滅の刃</span></button>

<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: button */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  background-color: #f44336;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  z-index: -1;
}

.btn:hover {
  background-color: #fff;
  color: #f44336;
  text-shadow: 0 0 5px #f44336;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.btn span {
  display: inline-block;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.btn:hover span {
  transform: rotate(-10deg) scale(1.1);
}

</style>


================================================
FILE: Buttons/Progee45_lucky-turkey-67.html
================================================
<button class="custom-button">Click me</button>

<style>
/* From Uiverse.io by Progee45 - Tags: orange, button, animated, hover effect, fancy */
.custom-button {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  font-size: 18px;
  color: #fff;
  background-color: #ff8c00;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}

.custom-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 120%;
  background-color: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition: all 0.5s ease-in-out;
  transform: rotate(-45deg) translate(-50%, -50%);
  z-index: -1;
}

.custom-button:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translate(-50%, -50%) scale(1.2);
}

.custom-button span {
  position: relative;
  z-index: 2;
}

.custom-button:hover {
  background-color: #ff5722;
}

</style>


================================================
FILE: Buttons/Progee45_nice-bobcat-8.html
================================================
  <button class="fancy-button">Click Me!</button>

<style>
/* From Uiverse.io by Progee45 - Tags: button, animated */
.fancy-button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  background-color: #ff4081;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}

.fancy-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  transform: skewX(-30deg);
  transition: left 0.3s ease-in-out;
}

.fancy-button:hover {
  transform: scale(1.1);
}

.fancy-button:hover:before {
  left: 100%;
}
</style>


================================================
FILE: Buttons/Programming-School-Pro-Coding_polite-frog-59.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by Programming-School-Pro-Coding - Tags: button */
button {
  --c1: #f6d365;
  --c2: #fda085;
  padding: 15px 30px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background: linear-gradient(90deg, var(--c1, #f6d365), var(--c2, #fda085) 51%, var(--c1, #f6d365)) var(--x, 0)/ 200%;
  color: white;
  border-radius: 20px;
  outline: none;
}

button:hover {
  --x: 100%;
}
</style>


================================================
FILE: Buttons/Pruthvirajmunde_great-cheetah-48.html
================================================
<button class="button">Hire Me</button>

<style>
/* From Uiverse.io by Pruthvirajmunde  - Tags: simple, button, smooth */
.button {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: rgb(153, 174, 187);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffff;
  gap: 10px;
  font-weight: bold;
  border: 3px solid #ffffff4d;
  outline: none;
  overflow: hidden;
  font-size: 15px;
}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  transform: scale(1.05);
  border-color: #fff9;
}

.button:hover .icon {
  transform: translate(4px);
}

.button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}

</style>
    

================================================
FILE: Buttons/Quezaquo_great-ladybug-7.html
================================================
<div class="container">
        <button class="btn">
          <div class="btn-text default">EXPLORE..</div>
          <div class="btn-text active">LAUNCH..</div>
          <div class="spaceship1">
            <svg viewBox="0 0 24 24" height="22" width="22" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32a.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zM12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6z" fill="currentColor"></path>
            </svg>
          </div>
          <div class="spaceship2">
            <svg viewBox="0 0 24 24" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32a.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zM12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6z" fill="currentColor"></path>
            </svg>
          </div>
        </button>
        <div class="spaceship3">
            <svg viewBox="0 0 24 24" height="40" width="40" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32a.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zM12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6z" fill="currentColor"></path>
            </svg>
        </div>
    </div>
<style>
/* From Uiverse.io by Quezaquo - Tags: button */
.active {
  opacity: 0;
  position: absolute;
}

.btn {
  all: unset;
  background: rgb(25,24,37);
  background: linear-gradient(123deg, rgba(25,24,37,1) 0%, rgba(48,30,103,1) 51%, rgba(134,93,255,1) 82%, rgba(227,132,255,1) 100%);
  padding: 0.55em 0.15em 0.55em 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 0.5em;
}

.btn:hover {
  -webkit-box-shadow: -1px -1px 53px -15px rgba(255,255,255,0.75);
  box-shadow: -1px -1px 53px -15px rgba(255,255,255,0.75);
}

.btn:hover > .default {
  opacity: 0;
  position: absolute;
}

.btn:hover > .active {
  opacity: 1;
  position: relative;
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}

.btn:hover .spaceship1 {
  opacity: 0;
}

.btn:hover .spaceship2 {
  opacity: 0;
}

.btn:hover + .spaceship3 {
  opacity: 1;
}

.btn:hover::after {
  -webkit-animation: none;
  animation: none;
  display: none;
}

.btn::after {
  content: '';
  position: absolute;
  border: 3px solid white;
  border-radius: 0.5em;
  top: 43%;
  left: 50%;
  z-index: -1;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  -webkit-animation-name: halo;
  animation-name: halo;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.btn:active + .spaceship3 {
  -webkit-animation: lauch 1s ease-in forwards;
  animation: lauch 1s ease-in forwards;
}

.btn-text {
  color: white;
  font-weight: bold;
  letter-spacing: 0.6em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}

.spaceship1 {
  position: relative;
  z-index: 2;
  left: 1em;
  bottom: 0.8em;
  -webkit-animation: 10s float infinite;
  animation: 10s float infinite;
}

.spaceship2 {
  position: relative;
  z-index: 2;
  left: -14em;
  top: 1.5em;
  -webkit-animation: 7s float infinite;
  animation: 7s float infinite;
}

.spaceship3 {
  opacity: 0;
  position: relative;
  z-index: -1;
  top: -4.7em;
  left: 5.8em;
}

@keyframes float {
  0% {
    -webkit-transform: translatey(0px);
    transform: translatey(0px);
  }

  50% {
    -webkit-transform: translatey(-10px);
    transform: translatey(-10px);
  }

  100% {
    -webkit-transform: translatey(0px);
    transform: translatey(0px);
  }
}

@keyframes halo {
  from {
    opacity: 0.2;
    width: 0em;
    height: 0em;
  }

  to {
    opacity: 0;
    width: 23em;
    height: 3.55em;
  }
}

@keyframes lauch {
  from {
    -webkit-transform: translatey(0px);
    transform: translatey(0px);
    opacity: 1;
  }

  to {
    -webkit-transform: translatey(-110px);
    transform: translatey(-110px);
    opacity: 0;
  }
}
</style>


================================================
FILE: Buttons/R0G3RF4_hungry-termite-32.html
================================================
<button>
  <svg viewBox="0 0 16 16" class="bi bi-facebook" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path>
</svg>
    <span>Facebook</span>
</button>
<style>
/* From Uiverse.io by R0G3RF4 - Tags: facebook, button */
button {
  background: transparent;
  position: relative;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #0163E0;
  border-radius: 25px;
  outline: none;
  overflow: hidden;
  color: #0163E0;
  transition: color 0.3s 0.1s ease-out;
  text-align: center;
}

button svg {
  fill: #0163E0;
  height: 25px;
  width: 25px;
}

button span {
  margin: 10px;
}

button::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: '';
  border-radius: 50%;
  display: block;
  width: 20em;
  height: 20em;
  left: -5em;
  text-align: center;
  transition: box-shadow 0.5s ease-out;
  z-index: -1;
}

button:hover {
  color: #fff;
  border: 1px solid #0163E0;
}

button:hover svg {
  fill: currentColor;
}

button:hover::before {
  box-shadow: inset 0 0 0 10em #0163E0;
}
</style>


================================================
FILE: Buttons/Ramosspg_moody-rat-66.html
================================================
<!-- From Uiverse.io by Ramosspg - Tags: button, 2FA -->
<div class="flex text-white font-bold text-lg items-center rounded-full justify-center p-2 w-32 border border-[#773BEC] hover:bg-gradient-to-r from-violet-600 to-indigo-600 transition-all duration-75 ease-in-out cursor-pointer">
  <button>
    CLIQUE
  </button>
</div>



================================================
FILE: Buttons/Randdose_brown-grasshopper-46.html
================================================
<button class="button">
  <p>Button</p>
</button>
<style>
/* From Uiverse.io by Randdose - Tags: button, transition, transform */
.button {
  all: unset;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0.6em 2em;
  border: mediumspringgreen solid 0.15em;
  border-radius: 0.25em;
  color: mediumspringgreen;
  font-size: 1.5em;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: border 300ms, color 300ms;
  user-select: none;
}

.button p {
  z-index: 1;
}

.button:hover {
  color: #212121;
}

.button:active {
  border-color: teal;
}

.button::after, .button::before {
  content: "";
  position: absolute;
  width: 9em;
  aspect-ratio: 1;
  background: mediumspringgreen;
  opacity: 50%;
  border-radius: 50%;
  transition: transform 500ms, background 300ms;
}

.button::before {
  left: 0;
  transform: translateX(-8em);
}

.button::after {
  right: 0;
  transform: translateX(8em);
}

.button:hover:before {
  transform: translateX(-1em);
}

.button:hover:after {
  transform: translateX(1em);
}

.button:active:before,
.button:active:after {
  background: teal;
}
</style>


================================================
FILE: Buttons/RashadGhzi_green-sloth-90.html
================================================
<!-- From Uiverse.io by RashadGhzi  - Tags: simple, button, download, modern, hover button -->
<button
  class="group relative inline-flex items-center justify-center w-[50px] h-[50px] bg-gradient-to-r from-blue-500 to-green-500 text-white rounded-full shadow-lg transform scale-100 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-blue-300"
>
  <svg
    width="30px"
    height="30px"
    class="rotate-0 transition ease-out duration-300 scale-100 group-hover:-rotate-45 group-hover:scale-75"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
    <g
      id="SVGRepo_tracerCarrier"
      stroke-linecap="round"
      stroke-linejoin="round"
    ></g>
    <g id="SVGRepo_iconCarrier">
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M8 10C8 7.79086 9.79086 6 12 6C14.2091 6 16 7.79086 16 10V11H17C18.933 11 20.5 12.567 20.5 14.5C20.5 16.433 18.933 18 17 18H16.9C16.3477 18 15.9 18.4477 15.9 19C15.9 19.5523 16.3477 20 16.9 20H17C20.0376 20 22.5 17.5376 22.5 14.5C22.5 11.7793 20.5245 9.51997 17.9296 9.07824C17.4862 6.20213 15.0003 4 12 4C8.99974 4 6.51381 6.20213 6.07036 9.07824C3.47551 9.51997 1.5 11.7793 1.5 14.5C1.5 17.5376 3.96243 20 7 20H7.1C7.65228 20 8.1 19.5523 8.1 19C8.1 18.4477 7.65228 18 7.1 18H7C5.067 18 3.5 16.433 3.5 14.5C3.5 12.567 5.067 11 7 11H8V10ZM13 11C13 10.4477 12.5523 10 12 10C11.4477 10 11 10.4477 11 11V16.5858L9.70711 15.2929C9.31658 14.9024 8.68342 14.9024 8.29289 15.2929C7.90237 15.6834 7.90237 16.3166 8.29289 16.7071L11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071L15.7071 16.7071C16.0976 16.3166 16.0976 15.6834 15.7071 15.2929C15.3166 14.9024 14.6834 14.9024 14.2929 15.2929L13 16.5858V11Z"
        fill="#FFFFFF"
      ></path>
    </g>
  </svg>
</button>


    

================================================
FILE: Buttons/RaspberryBee_warm-mouse-87.html
================================================
<button class="button">
  Send
</button>
<style>
/* From Uiverse.io by RaspberryBee - Tags: send, button, rounded */
.button {
  height: 2em;
  width: 5em;
  border-radius: 1em;
  border: 0.1rem solid transparent;
  background-color: rgb(64, 146, 239);
  transition: 0.3s;
  font-size: 1em;
}

.button:hover {
  cursor: pointer;
  transform: scale(1.05) rotate(3deg);
}

.button:active {
  animation: borderMove 0.5s forwards;
  transform: scale(0.9) rotate(-3deg);
  background-color: rgb(0, 0, 0);
  color: rgb(64, 146, 239);
  border: 0.1rem solid rgb(38, 103, 224);
}

@keyframes borderMove {
  0% {
    border-width: 0.1rem;
    transform: scale(1) rotate(0deg);
  }

  50% {
    border-width: 0.4rem;
    transform: scale(0.9) rotate(-3deg);
  }

  100% {
    border-width: 0.15rem;
    transform: scale(1) rotate(0deg);
  }
}

</style>


================================================
FILE: Buttons/Ratinax_massive-tiger-88.html
================================================
<div class="container">
  <button class="button">
    Button
  </button>
</div>
<style>
/* From Uiverse.io by Ratinax - Tags: simple, red, button, active */
.container {
  position: relative;
  width: 4.5em;
  height: 4em;
  background-color: red;
  overflow: hidden;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  scale: 2;
  box-shadow: 0 .5em #AA1111;
}

.button {
  cursor: pointer;
  position: absolute;
  text-transform: uppercase;
  height: 110%;
  width: 110%;
  background-color: red;
  color: white;
  text-shadow: 0 0.1em 0.1em black;
}

.container:has(.button:active) {
  box-shadow: none;
  margin-top: 2em;
}

</style>


================================================
FILE: Buttons/Remelens_tasty-bobcat-17.html
================================================
<button class="button">Button</button>

<style>
/* From Uiverse.io by Remelens  - Tags: button, light, windows11 */
.button {
  display: inline-block;
  text-align: center;
  border: 0.9px solid #aaa;
  border-radius: 2.5px;
  background: #fff;
  cursor: pointer;
  color: #000;
  min-width: 80px;
  padding: 4px 0;
  margin: 0 5px;
  line-height: 20px;
  transition: all 0.2s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: Menlo, Monaco, Consolas, "Lucida Console", "Ubuntu Mono",
    "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", "SimHei";
}
.button:hover {
  border-color: #0078d4;
  background: #e0eef9;
  transition: all 0.2s;
}
.button:active {
  border-color: #005499;
  background: #cce4f7;
  transition: all 0.2s;
}

</style>
    

================================================
FILE: Buttons/Remon125_empty-squid-90.html
================================================
    <button class="btn-1">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      Button
    </button>
<style>
/* From Uiverse.io by Remon125 - Tags: #ColorfulButton, Button design */
/* Start Button 1 */
button {
  padding: 15px 60px;
  background: transparent;
  border: 2px solid #edff00;
  font-size: 15px;
  font-weight: bold;
  color: #ffffff;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  display: flex;
  overflow: hidden;
  transition: all 0.5s;
  text-transform: uppercase;
}

button:hover {
  color: #0c071e;
}

button span {
  transition: all 0.5s;
  z-index: -1;
}

button span:nth-child(1), 
button span:nth-child(2), 
button span:nth-child(3), 
button span:nth-child(4) {
  position: absolute;
  width: 100%;
  height: 15px;
  background-color: #edff00
}

button span:nth-child(1) {
  top: -100%;
  left: 0%;
  right: 0;
}

button:hover span:nth-child(1) {
  top: 0%;
}

button span:nth-child(2) {
  top: 10px;
  right: 100%;
}

button:hover span:nth-child(2) {
  right: 0;
}

button span:nth-child(3) {
  top: 20px;
  left: 100%;
  right: 0;
}

button:hover span:nth-child(3) {
  left: 0;
}

button span:nth-child(4) {
  bottom: -100%;
  left: 0;
}

button:hover span:nth-child(4) {
  bottom: 0;
}

/* End Button 1 */
</style>


================================================
FILE: Buttons/Remon125_perfect-shrimp-95.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by Remon125 - Tags: button, smooth button */
button {
  padding: 15px 60px;
  background: transparent;
  border: 2px solid #6528F7;
  font-size: 15px;
  font-weight: bold;
  color: #ffffff;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  display: flex;
  overflow: hidden;
  transition: all 0.5s;
  text-transform: uppercase;
}

button span {
  transition: all 0.5s;
  z-index: -1;
}

button::after,
button::before {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  background: #6528F7;
  top: 0;
  transform: skewX(35deg);
  transition: all 0.5s;
  z-index: -1;
}

button::after {
  left: -20px;
}

button::before {
  right: -20px;
}

button:hover::after {
  width: 50%;
  left: 0;
}

button:hover::before {
  width: 50%;
  right: 0;
}

</style>


================================================
FILE: Buttons/RenouxM_weak-moose-10.html
================================================
<button class="button">
  <span class="front"> ⚡Join Now </span>
</button>

<style>
/* From Uiverse.io by RenouxM  - Tags: simple, 3d, button */
.button {
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
  background-color: rgb(245, 134, 161);
  font-family: arial;
  font-size: 20px;
  font-weight: bold;
  border: none;
  width: 280px;
  height: 90px;
  border-radius: 12px;
}
.front {
  display: block;
  padding: 28px 80px;
  border-radius: 12px;
  font-size: 1.25rem;
  background: rgb(245, 74, 117);
  transform: translateY(-4px);
}
.button:focus:not(:focus-visible) {
  outline: none;
}

</style>
    

================================================
FILE: Buttons/RichestsoftSukhbir_big-liger-46.html
================================================
<button class="button">Hover Over Me</button>

<style>
/* From Uiverse.io by RichestsoftSukhbir  - Tags: simple, minimalist, white, black, button, hover, hover effect, hover button */
.button {
  padding: 12px 25px;
  background: #fff;
  border: 1px solid #121212;
  color: #121212;
  font-weight: 700;
  cursor: pointer;
  border-radius: 50px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  transition: all 0.5s ease;
}
.button::after {
  content: "";
  width: 100%;
  height: 100%;
  background: #121212;
  position: absolute;
  bottom: -100%;
  left: 0;
  border-radius: 50%;
  z-index: -1;
  transition: all 0.5s ease;
}
.button:hover {
  color: #fff;
}
.button:hover::after {
  bottom: 0;
  border-radius: 0;
}

</style>
    

================================================
FILE: Buttons/RodrigoRVSN_tidy-dingo-23.html
================================================
<button>
  button
</button>
<style>
/* From Uiverse.io by RodrigoRVSN - Tags: button */
button {
  background-color: transparent;
  border: 1px solid #00b4d8;
  border-radius: 0.2rem;
  color: #00b4d8;
  font-weight: bold;
  padding: 0.8rem 1.5rem;
  position: relative;
  text-transform: uppercase;
  transition: ease-in 0.3s;
}

button:hover, button:active, button:focus {
  background: radial-gradient(#00b4d8, #4cc9f0);
  ;
  box-shadow: 0px 0px 0.3rem #00b4d8;
  color: #001219;
}

button::before {
  bottom: -0.5rem;
  content: '';
  left: 0;
  position: absolute;
}

button::after {
  top: -0.5rem;
  content: '';
  left: 0;
  position: absolute;
}

button:hover::before {
  animation: ease-in moveBar 0.6s forwards reverse;
}

button:hover::after {
  animation: ease-in moveBar 0.6s forwards;
}

@keyframes moveBar {
  0% {
    width: 0;
  }

  1% {
    border: 1px solid #00b4d8;
  }

  40% {
    width: 2rem;
  }

  99% {
    border: 1px solid #00b4d8;
    left: 99%;
  }

  100% {
    border: none;
    left: 100%;
    width: 0;
  }
}
</style>


================================================
FILE: Buttons/Rodrypaladin_helpless-ladybug-43.html
================================================
<button class="button">
  <div class="button__int">
    <span class="button__span">Button</span>
  </div>
</button>
<style>
/* From Uiverse.io by Rodrypaladin - Tags: animation, pink, button, dark, shadow, border, color, box-shadow */
.button {
  background-image: linear-gradient(to right bottom, #e300ff, #ff00aa, #ff5956, #ffb900, #fffe00);
  border: none;
  font-size: 1.2em;
  border-radius: 0;
  padding: 4px;
  transition: border-top-left-radius 0.2s ease-in, 
  border-top-right-radius 0.2s ease-in 0.15s, 
  border-bottom-right-radius 0.2s ease-in 0.3s,
  border-bottom-left-radius 0.2s ease-in 0.45s, 
  padding 0.2s ease-in;
  position: relative;
}

.button__int {
  background-color: #212121;
  color: white;
  border-radius: 0;
  padding: 10px 40px;
  transition: all 0.2s ease-in,
  border-top-left-radius 0.2s ease-in, 
  border-top-right-radius 0.2s ease-in 0.15s, 
  border-bottom-right-radius 0.2s ease-in 0.3s,
  border-bottom-left-radius 0.2s ease-in 0.45s,
  padding 0.2s ease-in;
  font-weight: 600;
  z-index: -1;
  box-shadow: -25px -10px 30px -5px rgba(225, 0, 255, 0.7),
    25px -10px 30px -5px rgba(255, 0, 212, 0.7),
    25px 10px 30px -5px rgba(255, 174, 0, 0.7),
    -25px 10px 30px -5px rgba(255, 230, 0, 0.7);
}

.button:active .button__int {
  padding: 10px 30px;
}

.button:hover {
  border-radius: 1.5em;
}

.button:hover .button__int {
  border-radius: 1.3em;
}

.button:hover .button__int {
  box-shadow: -15px -10px 30px -5px rgba(225, 0, 255, 0.8),
    15px -10px 30px -5px rgba(255, 0, 212, 0.8),
    15px 10px 30px -5px rgba(255, 174, 0, 0.8),
    -15px 10px 30px -5px rgba(255, 230, 0.8);
}

</style>


================================================
FILE: Buttons/Rodrypaladin_ordinary-vampirebat-21.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by Rodrypaladin - Tags: simple, animation, blue, button, css, css effect */
.button {
  padding: 10px 20px;
  font-size: 1.1rem;
  background-color: rgb(74, 153, 255);
  border: none;
  color: white;
  position: relative;
  width: 120px;
  height: 45px;
  transition: background-color 0.2s ease-in, all 0.15s ease-in;
}

button::after {
  display: flex;
  align-items: center;
  justify-content: center;
  content: "Button";
  width: 120px;
  height: 45px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(5px, 5px);
  background-color: rgb(1, 111, 255);
  transition: all 0.15s ease-in;
}

button:hover::after {
  transform: translate(-5px, -6px);
}

button:hover {
  transform: translate(5px, 5px);
}

button:active::after {
  background-color: rgb(0, 83, 192);
}
</style>


================================================
FILE: Buttons/Rodrypaladin_pink-hound-35.html
================================================
<button class="button">
  <span class="button__span">Button</span>
  
</button>
<style>
/* From Uiverse.io by Rodrypaladin - Tags: simple, animation, black, button, text animation, creative, click effect, click animation */
.button {
  font-size: 2em;
  padding: 10px 20px;
  background-color: transparent;
  transition: all 0.2s ease-out;
  border: none;
}

.button__span {
  color: #131313;
  transition: all 0.2s ease-out;
  background-color: #e7e5e4;
  letter-spacing: .15em;
  text-shadow: 1px -1px 0 #767676, 
      -1px 2px 1px #737272, 
      -2px 4px 1px #767474, 
      -3px 6px 1px #787777, 
      -4px 8px 1px #7b7a7a, 
      -5px 10px 1px #7f7d7d, 
      -6px 12px 1px #828181, 
      -7px 14px 1px #868585, 
      -8px 16px 1px #8b8a89, 
      -9px 18px 1px #8f8e8d, 
      -10px 20px 1px #949392, 
      -11px 22px 1px #999897, 
      -12px 24px 1px #9e9c9c, 
      -13px 26px 1px #a3a1a1, 
      -14px 28px 1px #a8a6a6, 
      -15px 30px 1px #adabab, 
      -16px 32px 1px #b2b1b0, 
      -17px 34px 1px #b7b6b5, 
      -18px 36px 1px #bcbbba, 
      -19px 38px 1px #c1bfbf, 
      -20px 40px 1px #c6c4c4, 
      -21px 42px 1px #cbc9c8, 
      -22px 44px 1px #cfcdcd, 
      -23px 46px 1px #d4d2d1, 
      -24px 48px 1px #d8d6d5, 
      -25px 50px 1px #dbdad9, 
      -26px 52px 1px #dfdddc, 
      -27px 54px 1px #e2e0df, 
      -28px 56px 1px #e4e3e2;
}

.button__span:hover {
  text-shadow: -1px -1px 0 #767676, 
      1px 2px 1px #737272, 
      2px 4px 1px #767474, 
      3px 6px 1px #787777, 
      4px 8px 1px #7b7a7a, 
      5px 10px 1px #7f7d7d, 
      6px 12px 1px #828181, 
      7px 14px 1px #868585, 
      8px 16px 1px #8b8a89, 
      9px 18px 1px #8f8e8d, 
      10px 20px 1px #949392, 
      11px 22px 1px #999897, 
      12px 24px 1px #9e9c9c, 
      13px 26px 1px #a3a1a1, 
      14px 28px 1px #a8a6a6, 
      15px 30px 1px #adabab, 
      16px 32px 1px #b2b1b0, 
      17px 34px 1px #b7b6b5, 
      18px 36px 1px #bcbbba, 
      19px 38px 1px #c1bfbf, 
      20px 40px 1px #c6c4c4, 
      21px 42px 1px #cbc9c8, 
      22px 44px 1px #cfcdcd, 
      23px 46px 1px #d4d2d1, 
      24px 48px 1px #d8d6d5, 
      25px 50px 1px #dbdad9, 
      26px 52px 1px #dfdddc, 
      27px 54px 1px #e2e0df, 
      28px 56px 1px #e4e3e2;
}

.button:active .button__span {
  text-shadow: none;
}
</style>


================================================
FILE: Buttons/Rodrypaladin_short-wasp-25.html
================================================
<button class="button">
  Button
</button>

<style>
/* From Uiverse.io by Rodrypaladin - Tags: simple, animation, purple, pink, button, click, css, click animation */
.button {
  margin: 0 10px;
  padding: 10px 30px;
  border: 5px solid #DF34DB;
  border-radius: 22px;
  font-size: 20px;
  color: #DF34DB;
  transition: transform 0.1s ease-in, all 0.08s ease-in;
  box-shadow: 0 5px 0 #dd04d9;
}

.button:hover {
  border-color: #ff00c8;
  box-shadow: 0 5px 0 #ff00c8;
}

.button:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 #DF34DB;
}
</style>


================================================
FILE: Buttons/Rodrypaladin_smart-puma-20.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by Rodrypaladin - Tags: simple, animation, minimalist, black, button, creative, hover effect, click animation */
.button {
  color: #202020;
  background-color: #2d2d2d;
  letter-spacing: .1em;
  text-shadow: -1px -1px 1px #111111, 
      2px 2px 1px #363636;
  border: 3px solid #363636;
  font-size: 2em;
  padding: 10px 20px;
  transition: all 0.1s ease-in;
}

.button:active {
  border-color: #111111;
  color: #111111;
  padding: 10px 30px;
}
</style>


================================================
FILE: Buttons/Roopaish_wicked-moth-24.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by Roopaish - Tags: button, bubble, animated */
button {
  outline: none;
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 700;
  color: hsl(0, 0%, 100%);
  border-radius: 10px;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
  position: relative;
  background-color: #ff0081;
  box-shadow: rgba(233, 30, 99, 0.5);
}

button::after,
button::before {
  transition: all 0.2s ease-in-out;
}

button::before {
  z-index: -1;
  position: absolute;
  content: "";
  left: -2em;
  right: -2em;
  top: -2em;
  bottom: -2em;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, #ff0081 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, white 20%, transparent 20%),
    radial-gradient(circle, #ff0081 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),
    radial-gradient(circle, #ff0081 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),
    radial-gradient(circle, #ff0081 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),
    /*  */
      radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),
    radial-gradient(circle, #ff0081 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, white 20%, transparent 20%),
    radial-gradient(circle, #ff0081 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),
    radial-gradient(circle, #ff0081 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, white 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%, 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%,
    20% 20%;
  background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
    65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
    64% 70%, 80% 71%;
}

button:hover::before {
  background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,
    100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,
    100% 100%;
  background-size: 0% 0%;
  transition: background-position 0.5s ease-in-out,
    background-size 0.75s ease-in-out;
}
</style>


================================================
FILE: Buttons/Rudra1725_splendid-fish-19.html
================================================
<button class="btn1">&gt; Send Message</button>

<style>
/* From Uiverse.io by Rudra1725  - Tags: simple, material design, 3d, button, hover, active */
.btn1 {
  color: black;
  background-color: white;
  border: solid wheat 2px;
  border-radius: 9px;
  font-size: 19px;
  padding: 12px;
  box-shadow: inset 0 0 4px black;
  font-weight: 500;
  transition: 400ms;
}
.btn1:hover {
  transition: 400ms;
  box-shadow: inset 0 0 6px black, 0 0 10px wheat;
}
.btn1:active {
  transition: 50ms;
  box-shadow: inset 0 0 0px black, 0 0 10px wheat;
}

</style>
    

================================================
FILE: Buttons/Saiyed-Tanvir_hard-eagle-53.html
================================================
<!-- From Uiverse.io by Saiyed-Tanvir - Tags: button, hover button -->
<button class="shadow-[inset_0_0_0_0px_green] border-2 border-[#0f6] hover:bg-transparent hover:shadow-[inset_0_0_0_3px_#0f6] active:shadow-[inset_0_0_0_25px_#0f6] text-white font-bold py-2 px-4 rounded transition-all">
  Click me!
</button>



================================================
FILE: Buttons/Saiyed-Tanvir_proud-donkey-5.html
================================================
<div class="container">
  <div class="btn">
    <div class="sides top">
      BUTTON
    </div>
    <div class="sides front"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Saiyed-Tanvir - Tags: button, box */
.btn {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.sides {
  transition: all 0.07s;
  cursor: pointer;
}

.top {
  background: linear-gradient(259.35deg, #FF6B00 0%, #BD00FF 100%);
  height: 2cm;
  width: 4cm;
  transform: rotateX(60deg);
  font-weight: bolder;
  padding: 0.5cm 1cm;
  color: white;
}

.front {
  background: linear-gradient(280.65deg, #BD5000 0%, #8C00BD 100%);
  height: 2cm;
  width: 4cm;
  transform: translateY(-38px) rotateX(-60deg);
}

.btn:active .top {
  transform: rotateX(60deg) translateZ(0px);
}

.btn:active .front {
  height: 0.1cm;
  transform: rotateX(-60deg) translateZ(-26px);
}
</style>


================================================
FILE: Buttons/Salahkarrar_thin-wombat-41.html
================================================
<button class="wave-button">Click me</button>

<style>
/* From Uiverse.io by Salahkarrar  - Tags: button, hover, light, click */
.wave-button {
  background-color: #eaf2f8;
  border: 2px solid #ddd;
  color: #000;
  padding: 15px 30px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.wave-button:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0px;
  background-color: rebeccapurple;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
  transition: all 0.5s ease;
}

.wave-button:hover {
  background-color: #ddd;
  border-color: rebeccapurple;
}

.wave-button:hover:before {
  height: 5%;
  width: 100%;
  animation: wave-animation 0.5s linear forwards;
}

@keyframes wave-animation {
  to {
    right: 100%;
  }
}

.wave-button span {
  position: relative;
  z-index: 1;
}

</style>
    

================================================
FILE: Buttons/SalladShooter_neat-bear-90.html
================================================
<button class="button">
  <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="icon">
    <path
      d="M307 34.8c-11.5 5.1-19 16.6-19 29.2v64H176C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96h96v64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z"
    ></path>
  </svg>
  Share
</button>

<style>
/* From Uiverse.io by SalladShooter  - Tags: simple, gradient, button */
.button {
  cursor: pointer;
  padding: 1em;
  font-size: 1em;
  width: 7em;
  aspect-ratio: 1/0.25;
  color: white;
  background: #212121;
  background-size: cover;
  background-blend-mode: overlay;
  border-radius: 0.5em;
  outline: 0.1em solid #353535;
  border: 0;
  box-shadow: 0 0 1em 1em rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  position: relative;
}

.button:hover {
  transform: scale(1.1);
  box-shadow: 0 0 1em 0.45em rgba(0, 0, 0, 0.1);
  background: linear-gradient(45deg, #212121, #252525);
  background: radial-gradient(
    circle at bottom,
    rgba(50, 100, 180, 0.5) 10%,
    #212121 70%
  );
  outline: 0;
}

.icon {
  fill: white;
  width: 1em;
  aspect-ratio: 1;
  top: 0;
  left: 0;
  margin: auto;
  transform: translate(-35%, 10%);
}

</style>
    

================================================
FILE: Buttons/Sameer2244_big-robin-49.html
================================================
<div class="btn-container">
  <div class="svg svg-1">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" height="40px" width="40px">

      <path fill="#1d1d1b" d="m56.62 28.46a20.57 20.57 0 0 0 -4.85-2.94s-1.18-3.35-2.4-5.85a16 16 0 0 0 -11-7.46c-5.31-.69-9.75-.94-16.13 2.15a22.19 22.19 0 0 0 -9.34 9.16 21.15 21.15 0 0 0 -6.19 3.12 5.68 5.68 0 0 0 .56 9.36 43.94 43.94 0 0 0 5.73 2.91 23.74 23.74 0 0 0 4.5 7.39c2.94 2.94 5.28 5.25 11.63 5.75s8 0 11.31-1.81a34.34 34.34 0 0 0 7.19-5.47 30 30 0 0 0 3.11-3.16c4.31-1.2 6.93-2.83 8.11-5.53 1.27-2.94.71-5.37-2.23-7.62zm-44 8c-.1 0-4.94-2-5.75-4.75s3.37-5.53 5.4-6.41a14.57 14.57 0 0 0 -.43 6.22c.5 3.31.84 5 .75 4.97zm42.28 1.12c-1.91 1.66-3.47 2.06-3.41 1.91a18.36 18.36 0 0 0 1.41-6.07 38.3 38.3 0 0 0 -.44-5.4s3.44 1.22 4.47 3.84-.12 4.06-2.03 5.72z"></path>

      <path fill="#85bfe9" d="m16.84 22.46c-.37-.09-.85-.32-.38-.85a18.1 18.1 0 0 1 9-6.75 22.15 22.15 0 0 1 14.28-.28c2.28.69 5.41 2.34 5.25 2.59a1.29 1.29 0 0 1 -1.06.57c-.63.06-2.84-.38-4.78.43s-2.5 1.47-3.88 1.5a23.54 23.54 0 0 0 -6.47.54c-2.9.75-3.46 1.65-5.68 1.93a45 45 0 0 1 -6.28.32z"></path>

      <path fill="#1d1d1b" d="m19.52 20.61a6.35 6.35 0 0 1 2.07-2.09 8.92 8.92 0 0 1 2.41-1.41c.16 0 .38.38.22.47a8.26 8.26 0 0 0 -2.37 1.75c-1 1.09-.78 1.56-1.22 1.63s-1.26-.19-1.11-.35z"></path>

      <path fill="#cbe7f5" d="m15 24.33a7.44 7.44 0 0 1 2.88-.41c1.75 0 2.9.66 6.22-.37s4.06-1.81 5.75-1.84 3.34.5 5.9-.25 3.69-1.57 5.07-1.85 3.84-.22 4.34-.31 1.69-.41 1.87-.22a27.24 27.24 0 0 1 2.6 5.53c.94 2.75 1.06 3.66.87 4a10.63 10.63 0 0 1 -5.5 1.53c-2.78.1-4.46-1.75-9-1.59s-8.93.91-11.06.66-3.5-1.35-6.06-1.22a13.63 13.63 0 0 0 -3.91.43c-.87.29-1 .72-1.12.22s.33-3.53 1.15-4.31z"></path>

      <g fill="#1d1d1b">

        <path d="m44.77 20.71a7.38 7.38 0 0 1 2.72 1.4c-.09.19.07.44-.34.44a10.38 10.38 0 0 1 -2.72-1.16 1.13 1.13 0 0 1 .34-.68z"></path>

        <path d="m43.81 22.64s4.25 1.94 4.25 2.22.18.47-.16.44a28.09 28.09 0 0 1 -4.5-1.94c-.06-.22.41-.72.41-.72z"></path>

        <path d="m41.77 24.08c.16 0 5.54 2.63 5.5 2.88s.13.5-.18.46a46.82 46.82 0 0 1 -5.72-2.42c.03-.23.28-.92.4-.92z"></path>

        <path d="m40.24 25.92c.1 0 4.32 1.94 4.22 2.13s-.06.34-.28.34a34.62 34.62 0 0 1 -4.34-1.65 2.24 2.24 0 0 1 .4-.82z"></path>

      </g>

      <path fill="#cbe7f5" d="m14.21 30.33c.14-.14.94-1.16 3.69-.72s4.25 1.78 7.31 1.22 9.63-.91 12.35-.34 2.06 1.56 6.53 1.37 6.5-1.5 6.72-1.19a12.74 12.74 0 0 1 -.16 5.47c-.56 2.88-.91 3.78-1.06 3.94a30.43 30.43 0 0 1 -5.85.94c-.4-.19-4.25-3.13-4.47-3.13s-.71.22-.59.44 4.32 2.67 4.06 2.84a37.54 37.54 0 0 1 -12 .19 84.18 84.18 0 0 1 -13.65-3.06 4.92 4.92 0 0 1 -2.09-.84 19.69 19.69 0 0 1 -1.25-4.79c-.23-1.75.25-2.09.46-2.34z"></path>

      <path fill="#1d1d1b" d="m41.65 36.46a20.45 20.45 0 0 1 4.25 3.15c0 .25 0 .44-.22.41s-4.68-2.75-4.62-3.02.46-.48.59-.54z"></path>

      <path fill="#1d1d1b" d="m43.06 35.49c0-.09.46-.44.75-.38a21.34 21.34 0 0 1 3.75 2.81c0 .29.06.57-.25.5a28.43 28.43 0 0 1 -4.25-2.93z"></path>

      <path fill="#1d1d1b" d="m45.24 33.89c-.14-.1.16-.5.53-.43s2.57 1.28 2.5 1.56-.15.62-.34.62a31.51 31.51 0 0 1 -2.69-1.75z"></path>

      <path fill="#85bfe9" d="m15.93 40.08c0-.28 7.59 2.56 12.59 2.94a82.14 82.14 0 0 0 13.48.22c4.66-.38 5.88-.66 5.88-.53a19.19 19.19 0 0 1 -8.1 6.37 27.15 27.15 0 0 1 -15.22.22c-3.75-1.25-6.62-5.56-7-6.13a19.42 19.42 0 0 1 -1.63-3.09z"></path>

      <path fill="#1d1d1b" d="m20.71 43.49c.29-.29 1.06.65 1.75.59s1.66-.25 2 .06.66.66 1.25.6 2.22-.72 2.5-.57.5.13.32.32a5.31 5.31 0 0 1 -2.72 1.09c-1.1 0-1.94-.87-2.38-.81a5.12 5.12 0 0 1 -1.81.12c-.75-.12-1.16-1.15-.91-1.4z"></path>

      <path fill="#1d1d1b" d="m28.52 47.33a20 20 0 0 0 3.66.84 4.25 4.25 0 0 0 1.82-.17c.25-.1 1.07-.32 1.19-.16s.28.22.13.41a2.69 2.69 0 0 1 -1.5.56c-.72.06-2.75 0-3.63 0s-1 .12-1.47-.16-.6-1.23-.2-1.32z"></path>

      <path fill="#1d1d1b" d="m37.27 45.92c.2-.11 1.32-.53 1.54-.34s.59.31.21.53a4.14 4.14 0 0 1 -1.46.53c-.25-.03-.5-.59-.29-.72z"></path>

    </svg>
  </div>
  <div class="svg svg-2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" height="40px" width="40px">

<path fill="#1d1d1b" d="m16.75 28.37a14.3 14.3 0 0 1 3.34-6.31 14.54 14.54 0 0 1 5.88-4c.53-.15 2.84-.34 2.84-.34s0-1.75.78-2a8.24 8.24 0 0 1 1.72-.38v-2.84s-1.53-.28-1.78-1.56.69-2.44 2.47-2.38 2.56 1.25 2.21 2.53a2.32 2.32 0 0 1 -1.84 1.5l-.06 2.69s2.06 0 2.12 1.22.07 1.34.07 1.34 4.71 0 7.68 3.06a26.82 26.82 0 0 1 4.6 5.94 10.68 10.68 0 0 1 .09 1.53 26.08 26.08 0 0 1 9.41 3.47c4 2.69 5.22 4.41 5 8.56a11.29 11.29 0 0 1 -5.07 9.13c-2.84 1.87-6.09 5-15.93 5.75a54.76 54.76 0 0 1 -23.28-3.19c-6-2.09-10.22-4.4-12.72-7.81a9.17 9.17 0 0 1 -.44-9.44c1-1.47 3.88-3.37 7-4.59a52.93 52.93 0 0 1 5.91-1.88z"></path>

<path fill="#cbe7f5" d="m19.68 35.06a8 8 0 0 1 -1.28-4.44 15.5 15.5 0 0 1 3.91-8.5 11.57 11.57 0 0 1 7.69-3.18c3.15-.19 6.62.43 8.72 1.81a10.73 10.73 0 0 1 2.56 2s-1.35 0-1.38.16-.09.71 0 .75a15.94 15.94 0 0 1 2.63.34c.19.19 2.25 2.06 2.59 3.94a15.76 15.76 0 0 1 0 5c-.12-.1-5.69-2.69-5.81-2.63s-.31.59-.22.69 5.94 2.53 6 2.81-.13 1.78-.13 1.78-5.78-2.87-6-2.72-.5.57-.34.69 6.31 2.75 6.28 2.94-.81.75-1.22.94l-.56.25a53.62 53.62 0 0 0 -4.88-2.75c-.21.09-.65.28-.43.59s4.37 2.41 4.15 2.62-3.87.82-9.09.72-10.15-.37-13.19-3.81z"></path>

<path fill="#cbe7f5" d="m31.47 9.44c1.07-.13 1.93.4 1.75 1.31s-2.07.78-2.47.5a1.06 1.06 0 0 1 .72-1.81z"></path>

<path fill="#696a9b" d="m30.34 17.62a.37.37 0 0 1 -.41-.43c.07-.32.5-.91 1.69-.85s1.63.35 1.78.72 0 .44-.37.5-2.35 0-2.69.06z"></path>

<g fill="#1d1d1b">

<path d="m39.84 25.4a21.45 21.45 0 0 1 4 1.72c.09.22.16.72 0 .75a33.77 33.77 0 0 1 -3.88-1.43c-.21-.16-.24-1-.12-1.04z"></path>

<path d="m40 28a40.88 40.88 0 0 1 4.46 1.93c0 .22.1.5-.12.5a41.64 41.64 0 0 1 -4.38-1.46c-.15-.19-.21-.97.04-.97z"></path>

<path d="m25 22.59a3.8 3.8 0 0 1 1.87-1.69c1.38-.59 2.22-.62 2.41-.43a.64.64 0 0 1 .12.68 13.46 13.46 0 0 0 -2.4.85c-.66.5-1.06 1.09-1.38 1.19s-.69-.41-.62-.6z"></path>

<path d="m23.34 24.87c.31-.1 1.81.16 1.81.47a8.74 8.74 0 0 0 -.06 4c.56 1.78 1.72 4.44 1.53 5.28a1.47 1.47 0 0 1 -1.62 1.1 11.25 11.25 0 0 1 -3.6-1.35c-.81-.56-1.06-1.31-.93-3.12s1.93-6.06 2.87-6.38z"></path>

</g>

<path fill="#e6e4da" d="m23.68 25.87c.16 0 .19.13.16.41a20.35 20.35 0 0 0 .72 5.47c.69 2.19.84 2.5.59 2.62a9.49 9.49 0 0 1 -3.34-1 10.1 10.1 0 0 1 .12-3.87c.35-1.88 1.35-3.5 1.75-3.63z"></path>

<path fill="#92a0d1" d="m16.15 29.87c.27 0 .07 4.38 2 6.38s4.85 3.31 9.35 3.9a36 36 0 0 0 12.06-.15 20.52 20.52 0 0 0 7.25-2.91.72.72 0 0 0 .28-.56s.06-6.06.16-6.16 5.5.69 8.43 3 3.69 3.69 3.6 6.22a6.87 6.87 0 0 1 -2.35 4.66 9.78 9.78 0 0 1 -1.81 1.22s-4.25-3.35-4.44-3.32-.62.54-.46.72 4.46 3 4.25 3.19a13.24 13.24 0 0 1 -1.66.75s-2.34-1.81-2.47-1.81-.66.4-.5.65 2.16 1.44 2.06 1.54a49.56 49.56 0 0 1 -14.15 2.09 71.36 71.36 0 0 1 -20.13-2.38 44.59 44.59 0 0 1 -11.5-5.21 4.72 4.72 0 0 1 0-6.75 23.42 23.42 0 0 1 10.03-5.07z"></path>

<path fill="#1d1d1b" d="m52.75 40.62c.38-.11 3.34 2.35 3.28 2.53s-.31.54-.56.44a24.39 24.39 0 0 1 -3.22-2.34c-.07-.25.28-.56.5-.63z"></path>

<path fill="#1d1d1b" d="m54.5 40c.12 0 .65-.44.87-.41a10.77 10.77 0 0 1 2.56 1.94c-.09.19-.15.53-.5.44s-2.93-1.97-2.93-1.97z"></path>

<path fill="#1d1d1b" d="m56.78 38.81c.12-.12.22-.53.62-.37s.85.93.72 1.09-.15.37-.28.28-1.06-1-1.06-1z"></path>

<path fill="#1d1d1b" d="m51.34 35.34a2.57 2.57 0 0 1 3.66 2c.4 2.38-3.82 2.88-4.66 1.41a2.32 2.32 0 0 1 1-3.41z"></path>

<path fill="#cbe7f5" d="m52 36.19a1.69 1.69 0 0 1 2 1.5c.12 1.15-2.28 1.4-2.75.5a1.41 1.41 0 0 1 .75-2z"></path>

<path fill="#1d1d1b" d="m43.78 41.78c.9-.25 2.81-.28 3.31 1.19s-1.94 2.93-3.37 2.72a2.13 2.13 0 0 1 -1.82-2.16 2.8 2.8 0 0 1 1.88-1.75z"></path>

<path fill="#cbe7f5" d="m44.43 42.56c.64-.06 1.75.5 1.41 1.13s-1.66 1.06-2.19.56a1 1 0 0 1 .78-1.69z"></path>

<path fill="#1d1d1b" d="m31.25 42.75c.76-.11 3.93.06 4.09 1.62s-1.62 3.19-4.28 2.53a2.09 2.09 0 0 1 .19-4.15z"></path>

<path fill="#cbe7f5" d="m31.28 43.78a3.49 3.49 0 0 1 2.25.66c.53.53.06 1.43-1.35 1.4s-2.56-1.65-.9-2.06z"></path>

<path fill="#1d1d1b" d="m18.09 40.22c1.33-.22 4.63.47 4.53 2.59s-4.22 2.56-5.62 1.34a2.17 2.17 0 0 1 1.09-3.93z"></path>

<path fill="#cbe7f5" d="m18 41.34c.87-.1 3.12.25 3.34 1.31s-1.66 1.54-3.09.85-.82-2.1-.25-2.16z"></path>

<path fill="#1d1d1b" d="m10.93 34.34c1.1-.07 3.72.1 3.19 2.5s-4.22 2.28-5 .66a2.18 2.18 0 0 1 1.81-3.16z"></path>

<path fill="#cbe7f5" d="m11 35.37c.87-.22 2.19.28 1.81 1.35s-1.59 1-2.41.47-.05-1.65.6-1.82z"></path>

<path fill="#696a9b" d="m7.22 44.15c.28 0 5.65 2.88 10.31 4.13a51.91 51.91 0 0 0 15.47 2.25c7.09 0 10.68-.09 15.65-1.31s7.82-2.88 8-2.75a.33.33 0 0 1 .1.47 23.6 23.6 0 0 1 -10.35 5.9 48.07 48.07 0 0 1 -22.15-.12c-8.19-2.07-12.5-4-14.22-5.41s-3.28-3.19-2.81-3.16z"></path>

</svg>
  </div>
  <div class="svg svg-3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" height="40px" width="40px">

<path fill="#1d1d1b" d="m6.9 48.93s-2.08.07-2.25-1.75-.33-4.67 3.59-8 6.66-3.34 10.5-9.42 5.58-16.83 6.83-19.58 1.83-6.92 7.33-7.18 6.34 4.75 7.42 9.17 3.42 14.33 7.92 19.91 8.5 7.76 10.25 12.92.58 6.42.16 6.5-4.41.33-4.41.33a7.34 7.34 0 0 1 .14 2.17c-.19.31-4.37.87-7.06.81s-4.38-.25-4.38-.62-.18-1.75-.18-1.75l-1.82.12s.44 2.5-.06 3.25a3.78 3.78 0 0 1 -2.25 1.19 6.7 6.7 0 0 1 -.81.06s.5 2.81.19 3.31-4.07.69-7.88.63-5.62-.13-5.69-.75a31.67 31.67 0 0 1 .32-3.38s-3.07-.18-3.38-1a18.08 18.08 0 0 1 -.06-4.06h-2.19a2.64 2.64 0 0 1 -.06 1.19c-.19.37-4.69.62-8 .31s-4.38-1.25-4.38-1.56.21-2.82.21-2.82z"></path>

<path fill="#cbe7f5" d="m7.94 47.3s-1.31-.12-1.25-.56.75-5.56 4.19-7.06 8.5-1.88 10.81-4.38 3.69-8.75 3.94-11.5 0-9.12 1.19-12.44 2-6.86 6.69-6.87c7.48 0 7.25 27.56 10.62 29.75a17 17 0 0 0 5.38 2.56 16.46 16.46 0 0 1 6.25 6.88c1.87 4.37 1.5 6.43 1.5 6.43l-2.94.25a5.54 5.54 0 0 0 -5.56-4.87c-5.07-.13-5.76 5.87-5.76 5.87s-2.25.63-2.13.19-.31-14.87-1.06-17.62-2.38-3.57-3.06-3.69-1.13 1.44-1 1.62 1.93 0 2.31 5.82 1.31 16.87.62 17.37-4.81 1.06-9.06.81-5.56-.31-6.06-1.43.94-17.63 1.5-19.88 1.5-2.56 2.25-2.75a.91.91 0 0 0 .69-1.19c-.13-.31-1.19-.37-2.19-.12s-2.69 1.69-3.19 7.31-.94 12.5-1.12 12.5-3.32-.25-3.32-.25.57-6-4.56-6.25-5.68 3.5-5.68 3.5z"></path>

<path fill="#e7413e" d="m13.44 45.43a3 3 0 0 1 2.94 3.06c0 1.56.13 2.87-.25 3a17.3 17.3 0 0 1 -4.44-.06c-2.18-.25-2.56 0-2.56-.88s-.37-5.37 4.31-5.12z"></path>

<path fill="#e7413e" d="m48.69 47.18c3.06-.2 4 5 3.44 5.31a13.26 13.26 0 0 1 -4.06.44c-2 .06-3 0-3.13-.94s-.06-4.56 3.75-4.81z"></path>

<path fill="#1f4863" d="m24 23.68c.25 0 .31 3.62-1.07 7s-3.5 5.12-4.81 5.5a14.78 14.78 0 0 1 -2.94.43s4.25-2.87 6.13-6.87 2.69-6.06 2.69-6.06z"></path>

<path fill="#1f4863" d="m42.65 25a32 32 0 0 0 2.73 6.16c1.63 2.63 3.69 3.75 3.25 4s-3.31-.86-4.63-3.36a14 14 0 0 1 -1.35-6.8z"></path>

<path fill="#1d1d1b" d="m27.38 16.43c-.06-.31.38-10.5 5.5-10.63s5.25 11.38 4.75 11.56-2-.93-5.62-.62-4.44.69-4.63-.31z"></path>

<path fill="#1f4863" d="m28.69 15.49c-.32-.19.63-8.75 4.38-8.38s3.75 8.25 3.19 8.38-2.07-.44-3.94-.38-3.19.63-3.63.38z"></path>

<g fill="#1d1d1b">

<path d="m36.51 20.36c.3-.25 2.25.82 2.18 1.38s.13.81-.18.75a9 9 0 0 1 -2.57-1.31c-.12-.32.19-.5.57-.82z"></path>

<path d="m35.63 23.55c.18-.18 2.94 1.44 3 1.88s.38 1-.06.93-3.44-1.62-3.5-2 .37-.62.56-.81z"></path>

<path d="m34.88 26.11c.31.07 4.19 1.82 4.06 2.25s.25.75-.31.63-4.19-1.75-4.19-2.25a.65.65 0 0 1 .44-.63z"></path>

<path d="m29.32 34.08c.35-.26 1 .25 2.66.32s2.75 0 2.75 0 .12.62 0 .81a9.3 9.3 0 0 1 -2.69.28 12 12 0 0 1 -2.85-.44.94.94 0 0 1 .13-.97z"></path>

<path d="m29.35 39c.35-.27 1 .25 2.66.31s2.75 0 2.75 0 .12.63 0 .81a9 9 0 0 1 -2.69.28 12.47 12.47 0 0 1 -2.84-.43.91.91 0 0 1 .12-.97z"></path>

<path d="m29.26 44.65c.35-.27 1 .25 2.65.31s2.75 0 2.75 0 .13.62 0 .81a8.85 8.85 0 0 1 -2.68.28 12 12 0 0 1 -2.85-.44.92.92 0 0 1 .13-.96z"></path>

<path d="m49.82 38.65c.12.15 2.41 2.09 2.34 2.37s-.18.41-.28.34a31.15 31.15 0 0 1 -2.47-2c-.06-.15.41-.71.41-.71z"></path>

<path d="m47.35 39.33c.28 0 4.22 3.19 4.16 3.57s-.16.62-.32.62-4.43-3.31-4.4-3.59.56-.6.56-.6z"></path>

<path d="m46.29 41.93a12.19 12.19 0 0 1 2.9 2.12c-.12.16.29.38-.37.35a9.48 9.48 0 0 1 -3-1.72c-.06-.19.31-.68.47-.75z"></path>

</g>

<path fill="#e7413e" d="m26.11 57.26c.07-.1 2.46.21 5.21.12a50.91 50.91 0 0 1 5.12-.2 8.22 8.22 0 0 1 .21 2.5 33 33 0 0 1 -6 .29c-2.7-.09-4.54 0-4.75-.29a5.38 5.38 0 0 1 .21-2.42z"></path>

</svg>
  </div>
  <div class="svg svg-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" height="40px" width="40px">

<path fill="#1d1d1b" d="m18.68 10.74a26.63 26.63 0 0 1 11.25-3.53c4.25-.21 8.15.79 13.56 3.38s8.4 5.06 10.69 9.31 3.53 7.38 2.28 12.91-1.63 11.09-3.85 14.93-5.93 6.5-11.43 7.88-13.32 2.28-20.07-1.44-11.5-9.25-13.25-16.9-.31-11.63 1-15.22a23.64 23.64 0 0 1 9.82-11.32z"></path>

<path fill="#4eae4d" d="m20.55 11.31a22.85 22.85 0 0 1 7.69-2.6c4-.47 10.47 1.32 11.15 1.63s1.25.5 1 .69-2.53 2.18-3.34 2.31-3.62-.56-5.75-.47-3.56.5-4.59.5-2.5-1.13-3.5-1.22-3.13-.59-2.66-.84z"></path>

<path fill="#85bfe9" d="m18.58 12.87a5.82 5.82 0 0 1 4.16.34c1.62.88 1.44 1.25 3.65 1.22s3.29-.4 3.94-.25 3.41 1.35 5.85.88a10.42 10.42 0 0 0 4.28-1.75c.72-.47 1.15-1.25 1.59-1.19s4.41 2.41 4.34 2.66a4.52 4.52 0 0 1 -1.71 1.5 7.43 7.43 0 0 0 -2.79 3.46c-.5 1.47-.78 5.88-.12 6.32s2.34-.19 3 .31.81 2.06 1.91 2.19 1.56-.69 2.56 0 1 1.21 2.56 1.25 3-.32 3.09 0a2.47 2.47 0 0 1 -.12 1.43c-.16.1-5.44.72-6.69.79s-1 .34-1.69 0-1.78-1.63-3.39-1.88-6.53-.56-7.5-.56-1.25 0-1.35.47.1 5.18-.4 6.72-.16 4.06 1.65 4.78 3.69 1.09 3.94 1.75 1.13 5 1.91 6.47 1.87 3.15 1.5 3.46a20.31 20.31 0 0 1 -6 1.54 23.64 23.64 0 0 1 -5.78 0s-1.16-6-1.47-6.54a4.67 4.67 0 0 1 -.41-2.34c.13-.41 2.34-4.87 2.06-6s-.72-2.28-1.75-2.56-2.75 0-5.53 0a27.84 27.84 0 0 1 -5.34-.44c-.56-.12-.88 0-1.13-.28s-2.28-4-2-4.34 3.13-1.16 3.25-1.82-.06-2.25.66-2.31 3.87.38 4.87-.15 1.13-1.75 1.16-2.82-.37-3.4-.84-3.84-5-1.81-6.72-2.72-3.17-1.62-2.98-2.22a12.45 12.45 0 0 1 3.78-3.53z"></path>

<path fill="#1d1d1b" d="m20.49 15c.54-.07.59.35.4.72s0 1.72.6 1.69a55.56 55.56 0 0 1 6.4-1.06 26.38 26.38 0 0 1 8 1.65c.75.41 1.1 2 1.16 2.47a29.44 29.44 0 0 1 -2.75 5.53c-.28.15-3.19-1-5.28-2s-3-1.47-3.09-1.88a6.23 6.23 0 0 0 -.5-1.69c-.19-.09-3-.28-4.35-1.09s-2.56-2.13-2.31-2.69a4.18 4.18 0 0 1 1.72-1.65z"></path>

<path fill="#4eae4d" d="m24.36 17.87a20.8 20.8 0 0 1 7.25.31c3.19.63 3.69 1.16 3.6 1.94s-1.28 4-1.72 3.84a41.78 41.78 0 0 1 -5.31-2.18c-.22-.32-.29-1.88-1.22-2.16s-2.88-.88-3.53-1.13-.5-.5-.35-.5 1.28-.12 1.28-.12z"></path>

<path fill="#4eae4d" d="m47.58 15.21c.21-.07 2.94 1.07 4.81 4.63s2.47 7.94 2.25 8.34-.9.44-1.53.25-3.11-1.56-3.65-1.56-1.41.47-1.78 0-1.5-1.87-2.63-1.87-1.37.19-1.56-.06-.81-5.53.37-6.5 2.22-1.59 2.69-2 .75-1.13 1.03-1.23z"></path>

<path fill="#4eae4d" d="m35.71 31c.36 0 5.72-.4 6.78.63s1.94 2.15 2.84 2.12 9.19-.75 9.19-.43-.94 7.5-2.38 11.15a15.91 15.91 0 0 1 -5.53 7.06c-1.15.66-2.34.91-2.43.72a21.82 21.82 0 0 1 -2.29-5.93c-.68-3.22-.87-4.72-1.93-5s-3.69-.9-4.19-1.53a4 4 0 0 1 -.56-1.87s.28-3.88.28-4.72.03-2.2.22-2.2z"></path>

<path fill="#4eae4d" d="m17.43 38.21a12.74 12.74 0 0 0 4.84.91c3.31.06 6.56-.31 6.91.09s.28 1.78-.44 3.1a21.38 21.38 0 0 0 -1.19 2.59 26.16 26.16 0 0 0 -3.16-2.5.59.59 0 0 0 -.34.69c.13.28 3 2.22 3.13 2.47a9.75 9.75 0 0 1 -.1 1.75 25.76 25.76 0 0 0 -3-2.38c-.37-.06-.62.85-.5 1s3.53 2.5 4 2.91a6.06 6.06 0 0 1 .84 2.53c-.09 0-3.9-3.09-4.12-3.13s-.28 1-.28 1 4.5 3.19 4.65 3.44a6.49 6.49 0 0 1 .44 1.88 32.57 32.57 0 0 1 -3.59-.91c-1.25-.47-2.35-.72-2.35-.81s-1.17-3.78-2.81-5.38a12.91 12.91 0 0 1 -2.36-2.65 31.09 31.09 0 0 1 -.35-3.72c-.04-.85-.41-2.88-.22-2.88z"></path>

<path fill="#85bfe9" d="m10.52 38.4c.19-.37 2.56.25 3.69.69s1.5 1 1.53 1.87-.13 4.66.65 5.35a10.71 10.71 0 0 1 3.07 3.28 7.26 7.26 0 0 1 1 2.19 20.15 20.15 0 0 1 -5.91-5.5c-3.19-4.13-4.12-7.69-4.03-7.88z"></path>

<path fill="#4eae4d" d="m9.61 36.18a17.66 17.66 0 0 1 -.12-9.65c1.37-5.69 4-8.72 4.22-8.69s5.4 3 7.5 4 2.22 1 2.37 1.44a10.13 10.13 0 0 1 -.19 3.34c-.18.09-3.93-.09-5 0s-1.39 1.59-1.31 2.19.13.87-.12 1.06-3.6 1.09-3.78 2 2.37 5.37 2 5.5-4.57-.16-5.57-1.19z"></path>

<g fill="#1d1d1b">

<path d="m11.36 25.18a19.09 19.09 0 0 1 1.16-3.65c.5-.75.72-.91.94-.85s.84.35.78.53-1.13 2.25-1.41 3.16 0 .91-.4 1-.94.03-1.07-.19z"></path>

<path d="m40 15.59c.16-.14 2.53-.72 2.69-.5s.34.44.18.56a11.75 11.75 0 0 1 -2.62.94c-.2-.1-.45-.85-.25-1z"></path>

<path d="m38.46 22.93c.15.16 1.47 2.28 1.31 2.47s0 .47-.34.31a6.24 6.24 0 0 1 -1.54-2.22c.11-.25.57-.56.57-.56z"></path>

<path d="m37 24.37a12.18 12.18 0 0 1 1.72 2.09c0 .19 0 .47-.31.38a8.07 8.07 0 0 1 -1.86-1.84c0-.16.45-.66.45-.63z"></path>

<path d="m49.33 19.65a7.18 7.18 0 0 1 2.5 1.22c0 .19.1.69-.15.59s-2.54-1-2.63-1.12.25-.66.28-.69z"></path>

<path d="m49.11 22c.08-.11 4 2.18 4 2.53s.35.59-.06.53a30.17 30.17 0 0 1 -4.25-2.16c-.12-.19.2-.75.31-.9z"></path>

<path d="m48.74 24a25.43 25.43 0 0 1 4.84 2.62c.06.28.28.59-.12.56a40.58 40.58 0 0 1 -4.94-2.37c-.09-.13.09-.75.22-.81z"></path>

<path d="m49.68 35.53a13.17 13.17 0 0 1 2.9 2.78c-.09.25 0 .37-.28.28a22.37 22.37 0 0 1 -3.12-2.72c.06-.16.34-.28.5-.34z"></path>

<path d="m48.11 37.43a28.41 28.41 0 0 1 3.35 3.16c0 .25-.13.47-.25.44a41.72 41.72 0 0 1 -3.44-3 4.75 4.75 0 0 1 .34-.6z"></path>

<path d="m47.11 39.46a23.35 23.35 0 0 1 3.35 3.32c-.07.25.06.4-.25.37a39.21 39.21 0 0 1 -3.53-3.15 3.19 3.19 0 0 1 .43-.54z"></path>

<path d="m46.33 41.12a29.14 29.14 0 0 1 3.41 3.28c0 .25-.1.41-.22.31a43.92 43.92 0 0 1 -3.84-3.09.84.84 0 0 1 .65-.5z"></path>

<path d="m45.71 44.12a16 16 0 0 1 3.06 2.72c0 .22-.16.37-.25.34a33.63 33.63 0 0 1 -3.19-2.5c-.03-.19.31-.53.38-.56z"></path>

<path d="m45 45.93c.17 0 3.25 2.69 3 2.94s-.12.37-.37.28a22.27 22.27 0 0 1 -3.13-2.69c.11-.15.33-.53.5-.53z"></path>

<path d="m35.18 43.43c.09-.14 1.31.31 1.28.6s0 .34-.16.34a5 5 0 0 1 -1.53-.44c0-.12.34-.4.41-.5z"></path>

<path d="m33.14 47.28a1.46 1.46 0 0 1 1.16 0c.47.22 1.16 1 1.78 1.1s1.1-.28 1.25-.19a.37.37 0 0 1 .16.47c-.1.16-.16.31-.41.37a2 2 0 0 1 -1.5-.15c-.58-.39-.94-.88-1.58-.88s-.57.12-.69 0-.42-.51-.17-.72z"></path>

<path d="m26 40.15c.25.16 2.06 1.75 2 2s-.19.5-.38.44a10.1 10.1 0 0 1 -2.15-1.82c-.01-.24.53-.62.53-.62z"></path>

<path d="m24.21 30.43c.12 0 2.81 4.19 2.59 4.41s-.34.44-.47.31a44.75 44.75 0 0 1 -2.84-4.34 1.31 1.31 0 0 1 .72-.38z"></path>

<path d="m25.24 30c0-.12.59-.38.78-.19a12 12 0 0 1 1.37 2.72c-.09.18 0 .47-.25.28a17.6 17.6 0 0 1 -1.9-2.81z"></path>

<path d="m30.74 29.71c.08-.11 1-1 1.28-1s1 0 .91.22-1.41 1.91-1.66 1.75a1.66 1.66 0 0 1 -.53-.97z"></path>

</g>

</svg>
  </div>
  <div class="svg svg-5">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" height="40px" width="40px">

<g fill="#1d1d1b">

<path d="m15.69 55.54a2.75 2.75 0 0 0 -.62-2.69 2.37 2.37 0 0 0 -2.72-.47s-1.88-2-2.6-.65.79 2.69.79 2.69a1.9 1.9 0 0 0 .46 2.34 2.88 2.88 0 0 0 2.6.37s2.37 1.6 3 .44-.91-2.03-.91-2.03zm-4.84-1.72s-.91-1.09-.53-1.56 1.56.47 1.56.47-.97 1.09-1.03 1.09zm4.94 3.38c-.32.22-1.16-.38-1.16-.38l.44-.69c.28.16 1.03.87.72 1.07z"></path>

<path d="m27 33.1c.05-.53-3.81-2.25-3.87-7.18s2.37-9 8.31-10.19 8.5-.13 8.94-.56.75-2.75-2.75-4.82-14.16-3.35-22.47 4.57-7.44 16.46-6.59 19.87a20.86 20.86 0 0 0 8 11.91c4.84 3.34 7.53 4.43 11.78 5.09s8.75-1.41 11.19-3.06 3-3.41 2.93-4.16-.9-1.94-1.46-1.78-5.13 2.22-9.22 1-5.35-4-5.32-6 .41-3.5.53-4.69z"></path>

<path d="m7.79 8.7c.23-.08 1.71.12 1.78 0s.25-2.16.72-2.1.53 1.72.87 1.78 1.66-.09 1.75.25-1.09 1.35-1.06 1.5.25.88 0 1-1.25-.28-1.28-.18-1.32 1.68-1.57 1.56-.5-.16-.46-.34.62-2.17.62-2.17l-1.5-.8c-.16-.1-.06-.44.13-.5z"></path>

<path d="m7.16 18.73c.76-.47 1.28 0 1.13.84a.88.88 0 0 1 -1.38.53.89.89 0 0 1 .25-1.37z"></path>

<path d="m37.29 4.82a1.71 1.71 0 0 1 2.4 1.69 1.8 1.8 0 0 1 -3 1.16 1.74 1.74 0 0 1 .6-2.85z"></path>

</g>

<path fill="#ffe19b" d="m37.58 5.55a.92.92 0 0 1 1.3.91 1 1 0 0 1 -1.64.63.94.94 0 0 1 .34-1.54z"></path>

<path fill="#1d1d1b" d="m47 12c.19 0 0-2.84.34-3s1.28 1.78 1.62 1.75 1.63-.78 2-.56-.32 2.43-.25 2.59 1 1.41.65 1.66-1.87-.32-2-.22-.84 1.44-1.15 1.4-.35-2-.69-2.09-2.06-.28-2.16-.66 1.46-.87 1.64-.87z"></path>

<path fill="#1d1d1b" d="m54.13 17.23a2.52 2.52 0 0 1 2.75 2.77c-.22 2.15-3 2.25-4.16 1a2.31 2.31 0 0 1 1.41-3.77z"></path>

<path fill="#ffe19b" d="m54.32 18.26a1.37 1.37 0 0 1 1.49 1.48c-.12 1.17-1.61 1.22-2.26.56a1.26 1.26 0 0 1 .77-2.04z"></path>

<path fill="#1d1d1b" d="m34.75 21.67c1-.45 3.16 0 2.57 2.06s-3.32 1.56-3.82.47a2 2 0 0 1 1.25-2.53z"></path>

<path fill="#ffe19b" d="m35 22.34c.62-.27 1.88 0 1.53 1.22a1.29 1.29 0 0 1 -2.27.28 1.18 1.18 0 0 1 .74-1.5z"></path>

<path fill="#1d1d1b" d="m45.66 29.13s1.38-2.75 1.81-2.81.47 3 .47 3 1.94.16 1.88.47-1.57 1.06-1.57 1.06.54 2.19.25 2.35-1.4-1.66-1.4-1.66-2.13 1.09-2.31.84.46-2.12.46-2.12-1.5-.53-1.46-.78 1.65-.16 1.87-.35z"></path>

<path fill="#1d1d1b" d="m35.44 34.13a1.12 1.12 0 0 1 1.31 1.44 1.24 1.24 0 0 1 -2 .31c-.59-.68.13-1.59.69-1.75z"></path>

<path fill="#1d1d1b" d="m50 37.13c1-.26 2.53-.28 2.94 1.5s-1.66 2.54-3.31 2.13-1.94-3.03.37-3.63z"></path>

<path fill="#ffe19b" d="m50.26 37.92c.57-.14 1.43-.15 1.65.85s-.91 1.42-1.86 1.23a1 1 0 0 1 .21-2.08z"></path>

<path fill="#1d1d1b" d="m8.6 46a1.18 1.18 0 0 1 1.87.94c0 1.09-1.47 1.34-2 .9a1.22 1.22 0 0 1 .13-1.84z"></path>

<path fill="#1d1d1b" d="m34.54 54.1a1.9 1.9 0 0 1 2.53 2 2.29 2.29 0 0 1 -3.5 1.38c-1.5-1.16-.97-2.88.97-3.38z"></path>

<path fill="#ffe19b" d="m34.7 55a1 1 0 0 1 1.3 1 1.2 1.2 0 0 1 -1.84.72c-.75-.58-.47-1.48.54-1.72z"></path>

<path fill="#1d1d1b" d="m49.22 52.2c.07-.1 1.6-2.82 2-3s.41-.16.5 0a27.3 27.3 0 0 1 0 2.84s1 0 1 .28-1.06 1.16-1.06 1.16.31 1.94 0 2.09a.75.75 0 0 1 -.69-.09l-.43-1.09a10.81 10.81 0 0 1 -2.22.87c-.16-.12-.6-.41-.38-.59a8.27 8.27 0 0 0 .78-1.28s-2.12-.19-2.18-.44-.07-.6.09-.66 2.59-.09 2.59-.09z"></path>

<path fill="#cbe7f5" d="m11.75 54s1.16-1.81 2.5-.81 0 3-.09 2.94a4.64 4.64 0 0 1 -2.41-2.13z"></path>

<path fill="#cbe7f5" d="m11.5 55.17s1 1 1.32 1.21l.28.22a2.61 2.61 0 0 1 -1.53-.15c-.63-.35-.07-1.28-.07-1.28z"></path>

<path fill="#1d1d1b" d="m12.63 53.88s.56-.56.91-.53a.69.69 0 0 1 .5.28l-.63.38-.56.34a2.22 2.22 0 0 0 -.22-.47z"></path>

<path fill="#e6e4da" d="m38.29 13.87c.24-.06-1-2.1-2.86-2.81a16.74 16.74 0 0 0 -9.23-.14 25.3 25.3 0 0 0 -9.2 4.66 19 19 0 0 0 -4.84 6.42 14.81 14.81 0 0 0 -2.16 8 18.87 18.87 0 0 0 3.42 10.1 24.2 24.2 0 0 0 6 6 9.61 9.61 0 0 0 2 1.17s-.42-1.27-.22-1.35a1 1 0 0 1 .8.08 12.69 12.69 0 0 0 .23 1.64c.13.07.61.44.61.38a21.52 21.52 0 0 1 -.23-2.71c.1-.13 1-.1 1.08.1s0 2.71.08 2.8a2.49 2.49 0 0 0 .65.41c.06 0-.1-1.81 0-1.81s.77.06.83.19 0 1.85.09 2a9.45 9.45 0 0 0 5.32 1 15 15 0 0 0 7.46-2.31c1.67-1 2.71-2.31 2.6-2.59s-.14-.35-.29-.37-6.37 2.37-10.43.27-5.25-4.85-5.41-6.31.6-4.61.5-4.84-3.84-3.14-4-6.58.31-6.37 3.06-9.27a14.77 14.77 0 0 1 8.85-4.27c1.85-.02 5.2.16 5.29.14z"></path>

<path fill="#1d1d1b" d="m24.1 13.19a1.58 1.58 0 0 1 2.08 1.2 1.73 1.73 0 0 1 -2.46 1.8c-1.64-.57-.83-2.57.38-3z"></path>

<path fill="#ffffff" d="m24.31 14a.76.76 0 0 1 1 .58.83.83 0 0 1 -1.18.86c-.79-.29-.4-1.25.18-1.44z"></path>

<path fill="#1d1d1b" d="m17.47 17.31c.77-.54 3.15-.46 3.36 1.42s-1.83 3.35-3.4 2.27a2.34 2.34 0 0 1 .04-3.69z"></path>

<path fill="#ffffff" d="m18 18.11c.44-.32 1.82-.27 1.94.82a1.33 1.33 0 0 1 -2 1.34 1.36 1.36 0 0 1 .06-2.16z"></path>

<path fill="#1d1d1b" d="m14.12 21.52c.14-.13.79 0 .75.37a22.52 22.52 0 0 1 -1.54 4.21c-.31.27-.75.4-.92 0a10.5 10.5 0 0 1 1.71-4.58z"></path>

<path fill="#1d1d1b" d="m14.27 28.77c1.34-.56 4.25 0 3.77 3.44s-3.86 2.52-4.75 1.14-1.21-3.66.98-4.58z"></path>

<path fill="#ffffff" d="m14.59 29.61c.94-.39 3 0 2.64 2.41s-2.7 1.76-3.32.8-.85-2.56.68-3.21z"></path>

<path fill="#1d1d1b" d="m19.37 37.67c1.34-.57 4.25 0 3.77 3.43s-3.85 2.52-4.75 1.15-1.21-3.67.98-4.58z"></path>

<path fill="#ffffff" d="m19.69 38.51c.94-.39 3 0 2.64 2.41s-2.69 1.76-3.32.8-.85-2.57.68-3.21z"></path>

<path fill="#1d1d1b" d="m27.66 45.87a1.14 1.14 0 0 1 1.63 1.13c0 .9-.67 1.58-1.61 1.25a1.26 1.26 0 0 1 -.02-2.38z"></path>

<path fill="#ffffff" d="m27.87 46.5a.53.53 0 0 1 .76.53c0 .42-.32.75-.76.59a.59.59 0 0 1 0-1.12z"></path>

</svg>
  </div>
  <div class="btn">Space</div>
</div>
<style>
/* From Uiverse.io by Sameer2244 - Tags: button */
.btn-container {
  width: fit-content;
  height: fit-content;
  position: relative;
}

.svg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%,-50%);
  transition: 0.5s;
}

.btn {
  background-color: rgb(66, 125, 194);
  z-index: 10;
  color: white;
  padding: 0.5rem 2rem;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 0.5rem;
  transition: 0.2s;
  cursor: pointer;
}

.btn-container:hover {
  box-shadow: rgba(66, 125, 194, 0.8) 0px 0px 54px;
}

.btn:hover {
  outline: rgb(66, 125, 194) solid 2px;
  background-color: #212121;
}

.btn-container:hover > .svg-1 {
  transform: translate(130%,50%);
}

.btn-container:hover > .svg-2 {
  transform: translate(-120%,-150%) rotate(30deg);
}

.btn-container:hover > .svg-3 {
  transform: translate(60%,-150%) rotate(-45deg);
}

.btn-container:hover > .svg-4 {
  transform: translate(-280%,0%) rotate(30deg);
}

.btn-container:hover > .svg-5 {
  transform: translate(-80%,60%) rotate(-45deg);
}

.btn:active {
  transform: scale(1.05);
}

</style>


================================================
FILE: Buttons/Sameer2244_friendly-wasp-57.html
================================================
<div class="button-container">
  <div class="button">
    
    <div class="button-icon">
        <div class="one"></div>
        <div class="two"></div>
        <div class="dots"></div>
        <div class="dots2"></div>
    </div>
  </div>
    <div class="coin">
    <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50" viewBox="0, 0, 400,400"><g id="svgg"><path id="path0" d="M149.843 25.433 C 149.709 25.781,149.600 31.361,149.600 37.833 L 149.600 49.600 125.374 49.600 C 109.439 49.600,100.883 49.742,100.374 50.014 C 99.622 50.417,99.600 51.116,99.600 75.014 L 99.600 99.600 87.833 99.600 C 81.361 99.600,75.781 99.709,75.433 99.843 C 74.881 100.054,74.350 299.616,74.900 300.085 C 74.955 300.132,80.580 300.267,87.400 300.385 L 99.800 300.600 99.903 325.300 L 100.006 350.000 124.370 350.000 C 137.771 350.000,149.019 350.109,149.367 350.243 C 149.925 350.457,150.000 351.926,150.000 362.643 L 150.000 374.800 199.994 374.800 L 249.988 374.800 250.094 362.500 L 250.200 350.200 275.000 350.000 L 299.800 349.800 300.000 325.000 L 300.200 300.200 312.500 300.094 L 324.800 299.988 324.800 200.000 L 324.800 100.012 312.500 99.906 L 300.200 99.800 300.000 75.000 L 299.800 50.200 275.200 50.000 L 250.600 49.800 250.385 37.400 C 250.267 30.580,250.132 24.955,250.085 24.900 C 249.617 24.352,150.054 24.881,149.843 25.433 M249.503 37.600 C 249.594 48.500,249.677 49.853,250.279 50.300 C 250.783 50.674,253.964 50.800,262.876 50.800 L 274.800 50.800 274.800 74.920 C 274.800 93.147,274.917 99.157,275.280 99.520 C 275.631 99.871,278.880 100.000,287.400 100.000 C 295.920 100.000,299.169 100.129,299.520 100.480 C 300.219 101.179,300.219 298.821,299.520 299.520 C 299.169 299.871,295.920 300.000,287.400 300.000 C 278.880 300.000,275.631 300.129,275.280 300.480 C 274.928 300.832,274.800 304.142,274.800 312.880 L 274.800 324.800 262.880 324.800 C 254.142 324.800,250.832 324.928,250.480 325.280 C 250.129 325.631,250.000 328.887,250.000 337.431 C 250.000 346.811,249.893 349.191,249.453 349.556 C 248.912 350.005,188.755 349.927,125.500 349.395 L 100.800 349.188 100.800 325.070 C 100.800 306.402,100.687 300.801,100.300 300.279 C 99.853 299.677,98.500 299.594,87.600 299.503 L 75.400 299.400 75.400 200.000 L 75.400 100.600 87.800 100.400 L 100.200 100.200 100.303 75.303 L 100.406 50.406 125.303 50.303 L 150.200 50.200 150.301 38.200 C 150.357 31.600,150.486 25.974,150.589 25.698 C 150.738 25.299,160.848 25.218,200.088 25.298 L 249.400 25.400 249.503 37.600 M224.672 99.861 C 224.522 100.011,224.400 144.923,224.400 199.667 L 224.400 299.200 200.029 299.200 C 178.406 299.200,175.586 299.271,175.029 299.829 C 174.385 300.473,174.033 323.378,174.643 324.967 C 175.014 325.934,224.986 325.934,225.357 324.967 C 225.491 324.619,225.600 318.952,225.600 312.373 L 225.600 300.412 237.900 300.306 L 250.200 300.200 250.200 200.000 L 250.200 99.800 237.572 99.694 C 230.627 99.636,224.822 99.711,224.672 99.861 M249.520 100.480 C 250.280 101.240,250.212 298.926,249.452 299.557 C 249.063 299.880,245.489 299.981,237.152 299.906 L 225.400 299.800 225.298 200.400 C 225.241 145.730,225.280 100.775,225.385 100.500 C 225.653 99.794,248.815 99.775,249.520 100.480 M224.600 312.400 L 224.600 324.600 200.000 324.600 L 175.400 324.600 175.294 312.805 C 175.235 306.317,175.275 300.781,175.382 300.502 C 175.538 300.097,180.575 300.015,200.089 300.097 L 224.600 300.200 224.600 312.400" stroke="none" fill="#dc9c34" fill-rule="evenodd"></path><path id="path1" d="M150.352 75.159 L 149.400 75.930 149.400 87.665 L 149.400 99.400 137.665 99.400 L 125.930 99.400 125.164 100.345 C 124.414 101.272,124.401 103.479,124.499 213.345 L 124.600 325.400 149.500 325.503 L 174.400 325.606 174.400 313.003 L 174.400 300.400 162.480 300.400 C 153.742 300.400,150.432 300.272,150.080 299.920 C 149.709 299.549,149.600 276.702,149.600 199.520 L 149.600 99.600 162.006 99.600 L 174.411 99.600 174.306 87.100 L 174.200 74.600 162.752 74.494 C 151.955 74.394,151.249 74.432,150.352 75.159 M225.867 74.667 C 225.720 74.813,225.600 80.483,225.600 87.267 L 225.600 99.600 238.000 99.600 L 250.400 99.600 250.400 200.000 L 250.400 300.400 238.000 300.400 L 225.600 300.400 225.600 313.000 L 225.600 325.600 237.300 325.587 C 252.518 325.569,250.800 327.243,250.800 312.436 L 250.800 300.800 262.436 300.800 C 274.014 300.800,274.076 300.796,274.823 299.900 C 276.000 298.489,276.000 101.511,274.823 100.100 C 274.076 99.204,274.014 99.200,262.436 99.200 L 250.800 99.200 250.800 87.574 C 250.800 80.324,250.644 75.656,250.386 75.174 C 249.966 74.389,226.627 73.906,225.867 74.667 M175.600 175.370 L 175.600 250.351 177.300 250.600 C 179.735 250.958,199.870 250.665,200.267 250.267 C 200.701 249.832,200.909 103.531,200.478 101.868 L 200.149 100.600 187.875 100.494 L 175.600 100.388 175.600 175.370" stroke="none" fill="#fce912" fill-rule="evenodd"></path><path id="path2" d="M150.668 25.465 C 150.521 25.613,150.400 31.193,150.400 37.867 L 150.400 50.000 200.006 50.000 L 249.612 50.000 249.506 37.700 L 249.400 25.400 200.168 25.298 C 173.091 25.243,150.816 25.318,150.668 25.465 M100.400 75.200 L 100.400 100.000 112.320 100.000 C 121.058 100.000,124.368 99.872,124.720 99.520 C 125.072 99.168,125.200 95.858,125.200 87.120 L 125.200 75.200 137.120 75.200 C 145.858 75.200,149.168 75.072,149.520 74.720 C 149.872 74.368,150.000 71.058,150.000 62.320 L 150.000 50.400 125.200 50.400 L 100.400 50.400 100.400 75.200 M175.383 75.301 C 175.275 75.580,175.236 81.207,175.294 87.804 L 175.400 99.800 200.000 99.800 L 224.600 99.800 224.600 87.400 L 224.600 75.000 200.089 74.897 C 180.581 74.815,175.538 74.897,175.383 75.301 M150.486 100.474 C 149.782 101.178,149.776 298.816,150.480 299.520 C 151.183 300.223,174.134 300.204,174.713 299.500 C 174.993 299.159,175.040 267.381,174.862 199.600 L 174.600 100.200 162.786 100.094 C 153.932 100.015,150.850 100.110,150.486 100.474 M75.385 100.900 C 75.280 101.175,75.241 145.950,75.298 200.400 L 75.400 299.400 87.700 299.506 L 100.000 299.612 100.000 200.006 L 100.000 100.400 87.787 100.400 C 78.385 100.400,75.531 100.515,75.385 100.900" stroke="none" fill="#fcfcfc" fill-rule="evenodd"></path><path id="path3" d="M149.200 12.200 L 149.200 24.400 124.200 24.400 L 99.200 24.400 99.200 36.800 L 99.200 49.200 86.800 49.200 L 74.400 49.200 74.400 74.200 L 74.400 99.200 61.800 99.200 L 49.200 99.200 49.200 200.000 L 49.200 300.800 61.800 300.800 L 74.400 300.800 74.400 325.800 L 74.400 350.800 86.800 350.800 L 99.200 350.800 99.200 363.200 L 99.200 375.600 124.200 375.600 L 149.200 375.600 149.200 387.800 L 149.200 400.000 200.000 400.000 L 250.800 400.000 250.800 387.800 L 250.800 375.600 275.800 375.600 L 300.800 375.600 300.800 363.200 L 300.800 350.800 313.200 350.800 L 325.600 350.800 325.600 325.800 L 325.600 300.800 338.200 300.800 L 350.800 300.800 350.800 200.000 L 350.800 99.200 338.200 99.200 L 325.600 99.200 325.600 74.200 L 325.600 49.200 313.200 49.200 L 300.800 49.200 300.800 36.800 L 300.800 24.400 275.800 24.400 L 250.800 24.400 250.800 12.200 L 250.800 0.000 200.000 0.000 L 149.200 0.000 149.200 12.200 M250.085 24.900 C 250.132 24.955,250.267 30.580,250.385 37.400 L 250.600 49.800 275.200 50.000 L 299.800 50.200 300.000 75.000 L 300.200 99.800 312.500 99.906 L 324.800 100.012 324.800 200.000 L 324.800 299.988 312.500 300.094 L 300.200 300.200 300.000 325.000 L 299.800 349.800 275.000 350.000 L 250.200 350.200 250.094 362.500 L 249.988 374.800 199.994 374.800 L 150.000 374.800 150.000 362.643 C 150.000 351.926,149.925 350.457,149.367 350.243 C 149.019 350.109,137.771 350.000,124.370 350.000 L 100.006 350.000 99.903 325.300 L 99.800 300.600 87.400 300.385 C 80.580 300.267,74.955 300.132,74.900 300.085 C 74.350 299.616,74.881 100.054,75.433 99.843 C 75.781 99.709,81.361 99.600,87.833 99.600 L 99.600 99.600 99.600 75.014 C 99.600 51.116,99.622 50.417,100.374 50.014 C 100.883 49.742,109.439 49.600,125.374 49.600 L 149.600 49.600 149.600 37.833 C 149.600 31.361,149.709 25.781,149.843 25.433 C 150.054 24.881,249.617 24.352,250.085 24.900 M225.385 100.500 C 225.280 100.775,225.241 145.730,225.298 200.400 L 225.400 299.800 237.152 299.906 C 245.489 299.981,249.063 299.880,249.452 299.557 C 250.212 298.926,250.280 101.240,249.520 100.480 C 248.815 99.775,225.653 99.794,225.385 100.500 M175.382 300.502 C 175.275 300.781,175.235 306.317,175.294 312.805 L 175.400 324.600 200.000 324.600 L 224.600 324.600 224.600 312.400 L 224.600 300.200 200.089 300.097 C 180.575 300.015,175.538 300.097,175.382 300.502" stroke="none" fill="#040404" fill-rule="evenodd"></path><path id="path4" d="M150.000 62.117 C 150.000 71.013,149.872 74.368,149.520 74.720 C 149.168 75.072,145.858 75.200,137.120 75.200 L 125.200 75.200 125.200 87.120 C 125.200 95.858,125.072 99.168,124.720 99.520 C 124.368 99.872,121.013 100.000,112.118 100.000 L 99.997 100.000 100.194 200.100 C 100.302 255.155,100.486 311.222,100.601 324.694 L 100.812 349.188 125.506 349.395 C 188.744 349.927,248.912 350.005,249.453 349.556 C 249.893 349.191,250.000 346.811,250.000 337.431 C 250.000 328.887,250.129 325.631,250.480 325.280 C 250.832 324.928,254.142 324.800,262.880 324.800 L 274.800 324.800 274.800 312.880 C 274.800 304.142,274.928 300.832,275.280 300.480 C 275.631 300.129,278.880 300.000,287.400 300.000 C 295.920 300.000,299.169 299.871,299.520 299.520 C 300.219 298.821,300.219 101.179,299.520 100.480 C 299.169 100.129,295.920 100.000,287.400 100.000 C 278.880 100.000,275.631 99.871,275.280 99.520 C 274.917 99.157,274.800 93.149,274.800 74.931 L 274.800 50.823 262.500 50.603 C 255.735 50.481,227.655 50.295,200.100 50.188 L 150.000 49.994 150.000 62.117 M174.306 87.100 L 174.411 99.600 162.034 99.600 L 149.658 99.600 149.398 97.500 C 149.256 96.345,149.198 91.019,149.270 85.664 C 149.439 73.045,147.857 74.356,162.752 74.494 L 174.200 74.600 174.306 87.100 M250.386 75.174 C 250.644 75.656,250.800 80.324,250.800 87.574 L 250.800 99.200 262.436 99.200 C 274.014 99.200,274.076 99.204,274.823 100.100 C 276.000 101.511,276.000 298.489,274.823 299.900 C 274.076 300.796,274.014 300.800,262.436 300.800 L 250.800 300.800 250.800 312.436 C 250.800 324.014,250.796 324.076,249.900 324.823 C 248.763 325.771,225.627 326.035,225.568 325.100 C 225.543 324.700,225.496 324.700,225.335 325.100 C 225.039 325.833,174.803 325.833,174.794 325.100 C 174.789 324.702,174.722 324.703,174.468 325.103 C 174.216 325.500,168.929 325.584,149.374 325.503 L 124.600 325.400 124.499 213.345 C 124.401 103.529,124.414 101.271,125.163 100.345 C 125.968 99.351,141.708 98.684,147.500 99.398 L 149.600 99.658 149.600 199.549 C 149.600 276.709,149.709 299.549,150.080 299.920 C 150.867 300.707,174.262 300.595,175.057 299.800 C 175.577 299.280,178.898 299.200,200.029 299.200 L 224.400 299.200 224.400 199.587 C 224.400 111.412,224.469 99.948,225.000 99.745 C 225.515 99.547,225.600 97.780,225.600 87.224 C 225.600 80.464,225.720 74.813,225.867 74.667 C 226.627 73.906,249.966 74.389,250.386 75.174 M224.600 87.400 L 224.600 99.800 200.000 99.800 L 175.400 99.800 175.294 87.804 C 175.236 81.207,175.275 75.580,175.383 75.301 C 175.538 74.897,180.581 74.815,200.089 74.897 L 224.600 75.000 224.600 87.400 M174.862 199.600 C 175.040 267.381,174.993 299.159,174.713 299.500 C 174.134 300.204,151.183 300.223,150.480 299.520 C 149.776 298.816,149.782 101.178,150.486 100.474 C 150.850 100.110,153.932 100.015,162.786 100.094 L 174.600 100.200 174.862 199.600 M200.478 101.868 C 200.909 103.531,200.701 249.832,200.267 250.267 C 199.870 250.665,179.735 250.958,177.300 250.600 L 175.600 250.351 175.600 175.370 L 175.600 100.388 187.875 100.494 L 200.149 100.600 200.478 101.868" stroke="none" fill="#fcdc34" fill-rule="evenodd"></path></g></svg>
  </div>
  
    <div class="mario">
    <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="92" viewBox="0, 0, 400,368"><g id="svgg"><path id="path0" d="M289.948 11.326 C 290.108 28.231,288.862 26.999,306.063 27.256 L 318.388 27.440 319.231 28.692 C 320.059 29.921,320.074 30.125,320.074 40.132 C 320.074 49.877,320.106 50.357,320.825 51.128 L 321.576 51.934 345.963 51.975 C 359.376 51.998,372.049 52.060,374.125 52.113 L 377.901 52.210 377.901 26.105 L 377.901 0.000 333.871 0.000 L 289.841 0.000 289.948 11.326 M160.988 52.644 C 160.138 53.182,159.908 56.293,159.880 67.609 C 159.858 76.232,159.751 78.451,159.331 79.027 C 158.837 79.703,158.146 79.752,146.699 79.926 C 135.920 80.090,134.480 80.182,133.593 80.764 L 132.597 81.417 132.597 92.125 C 132.597 106.807,131.325 105.709,148.340 105.709 L 158.314 105.709 159.083 107.299 C 159.809 108.799,159.853 109.489,159.853 119.573 L 159.853 130.258 159.000 131.059 L 158.148 131.860 133.033 131.860 L 107.919 131.860 107.919 107.019 L 107.919 82.177 107.030 81.144 L 106.142 80.110 93.965 79.992 L 81.788 79.873 80.843 80.818 L 79.898 81.763 80.004 106.036 C 80.106 129.308,80.139 130.342,80.812 131.085 C 81.499 131.844,81.778 131.860,94.072 131.866 C 101.331 131.869,106.863 132.019,107.182 132.220 C 108.040 132.762,108.190 152.555,107.357 155.433 C 107.035 156.547,106.596 158.122,106.383 158.932 C 106.039 160.235,105.766 160.506,104.010 161.279 L 102.026 162.154 102.026 172.237 L 102.026 182.320 103.455 182.320 C 104.241 182.320,105.978 182.732,107.315 183.235 L 109.746 184.150 123.473 184.082 C 139.569 184.003,144.940 183.997,200.000 183.997 C 255.389 183.997,260.530 184.003,276.427 184.086 C 289.176 184.153,290.115 184.113,290.976 183.476 L 291.897 182.794 291.994 171.877 L 292.092 160.960 291.161 159.486 L 290.230 158.011 253.679 158.009 C 214.489 158.007,214.999 158.031,213.189 156.094 L 212.155 154.987 212.155 144.217 C 212.155 130.059,210.872 131.164,227.335 131.140 C 237.770 131.124,238.298 131.090,238.661 130.411 C 239.149 129.499,239.176 109.793,238.691 108.516 L 238.340 107.592 227.733 107.479 C 215.815 107.353,214.944 107.163,212.998 104.273 L 212.155 103.022 212.136 80.516 C 212.116 57.346,211.953 53.234,211.028 52.649 C 210.332 52.209,161.683 52.204,160.988 52.644 M241.275 52.997 C 240.512 54.422,240.754 102.525,241.529 103.453 C 242.155 104.203,242.504 104.227,254.013 104.322 C 269.628 104.451,268.198 103.015,268.488 118.858 C 268.643 127.269,268.809 130.098,269.171 130.460 C 269.549 130.838,274.903 130.996,294.585 131.209 C 308.300 131.357,325.466 131.570,332.733 131.683 C 344.404 131.863,346.048 131.819,346.836 131.303 L 347.728 130.718 347.621 119.595 C 347.525 109.628,347.443 108.328,346.830 107.095 L 346.145 105.719 333.953 105.622 L 321.760 105.525 320.917 104.273 C 320.087 103.042,320.074 102.853,320.074 92.551 L 320.074 82.080 318.997 81.003 L 317.920 79.926 305.745 79.926 C 290.751 79.926,289.871 79.713,289.871 76.083 L 289.871 74.770 279.926 74.770 L 269.982 74.770 269.978 66.206 C 269.974 54.695,269.886 54.057,268.186 53.177 C 266.045 52.069,241.858 51.907,241.275 52.997 M268.204 237.317 C 267.416 238.156,267.403 238.354,267.403 250.225 L 267.403 262.280 268.307 263.184 L 269.211 264.088 279.926 264.088 L 290.641 264.088 291.555 263.175 L 292.468 262.261 292.439 250.407 C 292.410 238.801,292.290 237.476,291.197 236.746 C 290.974 236.597,285.890 236.473,279.898 236.470 L 269.005 236.464 268.204 237.317 M188.749 265.063 L 187.845 266.038 187.845 276.357 L 187.845 286.676 188.782 288.273 L 189.718 289.871 199.987 289.871 L 210.257 289.871 211.403 288.906 C 213.577 287.077,213.628 286.783,213.628 276.141 C 213.628 263.140,214.700 264.088,200.007 264.088 L 189.652 264.088 188.749 265.063 M24.933 293.476 C 24.228 294.255,23.802 310.605,24.494 310.375 C 24.717 310.301,24.934 307.006,25.046 301.996 C 25.147 297.454,25.364 293.531,25.528 293.278 C 25.966 292.602,25.619 292.717,24.933 293.476" stroke="none" fill="#ecbf86" fill-rule="evenodd"></path><path id="path1" d="M217.779 55.525 C 217.623 56.082,217.495 66.814,217.495 79.374 L 217.495 102.210 227.901 102.308 L 238.306 102.406 238.302 79.840 C 238.299 67.429,238.195 56.653,238.069 55.893 L 237.841 54.512 227.951 54.512 L 218.062 54.512 217.779 55.525 M54.144 74.801 C 52.408 75.135,50.828 76.491,50.830 77.645 C 50.831 78.044,51.090 77.846,51.547 77.095 C 52.832 74.988,52.922 74.973,66.114 74.751 L 78.269 74.546 67.035 74.514 C 60.856 74.497,55.055 74.626,54.144 74.801 M241.844 109.975 C 241.721 110.295,241.621 115.433,241.621 121.393 C 241.621 135.285,243.204 133.702,229.312 133.702 C 223.352 133.702,218.214 133.802,217.894 133.925 C 217.382 134.122,217.311 135.378,217.311 144.238 L 217.311 154.328 267.772 154.328 L 318.232 154.328 318.232 144.249 L 318.232 134.170 316.523 133.936 C 315.583 133.807,304.125 133.702,291.060 133.702 C 260.265 133.702,263.372 135.198,263.360 120.363 C 263.352 110.652,263.317 110.136,262.639 109.774 C 261.350 109.083,242.115 109.270,241.844 109.975 M135.820 185.899 L 134.807 186.053 134.807 196.108 L 134.807 206.164 136.281 207.139 L 137.755 208.115 147.975 208.017 L 158.195 207.919 158.293 196.777 L 158.390 185.635 147.611 185.691 C 141.683 185.721,136.377 185.815,135.820 185.899 M241.621 196.287 C 241.621 202.145,241.721 207.200,241.844 207.521 C 242.041 208.032,243.305 208.103,252.256 208.103 L 262.444 208.103 263.819 207.169 L 265.193 206.235 265.193 196.168 L 265.193 186.100 263.812 185.872 C 263.052 185.746,257.749 185.642,252.026 185.639 L 241.621 185.635 241.621 196.287 M344.499 207.369 C 343.595 207.733,343.116 208.506,342.789 210.129 C 342.589 211.119,342.632 211.090,343.198 209.845 C 343.546 209.082,344.328 208.130,344.936 207.730 C 346.085 206.974,345.887 206.810,344.499 207.369 M342.259 212.523 C 342.259 213.232,342.334 213.522,342.427 213.168 C 342.520 212.813,342.520 212.233,342.427 211.878 C 342.334 211.524,342.259 211.814,342.259 212.523 M161.572 213.874 C 161.436 214.009,161.326 225.261,161.326 238.879 C 161.326 262.707,161.299 263.671,160.622 264.508 L 159.918 265.378 119.646 265.562 C 97.496 265.663,79.084 265.888,78.729 266.062 C 78.139 266.351,78.085 267.216,78.085 276.322 L 78.085 286.266 78.997 286.984 C 80.999 288.559,81.031 289.058,81.031 318.854 L 81.031 346.229 161.101 346.222 C 224.253 346.216,241.246 346.119,241.527 345.759 C 241.723 345.509,241.895 344.175,241.909 342.795 C 241.931 340.608,242.057 340.163,242.883 339.337 L 243.831 338.389 243.831 328.311 L 243.831 318.232 295.304 318.232 L 346.777 318.232 346.698 278.545 C 346.654 256.717,346.521 238.015,346.403 236.983 L 346.186 235.108 344.336 234.681 C 343.041 234.382,335.801 234.254,320.230 234.254 L 297.974 234.254 297.974 224.316 L 297.974 214.379 296.961 214.107 C 296.404 213.958,289.982 213.831,282.689 213.824 L 269.429 213.812 269.429 224.125 L 269.429 234.438 281.215 234.622 C 287.698 234.724,293.209 234.941,293.462 235.105 C 294.131 235.537,294.116 262.763,293.447 264.088 C 292.578 265.808,291.087 265.990,278.890 265.862 L 267.725 265.746 266.091 263.940 L 264.457 262.134 264.455 251.785 C 264.453 241.680,264.195 238.849,263.219 238.219 C 262.988 238.070,246.344 237.946,226.231 237.943 C 185.406 237.937,187.486 238.066,186.768 235.481 C 186.535 234.641,186.375 229.933,186.374 223.849 L 186.372 213.628 174.095 213.628 C 167.342 213.628,161.707 213.738,161.572 213.874 M213.501 263.164 C 216.832 264.153,216.742 263.825,216.878 275.452 C 217.086 293.148,217.049 293.186,200.027 293.186 C 185.448 293.186,186.605 294.487,186.437 277.901 C 186.310 265.378,186.472 263.771,187.935 263.066 C 189.321 262.398,211.203 262.482,213.501 263.164 M23.771 291.160 C 23.183 292.385,22.921 310.498,23.492 310.498 C 23.752 310.497,24.045 310.287,24.143 310.031 C 24.505 309.089,24.136 290.401,23.771 291.160" stroke="none" fill="#3d44bd" fill-rule="evenodd"></path><path id="path2" d="M102.026 11.045 L 102.026 22.089 90.147 22.186 L 78.269 22.284 78.173 37.293 L 78.076 52.302 118.688 52.315 C 198.090 52.340,211.968 52.284,213.444 51.933 C 215.444 51.458,238.631 51.461,240.000 51.936 C 240.618 52.151,246.506 52.345,253.959 52.397 C 268.106 52.495,269.613 52.718,269.613 54.718 C 269.613 55.162,269.717 56.043,269.843 56.676 L 270.074 57.827 279.972 57.827 L 289.871 57.827 289.871 66.108 L 289.871 74.390 279.834 74.494 L 269.797 74.598 279.834 74.684 L 289.871 74.770 289.871 76.083 C 289.871 79.713,290.751 79.926,305.745 79.926 L 317.920 79.926 318.997 81.003 L 320.074 82.080 320.074 92.551 C 320.074 102.853,320.087 103.042,320.917 104.273 L 321.760 105.525 333.953 105.622 L 346.145 105.719 346.830 107.095 C 347.979 109.408,348.072 130.294,346.937 131.215 C 346.216 131.801,345.002 131.860,333.700 131.860 C 322.694 131.860,321.232 131.927,321.034 132.443 C 320.911 132.763,320.810 137.732,320.810 143.485 C 320.810 159.238,322.068 158.011,305.925 158.011 L 293.960 158.011 293.021 159.243 L 292.081 160.475 292.081 171.555 L 292.081 182.635 291.111 183.399 C 290.181 184.130,289.703 184.162,279.766 184.162 C 272.189 184.162,269.273 184.281,268.950 184.604 C 268.367 185.188,268.320 207.561,268.900 209.085 C 269.502 210.668,269.516 210.670,280.411 210.676 C 291.081 210.682,291.415 210.726,293.186 212.355 C 295.119 214.133,313.351 215.315,320.534 214.128 L 321.915 213.900 321.915 199.952 L 321.915 186.004 335.912 186.004 L 349.908 186.004 349.908 160.041 L 349.908 134.079 363.812 133.982 L 377.716 133.886 377.810 93.094 C 377.885 60.596,377.810 52.294,377.442 52.264 C 375.389 52.097,366.919 52.021,345.963 51.981 L 321.576 51.934 320.825 51.128 C 320.106 50.357,320.074 49.877,320.074 40.132 C 320.074 30.125,320.059 29.921,319.231 28.692 L 318.388 27.440 306.063 27.256 C 297.773 27.132,293.422 26.930,292.771 26.638 C 291.878 26.237,290.239 23.582,290.239 22.536 C 290.239 22.204,284.666 22.099,267.035 22.099 L 243.831 22.099 243.831 11.050 L 243.831 0.000 172.928 0.000 L 102.026 0.000 102.026 11.045 M54.544 75.125 C 53.008 75.373,51.197 76.787,51.197 77.737 C 51.197 78.370,52.117 78.098,52.602 77.321 C 53.717 75.535,55.026 75.336,67.035 75.123 L 78.269 74.924 67.219 74.893 C 61.142 74.876,55.438 74.980,54.544 75.125 M26.151 182.873 C 26.151 183.177,25.894 183.425,25.581 183.425 C 25.267 183.425,24.604 183.864,24.108 184.400 L 23.204 185.375 23.204 210.023 C 23.204 236.196,23.168 235.677,25.057 236.654 C 26.044 237.165,26.151 237.396,26.151 239.026 C 26.151 242.094,25.704 241.989,38.700 241.989 L 50.092 241.989 50.092 253.920 C 50.092 264.460,50.160 265.877,50.675 266.075 C 50.995 266.198,57.227 266.298,64.523 266.298 L 77.789 266.298 78.791 265.225 C 80.529 263.365,80.219 263.379,120.427 263.367 C 153.899 263.356,158.230 263.291,158.733 262.788 C 159.775 261.746,159.776 214.466,158.734 213.141 L 157.958 212.155 146.290 212.149 C 130.366 212.142,131.787 213.635,131.574 196.685 C 131.483 189.445,131.284 184.910,131.046 184.622 C 130.758 184.274,128.127 184.162,120.221 184.162 C 109.979 184.162,109.730 184.144,107.331 183.241 L 104.885 182.320 65.518 182.320 C 30.771 182.320,26.151 182.385,26.151 182.873 M160.925 185.168 C 160.374 186.617,160.648 208.327,161.234 209.669 L 161.676 210.681 173.864 210.681 C 190.071 210.681,188.582 209.329,188.582 224.050 C 188.582 233.786,188.629 234.551,189.268 235.130 C 190.181 235.955,264.389 235.898,265.838 235.070 L 266.667 234.597 266.661 224.204 C 266.658 218.489,266.534 213.634,266.385 213.417 C 265.779 212.532,264.144 212.382,252.893 212.181 L 241.146 211.971 240.370 210.931 C 239.627 209.936,239.587 209.375,239.411 197.488 C 239.309 190.665,239.092 184.876,238.929 184.622 C 238.693 184.259,230.494 184.162,199.969 184.162 L 161.308 184.162 160.925 185.168 M345.120 207.572 C 343.826 208.481,342.607 210.595,342.583 211.971 C 342.574 212.514,342.700 212.417,343.065 211.602 C 343.337 210.994,344.051 210.000,344.652 209.392 C 345.581 208.452,346.844 206.591,346.514 206.648 C 346.456 206.658,345.829 207.074,345.120 207.572 M342.335 223.941 C 342.335 229.715,342.386 232.076,342.449 229.190 C 342.511 226.303,342.511 221.579,342.449 218.692 C 342.386 215.806,342.335 218.168,342.335 223.941 M25.138 289.217 C 24.490 289.910,24.309 290.537,24.309 292.096 L 24.309 294.090 25.252 293.148 C 26.064 292.336,26.178 291.938,26.080 290.269 L 25.967 288.332 25.138 289.217" stroke="none" fill="#fc0404" fill-rule="evenodd"></path><path id="path3" d="M212.948 52.002 C 211.518 52.321,211.377 52.445,211.629 53.159 C 211.784 53.599,212.007 65.094,212.125 78.703 C 212.368 106.771,212.093 104.514,215.502 106.446 C 217.116 107.360,217.197 107.367,227.733 107.479 L 238.340 107.592 238.691 108.516 C 239.176 109.793,239.149 129.499,238.661 130.411 C 238.298 131.090,237.770 131.124,227.335 131.140 C 210.872 131.164,212.155 130.059,212.155 144.217 L 212.155 154.987 213.189 156.094 C 214.999 158.031,214.488 158.007,253.696 158.009 L 290.264 158.011 291.055 159.351 L 291.845 160.690 292.920 159.351 L 293.994 158.011 305.942 158.011 C 322.066 158.011,320.759 159.338,320.901 142.821 L 320.994 131.867 319.927 131.495 C 319.249 131.259,309.944 131.123,294.491 131.123 C 274.027 131.123,270.008 131.040,269.407 130.601 C 268.735 130.109,268.680 129.411,268.488 118.906 C 268.198 103.002,269.647 104.454,253.920 104.313 L 241.987 104.207 241.425 103.350 C 240.934 102.599,240.877 99.379,240.966 77.401 L 241.068 52.310 240.000 51.938 C 238.628 51.459,215.127 51.515,212.948 52.002 M78.085 63.720 L 78.085 75.138 67.654 75.138 C 56.324 75.138,54.097 75.433,52.778 77.110 C 52.410 77.578,51.653 78.075,51.094 78.215 L 50.080 78.470 50.178 119.517 C 50.271 158.351,50.312 160.599,50.934 161.221 C 51.550 161.837,53.175 161.885,76.884 161.983 L 102.176 162.087 104.085 161.246 C 105.761 160.508,106.042 160.225,106.383 158.932 C 106.596 158.122,107.035 156.547,107.357 155.433 C 108.190 152.555,108.040 132.762,107.182 132.220 C 106.863 132.019,101.331 131.869,94.072 131.866 C 81.778 131.860,81.499 131.844,80.812 131.085 C 80.139 130.342,80.106 129.308,80.004 106.036 L 79.898 81.763 80.843 80.818 L 81.788 79.873 93.965 79.992 L 106.142 80.110 107.030 81.144 L 107.919 82.177 107.919 107.019 L 107.919 131.860 133.085 131.860 L 158.251 131.860 159.052 131.008 C 160.272 129.709,160.298 109.808,159.083 107.299 L 158.314 105.709 148.340 105.709 C 131.325 105.709,132.597 106.807,132.597 92.125 L 132.597 81.417 133.593 80.764 C 134.480 80.182,135.918 80.090,146.651 79.926 C 155.846 79.786,158.826 79.629,159.191 79.264 C 159.555 78.900,159.719 75.827,159.879 66.373 C 159.995 59.546,160.211 53.692,160.359 53.365 C 160.827 52.337,159.455 52.302,118.186 52.302 L 78.085 52.302 78.085 63.720 M238.730 55.525 C 239.468 57.748,239.607 101.210,238.882 102.947 L 238.343 104.236 228.095 104.236 L 217.847 104.236 216.491 103.118 L 215.135 102.000 215.135 80.190 L 215.135 58.379 216.131 56.266 L 217.127 54.153 227.699 54.148 L 238.271 54.144 238.730 55.525 M263.892 107.946 C 266.721 109.004,266.667 108.766,266.667 120.152 C 266.667 131.170,266.687 131.280,268.881 132.415 C 269.793 132.887,273.390 132.965,294.094 132.965 L 318.243 132.965 318.146 143.738 L 318.048 154.512 304.788 154.696 C 295.148 154.830,291.309 155.006,290.724 155.341 C 290.096 155.700,282.049 155.801,253.942 155.801 L 217.964 155.801 216.533 154.997 L 215.101 154.192 215.101 144.141 L 215.101 134.089 216.188 133.527 C 217.087 133.062,219.080 132.965,227.741 132.965 C 241.894 132.965,240.823 134.079,240.872 119.307 C 240.900 111.205,241.010 109.112,241.457 108.248 L 242.008 107.182 251.929 107.182 C 261.066 107.182,262.012 107.243,263.892 107.946 M370.411 182.566 C 370.276 182.701,370.166 188.088,370.166 194.537 L 370.166 206.262 358.748 206.262 C 348.333 206.262,347.280 206.318,346.767 206.906 C 346.458 207.261,345.614 208.214,344.893 209.024 C 342.561 211.642,342.541 211.764,342.541 223.561 L 342.541 234.254 344.314 234.254 C 348.910 234.254,348.775 232.886,348.783 279.558 C 348.787 300.322,348.793 317.518,348.796 317.772 C 348.802 318.135,354.172 318.232,374.401 318.232 L 400.000 318.232 400.000 250.276 L 400.000 182.320 385.328 182.320 C 377.259 182.320,370.546 182.431,370.411 182.566 M131.676 184.375 C 131.070 184.629,131.601 207.938,132.254 209.750 C 133.107 212.120,133.243 212.143,146.290 212.149 L 157.958 212.155 158.734 213.141 C 159.771 214.460,159.776 261.746,158.739 262.782 C 158.244 263.277,153.593 263.355,119.696 263.440 C 81.910 263.534,81.193 263.549,79.956 264.276 C 78.049 265.396,78.042 266.042,79.944 265.371 C 81.274 264.902,86.897 264.825,119.907 264.825 L 158.323 264.825 159.456 263.692 L 160.589 262.558 160.589 237.966 C 160.589 214.609,160.623 213.343,161.263 212.764 C 161.861 212.223,163.288 212.155,173.943 212.155 L 185.950 212.155 186.714 213.125 C 187.444 214.054,187.477 214.534,187.477 224.331 L 187.477 234.566 188.431 235.699 L 189.384 236.832 228.320 236.832 C 254.842 236.832,267.378 236.955,267.640 237.216 C 267.906 237.483,268.168 237.426,268.495 237.032 C 268.815 236.647,268.834 236.464,268.553 236.464 C 267.693 236.464,268.004 213.764,268.877 212.891 C 270.146 211.622,289.598 211.777,292.394 213.079 C 293.477 213.584,294.886 213.981,295.525 213.963 L 296.685 213.930 295.396 213.566 C 294.687 213.366,293.692 212.821,293.186 212.355 C 291.413 210.724,291.086 210.681,280.345 210.681 C 268.981 210.681,269.116 210.708,268.690 208.368 C 268.571 207.716,268.523 202.087,268.583 195.860 C 268.699 183.885,268.736 184.162,267.024 184.162 C 266.423 184.162,266.384 184.299,266.714 185.246 C 267.143 186.475,266.958 208.153,266.508 209.445 C 266.106 210.599,265.193 210.681,252.837 210.681 L 241.678 210.681 241.189 209.300 C 240.821 208.261,240.700 204.974,240.700 196.041 C 240.700 184.494,240.623 183.689,239.595 184.444 C 238.771 185.049,239.495 209.758,240.370 210.931 L 241.146 211.971 252.893 212.181 C 264.144 212.382,265.779 212.532,266.385 213.417 C 266.534 213.634,266.658 218.489,266.661 224.204 L 266.667 234.597 265.838 235.070 C 264.389 235.898,190.181 235.955,189.268 235.130 C 188.629 234.551,188.582 233.786,188.582 224.050 C 188.582 209.329,190.071 210.681,173.864 210.681 L 161.676 210.681 161.225 209.669 C 160.900 208.937,160.774 205.328,160.774 196.685 C 160.773 185.127,160.690 184.183,159.669 184.168 C 159.430 184.164,159.300 188.621,159.300 196.813 C 159.300 206.994,159.202 209.583,158.795 210.073 C 158.345 210.614,157.105 210.679,147.561 210.661 C 135.726 210.638,134.624 210.478,133.706 208.656 C 133.025 207.305,132.668 187.017,133.293 185.224 C 133.663 184.162,133.006 183.817,131.676 184.375 M26.796 286.442 C 26.254 286.583,26.151 287.051,26.151 289.370 C 26.151 290.903,25.946 292.487,25.691 292.934 C 25.377 293.482,25.172 296.379,25.046 302.026 L 24.862 310.313 12.431 310.410 L 0.000 310.507 0.000 339.416 L 0.000 368.324 28.913 368.324 L 57.827 368.324 57.827 357.280 L 57.827 346.236 68.526 346.138 L 79.224 346.041 79.197 318.785 C 79.173 296.286,79.074 291.079,78.627 288.950 C 78.329 287.532,78.085 286.331,78.085 286.280 C 78.085 286.111,27.451 286.271,26.796 286.442" stroke="none" fill="#844323" fill-rule="evenodd"></path><path id="path4" d="M216.131 56.266 L 215.135 58.379 215.135 80.190 L 215.135 102.000 216.491 103.118 L 217.847 104.236 228.095 104.236 L 238.343 104.236 238.882 102.947 C 239.607 101.210,239.468 57.748,238.730 55.525 L 238.271 54.144 227.699 54.148 L 217.127 54.153 216.131 56.266 M238.069 55.893 C 238.195 56.653,238.299 67.429,238.302 79.840 L 238.306 102.406 227.901 102.308 L 217.495 102.210 217.495 79.374 C 217.495 66.814,217.623 56.082,217.779 55.525 L 218.062 54.512 227.951 54.512 L 237.841 54.512 238.069 55.893 M241.457 108.248 C 241.010 109.112,240.900 111.205,240.872 119.307 C 240.823 134.079,241.894 132.965,227.741 132.965 C 219.080 132.965,217.087 133.062,216.188 133.527 L 215.101 134.089 215.101 144.141 L 215.101 154.192 216.533 154.997 L 217.964 155.801 253.942 155.801 C 282.049 155.801,290.096 155.700,290.724 155.341 C 291.308 155.007,295.167 154.827,304.788 154.685 C 312.081 154.578,295.382 154.453,267.680 154.409 L 217.311 154.328 217.311 144.238 C 217.311 135.378,217.382 134.122,217.894 133.925 C 218.214 133.802,223.352 133.702,229.312 133.702 C 243.204 133.702,241.621 135.285,241.621 121.393 C 241.621 115.433,241.721 110.295,241.844 109.975 C 242.115 109.270,261.350 109.083,262.639 109.774 C 263.317 110.136,263.352 110.652,263.360 120.363 C 263.372 135.200,259.948 133.637,292.742 133.777 C 312.947 133.863,318.232 133.790,318.232 133.425 C 318.232 133.062,313.158 132.965,294.089 132.965 C 273.389 132.965,269.793 132.886,268.881 132.415 C 266.687 131.280,266.667 131.170,266.667 120.152 C 266.667 114.169,266.518 109.802,266.300 109.395 C 265.343 107.607,262.585 107.182,251.929 107.182 L 242.008 107.182 241.457 108.248 M135.803 184.059 C 132.934 184.248,132.965 184.119,132.965 195.993 C 132.965 206.926,133.215 208.872,134.747 209.877 C 136.208 210.835,158.000 211.030,158.779 210.092 C 159.369 209.381,159.574 184.868,158.994 184.285 C 158.687 183.977,139.818 183.793,135.803 184.059 M241.541 184.024 C 240.558 184.315,240.455 185.787,240.599 197.431 C 240.695 205.214,240.869 208.626,241.213 209.484 L 241.693 210.681 252.845 210.681 C 266.173 210.681,266.185 210.680,266.566 208.887 C 267.077 206.487,266.916 185.000,266.382 184.467 C 265.910 183.995,243.015 183.586,241.541 184.024 M158.293 196.777 L 158.195 207.919 147.975 208.017 L 137.755 208.115 136.281 207.139 L 134.807 206.164 134.807 196.108 L 134.807 186.053 135.820 185.899 C 136.377 185.815,141.683 185.721,147.611 185.691 L 158.390 185.635 158.293 196.777 M263.812 185.872 L 265.193 186.100 265.193 196.168 L 265.193 206.235 263.819 207.169 L 262.444 208.103 252.256 208.103 C 243.305 208.103,242.041 208.032,241.844 207.521 C 241.721 207.200,241.621 202.145,241.621 196.287 L 241.621 185.635 252.026 185.639 C 257.749 185.642,263.052 185.746,263.812 185.872 M161.199 212.828 C 160.645 213.441,160.589 215.723,160.589 238.030 L 160.589 262.558 159.461 263.687 L 158.333 264.815 119.406 264.912 C 83.055 265.003,80.393 265.052,79.190 265.659 C 78.481 266.017,78.232 266.182,78.637 266.028 C 79.042 265.873,97.476 265.663,119.600 265.562 C 157.583 265.388,159.863 265.341,160.484 264.720 C 161.099 264.105,161.154 262.422,161.326 238.937 L 161.510 213.812 173.941 213.715 L 186.372 213.618 186.374 223.844 C 186.375 229.932,186.535 234.641,186.768 235.481 C 187.486 238.066,185.406 237.937,226.231 237.943 C 246.344 237.946,262.988 238.070,263.219 238.219 C 264.195 238.849,264.453 241.680,264.455 251.785 L 264.457 262.134 266.091 263.940 L 267.725 265.746 278.890 265.862 C 291.087 265.990,292.578 265.808,293.447 264.088 C 294.116 262.763,294.131 235.537,293.462 235.105 C 293.209 234.941,287.698 234.724,281.215 234.622 L 269.429 234.438 269.429 224.125 L 269.429 213.812 281.709 213.812 L 293.988 213.812 292.206 212.988 C 289.577 211.773,270.076 211.692,268.877 212.891 C 268.172 213.596,268.140 214.119,268.140 225.046 L 268.140 236.464 279.466 236.470 C 285.695 236.473,290.974 236.597,291.197 236.746 C 292.290 237.476,292.410 238.801,292.439 250.407 L 292.468 262.261 291.555 263.175 L 290.641 264.088 279.926 264.088 L 269.211 264.088 268.294 263.171 L 267.377 262.254 267.418 249.635 L 267.459 237.017 228.420 236.923 L 189.381 236.829 188.429 235.698 L 187.477 234.566 187.477 224.331 C 187.477 214.534,187.444 214.054,186.714 213.125 L 185.950 212.155 173.879 212.155 C 162.653 212.155,161.766 212.202,161.199 212.828 M344.618 234.710 C 346.710 235.215,346.584 232.495,346.589 277.410 C 346.593 319.277,346.559 318.232,347.909 318.232 L 348.777 318.232 348.777 280.018 C 348.777 233.243,348.862 234.172,344.590 234.298 L 343.094 234.343 344.618 234.710 M187.935 263.066 C 186.472 263.771,186.310 265.378,186.437 277.901 C 186.605 294.487,185.448 293.186,200.027 293.186 C 217.049 293.186,217.086 293.148,216.878 275.452 C 216.742 263.825,216.832 264.153,213.501 263.164 C 211.203 262.482,189.321 262.398,187.935 263.066 M211.166 264.503 C 213.708 265.812,213.628 265.432,213.628 276.141 C 213.628 286.783,213.577 287.077,211.403 288.906 L 210.257 289.871 199.987 289.871 L 189.718 289.871 188.782 288.273 L 187.845 286.676 187.845 276.357 L 187.845 266.038 188.749 265.063 L 189.652 264.088 200.007 264.088 C 206.954 264.088,210.626 264.225,211.166 264.503 M78.238 287.201 C 79.044 289.764,79.176 294.116,79.199 318.977 L 79.224 346.225 80.128 346.225 L 81.031 346.225 81.031 318.843 C 81.031 289.920,80.986 289.074,79.342 287.258 C 78.547 286.380,77.970 286.350,78.238 287.201" stroke="none" fill="#585488" fill-rule="evenodd"></path></g></svg>
    </div>
  <p>long click</p>
</div>
<style>
/* From Uiverse.io by Sameer2244 - Tags: button, mario, game */
.button {
  width: 6rem;
  height: 6rem;
  background-color: #da6b34;
  border-radius: 0;
  box-shadow: 5px 5px 0px black;
  transform: translate(0,0);
  z-index: 1;
  padding: 0;
  position: relative;
}

.coin {
  position: absolute;
  z-index: -2;
  top: 50%;
  transform: translate(0,-20px);
  right: 45%;
}

.mario {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translate(15px,200px);
  right: 45%;
}

.button:active ~ .mario {
  animation: jump2 0.6s ease-in-out;
}

.button:active {
  transform: translate(0,-15px);
}

.button:active ~ .coin {
  animation: jump 1s;
}

.button:hover {
  animation: animate 1s infinite;
}

.button-icon {
  position: relative;
  top: 25%;
  left: 63%;
  z-index: 1;
  transform: scale(1.5);
}

.overlay {
  position: absolute;
  width: 6rem;
  height: 6rem;
  background-color: #FFC07B;
}

.one {
  position: absolute;
  background-color: #DE5917;
  box-shadow: 2px 2px 0px black;
  width: 1rem;
  height: 0.35rem;
  z-index: 10;
}

.one:after {
  content: "";
  position: absolute;
  background-color: #DE5917;
  box-shadow: 2px 2px 0px black;
  width: 0.5rem;
  height: 0.5rem;
  transform: translate(5px,15px);
  z-index: 10;
}

.one:before {
  content: "";
  position: absolute;
  background-color: #DE5917;
  box-shadow: 2px 2px 0px black;
  width: 0.5rem;
  height: 0.5rem;
  transform: translate(5px,25px);
  z-index: 10;
}

.two {
  position: absolute;
  background-color: #DE5917;
  box-shadow: 2px 2px 0px black;
  width: 0.5rem;
  height: 0.5rem;
  transform: translate(-50%,50%);
  z-index: 10;
}

.two::after {
  content: "";
  position: absolute;
  background-color: #DE5917;
  box-shadow: 2px 2px 0px black;
  width: 0.5rem;
  height: 0.8rem;
  transform: translate(190%,-5%);
  z-index: 10;
}

.two::before {
  content: "";
  position: absolute;
  background-color: #DE5917;
  width: 0.7rem;
  height: 0.3rem;
  transform: translate(12px,8px);
  z-index: 10;
}

.dots {
  position: absolute;
  width: 5px;
  height: 5px;
  transform: translate(-20px,-12px);
  background-color: #000;
}

.dots::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  transform: translate(50px,0px);
  background-color: #000;
}

.dots2 {
  position: absolute;
  width: 5px;
  height: 5px;
  transform: translate(-20px,40px);
  background-color: #000;
}

.dots2::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  transform: translate(50px,0px);
  background-color: #000;
}

@keyframes animate {
  0% {
    background-color: #FFC07B;
  }

  75% {
    background-color: #DE5917;
  }

  100% {
    background-color: #da6b34;
  }
}

@keyframes jump {
  0% {
    transform: translate(0,-15px) rotateY(0deg);
  }

  50% {
    transform: translate(0,-200px) rotateY(180deg);
  }

  75% {
    transform: translate(0,-15px) rotateY(270deg);
  }

  100% {
    transform: translate(0,-15px) rotateY(360deg);
  }
}

.button-container p {
  color: black;
  text-align: center;
  transform: translate(0,1rem);
  font-weight: bold;
  z-index: -2;
}

@keyframes jump2 {
  0% {
    transform: translate(20px,200px);
  }

  50% {
    transform: translate(20px,25px);
  }

  100% {
    transform: translate(20px,200px);
  }
}
</style>


================================================
FILE: Buttons/Samhubby_fresh-donkey-58.html
================================================
<!-- From Uiverse.io by Samhubby - Tags: button, simple button, ease -->
<button class="cursor-pointer border-black border-2 px-3 py-2 rounded-lg bg-blue-500 text-white border-blue-900 hover:bg-blue-700 drop-shadow-2xl">
  Button
</button>



================================================
FILE: Buttons/SanketSuryawanshi_smooth-mouse-22.html
================================================
<div class="main_div">
  <button>Sign up</button>
</div>
<style>
/* From Uiverse.io by SanketSuryawanshi - Tags: button */
.main_div {
 --color: #3992e6;
 position: relative;
 z-index: 1;
}

.main_div::before {
 content: '';
 position: absolute;
 width: 30px;
 height: 30px;
 background: transparent;
 top: -7px;
 left: -7px;
 z-index: -5;
 border-top: 3px solid var(--color);
 border-left: 3px solid var(--color);
 transition: 0.5s;
}

.main_div::after {
 content: '';
 position: absolute;
 width: 30px;
 height: 30px;
 background: transparent;
 bottom: -7px;
 right: -7px;
 z-index: -5;
 border-right: 3px solid var(--color);
 border-bottom: 3px solid var(--color);
 transition: 0.5s;
}

.main_div:hover::before {
 width: 100%;
 height: 100%;
}

.main_div:hover::after {
 width: 100%;
 height: 100%;
}

.main_div button {
 padding: 0.7em 2em;
 font-size: 16px;
 background: #222222;
 color: #fff;
 border: none;
 cursor: pointer;
 font-family: inherit;
}
</style>


================================================
FILE: Buttons/SanthoshSJ-Dev_fast-bear-50.html
================================================

<button class="button">
  <span class="button-text">Hover me</span>
  <div class="fill-container"></div>
</button>
<style>
/* From Uiverse.io by SanthoshSJ-Dev - Tags: simple, blue, button, fluid, animated */
.button {
  position: relative;
  padding: 24px 64px;
  border-radius: 50px;
  color: #fafafa;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 2px;
  background-color: #212121;
  border: solid 1px #fafafa4d;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.button .button-text {
  position: relative;
  z-index: 2;
}

.button .fill-container {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  padding-bottom: 100%;
  transform: translateY(-50%) rotate(180deg);
}

.button .fill-container::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  border-radius: 50px;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(-100%);
}

.button:hover {
  border-color: blue;
  transform: translateY(-4px);
}

.button:hover .fill-container {
  transform: translateY(-50%) rotate(0);
}

.button:hover .fill-container::after {
  transform: translateY(0);
}
</style>


================================================
FILE: Buttons/SanthoshSJ-Dev_short-goat-24.html
================================================
<button class="button">
  <span>Bubble Button</span>
  <svg aria-hidden="true" preserveAspectRatio="none" viewBox="-5 -5 110 110">
    <path d="M0,0 C0,0 100,0 100,0 C100,0 100,100 100,100 C100,100 0,100 0,100 C0,100 0,0 0,0"></path>
  </svg>
</button>

<style>
/* From Uiverse.io by SanthoshSJ-Dev - Tags: simple, blue, button, bubble, plain */
.button {
  appearance: none;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  line-height: 1;
  padding: 1em 1.5em;
  position: relative;
  transition: filter 0.3s;
}

.button:hover {
  filter: brightness(1.1);
}

.button:active {
  filter: brightness(0.9);
}

.button>span {
  display: block;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  z-index: 1;
}

.button:hover>span {
  transform: scale(1.05);
}

.button:active>span {
  transform: scale(0.95);
}

.button>svg {
  fill: #0c2cde;
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
}

.button>svg>path {
  transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.button:hover>svg>path {
  d: path("M0,0 C0,-5 100,-5 100,0 C105,0 105,100 100,100 C100,105 0,105 0,100 C-5,100 -5,0 0,0");
}

.button:active>svg>path {
  d: path("M0,0 C30,10 70,10 100,0 C95,30 95,70 100,100 C70,90 30,90 0,100 C5,70 5,30 0,0");
}
</style>


================================================
FILE: Buttons/SanthoshSJ-Dev_slimy-lionfish-25.html
================================================
<div class="container">
  <button class="button">
    <div class="plate"></div>
    <div class="plate"></div>
    <div class="plate"></div>
    <div class="plate"></div>
    <div class="plate"></div>
    <div class="button__wrapper">
      <span class="button__text">Battery</span>
    </div>
    <div class="button__box">
      <div class="inner inner__top"></div>
      <div class="inner inner__front"></div>
      <div class="inner inner__bottom"></div>
      <div class="inner inner__back"></div>
      <div class="inner inner__left"></div>
      <div class="inner inner__right"></div>
    </div>
  </button>
</div>
<style>
/* From Uiverse.io by SanthoshSJ-Dev - Tags: glassmorphism, button, colorful, battery */
.button {
  display: flex;
  position: relative;
  width: 200px;
  height: 60px;
  text-decoration: none;
  perspective: 600px;
  background: linear-gradient(#ffffff1a 0%, #ffffff00 30%, #ffffff00 70%, #ffffff1a);
  box-shadow: 0 0 32px #000000;
}

.button::before,
.button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.button::before {
  top: 0;
  transform-origin: top center;
  transform: rotateX(70deg);
  background: linear-gradient(135deg, #ffffff4d 10%, #ffffff00 60%);
}

.button::after {
  bottom: 0;
  transform-origin: bottom center;
  transform: rotateX(-110deg);
  background: radial-gradient(#ffffff00 40%, #ffffff1a);
}

.button__wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: linear-gradient(#ffffff66 0%, #ffffff00 30%, #ffffff00 70%, #ffffff33);
  transform: translate3d(0, 27px, 74px);
  perspective: 600px;
}

.button__text {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 32px;
  font-weight: 900;
  color: #ffffff33;
  transition: all ease-in-out 1s;
}

.button__text::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 200px;
  height: 60px;
  background: linear-gradient(25deg, #ffffff1a, #ffffff00);
  clip-path: path('M230,0H0V80H146.96c0-35.33,33.95-65.83,83.04-80Z');
}

.button__text::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 4px;
  width: 272px;
  height: 40px;
  background: linear-gradient(25deg, #ffffff4d, #ffffff00);
  clip-path: path('M272,9.22V0H0V40H.32C48.19,22.59,151.14,10.26,272,9.22Z');
}

.button__wrapper::before,
.button__wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  width: 84px;
  height: 100%;
  background: linear-gradient(90deg, #ffffff33 0%, #ffffff00 30%, #ffffff00 70%, #ffffff33);
  background: radial-gradient(#ffffff00 40%, #ffffff1a);
}

.button__wrapper::before {
  left: 0;
  transform-origin: left center;
  transform: rotateY(90deg) skewY(-20deg);
}

.button__wrapper::after {
  right: 0;
  transform-origin: right center;
  transform: rotateY(-90deg) skewY(20deg);
}

.button__box {
  position: absolute;
  top: 0;
  left: 8px;
  bottom: 0;
  margin: auto 0;
  width: 180px;
  height: 49px;
  transform: translate3d(0, 4px, 10px);
  perspective: 600px;
}

.inner {
  transition: all ease-in-out 1s;
}

.inner__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #64646433;
  perspective: 600px;
}

.inner__top {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transform-origin: top left;
  transform: rotateX(70deg);
  background: #646464cc;
}

.inner__front {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transform-origin: top left;
  transform: translate3d(0, 24px, 68px);
  background: #646464cc;
}

.inner__bottom {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transform-origin: bottom left;
  transform: rotateX(-110deg);
  background: #64646433;
}

.inner__left {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 68px;
  height: 100%;
  transform-origin: center left;
  transform: rotateY(-90deg) skewY(20deg);
  background: rgba(255, 0, 0, 0);
  transition: all linear .01s;
}

.inner__right {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 68px;
  height: 100%;
  transform-origin: center left;
  transform: rotateY(-90deg) skewY(20deg);
  background: rgba(255, 0, 0, 0);
}

.button:hover .inner__top,
.button:hover .inner__front,
.button:hover .inner__bottom,
.button:hover .inner__back {
  width: 100%;
}

.button:hover .inner__left {
  background: #64646480;
}

.button:hover .inner__right {
  left: 100%;
  background: #64646480;
}

.button:hover .button__text {
  color: #ffffff;
}

.plate {
  position: absolute;
  z-index: 10;
  top: 0;
  left: -20px;
  width: 320px;
  height: 120px;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.plate:nth-child(1) {
  animation-name: plate_1;
}

.plate:nth-child(2) {
  animation-name: plate_2;
}

.plate:nth-child(3) {
  animation-name: plate_3;
}

.plate:nth-child(4) {
  animation-name: plate_4;
}

.plate:nth-child(5) {
  animation-name: plate_5;
}

.button:hover .plate {
  animation-play-state: paused;
}

.plate:nth-child(1):hover~.button__box .inner__top,
.plate:nth-child(1):hover~.button__box .inner__front {
  background: #d8003ccc;
}

.plate:nth-child(1):hover~.button__box .inner__left,
.plate:nth-child(1):hover~.button__box .inner__right {
  background: #d8003c80;
}

.plate:nth-child(1):hover~.button__box .inner__back,
.plate:nth-child(1):hover~.button__box .inner__bottom {
  background: #d8003c33;
}

.plate:nth-child(2):hover~.button__box .inner__top,
.plate:nth-child(2):hover~.button__box .inner__front {
  background: #0064becc;
}

.plate:nth-child(2):hover~.button__box .inner__left,
.plate:nth-child(2):hover~.button__box .inner__right {
  background: #0064be80;
}

.plate:nth-child(2):hover~.button__box .inner__back,
.plate:nth-child(2):hover~.button__box .inner__bottom {
  background: #0064be33;
}

.plate:nth-child(3):hover~.button__box .inner__top,
.plate:nth-child(3):hover~.button__box .inner__front {
  background: #00aa64cc;
}

.plate:nth-child(3):hover~.button__box .inner__left,
.plate:nth-child(3):hover~.button__box .inner__right {
  background: #00aa6480;
}

.plate:nth-child(3):hover~.button__box .inner__back,
.plate:nth-child(3):hover~.button__box .inner__bottom {
  background: #00aa6433;
}

.plate:nth-child(4):hover~.button__box .inner__top,
.plate:nth-child(4):hover~.button__box .inner__front {
  background: #ffe614cc;
}

.plate:nth-child(4):hover~.button__box .inner__left,
.plate:nth-child(4):hover~.button__box .inner__right {
  background: #ffe61480;
}

.plate:nth-child(4):hover~.button__box .inner__back,
.plate:nth-child(4):hover~.button__box .inner__bottom {
  background: #ffe61433;
}

.plate:nth-child(5):hover~.button__box .inner__top,
.plate:nth-child(5):hover~.button__box .inner__front {
  background: #9b32ffcc;
}

.plate:nth-child(5):hover~.button__box .inner__left,
.plate:nth-child(5):hover~.button__box .inner__right {
  background: #9b32ff80;
}

.plate:nth-child(5):hover~.button__box .inner__back,
.plate:nth-child(5):hover~.button__box .inner__bottom {
  background: #9b32ff33;
}

@keyframes plate_1 {
  0% {
    transform: scale(1);
  }

  19.9% {
    transform: scale(1);
  }

  20% {
    transform: scale(0);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes plate_2 {
  0% {
    transform: scale(0);
  }

  19.9% {
    transform: scale(0);
  }

  20% {
    transform: scale(1);
  }

  39.9% {
    transform: scale(1);
  }

  40% {
    transform: scale(0);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes plate_3 {
  0% {
    transform: scale(0);
  }

  39.9% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }

  59.9% {
    transform: scale(1);
  }

  60% {
    transform: scale(0);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes plate_4 {
  0% {
    transform: scale(0);
  }

  59.9% {
    transform: scale(0);
  }

  60% {
    transform: scale(1);
  }

  79.9% {
    transform: scale(1);
  }

  80% {
    transform: scale(0);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes plate_5 {
  0% {
    transform: scale(0);
  }

  79.9% {
    transform: scale(0);
  }

  80% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #212121;
  padding: 50px 50px 80px 50px;
  border-radius: 10px;
}
</style>


================================================
FILE: Buttons/Satwinder04_big-pug-95.html
================================================
<button class="complex-button">HOVER ME</button>

<style>
/* From Uiverse.io by Satwinder04 - Tags: button */
.complex-button {
  background-color: #fa4545;
 /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  /* border-radius: 10px; */
}

.complex-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  transform: skewX(-30deg);
  transition: all 1s ease-in-out;
}

.complex-button:hover::before {
  left: 100%;
}

.complex-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  transition: all 0.5s ease-in-out;
}

.complex-button:hover::after {
  width: 100%;
}

.complex-button span {
  position: relative;
  z-index: 1;
}

.complex-button:hover {
  color: #ffffff;
  background-color: #fa4545;
}

</style>


================================================
FILE: Buttons/Satwinder04_plastic-wolverine-30.html
================================================
<button class="game-button">Play Now!</button>

<style>
/* From Uiverse.io by Satwinder04 - Tags: button */
.game-button {
  background-color: #c43f3f;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0px 4px 0px #a13333;
  transition: all 0.2s ease-in-out;
}

.game-button:hover {
  background-color: #a13333;
  box-shadow: 0px 2px 0px #751c1c;
  transform: translateY(2px);
}

</style>


================================================
FILE: Buttons/Satwinder04_tame-panther-46.html
================================================
<button class="complex-animated-button">Click me</button>

<style>
/* From Uiverse.io by Satwinder04 - Tags: button */
.complex-animated-button {
  --primary-color: #ff7f50;
  --secondary-color: #ffa07a;
  --border-radius: 8px;
  --shadow-color: rgba(0, 0, 0, 0.2);
  --shadow-offset: 2px;
  --shadow-blur: 4px;
  --ripple-color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  border: none;
  border-radius: var(--border-radius);
  color: white;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-color);
  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.complex-animated-button:hover {
  transform: scale(1);
  background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
}

.complex-animated-button:focus {
  outline: none;
}

.complex-animated-button:active {
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

.complex-animated-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: var(--ripple-color);
  border-radius: 50%;
  opacity: 0.5;
}

.complex-animated-button:active::after {
  width: 100%;
  height: 100%;
  transition: width 0.3s ease-out, height 0.3s ease-out;
}

</style>


================================================
FILE: Buttons/Satwinder04_tasty-horse-82.html
================================================
<button class="animated-button">hover me</button>

<style>
/* From Uiverse.io by Satwinder04 - Tags: blue, button, ripple */
.animated-button {
  position: relative;
  display: inline-block;
  padding: 16px 28px;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #1f347b;
  /* border-radius: 40px; */
  overflow: hidden;
  border: none;
  z-index: 1;
}

.animated-button:before {
  transition: 1s;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.animated-button:hover:before {
  width: 300px;
  height: 300px;
  opacity: 0.4;
  transition: all 0.5s ease-out;
}

.animated-button:hover {
  background-color: #fff;
  color: #202960;
  transition: all 0.5s ease-out;
}

.animated-button:hover:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: #255ea4;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }

  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

</style>


================================================
FILE: Buttons/SelfMadeSystem_afraid-rabbit-12.html
================================================
<button class="btn">
  <span>Border ripple</span>
  <div class="ripple-container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</button>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: button, ripple, animated */
/* Note the transparent background :) */
.btn {
  border-radius: 0.5em;
  font-size: larger;
  height: 3em;
  width: 8em;
  position: relative;
  border: none;
  background-color: transparent;
  isolation: isolate;
}

.btn > span {
  position: relative;
  pointer-events: none;
}

.ripple-container {
  position: absolute;
  inset: -0.3em;
  display: grid;
  grid-template-columns: repeat(16, 0.5em);
  border-radius: 0.8em;
  padding: 0.3em;
  mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
  /* I forgor that I need the two mask composites because of firefoxxxxxx */
  mask-composite: exclude;
  mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: exclude;
  -webkit-mask-composite: xor;
  overflow: hidden;
}

.ripple-container > span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ripple-container > span::after {
  content: "";
  pointer-events: none;
  position: absolute;
  background-color: hsl(218, 68%, 65%);
  transition: width 0.5s ease-out, height 0.5s ease-out, opacity 1s;
  width: 18em;
  height: 18em;
  opacity: 0;
  border-radius: 999em;
}

.ripple-container > span:active::after {
  transition: 0s;
  width: 0em;
  height: 0em;
  opacity: 1;
}

.ripple-container::before {
  content: "";
  pointer-events: none;
  position: absolute;
  background-color: hsla(218, 68%, 65%, 0.5);
  width: 13em;
  height: 13em;
  border-radius: 999em;
  transition: transform 0.25s ease-out;
  transform: translate(-25%, -25%) scale(0);
}

.ripple-container:hover::before {
  transform: translate(-25%, -25%) scale(1);
}

</style>


================================================
FILE: Buttons/SelfMadeSystem_brown-kangaroo-43.html
================================================
<button class="btn">
  <span>Ripple</span>
  <div class="ripple-container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</button>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: material design, button, ripple */
.btn {
  border-radius: 0.5em;
  font-size: larger;
  height: 3em;
  width: 6em;
  position: relative;
  border: none;
  background-color: hsl(218, 68%, 52%);
  overflow: hidden;
  isolation: isolate;
  color: white;
  box-shadow: 1px 2px 4px #0007;
  transition: background-color 0.2s;
}

.btn:hover {
  background-color: hsl(218, 68%, 47%);
}

.btn > span {
  position: relative;
  pointer-events: none;
  z-index: 10;
}

.ripple-container {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 0.5em);
}

.ripple-container > span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ripple-container > span::after {
  content: "";
  pointer-events: none;
  position: absolute;
  background-color: hsl(218, 68%, 65%);
  transition: width 0.5s ease-out, height 0.5s ease-out, opacity 1s;
  width: 13em;
  height: 13em;
  opacity: 0;
  border-radius: 999em;
}

.ripple-container > span:active::after {
  transition: 0s;
  width: 0em;
  height: 0em;
  opacity: 1;
}

/*
Use this instead if you want the ripple to start
immediately on click but end abruptly on unclick:

.ripple-container > span::after {
  content: "";
  pointer-events: none;
  position: absolute;
  background-color: hsl(218, 68%, 65%);
  width: 0em;
  height: 0em;
  border-radius: 999em;
  opacity: 1;
}

.ripple-container > span:active::after {
  transition: width 0.25s ease-out, height 0.25s ease-out, opacity 0.75s;
  width: 13em;
  height: 13em;
  opacity: 0;
}

Your Global selectors gets triggered by this:
*/
</style>


================================================
FILE: Buttons/SelfMadeSystem_lucky-cougar-76.html
================================================
<button class="border">
  <div class="outer">
    <div class="inner">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="1.125rem"
        width="1.125rem"
      >
        <path
          fill="#000000"
          d="M14.2199 21.63C13.0399 21.63 11.3699 20.8 10.0499 16.83L9.32988 14.67L7.16988 13.95C3.20988 12.63 2.37988 10.96 2.37988 9.78001C2.37988 8.61001 3.20988 6.93001 7.16988 5.60001L15.6599 2.77001C17.7799 2.06001 19.5499 2.27001 20.6399 3.35001C21.7299 4.43001 21.9399 6.21001 21.2299 8.33001L18.3999 16.82C17.0699 20.8 15.3999 21.63 14.2199 21.63ZM7.63988 7.03001C4.85988 7.96001 3.86988 9.06001 3.86988 9.78001C3.86988 10.5 4.85988 11.6 7.63988 12.52L10.1599 13.36C10.3799 13.43 10.5599 13.61 10.6299 13.83L11.4699 16.35C12.3899 19.13 13.4999 20.12 14.2199 20.12C14.9399 20.12 16.0399 19.13 16.9699 16.35L19.7999 7.86001C20.3099 6.32001 20.2199 5.06001 19.5699 4.41001C18.9199 3.76001 17.6599 3.68001 16.1299 4.19001L7.63988 7.03001Z"
        ></path>
        <path
          fill="#000000"
          d="M10.11 14.4C9.92005 14.4 9.73005 14.33 9.58005 14.18C9.29005 13.89 9.29005 13.41 9.58005 13.12L13.16 9.53C13.45 9.24 13.93 9.24 14.22 9.53C14.51 9.82 14.51 10.3 14.22 10.59L10.64 14.18C10.5 14.33 10.3 14.4 10.11 14.4Z"
        ></path>
      </svg>
      Send Message
    </div>
  </div>
</button>

<style>
/* From Uiverse.io by SelfMadeSystem  - Tags: simple, neumorphism, skeuomorphism, icon, animation, gradient, button */
:focus {
  outline: none;
}
::-moz-focus-inner {
  border: 0;
}

.border {
  position: relative;
  cursor: pointer;
  padding: 3px;
  border-radius: calc(6pt + 3px);
  appearance: none;
  font-weight: 600;
  background: linear-gradient(#dfe1e0, #7f8180);
  border: 1pt solid #e9ebea;
  border-top-width: 0;
  box-shadow: 0px 5px 15px 0px #0004;
  transition: all 0.4s;
}

.border::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 50%;
  transition: inherit;
}

.border:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 15px 0px #0004;
}

.border:hover:not(:active)::before {
  bottom: -6px;
}

.border:active {
  transform: translateY(0px);
  box-shadow: 0px 5px 15px 0px #0000;
  transition: all 0.3s;
}

.outer {
  padding: 4pt;
  background: linear-gradient(#fdfffe, #eceeed, #fdfffe);
  border-radius: 6pt;
}

.inner {
  background: linear-gradient(#eef0ef, #fafcfb, #eef0ef);
  padding: 8pt;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 4pt;
  text-shadow: 0px 1px 1px #0004;
}

.inner svg {
  filter: drop-shadow(0px 1px 0px #0007);
}

:is(.inner, .outer) {
  background-size: 100% 200%;
  transition: background-position-y 0.5s;
}

:active :is(.inner, .outer) {
  background-position-y: 100%;
}

</style>
    

================================================
FILE: Buttons/SelfMadeSystem_modern-fly-8.html
================================================
<button class="btn">
  <span>Border ripple</span>
  <div class="ripple-container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</button>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: button, ripple, animated */
.btn {
  font-size: larger;
  height: 3em;
  width: 8em;
  position: relative;
  border: none;
  isolation: isolate;
}

.btn > span {
  position: absolute;
  border-radius: 0.5em;
  pointer-events: none;
  inset: 0;
  background-color: hsl(218, 68%, 52%);
  color: white;
  box-shadow: 1px 2px 4px #0007;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ripple-container {
  position: absolute;
  inset: -0.3em;
  display: grid;
  grid-template-columns: repeat(16, 0.5em);
  border-radius: 0.8em;
  padding: 0.3em;
  overflow: hidden;
}

.ripple-container > span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ripple-container > span::after {
  content: "";
  pointer-events: none;
  position: absolute;
  background-color: hsl(218, 68%, 65%);
  transition: width 0.5s ease-out, height 0.5s ease-out, opacity 1s;
  width: 18em;
  height: 18em;
  opacity: 0;
  border-radius: 999em;
}

.ripple-container > span:active::after {
  transition: 0s;
  width: 0em;
  height: 0em;
  opacity: 1;
}

.ripple-container::before {
  content: "";
  pointer-events: none;
  position: absolute;
  background-color: hsla(218, 68%, 65%, 0.5);
  width: 13em;
  height: 13em;
  border-radius: 999em;
  transition: transform 0.25s ease-out;
  transform: translate(-25%, -25%) scale(0);
}

.ripple-container:hover::before {
  transform: translate(-25%, -25%) scale(1);
}

</style>


================================================
FILE: Buttons/SelfMadeSystem_quiet-panda-44.html
================================================
<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg">
    <rect class="border" pathLength="100"></rect>
    <rect class="loading" pathLength="100"></rect>

    <svg
      class="done-svg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path
        class="done done-cloud"
        pathLength="100"
        d="M 6.5,20 Q 4.22,20 2.61,18.43 1,16.85 1,14.58 1,12.63 2.17,11.1 3.35,9.57 5.25,9.15 5.88,6.85 7.75,5.43 9.63,4 12,4 14.93,4 16.96,6.04 19,8.07 19,11 q 1.73,0.2 2.86,1.5 1.14,1.28 1.14,3 0,1.88 -1.31,3.19 Q 20.38,20 18.5,20 Z"
      ></path>
      <path
        class="done done-check"
        pathLength="100"
        d="M 7.515,12.74 10.34143,15.563569 15.275,10.625"
      ></path>
    </svg>
  </svg>
  <div class="txt-upload">Upload</div>
</button>

<style>
/* From Uiverse.io by SelfMadeSystem  - Tags: animation, button, upload, line, lineart, line-art */
.button {
  position: relative;
  width: 10rem;
  height: 3rem;
  cursor: pointer;
  border: none;
  background: none;
}

.button svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.border {
  width: 100%;
  height: 100%;
  stroke: black;
  stroke-width: 2px;
  fill: #0000;
  rx: 1em;
  ry: 1em;
  stroke-dasharray: 25;
  transition: fill 0.25s;
  animation: 4s linear infinite stroke-animation;
}

.button:hover .border {
  fill: #0001;
}

.button:focus .border {
  transition: fill 0.25s 7.75s;
  fill: #0000;
}

@keyframes stroke-animation {
  0% {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.txt-upload {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.txt-upload::after {
  content: "";
}

.button:focus .rect {
  stroke-dasharray: 50;
}
.button:focus .border {
  stroke: #0000;
}

.button:focus .txt-upload {
  opacity: 0;
  transition: opacity 0.25s 8s;
}

.button:focus .txt-upload::after {
  animation: 0.66666s anim step-end forwards,
    1.33333s 0.6666s anim2 linear infinite alternate;
}

@keyframes anim {
  0% {
    content: "i";
  }
  50% {
    content: "in";
  }
  to {
    content: "ing";
  }
}

@keyframes anim2 {
  0% {
    content: "ing";
  }
  33% {
    content: "ing.";
  }
  66% {
    content: "ing..";
  }
  to {
    content: "ing...";
  }
}

.loading {
  width: 100%;
  height: 100%;
  stroke: #0055d4;
  stroke-width: 2px;
  fill: none;
  rx: 1em;
  ry: 1em;
  stroke-dasharray: 0 100;
}

.button:focus .loading {
  transition: stroke 0.5s 7.5s, stroke-dasharray 8s 0.5s ease-out;
  stroke: #08ca08;
  stroke-dasharray: 100 0;
}

.done {
  fill: none;
  stroke: #000;
  stroke-dasharray: 0 100;
}

.button:focus .done-cloud {
  transition: stroke-dasharray 0.75s 8.5s ease-out;
  stroke-dasharray: 100 0;
}

.button:focus .done-check {
  transition: stroke-dasharray 0.5s 9.2s ease-out;
  stroke: #08ca08;
  stroke-dasharray: 100 0;
}

</style>
    

================================================
FILE: Buttons/SelfMadeSystem_strange-cobra-12.html
================================================
<a class="codepen-button"><span>Start Coding</span></a>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: animation, button, animated, rainbow, codepen */
/* Yoinked from CodePen, but improved the animation
so that it is smooth among other more minor things */

.codepen-button {
  display: block;
  cursor: pointer;
  color: white;
  margin: 0 auto;
  position: relative;
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
  overflow: hidden;
  padding: 3px;
  isolation: isolate;
}

.codepen-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
  background-size: 25% 100%;
  animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite;
  animation-play-state: paused;
  translate: -5% 0%;
  transition: translate 0.25s ease-out;
}

.codepen-button:hover::before {
  animation-play-state: running;
  transition-duration: 0.75s;
  translate: 0% 0%;
}

@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop {
  to {
    transform: translateX(-25%);
  }
}

.codepen-button span {
  position: relative;
  display: block;
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  background: #000;
  border-radius: 3px;
  height: 100%;
}
</style>


================================================
FILE: Buttons/SelfMadeSystem_terrible-rat-80.html
================================================
<div class="button-container">
  <span class="text">
    <span class="button-lines">
      <span class="button-line-1"></span>
      <span class="button-line-2"></span>
    </span>
  </span>
</div>

<style>
/* From Uiverse.io by SelfMadeSystem  - Tags: 3d, button, game, border, 3d button, illustrated */
.button-container {
  --background: #fefbff;
  --inner-shadow: #9faef9;
  --inner-outline: #34217d;
  --inner-outline-bottom: #fafcfe;
  --inner-outline-middle: #8880d5;
  --inner-outline-outer-top: #fefcff;
  --inner-outline-outer-bottom-1: #29107b;
  --line-1: #8676c9;
  --line-2: #5c69ca;
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  border-radius: 5px;
  box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),
    0px 2px 0px 0px var(--inner-outline-bottom),
    0px -2px 0px 0px var(--inner-outline),
    -2px -2px 0px 0px var(--inner-outline),
    2px -2px 0px 0px var(--inner-outline),
    0px 0px 0px 6px var(--inner-outline-middle),
    0px -2px 0px 7px var(--inner-outline-outer-top),
    0px 4px 0px 7px var(--inner-outline-outer-bottom-1);
}

.button-lines {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.button-line-1 {
  height: 0.2em;
  width: 4em;
  border-radius: 10em;
  display: inline-block;
  background: var(--line-1);
}

.button-line-2 {
  height: 0.2em;
  width: 3em;
  border-radius: 10em;
  display: inline-block;
  background: var(--line-2);
}

</style>
    

================================================
FILE: Buttons/SelfMadeSystem_tough-fireant-47.html
================================================
<button class="btn btn-primary">
  <span class="btn-txt">Get started</span>
  <kbd class="btn-kbd">G</kbd>
</button>

<style>
/* From Uiverse.io by SelfMadeSystem  - Tags: simple, neumorphism, animation, blue, minimalist, button */
.btn {
  margin: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.btn kbd {
  margin: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
}

.btn-primary {
  background: linear-gradient(#1f5afe, #0f4cf5);
  color: white;
  box-shadow: inset 0pt 4pt 3pt -2pt #386fff, 0pt 4pt 5pt -3pt #0009;
  border-bottom: 2pt solid #083acd;
  transition: all 0.5s ease;
}

.btn-primary:hover {
  border-bottom: 4pt solid #083acd;
  translate: 0pt -1pt;
}

.btn-primary:active {
  box-shadow: inset 0pt 4pt 3pt -2pt #386fff, 0pt 4pt 5pt -3pt #0000;
  border-bottom: 1pt solid #083acd;
  translate: 0pt 0pt;
}

.btn-primary kbd {
  background-color: #3e6eff;
  box-shadow: inset 0pt -3pt 3pt -2pt #1f54f0, inset 0pt 3pt 3pt -2pt #658dff,
    0pt 2pt 2pt -2pt #0005, 0pt 0pt 0pt 2pt #0d47f0;
}

.btn-base {
  background: #386fff;
}

</style>
    

================================================
FILE: Buttons/SelfMadeSystem_white-stingray-85.html
================================================
<svg width="0">
  <filter id="l-distort">
    <feTurbulence
      numOctaves="20"
      baseFrequency=".03"
      type="fractalNoise"
    ></feTurbulence>
    <feDisplacementMap scale="60" in="SourceGraphic"></feDisplacementMap>
  </filter>
  <filter id="m-distort">
    <feTurbulence
      numOctaves="20"
      baseFrequency=".02"
      type="fractalNoise"
    ></feTurbulence>
    <feDisplacementMap scale="30" in="SourceGraphic"></feDisplacementMap>
  </filter>
</svg>

<button class="button">
  <div class="btn-bg">
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="bd1"></div>
    <div class="bd1h"></div>
    <div
      class="bg-cloud"
      style="inset: unset; left: -10px; bottom: -20px; height: 70px; scale: 0.5;"
    ></div>
    <div class="bd6"></div>
    <div class="bd-sat"></div>
    <div class="bg-cloud" style="top: 30px; left: 270px; height: 50px;"></div>
    <div class="bg-cloud" style="top: 7px; left: 10px; height: 30px;"></div>
    <div
      class="bg-cloud"
      style="top: 0px; left: 70px; height: 30px; aspect-ratio: 5;"
    ></div>
    <div
      class="bg-cloud"
      style="top: 0px; left: -39px; rotate: 215deg; height: 30px; aspect-ratio: 3;"
    ></div>
    <div class="bd3"></div>
    <div class="bd3a"></div>
    <div class="bd4"></div>
    <div class="bd4h"></div>
    <div class="bd4d"></div>
    <div class="bd5"></div>
  </div>
  <span class="btn-txt">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M11 15H6L13 1V9H18L11 23V15Z"></path>
    </svg>
    Join now
  </span>
</button>

<style>
/* From Uiverse.io by SelfMadeSystem  - Tags: 3d, pink, gradient, button, hover, active, 3d button */
.button {
  --br: 27px;
  --w: 360px;
  --h: 113px;
  --bg-grad: radial-gradient(#fffd 10px, #0000 calc(var(--w) - 60px)),
    linear-gradient(
      70deg in lch,
      #8e0dff,
      #e39cf6 15%,
      #fd9b9a 45%,
      #ff7139 65%,
      #fdbff1 85%
    );

  position: relative;
  cursor: pointer;
  border-radius: var(--br);
  isolation: isolate;
  border: 0;
  overflow: hidden;
  width: var(--w);
  height: var(--h);
}

.btn-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

:where(.btn-bg > div) {
  position: absolute;
  inset: 0;
}

.bg1 {
  inset: -30px;
  filter: url("#l-distort");
  background: var(--bg-grad);
}

.bg2 {
  left: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 1.5;
  background: radial-gradient(#fffd 10px, #0000 60px);
  filter: url("#m-distort");
}

.bg-cloud {
  transform: translate(-50%);
  aspect-ratio: 1.5;
  background: radial-gradient(#fffd, #0000 70%);
  filter: url("#m-distort");
}

.bd-sat {
  mask: linear-gradient(#fff, #fff0 40% 60%, #fff);
}

.bd-sat::after {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: calc(var(--br) + 30px);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  /* I forgor that I need the two mask composites because of firefoxxxxxx */
  mask-composite: exclude;
  mask-composite: xor;
  background: var(--bg-grad);
  filter: url("#l-distort") saturate(3);
  padding: calc(30px + 7px);
}

.bd1 {
  transition: opacity 0.5s;
  border-radius: calc(var(--br) - 18px);
  inset: 6px;
  box-shadow: inset -13px -13px 5px -10px #fffa;
}

.button:hover .bd1 {
  opacity: 0;
}

.bd1h {
  transition: opacity 0.5s;
  border-radius: calc(var(--br) - 18px);
  opacity: 0;
  inset: 6px;
  box-shadow: inset 13px 13px 5px -10px #fffa;
}

.button:hover:not(:active) .bd1h {
  opacity: 1;
}

.bd3 {
  inset: 20px;
  border-radius: 17px;
  border: 2px solid #fff8;
  box-shadow: 0px 0px 6px 0px #fffa, inset -6px -6px 6px -6px #fffa,
    inset 0px 6px 6px -6px #0004;
  filter: blur(1px);
}

.bd3a {
  inset: 42px;
  right: 38px;
  border-radius: 10px;
  filter: blur(4px);
  box-shadow: 0px 0px 20px 2px #0001, inset 0px 0px 3px 0px #fffa;
}

.bd4 {
  transition: opacity 0.5s;
  border-radius: calc(var(--br) - 5px);
  box-shadow: inset 8px 8px 5px -5px #0005;
}

.button:hover .bd4 {
  opacity: 0;
}

.bd4h {
  transition: opacity 0.5s;
  opacity: 0;
  border-radius: calc(var(--br) - 5px);
  box-shadow: inset -8px -8px 5px -5px #0005;
}

.button:hover:not(:active) .bd4h {
  opacity: 1;
}

.bd4d {
  transition: opacity 0.5s;
  opacity: 0;
  border-radius: var(--br);
  box-shadow: inset 0px 0px 5px 3px #0005;
}

.button:active .bd4d {
  opacity: 1;
}

.bd5 {
  left: 26px;
  top: 10px;
  width: 60px;
  height: 12px;
  box-shadow: inset 5px -5px 5px -5px #fff;
  background: linear-gradient(30deg, #fff, #fff0);
  border-radius: 99px;
  filter: blur(1.5px);
}

.bd6 {
  left: 2px;
  top: 26px;
  width: 20px;
  height: 60px;
  rotate: 10deg;
  box-shadow: inset 7px 7px 7px -7px #fff;
  /* background: linear-gradient(150deg, #fff, #fff0); */
  border-radius: 99px;
  filter: blur(1.5px);
}

.btn-txt {
  display: flex;
  align-items: center;
  font-size: 20px;
  width: fit-content;
  margin: auto;
}

.btn-txt svg {
  height: 25px;
}

</style>
    

================================================
FILE: Buttons/Sergestra_angry-dragonfly-60.html
================================================
<button>
  <div>
    <span>
      <p>Hover Me</p><p>:)</p>
    </span>
  </div>
  <div>
    <span>
      <p>Thanks</p><p>:D</p>
    </span>
  </div>
</button>
<style>
/* From Uiverse.io by Sergestra - Tags: button */
button {
 outline: 0;
 border: 0;
 display: flex;
 flex-direction: column;
 width: 100%;
 max-width: 140px;
 height: 50px;
 border-radius: 0.5em;
 box-shadow: 0 0.625em 1em 0 rgba(30, 143, 255, 0.35);
 overflow: hidden;
}

button div {
 transform: translateY(0px);
 width: 100%;
}

button,
button div {
 transition: 0.6s cubic-bezier(.16,1,.3,1);
}

button div span {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 50px;
 padding: 0.75em 1.125em;
}

button div:nth-child(1) {
 background-color: #1e90ff;
}

button div:nth-child(2) {
 background-color: #21dc62;
}

button:hover {
 box-shadow: 0 0.625em 1em 0 rgba(33, 220, 98, 0.35);
}

button:hover div {
 transform: translateY(-50px);
}

button p {
 font-size: 17px;
 font-weight: bold;
 color: #ffffff;
}

button:active {
 transform: scale(0.95);
}
</style>


================================================
FILE: Buttons/SevenAJJY_wet-owl-54.html
================================================
<button class="btn">
  Click Me
</button>
<style>
/* From Uiverse.io by SevenAJJY - Tags: button, hover, code, click */
.btn {
  --main-color: #ffce06;
  --main-alt-color: #fff696;
  height: 44px;
  font-size: 16px!important;
  line-height: 44px;
  font-weight: 700;
  color: #3f5cc3;
  text-shadow: 0 1px 1px #fff8c4;
  text-transform: uppercase;
  text-align: center;
  -webkit-box-shadow: rgb(99 121 133 / 14%) 0 0 0 4px;
  box-shadow: rgb(99 121 133 / 14%) 0 0 0 4px;
  border-radius: 4px;
  border: none;
  border-top: 1px solid var(--main-alt-color);
  border-bottom: 1px solid var(--main-color);
  background-color: var(--main-color);
  outline: 0;
  cursor: pointer;
  margin: 0 0 5px 4px;
  padding: 0 20px;
  transition: transform .3s ease;
}

.btn:hover {
  border-top-color: var(--main-alt-color);
  border-bottom-color: var(--main-color);
  background: -webkit-gradient(linear, left top, left bottom, from(#fae811), to(#f5d604));
}

.btn:active {
  transform: scale(0.7);
}

</style>


================================================
FILE: Buttons/ShadowShahriar_nervous-goat-3.html
================================================

<button>Hover me!</button>
<style>
/* From Uiverse.io by ShadowShahriar - Tags: gradient, button */
button {
 --border-radius: 15px;
 --border-width: 4px;
 appearance: none;
 position: relative;
 padding: 1em 2em;
 border: 0;
 background-color: #212121;
 font-family: "Roboto", Arial, "Segoe UI", sans-serif;
 font-size: 18px;
 font-weight: 500;
 color: #fff;
 z-index: 2;
}

button::after {
 --m-i: linear-gradient(#000, #000);
 --m-o: content-box, padding-box;
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 padding: var(--border-width);
 border-radius: var(--border-radius);
 background-image: conic-gradient(
		#488cfb,
		#29dbbc,
		#ddf505,
		#ff9f0e,
		#e440bb,
		#655adc,
		#488cfb
	);
 -webkit-mask-image: var(--m-i), var(--m-i);
 mask-image: var(--m-i), var(--m-i);
 -webkit-mask-origin: var(--m-o);
 mask-origin: var(--m-o);
 -webkit-mask-clip: var(--m-o);
 mask-composite: exclude;
 -webkit-mask-composite: destination-out;
 filter: hue-rotate(0);
 animation: rotate-hue linear 500ms infinite;
 animation-play-state: paused;
}

button:hover::after {
 animation-play-state: running;
}

@keyframes rotate-hue {
 to {
  filter: hue-rotate(1turn);
 }
}

button,
button::after {
 box-sizing: border-box;
}

button:active {
 --border-width: 5px;
}
</style>


================================================
FILE: Buttons/Shakil-Babu_moody-mule-8.html
================================================
<button class="btn"> Hover me
</button>
<style>
/* From Uiverse.io by Shakil-Babu - Tags: button */
.btn {
 background-color: #00BFA6;
 padding: 14px 40px;
 color: #fff;
 text-transform: uppercase;
 letter-spacing: 2px;
 cursor: pointer;
 border-radius: 10px;
 border: 2px dashed #00BFA6;
 box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 transition: .4s;
}

.btn span:last-child {
 display: none;
}

.btn:hover {
 transition: .4s;
 border: 2px dashed #00BFA6;
 background-color: #fff;
 color: #00BFA6;
}

.btn:active {
 background-color: #87dbd0;
}


</style>


================================================
FILE: Buttons/SharpTH_itchy-mole-30.html
================================================

<button class="btn draw-border">Button</button>
<style>
/* From Uiverse.io by SharpTH - Tags: button */
.draw-border {
 box-shadow: inset 0 0 0 4px #58afd1;
 color: #58afd1;
 transition: color 0.25s 0.0833333333s;
 position: relative;
}

.draw-border::before, .draw-border::after {
 border: 0 solid transparent;
 box-sizing: border-box;
 content: "";
 pointer-events: none;
 position: absolute;
 width: 0;
 height: 0;
 bottom: 0;
 right: 0;
}

.draw-border::before {
 border-bottom-width: 4px;
 border-left-width: 4px;
}

.draw-border::after {
 border-top-width: 4px;
 border-right-width: 4px;
}

.draw-border:hover {
 color: #ffe593;
}

.draw-border:hover::before, .draw-border:hover::after {
 border-color: #ffe593;
 transition: border-color 0s, width 0.25s, height 0.25s;
 width: 100%;
 height: 100%;
}

.draw-border:hover::before {
 transition-delay: 0s, 0s, 0.25s;
}

.draw-border:hover::after {
 transition-delay: 0s, 0.25s, 0s;
}

.btn {
 background: none;
 border: none;
 cursor: pointer;
 line-height: 1.5;
 font: 700 17px "Roboto Slab", sans-serif;
 padding: 1em 2em;
 letter-spacing: 0.05rem;
}

.btn:focus {
 outline: 2px dotted #55d7dc;
}


</style>


================================================
FILE: Buttons/SharpTH_swift-bullfrog-75.html
================================================
<button class="btn-cssbuttons">
<span>Button</span><span>
  <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
    <path fill="#ffffff" d="M767.99994 585.142857q75.995429 0 129.462857 53.394286t53.394286 129.462857-53.394286 129.462857-129.462857 53.394286-129.462857-53.394286-53.394286-129.462857q0-6.875429 1.170286-19.456l-205.677714-102.838857q-52.589714 49.152-124.562286 49.152-75.995429 0-129.462857-53.394286t-53.394286-129.462857 53.394286-129.462857 129.462857-53.394286q71.972571 0 124.562286 49.152l205.677714-102.838857q-1.170286-12.580571-1.170286-19.456 0-75.995429 53.394286-129.462857t129.462857-53.394286 129.462857 53.394286 53.394286 129.462857-53.394286 129.462857-129.462857 53.394286q-71.972571 0-124.562286-49.152l-205.677714 102.838857q1.170286 12.580571 1.170286 19.456t-1.170286 19.456l205.677714 102.838857q52.589714-49.152 124.562286-49.152z"></path>
  </svg>
</span>
<ul>
<li>
  <a href="https://twitter.com/SumethWrrn"><svg height="18" width="18" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
  <path fill="white" d="M962.267429 233.179429q-38.253714 56.027429-92.598857 95.451429 0.585143 7.972571 0.585143 23.990857 0 74.313143-21.723429 148.260571t-65.974857 141.970286-105.398857 120.32-147.456 83.456-184.539429 31.158857q-154.843429 0-283.428571-82.870857 19.968 2.267429 44.544 2.267429 128.585143 0 229.156571-78.848-59.977143-1.170286-107.446857-36.864t-65.170286-91.136q18.870857 2.852571 34.889143 2.852571 24.576 0 48.566857-6.290286-64-13.165714-105.984-63.707429t-41.984-117.394286l0-2.267429q38.838857 21.723429 83.456 23.405714-37.741714-25.161143-59.977143-65.682286t-22.308571-87.990857q0-50.322286 25.161143-93.110857 69.12 85.138286 168.301714 136.265143t212.260571 56.832q-4.534857-21.723429-4.534857-42.276571 0-76.580571 53.979429-130.56t130.56-53.979429q80.018286 0 134.875429 58.294857 62.317714-11.995429 117.174857-44.544-21.138286 65.682286-81.115429 101.741714 53.174857-5.705143 106.276571-28.598857z"></path></svg></a>
</li>
<li>
  <a href="https://codepen.io/sharpth"><svg height="18" width="18" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
  <path fill="white" d="M123.52064 667.99143l344.526782 229.708899 0-205.136409-190.802457-127.396658zM88.051421 585.717469l110.283674-73.717469-110.283674-73.717469 0 147.434938zM556.025711 897.627196l344.526782-229.708899-153.724325-102.824168-190.802457 127.396658 0 205.136409zM512 615.994287l155.406371-103.994287-155.406371-103.994287-155.406371 103.994287zM277.171833 458.832738l190.802457-127.396658 0-205.136409-344.526782 229.708899zM825.664905 512l110.283674 73.717469 0-147.434938zM746.828167 458.832738l153.724325-102.824168-344.526782-229.708899 0 205.136409zM1023.926868 356.00857l0 311.98286q0 23.402371-19.453221 36.566205l-467.901157 311.98286q-11.993715 7.459506-24.57249 7.459506t-24.57249-7.459506l-467.901157-311.98286q-19.453221-13.163834-19.453221-36.566205l0-311.98286q0-23.402371 19.453221-36.566205l467.901157-311.98286q11.993715-7.459506 24.57249-7.459506t24.57249 7.459506l467.901157 311.98286q19.453221 13.163834 19.453221 36.566205z"></path></svg></a>
</li>
<li>
<a href="https://github.com/SharpTH"><svg height="18" width="18" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
<path fill="white" d="M950.930286 512q0 143.433143-83.748571 257.974857t-216.283429 158.573714q-15.433143 2.852571-22.601143-4.022857t-7.168-17.115429l0-120.539429q0-55.442286-29.696-81.115429 32.548571-3.437714 58.587429-10.313143t53.686857-22.308571 46.299429-38.034286 30.281143-59.977143 11.702857-86.016q0-69.12-45.129143-117.686857 21.138286-52.004571-4.534857-116.589714-16.018286-5.12-46.299429 6.290286t-52.589714 25.161143l-21.723429 13.677714q-53.174857-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.689143-22.016-49.152-7.68q-25.161143 64.585143-4.022857 116.589714-45.129143 48.566857-45.129143 117.686857 0 48.566857 11.702857 85.723429t29.988571 59.977143 46.006857 38.253714 53.686857 22.308571 58.587429 10.313143q-22.820571 20.553143-28.013714 58.88-11.995429 5.705143-25.746286 8.557714t-32.548571 2.852571-37.449143-12.288-31.744-35.693714q-10.825143-18.285714-27.721143-29.696t-28.306286-13.677714l-11.410286-1.682286q-11.995429 0-16.603429 2.56t-2.852571 6.582857 5.12 7.972571 7.460571 6.875429l4.022857 2.852571q12.580571 5.705143 24.868571 21.723429t17.993143 29.110857l5.705143 13.165714q7.460571 21.723429 25.161143 35.108571t38.253714 17.115429 39.716571 4.022857 31.744-1.974857l13.165714-2.267429q0 21.723429 0.292571 50.834286t0.292571 30.866286q0 10.313143-7.460571 17.115429t-22.820571 4.022857q-132.534857-44.032-216.283429-158.573714t-83.748571-257.974857q0-119.442286 58.88-220.306286t159.744-159.744 220.306286-58.88 220.306286 58.88 159.744 159.744 58.88 220.306286z"></path></svg></a></li></ul></button>
<style>
/* From Uiverse.io by SharpTH - Tags: icon, social, button, share */
.btn-cssbuttons {
 --btn-color: #275efe;
 position: relative;
 padding: 16px 32px;
 font-family: Roboto, sans-serif;
 font-weight: 500;
 font-size: 16px;
 line-height: 1;
 color: white;
 background: none;
 border: none;
 outline: none;
 overflow: hidden;
 cursor: pointer;
 filter: drop-shadow(0 2px 8px rgba(39, 94, 254, 0.32));
 transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.btn-cssbuttons::before {
 position: absolute;
 content: "";
 top: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 100%;
 background: var(--btn-color);
 border-radius: 24px;
 transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.btn-cssbuttons span,
.btn-cssbuttons span span {
 display: inline-flex;
 vertical-align: middle;
 transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.btn-cssbuttons span {
 transition-delay: 0.05s;
}

.btn-cssbuttons span:first-child {
 padding-right: 7px;
}

.btn-cssbuttons span span {
 margin-left: 8px;
 transition-delay: 0.1s;
}

.btn-cssbuttons ul {
 position: absolute;
 top: 50%;
 left: 0;
 right: 0;
 display: flex;
 margin: 0;
 padding: 0;
 list-style-type: none;
 transform: translateY(-50%);
}

.btn-cssbuttons ul li {
 flex: 1;
}

.btn-cssbuttons ul li a {
 display: inline-flex;
 vertical-align: middle;
 transform: translateY(55px);
 transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.btn-cssbuttons ul li a:hover {
 opacity: 0.5;
}

.btn-cssbuttons:hover::before {
 transform: scale(1.2);
}

.btn-cssbuttons:hover span,
.btn-cssbuttons:hover span span {
 transform: translateY(-55px);
}

.btn-cssbuttons:hover ul li a {
 transform: translateY(0);
}

.btn-cssbuttons:hover ul li:nth-child(1) a {
 transition-delay: 0.15s;
}

.btn-cssbuttons:hover ul li:nth-child(2) a {
 transition-delay: 0.2s;
}

.btn-cssbuttons:hover ul li:nth-child(3) a {
 transition-delay: 0.25s;
}
</style>


================================================
FILE: Buttons/Shashvhat_moody-moth-69.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by Shashvhat - Tags: simple, animation, button, hover, neon */
.button {
  padding: 0.6em 0.9em;
  font-size: 1em;
  background-color: transparent;
  border: 0.2em solid;
  border-color: #00ffff #04ff00 #0051ff #d400ff;
  border-radius: 1.5em;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, border-radius 0.2s ease, color 0.2s ease,
    border-shadow 0.2s ease, border-style 0.2s ease;
}

.button:active {
}

.button:hover {
  transform: scale(1.3);
  border-radius: 1.5em;
  animation: btn-animation 0.4s 0.2s linear infinite;
  color: #00ddff;
}

@keyframes btn-animation {
  0% {
    border-color: #00ffff #04ff00 #0051ff #d400ff;
    transform: rotate(5deg) scale(1.3);
  }

  25% {
    border-color: #d400ff #00ffff #04ff00 #0051ff;
    transform: rotate(-5deg) scale(1.3);
  }

  50% {
    border-color: #0051ff #d400ff #00ffff #04ff00;
    transform: rotate(5deg) scale(1.3);
  }

  75% {
    border-color: #04ff00 #0051ff #d400ff #00ffff;
    transform: rotate(-5deg) scale(1.3);
  }

  100% {
    border-color: #00ffff #04ff00 #0051ff #d400ff;
    transform: rotate(5deg) scale(1.3);
  }
}
</style>


================================================
FILE: Buttons/Shivaraj-Kolekar_horrible-parrot-27.html
================================================
<!-- From Uiverse.io by Shivaraj-Kolekar  - Tags: simple, material design, button, light -->
<button
  class="cursor-pointer text-gray-800 bg-white px-3 py-3 shadow-xl ring-2 ring-gray-900/5 border border-zinc-950/10 border-2 rounded-xl font-bold flex gap-2 text-lg"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 15 15"
    height="28"
    width="28"
    class="mt-1 size-5"
  >
    <path
      clip-rule="evenodd"
      fill-rule="evenodd"
      fill="currentColor"
      d="M1.20308 1.04312C1.00481 0.954998 0.772341 1.0048 0.627577 1.16641C0.482813 1.32802 0.458794 1.56455 0.568117 1.75196L3.92115 7.50002L0.568117 13.2481C0.458794 13.4355 0.482813 13.672 0.627577 13.8336C0.772341 13.9952 1.00481 14.045 1.20308 13.9569L14.7031 7.95693C14.8836 7.87668 15 7.69762 15 7.50002C15 7.30243 14.8836 7.12337 14.7031 7.04312L1.20308 1.04312ZM4.84553 7.10002L2.21234 2.586L13.2689 7.50002L2.21234 12.414L4.84552 7.90002H9C9.22092 7.90002 9.4 7.72094 9.4 7.50002C9.4 7.27911 9.22092 7.10002 9 7.10002H4.84553Z"
    ></path>
  </svg>
  Send Message
</button>


    

================================================
FILE: Buttons/Shoh2008_brown-gecko-29.html
================================================
<button>
    <div>Space</div>
    <div class="liquid"></div>
</button>

<style>
/* From Uiverse.io by Shoh2008 - Tags: button */
button {
  font: 18px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 5px 20px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  transition: 0.2s;
  transform: scale(2);
  border: 1px solid;
}

button span {
  position: relative;
  z-index: 0;
  display: flex;
  color: #fff;
}

button .liquid {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 150px;
  background: #FF229F;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.7);
  z-index: -1;
  transition: 0.6s;
}

button .liquid::after,
button .liquid::before {
  position: absolute;
  content: "🪐";
  width: 200%;
  height: 200%;
  top: 0;
  left: 0;
  transform: translate(-25%, -75%);
}

button .liquid::after {
  border-radius: 45%;
  background: rgba(20, 20, 20, 1);
  box-shadow: 0 0 10px 5px #33053C, inset 0 0 5px #33053C;
  animation: animate 5s linear infinite;
  opacity: 0.8;
}

button .liquid::before {
  content: "🚀";
  border-radius: 40%;
  box-shadow: 0 0 10px rgba(26, 26, 26, 0.5),
        inset 0 0 5px rgba(26, 26, 26, 0.5);
  background: rgba(26, 26, 26, 0.5);
  animation: animate_3881 7s linear infinite;
}

@keyframes animate_3881 {
  0% {
    transform: translate(-25%, -75%) rotate(0);
  }

  100% {
    transform: translate(-25%, -75%) rotate(360deg);
  }
}

button:hover .liquid {
  top: -120px;
}

button:hover {
  box-shadow: 0 0 5px #33053C, inset 0 0 5px #33053C;
  transition-delay: 0.2s;
}

</style>


================================================
FILE: Buttons/Shoh2008_clever-bullfrog-79.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by Shoh2008 - Tags: button */
button {
  --b: 3px;
   /* border thickness */
  --s: .45em;
 /* size of the corner */
  --color: #e2e2e2;
  font-weight: bold;
  padding: calc(.5em + var(--s)) calc(.9em + var(--s));
  color: var(--color);
  --_p: var(--s);
  background: conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .6em;
  font-size: 16px;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

button:hover,
button:focus-visible {
  --_p: 0px;
  outline-color: #ffffff;
  outline-offset: .05em;
}

button:active {
  background: #ffffff;
  color: #000000;
}
</style>


================================================
FILE: Buttons/Shoh2008_hungry-treefrog-88.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by Shoh2008 - Tags: button, jelly */
button {
  padding: 15px 30px;
  font-size: 18px;
  outline: none;
  border: none;
  border-radius: 10px;
  transition: 0.5s;
  background: #1e1e1e;
  color: greenyellow;
  box-shadow: 0 0 10px #363636, inset 0 0 10px #363636;
}

button:hover {
  animation: a 0.5s 1 linear;
}

@keyframes a {
  0% {
    transform: scale(0.7, 1.3);
  }

  25% {
    transform: scale(1.3, 0.7);
  }

  50% {
    transform: scale(0.7, 1.3);
  }

  75% {
    transform: scale(1.3, 0.7);
  }

  100% {
    transform: scale(1, 1);
  }
}
</style>


================================================
FILE: Buttons/Shoh2008_selfish-puma-67.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by Shoh2008 - Tags: button, valve */
.button {
  color: #f7f7f7;
  background: #ff00f2;
  height: 59px;
  width: 167px;
  font-size: 26px;
  border-radius: 3px;
  border: 10px #3b0876;
  border-style: dashed double;
}
</style>


================================================
FILE: Buttons/Shoh2008_short-newt-45.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by Shoh2008 - Tags: skeuomorphism, button */
button {
  background-color: #0078d0;
  border: 0;
  border-radius: 56px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  font-size: 18px;
  font-weight: 600;
  outline: 0;
  padding: 16px 32px;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

button:before {
  background-color: initial;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  border-radius: 125px;
  content: "";
  height: 50%;
  left: 4%;
  opacity: .5;
  position: absolute;
  top: 0;
  -webkit-transition: all .3s;
  transition: all .3s;
  width: 92%;
}

button:hover {
  -webkit-box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}
</style>


================================================
FILE: Buttons/Showbizfleet_sweet-squid-86.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by Showbizfleet - Tags: button */
button {
  height: 50px;
  margin: 5px;
  width: 120px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  border: none;
  border-radius: 5px;
  background: linear-gradient(145deg, #9c27b0, #f44336, #ff9800, #ffc107, #8bc34a, #4caf50, #2196f3, #03a9f4, #00bcd4, #009688);
  background-size: 200%;
  background-position: 0%;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25), inset 0px -1px 0px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease-in-out;
}

button:hover {
  background-position: 100%;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), inset 0px -2px 0px rgba(255, 255, 255, 0.2);
}

button:focus {
  outline: none;
}

button:active {
  background-size: 100%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25), inset 0px -1px 0px rgba(255, 255, 255, 0.2);
}

</style>


================================================
FILE: Buttons/Shreyanjalipb_helpless-cow-14.html
================================================
<div class="emoji-button-container">
  <button class="emoji-button">Hover Me</button>
  <div class="emoji-animations">
    <span class="emoji">😊</span>
    <span class="emoji">🎸</span>
    <span class="emoji">🚀</span>
    <span class="emoji">❤️</span>
  </div>
</div>

<style>
/* From Uiverse.io by Shreyanjalipb  - Tags: button */
.emoji-button-container {
  position: relative;
  display: inline-block;
}

.emoji-button {
  background-color: yellow;
  border: none;
  padding: 15px 30px;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.emoji-animations {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.emoji {
  font-size: 35px;
  opacity: 0;
  transform: translateY(0);
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}

.emoji-button:hover + .emoji-animations {
  opacity: 1;
}

.emoji-button:hover + .emoji-animations .emoji:nth-child(1) {
  opacity: 1;
  transform: translate(-50px, -50px);
}

.emoji-button:hover + .emoji-animations .emoji:nth-child(2) {
  opacity: 1;
  transform: translate(50px, -50px);
}

.emoji-button:hover + .emoji-animations .emoji:nth-child(3) {
  opacity: 1;
  transform: translate(-50px, 50px);
}

.emoji-button:hover + .emoji-animations .emoji:nth-child(4) {
  opacity: 1;
  transform: translate(50px, 50px);
}

</style>
    

================================================
FILE: Buttons/ShrinilDhorda_calm-lionfish-96.html
================================================
<button class="button">
  <p class="text">
  Download 
  </p>
  <div class="svg">
    <svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-download" viewBox="0 0 16 16"> <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"></path> <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"></path> </svg>
  </div>
</button>
<style>
/* From Uiverse.io by ShrinilDhorda - Tags: button, download */
.button {
  padding: 0.8rem 4rem;
  border: none;
  outline: none;
  font-size: 1.3rem;
  border-radius: 0.3rem;
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.953);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.4s ease-in-out;
}

.button .text {
  position: absolute;
  left: 1.8rem;
  top: 1.3rem;
  transition: 0.4s ease-in-out;
  color: rgb(50, 50, 50);
}

.svg {
  transform: translateY(-20px) rotate(30deg);
  opacity: 0;
  width: 2rem;
  transition: 0.4s ease-in-out;
}

.button:hover {
  background-color: rgb(50, 50, 50);
}

.button:hover .svg {
  display: inline-block;
  transform: translateY(0px) rotate(0deg);
  opacity: 1;
}

.button:hover .text {
  opacity: 0;
}

.button:active {
  scale: 0.97;
}
</style>


================================================
FILE: Buttons/ShrinilDhorda_pink-zebra-4.html
================================================
 <button class="crushbtn">
    crush
    <div class="heart1">

        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path>
        </svg>
    </div>
    <div class="heart2">

        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path>
        </svg>
    </div>
    <div class="heart3">

        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path>
        </svg>
    </div>
</button>
<style>
/* From Uiverse.io by ShrinilDhorda - Tags: gradient, button, active, modern, blur filter, svg, crush */
.crushbtn {
  font-size: 2rem;
  padding: 0.7rem 2.4rem;
  letter-spacing: .3rem;
  border-radius: 1.5rem;
  position: relative;
  background-color: #e8e8e8;
  color: red;
  border: none;
  text-shadow: 0 0 3px #ff6e6e;
  overflow: hidden;
  cursor: pointer;
  transition: 0.7s;
  z-index: 2;
}

.heart1 svg {
  position: absolute;
  left: 4.5rem;
  top: 1.8rem;
  opacity: 0;
  fill: red;
  stroke: none;
  transition: 0.7s;
  width: 2rem;
  height: 2rem;
  animation: move1 5s ease-in-out infinite alternate-reverse;
}

.heart2 svg {
  position: absolute;
  left: 0.8rem;
  opacity: 0;
  top: 0.3rem;
  width: 1.5rem;
  height: 1.5rem;
  fill: red;
  stroke: none;
  transform: rotate(-20deg );
  animation: move2 5s ease infinite alternate-reverse;
}

.heart3 svg {
  position: absolute;
  right: 1rem;
  top: 0.5rem;
  opacity: 0;
  width: 1.4rem;
  height: 1.4rem;
  transform: rotate(20deg);
  fill: red;
  stroke: none;
  z-index: -1;
  animation: move3 5s ease infinite alternate-reverse;
}

@keyframes move1 {
  0% {
    top: 2rem;
  }

  50% {
    top: 4rem;
  }

  100% {
    top: 2rem;
  }
}

@keyframes move2 {
  0% {
    top: 0.3rem;
  }

  50% {
    top: 1.5rem;
  }

  100% {
    top: 0.3rem;
  }
}

@keyframes move3 {
  0% {
    top: 1.5rem;
  }

  50% {
    top: .6rem;
  }

  100% {
    top: 1.5rem;
  }
}

.crushbtn:hover .heart1 svg,
.crushbtn:hover .heart2 svg,
.crushbtn:hover .heart3 svg {
  opacity: 1;
  filter: drop-shadow(0 0 10px #ff6e6e)
}

.crushbtn:hover {
  color: red;
  box-shadow: 0 0 10px inset #ff6e6e;
  scale: 105%;
}

.crushbtn:active {
  scale: 100%;
}
</style>


================================================
FILE: Buttons/ShrinilDhorda_wicked-lionfish-83.html
================================================
<button class="btn">
  Watch
</button>


<style>
/* From Uiverse.io by ShrinilDhorda - Tags: button, reflection */
.btn {
  font-size: 1.2rem;
  padding: 1rem 2.5rem;
  border: none;
  outline: none;
  border-radius: 0.4rem;
  cursor: pointer;
  text-transform: uppercase;
  background-color: rgb(14, 14, 26);
  color: rgb(234, 234, 234);
  font-weight: 700;
  transition: 0.6s;
  box-shadow: 0px 0px 60px #1f4c65;
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

.btn:active {
  scale: 0.92;
}

.btn:hover {
  background: rgb(2,29,78);
  background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 60%);
  color: rgb(4, 4, 38);
}
</style>


================================================
FILE: Buttons/Shubh0408_clever-cobra-74.html
================================================
<!-- From Uiverse.io by Shubh0408  - Tags: button, tailwindbutton, tailwindcss -->
<button class="cursor-pointer">
  <label class="flex justify-center items-center">
    <div class="w-fit p-1 m-2 rounded-md border shadow-2xl">
      <div
        class="relative rounded-full shadow-[0px_3px_10px_0px_rgba(156,156,156,0.75)_inset] hover:shadow-[0px_-3px_10px_0px_rgba(156,156,156,0.75)_inset] px-4 py-2 duration-700 flex justify-center items-center overflow-hidden"
      >
        <input type="checkbox" class="peer hidden" />
        <span
          class="absolute -top-5 left-[1.2rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[100ms]"
          >S</span
        >
        <span
          class="absolute -top-5 left-[1.7rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[200ms]"
          >u</span
        >
        <span
          class="absolute -top-5 left-[2.25rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[250ms]"
          >b</span
        >
        <span
          class="absolute -top-5 left-[2.8rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[350ms]"
          >m</span
        >
        <span
          class="absolute -top-5 left-[3.65rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[300ms]"
          >i</span
        >
        <span
          class="absolute -top-5 left-[4rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[350ms]"
          >t</span
        >
        <span
          class="absolute -top-5 left-[4.4rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[400ms]"
          >t</span
        >
        <span
          class="absolute -top-5 left-[4.9rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[450ms]"
          >e</span
        >
        <span
          class="absolute -top-5 left-[5.4rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[500ms]"
          >d</span
        >
        <svg
          width="19"
          height="19"
          viewBox="0 0 0.6 0.6"
          fill="none"
          class="peer-checked:translate-x-24 peer-checked:rotate-45 duration-1000 fill-black peer-checked:fill-green-700 mr-1"
        >
          <path
            d="M.356.541C.327.541.285.52.252.421L.234.367.18.349C.081.316.06.274.06.245S.081.174.18.141L.392.07Q.473.043.517.084C.561.125.55.155.532.209L.461.421c-.033.1-.075.12-.104.12M.191.176C.122.199.097.227.097.245s.025.046.094.069l.063.021q.009.003.012.012L.287.41C.31.479.338.504.356.504S.402.479.425.41L.496.198Q.516.138.49.112C.464.086.442.094.404.106z"
          ></path>
          <path
            d="M.253.36A.02.02 0 0 1 .24.354a.02.02 0 0 1 0-.027l.09-.09C.337.23.349.23.357.237s.007.019 0 .027l-.09.09A.02.02 0 0 1 .254.36"
          ></path>
        </svg>
        <span class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[0ms]"
          >S</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[50ms]"
          >e</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[100ms]"
          >n</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[150ms]"
          >d</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[250ms]"
          >&nbsp;</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[300ms]"
          >M</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[350ms]"
          >e</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[400ms]"
          >s</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[450ms]"
          >s</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[500ms]"
          >a</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[550ms]"
          >g</span
        >
        <span
          class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[600ms]"
          >e</span
        >
      </div>
    </div>
  </label>
</button>


    

================================================
FILE: Buttons/Shubh0408_dry-shrimp-75.html
================================================
<!-- From Uiverse.io by Shubh0408  - Tags: button -->
<button
  class="group relative flex h-14 w-14 flex-col items-center justify-center overflow-hidden rounded-xl border-2 border-red-800 bg-red-400 hover:bg-red-600"
>
  <svg
    viewBox="0 0 1.625 1.625"
    class="absolute -top-7 fill-white delay-100 group-hover:top-6 group-hover:animate-[spin_1.4s] group-hover:duration-1000"
    height="15"
    width="15"
  >
    <path
      d="M.471 1.024v-.52a.1.1 0 0 0-.098.098v.618c0 .054.044.098.098.098h.487a.1.1 0 0 0 .098-.099h-.39c-.107 0-.195 0-.195-.195"
    ></path>
    <path
      d="M1.219.601h-.163A.1.1 0 0 1 .959.504V.341A.033.033 0 0 0 .926.309h-.26a.1.1 0 0 0-.098.098v.618c0 .054.044.098.098.098h.487a.1.1 0 0 0 .098-.099v-.39a.033.033 0 0 0-.032-.033"
    ></path>
    <path
      d="m1.245.465-.15-.15a.02.02 0 0 0-.016-.006.023.023 0 0 0-.023.022v.108c0 .036.029.065.065.065h.107a.023.023 0 0 0 .023-.023.02.02 0 0 0-.007-.016"
    ></path>
  </svg>
  <svg
    width="16"
    fill="none"
    viewBox="0 0 39 7"
    class="origin-right duration-500 group-hover:rotate-90"
  >
    <line stroke-width="4" stroke="white" y2="5" x2="39" y1="5"></line>
    <line
      stroke-width="3"
      stroke="white"
      y2="1.5"
      x2="26.0357"
      y1="1.5"
      x1="12"
    ></line>
  </svg>
  <svg width="16" fill="none" viewBox="0 0 33 39" class="">
    <mask fill="white" id="path-1-inside-1_8_19">
      <path
        d="M0 0H33V35C33 37.2091 31.2091 39 29 39H4C1.79086 39 0 37.2091 0 35V0Z"
      ></path>
    </mask>
    <path
      mask="url(#path-1-inside-1_8_19)"
      fill="white"
      d="M0 0H33H0ZM37 35C37 39.4183 33.4183 43 29 43H4C-0.418278 43 -4 39.4183 -4 35H4H29H37ZM4 43C-0.418278 43 -4 39.4183 -4 35V0H4V35V43ZM37 0V35C37 39.4183 33.4183 43 29 43V35V0H37Z"
    ></path>
    <path stroke-width="4" stroke="white" d="M12 6L12 29"></path>
    <path stroke-width="4" stroke="white" d="M21 6V29"></path>
  </svg>
</button>


    

================================================
FILE: Buttons/Shubh0408_nervous-warthog-96.html
================================================
<!-- From Uiverse.io by Shubh0408  - Tags: button, toggle, click effect, toggle switch, tailwindbutton -->
<label
  class="w-16 h-8 bg-black shadow-inner rounded-full flex justify-around items-center overflow-hidden outline outline-2 outline-offset-2"
>
  <input class="peer hidden" type="checkbox" />
  <div
    class="w-6 h-6 flex justify-center items-center text-white bg-black border-[2px] duration-500 rounded-full peer-checked:translate-y-8"
  ></div>
  <div
    class="w-6 h-6 flex justify-center items-center text-white duration-500 rounded-full -translate-y-8 peer-checked:translate-y-0 rotate-90"
  >
    𝝞
  </div>
</label>


    

================================================
FILE: Buttons/Shubh0408_pretty-cobra-79.html
================================================
<!-- From Uiverse.io by Shubh0408  - Tags: hamburger, menu, animated, color, hover button -->
<button class="group relative inline-block w-[44px] p-[5px] h-[45px] m-[25px]">
  <span
    class="mx-[auto] my-[0] relative top-[12px] w-[30px] h-[6px] bg-[#000] block [transition-property:margin,_width] group-hover:w-[20px] duration-200 after:absolute after:content-[''] after:mt-[12px] after:w-[30px] after:h-[6px] after:bg-[#000] after:block after:left-[0] after:[transition-property:margin,_left] after:duration-200 group-hover:after:mt-[6px] group-hover:after:-left-[5px] before:absolute before:content-[''] before:-mt-[12px] before:w-[30px] before:h-[6px] before:bg-[#000] before:block before:left-[0] before:[transition-property:margin,_width,_left] before:duration-200 group-hover:before:-mt-[6px] group-hover:before:w-[10px] group-hover:before:left-[5px]"
  ></span>
</button>


    

================================================
FILE: Buttons/SiddhantEngineer_calm-shrimp-74.html
================================================
<button class="button">
  <i>
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <defs></defs>
      <title></title>
      <path
        class="a"
        d="M2.758,15.629a1.664,1.664,0,0,1-.882-3.075L20.359,1A1.663,1.663,0,0,1,22.875,2.72L19.281,21.893a1.664,1.664,0,0,1-2.966.691L11.1,15.629Z"
      ></path>
      <path
        class="a"
        d="M11.1,15.629H8.6V20.8a1.663,1.663,0,0,0,2.6,1.374l3.178-2.166Z"
      ></path>
      <line class="a" x1="11.098" x2="22.178" y1="15.629" y2="1.039"></line>
    </svg>
    Send Message</i
  >
</button>

<style>
/* From Uiverse.io by SiddhantEngineer  - Tags: simple, button, rounded, smooth, creative, advanced, click effect, 3d button */
.button {
  box-sizing: border-box;
  background: hsl(0, 0%, 91%);
  padding: 5px 2px;
  border-radius: 10px;
  box-shadow: 0px 1px 2px 1px hsl(0, 0%, 50%), 0px 10px 35px 0px hsl(0, 0%, 65%),
    0px -10px 35px 0px hsl(0, 0%, 100%);
  border: none;
  font-size: 16px;
  background-clip: padding-box;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.1s;
}

.button:active {
  scale: 99%;
  box-shadow: 0px 1px 2px 1px hsl(0, 0%, 70%), 0px 10px 35px 0px hsl(0, 0%, 75%),
    0px -10px 35px 0px hsl(0, 0%, 100%);
}

.button > i {
  background: linear-gradient(hsl(0, 0%, 80%), hsl(0, 0%, 93%));
  box-shadow: 0px 5px 20px -10px hsl(0, 0%, 60%);
  padding: 15px;
  border-radius: 20px;
  font-weight: 600;
  font-style: normal;
  display: flex;
  pointer-events: none;
}

.button > i > svg {
  width: 15px;
  margin-right: 5px;
  fill: none;
  stroke: black;
  pointer-events: none;
}

</style>
    

================================================
FILE: Buttons/SiddhantEngineer_pink-cheetah-76.html
================================================
<button class="button">Click Me</button>

<style>
/* From Uiverse.io by SiddhantEngineer  - Tags: button */
.button {
  --button-accent: rgb(255, 0, 0);
  border: none;
  padding: 5px 20px;
  background: var(--button-accent);
  box-shadow: 0px 5px 0px 0px
      color-mix(in oklab, var(--button-accent) 80%, black),
    0px 5px 0px 5px black;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 900;
  color: white;
  text-shadow: 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}
.button:active {
  box-shadow: 0px 0px 0px 0px color-mix(in oklab, var(--button-accent), black),
    0px 0px 0px 5px black;
  transform: translateY(5px);
}

</style>
    

================================================
FILE: Buttons/Siyu1017_wise-yak-7.html
================================================
<button class="button">Awesome Button</button>

<style>
/* From Uiverse.io by Siyu1017  - Tags: button, awesome */
.button {
  --color-1: #e5fb6a;
  --color-2: #2bf46e;
  --color-1-shadow: #e5fb6a23;
  --color-2-shadow: #2bf46e23;
  --color-1-shadow-focus: #e5fb6a67;
  --color-2-shadow-focus: #2bf46e67;
  cursor: pointer;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  border: 0;
  font-size: 1rem;
  background-image: linear-gradient(
    to right bottom,
    var(--color-1) 0%,
    var(--color-2) 100%
  );
  box-shadow:
    -4px -4px 16px 8px var(--color-1-shadow),
    4px 4px 16px 8px var(--color-2-shadow);
  transition: all 0.3s cubic-bezier(0.6, 0.12, 0.39, 0.83);
}

.button:hover,
.button:active,
.button:focus,
.button:focus-visible,
.button:focus-within {
  box-shadow:
    -4px -4px 32px 4px var(--color-1-shadow-focus),
    4px 4px 32px 4px var(--color-2-shadow-focus);
}

.button:hover {
  filter: contrast(1.25);
}

</style>
    

================================================
FILE: Buttons/Smit-Prajapati_chatty-pug-36.html
================================================
<button class="button">
  <div class="bloom-container">
    <div class="button-container-main">
      <div class="button-inner">
        <div class="back"></div>
        <div class="front">
          <svg viewBox="0 0 512 512" class="svg" xmlns="http://www.w3.org/2000/svg"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
        </div>
      </div>
      <div class="button-glass">
        <div class="back"></div>
        <div class="front"></div>
      </div>
    </div>
    <div class="bloom bloom1"></div>
    <div class="bloom bloom2">
  </div>
  </div></button>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: gradient, button, hover effect, glass button */
.button {
  background: none;
  border: none;
}

.button .bloom-container {
  position: relative;
  transition: all 0.2s ease-in-out;
  border: none;
  background: none;
}

.button .bloom-container .button-container-main {
  width: 110px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: grid;
  place-content: center;
  border-right: 5px solid white;
  border-left: 5px solid rgba(128, 128, 128, 0.147);
  transform: rotate(-45deg);
  transition: all 0.5s ease-in-out;
}

.button .bloom-container .button-container-main .button-inner {
  height: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  box-shadow: rgba(100, 100, 111, 0.5) -10px 5px 10px 0px;
  transition: all 0.5s ease-in-out;
}

.button .bloom-container .button-container-main .button-inner .back {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(60deg, rgb(1, 85, 103) 0%, rgb(147, 245, 255) 100%);
}

.button .bloom-container .button-container-main .button-inner .front {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: linear-gradient(60deg, rgb(0, 103, 140) 0%, rgb(58, 209, 233) 100%);
  display: grid;
  place-content: center;
}

.button .bloom-container .button-container-main .button-inner .front .svg {
  fill: #ffffff;
  opacity: 0.5;
  width: 30px;
  aspect-ratio: 1;
  transform: rotate(45deg);
  transition: all 0.2s ease-in;
}

.button .bloom-container .button-container-main .button-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.888) 100%);
  transform: translate(0%, -50%) rotate(0deg);
  transform-origin: bottom center;
  transition: all 0.5s ease-in-out;
}

.button .bloom-container .bloom {
  height: 1px;
  width: 1px;
  position: absolute;
  background: white;
}

.button .bloom-container .bloom1 {
  top: 10px;
  right: 20px;
  box-shadow: rgb(255, 255, 255) 0px 0px 10px 10px, rgb(255, 255, 255) 0px 0px 20px 20px;
}

.button .bloom-container .bloom2 {
  bottom: 10px;
  left: 20px;
  box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 10px 10px, rgba(255, 255, 255, 0.5) 0px 0px 30px 20px;
}

.button .bloom-container:hover {
  transform: scale(1.1);
}

.button .bloom-container:hover .button-container-main .button-glass {
  transform: translate(0%, -40%);
}

.button .bloom-container:hover .button-container-main .button-inner .front .svg {
  opacity: 1;
  filter: drop-shadow(0 0 10px white);
}

.button .bloom-container:active {
  transform: scale(0.7);
}

.button .bloom-container:active .button-container-main .button-inner {
  transform: scale(1.2);
}
</style>


================================================
FILE: Buttons/SmookyDev_dull-wasp-37.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: glassmorphism, button, hover, hover effect, hoverme, tailwindbutton, button hover effect , tailwindcss -->
<button
  class="px-8 z-30 py-4 bg-rose-400 rounded-md text-white relative font-semibold font-sans after:-z-20 after:absolute after:h-1 after:w-1 after:bg-rose-800 after:left-5 overflow-hidden after:bottom-0 after:translate-y-full after:rounded-md after:hover:scale-[300] after:hover:transition-all after:hover:duration-700 after:transition-all after:duration-700 transition-all duration-700 [text-shadow:3px_5px_2px_#be123c;] hover:[text-shadow:2px_2px_2px_#fda4af] text-2xl"
>
  Hover Me
</button>


    

================================================
FILE: Buttons/SmookyDev_great-dragonfly-65.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: button, gradients, hover effect, hoverme, tailwind, tailwindbutton, button hover effect  -->
<button
  class="cursor-pointer bg-gradient-to-r from-rose-900 to-pink-700 hover:scale-105 duration-700 hover:duration-1000 font-semibold transition-all text-white px-10 py-4 rounded-e relative after:[clip-path:polygon(50%_0%,_100%_0,_100%_34%,_100%_100%,_77%_87%,_88%_62%,_64%_75%,_67%_50%,_48%_32%,_82%_18%)] after:hover:duration-700 after:duration-500 after:absolute after:inset-0 after:z-20 after:bg-pink-600 after:translate-x-0 after:hover:-translate-x-1 after:hover:rotate-[100deg] after:origin-bottom-right after:transition-all after:hover:transition-all after:rounded-e after:hover:skew-y-6 after:content-['Hover_ME'] after:hover:content-['SMOOKY_DEV'] after:flex after:items-center after:justify-center after:bg-gradient-to-r after:from-rose-700 after:to-pink-600 after:hover:scale-x-50 before:[clip-path:polygon(26%_0,_38%_17%,_25%_32%,_41%_66%,_27%_81%,_50%_100%,_0_100%,_0%_70%,_0%_35%,_0_0)] before:hover:duration-700 before:duration-500 before:absolute before:inset-0 before:z-20 before:bg-pink-600 before:translate-x-0 before:hover:translate-x-0 before:hover:-rotate-[45deg] before:origin-bottom-left before:transition-all before:hover:transition-all before:rounded-e before:hover:skew-y-6 before:content-['Hover_ME'] before:hover:content-['SMOOKY'] before:flex before:items-center before:justify-center before:bg-gradient-to-l before:from-rose-700 before:to-pink-600"
>
  Hover Me
</button>


    

================================================
FILE: Buttons/SmookyDev_kind-firefox-93.html
================================================
<a href="#"><span>UIVERSE</span></a>

<style>
/* From Uiverse.io by SmookyDev  - Tags: animation, gradient, button, neon, css, css effect, buttons, button hover effect  */
a {
  position: relative;
  width: 160px;
  height: 50px;
  line-height: 48px;
  background: #000;
  text-transform: uppercase;
  font-weight: bolder;
  font-size: 25px;
  text-align: center;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: 0.5s;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
}

a span {
  position: absolute;
  display: block;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  text-align: center;
  background: #0c0c0c;
  color: rgba(255, 255, 255, 0.2);
  transition: 0.5s;
}

a:hover span {
  color: rgba(255, 255, 255, 1);
}

a span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: rgba(255, 255, 255, 0.1);
  z-index: 10;
}

a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    #c0392b,
    #f39c12,
    #f1c40f,
    #2ecc71,
    #3498db,
    #2980b9,
    #9b59b6,
    #8e44ad,
    #c0392b,
    #f39c12,
    #f1c40f,
    #2ecc71,
    #3498db,
    #2980b9,
    #9b59b6,
    #8e44ad
  );
  background-size: 400%;
  opacity: 0;
  transition: 2.5 s;
  animation: eff 20s linear infinite;
}

a:hover::before,
a:hover::after {
  opacity: 1;
}

a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    #c0392b,
    #f39c12,
    #f1c40f,
    #2ecc71,
    #3498db,
    #2980b9,
    #9b59b6,
    #8e44ad,
    #c0392b,
    #f39c12,
    #f1c40f,
    #2ecc71,
    #3498db,
    #2980b9,
    #9b59b6,
    #8e44ad
  );
  background-size: 400%;
  opacity: 0;
  filter: blur(20px);
  transition: 0.5s;
  animation: eff 20s ease infinite;
}

@keyframes eff {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

</style>
    

================================================
FILE: Buttons/SmookyDev_kind-quail-78.html
================================================
<!-- From Uiverse.io by SmookyDev - Tags: animation, button, hover effect, hoverme, tailwind, tailwindbutton -->
<button class="smky-btn3 relative hover:text-[#778464] py-2 px-6 after:absolute after:h-1 after:hover:h-[200%] transition-all duration-500 hover:transition-all hover:duration-500 after:transition-all after:duration-500 after:hover:transition-all after:hover:duration-500 overflow-hidden z-20 after:z-[-20] after:bg-[#abd373] after:rounded-t-full after:w-full after:bottom-0 after:left-0 text-gray-600">Hover ME</button>



================================================
FILE: Buttons/SmookyDev_proud-dolphin-67.html
================================================
<!-- From Uiverse.io by SmookyDev - Tags: simple, button, light, hover effect, hoverme, hover button, tailwindbutton -->
      <button class="relative px-8 py-2 rounded-md bg-white isolation-auto z-10 border-2 border-lime-500
        before:absolute before:w-full before:transition-all before:duration-700 before:hover:w-full before:-right-full before:hover:right-0 before:rounded-full  before:bg-lime-500 before:-z-10  before:aspect-square before:hover:scale-150 overflow-hidden before:hover:duration-700">Hover Me</button>



================================================
FILE: Buttons/SmookyDev_red-robin-87.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: button, light, light&dark, hover effect, hoverme, hover button, button hover effect , tailwindcss -->
<button
  class="bg-[#ADD8E6] px-6 py-3 text-white relative overflow-hidden z-30 group hover:bg-sky-800 transition-all duration-500 rounded tracking-wider font-semibold"
>
  Hover Me

  <svg
    class="absolute inset-0 left-0 top-0 fill-sky-300 -z-30 opacity-0 group-hover:opacity-100 group-hover:duration-300 group-hover:transition-all group-active:fill-sky-950"
    preserveAspectRatio="xMidYMid meet"
    viewBox="0 0 204.000000 113.000000"
    xmlns="http://www.w3.org/2000/svg"
    version="1.0"
  >
    <g
      stroke="none"
      transform="translate(0.000000,113.000000) scale(0.100000,-0.100000)"
    >
      <path
        d="M850 1069 c-23 -48 -27 -66 -19 -85 5 -14 9 -40 9 -57 0 -18 4 -38 9
            -46 9 -14 19 36 19 99 1 44 7 71 17 78 9 6 35 56 35 67 0 3 -9 5 -20 5 -15 0 -28 -16 -50 -61z"
      ></path>
      <path
        d="M1662 1099 c-24 -17 -40 -34 -38 -37 3 -3 14 2 24 11 10 10 22 17 25 17 4 0 16 9 27 20 30 30 9 24 -38 -11z"
      ></path>
      <path
        d="M101 1104 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
      ></path>
      <path
        d="M1090 1070 c0 -6 7 -10 15 -10 8 0 15 2 15 4 0 2 -7 6 -15 10 -8 3 -15 1 -15 -4z"
      ></path>
      <path
        d="M1 1023 c1 -53 6 -49 11 10 2 20 0 37 -4 37 -4 0 -8 -21 -7 -47z"
      ></path>
      <path
        d="M1121 1024 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
      ></path>
      <path
        d="M101 984 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
      ></path>
      <path
        d="M1140 958 c0 -9 5 -20 10 -23 13 -8 13 5 0 25 -8 13 -10 13 -10 -2z"
      ></path>
      <path
        d="M1286 955 c4 -8 8 -15 10 -15 2 0 4 7 4 15 0 8 -4 15 -10 15 -5 0 -7 -7 -4 -15z"
      ></path>
      <path
        d="M1647 930 c-13 -15 -14 -20 -3 -20 7 0 16 9 19 20 3 11 4 20 3 20 -1 0 -9 -9 -19 -20z"
      ></path>
      <path
        d="M1171 925 c1 -19 18 -51 18 -35 0 8 -4 22 -9 30 -5 8 -9 11 -9 5z"
      ></path>
      <path
        d="M8 875 c6 -11 22 -33 36 -49 27 -30 33 -60 16 -71 -6 -4 -19 -24 -30 -45 l-20 -39 43 -32 c23 -18 43 -34 45 -34 1 -1 4 -60 7 -131 4 -121 6 -130 30 -153 19 -20 25 -22 25 -9 0 8 -7 21 -15 28 -14 12 -15 23 -14 177 1 8 -13
              116 -66 129 -29 7 -35 44 -10 64 8 7 15 19 15 27 0 7 6 16 14 19 27 10 -11 78 -68 124 -18 14 -18 14 -8 -5z"
      ></path>
      <path
        d="M862 830 c-12 -27 -26 -52 -31 -54 -5 -3 -2 -26 7 -51 14 -44 14 -46 -13 -85 -22 -32 -27 -47 -22 -77 11 -63 29 -65 21 -2 -6 52 -5 58 21 82 26 24 27 27 17 69 -9 34 -8 47 3 65 16 25 36 103 26 103 -3 0 -16 -22 -29 -50z"
      ></path>
      <path
        d="M1200 872 c0 -16 67 -89 74 -81 3 3 -12 25 -34 49 -22 24 -40 38 -40 32z"
      ></path>
      <path
        d="M1567 826 c-4 -10 -1 -13 8 -9 8 3 12 9 9 14 -7 12 -11 11 -17 -5z"
      ></path>
      <path
        d="M1536 773 c-6 -14 -5 -15 5 -6 7 7 10 15 7 18 -3 3 -9 -2 -12 -12z"
      ></path>
      <path
        d="M1270 770 c0 -5 7 -10 15 -10 8 0 15 -7 15 -15 0 -8 4 -15 9 -15 5 0 11 -10 14 -22 4 -12 9 -19 12 -16 14 13 -9 60 -36 74 -17 8 -29 10 -29 4z"
      ></path>
      <path
        d="M1344 672 c-19 -12 -29 -109 -24 -236 5 -142 18 -135 17 9 -2 156 2 188 26 216 17 19 4 27 -19 11z"
      ></path>
      <path
        d="M1398 673 c6 -2 18 -2 25 0 6 3 1 5 -13 5 -14 0 -19 -2 -12 -5z"
      ></path>
      <path
        d="M1463 673 c9 -2 25 -2 35 0 9 3 1 5 -18 5 -19 0 -27 -2 -17 -5z"
      ></path>
      <path
        d="M848 433 c2 -36 5 -63 7 -61 1 2 6 28 9 59 5 42 4 58 -6 61 -10 4 -12 -9 -10 -59z"
      ></path>
      <path
        d="M1698 403 c6 -2 18 -2 25 0 6 3 1 5 -13 5 -14 0 -19 -2 -12 -5z"
      ></path>
      <path
        d="M872 345 c0 -16 2 -22 5 -12 2 9 2 23 0 30 -3 6 -5 -1 -5 -18z"
      ></path>
      <path
        d="M1810 345 c0 -10 40 -45 53 -45 6 0 8 1 6 3 -2 1 -16 13 -31 26 -16 14 -28 21 -28 16z"
      ></path>
    </g>
  </svg>
</button>


    

================================================
FILE: Buttons/SmookyDev_sharp-stingray-58.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: glassmorphism, flashy, gradient, button, futuristic, hover button, tailwindbutton, tailwindcss -->
<button
  style="-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));"
  class="px-10 py-3 bg-gradient-to-r from-red-500 to-orange-500 rounded-full shadow-xl group-hover:shadow-2xl group-hover:shadow-red-600 shadow-red-600 uppercase font-serif tracking-widest relative overflow-hidden group text-transparent cursor-pointer z-10 after:absolute after:rounded-full after:bg-red-200 after:h-[85%] after:w-[95%] after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 hover:saturate-[1.15] active:saturate-[1.4]"
>
  Button
  <p
    class="absolute z-40 font-semibold bg-gradient-to-r from-red-500 to-orange-500 bg-clip-text text-transparent top-1/2 left-1/2 -translate-x-1/2 group-hover:-translate-y-full h-full w-full transition-all duration-300 -translate-y-[30%] tracking-widest"
  >
    WELCOME
  </p>
  <p
    class="absolute z-40 top-1/2 left-1/2 bg-gradient-to-r from-red-700 to-orange-700 bg-clip-text text-transparent -translate-x-1/2 translate-y-full h-full w-full transition-all duration-300 group-hover:-translate-y-[40%] tracking-widest font-extrabold"
  >
    SAHARA
  </p>
  <svg
    class="absolute w-full h-full scale-x-125 rotate-180 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30 group-hover:animate-none animate-pulse group-hover:-translate-y-[45%] transition-all duration-300"
    viewBox="0 0 2400 800"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
  >
    <defs>
      <linearGradient id="sssurf-grad" y2="100%" x2="50%" y1="0%" x1="50%">
        <stop
          offset="0%"
          stop-opacity="1"
          stop-color="hsl(37, 99%, 67%)"
        ></stop>
        <stop
          offset="100%"
          stop-opacity="1"
          stop-color="hsl(316, 73%, 52%)"
        ></stop>
      </linearGradient>
    </defs>
    <g transform="matrix(1,0,0,1,0,-91.0877685546875)" fill="url(#sssurf-grad)">
      <path
        opacity="0.05"
        transform="matrix(1,0,0,1,0,35)"
        d="M 0 305.9828838196134 Q 227.6031525693441 450 600 302.17553022897005 Q 1010.7738828515054 450 1200 343.3024459932802 Q 1379.4406250195766 450 1800 320.38902780838214 Q 2153.573162029817 450 2400 314.38564046970816 L 2400 800 L 0 800 L 0 340.3112176762882 Z"
      ></path>
      <path
        opacity="0.21"
        transform="matrix(1,0,0,1,0,70)"
        d="M 0 305.9828838196134 Q 227.6031525693441 450 600 302.17553022897005 Q 1010.7738828515054 450 1200 343.3024459932802 Q 1379.4406250195766 450 1800 320.38902780838214 Q 2153.573162029817 450 2400 314.38564046970816 L 2400 800 L 0 800 L 0 340.3112176762882 Z"
      ></path>
      <path
        opacity="0.37"
        transform="matrix(1,0,0,1,0,105)"
        d="M 0 305.9828838196134 Q 227.6031525693441 450 600 302.17553022897005 Q 1010.7738828515054 450 1200 343.3024459932802 Q 1379.4406250195766 450 1800 320.38902780838214 Q 2153.573162029817 450 2400 314.38564046970816 L 2400 800 L 0 800 L 0 340.3112176762882 Z"
      ></path>
      <path
        opacity="0.53"
        transform="matrix(1,0,0,1,0,140)"
        d="M 0 305.9828838196134 Q 227.6031525693441 450 600 302.17553022897005 Q 1010.7738828515054 450 1200 343.3024459932802 Q 1379.4406250195766 450 1800 320.38902780838214 Q 2153.573162029817 450 2400 314.38564046970816 L 2400 800 L 0 800 L 0 340.3112176762882 Z"
      ></path>
      <path
        opacity="0.68"
        transform="matrix(1,0,0,1,0,175)"
        d="M 0 305.9828838196134 Q 227.6031525693441 450 600 302.17553022897005 Q 1010.7738828515054 450 1200 343.3024459932802 Q 1379.4406250195766 450 1800 320.38902780838214 Q 2153.573162029817 450 2400 314.38564046970816 L 2400 800 L 0 800 L 0 340.3112176762882 Z"
      ></path>
      <path
        opacity="0.84"
        transform="matrix(1,0,0,1,0,210)"
        d="M 0 305.9828838196134 Q 227.6031525693441 450 600 302.17553022897005 Q 1010.7738828515054 450 1200 343.3024459932802 Q 1379.4406250195766 450 1800 320.38902780838214 Q 2153.573162029817 450 2400 314.38564046970816 L 2400 800 L 0 800 L 0 340.3112176762882 Z"
      ></path>
      <path
        opacity="1"
        transform="matrix(1,0,0,1,0,245)"
        d="M 0 305.9828838196134 Q 227.6031525693441 450 600 302.17553022897005 Q 1010.7738828515054 450 1200 343.3024459932802 Q 1379.4406250195766 450 1800 320.38902780838214 Q 2153.573162029817 450 2400 314.38564046970816 L 2400 800 L 0 800 L 0 340.3112176762882 Z"
      ></path>
    </g>
  </svg>
  <svg
    class="absolute w-full h-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-[30%] group-hover:-translate-y-[33%] group-hover:scale-95 transition-all duration-500 z-40 fill-red-500"
    viewBox="0 0 1440 320"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M0,288L9.2,250.7C18.5,213,37,139,55,133.3C73.8,128,92,192,111,224C129.2,256,148,256,166,256C184.6,256,203,256,222,250.7C240,245,258,235,277,213.3C295.4,192,314,160,332,170.7C350.8,181,369,235,388,229.3C406.2,224,425,160,443,122.7C461.5,85,480,75,498,74.7C516.9,75,535,85,554,101.3C572.3,117,591,139,609,170.7C627.7,203,646,245,665,256C683.1,267,702,245,720,245.3C738.5,245,757,267,775,266.7C793.8,267,812,245,831,234.7C849.2,224,868,224,886,218.7C904.6,213,923,203,942,170.7C960,139,978,85,997,53.3C1015.4,21,1034,11,1052,48C1070.8,85,1089,171,1108,197.3C1126.2,224,1145,192,1163,197.3C1181.5,203,1200,245,1218,224C1236.9,203,1255,117,1274,106.7C1292.3,96,1311,160,1329,170.7C1347.7,181,1366,139,1385,128C1403.1,117,1422,139,1431,149.3L1440,160L1440,320L1430.8,320C1421.5,320,1403,320,1385,320C1366.2,320,1348,320,1329,320C1310.8,320,1292,320,1274,320C1255.4,320,1237,320,1218,320C1200,320,1182,320,1163,320C1144.6,320,1126,320,1108,320C1089.2,320,1071,320,1052,320C1033.8,320,1015,320,997,320C978.5,320,960,320,942,320C923.1,320,905,320,886,320C867.7,320,849,320,831,320C812.3,320,794,320,775,320C756.9,320,738,320,720,320C701.5,320,683,320,665,320C646.2,320,628,320,609,320C590.8,320,572,320,554,320C535.4,320,517,320,498,320C480,320,462,320,443,320C424.6,320,406,320,388,320C369.2,320,351,320,332,320C313.8,320,295,320,277,320C258.5,320,240,320,222,320C203.1,320,185,320,166,320C147.7,320,129,320,111,320C92.3,320,74,320,55,320C36.9,320,18,320,9,320L0,320Z"
      fill-opacity="1"
    ></path>
  </svg>
</button>


    

================================================
FILE: Buttons/SoloResearchLab_fast-deer-30.html
================================================
<div class="button-group">
  <div class="button-container">
    <a title="Go to the home page" href="#">
      <svg>
        <path
          d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
        ></path>
      </svg>
    </a>
    <a title="Go to post list page" href="#">
      <svg>
        <path
          d="M5 3a1 1 0 000 2c5.523 0 10 4.477 10 10a1 1 0 102 0C17 8.373 11.627 3 5 3z"
        ></path>
        <path
          d="M4 9a1 1 0 011-1 7 7 0 017 7 1 1 0 11-2 0 5 5 0 00-5-5 1 1 0 01-1-1zM3 15a2 2 0 114 0 2 2 0 01-4 0z"
        ></path>
      </svg>
    </a>
    <a title="Go to about me page" href="#">
      <svg>
        <path
          fill-rule="evenodd"
          d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by SoloResearchLab  - Website: https://uiverse.io/emmanuelh-dev/itchy-turtle-88 - Name: emmanuelh-dev - Tags: tooltip, action, button, smooth */
.button-group {
  display: flex;
  background-color: white;
  padding: 15px; /* 1.25rem assuming base font size is 12px */
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
    0px 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
}

.button-container {
  display: flex;
  width: 100%;
  padding: 15px; /* 1.5rem */
  border-radius: 10px;
}

.button-container a {
  color: #3b82f6; /* light-blue-light */
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  margin-right: 20px; /* 4 * 5 (assuming 1 unit = 5px) */
  padding: 10px; /* 2.5 * 4 */
  background-color: #f3f4f6; /* light-secondary */
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 9999px;
  font-size: 14px;
  text-align: center;
  transition: all 0.2s ease;
}

.button-container a:last-child {
  margin-right: 0;
}

.button-container a:hover {
  color: black;
  border-color: #3b82f6; /* light-blue-light */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.button-container a svg {
  width: 20px; /* 5 * 4 */
  height: 20px;
  fill: currentColor;
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
  .button-group {
    background-color: #1f2937; /* box-dark */
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.5),
      0px 2px 4px -1px rgba(0, 0, 0, 0.3);
  }

  .button-container {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  }

  .button-container a {
    color: #9ca3af; /* gray-400 */
    background-color: #374151; /* button-curved-default-dark */
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
  }

  .button-container a:hover,
  .button-container a:focus,
  .button-container a:active {
    background-color: #4b5563; /* button-curved-pressed-dark */
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
      0px 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
}

</style>
    

================================================
FILE: Buttons/SouravBandyopadhyay_selfish-skunk-42.html
================================================
<!-- From Uiverse.io by SouravBandyopadhyay - Tags: button, bounce, ball, click, tailwind, tailwindbutton, dancing -->
<button class="btn animate-bounce rounded-full bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 font-bold text-blue-900 transition-colors duration-300 hover:from-blue-400 hover:to-teal-500 hover:text-white hover:shadow-lg">Click Me</button>





================================================
FILE: Buttons/SouravBandyopadhyay_wise-panda-94.html
================================================
<!-- From Uiverse.io by SouravBandyopadhyay  - Tags: simple, material design, button, light, modern, clean, hoverme, hover button -->
<button
  class="flex transform cursor-pointer items-center justify-center space-x-2 rounded-full bg-white px-4 py-2 font-semibold tracking-tight text-black shadow-md transition duration-300 hover:scale-110"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="h-6 w-6 rotate-45 transform transition duration-300"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
    ></path>
  </svg>
  <span class="mr-2">Send Message</span>
</button>


    

================================================
FILE: Buttons/Spacious74_helpless-tiger-55.html
================================================
<button class="button">
  <div class="blob1"></div>
  <div class="blob2"></div>
  <div class="inner">Realism</div>
</button>

<style>
/* From Uiverse.io by Spacious74  - Tags: 3d, button, realistic, code, social media, neo */
.button {
  cursor: pointer;
  font-size: 1.6rem;
  border-radius: 16px;
  border: none;
  padding: 2px;
  background: radial-gradient(circle 80px at 80% -10%, #ffffff, #181b1b);
  position: relative;
}
.button::after {
  content: "";
  position: absolute;
  width: 65%;
  height: 60%;
  border-radius: 120px;
  top: 0;
  right: 0;
  box-shadow: 0 0 20px #ffffff38;
  z-index: -1;
}

.blob1 {
  position: absolute;
  width: 70px;
  height: 100%;
  border-radius: 16px;
  bottom: 0;
  left: 0;
  background: radial-gradient(
    circle 60px at 0% 100%,
    #3fe9ff,
    #0000ff80,
    transparent
  );
  box-shadow: -10px 10px 30px #0051ff2d;
}

.inner {
  padding: 14px 25px;
  border-radius: 14px;
  color: #fff;
  z-index: 3;
  position: relative;
  background: radial-gradient(circle 80px at 80% -50%, #777777, #0f1111);
}
.inner::before {
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 14px;
  background: radial-gradient(
    circle 60px at 0% 100%,
    #00e1ff1a,
    #0000ff11,
    transparent
  );
  position: absolute;
}

</style>
    

================================================
FILE: Buttons/Spacious74_horrible-horse-4.html
================================================
<div class="container">
  <button class="button">Hover me</button>
</div>

<style>
/* From Uiverse.io by Spacious74  - Tags: minimalist, gradient, button, hover, dark, gradients, border, click effect */
button {
  font-size: 1.4em;
  padding: 0.6em 0.8em;
  border-radius: 0.5em;
  border: none;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  box-shadow: 2px 2px 3px #000000b4;
}

.container {
  position: relative;
  padding: 3px;
  background: linear-gradient(90deg, #03a9f4, #f441a5);
  border-radius: 0.9em;
  transition: all 0.4s ease;
}

.container::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 0.9em;
  z-index: -10;
  filter: blur(0);
  transition: filter 0.4s ease;
}

.container:hover::before {
  background: linear-gradient(90deg, #03a9f4, #f441a5);
  filter: blur(1.2em);
}
.container:active::before {
  filter: blur(0.2em);
}

</style>
    

================================================
FILE: Buttons/Spacious74_plastic-bulldog-78.html
================================================
<button class="button">
  <div class="inner">
    <div class="roundInner">
      <svg
        class="svg"
        xmlns="http://www.w3.org/2000/svg"
        width="1.3em"
        height="1.3em"
        viewBox="0 0 24 24"
      >
        <path
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="1.5"
          d="m5 12l-.604-5.437C4.223 5.007 5.825 3.864 7.24 4.535l11.944 5.658c1.525.722 1.525 2.892 0 3.614L7.24 19.466c-1.415.67-3.017-.472-2.844-2.028zm0 0h7"
        ></path>
      </svg>
      Send Message
    </div>
  </div>
</button>

<style>
/* From Uiverse.io by Spacious74  - Tags: neumorphism, button, shadow, 3d button */
.button {
  cursor: pointer;
  background: linear-gradient(180deg, #cfcfcf, #808080);
  padding: 3px;
  border-radius: 15px;
  border: solid 1px #ebebeb;
  box-shadow: 0 3px 10px -1px #00000017, 0px 1px 5px #0000000e,
    0 10px 40px -15px #0000006e;
  transition: all 0.3s ease;
}
.inner {
  background: linear-gradient(180deg, #fff, #e0e0e0);
  padding: 5px;
  border-radius: 12px;
}
.roundInner {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: bold;
  padding: 14px 12px;
  border-radius: 300px;
  box-shadow: inset 0 10px 20px #0000000c;
  background-color: #f8fafa;
  transition: all 0.4s ease;
}
.roundInner .svg {
  transform: rotate(-45deg);
  margin-bottom: 5px;
  transition: all 0.3s ease;
}
.roundInner:active > .svg {
  transform: translate(3px, -3px) rotate(-45deg);
}

.button:active {
  box-shadow: none;
}

</style>
    

================================================
FILE: Buttons/Spacious74_terrible-mole-30.html
================================================
<button class="button">
  <div class="inner">
    <div class="svgs">
      <svg
        viewBox="0 0 256 256"
        height="1em"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
        class="svg-l"
      >
        <path
          d="M240 128a15.79 15.79 0 0 1-10.5 15l-63.44 23.07L143 229.5a16 16 0 0 1-30 0l-23.06-63.44L26.5 143a16 16 0 0 1 0-30l63.44-23.06L113 26.5a16 16 0 0 1 30 0l23.07 63.44L229.5 113a15.79 15.79 0 0 1 10.5 15"
          fill="currentColor"
        ></path>
      </svg>
      <svg
        viewBox="0 0 256 256"
        height="1em"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
        class="svg-s"
      >
        <path
          d="M240 128a15.79 15.79 0 0 1-10.5 15l-63.44 23.07L143 229.5a16 16 0 0 1-30 0l-23.06-63.44L26.5 143a16 16 0 0 1 0-30l63.44-23.06L113 26.5a16 16 0 0 1 30 0l23.07 63.44L229.5 113a15.79 15.79 0 0 1 10.5 15"
          fill="currentColor"
        ></path>
      </svg>
    </div>
    Generate
  </div>
</button>

<style>
/* From Uiverse.io by Spacious74  - Tags: flashy, social, button, btn, 3d button */
.button {
  cursor: pointer;
  border: solid 4px #161616;
  border-top: none;
  border-radius: 20px;
  position: relative;
  box-shadow: 0px 4px 10px #00000062, 0px 10px 40px -10px #000000a6,
    0px 12px 45px -15px #00000071;
  transition: all 0.3s ease;
}
.inner {
  padding: 12px 30px;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  border-bottom: solid 3px #374e72;
  border-radius: 16px;
  background: linear-gradient(180deg, #5771a5, #000);
  color: #fff;
  text-shadow: 1px 1px #000, 0 0 9px #fff;
}
.svgs {
  position: relative;
  margin-top: 9px;
  z-index: 10;
}
.svgs > * {
  filter: drop-shadow(0 0 6px #fff) drop-shadow(1px 1px 0px #000);
}
.svgs .svg-s {
  position: absolute;
  font-size: 0.8rem;
  left: 20px;
  top: -4px;
}
.button:active {
  box-shadow: none;
}

</style>
    

================================================
FILE: Buttons/Spacious74_tidy-moose-60.html
================================================
<div class="btn-container">
  <button class="button">
    <span>Join Today </span>
    <svg
      viewBox="0 0 48 48"
      height="1.2em"
      width="1.2em"
      class="svg"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M42 24H6m24-12l12 12l-12 12"
        stroke-width="4"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke="currentColor"
        fill="none"
      ></path>
    </svg>
  </button>
</div>

<style>
/* From Uiverse.io by Spacious74  - Tags: button */
.btn-container {
  padding: 3px;
  background: linear-gradient(180deg, #f3aefe, #8d35d3);
  border-radius: 19px;
  transform: perspective(850px) rotateX(14deg) rotateY(8deg) rotateZ(-11deg);
  color: white;
  box-shadow:
    -4px 4px 0px #5d2b82,
    -5px 7px 8px #4d1e7491,
    -10px 13px 18px #4d1e7450,
    -20px 20px 40px #4d1e74a8;
  position: relative;
  transition: all 0.4s ease;
}

.btn-container:hover {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  box-shadow:
    0px 4px 5px #5d2b82,
    0px 7px 8px #4d1e7491,
    0px 13px 18px #4d1e7450,
    0px 20px 40px #4d1e74a8;
}
.btn-container:active {
  box-shadow:
    0px 4px 5px #5c2b82c7,
    0px 7px 8px #4d1e745b,
    0px 5px 18px #4d1e7434,
    0px 10px 40px #4d1e746e;
}
.btn-container:active > .button {
  box-shadow: inset 0px 6px 10px #3114494b;
}

.button {
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 22px 24px;
  font-size: 1.6rem;
  font-weight: 600;
  border-radius: 16px;
  border: none;
  background: linear-gradient(180deg, #d28dff, #8533c6);
  box-shadow: inset 0px -6px 10px #3114494b;
  text-shadow: -1px 1px 3px #2a0f3fbb;
  transition: all 0.3s ease;
}
.svg {
  margin-top: 2px;
  font-weight: bold;
  filter: drop-shadow(-2px 2px 1px #2a0f3f6c);
}

</style>
    

================================================
FILE: Buttons/SpatexDEV_blue-eagle-63.html
================================================
<button>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 3H12H8C6.34315 3 5 4.34315 5 6V18C5 19.6569 6.34315 21 8 21H11M13.5 3L19 8.625M13.5 3V7.625C13.5 8.17728 13.9477 8.625 14.5 8.625H19M19 8.625V11.8125" stroke="#fffffff" stroke-width="2"></path>
<path d="M17 15V18M17 21V18M17 18H14M17 18H20" stroke="#fffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
  </svg>
ADD FILE 
</button>
<style>
/* From Uiverse.io by SpatexDEV - Tags: button, upload, file */
button {
  border: none;
  display: flex;
  padding: 0.75rem 1.5rem;
  background-color: #488aec;
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  align-items: center;
  border-radius: 0.5rem;
  user-select: none;
  gap: 0.75rem;
  box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;
  transition: all .6s ease;
}

button:hover {
  box-shadow: 0 10px 15px -3px #488aec4f, 0 4px 6px -2px #488aec17;
}

button:focus,button:active {
  opacity: .85;
  box-shadow: none;
}

button svg {
  width: 1.25rem;
  height: 1.25rem;
}
</style>


================================================
FILE: Buttons/StealthWorm_jolly-lion-33.html
================================================
<!-- From Uiverse.io by StealthWorm - Tags: button, marvel, spiderman, miles morales -->
<button class="group cursor-pointer w-32 h-32 bg-red-600 active:bg-black group-active:bg-black rounded-full border-4 border-black flex relative items-center justify-center duration-300 transition-all hover:w-[8.4rem] hover:h-[8.4rem] ease-in-out">
  <div class="absolute border-b-4 border-black w-full group-active:border-red-600 group-active:border-[2px]"></div>
  <div class="absolute border-b-4 border-black w-full rotate-45 group-active:border-red-600 group-active:border-[1px]"></div>
  <div class="absolute border-b-4 border-black w-full rotate-90 group-active:border-red-600 group-active:border-[1px]"></div>
  <div class="absolute border-b-4 border-black w-full -rotate-45 group-active:border-red-600 group-active:border-[1px]"></div>

  <div class="absolute border-4 border-black w-4 h-4 bg-red-500 rounded-full group-active:bg-black"></div>
  <div class="absolute border-[.2rem] border-black w-8 h-8 bg-transparent rounded-full group-active:border-red-600 group-active:border-[1px]"></div>
  <div class="absolute border-[.2rem] border-black w-12 h-12 bg-transparent rounded-full group-active:border-red-600 group-active:border-[1px]"></div>
  <div class="absolute border-[.2rem] border-black w-16 h-16 bg-transparent rounded-full group-active:border-red-600 group-active:border-[1px]"></div>
  <div class="absolute border-[.2rem] border-black w-20 h-20 bg-transparent rounded-full group-active:border-red-600 group-active:border-[1px]"></div>
  <div class="absolute border-[.2rem] border-black w-24 h-24 bg-transparent rounded-full group-active:border-red-600 group-active:border-[1px]"></div>
  <div class="absolute border-[.2rem] border-black w-28 h-28 bg-transparent rounded-full group-active:border-red-600 group-active:border-[1px]"></div>
  <div class="flex space-x-4 z-0">
    <div class="bg-white w-12 h-12 rotate-45 border-t-[.6rem] border-b-[.4rem] border-l-8 border-r-2 border-black after:border-3 after:border-black rounded-full group-hover:border-t-[1rem] group-hover:border-b-[.6rem] group-active:border-red-600 group-active:border-y-[.4rem] group-active:border-x-[.1rem]">
      <div class="border-b-3 border-black"></div>
    </div>
    <div class="bg-white  w-12 h-12 -rotate-45  border-t-[.6rem] border-b-[.4rem] border-l-[.1rem] border-r-8 border-black after:border-3 after:border-black rounded-full group-hover:border-t-[1rem] group-hover:border-b-[.6rem] group-active:border-red-600 group-active:border-y-[.4rem] group-active:border-x-[.1rem]">
      <div class="border-b-3 border-black"></div>
    </div>
  </div>

  <div class="invisible absolute -top-14 group-hover:visible transition-all duration-200 delay-400">
    <div class="absolute bg-gradient-to-b from-yellow-500 to-yellow-400 w-12 h-12 rotate-[25deg] left-4 top-2">
      <div class="absolute w-10 h-10 bg-[#212121] animate-spin -left-4 -top-4"></div>
      <div class="absolute w-8 h-8 bg-[#212121] animate-spin -left-4 top-2"></div>
      <div class="absolute w-4 h-4 bg-[#212121] animate-spin -left-2  top-8"></div>
      <div class="absolute w-10 h-10 bg-[#212121] animate-spin -right-4 -top-4"></div>
      <div class="absolute w-8 h-8 bg-[#212121] animate-spin -right-4 top-2"></div>
      <div class="absolute w-4 h-4 bg-[#212121] animate-spin -right-2  top-8"></div>
    </div>

    <div class="absolute bg-gradient-to-b from-yellow-500 to-yellow-400 w-12 h-12 -rotate-[25deg] -left-16 top-2">
      <div class="absolute w-10 h-10 bg-[#212121] animate-spin -left-4 -top-4"></div>
      <div class="absolute w-8 h-8 bg-[#212121] animate-spin -left-4 top-2"></div>
      <div class="absolute w-4 h-4 bg-[#212121] animate-spin -left-2  top-8"></div>
      <div class="absolute w-10 h-10 bg-[#212121] animate-spin -right-4 -top-4"></div>
      <div class="absolute w-8 h-8 bg-[#212121] animate-spin -right-4 top-2"></div>
      <div class="absolute w-4 h-4 bg-[#212121] animate-spin -right-2  top-8"></div>
    </div>

    <div class="absolute bg-gradient-to-b from-yellow-500 to-yellow-400 w-12 h-12 -rotate-[60deg] -left-[6.7rem] top-[3rem]">
      <div class="absolute w-10 h-10 bg-[#212121] animate-spin -left-4 -top-4"></div>
      <div class="absolute w-8 h-8 bg-[#212121] animate-spin -left-4 top-2"></div>
      <div class="absolute w-4 h-4 bg-[#212121] animate-spin -left-2  top-8"></div>
      <div class="absolute w-10 h-10 bg-[#212121] animate-spin -right-4 -top-4"></div>
      <div class="absolute w-8 h-8 bg-[#212121] animate-spin -right-4 top-2"></div>
      <div class="absolute w-4 h-4 bg-[#212121] animate-spin -right-2  top-8"></div>
    </div>

    <div class="absolute bg-gradient-to-b from-yellow-500 to-yellow-400 w-12 h-12 rotate-[60deg] left-[3.6rem] top-[3rem]">
      <div class="absolute w-10 h-10 bg-[#212121] animate-spin -left-4 -top-4"></div>
      <div class="absolute w-8 h-8 bg-[#212121] animate-spin -left-4 top-2"></div>
      <div class="absolute w-4 h-4 bg-[#212121] animate-spin -left-2  top-8"></div>
      <div class="absolute w-10 h-10 bg-[#212121] animate-spin -right-4 -top-4"></div>
      <div class="absolute w-8 h-8 bg-[#212121] animate-spin -right-4 top-2"></div>
      <div class="absolute w-4 h-4 bg-[#212121] animate-spin -right-2  top-8"></div>
    </div>
  </div>
</button>



================================================
FILE: Buttons/StealthWorm_polite-mole-15.html
================================================
<button class="container">
  <strong>SYNTHWAVE</strong>
  <div id="glow">
    <div class="circle"></div>
  </div>
  <div class="inner-container">
    <div class="fade"></div>

    <div class="up-text">
      <div class="crawl">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
      </div>
    </div>
  </div>
</button>

<style>
/* From Uiverse.io by StealthWorm  - Tags: button, synthwave, retrowave, vaporwave */
:root {
  --main-color: #212121;
  --gradient-color-1: #ffdb3b;
  --gradient-color-2: #fe53bb;
  --gradient-color-3: #8f51ea;
  --text-glow-color: #ff1372;
}

.container {
  all: unset;
  height: 4rem;
  width: 16rem;
  position: relative;
  border-radius: 20px;
  border: double 3px transparent;
  transition: 50ms;
  background-image: linear-gradient(#212121, #212121),
    linear-gradient(0, #ffdb3b 0%, #fe53bb 25%, #8f51ea 87%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  cursor: pointer;
}

.container:hover > strong {
  transition: 300ms;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: brightness(1.75);
  text-shadow: 2px 0 14px #fff;
}

.inner-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 18px;
}

strong,
strong::before {
  transition: 300ms;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  position: absolute;
  font-size: 1.6rem;
  letter-spacing: 5px;
  z-index: 2;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 2px 2px 8px rgba(56, 127, 224, 0.4),
    -2px -2px 8px rgba(254, 125, 255, 0.4);
  background-image: linear-gradient(
    0deg,
    rgba(255, 142, 224, 1) 0%,
    rgba(255, 29, 193, 1) 5%,
    rgba(198, 72, 255, 1) 30%,
    rgba(0, 0, 0, 1) 49%,
    rgba(255, 255, 255, 1) 52%,
    rgba(70, 148, 255, 1) 60%,
    rgba(21, 59, 112, 1) 69%
  );
}

strong::before {
  text-shadow: -6px -6px 6px var(--text-glow-color);
}

#glow {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 10rem;
  max-height: 4rem;
}

.circle {
  width: 100%;
  height: 100%;
  filter: blur(1.2rem);
  animation: pulse 2s infinite alternate;
  z-index: -1;
}

.circle:nth-of-type(1) {
  background: linear-gradient(0, #ffdb3b 0%, #fe53bb 30%, #8f51ea 80%);
}

.fade {
  position: absolute;
  width: 100%;
  min-height: 10rem;
  top: -3rem;
  height: 10rem;
  background-image: linear-gradient(
    to top,
    rgba(236, 195, 11, 0.84) 15%,
    rgba(255, 31, 184, 0.36) 40%,
    rgb(43, 1, 54) 65%
  );
  z-index: 1;
}

.up-text {
  display: flex;
  justify-content: center;
  position: relative;
  height: 800px;
  font-weight: 600;
  letter-spacing: 6px;
  perspective: 400px;
  text-align: justify;
}

.crawl {
  display: grid;
  grid-template-columns: repeat(6, auto);
  position: relative;
  animation: crawl 20s linear infinite alternate;
}

.grid-item {
  width: 60px;
  height: 100%;
  border: 1px solid #f96bcc;
  box-shadow: 0 0 10px 4px #ff1fb8;
}

@keyframes crawl {
  0% {
    top: -200px;
    transform: rotateX(30deg) translateZ(40px);
  }
  100% {
    top: -510px;
    transform: rotateX(25deg) translateZ(0px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  }
}

</style>
    

================================================
FILE: Buttons/StealthWorm_pretty-lion-68.html
================================================
<button class="btn" type="button">
  <strong>SPACE</strong>
  <div id="container-stars">
    <div id="stars"></div>
  </div>

  <div id="glow">
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</button>

<style>
/* From Uiverse.io by StealthWorm - Tags: button */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 13rem;
  height: 3rem;
  background-size: 300% 300%;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  transition: 0.5s;
  animation: gradient_301 5s ease infinite;
  border: double 4px transparent;
  background-image: linear-gradient(#212121, #212121),  linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

#container-stars {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
}

strong {
  z-index: 2;
  font-family: 'Avalors Personal Use';
  font-size: 12px;
  letter-spacing: 5px;
  color: #FFFFFF;
  text-shadow: 0 0 4px white;
}

#glow {
  position: absolute;
  display: flex;
  width: 12rem;
}

.circle {
  width: 100%;
  height: 30px;
  filter: blur(2rem);
  animation: pulse_3011 4s infinite;
  z-index: -1;
}

.circle:nth-of-type(1) {
  background: rgba(254, 83, 186, 0.636);
}

.circle:nth-of-type(2) {
  background: rgba(142, 81, 234, 0.704);
}

.btn:hover #container-stars {
  z-index: 1;
  background-color: #212121;
}

.btn:hover {
  transform: scale(1.1)
}

.btn:active {
  border: double 4px #FE53BB;
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: none;
}

.btn:active .circle {
  background: #FE53BB;
}

#stars {
  position: relative;
  background: transparent;
  width: 200rem;
  height: 200rem;
}

#stars::after {
  content: "";
  position: absolute;
  top: -10rem;
  left: -100rem;
  width: 100%;
  height: 100%;
  animation: animStarRotate 90s linear infinite;
}

#stars::after {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
}

#stars::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  animation: animStar 60s linear infinite;
}

#stars::before {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
  opacity: 0.5;
}

@keyframes animStar {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-135rem);
  }
}

@keyframes animStarRotate {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0);
  }
}

@keyframes gradient_301 {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse_3011 {
  0% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
</style>


================================================
FILE: Buttons/StealthWorm_spotty-horse-48.html
================================================
<button class="btn" type="button">
  <strong>SPACE</strong>
  <div id="container-stars">
    <div id="stars"></div>
  </div>

  <div id="glow">
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</button>

<style>
/* From Uiverse.io by StealthWorm - Tags: button, space */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 13rem;
  overflow: hidden;
  height: 3rem;
  background-size: 300% 300%;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  transition: 0.5s;
  animation: gradient_301 5s ease infinite;
  border: double 4px transparent;
  background-image: linear-gradient(#212121, #212121),  linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

#container-stars {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
}

strong {
  z-index: 2;
  font-family: 'Avalors Personal Use';
  font-size: 12px;
  letter-spacing: 5px;
  color: #FFFFFF;
  text-shadow: 0 0 4px white;
}

#glow {
  position: absolute;
  display: flex;
  width: 12rem;
}

.circle {
  width: 100%;
  height: 30px;
  filter: blur(2rem);
  animation: pulse_3011 4s infinite;
  z-index: -1;
}

.circle:nth-of-type(1) {
  background: rgba(254, 83, 186, 0.636);
}

.circle:nth-of-type(2) {
  background: rgba(142, 81, 234, 0.704);
}

.btn:hover #container-stars {
  z-index: 1;
  background-color: #212121;
}

.btn:hover {
  transform: scale(1.1)
}

.btn:active {
  border: double 4px #FE53BB;
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: none;
}

.btn:active .circle {
  background: #FE53BB;
}

#stars {
  position: relative;
  background: transparent;
  width: 200rem;
  height: 200rem;
}

#stars::after {
  content: "";
  position: absolute;
  top: -10rem;
  left: -100rem;
  width: 100%;
  height: 100%;
  animation: animStarRotate 90s linear infinite;
}

#stars::after {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
}

#stars::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  animation: animStar 60s linear infinite;
}

#stars::before {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
  opacity: 0.5;
}

@keyframes animStar {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-135rem);
  }
}

@keyframes animStarRotate {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0);
  }
}

@keyframes gradient_301 {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse_3011 {
  0% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
</style>


================================================
FILE: Buttons/StealthWorm_young-badger-81.html
================================================
<button type="button" class="btn">
  <div class="smoke">
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
  </div>
  <div class="title">
    <span class="thunder">⚡</span>
    <strong class="description">Join now</strong>
  </div>
  <div class="glass">
    <div class="inner-glass"></div>
  </div>
</button>

<style>
/* From Uiverse.io by StealthWorm  - Tags: purple, pink, button, smooth, realistic, css, advanced, #button */
.btn {
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  width: 20rem;
  height: 6rem;
  border-top: 2px double #ffffff92;
  border-bottom: none;
  border-left: 2px outset #0000007e;
  border-right: 2px solid #e94fcab3;
  border-radius: 1.8rem;
  background-origin: border-box;
  background-clip: content-box, border-box;
  filter: hue-rotate(-15deg) drop-shadow(0px 30px 10px #00000028) saturate(2);

  background: linear-gradient(
    64.14deg,
    #b938ff 0%,
    #daa1f1 10%,
    #f179ec 15.58%,
    #fefffe 28.15%,
    #fc9f9d 45.31%,
    #ed8664 53.18%,
    #ff7423 58.79%,
    #ff875f 65.28%,
    #fbabae 75.48%,
    #fcbde5 85.31%,
    #e94fca 100.29%
  );
  transition: all 0.5s;
}

.btn:hover {
  transform: scale(1.1);
  filter: hue-rotate(-365deg) drop-shadow(0px 30px 10px #00000028) saturate(2);
}

.btn:hover .title > strong {
  font-size: 1.2rem;
  font-weight: 800;
  transition: all 0.8s;
}

.glass {
  z-index: 10;
  display: flex;
  border: double 2px rgba(255, 255, 255, 0.263);
  backdrop-filter: blur(2px);
  filter: blur(1px) brightness(1.1) saturate(50%) hue-rotate(30deg);
  border-radius: 1.6rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background-color: #ffffff1c;
  background-origin: content-box;
  background-clip: content-box, border-box;
  box-shadow: inset 0 0 10px #a84fd88d;
}

.inner-glass {
  z-index: 10;
  display: flex;
  border-left: 1px solid rgba(255, 255, 255, 0.564);
  border-right: 1px solid rgb(255, 255, 255);
  backdrop-filter: blur(40px);
  box-shadow: inset 0 0 20px rgba(246, 142, 213, 0.86);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 0.6rem;
  width: 100%;
  height: 100%;
  background-origin: border-box;
  background-clip: content-box, border-box;
  filter: brightness(140%);
}

.title {
  inset: 0;
  display: flex;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 90;
  align-items: center;
  justify-content: center;
  color: black;
  font-size: 1rem;
  gap: 0.5rem;
}

.thunder {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(100%) brightness(0);
  font-size: 1.2rem;
}

.description {
  font-size: 1.2rem;
  font-weight: 600;
}

.smoke {
  z-index: 90;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
}

.cloud {
  position: absolute;
  border-radius: 9999px;
}

.cloud:nth-of-type(1) {
  filter: blur(3px) drop-shadow(-2px 0 3px #ffffff);
  display: flex;
  left: 1.6rem;
  top: 0.2rem;
  width: 10rem;
  height: 1rem;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.868) 30%,
    transparent 100%
  );
}

.cloud:nth-of-type(2) {
  left: 2.5rem;
  top: 2rem;
  width: 4rem;
  height: 2rem;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  /* border: 1px solid red; */
  filter: drop-shadow(-10px 10px 3px #d277cc);
}

.cloud:nth-of-type(3) {
  left: 10rem;
  top: 0.5rem;
  width: 5rem;
  height: 5rem;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 50%
  );
  /* border: 1px solid red; */
  filter: drop-shadow(-5px -5px 7px #ff5500b4);
}

.cloud:nth-of-type(4) {
  left: 17rem;
  top: 1rem;
  width: 3.4rem;
  height: 4rem;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    transparent 70%
  );
  /* border: 1px solid red; */
  filter: drop-shadow(-1px 0 30px #ff002f);
}

.cloud:nth-of-type(5) {
  top: 0.5rem;
  width: 100%;
  height: 0.7rem;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.293) 30%,
    rgba(255, 181, 21, 0.164) 50%,
    rgba(234, 44, 255, 0.419) 60%,
    rgba(255, 255, 255, 0) 90%
  );
}

.cloud:nth-of-type(6) {
  left: 17.6rem;
  top: -0.1rem;
  width: 2rem;
  height: 2rem;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 70%
  );
}

.cloud:nth-of-type(7) {
  left: 7.6rem;
  transform: rotate(-35deg);
  top: -2rem;
  width: 2rem;
  height: 5rem;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.614) 0%,
    #fd87602d 60%,
    rgba(255, 255, 255, 0) 100%
  );
}

.cloud:nth-of-type(8) {
  left: 5.5rem;
  top: -1rem;
  width: 3rem;
  height: 3rem;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.614) 0%,
    rgba(255, 255, 255, 0) 80%
  );
}

.cloud:nth-of-type(9) {
  filter: blur(1px) drop-shadow(0px 0 3px #ffffff);
  left: 0.5rem;
  bottom: 1.4rem;
  width: 100%;
  height: 0.1rem;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 90%
  );
}

.cloud:nth-of-type(10) {
  filter: blur(1px) drop-shadow(0px 0 3px #ffffff);
  display: flex;
  left: 0.3rem;
  top: 1rem;
  width: 1rem;
  height: 3rem;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-bottom: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.419) 0%,
    transparent 50%
  );
}

.cloud:nth-of-type(11) {
  border-radius: 100%;
  filter: blur(4px) drop-shadow(0px -10px 10px #ff5107fb);
  display: flex;
  left: 12rem;
  top: 3.5rem;
  width: 5rem;
  height: 1.8rem;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.773) 10%,
    rgba(255, 255, 255, 0.159) 60%
  );
}

.cloud:nth-of-type(12) {
  filter: blur(2px) drop-shadow(0px -10px 10px #f36b9d);
  display: flex;
  left: 11rem;
  top: 1.1rem;
  width: 6rem;
  height: 0.3rem;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.973) 30%,
    rgba(255, 255, 255, 0.159) 100%
  );
}

.cloud:nth-of-type(13) {
  filter: blur(3px) drop-shadow(-15px 0 5px #f8283d9e);
  display: flex;
  left: 8rem;
  top: 3.7rem;
  width: 5.5rem;
  height: 1.7rem;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.762) 10%,
    rgba(255, 255, 255, 0.159) 70%
  );
}

.cloud:nth-of-type(14) {
  filter: blur(1px) drop-shadow(10px -10px 10px #6f0424);
  transform: rotate(-35deg);
  display: flex;
  left: 0.5rem;
  bottom: 0.3rem;
  width: 0.5rem;
  height: 1.2rem;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.848) 0%,
    rgba(255, 255, 255, 0.159) 60%
  );
}

</style>
    

================================================
FILE: Buttons/SteveBloX_light-owl-27.html
================================================
<button class="button">Click me !</button>

<style>
/* From Uiverse.io by SteveBloX  - Tags: white, black, button, shadow, modern, b&w */
.button {
  border-radius: 8px;
  height: 40px;
  border: none;
  background: #222;
  color: white;
  padding: 15px;
  box-shadow: 0 1px 1px -1px #00000026, 0 2px 1px -1px #00000025,
    0 3px 3px -2px #00000023, 0 7px 6px -2px #00000020,
    0 13px 13px -3px #0000001b, 0 30px 30px -4px #0000000d;
  font-weight: bold;
  font-family: Montserrat;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: 150ms ease-in-out;
}

.button:active {
  scale: 0.95;
  background: #fff;
  color: black;
  box-shadow: rgba(0, 0, 0, 0.26) 0px 1px 1px -1px,
    rgba(0, 0, 0, 0.24) 0px 2px 3px -2px, rgba(0, 0, 0, 0.19) 0px 5px 9px -3px,
    rgba(0, 0, 0, 0.03) 0px 16px 29px -4.5px;
}

</style>
    

================================================
FILE: Buttons/SteveBloX_proud-vampirebat-22.html
================================================
<button>
    Button
</button>
<style>
/* From Uiverse.io by SteveBloX - Tags: blue, black, button, hover, active */
button {
  font-family: inherit;
  width: 7.18em;
  height: 2.81em;
  cursor: pointer;
  background: #000000;
  border: 0.14em solid #0000FF;
  box-shadow: 0px 0.25em 0.25em rgba(0, 0, 0, 0.25);
  border-radius: 0.93em;
  transition: all 0.3s;
  color: white;
  font-size: 1.06em;
  text-transform: uppercase;
}

button:hover {
  width: 7.18em;
  height: 2.81em;
  box-shadow: 0px 0.81em 0.62em rgba(0, 0, 0, 0.25);
  background: blue;
  /*background: #000000;*/
  border-radius: 0.93em;
  transform: translate(0.38em, -0.37em);
}

button:active {
  transform: scale(0.90)
}
</style>


================================================
FILE: Buttons/SteveBloX_short-fish-35.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by SteveBloX - Tags: blue, white, hover, button */
button {
  width: 150px;
  height: 60px;
  border: 3px solid #315cfd;
  border-radius: 45px;
  transition: all 0.3s;
  cursor: pointer;
  background: white;
  font-size: 1.2em;
  font-weight: 550;
  font-family: 'Montserrat', sans-serif;
}

button:hover {
  background: #315cfd;
  color: white;
  font-size: 1.5em;
}
</style>


================================================
FILE: Buttons/Subaashbala_new-snail-95.html
================================================
<button class="button">
  <div>Hover</div>
</button>

<style>
/* From Uiverse.io by Subaashbala  - Tags: animation, button, animated, stripe */
.button {
  cursor: pointer;
  font-size: 1.25em;
  padding: 1em 2em;
  border-radius: 5px;
  border: none;
  position: relative;
  font-weight: 900;
  background: repeating-linear-gradient(
    45deg,
    rgb(255, 209, 124),
    rgb(255, 209, 124) 10px,
    rgb(255, 139, 97) 10px,
    rgb(255, 139, 97) 20px
  );
  animation: move 500ms infinite linear forwards;
  animation-play-state: paused;
  box-shadow: 4px 6px 15px rgba(0, 0, 0, 0.199);
}
.button:hover {
  animation-play-state: running;
}
@keyframes move {
  from {
    background-position: 0;
  }
  to {
    background-position: 30px;
  }
}

</style>
    

================================================
FILE: Buttons/Subaashbala_quiet-cow-11.html
================================================
<button class="button">
  <span class="icon">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 46 45"
      height="45"
      width="46"
    >
      <path
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="3"
        stroke="black"
        d="M29.5487 17.0828L27.4588 19.235L20.4922 26.4091M20.4922 26.4091L5.82359 21.5242C1.20662 19.9867 1.28359 13.4294 5.93538 12.0007L37.5858 2.27996C41.4233 1.10135 45.0151 4.69768 43.8315 8.53369L34.3384 39.3027C32.9045 43.9502 26.3517 44.022 24.8163 39.4069L20.4922 26.4091Z"
      ></path>
    </svg>
  </span>
  <span>Send Message</span>
</button>

<style>
/* From Uiverse.io by Subaashbala  - Tags: simple, neumorphism, button */
.button {
  cursor: pointer;
  position: relative;
  border-radius: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  gap: 8px;
  font-size: 1rem;
  font-weight: 900;
  background-color: white;
  border: none;
  background: linear-gradient(to bottom, #ecefee, #fff);
  transition: all 500ms;
}
.button::after {
  content: "";
  position: absolute;
  width: 105%;
  height: 115%;
  background: linear-gradient(to top, #ecefeeb4, #fff);
  z-index: -1;
  top: 50%;
  left: 50%;
  border-radius: 15px;
  padding: 2px;
  transform: translate(-50%, -50%);
  border: 2px solid #d5d6d5;
  border-bottom: 3px solid #7b7d7cc0;
  border-left: 2px solid #b5b5b5;
  border-right: 2px solid #b5b5b5;
  box-shadow: 0px 20px 45px #b5b9b8;
}
.icon svg {
  width: 1.18rem;
  height: auto;
  vertical-align: middle;
}
.icon path {
  stroke-width: 5px;
}

</style>
    

================================================
FILE: Buttons/Subaashbala_slippery-goat-18.html
================================================
<button class="button">
  <div class="bgContainer">
    <span>Hover</span>
    <span>Hover</span>
  </div>
  <div class="arrowContainer">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 45 38"
      height="25"
      width="25"
    >
      <path
        fill="black"
        d="M43.7678 20.7678C44.7441 19.7915 44.7441 18.2085 43.7678 17.2322L27.8579 1.32233C26.8816 0.34602 25.2986 0.34602 24.3223 1.32233C23.346 2.29864 23.346 3.88155 24.3223 4.85786L38.4645 19L24.3223 33.1421C23.346 34.1184 23.346 35.7014 24.3223 36.6777C25.2986 37.654 26.8816 37.654 27.8579 36.6777L43.7678 20.7678ZM0 21.5L42 21.5V16.5L0 16.5L0 21.5Z"
      ></path>
    </svg>
  </div>
</button>

<style>
/* From Uiverse.io by Subaashbala  - Tags: login, button, transition, hover button */
button {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1em 0em 1em 1em;
  background-color: yellow;
  box-shadow: 4px 6px 0px black;
  border: 4px solid;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  z-index: 100;
  transition: box-shadow 250ms, transform 250ms, filter 50ms;
}
button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 3px 0px black;
}
button:active {
  filter: saturate(0.75);
}
button::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: pink;
  z-index: -1;
  transform: translateX(-100%);
  transition: transform 250ms;
}
button:hover::after {
  transform: translateX(0);
}
.bgContainer {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  overflow: hidden;
  max-width: 35%; /* adjust this if the button text is not proper */
  font-size: 2em;
  font-weight: 600;
}
.bgContainer span {
  position: relative;
  transform: translateX(-100%);
  transition: all 250ms;
}
.button:hover .bgContainer > span {
  transform: translateX(0);
}
.arrowContainer {
  padding: 1em;
  margin-inline-end: 1em;
  border: 4px solid;
  border-radius: 50%;
  background-color: pink;
  position: relative;
  overflow: hidden;
  transition: transform 250ms, background-color 250ms;
  z-index: 100;
}
.arrowContainer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: yellow;
  transform: translateX(-100%);
  z-index: -1;
  transition: transform 250ms ease-in-out;
}
button:hover .arrowContainer::after {
  transform: translateX(0);
}
button:hover .arrowContainer {
  transform: translateX(5px);
}
button:active .arrowContainer {
  transform: translateX(8px);
}
.arrowContainer svg {
  vertical-align: middle;
}

</style>
    

================================================
FILE: Buttons/Subu19_plastic-skunk-56.html
================================================
<div class="hamburger">
  <input class="checkbox" type="checkbox" />
  <svg fill="none" viewBox="0 0 50 50" height="50" width="50">
    <path
      class="lineTop line"
      stroke-linecap="round"
      stroke-width="4"
      stroke="black"
      d="M6 11L44 11"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="4"
      stroke="black"
      d="M6 24H43"
      class="lineMid line"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="4"
      stroke="black"
      d="M6 37H43"
      class="lineBottom line"
    ></path>
  </svg>
</div>

<style>
/* From Uiverse.io by Subu19  - Tags: animation, button, hamburger, click, menu */
.hamburger {
  height: 50px;
  width: 50px;
  transform: 0.2s;
  position: relative;
}
.hamburger .checkbox {
  position: absolute;
  opacity: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.line {
  transition: 0.5s;
  stroke-width: 6px;
  stroke: black;
}
.lineTop {
  stroke-dasharray: 40 40;
  stroke-dashoffset: 25;
}
.lineBottom {
  stroke-dasharray: 40 40;
  stroke-dashoffset: 60;
}
.lineMid {
  stroke-dasharray: 40 40;
}
.hamburger .checkbox:checked + svg .line {
  stroke: crimson;
}
.hamburger .checkbox:checked + svg .lineTop {
  stroke-dashoffset: 0;
  transform-origin: left;
  transform: rotateZ(45deg) translate(-7px, -5px);
}
.hamburger .checkbox:checked + svg .lineMid {
  stroke-dashoffset: 40;
}
.hamburger .checkbox:checked + svg .lineBottom {
  stroke-dashoffset: 0;
  transform-origin: left;
  transform: rotateZ(-45deg) translate(-5px, 5px);
}

</style>
    

================================================
FILE: Buttons/Sujanthapast0_serious-rattlesnake-31.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by Sujanthapast0 - Tags: button, 3d button, 2d button */
button {
  border: 1px solid black;
  padding: 12px 30px 12px 30px;
  border-radius: 30px;
  background-color: #fdceb6;
  font-weight: bolder;
  font-size: 15px;
  box-shadow: 0px 0px 1px;
  transform: all 2s esase;
  transition-duration: .3s;
}

button:hover {
  transform: translateY(-10px);
  box-shadow: 0px 7px 1px rgb(0, 0, 0);
  border: 1px solid black;
}

button:active {
  transform: translateY(10px);
  box-shadow: 0px 0px 1px;
}
  


</style>


================================================
FILE: Buttons/Sujanthapast0_shy-impala-90.html
================================================
<button class="button">
<p class="submit">submit</p>

</button>
<style>
/* From Uiverse.io by Sujanthapast0 - Source: Sujanthapast0 - Tags: animation, subscription, minimalist, success, button, smooth, submit, 3d button */
.button {
  width: 90px;
  height: 40px;
  position: relative;
  font-family: var(--font);
  color: #3b82f6;
  font-weight: 600;
  background-color: #fff;
  border: none;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  transition: all ease 100ms;
}

button:hover {
  background-color: #cbdcf8;
}

button:focus {
  background-color: #cbdcf8;
}

button::before {
  content: 'done✅';
  position: absolute;
  color: #3b82f6;
  left: 0;
  top: -14px;
  right: 0;
  transition: all ease 300ms;
  opacity: 0%;
}

button:focus::before {
  opacity: 100%;
  transform: translatey(26px);
}

.submit {
  transition: all ease 100ms;
  opacity: 100%;
}

button:focus > .submit {
  opacity: 0%;
}


</style>


================================================
FILE: Buttons/SujitAdroja_sharp-frog-56.html
================================================
<button class="btn">
  Diagonal Swipe
</button>
<style>
/* From Uiverse.io by SujitAdroja - Tags: button */
.btn {
  color: purple;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid purple;
  padding: 10px 20px;
  font-size: 17px;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.btn:hover {
  color: white;
}

.btn::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 0%;
  top: 0;
  left: -40px;
  transform: skewX(45deg);
  background-color: purple;
  z-index: -1;
  transition: all 1s;
}

.btn:hover::before {
  width: 160%;
}
</style>


================================================
FILE: Buttons/SujitAdroja_strong-bullfrog-56.html
================================================
<button class="btn">Hover Me</button>

<style>
/* From Uiverse.io by SujitAdroja  - Tags: simple, material design, button, hover effect, hoverme, hover button, button hover effect , button hover */
.btn {
  position: relative;
  background: none;
  border: 2px solid black;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  transition: all 0.3s;
}
.btn::before {
  content: "";
  height: 0%;
  width: 0%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  z-index: -1;
  position: absolute;
  background-color: #494958;
  transition: all 0.3s;
}
.btn:hover {
  border: 2px solid #32323c;
  color: white;
}
.btn:hover::before {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 0.3rem;
}

</style>
    

================================================
FILE: Buttons/SuliLevente_hard-sloth-56.html
================================================
<button>Button</button>
<style>
/* From Uiverse.io by SuliLevente - Tags: button */
button {
  background-color: #040810;
  color: #C7C7C7;
  padding: 15px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 17px;
  overflow: hidden;
  position: relative;
  border: 3px double #2D6FBB;
  z-index: 1;
}

button::before {
  content: "";
  background-color: #2D6FBB;
  transform: translateX(-100%);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transition: all 0.3s;
  z-index: -1;
}

button:hover::before {
  transform: translateX(0);
}

button::after {
  content: "";
  background-color: #2D6FBB;
  transform: translateX(100%);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transition: all 0.3s;
  z-index: -1;
}

button:hover::after {
  transform: translateX(0);
}
</style>


================================================
FILE: Buttons/SuliLevente_soft-horse-30.html
================================================
<button>UIVERSE</button>
<style>
/* From Uiverse.io by SuliLevente - Tags: button */
button {
  display: inline-block;
  border: 3px solid #DFB112;
  padding: 10px;
  background-color: #212121;
  color: white;
  font-weight: bold;
  font-size: 17px;
  z-index: 1;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
}

button::before {
  content: "";
  z-index: -1;
  -webkit-transform: translateY(-100%) translateX(-100%);
  -ms-transform: translateY(-100%) translateX(-100%);
  transform: translateY(-100%) translateX(-100%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background-color: #DFB112;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

button:hover::before {
  -webkit-transform: translateY(0) translateX(0);
  -ms-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
}

button:hover::after {
  -webkit-transform: translateY(100%) translateX(100%);
  -ms-transform: translateY(100%) translateX(100%);
  transform: translateY(100%) translateX(100%);
}
</style>


================================================
FILE: Buttons/TISEPSE_empty-turkey-39.html
================================================
<a class="bck-grnd"><span class="style"></span>Hover me </a>

<style>
/* From Uiverse.io by TISEPSE  - Tags: animation, button, click */
.bck-grnd {
  position: relative;
  display: flex;
  background-color: #dac0a3;
  padding: 15px 20px;
  font-size: 25px;
  color: black;
  text-decoration: none;
  border: 3px solid transparent;
  overflow: hidden;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  z-index: 2;
  border-radius: 10px;
  letter-spacing: 3px;
  box-shadow: 0 0.4rem #eadbc8;
  box-shadow: 0.4rem 0.4rem 0 #eadbc8;
  transition: 0.5s;
}

.bck-grnd .style {
  background: #f8f0e5;
  height: 150px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 30px 30px 0px 0px;
  top: 120%;
  z-index: -1;
  transition: 0.5s;
}

.bck-grnd:hover .style {
  top: -70%;
  border-radius: 50px 50px 0px 0px;
}

.bck-grnd:hover {
  color: #d8ba98;
  border: 3px solid #dac0a3;
  box-shadow: none;
}

.bck-grnd:active {
  transform: scale(1.1);
}

</style>
    

================================================
FILE: Buttons/TISEPSE_perfect-pig-59.html
================================================
<button>
<a href="#"><span>Button</span></a> 
</button>
<style>
/* From Uiverse.io by TISEPSE - Source: https://www.youtube.com/watch?v=B7Z6qERVTvM - Tags: material design, black, button */
a {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  border: 2px solid #fefefe;
  text-transform: uppercase;
  color: #fefefe;
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
}

a::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% - 12px);
  background-color: #212121;
  transition: 0.3s ease-in-out;
  transform: scaleY(1);
}

a:hover::before {
  transform: scaleY(0);
}

a::after {
  content: '';
  position: absolute;
  left: 6px;
  top: -2px;
  height: calc(100% + 4px);
  width: calc(100% - 12px);
  background-color: #212121;
  transition: 0.3s ease-in-out;
  transform: scaleX(1);
  transition-delay: 0.5s;
}

a:hover::after {
  transform: scaleX(0);
}

a span {
  position: relative;
  z-index: 3;
}

button {
  background-color: none;
  text-decoration: none;
  background-color: #212121;
  border: none;
}
</style>


================================================
FILE: Buttons/TISEPSE_smart-newt-43.html
================================================
<button class="vlrt"><span class="green"></span>Hover effect</button>

<style>
/* From Uiverse.io by TISEPSE  - Tags: material design, black, button */
.vlrt {
  height: 75px;
  width: 170px;
  border-radius: 4px;
  font-size: 18px;
  border: 3px solid;
  color: #f5f5f5;
  border-color: #b6b6b6;
  background-color: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(50px);
  transition: 0.2s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.vlrt:hover {
  border-color: #16ff00;
  letter-spacing: 2px;
  font-size: 19px;
  color: #fefefe;
  text-shadow: 0 0.3rem rgb(51, 51, 51);
  box-shadow: #16ff00 0px -30px 40px -30px inset;
}

.vlrt .green {
  content: "";
  width: 25px;
  height: 25px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #16ff00;
}

.vlrt .green {
  content: "";
  width: 45px;
  height: 45px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: rgb(182, 182, 182);
  transform: rotate(49deg) translateX(-32px) translateY(0px);
}

.vlrt:hover .green {
  background-color: #16ff00;
  transition: 0.5s;
}

.vlrt:active {
  letter-spacing: 0px;
  text-shadow: 0 0rem #333;
  transition: 0.1s;
  background-color: #1abc9c;
}

</style>
    

================================================
FILE: Buttons/TISEPSE_ugly-badger-82.html
================================================
<button>
  <a href="#" class="btn2"><span class="spn2">HELLO !</span></a>
</button>
<style>
/* From Uiverse.io by TISEPSE - Tags: material design, button, css effect */
.btn2 {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  border: 2px solid #fefefe;
  text-transform: uppercase;
  color: #fefefe;
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  transition: 0.3s;
}

.btn2::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% - -2px);
  background-color: #212121;
  transition: 0.3s ease-out;
  transform: scaleY(1);
}

.btn2::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% - 50px);
  background-color: #212121;
  transition: 0.3s ease-out;
  transform: scaleY(1);
}

.btn2:hover::before {
  transform: translateY(-25px);
  height: 0;
}

.btn2:hover::after {
  transform: scaleX(0);
  transition-delay: 0.15s;
}

.btn2:hover {
  border: 2px solid #fefefe;
}

.btn2 span {
  position: relative;
  z-index: 3;
}

button {
  text-decoration: none;
  border: none;
  background-color: transparent;
}
</style>


================================================
FILE: Buttons/TISEPSE_young-lionfish-81.html
================================================
<button class="button"><span></span>Bouton</button>

<style>
/* From Uiverse.io by TISEPSE  - Tags: material design, button, active */
.button {
  background-color: #ff9b82;
  cursor: pointer;
  padding: 1em;
  width: 10rem;
  font-size: 17px;
  box-shadow: 0 0.4rem #ffc8c8;
  border-radius: 27px;
  overflow: hidden;
  z-index: 2;
  transition: 0.2s;
  border: 2px solid black;
}

.button:hover {
  transform: translateY(0.2rem);
  box-shadow: 0 0.25rem #ffc8c8;
  letter-spacing: 2px;
  color: #fefefe;
}

.button:active {
  transform: translateY(0.6rem);
  box-shadow: none;
  transition: 0.1s;
}

.button span {
  background: #e48586;
  border-radius: 27px;
  height: 100%;
  width: 0%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  transition: 0.2s ease-in-out;
}

.button:hover span {
  width: 100%;
}

</style>
    

================================================
FILE: Buttons/TaniaDou_witty-rabbit-59.html
================================================
<div class="button">
  Button<span class="button-border"></span>
</div>
<style>
/* From Uiverse.io by TaniaDou - Tags: gradient, button, modern, neon */
.button {
  padding: 1rem 2rem;
  border-radius: .5rem;
  border: none;
  font-size: 1rem;
  font-weight: 400;
  color: #f4f0ff;
  text-align: center;
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.button::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: .5rem;
  background: linear-gradient(180deg, rgba(8, 77, 126, 0) 0%, rgba(8, 77, 126, 0.42) 100%),rgba(47,255,255,.24);
  box-shadow: inset 0 0 12px rgba(151,200,255,.44);
  z-index: -1;
}

.button::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(8, 77, 126, 0) 0%, rgba(8, 77, 126, 0.42) 100%),rgba(47,255,255,.24);
  box-shadow: inset 0 0 12px rgba(151,200,255,.44);
  border-radius: .5rem;
  opacity: 0;
  z-index: -1;
  transition: all .3s ease-in;
}

.button:hover::after {
  opacity: 1;
}

.button-border {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: .5rem;
  z-index: -1;
}

.button-border::before {
  content: "";
  position: absolute;
  border-radius: .5rem;
  padding: 1px;
  inset: 0;
  background: linear-gradient(180deg, rgba(184, 238, 255, 0.24) 0%, rgba(184, 238, 255, 0) 100%),linear-gradient(0deg, rgba(184, 238, 255, 0.32), rgba(184, 238, 255, 0.32));
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
}
</style>


================================================
FILE: Buttons/TanimMahbub_selfish-goat-90.html
================================================
<button class="button">Button</button>

<style>
/* From Uiverse.io by TanimMahbub  - Tags: simple, button, shadow, retro, click, click effect, box-shadow */
.button {
  /* typography */
  font-size: 22px;
  font-weight: 600;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 1px;

  /* ui */
  border: none;
  cursor: pointer;
  display: inline-block;
  padding: 12px 35px;
  border-radius: 8px;
  background: #f6781e;
  color: #fff;
  box-shadow: 0 0 0 3px #2f2e41, 0 6px 0 #2f2e41;
  transition: all 0.1s ease, background 0.3s ease;
}

/* ux */
.button:hover,
.button:focus {
  background: #df6108;
}

.button:active {
  box-shadow: 0 0 0 3px #2f2e41, 0 4px 0 #2f2e41;
  transform: translateY(2px);
}

</style>
    

================================================
FILE: Buttons/Tanvisharma31_dry-cheetah-92.html
================================================
<button class="space-adventure-button">Join the Adventure</button>

<style>
/* From Uiverse.io by Tanvisharma31 - Tags: button */
.space-adventure-button {
  background-color: #1a1a2e;
  color: #fff;
  border: none;
  padding: 20px;
  font-size: 17px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 40px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

.space-adventure-button:hover {
  background-color: #eb4d4b;
  cursor: pointer;
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2);
}

</style>


================================================
FILE: Buttons/TemRevil_shaggy-donkey-83.html
================================================
<button class="button">
  <div class="b-hover">
    <div class="cir-1 filter"></div>
    <div class="cir-2 filter"></div>
    <div class="cir-3 filter"></div>
    <div class="cir-4 filter"></div>
    <div class="cir-5 filter"></div>
    <div class="cir-6 filter"></div>
  </div>
  Charge &amp; Go
</button>

<style>
/* From Uiverse.io by TemRevil  - Tags: material design, neumorphism, glassmorphism, animation, subscription, button, hover, smooth */
.button {
  position: relative;
  z-index: 1;
  padding: 10px 20px;
  background-color: transparent;
  color: #124;
  font-size: 28px;
  border: none;
  border-radius: 5px;
  transition: 0.15s 0s linear;
  cursor: pointer;
  overflow: hidden;
}
.button:hover {
  color: #fff;
}
.button:active {
  scale: 0.98;
}
.b-hover {
  position: relative;
  bottom: -45px;
}
.button:hover .b-hover {
  animation: b-a 0.2s linear forwards;
}

.cir-1 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: -6;
  left: -120px;
  bottom: -20px;
  background-color: #3395ffa1;
  border-radius: 50%;
}
.button:hover .cir-1 {
  animation: cir-1-border 0.5s 0.3s linear forwards;
}
.cir-2 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: -2;
  left: -140px;
  bottom: -20px;
  background-color: #3358ffa1;
  border-radius: 50%;
}
.cir-3 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: -3;
  left: -160px;
  bottom: -20px;
  background-color: #6333ffa1;
  border-radius: 50%;
}
.cir-4 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: -4;
  left: -180px;
  bottom: -20px;
  background-color: #e433ffa1;
  border-radius: 50%;
}
.cir-5 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: -5;
  left: -200px;
  bottom: -20px;
  background-color: #ff33aab2;
  border-radius: 50%;
}
.cir-6 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: -6;
  left: -220px;
  bottom: -20px;
  background-color: #ff0084;
  border-radius: 50%;
}
.button:hover .cir-6 {
  animation: cir-6-border 0.5s 0.3s linear forwards;
}
.filter {
  animation: blur 0.6s 1s infinite linear alternate;
}
@keyframes b-a {
  0% {
    left: 0;
  }
  100% {
    left: 200px;
  }
}

@keyframes cir-1-border {
  0% {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
  }
  100% {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}
@keyframes cir-6-border {
  0% {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
  }
  100% {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
}

@keyframes blur {
  0% {
    filter: none;
  }
  100% {
    filter: blur(3px);
  }
}

</style>
    

================================================
FILE: Buttons/TemRevil_slippery-fox-2.html
================================================
<button class="button">
  <div class="b-hover">
    <div class="cir-1 filter"></div>
    <div class="cir-2 filter"></div>
    <div class="cir-3 filter"></div>
    <div class="cir-4 filter"></div>
    <div class="cir-5 filter"></div>
    <div class="cir-6 filter"></div>
  </div>
  Charge &amp; Go
</button>

<style>
/* From Uiverse.io by TemRevil  - Tags: simple, material design, glassmorphism, animation, subscription, gradient, button, hover */
.button {
  position: relative;
  z-index: 1;
  padding: 10px 20px;
  background-color: transparent;
  color: #124;
  font-size: 28px;
  border: none;
  border-radius: 5px;
  transition: 0.15s 0s linear;
  cursor: pointer;
  overflow: hidden;
}
.button:hover {
  color: #fff;
}
.button:active {
  scale: 0.98;
}
.b-hover {
  position: relative;
  bottom: -45px;
}
.button:hover .b-hover {
  animation: b-a 0.2s linear forwards;
}

.cir-1 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: -6;
  left: -120px;
  bottom: -20px;
  background-color: #3395ffa1;
  border-radius: 50%;
}
.button:hover .cir-1 {
  animation: cir-1-border 0.5s 0.3s linear forwards;
}
.cir-2 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: -2;
  left: -140px;
  bottom: -20px;
  background-color: #3358ffa1;
  border-radius: 50%;
}
.cir-3 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: -3;
  left: -160px;
  bottom: -20px;
  background-color: #6333ffa1;
  border-radius: 50%;
}
.cir-4 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: -4;
  left: -180px;
  bottom: -20px;
  background-color: #e433ffa1;
  border-radius: 50%;
}
.cir-5 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: -5;
  left: -200px;
  bottom: -20px;
  background-color: #ff33aab2;
  border-radius: 50%;
}
.cir-6 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: -6;
  left: -220px;
  bottom: -20px;
  background-color: #ff0084;
  border-radius: 50%;
}
.button:hover .cir-6 {
  animation: cir-6-border 0.5s 0.3s linear forwards;
}
.filter {
  animation: blur 0.6s 1s infinite linear alternate;
}
@keyframes b-a {
  0% {
    left: 0;
  }
  100% {
    left: 200px;
  }
}

@keyframes cir-1-border {
  0% {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
  }
  100% {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}
@keyframes cir-6-border {
  0% {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
  }
  100% {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
}

@keyframes blur {
  0% {
    filter: none;
  }
  100% {
    filter: blur(3px);
  }
}

</style>
    

================================================
FILE: Buttons/TimTrayler_big-crab-49.html
================================================
<button> Click me
</button>
<style>
/* From Uiverse.io by TimTrayler - Tags: button */
button {
 --hover-shadows: 16px 16px 33px #121212,
                   -16px -16px 33px #303030;
 --accent: fuchsia;
 font-weight: bold;
 letter-spacing: 0.1em;
 border: none;
 border-radius: 1.1em;
 background-color: #212121;
 color: white;
 padding: 1em 2em;
 transition: box-shadow ease-in-out 0.3s,
             background-color ease-in-out 0.1s,
             letter-spacing ease-in-out 0.1s,
             transform ease-in-out 0.1s;
 box-shadow: 13px 13px 10px #1c1c1c,
             -13px -13px 10px #262626;
}

button:hover {
 box-shadow: var(--hover-shadows);
}

button:active {
 box-shadow: var(--hover-shadows),
              var(--accent) 0px 0px 30px 5px;
 background-color: var(--accent);
 transform: scale(0.95);
}

</style>


================================================
FILE: Buttons/Tsiangana_curly-rat-7.html
================================================
<button class="botao">
  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="mysvg"><g id="SVGRepo_bgCarrier" stroke-width="0">
    </g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier">
       <g id="Interface / Download"> 
       <path id="Vector" d="M6 21H18M12 3V17M12 17L17 12M12 17L7 12" stroke="#f1f1f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       </path>
    </g> </g>
  </svg>
  <span class="texto">Download</span>
</button>
<style>
/* From Uiverse.io by Tsiangana - Tags: animation, button, hover, space, download, futuristic, gradients, hover button */
.botao {
  width: 125px;
  height: 45px;
  border-radius: 20px;
  border: none;
  box-shadow: 1px 1px rgba(107, 221, 215, 0.37);
  padding: 5px 10px;
  background: rgb(47,93,197);
  background: linear-gradient(160deg, rgba(47,93,197,1) 0%, rgba(46,86,194,1) 5%, rgba(47,93,197,1) 11%, rgba(59,190,230,1) 57%, rgba(0,212,255,1) 71%);
  color: #fff;
  font-family: Roboto, sans-serif;
  font-weight: 505;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(59, 190, 230, 0.568));
  transition: .5s linear;
}

.botao .mysvg {
  display: none;
}

.botao:hover {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: .5s linear;
}

.botao:hover .texto {
  display: none;
}

.botao:hover .mysvg {
  display: inline;
}

.botao:hover::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 100%;
  height: 100%;
  border: 3.5px solid transparent;
  border-top: 3.5px solid #fff;
  border-right: 3.5px solid #fff;
  border-radius: 50%;
  animation: animateC 2s linear infinite;
}

@keyframes animateC {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

</style>


================================================
FILE: Buttons/Tsiangana_rude-wolverine-12.html
================================================
<button class="button">
  <span class="one">Download 0%</span>
  <span class="two">100%</span>
</button>

<style>
/* From Uiverse.io by Tsiangana  - Tags: simple, gradient, button, download, hover effect */
.button {
  width: 140px;
  height: 45px;
  border-radius: 30em;
  position: relative;
  overflow: hidden;
  color: #fff;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  background: #ff135a;
  border: 3px solid #fff;
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
  transition: 0.6s ease-in;
}

.button:hover {
  background: #fff;
}

.button .two {
  display: none;
}

.button::before {
  content: "";
  width: 0;
  height: 50px;
  border-radius: 30em;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%);
  transition: 0.5s ease;
  display: block;
  z-index: -1;
}

.button:hover::before {
  width: 140px;
  transition: 3s linear;
}

.button:hover .one {
  display: none;
}

.button:hover .two {
  display: inline;
}

</style>
    

================================================
FILE: Buttons/Tsiangana_smart-starfish-50.html
================================================
<button>
  Follow me
  <div class="star-1">
    <svg
      viewBox="0 0 16 16"
      class="bi bi-discord"
      fill="currentColor"
      height="25"
      width="25"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"
      ></path>
    </svg>
  </div>
  <div class="star-2">
    <svg
      viewBox="0 0 16 16"
      class="bi bi-facebook"
      fill="currentColor"
      height="25"
      width="25"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"
      ></path>
    </svg>
  </div>
  <div class="star-3">
    <svg
      viewBox="0 0 16 16"
      class="bi bi-messenger"
      fill="currentColor"
      height="25"
      width="25"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M0 7.76C0 3.301 3.493 0 8 0s8 3.301 8 7.76-3.493 7.76-8 7.76c-.81 0-1.586-.107-2.316-.307a.639.639 0 0 0-.427.03l-1.588.702a.64.64 0 0 1-.898-.566l-.044-1.423a.639.639 0 0 0-.215-.456C.956 12.108 0 10.092 0 7.76m5.546-1.459-2.35 3.728c-.225.358.214.761.551.506l2.525-1.916a.48.48 0 0 1 .578-.002l1.869 1.402a1.2 1.2 0 0 0 1.735-.32l2.35-3.728c.226-.358-.214-.761-.551-.506L9.728 7.381a.48.48 0 0 1-.578.002L7.281 5.98a1.2 1.2 0 0 0-1.735.32z"
      ></path>
    </svg>
  </div>
  <div class="star-4">
    <svg
      viewBox="0 0 16 16"
      class="bi bi-whatsapp"
      fill="currentColor"
      height="25"
      width="25"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"
      ></path>
    </svg>
  </div>
  <div class="star-5">
    <svg
      viewBox="0 0 16 16"
      class="bi bi-instagram"
      fill="currentColor"
      height="25"
      width="25"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"
      ></path>
    </svg>
  </div>
  <div class="star-6">
    <svg
      viewBox="0 0 16 16"
      class="bi bi-twitter"
      fill="currentColor"
      height="25"
      width="25"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15"
      ></path>
    </svg>
  </div>
</button>

<style>
/* From Uiverse.io by Tsiangana  - Tags: button, modern, social media, follow, hover effect */
button {
  position: relative;
  padding: 12px 35px;
  background: #fec195;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  border: 3px solid #fec195;
  border-radius: 19px;
  box-shadow: 0 0 0 #fec1958c;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.star-1 {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}

.star-2 {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-3 {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-4 {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-5 {
  position: absolute;
  top: 25%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-6 {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all 0.8s ease;
}

button:hover {
  background: transparent;
  color: #fec195;
  box-shadow: 0 0 25px #fec1958c;
}

button:hover .star-1 {
  position: absolute;
  top: -80%;
  left: -30%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}

button:hover .star-2 {
  position: absolute;
  top: -40%;
  left: 16%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}

button:hover .star-3 {
  position: absolute;
  top: 95%;
  left: 2%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}

button:hover .star-4 {
  position: absolute;
  top: -70%;
  left: 75%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}

button:hover .star-5 {
  position: absolute;
  top: 35%;
  left: 115%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}

button:hover .star-6 {
  position: absolute;
  top: 75%;
  left: 60%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px #fffdef);
  z-index: 2;
}

.fil0 {
  fill: #fffdef;
}

</style>
    

================================================
FILE: Buttons/Tsiangana_sweet-rattlesnake-28.html
================================================
<button class="Btn">
  <div class="sign">
    <svg
      viewBox="0 0 16 16"
      class="bi bi-trash3-fill"
      fill="currentColor"
      height="18"
      width="18"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5"
      ></path>
    </svg>
  </div>

  <div class="text">Delete</div>
</button>

<style>
/* From Uiverse.io by Tsiangana  - Tags: gradient, button, delete, hover effect, button hover effect  */
.Btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background: rgb(255, 135, 65);
  background: linear-gradient(
    250deg,
    rgba(255, 135, 65, 1) 15%,
    rgba(255, 65, 65, 1) 65%
  );
}

/* plus sign */
.sign {
  width: 100%;
  transition-duration: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign svg {
  width: 17px;
}

.sign svg path {
  fill: white;
}
/* text */
.text {
  position: absolute;
  right: 0%;
  width: 0%;
  opacity: 0;
  color: white;
  font-size: 1.2em;
  font-weight: 600;
  transition-duration: 0.3s;
}
/* hover effect on button width */
.Btn:hover {
  width: 125px;
  border-radius: 40px;
  transition-duration: 0.3s;
}

.Btn:hover .sign {
  width: 30%;
  transition-duration: 0.3s;
  padding-left: 20px;
}
/* hover effect button's text */
.Btn:hover .text {
  opacity: 1;
  width: 70%;
  transition-duration: 0.3s;
  padding-right: 10px;
}
/* button click effect*/
.Btn:active {
  transform: translate(2px, 2px);
}

</style>
    

================================================
FILE: Buttons/UNDERMAKEING_wonderful-cat-67.html
================================================
<button class="reward-btn">
  <span class="IconContainer">
    <svg
      class="box-top box"
      viewBox="0 0 60 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M2 18L58 18"
        stroke="#6A8EF6"
        stroke-width="4"
        stroke-linecap="round"
      ></path>
      <circle
        cx="20.5"
        cy="9.5"
        r="7"
        fill="#101218"
        stroke="#6A8EF6"
        stroke-width="5"
      ></circle>
      <circle
        cx="38.5"
        cy="9.5"
        r="7"
        fill="#101218"
        stroke="#6A8EF6"
        stroke-width="5"
      ></circle>
    </svg>

    <svg
      class="box-body box"
      viewBox="0 0 58 44"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <mask id="path-1-inside-1_81_19" fill="white">
        <rect width="58" height="44" rx="3"></rect>
      </mask>
      <rect
        width="58"
        height="44"
        rx="3"
        fill="#101218"
        stroke="#6A8EF6"
        stroke-width="8"
        mask="url(#path-1-inside-1_81_19)"
      ></rect>
      <line
        x1="-3.61529e-09"
        y1="29"
        x2="58"
        y2="29"
        stroke="#6A8EF6"
        stroke-width="6"
      ></line>
      <path
        d="M45.0005 20L36 3"
        stroke="#6A8EF6"
        stroke-width="5"
        stroke-linecap="round"
      ></path>
      <path
        d="M21 3L13.0002 19.9992"
        stroke="#6A8EF6"
        stroke-width="5"
        stroke-linecap="round"
      ></path>
    </svg>

    <span class="coin"></span>
  </span>
  <span class="text">Rewards</span>
</button>

<style>
/* From Uiverse.io by UNDERMAKEING  - Tags: button */
/* From Uiverse.io by vinodjangid07 */
.reward-btn {
  width: 120px;
  height: 40px;
  background-color: #101218;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}
.IconContainer {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.IconContainer svg {
  width: 40%;
  z-index: 3;
}
.box-top {
  transition: all 0.3s;
}
.text {
  width: 70px;
  height: 100%;
  font-size: 13px;
  color: #6a8ef6;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: 600;
}
.reward-btn:hover .IconContainer .box-top {
  transform: translateY(-5px);
}
.reward-btn:hover {
  background-color: #202531;
}
.reward-btn:hover .coin {
  transform: translateY(-5px);
  transition-delay: 0.2s;
}
.coin {
  width: 25%;
  height: 25%;
  background-color: #e4d61a;
  position: absolute;
  border-radius: 50%;
  transition: all 0.3s;
  z-index: 1;
  border: 2px solid #ffe956;
  margin-top: 4px;
}

</style>
    

================================================
FILE: Buttons/Ubaton_tender-eel-32.html
================================================
<!-- From Uiverse.io by Ubaton  - Tags: button, hover button, tailwindbutton -->
<button
  class="text-zinc-700 hover:text-zinc-200 backdrop-blur-lg bg-gradient-to-tr from-transparent via-[rgba(121,121,121,0.16)] to-transparent rounded-md py-2 px-6 shadow hover:shadow-zinc-400 duration-700"
>
  Button
</button>


    

================================================
FILE: Buttons/UmangLadha_neat-duck-51.html
================================================
<button role="button" class="button">
  <span class="text">Button</span>
</button>

<style>
/* From Uiverse.io by UmangLadha  - Tags: simple, button, html, css, buttons, hover button, #button, 3d button */
.button {
  background: #38579b;
  border-top: 1px solid #38538c;
  border-right: 1px solid #1f2d4d;
  border-bottom: 1px solid #151e33;
  border-left: 1px solid #1f2d4d;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d,
    0 6px 0px #1f3053, 0 8px 4px 1px #111111;
  -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d,
    0 6px 0px #1f3053, 0 8px 4px 1px #111111;
  box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053,
    0 8px 4px 1px #111111;
  color: #fff;
  font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
  line-height: 1;
  padding: 10px 0 12px 0;
  text-align: center;
  text-shadow: 0px -1px 1px #1e2d4d;
  width: 150px;
  -webkit-background-clip: padding-box;
}

.button:hover {
  -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d,
    0 6px 0px #1f3053, 0 8px 4px 1px #111111;
  -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d,
    0 6px 0px #1f3053, 0 8px 4px 1px #111111;
  box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053,
    0 8px 4px 1px #111111;
  cursor: pointer;
}

.button:active {
  -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d,
    0 2px 0 #1f3053, 0 4px 3px 0 #111111;
  -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d,
    0 2px 0 #1f3053, 0 4px 3px 0 #111111;
  box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053,
    0 4px 3px 0 #111111;
  transform: translateY(4px);
}

</style>
    

================================================
FILE: Buttons/Uncannypotato69_cuddly-cougar-90.html
================================================
<label for="button" class="label">
  <button id="button" class="button" name="button">
    <div class="roundThing">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="33"
        height="32"
        fill="none"
        viewBox="0 0 33 32"
        class="svg"
      >
        <path
          stroke="#161616"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="m10.367 8.427 11.32-3.774c5.08-1.693 7.84 1.08 6.16 6.16l-3.774 11.32c-2.533 7.614-6.693 7.614-9.226 0l-1.12-3.36-3.36-1.12c-7.614-2.533-7.614-6.68 0-9.226ZM13.98 18.2l4.773-4.786"
        ></path>
      </svg>
      <p>Send Message</p>
    </div>
  </button>
</label>

<style>
/* From Uiverse.io by Uncannypotato69  - Tags: simple, button, hover, light, modern, click, btn, simple button */
.button {
  height: fit-content;
  width: fit-content;
  background-color: #ebebeb;
  border-radius: 1rem;
  padding: 0.5em;
  position: relative;
  z-index: 1;
  transition: all 200ms;
  outline: none;
  border: none;
  cursor: pointer;
}

.label {
  --shadow-color: 0deg 0% 73%;
  --shadow: 0px 0.3px 0.4px hsl(var(--shadow-color) / 0.21),
    0.1px 1.7px 2px -0.3px hsl(var(--shadow-color) / 0.23),
    0.1px 3.1px 3.7px -0.7px hsl(var(--shadow-color) / 0.24),
    0.2px 5.2px 6.2px -1px hsl(var(--shadow-color) / 0.26),
    0.3px 8.5px 10.2px -1.3px hsl(var(--shadow-color) / 0.27),
    0.5px 13.6px 16.3px -1.7px hsl(var(--shadow-color) / 0.29),
    0.7px 21px 25.2px -2px hsl(var(--shadow-color) / 0.3);
  --shadow-hover: 0px 0.5px 0.6px hsl(var(--shadow-color) / 0.2),
    -0.1px 1.6px 1.9px -0.7px hsl(var(--shadow-color) / 0.22),
    -0.2px 3.7px 4.4px -1.3px hsl(var(--shadow-color) / 0.25);

  height: fit-content;
  width: fit-content;
  padding: 3px;
  background-image: linear-gradient(to bottom, #dddedd, #7a7b7a);
  border-radius: calc(1rem + 3px);
  transition: all 300ms;
  box-shadow: 0px 0px 0px 1px #fff, var(--shadow);
  color: #161616;
  cursor: pointer;
}

.label:has(button:hover) {
  transform: translate(0px, 4px);
  box-shadow: 0px 0px 0px 1px #fff, var(--shadow-hover);
}

.label:has(button:active) {
  transform: translate(0px, 8px);
  box-shadow: 0px 0px 0px 1px #fff;
}

.roundThing {
  display: flex;
  justify-content: center;
  align-items: center;
  height: fit-content;
  width: fit-content;
  gap: 0.5em;
  padding: 1em;
  border-radius: 2rem;
  box-shadow: inset 0px 16px 16px 0px #d8dad8, inset 0px -16px 16px 0px #f4f6f5;
  overflow: hidden;
}

.button:hover .roundThing {
  box-shadow: inset 0px 8px 8px 0px #d8dad8, inset 0px -24px 24px 0px #f4f6f5;
  transition: all 300ms;
}

.roundThing p {
  font-weight: 700;
  color: #161616;
  letter-spacing: -0.03rem;
}

.svg {
  height: 1.5rem;
  aspect-ratio: 1/1;
  transition: transform 300ms;
}

.button:hover .svg {
  transform: rotate(45deg);
  animation: onHover 750ms ease infinite both;
  animation-delay: 300ms;
}

.button:active .svg {
  animation-play-state: paused;
}

@keyframes onHover {
  50% {
    translate: 4px;
  }
}

</style>
    

================================================
FILE: Buttons/Uncannypotato69_gentle-mule-75.html
================================================
<!-- From Uiverse.io by Uncannypotato69  - Tags: skeuomorphism, pink, button, click, hover effect, click effect, tailwindbutton, tailwindcss -->
<button
  class="group flex h-fit w-fit flex-col items-center justify-center rounded-full bg-[#F1ddcf] px-[2em] py-[0.5em] shadow-[inset_0px_2px_4px_0px_#f9f1eb,inset_0px_-2px_4px_0px_#e8c8b0,0px_-2px_16px_0px_#e8c8b0,0px_2px_16px_0px_#f9f1eb] duration-200 hover:translate-y-[5%] active:translate-y-[7%] active:shadow-[inset_0px_-2px_4px_0px_#f9f1eb,inset_0px_2px_4px_0px_#e8c8b0,0px_2px_16px_0px_#e8c8b0,0px_2px_16px_0px_#f9f1eb]"
>
  <p
    class="font-nunito text-[1.5em] font-semibold text-[#d19466] duration-200 group-active:translate-y-[5%]"
  >
    Button
  </p>
</button>


    

================================================
FILE: Buttons/Uncannypotato69_loud-cow-23.html
================================================
<!-- From Uiverse.io by Uncannypotato69  - Tags: simple, red, button, click, hover effect, hover button, tailwindbutton, tailwindcss -->
<button
  class="flex h-fit w-fit items-center justify-center gap-[0.5em] rounded-full bg-[#c60808] px-[2em] py-[1em] text-white shadow-[inset_0px_-4px_4px_0px_#f05b5b,0px_0px_0px_2px_#f9d1d1,0px_4px_0px_0px_#A60000] duration-[250ms] hover:translate-y-[0.25em] active:translate-y-[0.5em] active:shadow-[inset_0px_-4px_4px_0px_#f05b5b,0px_0px_0px_2px_#f9d1d1]"
>
  <svg
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="h-[1.5em] w-[1.5em]"
  >
    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
    <g
      id="SVGRepo_tracerCarrier"
      stroke-linecap="round"
      stroke-linejoin="round"
    ></g>
    <g id="SVGRepo_iconCarrier">
      <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="1.5"></circle>
      <path
        d="M9 17C9.85038 16.3697 10.8846 16 12 16C13.1154 16 14.1496 16.3697 15 17"
        stroke="#fff"
        stroke-width="1.5"
        stroke-linecap="round"
      ></path>
      <ellipse cx="15" cy="10.5" rx="1" ry="1.5" fill="#fff"></ellipse>
      <ellipse cx="9" cy="10.5" rx="1" ry="1.5" fill="#fff"></ellipse>
    </g>
  </svg>
  <p class="[text-shadow:0px_1px_1px_0px_#950000]">Delete Account</p>
</button>


    

================================================
FILE: Buttons/Uzmakh_rare-fox-82.html
================================================
<button class="button">
  <div class="wrapper">
    <svg
      width="25"
      height="45"
      viewBox="-0.5 0 25 25"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M2.33045 8.38999C0.250452 11.82 9.42048 14.9 9.42048 14.9C9.42048 14.9 12.5005 24.07 15.9305 21.99C19.5705 19.77 23.9305 6.13 21.0505 3.27C18.1705 0.409998 4.55045 4.74999 2.33045 8.38999Z"
        stroke="#000000"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
      <path
        d="M15.1999 9.12L9.41992 14.9"
        stroke="#000000"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
    </svg>
    send message
  </div>
</button>

<style>
/* From Uiverse.io by Uzmakh  - Website: https://uiverse.io/ - Name: Shubhajit - Tags: simple, button, click, light&dark */
.button {
  padding: 8px;
  border-radius: 17px;
  border: none;
  border-bottom: 1px solid black;
  outline: none;
  cursor: pointer;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.wrapper {
  padding: 0 15px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow: inset 5px 5px 15px #bababa, inset -5px -5px 15px #ffffff;
  display: flex;
  align-items: center;
  column-gap: 8px;
  font-weight: bold;
  text-transform: capitalize;
  border-radius: 20px;
}

</style>
    

================================================
FILE: Buttons/VD232004_silent-puma-3.html
================================================
<button class="unique-button">
  <div class="svg-wrap">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="24"
      height="24"
    >
      <path fill="none" d="M0 0h24v24H0z"></path>
      <path
        fill="currentColor"
        d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
      ></path>
    </svg>
  </div>
  <span>Hover Me</span>
</button>

<style>
/* From Uiverse.io by VD232004  - Tags: button, hover button, button hover effect  */
.unique-button {
  display: flex;
  align-items: center;
  position: relative;
  width: 180px;
  height: 60px;
  padding: 15px 30px;
  font-size: 18px;
  text-decoration: none;
  color: #fff;
  background-color: #a634db;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}

.unique-button:hover {
  transition: 0.3s all ease-in-out;
  box-shadow: 5px 10px 30px #a634db;
}

.unique-button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

.unique-button:hover span {
  transform: translateX(7em);
}

.unique-button:hover .svg-wrap {
  animation: fly-1 0.6s ease-in-out infinite alternate;
  z-index: 1;
}

.unique-button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

.unique-button:hover svg {
  transform: translateX(2.5em) rotate(45deg) scale(1.2);
}

.unique-button:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}

.unique-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 80%;
  border-bottom-left-radius: 60px;
  border-top-right-radius: 60px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #2c3e50;
  transition: all 0.2s ease-in-out;
}

.unique-button:hover::before {
  width: 100%;
}

.unique-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 0;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  border-top-left-radius: 60px;
  border-bottom-right-radius: 60px;
  background-color: #2c3e50;
  transition: all 0.3s ease-in-out;
}

.unique-button:hover::after {
  height: 100%;
}

</style>
    

================================================
FILE: Buttons/Vaperene_afraid-stingray-79.html
================================================
<button class="send-message-button">
  <div class="send-message-content">
    <svg
      height="24"
      width="24"
      viewBox="0 0 23.19 19.89"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M0,19.89l23.19-9.95L0,0v7.74l16.58,2.21L0,12.16v7.74Z"
        fill="#ccc"
      ></path>
      <path
        d="M.42,19.53l22.36-9.59L.42.36v7.46l15.98,2.13L.42,12.08v7.46Z"
        fill="#fff"
      ></path>
      <path
        d="M1.1,18.95l20.99-9L1.1.95v7l15,2L1.1,11.95v7Z"
        fill="#000"
      ></path>
    </svg>
    <span>Send Message</span>
  </div>
</button>

<style>
/* From Uiverse.io by Vaperene  - Tags: simple, material design, neumorphism, icon, button, #button, button hover effect , 2d button */
.send-message-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f3f300;
  border: 2px solid #a5a5a500;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.5s, border-color 0.4s,
    padding 0.3s;
}

.send-message-button:hover {
  background-image: linear-gradient(59deg, #f3f3f3, #d7d6d6c0);
  border-color: #e9e9e9;
}

.send-message-button:active {
}

.send-message-content {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 25px;
  padding: 8px 16px;
  box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s;
}

.send-message-button:active .send-message-content {
  box-shadow: inset 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.send-message-content svg {
  margin-right: 10px;
  fill: #1d0c0c;
  transition: fill 0.3s;
}

.send-message-content span {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  transition: color 0.3s;
}

.send-message-button:hover .send-message-content span {
  color: #1d0c0c;
}

</style>
    

================================================
FILE: Buttons/VashonG_afraid-lion-76.html
================================================
<div class="relative inline-block w-full py-3 modgp">
  <div class="relative">
    <button
      class="inline-flex items-center justify-center bg-primary text-sm text-white font-medium rounded-lg enabled:hover:bg-primary-dark enabled:hover:shadow-md enabled:active:bg-primary-dark enabled:focus:bg-primary-dark focus:outline-none px-4 py-2 w-full py-2.5 relative disabled:opacity-50 transition-all"
      type="button"
    >
      <div class="w-full flex items-center justify-center">
        Let the Magic Begin
      </div>
    </button>
  </div>
  <div class="absolute inset-0 pointer-events-none">
    <div
      id="style-AQliM"
      class="pointer-events-none absolute z-10 animate-magic-sparkle style-AQliM"
    >
      <svg
        style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
        fill="none"
        viewBox="0 0 68 68"
        height="6"
        width="6"
        class="animate-spin-slow"
      >
        <path
          fill="white"
          d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
        ></path>
      </svg>
    </div>
    <div
      id="style-WCb99"
      class="pointer-events-none absolute z-10 animate-magic-sparkle style-WCb99"
    >
      <svg
        style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
        fill="none"
        viewBox="0 0 68 68"
        height="9"
        width="9"
        class="animate-spin-slow"
      >
        <path
          fill="white"
          d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
        ></path>
      </svg>
    </div>
    <div
      id="style-dBNZV"
      class="pointer-events-none absolute z-10 animate-magic-sparkle style-dBNZV"
    >
      <svg
        style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
        fill="none"
        viewBox="0 0 68 68"
        height="7"
        width="7"
        class="animate-spin-slow"
      >
        <path
          fill="white"
          d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
        ></path>
      </svg>
    </div>
    <div
      id="style-tiisO"
      class="pointer-events-none absolute z-10 animate-magic-sparkle style-tiisO"
    >
      <svg
        style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
        fill="none"
        viewBox="0 0 68 68"
        height="6"
        width="6"
        class="animate-spin-slow"
      >
        <path
          fill="white"
          d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
        ></path>
      </svg>
    </div>
    <div
      id="style-re9B7"
      class="pointer-events-none absolute z-10 animate-magic-sparkle style-re9B7"
    >
      <svg
        style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
        fill="none"
        viewBox="0 0 68 68"
        height="9"
        width="9"
        class="animate-spin-slow"
      >
        <path
          fill="white"
          d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
        ></path>
      </svg>
    </div>
    <div
      id="style-BKG4G"
      class="pointer-events-none absolute z-10 animate-magic-sparkle style-BKG4G"
    >
      <svg
        style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
        fill="none"
        viewBox="0 0 68 68"
        height="5"
        width="5"
        class="animate-spin-slow"
      >
        <path
          fill="white"
          d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
        ></path>
      </svg>
    </div>
    <div
      id="style-NaoVe"
      class="pointer-events-none absolute z-10 animate-magic-sparkle style-NaoVe"
    >
      <svg
        style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
        fill="none"
        viewBox="0 0 68 68"
        height="6"
        width="6"
        class="animate-spin-slow"
      >
        <path
          fill="white"
          d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
        ></path>
      </svg>
    </div>
    <div
      id="style-pwIlv"
      class="pointer-events-none absolute z-10 animate-magic-sparkle style-pwIlv"
    >
      <svg
        style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
        fill="none"
        viewBox="0 0 68 68"
        height="9"
        width="9"
        class="animate-spin-slow"
      >
        <path
          fill="white"
          d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
        ></path>
      </svg>
    </div>
    <div
      id="style-QmcAd"
      class="pointer-events-none absolute z-10 animate-magic-sparkle style-QmcAd"
    >
      <svg
        style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
        fill="none"
        viewBox="0 0 68 68"
        height="5"
        width="5"
        class="animate-spin-slow"
      >
        <path
          fill="white"
          d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
        ></path>
      </svg>
    </div>
    <div
      id="style-VG2eL"
      class="pointer-events-none absolute z-10 animate-magic-sparkle style-VG2eL"
    >
      <svg
        style="filter: drop-shadow(rgb(96, 165, 250) 0px 0px 2px);"
        fill="none"
        viewBox="0 0 68 68"
        height="9"
        width="9"
        class="animate-spin-slow"
      >
        <path
          fill="white"
          d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z"
        ></path>
      </svg>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by VashonG  - Tags: button */
.relative {
  position: relative;
}

.inline-block {
  display: inline-block;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

:backdrop {
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
}

.pointer-events-none {
  pointer-events: none;
}

.absolute {
  position: absolute;
}

.inset-0 {
  inset: 0;
}

button {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  width: 250px !important;
  border: none;
}

button {
  text-transform: none;
}

button {
  cursor: pointer;
}

.inline-flex {
  display: inline-flex;
}

.justify-center {
  justify-content: center;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(36 118 251 / var(--tw-bg-opacity));
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.font-medium {
  font-weight: 500;
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

#style-AQliM.style-AQliM {
  top: 1%;
  left: 99%;
}
#style-WCb99.style-WCb99 {
  top: 7%;
  left: 1%;
}
#style-dBNZV.style-dBNZV {
  top: 93%;
  left: 23%;
}
#style-tiisO.style-tiisO {
  top: 43%;
  left: 15%;
}
#style-re9B7.style-re9B7 {
  top: 93%;
  left: 9%;
}
#style-BKG4G.style-BKG4G {
  top: 21%;
  left: 88%;
}
#style-NaoVe.style-NaoVe {
  top: 99%;
  left: 95%;
}
#style-pwIlv.style-pwIlv {
  top: 64%;
  left: 99%;
}
#style-QmcAd.style-QmcAd {
  top: 14%;
  left: 45%;
}
#style-VG2eL.style-VG2eL {
  top: 2%;
  left: 48%;
}

/* Keyframes for sparkle animation */
@keyframes sparkle {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Add animation to sparkle elements */
.animate-magic-sparkle {
  animation: sparkle 2s infinite;
}

.style-AQliM {
  animation-delay: 0.5s;
}
.style-WCb99 {
  animation-delay: 0.33s;
}
.style-dBNZV {
  animation-delay: 0.6s;
}
.style-tiisO {
  animation-delay: 0.9s;
}
.style-re9B7 {
  animation-delay: 1.2s;
}
.style-BKG4G {
  animation-delay: 1.5s;
}
.style-NaoVe {
  animation-delay: 1.8s;
}
.style-pwIlv {
  animation-delay: 1.9s;
}
.style-QmcAd {
  animation-delay: 1.4s;
}
.style-VG2eL {
  animation-delay: 1.7s;
}

</style>
    

================================================
FILE: Buttons/VashonG_hot-baboon-9.html
================================================


 <div class="container">
    <div class="btn"><a href="#">Read More</a></div>
 </div>




<style>
/* From Uiverse.io by VashonG - Tags: glassmorphism, button, glow */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 200px;
}

.container .btn {
  height: 50px;
  margin: 20px;
  margin-bottom: 40px;
  position: relative;
  width: 155px;
}

.container .btn a {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  font-size: 18px;
  font-weight: 700;
  left: 0;
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  justify-content: center;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(15px);
  z-index: 1;
  transition: 0.5s;
}

.container .btn:hover a {
  letter-spacing: 2px;
}

.container .btn a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left,
                rgba(255,255,255,0.15),
                transparent);
  transform: skewX(45deg) translateX(0);
  transition: 0.5s;
}

.container .btn:hover a::before {
  transform: skewX(45deg) translateX(200%);
}

.container .btn::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  height: 10px;
  width: 30px;
  background: rgb(8, 107, 183);
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.container .btn:hover::before {
  bottom: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

.container .btn::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -5px;
  height: 10px;
  width: 30px;
  background: rgb(7, 95, 189);
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.container .btn:hover::after {
  top: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

.container .btn:nth-child(1):before,
.container .btn:nth-child(1)::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff,
    0 0 15px #2bd2ff,
    0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}

.container .btn:active a {
  color: #000;
}

</style>


================================================
FILE: Buttons/VashonG_mean-mayfly-77.html
================================================
<button class="uiverse">
    <div class="wrapper">
        <span>UIVERSE</span>
        <div class="circle circle-12"></div>
        <div class="circle circle-11"></div>
        <div class="circle circle-10"></div>
        <div class="circle circle-9"></div>
        <div class="circle circle-8"></div>
        <div class="circle circle-7"></div>
        <div class="circle circle-6"></div>
        <div class="circle circle-5"></div>
        <div class="circle circle-4"></div>
        <div class="circle circle-3"></div>
        <div class="circle circle-2"></div>
        <div class="circle circle-1"></div>
    </div>
</button>


<style>
/* From Uiverse.io by VashonG - Tags: button, ios, uiverse, multicolor */
.uiverse {
  --duration: 7s;
  --easing: linear;
  --c-color-1: rgba(255, 163, 26, .7);
  --c-color-2: #1a23ff;
  --c-color-3: #e21bda;
  --c-color-4: rgba(255, 232, 26, .7);
  --c-shadow: rgba(255, 223, 87, .5);
  --c-shadow-inset-top: rgba(255, 223, 52, .9);
  --c-shadow-inset-bottom: rgba(255, 250, 215, .8);
  --c-radial-inner: #ffd215;
  --c-radial-outer: #fff172;
  --c-color: #fff;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  position: relative;
  cursor: pointer;
  border: none;
  display: table;
  border-radius: 24px;
  padding: 0;
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--c-color);
  background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);
  box-shadow: 0 0 14px var(--c-shadow);
}

.uiverse:before {
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  box-shadow: inset 0 3px 12px var(--c-shadow-inset-top), inset 0 -3px 4px var(--c-shadow-inset-bottom);
}

.uiverse .wrapper {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
  border-radius: 24px;
  min-width: 132px;
  padding: 12px 0;
}

.uiverse .wrapper span {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.uiverse .wrapper .circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  filter: blur(var(--blur, 8px));
  background: var(--background, transparent);
  transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
  animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.uiverse .wrapper .circle.circle-1, .uiverse .wrapper .circle.circle-9, .uiverse .wrapper .circle.circle-10 {
  --background: var(--c-color-4);
}

.uiverse .wrapper .circle.circle-3, .uiverse .wrapper .circle.circle-4 {
  --background: var(--c-color-2);
  --blur: 14px;
}

.uiverse .wrapper .circle.circle-5, .uiverse .wrapper .circle.circle-6 {
  --background: var(--c-color-3);
  --blur: 16px;
}

.uiverse .wrapper .circle.circle-2, .uiverse .wrapper .circle.circle-7, .uiverse .wrapper .circle.circle-8, .uiverse .wrapper .circle.circle-11, .uiverse .wrapper .circle.circle-12 {
  --background: var(--c-color-1);
  --blur: 12px;
}

.uiverse .wrapper .circle.circle-1 {
  --x: 0;
  --y: -40px;
  --animation: circle-1;
}

.uiverse .wrapper .circle.circle-2 {
  --x: 92px;
  --y: 8px;
  --animation: circle-2;
}

.uiverse .wrapper .circle.circle-3 {
  --x: -12px;
  --y: -12px;
  --animation: circle-3;
}

.uiverse .wrapper .circle.circle-4 {
  --x: 80px;
  --y: -12px;
  --animation: circle-4;
}

.uiverse .wrapper .circle.circle-5 {
  --x: 12px;
  --y: -4px;
  --animation: circle-5;
}

.uiverse .wrapper .circle.circle-6 {
  --x: 56px;
  --y: 16px;
  --animation: circle-6;
}

.uiverse .wrapper .circle.circle-7 {
  --x: 8px;
  --y: 28px;
  --animation: circle-7;
}

.uiverse .wrapper .circle.circle-8 {
  --x: 28px;
  --y: -4px;
  --animation: circle-8;
}

.uiverse .wrapper .circle.circle-9 {
  --x: 20px;
  --y: -12px;
  --animation: circle-9;
}

.uiverse .wrapper .circle.circle-10 {
  --x: 64px;
  --y: 16px;
  --animation: circle-10;
}

.uiverse .wrapper .circle.circle-11 {
  --x: 4px;
  --y: 4px;
  --animation: circle-11;
}

.uiverse .wrapper .circle.circle-12 {
  --blur: 14px;
  --x: 52px;
  --y: 4px;
  --animation: circle-12;
}

@keyframes circle-1 {
  33% {
    transform: translate(0px, 16px) translateZ(0);
  }

  66% {
    transform: translate(12px, 64px) translateZ(0);
  }
}

@keyframes circle-2 {
  33% {
    transform: translate(80px, -10px) translateZ(0);
  }

  66% {
    transform: translate(72px, -48px) translateZ(0);
  }
}

@keyframes circle-3 {
  33% {
    transform: translate(20px, 12px) translateZ(0);
  }

  66% {
    transform: translate(12px, 4px) translateZ(0);
  }
}

@keyframes circle-4 {
  33% {
    transform: translate(76px, -12px) translateZ(0);
  }

  66% {
    transform: translate(112px, -8px) translateZ(0);
  }
}

@keyframes circle-5 {
  33% {
    transform: translate(84px, 28px) translateZ(0);
  }

  66% {
    transform: translate(40px, -32px) translateZ(0);
  }
}

@keyframes circle-6 {
  33% {
    transform: translate(28px, -16px) translateZ(0);
  }

  66% {
    transform: translate(76px, -56px) translateZ(0);
  }
}

@keyframes circle-7 {
  33% {
    transform: translate(8px, 28px) translateZ(0);
  }

  66% {
    transform: translate(20px, -60px) translateZ(0);
  }
}

@keyframes circle-8 {
  33% {
    transform: translate(32px, -4px) translateZ(0);
  }

  66% {
    transform: translate(56px, -20px) translateZ(0);
  }
}

@keyframes circle-9 {
  33% {
    transform: translate(20px, -12px) translateZ(0);
  }

  66% {
    transform: translate(80px, -8px) translateZ(0);
  }
}

@keyframes circle-10 {
  33% {
    transform: translate(68px, 20px) translateZ(0);
  }

  66% {
    transform: translate(100px, 28px) translateZ(0);
  }
}

@keyframes circle-11 {
  33% {
    transform: translate(4px, 4px) translateZ(0);
  }

  66% {
    transform: translate(68px, 20px) translateZ(0);
  }
}

@keyframes circle-12 {
  33% {
    transform: translate(56px, 0px) translateZ(0);
  }

  66% {
    transform: translate(60px, -32px) translateZ(0);
  }
}

</style>


================================================
FILE: Buttons/VashonG_rotten-frog-52.html
================================================
<button class="neo-pop-tilted-button">
  <span>Play Now</span>
</button>

<style>
/* From Uiverse.io by VashonG  - Tags: flashy, button, game, 3d button, shimmer, cred, neopop */
.neo-pop-tilted-button {
  border: 0.1px;
  padding-bottom: 6px;
  box-shadow: 1px 5px 7px #494a4b;
  position: relative;
  overflow: hidden;
  background-color: #b7a81d;
  color: #000000;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transform: perspective(180px) rotateX(30deg) translateY(2px);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.neo-pop-tilted-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(196, 196, 196, 0.8) 5px,
    rgba(196, 196, 196, 0) 5px,
    rgba(196, 196, 196, 0) 10px,
    rgba(196, 196, 196, 0.8) 2px
  );
  animation: shimmer 5.5s infinite linear;
}

.neo-pop-tilted-button span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 5px,
    rgba(255, 255, 255, 0) 5px,
    rgba(255, 255, 255, 0) 10px,
    rgba(255, 255, 255, 1) 2px
  );
  animation: shimmer 5.5s infinite linear;
}

@keyframes shimmer {
  0% {
    transform: translateX(-1950%);
  }
  100% {
    transform: translateX(100%);
  }
}

.neo-pop-tilted-button span {
  background: #ffeb34;
  padding: 1rem 2.5rem;
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 0px;
  border: 1px solid #494a4b;
}

.neo-pop-tilted-button:focus {
  outline: none;
}

.neo-pop-tilted-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 235, 52, 0.5);
}

button:active {
  transform: perspective(170px) rotateX(36deg) translateY(5px);
}

</style>
    

================================================
FILE: Buttons/VashonG_tiny-snake-44.html
================================================
<a class="code-button code-button--html code-button--color" href="#">
  <b class="code-button__bracket">&lt;</b>
  <span class="code-button__code">/</span>
  <span class="code-button__text">html</span>
  <b class="code-button__bracket">&gt;</b>
</a>
<style>
/* From Uiverse.io by VashonG - Tags: flashy, animation, button */
.code-button {
  display: inline-block;
  font-family: "Menlo", "Bitstream Vera Sans Mono", "DejaVu Sans Mono", "Monaco", "Consolas", monospace;
  margin: 1em;
  border-radius: 3px;
  background: #434d5a;
  border: none;
  padding: 1em 0;
  color: white;
  text-align: center;
  text-decoration: none;
  width: 9em;
  transition: all 0.2s ease, background-color 0.2s ease-in 0.15s, box-shadow 0.2s ease-in 0.15s, color 0s ease;
}

.code-button__bracket, .code-button__text, .code-button__code {
  display: inline-block;
  margin-right: -3px;
  text-align: center;
  width: 0.5em;
  transition: all 0.2s ease, color 0s ease;
}

.code-button__bracket {
  font-weight: normal;
}

.code-button__text {
  opacity: 0;
  position: absolute;
  transition: all 0s ease;
}

.code-button:hover {
  padding: 1em 0;
  transition: all 0.2s ease, background-color 0.2s ease-in 0.05s, box-shadow 0.2s ease-in 0.05s, color 0s ease;
}

.code-button:hover .code-button__code, .code-button:hover .code-button__text {
  width: 2em;
}

.code-button:hover .code-button__code, .code-button:hover .code-button__text, .code-button:hover .code-button__bracket {
  transition: all 0.2s ease, color 0s ease;
}

.code-button:hover .code-button__code {
  opacity: 0;
  position: absolute;
}

.code-button:hover .code-button__text {
  opacity: 1;
  position: static;
}

.code-button--color:hover {
  color: #434d5a;
}

.code-button--color:hover.code-button--css {
  background-color: #aaffa9;
  box-shadow: inset 15px 5px 70px -10px #aaffa9, inset -15px -5px 70px -10px #11ffbd;
}

.code-button--color:hover.code-button--html {
  background-color: #fc8f71;
  box-shadow: inset 15px 15px 90px -20px #fc8f71, inset -15px -5px 80px -10px #fcdcab;
}

.code-button--color:hover.code-button--js {
  background-color: #87e1ed;
  box-shadow: inset 15px 15px 90px -20px #7996d1, inset -15px -5px 80px -10px #87e1ed;
}
 
</style>


================================================
FILE: Buttons/VassoD_hard-panther-41.html
================================================
<button class="button">Simple button</button>

<style>
/* From Uiverse.io by VassoD  - Tags: minimalist, button, dark, simple button */
.button {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 10px 20px;
  border-radius: 0.5rem;
  transition: background 0.3s ease-in-out;
}

.button:hover {
  background: rgba(255, 255, 255, 0.25);
  text-decoration: underline;
}

</style>
    

================================================
FILE: Buttons/VassoD_smooth-earwig-8.html
================================================
<!-- From Uiverse.io by VassoD  - Tags: animation, action, pink, gradient, button, hover, tailwind, tailwindbutton -->
<button
  class="relative overflow-hidden rounded-lg h-12 group hover:animate-pulse hover:shadow-lg hover:scale-105 transition duration-500 before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-pink-400 before:via-purple-400 before:to-indigo-400"
>
  <span class="relative text-white font-bold px-8 py-8"> Hover me </span>
</button>


    

================================================
FILE: Buttons/Voxybuns_lucky-fireant-71.html
================================================
<button>
  <span class="button_top"> Button
  </span>
</button>
<style>
/* From Uiverse.io by Voxybuns - Tags: button */
button {
  /* Variables */
  --button_radius: 0.75em;
  --button_color: #e8e8e8;
  --button_outline_color: #000000;
  font-size: 17px;
  font-weight: bold;
  border: none;
  border-radius: var(--button_radius);
  background: var(--button_outline_color);
}

.button_top {
  display: block;
  box-sizing: border-box;
  border: 2px solid var(--button_outline_color);
  border-radius: var(--button_radius);
  padding: 0.75em 1.5em;
  background: var(--button_color);
  color: var(--button_outline_color);
  transform: translateY(-0.2em);
  transition: transform 0.1s ease;
}

button:hover .button_top {
  /* Pull the button upwards when hovered */
  transform: translateY(-0.33em);
}

button:active .button_top {
  /* Push the button downwards when pressed */
  transform: translateY(0);
}
</style>


================================================
FILE: Buttons/Wasim-Rana_lazy-fish-83.html
================================================
<div class="btn-container">
  <button class="glowing-button">
    click me
    <span class="arrow">➔</span>
  </button>
</div>

<style>
/* From Uiverse.io by Wasim-Rana  - Tags: button */
.btn-container {
  padding: 3px;
  background: linear-gradient(180deg, #f3aefe, #8d35d3);
  border-radius: 19px;
  transform: perspective(850px) rotateX(14deg) rotateY(8deg) rotateZ(-11deg);
  color: white;
  box-shadow:
    -4px 4px 0px #5d2b82,
    -5px 7px 8px #4d1e7491,
    -10px 13px 18px #4d1e7450,
    -20px 20px 40px #4d1e74a8;
  position: relative;
  transition: all 0.4s ease;
}

.btn-container:hover {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  box-shadow:
    0px 4px 5px #5d2b82,
    0px 7px 8px #4d1e7491,
    0px 13px 18px #4d1e7450,
    0px 20px 40px #4d1e74a8;
}

.btn-container:active {
  box-shadow:
    0px 4px 5px #5c2b82c7,
    0px 7px 8px #4d1e745b,
    0px 5px 18px #4d1e7434,
    0px 10px 40px #4d1e746e;
}

.btn-container:active > .glowing-button {
  box-shadow: inset 0px 6px 10px #3114494b;
}

.glowing-button {
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 22px 24px;
  font-size: 1.6rem;
  font-weight: 600;
  border-radius: 16px;
  border: none;
  background: linear-gradient(180deg, #d28dff, #8533c6);
  box-shadow: inset 0px -6px 10px #3114494b;
  text-shadow: -1px 1px 3px #2a0f3fbb;
  transition: all 0.3s ease;
}

.glowing-button:hover {
  background: linear-gradient(180deg, #c17de6, #7328b8);
  box-shadow:
    inset 0px -10px 20px #3114498a,
    0px 8px 15px #5d2b82;
  transform: translateY(-2px);
}

.arrow {
  font-size: 24px;
  margin-left: 10px;
  display: inline-block;
  filter: drop-shadow(-2px 2px 1px #2a0f3f6c);
  transition:
    transform 0.3s ease,
    color 0.3s ease;
  animation: arrow-pulse 1.5s infinite alternate;
}

@keyframes arrow-pulse {
  0% {
    transform: translateX(0);
    color: white;
  }
  100% {
    transform: translateX(5px);
    color: #f3aefe;
  }
}

.glowing-button:hover .arrow {
  transform: translateX(15px);
  color: #e3a0ff;
}

</style>
    

================================================
FILE: Buttons/Web-Potato_mighty-chipmunk-64.html
================================================
<button>
    Button
</button>
<style>
/* From Uiverse.io by Web-Potato - Tags: button */
button {
  position: relative;
  height: 50px;
  width: 150px;
  color: #FFF;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  background-color: #212121;
  transition: all 0.5s;
  border: none;
}

button::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(29, 255, 86, 0.281);
  border-radius: 5px;
  transition: all 0.3s;
  z-index: 1;
}

button:hover::before {
  opacity: 0;
  transform: scale(0.7,0.7);
}

button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.4s;
  border: 1px solid rgba(29, 255, 86, 0.281);
  border-radius: 5px;
  transform: scale(1.5,1.5);
  opacity: 0;
  z-index: 1;
}

button:hover::after {
  opacity: 1;
  transform: scale(1,1);
}

</style>


================================================
FILE: Buttons/Web-Potato_silent-ape-24.html
================================================
<button>
    <span>
        Hover Me
    </span>
</button>
<style>
/* From Uiverse.io by Web-Potato - Tags: button */
button {
  padding: 0.1em 0.25em;
  width: 13em;
  height: 4.2em;
  background-color: #212121;
  border: 0.08em solid #fff;
  border-radius: 0.3em;
  font-size: 12px;
}

button span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0.4em;
  width: 8.25em;
  height: 2.5em;
  background-color: #212121;
  border-radius: 0.2em;
  font-size: 1.5em;
  color: #fff;
  border: 0.08em solid #fff;
  box-shadow: 0 0.4em 0.1em 0.019em #fff;
}

button span:hover {
  transition: all 0.5s;
  transform: translate(0, 0.4em);
  box-shadow: 0 0 0 0 #fff;
}

button span:not(hover) {
  transition: all 1s;
}


</style>


================================================
FILE: Buttons/Webdevava_purple-tiger-90.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by Webdevava - Tags: button */
button {
  background: #111;
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  color: #fff;
  font-size: 30px;
}

button:hover {
  border: 3px solid #fff;
  transform: rotate3d(0, 1, 0.5, 360deg);
  transition: 1.5s;
}
</style>


================================================
FILE: Buttons/Wendell47_gentle-cheetah-21.html
================================================
<button class="button">
Get in touch
<div class="hoverEffect">
<div>
</div>
</div></button>
<style>
/* From Uiverse.io by Wendell47 - Tags: button, blur filter */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border: 0;
  position: relative;
  overflow: hidden;
  border-radius: 10rem;
  transition: all 0.02s;
  font-weight: bold;
  color: rgb(37, 37, 37);
  z-index: 0;
  box-shadow: 0 0px 7px -5px rgba(0, 0, 0, 0.5);
}

.button:hover {
  background: rgb(193, 228, 248);
  color: rgb(33, 0, 85);
}

.button:active {
  transform: scale(0.97);
}

.hoverEffect {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.hoverEffect div {
  background: rgb(222,0,75);
  background: linear-gradient(90deg, rgba(222,0,75,1) 0%, rgba(191,70,255,1) 49%, rgba(0,212,255,1) 100%);
  border-radius: 40rem;
  width: 10rem;
  height: 10rem;
  transition: 0.4s;
  filter: blur(20px);
  animation: effect infinite 3s linear;
  opacity: 0.5;
}

.button:hover .hoverEffect div {
  width: 8rem;
  height: 8rem;
}

@keyframes effect {

  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: Buttons/WhiteNervosa_dull-cougar-87.html
================================================
<button>
    <span class="inner">Button</span>
</button>
<style>
/* From Uiverse.io by WhiteNervosa - Tags: button */
button {
  background-color: #2d7f2f;
  font-family: "Verdana", sans-serif;
  padding: 5px 10px;
  font-size: 18px;
  color: #ececec;
  cursor: pointer;
  width: fit-content;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  border-radius: 5px;
  touch-action: none;
  position: relative;
  border: none;
  transition-property: box-shadow;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0), inset 0px 0px 0px 0px rgba(230, 230, 230, 0);
}

button:focus,
button:hover {
  box-shadow: inset 0px -4px 0px 0px rgb(0 0 0 / 35%), inset 0px 2px 0px 0px rgb(230 230 230 / 7%);
}

button:active {
  box-shadow: inset 0px 2px 0px 1px rgb(0 0 0 / 29%), inset 0px -1px 0px 0px rgb(230 230 230 / 7%);
}

button .inner {
  user-select: none;
  pointer-events: none;
  transform: translateY(0px) scale(1) translate3d(0, 0, 0);
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}

button:active .inner {
  transform: translateY(1px) scale(0.98) translate3d(0, 0, 0);
}

</style>


================================================
FILE: Buttons/WhiteNervosa_popular-ladybug-27.html
================================================
<button>
    Hover Over
</button>
<style>
/* From Uiverse.io by WhiteNervosa - Tags: button */
button {
  font-size: 18px;
  color: #e1e1e1;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  border: none;
  background: none;
  text-transform: uppercase;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: color;
}

button:focus,
button:hover {
  color: #fff;
}

button:focus:after,
button:hover:after {
  width: 100%;
  left: 0%;
}

button:after {
  content: "";
  pointer-events: none;
  bottom: -2px;
  left: 50%;
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: #fff;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: width, left;
}
</style>


================================================
FILE: Buttons/Wlidha09_chilly-mole-32.html
================================================
<button class="btn-white" href="#">
  Discover
</button>
<style>
/* From Uiverse.io by Wlidha09 - Tags: button */
.btn-white {
  display: inline-flex;
  align-items: center;
  color: #fff;
  border: 1px solid #fff;
  min-height: 50px;
  padding: 0 20px;
  font-size: 17px;
  text-transform: uppercase;
  z-index: 1;
  position: relative;
  background-color: transparent;
}

.btn-white::before {
  content: "";
  background-color: #fff;
  display: block;
  width: 45px;
  height: 1px;
  margin-right: 20px;
}

.btn-white::after {
  content: "";
  background-color: #fff;
  display: block;
  width: 0%;
  height: 100%;
  right: 0;
  top: 0;
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.btn-white:hover {
  color: #232963;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.btn-white:hover::after {
  width: 100%;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.btn-white:hover::before {
  background-color: #232963;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
</style>


================================================
FILE: Buttons/Wlidha09_neat-bird-56.html
================================================
<div class="center">
  <button class="btn">
    <svg viewBox="0 0 150 50" height="50px" width="150px" class="svg">
      <polyline class="bg-line" points="149,1 149,49 1,49 1,1 149,1"></polyline>
      <polyline class="hl-line" points="149,1 149,49 1,49 1,1 149,1"></polyline>
    </svg>
    <span>HOVER ME</span>
  </button>
</div>

<style>
/* From Uiverse.io by Wlidha09  - Tags: button, hover, modern, animated */
.center {
  width: 150px;
  height: 50px;
  position: relative;
}

.btn {
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: transparent;
  border: 1px solid #91c9ff;
  outline: none;
  transition: 1s ease-in-out;
}

.svg {
  position: absolute;
  left: 0;
  top: 0;
  fill: none;
  stroke: #fff;
  stroke-dasharray: 150 480;
  stroke-dashoffset: 150;
  transition: 1s ease-in-out;
}

.btn:hover {
  transition: 1s ease-in-out;
  background: #4f95da;
}

.btn:hover .svg {
  stroke-dashoffset: -480;
}

.btn span {
  color: white;
  font-size: 17px;
  font-weight: 100;
}

</style>
    

================================================
FILE: Buttons/Wlidha09_slimy-newt-90.html
================================================
<button class="btn-slice" href="#">
  <div class="top"><span>Sliced Button</span></div>
  <div class="bottom"><span>Sliced Button</span></div>
</button>
<style>
/* From Uiverse.io by Wlidha09 - Tags: button */
.btn-slice {
  background-color: transparent;
  padding: 1.2rem 2.5rem;
  border: 2px solid #ffffff;
  border-radius: 0rem;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.3rem;
  position: relative;
  -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
  -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
  transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
 /* custom */
  -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
  -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
  transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
 /* custom */
}

.btn-slice .top {
  position: relative;
  height: 6px;
  overflow: hidden;
  top: 0;
  -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
  -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
  transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
 /* custom */
  -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
  -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
  transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
 /* custom */
  -webkit-transition-delay: 0.35s;
  -moz-transition-delay: 0.35s;
  -ms-transition-delay: 0.35s;
  -o-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

.btn-slice .bottom {
  position: relative;
  height: 6px;
  overflow: hidden;
  bottom: 0;
  -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
  -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
  transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
 /* custom */
  -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
  -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
  transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
 /* custom */
  -webkit-transition-delay: 0.35s;
  -moz-transition-delay: 0.35s;
  -ms-transition-delay: 0.35s;
  -o-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

.btn-slice .bottom span {
  top: -6px;
  position: absolute;
  left: 0;
}

.btn-slice:hover .top {
  top: -5px;
  -webkit-transition-delay: 0.35s;
  -moz-transition-delay: 0.35s;
  -ms-transition-delay: 0.35s;
  -o-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

.btn-slice:hover .bottom {
  bottom: -5px;
  -webkit-transition-delay: 0.35s;
  -moz-transition-delay: 0.35s;
  -ms-transition-delay: 0.35s;
  -o-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

.btn-slice:hover, .btn-slice:focus, .btn-slice:active {
  margin-left: 10px;
}

.btn-slice:before {
  content: '';
  height: 1px;
  width: 60px;
  background-color: #ffffff;
  position: absolute;
  margin-top: 6px;
  right: -35px;
  -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
  -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
  transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
 /* custom */
  -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
  -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
  transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
 /* custom */
}

.btn-slice:hover:before {
  width: 130%;
}
</style>


================================================
FILE: Buttons/Wlidha09_smooth-mouse-48.html
================================================
<div class="box">
  <div class="btn">
    <button href="#">HOVER ME</button>
  </div>
</div>
<style>
/* From Uiverse.io by Wlidha09 - Tags: button */
.box {
  height: 66.66%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  line-height: 50px;
  height: 50px;
  text-align: center;
  width: 150px;
  cursor: pointer;
  color: #FFF;
  transition: all 0.3s;
  position: relative;
}

.btn button {
  z-index: 2;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 17px;
  border: none;
  background-color: transparent;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.5s;
  border: 1px solid rgba(255,255,255,0.2);
  background-color: rgba(255,255,255,0.1);
}

.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.5s;
  border: 1px solid rgba(255,255,255,0.2);
  background-color: rgba(255,255,255,0.1);
}

.btn:hover::before {
  transform: rotate(-45deg);
  background-color: rgba(255,255,255,0);
}

.btn:hover::after {
  transform: rotate(45deg);
  background-color: rgba(255,255,255,0);
}
</style>


================================================
FILE: Buttons/YUGE0_dangerous-parrot-21.html
================================================
<!-- From Uiverse.io by YUGE0  - Tags: button -->
<button
  class="cursor-pointer p-2 px-5 text-white rounded-lg shadow-lg shadow-black bg-gradient-to-b from-[#c654ff] to-[#b319ff] hover:shadow-inner hover:shadow-black hover:bg-[#b319ff]"
>
  <div class="flex justify-around align-baseline">
    <h1 class="px-2 text-xl">Join Today</h1>
    <svg
      stroke-width="22.016"
      transform="rotate(0)"
      stroke="#ffffff"
      xml:space="preserve"
      viewBox="180 -220 100 800"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      id="Layer_1"
      version="1.1"
      width="25px"
      height="25px"
      fill="#ffffff"
    >
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-width="2.048"
        stroke="#CCCCCC"
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <g>
          <g>
            <path
              d="M388.418,240.915L153.752,6.248c-8.331-8.331-21.839-8.331-30.17,0c-8.331,8.331-8.331,21.839,0,30.17L343.163,256 L123.582,475.582c-8.331,8.331-8.331,21.839,0,30.17c8.331,8.331,21.839,8.331,30.17,0l234.667-234.667 C396.749,262.754,396.749,249.246,388.418,240.915z"
            ></path>
          </g>
        </g>
      </g>
    </svg>
  </div>
</button>


    

================================================
FILE: Buttons/YUGE0_gentle-stingray-37.html
================================================
<!-- From Uiverse.io by YUGE0  - Tags: button, tailwind, tailwindcss -->
<button class="cursor-pointer p-1 shadow-xl rounded-lg border border-gray-300">
  <div class="p-1 rounded-2xl shadow-inner flex items-end hover:bg-sky-100">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="3 1 25 28"
      height="22"
      width="28"
    >
      <path
        fill="#000000"
        d="M14.2199 21.63C13.0399 21.63 11.3699 20.8 10.0499 16.83L9.32988 14.67L7.16988 13.95C3.20988 12.63 2.37988 10.96 2.37988 9.78001C2.37988 8.61001 3.20988 6.93001 7.16988 5.60001L15.6599 2.77001C17.7799 2.06001 19.5499 2.27001 20.6399 3.35001C21.7299 4.43001 21.9399 6.21001 21.2299 8.33001L18.3999 16.82C17.0699 20.8 15.3999 21.63 14.2199 21.63ZM7.63988 7.03001C4.85988 7.96001 3.86988 9.06001 3.86988 9.78001C3.86988 10.5 4.85988 11.6 7.63988 12.52L10.1599 13.36C10.3799 13.43 10.5599 13.61 10.6299 13.83L11.4699 16.35C12.3899 19.13 13.4999 20.12 14.2199 20.12C14.9399 20.12 16.0399 19.13 16.9699 16.35L19.7999 7.86001C20.3099 6.32001 20.2199 5.06001 19.5699 4.41001C18.9199 3.76001 17.6599 3.68001 16.1299 4.19001L7.63988 7.03001Z"
      ></path>
      <path
        fill="#000000"
        d="M10.11 14.4C9.92005 14.4 9.73005 14.33 9.58005 14.18C9.29005 13.89 9.29005 13.41 9.58005 13.12L13.16 9.53C13.45 9.24 13.93 9.24 14.22 9.53C14.51 9.82 14.51 10.3 14.22 10.59L10.64 14.18C10.5 14.33 10.3 14.4 10.11 14.4Z"
      ></path>
    </svg>
    <p class="font-semibold text-xl">Send Message</p>
  </div>
</button>


    

================================================
FILE: Buttons/Yaseen549_curly-termite-88.html
================================================
<button class="button"> Button
</button>
<style>
/* From Uiverse.io by Yaseen549 - Tags: button */
.button {
 color: #ecf0f1;
 font-size: 17px;
 background-color: #212121;
 border: 1px solid #ffffff;
 border-radius: 5px;
 padding: 10px;
 box-shadow: 0px 6px 0px #787878;
 transition: all 50ms;
 width: 120px;
}

.button:active {
 box-shadow: 0px 2px 0px #787878;
 position: relative;
 top: 2px;
}
</style>


================================================
FILE: Buttons/Yaseen549_ordinary-turtle-25.html
================================================
<button class="button"> Button
</button>
<style>
/* From Uiverse.io by Yaseen549 - Tags: button */
.button {
  color: #8707ff;
  border: 2px solid #8707ff;
  border-radius: 10px;
  padding: 10px 25px;
  background: transparent;
}

.button:hover {
  box-shadow: 2px 2px 15px #8707ff inset;
}

.button:active {
  box-shadow: 2px 2px 20px #8707ff inset;
}

</style>


================================================
FILE: Buttons/Yashasewi_evil-dog-33.html
================================================
  <div class="item button-parrot" style="--bg-color: #2c3e50">
    <button>Click Me!
      <div class="parrot"></div>
      <div class="parrot"></div>
      <div class="parrot"></div>
      <div class="parrot"></div>
      <div class="parrot"></div>
      <div class="parrot"></div>
    </button>
  </div>
<style>
/* From Uiverse.io by Yashasewi - Tags: button */
button {
  background: transparent;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50px;
  padding: 0.8rem 2rem;
  font: 18px "Margarine", sans-serif;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: 0.2s ease-in-out;
  letter-spacing: 2px;
}

.name {
  width: 100%;
  text-align: center;
  padding: 0 0 3rem;
  padding-top: 4rem;
  font: 500 14px "Rubik", sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.button-parrot .parrot {
  position: absolute;
  width: 60px;
  text-align: center;
  animation: blink 0.8s infinite;
  color: transparent;
}

.button-parrot .parrot:before {
  content: "Click Me!";
}

.button-parrot .parrot:nth-child(1) {
  top: -30px;
  left: -40px;
  font: 12px/1 "Margarine", sans-serif;
  transform: rotate(-20deg);
  animation-duration: 0.5s;
}

.button-parrot .parrot:nth-child(2) {
  font: 12px/1 "Margarine", sans-serif;
  right: -40px;
  top: -20px;
  transform: rotate(15deg);
  animation-duration: 0.3s;
}

.button-parrot .parrot:nth-child(3) {
  font: 16px/1 "Margarine", sans-serif;
  top: -60px;
  left: 15px;
  transform: rotate(10deg);
  animation-duration: 1s;
}

.button-parrot .parrot:nth-child(4) {
  font: 18px/1 "Margarine", sans-serif;
  top: -70px;
  left: 95px;
  transform: rotate(2deg);
  animation-duration: 0.7s;
}

.button-parrot .parrot:nth-child(5) {
  font: 14px/1 "Margarine", sans-serif;
  top: 80px;
  left: 105px;
  transform: rotate(-20deg);
  animation-duration: 0.8s;
}

.button-parrot .parrot:nth-child(6) {
  font: 12px/1 "Margarine", sans-serif;
  top: 80px;
  left: 5px;
  transform: rotate(10deg);
  animation-duration: 1.2s;
}

.button-parrot button:hover .parrot:before {
  content: "Do it!";
  width: 70px;
}

@keyframes blink {
  25%, 75% {
    color: transparent;
  }

  40%, 60% {
    color: #fff;
  }
}
</style>


================================================
FILE: Buttons/Yashwanthnaini_dry-panther-24.html
================================================
<button>
  <span> HOVER
  </span>
</button>
<style>
/* From Uiverse.io by Yashwanthnaini - Tags: button */
button {
 border: none;
 border-radius: 20px;
 background: linear-gradient(32deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
 transition: all 1.5s ease;
 font-family: 'Ropa Sans', sans-serif;
 font-weight: bold;
 letter-spacing: 0.05rem;
 padding: 0;
}

button span {
 display: inline-block;
 padding: 15px 35px;
 font-size: 17px;
 border-radius: 20px;
 background: #ffffff10;
 backdrop-filter: blur(20px);
 transition: 0.4s ease-in-out;
 transition-property: color;
 height: 100%;
 width: 100%;
}

button span:hover {
 backdrop-filter: blur(0px);
 color: #ffffff;
}
</style>


================================================
FILE: Buttons/Yatsu68_ancient-ladybug-46.html
================================================
<button>
    <svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 512 512" xml:space="preserve" fill="#c673d9" transform="rotate(-35)">
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
        <g id="SVGRepo_iconCarrier">
          
          <g>
            <polygon class="st0" points="154.219,205.188 166.219,335.031 110.922,405.563 96.406,296.563"></polygon>
            <polygon class="st0" points="357.781,205.188 345.766,335.031 401.063,405.563 415.594,296.563"></polygon>
            <path class="st0" d="M323.813,62.219C305.125,23.328,275.656,0,256,0s-49.125,23.344-67.813,62.219H323.813z"></path>
            <path class="st0" d="M331.328,80.469H180.672c-6.641,19.156-10.594,41.094-10.047,65.188 c1.609,69.063,18.047,190.984,18.047,190.984l122.641-0.016l12,0.016c0,0,16.453-121.938,18.031-190.984 C341.922,121.563,337.969,99.609,331.328,80.469z M256,231.031c-23.578,0-42.688-19.094-42.688-42.672s19.125-42.672,42.688-42.672 s42.672,19.094,42.656,42.672C298.672,211.938,279.563,231.031,256,231.031z"></path>
            <path class="st0" d="M429.516,512c-6.109-17.594-22.859-30.219-42.531-30.219c-6.297,0-12.297,1.281-17.766,3.625 c-1.875-20.578-19.188-36.688-40.25-36.688c-3.047,0-6,0.328-8.844,0.969c0.031-0.563,0.031-1.125,0.031-1.688 c0-15.531-12.594-28.125-28.125-28.125c-4.031,0-7.875,0.844-11.344,2.375c-9.734-17.219-12.563-62.156-12.563-62.156h-25.5 c0,0-3.266,49.344-14.813,65.688c-2.688-1.094-5.656-1.688-8.75-1.688c-13.016,0-23.563,10.547-23.563,23.563 c0,0.984,0.063,1.953,0.188,2.906c-3.719-1.203-3.281-1.844-7.406-1.844c-16.484,0-30.531,10.406-35.938,25 c-6.047-2.516-12.672-3.906-19.625-3.906c-25.156,0-46.063,18.219-50.234,42.188H429.516z"></path>
          </g>
        </g>
    </svg>
    <span>aim for the stars!</span>
</button>
<style>
/* From Uiverse.io by Yatsu68 - Tags: button */
button {
  all: unset;
  background-color: #1b2164;
  color: #fff;
  border-radius: 8px;
  padding: 1rem;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

button span {
  letter-spacing: 1.2px;
  padding-left: 0.8rem;
  padding-right: 0.6rem;
  font-weight: 600;
}

button:hover {
  background: linear-gradient(-45deg, #1b2164, #6a33a8, #1b2164, #2ba6f5);
  background-size: 400% 400%;
  -webkit-transform: scale(1.01);
  -ms-transform: scale(1.01);
  transform: scale(1.01);
  -webkit-animation: scaling-and-gradient 10s ease infinite;
  animation: scaling-and-gradient 10s ease infinite;
}

button svg {
  text-shadow: 0px 7px rgba(81,67,21,0.8), 
	  -3px 0px 7px rgba(81,67,21,0.8), 
	  0px 4px 7px rgba(81,67,21,0.8);
  -webkit-animation: slide-in 1.6s ease-out both;
  animation: slide-in 1.6s ease-out both;
}

button:active svg {
  -webkit-animation: slide-out 0.4s ease-in forwards;
  animation: slide-out 0.4s ease-in forwards;
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateY(0) translateX(0) rotate(-35);
    transform: translateY(0) translateX(0) rotate(-35);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(-300px) translateX(-300px);
    transform: translateY(-300px) translateX(-300px);
    opacity: 0;
  }
}

@keyframes slide-out {
  0% {
    -webkit-transform: translateY(0) translateX(0) rotate(-35);
    transform: translateY(0) translateX(0) rotate(-35);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(-300px) translateX(-300px);
    transform: translateY(-300px) translateX(-300px);
    opacity: 0;
  }
}

@-webkit-keyframes slide-in {
  0% {
    -webkit-transform: translateY(300px) translateX(300px);
    transform: translateY(300px) translateX(300px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0) translateX(0) rotate(-35);
    transform: translateY(0) translateX(0) rotate(-35);
    opacity: 1;
  }
}

@keyframes slide-in {
  0% {
    -webkit-transform: translateY(300px) translateX(300px);
    transform: translateY(300px) translateX(300px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0) translateX(0) rotate(-35);
    transform: translateY(0) translateX(0) rotate(-35);
    opacity: 1;
  }
}

@-webkit-keyframes scaling-and-gradient {
  0% {
    background-position: 0% 50%;
    scale: 1;
  }

  25% {
    scale: 1.04;
  }

  50% {
    background-position: 100% 50%;
    scale: 1.06;
  }

  50% {
    scale: 1.04;
  }

  100% {
    background-position: 0% 50%;
    scale: 1;
  }
}

@keyframes scaling-and-gradient {
  0% {
    background-position: 0% 50%;
    scale: 1;
  }

  25% {
    scale: 1.04;
  }

  50% {
    background-position: 100% 50%;
    scale: 1.06;
  }

  50% {
    scale: 1.04;
  }

  100% {
    background-position: 0% 50%;
    scale: 1;
  }
}
</style>


================================================
FILE: Buttons/Yaya12085_blue-shrimp-51.html
================================================
<button class="btn">
  <svg>
    <defs>
        <linearGradient id="gradiant">
            <stop stop-color="#FF8282" offset="0%"></stop>
            <stop stop-color="#E178ED" offset="100%"></stop>
        </linearGradient>
    </defs>
     <rect height="50" width="150" stroke="url(#gradiant)" fill="none"></rect>
  </svg>
    <span>Button</span>
</button>
<style>
/* From Uiverse.io by Yaya12085 - Tags: button */
.btn {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 50px;
  text-align: center;
  text-transform: uppercase;
  background-color: transparent;
  cursor: pointer;
  font-weight: 900;
  font-size: 17px;
  border: none;
  outline: none;
}

.btn svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.btn svg rect {
  stroke-width: 3;
  stroke-dasharray: 0,0;
  stroke-dashoffset: 0;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}

.btn span {
  background: rgba(255,130,130,1);
  background: linear-gradient(to right,  rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn:hover svg rect {
  stroke-width: 4;
  stroke-dasharray: 196, 543;
  stroke-dashoffset: 437;
}

</style>


================================================
FILE: Buttons/Yaya12085_fast-goose-7.html
================================================
<!-- From Uiverse.io by Yaya12085 - Tags: button, dark, box-shadow, tailwind, tailwindbutton -->
<button class="px-6 py-2 font-semibold text-white bg-green-500 border-b-4 border-green-800 rounded shadow-lg shadow-green-600/50 hover:border-b-2 active:border-b-2">Button</button>




================================================
FILE: Buttons/Yaya12085_happy-emu-100.html
================================================

<button class="space-button">
  <div class="planet"></div>
  <div class="flex">
  <svg class="moon" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" preserveAspectRatio="xMidYMid meet" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle fill="#66757F" cx="18" cy="18" r="18"> </circle> <g fill="#5B6876"> <circle cx="10.5" cy="8.5" r="3.5"> </circle> <circle cx="20" cy="16" r="3"> </circle> <circle cx="21.5" cy="27.5" r="3.5"> </circle> <circle cx="21" cy="6" r="2"> </circle> <circle cx="3" cy="18" r="1"> </circle> <circle cx="30" cy="9" r="1"> </circle> <circle cx="15" cy="31" r="1"> </circle> <circle cx="32" cy="19" r="2"> </circle> <circle cx="10" cy="23" r="2"> </circle> </g> </g></svg>
  <span class="title">Launch</span>
  </div>
  <svg class="rocket" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 369.998 369.997" xml:space="preserve" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <g> <path d="M369.993,6.919c0.022-1.846-0.692-3.622-1.998-4.927c-1.303-1.302-3.083-2.023-4.924-1.991 c-3.591,0.057-88.576,2.038-143.287,56.748l-69.377,69.377c-16.128-5.68-71.071-16.34-148.411,60.994 c-2.354,2.356-2.656,6.065-0.72,8.777c0.221,0.31,0.461,0.594,0.728,0.859c2.026,2.025,5.166,2.593,7.816,1.291 c0.524-0.259,49.841-24.086,76.021-7.355l-17.168,17.167c-0.417,0.417-0.776,0.887-1.074,1.394 c-0.723,1.257-17.33,31.098,22.357,70.779c39.684,39.685,69.528,23.085,70.774,22.356c0.516-0.297,0.977-0.658,1.396-1.075 l17.168-17.167c16.732,26.181-7.093,75.494-7.349,76.023c-1.304,2.65-0.743,5.784,1.288,7.817 c0.046,0.042,0.082,0.077,0.125,0.118c2.666,2.557,6.902,2.522,9.523-0.103c0.132-0.128,0.25-0.263,0.371-0.397 c76.917-77.14,66.282-131.926,60.607-148.026l69.378-69.377C367.946,95.494,369.932,10.512,369.993,6.919z M281.903,142.187 c-14.941,14.938-39.155,14.937-54.089,0.001c-14.934-14.933-14.935-39.148,0.003-54.087c14.933-14.934,39.15-14.934,54.086,0 C296.835,103.036,296.835,127.253,281.903,142.187z"></path> <path d="M89.388,320.865c-13.427,2.338-27.286,3.275-40.898,3.05c-1.157-0.021-2.344-1.417-2.341-2.36 c-0.002-2.062,0.049-5.066,0.101-7.127c0.076-3.013,0.204-6.021,0.364-9.033c0.378-6.827,0.937-13.676,1.943-20.44 c1.753-11.837,4.423-23.442,8.838-34.591c0.604-1.519,1.277-3.005,1.827-4.55c-12.384,5.298-22.051,15.85-28.861,27.224 c-6.624,11.057-10.913,23.427-13.293,36.067c-1.408,7.462-2.138,15.042-2.244,22.631c-0.049,4.196-0.316,9.271,1.142,13.295 c2.066,5.717,7.382,9.51,13.398,9.925c5.402,0.369,10.822,0.298,16.233-0.06c24.582-1.622,50.85-10.177,68.109-28.474 c4.245-4.746,7.948-9.744,10.52-15.605c-6.14,2.262-12.1,4.765-18.438,6.474C100.367,318.75,94.917,319.903,89.388,320.865z"></path> </g> </g> </g> </g></svg>
</button>

<style>
/* From Uiverse.io by Yaya12085 - Tags: button */
.space-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 200px;
  height: 60px;
  background-color: #293944;
  background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 87% at 26% 20%, rgba(255, 255, 255, 0.41) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  perspective: 1000px;
  transform: translateY(-3px);
  overflow: hidden;
  padding: 0 20px;
  box-shadow: 2px 19px 31px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-out;
}

.title {
  color: wheat;
  font-weight: bold;
  margin-right: 10px;
  font-size: 20px;
}

.planet {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 10px;
  left: 10px;
  background-color: rgb(224, 236, 224);
  border-radius: 50%;
  perspective: 1000px;
  transform-style: preserve-3d;
  box-shadow: inset rgb(211, 203, 177) -20px -20px 70px;
}

.planet::before {
  position: absolute;
  content: "";
  width: 25px;
  height: 25px;
  border: solid 6px rgb(187, 173, 173);
  border-radius: 50%;
  top: -30%;
  left: -30%;
  transform: rotate3d(0.8, 0.2, 0, 75deg);
  box-sizing: border-box;
}

.space-button:after {
  content: "";
  position: absolute;
  bottom: -50%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #688ACC;
  transform-origin: bottom center;
  transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
  transform: skewY(10deg) scaleY(0);
  z-index: 2;
}

.space-button:hover:after {
  transform-origin: bottom center;
  transform: skewY(9.3deg) scaleY(2);
}

.space-button:active {
  transform: translateY(0);
  box-shadow: 2px 19px 31px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(30, 255, 0, 0.171);
}

.space-button .rocket {
  display: block;
  position: absolute;
  opacity: 0;
  bottom: 10%;
  border: 0;
  height: 40%;
  transform: translateY(225%) translateX(-50%);
  transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
  z-index: 3;
}

.flex {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  height: 100%;
  width: 100%;
}

.space-button:hover .rocket {
  fill: white;
  animation: shake_3019 .1s infinite;
  transform: translateX(-50%) translateY(-100%);
  opacity: 1;
  transition: all .9s cubic-bezier(0.48, 0, 0.12, 1);
}

.space-button:focus .rocket {
  animation: push_3019 5s ease-in infinite;
}

@keyframes push_3019 {
  0% {
    transform: rotate(-45deg) translateY(0px);
  }

  33% {
    transform: translateY(-500px);
  }

  65% {
    transform: rotate(180deg);
  }

  66% {
    transform: rotate(-45deg) translateY(0px);
  }

  100% {
    transform: rotate(-45deg);
  }
}

@keyframes shake_3019 {
  0% {
    transform: rotate(-45deg) translateX(-1px) translateY(1px);
  }

  100% {
    transform: rotate(-45deg) translateX(1px) translateY(-1px);
  }
}




</style>


================================================
FILE: Buttons/Yaya12085_horrible-pug-35.html
================================================
<button>
  Sign in with Twitter
  <span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path fill="#fff" d="M16 3.539a6.839 6.839 0 0 1-1.89.518 3.262 3.262 0 0 0 1.443-1.813 6.555 6.555 0 0 1-2.08.794 3.28 3.28 0 0 0-5.674 2.243c0 .26.022.51.076.748a9.284 9.284 0 0 1-6.761-3.431 3.285 3.285 0 0 0 1.008 4.384A3.24 3.24 0 0 1 .64 6.578v.036a3.295 3.295 0 0 0 2.628 3.223 3.274 3.274 0 0 1-.86.108 2.9 2.9 0 0 1-.621-.056 3.311 3.311 0 0 0 3.065 2.285 6.59 6.59 0 0 1-4.067 1.399c-.269 0-.527-.012-.785-.045A9.234 9.234 0 0 0 5.032 15c6.036 0 9.336-5 9.336-9.334 0-.145-.005-.285-.012-.424A6.544 6.544 0 0 0 16 3.539z"></path>
</svg>
  </span>
</button>
<style>
/* From Uiverse.io by Yaya12085 - Tags: icon, twitter, button, connect */
button {
  max-width: 320px;
  display: flex;
  overflow: hidden;
  position: relative;
  padding: 0.875rem 72px 0.875rem 1.75rem;
  background-color: #039be5;
  background-image: linear-gradient(to top right, #039be5,#29b6f6);
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  align-items: center;
  border-radius: 0.5rem;
  gap: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: none;
  transition: all .6s  ease;
}

button span {
  background-color: rgb(3 155 229);
  display: grid;
  position: absolute;
  right: 0;
  place-items: center;
  width: 3rem;
  height: 100%;
}

button span svg {
  width: 1.5rem;
  height: 1.5rem;
}

button:hover {
  box-shadow: 0 4px 30px  rgba(4, 175, 255, .1), 0 2px 30px rgba(11, 158, 255, 0.06);
}
</style>


================================================
FILE: Buttons/Yaya12085_perfect-newt-3.html
================================================
<button class="button">
  <span class="icon">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      id="paper-plane"
    >
      <path
        d="M20.34,9.32l-14-7a3,3,0,0,0-4.08,3.9l2.4,5.37h0a1.06,1.06,0,0,1,0,.82l-2.4,5.37A3,3,0,0,0,5,22a3.14,3.14,0,0,0,1.35-.32l14-7a3,3,0,0,0,0-5.36Zm-.89,3.57-14,7a1,1,0,0,1-1.35-1.3l2.39-5.37A2,2,0,0,0,6.57,13h6.89a1,1,0,0,0,0-2H6.57a2,2,0,0,0-.08-.22L4.1,5.41a1,1,0,0,1,1.35-1.3l14,7a1,1,0,0,1,0,1.78Z"
      ></path>
    </svg>
  </span>
  <span class="title">Send Message</span>
</button>

<style>
/* From Uiverse.io by Yaya12085  - Tags: button, challenge, hover effect, ui */
.button {
  --radius: 20px;
  --white: #ffffff;
  --white50: #ffffff80;
  --white35: #ffffff59;
  --second_white: #f8f8f8;
  --second_white75: #f8f8f8bf;
  --third_white: #fafbfb;
  --gray: #cacaca;
  --gray50: #cacaca80;
  --black: #1c1c1c;
  --black15: #1c1c1c26;
  --black13: #1c1c1c21;
  --black10: #1c1c1c1a;
  --black5: #1c1c1c0d;
  --black35: #1c1c1c59;
  --black75: #1c1c1cbf;
  --black50: #1c1c1c80;
  position: relative;
  width: 250px;
  height: 80px;
  border-radius: var(--radius);
  background-color: var(--white);
  background: linear-gradient(var(--white) 100%, var(--gray) 50%);
  cursor: pointer;
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s;
}
.icon {
  position: relative;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
  transition: all 0.3s;
}
.icon #paper-plane {
  height: 24px;
  width: 24px;
  fill: var(--black);
  filter: drop-shadow(0 1px 1px var(--black35));
}

.title {
  filter: drop-shadow(0 1px 1px var(--black35));
  font-size: 20px;
  color: var(--black);
  font-weight: 600;
  transition: all 0.3s;
}

.button::after,
.button::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s;
}
.button::before {
  background-color: var(--white);
  box-shadow: inset 10px 10px 15px var(--gray50),
    inset -10px -10px 15px var(--white), 0 0 0 2px var(--white);
  width: 90%;
  height: 80%;
  border-radius: calc(var(--radius) * 10);
}
.button::after {
  filter: drop-shadow(0 2px 4px var(--black15)),
    drop-shadow(0 30px 100px var(--black13)),
    drop-shadow(0 15px 30px var(--black10)),
    drop-shadow(0 16px 12px var(--black5));
  box-shadow: 0 0 0 1px var(--white);
  background-color: var(--black);
  background: linear-gradient(0deg, var(--black50), var(--gray));
  width: 102%;
  height: 108%;
  border-radius: calc(var(--radius) + 2px);
  z-index: -1;
  transition: all 0.1s;
}

.button:hover::after {
  width: 101%;
  height: 104%;
  filter: none;
}
.button:active::after {
  width: 100%;
  height: 100%;
  filter: none;
}
.button:hover .icon {
  transform: rotate(0) translateX(50%);
  left: calc(50% + 24px);
}
.button:hover .title {
  transform: translateX(-24px);
}

</style>
    

================================================
FILE: Buttons/Yaya12085_plastic-quail-42.html
================================================
<button class="button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24">
        <path d="m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z"></path>
    </svg>
    Unlock Pro
</button>
<style>
/* From Uiverse.io by Yaya12085 - Source: https://uiverse.io/satyamchaudharydev/great-seahorse-44 - Tags: button, design, hover button */
.button {
  width: fit-content;
  display: flex;
  padding: 1.2em 1rem;
  cursor: pointer;
  gap: 0.4rem;
  font-weight: bold;
  border-radius: 30px;
  text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
  background: linear-gradient(15deg, #880088, #aa2068, #cc3f47, #de6f3d, #f09f33, #de6f3d, #cc3f47, #aa2068, #880088) no-repeat;
  background-size: 300%;
  color: #fff;
  border: none;
  background-position: left center;
  box-shadow: 0 30px 10px -20px rgba(0,0,0,.2);
  transition: background .3s ease;
}

.button:hover {
  background-size: 320%;
  background-position: right center;
}

.button:hover svg {
  fill: #fff;
}

.button svg {
  width: 23px;
  fill: #f09f33;
  transition: .3s ease;
}
</style>


================================================
FILE: Buttons/Yaya12085_quick-husky-74.html
================================================
<button class="button">
  <svg stroke="#ffffff" xml:space="preserve" viewBox="0 0 80 80" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1" fill="#ffffff"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M64,48L64,48h-8V32h8c8.836,0,16-7.164,16-16S72.836,0,64,0c-8.837,0-16,7.164-16,16v8H32v-8c0-8.836-7.164-16-16-16 S0,7.164,0,16s7.164,16,16,16h8v16h-8l0,0l0,0C7.164,48,0,55.164,0,64s7.164,16,16,16c8.837,0,16-7.164,16-16l0,0v-8h16v7.98 c0,0.008-0.001,0.014-0.001,0.02c0,8.836,7.164,16,16,16s16-7.164,16-16S72.836,48.002,64,48z M64,8c4.418,0,8,3.582,8,8 s-3.582,8-8,8h-8v-8C56,11.582,59.582,8,64,8z M8,16c0-4.418,3.582-8,8-8s8,3.582,8,8v8h-8C11.582,24,8,20.417,8,16z M16,72 c-4.418,0-8-3.582-8-8s3.582-8,8-8l0,0h8v8C24,68.418,20.418,72,16,72z M32,48V32h16v16H32z M64,72c-4.418,0-8-3.582-8-8l0,0v-8 h7.999c4.418,0,8,3.582,8,8S68.418,72,64,72z"></path> </g> </g></svg>
  command
</button>
<style>
/* From Uiverse.io by Yaya12085 - Source: https://uiverse.io/dylanharriscameron/good-dingo-46 - Tags: 3d, button, dark, key , keyboard */
.button {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  background-color: #000;
  color: #fff;
  font-size: 13px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 8px;
  height: 65px;
  padding: 12px;
  border-radius: 15px 15px 12px 12px;
  cursor: pointer;
  position: relative;
  will-change: transform;
  transition: all .1s ease-in-out 0s;
  user-select: none;
  /* Add gradient shading to each side */
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  background-position: bottom right, bottom right;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4),
    inset -4px -8px 0px rgba(0, 0, 0, 0.3),
    0px 2px 1px rgba(0, 0, 0, 0.3),
    0px 2px 1px rgba(255, 255, 255, 0.1);
  transform: perspective(70px) rotateX(5deg) rotateY(0deg);
}

.button::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.5));
  z-index: -1;
  border-radius: 15px;
  box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1),
    inset 4px -8px 0px rgba(0, 0, 0, 0.3);
  transition: all .1s ease-in-out 0s;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  background-position: bottom right, bottom right;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
  border-radius: 15px;
  transition: all .1s ease-in-out 0s;
}

.button:active {
  will-change: transform;
  transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(0.96);
  height: 64px;
  border: 0.25px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2),
    inset -4px -6px 0px rgba(0, 0, 0, 0.8),
    0px 1px 0px rgba(0, 0, 0, 0.9),
    0px 1px 0px rgba(255, 255, 255, 0.2);
  transition: all .1s ease-in-out 0s;
}

.button::after:active {
  background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2));
}

.button:active::before {
  content: "";
  display: block;
  position: absolute;
  top: 5%;
  left: 20%;
  width: 50%;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.1);
  animation: overlay 0.1s ease-in-out 0s;
  pointer-events: none;
}

.button svg {
  width: 15px;
  height: 15px;
}

@keyframes overlay {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.button:focus {
  outline: none;
}
</style>


================================================
FILE: Buttons/Yaya12085_serious-snake-25.html
================================================
<button class="button">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    class="icon"
  >
    <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
    <g
      stroke-linejoin="round"
      stroke-linecap="round"
      id="SVGRepo_tracerCarrier"
    ></g>
    <g id="SVGRepo_iconCarrier">
      <path
        fill="#222222"
        d="M11.5 13.8H10.1299C8.72143 13.8 8.01721 13.8 7.72228 13.3385C7.42735 12.8769 7.72321 12.2379 8.31493 10.9597L11.0463 5.06006C11.4205 4.25182 11.6075 3.8477 11.8038 3.89091C12 3.93413 12 4.37946 12 5.27013V9.7C12 9.9357 12 10.0536 12.0732 10.1268C12.1464 10.2 12.2643 10.2 12.5 10.2H13.8701C15.2786 10.2 15.9828 10.2 16.2777 10.6615C16.5726 11.1231 16.2768 11.7621 15.6851 13.0402L12.9537 18.9399C12.5795 19.7482 12.3925 20.1523 12.1962 20.1091C12 20.0659 12 19.6205 12 18.7299V14.3C12 14.0643 12 13.9464 11.9268 13.8732C11.8536 13.8 11.7357 13.8 11.5 13.8Z"
      ></path>
    </g>
  </svg>
  <span class="title">Join now</span>
  <span class="border"></span>
</button>

<style>
/* From Uiverse.io by Yaya12085  - Tags: glassmorphism, button, hover, hover effect, challenges */
.button {
  --color1: #e3a4fb;
  --color2: #fca7a6;
  --color3: #fe986d;
  --white: rgba(255, 255, 255, 0.9);
  --white2: rgba(255, 255, 255, 0.6);
  --white3: rgba(255, 255, 255, 0.4);
  --white4: rgba(255, 255, 255, 0.2);
  --white5: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  padding: 10px 20px;
  height: 40px;
  width: 150px;
  border-radius: 10px;
  outline: none;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: none;
  background: transparent;
  background-color: transparent;
  transition: all 235ms ease-in-out;
}

.button::before,
.button::after {
  position: absolute;
  content: "";
  width: 120%;
  height: 150%;
  border-radius: 16px;
  background-color: var(--color1);
  background: linear-gradient(
    55deg,
    var(--color1) 10%,
    var(--color2) 40%,
    var(--color3) 60%,
    var(--color1) 80%
  );
  transition: all 235ms ease-in-out;
}

.button::before {
  filter: blur(2px);
  z-index: -1;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: radial-gradient(
      circle at 20% 50%,
      var(--white2) 8%,
      transparent 0%
    ),
    radial-gradient(circle at 25% 50%, var(--white2) 8%, transparent 0%),
    radial-gradient(ellipse at 5% 90%, var(--white4) 8%, transparent 0%),
    radial-gradient(ellipse at 5% 50%, var(--white4) 8%, transparent 0%),
    radial-gradient(circle at 15% 80%, var(--white3) 3%, transparent 0%),
    radial-gradient(ellipse at 15% 10%, var(--white2) 14%, transparent 0%),
    radial-gradient(ellipse at 15% 25%, var(--white3) 10%, transparent 0%),
    radial-gradient(circle at 50% 50%, var(--white4) 12%, transparent 0%),
    radial-gradient(circle at 45% 25%, var(--white4) 12%, transparent 0%),
    radial-gradient(circle at 50% 75%, var(--white4) 12%, transparent 0%),
    radial-gradient(circle at 70% 50%, var(--white4) 12%, transparent 0%),
    radial-gradient(circle at 75% 25%, var(--white4) 12%, transparent 0%),
    radial-gradient(circle at 70% 50%, var(--white2) 8%, transparent 0%),
    radial-gradient(circle at 70% 75%, var(--white4) 12%, transparent 0%),
    radial-gradient(circle at 80% 50%, var(--white4) 12%, transparent 0%),
    radial-gradient(circle at 85% 25%, var(--white4) 12%, transparent 0%),
    radial-gradient(circle at 98% 5%, var(--white2) 4%, transparent 0%),
    radial-gradient(circle at 88% 25%, var(--white2) 8%, transparent 0%),
    radial-gradient(ellipse at 90% 75%, var(--white2) 6%, transparent 0%),
    radial-gradient(circle at 98% 55%, var(--white2) 8%, transparent 0%),
    radial-gradient(circle at 98% 95%, var(--white2) 8%, transparent 0%);
  background-repeat: no-repeat;
}
.button::after {
  z-index: -2;
  box-shadow: rgba(0, 0, 0, 0.2) 15px 28px 25px -18px;
}
.icon {
  height: 30px;
  width: 30px;
}
.title {
  display: block;
  font-weight: 600;
}

.border {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: 100%;
  width: 100%;
  background: transparent;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  transition: all 235ms ease-in-out;
}
.border::before,
.border::after {
  position: absolute;
  content: "";
  border-radius: 16px;
  width: 120%;
  height: 150%;
}
.border::before {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  border: 2px solid transparent;
  background: linear-gradient(
      50deg,
      rgba(0, 0, 0, 0.1) 1%,
      var(--color1) 10%,
      var(--color2) 40%,
      var(--color3) 60%,
      var(--color1) 80%,
      rgba(0, 0, 0, 0.1) 100%
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.button:hover::after {
  box-shadow: rgba(0, 0, 0, 0.2) 15px 28px 25px -24px;
}
.button:hover {
  transform: translate3d(0, 2px, 0);
}

</style>
    

================================================
FILE: Buttons/Yaya12085_sharp-quail-80.html
================================================
<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 262">
  <path fill="#4285F4" d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"></path>
  <path fill="#34A853" d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"></path>
  <path fill="#FBBC05" d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"></path>
  <path fill="#EB4335" d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"></path>
</svg>
  Continue with Google
</button>
<style>
/* From Uiverse.io by Yaya12085 - Tags: button, input, connect, google */
button {
  max-width: 320px;
  display: flex;
  padding: 0.5rem 1.4rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  align-items: center;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.25);
  gap: 0.75rem;
  color: rgb(65, 63, 63);
  background-color: #fff;
  cursor: pointer;
  transition: all .6s ease;
}

.button svg {
  height: 24px;
}

button:hover {
  transform: scale(1.02);
}
</style>


================================================
FILE: Buttons/Yaya12085_short-dodo-73.html
================================================
<button>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path>
  </svg>
  Add Bookmark
</button>
<style>
/* From Uiverse.io by Yaya12085 - Tags: button */
button {
  border: none;
  display: flex;
  padding: 0.75rem 1.5rem;
  background-color: #488aec;
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  align-items: center;
  border-radius: 0.5rem;
  user-select: none;
  gap: 0.75rem;
  box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;
  transition: all .6s ease;
}

button:hover {
  box-shadow: 0 10px 15px -3px #488aec4f, 0 4px 6px -2px #488aec17;
}

button:focus,button:active {
  opacity: .85;
  box-shadow: none;
}

button svg {
  width: 1.25rem;
  height: 1.25rem;
}
</style>


================================================
FILE: Buttons/Yaya12085_strong-earwig-8.html
================================================
<button class="download">
  Download
  <span class="tooltip">10Mo</span>
</button>

<style>
/* From Uiverse.io by Yaya12085 - Tags: button */
.download {
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;
  color: #039be5;
  background-color: #fff;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
  border-radius: 4px;
  box-shadow: 0px 20px 30px -15px rgba(0, 0, 0, 0.226);
  cursor: pointer;
}

.download::before, .download::after {
  box-sizing: inherit;
  border-radius: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.download {
  transition: color 0.25s;
}

.download::before, .download::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}

.download::before {
  top: 0;
  left: 0;
}

.download::after {
  bottom: 0;
  right: 0;
}

.download:focus {
  color: #039be5;
}

.download:focus::before, .download:focus::after {
  width: 100%;
  height: 100%;
}

.download:focus::before {
  border-top-color: #039be5;
  border-right-color: #039be5;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}

.download:focus::after {
  border-bottom-color: #039be5;
  border-left-color: #039be5;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

.download .tooltip {
  visibility: hidden;
  width: 120px;
  background-color: #039be5;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 120%;
  left: 50%;
  margin-left: -60px;
}

.download .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #039be5 transparent transparent transparent;
}

.download:hover:not(:focus) .tooltip {
  visibility: visible;
}
</style>


================================================
FILE: Buttons/Yaya12085_swift-mayfly-12.html
================================================
<button class="btn">
  <span>
    Submit 
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" d="M20.33 3.66996C20.1408 3.48213 19.9035 3.35008 19.6442 3.28833C19.3849 3.22659 19.1135 3.23753 18.86 3.31996L4.23 8.19996C3.95867 8.28593 3.71891 8.45039 3.54099 8.67255C3.36307 8.89471 3.25498 9.16462 3.23037 9.44818C3.20576 9.73174 3.26573 10.0162 3.40271 10.2657C3.5397 10.5152 3.74754 10.7185 4 10.85L10.07 13.85L13.07 19.94C13.1906 20.1783 13.3751 20.3785 13.6029 20.518C13.8307 20.6575 14.0929 20.7309 14.36 20.73H14.46C14.7461 20.7089 15.0192 20.6023 15.2439 20.4239C15.4686 20.2456 15.6345 20.0038 15.72 19.73L20.67 5.13996C20.7584 4.88789 20.7734 4.6159 20.7132 4.35565C20.653 4.09541 20.5201 3.85762 20.33 3.66996ZM4.85 9.57996L17.62 5.31996L10.53 12.41L4.85 9.57996ZM14.43 19.15L11.59 13.47L18.68 6.37996L14.43 19.15Z"></path> </g></svg>
  </span>
  <span>
    Sure ?
  </span>
  <span>
    Done ! 
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linecap="round" stroke-width="2" stroke="#ffffff" d="M8.00011 13L12.2278 16.3821C12.6557 16.7245 13.2794 16.6586 13.6264 16.2345L22.0001 6"></path> <path fill="#ffffff" d="M11.1892 12.2368L15.774 6.63327C16.1237 6.20582 16.0607 5.5758 15.6332 5.22607C15.2058 4.87635 14.5758 4.93935 14.226 5.36679L9.65273 10.9564L11.1892 12.2368ZM8.02292 16.1068L6.48641 14.8263L5.83309 15.6248L2.6 13.2C2.15817 12.8687 1.53137 12.9582 1.2 13.4C0.868627 13.8419 0.95817 14.4687 1.4 14.8L4.63309 17.2248C5.49047 17.8679 6.70234 17.7208 7.381 16.8913L8.02292 16.1068Z" clip-rule="evenodd" fill-rule="evenodd"></path> </g></svg>
  </span>
</button>
<style>
/* From Uiverse.io by Yaya12085 - Tags: button */
.btn {
  position: relative;
  outline: 0;
  border: 1px solid transparent;
  background-color: #488aec;
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;
}

.btn span {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  transition: all .4s ease;
}

button svg {
  width: 1.25rem;
  height: 1.25rem;
}

.btn span:nth-child(2),.btn span:nth-child(3) {
  position: absolute;
  top: 40px;
  color: #fff;
}

.btn span:nth-child(2) {
  background-color: #488aec;
}

.btn span:nth-child(3) {
  background-color: #488aec;
}

.btn:hover {
  box-shadow: 0 10px 15px -3px #488aec4f, 0 4px 6px -2px #488aec17;
}

.btn:hover span:nth-child(2), .btn:focus span:nth-child(3) {
  top: 0;
}

.btn:focus {
  box-shadow: none;
}
</style>


================================================
FILE: Buttons/Yaya12085_tasty-chipmunk-31.html
================================================
 <button>Button</button>
<style>
/* From Uiverse.io by Yaya12085 - Tags: button */
button {
  font-size: 28px;
  color: rgb(35, 75, 83);
  background-color: rgb(217, 238, 242);
  background-image: linear-gradient(180deg, rgb(201, 194, 240) 30%, transparent 70%);
  background-repeat: no-repeat;
  background-position: center 45%;
  background-size: 100% 200%;
  padding: 10px 30px;
  border-radius: 30px;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
  position: relative;
  transition: all 0.5s ease;
  outline: none;
}

button::before, button::after {
  content: "";
  inset: 0;
  position: absolute;
  border-radius: 5em;
}

button::before {
  background-image: radial-gradient(ellipse, rgba(204, 246, 255, 0.8) 20%, transparent 50%, transparent 200%), linear-gradient(90deg, #404040 -10%, transparent 30%, transparent 70%, #404040 110%);
  box-shadow: inset 0 0.25em 0.75em rgba(0, 0, 0, 0.8), inset 0 -0.05em 0.2em rgba(255, 255, 255, 0.4), inset 0 -1px 3px rgba(25, 196, 230, 0.75);
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  background-size: 200% 80%, cover;
  background-position: center 220%;
  mix-blend-mode: overlay;
  filter: blur(0);
}

button::after {
  background: linear-gradient(180deg, rgba(213, 204, 255, 0.726), rgba(92, 74, 181, 0.75) 40%, transparent 80%);
  top: 0.075em;
  left: 0.75em;
  right: 0.75em;
  bottom: 1.4em;
  filter: blur(1px);
  mix-blend-mode: screen;
}

button:hover, button:active, button:focus {
  outline: none;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  background-position: center calc( 45% - 0.75em );
}

</style>


================================================
FILE: Buttons/Yaya12085_warm-earwig-85.html
================================================
<!-- From Uiverse.io by Yaya12085  - Tags: gradient, button, pro -->
<button
  class="ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary hover:bg-primary/90 h-10 inline-flex items-center justify-center px-6 py-2 border-0 rounded-full text-sm font-medium text-white bg-gradient-to-l from-blue-500 to-purple-600 shadow-lg hover:from-purple-500 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
  Try Pro
</button>


    

================================================
FILE: Buttons/Yaya12085_witty-firefox-53.html
================================================
<a class="playstore-button" href="#">
  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="icon" viewBox="0 0 512 512">
    <path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z"></path>
  </svg>
  <span class="texts">
    <span class="text-1">GET IT ON</span>
    <span class="text-2">Google Play</span>
  </span>
</a>
<style>
/* From Uiverse.io by Yaya12085 - Tags: icon, button, hover, dark, download, google */
.playstore-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #000;
  border-radius: 9999px;
  background-color: rgba(0, 0, 0, 1);
  padding: 0.625rem 1.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  outline: 0;
  transition: all  .2s ease;
  text-decoration: none;
}

.playstore-button:hover {
  background-color: transparent;
  color: rgba(0, 0, 0, 1);
}

.icon {
  height: 1.5rem;
  width: 1.5rem;
}

.texts {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.text-1 {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-2 {
  font-weight: 600;
}
</style>


================================================
FILE: Buttons/Yaya12085_wonderful-lion-100.html
================================================
<button class="pushable">
  <span class="shadow"></span>
  <span class="front"
    >Join Today
    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
      <g
        id="SVGRepo_tracerCarrier"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <path
          d="M6 12H18M18 12L13 7M18 12L13 17"
          stroke="#fff"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </g>
    </svg>
  </span>
</button>

<style>
/* From Uiverse.io by Yaya12085  - Tags: button */
.pushable {
  --dark: #5e2986;
  --medium: #8732cb;
  --light: #d08bfe;
  --white: #fff;
  cursor: pointer;
  outline: none;
  border: none;
  padding: 0;
  border-radius: 12px;
  background-color: var(--dark);
  position: relative;
}

.front {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 42px;
  border-radius: 12px;
  font-size: 1.25rem;
  font-weight: 600;
  background-color: var(--dark);
  background-image: linear-gradient(to top, var(--medium), var(--light));
  color: white;
  transform: translateY(-4px);
  border: 2px solid var(--medium);
}

.front svg {
  width: 30px;
  height: 30px;
}
.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: hsl(0deg 0% 0% / 0.25);
  transform: translateY(2px);
}
.pushable:focus:not(:focus-visible) {
  outline: none;
}
.front {
  will-change: transform;
  transition: transform 250ms;
}

.pushable:hover .front {
  transform: translateY(-6px);
}

.pushable:active .front {
  transform: translateY(-2px);
}

</style>
    

================================================
FILE: Buttons/Yaya12085_wonderful-robin-27.html
================================================
<!-- From Uiverse.io by Yaya12085 - Tags: action, button, shadow, box-shadow -->
<button class="cursor-pointer bg-gradient-to-r from-[#EB3349] to-[#F45C43] px-6 py-2 rounded text-white font-semibold shadow-[rgba(6,_24,_44,_0.4)_0px_0px_0px_2px,_rgba(6,_24,_44,_0.65)_0px_4px_6px_-1px,_rgba(255,_255,_255,_0.08)_0px_1px_0px_inset] hover:shadow-[rgba(6,_24,_44,_0.4)_0px_0px_0px_2px,_rgba(6,_24,_44,_0.65)_0px_4px_6px_-10px,_rgba(255,_255,_255,_0.08)_0px_1px_0px_inset] focus:shadow-[inset_-12px_-8px_40px_#46464620] transition-shadow">
  Button
</button>



================================================
FILE: Buttons/Z4drus_bitter-turtle-76.html
================================================
<!-- From Uiverse.io by Z4drus  - Tags: simple, animation, minimalist, white, black, button, smooth, light -->
<button
  class="relative overflow-hidden bg-white border-2 border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg shadow-sm hover:shadow transition-all duration-500 ease-linear focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 active:scale-95"
>
  Click Me
  <span
    class="absolute inset-0 bg-gray-100 rounded-lg opacity-0 hover:opacity-10 transition-opacity duration-100 ease-linear"
  ></span>
</button>


    

================================================
FILE: Buttons/Z4drus_tough-sloth-76.html
================================================
<div class="button-container">
  <button class="button-3d">
    <div class="button-top">
      <span class="material-icons">❮</span>
    </div>
    <div class="button-bottom"></div>
    <div class="button-base"></div>
  </button>
  <button class="button-3d">
    <div class="button-top">
      <span class="material-icons">❯</span>
    </div>
    <div class="button-bottom"></div>
    <div class="button-base"></div>
  </button>
</div>

<style>
/* From Uiverse.io by Z4drus  - Tags: material design, animation, 3d, blue, purple, minimalist, button, smooth */
.button-container {
  display: flex;
  justify-content: center;
  margin: 20px;
}

.button-3d {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  border-width: 0;
  padding: 0 8px;
  min-width: 4em;
  min-height: 4em;
  box-sizing: border-box;
  background: transparent;
  font: inherit;
  cursor: pointer;
  margin: 10px;
  border-radius: 20px;
}

.button-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  padding: 8px 16px;
  transform: translateY(0);
  color: #fff;
  background-image: linear-gradient(145deg, #6a11cb, #2575fc);
  text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  transition: transform 0.3s, border-radius 0.3s, background 10s;
}

.button-3d:active .button-top {
  border-radius: 10px 10px 8px 8px / 8px;
  transform: translateY(2px);
  background-image: linear-gradient(145deg, #2575fc, #6a11cb);
}

.button-bottom {
  position: absolute;
  z-index: 1;
  bottom: 4px;
  left: 4px;
  border-radius: 20px;
  padding-top: 6px;
  width: calc(100% - 8px);
  height: calc(100% - 10px);
  background-image: linear-gradient(145deg, #2575fc, #6a11cb);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
  transition: border-radius 0.2s, padding-top 0.2s;
}

.button-base {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 0;
  border-radius: 20px;
  width: 100%;
  height: calc(100% - 4px);
  background-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 2px 2px rgba(0, 0, 0, 0.25);
  transition: border-radius 0.2s, padding-top 0.2s;
}

.button-3d:active .button-bottom {
  border-radius: 10px 10px 8px 8px / 8px;
  padding-top: 0;
}

.button-3d:active .button-base {
  border-radius: 10px 10px 8px 8px / 8px;
}

</style>
    

================================================
FILE: Buttons/Z4drus_wonderful-termite-25.html
================================================
<div class="button-container">
  <button class="button-3d">
    <div class="button-top">
      <span class="material-icons">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          height="22"
          width="22"
        >
          <path
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="1.5"
            stroke="#292D32"
            d="M7.4 6.32l8.49-2.83c3.81-1.27 5.88.81 4.62 4.62l-2.83 8.49c-1.9 5.71-5.02 5.71-6.92 0l-.84-2.52-2.52-.84c-5.71-1.9-5.71-5.01 0-6.92zm2.71 7.33l3.58-3.59"
          ></path>
        </svg>
      </span>
      <span class="button-text">Send Message</span>
    </div>
    <div class="button-bottom"></div>
    <div class="button-base"></div>
  </button>
</div>

<style>
/* From Uiverse.io by Z4drus  - Tags: simple, 3d, action, minimalist, white, black, button, smooth */
.button-container {
  display: flex;
  justify-content: center;
  margin: 20px;
}

.material-icons {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-text {
  margin-left: 6px;
  font-weight: 600;
  color: black;
}

.button-3d {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  border-width: 0;
  padding: 0 8px;
  min-width: 4em;
  min-height: 4em;
  box-sizing: border-box;
  background: transparent;
  font: inherit;
  cursor: pointer;
  margin: 10px;
  border-radius: 20px;
}

.button-top {
  display: flex;

  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  padding: 10px 10px;
  transform: translateY(0);
  background-image: linear-gradient(to bottom, #e7e7e775, #ffffff);
  border-radius: 20px;
  transition: transform 0.3s, border-radius 0.3s, background 10s;
}

.button-3d:active .button-top {
  border-radius: 10px 10px 8px 8px / 8px;
  transform: translateY(2px);
  background-image: linear-gradient(to bottom, #ffffff, #e7e7e7);
}

.button-bottom {
  position: absolute;
  z-index: 1;
  bottom: 4px;
  left: 4px;
  border-radius: 10px;
  padding-top: 10px;
  width: calc(100% - 8px);
  height: calc(100% - 10px);
  background-image: linear-gradient(to bottom, #ffffff, #e7e7e7);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
  transition: border-radius 0.2s, padding-top 0.2s;
}

.button-3d:active .button-bottom {
  border-radius: 10px 10px 8px 8px / 8px;
  padding-top: 0;
}

.button-3d:active .button-base {
  border-radius: 10px 10px 8px 8px / 8px;
}

</style>
    

================================================
FILE: Buttons/ZacharyCrespin_dull-dragonfly-23.html
================================================
<button>Button</button>
<style>
/* From Uiverse.io by ZacharyCrespin - Tags: button, stack */
button {
  transition: all 0.5s;
  font-size: 17px;
  padding: 1ch 2ch;
  background-color: white;
  color: #000;
  font-family: Roboto, sans-serif;
  border: none;
  border-radius: 2px;
  box-shadow: 2px 2px 0px hsl(0, 0%, 90%),
    4px 4px 0px hsl(0, 0%, 80%),
    6px 6px 0px hsl(0, 0%, 70%),
    8px 8px 0px hsl(0, 0%, 60%),
    10px 10px 0px hsl(0, 0%, 50%),
    12px 12px 0px hsl(0, 0%, 40%),
    14px 14px 0px hsl(0, 0%, 30%),
    16px 16px 0px hsl(0, 0%, 20%),
    18px 18px 0px hsl(0, 0%, 10%);
}

button:hover {
  background-color: hsl(0, 0%, 50%);
  color: #fff;
  box-shadow: none;
}
</style>


================================================
FILE: Buttons/Zena4L_heavy-yak-65.html
================================================

<a href="#" class="btn"> Click Me</a>
<style>
/* From Uiverse.io by Zena4L - Tags: button */
.btn:link,
.btn:visited {
 text-transform: uppercase;
 text-decoration: none;
 color: rgb(27, 27, 27);
 padding: 10px 30px;
 border: 1px solid;
 border-radius: 1000px;
 display: inline-block;
 transition: all .2s;
 position: relative;
}

.btn:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(27, 27, 27, .5);
}

.btn:active {
 transform: translateY(-3px);
}

.btn::after {
 content: "";
 display: inline-block;
 height: 100%;
 width: 100%;
 border-radius: 100px;
 top: 0;
 left: 0;
 position: absolute;
 z-index: -1;
 transition: all .3s;
}

.btn:hover::after {
 background-color: rgb(0, 238, 255);
 transform: scaleX(1.4) scaleY(1.5);
 opacity: 0;
}
</style>


================================================
FILE: Buttons/ZiyadOuamna_hungry-penguin-18.html
================================================
<button class="button">Button</button>

<footer></footer>

<style>
/* From Uiverse.io by ZiyadOuamna  - Tags: button, active, like, dark, light, shadow, modern, click */
.button {
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 15px;
  background-color: gray;
  font-weight: bolder;
  font-size: 25px;
  border: 2px solid black;
  transition: all 0.5s;
}
.button:hover {
  background-color: aqua;
  box-shadow: 0px 0px 15px aqua;

  transform: scale(0.9);
}

</style>
    

================================================
FILE: Buttons/ZstarPanda0210_rare-chicken-24.html
================================================
<button id="btn-message" class="button-message">
  <div class="content-avatar">
    <div class="status-user"></div>
    <div class="avatar">
      <svg
        class="user-img"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path
          d="M12,12.5c-3.04,0-5.5,1.73-5.5,3.5s2.46,3.5,5.5,3.5,5.5-1.73,5.5-3.5-2.46-3.5-5.5-3.5Zm0-.5c1.66,0,3-1.34,3-3s-1.34-3-3-3-3,1.34-3,3,1.34,3,3,3Z"
        ></path>
      </svg>
    </div>
  </div>
  <div class="notice-content">
    <div class="username">Jessica Sanders</div>
    <div class="lable-message">
      Message<span class="number-message">3</span>
    </div>
    <div class="user-id">@jessisanders</div>
  </div>
</button>

<style>
/* From Uiverse.io by ZstarPanda0210  - Tags: social, notification, button, hover, message */
#btn-message {
  --text-color: #000;
  --bg-color-sup: #d2d2d2;
  --bg-color: #f4f4f4;
  --bg-hover-color: #ffffff;
  --online-status: #00da00;
  --font-size: 16px;
  --btn-transition: all 0.2s ease-out;
}

.button-message {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 400 var(--font-size) Helvetica Neue, sans-serif;
  box-shadow: 0 0 2.17382px rgba(0, 0, 0, 0.049),
    0 1.75px 6.01034px rgba(0, 0, 0, 0.07),
    0 3.63px 14.4706px rgba(0, 0, 0, 0.091), 0 22px 48px rgba(0, 0, 0, 0.14);
  background-color: var(--bg-color);
  border-radius: 68px;
  cursor: pointer;
  padding: 6px 10px 6px 6px;
  width: fit-content;
  height: 40px;
  border: 0;
  overflow: hidden;
  position: relative;
  transition: var(--btn-transition);
}

.button-message:hover {
  height: 56px;
  padding: 8px 20px 8px 8px;
  background-color: var(--bg-hover-color);
  transition: var(--btn-transition);
}

.button-message:active {
  transform: scale(0.99);
}

.content-avatar {
  width: 30px;
  height: 30px;
  margin: 0;
  transition: var(--btn-transition);
  position: relative;
}

.button-message:hover .content-avatar {
  width: 40px;
  height: 40px;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--bg-color-sup);
}

.user-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.status-user {
  position: absolute;
  width: 6px;
  height: 6px;
  right: 1px;
  bottom: 1px;
  border-radius: 50%;
  outline: solid 2px var(--bg-color);
  background-color: var(--online-status);
  transition: var(--btn-transition);
  animation: active-status 2s ease-in-out infinite;
}

.button-message:hover .status-user {
  width: 10px;
  height: 10px;
  right: 1px;
  bottom: 1px;
  outline: solid 3px var(--bg-hover-color);
}

.notice-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 8px;
  text-align: initial;
  color: var(--text-color);
}

.username {
  letter-spacing: -6px;
  height: 0;
  opacity: 0;
  transform: translateY(-20px);
  transition: var(--btn-transition);
}

.user-id {
  font-size: 12px;
  letter-spacing: -6px;
  height: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: var(--btn-transition);
}

.lable-message {
  display: flex;
  align-items: center;
  opacity: 1;
  transform: scaleY(1);
  transition: var(--btn-transition);
}

.button-message:hover .username {
  height: auto;
  letter-spacing: normal;
  opacity: 1;
  transform: translateY(0);
  transition: var(--btn-transition);
}

.button-message:hover .user-id {
  height: auto;
  letter-spacing: normal;
  opacity: 1;
  transform: translateY(0);
  transition: var(--btn-transition);
}

.button-message:hover .lable-message {
  height: 0;
  transform: scaleY(0);
  transition: var(--btn-transition);
}

.lable-message,
.username {
  font-weight: 600;
}

.number-message {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 8px;
  font-size: 12px;
  width: 16px;
  height: 16px;
  background-color: var(--bg-color-sup);
  border-radius: 20px;
}
@keyframes active-status {
  0% {
    background-color: var(--online-status);
  }

  33.33% {
    background-color: #93e200;
  }

  66.33% {
    background-color: #93e200;
  }

  100% {
    background-color: var(--online-status);
  }
}

</style>
    

================================================
FILE: Buttons/aadium_grumpy-kangaroo-69.html
================================================
<button>
  Click Me
</button>
<style>
/* From Uiverse.io by aadium - Tags: gradient, button, glow, colorful */
button {
  padding: 15px 32px;
  font-size: 20px;
  color: white;
  border: none;
  border-radius: 5em;
  background-size: 200% 100%;
  background-image: linear-gradient(145deg, #ff53eb, #4b4bff, #5de7ff);
  box-shadow: 3px 3px 10px 2px #4b4bff, -3px -3px 10px 2px #ff53eb;
  transition: 0.5s;
}

button:hover {
  background-position: 99%;
  box-shadow: 3px 3px 10px 2px #5de7ff, -3px -3px 10px 2px #4b4bff;
}

button:active {
  transform: scale(0.8) rotate(5deg);
  box-shadow: 3px 3px 15px 3px #5de7ff, -3px -3px 15px 3px #4b4bff;
}
</style>


================================================
FILE: Buttons/aadium_massive-seahorse-39.html
================================================
<div class="paste-button">
  <button class="button">Paste &nbsp; ▼</button>
  <div class="dropdown-content">
    <a id="top" href="#">Keep source formatting</a>
    <a id="middle" href="#">Merge formatting</a>
    <a id="bottom" href="#">Keep text only</a>
  </div>
</div>

<style>
/* From Uiverse.io by aadium - Tags: button, dropdown, menu button  */
.paste-button {
  position: relative;
  display: block;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.button {
  background-color: #4CAF50;
  color: #212121;
  padding: 10px 15px;
  font-size: 15px;
  font-weight: bold;
  border: 2px solid transparent;
  border-radius: 15px;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  font-size: 13px;
  position: absolute;
  z-index: 1;
  min-width: 200px;
  background-color: #212121;
  border: 2px solid #4CAF50;
  border-radius: 0px 15px 15px 15px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: #4CAF50;
  padding: 8px 10px;
  text-decoration: none;
  display: block;
  transition: 0.1s;
}

.dropdown-content a:hover {
  background-color: #4CAF50;
  color: #212121;
}

.dropdown-content a:focus {
  background-color: #212121;
  color: #4CAF50;
}

.dropdown-content #top:hover {
  border-radius: 0px 13px 0px 0px;
}

.dropdown-content #bottom:hover {
  border-radius: 0px 0px 13px 13px;
}

.paste-button:hover button {
  border-radius: 15px 15px 0px 0px;
}

.paste-button:hover .dropdown-content {
  display: block;
}

</style>


================================================
FILE: Buttons/aadium_purple-insect-27.html
================================================
<button class="morph-button"></button>

<style>
/* From Uiverse.io by aadium - Tags: button, twist, dynamic */
.morph-button {
  display: relative;
  background-color: #66DA43;
  color: #66DA43;
  width: 85px;
  height: 40px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.morph-button:hover {
  transform: scale(1.5);
}

.morph-button:active {
  transform: scale(0.8);
  background-color: #212121;
  border: 2px solid #66DA43;
}

.morph-button:before {
  content: "Twist";
  display: block;
  position: absolute;
  margin-top: -22px;
  margin-left: -2px;
  padding: 12px 25px;
  transform-origin: center;
  transition: transform 0.3s ease-in-out;
  z-index: 1;
  background-color: #212121;
  border: 2px solid #66DA43;
}

.morph-button:hover:before {
  transform: rotate(45deg) scale(1.2);
}

</style>


================================================
FILE: Buttons/aadium_smooth-cow-62.html
================================================
<button class="cti">
  <div class="CTI">
    Code to Infinity
  </div>
</button>
<style>
/* From Uiverse.io by aadium - Tags: button */
.cti {
  background-color: #6019bd;
  padding: 17px 30px;
  border: 3px solid transparent;
  border-radius: 0.6em;
  transition: 0.2s;
}

.cti:hover {
  background-color: transparent;
  border: 3px solid #6019bd;
  box-shadow: 0px 0px 27px 5px #6019bd;
}

.CTI {
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  font-size: 17px;
  font-weight: bold;
  overflow: hidden;
  border-right: 4px solid transparent;
  white-space: nowrap;
  margin: 0 auto;
}

.cti:hover .CTI {
  border-right: 4px solid #6019bd;
  animation: letters 1.75s steps(22, end),
    cursor .4s step-end infinite;
}

@keyframes letters {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes cursor {
  from {
    border-color: transparent
  }

  50% {
    border-color: #6019bd
  }
}
</style>


================================================
FILE: Buttons/aadium_warm-catfish-77.html
================================================
<button class="carbutton">
  <div class="caption">Let's Race</div>
  <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="car"><path d="M355.975 292.25a24.82 24.82 0 1 0 24.82-24.81 24.84 24.84 0 0 0-24.82 24.81zm-253-24.81a24.81 24.81 0 1 1-24.82 24.81 24.84 24.84 0 0 1 24.81-24.81zm-76.67-71.52h67.25l-13.61 49.28 92-50.28h57.36l1.26 34.68 32 14.76 11.74-14.44h15.62l3.16 16c137.56-13 192.61 29.17 192.61 29.17s-7.52 5-25.93 8.39c-3.88 3.31-3.66 14.44-3.66 14.44h24.2v16h-52v-27.48c-1.84.07-4.45.41-7.06.47a40.81 40.81 0 1 0-77.25 23h-204.24a40.81 40.81 0 1 0-77.61-17.67c0 1.24.06 2.46.17 3.67h-36z"></path></svg>
</button>
<style>
/* From Uiverse.io by aadium - Tags: button, car, formula1 */
.carbutton {
  width: 200px;
  height: 70px;
  padding: 20px;
  background: #212121;
  border: 6px double #e8e8e8;
  transition: 0.2s;
}

.caption {
  color: #e8e8e8;
  font-family: 'Courier New', Courier, monospace;
  font-size: 20px;
  transition: 0.2s;
}

.car {
  fill: #e8e8e8;
  width: 50px;
  height: 50px;
  margin-left: -120px;
  margin-top: -35px;
  transition: 0.2s ease-in-out;
}

.carbutton:not(:hover) .car {
  opacity: 0%;
  transform: translateX(-150px);
}

.carbutton:hover .caption {
  opacity: 0%;
}

.carbutton:focus .car {
  transform: translateX(120px);
}

</style>


================================================
FILE: Buttons/aarjaycreation_fluffy-owl-5.html
================================================
<div class="main__socials">
  <button class="Link__instagram">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0,0,256,256"
      width="30px"
      height="30px"
      fill-rule="nonzero"
      class="instagram"
    >
      <g
        fill-rule="nonzero"
        stroke="none"
        stroke-width="1"
        stroke-linecap="butt"
        stroke-linejoin="miter"
        stroke-miterlimit="10"
        stroke-dasharray=""
        stroke-dashoffset="0"
        font-family="none"
        font-weight="none"
        font-size="none"
        text-anchor="none"
        style="mix-blend-mode: normal"
      >
        <g transform="scale(8,8)">
          <path
            d="M11.46875,5c-3.55078,0 -6.46875,2.91406 -6.46875,6.46875v9.0625c0,3.55078 2.91406,6.46875 6.46875,6.46875h9.0625c3.55078,0 6.46875,-2.91406 6.46875,-6.46875v-9.0625c0,-3.55078 -2.91406,-6.46875 -6.46875,-6.46875zM11.46875,7h9.0625c2.47266,0 4.46875,1.99609 4.46875,4.46875v9.0625c0,2.47266 -1.99609,4.46875 -4.46875,4.46875h-9.0625c-2.47266,0 -4.46875,-1.99609 -4.46875,-4.46875v-9.0625c0,-2.47266 1.99609,-4.46875 4.46875,-4.46875zM21.90625,9.1875c-0.50391,0 -0.90625,0.40234 -0.90625,0.90625c0,0.50391 0.40234,0.90625 0.90625,0.90625c0.50391,0 0.90625,-0.40234 0.90625,-0.90625c0,-0.50391 -0.40234,-0.90625 -0.90625,-0.90625zM16,10c-3.30078,0 -6,2.69922 -6,6c0,3.30078 2.69922,6 6,6c3.30078,0 6,-2.69922 6,-6c0,-3.30078 -2.69922,-6 -6,-6zM16,12c2.22266,0 4,1.77734 4,4c0,2.22266 -1.77734,4 -4,4c-2.22266,0 -4,-1.77734 -4,-4c0,-2.22266 1.77734,-4 4,-4z"
          ></path>
        </g>
      </g>
    </svg>
  </button>
  <button class="Link__twitter">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 48 48"
      width="30px"
      height="30px"
      class="twitter"
    >
      <path
        d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"
      ></path>
    </svg>
  </button>
  <button class="Link__github">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 30 30"
      width="30px"
      height="30px"
      class="github"
    >
      <path
        d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"
      ></path>
    </svg>
  </button>
  <button class="Link__discord">
    <svg
      height="30px"
      width="30px"
      viewBox="0 0 48 48"
      xmlns="http://www.w3.org/2000/svg"
      class="discord"
    >
      <path
        d="M40,12c0,0-4.585-3.588-10-4l-0.488,0.976C34.408,10.174,36.654,11.891,39,14c-4.045-2.065-8.039-4-15-4s-10.955,1.935-15,4c2.346-2.109,5.018-4.015,9.488-5.024L18,8c-5.681,0.537-10,4-10,4s-5.121,7.425-6,22c5.162,5.953,13,6,13,6l1.639-2.185C13.857,36.848,10.715,35.121,8,32c3.238,2.45,8.125,5,16,5s12.762-2.55,16-5c-2.715,3.121-5.857,4.848-8.639,5.815L33,40c0,0,7.838-0.047,13-6C45.121,19.425,40,12,40,12z M17.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C21,28.209,19.433,30,17.5,30z M30.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C34,28.209,32.433,30,30.5,30z"
      ></path>
    </svg>
  </button>
</div>

<style>
/* From Uiverse.io by aarjaycreation  - Tags: social, button, social media, 2d button */
.main__socials {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.Link__instagram {
  padding: 0.8em;
  outline: none;
  border: none;
  background: white;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: 0.2s ease-in-out;
}

.instagram {
  fill: #cc39a4;
}

.Link__twitter {
  padding: 0.8em;
  outline: none;
  border: none;
  background: white;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: 0.2s ease-in-out;
}

.twitter {
  fill: #03a9f4;
}

.Link__github {
  padding: 0.8em;
  outline: none;
  border: none;
  background: white;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: 0.2s ease-in-out;
}

.Link__discord {
  padding: 0.8em;
  outline: none;
  border: none;
  background: white;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: 0.2s ease-in-out;
}

.discord {
  fill: #8c9eff;
}

.Link__instagram:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #cc39a4;
}

.Link__instagram:hover .instagram {
  fill: white;
}

.Link__twitter:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #03a9f4;
}

.Link__twitter:hover .twitter {
  fill: white;
}

.Link__github:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: black;
}

.Link__github:hover .github {
  fill: white;
}

.Link__discord:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #8c9eff;
}

.Link__discord:hover .discord {
  fill: white;
}

</style>
    

================================================
FILE: Buttons/aaronross1_kind-bobcat-81.html
================================================
<button class="edit-button">
  <svg class="edit-svgIcon" viewBox="0 0 512 512">
                    <path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"></path>
                  </svg>
</button>
<style>
/* From Uiverse.io by aaronross1 - Tags: button, edit */
.edit-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgb(20, 20, 20);
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);
  cursor: pointer;
  transition-duration: 0.3s;
  overflow: hidden;
  position: relative;
  text-decoration: none !important;
}

.edit-svgIcon {
  width: 17px;
  transition-duration: 0.3s;
}

.edit-svgIcon path {
  fill: white;
}

.edit-button:hover {
  width: 120px;
  border-radius: 50px;
  transition-duration: 0.3s;
  background-color: rgb(255, 69, 69);
  align-items: center;
}

.edit-button:hover .edit-svgIcon {
  width: 20px;
  transition-duration: 0.3s;
  transform: translateY(60%);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

.edit-button::before {
  display: none;
  content: "Edit";
  color: white;
  transition-duration: 0.3s;
  font-size: 2px;
}

.edit-button:hover::before {
  display: block;
  padding-right: 10px;
  font-size: 13px;
  opacity: 1;
  transform: translateY(0px);
  transition-duration: 0.3s;
}

</style>


================================================
FILE: Buttons/aasisodiya_nasty-cat-19.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by aasisodiya - Tags: button */
button {
 background-color: #eee;
 border: none;
 padding: 1rem;
 font-size: 1rem;
 width: 10em;
 border-radius: 1rem;
 color: lightcoral;
 box-shadow: 0 0.4rem #dfd9d9;
 cursor: pointer;
}

button:active {
 color: white;
 box-shadow: 0 0.2rem #dfd9d9;
 transform: translateY(0.2rem);
}

button:hover:not(:disabled) {
 background: lightcoral;
 color: white;
 text-shadow: 0 0.1rem #bcb4b4;
}

button:disabled {
 cursor: auto;
 color: grey;
}
</style>


================================================
FILE: Buttons/abassj1_popular-panda-42.html
================================================
<button class="button"> Button
</button>
<style>
/* From Uiverse.io by abassj1 - Tags: button */
/* Modified code from @gagan-gv */
.button {
 padding: 1em 2em;
 font-size: 17px;
 background: transparent;
 border: none;
 position: relative;
 color: yellow;
 z-index: 1;
}

.button::after,
 .button::before {
 content: '';
 position: absolute;
 bottom: 0;
 right: 0;
 z-index: -99999;
 transition: all .4s;
}

.button::before {
 transform: translate(0%, 0%);
 width: 100%;
 height: 100%;
 background: darkslategray;
 border-radius: 50px;
}

.button::after {
 transform: translate(0px, 0px);
 width: 10px;
 height: 10px;
 background: #ffffff15;
 backdrop-filter: blur(5px);
 border-radius: 50px;
}

.button:hover::before {
 transform: translate(5%, 20%);
 width: 10px;
 height: 10px;
}

.button:hover::after {
 border-radius: 50px;
 transform: translate(0, 0);
 width: 100%;
 height: 100%;
}

.button:active::after {
 transition: 0s;
 transform: translate(0, 5%);
}
</style>


================================================
FILE: Buttons/abbos97_wise-jellyfish-49.html
================================================
<button class="moves-button">Hover me</button>

<style>
/* From Uiverse.io by abbos97 - Tags: gradient, button */
.moves-button {
  padding: 10px 20px;
  color: #000;
  font-weight: 900;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border: 3px solid transparent;
  border-image: linear-gradient(90deg, #f3f 20%, rgb(49, 18, 187) 60%);
  border-image-slice: 1;
}

.moves-button::after {
  content: 'Button';
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgb(245, 108, 245) 20%, rgb(119, 91, 245) 60%);
  transition: transform 0.3s ease-out;
  pointer-events: none;
  color: #fff;
}

.moves-button:hover::after {
  transform: translateX(-100%);
}

.moves-button:focus {
  outline: none;
}

/* Optional styling for the button on click */
.moves-button:active {
  transform: translateY(2px);
}

</style>


================================================
FILE: Buttons/abdulGitHb_tall-cougar-52.html
================================================
<!-- From Uiverse.io by abdulGitHb  - Website: https://uiverse.io/kirzin/selfish-kangaroo-64 - Name: kirzin - Tags: gradient, button, neon, custom, button hover effect , tailwindcss -->
<button
  class="cursor-pointer text-white font-bold relative text-[14px] w-[9em] h-[3em] text-center bg-gradient-to-r from-violet-500 from-10% via-sky-500 via-30% to-pink-500 to-90% bg-[length:400%] rounded-[30px] z-10 hover:animate-gradient-xy hover:bg-[length:100%] before:content-[''] before:absolute before:-top-[5px] before:-bottom-[5px] before:-left-[5px] before:-right-[5px] before:bg-gradient-to-r before:from-violet-500 before:from-10% before:via-sky-500 before:via-30% before:to-pink-500 before:bg-[length:400%] before:-z-10 before:rounded-[35px] before:hover:blur-xl before:transition-all before:ease-in-out before:duration-[1s] before:hover:bg-[length:10%] active:bg-violet-700 focus:ring-violet-700"
>
  HOVER ME
</button>


    

================================================
FILE: Buttons/abhayexe_heavy-crab-27.html
================================================
<button class="join-button">
  Join Today
  <span class="arrow">
    <svg
      fill="#000000"
      xml:space="preserve"
      viewBox="0 0 32.00 32.00"
      id="Layer_1"
      version="1.1"
    >
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <line
          y2="16"
          x2="4"
          y1="16"
          x1="26"
          stroke-miterlimit="10"
          stroke-width="2.848"
          stroke="#f3bff3"
          fill="none"
        ></line>
        <polyline
          points="18,7.5 26.5,16 18,24.5"
          stroke-miterlimit="10"
          stroke-width="2.848"
          stroke="#f3bff3"
          fill="none"
        ></polyline>
      </g>
    </svg>
  </span>
</button>

<style>
/* From Uiverse.io by abhayexe  - Tags: button */
.join-button {
  background: rgb(226, 136, 243);
  background: linear-gradient(
    180deg,
    rgba(226, 136, 243, 1) 5%,
    rgba(143, 76, 215, 1) 71%,
    rgb(136, 37, 193) 93%,
    rgb(98, 29, 176) 100%
  );
  border-top: 3px solid rgb(248, 205, 247);
  border-bottom: 3px solid rgb(179, 64, 250);
  border-left: 3px solid rgb(240, 162, 250);
  border-right: 3px solid rgb(240, 162, 250);
  color: rgba(244, 221, 249, 0.888);
  text-shadow: 0px 1.5px #5000753d;
  height: 70px;
  border-radius: 20px;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.7s ease;
  box-shadow:
    -25px 25px 15px rgba(55, 1, 181, 0.272),
    -5px 5px 2px rgb(91, 1, 126),
    -15px 15px 10px rgba(116, 1, 126, 0.555);
}
.join-button svg {
  height: 30px;
  margin-bottom: -9px;
  margin-left: 5px;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.256));
}
.join-button:hover {
  transform: translateY(5px);
  box-shadow: -5px 5px 5px rgb(66, 1, 94);
  background: rgb(91, 37, 193);
  background: linear-gradient(
    180deg,
    rgba(91, 37, 193, 1) 5%,
    rgba(143, 76, 215, 1) 57%,
    rgba(226, 136, 243, 1) 100%
  );
}
.join-button:active {
  transition: transform 50ms ease-out;
  box-shadow: -3px 3px 0px rgb(21, 0, 30);
  transform: translateY(19px);
}

</style>
    

================================================
FILE: Buttons/aboalsim114_neat-cow-49.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by aboalsim114 - Tags: button */
button {
  position: relative;
  background-color: rgb(230, 34, 77);
  border-radius: 5px;
  box-shadow: rgb(121, 18, 55) 0px 4px 0px 0px;
  padding: 15px;
  background-repeat: no-repeat;
  box-sizing: border-box;
  width: 154px;
  height: 49px;
  color: #fff;
  border: none;
  font-size: 20px;
  transition: all .3s ease-in-out;
  z-index: 1;
  overflow: hidden;
}

button::before {
  content: "";
  background-color: rgb(248, 50, 93);
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: width 700ms ease-in-out;
  display: inline-block;
}

button:hover::before {
  width: 100%;
}
</style>


================================================
FILE: Buttons/aboalsim114_smooth-moose-22.html
================================================
<button>
Hover me
</button>
<style>
/* From Uiverse.io by aboalsim114 - Tags: button */
button {
  padding: 0.8em 1.8em;
  border: 2px solid #fff;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  transition: .3s;
  z-index: 1;
  font-family: inherit;
  color: #000;
  border-radius: 30px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

button::after {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: red;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 800ms ease-in-out;
  z-index: -1;
  opacity: 80%;
}

button::before {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: blue;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 800ms ease-in-out;
  z-index: -1;
  opacity: 60%;
}

button:hover::after {
  width: 37.5%;
}

button:hover::before {
  width: 37.5%;
}
</style>


================================================
FILE: Buttons/abrahamcalsin_sour-donkey-65.html
================================================
<button>
  <span>BUTTON</span>
</button>
<style>
/* From Uiverse.io by abrahamcalsin - Tags: button */
button {
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 5px;
 background: #183153;
 font-family: "Montserrat", sans-serif;
 box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
 overflow: hidden;
 border: none;
}

button:after {
 content: " ";
 width: 0%;
 height: 100%;
 background: #FFD401;
 position: absolute;
 transition: all 0.4s ease-in-out;
 right: 0;
}

button:hover::after {
 right: auto;
 left: 0;
 width: 100%;
}

button span {
 text-align: center;
 text-decoration: none;
 width: 100%;
 padding: 18px 25px;
 color: #fff;
 font-size: 1.125em;
 font-weight: 700;
 letter-spacing: 0.3em;
 z-index: 20;
 transition: all 0.3s ease-in-out;
}

button:hover span {
 color: #183153;
 animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
 0% {
  transform: scale(1);
 }

 50% {
  transform: scale(0.95);
 }

 100% {
  transform: scale(1);
 }
}

</style>


================================================
FILE: Buttons/absoluteSTrange_helpless-robin-98.html
================================================
<div class="button">
    <div class="button-wrapper">
        <div class="text">Download</div>
        <span class="icon">
            For Free!
        </span>
    </div>
</div>
<style>
/* From Uiverse.io by absoluteSTrange - Tags: button */
.button {
  --width: 100px;
  --height: 25px;
  --button-color: #0059ff;
  width: var(--width);
  height: var(--height);
  background: var(--button-color);
  position: relative;
  text-align: center;
  border-radius: 30px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  text-decoration: solid;
  transition: background box-shadow 0.3s;
  -webkit-box-shadow: 4px 8px 19px -3px #0059ff;
  box-shadow: 0px 0px 20px -3px #0059ff;
  text-shadow: 0 0 .4em rgb(255, 255, 255);
}

.button::before {
  position: absolute;
  content: attr(data-tooltip);
  background-color: var(--button-color);
  font-size: 0.9rem;
  color: #111;
}

.button::after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: var(--button-color);
}

.button::after,.button::before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-wrapper,.text,.icon {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  color: #fff;
}

.text {
  top: 0
}

.text,.icon {
  transition: top 0.45s;
}

.icon {
  color: #fff;
  top: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button:hover {
  background: #4586ff;
  box-shadow: 0px 0px 20px -3px #4586ff;
}

.button:hover .text {
  top: -100%;
}

.button:hover .icon {
  top: 0;
}




</style>


================================================
FILE: Buttons/absoluteSTrange_tame-hound-16.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by absoluteSTrange - Tags: button */
button {
 padding: 17px 40px;
 border-radius: 10px;
 border: 0;
 background-color: rgb(255, 56, 86);
 letter-spacing: 1.5px;
 font-size: 15px;
 transition: all .3s ease;
 box-shadow: rgb(201, 46, 70) 0px 10px 0px 0px;
 color: hsl(0, 0%, 100%);
}

button:hover {
 box-shadow: rgb(201, 46, 70) 0px 7px 0px 0px;
}

button:active {
 background-color: rgb(255, 56, 86);
 /*50, 168, 80*/
 box-shadow: rgb(201, 46, 70) 0px 0px 0px 0px;
 transform: translateY(5px);
 transition: 200ms;
}
</style>


================================================
FILE: Buttons/abuayaan01_tall-mayfly-66.html
================================================
<button class="button">
  <span class="liquid"></span>  
  <span class="btn-txt">Click Me</span>
</button>
<style>
/* From Uiverse.io by abuayaan01 - Tags: button, water, btn, waves, 3d button, Button design */
.button {
  background-color: #000;
  border: 0px;
  outline: 0px;
  color: #fff;
  width: 200px;
  padding: 20px;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.liquid {
  background-color: #2893eb;
  width: 200px;
  height: 70px;
  position: absolute;
  bottom: 0;
  left: 0;
  box-shadow: inset 5px -5px 25px #104e81,
  inset -5px 0px 25px #104e81;
}

.liquid::after {
  content: '';
  width: 450px;
  height: 400px;
  background: #000;
  z-index: 1;
  position: absolute;
  left: -110px;
  top: -380px;
  border-radius: 45%;
  animation: animate 5s linear 2s infinite;
}

.liquid::before {
  content: '';
  width: 450px;
  height: 400px;
  background-color: rgb(68, 160, 235);
  z-index: 1;
  position: absolute;
  left: -110px;
  top: -380px;
  border-radius: 40%;
  animation: animate 5s linear 1.8s infinite;
}

.btn-txt {
  position: relative;
  z-index: 1;
  font-size: 22px;
  font-family: sans-serif;
  letter-spacing: 2px;
}

@keyframes animate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


</style>


================================================
FILE: Buttons/adamgiebl_big-ape-36.html
================================================
<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span>Button</span>
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: button */
button {
  transform: rotate(-25deg) skew(25deg);
  transform-style: preserve-3d;
  position: relative;
  list-style: none;
  width: 100px;
  height: 32px;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

button:before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: -5px;
  width: 100%;
  height: 10px;
  background: #2a2a2a;
  transform: skewX(-41deg);
}

button:after {
  content: '';
  position: absolute;
  top: 5px;
  left: -9px;
  width: 9px;
  height: 100%;
  background: #2a2a2a;
  transform: skewY(-49deg);
}

button span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2a2a2a;
  color: #fff;
  font-size: 25px;
  transition: 1.1s ease-out;
}

button:hover span {
  z-index: 1000;
  transition: .3s;
  color: #fff;
}

button:hover span:nth-child(5) {
  transform: translate(40px, -40px);
  opacity: 1;
}

button:hover span:nth-child(4) {
  transform: translate(30px, -30px);
  opacity: .8;
}

button:hover span:nth-child(3) {
  transform: translate(20px, -20px);
  opacity: .6;
}

button:hover span:nth-child(2) {
  transform: translate(10px, -10px);
  opacity: .4;
}

button:hover span:nth-child(1) {
  transform: translate(0px, 0px);
  opacity: .2;
}

button:active span:nth-child(5) {
  transform: translate(20px, -20px);
  opacity: 1;
}

button:active span:nth-child(4) {
  transform: translate(15px, -15px);
}

button:active span:nth-child(3) {
  transform: translate(10px, -10px);
}

button:active span:nth-child(2) {
  transform: translate(5px, -5px);
}

button:active span:nth-child(1) {
  transform: translate(0px, 0px);
}

button:nth-child(1):hover span {
  background: #52E19F;
}
</style>


================================================
FILE: Buttons/adamgiebl_big-moose-23.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: button */
button {
 position: relative;
 padding: 10px 40px;
 margin: 0px 10px 10px 0px;
 float: left;
 border-radius: 3px;
 font-size: 20px;
 color: #FFF;
 text-decoration: none;
 background-color: #2ecc71;
 border: none;
 border-bottom: 5px solid #27ae60;
 text-shadow: 0px -2px #27ae60;
 -webkit-transition: all 0.1s;
 transition: all 0.1s;
}

button:hover, button:active {
 -webkit-transform: translate(0px,5px);
 -ms-transform: translate(0px,5px);
 transform: translate(0px,5px);
 border-bottom: 1px solid #2ecc71;
}
</style>


================================================
FILE: Buttons/adamgiebl_curly-wombat-58.html
================================================
<button> Button
  <span></span>
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: button */
button {
  border: none;
  display: block;
  position: relative;
  padding: 0.7em 2.4em;
  font-size: 18px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  color: royalblue;
  z-index: 1;
  font-family: inherit;
  font-weight: 500;
}

button span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: -1;
  border: 4px solid royalblue;
}

button span::before {
  content: "";
  display: block;
  position: absolute;
  width: 8%;
  height: 500%;
  background: var(--lightgray);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-60deg);
  transition: all 0.3s;
}

button:hover span::before {
  transform: translate(-50%, -50%) rotate(-90deg);
  width: 100%;
  background: royalblue;
}

button:hover {
  color: white;
}

button:active span::before {
  background: #2751cd;
}
</style>


================================================
FILE: Buttons/adamgiebl_fluffy-liger-17.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: button */
button {
  background: linear-gradient(-45deg, #3f00b5, #9f69fe, #27c8b7, #3f00b5);
  background-size: 800% 400%;
  padding: 1em 2em;
  display: inline-block;
  border: none;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 700;
  color: white;
  transition: all .5s ease-in-out;
  animation: gradient 10s infinite cubic-bezier(.62, .28, .23, .99) both;
}

button:hover {
  animation: gradient 3s infinite;
  transform: scale(1.05);
}

button:active {
  animation: gradient 3s infinite;
  transform: scale(0.8);
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
</style>


================================================
FILE: Buttons/adamgiebl_giant-donkey-36.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: button */
button {
  background: #FBCA1F;
  font-family: inherit;
  padding: 0.6em 1.3em;
  font-weight: 900;
  font-size: 18px;
  border: 3px solid black;
  border-radius: 0.4em;
  box-shadow: 0.1em 0.1em;
}

button:hover {
  transform: translate(-0.05em, -0.05em);
  box-shadow: 0.15em 0.15em;
}

button:active {
  transform: translate(0.05em, 0.05em);
  box-shadow: 0.05em 0.05em;
}
</style>


================================================
FILE: Buttons/adamgiebl_good-mouse-67.html
================================================
<button class="neu-button">Press me</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: neumorphism, button */
.neu-button {
  background-color: #e0e0e0;
  border-radius: 50px;
  box-shadow: inset 4px 4px 10px #bcbcbc, inset -4px -4px 10px #ffffff;
  color: #4d4d4d;
  cursor: pointer;
  font-size: 18px;
  padding: 15px 40px;
  transition: all 0.2s ease-in-out;
  border: 2px solid rgb(206, 206, 206);
}

.neu-button:hover {
  box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
}

.neu-button:focus {
  outline: none;
  box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
}
</style>


================================================
FILE: Buttons/adamgiebl_helpless-jellyfish-25.html
================================================
<button class="cyberpunk-button">Click me</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: button */
.cyberpunk-button {
  background-color: #2f3640;
  color: #fff;
  border: 2px solid #ff7979;
  border-radius: 5px;
  padding: 10px 15px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  box-shadow: 2px 2px 10px #ff7979;
  transition: all 0.2s ease-in-out;
}

.cyberpunk-button:hover {
  background-color: #ff7979;
  color: #2f3640;
  border-color: #2f3640;
  box-shadow: 2px 2px 20px #2f3640;
  transform: translateY(-2px);
}

</style>


================================================
FILE: Buttons/adamgiebl_hot-catfish-48.html
================================================
<button> Click me
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: 3d, blue, button */
button {
  font-size: 16px;
  padding: 1em 3.3em;
  transform: perspective(200px) rotateX(15deg);
  color: white;
  font-weight: 900;
  border: none;
  border-radius: 5px;
  background: linear-gradient(0deg, rgba(63,94,251,1) 0%, rgba(70,135,252,1) 100%);
  box-shadow: rgba(63,94,251,0.2) 0px 40px 29px 0px;
  will-change: transform;
  transition: all 0.3s;
  border-bottom: 2px solid rgba(70,135,252,1);
}

button:hover {
  transform: perspective(180px) rotateX(30deg) translateY(2px);
}

button:active {
  transform: perspective(170px) rotateX(36deg) translateY(5px);
}
</style>


================================================
FILE: Buttons/adamgiebl_lucky-donkey-6.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: neumorphism, button */
button {
  color: #090909;
  padding: 0.7em 1.7em;
  font-size: 18px;
  border-radius: 0.5em;
  background: #e8e8e8;
  border: 1px solid #e8e8e8;
  transition: all .3s;
  box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

button:hover {
  border: 1px solid white;
}

button:active {
  box-shadow: 4px 4px 12px #c5c5c5,
             -4px -4px 12px #ffffff;
}
</style>


================================================
FILE: Buttons/adamgiebl_massive-insect-65.html
================================================
<button class="button" role="button">Happy Coding!</button>

<style>
/* From Uiverse.io by adamgiebl - Tags: blue, button, modern */
.button {
  align-items: center;
  appearance: none;
  background-color: #EEF2FF;
  border-radius: 8px;
  border-width: 2px;
  border-color: #536DFE;
  box-shadow: rgba(83, 109, 254, 0.2) 0 2px 4px, rgba(83, 109, 254, 0.15) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
  box-sizing: border-box;
  color: #536DFE;
  cursor: pointer;
  display: inline-flex;
  font-family: "JetBrains Mono", monospace;
  height: 56px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow, transform;
  font-size: 20px;
}

.button:focus {
  outline: none;
  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(83, 109, 254, 0.4) 0 2px 4px, rgba(83, 109, 254, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.button:hover {
  box-shadow: rgba(83, 109, 254, 0.3) 0 4px 8px, rgba(83, 109, 254, 0.2) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button:active {
  box-shadow: #D6D6E7 0 3px 7px inset;
  transform: translateY(2px);
}
</style>


================================================
FILE: Buttons/adamgiebl_new-bird-34.html
================================================
<button class="cssbuttons-io-button"> Get started
  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg>
  </div>
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: icon, button */
.cssbuttons-io-button {
  background: #A370F0;
  color: white;
  font-family: inherit;
  padding: 0.35em;
  padding-left: 1.2em;
  font-size: 17px;
  font-weight: 500;
  border-radius: 0.9em;
  border: none;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 1.6em -0.6em #714da6;
  overflow: hidden;
  position: relative;
  height: 2.8em;
  padding-right: 3.3em;
}

.cssbuttons-io-button .icon {
  background: white;
  margin-left: 1em;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.2em;
  width: 2.2em;
  border-radius: 0.7em;
  box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9;
  right: 0.3em;
  transition: all 0.3s;
}

.cssbuttons-io-button:hover .icon {
  width: calc(100% - 0.6em);
}

.cssbuttons-io-button .icon svg {
  width: 1.1em;
  transition: transform 0.3s;
  color: #7b52b9;
}

.cssbuttons-io-button:hover .icon svg {
  transform: translateX(0.1em);
}

.cssbuttons-io-button:active .icon {
  transform: scale(0.95);
}

</style>


================================================
FILE: Buttons/adamgiebl_pink-chicken-70.html
================================================
<button class="cssbuttons-io">
  <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M24 12l-5.657 5.657-1.414-1.414L21.172 12l-4.243-4.243 1.414-1.414L24 12zM2.828 12l4.243 4.243-1.414 1.414L0 12l5.657-5.657L7.07 7.757 2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z"></path></svg> Code</span>
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: icon, button, code */
.cssbuttons-io {
  position: relative;
  font-family: inherit;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.05em;
  border-radius: 0.8em;
  border: none;
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  color: ghostwhite;
  overflow: hidden;
}

.cssbuttons-io svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
}

.cssbuttons-io span {
  position: relative;
  z-index: 10;
  transition: color 0.4s;
  display: inline-flex;
  align-items: center;
  padding: 0.8em 1.2em 0.8em 1.05em;
}

.cssbuttons-io::before,
.cssbuttons-io::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.cssbuttons-io::before {
  content: "";
  background: #000;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.cssbuttons-io:hover::before {
  transform: translate3d(100%, 0, 0);
}

.cssbuttons-io:active {
  transform: scale(0.95);
}

</style>


================================================
FILE: Buttons/adamgiebl_plastic-parrot-32.html
================================================
<button class="cssbuttons-io-button">
  <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M1 14.5a6.496 6.496 0 0 1 3.064-5.519 8.001 8.001 0 0 1 15.872 0 6.5 6.5 0 0 1-2.936 12L7 21c-3.356-.274-6-3.078-6-6.5zm15.848 4.487a4.5 4.5 0 0 0 2.03-8.309l-.807-.503-.12-.942a6.001 6.001 0 0 0-11.903 0l-.12.942-.805.503a4.5 4.5 0 0 0 2.029 8.309l.173.013h9.35l.173-.013zM13 12h3l-4 5-4-5h3V8h2v4z" fill="currentColor"></path></svg>
  <span>Download</span>
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: icon, button */
.cssbuttons-io-button {
  display: flex;
  align-items: center;
  font-family: inherit;
  font-weight: 500;
  font-size: 17px;
  padding: 0.8em 1.5em 0.8em 1.2em;
  color: white;
  background: #ad5389;
  background: linear-gradient(0deg, rgba(77,54,208,1) 0%, rgba(132,116,254,1) 100%);
  border: none;
  box-shadow: 0 0.7em 1.5em -0.5em #4d36d0be;
  letter-spacing: 0.05em;
  border-radius: 20em;
}

.cssbuttons-io-button svg {
  margin-right: 8px;
}

.cssbuttons-io-button:hover {
  box-shadow: 0 0.5em 1.5em -0.5em #4d36d0be;
}

.cssbuttons-io-button:active {
  box-shadow: 0 0.3em 1em -0.5em #4d36d0be;
}
</style>


================================================
FILE: Buttons/adamgiebl_popular-termite-0.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: button */
button {
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  padding: 0.7em 2em;
  border: 3px solid #FF0072;
  border-radius: 2px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
  color: #FF0072;
  text-decoration: none;
  transition: 0.3s ease all;
  z-index: 1;
}

button:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: #FF0072;
  z-index: -1;
}

button:hover, button:focus {
  color: white;
}

button:hover:before, button:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

button:active {
  transform: scale(0.9);
}
</style>


================================================
FILE: Buttons/adamgiebl_purple-wasp-14.html
================================================
<!-- From Uiverse.io by adamgiebl - Tags: icon, pink, button, game, gradient border -->
<button
  class="relative cursor-pointer opacity-90 hover:opacity-100 transition-opacity p-[2px] bg-black rounded-[16px] bg-gradient-to-t from-[#8122b0] to-[#dc98fd] active:scale-95"
>
  <span
    class="w-full h-full flex items-center gap-2 px-8 py-3 bg-[#B931FC] text-[#f1d5fe] rounded-[14px] bg-gradient-to-t from-[#a62ce2] to-[#c045fc]"
  >
    <svg
      stroke-width="2"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke="currentColor"
      fill="none"
      class="w-5 h-5"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8 13V9m-2 2h4m5-2v.001M18 12v.001m4-.334v5.243a3.09 3.09 0 0 1-5.854 1.382L16 18a3.618 3.618 0 0 0-3.236-2h-1.528c-1.37 0-2.623.774-3.236 2l-.146.292A3.09 3.09 0 0 1 2 16.91v-5.243A6.667 6.667 0 0 1 8.667 5h6.666A6.667 6.667 0 0 1 22 11.667Z"
      ></path></svg
    >Play Game</span
  >
</button>




================================================
FILE: Buttons/adamgiebl_quiet-duck-78.html
================================================
<button>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M5 13c0-5.088 2.903-9.436 7-11.182C16.097 3.564 19 7.912 19 13c0 .823-.076 1.626-.22 2.403l1.94 1.832a.5.5 0 0 1 .095.603l-2.495 4.575a.5.5 0 0 1-.793.114l-2.234-2.234a1 1 0 0 0-.707-.293H9.414a1 1 0 0 0-.707.293l-2.234 2.234a.5.5 0 0 1-.793-.114l-2.495-4.575a.5.5 0 0 1 .095-.603l1.94-1.832C5.077 14.626 5 13.823 5 13zm1.476 6.696l.817-.817A3 3 0 0 1 9.414 18h5.172a3 3 0 0 1 2.121.879l.817.817.982-1.8-1.1-1.04a2 2 0 0 1-.593-1.82c.124-.664.187-1.345.187-2.036 0-3.87-1.995-7.3-5-8.96C8.995 5.7 7 9.13 7 13c0 .691.063 1.372.187 2.037a2 2 0 0 1-.593 1.82l-1.1 1.039.982 1.8zM12 13a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>
  <span>Launch</span>
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: icon, button */
button {
  display: flex;
  align-items: center;
  font-family: inherit;
  font-weight: 500;
  font-size: 17px;
  padding: 0.8em 1.3em 0.8em 0.9em;
  color: white;
  background: #ad5389;
  background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
  border: none;
  letter-spacing: 0.05em;
  border-radius: 16px;
}

button svg {
  margin-right: 3px;
  transform: rotate(30deg);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

button span {
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

button:hover svg {
  transform: translateX(5px) rotate(90deg);
}

button:hover span {
  transform: translateX(7px);
}
</style>


================================================
FILE: Buttons/adamgiebl_rude-bear-14.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: simple, button, hover */
button {
  position: relative;
  display: inline-block;
  margin: 15px;
  padding: 15px 30px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #725AC1;
  background: transparent;
  cursor: pointer;
  transition: ease-out 0.5s;
  border: 2px solid #725AC1;
  border-radius: 10px;
  box-shadow: inset 0 0 0 0 #725AC1;
}

button:hover {
  color: white;
  box-shadow: inset 0 -100px 0 0 #725AC1;
}

button:active {
  transform: scale(0.9);
}
</style>


================================================
FILE: Buttons/adamgiebl_selfish-turtle-89.html
================================================
<button class="game-button">
    <svg class="play-icon" viewBox="0 0 40 40">
        <path d="M 10,10 L 30,20 L 10,30 z"></path>
    </svg>
    Play Now
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: button */
.game-button {
  background-color: #ff7979;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  box-shadow: 2px 2px 10px #ff7979;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.play-icon {
  width: 24px;
  height: 24px;
  fill: #fff;
  margin-right: 10px;
}

.game-button:hover {
  background-color: #2f3640;
  color: #ff7979;
  box-shadow: 2px 2px 20px #2f3640;
  transform: translateY(-2px);
}

</style>


================================================
FILE: Buttons/adamgiebl_shaggy-grasshopper-91.html
================================================
<button class="cssbuttons-io-button">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"></path></svg>
  <span>Add</span>
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: icon, button */
.cssbuttons-io-button {
  display: flex;
  align-items: center;
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  padding: 0.7em 1.4em 0.7em 1.1em;
  color: white;
  background: #ad5389;
  background: linear-gradient(0deg, rgba(20,167,62,1) 0%, rgba(102,247,113,1) 100%);
  border: none;
  box-shadow: 0 0.7em 1.5em -0.5em #14a73e98;
  letter-spacing: 0.05em;
  border-radius: 20em;
}

.cssbuttons-io-button svg {
  margin-right: 6px;
}

.cssbuttons-io-button:hover {
  box-shadow: 0 0.5em 1.5em -0.5em #14a73e98;
}

.cssbuttons-io-button:active {
  box-shadow: 0 0.3em 1em -0.5em #14a73e98;
}
</style>


================================================
FILE: Buttons/adamgiebl_silent-kangaroo-86.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: button */
button {
  font-size: 18px;
  display: inline-block;
  outline: 0;
  border: 0;
  cursor: pointer;
  will-change: box-shadow,transform;
  background: radial-gradient( 100% 100% at 100% 0%, #89E5FF 0%, #5468FF 100% );
  box-shadow: 0px 0.01em 0.01em rgb(45 35 66 / 40%), 0px 0.3em 0.7em -0.01em rgb(45 35 66 / 30%), inset 0px -0.01em 0px rgb(58 65 111 / 50%);
  padding: 0 2em;
  border-radius: 0.3em;
  color: #fff;
  height: 2.6em;
  text-shadow: 0 1px 0 rgb(0 0 0 / 40%);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

button:hover {
  box-shadow: 0px 0.1em 0.2em rgb(45 35 66 / 40%), 0px 0.4em 0.7em -0.1em rgb(45 35 66 / 30%), inset 0px -0.1em 0px #3c4fe0;
  transform: translateY(-0.1em);
}

button:active {
  box-shadow: inset 0px 0.1em 0.6em #3c4fe0;
  transform: translateY(0em);
}
</style>


================================================
FILE: Buttons/adamgiebl_smart-moth-68.html
================================================
<button>
  <div class="svg-wrapper-1">
    <div class="svg-wrapper">
      <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 0h24v24H0z" fill="none"></path>
        <path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z" fill="currentColor"></path>
      </svg>
    </div>
  </div>
  <span>Send</span>
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: icon, animation, button, send, fly */
button {
  font-family: inherit;
  font-size: 20px;
  background: royalblue;
  color: white;
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s;
}

button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

button:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

button:hover svg {
  transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

button:hover span {
  transform: translateX(5em);
}

button:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}


</style>


================================================
FILE: Buttons/adamgiebl_soft-gecko-85.html
================================================
<button> <span class="text">Button</span>
  <span class="blob"></span>
  <span class="blob"></span>
  <span class="blob"></span>
  <span class="blob"></span>
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: flashy, pink, gradient, button */
button {
  position: relative;
  font-family: inherit;
  font-size: 18px;
  border-radius: 40em;
  width: 8em;
  height: 3em;
  z-index: 1;
  color: white;
  overflow: hidden;
  border: none;
}

button .text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 3em;
  border-radius: 40em;
  border: none;
  background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25));
  z-index: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

button .blob {
  position: absolute;
  z-index: -1;
  border-radius: 5em;
  width: 5em;
  height: 3em;
  transition: transform .3s ease-in-out, background .3s ease-in-out;
}

button .blob:nth-child(2) {
  left: 0em;
  top: 0;
  background: #ff930f;
}

button .blob:nth-child(3) {
  left: 1.8em;
  top: 0;
  z-index: -1;
  background: #bf0fff;
}

button .blob:nth-child(4) {
  left: 4em;
  top: -1em;
  background: #ff1b6b;
}

button .blob:nth-child(5) {
  left: 4.3em;
  top: 1.6em;
  background: #0061ff;
}

button:hover .blob:nth-child(2) {
  background: #0061ff;
}

button:hover .blob:nth-child(3) {
  background: #ff1b6b;
}

button:hover .blob:nth-child(4) {
  background: #bf0fff;
}

button:hover .blob:nth-child(5) {
  background: #ff930f;
}

button:hover .blob {
  transform: scale(1.3);
}

button:active {
  border: 2px solid white;
}




</style>


================================================
FILE: Buttons/adamgiebl_ugly-robin-41.html
================================================
<button> I'M READY
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: button */
button {
  --green: #1BFD9C;
  font-size: 15px;
  padding: 0.7em 2.7em;
  letter-spacing: 0.06em;
  position: relative;
  font-family: inherit;
  border-radius: 0.6em;
  overflow: hidden;
  transition: all 0.3s;
  line-height: 1.4em;
  border: 2px solid var(--green);
  background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%,transparent 60% , rgba(27, 253, 156, 0.1) 100%);
  color: var(--green);
  box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1);
}

button:hover {
  color: #82ffc9;
  box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.6), 0 0 9px 3px rgba(27, 253, 156, 0.2);
}

button:before {
  content: "";
  position: absolute;
  left: -4em;
  width: 4em;
  height: 100%;
  top: 0;
  transition: transform .4s ease-in-out;
  background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%,rgba(27, 253, 156, 0.1) 60% , transparent 100%);
}

button:hover:before {
  transform: translateX(15em);
}
</style>


================================================
FILE: Buttons/adamgiebl_wise-moth-35.html
================================================
<button class="button">
  <div class="button-overlay"></div>
  <span>Button <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 53 58" height="58" width="53">
<path stroke-width="9" stroke="currentColor" d="M44.25 36.3612L17.25 51.9497C11.5833 55.2213 4.5 51.1318 4.50001 44.5885L4.50001 13.4115C4.50001 6.86824 11.5833 2.77868 17.25 6.05033L44.25 21.6388C49.9167 24.9104 49.9167 33.0896 44.25 36.3612Z"></path>
</svg></span>
  
</button>
<style>
/* From Uiverse.io by adamgiebl - Tags: icon, button, smooth, dark, luxury, silver */
/* Inspired by twitter.com/marina_uiux */

.button {
  font-size: 17px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgb(56, 56, 56) 0%, rgb(36, 36, 36) 66%, rgb(41, 41, 41) 100%);
  color: rgb(218, 218, 218);
  border: none;
  padding: 2px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.button span {
  border-radius: 10px;
  padding: 0.8em 1.3em;
  padding-right: 1.2em;
  text-shadow: 0px 0px 20px #4b4b4b;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  transition: all 0.3s;
  background-color: rgb(29, 29, 29);
  background-image: radial-gradient(at 95% 89%, rgb(15, 15, 15) 0px, transparent 50%), radial-gradient(at 0% 100%, rgb(17, 17, 17) 0px, transparent 50%), radial-gradient(at 0% 0%, rgb(29, 29, 29) 0px, transparent 50%);
}

.button:hover span {
  background-color: rgb(26, 25, 25);
}

.button-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-conic-gradient(rgb(48, 47, 47) 0.0000001%, rgb(51, 51, 51) 0.000104%) 60% 60%/600% 600%;
  filter: opacity(10%) contrast(105%);
  -webkit-filter: opacity(10%) contrast(105%);
}

.button svg {
  width: 15px;
  height: 15px;
}
</style>


================================================
FILE: Buttons/adilsarfraz02_short-tiger-98.html
================================================
<!-- From Uiverse.io by adilsarfraz02 - Tags: button, blur, anchor, alt  -->
<button class="cursor-pointer bg-gradient-to-tr from-cyan-200 to-blue-500 text-white text-xl font-sans rounded-2xl hover:bg-gradient-to-tr hover:from-blue-200 hover: hover:to-cyan-500 p-3">
  Hover me
</button>



================================================
FILE: Buttons/aguerquin_pretty-bat-39.html
================================================
<div class="button-icon">
  <div class="icon">
    <svg viewBox="0 0 24 24">
      <path
        d="M12 0.296997C5.37 0.296997 0 5.67 0 12.297C0 17.6 3.438 22.097 8.205 23.682C8.805 23.795 9.025 23.424 9.025 23.105C9.025 22.82 9.015 22.065 9.01 21.065C5.672 21.789 4.968 19.455 4.968 19.455C4.422 18.07 3.633 17.7 3.633 17.7C2.546 16.956 3.717 16.971 3.717 16.971C4.922 17.055 5.555 18.207 5.555 18.207C6.625 20.042 8.364 19.512 9.05 19.205C9.158 18.429 9.467 17.9 9.81 17.6C7.145 17.3 4.344 16.268 4.344 11.67C4.344 10.36 4.809 9.29 5.579 8.45C5.444 8.147 5.039 6.927 5.684 5.274C5.684 5.274 6.689 4.952 8.984 6.504C9.944 6.237 10.964 6.105 11.984 6.099C13.004 6.105 14.024 6.237 14.984 6.504C17.264 4.952 18.269 5.274 18.269 5.274C18.914 6.927 18.509 8.147 18.389 8.45C19.154 9.29 19.619 10.36 19.619 11.67C19.619 16.28 16.814 17.295 14.144 17.59C14.564 17.95 14.954 18.686 14.954 19.81C14.954 21.416 14.939 22.706 14.939 23.096C14.939 23.411 15.149 23.786 15.764 23.666C20.565 22.092 24 17.592 24 12.297C24 5.67 18.627 0.296997 12 0.296997Z"
        fill="#222229"
      ></path>
    </svg>
  </div>
  <div class="cube">
    <span class="side front">hover me</span>
    <span class="side top">check it on github</span>
  </div>
</div>

<style>
/* From Uiverse.io by aguerquin  - Tags: button, hover, cube, github, btn, hover button, 3d button, button hover effect  */
.button-icon {
  display: flex;
  border: 3px #fff solid;
  width: fit-content;
  height: fit-content;
  cursor: pointer;
}

.icon {
  background-color: #fff;
  padding: 10px 10px 5px 10px;
}

.icon svg {
  width: 25px;
  height: 25px;
}

.cube {
  transition: all 0.4s;
  transform-style: preserve-3d;
  width: 200px;
  height: 20px;
}

.button-icon:hover {
  border-color: #ff98a2;
}

.button-icon:hover .cube {
  transform: rotateX(90deg);
}

.side {
  position: absolute;
  height: 47px;
  width: 200px;
  display: flex;
  font-size: 0.8em;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
}

.top {
  background: #ff98a2;
  color: #fff;
  transform: rotateX(-90deg) translate3d(0, 13.5px, 2em);
}

.front {
  background: #222229;
  color: #fff;
  transform: translate3d(0, 0, 1em);
}

</style>
    

================================================
FILE: Buttons/ahmed150up_brave-donkey-68.html
================================================
<!-- From Uiverse.io by ahmed150up - Tags: button, btn -->
<button class="hover:animate-bounce relative overflow-hidden bg-white text-gray-700 font-semibold py-2 px-4 rounded-lg shadow-md hover:scale-105 active:bg-gray-300 focus:outline-none">
  <span class="absolute inset-0 flex items-center justify-center">
  </span>
  Button
</button>



================================================
FILE: Buttons/ahmed150up_moody-turtle-89.html
================================================
<button class="btn-save">
    <svg viewBox="0 0 384 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 48C0 21.5 21.5 0 48 0l0 48V441.4l130.1-92.9c8.3-6 19.6-6 27.9 0L336 441.4V48H48V0H336c26.5 0 48 21.5 48 48V488c0 9-5 17.2-13 21.3s-17.6 3.4-24.9-1.8L192 397.5 37.9 507.5c-7.3 5.2-16.9 5.9-24.9 1.8S0 497 0 488V48z"></path></svg>
    
  </button>

<style>
/* From Uiverse.io by ahmed150up - Tags: save, btn */
.btn-save {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f2f2f2;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-save:hover {
  background-color: #ddd;
}

.icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.icon-path {
  fill: #333;
  transition: fill 0.3s ease;
}

.btn-save:hover .icon-path {
  fill: #888;
}

</style>


================================================
FILE: Buttons/ahmedgamal-hub_yellow-cheetah-82.html
================================================
<button class="glow-on-hover" type="button">HOVER ME, THEN CLICK ME!</button>
<style>
/* From Uiverse.io by ahmedgamal-hub - Tags: button, animated, click animation, 2FA */
.glow-on-hover {
  width: 220px;
  height: 50px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #000
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}

</style>


================================================
FILE: Buttons/ahmedrizk101_green-snake-95.html
================================================
<button class="button">
click me
</button>
<style>
/* From Uiverse.io by ahmedrizk101 - Tags: button, #button, 3d button */
.button {
  width: 200px;
  height: 40px;
  background: yellow;
  box-shadow: -6px 6px 0 0 hsl(60, 100%, 40%);
  border: none;
  outline: none;
  position: relative;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: bold;
}

.button:active {
  box-shadow: -3px 3px 0 0 hsl(60, 100%, 40%);
  top: 3px;
  left: -3px;
  background-color: hsl(60, 100%, 45%);
}

.button::before {
  content: '';
  position: absolute;
  background: none;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-right: 6px solid hsl(60, 100%, 40%);
  border-left-width: 0;
  top: 0;
  left: -6px;
}

.button:active::before {
  border: 3px solid transparent;
  border-right: 3px solid hsl(60, 100%, 40%);
}

.button::after {
  content: '';
  position: absolute;
  background: none;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top: 6px solid hsl(60, 100%, 40%);
  border-bottom-width: 0;
  bottom: -6px;
  right: 0;
}

.button:active:after {
  border: 3px solid transparent;
  border-top: 3px solid hsl(60, 100%, 40%);
}

</style>


================================================
FILE: Buttons/ahmedyasserdev_cold-ape-21.html
================================================
<button class="button">
  Join Today
  <p>→</p>
</button>

<style>
/* From Uiverse.io by ahmedyasserdev  - Tags: button */
.button {
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  background-color: #9b59b6;
  border: none;
  padding: 15px 40px;
  border-radius: 12px;
  box-shadow:
    0px 5px #7d3c98,
    10px 14px 8px rgba(125, 60, 152, 0.4);
  cursor: pointer;
  transform: rotate3d(1, 1, 1, -10deg);
  display: flex;
  gap: 8px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px #7d3c98,
    0 6px 12px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: translateY(2px);
  box-shadow:
    0 2px #7d3c98,
    0 4px 8px rgba(0, 0, 0, 0.2);
}

.button:focus {
  outline: none;
}

</style>
    

================================================
FILE: Buttons/akshat-patel28_brown-panther-60.html
================================================
  <div class="button-container">
      <button class="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024" stroke-width="0" fill="currentColor" stroke="currentColor" class="icon">
          <path d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9 0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"></path>
        </svg>
      </button>
      <button class="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke="currentColor" class="icon">
          <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linejoin="round" stroke-linecap="round"></path>
        </svg>
      </button>
      <button class="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="0" fill="currentColor" stroke="currentColor" class="icon">
          <path d="M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z"></path>
        </svg>
      </button>

      <button class="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke="currentColor" class="icon">
          <circle r="1" cy="21" cx="9"></circle>
          <circle r="1" cy="21" cx="20"></circle>
          <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
        </svg>
      </button>
    </div>
<style>
/* From Uiverse.io by akshat-patel28 - Tags: icon, button, html, css, menuicon, navbar */
.button-container {
  display: flex;
  background-color: rgba(245, 73, 144);
  width: 250px;
  height: 40px;
  align-items: center;
  justify-content: space-around;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px,
        rgba(245, 73, 144, 0.5) 5px 10px 15px;
}

.button {
  outline: 0 !important;
  border: 0 !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all ease-in-out 0.3s;
  cursor: pointer;
}

.button:hover {
  transform: translateY(-3px);
}

.icon {
  font-size: 20px;
}
</style>


================================================
FILE: Buttons/akshat-patel28_grumpy-lizard-55.html
================================================
<div>
<button class="button">
  Hover Me!
</button>
<span class="backdrop"></span>
</div>
<style>
/* From Uiverse.io by akshat-patel28 - Tags: glassmorphism, button, square, css, hover effect, css effect, hover button */
.button {
  width: 90px;
  height: 90px;
  border-radius: 15px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.1);
  border: 0px;
  cursor: pointer;
  outline: 0px;
  padding: 0 2px;
  font-weight: 600;
  font-size: 18px;
  color: white;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.backdrop {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: rgb(36, 33, 228);
  z-index: -1;
  top: 50%;
  left: 50%;
  border-radius: 15px;
  transform: translateX(-50%) translateY(-50%);
  transition: all ease-in-out 0.5s;
}

.button:hover + .backdrop {
  top: 48%;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  transform: rotate(15deg) translateX(-50%) translateY(-50%);
}

.button:active,.button:active +.backdrop {
  box-shadow: none;
}
</style>


================================================
FILE: Buttons/albertofanini-prog_hard-wasp-8.html
================================================
<div id="pulsa" class="pulsa">
  <button id="cta" class="cta">
    Spatial button<div class="star a"></div>
  <div class="star b"></div>
  <div class="star c"></div>
  <div class="star d"></div>
  <div class="star e"></div>
  <div class="star f"></div>
  <div class="star g"></div>
  <svg version="1.1" viewBox="0 0 1024 1024" width="24px" class="rocket"><path fill="#3A7EB9" d="M662.72 462.784l136.448 169.408v173.248l-136.448-48.32zM342.72 457.344L206.272 626.816v173.248l136.448-48.384z"></path><path fill="#D48171" d="M570.688 418.688l-142.848 1.152a266.496 266.496 0 0 1-20.288-0.576l3.712 448.64c0.256 28.928 94.272 130.048 94.272 130.048s93.888-102.656 93.632-131.584l-3.712-448.96a344.64 344.64 0 0 1-24.768 1.28z"></path><path fill="#E9DF92" d="M531.456 599.296l-63.04 0.576c-3.008 0-5.952-0.064-8.96-0.384l2.176 257.792c0.128 16.64 41.728 74.816 41.728 74.816s41.344-58.944 41.28-75.52l-2.176-257.92c-3.648 0.384-7.296 0.64-11.008 0.64z"></path><path fill="#B5D5EB" d="M554.304 93.568a324.352 324.352 0 0 0-110.592 1.728L342.72 240.768v584.512c13.824-0.96 27.968-1.536 42.368-1.536h245.248c11.84 0 23.36 0.384 34.816 1.024V253.312L554.304 93.568z"></path><path fill="#3A7EB9" d="M541.44 94.144L500.416 35.008l-45.696 59.136v29.504h89.024v-29.504zM459.456 288.64h88.96v88.896h-88.96zM459.456 467.456h88.96v88.96h-88.96zM459.456 634.176h88.96v88.896h-88.96zM364.928 788.736h277.76v44.352h-277.76z"></path></svg>
  </button>
  
</div>
<style>
/* From Uiverse.io by albertofanini-prog - Tags: button */
.pulsa {
  animation: pulsa 1.4s infinite;
  min-width: 200px;
  width: fit-content;
  border-radius: 9999px;
  /* overflow: hidden; */
}

.cta {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background-color: none;
  border-radius: 9999px;
  padding: 8px 16px;
  color: white;
  font-size: 15px;
  background: linear-gradient(109.6deg, #090979 11.2%, #9006A1 53.7%, #090979 100.2%);
  letter-spacing: 0.08em;
  font-weight: 800;
  position: relative;
}

.cta:active {
  animation: pulsa-active .4s infinite;
}

.star {
  width: 2px;
  height: 2px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  animation: pulsa-stella 1.8s infinite;
  transition: all .8s ease-in-out;
}

.star.a {
  top: 8px;
  left: 6px;
}

.star.b {
  top: 2px;
  left: 16px;
}

.star.c {
  top: 18px;
  left: 8px;
}

.star.d {
  top: 14px;
  left: 20px;
}

.star.e {
  top: 30px;
  left: 8px;
}

.star.f {
  top: 24px;
  left: 24px;
}

.star.g {
  top: 10px;
  left: 32px;
}

.pulsa:hover .star.a {
  transform: translate3d(0px, 8px, 0);
}

.pulsa:hover .star.b {
  transform: translate3d(-4px, 6px, 0);
}

.pulsa:hover .star.c {
  transform: translate3d(14px, -8px, 0);
}

.pulsa:hover .star.d {
  transform: translate3d(16px, -2px, 0);
}

.pulsa:hover .star.e {
  transform: translate3d(58px, -20px, 0);
}

.pulsa:hover .star.f {
  transform: translate3d(34px, 2px, 0);
}

.pulsa:hover .star.g {
  transform: translate3d(10px, 16px, 0);
}

.rocket {
  position: absolute;
  top: 8px;
  right: 16px;
  z-index: -1;
  transform: rotate(180deg);
  transition: all .3s ease-in-out;
}

.pulsa:hover .rocket {
  z-index: auto;
  animation: muovi-razzo 1.8s linear;
  transform: rotate(0deg);
}

@keyframes pulsa {
  0% {
    box-shadow: 0 0 0 0 #9006A1;
  }

  100% {
    box-shadow: 0 0 0 8px #fbb32f01;
  }
}

@keyframes pulsa-stella {
  0% {
    box-shadow: 0 0 0 0 #ffffff;
  }

  100% {
    box-shadow: 0 0 0 4px #fbb32f01;
  }
}

@keyframes muovi-razzo {
  from {
    transform: rotate(180deg);
  }

  25% {
    transform: translate3d(40px, 32px, 0);
  }

  50% {
    transform: translate3d(32px, -60px, 0);
  }

  75% {
    transform: translate3d(0px, -60px, 0) rotate(0);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes pulsa-active {
  0% {
    box-shadow: 0 0 0 0 #9006A1;
  }

  100% {
    box-shadow: 0 0 0 16px #fbb32f01;
  }
}
</style>


================================================
FILE: Buttons/alessandrodesign_empty-rabbit-96.html
================================================
<div class="container">
  <button>
  Button
  </button>
</div>
<style>
/* From Uiverse.io by alessandrodesign - Tags: button */
button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid #26c4c3;
  border-right-color: transparent;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 1), 0 0 10px rgb(194,255,255);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 1), 0 0 10px rgb(194,255,255);
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 20%, 100% 20%, 85% 100%, 80% 100%, 95% 20%, 50% 20%, 30% 0);
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 20%, 100% 20%, 85% 100%, 80% 100%, 95% 20%, 50% 20%, 30% 0);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  width: 150px;
  height: 55px;
  font-size: 1.5rem;
  color: white;
  text-shadow: 0 1px 1px black;
  position: relative;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

button:hover {
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 20%, 100% 20%, 100% 100%, 100% 100%, 100% 20%, 50% 20%, 30% 0);
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 20%, 100% 20%, 100% 100%, 100% 100%, 100% 20%, 50% 20%, 30% 0);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

button::after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 50%;
  height: 5px;
  background-color: rgb(194,255,255);
  -webkit-box-shadow: 0 0 5px rgb(194,255,255);
  box-shadow: 0 0 5px rgb(194,255,255);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 2;
  -webkit-animation: btn 1s infinite ease-in-out;
  animation: btn 1s infinite ease-in-out;
}

button::before {
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 5px;
  background-color: rgb(194,255,255);
  -webkit-box-shadow: 0 0 5px rgb(194,255,255);
  box-shadow: 0 0 5px rgb(194,255,255);
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%);
  z-index: 3;
  animation: btn_51 1s infinite ease-in-out reverse;
}

@keyframes btn_51 {
  0%,100% {
    width: 100%;
  }

  25%,75% {
    width: 0;
  }

  50% {
    width: 50%;
  }
}
</style>


================================================
FILE: Buttons/alexmaracinaru_brown-bobcat-65.html
================================================
<button class="cta">
  <span>Hover me</span>
  <svg viewBox="0 0 13 10" height="10px" width="15px">
    <path d="M1,5 L11,5"></path>
    <polyline points="8 1 12 5 8 9"></polyline>
  </svg>
</button>
<style>
/* From Uiverse.io by alexmaracinaru - Tags: button */
.cta {
 position: relative;
 margin: auto;
 padding: 12px 18px;
 transition: all 0.2s ease;
 border: none;
 background: none;
}

.cta:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 border-radius: 50px;
 background: #b1dae7;
 width: 45px;
 height: 45px;
 transition: all 0.3s ease;
}

.cta span {
 position: relative;
 font-family: "Ubuntu", sans-serif;
 font-size: 18px;
 font-weight: 700;
 letter-spacing: 0.05em;
 color: #234567;
}

.cta svg {
 position: relative;
 top: 0;
 margin-left: 10px;
 fill: none;
 stroke-linecap: round;
 stroke-linejoin: round;
 stroke: #234567;
 stroke-width: 2;
 transform: translateX(-5px);
 transition: all 0.3s ease;
}

.cta:hover:before {
 width: 100%;
 background: #b1dae7;
}

.cta:hover svg {
 transform: translateX(0);
}

.cta:active {
 transform: scale(0.95);
}
</style>


================================================
FILE: Buttons/alexmaracinaru_empty-moose-12.html
================================================
<button class="cta">
    <span class="hover-underline-animation"> Shop now </span>
    <svg viewBox="0 0 46 16" height="10" width="30" xmlns="http://www.w3.org/2000/svg" id="arrow-horizontal">
        <path transform="translate(30)" d="M8,0,6.545,1.455l5.506,5.506H-30V9.039H12.052L6.545,14.545,8,16l8-8Z" data-name="Path 10" id="Path_10"></path>
    </svg>
</button>
<style>
/* From Uiverse.io by alexmaracinaru - Tags: button, shop */
.cta {
  border: none;
  background: none;
}

.cta span {
  padding-bottom: 7px;
  letter-spacing: 4px;
  font-size: 14px;
  padding-right: 15px;
  text-transform: uppercase;
}

.cta svg {
  transform: translateX(-8px);
  transition: all 0.3s ease;
}

.cta:hover svg {
  transform: translateX(0);
}

.cta:active svg {
  transform: scale(0.9);
}

.hover-underline-animation {
  position: relative;
  color: black;
  padding-bottom: 20px;
}

.hover-underline-animation:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000000;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.cta:hover .hover-underline-animation:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
</style>


================================================
FILE: Buttons/alexmaracinaru_perfect-panda-77.html
================================================
<button>
    <span>Continue</span>
    <svg width="34" height="34" viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="37" cy="37" r="35.5" stroke="black" stroke-width="3"></circle>
        <path d="M25 35.5C24.1716 35.5 23.5 36.1716 23.5 37C23.5 37.8284 24.1716 38.5 25 38.5V35.5ZM49.0607 38.0607C49.6464 37.4749 49.6464 36.5251 49.0607 35.9393L39.5147 26.3934C38.9289 25.8076 37.9792 25.8076 37.3934 26.3934C36.8076 26.9792 36.8076 27.9289 37.3934 28.5147L45.8787 37L37.3934 45.4853C36.8076 46.0711 36.8076 47.0208 37.3934 47.6066C37.9792 48.1924 38.9289 48.1924 39.5147 47.6066L49.0607 38.0607ZM25 38.5L48 38.5V35.5L25 35.5V38.5Z" fill="black"></path>
    </svg>
</button>
<style>
/* From Uiverse.io by alexmaracinaru - Tags: icon, button */
button {
  cursor: pointer;
  font-weight: 700;
  font-family: Helvetica,"sans-serif";
  transition: all .2s;
  padding: 10px 20px;
  border-radius: 100px;
  background: #cfef00;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  font-size: 15px;
}

button:hover {
  background: #c4e201;
}

button > svg {
  width: 34px;
  margin-left: 10px;
  transition: transform .3s ease-in-out;
}

button:hover svg {
  transform: translateX(5px);
}

button:active {
  transform: scale(0.95);
}


</style>


================================================
FILE: Buttons/alexreyes091_soft-crab-61.html
================================================
<button class="btn"> Button
</button>
<style>
/* From Uiverse.io by alexreyes091 - Tags: button */
.btn {
 padding: 1rem 2rem;
 font-weight: 700;
 background: rgb(255, 255, 255);
 color: blueviolet;
 border-radius: .5rem;
 border-bottom: 2px solid blueviolet;
 border-right: 2px solid blueviolet;
 border-top: 2px solid white;
 border-left: 2px solid white;
 transition-duration: 1s;
 transition-property: border-top, 
    border-left, 
    border-bottom,
    border-right,
    box-shadow;
}

.btn:hover {
 border-top: 2px solid blueviolet;
 border-left: 2px solid blueviolet;
 border-bottom: 2px solid rgb(238, 103, 238);
 border-right: 2px solid rgb(238, 103, 238);
 box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px;
}
</style>


================================================
FILE: Buttons/alexroumi_shy-sloth-91.html
================================================
<button> Click me!
</button>
<style>
/* From Uiverse.io by alexroumi - Tags: button */
button {
 padding: 15px 25px;
 border: unset;
 border-radius: 15px;
 color: #212121;
 z-index: 1;
 background: #e8e8e8;
 position: relative;
 font-weight: 1000;
 font-size: 17px;
 -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
 box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
 transition: all 250ms;
 overflow: hidden;
}

button::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 0;
 border-radius: 15px;
 background-color: #212121;
 z-index: -1;
 -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
 box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
 transition: all 250ms
}

button:hover {
 color: #e8e8e8;
}

button:hover::before {
 width: 100%;
}
</style>


================================================
FILE: Buttons/alkanoidev_wonderful-cheetah-68.html
================================================
<button>
      <svg>
      <filter id="pedroduarteisalegend">
        <feTurbulence stitchTiles="stitch" numOctaves="4" baseFrequency="0.5" type="fractalNoise"></feTurbulence>
      </filter>
      <rect filter="url(#pedroduarteisalegend)" height="100%" width="100%"></rect>
    </svg>
      Button
</button>
<style>
/* From Uiverse.io by alkanoidev - Tags: button */
button {
  position: relative;
  padding-top: 0.75rem;
  padding-right: 1.5rem;
  padding-bottom: 0.75rem;
  padding-left: 1.5rem;
  transition: all 0.3s;
  border-radius: 0.5rem;
  color: #000;
  font-weight: bold;
  font-size: 1.2rem;
  border: none;
  background-image: linear-gradient(to bottom left, #68ecc0, #63aff1, #9b6fff);
}

button:hover {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}

button svg {
  pointer-events: none;
  opacity: 100;
  border-radius: 0.5rem;
  mix-blend-mode: soft-light;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
</style>


================================================
FILE: Buttons/alshahwan_good-dolphin-78.html
================================================
<button>
    <p>Text me</p>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
        <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"></path>
    </svg>
</button>
<style>
/* From Uiverse.io by alshahwan - Tags: button */
button {
  background-color: #fff;
  border: 1px solid #25D366;
  padding: 5px;
  position: relative;
  width: 6.2em;
  height: 2em;
  transition: 0.5s;
  font-size: 17px;
  border-radius: 0.4em;
}

button p {
  position: absolute;
  top: 0.4em;
  left: 1.15em;
  margin: 0;
  padding: 0;
  transition: .5s;
  color: #25D366;
}

button svg {
  position: absolute;
  top: 0.45em;
  right: 0.5em;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  height: 1em;
  fill: #fff
}

button:hover p {
  left: 0.5em;
  color: #fff
}

button:hover svg {
  opacity: 1;
}

button:hover {
  background-color: #25D366;
}

</style>


================================================
FILE: Buttons/alshahwan_sour-baboon-86.html
================================================
<button>
    <p>Follow me</p>
    <svg viewBox="0 0 16 16" class="bi bi-whatsapp" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"></path>
    </svg>
</button>
<style>
/* From Uiverse.io by alshahwan - Tags: button, linkedin, follow */
/* From uiverse.io by @alshahwan */
/* From uiverse.io by @alshahwan */
button {
  background-color: #fff;
  border: 1px solid #0077b5;
  padding: 5px;
  position: relative;
  width: 7.2em;
  height: 2em;
  transition: 0.5s;
  font-size: 17px;
  border-radius: 0.4em;
}

button p {
  position: absolute;
  top: 0.4em;
  left: 1.2em;
  margin: 0;
  padding: 0;
  transition: .5s;
  color: #0077b5;
}

button svg {
  position: absolute;
  top: 0.45em;
  right: 0.5em;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  height: 1em;
  fill: #fff
}

button:hover p {
  left: 0.6em;
  color: #fff
}

button:hover svg {
  opacity: 1;
}

button:hover {
  background-color: #0077b5;
}

</style>


================================================
FILE: Buttons/alshahwan_ugly-emu-27.html
================================================
<button>
    <p>Follow me</p>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
        <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
    </svg>
</button>
<style>
/* From Uiverse.io by alshahwan - Tags: instagram, button */
/* From uiverse.io by @alshahwan */
button {
  background-color: #fff;
  border: 1px solid #bc2a8d;
  padding: 5px;
  position: relative;
  width: 7.2em;
  height: 2em;
  transition: 0.5s;
  font-size: 17px;
  border-radius: 0.4em;
}

button p {
  position: absolute;
  top: 0.4em;
  left: 1.2em;
  margin: 0;
  padding: 0;
  transition: .5s;
  color: #bc2a8d;
}

button svg {
  position: absolute;
  top: 0.45em;
  right: 0.5em;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  height: 1em;
  fill: #fff
}

button:hover p {
  left: 0.6em;
  color: #fff
}

button:hover svg {
  opacity: 1;
}

button:hover {
  background-color: #bc2a8d;
}

</style>


================================================
FILE: Buttons/amerfad_fast-moose-81.html
================================================
<button class="animated-button">Button</button>

<style>
/* From Uiverse.io by amerfad - Tags: button */
.animated-button {
  background-color: #ff6b6b;
  border: none;
  color: #ffffff;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 22px;
  margin: 4px 2px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 2px;
  border-radius: 50px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

.animated-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
}

.animated-button:hover:after {
  width: 210px;
  height: 200px;
  opacity: 1;
}

.animated-button:focus {
  outline: none;
}

.animated-button:active {
  transform: translateY(2px);
  box-shadow: none;
}

</style>


================================================
FILE: Buttons/amralashi_fat-mule-63.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by amralashi - Tags: button */
button {
  width: 10rem;
  height: 3rem;
  background: linear-gradient(135deg, purple, pink, blue, aqua);
  border-radius: 3rem;
  font-size: 16px;
  font-weight: 600;
  color: white;
  border: none;
}

button:hover {
  background: linear-gradient(100deg, purple, pink, blue, aqua);
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_afraid-squid-51.html
================================================
<button class="button">
  Let`s go →
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: animation, button, arrow, submit, confirm */
.button {
  --font-color: #323232;
  --bg-color: #fff;
  --main-color: #323232;
  width: 120px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 17px;
  font-weight: 600;
  color: var(--font-color);
  cursor: pointer;
}

.button:active {
  box-shadow: 0px 0px var(--main-color);
  transform: translate(3px, 3px);
}

</style>


================================================
FILE: Buttons/andrew-demchenk0_angry-cow-54.html
================================================
<button class="button">
  <svg class="svg-icon" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g stroke="#ff2849" stroke-linecap="round" stroke-width="2"><rect height="14" rx="1.5" width="3" x="15" y="5"></rect><rect height="14" rx="1.5" width="3" x="6" y="5"></rect></g></svg>
  <span class="label">Pause</span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: icon, animation, red, button, opacity, pause, big */
.button {
  width: 122px;
  height: 60px;
  padding: 18px 22px 18px 20px;
  gap: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ff284818;
  border-radius: 16px;
  border: none;
  cursor: pointer;
}

.label {
  font-family: sans-serif;
  height: 23px;
  font-size: 19px;
  line-height: 24px;
  color: #FF2849;
}

.button:hover {
  background: #ff284839;
}

.button:hover .svg-icon {
  animation: pulse 0.7s linear infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.13);
  }

  100% {
    transform: scale(1);
  }
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_chatty-ape-15.html
================================================
<!-- From Uiverse.io by andrew-demchenk0 - Tags: button, send, hover effect, click effect, click animation, tailwind -->
<button class="group relative z-1 bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br flex items-center font-medium text-white transition-all duration-200 ease-in-out rounded-lg px-4 py-2 active:scale-95 active:shadow-inner">
  <div class="absolute -z-10 -inset-0.5 bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-xl group-hover:opacity-100 animate-pulse group-hover:inset-10"></div>
  <div class="svg-wrapper transform group-hover:translate-x-5 group-hover:rotate-45 transition-all duration-400">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="">
      <path fill="none" d="M0 0h24v24H0z"></path>
      <path fill="#fff" d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"></path>
    </svg>
  </div>
  <span class="ml-1 text-white transition-all duration-300 group-hover:text-transparent">Send</span>
</button>








================================================
FILE: Buttons/andrew-demchenk0_chatty-quail-30.html
================================================
<button>
<svg data-name="Layer 1" id="aa26e0be-9258-4431-8251-1228b9aad27b" viewBox="0 0 750 750" xmlns="http://www.w3.org/2000/svg"><defs></defs><path class="fadd0b15-a3b0-4734-9170-bc99721260e1" d="M310.41,517.86c133.11,0,205.5-109.56,205.5-205.5v-9.79a159.14,159.14,0,0,0,35.23-37.18A162.88,162.88,0,0,1,510,277.16,76.14,76.14,0,0,0,541.35,238a179.78,179.78,0,0,1-45,17.61,69.88,69.88,0,0,0-52.84-23.51,73.54,73.54,0,0,0-72.44,72.44,38.14,38.14,0,0,0,2,15.65A202.33,202.33,0,0,1,224.3,243.89,74.93,74.93,0,0,0,214.52,281a77.73,77.73,0,0,0,31.31,60.66,66,66,0,0,1-33.27-9.79h0a71.54,71.54,0,0,0,58.74,70.46,60.34,60.34,0,0,1-19.57,1.95,33.28,33.28,0,0,1-13.7-1.95,74.14,74.14,0,0,0,68.5,50.88,147.72,147.72,0,0,1-90,31.31,54.14,54.14,0,0,1-17.64-1.91,184.79,184.79,0,0,0,111.55,35.23" data-name="Path 2" id="a6d1175e-77c9-496c-afd2-62b5f211431b"></path></svg>
  <span class="label">Tweet</span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: animation, blue, twitter, button, hover effect, tweet */
button {
  width: 100px;
  height: 32px;
  background-color: #55acee;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 8px;
  justify-content: space-between;
  transition: all 0.3s;
}

button:hover {
  opacity: 0.85;
  transform: translateY(-4px);
}

button .label {
  font-size: 12px;
  line-height: 32px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 auto;
}

button svg {
  fill: #fff;
  width: 30px;
  height: 30px;
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_dry-rabbit-60.html
================================================
<button> 
  <span class="icon"><svg viewBox="0 0 24 24" height="33" width="33" xmlns="http://www.w3.org/2000/svg"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg></span>
  <span class="text1">Follow me</span>
  <span class="text2">1,2k</span> 
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: button */
button {
  position: relative;
  width: 130px;
  height: 35px;
  border-radius: 30px;
  background-color: white;
  border: 1px #000000 solid;
  overflow: hidden;
}

.text1 {
  font-size: 17px;
  font-weight: 700;
  margin-left: 22%;
}

.text2 {
  position: absolute;
  top: 25%;
  left: -50px;
  font-weight: 700;
  font-size: 14px;
  color: white;
}

.icon {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s;
}

.icon::before {
  position: absolute;
  left: -100px;
  top: 0;
  z-index: -1;
  content: '';
  width: 130px;
  height: 33px;
  border-radius: 30px;
  background-color: #000000;
}

.icon::after {
  position: absolute;
  left: 0.5px;
  top: 0.5px;
  z-index: -1;
  content: '';
  width: 32px;
  height: 32px;
  border-radius: 100%;
  background-color: white;
}

button:hover .icon {
  transform: translateX(97.5px);
  transition: transform 0.5s;
}

button:hover .text2 {
  transform: translateX(100px);
  transition: transform 0.6s;
}

button:active {
  transform: scale(1.03);
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_fluffy-fly-35.html
================================================
<button>
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="pokeball"><path stroke="#000" fill="#fe0505" d="m26.425 16.455a10.925 10.925 0 0 1 -10.925 10.925 10.925 10.925 0 0 1 -10.925-10.925 10.925 10.925 0 0 1 10.925-10.925 10.925 10.925 0 0 1 10.925 10.925z"></path><path stroke="#000" fill-rule="evenodd" fill="#fff" d="m26.245 17.168c-1.024.744-1.984 1.248-3.282 1.757-4.738 1.84-10.565 1.816-15.271-.06-1.13-.455-2.12-.99-3.042-1.626.387 5.753 5.119 10.207 10.885 10.207 6.491-.256 10.32-5.361 10.71-10.278z"></path><path transform="translate(0 -1020.362)" fill-rule="evenodd" d="m26.196 1036.339-.508.406c-.94.682-1.83 1.116-3.088 1.61-4.476 1.737-10.09 1.715-14.535-.055h-.004a15.14 15.14 0 0 1 -2.568-1.32c-.02-.014-.166-.133-.354-.263l-.842 1.431c.04.028-.105.372.11.51.89.577 1.867 1.078 2.912 1.499h.002c4.968 1.98 11.005 2.003 16.004.062h.004c1.337-.525 2.43-1.053 3.537-1.856l-.038-.18-.128-.85-.504-.993z"></path><path stroke="#000" fill="#fff" d="m17.976 19.69a2.4 2.4 0 0 1 -2.4 2.4 2.4 2.4 0 0 1 -2.4-2.4 2.4 2.4 0 0 1 2.4-2.4 2.4 2.4 0 0 1 2.4 2.4z"></path></svg>
  <svg xmlns="http://www.w3.org/2000/svg" width="250" viewBox="0 0 451.103 424.198" height="100" class="pika"><path stroke-width="2.808" stroke-linejoin="round" stroke-linecap="round" stroke="#000" fill="#fff22d" d="m160.524 320.079-46.872-17.64 15.048-20.088s-51.912-16.704-64.439-21.744l42.695-87.12-90.432-8.352-15.12-77.112 180.936 43.56-61.991 108.936 48.6 21.744-26.856 33.48 30.169 20.16z"></path><path fill="#e8d031" d="m114.588 302.223 15.048-20.16-.792-.216-.072-.072-.216-.072-.216-.072-.36-.072-.36-.144-.504-.144-.504-.144-.576-.216-.576-.216-.72-.216-.72-.216-.792-.288-.864-.288-.864-.288-.936-.288-1.008-.288-1.007-.36-1.009-.36-1.152-.36-1.08-.36-1.152-.36-1.224-.36-1.224-.432-1.224-.36-1.224-.432-1.295-.432-1.297-.432-1.367-.432-1.369-.504-2.376-.792-.288-.72 16.056 3.888-6.768-12.672 17.064 2.376-3.816-12.312 16.848 5.328-3.312-10.008 30.672 13.752-26.711 33.408 29.735 19.8-10.512 3.744z"></path><path stroke-width="2.808" stroke-linejoin="round" stroke-linecap="round" stroke="#000" fill="#e8d031" d="m191.484 383.583s-21.672 21.96-25.632 34.561c-3.96 12.672 37.944-2.16 64.584-25.128 26.712-23.113-38.952-9.433-38.952-9.433zm144.288 0s21.672 21.96 25.631 34.561c3.961 12.672-37.872-2.16-64.583-25.128-26.712-23.113 38.952-9.433 38.952-9.433z"></path><path stroke-width="2.808" stroke-linejoin="round" stroke-linecap="round" stroke="#000" fill="#fff22d" d="m179.316 198.399c-12.6-13.176-20.88-36.144-18.072-50.832 3.096-15.912 9.288-31.608 10.368-40.248 1.008-8.64 6.984-26.928 7.272-26.784-16.776-5.4-37.513-15.264-51.48-28.512-13.968-13.176-46.008-42.408-42.696-48.888 3.456-6.696 47.16 7.704 69.048 14.76 21.961 7.056 47.664 28.512 47.448 28.944.145.36 35.424-16.992 68.256-16.272 32.761.648 52.776 9 63.576 15.912-.216-.072 25.489-21.528 47.375-28.584 21.889-7.056 65.592-21.456 69.049-14.76 3.312 6.48-28.729 35.712-42.695 48.888-13.969 13.248-32.113 23.112-48.889 28.512.287-.144 6.119 11.088 7.92 22.32 1.729 11.232 5.039 27.72 9.072 43.416 3.24 12.744-2.305 38.952-16.057 53.136-1.799 2.52 29.305 72 24.984 110.448-4.393 38.448-13.32 66.024-37.225 78.12-23.616 11.952-123.624 5.04-148.607-1.512-22.681-5.976-41.041-32.904-49.681-73.512s31.61-112.968 31.034-114.552z"></path><path d="m329.58 95.655c9.937 0 18 7.2 18 16.056s-8.063 16.056-18 16.056c-9.863 0-18-7.2-18-16.056s8.137-16.056 18-16.056zm-120.24 1.152c9.864 0 18 7.2 18 16.056 0 8.784-8.136 15.984-18 15.984-9.936 0-18-7.2-18-15.984 0-8.856 8.064-16.056 18-16.056zm50.832 35.856 4.824 5.04c.576.576 1.225.576 1.872-.072l5.472-5.112c.36-.576.145-.864-.504-.792h-10.8c-1.08.072-1.224.432-.864.936z"></path><g stroke="#000"><path stroke-width="2.808" stroke-linejoin="round" stroke-linecap="round" fill="#905744" d="m247.644 161.319c13.824-2.664 18.72-7.488 18.72-7.488s3.672 4.536 15.696 7.344c-15.192 54.432-34.416 1.44-34.416.144z"></path><path stroke-width=".216" d="m408.995 50.007c14.832-13.968 43.633-40.68 40.465-46.872-1.943-3.888-17.352-.72-34.271 4.032-.504 2.664 3.168 12.528-1.369 26.712-1.584 5.04-3.313 10.656-4.825 16.128zm-284.183-41.184c-19.008-5.544-37.872-10.008-40.104-5.688-3.312 6.48 28.729 35.712 42.696 48.888 2.304 2.16 4.824 4.32 7.632 6.48-1.8-8.784-5.184-20.232-8.208-29.664-2.664-8.424-2.52-15.264-2.016-20.016z"></path><path stroke-width="2.808" stroke-linejoin="round" stroke-linecap="round" fill="#cc2229" d="m347.075 146.271c8.785 0 15.984 7.488 15.984 16.632s-7.199 16.632-15.984 16.632c-8.784 0-15.984-7.488-15.984-16.632.001-9.144 7.201-16.632 15.984-16.632zm-158.471-5.04c8.784 0 15.983 7.488 15.983 16.632s-7.199 16.56-15.983 16.56-15.984-7.416-15.984-16.56 7.2-16.632 15.984-16.632zm91.368 26.712c-11.305 32.76-24.192 12.384-29.592.36 3.888-3.816 9.144-6.192 14.976-6.192 5.544 0 10.728 2.232 14.616 5.832z"></path><path stroke-width="2.808" stroke-linejoin="round" stroke-linecap="round" fill="none" d="m266.364 153.615c7.056 6.264 25.776 13.536 32.112.792m-32.112-.792c-7.2 5.76-25.848 13.536-32.184.792"></path></g><path fill="#fff" d="m267.084 132.591c1.656 0 2.952.432 2.952.937 0 .576-1.296 1.008-2.952 1.008-1.584 0-2.88-.432-2.88-1.008 0-.505 1.296-.937 2.88-.937z"></path><path stroke-width="3.168" stroke-linejoin="round" stroke-linecap="round" stroke="#000" fill="none" d="m227.052 231.015s7.632 5.112 14.832 32.112c4.392 16.632 11.304 20.376 13.248 24.696 1.943 4.392 4.319 10.584-1.368 7.2-5.688-3.384-7.416-3.024-5.185 1.584 2.305 4.608 1.08 7.488-7.056 1.512-6.048-4.392-5.976.504-4.248 3.024s1.656 9.504-5.472 3.312c-7.057-6.12-9.217-3.6-7.128.792 2.088 4.32 3.743 9.792-7.057 2.232-3.239-2.232-8.063-11.952-12.815-17.208-11.232-12.456-24.265-24.48-28.801-42.336"></path><path stroke-width="3.456" stroke-linejoin="round" stroke-linecap="round" stroke="#000" fill="none" d="m308.34 242.679s-6.407 5.976-7.703 31.176c-.864 15.552-6.84 20.16-7.849 24.336-1.008 4.248-2.016 10.152 2.88 6.12 4.824-4.032 6.553-4.104 5.328.432-1.224 4.464.576 6.768 7.272-.072 4.968-4.968 5.903-.648 4.752 1.872-1.152 2.592.432 8.712 6.048 1.944s8.28-4.968 7.128-.72-1.584 9.36 7.416.72c2.664-2.592 5.4-12.096 8.928-17.64 8.352-13.176 18.576-26.208 19.225-42.912"></path><path stroke-width=".936" stroke="#000" fill="none" d="m166.068 421.383 12.096-13.32m183.025 13.32-12.098-13.32m-179.279 14.256 15.84-10.728m171.865 10.728-15.84-10.728"></path><path fill="#e8d031" d="m405.181 52.815c-13.752 12.528-31.248 21.888-47.449 27.072h-.072c-4.104-7.848-8.424-18.144-11.736-19.224 26.064 3.528 45.864-1.656 59.257-7.848zm-269.569 5.4c14.976 10.512 29.016 17.28 43.776 21.672 4.176-7.848 8.063-14.976 11.376-19.008-26.064 3.528-41.76 3.528-55.152-2.664zm106.273 160.776c1.943 2.304 33.983 9.36 52.344-.144-27.505 38.16-53.713.432-52.344.144z"></path><path fill="#fff" d="m335.7 99.471c2.88 0 5.184 2.304 5.184 5.04 0 2.808-2.304 5.04-5.184 5.04-2.808 0-5.112-2.232-5.112-5.04 0-2.736 2.304-5.04 5.112-5.04zm-120.24 1.152c2.809 0 5.112 2.232 5.112 5.04s-2.304 5.04-5.112 5.04c-2.88 0-5.184-2.232-5.184-5.04s2.304-5.04 5.184-5.04z"></path><path fill="#e8d031" d="m175.788 249.303c-1.439 8.424-2.304 15.336 10.513 35.784 12.743 20.448 28.728 21.384 28.728 21.384s-6.768-10.368-9.504-14.04-9.792-10.224-14.472-15.984c-2.953-3.168-11.593-13.968-15.265-27.144zm183.241 128.952c-3.6 3.528-7.705 6.552-12.457 8.928-23.616 11.952-123.624 4.968-148.607-1.584-12.528-3.24-23.688-12.96-32.688-27.792 13.104 8.064 32.184 18.576 42.768 19.656 17.353 1.656 38.017-5.112 52.776-4.68 14.76.432 34.561 8.856 56.88 8.856 14.327 0 28.294-.504 41.328-3.384zm1.439-118.152s-2.305 5.544-4.32 9.864c-1.943 4.32-6.48 11.304-8.279 13.68-1.801 2.304-4.824 6.984-5.904 9.144-2.016 4.104-3.528 8.784-5.904 12.6 0 0 4.104-3.744 6.48-6.984 2.305-3.24 8.568-9.936 12.168-15.84 3.599-5.904 5.759-22.464 5.759-22.464z"></path></svg>
  <span class="go">Go!</span>
  <span class="pword">pika</span>
  <span class="pword2">pika</span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: button */
button {
  position: relative;
  width: 150px;
  height: 60px;
  overflow: hidden;
  border: 1px solid black;
  border-radius: 50px;
  padding-left: 35px;
  box-shadow: 2.9px 2.9px 2.2px rgba(0, 0, 0, 0.019),
              5.2px 5.2px 5.3px rgba(0, 0, 0, 0.023),
              7px 7px 10px rgba(0, 0, 0, 0.025),
              8.7px 8.7px 17.9px rgba(0, 0, 0, 0.024),
              11.3px 11.3px 33.4px rgba(0, 0, 0, 0.023),
              20px 20px 80px rgba(0, 0, 0, 0.02);
}

.pika {
  position: absolute;
  top: -100%;
  left: 42%;
  transition: 0.5s all;
  animation: tilt 1.1s infinite ease-in-out;
}

@keyframes tilt {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(10deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

.pokeball {
  position: absolute;
  top: 25%;
  left: 10%;
  animation: rotate_4991 1s linear infinite;
}

@keyframes rotate_4991 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

button:hover .pika {
  top: 90%;
}

button:hover .pokeball {
  animation: none;
  transform: scale(0);
}

button:hover .go {
  color: transparent;
}

.go {
  position: absolute;
  top: 18%;
  left: 45%;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 1px;
}

.pword, .pword2 {
  position: absolute;
  font-size: 13px;
  opacity: 0;
  animation: pulse-animation_0011 1s infinite;
}

@keyframes pulse-animation_0011 {
  0% {
    transform: rotateZ(-30deg) scale(1);
  }

  50% {
    transform: rotateZ(-30deg) scale(1.1);
  }

  100% {
    transform: rotateZ(-30deg) scale(1);
  }
}

.pword {
  top: 30%;
  left: 72%;
}

.pword2 {
  top: 55%;
  left: 75%;
}

button:hover .pword, button:hover .pword2 {
  opacity: 1;
}

</style>


================================================
FILE: Buttons/andrew-demchenk0_giant-termite-81.html
================================================
<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none" class="svg-icon"><g stroke-width="2" stroke-linecap="round" stroke="#fff"><rect y="5" x="4" width="16" rx="2" height="16"></rect><path d="m8 3v4"></path><path d="m16 3v4"></path><path d="m4 11h16"></path></g></svg>
  <span class="lable">Add to Calendar</span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: animation, calendar, button, creditcard, add, add to callendar */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px 12px;
  gap: 8px;
  height: 40px;
  width: 201px;
  border: none;
  background: #FF342B;
  border-radius: 20px;
  cursor: pointer;
}

.lable {
  line-height: 22px;
  font-size: 17px;
  color: #fff;
  font-family: sans-serif;
  letter-spacing: 1px;
}

.button:hover {
  background: #e52e26;
}

.button:hover .svg-icon {
  animation: slope 1s linear infinite;
}

@keyframes slope {
  0% {
  }

  50% {
    transform: rotate(10deg);
  }

  100% {
  }
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_happy-dragonfly-63.html
================================================
<button class="button">
  <svg class="svg-icon" fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><g stroke="#ff342b" stroke-linecap="round" stroke-width="1.5"><path d="m3.33337 10.8333c0 3.6819 2.98477 6.6667 6.66663 6.6667 3.682 0 6.6667-2.9848 6.6667-6.6667 0-3.68188-2.9847-6.66664-6.6667-6.66664-1.29938 0-2.51191.37174-3.5371 1.01468"></path><path d="m7.69867 1.58163-1.44987 3.28435c-.18587.42104.00478.91303.42582 1.0989l3.28438 1.44986"></path></g></svg>
  <span class="lable">Repeat</span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: button, repeat */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  gap: 8px;
  height: 34px;
  width: 112px;
  border: none;
  background: #ff362b34;
  border-radius: 20px;
  cursor: pointer;
}

.lable {
  line-height: 20px;
  font-size: 17px;
  color: #FF342B;
  font-family: sans-serif;
  letter-spacing: 1px;
}

.button:hover {
  background: #ff362b52;
}

.button:hover .svg-icon {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_itchy-donkey-64.html
================================================
<button class="button">
  <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="56.6934px" viewBox="0 0 56.6934 56.6934" version="1.1" style="enable-background:new 0 0 56.6934 56.6934;" id="Layer_1" height="56.6934px" class="icon"><path d="M51.981,24.4812c-7.7173-0.0038-15.4346-0.0019-23.1518-0.001c0.001,3.2009-0.0038,6.4018,0.0019,9.6017  c4.4693-0.001,8.9386-0.0019,13.407,0c-0.5179,3.0673-2.3408,5.8723-4.9258,7.5991c-1.625,1.0926-3.492,1.8018-5.4168,2.139  c-1.9372,0.3306-3.9389,0.3729-5.8713-0.0183c-1.9651-0.3921-3.8409-1.2108-5.4773-2.3649  c-2.6166-1.8383-4.6135-4.5279-5.6388-7.5549c-1.0484-3.0788-1.0561-6.5046,0.0048-9.5805  c0.7361-2.1679,1.9613-4.1705,3.5708-5.8002c1.9853-2.0324,4.5664-3.4853,7.3473-4.0811c2.3812-0.5083,4.8921-0.4113,7.2234,0.294  c1.9815,0.6016,3.8082,1.6874,5.3044,3.1163c1.5125-1.5039,3.0173-3.0164,4.527-4.5231c0.7918-0.811,1.624-1.5865,2.3908-2.4196  c-2.2928-2.1218-4.9805-3.8274-7.9172-4.9056C32.0723,4.0363,26.1097,3.995,20.7871,5.8372  C14.7889,7.8907,9.6815,12.3763,6.8497,18.0459c-0.9859,1.9536-1.7057,4.0388-2.1381,6.1836  C3.6238,29.5732,4.382,35.2707,6.8468,40.1378c1.6019,3.1768,3.8985,6.001,6.6843,8.215c2.6282,2.0958,5.6916,3.6439,8.9396,4.5078  c4.0984,1.0993,8.461,1.0743,12.5864,0.1355c3.7284-0.8581,7.256-2.6397,10.0725-5.24c2.977-2.7358,5.1006-6.3403,6.2249-10.2138  C52.5807,33.3171,52.7498,28.8064,51.981,24.4812z"></path></svg>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: animation, login, button, google, round */
.button {
  --bg-color: #fff;
  --main-color: #323232;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
  cursor: pointer;
}

.button:active {
  box-shadow: 0px 0px var(--main-color);
  transform: translate(3px, 3px);
}

.icon {
  width: 24px;
  height: 24px;
  fill: var(--main-color);
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_mighty-moose-66.html
================================================

<button type="button" class="button">
  <span class="button__text">Add Item</span>
  <span class="button__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" height="24" fill="none" class="svg"><line y2="19" y1="5" x2="12" x1="12"></line><line y2="12" y1="12" x2="19" x1="5"></line></svg></span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: green, button, add */
.button {
  position: relative;
  width: 150px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 1px solid #34974d;
  background-color: #3aa856;
}

.button, .button__icon, .button__text {
  transition: all 0.3s;
}

.button .button__text {
  transform: translateX(30px);
  color: #fff;
  font-weight: 600;
}

.button .button__icon {
  position: absolute;
  transform: translateX(109px);
  height: 100%;
  width: 39px;
  background-color: #34974d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button .svg {
  width: 30px;
  stroke: #fff;
}

.button:hover {
  background: #34974d;
}

.button:hover .button__text {
  color: transparent;
}

.button:hover .button__icon {
  width: 148px;
  transform: translateX(0);
}

.button:active .button__icon {
  background-color: #2e8644;
}

.button:active {
  border: 1px solid #2e8644;
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_moody-penguin-72.html
================================================
<button class="button">
  <svg class="svg-icon" fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m9.99998 4.16667c1.38072 0 2.50002 1.11929 2.50002 2.5 0 .85577-.4293 1.6115-1.088 2.06341l-.4536.31125.1079.53934 1.2505 6.25263h-4.63366l1.25051-6.25263.10791-.53934-.45358-.31125c-.65876-.45191-1.088-1.20764-1.088-2.06341 0-1.38071 1.11925-2.5 2.5-2.5zm-2.31684 11.66663-.19934.9968-.81715-.1634v-.8334zm5.65016.8334v-.8334h-1.0165l.1993.9968zm.8172-.1634.1993.9967h-1.0165-6.66665-1.0165l.19935-.9967 1.35023-6.75127c.14013.12727.28892.24506.44536.35237l.47144-.68715-.81716-.16342-.09964.4982c-.83832-.76139-1.36642-1.86163-1.36642-3.08536 0-2.30119 1.86549-4.16667 4.16667-4.16667 2.30112 0 4.16662 1.86548 4.16662 4.16667 0 1.22374-.5281 2.32399-1.3664 3.08538l-.0996-.49822-.8172.16342-.4714-.68717.4714.68717-.8171.16342.8171-.16342.4715.68715c.1564-.1073.3052-.22509.4453-.35235z" fill="#fff" fill-rule="evenodd"></path></svg>
  <span class="lable">Key</span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: animation, purple, button, opacity, key , small */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  gap: 8px;
  height: 32px;
  width: 82px;
  border: none;
  background: #a549dacb;
  border-radius: 20px;
  cursor: pointer;
}

.lable {
  line-height: 20px;
  font-size: 17px;
  color: #fff;
  font-family: sans-serif;
  letter-spacing: 1px;
}

.svg-icon {
  width: 20px;
  height: 20px;
}

.button:hover {
  background: #A649DA;
}

.button:hover .svg-icon {
  animation: rot 0.5s linear infinite;
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-6deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_nasty-rabbit-89.html
================================================

<button>
  <span class="text">FIRE !!!</span>
  <span class="bullet"></span>
</button>

<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: button */
button {
  padding: 0 15px 0 15px;
  font-size: 17px;
  font-weight: 700;
  text-shadow: 1px 1px 2.3px rgba(255,255,255, 0.8);
  position: relative;
  width: 150px;
  height: 40px;
  border-radius: 100% 9% 9% 100% / 0% 100% 100% 0%;
  border: none;
  background-image: linear-gradient(
                    180deg, #CDB373, #795E2B,
                    #AD8D53, #FFFAB7, #795D2F,
                    #614818, #BC9859, #876A35,
                    #736141);
}

button::before {
  content: '';
  height: 44px;
  width: 10px;
  position: absolute;
  top: -4.7%;
  left: -5.9%;
  border-radius: 100% 31% 28% 100% / 0% 100% 100% 0%;
  background-image: linear-gradient(
                    180deg, #CDB373, #795E2B,
                    #AD8D53, #FFFAB7, #795D2F,
                    #614818, #BC9859, #876A35,
                    #736141);
}

.bullet {
  height: 38px;
  width: 60px;
  position: absolute;
  top: 3%;
  left: 95%;
  border-radius: 10% 100% 100% 10% / 10% 50% 50% 10%;
  background-image: linear-gradient(
                    180deg, #512614, #A1623A,
                    #BA7447, #EDC38B, #B27449,
                    #DDAB77, #EAC4AE, #B67E4E,
                    #5B2D17, #44271C);
  z-index: -1;
}

button:active .bullet {
  left: 115%;
  transition: all 0.2s;
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_odd-squid-52.html
================================================
<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 20 20" height="20" fill="none" class="svg-icon"><g stroke-width="1.5" stroke-linecap="round" stroke="#5d41de"><circle r="2.5" cy="10" cx="10"></circle><path fill-rule="evenodd" d="m8.39079 2.80235c.53842-1.51424 2.67991-1.51424 3.21831-.00001.3392.95358 1.4284 1.40477 2.3425.97027 1.4514-.68995 2.9657.82427 2.2758 2.27575-.4345.91407.0166 2.00334.9702 2.34248 1.5143.53842 1.5143 2.67996 0 3.21836-.9536.3391-1.4047 1.4284-.9702 2.3425.6899 1.4514-.8244 2.9656-2.2758 2.2757-.9141-.4345-2.0033.0167-2.3425.9703-.5384 1.5142-2.67989 1.5142-3.21831 0-.33914-.9536-1.4284-1.4048-2.34247-.9703-1.45148.6899-2.96571-.8243-2.27575-2.2757.43449-.9141-.01669-2.0034-.97028-2.3425-1.51422-.5384-1.51422-2.67994.00001-3.21836.95358-.33914 1.40476-1.42841.97027-2.34248-.68996-1.45148.82427-2.9657 2.27575-2.27575.91407.4345 2.00333-.01669 2.34247-.97026z" clip-rule="evenodd"></path></g></svg>
  <span class="lable">Settings</span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: button, settings */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  gap: 8px;
  height: 36px;
  width: 120px;
  border: none;
  background: #5e41de33;
  border-radius: 20px;
  cursor: pointer;
}

.lable {
  line-height: 20px;
  font-size: 17px;
  color: #5D41DE;
  font-family: sans-serif;
  letter-spacing: 1px;
}

.button:hover {
  background: #5e41de4d;
}

.button:hover .svg-icon {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_plastic-hound-41.html
================================================
<div class="container">
  <button><svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" id="Layer_21" height="24" data-name="Layer 21"><title></title><path d="M16.75,9H13.5V7a1,1,0,0,1,1-1h2V3H14a4,4,0,0,0-4,4V9H8v3h2v9h3.5V12H16Z"></path></svg></button>
  <button><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg></button>
  <button><svg class="icon" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="56.693px" viewBox="0 0 56.693 56.693" version="1.1" id="Layer_1" height="56.693px"><path d="M52.837,15.065c-1.811,0.805-3.76,1.348-5.805,1.591c2.088-1.25,3.689-3.23,4.444-5.592c-1.953,1.159-4.115,2-6.418,2.454  c-1.843-1.964-4.47-3.192-7.377-3.192c-5.581,0-10.106,4.525-10.106,10.107c0,0.791,0.089,1.562,0.262,2.303  c-8.4-0.422-15.848-4.445-20.833-10.56c-0.87,1.492-1.368,3.228-1.368,5.082c0,3.506,1.784,6.6,4.496,8.412  c-1.656-0.053-3.215-0.508-4.578-1.265c-0.001,0.042-0.001,0.085-0.001,0.128c0,4.896,3.484,8.98,8.108,9.91  c-0.848,0.23-1.741,0.354-2.663,0.354c-0.652,0-1.285-0.063-1.902-0.182c1.287,4.015,5.019,6.938,9.441,7.019  c-3.459,2.711-7.816,4.327-12.552,4.327c-0.815,0-1.62-0.048-2.411-0.142c4.474,2.869,9.786,4.541,15.493,4.541  c18.591,0,28.756-15.4,28.756-28.756c0-0.438-0.009-0.875-0.028-1.309C49.769,18.873,51.483,17.092,52.837,15.065z"></path></svg></button>
  <button><svg class="icon" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="512px" viewBox="0 0 512 512" version="1.1" style="enable-background:new 0 0 512 512;" id="LinkedIn_alt" height="512px"><pattern y="512" width="69" viewBox="2.125 -70.896 69 69" style="overflow:visible;" patternUnits="userSpaceOnUse" id="Polka_Dot_Pattern" height="69"><g><polygon style="fill:none;" points="71.125,-1.896 2.125,-1.896 2.125,-70.896 71.125,-70.896"></polygon><polygon style="fill:#F6BB60;" points="71.125,-1.896 2.125,-1.896 2.125,-70.896 71.125,-70.896"></polygon><g><path style="fill:#FFFFFF;" d="M61.772-71.653c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M54.105-71.653c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M46.439-71.653c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M38.772-71.653c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M31.105-71.653c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M23.439-71.653c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M15.772-71.653c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M8.105-71.653c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M0.439-71.653c0.018,0.072,0.008,0.127-0.026,0.19C0.361-71.362,0.3-71.4,0.248-71.335     c-0.051,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.07,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.038-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.051-0.12-0.064-0.187c-0.021-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.215,0.124-0.215,0.224c0.002,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path></g><g><path style="fill:#FFFFFF;" d="M69.439-71.653c0.018,0.072,0.008,0.127-0.026,0.19c-0.052,0.101-0.113,0.062-0.165,0.128     c-0.051,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.07,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.038-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.051-0.12-0.064-0.187c-0.021-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.215,0.124-0.215,0.224c0.002,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path></g><path style="fill:#FFFFFF;" d="M0.495-71.653c0.018,0.072,0.008,0.127-0.026,0.19c-0.052,0.101-0.113,0.062-0.165,0.128    c-0.051,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161    c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631    c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45    c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.07,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221    c0.038-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.051-0.12-0.064-0.187c-0.021-0.114,0.002-0.224,0-0.337    c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207    c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.215,0.124-0.215,0.224C0.5-71.68,0.503-71.744,0.51-71.626    c-0.021,0.011-0.021-0.005-0.03-0.025"></path><g><g><path style="fill:#FFFFFF;" d="M69.439-64.001c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M61.778-64.001c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M54.118-64.001c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M46.458-64.001c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M38.797-64.001c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M31.137-64.001c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M23.477-64.001c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M15.816-64.001c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M8.156-64.001c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M0.495-64.001c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143C2-61.45,2.217-61.397,2.391-61.46c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path></g><g><path style="fill:#FFFFFF;" d="M69.439-56.348c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M61.778-56.348c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M54.118-56.348c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M46.458-56.348c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M38.797-56.348c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M31.137-56.348c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M23.477-56.348c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M15.816-56.348c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M8.156-56.348c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M0.495-56.348c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224C0.5-56.374,0.503-56.438,0.51-56.32      c-0.021,0.011-0.021-0.005-0.03-0.025"></path></g><g><path style="fill:#FFFFFF;" d="M69.439-48.695c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M61.778-48.695c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M54.118-48.695c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M46.458-48.695c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M38.797-48.695c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M31.137-48.695c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M23.477-48.695c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M15.816-48.695c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M8.156-48.695c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M0.495-48.695c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path></g><g><path style="fill:#FFFFFF;" d="M69.439-41.042c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M61.778-41.042c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M54.118-41.042c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M46.458-41.042c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M38.797-41.042c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M31.137-41.042c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M23.477-41.042c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M15.816-41.042c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M8.156-41.042c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      C8.15-41.004,8.149-41.02,8.14-41.04"></path><path style="fill:#FFFFFF;" d="M0.495-41.042c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path></g><g><path style="fill:#FFFFFF;" d="M69.439-33.39c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M61.778-33.39c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M54.118-33.39c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M46.458-33.39c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M38.797-33.39c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M31.137-33.39c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M23.477-33.39c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M15.816-33.39c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M8.156-33.39c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M0.495-33.39c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224C0.5-33.416,0.503-33.48,0.51-33.362      c-0.021,0.011-0.021-0.005-0.03-0.025"></path></g><g><path style="fill:#FFFFFF;" d="M69.439-25.736c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M61.778-25.736c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M54.118-25.736c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M46.458-25.736c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M38.797-25.736c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M31.137-25.736c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M23.477-25.736c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M15.816-25.736c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M8.156-25.736c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M0.495-25.736c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path></g><g><path style="fill:#FFFFFF;" d="M69.439-18.084c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M61.778-18.084c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M54.118-18.084c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M46.458-18.084c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M38.797-18.084c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M31.137-18.084c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M23.477-18.084c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M15.816-18.084c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M8.156-18.084c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M0.495-18.084c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224C0.5-18.11,0.503-18.175,0.51-18.057      c-0.021,0.011-0.021-0.005-0.03-0.025"></path></g><g><path style="fill:#FFFFFF;" d="M69.439-10.431c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362C69-9.692,69.159-9.523,69.154-9.4c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M61.778-10.431c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M54.118-10.431c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M46.458-10.431c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M38.797-10.431c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M31.137-10.431c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M23.477-10.431c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M15.816-10.431c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.009,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053C17.933-7.969,17.839-8.227,18-8.34      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M8.156-10.431c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      C7.915-10.05,7.866-9.836,7.886-9.75C7.717-9.692,7.876-9.523,7.871-9.4C7.868-9.351,7.83-9.295,7.826-9.239      c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631      C9.114-7.652,9.321-7.799,9.48-7.837c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M0.495-10.431c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128      C0.254-10.05,0.205-9.836,0.225-9.75C0.056-9.692,0.215-9.523,0.21-9.4c-0.002,0.05-0.041,0.105-0.045,0.161      c-0.01,0.119,0.017,0.266,0.068,0.37C0.33-8.671,0.501-8.456,0.668-8.325c0.19,0.148,0.365,0.572,0.608,0.631      C1.454-7.652,1.66-7.799,1.819-7.837C2-7.88,2.217-7.827,2.391-7.89c0.222-0.079,0.127-0.337,0.288-0.45      c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46C3.477-8.933,3.471-8.995,3.5-9.071      c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337      c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207      c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169      c-0.021,0.011-0.021-0.005-0.03-0.025"></path></g></g><g><path style="fill:#FFFFFF;" d="M69.439-2.778c0.018,0.072,0.008,0.127-0.026,0.19C69.361-2.487,69.3-2.525,69.248-2.46     c-0.051,0.062-0.099,0.276-0.079,0.362C69-2.04,69.159-1.871,69.154-1.748c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     C70.397,0,70.604-0.146,70.763-0.185c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.07,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.038-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.051-0.12-0.064-0.187c-0.021-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.215,0.124-0.215,0.224c0.002,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M61.778-2.778c0.018,0.072,0.007,0.127-0.026,0.19C61.7-2.487,61.64-2.525,61.587-2.46     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     C62.737,0,62.943-0.146,63.103-0.185c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224C61.915-3.117,61.78-3.02,61.781-2.92c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M54.118-2.778c0.018,0.072,0.007,0.127-0.026,0.19C54.04-2.487,53.98-2.525,53.927-2.46     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     C55.077,0,55.283-0.146,55.442-0.185c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224C54.255-3.117,54.12-3.02,54.121-2.92c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M46.458-2.778c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     C47.416,0,47.623-0.146,47.782-0.185c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224C46.594-3.117,46.459-3.02,46.46-2.92c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M38.797-2.778c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     C39.756,0,39.962-0.146,40.122-0.185c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224C38.934-3.117,38.799-3.02,38.8-2.92c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M31.137-2.778c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     C32.095,0,32.302-0.146,32.461-0.185c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224C31.273-3.117,31.139-3.02,31.14-2.92c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M23.477-2.778c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     C24.435,0,24.642-0.146,24.801-0.185c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"></path><path style="fill:#FFFFFF;" d="M15.816-2.778c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.062-0.165,0.128     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     C16.774,0,16.981-0.146,17.14-0.185c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169     C15.81-2.74,15.809-2.756,15.8-2.776"></path><path style="fill:#FFFFFF;" d="M8.156-2.778c0.018,0.072,0.007,0.127-0.026,0.19C8.077-2.487,8.018-2.525,7.965-2.46     c-0.05,0.062-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35C7.868-1.698,7.83-1.643,7.826-1.587     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     C9.114,0,9.321-0.146,9.48-0.185c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789C8.954-3.54,8.847-3.448,8.692-3.367     c-0.17,0.088-0.139,0.166-0.318,0.224C8.292-3.117,8.158-3.02,8.159-2.92C8.16-2.805,8.164-2.869,8.17-2.751     C8.15-2.74,8.149-2.756,8.14-2.776"></path><path style="fill:#FFFFFF;" d="M0.495-2.778c0.018,0.072,0.008,0.127-0.026,0.19C0.417-2.487,0.356-2.525,0.304-2.46     C0.253-2.397,0.205-2.184,0.225-2.098C0.056-2.04,0.215-1.871,0.21-1.748c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37C0.33-1.019,0.501-0.804,0.668-0.673c0.19,0.148,0.365,0.572,0.608,0.631     C1.454,0,1.66-0.146,1.819-0.185C2-0.228,2.217-0.175,2.391-0.237c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.07,0.339-0.263,0.376-0.46C3.477-1.28,3.471-1.343,3.5-1.419     c0.038-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.051-0.12-0.064-0.187c-0.021-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789C1.293-3.54,1.187-3.448,1.031-3.367     c-0.17,0.088-0.139,0.166-0.318,0.224C0.632-3.117,0.498-3.02,0.498-2.92C0.5-2.805,0.503-2.869,0.51-2.751     C0.489-2.74,0.488-2.756,0.479-2.776"></path></g></g></pattern><path d="M51.326,185.85h90.011v270.872H51.326V185.85z M96.934,55.278C66.127,55.278,46,75.503,46,102.049  c0,26,19.538,46.813,49.756,46.813h0.574c31.396,0,50.948-20.814,50.948-46.813C146.689,75.503,127.727,55.278,96.934,55.278z   M362.339,179.487c-47.779,0-69.184,26.28-81.125,44.71V185.85h-90.038c1.192,25.411,0,270.872,0,270.872h90.038V305.448  c0-8.102,0.589-16.174,2.958-21.978c6.519-16.174,21.333-32.923,46.182-32.923c32.602,0,45.622,24.851,45.622,61.248v144.926H466  V301.398C466,218.199,421.598,179.487,362.339,179.487z"></path></svg></button>
  <span class="title">Contact someone</span>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: twitter, youtube, facebook, button, social media, linkedin */
.container {
  position: relative;
  width: 250px;
 /*  choose your size */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.container button {
  width: 50px;
  height: 50px;
  border: none;
  background-color: #313638;
  transition: 0.3s;
  cursor: pointer;
}

.icon {
  width: 26px;
  height: 26px;
  fill: #fff;
}

.container button:nth-child(1):hover {
  background-color: #2753a7;
}

.container button:nth-child(2):hover {
  background-color: #cd242b;
}

.container button:nth-child(3):hover {
  background-color: #55acee;
}

.container button:nth-child(4):hover {
  background-color: #0274b3;
}

.title {
  color: gray;
  font-weight: 700;
  font-size: 17px;
  position: absolute;
  top: -35px;
  left: 0;
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_pretty-squid-78.html
================================================
<button class="button">
  <svg class="svg-icon" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g stroke="#a649da" stroke-linecap="round" stroke-width="2"><path d="m20 20h-16"></path><path clip-rule="evenodd" d="m14.5858 4.41422c.781-.78105 2.0474-.78105 2.8284 0 .7811.78105.7811 2.04738 0 2.82843l-8.28322 8.28325-3.03046.202.20203-3.0304z" fill-rule="evenodd"></path></g></svg>
  <span class="lable">Edit</span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: animation, purple, button, opacity, small, edit */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  gap: 2px;
  height: 40px;
  width: 85px;
  border: none;
  background: #a549da3d;
  border-radius: 20px;
  cursor: pointer;
}

.lable {
  line-height: 22px;
  font-size: 19px;
  color: #A649DA;
  font-family: sans-serif;
  letter-spacing: 1px;
}

.button:hover {
  background: #a549da62;
}

.button:hover .svg-icon {
  animation: lr 1s linear infinite;
}

@keyframes lr {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-1px);
  }

  75% {
    transform: translateX(1px);
  }

  100% {
    transform: translateX(0);
  }
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_shaggy-vampirebat-24.html
================================================
<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 20 20" height="20" fill="none" class="svg-icon"><g stroke-width="1.5" stroke-linecap="round" stroke="#de8a2a"><circle r="7.5" cy="10" cx="10"></circle><path d="m9.99998 7.5v5"></path><path d="m7.5 9.99998h5"></path></g></svg>
  <span class="lable">Add</span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: button, hover, add */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  gap: 4px;
  height: 32px;
  width: 81px;
  border: none;
  background: #1b1b1cd0;
  border-radius: 20px;
  cursor: pointer;
}

.lable {
  line-height: 22px;
  font-size: 17px;
  color: #DE8A2A;
  font-family: sans-serif;
  letter-spacing: 1px;
}

.button:hover {
  background: #1b1b1cea;
}

.button:hover .svg-icon {
  animation: rotate 1.3s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_smart-wasp-46.html
================================================
<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg" width="32" viewBox="0 0 32 32" height="32" fill="none" class="svg-icon"><path stroke-width="2" stroke-linecap="round" stroke="#fff" fill-rule="evenodd" d="m24.8868 19.1288c-1.0274-.1308-2.036-.3815-3.0052-.7467-.7878-.29-1.6724-.1034-2.276.48-.797.8075-2.0493.9936-2.9664.3258-1.4484-1.055-2.7233-2.3295-3.7783-3.7776-.6681-.9168-.4819-2.1691.3255-2.9659.5728-.6019.7584-1.4748.4802-2.2577-.3987-.98875-.6792-2.02109-.8358-3.07557-.2043-1.03534-1.1138-1.7807-2.1694-1.77778h-3.18289c-.60654-.00074-1.18614.25037-1.60035.69334-.40152.44503-.59539 1.03943-.53345 1.63555.344 3.31056 1.47164 6.49166 3.28961 9.27986 1.64878 2.5904 3.84608 4.7872 6.43688 6.4356 2.7927 1.797 5.9636 2.9227 9.2644 3.289h.1778c.5409.0036 1.0626-.2 1.4581-.569.444-.406.6957-.9806.6935-1.5822v-3.1821c.0429-1.0763-.7171-2.0185-1.7782-2.2046z" clip-rule="evenodd"></path></svg>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: green, button, phone, circle, accept, accept call */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  border: none;
  background-color: #30C04F;
}

.button:hover {
  background-color: #2bac47;
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_splendid-impala-69.html
================================================
<button class="button" type="button">
  <span class="button__text">Delete</span>
  <span class="button__icon"><svg class="svg" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M112,112l20,320c.95,18.49,14.4,32,32,32H348c17.67,0,30.87-13.51,32-32l20-320" style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path><line style="stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px" x1="80" x2="432" y1="112" y2="112"></line><path d="M192,112V72h0a23.93,23.93,0,0,1,24-24h80a23.93,23.93,0,0,1,24,24h0v40" style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path><line style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px" x1="256" x2="256" y1="176" y2="400"></line><line style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px" x1="184" x2="192" y1="176" y2="400"></line><line style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px" x1="328" x2="320" y1="176" y2="400"></line></svg></span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: red, button, delete */
.button {
  position: relative;
  width: 150px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 1px solid #cc0000;
  background-color: #e50000;
  overflow: hidden;
}

.button, .button__icon, .button__text {
  transition: all 0.3s;
}

.button .button__text {
  transform: translateX(35px);
  color: #fff;
  font-weight: 600;
}

.button .button__icon {
  position: absolute;
  transform: translateX(109px);
  height: 100%;
  width: 39px;
  background-color: #cc0000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button .svg {
  width: 20px;
}

.button:hover {
  background: #cc0000;
}

.button:hover .button__text {
  color: transparent;
}

.button:hover .button__icon {
  width: 148px;
  transform: translateX(0);
}

.button:active .button__icon {
  background-color: #b20000;
}

.button:active {
  border: 1px solid #b20000;
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_strange-starfish-32.html
================================================
<button class="button">
  <svg class="svg-icon" fill="none" height="22" viewBox="0 0 20 20" width="22" xmlns="http://www.w3.org/2000/svg"><g stroke="#fff" stroke-linecap="round" stroke-width="1.5"><path d="m6.66669 6.66667h6.66671"></path><path clip-rule="evenodd" d="m3.33331 5.00001c0-.92047.74619-1.66667 1.66667-1.66667h10.00002c.9205 0 1.6666.7462 1.6666 1.66667v6.66669c0 .9205-.7461 1.6666-1.6666 1.6666h-4.8274c-.1105 0-.21654.044-.29462.122l-2.50004 2.5c-.26249.2625-.71129.0766-.71129-.2945v-1.9108c0-.2301-.18655-.4167-.41667-.4167h-1.25c-.92048 0-1.66667-.7461-1.66667-1.6666z" fill-rule="evenodd"></path><path d="m6.66669 10h2.5"></path></g></svg>
  <span class="lable">Message</span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: animation, blue, button, message */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  gap: 8px;
  height: 32px;
  width: 124px;
  border: none;
  background: #056bfae0;
  border-radius: 20px;
  cursor: pointer;
}

.lable {
  line-height: 20px;
  font-size: 17px;
  color: #fff;
  font-family: sans-serif;
  letter-spacing: 1px;
}

.button:hover {
  background: #056DFA;
}

.button:hover .svg-icon {
  animation: msg 2s linear infinite;
}

@keyframes msg {
  0% {
    transform: translate(0, 0) scale(1);
  }

  15% {
    transform: translateX(1px);
  }

  30% {
    transform: scale(1.1);
  }

  45% {
    transform: translateY(1px);
  }

  60% {
    transform: translateY(0px);
  }

  75% {
    transform: scale(1);
  }

  90% {
    transform: translateX(-px);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_strange-swan-41.html
================================================
<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg" width="46" viewBox="0 0 46 46" height="46" fill="none" class="svg-icon"><path stroke-width="2" stroke-linecap="round" stroke="#fff" fill-rule="evenodd" d="m14.5037 27.0715c.819-.634 1.7094-1.1699 2.653-1.597.7621-.3521 1.2557-1.1094 1.2699-1.9488-.0073-1.1346.7466-2.1517 1.8673-2.3279 1.7701-.2782 3.5728-.2785 5.3429-.0005 1.1206.1759 1.8744 1.193 1.8669 2.3274.0206.8307.5066 1.5791 1.257 1.9359.981.4173 1.9093.9489 2.7657 1.5838.8765.5876 2.0467.4715 2.791-.2769l2.2507-2.2507c.4294-.4283.6617-1.0157.6414-1.6219-.0308-.5985-.314-1.1559-.7793-1.5337-2.5842-2.0976-5.6309-3.5496-8.888-4.2357-2.9976-.6659-6.1047-.6655-9.1023.0009-3.2453.7041-6.2835 2.1503-8.87655 4.2253l-.12568.1256c-.38501.38-.60996.8929-.62872 1.4334-.02687.6011.20148 1.1854.62847 1.6092l2.25008 2.2501c.7307.7914 1.9343.9202 2.8162.3015z" clip-rule="evenodd"></path></svg>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: red, button, phone, circle, reject, call reject */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  border: none;
  background-color: #FF2849;
}

.button:hover {
  background-color: #e52441;
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_swift-octopus-68.html
================================================
<button class="button">
  <svg class="svg-icon" width="24" viewBox="0 0 24 24" height="24" fill="none"><g stroke-width="2" stroke-linecap="round" stroke="#056dfa" fill-rule="evenodd" clip-rule="evenodd"><path d="m3 7h17c.5523 0 1 .44772 1 1v11c0 .5523-.4477 1-1 1h-16c-.55228 0-1-.4477-1-1z"></path><path d="m3 4.5c0-.27614.22386-.5.5-.5h6.29289c.13261 0 .25981.05268.35351.14645l2.8536 2.85355h-10z"></path></g></svg>
  <span class="lable">Archive</span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: icon, button, archive */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 12px 8px 16px;
  gap: 8px;
  height: 40px;
  width: 128px;
  border: none;
  background: #056bfa27;
  border-radius: 20px;
  cursor: pointer;
}

.lable {
  margin-top: 1px;
  font-size: 19px;
  line-height: 22px;
  color: #056DFA;
  font-family: sans-serif;
  letter-spacing: 1px;
}

.button:hover {
  background: #056bfa49;
}

.button:hover .svg-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-8deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(8deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_tasty-yak-79.html
================================================
<button class="button" type="button">
  <span class="button__text">Download</span>
  <span class="button__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35" id="bdd05811-e15d-428c-bb53-8661459f9307" data-name="Layer 2" class="svg"><path d="M17.5,22.131a1.249,1.249,0,0,1-1.25-1.25V2.187a1.25,1.25,0,0,1,2.5,0V20.881A1.25,1.25,0,0,1,17.5,22.131Z"></path><path d="M17.5,22.693a3.189,3.189,0,0,1-2.262-.936L8.487,15.006a1.249,1.249,0,0,1,1.767-1.767l6.751,6.751a.7.7,0,0,0,.99,0l6.751-6.751a1.25,1.25,0,0,1,1.768,1.767l-6.752,6.751A3.191,3.191,0,0,1,17.5,22.693Z"></path><path d="M31.436,34.063H3.564A3.318,3.318,0,0,1,.25,30.749V22.011a1.25,1.25,0,0,1,2.5,0v8.738a.815.815,0,0,0,.814.814H31.436a.815.815,0,0,0,.814-.814V22.011a1.25,1.25,0,1,1,2.5,0v8.738A3.318,3.318,0,0,1,31.436,34.063Z"></path></svg></span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: button */
.button {
  position: relative;
  width: 150px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 1px solid #17795E;
  background-color: #209978;
  overflow: hidden;
}

.button, .button__icon, .button__text {
  transition: all 0.3s;
}

.button .button__text {
  transform: translateX(22px);
  color: #fff;
  font-weight: 600;
}

.button .button__icon {
  position: absolute;
  transform: translateX(109px);
  height: 100%;
  width: 39px;
  background-color: #17795E;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button .svg {
  width: 20px;
  fill: #fff;
}

.button:hover {
  background: #17795E;
}

.button:hover .button__text {
  color: transparent;
}

.button:hover .button__icon {
  width: 148px;
  transform: translateX(0);
}

.button:active .button__icon {
  background-color: #146c54;
}

.button:active {
  border: 1px solid #146c54;
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_tidy-yak-47.html
================================================
<button> 
  <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="33" viewBox="0 0 60 60" height="33"><g fill-rule="evenodd" fill="none"><path fill="#00acee" d="m30 60c16.5685433 0 30-13.4314567 30-30s-13.4314567-30-30-30-30 13.4314567-30 30 13.4314567 30 30 30z"></path><path fill="#fff" d="m41.0521385 18.4366943c-1.2089539-1.3744928-2.9316-2.2502302-4.838077-2.2819633-3.6604615-.0609279-6.6284077 3.0321924-6.6284077 6.908385 0 .5501252.0586385 1.0865774.1717154 1.6015572-5.5087846-.3573206-10.3929-3.2259026-13.6619538-7.5499514-.5705539 1.0361399-.8975077 2.2471609-.8975077 3.5444286 0 2.455838 1.1701846 4.6353768 2.9487231 5.922267-1.0865077-.0479675-2.1085616-.3768796-3.0021923-.9164654-.0006462.029493-.0006462.0589929-.0006462.0890105 0 3.4295872 2.2848 6.3067451 5.3170385 6.9769758-.556177.1575997-1.1417539.240078-1.7462308.2360697-.4271077-.0028322-.8424231-.0501962-1.2470769-.13524.8433923 2.8126097 3.2911846 4.8649983 6.1917692 4.93286-2.2684846 1.8830683-5.1264231 3.0045653-8.232 2.998159-.5350154-.0011037-1.0626-.035675-1.5811385-.1021874 2.933377 2.0127143 6.4174385 3.1845715 10.1606077 3.1855535 12.1917923.0031987 18.8589693-10.6066422 18.8589693-19.8093844 0-.3019324-.0066231-.6022496-.0192231-.9011167 1.2950538-.9649855 2.4187154-2.1748628 3.3073385-3.556433-1.1886.5357972-2.4662077.8916496-3.8068154 1.0409189 1.3683923-.8421727 2.419523-2.1900418 2.9143154-3.8063795-1.2808385.7767339-2.6993077 1.3337545-4.2092077 1.6229359z"></path></g></svg></span>
  <span class="text1">Follow me</span>
  <span class="text2">1,2k</span> 
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: button */
button {
  position: relative;
  width: 130px;
  height: 35px;
  border-radius: 30px;
  background-color: white;
  border: 1px #00acee solid;
  overflow: hidden;
}

.text1 {
  font-size: 17px;
  font-weight: 700;
  margin-left: 22%;
}

.text2 {
  position: absolute;
  top: 25%;
  left: -50px;
  font-weight: 700;
  font-size: 14px;
  color: white;
}

.icon {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s;
}

.icon::before {
  position: absolute;
  left: -100px;
  top: 0;
  z-index: -1;
  content: '';
  width: 130px;
  height: 33px;
  border-radius: 30px;
  background-color: #00acee;
}

button:hover .icon {
  transform: translateX(96px);
  transition: transform 0.5s;
}

button:hover .text2 {
  transform: translateX(100px);
  transition: transform 0.6s;
}

button:active {
  transform: scale(1.03);
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_unlucky-vampirebat-84.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: button */
button {
  font-weight: 700;
  font-size: 17px;
  width: 200px;
  height: 60px;
  border: none;
  color: white;
  background-image: linear-gradient(
    to top left,
    hsl(49.04, 100%, 57.06%) 0%,
    hsl(49.04, 100%, 57.06%) 20%,
    hsl(58.89, 45.92%, 53.77%) 20%,
    hsl(58.89, 45.92%, 53.77%) 40%,
    hsl(124.17, 16.44%, 57.06%) 40%,
    hsl(124.17, 16.44%, 57.06%) 60%,
    hsl(200.79, 47.04%, 47.21%) 60%,
    hsl(200.79, 47.04%, 47.21%) 80%,
    hsl(210, 100%, 43.92%) 80%,
    hsl(210, 100%, 43.92%) 100%
  );
  transition: 1s all;
  box-shadow: 0 1px 15px 0 #797f7b;
}

button:hover {
  transform: scale(1.1);
  box-shadow: -2px 2px 10px #616562,
             2px -2px 10px #717774;
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_white-bear-69.html
================================================
<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none" class="svg-icon"><g stroke-width="2" stroke-linecap="round" stroke="#fff" fill-rule="evenodd" clip-rule="evenodd"><path d="m4 9c0-1.10457.89543-2 2-2h2l.44721-.89443c.33879-.67757 1.03131-1.10557 1.78889-1.10557h3.5278c.7576 0 1.4501.428 1.7889 1.10557l.4472.89443h2c1.1046 0 2 .89543 2 2v8c0 1.1046-.8954 2-2 2h-12c-1.10457 0-2-.8954-2-2z"></path><path d="m15 13c0 1.6569-1.3431 3-3 3s-3-1.3431-3-3 1.3431-3 3-3 3 1.3431 3 3z"></path></g></svg>
  <span class="lable">Take a Photo</span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: pink, button, photo, camera, take, take a photo */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px 12px;
  gap: 8px;
  height: 40px;
  width: 172px;
  border: none;
  background: #FF2849;
  border-radius: 20px;
  cursor: pointer;
}

.lable {
  line-height: 22px;
  font-size: 17px;
  color: #fff;
  font-family: sans-serif;
  letter-spacing: 1px;
}

.button:hover {
  background: #e52441;
}

.button:hover .svg-icon {
  animation: flickering 2s linear infinite;
}

@keyframes flickering {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  52% {
    opacity: 1;
  }

  54% {
    opacity: 0;
  }

  56% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  92% {
    opacity: 0;
  }

  94% {
    opacity: 1;
  }

  96% {
    opacity: 0;
  }

  98% {
    opacity: 1;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_yellow-otter-87.html
================================================
<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none" class="svg-icon"><g stroke-width="2" stroke-linecap="round" stroke="#ff342b"><rect y="3" x="9" width="6" rx="3" height="11"></rect><path d="m12 18v3"></path><path d="m8 21h8"></path><path d="m19 11c0 3.866-3.134 7-7 7-3.86599 0-7-3.134-7-7"></path></g></svg>
  <span class="lable">Record</span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: icon, black, button, Microphone, record, opacity */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  gap: 8px;
  height: 40px;
  width: 114px;
  border: none;
  background: #1b1b1cde;
  border-radius: 20px;
  cursor: pointer;
}

.lable {
  line-height: 20px;
  font-size: 17px;
  color: #FF342B;
  font-family: sans-serif;
  letter-spacing: 1px;
}

.button:hover {
  background: #1b1b1c;
}

.button:hover .svg-icon {
  animation: scale 1s linear infinite;
}

@keyframes scale {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05) rotate(10deg);
  }

  100% {
    transform: scale(1);
  }
}
</style>


================================================
FILE: Buttons/andrew-demchenk0_young-chipmunk-91.html
================================================
<button class="button" type="button">
  <span class="button__text">Refresh</span>
  <span class="button__icon"><svg xmlns="http://www.w3.org/2000/svg" width="48" viewBox="0 0 48 48" height="48" class="svg"><path d="M35.3 12.7c-2.89-2.9-6.88-4.7-11.3-4.7-8.84 0-15.98 7.16-15.98 16s7.14 16 15.98 16c7.45 0 13.69-5.1 15.46-12h-4.16c-1.65 4.66-6.07 8-11.3 8-6.63 0-12-5.37-12-12s5.37-12 12-12c3.31 0 6.28 1.38 8.45 3.55l-6.45 6.45h14v-14l-4.7 4.7z"></path><path fill="none" d="M0 0h48v48h-48z"></path></svg></span>
</button>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: blue, button, refresh */
.button {
  position: relative;
  width: 150px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 1px solid #0078E8;
  background-color: #0082FC;
  overflow: hidden;
}

.button, .button__icon, .button__text {
  transition: all 0.3s;
}

.button .button__text {
  transform: translateX(30px);
  color: #fff;
  font-weight: 600;
}

.button .button__icon {
  position: absolute;
  transform: translateX(109px);
  height: 100%;
  width: 39px;
  background-color: #0078E8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button .svg {
  width: 20px;
  fill: #fff;
}

.button:hover {
  background: #0078E8;
}

.button:hover .button__text {
  color: transparent;
}

.button:hover .button__icon {
  width: 148px;
  transform: translateX(0);
}

.button:active .button__icon {
  background-color: #006cd0;
}

.button:active {
  border: 1px solid #006cd0;
}
</style>


================================================
FILE: Buttons/another-kennyotsu_sharp-fox-30.html
================================================
<div class="container">
  <button id="spacebar" class="button">
    <li> space </li> <div id="bump"></div>
  </button> <p>space-themed button.
  <br> literally.</p>
</div>
<style>
/* From Uiverse.io by another-kennyotsu - Tags: button */
/* k k im joking */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
  color: rgb(129, 129, 129);
}

.container p {
  margin-left: 6px;
}

.button {
  transition: 180ms ease-in-out;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 240px;
  height: 68px;
  background: linear-gradient(#ffffff, #7a7a7a);
  border-radius: 10px;
  box-shadow: 10px 15px 30px #0000006b, inset -8px 0 8px rgba(196, 196, 196, 0.25), inset 0 -8px 8px rgba(134, 134, 134, 0.15);
}

.button::before {
  transition: 180ms ease-in-out;
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  bottom: 12px;
  right: 8px;
  background: linear-gradient(90deg, #c0c0c0, #ffffff);
  box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.25),
  10px 5px 10px rgba(0,0,0,0.15);
  border-radius: 10px;
  border-left: 1px solid #0004;
  border-top: 1px solid #0004;
  border-right: 1px solid #0004;
  border-bottom: 1px solid #0004;
}

.button:active {
  box-shadow: 16px 16px 30px rgba(0, 0, 0, 0.25), inset -8px 0 8px rgba(196, 196, 196, 0.25), inset 0 -8px 8px rgba(134, 134, 134, 0.15);
}

.button:active::before {
  transition: 180ms ease-in-out;
  top: 3px;
  left: 1px;
  bottom: 12px;
  right: 6px;
  filter: brightness(0.95);
}

#bump {
  position: absolute;
  bottom: 18px;
  height: 4px;
  width: 24px;
  border-radius: 8px;
  background: rgb(179, 179, 179);
}

.button li {
  list-style: none;
  position: absolute;
  font-size: medium;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  margin-top: 8px;
}
</style>


================================================
FILE: Buttons/anushikchakhoyan_spotty-earwig-3.html
================================================
<!-- From Uiverse.io by anushikchakhoyan - Tags: flat design, button, remove -->
<button class="flex items-center justify-center text-white shadow-md bg-white
                font-medium rounded-full text-sm w-14 h-14 text-center tracking-widest

                after:flex after:items-center after:justify-center after:invisible
                after:bg-[#74bcfb] after:absolute after:z-[-1] after:rounded-full after:shadow-md
                after:hover:translate-x-10 after:hover:-translate-y-12 after:hover:transition-all
                after:hover:ease-linear after:hover:w-10 after:hover:h-10 after:hover:visible after:content-['✓']

                before:flex before:items-center before:justify-center before:invisible
                before:bg-[#74bcfb] before:absolute before:z-[-1] before:rounded-full before:shadow-md
                before:hover:translate-x-16 before:hover:transition-all before:hover:ease-linear
                before:hover:w-10 before:hover:h-10 before:hover:visible before:content-['X']" type="button">
            <svg class="w-6 h-6" viewBox="0, 0, 400,400" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
                <g id="svgg">
                    <path fill-rule="evenodd" fill="#4f4f4f" stroke="none" d="M126.400 9.200 C 126.070 9.413,125.393 9.591,124.895 9.594 C 124.021 9.600,123.646 9.735,121.705 10.738 C 121.213 10.992,120.448 11.200,120.005 11.200 C 119.562 11.200,119.200 11.380,119.200 11.600 C 119.200 11.820,118.880 12.000,118.488 12.000 C 118.097 12.000,117.517 12.360,117.200 12.800 C 116.883 13.240,116.343 13.600,116.000 13.600 C 115.657 13.600,115.117 13.960,114.800 14.400 C 114.483 14.840,113.999 15.200,113.725 15.200 C 113.450 15.200,112.185 16.295,110.913 17.634 C 109.641 18.973,107.283 21.358,105.674 22.934 C 103.082 25.473,99.460 29.096,89.314 39.298 C 87.727 40.894,84.217 44.394,81.514 47.075 C 78.811 49.757,74.845 53.761,72.700 55.974 C 70.555 58.187,68.800 59.890,68.800 59.757 C 68.800 59.625,67.990 60.374,67.000 61.422 C 66.010 62.470,65.200 63.529,65.200 63.775 C 65.200 64.022,64.840 64.483,64.400 64.800 C 63.960 65.117,63.600 65.614,63.600 65.905 C 63.600 66.196,63.240 66.820,62.800 67.292 C 62.360 67.764,62.000 68.387,62.000 68.675 C 62.000 68.964,61.809 69.200,61.576 69.200 C 61.343 69.200,61.248 69.353,61.364 69.541 C 61.480 69.729,61.316 70.224,61.000 70.641 C 60.684 71.058,60.420 71.717,60.413 72.105 C 60.406 72.493,60.238 73.123,60.039 73.505 C 58.723 76.038,58.042 86.664,58.970 90.200 C 59.143 90.860,59.375 91.985,59.486 92.700 C 59.597 93.415,59.848 94.000,60.044 94.000 C 60.240 94.000,60.400 94.525,60.400 95.167 C 60.400 95.808,60.535 96.393,60.700 96.467 C 61.065 96.629,62.800 99.924,62.800 100.456 C 62.800 100.665,63.236 101.272,63.769 101.805 C 64.302 102.338,64.851 103.095,64.989 103.487 C 65.127 103.879,66.138 105.010,67.235 106.000 C 70.311 108.776,74.848 113.295,76.400 115.128 C 77.170 116.038,78.158 116.786,78.597 116.791 C 79.601 116.802,96.000 100.509,96.000 99.499 C 96.000 99.109,93.525 96.300,90.500 93.256 C 84.968 87.688,84.000 86.520,84.000 85.405 C 84.000 85.072,83.820 84.800,83.600 84.800 C 83.380 84.800,83.200 84.451,83.200 84.024 C 83.200 83.597,83.380 83.136,83.600 83.000 C 83.820 82.864,84.000 82.313,84.000 81.776 C 84.000 81.239,84.180 80.800,84.400 80.800 C 84.620 80.800,84.800 80.535,84.800 80.211 C 84.800 79.440,129.440 34.800,130.211 34.800 C 130.535 34.800,130.800 34.620,130.800 34.400 C 130.800 34.171,132.000 34.000,133.600 34.000 C 135.140 34.000,136.400 34.168,136.400 34.373 C 136.400 34.578,136.758 34.860,137.195 34.998 C 137.632 35.137,140.419 37.669,143.389 40.625 C 146.359 43.581,149.112 46.000,149.507 46.000 C 150.508 46.000,166.803 29.576,166.791 28.578 C 166.786 28.150,166.038 27.170,165.128 26.400 C 163.643 25.142,161.478 22.993,155.762 17.100 C 154.748 16.055,153.707 15.200,153.448 15.200 C 153.189 15.200,152.717 14.840,152.400 14.400 C 152.083 13.960,151.503 13.600,151.112 13.600 C 150.720 13.600,150.400 13.448,150.400 13.263 C 150.400 12.948,147.889 11.609,145.600 10.703 C 145.050 10.485,144.287 10.148,143.905 9.953 C 143.523 9.759,142.679 9.600,142.029 9.600 C 141.379 9.600,140.736 9.420,140.600 9.200 C 140.278 8.679,127.207 8.679,126.400 9.200 M235.800 182.597 C 231.542 183.679,228.941 185.634,227.184 189.073 L 226.200 191.000 226.200 264.200 L 226.200 337.400 227.134 339.200 C 228.289 341.425,230.605 343.880,232.200 344.569 C 235.162 345.849,235.774 346.000,238.007 346.000 C 242.408 346.000,246.454 343.292,248.463 339.000 L 249.400 337.000 249.400 264.200 L 249.400 191.400 248.463 189.400 C 246.854 185.968,244.235 183.718,240.543 182.598 C 238.318 181.923,238.451 181.923,235.800 182.597 M182.744 182.753 C 179.246 183.490,175.354 187.256,174.391 190.835 C 174.130 191.802,174.028 217.595,174.096 265.059 L 174.200 337.800 175.101 339.486 C 179.702 348.095,191.343 348.047,195.937 339.400 L 197.000 337.400 197.000 264.200 L 197.000 191.000 195.931 188.975 C 193.375 184.131,188.072 181.629,182.744 182.753 M287.000 182.648 C 283.145 183.642,280.035 186.631,278.521 190.800 C 277.801 192.781,277.760 334.879,278.478 337.354 C 281.686 348.408,296.747 348.941,300.787 338.144 C 301.776 335.499,302.101 194.430,301.125 191.046 C 299.425 185.150,292.733 181.171,287.000 182.648" id="path0"></path>
                    <path fill-rule="evenodd" fill="#fc5c94" stroke="none" d="M326.400 65.600 C 326.400 65.820,325.680 66.000,324.800 66.000 C 323.920 66.000,323.200 66.180,323.200 66.400 C 323.200 66.620,322.660 66.800,322.000 66.800 C 321.340 66.800,320.800 66.980,320.800 67.200 C 320.800 67.420,320.181 67.600,319.424 67.600 C 318.667 67.600,317.936 67.780,317.800 68.000 C 317.664 68.220,317.124 68.400,316.600 68.400 C 316.076 68.400,315.536 68.580,315.400 68.800 C 315.264 69.020,314.623 69.200,313.976 69.200 C 313.329 69.200,312.800 69.380,312.800 69.600 C 312.800 69.820,312.170 70.000,311.400 70.000 C 310.630 70.000,310.000 70.180,310.000 70.400 C 310.000 70.620,309.460 70.800,308.800 70.800 C 308.140 70.800,307.600 70.980,307.600 71.200 C 307.600 71.420,306.981 71.600,306.224 71.600 C 305.467 71.600,304.736 71.780,304.600 72.000 C 304.464 72.220,303.823 72.400,303.176 72.400 C 302.529 72.400,302.000 72.580,302.000 72.800 C 302.000 73.020,301.460 73.200,300.800 73.200 C 300.140 73.200,299.600 73.380,299.600 73.600 C 299.600 73.820,298.880 74.000,298.000 74.000 C 297.120 74.000,296.400 74.156,296.400 74.347 C 296.400 74.538,295.725 74.804,294.900 74.937 C 294.075 75.070,292.410 75.476,291.200 75.838 C 289.990 76.201,288.415 76.585,287.700 76.693 C 286.985 76.800,286.400 77.048,286.400 77.244 C 286.400 77.440,286.008 77.600,285.528 77.600 C 284.608 77.600,282.272 78.260,281.105 78.849 C 280.723 79.042,279.969 79.200,279.429 79.200 C 278.889 79.200,278.336 79.380,278.200 79.600 C 278.064 79.820,277.423 80.000,276.776 80.000 C 276.129 80.000,275.600 80.180,275.600 80.400 C 275.600 80.620,275.060 80.800,274.400 80.800 C 273.740 80.800,273.200 80.960,273.200 81.156 C 273.200 81.352,272.570 81.622,271.800 81.756 C 271.030 81.890,269.770 82.110,269.000 82.244 C 268.230 82.378,267.600 82.648,267.600 82.844 C 267.600 83.040,267.060 83.200,266.400 83.200 C 265.740 83.200,265.200 83.380,265.200 83.600 C 265.200 83.820,264.581 84.000,263.824 84.000 C 263.067 84.000,262.336 84.180,262.200 84.400 C 262.064 84.620,261.513 84.800,260.976 84.800 C 260.439 84.800,260.000 84.980,260.000 85.200 C 260.000 85.420,259.381 85.600,258.624 85.600 C 257.867 85.600,257.136 85.780,257.000 86.000 C 256.864 86.220,256.223 86.400,255.576 86.400 C 254.929 86.400,254.400 86.580,254.400 86.800 C 254.400 87.020,253.860 87.200,253.200 87.200 C 252.540 87.200,252.000 87.380,252.000 87.600 C 252.000 87.820,251.370 88.000,250.600 88.000 C 249.830 88.000,249.200 88.180,249.200 88.400 C 249.200 88.620,248.874 88.800,248.475 88.800 C 248.077 88.800,247.364 89.160,246.892 89.600 C 246.420 90.040,245.832 90.400,245.585 90.400 C 245.000 90.400,240.400 95.000,240.400 95.585 C 240.400 95.832,240.040 96.420,239.600 96.892 C 239.160 97.364,238.800 98.167,238.800 98.675 C 238.800 99.184,238.620 99.600,238.400 99.600 C 238.180 99.600,238.000 100.140,238.000 100.800 C 238.000 101.460,237.820 102.000,237.600 102.000 C 237.342 102.000,237.200 106.600,237.200 115.000 L 237.200 128.000 293.300 128.005 C 324.155 128.008,349.805 128.119,350.300 128.252 L 351.200 128.493 351.200 106.070 C 351.200 91.553,351.059 83.560,350.800 83.400 C 350.580 83.264,350.400 82.364,350.400 81.400 C 350.400 80.436,350.220 79.536,350.000 79.400 C 349.780 79.264,349.600 78.713,349.600 78.176 C 349.600 77.639,349.420 77.200,349.200 77.200 C 348.980 77.200,348.800 76.840,348.800 76.400 C 348.800 75.960,348.620 75.600,348.400 75.600 C 348.180 75.600,348.000 75.327,348.000 74.994 C 348.000 74.151,342.423 68.654,340.872 67.968 C 340.172 67.658,339.600 67.269,339.600 67.102 C 339.600 66.936,339.251 66.800,338.824 66.800 C 338.397 66.800,337.936 66.620,337.800 66.400 C 337.664 66.180,337.034 66.000,336.400 66.000 C 335.766 66.000,335.136 65.820,335.000 65.600 C 334.861 65.375,332.929 65.200,330.576 65.200 C 328.059 65.200,326.400 65.359,326.400 65.600" id="path1"></path>
                    <path fill-rule="evenodd" fill="#74bbfb" stroke="none" d="M122.000 73.600 C 122.504 73.926,122.480 73.989,121.847 73.994 C 121.110 74.000,119.600 75.389,119.600 76.061 C 119.600 76.248,119.358 76.400,119.061 76.400 C 118.435 76.400,116.724 77.790,117.004 78.071 C 117.109 78.175,116.567 78.761,115.800 79.373 C 115.033 79.984,114.522 80.673,114.664 80.904 C 114.807 81.135,114.735 81.207,114.505 81.065 C 114.274 80.922,113.661 81.343,113.143 81.999 C 112.624 82.656,111.975 83.194,111.700 83.196 C 111.425 83.198,111.200 83.538,111.200 83.951 C 111.200 84.364,110.895 84.949,110.523 85.251 C 110.063 85.624,109.943 85.640,110.147 85.300 C 110.312 85.025,110.257 84.800,110.024 84.800 C 109.791 84.800,109.600 85.051,109.600 85.357 C 109.600 85.664,109.319 86.022,108.975 86.154 C 108.631 86.286,108.461 86.576,108.598 86.797 C 108.735 87.019,108.648 87.200,108.405 87.200 C 107.656 87.200,105.960 89.115,106.511 89.339 C 106.780 89.448,106.667 89.551,106.260 89.568 C 105.517 89.600,103.200 91.775,103.200 92.442 C 103.200 92.639,103.065 92.771,102.900 92.736 C 102.378 92.626,101.200 93.270,101.200 93.666 C 101.200 93.876,101.425 93.936,101.700 93.799 C 101.975 93.663,101.785 93.877,101.277 94.276 C 98.522 96.438,95.989 98.994,96.160 99.440 C 96.615 100.627,80.087 117.330,78.669 117.117 C 77.754 116.979,76.400 118.139,76.400 119.061 C 76.400 119.358,76.248 119.600,76.061 119.600 C 75.389 119.600,74.000 121.110,73.994 121.847 C 73.989 122.480,73.926 122.504,73.600 122.000 C 73.286 121.515,73.211 121.572,73.206 122.300 C 73.202 122.963,72.963 123.202,72.300 123.206 C 71.572 123.211,71.515 123.286,72.000 123.600 C 72.504 123.926,72.480 123.989,71.847 123.994 C 71.110 124.000,69.600 125.389,69.600 126.061 C 69.600 126.248,69.358 126.400,69.061 126.400 C 68.435 126.400,66.724 127.790,67.004 128.071 C 67.109 128.175,66.567 128.761,65.800 129.373 C 65.033 129.984,64.522 130.673,64.664 130.904 C 64.807 131.135,64.735 131.207,64.505 131.065 C 64.274 130.922,63.661 131.343,63.143 131.999 C 62.624 132.656,61.975 133.194,61.700 133.196 C 61.425 133.198,61.200 133.538,61.200 133.951 C 61.200 134.364,60.895 134.949,60.523 135.251 C 60.063 135.624,59.943 135.640,60.147 135.300 C 60.312 135.025,60.257 134.800,60.024 134.800 C 59.791 134.800,59.600 135.051,59.600 135.357 C 59.600 135.664,59.319 136.022,58.975 136.154 C 58.631 136.286,58.461 136.576,58.598 136.797 C 58.735 137.019,58.644 137.200,58.395 137.200 C 57.785 137.200,56.776 138.242,57.086 138.552 C 57.222 138.689,57.023 138.800,56.643 138.800 C 56.263 138.800,56.025 138.935,56.113 139.100 C 56.337 139.519,54.927 140.793,54.600 140.467 C 54.453 140.320,54.370 140.380,54.414 140.600 C 54.573 141.387,54.395 142.529,54.152 142.286 C 53.797 141.931,52.800 143.026,52.800 143.771 C 52.800 144.117,52.601 144.400,52.357 144.400 C 52.114 144.400,52.021 144.677,52.150 145.015 C 52.285 145.365,52.131 145.728,51.793 145.858 C 51.467 145.983,51.200 146.416,51.200 146.819 C 51.200 147.223,51.020 147.664,50.800 147.800 C 50.580 147.936,50.400 148.667,50.400 149.424 C 50.400 150.181,50.220 150.800,50.000 150.800 C 49.780 150.800,49.600 151.599,49.600 152.576 C 49.600 153.553,49.424 154.462,49.208 154.595 C 48.761 154.871,48.958 159.720,49.521 162.300 C 49.726 163.235,49.837 164.000,49.770 164.000 C 49.703 164.000,49.893 164.472,50.192 165.050 C 50.492 165.627,50.635 166.365,50.510 166.690 C 50.385 167.015,50.472 167.398,50.702 167.540 C 50.932 167.683,51.183 168.160,51.260 168.600 C 51.337 169.040,51.544 169.506,51.720 169.636 C 51.896 169.766,52.069 170.256,52.104 170.726 C 52.140 171.195,52.412 171.673,52.710 171.787 C 53.007 171.901,53.139 172.176,53.002 172.397 C 52.865 172.619,52.943 172.800,53.176 172.800 C 53.409 172.800,53.600 173.081,53.600 173.424 C 53.600 173.767,53.780 173.936,54.000 173.800 C 54.220 173.664,54.400 173.844,54.400 174.200 C 54.400 174.556,54.580 174.736,54.800 174.600 C 55.020 174.464,55.200 174.650,55.200 175.014 C 55.200 175.377,55.560 175.769,56.000 175.884 C 56.440 175.999,56.800 176.344,56.800 176.650 C 56.800 177.324,58.907 179.600,59.531 179.600 C 59.781 179.600,59.863 179.891,59.719 180.266 C 59.548 180.713,59.617 180.836,59.932 180.642 C 60.213 180.468,60.400 180.602,60.400 180.976 C 60.400 181.547,60.880 181.785,61.730 181.637 C 61.911 181.606,61.975 181.720,61.872 181.890 C 61.768 182.061,61.935 182.432,62.242 182.716 C 62.549 182.999,62.803 183.089,62.806 182.916 C 62.809 182.742,63.049 183.050,63.339 183.600 C 63.628 184.150,64.076 184.555,64.333 184.500 C 64.590 184.445,64.755 184.625,64.700 184.900 C 64.645 185.175,64.825 185.355,65.100 185.300 C 65.375 185.245,65.555 185.410,65.500 185.667 C 65.445 185.924,65.850 186.372,66.400 186.661 C 66.950 186.951,67.258 187.191,67.084 187.194 C 66.911 187.197,67.001 187.451,67.284 187.758 C 67.568 188.065,67.939 188.232,68.110 188.128 C 68.280 188.025,68.394 188.089,68.363 188.270 C 68.215 189.120,68.453 189.600,69.024 189.600 C 69.398 189.600,69.532 189.787,69.358 190.068 C 69.164 190.383,69.287 190.452,69.734 190.281 C 70.136 190.126,70.400 190.223,70.400 190.524 C 70.400 191.098,71.807 192.400,72.428 192.400 C 72.659 192.400,72.736 192.580,72.600 192.800 C 72.464 193.020,72.663 193.200,73.043 193.200 C 73.423 193.200,73.620 193.314,73.481 193.453 C 73.342 193.592,74.032 194.465,75.014 195.393 C 75.996 196.321,76.800 197.205,76.800 197.358 C 76.800 197.796,78.717 199.600,79.182 199.600 C 79.412 199.600,79.600 199.791,79.600 200.024 C 79.600 200.257,79.765 200.345,79.968 200.220 C 80.170 200.095,80.607 200.264,80.939 200.596 C 81.271 200.928,81.736 201.200,81.971 201.200 C 82.207 201.200,82.400 201.380,82.400 201.600 C 82.400 201.843,84.200 202.000,87.000 202.000 C 89.530 202.000,91.602 201.865,91.605 201.700 C 91.607 201.535,92.329 201.055,93.208 200.634 C 94.926 199.811,100.400 194.771,100.400 194.012 C 100.400 193.759,100.535 193.621,100.700 193.705 C 100.985 193.849,109.602 185.422,109.601 185.001 C 109.600 184.890,109.694 184.804,109.808 184.808 C 110.222 184.825,111.111 183.792,110.934 183.500 C 110.835 183.335,110.948 183.200,111.187 183.200 C 111.780 183.200,115.203 179.737,114.905 179.439 C 114.774 179.307,114.977 179.200,115.357 179.200 C 115.737 179.200,115.936 179.020,115.800 178.800 C 115.664 178.580,115.756 178.400,116.005 178.400 C 116.615 178.400,117.624 177.358,117.314 177.048 C 117.178 176.911,117.377 176.800,117.757 176.800 C 118.137 176.800,118.364 176.665,118.263 176.500 C 118.161 176.335,118.686 175.750,119.428 175.200 C 120.171 174.650,120.783 173.975,120.789 173.700 C 120.795 173.425,120.935 173.245,121.100 173.300 C 121.491 173.430,123.430 171.491,123.300 171.100 C 123.245 170.935,123.458 170.800,123.773 170.800 C 124.088 170.800,124.471 170.408,124.623 169.928 C 125.005 168.723,167.200 126.595,167.200 127.418 C 167.200 127.536,167.451 127.399,167.758 127.116 C 168.065 126.832,168.234 126.465,168.134 126.300 C 168.035 126.135,168.098 125.998,168.276 125.995 C 168.454 125.992,169.352 125.292,170.271 124.438 L 171.942 122.886 147.137 98.043 C 133.494 84.379,122.122 73.203,121.866 73.206 C 121.600 73.210,121.658 73.379,122.000 73.600 M237.787 128.900 C 237.684 129.175,237.554 141.169,237.500 155.554 L 237.400 181.709 235.292 182.248 C 230.966 183.355,226.400 187.391,226.400 190.106 C 226.400 190.371,226.778 189.871,227.239 188.994 C 231.996 179.959,244.148 180.192,248.463 189.400 L 249.400 191.400 249.400 264.200 L 249.400 337.000 248.463 339.000 C 246.454 343.292,242.408 346.000,238.007 346.000 C 235.774 346.000,235.162 345.849,232.200 344.569 C 230.672 343.909,228.322 341.463,227.239 339.406 C 226.778 338.529,226.400 338.037,226.400 338.311 C 226.400 341.193,232.810 346.400,236.357 346.400 L 237.600 346.400 237.600 373.216 L 237.600 400.031 274.667 399.916 C 303.882 399.825,311.769 399.694,311.900 399.300 C 311.992 399.025,312.671 398.800,313.410 398.800 C 314.148 398.800,314.864 398.620,315.000 398.400 C 315.136 398.180,315.687 398.000,316.224 398.000 C 316.761 398.000,317.200 397.820,317.200 397.600 C 317.200 397.380,317.650 397.200,318.200 397.200 C 318.750 397.200,319.200 397.020,319.200 396.800 C 319.200 396.580,319.470 396.400,319.800 396.400 C 320.130 396.400,320.400 396.220,320.400 396.000 C 320.400 395.780,320.591 395.600,320.824 395.600 C 321.057 395.600,321.136 395.780,321.000 396.000 C 320.864 396.220,320.931 396.400,321.149 396.400 C 321.368 396.400,321.660 396.040,321.800 395.600 C 321.979 395.035,322.405 394.800,323.251 394.800 C 323.909 394.800,324.358 394.656,324.249 394.480 C 324.141 394.304,324.419 393.931,324.868 393.651 C 325.538 393.232,325.627 393.235,325.365 393.670 C 325.042 394.208,325.973 393.588,327.131 392.496 C 327.424 392.219,327.811 392.083,327.990 392.194 C 328.170 392.305,328.420 392.124,328.548 391.792 C 328.675 391.460,329.189 391.003,329.690 390.777 C 331.402 390.003,332.395 389.329,332.163 389.097 C 332.036 388.969,332.266 388.686,332.675 388.467 C 333.616 387.963,338.400 383.168,338.400 382.728 C 338.400 382.548,338.670 382.400,339.000 382.400 C 339.544 382.400,339.780 381.920,339.644 381.089 C 339.616 380.918,339.864 380.673,340.196 380.546 C 340.528 380.419,340.800 380.064,340.800 379.757 C 340.800 379.451,340.980 379.200,341.200 379.200 C 341.420 379.200,341.600 378.880,341.600 378.488 C 341.600 378.097,341.950 377.524,342.379 377.215 C 342.807 376.907,343.066 376.507,342.955 376.327 C 342.844 376.147,343.044 376.000,343.400 376.000 C 343.756 376.000,343.945 375.835,343.820 375.632 C 343.695 375.430,343.887 374.970,344.246 374.611 C 344.606 374.251,344.900 373.509,344.900 372.962 C 344.900 372.415,344.989 372.056,345.098 372.164 C 345.503 372.569,346.400 371.220,346.400 370.205 C 346.400 369.511,346.557 369.250,346.862 369.438 C 347.118 369.596,347.216 369.550,347.082 369.333 C 346.950 369.118,347.102 368.440,347.420 367.826 C 347.739 367.211,348.000 366.384,348.000 365.987 C 348.000 365.591,348.360 364.426,348.800 363.400 C 349.240 362.374,349.600 361.109,349.600 360.590 C 349.600 360.072,349.780 359.536,350.000 359.400 C 350.220 359.264,350.397 358.938,350.394 358.676 C 350.390 358.382,350.223 358.429,349.956 358.800 C 349.613 359.277,349.589 359.236,349.836 358.600 C 350.007 358.160,350.223 356.810,350.315 355.600 C 350.408 354.390,350.690 353.265,350.942 353.100 C 351.270 352.885,351.229 352.686,350.800 352.400 C 350.416 352.144,350.347 351.892,350.608 351.700 C 351.079 351.354,351.144 349.414,350.700 348.968 C 350.535 348.802,350.400 299.391,350.400 239.166 C 350.400 178.941,350.291 129.381,350.157 129.033 C 349.830 128.180,238.107 128.048,237.787 128.900 M350.997 245.400 C 350.997 302.380,351.043 325.631,351.100 297.068 C 351.157 268.505,351.157 221.885,351.100 193.468 C 351.043 165.051,350.997 188.420,350.997 245.400 M182.647 182.331 C 182.192 182.522,183.222 182.652,185.247 182.659 C 190.326 182.675,193.640 184.634,195.931 188.975 L 197.000 191.000 197.000 264.200 L 197.000 337.400 195.937 339.400 C 191.343 348.047,179.702 348.095,175.101 339.486 L 174.200 337.800 174.096 265.059 C 174.028 217.595,174.130 191.802,174.391 190.835 C 175.060 188.349,177.084 185.734,179.517 184.212 C 181.980 182.672,182.050 182.350,179.657 183.571 C 176.945 184.954,174.952 187.633,173.661 191.628 C 173.010 193.646,172.999 334.171,173.650 336.554 C 176.847 348.242,191.157 349.962,196.459 339.294 L 197.400 337.400 197.400 264.200 L 197.400 191.000 196.419 189.021 C 193.941 184.022,186.835 180.571,182.647 182.331 M295.022 183.602 C 297.974 185.241,300.253 188.021,301.125 191.046 C 302.101 194.430,301.776 335.499,300.787 338.144 C 296.747 348.941,281.686 348.408,278.478 337.354 C 277.760 334.879,277.801 192.781,278.521 190.800 C 281.093 183.721,289.013 180.266,295.022 183.602 M225.867 191.067 C 225.496 191.437,225.529 337.109,225.900 337.338 C 226.065 337.440,226.200 304.511,226.200 264.162 C 226.200 223.813,226.185 190.800,226.167 190.800 C 226.148 190.800,226.013 190.920,225.867 191.067" id="path2"></path>
                    <path fill-rule="evenodd" fill="#0484fb" stroke="none" d="M199.300 0.265 C 198.585 0.367,198.000 0.619,198.000 0.825 C 198.000 1.031,197.449 1.200,196.776 1.200 C 196.063 1.200,195.656 1.367,195.800 1.600 C 195.940 1.827,195.604 2.000,195.024 2.000 C 194.461 2.000,194.000 2.180,194.000 2.400 C 194.000 2.620,193.770 2.800,193.488 2.800 C 193.207 2.800,192.717 3.160,192.400 3.600 C 192.083 4.040,191.619 4.400,191.369 4.400 C 190.651 4.400,182.790 11.961,172.992 22.076 C 171.008 24.124,168.805 26.250,168.096 26.800 C 167.387 27.350,166.806 28.150,166.804 28.578 C 166.799 29.586,150.496 46.000,149.500 46.000 C 149.102 46.000,147.296 47.540,145.488 49.422 C 142.100 52.948,140.168 54.888,131.600 63.372 C 125.487 69.424,122.400 72.716,122.400 73.182 C 122.400 73.375,122.265 73.609,122.100 73.701 C 121.935 73.793,122.019 73.816,122.286 73.752 C 122.553 73.688,133.820 84.703,147.324 98.229 C 163.700 114.633,172.070 122.748,172.459 122.599 C 172.779 122.476,173.302 121.990,173.621 121.518 C 173.939 121.046,177.350 117.544,181.200 113.734 C 185.050 109.925,188.695 106.311,189.299 105.704 C 190.729 104.268,204.152 90.845,205.654 89.350 C 206.289 88.717,209.952 85.050,213.795 81.200 C 222.283 72.696,232.130 62.855,239.308 55.704 C 245.522 49.513,250.400 44.275,250.400 43.792 C 250.400 43.466,250.580 43.200,250.800 43.200 C 251.020 43.200,251.200 42.851,251.200 42.424 C 251.200 41.997,251.380 41.536,251.600 41.400 C 251.823 41.262,252.000 39.396,252.000 37.176 C 252.000 34.792,251.840 33.200,251.600 33.200 C 251.380 33.200,251.200 32.750,251.200 32.201 C 251.200 31.611,250.634 30.602,249.817 29.735 C 249.056 28.929,248.527 28.119,248.640 27.935 C 248.754 27.751,248.665 27.600,248.443 27.600 C 247.883 27.600,238.800 18.561,238.800 18.004 C 238.800 17.756,238.665 17.615,238.500 17.691 C 238.116 17.867,232.042 11.692,232.323 11.411 C 232.439 11.295,232.303 11.200,232.022 11.200 C 231.740 11.200,230.374 10.030,228.985 8.600 C 227.597 7.170,226.250 6.000,225.991 6.000 C 225.732 6.000,225.017 5.460,224.400 4.800 C 223.783 4.140,223.081 3.600,222.840 3.600 C 222.598 3.600,222.400 3.420,222.400 3.200 C 222.400 2.980,222.040 2.800,221.600 2.800 C 221.160 2.800,220.800 2.620,220.800 2.400 C 220.800 2.180,220.440 2.000,220.000 2.000 C 219.560 2.000,219.200 1.820,219.200 1.600 C 219.200 1.380,218.855 1.200,218.433 1.200 C 218.012 1.200,217.595 0.985,217.507 0.721 C 217.345 0.235,202.179 -0.145,199.300 0.265 M100.600 94.400 C 99.940 94.837,99.605 95.196,99.856 95.197 C 100.293 95.200,102.411 93.638,102.000 93.616 C 101.890 93.610,101.260 93.963,100.600 94.400 M87.617 108.583 C 83.121 113.083,79.073 116.838,78.621 116.928 C 77.859 117.079,77.865 117.095,78.693 117.146 C 79.459 117.192,91.433 105.792,95.362 101.276 C 97.433 98.895,95.049 101.144,87.617 108.583" id="path3"></path>
                    <path fill-rule="evenodd" fill="#9cccfb" stroke="none" d="M165.779 128.474 C 165.130 128.976,155.644 138.337,144.698 149.276 L 124.795 169.166 124.907 263.883 C 124.969 315.977,125.137 359.140,125.280 359.800 C 125.423 360.460,125.708 361.450,125.913 362.000 C 126.117 362.550,126.211 363.209,126.121 363.463 C 126.031 363.718,126.147 364.044,126.379 364.187 C 126.610 364.330,126.800 364.876,126.800 365.400 C 126.800 365.924,126.980 366.464,127.200 366.600 C 127.420 366.736,127.600 367.287,127.600 367.824 C 127.600 368.361,127.780 368.800,128.000 368.800 C 128.220 368.800,128.400 369.160,128.400 369.600 C 128.400 370.040,128.580 370.400,128.800 370.400 C 129.020 370.400,129.200 370.653,129.200 370.962 C 129.200 371.688,130.822 374.822,131.600 375.600 C 131.930 375.930,132.258 376.470,132.330 376.800 C 132.401 377.130,132.626 377.460,132.830 377.533 C 133.033 377.607,133.200 377.939,133.200 378.273 C 133.200 378.606,133.740 379.383,134.400 380.000 C 135.060 380.617,135.600 381.409,135.600 381.760 C 135.600 382.112,135.900 382.400,136.267 382.400 C 136.633 382.400,136.823 382.510,136.688 382.645 C 136.388 382.945,142.234 388.711,144.186 390.040 C 144.960 390.568,145.596 391.135,145.597 391.300 C 145.599 391.465,145.920 391.600,146.312 391.600 C 146.703 391.600,147.283 391.960,147.600 392.400 C 147.917 392.840,148.497 393.200,148.888 393.200 C 149.280 393.200,149.600 393.380,149.600 393.600 C 149.600 393.820,149.960 394.000,150.400 394.000 C 150.840 394.000,151.201 394.135,151.203 394.300 C 151.207 394.659,153.144 395.600,153.880 395.600 C 154.166 395.600,154.400 395.780,154.400 396.000 C 154.400 396.220,154.760 396.400,155.200 396.400 C 155.640 396.400,156.000 396.580,156.000 396.800 C 156.000 397.020,156.349 397.200,156.776 397.200 C 157.203 397.200,157.664 397.380,157.800 397.600 C 157.936 397.820,158.487 398.000,159.024 398.000 C 159.561 398.000,160.000 398.161,160.000 398.358 C 160.000 398.555,160.675 398.816,161.500 398.938 C 162.325 399.060,163.990 399.335,165.200 399.550 C 166.514 399.784,181.538 399.953,202.500 399.971 L 237.600 400.000 237.600 373.200 L 237.600 346.400 236.357 346.400 C 233.124 346.400,228.390 342.919,226.836 339.400 C 226.545 338.740,226.148 337.887,225.953 337.505 C 225.475 336.565,225.488 191.802,225.966 190.895 C 226.168 190.513,226.640 189.496,227.016 188.636 C 228.339 185.603,231.394 183.246,235.292 182.248 L 237.400 181.709 237.600 155.154 L 237.800 128.600 293.776 128.499 C 338.292 128.418,349.816 128.500,350.069 128.899 C 350.244 129.174,350.391 178.754,350.394 239.076 C 350.397 299.398,350.535 348.836,350.700 348.938 C 350.865 349.040,351.000 299.460,351.000 238.761 L 351.000 128.399 349.800 128.220 C 349.140 128.121,307.730 127.933,257.779 127.801 L 166.957 127.561 165.779 128.474 M190.477 183.136 C 192.948 184.338,195.206 186.574,196.419 189.021 L 197.400 191.000 197.400 264.200 L 197.400 337.400 196.459 339.294 C 191.157 349.962,176.847 348.242,173.650 336.554 C 173.004 334.189,173.009 193.654,173.656 191.628 C 176.197 183.671,183.745 179.860,190.477 183.136" id="path4"></path>
                </g>
            </svg>
        </button>



================================================
FILE: Buttons/anushkaps_nasty-mouse-56.html
================================================
<button class="button">
  <div class="in">
    <div class="image">
      <svg
        fill="#000000"
        width="25px"
        height="25px"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        transform="rotate(-45)"
      >
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g
          id="SVGRepo_tracerCarrier"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <path
            d="M20.34,9.32l-14-7a3,3,0,0,0-4.08,3.9l2.4,5.37h0a1.06,1.06,0,0,1,0,.82l-2.4,5.37A3,3,0,0,0,5,22a3.14,3.14,0,0,0,1.35-.32l14-7a3,3,0,0,0,0-5.36Zm-.89,3.57-14,7a1,1,0,0,1-1.35-1.3l2.39-5.37A2,2,0,0,0,6.57,13h6.89a1,1,0,0,0,0-2H6.57a2,2,0,0,0-.08-.22L4.1,5.41a1,1,0,0,1,1.35-1.3l14,7a1,1,0,0,1,0,1.78Z"
          ></path>
        </g>
      </svg>
    </div>
    <div class="text">Send Message</div>
  </div>
</button>

<style>
/* From Uiverse.io by anushkaps  - Tags: animation, alert, gradient, button, code, svg, arrow, 2d button */
.button {
  cursor: pointer;
  height: 6em;
  width: 18em;
  border-radius: 1em;
  border-top: 0.2em solid #b0b1b0;
  border-bottom: 0.2em solid #50504f;
  border-left: 0.2em solid #848584;
  border-right: 0.2em solid #848584;
  box-shadow: 0.3em 0.3em 0.5em #a9aaa9;
  background: linear-gradient(to bottom, #fbfcfb, #ecedec);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 0.2em;
  background: linear-gradient(135deg, #b0b1b0, #848584, #50504f);
  z-index: -1;
}

.in {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 4.8em;
  width: 16.9em;
  border-radius: 2em;
  background: linear-gradient(to bottom, #eceeec, #ffffff);
  transition: background 2s, transform 2s ease;
}

.text {
  font-size: 21px;
  font-weight: bold;
  width: 9em;
  color: #252625;
  transition: transform 0.6s ease-in-out;
}

.image {
  padding-left: 1.2em;
  transition: transform 0.3s ease-in-out;
}

.image svg {
  transition: transform 0.6s ease-in-out; /* Smooth rotation */
}

.button:hover .in {
  background: linear-gradient(to bottom, #ffffff, #eceeec);
  transform: scale(1.05);
}

.button:hover .image {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

.button:hover svg {
  transform: translateX(6.5em) rotate(2deg);
}

.button:hover .text {
  transform: translateX(9em);
}

.button:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }
  to {
    transform: translateY(-0.1em);
  }
}

</style>
    

================================================
FILE: Buttons/arieshiphop_honest-mole-71.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by arieshiphop - Tags: button */
button {
 font-size: 17px;
 padding: 0.5em 2em;
 border: transparent;
 box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
 background: dodgerblue;
 color: white;
 border-radius: 4px;
}

button:hover {
 background: rgb(2,0,36);
 background: linear-gradient(90deg, rgba(30,144,255,1) 0%, rgba(0,212,255,1) 100%);
}

button:active {
 transform: translate(0em, 0.2em);
}
</style>


================================================
FILE: Buttons/arshshaikh06_friendly-jellyfish-23.html
================================================
<div id="button-container">
<button class="button" id="youtube">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
  <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
</svg>
</button>
<button class="button" id="github">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
</button>
<button class="button" id="dribbble">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"></circle>
  <path d="M8.56 2.75c4.37 6.03 6.02 9.42 8.03 17.72m2.54-15.38c-3.72 4.35-8.94 5.66-16.88 5.85m19.5 1.9c-3.5-.93-6.63-.82-8.94 0-2.58.92-5.01 2.86-7.44 6.32"></path>
</svg>
</button>
<button class="button" id="instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
</svg>
</button>
<button class="button" id="facebook">
<svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>
</button>
<button class="button" id="share">
<svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
  <circle r="3" cy="5" cx="18"></circle>
  <circle r="3" cy="12" cx="6"></circle>
  <circle r="3" cy="19" cx="18"></circle>
  <line y2="17.49" x2="15.42" y1="13.51" x1="8.59"></line>
  <line y2="10.49" x2="8.59" y1="6.51" x1="15.41"></line>
</svg>
</button>
</div>
<style>
/* From Uiverse.io by arshshaikh06 - Source: https://www.behance.net/gallery/117113957/Social-Share-Animation-Daily-UI-010 - Tags: button, hover, hover button, css button, css animation, cool button, button hover effect  */
#button-container {
  position: relative;
}

.button {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% 50%;
  background: #F4F7F5;
  border: none;
  border-radius: 25px;
  height: 50px;
  width: 50px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease-in;
}

#share {
  color: #DC0654;
  background: #fbe6ed;
}

#facebook {
  background: linear-gradient(-160deg, #00D2FF, #3A7BD5);
}

#instagram {
  background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCB045);
}

#dribbble {
  background: linear-gradient(-70deg, #D70652, #FF025E);
}

#github {
  background: linear-gradient(-70deg, #171515, #FF025E);
}

#youtube {
  background: #FF0000;
}

#button-container:hover button {
  rotate: 360deg;
}

#button-container:hover #share {
  rotate: 270deg;
}

#button-container:hover > #facebook {
  translate: -300% 50%;
}

#button-container:hover > #instagram {
  translate: -226.78% -126.78%;
}

#button-container:hover > #dribbble {
  translate: -50% -200%;
}

#button-container:hover > #github {
  translate: 126.78% -126.78%;
}

#button-container:hover > #youtube {
  translate: 200% 50%;
}
</style>


================================================
FILE: Buttons/aryansagar2405_bitter-baboon-4.html
================================================
<div class="share-wrapper">
  <input id="share-toggle" type="checkbox" class="check" />
  <label for="share-toggle" class="container">
    <svg
      class="icon inactive"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path
        d="M18 16.08C17.24 16.08 16.56 16.38 16.05 16.87L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.95 7.13C16.46 7.62 17.24 7.92 18 7.92C19.66 7.92 21 6.58 21 4.92C21 3.26 19.66 1.92 18 1.92C16.34 1.92 15 3.26 15 4.92C15 5.16 15.04 5.39 15.09 5.62L8.05 9.79C7.54 9.3 6.76 9 6 9C4.34 9 3 10.34 3 12C3 13.66 4.34 15 6 15C6.76 15 7.54 14.7 8.05 14.21L15.18 18.38C15.13 18.61 15.09 18.84 15.09 19.08C15.09 20.74 16.43 22.08 18.09 22.08C19.75 22.08 21.09 20.74 21.09 19.08C21.09 17.42 19.75 16.08 18 16.08Z"
      ></path>
    </svg>
    <svg
      class="icon active"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path
        d="M18 16.08C17.24 16.08 16.56 16.38 16.05 16.87L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.95 7.13C16.46 7.62 17.24 7.92 18 7.92C19.66 7.92 21 6.58 21 4.92C21 3.26 19.66 1.92 18 1.92C16.34 1.92 15 3.26 15 4.92C15 5.16 15.04 5.39 15.09 5.62L8.05 9.79C7.54 9.3 6.76 9 6 9C4.34 9 3 10.34 3 12C3 13.66 4.34 15 6 15C6.76 15 7.54 14.7 8.05 14.21L15.18 18.38C15.13 18.61 15.09 18.84 15.09 19.08C15.09 20.74 16.43 22.08 18.09 22.08C19.75 22.08 21.09 20.74 21.09 19.08C21.09 17.42 19.75 16.08 18 16.08Z"
      ></path>
    </svg>
    <div class="checkmark"></div>
    <span class="share-text">Share</span>
  </label>
</div>

<style>
/* From Uiverse.io by aryansagar2405  - Tags: button */
.share-wrapper {
  --gap: 0.5em;
  --radius: 0.35em;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  --dot-bg: #212121;
  --dot-color: #313131;
  --dot-size: 1px;
  --dot-space: 22px;
  background:
    linear-gradient(
        90deg,
        var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),
        transparent 1%
      )
      center / var(--dot-space) var(--dot-space),
    linear-gradient(
        var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),
        transparent 1%
      )
      center / var(--dot-space) var(--dot-space),
    var(--dot-color);
  border: 0.1em solid #313131;
  padding: 0.5em;
  border-radius: var(--radius);
  box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.check[type="checkbox"] {
  display: none;
}

.container {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-top: -0.25em;
  margin-bottom: -0.25em;
}

.icon {
  width: 1.5em;
  height: 1.5em;
  margin-left: 0.5em;
  fill: white;
  transition: opacity 0.3s ease-in-out;
}

.icon.active {
  display: none;
  fill: #2196f3;
}

.check[type="checkbox"]:checked + .container .icon.active {
  display: inline-block;
  animation: pop 0.5s ease-in-out;
}

.check[type="checkbox"]:checked + .container .icon.inactive {
  display: none;
}

.share-text {
  margin-left: 0.5em;
  padding: 0.5em;
  color: white;
  font-family: Arial, sans-serif;
  font-weight: bolder;
}

@keyframes pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

</style>
    

================================================
FILE: Buttons/aryansagar2405_cowardly-treefrog-50.html
================================================
<div class="button-container">
  <button class="styled-button">Join Today <span class="arrow">→</span></button>
</div>

<style>
/* From Uiverse.io by aryansagar2405  - Tags: button */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f0ff;
  margin: 0;
  font-family: Arial, sans-serif;
}

.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.styled-button {
  background: linear-gradient(145deg, #c77dff, #9a49f0);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 15px 40px;
  font-size: 1.2em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
  transform: rotateY(-5deg) rotateX(2deg);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
}

.styled-button .arrow {
  font-size: 1.2em;
  margin-left: 10px;
}

.styled-button:hover {
  transform: rotateY(-5deg) rotateX(2deg) translateY(-5px);
  box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.4);
}

</style>
    

================================================
FILE: Buttons/asgardOP_light-shrimp-73.html
================================================
<button class="button">
  <div>
    <svg
      viewBox="0 0 24 24"
      fill="none"
      height="24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      class="w-6 h-6 text-gray-800 dark:text-white"
    >
      <path
        d="m12 18-7 3 7-18 7 18-7-3Zm0 0v-5"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke="currentColor"
      ></path>
    </svg>
    Send Message
  </div>
</button>

<style>
/* From Uiverse.io by asgardOP  - Tags: simple, animation, white, button, message, modern, btn, click animation */
.button {
  width: 170px;
  height: 55px;
  border-radius: 10px;
  border: 1px solid gray;
  border-bottom: 2px solid rgb(77, 77, 77);
  display: flex;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.349);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: 0.4s;
  background: linear-gradient(140deg, white, rgb(214, 214, 214));
}

.button:hover {
  box-shadow: none;
  transform: scaleY(0.6);
  border-bottom: 2px solid rgb(77, 77, 77);
  background: linear-gradient(160deg, white, rgb(214, 214, 214));
}

.button:active {
  margin-top: 20px;
  transition: 0.05s;
}

.button::before {
  content: "";
  position: absolute;
  left: -1px;
  bottom: 0px;
  width: 170px;
  height: 0px;
  background: rgb(194, 194, 194);
  border-top: 0px solid black;
  border-bottom: 0px solid black;
  transition: height 0.4s, bottom 0.4s, opacity 0s 0.35s;
  opacity: 0;
  box-shadow: inset 0px -10px 10px rgba(167, 167, 167, 0.719);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.button:hover::before {
  height: 35px;
  bottom: -27px;
  opacity: 1;
  border-bottom: 1px solid black;
  transition: height 0.4s, bottom 0.4s;
}

.button:active::before {
  height: 18px;
  bottom: -9px;
  transition: height 0.05s, bottom 0.05s, opacity 0s 0s;
}

.button div {
  width: 150px;
  height: 40px;
  background: linear-gradient(180deg, rgba(212, 212, 212, 0.925), white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-weight: 900;
}

.button div svg {
  width: 20px;
  transform: rotate(40deg);
  margin-right: 5px;
}

</style>
    

================================================
FILE: Buttons/asgardOP_quiet-panther-30.html
================================================
<button class="button">Minecraft</button>

<style>
/* From Uiverse.io by asgardOP  - Tags: simple, button, hover, smooth, game, html, css */
.button {
  cursor: pointer;
  width: fit-content;
  height: fit-content;
  padding: 15px;
  background-color: rgb(223, 223, 223);
  border-left: 3px solid white;
  border-top: 3px solid white;
  border-right: 3px solid gray;
  border-bottom: 3px solid gray;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.1rem;
  font-weight: 900;
  outline: 2px solid black;
}

.button:hover {
  background-color: rgb(0, 197, 0);
  color: white;
  outline-color: white;
  border-left: 3px solid rgb(0, 255, 0);
  border-top: 3px solid rgb(0, 255, 0);
  border-right: 3px solid green;
  border-bottom: 3px solid green;
}

.button:active {
  border-left: 3px solid green;
  border-top: 3px solid green;
  border-right: 3px solid rgb(0, 255, 0);
  border-bottom: 3px solid rgb(0, 255, 0);
}

</style>
    

================================================
FILE: Buttons/asgardOP_smart-skunk-78.html
================================================
<button class="button">
  <svg
    viewBox="0 0 24 24"
    fill="none"
    height="24"
    width="24"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    class="w-6 h-6 text-gray-800 dark:text-white"
  >
    <path
      clip-rule="evenodd"
      d="M3 8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8Zm5-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H8Zm7.597 2.214a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2h-.01a1 1 0 0 1-1-1ZM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-5 3a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"
      fill-rule="evenodd"
      fill="currentColor"
    ></path>
  </svg>
</button>
<button class="button">
  <svg
    viewBox="0 0 24 24"
    fill="none"
    height="24"
    width="24"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    class="w-6 h-6 text-gray-800 dark:text-white"
  >
    <path
      clip-rule="evenodd"
      d="M12 4a8 8 0 0 0-6.895 12.06l.569.718-.697 2.359 2.32-.648.379.243A8 8 0 1 0 12 4ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.96 9.96 0 0 1-5.016-1.347l-4.948 1.382 1.426-4.829-.006-.007-.033-.055A9.958 9.958 0 0 1 2 12Z"
      fill-rule="evenodd"
      fill="currentColor"
    ></path>
    <path
      d="M16.735 13.492c-.038-.018-1.497-.736-1.756-.83a1.008 1.008 0 0 0-.34-.075c-.196 0-.362.098-.49.291-.146.217-.587.732-.723.886-.018.02-.042.045-.057.045-.013 0-.239-.093-.307-.123-1.564-.68-2.751-2.313-2.914-2.589-.023-.04-.024-.057-.024-.057.005-.021.058-.074.085-.101.08-.079.166-.182.249-.283l.117-.14c.121-.14.175-.25.237-.375l.033-.066a.68.68 0 0 0-.02-.64c-.034-.069-.65-1.555-.715-1.711-.158-.377-.366-.552-.655-.552-.027 0 0 0-.112.005-.137.005-.883.104-1.213.311-.35.22-.94.924-.94 2.16 0 1.112.705 2.162 1.008 2.561l.041.06c1.161 1.695 2.608 2.951 4.074 3.537 1.412.564 2.081.63 2.461.63.16 0 .288-.013.4-.024l.072-.007c.488-.043 1.56-.599 1.804-1.276.192-.534.243-1.117.115-1.329-.088-.144-.239-.216-.43-.308Z"
      fill="currentColor"
    ></path>
  </svg>
</button>

<button class="button">
  <svg
    viewBox="0 0 24 24"
    fill="currentColor"
    height="24"
    width="24"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    class="w-6 h-6 text-gray-800 dark:text-white"
  >
    <path
      clip-rule="evenodd"
      d="M22 5.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.343 8.343 0 0 1-2.605.981A4.13 4.13 0 0 0 15.85 4a4.068 4.068 0 0 0-4.1 4.038c0 .31.035.618.105.919A11.705 11.705 0 0 1 3.4 4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 6.1 13.635a4.192 4.192 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 2 18.184 11.732 11.732 0 0 0 8.291 20 11.502 11.502 0 0 0 19.964 8.5c0-.177 0-.349-.012-.523A8.143 8.143 0 0 0 22 5.892Z"
      fill-rule="evenodd"
    ></path>
  </svg>
</button>

<button class="button">
  <svg
    viewBox="0 0 24 24"
    fill="currentColor"
    height="24"
    width="24"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    class="w-6 h-6 text-gray-800 dark:text-white"
  >
    <path
      clip-rule="evenodd"
      d="M21.7 8.037a4.26 4.26 0 0 0-.789-1.964 2.84 2.84 0 0 0-1.984-.839c-2.767-.2-6.926-.2-6.926-.2s-4.157 0-6.928.2a2.836 2.836 0 0 0-1.983.839 4.225 4.225 0 0 0-.79 1.965 30.146 30.146 0 0 0-.2 3.206v1.5a30.12 30.12 0 0 0 .2 3.206c.094.712.364 1.39.784 1.972.604.536 1.38.837 2.187.848 1.583.151 6.731.2 6.731.2s4.161 0 6.928-.2a2.844 2.844 0 0 0 1.985-.84 4.27 4.27 0 0 0 .787-1.965 30.12 30.12 0 0 0 .2-3.206v-1.516a30.672 30.672 0 0 0-.202-3.206Zm-11.692 6.554v-5.62l5.4 2.819-5.4 2.801Z"
      fill-rule="evenodd"
    ></path>
  </svg>
</button>

<button class="button">
  <svg
    viewBox="0 0 24 24"
    fill="currentColor"
    height="24"
    width="24"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    class="w-6 h-6 text-gray-800 dark:text-white"
  >
    <path
      clip-rule="evenodd"
      d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z"
      fill-rule="evenodd"
    ></path>
  </svg>
</button>

<style>
/* From Uiverse.io by asgardOP  - Tags: icon, social, button, hover, dark, modern, social media, buttons */
.button {
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(120deg, #833ab4, #fd1d1d, #fcb045);
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  transition: 0.1s;
}
.button svg {
  color: white;
  width: 30px;
  height: 30px;
  z-index: 9;
}

.button:nth-child(3) {
  background: linear-gradient(120deg, #02ff2c, #008a12);
}

.button:nth-child(4) {
  background: rgb(69, 187, 255);
}

.button:nth-child(5) {
  background: rgb(255, 33, 33);
}

.button:nth-child(6) {
  background: black;
}

.button:active {
  transform: scale(0.85);
}

.button::before {
  content: "";
  position: absolute;
  width: 55px;
  height: 55px;
  background-color: #212121;
  border-radius: 50px;
  z-index: -1;
  border: 0px solid rgba(255, 255, 255, 0.411);
  transition: 0.4s;
}

.button:hover::before {
  width: 0px;
  height: 0px;
}

</style>
    

================================================
FILE: Buttons/asgardOP_young-panda-81.html
================================================
<ul class="ul">
  <li class="li">
    <button class="button"><p class="p">Home</p></button>
  </li>
  <li class="li">
    <button class="button"><p class="p">Store</p></button>
  </li>
  <li class="li">
    <button class="button"><p class="p">Settings</p></button>
  </li>
</ul>

<style>
/* From Uiverse.io by asgardOP  - Tags: action, button, modern, menu, btn, hover effect, html, css */
.ul {
  width: fit-content;
  height: fit-content;
  background-color: transparent;
  list-style: none;
}
.li {
  margin-bottom: 0px;
}
.button {
  background-color: transparent;
  font-family: sans-serif;
  color: rgb(255, 255, 255);
  border: none;
  font-size: 22px;
  font-weight: 700;
  padding: 10px 30px;
  cursor: pointer;
  position: relative;
  padding-left: 11px;
  text-align: center;
  transition: 0.1s;
  z-index: 1;
}

.p {
  z-index: 2;
  position: relative;
}

.button:hover {
  color: rgb(172, 40, 0);
  text-align: center;
}
.button:hover::before {
  transform: rotate(0deg);
  width: 100%;
  height: 40px;
  top: 2px;
  border-radius: 3px;
  background-color: rgb(255, 83, 53);
}
.button::before {
  content: "";
  border-radius: 1px;
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: tomato;
  left: -10px;
  top: 19px;
  cursor: pointer;
  transform: rotate(225deg);
  transition: 0.3s;
  z-index: -1;
}

.button:active::before {
  background-color: rgb(255, 38, 0);
}

</style>
    

================================================
FILE: Buttons/aurellsoleil_quiet-horse-20.html
================================================
<div class="container">
  <button class="button">
    <svg
      class="icon"
      width="25px"
      height="25px"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g id="Communication / Paper_Plane">
        <path
          id="Vector"
          d="M10.3078 13.6923L15.1539 8.84619M20.1113 5.88867L16.0207 19.1833C15.6541 20.3747 15.4706 20.9707 15.1544 21.1683C14.8802 21.3396 14.5406 21.3683 14.2419 21.2443C13.8975 21.1014 13.618 20.5433 13.0603 19.428L10.4694 14.2461C10.3809 14.0691 10.3366 13.981 10.2775 13.9043C10.225 13.8363 10.1645 13.7749 10.0965 13.7225C10.0215 13.6647 9.93486 13.6214 9.76577 13.5369L4.57192 10.9399C3.45662 10.3823 2.89892 10.1032 2.75601 9.75879C2.63207 9.4601 2.66033 9.12023 2.83169 8.84597C3.02928 8.52974 3.62523 8.34603 4.81704 7.97932L18.1116 3.88867C19.0486 3.60038 19.5173 3.45635 19.8337 3.57253C20.1094 3.67373 20.3267 3.89084 20.4279 4.16651C20.544 4.48283 20.3999 4.95126 20.1119 5.88729L20.1113 5.88867Z"
          stroke="#000000"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </g>
    </svg>
    <span class="text">Send Message</span>
  </button>
</div>

<style>
/* From Uiverse.io by aurellsoleil  - Tags: icon, white, button, hover, active, rounded, modern, hover effect */
.button {
  cursor: pointer;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 3px;
  border: none;
  border-radius: 30px;
  font-size: large;
  font-weight: 600;
  display: flex;
  background: #dadada;
  background: -moz-linear-gradient(top, #dadada 0%, #eeeeee 25%, #ffffff 100%);
  background: -webkit-linear-gradient(
    top,
    #dadada 0%,
    #eeeeee 25%,
    #ffffff 100%
  );
  background: linear-gradient(to bottom, #dadada 0%, #eeeeee 25%, #ffffff 100%);
}

.container {
  box-shadow: 4px 2px 10px -1px rgba(12, 12, 12, 0.6);
  /* border: 2px solid rgb(192, 192, 192); */
  border-radius: 7px;
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 75%, #dadada 100%);
  background: -webkit-linear-gradient(
    top,
    #ffffff 0%,
    #eeeeee 75%,
    #dadada 100%
  );
  background: linear-gradient(to bottom, #ffffff 0%, #eeeeee 75%, #dadada 100%);
  transition: all 0.3s;
}

.container:hover {
  box-shadow: 1px 0px 3px 0px rgba(12, 12, 12, 0.6);
}

.container:active {
  box-shadow: 0.5px 0px 1px 0px rgba(12, 12, 12, 0.6);
}

.icon {
  margin-right: 5px;
}

</style>
    

================================================
FILE: Buttons/bandirevanth_sweet-bobcat-36.html
================================================

<button class="custom-btn btn-1">Read More</button>
<style>
/* From Uiverse.io by bandirevanth - Tags: button */
.custom-btn {
 width: 130px;
 height: 40px;
 color: #fff;
 border-radius: 5px;
 padding: 10px 25px;
 font-family: 'Lato', sans-serif;
 font-weight: 500;
 background: transparent;
 cursor: pointer;
 transition: all 0.3s ease;
 position: relative;
 display: inline-block;
 box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
 outline: none;
}

.btn-1 {
 background: rgb(96,9,240);
 background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);
 border: none;
}

.btn-1:before {
 height: 0%;
 width: 2px;
}

.btn-1:hover {
 box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}

</style>


================================================
FILE: Buttons/bandirevanth_tame-fox-42.html
================================================

<button class="custom-btn btn-1">Hello!</button>
<style>
/* From Uiverse.io by bandirevanth - Tags: button */
.custom-btn {
 width: 130px;
 height: 40px;
 color: #fff;
 border-radius: 5px;
 padding: 10px 25px;
 font-family: 'Lato', sans-serif;
 font-weight: 500;
 background: transparent;
 cursor: pointer;
 transition: all 0.3s ease;
 position: relative;
 display: inline-block;
 box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
 outline: none;
}

.btn-1 {
 background: rgb(6,14,131);
 background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
 border: none;
}

.btn-1:hover {
 background: rgb(0,3,255);
 background: linear-gradient(0deg, rgb(0, 17, 255) 0%, rgba(2,126,251,1) 100%);
}
</style>


================================================
FILE: Buttons/barisdogansutcu_average-chipmunk-44.html
================================================
<button>
  <span>PLAY NOW</span>
</button>
<style>
/* From Uiverse.io by barisdogansutcu - Tags: button */
button {
 border: none;
 position: relative;
 width: 200px;
 height: 73px;
 padding: 0;
 z-index: 2;
 -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='868' width='2500' viewBox='0 0 726 252.17'%3E%3Cpath d='M483.92 0S481.38 24.71 466 40.11c-11.74 11.74-24.09 12.66-40.26 15.07-9.42 1.41-29.7 3.77-34.81-.79-2.37-2.11-3-21-3.22-27.62-.21-6.92-1.36-16.52-2.82-18-.75 3.06-2.49 11.53-3.09 13.61S378.49 34.3 378 36a85.13 85.13 0 0 0-30.09 0c-.46-1.67-3.17-11.48-3.77-13.56s-2.34-10.55-3.09-13.61c-1.45 1.45-2.61 11.05-2.82 18-.21 6.67-.84 25.51-3.22 27.62-5.11 4.56-25.38 2.2-34.8.79-16.16-2.47-28.51-3.39-40.21-15.13C244.57 24.71 242 0 242 0H0s69.52 22.74 97.52 68.59c16.56 27.11 14.14 58.49 9.92 74.73C170 140 221.46 140 273 158.57c69.23 24.93 83.2 76.19 90 93.6 6.77-17.41 20.75-68.67 90-93.6 51.54-18.56 103-18.59 165.56-15.25-4.21-16.24-6.63-47.62 9.93-74.73C656.43 22.74 726 0 726 0z'/%3E%3C/svg%3E") no-repeat 50% 50%;
 mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='868' width='2500' viewBox='0 0 726 252.17'%3E%3Cpath d='M483.92 0S481.38 24.71 466 40.11c-11.74 11.74-24.09 12.66-40.26 15.07-9.42 1.41-29.7 3.77-34.81-.79-2.37-2.11-3-21-3.22-27.62-.21-6.92-1.36-16.52-2.82-18-.75 3.06-2.49 11.53-3.09 13.61S378.49 34.3 378 36a85.13 85.13 0 0 0-30.09 0c-.46-1.67-3.17-11.48-3.77-13.56s-2.34-10.55-3.09-13.61c-1.45 1.45-2.61 11.05-2.82 18-.21 6.67-.84 25.51-3.22 27.62-5.11 4.56-25.38 2.2-34.8.79-16.16-2.47-28.51-3.39-40.21-15.13C244.57 24.71 242 0 242 0H0s69.52 22.74 97.52 68.59c16.56 27.11 14.14 58.49 9.92 74.73C170 140 221.46 140 273 158.57c69.23 24.93 83.2 76.19 90 93.6 6.77-17.41 20.75-68.67 90-93.6 51.54-18.56 103-18.59 165.56-15.25-4.21-16.24-6.63-47.62 9.93-74.73C656.43 22.74 726 0 726 0z'/%3E%3C/svg%3E") no-repeat 50% 50%;
 -webkit-mask-size: 100%;
 cursor: pointer;
 background-color: transparent;
 transform: translateY(8px)
}

button:after {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 box-shadow: 0px 0 0 0 white;
 transition: all 2s ease;
}

button:hover:after {
 box-shadow: 0px -13px 56px 12px #ffffffa6;
}

button span {
 position: absolute;
 width: 100%;
 font-size: 15px;
 font-weight: 100;
 left: 50%;
 top: 39%;
 letter-spacing: 3px;
 text-align: center;
 transform: translate(-50%,-50%);
 color: black;
 transition: all 2s ease;
}

button:hover span {
 color: white;
}

button:before {
 content: '';
 position: absolute;
 width: 0;
 height: 100%;
 background-color: black;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 transition: all 1s ease;
}

button:hover:before {
 width: 100%;
}


</style>


================================================
FILE: Buttons/barisdogansutcu_big-moose-69.html
================================================
<button>
    <svg height="36px" width="36px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
        <rect fill="#fdd835" y="0" x="0" height="36" width="36"></rect>
        <path d="M38.67,42H11.52C11.27,40.62,11,38.57,11,36c0-5,0-11,0-11s1.44-7.39,3.22-9.59 c1.67-2.06,2.76-3.48,6.78-4.41c3-0.7,7.13-0.23,9,1c2.15,1.42,3.37,6.67,3.81,11.29c1.49-0.3,5.21,0.2,5.5,1.28 C40.89,30.29,39.48,38.31,38.67,42z" fill="#e53935"></path>
        <path d="M39.02,42H11.99c-0.22-2.67-0.48-7.05-0.49-12.72c0.83,4.18,1.63,9.59,6.98,9.79 c3.48,0.12,8.27,0.55,9.83-2.45c1.57-3,3.72-8.95,3.51-15.62c-0.19-5.84-1.75-8.2-2.13-8.7c0.59,0.66,3.74,4.49,4.01,11.7 c0.03,0.83,0.06,1.72,0.08,2.66c4.21-0.15,5.93,1.5,6.07,2.35C40.68,33.85,39.8,38.9,39.02,42z" fill="#b71c1c"></path>
        <path d="M35,27.17c0,3.67-0.28,11.2-0.42,14.83h-2C32.72,38.42,33,30.83,33,27.17 c0-5.54-1.46-12.65-3.55-14.02c-1.65-1.08-5.49-1.48-8.23-0.85c-3.62,0.83-4.57,1.99-6.14,3.92L15,16.32 c-1.31,1.6-2.59,6.92-3,8.96v10.8c0,2.58,0.28,4.61,0.54,5.92H10.5c-0.25-1.41-0.5-3.42-0.5-5.92l0.02-11.09 c0.15-0.77,1.55-7.63,3.43-9.94l0.08-0.09c1.65-2.03,2.96-3.63,7.25-4.61c3.28-0.76,7.67-0.25,9.77,1.13 C33.79,13.6,35,22.23,35,27.17z" fill="#212121"></path>
        <path d="M17.165,17.283c5.217-0.055,9.391,0.283,9,6.011c-0.391,5.728-8.478,5.533-9.391,5.337 c-0.913-0.196-7.826-0.043-7.696-5.337C9.209,18,13.645,17.32,17.165,17.283z" fill="#01579b"></path>
        <path d="M40.739,37.38c-0.28,1.99-0.69,3.53-1.22,4.62h-2.43c0.25-0.19,1.13-1.11,1.67-4.9 c0.57-4-0.23-11.79-0.93-12.78c-0.4-0.4-2.63-0.8-4.37-0.89l0.1-1.99c1.04,0.05,4.53,0.31,5.71,1.49 C40.689,24.36,41.289,33.53,40.739,37.38z" fill="#212121"></path>
        <path d="M10.154,20.201c0.261,2.059-0.196,3.351,2.543,3.546s8.076,1.022,9.402-0.554 c1.326-1.576,1.75-4.365-0.891-5.267C19.336,17.287,12.959,16.251,10.154,20.201z" fill="#81d4fa"></path>
        <path d="M17.615,29.677c-0.502,0-0.873-0.03-1.052-0.069c-0.086-0.019-0.236-0.035-0.434-0.06 c-5.344-0.679-8.053-2.784-8.052-6.255c0.001-2.698,1.17-7.238,8.986-7.32l0.181-0.002c3.444-0.038,6.414-0.068,8.272,1.818 c1.173,1.191,1.712,3,1.647,5.53c-0.044,1.688-0.785,3.147-2.144,4.217C22.785,29.296,19.388,29.677,17.615,29.677z M17.086,17.973 c-7.006,0.074-7.008,4.023-7.008,5.321c-0.001,3.109,3.598,3.926,6.305,4.27c0.273,0.035,0.48,0.063,0.601,0.089 c0.563,0.101,4.68,0.035,6.855-1.732c0.865-0.702,1.299-1.57,1.326-2.653c0.051-1.958-0.301-3.291-1.073-4.075 c-1.262-1.281-3.834-1.255-6.825-1.222L17.086,17.973z" fill="#212121"></path>
        <path d="M15.078,19.043c1.957-0.326,5.122-0.529,4.435,1.304c-0.489,1.304-7.185,2.185-7.185,0.652 C12.328,19.467,15.078,19.043,15.078,19.043z" fill="#e1f5fe"></path>
    </svg>
    <span class="now">now!</span>
    <span class="play">play</span>
</button>
<style>
/* From Uiverse.io by barisdogansutcu - Tags: button, game, among us */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 10px;
  color: white;
  text-shadow: 2px 2px rgb(116, 116, 116);
  text-transform: uppercase;
  border: solid 2px black;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 17px;
  background-color: hsl(49deg 98% 60%);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  transition: all .5s ease;
}

button:active {
  transform: scale(.9);
  transition: all 100ms ease;
}

button svg {
  transition: all .5s ease;
  z-index: 2;
}

.play {
  transition: all .5s ease;
  transition-delay: 300ms;
}

button:hover svg {
  transform: scale(3) translate(50%);
}

.now {
  position: absolute;
  left: 0;
  transform: translateX(-100%);
  transition: all .5s ease;
  z-index: 2;
}

button:hover .now {
  transform: translateX(10px);
  transition-delay: 300ms;
}

button:hover .play {
  transform: translateX(200%);
  transition-delay: 300ms;
}
</style>


================================================
FILE: Buttons/barisdogansutcu_bitter-dragon-16.html
================================================
<div class="click">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <button class="button up">
    <div class="speak dblink">
      <div class="wrap">
        <div class="eye double-blink"></div>
        <div class="eye double-blink"></div>
      </div>
    </div>
    <p></p>
    <p></p>
    <p></p>
    <div class="speak doblink">
      <div class="wrap">
        <div class="eye down"></div>
        <div class="eye down"></div>
      </div>
    </div>
    <div class="speak rblink">
      <div class="wrap">
        <div class="eye right-blink"></div>
        <div class="eye right-blink"></div>
      </div>
    </div>
    <div class="speak ublink">
      <div class="wrap">
        <div class="eye up-blink"></div>
        <div class="eye up-blink"></div>
      </div>
    </div>
  </button>
  <button disabled="" class="button shadow"></button>
</div>

<style>
/* From Uiverse.io by barisdogansutcu  - Tags: animation, button, funny */
.button {
  cursor: inherit;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: solid 4px rgba(255, 255, 255, 0);
  background-color: hsl(300, 10%, 8%);
  font-size: 20px;
  color: white;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
}
.button:before {
  content: "";
  position: absolute;
  top: 0;
  transform: translateY(-100%);
  width: 0;
  height: 0;
  border-top: solid 10px rgba(255, 0, 0, 0);
  border-bottom: solid 10px hsl(300, 10%, 8%);
  border-right: solid 10px rgba(255, 0, 0, 0);
  border-left: solid 10px rgba(255, 0, 0, 0);
}
.button.up {
  z-index: 2;
}
.click .button .speak:nth-child(n + 2) {
  display: none;
}
button:hover,
.click span:nth-child(5):hover ~ button,
.click span:nth-child(6):hover ~ button {
  left: 100%;
  top: 0;
  transform: translateX(-100%);
}
button:hover,
.click span:nth-child(5):hover ~ .button .speak:is(.dblink, .rblink),
.click span:nth-child(6):hover ~ .button .speak:is(.dblink, .rblink) {
  display: none !important;
}
button:hover,
.click span:nth-child(5):hover ~ .button .speak:is(.doblink),
.click span:nth-child(6):hover ~ .button .speak:is(.doblink) {
  display: flex !important;
}
button:hover,
.click span:nth-child(2):hover ~ button,
button:hover,
.click span:nth-child(3):hover ~ button {
  left: 0%;
  top: 0;
  transform: translateX(0%);
}
button:hover,
.click span:nth-child(2):hover ~ .button .speak:is(.dblink, .hihi),
.click span:nth-child(3):hover ~ .button .speak:is(.dblink, .hihi) {
  display: none !important;
}
button:hover,
.click span:nth-child(2):hover ~ .button .speak:is(.rblink),
.click span:nth-child(3):hover ~ .button .speak:is(.rblink) {
  display: flex !important;
}
button:hover,
.click span:nth-child(1):hover ~ button,
button:hover,
.click span:nth-child(4):hover ~ button {
  top: 100%;
  left: 0;
  transform: translateY(-100%);
}
button:hover,
.click span:nth-child(1):hover ~ .button .speak:is(.dblink, hihi, rblink),
.click span:nth-child(4):hover ~ .button .speak:is(.dblink, hihi, rblink) {
  display: none !important;
}
button:hover,
.click span:nth-child(1):hover ~ .button .speak:is(.ublink),
.click span:nth-child(4):hover ~ .button .speak:is(.ublink) {
  display: flex !important;
}
.click {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  position: relative;
  border-radius: 5px;
}
.click span {
  width: 80px;
  height: 80px;
  background-color: transparent;
  display: flex;
}
.shadow {
  color: transparent;
  transition: all 0.5s ease;
  z-index: 1;
  pointer-events: none;
  filter: blur(14px);
  background-color: hsla(240, 24%, 12%, 0.384);
}
.speak {
  font-size: 15px;
}
.wrap {
  position: relative;
  width: 100px;
  height: 40px;
  margin: 0 2rem;
  color: black;
  line-height: 40px;
  font-size: 2rem;
  text-align: center;
  font-weight: 400;
  margin-bottom: 0;
  display: flex;
  gap: 5px;
}
.eye {
  position: relative;
  margin: auto;
  top: 0;
  bottom: 0;
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-block;
  animation: double-blink 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  overflow: hidden;
}
@keyframes double-blink {
  0%,
  8% {
    height: 40px;
  }
  10%,
  12% {
    height: 10px;
  }
  13% {
    height: 40px;
  }
  14%,
  16% {
    height: 0;
  }
  18%,
  100% {
    height: 40px;
  }
}
.eye:before {
  content: "";
  position: absolute;
  margin: auto;
  width: 10px;
  height: 10px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  background: rgba(20, 20, 20, 1);
}
.down:before {
  animation: downb 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
@keyframes downb {
  0%,
  10% {
    top: 0;
    left: -10px;
  }
  20%,
  40% {
    top: 50%;
    left: -10px;
  }
  50%,
  100% {
    top: 0;
    left: -10px;
  }
}
.right-blink:before {
  animation: rightb 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
@keyframes rightb {
  0%,
  10% {
    top: 0;
    left: 50%;
  }
  20%,
  40% {
    top: 50%;
    left: 50%;
  }
  50%,
  100% {
    top: 0;
    left: 50%;
  }
}
.up-blink:before {
  animation: upb 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
@keyframes upb {
  0%,
  10% {
    top: 0;
    left: 0%;
  }
  20%,
  40% {
    top: -50%;
    left: 0%;
  }
  50%,
  100% {
    top: 0;
    left: 0%;
  }
}

</style>
    

================================================
FILE: Buttons/barisdogansutcu_black-duck-67.html
================================================
<button>
  <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> Explore me
</button>
<style>
/* From Uiverse.io by barisdogansutcu - Tags: neumorphism, icon, button */
button {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 font-family: inherit;
 font-size: 13px;
 font-weight: 500;
 text-transform: uppercase;
 letter-spacing: 0.4px;
 color: #7e97b8;
 background-color: #e0e8ef;
 border-style: solid;
 border-width: 2px 2px 2px 2px;
 border-color: rgba(255, 255, 255, 0.333);
 border-radius: 40px 40px 40px 40px;
 padding: 16px 24px 16px 28px;
 transform: translate(0px, 0px) rotate(0deg);
 transition: 0.2s;
 box-shadow: -4px -2px 16px 0px #ffffff, 4px 2px 16px 0px rgb(95 157 231 / 48%);
}

button:hover {
 color: #516d91;
 background-color: #E5EDF5;
 box-shadow: -2px -1px 8px 0px #ffffff, 2px 1px 8px 0px rgb(95 157 231 / 48%);
}

button:active {
 box-shadow: none;
}
</style>


================================================
FILE: Buttons/barisdogansutcu_blue-badger-94.html
================================================
<div class="content">
  <div class="benefits">
    <div class="basic-marquee basic-marquee-1">
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.88"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M25.2,0H97.68a25.27,25.27,0,0,1,25.2,25.2V97.68a25.27,25.27,0,0,1-25.2,25.2H25.2A25.27,25.27,0,0,1,0,97.68V25.2A25.27,25.27,0,0,1,25.2,0Z"
              class="cls-1"
            ></path>
            <path
              d="M98.16,44.33q-.5,10.72-15,29.38-15,19.46-25.36,19.47Q51.4,93.18,47,81.33,44,70.46,41,59.59q-3.29-11.87-7.08-11.85c-.54,0-2.47,1.16-5.76,3.45l-3.46-4.45c3.63-3.1,7.21-6.36,10.69-9.51Q42.67,31,46.3,30.63q8.58-.82,10.56,11.72,2.13,13.55,3,16.84c1.65,7.49,3.45,11.24,5.44,11.24q2.3,0,6.93-7.3t5-11.09c.44-4.19-1.21-6.3-5-6.3A13.55,13.55,0,0,0,66.77,47Q72.19,29.2,87.46,29.71q11.31.3,10.67,14.67h0l0-.05Z"
              class="cls-2"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.88"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M25.2,0H97.68a25.27,25.27,0,0,1,25.2,25.2V97.68a25.27,25.27,0,0,1-25.2,25.2H25.2A25.27,25.27,0,0,1,0,97.68V25.2A25.27,25.27,0,0,1,25.2,0Z"
              class="cls-3"
            ></path>
            <path
              d="M69.22,79.38A34.34,34.34,0,0,0,83,73.45a5.73,5.73,0,0,0-7.17-8.94A24.84,24.84,0,0,1,61.5,68.69a25.46,25.46,0,0,1-14.43-4.18,5.73,5.73,0,0,0-7.17,8.94,34.93,34.93,0,0,0,14.21,6L42,92.07a5.73,5.73,0,1,0,8.25,8l11.23-12,12.36,12A5.73,5.73,0,1,0,82,92L69.22,79.38Z"
              class="cls-4"
            ></path>
            <path
              d="M61.78,20.48A21.07,21.07,0,1,0,82.85,41.54,21.06,21.06,0,0,0,61.78,20.48Zm0,29.77a8.71,8.71,0,1,1,8.71-8.71,8.71,8.71,0,0,1-8.71,8.71Z"
              class="cls-4"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 132.004 132"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xmlns="http://www.w3.org/2000/svg"
          >
            <defs>
              <linearGradient id="b">
                <stop stop-color="#3771c8" offset="0"></stop>
                <stop offset=".128" stop-color="#3771c8"></stop>
                <stop stop-opacity="0" stop-color="#60f" offset="1"></stop>
              </linearGradient>
              <linearGradient id="a">
                <stop stop-color="#fd5" offset="0"></stop>
                <stop stop-color="#fd5" offset=".1"></stop>
                <stop stop-color="#ff543e" offset=".5"></stop>
                <stop stop-color="#c837ab" offset="1"></stop>
              </linearGradient>
              <radialGradient
                fy="578.088"
                fx="158.429"
                gradientTransform="matrix(0 -1.98198 1.8439 0 -1031.402 454.004)"
                gradientUnits="userSpaceOnUse"
                xlink:href="#a"
                r="65"
                cy="578.088"
                cx="158.429"
                id="c"
              ></radialGradient>
              <radialGradient
                fy="473.455"
                fx="147.694"
                gradientTransform="matrix(.17394 .86872 -3.5818 .71718 1648.348 -458.493)"
                gradientUnits="userSpaceOnUse"
                xlink:href="#b"
                r="65"
                cy="473.455"
                cx="147.694"
                id="d"
              ></radialGradient>
            </defs>
            <path
              transform="translate(1.004 1)"
              d="M65.03 0C37.888 0 29.95.028 28.407.156c-5.57.463-9.036 1.34-12.812 3.22-2.91 1.445-5.205 3.12-7.47 5.468C4 13.126 1.5 18.394.595 24.656c-.44 3.04-.568 3.66-.594 19.188-.01 5.176 0 11.988 0 21.125 0 27.12.03 35.05.16 36.59.45 5.42 1.3 8.83 3.1 12.56 3.44 7.14 10.01 12.5 17.75 14.5 2.68.69 5.64 1.07 9.44 1.25 1.61.07 18.02.12 34.44.12 16.42 0 32.84-.02 34.41-.1 4.4-.207 6.955-.55 9.78-1.28 7.79-2.01 14.24-7.29 17.75-14.53 1.765-3.64 2.66-7.18 3.065-12.317.088-1.12.125-18.977.125-36.81 0-17.836-.04-35.66-.128-36.78-.41-5.22-1.305-8.73-3.127-12.44-1.495-3.037-3.155-5.305-5.565-7.624C116.9 4 111.64 1.5 105.372.596 102.335.157 101.73.027 86.19 0H65.03z"
              fill="url(#c)"
            ></path>
            <path
              transform="translate(1.004 1)"
              d="M65.03 0C37.888 0 29.95.028 28.407.156c-5.57.463-9.036 1.34-12.812 3.22-2.91 1.445-5.205 3.12-7.47 5.468C4 13.126 1.5 18.394.595 24.656c-.44 3.04-.568 3.66-.594 19.188-.01 5.176 0 11.988 0 21.125 0 27.12.03 35.05.16 36.59.45 5.42 1.3 8.83 3.1 12.56 3.44 7.14 10.01 12.5 17.75 14.5 2.68.69 5.64 1.07 9.44 1.25 1.61.07 18.02.12 34.44.12 16.42 0 32.84-.02 34.41-.1 4.4-.207 6.955-.55 9.78-1.28 7.79-2.01 14.24-7.29 17.75-14.53 1.765-3.64 2.66-7.18 3.065-12.317.088-1.12.125-18.977.125-36.81 0-17.836-.04-35.66-.128-36.78-.41-5.22-1.305-8.73-3.127-12.44-1.495-3.037-3.155-5.305-5.565-7.624C116.9 4 111.64 1.5 105.372.596 102.335.157 101.73.027 86.19 0H65.03z"
              fill="url(#d)"
            ></path>
            <path
              d="M66.004 18c-13.036 0-14.672.057-19.792.29-5.11.234-8.598 1.043-11.65 2.23-3.157 1.226-5.835 2.866-8.503 5.535-2.67 2.668-4.31 5.346-5.54 8.502-1.19 3.053-2 6.542-2.23 11.65C18.06 51.327 18 52.964 18 66s.058 14.667.29 19.787c.235 5.11 1.044 8.598 2.23 11.65 1.227 3.157 2.867 5.835 5.536 8.503 2.667 2.67 5.345 4.314 8.5 5.54 3.054 1.187 6.543 1.996 11.652 2.23 5.12.233 6.755.29 19.79.29 13.037 0 14.668-.057 19.788-.29 5.11-.234 8.602-1.043 11.656-2.23 3.156-1.226 5.83-2.87 8.497-5.54 2.67-2.668 4.31-5.346 5.54-8.502 1.18-3.053 1.99-6.542 2.23-11.65.23-5.12.29-6.752.29-19.788 0-13.036-.06-14.672-.29-19.792-.24-5.11-1.05-8.598-2.23-11.65-1.23-3.157-2.87-5.835-5.54-8.503-2.67-2.67-5.34-4.31-8.5-5.535-3.06-1.187-6.55-1.996-11.66-2.23-5.12-.233-6.75-.29-19.79-.29zm-4.306 8.65c1.278-.002 2.704 0 4.306 0 12.816 0 14.335.046 19.396.276 4.68.214 7.22.996 8.912 1.653 2.24.87 3.837 1.91 5.516 3.59 1.68 1.68 2.72 3.28 3.592 5.52.657 1.69 1.44 4.23 1.653 8.91.23 5.06.28 6.58.28 19.39s-.05 14.33-.28 19.39c-.214 4.68-.996 7.22-1.653 8.91-.87 2.24-1.912 3.835-3.592 5.514-1.68 1.68-3.275 2.72-5.516 3.59-1.69.66-4.232 1.44-8.912 1.654-5.06.23-6.58.28-19.396.28-12.817 0-14.336-.05-19.396-.28-4.68-.216-7.22-.998-8.913-1.655-2.24-.87-3.84-1.91-5.52-3.59-1.68-1.68-2.72-3.276-3.592-5.517-.657-1.69-1.44-4.23-1.653-8.91-.23-5.06-.276-6.58-.276-19.398s.046-14.33.276-19.39c.214-4.68.996-7.22 1.653-8.912.87-2.24 1.912-3.84 3.592-5.52 1.68-1.68 3.28-2.72 5.52-3.592 1.692-.66 4.233-1.44 8.913-1.655 4.428-.2 6.144-.26 15.09-.27zm29.928 7.97c-3.18 0-5.76 2.577-5.76 5.758 0 3.18 2.58 5.76 5.76 5.76 3.18 0 5.76-2.58 5.76-5.76 0-3.18-2.58-5.76-5.76-5.76zm-25.622 6.73c-13.613 0-24.65 11.037-24.65 24.65 0 13.613 11.037 24.645 24.65 24.645C79.617 90.645 90.65 79.613 90.65 66S79.616 41.35 66.003 41.35zm0 8.65c8.836 0 16 7.163 16 16 0 8.836-7.164 16-16 16-8.837 0-16-7.164-16-16 0-8.837 7.163-16 16-16z"
              fill="#fff"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 512 512"
            data-name="Layer 1"
            id="Layer_1"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xmlns="http://www.w3.org/2000/svg"
          >
            <defs>
              <linearGradient
                gradientUnits="userSpaceOnUse"
                gradientTransform="matrix(0.19, 0, 0, -0.19, 0.81, 98.89)"
                y2="-2164.82"
                x2="1337.28"
                y1="518.24"
                x1="1337.28"
                id="linear-gradient"
              >
                <stop stop-color="#61fd7d" offset="0"></stop>
                <stop stop-color="#2bb826" offset="1"></stop>
              </linearGradient>
            </defs>
            <path
              transform="translate(0 0)"
              d="M512,382.07c0,2.8-.09,8.88-.26,13.58-.41,11.49-1.32,26.32-2.7,33.07a109.76,109.76,0,0,1-9.27,27.71,98.45,98.45,0,0,1-43.43,43.39,110.21,110.21,0,0,1-27.87,9.28c-6.69,1.35-21.41,2.24-32.82,2.65-4.71.17-10.79.25-13.58.25l-252.1,0c-2.8,0-8.88-.09-13.58-.26-11.49-.41-26.32-1.32-33.07-2.69a110.37,110.37,0,0,1-27.72-9.28A98.5,98.5,0,0,1,12.18,456.3,110.21,110.21,0,0,1,2.9,428.43C1.55,421.74.66,407,.25,395.61.08,390.91,0,384.82,0,382l0-252.1c0-2.8.09-8.88.25-13.58C.71,104.86,1.62,90,3,83.28a110.37,110.37,0,0,1,9.27-27.72A98.59,98.59,0,0,1,55.7,12.18,110.21,110.21,0,0,1,83.57,2.9C90.26,1.55,105,.66,116.39.25,121.09.08,127.18,0,130,0l252.1,0c2.8,0,8.88.09,13.58.25C407.14.71,422,1.62,428.72,3a110.37,110.37,0,0,1,27.72,9.27A98.59,98.59,0,0,1,499.82,55.7a110.21,110.21,0,0,1,9.28,27.87c1.35,6.69,2.24,21.41,2.65,32.82.17,4.7.25,10.79.25,13.58Z"
              class="cls-5"
            ></path>
            <path
              transform="translate(0 0)"
              d="M379.56,131.67A172.4,172.4,0,0,0,256.67,80.73C161,80.73,83.05,158.64,83.05,254.42a173.47,173.47,0,0,0,23.2,86.82l-24.65,90,92.08-24.17a173.55,173.55,0,0,0,83,21.17h.07c95.73,0,173.69-77.91,173.69-173.69A172.73,172.73,0,0,0,379.53,131.7l0,0ZM256.72,399a144.17,144.17,0,0,1-73.52-20.14l-5.29-3.15L123.27,390l14.59-53.27-3.42-5.47a143.29,143.29,0,0,1-22.11-76.81C112.33,174.81,177.1,110,256.8,110A144.34,144.34,0,0,1,401.12,254.48c-.07,79.67-64.83,144.46-144.41,144.46v0ZM335.87,290.8c-4.32-2.2-25.68-12.67-29.65-14.12s-6.85-2.19-9.8,2.2-11.22,14.11-13.76,17-5.06,3.29-9.37,1.09-18.35-6.77-34.92-21.56c-12.88-11.5-21.61-25.74-24.15-30s-.29-6.71,1.92-8.83c2-1.93,4.32-5.06,6.51-7.6s2.88-4.32,4.32-7.26.74-5.42-.35-7.6-9.8-23.55-13.34-32.25c-3.49-8.51-7.12-7.32-9.79-7.47s-5.42-.13-8.29-.13a16,16,0,0,0-11.57,5.41c-4,4.32-15.2,14.86-15.2,36.22s15.54,42,17.72,44.91,30.61,46.76,74.14,65.54c10.34,4.44,18.42,7.11,24.72,9.18a60,60,0,0,0,27.32,1.71c8.35-1.23,25.68-10.49,29.31-20.62s3.63-18.83,2.55-20.62-3.91-3-8.29-5.22l0,0Z"
              class="cls-6"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.31"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M27.75,0H95.13a27.83,27.83,0,0,1,27.75,27.75V94.57a27.83,27.83,0,0,1-27.75,27.74H27.75A27.83,27.83,0,0,1,0,94.57V27.75A27.83,27.83,0,0,1,27.75,0Z"
              class="cls-7"
            ></path>
            <path
              d="M49.19,47.41H64.72v8h.22c2.17-3.88,7.45-8,15.34-8,16.39,0,19.42,10.2,19.42,23.47V98.94H83.51V74c0-5.71-.12-13.06-8.42-13.06s-9.72,6.21-9.72,12.65v25.4H49.19V47.41ZM40,31.79a8.42,8.42,0,1,1-8.42-8.42A8.43,8.43,0,0,1,40,31.79ZM23.18,47.41H40V98.94H23.18V47.41Z"
              class="cls-8"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.39"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M27.4,0H95.48a27.48,27.48,0,0,1,27.4,27.4V95a27.48,27.48,0,0,1-27.4,27.41H27.4A27.48,27.48,0,0,1,0,95V27.4A27.48,27.48,0,0,1,27.4,0Z"
              class="cls-1"
            ></path>
            <path
              d="M37.07,32.34A14.41,14.41,0,1,1,22.66,46.75,14.41,14.41,0,0,1,37.07,32.34Z"
              class="cls-10"
            ></path>
            <path
              d="M85.74,32.34A14.41,14.41,0,1,1,71.33,46.75,14.41,14.41,0,0,1,85.74,32.34Z"
              class="cls-10"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 512 512"
            clip-rule="evenodd"
            fill-rule="evenodd"
            image-rendering="optimizeQuality"
            text-rendering="geometricPrecision"
            shape-rendering="geometricPrecision"
            xmlns="http://www.w3.org/2000/svg"
          >
            <defs>
              <linearGradient
                y2="507.468"
                x2="251.069"
                y1=".003"
                x1="251.069"
                gradientUnits="userSpaceOnUse"
                id="prefix__a"
              >
                <stop stop-color="#6364FF" offset="0"></stop>
                <stop stop-color="#563ACC" offset="1"></stop>
              </linearGradient>
            </defs>
            <path
              d="M105 0h302c57.928.155 104.845 47.072 105 104.996V407c-.155 57.926-47.072 104.844-104.996 104.998L105 512C47.074 511.844.156 464.926.002 407.003L0 105C.156 47.072 47.074.155 104.997 0H105z"
              fill="url(#prefix__a)"
            ></path>
            <path
              d="M399.681 169.996c-4.462-33.167-33.37-59.307-67.639-64.37-5.782-.857-27.685-3.972-78.429-3.972h-.378c-50.757 0-61.645 3.115-67.427 3.972-33.314 4.922-63.738 28.409-71.119 61.97-3.55 16.527-3.929 34.852-3.269 51.659.94 24.105 1.122 48.166 3.312 72.172a339.605 339.605 0 007.9 47.34c7.016 28.76 35.419 52.695 63.246 62.461a169.628 169.628 0 0092.531 4.883 135.476 135.476 0 0010.005-2.735c7.465-2.372 16.208-5.024 22.637-9.683a.705.705 0 00.209-.245.695.695 0 00.084-.315V369.87a.673.673 0 00-.263-.53.687.687 0 00-.578-.13 256.39 256.39 0 01-60.046 7.017c-34.802 0-44.162-16.513-46.84-23.387a72.424 72.424 0 01-4.071-18.437.67.67 0 01.248-.559.672.672 0 01.593-.129 251.583 251.583 0 0059.064 7.016c4.785 0 9.557 0 14.341-.129 20.01-.559 41.104-1.584 60.789-5.429.493-.097.984-.182 1.404-.307 31.055-5.965 60.609-24.68 63.611-72.075.111-1.866.393-19.543.393-21.478.014-6.581 2.118-46.68-.308-71.317zm-49.97 37.265v82.399h-32.654v-79.972c0-16.837-7.017-25.424-21.288-25.424-15.691 0-23.549 10.159-23.549 30.22v43.777h-32.455v-43.777c0-20.061-7.874-30.22-23.562-30.22-14.188 0-21.274 8.587-21.274 25.424v79.972H162.29v-82.399c0-16.837 4.298-30.213 12.895-40.128 8.868-9.891 20.502-14.971 34.941-14.971 16.713 0 29.342 6.426 37.762 19.264l8.126 13.638 8.139-13.638c8.419-12.838 21.049-19.264 37.733-19.264 14.426 0 26.058 5.08 34.956 14.971 8.589 9.906 12.877 23.282 12.869 40.128z"
              fill-rule="nonzero"
              fill="#fff"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 512 512"
            clip-rule="evenodd"
            fill-rule="evenodd"
            image-rendering="optimizeQuality"
            text-rendering="geometricPrecision"
            shape-rendering="geometricPrecision"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M105 0h302c57.928.155 104.845 47.072 105 104.996V407c-.155 57.926-47.072 104.844-104.996 104.998L105 512C47.074 511.844.156 464.926.002 407.003L0 105C.156 47.072 47.074.155 104.997 0H105z"
              fill="#5865F2"
            ></path>
            <g data-name="图层 2">
              <g data-name="Discord Logos">
                <path
                  data-name="Discord Logo - Large - White"
                  d="M368.896 153.381a269.506 269.506 0 00-67.118-20.637 186.88 186.88 0 00-8.57 17.475 250.337 250.337 0 00-37.247-2.8c-12.447 0-24.955.946-37.25 2.776-2.511-5.927-5.427-11.804-8.592-17.454a271.73 271.73 0 00-67.133 20.681c-42.479 62.841-53.991 124.112-48.235 184.513a270.622 270.622 0 0082.308 41.312c6.637-8.959 12.582-18.497 17.63-28.423a173.808 173.808 0 01-27.772-13.253c2.328-1.688 4.605-3.427 6.805-5.117 25.726 12.083 53.836 18.385 82.277 18.385 28.442 0 56.551-6.302 82.279-18.387 2.226 1.817 4.503 3.557 6.805 5.117a175.002 175.002 0 01-27.823 13.289 197.847 197.847 0 0017.631 28.4 269.513 269.513 0 0082.363-41.305l-.007.007c6.754-70.045-11.538-130.753-48.351-184.579zM201.968 300.789c-16.04 0-29.292-14.557-29.292-32.465s12.791-32.592 29.241-32.592 29.599 14.684 29.318 32.592c-.282 17.908-12.919 32.465-29.267 32.465zm108.062 0c-16.066 0-29.267-14.557-29.267-32.465s12.791-32.592 29.267-32.592c16.475 0 29.522 14.684 29.241 32.592-.281 17.908-12.894 32.465-29.241 32.465z"
                  fill-rule="nonzero"
                  fill="#fff"
                ></path>
              </g>
            </g>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.88"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M25.2,0H97.68a25.27,25.27,0,0,1,25.2,25.2V97.68a25.27,25.27,0,0,1-25.2,25.2H25.2A25.27,25.27,0,0,1,0,97.68V25.2A25.27,25.27,0,0,1,25.2,0Z"
              class="cls-1"
            ></path>
            <path
              d="M98.16,44.33q-.5,10.72-15,29.38-15,19.46-25.36,19.47Q51.4,93.18,47,81.33,44,70.46,41,59.59q-3.29-11.87-7.08-11.85c-.54,0-2.47,1.16-5.76,3.45l-3.46-4.45c3.63-3.1,7.21-6.36,10.69-9.51Q42.67,31,46.3,30.63q8.58-.82,10.56,11.72,2.13,13.55,3,16.84c1.65,7.49,3.45,11.24,5.44,11.24q2.3,0,6.93-7.3t5-11.09c.44-4.19-1.21-6.3-5-6.3A13.55,13.55,0,0,0,66.77,47Q72.19,29.2,87.46,29.71q11.31.3,10.67,14.67h0l0-.05Z"
              class="cls-2"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.88"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M25.2,0H97.68a25.27,25.27,0,0,1,25.2,25.2V97.68a25.27,25.27,0,0,1-25.2,25.2H25.2A25.27,25.27,0,0,1,0,97.68V25.2A25.27,25.27,0,0,1,25.2,0Z"
              class="cls-3"
            ></path>
            <path
              d="M69.22,79.38A34.34,34.34,0,0,0,83,73.45a5.73,5.73,0,0,0-7.17-8.94A24.84,24.84,0,0,1,61.5,68.69a25.46,25.46,0,0,1-14.43-4.18,5.73,5.73,0,0,0-7.17,8.94,34.93,34.93,0,0,0,14.21,6L42,92.07a5.73,5.73,0,1,0,8.25,8l11.23-12,12.36,12A5.73,5.73,0,1,0,82,92L69.22,79.38Z"
              class="cls-4"
            ></path>
            <path
              d="M61.78,20.48A21.07,21.07,0,1,0,82.85,41.54,21.06,21.06,0,0,0,61.78,20.48Zm0,29.77a8.71,8.71,0,1,1,8.71-8.71,8.71,8.71,0,0,1-8.71,8.71Z"
              class="cls-4"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 132.004 132"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xmlns="http://www.w3.org/2000/svg"
          >
            <defs>
              <linearGradient id="b">
                <stop stop-color="#3771c8" offset="0"></stop>
                <stop offset=".128" stop-color="#3771c8"></stop>
                <stop stop-opacity="0" stop-color="#60f" offset="1"></stop>
              </linearGradient>
              <linearGradient id="a">
                <stop stop-color="#fd5" offset="0"></stop>
                <stop stop-color="#fd5" offset=".1"></stop>
                <stop stop-color="#ff543e" offset=".5"></stop>
                <stop stop-color="#c837ab" offset="1"></stop>
              </linearGradient>
              <radialGradient
                fy="578.088"
                fx="158.429"
                gradientTransform="matrix(0 -1.98198 1.8439 0 -1031.402 454.004)"
                gradientUnits="userSpaceOnUse"
                xlink:href="#a"
                r="65"
                cy="578.088"
                cx="158.429"
                id="c"
              ></radialGradient>
              <radialGradient
                fy="473.455"
                fx="147.694"
                gradientTransform="matrix(.17394 .86872 -3.5818 .71718 1648.348 -458.493)"
                gradientUnits="userSpaceOnUse"
                xlink:href="#b"
                r="65"
                cy="473.455"
                cx="147.694"
                id="d"
              ></radialGradient>
            </defs>
            <path
              transform="translate(1.004 1)"
              d="M65.03 0C37.888 0 29.95.028 28.407.156c-5.57.463-9.036 1.34-12.812 3.22-2.91 1.445-5.205 3.12-7.47 5.468C4 13.126 1.5 18.394.595 24.656c-.44 3.04-.568 3.66-.594 19.188-.01 5.176 0 11.988 0 21.125 0 27.12.03 35.05.16 36.59.45 5.42 1.3 8.83 3.1 12.56 3.44 7.14 10.01 12.5 17.75 14.5 2.68.69 5.64 1.07 9.44 1.25 1.61.07 18.02.12 34.44.12 16.42 0 32.84-.02 34.41-.1 4.4-.207 6.955-.55 9.78-1.28 7.79-2.01 14.24-7.29 17.75-14.53 1.765-3.64 2.66-7.18 3.065-12.317.088-1.12.125-18.977.125-36.81 0-17.836-.04-35.66-.128-36.78-.41-5.22-1.305-8.73-3.127-12.44-1.495-3.037-3.155-5.305-5.565-7.624C116.9 4 111.64 1.5 105.372.596 102.335.157 101.73.027 86.19 0H65.03z"
              fill="url(#c)"
            ></path>
            <path
              transform="translate(1.004 1)"
              d="M65.03 0C37.888 0 29.95.028 28.407.156c-5.57.463-9.036 1.34-12.812 3.22-2.91 1.445-5.205 3.12-7.47 5.468C4 13.126 1.5 18.394.595 24.656c-.44 3.04-.568 3.66-.594 19.188-.01 5.176 0 11.988 0 21.125 0 27.12.03 35.05.16 36.59.45 5.42 1.3 8.83 3.1 12.56 3.44 7.14 10.01 12.5 17.75 14.5 2.68.69 5.64 1.07 9.44 1.25 1.61.07 18.02.12 34.44.12 16.42 0 32.84-.02 34.41-.1 4.4-.207 6.955-.55 9.78-1.28 7.79-2.01 14.24-7.29 17.75-14.53 1.765-3.64 2.66-7.18 3.065-12.317.088-1.12.125-18.977.125-36.81 0-17.836-.04-35.66-.128-36.78-.41-5.22-1.305-8.73-3.127-12.44-1.495-3.037-3.155-5.305-5.565-7.624C116.9 4 111.64 1.5 105.372.596 102.335.157 101.73.027 86.19 0H65.03z"
              fill="url(#d)"
            ></path>
            <path
              d="M66.004 18c-13.036 0-14.672.057-19.792.29-5.11.234-8.598 1.043-11.65 2.23-3.157 1.226-5.835 2.866-8.503 5.535-2.67 2.668-4.31 5.346-5.54 8.502-1.19 3.053-2 6.542-2.23 11.65C18.06 51.327 18 52.964 18 66s.058 14.667.29 19.787c.235 5.11 1.044 8.598 2.23 11.65 1.227 3.157 2.867 5.835 5.536 8.503 2.667 2.67 5.345 4.314 8.5 5.54 3.054 1.187 6.543 1.996 11.652 2.23 5.12.233 6.755.29 19.79.29 13.037 0 14.668-.057 19.788-.29 5.11-.234 8.602-1.043 11.656-2.23 3.156-1.226 5.83-2.87 8.497-5.54 2.67-2.668 4.31-5.346 5.54-8.502 1.18-3.053 1.99-6.542 2.23-11.65.23-5.12.29-6.752.29-19.788 0-13.036-.06-14.672-.29-19.792-.24-5.11-1.05-8.598-2.23-11.65-1.23-3.157-2.87-5.835-5.54-8.503-2.67-2.67-5.34-4.31-8.5-5.535-3.06-1.187-6.55-1.996-11.66-2.23-5.12-.233-6.75-.29-19.79-.29zm-4.306 8.65c1.278-.002 2.704 0 4.306 0 12.816 0 14.335.046 19.396.276 4.68.214 7.22.996 8.912 1.653 2.24.87 3.837 1.91 5.516 3.59 1.68 1.68 2.72 3.28 3.592 5.52.657 1.69 1.44 4.23 1.653 8.91.23 5.06.28 6.58.28 19.39s-.05 14.33-.28 19.39c-.214 4.68-.996 7.22-1.653 8.91-.87 2.24-1.912 3.835-3.592 5.514-1.68 1.68-3.275 2.72-5.516 3.59-1.69.66-4.232 1.44-8.912 1.654-5.06.23-6.58.28-19.396.28-12.817 0-14.336-.05-19.396-.28-4.68-.216-7.22-.998-8.913-1.655-2.24-.87-3.84-1.91-5.52-3.59-1.68-1.68-2.72-3.276-3.592-5.517-.657-1.69-1.44-4.23-1.653-8.91-.23-5.06-.276-6.58-.276-19.398s.046-14.33.276-19.39c.214-4.68.996-7.22 1.653-8.912.87-2.24 1.912-3.84 3.592-5.52 1.68-1.68 3.28-2.72 5.52-3.592 1.692-.66 4.233-1.44 8.913-1.655 4.428-.2 6.144-.26 15.09-.27zm29.928 7.97c-3.18 0-5.76 2.577-5.76 5.758 0 3.18 2.58 5.76 5.76 5.76 3.18 0 5.76-2.58 5.76-5.76 0-3.18-2.58-5.76-5.76-5.76zm-25.622 6.73c-13.613 0-24.65 11.037-24.65 24.65 0 13.613 11.037 24.645 24.65 24.645C79.617 90.645 90.65 79.613 90.65 66S79.616 41.35 66.003 41.35zm0 8.65c8.836 0 16 7.163 16 16 0 8.836-7.164 16-16 16-8.837 0-16-7.164-16-16 0-8.837 7.163-16 16-16z"
              fill="#fff"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 512 512"
            data-name="Layer 1"
            id="Layer_1"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xmlns="http://www.w3.org/2000/svg"
          >
            <defs>
              <linearGradient
                gradientUnits="userSpaceOnUse"
                gradientTransform="matrix(0.19, 0, 0, -0.19, 0.81, 98.89)"
                y2="-2164.82"
                x2="1337.28"
                y1="518.24"
                x1="1337.28"
                id="linear-gradient"
              >
                <stop stop-color="#61fd7d" offset="0"></stop>
                <stop stop-color="#2bb826" offset="1"></stop>
              </linearGradient>
            </defs>
            <path
              transform="translate(0 0)"
              d="M512,382.07c0,2.8-.09,8.88-.26,13.58-.41,11.49-1.32,26.32-2.7,33.07a109.76,109.76,0,0,1-9.27,27.71,98.45,98.45,0,0,1-43.43,43.39,110.21,110.21,0,0,1-27.87,9.28c-6.69,1.35-21.41,2.24-32.82,2.65-4.71.17-10.79.25-13.58.25l-252.1,0c-2.8,0-8.88-.09-13.58-.26-11.49-.41-26.32-1.32-33.07-2.69a110.37,110.37,0,0,1-27.72-9.28A98.5,98.5,0,0,1,12.18,456.3,110.21,110.21,0,0,1,2.9,428.43C1.55,421.74.66,407,.25,395.61.08,390.91,0,384.82,0,382l0-252.1c0-2.8.09-8.88.25-13.58C.71,104.86,1.62,90,3,83.28a110.37,110.37,0,0,1,9.27-27.72A98.59,98.59,0,0,1,55.7,12.18,110.21,110.21,0,0,1,83.57,2.9C90.26,1.55,105,.66,116.39.25,121.09.08,127.18,0,130,0l252.1,0c2.8,0,8.88.09,13.58.25C407.14.71,422,1.62,428.72,3a110.37,110.37,0,0,1,27.72,9.27A98.59,98.59,0,0,1,499.82,55.7a110.21,110.21,0,0,1,9.28,27.87c1.35,6.69,2.24,21.41,2.65,32.82.17,4.7.25,10.79.25,13.58Z"
              class="cls-5"
            ></path>
            <path
              transform="translate(0 0)"
              d="M379.56,131.67A172.4,172.4,0,0,0,256.67,80.73C161,80.73,83.05,158.64,83.05,254.42a173.47,173.47,0,0,0,23.2,86.82l-24.65,90,92.08-24.17a173.55,173.55,0,0,0,83,21.17h.07c95.73,0,173.69-77.91,173.69-173.69A172.73,172.73,0,0,0,379.53,131.7l0,0ZM256.72,399a144.17,144.17,0,0,1-73.52-20.14l-5.29-3.15L123.27,390l14.59-53.27-3.42-5.47a143.29,143.29,0,0,1-22.11-76.81C112.33,174.81,177.1,110,256.8,110A144.34,144.34,0,0,1,401.12,254.48c-.07,79.67-64.83,144.46-144.41,144.46v0ZM335.87,290.8c-4.32-2.2-25.68-12.67-29.65-14.12s-6.85-2.19-9.8,2.2-11.22,14.11-13.76,17-5.06,3.29-9.37,1.09-18.35-6.77-34.92-21.56c-12.88-11.5-21.61-25.74-24.15-30s-.29-6.71,1.92-8.83c2-1.93,4.32-5.06,6.51-7.6s2.88-4.32,4.32-7.26.74-5.42-.35-7.6-9.8-23.55-13.34-32.25c-3.49-8.51-7.12-7.32-9.79-7.47s-5.42-.13-8.29-.13a16,16,0,0,0-11.57,5.41c-4,4.32-15.2,14.86-15.2,36.22s15.54,42,17.72,44.91,30.61,46.76,74.14,65.54c10.34,4.44,18.42,7.11,24.72,9.18a60,60,0,0,0,27.32,1.71c8.35-1.23,25.68-10.49,29.31-20.62s3.63-18.83,2.55-20.62-3.91-3-8.29-5.22l0,0Z"
              class="cls-6"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.31"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M27.75,0H95.13a27.83,27.83,0,0,1,27.75,27.75V94.57a27.83,27.83,0,0,1-27.75,27.74H27.75A27.83,27.83,0,0,1,0,94.57V27.75A27.83,27.83,0,0,1,27.75,0Z"
              class="cls-7"
            ></path>
            <path
              d="M49.19,47.41H64.72v8h.22c2.17-3.88,7.45-8,15.34-8,16.39,0,19.42,10.2,19.42,23.47V98.94H83.51V74c0-5.71-.12-13.06-8.42-13.06s-9.72,6.21-9.72,12.65v25.4H49.19V47.41ZM40,31.79a8.42,8.42,0,1,1-8.42-8.42A8.43,8.43,0,0,1,40,31.79ZM23.18,47.41H40V98.94H23.18V47.41Z"
              class="cls-8"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.39"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M27.4,0H95.48a27.48,27.48,0,0,1,27.4,27.4V95a27.48,27.48,0,0,1-27.4,27.41H27.4A27.48,27.48,0,0,1,0,95V27.4A27.48,27.48,0,0,1,27.4,0Z"
              class="cls-1"
            ></path>
            <path
              d="M37.07,32.34A14.41,14.41,0,1,1,22.66,46.75,14.41,14.41,0,0,1,37.07,32.34Z"
              class="cls-10"
            ></path>
            <path
              d="M85.74,32.34A14.41,14.41,0,1,1,71.33,46.75,14.41,14.41,0,0,1,85.74,32.34Z"
              class="cls-10"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 512 512"
            clip-rule="evenodd"
            fill-rule="evenodd"
            image-rendering="optimizeQuality"
            text-rendering="geometricPrecision"
            shape-rendering="geometricPrecision"
            xmlns="http://www.w3.org/2000/svg"
          >
            <defs>
              <linearGradient
                y2="507.468"
                x2="251.069"
                y1=".003"
                x1="251.069"
                gradientUnits="userSpaceOnUse"
                id="prefix__a"
              >
                <stop stop-color="#6364FF" offset="0"></stop>
                <stop stop-color="#563ACC" offset="1"></stop>
              </linearGradient>
            </defs>
            <path
              d="M105 0h302c57.928.155 104.845 47.072 105 104.996V407c-.155 57.926-47.072 104.844-104.996 104.998L105 512C47.074 511.844.156 464.926.002 407.003L0 105C.156 47.072 47.074.155 104.997 0H105z"
              fill="url(#prefix__a)"
            ></path>
            <path
              d="M399.681 169.996c-4.462-33.167-33.37-59.307-67.639-64.37-5.782-.857-27.685-3.972-78.429-3.972h-.378c-50.757 0-61.645 3.115-67.427 3.972-33.314 4.922-63.738 28.409-71.119 61.97-3.55 16.527-3.929 34.852-3.269 51.659.94 24.105 1.122 48.166 3.312 72.172a339.605 339.605 0 007.9 47.34c7.016 28.76 35.419 52.695 63.246 62.461a169.628 169.628 0 0092.531 4.883 135.476 135.476 0 0010.005-2.735c7.465-2.372 16.208-5.024 22.637-9.683a.705.705 0 00.209-.245.695.695 0 00.084-.315V369.87a.673.673 0 00-.263-.53.687.687 0 00-.578-.13 256.39 256.39 0 01-60.046 7.017c-34.802 0-44.162-16.513-46.84-23.387a72.424 72.424 0 01-4.071-18.437.67.67 0 01.248-.559.672.672 0 01.593-.129 251.583 251.583 0 0059.064 7.016c4.785 0 9.557 0 14.341-.129 20.01-.559 41.104-1.584 60.789-5.429.493-.097.984-.182 1.404-.307 31.055-5.965 60.609-24.68 63.611-72.075.111-1.866.393-19.543.393-21.478.014-6.581 2.118-46.68-.308-71.317zm-49.97 37.265v82.399h-32.654v-79.972c0-16.837-7.017-25.424-21.288-25.424-15.691 0-23.549 10.159-23.549 30.22v43.777h-32.455v-43.777c0-20.061-7.874-30.22-23.562-30.22-14.188 0-21.274 8.587-21.274 25.424v79.972H162.29v-82.399c0-16.837 4.298-30.213 12.895-40.128 8.868-9.891 20.502-14.971 34.941-14.971 16.713 0 29.342 6.426 37.762 19.264l8.126 13.638 8.139-13.638c8.419-12.838 21.049-19.264 37.733-19.264 14.426 0 26.058 5.08 34.956 14.971 8.589 9.906 12.877 23.282 12.869 40.128z"
              fill-rule="nonzero"
              fill="#fff"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 512 512"
            clip-rule="evenodd"
            fill-rule="evenodd"
            image-rendering="optimizeQuality"
            text-rendering="geometricPrecision"
            shape-rendering="geometricPrecision"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M105 0h302c57.928.155 104.845 47.072 105 104.996V407c-.155 57.926-47.072 104.844-104.996 104.998L105 512C47.074 511.844.156 464.926.002 407.003L0 105C.156 47.072 47.074.155 104.997 0H105z"
              fill="#5865F2"
            ></path>
            <g data-name="图层 2">
              <g data-name="Discord Logos">
                <path
                  data-name="Discord Logo - Large - White"
                  d="M368.896 153.381a269.506 269.506 0 00-67.118-20.637 186.88 186.88 0 00-8.57 17.475 250.337 250.337 0 00-37.247-2.8c-12.447 0-24.955.946-37.25 2.776-2.511-5.927-5.427-11.804-8.592-17.454a271.73 271.73 0 00-67.133 20.681c-42.479 62.841-53.991 124.112-48.235 184.513a270.622 270.622 0 0082.308 41.312c6.637-8.959 12.582-18.497 17.63-28.423a173.808 173.808 0 01-27.772-13.253c2.328-1.688 4.605-3.427 6.805-5.117 25.726 12.083 53.836 18.385 82.277 18.385 28.442 0 56.551-6.302 82.279-18.387 2.226 1.817 4.503 3.557 6.805 5.117a175.002 175.002 0 01-27.823 13.289 197.847 197.847 0 0017.631 28.4 269.513 269.513 0 0082.363-41.305l-.007.007c6.754-70.045-11.538-130.753-48.351-184.579zM201.968 300.789c-16.04 0-29.292-14.557-29.292-32.465s12.791-32.592 29.241-32.592 29.599 14.684 29.318 32.592c-.282 17.908-12.919 32.465-29.267 32.465zm108.062 0c-16.066 0-29.267-14.557-29.267-32.465s12.791-32.592 29.267-32.592c16.475 0 29.522 14.684 29.241 32.592-.281 17.908-12.894 32.465-29.241 32.465z"
                  fill-rule="nonzero"
                  fill="#fff"
                ></path>
              </g>
            </g>
          </svg>
        </button>
      </a>
    </div>
    <div class="basic-marquee basic-marquee-2">
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 512 512"
            clip-rule="evenodd"
            fill-rule="evenodd"
            image-rendering="optimizeQuality"
            text-rendering="geometricPrecision"
            shape-rendering="geometricPrecision"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g fill-rule="nonzero">
              <path
                d="M245.49 512h21.32c115.73 0 173.61 0 209.56-35.94 35.94-35.95 35.63-93.8 35.63-209.25v-21.62c0-115.43 0-173.3-35.63-209.25C440.73 0 382.54 0 266.81 0h-21.32C129.74 0 71.89 0 35.94 35.94 0 71.89 0 129.72 0 245.19v21.62c0 115.45 0 173.3 35.94 209.25C71.89 512 129.74 512 245.49 512z"
                fill="#07F"
              ></path>
              <path
                d="M274.75 369.15c-115.45 0-185.51-80.1-188.23-213.2h58.47c1.82 97.78 46.3 139.27 80.4 147.73V155.95h56.05v84.36c32.89-3.65 67.3-42.02 78.89-84.36h55.12c-8.83 52.08-46.29 90.46-72.79 106.29 26.5 12.81 69.14 46.31 85.58 106.91h-60.6c-12.8-40.51-44.17-71.88-86.2-76.14v76.14h-6.69z"
                fill="#FEFEFE"
              ></path>
            </g>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.88"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M25.2,0H97.68a25.27,25.27,0,0,1,25.2,25.2V97.68a25.27,25.27,0,0,1-25.2,25.2H25.2A25.27,25.27,0,0,1,0,97.68V25.2A25.27,25.27,0,0,1,25.2,0Z"
              class="cls-11"
            ></path>
            <path
              d="M97.52,39.06A29.27,29.27,0,0,1,89,41.39a15,15,0,0,0,6.51-8.19,29.71,29.71,0,0,1-9.4,3.59,14.81,14.81,0,0,0-25.6,10.13,14.45,14.45,0,0,0,.38,3.37A42,42,0,0,1,30.41,34.82a14.86,14.86,0,0,0-2,7.44h0A14.76,14.76,0,0,0,35,54.57a14.85,14.85,0,0,1-6.71-1.84v.19A14.8,14.8,0,0,0,40.15,67.43a14.74,14.74,0,0,1-3.9.52,16.2,16.2,0,0,1-2.8-.26A14.85,14.85,0,0,0,47.28,78,29.86,29.86,0,0,1,25.35,84.1a41.92,41.92,0,0,0,22.7,6.65c27.23,0,42.13-22.56,42.13-42.12,0-.65,0-1.28,0-1.91a29.83,29.83,0,0,0,7.38-7.65h0Z"
              class="cls-12"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 512 512"
            clip-rule="evenodd"
            fill-rule="evenodd"
            image-rendering="optimizeQuality"
            text-rendering="geometricPrecision"
            shape-rendering="geometricPrecision"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              ry="105"
              rx="105"
              height="512"
              width="512"
              fill="#FFFC00"
            ></rect>
            <g fill-rule="nonzero">
              <path
                d="M424.16 341.5c-1.47-4.87-8.51-8.3-8.51-8.3v.01c-.65-.37-1.25-.67-1.76-.92-11.72-5.67-22.1-12.47-30.86-20.22-7.03-6.22-13.05-13.07-17.89-20.37-5.9-8.89-8.67-16.32-9.87-20.34-.66-2.62-.55-3.66 0-5.03.47-1.14 1.81-2.25 2.47-2.75 3.96-2.8 10.33-6.93 14.24-9.46 3.39-2.19 6.31-4.09 8.01-5.27 5.51-3.85 9.27-7.77 11.49-11.99 2.88-5.47 3.22-11.48.98-17.41-3.02-7.98-10.47-12.75-19.94-12.75-2.11 0-4.27.24-6.42.71-5.42 1.17-10.57 3.1-14.88 4.78a.472.472 0 01-.64-.46c.46-10.67.97-25-.21-38.64-1.07-12.33-3.6-22.72-7.75-31.77-4.17-9.09-9.58-15.82-13.82-20.67-4.05-4.64-11.13-11.45-21.83-17.57-15.07-8.62-32.22-12.99-50.97-12.99-18.71 0-35.84 4.37-50.92 12.98-11.33 6.47-18.57 13.79-21.88 17.58-4.24 4.85-9.64 11.58-13.81 20.67-4.15 9.05-6.69 19.44-7.75 31.77-1.19 13.66-.71 26.87-.22 38.63.02.35-.33.59-.65.47-4.3-1.68-9.46-3.61-14.87-4.78-2.15-.47-4.31-.71-6.42-.71-9.47 0-16.92 4.77-19.94 12.75-2.24 5.93-1.9 11.94.98 17.41 2.23 4.22 5.99 8.14 11.49 11.99 1.7 1.18 4.62 3.08 8.01 5.27 3.83 2.48 10.02 6.49 14 9.28.49.36 2.17 1.62 2.7 2.93.57 1.4.67 2.46-.05 5.24-1.24 4.06-4.01 11.39-9.8 20.13-4.85 7.3-10.87 14.15-17.9 20.37-8.76 7.75-19.14 14.55-30.86 20.22-.55.27-1.21.61-1.93 1.02v-.01s-7 3.58-8.32 8.2c-1.95 6.83 3.24 13.22 8.56 16.65 8.68 5.59 19.25 8.6 25.38 10.24 1.7.45 3.25.87 4.66 1.31.88.29 3.09 1.12 4.03 2.33 1.19 1.53 1.33 3.43 1.76 5.56.68 3.59 2.17 8.06 6.62 11.12 4.88 3.38 11.09 3.62 18.95 3.92 8.22.32 18.46.71 30.16 4.57 5.43 1.8 10.35 4.82 16.04 8.31 11.89 7.31 26.69 16.4 51.98 16.4 25.3 0 40.2-9.14 52.17-16.49 5.66-3.47 10.55-6.47 15.85-8.22 11.71-3.87 21.94-4.26 30.16-4.57 7.86-.3 14.07-.54 18.96-3.92 4.75-3.28 6.13-8.17 6.75-11.87.33-1.83.56-3.46 1.61-4.81.89-1.15 2.93-1.95 3.89-2.29 1.45-.45 3.05-.88 4.82-1.35 6.13-1.64 13.81-3.58 23.16-8.86 11.19-6.32 11.95-14.17 10.79-18.03z"
                fill="#fff"
              ></path>
              <path
                d="M408.78 351.17c-15.32 8.46-25.5 7.56-33.42 12.65-6.73 4.33-2.75 13.67-7.64 17.04-6 4.15-23.76-.29-46.68 7.28-18.91 6.25-30.98 24.23-65.03 24.23-34.12 0-45.83-17.89-65.02-24.23-22.93-7.57-40.68-3.13-46.69-7.28-4.88-3.37-.91-12.71-7.63-17.04-7.92-5.09-18.11-4.19-33.42-12.65-9.75-5.38-4.22-8.72-.97-10.29 55.49-26.86 64.33-68.34 64.73-71.46.48-3.72 1.01-6.65-3.1-10.45-3.96-3.66-21.55-14.54-26.42-17.95-8.08-5.63-11.63-11.27-9.01-18.19 1.8-4.78 6.29-6.59 11.01-6.59 1.47 0 2.96.18 4.4.49 8.86 1.93 17.47 6.36 22.45 7.57.68.16 1.29.24 1.83.24 2.64 0 3.58-1.34 3.4-4.37-.57-9.7-1.94-28.6-.42-46.26 2.1-24.29 9.94-36.33 19.25-46.98 4.47-5.12 25.46-27.3 65.61-27.3 40.26 0 61.15 22.18 65.62 27.3 9.31 10.65 17.15 22.69 19.24 46.98 1.53 17.66.21 36.57-.41 46.26-.21 3.19.75 4.37 3.4 4.37.54 0 1.15-.08 1.83-.24 4.98-1.21 13.58-5.64 22.45-7.57 1.44-.31 2.93-.49 4.4-.49 4.72 0 9.2 1.81 11.01 6.59 2.62 6.92-.93 12.56-9.01 18.19-4.88 3.41-22.46 14.29-26.43 17.95-4.1 3.8-3.57 6.73-3.1 10.45.4 3.12 9.25 44.6 64.74 71.46 3.25 1.57 8.78 4.91-.97 10.29zM265.06 79.91h-18.08c-17.08 1.22-32.88 5.93-47.09 14.05-12.03 6.87-20 14.55-24.58 19.78-10.99 12.57-21.52 28.35-24.12 58.45-.74 8.55-.92 17.3-.79 25.49-.75-.19-1.5-.36-2.26-.53-2.88-.63-5.79-.94-8.65-.94-13.79 0-25.2 7.48-29.75 19.53-3.29 8.69-2.75 17.93 1.51 26.01 3.02 5.74 7.85 10.88 14.77 15.7 1.84 1.29 4.69 3.14 8.3 5.48 1.95 1.26 4.8 3.11 7.6 4.95.42.3 1.93 1.4 2.43 2.45.58 1.2.6 2.49-.26 4.87-1.48 3.27-3.6 7.26-6.6 11.66-8.93 13.05-21.69 24.1-37.98 32.93-8.64 4.6-17.61 7.63-21.4 17.93-.85 2.31-1.28 4.71-1.28 7.14.01 5.77 2.45 11.69 7.55 16.93l.01-.01c2.39 2.57 5.39 4.85 9.18 6.93 8.89 4.91 16.45 7.32 22.4 8.97 1.04.31 3.46 1.1 4.52 2.02 2.65 2.32 2.27 5.81 5.8 10.91 2.13 3.18 4.6 5.34 6.62 6.74 7.4 5.11 15.72 5.43 24.52 5.77 7.96.3 16.97.65 27.28 4.05 4.26 1.41 8.69 4.13 13.83 7.29 11.05 6.79 25.77 15.83 49.06 17.63h16.81c23.32-1.81 38.14-10.89 49.26-17.72 5.1-3.13 9.51-5.83 13.66-7.2 10.29-3.41 19.31-3.75 27.27-4.05 8.8-.34 17.11-.66 24.51-5.77 2.33-1.61 5.24-4.22 7.55-8.22 2.53-4.31 2.47-7.35 4.85-9.43.97-.85 3.11-1.58 4.25-1.94 6-1.65 13.66-4.05 22.7-9.05 4.01-2.21 7.15-4.63 9.61-7.39.03-.03.06-.07.09-.1 6.81-7.33 8.52-15.92 5.73-23.5-2.49-6.77-7.23-10.4-12.63-13.4a40.52 40.52 0 00-2.72-1.44c-1.61-.83-3.25-1.64-4.9-2.49-16.83-8.92-29.97-20.18-39.1-33.53-3.08-4.51-5.22-8.58-6.7-11.89-.78-2.23-.75-3.48-.19-4.64.42-.88 1.55-1.8 2.15-2.24 2.89-1.91 5.89-3.86 7.91-5.16 3.6-2.34 6.45-4.19 8.3-5.48 6.91-4.82 11.74-9.96 14.77-15.7 4.26-8.08 4.8-17.32 1.51-26.01-4.56-12.05-15.96-19.53-29.75-19.53-2.86 0-5.77.31-8.66.94-.76.17-1.51.34-2.25.53.12-8.19-.05-16.94-.79-25.49-2.6-30.1-13.13-45.88-24.13-58.45-4.58-5.24-12.55-12.93-24.52-19.77-14.2-8.13-30.02-12.84-47.13-14.06z"
              ></path>
            </g>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.88"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M25.2,0H97.68a25.27,25.27,0,0,1,25.2,25.2V97.68a25.27,25.27,0,0,1-25.2,25.2H25.2A25.27,25.27,0,0,1,0,97.68V25.2A25.27,25.27,0,0,1,25.2,0Z"
              class="cls-13"
            ></path>
            <path
              d="M61.44,97.79A36.35,36.35,0,1,1,97.79,61.44,36.38,36.38,0,0,1,61.44,97.79Zm24-55.93c-.66.88-5.87,7.56-17.34,12.24.72,1.48,1.42,3,2.06,4.51.23.54.45,1.06.67,1.6a73.28,73.28,0,0,1,21.62,1,30.92,30.92,0,0,0-7-19.33Zm6.61,24.55a45.46,45.46,0,0,0-19.33-1.32,135.32,135.32,0,0,1,6,22.13,31,31,0,0,0,13.3-20.81ZM73.57,90.06A129.72,129.72,0,0,0,67,66.52l-.2.08C49.23,72.7,42.94,84.84,42.39,86a31,31,0,0,0,31.18,4.09Zm-35.2-7.82C39.08,81,47.6,66.93,63.6,61.75c.4-.12.81-.25,1.22-.36-.78-1.77-1.63-3.54-2.51-5.27a115.42,115.42,0,0,1-31.9,4.43c0,.32,0,.63,0,1a30.92,30.92,0,0,0,8,20.74ZM31.06,55.12a116.9,116.9,0,0,0,28.71-3.77,192.76,192.76,0,0,0-11.52-18A31.14,31.14,0,0,0,31.06,55.12ZM54.17,31.3A166.07,166.07,0,0,1,65.76,49.47C76.8,45.34,81.47,39.05,82,38.26a30.91,30.91,0,0,0-20.59-7.83,32.8,32.8,0,0,0-7.27.87Z"
              class="cls-14"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.88"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M25.2,0H97.68a25.27,25.27,0,0,1,25.2,25.2V97.68a25.27,25.27,0,0,1-25.2,25.2H25.2A25.27,25.27,0,0,1,0,97.68V25.2A25.27,25.27,0,0,1,25.2,0Z"
              class="cls-15"
            ></path>
            <path
              d="M75.25,74.38a8.23,8.23,0,0,0,9.49.54,5.26,5.26,0,0,0,2.17-2.62h7.15c-1.15,3.56-2.89,6.09-5.27,7.62a15.42,15.42,0,0,1-8.56,2.31,17.09,17.09,0,0,1-6.31-1.12,13.36,13.36,0,0,1-4.77-3.18,14.64,14.64,0,0,1-3-4.92,18.24,18.24,0,0,1-1.06-6.31,17.34,17.34,0,0,1,1.09-6.18,14.43,14.43,0,0,1,3.1-5,14.76,14.76,0,0,1,4.8-3.29,15.37,15.37,0,0,1,6.17-1.21,13.9,13.9,0,0,1,6.57,1.47,13.3,13.3,0,0,1,4.62,3.91A15.9,15.9,0,0,1,94,62.07a21.12,21.12,0,0,1,.57,6.59H73.24a8.22,8.22,0,0,0,2,5.71ZM47.49,40.64a25,25,0,0,1,5.33.52,11.45,11.45,0,0,1,4.12,1.69A8,8,0,0,1,59.62,46a11,11,0,0,1,.93,4.79,9,9,0,0,1-1.4,5.15A10.29,10.29,0,0,1,55,59.28a9.78,9.78,0,0,1,5.62,3.8A12.62,12.62,0,0,1,61.25,75,10.43,10.43,0,0,1,58,78.69a14.27,14.27,0,0,1-4.64,2.11,21.08,21.08,0,0,1-5.34.69H28.24V40.65H47.49Zm-.67,33.88a11.3,11.3,0,0,0,2.51-.26,5.8,5.8,0,0,0,2.11-.87,4.3,4.3,0,0,0,1.47-1.63,5.69,5.69,0,0,0,.53-2.64c0-2.1-.6-3.61-1.78-4.52A7.52,7.52,0,0,0,47,63.27H37.22V74.51h9.6v0Zm-.5-17.39a6.47,6.47,0,0,0,4-1.14,4.28,4.28,0,0,0,1.53-3.71,4.87,4.87,0,0,0-.51-2.35,3.72,3.72,0,0,0-1.39-1.42,5.42,5.42,0,0,0-2-.72,12.49,12.49,0,0,0-2.31-.2h-8.4v9.54h9.1ZM71.57,43.94H88.13v4H71.57v-4Zm13,14.91A6.11,6.11,0,0,0,80,57.2a7,7,0,0,0-3.23.66,6.39,6.39,0,0,0-2.06,1.64,5.68,5.68,0,0,0-1.08,2.08,9.26,9.26,0,0,0-.38,2H86.46a7.91,7.91,0,0,0-1.88-4.68Z"
              class="cls-16"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 512 512"
            clip-rule="evenodd"
            fill-rule="evenodd"
            image-rendering="optimizeQuality"
            text-rendering="geometricPrecision"
            shape-rendering="geometricPrecision"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              ry="105"
              rx="105"
              height="512"
              width="512"
              fill="#ff4500"
            ></rect>
            <path
              d="M307.75 303.16c-12.98 0-23.54-10.55-23.54-23.54 0-12.98 10.56-23.53 23.54-23.53 12.97 0 23.53 10.55 23.53 23.53 0 12.99-10.56 23.54-23.53 23.54zm4.14 38.66c-16.06 16.04-46.85 17.29-55.9 17.29-9.06 0-39.84-1.25-55.89-17.3a6.096 6.096 0 010-8.62c2.38-2.39 6.25-2.39 8.64 0 10.12 10.13 31.78 13.71 47.25 13.71 15.47 0 37.13-3.58 47.28-13.71a6.09 6.09 0 018.63.01c2.38 2.38 2.37 6.24-.01 8.62zm-131.25-62.2c0-12.98 10.56-23.53 23.55-23.53 12.97 0 23.53 10.55 23.53 23.53s-10.56 23.53-23.53 23.53c-12.99 0-23.55-10.55-23.55-23.53zm225.93-23.53c0-18.2-14.76-32.96-32.95-32.96-8.88 0-16.93 3.53-22.86 9.25-22.53-16.26-53.56-26.76-88.12-27.97l15.01-70.62 49.04 10.42c.59 12.48 10.81 22.43 23.42 22.43 13.01 0 23.54-10.54 23.54-23.54s-10.53-23.54-23.54-23.54c-9.24 0-17.16 5.38-21.01 13.14l-54.77-11.64a5.758 5.758 0 00-4.42.82 5.876 5.876 0 00-2.55 3.71L250.6 204.4c-35.09.97-66.62 11.48-89.43 27.91-5.92-5.68-13.93-9.18-22.79-9.18-18.19 0-32.95 14.76-32.95 32.96 0 13.38 8 24.88 19.47 30.04-.51 3.28-.79 6.6-.79 9.97 0 50.69 59.02 91.8 131.81 91.8 72.8 0 131.82-41.11 131.82-91.8 0-3.35-.28-6.66-.77-9.91 11.54-5.13 19.6-16.67 19.6-30.1z"
              fill-rule="nonzero"
              fill="#fff"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.88"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M25.2,0H97.68a25.27,25.27,0,0,1,25.2,25.2V97.68a25.27,25.27,0,0,1-25.2,25.2H25.2A25.27,25.27,0,0,1,0,97.68V25.2A25.27,25.27,0,0,1,25.2,0Z"
              class="cls-17"
            ></path>
            <path
              d="M30.38,30.35V42.27A50.29,50.29,0,0,1,80.57,92.52h12A62.23,62.23,0,0,0,30.38,30.36Z"
              class="cls-18"
            ></path>
            <path
              d="M30.36,51.48V63.39A29.12,29.12,0,0,1,59.43,92.53h12a41.09,41.09,0,0,0-41-41.05Z"
              class="cls-18"
            ></path>
            <path
              d="M38.63,75.94a8.26,8.26,0,1,0,8.29,8.26,8.29,8.29,0,0,0-8.29-8.26Z"
              class="cls-18"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 512 512"
            clip-rule="evenodd"
            fill-rule="evenodd"
            image-rendering="optimizeQuality"
            text-rendering="geometricPrecision"
            shape-rendering="geometricPrecision"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g fill-rule="nonzero">
              <path
                d="M245.49 512h21.32c115.73 0 173.61 0 209.56-35.94 35.94-35.95 35.63-93.8 35.63-209.25v-21.62c0-115.43 0-173.3-35.63-209.25C440.73 0 382.54 0 266.81 0h-21.32C129.74 0 71.89 0 35.94 35.94 0 71.89 0 129.72 0 245.19v21.62c0 115.45 0 173.3 35.94 209.25C71.89 512 129.74 512 245.49 512z"
                fill="#07F"
              ></path>
              <path
                d="M274.75 369.15c-115.45 0-185.51-80.1-188.23-213.2h58.47c1.82 97.78 46.3 139.27 80.4 147.73V155.95h56.05v84.36c32.89-3.65 67.3-42.02 78.89-84.36h55.12c-8.83 52.08-46.29 90.46-72.79 106.29 26.5 12.81 69.14 46.31 85.58 106.91h-60.6c-12.8-40.51-44.17-71.88-86.2-76.14v76.14h-6.69z"
                fill="#FEFEFE"
              ></path>
            </g>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.88"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M25.2,0H97.68a25.27,25.27,0,0,1,25.2,25.2V97.68a25.27,25.27,0,0,1-25.2,25.2H25.2A25.27,25.27,0,0,1,0,97.68V25.2A25.27,25.27,0,0,1,25.2,0Z"
              class="cls-11"
            ></path>
            <path
              d="M97.52,39.06A29.27,29.27,0,0,1,89,41.39a15,15,0,0,0,6.51-8.19,29.71,29.71,0,0,1-9.4,3.59,14.81,14.81,0,0,0-25.6,10.13,14.45,14.45,0,0,0,.38,3.37A42,42,0,0,1,30.41,34.82a14.86,14.86,0,0,0-2,7.44h0A14.76,14.76,0,0,0,35,54.57a14.85,14.85,0,0,1-6.71-1.84v.19A14.8,14.8,0,0,0,40.15,67.43a14.74,14.74,0,0,1-3.9.52,16.2,16.2,0,0,1-2.8-.26A14.85,14.85,0,0,0,47.28,78,29.86,29.86,0,0,1,25.35,84.1a41.92,41.92,0,0,0,22.7,6.65c27.23,0,42.13-22.56,42.13-42.12,0-.65,0-1.28,0-1.91a29.83,29.83,0,0,0,7.38-7.65h0Z"
              class="cls-12"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 512 512"
            clip-rule="evenodd"
            fill-rule="evenodd"
            image-rendering="optimizeQuality"
            text-rendering="geometricPrecision"
            shape-rendering="geometricPrecision"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              ry="105"
              rx="105"
              height="512"
              width="512"
              fill="#FFFC00"
            ></rect>
            <g fill-rule="nonzero">
              <path
                d="M424.16 341.5c-1.47-4.87-8.51-8.3-8.51-8.3v.01c-.65-.37-1.25-.67-1.76-.92-11.72-5.67-22.1-12.47-30.86-20.22-7.03-6.22-13.05-13.07-17.89-20.37-5.9-8.89-8.67-16.32-9.87-20.34-.66-2.62-.55-3.66 0-5.03.47-1.14 1.81-2.25 2.47-2.75 3.96-2.8 10.33-6.93 14.24-9.46 3.39-2.19 6.31-4.09 8.01-5.27 5.51-3.85 9.27-7.77 11.49-11.99 2.88-5.47 3.22-11.48.98-17.41-3.02-7.98-10.47-12.75-19.94-12.75-2.11 0-4.27.24-6.42.71-5.42 1.17-10.57 3.1-14.88 4.78a.472.472 0 01-.64-.46c.46-10.67.97-25-.21-38.64-1.07-12.33-3.6-22.72-7.75-31.77-4.17-9.09-9.58-15.82-13.82-20.67-4.05-4.64-11.13-11.45-21.83-17.57-15.07-8.62-32.22-12.99-50.97-12.99-18.71 0-35.84 4.37-50.92 12.98-11.33 6.47-18.57 13.79-21.88 17.58-4.24 4.85-9.64 11.58-13.81 20.67-4.15 9.05-6.69 19.44-7.75 31.77-1.19 13.66-.71 26.87-.22 38.63.02.35-.33.59-.65.47-4.3-1.68-9.46-3.61-14.87-4.78-2.15-.47-4.31-.71-6.42-.71-9.47 0-16.92 4.77-19.94 12.75-2.24 5.93-1.9 11.94.98 17.41 2.23 4.22 5.99 8.14 11.49 11.99 1.7 1.18 4.62 3.08 8.01 5.27 3.83 2.48 10.02 6.49 14 9.28.49.36 2.17 1.62 2.7 2.93.57 1.4.67 2.46-.05 5.24-1.24 4.06-4.01 11.39-9.8 20.13-4.85 7.3-10.87 14.15-17.9 20.37-8.76 7.75-19.14 14.55-30.86 20.22-.55.27-1.21.61-1.93 1.02v-.01s-7 3.58-8.32 8.2c-1.95 6.83 3.24 13.22 8.56 16.65 8.68 5.59 19.25 8.6 25.38 10.24 1.7.45 3.25.87 4.66 1.31.88.29 3.09 1.12 4.03 2.33 1.19 1.53 1.33 3.43 1.76 5.56.68 3.59 2.17 8.06 6.62 11.12 4.88 3.38 11.09 3.62 18.95 3.92 8.22.32 18.46.71 30.16 4.57 5.43 1.8 10.35 4.82 16.04 8.31 11.89 7.31 26.69 16.4 51.98 16.4 25.3 0 40.2-9.14 52.17-16.49 5.66-3.47 10.55-6.47 15.85-8.22 11.71-3.87 21.94-4.26 30.16-4.57 7.86-.3 14.07-.54 18.96-3.92 4.75-3.28 6.13-8.17 6.75-11.87.33-1.83.56-3.46 1.61-4.81.89-1.15 2.93-1.95 3.89-2.29 1.45-.45 3.05-.88 4.82-1.35 6.13-1.64 13.81-3.58 23.16-8.86 11.19-6.32 11.95-14.17 10.79-18.03z"
                fill="#fff"
              ></path>
              <path
                d="M408.78 351.17c-15.32 8.46-25.5 7.56-33.42 12.65-6.73 4.33-2.75 13.67-7.64 17.04-6 4.15-23.76-.29-46.68 7.28-18.91 6.25-30.98 24.23-65.03 24.23-34.12 0-45.83-17.89-65.02-24.23-22.93-7.57-40.68-3.13-46.69-7.28-4.88-3.37-.91-12.71-7.63-17.04-7.92-5.09-18.11-4.19-33.42-12.65-9.75-5.38-4.22-8.72-.97-10.29 55.49-26.86 64.33-68.34 64.73-71.46.48-3.72 1.01-6.65-3.1-10.45-3.96-3.66-21.55-14.54-26.42-17.95-8.08-5.63-11.63-11.27-9.01-18.19 1.8-4.78 6.29-6.59 11.01-6.59 1.47 0 2.96.18 4.4.49 8.86 1.93 17.47 6.36 22.45 7.57.68.16 1.29.24 1.83.24 2.64 0 3.58-1.34 3.4-4.37-.57-9.7-1.94-28.6-.42-46.26 2.1-24.29 9.94-36.33 19.25-46.98 4.47-5.12 25.46-27.3 65.61-27.3 40.26 0 61.15 22.18 65.62 27.3 9.31 10.65 17.15 22.69 19.24 46.98 1.53 17.66.21 36.57-.41 46.26-.21 3.19.75 4.37 3.4 4.37.54 0 1.15-.08 1.83-.24 4.98-1.21 13.58-5.64 22.45-7.57 1.44-.31 2.93-.49 4.4-.49 4.72 0 9.2 1.81 11.01 6.59 2.62 6.92-.93 12.56-9.01 18.19-4.88 3.41-22.46 14.29-26.43 17.95-4.1 3.8-3.57 6.73-3.1 10.45.4 3.12 9.25 44.6 64.74 71.46 3.25 1.57 8.78 4.91-.97 10.29zM265.06 79.91h-18.08c-17.08 1.22-32.88 5.93-47.09 14.05-12.03 6.87-20 14.55-24.58 19.78-10.99 12.57-21.52 28.35-24.12 58.45-.74 8.55-.92 17.3-.79 25.49-.75-.19-1.5-.36-2.26-.53-2.88-.63-5.79-.94-8.65-.94-13.79 0-25.2 7.48-29.75 19.53-3.29 8.69-2.75 17.93 1.51 26.01 3.02 5.74 7.85 10.88 14.77 15.7 1.84 1.29 4.69 3.14 8.3 5.48 1.95 1.26 4.8 3.11 7.6 4.95.42.3 1.93 1.4 2.43 2.45.58 1.2.6 2.49-.26 4.87-1.48 3.27-3.6 7.26-6.6 11.66-8.93 13.05-21.69 24.1-37.98 32.93-8.64 4.6-17.61 7.63-21.4 17.93-.85 2.31-1.28 4.71-1.28 7.14.01 5.77 2.45 11.69 7.55 16.93l.01-.01c2.39 2.57 5.39 4.85 9.18 6.93 8.89 4.91 16.45 7.32 22.4 8.97 1.04.31 3.46 1.1 4.52 2.02 2.65 2.32 2.27 5.81 5.8 10.91 2.13 3.18 4.6 5.34 6.62 6.74 7.4 5.11 15.72 5.43 24.52 5.77 7.96.3 16.97.65 27.28 4.05 4.26 1.41 8.69 4.13 13.83 7.29 11.05 6.79 25.77 15.83 49.06 17.63h16.81c23.32-1.81 38.14-10.89 49.26-17.72 5.1-3.13 9.51-5.83 13.66-7.2 10.29-3.41 19.31-3.75 27.27-4.05 8.8-.34 17.11-.66 24.51-5.77 2.33-1.61 5.24-4.22 7.55-8.22 2.53-4.31 2.47-7.35 4.85-9.43.97-.85 3.11-1.58 4.25-1.94 6-1.65 13.66-4.05 22.7-9.05 4.01-2.21 7.15-4.63 9.61-7.39.03-.03.06-.07.09-.1 6.81-7.33 8.52-15.92 5.73-23.5-2.49-6.77-7.23-10.4-12.63-13.4a40.52 40.52 0 00-2.72-1.44c-1.61-.83-3.25-1.64-4.9-2.49-16.83-8.92-29.97-20.18-39.1-33.53-3.08-4.51-5.22-8.58-6.7-11.89-.78-2.23-.75-3.48-.19-4.64.42-.88 1.55-1.8 2.15-2.24 2.89-1.91 5.89-3.86 7.91-5.16 3.6-2.34 6.45-4.19 8.3-5.48 6.91-4.82 11.74-9.96 14.77-15.7 4.26-8.08 4.8-17.32 1.51-26.01-4.56-12.05-15.96-19.53-29.75-19.53-2.86 0-5.77.31-8.66.94-.76.17-1.51.34-2.25.53.12-8.19-.05-16.94-.79-25.49-2.6-30.1-13.13-45.88-24.13-58.45-4.58-5.24-12.55-12.93-24.52-19.77-14.2-8.13-30.02-12.84-47.13-14.06z"
              ></path>
            </g>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.88"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M25.2,0H97.68a25.27,25.27,0,0,1,25.2,25.2V97.68a25.27,25.27,0,0,1-25.2,25.2H25.2A25.27,25.27,0,0,1,0,97.68V25.2A25.27,25.27,0,0,1,25.2,0Z"
              class="cls-13"
            ></path>
            <path
              d="M61.44,97.79A36.35,36.35,0,1,1,97.79,61.44,36.38,36.38,0,0,1,61.44,97.79Zm24-55.93c-.66.88-5.87,7.56-17.34,12.24.72,1.48,1.42,3,2.06,4.51.23.54.45,1.06.67,1.6a73.28,73.28,0,0,1,21.62,1,30.92,30.92,0,0,0-7-19.33Zm6.61,24.55a45.46,45.46,0,0,0-19.33-1.32,135.32,135.32,0,0,1,6,22.13,31,31,0,0,0,13.3-20.81ZM73.57,90.06A129.72,129.72,0,0,0,67,66.52l-.2.08C49.23,72.7,42.94,84.84,42.39,86a31,31,0,0,0,31.18,4.09Zm-35.2-7.82C39.08,81,47.6,66.93,63.6,61.75c.4-.12.81-.25,1.22-.36-.78-1.77-1.63-3.54-2.51-5.27a115.42,115.42,0,0,1-31.9,4.43c0,.32,0,.63,0,1a30.92,30.92,0,0,0,8,20.74ZM31.06,55.12a116.9,116.9,0,0,0,28.71-3.77,192.76,192.76,0,0,0-11.52-18A31.14,31.14,0,0,0,31.06,55.12ZM54.17,31.3A166.07,166.07,0,0,1,65.76,49.47C76.8,45.34,81.47,39.05,82,38.26a30.91,30.91,0,0,0-20.59-7.83,32.8,32.8,0,0,0-7.27.87Z"
              class="cls-14"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.88"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M25.2,0H97.68a25.27,25.27,0,0,1,25.2,25.2V97.68a25.27,25.27,0,0,1-25.2,25.2H25.2A25.27,25.27,0,0,1,0,97.68V25.2A25.27,25.27,0,0,1,25.2,0Z"
              class="cls-15"
            ></path>
            <path
              d="M75.25,74.38a8.23,8.23,0,0,0,9.49.54,5.26,5.26,0,0,0,2.17-2.62h7.15c-1.15,3.56-2.89,6.09-5.27,7.62a15.42,15.42,0,0,1-8.56,2.31,17.09,17.09,0,0,1-6.31-1.12,13.36,13.36,0,0,1-4.77-3.18,14.64,14.64,0,0,1-3-4.92,18.24,18.24,0,0,1-1.06-6.31,17.34,17.34,0,0,1,1.09-6.18,14.43,14.43,0,0,1,3.1-5,14.76,14.76,0,0,1,4.8-3.29,15.37,15.37,0,0,1,6.17-1.21,13.9,13.9,0,0,1,6.57,1.47,13.3,13.3,0,0,1,4.62,3.91A15.9,15.9,0,0,1,94,62.07a21.12,21.12,0,0,1,.57,6.59H73.24a8.22,8.22,0,0,0,2,5.71ZM47.49,40.64a25,25,0,0,1,5.33.52,11.45,11.45,0,0,1,4.12,1.69A8,8,0,0,1,59.62,46a11,11,0,0,1,.93,4.79,9,9,0,0,1-1.4,5.15A10.29,10.29,0,0,1,55,59.28a9.78,9.78,0,0,1,5.62,3.8A12.62,12.62,0,0,1,61.25,75,10.43,10.43,0,0,1,58,78.69a14.27,14.27,0,0,1-4.64,2.11,21.08,21.08,0,0,1-5.34.69H28.24V40.65H47.49Zm-.67,33.88a11.3,11.3,0,0,0,2.51-.26,5.8,5.8,0,0,0,2.11-.87,4.3,4.3,0,0,0,1.47-1.63,5.69,5.69,0,0,0,.53-2.64c0-2.1-.6-3.61-1.78-4.52A7.52,7.52,0,0,0,47,63.27H37.22V74.51h9.6v0Zm-.5-17.39a6.47,6.47,0,0,0,4-1.14,4.28,4.28,0,0,0,1.53-3.71,4.87,4.87,0,0,0-.51-2.35,3.72,3.72,0,0,0-1.39-1.42,5.42,5.42,0,0,0-2-.72,12.49,12.49,0,0,0-2.31-.2h-8.4v9.54h9.1ZM71.57,43.94H88.13v4H71.57v-4Zm13,14.91A6.11,6.11,0,0,0,80,57.2a7,7,0,0,0-3.23.66,6.39,6.39,0,0,0-2.06,1.64,5.68,5.68,0,0,0-1.08,2.08,9.26,9.26,0,0,0-.38,2H86.46a7.91,7.91,0,0,0-1.88-4.68Z"
              class="cls-16"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 512 512"
            clip-rule="evenodd"
            fill-rule="evenodd"
            image-rendering="optimizeQuality"
            text-rendering="geometricPrecision"
            shape-rendering="geometricPrecision"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              ry="105"
              rx="105"
              height="512"
              width="512"
              fill="#ff4500"
            ></rect>
            <path
              d="M307.75 303.16c-12.98 0-23.54-10.55-23.54-23.54 0-12.98 10.56-23.53 23.54-23.53 12.97 0 23.53 10.55 23.53 23.53 0 12.99-10.56 23.54-23.53 23.54zm4.14 38.66c-16.06 16.04-46.85 17.29-55.9 17.29-9.06 0-39.84-1.25-55.89-17.3a6.096 6.096 0 010-8.62c2.38-2.39 6.25-2.39 8.64 0 10.12 10.13 31.78 13.71 47.25 13.71 15.47 0 37.13-3.58 47.28-13.71a6.09 6.09 0 018.63.01c2.38 2.38 2.37 6.24-.01 8.62zm-131.25-62.2c0-12.98 10.56-23.53 23.55-23.53 12.97 0 23.53 10.55 23.53 23.53s-10.56 23.53-23.53 23.53c-12.99 0-23.55-10.55-23.55-23.53zm225.93-23.53c0-18.2-14.76-32.96-32.95-32.96-8.88 0-16.93 3.53-22.86 9.25-22.53-16.26-53.56-26.76-88.12-27.97l15.01-70.62 49.04 10.42c.59 12.48 10.81 22.43 23.42 22.43 13.01 0 23.54-10.54 23.54-23.54s-10.53-23.54-23.54-23.54c-9.24 0-17.16 5.38-21.01 13.14l-54.77-11.64a5.758 5.758 0 00-4.42.82 5.876 5.876 0 00-2.55 3.71L250.6 204.4c-35.09.97-66.62 11.48-89.43 27.91-5.92-5.68-13.93-9.18-22.79-9.18-18.19 0-32.95 14.76-32.95 32.96 0 13.38 8 24.88 19.47 30.04-.51 3.28-.79 6.6-.79 9.97 0 50.69 59.02 91.8 131.81 91.8 72.8 0 131.82-41.11 131.82-91.8 0-3.35-.28-6.66-.77-9.91 11.54-5.13 19.6-16.67 19.6-30.1z"
              fill-rule="nonzero"
              fill="#fff"
            ></path>
          </svg>
        </button>
      </a>
      <a class="social-media-link" href="#">
        <button class="button">
          <svg
            viewBox="0 0 122.88 122.88"
            data-name="Layer 1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M25.2,0H97.68a25.27,25.27,0,0,1,25.2,25.2V97.68a25.27,25.27,0,0,1-25.2,25.2H25.2A25.27,25.27,0,0,1,0,97.68V25.2A25.27,25.27,0,0,1,25.2,0Z"
              class="cls-17"
            ></path>
            <path
              d="M30.38,30.35V42.27A50.29,50.29,0,0,1,80.57,92.52h12A62.23,62.23,0,0,0,30.38,30.36Z"
              class="cls-18"
            ></path>
            <path
              d="M30.36,51.48V63.39A29.12,29.12,0,0,1,59.43,92.53h12a41.09,41.09,0,0,0-41-41.05Z"
              class="cls-18"
            ></path>
            <path
              d="M38.63,75.94a8.26,8.26,0,1,0,8.29,8.26,8.29,8.29,0,0,0-8.29-8.26Z"
              class="cls-18"
            ></path>
          </svg>
        </button>
      </a>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by barisdogansutcu  - Tags: youtube, facebook, instagram, button, social media, linkedin, whatsapp, marquee */
.content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 15px;
  width: 300px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}
.content::before {
  content: "";
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translateY(-50%);
  bottom: 0;
  width: 40px;
  height: 96px;
  background-image: linear-gradient(90deg, #0000001c, transparent);
  z-index: 2;
  border-radius: 10px 0 0 10px;
}
.content::after {
  content: "";
  position: absolute;
  right: 0%;
  top: 50%;
  transform: translateY(-50%);
  bottom: 0;
  width: 40px;
  height: 96px;
  background-image: linear-gradient(-90deg, #0000001c, transparent);
  z-index: 9;
  border-radius: 0 10px 10px 0;
}
.basic-marquee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.basic-marquee .button {
  transition: all 0.3s ease;
}
.basic-marquee .button:hover {
  transform: scale(1.1);
  cursor: pointer;
}
.basic-marquee-1 {
  animation: marquee 15s linear infinite;
}
.basic-marquee-2 {
  animation: marquee 21s linear infinite;
}
.benefits {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  min-width: 900px;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  inset: 0;
}
@keyframes marquee {
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.basic-marquee svg {
  width: 40px;
}
.basic-marquee button {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cls-1 {
  fill: #1ab7ea;
}

.cls-1,
.cls-2 {
  fill-rule: evenodd;
}

.cls-2 {
  fill: #fff;
}

.cls-3 {
  fill: #ee8208;
  fill-rule: evenodd;
}

.cls-4 {
  fill: #fff;
}

.cls-5,
.cls-6 {
  fill-rule: evenodd;
}

.cls-5 {
  fill: #48dd55;
}

.cls-6 {
  fill: #fff;
}

.cls-7 {
  fill: #0a66c2;
}

.cls-7,
.cls-8 {
  fill-rule: evenodd;
}

.cls-8 {
  fill: #fff;
}

.cls-9 {
  fill: #10b7f4;
}

.cls-9,
.cls-10 {
  fill-rule: evenodd;
}

.cls-10 {
  fill: #fff;
}

.cls-11 {
  fill: #1da1f2;
}

.cls-11,
.cls-12 {
  fill-rule: evenodd;
}

.cls-12 {
  fill: #fff;
}

.cls-13 {
  fill: #ea4c89;
}

.cls-13,
.cls-14 {
  fill-rule: evenodd;
}

.cls-14 {
  fill: #fff;
}

.cls-15 {
  fill: #1769ff;
}

.cls-15,
.cls-16 {
  fill-rule: evenodd;
}

.cls-16 {
  fill: #fff;
}

.cls-17 {
  fill: #f26522;
}

.cls-17,
.cls-18 {
  fill-rule: evenodd;
}

.cls-18 {
  fill: #fff;
}

</style>
    

================================================
FILE: Buttons/barisdogansutcu_chatty-snake-91.html
================================================
<button>
  <span>Hey! Siri</span>
  <div class="line"></div>
  <div class="line-2"></div>
  <div class="speak"></div>
  <div class="speak one"></div>
  <div class="speak two"></div>
  <div class="speak three"></div>
</button>
<style>
/* From Uiverse.io by barisdogansutcu - Tags: button */
button {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 170px;
  border-radius: 50px;
  border-width: 0;
  background-color: black;
  color: white;
  font-size: 16px;
  letter-spacing: 3px;
  position: relative;
  overflow: hidden;
  padding: 10px 20px;
  width: 190px;
  cursor: pointer;
}

button span {
  position: relative;
  width: max-content;
  z-index: 99;
  display: block;
}

.line,.line-2 {
  position: absolute;
  width: calc(100% - 20px);
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 1px;
  border-radius: 100%;
  background-color: hsla(240, 100%, 50%, 0.39);
  bottom: 5px;
  animation: line .5s infinite linear;
  box-shadow: 0 0 10px 2px rgb(0, 60, 255);
  z-index: 9;
}

@keyframes line {
  0% {
    height: 1px;
    background-color: hsla(240, 100%, 50%, 0.285);
  }

  50% {
    transform: scaleY(5);
    background-color: hsla(0, 59%, 41%, 0.032);
    box-shadow: 0 0 100px 20px rgb(0, 60, 255);
  }

  100% {
    height: 2px;
    background-color: rgb(255, 255, 255)
  }
}

.line-2 {
  animation: line-2 .5s infinite linear;
  bottom: 1px;
  box-shadow: 0 0 10px 2px rgb(0, 60, 255);
}

@keyframes line-2 {
  0% {
    height: 1px;
    background-color: hsl(327, 100%, 50%);
  }

  50% {
    height: 2px;
    background-color: hsl(0, 0%, 85%)
  }

  100% {
    height: 2px;
    background-color: rgb(255, 255, 255)
  }
}

.speak {
  position: absolute;
  width: 330px;
  height: 10px;
  background-color: pink;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 100%;
  animation: speak .8s infinite linear;
}

.speak.one {
  left: calc(50% + 20px);
  animation: speak 6s infinite linear;
  background-color: hsl(284deg 79% 55%);
}

.speak.two {
  left: calc(50% + 10px);
  animation: speak .6s infinite linear;
  background-color: hsl(284deg 79% 55%);
}

.speak.two {
  left: calc(50% + -10px);
  animation: speak .6s infinite linear;
  background-color: rgb(0, 255, 149);
}

@keyframes speak {
  0% {
    transform: translateX(-50%) scale(.10);
  }
}
</style>


================================================
FILE: Buttons/barisdogansutcu_fuzzy-bullfrog-72.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by barisdogansutcu - Tags: button */
button {
 padding: 17px 40px;
 border-radius: 50px;
 border: 0;
 background-color: white;
 box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
 letter-spacing: 1.5px;
 text-transform: uppercase;
 font-size: 15px;
 transition: all .5s ease;
}

button:hover {
 letter-spacing: 3px;
 background-color: hsl(261deg 80% 48%);
 color: hsl(0, 0%, 100%);
 box-shadow: rgb(93 24 220) 0px 7px 29px 0px;
}

button:active {
 letter-spacing: 3px;
 background-color: hsl(261deg 80% 48%);
 color: hsl(0, 0%, 100%);
 box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
 transform: translateY(10px);
 transition: 100ms;
}
</style>


================================================
FILE: Buttons/barisdogansutcu_heavy-dragon-15.html
================================================
<button>
    ok
</button>
<style>
/* From Uiverse.io by barisdogansutcu - Tags: button, active, retro */
button {
  font-family: inherit;
  border: none;
  outline: 1px dotted rgb(37, 37, 37);
  outline-offset: -4px;
  background: hsl(0deg 0% 75%);
  box-shadow: inset -1px -1px #292929, inset 1px 1px #fff, inset -2px -2px rgb(158, 158, 158), inset 2px 2px #ffffff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 5px 30px;
}

button:active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #292929, inset -2px -2px #ffffff, inset 2px 2px rgb(158, 158, 158);
}
</style>


================================================
FILE: Buttons/barisdogansutcu_little-penguin-13.html
================================================
<button class="download-button">
  <div class="docs"><svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="currentColor" height="20" width="20" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line y2="13" x2="8" y1="13" x1="16"></line><line y2="17" x2="8" y1="17" x1="16"></line><polyline points="10 9 9 9 8 9"></polyline></svg> Docs</div>
  <div class="download">
    <svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="currentColor" height="24" width="24" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line y2="3" x2="12" y1="15" x1="12"></line></svg>
  </div>
</button>
<style>
/* From Uiverse.io by barisdogansutcu - Tags: icon, button, download */
.download-button {
 position: relative;
 border-width: 0;
 color: white;
 font-size: 15px;
 font-weight: 600;
 border-radius: 4px;
 z-index: 1;
}

.download-button .docs {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 min-height: 40px;
 padding: 0 10px;
 border-radius: 4px;
 z-index: 1;
 background-color: #242a35;
 border: solid 1px #e8e8e82d;
 transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
}

.download-button:hover {
 box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.download {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 max-width: 90%;
 margin: 0 auto;
 z-index: -1;
 border-radius: 4px;
 transform: translateY(0%);
 background-color: #01e056;
 border: solid 1px #01e0572d;
 transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
}

.download-button:hover .download {
 transform: translateY(100%)
}

.download svg polyline,.download svg line {
 animation: docs 1s infinite;
}

@keyframes docs {
 0% {
  transform: translateY(0%);
 }

 50% {
  transform: translateY(-15%);
 }

 100% {
  transform: translateY(0%);
 }
}
</style>


================================================
FILE: Buttons/barisdogansutcu_loud-mayfly-89.html
================================================
<button alt="tony stark">
  <i>t</i>
  <i>o</i>
  <i>n</i>
  <i>y</i>
  <i>&nbsp;</i>
  <i>s</i>
  <i>t</i>
  <i>a</i>
  <i>r</i>
  <i>k</i>
</button>
<style>
/* From Uiverse.io by barisdogansutcu - Tags: button, hover, active, smooth */
button {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 50px;
 position: relative;
 padding: 0 20px;
 font-size: 18px;
 text-transform: uppercase;
 border: 0;
 box-shadow: hsl(210deg 87% 36%) 0px 7px 0px 0px;
 background-color: hsl(210deg 100% 44%);
 border-radius: 12px;
 overflow: hidden;
 transition: 31ms cubic-bezier(.5, .7, .4, 1);
}

button:before {
 content: attr(alt);
 display: flex;
 align-items: center;
 justify-content: center;
 position: absolute;
 inset: 0;
 font-size: 15px;
 font-weight: bold;
 color: white;
 letter-spacing: 4px;
 opacity: 1;
}

button:active {
 box-shadow: none;
 transform: translateY(7px);
 transition: 35ms cubic-bezier(.5, .7, .4, 1);
}

button:hover:before {
 transition: all .0s;
 transform: translateY(100%);
 opacity: 0;
}

button i {
 color: white;
 font-size: 15px;
 font-weight: bold;
 letter-spacing: 4px;
 font-style: normal;
 transition: all 2s ease;
 transform: translateY(-20px);
 opacity: 0;
}

button:hover i {
 transition: all .2s ease;
 transform: translateY(0px);
 opacity: 1;
}

button:hover i:nth-child(1) {
 transition-delay: 0.045s;
}

button:hover i:nth-child(2) {
 transition-delay: calc(0.045s * 3);
}

button:hover i:nth-child(3) {
 transition-delay: calc(0.045s * 4);
}

button:hover i:nth-child(4) {
 transition-delay: calc(0.045s * 5);
}

button:hover i:nth-child(6) {
 transition-delay: calc(0.045s * 6);
}

button:hover i:nth-child(7) {
 transition-delay: calc(0.045s * 7);
}

button:hover i:nth-child(8) {
 transition-delay: calc(0.045s * 8);
}

button:hover i:nth-child(9) {
 transition-delay: calc(0.045s * 9);
}

button:hover i:nth-child(10) {
 transition-delay: calc(0.045s * 10);
}
</style>


================================================
FILE: Buttons/barisdogansutcu_lovely-walrus-42.html
================================================
<button>
    <svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="#FFFFFF" height="24" width="24" viewBox="0 0 24 24">
        <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
    </svg>
    Edit
</button>
<style>
/* From Uiverse.io by barisdogansutcu - Tags: button */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
  border: solid 3px transparent;
  background-clip: padding-box;
  box-shadow: 0px 0px 0px 3px #ffffff00;
  color: white;
  min-height: 43px;
  padding: 0 13px 0 13px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all .5s ease;
}

button:active {
  transform: scale(.9);
  transition: all 100ms ease;
}

button:hover {
  box-shadow: 0px 0px 0px 3px #30a1b8;
}

button svg {
  width: 16px;
}
</style>


================================================
FILE: Buttons/barisdogansutcu_quiet-mayfly-12.html
================================================
<div class="icons">
  <div class="title">
    <span>O</span>
    <span>N</span>
    <span>L</span>
    <span>Y</span>
    <span>C</span>
    <span>S</span>
    <span>S</span>
  </div>
  <div class="icon-box">
    <button class="activity">
      <span class="line-1"></span>
      <span class="line-2"></span>
      <span class="line-3"></span>
      <span class="line-4"></span>
      <span class="line-5"></span>
    </button>
    <div class="text">Activity</div>
  </div>
  <div class="icon-box">
    <button class="airplay">
      <span class="line-1"></span>
      <span class="line-2"></span>
    </button>
    <div class="text">AirPlay</div>
  </div>
  <div class="icon-box">
    <button class="alert-circle">
      <span class="line-1"></span>
      <span class="line-2"></span>
    </button>
    <div class="text">Alert</div>
  </div>
  <div class="icon-box">
    <button class="alert-octagon">
      <span class="line-1"></span>
      <span class="line-2"></span>
      <span class="line-3"></span>
      <span class="line-4"></span>
      <div class="center">
        <span class="line-5"></span>
        <span class="line-6"></span>
      </div>
    </button>
    <div class="text">Alert</div>
  </div>
  <div class="icon-box">
    <button class="center-text">
      <span class="line-1"></span>
      <span class="line-2"></span>
      <span class="line-3"></span>
      <span class="line-4"></span>
    </button>
    <div class="text">Text Center</div>
  </div>
  <div class="icon-box">
    <button class="justify-text">
      <span class="line-1"></span>
      <span class="line-2"></span>
      <span class="line-3"></span>
      <span class="line-4"></span>
    </button>
    <div class="text">Text Justify</div>
  </div>
  <div class="icon-box">
    <button class="left-text">
      <span class="line-1"></span>
      <span class="line-2"></span>
      <span class="line-3"></span>
      <span class="line-4"></span>
    </button>
    <div class="text">Text Left</div>
  </div>
  <div class="icon-box">
    <button class="right-text">
      <span class="line-1"></span>
      <span class="line-2"></span>
      <span class="line-3"></span>
      <span class="line-4"></span>
    </button>
    <div class="text">Text Right</div>
  </div>
  <div class="icon-box">
    <button class="left-arrow">
      <span class="line-1"></span>
      <span class="line-2"></span>
    </button>
    <div class="text">Left Arrow</div>
  </div>
  <div class="icon-box">
    <button class="right-arrow">
      <span class="line-1"></span>
      <span class="line-2"></span>
    </button>
    <div class="text">Right Arrow</div>
  </div>
  <div class="icon-box">
    <button class="bottom-arrow">
      <span class="line-1"></span>
      <span class="line-2"></span>
    </button>
    <div class="text">Bottom Arrow</div>
  </div>
  <div class="icon-box">
    <button class="top-arrow">
      <span class="line-1"></span>
      <span class="line-2"></span>
    </button>
    <div class="text">Top Arrow</div>
  </div>
  <div class="icon-box">
    <button class="battery-empty">
      <span class="line-1"></span>
      <span class="line-2"></span>
    </button>
    <div class="text">Battery</div>
  </div>
  <div class="icon-box">
    <button class="battery-charge">
      <span class="line-1"></span>
      <span class="line-2"></span>
      <span class="line-3"></span>
      <span class="line-4"></span>
    </button>
    <div class="text">Battery C.</div>
  </div>
  <div class="icon-box">
    <button class="battery">
      <span class="line-1"></span>
      <span class="line-2"></span>
      <span class="line-3"></span>
    </button>
    <div class="text">Battery 50%</div>
  </div>
  <div class="icon-box">
    <button class="battery-full">
      <span class="line-1"></span>
      <span class="line-2"></span>
      <span class="line-3"></span>
    </button>
    <div class="text">Battery Full</div>
  </div>
</div>

<style>
/* From Uiverse.io by barisdogansutcu  - Tags: icon, button, css icon */
.text {
  font-size: 5px;
  position: absolute;
  top: 3px;
  color: #2f363d;
  opacity: 0;
}
.icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-content: center;
  gap: 5px;
}
.title {
  grid-column-start: 1;
  grid-column-end: 5;
  text-align: center;
  font-weight: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title span {
  text-shadow: 1px 1px #ffffff;
}
.icon-box:hover {
  transform: scale(2);
  z-index: 9;
}
.icon-box {
  background-color: #ffffff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 5px;
  transition: all 0.2s ease;
  position: relative;
}
.icon-box:hover .text {
  opacity: 1;
}
.icon-box:hover button {
  margin-top: 5px;
}
button {
  background-color: transparent;
  z-index: 0;
  margin-top: 0px;
}
.activity {
  position: relative;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}
.activity .line-1 {
  display: inline-flex;
  width: 8px;
  height: 2px;
  border-radius: 50px;
  background-color: #2f363d;
}
.activity .line-2 {
  display: inline-flex;
  width: 9px;
  height: 2px;
  border-radius: 50px;
  background-color: #2f363d;
  transform: rotate(-75deg);
  margin-top: -8px;
  margin-left: -4px;
}
.activity .line-3 {
  display: inline-flex;
  width: 16px;
  height: 2px;
  border-radius: 50px;
  background-color: #2f363d;
  transform: rotate(70deg);
  margin-top: -3px;
  margin-left: -9px;
}
.activity .line-4 {
  display: inline-flex;
  width: 8px;
  height: 2px;
  border-radius: 50px;
  background-color: #2f363d;
  transform: rotate(-70deg);
  margin-top: 6px;
  margin-left: -8px;
}
.activity .line-5 {
  display: inline-flex;
  width: 8px;
  height: 2px;
  border-radius: 50px;
  background-color: #2f363d;
  margin-top: 0px;
  margin-left: -3px;
}
/* ----- */
.airplay {
  position: relative;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}
.airplay .line-1 {
  width: 20px;
  height: 14px;
  background-color: white;
  border-radius: 2px;
  box-shadow: 0px 0px 0px 2px #2f363d;
}
.airplay .line-2 {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom: 6px solid #2f363d;
  position: absolute;
  margin-top: 16px;
  background-color: #ffffff;
  border-radius: 100% 100% 0 0;
}
/* ----- */
.alert-circle {
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 100%;
  border: solid 2px #2f363d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
  cursor: pointer;
}
.alert-circle .line-1 {
  width: 2px;
  height: 6px;
  background-color: #2f363d;
  border-radius: 50px;
}
.alert-circle .line-2 {
  width: 2px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 50px;
}
/* ----- */
.alert-triangle {
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 100%;
  border: solid 2px #2f363d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
  cursor: pointer;
}
.alert-triangle .line-1 {
  width: 2px;
  height: 6px;
  background-color: #2f363d;
  border-radius: 50px;
}
.alert-triangle .line-2 {
  width: 2px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 50px;
}
/* ----- */
.alert-octagon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  position: relative;
  cursor: pointer;
}
.alert-octagon .line-1 {
  width: 20px;
  height: 8px;
  background-color: #fff;
  border-left: solid 2px #2f363d;
  border-right: solid 2px #2f363d;
}
.alert-octagon .line-2 {
  width: 8px;
  height: 20px;
  position: absolute;
  transform: rotate(0deg);
  background-color: #fff;
  border-top: solid 2px #2f363d;
  border-bottom: solid 2px #2f363d;
}
.alert-octagon .line-3 {
  width: 8px;
  height: 20px;
  position: absolute;
  transform: rotate(45deg);
  background-color: #fff;
  border-top: solid 2px #2f363d;
  border-bottom: solid 2px #2f363d;
}
.alert-octagon .line-4 {
  width: 8px;
  height: 20px;
  position: absolute;
  transform: rotate(-45deg);
  background-color: #fff;
  border-top: solid 2px #2f363d;
  border-bottom: solid 2px #2f363d;
}
.alert-octagon .center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.alert-octagon .center .line-5 {
  display: flex;
  width: 2px;
  height: 6px;
  background-color: #2f363d;
  border-radius: 50px;
}
.alert-octagon .center .line-6 {
  display: flex;
  width: 2px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 50px;
}
/* ----- */
.center-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  width: 18px;
  height: 24px;
  border: none;
  cursor: pointer;
}
.center-text .line-1 {
  width: 18px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
.center-text .line-2 {
  width: 12px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
.center-text .line-3 {
  width: 18px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
.center-text .line-4 {
  width: 12px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
/* ------ */
.justify-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  width: 18px;
  height: 24px;
  border: none;
  cursor: pointer;
}
.justify-text .line-1 {
  width: 18px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
.justify-text .line-2 {
  width: 18px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
.justify-text .line-3 {
  width: 18px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
.justify-text .line-4 {
  width: 18px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
/* ----- */
.left-text {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  width: 18px;
  height: 24px;
  border: none;
  cursor: pointer;
}
.left-text .line-1 {
  width: 18px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
.left-text .line-2 {
  width: 12px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
.left-text .line-3 {
  width: 18px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
.left-text .line-4 {
  width: 12px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
/* ----- */
.right-text {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  width: 18px;
  height: 24px;
  border: none;
  cursor: pointer;
}
.right-text .line-1 {
  width: 18px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
.right-text .line-2 {
  width: 12px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
.right-text .line-3 {
  width: 18px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
.right-text .line-4 {
  width: 12px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
}
/* ----- */
.left-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 10px;
  height: 10px;
  border: none;
  position: relative;
  transform: rotate(-135deg);
  cursor: pointer;
  margin-left: -2px;
}
.left-arrow .line-1 {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.left-arrow .line-1:before {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #2f363d;
  border-radius: 50px;
  position: absolute;
  left: 0;
  top: 0;
}
.left-arrow .line-1:after {
  content: "";
  width: 2px;
  height: 100%;
  background-color: #2f363d;
  border-radius: 50px;
  position: absolute;
  right: 0;
  top: 0;
}
.left-arrow .line-2 {
  width: 14px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
  position: absolute;
  transform: translate(-27%, -110%) rotate(-45deg);
  left: 0;
  bottom: 0;
}
/* ----- */
.right-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 10px;
  height: 10px;
  border: none;
  position: relative;
  transform: rotate(45deg);
  cursor: pointer;
  margin-left: 2px;
}
.right-arrow .line-1 {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.right-arrow .line-1:before {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #2f363d;
  border-radius: 50px;
  position: absolute;
  left: 0;
  top: 0;
}
.right-arrow .line-1:after {
  content: "";
  width: 2px;
  height: 100%;
  background-color: #2f363d;
  border-radius: 50px;
  position: absolute;
  right: 0;
  top: 0;
}
.right-arrow .line-2 {
  width: 14px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
  position: absolute;
  transform: translate(-27%, -110%) rotate(-45deg);
  left: 0;
  bottom: 0;
}
/* ----- */
.bottom-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 10px;
  height: 10px;
  border: none;
  position: relative;
  transform: rotate(135deg);
  cursor: pointer;
  margin-top: 2px;
}
.bottom-arrow .line-1 {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.bottom-arrow .line-1:before {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #2f363d;
  border-radius: 50px;
  position: absolute;
  left: 0;
  top: 0;
}
.bottom-arrow .line-1:after {
  content: "";
  width: 2px;
  height: 100%;
  background-color: #2f363d;
  border-radius: 50px;
  position: absolute;
  right: 0;
  top: 0;
}
.bottom-arrow .line-2 {
  width: 14px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
  position: absolute;
  transform: translate(-27%, -110%) rotate(-45deg);
  left: 0;
  bottom: 0;
}
/* ----- */
.top-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 10px;
  height: 10px;
  border: none;
  position: relative;
  transform: rotate(-45deg);
  cursor: pointer;
  margin-top: -2px;
}
.top-arrow .line-1 {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.top-arrow .line-1:before {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #2f363d;
  border-radius: 50px;
  position: absolute;
  left: 0;
  top: 0;
}
.top-arrow .line-1:after {
  content: "";
  width: 2px;
  height: 100%;
  background-color: #2f363d;
  border-radius: 50px;
  position: absolute;
  right: 0;
  top: 0;
}
.top-arrow .line-2 {
  width: 14px;
  height: 2px;
  background-color: #2f363d;
  border-radius: 5px;
  position: absolute;
  transform: translate(-27%, -110%) rotate(-45deg);
  left: 0;
  bottom: 0;
}
/* ----- */
.battery-empty {
  position: relative;
  display: flex;
  border: none;
  cursor: pointer;
}
.battery-empty .line-1 {
  box-sizing: border-box;
  width: 20px;
  height: 12px;
  border: 2px solid #2f363d;
  border-radius: 3px;
}
.battery-empty .line-2 {
  position: absolute;
  box-sizing: border-box;
  border-radius: 3px;
  width: 4px;
  height: 6px;
  right: -2px;
  top: 3px;
  background-color: #2f363d;
}
/* ----- */
.battery-charge {
  position: relative;
  display: flex;
  border: none;
  cursor: pointer;
}
.battery-charge .line-1 {
  box-sizing: border-box;
  width: 20px;
  height: 12px;
  border: 2px solid #2f363d;
  border-radius: 3px;
}
.battery-charge .line-2 {
  position: absolute;
  box-sizing: border-box;
  border-radius: 3px;
  width: 4px;
  height: 6px;
  right: -2px;
  top: 3px;
  background-color: #2f363d;
}
.battery-charge .line-3 {
  position: absolute;
  display: flex;
  box-sizing: border-box;
  width: 0;
  height: 0;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 4px solid #2f363d;
  left: 9px;
  top: 2px;
  transform: rotate(30deg);
}
.battery-charge .line-4 {
  position: absolute;
  display: flex;
  box-sizing: border-box;
  width: 0;
  height: 0;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-top: 5px solid #2f363d;
  right: 10px;
  bottom: 2px;
  transform: rotate(30deg);
}
/* ----- */
.battery {
  position: relative;
  display: flex;
  border: none;
  cursor: pointer;
}
.battery .line-1 {
  box-sizing: border-box;
  width: 20px;
  height: 12px;
  border: 2px solid #2f363d;
  border-radius: 3px;
}
.battery .line-2 {
  position: absolute;
  box-sizing: border-box;
  border-radius: 3px;
  width: 4px;
  height: 6px;
  right: -2px;
  top: 3px;
  background-color: #2f363d;
}
.battery .line-3 {
  background-color: #2f363d;
  position: absolute;
  display: flex;
  box-sizing: border-box;
  height: 6px;
  width: 40%;
  border-radius: 1px;
  top: 3px;
  left: 3px;
}
/* ----- */
.battery-full {
  position: relative;
  display: flex;
  border: none;
  cursor: pointer;
}
.battery-full .line-1 {
  box-sizing: border-box;
  width: 20px;
  height: 12px;
  border: 2px solid #2f363d;
  border-radius: 3px;
}
.battery-full .line-2 {
  position: absolute;
  box-sizing: border-box;
  border-radius: 3px;
  width: 4px;
  height: 6px;
  right: -2px;
  top: 3px;
  background-color: #2f363d;
}
.battery-full .line-3 {
  background-color: #2f363d;
  position: absolute;
  display: flex;
  box-sizing: border-box;
  height: 6px;
  width: calc(100% - 6px);
  border-radius: 1px;
  top: 3px;
  left: 3px;
}

</style>
    

================================================
FILE: Buttons/barisdogansutcu_rare-owl-43.html
================================================
<button class="button">
  <div class="icon">
    <span class="text-icon hide">Icon</span>
    <svg
      class="css-i6dzq1"
      stroke-linejoin="round"
      stroke-linecap="round"
      fill="none"
      stroke-width="2"
      stroke="currentColor"
      height="24"
      width="24"
      viewBox="0 0 24 24"
    >
      <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
    </svg>
  </div>
  <span class="title"> Anatomy </span>
  <div class="padding-left hide">
    <div class="padding-left-line">
      <span class="padding-left-text">Left Padding</span>
    </div>
  </div>
  <div class="padding-right hide">
    <div class="padding-right-line">
      <span class="padding-right-text">Right Padding</span>
    </div>
  </div>
  <div class="background hide">
    <span class="background-text">Background</span>
  </div>
  <div class="border hide">
    <span class="border-text">Border Radius</span>
  </div>
</button>

<style>
/* From Uiverse.io by barisdogansutcu  - Tags: button, button anatomy, customize */
.button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  background-image: linear-gradient(#3470fa, #313ed7);
  color: white;
  border: solid 2px #0618db;
  height: 50px;
  padding: 0px 20px;
  border-radius: 5px;
  font-weight: 600;
  transform: scale(0.89);
  position: relative;
}
.button:not(:hover) .hide,
.button:not(:hover) .icon::before,
.button:not(:hover) .icon::after {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.4);
}
.hide {
  transition: all 0.2s ease;
}
.button:active {
  background-image: linear-gradient(#313ed7, #3470fa);
  border-color: #313ed7;
}
.icon {
  position: relative;
}
.icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 0, 170);
  border-radius: 100%;
}
.icon::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(-19%, -60%);
  width: 100px;
  height: 33px;
  background-color: transparent;
  border-radius: 12px 22px 2px 2px;
  border-right: solid 2px rgb(255, 0, 170);
  border-top: solid 2px transparent;
}
.icon .text-icon {
  color: rgb(255, 0, 170);
  position: absolute;
  font-size: 12px;
  left: -37px;
  top: -38px;
}
.icon svg {
  width: 20px;
  height: 20px;
  border: solid 2px transparent;
  display: flex;
}
.button:hover .icon svg {
  border: solid 2px rgba(255, 0, 170, 0.692);
}
.padding-left {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: rgb(255, 0, 170);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.padding-left:before {
  content: "";
  width: 2px;
  height: 10px;
  background-color: rgb(255, 0, 170);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.padding-left:after {
  content: "";
  width: 2px;
  height: 10px;
  background-color: rgb(255, 0, 170);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.padding-left-line {
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: rgb(255, 0, 170);
  left: -24px;
  top: 11px;
  transform: rotate(-50deg);
}
.padding-left-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 0, 170);
  border-radius: 100%;
}
.padding-left-text {
  color: rgb(255, 0, 170);
  font-size: 12px;
  position: absolute;
  white-space: nowrap;
  transform: rotate(50deg);
  bottom: 30px;
  left: -67px;
}

.padding-right {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: rgb(255, 0, 170);
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.padding-right:before {
  content: "";
  width: 2px;
  height: 10px;
  background-color: rgb(255, 0, 170);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.padding-right:after {
  content: "";
  width: 2px;
  height: 10px;
  background-color: rgb(255, 0, 170);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.padding-right-line {
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: rgb(255, 0, 170);
  right: -24px;
  top: 11px;
  transform: rotate(50deg);
}
.padding-right-line::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 0;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 0, 170);
  border-radius: 100%;
}
.padding-right-text {
  color: rgb(255, 0, 170);
  font-size: 12px;
  position: absolute;
  white-space: nowrap;
  transform: rotate(-50deg);
  bottom: 33px;
  left: 18px;
}
.background {
  position: absolute;
}
.background::before {
  content: "";
  position: absolute;
  right: 27px;
  bottom: -70px;
  width: 100px;
  height: 53px;
  background-color: transparent;
  border-radius: 0px 0px 22px 22px;
  border-right: solid 2px rgb(255, 0, 170);
  border-bottom: solid 2px transparent;
}
.background::after {
  content: "";
  position: absolute;
  right: 25px;
  bottom: -20px;
  width: 6px;
  height: 6px;
  background-color: rgb(255, 0, 170);
  border-radius: 100%;
}
.background-text {
  position: absolute;
  color: rgb(255, 0, 170);
  font-size: 12px;
  bottom: -70px;
  left: -115px;
}
.border {
  position: absolute;
  right: 0;
  top: 0;
}
.border:before {
  content: "";
  width: 15px;
  height: 15px;
  border: solid 2px rgb(255, 0, 170);
  position: absolute;
  right: 0%;
  top: 0;
  transform: translate(50%, -50%);
  border-radius: 100%;
}
.border:after {
  content: "";
  width: 2px;
  height: 25px;
  background-color: rgb(255, 0, 170);
  position: absolute;
  right: -10px;
  top: -15px;
  transform: translate(50%, -50%) rotate(60deg);
}
.border .border-text {
  position: absolute;
  color: rgb(255, 0, 170);
  font-size: 12px;
  right: -112px;
  top: -30px;
  white-space: nowrap;
}

</style>
    

================================================
FILE: Buttons/barisdogansutcu_red-goat-98.html
================================================
<div class="button-options">
  <div class="content">
    <input name="boldInput" id="boldInput" hidden="" type="checkbox" />
    <label class="label-layout" for="boldInput">
      <b>B</b>
    </label>

    <input name="italicInput" id="italicInput" hidden="" type="checkbox" />
    <label class="label-layout" for="italicInput">
      <i>i</i>
    </label>

    <input
      name="underlineInput"
      id="underlineInput"
      hidden=""
      type="checkbox"
    />
    <label class="label-layout" for="underlineInput">
      <u>U</u>
    </label>
    <span class="title">L❤VE FRONT-END</span>
  </div>
</div>

<style>
/* From Uiverse.io by barisdogansutcu  - Tags: button, checkbox, input, bold, italic, underline */
.button-options .content {
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 2px #29429b;
  border-radius: 4px;
  position: relative;
}
.button-options .content .label-layout {
  min-width: 45px;
  height: 45px;
  display: flexa;
  align-items: center;
  justify-content: center;
}
.button-options .content .label-layout :is(b, i, u) {
  display: grid;
  place-content: center;
  height: 100%;
  color: #29429b;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.button-options .content .label-layout[for="italicInput"] {
  border-left: solid 2px #29429b;
  border-right: solid 2px #29429b;
  min-width: 49px;
}
.button-options .content input[type="checkbox"]:checked + .label-layout {
  background-color: #29429b34;
}
#boldInput:checked ~ .title {
  font-weight: bold;
}
#italicInput:checked ~ .title {
  font-style: italic;
}
#underlineInput:checked ~ .title {
  text-decoration: underline;
}
.button-options .title {
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  position: absolute;
  bottom: 0;
  top: 2px;
  transform: translateY(100%);
  color: #29429b;
}

</style>
    

================================================
FILE: Buttons/barisdogansutcu_tall-wombat-35.html
================================================
<button class="button">
  <span class="button_text">
    <svg
      class="button_icon"
      height="16"
      width="16"
      viewBox="0 0 1592 1600"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill="#000100"
        d="m0 0c0.718 0.29 1.44 0.579 2.17 0.877 34.5 14.1 66.1 38.6 88.8 68.1 0.432 0.555 0.863 1.11 1.31 1.68 7.19 9.3 13.3 18.9 18.7 29.3 0.401 0.765 0.801 1.53 1.21 2.32 7.61 14.7 13.1 29.9 17.8 45.7 0.272 0.907 0.544 1.81 0.825 2.75 21.6 74.4-12.4 151-36.4 220-2.87 8.33-5.67 16.7-8.45 25-0.241 0.724-0.483 1.45-0.732 2.19-4.44 13.3-8.77 26.7-13.1 40.1-4.11 12.7-8.33 25.3-12.7 37.9-6.48 18.8-12.6 37.6-18.7 56.5-2.91 8.99-5.84 18-8.77 27-1.18 3.62-2.36 7.25-3.54 10.9-0.291 0.894-0.582 1.79-0.882 2.71-1.64 5.05-3.28 10.1-4.92 15.2-8.45 26.1-17.1 52.2-25.8 78.2-6.55 19.6-13.1 39.2-19.4 58.9-4.11 12.7-8.38 25.4-12.7 38-4.68 13.6-9.16 27.2-13.6 40.9-4.15 12.8-8.45 25.6-12.9 38.4-3.98 11.5-7.74 23-11.2 34.7-4.08 13.8-8.63 27.4-13.3 41-0.608 1.76-1.22 3.53-1.82 5.29-0.31 0.899-0.62 1.8-0.939 2.72-4.12 12-8.1 24-12.1 36-0.582 1.75-0.582 1.75-1.18 3.54-1.53 4.6-3.06 9.21-4.59 13.8-2.05 6.18-4.11 12.4-6.18 18.5-6.81 20.4-13.5 40.7-20.2 61.1-6.46 19.7-12.9 39.4-19.5 59-1.97 5.87-3.92 11.7-5.88 17.6-1.23 3.7-2.47 7.41-3.7 11.1-0.563 1.69-1.13 3.38-1.69 5.07-1.45 4.35-2.9 8.7-4.35 13.1-0.212 0.637-0.425 1.27-0.644 1.93-1.12 3.35-2.23 6.7-3.35 10.1-2.09 6.26-4.17 12.5-6.26 18.8-1.14 3.41-2.27 6.81-3.41 10.2-0.22 0.66-0.44 1.32-0.666 2-2.54 7.63-5.09 15.3-7.65 22.9-4.29 12.8-8.53 25.7-12.7 38.6-4.53 14.1-9.21 28.1-14 42-4.35 12.6-8.58 25.3-12.8 38-0.388 1.18-0.388 1.18-0.785 2.39-2.62 7.98-5.23 16-7.84 23.9-4.85 14.8-9.71 29.6-14.8 44.4-0.461 1.35-0.92 2.7-1.38 4.05-7.84 23.1-18.4 44.2-33.4 63.5l-1.95 2.54c-4.76 6.06-9.78 11.8-15 17.5-0.46 0.494-0.919 0.987-1.39 1.5-27.1 28.9-63.5 48.5-102 58.3-1.1 0.282-2.2 0.564-3.34 0.855-15.7 3.84-31 5.89-47.2 5.73-2.53-0.0237-5.06-0.0205-7.59-0.0139-14.8-0.0243-29.4-1.17-43.8-4.38-0.945-0.21-1.89-0.42-2.86-0.636-31.9-7.44-61.5-20.9-87.2-41.3l-2.51-1.89c-13.5-10.5-26.2-23.4-36.5-37.1-0.656-0.851-1.31-1.7-1.99-2.58-18.3-24.4-30.3-53.2-42.9-80.7-3-6.57-6.04-13.1-9.08-19.7-0.523-1.13-1.05-2.26-1.59-3.42-3.66-7.87-7.41-15.7-11.2-23.5-3.98-8.29-7.76-16.7-11.5-25.1-4.92-10.9-9.99-21.7-15.2-32.5-5.6-11.5-11-23-16.2-34.6-3.81-8.45-7.68-16.9-11.7-25.2-4.58-9.44-8.83-19-13.1-28.6-5.89-13.4-12-26.6-18.3-39.8-0.406-0.85-0.812-1.7-1.23-2.57-0.806-1.69-1.61-3.37-2.42-5.06-0.388-0.813-0.777-1.63-1.18-2.46-0.381-0.798-0.763-1.6-1.16-2.42-5.93-12.4-11.6-24.9-17.2-37.5-23.5-61.5-23.5-61.5-58-116-1.01-1.13-1.01-1.13-2.04-2.28-12.1-12.8-29.2-20.3-45.2-27.2-5.21-2.28-10.3-4.74-15.4-7.3-7.43-3.74-14.9-7.32-22.5-10.8-11.6-5.43-23.2-10.9-34.8-16.5-10.4-5.07-20.9-9.99-31.5-14.8-9.43-4.36-18.8-8.87-28.1-13.4-10.3-5.02-20.7-9.89-31.1-14.7-9.01-4.17-18-8.46-26.9-12.8-8.34-4.05-16.7-8-25.2-11.9-10.2-4.67-20.3-9.52-30.4-14.4-12-5.84-24-11.6-36-17.2-1.08-0.505-1.08-0.505-2.17-1.02-3.41-1.6-6.82-3.2-10.2-4.79-20.6-9.65-20.6-9.65-29.9-14.3-18-9.06-36.2-17.8-54.4-26.2-27.2-12.6-52.1-25.7-74.3-46.2l-2.97-2.66c-43.3-38.8-65.6-94.5-68.9-152-1.49-28.4 3.28-57 12.9-83.7 0.228-0.64 0.455-1.28 0.69-1.94 5.47-15.1 12.6-30.2 22.3-43.1 1.16-1.67 2.33-3.34 3.49-5.01 5.4-7.73 11.3-14.9 17.5-22 1.06-1.29 2.13-2.58 3.19-3.88 2.63-3.06 5.57-5.66 8.65-8.27 1.45-1.25 2.87-2.53 4.27-3.84 12.7-12 27.5-21.7 42.9-30l2.14-1.17c18.6-9.99 38.9-16.1 58.9-22.8 1.42-0.481 2.85-0.962 4.27-1.44 8.62-2.91 17.3-5.77 25.9-8.63 12.8-4.24 25.6-8.49 38.4-12.7 0.721-0.24 1.44-0.479 2.18-0.726 19-6.31 37.9-12.7 56.7-19.4 14.9-5.25 29.9-10.2 45-15 11.1-3.57 22.1-7.25 33.1-11.1 12.5-4.34 25.1-8.49 37.8-12.6 16.8-5.4 33.4-11.1 50.1-16.9 17.1-5.96 34.3-11.8 51.6-17.4 14.8-4.8 29.6-9.71 44.4-14.8 10.8-3.73 21.7-7.41 32.6-11 1.2-0.399 2.41-0.798 3.65-1.21 2.46-0.816 4.93-1.63 7.39-2.45 18.3-6.08 36.6-12.3 54.8-18.9 14.4-5.25 28.9-10 43.5-14.7 12.5-4.04 25-8.23 37.5-12.5 9.21-3.18 18.4-6.3 27.7-9.37 13.8-4.58 27.6-9.2 41.4-13.9 0.829-0.28 1.66-0.56 2.51-0.848 5.91-2 11.8-4 17.7-6 6.75-2.28 13.5-4.56 20.2-6.84 0.824-0.279 1.65-0.557 2.5-0.844 12.9-4.36 25.9-8.68 38.8-13 10.8-3.58 21.5-7.21 32.2-10.9 16-5.53 32.2-10.8 48.3-16.1 10.7-3.46 21.4-7 31.9-10.9 11.5-4.18 23-8 34.6-11.8 0.914-0.296 1.83-0.592 2.77-0.896 0.918-0.297 1.84-0.594 2.78-0.9 1.87-0.604 3.73-1.21 5.6-1.81 0.931-0.301 1.86-0.603 2.82-0.913 28.9-9.36 57.7-19.2 86.4-29 4.93-1.69 9.85-3.37 14.8-5.06 1.61-0.549 3.21-1.1 4.82-1.65 0.789-0.27 1.58-0.539 2.39-0.817 9.97-3.41 19.9-6.82 29.9-10.2 18.3-6.28 36.5-12.5 54.9-18.5 4.21-1.39 8.41-2.78 12.6-4.19 43-14.4 43-14.4 62.6-18.2 0.827-0.171 1.65-0.341 2.51-0.517 38.3-7.72 80.6-1.08 116 13.5zm-117 122c-1.54 0.498-3.08 0.995-4.62 1.49-4.72 1.52-9.42 3.08-14.1 4.63-1.03 0.341-1.03 0.341-2.09 0.689-6.14 2.03-12.3 4.07-18.4 6.13-10.2 3.42-20.4 6.78-30.6 10.1-0.668 0.219-1.34 0.437-2.03 0.663-2.76 0.901-5.51 1.8-8.27 2.7-19.8 6.46-39.5 12.9-59.1 19.7-16.5 5.7-33.1 11.2-49.8 16.6-1.33 0.436-2.66 0.871-3.99 1.31-5.59 1.83-11.2 3.66-16.8 5.49-16.7 5.45-33.3 10.9-50 16.4-4.59 1.51-9.19 3.02-13.8 4.52-18.6 6.1-37.2 12.3-55.7 18.9-10.4 3.69-20.8 7.21-31.3 10.5-14.2 4.37-28.3 8.99-42.3 13.8-17.9 6.19-35.9 12.1-53.9 18-18.8 6.14-37.6 12.3-56.2 18.8-12.6 4.34-25.2 8.51-37.9 12.6-15.3 4.95-30.6 10-45.8 15.2-0.99 0.338-1.98 0.677-3 1.03-0.984 0.337-1.97 0.673-2.98 1.02-1.96 0.67-3.92 1.34-5.88 2.01-0.955 0.326-1.91 0.653-2.89 0.989-8.99 3.07-18 6.09-27 9.08-0.727 0.242-1.45 0.483-2.2 0.732-3.61 1.2-7.22 2.4-10.8 3.6-6.5 2.16-13 4.33-19.5 6.5-2.22 0.74-4.44 1.48-6.66 2.22-7.37 2.46-14.7 4.91-22.1 7.38-4.69 1.57-9.38 3.14-14.1 4.7-1.42 0.474-1.42 0.474-2.86 0.957-14.8 4.94-29.6 9.79-44.5 14.6-14.1 4.55-28 9.27-42 14.1-12.7 4.38-25.5 8.61-38.3 12.7-12.1 3.88-24.1 7.94-36.1 12.1-14.8 5.11-29.7 9.97-44.6 14.7-14.4 4.55-28.7 9.2-42.9 14.1-17.9 6.18-35.9 12.1-53.9 18-1.41 0.463-2.83 0.926-4.24 1.39-1.4 0.46-2.81 0.919-4.21 1.38-2.07 0.676-4.13 1.35-6.2 2.03-1.35 0.442-2.7 0.885-4.06 1.33-11.9 3.9-23.8 7.85-35.7 11.8-7.62 2.56-15.3 5.06-22.9 7.5-4.7 1.5-9.39 3.02-14.1 4.53-2.29 0.735-4.59 1.47-6.88 2.19-31.9 10.1-55.6 23.9-71.7 54.2-9.45 19.8-11.3 43-4.44 63.9 4.09 11.2 9.4 20.7 16.8 30.1 0.739 0.971 0.739 0.971 1.49 1.96 12.8 16 33.3 24 51.5 32.3 7.92 3.61 15.8 7.35 23.7 11.1 3.06 1.45 6.12 2.9 9.18 4.34 0.761 0.36 1.52 0.72 2.31 1.09 5.29 2.5 10.6 4.99 15.9 7.47 13.5 6.32 27 12.7 40.3 19.4 8.33 4.2 16.8 8.11 25.3 12 10.4 4.8 20.7 9.81 31 14.8 12.3 6.05 24.7 12 37.2 17.7 8.89 4.09 17.7 8.36 26.5 12.7 10.8 5.29 21.7 10.4 32.7 15.3 14.1 6.31 27.9 13 41.7 19.8 12.1 5.96 24.3 11.8 36.6 17.5 8.76 4.03 17.4 8.2 26.1 12.4 6.74 3.27 13.5 6.51 20.3 9.65 0.624 0.288 1.25 0.576 1.89 0.873 2.96 1.36 5.92 2.72 8.89 4.07 8.89 4.08 8.89 4.08 13.1 6.49 1.15 0.651 2.29 1.3 3.48 1.97 1.03 0.607 2.06 1.21 3.12 1.84 3.26 1.38 4.59 1.42 7.88 0.22 2.56-2.23 2.56-2.23 5-5l2.75-2.72c0.927-0.918 1.85-1.84 2.81-2.78l2.82-2.78c2.62-2.63 2.62-2.63 4.73-5.36 1.74-2.17 3.43-3.79 5.58-5.54 3.04-2.59 5.7-5.29 8.31-8.31 4.02-4.57 8.34-8.69 12.8-12.8 5.42-5.01 10.6-10.1 15.5-15.6 6.31-6.97 13-13.5 19.7-20.2 1.39-1.38 2.77-2.76 4.15-4.14 2.93-2.93 5.87-5.86 8.81-8.79 3.26-3.25 6.52-6.49 9.77-9.74 1.71-1.71 3.42-3.41 5.14-5.12 2.49-2.48 4.97-4.96 7.46-7.44 0.758-0.752 1.52-1.5 2.3-2.28 0.724-0.724 1.45-1.45 2.19-2.19 0.94-0.937 0.94-0.937 1.9-1.89 1.77-1.87 3.43-3.76 5.1-5.72 5.69-6.54 11.9-12.6 18-18.7 1.41-1.42 2.82-2.83 4.24-4.25 3.82-3.83 7.64-7.66 11.5-11.5 2.39-2.4 4.78-4.79 7.17-7.19 7.49-7.51 15-15 22.5-22.5 8.63-8.64 17.3-17.3 25.9-25.9 6.68-6.7 13.4-13.4 20.1-20.1 3.99-3.99 7.98-7.98 12-12 3.75-3.76 7.5-7.52 11.3-11.3 1.37-1.37 2.74-2.74 4.11-4.12 16-16.1 31.7-27.8 55.4-28.4 19.6 0.506 36.3 7.6 49.9 21.8 12.1 14.3 17.1 31.5 15.9 50.1-1.89 16.5-8.21 30.8-20.4 42.1-2.02 1.98-3.85 3.99-5.69 6.13-3.71 4.28-7.64 8.3-11.7 12.3-0.665 0.668-1.33 1.34-2.01 2.03-3.96 3.96-8.03 7.73-12.3 11.4-1.67 1.46-3.28 2.89-4.76 4.55v2h-2c-1.4 1.38-1.4 1.38-2.88 3.25-6.86 8.06-14.5 15.4-22.5 22.3-2.15 1.94-3.85 4.15-5.61 6.45-1.64 1.69-3.31 3.35-5 5-0.599 0.61-1.2 1.22-1.82 1.85-3.15 3.2-6.31 6.31-9.75 9.21-8.2 7.06-16.2 14.9-23.1 23.2-3.3 3.92-7.09 7.26-10.9 10.7-3.55 3.21-6.77 6.54-9.82 10.2-2.08 2.41-4.34 4.61-6.6 6.85l-138 138c0.551 1.1 1.1 2.2 1.67 3.34 0.729 1.46 1.46 2.91 2.19 4.37 0.363 0.724 0.725 1.45 1.1 2.19 2.41 4.83 4.79 9.67 7.09 14.6 0.33 0.7 0.661 1.4 1 2.12 1.05 2.22 2.1 4.45 3.14 6.68 0.749 1.59 1.5 3.18 2.25 4.77 4.39 9.31 8.74 18.6 13.1 28 10.9 23.6 22.1 47.1 33.5 70.5 4.81 9.86 9.49 19.8 14 29.7 3.47 7.65 7.1 15.2 10.8 22.8 5.03 10.4 9.99 20.8 14.9 31.2 0.313 0.669 0.627 1.34 0.949 2.03 3.28 7 6.53 14 9.76 21 0.526 1.14 1.05 2.29 1.59 3.47 0.959 2.09 1.92 4.18 2.87 6.27 2.58 5.64 5.28 11.2 8.07 16.7 3.78 7.51 7.39 15.1 11 22.7 1.74 3.73 3.49 7.45 5.24 11.2 0.516 1.1 0.516 1.1 1.04 2.22 2.77 5.91 5.58 11.8 8.41 17.7 4.42 9.21 8.78 18.4 13.1 27.7 0.683 1.45 1.37 2.9 2.05 4.36 1.04 2.22 2.09 4.44 3.13 6.67 1.06 2.26 2.13 4.53 3.19 6.79 0.352 0.749 0.705 1.5 1.07 2.27 4.6 9.78 9.21 19.6 13.8 29.3 1.4 2.95 2.79 5.9 4.18 8.85 1.68 3.56 3.38 7.12 5.07 10.7 0.625 1.31 1.25 2.63 1.87 3.94 11.2 23.7 28.3 41.5 53 50.8 22.7 7.5 45.3 4.93 66.8-5.21 14.3-7.39 25.4-17.2 34.2-30.7 0.554-0.802 1.11-1.6 1.68-2.43 12.2-19 17.3-43.6 24-64.9 4.58-14.4 9.25-28.8 14-43.1 0.311-0.929 0.622-1.86 0.942-2.82 1.52-4.55 3.05-9.1 4.58-13.7 2.4-7.16 4.79-14.3 7.18-21.5 1.23-3.68 2.45-7.37 3.68-11 0.482-1.45 0.964-2.89 1.45-4.34l15.5-46.5c0.366-1.1 0.732-2.2 1.11-3.33 0.762-2.29 1.52-4.57 2.29-6.86 1.96-5.87 3.91-11.7 5.87-17.6 3.34-10 6.69-20.1 10-30.1 5.01-15 9.98-30 14.9-45 0.35-1.08 0.35-1.08 0.707-2.18 2.26-6.98 4.52-14 6.73-21 5.89-18.5 12-37 18.2-55.4 1.4-4.18 2.79-8.37 4.19-12.6 1.94-5.82 3.88-11.6 5.83-17.5 3.39-10.1 6.77-20.3 10.2-30.4 0.371-1.11 0.371-1.11 0.749-2.25 1.96-5.88 3.92-11.8 5.88-17.6 1.65-4.95 3.3-9.9 4.95-14.9 0.241-0.722 0.481-1.44 0.729-2.19 3.57-10.7 7.14-21.4 10.7-32.1 2.98-8.94 5.97-17.9 8.95-26.8 1.92-5.74 3.83-11.5 5.75-17.2 7.62-22.8 15.2-45.6 22.6-68.5 3.46-10.7 6.99-21.4 10.7-32 4.96-14.3 9.76-28.7 14.4-43.1 6.1-18.9 12.3-37.7 18.6-56.5 0.228-0.682 0.455-1.36 0.69-2.07 1.99-5.96 3.98-11.9 5.97-17.9 2.91-8.71 5.82-17.4 8.72-26.1 0.749-2.25 1.5-4.49 2.25-6.74 1.13-3.4 2.26-6.79 3.4-10.2 3.05-9.15 6.1-18.3 9.15-27.4 1.93-5.8 3.87-11.6 5.8-17.4 0.812-2.44 1.62-4.87 2.44-7.31 0.41-1.23 0.819-2.46 1.24-3.72 46.7-140 46.7-140 47.9-144 0.801-2.4 1.6-4.81 2.4-7.21 1.9-5.71 3.81-11.4 5.71-17.1 2.98-8.93 5.95-17.9 8.92-26.8 1.1-3.3 2.2-6.6 3.3-9.9 0.714-2.14 1.43-4.28 2.14-6.43 2.66-7.97 5.33-15.9 8.01-23.9 1.7-5.06 3.4-10.1 5.1-15.2 0.865-2.58 1.73-5.15 2.6-7.73 1.3-3.83 2.58-7.67 3.87-11.5 0.384-1.13 0.769-2.26 1.16-3.43 8.95-26.8 9.77-52.2-2.93-78.1-11-21.4-29.7-37.5-52.6-45.3-20.8-6.36-40.5-4.07-60.7 2.62z"
        transform="translate(1454,16)"
      ></path>
    </svg>
    Send Message
  </span>
</button>

<style>
/* From Uiverse.io by barisdogansutcu  - Tags: button, message, send */
.button {
  cursor: pointer;
  width: 190px;
  height: 61px;
  font-size: 17px;
  font-weight: 700;
  position: relative;
  display: grid;
  place-content: center;
  box-shadow: inset -8px -8px 8px 0 rgba(174, 174, 192, 0.25),
    inset 8px 8px 8px 0 #fff, -8px -8px 24px 0 #fff,
    2px 10px 20px 0 rgba(121, 121, 131, 0.4);
  border-radius: 12px;
  border: double 2px transparent;
  background-image: linear-gradient(white, white),
    linear-gradient(to top, #7c7d7c, #d9dbd9);
  background-origin: border-box;
  background-clip: content-box, border-box;
  transition: all 0.3s ease;
}

.button_text {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.button:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  border-radius: 50px;
  box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5),
    10px 10px 15px rgba(70, 70, 70, 0),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5),
    inset 10px 10px 15px rgba(70, 70, 70, 0.12);
}
.button:active {
  box-shadow: none;
  transform: translateY(3px);
  background-image: linear-gradient(white, white),
    linear-gradient(to top, #7c7d7c7a, #d9dbd9);
}

</style>
    

================================================
FILE: Buttons/barisdogansutcu_warm-skunk-76.html
================================================
<div class="volume">
  <input type="checkbox" class="volume-input" />
  <div class="volume-icon">
    <svg
      viewBox="0 0 24 24"
      width="24"
      height="24"
      stroke="currentColor"
      stroke-width="2"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="volume-svg"
    >
      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
      <path
        d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"
      ></path>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by barisdogansutcu  - Tags: button, volume, voice, sound */
.volume {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background-color: rgb(205, 191, 247);
  overflow: hidden;
}
.volume-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
  overflow: hidden;
  position: relative;
}
.volume-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 999;
}
.volume-icon:before {
  content: "";
  display: flex;
  width: 0px;
  height: 0px;
  border-radius: 100%;
  transition: all 0.2s ease;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(32, 33, 36);
}
.volume-input:checked + .volume-icon:before {
  width: calc(100% + 4px);
  height: calc(100% + 4px);
}
.volume-svg {
  z-index: 2;
  color: rgb(32, 33, 36);
  height: 30px;
  width: 30px;
}
.volume-input:checked + .volume-icon svg {
  color: rgb(255, 255, 255);
}

</style>
    

================================================
FILE: Buttons/barisdogansutcu_wet-otter-24.html
================================================
<button>
  <div class="default-btn">
    <svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="#FFF" height="20" width="20" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle r="3" cy="12" cx="12"></circle></svg>
    <span>Quick View</span>
  </div>
  <div class="hover-btn">
    <svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="#ffd300" height="20" width="20" viewBox="0 0 24 24"><circle r="1" cy="21" cx="9"></circle><circle r="1" cy="21" cx="20"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
    <span>Shop Now</span>
  </div>
</button>
<style>
/* From Uiverse.io by barisdogansutcu - Tags: button, hover, shop */
button {
 position: relative;
 overflow: hidden;
 outline: none;
 cursor: pointer;
 border-radius: 50px;
 background-color: hsl(255deg 50% 40%);
 border: solid 4px hsl(50deg 100% 50%);
 font-family: inherit;
}

.default-btn,.hover-btn {
 background-color: hsl(255deg 50% 40%);
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 align-items: center;
 gap: 15px;
 padding: 15px 20px;
 border-radius: 50px;
 font-size: 17px;
 font-weight: 500;
 text-transform: uppercase;
 transition: all .3s ease;
}

.hover-btn {
 position: absolute;
 inset: 0;
 background-color: hsl(255deg 50% 49%);
 transform: translate(0%,100%);
}

.default-btn span {
 color: hsl(0, 0%, 100%);
}

.hover-btn span {
 color: hsl(50deg 100% 50%);
}

button:hover .default-btn {
 transform: translate(0%,-100%);
}

button:hover .hover-btn {
 transform: translate(0%,0%);
}
</style>


================================================
FILE: Buttons/barisdogansutcu_yellow-husky-22.html
================================================
<div class="plane-button">
    <input type="checkbox" name="checkbox" id="checkbox">
    <button>
        <div class="plane">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path fill="none" d="M0 0h24v24H0V0z"></path>
                <path style="fill: #091607;stroke-width: 1px;stroke: hsl(0deg 0% 100%);" d="M21 14.58c0-.36-.19-.69-.49-.89L13 9V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-7.51 4.69c-.3.19-.49.53-.49.89 0 .7.68 1.21 1.36 1L10 13.5V19l-1.8 1.35c-.13.09-.2.24-.2.4v.59c0 .33.32.57.64.48L11.5 21l2.86.82c.32.09.64-.15.64-.48v-.59c0-.16-.07-.31-.2-.4L13 19v-5.5l6.64 2.08c.68.21 1.36-.3 1.36-1z"></path>
            </svg>
        </div>
        <span class="loading"> <i></i> <i></i> <i></i></span>
        <span class="title">Buy a ticket</span>
        <span class="approved">Approved</span>
    </button>
</div>
<style>
/* From Uiverse.io by barisdogansutcu - Tags: button */
button {
  width: 180px;
  height: 55px;
  border-radius: 50px;
  border: solid 4px rgba(255, 255, 255, 0);
  background-clip: padding-box;
  box-shadow: 0 4px 20px -2px rgba(39, 94, 254, 0.5);
  background-color: hsl(241deg 44% 49%);
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: 100;
  position: relative;
  cursor: pointer;
  color: white;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  z-index: 0;
}

.loading i {
  width: 5px;
  height: 5px;
  background-color: white;
  display: inline-flex;
  border-radius: 100%;
  animation-name: loading5234;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

@keyframes loading5234 {
  100% {
    opacity: 0;
  }
}

input:checked + button {
  transition-delay: 4s;
  background-color: #31cb20;
  box-shadow: 0 4px 20px -2px rgb(49 203 32);
}

.title, .approved {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  display: block;
  font-size: 15px;
}

button .title {
  background-color: hsl(241deg 44% 49%);
  width: 90%;
}

input:checked + button .approved {
  transition-delay: 4s;
  visibility: visible;
  opacity: 1;
  background-color: #31cb20;
  width: 90%;
}

input:checked + button .title {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease;
}

input:not(:checked) + button .approved {
  visibility: hidden;
  opacity: 1;
}

input {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 999;
  outline: none;
  width: 210px;
  height: 60px;
  border-radius: 50px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.plane {
  width: 55px;
  height: 55px;
  border-radius: 100%;
  position: absolute;
  left: 0;
  z-index: 9;
  top: 0;
  transition: none;
  background-color: transparent;
  opacity: 0;
}

.plane svg {
  width: 45px;
  height: 45px;
  position: absolute;
  left: 0px;
  top: 0px;
  transform: rotate(90deg) translate(-50%,-40%) scale(1);
  transition: all 0s ease;
  fill: #3c4a57;
}

input:checked + button .plane {
  animation: airplane-route 4s forwards;
  animation-timing-function: cubic-bezier(0, 0, 0, 0);
}

@keyframes airplane-route {
  0% {
    left: -300px;
    opacity: 1;
    transform: scale(2);
  }

  20% {
    left: 0px;
    transform: scale(1);
    opacity: 1;
  }

  40% {
    left: 100%;
    opacity: 1;
    transform: translateX(-100%);
  }

  60% {
    left: 100%;
    opacity: 1;
    transform: translateX(-100%) translateY(-6%) rotate(180deg);
  }

  80% {
    left: 0%;
    opacity: 1;
    top: -6px;
    transform: translateX(0%) rotate(180deg);
  }

  100% {
    left: 0%;
    opacity: 1;
    transform: translateX(0%) rotate(360deg);
  }
}

</style>


================================================
FILE: Buttons/benjimich_lovely-octopus-40.html
================================================
<div class="container">
  <button class="button">Button</button>
  <span class="arrow first">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"></path>
    </svg>
  </span>
  <span class="arrow second">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"></path>
    </svg>
  </span>
  <span class="arrow third">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"></path>
    </svg>
  </span>
</div>
<style>
/* From Uiverse.io by benjimich - Tags: icon, button, arrow */
.container {
  display: flex;
  position: relative;
}

.button {
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 8px;
  padding: .5em 1.5em;
  font-size: 20px;
  font-weight: 600;
  color: #7f5af0;
  transition: all .3s ease;
}

.arrow {
  fill: #94a1b2;
  position: absolute;
  pointer-events: none;
  width: 24px;
  right: 0;
  top: 25%;
  transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.button:hover {
  letter-spacing: 2px;
}

.button:hover ~.second {
  opacity: .66;
  right: -20px;
  transition-delay: 50ms;
}

.button:hover ~.third {
  opacity: .33;
  right: -40px;
  transition-delay: 100ms;
}

.second, 
.third {
  opacity: 0;
}
</style>


================================================
FILE: Buttons/benjimich_wonderful-penguin-4.html
================================================
<button class="button">
  <div class="line one">
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>

  </div>
  <div class="line two">
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>

  </div>
  <div class="line three">
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>

  </div>
    <div class="line four">
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>

  </div>
    
    <div class="line five">
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>

  </div>
    
    <div class="line six">
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>

  </div>
    
    <div class="line seven">
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>

  </div>
</button>
<style>
/* From Uiverse.io by benjimich - Tags: button, hover */
.button {
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  width: 70px;
  gap: 4px;
}

.button:hover {
  animation: move 2s infinite ease;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(20px);
  }

  100% {
    transform: translateX(0);
  }
}

.round {
  width: 6px;
  height: 6px;
  background: #3da9fc;
  border-radius: 50%;
}

.line {
  display: flex;
  gap: 4px;
}

.two {
  transform: translateX(10px);
}

.three {
  transform: translateX(20px);
}

.four {
  transform: translateX(30px);
}

.five {
  transform: translateX(20px);
}

.six {
  transform: translateX(10px);
}
</style>


================================================
FILE: Buttons/benjimich_young-pug-75.html
================================================
<div class="wrapper">
  <div class="container">
    <button class="button">
      <svg
        class="imgSvg"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
      >
        <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
        <g
          stroke-linejoin="round"
          stroke-linecap="round"
          id="SVGRepo_tracerCarrier"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <path
            fill="#000"
            d="M20.33 3.66996C20.1408 3.48213 19.9035 3.35008 19.6442 3.28833C19.3849 3.22659 19.1135 3.23753 18.86 3.31996L4.23 8.19996C3.95867 8.28593 3.71891 8.45039 3.54099 8.67255C3.36307 8.89471 3.25498 9.16462 3.23037 9.44818C3.20576 9.73174 3.26573 10.0162 3.40271 10.2657C3.5397 10.5152 3.74754 10.7185 4 10.85L10.07 13.85L13.07 19.94C13.1906 20.1783 13.3751 20.3785 13.6029 20.518C13.8307 20.6575 14.0929 20.7309 14.36 20.73H14.46C14.7461 20.7089 15.0192 20.6023 15.2439 20.4239C15.4686 20.2456 15.6345 20.0038 15.72 19.73L20.67 5.13996C20.7584 4.88789 20.7734 4.6159 20.7132 4.35565C20.653 4.09541 20.5201 3.85762 20.33 3.66996ZM4.85 9.57996L17.62 5.31996L10.53 12.41L4.85 9.57996ZM14.43 19.15L11.59 13.47L18.68 6.37996L14.43 19.15Z"
          ></path>
        </g>
      </svg>

      <span>Send Message</span>
    </button>
  </div>
</div>

<style>
/* From Uiverse.io by benjimich  - Tags: skeuomorphism, animation, email, 3d, action, button, realistic, svg */
.wrapper {
  background-color: #fff;
  padding: 0.5px;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wrapper:hover {
  scale: 1.05;
}
.wrapper:active {
  scale: 1;
}
.container {
  cursor: pointer;
  background-color: #fff;
  padding: 5px;
  border-radius: inherit;
  border: 2px rgb(158, 158, 158) solid;
  box-shadow: inset 0px -12px 20px -3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
.container:hover {
  box-shadow: 0px 10px 25px -3px rgba(0, 0, 0, 0.1),
    inset 0px -12px 20px -3px rgba(0, 0, 0, 0.1);
}
.button {
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: inherit;
  font-size: 20px;
  font-weight: 700;
  background-color: #fff;
  border-radius: 50px;
  border: none;
  padding: 14px;
  box-shadow: inset 0px 12px 20px -3px rgba(0, 0, 0, 0.1);
}

.imgSvg {
  width: 24px;
  margin-right: 14px;
}
.wrapper:hover .imgSvg {
  transform: rotate(405deg);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.125);
}

</style>
    

================================================
FILE: Buttons/bhaveshxrawat_neat-robin-34.html
================================================
<button id="br__btn">
  <i id="br__gradient"></i>
  <i class="star" style="--order: 1;"></i>
  <i class="star" style="--order: 2;"></i>
  <i class="star" style="--order: 3;"></i>
  <i class="star" style="--order: 4;"></i>
  <i class="star" style="--order: 5;"></i>
  <i class="star" style="--order: 6;"></i>
  <i class="star" style="--order: 7;"></i>
  <i class="star" style="--order: 8;"></i>
  <i class="star" style="--order: 9;"></i>
  <span class="txt">Explore</span>
</button>
<style>
/* From Uiverse.io by bhaveshxrawat - Tags: button */
#br__btn {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.188rem;
  padding: .625em 1.25em;
  position: relative;
  overflow: hidden;
  border-radius: .75em;
  border: 0;
  color: #fff;
  --degPrimary: 100.98deg;
}

#br__gradient {
  position: absolute;
  background: conic-gradient(from var(--degPrimary) at 50% 50%, #0E6CB9 -14.31deg, rgba(251, 251, 251, 0.5) 4.98deg, #1F1F1F 90.36deg, #FFFFFF 97.67deg, #151250 288.5deg, #401C73 315.27deg, #0E6CB9 345.69deg, rgba(251, 251, 251, 0.5) 364.98deg);
  aspect-ratio: 1 / 1;
  width: 220%;
  bottom: -320%;
  left: -110%;
  border-radius: 50%;
  z-index: 0;
  user-select: none;
  transition: transform 0.5s ease-in;
}

#br__btn:hover i {
  transform: rotate(-105deg);
}

#br__btn:hover span {
  transform: scale(0.62);
  transition: 3s ease-in-out;
}

.star {
  width: 1px;
  height: 1px;
  background-color: white;
  display: inline-block;
  position: absolute;
  top: 0;
  visibility: hidden;
}

.star:not(:hover) {
  transition-duration: 0s;
}

.star:nth-child(2) {
  right: 25%;
}

.star:nth-child(3) {
  right: 60%;
}

.star:nth-child(4) {
  right: 11%;
}

.star:nth-child(5) {
  right: 22%;
}

.star:nth-child(6) {
  right: 42%;
}

.star:nth-child(7) {
  right: 62%;
}

.star:nth-child(8) {
  right: 12%;
}

.star:nth-child(9) {
  right: 82%;
}

#br__btn:hover .star {
  visibility: visible;
  top: calc(5px * var(--order)/2);
  transition: top 1s ease-in 2s, 2s visibility ease-in 2s;
}

#br__btn:not(:hover) .txt {
  transition-delay: 0.3s;
  transition-duration: 0.5s;
}

.txt {
  position: relative;
  display: block;
}
</style>


================================================
FILE: Buttons/bhaveshxrawat_red-stingray-60.html
================================================
<button> Grab it!
</button>
<style>
/* From Uiverse.io by bhaveshxrawat - Tags: button */
button {
 background-color: #fff;
 border-radius: 24px;
 border-style: none;
 box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
 box-sizing: border-box;
 color: #3c4043;
 font-size: 14px;
 font-weight: 500;
 font-family: inherit;
 letter-spacing: .25px;
 line-height: normal;
 padding: 11px 24px;
 transition: background box-shadow 280ms ease;
}

button:hover {
 background: #F6F9FE;
 color: #174ea6;
}

button:active {
 box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
 outline: none;
 border: 2px solid #4285f4;
}

</style>


================================================
FILE: Buttons/bhaveshxrawat_spotty-snail-58.html
================================================
<button><span> Grab it!</span>
</button>
<style>
/* From Uiverse.io by bhaveshxrawat - Tags: button */
button {
 border: none;
 padding: 0.7em 2em;
 font-size: 18px;
 font-family: inherit;
 background-blend-mode: multiply;
 color: rgb(235, 234, 234);
 border-radius: 9px;
 background: linear-gradient(225deg, #181818, #2e2e2e);
 box-shadow: -5px 5px 10px #191919,
             5px -5px 10px #292929;
}

button:hover {
 background: #212121;
 transition: background 1s ease;
 box-shadow: -5px 5px 10px #191919,
             5px -5px 10px #292929;
}

button:active {
 transition: box-shadow .1s ease;
 border-radius: 9px;
 background: #212121;
 box-shadow: inset -5px 5px 10px #191919,
              inset 5px -5px 10px #292929;
}

span {
 opacity: 0.5;
 transition: opacity 0.2s ease;
}

button:hover span {
 opacity: 0.7;
}
</style>


================================================
FILE: Buttons/biswacpcode_curvy-crab-71.html
================================================
<button>
  HOVER ME
</button>
<style>
/* From Uiverse.io by biswacpcode - Tags: button */
button {
  color: white;
  text-decoration: none;
  font-size: 25px;
  border: none;
  background: none;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

button::before {
  margin-left: auto;
}

button::after, button::before {
  content: '';
  width: 0%;
  height: 2px;
  background: #f44336;
  display: block;
  transition: 0.5s;
}

button:hover::after, button:hover::before {
  width: 100%;
}
</style>


================================================
FILE: Buttons/bociKond_happy-bear-29.html
================================================
<!-- From Uiverse.io by bociKond - Tags: button, focus, transition, color -->
<button class="border-green-100 hover:border-green-200 text-green-900 rounded-lg border-4 cursor-pointer px-8 py-3 font-bold -skew-x-12 bg-gradient-to-bl from-green-400 to-green-300 opacity-80 hover:opacity-100 focus:opacity-100 focus:scale-105 transition-all duration-300 font-sans">
      Button
    </button>



================================================
FILE: Buttons/bociKond_itchy-grasshopper-27.html
================================================
<button class="button">
      <span class="top">
        <p>Explore More</p>
        <p class="before">&nbsp;</p>
      </span>
      <span class="bottom"> &nbsp; </span>
    </button>
<style>
/* From Uiverse.io by bociKond - Source: https://www.leagueoflegends.com/en-gb/ I designed the button from the client application which button is for the Soul Fighter event - Tags: button, transition, transform */
.button {
  --white: #e8e8e8;
  --border-clr: #fff;
  --button-bg-clr: #151515;
  display: grid;
  grid-template-rows: 80% 20%;
  background-color: var(--button-bg-clr);
  border-width: 10px 3px 3px 3px;
  border-color: var(--border-clr);
  border-style: solid;
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 1.5rem;
  cursor: pointer;
  transition: 350ms ease-in-out;
}

button:hover {
  --border-clr: #f55c1b;
  transform: translate(-7px, -7px);
}

button:hover .top::before {
  filter: saturate(1);
  opacity: 1;
}

button:hover .top::after {
  opacity: 0;
}

.top {
  color: var(--white);
  /* background-color: white; */
  margin: 0.75rem 0.5rem;
  padding: 0.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  z-index: 1;
}

.top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f55c1b;
  background: linear-gradient(0deg, #f55c1b 0%, #ffffff 100%);
  filter: saturate(0);
  z-index: -2;
  transition: 350ms ease-in-out;
  opacity: 0;
}

.top .before {
  position: absolute;
  inset: 2px;
  z-index: -1;
  background-color: var(--button-bg-clr);
}

.top::after {
  content: "";
  position: absolute;
  inset: 0px;
  background: var(--button-bg-clr);
  filter: saturate(0);
  z-index: -1;
  transition: 350ms ease-in-out;
  border: 2px solid var(--white);
  transition: 350ms ease-in-out;
}

.bottom {
  background: repeating-conic-gradient(
    from 45deg,
    #616161 0% 25%,
    #3f3f3f 0% 50%
  );
  background-size: 16px 16px;
  background-color: #3f3f3f;
  background-position: center;
  width: 100%;
  height: 100%;
}
</style>


================================================
FILE: Buttons/bociKond_tidy-panda-85.html
================================================
<button class="button">
  <span class="button-text">Button</span>
  <span class="tooltip">Tooltip</span>
</button>
<style>
/* From Uiverse.io by bociKond - Tags: tooltip, button, hover, click, transition, hover effect, transparent, dashed */
.button {
  --clr: #DA5552;
  --clr-white: #e3e3e3;
  padding: .75rem 3rem;
  border: 4px dashed var(--clr);
  background-color: transparent;
  color: var(--clr);
  font-weight: bold;
  position: relative;
  transition: 200ms;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  top: calc(-100% - .75rem);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--clr);
  color: var(--clr-white);
  padding: .5rem 2rem;
  cursor: auto;
  display: none;
  animation: showTooltip 300ms ease-in-out;
  transform-origin: bottom;
}

.tooltip::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 8px 0 8px;
  border-color: var(--clr) transparent transparent transparent;
  bottom: -9px;
  left: 50%;
  transform: translate(-50%);
}

.button:hover {
  background-color: var(--clr);
  color: var(--clr-white);
  border-color: transparent;
}

.button:hover .tooltip {
  display: block;
}

@keyframes showTooltip {
  0% {
    opacity: 0;
    transform: scaleY(0) translateX(-50%);
  }

  100% {
    opacity: 1;
    transform: scaleY(1) translateX(-50%);
  }
}
</style>


================================================
FILE: Buttons/boryanakrasteva_ancient-mule-42.html
================================================
<button class="mouse">
  <div class="scroll"></div>

</button>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: button */
.mouse {
  width: 25px;
  height: 40px;
  border: 1px solid rgb(196, 196, 196);
  background-color: transparent;
  border-radius: 13px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.scroll {
  width: 3px;
  height: 10px;
  background-color: rgb(196, 196, 196);
  border-radius: 2px;
  position: absolute;
  bottom: 9px;
  animation: move_918 1.5s linear infinite;
}

@keyframes move_918 {
  0% {
    bottom: 9px;
  }

  50% {
    bottom: 5px;
  }

  100% {
    bottom: 9px;
  }
}
</style>


================================================
FILE: Buttons/boryanakrasteva_massive-jellyfish-28.html
================================================
<div class="btn-wrapper">
  <button class="btn"> button </button>
</div>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: button */
.btn-wrapper {
  width: 120px;
  height: 50px;
  position: relative;
  z-index: 1;
  background: linear-gradient(270deg, #96f061, #a259d3, #1d9de0, #e790b0);
  box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.363);
  background-size: 800% 800%;
  animation: animateBorder 9s ease infinite;
}

.btn {
  width: 95%;
  height: 90%;
  position: absolute;
  padding: 5px;
  border: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #212121;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 4.5px;
  color: white;
  font-weight: bold;
}

@keyframes animateBorder {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}
</style>


================================================
FILE: Buttons/boryanakrasteva_shy-treefrog-100.html
================================================
<button class="btn">
  <svg viewBox="0 0 17.503 15.625" height="20.625" width="20.503" xmlns="http://www.w3.org/2000/svg" class="icon">
    <path transform="translate(0 0)" d="M8.752,15.625h0L1.383,8.162a4.824,4.824,0,0,1,0-6.762,4.679,4.679,0,0,1,6.674,0l.694.7.694-.7a4.678,4.678,0,0,1,6.675,0,4.825,4.825,0,0,1,0,6.762L8.752,15.624ZM4.72,1.25A3.442,3.442,0,0,0,2.277,2.275a3.562,3.562,0,0,0,0,5l6.475,6.556,6.475-6.556a3.563,3.563,0,0,0,0-5A3.443,3.443,0,0,0,12.786,1.25h-.01a3.415,3.415,0,0,0-2.443,1.038L8.752,3.9,7.164,2.275A3.442,3.442,0,0,0,4.72,1.25Z" id="Fill"></path>
  </svg>
</button>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: button, like */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: none;
  background-color: transparent;
  position: relative;
}

.btn::after {
  content: 'like';
  width: fit-content;
  height: fit-content;
  position: absolute;
  font-size: 15px;
  color: white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: .2s linear;
  top: 115%;
}

.icon {
  width: 30px;
  height: 30px;
  transition: .2s linear;
}

.icon path {
  fill: white;
  transition: .2s linear;
}

.btn:hover > .icon {
  transform: scale(1.2);
}

.btn:hover > .icon path {
  fill: rgb(177, 139, 189);
}

.btn:hover::after {
  visibility: visible;
  opacity: 1;
  top: 105%;
}


</style>


================================================
FILE: Buttons/boryanakrasteva_sour-cow-47.html
================================================
<button class="btn">
  <p class="paragraph"> delete </p>
  <span class="icon-wrapper">
    <svg class="icon" width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6 7V18C6 19.1046 6.89543 20 8 20H16C17.1046 20 18 19.1046 18 18V7M6 7H5M6 7H8M18 7H19M18 7H16M10 11V16M14 11V16M8 7V5C8 3.89543 8.89543 3 10 3H14C15.1046 3 16 3.89543 16 5V7M8 7H16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </span>
</button>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: button, delete */
.btn {
  cursor: pointer;
  width: 50px;
  height: 50px;
  border: none;
  position: relative;
  border-radius: 10px;
  -webkit-box-shadow: 1px 1px 5px .2px #00000035;
  box-shadow: 1px 1px 5px .2px #00000035;
  -webkit-transition: .2s linear;
  transition: .2s linear;
  transition-delay: .2s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: space-between;
}

.btn:hover {
  width: 150px;
  transition-delay: .2s;
}

.btn:hover > .paragraph {
  visibility: visible;
  opacity: 1;
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}

.btn:hover > .icon-wrapper .icon {
  transform: scale(1.1);
}

.bnt:hover > .icon-wrapper .icon path {
  stroke: black;
}

.paragraph {
  color: black;
  visibility: hidden;
  opacity: 0;
  font-size: 18px;
  margin-right: 20px;
  padding-left: 20px;
  -webkit-transition: .2s linear;
  transition: .2s linear;
  font-weight: bold;
  text-transform: uppercase;
}

.icon-wrapper {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  transform: scale(.9);
  transition: .2s linear;
}

.icon path {
  stroke: #000;
  stroke-width: 2px;
  -webkit-transition: .2s linear;
  transition: .2s linear;
}
</style>


================================================
FILE: Buttons/boryanakrasteva_splendid-goose-38.html
================================================
<button class="btn">
  See more 
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="15px" width="15px" class="icon">
<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5" stroke="#292D32" d="M8.91016 19.9201L15.4302 13.4001C16.2002 12.6301 16.2002 11.3701 15.4302 10.6001L8.91016 4.08008"></path>
</svg>
</button>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: button */
.btn {
  width: 140px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  position: relative;
  background-color: transparent;
  transition: .2s cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0.6;
}

.btn::after {
  content: '';
  border-bottom: 3px double rgb(214, 207, 113);
  width: 0;
  height: 100%;
  position: absolute;
  margin-top: -5px;
  top: 0;
  left: 5px;
  visibility: hidden;
  opacity: 1;
  transition: .2s linear;
}

.btn .icon {
  transform: translateX(0%);
  transition: .2s linear;
  animation: attention 1.2s linear infinite;
}

.btn:hover::after {
  visibility: visible;
  opacity: 0.7;
  width: 90%;
}

.btn:hover {
  letter-spacing: 2px;
  opacity: 1;
}

.btn:hover > .icon {
  transform: translateX(30%);
  animation: none;
}

@keyframes attention {
  0% {
    transform: translateX(0%);
  }

  50% {
    transform: translateX(30%);
  }
}

</style>


================================================
FILE: Buttons/boryanakrasteva_spotty-bulldog-3.html
================================================
<button class="btn">
  <span> click me </span>
  <span class="icon"> <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M15.2141 7.39294L8.68387 10.6581M8.68387 10.6581C8.19134 9.67492 7.17449 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15C7.17449 15 8.19134 14.3251 8.68387 13.3419M8.68387 10.6581C8.88616 11.0619 9 11.5176 9 12C9 12.4824 8.88616 12.9381 8.68387 13.3419M15.2141 16.6071L8.68387 13.3419M21 6C21 7.65685 19.6569 9 18 9C16.3431 9 15 7.65685 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6ZM21 18C21 19.6569 19.6569 21 18 21C16.3431 21 15 19.6569 15 18C15 16.3431 16.3431 15 18 15C19.6569 15 21 16.3431 21 18Z" stroke="#000000" stroke-width="2" stroke-linecap="round"></path>
  </svg> </span>

  <ul class="socials">
    <li>
      <svg width="20px" height="20px" viewBox="0 -4 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Color-" transform="translate(-300.000000, -164.000000)" fill="#00AAEC">
                <path d="M348,168.735283 C346.236309,169.538462 344.337383,170.081618 342.345483,170.324305 C344.379644,169.076201 345.940482,167.097147 346.675823,164.739617 C344.771263,165.895269 342.666667,166.736006 340.418384,167.18671 C338.626519,165.224991 336.065504,164 333.231203,164 C327.796443,164 323.387216,168.521488 323.387216,174.097508 C323.387216,174.88913 323.471738,175.657638 323.640782,176.397255 C315.456242,175.975442 308.201444,171.959552 303.341433,165.843265 C302.493397,167.339834 302.008804,169.076201 302.008804,170.925244 C302.008804,174.426869 303.747139,177.518238 306.389857,179.329722 C304.778306,179.280607 303.256911,178.821235 301.9271,178.070061 L301.9271,178.194294 C301.9271,183.08848 305.322064,187.17082 309.8299,188.095341 C309.004402,188.33225 308.133826,188.450704 307.235077,188.450704 C306.601162,188.450704 305.981335,188.390033 305.381229,188.271578 C306.634971,192.28169 310.269414,195.2026 314.580032,195.280607 C311.210424,197.99061 306.961789,199.605634 302.349709,199.605634 C301.555203,199.605634 300.769149,199.559408 300,199.466956 C304.358514,202.327194 309.53689,204 315.095615,204 C333.211481,204 343.114633,188.615385 343.114633,175.270495 C343.114633,174.831347 343.106181,174.392199 343.089276,173.961719 C345.013559,172.537378 346.684275,170.760563 348,168.735283" id="Twitter">
                </path>
            </g>
        </g>
    </svg>
    </li>

    <li>
      <svg width="20px" height="20px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="2" y="2" width="28" height="28" rx="6" fill="url(#paint0_radial_87_7153)"></rect>
        <rect x="2" y="2" width="28" height="28" rx="6" fill="url(#paint1_radial_87_7153)"></rect>
        <rect x="2" y="2" width="28" height="28" rx="6" fill="url(#paint2_radial_87_7153)"></rect>
        <path d="M23 10.5C23 11.3284 22.3284 12 21.5 12C20.6716 12 20 11.3284 20 10.5C20 9.67157 20.6716 9 21.5 9C22.3284 9 23 9.67157 23 10.5Z" fill="white"></path>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M16 21C18.7614 21 21 18.7614 21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21ZM16 19C17.6569 19 19 17.6569 19 16C19 14.3431 17.6569 13 16 13C14.3431 13 13 14.3431 13 16C13 17.6569 14.3431 19 16 19Z" fill="white"></path>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M6 15.6C6 12.2397 6 10.5595 6.65396 9.27606C7.2292 8.14708 8.14708 7.2292 9.27606 6.65396C10.5595 6 12.2397 6 15.6 6H16.4C19.7603 6 21.4405 6 22.7239 6.65396C23.8529 7.2292 24.7708 8.14708 25.346 9.27606C26 10.5595 26 12.2397 26 15.6V16.4C26 19.7603 26 21.4405 25.346 22.7239C24.7708 23.8529 23.8529 24.7708 22.7239 25.346C21.4405 26 19.7603 26 16.4 26H15.6C12.2397 26 10.5595 26 9.27606 25.346C8.14708 24.7708 7.2292 23.8529 6.65396 22.7239C6 21.4405 6 19.7603 6 16.4V15.6ZM15.6 8H16.4C18.1132 8 19.2777 8.00156 20.1779 8.0751C21.0548 8.14674 21.5032 8.27659 21.816 8.43597C22.5686 8.81947 23.1805 9.43139 23.564 10.184C23.7234 10.4968 23.8533 10.9452 23.9249 11.8221C23.9984 12.7223 24 13.8868 24 15.6V16.4C24 18.1132 23.9984 19.2777 23.9249 20.1779C23.8533 21.0548 23.7234 21.5032 23.564 21.816C23.1805 22.5686 22.5686 23.1805 21.816 23.564C21.5032 23.7234 21.0548 23.8533 20.1779 23.9249C19.2777 23.9984 18.1132 24 16.4 24H15.6C13.8868 24 12.7223 23.9984 11.8221 23.9249C10.9452 23.8533 10.4968 23.7234 10.184 23.564C9.43139 23.1805 8.81947 22.5686 8.43597 21.816C8.27659 21.5032 8.14674 21.0548 8.0751 20.1779C8.00156 19.2777 8 18.1132 8 16.4V15.6C8 13.8868 8.00156 12.7223 8.0751 11.8221C8.14674 10.9452 8.27659 10.4968 8.43597 10.184C8.81947 9.43139 9.43139 8.81947 10.184 8.43597C10.4968 8.27659 10.9452 8.14674 11.8221 8.0751C12.7223 8.00156 13.8868 8 15.6 8Z" fill="white"></path>
        <defs>
        <radialGradient id="paint0_radial_87_7153" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12 23) rotate(-55.3758) scale(25.5196)">
        <stop stop-color="#B13589"></stop>
        <stop offset="0.79309" stop-color="#C62F94"></stop>
        <stop offset="1" stop-color="#8A3AC8"></stop>
        </radialGradient>
        <radialGradient id="paint1_radial_87_7153" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11 31) rotate(-65.1363) scale(22.5942)">
        <stop stop-color="#E0E8B7"></stop>
        <stop offset="0.444662" stop-color="#FB8A2E"></stop>
        <stop offset="0.71474" stop-color="#E2425C"></stop>
        <stop offset="1" stop-color="#E2425C" stop-opacity="0"></stop>
        </radialGradient>
        <radialGradient id="paint2_radial_87_7153" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(0.500002 3) rotate(-8.1301) scale(38.8909 8.31836)">
        <stop offset="0.156701" stop-color="#406ADC"></stop>
        <stop offset="0.467799" stop-color="#6A45BE"></stop>
        <stop offset="1" stop-color="#6A45BE" stop-opacity="0"></stop>
        </radialGradient>
        </defs>
      </svg>
    </li>
    <li>
      <svg width="20px" height="20px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="16" cy="16" r="14" fill="url(#paint0_linear_87_7208)"></circle>
      <path d="M21.2137 20.2816L21.8356 16.3301H17.9452V13.767C17.9452 12.6857 18.4877 11.6311 20.2302 11.6311H22V8.26699C22 8.26699 20.3945 8 18.8603 8C15.6548 8 13.5617 9.89294 13.5617 13.3184V16.3301H10V20.2816H13.5617V29.8345C14.2767 29.944 15.0082 30 15.7534 30C16.4986 30 17.2302 29.944 17.9452 29.8345V20.2816H21.2137Z" fill="white"></path>
      <defs>
      <linearGradient id="paint0_linear_87_7208" x1="16" y1="2" x2="16" y2="29.917" gradientUnits="userSpaceOnUse">
      <stop stop-color="#18ACFE"></stop>
      <stop offset="1" stop-color="#0163E0"></stop>
      </linearGradient>
      </defs>
    </svg>
    </li>
  </ul>
</button>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: button */
.btn {
  width: 120px;
  height: 40px;
  border: none;
  position: relative;
  transition: .2s linear;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.btn > .icon {
  display: none;
  transition: .2s linear;
}

.btn,
.socials {
  border-radius: 20px;
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.281));
}

.socials {
  display: flex;
  list-style: none;
  width: 120px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  justify-content: space-around;
  transition: .2s linear;
  opacity: 0;
  visibility: hidden;
}

.btn:focus > span {
  display: none;
}

.btn:focus > .icon {
  display: flex;
}

.btn:focus {
  width: 40px;
}

.btn:focus > .socials {
  opacity: 1;
  visibility: visible;
  top: -120%;
}


</style>


================================================
FILE: Buttons/boryanakrasteva_terrible-dingo-70.html
================================================
<button class="btn">
    <div class="scroll"> </div>
</button>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: button */
.btn {
  width: 30px;
  height: 50px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  outline: 2px solid rgb(105, 127, 255);
  box-shadow: 0px 0px 10px rgb(105, 127, 255);
  position: relative;
}

.scroll {
  width: 5px;
  height: 10px;
  border-radius: 10px;
  background-color: rgb(105, 127, 255);
  box-shadow: 0px 0px 10px rgb(105, 127, 255);
  animation: scroll_4013 2s linear infinite;
  transform: translateY(40%);
}

.btn:after {
  content: 'scroll';
  position: absolute;
  top: 140%;
  color: whitesmoke;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

@keyframes scroll_4013 {
  0% {
    transform: translateY(40%);
  }

  50% {
    transform: translateY(90%);
  }
};
</style>


================================================
FILE: Buttons/boryanakrasteva_tidy-falcon-17.html
================================================
<button class="btn">
  <svg viewBox="0 0 15 17.5" height="17.5" width="15" xmlns="http://www.w3.org/2000/svg" class="icon">
  <path transform="translate(-2.5 -1.25)" d="M15,18.75H5A1.251,1.251,0,0,1,3.75,17.5V5H2.5V3.75h15V5H16.25V17.5A1.251,1.251,0,0,1,15,18.75ZM5,5V17.5H15V5Zm7.5,10H11.25V7.5H12.5V15ZM8.75,15H7.5V7.5H8.75V15ZM12.5,2.5h-5V1.25h5V2.5Z" id="Fill"></path>
</svg>
</button>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: button, delete */
.btn {
  background-color: transparent;
  position: relative;
  border: none;
}

.btn::after {
  content: 'delete';
  position: absolute;
  top: -130%;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  height: fit-content;
  background-color: rgb(168, 7, 7);
  padding: 4px 8px;
  border-radius: 5px;
  transition: .2s linear;
  transition-delay: .2s;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0;
  visibility: hidden;
}

.icon {
  transform: scale(1.2);
  transition: .2s linear;
}

.btn:hover > .icon {
  transform: scale(1.5);
}

.btn:hover > .icon path {
  fill: rgb(168, 7, 7);
}

.btn:hover::after {
  visibility: visible;
  opacity: 1;
  top: -160%;
}

</style>


================================================
FILE: Buttons/boryanakrasteva_unlucky-duck-40.html
================================================
<button class="btn">
  Share 
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="20px" width="20px">
    <path stroke-linecap="round" stroke-width="2" stroke="#000000" d="M15.2141 7.39294L8.68387 10.6581M8.68387 10.6581C8.19134 9.67492 7.17449 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15C7.17449 15 8.19134 14.3251 8.68387 13.3419M8.68387 10.6581C8.88616 11.0619 9 11.5176 9 12C9 12.4824 8.88616 12.9381 8.68387 13.3419M15.2141 16.6071L8.68387 13.3419M21 6C21 7.65685 19.6569 9 18 9C16.3431 9 15 7.65685 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6ZM21 18C21 19.6569 19.6569 21 18 21C16.3431 21 15 19.6569 15 18C15 16.3431 16.3431 15 18 15C19.6569 15 21 16.3431 21 18Z"></path>
  </svg>

  <ul class="socials">
    <li>
      <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 -4 48 48" height="20px" width="20px">
        <g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="Icons">
            <g fill="#00AAEC" transform="translate(-300.000000, -164.000000)" id="Color-">
                <path id="Twitter" d="M348,168.735283 C346.236309,169.538462 344.337383,170.081618 342.345483,170.324305 C344.379644,169.076201 345.940482,167.097147 346.675823,164.739617 C344.771263,165.895269 342.666667,166.736006 340.418384,167.18671 C338.626519,165.224991 336.065504,164 333.231203,164 C327.796443,164 323.387216,168.521488 323.387216,174.097508 C323.387216,174.88913 323.471738,175.657638 323.640782,176.397255 C315.456242,175.975442 308.201444,171.959552 303.341433,165.843265 C302.493397,167.339834 302.008804,169.076201 302.008804,170.925244 C302.008804,174.426869 303.747139,177.518238 306.389857,179.329722 C304.778306,179.280607 303.256911,178.821235 301.9271,178.070061 L301.9271,178.194294 C301.9271,183.08848 305.322064,187.17082 309.8299,188.095341 C309.004402,188.33225 308.133826,188.450704 307.235077,188.450704 C306.601162,188.450704 305.981335,188.390033 305.381229,188.271578 C306.634971,192.28169 310.269414,195.2026 314.580032,195.280607 C311.210424,197.99061 306.961789,199.605634 302.349709,199.605634 C301.555203,199.605634 300.769149,199.559408 300,199.466956 C304.358514,202.327194 309.53689,204 315.095615,204 C333.211481,204 343.114633,188.615385 343.114633,175.270495 C343.114633,174.831347 343.106181,174.392199 343.089276,173.961719 C345.013559,172.537378 346.684275,170.760563 348,168.735283">
                </path>
            </g>
        </g>
    </svg>
    </li>

    <li>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" height="20px" width="20px">
        <rect fill="url(#paint0_radial_87_7153)" rx="6" height="28" width="28" y="2" x="2"></rect>
        <rect fill="url(#paint1_radial_87_7153)" rx="6" height="28" width="28" y="2" x="2"></rect>
        <rect fill="url(#paint2_radial_87_7153)" rx="6" height="28" width="28" y="2" x="2"></rect>
        <path fill="white" d="M23 10.5C23 11.3284 22.3284 12 21.5 12C20.6716 12 20 11.3284 20 10.5C20 9.67157 20.6716 9 21.5 9C22.3284 9 23 9.67157 23 10.5Z"></path>
        <path fill="white" d="M16 21C18.7614 21 21 18.7614 21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21ZM16 19C17.6569 19 19 17.6569 19 16C19 14.3431 17.6569 13 16 13C14.3431 13 13 14.3431 13 16C13 17.6569 14.3431 19 16 19Z" clip-rule="evenodd" fill-rule="evenodd"></path>
        <path fill="white" d="M6 15.6C6 12.2397 6 10.5595 6.65396 9.27606C7.2292 8.14708 8.14708 7.2292 9.27606 6.65396C10.5595 6 12.2397 6 15.6 6H16.4C19.7603 6 21.4405 6 22.7239 6.65396C23.8529 7.2292 24.7708 8.14708 25.346 9.27606C26 10.5595 26 12.2397 26 15.6V16.4C26 19.7603 26 21.4405 25.346 22.7239C24.7708 23.8529 23.8529 24.7708 22.7239 25.346C21.4405 26 19.7603 26 16.4 26H15.6C12.2397 26 10.5595 26 9.27606 25.346C8.14708 24.7708 7.2292 23.8529 6.65396 22.7239C6 21.4405 6 19.7603 6 16.4V15.6ZM15.6 8H16.4C18.1132 8 19.2777 8.00156 20.1779 8.0751C21.0548 8.14674 21.5032 8.27659 21.816 8.43597C22.5686 8.81947 23.1805 9.43139 23.564 10.184C23.7234 10.4968 23.8533 10.9452 23.9249 11.8221C23.9984 12.7223 24 13.8868 24 15.6V16.4C24 18.1132 23.9984 19.2777 23.9249 20.1779C23.8533 21.0548 23.7234 21.5032 23.564 21.816C23.1805 22.5686 22.5686 23.1805 21.816 23.564C21.5032 23.7234 21.0548 23.8533 20.1779 23.9249C19.2777 23.9984 18.1132 24 16.4 24H15.6C13.8868 24 12.7223 23.9984 11.8221 23.9249C10.9452 23.8533 10.4968 23.7234 10.184 23.564C9.43139 23.1805 8.81947 22.5686 8.43597 21.816C8.27659 21.5032 8.14674 21.0548 8.0751 20.1779C8.00156 19.2777 8 18.1132 8 16.4V15.6C8 13.8868 8.00156 12.7223 8.0751 11.8221C8.14674 10.9452 8.27659 10.4968 8.43597 10.184C8.81947 9.43139 9.43139 8.81947 10.184 8.43597C10.4968 8.27659 10.9452 8.14674 11.8221 8.0751C12.7223 8.00156 13.8868 8 15.6 8Z" clip-rule="evenodd" fill-rule="evenodd"></path>
        <defs>
        <radialGradient gradientTransform="translate(12 23) rotate(-55.3758) scale(25.5196)" gradientUnits="userSpaceOnUse" r="1" cy="0" cx="0" id="paint0_radial_87_7153">
        <stop stop-color="#B13589"></stop>
        <stop stop-color="#C62F94" offset="0.79309"></stop>
        <stop stop-color="#8A3AC8" offset="1"></stop>
        </radialGradient>
        <radialGradient gradientTransform="translate(11 31) rotate(-65.1363) scale(22.5942)" gradientUnits="userSpaceOnUse" r="1" cy="0" cx="0" id="paint1_radial_87_7153">
        <stop stop-color="#E0E8B7"></stop>
        <stop stop-color="#FB8A2E" offset="0.444662"></stop>
        <stop stop-color="#E2425C" offset="0.71474"></stop>
        <stop stop-opacity="0" stop-color="#E2425C" offset="1"></stop>
        </radialGradient>
        <radialGradient gradientTransform="translate(0.500002 3) rotate(-8.1301) scale(38.8909 8.31836)" gradientUnits="userSpaceOnUse" r="1" cy="0" cx="0" id="paint2_radial_87_7153">
        <stop stop-color="#406ADC" offset="0.156701"></stop>
        <stop stop-color="#6A45BE" offset="0.467799"></stop>
        <stop stop-opacity="0" stop-color="#6A45BE" offset="1"></stop>
        </radialGradient>
        </defs>
      </svg>
    </li>
    <li>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" height="20px" width="20px">
      <circle fill="url(#paint0_linear_87_7208)" r="14" cy="16" cx="16"></circle>
      <path fill="white" d="M21.2137 20.2816L21.8356 16.3301H17.9452V13.767C17.9452 12.6857 18.4877 11.6311 20.2302 11.6311H22V8.26699C22 8.26699 20.3945 8 18.8603 8C15.6548 8 13.5617 9.89294 13.5617 13.3184V16.3301H10V20.2816H13.5617V29.8345C14.2767 29.944 15.0082 30 15.7534 30C16.4986 30 17.2302 29.944 17.9452 29.8345V20.2816H21.2137Z"></path>
      <defs>
      <linearGradient gradientUnits="userSpaceOnUse" y2="29.917" x2="16" y1="2" x1="16" id="paint0_linear_87_7208">
      <stop stop-color="#18ACFE"></stop>
      <stop stop-color="#0163E0" offset="1"></stop>
      </linearGradient>
      </defs>
    </svg>
    </li>
  </ul>
</button>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: social, button, share */
.btn {
  width: 130px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border: 1px solid black;
}

.btn,
.socials {
  border-radius: 20px;
  background-color: transparent;
  filter: drop-shadow(1px 1px 3px rgba(122, 122, 122, 0.808));
}

.socials {
  position: absolute;
  /* border-bottom: 0.2px solid black; */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style: none;
  top: 0;
  left: 0;
  transition: .2s linear;
  opacity: 0;
  visibility: hidden;
}

.btn:hover > .socials {
  opacity: 1;
  visibility: visible;
  top: -120%;
}
</style>


================================================
FILE: Buttons/btongheng_blue-bobcat-63.html
================================================
<button class="button">
  BUTTON
</button>
<style>
/* From Uiverse.io by btongheng - Tags: simple, purple, button, download, sign-up, social media, html, css */
.button {
  --😀: #644dff;
  --😀😀: #4836bb;
  --😀😀😀: #654dff63;
  cursor: pointer;
  width: 234px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 1.125em;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  background: var(--😀);
  border: 2px solid var(--😀😀);
  border-radius: .75rem;
  box-shadow: 0 8px 0 var(--😀😀);
  transform: skew(-10deg);
  transition: all .1s ease;
  filter: drop-shadow(0 15px 20px var(--😀😀😀));
}

.button:active {
  letter-spacing: 0px;
  transform: skew(-10deg) translateY(8px);
  box-shadow: 0 0 0 var(--😀😀😀);
}
</style>


================================================
FILE: Buttons/carlosepcc_heavy-emu-25.html
================================================
<!-- From Uiverse.io by carlosepcc - Tags: simple, 3d, blue, button, game, transition, click effect, asset -->
<button class="cursor-pointer transition-all bg-blue-500 text-white px-6 py-2 rounded-lg
border-blue-600
border-b-[4px] hover:brightness-110 hover:-translate-y-[1px] hover:border-b-[6px]
active:border-b-[2px] active:brightness-90 active:translate-y-[2px]">
  Button
</button>



================================================
FILE: Buttons/catraco_blue-bulldog-58.html
================================================
<button class="btn">
  <div>GET STARTED</div>
  <svg fill="none" viewBox="0 0 24 24" height="25px" width="25px" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" stroke="white" d="M11.6801 14.62L14.2401 12.06L11.6801 9.5"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" stroke="white" d="M4 12.0601H14.17"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" stroke="white" d="M12 4C16.42 4 20 7 20 12C20 17 16.42 20 12 20"></path>
</svg>
</button>
<style>
/* From Uiverse.io by catraco - Tags: button, click, light&dark, startbutton  */
.btn {
  --color: #de5c9d;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .5s;
  border: none;
  background-color: transparent;
}

.btn div {
  letter-spacing: 2px;
  font-weight: bold;
  background: var(--color);
  border-radius: 2rem;
  color: white;
  padding: 1rem;
}

.btn::before {
  content: '';
  z-index: -1;
  background-color: var(--color);
  border: 2px solid white;
  border-radius: 2rem;
  width: 110%;
  height: 100%;
  position: absolute;
  transform: rotate(10deg);
  transition: .5s;
  opacity: 0.2;
}

.btn:hover {
  cursor: pointer;
  filter: brightness(1.2);
  transform: scale(1.1);
}

.btn:hover::before {
  transform: rotate(0deg);
  opacity: 1;
}

.btn svg {
  transform: translateX(-200%);
  transition: .5s;
  width: 0;
  opacity: 0;
}

.btn:hover svg {
  width: 25px;
  transform: translateX(0%);
  opacity: 1;
}

.btn:active {
  filter: brightness(1.4);
}
</style>


================================================
FILE: Buttons/catraco_fluffy-quail-74.html
================================================
<!-- From Uiverse.io by catraco  - Tags: icon, button, svg, add, create, plus, tailwind css, new -->
<button
  title="Add New"
  class="group cursor-pointer outline-none hover:rotate-90 duration-300"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="50px"
    height="50px"
    viewBox="0 0 24 24"
    class="stroke-zinc-400 fill-none group-hover:fill-zinc-800 group-active:stroke-zinc-200 group-active:fill-zinc-600 group-active:duration-0 duration-300"
  >
    <path
      d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
      stroke-width="1.5"
    ></path>
    <path d="M8 12H16" stroke-width="1.5"></path>
    <path d="M12 16V8" stroke-width="1.5"></path>
  </svg>
</button>


    

================================================
FILE: Buttons/catraco_friendly-snake-37.html
================================================
<button class="btn-class-name">
  <span>Next</span>
  <svg viewBox="0 0 320 512" height="1em" xmlns="http://www.w3.org/2000/svg">
    <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z">
  </path>
  </svg>
</button>
<style>
/* From Uiverse.io by catraco - Tags: button, ring, next, hover effect, startbutton , variables */
.btn-class-name {
  --color: 180,255, 100;
  border-radius: .5em;
  transition: .3s;
  background-color: rgba(var(--color), .2);
  color: rgb(var(--color));
  fill: rgb(var(--color));
  font-family: monospace;
  font-weight: bolder;
  font-size: x-large;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  border: 2px solid rgb(var(--color));
  box-shadow: 0 0 10px rgba(var(--color), .4);
  outline: none;
  display: flex;
  align-items: center;
  padding: .5em 1em;
}

.btn-class-name:hover {
  box-shadow: 0 0 0 5px rgba(var(--color), .5);
}

.btn-class-name span {
  transform: scale(.8);
  transition: .3s;
}

.btn-class-name:hover span {
  transform: scale(1);
}

.btn-class-name svg {
  font-size: 0;
  transform: scale(0.5) translateX(0%) rotate(-180deg);
  transition: .3s;
}

.btn-class-name:hover svg {
  font-size: 20px;
  transform: scale(1) translateX(20%) rotate(0deg);
}

.btn-class-name:active {
  transition: 0s;
  box-shadow: 0 0 0 5px rgb(var(--color));
}
</style>


================================================
FILE: Buttons/catraco_funny-impala-9.html
================================================
<!-- From Uiverse.io by catraco - Tags: red, button, dark, hover effect, tailwind, tailwindbutton -->
<button class="bg-red-950 text-red-400 border border-red-400 border-b-4 font-medium overflow-hidden relative px-4 py-2 rounded-md hover:brightness-150 hover:border-t-4 hover:border-b active:opacity-75 outline-none duration-300 group">
  <span class="bg-red-400 shadow-red-400 absolute -top-[150%] left-0 inline-flex w-80 h-[5px] rounded-md opacity-50 group-hover:top-[150%] duration-500 shadow-[0_0_10px_10px_rgba(0,0,0,0.3)]"></span>
  Hover Me
</button>



================================================
FILE: Buttons/catraco_orange-cat-31.html
================================================
<!-- From Uiverse.io by catraco - Tags: gradient, button, smooth, gift, open, tailwind -->
<button class="cursor-pointer relative p-3 border-2 border-white overflow-hidden bg-gradient-to-tr from-yellow-100 to-yellow-200 group duration-300 hover:-rotate-45 hover:opacity-75 hover:scale-125 active:scale-100 rounded-full drop-shadow-xl">
        <svg class="animate-pulse group-hover:scale-100 group-hover:rotate-45 scale-75 duration-500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="50px" height="50px" viewBox="0 0 512 512" xml:space="preserve">
            <path class="fill-slate-600" d="M356.766,8.17c-20.892,0-39.481,9.814-51.446,25.071L256,96.085l-21.787,64.596l122.553-21.787  c36.098,0,65.362-29.264,65.362-65.362S392.864,8.17,356.766,8.17z M356.766,106.213h-67.171l41.434-52.796  c6.266-7.988,15.644-12.566,25.737-12.566c18.02,0,32.681,14.661,32.681,32.681S374.786,106.213,356.766,106.213z"></path>
            <path class="fill-slate-600" d="M206.68,33.241C194.715,17.984,176.126,8.17,155.234,8.17c-36.098,0-65.362,29.264-65.362,65.362  s29.264,65.362,65.362,65.362L256,160.681V96.085L206.68,33.241z M155.234,106.213c-18.02,0-32.681-14.661-32.681-32.681  s14.661-32.681,32.681-32.681c10.093,0,19.471,4.577,25.73,12.557l41.441,52.805H155.234z"></path>
            <polygon class="fill-red-400" points="57.191,226.043 57.191,258.723 404.033,258.723 422.128,503.83 454.809,503.83   454.809,226.043 256,171.574"></polygon>
            <polygon class="fill-red-300" points="57.191,258.723 57.191,503.83 223.319,503.83 256,471.149 288.681,503.83 422.128,503.83   422.128,258.723"></polygon>
            <polygon class="fill-red-400" points="433.021,138.894 411.234,171.574 433.021,226.043 465.702,226.043 465.702,138.894"></polygon>
            <rect x="46.298" y="138.894" class="fill-red-300" width="386.723" height="87.149"></rect>
            <rect x="223.319" y="138.894" class="fill-slate-600" width="65.362" height="364.936"></rect>
            <path class="fill-orange-200" d="M256,73.532c-18.05,0-32.681,14.631-32.681,32.681v32.681h65.362v-32.681  C288.681,88.163,274.05,73.532,256,73.532z"></path>
            <path class="fill-none" d="M465.702,130.723h-62.79c16.688-13.491,27.385-34.111,27.385-57.191C430.298,32.986,397.312,0,356.766,0  c-22.725,0-43.821,10.278-57.873,28.196l-30.642,39.045c-3.869-1.219-7.984-1.879-12.251-1.879c-4.267,0-8.382,0.66-12.251,1.879  l-30.64-39.043C199.054,10.278,177.959,0,155.234,0c-40.546,0-73.532,32.986-73.532,73.532c0,23.08,10.698,43.701,27.385,57.191  h-62.79c-4.512,0-8.17,3.658-8.17,8.17v87.149c0,4.512,3.658,8.17,8.17,8.17h168.851V495.66H65.362V258.723  c0-4.512-3.658-8.17-8.17-8.17s-8.17,3.658-8.17,8.17V503.83c0,4.512,3.658,8.17,8.17,8.17h397.617c4.513,0,8.17-3.658,8.17-8.17  V234.213h2.723c4.513,0,8.17-3.658,8.17-8.17v-87.149C473.872,134.381,470.215,130.723,465.702,130.723z M457.532,147.064v70.809  H296.851v-70.809H457.532z M311.749,38.282c10.936-13.945,27.344-21.942,45.017-21.942c31.535,0,57.191,25.656,57.191,57.191  s-25.657,57.191-57.191,57.191h-59.915v-16.34h59.915c22.526,0,40.851-18.325,40.851-40.851s-18.325-40.851-40.851-40.851  c-12.619,0-24.344,5.72-32.165,15.692l-31.683,40.37c-2.452-5.161-5.959-9.725-10.236-13.424L311.749,38.282z M306.393,98.043  l31.065-39.583c4.704-5.998,11.742-9.438,19.308-9.438c13.515,0,24.511,10.995,24.511,24.511s-10.996,24.511-24.511,24.511H306.393z   M98.043,73.532c0-31.536,25.656-57.191,57.191-57.191c17.673,0,34.081,7.997,45.019,21.944l29.064,37.035  c-4.277,3.698-7.783,8.263-10.236,13.424l-31.688-40.377c-7.818-9.969-19.54-15.686-32.159-15.686  c-22.526,0-40.851,18.325-40.851,40.851s18.325,40.851,40.851,40.851h67.193c0.15,0,0.297-0.014,0.446-0.023  c0.148,0.008,0.295,0.023,0.446,0.023c4.512,0,8.17-3.658,8.17-8.17c0-13.516,10.995-24.511,24.511-24.511  c13.515,0,24.511,10.995,24.511,24.511v24.511H155.233C123.698,130.723,98.043,105.068,98.043,73.532z M205.607,98.043h-50.373  c-13.516,0-24.511-10.995-24.511-24.511s10.995-24.511,24.511-24.511c7.567,0,14.602,3.437,19.302,9.431L205.607,98.043z   M54.468,217.872v-70.809h160.681v70.809H54.468z M231.489,147.064h49.021V495.66h-49.021V147.064z M446.638,495.66H296.851V234.213  h149.787V495.66z"></path>
        </svg>
        <span class="bg-slate-200 h-[100%] w-[50%] absolute group-hover:w-0 left-0 top-0 duration-300 overflow-hidden flex items-center justify-end font-bold">OP</span>
        <span class="bg-slate-200 h-[100%] w-[50%] absolute group-hover:w-0 right-0 top-0 duration-500 overflow-hidden flex items-center justify-start font-bold">EN</span>
    </button>



================================================
FILE: Buttons/catraco_rare-monkey-14.html
================================================
<!-- From Uiverse.io by catraco - Tags: icon, button, attach, clip -->
<button class="cursor-pointer duration-200 hover:scale-125 active:scale-100" title="Attach">
  <svg class="stroke-blue-300 fill-none" xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 -0.5 25 25">
    <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M15.17 11.053L11.18 15.315C10.8416 15.6932 10.3599 15.9119 9.85236 15.9178C9.34487 15.9237 8.85821 15.7162 8.51104 15.346C7.74412 14.5454 7.757 13.2788 8.54004 12.494L13.899 6.763C14.4902 6.10491 15.3315 5.72677 16.2161 5.72163C17.1006 5.71649 17.9463 6.08482 18.545 6.736C19.8222 8.14736 19.8131 10.2995 18.524 11.7L12.842 17.771C12.0334 18.5827 10.9265 19.0261 9.78113 18.9971C8.63575 18.9682 7.55268 18.4695 6.78604 17.618C5.0337 15.6414 5.07705 12.6549 6.88604 10.73L12.253 5"></path>
  </svg>
</button>



================================================
FILE: Buttons/catraco_short-starfish-66.html
================================================
<button class="btn-class-name">
  <span class="back"></span>
  <span class="front"></span>
</button>
<style>
/* From Uiverse.io by catraco - Tags: button, active, 3d button */
.btn-class-name {
  --primary: 255, 90, 120;
  --secondary: 150, 50, 60;
  width: 60px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  outline: 10px solid rgb(var(--primary), .5);
  border-radius: 100%;
  position: relative;
  transition: .3s;
}

.btn-class-name .back {
  background: rgb(var(--secondary));
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.btn-class-name .front {
  background: linear-gradient(0deg, rgba(var(--primary), .6) 20%, rgba(var(--primary)) 50%);
  box-shadow: 0 .5em 1em -0.2em rgba(var(--secondary), .5);
  border-radius: 100%;
  position: absolute;
  border: 1px solid rgb(var(--secondary));
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: inherit;
  transform: translateY(-15%);
  transition: .15s;
  color: rgb(var(--secondary));
}

.btn-class-name:active .front {
  transform: translateY(0%);
  box-shadow: 0 0;
}
</style>


================================================
FILE: Buttons/catraco_spotty-catfish-33.html
================================================
<!-- From Uiverse.io by catraco - Tags: button, save, hover effect, tailwind -->
<button title="Save" class="cursor-pointer flex items-center fill-lime-400 bg-lime-950 hover:bg-lime-900 active:border active:border-lime-400 rounded-md duration-100 p-2">
  <svg viewBox="0 -0.5 25 25" height="20px" width="20px" xmlns="http://www.w3.org/2000/svg">
    <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M18.507 19.853V6.034C18.5116 5.49905 18.3034 4.98422 17.9283 4.60277C17.5532 4.22131 17.042 4.00449 16.507 4H8.50705C7.9721 4.00449 7.46085 4.22131 7.08577 4.60277C6.7107 4.98422 6.50252 5.49905 6.50705 6.034V19.853C6.45951 20.252 6.65541 20.6407 7.00441 20.8399C7.35342 21.039 7.78773 21.0099 8.10705 20.766L11.907 17.485C12.2496 17.1758 12.7705 17.1758 13.113 17.485L16.9071 20.767C17.2265 21.0111 17.6611 21.0402 18.0102 20.8407C18.3593 20.6413 18.5551 20.2522 18.507 19.853Z" clip-rule="evenodd" fill-rule="evenodd"></path>
  </svg>
  <span class="text-sm text-lime-400 font-bold pr-1">Save Post</span>
</button>



================================================
FILE: Buttons/catraco_tasty-shrimp-6.html
================================================
<!-- From Uiverse.io by catraco - Tags: icon, button, back arrow, goback -->
<button class="cursor-pointer duration-200 hover:scale-125 active:scale-100" title="Go Back">
  <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 24 24" class="stroke-blue-300">
    <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M11 6L5 12M5 12L11 18M5 12H19"></path>
  </svg>
</button>



================================================
FILE: Buttons/chethan025_loud-goat-75.html
================================================
<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 97 162" height="162" width="97" class="svg">
<path fill="#262626" d="M47.2124 0H54.0796V151.644L86.6991 128.712H97L50.646 162L0 128.712H10.3009L47.2124 151.644V0Z"></path>
</svg>

</button>
<style>
/* From Uiverse.io by chethan025 - Tags: button, scroll snap */
.button {
  width: 38px;
  height: 82px;
  padding: 2px;
  border: 1px solid #474747;
  border-radius: 50px;
  background: rgba(141, 141, 141, 0.18);
  transition: all 0.3s ease-in-out;
  transform: rotate(180deg);
}

.svg {
  width: 22px;
  height: 62px;
  transform: rotate(180deg);
}

.button:hover {
  transform: scale(-1.2);
}

.button:focus {
  height: 0px;
  width: 0px;
  padding: 0px;
  border: 0px;
}

.button:focus > .svg {
  display: none;
  height: 0px;
}
  
  
  
  
</style>


================================================
FILE: Buttons/cjnoise_stupid-fish-62.html
================================================
<button class="button">Button</button>

<style>
/* From Uiverse.io by cjnoise  - Tags: blue, button, animated, 3d button */
.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #3498db;
  color: #fff;
  background-color: #3498db;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  transform: perspective(5px) rotateX(2deg) rotateY(2deg);
  transition: transform 0.3s;
  pointer-events: none;
}

.button:hover::before {
  transform: perspective(5px) rotateX(0) rotateY(0);
}

</style>
    

================================================
FILE: Buttons/coding-masala_rotten-chicken-28.html
================================================
<!-- From Uiverse.io by coding-masala - Tags: button, css, tailwind -->
  <span class="sm:ml-3">
      <button type="button" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
        <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
        </svg>
        Submit
      </button>
    </span>



================================================
FILE: Buttons/cohencoo_massive-monkey-39.html
================================================
<button>
  Explore
</button>
<style>
/* From Uiverse.io by cohencoo - Tags: button */
button {
  background: #282936;
  padding: 10px 2rem;
  outline: 2.5px solid #FEBF00;
  outline-offset: 3px;
  border: 0;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  border-radius: 100rem;
  transition: 0.4s;
  font-weight: 600;
}

button:hover {
  outline-offset: 4.5px;
  background: #FEBF00;
  font-size: 1.1rem;
}
</style>


================================================
FILE: Buttons/cosnametv_fast-otter-99.html
================================================
<button class="button type1">
</button>
<style>
/* From Uiverse.io by cosnametv - Tags: button, infinite, subscribe */
.button {
  height: 50px;
  width: 150px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.button:hover {
  box-shadow: .5px .5px 150px #252525;
}

.type1::after {
  content: "THANK YOU";
  height: 50px;
  width: 150px;
  background-color: #4617ec;
  color: #fff;
  transform: translateY(100px);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
}

.type1::before {
  content: "SUBSCRIBE";
  height: 50px;
  width: 150px;
  background-color: rgb(240, 9, 9);
  color: #f5f8f8;
  position: absolute;
  transform: translateY(0px) scale(1.1);
  font-size: 1.2rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
}

.type1:hover::after {
  transform: translateY(-2px) scale(1.2) rotate(0deg);
}

.type1:hover::before {
  transform: translateY(-50px)  rotate(290deg);
}
</style>


================================================
FILE: Buttons/csemszepp_hot-mole-45.html
================================================
<!-- From Uiverse.io by csemszepp - Tags: gradient, button -->
<button class="bg-gradient-to-r from-pink-500 to-purple-500 hover:animate-pulse focus:outline-none text-white font-semibold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 hover:bg-opacity-90">
  Click Me!
</button>




================================================
FILE: Buttons/csemszepp_loud-impala-43.html
================================================
<div class="gas ne">
  <span class="number">10</span>
  <div class="symbol">Ne</div>
  <p class="name">Neon</p>
</div>

<style>
/* From Uiverse.io by csemszepp  - Website: https://codepen.io/CITguy/pen/yLaZZbO - Name: Ryan Johnson - Tags: button, neon, lights */
#gasses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gas {
  --blur: 1.75rem;
  --box-blur: calc(0.5 * var(--blur));
  --glow: var(--color);
  --size: 12rem;

  align-items: center;
  border-radius: 12px;
  border: 4px solid currentColor;
  box-shadow: 
    /* --- "glass" tube --- */
    /* inside */ inset 0 0 0 2px
      rgba(0, 0, 0, 0.15),
    /* outside */ 0 0 0 2px rgba(0, 0, 0, 0.15),
    /* --- glow --- */ /* inside */ inset 0 0 var(--box-blur) var(--glow),
    /* outside */ 0 0 var(--box-blur) var(--glow);
  color: var(--color, white);
  display: inline-flex;
  flex-direction: column;
  font-family: system-ui, sans-serif;
  height: var(--size);
  justify-content: space-around;
  padding: 1rem;
  width: var(--size);
}
.gas.number {
  font-weight: 700;
}

.symbol {
  font-size: 4rem;
  font-family: "Neon Glow";
  text-shadow: 0 0 var(--blur) var(--glow);
}

.gas.ne {
  --color: #fda802;
  filter: brightness(110%);
  cursor: pointer;
}
.gas.ne:hover {
  filter: brightness(120%) drop-shadow(0 0 10px var(--glow));
}

</style>
    

================================================
FILE: Buttons/csemszepp_purple-treefrog-92.html
================================================

	<div class="container">
		<div class="btn"><a href="#">Read more</a></div>
	</div>	

<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/katarzynamarta/pen/rNdbbVq - Tags: simple, button, #button */
.container {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.container .btn {
  position: relative;
  top: 0;
  left: 0;
  width: 250px;
  height: 50px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .btn a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 10px;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  color: #fff;
  font-weight: 400px;
  z-index: 1;
  transition: 0.5s;
  backdrop-filter: blur(15px);
}

.container .btn:hover a {
  letter-spacing: 3px;
}

.container .btn a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(45deg) translate(0);
  transition: 0.5s;
  filter: blur(0px);
}

.container .btn:hover a::before {
  transform: skewX(45deg) translate(200px);
}

.container .btn::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  bottom: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.5;
}

.container .btn:hover::before /*lightup button*/ {
  bottom: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
}

.container .btn::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  top: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.5;
}

.container .btn:hover::after /*lightup button*/ {
  top: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
}

.container .btn:nth-child(1)::before,
.container .btn:nth-child(1)::after {
  background: #2db2ff;
  box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff;
}

</style>


================================================
FILE: Buttons/csozidev_lovely-husky-50.html
================================================
<div class="buttons">
  <button class="main-button">
  <svg width="30" height="30" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path d="M15.75 5.125a3.125 3.125 0 1 1 .754 2.035l-8.397 3.9a3.124 3.124 0 0 1 0 1.88l8.397 3.9a3.125 3.125 0 1 1-.61 1.095l-8.397-3.9a3.125 3.125 0 1 1 0-4.07l8.397-3.9a3.125 3.125 0 0 1-.144-.94Z"></path>
  </svg>
</button>
<button class="discord-button button" style="transition-delay: 0s, 0s, 0s; transition-property: translate, background, box-shadow;">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="30" width="30">
     <path d="M18.654 6.368a15.87 15.87 0 0 0-3.908-1.213.06.06 0 0 0-.062.03c-.17.3-.357.693-.487 1a14.628 14.628 0 0 0-4.39 0 9.911 9.911 0 0 0-.494-1 .061.061 0 0 0-.063-.03c-1.35.233-2.664.64-3.908 1.213a.05.05 0 0 0-.025.022c-2.49 3.719-3.172 7.346-2.837 10.928a.068.068 0 0 0 .025.045 15.936 15.936 0 0 0 4.794 2.424.06.06 0 0 0 .067-.023c.37-.504.699-1.036.982-1.595a.06.06 0 0 0-.034-.084 10.65 10.65 0 0 1-1.497-.714.06.06 0 0 1-.024-.08.06.06 0 0 1 .018-.022c.1-.075.201-.155.297-.234a.06.06 0 0 1 .061-.008c3.143 1.435 6.545 1.435 9.65 0a.062.062 0 0 1 .033-.005.061.061 0 0 1 .03.013c.096.08.197.159.298.234a.06.06 0 0 1 .016.081.062.062 0 0 1-.021.021c-.479.28-.98.518-1.499.713a.06.06 0 0 0-.032.085c.288.558.618 1.09.98 1.595a.06.06 0 0 0 .067.023 15.885 15.885 0 0 0 4.802-2.424.06.06 0 0 0 .025-.045c.4-4.14-.671-7.738-2.84-10.927a.04.04 0 0 0-.024-.023Zm-9.837 8.769c-.947 0-1.726-.87-1.726-1.935 0-1.066.765-1.935 1.726-1.935.968 0 1.74.876 1.726 1.935 0 1.066-.765 1.935-1.726 1.935Zm6.38 0c-.946 0-1.726-.87-1.726-1.935 0-1.066.764-1.935 1.725-1.935.969 0 1.741.876 1.726 1.935 0 1.066-.757 1.935-1.726 1.935Z"></path>
  </svg>
</button>
<button class="twitter-button button" style="transition-delay: 0.1s, 0s, 0.1s; transition-property: translate, background, box-shadow;">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="30" width="30">
     <path d="M8.432 19.8c7.245 0 11.209-6.005 11.209-11.202 0-.168 0-.338-.007-.506A8.023 8.023 0 0 0 21.6 6.049a7.99 7.99 0 0 1-2.266.622 3.961 3.961 0 0 0 1.736-2.18 7.84 7.84 0 0 1-2.505.951 3.943 3.943 0 0 0-6.715 3.593A11.19 11.19 0 0 1 3.73 4.92a3.947 3.947 0 0 0 1.222 5.259 3.989 3.989 0 0 1-1.784-.49v.054a3.946 3.946 0 0 0 3.159 3.862 3.964 3.964 0 0 1-1.775.069 3.939 3.939 0 0 0 3.68 2.733 7.907 7.907 0 0 1-4.896 1.688 7.585 7.585 0 0 1-.936-.054A11.213 11.213 0 0 0 8.432 19.8Z"></path>
  </svg>
</button>
<button class="reddit-button button" style="transition-delay: 0.2s, 0s, 0.2s; transition-property: translate, background, box-shadow;">
  <svg width="30" height="30" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path d="M9.708 12a1.039 1.039 0 0 0-1.037 1.037c0 .574.465 1.05 1.037 1.04a1.04 1.04 0 0 0 0-2.077Zm2.304 4.559c.394 0 1.754-.048 2.47-.764a.29.29 0 0 0 0-.383.266.266 0 0 0-.382 0c-.442.454-1.408.61-2.088.61-.681 0-1.635-.156-2.089-.61a.266.266 0 0 0-.382 0 .266.266 0 0 0 0 .383c.705.704 2.065.763 2.471.763Zm1.24-3.509a1.04 1.04 0 0 0 1.039 1.037c.572 0 1.037-.476 1.037-1.037a1.039 1.039 0 0 0-2.075 0Z"></path>
     <path d="M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0Zm-4.785-1.456c-.394 0-.753.155-1.015.406-1.001-.716-2.375-1.181-3.901-1.241l.667-3.127 2.173.466a1.038 1.038 0 1 0 1.037-1.087 1.037 1.037 0 0 0-.93.585l-2.422-.512a.254.254 0 0 0-.264.106.232.232 0 0 0-.035.096l-.74 3.485c-1.55.048-2.947.513-3.963 1.24a1.466 1.466 0 0 0-1.927-.082 1.454 1.454 0 0 0 .318 2.457 2.542 2.542 0 0 0-.037.441c0 2.244 2.614 4.07 5.836 4.07 3.222 0 5.835-1.813 5.835-4.07a2.73 2.73 0 0 0-.036-.44c.502-.227.86-.74.86-1.337 0-.813-.656-1.456-1.456-1.456Z"></path>
</svg>
</button>
<button class="messenger-button button" style="transition-delay: 0.3s, 0s, 0.3s; transition-property: translate, background, box-shadow;">
  <svg width="30" height="30" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path d="M2 11.7C2 6.126 6.366 2 12 2s10 4.126 10 9.7c0 5.574-4.366 9.7-10 9.7-1.012 0-1.982-.134-2.895-.384a.799.799 0 0 0-.534.038l-1.985.877a.8.8 0 0 1-1.122-.707l-.055-1.779a.799.799 0 0 0-.269-.57C3.195 17.135 2 14.615 2 11.7Zm6.932-1.824-2.937 4.66c-.281.448.268.952.689.633l3.156-2.395a.6.6 0 0 1 .723-.003l2.336 1.753a1.501 1.501 0 0 0 2.169-.4l2.937-4.66c.283-.448-.267-.952-.689-.633l-3.156 2.395a.6.6 0 0 1-.723.003l-2.336-1.754a1.5 1.5 0 0 0-2.169.4v.001Z"></path>
  </svg>
</button>
<button class="pinterest-button button" style="transition-delay: 0.4s, 0s, 0.4s; transition-property: translate, background, box-shadow;">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="30" width="30">
     <path d="M12.48 2.4a9.6 9.6 0 0 0-3.498 18.543c-.084-.76-.16-1.927.033-2.757.175-.75 1.125-4.772 1.125-4.772s-.287-.575-.287-1.424c0-1.336.774-2.332 1.738-2.332.818 0 1.214.614 1.214 1.352 0 .824-.524 2.055-.795 3.196-.226.955.48 1.735 1.422 1.735 1.706 0 3.018-1.8 3.018-4.397 0-2.298-1.653-3.904-4.01-3.904-2.732 0-4.335 2.048-4.335 4.165 0 .825.318 1.71.714 2.191a.288.288 0 0 1 .067.276c-.073.302-.235.955-.266 1.088-.042.176-.14.213-.322.129-1.2-.558-1.949-2.311-1.949-3.72 0-3.028 2.201-5.808 6.344-5.808 3.33 0 5.918 2.372 5.918 5.544 0 3.308-2.087 5.971-4.981 5.971-.974 0-1.888-.505-2.201-1.103l-.598 2.283c-.217.834-.803 1.879-1.194 2.516A9.6 9.6 0 1 0 12.48 2.4Z"></path>
  </svg>
</button>
<button class="instagram-button button" style="transition-delay: 0.5s, 0s, 0.5s; transition-property: translate, background, box-shadow;">
  <svg width="30" height="30" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path d="M12 2c-2.714 0-3.055.013-4.121.06-1.066.05-1.793.217-2.429.465a4.896 4.896 0 0 0-1.771 1.154A4.909 4.909 0 0 0 2.525 5.45c-.248.635-.416 1.362-.465 2.425C2.013 8.944 2 9.284 2 12.001c0 2.715.013 3.055.06 4.121.05 1.066.217 1.792.465 2.428a4.91 4.91 0 0 0 1.154 1.771 4.88 4.88 0 0 0 1.77 1.154c.637.247 1.362.416 2.427.465 1.068.047 1.408.06 4.124.06 2.716 0 3.055-.012 4.122-.06 1.064-.05 1.793-.218 2.43-.465a4.893 4.893 0 0 0 1.77-1.154 4.91 4.91 0 0 0 1.153-1.771c.246-.636.415-1.363.465-2.428.047-1.066.06-1.406.06-4.122s-.012-3.056-.06-4.124c-.05-1.064-.219-1.791-.465-2.426a4.907 4.907 0 0 0-1.154-1.771 4.888 4.888 0 0 0-1.771-1.154c-.637-.248-1.365-.416-2.429-.465-1.067-.047-1.406-.06-4.123-.06H12Zm-.896 1.803H12c2.67 0 2.987.008 4.04.057.975.044 1.505.208 1.858.344.466.181.8.399 1.15.748.35.35.566.683.747 1.15.138.352.3.882.344 1.857.049 1.053.059 1.37.059 4.039 0 2.668-.01 2.986-.059 4.04-.044.974-.207 1.503-.344 1.856a3.09 3.09 0 0 1-.748 1.149 3.09 3.09 0 0 1-1.15.747c-.35.137-.88.3-1.857.345-1.053.047-1.37.059-4.04.059s-2.987-.011-4.041-.059c-.975-.045-1.504-.208-1.856-.345a3.097 3.097 0 0 1-1.15-.747 3.1 3.1 0 0 1-.75-1.15c-.136-.352-.3-.882-.344-1.857-.047-1.054-.057-1.37-.057-4.041 0-2.67.01-2.985.057-4.039.045-.975.208-1.505.345-1.857.181-.466.399-.8.749-1.15a3.09 3.09 0 0 1 1.15-.748c.352-.137.881-.3 1.856-.345.923-.042 1.28-.055 3.144-.056v.003Zm6.235 1.66a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4ZM12 6.865a5.136 5.136 0 1 0-.16 10.272A5.136 5.136 0 0 0 12 6.865Zm0 1.801a3.334 3.334 0 1 1 0 6.668 3.334 3.334 0 0 1 0-6.668Z"></path>
  </svg>
</button>
<button class="snapchat-button button" style="transition-delay: 0.6s, 0s, 0.6s; transition-property: translate, background, box-shadow;">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="30" width="30">
     <path d="M21.929 16.407c-.139-.378-.404-.58-.705-.748a1.765 1.765 0 0 0-.154-.08l-.273-.139c-.94-.499-1.674-1.127-2.183-1.872a4.234 4.234 0 0 1-.375-.664c-.043-.125-.04-.195-.01-.259a.424.424 0 0 1 .121-.125l.44-.289a14.1 14.1 0 0 0 .464-.306c.386-.27.656-.558.825-.878a1.745 1.745 0 0 0 .086-1.45c-.256-.672-.891-1.09-1.661-1.09-.206 0-.41.027-.609.082.008-.46-.002-.947-.043-1.424-.146-1.68-.734-2.56-1.347-3.263a5.367 5.367 0 0 0-1.368-1.1C14.204 2.27 13.15 2 11.998 2c-1.15 0-2.2.27-3.131.801-.515.29-.978.663-1.371 1.104-.613.703-1.2 1.584-1.347 3.263-.041.477-.05.965-.045 1.422a2.288 2.288 0 0 0-.608-.081c-.77 0-1.405.418-1.66 1.091a1.747 1.747 0 0 0 .083 1.451c.17.32.44.608.825.877.103.072.263.174.464.307l.424.276c.054.036.1.083.136.138.033.066.034.137-.015.271a4.204 4.204 0 0 1-.369.65c-.497.729-1.21 1.346-2.12 1.84-.481.255-.982.425-1.193 1-.16.435-.055.929.35 1.344.148.156.32.287.51.387a5.54 5.54 0 0 0 1.25.5c.09.023.176.061.253.113.148.13.128.325.324.61.099.147.225.275.37.375.413.286.876.303 1.369.322.444.018.947.038 1.521.225.238.08.486.233.773.41.687.423 1.63 1.003 3.207 1.003s2.525-.583 3.22-1.008c.284-.175.53-.325.761-.401.575-.19 1.079-.21 1.523-.226.491-.019.955-.038 1.369-.323.172-.12.315-.277.42-.46.142-.24.137-.409.27-.525a.783.783 0 0 1 .238-.108 5.552 5.552 0 0 0 1.268-.506c.2-.108.382-.25.536-.42l.005-.006c.38-.406.475-.886.32-1.309Zm-1.401.753c-.855.473-1.424.421-1.866.706-.375.242-.153.763-.425.95-.337.233-1.327-.015-2.607.408-1.056.349-1.73 1.352-3.629 1.352-1.898 0-2.556-1.001-3.63-1.355-1.277-.422-2.27-.175-2.604-.406-.273-.188-.052-.71-.427-.951-.442-.285-1.011-.234-1.865-.704-.545-.3-.236-.488-.055-.575 3.098-1.499 3.592-3.813 3.613-3.985.027-.207.056-.371-.173-.582-.221-.206-1.202-.813-1.475-1.003-.45-.315-.65-.629-.502-1.015.102-.268.351-.369.612-.369.083 0 .166.01.247.028.495.107.975.356 1.252.422a.477.477 0 0 0 .103.014c.147 0 .2-.075.19-.244-.033-.541-.11-1.596-.024-2.582.117-1.355.555-2.028 1.074-2.622.25-.286 1.42-1.525 3.662-1.525 2.24 0 3.415 1.234 3.664 1.52.52.593.957 1.265 1.073 2.622.085.985.012 2.04-.023 2.581-.013.178.042.244.19.244a.442.442 0 0 0 .102-.013c.278-.067.759-.316 1.253-.422a1.14 1.14 0 0 1 .246-.029c.262 0 .511.102.612.369.147.386-.05.7-.5 1.015-.273.19-1.255.797-1.476 1.002-.23.212-.2.375-.174.583.023.175.517 2.489 3.613 3.986.184.091.492.278-.051.58Z"></path>
  </svg>
</button>
<button class="whatsapp-button button" style="transition-delay: 0.7s, 0s, 0.7s; transition-property: translate, background, box-shadow;">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="30" width="30">
     <path d="M19.001 4.908A9.817 9.817 0 0 0 11.992 2C6.534 2 2.085 6.448 2.08 11.908c0 1.748.458 3.45 1.321 4.956L2 22l5.255-1.377a9.916 9.916 0 0 0 4.737 1.206h.005c5.46 0 9.908-4.448 9.913-9.913A9.872 9.872 0 0 0 19 4.908h.001ZM11.992 20.15A8.216 8.216 0 0 1 7.797 19l-.3-.18-3.117.818.833-3.041-.196-.314a8.2 8.2 0 0 1-1.258-4.381c0-4.533 3.696-8.23 8.239-8.23a8.2 8.2 0 0 1 5.825 2.413 8.196 8.196 0 0 1 2.41 5.825c-.006 4.55-3.702 8.24-8.24 8.24Zm4.52-6.167c-.247-.124-1.463-.723-1.692-.808-.228-.08-.394-.123-.556.124-.166.246-.641.808-.784.969-.143.166-.29.185-.537.062-.247-.125-1.045-.385-1.99-1.23-.738-.657-1.232-1.47-1.38-1.716-.142-.247-.013-.38.11-.504.11-.11.247-.29.37-.432.126-.143.167-.248.248-.413.082-.167.043-.31-.018-.433-.063-.124-.557-1.345-.765-1.838-.2-.486-.404-.419-.557-.425-.142-.009-.309-.009-.475-.009a.911.911 0 0 0-.661.31c-.228.247-.864.845-.864 2.067 0 1.22.888 2.395 1.013 2.56.122.167 1.742 2.666 4.229 3.74.587.257 1.05.408 1.41.523.595.19 1.13.162 1.558.1.475-.072 1.464-.6 1.673-1.178.205-.58.205-1.075.142-1.18-.061-.104-.227-.165-.475-.29Z"></path>
  </svg>
</button>
</div>
<style>
/* From Uiverse.io by csozidev - Tags: simple, neumorphism, button, hover, share, modern, hover effect, hoverme, simple button, hover button */
/* Cool share button made by: csozi | Website: english.csozi.hu*/

.buttons {
  position: relative;
  display: grid;
  place-items: center;
  height: fit-content;
  width: fit-content;
  transition: 0.3s;
  border-radius: 50%;
}

.buttons:hover {
  padding: 60px;
}

.buttons:hover .button {
  box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;
}

.main-button {
  position: relative;
  display: grid;
  place-items: center;
  padding: 10px;
  border: none;
  background: #e8e8e8;
  box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;
  border-radius: 50%;
  transition: 0.2s;
  z-index: 100;
}

.button {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 10px;
  border: none;
  background: #e8e8e8;
  box-shadow: 5px 5px 12px rgba(202, 202, 202, 0), -5px -5px 12px rgba(255, 255, 255, 0);
  transition: 0.3s;
  border-radius: 50%;
}

.discord-button:hover {
  background: #5865F2;
}

.buttons:hover .discord-button {
  translate: 70px 0px;
  box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;
}

.twitter-button:hover {
  background: #1CA1F1;
}

.buttons:hover .twitter-button {
  translate: 47px -47px;
  box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;
}

.reddit-button:hover {
  background: #FF4500;
}

.buttons:hover .reddit-button {
  translate: 0px -70px;
  box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;
}

.messenger-button:hover {
  background: #0093FF;
}

.buttons:hover .messenger-button {
  translate: -47px -47px;
  box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;
}

.pinterest-button:hover {
  background: #F0002A;
}

.buttons:hover .pinterest-button {
  translate: -70px 0px;
  box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;
}

.instagram-button:hover {
  background: #F914AF;
}

.buttons:hover .instagram-button {
  translate: -47px 47px;
  box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;
}

.snapchat-button:hover {
  background: #FFFC00;
}

.buttons:hover .snapchat-button {
  translate: 0px 70px;
  box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;
}

.whatsapp-button:hover {
  background: #25D366;
}

.buttons:hover .whatsapp-button {
  translate: 47px 47px;
  box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff;
}
</style>


================================================
FILE: Buttons/csozidev_pretty-snail-69.html
================================================
<button class="button">
  <svg viewBox="2.5 -15 13 13" xmlns="http://www.w3.org/2000/svg">
    <path
      fill="none"
      stroke-width="1"
      stroke="#000000"
      d="M 8 -7 C 9 -1 11.368 -2.531 12 -4 C 13 -6.6667 14 -9.3333 14.763 -11.565 C 15.381 -13.129 13.796 -14.529 12 -14 C 9.3333 -13 6.6667 -12 4.144 -10.825 C 1.613 -9.096 5.77 -7.45 7.828 -7.1 C 8.5757 -7.9023 9.3233 -8.7047 10.071 -9.507 C 9.385 -8.6703 8.699 -7.8337 8.013 -6.997"
    ></path>
  </svg>
  <p>Send message</p>
</button>

<style>
/* From Uiverse.io by csozidev  - Tags: simple, button, light, challenge, simple button */
.button {
  cursor: pointer;
  display: flex;
  height: 70px;
  width: 205px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  background: linear-gradient(0deg, #ebedeb, #ffffff);
  border-radius: 15px;
  position: relative;
  box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.3);
}

.button::before {
  content: "";
  position: absolute;
  width: 96%;
  background: linear-gradient(180deg, #ebedeb, #ffffff);
  height: 80%;
  border-radius: 100px;
  z-index: 5;
}

button::after {
  content: "";
  position: absolute;
  width: calc(100% + 6px);
  background: linear-gradient(0deg, #7e807e, #e3e6e4);
  height: calc(100% + 6px);
  z-index: -1;
  border-radius: 18px;
  top: -3px;
  left: -3px;
}

.button svg {
  stroke-linecap: round;
  width: 20px;
  z-index: 10;
}

.button p {
  white-space: nowrap;
  font-weight: 600;
  font-size: 20px;
  z-index: 10;
}

</style>
    

================================================
FILE: Buttons/csozidev_spotty-lion-8.html
================================================
<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 262" class="svg">
  <path fill="#4285F4" d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" class="blue"></path>
  <path fill="#34A853" d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" class="green"></path>
  <path fill="#FBBC05" d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" class="yellow"></path>
  <path fill="#EB4335" d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" class="red"></path>
</svg>
<span class="text">Continue with Google</span>
</button>
<style>
/* From Uiverse.io by csozidev - Tags: simple, flat design, animation, button, hover, animated, colorful */
/* Fancy Google hover button made by: csozi | Website: www.csozi.hu*/

.button {
  padding: 10px;
  font-weight: bold;
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: 35px;
  align-items: center;
  border: solid black 2px;
  outline: none;
}

.svg {
  height: 25px;
  margin-right: 10px;
}

.button .text {
  z-index: 10;
  font-size: 14px;
}

.button:hover .text {
  animation: text forwards 0.3s;
  /*color: white;*/
}

@keyframes text {
  from {
    color: black;
  }

  to {
    color: white;
  }
}

.svg {
  z-index: 6;
}

.button:hover::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 9%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: 300px;
  animation: wave1 2.5s ease-in-out forwards;
}

.button:hover::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 9%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: 300px;
  animation: wave2 2.5s ease-in-out forwards;
}

@keyframes wave1 {
  0% {
    z-index: 1;
    background: #EB4335;
    width: 0;
    height: 0;
    opacity: 1;
  }

  1% {
    z-index: 1;
    background: #EB4335;
    width: 0;
    height: 0;
    opacity: 1;
  }

  25% {
    z-index: 1;
    background: #EB4335;
    width: 800px;
    height: 800px;
    opacity: 1;
  }

  26% {
    z-index: 3;
    background: #34A853;
    width: 0;
    height: 0;
    opacity: 1;
  }

  50% {
    z-index: 3;
    background: #34A853;
    width: 800px;
    height: 800px;
    opacity: 1;
  }

  70% {
    z-index: 3;
    background: #34A853;
    width: 800px;
    height: 800px;
    opacity: 1;
  }

  100% {
    z-index: 3;
    background: #34A853;
    width: 800px;
    height: 800px;
    opacity: 1;
  }
}

@keyframes wave2 {
  0% {
    z-index: 2;
    background: #FBBC05;
    width: 0;
    height: 0;
    opacity: 1;
  }

  11% {
    z-index: 2;
    background: #FBBC05;
    width: 0;
    height: 0;
    opacity: 1;
  }

  35% {
    z-index: 2;
    background: #FBBC05;
    width: 800px;
    height: 800px;
    opacity: 1;
  }

  39% {
    z-index: 2;
    background: #FBBC05;
    width: 800px;
    height: 800px;
    opacity: 1;
  }

  40% {
    z-index: 4;
    background: #4285F4;
    width: 0;
    height: 0;
    opacity: 1;
  }

  64% {
    z-index: 4;
    background: #4285F4;
    width: 800px;
    height: 800px;
    opacity: 1;
  }

  100% {
    z-index: 4;
    background: #4285F4;
    width: 800px;
    height: 800px;
    opacity: 1;
  }
}

.button:hover .red {
  animation: disappear 0.1s forwards;
  animation-delay: 0.1s;
}

.button:hover .yellow {
  animation: disappear 0.1s forwards;
  animation-delay: 0.3s;
}

.button:hover .green {
  animation: disappear 0.1s forwards;
  animation-delay: 0.7s;
}

.button:hover .blue {
  animation: disappear 0.1s forwards;
  animation-delay: 1.1s;
}

@keyframes disappear {
  from {
    filter: brightness(1);
  }

  to {
    filter: brightness(100);
  }
}
</style>


================================================
FILE: Buttons/cssbuttons-io_brown-otter-21.html
================================================
<a class="fancy" href="#">
  <span class="top-key"></span>
  <span class="text">Buy Tickets</span>
  <span class="bottom-key-1"></span>
  <span class="bottom-key-2"></span>
</a>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: button */
.fancy {
 background-color: transparent;
 border: 2px solid #000;
 border-radius: 0;
 box-sizing: border-box;
 color: #fff;
 cursor: pointer;
 display: inline-block;
 float: right;
 font-weight: 700;
 letter-spacing: 0.05em;
 margin: 0;
 outline: none;
 overflow: visible;
 padding: 1.25em 2em;
 position: relative;
 text-align: center;
 text-decoration: none;
 text-transform: none;
 transition: all 0.3s ease-in-out;
 user-select: none;
 font-size: 13px;
}

.fancy::before {
 content: " ";
 width: 1.5625rem;
 height: 2px;
 background: black;
 top: 50%;
 left: 1.5em;
 position: absolute;
 transform: translateY(-50%);
 transform-origin: center;
 transition: background 0.3s linear, width 0.3s linear;
}

.fancy .text {
 font-size: 1.125em;
 line-height: 1.33333em;
 padding-left: 2em;
 display: block;
 text-align: left;
 transition: all 0.3s ease-in-out;
 text-transform: uppercase;
 text-decoration: none;
 color: black;
}

.fancy .top-key {
 height: 2px;
 width: 1.5625rem;
 top: -2px;
 left: 0.625rem;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, left 0.3s ease-out;
}

.fancy .bottom-key-1 {
 height: 2px;
 width: 1.5625rem;
 right: 1.875rem;
 bottom: -2px;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy .bottom-key-2 {
 height: 2px;
 width: 0.625rem;
 right: 0.625rem;
 bottom: -2px;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy:hover {
 color: white;
 background: black;
}

.fancy:hover::before {
 width: 0.9375rem;
 background: white;
}

.fancy:hover .text {
 color: white;
 padding-left: 1.5em;
}

.fancy:hover .top-key {
 left: -2px;
 width: 0px;
}

.fancy:hover .bottom-key-1,
 .fancy:hover .bottom-key-2 {
 right: 0;
 width: 0;
}
</style>


================================================
FILE: Buttons/cssbuttons-io_calm-tiger-42.html
================================================
<button class="button"> Get in touch
</button>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: button */
.button {
 display: inline-block;
 padding: 12px 24px;
 border: 1px solid #4f4f4f;
 border-radius: 4px;
 transition: all 0.2s ease-in;
 position: relative;
 overflow: hidden;
 font-size: 19px;
 color: black;
 z-index: 1;
}

.button:before {
 content: "";
 position: absolute;
 left: 50%;
 transform: translateX(-50%) scaleY(1) scaleX(1.25);
 top: 100%;
 width: 140%;
 height: 180%;
 background-color: rgba(0, 0, 0, 0.05);
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

.button:after {
 content: "";
 position: absolute;
 left: 55%;
 transform: translateX(-50%) scaleY(1) scaleX(1.45);
 top: 180%;
 width: 160%;
 height: 190%;
 background-color: #39bda7;
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

.button:hover {
 color: #ffffff;
 border: 1px solid #39bda7;
}

.button:hover:before {
 top: -35%;
 background-color: #39bda7;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.button:hover:after {
 top: -45%;
 background-color: #39bda7;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
</style>


================================================
FILE: Buttons/cssbuttons-io_evil-monkey-41.html
================================================
<button>
  <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front text"> Click me
  </span>
</button>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: button */
button {
 position: relative;
 border: none;
 background: transparent;
 padding: 0;
 cursor: pointer;
 outline-offset: 4px;
 transition: filter 250ms;
 user-select: none;
 touch-action: manipulation;
}

.shadow {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 12px;
 background: hsl(0deg 0% 0% / 0.25);
 will-change: transform;
 transform: translateY(2px);
 transition: transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

.edge {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 12px;
 background: linear-gradient(
    to left,
    hsl(340deg 100% 16%) 0%,
    hsl(340deg 100% 32%) 8%,
    hsl(340deg 100% 32%) 92%,
    hsl(340deg 100% 16%) 100%
  );
}

.front {
 display: block;
 position: relative;
 padding: 12px 27px;
 border-radius: 12px;
 font-size: 1.1rem;
 color: white;
 background: hsl(345deg 100% 47%);
 will-change: transform;
 transform: translateY(-4px);
 transition: transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

button:hover {
 filter: brightness(110%);
}

button:hover .front {
 transform: translateY(-6px);
 transition: transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

button:active .front {
 transform: translateY(-2px);
 transition: transform 34ms;
}

button:hover .shadow {
 transform: translateY(4px);
 transition: transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

button:active .shadow {
 transform: translateY(1px);
 transition: transform 34ms;
}

button:focus:not(:focus-visible) {
 outline: none;
}
</style>


================================================
FILE: Buttons/cssbuttons-io_fat-tiger-100.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: button, duolingo */
button {
 appearance: button;
 background-color: #1899D6;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 box-sizing: border-box;
 color: #FFFFFF;
 cursor: pointer;
 display: inline-block;
 font-size: 15px;
 font-weight: 700;
 letter-spacing: .8px;
 line-height: 20px;
 margin: 0;
 outline: none;
 overflow: visible;
 padding: 13px 19px;
 text-align: center;
 text-transform: uppercase;
 touch-action: manipulation;
 transform: translateZ(0);
 transition: filter .2s;
 user-select: none;
 -webkit-user-select: none;
 vertical-align: middle;
 white-space: nowrap;
}

button:after {
 background-clip: padding-box;
 background-color: #1CB0F6;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 bottom: -4px;
 content: "";
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 z-index: -1;
}

button:main, button:focus {
 user-select: auto;
}

button:hover:not(:disabled) {
 filter: brightness(1.1);
}

button:disabled {
 cursor: auto;
}

button:active:after {
 border-width: 0 0 0px;
}

button:active {
 padding-bottom: 10px;
}
</style>


================================================
FILE: Buttons/cssbuttons-io_friendly-dragon-76.html
================================================
<button class="btn"> Button
</button>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: button */
.btn {
 position: relative;
 font-size: 17px;
 text-transform: uppercase;
 text-decoration: none;
 padding: 1em 2.5em;
 display: inline-block;
 border-radius: 6em;
 transition: all .2s;
 border: none;
 font-family: inherit;
 font-weight: 500;
 color: black;
 background-color: white;
}

.btn:hover {
 transform: translateY(-3px);
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn:active {
 transform: translateY(-1px);
 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn::after {
 content: "";
 display: inline-block;
 height: 100%;
 width: 100%;
 border-radius: 100px;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 transition: all .4s;
}

.btn::after {
 background-color: #fff;
}

.btn:hover::after {
 transform: scaleX(1.4) scaleY(1.6);
 opacity: 0;
}
</style>


================================================
FILE: Buttons/cssbuttons-io_funny-dog-69.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: button, glow */
button {
 --glow-color: rgb(217, 176, 255);
 --glow-spread-color: rgba(191, 123, 255, 0.781);
 --enhanced-glow-color: rgb(231, 206, 255);
 --btn-color: rgb(100, 61, 136);
 border: .25em solid var(--glow-color);
 padding: 1em 3em;
 color: var(--glow-color);
 font-size: 15px;
 font-weight: bold;
 background-color: var(--btn-color);
 border-radius: 1em;
 outline: none;
 box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 1em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
 text-shadow: 0 0 .5em var(--glow-color);
 position: relative;
 transition: all 0.3s;
}

button::after {
 pointer-events: none;
 content: "";
 position: absolute;
 top: 120%;
 left: 0;
 height: 100%;
 width: 100%;
 background-color: var(--glow-spread-color);
 filter: blur(2em);
 opacity: .7;
 transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
}

button:hover {
 color: var(--btn-color);
 background-color: var(--glow-color);
 box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 2em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
}

button:active {
 box-shadow: 0 0 0.6em .25em var(--glow-color),
        0 0 2.5em 2em var(--glow-spread-color),
        inset 0 0 .5em .25em var(--glow-color);
}
</style>


================================================
FILE: Buttons/cssbuttons-io_massive-mayfly-74.html
================================================
<button class="learn-more">
  <span class="circle" aria-hidden="true">
  <span class="icon arrow"></span>
  </span>
  <span class="button-text">Learn More</span>
</button>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: button */
button {
 position: relative;
 display: inline-block;
 cursor: pointer;
 outline: none;
 border: 0;
 vertical-align: middle;
 text-decoration: none;
 background: transparent;
 padding: 0;
 font-size: inherit;
 font-family: inherit;
}

button.learn-more {
 width: 12rem;
 height: auto;
}

button.learn-more .circle {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: relative;
 display: block;
 margin: 0;
 width: 3rem;
 height: 3rem;
 background: #282936;
 border-radius: 1.625rem;
}

button.learn-more .circle .icon {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto;
 background: #fff;
}

button.learn-more .circle .icon.arrow {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 left: 0.625rem;
 width: 1.125rem;
 height: 0.125rem;
 background: none;
}

button.learn-more .circle .icon.arrow::before {
 position: absolute;
 content: "";
 top: -0.29rem;
 right: 0.0625rem;
 width: 0.625rem;
 height: 0.625rem;
 border-top: 0.125rem solid #fff;
 border-right: 0.125rem solid #fff;
 transform: rotate(45deg);
}

button.learn-more .button-text {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 0.75rem 0;
 margin: 0 0 0 1.85rem;
 color: #282936;
 font-weight: 700;
 line-height: 1.6;
 text-align: center;
 text-transform: uppercase;
}

button:hover .circle {
 width: 100%;
}

button:hover .circle .icon.arrow {
 background: #fff;
 transform: translate(1rem, 0);
}

button:hover .button-text {
 color: #fff;
}
</style>


================================================
FILE: Buttons/cssbuttons-io_nice-walrus-6.html
================================================
<button class="c-button c-button--gooey"> Hover me
  <div class="c-button__blobs">
  <div></div>
  <div></div>
  <div></div>
  </div>
</button>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: block; height: 0; width: 0;">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo"></feColorMatrix>
      <feBlend in="SourceGraphic" in2="goo"></feBlend>
    </filter>
  </defs>
</svg>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: button */
.c-button {
  color: #000;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 0.9em 1.6em;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 1;
}

.c-button--gooey {
  color: #06c8d9;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 4px solid #06c8d9;
  border-radius: 0;
  position: relative;
  transition: all 700ms ease;
}

.c-button--gooey .c-button__blobs {
  height: 100%;
  filter: url(#goo);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: -3px;
  right: -1px;
  z-index: -1;
}

.c-button--gooey .c-button__blobs div {
  background-color: #06c8d9;
  width: 34%;
  height: 100%;
  border-radius: 100%;
  position: absolute;
  transform: scale(1.4) translateY(125%) translateZ(0);
  transition: all 700ms ease;
}

.c-button--gooey .c-button__blobs div:nth-child(1) {
  left: -5%;
}

.c-button--gooey .c-button__blobs div:nth-child(2) {
  left: 30%;
  transition-delay: 60ms;
}

.c-button--gooey .c-button__blobs div:nth-child(3) {
  left: 66%;
  transition-delay: 25ms;
}

.c-button--gooey:hover {
  color: #fff;
}

.c-button--gooey:hover .c-button__blobs div {
  transform: scale(1.4) translateY(0) translateZ(0);
}
</style>


================================================
FILE: Buttons/cssbuttons-io_plastic-mule-29.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: button */
button {
 padding: 10px 40px;
 font-size: 18px;
 background-color: #008542;
 color: #fff;
 text-shadow: 0 2px 0 rgb(0 0 0 / 25%);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 position: relative;
 border: 0;
 z-index: 1;
 user-select: none;
 cursor: pointer;
 text-transform: uppercase;
 letter-spacing: 1px;
 white-space: unset;
 padding: .8rem 1.5rem;
 text-decoration: none;
 font-weight: 900;
 transition: all 0.7s cubic-bezier(0,.8,.26,.99);
}

button:before {
 position: absolute;
 pointer-events: none;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
 content: '';
 transition: .7s cubic-bezier(0,.8,.26,.99);
 z-index: -1;
 background-color: #008542!important;
 box-shadow: 0 -4px rgb(21 108 0 / 50%) inset, 0 4px rgb(100 253 31 / 99%) inset, -4px 0 rgb(100 253 31 / 50%) inset, 4px 0 rgb(21 108 0 / 50%) inset;
}

button:after {
 position: absolute;
 pointer-events: none;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
 content: '';
 box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%);
 transition: .7s cubic-bezier(0,.8,.26,.99);
}

button:hover:before {
 box-shadow: 0 -4px rgb(0 0 0 / 50%) inset, 0 4px rgb(255 255 255 / 20%) inset, -4px 0 rgb(255 255 255 / 20%) inset, 4px 0 rgb(0 0 0 / 50%) inset;
}

button:hover:after {
 box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%);
}

button:active {
 transform: translateY(4px);
}

button:active:after {
 box-shadow: 0 0px 0 0 rgb(0 0 0 / 15%);
}
</style>


================================================
FILE: Buttons/cssbuttons-io_purple-gecko-91.html
================================================
<div class="wrapper">
  <button> Button
  </button>
</div>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: button */
.wrapper {
 perspective: 500px;
 transform: rotatex(10deg);
 animation: rotateAngle 6s linear infinite;
 margin: auto;
 width: auto;
}

button {
 display: block;
 position: relative;
 margin: 0.5em 0;
 padding: 0.8em 2.2em;
 cursor: pointer;
 background: #FFFFFF;
 border: none;
 border-radius: 0.4em;
 text-transform: uppercase;
 font-size: 19px;
 font-family: "Work Sans", sans-serif;
 font-weight: 500;
 letter-spacing: 0.04em;
 mix-blend-mode: color-dodge;
 perspective: 500px;
 transform-style: preserve-3d;
}

button:before, button:after {
 --z: 0px;
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 content: "";
 width: 100%;
 height: 100%;
 opacity: 0;
 mix-blend-mode: inherit;
 border-radius: inherit;
 transform-style: preserve-3d;
 transform: translate3d(calc(var(--z) * 0px), calc(var(--z) * 0px), calc(var(--z) * 0px));
}

button span {
 mix-blend-mode: none;
 display: block;
}

button:after {
 background-color: #5D00FF;
}

button:before {
 background-color: #FF1731;
}

button:hover {
 background-color: #FFF65B;
 transition: background 0.3s 0.1s;
}

button:hover:before {
 --z: 0.04;
 animation: translateWobble 2.2s ease forwards;
}

button:hover:after {
 --z: -0.06;
 animation: translateWobble 2.2s ease forwards;
}

@keyframes rotateAngle {
 0% {
  transform: rotateY(0deg) rotateX(10deg);
  -webkit-animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
  animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
 }

 25% {
  transform: rotateY(20deg) rotateX(10deg);
 }

 50% {
  transform: rotateY(0deg) rotateX(10deg);
  -webkit-animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
  animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
 }

 75% {
  transform: rotateY(-20deg) rotateX(10deg);
 }

 100% {
  transform: rotateY(0deg) rotateX(10deg);
 }
}

@keyframes translateWobble {
 0% {
  opacity: 0;
  transform: translate3d(calc(var(--z) * 0px), calc(var(--z) * 0px), calc(var(--z) * 0px));
 }

 16% {
  transform: translate3d(calc(var(--z) * 160px), calc(var(--z) * 160px), calc(var(--z) * 160px));
 }

 28% {
  opacity: 1;
  transform: translate3d(calc(var(--z) * 70px), calc(var(--z) * 70px), calc(var(--z) * 70px));
 }

 44% {
  transform: translate3d(calc(var(--z) * 130px), calc(var(--z) * 130px), calc(var(--z) * 130px));
 }

 59% {
  transform: translate3d(calc(var(--z) * 85px), calc(var(--z) * 85px), calc(var(--z) * 85px));
 }

 73% {
  transform: translate3d(calc(var(--z) * 110px), calc(var(--z) * 110px), calc(var(--z) * 110px));
 }

 88% {
  opacity: 1;
  transform: translate3d(calc(var(--z) * 90px), calc(var(--z) * 90px), calc(var(--z) * 90px));
 }

 100% {
  opacity: 1;
  transform: translate3d(calc(var(--z) * 100px), calc(var(--z) * 100px), calc(var(--z) * 100px));
 }
}
</style>


================================================
FILE: Buttons/cssbuttons-io_slippery-jellyfish-67.html
================================================
<button> Hover me
</button>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: button */
button {
 --color: #560bad;
 font-family: inherit;
 display: inline-block;
 width: 8em;
 height: 2.6em;
 line-height: 2.5em;
 margin: 20px;
 position: relative;
 overflow: hidden;
 border: 2px solid var(--color);
 transition: color .5s;
 z-index: 1;
 font-size: 17px;
 border-radius: 6px;
 font-weight: 500;
 color: var(--color);
}

button:before {
 content: "";
 position: absolute;
 z-index: -1;
 background: var(--color);
 height: 150px;
 width: 200px;
 border-radius: 50%;
}

button:hover {
 color: #fff;
}

button:before {
 top: 100%;
 left: 100%;
 transition: all .7s;
}

button:hover:before {
 top: -30px;
 left: -30px;
}

button:active:before {
 background: #3a0ca3;
 transition: background 0s;
}
</style>


================================================
FILE: Buttons/cssbuttons-io_stale-rattlesnake-87.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: green, button, hover, active */
button {
  padding: 1.3em 3em;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #fff;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
}

button:hover {
  background-color: #23c483;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}

button:active {
  transform: translateY(-1px);
}
</style>


================================================
FILE: Buttons/cssbuttons-io_stupid-impala-51.html
================================================

<button class="noselect"><span class="text">Delete</span><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg></span></button>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: icon, red, button, delete */
button {
 width: 150px;
 height: 50px;
 cursor: pointer;
 display: flex;
 align-items: center;
 background: red;
 border: none;
 border-radius: 5px;
 box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
 background: #e62222;
}

button, button span {
 transition: 200ms;
}

button .text {
 transform: translateX(35px);
 color: white;
 font-weight: bold;
}

button .icon {
 position: absolute;
 border-left: 1px solid #c41b1b;
 transform: translateX(110px);
 height: 40px;
 width: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
}

button svg {
 width: 15px;
 fill: #eee;
}

button:hover {
 background: #ff3636;
}

button:hover .text {
 color: transparent;
}

button:hover .icon {
 width: 150px;
 border-left: none;
 transform: translateX(0);
}

button:focus {
 outline: none;
}

button:active .icon svg {
 transform: scale(0.8);
}
</style>


================================================
FILE: Buttons/cssbuttons-io_tame-panda-59.html
================================================
<button>
  <span class="button-content">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H24V24H0z" fill="none"></path><path d="M12.001 4.529c2.349-2.109 5.979-2.039 8.242.228 2.262 2.268 2.34 5.88.236 8.236l-8.48 8.492-8.478-8.492c-2.104-2.356-2.025-5.974.236-8.236 2.265-2.264 5.888-2.34 8.244-.228z" fill="currentColor"></path></svg> Ukraine
  </span>
</button>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: button, ukraine */
button {
 font-size: 17px;
 font-family: inherit;
 font-weight: 700;
 padding: 4px;
 border-radius: 20px;
 border: none;
 color: black;
 box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
 background: linear-gradient(0deg, rgba(255,213,0,1) 0%, rgba(255,213,0,1) 47%, rgba(0,91,187,1) 47%, rgba(0,91,187,1) 100%);
}

button .button-content {
 display: flex;
 align-items: center;
 background: white;
 padding: 0.7em 1.5em;
 padding-left: 1.2em;
 border-radius: 16px;
}

button svg {
 width: 22px;
 height: 22px;
 margin-right: 6px;
 color: #ff0000;
 transition: transform 0.3s;
}

button:hover svg {
 transform: scale(1.2);
}


</style>


================================================
FILE: Buttons/cssbuttons-io_weak-firefox-5.html
================================================
<button>
  <span class="transition"></span>
  <span class="gradient"></span>
  <span class="label">Button</span>
</button>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: button, ripple */
button {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 17px;
  padding: 1em 2.7em;
  font-weight: 500;
  background: #1F2937;
  color: white;
  border: none;
  position: relative;
  overflow: hidden;
  border-radius: 0.6em;
}

.gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0.6em;
  margin-top: -0.25em;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}

.label {
  position: relative;
  top: -1px;
}

.transition {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 500ms;
  background-color: rgba(16, 185, 129, 0.6);
  border-radius: 9999px;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

button:hover .transition {
  width: 14em;
  height: 14em;
}

button:active {
  transform: scale(0.97);
}
</style>


================================================
FILE: Buttons/cssbuttons-io_wonderful-baboon-62.html
================================================
<button>
  <span class="text">Button</span>
</button>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: gradient, button */
button {
 align-items: center;
 background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
 border: 0;
 border-radius: 8px;
 box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
 box-sizing: border-box;
 color: #FFFFFF;
 display: flex;
 font-family: Phantomsans, sans-serif;
 font-size: 18px;
 justify-content: center;
 line-height: 1em;
 max-width: 100%;
 min-width: 140px;
 padding: 3px;
 text-decoration: none;
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
 white-space: nowrap;
 cursor: pointer;
 transition: all .3s;
}

button:active,
button:hover {
 outline: 0;
}

button span {
 background-color: rgb(5, 6, 45);
 padding: 16px 24px;
 border-radius: 6px;
 width: 100%;
 height: 100%;
 transition: 300ms;
}

button:hover span {
 background: none;
}

button:active {
 transform: scale(0.9);
}
</style>


================================================
FILE: Buttons/cuatrofender_afraid-monkey-100.html
================================================
<button> Hover me.
</button>
<style>
/* From Uiverse.io by cuatrofender - Tags: button */
button {
 border: none;
 font-family: sans-serif;
 font-size: 17px;
 background: transparent;
 color: #006bb3;
 border: solid 1px rgba(0, 107, 179, 0.2);
 padding: 10px;
 border-radius: 4px;
 transition-duration: 0.2s;
}

button:before {
 content: "»";
 opacity: 0;
 margin-left: -15px;
 transition-duration: 0.2s;
}

button:hover:before {
 margin-left: 0px;
 opacity: 1;
}

button:hover {
 color: black;
 background: rgba(0, 0, 0, 0.02);
 border: solid 1px gainsboro;
}
</style>


================================================
FILE: Buttons/cybrejon_old-termite-43.html
================================================
<a
  ><svg
    viewBox="0 0 256 256"
    height="32"
    width="38"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M74.34 85.66a8 8 0 0 1 11.32-11.32L120 108.69V24a8 8 0 0 1 16 0v84.69l34.34-34.35a8 8 0 0 1 11.32 11.32l-48 48a8 8 0 0 1-11.32 0ZM240 136v64a16 16 0 0 1-16 16H32a16 16 0 0 1-16-16v-64a16 16 0 0 1 16-16h52.4a4 4 0 0 1 2.83 1.17L111 145a24 24 0 0 0 34 0l23.8-23.8a4 4 0 0 1 2.8-1.2H224a16 16 0 0 1 16 16m-40 32a12 12 0 1 0-12 12a12 12 0 0 0 12-12"
      fill="currentColor"
    ></path></svg
></a>

<style>
/* From Uiverse.io by cybrejon  - Tags: glassmorphism, button, download */
a {
  color: rgba(255, 255, 255, 0.692);
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.397);
  background: rgba(255, 255, 255, 0.068);
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 600;
  gap: 8px;
  border-radius: 5px;
  margin: 0 5px;
  transition: 0.2s;
  border: 1px solid transparent;
}

a:hover {
  border-color: rgba(255, 255, 255, 0.623);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.144),
    rgba(255, 255, 255, 0.247),
    rgba(255, 255, 255, 0.39)
  );
  box-shadow: 0 6px rgba(255, 255, 255, 0.623);
  transform: translateY(-6px);
}

a:active {
  transform: translateY(2px);
  box-shadow: none;
}

</style>
    

================================================
FILE: Buttons/d3uceY_dry-gecko-28.html
================================================
<button>
  <div class="overflow">
    <div class="text-container">Merry Christmas</div>
    <svg
      id="christmas-tree"
      viewBox="0 0 512 512"
      data-name="Layer 1"
      xmlns="http://www.w3.org/2000/svg"
      class="christmas-tree christmas-tree-1"
    >
      <path
        d="M285 406.03v88.47a10.004 10.004 0 0 1-10 10h-38a10.004 10.004 0 0 1-10-10v-88.47Z"
        fill="#d88a55"
      ></path>
      <path d="M285 406.03v69.46l-58-59.1v-10.36h58z" fill="#c57a44"></path>
      <circle fill="#fed402" r="22.5" cy="468" cx="370"></circle>
      <path
        d="M383.398 449.925a22.5 22.5 0 0 1-34.796 25.032 22.5 22.5 0 1 0 34.796-25.032Z"
        fill="#fac600"
      ></path>
      <circle fill="#fed402" r="22.5" cy="468" cx="142"></circle>
      <path
        d="M436.67 396.93a819.475 819.475 0 0 1-178.17 20.09 820.131 820.131 0 0 1-164.76-16.15c-6.41-1.29-12.56-2.62-18.45-3.95a8.538 8.538 0 0 1-4.1-2.15 5.655 5.655 0 0 1-.42-.43c0-.01 0-.01-.01-.01a7.541 7.541 0 0 1-.69-.94 9.171 9.171 0 0 1-.52-1.04c-.08-.22-.15-.43-.21-.65a.076.076 0 0 0-.01-.04c-.04-.18-.08-.37-.11-.56a.22.22 0 0 1-.01-.08c-.02-.14-.04-.28-.05-.42a6.602 6.602 0 0 1 0-.89 6.22 6.22 0 0 1 1.75-3.86l.84-.9L240.5 204.21l8.92-9.55a7.823 7.823 0 0 1 .66-.63 9.555 9.555 0 0 1 11.84 0 7.832 7.832 0 0 1 .66.63l106.03 113.56 10.32 11.05 62.16 66.58c3.69 3.96 1.36 9.77-4.42 11.08Z"
        fill="#46cc8d"
      ></path>
      <path
        d="M436.67 396.93a819.475 819.475 0 0 1-178.17 20.09 820.131 820.131 0 0 1-164.76-16.15c-6.41-1.29-12.56-2.62-18.45-3.95a8.538 8.538 0 0 1-4.1-2.15 5.655 5.655 0 0 1-.42-.43c0-.01 0-.01-.01-.01a7.541 7.541 0 0 1-.69-.94 9.171 9.171 0 0 1-.52-1.04c-.08-.22-.15-.43-.21-.65a.076.076 0 0 0-.01-.04c-.04-.18-.08-.37-.11-.56a.22.22 0 0 1-.01-.08c-.02-.14-.04-.28-.05-.42a6.602 6.602 0 0 1 0-.89 617.144 617.144 0 0 0 67.78 10.19 576.568 576.568 0 0 0 76.56 2.12c60.36-2.37 124.42-16.24 158.32-24.61a14.913 14.913 0 0 0 7.31-24.66l-19.78-21.2-10.5-11.24-108.35-116.1 8.92-9.55a7.823 7.823 0 0 1 .66-.63 8.98 8.98 0 0 1 11.84 0 7.832 7.832 0 0 1 .66.63l106.03 113.56 10.32 11.05 62.16 66.58c3.69 3.96 1.36 9.77-4.42 11.08Z"
        fill="#00c27a"
      ></path>
      <path
        d="M409.45 301.52a695.395 695.395 0 0 1-151.32 17.06 695.321 695.321 0 0 1-155.63-17.07c-4.89-1.11-6.84-6.05-3.72-9.4l62.83-67.29 88.8-95.11a7.993 7.993 0 0 1 11.18 0l88.79 95.11 62.83 67.29c3.14 3.36 1.16 8.3-3.76 9.41Z"
        fill="#46cc8d"
      ></path>
      <path
        d="M409.45 301.52a704.636 704.636 0 0 1-151.32 17.06 695.321 695.321 0 0 1-155.63-17.07c-3.89-.88-5.92-4.19-5.01-7.19a5.482 5.482 0 0 1 1.29-2.21l62.83-67.29 7.01-7.51 10.24-10.97 61.64-66.02 9.91-10.61a7.993 7.993 0 0 1 11.18 0l88.79 95.11 60.96 65.29h.01l1.86 2c3.14 3.36 1.16 8.3-3.76 9.41Z"
        fill="#46cc8d"
      ></path>
      <path
        d="M409.45 301.52q-7.68 1.74-16.07 3.43a696.535 696.535 0 0 1-135.25 13.63 695.321 695.321 0 0 1-155.63-17.07c-3.89-.88-5.92-4.19-5.01-7.19a698.084 698.084 0 0 0 115.64 9.26c28.51-.08 64.07-5.82 93.95-11.93 12.54-2.57 24.07-5.2 33.66-7.51 1.26-.3 2.48-.59 3.66-.88a14.503 14.503 0 0 0 7.15-23.99l-46.17-49.45-64.88-69.5 9.91-10.61a7.993 7.993 0 0 1 11.18 0l88.79 95.11 60.97 65.29 1.86 2c3.14 3.36 1.16 8.3-3.76 9.41Z"
        fill="#00c27a"
      ></path>
      <circle fill="#0067c5" r="7.5" cy="365.414" cx="146.433"></circle>
      <circle fill="#00c27a" r="22.5" cy="376.542" cx="285"></circle>
      <path
        d="M134.43 197.67a4.263 4.263 0 0 0-.71 1.02 3.535 3.535 0 0 0-.16.34c-.04.12-.09.24-.12.36-.68 2.31.89 4.84 3.89 5.52q6.855 1.56 14.45 3.06a276.19 276.19 0 0 0 32.41-5.52c-17.94-.89-34.59-2.61-49.76-4.78zm152.91-63.44 10.25 10.98q8.58-7.365 16.54-15.49l-10.23-10.96a2.612 2.612 0 0 0-.25.23q-7.83 7.995-16.31 15.24z"
        fill="#f4d902"
      ></path>
      <circle fill="#e53950" r="22.5" cy="369.042" cx="276.328"></circle>
      <circle fill="#00c27a" r="22.5" cy="327.45" cx="194.053"></circle>
      <circle fill="#e53950" r="22.5" cy="318.588" cx="186.413"></circle>
      <path
        d="M155.398 449.925a22.5 22.5 0 0 1-34.796 25.032 22.5 22.5 0 1 0 34.796-25.032Z"
        fill="#fac600"
      ></path>
      <path
        d="M374.64 204.92a537.51 537.51 0 0 1-117 13.19 538.681 538.681 0 0 1-105.86-10.14q-7.59-1.5-14.45-3.06c-3-.68-4.57-3.21-3.89-5.52.03-.12.08-.24.12-.36a3.535 3.535 0 0 1 .16-.34 4.263 4.263 0 0 1 .71-1.02l.02-.02 3.28-3.51L240.5 84.06l11.18-11.97a6.176 6.176 0 0 1 8.64 0l43.58 46.67 10.23 10.96 63.42 67.93c2.42 2.59.89 6.41-2.91 7.27Z"
        fill="#46cc8d"
      ></path>
      <path
        d="M374.64 204.92a537.51 537.51 0 0 1-117 13.19 538.681 538.681 0 0 1-105.86-10.14q-7.59-1.5-14.45-3.06c-3-.68-4.57-3.21-3.89-5.52.03-.12.08-.24.12-.36a3.535 3.535 0 0 1 .16-.34 4.263 4.263 0 0 1 .71-1.02 540.684 540.684 0 0 0 78.21 5.44c28.6-.08 66.39-7.53 91.83-13.41a16.884 16.884 0 0 0 8.55-27.97l-15.43-16.52-10.25-10.98-46.84-50.17 11.18-11.97a5.914 5.914 0 0 1 8.64 0l43.58 46.67 10.23 10.96 63.42 67.93c2.42 2.59.89 6.41-2.91 7.27Z"
        fill="#00c27a"
      ></path>
      <circle fill="#00c27a" r="22.5" cy="230.47" cx="300.735"></circle>
      <circle fill="#e53950" r="22.5" cy="220.148" cx="294.064"></circle>
      <path
        d="m259.605 9.741 9.885 20.03a4.02 4.02 0 0 0 3.027 2.199l22.104 3.212a4.02 4.02 0 0 1 2.228 6.857l-15.994 15.59a4.02 4.02 0 0 0-1.157 3.559l3.776 22.014a4.02 4.02 0 0 1-5.833 4.238l-19.77-10.393a4.02 4.02 0 0 0-3.742 0L234.36 87.44a4.02 4.02 0 0 1-5.833-4.238l3.776-22.014a4.02 4.02 0 0 0-1.157-3.558l-15.994-15.591a4.02 4.02 0 0 1 2.228-6.857l22.104-3.212a4.02 4.02 0 0 0 3.027-2.2l9.885-20.029a4.02 4.02 0 0 1 7.21 0Z"
        fill="#fac600"
      ></path>
      <path
        d="M280.306 346.9a22.489 22.489 0 0 1-21.054 36.785 22.497 22.497 0 1 0 21.054-36.785zm17.678-149.073a22.489 22.489 0 0 1-21.053 36.785 22.497 22.497 0 1 0 21.053-36.785zM190.39 296.445a22.489 22.489 0 0 1-21.053 36.785 22.497 22.497 0 1 0 21.053-36.785z"
        fill="#ca2e43"
      ></path>
      <path
        d="M230.246 73.174c1.094.087 2.196.144 3.313.144a41.522 41.522 0 0 0 41.514-40.977l-2.556-.371a4.02 4.02 0 0 1-3.027-2.2l-9.885-20.029a4.02 4.02 0 0 0-7.21 0l-9.885 20.03a4.02 4.02 0 0 1-3.027 2.199l-22.104 3.212a4.02 4.02 0 0 0-2.228 6.857l15.994 15.59a4.02 4.02 0 0 1 1.157 3.559Z"
        fill="#fed402"
      ></path>
      <path
        d="M309.005 172.364a7.5 7.5 0 1 0-7.5-7.5 7.5 7.5 0 0 0 7.5 7.5Zm32.787 98.632a7.5 7.5 0 1 0-7.5-7.5 7.5 7.5 0 0 0 7.5 7.5ZM446.57 380.73l-62.034-66.442q13.352-2.477 26.572-5.46a13.958 13.958 0 0 0 10.554-9.38 12.65 12.65 0 0 0-2.97-12.46l-65.432-70.08q11.608-2.098 23.033-4.678a12.637 12.637 0 0 0 9.411-8.412 11.461 11.461 0 0 0-2.68-11.294L288.414 91.19a11.435 11.435 0 0 0 2.451-9.258l-3.467-20.212 14.686-14.314a11.52 11.52 0 0 0-6.385-19.65l-20.294-2.948-9.075-18.389a11.52 11.52 0 0 0-20.662 0l-9.075 18.389-20.292 2.949a11.52 11.52 0 0 0-6.386 19.65L224.6 61.72l-3.467 20.21a11.436 11.436 0 0 0 2.45 9.258l-94.615 101.337a11.471 11.471 0 0 0-2.68 11.303c.025.084.066.16.094.243a7.418 7.418 0 0 0 .41 1.06 12.733 12.733 0 0 0 8.876 7.093q11.464 2.596 23.063 4.688L93.3 286.988a12.664 12.664 0 0 0-2.97 12.474 13.912 13.912 0 0 0 10.514 9.357q13.18 2.986 26.62 5.466L65.427 380.73a13.593 13.593 0 0 0-3.199 13.385c.06.196.132.386.2.578.02.057.039.114.06.17a15.144 15.144 0 0 0 11.142 9.365q30.028 6.8 60.632 11.316l.184 23.416a30 30 0 1 0 15.001-.027l-.167-21.301q34.891 4.519 70.207 6.076l.011 70.788a17.52 17.52 0 0 0 17.5 17.5h38a17.52 17.52 0 0 0 17.5-17.5v-70.778q35.274-1.547 70.218-6.083l-.167 21.298a30 30 0 1 0 15 .027l.185-23.417q30.551-4.529 60.587-11.305a15.118 15.118 0 0 0 11.448-10.14 13.574 13.574 0 0 0-3.198-13.368Zm-45.476-90.611a346.898 346.898 0 0 1-129.87-26.808 346.569 346.569 0 0 1-71.777-40.63 549.109 549.109 0 0 0 56.558 2.932c.55 0 1.107 0 1.658-.003 2.29-.007 4.594-.03 6.895-.065a29.993 29.993 0 0 0 59.472-4.166c3.812-.477 7.62-1.007 11.423-1.565Zm-122.032-69.974a15 15 0 1 1 15 15 15.017 15.017 0 0 1-15-15ZM240.56 39.388a11.517 11.517 0 0 0 8.673-6.302l6.765-13.707 6.765 13.706a11.516 11.516 0 0 0 8.674 6.303l15.126 2.198-10.947 10.67a11.518 11.518 0 0 0-3.312 10.195l2.584 15.067-13.527-7.112a11.512 11.512 0 0 0-10.723-.002l-13.53 7.114 2.584-15.067a11.52 11.52 0 0 0-3.314-10.197l-10.945-10.668Zm-91.707 153.817L244.837 90.4l11.161-5.867 11.156 5.865 31.4 33.63a251.698 251.698 0 0 1-31.351 25.758 7.5 7.5 0 1 0 8.547 12.328 266.817 266.817 0 0 0 33.04-27.121l59.437 63.66a528.643 528.643 0 0 1-47.381 8.002 29.985 29.985 0 0 0-55.19 3.865c-2.682.048-5.367.083-8.038.09q-.807.003-1.613.003a532.956 532.956 0 0 1-80.883-6.175 266.515 266.515 0 0 0 72.824-25.494 7.5 7.5 0 0 0-6.958-13.289 253.71 253.71 0 0 1-92.135 27.55Zm-42.265 101.531 67.773-72.589a362.229 362.229 0 0 0 91.084 55.005 360.646 360.646 0 0 0 97.868 25.55A691.461 691.461 0 0 1 258.1 311.08c-14.266.027-28.7-.391-42.99-1.23a29.994 29.994 0 0 0-55.122-5.46 684.293 684.293 0 0 1-53.4-9.654Zm94.823 23.848a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm-44.413 149.412a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm120.5 26.5a2.503 2.503 0 0 1-2.5 2.5h-38a2.503 2.503 0 0 1-2.5-2.5l-.01-70.264q10.75.278 21.514.288a832.61 832.61 0 0 0 21.497-.295Zm107.5-26.5a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm-126.518-58.48a814.694 814.694 0 0 1-125.93-9.384 508.569 508.569 0 0 0 62.85-7.465 7.5 7.5 0 0 0-2.697-14.756 498.364 498.364 0 0 1-111.167 7.546l63.605-68.126q5.637.896 11.281 1.708a29.994 29.994 0 0 0 59.31 5.876 711.95 711.95 0 0 0 40.272 1.168q1.071 0 2.141-.003a707.217 707.217 0 0 0 91.492-6.235 488.86 488.86 0 0 1-53.323 26.846 29.975 29.975 0 0 0-49.686 18.131 486.261 486.261 0 0 1-22.239 6.2 7.5 7.5 0 1 0 3.677 14.542 501.986 501.986 0 0 0 20.328-5.604 29.992 29.992 0 0 0 56.331-20.57 505.019 505.019 0 0 0 67.863-35.92l61.868 66.264a811.908 811.908 0 0 1-175.976 19.782Zm32.846-40.478a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm70.672-7.5a7.5 7.5 0 1 0 7.5 7.5 7.5 7.5 0 0 0-7.5-7.5Zm-180.757-91.8a7.5 7.5 0 1 0-7.5-7.5 7.5 7.5 0 0 0 7.5 7.5Zm53.257-140.52a7.5 7.5 0 1 0 7.5 7.5 7.5 7.5 0 0 0-7.5-7.5ZM146.431 357.91a7.5 7.5 0 1 0 7.5 7.5 7.5 7.5 0 0 0-7.5-7.5Z"
        fill="#282828"
      ></path>
    </svg>
    <svg
      id="christmas-tree"
      viewBox="0 0 512 512"
      data-name="Layer 1"
      xmlns="http://www.w3.org/2000/svg"
      class="christmas-tree christmas-tree-2"
    >
      <path
        d="M285 406.03v88.47a10.004 10.004 0 0 1-10 10h-38a10.004 10.004 0 0 1-10-10v-88.47Z"
        fill="#d88a55"
      ></path>
      <path d="M285 406.03v69.46l-58-59.1v-10.36h58z" fill="#c57a44"></path>
      <circle fill="#fed402" r="22.5" cy="468" cx="370"></circle>
      <path
        d="M383.398 449.925a22.5 22.5 0 0 1-34.796 25.032 22.5 22.5 0 1 0 34.796-25.032Z"
        fill="#fac600"
      ></path>
      <circle fill="#fed402" r="22.5" cy="468" cx="142"></circle>
      <path
        d="M436.67 396.93a819.475 819.475 0 0 1-178.17 20.09 820.131 820.131 0 0 1-164.76-16.15c-6.41-1.29-12.56-2.62-18.45-3.95a8.538 8.538 0 0 1-4.1-2.15 5.655 5.655 0 0 1-.42-.43c0-.01 0-.01-.01-.01a7.541 7.541 0 0 1-.69-.94 9.171 9.171 0 0 1-.52-1.04c-.08-.22-.15-.43-.21-.65a.076.076 0 0 0-.01-.04c-.04-.18-.08-.37-.11-.56a.22.22 0 0 1-.01-.08c-.02-.14-.04-.28-.05-.42a6.602 6.602 0 0 1 0-.89 6.22 6.22 0 0 1 1.75-3.86l.84-.9L240.5 204.21l8.92-9.55a7.823 7.823 0 0 1 .66-.63 9.555 9.555 0 0 1 11.84 0 7.832 7.832 0 0 1 .66.63l106.03 113.56 10.32 11.05 62.16 66.58c3.69 3.96 1.36 9.77-4.42 11.08Z"
        fill="#46cc8d"
      ></path>
      <path
        d="M436.67 396.93a819.475 819.475 0 0 1-178.17 20.09 820.131 820.131 0 0 1-164.76-16.15c-6.41-1.29-12.56-2.62-18.45-3.95a8.538 8.538 0 0 1-4.1-2.15 5.655 5.655 0 0 1-.42-.43c0-.01 0-.01-.01-.01a7.541 7.541 0 0 1-.69-.94 9.171 9.171 0 0 1-.52-1.04c-.08-.22-.15-.43-.21-.65a.076.076 0 0 0-.01-.04c-.04-.18-.08-.37-.11-.56a.22.22 0 0 1-.01-.08c-.02-.14-.04-.28-.05-.42a6.602 6.602 0 0 1 0-.89 617.144 617.144 0 0 0 67.78 10.19 576.568 576.568 0 0 0 76.56 2.12c60.36-2.37 124.42-16.24 158.32-24.61a14.913 14.913 0 0 0 7.31-24.66l-19.78-21.2-10.5-11.24-108.35-116.1 8.92-9.55a7.823 7.823 0 0 1 .66-.63 8.98 8.98 0 0 1 11.84 0 7.832 7.832 0 0 1 .66.63l106.03 113.56 10.32 11.05 62.16 66.58c3.69 3.96 1.36 9.77-4.42 11.08Z"
        fill="#00c27a"
      ></path>
      <path
        d="M409.45 301.52a695.395 695.395 0 0 1-151.32 17.06 695.321 695.321 0 0 1-155.63-17.07c-4.89-1.11-6.84-6.05-3.72-9.4l62.83-67.29 88.8-95.11a7.993 7.993 0 0 1 11.18 0l88.79 95.11 62.83 67.29c3.14 3.36 1.16 8.3-3.76 9.41Z"
        fill="#46cc8d"
      ></path>
      <path
        d="M409.45 301.52a704.636 704.636 0 0 1-151.32 17.06 695.321 695.321 0 0 1-155.63-17.07c-3.89-.88-5.92-4.19-5.01-7.19a5.482 5.482 0 0 1 1.29-2.21l62.83-67.29 7.01-7.51 10.24-10.97 61.64-66.02 9.91-10.61a7.993 7.993 0 0 1 11.18 0l88.79 95.11 60.96 65.29h.01l1.86 2c3.14 3.36 1.16 8.3-3.76 9.41Z"
        fill="#46cc8d"
      ></path>
      <path
        d="M409.45 301.52q-7.68 1.74-16.07 3.43a696.535 696.535 0 0 1-135.25 13.63 695.321 695.321 0 0 1-155.63-17.07c-3.89-.88-5.92-4.19-5.01-7.19a698.084 698.084 0 0 0 115.64 9.26c28.51-.08 64.07-5.82 93.95-11.93 12.54-2.57 24.07-5.2 33.66-7.51 1.26-.3 2.48-.59 3.66-.88a14.503 14.503 0 0 0 7.15-23.99l-46.17-49.45-64.88-69.5 9.91-10.61a7.993 7.993 0 0 1 11.18 0l88.79 95.11 60.97 65.29 1.86 2c3.14 3.36 1.16 8.3-3.76 9.41Z"
        fill="#00c27a"
      ></path>
      <circle fill="#0067c5" r="7.5" cy="365.414" cx="146.433"></circle>
      <circle fill="#00c27a" r="22.5" cy="376.542" cx="285"></circle>
      <path
        d="M134.43 197.67a4.263 4.263 0 0 0-.71 1.02 3.535 3.535 0 0 0-.16.34c-.04.12-.09.24-.12.36-.68 2.31.89 4.84 3.89 5.52q6.855 1.56 14.45 3.06a276.19 276.19 0 0 0 32.41-5.52c-17.94-.89-34.59-2.61-49.76-4.78zm152.91-63.44 10.25 10.98q8.58-7.365 16.54-15.49l-10.23-10.96a2.612 2.612 0 0 0-.25.23q-7.83 7.995-16.31 15.24z"
        fill="#f4d902"
      ></path>
      <circle fill="#e53950" r="22.5" cy="369.042" cx="276.328"></circle>
      <circle fill="#00c27a" r="22.5" cy="327.45" cx="194.053"></circle>
      <circle fill="#e53950" r="22.5" cy="318.588" cx="186.413"></circle>
      <path
        d="M155.398 449.925a22.5 22.5 0 0 1-34.796 25.032 22.5 22.5 0 1 0 34.796-25.032Z"
        fill="#fac600"
      ></path>
      <path
        d="M374.64 204.92a537.51 537.51 0 0 1-117 13.19 538.681 538.681 0 0 1-105.86-10.14q-7.59-1.5-14.45-3.06c-3-.68-4.57-3.21-3.89-5.52.03-.12.08-.24.12-.36a3.535 3.535 0 0 1 .16-.34 4.263 4.263 0 0 1 .71-1.02l.02-.02 3.28-3.51L240.5 84.06l11.18-11.97a6.176 6.176 0 0 1 8.64 0l43.58 46.67 10.23 10.96 63.42 67.93c2.42 2.59.89 6.41-2.91 7.27Z"
        fill="#46cc8d"
      ></path>
      <path
        d="M374.64 204.92a537.51 537.51 0 0 1-117 13.19 538.681 538.681 0 0 1-105.86-10.14q-7.59-1.5-14.45-3.06c-3-.68-4.57-3.21-3.89-5.52.03-.12.08-.24.12-.36a3.535 3.535 0 0 1 .16-.34 4.263 4.263 0 0 1 .71-1.02 540.684 540.684 0 0 0 78.21 5.44c28.6-.08 66.39-7.53 91.83-13.41a16.884 16.884 0 0 0 8.55-27.97l-15.43-16.52-10.25-10.98-46.84-50.17 11.18-11.97a5.914 5.914 0 0 1 8.64 0l43.58 46.67 10.23 10.96 63.42 67.93c2.42 2.59.89 6.41-2.91 7.27Z"
        fill="#00c27a"
      ></path>
      <circle fill="#00c27a" r="22.5" cy="230.47" cx="300.735"></circle>
      <circle fill="#e53950" r="22.5" cy="220.148" cx="294.064"></circle>
      <path
        d="m259.605 9.741 9.885 20.03a4.02 4.02 0 0 0 3.027 2.199l22.104 3.212a4.02 4.02 0 0 1 2.228 6.857l-15.994 15.59a4.02 4.02 0 0 0-1.157 3.559l3.776 22.014a4.02 4.02 0 0 1-5.833 4.238l-19.77-10.393a4.02 4.02 0 0 0-3.742 0L234.36 87.44a4.02 4.02 0 0 1-5.833-4.238l3.776-22.014a4.02 4.02 0 0 0-1.157-3.558l-15.994-15.591a4.02 4.02 0 0 1 2.228-6.857l22.104-3.212a4.02 4.02 0 0 0 3.027-2.2l9.885-20.029a4.02 4.02 0 0 1 7.21 0Z"
        fill="#fac600"
      ></path>
      <path
        d="M280.306 346.9a22.489 22.489 0 0 1-21.054 36.785 22.497 22.497 0 1 0 21.054-36.785zm17.678-149.073a22.489 22.489 0 0 1-21.053 36.785 22.497 22.497 0 1 0 21.053-36.785zM190.39 296.445a22.489 22.489 0 0 1-21.053 36.785 22.497 22.497 0 1 0 21.053-36.785z"
        fill="#ca2e43"
      ></path>
      <path
        d="M230.246 73.174c1.094.087 2.196.144 3.313.144a41.522 41.522 0 0 0 41.514-40.977l-2.556-.371a4.02 4.02 0 0 1-3.027-2.2l-9.885-20.029a4.02 4.02 0 0 0-7.21 0l-9.885 20.03a4.02 4.02 0 0 1-3.027 2.199l-22.104 3.212a4.02 4.02 0 0 0-2.228 6.857l15.994 15.59a4.02 4.02 0 0 1 1.157 3.559Z"
        fill="#fed402"
      ></path>
      <path
        d="M309.005 172.364a7.5 7.5 0 1 0-7.5-7.5 7.5 7.5 0 0 0 7.5 7.5Zm32.787 98.632a7.5 7.5 0 1 0-7.5-7.5 7.5 7.5 0 0 0 7.5 7.5ZM446.57 380.73l-62.034-66.442q13.352-2.477 26.572-5.46a13.958 13.958 0 0 0 10.554-9.38 12.65 12.65 0 0 0-2.97-12.46l-65.432-70.08q11.608-2.098 23.033-4.678a12.637 12.637 0 0 0 9.411-8.412 11.461 11.461 0 0 0-2.68-11.294L288.414 91.19a11.435 11.435 0 0 0 2.451-9.258l-3.467-20.212 14.686-14.314a11.52 11.52 0 0 0-6.385-19.65l-20.294-2.948-9.075-18.389a11.52 11.52 0 0 0-20.662 0l-9.075 18.389-20.292 2.949a11.52 11.52 0 0 0-6.386 19.65L224.6 61.72l-3.467 20.21a11.436 11.436 0 0 0 2.45 9.258l-94.615 101.337a11.471 11.471 0 0 0-2.68 11.303c.025.084.066.16.094.243a7.418 7.418 0 0 0 .41 1.06 12.733 12.733 0 0 0 8.876 7.093q11.464 2.596 23.063 4.688L93.3 286.988a12.664 12.664 0 0 0-2.97 12.474 13.912 13.912 0 0 0 10.514 9.357q13.18 2.986 26.62 5.466L65.427 380.73a13.593 13.593 0 0 0-3.199 13.385c.06.196.132.386.2.578.02.057.039.114.06.17a15.144 15.144 0 0 0 11.142 9.365q30.028 6.8 60.632 11.316l.184 23.416a30 30 0 1 0 15.001-.027l-.167-21.301q34.891 4.519 70.207 6.076l.011 70.788a17.52 17.52 0 0 0 17.5 17.5h38a17.52 17.52 0 0 0 17.5-17.5v-70.778q35.274-1.547 70.218-6.083l-.167 21.298a30 30 0 1 0 15 .027l.185-23.417q30.551-4.529 60.587-11.305a15.118 15.118 0 0 0 11.448-10.14 13.574 13.574 0 0 0-3.198-13.368Zm-45.476-90.611a346.898 346.898 0 0 1-129.87-26.808 346.569 346.569 0 0 1-71.777-40.63 549.109 549.109 0 0 0 56.558 2.932c.55 0 1.107 0 1.658-.003 2.29-.007 4.594-.03 6.895-.065a29.993 29.993 0 0 0 59.472-4.166c3.812-.477 7.62-1.007 11.423-1.565Zm-122.032-69.974a15 15 0 1 1 15 15 15.017 15.017 0 0 1-15-15ZM240.56 39.388a11.517 11.517 0 0 0 8.673-6.302l6.765-13.707 6.765 13.706a11.516 11.516 0 0 0 8.674 6.303l15.126 2.198-10.947 10.67a11.518 11.518 0 0 0-3.312 10.195l2.584 15.067-13.527-7.112a11.512 11.512 0 0 0-10.723-.002l-13.53 7.114 2.584-15.067a11.52 11.52 0 0 0-3.314-10.197l-10.945-10.668Zm-91.707 153.817L244.837 90.4l11.161-5.867 11.156 5.865 31.4 33.63a251.698 251.698 0 0 1-31.351 25.758 7.5 7.5 0 1 0 8.547 12.328 266.817 266.817 0 0 0 33.04-27.121l59.437 63.66a528.643 528.643 0 0 1-47.381 8.002 29.985 29.985 0 0 0-55.19 3.865c-2.682.048-5.367.083-8.038.09q-.807.003-1.613.003a532.956 532.956 0 0 1-80.883-6.175 266.515 266.515 0 0 0 72.824-25.494 7.5 7.5 0 0 0-6.958-13.289 253.71 253.71 0 0 1-92.135 27.55Zm-42.265 101.531 67.773-72.589a362.229 362.229 0 0 0 91.084 55.005 360.646 360.646 0 0 0 97.868 25.55A691.461 691.461 0 0 1 258.1 311.08c-14.266.027-28.7-.391-42.99-1.23a29.994 29.994 0 0 0-55.122-5.46 684.293 684.293 0 0 1-53.4-9.654Zm94.823 23.848a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm-44.413 149.412a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm120.5 26.5a2.503 2.503 0 0 1-2.5 2.5h-38a2.503 2.503 0 0 1-2.5-2.5l-.01-70.264q10.75.278 21.514.288a832.61 832.61 0 0 0 21.497-.295Zm107.5-26.5a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm-126.518-58.48a814.694 814.694 0 0 1-125.93-9.384 508.569 508.569 0 0 0 62.85-7.465 7.5 7.5 0 0 0-2.697-14.756 498.364 498.364 0 0 1-111.167 7.546l63.605-68.126q5.637.896 11.281 1.708a29.994 29.994 0 0 0 59.31 5.876 711.95 711.95 0 0 0 40.272 1.168q1.071 0 2.141-.003a707.217 707.217 0 0 0 91.492-6.235 488.86 488.86 0 0 1-53.323 26.846 29.975 29.975 0 0 0-49.686 18.131 486.261 486.261 0 0 1-22.239 6.2 7.5 7.5 0 1 0 3.677 14.542 501.986 501.986 0 0 0 20.328-5.604 29.992 29.992 0 0 0 56.331-20.57 505.019 505.019 0 0 0 67.863-35.92l61.868 66.264a811.908 811.908 0 0 1-175.976 19.782Zm32.846-40.478a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm70.672-7.5a7.5 7.5 0 1 0 7.5 7.5 7.5 7.5 0 0 0-7.5-7.5Zm-180.757-91.8a7.5 7.5 0 1 0-7.5-7.5 7.5 7.5 0 0 0 7.5 7.5Zm53.257-140.52a7.5 7.5 0 1 0 7.5 7.5 7.5 7.5 0 0 0-7.5-7.5ZM146.431 357.91a7.5 7.5 0 1 0 7.5 7.5 7.5 7.5 0 0 0-7.5-7.5Z"
        fill="#282828"
      ></path>
    </svg>
    <div class="cloud-container">
      <svg
        preserveAspectRatio="xMidYMid meet"
        viewBox="0 0 50.000000 50.000000"
        height="20px"
        width="20px"
        xmlns="http://www.w3.org/2000/svg"
        version="1.0"
        class="cloud"
      >
        <g
          stroke="none"
          fill="#fff"
          transform="translate(0.000000,50.000000) scale(0.100000,-0.100000)"
        >
          <path
            d="M204 378 c-28 -25 -44 -32 -69 -29 -26 2 -37 -4 -54 -26 -12 -15 -35
                   -43 -51 -60 -32 -35 -37 -66 -18 -108 22 -49 51 -55 248 -55 l182 0 29 29 c46
                   46 33 119 -26 141 -15 6 -25 20 -29 44 -4 22 -19 46 -42 65 -29 26 -43 31 -84
                   31 -41 0 -55 -5 -86 -32z"
          ></path>
        </g>
      </svg>

      <svg
        preserveAspectRatio="xMidYMid meet"
        viewBox="0 0 50.000000 50.000000"
        height="20px"
        width="20px"
        xmlns="http://www.w3.org/2000/svg"
        version="1.0"
        class="cloud"
      >
        <g
          stroke="none"
          fill="#fff"
          transform="translate(0.000000,50.000000) scale(0.100000,-0.100000)"
        >
          <path
            d="M204 378 c-28 -25 -44 -32 -69 -29 -26 2 -37 -4 -54 -26 -12 -15 -35
        -43 -51 -60 -32 -35 -37 -66 -18 -108 22 -49 51 -55 248 -55 l182 0 29 29 c46
        46 33 119 -26 141 -15 6 -25 20 -29 44 -4 22 -19 46 -42 65 -29 26 -43 31 -84
        31 -41 0 -55 -5 -86 -32z"
          ></path>
        </g>
      </svg>
    </div>
    <svg
      height="48px"
      width="48px"
      viewBox="0 0 48 48"
      xmlns="http://www.w3.org/2000/svg"
      class="sun"
    >
      <path d="M11 11H37V37H11z" fill="#FF9800"></path>
      <path
        transform="rotate(-45.001 24 24)"
        d="M11.272 11.272H36.728V36.728H11.272z"
        fill="#FF9800"
      ></path>
      <path
        d="M13,24c0,6.077,4.923,11,11,11c6.076,0,11-4.923,11-11s-4.924-11-11-11C17.923,13,13,17.923,13,24"
        fill="#FFEB3B"
      ></path>
    </svg>
  </div>
  <div class="snowflake-container">
    <svg
      xml:space="preserve"
      viewBox="0 0 298 298"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      id="Capa_1"
      version="1.1"
      width="20px"
      height="20px"
      fill="#87ceeb"
      class="snowflake"
    >
      <g>
        <path
          d="M289.5,140.5h-24.606l11.031-11.03c2.93-2.929,2.93-7.678,0.001-10.606c-2.929-2.929-7.678-2.93-10.606-0.001
               L243.681,140.5h-36.369l16.182-17.392c2.821-3.032,2.65-7.777-0.383-10.6c-1.243-1.156-2.775-1.802-4.345-1.961
               c-0.952-0.047-21.495-0.003-21.495-0.003L221.315,86.5H251.5c4.143,0,7.5-3.357,7.5-7.5s-3.357-7.5-7.5-7.5h-15.186l17.69-17.69
               c2.929-2.93,2.929-7.678,0-10.608c-2.93-2.928-7.844-2.928-10.774,0L225.167,61.1V45.5c0-4.143-3.357-7.5-7.5-7.5
               c-4.143,0-7.5,3.357-7.5,7.5v30.601l-24.837,25.004l-0.415-22.645c-0.001-0.036,0.035-0.07,0.034-0.106
               c-0.035-1.824-0.704-3.641-2.07-5.059c-2.873-2.982-7.778-3.07-10.761-0.194l-15.951,15.226V53.107l21.47-21.304
               c2.929-2.93,3.012-7.678,0.083-10.607c-2.93-2.928-7.803-2.928-10.732,0l-10.821,10.696V7.5c0-4.143-3.357-7.5-7.5-7.5
               c-4.143,0-7.5,3.357-7.5,7.5v24.393l-10.53-10.696c-2.93-2.928-7.594-2.928-10.524,0c-2.929,2.93-3.054,7.678-0.125,10.607
               l21.179,21.304v35.421l-16.176-15.475c-3.009-2.847-7.67-2.718-10.52,0.289c-1.075,1.136-1.683,2.52-1.914,3.955
               c-0.142,0.583-0.203,1.188-0.201,1.811l-0.088,21.229l-25.1-24.944V45.5c0-4.143-3.357-7.5-7.5-7.5s-7.5,3.357-7.5,7.5v14.894
               L55.142,43.202c-2.93-2.928-7.594-2.928-10.524,0c-2.929,2.93-2.887,7.678,0.042,10.608L62.392,71.5H46.5
               c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h30.892l24.744,24.744l-23.057,0.831c-4.021,0.146-7.524,3.435-7.563,7.418
               c-0.004,0.112-0.349,0.225-0.349,0.337c0,0.003,0,0.007,0,0.011c0,0.008,0.345,0.017,0.345,0.024
               c0.045,1.875,0.955,3.736,2.395,5.158L89.748,140.5H55.025l-21.638-21.638c-2.93-2.928-7.678-2.928-10.607,0
               c-2.929,2.93-2.929,7.678,0,10.607l11.03,11.03H8.5c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h25.02L22.78,166.239
               c-2.929,2.93-2.929,7.678,0,10.607c1.465,1.464,3.385,2.196,5.304,2.196c1.919,0,3.839-0.732,5.304-2.196L54.734,155.5h35.027
               l-15.253,16.394c-2.821,3.032-2.65,7.777,0.383,10.6c1.444,1.344,3.277,2.009,5.106,2.009c0.034,0,0.068-0.005,0.103-0.005
               c0.022,0,0.044,0.003,0.065,0.003c0.018,0,0.037,0,0.055,0l22.005-0.125L77.101,209.5H46.5c-4.143,0-7.5,3.357-7.5,7.5
               s3.357,7.5,7.5,7.5h15.601l-17.399,17.399c-2.929,2.93-2.929,7.678,0,10.607c1.465,1.464,3.385,2.196,5.304,2.196
               c1.919,0,3.672-0.732,5.137-2.196l17.025-17.191V250.5c0,4.143,3.357,7.5,7.5,7.5s7.5-3.357,7.5-7.5v-30.185l25.445-25.278
               l0.977,24.39c0.148,4.046,3.517,7.306,7.532,7.225c1.364-0.027,2.844-0.465,4.312-1.543c1.063-0.781,15.734-15.812,15.734-15.812
               v35.385l-20.971,21.137c-2.93,2.929-2.846,7.678,0.082,10.607c1.465,1.465,3.425,2.197,5.345,2.197
               c1.919,0,3.693-0.732,5.157-2.196l10.387-10.532V290.5c0,4.143,3.357,7.5,7.5,7.5c4.143,0,7.5-3.357,7.5-7.5v-25.31l11.404,11.237
               c1.465,1.464,3.468,2.196,5.387,2.196c1.919,0,3.881-0.732,5.345-2.196c2.929-2.93,2.783-7.678-0.146-10.607l-21.99-21.845v-35.7
               c0,0,13.729,12.896,15.896,14.976c2.167,2.08,3.942,3.25,6.525,3.25c0.015,0,0.03,0,0.046,0c4.142,0,7.48-3.604,7.455-7.746
               l-0.306-23.696l24.384,24.551V250.5c0,4.143,3.357,7.5,7.5,7.5c4.143,0,7.5-3.357,7.5-7.5v-15.891l18.064,17.897
               c1.465,1.464,3.467,2.196,5.387,2.196c1.919,0,3.88-0.732,5.345-2.196c2.929-2.93,2.95-7.678,0.021-10.607L236.605,224.5H251.5
               c4.143,0,7.5-3.357,7.5-7.5s-3.357-7.5-7.5-7.5h-29.894l-25.742-25.742l23.059-0.831c0.082-0.003,0.162-0.016,0.243-0.021
               c0.03-0.002,0.06-0.005,0.09-0.008c3.977-0.319,7.037-3.709,6.892-7.736c-0.087-2.424-1.32-4.531-3.155-5.837L209.138,155.5h34.835
               l21.345,21.346c1.465,1.465,3.384,2.197,5.304,2.197c1.919,0,3.839-0.732,5.303-2.196c2.93-2.929,2.93-7.678,0.001-10.606
               l-10.74-10.74H289.5c4.143,0,7.5-3.357,7.5-7.5S293.643,140.5,289.5,140.5z M200.795,125.483L186.823,140.5h-19.507l15.002-15.002
               L200.795,125.483z M170.21,95.784l0.356,20.002l-14.399,14.315V109.16L170.21,95.784z M127.263,95.865l13.904,13.323v20.205
               l-13.925-14.008L127.263,95.865z M96.862,126.444l19.762-0.712l14.768,14.768h-20.299L96.862,126.444z M97.246,169.477
               L110.25,155.5h20.851l-13.841,13.841L97.246,169.477z M127.863,201.599l-0.854-21.042l14.158-14.241v21.604L127.863,201.599z
                M170.819,201.264l-14.652-13.478v-22.179l14.442,14.359L170.819,201.264z M200.991,168.564l-19.614,0.706l-13.77-13.77h20.292
               L200.991,168.564z"
        ></path>
      </g>
    </svg>

    <svg
      xml:space="preserve"
      viewBox="0 0 298 298"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      id="Capa_1"
      version="1.1"
      width="20px"
      height="20px"
      fill="#87ceeb"
      class="snowflake"
    >
      <g>
        <path
          d="M289.5,140.5h-24.606l11.031-11.03c2.93-2.929,2.93-7.678,0.001-10.606c-2.929-2.929-7.678-2.93-10.606-0.001
               L243.681,140.5h-36.369l16.182-17.392c2.821-3.032,2.65-7.777-0.383-10.6c-1.243-1.156-2.775-1.802-4.345-1.961
               c-0.952-0.047-21.495-0.003-21.495-0.003L221.315,86.5H251.5c4.143,0,7.5-3.357,7.5-7.5s-3.357-7.5-7.5-7.5h-15.186l17.69-17.69
               c2.929-2.93,2.929-7.678,0-10.608c-2.93-2.928-7.844-2.928-10.774,0L225.167,61.1V45.5c0-4.143-3.357-7.5-7.5-7.5
               c-4.143,0-7.5,3.357-7.5,7.5v30.601l-24.837,25.004l-0.415-22.645c-0.001-0.036,0.035-0.07,0.034-0.106
               c-0.035-1.824-0.704-3.641-2.07-5.059c-2.873-2.982-7.778-3.07-10.761-0.194l-15.951,15.226V53.107l21.47-21.304
               c2.929-2.93,3.012-7.678,0.083-10.607c-2.93-2.928-7.803-2.928-10.732,0l-10.821,10.696V7.5c0-4.143-3.357-7.5-7.5-7.5
               c-4.143,0-7.5,3.357-7.5,7.5v24.393l-10.53-10.696c-2.93-2.928-7.594-2.928-10.524,0c-2.929,2.93-3.054,7.678-0.125,10.607
               l21.179,21.304v35.421l-16.176-15.475c-3.009-2.847-7.67-2.718-10.52,0.289c-1.075,1.136-1.683,2.52-1.914,3.955
               c-0.142,0.583-0.203,1.188-0.201,1.811l-0.088,21.229l-25.1-24.944V45.5c0-4.143-3.357-7.5-7.5-7.5s-7.5,3.357-7.5,7.5v14.894
               L55.142,43.202c-2.93-2.928-7.594-2.928-10.524,0c-2.929,2.93-2.887,7.678,0.042,10.608L62.392,71.5H46.5
               c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h30.892l24.744,24.744l-23.057,0.831c-4.021,0.146-7.524,3.435-7.563,7.418
               c-0.004,0.112-0.349,0.225-0.349,0.337c0,0.003,0,0.007,0,0.011c0,0.008,0.345,0.017,0.345,0.024
               c0.045,1.875,0.955,3.736,2.395,5.158L89.748,140.5H55.025l-21.638-21.638c-2.93-2.928-7.678-2.928-10.607,0
               c-2.929,2.93-2.929,7.678,0,10.607l11.03,11.03H8.5c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h25.02L22.78,166.239
               c-2.929,2.93-2.929,7.678,0,10.607c1.465,1.464,3.385,2.196,5.304,2.196c1.919,0,3.839-0.732,5.304-2.196L54.734,155.5h35.027
               l-15.253,16.394c-2.821,3.032-2.65,7.777,0.383,10.6c1.444,1.344,3.277,2.009,5.106,2.009c0.034,0,0.068-0.005,0.103-0.005
               c0.022,0,0.044,0.003,0.065,0.003c0.018,0,0.037,0,0.055,0l22.005-0.125L77.101,209.5H46.5c-4.143,0-7.5,3.357-7.5,7.5
               s3.357,7.5,7.5,7.5h15.601l-17.399,17.399c-2.929,2.93-2.929,7.678,0,10.607c1.465,1.464,3.385,2.196,5.304,2.196
               c1.919,0,3.672-0.732,5.137-2.196l17.025-17.191V250.5c0,4.143,3.357,7.5,7.5,7.5s7.5-3.357,7.5-7.5v-30.185l25.445-25.278
               l0.977,24.39c0.148,4.046,3.517,7.306,7.532,7.225c1.364-0.027,2.844-0.465,4.312-1.543c1.063-0.781,15.734-15.812,15.734-15.812
               v35.385l-20.971,21.137c-2.93,2.929-2.846,7.678,0.082,10.607c1.465,1.465,3.425,2.197,5.345,2.197
               c1.919,0,3.693-0.732,5.157-2.196l10.387-10.532V290.5c0,4.143,3.357,7.5,7.5,7.5c4.143,0,7.5-3.357,7.5-7.5v-25.31l11.404,11.237
               c1.465,1.464,3.468,2.196,5.387,2.196c1.919,0,3.881-0.732,5.345-2.196c2.929-2.93,2.783-7.678-0.146-10.607l-21.99-21.845v-35.7
               c0,0,13.729,12.896,15.896,14.976c2.167,2.08,3.942,3.25,6.525,3.25c0.015,0,0.03,0,0.046,0c4.142,0,7.48-3.604,7.455-7.746
               l-0.306-23.696l24.384,24.551V250.5c0,4.143,3.357,7.5,7.5,7.5c4.143,0,7.5-3.357,7.5-7.5v-15.891l18.064,17.897
               c1.465,1.464,3.467,2.196,5.387,2.196c1.919,0,3.88-0.732,5.345-2.196c2.929-2.93,2.95-7.678,0.021-10.607L236.605,224.5H251.5
               c4.143,0,7.5-3.357,7.5-7.5s-3.357-7.5-7.5-7.5h-29.894l-25.742-25.742l23.059-0.831c0.082-0.003,0.162-0.016,0.243-0.021
               c0.03-0.002,0.06-0.005,0.09-0.008c3.977-0.319,7.037-3.709,6.892-7.736c-0.087-2.424-1.32-4.531-3.155-5.837L209.138,155.5h34.835
               l21.345,21.346c1.465,1.465,3.384,2.197,5.304,2.197c1.919,0,3.839-0.732,5.303-2.196c2.93-2.929,2.93-7.678,0.001-10.606
               l-10.74-10.74H289.5c4.143,0,7.5-3.357,7.5-7.5S293.643,140.5,289.5,140.5z M200.795,125.483L186.823,140.5h-19.507l15.002-15.002
               L200.795,125.483z M170.21,95.784l0.356,20.002l-14.399,14.315V109.16L170.21,95.784z M127.263,95.865l13.904,13.323v20.205
               l-13.925-14.008L127.263,95.865z M96.862,126.444l19.762-0.712l14.768,14.768h-20.299L96.862,126.444z M97.246,169.477
               L110.25,155.5h20.851l-13.841,13.841L97.246,169.477z M127.863,201.599l-0.854-21.042l14.158-14.241v21.604L127.863,201.599z
                M170.819,201.264l-14.652-13.478v-22.179l14.442,14.359L170.819,201.264z M200.991,168.564l-19.614,0.706l-13.77-13.77h20.292
               L200.991,168.564z"
        ></path>
      </g>
    </svg>

    <svg
      xml:space="preserve"
      viewBox="0 0 298 298"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      id="Capa_1"
      version="1.1"
      width="20px"
      height="20px"
      fill="#87ceeb"
      class="snowflake"
    >
      <g>
        <path
          d="M289.5,140.5h-24.606l11.031-11.03c2.93-2.929,2.93-7.678,0.001-10.606c-2.929-2.929-7.678-2.93-10.606-0.001
               L243.681,140.5h-36.369l16.182-17.392c2.821-3.032,2.65-7.777-0.383-10.6c-1.243-1.156-2.775-1.802-4.345-1.961
               c-0.952-0.047-21.495-0.003-21.495-0.003L221.315,86.5H251.5c4.143,0,7.5-3.357,7.5-7.5s-3.357-7.5-7.5-7.5h-15.186l17.69-17.69
               c2.929-2.93,2.929-7.678,0-10.608c-2.93-2.928-7.844-2.928-10.774,0L225.167,61.1V45.5c0-4.143-3.357-7.5-7.5-7.5
               c-4.143,0-7.5,3.357-7.5,7.5v30.601l-24.837,25.004l-0.415-22.645c-0.001-0.036,0.035-0.07,0.034-0.106
               c-0.035-1.824-0.704-3.641-2.07-5.059c-2.873-2.982-7.778-3.07-10.761-0.194l-15.951,15.226V53.107l21.47-21.304
               c2.929-2.93,3.012-7.678,0.083-10.607c-2.93-2.928-7.803-2.928-10.732,0l-10.821,10.696V7.5c0-4.143-3.357-7.5-7.5-7.5
               c-4.143,0-7.5,3.357-7.5,7.5v24.393l-10.53-10.696c-2.93-2.928-7.594-2.928-10.524,0c-2.929,2.93-3.054,7.678-0.125,10.607
               l21.179,21.304v35.421l-16.176-15.475c-3.009-2.847-7.67-2.718-10.52,0.289c-1.075,1.136-1.683,2.52-1.914,3.955
               c-0.142,0.583-0.203,1.188-0.201,1.811l-0.088,21.229l-25.1-24.944V45.5c0-4.143-3.357-7.5-7.5-7.5s-7.5,3.357-7.5,7.5v14.894
               L55.142,43.202c-2.93-2.928-7.594-2.928-10.524,0c-2.929,2.93-2.887,7.678,0.042,10.608L62.392,71.5H46.5
               c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h30.892l24.744,24.744l-23.057,0.831c-4.021,0.146-7.524,3.435-7.563,7.418
               c-0.004,0.112-0.349,0.225-0.349,0.337c0,0.003,0,0.007,0,0.011c0,0.008,0.345,0.017,0.345,0.024
               c0.045,1.875,0.955,3.736,2.395,5.158L89.748,140.5H55.025l-21.638-21.638c-2.93-2.928-7.678-2.928-10.607,0
               c-2.929,2.93-2.929,7.678,0,10.607l11.03,11.03H8.5c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h25.02L22.78,166.239
               c-2.929,2.93-2.929,7.678,0,10.607c1.465,1.464,3.385,2.196,5.304,2.196c1.919,0,3.839-0.732,5.304-2.196L54.734,155.5h35.027
               l-15.253,16.394c-2.821,3.032-2.65,7.777,0.383,10.6c1.444,1.344,3.277,2.009,5.106,2.009c0.034,0,0.068-0.005,0.103-0.005
               c0.022,0,0.044,0.003,0.065,0.003c0.018,0,0.037,0,0.055,0l22.005-0.125L77.101,209.5H46.5c-4.143,0-7.5,3.357-7.5,7.5
               s3.357,7.5,7.5,7.5h15.601l-17.399,17.399c-2.929,2.93-2.929,7.678,0,10.607c1.465,1.464,3.385,2.196,5.304,2.196
               c1.919,0,3.672-0.732,5.137-2.196l17.025-17.191V250.5c0,4.143,3.357,7.5,7.5,7.5s7.5-3.357,7.5-7.5v-30.185l25.445-25.278
               l0.977,24.39c0.148,4.046,3.517,7.306,7.532,7.225c1.364-0.027,2.844-0.465,4.312-1.543c1.063-0.781,15.734-15.812,15.734-15.812
               v35.385l-20.971,21.137c-2.93,2.929-2.846,7.678,0.082,10.607c1.465,1.465,3.425,2.197,5.345,2.197
               c1.919,0,3.693-0.732,5.157-2.196l10.387-10.532V290.5c0,4.143,3.357,7.5,7.5,7.5c4.143,0,7.5-3.357,7.5-7.5v-25.31l11.404,11.237
               c1.465,1.464,3.468,2.196,5.387,2.196c1.919,0,3.881-0.732,5.345-2.196c2.929-2.93,2.783-7.678-0.146-10.607l-21.99-21.845v-35.7
               c0,0,13.729,12.896,15.896,14.976c2.167,2.08,3.942,3.25,6.525,3.25c0.015,0,0.03,0,0.046,0c4.142,0,7.48-3.604,7.455-7.746
               l-0.306-23.696l24.384,24.551V250.5c0,4.143,3.357,7.5,7.5,7.5c4.143,0,7.5-3.357,7.5-7.5v-15.891l18.064,17.897
               c1.465,1.464,3.467,2.196,5.387,2.196c1.919,0,3.88-0.732,5.345-2.196c2.929-2.93,2.95-7.678,0.021-10.607L236.605,224.5H251.5
               c4.143,0,7.5-3.357,7.5-7.5s-3.357-7.5-7.5-7.5h-29.894l-25.742-25.742l23.059-0.831c0.082-0.003,0.162-0.016,0.243-0.021
               c0.03-0.002,0.06-0.005,0.09-0.008c3.977-0.319,7.037-3.709,6.892-7.736c-0.087-2.424-1.32-4.531-3.155-5.837L209.138,155.5h34.835
               l21.345,21.346c1.465,1.465,3.384,2.197,5.304,2.197c1.919,0,3.839-0.732,5.303-2.196c2.93-2.929,2.93-7.678,0.001-10.606
               l-10.74-10.74H289.5c4.143,0,7.5-3.357,7.5-7.5S293.643,140.5,289.5,140.5z M200.795,125.483L186.823,140.5h-19.507l15.002-15.002
               L200.795,125.483z M170.21,95.784l0.356,20.002l-14.399,14.315V109.16L170.21,95.784z M127.263,95.865l13.904,13.323v20.205
               l-13.925-14.008L127.263,95.865z M96.862,126.444l19.762-0.712l14.768,14.768h-20.299L96.862,126.444z M97.246,169.477
               L110.25,155.5h20.851l-13.841,13.841L97.246,169.477z M127.863,201.599l-0.854-21.042l14.158-14.241v21.604L127.863,201.599z
                M170.819,201.264l-14.652-13.478v-22.179l14.442,14.359L170.819,201.264z M200.991,168.564l-19.614,0.706l-13.77-13.77h20.292
               L200.991,168.564z"
        ></path>
      </g>
    </svg>

    <svg
      xml:space="preserve"
      viewBox="0 0 298 298"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      id="Capa_1"
      version="1.1"
      width="20px"
      height="20px"
      fill="#87ceeb"
      class="snowflake"
    >
      <g>
        <path
          d="M289.5,140.5h-24.606l11.031-11.03c2.93-2.929,2.93-7.678,0.001-10.606c-2.929-2.929-7.678-2.93-10.606-0.001
               L243.681,140.5h-36.369l16.182-17.392c2.821-3.032,2.65-7.777-0.383-10.6c-1.243-1.156-2.775-1.802-4.345-1.961
               c-0.952-0.047-21.495-0.003-21.495-0.003L221.315,86.5H251.5c4.143,0,7.5-3.357,7.5-7.5s-3.357-7.5-7.5-7.5h-15.186l17.69-17.69
               c2.929-2.93,2.929-7.678,0-10.608c-2.93-2.928-7.844-2.928-10.774,0L225.167,61.1V45.5c0-4.143-3.357-7.5-7.5-7.5
               c-4.143,0-7.5,3.357-7.5,7.5v30.601l-24.837,25.004l-0.415-22.645c-0.001-0.036,0.035-0.07,0.034-0.106
               c-0.035-1.824-0.704-3.641-2.07-5.059c-2.873-2.982-7.778-3.07-10.761-0.194l-15.951,15.226V53.107l21.47-21.304
               c2.929-2.93,3.012-7.678,0.083-10.607c-2.93-2.928-7.803-2.928-10.732,0l-10.821,10.696V7.5c0-4.143-3.357-7.5-7.5-7.5
               c-4.143,0-7.5,3.357-7.5,7.5v24.393l-10.53-10.696c-2.93-2.928-7.594-2.928-10.524,0c-2.929,2.93-3.054,7.678-0.125,10.607
               l21.179,21.304v35.421l-16.176-15.475c-3.009-2.847-7.67-2.718-10.52,0.289c-1.075,1.136-1.683,2.52-1.914,3.955
               c-0.142,0.583-0.203,1.188-0.201,1.811l-0.088,21.229l-25.1-24.944V45.5c0-4.143-3.357-7.5-7.5-7.5s-7.5,3.357-7.5,7.5v14.894
               L55.142,43.202c-2.93-2.928-7.594-2.928-10.524,0c-2.929,2.93-2.887,7.678,0.042,10.608L62.392,71.5H46.5
               c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h30.892l24.744,24.744l-23.057,0.831c-4.021,0.146-7.524,3.435-7.563,7.418
               c-0.004,0.112-0.349,0.225-0.349,0.337c0,0.003,0,0.007,0,0.011c0,0.008,0.345,0.017,0.345,0.024
               c0.045,1.875,0.955,3.736,2.395,5.158L89.748,140.5H55.025l-21.638-21.638c-2.93-2.928-7.678-2.928-10.607,0
               c-2.929,2.93-2.929,7.678,0,10.607l11.03,11.03H8.5c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h25.02L22.78,166.239
               c-2.929,2.93-2.929,7.678,0,10.607c1.465,1.464,3.385,2.196,5.304,2.196c1.919,0,3.839-0.732,5.304-2.196L54.734,155.5h35.027
               l-15.253,16.394c-2.821,3.032-2.65,7.777,0.383,10.6c1.444,1.344,3.277,2.009,5.106,2.009c0.034,0,0.068-0.005,0.103-0.005
               c0.022,0,0.044,0.003,0.065,0.003c0.018,0,0.037,0,0.055,0l22.005-0.125L77.101,209.5H46.5c-4.143,0-7.5,3.357-7.5,7.5
               s3.357,7.5,7.5,7.5h15.601l-17.399,17.399c-2.929,2.93-2.929,7.678,0,10.607c1.465,1.464,3.385,2.196,5.304,2.196
               c1.919,0,3.672-0.732,5.137-2.196l17.025-17.191V250.5c0,4.143,3.357,7.5,7.5,7.5s7.5-3.357,7.5-7.5v-30.185l25.445-25.278
               l0.977,24.39c0.148,4.046,3.517,7.306,7.532,7.225c1.364-0.027,2.844-0.465,4.312-1.543c1.063-0.781,15.734-15.812,15.734-15.812
               v35.385l-20.971,21.137c-2.93,2.929-2.846,7.678,0.082,10.607c1.465,1.465,3.425,2.197,5.345,2.197
               c1.919,0,3.693-0.732,5.157-2.196l10.387-10.532V290.5c0,4.143,3.357,7.5,7.5,7.5c4.143,0,7.5-3.357,7.5-7.5v-25.31l11.404,11.237
               c1.465,1.464,3.468,2.196,5.387,2.196c1.919,0,3.881-0.732,5.345-2.196c2.929-2.93,2.783-7.678-0.146-10.607l-21.99-21.845v-35.7
               c0,0,13.729,12.896,15.896,14.976c2.167,2.08,3.942,3.25,6.525,3.25c0.015,0,0.03,0,0.046,0c4.142,0,7.48-3.604,7.455-7.746
               l-0.306-23.696l24.384,24.551V250.5c0,4.143,3.357,7.5,7.5,7.5c4.143,0,7.5-3.357,7.5-7.5v-15.891l18.064,17.897
               c1.465,1.464,3.467,2.196,5.387,2.196c1.919,0,3.88-0.732,5.345-2.196c2.929-2.93,2.95-7.678,0.021-10.607L236.605,224.5H251.5
               c4.143,0,7.5-3.357,7.5-7.5s-3.357-7.5-7.5-7.5h-29.894l-25.742-25.742l23.059-0.831c0.082-0.003,0.162-0.016,0.243-0.021
               c0.03-0.002,0.06-0.005,0.09-0.008c3.977-0.319,7.037-3.709,6.892-7.736c-0.087-2.424-1.32-4.531-3.155-5.837L209.138,155.5h34.835
               l21.345,21.346c1.465,1.465,3.384,2.197,5.304,2.197c1.919,0,3.839-0.732,5.303-2.196c2.93-2.929,2.93-7.678,0.001-10.606
               l-10.74-10.74H289.5c4.143,0,7.5-3.357,7.5-7.5S293.643,140.5,289.5,140.5z M200.795,125.483L186.823,140.5h-19.507l15.002-15.002
               L200.795,125.483z M170.21,95.784l0.356,20.002l-14.399,14.315V109.16L170.21,95.784z M127.263,95.865l13.904,13.323v20.205
               l-13.925-14.008L127.263,95.865z M96.862,126.444l19.762-0.712l14.768,14.768h-20.299L96.862,126.444z M97.246,169.477
               L110.25,155.5h20.851l-13.841,13.841L97.246,169.477z M127.863,201.599l-0.854-21.042l14.158-14.241v21.604L127.863,201.599z
                M170.819,201.264l-14.652-13.478v-22.179l14.442,14.359L170.819,201.264z M200.991,168.564l-19.614,0.706l-13.77-13.77h20.292
               L200.991,168.564z"
        ></path>
      </g>
    </svg>

    <svg
      xml:space="preserve"
      viewBox="0 0 298 298"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      id="Capa_1"
      version="1.1"
      width="20px"
      height="20px"
      fill="#87ceeb"
      class="snowflake"
    >
      <g>
        <path
          d="M289.5,140.5h-24.606l11.031-11.03c2.93-2.929,2.93-7.678,0.001-10.606c-2.929-2.929-7.678-2.93-10.606-0.001
               L243.681,140.5h-36.369l16.182-17.392c2.821-3.032,2.65-7.777-0.383-10.6c-1.243-1.156-2.775-1.802-4.345-1.961
               c-0.952-0.047-21.495-0.003-21.495-0.003L221.315,86.5H251.5c4.143,0,7.5-3.357,7.5-7.5s-3.357-7.5-7.5-7.5h-15.186l17.69-17.69
               c2.929-2.93,2.929-7.678,0-10.608c-2.93-2.928-7.844-2.928-10.774,0L225.167,61.1V45.5c0-4.143-3.357-7.5-7.5-7.5
               c-4.143,0-7.5,3.357-7.5,7.5v30.601l-24.837,25.004l-0.415-22.645c-0.001-0.036,0.035-0.07,0.034-0.106
               c-0.035-1.824-0.704-3.641-2.07-5.059c-2.873-2.982-7.778-3.07-10.761-0.194l-15.951,15.226V53.107l21.47-21.304
               c2.929-2.93,3.012-7.678,0.083-10.607c-2.93-2.928-7.803-2.928-10.732,0l-10.821,10.696V7.5c0-4.143-3.357-7.5-7.5-7.5
               c-4.143,0-7.5,3.357-7.5,7.5v24.393l-10.53-10.696c-2.93-2.928-7.594-2.928-10.524,0c-2.929,2.93-3.054,7.678-0.125,10.607
               l21.179,21.304v35.421l-16.176-15.475c-3.009-2.847-7.67-2.718-10.52,0.289c-1.075,1.136-1.683,2.52-1.914,3.955
               c-0.142,0.583-0.203,1.188-0.201,1.811l-0.088,21.229l-25.1-24.944V45.5c0-4.143-3.357-7.5-7.5-7.5s-7.5,3.357-7.5,7.5v14.894
               L55.142,43.202c-2.93-2.928-7.594-2.928-10.524,0c-2.929,2.93-2.887,7.678,0.042,10.608L62.392,71.5H46.5
               c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h30.892l24.744,24.744l-23.057,0.831c-4.021,0.146-7.524,3.435-7.563,7.418
               c-0.004,0.112-0.349,0.225-0.349,0.337c0,0.003,0,0.007,0,0.011c0,0.008,0.345,0.017,0.345,0.024
               c0.045,1.875,0.955,3.736,2.395,5.158L89.748,140.5H55.025l-21.638-21.638c-2.93-2.928-7.678-2.928-10.607,0
               c-2.929,2.93-2.929,7.678,0,10.607l11.03,11.03H8.5c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h25.02L22.78,166.239
               c-2.929,2.93-2.929,7.678,0,10.607c1.465,1.464,3.385,2.196,5.304,2.196c1.919,0,3.839-0.732,5.304-2.196L54.734,155.5h35.027
               l-15.253,16.394c-2.821,3.032-2.65,7.777,0.383,10.6c1.444,1.344,3.277,2.009,5.106,2.009c0.034,0,0.068-0.005,0.103-0.005
               c0.022,0,0.044,0.003,0.065,0.003c0.018,0,0.037,0,0.055,0l22.005-0.125L77.101,209.5H46.5c-4.143,0-7.5,3.357-7.5,7.5
               s3.357,7.5,7.5,7.5h15.601l-17.399,17.399c-2.929,2.93-2.929,7.678,0,10.607c1.465,1.464,3.385,2.196,5.304,2.196
               c1.919,0,3.672-0.732,5.137-2.196l17.025-17.191V250.5c0,4.143,3.357,7.5,7.5,7.5s7.5-3.357,7.5-7.5v-30.185l25.445-25.278
               l0.977,24.39c0.148,4.046,3.517,7.306,7.532,7.225c1.364-0.027,2.844-0.465,4.312-1.543c1.063-0.781,15.734-15.812,15.734-15.812
               v35.385l-20.971,21.137c-2.93,2.929-2.846,7.678,0.082,10.607c1.465,1.465,3.425,2.197,5.345,2.197
               c1.919,0,3.693-0.732,5.157-2.196l10.387-10.532V290.5c0,4.143,3.357,7.5,7.5,7.5c4.143,0,7.5-3.357,7.5-7.5v-25.31l11.404,11.237
               c1.465,1.464,3.468,2.196,5.387,2.196c1.919,0,3.881-0.732,5.345-2.196c2.929-2.93,2.783-7.678-0.146-10.607l-21.99-21.845v-35.7
               c0,0,13.729,12.896,15.896,14.976c2.167,2.08,3.942,3.25,6.525,3.25c0.015,0,0.03,0,0.046,0c4.142,0,7.48-3.604,7.455-7.746
               l-0.306-23.696l24.384,24.551V250.5c0,4.143,3.357,7.5,7.5,7.5c4.143,0,7.5-3.357,7.5-7.5v-15.891l18.064,17.897
               c1.465,1.464,3.467,2.196,5.387,2.196c1.919,0,3.88-0.732,5.345-2.196c2.929-2.93,2.95-7.678,0.021-10.607L236.605,224.5H251.5
               c4.143,0,7.5-3.357,7.5-7.5s-3.357-7.5-7.5-7.5h-29.894l-25.742-25.742l23.059-0.831c0.082-0.003,0.162-0.016,0.243-0.021
               c0.03-0.002,0.06-0.005,0.09-0.008c3.977-0.319,7.037-3.709,6.892-7.736c-0.087-2.424-1.32-4.531-3.155-5.837L209.138,155.5h34.835
               l21.345,21.346c1.465,1.465,3.384,2.197,5.304,2.197c1.919,0,3.839-0.732,5.303-2.196c2.93-2.929,2.93-7.678,0.001-10.606
               l-10.74-10.74H289.5c4.143,0,7.5-3.357,7.5-7.5S293.643,140.5,289.5,140.5z M200.795,125.483L186.823,140.5h-19.507l15.002-15.002
               L200.795,125.483z M170.21,95.784l0.356,20.002l-14.399,14.315V109.16L170.21,95.784z M127.263,95.865l13.904,13.323v20.205
               l-13.925-14.008L127.263,95.865z M96.862,126.444l19.762-0.712l14.768,14.768h-20.299L96.862,126.444z M97.246,169.477
               L110.25,155.5h20.851l-13.841,13.841L97.246,169.477z M127.863,201.599l-0.854-21.042l14.158-14.241v21.604L127.863,201.599z
                M170.819,201.264l-14.652-13.478v-22.179l14.442,14.359L170.819,201.264z M200.991,168.564l-19.614,0.706l-13.77-13.77h20.292
               L200.991,168.564z"
        ></path>
      </g>
    </svg>
  </div>
  <svg
    id="santa"
    viewBox="0 0 512 512"
    data-name="Layer 1"
    xmlns="http://www.w3.org/2000/svg"
    class="santa"
  >
    <path
      d="M430.47 234.67A36.27 36.27 0 01441.1 218c1.16-1 2.36-2 3.5-3 .12-.15.33-.39.64-.71a5.92 5.92 0 00.57-1c2.07-4.68 7.37-7.73 12-9.24l.36-.09C447 174.16 446.59 154 446.59 143.49c0-11.2 7.15-39.42 2.44-52.11s-28.69-35.34-34.5-39S414.42 17.8 365.6 10c-71.19-11.32-130.47 26.3-130.47 26.3 33.12-2.92 108.38 35.85 134.24 58.76s29 90.76 33.1 119 26.95 25 26.95 25a7.64 7.64 0 01.34-.71A16.26 16.26 0 01430.47 234.67zM492.88 504.08a73.76 73.76 0 001.67-10.37c3.21-31.86-8.59-144-8.59-144S474.76 310 456.7 307.47s-44.12-17-44.12-17S358 264.89 266.37 279.21 145.65 300.8 129.13 319.3s-64 79.13-71.37 103.09c-5.63 18.22-13.81 61.85-17.4 81.69z"
      fill="#e21921"
    ></path>
    <path
      d="M355.68,464.83c2.36-24.37,6.78-48.18,7.89-72.63-9.44,10.63-23.16,28.67-27.5,47.75-5.61,24.62-10.21,54.25-11.68,64.13h29.89C354.84,491,354.42,477.86,355.68,464.83Z"
      fill="#d30515"
    ></path>
    <path
      d="M198.36,111.77s6.87,8.67,6.09,22.68,3.58,21.21-16.81,30.6-23.12,16.35-22.12,21.2,47,31.93,80.78,37.81,82.15-4,82.15-4l21.38-14.34L365.36,183l-12.74-39.6-51.83-39.23L244.09,79.7Z"
      fill="#f9beae"
    ></path>
    <path
      d="M205.49,136.08S224.74,109,252.09,114s52.18,45.16,52.18,45.16,17.05,29.39,47.59,31.53l-11.44-11.91s-21.77-28.64-27-35.87-40.9-46-68.05-47.69-43.43,23.3-43.43,23.3Z"
      fill="#eaa292"
    ></path>
    <path
      d="M77.78,504.08c4.48-21.73,10.66-51.5,14-66,9.59-42.39,54.83-84.62,71.38-103.12s45.6-25.75,137.23-40.09,146.21,11.29,146.21,11.29a218.36,218.36,0,0,0,24.13,11.25c-4-5.19-8.68-9.15-14-9.9-18-2.54-44.13-17-44.13-17S358,264.88,266.39,279.22s-120.75,21.59-137.26,40.09-64,79.11-71.39,103.08c-5.6,18.23-13.79,61.84-17.39,81.69Z"
      fill="#d30515"
    ></path>
    <path
      d="M399.61,349.7c19.92,27.73,11.8,104.42,8.59,136.27a165.84,165.84,0,0,1-2.77,18.11H493a90.05,90.05,0,0,0,1.58-10.36c3.21-31.85-8.59-144-8.59-144s-3.23-52.94-78.6-70.56c-35.69-8.34-49.36-14.26-141,.08q-5.42.84-10.58,1.67c40.29,9.19,59.86,29.43,59.86,29.43S386.1,330.88,399.61,349.7Z"
      fill="#d30515"
    ></path>
    <path
      d="M94.83,255.09s15,52.53-18,56.37S33.28,258,29.19,252.84,21,246.46,16.9,263,10.66,327,46.4,349.34s57.17,5.37,63.73-5.38,3.24-33.52,4.18-41.45C117.9,272.21,100.72,245.11,94.83,255.09Z"
      fill="#e6e6e6"
    ></path>
    <path
      d="M106.59,344c-6.58,10.78-24.45,27.69-60.18,5.39-35.33-22-33.63-68.77-29.63-85.8.24,21,6.77,48.8,31.65,64.33,35.77,22.3,53.64,5.39,60.22-5.39A42.52,42.52,0,0,0,113.24,310C113.76,320.3,111.5,335.87,106.59,344Z"
      fill="#dbdbdb"
    ></path>
    <path
      d="M29.19,252.84s12.24,56.59,35.23,60.32,31.36-4.26,34.46-21.48-4-36.59-4-36.59-7,29-28.75,20.58A123,123,0,0,1,29.19,252.84Z"
      fill="#f9beae"
    ></path>
    <path
      d="M99.65,280.61A76.36,76.36,0,0,0,97,271s-7,29-28.76,20.6a124.82,124.82,0,0,1-33.91-20.2,168.35,168.35,0,0,1-5.11-18.58,123.06,123.06,0,0,0,36.88,22.82C87.85,284,94.82,255.1,94.82,255.1A88.74,88.74,0,0,1,99.65,280.61Z"
      fill="#f9beae"
    ></path>
    <path
      d="M101.32,254.47s20,55.87,6.68,92.11c0,0,13.72-16.41,25.39-31.53s2.46-78.74,2.46-78.74S121.38,262.11,101.32,254.47Z"
      fill="#e21921"
    ></path>
    <path
      d="M66.47,168.29s-19.91-19-33.67-12.08-14.18,22.27-14.18,22.27-8,16.43-1.32,31.49,6.09,26.34,6.09,26.34,2.24,16.1,6.91,18.39,15.68,14,23.52,16.59S74.55,285.54,84,277.11s11-21.34,11-21.34L100.56,228,99,212a67.7,67.7,0,0,0,2.82-41.17s17.37-40.63,2.78-49.89c-13-8.23-23.48-2.1-28.81,7.62s-4.39,33.27-4.39,33.27v6.38Z"
      fill="#f9beae"
    ></path>
    <path
      d="M291.79 185.13c-10.45 0-18.94-10.44-18.94-23.26s8.49-23.27 18.94-23.27 18.94 10.44 18.94 23.27S302.23 185.13 291.79 185.13zM229.69 174.69a5.94 5.94 0 01-1.35-.15c-8.9-2-15.38-11.64-15.38-22.83 0-13.05 8.35-23.28 19-23.28 10.44 0 18.93 10.45 18.93 23.28a25.78 25.78 0 01-6.66 17.74 6 6 0 01-8.63 0 5 5 0 01-.1.56A6 6 0 01229.69 174.69z"
      fill="#f4efca"
    ></path>
    <path
      d="M243.79 265a68.76 68.76 0 01-23.57-4.64 7.33 7.33 0 01-1-13.14c12.84-7.52 8-21.26 7.75-21.84a4 4 0 117.44-2.74c2.54 6.91 3.56 22-10.15 30.78 5.18 1.89 21 6.79 32.91.87 5.89-2.93 9.95-8.29 12.07-15.93a4 4 0 117.64 2.12c-2.75 9.89-8.19 16.93-16.18 20.9A37.82 37.82 0 01243.79 265zM430.27 243.14h-.08a4 4 0 114-4A3.93 3.93 0 01430.27 243.14zM461.41 218.18a4 4 0 112.83-6.85 4.38 4.38 0 011.13 2.89A4 4 0 01461.41 218.18z"
      fill="#e44332"
    ></path>
    <path
      d="M390.78,100.17C371.26,73.05,295.9,25.48,237.1,35.63c0,0-34.66,11-41.15,39.2s-6,41.14,1.8,42.44,13.51-6.13,21.18-10.55c35.47-20.45,75.23,15.94,80.49,26.63s62.89,82.53,100.05,67.26C399.47,200.61,410.3,127.29,390.78,100.17Z"
      fill="#e6e6e6"
    ></path>
    <path
      d="M402,173.65c-.87,15.06-.26,29.08-.26,29.08-37.15,15.29-97.09-58.67-102.31-69.36s-45.05-47.11-80.5-26.66c-7.68,4.43-13.35,11.84-21.19,10.57s-8.28-14.22-1.79-42.46a39.68,39.68,0,0,1,3.85-10.14C197.34,81,199,88.76,205,89.75c7.8,1.27,13.5-6.14,21.19-10.58,35.45-20.44,75.23,16,80.5,26.66C311.71,116.09,364.88,181.62,402,173.65Z"
      fill="#ccc"
    ></path>
    <path
      d="M408.62,220.06s12,35.19-5.76,62.54c0,0-2.11-22.24-8.62-26.13,0,0-29.4,63.89-63.81,82.85,0,0-78.84,55.14-111.35,55.3V377.29s-46.46,31.71-59,54.94c0,0-8.49-38-1.66-58.25l-14.93,7.59,5.16-61.06-12.9,5.63s-14-58-3.69-79.75v-7.1l-7.74,7.1s3.25-33.85,26.54-48.3l14.66-11.84s6.73,19.59,42.13,22.36,72.63,4.47,72.63,4.47l40.93-3,35.11-22.93c16.25,12.24,31.33,19,42.64,7.84Z"
      fill="#e6e6e6"
    ></path>
    <path
      d="M402.86,282.59s-2.1-22.22-8.64-26.1c0,0-29.39,63.85-63.78,82.83,0,0-78.87,55.14-111.35,55.3V377.31s-46.47,31.69-59,54.94c0,0-8.47-38-1.66-58.27l-14.89,7.61,5.15-61.09-12.92,5.63s-14-58-3.68-79.75v-7.09l-7.73,7.09s2.06-21.59,14.82-37.67c6.81-8.56,20.13-17.42,20.13-17.42-2.34,4.93-14.74,33-14.74,33l11.05,1.61c-11.45,25.9-5.51,66.05-5.51,66.05L163,286.35l-2.29,58,14.93-7.61c-6.81,20.29-1.24,61.33-1.24,61.33,12.56-23.21,59-54.94,59-54.94v17.35c94-23.74,145.62-108.66,153.53-129.53,0,0,10.11,9.06,12.51,13.42C403.47,231,399,195,399,195c1,.6,2.67,7.76,3.86,10l.12.23,5.7,14.78S420.6,255.26,402.86,282.59Z"
      fill="#ccc"
    ></path>
    <path
      d="M427.06,237.55s13.49-38.93,40.41-35,33.07,16.63,35.53,36.37,4.09,30.55,4.09,30.55l-10.55-3.62-4.05,24.7-13-10.87s-3.33,21.91-7,22.11-12.88-27.19-12.88-27.19l-9.1,15.53S420.31,262.43,427.06,237.55Z"
      fill="#f2f2f2"
    ></path>
    <path
      d="M507.1,269.47l-10.54-3.64-4.08,24.72-13-10.9s-3.37,21.91-7.06,22.15-12.87-27.22-12.87-27.22l-9.11,15.53s-30.19-27.69-23.41-52.56c0,0,.39-1.11,1.15-3,7.17,14.5,19.29,25.59,19.29,25.59l9.07-15.52s9.19,27.41,12.91,27.21,7-22.14,7-22.14l13,10.89,4-24.72,9.51,3.29C505.47,258.78,507.1,269.47,507.1,269.47Z"
      fill="#dbdbdb"
    ></path>
    <path
      d="M165.52,170.87s10.26,27.63,44.5,25.79l10,1.43s11.9,4.31,32.1,4.61a39,39,0,0,0,18.68,0c10-2.53,12-5.42,12-5.42s54.72,5.56,73.54-10.14c0,0-2.06,2.65-3.7,10.92C350.06,211,324.67,246.7,297,242.53s-57.79-22.47-57.79-22.47-31.13,11.87-49.89,5.87C177.18,222.06,153,209.61,165.52,170.87Z"
      fill="#f2f2f2"
    ></path>
    <path
      d="M15.93,299.53s-14.39,29.08-10.29,48,19.71,38.39,35.06,38.14,40.42.48,48.6-10.4,35-50.43,35-50.43S98.54,361.44,62.58,354C44.47,350.17,16.8,314,15.93,299.53Z"
      fill="#e21921"
    ></path>
    <path
      d="M352.63,201.45a24.27,24.27,0,0,1-1.39,4.52c-9.43,13.74-20.95,29.88-42.93,36.16-5.27,1.51-10.9.4-16.41.4a67,67,0,0,1-16.52-2.18,92.34,92.34,0,0,1-22.42-9.5.87.87,0,0,0-.2-.12,131.86,131.86,0,0,1-13.39-9c-9.11,3.09-44.88,13.63-65.88-3.24a36.18,36.18,0,0,1-9.19-11.06.13.13,0,0,0,0-.11c-3-8.05-3.38-22.15,1.26-36.49,0,0-2.25,28.16,12.93,41.48,19.46,17.08,59.81,1.42,60.21,1.26a4,4,0,0,1,3.84.56c22.86,17.79,44.17,24,63.34,18.5,19.38-5.59,33.28-22.15,41.84-35.85a39.67,39.67,0,0,1,8.64-9.65S355,188.5,352.63,201.45Z"
      fill="#dbdbdb"
    ></path>
    <ellipse ry="8.76" rx="7.43" cy="169.98" cx="291.99"></ellipse>
    <ellipse ry="8.76" rx="7.43" cy="159.12" cx="232.88"></ellipse>
    <path
      d="M73.12,170.88s7.89,10.68,2.25,18.7c0,0,6.46,9.41,2,16.55,0,0,7.27,9.33,4.45,13.93,0,0,9.3,8.25,3.94,22.47s-8.29,21.8-24,17.77c0,0,15-2,16.4-13.91s-4.22-20-9.29-21.74c0,0,2.53-14.51-1.13-18.52,0,0,1.46-16.6-6-19.88l4.82-13.57Z"
      fill="#eaa292"
    ></path>
    <path
      opacity=".25"
      d="M380.38 71.15a4 4 0 01-2.6-1c-3.37-2.93-5.89-5-9.55-7.81A4 4 0 11373 56.05c3.83 2.91 6.46 5.1 10 8.14a4 4 0 01.39 5.59A3.92 3.92 0 01380.38 71.15zM359.43 55.17a4 4 0 01-2.19-.66c-31.81-21.11-56.51-23.34-56.76-23.36a4 4 0 01.62-7.9c1.08.09 26.85 2.31 60.52 24.66a4 4 0 01-2.19 7.26z"
      fill="#fff"
    ></path>
    <path
      d="M306.26 67.16a3.89 3.89 0 01-1.69-.38c-3.1-1.46-6.24-2.83-9.33-4.05a4 4 0 012.92-7.37c3.25 1.29 6.54 2.72 9.79 4.26a4 4 0 01-1.69 7.54zM285.61 59.13a3.86 3.86 0 01-1.15-.17c-34.5-10.44-54.53-.38-54.72-.28A4 4 0 01224.4 57 4 4 0 01226 51.67c.91-.48 22.85-11.75 60.72-.29a4 4 0 01-1.15 7.75z"
      fill="#fff"
    ></path>
    <path
      d="M258.46,167.65a146,146,0,0,0-22.35-2.6c-10.52-.19-21.36,9.15-20.53,18.09s4.22,20.86,24.61,19.59l11.9,0s27,11.46,31.36-7.5C293.09,193.54,264.56,179.16,258.46,167.65Z"
      fill="#f7c6ba"
    ></path>
    <path
      d="M283.46,195.18c-4.38,19-31.35,7.5-31.35,7.5l-11.92,0c-20.4,1.3-23.76-10.66-24.61-19.58a12,12,0,0,1,1.09-6c2.11,7.38,7.67,14.35,23.52,13.34h11.92s21,8.88,28.91-2C285.2,192,287.19,194.53,283.46,195.18Z"
      fill="#eaa292"
    ></path>
  </svg>
</button>

<style>
/* From Uiverse.io by d3uceY  - Tags: animation, button, shadow, animated, svg, button hover effect , Christmas */
:root {
  --red: #dc3d2a;
  --blue: #87ceeb;
}

.overflow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10;
  border-radius: 12px;
}

button {
  position: relative;
  width: 190px;
  height: 50px;
  border: 0px solid;
  outline: 0px solid;
  cursor: pointer;
  background: var(--blue);
  border-radius: 12px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

.santa {
  width: 45px;
  position: absolute;
  z-index: -1;
  top: 0px;
  transition: 250ms;
}

.christmas-tree {
  width: 30px;
  position: absolute;
  transform: translateY(30px);
  transition: 300ms;
  transition-delay: 500ms;
}

.christmas-tree-1 {
  left: 0px;
  top: 20px;
}

.christmas-tree-2 {
  right: 0px;
  top: 20px;
}

.cloud-container {
  position: absolute;
  width: 100%;
  transform: translateY(-40px);
  transition: 250ms;
  transition-delay: 250ms;
}

.cloud {
  fill: #fff;
  position: absolute;
}

.cloud:nth-child(1) {
  left: 30px;
  top: 3px;
  animation-name: cloud;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: backwards;
}

.cloud:nth-child(2) {
  right: 30px;
  top: 14px;
  animation-name: cloud;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: backwards;
}

@keyframes cloud {
  0% {
    transform: translateX(0px);
  }

  50% {
    transform: translateX(-4px);
  }

  100% {
    transform: translateX(4px);
  }
}

.snowflake {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.snowflake:nth-child(1) {
  transition: 0.8s;
  filter: drop-shadow(0 0 10px #fffdef);
  width: 30px;
  height: 30px;
  inset: 0;
}

.snowflake:nth-child(2) {
  transition: 0.8s;
  filter: drop-shadow(0 0 10px #fffdef);
  width: 20px;
  height: 20px;
  inset: 0;
}

.snowflake:nth-child(3) {
  transition: 0.8s;
  filter: drop-shadow(0 0 10px #fffdef);
  width: 40px;
  height: 40px;
  inset: 0;
}

.snowflake:nth-child(4) {
  transition: 0.8s;
  filter: drop-shadow(0 0 10px #fffdef);
  width: 10px;
  height: 10px;
  inset: 0;
}

.snowflake:nth-child(5) {
  transition: 0.8s;
  filter: drop-shadow(0 0 10px #fffdef);
  width: 8px;
  height: 8px;
  inset: 0;
}

.sun {
  position: absolute;
  inset: 0;
  margin: auto;
  animation-name: sun;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes sun {
  from {
    transform: rotate(0.5turn);
  }

  to {
    transform: rotate(1turn);
  }
}

.text-container {
  color: white;
  background: var(--red);
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 11;
  transition: 250ms;
  font-size: 20px;
}

/* hover state css */
button:hover {
  box-shadow: 0 0 25px var(--blue);
}

button:hover .christmas-tree {
  transform: translateY(0px);
}

button:hover .cloud-container {
  transform: translateY(0px);
}

button:hover .snowflake:nth-child(1) {
  top: 95%;
  left: 25%;
  animation-name: sun;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  opacity: 1;
}

button:hover .snowflake:nth-child(2) {
  top: -35%;
  left: 10%;
  animation-name: sun;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  opacity: 1;
}

button:hover .snowflake:nth-child(3) {
  opacity: 1;
  top: -80%;
  left: -30%;
  animation-name: sun;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

button:hover .snowflake:nth-child(4) {
  opacity: 1;
  top: 120%;
  left: 80%;
  animation-name: sun;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

button:hover .snowflake:nth-child(5) {
  opacity: 1;
  top: 25%;
  left: 115%;
  animation-name: sun;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

button:hover .santa {
  transform: translate(-30px, -40px);
}

button:hover .text-container {
  transform: translateY(-100%);
}

/* hover state css */

</style>
    

================================================
FILE: Buttons/d3uceY_unlucky-rat-66.html
================================================
<button class="download-btn pixel-corners">
  <div class="button-content">
    <div class="svg-container">
      <svg
        class="download-icon"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path
          d="M19.479 10.092c-.212-3.951-3.473-7.092-7.479-7.092-4.005 0-7.267 3.141-7.479 7.092-2.57.463-4.521 2.706-4.521 5.408 0 3.037 2.463 5.5 5.5 5.5h13c3.037 0 5.5-2.463 5.5-5.5 0-2.702-1.951-4.945-4.521-5.408zm-7.479 6.908l-4-4h3v-4h2v4h3l-4 4z"
        ></path>
      </svg>
    </div>
    <div class="text-container">
      <div class="text">Download</div>
    </div>
  </div>
</button>

<style>
/* From Uiverse.io by d3uceY  - Tags: icon, animation, red, button, hover, active, rounded, download */
.download-btn {
  height: 45px;
  width: 95px;
  cursor: pointer;
  background: white;
  border: none;
  background: #ff0021;
  border-radius: 30px;
  overflow: hidden;
}

.button-content {
  transform: translateY(-45px);
  transition: all 250ms ease-in-out;
}

.svg-container,
.text-container {
  height: 45px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-container .text {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  opacity: 1;
  transition: opacity ease-in-out 250ms;
}

.download-icon {
  height: 25px;
  width: 25px;
  fill: #fff;
  opacity: 0;
  transition: opacity ease-in-out 250ms;
}

/* hover state for the button */
.download-btn:hover .button-content {
  transform: translateY(0px);
}

.download-btn:hover .text {
  opacity: 0;
}

.download-btn:hover .download-icon {
  opacity: 1;
}

.download-btn:focus .download-icon {
  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
  animation: heartbeat 1.5s ease-in-out infinite both;
}

@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

/* hover state for the button */

</style>
    

================================================
FILE: Buttons/d4niz_good-octopus-19.html
================================================
<button class="contactButton"> Contact
  <div class="iconButton">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg>
  </div>
</button>
<style>
/* From Uiverse.io by d4niz - Tags: icon, button, contact */
.contactButton {
  background: #7079f0;
  color: white;
  font-family: inherit;
  padding: 0.45em;
  padding-left: 1.0em;
  font-size: 17px;
  font-weight: 500;
  border-radius: 0.9em;
  border: none;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 1.6em -0.6em #714da6;
  overflow: hidden;
  position: relative;
  height: 2.8em;
  padding-right: 3em;
}

.iconButton {
  margin-left: 1em;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.2em;
  width: 2.2em;
  border-radius: 0.7em;
  box-shadow: 0.1em 0.1em 0.6em 0.2em #7a8cf3;
  right: 0.3em;
  transition: all 0.3s;
}

.contactButton:hover {
  transform: translate(-0.05em, -0.05em);
  box-shadow: 0.15em 0.15em #5566c2;
}

.contactButton:active {
  transform: translate(0.05em, 0.05em);
  box-shadow: 0.05em 0.05em #5566c2;
}
</style>


================================================
FILE: Buttons/dalioscode_swift-dolphin-48.html
================================================
<!-- From Uiverse.io by dalioscode  - Tags: simple, minimalist, gradient, button, light -->
<button
  style="box-shadow: inset 0 2px 4px 0 rgb(2 6 23 / 0.3), inset 0 -2px 4px 0 rgb(203 213 225);"
  class="inline-flex cursor-pointer items-center gap-1 rounded border border-slate-300 bg-gradient-to-b from-slate-50 to-slate-200 px-4 py-2 font-semibold hover:opacity-90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-300 focus-visible:ring-offset-2 active:opacity-100"
>
  Proceed
</button>


    

================================================
FILE: Buttons/dalioscode_swift-wombat-47.html
================================================
<!-- From Uiverse.io by dalioscode  - Tags: flashy, button, dark, modern, gradients -->
<button
  class="relative inline-flex items-center gap-2 px-6 py-3 font-semibold text-slate-50 bg-gradient-to-tr from-slate-900/30 via-slate-900/70 to-slate-900/30 ring-4 ring-slate-900/20 rounded-full overflow-hidden hover:opacity-90 transition-opacity before:absolute before:top-4 before:left-1/2 before:-translate-x-1/2 before:w-[100px] before:h-[100px] before:rounded-full before:bg-gradient-to-b before:from-slate-50/10 before:blur-xl"
>
  Explore discoveries
</button>


    

================================================
FILE: Buttons/danilppzz_loud-badger-4.html
================================================
<!-- From Uiverse.io by danilppzz  - Tags: button, dark, modern, tailwind -->
<button
  class="bg-[#292929] border-2 border-[#3e3e3e] rounded-lg text-white px-6 py-3 text-base hover:border-[#fff] cursor-pointer transition"
>
  Submit
</button>


    

================================================
FILE: Buttons/danilppzz_wet-ape-7.html
================================================
<button class="button">Submit</button>

<style>
/* From Uiverse.io by danilppzz  - Tags: simple, black, button, dark, hoverme */
.button {
  background-color: #292929;
  border: 1px solid #3e3e3e;
  border-radius: 8px;
  color: #fff;
  padding: 14px 24px;
  text-decoration: none;
  font-size: 16px;
  margin: 12px 14px;
  cursor: pointer;
}

.button:hover {
  border: 1px solid #fff;
}

</style>
    

================================================
FILE: Buttons/david-mohseni_brave-shrimp-86.html
================================================
<ul class="wrapper">
  <li class="icon facebook">
    <span class="tooltip">Facebook</span>
    <svg
      viewBox="0 0 320 512"
      height="1.2em"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
      ></path>
    </svg>
  </li>
  <li class="icon twitter">
    <span class="tooltip">Twitter</span>
    <svg
      height="1.8em"
      fill="currentColor"
      viewBox="0 0 48 48"
      xmlns="http://www.w3.org/2000/svg"
      class="twitter"
    >
      <path
        d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"
      ></path>
    </svg>
  </li>
  <li class="icon instagram">
    <span class="tooltip">Instagram</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="1.2em"
      fill="currentColor"
      class="bi bi-instagram"
      viewBox="0 0 16 16"
    >
      <path
        d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"
      ></path>
    </svg>
  </li>
</ul>

<style>
/* From Uiverse.io by david-mohseni  - Tags: tooltip, social, button, share */
.wrapper {
  display: inline-flex;
  list-style: none;
  height: 120px;
  width: 100%;
  padding-top: 40px;
  font-family: "Poppins", sans-serif;
  justify-content: center;
}

.wrapper .icon {
  position: relative;
  background: #fff;
  border-radius: 50%;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #fff;
  color: #fff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #fff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
  background: #1877f2;
  color: #fff;
}

.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
  background: #1da1f2;
  color: #fff;
}

.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
  background: #e4405f;
  color: #fff;
}

</style>
    

================================================
FILE: Buttons/david-mohseni_green-gecko-20.html
================================================
<div class="wrap">
    <button class="btn">
        <span class="text">Volume</span>
    </button>
</div>
<style>
/* From Uiverse.io by david-mohseni - Tags: button */
.wrap {
  text-align: center;
  margin: 20px 0;
}

.btn {
  width: 100px;
  height: 100px;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(200,200,200,.2) 0%, rgba(200,200,200,.2) 2%, transparent 2%, transparent 3%, rgba(200,200,200,.2) 3%, transparent 3%), conic-gradient(white 0%, silver 10%, white 35%, silver 45%, white 60%, silver 70%, white 80%, silver 95%, white 100%);
  border-radius: 50%;
  box-shadow: 0 0px 20px #0005, 0 -0px 20px #fff2;
  outline: 1px solid #fff;
  outline-offset: -2px;
  transition: 1s;
}

.text {
  font-size: 20px;
  font-weight: 700;
  color: #aaa;
  text-align: center;
  text-shadow: 1px 1px 1px #fff;
}

.btn:hover {
  transform: rotate(90deg);
}
</style>


================================================
FILE: Buttons/deepak16375_hungry-tiger-20.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by deepak16375 - Tags: button, animated */
.button {
  padding: .9rem 1.5rem;
  border: .2rem solid #443;
  border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%;
  color: #443;
  background: none;
  cursor: pointer;
  margin-top: 1rem;
  font-size: 1.7rem;
  transition: all .2s linear;
}

.button:hover {
  border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  border: .2rem dashed #443;
}

</style>


================================================
FILE: Buttons/deepak16375_ugly-crab-3.html
================================================
<button class="button">
  Hover me!
</button>
<style>
/* From Uiverse.io by deepak16375 - Tags: gradient, button, animated, gradients, hover effect, hoverme, hover button */
.button {
  font-size: 17px;
  font-weight: bold;
  border: 0px;
  color: white;
  background-color: #1877f2;
  padding: 1rem 2rem;
  border-radius: 15px;
  cursor: pointer;
}

.button:hover {
  background-image: linear-gradient(90deg,
		#B799FF 0%,
		#ACBCFF 50%,
		#AEE2FF 75%,
		#E6FFFD 100%);
  color: black;
  animation: slide 10s linear infinite;
}

@keyframes slide {
  100% {
    background-position: 50rem;
  }
}
</style>


================================================
FILE: Buttons/devestter_serious-insect-76.html
================================================
<button class="button">
   <svg class="saveicon" stroke="currentColor" stroke-width="1.7" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0l-3-3m3 3l3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
   download 
  

</button>
<style>
/* From Uiverse.io by devestter - Tags: button, click, big, css, accept */
.button {
  padding: 12px 19px;
  border: none;
  color: rgb(16, 52, 170);
  cursor: pointer;
  background-color: rgb(190, 219, 253);
  border-radius: 7px;
  font-weight: bold;
  transition: 0.5s;
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 13px;
  box-shadow: rgba(150, 143, 143, 0.2) 0px 2px 8px 0px;
}

.button:hover {
  background-color: rgb(164, 206, 253);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.saveicon {
  width: 17px;
}
</style>


================================================
FILE: Buttons/devestter_stupid-fly-50.html
================================================
<!-- From Uiverse.io by devestter - Tags: button, light, big, accept, click me, add to cart -->
<button class="cursor-pointer bg-gradient-to-r from-slate-950 to-gray-800 font-semibold text-white rounded-lg py-2 px-4 duration-300 hover:translate-y-[-2px]   w-[200px]   hover:shadow-2xl">
  Button
</button>



================================================
FILE: Buttons/devkatyall_fuzzy-warthog-26.html
================================================
<label class="popup">
  <input type="checkbox" />
  <div tabindex="0" class="burger">
    <svg
      viewBox="0 0 24 24"
      fill="white"
      height="20"
      width="20"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 2c2.757 0 5 2.243 5 5.001 0 2.756-2.243 5-5 5s-5-2.244-5-5c0-2.758 2.243-5.001 5-5.001zm0-2c-3.866 0-7 3.134-7 7.001 0 3.865 3.134 7 7 7s7-3.135 7-7c0-3.867-3.134-7.001-7-7.001zm6.369 13.353c-.497.498-1.057.931-1.658 1.302 2.872 1.874 4.378 5.083 4.972 7.346h-19.387c.572-2.29 2.058-5.503 4.973-7.358-.603-.374-1.162-.811-1.658-1.312-4.258 3.072-5.611 8.506-5.611 10.669h24c0-2.142-1.44-7.557-5.631-10.647z"
      ></path>
    </svg>
  </div>
  <nav class="popup-window">
    <legend>Quick Start</legend>
    <ul>
      <li>
        <button>
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.2"
            stroke-linecap="round"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M19 4v6.406l-3.753 3.741-6.463-6.462 3.7-3.685h6.516zm2-2h-12.388l1.497 1.5-4.171 4.167 9.291 9.291 4.161-4.193 1.61 1.623v-12.388zm-5 4c.552 0 1 .449 1 1s-.448 1-1 1-1-.449-1-1 .448-1 1-1zm0-1c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2zm6.708.292l-.708.708v3.097l2-2.065-1.292-1.74zm-12.675 9.294l-1.414 1.414h-2.619v2h-2v2h-2v-2.17l5.636-5.626-1.417-1.407-6.219 6.203v5h6v-2h2v-2h2l1.729-1.729-1.696-1.685z"
            ></path>
          </svg>
          <span>Log In</span>
        </button>
      </li>
      <li>
        <button>
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1"
            stroke-linecap="round"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2.598 9h-1.055c1.482-4.638 5.83-8 10.957-8 6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5c-5.127 0-9.475-3.362-10.957-8h1.055c1.443 4.076 5.334 7 9.902 7 5.795 0 10.5-4.705 10.5-10.5s-4.705-10.5-10.5-10.5c-4.568 0-8.459 2.923-9.902 7zm12.228 3l-4.604-3.747.666-.753 6.112 5-6.101 5-.679-.737 4.608-3.763h-14.828v-1h14.826z"
            ></path>
          </svg>
          <span>Sign Up</span>
        </button>
      </li>
    </ul>
  </nav>
</label>

<style>
/* From Uiverse.io by devkatyall  - Website: https://uiverse.io/Galahhad/old-falcon-43 - Tags: login, button, sign-up, dropdown */
/* The design is inspired from Galahhad*/

.popup {
  --burger-line-width: 1.125em;
  --burger-line-height: 0.125em;
  --burger-offset: 0.625em;
  --burger-bg: #00bf63;
  --burger-color: #333;
  --burger-line-border-radius: 0.1875em;
  --burger-diameter: 3.125em;
  --burger-btn-border-radius: calc(var(--burger-diameter) / 2);
  --burger-line-transition: 0.3s;
  --burger-transition: all 0.1s ease-in-out;
  --burger-hover-scale: 1.1;
  --burger-active-scale: 0.95;
  --burger-enable-outline-color: var(--burger-bg);
  --burger-enable-outline-width: 0.125em;
  --burger-enable-outline-offset: var(--burger-enable-outline-width);
  /* nav */
  --nav-padding-x: 0.25em;
  --nav-padding-y: 0.625em;
  --nav-border-radius: 0.375em;
  --nav-border-color: #ccc;
  --nav-border-width: 0.0625em;
  --nav-shadow-color: rgba(0, 0, 0, 0.2);
  --nav-shadow-width: 0 1px 5px;
  --nav-bg: #eee;
  --nav-font-family: "Poppins", sans-serif;
  --nav-default-scale: 0.8;
  --nav-active-scale: 1;
  --nav-position-left: 0;
  --nav-position-right: unset;
  /* if you want to change sides just switch one property */
  /* from properties to "unset" and the other to 0 */
  /* title */
  --nav-title-size: 0.625em;
  --nav-title-color: #777;
  --nav-title-padding-x: 1rem;
  --nav-title-padding-y: 0.25em;
  /* nav button */
  --nav-button-padding-x: 1rem;
  --nav-button-padding-y: 0.375em;
  --nav-button-border-radius: 0.375em;
  --nav-button-font-size: 17px;
  --nav-button-hover-bg: #00bf63;
  --nav-button-hover-text-color: #fff;
  --nav-button-distance: 0.875em;
  /* underline */
  --underline-border-width: 0.0625em;
  --underline-border-color: #ccc;
  --underline-margin-y: 0.3125em;
}

/* popup settings 👆 */

.popup {
  display: inline-block;
  text-rendering: optimizeLegibility;
  position: relative;
}

.popup input {
  display: none;
}

.burger {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background: var(--burger-bg);
  width: var(--burger-diameter);
  height: var(--burger-diameter);
  border-radius: var(--burger-btn-border-radius);
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: var(--burger-transition);
  outline: var(--burger-enable-outline-width) solid transparent;
  outline-offset: 0;
}

.popup-window {
  transform: scale(var(--nav-default-scale));
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding: var(--nav-padding-y) var(--nav-padding-x);
  background: var(--nav-bg);
  font-family: var(--nav-font-family);
  color: var(--nav-text-color);
  border-radius: var(--nav-border-radius);
  box-shadow: var(--nav-shadow-width) var(--nav-shadow-color);
  border: var(--nav-border-width) solid var(--nav-border-color);
  top: calc(
    var(--burger-diameter) + var(--burger-enable-outline-width) +
      var(--burger-enable-outline-offset)
  );
  left: var(--nav-position-left);
  right: var(--nav-position-right);
  transition: var(--burger-transition);
  margin-top: 10px;
}

.popup-window legend {
  padding: var(--nav-title-padding-y) var(--nav-title-padding-x);
  margin: 0;
  color: var(--nav-title-color);
  font-size: var(--nav-title-size);
  text-transform: uppercase;
}

.popup-window ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.popup-window ul button {
  outline: none;
  width: 100%;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  color: var(--burger-color);
  font-size: var(--nav-button-font-size);
  padding: var(--nav-button-padding-y) var(--nav-button-padding-x);
  white-space: nowrap;
  border-radius: var(--nav-button-border-radius);
  cursor: pointer;
  column-gap: var(--nav-button-distance);
}

.popup-window ul li:nth-child(1) svg,
.popup-window ul li:nth-child(2) svg {
  color: #00bf63;
}

.popup-window ul li:nth-child(4) svg,
.popup-window ul li:nth-child(5) svg {
  color: rgb(153, 153, 153);
}

.popup-window ul li:nth-child(7) svg {
  color: red;
}

.popup-window hr {
  margin: var(--underline-margin-y) 0;
  border: none;
  border-bottom: var(--underline-border-width) solid
    var(--underline-border-color);
}

/* actions */

.popup-window ul button:hover,
.popup-window ul button:focus-visible,
.popup-window ul button:hover svg,
.popup-window ul button:focus-visible svg {
  color: var(--nav-button-hover-text-color);
  background: var(--nav-button-hover-bg);
}

.burger:hover {
  transform: scale(var(--burger-hover-scale));
}

.burger:active {
  transform: scale(var(--burger-active-scale));
}

.burger:focus:not(:hover) {
  outline-color: var(--burger-enable-outline-color);
  outline-offset: var(--burger-enable-outline-offset);
}

.popup input:checked + .burger span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.popup input:checked + .burger span:nth-child(2) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

.popup input:checked + .burger span:nth-child(3) {
  transform: translateX(
    calc(var(--burger-diameter) * -1 - var(--burger-line-width))
  );
}

.popup input:checked ~ nav {
  transform: scale(var(--nav-active-scale));
  visibility: visible;
  opacity: 1;
}

</style>
    

================================================
FILE: Buttons/doniaskima_brown-falcon-48.html
================================================
<button class="btn-60"><span>Button</span></button>

<style>
/* From Uiverse.io by doniaskima - Tags: button, animated */
.btn-60,
.btn-60 *,
.btn-60 :after,
.btn-60 :before,
.btn-60:after,
.btn-60:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-60 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}

.btn-60:disabled {
  cursor: default;
}

.btn-60:-moz-focusring {
  outline: auto;
}

.btn-60 svg {
  display: block;
  vertical-align: middle;
}

.btn-60 [hidden] {
  display: none;
}

.btn-60 {
  background: none;
  box-sizing: border-box;
  color: #000;
  display: block;
  font-weight: 900;
  -webkit-mask-image: none;
  padding: 1.5rem 4rem;
  position: relative;
  text-transform: uppercase;
}

.btn-60 span {
  background: #fff;
  border: 1px solid;
  border-radius: 999px;
  display: grid;
  inset: 0;
  place-items: center;
  pointer-events: none;
  position: absolute;
}

.btn-60:hover span {
  -webkit-animation: jello 0.8s;
  animation: jello 0.8s;
}

@-webkit-keyframes jello {
  0%,
  11.1%,
  to {
    transform: translateZ(0);
  }

  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  0%,
  11.1%,
  to {
    transform: translateZ(0);
  }

  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

</style>


================================================
FILE: Buttons/doniaskima_fluffy-bulldog-70.html
================================================
<button class="btn-57">Button</button>

<style>
/* From Uiverse.io by doniaskima - Tags: button, offset */
.btn-57,
.btn-57 *,
.btn-57 :after,
.btn-57 :before,
.btn-57:after,
.btn-57:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-57 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}

.btn-57:disabled {
  cursor: default;
}

.btn-57:-moz-focusring {
  outline: auto;
}

.btn-57 svg {
  display: block;
  vertical-align: middle;
}

.btn-57 [hidden] {
  display: none;
}

.btn-57 {
  background: none;
  border: 3px solid;
  border-radius: 999px;
  box-sizing: border-box;
  color: #000;
  display: block;
  font-weight: 900;
  -webkit-mask-image: none;
  padding: 20px 60px;
  position: relative;
  text-transform: uppercase;
}

.btn-57:before {
  background: #fff;
  border-radius: 999px;
  content: "";
  inset: 0;
  position: absolute;
  transform: translate(10px, 10px);
  transition: transform 0.2s;
  z-index: -1;
}

.btn-57:hover:before {
  transform: translate(0);
}

</style>


================================================
FILE: Buttons/doniaskima_great-dolphin-45.html
================================================
<button class="btn-56">Button</button>

<style>
/* From Uiverse.io by doniaskima - Tags: button, animated */
.btn-56,
.btn-56 *,
.btn-56 :after,
.btn-56 :before,
.btn-56:after,
.btn-56:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-56 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}

.btn-56:disabled {
  cursor: default;
}

.btn-56:-moz-focusring {
  outline: auto;
}

.btn-56 svg {
  display: block;
  vertical-align: middle;
}

.btn-56 [hidden] {
  display: none;
}

.btn-56 {
  border: 1px solid;
  border-radius: 999px;
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  -webkit-mask-image: none;
  overflow: hidden;
  padding: 1.2rem 3rem;
  position: relative;
  text-transform: uppercase;
}

.btn-56:hover {
  -webkit-animation: pulse 0.5s;
  animation: pulse 0.5s;
  box-shadow: 0 0 0 2em transparent;
}

@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #fff;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #fff;
  }
}

</style>


================================================
FILE: Buttons/doniaskima_happy-moth-17.html
================================================
<button class="btn-23">
  <span class="text">Button</span>
  <span aria-hidden="" class="marquee">Button</span>
</button>

<style>
/* From Uiverse.io by doniaskima - Tags: button, anime */
.btn-23,
.btn-23 *,
.btn-23 :after,
.btn-23 :before,
.btn-23:after,
.btn-23:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-23 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}

.btn-23:disabled {
  cursor: default;
}

.btn-23:-moz-focusring {
  outline: auto;
}

.btn-23 svg {
  display: block;
  vertical-align: middle;
}

.btn-23 [hidden] {
  display: none;
}

.btn-23 {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}

.btn-23 span {
  display: grid;
  inset: 0;
  place-items: center;
  position: absolute;
  transition: opacity 0.2s ease;
}

.btn-23 .marquee {
  --spacing: 5em;
  --start: 0em;
  --end: 5em;
  -webkit-animation: marquee 1s linear infinite;
  animation: marquee 1s linear infinite;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  opacity: 0;
  position: relative;
  text-shadow: #fff var(--spacing) 0, #fff calc(var(--spacing) * -1) 0,
    #fff calc(var(--spacing) * -2) 0;
}

.btn-23:hover .marquee {
  -webkit-animation-play-state: running;
  animation-play-state: running;
  opacity: 1;
}

.btn-23:hover .text {
  opacity: 0;
}

@-webkit-keyframes marquee {
  0% {
    transform: translateX(var(--start));
  }

  to {
    transform: translateX(var(--end));
  }
}

@keyframes marquee {
  0% {
    transform: translateX(var(--start));
  }

  to {
    transform: translateX(var(--end));
  }
}

</style>


================================================
FILE: Buttons/doniaskima_happy-turtle-32.html
================================================
<button class="btn-53">
  <div class="original">Button</div>
  <div class="letters">
    
    <span>B</span>
    <span>U</span>
    <span>T</span>
    <span>T</span>
    <span>O</span>
    <span>N</span>
  </div>
</button>

<style>
/* From Uiverse.io by doniaskima - Tags: button, animated */
.btn-53,
.btn-53 *,
.btn-53 :after,
.btn-53 :before,
.btn-53:after,
.btn-53:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-53 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}

.btn-53:disabled {
  cursor: default;
}

.btn-53:-moz-focusring {
  outline: auto;
}

.btn-53 svg {
  display: block;
  vertical-align: middle;
}

.btn-53 [hidden] {
  display: none;
}

.btn-53 {
  border: 1px solid;
  border-radius: 999px;
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  overflow: hidden;
  padding: 1.2rem 3rem;
  position: relative;
  text-transform: uppercase;
}

.btn-53 .original {
  background: #fff;
  color: #000;
  display: grid;
  inset: 0;
  place-content: center;
  position: absolute;
  transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1);
}

.btn-53:hover .original {
  transform: translateY(100%);
}

.btn-53 .letters {
  display: inline-flex;
}

.btn-53 span {
  opacity: 0;
  transform: translateY(-15px);
  transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1), opacity 0.2s;
}

.btn-53 span:nth-child(2n) {
  transform: translateY(15px);
}

.btn-53:hover span {
  opacity: 1;
  transform: translateY(0);
}

.btn-53:hover span:nth-child(2) {
  transition-delay: 0.1s;
}

.btn-53:hover span:nth-child(3) {
  transition-delay: 0.2s;
}

.btn-53:hover span:nth-child(4) {
  transition-delay: 0.3s;
}

.btn-53:hover span:nth-child(5) {
  transition-delay: 0.4s;
}

.btn-53:hover span:nth-child(6) {
  transition-delay: 0.5s;
}

</style>


================================================
FILE: Buttons/doniaskima_heavy-skunk-100.html
================================================
<button class="btn-25"><span>Button</span></button>

<style>
/* From Uiverse.io by doniaskima - Tags: button, animated */
.btn-25,
.btn-25 *,
.btn-25 :after,
.btn-25 :before,
.btn-25:after,
.btn-25:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-25 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}

.btn-25:disabled {
  cursor: default;
}

.btn-25:-moz-focusring {
  outline: auto;
}

.btn-25 svg {
  display: block;
  vertical-align: middle;
}

.btn-25 [hidden] {
  display: none;
}

.btn-25 {
  --background: #000;
  background: none;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}

.btn-25 span {
  display: block;
  position: relative;
  transition: transform 0.2s ease;
}

.btn-25:after,
.btn-25:before {
  --tilt: 20px;
  background: #fff;
  -webkit-clip-path: polygon(0 50%, 0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
  clip-path: polygon(0 50%, 0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: -webkit-clip-path 0.2s ease;
  transition: clip-path 0.2s ease;
  transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;
  width: 100%;
  z-index: -1;
}

.btn-25:after {
  --thickness: 5px;
  background: var(--background);
  height: calc(100% - var(--thickness) * 2);
  left: var(--thickness);
  top: var(--thickness);
  width: calc(100% - var(--thickness) * 2);
}

.btn-25:hover:after,
.btn-25:hover:before {
  -webkit-clip-path: polygon(
    0 50%,
    var(--tilt) 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    var(--tilt) 100%
  );
  clip-path: polygon(
    0 50%,
    var(--tilt) 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    var(--tilt) 100%
  );
}

</style>


================================================
FILE: Buttons/doniaskima_hungry-donkey-93.html
================================================
<button class="btn-27">
  <span class="text-container">
    <span class="text">Button</span>
  </span>
  <span class="text-container">
    <span aria-hidden="" class="text">Button</span>
  </span>
</button>

<style>
/* From Uiverse.io by doniaskima - Tags: button */
.btn-27,
.btn-27 *,
.btn-27 :after,
.btn-27 :before,
.btn-27:after,
.btn-27:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-27 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}

.btn-27:disabled {
  cursor: default;
}

.btn-27:-moz-focusring {
  outline: auto;
}

.btn-27 svg {
  display: block;
  vertical-align: middle;
}

.btn-27 [hidden] {
  display: none;
}

.btn-27 {
  --tilt: 40deg;
  background: none;
  -webkit-mask-image: none;
  padding: 2rem 5rem;
  perspective: 500px;
  transform-style: preserve-3d;
}

.btn-27 .text-container {
  background: #fff;
  display: grid;
  inset: 0;
  place-items: center;
  position: absolute;
  transform-origin: center center;
  transition: transform 0.2s;
}

.btn-27 .text {
  color: #000;
}

.btn-27:hover .text-container:first-child {
  transform: rotateY(var(--tilt));
}

.btn-27:hover .text-container:nth-child(2) {
  transform: rotateY(calc(var(--tilt) * -1));
}

</style>


================================================
FILE: Buttons/doniaskima_nervous-wombat-2.html
================================================
<button class="btn-12"><span>Button</span></button>

<style>
/* From Uiverse.io by doniaskima - Tags: button */
.btn-12,
.btn-12 *,
.btn-12 :after,
.btn-12 :before,
.btn-12:after,
.btn-12:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-12 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}

.btn-12:disabled {
  cursor: default;
}

.btn-12:-moz-focusring {
  outline: auto;
}

.btn-12 svg {
  display: block;
  vertical-align: middle;
}

.btn-12 [hidden] {
  display: none;
}

.btn-12 {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}

.btn-12 span {
  mix-blend-mode: difference;
}

.btn-12:after,
.btn-12:before {
  background: linear-gradient(
    90deg,
    #fff 25%,
    transparent 0,
    transparent 50%,
    #fff 0,
    #fff 75%,
    transparent 0
  );
  content: "";
  inset: 0;
  position: absolute;
  transform: translateY(var(--progress, 100%));
  transition: transform 0.2s ease;
}

.btn-12:after {
  --progress: -100%;
  background: linear-gradient(
    90deg,
    transparent 0,
    transparent 25%,
    #fff 0,
    #fff 50%,
    transparent 0,
    transparent 75%,
    #fff 0
  );
  z-index: -1;
}

.btn-12:hover:after,
.btn-12:hover:before {
  --progress: 0;
}

</style>


================================================
FILE: Buttons/doniaskima_old-catfish-59.html
================================================
<button class="btn-31">
  <span class="text-container">
    <span class="text">Button</span>
  </span>
</button>

<style>
/* From Uiverse.io by doniaskima - Tags: button, animated */
.btn-31,
.btn-31 *,
.btn-31 :after,
.btn-31 :before,
.btn-31:after,
.btn-31:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-31 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}

.btn-31:disabled {
  cursor: default;
}

.btn-31:-moz-focusring {
  outline: auto;
}

.btn-31 svg {
  display: block;
  vertical-align: middle;
}

.btn-31 [hidden] {
  display: none;
}

.btn-31 {
  border-width: 1px;
  padding: 1rem 2rem;
  position: relative;
  text-transform: uppercase;
}

.btn-31:before {
  --progress: 100%;
  background: #fff;
  -webkit-clip-path: polygon(
    100% 0,
    var(--progress) var(--progress),
    0 100%,
    100% 100%
  );
  clip-path: polygon(
    100% 0,
    var(--progress) var(--progress),
    0 100%,
    100% 100%
  );
  content: "";
  inset: 0;
  position: absolute;
  transition: -webkit-clip-path 0.2s ease;
  transition: clip-path 0.2s ease;
  transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;
}

.btn-31:hover:before {
  --progress: 0%;
}

.btn-31 .text-container {
  display: block;
  overflow: hidden;
  position: relative;
}

.btn-31 .text {
  display: block;
  font-weight: 900;
  mix-blend-mode: difference;
  position: relative;
}

.btn-31:hover .text {
  -webkit-animation: move-up-alternate 0.3s ease forwards;
  animation: move-up-alternate 0.3s ease forwards;
}

@-webkit-keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(80%);
  }

  51% {
    transform: translateY(-80%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(80%);
  }

  51% {
    transform: translateY(-80%);
  }

  to {
    transform: translateY(0);
  }
}

</style>


================================================
FILE: Buttons/doniaskima_selfish-dingo-7.html
================================================
<button class="btn-55"><span>Button</span></button>

<style>
/* From Uiverse.io by doniaskima - Tags: button */
.btn-55,
.btn-55 *,
.btn-55 :after,
.btn-55 :before,
.btn-55:after,
.btn-55:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-55 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}

.btn-55:disabled {
  cursor: default;
}

.btn-55:-moz-focusring {
  outline: auto;
}

.btn-55 svg {
  display: block;
  vertical-align: middle;
}

.btn-55 [hidden] {
  display: none;
}

.btn-55 {
  background: linear-gradient(90deg, blue, red);
  border-radius: 999px;
  box-sizing: border-box;
  color: #000;
  display: block;
  font-weight: 900;
  overflow: hidden;
  padding: 1.8rem 5rem;
  position: relative;
  text-transform: uppercase;
}

.btn-55 span {
  background: #1e293b;
  border-radius: 999px;
  color: #fff;
  display: grid;
  inset: 5px;
  place-items: center;
  position: absolute;
  transition: background 0.3s;
}

.btn-55:hover span {
  background: none;
}

</style>


================================================
FILE: Buttons/doniaskima_shaggy-ape-9.html
================================================
<!-- From Uiverse.io by doniaskima - Tags: button, 2d button, cute button -->
<button type="button" class="inline-block px-6 py-3 mr-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl from-purple-700 to-pink-500 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 hover:scale-110 hover:rotate-2 hover:bg-pink-700 hover:text-pink-200 hover:shadow-lg active:opacity-85">Button</button>




================================================
FILE: Buttons/doniaskima_smart-bear-14.html
================================================
<button class="btn-11"><span>Button</span></button>

<style>
/* From Uiverse.io by doniaskima - Tags: button, design, Button design */
.btn-11,
.btn-11 *,
.btn-11 :after,
.btn-11 :before,
.btn-11:after,
.btn-11:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-11 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}

.btn-11:disabled {
  cursor: default;
}

.btn-11:-moz-focusring {
  outline: auto;
}

.btn-11 svg {
  display: block;
  vertical-align: middle;
}

.btn-11 [hidden] {
  display: none;
}

.btn-11 {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}

.btn-11 span {
  mix-blend-mode: difference;
}

.btn-11:before {
  -webkit-animation: bg-scroll 3s linear infinite;
  animation: bg-scroll 3s linear infinite;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  background: repeating-linear-gradient(
    45deg,
    hsla(0, 0%, 100%, 0.2),
    hsla(0, 0%, 100%, 0.2) 0.7%,
    transparent 0,
    transparent 4%
  );
  content: "";
  display: block;
  height: 300%;
  left: -100%;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.3s, background-color 0.2s;
  width: 300%;
}

.btn-11:hover:before {
  -webkit-animation-play-state: running;
  animation-play-state: running;
  opacity: 1;
}

.btn-11:active:before {
  background-color: #fff;
}

@-webkit-keyframes bg-scroll {
  0% {
    transform: translateX(0);
  }

  to {
    transform: translateX(33%);
  }
}

@keyframes bg-scroll {
  0% {
    transform: translateX(0);
  }

  to {
    transform: translateX(33%);
  }
}

</style>


================================================
FILE: Buttons/doniaskima_stupid-walrus-83.html
================================================
<button class="btn-9"><span>Button</span></button>

<style>
/* From Uiverse.io by doniaskima - Tags: button, animated bar loader, DoubleTriangle  */
.btn-9,
.btn-9 *,
.btn-9 :after,
.btn-9 :before,
.btn-9:after,
.btn-9:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-9 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}

.btn-9:disabled {
  cursor: default;
}

.btn-9:-moz-focusring {
  outline: auto;
}

.btn-9 svg {
  display: block;
  vertical-align: middle;
}

.btn-9 [hidden] {
  display: none;
}

.btn-9 {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}

.btn-9 span {
  mix-blend-mode: difference;
}

.btn-9:after,
.btn-9:before {
  --tilt: 1.2rem;
  background: #fff;
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  content: "";
  display: block;
  height: 100%;
  left: calc(-100% - var(--tilt));
  position: absolute;
  top: 0;
  transform: translateX(var(--progress, 0));
  transition: transform 0.2s ease;
  width: calc(100% + var(--tilt));
}

.btn-9:after {
  left: 100%;
  transform: translateX(var(--progress, 0)) rotate(180deg);
  z-index: -1;
}

.btn-9:hover:before {
  --progress: 100%;
}

.btn-9:hover:after {
  --progress: -100%;
}

</style>


================================================
FILE: Buttons/doniaskima_swift-newt-52.html
================================================
<button class="btn-96"><span>Button</span></button>

<style>
/* From Uiverse.io by doniaskima - Tags: bounce animation, 3d button */
.btn-96,
.btn-96 *,
.btn-96 :after,
.btn-96 :before,
.btn-96:after,
.btn-96:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-96 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}

.btn-96:disabled {
  cursor: default;
}

.btn-96:-moz-focusring {
  outline: auto;
}

.btn-96 svg {
  display: block;
  vertical-align: middle;
}

.btn-96 [hidden] {
  display: none;
}

.btn-96 {
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  -webkit-mask-image: none;
  padding: 2rem 5rem;
  perspective: 800px;
  position: relative;
  text-transform: uppercase;
  transform-style: preserve-3d;
}

.btn-96 span {
  background: #fff;
  color: #000;
  display: grid;
  inset: 0;
  place-items: center;
  position: absolute;
  transform: rotateX(0deg);
  transform-origin: top center;
  transition: 0.2s;
}

.btn-96:hover span {
  transform: rotateX(35deg);
}

.btn-96:after,
.btn-96:before {
  background: #ddd;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: rotateX(0deg);
  width: 100%;
  z-index: -1;
}

.btn-96:after {
  background: #ccc;
  width: 0;
}

.btn-96:hover:after {
  -webkit-animation: progress-bar 1.2s;
  animation: progress-bar 1.2s;
}

@-webkit-keyframes progress-bar {
  0% {
    opacity: 1;
    width: 0;
  }

  10% {
    opacity: 1;
    width: 15%;
  }

  25% {
    opacity: 1;
    width: 25%;
  }

  40% {
    opacity: 1;
    width: 35%;
  }

  55% {
    opacity: 1;
    width: 75%;
  }

  60% {
    opacity: 1;
    width: 100%;
  }

  to {
    opacity: 0;
    width: 100%;
  }
}

@keyframes progress-bar {
  0% {
    opacity: 1;
    width: 0;
  }

  10% {
    opacity: 1;
    width: 15%;
  }

  25% {
    opacity: 1;
    width: 25%;
  }

  40% {
    opacity: 1;
    width: 35%;
  }

  55% {
    opacity: 1;
    width: 75%;
  }

  60% {
    opacity: 1;
    width: 100%;
  }

  to {
    opacity: 0;
    width: 100%;
  }
}

</style>


================================================
FILE: Buttons/doniaskima_weak-penguin-24.html
================================================
<button class="btn-5"><span>Button</span></button>

<style>
/* From Uiverse.io by doniaskima - Tags: button, bouncing animation, DoubleTriangle  */
.btn-5,
.btn-5 *,
.btn-5 :after,
.btn-5 :before,
.btn-5:after,
.btn-5:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-5 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}

.btn-5:disabled {
  cursor: default;
}

.btn-5:-moz-focusring {
  outline: auto;
}

.btn-5 svg {
  display: block;
  vertical-align: middle;
}

.btn-5 [hidden] {
  display: none;
}

.btn-5 {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}

.btn-5 span {
  mix-blend-mode: difference;
}

.btn-5:before {
  --tilt: 1.2rem;
  background: #fff;
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  content: "";
  display: block;
  height: 100%;
  left: calc(-100% - var(--tilt));
  position: absolute;
  top: 0;
  transform: translateX(var(--progress, 0));
  transition: transform 0.2s ease;
  width: calc(100% + var(--tilt));
}

.btn-5:hover:before {
  --progress: 100%;
}

</style>


================================================
FILE: Buttons/doniaskima_wicked-eagle-30.html
================================================
<button class="btn-17">
  <span class="text-container">
    <span class="text">Button</span>
  </span>
</button>

<style>
/* From Uiverse.io by doniaskima - Tags: button */
.btn-17,
.btn-17 *,
.btn-17 :after,
.btn-17 :before,
.btn-17:after,
.btn-17:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-17 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}

.btn-17:disabled {
  cursor: default;
}

.btn-17:-moz-focusring {
  outline: auto;
}

.btn-17 svg {
  display: block;
  vertical-align: middle;
}

.btn-17 [hidden] {
  display: none;
}

.btn-17 {
  border-radius: 99rem;
  border-width: 2px;
  padding: 0.8rem 3rem;
  z-index: 0;
}

.btn-17,
.btn-17 .text-container {
  overflow: hidden;
  position: relative;
}

.btn-17 .text-container {
  display: block;
  mix-blend-mode: difference;
}

.btn-17 .text {
  display: block;
  position: relative;
}

.btn-17:hover .text {
  -webkit-animation: move-up-alternate 0.3s forwards;
  animation: move-up-alternate 0.3s forwards;
}

@-webkit-keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(80%);
  }

  51% {
    transform: translateY(-80%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(80%);
  }

  51% {
    transform: translateY(-80%);
  }

  to {
    transform: translateY(0);
  }
}

.btn-17:after,
.btn-17:before {
  --skew: 0.2;
  background: #fff;
  content: "";
  display: block;
  height: 102%;
  left: calc(-50% - 50% * var(--skew));
  pointer-events: none;
  position: absolute;
  top: -104%;
  transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));
  transition: transform 0.2s ease;
  width: 100%;
}

.btn-17:after {
  --progress: 0%;
  left: calc(50% + 50% * var(--skew));
  top: 102%;
  z-index: -1;
}

.btn-17:hover:before {
  --progress: 100%;
}

.btn-17:hover:after {
  --progress: -102%;
}

</style>


================================================
FILE: Buttons/doniaskima_wise-goat-6.html
================================================
<button class="btn-31">
  <span class="text-container">
    <span class="text">Button</span>
  </span>
</button>

<style>
/* From Uiverse.io by doniaskima - Tags: button, bounce animation */
.btn-31,
.btn-31 *,
.btn-31 :after,
.btn-31 :before,
.btn-31:after,
.btn-31:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-31 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  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;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}

.btn-31:disabled {
  cursor: default;
}

.btn-31:-moz-focusring {
  outline: auto;
}

.btn-31 svg {
  display: block;
  vertical-align: middle;
}

.btn-31 [hidden] {
  display: none;
}

.btn-31 {
  border-width: 1px;
  padding: 1rem 2rem;
  position: relative;
  text-transform: uppercase;
}

.btn-31:before {
  --progress: 100%;
  background: #fff;
  -webkit-clip-path: polygon(
    100% 0,
    var(--progress) var(--progress),
    0 100%,
    100% 100%
  );
  clip-path: polygon(
    100% 0,
    var(--progress) var(--progress),
    0 100%,
    100% 100%
  );
  content: "";
  inset: 0;
  position: absolute;
  transition: -webkit-clip-path 0.2s ease;
  transition: clip-path 0.2s ease;
  transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;
}

.btn-31:hover:before {
  --progress: 0%;
}

.btn-31 .text-container {
  display: block;
  overflow: hidden;
  position: relative;
}

.btn-31 .text {
  display: block;
  font-weight: 900;
  mix-blend-mode: difference;
  position: relative;
}

.btn-31:hover .text {
  -webkit-animation: move-up-alternate 0.3s ease forwards;
  animation: move-up-alternate 0.3s ease forwards;
}

@-webkit-keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(80%);
  }

  51% {
    transform: translateY(-80%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(80%);
  }

  51% {
    transform: translateY(-80%);
  }

  to {
    transform: translateY(0);
  }
}

</style>


================================================
FILE: Buttons/dvirpro_stupid-impala-26.html
================================================
<button class="like-button"></button>

<style>
/* From Uiverse.io by dvirpro  - Tags: simple, icon, red, button, like */
.like-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff5252, #d50000);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
  color: #fff;
  font-family: "Arial", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  width: 90px;
  height: 90px;
  position: relative;
  overflow: hidden;
}

.like-button:before {
  content: "\2764"; /* Heart Icon */
  font-size: 50px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease-in-out;
}

.like-button:hover {
  animation: heartBeat 0.6s infinite;
}

.like-button:hover:before {
  transform: translate(-50%, -50%) scale(1);
}

.like-button:active:after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

@keyframes heartBeat {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

</style>
    

================================================
FILE: Buttons/dylanharriscameron_good-dingo-46.html
================================================
<button class="delete-button">
  ␡
</button>
<style>
/* From Uiverse.io by dylanharriscameron - Tags: button, delete, keyboard */
.delete-button {
  background-color: #000;
  color: #fff;
  font-size: 44px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 8px;
  width: 60px;
  height: 65px;
  border-radius: 15px 15px 12px 12px;
  cursor: pointer;
  position: relative;
  will-change: transform;
  transition: all .1s ease-in-out 0s;
  user-select: none;
  /* Add gradient shading to each side */
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  background-position: bottom right, bottom right;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4),
    inset -4px -8px 0px rgba(0, 0, 0, 0.3),
    0px 2px 1px rgba(0, 0, 0, 0.3),
    0px 2px 1px rgba(255, 255, 255, 0.1);
  transform: perspective(70px) rotateX(5deg) rotateY(0deg);
}

.delete-button::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.5));
  z-index: -1;
  border-radius: 15px;
  box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1),
    inset 4px -8px 0px rgba(0, 0, 0, 0.3);
  transition: all .1s ease-in-out 0s;
}

.delete-button::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  background-position: bottom right, bottom right;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
  border-radius: 15px;
  transition: all .1s ease-in-out 0s;
}

.delete-button:active {
  will-change: transform;
  transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(0.96);
  height: 64px;
  border: 0.25px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2),
    inset -4px -6px 0px rgba(0, 0, 0, 0.8),
    0px 1px 0px rgba(0, 0, 0, 0.9),
    0px 1px 0px rgba(255, 255, 255, 0.2);
  transition: all .1s ease-in-out 0s;
}

.delete-button::after:active {
  background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2));
}

.delete-button:active::before {
  content: "";
  display: block;
  position: absolute;
  top: 5%;
  left: 20%;
  width: 50%;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.1);
  animation: overlay 0.1s ease-in-out 0s;
  pointer-events: none;
}

@keyframes overlay {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.delete-button:focus {
  outline: none;
}
</style>


================================================
FILE: Buttons/e-coders_breezy-cobra-8.html
================================================
<button class="button-3d button-3d-red"> Button
</button>
<style>
/* From Uiverse.io by e-coders - Tags: button */
button.button-3d {
 margin: 10px;
 border-right: 0;
 border-left: 0;
 border-top: 0;
 font-family: inherit;
 font-size: 24px;
 padding: 8px;
 color: rgba(255, 255, 255, 0.788);
}

button.button-3d:active {
 border-bottom: 0;
}

button.button-3d {
 cursor: pointer;
}

/* RED */
.button-3d-red {
 border-bottom: 3px solid rgb(117, 28, 28);
 background-color: rgb(248, 91, 91);
}
</style>


================================================
FILE: Buttons/e-coders_gentle-seahorse-53.html
================================================
<button> manage
</button>
<style>
/* From Uiverse.io by e-coders - Tags: simple, button */
button {
 font-family: Roboto, Arial, Sans-Serif;
 font-size: 14px;
 text-align: center;
 letter-spacing: 0.5px;
 color: #ffffff;
 background-color: #065fd4;
 border: 0;
 box-shadow: none;
 border-radius: 2px;
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 16px;
 padding-right: 16px;
 text-transform: uppercase;
 font-weight: 500;
}
</style>


================================================
FILE: Buttons/e-coders_great-falcon-16.html
================================================

<button>Button</button>
<style>
/* From Uiverse.io by e-coders - Tags: button */
button {
 background-color: #111827;
 border: 1px solid transparent;
 border-radius: .75rem;
 box-sizing: border-box;
 color: #FFFFFF;
 cursor: pointer;
 flex: 0 0 auto;
 font-family: "Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
 font-size: 1.125rem;
 font-weight: 600;
 line-height: 1.5rem;
 padding: .75rem 1.2rem;
 text-align: center;
 text-decoration: none #6B7280 solid;
 text-decoration-thickness: auto;
 transition-duration: .2s;
 transition-property: background-color,border-color,color,fill,stroke;
 transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
 width: auto;
}

button:hover {
 background-color: #374151;
}

button:focus {
 box-shadow: none;
 outline: 2px solid white;
 outline-offset: 2px;
}

@media (min-width: 768px) {
 button {
  padding: .75rem 1.5rem;
 }
}
</style>


================================================
FILE: Buttons/e-coders_nervous-chipmunk-49.html
================================================

<button>Github Button!</button>
<style>
/* From Uiverse.io by e-coders - Tags: button, github */
button {
 appearance: none;
 background-color: #FAFBFC;
 border: 1px solid rgba(27, 31, 35, 0.15);
 border-radius: 6px;
 box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
 box-sizing: border-box;
 color: #24292E;
 cursor: pointer;
 display: inline-block;
 font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 font-size: 14px;
 font-weight: 500;
 line-height: 20px;
 list-style: none;
 padding: 6px 16px;
 position: relative;
 transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
 vertical-align: middle;
 white-space: nowrap;
 word-wrap: break-word;
}

button:hover {
 background-color: #F3F4F6;
 text-decoration: none;
 transition-duration: 0.1s;
}

button:disabled {
 background-color: #FAFBFC;
 border-color: rgba(27, 31, 35, 0.15);
 color: #959DA5;
 cursor: default;
}

button:active {
 background-color: #EDEFF2;
 box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
 transition: none 0s;
}

button:focus {
 outline: 1px transparent;
}

button:before {
 display: none;
}

button:-webkit-details-marker {
 display: none;
}
</style>


================================================
FILE: Buttons/e-coders_new-shrimp-32.html
================================================

<button>Button</button>
<style>
/* From Uiverse.io by e-coders - Tags: simple, minimalist, button */
button {
 appearance: none;
 background-color: transparent;
 border: 0.125em solid #1A1A1A;
 border-radius: 0.9375em;
 box-sizing: border-box;
 color: #3B3B3B;
 cursor: pointer;
 display: inline-block;
 font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
 font-size: 16px;
 font-weight: 600;
 line-height: normal;
 margin: 0;
 min-height: 3.75em;
 min-width: 0;
 outline: none;
 padding: 1em 2.3em;
 text-align: center;
 text-decoration: none;
 transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
 will-change: transform;
}

button:disabled {
 pointer-events: none;
}

button:hover {
 color: #fff;
 background-color: #1A1A1A;
 box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
 transform: translateY(-2px);
}

button:active {
 box-shadow: none;
 transform: translateY(0);
}
</style>


================================================
FILE: Buttons/e-coders_smart-ladybug-29.html
================================================

<button><span class="text">Hover me</span><span>Thanks!</span></button>
<style>
/* From Uiverse.io by e-coders - Tags: button */
button {
 position: relative;
 overflow: hidden;
 border: 1px solid #18181a;
 color: #18181a;
 display: inline-block;
 font-size: 15px;
 line-height: 15px;
 padding: 18px 18px 17px;
 text-decoration: none;
 cursor: pointer;
 background: #fff;
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
}

button span:first-child {
 position: relative;
 transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
 z-index: 10;
}

button span:last-child {
 color: white;
 display: block;
 position: absolute;
 bottom: 0;
 transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
 z-index: 100;
 opacity: 0;
 top: 50%;
 left: 50%;
 transform: translateY(225%) translateX(-50%);
 height: 14px;
 line-height: 13px;
}

button:after {
 content: "";
 position: absolute;
 bottom: -50%;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: black;
 transform-origin: bottom center;
 transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
 transform: skewY(9.3deg) scaleY(0);
 z-index: 50;
}

button:hover:after {
 transform-origin: bottom center;
 transform: skewY(9.3deg) scaleY(2);
}

button:hover span:last-child {
 transform: translateX(-50%) translateY(-50%);
 opacity: 1;
 transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}
</style>


================================================
FILE: Buttons/eduardo-amaro-maciel_honest-bobcat-27.html
================================================
<!-- From Uiverse.io by eduardo-amaro-maciel - Tags: button, send -->
<button class="btn group flex items-center bg-transparent p-2 px-6 text-xl font-thin tracking-widest text-white">
  <span class="relative pr-4 pb-1 text-black after:transition-transform after:duration-500 after:ease-out after:absolute after:bottom-0 after:left-0 after:block after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 after:bg-blue-500 after:content-[''] after:group-hover:origin-bottom-left after:group-hover:scale-x-100">Hover Me</span>
  <svg class="-translate-x-2 fill-slate-700 transition-all duration-300 ease-out group-hover:translate-x-1 group-hover:scale-x-105 group-hover:fill-blue-500" id="arrow-horizontal" xmlns="http://www.w3.org/2000/svg" width="30" height="10" viewBox="0 0 46 16">
    <path id="Path_10" data-name="Path 10" d="M8,0,6.545,1.455l5.506,5.506H-30V9.039H12.052L6.545,14.545,8,16l8-8Z" transform="translate(30)"></path>
  </svg>
</button>



================================================
FILE: Buttons/eduardo-amaro-maciel_slimy-stingray-64.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by eduardo-amaro-maciel - Tags: blue, minimalist, button, hover, border, hover effect, css effect */
.button {
  width: 150px;
  height: 50px;
  border-radius: 50px;
  background-color: transparent;
  border: 2px solid #000814;
  overflow: hidden;
  position: relative;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  transition: 300ms ease;
}

.button::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #003566;
  top: 100%;
  left: 0;
  transition: 500ms ease;
}

.button:hover {
  color: #fff;
  letter-spacing: 3px;
}

.button:hover::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

</style>


================================================
FILE: Buttons/eirikvold_foolish-grasshopper-52.html
================================================
<button>
  <div class="svg-wrapper-1">
    <div class="svg-wrapper">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="none" d="M0 0h24v24H0z"></path>
        <path fill="currentColor" d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"></path>
      </svg>
    </div>
  </div>
  <span>Send</span>
</button>
<style>
/* From Uiverse.io by eirikvold - Tags: button */
button {
  font-family: inherit;
  font-size: 18px;
  background: linear-gradient(to bottom, #4dc7d9 0%,#66a6ff 100%);
  color: white;
  padding: 0.8em 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 25px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

button:hover {
  transform: translateY(-3px);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

button:active {
  transform: scale(0.95);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

button span {
  display: block;
  margin-left: 0.4em;
  transition: all 0.3s;
}

button svg {
  width: 18px;
  height: 18px;
  fill: white;
  transition: all 0.3s;
}

button .svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  margin-right: 0.5em;
  transition: all 0.3s;
}

button:hover .svg-wrapper {
  background-color: rgba(255, 255, 255, 0.5);
}

button:hover svg {
  transform: rotate(45deg);
}


</style>


================================================
FILE: Buttons/ekhassan_friendly-dolphin-62.html
================================================
<!-- From Uiverse.io by ekhassan  - Tags: button -->
<button
  class="cursor-pointer bg-violet-500 rounded-md text-white font-semibold transition duration-300 ease-in-out hover:bg-violet-700 hover:ring-2 hover:ring-violet-800 hover:shadow-xl hover:shadow-violet-500 focus:ring-violet-300 focus:shadow-violet-400 px-5 py-2"
>
  Button
</button>


    

================================================
FILE: Buttons/elijahgummer_angry-quail-96.html
================================================
<!-- From Uiverse.io by elijahgummer  - Tags: glassmorphism, blue, button, glow, yes, shimmer -->
<button
  class="group/button relative inline-flex items-center justify-center overflow-hidden rounded-md bg-blue-500/30 backdrop-blur-lg px-6 py-2 text-base font-semibold text-white transition-all duration-300 ease-in-out hover:scale-110 hover:shadow-xl hover:shadow-blue-600/50 border border-white/20"
>
  <span class="text-lg">Shimmer</span>
  <div
    class="absolute inset-0 flex h-full w-full justify-center [transform:skew(-13deg)_translateX(-100%)] group-hover/button:duration-1000 group-hover/button:[transform:skew(-13deg)_translateX(100%)]"
  >
    <div class="relative h-full w-10 bg-white/30"></div>
  </div>
</button>


    

================================================
FILE: Buttons/elijahgummer_breezy-liger-35.html
================================================
<div class="galaxy-button">
  <button class="space-button">
    <span class="backdrop"></span>
    <span class="galaxy"></span>
    <label class="text">Space</label>
  </button>
  <div class="bodydrop"></div>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, button, moon, sun, space, cool */
.text {
  translate: 2% -6%;
  letter-spacing: 0.01ch;
  color: hsl(0 0% calc(60% + (var(--active) * 26%)));
  z-index: 999;
  padding: 0 34px;
  font-weight: 600;
}
.text::before {
  content: "";
  position: absolute;
  top: -290%;
  left: 90%;
  rotate: -45deg;
  width: 5em;
  height: 1px;
  background: linear-gradient(90deg, #ffffff, transparent);
  animation: 4s shootingStar ease-in-out infinite;
  transition: 1s ease;
  z-index: -1;
  animation-delay: 1s;
  display: none;
}
.text::after {
  content: "";
  display: none;
  position: absolute;
  top: -290%;
  left: 10%;
  rotate: -45deg;
  width: 5em;
  height: 1px;
  background: linear-gradient(90deg, #ffffff, transparent);
  animation: 7s shootingStar ease-in-out infinite;
  animation-delay: 3s;
}
.space-button:hover .text::before,
.space-button:hover .text::after {
  display: block;
}
.galaxy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 1;
  box-shadow:
    140px 20px #fff,
    425px 20px #fff,
    70px 120px #fff,
    20px 130px #fff,
    110px 80px #fff,
    280px 80px #fff,
    250px 350px #fff,
    280px 230px #fff,
    220px 190px #fff,
    450px 100px #fff,
    380px 80px #fff,
    520px 50px #fff;
  z-index: -1;
  transition: all 1.5s ease-in-out;
  animation: 1s glowing-stars linear alternate infinite;
  animation-delay: 0.4s;
}
.galaxy::after {
  content: "";
  position: absolute;
  top: -150px;
  left: -65px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 1;
  box-shadow:
    490px 330px #fff,
    420px 300px #fff,
    320px 280px #fff,
    380px 350px #fff,
    546px 170px #fff,
    420px 180px #fff,
    370px 150px #fff,
    200px 250px #fff,
    80px 20px #fff,
    190px 50px #fff,
    270px 20px #fff,
    120px 230px #fff,
    350px -1px #fff,
    150px 369px #fff;
  z-index: -1;
  transition: all 2s ease-in-out;
  animation: 1s glowing-stars linear alternate infinite;
  animation-delay: 0.8s;
}
.space-button {
  --cut: 0.1em;
  --active: 0;
  --bg: radial-gradient(
        120% 120% at 126% 126%,
        hsl(0 calc(var(--active) * 97%) 98% / calc(var(--active) * 0.9)) 40%,
        /* Changed hue to 0 for red */ transparent 50%
      )
      calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
    radial-gradient(
        120% 120% at 120% 120%,
        hsl(0 calc(var(--active) * 97%) 70% / calc(var(--active) * 1)) 30%,
        /* Changed hue to 0 for red */ transparent 70%
      )
      calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
    hsl(0 calc(var(--active) * 100%) calc(12% - (var(--active) * 8%))); /* Changed hue to 0 for red */
  background: var(--bg);
  font-size: 1.4rem;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  padding: 0.9em 1.3em;
  display: flex;
  align-items: center;
  gap: 0.25em;
  white-space: nowrap;
  border-radius: 2rem;
  position: relative;
  box-shadow:
    0 0 calc(var(--active) * 6em) calc(var(--active) * 3em)
      hsla(12, 97%, 61%, 0.3),
    0 0.05em 0 0
      hsl(0, calc(var(--active) * 97%), calc((var(--active) * 50%) + 30%)) inset,
    0 -0.05em 0 0 hsl(0, calc(var(--active) * 97%), calc(var(--active) * 10%)) inset;

  transition:
    box-shadow 0.25s ease-out,
    scale 0.25s,
    background 0.25s;
  scale: calc(1 + (var(--active) * 0.1));
  transform-style: preserve-3d;
  perspective: 100vmin;
  overflow: hidden;
}
.space-button:active {
  scale: 1;
  --bg: radial-gradient(
        120% 120% at 126% 126%,
        hsl(245 calc(var(--active) * 97%) 98% / calc(var(--active) * 0.9)) 40%,
        transparent 50%
      )
      calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
    radial-gradient(
        120% 120% at 120% 120%,
        hsl(245 calc(var(--active) * 97%) 70% / calc(var(--active) * 1)) 30%,
        transparent 70%
      )
      calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
    hsl(245 calc(var(--active) * 100%) calc(12% - (var(--active) * 8%)));
  box-shadow:
    0 0 calc(var(--active) * 6em) calc(var(--active) * 3em)
      hsl(245 97% 61% / 0.5),
    0 0.05em 0 0
      hsl(245 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
    0 -0.05em 0 0 hsl(245 calc(var(--active) * 97%) calc(var(--active) * 10%)) inset;
  background: var(--bg);
}

/* Apply wobble animation on active button */
.space-button:active .text {
  font-weight: 300;
  animation:
    wobble 0.6s ease-in-out infinite,
    blurMove 1.5s ease-in-out infinite;
  text-shadow:
    5px 5px 20px rgba(255, 255, 255, 0.8),
    10px 10px 30px rgba(255, 0, 255, 0.6);
}

/* Wobble animation */
@keyframes wobble {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-2px, -10px);
  }
  50% {
    transform: translate(2px, 3px);
  }
  75% {
    transform: translate(-1px, 5px);
  }
}

/* Blur move animation */
@keyframes blurMove {
  0%,
  100% {
    text-shadow:
      5px 5px 20px rgba(255, 255, 255, 0.8),
      10px 10px 30px rgba(255, 0, 255, 0.6);
  }
  50% {
    filter: blur(1px);
    text-shadow:
      10px 10px 25px rgba(255, 255, 255, 0.8),
      15px 15px 35px rgba(255, 0, 255, 0.6);
  }
}

.galaxy:active::before {
  animation: circling 2s linear infinite; /* Animation for circling effect */
}
.galaxy:active::after {
  animation: circling 1.5s linear infinite; /* Animation for circling effect */
}

@keyframes circling {
  0% {
    transform: translate(-10px, -20%) rotate(0deg);
  }
  100% {
    transform: translate(-10px, -20%) rotate(200deg);
  }
}
.galaxy {
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  overflow: hidden;
  opacity: var(--active);
  transition: opacity 0.25s;
}

@-webkit-keyframes move-x {
  0% {
    translate: -100px 0;
  }
  100% {
    translate: 100px 0;
  }
}
@keyframes move-x {
  0% {
    translate: -100px 0;
  }
  100% {
    translate: 100px 0;
  }
}
@-webkit-keyframes move-y {
  0% {
    transform: translate(0, -50px);
  }
  100% {
    transform: translate(0, 50px);
  }
}
@keyframes move-y {
  0% {
    transform: translate(0, -50px);
  }
  100% {
    transform: translate(0, 50px);
  }
}

.backdrop {
  position: absolute;
  inset: var(--cut);
  background: var(--bg);
  border-radius: 2rem;
  transition: background 0.25s;
}

@supports (selector(:has(:is(+ *)))) {
  body:has(button:is(:hover, :focus-visible)) {
    --active: 1;
    --play-state: running;
  }
  .bodydrop {
    display: none;
  }
}

.space-button:is(:hover, :focus-visible) ~ :is(.bodydrop, .particle-pen) {
  --active: 1;
  --play-state: running;
}

.space-button:is(:hover, :focus-visible) {
  --active: 1;
  --play-state: running;
}

.galaxy-button {
  position: relative;
}

/* ANIMATIONS */
@keyframes shootingStar {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-55em) translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateX(-70em) translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateX(0) translateY(0);
    opacity: 0;
  }
}

@keyframes glowing-stars {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

</style>
    

================================================
FILE: Buttons/elijahgummer_bright-chicken-11.html
================================================
<!-- From Uiverse.io by elijahgummer  - Tags: black, button, star, github, modern, tailwind, shimmer, api -->
<a
  class="flex overflow-hidden items-center text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-black text-white shadow hover:bg-black/90 h-9 px-4 py-2 max-w-52 whitespace-pre md:flex group relative w-full justify-center gap-2 rounded-md transition-all duration-300 ease-out hover:ring-2 hover:ring-black hover:ring-offset-2"
  href="#"
>
  <span
    class="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-white opacity-10 transition-all duration-1000 ease-out group-hover:-translate-x-40"
  ></span>
  <div class="flex items-center">
    <svg viewBox="0 0 438.549 438.549" class="w-4 h-4 fill-current">
      <path
        d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
      ></path>
    </svg>
    <span class="ml-1 text-white">Star on GitHub</span>
  </div>
  <div class="ml-2 flex items-center gap-1 text-sm md:flex">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden="true"
      data-slot="icon"
      class="w-4 h-4 text-gray-500 transition-all duration-300 group-hover:text-yellow-300"
    >
      <path
        fill-rule="evenodd"
        d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
        clip-rule="evenodd"
      ></path>
    </svg>
    <span
      class="inline-block tabular-nums tracking-wider font-display font-medium text-white"
      >6</span
    >
  </div>
</a>


    

================================================
FILE: Buttons/elijahgummer_fluffy-gecko-12.html
================================================
<input class="toggle-checkbox" id="toggle-checkbox" type="checkbox" />
<label class="button" for="toggle-checkbox">
  <div class="content">
    <span class="letters">
      <span style="--i: 1" data-label="C">C</span>
      <span style="--i: 2" data-label="o">o</span>
      <span style="--i: 3" data-label="p">p</span>
      <span style="--i: 4" data-label="y">y</span>
      <span style="--i: 5" data-label="L">L</span>
      <span style="--i: 6" data-label="i">i</span>
      <span style="--i: 7" data-label="n">n</span>
      <span style="--i: 8" data-label="k">k</span>
    </span>
    <div class="icon-container">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="1.6"
        fill="none"
        data-slot="icon"
        class="icon"
      >
        <path
          class="bm"
          d="M12.0017 6V4M8.14886 7.40371L6.86328 5.87162M15.864 7.40367L17.1496 5.87158"
        ></path>
        <path
          d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
          stroke-linejoin="round"
          stroke-linecap="round"
          class="link"
        ></path>
      </svg>
    </div>
  </div>
</label>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, link, purple, button, hover, modern, copy */
.toggle-checkbox {
  display: none;
}
.button {
  --white: #ffffff;
  cursor: pointer;
  background: linear-gradient(to bottom, #6e3bff, #7e51ff);
  color: #ffffff;
  border: 1px solid #af93ff;
  border-radius: 8px;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  box-shadow:
    0 8px 10px -4px #503b89,
    0 0 0 2px#562cce;
  font-size: 25px;
}

.icon path.bm {
  stroke-dasharray: 3;
  stroke-dashoffset: 3;
  stroke-width: 1px;
  transform: translateX(-23px) translateY(16px) scale(2) rotate(-44deg);
}

.toggle-checkbox:checked + .button .icon path.bm {
  animation: bump 1s ease forwards;
}
.toggle-checkbox:checked + .button .icon {
  animation: beat 1s ease-in-out forwards;
}

.letters span:nth-child(5) {
  margin-left: 5px;
}
.letters span:nth-child(6) {
  margin-left: 1px;
}

.button:active .content {
  box-shadow:
    inset -1px 12px 8px -5px rgba(71, 0, 137, 0.4),
    inset 0px -3px 8px 0px #d190ff;
}

@keyframes bump {
  20% {
    stroke-dasharray: 3;
    stroke-dashoffset: 3;
  }
  30% {
    stroke-dasharray: 5;
    stroke-dashoffset: 3;
  }
  30.1% {
    stroke-dasharray: 3;
    stroke-dashoffset: 6;
  }
  75% {
    stroke-dasharray: 3;
    stroke-dashoffset: 3;
  }
  100% {
    stroke-dasharray: 3;
    stroke-dashoffset: 3;
  }
}

@keyframes beat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow:
    inset 0 -2px 4px 0 #c6c6c6,
    0 3px 6px rgba(0, 0, 0, 0.25);
  text-align: center;
  z-index: 10;
}

.icon-container .icon {
  width: 25px;
  height: 30px;
  stroke: #592cd6;
  margin-top: -2px;
  z-index: 4;
  transform: rotate(180deg);
}

.content {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: relative;
  height: 100%;
  width: 100%;
  padding: 4px;
  gap: 16px;
  border-radius: 7px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.content::before {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 10;
  width: 80%;
  top: 45%;
  bottom: 35%;
  opacity: 0.7;
  margin: auto;
  background: linear-gradient(to bottom, transparent, var(--purple-400));
  filter: brightness(1.3) blur(5px);
}

.letters {
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.letters span {
  display: block;
  color: transparent;
  position: relative;
  left: 6px;
}

.letters span {
  animation: letterShow 1.2s ease backwards calc(var(--i) * 0.03s);
}

.letters span::before,
.letters span::after {
  content: attr(data-label);
  position: absolute;
  color: var(--white);
  text-shadow: -1px 1px 2px var(--purple-500);
  left: 0;
}

.letters span::before {
  opacity: 0;
  transform: translateY(-100%);
}

.button:hover .words {
  opacity: 1;
}

.button:hover .letters span::before {
  animation: letterShow 0.7s ease calc(var(--i) * 0.03s);
}

.button:hover .letters span::after {
  opacity: 1;
  animation: letterHide 0.7s ease calc(var(--i) * 0.03s);
}

@keyframes letterShow {
  0% {
    transform: translateY(50%);
    opacity: 0;
    filter: blur(20px);
  }
  20% {
    transform: translateY(70%);
    opacity: 1;
  }
  50% {
    transform: translateY(-15%);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes letterHide {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-70%);
    opacity: 0;
    filter: blur(3px);
  }
}

</style>
    

================================================
FILE: Buttons/elijahgummer_friendly-wasp-61.html
================================================
<div class="container">
  <input type="checkbox" id="send-checkbox" class="send-checkbox" />
  <label for="send-checkbox" class="button">
    <div class="send-message-icon">
      <svg
        class="icon-send"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 128 128"
        id="send"
      >
        <path
          stroke="#000000"
          stroke-width="7"
          d="M32.523 55.8837C25.7086 41.9768 22.3014 35.0233 23.9101 30.9241C24.8875 28.4336 26.8223 26.4385 29.2817 25.3851C33.3295 23.6514 40.3843 26.8436 54.4939 33.228L82.2307 45.7786C99.5721 53.6254 108.243 57.5488 108.243 64C108.243 70.4512 99.5721 74.3746 82.2307 82.2214L54.4938 94.772C40.3843 101.156 33.3295 104.349 29.2817 102.615C26.8223 101.561 24.8875 99.5664 23.9101 97.0759C22.3014 92.9767 25.7086 86.0232 32.523 72.1163V72.1163C34.0948 68.9087 34.8806 67.3049 35.1314 65.6137C35.2901 64.5437 35.2901 63.4563 35.1314 62.3863C34.8806 60.6951 34.0948 59.0913 32.523 55.8837V55.8837Z"
          class="colorStroke000000 svgStroke"
        ></path>
        <path
          stroke="#1c1c1c"
          stroke-linecap="round"
          stroke-width="7"
          d="M60 64H36"
          class="colorStroke000000 svgStroke"
        ></path>
      </svg>
    </div>
    <svg
      class="icon-check"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      id="check"
    >
      <path fill="none" d="M0 0h24v24H0V0z"></path>
      <path
        d="M9 16.17L5.53 12.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L9 16.17z"
        fill="#000000"
        class="color000000 svgShape"
      ></path>
    </svg>
    <span class="button-text">Send Message</span>
    <span class="button-text sending"></span>
    <span class="button-text sent">Sent</span>
  </label>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Website: https://x.com/smuiux/status/1791843469855453448 - Name: Shubhajit - Tags: minimalist, button, realistic, modern, submit, click effect, click animation, button hover effect  */
/* OUTER FRAME CONTAINER */
.container {
  padding-top: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #f8f8f8;
  overflow: hidden;
  padding: 2px;
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(28, 28, 28, 0.15),
    /* Drop Shadow */ 0 30px 100px rgba(28, 28, 28, 0.13),
    /* Drop Shadow */ 0 15px 30px rgba(28, 28, 28, 0.1),
    /* Drop Shadow */ 0 6px 12px rgba(28, 28, 28, 0.05),
    /* Drop Shadow */ inset 0 8px 24px rgba(255, 255, 255, 0.35),
    /* Inner Shadow */ inset 0 -8px 24px rgba(255, 255, 255, 0.35); /* Inner Shadow */
}
.send-checkbox {
  display: none;
}
/* --------------------- BUTTON STYLING -----------*/
/* INNER FRAME 1 */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 42.67px;
  padding: 26px 20px;
  border-radius: 12px;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #1c1c1c;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: linear-gradient(to top, silver, whitesmoke);
  box-shadow: inset 0 8px 24px rgba(255, 255, 255, 0.35),
    /* Inner Shadow */ 0 6px 16px rgba(28, 28, 28, 0.75),
    /* Drop Shadow */ 0 2px 4px rgba(28, 28, 28, 0.15),
    /* Drop Shadow */ 0 30px 100px rgba(28, 28, 28, 0.13),
    /* Drop Shadow */ 0 15px 30px rgba(28, 28, 28, 0.1),
    /* Drop Shadow */ 0 6px 12px rgba(28, 28, 28, 0.05); /* Drop Shadow */
  background: linear-gradient(to top, silver, whitesmoke);
  transition: all 0.3s ease;
}
.button:hover #dots {
  display: block;
}
.button:hover {
  box-shadow: inset 0 8px 24px rgba(255, 255, 255, 0.35),
    0 6px 16px rgba(28, 28, 28, 0.95),
    /* darker inner shadow */ 0 2px 4px rgba(28, 28, 28, 0.25),
    /* darker drop shadow */ 0 30px 100px rgba(28, 28, 28, 0.2),
    0 15px 30px rgba(28, 28, 28, 0.17),
    /* darker drop shadow */ 0 6px 12px rgba(28, 28, 28, 0.12); /* darker drop shadow */
  transform: translateY(-1px); /* Move up on hover */
}
.button:active {
  transform: translateY(0.1px);
}
.button:active::before {
  top: 2.8px;
  left: 5px;
  right: 5px;
  bottom: 2.8px;
  background: linear-gradient(
    0deg,
    whitesmoke,
    silver 75%,
    rgba(0, 0, 0, 0.5) 100%
  );
  box-shadow: 15px 15px 38px #979494, -15px -15px 38px #f0f0f0;
}
.button:active {
  top: 0.2px;
  left: 0.3px;
  right: 0.2px;
  bottom: 0.2px;
}
/* INNER FRAME 2 */
.button::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 28px;
  background: linear-gradient(90deg, #ffffff 50%, #cacaca 100%);
  background: -moz-linear-gradient(#f0eee9, #eceae8);
  background: -ms-linear-gradient(#efeeeb, #e7e4e1);
  background: -o-linear-gradient(#e1dfda, #d2cbc3);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f3f2ef), to(#eceae7));
  background: -webkit-linear-gradient(#dfdfdc, #fbb2b2);
  background: linear-gradient(#e7e6e5, #e1e1de);
  box-shadow: inset 0 -2px 5px rgba(255, 255, 255, 0.05),
    /* Inner Shadow */ 0 2px 5px rgba(255, 255, 255, 0.1); /* Inner Shadow */
  border: 1px solid #fafbfb;
  box-shadow: 15px 15px 38px #979494, -15px -15px 38px #f0f0f0;
  background: linear-gradient(silver, whitesmoke);
  transition: all 0.3s ease;
  z-index: -1;
  opacity: 0.25;
  padding: 20px 10px;
}
/* ICONS STYLING */
.icon-send {
  margin-right: 5px;
  filter: drop-shadow(0px 1px 1px rgba(28, 28, 28, 0.35)); /* Icon shadow */
  width: 20px;
  height: 20px;
  transform: rotate(-55deg);
  transition: transform 0.4s ease-in-out; /* Smooth transition */
}

.icon-send:hover {
  animation: flying 0.6s ease-in-out infinite alternate;
  transform: translateX(3px) translateY(-3px) rotate(2deg) scale(1.1);
}

/* When hovering over button or button-text, only the icon should animate */
.icon-send:hover,
.button-text:hover .icon-send {
  animation: flying 0.6s ease-in-out infinite alternate;
}
.icon-send:hover,
.button-text:hover .icon-send {
  transform: translateX(3px) translateY(-3px) rotate(2deg) scale(1.1);
}
/* TEXT STYLING */
.sending {
  opacity: 0;
  display: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: absolute;
  top: -5%;
  left: -10%;
  transform: translate(-10%, 10%);
}
@keyframes changeText {
  0% {
    content: "Sending";
  }
  33% {
    content: "Sending.";
  }
  66% {
    content: "Sending..";
  }
  100% {
    content: "Sending...";
  }
}

/* Apply the animation to the sending text */
.sending::after {
  content: "Sending"; /* Initial text */
  animation: changeText 1.5s 2; /* Animation properties */
}
.sent {
  opacity: 0;
  display: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: absolute;
  top: 1%;
  left: -45%;
  transform: translate(-10%, -10%);
}
.button .button-text,
.button .icon-send {
  position: relative;
  z-index: 1;
  text-shadow: 0px 1px 1px rgba(28, 28, 28, 0.35); /* Text shadow */
}
.button.clicked .icon-send {
  animation: rotateBack 0.4s ease forwards;
}

.button:active .icon-send {
  transform: translateY(2px) translateX(-1px); /* Move up when pressed */
}
.button:not(:active) .icon-send {
  transition: transform 0.4s ease-in-out; /* Smooth transition */
}
.icon-send {
  margin-right: 8px;
  filter: drop-shadow(0px 1px 1px rgba(28, 28, 28, 0.35)); /* Icon shadow*/
  width: 20px;
  height: 20px;
  transform: rotate(-55deg);
  transition: transform 0.4s ease-in-out;
}
.icon-check {
  margin-right: 10px;
  opacity: 0;
  position: absolute;
  left: 55px;
  transform: translateY(-80px);
  transition: transform 0.2s ease, opacity 0.2s ease;
  filter: drop-shadow(0px 1px 1px rgba(28, 28, 28, 0.35)); /* Icon shadod*/
  width: 20px;
  height: 20px;
}
.send-checkbox:checked ~ .button .icon-send {
  transform: scale(0.5) translateX(-200px);
}
.send-checkbox:checked ~ .button .button-text {
  opacity: 0;
}
.send-checkbox:checked ~ .button .sending {
  display: block;
  opacity: 1;
  animation: hideSending 0.5s ease forwards;
  animation-delay: 2.6s;
}
.send-checkbox:checked ~ .button .sent {
  display: block;
  animation: showSent 0.2s ease forwards; /* Delay to start after showing */
  animation-delay: 4s;
}
.send-checkbox:checked ~ .button .icon-check {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 4s;
}
.send-checkbox:checked ~ .button .icon-send {
  animation: planeSlide 1s ease forwards 3.4s; /* Wait for other animations to complete */
}

/* ANIMATIONS */
@keyframes planeSlide {
  0% {
    transform: translateX(-200px); /* Start from left */
  }
  100% {
    transform: translateX(200px); /* Move to right */
  }
}
@keyframes flying {
  0% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(1px);
  }
}
@keyframes showSent {
  0% {
    opacity: 0;
    transform: translateY(-80px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px); /* Adjust as needed */
  }
}
@keyframes hideSending {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(100px);
  }
}
@keyframes rotateBack {
  0% {
    transform: rotate(-55deg);
  }
  100% {
    transform: rotate(0deg); /* Rotate back to 0 degrees */
  }
}

</style>
    

================================================
FILE: Buttons/elijahgummer_hard-turkey-58.html
================================================
<button class="styled-button">
  Register Now
  <div class="inner-button">
    <svg
      id="Arrow"
      viewBox="0 0 32 32"
      xmlns="http://www.w3.org/2000/svg"
      height="30px"
      width="30px"
      class="icon"
    >
      <defs>
        <linearGradient y2="100%" x2="100%" y1="0%" x1="0%" id="iconGradient">
          <stop style="stop-color:#FFFFFF;stop-opacity:1" offset="0%"></stop>
          <stop style="stop-color:#AAAAAA;stop-opacity:1" offset="100%"></stop>
        </linearGradient>
      </defs>
      <path
        fill="url(#iconGradient)"
        d="M4 15a1 1 0 0 0 1 1h19.586l-4.292 4.292a1 1 0 0 0 1.414 1.414l6-6a.99.99 0 0 0 .292-.702V15c0-.13-.026-.26-.078-.382a.99.99 0 0 0-.216-.324l-6-6a1 1 0 0 0-1.414 1.414L24.586 14H5a1 1 0 0 0-1 1z"
      ></path>
    </svg>
  </div>
</button>

<style>
/* From Uiverse.io by elijahgummer  - Website: https://x.com/farrelput/status/1772222462329287156 - Name: Farrel Putra - Tags: simple, neumorphism, minimalist, button, modern, hover effect, click effect */
.styled-button {
  position: relative;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(to bottom, #171717, #242424);
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 1), 0 10px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #292929;
}

.styled-button::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  background: linear-gradient(to bottom, #292929, #000000);
  z-index: -1;
  border-radius: 9999px;
  transition: all 0.2s ease;
  opacity: 1;
}

.styled-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 5px 10px rgba(0, 0, 0, 0.4);
}

.styled-button .inner-button {
  position: relative; /* Ensure relative positioning for pseudo-element */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #171717, #242424);
  width: 40px;
  height: 40px;
  margin-left: 10px;
  border-radius: 50%;
  box-shadow: 0 0 1px rgba(0, 0, 0, 1);
  border: 1px solid #252525;
  transition: all 0.2s ease;
}

.styled-button .inner-button::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  background: linear-gradient(to bottom, #292929, #000000);
  z-index: -1;
  border-radius: 9999px;
  transition: all 0.2s ease;
  opacity: 1;
}
.styled-button .inner-button .icon {
  filter: drop-shadow(0 10px 20px rgba(26, 25, 25, 0.9))
    drop-shadow(0 0 4px rgba(0, 0, 0, 1));
  transition: all 0.4s ease-in-out;
}
.styled-button .inner-button .icon:hover {
  filter: drop-shadow(0 10px 20px rgba(50, 50, 50, 1))
    drop-shadow(0 0 20px rgba(2, 2, 2, 1));
  transform: rotate(-35deg);
}

</style>
    

================================================
FILE: Buttons/elijahgummer_proud-goat-69.html
================================================
<button class="button-with-icon">
  <svg
    class="icon"
    id="Play"
    viewBox="0 0 48 48"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      class="color000000 svgShape"
      fill="#ffffff"
      d="M12 39c-.549 0-1.095-.15-1.578-.447A3.008 3.008 0 0 1 9 36V12c0-1.041.54-2.007 1.422-2.553a3.014 3.014 0 0 1 2.919-.132l24 12a3.003 3.003 0 0 1 0 5.37l-24 12c-.42.21-.885.315-1.341.315z"
    ></path>
  </svg>
  <span class="text">Play</span>
</button>

<style>
/* From Uiverse.io by elijahgummer  - Tags: icon, animation, 3d, button, hover, modern, play, cyan */
.button-with-icon {
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #0f988e;
  font-family: "Istok Web", sans-serif;
  letter-spacing: 1px;
  padding: 0 12px;
  text-align: center;
  width: 120px;
  height: 40px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: normal;
  border-radius: 3px;
  outline: none;
  user-select: none;
  cursor: pointer;
  transform: translateY(0px);
  position: relative;
  box-shadow:
    inset 0 30px 30px -15px rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 1px 20px rgba(0, 0, 0, 0),
    0 3px 0 #0f988e,
    0 3px 2px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.1);
  background: #15ccbe;
  color: white;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  transition: 150ms all ease-in-out;
}

.button-with-icon .icon {
  margin-right: 8px;
  width: 24px;
  height: 24px;
  transition: all 0.5s ease-in-out;
}

.button-with-icon:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 16px 2px -15px rgba(0, 0, 0, 0),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 1px 20px rgba(0, 0, 0, 0.1),
    0 0 0 #0f988e,
    0 0 0 2px rgba(255, 255, 255, 0.5),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0);
}

.button-with-icon:hover .text {
  transform: translateX(80px);
}
.button-with-icon:hover .icon {
  transform: translate(23px);
}

.text {
  transition: all 0.5s ease-in-out;
}

</style>
    

================================================
FILE: Buttons/elijahgummer_purple-sloth-17.html
================================================
<button class="button">
  <svg
    id="UploadToCloud"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    height="16px"
    width="16px"
    class="icon"
  >
    <path d="M0 0h24v24H0V0z" fill="none"></path>
    <path
      class="color000000 svgShape"
      fill="#000000"
      d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l4.65-4.65c.2-.2.51-.2.71 0L17 13h-3z"
    ></path>
  </svg>
  Upload CV
</button>

<style>
/* From Uiverse.io by elijahgummer  - Tags: yellow, gradient, button, glow, modern, upload, hover effect, upload button */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: linear-gradient(45deg, #ffc75d, #ffc708);
  box-shadow: 0 0 24px #ffb20861;
  border: 2px solid #ffe825;
  border-radius: 100px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease,
    text-shadow 0.3s ease;
  padding: 10px 20px;
  color: #09090b;
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Text drop shadow */
}

.button:hover {
  background-color: #ffc75d !important;
  box-shadow: 0 0 34px #ffb20861 !important;
  text-shadow: 0 0 4px #ffe825; /* Hover text shadow */
  border-color: #ffe825 !important;
}

.icon {
  margin-right: 5px;
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3)); /* Icon drop shadow */
}

</style>
    

================================================
FILE: Buttons/elijahgummer_short-bird-25.html
================================================
<button class="button">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Hover Me
</button>

<style>
/* From Uiverse.io by elijahgummer  - Tags: glassmorphism, animation, black, button, hover effect, shimmer */
.button {
  cursor: pointer;
  position: relative;
  padding: 15px 20px;
  text-decoration: none;
  border: none;
  color: #fff;
  font-size: 1.2em;
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
}
.button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: 0.5s;
  transition-delay: 0.5s;
}
.button:hover:after {
  left: 100%;
}
.button span {
  position: absolute;
  display: block;
  transition: 0.5s ease;
}
.button span:nth-child(1) {
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
}
.button:hover span:nth-child(1) {
  width: 100%;
  transform: translateX(100%);
}
.button span:nth-child(2) {
  top: 0;
  left: 0;
  width: 1px;
  height: 0;
  background: #fff;
}
.button:hover span:nth-child(2) {
  height: 100%;
  transform: translateY(100%);
}
.button span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 0;
  height: 1px;
  background: #fff;
}
.button:hover span:nth-child(3) {
  width: 100%;
  transform: translateX(-100%);
}
.button span:nth-child(4) {
  bottom: 0;
  right: 0;
  width: 1px;
  height: 0;
  background: #fff;
}
.button:hover span:nth-child(4) {
  height: 100%;
  transform: translateY(-100%);
}

</style>
    

================================================
FILE: Buttons/elijahgummer_slippery-dragonfly-100.html
================================================
<ul>
  <li style="--i:#a955ff;--j:#ea51ff;">
    <span class="icon">🏠</span>
    <span class="title">Home</span>
  </li>
</ul>

<style>
/* From Uiverse.io by elijahgummer  - Tags: icon, animation, button, hover, gradients, colorful, transition, hover effect */
ul {
  position: relative;
  display: flex;
  gap: 25px;
}

ul li {
  position: relative;
  list-style: none;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 60px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: 0.5s;
}

ul li:hover {
  width: 180px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0);
}

ul li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 60px;
  background: linear-gradient(45deg, var(--i), var(--j));
  opacity: 0;
  transition: 0.5s;
}

ul li:hover::before {
  opacity: 1;
}

ul li::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 100%;
  height: 100%;
  border-radius: 60px;
  background: linear-gradient(45deg, var(--i), var(--j));
  transition: 0.5s;
  filter: blur(15px);
  z-index: -1;
  opacity: 0;
}

ul li:hover::after {
  opacity: 0.5;
}

ul li .icon {
  color: #777;
  font-size: 1.75em;
  transition: 0.5s;
  transition-delay: 0.25s;
}

ul li:hover .icon {
  transform: scale(0);
  color: #fff;
  transition-delay: 0s;
}

ul li span {
  position: absolute;
}

ul li .title {
  color: #fff;
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0s;
}

ul li:hover .title {
  transform: scale(1);
  transition-delay: 0.25s;
}

</style>
    

================================================
FILE: Buttons/elijahgummer_stale-fireant-57.html
================================================
<button role="button" class="golden-button">
  <span class="golden-text">Golden Button</span>
</button>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, button, shadow, realistic, click effect, gold, golden effect  */
.golden-button {
  touch-action: manipulation;
  display: inline-block;
  outline: none;
  font-family: inherit;
  font-size: 1em;
  box-sizing: border-box;
  border: none;
  border-radius: 0.3em;
  height: 2.75em;
  line-height: 2.5em;
  text-transform: uppercase;
  padding: 0 1em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
    inset 0 -2px 5px 1px rgba(139, 66, 8, 1),
    inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
  background-image: linear-gradient(
    160deg,
    #a54e07,
    #b47e11,
    #fef1a2,
    #bc881b,
    #a54e07
  );
  border: 1px solid #a55d07;
  color: rgb(120, 50, 5);
  text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-size: 100% 100%;
  background-position: center;
}

.golden-button:focus,
.golden-button:hover {
  background-size: 150% 150%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23),
    inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
  border: 1px solid rgba(165, 93, 7, 0.6);
  color: rgba(120, 50, 5, 0.8);
}

.golden-button:active {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
    inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
}

</style>
    

================================================
FILE: Buttons/elijahgummer_sweet-rabbit-5.html
================================================
<button>Login</button>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, login, 3d, button, modern, click effect */
button {
  font: inherit;
  background-color: #f0f0f0;
  border: 0;
  color: #242424;
  border-radius: 0.5em;
  font-size: 1.35rem;
  padding: 0.375em 1em;
  font-weight: 600;
  text-shadow: 0 0.0625em 0 #fff;
  box-shadow: inset 0 0.0625em 0 0 #f4f4f4, 0 0.0625em 0 0 #efefef,
    0 0.125em 0 0 #ececec, 0 0.25em 0 0 #e0e0e0, 0 0.3125em 0 0 #dedede,
    0 0.375em 0 0 #dcdcdc, 0 0.425em 0 0 #cacaca, 0 0.425em 0.5em 0 #cecece;
  transition: 0.15s ease;
  cursor: pointer;
}
button:active {
  translate: 0 0.225em;
  box-shadow: inset 0 0.03em 0 0 #f4f4f4, 0 0.03em 0 0 #efefef,
    0 0.0625em 0 0 #ececec, 0 0.125em 0 0 #e0e0e0, 0 0.125em 0 0 #dedede,
    0 0.2em 0 0 #dcdcdc, 0 0.225em 0 0 #cacaca, 0 0.225em 0.375em 0 #cecece;
}

</style>
    

================================================
FILE: Buttons/elijahgummer_sweet-vampirebat-42.html
================================================
<span
  data-active-content="🤨"
  data-hover-content="😑"
  data-content="😐"
  class="💀"
></span>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, button, emoji, minimalistic, ¯\_(ツ)_/¯ */
.💀 {
  font-size: 48px;
}

.💀:after {
  content: attr(data-content);
}

.💀:hover:after {
  content: attr(data-hover-content);
}

.💀:active:after {
  content: attr(data-active-content);
}

</style>
    

================================================
FILE: Buttons/elijahgummer_weak-rattlesnake-90.html
================================================
<!-- From Uiverse.io by elijahgummer  - Tags: neumorphism, minimalist, button, github, hover effect, simple button, tailwind, tailwindcss -->
<div
  class="flex justify-center items-center border-2 border-radius border-white-200 overflow-hidden p-1 rounded-full shadow-lg"
>
  <button
    class="bg-[linear-gradient(#e9e9e9,#e9e9e9_50%,#fff)] group w-50 h-16 inline-flex transition-all duration-300 overflow-visible p-1 rounded-full group"
  >
    <div
      class="w-full h-full bg-[linear-gradient(to_top,#ececec,#fff)] overflow-hidden shadow-[0_0_1px_rgba(0,0,0,0.07),0_0_1px_rgba(0,0,0,0.05),0_3px_3px_rgba(0,0,0,0.25),0_1px_3px_rgba(0,0,0,0.12)] p-1 rounded-full hover:shadow-none duration-300"
    >
      <div
        class="w-full h-full text-xl gap-x-0.5 gap-y-0.5 justify-center text-[#101010] bg-[linear-gradient(#f4f4f4,#fefefe)] group-hover:bg-[linear-gradient(#e2e2e2,#fefefe)] duration-200 items-center text-[18px] font-medium gap-4 inline-flex overflow-hidden px-4 py-2 rounded-full black group-hover:text-blue-600"
      >
        <svg
          id="Github"
          viewBox="0 0 16 16"
          xmlns="http://www.w3.org/2000/svg"
          height="24"
          width="24"
        >
          <path
            class="color5c6bc0 svgShape"
            d="M7.999 0C3.582 0 0 3.596 0 8.032a8.031 8.031 0 0 0 5.472 7.621c.4.074.546-.174.546-.387 0-.191-.007-.696-.011-1.366-2.225.485-2.695-1.077-2.695-1.077-.363-.928-.888-1.175-.888-1.175-.727-.498.054-.488.054-.488.803.057 1.225.828 1.225.828.714 1.227 1.873.873 2.329.667.072-.519.279-.873.508-1.074-1.776-.203-3.644-.892-3.644-3.969 0-.877.312-1.594.824-2.156-.083-.203-.357-1.02.078-2.125 0 0 .672-.216 2.2.823a7.633 7.633 0 0 1 2.003-.27 7.65 7.65 0 0 1 2.003.271c1.527-1.039 2.198-.823 2.198-.823.436 1.106.162 1.922.08 2.125.513.562.822 1.279.822 2.156 0 3.085-1.87 3.764-3.652 3.963.287.248.543.738.543 1.487 0 1.074-.01 1.94-.01 2.203 0 .215.144.465.55.386A8.032 8.032 0 0 0 16 8.032C16 3.596 12.418 0 7.999 0z"
            fill="#000000"
          ></path>
        </svg>
        <span class="ml-2">Github</span>
      </div>
    </div>
  </button>
</div>


    

================================================
FILE: Buttons/elijahgummer_wise-jellyfish-93.html
================================================
<!-- From Uiverse.io by elijahgummer  - Tags: simple, gradient, button, svg, unlock, access -->
<button
  class="group relative flex flex-row items-center justify-center gap-2 rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] transition-shadow duration-500 ease-out hover:shadow-[inset_0_-5px_10px_#8fdfff3f]"
>
  <div
    class="absolute inset-0 block h-full w-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] p-[1px] ![mask-composite:subtract]"
  ></div>
  <svg
    width="15"
    height="15"
    viewBox="0 0 15 15"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="size-4 text-[#ffaa40]"
  >
    <path
      d="M5 4.63601C5 3.76031 5.24219 3.1054 5.64323 2.67357C6.03934 2.24705 6.64582 1.9783 7.5014 1.9783C8.35745 1.9783 8.96306 2.24652 9.35823 2.67208C9.75838 3.10299 10 3.75708 10 4.63325V5.99999H5V4.63601ZM4 5.99999V4.63601C4 3.58148 4.29339 2.65754 4.91049 1.99307C5.53252 1.32329 6.42675 0.978302 7.5014 0.978302C8.57583 0.978302 9.46952 1.32233 10.091 1.99162C10.7076 2.65557 11 3.57896 11 4.63325V5.99999H12C12.5523 5.99999 13 6.44771 13 6.99999V13C13 13.5523 12.5523 14 12 14H3C2.44772 14 2 13.5523 2 13V6.99999C2 6.44771 2.44772 5.99999 3 5.99999H4ZM3 6.99999H12V13H3V6.99999Z"
      fill="currentColor"
      fill-rule="evenodd"
      clip-rule="evenodd"
    ></path>
  </svg>
  <div
    data-orientation="vertical"
    role="none"
    class="shrink-0 bg-border w-[1px] h-4"
  ></div>
  <span
    class="inline animate-gradient whitespace-pre bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent [--bg-size:300%] text-center"
    >Get Access</span
  >
  <svg
    fill="none"
    stroke="currentColor"
    width="11"
    height="11"
    viewBox="0 0 10 10"
    aria-hidden="true"
    stroke-width="1.5"
    class="text-[#9c40ff]"
    stroke-linecap="round"
  >
    <path
      class="opacity-0 transition group-hover:opacity-100"
      d="M0 5h7"
      stroke-linecap="round"
    ></path>
    <path
      class="transition group-hover:translate-x-[3px]"
      d="M1 1l4 4-4 4"
      stroke-linecap="round"
    ></path>
  </svg>
</button>


    

================================================
FILE: Buttons/elijahwgummer-poc_honest-falcon-100.html
================================================
<button class="button">
  <span>Button</span>
  <div class="overlay"></div>
  <div class="shine"></div>
</button>

<style>
/* From Uiverse.io by elijahwgummer-poc - Tags: button, bubble, animated, shine */
.button {
  position: relative;
  display: inline-block;
  padding: 12px 26px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  color: #fff;
  background-color: #ff6b6b;
  border: none;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.button span {
  position: relative;
  z-index: 1;
}

.button .overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button .shine {
  position: absolute;
  top: -80px;
  left: -80px;
  width: 160px;
  height: 160px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, transparent 80%);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button:hover .overlay {
  opacity: 0.7;
}

.button:hover .shine {
  opacity: 1;
}

.button:hover {
  background-color: #ff3333;
}

.button:active {
  background-color: #cc0000;
}

</style>


================================================
FILE: Buttons/emmanuelh-dev_itchy-turtle-88.html
================================================
<!-- From Uiverse.io by emmanuelh-dev - Tags: button, tailwindbutton, Web buttons -->
<div class="flex bg-white w-fit px-1.25 py-1.25 shadow-box-up rounded-2xl dark:bg-box-dark dark:shadow-box-dark-out">
  <div class="dark:shadow-buttons-box-dark rounded-2xl w-full px-1.5 py-1.5 md:px-3 md:py-3">
    <a class="text-light-blue-light hover:text-black dark:text-gray-400 border-2 inline-flex items-center mr-4 last-of-type:mr-0 p-2.5 border-transparent bg-light-secondary shadow-button-flat-nopressed hover:border-2 hover:shadow-button-flat-pressed focus:opacity-100 focus:outline-none active:border-2 active:shadow-button-flat-pressed font-medium rounded-full text-sm text-center dark:bg-button-curved-default-dark dark:shadow-button-curved-default-dark dark:hover:bg-button-curved-pressed-dark dark:hover:shadow-button-curved-pressed-dark dark:active:bg-button-curved-pressed-dark dark:active:shadow-button-curved-pressed-dark dark:focus:bg-button-curved-pressed-dark dark:focus:shadow-button-curved-pressed-dark dark:border-0" title="Go to the home page">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" xmlns="http://www.w3.org/2000/svg">
        <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z">
        </path>
      </svg>
    </a>
    <a class="text-light-blue-light hover:text-black dark:text-gray-400 border-2 inline-flex items-center mr-4 last-of-type:mr-0 p-2.5 border-transparent bg-light-secondary shadow-button-flat-nopressed hover:border-2 hover:shadow-button-flat-pressed focus:opacity-100 focus:outline-none active:border-2 active:shadow-button-flat-pressed font-medium rounded-full text-sm text-center dark:bg-button-curved-default-dark dark:shadow-button-curved-default-dark dark:hover:bg-button-curved-pressed-dark dark:hover:shadow-button-curved-pressed-dark dark:active:bg-button-curved-pressed-dark dark:active:shadow-button-curved-pressed-dark dark:focus:bg-button-curved-pressed-dark dark:focus:shadow-button-curved-pressed-dark dark:border-0" title="Go to post list page">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 3a1 1 0 000 2c5.523 0 10 4.477 10 10a1 1 0 102 0C17 8.373 11.627 3 5 3z"></path>
        <path d="M4 9a1 1 0 011-1 7 7 0 017 7 1 1 0 11-2 0 5 5 0 00-5-5 1 1 0 01-1-1zM3 15a2 2 0 114 0 2 2 0 01-4 0z">
        </path>
      </svg>
    </a>
    <a class="text-light-blue-light hover:text-black dark:text-gray-400 border-2 inline-flex items-center mr-4 last-of-type:mr-0 p-2.5 border-transparent bg-light-secondary shadow-button-flat-nopressed hover:border-2 hover:shadow-button-flat-pressed focus:opacity-100 focus:outline-none active:border-2 active:shadow-button-flat-pressed font-medium rounded-full text-sm text-center dark:bg-button-curved-default-dark dark:shadow-button-curved-default-dark dark:hover:bg-button-curved-pressed-dark dark:hover:shadow-button-curved-pressed-dark dark:active:bg-button-curved-pressed-dark dark:active:shadow-button-curved-pressed-dark dark:focus:bg-button-curved-pressed-dark dark:focus:shadow-button-curved-pressed-dark dark:border-0" title="Go to about me page">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5" xmlns="http://www.w3.org/2000/svg">
        <path clip-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" fill-rule="evenodd"></path>
      </svg>
    </a>
  </div>
</div>



================================================
FILE: Buttons/ercnersoy_average-warthog-24.html
================================================

<button>BUTTON</button>
<style>
/* From Uiverse.io by ercnersoy - Tags: button */
button {
 padding: 20px 30px;
 border-radius: 30px;
 border: 5px solid #ffffff;
 background-color: #5584AC;
 font-size: 15px;
 color: white;
 letter-spacing: 5px;
 font-weight: bolder;
 animation: none;
 transition: all .5s ease-in-out;
 font-family: 'Rajdhani', sans-serif;
}

button:hover {
 border-radius: 30px 30px 0px 30px;
 box-shadow: inset 0px 30px 10px -25px black;
 transition: all .5s ease-in-out;
 animation: bounce42 1.6s infinite;
}

@keyframes bounce42 {
 0%, 20%, 50%, 80%, 100% {
  transform: translateY(0);
 }

 40% {
  transform: translateY(-5px);
 }

 60% {
  transform: translateY(-5px);
 }
} 
</style>


================================================
FILE: Buttons/ercnersoy_bitter-swan-59.html
================================================
<button> <span>LIKE</span></button>
<style>
/* From Uiverse.io by ercnersoy - Tags: button */
button {
  padding: 0 20px 0 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 7px #e7413373;
  background-color: #e74133;
  color: white;
  font-size: 17px;
  border: none;
  display: flex;
  align-items: center;
  transition: all .5s ease-in-out;
  letter-spacing: 2px;
}

button:hover {
  background-color: #f54d3e;
  transition: all .5s ease-in-out;
  box-shadow: 0px 0px 5px 3px #e7413373;
}

button::before {
  content: "";
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMzc2LjMyIDU1Mi4zYy0wLjM4NjcyIDAtMC43ODEyNS0wLjAxNTYyNS0xLjE3MTktMC4wNTA3ODEtMS4wNzgxLTAuMDc0MjE5LTIuMTM2Ny0wLjI2NTYyLTMuMTU2Mi0wLjU0Njg4LTIuNzMwNS0wLjU5Mzc1LTUuMjkzLTEuODUxNi03LjM0MzgtMy43ODEybC0xMzcuNTQtMTI5LjY2Yy00NC40NTMtNDEuOTAyLTQ5LjQ4LTExNS40Ni0xMS4yMTUtMTYzLjk3IDE5LjA4Mi0yNC4xODQgNDUuNzctMzguNjk1IDc1LjE1Mi00MC44NTUgMjguOTMtMi4xMTcyIDU2Ljg2MyA4LjAzMTIgNzguNjggMjguNTk4bDYuMjY1NiA1LjkwMjMgNi4yNjU2LTUuOTAyM2MyMS44MzItMjAuNTcgNDkuODA1LTMwLjY5MSA3OC42OTEtMjguNTk4IDI5LjM4MyAyLjE2NDEgNTYuMDY2IDE2LjY3NiA3NS4xNDUgNDAuODU1IDM4LjI2MiA0OC41MTIgMzMuMjM0IDEyMi4wNy0xMS4yMTUgMTYzLjk3bC0xMzcuNTQgMTI5LjY3Yy0yLjk5MjIgMi44MTY0LTYuOTM3NSA0LjM3NS0xMS4wMjMgNC4zNzV6bS03Ny44MTItMzA3LjAxYy0xLjY5NTMgMC0zLjM5NDUgMC4wNjI1LTUuMTAxNiAwLjE4NzUtMjAuMjgxIDEuNDk2MS0zOC44NTIgMTEuNjkxLTUyLjI4MSAyOC43MTEtMjguMjE1IDM1Ljc3My0yNC42MTMgODkuOTEgOC4wMjczIDEyMC42OGwxMjYuODQgMTE5LjU5IDEyNi44NC0xMTkuNTljMzIuNjQ1LTMwLjc3MyAzNi4yNDYtODQuOTEgOC4wMjczLTEyMC42OC0xMy40MjItMTcuMDItMzEuOTg0LTI3LjIxNS01Mi4yNy0yOC43MTEtMTkuODI4LTEuNDY0OC0zOS4xMDUgNS42MjExLTU0LjI4NSAxOS45MzRsLTE3LjI4NSAxNi4yOTNjLTYuMTk1MyA1LjgzOTgtMTUuODU5IDUuODM5OC0yMi4wNDcgMGwtMTcuMjg1LTE2LjI5M2MtMTMuODcxLTEzLjA3OC0zMS4xNzYtMjAuMTE3LTQ5LjE4LTIwLjExN3oiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
  background-size: 100%;
  background-repeat: no-repeat;
  color: transparent;
  position: relative;
  width: 50px;
  height: 50px;
  display: block;
  margin-right: 5px;
  transition: all .9s ease-in-out;
}

button:hover:before {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMzY5Ljg0IDU1MC4yOGMwLjQ3MjY2IDAuNDcyNjYgMC45NDUzMSAwLjQ3MjY2IDAuOTQ1MzEgMC45NDUzMSA2NS4zNTUtNTEuNjIxIDE5My43LTE0OC4yMyAxOTMuNy0yNDkuMTEgMC01NS44ODMtNDUuNDY1LTEwMS4zNS0xMDEuMzUtMTAxLjM1LTM5Ljc4MSAwLTc0LjM1MiAyMy4yMDctOTAuOTI2IDU2LjgyOC0wLjQ3MjY2IDAuOTQ1MzEtMS40MjE5IDMuMzE2NC0xLjQyMTkgMy4zMTY0cy0wLjk0NTMxLTEuODk0NS0wLjk0NTMxLTIuMzY3MmMtMTYuMTAyLTM0LjA5LTUwLjY3Mi01Ny43Ny05MC45MjYtNTcuNzctNTUuODgzIDAtMTAxLjM1IDQ1LjQ2MS0xMDEuMzUgMTAxLjM0IDAgMTAxLjgyIDEyNy44NyAxOTcuMDEgMTkyLjI3IDI0OC4xNnoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
  transition: all .9s ease-in-out;
  transform: rotate(-1turn);
}


</style>


================================================
FILE: Buttons/ercnersoy_fat-impala-73.html
================================================
<button></button>
<style>
/* From Uiverse.io by ercnersoy - Tags: button */
button {
  background: #2389e9;
  padding: 30px;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  transition: all .5s ease-in-out;
}

button:hover {
  border-radius: 50%;
  transition: all .5s ease-in-out;
}

button:hover:before {
  margin-left: 0%;
  transform: rotate(24deg);
}

button::before {
  content: "";
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNTczLjE4IDE5OC42MnYwbC0zOTYuMDkgNjMuNzE5Yy03Ljc1IDAuODU5MzgtOS40NzI3IDExLjE5NS0zLjQ0NTMgMTUuNWw5Ny4zMDEgNjguODgzLTE1LjUgMTEyLjhjLTAuODU5MzggNy43NSA3Ljc1IDEyLjkxNCAxMy43NzcgNy43NWw1NS4xMDktNDQuNzczIDI2LjY5MSAxMjQuODVjMS43MjI3IDcuNzUgMTEuMTk1IDkuNDcyNyAxNS41IDIuNTgybDIxNS4yNy0zMzguMzljMy40NDE0LTYuMDI3My0xLjcyNjYtMTMuNzc3LTguNjEzMy0xMi45MTR6bS0zNzIuODQgNzYuNjMzIDMxMy40Mi00OS45NDEtMjMzLjM0IDEwNy42M3ptNzQuMDUxIDE2NS4zMiAxMi45MTQtOTIuMTMzYzgwLjkzOC0zNy4wMjcgMTM5LjQ5LTY0LjU3OCAyMjkuMDQtMTA1LjkxLTEuNzE4OCAxLjcyMjctMC44NTkzNyAwLjg1OTM4LTI0MS45NSAxOTguMDR6bTg4LjY4OCA4Mi42Ni0yNC4xMDktMTEyLjggMTk5Ljc3LTE2Mi43NHoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
  height: 50px;
  background-repeat: no-repeat;
  position: absolute;
  width: 50px;
  transition: all .9s ease-in-out;
  background-size: 100%;
}

</style>


================================================
FILE: Buttons/ercnersoy_friendly-catfish-72.html
================================================
<button>
    <span class="TxtEffect">BUTTON</span>
</button>
<style>
/* From Uiverse.io by ercnersoy - Tags: button */
button {
  padding: 1em 2em;
  border-radius: 1em;
  border: 5px solid #ffc107;
  box-shadow: 0px 0px 0 rgb(227,165,0), 1px 1px 0 rgb(198,136,0), 2px 2px 0 rgb(170,108,0), 3px 3px 0 rgb(142,80,0), 4px 4px 3px rgba(0,0,0,0.63), 4px 4px 1px rgba(0,0,0,0.5), 0px 0px 3px rgba(0,0,0,.2);
}

.TxtEffect {
  letter-spacing: .2rem;
  font-size: 17px;
  color: #ffc107;
  font-family: "Arial Black", Gadget, sans-serif;
  text-shadow: 0px 0px 0 rgb(227,165,0), 1px 1px 0 rgb(198,136,0), 2px 2px 0 rgb(170,108,0), 3px 3px 0 rgb(142,80,0), 4px 4px 3px rgba(0,0,0,0.63), 4px 4px 1px rgba(0,0,0,0.5), 0px 0px 3px rgba(0,0,0,.2);
}
</style>


================================================
FILE: Buttons/ercnersoy_good-fly-51.html
================================================
<button class="button">hover me !</button>

<style>
/* From Uiverse.io by ercnersoy  - Tags: simple, purple, minimalist, button */
.button {
  cursor: pointer;
  padding: 1rem 4rem;
  border: 0;
  background-color: rebeccapurple;
  color: white;
  box-shadow: 0px 10px 0px 0px rgb(68, 37, 99);
  transition: all 0.9s ease-in-out;
  font-weight: 600;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-size: 1rem;
  position: relative;
}
.button:hover {
  box-shadow: 0px 10px 0px 0px rgb(122, 71, 173);
  background-color: rgb(80, 31, 129);
}
.button:active {
  box-shadow: 0px 5px 0px 0px rgb(122, 71, 173);
  text-shadow: 0 0px 0px #000;
}

.button::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  box-shadow: 0px 10px 0px 0px rgb(229, 104, 9);
  width: 0;
  height: 10px;
  transition: all 0.9s ease-in-out;
}
.button:hover::before {
  width: 100%;
}

</style>
    

================================================
FILE: Buttons/ercnersoy_nasty-panda-71.html
================================================
<button class="button">
    <span class="text">HOVER ME</span>
    <div class="wave"></div>
</button>
<style>
/* From Uiverse.io by ercnersoy - Tags: button, anime */
.button {
  width: 200px;
  padding: 20px 40px;
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  border-radius: 2rem;
  box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.5);
}

.button:hover .wave {
  top: -120px;
}

.text {
  position: relative;
  z-index: 1;
  color: white;
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: 600;
}

.wave {
  width: 200px;
  height: 200px;
  background-color: #27a9ff;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: -70px;
  transition: 0.4s;
}

.wave::before, a .wave::after {
  width: 200%;
  height: 200%;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
}

.wave::before {
  border-radius: 45%;
  background-color: #0581b3;
  animation: wave 5s linear infinite;
}

.wave::after {
  border-radius: 40%;
  background-color: rgba(20, 20, 20, 0.5);
  animation: wave 10s linear infinite;
}

@keyframes wave {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -75%) rotate(300deg);
  }
}
</style>


================================================
FILE: Buttons/ercnersoy_perfect-newt-42.html
================================================
<button>
    Button
</button>
<style>
/* From Uiverse.io by ercnersoy - Tags: button */
button {
  background: #ce1d1d;
  padding: 10px 50px 10px 30px;
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px;
  border-radius: 80px;
  text-transform: uppercase;
  transition: all .5s ease-in-out;
  border: none;
}

button:hover:before {
  width: 79px;
  height: 79px;
  transform: translate(4.6pc, -1.8pc);
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMzc2IDE1MS4wNWMtNTkuNjYgMC0xMTYuODggMjMuNjk5LTE1OS4wNiA2NS44ODdzLTY1Ljg4NyA5OS40MDItNjUuODg3IDE1OS4wNmMwIDU5LjY2NCAyMy42OTkgMTE2Ljg4IDY1Ljg4NyAxNTkuMDdzOTkuNDAyIDY1Ljg4NyAxNTkuMDYgNjUuODg3YzM5LjQ4OCAwIDc4LjI4MS0xMC4zOTUgMTEyLjQ4LTMwLjEzNyAzNC4xOTUtMTkuNzQ2IDYyLjU5NC00OC4xNDUgODIuMzQtODIuMzQgMTkuNzQyLTM0LjE5NSAzMC4xMzctNzIuOTg4IDMwLjEzNy0xMTIuNDggMC01OS42Ni0yMy42OTktMTE2Ljg4LTY1Ljg4Ny0xNTkuMDZzLTk5LjQwMi02NS44ODctMTU5LjA3LTY1Ljg4N3ptLTQyLjYyMSAzNDMuMzUtMzMuMTUyLTMzLjU3OCA4NC41ODItODQuODItODQuNTgyLTg0LjgxNiAzMy4zOTEtMzMuNTc4IDExOC4zOSAxMTguMzl6IiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo=");
}

button::before {
  content: "";
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMjk1LjQ1IDYwMC45NSAyMjQuOTUtMjI0Ljk1LTIyNC45NS0yMjQuOTUtNjMuODQgNjMuODQgMTYxLjE2IDE2MS4xMS0xNjEuMTYgMTYxLjExeiIgZmlsbD0iI2ZmZiIvPgo8L3N2Zz4K");
  height: 20px;
  width: 20px;
  position: absolute;
  transition: all .5s ease-in-out;
  background-size: 100%;
  transform: translate(6.3pc, 0.2pc);
}
</style>


================================================
FILE: Buttons/ercnersoy_pretty-seahorse-32.html
================================================
<button> Click me !
</button>
<style>
/* From Uiverse.io by ercnersoy - Tags: button */
button {
 padding: 1em 1.6em;
 border: 0;
 transition: all .5s ease-in-out;
 font-size: 17px;
 letter-spacing: 0.1rem;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 color: rgb(0, 0, 0);
 font-weight: bolder;
 backdrop-filter: blur(5px);
 background-color: rgba(255, 255, 255, 1);
 border-radius: 26px;
 box-shadow: 0px 0px 0px 0px rgba(145, 192, 255, 0.5),
             inset -8px -8px 16px 0px rgba(145, 193, 255, 0.973),
             inset 0px 11px 28px 0px rgb(255, 255, 255);
}

button:hover {
 transition: all .5s ease-in-out;
 backdrop-filter: blur(5px);
 background-color: rgba(255, 255, 255, 1);
 border-radius: 26px;
 box-shadow: 0px 0px 0px 0px rgba(145, 192, 255, 0.5),
              inset 8px -8px 16px 10px rgb(145, 193, 255),
              inset 0px 11px 28px 0px rgb(255, 255, 255);
}

button:active {
 border-radius: 26px;
 box-shadow: 0px 0px 0px 0px rgba(145, 193, 255, 0.822),
  inset -8px -8px 16px 10px #91c0ff99,
  inset 0px 11px 28px 50px rgb(255, 255, 255);
}
</style>


================================================
FILE: Buttons/ercnersoy_quiet-penguin-43.html
================================================
<button></button>
<style>
/* From Uiverse.io by ercnersoy - Tags: button */
button {
  padding: 5px;
  border-radius: 100%;
  box-shadow: 0px 0px 5px 7px #1475ec73;
  background-color: #1474ec;
  color: white;
  font-size: 17px;
  border: none;
  display: flex;
  align-items: center;
}

button::before {
  content: "fac";
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNTQ4Ljg2IDM4Mi4xNmMwIDM1LjUyLTMuMzE2NCA3MC4wOS05LjQ3MjcgMTAzLjI0LTAuOTQ1MzEgNC43MzQ0LTQuNzM0NCA3LjU3ODEtOS40NzI3IDcuNTc4MWgtMS44OTQ1Yy01LjIxMDktMC45NDUzMS04LjUyMzQtNi4xNTYyLTcuNTc4MS0xMC44OTEgNi4xNTYyLTMyLjIwMyA5LjQ3MjctNjUuODI4IDkuNDcyNy05OS45MjZzLTMuMzE2NC02OC42NjgtOS40NzI3LTEwMi43N2MtMC45NDUzMS01LjIxMDkgMi4zNjcyLTkuOTQ1MyA3LjU3ODEtMTAuODkxIDUuMjEwOS0wLjk0NTMxIDkuOTQ1MyAyLjM2NzIgMTAuODkxIDcuNTc4MSA2LjYzMjggMzUuMDM5IDkuOTQ5MiA3MC41NTkgOS45NDkyIDEwNi4wN3ptLTE0NC45Mi0xMzguNzZjMTAuODkxIDQ1LjkzOCAxNi41NzQgOTIuMzQ4IDE2LjU3NCAxMzguMjkgMCA0NS40NjUtNS4yMTA5IDg5Ljk4LTE2LjEwMiAxMzIuMTMtMC45NDUzMSAzLjMxNjQtMi4zNjcyIDYuMTU2Mi00LjI2MTcgOC41MjM0LTMuNzg5MSA1LjIxMDktOS40NzI3IDguMDUwOC0xNS42MjkgOC45OTYxaC0yLjgzOThjLTUuMjEwOSAwLTEwLjQxOC0xLjg5NDUtMTQuMjA3LTQuNzM0NGwtNzIuOTMtNTUuNDA2Yy0wLjk0NTMxLTAuNDcyNjYtMS44OTQ1LTAuOTQ1MzEtMi44Mzk4LTAuOTQ1MzFoLTUyLjA5NGMtOC41MjM0IDAtMTYuMTAyLTQuNzM0NC0yMC4zNjMtMTEuODQtMTIuMzEyLTIwLjgzNi0xOC40NjktNDYuODgzLTE4LjQ2OS03Ni4yNDYgMC0yOS44MzYgNi4xNTYyLTU3LjMwNSAxOC40NjktODEuOTMgMy43ODkxLTguMDUwOCAxMi4zMTItMTMuMjYyIDIxLjMxMi0xMy4yNjJoNTEuNjIxYzAuOTQ1MzEgMCAxLjg5NDUtMC40NzI2NiAyLjgzOTgtMC45NDUzMWw3MS41MDgtNTUuODg3YzIuODM5OC0xLjg5NDUgNS42ODM2LTMuMzE2NCA4Ljk5NjEtNC4yNjE3IDYuMTU2Mi0xLjQyMTkgMTIuMzEyLTAuNDcyNjYgMTcuOTk2IDIuODM5OCA1LjIxMDkgMy4zMTY0IDkgOC41MjczIDEwLjQxOCAxNC42ODR6bS0yLjgzOTggMTM4Ljc2YzAtNDQuNTE2LTUuMjEwOS04OS41MDgtMTUuNjI5LTEzNC4wMi0wLjQ3MjY2LTEuODk0NS0xLjQyMTktMi4zNjcyLTEuODk0NS0yLjgzOTgtMC40NzI2Ni0wLjQ3MjY2LTEuODk0NS0wLjk0NTMxLTMuNzg5MS0wLjQ3MjY2LTAuNDcyNjYgMC0xLjQyMTkgMC40NzI2Ni0xLjg5NDUgMC45NDUzMWwtNzEuNTA4IDU0LjkzOGMtNC4yNjE3IDMuMzE2NC05LjQ3MjcgNC43MzQ0LTE0LjY4IDQuNzM0NGgtNTEuMTQ4Yy0xLjg5NDUgMC0zLjMxNjQgMC45NDUzMS00LjI2MTcgMi44Mzk4LTEwLjg5MSAyMi4yNTgtMTYuNTc0IDQ2Ljg4My0xNi41NzQgNzMuODc5IDAgMjYuMDQ3IDUuMjEwOSA0OC43NzcgMTUuNjI5IDY2Ljc3MyAwLjk0NTMxIDEuNDIxOSAyLjM2NzIgMi4zNjcyIDQuMjYxNyAyLjM2NzJoNTIuMDk0YzUuMjEwOSAwIDEwLjQxOCAxLjg5NDUgMTQuNjggNC43MzQ0bDcxLjk4NCA1NS44ODNjMS40MjE5IDAuOTQ1MzEgMi44Mzk4IDAuOTQ1MzEgMy4zMTY0IDAuOTQ1MzEgMC45NDUzMSAwIDEuODk0NS0wLjQ3MjY2IDMuMzE2NC0xLjg5NDUgMC40NzI2Ni0wLjQ3MjY2IDAuNDcyNjYtMC45NDUzMSAwLjk0NTMxLTEuODk0NSA5Ljk0MTQtNDAuMjQ2IDE1LjE1Mi04My4zNDQgMTUuMTUyLTEyNi45MXptODIuODc1LTc5LjA4NmMtNS4yMTA5IDAuNDcyNjYtOC45OTYxIDUuMjEwOS04LjA1MDggMTAuNDE4IDIuODM5OCAyMi43MyA0LjI2MTcgNDUuOTM4IDQuMjYxNyA2OC42NjhzLTEuNDIxOSA0NS40NjUtNC4yNjE3IDY3LjI1Yy0wLjQ3MjY2IDUuMjEwOSAyLjgzOTggOS45NDUzIDguMDUwOCAxMC40MThoMS40MjE5YzQuNzM0NCAwIDguOTk2MS0zLjMxNjQgOS40NzI3LTguNTIzNCAyLjgzOTgtMjIuNzMgNC4yNjE3LTQ1LjkzOCA0LjI2MTctNjkuNjE3IDAtMjMuNjgtMS40MjE5LTQ3LjM1OS00LjI2MTctNzAuNTYyLTAuOTQ5MjItNS4yMTA5LTUuNjgzNi05LTEwLjg5NS04LjA1MDh6IiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo=");
  background-size: 100%;
  background-repeat: no-repeat;
  color: transparent;
  position: relative;
  width: 50px;
  height: 50px;
  display: block;
}

button:active {
  border-radius: 100%;
  box-shadow: inset 0px 0px 10px 0px rgb(240, 237, 237);
}
</style>


================================================
FILE: Buttons/ercnersoy_spicy-turkey-3.html
================================================
<button> hover me!
</button>
<style>
/* From Uiverse.io by ercnersoy - Tags: button */
button {
 padding: 1rem 2rem;
 border: 0;
 box-shadow: 0px 0px 40px 0px red;
 font-weight: bolder;
 color: white;
 border-radius: 0.3rem;
 background-color: red;
 letter-spacing: .2rem;
}

button:hover {
 animation: changeBg 1s infinite;
 -webkit-animation-duration: 10s;
}

@keyframes changeBg {
 0%,
	100% {
  box-shadow: 0px 0px 40px 0px red;
 }

 25% {
  box-shadow: 0px 0px 40px 0px turquoise;
  background-color: turquoise;
 }

 50% {
  box-shadow: 0px 0px 40px 0px purple;
  background-color: purple;
 }

 75% {
  box-shadow: 0px 0px 40px 0px rgb(191, 204, 11);
  background-color: rgb(191, 204, 11);
 }
}
</style>


================================================
FILE: Buttons/ercnersoy_swift-bullfrog-99.html
================================================
<button>
  click me
</button>
<style>
/* From Uiverse.io by ercnersoy - Tags: button */
button {
  padding: 0.5rem 2.5rem 0.5rem 2.5rem;
  box-shadow: 0px 0px 0px 3px black;
  border: 0;
  border-radius: 0.5rem;
  font-size: 1rem;
  background-color: #ffc83d;
  color: black;
  font-weight: bolder;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  position: relative;
  transition: all .9s ease-in-out;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

button:hover {
  background-color: #f03a17;
  color: white;
}

button::before {
  content: "😍";
  position: absolute;
  left: -0rem;
  top: 0rem;
  opacity: 1;
  font-size: 1.55rem;
  transition: all .9s ease-in-out;
  transform: rotate(0deg);
}

button:hover::before {
  content: "😘";
  opacity: 1;
  visibility: visible;
  transform: rotate(40deg);
  font-size: 2.5rem;
  top: -0.75rem;
  transition: all .9s ease-in-out;
  animation: rightRun 2s forwards;
}

button:active::before {
  content: "🥰";
}

@keyframes rightRun {
  100% {
    transform: translateX(140px);
  }
}
</style>


================================================
FILE: Buttons/ernestnash_cold-turtle-83.html
================================================

<a class="btn" href="#">I am a button</a>
<style>
/* From Uiverse.io by ernestnash - Tags: button */
.btn {
 display: inline-block;
 padding: 0.9rem 1.8rem;
 font-size: 16px;
 font-weight: 700;
 color: white;
 border: 3px solid rgb(252, 70, 100);
 cursor: pointer;
 position: relative;
 background-color: transparent;
 text-decoration: none;
 overflow: hidden;
 z-index: 1;
 font-family: inherit;
}

.btn::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgb(252, 70, 100);
 transform: translateX(-100%);
 transition: all .3s;
 z-index: -1;
}

.btn:hover::before {
 transform: translateX(0);
}
</style>


================================================
FILE: Buttons/escannord_lovely-gecko-23.html
================================================
<div class="button">
  <span class="text">hover me</span>
  <span class="arrow"></span>
</div>

<style>
/* From Uiverse.io by escannord  - Tags: icon, button, hover, text animation */
.button {
  --color: rgb(56, 55, 100);
  padding: 1rem 2rem;
  background-color: transparent;
  color: var(--color);
  font-weight: bolder;
  text-transform: uppercase;
  display: flex;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
  position: relative;
  border-radius: 5px;
}

.arrow {
  display: inline-flex;
  position: relative;
  width: 30px;
  height: 15px;
  margin-left: 0.5rem;
}

.arrow::after,
.arrow::before {
  content: "";
  display: inline-block;
  position: absolute;
  border-color: var(--color);
}

.arrow::after {
  width: 10px;
  height: 0;
  border: 2px solid var(--color);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.arrow::before {
  width: 10px;
  height: 10px;
  border-top: 4px solid var(--color);
  border-right: 4px solid var(--color);
  left: 3px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.button:hover {
  background-color: var(--color);
  color: white;
}

.button:hover .arrow {
  transform: translateX(10px);
}

.button:hover .text {
  transform: translateX(10px);
}

.button:hover .arrow::after {
  width: 25px;
  border-color: white;
}

.button:hover .arrow::before {
  left: 15px;
  border-color: white;
}

.button,
.text,
.arrow,
.arrow::after,
.arrow::before,
.button::before,
.button::after {
  transition: all 0.3s, box-shadow 0.2s;
}

.button::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 10px;
  border-radius: 5px;
  border: solid 3px var(--color);
  border-right-color: transparent;
  background-color: transparent;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.button::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 10px;
  border-radius: 5px;
  border: solid 3px var(--color);
  border-left-color: transparent;
  background-color: transparent;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.button:hover:before,
.button:hover:after {
  width: 50% !important;
}

.button:active {
  box-shadow: 0px 0px 0px 7px rgba(79, 78, 105, 0.295);
}

</style>
    

================================================
FILE: Buttons/escannord_old-grasshopper-30.html
================================================
<button class="button">join now</button>

<style>
/* From Uiverse.io by escannord  - Tags: simple, button, btn */
.button {
  cursor: pointer;
  display: inline-block;
  width: 14rem;
  height: 4rem;
  border: solid 2px;
  background: linear-gradient(to right, #ff00ffb0, #ff9900a1, #ff00ff9f),
    radial-gradient(rgb(255, 255, 255), rgb(255, 0, 0));
  border-radius: 20px;
  font-weight: 800;
  position: relative;
  border-image: linear-gradient(to right, #5e005e, #804d00, #eb1beb);
  border-image-slice: 50;
}

.button::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 90%;
  height: 70%;
  border: 1px solid rgba(255, 255, 255, 0.384);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.575),
    inset 0px 0px 0px 0px rgba(255, 255, 255, 0.575);
}

</style>
    

================================================
FILE: Buttons/escannord_smooth-bat-37.html
================================================
<button class="button">
  <div class="lid">
    <span class="side top"></span>
    <span class="side front"></span>
    <span class="side back"> </span>
    <span class="side left"></span>
    <span class="side right"></span>
  </div>
  <div class="panels">
    <div class="panel-1">
      <div class="panel-2">
        <div class="btn-trigger">
          <span class="btn-trigger-1"></span>
          <span class="btn-trigger-2"></span>
        </div>
      </div>
    </div>
  </div>
</button>

<style>
/* From Uiverse.io by escannord  - Tags: 3d, button, danger, self-destruct */
.button {
  cursor: pointer;
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(25deg) rotateZ(0deg);
  background-color: transparent;
  border: none;
}

.lid {
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  transform-origin: 0 80px -120px;
  height: 80px;
  width: 250px;
  background-color: rgba(0, 0, 0, 0);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lid:hover,
.button:hover .lid {
  transform: translate(-50%, -50%) rotateX(60deg);
}

.lid .side {
  display: inline-block;
  width: 250px;
  height: 250px;
  background-color: rgba(63, 112, 141, 0.308);
  position: absolute;
  top: 50%;
  left: 50%;
  border: solid 1px rgba(0, 132, 255, 0.226);
}
.front {
  transform: translate(-50%, -50%) translateZ(125px);
  height: 80px !important;
}
.top {
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(40px);
  background-color: rgba(167, 47, 10, 0.438);
}
.left {
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(125px);
  height: 80px !important;
}

.right {
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(125px);
  height: 80px !important;
}

.back {
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(125px);
  background-color: rgba(250, 234, 18, 0.418);
  height: 80px !important;
}

.back::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 10px;
  background-color: black;
  bottom: 0;
  left: 10px;
}

.back::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 10px;
  background-color: black;
  bottom: 0;
  right: 10px;
}

.panels {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(-40px);
}

.panel-1 {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 250px;
  width: 250px;
  background-color: rgb(166, 255, 0);
  background: repeating-linear-gradient(
    45deg,
    rgb(247, 243, 33) 0% 2%,
    black 2% 4%
  );
  box-shadow: 0px 0px 0px 20px red;
}

.panel-2 {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 200px;
  width: 200px;
  background-color: rgb(0, 0, 0);
  background: linear-gradient(-135deg, rgb(43, 42, 42), black);
  border: solid 5px rgb(247, 243, 33);
}

.panel-1::after {
  content: "SELF-DESTRUCT";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 290px;
  height: 25px;
  color: white;
  font-weight: bold;
  transform: translate(-50%, -50%) translateY(170px);
  font-size: larger;
  background-color: red;
}

.panel-1::before {
  content: "WARNING: DANGER";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 290px;
  height: 25px;
  color: white;
  font-weight: bold;
  transform: translate(-50%, -50%) rotateZ(90deg) translateY(170px);
  font-size: larger;
  background-color: red;
}

.btn-trigger {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
}

.btn-trigger-1 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: rgb(207, 195, 195);
  box-shadow: -0px 1px 0 rgb(54, 54, 54), -0px 2px 0 rgb(54, 54, 54),
    -1px 3px 0 rgb(54, 54, 54), -1px 4px 0 rgb(54, 54, 54),
    -2px 5px 0 rgb(54, 54, 54), -2px 6px 0 rgb(54, 54, 54),
    -3px 7px 0 rgb(54, 54, 54), -3px 8px 0 rgb(54, 54, 54),
    -4px 9px 0 rgb(54, 54, 54), -4px 10px 0 rgb(54, 54, 54),
    -5px 11px 0 rgb(54, 54, 54), -5px 12px 0 rgb(54, 54, 54),
    -6px 13px 0 rgb(54, 54, 54), -6px 14px 0 rgb(54, 54, 54),
    -7px 15px 0 rgb(54, 54, 54), -7px 16px 0 rgb(54, 54, 54),
    -8px 17px 0 rgb(54, 54, 54), -8px 18px 0 rgb(54, 54, 54),
    -9px 19px 0 rgb(54, 54, 54), -9px 20px 0 rgb(54, 54, 54),
    -10px 21px 0 rgb(54, 54, 54), -10px 22px 0 rgb(54, 54, 54),
    -11px 23px 0 rgb(54, 54, 54), -11px 24px 0 rgb(54, 54, 54),
    -12px 25px 0 rgb(54, 54, 54), -12px 26px 0 rgb(54, 54, 54);
  border-radius: 50%;
  transform: translate(-50%, -50%) translateZ(50px);
}

.btn-trigger-2 {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: rgb(241, 17, 17);
  box-shadow: -0px 1px 0 rgb(128, 5, 5), -0px 2px 0 rgb(128, 5, 5),
    -1px 3px 0 rgb(128, 5, 5), -1px 4px 0 rgb(128, 5, 5),
    -2px 5px 0 rgb(128, 5, 5), -2px 6px 0 rgb(128, 5, 5),
    -3px 7px 0 rgb(128, 5, 5), -3px 8px 0 rgb(128, 5, 5),
    -4px 9px 0 rgb(128, 5, 5), -4px 10px 0 rgb(128, 5, 5),
    -5px 11px 0 rgb(128, 5, 5), -5px 12px 0 rgb(128, 5, 5),
    -6px 13px 0 rgb(128, 5, 5), -6px 14px 0 rgb(128, 5, 5),
    -7px 15px 0 rgb(128, 5, 5), -7px 16px 0 rgb(128, 5, 5);
  border-radius: 50%;
  transition: all 0.3s;
  transform: translate(-40%, -70%) translateZ(100px);
}

.btn-trigger-2:active {
  transform: translate(-50%, -50%) translateZ(100px);
  box-shadow: none;
}

@keyframes rotate {
  100% {
    transform: rotateX(360deg);
  }
}

</style>
    

================================================
FILE: Buttons/escannord_white-starfish-13.html
================================================
<button class="button">
  <i class="icon"
    ><svg
      width="20px"
      height="20px"
      viewBox="-0.5 0 25 25"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M2.33045 8.38999C0.250452 11.82 9.42048 14.9 9.42048 14.9C9.42048 14.9 12.5005 24.07 15.9305 21.99C19.5705 19.77 23.9305 6.13 21.0505 3.27C18.1705 0.409998 4.55045 4.74999 2.33045 8.38999Z"
        stroke="#000000"
        stroke-width="3"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
      <path
        d="M15.1999 9.12L9.41992 14.9"
        stroke="#000000"
        stroke-width="3"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path></svg
  ></i>
  Send Message
</button>

<style>
/* From Uiverse.io by escannord  - Tags: gray, button, sendMessage */
.button {
  cursor: pointer;
  padding: 0.3rem 1rem;
  min-width: 10rem;
  min-height: 4rem;
  font-weight: bold;
  border: solid 1px white;
  /*   background-color: white; */
  background: linear-gradient(rgb(173, 171, 171) 50%, #4e4d4df8 100%);
  position: relative;
  border-radius: 15px;
  z-index: 1;
  font-size: 20px;
  transition: 0.3s all;
  text-shadow: 0 1px 1px #1c1c1c44;
  box-shadow: 0px 2px 4px #1c1c1c48, 0px 30px 100px #1c1c1c33,
    0px 15px 30px #1c1c1c2c, 0px 12px 6px #1c1c1c18;
}

button:hover:before {
  background: linear-gradient(#ffffff8f 50%, #cacaca86 100%);
  box-shadow: 0 -1px rgba(0, 0, 0, 0.171);
}

.button::before {
  content: "";
  transition: 0.8s all;
  inset: 7px 5px;
  border-radius: 25px;
  border: solid 1px #b4b4b473;
  background: linear-gradient(#d8d6d686 15%, #faf9f9 80%);
  z-index: -1;
  position: absolute;
}
.button:active {
  box-shadow: none;
}
.icon {
  display: inline-block;
  transition: all 0.5s;
  transform: none;
}

.button:hover .icon {
  transform: translateX(-7px) rotate(45deg);
}
.button::after {
  content: "";
  position: absolute;
  width: 97%;
  height: 90%;
  z-index: -2;
  border-radius: 15px;
  background: linear-gradient(
    rgb(255, 255, 255),
    rgba(253, 253, 253, 0.589) 75%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

</style>
    

================================================
FILE: Buttons/eslam-hany_fresh-octopus-46.html
================================================
<button class="btn" data-text="HELLO">
  <span class="hover">HOVER</span>
</button>
<style>
/* From Uiverse.io by eslam-hany - Tags: button, hover */
.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 40px;
  border: 3px solid #0b2447;
  color: #fff;
  font-size: 20px;
  font-weight: bolder;
  background-color: #0d6efd;
  overflow: hidden;
  transition: all 0.5s;
  cursor: pointer;
}

.hover {
  transform: translateX(0%);
  transition: all 0.5s;
}

.btn::after {
  position: absolute;
  content: attr(data-text);
  left: 0;
  transform: translateX(-100%);
  transition: all 0.5s;
}

.btn:hover::after {
  transform: translateX(50%);
  transition: all 0.5s;
}

.btn:hover .hover {
  position: absolute;
  transform: translateX(150%);
  transition: all 0.5s;
}
</style>


================================================
FILE: Buttons/eslam-hany_grumpy-elephant-48.html
================================================
<button class="btn">
  Button
</button>
<style>
/* From Uiverse.io by eslam-hany - Tags: button */
.btn {
  position: relative;
  padding: 10px 50px;
  font-size: 20px;
  border: 1px solid #002B5B;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 15px;
  transition: all 0.5s;
  z-index: 1;
}

.btn:hover {
  transform: scale(1.1);
  color: #fff;
  transition: all 0.5s;
}

.btn::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 0%;
  height: 100%;
  border-radius: 15px;
  background: linear-gradient(#002B5b,#EA5455);
  transition: all 0.5s;
  z-index: -1;
}

.btn:hover::after {
  top: 0%;
  left: 0%;
  width: 100%;
  transition: all 0.5s;
}
</style>


================================================
FILE: Buttons/estefaniarizzo_dull-donkey-18.html
================================================
<button class="custom-button"><span>Click Here </span></button>

<style>
/* From Uiverse.io by estefaniarizzo  - Tags: button, click, animated, css effect, multicolor, hover button, 3d button */
.custom-button {
  padding: 10px 20px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  background: linear-gradient(45deg, #4caf50, #ffc107, #2196f3);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(0, 0, 0, 0.1) inset;
  position: relative;
  overflow: hidden;
  perspective: 1000px;
  width: 200px;
  height: 40px;
}

.custom-button:hover {
  transform: translateY(-2px) rotateX(20deg) rotateY(10deg);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(0, 0, 0, 0.2) inset;
  background: linear-gradient(45deg, #02ff0e, #fc0000, #ae00ff);
}

.custom-button:focus {
  outline: none;
}

.custom-button:active {
  transform: translateY(0) scale(1.1) rotate(45deg);
  box-shadow: none;
  animation: pulse 0.5s ease;
}

.custom-button::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  z-index: -1;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1) rotate(120deg);
  }
  100% {
    transform: scale(1);
  }
}

.custom-button span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  opacity: 1; /* El texto principal estará visible por defecto */
}

</style>
    

================================================
FILE: Buttons/fabiodevbr_shy-termite-9.html
================================================
<div class="centralize">
  <div>
    <button>
      <span><svg viewBox="0 0 467 512.22" clip-rule="evenodd" fill-rule="evenodd" image-rendering="optimizeQuality" text-rendering="geometricPrecision" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg" fill="#0E418F" height="12" width="12"><path d="M131.07 372.11c.37 1 .57 2.08.57 3.2 0 1.13-.2 2.21-.57 3.21v75.91c0 10.74 4.41 20.53 11.5 27.62s16.87 11.49 27.62 11.49h239.02c10.75 0 20.53-4.4 27.62-11.49s11.49-16.88 11.49-27.62V152.42c0-10.55-4.21-20.15-11.02-27.18l-.47-.43c-7.09-7.09-16.87-11.5-27.62-11.5H170.19c-10.75 0-20.53 4.41-27.62 11.5s-11.5 16.87-11.5 27.61v219.69zm-18.67 12.54H57.23c-15.82 0-30.1-6.58-40.45-17.11C6.41 356.97 0 342.4 0 326.52V57.79c0-15.86 6.5-30.3 16.97-40.78l.04-.04C27.51 6.49 41.94 0 57.79 0h243.63c15.87 0 30.3 6.51 40.77 16.98l.03.03c10.48 10.48 16.99 24.93 16.99 40.78v36.85h50c15.9 0 30.36 6.5 40.82 16.96l.54.58c10.15 10.44 16.43 24.66 16.43 40.24v302.01c0 15.9-6.5 30.36-16.96 40.82-10.47 10.47-24.93 16.97-40.83 16.97H170.19c-15.9 0-30.35-6.5-40.82-16.97-10.47-10.46-16.97-24.92-16.97-40.82v-69.78zM340.54 94.64V57.79c0-10.74-4.41-20.53-11.5-27.63-7.09-7.08-16.86-11.48-27.62-11.48H57.79c-10.78 0-20.56 4.38-27.62 11.45l-.04.04c-7.06 7.06-11.45 16.84-11.45 27.62v268.73c0 10.86 4.34 20.79 11.38 27.97 6.95 7.07 16.54 11.49 27.17 11.49h55.17V152.42c0-15.9 6.5-30.35 16.97-40.82 10.47-10.47 24.92-16.96 40.82-16.96h170.35z" fill-rule="nonzero"></path></svg> Copy link</span>
      <span>Copied</span>
    </button>
  <div>
  <div class="description">
    <p>Click to see what happens</p>
  <div>
<div></div></div></div></div></div></div>
<style>
/* From Uiverse.io by fabiodevbr - Tags: button, click, animated, copy, click effect */
button {
  background-color: #F2F7FA;
  width: 100px;
  height: 30px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  overflow: hidden;
  transition-duration: 700ms;
}

button span:first-child {
  color: #0E418F;
  position: absolute;
  transform: translate(-50%, -50%)
}

button span:last-child {
  position: absolute;
  color: #B5CCF3;
  opacity: 0;
  transform: translateY(100%) translateX(-50%);
  height: 14px;
  line-height: 13px;
}

button:focus {
  background-color: #0E418F;
  width: 120px;
  height: 40px;
  transition-delay: 100ms;
  transition-duration: 500ms;
}

button:focus span:first-child {
  color: #B5CCF3;
  transform: translateX(-50%) translateY(-150%);
  opacity: 0;
  transition-duration: 500ms;
}

button:focus span:last-child {
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
  transition-delay: 300ms;
  transition-duration: 500ms;
}

button:focus:end {
  background-color: #FFFFFF;
  width: 120px;
  height: 40px;
  transition-duration: 900ms;
}

.centralize {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.description {
  margin-top: 10px;
  color: #B5CCF3;
}
</style>


================================================
FILE: Buttons/faizanullah1999_angry-snake-12.html
================================================
<div class="button-borders">
  <button class="primary-button"> BUTTON
  </button>
</div>
<style>
/* From Uiverse.io by faizanullah1999 - Tags: button */
.primary-button {
 font-family: 'Ropa Sans', sans-serif;
    /* font-family: 'Valorant', sans-serif; */
 color: white;
 cursor: pointer;
 font-size: 13px;
 font-weight: bold;
 letter-spacing: 0.05rem;
 border: 1px solid #0E1822;
 padding: 0.8rem 2.1rem;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 531.28 200'%3E%3Cdefs%3E%3Cstyle%3E .shape %7B fill: %23FF4655 /* fill: %230E1822; */ %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='shape' points='415.81 200 0 200 115.47 0 531.28 0 415.81 200' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
 background-color: #0E1822;
 background-size: 200%;
 background-position: 200%;
 background-repeat: no-repeat;
 transition: 0.3s ease-in-out;
 transition-property: background-position, border, color;
 position: relative;
 z-index: 1;
}

.primary-button:hover {
 border: 1px solid #FF4655;
 color: white;
 background-position: 40%;
}

.primary-button:before {
 content: "";
 position: absolute;
 background-color: #0E1822;
 width: 0.2rem;
 height: 0.2rem;
 top: -1px;
 left: -1px;
 transition: background-color 0.15s ease-in-out;
}

.primary-button:hover:before {
 background-color: white;
}

.primary-button:hover:after {
 background-color: white;
}

.primary-button:after {
 content: "";
 position: absolute;
 background-color: #FF4655;
 width: 0.3rem;
 height: 0.3rem;
 bottom: -1px;
 right: -1px;
 transition: background-color 0.15s ease-in-out;
}

.button-borders {
 position: relative;
 width: fit-content;
 height: fit-content;
}

.button-borders:before {
 content: "";
 position: absolute;
 width: calc(100% + 0.5em);
 height: 50%;
 left: -0.3em;
 top: -0.3em;
 border: 1px solid #0E1822;
 border-bottom: 0px;
    /* opacity: 0.3; */
}

.button-borders:after {
 content: "";
 position: absolute;
 width: calc(100% + 0.5em);
 height: 50%;
 left: -0.3em;
 bottom: -0.3em;
 border: 1px solid #0E1822;
 border-top: 0px;
    /* opacity: 0.3; */
 z-index: 0;
}

.shape {
 fill: #0E1822;
}

</style>


================================================
FILE: Buttons/fanishah_silly-deer-26.html
================================================
<a href="#" class="button">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Button
</a>
<style>
/* From Uiverse.io by fanishah - Tags: button */
.button {
  position: relative;
  padding: 12px 25px;
  font-size: 1.5rem;
  color: #1e9bff;
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  text-shadow: 0 0 15px #1e9bff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  transition: 0.5s;
  z-index: 1;
}

.button:hover {
  color: #fff;
  border: 2px solid rgba(0, 0, 0, 0);
  box-shadow: 0 0 0px #1e9bff;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1e9bff;
  z-index: -1;
  transform: scale(0);
  transition: 0.5s;
}

.button:hover::before {
  transform: scale(1);
  transition-delay: 0.5s;
  box-shadow: 0 0 10px #1e9bff,
    0 0 30px #1e9bff,
    0 0 60px #1e9bff;
}

.button span {
  position: absolute;
  background: #1e9bff;
  pointer-events: none;
  border-radius: 2px;
  box-shadow: 0 0 10px #1e9bff,
    0 0 20px #1e9bff,
    0 0 30px #1e9bff,
    0 0 50px #1e9bff,
    0 0 100px #1e9bff;
  transition: 0.5s ease-in-out;
  transition-delay: 0.25s;
}

.button:hover span {
  opacity: 0;
  transition-delay: 0s;
}

.button span:nth-child(1),
.button span:nth-child(3) {
  width: 40px;
  height: 4px;
}

.button:hover span:nth-child(1),
.button:hover span:nth-child(3) {
  transform: translateX(0);
}

.button span:nth-child(2),
.button span:nth-child(4) {
  width: 4px;
  height: 40px;
}

.button:hover span:nth-child(1),
.button:hover span:nth-child(3) {
  transform: translateY(0);
}

.button span:nth-child(1) {
  top: calc(50% - 2px);
  left: -50px;
  transform-origin: left;
}

.button:hover span:nth-child(1) {
  left: 50%;
}

.button span:nth-child(3) {
  top: calc(50% - 2px);
  right: -50px;
  transform-origin: right;
}

.button:hover span:nth-child(3) {
  right: 50%;
}

.button span:nth-child(2) {
  left: calc(50% - 2px);
  top: -50px;
  transform-origin: top;
}

.button:hover span:nth-child(2) {
  top: 50%;
}

.button span:nth-child(4) {
  left: calc(50% - 2px);
  bottom: -50px;
  transform-origin: bottom;
}

.button:hover span:nth-child(4 ) {
  bottom: 50%;
}
</style>


================================================
FILE: Buttons/fanishah_smart-dog-17.html
================================================
<button class="button">
  <div class="icon">
    <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="shere">
      <path fill="#f2295b" d="M767.99994 585.142857q75.995429 0 129.462857 53.394286t53.394286 129.462857-53.394286 129.462857-129.462857 53.394286-129.462857-53.394286-53.394286-129.462857q0-6.875429 1.170286-19.456l-205.677714-102.838857q-52.589714 49.152-124.562286 49.152-75.995429 0-129.462857-53.394286t-53.394286-129.462857 53.394286-129.462857 129.462857-53.394286q71.972571 0 124.562286 49.152l205.677714-102.838857q-1.170286-12.580571-1.170286-19.456 0-75.995429 53.394286-129.462857t129.462857-53.394286 129.462857 53.394286 53.394286 129.462857-53.394286 129.462857-129.462857 53.394286q-71.972571 0-124.562286-49.152l-205.677714 102.838857q1.170286 12.580571 1.170286 19.456t-1.170286 19.456l205.677714 102.838857q52.589714-49.152 124.562286-49.152z"></path>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telegram icon-shere" viewBox="0 0 16 16">
      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"></path>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram icon-shere" viewBox="0 0 16 16">
      <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-whatsapp icon-shere" viewBox="0 0 16 16">
      <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"></path>
    </svg>
  </div>
  <p>Share me</p>
</button>
<style>
/* From Uiverse.io by fanishah - Tags: button, share, social media */
.button {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 400;
  background: #f2295b;
  color: white;
  padding: 0.35em 0;
  font-size: 17px;
  border: none;
  border-radius: 0.7em;
  letter-spacing: 0.08em;
  position: relative;
  display: flex;
  align-content: center;
  align-items: center;
  overflow: hidden;
  height: 2.7em;
  padding-left: 3em;
  padding-right: 0.5em;
}

.button .icon {
  background: #fff;
  margin-right: 1em;
  height: 2.2em;
  width: 2.2em;
  border-radius: 0.5em;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0.2em;
  transition: all .7s;
  gap: 10px;
}

.shere {
  width: 1.3rem;
  height: 1.3rem;
}

.button:hover .icon {
  width: calc(100% - 0.6rem);
}

.button:hover .shere {
  width: calc(100% - 0.6rem);
  display: none;
}

.button .icon-shere {
  color: #f2295b;
  width: 1.5rem;
  height: 1.5rem;
  display: none;
}

.button:hover .icon .icon-shere {
  display: flex;
}
</style>


================================================
FILE: Buttons/fanishah_tame-goose-53.html
================================================
<button class="button">
  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telegram" viewBox="0 0 16 16">
      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"></path>
    </svg>
  </div>
  <p>Telegram</p>
</button>
<style>
/* From Uiverse.io by fanishah - Tags: icon, button */
.button {
  font-family: inherit;
  background: #2CA0D9;
  color: white;
  padding: 0.35em 0;
  font-size: 17px;
  border: none;
  border-radius: 0.7em;
  letter-spacing: 0.08em;
  position: relative;
  display: flex;
  align-content: center;
  align-items: center;
  overflow: hidden;
  height: 2.5em;
  padding-left: 2.8em;
  padding-right: 0.92em;
}

.button .icon {
  background: #fff;
  height: 2em;
  width: 2em;
  border-radius: 2em;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0.4em;
  transition: all 0.5s;
}

.icon svg {
  margin-left: 0.1em;
  transition: all 0.5s;
  color: #2CA0D9;
  width: 1.2rem;
  height: 1.2rem;
}

.button:hover .icon svg {
  transform: rotate(360deg);
}

.button:hover .icon {
  width: calc(100% - 0.85rem);
  border-radius: 0.5em;
}
</style>


================================================
FILE: Buttons/faxriddin20_lazy-squid-52.html
================================================
<button class="button">Button</button>

<style>
/* From Uiverse.io by faxriddin20  - Tags: 3d, button, hover, active, hover effect, hover button */
.button {
  cursor: pointer;
  width: 160px;
  height: 50px;
  border-radius: 20px;
  color: violet;
  border: 2px solid violet;
  transition: all 0.6s ease;
}
.button:hover {
  box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px,
    rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px,
    rgba(240, 46, 170, 0.05) 0px 25px;
}
.button:active {
  box-shadow: none;
}

</style>
    

================================================
FILE: Buttons/faxriddin20_splendid-wolverine-24.html
================================================
<button class="telegram">
  <svg
    style="fill:#FFFFFF;"
    class="telegram-svg"
    viewBox="0,0,256,256"
    y="0px"
    x="0px"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g
      style="mix-blend-mode: normal"
      text-anchor="none"
      font-size="none"
      font-weight="none"
      font-family="none"
      stroke-dashoffset="0"
      stroke-dasharray=""
      stroke-miterlimit="10"
      stroke-linejoin="miter"
      stroke-linecap="butt"
      stroke-width="1"
      stroke="none"
      fill-rule="nonzero"
      fill="#ffffff"
    >
      <g transform="scale(5.12,5.12)">
        <path
          d="M46.137,6.552c-0.75,-0.636 -1.928,-0.727 -3.146,-0.238h-0.002c-1.281,0.514 -36.261,15.518 -37.685,16.131c-0.259,0.09 -2.521,0.934 -2.288,2.814c0.208,1.695 2.026,2.397 2.248,2.478l8.893,3.045c0.59,1.964 2.765,9.21 3.246,10.758c0.3,0.965 0.789,2.233 1.646,2.494c0.752,0.29 1.5,0.025 1.984,-0.355l5.437,-5.043l8.777,6.845l0.209,0.125c0.596,0.264 1.167,0.396 1.712,0.396c0.421,0 0.825,-0.079 1.211,-0.237c1.315,-0.54 1.841,-1.793 1.896,-1.935l6.556,-34.077c0.4,-1.82 -0.156,-2.746 -0.694,-3.201zM22,32l-3,8l-3,-10l23,-17z"
        ></path>
      </g>
    </g>
  </svg>
  <span class="telegram-text">Telegram</span>
</button>

<style>
/* From Uiverse.io by faxriddin20  - Tags: neumorphism, minimalist, smooth, hover effect */
.telegram {
  transition: none 0.5s ease;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  width: 130px;
  height: 50px;
  gap: 10px;
  border: none;
  background-color: rgb(42 171 238);
  color: white;
  border-radius: 15px;
  cursor: pointer;
}

.telegram-text {
  transition: none 0.3s ease;
  font-weight: bold;
  font-size: 1rem;
}

.telegram:hover .telegram-text {
  display: none;
  position: absolute;
}

.telegram-svg {
  width: 23px;
  height: 23px;
  transition: 0.8s;
}

.telegram:hover .telegram-svg {
  margin-left: 40px;
  display: block;
  transform: rotate(50deg);
}

</style>
    

================================================
FILE: Buttons/faxriddin20_tall-kangaroo-61.html
================================================
<button class="button">Button</button>

<style>
/* From Uiverse.io by faxriddin20  - Tags: simple, neumorphism, 3d, minimalist, button */
.button {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  border: none;
  width: 160px;
  height: 50px;
  color: white;
  background-color: transparent;
  border-radius: 20px;
  transition: all 0.3s ease;
}
.button:active {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

</style>
    

================================================
FILE: Buttons/faxriddin20_yellow-falcon-57.html
================================================
<button class="download-btn">
  <svg
    id="download"
    viewBox="0 0 24 24"
    data-name="Layer 1"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M14.29,17.29,13,18.59V13a1,1,0,0,0-2,0v5.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l3-3a1,1,0,0,0-1.42-1.42ZM18.42,6.22A7,7,0,0,0,5.06,8.11,4,4,0,0,0,6,16a1,1,0,0,0,0-2,2,2,0,0,1,0-4A1,1,0,0,0,7,9a5,5,0,0,1,9.73-1.61,1,1,0,0,0,.78.67,3,3,0,0,1,.24,5.84,1,1,0,1,0,.5,1.94,5,5,0,0,0,.17-9.62Z"
    ></path>
  </svg>
</button>

<style>
/* From Uiverse.io by faxriddin20  - Tags: purple, button, download, #button */
.download-btn {
  border: 2px solid rgb(168, 38, 255);
  background-color: white;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  transition: all 0.2s ease;
  cursor: pointer;
}
.download-btn svg {
  width: 25px;
  height: 25px;
  transition: all 0.3s ease;
}
.download-btn:hover svg {
  fill: white;
}
.download-btn:hover {
  background-color: rgb(168, 38, 255);
}

</style>
    

================================================
FILE: Buttons/fcb4355_breezy-bulldog-15.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by fcb4355 - Tags: button */
.button {
  padding: 7px 10px;
  border: 1px solid #bbb;
  color: #222;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.button:hover {
  background-color: #007ffe;
  color: #fff;
  box-shadow: -20px 50px 50px rgba(0,0,0,0.2);
  border: none;
  padding: 10px 20px;
}
</style>


================================================
FILE: Buttons/fcb4355_nervous-chipmunk-95.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by fcb4355 - Tags: button, after, 3d button */
.button {
  position: relative;
  padding: 10px 20px;
  border: none;
  color: #007ffe;
  cursor: pointer;
  transition: .3s;
  transition-delay: .3s;
  z-index: 0;
}

.button::after {
  position: absolute;
  content: '';
  width: 17px;
  height: 17px;
  background-color: #007ffe;
  right: -20px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  transition: .3s;
  opacity: 0;
}

.button::before {
  position: absolute;
  z-index: 0;
  content: '';
  width: 17px;
  height: 17px;
  background-color: #007ffe;
  left: -20px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  transition: .3s;
  opacity: 0;
}

button:hover::after {
  z-index: -1;
  right: 0;
  width: 50%;
  height: 100%;
  border-radius: 0;
  opacity: 1;
}

button:hover::before {
  z-index: -1;
  left: 0;
  width: 50%;
  height: 100%;
  border-radius: 0;
  opacity: 1;
}

button:hover {
  color: #fff;
  box-shadow: 10px 50px 50px rgba(52, 152, 219,.2);
}
</style>


================================================
FILE: Buttons/felipesntr_angry-bird-25.html
================================================
<button>
  <p>Let's talk</p>
  <span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      fill="currentColor"
      class="bi bi-whatsapp icon-shere"
      viewBox="0 0 16 16"
    >
      <path
        d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"
      ></path>
    </svg>
    Message
  </span>
</button>

<style>
/* From Uiverse.io by felipesntr  - Tags:  */
button {
  color: rgb(53, 188, 250);
  padding: 1em 2em 1em 2em;
  border: 2px solid rgb(53, 188, 250);
  border-radius: 0 1em 1em 1em;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

button:hover {
  border: 2px solid rgb(75, 228, 157);
}

button span {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgb(75, 228, 157);
  transition: ease-in-out 0.3s;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
}

button span svg {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.5em;
}

button:hover span {
  left: 0%;
}

</style>
    

================================================
FILE: Buttons/felipesntr_dangerous-deer-2.html
================================================
<button class="full-rounded">
<span>Hover me</span>
<div class="border full-rounded"></div></button>
<style>
/* From Uiverse.io by felipesntr - Tags: button */
button {
 font-size: 16px;
 position: relative;
 margin: auto;
 padding: 1em 2.5em 1em 2.5em;
 border: none;
 background: #fff;
 transition: all 0.1s linear;
 box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.1);
}

button:active {
 transform: scale(0.95);
}

button span {
 color: #464646;
}

button .border {
 position: absolute;
 border: 0.15em solid #fff;
 transition: all 0.3s 0.08s linear;
 top: 50%;
 left: 50%;
 width: 9em;
 height: 3em;
 transform: translate(-50%, -50%);
}

button:hover .border {
 display: block;
 width: 9.9em;
 height: 3.7em;
}

.full-rounded {
 border-radius: 2em;
}
</style>


================================================
FILE: Buttons/felipesntr_quiet-rattlesnake-27.html
================================================
<button> # NICE BUTTON
</button>
<style>
/* From Uiverse.io by felipesntr - Tags: button */
button {
 padding: 0.6em 1em;
 border: 4px solid #fa725a;
 transition: ease-in-out 0.3s;
 background-color: transparent;
 color: #fa725a;
 font-weight: bolder;
 font-size: 16px;
}

button:hover {
 transform: scale(1.2) rotate(10deg);
 background-color: #fa725a;
 color: white;
}
</style>


================================================
FILE: Buttons/felipesntr_strange-bobcat-47.html
================================================
<button>
  <span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"></path></svg> Create
  </span>
</button>
<style>
/* From Uiverse.io by felipesntr - Tags: icon, button */
button {
 border: 2px solid #24b4fb;
 background-color: #24b4fb;
 border-radius: 0.9em;
 padding: 0.8em 1.2em 0.8em 1em;
 transition: all ease-in-out 0.2s;
 font-size: 16px;
}

button span {
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 font-weight: 600;
}

button:hover {
 background-color: #0071e2;
}
</style>


================================================
FILE: Buttons/felipesntr_yellow-robin-29.html
================================================
<button>
    All products
</button>
<style>
/* From Uiverse.io by felipesntr - Tags: button */
button {
  font-size: 1rem;
  padding: 0.8em 2em;
  background-color: #000;
  border: 3px solid yellow;
  border-radius: 1em;
  color: #fff;
  font-weight: bolder;
  transition: cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s;
  box-shadow: -5px 5px 0px 0px yellow;
}

button:hover {
  transform: translate(5px, -5px);
}
</style>


================================================
FILE: Buttons/ferlagher_afraid-dingo-99.html
================================================
<button>
    <b>Fold me!</b>
</button>
<style>
/* From Uiverse.io by ferlagher - Tags: button */
button {
  position: relative;
  font-size: 1.2em;
  padding: 0.7em 1.4em;
  background-color: #BF0426;
  text-decoration: none;
  border: none;
  border-radius: 0.5em;
  color: #DEDEDE;
  box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.3);
}

button::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, rgba(33,33,33,1) 0%, rgba(33,33,33,1) 50%, rgba(150,4,31,1) 50%, rgba(191,4,38,1) 60%);
  border-radius: 0 0 0.5em 0;
  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
  transition: 0.3s;
}

button:hover::before {
  width: 1.6em;
  height: 1.6em;
}

button:active {
  box-shadow: 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.3);
  transform: translate(0.1em, 0.1em);
}
</style>


================================================
FILE: Buttons/floki1250_purple-otter-34.html
================================================
<!-- From Uiverse.io by floki1250  - Tags: simple, icon, animation, action, minimalist, button, rounded, smooth -->
<button
  class="cursor-pointer group hover:scale-105 hover:-translate-y-5 transition-all duration-500 ease-in-out hover:shadow-2xl bg-gray-50 hover:bg-white p-2 rounded-xl border-2 border-gray-400/30 shadow-lg"
>
  <div class="flex bg-gray-100 p-2 rounded-full shadow-inner">
    <div
      class="transition-all duration-500 ease-linear group-hover:rotate-0 group-hover:py-1 -rotate-45 px-1"
    >
      <svg
        viewBox="0 0 24 24"
        height="18"
        width="18"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="m20.34 9.32l-14-7a3 3 0 0 0-4.08 3.9l2.4 5.37a1.06 1.06 0 0 1 0 .82l-2.4 5.37A3 3 0 0 0 5 22a3.14 3.14 0 0 0 1.35-.32l14-7a3 3 0 0 0 0-5.36Zm-.89 3.57l-14 7a1 1 0 0 1-1.35-1.3l2.39-5.37a2 2 0 0 0 .08-.22h6.89a1 1 0 0 0 0-2H6.57a2 2 0 0 0-.08-.22L4.1 5.41a1 1 0 0 1 1.35-1.3l14 7a1 1 0 0 1 0 1.78"
          fill="currentColor"
        ></path>
      </svg>
    </div>
    <span class="pr-1 font-semibold drop-shadow-sm">Send Message</span>
  </div>
</button>


    

================================================
FILE: Buttons/flxderdev_fast-treefrog-50.html
================================================
<button class="button">HOVER ME</button>

<style>
/* From Uiverse.io by flxderdev  - Tags: gradient, button, modern, futuristic */
.button {
  height: 55px;
  width: 175px;
  margin: auto;
  align-items: center;
  border-radius: 50px;
  border: none;
  text-align: center;
  color: transparent;
  text-shadow: 0 0 0 rgb(255, 255, 255);
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 50ms ease;
  background: linear-gradient(90deg, #5f03f4, #f441a5, #b81fff, #5f03f4);
  background-size: 400%;
  display: block;
  margin-right: auto;
  margin-left: auto;
  font-family: "Montserrat", sans-serif;
}

.button:hover {
  -webkit-box-shadow: 0px 0px 15px 0px rgba(155, 0, 194, 0.9);
  -moz-box-shadow: 0px 0px 15px 0px rgba(155, 0, 194, 0.9);
  box-shadow: 0px 0px 15px 0px rgba(155, 0, 194, 0.9);
  animation: animate 8s ease infinite;
  transition: box-shadow, 0.4s;
  border: none;
  font-size: 19px;
  transform: scale(1.05, 1.05);
  background: linear-gradient(90deg, #5f03f4, #f441a5, #b81fff, #5f03f4);
  background-size: 400%;
}

.button:hover:before {
  filter: blur(20px);
  opacity: 1;
  animation: animate 8s linear infinite;
}

@keyframes animate {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 400%;
  }
}

</style>
    

================================================
FILE: Buttons/gagan-gv_fat-pug-54.html
================================================
<button class="btn">
  <span>Hover Me</span>
  <div class="container">
    <svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
      <path fill="" d="M962.267429 233.179429q-38.253714 56.027429-92.598857 95.451429 0.585143 7.972571 0.585143 23.990857 0 74.313143-21.723429 148.260571t-65.974857 141.970286-105.398857 120.32-147.456 83.456-184.539429 31.158857q-154.843429 0-283.428571-82.870857 19.968 2.267429 44.544 2.267429 128.585143 0 229.156571-78.848-59.977143-1.170286-107.446857-36.864t-65.170286-91.136q18.870857 2.852571 34.889143 2.852571 24.576 0 48.566857-6.290286-64-13.165714-105.984-63.707429t-41.984-117.394286l0-2.267429q38.838857 21.723429 83.456 23.405714-37.741714-25.161143-59.977143-65.682286t-22.308571-87.990857q0-50.322286 25.161143-93.110857 69.12 85.138286 168.301714 136.265143t212.260571 56.832q-4.534857-21.723429-4.534857-42.276571 0-76.580571 53.979429-130.56t130.56-53.979429q80.018286 0 134.875429 58.294857 62.317714-11.995429 117.174857-44.544-21.138286 65.682286-81.115429 101.741714 53.174857-5.705143 106.276571-28.598857z"></path>
    </svg>
    <svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
      <path fill="" d="M123.52064 667.99143l344.526782 229.708899 0-205.136409-190.802457-127.396658zM88.051421 585.717469l110.283674-73.717469-110.283674-73.717469 0 147.434938zM556.025711 897.627196l344.526782-229.708899-153.724325-102.824168-190.802457 127.396658 0 205.136409zM512 615.994287l155.406371-103.994287-155.406371-103.994287-155.406371 103.994287zM277.171833 458.832738l190.802457-127.396658 0-205.136409-344.526782 229.708899zM825.664905 512l110.283674 73.717469 0-147.434938zM746.828167 458.832738l153.724325-102.824168-344.526782-229.708899 0 205.136409zM1023.926868 356.00857l0 311.98286q0 23.402371-19.453221 36.566205l-467.901157 311.98286q-11.993715 7.459506-24.57249 7.459506t-24.57249-7.459506l-467.901157-311.98286q-19.453221-13.163834-19.453221-36.566205l0-311.98286q0-23.402371 19.453221-36.566205l467.901157-311.98286q11.993715-7.459506 24.57249-7.459506t24.57249 7.459506l467.901157 311.98286q19.453221 13.163834 19.453221 36.566205z"></path>
    </svg>
    <svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
      <path fill="" d="M950.930286 512q0 143.433143-83.748571 257.974857t-216.283429 158.573714q-15.433143 2.852571-22.601143-4.022857t-7.168-17.115429l0-120.539429q0-55.442286-29.696-81.115429 32.548571-3.437714 58.587429-10.313143t53.686857-22.308571 46.299429-38.034286 30.281143-59.977143 11.702857-86.016q0-69.12-45.129143-117.686857 21.138286-52.004571-4.534857-116.589714-16.018286-5.12-46.299429 6.290286t-52.589714 25.161143l-21.723429 13.677714q-53.174857-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.689143-22.016-49.152-7.68q-25.161143 64.585143-4.022857 116.589714-45.129143 48.566857-45.129143 117.686857 0 48.566857 11.702857 85.723429t29.988571 59.977143 46.006857 38.253714 53.686857 22.308571 58.587429 10.313143q-22.820571 20.553143-28.013714 58.88-11.995429 5.705143-25.746286 8.557714t-32.548571 2.852571-37.449143-12.288-31.744-35.693714q-10.825143-18.285714-27.721143-29.696t-28.306286-13.677714l-11.410286-1.682286q-11.995429 0-16.603429 2.56t-2.852571 6.582857 5.12 7.972571 7.460571 6.875429l4.022857 2.852571q12.580571 5.705143 24.868571 21.723429t17.993143 29.110857l5.705143 13.165714q7.460571 21.723429 25.161143 35.108571t38.253714 17.115429 39.716571 4.022857 31.744-1.974857l13.165714-2.267429q0 21.723429 0.292571 50.834286t0.292571 30.866286q0 10.313143-7.460571 17.115429t-22.820571 4.022857q-132.534857-44.032-216.283429-158.573714t-83.748571-257.974857q0-119.442286 58.88-220.306286t159.744-159.744 220.306286-58.88 220.306286 58.88 159.744 159.744 58.88 220.306286z"></path>
    </svg>
  </div>
</button>
<style>
/* From Uiverse.io by gagan-gv - Tags: social, button, hover, share */
.btn {
 position: relative;
 display: flex;
 overflow: hidden;
 cursor: pointer;
 width: 150px;
 height: 50px;
 background-color: #eeeeed;
 border-radius: 80px;
 border: none;
 padding: 0 80px;
 transition: all .2s ease;
 justify-content: center;
 align-items: center;
}

.btn:hover {
 transform: scale(1.1);
}

.btn span {
 position: absolute;
 z-index: 99;
 width: 150px;
 height: 50px;
 border-radius: 80px;
 font-family: 'Courier New', Courier, monospace;
 font-weight: 600;
 font-size: 17px;
 text-align: center;
 line-height: 50px;
 letter-spacing: 2px;
 color: #eeeeed;
 background-color: #1f1f1f;
 padding: 0 10px;
 transition: all 1.2s ease;
}

.btn .container {
 display: flex;
 width: 150px;
 border-radius: 80px;
 line-height: 50px;
}

.btn svg {
 padding: 0 5px;
 opacity: 0;
}

.btn .container svg:nth-of-type(1) {
 transition-delay: 0.65s;
}

.btn .container svg:nth-of-type(2) {
 transition-delay: 0.8s;
}

.container svg:nth-of-type(3) {
 transition-delay: 0.5s;
}

.btn:hover span {
 opacity: 0;
}

.btn:hover svg {
 opacity: 1;
}
</style>


================================================
FILE: Buttons/gagan-gv_massive-goat-19.html
================================================
<button class="btn">
    <span class="icon">
        <svg viewBox="0 0 175 80" width="40" height="40">
            <rect width="80" height="15" fill="#f0f0f0" rx="10"></rect>
            <rect y="30" width="80" height="15" fill="#f0f0f0" rx="10"></rect>
            <rect y="60" width="80" height="15" fill="#f0f0f0" rx="10"></rect>
        </svg>
    </span>
    <span class="text">MENU</span>
</button>
<style>
/* From Uiverse.io by gagan-gv - Tags: button */
.btn {
  width: 150px;
  height: 50px;
  border-radius: 5px;
  border: none;
  transition: all 0.5s ease-in-out;
  font-size: 20px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  background: #040f16;
  color: #f5f5f5;
}

.btn:hover {
  box-shadow: 0 0 20px 0px #2e2e2e3a;
}

.btn .icon {
  position: absolute;
  height: 40px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
}

.btn .text {
  transform: translateX(55px);
}

.btn:hover .icon {
  width: 175px;
}

.btn:hover .text {
  transition: all 0.5s;
  opacity: 0;
}

.btn:focus {
  outline: none;
}

.btn:active .icon {
  transform: scale(0.85);
}
</style>


================================================
FILE: Buttons/gagan-gv_rotten-fish-89.html
================================================
<button type="button" class="btn cube cube-hover">
  <div class="bg-top">
  <div class="bg-inner"></div>
  </div>
  <div class="bg-right">
  <div class="bg-inner"></div>
  </div>
  <div class="bg">
  <div class="bg-inner"></div>
  </div>
  <div class="text">Hover Me</div>
</button>
<style>
/* From Uiverse.io by gagan-gv - Tags: button */
.btn {
 display: block;
 padding: 0.7em 1em;
 background: transparent;
 outline: none;
 border: 0;
 color: #d4af37;
 letter-spacing: 0.1em;
 font-family: monospace;
 font-size: 17px;
 font-weight: bold;
 z-index: 1;
}

.cube {
 position: relative;
 transition: all 0.5s;
}

.cube .bg-top {
 position: absolute;
 height: 10px;
 background: #d4af37;
 bottom: 100%;
 left: 5px;
 right: -5px;
 transform: skew(-45deg, 0);
 margin: 0;
 transition: all 0.4s;
}

.cube .bg-top .bg-inner {
 bottom: 0;
}

.cube .bg {
 position: absolute;
 left: 0;
 bottom: 0;
 top: 0;
 right: 0;
 background: #d4af37;
 transition: all 0.4s;
}

.cube .bg-right {
 position: absolute;
 background: #d4af37;
 top: -5px;
 z-index: 0;
 bottom: 5px;
 width: 10px;
 left: 100%;
 transform: skew(0, -45deg);
 transition: all 0.4s;
}

.cube .bg-right .bg-inner {
 left: 0;
}

.cube .bg-inner {
 background: #28282d;
 position: absolute;
 left: 2px;
 right: 2px;
 top: 2px;
 bottom: 2px;
}

.cube .text {
 position: relative;
 transition: all 0.4s;
}

.cube:hover .bg-inner {
 background: #d4af37;
 transition: all 0.4s;
}

.cube:hover .text {
 color: #28282d;
 transition: all 0.4s;
}

.cube:hover .bg-right,
.cube:hover .bg,
.cube:hover .bg-top {
 background: #28282d;
}

.cube:active {
 z-index: 9999;
 animation: bounce .1s linear;
}

@keyframes bounce {
 50% {
  transform: scale(0.9);
 }
}
</style>


================================================
FILE: Buttons/gagan-gv_soft-dolphin-57.html
================================================
<button>
    <span>Share</span>
    <div class="container">
        <svg height="45" width="45" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
            <path fill="" d="M962.267429 233.179429q-38.253714 56.027429-92.598857 95.451429 0.585143 7.972571 0.585143 23.990857 0 74.313143-21.723429 148.260571t-65.974857 141.970286-105.398857 120.32-147.456 83.456-184.539429 31.158857q-154.843429 0-283.428571-82.870857 19.968 2.267429 44.544 2.267429 128.585143 0 229.156571-78.848-59.977143-1.170286-107.446857-36.864t-65.170286-91.136q18.870857 2.852571 34.889143 2.852571 24.576 0 48.566857-6.290286-64-13.165714-105.984-63.707429t-41.984-117.394286l0-2.267429q38.838857 21.723429 83.456 23.405714-37.741714-25.161143-59.977143-65.682286t-22.308571-87.990857q0-50.322286 25.161143-93.110857 69.12 85.138286 168.301714 136.265143t212.260571 56.832q-4.534857-21.723429-4.534857-42.276571 0-76.580571 53.979429-130.56t130.56-53.979429q80.018286 0 134.875429 58.294857 62.317714-11.995429 117.174857-44.544-21.138286 65.682286-81.115429 101.741714 53.174857-5.705143 106.276571-28.598857z"></path>
        </svg>
        <svg height="45" width="45" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
            <path fill="" d="M123.52064 667.99143l344.526782 229.708899 0-205.136409-190.802457-127.396658zM88.051421 585.717469l110.283674-73.717469-110.283674-73.717469 0 147.434938zM556.025711 897.627196l344.526782-229.708899-153.724325-102.824168-190.802457 127.396658 0 205.136409zM512 615.994287l155.406371-103.994287-155.406371-103.994287-155.406371 103.994287zM277.171833 458.832738l190.802457-127.396658 0-205.136409-344.526782 229.708899zM825.664905 512l110.283674 73.717469 0-147.434938zM746.828167 458.832738l153.724325-102.824168-344.526782-229.708899 0 205.136409zM1023.926868 356.00857l0 311.98286q0 23.402371-19.453221 36.566205l-467.901157 311.98286q-11.993715 7.459506-24.57249 7.459506t-24.57249-7.459506l-467.901157-311.98286q-19.453221-13.163834-19.453221-36.566205l0-311.98286q0-23.402371 19.453221-36.566205l467.901157-311.98286q11.993715-7.459506 24.57249-7.459506t24.57249 7.459506l467.901157 311.98286q19.453221 13.163834 19.453221 36.566205z"></path>
        </svg>
        <svg height="45" width="45" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
            <path fill="" d="M950.930286 512q0 143.433143-83.748571 257.974857t-216.283429 158.573714q-15.433143 2.852571-22.601143-4.022857t-7.168-17.115429l0-120.539429q0-55.442286-29.696-81.115429 32.548571-3.437714 58.587429-10.313143t53.686857-22.308571 46.299429-38.034286 30.281143-59.977143 11.702857-86.016q0-69.12-45.129143-117.686857 21.138286-52.004571-4.534857-116.589714-16.018286-5.12-46.299429 6.290286t-52.589714 25.161143l-21.723429 13.677714q-53.174857-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.689143-22.016-49.152-7.68q-25.161143 64.585143-4.022857 116.589714-45.129143 48.566857-45.129143 117.686857 0 48.566857 11.702857 85.723429t29.988571 59.977143 46.006857 38.253714 53.686857 22.308571 58.587429 10.313143q-22.820571 20.553143-28.013714 58.88-11.995429 5.705143-25.746286 8.557714t-32.548571 2.852571-37.449143-12.288-31.744-35.693714q-10.825143-18.285714-27.721143-29.696t-28.306286-13.677714l-11.410286-1.682286q-11.995429 0-16.603429 2.56t-2.852571 6.582857 5.12 7.972571 7.460571 6.875429l4.022857 2.852571q12.580571 5.705143 24.868571 21.723429t17.993143 29.110857l5.705143 13.165714q7.460571 21.723429 25.161143 35.108571t38.253714 17.115429 39.716571 4.022857 31.744-1.974857l13.165714-2.267429q0 21.723429 0.292571 50.834286t0.292571 30.866286q0 10.313143-7.460571 17.115429t-22.820571 4.022857q-132.534857-44.032-216.283429-158.573714t-83.748571-257.974857q0-119.442286 58.88-220.306286t159.744-159.744 220.306286-58.88 220.306286 58.88 159.744 159.744 58.88 220.306286z"></path>
        </svg>
    </div>
</button>
<style>
/* From Uiverse.io by gagan-gv - Tags: hover, share, social, button */
button {
  height: 4em;
  width: 15em;
  border: none;
  border-radius: 40px;
  background-color: #fff;
}

button span {
  z-index: 1;
  display: inline-block;
  background-color: black;
  height: 3em;
  width: 11.5em;
  border-radius: 25px;
  color: #fff;
  line-height: 55px;
  font-size: 18px;
  letter-spacing: 3px;
  transition: all 0.5s;
}

button .container {
  z-index: -1;
  width: 0;
  position: relative;
  display: flex;
  justify-content: center;
  transform: translateY(-50px);
  transition: all 0.4s;
}

button .container svg {
  padding: 0 10px;
}

button:hover span {
  width: 0;
}

button:hover .container {
  z-index: 2;
  width: 100%;
}
</style>


================================================
FILE: Buttons/gagan-gv_stupid-parrot-100.html
================================================
<button class="button"> Hey, Hover Me
</button>
<style>
/* From Uiverse.io by gagan-gv - Tags: button */
.button {
  padding: 15px 20px;
  font-size: 16px;
  background: transparent;
  border: none;
  position: relative;
  color: #f0f0f0;
  z-index: 1;
}

.button::after,
.button::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -99999;
  transition: all .4s;
}

.button::before {
  transform: translate(0%, 0%);
  width: 100%;
  height: 100%;
  background: #28282d;
  border-radius: 10px;
}

.button::after {
  transform: translate(10px, 10px);
  width: 35px;
  height: 35px;
  background: #ffffff15;
  backdrop-filter: blur(5px);
  border-radius: 50px;
}

.button:hover::before {
  transform: translate(5%, 20%);
  width: 110%;
  height: 110%;
}

.button:hover::after {
  border-radius: 10px;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
}

.button:active::after {
  transition: 0s;
  transform: translate(0, 5%);
}
</style>


================================================
FILE: Buttons/gamerlord295_polite-husky-38.html
================================================
<!-- From Uiverse.io by gamerlord295  - Tags: simple, icon, white, black, button, hover, github, svg -->
<button
  class="cursor-pointer w-fit h-fit invert bg-white p-3 rounded-full scale-50 hover:scale-100 hover:invert-0 hover:p-0 flex transition-all"
>
  <svg height="98" width="98" xmlns="http://www.w3.org/2000/svg">
    <path
      fill="#000"
      d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
      clip-rule="evenodd"
      fill-rule="evenodd"
    ></path>
  </svg>
</button>


    

================================================
FILE: Buttons/garerim_odd-dragonfly-16.html
================================================
<button>Hover me</button>
<style>
/* From Uiverse.io by garerim - Tags: button */
button {
  z-index: 2;
  display: block;
  width: fit-content;
  height: auto;
  outline: none;
  border: none;
  background-color: inherit;
  font-size: 24px;
  font-weight: bold;
  padding: 10px 20px;
  position: relative;
  cursor: pointer;
}

button::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  z-index: 3;
  position: absolute;
  top: 0%;
  left: 0%;
  transform: scaleX(0.2) scaleY(0.5) translate(250%, 100%);
  border-top: solid 2px #333;
  border-left: solid 4px #333;
  transition: all .4s ease-in-out;
}

button::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) scaleX(0.2) scaleY(0.5);
  border-bottom: solid 2px #333;
  border-right: solid 4px #333;
  transition: all .4s ease-in-out;
}

button:hover::before {
  transform: translate(0%, 0%) scaleX(1) scaleY(1);
  border-top: solid 1px #333;
  border-left: solid 1px #333;
}

button:hover::after {
  transform: scaleX(1) scaleY(1) translate(0%, 0%);
  border-bottom: solid 1px #333;
  border-right: solid 1px #333;
}
</style>


================================================
FILE: Buttons/garerim_splendid-snail-23.html
================================================
<button class="btn">Hover me !
    <div class="background"></div>
</button>
<style>
/* From Uiverse.io by garerim - Tags: button */
.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  background-color: inherit;
  border: none;
  outline: none;
  color: #f1f1f1;
}

.btn:hover .background {
  height: inherit;
  width: 120%;
  top: 50%;
}

.btn .background {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 3px;
  width: 100%;
  background-color: #006b92;
  z-index: -1;
  border-radius: 5px;
  transition: all 0.3s;
}
</style>


================================================
FILE: Buttons/gauravsharmadriveit_unlucky-cat-70.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by gauravsharmadriveit - Tags: button, active, animated */
.button {
  font-weight: 600;
  display: inline-block;
  position: relative;
  border: 3px solid #fff;
  padding: 15px 60px;
  font-size: 16px;
}

.button::after, .button::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  transition: .5s;
}

button::after {
  top: -3px;
  left: -3px;
  border-top: 3px solid transparent;
  border-left: 3px solid transparent;
}

button::before {
  bottom: -3px;
  right: -3px;
  border-bottom: 3px solid transparent;
  border-right: 3px solid transparent;
}

button:hover {
  color: #0668C9;
  cursor: pointer;
}

button:hover::after,
button:hover::before {
  width: calc(50% + 3px);
  height: calc(50% + 3px);
  border-color: #0668C9;
}
</style>


================================================
FILE: Buttons/gharsh11032000_ancient-elephant-87.html
================================================
<button class="button">
  <span>Hover me</span>
</button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: button, hover effect, hoverme */
.button {
  text-decoration: none;
  color: white;
  font-weight: 600;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 15px 30px;
  display: block;
  background-color: transparent;
  border: none;
  position: relative;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button span {
  background: linear-gradient(-45deg, #63A4FF 0%, #83EAF1 100% );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.button:hover span {
  -webkit-text-fill-color: white;
}

.button::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(2);
  border: 3px solid;
  border-image: linear-gradient(-45deg, #63A4FF 0%, #83EAF1 100% );
  border-image-slice: 1;
  border-width: 2px 0 2px 0;
  opacity: 0;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  z-index: -1;
}

.button:hover::before {
  transform: scaleY(0);
  opacity: 1;
}

.button::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #63A4FF 0%, #83EAF1 100% );
  transform: scale(0);
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  z-index: -1;
}

.button:hover::after {
  transform: scaleY(1);
}

.button:active {
  scale: 0.90;
}


</style>


================================================
FILE: Buttons/gharsh11032000_average-falcon-37.html
================================================
<button class="button">
  <span class="span">🔎</span>
</button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: button, search, hover effect */
.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8e8e8;
  background-color: #212121;
  width: 70px;
  height: 70px;
  font-size: 24px;
  text-transform: uppercase;
  border: 2px solid #212121;
  border-radius: 50%;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.15),
    2px 2px 2px rgba(0, 0, 0, 0.1),
    -3px -3px 2px rgba(255, 255, 255, 0.05),
    -2px -2px 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  cursor: pointer;
}

.button .span {
  position: relative;
  z-index: 2;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button::before {
  content: "";
  position: absolute;
  background-color: #e8e8e8;
  width: 150%;
  height: 150%;
  left: 0%;
  bottom: 0%;
  transform: translate(-100%, 100%) rotate(45deg);
  border-radius: 15px;
}

.button:hover::before {
  animation: shakeBack 0.6s forwards 0.6s;
}

.button:hover .span {
  scale: 1.2;
}

.button:hover {
  box-shadow: none;
}

.button:active {
  scale: 0.95;
}

@keyframes shakeBack {
  0% {
    transform: translate(-100%, 100%) rotate(45deg);
  }

  50% {
    transform: translate(15%, -15%) rotate(45deg);
  }

  100% {
    transform: translate(-10%, 10%) rotate(45deg);
  }
}

</style>


================================================
FILE: Buttons/gharsh11032000_bad-dragon-47.html
================================================
<button class="button">
  <span>Hover me</span>
</button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: button, hover effect */
.button {
  position: relative;
  padding: 15px 30px;
  font-family: inherit;
  background-color: var(--color-primary);
  border: 2px solid;
  font-size: 20px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.button:hover span {
  background: linear-gradient(135deg, #aefb2a 0%, #57ebde 100% );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.button::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: -110%;
  top: -0%;
  background: #aefb2a;
  pointer-events: none;
  margin: auto;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover {
  letter-spacing: 2px;
  border-image: linear-gradient(135deg, #aefb2a 0%, #57ebde 100% );
  border-image-slice: 1;
}

.button:hover::before {
  left: 110%;
}

.button:active {
  scale: 0.95;
}
</style>


================================================
FILE: Buttons/gharsh11032000_black-dodo-44.html
================================================
<button class="button">
  Vite Button
</button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: button, border, hover effect */
.button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  color: white;
  transition: border-color 0.25s;
}

.button:hover {
  border-color: #646cff;
}

.button:focus,
.button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}



</style>


================================================
FILE: Buttons/gharsh11032000_bright-warthog-8.html
================================================
<button class="button">
  Hover me
</button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: button */
.button {
  position: relative;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  background-color: #e8e8e8;
  padding: 15px 30px;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.button:before {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 20%;
  background-color: #e8e8e8;
  translate: -100% 0;
  rotate: 45deg;
  transition: all 0.4s ease;
}

.button:hover {
  color: #e8e8e8;
  background-color: #8364e8;
  box-shadow: 0 0 24px 8px rgba(131, 100, 232, 0.4);
}

.button:hover:before {
  translate: 100%;
}

.button:active {
  scale: 0.95;
  box-shadow: 0 0 16px 4px rgba(131, 100, 232, 0.4);
}

</style>


================================================
FILE: Buttons/gharsh11032000_cuddly-squid-93.html
================================================
<button class="button">
  <span>Not allowed!
</span>
<span>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-miterlimit="2" stroke-linejoin="round" fill-rule="evenodd" clip-rule="evenodd"><path fill-rule="nonzero" d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 1.5c-4.69 0-8.497 3.807-8.497 8.497s3.807 8.498 8.497 8.498 8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497zm0 7.425 2.717-2.718c.146-.146.339-.219.531-.219.404 0 .75.325.75.75 0 .193-.073.384-.219.531l-2.717 2.717 2.727 2.728c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.384-.073-.53-.219l-2.729-2.728-2.728 2.728c-.146.146-.338.219-.53.219-.401 0-.751-.323-.751-.75 0-.192.073-.384.22-.531l2.728-2.728-2.722-2.722c-.146-.147-.219-.338-.219-.531 0-.425.346-.749.75-.749.192 0 .385.073.531.219z"></path></svg>
</span>
</button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: red, button, hover, shake */
.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 15px 20px;
  background-color: #212121;
  border: none;
  font: inherit;
  color: #e8e8e8;
  font-size: 20px;
  font-weight: 600;
  border-radius: 50px;
  cursor: not-allowed;
  overflow: hidden;
  transition: all 0.3s ease cubic-bezier(0.23, 1, 0.320, 1);
}

.button span {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

.button::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  translate: 0 105%;
  background-color: #F53844;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.button svg {
  width: 32px;
  height: 32px;
  fill: #F53844;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover {
  animation: shake 0.2s linear 1;
}

.button:hover::before {
  translate: 0 0;
}

.button:hover svg {
  fill: #e8e8e8;
}

@keyframes shake {
  0% {
    rotate: 0deg;
  }

  33% {
    rotate: 10deg;
  }

  66% {
    rotate: -10deg;
  }

  100% {
    rotate: 10deg;
  }
}

</style>


================================================
FILE: Buttons/gharsh11032000_cuddly-turkey-5.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: gradient, button, dark, hover effect */
.button {
  position: relative;
  width: 120px;
  height: 40px;
  background-color: #000;
  display: flex;
  align-items: center;
  color: white;
  flex-direction: column;
  justify-content: center;
  border: none;
  padding: 12px;
  gap: 12px;
  border-radius: 8px;
  cursor: pointer;
}

.button::before {
  content: '';
  position: absolute;
  inset: 0;
  left: -4px;
  top: -1px;
  margin: auto;
  width: 128px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );
  z-index: -10;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button::after {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

.button:hover::after {
  filter: blur(30px);
}

.button:hover::before {
  transform: rotate(-180deg);
}

.button:active::before {
  scale: 0.7;
}


</style>


================================================
FILE: Buttons/gharsh11032000_foolish-sloth-90.html
================================================
<button class="button">
  Subscribe
</button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: button, hover effect, cool btn */
.button {
  cursor: pointer;
  position: relative;
  padding: 10px 24px;
  font-size: 18px;
  color: rgb(193, 163, 98);
  border: 2px solid rgb(193, 163, 98);
  border-radius: 34px;
  background-color: transparent;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
  overflow: hidden;
}

.button::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: inherit;
  scale: 0;
  z-index: -1;
  background-color: rgb(193, 163, 98);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover::before {
  scale: 3;
}

.button:hover {
  color: #212121;
  scale: 1.1;
  box-shadow: 0 0px 20px rgba(193, 163, 98,0.4);
}

.button:active {
  scale: 1;
}



</style>


================================================
FILE: Buttons/gharsh11032000_friendly-turkey-54.html
================================================
<button class="button"></button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: gradient, button */
.button {
  position: relative;
  background-color: transparent;
  color: #e8e8e8;
  font-size: 17px;
  font-weight: 600;
  border-radius: 10px;
  width: 150px;
  height: 60px;
  border: none;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(51, 51, 51, 0.2);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.button::before {
  content: "Hello!";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(135deg,#7b4397,#dc2430 );
  transform: translate(0%,90%);
  z-index: 99;
  position: relative;
  transform-origin: bottom;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button::after {
  content: "Hover me";
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: top;
  transform: translate(0%,-100%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover::before {
  transform: translate(0%,0%);
}

.button:hover::after {
  transform: translate(0%,-200%);
}

.button:focus {
  outline: none;
}

.button:active {
  scale: 0.95;
}



</style>


================================================
FILE: Buttons/gharsh11032000_hot-grasshopper-70.html
================================================
<button class="button">
  <span>
    <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M9.145 18.29c-5.042 0-9.145-4.102-9.145-9.145s4.103-9.145 9.145-9.145 9.145 4.103 9.145 9.145-4.102 9.145-9.145 9.145zm0-15.167c-3.321 0-6.022 2.702-6.022 6.022s2.702 6.022 6.022 6.022 6.023-2.702 6.023-6.022-2.702-6.022-6.023-6.022zm9.263 12.443c-.817 1.176-1.852 2.188-3.046 2.981l5.452 5.453 3.014-3.013-5.42-5.421z"></path></svg>
  </span>
</button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: button, search, hover effect */
.button {
  position: relative;
  border: none;
  background-color: white;
  color: #212121;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  gap: 10px;
  border-radius: 10px;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  overflow: hidden;
}

.button span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.button::before {
  content: "";
  position: absolute;
  background-color: palevioletred;
  width: 100%;
  height: 100%;
  left: 0%;
  bottom: 0%;
  transform: translate(-100%, 100%);
  border-radius: inherit;
}

.button svg {
  fill: palevioletred;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover::before {
  animation: shakeBack 0.6s forwards;
}

.button:hover svg {
  fill: white;
  scale: 1.3;
}

.button:active {
  box-shadow: none;
}

@keyframes shakeBack {
  0% {
    transform: translate(-100%, 100%);
  }

  50% {
    transform: translate(20%, -20%);
  }

  100% {
    transform: translate(0%, 0%);
  }
}

</style>


================================================
FILE: Buttons/gharsh11032000_loud-chicken-53.html
================================================
<button class="animated-button">
  <svg viewBox="0 0 24 24" class="arr-2" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"
    ></path>
  </svg>
  <span class="text">Modern Button</span>
  <span class="circle"></span>
  <svg viewBox="0 0 24 24" class="arr-1" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"
    ></path>
  </svg>
</button>

<style>
/* From Uiverse.io by gharsh11032000  - Tags: button, hover, active, animated, arrow, hover effect, click animation, pill */
.animated-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 36px;
  border: 4px solid;
  border-color: transparent;
  font-size: 16px;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 600;
  color: greenyellow;
  box-shadow: 0 0 0 2px greenyellow;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button svg {
  position: absolute;
  width: 24px;
  fill: greenyellow;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
  right: 16px;
}

.animated-button .arr-2 {
  left: -25%;
}

.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: greenyellow;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #212121;
  border-radius: 12px;
}

.animated-button:hover .arr-1 {
  right: -25%;
}

.animated-button:hover .arr-2 {
  left: 16px;
}

.animated-button:hover .text {
  transform: translateX(12px);
}

.animated-button:hover svg {
  fill: #212121;
}

.animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px greenyellow;
}

.animated-button:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}

</style>
    

================================================
FILE: Buttons/gharsh11032000_loud-puma-8.html
================================================
<div class="menu">
  <div class="item">
    <a href="#" class="link">
      <span> Our Services </span>
      <svg viewBox="0 0 360 360" xml:space="preserve">
        <g id="SVGRepo_iconCarrier">
          <path
            id="XMLID_225_"
            d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393 c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393 s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"
          ></path>
        </g>
      </svg>
    </a>
    <div class="submenu">
      <div class="submenu-item">
        <a href="#" class="submenu-link"> Development </a>
      </div>
      <div class="submenu-item">
        <a href="#" class="submenu-link"> Design </a>
      </div>
      <div class="submenu-item">
        <a href="#" class="submenu-link"> Marketing </a>
      </div>
      <div class="submenu-item">
        <a href="#" class="submenu-link"> SEO </a>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by gharsh11032000  - Tags: animation, button, hover, menu, hover effect, css effect, hover button, button hover effect  */
.menu {
  font-size: 16px;
  line-height: 1.6;
  color: #000000;
  width: fit-content;
  display: flex;
  list-style: none;
}

.menu a {
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.menu .link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 36px;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu .link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0a3cff;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu .link svg {
  width: 14px;
  height: 14px;
  fill: #000000;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu .item {
  position: relative;
}

.menu .item .submenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 100%;
  border-radius: 0 0 16px 16px;
  left: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid #cccccc;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 1;
  pointer-events: none;
  list-style: none;
}

.menu .item:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  border-top: transparent;
  border-color: #0a3cff;
}

.menu .item:hover .link {
  color: #ffffff;
  border-radius: 16px 16px 0 0;
}

.menu .item:hover .link::after {
  transform: scaleX(1);
  transform-origin: right;
}

.menu .item:hover .link svg {
  fill: #ffffff;
  transform: rotate(-180deg);
}

.submenu .submenu-item {
  width: 100%;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.submenu .submenu-link {
  display: block;
  padding: 12px 24px;
  width: 100%;
  position: relative;
  text-align: center;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.submenu .submenu-item:last-child .submenu-link {
  border-bottom: none;
}

.submenu .submenu-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  width: 100%;
  height: 100%;
  background-color: #0a3cff;
  z-index: -1;
  transform-origin: left;
  transition: transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.submenu .submenu-link:hover:before {
  transform: scaleX(1);
  transform-origin: right;
}

.submenu .submenu-link:hover {
  color: #ffffff;
}

</style>
    

================================================
FILE: Buttons/gharsh11032000_massive-gecko-17.html
================================================
<button class="animated-button">
  <span>Hover me</span>
</button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: button, hover effect */
.animated-button {
  position: relative;
  display: inline-block;
  padding: 16px 32px;
  border: none;
  background-color: #2196F3;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
}

.animated-button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background-color: #fff;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
}

.animated-button span {
  position: relative;
  z-index: 1;
}

.animated-button:hover {
  color: #2196F3;
  background-color: #fff;
  box-shadow: 0 0 20px hsla(263, 77%, 31%, 0);
}

.animated-button:active {
  scale: 0.9;
}

.animated-button:hover:before {
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 1;
}





</style>


================================================
FILE: Buttons/gharsh11032000_massive-yak-100.html
================================================
<button class="button">
  <span class="span">About us</span>
  <span class="span">Hello!</span>
</button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: gradient, button, hover effect */
.button {
  position: relative;
  border: none;
  color: #e8e8e8;
  background: #333333;
  font-weight: 600;
  font-size: 20px;
  text-transform: uppercase;
  height: 60px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0, 0, 0,0.2);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
  overflow: hidden;
}

.button .span {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  transition-delay: 0.6s;
}

.button:hover .span:nth-child(1) {
  transform: translateY(-100%);
  transition-delay: 0s;
}

.button:hover .span:nth-child(2) {
  transform: translateY(-100%);
  transition-delay: 0s;
}

.button:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
  transform: scaleX(0);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  transition-delay: 0;
  transform-origin: left;
}

.button:hover::before {
  transform: scaleX(1);
  transition-delay: 0.6s;
}

.button:active {
  box-shadow: none;
}



        
</style>


================================================
FILE: Buttons/gharsh11032000_neat-bullfrog-61.html
================================================
<button class="animated-button">
  <span>Hover me</span>
  <span></span>
</button>

<style>
/* From Uiverse.io by gharsh11032000 - Tags: button, hover effect */
.animated-button {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  border: none;
  font-size: 16px;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 600;
  color: #ffffff40;
  box-shadow: 0 0 0 2px #ffffff20;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.animated-button span:last-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #2196F3;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
}

.animated-button span:first-child {
  position: relative;
  z-index: 1;
}

.animated-button:hover {
  box-shadow: 0 0 0 5px #2195f360;
  color: #ffffff;
}

.animated-button:active {
  scale: 0.95;
}

.animated-button:hover span:last-child {
  width: 150px;
  height: 150px;
  opacity: 1;
}



</style>


================================================
FILE: Buttons/gharsh11032000_neat-treefrog-57.html
================================================
<button class="button">
  <span>Contact</span>
</button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: gradient, button, hover effect */
.button {
  position: relative;
  text-decoration: none;
  color: #e8e8e8;
  padding: 15px 30px;
  width: 170px;
  height: 60px;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  border: none;
  overflow: hidden;
  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
  transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.button span , .button span::before {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.button span::before {
  content: 'Hello!';
  top: -100%;
}

.button:before {
  top: 0;
  left: 0;
  border-top: 2px solid #e8e8e8;
  border-left: 2px solid #e8e8e8;
}

.button:after {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #e8e8e8;
  border-right: 2px solid #e8e8e8;
}

.button:after,
.button:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.button:hover {
  box-shadow: 0 0 30px rgba(248 ,155, 41,0.4),
  0 0 30px rgba(255, 15, 123,0.4);
  ;
}

.button:hover:before,
.button:hover:after {
  width: 100%;
  height: 100%;
}

.button:hover span {
  top: 100%;
}

.button:active {
  scale: 0.95;
  box-shadow: 0 0 10px rgba(248 ,155, 41,0.4),
  0 0 10px rgba(255, 15, 123,0.4);
  ;
}


</style>


================================================
FILE: Buttons/gharsh11032000_orange-hound-27.html
================================================
<button class="button">
  Hover me
</button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: button, shadow, hover effect */
.button {
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 600;
  border: 2px solid #414141;
  color: white;
  background-color: transparent;
  cursor: pointer;
  border-radius: 10px;
  text-transform: uppercase;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover {
  border-color: #0974f1;
  box-shadow: 0 0 20px rgba(9, 117, 241, 0.8);
}

.button:active {
  box-shadow: 0 0 10px rgba(9, 117, 241, 0.4);
}
</style>


================================================
FILE: Buttons/gharsh11032000_pink-elephant-19.html
================================================
<button class="btn">
  <span>Modern Button</span>
</button>

<style>
/* From Uiverse.io by gharsh11032000  - Tags: animation, button, animated, hover effect, simple button, hover button, button hover effect  */
.btn {
  position: relative;
  transition: color 0.48s 0s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  padding: 12px 24px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  border: none;
  cursor: pointer;
  color: #000000;
  overflow: hidden;
  text-decoration: none;
  background-color: transparent;
}

.btn span {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6;
}

.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0%;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 100%;
  background: #0a3cff;
  transition: transform 0.48s 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    width 0.48s 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn:hover {
  color: #ffffff;
  transition: color 0.48s 0.24s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.48s 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn:hover::before {
  transform: translateY(-50%) scaleY(1);
  width: 100%;
  transition: transform 0.48s 0.1s cubic-bezier(0.23, 1, 0.32, 1),
    width 0.48s 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn:active {
  transform: scale(0.95);
}

</style>
    

================================================
FILE: Buttons/gharsh11032000_splendid-badger-80.html
================================================
<button class="button"></button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: button */
.button {
  position: relative;
  background-color: #333;
  color: #e8e8e8;
  font-size: 17px;
  font-weight: 600;
  width: 150px;
  height: 60px;
  border-radius: 50em;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(51, 51, 51, 0.2);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.button::before {
  content: "Hello!";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 50em;
  background: linear-gradient(135deg,#7b4397,#dc2430 );
  transform: translate(-100%, 0%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button::after {
  content: "Hover me";
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 50em;
  transform: translate(0%,-100%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover::before {
  transform: translate(0%, 0%);
}

.button:hover::after {
  transform: translate(100%,-100%);
}

.button:focus {
  outline: none;
}

.button:active {
  scale: 0.95;
}



</style>


================================================
FILE: Buttons/gharsh11032000_weak-fox-87.html
================================================
<button class="button">
  <span>Hover!</span>
</button>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: button, hover effect */
.button {
  position: relative;
  font-size: 24px;
  font-weight: 600;
  padding: 15px 30px;
  color: #cfef00;
  background-color: transparent;
  border: 2px solid #cfef00;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  overflow: hidden;
}

.button::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #cfef00;
  top: 0%;
  left: -100%;
  scale: 1;
  border-radius: inherit;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button span {
  transition: all 0.7s;
  position: relative;
  overflow: hidden;
}

.button span::before {
  position: absolute;
  content: 'Hover!';
  top: 0;
  left: 0;
  color: #212121;
  width: 0;
  overflow: hidden;
}

.button:hover span::before {
  width: 100%;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  transition-delay: 0.4s;
}

.button:hover::before {
  scale: 1;
  top: 0%;
  left: 0%;
}

.button:hover {
  border-color: transparent;
}

.button:active {
  scale: 0.9;
}

</style>


================================================
FILE: Buttons/gksckt_moody-dragonfly-90.html
================================================

  <button class="btn">Hover Me</button>
<style>
/* From Uiverse.io by gksckt - Tags: button */
.main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  width: 170px;
  height: 60px;
  font-size: 18px;
  background: #fff;
  border: none;
  border-radius: 50px;
  color: #000;
  outline: none;
  cursor: pointer;
  transition: all 0.4s;
}

.btn:hover {
  box-shadow: inset 0 0 0 4px #ef476f, 
              inset 0 0 0 8px #ffd166, 
              inset 0 0 0 12px #06d6a0,
              inset 0 0 0 16px #118ab2;
  background: #073b4c;
  color: #fff;
}
</style>


================================================
FILE: Buttons/gksckt_young-eagle-60.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by gksckt - Tags: button */
button {
 background-color: #444141;
 border-radius: 4px;
 color: #fff;
 cursor: pointer;
 padding: 15px 30px;
 font-size: 18px;
 font-weight: bold;
 letter-spacing: 1px;
 border: none;
}

button:hover {
 background-image: linear-gradient(90deg, #53cbef 0%, #dcc66c 50%, #ffa3b6 75%, #53cbef 100%);
 animation: slidernbw 5s linear infinite;
 color: #000;
}

@keyframes slidernbw {
 to {
  background-position: 20vw;
 }
}
</style>


================================================
FILE: Buttons/glisovic01_purple-shrimp-29.html
================================================
<button class="btn">
  submit
</button>
<style>
/* From Uiverse.io by glisovic01 - Tags: button */
.btn {
  display: inline-block;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  margin: 1rem auto;
  padding: 0.7rem 2rem;
  border-radius: 30em;
  border-style: none;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  background-color: transparent;
  box-shadow: 1px 1px 12px #000000;
}

.btn::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  transform: translateX(-101%);
  transition: all .3s ease;
  z-index: -1;
}

.btn:hover {
  color: #272727;
  transition: all .3s ease;
}

.btn:hover::before {
  transform: translateX(0);
}
</style>


================================================
FILE: Buttons/guilhermeyohan_pretty-liger-37.html
================================================
<button class="container moon-container">
  <div class="moon">
    <div class="mancha2"></div>
    </div>
		 <div class="moon-text">To the Moon</div>
</button>

<style>
/* From Uiverse.io by guilhermeyohan - Tags: button */
.moon-container {
  width: 170px;
  height: 50px;
  background: linear-gradient(0, #120c56, #000000);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px;
  border-radius: 20px;
  border-color: transparent;
}

.moon-container:hover {
  transform: scale(1.2);
  border-radius: 62px;
  box-shadow: 1px 0px 100px #ece1bd60;
  transition: all 1.4s;
}

.moon-text {
  position: relative;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
}

.moon {
  position: relative;
  border-color: transparent;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background-color: #F0EAD6;
  box-shadow: 0px 0px 10px #F0EAD6;
}

.moon::before {
  content: "";
  display: block;
  position: absolute;
  top: 22%;
  left: 45%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.4;
}

.moon::after {
  content: "";
  position: absolute;
  top: 67%;
  left: 30%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.3;
}

.mancha2 {
  content: "";
  width: 10px;
  height: 10px;
  background-color: rgba(51, 51, 51, 0.583);
  border-radius: 50%;
  position: absolute;
  top: 47%;
  left: 75%;
  transform: translate(-50%, -50%);
}

.moon:hover {
  box-shadow: 0px 0px 100px #F0EAD6;
  transition: all 1.4s;
}

.moon:active {
  transform: scale(1.5);
  transition: all 1.4s;
}

</style>


================================================
FILE: Buttons/guilhermeyohan_wet-pug-5.html
================================================
<button class="beach-button">
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 1L2 21h20z" fill="#fff"></path>
    <path d="M12 16.6l-4-4.2 1.4-1.4L12 13l6.6-6.6L18 9z" fill="#1565c0"></path>
    <path d="M12 18h-.3c-3.8-.3-7-3.5-7.3-7.3H1.9c.4 4.5 4.2 8.2 8.8 8.7V22c1.6 0 3-1.3 3-3s-1.3-3-3-3z" fill="#00838f"></path>
    <path d="M12 18c-.6 0-1.1-.1-1.6-.2-1.2-.4-2.2-1.4-2.6-2.6-.1-.5-.2-1-.2-1.6 0-.9.2-1.8.7-2.5l4.4 4.4-1.4 1.4-3-3v-4.2c.7-.4 1.6-.7 2.5-.7.6 0 1.1.1 1.6.2 1.2.4 2.2 1.4 2.6 2.6.1.5.2 1 .2 1.6 0 .9-.2 1.8-.7 2.5l-4.4-4.4 1.4-1.4 3 3v4.2c-.7.4-1.6.7-2.5.7z" fill="#00acc1"></path>
  </svg>
  <span>Download</span>
</button>
<style>
/* From Uiverse.io by guilhermeyohan - Tags: button */
.beach-button {
  background-color: #fbc02d;
  border: none;
  border-radius: 5px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.beach-button:hover {
  background-color: #ffe082;
}

.beach-button svg {
  height: 20px;
  margin-right: 10px;
  width: 20px;
}
</style>


================================================
FILE: Buttons/gustavofusco_lazy-starfish-84.html
================================================
<div class="container">
  <button class="button">
    <div class="button__line"></div>
    <div class="button__line"></div>
    <span class="button__text">Hover Me</span>
    <div class="button__drow1"></div>
    <div class="button__drow2"></div>
  </button>  
</div>
<style>
/* From Uiverse.io by gustavofusco - Tags: button */
.button {
  position: relative;
  z-index: 0;
  width: 240px;
  height: 56px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  color: #00135C;
  letter-spacing: 2px;
  transition: all .3s ease;
  border: none;
  background: transparent;
}

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

.button::before,
.button::after,
.button__text::before,
.button__text::before {
  content: '';
  position: absolute;
  height: 3px;
  border-radius: 2px;
  background: #00135C;
  transition: all .5s ease;
}

.button::before {
  top: 0;
  left: 54px;
  width: calc(100% - 56px * 2 - 16px);
}

.button::after {
  top: 0;
  right: 54px;
  width: 8px;
}

.button__text::before {
  bottom: 0;
  right: 54px;
  width: calc(100% - 56px * 2 - 16px);
}

.button__text::after {
  top: 0;
  right: 54px;
  width: 8px;
}

.button__line {
  position: absolute;
  top: 0;
  width: 56px;
  height: 100%;
  overflow: hidden;
}

.button__line::before {
  content: '';
  position: absolute;
  top: 0;
  width: 150%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 300px;
  border: #00135C;
}

.button__line:nth-child(1),
.button__line:nth-child(1)::before {
  left: 0;
}

.button__line:nth-child(2),
.button__line:nth-child(2)::before {
  right: 0;
}

.button:hover {
  letter-spacing: 6px;
}

.button:hover::before,
.button:hover .button__text::before {
  width: 8px;
}

.button:hover::after,
.button:hover .button__text::after {
  width: calc(100% - 56px * 2 - 16px);
}

.button__drow1,
.button__drow2 {
  position: absolute;
  z-index: -1;
  border: 1rem;
  transform-origin: 1rem 1rem;
}

.button__drow1 {
  top: -1rem;
  left: 40px;
  width: 2rem;
  height: 0;
  transform: rotate(30deg);
}

.button__drow2 {
  top: 44px;
  left: 77px;
  width: 2rem;
  height: 0;
  transform: rotate(-127deg);
}

.button__drow1::before,
.button__drow1::after,
.button__drow2::before,
.button__drow2::after {
  content: '';
  position: absolute;
}

.button__drow1::before {
  bottom: 0;
  left: 0;
  width: 0;
  height: 2rem;
  border-radius: 1rem;
  transform-origin: 1rem 1rem;
  transform: rotate(-60deg);
}

.button__drow1::after {
  top: -10px;
  left: 45px;
  width: 0;
  height: 2rem;
  border-radius: 1rem;
  transform-origin: 1rem 1rem;
  transform: rotate(-69deg);
}

.button__drow2::before {
  bottom: 0;
  left: 0;
  width: 0;
  height: 2rem;
  border-radius: 1rem;
  transform-origin: 1rem 1rem;
  transform: rotate(-146deg);
}

.button__drow1::after {
  bottom: 26px;
  left: -40px;
  width: 0;
  height: 2rem;
  border-radius: 1rem;
  transform-origin: 1rem 1rem;
  transform: rotate(-262deg);
}

.button__drow1,
.button__drow1::before,
.button__drow1::after,
.button__drow2,
.button__drow2::before,
.button__drow2::after {
  background: dodgerblue;
}

.button:hover .button__drow1 {
  animation: drow1 ease-in .06s;
  animation-fill-mode: forwards;
}

.button:hover .button__drow1::before {
  animation: drow2 linear .08s .06s;
  animation-fill-mode: forwards;
}

.button:hover .button__drow1::after {
  animation: drow3 linear .03s .14s;
  animation-fill-mode: forwards;
}

.button:hover .button__drow2 {
  animation: drow4 linear .06s .2s;
  animation-fill-mode: forwards;
}

.button:hover .button__drow2::before {
  animation: drow3 linear .03s .26s;
  animation-fill-mode: forwards;
}

.button:hover .button__drow2::after {
  animation: drow5 linear .06s .32s;
  animation-fill-mode: forwards;
}

@keyframes drow1 {
  0% {
    height: 0;
  }

  100% {
    height: 100px;
  }
}

@keyframes drow2 {
  0% {
    width: 0;
    opacity: 0;
  }

  10% {
    opacity: 0;
  }

  11% {
    opacity: 1;
  }

  100% {
    height: 120px;
  }
}

@keyframes drow3 {
  0% {
    height: 0;
  }

  100% {
    height: 80px;
  }
}

@keyframes drow4 {
  0% {
    height: 0;
  }

  100% {
    height: 120px;
  }
}

@keyframes drow5 {
  0% {
    height: 0;
  }

  100% {
    height: 124px;
  }
}

.container {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}




</style>


================================================
FILE: Buttons/hakemdamer222_funny-ape-73.html
================================================
<button>
  Click Me
</button>
<style>
/* From Uiverse.io by hakemdamer222 - Tags: simple, purple, button */
button, button:focus {
  font-size: 17px;
  padding: 10px 25px;
  border-radius: 0.7rem;
  background-image: linear-gradient(rgb(214, 202, 254), rgb(158, 129, 254));
  border: 2px solid rgb(50, 50, 50);
  border-bottom: 5px solid rgb(50, 50, 50);
  box-shadow: 0px 1px 6px 0px rgb(158, 129, 254);
  transform: translate(0, -3px);
  transition: 0.2s;
  transition-timing-function: linear;
}

button:active {
  transform: translate(0, 0);
  border-bottom: 2px solid rgb(50, 50, 50);
}
</style>


================================================
FILE: Buttons/hamoode-taha-04_red-cobra-61.html
================================================
<button class="ui-btn">Delete</button>

<style>
/* From Uiverse.io by hamoode-taha-04  - Tags: flashy, red, button, glow, delete, click, box-shadow, buttons */
.ui-btn {
  cursor: pointer;
  border-radius: 5px;
  color: rgb(219, 218, 218);
  border-style: solid;
  background-color: transparent;
  border-color: rgb(219, 218, 218);
  width: 120px;
  height: 40px;
  transition: 0.2s ease;
  text-transform: uppercase;
  border-width: 2px;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 2px;
}
.ui-btn:hover {
  color: rgb(247, 247, 247);
  background-color: rgb(202, 25, 25);
  border-color: rgb(202, 25, 25);
  text-shadow: 0 0 50px white, 0 0 20px white, 0 0 15px white;
  box-shadow: 0 0 50px rgb(202, 25, 25), 0 0 30px rgb(202, 25, 25),
    0 0 60px rgb(202, 25, 25), 0 0 120px rgb(202, 25, 25);
  font-size: 20px;
  width: 130px;
  height: 50px;
  letter-spacing: 3px;
}
.ui-btn:active {
  width: 115px;
  height: 38px;
  letter-spacing: 0px;
}

</style>
    

================================================
FILE: Buttons/hannahyockel_wicked-bobcat-71.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by hannahyockel - Tags: button */
button {
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 padding: 15px 38px;
 border-radius: 16px;
 border: 1px solid transparent;
 color: #FFFFFF;
 background-color: #1DC9A0;
 font-size: 16px;
 letter-spacing: 1px;
 transition: all 0.15s linear;
}

button:hover {
 background-color: rgba(29, 201, 160, 0.08);
 border-color: #1DC9A0;
 color: #1DC9A0;
 transform: translateY(-5px) scale(1.05);
}

button:active {
 background-color: transparent;
 border-color: #1DC9A0;
 color: #1DC9A0;
 transform: translateY(5px) scale(0.95);
}

button:disabled {
 background-color: rgba(255, 255, 255, 0.16);
 color: #8E8E93;
 border-color: #8E8E93;
}
</style>


================================================
FILE: Buttons/hannahyockel_young-termite-87.html
================================================
<button class="tooltip">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" height="25" width="25">
    <path fill="#6361D9" d="M8.78842 5.03866C8.86656 4.96052 8.97254 4.91663 9.08305 4.91663H11.4164C11.5269 4.91663 11.6329 4.96052 11.711 5.03866C11.7892 5.11681 11.833 5.22279 11.833 5.33329V5.74939H8.66638V5.33329C8.66638 5.22279 8.71028 5.11681 8.78842 5.03866ZM7.16638 5.74939V5.33329C7.16638 4.82496 7.36832 4.33745 7.72776 3.978C8.08721 3.61856 8.57472 3.41663 9.08305 3.41663H11.4164C11.9247 3.41663 12.4122 3.61856 12.7717 3.978C13.1311 4.33745 13.333 4.82496 13.333 5.33329V5.74939H15.5C15.9142 5.74939 16.25 6.08518 16.25 6.49939C16.25 6.9136 15.9142 7.24939 15.5 7.24939H15.0105L14.2492 14.7095C14.2382 15.2023 14.0377 15.6726 13.6883 16.0219C13.3289 16.3814 12.8414 16.5833 12.333 16.5833H8.16638C7.65805 16.5833 7.17054 16.3814 6.81109 16.0219C6.46176 15.6726 6.2612 15.2023 6.25019 14.7095L5.48896 7.24939H5C4.58579 7.24939 4.25 6.9136 4.25 6.49939C4.25 6.08518 4.58579 5.74939 5 5.74939H6.16667H7.16638ZM7.91638 7.24996H12.583H13.5026L12.7536 14.5905C12.751 14.6158 12.7497 14.6412 12.7497 14.6666C12.7497 14.7771 12.7058 14.8831 12.6277 14.9613C12.5495 15.0394 12.4436 15.0833 12.333 15.0833H8.16638C8.05588 15.0833 7.94989 15.0394 7.87175 14.9613C7.79361 14.8831 7.74972 14.7771 7.74972 14.6666C7.74972 14.6412 7.74842 14.6158 7.74584 14.5905L6.99681 7.24996H7.91638Z" clip-rule="evenodd" fill-rule="evenodd"></path>
  </svg>
  <span class="tooltiptext">remove</span>
</button>
<style>
/* From Uiverse.io by hannahyockel - Tags: button, remove, trash */
button {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 1em;
 border: 0px solid transparent;
 background-color: rgba(100,77,237,0.08);
 border-radius: 1.25em;
 transition: all 0.2s linear;
}

button:hover {
 box-shadow: 3.4px 2.5px 4.9px rgba(0, 0, 0, 0.025),
  8.6px 6.3px 12.4px rgba(0, 0, 0, 0.035),
  17.5px 12.8px 25.3px rgba(0, 0, 0, 0.045),
  36.1px 26.3px 52.2px rgba(0, 0, 0, 0.055),
  99px 72px 143px rgba(0, 0, 0, 0.08);
}

.tooltip {
 position: relative;
 display: inline-block;
}

.tooltip .tooltiptext {
 visibility: hidden;
 width: 4em;
 background-color: rgba(0, 0, 0, 0.253);
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: absolute;
 z-index: 1;
 top: 25%;
 left: 110%;
}

.tooltip .tooltiptext::after {
 content: "";
 position: absolute;
 top: 50%;
 right: 100%;
 margin-top: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: transparent rgba(0, 0, 0, 0.253) transparent transparent;
}

.tooltip:hover .tooltiptext {
 visibility: visible;
}
</style>


================================================
FILE: Buttons/himanshu9682_wise-shrimp-26.html
================================================
<div class="container">
  <a href="#" class="button type--C">
    <div class="button__line"></div>
    <div class="button__line"></div>
    <span class="button__text">ENTRY</span>
    <div class="button__drow1"></div>
    <div class="button__drow2"></div>
  </a>
</div>

<style>
/* From Uiverse.io by himanshu9682  - Tags: button */
.type--A {
  --line_color: #555555;
  --back_color: #ffecf6;
}
.type--B {
  --line_color: #1b1919;
  --back_color: #e9ecff;
}
.type--C {
  --line_color: #00135c;
  --back_color: #defffa;
}
.button {
  position: relative;
  z-index: 0;
  width: 240px;
  height: 56px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  color: var(--line_color);
  letter-spacing: 2px;
  transition: all 0.3s ease;
}
.button__text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.button::before,
.button::after,
.button__text::before,
.button__text::after {
  content: "";
  position: absolute;
  height: 3px;
  border-radius: 2px;
  background: var(--line_color);
  transition: all 0.5s ease;
}
.button::before {
  top: 0;
  left: 54px;
  width: calc(100% - 56px * 2 - 16px);
}
.button::after {
  top: 0;
  right: 54px;
  width: 8px;
}
.button__text::before {
  bottom: 0;
  right: 54px;
  width: calc(100% - 56px * 2 - 16px);
}
.button__text::after {
  bottom: 0;
  left: 54px;
  width: 8px;
}
.button__line {
  position: absolute;
  top: 0;
  width: 56px;
  height: 100%;
  overflow: hidden;
}
.button__line::before {
  content: "";
  position: absolute;
  top: 0;
  width: 150%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 300px;
  border: solid 3px var(--line_color);
}
.button__line:nth-child(1),
.button__line:nth-child(1)::before {
  left: 0;
}
.button__line:nth-child(2),
.button__line:nth-child(2)::before {
  right: 0;
}
.button:hover {
  letter-spacing: 6px;
}
.button:hover::before,
.button:hover .button__text::before {
  width: 8px;
}
.button:hover::after,
.button:hover .button__text::after {
  width: calc(100% - 56px * 2 - 16px);
}
.button__drow1,
.button__drow2 {
  position: absolute;
  z-index: -1;
  border-radius: 16px;
  transform-origin: 16px 16px;
}
.button__drow1 {
  top: -16px;
  left: 40px;
  width: 32px;
  height: 0;
  transform: rotate(30deg);
}
.button__drow2 {
  top: 44px;
  left: 77px;
  width: 32px;
  height: 0;
  transform: rotate(-127deg);
}
.button__drow1::before,
.button__drow1::after,
.button__drow2::before,
.button__drow2::after {
  content: "";
  position: absolute;
}
.button__drow1::before {
  bottom: 0;
  left: 0;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-60deg);
}
.button__drow1::after {
  top: -10px;
  left: 45px;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(69deg);
}
.button__drow2::before {
  bottom: 0;
  left: 0;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-146deg);
}
.button__drow2::after {
  bottom: 26px;
  left: -40px;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-262deg);
}
.button__drow1,
.button__drow1::before,
.button__drow1::after,
.button__drow2,
.button__drow2::before,
.button__drow2::after {
  background: var(--back_color);
}
.button:hover .button__drow1 {
  animation: drow1 ease-in 0.06s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow1::before {
  animation: drow2 linear 0.08s 0.06s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow1::after {
  animation: drow3 linear 0.03s 0.14s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow2 {
  animation: drow4 linear 0.06s 0.2s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow2::before {
  animation: drow3 linear 0.03s 0.26s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow2::after {
  animation: drow5 linear 0.06s 0.32s;
  animation-fill-mode: forwards;
}
@keyframes drow1 {
  0% {
    height: 0;
  }
  100% {
    height: 100px;
  }
}
@keyframes drow2 {
  0% {
    width: 0;
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  100% {
    width: 120px;
  }
}
@keyframes drow3 {
  0% {
    width: 0;
  }
  100% {
    width: 80px;
  }
}
@keyframes drow4 {
  0% {
    height: 0;
  }
  100% {
    height: 120px;
  }
}
@keyframes drow5 {
  0% {
    width: 0;
  }
  100% {
    width: 124px;
  }
}

.container {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.button:not(:last-child) {
  margin-bottom: 64px;
}

</style>
    

================================================
FILE: Buttons/hnguyentrung20_slimy-dingo-46.html
================================================
<button>
  <div class="progress">
     <div class="progress-bar"> </div>
  </div>
  
  <p class="before-scan">Find aliens</p>
  <p class="scaning">Scanning</p>
  <p class="complete">No aliens found</p>
</button>
<style>
/* From Uiverse.io by hnguyentrung20 - Tags: button */
@keyframes MoveBackground {
  0% {
    background-position-x: 0;
  }

  100% {
    background-position-x: -165px;
  }
}

@keyframes Scaning {
  0% {
    width: 0%;
  }

  30% {
    width: 10%;
  }

  70% {
    width: 40%;
  }

  100% {
    width: 100%;
  }
}

button {
  background: none;
  font-size: 20px;
  font-weight: 700;
  color: black;
  text-transform: uppercase;
  padding: 10px 30px;
  position: relative;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  transition-duration: 300ms;
  border: none;
  max-width: 1370px;
  width: fit-content;
}

button:hover {
  color: white;
  border: 4px black solid;
  max-width: 170px;
  padding: 5px 30px;
}

button:active {
  background: none;
  color: white;
  border: 4px #1F8A70 solid;
  background-color: #1F8A70;
  max-width: 170px;
}

button .progress {
  display: none;
}

button:active .progress .progress-bar {
  display: none;
}

button:hover .progress {
 /* background-image: repeating-linear-gradient(-28deg, transparent, transparent 31px, #DC0000 19px, #DC000010 70px); */
  display: block;
  user-select: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transition-duration: 600ms;
  overflow: hidden;
  animation: Scaning 3s linear;
}

.progress .progress-bar {
  width: 165px;
  height: 100%;
  background-image: repeating-linear-gradient(-25deg, transparent, transparent 31px, #000000 19px, #000000ee 70px);
  animation: MoveBackground 2s linear infinite reverse;
}

button::before {
  /* content: "<d"; */
  background-color: white;
  height: 100%;
  width: 100%;
}

button:hover .before-scan,
 .complete, .scaning {
  display: none;
}

button:hover .scaning {
  display: block;
  mix-blend-mode: difference;
  padding: 0px 0px;
}

button:active .scaning {
  display: none;
}

button:active .complete {
  display: block;
}
</style>


================================================
FILE: Buttons/hssqrshi_light-rattlesnake-90.html
================================================
<button class="button">Join Now<span class="arrow">&gt;</span></button>

<style>
/* From Uiverse.io by hssqrshi  - Tags: button */
.button {
  background-color: #c47dfb;
  background-image: linear-gradient(to bottom, #d992ff, #c47dfb);
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.3s ease;
  transform: perspective(500px) rotateX(0deg);
}

.button:hover {
  background-color: #b46cea;
  transform: perspective(500px) rotateX(5deg);
  animation: glow 1.5s infinite alternate;
}

.button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(196, 125, 251, 0.5);
}

.button:active {
  transform: perspective(500px) rotateX(-5deg) translateY(2px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 10px 15px rgba(0, 0, 0, 0.2);
}

@keyframes glow {
  0% {
    box-shadow:
      0 0 10px rgba(196, 125, 251, 0.5),
      0 0 20px rgba(196, 125, 251, 0.5),
      0 0 30px rgba(196, 125, 251, 0.5);
  }
  100% {
    box-shadow:
      0 0 20px rgba(196, 125, 251, 0.8),
      0 0 30px rgba(196, 125, 251, 0.8),
      0 0 40px rgba(196, 125, 251, 0.8);
  }
}

.button .text {
  transition:
    transform 0.3s ease,
    color 0.3s ease,
    font-size 0.3s ease;
}

.button:hover .text {
  transform: scale(1.2);
  font-size: 18px;
  color: #e0bbff;
}

.arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.3s ease;
  font-size: 16px;
}

.button:hover .arrow {
  transform: translateX(5px);
}

</style>
    

================================================
FILE: Buttons/htwarriors108_lazy-owl-9.html
================================================
<button class="button">
  <div class="display">
    <div id="msg">Click Me</div>
  </div>
  
  <span></span>
  <span></span>
</button>
<style>
/* From Uiverse.io by htwarriors108 - Tags: gradient, button, animated, colorful, hover effect, click effect, click animation, box-shadow, multicolor */
.button {
  height: 50px;
  width: 180px;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  border-radius: 25px;
  animation: animate 1.5s linear infinite;
  border: none;
  cursor: pointer;
}

.button, .display, #msg {
  transition: 0.3s;
}

.button:active .display {
  background: rgba(255, 255, 255, 0.5);
}

.button:active .display #msg {
  -webkit-text-fill-color: #1b1b1b;
}

.button:hover {
  scale: 1.15;
  animation: animate 0.7s linear infinite;
  transform: translateY(-15px);
}

.button .display, .button span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button .display {
  z-index: 1;
  background-color: #1b1b1b;
  height: 42.5px;
  width: 172.5px;
  border-radius: 20px;
  text-align: center;
}

.button .display #msg {
  line-height: 42.5px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes animate {
  100% {
    filter: hue-rotate(360deg);
  }
}

.button span {
  height: 100%;
  width: 100%;
  background: inherit;
  border-radius: 25px;
}

.button span:first-child {
  filter: blur(15px);
}

.button span:last-child {
  filter: blur(15px);
  transition: 0.3s;
}

.button:hover span:last-child {
  width: 110%;
  height: 120%;
}
</style>


================================================
FILE: Buttons/htwarriors108_spicy-bird-33.html
================================================
<button>
  <a href="#">
     <svg viewBox="0 0 16 16" fill="currentColor" id="facebook">
                        <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path>
                    </svg>
      </a>
      </button>
<style>
/* From Uiverse.io by htwarriors108 - Tags: glassmorphism, facebook, button, hover, share, social media, clean, links, hover effect, buttons */
button {
  position: relative;
  border: none;
  margin: 10px;
  background-color: transparent;
}

button a {
  width: 80px;
  height: 80px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 5px 45px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  transition: 0.5s;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.1);
}

button a:hover {
  transform: translateY(-20px);
}

button a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: skewX(45deg) translateX(150px);
  transition: 0.5s ease;
}

button a:hover::before {
  transform: skewX(45deg) translateX(-150px);
}

button a svg {
  width: 3em;
}

#facebook {
  color: rgba(10, 128, 236, 0.7);
}
</style>


================================================
FILE: Buttons/htwarriors108_tender-cobra-44.html
================================================
 <button style="--i:#a955ff;--j:#ea51ff;">
            <span class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
  <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"></path>
</svg>
            </span>
            <span class="title">i love it</span>
        </button>
<style>
/* From Uiverse.io by htwarriors108 - Tags: gradient, button, hover, clean, color, hover effect, buttons */
button {
  background-color: #fff;
  position: relative;
  list-style: none;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  cursor: pointer;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
  border: none;
}

button:active {
  scale: 1.2;
}

button:hover {
  width: 180px;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0);
}

button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: linear-gradient(45deg, var(--i), var(--j));
  opacity: 0;
  transition: 0.5s;
}

button:hover::before {
  opacity: 1;
}

button::after {
  content: '';
  position: absolute;
  top: 10px;
  width: 100%;
  height: 100%;
  border-radius: 60px;
  background: linear-gradient(45deg, var(--i), var(--j));
  filter: blur(15px);
  transition: 0.5s;
  z-index: -1;
  opacity: 0;
}

button:hover::after {
  opacity: 0.5;
}

button svg {
  color: #777;
  width: auto;
  height: 30px;
  transition: 0.5s;
  transition-delay: 0.25s;
}

button:hover svg {
  transform: scale(0);
  color: #fff;
  transition-delay: 0s;
}

button span {
  position: absolute;
}

button .title {
  color: #fff;
  font-size: 1.3em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0s;
  font-weight: 600;
}

button:hover .title {
  transform: scale(1);
  transition-delay: 0.25s;
}
</style>


================================================
FILE: Buttons/iDamjan_horrible-monkey-25.html
================================================
  <div class="container">
    <button>
      <span id="u">u</span><span id="n">n</span><span id="i">i</span><span id="v">v</span><span id="e">e</span><span id="r">r</span><span id="s">s</span><span id="ee">e</span>
    </button>
      <div class="moon"></div>
  </div>

<style>
/* From Uiverse.io by iDamjan - Tags: button */
button {
  z-index: 500;
  box-shadow: rgba(124, 172, 226, 0.295) 2px 2px 8px;
  width: 15rem;
  height: 4rem;
  letter-spacing: 0.5rem;
  border: none;
  border-radius: 0.1rem;
  color: white;
  animation: universe-is-moving 2s infinite ease-out;
  background: linear-gradient(
    90deg,
    rgba(185, 43, 39, 1) 0%,
    rgba(21, 101, 192, 1) 100%
  );
  background-size: 200% 200%;
  animation-direction: alternate;
  background-position: 0% 100%;
  animation-name: universe-is-moving;
  animation-duration: 1.8s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all 0.5s ease-in-out;
}

button:hover {
  border-radius: 2rem;
  cursor: pointer;
}

.moon {
  position: relative;
  left: 2rem;
  bottom: -2rem;
  right: 0;
  width: 20px;
  height: 20px;
  transform: translate3d(42px, -62px, -135px);
  background-color: rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  animation: 3s  universe-moon infinite ease-in-out;
  animation-timing-function: linear;
}

#u {
  font-size: 1.2rem;
  animation: 3s ease-in-out universe-letters-are-moving infinite;
}

#n {
  font-size: 1.2rem;
  animation: 3s ease-in-out universe-letters-are-moving infinite;
  animation-delay: 200ms;
}

#i {
  font-size: 1.2rem;
  animation: 3s ease-in-out universe-letters-are-moving infinite;
  animation-delay: 400ms;
}

#v {
  font-size: 1.2rem;
  animation: 3s ease-in-out universe-letters-are-moving infinite;
  animation-delay: 600ms;
}

#e {
  font-size: 1.2rem;
  animation: 3s ease-in-out universe-letters-are-moving infinite;
  animation-delay: 800ms;
}

#r {
  font-size: 1.2rem;
  animation: 3s ease-in-out universe-letters-are-moving infinite;
  animation-delay: 1000ms;
}

#s {
  font-size: 1.2rem;
  animation: 3s ease-in-out universe-letters-are-moving infinite;
  animation-delay: 1200ms;
}

#e {
  font-size: 1.2rem;
  animation: 3s ease-in-out universe-letters-are-moving infinite;
  animation-delay: 1400ms;
}

#ee {
  font-size: 1.2rem;
  animation: 3s ease-in-out universe-letters-are-moving infinite;
  animation-delay: 1600ms;
}

@keyframes universe-is-moving {
  from {
    background-position: 0% 100%;
  }

  to {
    background-position: 100% 0%;
  }
}

@keyframes universe-letters-are-moving {
  0% {
    font-size: 1.2rem;
  }

  50% {
    font-size: 1.5rem;
  }

  100% {
    font-size: 1.2rem;
  }
}

@keyframes universe-moon {
  0% {
    z-index: 5;
    transform: translateY(-8em) translateX(10em);
  }

  50% {
    transform: translateX(0.5em) translateY(-1em);
  }

  100% {
    transform: translateY(-8em) translateX(10em);
    z-index: -5;
  }
}

</style>


================================================
FILE: Buttons/iZOXVL_wise-goat-75.html
================================================
<button class="boton-elegante">Explorar</button>

<style>
/* From Uiverse.io by iZOXVL  - Tags: simple, material design, animation, minimalist, black, button */
.boton-elegante {
  padding: 15px 30px;
  border: 2px solid #2c2c2c;
  background-color: #1a1a1a;
  color: #ffffff;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 30px;
  transition: all 0.4s ease;
  outline: none;
  position: relative;
  overflow: hidden;
  font-weight: bold;
}

.boton-elegante::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: scale(0);
  transition: transform 0.5s ease;
}

.boton-elegante:hover::after {
  transform: scale(4);
}

.boton-elegante:hover {
  border-color: #666666;
  background: #292929;
}

</style>
    

================================================
FILE: Buttons/iamriishav_old-liger-56.html
================================================
<button>
  <span>
  Hover me
  </span>
</button>
<style>
/* From Uiverse.io by iamriishav - Tags: button */
button {
  padding: 15px 30px;
  border: none;
  outline: none;
  border-radius: 30px;
  font-size: 1.5rem;
  z-index: 1;
  position: relative;
  -webkit-box-shadow: 0 5px 15px rgba(33, 33, 33, .2);
  box-shadow: 0 5px 15px rgba(33, 33, 33, .2);
  overflow: hidden;
  cursor: pointer;
}

button > span {
  z-index: 2;
}

button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background-color: #212121;
  z-index: -1;
  overflow: hidden;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
  -webkit-transition: -webkit-transform 0.2s ease-in;
  transition: -webkit-transform 0.2s ease-in;
  transition: transform 0.2s ease-in;
}

button:hover {
  color: #e8e8e8;
}

button:hover::before {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
}
</style>


================================================
FILE: Buttons/ilkhoeri_chilly-sloth-36.html
================================================
<button class="action_has has_saved" aria-label="save" type="button">
  <svg
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    width="20"
    height="20"
    stroke-linejoin="round"
    stroke-linecap="round"
    stroke-width="2"
    viewBox="0 0 24 24"
    stroke="currentColor"
    fill="none"
  >
    <path
      d="m19,21H5c-1.1,0-2-.9-2-2V5c0-1.1.9-2,2-2h11l5,5v11c0,1.1-.9,2-2,2Z"
      stroke-linejoin="round"
      stroke-linecap="round"
      data-path="box"
    ></path>
    <path
      d="M7 3L7 8L15 8"
      stroke-linejoin="round"
      stroke-linecap="round"
      data-path="line-top"
    ></path>
    <path
      d="M17 20L17 13L7 13L7 20"
      stroke-linejoin="round"
      stroke-linecap="round"
      data-path="line-bottom"
    ></path>
  </svg>
</button>

<style>
/* From Uiverse.io by ilkhoeri  - Tags: simple, button, toggle, svg, save */
.action_has {
  --color: 0 0% 60%;
  --color-has: 211deg 100% 48%;
  --sz: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--sz) * 2.5);
  width: calc(var(--sz) * 2.5);
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
  border: 0.0625rem solid hsl(var(--color));
}

.has_saved:hover {
  border-color: hsl(var(--color-has));
}
.has_liked:hover svg,
.has_saved:hover svg {
  color: hsl(var(--color-has));
}

.has_liked svg,
.has_saved svg {
  overflow: visible;
  height: calc(var(--sz) * 1.75);
  width: calc(var(--sz) * 1.75);
  --ease: cubic-bezier(0.5, 0, 0.25, 1);
  --zoom-from: 1.75;
  --zoom-via: 0.75;
  --zoom-to: 1;
  --duration: 1s;
}

.has_saved:hover path[data-path="box"] {
  transition: all 0.3s var(--ease);
  animation: has-saved var(--duration) var(--ease) forwards;
  fill: hsl(var(--color-has) / 0.35);
}
.has_saved:hover path[data-path="line-top"] {
  animation: has-saved-line-top var(--duration) var(--ease) forwards;
}
.has_saved:hover path[data-path="line-bottom"] {
  animation: has-saved-line-bottom var(--duration) var(--ease) forwards,
    has-saved-line-bottom-2 calc(var(--duration) * 1) var(--ease)
      calc(var(--duration) * 0.75);
}

@keyframes has-saved-line-top {
  33.333% {
    transform: rotate(0deg) translate(1px, 2px) scale(var(--zoom-from));
    d: path("M 3 5 L 3 8 L 3 8");
  }
  66.666% {
    transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via));
  }
  99.999% {
    transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to));
  }
}
@keyframes has-saved-line-bottom {
  33.333% {
    transform: rotate(0deg) translate(1px, 2px) scale(var(--zoom-from));
    d: path("M 17 20 L 17 13 L 7 13 L 7 20");
  }
  66.666% {
    transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via));
  }
  99.999% {
    transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to));
    d: path("M 17 21 L 17 21 L 7 21 L 7 21");
  }
}
@keyframes has-saved-line-bottom-2 {
  from {
    d: path("M 17 21 L 17 21 L 7 21 L 7 21");
  }
  to {
    transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to));
    d: path("M 17 20 L 17 13 L 7 13 L 7 20");
    fill: white;
  }
}
@keyframes has-saved {
  33.333% {
    transform: rotate(0deg) translate(1px, 2px) scale(var(--zoom-from));
  }
  66.666% {
    transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via));
  }
  99.999% {
    transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to));
  }
}

</style>
    

================================================
FILE: Buttons/ilkhoeri_honest-panther-87.html
================================================
<button class="action_has has_liked" aria-label="like" type="button">
  <span data-icon=""
    ><svg
      data-icon="aoeri"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke="currentColor"
      fill="none"
    >
      <path
        d="m8.05,11.99c0-.84.28-1.07,1.2-1.25,1.6-.31,2.35-.74,3.14-1.54,1.19-1.21,1.58-1.97,2.18-3.24.66-1.69,1.55-2.82,3.04-2.76.9.03,2.33.8,1.67,2.72-.31.9-1.98,3.61-2.23,4.23-.18.46.4.8.8.8h2.5c1.2,0,2.2,1,2.2,2.2l-1.1,5.6c-.3,1.5-1.02,2.23-2.2,2.2h-7.6c-2,0-3.6-1.6-3.6-3.6v-5.35Z"
        data-d="thumb"
      ></path>
      <path
        d="m5.4,19.9c0,.6-.5,1.1-1.1,1.1h-1c-1,0-1.9-.9-1.9-1.9v-6.3c0-1,.9-1.9,1.9-1.9h.9c.7,0,1.2.6,1.2,1.2v7.7Z"
        data-d="sleeves"
      ></path></svg
  ></span>
</button>

<style>
/* From Uiverse.io by ilkhoeri  - Tags: simple, success, button, like, click */
.action_has {
  --color: 0 0% 60%;
  --color-has: 211deg 100% 48%;
  --sz: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--sz) * 2.5);
  width: calc(var(--sz) * 2.5);
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
  border: 0.0625rem solid hsl(var(--color));
}

.has_liked svg,
.has_saved svg {
  overflow: visible;
  height: calc(var(--sz) * 1.75);
  width: calc(var(--sz) * 1.75);
  --ease: cubic-bezier(0.5, 0, 0.25, 1);
  --zoom-from: 1.75;
  --zoom-via: 0.75;
  --zoom-to: 1;
  --duration: 1s;
}

.has_liked:hover {
  transition: border-color var(--duration) var(--ease);
  border-color: hsl(var(--color-has));
}

.has_liked:hover svg,
.has_saved:hover svg {
  fill: hsl(var(--color-has) / 0.5);
  color: hsl(var(--color-has));
}

.has_liked:hover [data-d="thumb"] {
  animation: has-liked-thumb var(--duration) var(--ease) forwards;
}
.has_liked:hover [data-d="sleeves"] {
  animation: has-liked-sleeves var(--duration) var(--ease) forwards;
}

@keyframes has-liked-thumb {
  33.333% {
    transform: rotate(-20deg) translate(1px, 2px) scale(var(--zoom-from));
  }
  66.666% {
    transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via));
    d: path(
      "m8.05,11.99c0-.84.28-1.07,1.2-1.25,1.6-.31,2.3-.64,2.9-1.09,0,0,1.64-1.31,2.21-3.11,1.12-3.59,2.11-4.85,3.72-4.85,2.27,0,2.96,2.22,2.55,3.54-.6,1.97-3.81,4.09-3.94,4.99-.07.49.76.72,1.16.72h2.5c1.2,0,2.2,1,2.2,2.2l-1.1,5.6c-.3,1.5-1.02,2.23-2.2,2.2h-7.6c-2,0-3.6-1.6-3.6-3.6v-5.35Z"
    );
  }
  99.999% {
    transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to));
  }
}

@keyframes has-liked-sleeves {
  33.333% {
    transform: rotate(10deg) translate(6px, -2px) scale(var(--zoom-from));
  }
  66.666% {
    transform: rotate(-10deg) translate(-6px, 0px) scale(var(--zoom-via));
  }
  99.999% {
    transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to));
  }
}

</style>
    

================================================
FILE: Buttons/ilyas-hadi_good-deer-47.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by ilyas-hadi - Tags: button, accessibility, 3d button, 3d form , 3d hover */
.button {
  padding: 1.1rem 2.2rem;
  font-size: 1rem;
  color: #fff;
  font-weight: 600;
  transition: all .2s;
  position: relative;
  border: none;
  background: #000;
}

.button:before,.button:after {
  content: "";
  position: absolute;
  top: 50%;
  background: #ff3d00;
  height: 108%;
  width: 0;
  z-index: -1;
  transition: all .7s;
  transform: translateY(-50%);
}

.button:before {
  left: 0%;
}

.button:after {
  right: 0%;
}

.button:hover {
  color: #fff;
  box-shadow: #f51a1a7f 0 30px 60px -12px inset, #ff00007f 0 18px 36px -18px inset;
  z-index: 2;
}

.button:hover::before {
  width: 50%;
  left: 50%;
}

.button:hover::after {
  width: 50%;
  right: 50%;
}
</style>


================================================
FILE: Buttons/irfnmdlptra_black-warthog-78.html
================================================
<button class="button">
  <span>Hover</span>
</button>

<style>
/* From Uiverse.io by irfnmdlptra - Tags: button */
.button {
  position: relative;
  display: inline-block;
  padding: 12px 30px;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 40px;
  background: linear-gradient(45deg, #FF0080, #FF8C00);
  color: #fff;
  border: none;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}

.button:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 100%;
  z-index: -1;
  transition: all 0.5s ease;
}

.button:hover:before {
  width: 500px;
  height: 500px;
}

.button span {
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.button:hover span {
  transform: scale(1.2);
}

</style>


================================================
FILE: Buttons/irfnmdlptra_strong-cheetah-50.html
================================================
<a class="space-button" href="#">
  <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10zm0 18.5c-4.688 0-8.5-3.812-8.5-8.5s3.812-8.5 8.5-8.5 8.5 3.812 8.5 8.5-3.812 8.5-8.5 8.5zm1.5-10.5h-3v-4.5h-1v4.5h-3l4.5 5z" fill="currentColor"></path></svg>
  Explore Space
</a>

<style>
/* From Uiverse.io by irfnmdlptra - Tags: button */
.space-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: #fff;
  background-color: #2d3142;
  border-radius: 5px;
  border: none;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}

.space-button:hover {
  background-color: #454b5d;
  transform: translateY(-3px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.space-button:active {
  background-color: #1e222f;
  transform: translateY(-1px);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.space-button svg {
  display: inline-block;
  margin-right: 10px;
  width: 20px;
  height: 20px;
  fill: #fff;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
  transform: translateZ(0);
  transition: all 0.3s ease;
}

.space-button:hover svg {
  transform: translateZ(10px) rotateY(180deg) rotateX(180deg);
}

.space-button:active svg {
  transform: translateZ(5px) rotateY(180deg) rotateX(180deg);
}

</style>


================================================
FILE: Buttons/isfandiyor132_witty-falcon-39.html
================================================
<button class="btn"><span>Hover Me</span></button>
<style>
/* From Uiverse.io by isfandiyor132 - Tags: button, hover, square, neon, futuristic */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  outline: none;
  height: 50px;
  width: 150px;
  border: none;
  text-decoration: none;
  background-image: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
}

.btn:hover {
  animation: rotate 0.4s linear infinite;
}

@keyframes rotate {
  100% {
    filter: hue-rotate(-360deg)
  }
}

.btn span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  width: 142px;
  background: #222222;
  font-size: 18px;
}
</style>


================================================
FILE: Buttons/iswearcristi_breezy-skunk-21.html
================================================
<button class="btn">cut</button>
<style>
/* From Uiverse.io by iswearcristi - Tags: button */
.btn {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  font-size: 18px;
  background-color: rgba(13, 13, 13, 0.3);
  padding: 0.4em 1.2em;
  border-style: dashed;
  border-radius: 0.25em;
  border-width: 2px;
  border-color: rgba(13, 13, 13, 0.75);
  transition: 0.2s ease;
}

.btn:hover {
  background-color: rgb(255, 255, 255);
  color: #0d0d0d;
  border-color: #0d0d0d;
}
</style>


================================================
FILE: Buttons/itay1313_orange-otter-84.html
================================================
<div class="body">
<button class="btn btn-hover">
  <span class="btn-text">Practice now</span>
</button>
</div>
<style>
/* From Uiverse.io by itay1313 - Tags: button */
.body {
  --transition: all 0.55s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --yellow-bg: transparent linear-gradient(114deg, #fdc100 0%, #dd7d00 100%) 0%
    0% no-repeat padding-box;
  color: white;
  margin: 0;
}

.btn {
  border-radius: 23px;
  letter-spacing: 0.8px;
  font-size: 14px;
  font-weight: 300;
  color: white;
  white-space: nowrap;
  margin: 20px auto;
  width: 166px;
  height: 45px;
  cursor: pointer;
  position: relative;
  border: 1px solid #dd7d00;
  background: transparent;
}

.btn::before {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  content: "";
  width: 50%;
  height: 100%;
  background: black;
  position: absolute;
  top: 0;
  right: 0;
}

.btn:hover::before {
  width: 100%;
}

.btn.btn-hover {
  border-radius: 50px;
  position: relative;
}

.btn.btn-hover .btn-text {
  color: white;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  mix-blend-mode: lighten;
}

.btn.btn-hover::before {
  border-radius: 50px;
  width: 100%;
  background: conic-gradient(
    transparent 240deg, #ac633697 240deg,
    #fff2af6a 300deg, transparent 300deg
  )
  100% / 64%
  no-repeat, var(--yellow-bg);
}

.btn.btn-hover:hover .btn-text {
  margin-right: 30px;
}

.btn.btn-hover:hover::before {
  background-position: right;
  border-radius: 23px;
  width: 25%;
}

</style>


================================================
FILE: Buttons/itay1313_tender-sheep-90.html
================================================

  <button class="box">
    <span class="button">How Are you today?</span>
  </button>


<style>
/* From Uiverse.io by itay1313 - Tags: button */
.box {
  --border-radius: 4vmin;
  --bg: #3A3544;
  --color: #D0BCFF;
  --deg: 30deg;
  -webkit-perspective: 200px;
  perspective: 200px;
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  max-width: 350px;
  text-align: center;
  outline: none;
  border: none;
  background: none;
}

.button {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(var(--deg));
  transform: rotateY(var(--deg));
  -webkit-transition: all 800ms ease-in-out;
  transition: all 800ms ease-in-out;
  border-radius: var(--border-radius);
  font-style: normal;
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 2vmin;
  letter-spacing: 0.03vmin;
  padding: 1.3vmin 2.5vmin;
  background: var(--bg);
  color: var(--color);
}

.button:hover {
  -webkit-transform: rotateY(calc(-1 * var(--deg)));
  transform: rotateY(calc(-1 * var(--deg)));
}

.box:active .button {
  -webkit-transform: rotateY(calc(-1 * var(--deg) / 3));
  transform: rotateY(calc(-1 * var(--deg) / 3));
}

.box:focus .button {
  border: 0.05vmin solid var(--color);
}

</style>


================================================
FILE: Buttons/jdm-encompass_clever-lizard-42.html
================================================
<button class="button">
  <a href="https://www.facebook.com/JDmOwO" class="no-link-style">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50" style="null" class="icon icons8-Facebook-Filled">
      <path d="M40,0H10C4.486,0,0,4.486,0,10v30c0,5.514,4.486,10,10,10h30c5.514,0,10-4.486,10-10V10C50,4.486,45.514,0,40,0z M39,17h-3 c-2.145,0-3,0.504-3,2v3h6l-1,6h-5v20h-7V28h-3v-6h3v-3c0-4.677,1.581-8,7-8c2.902,0,6,1,6,1V17z" fill="#ffffff"></path>
    </svg>
  </a>
</button><br>
<style>
/* From Uiverse.io by jdm-encompass - Tags: button, social media, animated, follow */
.button {
  background-color: #1877F2;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  animation: sway 2s infinite alternate;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 500px;
  transition: transform 0.5s, box-shadow 0.5s;
}

.button:hover {
  transform: rotate(-360deg);
  box-shadow: 0 0 20px 0 rgba(0, 0, 255, 0.5);
}

@keyframes grow {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(10);
  }
}

@keyframes glow {
  0% {
    text-shadow: gold 1px 1px 1px;
  }

  100% {
    text-shadow: gold 0 0 10px gold;
  }
}

.icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  transition: transform 0.5s;
}

.icon:hover {
  transform: scale(1.5);
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.9))
}

.follow-text {
  color: white;
  position: relative;
  top: 3em;
  left: -4em;
  transition: transform 0.5s;
}

.follow-text:hover {
  transform: scale(1.2);
  color: rgba(31,81,255,100);
  filter: drop-shadow(2px 2px 4px rgba(31,81,255,2.0))
}

</style>


================================================
FILE: Buttons/jeremyssocial_silly-lionfish-21.html
================================================
<button class="fancy-3d-button">
  <svg
    role="img"
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    class="button-icon"
  >
    <path
      d="M12 .587l3.668 7.431L24 9.587l-6 5.845L19.335 24 12 20.01 4.665 24 6 15.432 0 9.587l8.332-1.569z"
    ></path>
  </svg>
  <span class="button-text">3D Hover</span>
</button>

<style>
/* From Uiverse.io by jeremyssocial  - Tags: 3d, red, button, hover, hover effect, hoverme, hover button, 3d button */
.fancy-3d-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  font-size: 1em;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(45deg, #ff416c, #ff4b2b);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.6s ease-in-out;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  perspective: 500px; /* Adding perspective for 3D effect */
  transform-style: preserve-3d; /* Preserve 3D transformations */
}

.fancy-3d-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 100%);
  z-index: -1;
  transition: all 0.6s ease-in-out;
  transform: translateZ(-20px); /* 3D depth effect */
  border-radius: 50px;
}

.fancy-3d-button:hover::before {
  transform: translateZ(-40px); /* Enhance depth on hover */
}

.fancy-3d-button:hover {
  transform: rotateX(15deg) rotateY(15deg); /* Rotate on hover for 3D effect */
}

.fancy-3d-button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 75, 43, 0.5);
}

.button-icon {
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.5em;
  fill: currentColor;
  transition: transform 0.6s ease-in-out;
  transform: translateZ(10px); /* Bring SVG out for 3D effect */
}

.fancy-3d-button:hover .button-icon {
  transform: rotate(360deg) translateZ(10px); /* Rotate SVG on hover */
}

.button-text {
  z-index: 2;
  transform: translateZ(10px); /* Bring text out for 3D effect */
  transition: transform 0.6s ease-in-out;
}

.fancy-3d-button:hover .button-text {
  transform: translateZ(20px); /* Enhance depth on hover */
}

</style>
    

================================================
FILE: Buttons/joe-herbert_quick-jellyfish-81.html
================================================
<button class="button">
  <div class="button-inner-wrap">
    <div class="button-content">
      <svg
        id="svg1"
        version="1.1"
        fill="none"
        viewBox="0 0 17.191999 17.915001"
        height="17.915001"
        width="17.191999"
      >
        <path
          id="path1"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="1.5"
          stroke="#000000"
          d="M 9.3223611,8.9119975 H 3.5673455 m -0.17238,0.7972 -1.3313244,3.0014005 c -0.8349111,2.493962 0.031033,4.403741 3.26073,2.9505 l 8.8532949,-4.5605 c 1.64001,-0.785228 1.659708,-3.5011752 0,-4.3772505 l -8.8707749,-4.56832 c -2.6423685,-1.18905255 -4.1290723,0.3343707 -3.26268,2.94464 l 1.3527044,3.09163 c 0.0935,0.2817 0.14026,0.4226 0.15871,0.5666 0.01638,0.1279 0.01621,0.2573 -4.9e-4,0.3851 -0.01883,0.144 -0.06594,0.2847 -0.16017,0.5662 z"
        ></path>
      </svg>

      <span>Send Message</span>
    </div>
  </div>
</button>

<style>
/* From Uiverse.io by joe-herbert  - Tags: animation, button, hover, challenge */
.button {
  cursor: pointer;
  padding: 20px 15px;
  font-weight: 600;
  font-size: 17px;
  font-family: sans-serif;
  border-radius: 15px;
  position: relative;
  background-clip: padding-box;
  border: solid 3px transparent;
  width: 185px;
  height: 65px;
  box-shadow: 5px 5px 20px -5px #aaa;
  transition: transform 0.3s;
}
.button span {
  transition: opacity 0.3s 0.3s;
  margin-left: 5px;
}
.button:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: -3px;
  border-radius: inherit;
  background: linear-gradient(to bottom, #ccc, #666);
}
.button:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, #eee, #ddd);
  border-radius: 15px;
}
.button-content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 1;
  transform: translateY(-50%);
}
.button-content:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-50% - 2.5px);
  right: 5px;
  bottom: 5px;
  left: 5px;
  background: linear-gradient(to bottom, #dfdfdf, #efefef);
  border-radius: 500px;
  height: 50px;
  transition: opacity 0.3s 0.3s;
  filter: blur(1px);
}
.button svg {
  position: relative;
  left: 0;
  width: 20px;
  transform: rotate(-45deg);
  transition: left 0.3s 0s, transform 0.3s 0s;
}

.button:hover .button-content:before,
.button:hover span {
  opacity: 0;
  transition: opacity 0.3s;
}
.button:hover svg {
  transition: left 0.6s 0.3s, transform 0.6s 0.3s;
  left: calc(50% - 17.5px);
  transform: translate(-50%, 2px) rotate(270deg) scale(1.5);
}
.button:active {
  transform: scale(0.9);
}
.button:active svg {
  animation: spin 0.4s ease-in-out 0.3s 1;
}

@keyframes spin {
  from {
    transform: translate(-50%, 2px) rotate(270deg) scale(1.5);
  }
  to {
    transform: translate(-50%, 2px) rotate(630deg) scale(1.5);
  }
}

</style>
    

================================================
FILE: Buttons/joe-watson-sbf_ordinary-turtle-50.html
================================================
<button class="btn">
    <span class="btn__visible">Buy Now</span>
    <span class="btn__invisible">Only 2 Left</span>
</button>
<style>
/* From Uiverse.io by joe-watson-sbf - Tags: gradient, button, hover, shop */
.btn {
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 8px;
  border-radius: 30px;
  border: none;
  background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.btn > * {
  display: inline-block;
  transition: all ease-in-out .5s;
}

.btn__visible {
  padding: 1.2rem 3rem;
  text-align: center;
}

.btn__invisible {
  width: 100%;
  position: absolute;
  padding: 1.2rem 0;
  left: 0;
  top: -100%;
}

.btn:hover {
  background-image: linear-gradient(160deg, #f093fb 0%, #f5576c 100%);
}

.btn:hover .btn__visible {
  transform: translateY(100%);
}

.btn:hover .btn__invisible {
  top: 0;
}

.btn:focus {
  outline: none;
}

</style>


================================================
FILE: Buttons/joe-watson-sbf_swift-husky-44.html
================================================
<button class="btn">
    Hover me
</button>
<style>
/* From Uiverse.io by joe-watson-sbf - Tags: button, hover */
.btn {
  font-size: 17px;
  background: transparent;
  border: none;
  padding: 1em 1.5em;
  color: #ffedd3;
  text-transform: uppercase;
  position: relative;
  transition: .5s ease;
}

.btn::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: #ffc506;
  transition: .5s ease;
}

.btn:hover {
  color: #1e1e2b;
  transition-delay: .5s;
}

.btn:hover::before {
  width: 100%;
}

.btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0;
  width: 100%;
  background-color: #ffc506;
  transition: .4s ease;
  z-index: -1;
}

.btn:hover::after {
  height: 100%;
  transition-delay: 0.4s;
  color: aliceblue;
}
</style>


================================================
FILE: Buttons/kalp-lathia_cold-cougar-17.html
================================================
<button class="button">
  <span class="left"></span>
  <span>Hover Me</span>
  <span class="right"></span>
</button>
<style>
/* From Uiverse.io by kalp-lathia - Tags: button, bounce, animated */
.button {
  --bg-color: rgb(0, 119, 255);
  --color: white;
  --border-radius: 1rem;
  --animation-duaration: 1s;
  --height: 4rem;
  --span-width: 1.5rem;
  --base-pos: 0rem;
  --final-pos: -2rem
}

.button, .left, .right {
  height: var(--height);
  background-color: var(--bg-color);
  transition: all var(--animation-duaration) ease-in-out;
}

.button {
  position: relative;
  font-size: 1rem;
  padding: 0rem 2.5rem;
  color: var(--color);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
}

.left, .right {
  width: var(--span-width);
  position: absolute;
  top: 0rem;
}

.left {
  left: var(--base-pos);
  border-radius: var(--border-radius) 0rem 0rem var(--border-radius);
}

.right {
  right: var(--base-pos);
  border-radius: 0rem var(--border-radius) var(--border-radius) 0rem;
}

.button:hover {
  animation: button-radius var(--animation-duaration) infinite ease-in-out;
}

.button:hover .left {
  animation: left-shake var(--animation-duaration) infinite ease-in-out;
}

.button:hover .right {
  animation: right-shake var(--animation-duaration) infinite ease-in-out;
}

@keyframes button-radius {
  0% {
    border-radius: var(--border-radius);
  }

  50% {
    border-radius: 0rem;
  }

  100% {
    border-radius: var(--border-radius);
  }
}

@keyframes left-shake {
  0% {
    left: var(--base-pos);
  }

  50% {
    left: var(--final-pos);
  }

  100% {
    left: var(--base-pos);
  }
}

@keyframes right-shake {
  0% {
    right: var(--base-pos);
  }

  50% {
    right: var(--final-pos);
  }

  100% {
    right: var(--base-pos);
  }
}
</style>


================================================
FILE: Buttons/kamehame-ha_dull-dog-37.html
================================================
<div class="light-button">
    <button class="bt">
        <div class="light-holder">
            <div class="dot"></div>
            <div class="light"></div>
        </div>
        <div class="button-holder">
            <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path>
            </svg>
            <p>Discord</p>
        </div>
    </button>
</div>
<style>
/* From Uiverse.io by kamehame-ha - Tags: button, hover, Discord, dark, light */
.light-button button.bt {
  position: relative;
  height: 200px;
  display: flex;
  align-items: flex-end;
  outline: none;
  background: none;
  border: none;
}

.light-button button.bt .button-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 100px;
  background-color: #0a0a0a;
  border-radius: 5px;
  color: #0f0f0f;
  font-weight: 700;
  transition: 300ms;
  outline: #0f0f0f 2px solid;
  outline-offset: 20;
}

.light-button button.bt .button-holder svg {
  height: 50px;
  fill: #0f0f0f;
  transition: 300ms;
}

.light-button button.bt .light-holder {
  position: absolute;
  height: 200px;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.light-button button.bt .light-holder .dot {
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  background-color: #0a0a0a;
  border-radius: 10px;
  z-index: 2;
}

.light-button button.bt .light-holder .light {
  position: absolute;
  top: 0;
  width: 200px;
  height: 200px;
  clip-path: polygon(50% 0%, 25% 100%, 75% 100%);
  background: transparent;
}

.light-button button.bt:hover .button-holder svg {
  fill: rgba(88, 101, 242, 1);
}

.light-button button.bt:hover .button-holder {
  color: rgba(88, 101, 242, 1);
  outline: rgba(88, 101, 242, 1) 2px solid;
  outline-offset: 2px;
}

.light-button button.bt:hover .light-holder .light {
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgba(88, 101, 242, 1) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%);
}
</style>


================================================
FILE: Buttons/kamehame-ha_grumpy-vampirebat-43.html
================================================
<button class="button">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="24" width="24">
    <path fill="white" d="M23.15 2.587L18.21 0.210001C17.9308 0.075557 17.6167 0.031246 17.3113 0.083204C17.0058 0.135162 16.724 0.280818 16.505 0.500001L7.04499 9.13L2.92499 6.002C2.73912 5.86101 2.50976 5.78953 2.27669 5.79994C2.04363 5.81035 1.82156 5.902 1.64899 6.059L0.326993 7.261C0.223973 7.35465 0.141644 7.46878 0.0852761 7.59608C0.0289081 7.72339 -0.00025659 7.86106 -0.000350724 8.00028C-0.000444857 8.1395 0.0285336 8.27721 0.0847294 8.40459C0.140925 8.53197 0.2231 8.64621 0.325993 8.74L3.89899 12L0.325993 15.26C0.2231 15.3538 0.140925 15.468 0.0847294 15.5954C0.0285336 15.7228 -0.000444857 15.8605 -0.000350724 15.9997C-0.00025659 16.1389 0.0289081 16.2766 0.0852761 16.4039C0.141644 16.5312 0.223973 16.6454 0.326993 16.739L1.64999 17.94C1.82256 18.097 2.04463 18.1887 2.27769 18.1991C2.51076 18.2095 2.74012 18.138 2.92599 17.997L7.04599 14.869L16.506 23.499C16.7248 23.7182 17.0064 23.8639 17.3117 23.9159C17.6171 23.9679 17.931 23.9235 18.21 23.789L23.152 21.412C23.4062 21.2893 23.6207 21.0973 23.7707 20.8581C23.9207 20.619 24.0002 20.3423 24 20.06V3.939C24 3.65647 23.9203 3.37967 23.7699 3.14048C23.6195 2.90129 23.4046 2.70943 23.15 2.587ZM18.004 17.448L10.826 12L18.004 6.552V17.448Z"></path>
    </svg>
  <p class="text">Click me</p>
</button>
<style>
/* From Uiverse.io by kamehame-ha - Tags: icon, button, vscode, visualstudio */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  gap: 15px;
  background-color: #007ACC;
  outline: 3px #007ACC solid;
  outline-offset: -3px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: 400ms;
}

.button .text {
  color: white;
  font-weight: 700;
  font-size: 1em;
  transition: 400ms;
}

.button svg path {
  transition: 400ms;
}

.button:hover {
  background-color: transparent;
}

.button:hover .text {
  color: #007ACC;
}

.button:hover svg path {
  fill: #007ACC;
}
</style>


================================================
FILE: Buttons/kamehame-ha_kind-otter-31.html
================================================
<button class="button">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 0.296997C5.37 0.296997 0 5.67 0 12.297C0 17.6 3.438 22.097 8.205 23.682C8.805 23.795 9.025 23.424 9.025 23.105C9.025 22.82 9.015 22.065 9.01 21.065C5.672 21.789 4.968 19.455 4.968 19.455C4.422 18.07 3.633 17.7 3.633 17.7C2.546 16.956 3.717 16.971 3.717 16.971C4.922 17.055 5.555 18.207 5.555 18.207C6.625 20.042 8.364 19.512 9.05 19.205C9.158 18.429 9.467 17.9 9.81 17.6C7.145 17.3 4.344 16.268 4.344 11.67C4.344 10.36 4.809 9.29 5.579 8.45C5.444 8.147 5.039 6.927 5.684 5.274C5.684 5.274 6.689 4.952 8.984 6.504C9.944 6.237 10.964 6.105 11.984 6.099C13.004 6.105 14.024 6.237 14.984 6.504C17.264 4.952 18.269 5.274 18.269 5.274C18.914 6.927 18.509 8.147 18.389 8.45C19.154 9.29 19.619 10.36 19.619 11.67C19.619 16.28 16.814 17.295 14.144 17.59C14.564 17.95 14.954 18.686 14.954 19.81C14.954 21.416 14.939 22.706 14.939 23.096C14.939 23.411 15.149 23.786 15.764 23.666C20.565 22.092 24 17.592 24 12.297C24 5.67 18.627 0.296997 12 0.296997Z" fill="white"></path>
  </svg>
  <p class="text">Click me</p>
</button>
<style>
/* From Uiverse.io by kamehame-ha - Tags:  */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  gap: 15px;
  background-color: #181717;
  outline: 3px #181717 solid;
  outline-offset: -3px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: 400ms;
}

.button .text {
  color: white;
  font-weight: 700;
  font-size: 1em;
  transition: 400ms;
}

.button svg path {
  transition: 400ms;
}

.button:hover {
  background-color: transparent;
}

.button:hover .text {
  color: #181717;
}

.button:hover svg path {
  fill: #181717;
}
</style>


================================================
FILE: Buttons/kamehame-ha_swift-penguin-73.html
================================================
<div class="badges">
    <button class="blue">Share Online</button>
    <button class="yellow">Working on it</button>
    <button class="green">Success</button>
    <button class="red">Error</button>
</div>
<style>
/* From Uiverse.io by kamehame-ha - Tags: success, error, share, light&dark, clean, badges, working */
/*

This is actually the most neutral button desing of all time,
fits everywhere no matter if it is dark or light mode,
just change colors. 
I created original using tailwindCSS, here's classes:

text-blue-500 bg-blue-500/10 border border-blue-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0
text-yellow-500 bg-yellow-500/10 border border-yellow-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0
text-green-500 bg-green-500/10 border border-green-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0
text-indigo-500 bg-indigo-500/10 border border-indigo-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0

*/

.badges {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px */
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.badges > button {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
  padding: 2px .5rem; /* 8px*/
  cursor: pointer;
  border: none;
  border-radius: 0.375rem; /* 6px */
  outline: none;
}

.badges .blue {
  background-color: rgba(59, 130, 246, 0.10);
  color: rgb(59 130 246);
  border: 1px rgb(59 130 246) solid;
}

.badges .yellow {
  background-color: rgba(234, 179, 8, 0.10);
  color: rgb(234 179 8);
  border: 1px rgb(234 179 8) solid;
}

.badges .green {
  background-color: rgba(34, 197, 94, 0.10);
  color: rgb(34 197 94);
  border: 1px rgb(34 197 94) solid;
}

.badges .red {
  background-color: rgba(239, 68, 68, 0.10);
  color: rgb(239 68 68);
  border: 1px rgb(239 68 68) solid;
}
</style>


================================================
FILE: Buttons/kandalgaonkarshubham_yellow-dolphin-39.html
================================================
<!-- From Uiverse.io by kandalgaonkarshubham  - Tags: simple, neumorphism, button -->
<button
  class="bg-[#fcfcfc] rounded-lg border-2 border-t-[#151716]/20 border-x-[#151716]/30 border-b-[#151716]/40 ring-2 ring-[#eeeeee] shadow-2xl p-1"
  type="button"
>
  <div
    class="flex items-center gap-1 rounded-2xl p-3 bg-[#eeeeee] shadow-inner"
  >
    <svg
      class="w-6 h-6"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
    >
      <path
        fill="#151716"
        d="M14.2199 21.63C13.0399 21.63 11.3699 20.8 10.0499 16.83L9.32988 14.67L7.16988 13.95C3.20988 12.63 2.37988 10.96 2.37988 9.78001C2.37988 8.61001 3.20988 6.93001 7.16988 5.60001L15.6599 2.77001C17.7799 2.06001 19.5499 2.27001 20.6399 3.35001C21.7299 4.43001 21.9399 6.21001 21.2299 8.33001L18.3999 16.82C17.0699 20.8 15.3999 21.63 14.2199 21.63ZM7.63988 7.03001C4.85988 7.96001 3.86988 9.06001 3.86988 9.78001C3.86988 10.5 4.85988 11.6 7.63988 12.52L10.1599 13.36C10.3799 13.43 10.5599 13.61 10.6299 13.83L11.4699 16.35C12.3899 19.13 13.4999 20.12 14.2199 20.12C14.9399 20.12 16.0399 19.13 16.9699 16.35L19.7999 7.86001C20.3099 6.32001 20.2199 5.06001 19.5699 4.41001C18.9199 3.76001 17.6599 3.68001 16.1299 4.19001L7.63988 7.03001Z"
      ></path>
      <path
        fill="#151716"
        d="M10.11 14.4C9.92005 14.4 9.73005 14.33 9.58005 14.18C9.29005 13.89 9.29005 13.41 9.58005 13.12L13.16 9.53C13.45 9.24 13.93 9.24 14.22 9.53C14.51 9.82 14.51 10.3 14.22 10.59L10.64 14.18C10.5 14.33 10.3 14.4 10.11 14.4Z"
      ></path>
    </svg>
    <span class="whitespace-nowrap font-medium text-lg text-[#151716]"
      >Send Message</span
    >
  </div>
</button>


    

================================================
FILE: Buttons/ke1221_ancient-walrus-24.html
================================================
<button> Click me
</button>
<style>
/* From Uiverse.io by ke1221 - Tags: neumorphism, button */
button {
 color: #090909;
 padding: 0.7em 1.7em;
 font-size: 18px;
 border-radius: 0.5em;
 background: #e8e8e8;
 border: 1px solid #e8e8e8;
 transition: all .3s;
 box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

button:active {
 color: #666;
 box-shadow: inset 4px 4px 12px #c5c5c5,
             inset -4px -4px 12px #ffffff;
}
</style>


================================================
FILE: Buttons/kennyotsu_blue-dragon-34.html
================================================
<!-- From Uiverse.io by kennyotsu - Tags: 3d, button, extruded -->
<button class="cursor-pointer select-none text-[4rem] font-bold text-slate-100 relative group text-center flex justify-center">
  <div class="absolute top-[6px] text-neutral-400 transition duration-300 drop-shadow-lg group-hover:drop-shadow-md group-active:drop-shadow-none">boop!</div>
  <div class="absolute top-[5px] text-neutral-300">boop!</div>
  <div class="absolute transition duration-300 transform group-hover:translate-y-1 group-active:translate-y-1.5">boop!</div>
  
  <div class="dont-mind-me opacity-0">boop!</div>
</button>




================================================
FILE: Buttons/kennyotsu_witty-bullfrog-54.html
================================================
<div class="container noselect">
  
  <label for="checkbox" id="clickHandler"></label>
  <input type="checkbox" id="checkbox">

  <button id="button">
    <p id="to-launch">let's launch!</p>
    <p id="tag">by kennyotsu &lt;3</p>
    <div id="platform"></div>
  <div class="caution">
    <div id="caution-left">LAUNCH ZONE</div>
    <div id="caution-right">LAUNCH ZONE</div>
  </div>
  </button>
  
  <p id="to-hover">hover me</p>
  <div id="shuttle-wrapper">
    
    <div id="shadow"></div>
    <svg viewBox="0 0 230.24 542.46" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="b"><defs><linearGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(160.35 -471.85) rotate(-7.06) scale(1.56 1.68)" y2="549.77" x2="-104.11" y1="545.09" x1="-130.63" id="d"><stop stop-color="#c6c6c6" offset="0"></stop><stop stop-color="#b1b1b1" offset="0"></stop><stop stop-color="#858585" offset=".02"></stop><stop stop-color="#606060" offset=".04"></stop><stop stop-color="#424242" offset=".05"></stop><stop stop-color="#2a2a2a" offset=".07"></stop><stop stop-color="#191919" offset=".09"></stop><stop stop-color="#101010" offset=".1"></stop><stop stop-color="#0d0d0d" offset=".13"></stop><stop stop-color="#454545" offset=".31"></stop><stop stop-color="#4c4c4c" offset=".33"></stop><stop stop-color="#484848" offset=".35"></stop><stop stop-color="#2b2c2b" offset=".52"></stop><stop stop-color="#171817" offset=".68"></stop><stop stop-color="#0b0c0b" offset=".84"></stop><stop stop-color="#070807" offset="1"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="479.08" x2="113.37" y1="475.4" x1="70.56" id="e"><stop stop-opacity="0" stop-color="#fff" offset="0"></stop><stop stop-opacity="0" stop-color="#fff" offset=".32"></stop><stop stop-opacity="0" stop-color="#fff" offset=".38"></stop><stop stop-opacity="0" stop-color="#b3511b" offset="1"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="270.33" x2="123.89" y1="269.31" x1="65.74" id="f"><stop stop-color="#e5e5e5" offset="0"></stop><stop stop-color="#e3e3e3" offset=".63"></stop><stop stop-color="#dcdcdc" offset=".85"></stop><stop stop-color="#d3d2d3" offset="1"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="114.99" x2="112.45" y1="114.99" x1="70.84" id="g"><stop stop-color="#1a1a1a" offset="0"></stop><stop stop-color="#2a2a2a" offset=".05"></stop><stop stop-color="#434343" offset=".15"></stop><stop stop-color="#4d4d4d" offset=".2"></stop><stop stop-color="#474747" offset=".3"></stop><stop stop-color="#383838" offset=".69"></stop><stop stop-color="#333" offset="1"></stop></linearGradient><linearGradient xlink:href="#g" y2="142.07" x2="112.45" y1="142.07" x1="70.84" id="h"></linearGradient><linearGradient xlink:href="#g" y2="178.73" x2="112.45" y1="178.73" x1="70.84" id="i"></linearGradient><linearGradient xlink:href="#g" y2="254.03" x2="112.45" y1="254.03" x1="70.84" id="j"></linearGradient><linearGradient xlink:href="#g" y2="329.25" x2="112.45" y1="329.25" x1="70.84" id="k"></linearGradient><linearGradient xlink:href="#g" y2="386.88" x2="112.45" y1="386.88" x1="70.84" id="l"></linearGradient><linearGradient xlink:href="#g" y2="407.2" x2="112.45" y1="407.2" x1="70.84" id="m"></linearGradient><linearGradient xlink:href="#g" y2="414.79" x2="112.45" y1="414.79" x1="70.84" id="n"></linearGradient><linearGradient xlink:href="#g" y2="423.88" x2="112.45" y1="423.88" x1="70.84" id="o"></linearGradient><linearGradient xlink:href="#g" y2="435.68" x2="112.45" y1="435.68" x1="70.84" id="p"></linearGradient><linearGradient xlink:href="#g" y2="446.33" x2="112.45" y1="446.33" x1="70.84" id="q"></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="280.59" x2="112.45" y1="280.59" x1="70.67" id="r"><stop stop-opacity="0" stop-color="#fff" offset="0"></stop><stop stop-opacity="0" stop-color="#fff" offset=".14"></stop><stop stop-opacity=".03" stop-color="#fff" offset=".19"></stop><stop stop-opacity=".08" stop-color="#fff" offset=".23"></stop><stop stop-opacity=".15" stop-color="#fff" offset=".25"></stop><stop stop-opacity=".23" stop-color="#fff" offset=".28"></stop><stop stop-opacity=".34" stop-color="#fff" offset=".3"></stop><stop stop-opacity=".47" stop-color="#fff" offset=".32"></stop><stop stop-opacity=".61" stop-color="#fff" offset=".34"></stop><stop stop-opacity=".78" stop-color="#fff" offset=".36"></stop><stop stop-opacity=".8" stop-color="#fff" offset=".36"></stop><stop stop-opacity="0" stop-color="#fff" offset=".38"></stop><stop stop-opacity="0" stop-color="#b3511b" offset="1"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="464.45" x2="120.43" y1="455.38" x1="63.17" id="s"><stop stop-opacity="0" stop-color="#fff" offset="0"></stop><stop stop-opacity="0" stop-color="#fff" offset=".15"></stop><stop stop-opacity=".03" stop-color="#fff" offset=".2"></stop><stop stop-opacity=".08" stop-color="#fff" offset=".24"></stop><stop stop-opacity=".15" stop-color="#fff" offset=".27"></stop><stop stop-opacity=".23" stop-color="#fff" offset=".29"></stop><stop stop-opacity=".34" stop-color="#fff" offset=".32"></stop><stop stop-opacity=".47" stop-color="#fff" offset=".34"></stop><stop stop-opacity=".61" stop-color="#fff" offset=".36"></stop><stop stop-opacity=".78" stop-color="#fff" offset=".38"></stop><stop stop-opacity=".8" stop-color="#fff" offset=".38"></stop><stop stop-opacity="0" stop-color="#fff" offset=".39"></stop><stop stop-color="#d3d3d3" offset=".72"></stop><stop stop-color="#d2d1d2" offset="1"></stop></linearGradient><linearGradient xlink:href="#r" y2="91.43" x2="115.35" y1="87.78" x1="72.87" id="t"></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="217.5" x2="194.16" y1="217.5" x1="102.87" id="v"><stop stop-color="#d68029" offset="0"></stop><stop stop-color="#b3511b" offset="1"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="404.51" x2="158.77" y1="23.53" x1="134.44" id="w"><stop stop-opacity=".4" stop-color="#dd884e" offset=".02"></stop><stop stop-opacity=".67" stop-color="#b76031" offset=".42"></stop><stop stop-color="#882e0d" offset="1"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="162" x2="194.16" y1="162" x1="102.66" id="x"><stop stop-color="#d8823a" offset="0"></stop><stop stop-color="#bf611e" offset="1"></stop></linearGradient><radialGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(119.12 192.29) rotate(-104.58) scale(1 .55)" r="134.05" fy="71.95" fx="60.36" cy="64.81" cx="122.52" id="y"><stop stop-opacity="0" stop-color="#dd884e" offset=".72"></stop><stop stop-color="#ed9654" offset="1"></stop></radialGradient><radialGradient xlink:href="#y" gradientTransform="translate(176.37 200.83) rotate(-75.42) scale(1 -.55)" r="133.29" fy="72.72" fx="68.57" cy="65.62" cx="130.39" id="z"></radialGradient><linearGradient gradientUnits="userSpaceOnUse" y2="217.56" x2="142.83" y1="438.65" x1="161.35" id="aa"><stop stop-color="#a52c14" offset="0"></stop><stop stop-opacity=".84" stop-color="#a53014" offset=".19"></stop><stop stop-opacity=".44" stop-color="#a73b14" offset=".59"></stop><stop stop-opacity="0" stop-color="#aa4814" offset="1"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(189.08 .72) rotate(.18) scale(1.34 1)" y2="285.84" x2="-7.1" y1="284.22" x1="-43.8" id="ab"><stop stop-opacity="0" stop-color="#e65900" offset="0"></stop><stop stop-opacity=".03" stop-color="#e45800" offset=".13"></stop><stop stop-opacity=".12" stop-color="#de5502" offset=".29"></stop><stop stop-opacity=".27" stop-color="#d55104" offset=".46"></stop><stop stop-opacity=".48" stop-color="#c84b08" offset=".65"></stop><stop stop-opacity=".75" stop-color="#b7430c" offset=".84"></stop><stop stop-color="#a83c11" offset="1"></stop></linearGradient><linearGradient xlink:href="#d" y2="591.23" x2="-38.94" y1="586.55" x1="-65.46" id="ac"></linearGradient><linearGradient xlink:href="#e" y2="535.79" x2="222.95" y1="532.12" x1="180.14" id="ad"></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="327.04" x2="233.47" y1="326.03" x1="175.32" id="ae"><stop stop-color="#e5e5e5" offset="0"></stop><stop stop-color="#e5e5e5" offset=".04"></stop><stop stop-color="#e5e5e5" offset=".05"></stop><stop stop-color="#e3e3e3" offset=".63"></stop><stop stop-color="#dcdcdc" offset=".86"></stop><stop stop-color="#d3d2d3" offset="1"></stop></linearGradient><linearGradient xlink:href="#g" y2="463.91" x2="222.03" y1="463.91" x1="180.42" id="af"></linearGradient><linearGradient xlink:href="#g" y2="471.51" x2="222.03" y1="471.51" x1="180.42" id="ag"></linearGradient><linearGradient xlink:href="#g" y2="480.59" x2="222.03" y1="480.59" x1="180.42" id="ah"></linearGradient><linearGradient xlink:href="#g" y2="492.4" x2="222.03" y1="492.4" x1="180.42" id="ai"></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="385.97" x2="222.04" y1="385.97" x1="180.43" id="aj"><stop stop-color="#d45300" offset="0"></stop><stop stop-color="#d35200" offset="0"></stop><stop stop-color="#995021" offset=".07"></stop><stop stop-color="#704e38" offset=".13"></stop><stop stop-color="#564d47" offset=".18"></stop><stop stop-color="#4d4d4d" offset=".2"></stop><stop stop-color="#474747" offset=".3"></stop><stop stop-color="#383838" offset=".69"></stop><stop stop-color="#333" offset="1"></stop></linearGradient><linearGradient xlink:href="#aj" y2="443.6" y1="443.6" id="ak"></linearGradient><linearGradient xlink:href="#aj" y2="310.75" y1="310.75" id="al"></linearGradient><linearGradient xlink:href="#aj" y2="235.44" y1="235.44" id="am"></linearGradient><linearGradient xlink:href="#aj" y2="198.78" y1="198.78" id="an"></linearGradient><linearGradient xlink:href="#aj" y2="171.7" y1="171.7" id="ao"></linearGradient><linearGradient xlink:href="#g" y2="503.1" x2="222.03" y1="503.1" x1="180.42" id="ap"></linearGradient><linearGradient xlink:href="#r" y2="337.31" x2="222.03" y1="337.31" x1="180.25" id="aq"></linearGradient><linearGradient xlink:href="#s" y2="521.17" x2="230.01" y1="512.1" x1="172.75" id="ar"></linearGradient><linearGradient xlink:href="#r" y2="148.14" x2="224.93" y1="144.49" x1="182.45" id="as"></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="424" x2="68.43" y1="414.65" x1="33.58" id="at"><stop stop-color="#e8e8e8" offset="0"></stop><stop stop-color="#f2f2f2" offset=".02"></stop><stop stop-color="#fafafa" offset=".04"></stop><stop stop-color="#fdfdfd" offset=".09"></stop><stop stop-color="#ededed" offset=".18"></stop><stop stop-color="#d3d3d3" offset=".38"></stop><stop stop-color="silver" offset=".58"></stop><stop stop-color="#b5b5b5" offset=".78"></stop><stop stop-color="#b2b2b2" offset="1"></stop></linearGradient><linearGradient xlink:href="#d" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" y2="466.58" x2="111.3" y1="461.9" x1="84.78" id="au"></linearGradient><linearGradient xlink:href="#d" gradientTransform="translate(108.68 -1.95) rotate(13.28)" y2="464.99" x2="78.06" y1="459.96" x1="49.55" id="av"></linearGradient><linearGradient xlink:href="#d" gradientTransform="translate(37.21 -2.14) rotate(4.64)" y2="468.28" x2="84.28" y1="465.78" x1="70.1" id="aw"></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="317.69" x2="185.62" y1="317.69" x1="17.4" id="ax"><stop stop-color="#d5d5d5" offset="0"></stop><stop stop-color="#d1d1d1" offset="1"></stop></linearGradient><filter filterUnits="userSpaceOnUse" id="ay"><feOffset dy="-6" dx="13"></feOffset><feGaussianBlur stdDeviation="6" result="az"></feGaussianBlur><feFlood flood-opacity=".3" flood-color="#333"></feFlood><feComposite operator="in" in2="az"></feComposite><feComposite in="SourceGraphic"></feComposite></filter><linearGradient gradientUnits="userSpaceOnUse" y2="307.1" x2="131.64" y1="302.93" x1="52.2" id="ba"><stop stop-color="#fff" offset="0"></stop><stop stop-color="#f9f9f9" offset=".06"></stop><stop stop-color="#f5f5f5" offset=".18"></stop><stop stop-color="#c7c7c7" offset=".37"></stop><stop stop-color="#c3c3c3" offset=".55"></stop><stop stop-color="#b9b9b9" offset=".7"></stop><stop stop-color="#b4b4b4" offset=".75"></stop><stop stop-color="#d3d3d3" offset=".94"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="427.46" x2="88.01" y1="180.46" x1="89.33" id="bb"><stop stop-color="#fff" offset="0"></stop><stop stop-opacity=".85" stop-color="#f7f8f8" offset=".07"></stop><stop stop-opacity=".65" stop-color="#eeefef" offset=".16"></stop><stop stop-opacity=".48" stop-color="#e5e7e7" offset=".26"></stop><stop stop-opacity=".33" stop-color="#dee0e1" offset=".37"></stop><stop stop-opacity=".21" stop-color="#d9dbdc" offset=".47"></stop><stop stop-opacity=".12" stop-color="#d4d7d8" offset=".58"></stop><stop stop-opacity=".05" stop-color="#d1d4d5" offset=".7"></stop><stop stop-opacity=".01" stop-color="#cfd2d3" offset=".83"></stop><stop stop-opacity="0" stop-color="#cfd2d3" offset="1"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="413.58" x2="69.93" y1="523.99" x1="-.05" id="bc"><stop stop-color="#b8b7b7" offset="0"></stop><stop stop-color="#d1d0d0" offset=".4"></stop><stop stop-color="#fff" offset="1"></stop></linearGradient><linearGradient xlink:href="#bc" y2="466.09" x2="44.69" y1="505.35" x1="19.81" id="bd"></linearGradient><radialGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(261.63 273.14) rotate(125.14) scale(1 .88)" r="39.33" fy="217.89" fx="66.91" cy="217.89" cx="66.91" id="be"><stop stop-color="#565656" offset="0"></stop><stop stop-color="#484848" offset=".1"></stop><stop stop-color="#323232" offset=".3"></stop><stop stop-color="#2b2b2b" offset=".42"></stop><stop stop-color="#2b2b2b" offset=".51"></stop><stop stop-color="#2b2b2b" offset="1"></stop></radialGradient><linearGradient gradientUnits="userSpaceOnUse" y2="380.41" x2="126.25" y1="374.95" x1="129.28" id="bf"><stop stop-color="#fff" offset="0"></stop><stop stop-color="#fff" offset=".27"></stop><stop stop-color="#fff" offset=".32"></stop><stop stop-color="#fdfdfe" offset=".33"></stop><stop stop-color="#f6f8fd" offset=".33"></stop><stop stop-color="#eaeffc" offset=".33"></stop><stop stop-color="#d9e3f9" offset=".33"></stop><stop stop-color="#c2d2f6" offset=".34"></stop><stop stop-color="#a7bef3" offset=".34"></stop><stop stop-color="#86a6ee" offset=".34"></stop><stop stop-color="#628ae9" offset=".34"></stop><stop stop-color="#386ce4" offset=".34"></stop><stop stop-color="#376be4" offset=".34"></stop><stop stop-color="#3d6ade" offset=".68"></stop><stop stop-color="#dd4f38" offset=".69"></stop><stop stop-color="#ff4915" offset="1"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="440.89" x2="97.61" y1="437.49" x1="65.52" id="bg"><stop stop-color="#e8e8e8" offset="0"></stop><stop stop-color="#f2f2f2" offset=".05"></stop><stop stop-color="#fafafa" offset=".13"></stop><stop stop-color="#fdfdfd" offset=".27"></stop><stop stop-color="#f2f2f2" offset=".36"></stop><stop stop-color="#c3c3c3" offset=".78"></stop><stop stop-color="#b2b2b2" offset="1"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="198.33" x2="136.86" y1="176.68" x1="77.37" id="bh"><stop stop-color="#0e0a09" offset="0"></stop><stop stop-color="#0e0a09" offset="0"></stop><stop stop-color="#2a2828" offset=".08"></stop><stop stop-color="#3b3b3b" offset=".14"></stop><stop stop-color="#424242" offset=".19"></stop><stop stop-color="#303030" offset=".26"></stop><stop stop-color="#090909" offset=".37"></stop><stop stop-color="#0c0b09" offset=".53"></stop><stop stop-color="#16110c" offset=".66"></stop><stop stop-color="#261c11" offset=".78"></stop><stop stop-color="#3e2b18" offset=".89"></stop><stop stop-color="#5c3f21" offset=".99"></stop><stop stop-color="#604122" offset="1"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="443.62" x2="81.11" y1="411.38" x1="79.7" id="bi"><stop stop-opacity=".5" stop-color="#fff" offset="0"></stop><stop stop-opacity=".38" stop-color="#fefefe" offset=".07"></stop><stop stop-opacity=".27" stop-color="#fefefe" offset=".17"></stop><stop stop-opacity=".17" stop-color="#fdfdfd" offset=".27"></stop><stop stop-opacity=".09" stop-color="#fdfdfd" offset=".38"></stop><stop stop-opacity=".04" stop-color="#fdfdfd" offset=".52"></stop><stop stop-opacity="0" stop-color="#fdfdfd" offset=".68"></stop><stop stop-opacity="0" stop-color="#fdfdfd" offset="1"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(-8.09 4.61) rotate(-2.79)" y2="170.77" x2="91.3" y1="162.16" x1="94.5" id="bj"><stop stop-color="#3f3f3f" offset=".13"></stop><stop stop-color="#090909" offset="1"></stop></linearGradient><linearGradient xlink:href="#bj" gradientTransform="translate(31.76 -5.44) rotate(5.03) scale(.81 1)" y2="171.47" x2="86.96" y1="164.53" x1="89.54" id="bk"></linearGradient><linearGradient xlink:href="#bj" gradientTransform="translate(-16.29 4.64) rotate(-2.49) scale(1.1 1)" y2="172.9" x2="94.31" y1="166.02" x1="96.87" id="bl"></linearGradient></defs><g id="c"><g><path style="fill:url(#d);" d="M103.28,444.18l8.98,31.12s-3.3,10.51-20.97,10.46c-17.68-.05-21.18-10.93-21.18-10.93l9.38-29.9,23.8-.74Z"></path><path style="fill:url(#e);" d="M91.32,474.9c16.6,0,20.97-4.48,20.97-4.48v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,4.48,20.64,4.48Z"></path><path style="fill:url(#f);" d="M70.84,127.87s-.02-17.57,0-20.15,14.01-38.61,16.18-44.26,6.7-5.39,8.75,0,16.68,41.99,16.68,43.93-.04,330.65,0,333.41,8.09,17.79,8.09,19.32,1.69,20.06-29.06,20.06-29.06-18.5-29.06-20.06,8.13-16.64,8.26-19.32,.17-312.94,.17-312.94Z"></path><g><path style="fill:url(#g);" d="M91.48,119.36c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#h);" d="M91.48,146.44c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#i);" d="M91.48,183.1c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#j);" d="M91.48,258.41c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#k);" d="M91.48,333.63c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#l);" d="M91.48,391.26c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#m);" d="M91.48,411.57c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#n);" d="M91.48,419.17c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#o);" d="M91.48,428.25c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#p);" d="M91.48,440.06c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#q);" d="M91.48,450.71c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path></g><path style="fill:url(#r);" d="M70.84,127.87s-.02-17.57,0-20.15c.01-1.29,2.64,11.56,20.81,11.56s20.81-12.86,20.81-11.89c0,1.94-.04,330.65,0,333.41,.02,1.36-3.06,13.05-20.97,13.05s-20.87-11.69-20.81-13.05c.12-2.68,.17-312.94,.17-312.94Z"></path><path style="fill:url(#s);" d="M91.48,480.19c32.61,0,29.06-20.06,29.06-20.06l-8.1-18.08s-2.39,11.81-20.97,11.81-20.81-13.05-20.81-13.05l-8.26,19.32s-3.55,20.06,29.06,20.06Z"></path><path style="fill:url(#t);" d="M70.84,107.72s4.18,11.56,20.81,11.56,20.81-11.89,20.81-11.89c0,0-14.86-40.33-17.12-44.93s-6.38-3.6-7.87,0-16.63,45.27-16.63,45.27Z"></path></g><g id="u"><path style="fill:url(#v);" d="M131.16,17c2.99-4.19,17-17,18-17s12.08,8.58,17.78,17c14.22,21,27.22,38,27.22,62V411c0,33-92,31-91,0s-1-299,0-329,23-58,28-65Z"></path><path style="fill:url(#w); opacity:.22;" d="M131.05,17c2.99-4.19,17-17,18-17s12.08,8.58,17.78,17c14.22,21,27.22,38,27.22,62V411c0,33-92,31-91,0s-1-299,0-329,23-58,28-65Z"></path><path style="fill:url(#x);" d="M102.66,117.5s6,24,45.5,24,46-24,46-24l-.5,74s-12.5,15-45,15-46-15-46-15V117.5Z"></path><path style="fill:url(#y);" d="M149.05,0s9.4,5.19,17.78,17,27.22,35.73,27.22,62,.11,38.5,.11,38.5c0,0-1.15,6.16-9.28,12.79-6.39,5.2-16.71,11.21-36.72,11.21-45.5,0,.89-141.5,.89-141.5Z"></path><path style="fill:url(#z);" d="M147.97,1.5s-9.4,5.19-17.78,17c-8.38,11.81-27.22,35.73-27.22,62,0,26.27-.11,38.5-.11,38.5,0,0,1.84,8.63,15.38,15.74,6.82,3.58,15.4,6.75,30.63,6.75,45.5,0-.9-140-.9-140Z"></path><path style="fill:url(#aa);" d="M105.66,209.83l-2.46,202.5s.23,32.96,46.76,33.93c43.35,.91,46.66-21.97,46.66-21.97l.11-231.42-91.07,16.96Z"></path><path style="fill:url(#ab);" d="M193.63,138.78s-2.38,275.86-2.31,278.63c.03,1.35-9.7,16.7-33.71,16.62s-33.8-23.73-33.71-25.09c.14-2.12-14.71-164.59,11.97-234.48,7.01-18.36,41.9,7.85,57.76-35.68Z"></path></g><g><path style="fill:url(#ac);" d="M212.86,500.89l8.98,31.12s-3.3,10.51-20.97,10.46c-17.68-.05-21.18-10.93-21.18-10.93l9.38-29.9,23.8-.74Z"></path><path style="fill:url(#ad);" d="M200.9,531.62c16.6,0,20.97-4.48,20.97-4.48v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,4.48,20.64,4.48Z"></path><path style="fill:url(#ae);" d="M180.42,184.58s-.02-17.57,0-20.15,14.01-38.61,16.18-44.26,6.7-5.39,8.75,0c2.05,5.39,16.68,41.99,16.68,43.93s-.04,330.65,0,333.41,8.09,17.79,8.09,19.32,1.69,20.06-29.06,20.06-29.06-18.5-29.06-20.06,8.13-16.64,8.26-19.32,.17-312.94,.17-312.94Z"></path><g><path style="fill:url(#af);" d="M201.06,468.29c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#ag);" d="M201.06,475.89c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#ah);" d="M201.06,484.97c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#ai);" d="M201.06,496.78c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#aj);" d="M201.07,390.34c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#ak);" d="M201.07,447.98c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#al);" d="M201.07,315.12c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#am);" d="M201.07,239.82c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#an);" d="M201.07,203.16c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#ao);" d="M201.07,176.08c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path><path style="fill:url(#ap);" d="M201.06,507.47c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"></path></g><path style="fill:url(#aq);" d="M180.42,184.58s-.02-17.57,0-20.15c.01-1.29,2.64,11.56,20.81,11.56s20.81-12.86,20.81-11.89c0,1.94-.04,330.65,0,333.41,.02,1.36-3.06,13.05-20.97,13.05s-20.87-11.69-20.81-13.05c.12-2.68,.17-312.94,.17-312.94Z"></path><path style="fill:url(#ar);" d="M201.06,536.9c32.61,0,29.06-20.06,29.06-20.06l-8.1-18.08s-2.39,11.81-20.97,11.81-20.81-13.05-20.81-13.05l-8.26,19.32s-3.55,20.06,29.06,20.06Z"></path><path style="fill:url(#as);" d="M180.42,164.44s4.18,11.56,20.81,11.56,20.81-11.89,20.81-11.89c0,0-14.86-40.33-17.12-44.93s-6.38-3.6-7.87,0-16.63,45.27-16.63,45.27Z"></path></g><g><path style="fill:url(#at);" d="M32.69,439.07c-.14,2.86-2.97,10.79,15.3,12.66,17.94,1.43,19.6-8.7,19.6-8.7,0,0,3.28-21.39,3.85-27.96,.39-4.44-.33-10.13-1.07-16.32-.71-2.13-18.48-13.36-19.51-13.29-7.93,.55-10.9,6.5-12.66,10.9-1.45,3.62-5.38,39.85-5.51,42.72Z"></path><path style="fill:url(#au);" d="M106.84,454.41l3.26,19.01s-2.53,3.14-13.76,1.82-12.99-5.17-12.99-5.17l8.31-16.95,15.18,1.3Z"></path><path style="fill:url(#av);" d="M76.16,454.7l-1.28,20.7s-3.42,2.66-14.85-1.5-12.31-8.62-12.31-8.62l12.88-15.68,15.56,5.11Z"></path><path style="fill:url(#aw);" d="M81.49,464.75l.92,10.27s-1.48,1.56-7.41,.37c-5.93-1.19-6.7-3.32-6.7-3.32l5.16-8.67,8.03,1.35Z"></path><path style="fill:url(#ax); filter:url(#ay); stroke:#2b2b2b; stroke-miterlimit:10; stroke-width:2px;" d="M185.62,458.89l-94.24-40.73L18.5,351.66l-1.1-9.25,5.94-20.7,39.85-24,17.39-81.03s3.55-39.08,22.06-40.18,23.1,49.89,23.1,49.89l14.51,118.44,40.51,77.5,4.84,24.44v12.11Z"></path><line style="fill:none; stroke:#2b2b2b; stroke-miterlimit:10; stroke-width:.75px;" y2="426.74" x2="126.39" y1="448.76" x1="183.2"></line><line style="fill:none; stroke:#2b2b2b; stroke-miterlimit:10; stroke-width:.75px;" y2="342.41" x2="17.4" y1="368.13" x1="51.09"></line><text style="fill:#333; font-size:12.27px;" transform="translate(27.32 341.67) rotate(34.86) scale(1.05 .83) skewX(27.74)"><tspan style="font-family:Bahnschrift-Bold, Bahnschrift; font-variation-settings:'wght' 700, 'wdth' 100; font-weight:700; letter-spacing:0em;" y="0" x="0">U</tspan><tspan style="font-family:Bahnschrift-Bold, Bahnschrift; font-variation-settings:'wght' 700, 'wdth' 100; font-weight:700;" y="0" x="7.92">I</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:0em;" y="0" x="11.3">V</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100;" y="0" x="18.56">E</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:-.02em;" y="0" x="25.89">R</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:0em;" y="0" x="33.65">S</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100;" y="0" x="41.08">E</tspan></text><path style="fill:url(#ba);" d="M123.31,450.69s-12.22,5.01-20.31,5.45-27.69-1.87-36.99-3.63-18.17-7.27-18.17-7.27l-1.49-30.72,2.31-34.68s6.39-114.92,6.88-121.36,.41-18.29,1.21-25.12,8.31-31.4,9.06-32.72,3.66-3.44,3.66-3.44l9.08-22.79s1.32-1.93,7.27-9.41c3.07-3.87,8.37-10.11,13.21-10.4,4.52-.27,8.82,5.09,10.4,7.6,2.52,4,3.28,5.35,4.36,7.99s11.06,32.96,11.99,43.03,4.46,120.55,4.46,120.55l-6.94,116.92Z"></path><path style="fill:url(#bb);" d="M123.31,450.69s-12.22,5.01-20.31,5.45c-8.09,.44-27.69-1.87-36.99-3.63s-18.17-7.27-18.17-7.27l-1.49-30.72,2.31-34.68s6.39-114.92,6.88-121.36,.41-18.29,1.21-25.12,8.31-31.4,9.06-32.72,3.66-3.44,3.66-3.44l9.08-22.79s1.32-1.93,7.27-9.41c3.07-3.87,8.37-10.11,13.21-10.4,4.52-.27,8.82,5.09,10.4,7.6,2.52,4,3.28,5.35,4.36,7.99s11.06,32.96,11.99,43.03,4.46,120.55,4.46,120.55l-6.94,116.92Z"></path><polygon style="fill:url(#bc); stroke:#4c4c4c; stroke-miterlimit:10;" points="56.81 407.75 49.88 415.51 1.82 501.05 .5 504.69 .5 524.34 51.53 472.32 58.96 448.54 61.77 408.41 56.81 407.75"></polygon><polygon style="fill:url(#bd); stroke:#5b5b5b; stroke-miterlimit:10;" points="48.05 475.95 51.28 458.33 52.01 454.37 51.64 456.37 14.76 500.65 9.73 506.09 8.49 516.23 9.9 515.12 48.05 475.95"></polygon><path style="fill:url(#be);" d="M78.06,232.21c1.17,1.37-.73,7.04,.83,8.64,3.18,3.27,9.84,2.28,9.98,1.98,3.28-6.94,1.14-17.53-1.04-22.1s-7.68-9.41-7.95-9.55-3.12-3.98-3.3-4.07c-.5-.25-3.22,.25-3.22,.25,0,0-7.14,3.92-8.02,4.71-4.79,4.29-6.89,12.07-6.32,11.13,.51-.84,6.87-3.31,10.71-2.96,.76,.07,6.91,10.31,8.34,11.97Z"></path><path style="fill:none; stroke:#777574; stroke-miterlimit:10; stroke-width:.75px;" d="M78.27,248.23c.82-.21,3.44,1.21,6.65,1.57,4.12,.46,9.01-.06,9.99,.21,3.56,.95,3.3,8.34-.91,10.07-.87,.36-5.26,1-9.29,.7-3.3-.25-6.42-1.71-7.27-2.39-2.57-2.09-1.76-9.49,.83-10.16Z"></path><text style="fill:#666; font-family:Bahnschrift, Bahnschrift; font-size:5.69px; font-variation-settings:'wght' 400, 'wdth' 100;" transform="translate(121.16 383.28) rotate(28.29) scale(1.26 .89) skewX(19.94)"><tspan y="0" x="0">@ken</tspan><tspan style="letter-spacing:-.01em;" y="0" x="14.3">n</tspan><tspan style="letter-spacing:0em;" y="0" x="17.4">y</tspan><tspan style="letter-spacing:0em;" y="0" x="20.09">otsu</tspan></text><text style="fill:#333; font-size:12.31px;" transform="translate(120.21 399.04) rotate(28.29) scale(.98 .89) skewX(24.96)"><tspan style="font-family:Bahnschrift-Bold, Bahnschrift; font-variation-settings:'wght' 700, 'wdth' 100; font-weight:700; letter-spacing:0em;" y="0" x="0">U</tspan><tspan style="font-family:Bahnschrift-Bold, Bahnschrift; font-variation-settings:'wght' 700, 'wdth' 100; font-weight:700;" y="0" x="7.95">I</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:0em;" y="0" x="11.33">V</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100;" y="0" x="18.62">E</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:-.02em;" y="0" x="25.98">R</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:0em;" y="0" x="33.76">S</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100;" y="0" x="41.22">E</tspan></text><polygon style="fill:url(#bf); opacity:.82;" points="122.02 377.86 133.5 384.43 133.77 377.45 122.02 370.93 122.02 377.86"></polygon><path style="fill:url(#bg);" d="M61.77,455.26c-.14,2.86-2.97,10.79,15.3,12.66,17.94,1.43,19.6-8.7,19.6-8.7,0,0,3.28-21.39,3.85-27.96,.39-4.44-.33-10.13-1.07-16.32-.71-2.13-3.14-3.64-4.16-3.45-3.11,.57-17.2,2.93-20.86,4.28s-9.03,9.77-9.03,9.77c0,0-3.5,26.86-3.63,29.72Z"></path><path style="fill:url(#bh);" d="M99.03,154.6c15.8,0,23.06,42.39,25.97,53.78,.59,3.25,2.05,16.9,2.05,16.9,0,0-16.95-10.91-19.38-28.19s-12.66-23.72-18.17-24.39-13.29,7.56-13.29,7.56c0,0,.61-2.93,2.33-5.85,4.4-7.46,13.63-19.82,20.48-19.82Z"></path><text style="fill:#333; font-size:12.31px;" transform="translate(112.43 320.11) rotate(-88.85) scale(.98) skewX(13.92)"><tspan style="font-family:Bahnschrift-Bold, Bahnschrift; font-variation-settings:'wght' 700, 'wdth' 100; font-weight:700; letter-spacing:0em;" y="0" x="0">U</tspan><tspan style="font-family:Bahnschrift-Bold, Bahnschrift; font-variation-settings:'wght' 700, 'wdth' 100; font-weight:700;" y="0" x="7.95">I</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:0em;" y="0" x="11.33">V</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100;" y="0" x="18.62">E</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:-.02em;" y="0" x="25.98">R</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:0em;" y="0" x="33.76">S</tspan><tspan style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100;" y="0" x="41.22">E</tspan></text><path style="fill:url(#bi);" d="M61.77,455.26c-.14,2.86-2.97,10.79,15.3,12.66,17.94,1.43,19.6-8.7,19.6-8.7,0,0,3.28-21.39,3.85-27.96,.39-4.44-.33-10.13-1.07-16.32-.71-2.13-3.14-3.64-4.16-3.45-3.11,.57-17.2,2.93-20.86,4.28s-9.03,9.77-9.03,9.77c0,0-3.5,26.86-3.63,29.72Z"></path><line style="fill:#fff; stroke:#2b2b2b; stroke-miterlimit:10; stroke-width:.5px;" y2="426.74" x2="126.39" y1="432.01" x1="124.42"></line><path style="fill:url(#bj);" d="M91.12,170.73c2.47,.54,5.71-8.54,3.35-8.72s-5.82,8.18-3.35,8.72Z"></path><path style="fill:url(#bk);" d="M86.98,171.58c1.41,.66,4.25-6.41,2.87-6.77s-4.28,6.1-2.87,6.77Z"></path><path style="fill:url(#bl);" d="M94.44,172.88c2.08,.44,4.88-6.87,2.88-7.01s-4.96,6.57-2.88,7.01Z"></path></g></g></svg>
  </div>

</div>




<style>
/* From Uiverse.io by kennyotsu - Tags: complex, 3d, action, button, spaceship */
/* overengeneered pure css action button */
/* UIVERSE CSS Challenge entry */
/* by kennyotsu <3 */

/* container wraps everything together, applies general styles and does nothing else*/
.container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 200px;
  height: 200px;
  color: rgb(131, 131, 131);
  -webkit-transition: 400ms ease-in-out;
  transition: 400ms ease-in-out;
  transform: translateY(20px);
}
  
  /* clickHandler, as the name suggests, handles clicks. 
	 Its a label for invisible checkbox, positioned absolutely and taking whole container space.
	 Comes with insane z-index. Stays above .container
	 When clicked, will change input state to checked */
#shuttle-wrapper {
  position: absolute;
  opacity: 0;
  -webkit-transition: 200ms ease-in;
  transition: 200ms ease-in;
  z-index: 200;
}

#b {
  width: 80px;
  height: auto;
  z-index: 200;
}

#shadow {
  position: absolute;
  width: 100px;
  height: 80px;
  -webkit-transform: rotateX(45deg) rotateZ(45deg);
  transform: rotateX(45deg) rotateZ(45deg);
  bottom: -10px;
  z-index: -1;
  background: radial-gradient(rgba(0, 0, 0, 0.382) 0%, rgba(0, 0, 0, 0) 70%);
}

#clickHandler {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 999;
}

#clickHandler:hover {
  cursor: pointer;
}

.container:hover #shuttle-wrapper {
  opacity: 1;
  -webkit-transform: translateY(-100px) translateZ(140px);
  -ms-transform: translateY(-100px) translateZ(140px);
  transform: translateY(-100px) translateZ(140px);
  -webkit-transition: 400ms ease-in-out;
  transition: 400ms ease-in-out;
}

#checkbox {
	/* comment out to actually see the checkbox state */
  display: none;
	/*  */
  position: absolute;
  bottom: 0px;
  width: 200px;
}
  
  /* this pseudo-selectors will fire animations when 
	 clickHandler changes checkbox state to checked */
#checkbox:checked ~ #shuttle-wrapper #b {
  -webkit-animation-name: launch_31;
  animation-name: launch_31;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}

#checkbox:checked ~ #shuttle-wrapper #shadow {
  -webkit-animation: shadow-launch 6s ease-in-out;
  animation: shadow-launch 6s ease-in-out;
}

#checkbox:checked ~ #to-hover {
  -webkit-animation-name: fadeout_010;
  animation-name: fadeout_010;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}

#checkbox:checked ~ #button #to-launch {
  -webkit-animation-name: fadeout_010;
  animation-name: fadeout_010;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}
  /* and this will take care of hover */
#clickHandler:hover ~ #button {
  width: 200px;
  height: 200px;
  -webkit-transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
  transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
  -webkit-box-shadow: 2px 2px 0 2px #b2b2b2, -1px 0 28px 0 rgba(255, 250, 225, 0.512),
  28px 28px 28px 0 rgba(28, 27, 88, 0.315);
  box-shadow: 2px 2px 0 2px #b2b2b2, -1px 0 28px 0 rgba(255, 250, 225, 0.512),
  28px 28px 28px 0 rgba(28, 27, 88, 0.315);
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.container:hover {
  -webkit-transform: translateY(30%);
  -ms-transform: translateY(30%);
  transform: translateY(30%);
}

#to-launch {
  color: rgb(1, 85, 255);
  font-size: large;
  font-weight: bold;
  -webkit-transition: ease-out 200ms;
  transition: ease-out 200ms;
}

#to-hover {
  margin-top: 1em;
  text-align: center;
  -webkit-transition: ease-out 200ms;
  transition: ease-out 200ms;
}

#tag {
  opacity: 0;
  color: rgb(43, 43, 43);
  position: absolute;
}

#platform {
  position: absolute;
  width: 70%;
  height: 0;
  border-radius: 16px;
  background-color: rgb(234, 234, 234);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transition-delay: 150ms;
  transition-delay: 150ms;
  border: solid 0px rgba(42, 42, 42, 0);
  outline: dashed rgba(255, 173, 57, 0);
  -moz-outline-radius: 16px;
  outline-width: 0px;
  outline-offset: 0px;
}

#clickHandler:hover ~ #button #platform {
  height: 70%;
  background: rgb(244, 244, 244);
  border: solid 4px rgb(42, 42, 42);
  outline: dashed rgb(255, 172, 57);
  outline-width: 4px;
  outline-offset: -4px;
  -webkit-animation: shake_010 80ms infinite;
  animation: shake_010 80ms infinite;
}

.caution {
  -webkit-transform: translateY(-200);
  -ms-transform: translateY(-200);
  transform: translateY(-200);
  position: absolute;
  width: 100%;
  text-align: center;
}

#checkbox:checked ~ .caution {
  -webkit-animation-name: fadeout_010;
  animation-name: fadeout_010;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}

#caution-left {
  -webkit-transition: 200ms ease;
  transition: 200ms ease;
  opacity: 0;
  -webkit-transform: translate3d(83px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
  transform: translate3d(83px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
}

#caution-right {
  -webkit-transition: 200ms ease;
  transition: 200ms ease;
  opacity: 0;
  -webkit-transform: translate3d(0px, 62px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transform: translate3d(0px, 62px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#clickHandler:hover ~ #button .caution #caution-left {
  opacity: 1;
  -webkit-transition: 400ms ease-in;
  transition: 400ms ease-in;
  animation: glow_010 1.2s infinite;
}

#clickHandler:hover ~ #button .caution #caution-right {
  opacity: 1;
  -webkit-transition: 400ms ease-in;
  transition: 400ms ease-in;
  animation: glow_010 1.2s infinite;
}

#button {
  width: 200px;
  height: 80px;
  border: none;
  border-radius: 1.8rem;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  -webkit-box-shadow: 5px 5px 8px 0 rgba(28, 27, 88, 0.315);
  box-shadow: 5px 5px 8px 0 rgba(28, 27, 88, 0.315);
  background: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#ececec));
  background: linear-gradient(125deg, #ffffff 50%, #f5f5ff);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: inherit;
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
}

#clickHandler:hover ~ #button #to-launch {
  opacity: 0;
}

#clickHandler:hover ~ #to-hover {
  opacity: 0;
}

#checkbox:checked ~ #button #tag {
  -webkit-animation: tag-transition 5s ease-in-out;
  animation: tag-transition 5s ease-in-out;
}
  
  /* launch sequence, takes only 20% of duration to completely fade out,
	 and stays there til 90% */

@keyframes launch_31 {
  5% {
    opacity: 1;
  }

  15%, 90% {
    -webkit-transform: translateY(-200px);
    transform: translateY(-200px);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes shadow-launch {
  0% {
    opacity: 1;
  }

  10%, 90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeout_010 {
  100% {
    opacity: 1;
  }

  0%, 20%, 90% {
    opacity: 0;
  }
}

@keyframes shake_010 {
  0%, 50% {
    -webkit-transform: translate3d(1px, 0px, 0px);
    transform: translate3d(1px, 0px, 0px);
  }

  100% {
    -webkit-transform: translate3d(0px, 1px, 0px);
    transform: translate3d(0px, 1px, 0px);
  }
}

@keyframes glow_010 {
  0% {
    color: rgb(94, 94, 94);
    -webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
    filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
  }

  70% {
    color: rgba(255, 255, 255, 0);
  }

  100% {
    color: rgb(94, 94, 94);
    -webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
    filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
  }
}

@keyframes tag-transition {
  0%, 100% {
    opacity: 0;
  }

  20%, 80% {
    opacity: 1;
  }
}

.noselect {
  -webkit-touch-callout: none;
   /* iOS Safari */
  -webkit-user-select: none;
   /* Safari */
   /* Konqueror HTML */
  -moz-user-select: none;
   /* Old versions of Firefox */
  -ms-user-select: none;
   /* Internet Explorer/Edge */
  user-select: none;
   /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
}
</style>


================================================
FILE: Buttons/kevkevkevin_bright-monkey-48.html
================================================
<button class="button">
  HOVER ME 🙈
</button>
<style>
/* From Uiverse.io by kevkevkevin - Tags: button, hover, creative, css, css effect, hoverme */
.button {
  border: 2px solid #246bfd;
  color: #101a29;
  line-height: 52px;
  border-radius: 30px;
  font-weight: 600;
  height: 55px;
  overflow: hidden;
  padding: 0 30px;
  position: relative;
  transition: all .5s ease;
  z-index: 0;
}

button:after {
  content: "";
  height: 100%;
  left: -35%;
  position: absolute;
  top: 0;
  background: #246bfd;
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
  -webkit-transform-origin: top left;
  transform-origin: top left;
  transition: all .3s ease-in;
  transition-duration: .6s;
  width: 0;
  z-index: -1;
}

button:hover {
  color: #fff;
  background-color: #ffffff00;
  border-color: #ffffff00;
}

button:hover:after {
  height: 100%;
  width: 135%;
}
</style>


================================================
FILE: Buttons/kevkevkevin_tall-horse-10.html
================================================
<button class="button">
  Hover me 🥹
</button>
<style>
/* From Uiverse.io by kevkevkevin - Tags: button, creative */
.button {
  font-size: 16px;
  font-weight: 700;
  color: #292930;
  background: #ffdc60;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 0 50px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 10px;
  text-transform: capitalize;
  cursor: pointer;
  border: none;
  box-shadow: 0px 0px 77px 12px rgba(0,0,0,0.13);
  -webkit-box-shadow: 0px 0px 77px 12px rgba(0,0,0,0.13);
  -moz-box-shadow: 0px 0px 77px 12px rgba(0,0,0,0.13);
}

button:before, button:after {
  content: "";
  background: #5956e9;
  height: 50%;
  width: 0;
  position: absolute;
  transition: .3s cubic-bezier(.785,.135,.15,.86);
  -webkit-transition: .3s cubic-bezier(.785,.135,.15,.86);
  z-index: -1;
}

button::before {
  top: 0;
  left: 0;
  right: auto;
}

button:after {
  bottom: 0;
  right: 0;
  left: auto;
}

button:hover {
  color: #fff;
  background-color: #57c9da;
}

button:hover:before {
  width: 100%;
  right: 0;
  left: auto;
}

button:hover::after {
  width: 100%;
  left: 0;
  right: auto;
}

</style>


================================================
FILE: Buttons/killiandvcz_giant-turkey-14.html
================================================
<button>
    ✨ Let's  go !
</button>
<style>
/* From Uiverse.io by killiandvcz - Tags: button */
button {
  padding: 7px 25px;
  border: none;
  background: linear-gradient(-15deg, rgb(31, 33, 124) 0 50%, rgb(202, 76, 214) 90% 95%, rgb(221, 36, 83) 100%);
  box-shadow: inset rgba(255, 255, 255, 0.418) 3px 3px 5px;
  color: white;
  font-family: 'Lora', serif;
  font-style: italic;
  border-radius: 50px;
  transition: all .4s;
}

button:hover {
  box-shadow: inset rgba(255, 255, 255, 0.473) 4px 4px 5px;
}
</style>


================================================
FILE: Buttons/kiru2741_silly-yak-73.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by kiru2741 - Tags: button */
button {
 padding: 10px;
 font-size: 15px;
 outline: none;
 border: 2px solid black;
 background-color: white;
 color: white;
 position: relative;
 letter-spacing: 1px;
}

button::before {
 content: 'Button';
 /*Button's value/text-content */
 position: absolute;
 top: -14%;
 left: 7%;
 background-color: black;
 width: 100%;
 height: 100%;
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: 0.15s ease-in-out;
 font-weight: bold;
}

button:hover::before {
 top: 0;
 left: 0;
}
</style>


================================================
FILE: Buttons/kirzin_selfish-kangaroo-64.html
================================================
<button> HOVER ME
</button>
<style>
/* From Uiverse.io by kirzin - Tags: gradient, button */
button {
  text-decoration: none;
  position: relative;
  border: none;
  font-size: 14px;
  font-family: inherit;
  color: #fff;
  width: 9em;
  height: 3em;
  line-height: 2em;
  text-align: center;
  background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size: 300%;
  border-radius: 30px;
  z-index: 1;
}

button:hover {
  animation: ani 8s linear infinite;
  border: none;
}

@keyframes ani {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 400%;
  }
}

button:before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size: 400%;
  border-radius: 35px;
  transition: 1s;
}

button:hover::before {
  filter: blur(20px);
}

button:active {
  background: linear-gradient(32deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
}
</style>


================================================
FILE: Buttons/kleenpulse_dangerous-horse-41.html
================================================
<button class="btn">
    Button
</button>
<style>
/* From Uiverse.io by kleenpulse - Tags: gradient, button */
.btn {
  --border-color: linear-gradient(-45deg, #ffae00, #7e03aa, #00fffb);
  --border-width: .125em;
  --curve-size: .5em;
  --blur: 30px;
  --bg: #080312;
  --color: #afffff;
  color: var(--color);
    /* use position: relative; so that BG is only for .btn */
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-content: center;
  padding: .5em 1.5em;
  font-size: 17px;
  border: 0;
  text-transform: uppercase;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, .6);
  clip-path: polygon(
            /* Top-left */
            0% var(--curve-size),

            var(--curve-size) 0,
            /* top-right */
            100% 0,
            100% calc(100% - var(--curve-size)),

            /* bottom-right 1 */
            calc(100% - var(--curve-size)) 100%,
            /* bottom-right 2 */
            0 100%);
  transition: color 250ms;
}

.btn::after,
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
}

.btn::before {
  background: var(--border-color);
  background-size: 300% 300%;
  animation: move-bg7234 5s ease infinite;
  z-index: -2;
}

@keyframes move-bg7234 {
  0% {
    background-position: 31% 0%
  }

  50% {
    background-position: 70% 100%
  }

  100% {
    background-position: 31% 0%
  }
}

.btn::after {
  background: var(--bg);
  z-index: -1;
  clip-path: polygon(
            /* Top-left */
            var(--border-width) 
            calc(var(--curve-size) + var(--border-width) * .5),

            calc(var(--curve-size) + var(--border-width) * .5) var(--border-width),

            /* top-right */
            calc(100% - var(--border-width)) 
            var(--border-width),

            calc(100% - var(--border-width)) 
            calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),

            /* bottom-right 1 */
            calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)),
            /* bottom-right 2 */
            var(--border-width) calc(100% - var(--border-width)));
  transition: clip-path 500ms;
}

.btn:where(:hover, :focus)::after {
  clip-path: polygon(
                /* Top-left */
                calc(100% - var(--border-width)) 

                calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
    
                calc(100% - var(--border-width))

                var(--border-width),
    
                /* top-right */
                calc(100% - var(--border-width))

                 var(--border-width),
    
                calc(100% - var(--border-width)) 

                calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),
    
                /* bottom-right 1 */
                calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) 
                calc(100% - var(--border-width)),

                /* bottom-right 2 */
                calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
                calc(100% - var(--border-width)));
  transition: 200ms;
}

.btn:where(:hover, :focus) {
  color: #fff;
}
</style>


================================================
FILE: Buttons/kosedagyazilim_quick-snail-70.html
================================================
<button class="button">Button</button>
<style>
/* From Uiverse.io by kosedagyazilim - Tags: button */
.button {
  display: inline-block;
  padding: 12px 28px;
  margin: 10px;
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  background-image: linear-gradient(to bottom right, #00c6ff, #0072ff);
  border: none;
  border-radius: 40px;
  box-shadow: 0px 4px 0px #0072ff;
  transition: all 0.2s ease-in-out;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0px 6px 0px #0072ff;
}

.button:active {
  transform: translateY(0px);
  box-shadow: none;
  background-image: linear-gradient(to bottom right, #0072ff, #00c6ff);
}

.button:before,
.button:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.button:before {
  top: -3px;
  left: -3px;
  border-radius: 40px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
}

.button:after {
  bottom: -3px;
  right: -3px;
  border-radius: 40px;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
}


</style>


================================================
FILE: Buttons/krlozCJ_blue-dodo-17.html
================================================
<button>
    Click me
</button>
<style>
/* From Uiverse.io by krlozCJ - Tags: button */
button {
  border: none;
  outline: none;
  background-color: #6c5ce7;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border-radius: 5px;
  transition: all ease 0.1s;
  box-shadow: 0px 5px 0px 0px #a29bfe;
}

button:active {
  transform: translateY(5px);
  box-shadow: 0px 0px 0px 0px #a29bfe;
}
</style>


================================================
FILE: Buttons/kuzanaa_young-rat-5.html
================================================
<!-- From Uiverse.io by kuzanaa - Tags: button, advanced, #button -->
<button class="relative group overflow-hidden px-6 h-12 rounded-full flex space-x-2 items-center bg-gradient-to-r from-pink-500 to-purple-500 hover:to-purple-600">
          <span class="relative text-sm text-white">Get Started</span>
          <div class="flex items-center -space-x-3 translate-x-3">
            <div class="w-2.5 h-[1.6px] rounded bg-white origin-left scale-x-0 transition duration-300 group-hover:scale-x-100"></div>
            <svg stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" fill="none" class="h-5 w-5 stroke-white -translate-x-2 transition duration-300 group-hover:translate-x-0" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 5l7 7-7 7" stroke-linejoin="round" stroke-linecap="round"></path>
            </svg>
          </div>
        </button>



================================================
FILE: Buttons/kyle1dev_chilly-goose-0.html
================================================
<button class="elegant-button">Click Me</button>

<style>
/* From Uiverse.io by kyle1dev  - Tags: button */
.elegant-button {
  background: linear-gradient(45deg, #00bfff, #1e90ff);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 24px;
  cursor: pointer;
  outline: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.elegant-button:hover {
  background: linear-gradient(45deg, #1e90ff, #00bfff);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
}
.elegant-button:active {
  background: linear-gradient(45deg, #00bfff, #1e90ff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
}

</style>
    

================================================
FILE: Buttons/laminelawal_sharp-dodo-86.html
================================================
<button class="button">
  Click Me
</button>
<style>
/* From Uiverse.io by laminelawal - Tags: button, 3d button */
button {
  border-radius: 30px;
  border: none;
  cursor: pointer;
  outline: none;
  width: 150px;
  height: 54px;
  background-image: linear-gradient(to top, #222 0%, #333 80%, #444 100%);
  color: white;
  font-size: 20px;
  font-weight: 400;
  font-family: monospace;
  transition: all 0.3s;
  text-shadow: 0 4px 3px black;
}

button:hover {
  box-shadow: 0 4px 3px 1px #333, 0 6px 8px #222, 0 -4px 4px #222, 0 -6px 4px #333, inset 0 0 3px 3px black;
}

button:active {
  box-shadow: 0 4px 3px 1px #333, 0 6px 8px #222, 0 -4px 4px #222, 0 -6px 4px #333, inset 0 0 3px 3px black;
}

button:focus {
  box-shadow: 0 4px 3px 1px #333, 0 6px 8px #222, 0 -4px 4px #222, 0 -6px 4px #333, inset 0 5px 7px 0   black;
}

</style>


================================================
FILE: Buttons/laminelawal_wise-turtle-66.html
================================================
<div class="frame">
  <div class="center">
		<button>Hover me</button>
  </div>
</div>
<style>
/* From Uiverse.io by laminelawal - Tags: alert, button, 2d button */
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

button {
  padding: 15px 15px;
  border: none;
  width: 170px;
  height: 55px;
  box-shadow: 15px 15px darkblue;
  cursor: pointer;
  transition: 0.5s ease;
  background: lightgray;
  font-size: 18px;
  font-weight: bolder;
  text-transform: uppercase;
}

button:hover {
  box-shadow: -15px -15px lightgray;
  transform: translate(15px, 15px);
  background: darkblue;
  color: white;
}
</style>


================================================
FILE: Buttons/learnMyHobby_dangerous-sheep-52.html
================================================
<button>
  <span>Hover</span>
</button>
<style>
/* From Uiverse.io by learnMyHobby - Tags: button */
button {
 position: relative;
 text-decoration: none;
 font-size: 15px;
 text-transform: uppercase;
 letter-spacing: 5px;
 line-height: 48px;
 width: 160px;
 font-weight: bold;
 height: 55px;
 -webkit-box-reflect: bottom 1px linear-gradient(transparent, #0004);
}

button span {
 position: absolute;
 display: flex;
 justify-content: center;
 top: 4px;
 right: 4px;
 bottom: 4px;
 left: 4px;
 text-align: center;
 background: #2E2E2E;
 color: rgba(255, 255, 255, 0.781);
 transition: 0.5s;
 z-index: 1;
}

button:hover span {
 color: rgba(255,255,255,1);
}

button::before {
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background-size: 400%;
 opacity: 0;
 transition: 0.5s;
 background: linear-gradient(45deg,#91155d,#525296,#0f0,#ff0,#fb0094,#00f,#0f0,#ff0);
 animation: animate123 20% linear infinte;
}

button::after {
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background-size: 400%;
 filter: blur(20px);
 transition: 0.5s;
 background: linear-gradient(45deg,#91155d,#525296,#0f0,#ff0,#fb0094,#00f,#0f0,#ff0);
 animation: animate123 20% linear infinte;
}

button:hover::before,
button:hover::after {
 opacity: 1;
}

@keyframes animate123 {
 0% {
  background-position: 0 0;
 }

 50% {
  background-position: 300% 0;
 }

 100% {
  background-position: 0 0;
 }
}

button span::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 50%;
 background: rgba(255,255,255,0.1);
}
</style>


================================================
FILE: Buttons/lenfear23_empty-lion-5.html
================================================
<button>
    Button
</button>
<style>
/* From Uiverse.io by lenfear23 - Tags: button */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  cursor: pointer;
  width: 150px;
  height: 50px;
  background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
  border-radius: 30px;
  border: 1px solid #8F9092;
  transition: all 0.2s ease;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #606060;
  text-shadow: 0 1px #fff;
}

button:hover {
  box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;
}

button:active {
  box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

button:focus {
  box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}



</style>


================================================
FILE: Buttons/lenfear23_terrible-walrus-31.html
================================================
<button>
    Button
</button>
<style>
/* From Uiverse.io by lenfear23 - Tags: neumorphism, button */
button {
  margin: 12px;
  height: 50px;
  width: 120px;
  border-radius: 10px;
  background: #333;
  justify-content: center;
  align-items: center;
  box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 10px #444, inset -5px -5px 10px #222;
  font-family: 'Damion', cursive;
  border: none;
  font-size: 16px;
  color: rgb(161, 161, 161);
  transition: 500ms;
}

button:hover {
  box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 10px #222, inset -5px -5px 10px #444;
  color: #d6d6d6;
  transition: 500ms;
}
</style>


================================================
FILE: Buttons/levxyca_tidy-mayfly-7.html
================================================
<button>
    Button
</button>
<style>
/* From Uiverse.io by levxyca - Tags: button */
button {
  font-family: monospace;
  font-size: 1.5rem;
  color: #FAFAFA;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 10px;
  border: 2px solid #FAFAFA;
  background: #252525;
  box-shadow: 3px 3px #fafafa;
  cursor: pointer;
  margin: 35px 0;
}

button:active {
  box-shadow: none;
  transform: translate(3px, 3px);
}
</style>


================================================
FILE: Buttons/linkb15_funny-robin-11.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by linkb15 - Tags: button */
button {
  --min-width: 180px;
  --min-height: 42px;
  --ring-min-size: 20px;
  --ring-max-size: 150px;
  --ring-width: 3px;
  --main-bg-color: #814fd1;
  --gradient-bg-color-1: rgb(222, 203, 226);
  --gradient-bg-color-2: rgb(79, 131, 209);
  --ring-color: #6f00ff;
  --shadow-color: rgba(79, 99, 209, 0.64);
  --hover-shadow-color: rgba(79, 99, 209, 0.64);
  --main-fg-color: #313133;
  --hover-fg-color: rgb(38, 11, 53);
  min-width: var(--min-width);
  min-height: var(--min-height);
  font-size: 17px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--main-fg-color);
  background: var(--main-bg-color);
  background: linear-gradient(66deg, var(--gradient-bg-color-1) 0%, var(--gradient-bg-color-2) 100%);
  border: none;
  border-radius: 999px;
  box-shadow: 12px 2px 24px var(--shadow-color);
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 10px;
}

button::before {
  content: '';
  border-radius: 999px;
  min-width: calc(var(--min-width) + 12px);
  min-height: calc(var(--min-height) + 12px);
  border: var(--ring-width) solid var(--ring-color);
  box-shadow: 0 0 60px var(--hover-shadow-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;
}

button:hover, .button:focus {
  color: var(--hover-fg-color);
  transform: translateY(-6px);
}

button:active {
  color: var(--main-fg-color);
  transform: scale(0.95);
}

button:active::before {
  border: 0px solid var(--ring-color);
}

button:hover::before, button:focus::before {
  opacity: 1;
}

/* ring */
button::after {
  content: '';
  width: var(--ring-min-size);
  height: var(--ring-min-size);
  border-radius: 100%;
  border: var(--ring-width) solid var(--ring-color);
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

button:hover::after, button:focus::after {
  animation: none;
  display: none;
}

@keyframes ring {
  0% {
    width: var(--ring-min-size);
    height: var(--ring-min-size);
    opacity: 0.5;
  }

  100% {
    width: var(--ring-max-size);
    height: var(--ring-max-size);
    opacity: 0;
  }
}
</style>


================================================
FILE: Buttons/louloudev59_shy-earwig-22.html
================================================
<!-- From Uiverse.io by louloudev59 - Source: louloudev59 - Tags: button, animated, tailwind -->
<button class="bg-gradient-to-r from-yellow-300 to-red-500 hover:from-yellow-500 hover:to-red-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:text-white shadow-white transform transition-all duration-500 ease-in-out hover:scale-110 hover:brightness-110 hover:animate-pulse active:animate-bounce">
  Keep Holdig
</button>




================================================
FILE: Buttons/louloudev59_swift-puma-88.html
================================================
    <button class="snapchat-btn">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-snapchat" viewBox="0 0 16 16">
        <path d="M15.943 11.526c-.111-.303-.323-.465-.564-.599a1.416 1.416 0 0 0-.123-.064l-.219-.111c-.752-.399-1.339-.902-1.746-1.498a3.387 3.387 0 0 1-.3-.531c-.034-.1-.032-.156-.008-.207a.338.338 0 0 1 .097-.1c.129-.086.262-.173.352-.231.162-.104.289-.187.371-.245.309-.216.525-.446.66-.702a1.397 1.397 0 0 0 .069-1.16c-.205-.538-.713-.872-1.329-.872a1.829 1.829 0 0 0-.487.065c.006-.368-.002-.757-.035-1.139-.116-1.344-.587-2.048-1.077-2.61a4.294 4.294 0 0 0-1.095-.881C9.764.216 8.92 0 7.999 0c-.92 0-1.76.216-2.505.641-.412.232-.782.53-1.097.883-.49.562-.96 1.267-1.077 2.61-.033.382-.04.772-.036 1.138a1.83 1.83 0 0 0-.487-.065c-.615 0-1.124.335-1.328.873a1.398 1.398 0 0 0 .067 1.161c.136.256.352.486.66.701.082.058.21.14.371.246l.339.221a.38.38 0 0 1 .109.11c.026.053.027.11-.012.217a3.363 3.363 0 0 1-.295.52c-.398.583-.968 1.077-1.696 1.472-.385.204-.786.34-.955.8-.128.348-.044.743.28 1.075.119.125.257.23.409.31a4.43 4.43 0 0 0 1 .4.66.66 0 0 1 .202.09c.118.104.102.26.259.488.079.118.18.22.296.3.33.229.701.243 1.095.258.355.014.758.03 1.217.18.19.064.389.186.618.328.55.338 1.305.802 2.566.802 1.262 0 2.02-.466 2.576-.806.227-.14.424-.26.609-.321.46-.152.863-.168 1.218-.181.393-.015.764-.03 1.095-.258a1.14 1.14 0 0 0 .336-.368c.114-.192.11-.327.217-.42a.625.625 0 0 1 .19-.087 4.446 4.446 0 0 0 1.014-.404c.16-.087.306-.2.429-.336l.004-.005c.304-.325.38-.709.256-1.047Zm-1.121.602c-.684.378-1.139.337-1.493.565-.3.193-.122.61-.34.76-.269.186-1.061-.012-2.085.326-.845.279-1.384 1.082-2.903 1.082-1.519 0-2.045-.801-2.904-1.084-1.022-.338-1.816-.14-2.084-.325-.218-.15-.041-.568-.341-.761-.354-.228-.809-.187-1.492-.563-.436-.24-.189-.39-.044-.46 2.478-1.199 2.873-3.05 2.89-3.188.022-.166.045-.297-.138-.466-.177-.164-.962-.65-1.18-.802-.36-.252-.52-.503-.402-.812.082-.214.281-.295.49-.295a.93.93 0 0 1 .197.022c.396.086.78.285 1.002.338.027.007.054.01.082.011.118 0 .16-.06.152-.195-.026-.433-.087-1.277-.019-2.066.094-1.084.444-1.622.859-2.097.2-.229 1.137-1.22 2.93-1.22 1.792 0 2.732.987 2.931 1.215.416.475.766 1.013.859 2.098.068.788.009 1.632-.019 2.065-.01.142.034.195.152.195a.35.35 0 0 0 .082-.01c.222-.054.607-.253 1.002-.338a.912.912 0 0 1 .197-.023c.21 0 .409.082.49.295.117.309-.04.56-.401.812-.218.152-1.003.638-1.18.802-.184.169-.16.3-.139.466.018.14.413 1.991 2.89 3.189.147.073.394.222-.041.464Z"></path>
      </svg>
      <span class="snapchat-text">Visit Snapchat</span>
    </button>
<style>
/* From Uiverse.io by louloudev59 - Tags: button, hover, hover effect, snapchat */
.snapchat-link {
  display: inline-block;
}

.snapchat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: yellow;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  color: black;
  text-decoration: none;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.snapchat-btn svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.snapchat-btn:hover {
  padding: 10px 20px;
}

.snapchat-btn:hover svg {
  display: none;
}

.snapchat-text {
  opacity: 0;
  transition: opacity 0.3s;
}

.snapchat-btn:hover .snapchat-text {
  opacity: 1;
}

</style>


================================================
FILE: Buttons/lumamantelli_happy-falcon-35.html
================================================
<!-- From Uiverse.io by lumamantelli - Tags: button, focus, #button -->
<button class="cursor-pointer inline-flex items-center rounded-full 
px-9 py-3 text-xl font-mono font-semibold text-rose-600 hover:text-white border-2 border-rose-600 hover:bg-rose-600 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-75 duration-300 focus:bg-transparent focus:text-rose-600">
  Button
</button>



================================================
FILE: Buttons/lumamantelli_itchy-elephant-94.html
================================================
<!-- From Uiverse.io by lumamantelli - Tags: button, focus -->
<button class="cursor-pointer inline-flex items-center rounded-full px-9 py-3 text-xl font-mono font-semibold text-rose-600 hover:text-white border-2 border-rose-600
hover:bg-rose-600 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-75 hover:bg-rose-600 duration-300  focus:bg-transparent">
  BUTTON
</button>




================================================
FILE: Buttons/mRcOol7_quiet-moth-18.html
================================================
<button class="ring-futuristic-button">Click Me</button>

<style>
/* From Uiverse.io by mRcOol7  - Tags: button, ring, futuristic */
.ring-futuristic-button {
  width: 200px;
  height: 60px;
  background: linear-gradient(to bottom right, #ff7e5f, #feb47b);
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 1px;
  transition: transform 0.5s, background 0.5s, color 0.3s, box-shadow 0.3s;
  position: relative;
  z-index: 1;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.ring-futuristic-button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-sizing: border-box;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.5s, opacity 0.5s;
}

.ring-futuristic-button:hover {
  background: linear-gradient(to bottom right, #feb47b, #ff7e5f);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.ring-futuristic-button:hover::before {
  opacity: 1;
  transform: scale(2);
}

.ring-futuristic-button:active {
  transform: scale(0.95);
  transition: transform 0.1s;
}

</style>
    

================================================
FILE: Buttons/mRcOol7_rotten-yak-63.html
================================================
<button
  aria-label="Send Message"
  class="button relative overflow-hidden flex items-center px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 border border-transparent rounded-full shadow-lg text-white cursor-pointer transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-50 focus:scale-105 active:scale-95"
>
  <div class="ripple"></div>
  <svg
    class="relative w-12 h-12 mr-2 z-10 transition-transform duration-300 ease-in-out transform hover:rotate-12 shadow-sm transition-colors duration-300 ease-in-out"
    preserveAspectRatio="xMidYMid meet"
    viewBox="0 0 36.000000 75.000000"
    height="80pt"
    width="80pt"
    xmlns="http://www.w3.org/2000/svg"
    version="1.0"
  >
    <g
      stroke="none"
      fill="#ffffff"
      transform="translate(0.000000,75.000000) scale(0.100000,-0.100000)"
    >
      <path
        d="M188 481 c-42 -15 -84 -34 -93 -41 -27 -22 -14 -53 31 -74 30 -14 46  -30 60 -60 23 -50 55 -59 78 -24 24 36 56 137 56 174 0 23 -6 37 -19 44 -25 13 -23 13 -113 -19z m110 -20 c4 -28 -37 -158 -55 -173 -17 -14 -39 4 -48 39 -4 19 0 35 14 54 30 41 26 47 -9 14 -30 -29 -30 -29 -65 -12 -58 28 -47 42 65 81 41 14 80 24 85 22 6 -1 11 -13 13 -25z"
      ></path>
    </g>
  </svg>
  <svg
    class="relative w-8 h-8 mr-2 z-10 transition-transform duration-300 ease-in-out transform hover:rotate-12 shadow-sm transition-colors duration-300 ease-in-out"
    preserveAspectRatio="xMidYMid meet"
    viewBox="0 0 36.000000 75.000000"
    height="80pt"
    width="80pt"
    xmlns="http://www.w3.org/2000/svg"
    version="1.0"
  >
    <g
      stroke="none"
      fill="#ffffff"
      transform="translate(0.000000,75.000000) scale(0.100000,-0.100000)"
    >
      <path
        d="M100 300 l0 -300 30 0 30 0 0 300 0 300 -30 0 -30 0 0 -300z"
      ></path>
    </g>
  </svg>
  <span
    class="relative z-10 font-semibold text-lg transition-all duration-300 ease-in-out"
    >Send Message</span
  >
</button>

<style>
/* From Uiverse.io by mRcOol7  - Tags: button, #button, button hover effect  */
.button {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(to right, #3b82f6, #9333ea);
  border: none;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  color: white;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.button:active {
  transform: scale(0.95);
}

.button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
}

.button svg {
  width: 3rem;
  height: 3rem;
  margin-right: 0.5rem;
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.button:hover svg {
  transform: rotate(20deg) scale(1.1);
  filter: drop-shadow(0 0 10px #ffd700);
}

.button span {
  font-size: 1.125rem;
  font-weight: 600;
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out,
    text-shadow 0.3s ease-in-out;
}

.button:hover span {
  color: #ffd700;
  text-shadow: 0 0 10px #ffd700;
}

.button .text-md {
  font-size: 1rem;
  margin-left: 0.5rem;
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out,
    text-shadow 0.3s ease-in-out;
}

.button:hover .text-md {
  color: #ffd700;
  text-shadow: 0 0 10px #ffd700;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: ripple 1s linear infinite;
  pointer-events: none;
}

.button:active .ripple {
  animation: ripple-on-click 0.6s linear;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes ripple-on-click {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

</style>
    

================================================
FILE: Buttons/marcelodolza_fat-zebra-11.html
================================================
<button class="button">
  <div class="outline"></div>
  <div class="state state--default">
    <div class="icon">
      <svg
        width="1em"
        height="1em"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g style="filter: url(#shadow)">
          <path
            d="M14.2199 21.63C13.0399 21.63 11.3699 20.8 10.0499 16.83L9.32988 14.67L7.16988 13.95C3.20988 12.63 2.37988 10.96 2.37988 9.78001C2.37988 8.61001 3.20988 6.93001 7.16988 5.60001L15.6599 2.77001C17.7799 2.06001 19.5499 2.27001 20.6399 3.35001C21.7299 4.43001 21.9399 6.21001 21.2299 8.33001L18.3999 16.82C17.0699 20.8 15.3999 21.63 14.2199 21.63ZM7.63988 7.03001C4.85988 7.96001 3.86988 9.06001 3.86988 9.78001C3.86988 10.5 4.85988 11.6 7.63988 12.52L10.1599 13.36C10.3799 13.43 10.5599 13.61 10.6299 13.83L11.4699 16.35C12.3899 19.13 13.4999 20.12 14.2199 20.12C14.9399 20.12 16.0399 19.13 16.9699 16.35L19.7999 7.86001C20.3099 6.32001 20.2199 5.06001 19.5699 4.41001C18.9199 3.76001 17.6599 3.68001 16.1299 4.19001L7.63988 7.03001Z"
            fill="currentColor"
          ></path>
          <path
            d="M10.11 14.4C9.92005 14.4 9.73005 14.33 9.58005 14.18C9.29005 13.89 9.29005 13.41 9.58005 13.12L13.16 9.53C13.45 9.24 13.93 9.24 14.22 9.53C14.51 9.82 14.51 10.3 14.22 10.59L10.64 14.18C10.5 14.33 10.3 14.4 10.11 14.4Z"
            fill="currentColor"
          ></path>
        </g>
        <defs>
          <filter id="shadow">
            <fedropshadow
              dx="0"
              dy="1"
              stdDeviation="0.6"
              flood-opacity="0.5"
            ></fedropshadow>
          </filter>
        </defs>
      </svg>
    </div>
    <p>
      <span style="--i:0">S</span>
      <span style="--i:1">e</span>
      <span style="--i:2">n</span>
      <span style="--i:3">d</span>
      <span style="--i:4">M</span>
      <span style="--i:5">e</span>
      <span style="--i:6">s</span>
      <span style="--i:7">s</span>
      <span style="--i:8">a</span>
      <span style="--i:9">g</span>
      <span style="--i:10">e</span>
    </p>
  </div>
  <div class="state state--sent">
    <div class="icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="1em"
        width="1em"
        stroke-width="0.5px"
        stroke="black"
      >
        <g style="filter: url(#shadow)">
          <path
            fill="currentColor"
            d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z"
          ></path>
          <path
            fill="currentColor"
            d="M10.5795 15.5801C10.3795 15.5801 10.1895 15.5001 10.0495 15.3601L7.21945 12.5301C6.92945 12.2401 6.92945 11.7601 7.21945 11.4701C7.50945 11.1801 7.98945 11.1801 8.27945 11.4701L10.5795 13.7701L15.7195 8.6301C16.0095 8.3401 16.4895 8.3401 16.7795 8.6301C17.0695 8.9201 17.0695 9.4001 16.7795 9.6901L11.1095 15.3601C10.9695 15.5001 10.7795 15.5801 10.5795 15.5801Z"
          ></path>
        </g>
      </svg>
    </div>
    <p>
      <span style="--i:5">S</span>
      <span style="--i:6">e</span>
      <span style="--i:7">n</span>
      <span style="--i:8">t</span>
    </p>
  </div>
</button>

<style>
/* From Uiverse.io by marcelodolza  - Tags: simple, neumorphism, skeuomorphism, animation, minimalist, button, css, box-shadow */
.button {
  --primary: #ff5569;
  --neutral-1: #f7f8f7;
  --neutral-2: #e7e7e7;
  --radius: 14px;

  cursor: pointer;
  border-radius: var(--radius);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border: none;
  box-shadow: 0 0.5px 0.5px 1px rgba(255, 255, 255, 0.2),
    0 10px 20px rgba(0, 0, 0, 0.2), 0 4px 5px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  min-width: 200px;
  padding: 20px;
  height: 68px;
  font-family: "Galano Grotesque", Poppins, Montserrat, sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
}
.button:hover {
  transform: scale(1.02);
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
    0 15px 30px rgba(0, 0, 0, 0.3), 0 10px 3px -3px rgba(0, 0, 0, 0.04);
}
.button:active {
  transform: scale(1);
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
    0 10px 3px -3px rgba(0, 0, 0, 0.2);
}
.button:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 2.5px solid transparent;
  background: linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box,
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45))
      border-box;
  z-index: 0;
  transition: all 0.4s ease;
}
.button:hover::after {
  transform: scale(1.05, 1.1);
  box-shadow: inset 0 -1px 3px 0 rgba(255, 255, 255, 1);
}
.button::before {
  content: "";
  inset: 7px 6px 6px 6px;
  position: absolute;
  background: linear-gradient(to top, var(--neutral-1), var(--neutral-2));
  border-radius: 30px;
  filter: blur(0.5px);
  z-index: 2;
}
.state p {
  display: flex;
  align-items: center;
  justify-content: center;
}
.state .icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: scale(1.25);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.state .icon svg {
  overflow: visible;
}

/* Outline */
.outline {
  position: absolute;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  inset: -2px -3.5px;
}
.outline::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    from 180deg,
    transparent 60%,
    white 80%,
    transparent 100%
  );
  animation: spin 2s linear infinite;
  animation-play-state: paused;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.button:hover .outline {
  opacity: 1;
}
.button:hover .outline::before {
  animation-play-state: running;
}

/* Letters */
.state p span {
  display: block;
  opacity: 0;
  animation: slideDown 0.8s ease forwards calc(var(--i) * 0.03s);
}
.button:hover p span {
  opacity: 1;
  animation: wave 0.5s ease forwards calc(var(--i) * 0.02s);
}
.button:focus p span {
  opacity: 1;
  animation: disapear 0.6s ease forwards calc(var(--i) * 0.03s);
}
@keyframes wave {
  30% {
    opacity: 1;
    transform: translateY(4px) translateX(0) rotate(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px) translateX(0) rotate(0);
    color: var(--primary);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
  }
}
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px) translateX(5px) rotate(-90deg);
    color: var(--primary);
    filter: blur(5px);
  }
  30% {
    opacity: 1;
    transform: translateY(4px) translateX(0) rotate(0);
    filter: blur(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px) translateX(0) rotate(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
  }
}
@keyframes disapear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(5px) translateY(20px);
    color: var(--primary);
    filter: blur(5px);
  }
}

/* Plane */
.state--default .icon svg {
  animation: land 0.6s ease forwards;
}
.button:hover .state--default .icon {
  transform: rotate(45deg) scale(1.25);
}
.button:focus .state--default svg {
  animation: takeOff 0.8s linear forwards;
}
.button:focus .state--default .icon {
  transform: rotate(0) scale(1.25);
}
@keyframes takeOff {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    transform: translateX(70px) rotate(45deg) scale(2);
  }
  100% {
    opacity: 0;
    transform: translateX(160px) rotate(45deg) scale(0);
  }
}
@keyframes land {
  0% {
    transform: translateX(-60px) translateY(30px) rotate(-50deg) scale(2);
    opacity: 0;
    filter: blur(3px);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0);
    opacity: 1;
    filter: blur(0);
  }
}

/* Contrail */
.state--default .icon:before {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  width: 0;
  left: -5px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5));
}
.button:focus .state--default .icon:before {
  animation: contrail 0.8s linear forwards;
}
@keyframes contrail {
  0% {
    width: 0;
    opacity: 1;
  }
  8% {
    width: 15px;
  }
  60% {
    opacity: 0.7;
    width: 80px;
  }
  100% {
    opacity: 0;
    width: 160px;
  }
}

/* States */
.state {
  padding-left: 29px;
  z-index: 2;
  display: flex;
  position: relative;
}
.state--default span:nth-child(4) {
  margin-right: 5px;
}
.state--sent {
  display: none;
}
.state--sent svg {
  transform: scale(1.25);
  margin-right: 8px;
}
.button:focus .state--default {
  position: absolute;
}
.button:focus .state--sent {
  display: flex;
}
.button:focus .state--sent span {
  opacity: 0;
  animation: slideDown 0.8s ease forwards calc(var(--i) * 0.2s);
}
.button:focus .state--sent .icon svg {
  opacity: 0;
  animation: appear 1.2s ease forwards 0.8s;
}
@keyframes appear {
  0% {
    opacity: 0;
    transform: scale(4) rotate(-40deg);
    color: var(--primary);
    filter: blur(4px);
  }
  30% {
    opacity: 1;
    transform: scale(0.6);
    filter: blur(1px);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

</style>
    

================================================
FILE: Buttons/mark-edison-jim_dangerous-penguin-53.html
================================================
<div class="wrapper">
  <button class="button">
    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="icon">
      <path
        d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"
      ></path>
    </svg>
    Send Message
  </button>
</div>

<style>
/* From Uiverse.io by mark-edison-jim  - Tags: simple, icon, button */
.wrapper {
  box-sizing: border-box;
  padding: 4px;
  border: 3px solid #5e5f5e83;
  border-top: 3px solid #c4c5c4ce;
  border-bottom: 3px solid #5e5d5da1;
  border-radius: 15px;
  box-shadow: 0 2px 5px 2px #8b8b8b8f;
  background-color: #fbfcfb;
}

.icon {
  width: 20px;
}

.button {
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 200px;
  height: 60px;
  border-radius: 100px;
  font-size: 1.3em;
  font-weight: bold;
  border: none;
  box-shadow: 0 1px 20px 0.1px #7a7b7a2f;
  background: linear-gradient(to bottom, #e0e2e0e3 10%, #fdfdfd);
}

</style>
    

================================================
FILE: Buttons/martinval9_nervous-owl-11.html
================================================
<button class="btn">Button
</button>
<style>
/* From Uiverse.io by martinval9 - Tags: button */
.btn {
 color: #B500FF;
 padding: 13px 20px;
 border: 2px solid #B500FF;
 font-size: 17px;
 transition: 0.3s;
 border-radius: 10px;
 font-family: Arial;
 font-weight: 600;
}

.btn:hover {
 transition: 0.3s;
 background-color: #B500FF;
 margin-top: -20px;
 color: #fff;
 animation-name: button_animation;
 animation-duration: 3s;
 animation-iteration-count: infinite;
}

.btn:active {
 transform: scale(0.97);
}

@keyframes button_animation {
 0% {
  background-color: #B500FF;
 }

 25% {
  background-color: #000000;
 }

 50% {
  background-color: #B500FF;
 }

 75% {
  background-color: #000000;
 }

 100% {
  background-color: #B500FF;
 }
}
</style>


================================================
FILE: Buttons/mateusneves_stupid-husky-53.html
================================================
<button>
  <span class="label">Next</span>
  <span class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg>
  </span>
</button>
<style>
/* From Uiverse.io by mateusneves - Tags: button */
button {
 position: relative;
 font-size: 14px;
 letter-spacing: 3px;
 height: 3em;
 padding: 0 3em;
 border: none;
 background-color: #c41b54;
 color: #fff;
 text-transform: uppercase;
 overflow: hidden;
 border-radius: 5px
}

button::before {
 content: '';
 display: block;
 position: absolute;
 z-index: 0;
 bottom: 0;
 left: 0;
 height: 0px;
 width: 100%;
 background: rgb(196,27,84);
 background: linear-gradient(90deg, rgba(196,27,84,1) 20%, rgba(124,7,46,1) 100%);
 transition: 0.2s;
}

button .label {
 position: relative;
}

button .icon {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 3em;
 width: 3em;
 position: absolute;
 top: 3em;
 right: 0;
 opacity: 0;
 transition: 0.4s;
}

button:hover::before {
 height: 100%;
}

button:hover .icon {
 top: 0;
 opacity: 1;
}
</style>


================================================
FILE: Buttons/mawi-man_curvy-tiger-34.html
================================================
<button class="custom-button">Click Me</button>

<style>
/* From Uiverse.io by mawi-man  - Tags: button, interactive, hover effects, ui components, css animations, ripple effect, glassy, modern design */
.custom-button {
  background-color: #1a1a2e; /* Button background color */
  color: #e94560; /* Text color */
  border: none;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 30px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.custom-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background-color: #e94560;
  transition: all 0.3s ease;
  border-radius: 50%;
  z-index: -1;
  transform: translate(-50%, -50%) scale(0);
}

.custom-button:hover::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.9;
}

.custom-button:hover {
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-5px);
  color: #1a1a2e;
}

/* Effect of waves under pressure */
.custom-button:active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 0.6s ease-out;
  z-index: -1;
}

@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

/* Animated text glow effect */
.custom-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: all 0.3s ease;
}

.custom-button:hover::after {
  left: 100%;
  transition: all 0.5s ease;
}

</style>
    

================================================
FILE: Buttons/mayurd8862_bad-newt-60.html
================================================
<button class="button">
  NEON
</button>
<style>
/* From Uiverse.io by mayurd8862 - Tags: neon, #button */
.button {
  padding: 0.6em 1.3em;
  font-weight: 900;
  font-size: 18px;
  background-color: rgb(40, 40, 40);
  border-radius: 10px;
  border: 1px solid rgb(232, 97, 124);
  color: aliceblue;
  box-shadow: 0 0 25px rgb(232, 97, 124),
              0 0 25px rgb(232, 97, 124),
              0 0 5px rgb(232, 97, 124) inset;
  cursor: pointer;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgb(232, 97, 124),
              0 0 30px rgb(232, 97, 124),
              0 0 10px rgb(232, 97, 124) inset;
}


</style>


================================================
FILE: Buttons/mayurd8862_itchy-elephant-78.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by mayurd8862 - Tags: button, cool btn */
.button {
  padding: 0.6em 1.3em;
  font-weight: 900;
  font-size: 18px;
  background: linear-gradient(to right, rgb(231, 71, 132), 
  rgb(0, 170, 255));
  /* Gradient background */
  border-radius: 10px;
  border: none;
  color: aliceblue;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  /* Text shadow effect */
  box-shadow: 0 0 10px rgba(55, 0, 255, 0.5);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.button:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgb(231, 71, 132);
  color: white;
}

</style>


================================================
FILE: Buttons/meermubashar_rotten-swan-33.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by meermubashar - Tags: button */
button {
 width: 140px;
 height: 45px;
 font-size: 23px;
 cursor: pointer;
 border: none;
 outline: none;
 background: transparent;
 color: white;
 font-family: 'Times New Roman', Times, serif;
 font-weight: 700;
 position: relative;
 transition: all 0.5s;
 z-index: 1;
}

button::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 5px;
 height: 100%;
 background-color: white;
 z-index: -1;
 transition: all 0.5s;
}

button:hover::before {
 width: 100%;
}

button:hover {
 color: black;
}

button:active:before {
 background: #b9b9b9;
}
</style>


================================================
FILE: Buttons/megasteve19_shy-eel-92.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by megasteve19 - Tags: button */
button {
  border: none;
  background-color: seagreen;
  color: white;
  font-size: 1.15rem;
  font-weight: 500;
  padding: 0.8rem 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transform: translate(1) translate(0, 0);
  transition: transform 225ms, box-shadow 225ms;
}

button:hover {
  transform: scale(1.05) translate(0, -0.15rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
}

button:active {
  transform: scale(1) translate(0, 0.15rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

</style>


================================================
FILE: Buttons/menezes11_afraid-lizard-67.html
================================================
<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span> Hover me
</button>
<style>
/* From Uiverse.io by menezes11 - Tags: button */
button {
 position: relative;
 padding: 1em 1.8em;
 outline: none;
 border: 1px solid #303030;
 background: #212121;
 color: #ae00ff;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-size: 15px;
 overflow: hidden;
 transition: 0.2s;
 border-radius: 20px;
 cursor: pointer;
 font-weight: bold;
}

button:hover {
 box-shadow: 0 0 10px #ae00ff, 0 0 25px #001eff, 0 0 50px #ae00ff;
 transition-delay: 0.6s;
}

button span {
 position: absolute;
}

button span:nth-child(1) {
 top: 0;
 left: -100%;
 width: 100%;
 height: 2px;
 background: linear-gradient(90deg, transparent, #ae00ff);
}

button:hover span:nth-child(1) {
 left: 100%;
 transition: 0.7s;
}

button span:nth-child(3) {
 bottom: 0;
 right: -100%;
 width: 100%;
 height: 2px;
 background: linear-gradient(90deg, transparent, #001eff);
}

button:hover span:nth-child(3) {
 right: 100%;
 transition: 0.7s;
 transition-delay: 0.35s;
}

button span:nth-child(2) {
 top: -100%;
 right: 0;
 width: 2px;
 height: 100%;
 background: linear-gradient(180deg, transparent, #ae00ff);
}

button:hover span:nth-child(2) {
 top: 100%;
 transition: 0.7s;
 transition-delay: 0.17s;
}

button span:nth-child(4) {
 bottom: -100%;
 left: 0;
 width: 2px;
 height: 100%;
 background: linear-gradient(360deg, transparent, #001eff);
}

button:hover span:nth-child(4) {
 bottom: 100%;
 transition: 0.7s;
 transition-delay: 0.52s;
}

button:active {
 background: #ae00af;
 background: linear-gradient(to top right, #ae00af, #001eff);
 color: #bfbfbf;
 box-shadow: 0 0 8px #ae00ff, 0 0 8px #001eff, 0 0 8px #ae00ff;
 transition: 0.1s;
}

button:active span:nth-child(1) 
span:nth-child(2) 
span:nth-child(2) 
span:nth-child(2) {
 transition: none;
 transition-delay: none;
}

</style>


================================================
FILE: Buttons/mi-series_bright-termite-75.html
================================================
<button>
  Hover Me <span>⟶</span>
</button>
<style>
/* From Uiverse.io by mi-series - Tags: button */
button {
  width: 170px;
  height: 60px;
  color: #fff;
  background: #000;
  font-size: 17px;
  text-decoration: none;
  margin: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 0 #000;
  transition: 0.5s;
  position: relative;
}

button:hover {
  box-shadow: 8px 10px 0 #000;
  background: transparent;
  border: 2px solid #000;
  color: #000;
  margin-top: 5px;
}

button span {
  margin-left: 10px;
  width: 0;
  overflow: hidden;
  transition: 0.4s;
}

button:hover span {
  width: 30px;
}
</style>


================================================
FILE: Buttons/mi-series_fat-rabbit-79.html
================================================
<button>
  Hover Me
</button>
<style>
/* From Uiverse.io by mi-series - Tags: button, spin */
button {
  width: 150px;
  height: 50px;
  border: 2px solid #000;
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin: 20px;
  outline: none;
  text-align: center;
  z-index: 2;
  transition: all 0.3s ease;
  overflow: hidden;
}

button::after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

button:hover {
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  color: #fff;
}

button:hover::after {
  transform: scale(2) rotate(180deg);
  background: #000;
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}
</style>


================================================
FILE: Buttons/mi-series_little-frog-95.html
================================================
<div>
    <button class="btn"><i class="animation"></i>BUTTON<i class="animation"></i>
    </button>
</div>
<style>
/* From Uiverse.io by mi-series - Tags: simple, material design, flashy, animation, purple, minimalist, button, animated */
.btn {
  outline: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: #40B3A2;
  min-width: 200px;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
  box-sizing: border-box;
  padding: 16px 20px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  overflow: hidden;
  cursor: pointer;
}

.btn:hover {
  opacity: .95;
}

.btn .animation {
  border-radius: 100%;
  animation: ripple 0.6s linear infinite;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1), 0 0 0 80px rgba(255, 255, 255, 0);
  }
}
</style>


================================================
FILE: Buttons/mi-series_terrible-sheep-85.html
================================================
<button>
  Hover Me
</button>
<style>
/* From Uiverse.io by mi-series - Tags: minimalist, button, minimal */
button {
  width: 160px;
  line-height: 40px;
  font-weight: 500px;
  font-size: 17px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0;
  background: #FBEAEB;
  position: relative;
  z-index: 2;
  color: #FBEAEB;
  perspective: 300px;
  transform-style: preserve-3d;
  border-radius: 6px;
  border: none;
}

button:hover {
  color: #2F3C7E;
}

button::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-weight: 500px;
  background: #2F3C7E;
  border-radius: 6px;
  z-index: -1;
  transform-origin: center bottom;
  transform: rotateX(0);
  transition: all 0.3s ease;
}

button:hover::after {
  transform: rotateX(-180deg);
}
</style>


================================================
FILE: Buttons/mi-series_unlucky-elephant-56.html
================================================
<button class="container">
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <div class="card">
    <div class="card-header">
      HOVER
    </div>
  </div>
</button>
<style>
/* From Uiverse.io by mi-series - Tags: simple, material design, 3d, purple, minimalist, button, hover effect, hover button */
.container {
  border: none;
}

.container .card {
  background-color: white;
  border-radius: 10px;
  border: 1px solid black;
  position: relative;
  z-index: 0;
  transition: all 300ms ease-out;
  transform-origin: center center;
  width: 150px;
  height: 50px;
  box-shadow: 0px;
  outline: none;
}

.card-header {
  padding: 10px;
  background: linear-gradient(90deg, #CB2D6F 20px, transparent 100%) center / 22px 22px,
		linear-gradient(#CB2D6F 20px, transparent 100%) center / 22px 22px,
		#fff;
  color: white;
  height: 100%;
  font-size: 20px;
  font-weight: 600;
  border: 1px solid white;
  border-radius: 10px;
}

.container .card .border {
  transition: all 300ms ease-out;
  transform-origin: center center;
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 0px);
  height: calc(100% - 0px);
  border: 1px solid black;
  border-radius: 9px;
}

.container a {
  opacity: 0;
  position: absolute;
  z-index: 1;
  width: 50%;
  height: 50%;
}

.container a:hover,
.container a:focus {
  transform: translateZ(50px);
}

.container a:hover ~ .card .card-header,
.container a:focus ~ .card .card-header {
  transform: translateZ(24px);
}

.container a:nth-child(1) {
  top: 0;
  left: 0;
}

.container a:nth-child(1):hover ~ .card,
.container a:nth-child(1):focus ~ .card {
  transform: rotateX(10deg) rotateY(-10deg) translateZ(0);
  transform-origin: right bottom;
  box-shadow: 10px 20px;
}

.container a:nth-child(2) {
  top: 0;
  right: 0;
}

.container a:nth-child(2):hover ~ .card,
.container a:nth-child(2):focus ~ .card {
  transform: rotateX(10deg) rotateY(10deg) translateZ(0);
  transform-origin: left bottom;
  box-shadow: -10px 20px;
}

.container a:nth-child(3) {
  bottom: 0;
  right: 0;
}

.container a:nth-child(3):hover ~ .card ,
.container a:nth-child(3):focus ~ .card {
  transform-origin: left top;
  transform: rotateX(-10deg) rotateY(10deg) translateZ(0);
  box-shadow: -10px -20px;
}

.container a:nth-child(4) {
  bottom: 0;
  left: 0;
}

.container a:nth-child(4):hover ~ .card,
.container a:nth-child(4):focus ~ .card {
  transform-origin: right top;
  transform: rotateX(-10deg) rotateY(-10deg) translateZ(0);
  box-shadow: 10px -20px;
}
</style>


================================================
FILE: Buttons/mi-series_wicked-sloth-7.html
================================================
<button class="button">
  <span>Submit</span>
</button>
<style>
/* From Uiverse.io by mi-series - Tags: simple, material design, 3d, green, minimalist, button, click, btn */
.button {
  width: 150px;
  padding: 0;
  border: none;
  transform: rotate(5deg);
  transform-origin: center;
  font-family: "Gochi Hand", cursive;
  text-decoration: none;
  font-size: 15px;
  padding-bottom: 3px;
  border-radius: 5px;
  box-shadow: 0 2px 0 #494a4b;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background-color: #5CDB95;
}

.button span {
  background: #f1f5f8;
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  border: 2px solid #494a4b;
}

.button:active {
  transform: translateY(5px);
  padding-bottom: 0px;
  outline: 0;
}
</style>


================================================
FILE: Buttons/milegelu_tough-cobra-42.html
================================================
<div>
  <button class="button">
    <svg
      viewBox="0 0 16 16"
      class="bi bi-lightning-charge-fill"
      fill="currentColor"
      height="16"
      width="16"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"
      ></path></svg
    >button
  </button>
</div>

<style>
/* From Uiverse.io by milegelu  - Tags: button, active, hover button, button hover effect  */
.button {
  --bezier: cubic-bezier(0.22, 0.61, 0.36, 1);
  --edge-light: hsla(0, 0%, 50%, 0.8);
  --text-light: rgba(255, 255, 255, 0.4);
  --back-color: 240, 40%;

  cursor: pointer;
  padding: 0.7em 1em;
  border-radius: 0.5em;
  min-height: 2.4em;
  min-width: 3em;
  display: flex;
  align-items: center;
  gap: 0.5em;

  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1;
  font-weight: bold;

  background: linear-gradient(
    140deg,
    hsla(var(--back-color), 50%, 1) min(2em, 20%),
    hsla(var(--back-color), 50%, 0.6) min(8em, 100%)
  );
  color: hsla(0, 0%, 90%);
  border: 0;
  box-shadow: inset 0.4px 1px 4px var(--edge-light);

  transition: all 0.1s var(--bezier);
}

.button:hover {
  --edge-light: hsla(0, 0%, 50%, 1);
  text-shadow: 0px 0px 10px var(--text-light);
  box-shadow: inset 0.4px 1px 4px var(--edge-light),
    2px 4px 8px hsla(0, 0%, 0%, 0.295);
  transform: scale(1.1);
}

.button:active {
  --text-light: rgba(255, 255, 255, 1);

  background: linear-gradient(
    140deg,
    hsla(var(--back-color), 50%, 1) min(2em, 20%),
    hsla(var(--back-color), 50%, 0.6) min(8em, 100%)
  );
  box-shadow: inset 0.4px 1px 8px var(--edge-light),
    0px 0px 8px hsla(var(--back-color), 50%, 0.6);
  text-shadow: 0px 0px 20px var(--text-light);
  color: hsla(0, 0%, 100%, 1);
  letter-spacing: 0.1em;
  transform: scale(1);
}

</style>
    

================================================
FILE: Buttons/mininaim_helpless-horse-85.html
================================================
<button class="space-button">
  <svg class="space-icon" viewBox="0 0 24 24" width="16" height="16">
    <path fill="currentColor" d="M12 0c-1.2 0-2.2 1-2.2 2.2v3.3c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1V2.2C7.6 1 6.7 0 5.5 0S3.4 1 3.4 2.2v3.3c0 .6-.5 1.1-1.1 1.1S1.1 6.1 1.1 5.5V2.2C1.1 1 0 2 0 3.2 0 16.3 7.7 24 20.8 24 23 24 24 23 24 20.8c0-1.2-1-2.2-2.2-2.2s-2.2 1-2.2 2.2c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-1.2-1-2.2-2.2-2.2s-2.2 1-2.2 2.2c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-2.1 1.7-3.8 3.8-3.8s3.8 1.7 3.8 3.8c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-1.2-1-2.2-2.2-2.2z"></path>
  </svg>
  Launch
</button>

<style>
/* From Uiverse.io by mininaim - Tags: button */
.space-button {
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

.space-icon {
  margin-right: 10px;
  fill: currentColor;
}

/* Light Mode */
@media (prefers-color-scheme: light) {
  .space-button {
    background-color: #0074D9;
    color: #fff;
    box-shadow: 0px 0px 10px 0px #0074D9;
  }

  .space-button:hover {
    box-shadow: 0px 0px 20px 0px #fff;
  }

  .space-button:active {
    box-shadow: none;
    background-color: #001f3f;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .space-button {
    background-color: #f0f0f0;
    color: #000;
    box-shadow: 0px 0px 10px 0px #000;
  }

  .space-button:hover {
    box-shadow: 0px 0px 20px 0px #fff;
  }

  .space-button:active {
    box-shadow: none;
    background-color: #bbb;
  }
}

</style>


================================================
FILE: Buttons/misaraadel_dry-cow-55.html
================================================
<button class="btn-shape">
    <span class="title">
      hover me
    </span>
</button>
<style>
/* From Uiverse.io by misaraadel - Tags: button, creative, 3d button, css animation, hover idea */
.btn-shape {
  transition: all .3s linear;
  width: 168px;
  height: 50px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  outline: none;
  background-color: #020202;
  border-radius: 50px;
  border: 0px;
  position: relative;
  z-index: 99;
  cursor: pointer;
}

.btn-shape::after,
.btn-shape::before {
  content: '';
  position: absolute;
  background-color: #020202;
  width: 100%;
  opacity: 0;
  height: 100%;
  left: 0;
  border-radius: 100px;
  bottom: 0;
  z-index: -2;
  transition: all .3s linear;
}

.btn-shape span {
  font-size: 16px;
  font-weight: 700;
  transition: all .3s linear;
  color: #fff;
  text-transform: capitalize;
}

.btn-shape:hover {
  transform: translate(-12px, -12px);
}

.btn-shape:hover:after {
  transform: translate(6px, 6px);
  opacity: .5;
}

.btn-shape:hover::before {
  transform: translate(12px, 12px);
  opacity: .3;
}

.btn-shape:hover span {
  animation: storm .4s linear both;
}

@keyframes storm {
  0% {
    transform: translate3d(0, 0, 0) translateZ(0);
  }

  25% {
    transform: translate3d(4px, 0, 0) translateZ(0);
  }

  50% {
    transform: translate3d(-3px, 0, 0) translateZ(0);
  }

  75% {
    transform: translate3d(2px, 0, 0) translateZ(0);
  }

  100% {
    transform: translate3d(0, 0, 0) translateZ(0);
  }
}
</style>


================================================
FILE: Buttons/misaraadel_smart-otter-53.html
================================================
<ul class="socail-media">
  <li>
    <a href="#">
       <svg viewBox="0 0 10.712 20" height="20" width="10.712" xmlns="http://www.w3.org/2000/svg">
  <path transform="translate(-22.89)" d="M32.9,11.25l.555-3.62H29.982V5.282a1.81,1.81,0,0,1,2.041-1.955H33.6V.245A19.255,19.255,0,0,0,30.8,0c-2.86,0-4.73,1.734-4.73,4.872V7.63H22.89v3.62h3.179V20h3.913V11.25Z" id="facebook"></path>
</svg>

    </a>
  </li>

  <li>
    <a href="#">
            <svg viewBox="0 0 20 20" height="20" width="20" xmlns="http://www.w3.org/2000/svg" id="instagram">
          <g transform="translate(15.354 3.707)" data-name="Group 64" id="Group_64">
            <g data-name="Group 63" id="Group_63">
              <path fill="#00" transform="translate(-392.401 -94.739)" d="M392.871,94.739a.47.47,0,1,0,.47.47A.47.47,0,0,0,392.871,94.739Z" data-name="Path 5" id="Path_5"></path>
            </g>
          </g>
          <g transform="translate(5.837 5.837)" data-name="Group 66" id="Group_66">
            <g data-name="Group 65" id="Group_65">
              <path fill="#000" transform="translate(-145.804 -145.804)" d="M149.967,145.8a4.163,4.163,0,1,0,4.163,4.163A4.168,4.168,0,0,0,149.967,145.8Z" data-name="Path 6" id="Path_6"></path>
            </g>
          </g>
          <g data-name="Group 68" id="Group_68">
            <g data-name="Group 67" id="Group_67">
              <path fill="#000" d="M14.517,0H5.483A5.489,5.489,0,0,0,0,5.483v9.035A5.489,5.489,0,0,0,5.483,20h9.035A5.489,5.489,0,0,0,20,14.517V5.483A5.489,5.489,0,0,0,14.517,0ZM10,15.486A5.486,5.486,0,1,1,15.486,10,5.492,5.492,0,0,1,10,15.486Zm5.814-9.633A1.667,1.667,0,1,1,17.48,4.186,1.669,1.669,0,0,1,15.814,5.853Z" data-name="Path 7" id="Path_7"></path>
            </g>
          </g>
        </svg>

    </a>
  </li>

  <li>
    <a href="#">
      <svg viewBox="0 0 20 20" height="20" width="20" xmlns="http://www.w3.org/2000/svg" id="_x31_0.Linkedin">
  <path fill="#000" transform="translate(-31.438 -29.201)" d="M51.438,49.2V41.755c0-3.659-.788-6.455-5.057-6.455a4.413,4.413,0,0,0-3.99,2.186h-.051V35.63H38.3V49.2h4.219V42.466c0-1.779.33-3.482,2.516-3.482,2.16,0,2.186,2.008,2.186,3.583v6.607h4.219Z" data-name="Path 1" id="Path_1"></path>
  <path fill="#000" transform="translate(-10.97 -30.17)" d="M11.3,36.6h4.219V50.17H11.3Z" data-name="Path 2" id="Path_2"></path>
  <path fill="#000" transform="translate(-10 -10)" d="M12.44,10a2.452,2.452,0,1,0,2.44,2.44A2.44,2.44,0,0,0,12.44,10Z" data-name="Path 3" id="Path_3"></path>
</svg>

    </a>
  </li>

  <li>
    <a href="#">
      <svg viewBox="0 0 19.838 18.6" height="18.6" width="19.838" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(0 -15.988)" data-name="svgexport-10 (13)" id="svgexport-10_13_">
    <g transform="translate(0 15.988)" data-name="Group 10" id="Group_10">
      <g transform="translate(0 0)" data-name="Group 9" id="Group_9">
        <path fill="#000" transform="translate(0 -15.988)" d="M19.449,29.877a5.73,5.73,0,0,1-3.9-3.269.188.188,0,0,0-.011-.022.82.82,0,0,1-.093-.675c.145-.34.7-.516,1.068-.632.107-.033.207-.066.29-.1a2.245,2.245,0,0,0,.791-.472.751.751,0,0,0,.241-.541.851.851,0,0,0-.637-.738,1.152,1.152,0,0,0-.432-.082.961.961,0,0,0-.4.082,2.255,2.255,0,0,1-.827.236.759.759,0,0,1-.274-.06c.007-.124.015-.252.024-.383l0-.057a9.821,9.821,0,0,0-.253-4.005,5.388,5.388,0,0,0-1.214-1.737,5.076,5.076,0,0,0-1.452-.957,5.737,5.737,0,0,0-2.265-.479h-.05l-.341,0a5.759,5.759,0,0,0-2.268.479A5.048,5.048,0,0,0,6,17.426,5.4,5.4,0,0,0,4.8,19.16a9.829,9.829,0,0,0-.254,4v0c.009.144.019.294.027.44a.8.8,0,0,1-.325.061,2.151,2.151,0,0,1-.884-.237.794.794,0,0,0-.336-.069,1.188,1.188,0,0,0-.594.166.822.822,0,0,0-.42.537.741.741,0,0,0,.283.7,2.438,2.438,0,0,0,.739.423c.084.033.185.064.29.1.367.117.924.293,1.069.632a.826.826,0,0,1-.094.675.176.176,0,0,0-.01.022,6.566,6.566,0,0,1-1,1.545,5.608,5.608,0,0,1-1.205,1.064,4.435,4.435,0,0,1-1.693.658A.463.463,0,0,0,0,30.359a.587.587,0,0,0,.048.2h0a1.239,1.239,0,0,0,.672.574,7.675,7.675,0,0,0,1.941.5,2.354,2.354,0,0,1,.119.427c.032.149.066.3.114.465a.508.508,0,0,0,.532.387,2.59,2.59,0,0,0,.456-.063,5.189,5.189,0,0,1,1.04-.118,4.521,4.521,0,0,1,.744.063,3.534,3.534,0,0,1,1.39.718A4.5,4.5,0,0,0,9.8,34.587q.05,0,.1,0c.04,0,.091,0,.143,0a4.507,4.507,0,0,0,2.74-1.066h0a3.546,3.546,0,0,1,1.39-.717,4.521,4.521,0,0,1,.744-.063,5.213,5.213,0,0,1,1.04.11,2.514,2.514,0,0,0,.456.056h.022a.5.5,0,0,0,.51-.381c.047-.16.081-.309.114-.461a2.435,2.435,0,0,1,.118-.424,7.728,7.728,0,0,0,1.941-.5,1.244,1.244,0,0,0,.671-.573.589.589,0,0,0,.05-.2A.461.461,0,0,0,19.449,29.877Z" data-name="Path 6565" id="Path_6565"></path>
      </g>
    </g>
  </g>
</svg>

    </a>
  </li>

  <li>
    <a href="#">
      <svg viewBox="0 0 19.738 22.466" height="22.466" width="19.738" xmlns="http://www.w3.org/2000/svg" data-name="Group 101" id="Group_101">
  <path fill="#000" transform="translate(-31.423 -0.39)" d="M51.151,6.015a5.661,5.661,0,0,1-3.42-1.143A5.662,5.662,0,0,1,45.469.39H41.8V10.414l0,5.49a3.325,3.325,0,1,1-2.281-3.151V9.029a7.218,7.218,0,0,0-1.058-.078,7.034,7.034,0,0,0-5.286,2.364,6.893,6.893,0,0,0,.311,9.505,7.158,7.158,0,0,0,.663.579,7.035,7.035,0,0,0,4.312,1.458,7.219,7.219,0,0,0,1.058-.078,7.011,7.011,0,0,0,3.917-1.959,6.868,6.868,0,0,0,2.06-4.887l-.019-8.2a9.3,9.3,0,0,0,5.688,1.933V6.014h-.011Z" data-name="Path 6566" id="Path_6566"></path>
</svg>

    </a>
  </li>
  
   <li>
    <a href="#">
       <svg viewBox="0 0 23.06 18" height="18" width="23.06" xmlns="http://www.w3.org/2000/svg">
        <path fill="#000" transform="translate(0 -48.082)" d="M20.69,52.568c.015.2.015.394.015.591A13.085,13.085,0,0,1,7.258,66.082,13.752,13.752,0,0,1,0,64.043a10.168,10.168,0,0,0,1.141.056,9.712,9.712,0,0,0,5.868-1.941,4.715,4.715,0,0,1-4.419-3.15,6.2,6.2,0,0,0,.893.07,5.189,5.189,0,0,0,1.244-.155,4.592,4.592,0,0,1-3.79-4.458V54.41a4.907,4.907,0,0,0,2.136.577A4.5,4.5,0,0,1,.966,51.2a4.375,4.375,0,0,1,.644-2.292,13.621,13.621,0,0,0,9.745,4.753,4.936,4.936,0,0,1-.117-1.041,4.635,4.635,0,0,1,4.726-4.542,4.806,4.806,0,0,1,3.453,1.434,9.538,9.538,0,0,0,3-1.1,4.567,4.567,0,0,1-2.078,2.5,9.779,9.779,0,0,0,2.722-.7A9.953,9.953,0,0,1,20.69,52.568Z" id="twitter"></path>
      </svg>


    </a>
  </li>
</ul>
<style>
/* From Uiverse.io by misaraadel - Tags: twitter, facebook, tik-tok, button, clip-path, linkedin, snapchat, clip path animation, socail media, socail */
.socail-media {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 20px;
  list-style: none;
}

.socail-media li a {
  width: 50px;
  height: 50px;
  background-color: #5b9d15;
  display: flex;
  overflow: hidden;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;
  z-index: 9;
  border: 1px solid #5b9d15;
}

.socail-media li a svg {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
  object-fit: contain;
  filter: invert(100%) sepia(0%) saturate(7455%) hue-rotate(57deg) brightness(108%) contrast(105%);
}

.socail-media li a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);
  clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);
  background-color: #fff;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
}

.socail-media li a:hover::after {
  animation: sideClip 0.5s linear;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
}

.socail-media li a:hover svg {
  animation: fadeInLeft 0.3s linear both;
  filter: invert(52%) sepia(85%) saturate(2286%) hue-rotate(54deg) brightness(92%) contrast(84%);
}

@keyframes sideClip {
  0% {
    clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);
  }

  50% {
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

</style>


================================================
FILE: Buttons/misaraadel_tame-elephant-97.html
================================================
<a class="custom-btn secondary-color" href="#">
  <span>
    hover me
  </span>
</a>
<style>
/* From Uiverse.io by misaraadel - Tags: button, clip-path, hover effect, clip, button hover effect , hover idea, hover me, clip path animation */
.custom-btn {
  width: 220px;
  height: 50px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;
  z-index: 9;
  border: 1px solid #5BA50E;
  gap: 10px;
  text-decoration: none;
  background-color: #5BA50E;
}

.custom-btn::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);
  clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);
  z-index: -1;
  background-color: #fff;
  top: 0;
  left: 0;
  opacity: 0;
}

.custom-btn span {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.custom-btn:hover::after {
  animation: sideClip 0.5s linear;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
}

.custom-btn:hover span {
  animation: storm 0.4s linear both;
  color: #5BA50E;
}

@keyframes sideClip {
  0% {
    clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);
  }

  50% {
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes storm {
  0% {
    transform: translate3d(0, 0, 0) translateZ(0);
  }

  25% {
    transform: translate3d(4px, 0, 0) translateZ(0);
  }

  50% {
    transform: translate3d(-3px, 0, 0) translateZ(0);
  }

  75% {
    transform: translate3d(2px, 0, 0) translateZ(0);
  }

  100% {
    transform: translate3d(0, 0, 0) translateZ(0);
  }
}
</style>


================================================
FILE: Buttons/mobinkakei_ancient-goose-30.html
================================================
<button class="btn">
    <span class="btn-text-one">Hover me</span>
    <span class="btn-text-two">Great!</span>
</button>
<style>
/* From Uiverse.io by mobinkakei - Tags: button */
.btn {
  width: 140px;
  height: 50px;
  background: linear-gradient(to top, #00154c, #12376e, #23487f);
  color: #fff;
  border-radius: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.btn span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: top 0.5s;
}

.btn-text-one {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.btn-text-two {
  position: absolute;
  width: 100%;
  top: 150%;
  left: 0;
  transform: translateY(-50%);
}

.btn:hover .btn-text-one {
  top: -100%;
}

.btn:hover .btn-text-two {
  top: 50%;
}

</style>


================================================
FILE: Buttons/mobinkakei_cold-bat-89.html
================================================
<button class="cta">
    <span class="span">NEXT</span>
    <span class="second">
      <svg width="50px" height="20px" viewBox="0 0 66 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="arrow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path class="one" d="M40.1543933,3.89485454 L43.9763149,0.139296592 C44.1708311,-0.0518420739 44.4826329,-0.0518571125 44.6771675,0.139262789 L65.6916134,20.7848311 C66.0855801,21.1718824 66.0911863,21.8050225 65.704135,22.1989893 C65.7000188,22.2031791 65.6958657,22.2073326 65.6916762,22.2114492 L44.677098,42.8607841 C44.4825957,43.0519059 44.1708242,43.0519358 43.9762853,42.8608513 L40.1545186,39.1069479 C39.9575152,38.9134427 39.9546793,38.5968729 40.1481845,38.3998695 C40.1502893,38.3977268 40.1524132,38.395603 40.1545562,38.3934985 L56.9937789,21.8567812 C57.1908028,21.6632968 57.193672,21.3467273 57.0001876,21.1497035 C56.9980647,21.1475418 56.9959223,21.1453995 56.9937605,21.1432767 L40.1545208,4.60825197 C39.9574869,4.41477773 39.9546013,4.09820839 40.1480756,3.90117456 C40.1501626,3.89904911 40.1522686,3.89694235 40.1543933,3.89485454 Z" fill="#FFFFFF"></path>
          <path class="two" d="M20.1543933,3.89485454 L23.9763149,0.139296592 C24.1708311,-0.0518420739 24.4826329,-0.0518571125 24.6771675,0.139262789 L45.6916134,20.7848311 C46.0855801,21.1718824 46.0911863,21.8050225 45.704135,22.1989893 C45.7000188,22.2031791 45.6958657,22.2073326 45.6916762,22.2114492 L24.677098,42.8607841 C24.4825957,43.0519059 24.1708242,43.0519358 23.9762853,42.8608513 L20.1545186,39.1069479 C19.9575152,38.9134427 19.9546793,38.5968729 20.1481845,38.3998695 C20.1502893,38.3977268 20.1524132,38.395603 20.1545562,38.3934985 L36.9937789,21.8567812 C37.1908028,21.6632968 37.193672,21.3467273 37.0001876,21.1497035 C36.9980647,21.1475418 36.9959223,21.1453995 36.9937605,21.1432767 L20.1545208,4.60825197 C19.9574869,4.41477773 19.9546013,4.09820839 20.1480756,3.90117456 C20.1501626,3.89904911 20.1522686,3.89694235 20.1543933,3.89485454 Z" fill="#FFFFFF"></path>
          <path class="three" d="M0.154393339,3.89485454 L3.97631488,0.139296592 C4.17083111,-0.0518420739 4.48263286,-0.0518571125 4.67716753,0.139262789 L25.6916134,20.7848311 C26.0855801,21.1718824 26.0911863,21.8050225 25.704135,22.1989893 C25.7000188,22.2031791 25.6958657,22.2073326 25.6916762,22.2114492 L4.67709797,42.8607841 C4.48259567,43.0519059 4.17082418,43.0519358 3.97628526,42.8608513 L0.154518591,39.1069479 C-0.0424848215,38.9134427 -0.0453206733,38.5968729 0.148184538,38.3998695 C0.150289256,38.3977268 0.152413239,38.395603 0.154556228,38.3934985 L16.9937789,21.8567812 C17.1908028,21.6632968 17.193672,21.3467273 17.0001876,21.1497035 C16.9980647,21.1475418 16.9959223,21.1453995 16.9937605,21.1432767 L0.15452076,4.60825197 C-0.0425130651,4.41477773 -0.0453986756,4.09820839 0.148075568,3.90117456 C0.150162624,3.89904911 0.152268631,3.89694235 0.154393339,3.89485454 Z" fill="#FFFFFF"></path>
        </g>
      </svg>
    </span> 
</button>
<style>
/* From Uiverse.io by mobinkakei - Tags: button */
.cta {
  display: flex;
  padding: 11px 33px;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 25px;
  color: white;
  background: #6225E6;
  transition: 1s;
  box-shadow: 6px 6px 0 black;
  transform: skewX(-15deg);
  border: none;
}

.cta:focus {
  outline: none;
}

.cta:hover {
  transition: 0.5s;
  box-shadow: 10px 10px 0 #FBC638;
}

.cta .second {
  transition: 0.5s;
  margin-right: 0px;
}

.cta:hover  .second {
  transition: 0.5s;
  margin-right: 45px;
}

.span {
  transform: skewX(15deg)
}

.second {
  width: 20px;
  margin-left: 30px;
  position: relative;
  top: 12%;
}

.one {
  transition: 0.4s;
  transform: translateX(-60%);
}

.two {
  transition: 0.5s;
  transform: translateX(-30%);
}

.cta:hover .three {
  animation: color_anim 1s infinite 0.2s;
}

.cta:hover .one {
  transform: translateX(0%);
  animation: color_anim 1s infinite 0.6s;
}

.cta:hover .two {
  transform: translateX(0%);
  animation: color_anim 1s infinite 0.4s;
}

@keyframes color_anim {
  0% {
    fill: white;
  }

  50% {
    fill: #FBC638;
  }

  100% {
    fill: white;
  }
}
</style>


================================================
FILE: Buttons/mobinkakei_great-insect-77.html
================================================

<button disabled="" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center">
    <svg aria-hidden="true" role="status" class="inline w-4 h-4 mr-3 text-white animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"></path>
    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path>
    </svg>
    Loading...
</button>

<style>
/* From Uiverse.io by mobinkakei - Tags: button */
button {
  color: white;
  background-color: #1D4ED8;
  --ring-color: #93C5FD;
  font-weight: 500;
  border-radius: 0.5rem;
  font-size: 1rem;
  line-height: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  text-align: center;
  margin-right: 0.5rem;
  display: inline-flex;
  align-items: center;
  border: none;
}

button:hover {
  background-color: #1E40AF;
}

button:focus {
  box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

button svg {
  display: inline;
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 0.75rem;
  color: white;
  animation: spin_357 1s linear infinite;
}

@keyframes spin_357 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: Buttons/mobinkakei_light-pug-30.html
================================================
<button class="btn btn-1">Hover Me!</button>
<style>
/* From Uiverse.io by mobinkakei - Tags: button */
.btn {
  text-decoration: none;
  padding: 20px 40px;
  font-size: 1em;
  position: relative;
  margin: 32px;
  border: none;
  background-color: #26caf8;
  font-weight: 600;
}

.btn-1 {
  overflow: hidden;
  color: #fff;
  border-radius: 30px;
  box-shadow: 0 0 0 0 rgba(143, 64, 248, 0.5), 0 0 0 0 rgba(39, 200, 255, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-1::after {
  content: "";
  width: 400px;
  height: 400px;
  position: absolute;
  top: -50px;
  left: -100px;
  background-color: #ff3cac;
  background-image: linear-gradient(225deg, #27d86c 0%, #26caf8 50%, #c625d0 100%);
  z-index: -1;
  transition: transform 0.5s ease;
}

.btn-1:hover {
  transform: translate(0, -6px);
  box-shadow: 10px -10px 25px 0 rgba(143, 64, 248, 0.5),  -10px 10px 25px 0 rgba(39, 200, 255, 0.5);
}

.btn-1:hover::after {
  transform: rotate(150deg);
}
</style>


================================================
FILE: Buttons/mobinkakei_silent-kangaroo-88.html
================================================
<button class="btn-shine">
    <span>Shine</span>
</button>
<style>
/* From Uiverse.io by mobinkakei - Tags: button */
button {
  position: relative;
  margin: 0;
  padding: 17px 35px;
  outline: none;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  background-color: #fff;
  border: 1px solid rgba(22, 76, 167, 0.6);
  border-radius: 10px;
  color: #1d89ff;
  font-weight: 400;
  font-family: inherit;
  z-index: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}

button span {
  color: #164ca7;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.7px;
}

button:hover {
  animation: rotate624 0.7s ease-in-out both;
}

button:hover span {
  animation: storm1261 0.7s ease-in-out both;
  animation-delay: 0.06s;
}

@keyframes rotate624 {
  0% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }

  25% {
    transform: rotate(3deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(-3deg) translate3d(0, 0, 0);
  }

  75% {
    transform: rotate(1deg) translate3d(0, 0, 0);
  }

  100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

@keyframes storm1261 {
  0% {
    transform: translate3d(0, 0, 0) translateZ(0);
  }

  25% {
    transform: translate3d(4px, 0, 0) translateZ(0);
  }

  50% {
    transform: translate3d(-3px, 0, 0) translateZ(0);
  }

  75% {
    transform: translate3d(2px, 0, 0) translateZ(0);
  }

  100% {
    transform: translate3d(0, 0, 0) translateZ(0);
  }
}

.btn-shine {
  border: 1px solid;
  overflow: hidden;
  position: relative;
}

.btn-shine span {
  z-index: 20;
}

.btn-shine:after {
  background: #38ef7d;
  content: "";
  height: 155px;
  left: -75px;
  opacity: 0.4;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: -10;
}

.btn-shine:hover:after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
</style>


================================================
FILE: Buttons/mobinkakei_wise-walrus-71.html
================================================

<button class="btn">3D button</button>
<style>
/* From Uiverse.io by mobinkakei - Tags: 3d, button, hover */
.btn {
  --color1: #1a8516;
  --color2: #236b19;
  perspective: 1000px;
  padding: 1em 1em;
  background: linear-gradient(var(--color1), var(--color2));
  border: none;
  outline: none;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 10px 10px #000;
  cursor: pointer;
  transform: rotateX(70deg) rotateZ(30deg);
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.btn::before {
  content: "";
  width: 100%;
  height: 15px;
  background-color: var(--color2);
  position: absolute;
  bottom: 0;
  right: 0;
  transform: rotateX(90deg);
  transform-origin: bottom;
}

.btn::after {
  content: "";
  width: 15px;
  height: 100%;
  background-color: var(--color1);
  position: absolute;
  top: 0;
  right: 0;
  transform: rotateY(-90deg);
  transform-origin: right;
}

.btn:hover {
  transform: rotateX(30deg) rotateZ(0);
}

</style>


================================================
FILE: Buttons/mostafabazyar_horrible-goat-29.html
================================================
<button>Notification By HTML Data attribute</button>
<style>
/* From Uiverse.io by mostafabazyar - Tags: button */
button {
  position: relative;
  margin: 1rem;
  z-index: 2;
  border-radius: 8px;
  appearance: none;
  padding: 1em 2em;
  transition: all 0.2s;
}

button {
  padding: 1.2rem;
  position: relative;
  z-index: 1;
}

button::before {
  content: "6";
  position: absolute;
  display: flex;
  top: -0.75em;
  right: -0.75em;
  height: 1.8em;
  width: 1.8em;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: red;
  color: white;
  z-index: 999;
  transition: all 0.2s;
}

button:hover {
  border-radius: 3px;
  border-color: red;
}

button:hover::before {
  height: 2em;
  width: 2em;
  font-size: 1.5em;
}
</style>


================================================
FILE: Buttons/mouadh-n_dry-vampirebat-89.html
================================================
<a>
  <div class="buuton">HOVER ME</div>
  <div class="back"></div>
</a>

<style>
/* From Uiverse.io by mouadh-n  - Website: https://youtu.be/b_8fHNIHFk4?si=L-0kb3bKz6VlasUc - Name:  Coding Play - Tags: simple, blue, purple, button, hover, btn, hover effect, css */
a {
  color: white;
  position: relative;
}
.buuton {
  font-weight: 600;
  border-radius: 2em;
  padding: 0.75rem 1.5rem;
  background-color: rgba(255, 255, 255, 0.253);
  backdrop-filter: blur(10px);
  transform: scale(1.1);
  transition: 0.2s ease-in-out;
}
.back {
  position: absolute;
  background: linear-gradient(20deg, rgb(174, 6, 216) 0%, rgb(85, 31, 200));
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  border-radius: 2em;
  box-shadow: -5px 0 10px rgb(140, 12, 147), 5px 0 10px rgb(85, 31, 200);
  transform: translateY(10px);
}
.buuton:hover {
  transform: translateY(10px);
  box-shadow: -10px 0 50px rgba(241, 0, 108, 0.352),
    10px 0 50px rgb(85, 31, 200);
}

</style>
    

================================================
FILE: Buttons/mrhyddenn_afraid-skunk-10.html
================================================
<button>
    <span>Button</span>
</button>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button */
button {
  background: #fff;
  border: none;
  padding: 10px 20px;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  width: 120px;
  text-transform: uppercase;
  cursor: pointer;
  transform: skew(-21deg);
}

span {
  display: inline-block;
  transform: skew(21deg);
}

button::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  left: 0;
  background: rgb(20, 20, 20);
  opacity: 0;
  z-index: -1;
  transition: all 0.5s;
}

button:hover {
  color: #fff;
}

button:hover::before {
  left: 0;
  right: 0;
  opacity: 1;
}
</style>


================================================
FILE: Buttons/mrhyddenn_brown-penguin-10.html
================================================
<div class="uiverse">
    <span class="tooltip">uiverse.io</span>
    <span>
        Tooltip
    </span>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: tooltip, button */
.uiverse {
  position: relative;
  background: #ffffff;
  color: #000;
  padding: 15px;
  margin: 10px;
  border-radius: 10px;
  width: 150px;
  height: 50px;
  font-size: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #ffffff;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #ffffff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.uiverse:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

svg:hover span,
svg:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.uiverse:hover,
.uiverse:hover .tooltip,
.uiverse:hover .tooltip::before {
  background: linear-gradient(320deg, rgb(3, 77, 146), rgb(0, 60, 255));
  color: #ffffff;
}
</style>


================================================
FILE: Buttons/mrhyddenn_cuddly-moth-41.html
================================================
<button>
    <a>Hover me</a>
</button>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button */
button {
  background: transparent;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-weight: 600;
  border: none;
  padding: 20px 30px;
  perspective: 30rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.308);
}

button::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  background: linear-gradient(320deg, rgba(0, 140, 255, 0.678), rgba(128, 0, 128, 0.308));
  z-index: 1;
  transition: background 3s;
}

button:hover::before {
  animation: rotate 1s;
  transition: all .5s;
}

@keyframes rotate {
  0% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}
</style>


================================================
FILE: Buttons/mrhyddenn_cuddly-zebra-68.html
================================================
<button> MacOS Button
</button>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button, macOS */
button {
 width: 150px;
 padding: 4px 12px;
 border: none;
 border-radius: 7px;
 background: linear-gradient(#4faefc,#006bff);
 color: #fff;
 font-size: 17px;
 font-family: sans-serif;
}

button:focus {
 background: linear-gradient(#44aefc,#026bff);
 outline: 3px solid #4faefc;
}
</style>


================================================
FILE: Buttons/mrhyddenn_mighty-duck-73.html
================================================
<button>
    GET STARTED
</button>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button */
button {
  background-color: #1197cc;
  box-shadow: #094c66 4px 4px 0px;
  border-radius: 8px;
  padding: 15px 10px;
  color: #fff;
  border: none;
  font-weight: bold;
  font-size: 15px;
  text-transform: uppercase;
  min-width: 120px;
  transition: transform 200ms, box-shadow 200ms;
}

button:active {
  transform: translateY(4px) translateX(4px);
  box-shadow: #094c66 0px 0px 0px;
}
</style>


================================================
FILE: Buttons/mrhyddenn_modern-puma-17.html
================================================
<button>
    <span>Hover me</span>
</button>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button */
button {
  position: relative;
  margin: 0;
  padding: 0.8em 1em;
  outline: none;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none;
  text-transform: uppercase;
  background-color: #333;
  border-radius: 10px;
  color: #fff;
  font-weight: 300;
  font-size: 18px;
  font-family: inherit;
  z-index: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}

button:hover {
  animation: sh0 0.5s ease-in-out both;
}

@keyframes sh0 {
  0% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }

  25% {
    transform: rotate(7deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(-7deg) translate3d(0, 0, 0);
  }

  75% {
    transform: rotate(1deg) translate3d(0, 0, 0);
  }

  100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

button:hover span {
  animation: storm 0.7s ease-in-out both;
  animation-delay: 0.06s;
}

button::before,
button::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  z-index: -1;
  transform: translate(100%, -25%) translate3d(0, 0, 0);
}

button:hover::before,
button:hover::after {
  opacity: 0.15;
  transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
}

button:hover::before {
  transform: translate3d(50%, 0, 0) scale(0.9);
}

button:hover::after {
  transform: translate(50%, 0) scale(1.1);
}


</style>


================================================
FILE: Buttons/mrhyddenn_moody-badger-62.html
================================================
<button class="shadow__btn">
    uiverse
</button>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button, hover, glow */
.shadow__btn {
  padding: 10px 20px;
  border: none;
  font-size: 17px;
  color: #fff;
  border-radius: 7px;
  letter-spacing: 4px;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.5s;
  transition-property: box-shadow;
}

.shadow__btn {
  background: rgb(0,140,255);
  box-shadow: 0 0 25px rgb(0,140,255);
}

.shadow__btn:hover {
  box-shadow: 0 0 5px rgb(0,140,255),
              0 0 25px rgb(0,140,255),
              0 0 50px rgb(0,140,255),
              0 0 100px rgb(0,140,255);
}
</style>


================================================
FILE: Buttons/mrhyddenn_popular-sheep-67.html
================================================
<button class="icon-btn add-btn">
    <div class="add-icon"></div>
    <div class="btn-txt">Add Photo</div>
</button>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button */
.icon-btn {
  width: 50px;
  height: 50px;
  border: 1px solid #cdcdcd;
  background: white;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  transition: width 0.2s ease-in-out;
  font-weight: 500;
  font-family: inherit;
}

.add-btn:hover {
  width: 120px;
}

.add-btn::before,
.add-btn::after {
  transition: width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
  content: "";
  position: absolute;
  height: 4px;
  width: 10px;
  top: calc(50% - 2px);
  background: seagreen;
}

.add-btn::after {
  right: 14px;
  overflow: hidden;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.add-btn::before {
  left: 14px;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.icon-btn:focus {
  outline: none;
}

.btn-txt {
  opacity: 0;
  transition: opacity 0.2s;
}

.add-btn:hover::before,
.add-btn:hover::after {
  width: 4px;
  border-radius: 2px;
}

.add-btn:hover .btn-txt {
  opacity: 1;
}

.add-icon::after,
.add-icon::before {
  transition: all 0.2s ease-in-out;
  content: "";
  position: absolute;
  height: 20px;
  width: 2px;
  top: calc(50% - 10px);
  background: seagreen;
  overflow: hidden;
}

.add-icon::before {
  left: 22px;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.add-icon::after {
  right: 22px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.add-btn:hover .add-icon::before {
  left: 15px;
  height: 4px;
  top: calc(50% - 2px);
}

.add-btn:hover .add-icon::after {
  right: 15px;
  height: 4px;
  top: calc(50% - 2px);
}
</style>


================================================
FILE: Buttons/mrhyddenn_red-stingray-4.html
================================================
<button>
    <svg viewBox="0 0 16 16" class="bi bi-twitter" fill="currentColor" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
    </svg>
    <span>Twitter</span>
</button>
<style>
/* From Uiverse.io by mrhyddenn - Tags: twitter, button, hover */
button {
  background: transparent;
  position: relative;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgb(40, 144, 241);
  border-radius: 25px;
  outline: none;
  overflow: hidden;
  color: rgb(40, 144, 241);
  transition: color 0.3s 0.1s ease-out;
  text-align: center;
}

button span {
  margin: 10px;
}

button::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: '';
  border-radius: 50%;
  display: block;
  width: 20em;
  height: 20em;
  left: -5em;
  text-align: center;
  transition: box-shadow 0.5s ease-out;
  z-index: -1;
}

button:hover {
  color: #fff;
  border: 1px solid rgb(40, 144, 241);
}

button:hover::before {
  box-shadow: inset 0 0 0 10em rgb(40, 144, 241);
}
 
</style>


================================================
FILE: Buttons/mrhyddenn_slimy-jellyfish-95.html
================================================
<button>
    Hover me!
</button>
<style>
/* From Uiverse.io by mrhyddenn - Tags: gradient, button, circle */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  position: relative;
  cursor: pointer;
  height: 100px;
  border-radius: 100px;
  border: none;
  background: #333;
  color: #e5e5e5;
  font-weight: 600;
  box-shadow: inset 20px 20px 39px #080a10,
  inset -20px -20px 39px #1b263e;
  font-size: 13px;
}

button::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -10px;
  top: -10px;
  border-radius: 50%;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background: linear-gradient(35deg, rgb(47, 190, 238), rgb(218, 57, 143), rgb(139, 255, 23));
  filter: blur(10px);
}

button:hover::after {
  animation: rotcirclegr 1s linear infinite;
}

@keyframes rotcirclegr {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: Buttons/mrhyddenn_soft-moose-34.html
================================================
<div class="button">
    <a class="first"> Keep hovering me </a>
    <a class="slidein"> Welcome to uiverse</a>
    <a class="slidein two"> Keep going </a>
    <a class="slidein three"> Create on uiverse </a>
    <a class="slidein four"> Save favorite </a>
    <a class="slidein five"> ...and enjoy! </a>
    <a class="slidein six"> Respect us.</a>
    <a class="slidein seven"> and we will you. </a>
    <a class="slidein eight"> Happy coding. </a>
    <a class="slidein nine"> ...and thanks. </a>
    <a class="slidein ten"> uiverse.io </a>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button */
.button {
  cursor: pointer;
  position: relative;
  text-align: center;
  display: block;
  width: 200px;
  border: none;
  font-size: 12px;
  height: 45px;
  text-decoration: none;
  font-weight: 600;
  overflow: hidden;
  box-shadow: 0 10px 50px #006eff;
  border-radius: 10px;
  padding: 10px 20px;
}

.button .ten {
  line-height: 52px;
}

.button:hover .slidein {
  left: 0%;
}

.button:hover .two {
  left: 0%;
  transition-delay: 1.5s;
}

.button:hover .three {
  left: 0%;
  transition-delay: 3s;
}

.button:hover .four {
  left: 0%;
  transition-delay: 4.5s;
}

.button:hover .five {
  left: 0%;
  transition-delay: 6s;
}

.button:hover .six {
  left: 0%;
  transition-delay: 7.5s;
}

.button:hover .seven {
  left: 0%;
  transition-delay: 9s;
}

.button:hover .eight {
  left: 0%;
  transition-delay: 10.5s;
}

.button:hover .nine {
  left: 0%;
  transition-delay: 12s;
}

.button:hover .ten {
  left: 0%;
  transition-delay: 14s;
}

.button .slidein {
  background: #3398ff;
  left: -100%;
  z-index: 2;
}

.button a {
  text-transform: uppercase;
  transition: left 300ms;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  background: #006eff;
  position: absolute;
  font-weight: bold;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
}

.slidein:nth-child( even) {
  background: #348bfc !important;
}

.slidein:nth-child( odd) {
  background: #0873ff !important;
}
</style>


================================================
FILE: Buttons/mrhyddenn_spotty-rabbit-35.html
================================================
<button>
    <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 0h24v24H0z" fill="none"></path>
        <path d="M20 17h2v2H2v-2h2v-7a8 8 0 1 1 16 0v7zm-2 0v-7a6 6 0 1 0-12 0v7h12zm-9 4h6v2H9v-2z" fill="currentColor"></path>
    </svg>
</button>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button */
button {
  background: none;
  border: none;
  padding: 15px 15px;
  border-radius: 10px;
}

button:hover {
  background: rgba(170, 170, 170, 0.062);
  transition: 0.5s;
}

button svg {
  color: #fff;
}
</style>


================================================
FILE: Buttons/mrhyddenn_stale-cheetah-42.html
================================================
<button>
    Button
</button>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button */
button {
  position: relative;
  padding: 10px 20px;
  border-radius: 7px;
  border: 1px solid rgb(61, 106, 255);
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  background: transparent;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

button:hover {
  background: rgb(61, 106, 255);
  box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

button:hover::before {
  -webkit-animation: sh02 0.5s 0s linear;
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 0.5s 0s linear;
}

button::before {
  content: '';
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 50px 30px #fff;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

@keyframes sh02 {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
    left: 100%;
  }
}

button:active {
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in;
}

</style>


================================================
FILE: Buttons/mrhyddenn_tall-goose-46.html
================================================
<div class="button">
    <div class="box">H</div>
    <div class="box">O</div>
    <div class="box">V</div>
    <div class="box">E</div>
    <div class="box">R</div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button, hover */
.button {
  display: flex;
}

.box {
  width: 35px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  transition: all .8s;
  cursor: pointer;
  position: relative;
  background: rgb(58, 165, 253);
  overflow: hidden;
}

.box:before {
  content: "W";
  position: absolute;
  top: 0;
  background: #0f0f0f;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: transform .4s;
}

.box:nth-child(2)::before {
  transform: translateY(-100%);
  content: 'O';
}

.box:nth-child(3)::before {
  content: 'R';
}

.box:nth-child(4)::before {
  transform: translateY(-100%);
  content: 'L';
}

.box:nth-child(5)::before {
  content: 'D';
}

.button:hover .box:before {
  transform: translateY(0);
}
</style>


================================================
FILE: Buttons/mrhyddenn_tricky-baboon-12.html
================================================
<button class="button">
    <span class="button_lg">
        <span class="button_sl"></span>
        <span class="button_text">Download Now</span>
    </span>
</button>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button, download */
.button {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  color: #0f1923;
  cursor: pointer;
  position: relative;
  padding: 8px;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  transition: all .15s ease;
}

.button::before,
.button::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  height: calc(50% - 5px);
  border: 1px solid #7D8082;
  transition: all .15s ease;
}

.button::before {
  top: 0;
  border-bottom-width: 0;
}

.button::after {
  bottom: 0;
  border-top-width: 0;
}

.button:active,
.button:focus {
  outline: none;
}

.button:active::before,
.button:active::after {
  right: 3px;
  left: 3px;
}

.button:active::before {
  top: 3px;
}

.button:active::after {
  bottom: 3px;
}

.button_lg {
  position: relative;
  display: block;
  padding: 10px 20px;
  color: #fff;
  background-color: #0f1923;
  overflow: hidden;
  box-shadow: inset 0px 0px 0px 1px transparent;
}

.button_lg::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background-color: #0f1923;
}

.button_lg::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4px;
  height: 4px;
  background-color: #0f1923;
  transition: all .2s ease;
}

.button_sl {
  display: block;
  position: absolute;
  top: 0;
  bottom: -1px;
  left: -8px;
  width: 0;
  background-color: #ff4655;
  transform: skew(-15deg);
  transition: all .2s ease;
}

.button_text {
  position: relative;
}

.button:hover {
  color: #0f1923;
}

.button:hover .button_sl {
  width: calc(100% + 15px);
}

.button:hover .button_lg::after {
  background-color: #fff;
}

</style>


================================================
FILE: Buttons/mrhyddenn_unlucky-wolverine-36.html
================================================
<div class="container_mouse">
    <span class="mouse-btn">
        <span class="mouse-scroll"></span>
    </span>
    <span>Scroll Down</span>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button */
.mouse-btn {
  margin: 10px auto;
  width: 40px;
  height: 80px;
  border: 3px solid rgba(122, 122, 124, 0.918);
  border-radius: 20px;
  display: flex;
}

.mouse-scroll {
  display: block;
  width: 20px;
  height: 20px;
  background: linear-gradient(170deg, rgba(122, 122, 124, 0.918), rgb(123, 124, 124));
  border-radius: 50%;
  margin: auto;
  animation: scrolling13 1s linear infinite;
}

@keyframes scrolling13 {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(20px);
  }
}
</style>


================================================
FILE: Buttons/mrhyddenn_weak-swan-50.html
================================================
<button>
    <span>Button</span><i></i>
</button>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button */
button {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 30px;
  transition: 0.5s;
  position: relative;
  font-size: 17px;
  background: #333;
  border: none;
  color: #fff;
}

button:hover {
  letter-spacing: 0.25em;
  background: #ff1867;
  color: #ff1867;
  box-shadow: 0 0 45px #ff1867;
}

button::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: #222222;
}

button span {
  position: relative;
  z-index: 1;
}

button i {
  position: absolute;
  inset: 0;
  display: block;
}

button i::before {
  content: '';
  position: absolute;
  border: 2px solid #ff1867;
  width: 7px;
  height: 4px;
  top: -3.5px;
  left: 80%;
  background: #222222;
  transform: translateX(-50%);
  transition: 0.5s;
}

button:hover i::before {
  width: 20px;
  left: 20%;
}

button i::after {
  content: '';
  position: absolute;
  border: 2px solid #ff1867;
  width: 7px;
  height: 4px;
  bottom: -3.5px;
  left: 20%;
  background: #222222;
  transform: translateX(-50%);
  transition: 0.5s;
}

button:hover i::after {
  width: 20px;
  left: 80%;
}
</style>


================================================
FILE: Buttons/mrhyddenn_wet-cobra-49.html
================================================
<div class="scrolldown" style="--color: skyblue">
    <div class="chevrons">
        <div class="chevrondown"></div>
        <div class="chevrondown"></div>
    </div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: button */
.scrolldown {
  --color: white;
  --sizeX: 30px;
  --sizeY: 50px;
  position: relative;
  width: var(--sizeX);
  height: var(--sizeY);
  margin-left: var(sizeX / 2);
  border: calc(var(--sizeX) / 10) solid var(--color);
  border-radius: 50px;
  box-sizing: border-box;
  margin-bottom: 16px;
  cursor: pointer;
}

.scrolldown::before {
  content: "";
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: var(--color);
  border-radius: 100%;
  animation: scrolldown-anim 2s infinite;
  box-sizing: border-box;
  box-shadow: 0px -5px 3px 1px #2a547066;
}

@keyframes scrolldown-anim {
  0% {
    opacity: 0;
    height: 6px;
  }

  40% {
    opacity: 1;
    height: 10px;
  }

  80% {
    transform: translate(0, 20px);
    height: 10px;
    opacity: 0;
  }

  100% {
    height: 3px;
    opacity: 0;
  }
}

.chevrons {
  padding: 6px 0 0 0;
  margin-left: -3px;
  margin-top: 48px;
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chevrondown {
  margin-top: -6px;
  position: relative;
  border: solid var(--color);
  border-width: 0 3px 3px 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}

.chevrondown:nth-child(odd) {
  animation: pulse54012 500ms ease infinite alternate;
}

.chevrondown:nth-child(even) {
  animation: pulse54012 500ms ease infinite alternate 250ms;
}

@keyframes pulse54012 {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.5;
  }
}
</style>


================================================
FILE: Buttons/mrtqzbek11_ancient-octopus-81.html
================================================
<button class="arc-btn-retro">
  Submit
</button>
<style>
/* From Uiverse.io by mrtqzbek11 - Tags: button */
button {
  width: 136px;
  height: 46px;
  background-color: #19fb9b;
  border: 1px solid black;
  border-radius: 6px;
  cursor: pointer;
  font-size: 17px;
  transition: .4s;
}

button:hover {
  box-shadow: 5px 6px 0px rgb(0, 0, 0);
}


/*Check it out in light theme :) <3 */
</style>


================================================
FILE: Buttons/mrtqzbek11_moody-bulldog-15.html
================================================
<button>
  Hold that
</button>
<style>
/* From Uiverse.io by mrtqzbek11 - Tags: gradient, button, active, neon */
button {
  width: 165px;
  height: 62px;
  cursor: pointer;
  color: #fff;
  font-size: 17px;
  border-radius: 1rem;
  border: none;
  position: relative;
  background: #100720;
  transition: 0.1s;
}

button::after {
  content: '';
  width: 100%;
  height: 100%;
  background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );
  filter: blur(15px);
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
}

button:active {
  transform: scale(0.9) rotate(3deg);
  background: radial-gradient( circle farthest-corner at 10% 20%,  rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );
  transition: 0.5s;
}
</style>


================================================
FILE: Buttons/mtsrakibul1_proud-emu-92.html
================================================
<nav class="menu">
  <input
    id="menu-open"
    name="menu-open"
    class="menu-open"
    href="#"
    type="checkbox"
  />
  <label for="menu-open" class="menu-open-button">
    <span class="lines line-1"></span>
    <span class="lines line-2"></span>
    <span class="lines line-3"></span>
  </label>

  <a class="menu-item blue" href="#"> <i class="fa fa-anchor"></i> </a>
  <a class="menu-item green" href="#"> <i class="fa fa-coffee"></i> </a>
  <a class="menu-item red" href="#"> <i class="fa fa-heart"></i> </a>
  <a class="menu-item purple" href="#"> <i class="fa fa-microphone"></i> </a>
  <a class="menu-item orange" href="#"> <i class="fa fa-star"></i> </a>
  <a class="menu-item lightblue" href="#"> <i class="fa fa-diamond"></i> </a>
</nav>

<style>
/* From Uiverse.io by mtsrakibul1  - Tags: button */
.menu-item,
.menu-open-button {
  background: #eeeeee;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  position: absolute;
  color: #ffffff;
  text-align: center;
  line-height: 80px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
}

.menu-open {
  display: none;
}

.lines {
  width: 25px;
  height: 3px;
  background: #596778;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  -webkit-transition: -webkit-transform 200ms;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
}

.line-1 {
  -webkit-transform: translate3d(0, -8px, 0);
  transform: translate3d(0, -8px, 0);
}

.line-2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.line-3 {
  -webkit-transform: translate3d(0, 8px, 0);
  transform: translate3d(0, 8px, 0);
}

.menu-open:checked + .menu-open-button .line-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.menu-open:checked + .menu-open-button .line-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.menu-open:checked + .menu-open-button .line-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 80px;
  height: 80px;
  text-align: center;
  box-sizing: border-box;
  font-size: 26px;
}

/* .menu-item {
   transition: all 0.1s ease 0s;
} */

.menu-item:hover {
  background: #eeeeee;
  color: #091974;
}

.menu-item:nth-child(3) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(4) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(5) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(6) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(7) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(8) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(9) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-open-button {
  z-index: 2;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
  -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.menu-open:checked ~ .menu-item:nth-child(3) {
  transition-duration: 180ms;
  -webkit-transition-duration: 180ms;
  -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
  transform: translate3d(0.08361px, -104.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(4) {
  transition-duration: 280ms;
  -webkit-transition-duration: 280ms;
  -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
  transform: translate3d(90.9466px, -52.47586px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(5) {
  transition-duration: 380ms;
  -webkit-transition-duration: 380ms;
  -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
  transform: translate3d(90.9466px, 52.47586px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(6) {
  transition-duration: 480ms;
  -webkit-transition-duration: 480ms;
  -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
  transform: translate3d(0.08361px, 104.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(7) {
  transition-duration: 580ms;
  -webkit-transition-duration: 580ms;
  -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
  transform: translate3d(-90.86291px, 52.62064px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(8) {
  transition-duration: 680ms;
  -webkit-transition-duration: 680ms;
  -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
  transform: translate3d(-91.03006px, -52.33095px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(9) {
  transition-duration: 780ms;
  -webkit-transition-duration: 780ms;
  -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
  transform: translate3d(-0.25084px, -104.9997px, 0);
}

.blue {
  background-color: #b908ff;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.blue:hover {
  color: #669ae1;
  text-shadow: none;
}

.green {
  background-color: #70cc72;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.green:hover {
  color: #70cc72;
  text-shadow: none;
}

.red {
  background-color: #fe4365;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.red:hover {
  color: #fe4365;
  text-shadow: none;
}

.purple {
  background-color: #c49cde;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.purple:hover {
  color: #c49cde;
  text-shadow: none;
}

.orange {
  background-color: #fc913a;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.orange:hover {
  color: #fc913a;
  text-shadow: none;
}

.lightblue {
  background-color: #62c2e4;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.lightblue:hover {
  color: #62c2e4;
  text-shadow: none;
}

.credit {
  margin: 24px 20px 120px 0;
  text-align: right;
  color: #eeeeee;
}

.credit a {
  padding: 8px 0;
  color: #c49cde;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}

.credit a:hover {
  text-decoration: underline;
}

</style>
    

================================================
FILE: Buttons/mucahit312ataman610_bright-rattlesnake-77.html
================================================
<button class="button">Buton</button>

<style>
/* From Uiverse.io by mucahit312ataman610 - Tags: button, hover */
.button {
  --primary-color: #000;
  --secondary-color: #fff;
  --border-color: #000;
  background-color: var(--primary-color);
  border: 2px solid var(--border-color);
  color: var(--secondary-color);
  padding: 10px 20px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 50px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease-in-out;
}

.button::before {
  content: "";
  display: block;
  position: absolute;
  top: -100%;
  left: 50%;
  width: 150%;
  height: 150%;
  background-color: var(--secondary-color);
  border-radius: 50%;
  transform: translate(-50%, 0) scale(0);
  z-index: -1;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  transform: translateY(-5px);
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
}

.button:hover::before {
  transform: translate(-50%, -50%) scale(2);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

</style>


================================================
FILE: Buttons/n-jaisabai_lovely-bullfrog-53.html
================================================
<div class="button">EXPLORE GALAXY</div>
<style>
/* From Uiverse.io by n-jaisabai - Tags: button */
.button {
  background: radial-gradient(ellipse at top, white, blue, black, black);
  color: white;
  position: relative;
  background-size: 130% 130%;
  background-position: center center;
  padding: 15px 30px;
}

.button:hover {
  background: radial-gradient(ellipse at top, white, blue, black, black);
  animation: gradient 4s;
  animation-fill-mode: forwards;
  /* background-position: center center; */
}

.button:hover:after {
  content: "";
  position: absolute;
  inset: -.625em;
  background: radial-gradient(ellipse at top, white, blue, black, black);
  /* background-position: center center; */
  filter: blur(1.5em);
  z-index: -1;
  animation: gradient 4s;
  animation-fill-mode: forwards;
}

@keyframes gradient {
  0% {
    background-size: 130% 130%;
  }

  100% {
    background-size: 200% 200%;
  }
}

</style>


================================================
FILE: Buttons/namecho_slippery-moth-23.html
================================================
<button> HOVER ME
</button>
<style>
/* From Uiverse.io by namecho - Tags: button, glitch */
button,
button::after {
 padding: 16px 20px;
 font-size: 18px;
 background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
 border: 0;
 color: #fff;
 letter-spacing: 3px;
 line-height: 1;
 box-shadow: 6px 0px 0px #00e6f6;
 outline: transparent;
 position: relative;
}

button::after {
 --slice-0: inset(50% 50% 50% 50%);
 --slice-1: inset(80% -6px 0 0);
 --slice-2: inset(50% -6px 30% 0);
 --slice-3: inset(10% -6px 85% 0);
 --slice-4: inset(40% -6px 43% 0);
 --slice-5: inset(80% -6px 5% 0);
 content: "HOVER ME";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(45deg, transparent 3%, #00e6f6 3%, #00e6f6 5%, #ff013c 5%);
 text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
 clip-path: var(--slice-0);
}

button:hover::after {
 animation: 1s glitch;
 animation-timing-function: steps(2, end);
}

@keyframes glitch {
 0% {
  clip-path: var(--slice-1);
  transform: translate(-20px, -10px);
 }

 10% {
  clip-path: var(--slice-3);
  transform: translate(10px, 10px);
 }

 20% {
  clip-path: var(--slice-1);
  transform: translate(-10px, 10px);
 }

 30% {
  clip-path: var(--slice-3);
  transform: translate(0px, 5px);
 }

 40% {
  clip-path: var(--slice-2);
  transform: translate(-5px, 0px);
 }

 50% {
  clip-path: var(--slice-3);
  transform: translate(5px, 0px);
 }

 60% {
  clip-path: var(--slice-4);
  transform: translate(5px, 10px);
 }

 70% {
  clip-path: var(--slice-2);
  transform: translate(-10px, 10px);
 }

 80% {
  clip-path: var(--slice-5);
  transform: translate(20px, -10px);
 }

 90% {
  clip-path: var(--slice-1);
  transform: translate(-10px, 0px);
 }

 100% {
  clip-path: var(--slice-1);
  transform: translate(0);
 }
}

</style>


================================================
FILE: Buttons/natelyt12_calm-pug-41.html
================================================
<button class="btn-1">Hover me!</button>

<style>
/* From Uiverse.io by natelyt12  - Tags: button */
.btn-1 {
  position: relative;
  color: white;
  border: none;
  padding: 8px 20px;
  transition: 300ms;
  box-sizing: border-box;
  background-color: transparent;
}

.btn-1::before {
  content: "";
  position: absolute;
  background-color: white;
  top: 0;
  left: 0;
  width: 0px;
  height: 100%;
  transition: 300ms;
  transform: skewX(-20deg);
}

.btn-1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 100%;
  transition: 300ms;
  background-color: white;
  opacity: 0.2;
  transform: skewX(-20deg);
}

.btn-1:hover {
  padding-left: 25px;
  cursor: pointer;
}

.btn-1:hover::before {
  width: 5px;
}

.btn-1:hover::after {
  width: 100%;
}

</style>
    

================================================
FILE: Buttons/nathAd17_heavy-warthog-57.html
================================================
<!-- From Uiverse.io by nathAd17  - Tags: button -->
<button
  class="font-sans flex justify-center gap-2 items-center mx-auto shadow-xl text-lg bg-gray-50 backdrop-blur-md lg:font-semibold isolation-auto border-gray-50 before:absolute before:w-full before:transition-all before:duration-700 before:hover:w-full before:-left-full before:hover:left-0 before:rounded-full before:bg-emerald-500 hover:text-gray-50 before:-z-10 before:aspect-square before:hover:scale-150 before:hover:duration-700 relative z-10 px-4 py-2 overflow-hidden border-2 rounded-full group"
  type="submit"
>
  Explore
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 16 19"
    class="w-8 h-8 justify-end group-hover:rotate-90 group-hover:bg-gray-50 text-gray-50 ease-linear duration-300 rounded-full border border-gray-700 group-hover:border-none p-2 rotate-45"
  >
    <path
      class="fill-gray-800 group-hover:fill-gray-800"
      d="M7 18C7 18.5523 7.44772 19 8 19C8.55228 19 9 18.5523 9 18H7ZM8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM9 18L9 1H7L7 18H9Z"
    ></path>
  </svg>
</button>


    

================================================
FILE: Buttons/nazarbayev01_moody-otter-91.html
================================================
<button class="button">button</button>
<style>
/* From Uiverse.io by nazarbayev01 - Tags: button, active */
button {
  padding: 1em 2em;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  letter-spacing: 3px;
  background: #DCFFFC;
  text-transform: uppercase;
  color: #088178;
  transition: all 1000ms;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  outline: 2px solid #088178;
}

button:hover {
  color: #DCFFFC;
  transform: scale(1);
  outline: 2px solid #088178;
  box-shadow: 4px 5px 17px -4px #088178;
}

button::before {
  content: "";
  position: absolute;
  left: -50px;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #088178;
  transform: skewX(30deg);
  z-index: -1;
  transition: width 1000ms;
}

button:hover::before {
  width: 250%;
}
</style>


================================================
FILE: Buttons/neerajbaniwal_hungry-mule-59.html
================================================
<a class="btn-shine" href="https://check.so">Get early access</a>

<style>
/* From Uiverse.io by neerajbaniwal  - Tags: button, transition, text, btn, hover effect, html, css, #button */
.btn-shine {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 48px;
  color: #fff;
  background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #868686 20%);
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  -webkit-text-size-adjust: none;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  font-family: "Poppins", sans-serif;
}
@-moz-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
@-webkit-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
@-o-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}

</style>
    

================================================
FILE: Buttons/neerajbaniwal_old-cobra-77.html
================================================
<div class="container">
  <input name="power" id="power" type="checkbox" />
  <label class="power" for="power">
    <span class="icon-off"></span>
    <span class="light"></span>
  </label>
</div>

<style>
/* From Uiverse.io by neerajbaniwal  - Tags: button, hover button, button hover effect , 2d button */
.container {
  width: 150px;
  height: 130px;
  padding-top: 20px;
  margin: 50px auto;
}

#power {
  position: absolute;
  left: -9999px;
}

label {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  margin: auto;
  border: 4px solid #636679;
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    #efefef 0%,
    #eee 80%,
    #fff 100%
  );
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    #efefef 0%,
    #eee 80%,
    #fff 100%
  );
  background: radial-gradient(
    center,
    ellipse cover,
    #fefefe 0%,
    #eee 80%,
    #fff 100%
  );
  box-shadow: inset 0 -5px 10px 0 #d0d5eb, inset 0 5px 10px 0 #fff,
    0 0 0 1px #333;
  cursor: pointer;
  text-align: center;
  font-size: 40px;
  color: #0f0;
  line-height: 100px;
  text-shadow: -1px -1px 0px #fff, 1px 1px 0px #fff;
  transition: all 0.1s ease-in-out;
}

label:after,
label:before {
  display: block;
  content: "";
  position: absolute;
}

label:before {
  width: 150px;
  height: 150px;
  border-radius: 20px;
  background: -webkit-linear-gradient(
    top,
    #fefefe 0%,
    #eee 30%,
    #ddd 82%,
    #ddd 100%
  );
  background: -moz-linear-gradient(
    top,
    #fefefe 0%,
    #eee 30%,
    #ddd 82%,
    #ddd 100%
  );
  background: linear-gradient(top, #fefefe 0%, #eee 30%, #ddd 82%, #ddd 100%);
  box-shadow: 0 10px 30px 0 #000;
  top: -25px;
  left: -25px;
  z-index: -2;
}

label:after {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  top: -15px;
  left: -15px;
  z-index: -1;
  box-shadow: 0 -2px 5px 0px #fefefe, 0 2px 5px 0 #ccc;
  background: rgb(210, 215, 237);
  background: -webkit-linear-gradient(
    top,
    #ddd 0%,
    #ddd 30%,
    #eee 82%,
    #efefef 100%
  );
  background: -moz-linear-gradient(
    top,
    #ddd 0%,
    #ddd 30%,
    #eee 82%,
    #efefef 100%
  );
  background: linear-gradient(top, #ddd 0%, #ddd 30%, #eee 82%, #efefef 100%);
}

.light {
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -12px;
  right: -12px;
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    #fff 0%,
    #d6f804 80%,
    #bade32 100%
  );
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    #fff 0%,
    #d6f804 80%,
    #bade32 100%
  );
  background: radial-gradient(
    center,
    ellipse cover,
    #fff 0%,
    #d6f804 80%,
    #bade32 100%
  );
  box-shadow: inset 0 1px 1px 0 #333, inset 0 -1px 1px 0 #333,
    0 0 5px 1px #bade32;
  border-radius: 50%;
  transition: all 0.1s ease-in-out;
}

.icon-off {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #d6f804;
  box-shadow: inset 0 0 4px 0 #999;
  transition: all 0.1s ease-in-out;
}

.icon-off:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eee;
  box-shadow: 0 0 3px 0 #999;
  z-index: 2;
}

.icon-off:before {
  display: block;
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  margin: auto;
  width: 8px;
  height: 25px;
  background: #d6f804;
  box-shadow: inherit;
  border-radius: 10px;
  border-style: solid;
  border-width: 0 3px 0;
  border-color: #eee;
  z-index: 3;
  transition: all 0.1s ease-in-out;
}

#power:checked + label {
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    #ddd 0%,
    #eee 80%,
    #efefef 100%
  );
  background: radial-gradient(
    center,
    ellipse cover,
    #ddd 0%,
    #eee 80%,
    #efefef 100%
  );
  background: radial-gradient(
    center,
    ellipse cover,
    #ddd 0%,
    #eee 80%,
    #efefef 100%
  );
  box-shadow: inset 0 -5px 10px 0 #aaa, inset 0 5px 10px 0 #aaa, 0 0 0 1px #333;
  transition: all 0.1s linear;
}

#power:checked + label .light {
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    #fcc 0%,
    #f88 60%,
    #f00 100%
  );
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    #fcc 0%,
    #f88 60%,
    #f00 100%
  );
  background: radial-gradient(
    center,
    ellipse cover,
    #fcc 0%,
    #f88 60%,
    #f00 100%
  );
  box-shadow: inset 0 1px 1px 0 #555, inset 0 -1px 1px 0 #555, 0 0 5px 0 #f55;
  transition: all 0.1s linear;
}

#power:checked + label .icon-off {
  background: transparent;
  box-shadow: inset 0 0 5px 0 #777;
  transition: all 0.1s linear;
}

#power:checked + label .icon-off:after {
  background: inherit;
  box-shadow: 0 0 5px 0 #777;
}

#power:checked + label .icon-off:before {
  background: #ddd;
  border-color: #dfdfdf;
  box-shadow: inherit;
  transition: all 0.1s linear;
}

</style>
    

================================================
FILE: Buttons/neerajbaniwal_strong-pig-36.html
================================================
<button class="button"><span>➢</span> Button</button>

<style>
/* From Uiverse.io by neerajbaniwal  - Tags: simple, button, 3d button */
.button {
  display: inline-flex;
  align-items: center;
  padding: 15px 40px;
  background-color: #fefefe;
  border: 1px solid #dcdcdc;
  border-radius: 12px;

  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 0;
  outline: 2px solid #fafafa;
  box-shadow: 9px 9px 44px #cecece3a, -9px -9px 44px #d3d3d33d,
    inset 0 0 0 2px rgba(192, 192, 192, 0.25);
}

.button::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 30px;
  background: linear-gradient(
    0deg,
    #fbfbfb 0%,
    #fafafa 5%,
    #f7f7f7 72%,
    #f2f2f2 86%,
    #f0f0f0 100%
  );
  box-shadow: inset 0 2px 7px rgba(143, 143, 143, 0.16);
  transition: all 0.3s ease;
  z-index: -1;
  margin: 2px;
}

.button:focus {
  outline: 2px solid #fefefe;
  box-shadow: 9px 9px 44px #cecece3a, -9px -9px 44px #d3d3d33d,
    inset 0 0 0 2px rgba(192, 192, 192, 0.5);
}

.send-icon {
  margin-right: 5px;
  transition: transform 0.3s ease;
}

.button:hover span {
  transform: translateX(7px);
  transition: all 0.4s;
}

.button span {
  transform: rotate(-40deg);
  margin-right: 10px;
  transition: all 0.4s;
}

</style>
    

================================================
FILE: Buttons/newrocker2468_tiny-frog-22.html
================================================
<button class="button1">
 Click me!
</button>
<style>
/* From Uiverse.io by newrocker2468 - Tags: simple, green, button, hover, simple button, #button */
.button1 {
  background-color: white;
  font-weight: bold;
  font-size: 1em;
  border: none;
  border-radius: 5px;
  padding: 1.2em;
  color: rgb(0, 0, 0);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 500ms;
  z-index: 99;
}

.button1::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 20px;
  bottom: -30px;
  left: 45px;
  background-color: #5affc0;
  z-index: -99;
  transition: all 500ms;
}

.button1:hover::after {
  width: 120px;
  height: 60px;
  border-radius: 10px;
  transition: all 500ms;
  bottom: -1px;
  left: -1px;
}

.button1:hover {
  border-radius: 20px;
  box-shadow: 0 0 100px 20px #5affc0;
}

.button1:active {
  transform: translateY(10px);
}

.button1:focus {
  border: 5px solid #a0fad8;
}

</style>


================================================
FILE: Buttons/nhfiz_unlucky-pug-80.html
================================================
<button>
 <span class="icon">
    
<svg height="303.09363" width="187.41829" version="1.1">
  <path id="path4" stroke-linecap="round" style="stroke:none;stroke-width:2.81;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none" d="m 105.04479,7.9451197 c -0.54247,-0.518571 -1.09286,-1.029222 -1.64524,-1.54186 -0.61595,-0.572255 -1.22596,-1.146482 -1.85384,-1.710782 -1.25775,-1.134567 -2.537358,-2.259184 -3.844788,-3.36394 -2.09427,-1.77237697 -5.16413,-1.77038997 -7.26039,0 -1.30742,1.104756 -2.58107,2.227394 -3.83882,3.35798 -0.63782,0.574234 -1.25577,1.156416 -1.87769,1.734625 -0.53847,0.502703 -1.0829,1.003419 -1.61143,1.512084 -0.88818,0.848436 -1.75648,1.70482 -2.61684,2.5651783 -0.14306,0.143062 -0.28811,0.288111 -0.42919,0.43316 -17.060123,17.22703 -28.588524,37.172235 -35.801225,61.735159 -0.125179,0.435146 -0.260293,0.860358 -0.387459,1.293517 -0.04371,0.154984 -0.09339,0.300033 -0.137101,0.455017 -0.0099,0.03377 -0.0079,0.07153 -0.01788,0.105302 -5.766187,20.286964 -8.524101,43.53849 -8.524101,70.45796 0,3.05993 0.05365,6.10596 0.13114,9.14403 l -24.167515,28.14543 c -0.707361,0.82261 -1.160391,1.83199 -1.3074264,2.90495 l -9.80369097,72.24621 c -0.311955,2.29892 0.818631,4.55414 2.84931497,5.67479 2.028696,1.12263 4.538239,0.88221 6.320552,-0.60206 L 51.189952,227.47351 h 24.37615 c -3.33215,5.3072 -5.31316,12.12847 -5.31514,19.66505 0.002,4.51638 0.72127,8.8599 2.15983,12.95305 1.93929,5.40854 7.59023,18.67752 13.573,32.72739 l 2.91687,6.85505 c 0.88221,2.07439 2.91687,3.42156 5.17208,3.41957 1.52003,0.002 2.94072,-0.61199 3.97593,-1.6472 0.49873,-0.49873 0.90804,-1.09879 1.19615,-1.77635 l 3.020198,-7.10143 c 5.93309,-13.93661 11.53635,-27.10227 13.48358,-32.51875 1.42267,-4.06137 2.14394,-8.40687 2.14394,-12.91729 0,-7.53459 -1.983,-14.35387 -5.31515,-19.66107 h 23.65289 l 41.9668,35.01637 c 1.78032,1.48626 4.29185,1.72469 6.32055,0.60205 0.46892,-0.2583 0.88817,-0.5782 1.25378,-0.94381 1.22,-1.22 1.83596,-2.96058 1.59553,-4.73097 l -9.80569,-72.24027 c -0.14704,-1.07297 -0.60007,-2.08235 -1.30743,-2.90495 l -23.45419,-27.31289 c 0.0914,-3.31427 0.14107,-6.63847 0.14306,-9.97857 0,-26.93934 -2.75792,-50.202781 -8.53006,-70.499678 -0.006,-0.02183 -0.006,-0.0457 -0.012,-0.06753 -0.0278,-0.09936 -0.0596,-0.190728 -0.0874,-0.290098 -0.26625,-0.929902 -0.5484,-1.843908 -0.83055,-2.761888 -7.23257,-23.950938 -18.64573,-43.486827 -35.37602,-60.391968 -0.16279,-0.16704 -0.32573,-0.329972 -0.49064,-0.49489 -0.84022,-0.8487053 -1.69701,-1.6927643 -2.57114,-2.5274333 z m 12.504,114.1176503 c 0,6.2669 -2.44,12.16423 -6.87492,16.59915 -4.43293,4.43293 -10.32827,6.87491 -16.599138,6.87491 -12.94511,-0.002 -23.47407,-10.53094 -23.47605,-23.47605 v 0 c 0.004,-12.94709 10.53889,-23.47406 23.47406,-23.47406 6.268888,-0.002 12.166218,2.43801 16.601138,6.87293 4.43491,4.43492 6.8769,10.33025 6.87491,16.60312 z"></path>
</svg>

   </span>
<span class="text">
Launch
</span>   
<span class="launch">
</span>   
</button>
<style>
/* From Uiverse.io by nhfiz - Tags: button */
button {
  padding: 15px 30px 15px 50px;
  background: #181c35;
  border-radius: 30px;
  display: flex;
  position: relative;
  color: #fff;
  font-weight: 400;
  overflow: hidden;
  transition: all ease-in-out .5s;
  border: #ffffff56 solid 1px;
  box-shadow: #51eafd 0px 0px 50px -15px;
}

button:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: -90%;
  left: -90%;
  filter: blur(20px);
  background: #a11ee3;
}

button:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -90%;
  right: -90%;
  filter: blur(20px);
  background: #51eafd;
}

button .icon {
  transform: scale(0.07);
  width: 20px;
  height: 20px;
  position: absolute;
  left: 14px;
  top: 2px;
  transition: all ease-in-out .5s;
  z-index: 9;
  rotate: 45deg
}

button .icon path {
  fill: #fff;
}

button .launch {
  background: fff;
  background: #fff;
  width: 300px;
  height: 300px;
  rotate: 45deg;
  position: absolute;
  left: -9px;
  top: 550%;
  z-index: 0;
  transform: translateX(-56%);
  transition: all ease-in-out 1s;
}

button .text {
  z-index: 9;
  transition: all ease-in-out .3s;
}

button:hover .icon {
  transform: scale(0.07);
  animation: shake_341 2s infinite;
  top: 5px;
  left: 8px;
  rotate: 0deg;
}

button:active {
  transform: scale(0.7);
}

button:hover {
  box-shadow: 0px 0px 0px 10px #00000017;
}

button:focus {
  color: #464646;
}

button:focus .icon {
  transform: scale(0.07);
  animation: launch_341 2s alternate;
}

button:focus .icon path {
  animation: fill_341 2s linear;
  animation-fill-mode: forwards;
}

button:focus .launch {
  top: -90%;
}

@keyframes shake_341 {
  10%, 90% {
    transform: scale(0.07) translate3d(-6px, 0, 0);
  }

  20%, 80% {
    transform: scale(0.07)  translate3d(7px, 0, 0);
  }

  30%, 50%, 70% {
    transform: scale(0.07)  translate3d(-9px, 0, 0);
  }

  40%, 60% {
    transform: scale(0.07)  translate3d(9px, 0, 0);
  }
}

@keyframes launch_341 {
  0% {
    top: 0px;
    opacity: 1;
  }

  20% {
    top: -100%;
    opacity: 1;
  }

  20.5% {
    opacity: 0;
  }

  24% {
    opacity: 0;
    top: 100%;
  }

  25% {
    opacity: 1;
  }

  100% {
    top: 6px;
  }
}

@keyframes fill_341 {
  0% {
    fill: #fff;
  }

  20% {
    fill: #fff;
  }

  20.5% {
    opacity: 0;
  }

  100% {
    fill: #464646;
  }
}
</style>


================================================
FILE: Buttons/niat786_moody-horse-75.html
================================================
<button>
    GET STARTED
</button>
<style>
/* From Uiverse.io by niat786 - Tags: button */
button {
  border-radius: .25rem;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 400;
  padding-left: 25px;
  padding-right: 25px;
  color: #fff;
  -webkit-clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);
  clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);
  height: 40px;
  font-size: 0.7rem;
  line-height: 14px;
  letter-spacing: 1.2px;
  transition: .2s .1s;
  background-image: linear-gradient(90deg,#1c1c1c,#6220fb);
  border: 0 solid;
  overflow: hidden;
}

button:hover {
  cursor: pointer;
  transition: all .3s ease-in;
  padding-right: 30px;
  padding-left: 30px;
}
</style>


================================================
FILE: Buttons/niat786_perfect-warthog-57.html
================================================
<button> Button
</button>
<style>
/* From Uiverse.io by niat786 - Tags: button */
button {
 border: none;
 color: #fff;
 background-image: linear-gradient(30deg, #0400ff, #4ce3f7);
 border-radius: 20px;
 background-size: 100% auto;
 font-family: inherit;
 font-size: 17px;
 padding: 0.6em 1.5em;
}

button:hover {
 background-position: right center;
 background-size: 200% auto;
 -webkit-animation: pulse 2s infinite;
 animation: pulse512 1.5s infinite;
}

@keyframes pulse512 {
 0% {
  box-shadow: 0 0 0 0 #05bada66;
 }

 70% {
  box-shadow: 0 0 0 10px rgb(218 103 68 / 0%);
 }

 100% {
  box-shadow: 0 0 0 0 rgb(218 103 68 / 0%);
 }
}
</style>


================================================
FILE: Buttons/niat786_swift-bullfrog-83.html
================================================
<button> Followers
  <span class="followers">&nbsp; 65.7K </span>
</button>
<style>
/* From Uiverse.io by niat786 - Tags: button */
button {
 font-family: PlusJakartaSans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Cantarell,Helvetica Neue,Ubuntu,sans-serif;
 font-size: 1rem;
 align-items: center;
 height: 48px;
 border-radius: 0.4rem;
 font-weight: 600;
 padding: 0 1.2rem;
 color: #ddd;
 border: none;
 box-shadow: 0 .5rem 1rem rgba(143, 142, 142, 0.15)!important;
 background: #000000;
}

.followers {
 font-size: 0.8rem;
 color: #7f7f7f;
}

button:hover {
 background: #2b2a2a;
}


</style>


================================================
FILE: Buttons/niat786_tender-cobra-42.html
================================================
<button> Hover Me
</button>
<style>
/* From Uiverse.io by niat786 - Tags: button */
button {
 border-radius: 999px;
 padding: 1em 2em;
 background: linear-gradient(117deg, rgb(254, 145, 80), rgb(254, 100, 70));
 border: none;
 color: rgb(255, 255, 255);
 font-size: 1rem;
 text-transform: uppercase;
 font-family: inherit;
 font-weight: 500;
 cursor: pointer;
 transition: box-shadow 0.25s ease 0s;
 letter-spacing: 0.08rem;
}

button:hover,
button:focus {
 background: linear-gradient(117deg, rgb(248, 137, 73), rgb(248, 82, 49));
 box-shadow: 0 0.1rem 0.8rem rgb(254, 100, 70);
}
</style>


================================================
FILE: Buttons/nikk7007_blue-mayfly-40.html
================================================
<button class="button"> Button
</button>
<style>
/* From Uiverse.io by nikk7007 - Tags: button */
.button {
 --color: #00A97F;
 padding: 0.8em 1.7em;
 background-color: transparent;
 border-radius: .3em;
 position: relative;
 overflow: hidden;
 cursor: pointer;
 transition: .5s;
 font-weight: 400;
 font-size: 17px;
 border: 1px solid;
 font-family: inherit;
 text-transform: uppercase;
 color: var(--color);
 z-index: 1;
}

.button::before, .button::after {
 content: '';
 display: block;
 width: 50px;
 height: 50px;
 transform: translate(-50%, -50%);
 position: absolute;
 border-radius: 50%;
 z-index: -1;
 background-color: var(--color);
 transition: 1s ease;
}

.button::before {
 top: -1em;
 left: -1em;
}

.button::after {
 left: calc(100% + 1em);
 top: calc(100% + 1em);
}

.button:hover::before, .button:hover::after {
 height: 410px;
 width: 410px;
}

.button:hover {
 color: rgb(10, 25, 30);
}

.button:active {
 filter: brightness(.8);
}

</style>


================================================
FILE: Buttons/nikk7007_chatty-bulldog-58.html
================================================
<button> Hover me
</button>
<style>
/* From Uiverse.io by nikk7007 - Tags: button */
button {
 padding: 0.8em 1.8em;
 border: 2px solid #17C3B2;
 position: relative;
 overflow: hidden;
 background-color: transparent;
 text-align: center;
 text-transform: uppercase;
 font-size: 16px;
 transition: .3s;
 z-index: 1;
 font-family: inherit;
 color: #17C3B2;
}

button::before {
 content: '';
 width: 0;
 height: 300%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%) rotate(45deg);
 background: #17C3B2;
 transition: .5s ease;
 display: block;
 z-index: -1;
}

button:hover::before {
 width: 105%;
}

button:hover {
 color: #111;
}

</style>


================================================
FILE: Buttons/nikk7007_nasty-wasp-56.html
================================================
<button class="btn"> Button
</button>
<style>
/* From Uiverse.io by nikk7007 - Tags: button */
.btn {
 --color: #00A97F;
 --color2: rgb(10, 25, 30);
 padding: 0.8em 1.75em;
 background-color: transparent;
 border-radius: 6px;
 border: .3px solid var(--color);
 transition: .5s;
 position: relative;
 overflow: hidden;
 cursor: pointer;
 z-index: 1;
 font-weight: 300;
 font-size: 17px;
 font-family: 'Roboto', 'Segoe UI', sans-serif;
 text-transform: uppercase;
 color: var(--color);
}

.btn::after, .btn::before {
 content: '';
 display: block;
 height: 100%;
 width: 100%;
 transform: skew(90deg) translate(-50%, -50%);
 position: absolute;
 inset: 50%;
 left: 25%;
 z-index: -1;
 transition: .5s ease-out;
 background-color: var(--color);
}

.btn::before {
 top: -50%;
 left: -25%;
 transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
}

.btn:hover::before {
 transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
}

.btn:hover::after {
 transform: skew(45deg) translate(-50%, -50%);
}

.btn:hover {
 color: var(--color2);
}

.btn:active {
 filter: brightness(.7);
 transform: scale(.98);
}
</style>


================================================
FILE: Buttons/nima-mollazadeh_cold-monkey-21.html
================================================
<button class="btn-1">
  <div class="original">Signup</div>
  <div class="letters">
    <span>S</span>
    <span>I</span>
    <span>G</span>
    <span>N</span>
    <span>U</span>
    <span>P</span>
  </div>
</button>

<style>
/* From Uiverse.io by nima-mollazadeh  - Tags: button */
.btn-1,
.btn-1 *,
.btn-1 :after,
.btn-1 :before,
.btn-1:after,
.btn-1:before {
  border: none;
  box-sizing: border-box;
}

.btn-1 {
  scale: 0.8;
  -webkit-tap-highlight-color: transparent;
  background-color: #000;
  background-image: none;
  color: #fff;
  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;
  cursor: pointer;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  padding: 2;
}

.btn-1:disabled {
  cursor: default;
}

.btn-1:-moz-focusring {
  outline: auto;
}

.btn-1 svg {
  display: block;
  vertical-align: middle;
}

.btn-1 [hidden] {
  display: none;
}

.btn-1 {
  border: 1px solid;
  border-radius: 999px;
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  overflow: hidden;
  padding: 1.2rem 3rem;
  position: relative;
  text-transform: uppercase;
}

.btn-1 .original {
  background: #ffffff;
  color: #000;
  display: grid;
  inset: 0;
  place-content: center;
  position: absolute;
  transition: transform 0.3s cubic-bezier(0.87, 0, 0.13, 1);
}

.btn-1:hover .original {
  transform: translateY(100%);
}

.btn-1 .letters {
  display: inline-flex;
}

.btn-1 span {
  opacity: 0;
  transform: translateY(-15px);
  transition:
    transform 0.3s cubic-bezier(0.87, 0, 0.13, 1),
    opacity 0.3s;
}

.btn-1 span:nth-child(2n) {
  transform: translateY(15px);
}

.btn-1:hover span {
  opacity: 1;
  transform: translateY(0);
}

.btn-1:hover span:nth-child(2) {
  transition-delay: 0.1s;
}

.btn-1:hover span:nth-child(3) {
  transition-delay: 0.2s;
}

.btn-1:hover span:nth-child(4) {
  transition-delay: 0.3s;
}

.btn-1:hover span:nth-child(5) {
  transition-delay: 0.4s;
}

.btn-1:hover span:nth-child(6) {
  transition-delay: 0.5s;
}

</style>
    

================================================
FILE: Buttons/nima-mollazadeh_jolly-cow-72.html
================================================
<div class="back">
  <div class="button_base b_3d">
    <div>button</div>
    <div>button</div>
    <div>button</div>
    <div>button</div>
  </div>
</div>

<style>
/* From Uiverse.io by nima-mollazadeh  - Tags: button, button, text, yellow, purple, centered, rectangular, contrast, split, bicolor */
.button_base {
  margin: 0;
  border: 0;
  font-size: 18px;
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -100px;
  width: 200px;
  height: 50px;
  text-align: center;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  cursor: default;
}

.button_base:hover {
  cursor: pointer;
}

.b_3d {
  perspective: 500px;
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.b_3d div {
  position: absolute;
  text-align: center;
  padding: 10px;
  border: #000000 solid 1px;
  pointer-events: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.b_3d div:nth-child(1) {
  color: #ffffff;
  background-color: #7c00fe;
  z-index: 0;
  width: 100%;
  height: 50px;
  clip: rect(0px, 100px, 50px, 0px);
  position: absolute;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform-origin: 50% 50% -25px;
  -webkit-transform-origin: 50% 50% -25px;
  -moz-transform-origin: 50% 50% -25px;
}

.b_3d div:nth-child(2) {
  color: #000000;
  background-color: #f9e400;
  z-index: -1;
  width: 100%;
  height: 50px;
  clip: rect(0px, 100px, 50px, 0px);
  position: absolute;
  transform: rotateX(90deg);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transform-origin: 50% 50% -25px;
  -webkit-transform-origin: 50% 50% -25px;
  -moz-transform-origin: 50% 50% -25px;
}

.b_3d div:nth-child(3) {
  color: #000000;
  background-color: #f9e400;
  z-index: 0;
  width: 100%;
  height: 50px;
  clip: rect(0px, 200px, 50px, 100px);
  position: absolute;
  transition: all 0.2s ease 0.1s;
  -webkit-transition: all 0.2s ease 0.1s;
  -moz-transition: all 0.2s ease 0.1s;
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform-origin: 50% 50% -25px;
  -webkit-transform-origin: 50% 50% -25px;
  -moz-transform-origin: 50% 50% -25px;
}

.b_3d div:nth-child(4) {
  color: #ffffff;
  background-color: #7c00fe;
  z-index: -1;
  width: 100%;
  height: 50px;
  clip: rect(0px, 200px, 50px, 100px);
  position: absolute;
  transform: rotateX(-90deg);
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transition: all 0.2s ease 0.1s;
  -webkit-transition: all 0.2s ease 0.1s;
  -moz-transition: all 0.2s ease 0.1s;
  transform-origin: 50% 50% -25px;
  -webkit-transform-origin: 50% 50% -25px;
  -moz-transform-origin: 50% 50% -25px;
}

.b_3d:hover div:nth-child(1) {
  background-color: #7c00fe;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transform: rotateX(-90deg);
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
}

.b_3d:hover div:nth-child(2) {
  color: #000000;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
}

.b_3d:hover div:nth-child(3) {
  background-color: #f9e400;
  transition: all 0.2s ease 0.1s;
  -webkit-transition: all 0.2s ease 0.1s;
  -moz-transition: all 0.2s ease 0.1s;
  transform: rotateX(90deg);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
}

.b_3d:hover div:nth-child(4) {
  color: #ffffff;
  transition: all 0.2s ease 0.1s;
  -webkit-transition: all 0.2s ease 0.1s;
  -moz-transition: all 0.2s ease 0.1s;
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
}

.back {
  height: 200px;
  float: left;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  counter-increment: bc;
  padding: 0px 5px 5px 5px;
}

</style>
    

================================================
FILE: Buttons/nishikalewis_young-rat-46.html
================================================
<button class="button">Hover me</button>

<style>
/* From Uiverse.io by nishikalewis  - Tags: button */
button {
  background: none;
  color: cyan;
  border: 2px solid cyan;
  padding: 1em 2em;
  font-size: 1em;
  border-radius: 0.5em;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

button:hover {
  border-color: magenta;
  color: white;
  box-shadow: 0 0.6em 0.6em -0.3em magenta;
  transform: translateY(-0.3em);
}

</style>
    

================================================
FILE: Buttons/njesenberger_thin-owl-11.html
================================================
<button type="button" class="button">
  <div class="button-top">3D Button</div>
  <div class="button-bottom"></div>
  <div class="button-base"></div>
</button>
<style>
/* From Uiverse.io by njesenberger - Tags: skeuomorphism, 3d, button, active, css, btn */
.button {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  border-width: 0;
  padding: 0 8px 12px;
  min-width: 10em;
  box-sizing: border-box;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.button-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
  padding: 8px 16px;
  transform: translateY(0);
  text-align: center;
  color: #fff;
  text-shadow: 0 -1px rgba(0, 0, 0, .25);
  transition-property: transform;
  transition-duration: .2s;
  -webkit-user-select: none;
  user-select: none;
}

.button:active .button-top {
  transform: translateY(6px);
}

.button-top::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  background-image: radial-gradient(#cd3f64, #9d3656);
  text-align: center;
  color: #fff;
  box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, .2), 0 1px 2px 1px rgba(255, 255, 255, .2);
  transition-property: border-radius, padding, width, transform;
  transition-duration: .2s;
}

.button:active .button-top::after {
  border-radius: 6px;
  padding: 0 2px;
}

.button-bottom {
  position: absolute;
  z-index: -1;
  bottom: 4px;
  left: 4px;
  border-radius: 8px / 16px 16px 8px 8px;
  padding-top: 6px;
  width: calc(100% - 8px);
  height: calc(100% - 10px);
  box-sizing: content-box;
  background-color: #803;
  background-image: radial-gradient(4px 8px at 4px calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(4px 8px at calc(100% - 4px) calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(16px at -4px 0, white, transparent), radial-gradient(16px at calc(100% + 4px) 0, white, transparent);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5), inset 0 -1px 3px 3px rgba(0, 0, 0, .4);
  transition-property: border-radius, padding-top;
  transition-duration: .2s;
}

.button:active .button-bottom {
  border-radius: 10px 10px 8px 8px / 8px;
  padding-top: 0;
}

.button-base {
  position: absolute;
  z-index: -2;
  top: 4px;
  left: 0;
  border-radius: 12px;
  width: 100%;
  height: calc(100% - 4px);
  background-color: rgba(0, 0, 0, .15);
  box-shadow: 0 1px 1px 0 rgba(255, 255, 255, .75), inset 0 2px 2px rgba(0, 0, 0, .25);
}
</style>


================================================
FILE: Buttons/nkhlrjrs_hungry-pig-21.html
================================================
<a class="schedule-button" href="https://www.linkedin.com/in/nkhlrjrs/">
   Schedule a Call
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="arrow">
      <path fill="none" d="M0 0h24v24H0z"></path>
      <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path>
    </svg>
 
  </a>
<style>
/* From Uiverse.io by nkhlrjrs - Tags: button, accept call, Call Us, Schedule a call */
/* CSS code */
.schedule-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #c49ff5;
  color: #ffffff;
  font-size: 16px;
  text-decoration: none;
  border-radius: 20px;
 /* Rounded corners */
  transition: background-color 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 /* Smooth transitions */
  font-family: 'Poppins', sans-serif;
 /* Change font to Poppins */
}

.schedule-button:hover {
  background-color: #6d21f2;
  transform: translateX(-5px);
 /* Move button to the left */
}

.schedule-button .arrow {
  display: none;
  width: 20px;
  height: 20px;
  fill: #ffffff;
  opacity: 0;
 /* Initial opacity */
  transform: translateX(-20px) rotate(-45deg);
 /* Initial position */
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 /* Smooth transitions */
}

.schedule-button:hover .arrow {
  display: inline-block;
  opacity: 1;
 /* Fade in on hover */
  animation: slide-in 0.4s forwards;
}

@keyframes slide-in {
  from {
    transform: translateX(-50px) rotate(-45deg);
    opacity: 0.1;
 /* Slightly visible */
  }

  to {
    transform: translateX(0) rotate(-45deg);
    opacity: 1;
 /* Fully visible */
  }
}

</style>


================================================
FILE: Buttons/omar-alghaish_spicy-mule-84.html
================================================
 <button>
     <span>HoverMe</span>
     <span>HoverMe</span>
 </button>
<style>
/* From Uiverse.io by omar-alghaish - Tags: button */
button {
  position: relative;
  width: 150px;
  height: 50px;
  box-shadow: 0 5px 25px rgba(0, 0,0, .25);
  border: none;
}

button span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #002faf;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 17px;
}

button span:nth-child(2) {
  background: #fff;
  color: #002ba0;
  overflow: hidden;
  z-index: 2;
  transition: .5s;
  clip-path: polygon(50% 0%, 100% 0%,100% 100%,50% 100%,50% 53%);
}

button span:nth-child(2):hover {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%, 0 50%);
}

button span:nth-child(1):hover ~ span:nth-child(2) {
  clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%, 100%50%);
}
</style>


================================================
FILE: Buttons/ossoboy_calm-kangaroo-77.html
================================================
<button data-label="Button :)"> Button :)
</button>
<style>
/* From Uiverse.io by ossoboy - Tags: button */
button {
 background-color: rgb(82, 163, 255);
 color: transparent;
 border: 0 none;
 padding: 15px 30px;
 text-decoration: none;
 display: inline-block;
 transition: background-color 300ms ease, color 300ms ease;
 font-size: 17px;
 position: relative;
 text-align: center;
 cursor: pointer;
}

button::before,
button::after {
 content: attr(data-label);
 display: inline-block;
 position: absolute;
 transition: all 300ms ease;
 width: 100%;
 left: 0;
 top: 50%;
 color: white;
}

button::before {
 opacity: 0;
 transform: translateY(calc(-50% - 15px));
}

button::after {
 opacity: 1;
 transform: translateY(-50%);
}

button:hover {
 background-color: rgb(66, 133, 209);
}

button:hover::before {
 opacity: 1;
 transform: translateY(-50%);
}

button:hover::after {
 opacity: 0;
 transform: translateY(calc(-50% + 15px));
}

button:active {
 background-color: rgb(82, 163, 255);
}
</style>


================================================
FILE: Buttons/ozgeozkaraa01_curvy-insect-99.html
================================================
<!-- From Uiverse.io by ozgeozkaraa01 - Tags: button -->
<button class="animate-pulse bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 hover:from-red-500 hover:to-purple-500 text-[#11324D] font-bold py-3 px-6 rounded-full shadow-lg hover:text-white transform transition-all duration-500 ease-in-out hover:scale-110 hover:shadow-xl hover:rotate-12 hover:brightness-110">
  Awesome Button
</button>




================================================
FILE: Buttons/ozgeozkaraa01_great-dolphin-11.html
================================================
<button class="tooltip">
  <span class="tooltiptext">delete</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"></path>
</svg>
</button>
<style>
/* From Uiverse.io by ozgeozkaraa01 - Tags: button, #button */
button {
  border: none;
  border-radius: 1rem;
  transition: all 0.5s linear;
  padding: 1.2em;
  background-color: #ACB1D6;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #AAAAAA;
  color: white;
  border-radius: 10px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  left: 62px;
  width: 60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>


================================================
FILE: Buttons/ozgeozkaraa01_jolly-squid-49.html
================================================
<button>
  <span>Next</span>
  <svg width="15" height="15" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
</button>
<style>
/* From Uiverse.io by ozgeozkaraa01 - Tags: button, buttons, desined Button */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s linear;
  border-radius: 10px;
  border: 1px solid #F2BED1;
  padding: 10px 20px;
}

button > svg {
  margin-left: 5px;
  transition: all 0.4s ease-in;
}

button:hover > svg {
  font-size: 1.2em;
  transform: translateX(6px);
}

button:hover {
  box-shadow: 10px 10px 40px #d1d1d1;
  transform: translateY(-5px);
}
</style>


================================================
FILE: Buttons/ozgeozkaraa01_plastic-elephant-49.html
================================================
<button>
  Hover
</button>
<style>
/* From Uiverse.io by ozgeozkaraa01 - Tags: button */
button {
  border: none;
  padding: 0.8em 2.5em;
  outline: none;
  color: white;
  font-style: 1.2em;
  position: relative;
  z-index: 1;
  cursor: pointer;
  background: none;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.45);
}

button::before,
button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 10em;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 105%;
  height: 105%;
  content: "";
  z-index: -2;
  background-size: 400% 400%;
  background: linear-gradient(
    100deg,
    #f79533,
    #f37055,
    #ef4e7b,
    #a166ab,
    #5073b8,
    #1098ad,
    #07b39b,
    #6fba82
  );
}

button::before {
  -webkit-filter: blur(7px);
  filter: blur(7px);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  -webkit-animation: pulse 10s infinite ease;
  animation: pulse 10s infinite ease;
}

button::after {
  -webkit-filter: blur(0.3px);
  filter: blur(0.3px);
}

button:hover::before {
  width: 115%;
  height: 115%;
}
</style>


================================================
FILE: Buttons/ozgeozkaraa01_rare-termite-94.html
================================================
<button>
  ↑
</button>
<style>
/* From Uiverse.io by ozgeozkaraa01 - Tags: button */
button {
  font-size: 20px;
  background-color: white;
  color: black;
  width: 45px;
  height: 45px;
  opacity: 0.75;
  border: 1px solid #e7eae8;
  border-radius: 8px;
  cursor: pointer;
  animation: bounce_513 1s infinite;
}

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

  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

</style>


================================================
FILE: Buttons/ozgeozkaraa01_unlucky-snail-4.html
================================================
<button class="btn">
  <svg class="w-6 h-6" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="40" width="40">
  <path d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
</button>
<style>
/* From Uiverse.io by ozgeozkaraa01 - Tags: button, hover button, 3d button */
.btn {
  display: grid;
  place-items: center;
  background-color: #e2e8f0;
  padding: 1.5em;
  border-radius: 10px;
  box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
	      -6px -6px 10px -1px rgba(255,255,255,0.7);
  border: none;
  cursor: pointer;
  transition: transform 0.5s;
}

.btn:hover {
  box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
	      inset -4px -4px 6px -1px rgba(255,255,255,0.7),
	      -0.5px -0.5px 0px rgba(255,255,255,1),
	      0.5px 0.5px 0px rgba(0,0,0,0.15),
	      0px 12px 10px -10px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.1);
  transform: translateY(0.5em);
}

.btn svg {
  transition: transform 0.6s;
}

.btn:hover svg {
  transform: scale(0.9);
}


</style>


================================================
FILE: Buttons/pamtbi_proud-mayfly-64.html
================================================
 <button class="button">
 <span class="span">click on me</span>
        <div class="button__bg button__bg-1"></div>
        <div class="button__bg button__bg-2"></div>
        <div class="button__bg button__bg-3"></div>
        <div class="button__bg button__bg-4"></div>
        <div class="button__bg button__bg-5"></div>
        <div class="button__bg button__bg-6"></div>
        <div class="button__bg button__bg-7"></div>
        <div class="button__bg button__bg-8"></div>
        <div class="button__bg button__bg-9"></div>
        <div class="button__bg button__bg-10"></div>
        <div class="button__bg button__bg-11"></div>
        <div class="button__bg button__bg-12"></div>
        <div class="button__bg button__bg-13"></div>
        <div class="button__bg button__bg-14"></div>
        <div class="button__bg button__bg-15"></div>
        <div class="button__bg button__bg-16"></div>
        <div class="button__bg button__bg-17"></div>
        <div class="button__bg button__bg-18"></div>
        <div class="button__bg button__bg-19"></div>
        <div class="button__bg button__bg-20"></div>
        <div class="button__bg button__bg-21"></div>
        <div class="button__bg button__bg-22"></div>
        <div class="button__bg button__bg-23"></div>
        <div class="button__bg button__bg-24"></div>
    </button>
<style>
/* From Uiverse.io by pamtbi - Tags: button, minecraft */
.button {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 70px;
  aspect-ratio: 3 / 2;
  border: none;
  border-radius: 0px;
  margin: 0 auto;
  padding: 0;
  box-shadow: 0px 5px 0px 0px rgb(102,102,102);
  transition: all .15s;
  position: relative;
  padding: 0
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  box-shadow: none;
  transform: translateY(5px);
}

.button__bg {
  height: 100%;
  aspect-ratio: 1 / 1;
  align-self: stretch;
}

.button__bg-1, .button__bg-7, .button__bg-13, .button__bg-20, .button__bg-19, .button__bg-8, .button__bg-9, .button__bg-10, .button__bg-12 {
  background: #494949;
}

.button__bg-6, .button__bg-4, .button__bg-5, .button__bg-14, .button__bg-15, .button__bg-16, .button__bg-21 {
  background: #505050;
}

.button__bg-2, .button__bg-3, .button__bg-18, .button__bg-17 {
  background: #5a5a5a;
}

.button__bg-11, .button__bg-22 {
  background: #414141;
}

.button__bg-23, .button__bg-24 {
  background: #535353;
}

.span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  width: 100%;
  color: rgb(223, 217, 189);
  display: block;
  text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
}

</style>


================================================
FILE: Buttons/pipic1_slimy-parrot-86.html
================================================
<button class="button">
  ctrl
</button> 
<style>
/* From Uiverse.io by pipic1 - Tags: skeuomorphism, button */
.button {
  --key-text-color: #969faf;
  --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);
  --docsearch-key-gradient: linear-gradient(-225deg,#d5dbe4,#f8f8f8);
  border: none;
  background: var(--docsearch-key-gradient);
  border-radius: 3px;
  box-shadow: var(--docsearch-key-shadow);
  color: var(--key-text-color);
  height: 2.5em;
  text-align: center;
  padding: 0.6em;
  margin: 0 0.6em;
  display: inline-block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1em;
  min-width: 1em;
  line-height: 1em;
  user-select: none;
}


</style>


================================================
FILE: Buttons/pminedev_sharp-gecko-68.html
================================================
 <button class="space-button">
      <div class="butonTxt">launch</div>
      <div class="sol">
        
        <svg xmlns="http://www.w3.org/2000/svg" id="svg22" viewBox="0 0 1983.9 1765.4" version="1.1">
          
          <defs id="defs8">
            
            <filter color-interpolation-filters="sRGB" height="1.4131172" width="1.4131172" y="-0.20655862" x="-0.20655862" id="d">
              <feGaussianBlur id="feGaussianBlur2" stdDeviation="41.065573"></feGaussianBlur>
            </filter>
            <filter color-interpolation-filters="sRGB" height="1.3541005" width="1.3541005" y="-0.17705024" x="-0.17705024" id="e">
              <feGaussianBlur id="feGaussianBlur5" stdDeviation="35.199063"></feGaussianBlur>
            </filter>
            <filter color-interpolation-filters="sRGB" height="1.4131172" width="1.4131172" y="-0.20655862" x="-0.20655862" id="d-6">
              <feGaussianBlur id="feGaussianBlur2-9" stdDeviation="41.065573"></feGaussianBlur>
            </filter>
            <filter color-interpolation-filters="sRGB" height="1.3541005" width="1.3541005" y="-0.17705024" x="-0.17705024" id="e-7">
              <feGaussianBlur id="feGaussianBlur5-6" stdDeviation="35.199063"></feGaussianBlur>
            </filter>
          </defs>
          <path id="path944" d="M 14.914286,508.57739 V -308.72587 H 830.72607 1646.538 V 508.57739 1325.8807 H 830.72607 14.914286 Z M 924.33787,1179.0035 c 13.2878,-3.2008 30.7842,-6.7945 38.881,-7.986 8.0968,-1.1914 16.5734,-3.0271 18.8369,-4.0794 2.2636,-1.0524 10.5444,-3.541 18.40183,-5.5302 7.8574,-1.9894 22.4055,-7.4917 32.3289,-12.2275 9.9234,-4.7357 19.8938,-8.6105 22.1565,-8.6105 4.8186,0 36.7172,-14.8814 58.6451,-27.3593 15.1706,-8.6328 26.0696,-16.3519 56.9574,-40.3393 8.7715,-6.8119 17.095,-12.4135 18.4965,-12.4479 2.4219,-0.059 29.7385,-26.2017 42.8428,-41.0007 3.3736,-3.8101 10.7217,-10.2414 16.3291,-14.292 9.811,-7.08732 31.9915,-32.52142 36.6336,-42.00772 1.2335,-2.5203 11.0754,-15.4209 21.8711,-28.668 10.7957,-13.2472 21.7446,-27.9875 24.3308,-32.7564 4.5657,-8.419 20.1072,-34.9665 34.0351,-58.1379 13.7505,-22.8763 41.0037,-88.561 41.0037,-98.8256 0,-2.5507 3.4372,-13.7901 7.6383,-24.9764 4.2011,-11.1863 9.0822,-27.586 10.847,-36.4433 1.7647,-8.8575 3.9654,-18.1922 4.8904,-20.7438 0.925,-2.5516 2.6525,-12.7293 3.8387,-22.6173 1.1863,-9.8877 3.8061,-26.0679 5.8219,-35.9557 2.0157,-9.8878 3.688,-25.1345 3.716,-33.8814 0.045,-13.75219 -0.5739,-15.90356 -4.5701,-15.90356 -3.9053,0 -4.879,2.89236 -6.2844,18.66936 -7.031,78.9263 -21.5154,136.5304 -55.463,220.5751 -7.5293,18.6405 -23.4016,50.0916 -40.9809,81.2043 -14.755,26.114 -55.8364,81.172 -80.7743,108.2552 -62.2577,67.61312 -114.4688,105.59932 -199.54,145.17572 -113.67433,52.883 -253.91501,61.0195 -377.26361,21.888 -47.7869,-15.16 -98.6573,-39.939 -146.5735,-71.396 -29.4622,-19.3419 -32.1729,-21.4729 -65.0196,-51.1136 -35.0191,-31.60112 -54.0664,-52.89832 -88.0833,-98.48782 -29.0094,-38.8786 -35.523,-49.2087 -58.4245,-92.6555 -16.1308,-30.6019 -22.9692,-47.404 -47.5596,-116.8558 -17.2668,-48.7673 -31.661,-148.3735 -31.661,-219.08996 0,-70.48445 14.4781,-170.76499 31.661,-219.29539 2.5583,-7.2255 7.9502,-22.4991 11.9819,-33.9414 9.8315,-27.9017 27.0297,-66.4567 39.4531,-88.4461 5.5865,-9.8879 13.1895,-24.0442 16.8957,-31.4585 7.5163,-15.0366 50.7106,-75.348995 70.1831,-97.997095 18.0794,-21.0278002 82.2265,-80.7616 96.3451,-89.7165 6.5781,-4.1723 21.3451,-14.148 32.8155,-22.1681 22.3148,-15.6025 83.7983,-47.710305 114.091,-59.580405 7.1718,-2.8102 7.0726,-2.8898 -3.864,-3.1026 -21.9942,-0.4278 -108.3422,40.3511 -127.1729,60.059105 -3.4997,3.6627 -9.6753,8.5939 -13.7237,10.9582 -4.0484,2.3644 -10.1209,6.4006 -13.4946,8.9693 -3.3737,2.5688 -10.5503,7.9906 -15.9482,12.0486 -5.3979,4.0579 -17.543,15.6145 -26.9893,25.6813 -9.4462,10.0668 -21.3554,21.2986998 -26.4648,24.9596998 -5.1093,3.661 -11.2649,10.3176 -13.679,14.7924002 -2.4141,4.4749 -12.5207,17.7172 -22.459,29.4273 -33.0166,38.9024 -43.7693,53.6902 -53.6219,73.744095 -5.3701,10.9305 -13.2542,24.1123 -17.5201,29.2929 -9.5717,11.6241 -48.0734,100.0335 -49.9231,114.6357 -0.7424,5.8607 -4.6585,18.6262 -8.7025,28.3679 -4.044,9.7416 -8.4858,24.6213 -9.8706,33.066 -1.3849,8.4447 -3.2538,16.6962 -4.1532,18.3366 -0.8994,1.6405 -2.4565,10.592 -3.4603,19.8923 -1.0037,9.3002 -3.8174,26.2442 -6.2526,37.6533 -6.5427,30.653 -6.5427,176.78435 0,207.43735 2.4352,11.4091 5.2489,28.3531 6.2526,37.6533 1.0038,9.3003 2.5609,18.2518 3.4603,19.8922 0.8994,1.6405 2.7755,9.9357 4.1691,18.4337 1.3936,8.4981 5.7844,23.1945 9.7574,32.6586 3.9729,9.4641 7.8653,21.5637 8.6498,26.8879 3.4661,23.5256 42.7156,113.4608 52.4876,120.2688 1.4234,0.9918 4.8152,6.3861 7.5374,11.9874 11.9981,24.6886 22.0316,40.279 40.3716,62.7309 10.7957,13.2161 20.596,26.0913 21.7786,28.6116 3.3348,7.1076 26.5194,33.7039 33.9856,38.98672 3.681,2.6045 16.2144,14.5985 27.8519,26.6532 11.6375,12.0546 25.1874,24.7116 30.1107,28.1265 l 8.9516,6.2089 -7.9741,0.014 c -4.3857,0.01 -7.9741,1.0516 -7.9741,2.3195 0,3.7137 35.7736,28.6592 65.4359,45.6295 19.8579,11.3611 30.1301,15.6793 37.2981,15.6793 5.8738,0 17.6655,3.8275 29.0265,9.4219 32.8838,16.1926 77.8747,31.1046 106.2358,35.2114 8.7715,1.2701 25.3331,4.6914 36.8035,7.6027 17.4461,4.4281 31.3452,5.3386 85.02438,5.57 56.5343,0.2437 67.0434,-0.4159 88.3284,-5.5433 z m -20.0047,-27.3786 c 62.6953,-10.5962 112.03173,-25.4052 157.02853,-47.1343 144.0743,-69.5736 251.2252,-190.37012 312.6979,-352.52002 19.3616,-51.0711 41.6816,-144.8058 35.0723,-147.2893 -1.674,-0.629 -3.0437,-5.3962 -3.0437,-10.5936 0,-5.9859 -1.1879,-9.4499 -3.2405,-9.4499 -2.5064,0 -2.8249,-3.2894 -1.4059,-14.5206 2.7738,-21.95432 2.5355,-114.93193 -0.3574,-139.4744 -17.9459,-152.24585 -71.3007,-275.08765 -165.5666,-381.193445 -60.4092,-67.9967 -130.7086,-118.6969 -207.2793,-149.490805 -39.28463,-15.7987 -44.49463,-17.2063 -117.77133,-31.8167 -23.2706,-4.6399 -87.87968,-6.2746 -118.99818,-3.0109 -31.5206,3.3059 -104.8332,19.3058 -118.9981,25.9704 -4.7231,2.2223 -17.9724,7.4337 -29.4428,11.581005 -23.0929,8.3495 -72.8272,35.4667 -99.3696,54.1803 -50.2454,35.4253998 -115.6931,100.1393 -143.6913,142.0802 -25.6043,38.354795 -30.0747,45.306495 -38.2728,59.515595 -47.6004,82.5021 -77.1505,178.2733 -86.8476,281.47102 -1.7306,18.41783 -2.4217,51.97102 -1.7089,82.97495 1.0078,43.83658 2.4122,58.81988 8.8968,94.92338 15.1175,84.1666 37.8293,148.9904 77.5332,221.2937 19.6119,35.7145 42.2691,68.0433 72.4285,103.3457 32.8509,38.4529 61.0181,65.09922 93.2603,88.22472 l 8.5875,6.1593 -12.2577,1.383 -12.2577,1.3829 13.4845,10.0039 c 50.4467,37.4256 131.9724,76.4366 190.1415,90.9847 57.7871,14.4527 142.27928,19.3176 191.37838,11.0192 z M 500.72099,1029.9366 c -3.3736,-2.9747 -7.238,-5.4086 -8.5875,-5.4086 -1.3494,0 0.3067,2.4339 3.6804,5.4086 3.3737,2.9749 7.238,5.4088 8.5875,5.4088 1.3495,0 -0.3067,-2.4339 -3.6804,-5.4088 z M 373.13539,887.65958 c 0,-0.6708 -1.1041,-1.9889 -2.4535,-2.9291 -1.3495,-0.9401 -2.4536,-0.3913 -2.4536,1.2197 0,1.611 1.1041,2.929 2.4536,2.929 1.3494,0 2.4535,-0.5488 2.4535,-1.2196 z m -4.9071,-8.2974 c 0,-0.6709 -1.1041,-1.989 -2.4536,-2.9292 -1.3494,-0.9401 -2.4536,-0.3913 -2.4536,1.2197 0,1.611 1.1042,2.929 2.4536,2.929 1.3495,0 2.4536,-0.5488 2.4536,-1.2195 z m -17.175,-30.4242 c 0,-0.6709 -1.1041,-1.989 -2.4536,-2.9292 -1.3494,-0.9401 -2.4535,-0.3912 -2.4535,1.2198 0,1.6109 1.1041,2.929 2.4535,2.929 1.3495,0 2.4536,-0.5488 2.4536,-1.2196 z m -52.5683,-115.4895 c -4.4785,-7.2075 -5.2318,-1.9736 -0.9991,6.9417 1.7281,3.64 3.261,4.6935 3.8637,2.6554 0.5495,-1.8584 -0.7396,-6.177 -2.8646,-9.5971 z m -14.8227,-51.3151 c -1.4992,-9.1967 -6.2161,-19.3044 -6.2161,-13.3204 0,4.0348 5.6381,23.6922 6.7954,23.6922 0.6113,0 0.3506,-4.6673 -0.5793,-10.3718 z m -11.9007,-45.4634 c -0.7833,-2.2063 -1.3647,-1.551 -1.4824,1.671 -0.1065,2.9157 0.4734,4.5493 1.2887,3.6302 0.8153,-0.919 0.9024,-3.3047 0.1936,-5.3012 z m -2.4536,-13.8292 c -0.7832,-2.2063 -1.3646,-1.551 -1.4824,1.671 -0.1064,2.9157 0.4734,4.5493 1.2887,3.6303 0.8153,-0.9191 0.9025,-3.3047 0.1936,-5.3013 z m -2.4536,-13.8292 c -0.7832,-2.2063 -1.3646,-1.551 -1.4823,1.6711 -0.1065,2.9156 0.4733,4.5492 1.2886,3.6301 0.8153,-0.919 0.9025,-3.3046 0.1936,-5.3012 z m -2.4293,-20.8639 c -0.6221,-2.6911 -1.172,-1.159 -1.222,3.4047 -0.05,4.5636 0.459,6.7653 1.1311,4.8928 0.6721,-1.8726 0.713,-5.6064 0.091,-8.2975 z m -3.8122,-54.6778 c -2.2201,-10.66821 -2.3111,-10.40891 -2.5488,7.2603 -0.1357,10.078 0.5816,22.5242 1.5937,27.6583 1.6326,8.2816 1.9202,7.4626 2.5489,-7.26029 0.3897,-9.12724 -0.3274,-21.57348 -1.5938,-27.65831 z m 1.4938,-88.50662 -0.038,-16.59499 -1.9108,13.82916 c -1.051,7.60604 -1.8769,18.80765 -1.8355,24.89249 0.072,10.54451 0.1632,10.6742 1.9484,2.76583 1.0301,-4.56363 1.8561,-15.76524 1.8354,-24.89249 z m 2.3094,-39.41309 c -0.6171,-2.66214 -1.1221,-0.48403 -1.1221,4.8402 0,5.32422 0.505,7.50231 1.1221,4.8402 0.6171,-2.66211 0.6171,-7.0183 0,-9.6804 z m 2.4383,-17.80504 c -0.7832,-2.2064 -1.3646,-1.551 -1.4823,1.671 -0.1065,2.9157 0.4733,4.5492 1.2886,3.6302 0.8153,-0.9191 0.9025,-3.3046 0.1936,-5.3012 z m 2.4536,-13.8292 c -0.7832,-2.2064 -1.3646,-1.551 -1.4824,1.6711 -0.1064,2.9156 0.4734,4.5492 1.2887,3.6301 0.8153,-0.9191 0.9025,-3.3046 0.1936,-5.3012 z m 2.4536,-13.8291 c -0.7833,-2.2064 -1.3647,-1.5511 -1.4824,1.671 -0.1065,2.9156 0.4734,4.5492 1.2887,3.6302 0.8153,-0.9191 0.9024,-3.3047 0.1936,-5.3012 z m 11.6387,-42.3518 1.4288,-11.0633 -3.5048,9.6804 c -4.1214,11.3835 -4.9293,18.922 -1.6155,15.0737 1.2445,-1.4451 2.9056,-7.606 3.6915,-13.6908 z m 18.4255,-59.4654 c 0,-3.1338 -0.8813,-2.8353 -3.6023,1.2201 -1.9812,2.9528 -3.6023,7.2358 -3.6023,9.5176 0,3.1337 0.8813,2.8353 3.6023,-1.2201 1.9813,-2.9529 3.6023,-7.2358 3.6023,-9.5176 z m 38.5204,-87.6692 c -1.0052,-1.1331 -2.8547,-0.2293 -4.1102,2.0085 -3.7776,6.7336 -2.6445,9.7261 1.79,4.7272 2.2813,-2.5716 3.3253,-5.6026 2.3202,-6.7357 z m 9.3215,-19.9162 c -1.54,-1.7361 -5.9196,5.2885 -5.8595,9.3984 0.022,1.5212 1.6501,0.3674 3.6174,-2.564 1.9674,-2.9313 2.9763,-6.0068 2.2421,-6.8344 z m 32.4427,-49.1692 c -1.5894,-1.791695 -16.1899,16.0976 -16.1974,19.8459 0,1.5212 3.9247,-2.001 8.7284,-7.8271 4.8036,-5.8261 8.1647,-11.2346 7.469,-12.0188 z m 6.9732,-9.195295 c 0.834,-1.5212 0.3472,-2.7658 -1.0819,-2.7658 -1.4292,0 -2.5984,1.2446 -2.5984,2.7658 0,1.5212 0.4869,2.7658 1.0819,2.7658 0.5951,0 1.7644,-1.2446 2.5984,-2.7658 z m 88.3285,-99.5699002 c 0.834,-1.5212 0.3472,-2.7658998 -1.0819,-2.7658998 -1.4292,0 -2.5984,1.2446998 -2.5984,2.7658998 0,1.5212 0.4869,2.7658 1.0819,2.7658 0.5951,0 1.7644,-1.2446 2.5984,-2.7658 z m 59.447,-48.6912998 c -1.7172,-1.9358 -9.1488,1.9886 -9.1488,4.8312 0,1.4128 2.301,1.179 5.1173,-0.52 2.8145,-1.698 4.6287,-3.638 4.0315,-4.3112 z m 15.3869,-8.0083 c 3.3155,-4.5033 2.5224,-5.0663 -3.4797,-2.4699 -2.1346,0.9233 -3.881,2.7903 -3.881,4.1487 0,3.8258 3.9756,2.9191 7.3607,-1.6788 z m 79.5966,-44.341305 c 3.5975,-3.0673 3.8623,-4.0607 1.0823,-4.0607 -2.0242,0 -5.8236,1.8273 -8.4431,4.0607 -3.5975,3.0674 -3.8623,4.0608 -1.0823,4.0608 2.0242,0 5.8236,-1.8273 8.4431,-4.0608 z m 68.8444,-23.5603 c 23.4938,-6.9979 32.1607,-10.4232 23.9653,-9.4717 -17.478,2.0293 -76.474,21.2713 -63.018,20.5538 1.237,-0.066 18.8107,-5.0529 39.0527,-11.0821 z m 385.02591,4.516 c -4.1498,-2.037 -14.0868,-5.8279 -22.0821,-8.4242 -7.9954,-2.5963 -21.3834,-7.7874 -29.7514,-11.5356 -11.725,-5.2521 -18.759,-6.6255 -30.6696,-5.9882 l -15.45523,0.827 20.85533,6.3442 c 11.4705,3.4894 28.0321,9.9888 36.8036,14.4432 12.4066,6.3004 19.4898,8.0921 31.8964,8.0681 15.4543,-0.03 15.7145,-0.1455 8.403,-3.7345 z m -339.02151,-17.2723 c -1.6868,-0.7673 -4.4471,-0.7673 -6.1339,0 -1.6869,0.7672 -0.3067,1.395 3.0669,1.395 3.3737,0 4.7538,-0.6278 3.067,-1.395 z m 174.25008,-2.7483 c -1.6611,-0.7577 -4.9734,-0.8038 -7.3607,-0.1025 -2.3872,0.7012 -1.0281,1.3211 3.0202,1.3775 4.0485,0.056 6.0017,-0.5174 4.3405,-1.275 z m -109.84388,-3.7175 c 7.0028,-2.0087 6.8836,-2.114 -2.4536,-2.1651 -5.3978,-0.03 -15.8868,0.8926 -23.3089,2.0492 l -13.4946,2.1029 15.9482,0.062 c 8.7715,0.034 19.2605,-0.8879 23.3089,-2.0492 z m 79.74098,-0.1159 c -7.422,-1.1566 -17.911,-2.0787 -23.3089,-2.0491 -9.3372,0.051 -9.4564,0.1563 -2.4536,2.165 4.0484,1.1613 14.5374,2.0834 23.309,2.0492 l 15.9481,-0.062 -13.4946,-2.1029 z m -127.58558,-16.4791 c 23.2117,-3.3724 52.3709,-5.5254 74.83388,-5.5254 22.4629,0 51.6221,2.153 74.8339,5.5254 41.7883,6.0715 81.9021,7.3597 71.1535,2.2852 -3.3737,-1.5928 -12.7586,-3.8626 -20.8554,-5.044 -8.0968,-1.1814 -23.0022,-4.394 -33.1232,-7.1392 -27.2415,-7.3887 -156.85738,-7.3755 -184.01768,0.018 -10.121,2.7554 -24.4744,5.9654 -31.8964,7.1332 -7.422,1.1679 -16.807,3.4012 -20.8553,4.9629 -13.2937,5.1283 28.4902,3.8037 69.9267,-2.2166 z" style="fill: none; fill-opacity: 1; stroke-width: 2.60503"></path>
          <path id="path946" d="M 14.914286,508.57739 V -308.72587 H 830.72607 1646.538 V 508.57739 1325.8807 H 830.72607 14.914286 Z M 920.78247,1216.0003 c 21.3015,-1.353 34.7445,-3.4028 36.6808,-5.5931 1.6812,-1.9015 5.3201,-3.476 8.0865,-3.4988 2.7664,-0.022 13.8626,-3.1342 24.6584,-6.9143 10.79573,-3.7798 24.10013,-6.8728 29.56543,-6.8729 5.4654,-3e-4 10.9859,-1.1753 12.2679,-2.6112 4.8903,-5.4776 39.5425,-19.4973 48.2134,-19.5064 5.216,-0.01 9.9139,-1.6607 11.0411,-3.8902 2.4788,-4.9027 24.5955,-18.246 30.2431,-18.246 2.3327,0 5.5271,-1.7465 7.0988,-3.8812 3.4867,-4.7359 27.5286,-18.2455 32.4699,-18.2455 1.9624,0 7.3729,-4.4317 12.0233,-9.8484 4.6505,-5.4166 12.8719,-12.0814 18.2697,-14.8105 5.3979,-2.7292 11.9177,-7.632 14.4884,-10.8953 2.5706,-3.2632 7.1189,-5.9332 10.1072,-5.9332 7.6726,0 141.0204,-150.31882 141.0204,-158.96792 0,-3.3686 2.3685,-8.4956 5.2633,-11.3934 2.8949,-2.8979 7.2442,-10.2475 9.6652,-16.3323 2.421,-6.0848 8.3333,-15.3525 13.1385,-20.5949 4.8051,-5.2423 8.7365,-11.3414 8.7365,-13.5535 0,-5.5702 11.9843,-32.6719 16.1855,-36.6024 1.8937,-1.7716 3.4431,-5.9313 3.4431,-9.2438 0,-3.3125 1.1685,-7.34 2.5966,-8.9499 1.4282,-1.61 8.0376,-20.7408 14.6876,-42.5132 6.6499,-21.7723 14.3144,-42.254 17.0318,-45.5149 3.4447,-4.1332 4.9411,-9.7069 4.9411,-18.4038 0,-6.8613 2.7603,-21.6233 6.1339,-32.8047 3.3737,-11.1813 6.1339,-22.6448 6.1339,-25.4743 0,-2.8295 1.5664,-7.9011 3.4808,-11.2703 2.4512,-4.3141 3.7212,-17.3743 4.2938,-44.1575 l 0.8129,-38.03171 -8.5875,0.006 -8.5875,0.006 0.7264,-45.45361 c 0.3995,-24.9995 -0.329,-49.58247 -1.6189,-54.62889 -1.6543,-6.47198 -2.4105,11.70568 -2.5665,61.69717 -0.1762,56.41804 -0.9956,73.34064 -4.0179,82.97494 -2.0883,6.6563 -4.4518,22.0595 -5.2525,34.2291 -0.8564,13.0167 -3.334,26.3516 -6.0176,32.3884 -2.5091,5.6439 -4.5725,14.9786 -4.5855,20.7437 -0.012,5.7651 -4.4296,22.8378 -9.8144,37.9392 -5.3847,15.1014 -9.7905,29.7396 -9.7905,32.5293 0,7.5448 -41.0474,98.5606 -50.2553,111.4328 -4.3772,6.1191 -13.7366,22.0364 -20.7986,35.3719 -7.062,13.3354 -14.7782,25.4155 -17.1469,26.8446 -2.3688,1.429 -10.7641,11.6768 -18.6564,22.7728 -21.5372,30.28 -44.1689,56.03082 -66.707,75.90092 -11.1188,9.8027 -21.3137,20.1351 -22.6554,22.9609 -1.3416,2.8259 -12.1182,11.6514 -23.9482,19.6122 -11.8298,7.9608 -25.9501,18.5113 -31.3784,23.4455 -11.4189,10.3792 -92.1591,56.6506 -98.8521,56.6506 -2.4746,0 -15.4602,4.9665 -28.8566,11.0366 -13.3965,6.0702 -28.4681,11.0487 -33.4926,11.0634 -5.02433,0.014 -13.85723,2.4237 -19.62853,5.3533 -5.7713,2.9296 -20.4302,6.7959 -32.5754,8.5917 -12.1451,1.7958 -25.3945,4.2924 -29.4429,5.5482 -12.1827,3.7789 -93.47958,5.6081 -127.58558,2.8708 -39.491,-3.1695 -88.7345,-11.742 -96.916,-16.8715 -3.3736,-2.1153 -12.2065,-4.6674 -19.6285,-5.6713 -26.1566,-3.5386 -136.6411,-57.0008 -157.0779,-76.0082 -4.9975,-4.6479 -19.8486,-15.791 -33.0025,-24.7623 -13.1539,-8.9712 -24.471,-17.9407 -25.1489,-19.9325 -0.678,-1.9916 -12.4265,-14.0205 -26.1079,-26.7311 -26.8187,-24.91552 -40.7511,-40.90902 -64.777,-74.35972 -8.4514,-11.7667 -16.3336,-21.3939 -17.516,-21.3939 -1.1824,0 -10.0798,-14.2344 -19.772,-31.6319 -9.6922,-17.3976 -19.3055,-33.2068 -21.3629,-35.1316 -4.8009,-4.4915 -47.4184,-100.312 -47.4845,-106.7634 -0.054,-5.3075 -15.3045,-52.141 -17.9492,-55.1222 -0.8962,-1.0103 -1.6295,-7.2798 -1.6295,-13.9324 0,-6.6525 -2.0573,-16.7131 -4.5719,-22.3571 -2.763,-6.2014 -5.0956,-19.0164 -5.8953,-32.3884 -0.7278,-12.1696 -3.0708,-27.7274 -5.2066,-34.5728 -5.7261,-18.3524 -5.7261,-172.48992 0,-190.84235 2.1358,-6.8454 4.4788,-22.4032 5.2066,-34.5729 0.7997,-13.3719 3.1323,-26.1868 5.8953,-32.3883 2.5146,-5.6439 4.5719,-14.7293 4.5719,-20.1897 0,-5.4603 1.7324,-13.7043 3.8498,-18.3199 4.6638,-10.1667 15.7788,-47.9796 15.7788,-53.6791 0,-5.3472 43.1915,-102.5999 46.6303,-104.9957 2.9475,-2.0535 23.2078,-35.9321 31.8282,-53.222095 3.0738,-6.165 7.9321,-12.667 10.7963,-14.4488 2.8642,-1.7819 8.8859,-8.8348 13.3816,-15.6733 15.5355,-23.6313 52.2462,-66.0618002 71.4626,-82.597 10.6072,-9.1273 20.6017,-19.2367 22.2101,-22.4654 1.6084,-3.2287 7.4134,-8.7145 12.9,-12.1906 15.359,-9.7308 39.147,-27.6309 45.9621,-34.5857 3.3737,-3.4427 20.4873,-14.410505 38.0303,-24.372805 l 31.8965,-18.1133 -23.5421,-0.1442 c -20.5221,-0.1257 -24.1117,0.5654 -27.9829,5.3875 -3.0815,3.8383 -7.5569,5.5316 -14.6204,5.5316 -8.5158,0 -11.5614,1.6415 -18.6349,10.0437 -11.0378,13.1112 -35.9779,31.443805 -42.7768,31.443805 -7.514,0 -141.1088,150.5973 -141.1088,159.0676 0,3.3137 -2.1366,8.2046 -4.748,10.8687 -2.6114,2.664 -6.927,10.0135 -9.5903,16.332195 -2.6633,6.3187 -8.8075,15.7777 -13.6538,21.02 -4.8463,5.2423 -8.8114,11.3453 -8.8114,13.5623 0,5.9529 -11.4389,32.1528 -15.8326,36.2634 -2.0878,1.9532 -3.796,5.9319 -3.796,8.8416 0,2.9097 -1.5474,8.0469 -3.4387,11.4161 -1.8913,3.3692 -8.1083,22.306 -13.8157,42.0817 -6.1709,21.3818 -12.7331,38.8198 -16.1899,43.0217 -4.2783,5.2006 -5.8128,10.2681 -5.8128,19.1961 0,6.6716 -2.8604,22.7836 -6.3565,35.8045 -3.4961,13.0208 -7.3605,27.4965 -8.5875,32.1681 -1.2271,4.6716 -2.231,21.6287 -2.231,37.6824 0,18.87544 -1.3004,33.34337 -3.6804,40.94745 -5.1902,16.58282 -5.1902,96.81627 0,113.39909 2.38,7.60401 3.6804,22.07201 3.6804,40.94731 0,16.0538 1.0039,33.0108 2.231,37.6825 1.227,4.6716 5.0914,19.1472 8.5875,32.1681 3.4961,13.0209 6.3565,29.0213 6.3565,35.5566 0,8.4413 1.6719,14.122 5.7734,19.6167 3.1753,4.254 10.4251,23.7253 16.1106,43.2697 5.6855,19.5443 11.9204,38.2917 13.8552,41.661 1.9349,3.3691 3.5179,8.5064 3.5179,11.4161 0,2.9097 1.7082,6.8884 3.796,8.8417 4.3937,4.1105 15.8326,30.3104 15.8326,36.2633 0,2.2169 3.9314,8.32 8.7366,13.5623 4.8051,5.2423 10.7174,14.51 13.1384,20.5948 2.421,6.0848 6.7703,13.4343 9.6651,16.3323 2.8949,2.8979 5.2634,8.0025 5.2634,11.3436 0,7.6954 133.4123,159.01782 140.197,159.01782 2.4866,0 9.5837,4.3562 15.7713,9.6804 6.1877,5.3242 12.5978,9.6804 14.2448,9.6804 1.6469,0 7.307,4.9785 12.5778,11.0633 5.2709,6.0848 11.185,11.0633 13.1425,11.0633 5.2677,0 28.512,12.9027 32.1526,17.8475 1.7327,2.3536 4.8408,4.2792 6.9069,4.2792 5.4234,0 28.6406,12.8089 32.3502,17.8475 1.7327,2.3536 6.6035,4.2834 10.8241,4.2887 7.6,0.01 42.3185,14.4777 46.8081,19.5064 1.282,1.4359 6.8025,2.6109 12.2678,2.6111 5.4653,2e-4 18.7698,3.0931 29.5656,6.873 10.7957,3.7801 21.8367,6.9311 24.5356,7.0023 2.699,0.072 7.0504,1.9567 9.6699,4.1902 3.542,3.0199 12.3461,4.1105 34.35,4.2552 16.273,0.1067 31.7954,1.3015 34.4944,2.6548 5.1896,2.6021 75.38078,1.4854 131.76698,-2.0963 z m -12.9521,-49.2404 c 16.6869,-2.3288 31.361,-4.9455 32.609,-5.8151 1.248,-0.8694 9.6441,-2.6247 18.6582,-3.9007 26.8664,-3.8029 114.48413,-37.3246 125.48963,-48.0112 2.0701,-2.0099 9.16,-5.6762 15.7553,-8.1471 6.5955,-2.4708 15.6307,-7.6213 20.0783,-11.4454 4.4477,-3.8241 9.3438,-6.9529 10.8804,-6.9529 9.6444,0 58.2285,-38.2576 89.3011,-70.3203 41.5286,-42.85202 92.2502,-102.94332 92.2502,-109.29162 0,-1.4552 5.5419,-10.1526 12.3153,-19.3276 12.7261,-17.2379 29.3954,-47.1283 29.3954,-52.7097 0,-1.747 2.7756,-7.2786 6.168,-12.2922 3.3923,-5.0137 7.9613,-15.1988 10.1532,-22.6336 2.1919,-7.4347 5.4442,-15.427 7.2273,-17.7605 8.8347,-11.5617 39.4312,-111.363 41.9438,-136.8147 0.7509,-7.606 2.8839,-20.6248 4.7401,-28.9308 4.358,-19.502 4.5519,-52.66251 0.3078,-52.6578 -2.3713,0.003 -2.8928,-11.67082 -2.2991,-51.46317 0.7925,-53.11534 -1.4173,-79.30209 -11.9957,-142.14848 -10.1923,-60.5527 -40.7911,-147.6287 -70.9225,-201.8259 -6.7717,-12.1803 -12.3121,-22.8481 -12.3121,-23.7063 0,-1.5876 -16.0021,-25.8018 -40.1345,-60.731295 -24.4477,-35.3858 -82.567,-95.0214 -121.8011,-124.9789 -61.0451,-46.6114 -148.246,-87.863905 -213.03553,-100.781905 -87.6372,-17.4734 -141.38318,-17.4767 -228.95788,-0.014 -78.4591,15.6448 -177.0891,67.132505 -245.7885,128.308705 -28.7445,25.5966998 -76.4414,79.3387 -98.7973,111.3186 -53.36,76.331495 -98.7764,185.258095 -113.8922,273.158595 -16.3784,95.24302 -15.7281,176.75017 2.2338,279.98465 4.1762,24.0025 22.023,83.1739 36.1016,119.6955 17.7546,46.0577 47.1969,100.7329 76.9937,142.98 17.8352,25.2873 69.6031,85.2398 81.8784,94.82352 l 9.7226,7.5908 -6.7225,1.3829 -6.7224,1.3829 6.9264,7.2479 c 3.8095,3.9864 10.2387,9.5179 14.2871,12.2924 4.0484,2.7743 13.0693,10.4148 20.0465,16.9787 12.5554,11.8116 40.7749,31.2438 45.3725,31.2438 1.3099,0 5.8962,2.9454 10.192,6.5452 4.2957,3.5998 13.3309,8.7892 20.0782,11.532 6.7473,2.7428 13.9615,6.5926 16.0316,8.555 10.6332,10.0801 99.3418,44.5068 121.3683,47.1014 6.7473,0.7947 15.8149,2.658 20.1501,4.1407 29.6973,10.1559 123.25188,13.5818 174.72548,6.3982 z M 1448.0033,385.03023 c -1.4683,-11.1518 -3.0537,-24.01 -3.5231,-28.5736 -0.5889,-5.7275 -0.967,-4.5126 -1.2209,3.9222 -0.3979,13.2287 4.3545,48.37634 6.2518,46.23742 0.6392,-0.72044 -0.039,-10.43412 -1.5078,-21.58602 z m -9.8113,-56.6035 c -3.5767,-11.7219 -4.973,-14.139 -5.0324,-8.7112 -0.079,7.2332 7.2005,28.0706 9.0703,25.9629 0.5017,-0.5656 -1.3154,-8.3289 -4.0379,-17.2517 z m -13.8246,-53.4792 c -5.6723,-21.9939 -10.7009,-35.1383 -10.8439,-28.3454 -0.1212,5.7579 13.6317,50.3891 15.5272,50.3891 0.551,0 -1.5564,-9.9196 -4.6833,-22.0437 z m -20.6115,-60.6632 c -6.959,-15.3768 -8.7669,-14.4607 -2.0802,1.0542 2.9359,6.8121 5.7588,11.9112 6.2732,11.3314 0.5143,-0.5798 -1.3725,-6.1534 -4.193,-12.3856 z m -18.3995,-41.4805 c -3.487,-7.7572 -6.8616,-14.1041 -7.499,-14.1041 -0.6373,0 1.8044,6.8106 5.426,15.1347 3.6217,8.3242 6.9962,14.6711 7.499,14.1042 0.5029,-0.5668 -1.9388,-7.3775 -5.426,-15.1348 z m -18.4723,-36.9223 c -2.9348,-4.9439 -9.8146,-16.8099 -15.2883,-26.3688 -5.4739,-9.558895 -10.4771,-16.788495 -11.1183,-16.065695 -2.4319,2.7414 26.4355,51.423495 30.493,51.423495 0.6872,0 -1.1516,-4.045 -4.0864,-8.989 z m -43.2548,-69.145695 c -4.0486,-4.944 -11.7179,-15.1867 -17.0429,-22.7616 -11.6534,-16.5769 -56.1652,-66.8035 -62.6925,-70.7413 -8.5398,-5.1521 -4.7777,1.7846 5.8248,10.7397 5.7603,4.8653 22.0458,23.3478998 36.1901,41.0725 34.5607,43.3088 40.8331,50.6796 43.1279,50.6796 1.0744,0 -1.359,-4.045 -5.4074,-8.9889 z m -727.21911,-232.592405 11.0411,-4.3136 -8.7732,-0.1321 c -6.5434,-0.099 -10.285,1.7799 -14.7214,7.3903 -3.2715,4.1373 -4.2921,6.1379 -2.2679,4.4457 2.0242,-1.6922 8.6489,-5.0178 14.7214,-7.3903 z m 495.62111,2.3369 c -3.8421,-4.6103 -8.2774,-6.8497 -13.3089,-6.7197 -7.4959,0.1936 -7.4812,0.2218 2.2085,4.2202 5.3653,2.2139 10.8306,5.2378 12.1453,6.7197 5.2493,5.9174 4.3388,2.2398 -1.0449,-4.2202 z m -188.92493,-2.2112 c -29.9712,-3.5498 -100.06788,-3.5498 -130.03908,0 -19.1869,2.2724 -7.6885,2.7606 65.01958,2.7606 72.708,0 84.2064,-0.4882 65.0195,-2.7606 z m -272.21808,-9.0261 c 2.8015,-3.8053 2.3236,-4.0871 -3.9934,-2.3545 -14.8076,4.0614 -17.6108,6.3143 -8.0896,6.5019 5.2399,0.1032 10.2094,-1.6025 12.083,-4.1474 z m 430.47341,1.7928 c -2.6989,-1.1985 -8.1363,-3.0648 -12.083,-4.1473 -6.3169,-1.7326 -6.7949,-1.4508 -3.9933,2.3545 1.8736,2.5449 6.8431,4.2506 12.0829,4.1474 6.9398,-0.1367 7.8195,-0.6554 3.9934,-2.3546 z m -25.7625,-12.6822 c -4.3976,-5.2768 -8.1311,-6.8689 -15.7625,-6.7219 l -10,0.1926 12.2679,4.6476 12.2678,4.6475 -30.6696,1.5138 -30.66963,1.5137 34.16423,0.5607 34.1643,0.5606 z m -382.75691,-1.3829 13.4947,-5.3511 -10.0474,-0.09 c -7.0042,-0.063 -11.3925,1.5852 -14.4883,5.4414 -5.3401,6.6517 -5.7335,6.6517 11.041,0 z m 38.3633,-9.6634 c 5.5243,-3.2477 5.9779,-4.0903 2.1207,-3.9383 -2.699,0.1063 -8.7715,1.8709 -13.4947,3.9213 -8.0195,3.4813 -8.1598,3.7418 -2.1206,3.9383 3.5568,0.1157 9.6293,-1.6488 13.4946,-3.9213 z m 305.13638,-0.017 c -11.9433,-5.1847 -16.9214,-5.2249 -10.8965,-0.088 2.6194,2.2335 8.075,4.0057 12.1234,3.9384 l 7.36063,-0.1225 z m -34.0044,-9.7411 c -8.534,-4.3652 -16.0339,-5.4709 -37.1085,-5.4709 -17.2062,0 -30.0488,-1.4462 -36.844,-4.1488 -7.6312,-3.0351 -21.1328,-4.1487 -50.2982,-4.1487 -29.16548,0 -42.66698,1.1136 -50.29818,4.1487 -6.7953,2.7026 -19.6378,4.1488 -36.8441,4.1488 -21.0746,0 -28.5745,1.1057 -37.1085,5.4709 l -10.6956,5.4709 h 134.94638 134.9463 z" style="fill: none; fill-opacity: 1; stroke-width: 2.60503"></path>
          <path style="filter: url(#d-6)" id="path12" filter="url(#d)" fill="#ff6600" d="m -508.57,590.93 a 238.57,238.57 0 1 1 -477.14,0 238.57,238.57 0 1 1 477.14,0 z" transform="matrix(2.4493,0,0,2.4493,2818.6331,-560.11897)"></path>
          <path style="filter: url(#e-7)" id="path14" filter="url(#e)" fill="#ffff00" d="m -508.57,590.93 c 0,131.76 -106.81,238.57 -238.57,238.57 -131.76,0 -238.57,-106.81 -238.57,-238.57 0,-131.76 106.81,-238.57 238.57,-238.57 131.76,0 238.57,106.81 238.57,238.57 z" transform="matrix(1.982,0,0,1.982,2469.5531,-284.02897)"></path>
          <path style="stroke-width: 1.6707" id="path16" fill="#ffff00" d="m 1387.2452,887.24778 c 0,220.13152 -178.4475,398.57902 -398.57883,398.57902 -220.13158,0 -398.57908,-178.4475 -398.57908,-398.57902 0,-220.1314 178.4475,-398.57891 398.57908,-398.57891 220.13133,0 398.57883,178.44751 398.57883,398.57891 z"></path>
          <path style="stroke-width: 1.6707" id="path18" fill="url(#f)" d="m 1387.2452,887.24778 c 0,220.13152 -178.4475,398.57902 -398.57883,398.57902 -220.13158,0 -398.57908,-178.4475 -398.57908,-398.57902 0,-220.1314 178.4475,-398.57891 398.57908,-398.57891 220.13133,0 398.57883,178.44751 398.57883,398.57891 z"></path>
        </svg>
      </div>
      <div id="contenedor-estrellas">
        <div class="estrella" style="top: 15px;
            left: 50px;
            width: 3px;
            height: 3px;
            animation-delay: 5.523s;"></div>
        <div class="estrella" style="top: 24px;
            left: 33px;
            width: 3px;
            height: 3px;
            animation-delay: 11.346s;"></div>
        <div class="estrella" style="top: 10px;
            left: 117px;
            width: 4px;
            height: 4px;
            animation-delay: 19.231s;"></div>
        <div class="estrella" style="top: 67px;
            left: 98px;
            width: 2px;
            height: 2px;
            animation-delay: 17.694s;"></div>
        <div class="estrella" style="top: 27px;
            left: 95px;
            width: 1px;
            height: 1px;
            animation-delay: 8.425s;"></div>
        <div class="estrella" style="top: 15px;
            left: 50px;
            width: 3px;
            height: 3px;
            animation-delay: 20.963s;"></div>
        <div class="estrella" style="top: 25px;
            left: 70px;
            width: 4px;
            height: 4px;
            animation-delay: 24.583s;"></div>
        <div class="estrella" style="top: 35px;
            left: 10px;
            width: 3px;
            height: 3px;
            animation-delay: 15.312s;"></div>
        <div class="estrella" style="top: 52px;
            left: 67px;
            width: 5px;
            height: 5px;
            animation-delay: 13.237s;"></div>
        <div class="estrella" style="top: 55px;
            left: 130px;
            width: 2px;
            height: 2px;
            animation-delay: 11.569s;"></div>
        <div class="estrella" style="top: 20px;
            left: 90px;
            width: 2px;
            height: 2px;
            animation-delay: 5.237s;"></div>
        <div class="estrella" style="top: 30px;
            left: 110px;
            width: 3px;
            height: 3px;
            animation-delay: 8.962s;"></div>
        <div class="estrella" style="top: 40px;
            left: 130px;
            width: 4px;
            height: 4px;
            animation-delay: 12.125s;"></div>
        <div class="estrella" style="top: 50px;
            left: 55px;
            width: 1px;
            height: 1px;
            animation-delay: 4.123s;"></div>
        <div class="estrella" style="top: 60px;
            left: 24px;
            width: 4px;
            height: 4px;
            animation-delay: 17.214s;"></div>
        <div class="estrella" style="top: 13px;
            left: 135px;
            width: 5px;
            height: 5px;
            animation: 8.214s;"></div>
      </div>

      <div class="luna">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 407.52228 407.53354">
          <g transform="translate(-141.87 -244.15)">
            <g fill-opacity=".97647" transform="translate(362,190)">
              <path fill="#d7ded1" d="m0.46804 65.119c-23.184 0-44-21.336-44-4.5 0 3.0344-10.388 3.9518-9.25 6.7188-63.075 10.384-112.23 47.321-140.78 102.09-25.903 2.5123-12.969 17.782-12.969 38.688 0 14.476-23.362 29.172-8.8438 36.469-0.47812 5.6375-0.71875 11.333-0.71875 17.094 0 110.4 89.6 200 200 200 10.394 0 20.594-0.8127 30.562-2.3438-0.00263 0.0923 0 0.1884 0 0.2813 0 5.796 8.152-3.5 14.5-3.5s8.5 9.296 8.5 3.5c0-1.7485-0.45216-3.4245-1.2812-4.875 16.477-4.4565 28.623-9.9455 43.125-18.219 13.65 3.9461 15.436 4.0872 20.656 0.5938 12.485-8.356-6.2187-19.646 18.5-12.5 6.4463 1.8637-1.9357-5.6658-6.4375-9.4063 5.8425-4.882 11.407-10.086 16.656-15.594 2.5671 4.4993 2.1103-7.5 7.2812-7.5 8.004 0 5.5-3.168 5.5-12 0-6.2632 10.724-0.6858 5.9688-3.3125 19.205-27.22 31.795-59.44 35.406-94.312 6.5941-3.3161 5.625-18.122-0.375-37.375-6.7336-21.607 5.728-44-2-44-1.7895 0-3.489 0.98662-5.0625 2.7812-20.423-67.691-69.766-117.29-139.06-133.78 2.0021-3.5563-5.875-5.4225-5.875-9.5 0-16.836-6.816 4.5-30 4.5z"></path>
              <path fill-rule="evenodd" fill="#eef0ec" d="m-26.562 66.625c-4.9404 0.19218-7.5205 5.8716-11.156 9.4375-16.426 0.76368-33.059 4.9504-49.125 14.094-40.526 23.064-68.586 60.084-87.031 93.062-7.6101-0.27625-15.181-2.1987-22.688-1.9375-8.3723 2.418-5.0074 11.759-1.5938 16.938 3.7425 7.9003 1.7998 17.966-4.7188 23.844-6.8068 3.7464-4.6385 12.162 3.0312 12.312 0.83057 0.31214 1.6223 0.47851 2.375 0.53125-4.1523 11.467-6.0312 18.594-6.0312 18.594s216.37-190.21 306.88-117.38c0 0-33.434-30.92-78.281-48.438 0.58451-5.4859 3.5531-14.122-2.5625-17.219-6.0254 2.9207-12.851 2.8404-19.375 3.2188-9.6222 1.6512-17.833-4.3583-26.781-6.5625-1.0747-0.37374-2.0392-0.53494-2.9375-0.5z"></path>
              <path fill-rule="evenodd" fill="#c4ccbd" d="m162.06 305.12c-109.6 59.397-180.31 128.69-292.03 106.06 0 0 69.281 45.307 143.72 38 1.8334 1.7492 3.533 3.6532 5.875 4.5938 4.6359 0.68484 8.7801-2.6731 12-5.5938 0.66211-0.63602 1.0622-1.3581 1.2812-2.0938 17.636-4.01 35.269-11.372 52.031-23.438 3.292 2.9193 6.4956 6.1644 10.125 5.375 3.8166-4.9484 8.3887-9.6206 11.812-14.438-0.27755-2.0137-0.82968-5.3166-1.8438-8.1875 5.445-5.5066 10.744-11.602 15.875-18.375 4.135-2.6538 7.9081-5.9203 11.25-9.5312 2.111-2.5092 5.3357-5.6366 3.5312-9.1875-0.32218-0.44945-0.79996-0.92252-1.2812-1.4062 10.272-17.184 19.596-37.601 27.656-61.781z"></path>
            </g>
            <path fill="#c4ccbe" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.30544 0 0 .30544 194.47 315.86)"></path>
            <path fill="#a2ae98" d="m293.95 401.68c-28.201 4.1202-48.509 28.374-48.509 56.06 6.4335-23.885 26.929-39.836 52.949-43.637 19.193-2.8042 37.207 0.19126 50.787 12.003-11.814-17.482-32.964-27.679-55.228-24.426z"></path>
            <path fill="#ececec" d="m290.7 391.89c-28.199 4.1276-50.247 24.459-50.24 52.145 6.4272-23.887 26.481-42.897 52.501-46.705 19.192-2.8092 37.644 3.2358 51.227 15.044-11.819-17.479-31.226-23.743-53.489-20.484z"></path>
            <path fill="#a2ae98" d="m363.16 455.25c-0.23743 6.1563-1.3722 12.208-3.3125 17.969 1.4908-0.91056 3.0963-1.6332 4.8125-2.125 0.16295-5.346-0.32113-10.683-1.5-15.844zm12.438 21.5c-0.30814 7.9893-5.262 15.429-13.188 18.5-6.054 1.9431-11.391 3.1583-12.031-4.0312-1.0079 1.3457-2.0714 2.6393-3.1875 3.9062-0.68281-0.27683-1.3813-0.58973-2.0312-0.9375 0.51732 0.48382 1.0793 0.93218 1.6562 1.375-6.5017 7.2468-14.773 13.119-24.469 16.875-18.087 7.0076-37.411 5.2414-53.281-3.25 15.41 14.413 40.051 23.566 61.031 15.438 10.818-4.1915 19.314-11.992 25.188-21.594 0.84026-3.3457 2.3782-1.777 9.625-3.8438 8.5895-3.3279 12.68-13.714 10.688-22.438z"></path>
            <path fill="#c4ccbe" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.13119 0 0 .13119 265.51 542.98)"></path>
            <path fill="#a2ae98" d="m308.24 579.84c-12.112 1.7697-20.835 12.187-20.835 24.078 2.7632-10.259 11.566-17.11 22.742-18.743 8.2436-1.2044 15.981 0.08214 21.814 5.1555-5.0743-7.5088-14.158-11.888-23.721-10.491z"></path>
            <path fill="#ececec" d="m306.85 575.63c-12.112 1.7729-21.582 10.506-21.578 22.397 2.7606-10.26 11.374-18.425 22.55-20.06 8.2433-1.2066 16.168 1.3898 22.003 6.4616-5.0763-7.5075-13.412-10.198-22.974-8.7981z"></path>
            <path fill="#a2ae98" d="m323.98 632.86c11.414-4.4224 16.849-18.207 14.201-29.8-0.40946 10.617-6.9911 20.493-17.523 24.573-7.7684 3.0098-16.073 2.2412-22.889-1.406 6.6189 6.1904 17.2 10.124 26.211 6.6324z"></path>
            <path fill="#ececec" d="m317.07 627.04c11.883-2.9368 19.554-14.151 18.4-25.987-1.7546 10.479-8.7877 18.314-19.752 21.024-8.0878 1.9988-16.977 1.3061-23.274-3.1772 5.7791 6.9809 15.245 10.458 24.627 8.1395z"></path>
            <path fill="#c4ccbe" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.06262 0 0 .06262 192.84 475.64)"></path>
            <path fill="#808080" d="m213.23 493.23c-5.7815 0.84469-9.945 5.817-9.9449 11.493 1.319-4.8968 5.5208-8.1668 10.855-8.9462 3.9348-0.57489 7.6278 0.03921 10.412 2.4608-2.4221-3.5841-6.758-5.6745-11.322-5.0076z"></path>
            <path fill="#ececec" d="m212.57 491.23c-5.7812 0.84621-10.301 5.0145-10.3 10.69 1.3177-4.8971 5.429-8.7944 10.763-9.5752 3.9346-0.57593 7.7175 0.66337 10.502 3.0842-2.423-3.5834-6.4016-4.8676-10.966-4.1995z"></path>
            <path fill="#808080" d="m220.74 518.54c5.4482-2.1109 8.0422-8.6905 6.7782-14.224-0.19544 5.0675-3.337 9.7816-8.364 11.729-3.708 1.4366-7.6717 1.0698-10.925-0.67109 3.1593 2.9548 8.2097 4.8323 12.511 3.1658z"></path>
            <path fill="#ececec" d="m217.45 515.77c5.6722-1.4018 9.3335-6.7547 8.7826-12.404-0.8375 5.0017-4.1945 8.7418-9.4282 10.035-3.8604 0.95404-8.1033 0.62343-11.109-1.5166 2.7585 3.3321 7.2768 4.9918 11.755 3.8851z"></path>
            <path fill="#daded5" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.11832 0 0 .11832 215.45 297.93)"></path>
            <path fill="#808080" d="m253.99 331.17c-10.924 1.596-18.79 10.991-18.79 21.715 2.4921-9.2522 10.431-15.431 20.51-16.903 7.4346-1.0862 14.412 0.07409 19.673 4.6496-4.5763-6.7719-12.769-10.722-21.393-9.4615z"></path>
            <path fill="#ececec" d="m252.73 327.38c-10.923 1.5989-19.464 9.4746-19.461 20.199 2.4896-9.2528 10.258-16.616 20.337-18.092 7.4343-1.0882 14.582 1.2534 19.843 5.8275-4.5781-6.7707-12.096-9.197-20.719-7.9347z"></path>
            <path fill="#808080" d="m268.18 378.99c10.294-3.9884 15.195-16.42 12.807-26.875-0.36927 9.5748-6.305 18.482-15.803 22.162-7.006 2.7144-14.495 2.0212-20.643-1.268 5.9694 5.5828 15.512 9.1303 23.639 5.9815z"></path>
            <path fill="#ececec" d="m261.95 373.74c10.717-2.6486 17.635-12.763 16.594-23.436-1.5824 9.4504-7.9253 16.517-17.814 18.961-7.2941 1.8026-15.311 1.1779-20.99-2.8654 5.2119 6.2958 13.749 9.4318 22.21 7.3407z"></path>
            <path fill="#daded5" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.06262 0 0 .06262 375.84 287.64)"></path>
            <path fill="#808080" d="m396.23 305.23c-5.7815 0.84469-9.945 5.817-9.9449 11.493 1.319-4.8968 5.5208-8.1668 10.855-8.9462 3.9348-0.57489 7.6278 0.03921 10.412 2.4608-2.4221-3.5841-6.758-5.6745-11.322-5.0076z"></path>
            <path fill="#ececec" d="m395.57 303.23c-5.7812 0.84621-10.301 5.0145-10.3 10.69 1.3177-4.8971 5.429-8.7944 10.763-9.5752 3.9346-0.57593 7.7175 0.66337 10.502 3.0842-2.423-3.5834-6.4016-4.8676-10.966-4.1995z"></path>
            <path fill="#808080" d="m403.74 330.54c5.4482-2.1109 8.0422-8.6905 6.7782-14.224-0.19544 5.0675-3.337 9.7816-8.364 11.729-3.708 1.4366-7.6717 1.0698-10.925-0.67109 3.1593 2.9548 8.2097 4.8323 12.511 3.1658z"></path>
            <path fill="#ececec" d="m400.45 327.77c5.6722-1.4018 9.3335-6.7547 8.7826-12.404-0.8375 5.0017-4.1945 8.7418-9.4282 10.035-3.8604 0.95404-8.1033 0.62343-11.109-1.5166 2.7585 3.3321 7.2768 4.9918 11.755 3.8851z"></path>
            <g transform="matrix(.708 .14107 -.16809 .84361 236.98 12.64)">
              <path fill="#c4ccbe" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.11832 0 0 .11832 443.45 470.93)"></path>
              <path fill="#a2ae98" d="m481.99 504.17c-10.924 1.596-18.79 10.991-18.79 21.715 2.4921-9.2522 10.431-15.431 20.51-16.903 7.4346-1.0862 14.412 0.07409 19.673 4.6496-4.5763-6.7719-12.769-10.722-21.393-9.4615z"></path>
              <path fill="#ececec" d="m480.73 500.38c-10.923 1.5989-19.464 9.4746-19.461 20.199 2.4896-9.2528 10.258-16.616 20.337-18.092 7.4343-1.0882 14.582 1.2534 19.843 5.8275-4.5781-6.7707-12.096-9.197-20.719-7.9347z"></path>
              <path fill="#a2ae98" d="m496.18 551.99c10.294-3.9884 15.195-16.42 12.807-26.875-0.36927 9.5748-6.305 18.482-15.803 22.162-7.006 2.7144-14.495 2.0212-20.643-1.268 5.9694 5.5828 15.512 9.1303 23.639 5.9815z"></path>
              <path fill="#ececec" d="m489.95 546.74c10.717-2.6486 17.635-12.763 16.594-23.436-1.5824 9.4504-7.9253 16.517-17.814 18.961-7.2941 1.8026-15.311 1.1779-20.99-2.8654 5.2119 6.2958 13.749 9.4318 22.21 7.3407z"></path>
            </g>
            <path fill="#c4ccbe" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.098724 0 0 .098724 321.4 432.05)"></path>
            <path fill="#ececec" d="m369.09 480.75c-0.30814 7.9893-13.512 11.429-22.938 10-11.126 7.7433-17.651 9.767-32.812 15.938-21.587 4.2576-39.411-2.0086-55.281-10.5 15.41 14.413 40.051 23.566 61.031 15.438 10.818-4.1915 21.314-8.4925 27.188-18.094 3.0903 0.40428 5.1282 1.973 10.625 1.6562 3.5895 0.42207 12.18 1.2864 12.188-14.438z"></path>
            <path fill="#c4ccbe" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.12384 0 0 .12384 336.62 481.09)"></path>
            <path fill="#a2ae98" d="m376.95 515.88c-11.434 1.6706-19.668 11.504-19.668 22.73 2.6085-9.6844 10.919-16.152 21.469-17.693 7.7819-1.137 15.086 0.07755 20.592 4.8668-4.7901-7.0883-13.365-11.222-22.392-9.9036z"></path>
            <path fill="#ececec" d="m375.64 511.91c-11.434 1.6736-20.373 9.9172-20.37 21.143 2.606-9.6851 10.737-17.393 21.287-18.937 7.7816-1.139 15.263 1.312 20.771 6.0998-4.792-7.087-12.661-9.6267-21.687-8.3054z"></path>
            <path fill="#a2ae98" d="m391.81 565.93c10.775-4.1747 15.905-17.187 13.405-28.131-0.38653 10.022-6.5996 19.345-16.542 23.197-7.3334 2.8413-15.172 2.1157-21.607-1.3272 6.2483 5.8437 16.236 9.5568 24.743 6.261z"></path>
            <path fill="#ececec" d="m385.29 560.44c11.218-2.7723 18.459-13.359 17.37-24.531-1.6563 9.8919-8.2955 17.289-18.646 19.847-7.6349 1.8868-16.026 1.233-21.971-2.9993 5.4554 6.59 14.391 9.8724 23.248 7.6837z"></path>
            <path fill-opacity=".97647" fill="#e2e4df" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.097159 -.01751 .0079452 .044087 261.22 274.57)"></path>
            <path fill="#808080" d="m295.09 281.26c-8.8632 2.2113-14.692 6.8762-13.972 10.872 1.4252-3.8163 7.5297-7.2934 15.708-9.3338 6.0322-1.505 11.84-2.1053 16.467-1.1789-4.2128-1.8461-11.205-2.1054-18.203-0.35957z"></path>
            <path fill="#ececec" d="m293.81 280.03c-8.8626 2.2123-15.347 6.4108-14.624 10.406 1.4231-3.8162 7.3077-7.7096 15.485-9.7509 6.0318-1.5057 12.058-1.6909 16.686-0.76523-4.2141-1.8454-10.55-1.6369-17.547 0.10968z"></path>
            <path fill="#808080" d="m309.96 296.98c8.1855-3.0096 11.375-8.3672 8.7122-11.91 0.33973 3.6224-3.9365 7.8197-11.489 10.597-5.571 2.0483-11.767 2.8983-17.036 2.5824 5.2768 1.1968 13.351 1.1065 19.813-1.2695z"></path>
            <path fill="#ececec" d="m304.49 295.94c8.623-2.573 13.625-7.3654 12.053-11.189-0.66483 3.7555-5.3989 7.3274-13.355 9.7015-5.8687 1.7511-12.494 2.7048-17.429 2.0387 4.7027 1.5746 11.924 1.4797 18.732-0.55163z"></path>
            <path fill="#c4ccbe" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.043895 -.019239 .044616 .10179 178.48 545.14)"></path>
            <path fill="#a2ae98" d="m205.31 567.47c-3.4508 3.1494-2.8266 12.511 1.2175 21.738-2.5644-8.3652-1.9488-14.972 1.2352-17.878 2.3486-2.1434 5.3748-2.2798 9.0518 0.80121-4.2514-5.082-8.7802-7.1478-11.505-4.6614z"></path>
            <path fill="#ececec" d="m203.42 564.42c-3.4496 3.1518-3.6481 11.316 0.39702 20.542-2.5655-8.3654-2.4604-15.964 0.72253-18.872 2.3477-2.1451 5.8824-1.2928 9.5593 1.7869-4.2516-5.0806-7.9555-5.9457-10.679-3.4574z"></path>
            <path fill="#a2ae98" d="m228.61 606.3c2.3151-5.1052-0.55458-16.598-5.3831-25.204 3.4736 8.2976 4.6302 16.926 2.4941 21.636-1.5756 3.4746-4.6155 4.096-8.1364 2.2658 4.3198 3.8324 9.1977 5.3328 11.025 1.3022z"></path>
            <path fill="#ececec" d="m224.32 602.8c2.9773-4.0214 1.7299-13.848-2.6812-22.861 2.9766 8.3878 3.2882 15.499 0.54111 19.21-2.0263 2.7369-5.236 3.5031-8.8678 0.94799 4.3077 4.569 8.6574 5.8788 11.008 2.7039z"></path>
            <g transform="matrix(.9134 -.24403 .21007 .78629 -32.955 180.35)">
              <path fill="#c4ccbe" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.17954 0 0 .17954 370.24 308.37)"></path>
              <path fill="#a2ae98" d="m428.71 358.82c-16.576 2.4219-28.514 16.678-28.514 32.952 3.7816-14.04 15.829-23.415 31.124-25.65 11.282-1.6483 21.87 0.11242 29.853 7.0555-6.9444-10.276-19.376-16.27-32.463-14.358z"></path>
              <path fill="#ececec" d="m426.8 353.06c-16.576 2.4262-29.535 14.377-29.531 30.651 3.7779-14.041 15.566-25.215 30.86-27.454 11.281-1.6513 22.127 1.902 30.112 8.843-6.9471-10.274-18.355-13.956-31.441-12.041z"></path>
              <path fill="#a2ae98" d="m450.24 431.38c15.621-6.0522 23.058-24.917 19.434-40.782-0.56036 14.529-9.5676 28.045-23.981 33.63-10.631 4.1191-21.996 3.0671-31.324-1.9241 9.0583 8.4718 23.538 13.855 35.871 9.0767z"></path>
              <path fill="#ececec" d="m440.8 423.42c16.263-4.0191 26.761-19.367 25.181-35.564-2.4012 14.341-12.026 25.064-27.032 28.773-11.068 2.7354-23.233 1.7874-31.852-4.3482 7.9089 9.5537 20.864 14.312 33.703 11.139z"></path>
              <g transform="matrix(.10015 0 0 .10015 386.4 347.37)">
                <path fill="#a2ae98" d="m329.56 392.23c-32.314 4.7212-55.586 32.513-55.585 64.238 7.372-27.37 30.857-45.647 60.673-50.003 21.993-3.2132 42.634 0.21916 58.196 13.754-13.538-20.033-37.772-31.716-63.284-27.989z"></path>
                <path fill="#ececec" d="m325.84 381.01c-32.313 4.7298-57.577 28.027-57.568 59.752 7.3648-27.372 30.344-49.155 60.159-53.519 21.992-3.219 43.135 3.7078 58.7 17.239-13.543-20.029-35.781-27.206-61.291-23.472z"></path>
                <path fill="#a2ae98" d="m371.54 533.68c30.452-11.798 44.95-48.574 37.886-79.502-1.0924 28.324-18.651 54.672-46.749 65.559-20.725 8.0298-42.879 5.9792-61.064-3.7509 17.658 16.515 45.886 27.009 69.928 17.694z"></path>
                <path fill="#ececec" d="m353.12 518.16c31.704-7.835 52.168-37.754 49.089-69.329-4.681 27.956-23.444 48.861-52.697 56.09-21.577 5.3324-45.292 3.4845-62.093-8.4765 15.418 18.624 40.672 27.901 65.702 21.715z"></path>
              </g>
              <g transform="matrix(.072158 0 0 .072158 413.73 346.21)">
                <path fill="#a2ae98" d="m329.56 392.23c-32.314 4.7212-55.586 32.513-55.585 64.238 7.372-27.37 30.857-45.647 60.673-50.003 21.993-3.2132 42.634 0.21916 58.196 13.754-13.538-20.033-37.772-31.716-63.284-27.989z"></path>
                <path fill="#ececec" d="m325.84 381.01c-32.313 4.7298-57.577 28.027-57.568 59.752 7.3648-27.372 30.344-49.155 60.159-53.519 21.992-3.219 43.135 3.7078 58.7 17.239-13.543-20.029-35.781-27.206-61.291-23.472z"></path>
                <path fill="#a2ae98" d="m371.54 533.68c30.452-11.798 44.95-48.574 37.886-79.502-1.0924 28.324-18.651 54.672-46.749 65.559-20.725 8.0298-42.879 5.9792-61.064-3.7509 17.658 16.515 45.886 27.009 69.928 17.694z"></path>
                <path fill="#ececec" d="m353.12 518.16c31.704-7.835 52.168-37.754 49.089-69.329-4.681 27.956-23.444 48.861-52.697 56.09-21.577 5.3324-45.292 3.4845-62.093-8.4765 15.418 18.624 40.672 27.901 65.702 21.715z"></path>
              </g>
            </g>
            <path fill="#c4ccbe" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.079762 0 0 .073759 275.26 400.9)"></path>
            <path fill="#a2ae98" d="m301.23 421.62c-7.3642 0.99495-12.668 6.8517-12.667 13.537 1.68-5.7679 7.0321-9.6196 13.827-10.538 5.012-0.67715 9.716 0.04619 13.262 2.8986-3.0851-4.2216-8.608-6.6839-14.422-5.8984z"></path>
            <path fill="#ececec" d="m300.39 419.26c-7.3639 0.99674-13.121 5.9065-13.119 12.592 1.6784-5.7683 6.9152-10.359 13.71-11.279 5.0118-0.67838 9.8302 0.78138 13.377 3.6329-3.0863-4.2209-8.1542-5.7334-13.968-4.9465z"></path>
            <path fill="#a2ae98" d="m310.8 451.43c6.9397-2.4864 10.244-10.236 8.6338-16.754-0.24895 5.969-4.2505 11.522-10.654 13.816-4.7231 1.6922-9.7719 1.26-13.916-0.79047 4.0242 3.4804 10.457 5.6919 15.936 3.7289z"></path>
            <path fill="#ececec" d="m306.61 448.16c7.225-1.6511 11.889-7.9562 11.187-14.61-1.0668 5.8914-5.3428 10.297-12.009 11.82-4.9173 1.1238-10.322 0.73433-14.151-1.7863 3.5136 3.9248 9.2689 5.8798 14.973 4.5762z"></path>
            <g transform="matrix(.3876 0 0 .3876 251.07 351.95)">
              <path fill="#c4ccbe" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.13119 0 0 .13119 265.51 542.98)"></path>
              <path fill="#a2ae98" d="m308.24 579.84c-12.112 1.7697-20.835 12.187-20.835 24.078 2.7632-10.259 11.566-17.11 22.742-18.743 8.2436-1.2044 15.981 0.08214 21.814 5.1555-5.0743-7.5088-14.158-11.888-23.721-10.491z"></path>
              <path fill="#ececec" d="m306.85 575.63c-12.112 1.7729-21.582 10.506-21.578 22.397 2.7606-10.26 11.374-18.425 22.55-20.06 8.2433-1.2066 16.168 1.3898 22.003 6.4616-5.0763-7.5075-13.412-10.198-22.974-8.7981z"></path>
              <path fill="#a2ae98" d="m323.98 632.86c11.414-4.4224 16.849-18.207 14.201-29.8-0.40946 10.617-6.9911 20.493-17.523 24.573-7.7684 3.0098-16.073 2.2412-22.889-1.406 6.6189 6.1904 17.2 10.124 26.211 6.6324z"></path>
              <path fill="#ececec" d="m317.07 627.04c11.883-2.9368 19.554-14.151 18.4-25.987-1.7546 10.479-8.7877 18.314-19.752 21.024-8.0878 1.9988-16.977 1.3061-23.274-3.1772 5.7791 6.9809 15.245 10.458 24.627 8.1395z"></path>
            </g>
            <g transform="matrix(.2952 0 0 .2952 212.02 418.68)">
              <path fill="#c4ccbe" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.13119 0 0 .13119 265.51 542.98)"></path>
              <path fill="#a2ae98" d="m308.24 579.84c-12.112 1.7697-20.835 12.187-20.835 24.078 2.7632-10.259 11.566-17.11 22.742-18.743 8.2436-1.2044 15.981 0.08214 21.814 5.1555-5.0743-7.5088-14.158-11.888-23.721-10.491z"></path>
              <path fill="#ececec" d="m306.85 575.63c-12.112 1.7729-21.582 10.506-21.578 22.397 2.7606-10.26 11.374-18.425 22.55-20.06 8.2433-1.2066 16.168 1.3898 22.003 6.4616-5.0763-7.5075-13.412-10.198-22.974-8.7981z"></path>
              <path fill="#a2ae98" d="m323.98 632.86c11.414-4.4224 16.849-18.207 14.201-29.8-0.40946 10.617-6.9911 20.493-17.523 24.573-7.7684 3.0098-16.073 2.2412-22.889-1.406 6.6189 6.1904 17.2 10.124 26.211 6.6324z"></path>
              <path fill="#ececec" d="m317.07 627.04c11.883-2.9368 19.554-14.151 18.4-25.987-1.7546 10.479-8.7877 18.314-19.752 21.024-8.0878 1.9988-16.977 1.3061-23.274-3.1772 5.7791 6.9809 15.245 10.458 24.627 8.1395z"></path>
            </g>
            <g transform="matrix(.2292 0 0 .2292 275.39 444.62)">
              <path fill="#c4ccbe" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.13119 0 0 .13119 265.51 542.98)"></path>
              <path fill="#a2ae98" d="m308.24 579.84c-12.112 1.7697-20.835 12.187-20.835 24.078 2.7632-10.259 11.566-17.11 22.742-18.743 8.2436-1.2044 15.981 0.08214 21.814 5.1555-5.0743-7.5088-14.158-11.888-23.721-10.491z"></path>
              <path fill="#ececec" d="m306.85 575.63c-12.112 1.7729-21.582 10.506-21.578 22.397 2.7606-10.26 11.374-18.425 22.55-20.06 8.2433-1.2066 16.168 1.3898 22.003 6.4616-5.0763-7.5075-13.412-10.198-22.974-8.7981z"></path>
              <path fill="#a2ae98" d="m323.98 632.86c11.414-4.4224 16.849-18.207 14.201-29.8-0.40946 10.617-6.9911 20.493-17.523 24.573-7.7684 3.0098-16.073 2.2412-22.889-1.406 6.6189 6.1904 17.2 10.124 26.211 6.6324z"></path>
              <path fill="#ececec" d="m317.07 627.04c11.883-2.9368 19.554-14.151 18.4-25.987-1.7546 10.479-8.7877 18.314-19.752 21.024-8.0878 1.9988-16.977 1.3061-23.274-3.1772 5.7791 6.9809 15.245 10.458 24.627 8.1395z"></path>
            </g>
            <g transform="matrix(.47889 -.14303 .11382 .38109 228.17 414.01)">
              <path fill="#c4ccbe" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.13119 0 0 .13119 265.51 542.98)"></path>
              <path fill="#a2ae98" d="m308.24 579.84c-12.112 1.7697-20.835 12.187-20.835 24.078 2.7632-10.259 11.566-17.11 22.742-18.743 8.2436-1.2044 15.981 0.08214 21.814 5.1555-5.0743-7.5088-14.158-11.888-23.721-10.491z"></path>
              <path fill="#ececec" d="m306.85 575.63c-12.112 1.7729-21.582 10.506-21.578 22.397 2.7606-10.26 11.374-18.425 22.55-20.06 8.2433-1.2066 16.168 1.3898 22.003 6.4616-5.0763-7.5075-13.412-10.198-22.974-8.7981z"></path>
              <path fill="#a2ae98" d="m323.98 632.86c11.414-4.4224 16.849-18.207 14.201-29.8-0.40946 10.617-6.9911 20.493-17.523 24.573-7.7684 3.0098-16.073 2.2412-22.889-1.406 6.6189 6.1904 17.2 10.124 26.211 6.6324z"></path>
              <path fill="#ececec" d="m317.07 627.04c11.883-2.9368 19.554-14.151 18.4-25.987-1.7546 10.479-8.7877 18.314-19.752 21.024-8.0878 1.9988-16.977 1.3061-23.274-3.1772 5.7791 6.9809 15.245 10.458 24.627 8.1395z"></path>
            </g>
            <g transform="matrix(.48375 0 0 .61575 358.14 66.551)">
              <path fill="#c4ccbe" d="m551.43 460.93a200 200 0 1 1 -400 0 200 200 0 1 1 400 0z" transform="matrix(.13119 0 0 .13119 265.51 542.98)"></path>
              <path fill="#a2ae98" d="m308.24 579.84c-12.112 1.7697-20.835 12.187-20.835 24.078 2.7632-10.259 11.566-17.11 22.742-18.743 8.2436-1.2044 15.981 0.08214 21.814 5.1555-5.0743-7.5088-14.158-11.888-23.721-10.491z"></path>
              <path fill="#ececec" d="m306.85 575.63c-12.112 1.7729-21.582 10.506-21.578 22.397 2.7606-10.26 11.374-18.425 22.55-20.06 8.2433-1.2066 16.168 1.3898 22.003 6.4616-5.0763-7.5075-13.412-10.198-22.974-8.7981z"></path>
              <path fill="#a2ae98" d="m323.98 632.86c11.414-4.4224 16.849-18.207 14.201-29.8-0.40946 10.617-6.9911 20.493-17.523 24.573-7.7684 3.0098-16.073 2.2412-22.889-1.406 6.6189 6.1904 17.2 10.124 26.211 6.6324z"></path>
              <path fill="#ececec" d="m317.07 627.04c11.883-2.9368 19.554-14.151 18.4-25.987-1.7546 10.479-8.7877 18.314-19.752 21.024-8.0878 1.9988-16.977 1.3061-23.274-3.1772 5.7791 6.9809 15.245 10.458 24.627 8.1395z"></path>
            </g>
            <path fill="#a2ae98" d="m346.04 466.25c-6.1124 4.2261-8.1835 11.851-5.1518 17.81-1.118-5.9026 1.9057-11.762 7.5456-15.662 4.1601-2.8762 8.6807-4.3645 13.135-3.4304-4.664-2.3637-10.703-2.0539-15.529 1.2825z"></path>
            <path fill="#ececec" d="m346.79 462.58c-6.8529 2.8738-11.139 9.1096-9.4017 15.566 0.12378-6.0062 3.9898-11.799 10.313-14.45 4.664-1.9559 9.6962-1.7967 13.862 0.03645-4.0761-3.2752-9.3628-3.4207-14.773-1.1518z"></path>
          </g>
        </svg>
      </div>
    </button>
<style>
/* From Uiverse.io by pminedev - Tags: button */
.butonTxt {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  margin-left: 27px;
  margin-top: 3px;
  align-items: center;
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 1px;
  font-weight: bold;
  text-transform: uppercase;
  z-index: 2;
  color: rgb(42, 8, 73);
  font-size: 30px;
}

.space-button {
  position: relative;
  width: 200px;
  height: 80px;
  border-radius: 25px;
  border: 2px solid rgb(103, 20, 180);
  background-color: blueviolet;
  overflow: hidden;
  background-image: radial-gradient(
    circle at 80% 2rem,
    rgb(192, 154, 228) 0%,
    rgb(103, 20, 180) 100%
  );
  transition: background-image 1s ease-in-out;
}

.estrella {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(224, 224, 5, 0.678),
    transparent
  );
  animation: brillar 8s ease-in-out infinite;
  border: none;
  z-index: 0;
}

.sol {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 10px;
  opacity: 0.4;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s ease;
  z-index: 1;
}
/* ANIMACIONES */
@keyframes girar {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes brillar {
  0% {
    background: radial-gradient(
      closest-side,
      rgba(224, 224, 5, 0.678),
      transparent
    );
    box-shadow: outset 0 0 11px 0 rgba(224, 224, 5, 0.678);
  }

  10% {
    box-shadow: 0 0 11px 3px rgb(255, 255, 0, 0.678);
  }

  20% {
    background: radial-gradient(
      closest-side,
      rgba(224, 224, 5, 0.678),
      transparent
    );
    box-shadow: none;
  }
}

.space-button:hover {
  cursor: pointer;
  border: 2px solid #fff;
}

.space-button:hover .estrella {
  animation: brillar 2s ease-in-out infinite;
}

.space-button:hover .butonTxt {
  color: #fff;
  font-size: 40px;
}

.space-button .butonTxt {
  transition: font-size 1s ease-in-out;
}

/* giramos la luna */
.space-button .luna svg {
  animation: girar 15s linear infinite;
}

.space-button:hover .luna svg {
  animation: girar 5s linear infinite;
}

.space-button:active .luna svg {
  animation: girar 3s linear infinite;
}

/**/

.space-button:active {
  border: 2px solid rgb(42, 8, 73);
  background-image: radial-gradient(
    circle at 80% 2rem,
    rgb(192, 154, 228) 0%,
    #fff 100%
  );
  transition: background-image 2s ease-in-out;
}

.space-button:active .sol {
  opacity: 1;
  transform: scale(20);
}

.luna {
  display: flex;
  justify-content: end;
}

.luna svg {
  position: relative;
  width: 50%;
  margin-top: 10px;
  right: -50px;
  opacity: 0.5;
  transform: translate(0%, 0%);
  transform-origin: center center;
}

</style>


================================================
FILE: Buttons/portseif_afraid-baboon-7.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by portseif - Tags: button */
button {
  background-color: #FFFFFF;
  border: 1px solid rgb(209,213,219);
  border-radius: .5rem;
  color: #111827;
  font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  padding: .75rem 1rem;
  text-align: center;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

button:hover {
  background-color: #f9fafb;
}

button:focus {
  outline: 2px solid rgba(0,0,0,0.1);
  outline-offset: 2px;
}

button:focus-visible {
  -webkit-box-shadow: none;
  box-shadow: none;
}
</style>


================================================
FILE: Buttons/portseif_popular-octopus-83.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by portseif - Tags: button */
button {
  align-items: center;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
  outline: 0;
  border: 0;
  padding: 1rem;
}

button:before {
  background-color: #fff;
  content: "";
  display: inline-block;
  height: 1px;
  margin-right: 10px;
  transition: all .42s cubic-bezier(.25,.8,.25,1);
  width: 0;
}

button:hover:before {
  background-color: #fff;
  width: 3rem;
}
</style>


================================================
FILE: Buttons/pradipkaityuiux_hungry-lizard-38.html
================================================
<button class="button">
  <span>Subscribe</span>
</button>
<style>
/* From Uiverse.io by pradipkaityuiux - Tags: button, Oval button, desined Button, bootsrap button */
.button {
  background-color: #000fdb;
  border: none;
  padding: 20px 48px;
  color: #fff;
  cursor: pointer;
  border-radius: 40px;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.button span {
  font-size: 24px;
  font-weight: bold;
}

.button::before,
.button::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  z-index: -1;
  background-color: #535fff;
  transition: all 0.3s 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.button::after {
  right: -30px;
  transform: translateX(30px) translateY(-110px) rotate(30deg);
}

.button::before {
  left: -20px;
  transform: translateX(-10px) translateY(50px) rotate(30deg);
}

.button:hover::before {
  transform: rotate(30deg) translateY(10px) translateX(-15px);
}

.button:hover::after {
  transform: rotate(30deg) translateY(-70px) translateX(-30px);
}

.button:hover {
  animation: wobel 0.3s ease-in-out;
}

@keyframes wobel {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(1.1);
  }

  60% {
    transform: scale(1.05);
  }

  80% {
    transform: scale(0.85);
  }

  100% {
    transform: scale(1);
  }
}
</style>


================================================
FILE: Buttons/pranav0s_modern-firefox-53.html
================================================
<button class="button">Button</button>

<style>
/* From Uiverse.io by pranav0s  - Tags: button */
.button {
  width: fit-content;
  display: flex;
  padding: 1.2em 1rem;
  cursor: pointer;
  gap: 0.4rem;
  font-weight: bold;
  border-radius: 30px;
  text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
  background: linear-gradient(
      15deg,
      #880088,
      #aa2068,
      #cc3f47,
      #de6f3d,
      #f09f33,
      #de6f3d,
      #cc3f47,
      #aa2068,
      #880088
    )
    no-repeat;
  background-size: 300%;
  color: #fff;
  border: none;
  background-position: left center;
  box-shadow: 0 30px 10px -20px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;
}

.button:hover {
  background-size: 320%;
  background-position: right center;
}

.button:hover svg {
  fill: #fff;
}

.button svg {
  width: 23px;
  fill: #f09f33;
  transition: 0.3s ease;
}

</style>
    

================================================
FILE: Buttons/praveen-prasad2_jolly-moose-71.html
================================================
<button class="button">
  <span>Explore </span>
</button>
<style>
/* From Uiverse.io by praveen-prasad2 - Tags: button */
.button {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding: 3px;
  border-radius: 6px;
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(115deg,
        #4fcf70, #fad648, 
        #a767e5,#12bcfe, 
        #44ce7b);
  background-size: 50% 100%;
  border-radius: inherit;
}

.button:hover::before {
  animation: animate_border .75s
        linear infinite;
}

.button span {
  position: relative;
  z-index: 2;
  display: block;
  background-color: #000;
  padding: 13px 20px;
  border-radius: 3px;
}

@keyframes animate_border {
  to {
    transform: translateX(-50%)
  }
}

</style>


================================================
FILE: Buttons/praveen-prasad2_swift-yak-93.html
================================================
<button type="submit" class="button">
  <span>Hello</span>
</button>
<style>
/* From Uiverse.io by praveen-prasad2 - Tags: button */
button {
  width: 100px;
  height: 50px;
  border-radius: 30em;
  font-size: 15px;
  font-family: inherit;
  border: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

button:hover {
  color: #ffffff;
  transform: scale(1.1);
  outline: 2px solid #70bdca;
  box-shadow: 4px 5px 17px -4px #268391;
}

button::before {
  content: "";
  position: absolute;
  left: -50px;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #2c9caf;
  transform: skewX(45deg);
  z-index: -1;
  transition: width 1000ms;
}

button:hover::before {
  width: 250%;
}




</style>


================================================
FILE: Buttons/prince192000_bitter-jellyfish-76.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by prince192000 - Tags: button */
button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 15px 30px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: black;
  border: none;
  letter-spacing: 2px;
  font-size: 17px;
}

button:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.226);
  z-index: -1;
  transition: transform 0.5s;
  transform-origin: bottom right;
  transform: scale(0);
}

button:hover:before {
  transition: transform 0.5s;
  transform-origin: top left;
  transform: scale(1);
}

button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 2px solid #fff;
  box-sizing: border-box;
  z-index: -1;
  transition: transform 0.5s;
  transform-origin: bottom right;
  transform: scale(1);
}

button:hover:after {
  transition: transform 0.5s;
  transform-origin: top left;
  transform: scale(0);
}
</style>


================================================
FILE: Buttons/prince192000_heavy-panda-63.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by prince192000 - Tags: button */
button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 15px 30px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: black;
  border: none;
  letter-spacing: 2px;
  font-size: 17px;
}

button:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #03a;
  z-index: -1;
  transition: transform 0.5s;
  transform-origin: bottom right;
  transform: scale(0);
}

button:hover:before {
  transition: transform 0.5s;
  transform-origin: top left;
  transform: scale(1);
}

button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 2px solid #fff;
  box-sizing: border-box;
  z-index: -1;
  transition: transform 0.5s;
  transform-origin: bottom right;
  transform: scale(1);
}

button:hover:after {
  transition: transform 0.5s;
  transform-origin: top left;
  transform: scale(0);
}
</style>


================================================
FILE: Buttons/pruthivithejan_horrible-emu-23.html
================================================
<!-- From Uiverse.io by pruthivithejan  - Tags: button -->
<div class="w-screen h-screen bg-[#fafafa]">
  <div class="flex justify-center items-center gap-12 h-full">
    <div
      class="bg-gradient-to-b from-stone-300/40 to-transparent p-[4px] rounded-[16px]"
    >
      <button
        class="group p-[4px] rounded-[12px] bg-gradient-to-b from-white to-stone-200/40 shadow-[0_1px_3px_rgba(0,0,0,0.5)] active:shadow-[0_0px_1px_rgba(0,0,0,0.5)] active:scale-[0.995]"
      >
        <div
          class="bg-gradient-to-b from-stone-200/40 to-white/80 rounded-[8px] px-2 py-2"
        >
          <div class="flex gap-2 items-center font-sans">
            <span class="font-semibold">Get Started</span>
          </div>
        </div>
      </button>
    </div>
  </div>
</div>


    

================================================
FILE: Buttons/r7chardgh_ancient-starfish-5.html
================================================
<button class="button">
  <span class="base"></span>
  <span class="red"></span>
</button>
<style>
/* From Uiverse.io by r7chardgh - Tags: 3d, button, nuclear-button */
.button {
  display: flex;
  position: relative;
  background: none;
  border: 0;
  transform-style: preserve-3d;
  transform: rotateX(45deg)rotateZ(45deg);
  cursor: pointer;
}

.button > .red {
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  background-color: rgb(255, 49, 49);
  transform: translate(-50%,-50%);
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.red::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1em;
  left: 0;
  background-color: rgb(255, 49, 49);
  transform: rotateZ(-45deg) translateY(-.5em);
  transition: height 150ms, transform 150ms;
}

.red::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background-color: rgb(255, 49, 49);
  transform: rotateZ(-45deg) translateY(-1em);
  transition: transform 150ms;
  border: 1px solid rgb(255, 196, 196);
}

.button > .base {
  position: relative;
  width: 3em;
  height: 3em;
  background-color: rgb(245, 216, 90);
  transform-style: preserve-3d;
  border-bottom: 1px solid rgb(255, 255, 255);
  border-right: 1px solid rgb(255, 255, 255);
}

.base::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgb(245, 216, 90);
  transform-origin: bottom;
  transform: rotateX(90deg);
  border-right: 1px solid #fff;
}

.base::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgb(245, 216, 90);
  transform-origin: right;
  transform: rotateY(-90deg);
  border-left: 1px solid #fff;
}

.button:active>.red::before {
  transform: rotateZ(-45deg) translateY(0);
  height: 0;
}

.button:active>.red::after {
  transform: rotateZ(-45deg) translateY(0);
}


</style>


================================================
FILE: Buttons/r7chardgh_great-eel-58.html
================================================
<button class="button">
</button>
<style>
/* From Uiverse.io by r7chardgh - Tags: button, reload, f5 */
.button {
  position: relative;
  width: 3em;
  height: 3em;
  transform: rotateX(30deg);
  border-radius: .2em;
  border: 1px solid #3f3f3f;
  box-shadow: 0 .3em 0 .1em #3f3f3f;
  ;
  transition: all 150ms;
}

.button::after {
  position: absolute;
  content: "f5";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .2em;
  text-align: end;
  color: #3f3f3f;
}

.button:active {
  transform: rotateX(30deg) translateY(.3em);
  box-shadow: 0 0 0 0 #3f3f3f;
}
</style>


================================================
FILE: Buttons/r7chardgh_quiet-wasp-56.html
================================================
<button class="button">
  Button
  <svg class="stars" viewBox="0 0 353 178" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M271 37.9914C289.244 33.3118 295.91 27.0769 299.991 9C305.137 29.7552 312.313 36.1206 331.104 40.1127C312.194 43.8462 305.081 49.4282 302.113 69.1041C296.925 50.845 289.057 44.9589 271 37.9914Z"></path>
<path d="M254.852 83.012C245.919 73.8857 239.998 72.0853 228 75.817C238.443 65.759 239.748 59.3874 235.721 47C244.325 56.8385 250.014 59.1225 262.574 54.195C253.611 63.4315 252.822 70.0469 254.852 83.012Z"></path>
<path d="M275.626 97.3875C278.179 88.2512 277.138 83.7734 270.281 77.4407C280.63 80.423 285.214 78.8959 291.687 71.7049C288.553 80.8937 289.197 85.4019 297.032 91.6517C287.761 89.3164 283.212 91.2658 275.626 97.3875Z"></path>
</svg>

</button>
<style>
/* From Uiverse.io by r7chardgh - Tags: button, hover, stars */
.stars {
  position: absolute;
  opacity: 0;
  top: -.3em;
  right: -.3em;
  height: 100%;
  transition: transform 300ms,opacity 150ms;
}

.stars :nth-child(n) {
  fill: #999;
}

.button {
  position: relative;
  cursor: pointer;
  padding: 1em 2em;
  border: 0;
  border-radius: .5em;
  font-weight: bolder;
  transition: transform 150ms, box-shadow 150ms;
  box-shadow: 0 0 #999;
  background-color: #f1f1f1;
  color: #333;
}

.button:hover {
  transform: translate(.3em,-.3em);
  box-shadow: -.3em .3em #999;
}

.button:hover > .stars {
  opacity: 1;
  transform: translate(.2em,-.2em);
}

.button:active > .stars :nth-child(n) {
  fill: #ccc;
}
</style>


================================================
FILE: Buttons/r7chardgh_shaggy-octopus-89.html
================================================
<button class="button">
  glitch
</button>
<style>
/* From Uiverse.io by r7chardgh - Tags: button, hover, glitch */
.button {
  position: relative;
  border: 0;
  padding: 1em 2em;
  font-weight: 700;
  cursor: pointer;
  outline: .5em solid #fff;
  outline-offset: -.3em;
  color: #fff;
  background-color: #333;
  text-transform: uppercase;
}

.button:hover {
  animation: shake 500ms infinite,glitch 400ms infinite steps(4);
}

@keyframes shake {
  0% {
  }

  25% {
    transform: translate(-.1em,-.1em);
  }

  50% {
    transform: translate(.3em,0);
  }

  75% {
    transform: translate(0,.3em);
  }

  100% {
  }
}

@keyframes glitch {
  from {
    box-shadow: .8em .8em  rgba(240, 84, 219),
  -.8em -.8em rgba(84, 240, 232);
  }

  to {
    text-shadow: .3em .2em  rgba(240, 84, 219),
  -.3em -.2em rgba(84, 240, 232);
  }
}
</style>


================================================
FILE: Buttons/r7chardgh_stale-wombat-66.html
================================================
<button class="button">
  Enter
</button>
<style>
/* From Uiverse.io by r7chardgh - Tags: 3d, button, keyboard style */
.button {
  position: relative;
  padding: 1em 1.5em;
  transform: rotateX(40deg)rotateZ(40deg);
  transform-style: preserve-3d;
  border: .1em solid black;
  transition: all 150ms;
  background-color: rgb(233, 211, 184);
  cursor: pointer;
}

.button::before {
  content: "";
  position: absolute;
  width: 2em;
  height: 99%;
  border: .1em solid black;
  top: -.15em;
  right: 0;
  transform-origin: right;
  transform: rotateY(-90deg);
  transition: all 150ms;
  background-color: rgb(155, 139, 120);
}

.button::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2em;
  border: .1em solid black;
  bottom: 0;
  left: -.15em;
  transform-origin: bottom;
  transform: rotateX(90deg);
  transition: all 150ms;
  background-color: rgb(199, 179, 155);
}

.button:active {
  transform: rotateX(40deg)rotateZ(40deg) translateZ(-1em);
}

.button:active::before {
  width: 0;
}

.button:active::after {
  height: 0;
}

</style>


================================================
FILE: Buttons/rajanarahul93_sour-eel-71.html
================================================
<!-- From Uiverse.io by rajanarahul93  - Tags: simple, 3d, button -->
<button
  class="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition duration-300 ease-in-out"
>
  Explore Now
</button>


    

================================================
FILE: Buttons/ramdaniAli_mean-cobra-4.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by ramdaniAli - Tags: button */
button {
  color: #4181f098;
  text-transform: uppercase;
  letter-spacing: 5px;
  /* border: none; */
  font-weight: bold;
  font-size: 17px;
  padding: 1rem 2rem;
  border: 1px solid #ffffff1f;
  border-radius: 20px;
  background: #ebebeb;
  -webkit-box-shadow: 5px 5px 15px #cccccc,
              -5px -5px 15px #ffffff;
  box-shadow: 5px 5px 15px #cccccc,
              -5px -5px 15px #ffffff;
  -webkit-transition: box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out;
}

button:hover {
  color: #357af0;
  background: linear-gradient(145deg, #d4d4d4, #fbfbfb);
  -webkit-box-shadow: 5px 5px 15px #cccccc,
              -5px -5px 15px #ffffff;
  box-shadow: 5px 5px 15px #cccccc,
              -5px -5px 15px #ffffff;
}

button:active {
  color: #357af0;
  background: #ebebeb;
  -webkit-box-shadow: inset 5px 5px 15px #cccccc,
              inset -5px -5px 15px #ffffff;
  box-shadow: inset 5px 5px 15px #cccccc,
              inset -5px -5px 15px #ffffff;
}
</style>


================================================
FILE: Buttons/reshades_dull-snake-38.html
================================================

<button class="button">

  
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"></path>
  </svg>

  
  <div class="text">
    Button
  </div>

</button>
<style>
/* From Uiverse.io by reshades - Tags: button, clean, hover button */
.button {
  background-color: #ffffff00;
  color: #fff;
  width: 8.5em;
  height: 2.9em;
  border: #3654ff 0.2em solid;
  border-radius: 11px;
  text-align: right;
  transition: all 0.6s ease;
}

.button:hover {
  background-color: #3654ff;
  cursor: pointer;
}

.button svg {
  width: 1.6em;
  margin: -0.2em 0.8em 1em;
  position: absolute;
  display: flex;
  transition: all 0.6s ease;
}

.button:hover svg {
  transform: translateX(5px);
}

.text {
  margin: 0 1.5em
}
</style>


================================================
FILE: Buttons/reshades_fast-ladybug-78.html
================================================
<button class="button">
  <svg class="w-6 h-6" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" stroke-linejoin="round" stroke-linecap="round"></path>
  </svg>
  <span class="text">
    Button
  </span>
</button>
<style>
/* From Uiverse.io by reshades - Tags: button, hover, svg */
.button {
  width: 10em;
  height: 3em;
  border-radius: 8px;
  border: 0.15em solid rgb(162, 63, 255);
  color: rgb(162, 63, 255);
  background-color: #00000000;
  transition: all 0.5s ease;
}

.button .text {
  display: none
}

.button:hover>.text {
  display: block;
}

.button:hover>svg {
  display: none;
}

.button:hover {
  background-color: rgb(162, 63, 255);
  color: #fff
}

.button svg {
  width: 1.5em;
  margin-top: 3px;
}
</style>


================================================
FILE: Buttons/reshades_purple-otter-7.html
================================================
<button class="button">
  <p class="text">Button</p>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" class="svg">
    <path class="path" transform="translate(100 100)" d="M56.8,-23.9C61.7,-3.2,45.7,18.8,26.5,31.7C7.2,44.6,-15.2,48.2,-35.5,36.5C-55.8,24.7,-73.9,-2.6,-67.6,-25.2C-61.3,-47.7,-30.6,-65.6,-2.4,-64.8C25.9,-64.1,51.8,-44.7,56.8,-23.9Z" fill="#4073ff"></path>
  </svg>
</button>
<style>
/* From Uiverse.io by reshades - Tags: button, animated, glass button */
.button {
  width: 10em;
  height: 3em;
  background-color: #e8e8e810;
  color: #e8e8e8;
  border: 1.2px solid #e8e8e870;
  border-radius: 15px;
  transition: all 0.5s ease;
}

.button:hover {
  border: 1.2px solid #4073ff;
  background-color: #00000000;
}

.text {
  margin-top: 10px
}

.svg {
  filter: blur(20px);
  z-index: -1;
  opacity: 70%;
  width: 6em;
  animation: anim 3s infinite;
}

@keyframes anim {
  0% {
    transform: translateY(-60px);
  }

  50% {
    transform: translateY(-35px);
  }

  100% {
    transform: translateY(-60px);
  }
}
</style>


================================================
FILE: Buttons/reyvaxreecded_fat-rabbit-45.html
================================================
<button>
  <span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><circle cx="64" cy="64" r="60" fill="#FCE5AC"></circle><path fill="#F1C688" d="M62.34 8.58c-.02 1.36-3.4 2.23-7.38 2.6c-3.98.37-7.3.11-7.65-1.2c-.35-1.31 2.69-3.26 7.03-3.68s8.01.92 8 2.28zm57.03 50.89c-.01-.4.01-.8.08-1.21c1.22-7.23 1.8-14-6.32-18.14c-.89-.46-1.87-.83-2.55-1.57c-1.25-1.35-1.14-3.41-1.46-5.22c-.97-5.54-7.24-9.51-12.66-8.01c-1.78.49-3.64 1.47-5.35.8c-1.38-.54-2.16-1.97-2.94-3.23c-2.21-3.58-5.6-6.76-9.77-7.34c-4.17-.59-8.91 2.3-9.17 6.5c-.11 1.83.2 3.99 1.6 5.18c5.88 5.01 9.52 1.32 12.25 3.91c3.17 3.01-3.41 3.82-2.32 11.47c.55 3.82 4.34 7.4 8.19 7.08c1.71-.15 4.31-.24 5.26 1.19c.75 1.12.56 2.19.56 4.03c0 4.54.5 8.11 4.92 9.14c.57.13 1.19.2 1.72-.03c1.17-.51 1.16-2.08 1.08-3.36c-.35-5.62-4.31-6.76-5.03-9.85c-.91-3.94 4.47-9.27 8.87-7.78c3.5 1.19.65 5.25 3.21 9.94c1.69 3.11 5.01 4.54 6.24 7.08c1.23 2.54.09 4.3.69 5.91c.93 2.52 2.41 2.56 3.24 1.67c.91-.97.61-2.96.39-4.12c-.24-1.35-.69-2.67-.73-4.04zm-95.13 42.57c.11-.16.99-.39 2.01.57c1.02.95 4.03 3.79 5.23 4.88c1.2 1.09.03 2.01-.97 1.83c-4.8-.84-7.42-5.61-6.27-7.28zm17.8 12.38c.05-.19.79-.71 2.08-.19s5.12 2.11 6.63 2.7c1.51.59.74 1.86-.25 2.06c-4.8.92-8.94-2.6-8.46-4.57zm6.26-3.58c.6.47 1.21 1.21.93 1.91c-.26.64-1.08.81-1.77.83c-2.28.07-4.56-.51-6.55-1.6c-1.4-.77-5.07-3.14-4.55-5.13c.74-2.82 10.4 2.8 11.94 3.99zM97.71 106c-.22-.13-.6-1.22.58-2.57c1.18-1.35 4.68-5.33 6.01-6.92s2.66-.18 2.52 1.09c-.7 6.11-6.79 9.73-9.11 8.4zm11.3-11.81c-.2-.04-.77-.78-.21-2.12s2.23-5.29 2.85-6.84c.62-1.56 2-.82 2.21.2c1.02 4.86-2.73 9.19-4.85 8.76zm-22.5-80.87c-.04.2-.79.79-2.12.27s-5.25-2.1-6.8-2.68c-1.55-.58-.79-1.98.22-2.22c4.88-1.15 9.16 2.49 8.7 4.63zm-30.04 2.15c-9.5-1.73-12.9 3.96-15.81 5.2c-2.32.98-3.92-.73-7.5 1.46c-4.94 3.01-3.07 5.19-3.52 7.74c-.46 2.55-3.19 3.64-5.19 3.83c-2.37.23-2.56-1.21-1.42-2.94c.63-.95 1.3-1.54 1.62-2.66c.37-1.3.17-2.7.89-3.9c1.13-1.88 3.77-2.14 5.4-3.6c1.18-1.06 1.75-2.69 3.01-3.66c1.26-.97 2.9-1.32 4.47-1.6c3.2-.57 5.9-3.09 4.45-3.17c-1.46-.08-3.89-.55-5.93.95c-2.27 1.66-5.32 2.18-7.73 3.55c-2.7 1.55-4.12 4.92-4.94 5.83c-.82.91-3.46 1-5.28 2.88c-3.8 3.89-10.14 18.02-10.14 23.31c0 4.93 2.19 9.75 7.08 11.09c.74.2 1.53.43 2.01 1.03c1.1 1.37-1.65 5.49-2.07 7.15c-1.07 4.3.1 7.61 2 9.98c4.11 5.11 8.21 4.42 12.33 1.89c1-.62 1.86-1.49 2.97-1.9c2.34-.87 2.4.63 2.63 2.38c1.08 8.06 4.43 10.14 6.78 11.05c4.89 1.89 10.9.09 14.08-4.08s3.53-10.4.66-14.79c-4.38-6.7-13.03-7.07-14.78-10.82c-1.97-4.22 3.48-4.81 5.86-8.47c2.12-3.25 2.56-7.72.54-11.08c-1-1.66-2.66-3.32-2.24-5.21c.47-2.11 6.48-5.42 10.95-9.26c3.18-2.72 10.63-10.03-1.18-12.18zM26.01 48.86c-.34.65-.85 1.3-1.58 1.41c-.69.1-1.35-.34-1.78-.89c-.68-.89-.88-2.14-.45-3.17c.51-1.24 2.25-2.23 3.6-1.65c.73.31.95 1.05.91 1.86c-.05.89-.4 1.86-.7 2.44zm15.5 2.94c-.14.79-.39 1.55-.57 2.07c-.49 1.45-1.2 2.97-2.57 3.64c-.6.3-1.27.4-1.93.51c-1.37.21-3.08.28-3.79-.91c-.26-.43-.32-.95-.37-1.45c-.23-2.16-.34-4.67 1.25-6.14c1.14-1.06 2.42-.93 3.84-.94c.8 0 2.73-.26 3.41.18c.91.59.94 1.85.73 3.04z"></path></svg>
  </span>
</button>
<style>
/* From Uiverse.io by reyvaxreecded  - Tags: animation, button, space */
button {
  all: unset;
  position: relative;
  width: 10em;
  height: 10em;
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: visible;
}

button>span>svg {
  width: 8.5em;
  height: 8.5em;
}

button>span {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

button:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: radial-gradient(circle, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0) 100%);
  width: 100%;
  height: 100%;
  border-radius: 100%;
  -webkit-animation: pulse 1s ease-in-out infinite;
  animation: pulse 1s ease-in-out infinite;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}

button>span {
  overflow: hidden;
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  -webkit-transition: -webkit-transform 0.15s ease-in;
  transition: -webkit-transform 0.15s ease-in;
  transition: transform 0.15s ease-in;
  transition: transform 0.15s ease-in, -webkit-transform 0.15s ease-in;
}

button > span:after {
  content: '';
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  width: 94.5%;
  height: 94.5%;
  position: absolute;
  top: 0.27em;
  z-index: 2;
  background-color: #00000000;
  border-radius: 100%;
  background: radial-gradient(circle, rgba(254,123,0,0.52) 0%, rgba(191,0,0,0.9612219887955182) 100%);
  -webkit-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
  background-clip: content-box;
  opacity: 0;
}

button > span:before {
  content: '';
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  width: 94.5%;
  height: 94.5%;
  position: absolute;
  top: 0.27em;
  z-index: 2;
  background-color: #00000000;
  border-radius: 100%;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,222,0,1) 50%, rgba(255,0,0,0.9612219887955182) 100%);
  background-clip: content-box;
  opacity: 0;
}

button:hover >span:after {
  opacity: 0.65;
}

button:active > span > svg {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

button:active > span:before {
  -webkit-animation: implose 0.33s ease-in-out;
  animation: implose 0.33s ease-in-out;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

button:active > span:after {
  display: none;
}

button:active:before {
  display: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
}

@-webkit-keyframes implose {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 0.5;
  }

  50% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0.75;
  }

  100% {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    opacity: 1;
  }
}

@keyframes implose {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 0.5;
  }

  50% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0.75;
  }

  100% {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    opacity: 1;
  }
}
</style>
    

================================================
FILE: Buttons/rhino-corey_cowardly-chicken-15.html
================================================
<button> Hexagonal Button
</button>
<style>
/* From Uiverse.io by rhino-corey - Tags: button */
button {
 display: inline-block;
 position: relative;
 color: #fff;
 font-weight: 500;
 font-size: 14px;
 text-decoration: none;
 text-transform: uppercase;
 padding: 15px 30px;
 text-align: center;
 border: none;
 clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
 background-color: #000000;
 background-image: radial-gradient(200% 70% at center 20%, rgba(48,44,45,1) -30%, rgba(50,46,47,1) 49%, rgba(22,18,19,1) 50%, rgba(22,18,19,1) 150%);
 background-repeat: no-repeat;
 transition: background-position-y ease-in-out 250ms;
}

button:hover {
 background-position-y: -50px;
}

button:active {
 transform: scale(0.99);
}
</style>


================================================
FILE: Buttons/rohan-krishu_ugly-frog-36.html
================================================
<button class="my-button">
  Click me!
</button>

<style>
/* From Uiverse.io by rohan-krishu - Tags: button */
.my-button {
  background-color: blueviolet;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.my-button:after {
  content: "";
  background-color: rgba(255, 255, 255, 0.2);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.my-button:hover:after {
  animation: ripple_401 1s ease-out;
}

@keyframes ripple_401 {
  0% {
    width: 5px;
    height: 5px;
    opacity: 1;
  }

  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

</style>


================================================
FILE: Buttons/roroland_brave-moth-43.html
================================================
<div class="flip-button">
  <button class="button button-front">
    <span class="text-front">Label one</span>
    <span class="text-back">Back can be longer</span>
  </button>
</div>

<style>
/* From Uiverse.io by roroland - Tags: flat design, button, flip, animated, two side */
.flip-button {
  --col1: #4CAF50;
  --col2: #4f16ac;
  --col3: #d8d1e4;
  position: relative;
  min-width: 10rem;
  min-height: 3rem;
  perspective: 500px;
}

.flip-button .button {
  appearance: none;
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 30px;
  font-size: .75em;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  background-color: var(--col1);
  border: none;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 1s ease-out .5s;
  transform-style: preserve-3d;
  width: 100%;
}

.flip-button:hover .button {
  background-color: var(--col2);
  cursor: pointer;
  transform: rotateY(180deg) scale(1.5);
  transition: all .3s ease-out;
}

.flip-button:hover .button:active {
  background-color: rgba(81, 23, 173, 0.75);
  transform: rotateY(180deg) scale(1.45);
  outline: 10px solid var(--col3);
  transition: all .1s ease-out;
}

.flip-button .button::after {
  content: '';
  box-shadow: 0px 0px 60px 5px rgba(0, 0, 0, 0.25);
  display: block;
  border-radius: 30px;
  height: 100%;
  width: 100%;
  transition: all .3s ease-out .95s;
}

.flip-button:hover .button::after {
  box-shadow: 0px 0px 1px 10px rgba(160, 29, 149, 0.15);
  transition: all .3s ease-out;
}

.flip-button .text-front,
.flip-button .text-back {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0 1.5em;
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
  width: 100%;
}

.flip-button .text-back {
  transform: translate(-50%, -50%) rotateY(180deg);
}


</style>


================================================
FILE: Buttons/roroland_loud-pig-27.html
================================================
<button>
  <span>View more</span>
</button>
<style>
/* From Uiverse.io by roroland - Tags: button */
button {
  --fs: 1.25em;
  --col1: honeydew;
  --col2: rgba(240, 128, 128, 0.603);
  --col3: indianred;
  --col4: maroon;
  --pd: .5em .65em;
  display: grid;
  align-content: baseline;
  appearance: none;
  border: 0;
  grid-template-columns: min-content 1fr;
  padding: var(--pd);
  font-size: var(--fs);
  color: var(--col1);
  background-color: var(--col3);
  border-radius: 6px;
  text-shadow: 1px 1px var(--col4);
  box-shadow: inset -2px 1px 1px var(--col2),
    inset 2px 1px 1px var(--col2);
  position: relative;
  transition: all .75s ease-out;
  transform-origin: center;
}

button:hover {
  color: var(--col4);
  box-shadow: inset -2px 1px 1px var(--col2),
    inset 2px 1px 1px var(--col2),
    inset 0px -2px 20px var(--col4),
    0px 20px 30px var(--col3),
    0px -20px 30px var(--col2),
    1px 2px 20px var(--col4);
  text-shadow: 1px 1px var(--col2);
}

button:active {
  animation: offset 1s ease-in-out infinite;
  outline: 2px solid var(--col2);
  outline-offset: 0;
}

button::after,
button::before {
  content: '';
  align-self: center;
  justify-self: center;
  height: .5em;
  margin: 0 .5em;
  grid-column: 1;
  grid-row: 1;
  opacity: 1;
}

button::after {
  position: relative;
  border: 2px solid var(--col4);
  border-radius: 50%;
  transition: all .5s ease-out;
  height: .1em;
  width: .1em;
}

button:hover::after {
  border: 2px solid var(--col3);
  transform: rotate(-120deg) translate(10%, 140%);
}

button::before {
  border-radius: 50% 0%;
  border: 4px solid var(--col4);
  box-shadow: inset 1px 1px var(--col2);
  transition: all 1s ease-out;
  transform: rotate(45deg);
  height: .45em;
  width: .45em;
}

button:hover::before {
  border-radius: 50%;
  border: 4px solid var(--col1);
  transform: scale(1.25) rotate(0deg);
  animation: blink 1.5s ease-out 1s infinite alternate;
}

button:hover > span {
  filter: contrast(150%);
}

@keyframes blink {
  0% {
    transform: scale(1, 1) skewX(0deg);
    opacity: 1;
  }

  5% {
    transform: scale(1.5, .1) skewX(10deg);
    opacity: .5;
  }

  10%,
  35% {
    transform: scale(1, 1) skewX(0deg);
    opacity: 1;
  }

  40% {
    transform: scale(1.5, .1) skewX(10deg);
    opacity: .25;
  }

  45%,
  100% {
    transform: scale(1, 1) skewX(0deg);
    opacity: 1;
  }
}

@keyframes offset {
  50% {
    outline-offset: .15em;
    outline-color: var(--col1);
  }

  55% {
    outline-offset: .1em;
    transform: translateY(1px);
  }

  80%,
  100% {
    outline-offset: 0;
  }
}
</style>


================================================
FILE: Buttons/roroland_wonderful-owl-61.html
================================================
<button class="button">Join now</button>

<style>
/* From Uiverse.io by roroland  - Tags: glassmorphism, pink, gradient, button, rounded, smooth, colorful */
.button {
  --radius: 20px;
  --col0: 0, 0, 0;
  --col1: 219, 161, 240;
  --col2: 239, 214, 248;
  --col3: 255, 255, 255;
  --col4: 270, 153, 138;
  --col5: 244, 164, 177;
  --col6: 244, 136, 136;
  --col7: 243, 136, 94;
  --col8: 252, 187, 165;
  --col9: 254, 230, 222;
  --col10: 247, 197, 161;
  --col11: 245, 205, 238;
  --col12: 252, 67, 130;
  position: relative;
  background: linear-gradient(
    65deg,
    rgba(var(--col1), 0.81) 0%,
    rgba(var(--col2), 0.81) 11%,
    rgba(var(--col3), 0.81) 21%,
    rgba(var(--col3), 0.81) 24%,
    rgba(var(--col4), 0.5) 37%,
    rgba(var(--col5), 0.81) 42%,
    rgba(var(--col6), 0.81) 50%,
    rgba(var(--col7), 0.9) 58%,
    rgba(var(--col8), 0.81) 68%,
    rgba(var(--col9), 0.81) 72%,
    rgba(var(--col3), 0.81) 78%,
    rgba(var(--col10), 0.81) 86%,
    rgba(var(--col11), 0.81) 93%,
    rgba(var(--col1), 0.81) 98%
  );
  background-size: 105%;
  box-shadow: -10px 10px 0px rgba(var(--col0), 0.005),
    0px 20px 30px rgba(var(--col0), 0.16),
    inset 5px 0 20px rgba(var(--col1), 0.5),
    inset -5px 20px 10px rgba(var(--col4), 0.5),
    inset 1px 3px 3px rgba(var(--col0), 0.25),
    inset 0px -5px 1px rgba(var(--col7), 0.5),
    inset 0px -5px 1px rgba(var(--col2), 0.95),
    inset 1px 2px 1px rgba(var(--col12), 0.15),
    inset 5px 5px 1px rgba(var(--col12), 0.35),
    inset -5px 5px 1px rgba(var(--col12), 0.15),
    inset 0px -20px 10px rgba(var(--col12), 0.15);
  cursor: pointer;
  padding: 1rem 2rem;
  min-height: 5rem;
  min-width: 16rem;
  font-size: 1rem;
  padding-inline-start: 10%;
  font-weight: 600;
  filter: hue-rotate(0deg);
  color: #505050;
  border-radius: var(--radius);
  appearance: none;
  border: 0;
  transition: all 3s ease-in-out;
  z-index: 0;
}
.button:hover {
  color: rgba(var(--col7), 1);
  text-shadow: 2px 2px 5px rgba(var(--col1), 0.75);
  background-size: 350%;
  filter: hue-rotate(125deg);
}
.button:active {
  transition: all 0.1s ease-out;
  scale: 0.95;
}

.button:hover::after {
  backdrop-filter: blur(1px);
  opacity: 0.25;
  box-shadow: 0;
  translate: 10%;
}
.button::before {
  --border: 4px;
  box-shadow: inset 0px 0px 20px rgba(var(--col1), 0.5),
    0px 0px 1px rgba(var(--col2), 0.95);
  content: "";
  border-radius: inherit;
  position: absolute;
  display: block;
  width: calc(90% - var(--border));
  height: calc(75% - var(--border));
  inset: 0.5rem 0.5rem 0.5rem;
  z-index: 0;
  border: var(--border) solid transparent;
  transition: all 3s ease-out;
}
.button::after {
  content: "";
  aspect-ratio: 1;
  clip-path: polygon(88% 0, 70% 45%, 100% 45%, 61% 100%, 72% 57%, 43% 57%);
  position: absolute;
  background: #505050;
  backdrop-filter: blur(5px);
  width: 10%;
  opacity: 1;
  inset: 33% 0 0 25%;
  z-index: -1;
  transition: all 1s ease-out;
}

</style>
    

================================================
FILE: Buttons/roufkp_chilly-dingo-79.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by roufkp - Tags: button, hover */
.button {
  width: fit-content;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1rem;
  border: none;
  background: transparent;
  box-shadow: inset -20px -16px 0px 2px rgb(2 184 72);
  border-radius: 100px;
  color: rgb(67, 46, 19);
  transition: all 1s cubic-bezier(.66, .00, .34, 1.00);
}

button:hover {
  box-shadow: inset 0px 0px 0px 0px rgb(2 184 72);
  background: rgb(33, 30, 24);
  transform: translateY(-5px);
  color: rgb(230, 221, 221);
  font-weight: 700;
}


</style>


================================================
FILE: Buttons/roufkp_empty-earwig-5.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by roufkp - Tags: gradient, button, light, hover effect */
.button {
  width: fit-content;
  padding: 12px 24px;
  border-radius: 100px;
  border: none;
  box-shadow: inset 0px 22px 20px 10px rgb(0, 0, 0);
  font-weight: 800;
  color: antiquewhite;
  letter-spacing: .1rem;
  transition: all 0.51s ease-in-out;
}

.button:hover {
  transform: translateY(5px);
  box-shadow: inset 1px -11px 25px 10px rgb(91, 88, 240);
}
</style>


================================================
FILE: Buttons/rrr63_ancient-eel-92.html
================================================
<button class="button">
  Click here ..
</button>
<style>
/* From Uiverse.io by rrr63 - Tags: button, hover, scale */
.button {
  padding: 10px 35px;
  background-color: #EBF5EE;
  font-weight: bolder;
  border: 0px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 5px;
  transition: all .2s ease-in-out .1s;
}

.button:hover {
  background-color: #EBF5EE;
  transform: scale(1.2) rotate(5deg);
}

.button:before {
  content: '';
  position: absolute;
  background-color: #78A1BB;
  height: 180%;
  top: -30%;
  left: -40%;
  transform: rotateZ(20deg);
  width: 40px;
  transition: left .2s ease-in-out, left 0s;
}

.button:after {
  content: '';
  position: absolute;
  background-color: #283044;
  height: 180%;
  top: -30%;
  left: -40%;
  transform: translateX(-40px) rotateZ(20deg);
  width: 40px;
  transition: left .2s ease-in-out, left 0s;
}

.button:hover:after {
  left: 150%;
  transition: left .3s ease-in-out;
}

.button:hover:before {
  left: 150%;
  transition: left .3s ease-in-out;
}
</style>


================================================
FILE: Buttons/rrr63_empty-cow-96.html
================================================
<button class="button">
  Hover me !
</button>
<style>
/* From Uiverse.io by rrr63 - Tags: button, hover, outlined, bootsrap button */
.button {
  font-size: 17px;
  padding: 15px 35px;
  border-radius: 5px;
  outline: 2px solid #2835ba;
  outline-offset: 0px;
  background: #2835ba;
  border: 0;
  font-weight: bolder;
  color: white;
  transition: all .1s ease-in-out;
  cursor: pointer;
}

.button:hover {
  outline-offset: 3px;
  outline: 3px solid #2835ba;
}
</style>


================================================
FILE: Buttons/sabbircoder07_pink-turtle-4.html
================================================
<button><span class="main-text">Next Step<span> <span>→</span> </span></span></button>
<style>
/* From Uiverse.io by sabbircoder07 - Tags: button, animated, read more */
button {
  font-family: "Lexend Deca", sans-serif;
  border: none;
  background-image: linear-gradient(to right top, #5FFBF1,#D16BA5,#86A8E7);
  color: #ffffff;
  font-size: 17px;
  text-transform: capitalize;
  letter-spacing: 1px;
  padding: 13px 26px;
  cursor: pointer;
  transform: skew(15deg);
  transition: all 1s;
}

.main-text {
  display: inline-block;
  transform: skew(-15deg);
}

button:hover {
  transform: translateY(-3px);
  background-image: linear-gradient(to bottom, #D16BA5,#86A8E7,#5FFBF1);
  border-radius: 26px;
  animation: pulsate 1s infinite;
}

button:hover span {
  display: inline-block;
  transform: translateX(2px);
  transition: all 1s;
}

button:focus {
  outline: none;
  border-radius: 26px;
  animation: pulsate 1s infinite;
}

@keyframes pulsate {
  0% {
    transform: scale(1);
    box-shadow: none;
  }

  50% {
    transform: scale(1.03);
    box-shadow: 0 16px 16px rgba(0, 0, 0, 0.4);
  }

  100% {
    transform: scale(1);
    box-shadow: none;
  }
}
</style>


================================================
FILE: Buttons/sahilxkhadka_chatty-insect-87.html
================================================
<!-- From Uiverse.io by sahilxkhadka - Tags: animated, #button -->
<button class="bg-gradient-to-r from-blue-400 via-teal-500 to-cyan-500 text-white font-bold py-3 px-6 rounded-md hover:bg-gradient-to-r hover:from-teal-500 hover:via-blue-400 hover:to-cyan-500 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 shadow-md hover:shadow-lg group focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 active:translate-y-2 active:shadow-sm">
  <span class="group-hover:animate-bounce">Frenzy Button</span>
</button>



================================================
FILE: Buttons/sahilxkhadka_moody-dodo-87.html
================================================
<!-- From Uiverse.io by sahilxkhadka  - Tags: loading, button, spinner, submit, click effect, click animation -->
<button
  class="cursor-pointer w-44 h-12 bg-blue-600 text-white rounded-lg hover:bg-blue-700 hover:shadow-lg transition-all group active:w-11 active:h-11 active:rounded-full active:duration-300 ease-in-out"
>
  <svg
    class="animate-spin hidden group-active:block mx-auto"
    width="33"
    height="32"
    viewBox="0 0 33 32"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M13.1792 0.129353C10.6088 0.646711 8.22715 1.74444 6.16886 3.36616C4.13416 4.96799 2.42959 7.14686 1.38865 9.48493C0.202866 12.1414 -0.241805 15.156 0.125386 18.0413C0.684593 22.4156 3.02922 26.3721 6.63375 29.0186C8.01155 30.0301 9.65549 30.8757 11.2725 31.3997C12.0405 31.6518 13.4857 32 13.7518 32H13.8361V30.7232V29.4464L13.762 29.4331C11.8485 29.0252 10.2787 28.3818 8.7493 27.3802C7.50961 26.5644 6.29688 25.4402 5.40416 24.2794C3.88824 22.3095 2.98206 20.0908 2.66203 17.5736C2.57781 16.8905 2.57781 15.1029 2.66203 14.4396C2.88773 12.7317 3.31556 11.3288 4.06678 9.863C5.88589 6.3045 9.23103 3.67791 13.1286 2.746C13.4352 2.67303 13.7182 2.60671 13.762 2.59676L13.8361 2.58349V1.29009C13.8361 0.577066 13.8327 -0.00330353 13.8293 1.33514e-05C13.8226 1.33514e-05 13.5329 0.0597076 13.1792 0.129353Z"
      fill="white"
    ></path>
    <path
      d="M19.563 1.38627V2.67967L19.7078 2.71615C20.8768 3.01463 21.7527 3.32968 22.6723 3.78071C24.8249 4.84528 26.6878 6.467 28.042 8.47011C29.248 10.251 29.9858 12.2375 30.2654 14.4562C30.3126 14.831 30.326 15.1792 30.326 16.0149C30.326 17.169 30.2923 17.5869 30.1205 18.5022C29.7365 20.575 28.8404 22.5681 27.5266 24.2761C26.8158 25.2014 25.8019 26.2029 24.862 26.9027C23.3056 28.0634 21.7324 28.7997 19.7078 29.3137L19.563 29.3502V30.6436V31.9403L19.691 31.9204C20.0616 31.8541 21.1362 31.5689 21.6516 31.4031C24.8216 30.365 27.6041 28.3951 29.6152 25.7652C30.2789 24.8996 30.7337 24.1667 31.2356 23.1618C31.8959 21.8419 32.3102 20.6479 32.5999 19.2318C33.4354 15.1394 32.6606 10.9441 30.417 7.40886C28.4126 4.24833 25.3067 1.8373 21.692 0.640079C21.1867 0.470943 20.038 0.169149 19.7078 0.112772L19.563 0.0895557V1.38627Z"
      fill="white"
    ></path>
  </svg>
  <span class="group-active:hidden">Hold Me</span>
</button>


    

================================================
FILE: Buttons/sahilxkhadka_pretty-snail-44.html
================================================
<button class="button">
  <div>
    <span>
      <i>W</i>
    </span>
  </div>
  <div>
    <span>
      <i>A</i>
    </span>
  </div>
  <div>
    <span>
      <i>S</i>
    </span>
  </div>
  <div>
    <span>
      <i>D</i>
    </span>
  </div>
</button>

<style>
/* From Uiverse.io by sahilxkhadka  - Tags: button, shadow, keyboard */
.button {
  outline: none;
  border: none;
  display: flex;
  width: 400px;
  justify-content: center;
  flex-wrap: wrap;
  background-color: transparent;
}
.button div:first-child {
  width: 100%;
  display: flex;
  justify-content: center;
}
.button span {
  cursor: pointer;
  position: relative;
  height: 80px;
  width: 80px;
  padding: 8px 15px;
  margin: 8px 4px;
  display: inline-block;
  border-radius: 10px;
  background: linear-gradient(180deg, #282828, #202020);
  box-shadow: inset -8px 0 8px rgba(0, 0, 0, 0.15),
    inset 0 -8px 8px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(0, 0, 0, 0.75),
    10px 20px 25px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.button span::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  bottom: 14px;
  right: 12px;
  background: linear-gradient(90deg, #232323, #4a4a4a);
  border-radius: 10px;
  box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.25),
    10px 5px 10px rgba(0, 0, 0, 0.15);
  border-left: 1px solid #0004;
  border-bottom: 1px solid #0004;
  border-top: 1px solid #0009;
}
.button span i {
  font-family: "Montserrat", sans-serif;
  position: relative;
  font-style: normal;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: white;
}

</style>
    

================================================
FILE: Buttons/sahilxkhadka_rotten-grasshopper-44.html
================================================
<!-- From Uiverse.io by sahilxkhadka - Tags: button, download, button hover effect  -->
<button class="cursor-pointer group relative flex gap-1.5 px-8 py-4 bg-black bg-opacity-80 text-[#f1f1f1] rounded-3xl hover:bg-opacity-70 transition font-semibold shadow-md">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="24px" width="24px"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g id="Interface / Download"> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#f1f1f1" d="M6 21H18M12 3V17M12 17L17 12M12 17L7 12" id="Vector"></path> </g> </g></svg>
  Download
  <div class="absolute opacity-0 -bottom-full rounded-md py-2 px-2 bg-black bg-opacity-70 left-1/2 -translate-x-1/2 group-hover:opacity-100 transition-opacity shadow-lg">
    Download
  </div>
</button>



================================================
FILE: Buttons/sahilxkhadka_spotty-dolphin-15.html
================================================
<!-- From Uiverse.io by sahilxkhadka - Tags: twitter, button, click -->
<button class="cursor-pointer group block px-5 py-2 rounded-md bg-black text-white text-4xl font-bold shadow-2xl hover:scale-110 transition active:scale-90">
  <span class="group-hover:[text-shadow:3px_3px_6px_var(--tw-shadow-color)] shadow-white">𝕏</span>
</button>



================================================
FILE: Buttons/sahilxkhadka_young-dolphin-79.html
================================================
<button>
  <span>Uiverse</span>
</button>
<style>
/* From Uiverse.io by sahilxkhadka - Tags: button, keyboard, keyboard style */
button {
  all: unset;
  position: relative;
  height: 4em;
  width: 10em;
  padding: 8px 24px;
  border-radius: 10px;
  background: linear-gradient(180deg, #282828, #202020);
  box-shadow: inset -8px 0 8px rgba(0, 0, 0, 0.15),
                inset 0 -8px 8px rgba(0, 0, 0, 0.25),
                0 0 0 2px rgba(0, 0, 0, 0.75),
                10px 20px 25px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

button::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  bottom: 14px;
  right: 12px;
  background: linear-gradient(90deg, #232323, #4a4a4a);
  border-radius: 10px;
  box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.25),
                10px 5px 10px rgba(0, 0, 0, 0.15);
  border-left: 1px solid #0004;
  border-bottom: 1px solid #0004;
  border-top: 1px solid #0009;
}

button span {
  font-size: 1.5rem;
  color: white;
  position: relative;
  margin-top: -8px;
}
</style>


================================================
FILE: Buttons/sammykINC_average-bat-26.html
================================================
<button class="button">
  <svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
  <path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM128,72a12,12,0,1,0-12-12A12,12,0,0,0,128,72Zm0,112a12,12,0,1,0,12,12A12,12,0,0,0,128,184Z"></path></svg>
</button>
<style>
/* From Uiverse.io by sammykINC - Tags: button, menu, animated, settings */
/* works only on a dark background with these paremeters*/

.button {
  border-radius: 50%;
  border: none;
  display: flex;
  place-items: center;
  background-color: transparent;
  cursor: pointer;
}

.button > svg {
  border-radius: inherit;
  padding: 0.5rem;
  fill: #fff;
 /* SVG color */
  width: 38px;
 /* default width 32px */
  height: 38px;
 /* default height 32px */
}

.button > svg:active {
  background-color: rgba(65, 65, 65, 0.5);
}

.button > svg:not(:active) {
  animation: fadeOut 0.9s;
}

@keyframes fadeOut {
  0% {
    outline: 1px solid rgba(90, 90, 90, 0.5);
 /* If you use border it will take space inside and slightly move the SVG */
  }

  100% {
    background-color: transparent;
  }
}

</style>


================================================
FILE: Buttons/sashadubovyi_fast-elephant-34.html
================================================
<button class="btn">
  <span class="left-span"></span>
  <p class="text-btn">Hover me</p>
  <p class="hidden-text-btn">Thank you!</p>
  <span class="right-span"></span>
</button>

<style>
/* From Uiverse.io by sashadubovyi  - Tags: simple, animation, success, button */
.btn {
  cursor: pointer;
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 20px;
  font-weight: 400;
  border: none;
  display: flex;
  align-items: center;
  background: transparent;
  color: #f93d21;
  transition: all 100ms;
  overflow: hidden;
  height: 50px;
  width: 170px;
}

.left-span {
  position: absolute;
  left: 0;
  height: 50px;
  width: 15px;
  border-top: 1px solid #f93d21;
  border-bottom: 1px solid #f93d21;
  border-left: 1px solid #f93d21;
  transition: all 500ms;
}

.right-span {
  position: absolute;
  right: 0;
  height: 50px;
  width: 15px;
  border-top: 1px solid #f93d21;
  border-bottom: 1px solid #f93d21;
  border-right: 1px solid #f93d21;
  transition: all 500ms;
}

.text-btn {
  position: absolute;
  transform: translateX(0px);
  width: 110px;
  transition: all 200ms;
}

.hidden-text-btn {
  position: absolute;
  transform: translateX(150px);
  opacity: 0;
  transition: all 200ms;
}

.btn:hover .text-btn {
  transform: translateX(-150px);
  opacity: 0;
}

.btn:hover .hidden-text-btn {
  transform: translateX(0px);
  opacity: 1;
}

.btn:hover .right-span,
.btn:hover .left-span {
  width: 100%;
}

</style>
    

================================================
FILE: Buttons/satyamchaudharydev_afraid-yak-30.html
================================================
<div class="button" data-tooltip="Size: 20Mb">
<div class="button-wrapper">
  <div class="text">Download</div>
    <span class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="2em" height="2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15V3m0 12l-4-4m4 4l4-4M2 17l.621 2.485A2 2 0 0 0 4.561 21h14.878a2 2 0 0 0 1.94-1.515L22 17"></path></svg>
    </span>
  </div>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: button, download */
.button {
  --width: 100px;
  --height: 35px;
  --tooltip-height: 35px;
  --tooltip-width: 90px;
  --gap-between-tooltip-to-button: 18px;
  --button-color: #1163ff;
  --tooltip-color: #fff;
  width: var(--width);
  height: var(--height);
  background: var(--button-color);
  position: relative;
  text-align: center;
  border-radius: 0.45em;
  font-family: "Arial";
  transition: background 0.3s;
}

.button::before {
  position: absolute;
  content: attr(data-tooltip);
  width: var(--tooltip-width);
  height: var(--tooltip-height);
  background-color: var(--tooltip-color);
  font-size: 0.9rem;
  color: #111;
  border-radius: .25em;
  line-height: var(--tooltip-height);
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px);
  left: calc(50% - var(--tooltip-width) / 2);
}

.button::after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: var(--tooltip-color);
  left: calc(50% - 10px);
  bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px);
}

.button::after,.button::before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-wrapper,.text,.icon {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  color: #fff;
}

.text {
  top: 0
}

.text,.icon {
  transition: top 0.5s;
}

.icon {
  color: #fff;
  top: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon svg {
  width: 24px;
  height: 24px;
}

.button:hover {
  background: #6c18ff;
}

.button:hover .text {
  top: -100%;
}

.button:hover .icon {
  top: 0;
}

.button:hover:before,.button:hover:after {
  opacity: 1;
  visibility: visible;
}

.button:hover:after {
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px);
}

.button:hover:before {
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button));
}

</style>


================================================
FILE: Buttons/satyamchaudharydev_chatty-chipmunk-42.html
================================================
<button>
  <p>Submit</p>
</button>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: button */
button {
 border: none;
 width: 140px;
 height: 55px;
 color: #fff;
 font-family: "Arial";
 letter-spacing: 1.2px;
 font-weight: bold;
 z-index: 1;
 display: flex;
 background: #000;
 position: relative;
}

button p {
 margin: 0 auto;
 align-self: center;
 font-size: 1.5em;
 text-align: center;
}

button::after, button::before {
 position: absolute;
 content: "";
 width: 100%;
 z-index: -1;
 height: 10%;
 clip-path: polygon(0% 74%, 4% 75%, 8% 76%, 11% 77%, 15% 78%, 20% 78%, 25% 77%, 32% 77%, 37% 75%, 40% 74%, 43% 74%, 46% 73%, 52% 72%, 57% 72%, 65% 74%, 66% 75%, 71% 78%, 75% 82%, 81% 86%, 83% 88%, 88% 91%, 90% 94%, 94% 96%, 98% 98%, 100% 100%, 82% 100%, 0 100%);
 background: #97c45d;
 transition: 0.2s cubic-bezier(.02,.02,.23,.73);
}

button::after {
 bottom: 0;
}

button::before {
 transform: rotate(180deg);
}

button:hover::after {
 clip-path: path('M0 199.88C8.33 270.71 16.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.7 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');
 height: 30%;
}

button:hover::before {
 clip-path: path('M0 199.88C8.33 270.71 16.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.7 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');
 height: 100%;
}

</style>


================================================
FILE: Buttons/satyamchaudharydev_curvy-rat-14.html
================================================
<button>
    Join now
</button>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: button */
/* this button is inspired from this -- https://www.newline.co/pricing */
button {
  --width: 150px;
  --timing: 2s;
  border: 0;
  width: var(--width);
  padding-block: 1em;
  color: #fff;
  font-weight: bold;
  font-size: 1em;
  background: rgb(64, 192, 87);
  transition: all 0.2s;
  border-radius: 3px;
}

button:hover {
  background-image: linear-gradient(to right, rgb(250, 82, 82), rgb(250, 82, 82) 16.65%, rgb(190, 75, 219) 16.65%, rgb(190, 75, 219) 33.3%, rgb(76, 110, 245) 33.3%, rgb(76, 110, 245) 49.95%, rgb(64, 192, 87) 49.95%, rgb(64, 192, 87) 66.6%, rgb(250, 176, 5) 66.6%, rgb(250, 176, 5) 83.25%, rgb(253, 126, 20) 83.25%, rgb(253, 126, 20) 100%, rgb(250, 82, 82) 100%);
  animation: var(--timing) linear dance6123 infinite;
  transform: scale(1.1) translateY(-1px);
}

@keyframes dance6123 {
  to {
    background-position: var(--width);
  }
}


</style>


================================================
FILE: Buttons/satyamchaudharydev_dry-sloth-51.html
================================================
<button>
    <p>Subscribe</p>
    <svg stroke-width="4" stroke="currentColor" viewBox="0 0 24 24" fill="none" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg">
        <path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linejoin="round" stroke-linecap="round"></path>
    </svg>
</button>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: button */
button {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
}

button {
  --primary-color: #111;
  --hovered-color: #c84747;
  position: relative;
  display: flex;
  font-weight: 600;
  font-size: 20px;
  gap: 0.5rem;
  align-items: center;
}

button p {
  margin: 0;
  position: relative;
  font-size: 20px;
  color: var(--primary-color)
}

button::after {
  position: absolute;
  content: "";
  width: 0;
  left: 0;
  bottom: -7px;
  background: var(--hovered-color);
  height: 2px;
  transition: 0.3s ease-out;
}

button p::before {
  position: absolute;
/*   box-sizing: border-box; */
  content: "Subscribe";
  width: 0%;
  inset: 0;
  color: var(--hovered-color);
  overflow: hidden;
  transition: 0.3s ease-out;
}

button:hover::after {
  width: 100%;
}

button:hover p::before {
  width: 100%;
}

button:hover svg {
  transform: translateX(4px);
  color: var(--hovered-color)
}

button svg {
  color: var(--primary-color);
  transition: 0.2s;
  position: relative;
  width: 15px;
  transition-delay: 0.2s;
}
</style>


================================================
FILE: Buttons/satyamchaudharydev_great-seahorse-44.html
================================================
<button class="button">
    <svg viewBox="0 0 36 24" xmlns="http://www.w3.org/2000/svg">
        <path d="m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z"></path>
    </svg>
    Unlock Pro
</button>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: icon, button, 3d button */
/* inspired from this svgbackgrounds.com/ */
.button {
  width: fit-content;
  display: flex;
  padding: 0.8em 1.1em;
  gap: 0.4rem;
  border: none;
  font-weight: bold;
  border-radius: 30px;
  text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
  background: linear-gradient(15deg, #880088, #aa2068, #cc3f47, #de6f3d, #f09f33, #de6f3d, #cc3f47, #aa2068, #880088) no-repeat;
  background-size: 300%;
  background-position: left center;
  transition: background .3s ease;
  color: #fff;
}

.button:hover {
  background-size: 320%;
  background-position: right center;
}

.button:hover svg {
  fill: #fff;
}

.button svg {
  width: 23px;
  fill: #f09f33;
  transition: .3s ease;
}
</style>


================================================
FILE: Buttons/satyamchaudharydev_hot-fox-63.html
================================================
<button>
  <p>Crush!</p>
</button>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: button */
button {
 border: none;
 width: 140px;
 height: 50px;
 color: #fff;
 z-index: 1;
 display: flex;
 background: #000;
 position: relative;
}

button p {
 margin: 0 auto;
 align-self: center;
 font-size: 17px;
 font-weight: bold;
 text-align: center;
}

button::after {
 position: absolute;
 content: "";
 width: 100%;
 z-index: -1;
 height: 10%;
 bottom: 0;
 clip-path: polygon(0% 74%, 4% 75%, 8% 76%, 11% 77%, 15% 78%, 20% 78%, 25% 77%, 32% 77%, 37% 75%, 40% 74%, 43% 74%, 46% 73%, 52% 72%, 57% 72%, 65% 74%, 66% 75%, 71% 78%, 75% 82%, 81% 86%, 83% 88%, 88% 91%, 90% 94%, 94% 96%, 98% 98%, 100% 100%, 82% 100%, 0 100%);
 background: #8792eb;
 transition: 0.2s ease;
}

button::before {
 position: absolute;
 content: "";
/*   bottom: 80%; */
 transform: rotate(180deg);
 width: 100%;
 height: 10%;
 transition: 0.2s ease;
/*   bottom:; */
 z-index: -1;
 clip-path: polygon(0% 74%, 4% 75%, 8% 76%, 11% 77%, 15% 78%, 20% 78%, 25% 77%, 32% 77%, 37% 75%, 40% 74%, 43% 74%, 46% 73%, 52% 72%, 57% 72%, 65% 74%, 66% 75%, 71% 78%, 75% 82%, 81% 86%, 83% 88%, 88% 91%, 90% 94%, 94% 96%, 98% 98%, 100% 100%, 82% 100%, 0 100%);
 background: #8792eb;
}

button:hover::after {
 clip-path: polygon(0 30%, 9% 34%, 7% 39%, 11% 43%, 13% 33%, 17% 30%, 24% 34%, 25% 35%, 30% 31%, 30% 38%, 39% 33%, 35% 43%, 43% 45%, 55% 46%, 65% 74%, 67% 66%, 81% 57%, 75% 82%, 81% 86%, 83% 88%, 88% 91%, 90% 94%, 94% 96%, 98% 98%, 100% 100%, 82% 100%, 0 100%);
 height: 80%;
}

button:hover::before {
 clip-path: polygon(0 30%, 9% 34%, 7% 39%, 11% 43%, 13% 33%, 17% 30%, 24% 34%, 25% 35%, 30% 31%, 30% 38%, 39% 33%, 35% 43%, 43% 45%, 55% 46%, 65% 74%, 67% 66%, 81% 57%, 75% 82%, 81% 86%, 83% 88%, 88% 91%, 90% 94%, 94% 96%, 98% 98%, 100% 100%, 82% 100%, 0 100%);
 height: 80%;
}


</style>


================================================
FILE: Buttons/satyamchaudharydev_hungry-parrot-44.html
================================================
<button>
    <div class="text">
        <span>Back</span>
        <span>to</span>
        <span>top</span>
    </div>
    <div class="clone">
        <span>Back</span>
        <span>to</span>
        <span>top</span>
    </div>
    <svg width="20px" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
    </svg>
</button>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: button */
button {
  width: 140px;
  height: 56px;
  overflow: hidden;
  border: none;
  color: #fff;
  background: none;
  position: relative;
  padding-bottom: 2em;
}

button > div,button > svg {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}

button:before {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: bottom right;
  background: currentColor;
  transition: transform 0.25s ease-out;
}

button:hover:before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

button .clone > *,button .text > * {
  opacity: 1;
  font-size: 1.3rem;
  transition: 0.2s;
  margin-left: 4px;
}

button .clone > * {
  transform: translateY(60px);
}

button:hover .clone > * {
  opacity: 1;
  transform: translateY(0px);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

button:hover .text > * {
  opacity: 1;
  transform: translateY(-60px);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

button:hover .clone > :nth-child(1) {
  transition-delay: 0.15s;
}

button:hover .clone > :nth-child(2) {
  transition-delay: 0.2s;
}

button:hover .clone > :nth-child(3) {
  transition-delay: 0.25s;
}

button:hover .clone > :nth-child(4) {
  transition-delay: 0.3s;
}
/* icon style and hover */
button svg {
  width: 20px;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-50deg);
  transition: 0.2s ease-out;
}

button:hover svg {
  transform: translateY(-50%) rotate(-90deg);
}
</style>


================================================
FILE: Buttons/satyamchaudharydev_loud-seahorse-55.html
================================================
<button class="button">
    Hover me :)
</button>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: button */
/* inspired form gumroad website */
.button {
  --bg: #000;
  --hover-bg: #ff90e8;
  --hover-text: #000;
  color: #fff;
  border: 1px solid var(--bg);
  border-radius: 4px;
  padding: 0.8em 2em;
  background: var(--bg);
  transition: 0.2s;
}

.button:hover {
  color: var(--hover-text);
  transform: translate(-0.25rem,-0.25rem);
  background: var(--hover-bg);
  box-shadow: 0.25rem 0.25rem var(--bg);
}

.button:active {
  transform: translate(0);
  box-shadow: none;
}
</style>


================================================
FILE: Buttons/satyamchaudharydev_modern-sheep-10.html
================================================
<button>
    Sign up
    <div class="arrow-wrapper">
        <div class="arrow"></div>

    </div>
</button>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: button */
button {
  --primary-color: #645bff;
  --secondary-color: #fff;
  --hover-color: #111;
  --arrow-width: 10px;
  --arrow-stroke: 2px;
  box-sizing: border-box;
  border: 0;
  border-radius: 20px;
  color: var(--secondary-color);
  padding: 1em 1.8em;
  background: var(--primary-color);
  display: flex;
  transition: 0.2s background;
  align-items: center;
  gap: 0.6em;
  font-weight: bold;
}

button .arrow-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

button .arrow {
  margin-top: 1px;
  width: var(--arrow-width);
  background: var(--primary-color);
  height: var(--arrow-stroke);
  position: relative;
  transition: 0.2s;
}

button .arrow::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: solid var(--secondary-color);
  border-width: 0 var(--arrow-stroke) var(--arrow-stroke) 0;
  display: inline-block;
  top: -3px;
  right: 3px;
  transition: 0.2s;
  padding: 3px;
  transform: rotate(-45deg);
}

button:hover {
  background-color: var(--hover-color);
}

button:hover .arrow {
  background: var(--secondary-color);
}

button:hover .arrow:before {
  right: 0;
}
</style>


================================================
FILE: Buttons/satyamchaudharydev_purple-rat-85.html
================================================
<button>
    Click me
</button>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: 3d, button */
button {
  --bg: #e74c3c;
  --text-color: #fff;
  position: relative;
  width: 150px;
  border: none;
  background: var(--bg);
  color: var(--text-color);
  padding: 1em;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.2s;
  border-radius: 5px;
  opacity: 0.8;
  letter-spacing: 1px;
  box-shadow: #c0392b 0px 7px 2px, #000 0px 8px 5px;
}

button:hover {
  opacity: 1;
}

button:active {
  top: 4px;
  box-shadow: #c0392b 0px 3px 2px,#000 0px 3px 5px;
}
</style>


================================================
FILE: Buttons/satyamchaudharydev_quick-chicken-50.html
================================================
<button data-text="Awesome" class="button">
    <span class="actual-text">&nbsp;uiverse&nbsp;</span>
    <span class="hover-text" aria-hidden="true">&nbsp;uiverse&nbsp;</span>
</button>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: button */
/* === removing default button style ===*/
.button {
  margin: 0;
  height: auto;
  background: transparent;
  padding: 0;
  border: none;
}

/* button styling */
.button {
  --border-right: 6px;
  --text-stroke-color: rgba(255,255,255,0.6);
  --animation-color: #37FF8B;
  --fs-size: 2em;
  letter-spacing: 3px;
  text-decoration: none;
  font-size: var(--fs-size);
  font-family: "Arial";
  position: relative;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--text-stroke-color);
}
/* this is the text, when you hover on button */
.hover-text {
  position: absolute;
  box-sizing: border-box;
  content: attr(data-text);
  color: var(--animation-color);
  width: 0%;
  inset: 0;
  border-right: var(--border-right) solid var(--animation-color);
  overflow: hidden;
  transition: 0.5s;
  -webkit-text-stroke: 1px var(--animation-color);
}
/* hover */
.button:hover .hover-text {
  width: 100%;
  filter: drop-shadow(0 0 23px var(--animation-color))
}
</style>


================================================
FILE: Buttons/satyamchaudharydev_rude-wolverine-24.html
================================================
<button class="button">
  Apply Now
  <svg fill="currentColor" viewBox="0 0 24 24" class="icon">
    <path clip-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z" fill-rule="evenodd"></path>
  </svg>
</button>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: simple, animation, button, text animation */
.button {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: rgb(0 107 179);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffff;
  gap: 10px;
  font-weight: bold;
  border: 3px solid #ffffff4d;
  outline: none;
  overflow: hidden;
  font-size: 15px;
}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  transform: scale(1.05);
  border-color: #fff9;
}

.button:hover .icon {
  transform: translate(4px);
}

.button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}

</style>


================================================
FILE: Buttons/sekaiking_tidy-starfish-71.html
================================================
<button>
    Hover Me
</button>
<style>
/* From Uiverse.io by sekaiking - Tags: button */
button {
  background-color: white;
  color: black;
  border-radius: 10em;
  font-size: 17px;
  font-weight: 600;
  padding: 1em 2em;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border: 1px solid black;
  box-shadow: 0 0 0 0 black;
}

button:hover {
  transform: translateY(-4px) translateX(-2px);
  box-shadow: 2px 5px 0 0 black;
};

button:active {
  transform: translateY(2px) translateX(1px);
  box-shadow: 0 0 0 0 black;
};
</style>


================================================
FILE: Buttons/seyed-mohsen-mousavi_bitter-snail-5.html
================================================
<button class="button">3D Button</button>

<style>
/* From Uiverse.io by seyed-mohsen-mousavi  - Tags: 3d, black, button, dark, shadow, rotate, box-shadow */
.button {
  background: rgba(55, 51, 51, 0.49);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3.7px);
  -webkit-backdrop-filter: blur(3.7px);
  outline: none;
  border: none;
  padding: 20px;
  transform: rotate3d(1, 1, 1, 320deg);
  filter: drop-shadow(1px 1px 8px black);
  color: white;
  cursor: pointer;
  transition: ease-in-out 0.5s;
}
.button:hover {
  transform: rotate3d(1, 1, 1, 360deg);
  animation: shadow 1s both;
}
@keyframes shadow {
  0% {
    filter: drop-shadow(1px 1px 8px black);
  }
  25% {
    filter: drop-shadow(1px 1px 5px black);
  }
  50% {
    filter: drop-shadow(1px 1px 2px black);
  }
  100% {
    filter: drop-shadow(1px 1px 2px black);
  }
}

</style>
    

================================================
FILE: Buttons/seyed-mohsen-mousavi_cuddly-newt-70.html
================================================
<button class="button">Hover Me</button>

<style>
/* From Uiverse.io by seyed-mohsen-mousavi  - Tags: button, hover, shadow, hover effect */
.button {
  cursor: pointer;
  padding: 10px;
  border: outset;
  width: 100px;
  height: 40px;
  transition: ease-in-out 0.3s;
}

.button:hover {
  padding: 10px;
  width: 105px;
  height: 45px;
  background-color: #3e3e3e;
  font-size: 13px;
  font-weight: bold;
  color: white;
  -webkit-animation: shadow-pop-tr 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) both;
  animation: shadow-pop-tr 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}

@-webkit-keyframes shadow-pop-tr {
  0% {
    -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e,
      0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e,
      0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
  100% {
    -webkit-box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e,
      4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e,
      8px -8px #3e3e3e;
    box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e,
      4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e,
      8px -8px #3e3e3e;
    -webkit-transform: translateX(-8px) translateY(8px);
    transform: translateX(-8px) translateY(8px);
  }
}
@keyframes shadow-pop-tr {
  0% {
    -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e,
      0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e,
      0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
  100% {
    -webkit-box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e,
      4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e,
      8px -8px #3e3e3e;
    box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e,
      4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e,
      8px -8px #3e3e3e;
    -webkit-transform: translateX(-8px) translateY(8px);
    transform: translateX(-8px) translateY(8px);
  }
}

</style>
    

================================================
FILE: Buttons/seyed-mohsen-mousavi_warm-dingo-23.html
================================================
<!-- From Uiverse.io by seyed-mohsen-mousavi  - Tags: button, hover, delete, tailwind -->
<button
  class="inline-flex items-center px-4 py-2 bg-red-600 transition ease-in-out delay-75 hover:bg-red-700 text-white text-sm font-medium rounded-md hover:-translate-y-1 hover:scale-110"
>
  <svg
    stroke="currentColor"
    viewBox="0 0 24 24"
    fill="none"
    class="h-5 w-5 mr-2"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
      stroke-width="2"
      stroke-linejoin="round"
      stroke-linecap="round"
    ></path>
  </svg>

  Delete
</button>


    

================================================
FILE: Buttons/seyed-mohsen-mousavi_weak-parrot-44.html
================================================
<!-- From Uiverse.io by seyed-mohsen-mousavi  - Tags: gradient, button, hover -->
<button
  class="flex overflow-hidden ring-[5px] ring-white w-[5.1rem] hover:w-[6.5rem] items-center gap-2 cursor-pointer bg-gradient-to-r from-violet-500 to-fuchsia-500 text-white px-5 py-2 rounded-full transition-all ease-in-out hover:scale hover:scale-105 font-[revert] active:scale-100 shadow-lg"
>
  Click
  <svg
    class="size-6 mt-0.5"
    stroke="currentColor"
    stroke-width="1.5"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672Zm-7.518-.267A8.25 8.25 0 1 1 20.25 10.5M8.288 14.212A5.25 5.25 0 1 1 17.25 10.5"
      stroke-linejoin="round"
      stroke-linecap="round"
    ></path>
  </svg>
</button>


    

================================================
FILE: Buttons/shadowfax29_friendly-puma-48.html
================================================
<!-- From Uiverse.io by shadowfax29 - Tags: button, active, 3d button -->

<button class="relative text-neutral-300 cursor-pointer w-28 h-28 bg-purple-300 rounded-full flex justify-center  items-center  text-neutral-400 transition duration-300 shadow-lg shadow-purple-400  active:shadow-none active:translate-y-1.5">
  <div class="relative -top-[1px] cursor-pointer w-24 h-24 bg-purple-300 rounded-full border-8 border-white">
    <div class="w-3 h-3 bg-purple-800 rounded-full relative top-5 left-5"></div>
    <div class="w-3 h-3 bg-purple-800  rounded-full relative top-2 left-12"></div>
    <div class="w-3 h-3 bg-purple-800 rounded-full relative top-5 left-5"></div>
    <div class="w-3 h-3 bg-purple-800  rounded-full relative top-2 left-12"></div>
  </div>
  
</button>





================================================
FILE: Buttons/shadowmurphy_fluffy-dragonfly-11.html
================================================
<button class="button">
  <span class="inner-circle"></span>
  <span class="text">Button</span>
</button>
<style>
/* From Uiverse.io by shadowmurphy - Tags: button, active, animated */
.button * {
  cursor: pointer;
}

.button {
  position: relative;
  width: 160px;
  height: 50px;
  background: none;
  border-radius: 8px;
  outline: none;
  font-size: 19px;
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  text-decoration: none;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s;
}

.button::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 100%;
  background-image: linear-gradient(to right, #AF40FF, #5B42F3, #006eeb, #42a0f3, #AF40FF);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: moveGradient 3s linear infinite;
  z-index: -1;
}

.inner-circle {
  position: absolute;
  width: 94%;
  height: 84%;
  background-color: rgb(2, 3, 20);
  border-radius: 6px;
  opacity: 1;
  transition: opacity 0.2s;
}

.text {
  z-index: 3;
  color: white;
  cursor: pointer;
}

@keyframes moveGradient {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.button:active {
  transform: scale(0.9);
}
</style>


================================================
FILE: Buttons/shadowmurphy_little-hound-75.html
================================================
<button class="button">Button</button>
<style>
/* From Uiverse.io by shadowmurphy - Tags: button, hover, active */
.button {
  overflow: hidden;
  position: relative;
  border: 1px solid #D1D1D1;
  background-color: #F5F5F5;
  width: 100px;
  height: 30px;
  user-select: none;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.5s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.button:hover {
  transform: scale(1.1);
  background-color: #E8E8E8;
  border-color: #BDBDBD;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: scale(0.95);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%,
              transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%,
              transparent 75%, transparent);
  opacity: 0;
  animation: buttonGlow 2s linear infinite;
  z-index: -1;
}

@keyframes buttonGlow {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 400% 0;
  }
}

</style>


================================================
FILE: Buttons/shah1345_spicy-liger-32.html
================================================
<button class="button2">
    Hover me
</button>
<style>
/* From Uiverse.io by shah1345 - Tags: button */
.button2 {
  display: inline-block;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: #090909;
  padding: 0.7em 1.7em;
  font-size: 18px;
  border-radius: 0.5em;
  background: #e8e8e8;
  border: 1px solid #e8e8e8;
  box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

.button2:active {
  color: #666;
  box-shadow: inset 4px 4px 12px #c5c5c5,
             inset -4px -4px 12px #ffffff;
}

.button2:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.button2:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: #009087;
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.button2:hover {
  color: #ffffff;
  border: 1px solid #009087;
}

.button2:hover:before {
  top: -35%;
  background-color: #009087;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.button2:hover:after {
  top: -45%;
  background-color: #009087;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

</style>


================================================
FILE: Buttons/sheptalo_chatty-mule-100.html
================================================

<button>
  HOVER ME!
</button>

<style>
/* From Uiverse.io by sheptalo - Tags: button */
button {
  border-style: outset;
  font-weight: 1000;
  height: 50px;
  width: 150px;
  background: inherit;
  border: 7px solid orange;
  transition: all 900ms;
}

button::before {
  content: "";
  z-index: -1;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0%;
  height: 100%;
  width: 0;
  background-color: yellow;
  transition-timing-function: ease-in;
  transition: all 1.3s;
}

button:hover {
  color: rgb(78, 78, 78);
  border: 2px solid yellow;
  transform: scale(1.2);
}

button:hover::before {
  left: 0%;
  width: 100%;
}
</style>


================================================
FILE: Buttons/sherghan7_afraid-owl-82.html
================================================
<button>
    Button
</button>
<style>
/* From Uiverse.io by sherghan7 - Tags: button */
button {
  min-width: 120px;
  background: #000;
  color: #EEEEEE;
  height: 40px;
  margin: 10px;
  border: none;
  border-radius: 0 !important;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease-in-out;
}

button:hover {
  box-shadow: #EEEEEE 0px 0px 0px 11px, #161616 0px 0px 0px 10px;
  background: #000;
  color: #EEEEEE;
}
</style>


================================================
FILE: Buttons/simontheonlyone_cuddly-cat-36.html
================================================
<button>
</button>
<style>
/* From Uiverse.io by simontheonlyone - Tags: green, button, active */
button {
  position: relative;
  width: 10em;
  height: 4em;
  border: none;
  border-radius: 2.1em;
  background-color: whitesmoke;
  box-shadow: 0 0 30px rgba(0, 0, 0, .22);
  cursor: pointer;
  transition: all 100ms;
}

button:active {
  transform: translate(5px, 5px);
  box-shadow: none;
}

button::before {
  content: '';
  position: absolute;
  inset: 43% 13%;
  width: 5.5em;
  height: .6em;
  border: none;
  border-radius: 3em;
  background-color: rgb(0, 209, 0);
  transition: all 300ms ease;
}

button::after {
  content: '';
  position: absolute;
  inset: 43% 77%;
  width: 1.1em;
  height: .6em;
  border: none;
  border-radius: 1em;
  background-color: rgb(0, 209, 0);
  transition: all 300ms ease;
}

button:active::before,
button:focus::before {
  width: 1.1em;
  background-color: red;
}

button:active::after,
button:focus::after {
  width: 5.5em;
  inset: 43% 33%;
  background-color: red;
}
</style>


================================================
FILE: Buttons/simontheonlyone_happy-baboon-60.html
================================================
<button class="button">
  <div class="container">
    <div class="folder folder_one"></div>
    <div class="folder folder_two"></div>
    <div class="folder folder_three"></div>
    <div class="folder folder_four"></div>
  </div>
  <div class="active_line"></div>
  <span class="text">File Explorer</span>
</button>
<style>
/* From Uiverse.io by simontheonlyone - Source: idea - Microsoft Windows File Explorer design;  made by me - Tags: tooltip, button, download, unique, file explorer */
.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.3em;
  height: 5.3em;
  border: none;
  border-radius: .4em;
  background: rgba(235, 252, 254, 0.8);
}

.container {
  position: relative;
  width: 3.5em;
  height: 3.1em;
  background: none;
  overflow: hidden;
}

.folder {
  content: '';
  position: absolute;
  /* box-shadow: 0 0 5px rgba(0, 0, 0, .3); */
}

.folder_one {
  bottom: 0;
  width: 100%;
  height: 88%;
  border-radius: 3px;
  border-top: 2px solid rgb(206, 167, 39);
  /* background-color: rgb(252, 212, 80); */
  background: linear-gradient(
    -35deg,
    rgb(238, 194, 47) 5%,
    rgb(255, 223, 118));
}

.folder_two {
  top: 5%;
  width: 38%;
  height: 19%;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  background-color: rgb(206, 167, 39);
  box-shadow: 0 1px 5px -2px rgba(0, 0, 0, .5);
}

.folder_two::before {
  content: '';
  position: absolute;
  display: inline;
  left: 88%;
  width: 0;
  height: 0;
  border-left: 7px solid rgb(206, 167, 39);
  border-top: .3em solid transparent;
  border-bottom: .3em solid transparent;
  /* background-color: rgb(206, 167, 39); */
}

.folder_three {
  display: flex;
  align-items: center;
  justify-content: center;
  left: .5em;
  bottom: 0;
  width: 2.5em;
  height: .9em;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(
    -35deg,
    rgb(25, 102, 218),
    rgb(109, 165, 249));
  box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}

.folder_four {
  left: 1em;
  bottom: .3em;
  width: 1.5em;
  height: .18em;
  border-radius: 1em;
  background-color: rgb(20, 77, 163);
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.active_line {
  content: '';
  position: absolute;
  bottom: 0;
  width: .9em;
  height: .4em;
  background-color: #999;
  border: none;
  border-radius: 1em;
  transition: all .15s linear;
}

.button:active .active_line,
.button:focus .active_line {
  width: 2.3em;
  background-color: rgb(41, 126, 255);
}

.button:focus .container {
  animation: wow 1s forwards;
}

@keyframes wow {
  20% {
    scale: .8;
  }

  30% {
    scale: 1;
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }

  65% {
    transform: translateY(4px);
  }

  80% {
    transform: translateY(0);
  }

  100% {
    scale: 1;
  }
}

.text {
  content: '';
  position: absolute;
  top: -4.5em;
  width: 7.7em;
  height: 2.6em;
  background-color: #666;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 5px;
  text-shadow: 0 0 10px rgb(0, 0, 0);
  opacity: 0;
  transition: all .25s linear;
}

.button:hover .text {
  opacity: 1;
}
</style>
    

================================================
FILE: Buttons/simontheonlyone_loud-husky-46.html
================================================
<button>
  <span class="night">Night</span>
  <span class="day">Day</span>
    <svg class="lightning" style="color: rgb(255, 228, 56);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641l2.5-8.5z" fill="#ffe438"></path> 
    </svg>
    <svg class="mini-cloud" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> 
      <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path>
    </svg>
    <svg class="stars star1" id="IconChangeColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="20" width="20">
      <path d="M208,512,155.62,372.38,16,320l139.62-52.38L208,128l52.38,139.62L400,320,260.38,372.38Z" id="mainIconPathAttribute" fill="yellow"></path>
      <path d="M88,176,64.43,111.57,0,88,64.43,64.43,88,0l23.57,64.43L176,88l-64.43,23.57Z" id="mainIconPathAttribute" fill="yellow"></path>
      <path d="M400,256l-31.11-80.89L288,144l80.89-31.11L400,32l31.11,80.89L512,144l-80.89,31.11Z" id="mainIconPathAttribute" fill="yellow"></path>
    </svg>
    <svg class="stars star2" id="IconChangeColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="20" width="20">
      <path d="M208,512,155.62,372.38,16,320l139.62-52.38L208,128l52.38,139.62L400,320,260.38,372.38Z" id="mainIconPathAttribute" fill="yellow"></path>
      <path d="M88,176,64.43,111.57,0,88,64.43,64.43,88,0l23.57,64.43L176,88l-64.43,23.57Z" id="mainIconPathAttribute" fill="yellow"></path>
      <path d="M400,256l-31.11-80.89L288,144l80.89-31.11L400,32l31.11,80.89L512,144l-80.89,31.11Z" id="mainIconPathAttribute" fill="yellow"></path>
    </svg>
  <span class="cloud left-side"></span>
  <span class="cloud left-side1"></span>
  <span class="cloud middle-side"></span>
  <span class="cloud middle-side1"></span>
  <span class="cloud right-side"></span>
  <span class="cloud right-side1"></span>
  <span class="sun"></span>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="sunshine">
    <path d="M0 0h256v256H0z" fill="none"></path>
    <path class="stroke-000000" d="M128 32v32M195.9 60.1l-22.6 22.6M224 128h-32M195.9 195.9l-22.6-22.6M128 224v-32M60.1 195.9l22.6-22.6M32 128h32M60.1 60.1l22.6 22.6" stroke-width="8" stroke-linejoin="round" stroke-linecap="round" stroke="#fe8a1e" fill="none">
    </path>
  </svg>
  <svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: rgb(92, 236, 255);" class="cloudflare cloudflare-one">
    <path fill="#5cecff" d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path>
  </svg>
  <svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: rgb(92, 236, 255);" class="cloudflare cloudflare-two">
    <path fill="#5cecff" d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path>
  </svg>
  <svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: rgb(92, 236, 255);" class="cloudflare cloudflare-three">
    <path fill="#5cecff" d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path>
  </svg>
</button>
<style>
/* From Uiverse.io by simontheonlyone - Tags: exotic, button, active, weather, animated, focus, night, day */
button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 11em;
  height: 4em;
  border: none;
  border-radius: 2.1em;
  background-color: rgb(23, 56, 128);
  color: whitesmoke;
  font-weight: bold;
  font-size: 17px;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s linear 1.1s,
  color .2s linear 1.1s;
}

button:active,
button:focus {
  background: rgb(254, 138, 30);
}

button .day {
  position: absolute;
  opacity: 0;
  transition: all .2s ease 1.1s;
}

button .night {
  transition: all .2s ease 1.1s;
}

button:active .night,
button:focus .night {
  color: transparent;
}

button:active .day,
button:focus .day {
  opacity: 1;
}
/* mini cloud */
.mini-cloud {
  content: '';
  position: absolute;
  inset: -26% 62%;
  scale: 2;
  opacity: 1;
  color: rgb(150, 150, 150);
  transform: rotate(3deg);
  transition: scale .4s ease .3s,
  opacity .4s ease 1.3s;
  pointer-events: none;
}
/* lightning */
.lightning {
  content: '';
  position: absolute;
  inset: -4% 62%;
  scale: 1.3;
  transform: rotate(15deg);
  transition: all .4s ease .2s,
  opacity .4s ease 1.5s;
  pointer-events: none;
}
/* stars */
.stars {
  content: '';
  position: absolute;
  pointer-events: none;
}

.star1 {
  inset: 15% 10%;
  scale: 1.2;
  opacity: 1;
  transition: all .4s ease .4s,
  opacity .4s ease 1.6s;
}

.star2 {
  inset: 45% 80%;
  scale: 1;
  opacity: 1;
  transition: all .4s ease .5s,
  opacity .4s ease 1.7s;
}
/* cloud */
.cloud {
  content: '';
  position: absolute;
  pointer-events: none;
  border: none;
}

.left-side {
  width: 4.4em;
  height: 4.4em;
  bottom: 0;
  left: -.8em;
  scale: 1;
  border-radius: 50%;
  z-index: -5;
  background-color: rgb(15, 39, 91);
  transition: all .6s ease .6s;
}

.left-side1 {
  width: 4.4em;
  height: 4.4em;
  bottom: 0;
  left: -.4em;
  scale: .95;
  border-radius: 50%;
  z-index: -4;
  background-color: rgb(23, 56, 128);
  transition: all .5s ease .5s;
}

.middle-side {
  width: 9em;
  height: 8.3em;
  bottom: 0;
  left: 1em;
  border-radius: 50%;
  scale: 1;
  z-index: -7;
  background-color: rgb(15, 39, 91);
  transition: scale, bottom, .4s ease .8s, opactiy .2s linear .8s;
}

.middle-side1 {
  width: 9em;
  height: 8.3em;
  bottom: -2px;
  left: 1.1em;
  scale: .95;
  z-index: -6;
  border-radius: 50%;
  background-color: rgb(23, 56, 128);
  transition: scale, bottom, .4s ease .75s, opactiy .2s linear .75s;
}

.right-side {
  width: 5.5em;
  height: 5.5em;
  bottom: -1px;
  right: -1.4em;
  border-radius: 50%;
  scale: .98;
  z-index: -5;
  background-color: rgb(15, 39, 91);
  transition: all .6s ease .7s;
}

.right-side1 {
  width: 5.5em;
  height: 5.5em;
  bottom: 0;
  right: -1.05em;
  border-radius: 50%;
  scale: .92;
  z-index: -4;
  background-color: rgb(23, 56, 128);
  transition: all .5s ease .6s;
}
/* night active animation */
button:active .star1,
button:focus .star1 {
  scale: 0;
  opacity: 0;
}

button:active .star2,
button:focus .star2 {
  scale: 0;
  opacity: 0;
}

button:active .mini-cloud,
button:focus .mini-cloud {
  scale: 0;
  opacity: 0;
}

button:active .lightning,
button:focus .lightning {
  scale: 0;
  opacity: 0;
}

button:active .left-side,
button:focus .left-side,
button:active .left-side1,
button:focus .left-side1 {
  scale: 0;
  opacity: 0;
}

button:active .middle-side,
button:focus .middle-side,
button:active .middle-side1,
button:focus .middle-side1 {
  scale: 0;
  opacity: 0;
  bottom: -40%;
}

button:active .right-side,
button:focus .right-side,
button:active .right-side1,
button:focus .right-side1 {
  scale: 0;
  opacity: 0;
}
/* sun */
.sun {
  position: absolute;
  top: -100%;
  left: -4%;
  width: 12em;
  height: 12em;
  background-color: #fe8a1e;
  /* background: linear-gradient(blue, red); */
  border: none;
  border-radius: 50%;
  scale: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -10;
  pointer-events: none;
  transition: scale .3s ease 1.4s,
      opacity .7s ease;
}

button:active .sun,
button:focus .sun {
  scale: .95;
  opacity: 1;
}
/* sunshine */
.sunshine {
  content: '';
  position: absolute;
  width: 18.5em;
  height: 18.5em;
  scale: 0;
  opacity: 0;
  z-index: -9;
  pointer-events: none;
  animation: spin 15s infinite linear;
  transition: scale .3s ease 1.5s,
  opacity .1s ease;
}

button:active .sunshine,
button:focus .sunshine {
  scale: 1;
  opacity: 1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.cloudflare {
  position: absolute;
  opacity: 0;
  scale: 0;
  pointer-events: none;
}

.cloudflare-one {
  inset: 5% 77%;
  width: 25px;
  height: 25px;
  transition: scale .3s ease 1.6s,
  opacity .3s ease;
}

.cloudflare-two {
  inset: -43% 45%;
  width: 32px;
  height: 32px;
  transition: scale .3s ease 1.8s,
  opacity .3s ease;
}

.cloudflare-three {
  inset: -10% 17%;
  width: 23px;
  height: 23px;
  transition: scale .3s ease 1.7s,
  opacity .3s ease;
}

button:active .cloudflare,
button:focus .cloudflare {
  scale: 1;
  opacity: 1;
}
</style>


================================================
FILE: Buttons/simontheonlyone_loud-husky-59.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by simontheonlyone - Source: WhiteNervosa - https://uiverse.io/WhiteNervosa/popular-ladybug-27 - Tags: minimalist, button, hover, shadow, glow, light&dark, focus */
.button {
  position: relative;
  width: 10em;
  height: 2em;
  text-align: center;
  font-family: poppins;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  background-color: rgba(3, 3, 3, .5);
  border: none;
  transition: color .2s linear,
        box-shadow .3s linear,
        background-color .3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.button:focus,
.button:hover {
  box-shadow: 0 0 110px #fff;
  background-color: rgba(255, 255, 255, 0.4);
  color: #111;
  font-weight: 500;
}

.button:focus:before,
.button:hover:before,
.button:focus:after,
.button:hover:after {
  width: 100%;
  left: 0%;
}

.button:before,
.button:after {
  content: '';
  position: absolute;
  pointer-events: none;
  left: 50%;
  width: 0%;
  height: 2px;
  background-color: #fff;
  transition: width, left, 250ms cubic-bezier(0.25, .8, .25, 1);
}

.button:before {
  top: -2px;
}

.button:after {
  bottom: -2px;
}
</style>


================================================
FILE: Buttons/simontheonlyone_ordinary-starfish-54.html
================================================
<button class="container">
  <span class="effect orange_effect"></span>
  <span class="effect white_effect"></span>
  <div class="heart heart_left"></div>
  <div class="heart heart_right"></div>
  <div class="like">I love it</div>
</button>

<style>
/* From Uiverse.io by simontheonlyone - Tags: animation, orange, button, heart, unique, text animation, focus, creative, minimal */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 6em;
  height: 6em;
  border: none;
  border-radius: 1em;
  background: #ddd;
  box-shadow: 0 0 20px rgba(0, 0, 0, .4);
  cursor: pointer;
}

.heart {
  width: 2.4em;
  height: 4.3em;
  border: none;
  border-radius: 10em;
  pointer-events: none;
}

.heart_left {
  background-color: rgb(252, 102, 56);
  box-shadow: 0 0 5px rgba(0, 0, 0, .4);
  transform: rotate(-38deg);
  margin-right: -16px;
  z-index: 2;
}

.heart_right {
  background-color: rgb(199, 81, 45);
  box-shadow: 0 0 5px rgba(0, 0, 0, .3);
  transform: rotate(38deg);
  z-index: 1;
}

.container:hover > .heart_left {
  animation: like 450ms ease forwards;
}

@keyframes like {
  0% {
    margin-right: -16px;
  }

  25% {
    transform: rotate(0deg);
    margin-right: -32px;
  }

  50% {
    transform: rotate(-38deg);
    margin-right: -16px;
  }

  75% {
    transform: rotate(0deg);
    margin-right: -32px;
  }

  100% {
    transform: rotate(-38deg);
  }
}

.container:hover > .heart_right {
  animation: loke 450ms ease;
}

@keyframes loke {
  25% {
    transform: rotate(0deg);
    box-shadow: none;
  }

  50% {
    transform: rotate(38deg);
  }

  75% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(38deg);
  }
}

.orange_effect,
.white_effect {
  position: absolute;
  inset: 40.5%;
  border: none;
  border-radius: .2em;
  width: 1em;
  height: 1em;
  scale: 1;
  opacity: 1;
}

.orange_effect {
  background: rgba(255, 102, 55, .3);
  transition: scale 250ms linear, opacity 500ms linear 270ms;
}

.container:hover > .orange_effect {
  scale: 6;
  opacity: 0;
}

.white_effect {
  background: rgba(255, 134, 42, 0.3);
  transition: scale 280ms linear 200ms, opacity 500ms linear 270ms;
}

.container:hover > .white_effect {
  scale: 6;
  opacity: 0;
}

.like {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 10em;
  min-height: 2.2em;
  background: #e5e5e5;
  box-shadow: 0 0 20px rgba(0, 0, 0, .15);
  font-size: 15px;
  letter-spacing: 3px;
  border: none;
  border-radius: .65em;
  pointer-events: none;
  scale: 0;
  opacity: 0;
}

.container:focus .like {
  animation: pop-up 400ms ease forwards;
}

@keyframes pop-up {
  0% {
    top: 0;
  }

  80%, 100% {
    top: -60px;
    scale: 1;
    opacity: 1;
  }
}
</style>


================================================
FILE: Buttons/simontheonlyone_warm-duck-56.html
================================================
<button class="button">
  <span class="X"></span>
  <span class="Y"></span>
  <div class="close">Close</div>
</button>
<style>
/* From Uiverse.io by simontheonlyone - Source: no source link just the close button of Microsoft Windows - Tags: button, animated, click animation, close, minimal */
.button {
  position: relative;
  width: 6em;
  height: 4em;
  border: none;
  background: none;
}

.X {
  content: '';
  position: absolute;
  top: 50%;
  left: 33%;
  width: 2em;
  height: 1.5px;
  background-color: #fff;
  transform: rotate(45deg);
}

.Y {
  content: '';
  position: absolute;
  top: 50%;
  left: 33%;
  width: 2em;
  height: 1.5px;
  background-color: #fff;
  transform: rotate(-45deg);
}

.close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: -40%;
  left: 70%;
  width: 3em;
  height: 1.7em;
  font-size: 16px;
  background-color: rgb(254, 255, 225);
  color: #000;
  border: 1px solid #000;
  pointer-events: none;
  opacity: 0;
}

.button:hover {
  background-color: rgb(210, 0, 0);
}

.button:active {
  background-color: rgb(130, 0, 0);
}

.button:hover > .close {
  animation: close 0.2s forwards 1.25s;
}

@keyframes close {
  100% {
    opacity: 1;
  }
}
</style>


================================================
FILE: Buttons/snguem_good-jellyfish-18.html
================================================
<button class="button">
  <svg
    class="size-6"
    stroke="currentColor"
    stroke-width="2.5"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"
      stroke-linejoin="round"
      stroke-linecap="round"
    ></path>
  </svg>
  <span>Send Message</span>
</button>

<style>
/* From Uiverse.io by snguem  - Tags: icon, animation, button, hover */
.button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 80px;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  position: relative;
  border-radius: 20px;
  border: none;
  box-shadow: 0px 0px 5px;
  transition: width 0.5s 0.2s ease;
}
.button::after {
  position: absolute;
  content: "";
  width: 95%;
  height: 87%;
  border-radius: 40px;
  box-shadow: inset 5px 5px 25px #00000018, 1px 1px 10px #00000013;
  transition: all 0.5s ease;
}
.button:hover:after {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.button svg {
  width: 20px;
  rotate: -45deg;
  transform-origin: top;
  transition: all 0.3s 0.2s ease-out;
}
.button:hover svg {
  transform-origin: center;
  width: 40px;
}
.button:hover span {
  display: none;
  margin: 0 auto;
}

.button:hover {
  width: 100px;
  gap: 0px;
}

</style>
    

================================================
FILE: Buttons/sofiapetushok_wet-catfish-33.html
================================================
<button class="button">Hover</button>

<style>
/* From Uiverse.io by sofiapetushok  - Tags: button */
.button {
  cursor: pointer;
  position: relative;
  background: #1b1b1b;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  overflow: hidden;
  z-index: 1;
  color: #fff;
}

.button::after {
  position: absolute;
  content: "";
  top: 97%;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #14efff, #34ffc5, transparent);
  transition: width 0.3s ease-in-out;
  box-shadow: 0 0 50px 0 #14a1ff64;
  border-radius: 50%;
}
.button:hover::after {
  width: 200%;
}

</style>
    

================================================
FILE: Buttons/sohoning_sharp-impala-97.html
================================================
<button class="button_01">
			<a>Click Me</a>
			<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="tree">
				<path fill="#593B39" d="M592 267.2h-126.4c-9.28 0-16.64 7.36-16.64 16.64v546.56c0 9.28 7.36 16.64 16.64 16.64h126.4c9.28 0 16.64-7.36 16.64-16.64V284.16c0-9.28-7.36-16.96-16.64-16.96z"></path>
				<path fill="#FF944C" d="M921.408 896H140.352a466.4 466.4 0 0 1 390.528-210.88c163.392 0 307.136 83.84 390.528 210.88z"></path>
				<path fill="#96C34A" d="M509.44 271.68H193.6c-17.28 0-31.36-15.68-27.84-32.32 15.36-81.28 87.36-143.68 172.8-143.68 86.496 0 159.136 63.552 173.44 146.144 14.336-82.592 86.976-146.144 173.44-146.144 85.44 0 157.44 62.4 172.8 143.68 3.2 16.96-10.56 32.32-27.84 32.32H509.44z"></path>
				<path fill="#608842" d="M504 291.2l-98.24 98.24-98.24 98.24c-11.84 11.52-31.68 10.56-40.96-3.2-44.8-65.28-38.08-156.48 19.84-214.4 57.92-57.92 148.8-64.64 214.4-19.84 6.72 4.544 10.432 11.712 11.04 19.2a24.48 24.48 0 0 1 10.4-17.28c63.68-43.52 152-36.8 208.32 19.2 56.32 56.32 62.72 144.64 19.2 208.32-8.96 13.12-28.48 14.4-39.68 2.88l-95.36-95.36-95.36-95.36a26.656 26.656 0 0 1-7.648-16.576 27.296 27.296 0 0 1-7.712 15.936z"></path>
				<path fill="#8B5C56" d="M528 351.68a63.68 63.68 0 1 1-127.36 0 63.68 63.68 0 0 1 127.36 0zM655.68 416a64 64 0 1 1-128 0 64 64 0 0 1 128 0z"></path>
				<path fill="#00A6ED" d="M960.64 884.16c-0.32-16.32-16.32-33.92-32.64-34.24-32.64-0.32-46.4-17.92-84.16-17.92-55.04 0-55.04 32-110.08 32s-55.04-32-110.4-32c-55.04 0-55.04 32-110.4 32-55.04 0-55.04-32-110.4-32-55.04 0-55.04 32-110.08 32s-55.04-32-110.4-32c-44.16 0-62.08 20.16-92.48 28.16-15.04 4.16-25.6 17.92-25.6 33.28 0 19.2 15.36 34.56 34.56 34.56H931.2c16 0 29.12-12.8 29.44-28.8 0.32-5.12 0.32-10.24 0-15.04z"></path>
			</svg>

			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 690" class="wave">
				<defs>
					<linearGradient y2="50%" x2="100%" y1="50%" x1="0%" id="gradient">
						<stop stop-color="#8ed1fc" offset="5%"></stop>
						<stop stop-color="#0693e3" offset="95%"></stop>
					</linearGradient>
				</defs>
				<path transform="rotate(-180 720 350)" class="transition-all duration-300 ease-in-out delay-150 path-0" fill-opacity="0.53" fill="url(#gradient)" stroke-width="0" stroke="none" d="M 0,700 C 0,700 0,233 0,233 C 59.66609412572997,227.46856750257643 119.33218825145994,221.93713500515287 180,209 C 240.66781174854006,196.06286499484713 302.33734111989014,175.720027481965 378,194 C 453.66265888010986,212.279972518035 543.3184472689796,269.1827550669872 620,288 C 696.6815527310204,306.8172449330128 760.388869804191,287.54895225008585 837,272 C 913.611130195809,256.45104774991415 1003.1260735142562,244.62143593266921 1061,257 C 1118.8739264857438,269.3785640673308 1145.106836138784,305.96530401923735 1203,306 C 1260.893163861216,306.03469598076265 1350.4465819306079,269.5173479903813 1440,233 C 1440,233 1440,700 1440,700 Z">
				</path>
				<defs>
					<linearGradient y2="50%" x2="100%" y1="50%" x1="0%" id="gradient">
						<stop stop-color="#8ed1fc" offset="5%"></stop>
						<stop stop-color="#0693e3" offset="95%"></stop>
					</linearGradient>
				</defs>
				<path transform="rotate(-180 720 350)" class="transition-all duration-300 ease-in-out delay-150 path-1" fill-opacity="1" fill="url(#gradient)" stroke-width="0" stroke="none" d="M 0,700 C 0,700 0,466 0,466 C 85.70594297492269,460.8663689453796 171.41188594984538,455.7327378907591 229,478 C 286.5881140501546,500.2672621092409 316.0583991755411,549.935417382343 387,551 C 457.9416008244589,552.064582617657 570.3545173479904,504.52559257986945 655,479 C 739.6454826520096,453.47440742013055 796.5235314324974,449.9622122981794 858,449 C 919.4764685675026,448.0377877018206 985.55135692202,449.62555822741325 1045,437 C 1104.44864307798,424.37444177258675 1157.271040879423,397.5355547921676 1222,400 C 1286.728959120577,402.4644452078324 1363.3644795602886,434.23222260391617 1440,466 C 1440,466 1440,700 1440,700 Z">
				</path>
			</svg>
		</button>
<style>
/* From Uiverse.io by sohoning - Tags: button, hover, svg */
.button_01 {
  position: relative;
  font-family: 'Comic Sans MS', cursive;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 70px;
  outline: none;
  border: none;
  background-color: #DEB887;
  border-radius: 1em;
  color: whitesmoke;
  font-size: 25px;
  box-shadow: 0 0 10px #DEB887;
  overflow: hidden;
  cursor: pointer;
}

.button_01 a {
  position: relative;
  z-index: 2;
}

.tree {
  position: absolute;
  display: block;
  right: -20px;
  width: 60%;
  height: 80%;
  bottom: -5px;
  transition-duration: 0.75s;
  z-index: 1;
}

.wave {
  position: absolute;
  display: block;
  top: -100%;
  left: 0%;
  z-index: 1;
  transition-duration: 0.5s;
}

.button_01:hover {
  box-shadow: 0 0 10px #0693e3;
}

.button_01:hover .tree {
  bottom: -100%;
}

.button_01:hover .wave {
  top: 0%;
}
</style>


================================================
FILE: Buttons/sourabhvv_evil-dog-58.html
================================================
<!-- From Uiverse.io by sourabhvv  - Tags: button, download, tailwindbutton -->
<button
  class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    stroke="currentColor"
    fill="none"
    class="w-5 h-5 mr-2 -ml-1"
  >
    <path
      d="M12 4v12m8-8l-8 8-8-8"
      stroke-width="2"
      stroke-linejoin="round"
      stroke-linecap="round"
    ></path>
  </svg>
  Download
</button>


    

================================================
FILE: Buttons/speadfreak_perfect-otter-94.html
================================================
<button class="button">Button</button>

<style>
/* From Uiverse.io by speadfreak  - Tags: button */
.button {
  background:
    linear-gradient(140.14deg, #ec540e 15.05%, #d6361f 114.99%) padding-box,
    linear-gradient(142.51deg, #ff9465 8.65%, #af1905 88.82%) border-box;
  border-radius: 7px;
  border: 2px solid transparent;

  text-shadow: 1px 1px 1px #00000040;
  box-shadow: 8px 8px 20px 0px #45090059;

  padding: 10px 40px;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.3s;
  color: white;
  font-size: 18px;
  font-weight: 500;
}

.button:hover {
  box-shadow: none;
  opacity: 80%;
}

</style>
    

================================================
FILE: Buttons/suda-code_loud-badger-55.html
================================================
<button>
    Button
</button>
<style>
/* From Uiverse.io by suda-code - Tags: blue, button, hover */
button {
  padding: 12.5px 30px;
  border: 0;
  border-radius: 100px;
  background-color: #2ba8fb;
  color: #ffffff;
  font-weight: Bold;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

button:hover {
  background-color: #6fc5ff;
  box-shadow: 0 0 20px #6fc5ff50;
  transform: scale(1.1);
}

button:active {
  background-color: #3d94cf;
  transition: all 0.25s;
  -webkit-transition: all 0.25s;
  box-shadow: none;
  transform: scale(0.98);
}
</style>


================================================
FILE: Buttons/suda-code_unlucky-tiger-39.html
================================================
<button class="button">
  Duolingo Button
</button>
<style>
/* From Uiverse.io by suda-code - Tags: green, button, duolingo */
button {
  align-items: center;
  color: #ffffff;
  font-size: 18px;
  background: #58cc02;
  border: none !important;
  padding: 15px 16px;
  box-shadow: 0 4px 0 #58a700;
  border-radius: 12px;
  cursor: pointer;
}

button:active {
  box-shadow: none;
  transform: translate(0, 4px);
}
</style>


================================================
FILE: Buttons/sujithg444_nasty-mule-87.html
================================================
<button class="gradient-button">⚡ Join now</button>

<style>
/* From Uiverse.io by sujithg444  - Tags: simple, button, hover effect, hoverme, buttons, multicolor */
.gradient-button {
  background: linear-gradient(
    to right,
    #ff5370,
    #ff869a
  ); /* Gradient from pink to orange */
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.gradient-button:hover {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

</style>
    

================================================
FILE: Buttons/sunnyshaikh_blue-chipmunk-76.html
================================================
<button>
  Hover Me!
</button>
<style>
/* From Uiverse.io by sunnyshaikh - Tags: button */
button {
  position: relative;
  background: #FBD148;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  padding: 1rem 3rem;
  font-size: 1em;
  cursor: pointer;
  transition: .25s ease;
}

button::before {
  position: absolute;
  content: '';
  box-sizing: border-box;
  top: 0;
  left: 0;
  transform: translate(-5px, -5px);
  width: 100%;
  height: 100%;
  border: 1px solid rgb(84, 84, 84);
  transition: .25s ease;
}

button:hover {
  transform: translate(-5px, -5px);
}

button:hover::before {
  transform: translate(5px, 5px);
}
</style>


================================================
FILE: Buttons/sunnyshaikh_stale-bear-45.html
================================================
<button>
  Button
</button>
<style>
/* From Uiverse.io by sunnyshaikh - Tags: button */
button {
  padding: 15px 40px;
  background: linear-gradient(145deg, lightblue, blue);
  font-size: 1rem;
  border: 0;
  border-radius: 30px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  box-shadow: inset 0 -2px 10px rgba(0,0,0,.3),
  0 2px 5px rgba(0,0,0,.3);
}
</style>


================================================
FILE: Buttons/tarantino421_fast-goose-21.html
================================================
<div class="box">
  <button class="button">LISTEN</button>
  <div class="music">
    <span class="soundwave" style="--i: 12"></span>
    <span class="soundwave" style="--i: 31"></span>
    <span class="soundwave" style="--i: 25"></span>
    <span class="soundwave" style="--i: 18"></span>
    <span class="soundwave" style="--i: 11"></span>
    <span class="soundwave" style="--i: 23"></span>
    <span class="soundwave" style="--i: 16"></span>
    <span class="soundwave" style="--i: 34"></span>
    <span class="soundwave" style="--i: 19"></span>
    <span class="soundwave" style="--i: 14"></span>
  </div>
</div>
<style>
/* From Uiverse.io by tarantino421 - Tags: button, music, hover button */
.box {
  --clr-shadow__border: #3effff;
  --clr-text: #F6F4EB;
  --clr-soundwave: #83e4ac;
  --clr-music: #30858d;
  --size: 3rem;
  position: relative;
  outline: 1px solid var(--clr-shadow__border);
}

.button {
  background: transparent;
  padding: calc(var(--size) / 3) var(--size);
  font-weight: 600;
  font-size: 1.5rem;
  border: none;
  cursor: pointer;
  color: var(--clr-text);
  letter-spacing: 0.2rem;
  text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),-2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);
}

.music {
  width: 100%;
  height: 100%;
  bottom: 0%;
  transition: 0.5s ease-in-out;
  z-index: -1;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: var(--clr-music);
}

.box:hover .music {
  opacity: 1;
}

.soundwave {
  width: 100%;
  border: 1px solid var(--clr-music);
  border-bottom: none;
  background: linear-gradient(to top, var(--clr-soundwave) 70%, var(--clr-music));
  animation: music-animation calc(0.03s * var(--i)) linear infinite;
  opacity: 1;
}

@keyframes music-animation {
  0%, 100% {
    height: calc(0.06rem * var(--i));
  }

  10% {
    height: calc(0.04rem * var(--i));
  }

  20% {
    height: calc(0.05rem * var(--i));
  }

  30% {
    height: calc(0.01rem * var(--i));
  }

  40% {
    height: calc(0.07rem * var(--i));
  }

  50% {
    height: calc(0.04rem * var(--i));
  }

  60% {
    height: calc(0.08rem * var(--i));
  }

  70% {
    height: calc(0.06rem * var(--i));
  }

  80% {
    height: calc(0.09rem * var(--i));
  }

  90% {
    height: calc(0.05rem * var(--i));
  }
}








</style>


================================================
FILE: Buttons/tarantino421_foolish-walrus-75.html
================================================
<div class="box">
  <button class="button">RAIN</button>
  <div class="rain">
    <span style="--i: 15" class="raindrop"></span>
    <span style="--i: 8" class="raindrop"></span>
    <span style="--i: 19" class="raindrop"></span>
    <span style="--i: 9" class="raindrop"></span>
    <span style="--i: 12" class="raindrop"></span>
    <span style="--i: 14" class="raindrop"></span>
    <span style="--i: 11" class="raindrop"></span>
    <span style="--i: 18" class="raindrop"></span>
    <span style="--i: 16" class="raindrop"></span>
    <span style="--i: 9" class="raindrop"></span>
    <span style="--i: 19" class="raindrop"></span>
    <span style="--i: 17" class="raindrop"></span>
    <span style="--i: 9" class="raindrop"></span>
    <span style="--i: 20" class="raindrop"></span>
  </div>
</div>
<style>
/* From Uiverse.io by tarantino421 - Tags: button, hover button, rain */
.box {
  --clr-shadow__border: #5987a3;
  --clr-text: #F6F4EB;
  --clr-rain: #192333;
  --clr-raindrop: #E9F8F9;
  --size: 3rem;
  position: relative;
  outline: 1px solid var(--clr-shadow__border);
}

.button {
  font-weight: 600;
  font-size: 1.5rem;
  background: transparent;
  padding: calc(var(--size) / 3) var(--size);
  border: none;
  cursor: pointer;
  color: var(--clr-text);
  letter-spacing: 0.2rem;
  text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),
  -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);
}

.rain {
  width: 100%;
  height: 100%;
  bottom: 0%;
  gap: 0.6rem;
  z-index: -1;
  opacity: 0;
  transition: 0.5s ease-in-out;
  overflow: hidden;
  position: absolute;
  display: flex;
  background: var(--clr-rain);
}

.box:hover .rain {
  opacity: 1;
}

.raindrop {
  height: 1.4rem;
  min-width: 0.1rem;
  box-shadow: 60px 100px var(--clr-raindrop),-40px -90px var(--clr-raindrop);
  background-color: var(--clr-raindrop);
  animation: rain-animation calc(0.05s * var(--i)) linear infinite;
  opacity: .3;
}

@keyframes rain-animation {
  0% {
    transform: rotate(20deg) translateY(calc(-100% * var(--i)));
  }

  100% {
    transform: rotate(20deg) translateY(calc(100% * var(--i)));
  }
}








</style>


================================================
FILE: Buttons/tarantino421_light-panther-5.html
================================================
<div class="box">
  <button class="button">MATRIX</button>
  <div class="matrix">
    <span style="--i: 6" class="code-line">
      <p class="code">z</p><p class="code">6</p><p class="code">0</p><p class="code">z</p>
    </span>
    <span style="--i: 8" class="code-line">
      <p class="code">6</p><p class="code">9</p><p class="code">p</p>
    </span>
    <span style="--i: 5" class="code-line">
      <p class="code">u</p><p class="code">3</p><p class="code">g</p>
    </span>
    <span style="--i: 12" class="code-line">
      <p class="code">a</p><p class="code">t</p><p class="code">7</p><p class="code">2</p><p class="code">g</p><p class="code">h</p><p class="code">0</p><p class="code">k</p>
    </span>
    <span style="--i: 9" class="code-line">
      <p class="code">6</p><p class="code">3</p><p class="code">0</p>
    </span>
    <span style="--i: 6" class="code-line">
      <p class="code">7</p><p class="code">s</p><p class="code">b</p><p class="code">q</p>
    </span>
    <span style="--i: 8" class="code-line">
      <p class="code">m</p><p class="code">2</p><p class="code">5</p><p class="code">4</p><p class="code">l</p><p class="code">1</p>
    </span>
    <span style="--i: 12" class="code-line">
      <p class="code">9</p><p class="code">1</p><p class="code">s</p><p class="code">2</p><p class="code">t</p><p class="code">7</p><p class="code">4</p><p class="code">h</p><p class="code">0</p>
    </span>
    <span style="--i: 16" class="code-line">
      <p class="code">a</p><p class="code">b</p><p class="code">c</p><p class="code">d</p><p class="code">e</p>
    </span>
    <span style="--i: 9" class="code-line">
      <p class="code">f</p><p class="code">g</p><p class="code">h</p><p class="code">i</p><p class="code">j</p>
    </span>
    <span style="--i: 6" class="code-line">
      <p class="code">k</p><p class="code">l</p><p class="code">m</p><p class="code">n</p>
    </span>
    <span style="--i: 19" class="code-line">
      <p class="code">u</p><p class="code">v</p><p class="code">w</p><p class="code">v</p><p class="code">2</p><p class="code">3</p>
    </span>
    <span style="--i: 7" class="code-line">
      <p class="code">p</p><p class="code">q</p><p class="code">r</p><p class="code">s</p><p class="code">t</p>
    </span>
    <span style="--i: 12" class="code-line">
      <p class="code">1</p><p class="code">2</p><p class="code">6</p><p class="code">x</p><p class="code">5</p><p class="code">h</p>
    </span>
    <span style="--i: 9" class="code-line">
      <p class="code">6</p><p class="code">7</p><p class="code">f</p><p class="code">a</p><p class="code">6</p><p class="code">1</p>
    </span>
    <span style="--i: 17" class="code-line">
      <p class="code">j</p><p class="code">f</p><p class="code">0</p><p class="code">x</p><p class="code">6</p><p class="code">0</p>
    </span>
    <span style="--i: 10" class="code-line">
      <p class="code">0</p><p class="code">k</p><p class="code">%</p><p class="code">f</p><p class="code">6</p><p class="code">%</p>
    </span>
  </div>
</div>
<style>
/* From Uiverse.io by tarantino421 - Tags: button, hover button, matrix */
.box {
  --clr-shadow__border: #A8DF8E;
  --clr-text: #F6F4EB;
  --clr-code-line: #43ff85;
  --clr-matrix: #020204;
  --size: 3rem;
  position: relative;
  outline: 1px solid var(--clr-shadow__border);
}

.button {
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
  color: var(--clr-text);
  padding: calc(var(--size) / 3) var(--size);
  background: transparent;
  border: none;
  cursor: pointer;
  text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),
  -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);
}

.matrix {
  width: 100%;
  height: 100%;
  bottom: 0%;
  transition: 0.5s ease-in-out;
  z-index: -1;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: absolute;
  background: var(--clr-matrix);
}

.box:hover .matrix {
  opacity: 1;
}

.code-line {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  transition: 0.5s;
  min-height: 0.6rem;
  min-width: 0.6rem;
  animation: matrix-animation calc(.2s * var(--i)) linear infinite;
}

.code {
  text-shadow: 20px 100px var(--clr-code-line),-20px -50px var(--clr-code-line);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--clr-code-line);
  opacity: 0.5;
}

.code:first-child {
  color: var(--clr-text);
  opacity: 1;
}

@keyframes matrix-animation {
  0% {
    transform: translateY(calc(-50% * var(--i)));
  }

  100% {
    -webkit-transform: translateY(calc(50% * var(--i)));
    transform: translateY(calc(50% * var(--i)));
  }
}








</style>


================================================
FILE: Buttons/tarantino421_nasty-wolverine-40.html
================================================
<div class="box">
  <button class="button">SPACE</button>
  <div class="space">
    <span style="--i: 31" class="star"></span>
    <span style="--i: 12" class="star"></span>
    <span style="--i: 57" class="star"></span>
    <span style="--i: 93" class="star"></span>
    <span style="--i: 23" class="star"></span>
    <span style="--i: 70" class="star"></span>
    <span style="--i: 6" class="star"></span>
  </div>
</div>
<style>
/* From Uiverse.io by tarantino421 - Tags: button, space, hover button */
.box {
  --clr-shadow__border: #d9a1ff;
  --clr-text: #F6F4EB;
  --clr-space: #120e1e;
  --clr-space-gr: #271950;
  --clr-star: #E9F8F9;
  --size: 3rem;
  position: relative;
  outline: 1px solid var(--clr-shadow__border);
}

.button {
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
  background: transparent;
  padding: calc(var(--size) / 3) var(--size);
  border: none;
  cursor: pointer;
  color: var(--clr-text);
  text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),
  -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);
}

.space {
  width: 100%;
  height: 100%;
  bottom: 0%;
  gap: 1.5rem;
  transition: 0.5s ease-in-out;
  z-index: -1;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  display: flex;
  background: linear-gradient( 160deg, var(--clr-space), var(--clr-space-gr));
}

.box:hover .space {
  opacity: 1;
}

.star {
  height: 4rem;
  width: 0.3rem;
  transition: 0.5s;
  border-radius: 50px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  position: relative;
  background-color: var(--clr-star);
  animation: space-animation calc(0.1s * var(--i)) linear infinite;
}

@keyframes space-animation {
  0% {
    transform: rotate(-30deg) translateY(calc(-52% * var(--i)));
  }

  100% {
    transform: rotate(-30deg) translateY(calc(52% * var(--i)));
  }
}








</style>


================================================
FILE: Buttons/tarantino421_slimy-newt-73.html
================================================
<div class="box">
  <button class="button">SNOW</button>
  <div class="snowfall">
    <span style="--i: 12" class="snowflake"></span>
    <span style="--i: 31" class="snowflake"></span>
    <span style="--i: 18" class="snowflake"></span>
    <span style="--i: 9" class="snowflake"></span>
    <span style="--i: 41" class="snowflake"></span>
    <span style="--i: 22" class="snowflake"></span>
    <span style="--i: 16" class="snowflake"></span>
    <span style="--i: 35" class="snowflake"></span>
    <span style="--i: 9" class="snowflake"></span>
    <span style="--i: 14" class="snowflake"></span>
    <span style="--i: 19" class="snowflake"></span>
    <span style="--i: 6" class="snowflake"></span>
    <span style="--i: 53" class="snowflake"></span>
    <span style="--i: 26" class="snowflake"></span>
    <span style="--i: 34" class="snowflake"></span>
    <span style="--i: 18" class="snowflake"></span>
    <span style="--i: 8" class="snowflake"></span>
  </div>
</div>
<style>
/* From Uiverse.io by tarantino421 - Tags: button, hover button, snow */
.box {
  --clr-shadow__border: #0096fa;
  --clr-text: #F6F4EB;
  --clr-snowflake: #F6F4EB;
  --clr-snowfall: #91C8E4;
  --size: 3rem;
  position: relative;
  outline: 1px solid var(--clr-shadow__border);
}

.button {
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
  padding: calc(var(--size) / 3) var(--size);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--clr-text);
  text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),
  -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);
}

.snowfall {
  width: 100%;
  height: 100%;
  bottom: 0%;
  gap: 0.3rem;
  transition: 0.5s ease-in-out;
  z-index: -1;
  opacity: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: linear-gradient( to bottom, var(--clr-snowfall), #ffffff);
}

.box:hover .snowfall {
  opacity: 1;
}

.snowflake {
  height: 0.3rem;
  width: 0.3rem;
  box-shadow: -30px -50px var(--clr-snowflake);
  background-color: var(--clr-snowflake);
  animation: snowfall-animation calc(0.1s * var(--i)) linear infinite;
  opacity: 1;
}

@keyframes snowfall-animation {
  0% {
    transform: translateY(calc(-103% * var(--i)));
  }

  100% {
    transform: translateY(calc(100% * var(--i)));
    opacity: 0;
  }
}








</style>


================================================
FILE: Buttons/tarantino421_swift-zebra-86.html
================================================
<div class="box">
  <button class="button">FALL</button>
  <div class="falling-leaves">
    <span class="leaf" style="--i: 13; --hue:20"></span>
    <span class="leaf" style="--i: 16; --hue:10"></span>
    <span class="leaf" style="--i: 17; --hue:0"></span>
    <span class="leaf" style="--i: 21; --hue:10"></span>
    <span class="leaf" style="--i: 13; --hue:90"></span>
    <span class="leaf" style="--i: 11; --hue:70"></span>
    <span class="leaf" style="--i: 14; --hue:40"></span>
    <span class="leaf" style="--i: 17; --hue:60"></span>
    <span class="leaf" style="--i: 19; --hue:0"></span>
    <span class="leaf" style="--i: 26; --hue:90"></span>
    <span class="leaf" style="--i: 17; --hue:60"></span>
    <span class="leaf" style="--i: 20; --hue:10"></span>
  </div>
</div>
<style>
/* From Uiverse.io by tarantino421 - Tags: button, hover button, fall */
.box {
  --clr-shadow__border: #ef7305;
  --clr-text: #F6F4EB;
  --clr-falling-leaves: #441a12;
  --size: 3rem;
  position: relative;
  outline: 1px solid var(--clr-shadow__border);
}

.button {
  background: transparent;
  padding: calc(var(--size) / 3) var(--size);
  font-weight: 600;
  font-size: 1.5rem;
  border: none;
  cursor: pointer;
  color: var(--clr-text);
  letter-spacing: 0.2rem;
  text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),
    -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);
}

.falling-leaves {
  width: 100%;
  height: 100%;
  bottom: 0%;
  transition: 0.5s ease-in-out;
  z-index: -1;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  display: flex;
  background: var(--clr-falling-leaves);
}

.box:hover .falling-leaves {
  opacity: 1;
}

.leaf {
  height: 1rem;
  width: 1rem;
  clip-path: polygon(
    45% 0%,
    45% 10%,
    15% 30%,
    35% 60%,
    20% 80%,
    45% 100%,
    70% 80%,
    55% 60%,
    85% 30%,
    55% 10%,
    55% 0%
  );
  background-color: hsl(var(--hue), 70%, 50%);
  animation: falling-leaves-animation linear infinite;
  animation-duration: calc(0.5s * var(--i));
}

@keyframes falling-leaves-animation {
  0% {
    transform: rotate(-10deg) translateY(calc(-51% * var(--i)));
  }

  50% {
    transform: rotate(-40deg) translateY(calc(0% * var(--i)));
  }

  100% {
    transform: rotate(150deg) translateY(calc(100% * var(--i)));
  }
}








</style>


================================================
FILE: Buttons/themarcBlanchard_silent-cobra-22.html
================================================
<button type="button">
  Hover
</button>
<style>
/* From Uiverse.io by themarcBlanchard - Tags: button */
button {
  padding: .5rem 2rem;
  border-radius: 5px;
  font-weight: 600;
  border: 1px solid black;
}

button:hover {
  background-color: #1a5cff;
  color: white;
  transform: scale(1.1);
  font-weight: 700;
  -webkit-box-shadow: 7px 7px 23px -12px rgba(26,91,255,1);
  -moz-box-shadow: 7px 7px 23px -12px rgba(26,91,255,1);
  box-shadow: 7px 7px 23px -12px rgba(26,91,255,1);
  border: none;
}

button:active {
  background-color: #1752e5;
}
</style>


================================================
FILE: Buttons/themrsami_fast-moth-57.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: purple, button, hover, active, tailwind, tailwindcss -->
<button
  class="inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-[#7747FF] hover:bg-white hover:text-[#7747FF] focus:text-[#7747FF] focus:bg-gray-200 text-gray-50 font-bold leading-loose transition duration-200"
>
  Submit
</button>


    

================================================
FILE: Buttons/themrsami_helpless-bulldog-100.html
================================================
<!-- From Uiverse.io by themrsami - Tags: button, animated, appearance -->
<button class="bg-pink-500 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded-full animate-pulse">
  Pulse Animation
</button>




================================================
FILE: Buttons/themrsami_light-moth-79.html
================================================
<!-- From Uiverse.io by themrsami - Tags: button, 3d button, 3d cool effect, 3d hover -->
<button class="relative overflow-hidden bg-gradient-to-r from-green-400 to-blue-500 text-white py-4 px-8 font-semibold rounded-3xl shadow-xl transform transition-all duration-500 hover:scale-110 hover:rotate-3 hover:skew-x-12">
  <span class="absolute top-0 left-0 w-full h-full bg-blue-300"></span>
  <span class="relative z-10">Hover Me</span>
</button>




================================================
FILE: Buttons/themrsami_sharp-dragonfly-36.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: loading, button, animated, tailwindcss -->
<button
  class="inline-block rounded-full bg-green-500 text-neutral-50 shadow-[0_4px_9px_-4px_rgba(51,45,45,0.7)] hover:bg-green-600 hover:shadow-[0_8px_9px_-4px_rgba(51,45,45,0.2),0_4px_18px_0_rgba(51,45,45,0.1)] focus:bg-green-800 focus:shadow-[0_8px_9px_-4px_rgba(51,45,45,0.2),0_4px_18px_0_rgba(51,45,45,0.1)] active:bg-green-700 active:shadow-[0_8px_9px_-4px_rgba(51,45,45,0.2),0_4px_18px_0_rgba(51,45,45,0.1)] px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out focus:outline-none focus:ring-0"
  type="button"
>
  <div
    role="status"
    class="inline-block h-3 w-3 mr-2 animate-spin rounded-full border-2 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
  >
    <span
      class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
    >
      Loading...
    </span>
  </div>
  Loading
</button>


    

================================================
FILE: Buttons/themrsami_tiny-chicken-60.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: simple, button, hover, rounded, dark, tailwindcss -->
<button
  class="cursor-pointer flex justify-between bg-gray-800 px-3 py-2 rounded-full text-white tracking-wider shadow-xl hover:bg-gray-900 hover:scale-105 duration-500 hover:ring-1 font-mono w-[150px]"
>
  Resume
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    stroke-width="2"
    stroke="currentColor"
    class="w-5 h-5 animate-bounce"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
    ></path>
  </svg>
</button>


    

================================================
FILE: Buttons/themrsami_tough-fox-32.html
================================================
<!-- From Uiverse.io by themrsami - Tags: simple, button, calculator, tailwind, tailwindbutton, tailwindcss, themrsami -->
<button
  class="bg-purple-500 text-white px-4 py-2 rounded-full transition duration-200 ease-in-out hover:bg-purple-700 active:bg-purple-900 focus:outline-none"
>
  Click me
</button>




================================================
FILE: Buttons/themrsami_weak-deer-87.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: button, animated, tailwind, tailwindbutton, tailwindcss -->
<button
  class="inline-block rounded-full border-2 border-rose-500 text-rose-500 hover:border-rose-600 hover:bg-rose-400 hover:bg-opacity-10 hover:text-rose-600 focus:border-rose-700 focus:text-rose-700 active:border-rose-800 active:text-rose-800 dark:border-rose-300 dark:text-rose-300 dark:hover:hover:bg-rose-300 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal transition duration-150 ease-in-out focus:outline-none focus:ring-0"
  type="button"
>
  <div
    role="status"
    class="inline-block h-3 w-3 mr-2 animate-spin rounded-full border-2 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
  >
    <span
      class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
    >
      Loading...
    </span>
  </div>
  Loading
</button>


    

================================================
FILE: Buttons/tranmanhduy0810_honest-goat-14.html
================================================
<button class="send-button">Send Message</button>

<style>
/* From Uiverse.io by tranmanhduy0810  - Tags: simple, button, code */
.send-button {
  background-color: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.send-button:hover {
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.send-button img {
  margin-right: 8px;
}

</style>
    

================================================
FILE: Buttons/umairmanzoor1143_cuddly-jellyfish-95.html
================================================
<button class="button">
  <span class="span">Button</span>
</button>

<style>
/* From Uiverse.io by umairmanzoor1143  - Tags: loading, button, on, off, glow, circle, rotate, click */
.button {
  background: #fff;
  position: relative;
  border: none;
  padding: 10px 20px;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.5s;
}
.span {
  display: inline-block;
}
.button:hover {
  font-size: 20px;
  transform: skew(-5deg);
  padding-right: 30px;
}
.button::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 70%;
  width: 15px;
  height: 15px;
  margin-top: -8px;
  margin-left: -5px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #000;
  opacity: 0;
  animation: spinner 0.6s linear infinite;
  transition: 0.5s;
}
.button:hover::before {
  opacity: 1;
  left: 85%;
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

</style>
    

================================================
FILE: Buttons/vikas7754_calm-wombat-35.html
================================================
<button class="box">
  Button
</button>
<style>
/* From Uiverse.io by vikas7754 - Tags: 3d, button, 3d button */
.box {
  background: linear-gradient(to right, gold, darkorange);
  color: white;
  --width: 200px;
  --height: calc(var(--width) / 3);
  width: var(--width);
  height: var(--height);
  text-align: center;
  line-height: var(--height);
  font-size: calc(var(--height) / 2.5);
  font-family: sans-serif;
  letter-spacing: 0.2em;
  border: 1px solid darkgoldenrod;
  border-radius: 2em;
  transform: perspective(500px) rotateY(-15deg);
  text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 0 0 5px rgba(76, 255, 97, 0.8);
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.box:hover {
  transform: perspective(500px) rotateY(15deg);
  text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: -2px 0 0 5px rgba(35, 255, 218, 0.8);
}

.box::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, white, transparent);
  left: -100%;
  transition: 0.5s;
}

.box:hover::before {
  left: 100%;
}
</style>


================================================
FILE: Buttons/vikas7754_honest-falcon-30.html
================================================
<div class="container">
  <button class="btn cmd">
    <svg
      fill="#fff"
      version="1.1"
      id="Capa_1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="20px"
      height="20px"
      viewBox="0 0 80 80"
      xml:space="preserve"
    >
      <g>
        <path
          d="M64,48L64,48h-8V32h8c8.836,0,16-7.164,16-16S72.836,0,64,0c-8.837,0-16,7.164-16,16v8H32v-8c0-8.836-7.164-16-16-16
		S0,7.164,0,16s7.164,16,16,16h8v16h-8l0,0l0,0C7.164,48,0,55.164,0,64s7.164,16,16,16c8.837,0,16-7.164,16-16l0,0v-8h16v7.98
		c0,0.008-0.001,0.014-0.001,0.02c0,8.836,7.164,16,16,16s16-7.164,16-16S72.836,48.002,64,48z M64,8c4.418,0,8,3.582,8,8
		s-3.582,8-8,8h-8v-8C56,11.582,59.582,8,64,8z M8,16c0-4.418,3.582-8,8-8s8,3.582,8,8v8h-8C11.582,24,8,20.417,8,16z M16,72
		c-4.418,0-8-3.582-8-8s3.582-8,8-8l0,0h8v8C24,68.418,20.418,72,16,72z M32,48V32h16v16H32z M64,72c-4.418,0-8-3.582-8-8l0,0v-8
		h7.999c4.418,0,8,3.582,8,8S68.418,72,64,72z"
        ></path>
      </g>
    </svg>
    command
  </button>
  <a href="https://freecodez.com/post/7jypdpp" class="btn c">C</a>
</div>

<style>
/* From Uiverse.io by vikas7754  - Tags: button, 3d button, mac button */
.container {
  background: #ff6f6f;
  border-radius: 15px;
  padding: 15px;
  display: flex;
  gap: 15px;
  box-shadow: 3px 5px 10px #ff7a7a, inset 3px 0 0 #ff5751d6,
    inset -3px 0 0 #ff5751d6, inset 0 3px 0 #ffffff23, inset 0 -3px 0 #00000023;
}
.btn {
  text-decoration: none;
  border: none;
  outline: none;
  background: #ff6f6f;
  padding: 10px;
  box-shadow: 0 0 5px #0000005a, 2px 2px 3px #00000078,
    inset 1px 1px 2px #ffffff9d;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn:focus {
  animation: 0.3s clicked linear;
}
.cmd {
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.c {
  width: 75px;
  font-size: 1.5rem;
}
@keyframes clicked {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
    box-shadow: 0 0 5px #00000067, inset 0 0 3px #ffffff78;
  }
  100% {
    transform: scale(1);
  }
}

</style>
    

================================================
FILE: Buttons/vikiWayne_slimy-horse-19.html
================================================
<button class="button">
    Hover me
</button>
<style>
/* From Uiverse.io by vikiWayne - Tags: button */
.button {
  padding: 1em 2em;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #2c9caf;
  transition: all 1000ms;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  outline: 2px solid #2c9caf;
}

button:hover {
  color: #ffffff;
  transform: scale(1.1);
  outline: 2px solid #70bdca;
  box-shadow: 4px 5px 17px -4px #268391;
}

button::before {
  content: "";
  position: absolute;
  left: -50px;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #2c9caf;
  transform: skewX(45deg);
  z-index: -1;
  transition: width 1000ms;
}

button:hover::before {
  width: 250%;
}

</style>


================================================
FILE: Buttons/vikramsinghnegi_massive-panda-81.html
================================================
<button class="youtube-button">
  <div class="svg-wrapper-1">
    <div class="svg-wrapper">
      <svg
        height="24"
        width="24"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M0 0h24v24H0z" fill="none"></path>
        <path
          d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
          fill="currentColor"
        ></path>
      </svg>
    </div>
  </div>
  <span>Watch on YouTube</span>
</button>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: animation, button, hover me */
button.youtube-button {
  font-family: inherit;
  font-size: 18px;
  background: linear-gradient(to bottom, #ff0000 0%, #ff5050 100%);
  color: white;
  padding: 0.8em 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 25px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

button.youtube-button:hover {
  transform: translateY(-3px);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

button.youtube-button:active {
  transform: scale(0.95);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

button.youtube-button span {
  display: block;
  margin-left: 0.4em;
  transition: all 0.3s;
}

button.youtube-button svg {
  width: 18px;
  height: 18px;
  fill: white;
  transition: all 0.3s;
}

button.youtube-button .svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  margin-right: 0.5em;
  transition: all 0.3s;
}

button.youtube-button:hover .svg-wrapper {
  background-color: rgba(255, 255, 255, 0.5);
}

button.youtube-button:hover svg {
  transform: rotate(45deg);
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_afraid-falcon-17.html
================================================
<button class="button">
  <svg class="svgIcon" viewBox="0 0 384 512">
    <path
      d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
    ></path>
  </svg>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, black, button, arrow, hover effect, back to top, scroll to top */
.button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(20, 20, 20);
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
  cursor: pointer;
  transition-duration: 0.3s;
  overflow: hidden;
  position: relative;
}

.svgIcon {
  width: 12px;
  transition-duration: 0.3s;
}

.svgIcon path {
  fill: white;
}

.button:hover {
  width: 140px;
  border-radius: 50px;
  transition-duration: 0.3s;
  background-color: rgb(181, 160, 255);
  align-items: center;
}

.button:hover .svgIcon {
  /* width: 20px; */
  transition-duration: 0.3s;
  transform: translateY(-200%);
}

.button::before {
  position: absolute;
  bottom: -20px;
  content: "Back to Top";
  color: white;
  /* transition-duration: .3s; */
  font-size: 0px;
}

.button:hover::before {
  font-size: 13px;
  opacity: 1;
  bottom: unset;
  /* transform: translateY(-30px); */
  transition-duration: 0.3s;
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_afraid-wombat-15.html
================================================
<button class="fullscreen-btn">
  <svg viewBox="0 0 448 512" height="1em" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"
    ></path>
  </svg>
  <span class="tooltip">Fullscreen</span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: tooltip, button, hover effect, fullscreen, full window */
.fullscreen-btn {
  width: 25px;
  height: 25px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.fullscreen-btn svg {
  height: 100%;
}
.fullscreen-btn:hover {
  width: 30px;
  height: 30px;
  overflow: visible;
}
.tooltip {
  position: absolute;
  top: -40px;
  background-color: rgba(0, 0, 0, 0.753);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.8em;
  transition: all 0.3s;
  opacity: 0;
}
.fullscreen-btn:hover .tooltip {
  transform: translateY(2.5px);
  opacity: 1;
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_angry-dragonfly-89.html
================================================
<button class="Btn">
  
  <div class="sign">+</div>
  
  <div class="text">Create</div>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: black, button, hover effect, click effect, create */
.Btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition-duration: .3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background-color: black;
}

/* plus sign */
.sign {
  width: 100%;
  font-size: 2em;
  color: white;
  transition-duration: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* text */
.text {
  position: absolute;
  right: 0%;
  width: 0%;
  opacity: 0;
  color: white;
  font-size: 1.2em;
  font-weight: 500;
  transition-duration: .3s;
}
/* hover effect on button width */
.Btn:hover {
  width: 125px;
  border-radius: 0px;
  transition-duration: .3s;
}

.Btn:hover .sign {
  width: 30%;
  transition-duration: .3s;
  padding-left: 20px;
}
/* hover effect button's text */
.Btn:hover .text {
  opacity: 1;
  width: 70%;
  transition-duration: .3s;
  padding-right: 20px;
}
/* button click effect*/
.Btn:active {
  transform: translate(2px ,2px);
}
</style>


================================================
FILE: Buttons/vinodjangid07_average-pig-54.html
================================================
<button class="button">
  <span class="bracket left">❴</span>
  <span class="text">Code</span>
  <span class="bracket right">❵</span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, black, button, code, hover effect */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 45px;
  width: 45px;
  border: none;
  border-radius: 10px;
  background-color: black;
  cursor: pointer;
  transition: all 0.3s;
  overflow: hidden;
}
.bracket {
  font-size: 18px;
  transition: all 0.3s;
  color: rgb(182, 104, 255);
}
.text {
  font-size: 15px;
  width: 0;
  transform: scale(0);
  transition: all 0.3s;
  color: white;
}
.button:hover {
  width: 100px;
}
.button:hover .text {
  transform: scale(1);
  width: 40px;
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_average-zebra-23.html
================================================
<button class="enter-button">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 40 27"
    class="arrow"
  >
    <line stroke-width="2" stroke="white" y2="14" x2="40" y1="14" x1="1"></line>
    <line
      stroke-width="2"
      stroke="white"
      y2="1.41537"
      x2="10.4324"
      y1="14.2433"
      x1="1.18869"
    ></line>
    <line
      stroke-width="2"
      stroke="white"
      y2="13.6007"
      x2="1.20055"
      y1="26.2411"
      x1="10.699"
    ></line>
    <line
      stroke="white"
      y2="14.3133"
      x2="1.07325"
      y1="13.6334"
      x1="0.33996"
    ></line>
    <line stroke-width="2" stroke="white" y2="13" x2="39" y1="8" x1="39"></line>
  </svg>
  ENTER
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: black, button, active, hover effect, enter */
.enter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  gap: 25px;
  font-size: 0.7em;
  letter-spacing: 2px;
  color: white;
  cursor: pointer;
  background: linear-gradient(to right, rgb(59, 59, 59), rgb(34, 34, 34));
  position: relative;
  border-radius: 8px;
  border: 1px solid rgb(65, 65, 65);
  transition-duration: 0.3s;
}

.arrow {
  height: 20px;
}
.enter-button:hover {
  transition-duration: 0.3s;
  box-shadow: 0px 0px 2px rgb(185, 185, 185), 0px 0px 10px rgb(97, 97, 97);
}
.enter-button:active {
  transform: scale(0.95);
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_brave-goose-29.html
================================================
<button class="CartBtn">
  <span class="IconContainer"> 
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512" fill="rgb(17, 17, 17)" class="cart"><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"></path></svg>
  </span>
  <p class="text">Add to Cart</p>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, add, hover effect, add to cart */
.CartBtn {
  width: 140px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background-color: rgb(255, 208, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition-duration: .5s;
  overflow: hidden;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.103);
  position: relative;
}

.IconContainer {
  position: absolute;
  left: -50px;
  width: 30px;
  height: 30px;
  background-color: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
  transition-duration: .5s;
}

.icon {
  border-radius: 1px;
}

.text {
  height: 100%;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(17, 17, 17);
  z-index: 1;
  transition-duration: .5s;
  font-size: 1.04em;
  font-weight: 600;
}

.CartBtn:hover .IconContainer {
  transform: translateX(58px);
  border-radius: 40px;
  transition-duration: .5s;
}

.CartBtn:hover .text {
  transform: translate(10px,0px);
  transition-duration: .5s;
}

.CartBtn:active {
  transform: scale(0.95);
  transition-duration: .5s;
}
</style>


================================================
FILE: Buttons/vinodjangid07_brave-ladybug-0.html
================================================
<button class="Btn">
  <span class="text">Copy</span>
  <span class="svgIcon">
    <svg fill="white" viewBox="0 0 384 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M280 64h40c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128C0 92.7 28.7 64 64 64h40 9.6C121 27.5 153.3 0 192 0s71 27.5 78.4 64H280zM64 112c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H304v24c0 13.3-10.7 24-24 24H192 104c-13.3 0-24-10.7-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"></path></svg>
  </span>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, copy, hover effect */
.Btn {
  width: 100px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.164);
  cursor: pointer;
}

.text {
  width: 65%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: rgb(2, 153, 153);
}

.svgIcon {
  width: 35%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: teal;
}

.Btn:hover .text {
  background-color: rgb(0, 133, 133);
}

.Btn:hover .svgIcon {
  background-color: rgb(0, 105, 105);
}
</style>


================================================
FILE: Buttons/vinodjangid07_brave-treefrog-18.html
================================================
<button class="Btn">
  <svg viewBox="0 0 576 512" height="1em" class="logoIcon"><path d="M309 106c11.4-7 19-19.7 19-34c0-22.1-17.9-40-40-40s-40 17.9-40 40c0 14.4 7.6 27 19 34L209.7 220.6c-9.1 18.2-32.7 23.4-48.6 10.7L72 160c5-6.7 8-15 8-24c0-22.1-17.9-40-40-40S0 113.9 0 136s17.9 40 40 40c.2 0 .5 0 .7 0L86.4 427.4c5.5 30.4 32 52.6 63 52.6H426.6c30.9 0 57.4-22.1 63-52.6L535.3 176c.2 0 .5 0 .7 0c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40c0 9 3 17.3 8 24l-89.1 71.3c-15.9 12.7-39.5 7.5-48.6-10.7L309 106z"></path></svg>
  GO PREMIUM
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: gradient, button, hover effect, gold, golden effect , subscribe, premium */
.Btn {
  width: 200px;
  height: 40px;
  border: none;
  border-radius: 40px;
  background: linear-gradient(to right,#bf953f,#fcf6ba,#b38728,#fbf5b7,#aa771c);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.8em;
  color: rgb(121, 103, 3);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition-duration: 3s;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.144);
  background-size: 200% 200%;
}

.logoIcon path {
  fill: rgb(121, 103, 3);
}

.Btn:hover {
  transform: scale(0.95);
  transition-duration: 3s;
  animation: gradient 5s ease infinite;
  background-position: right;
}

</style>


================================================
FILE: Buttons/vinodjangid07_breezy-liger-85.html
================================================
<button class="button">Button</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, gradient, button, hover, hover effect */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100px;
  height: 40px;
  font-size: 15px;
  font-weight: 600;
  color: white;
  border: none;
  background-size: 200% 200%;
  background-color: #99fff7;
  background-image: radial-gradient(
      at 65% 89%,
      hsla(249, 100%, 62%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 68% 76%, hsla(334, 100%, 74%, 1) 0px, transparent 50%),
    radial-gradient(at 52% 39%, hsla(34, 100%, 71%, 1) 0px, transparent 50%),
    radial-gradient(at 12% 37%, hsla(282, 100%, 66%, 1) 0px, transparent 50%),
    radial-gradient(at 34% 9%, hsla(201, 100%, 63%, 1) 0px, transparent 50%),
    radial-gradient(at 89% 18%, hsla(193, 100%, 74%, 1) 0px, transparent 50%),
    radial-gradient(at 36% 37%, hsla(251, 100%, 65%, 1) 0px, transparent 50%);
  background-position: left;
  cursor: pointer;
  border-radius: 10px;
  transition: all 3s;
}

.button:hover {
  background-position: right;
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_brown-turtle-51.html
================================================
<button class="button">
 Shop now
 <svg class="cartIcon" viewBox="0 0 576 512"><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"></path></svg>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: purple, button, click effect, shop now */
.button {
  width: 180px;
  height: 40px;
  background-image: linear-gradient(rgb(214, 202, 254), rgb(158, 129, 254));
  border: none;
  border-radius: 50px;
  color: rgb(255, 255, 255);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  box-shadow: 1px 3px 0px rgb(139, 113, 255);
  transition-duration: .3s;
}

.cartIcon {
  width: 14px;
  height: fit-content;
}

.cartIcon path {
  fill: white;
}

.button:active {
  transform: translate(2px ,0px);
  box-shadow: 0px 1px 0px rgb(139, 113, 255);
  padding-bottom: 1px;
}

</style>


================================================
FILE: Buttons/vinodjangid07_calm-bobcat-18.html
================================================
<button class="button">
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: facebook, button, hover effect */
.button {
  width: 45px;
  height: 45px;
  background-color: #3b5998;
  border: none;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.185),
 0px 3px 3px rgba(255, 255, 255, 0.178) inset,
 0px -3px 3px rgba(0, 0, 0, 0.281) inset;
  transition: all .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding-bottom: 3px;
}

.button::before {
  background-color: transparent;
  content: "f";
  font-size: 1.6em;
  font-weight: 700;
  color: white;
  z-index: 5;
  transition: all .3s;
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.button::after {
  content: "acebook";
  background-color: transparent;
  font-size: 0;
  opacity: 0;
  font-weight: 700;
  color: white;
  z-index: 5;
  transition: all .3s;
  transform: translateX(60px);
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.button:hover {
  width: 160px;
  border-radius: 30px;
}

.button:hover::after {
  opacity: 1;
  font-size: 1.6em;
  transform: translateX(0px);
}

.button:hover .shine {
  transform: translate(-70px ,10px);
}
</style>


================================================
FILE: Buttons/vinodjangid07_calm-cougar-24.html
================================================
<button class="Btn">
  Join now
</button>

<style>
/* From Uiverse.io by vinodjangid07 - Tags: gradient, button, hover */
.Btn {
  width: 150px;
  height: 50px;
  border: none;
  color: white;
  font-weight: 600;
  font-size: 13.5px;
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  cursor: pointer;
  background: linear-gradient(-45deg, #6bc5f8, #cf59e6, #6bc5f8, #cf59e6);
  background-size: 1000% 1000%;
  animation: gradient 5s ease infinite;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.247);
  transition-duration: .1s;
}
/* Button's gradient animation */
@keyframes gradient {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}
/* Effect on Hover*/
.Btn::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 100%;
  left: -70px;
  top: 0;
  background-color: rgba(214, 199, 255, 0.329);
  filter: blur(10px);
  transition-duration: .3s;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.Btn:hover::before {
  transform: translateX(250px);
  transition-duration: .3s;
}
/* Effect on click */
.Btn:active {
  transform: translate(2px,2px);
  transition-duration: .1s;
}
</style>


================================================
FILE: Buttons/vinodjangid07_chilly-kangaroo-37.html
================================================
<button class="bookmarkBtn">
  <span class="IconContainer"> 
   <svg fill="white" viewBox="0 0 512 512" height="1em"><path d="M123.6 391.3c12.9-9.4 29.6-11.8 44.6-6.4c26.5 9.6 56.2 15.1 87.8 15.1c124.7 0 208-80.5 208-160s-83.3-160-208-160S48 160.5 48 240c0 32 12.4 62.8 35.7 89.2c8.6 9.7 12.8 22.5 11.8 35.5c-1.4 18.1-5.7 34.7-11.3 49.4c17-7.9 31.1-16.7 39.4-22.7zM21.2 431.9c1.8-2.7 3.5-5.4 5.1-8.1c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208s-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6c-15.1 6.6-32.3 12.6-50.1 16.1c-.8 .2-1.6 .3-2.4 .5c-4.4 .8-8.7 1.5-13.2 1.9c-.2 0-.5 .1-.7 .1c-5.1 .5-10.2 .8-15.3 .8c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4c4.1-4.2 7.8-8.7 11.3-13.5c1.7-2.3 3.3-4.6 4.8-6.9c.1-.2 .2-.3 .3-.5z"></path></svg>
  </span>
  <p class="text">Comment</p>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, comment, button hover effect  */
.bookmarkBtn {
  width: 130px;
  height: 40px;
  border-radius: 40px;
  border: none;
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition-duration: .3s;
  overflow: hidden;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.062);
}

.IconContainer {
  width: 30px;
  height: 30px;
  background-color: rgb(103, 74, 228);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
  transition-duration: .3s;
}

.icon {
  border-radius: 1px;
}

.text {
  height: 100%;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(26, 26, 26);
  z-index: 1;
  transition-duration: .3s;
  font-size: 1.04em;
  font-weight: 600;
}

.bookmarkBtn:hover .IconContainer {
  width: 120px;
  border-radius: 40px;
  transition-duration: .3s;
}

.bookmarkBtn:hover .text {
  transform: translate(10px);
  width: 0;
  font-size: 0;
  transition-duration: .3s;
}

.bookmarkBtn:active {
  transform: scale(0.95);
  transition-duration: .3s;
}
</style>


================================================
FILE: Buttons/vinodjangid07_chilly-newt-81.html
================================================
<button class="button">
   <svg class="svgIcon" viewBox="0 0 512 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path></svg>
  Explore
</button>

<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, search, neon, hover effect, explore */
.button {
  width: 110px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  background-color: rgb(161, 255, 20);
  border-radius: 30px;
  color: rgb(19, 19, 19);
  font-weight: 600;
  border: none;
  position: relative;
  cursor: pointer;
  transition-duration: .2s;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.116);
  padding-left: 8px;
  transition-duration: .5s;
}

.svgIcon {
  height: 25px;
  transition-duration: 1.5s;
}

.bell path {
  fill: rgb(19, 19, 19);
}

.button:hover {
  background-color: rgb(192, 255, 20);
  transition-duration: .5s;
}

.button:active {
  transform: scale(0.97);
  transition-duration: .2s;
}

.button:hover .svgIcon {
  transform: rotate(250deg);
  transition-duration: 1.5s;
}


</style>


================================================
FILE: Buttons/vinodjangid07_clever-bird-35.html
================================================
<button class="Btn">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height="1em"
    viewBox="0 0 384 512"
    class="svgIcon"
  >
    <path
      d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
    ></path>
  </svg>
  <span class="icon2"></span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, button, hover, download */
.Btn {
  width: 50px;
  height: 50px;
  border: 2px solid rgb(214, 214, 214);
  border-radius: 15px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition-duration: 0.3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);
}

.svgIcon {
  fill: rgb(70, 70, 70);
}

.icon2 {
  width: 18px;
  height: 5px;
  border-bottom: 2px solid rgb(70, 70, 70);
  border-left: 2px solid rgb(70, 70, 70);
  border-right: 2px solid rgb(70, 70, 70);
}

.Btn:hover {
  background-color: rgb(51, 51, 51);
  transition-duration: 0.3s;
}

.Btn:hover .icon2 {
  border-bottom: 2px solid rgb(235, 235, 235);
  border-left: 2px solid rgb(235, 235, 235);
  border-right: 2px solid rgb(235, 235, 235);
}

.Btn:hover .svgIcon {
  fill: rgb(255, 255, 255);
  animation: slide-in-top 1s linear infinite;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_clever-dingo-15.html
================================================
<button class="connectBtn">
  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512" fill="white"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"></path></svg>
  Connect
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: gradient, button, connect, hover effect */
.connectBtn {
  width: 120px;
  height: 40px;
  border: none;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: white;
  font-weight: 600;
  background: linear-gradient( to right,#8be3fc,#576bff);
  box-shadow: 0 20px 30px -7px rgba(97, 118, 238, 0.5);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.connectBtn:hover {
  box-shadow: none;
  transform: translate(0px, 2.2px);
}

.connectBtn:active {
  transform: scale(0.96) translate(0px, 3.2px);
}
</style>


================================================
FILE: Buttons/vinodjangid07_curly-panda-17.html
================================================
<button class="Btn">
  <svg height="1.2em" class="arrow" viewBox="0 0 512 512"><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"></path></svg>
<p class="text">Back to Top</p>
</button>

<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, arrow, hover effect, back to top, scroll to top */
.Btn {
  width: 45px;
  height: 45px;
  background: linear-gradient(#44ea76, #39fad7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  border: none;
}

.arrow path {
  fill: white;
}

.text {
  font-size: 0.7em;
  width: 100px;
  position: absolute;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: -18px;
  opacity: 0;
  transition-duration: .7s;
}

.Btn:hover .text {
  opacity: 1;
  transition-duration: .7s;
}

.Btn:hover .arrow {
  animation: slide-in-bottom .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-bottom {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

</style>


================================================
FILE: Buttons/vinodjangid07_curvy-lionfish-94.html
================================================
   <button class="Btn">Edit 
      <svg class="svg" viewBox="0 0 512 512">
        <path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"></path></svg>
    </button>


<style>
/* From Uiverse.io by vinodjangid07 - Tags: purple, button, edit */
.Btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100px;
  height: 40px;
  border: none;
  padding: 0px 20px;
  background-color: rgb(168, 38, 255);
  color: white;
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 5px 5px 0px rgb(140, 32, 212);
  transition-duration: .3s;
}

.svg {
  width: 13px;
  position: absolute;
  right: 0;
  margin-right: 20px;
  fill: white;
  transition-duration: .3s;
}

.Btn:hover {
  color: transparent;
}

.Btn:hover svg {
  right: 43%;
  margin: 0;
  padding: 0;
  border: none;
  transition-duration: .3s;
}

.Btn:active {
  transform: translate(3px , 3px);
  transition-duration: .3s;
  box-shadow: 2px 2px 0px rgb(140, 32, 212);
}
</style>


================================================
FILE: Buttons/vinodjangid07_dangerous-pug-9.html
================================================
<button class="button">
  <span class="text">Next</span>
  <svg class="arrow" viewBox="0 0 448 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, next, hover effect, click effect */
.button {
  width: 120px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  cursor: pointer;
  border: 3px solid rgb(255, 239, 94);
  background-color: rgb(255, 239, 94);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137);
}

.text {
  width: 70%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(27, 27, 27);
  color: white;
}

.arrow path {
  fill: rgb(19, 19, 19);
}

.button:hover .arrow {
  animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-8px);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.button:active {
  transform: scale(0.97);
}
</style>


================================================
FILE: Buttons/vinodjangid07_dull-ladybug-18.html
================================================
<button class="reward-btn">
  <span class="IconContainer">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 60 20"
      class="box-top box"
    >
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#6A8EF6"
        d="M2 18L58 18"
      ></path>
      <circle
        stroke-width="5"
        stroke="#6A8EF6"
        fill="#101218"
        r="7"
        cy="9.5"
        cx="20.5"
      ></circle>
      <circle
        stroke-width="5"
        stroke="#6A8EF6"
        fill="#101218"
        r="7"
        cy="9.5"
        cx="38.5"
      ></circle>
    </svg>

    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 58 44"
      class="box-body box"
    >
      <mask fill="white" id="path-1-inside-1_81_19">
        <rect rx="3" height="44" width="58"></rect>
      </mask>
      <rect
        mask="url(#path-1-inside-1_81_19)"
        stroke-width="8"
        stroke="#6A8EF6"
        fill="#101218"
        rx="3"
        height="44"
        width="58"
      ></rect>
      <line
        stroke-width="6"
        stroke="#6A8EF6"
        y2="29"
        x2="58"
        y1="29"
        x1="-3.61529e-09"
      ></line>
      <path
        stroke-linecap="round"
        stroke-width="5"
        stroke="#6A8EF6"
        d="M45.0005 20L36 3"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="5"
        stroke="#6A8EF6"
        d="M21 3L13.0002 19.9992"
      ></path>
    </svg>

    <span class="coin"></span>
  </span>
  <span class="text">Rewards</span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, button, hover, hover effect, gift, rewards, bonus */
.reward-btn {
  width: 120px;
  height: 40px;
  background-color: #101218;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}
.IconContainer {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.IconContainer svg {
  width: 40%;
  z-index: 3;
}
.box-top {
  transition: all 0.3s;
}
.text {
  width: 70px;
  height: 100%;
  font-size: 13px;
  color: #6a8ef6;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: 600;
}
.reward-btn:hover .IconContainer .box-top {
  transform: translateY(-5px);
}
.reward-btn:hover {
  background-color: #202531;
}
.reward-btn:hover .coin {
  transform: translateY(-5px);
  transition-delay: 0.2s;
}
.coin {
  width: 25%;
  height: 25%;
  background-color: #e4d61a;
  position: absolute;
  border-radius: 50%;
  transition: all 0.3s;
  z-index: 1;
  border: 2px solid #ffe956;
  margin-top: 4px;
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_empty-bat-15.html
================================================
<button class="Explore-Button">
  <span class="IconContainer">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 156 78"
      class="telescope"
    >
      <path
        fill="url(#paint0_linear_131_19)"
        d="M10.3968 78C10.6002 78 32 72.831 32 72.831C29.5031 68.7434 27.3945 63.5193 26.0258 57.947C24.6386 52.3381 24.0837 46.7841 24.3982 42L3.38683 47.0957C0.0205717 47.9206 -1.0152 55.4725 1.09333 63.9959C3.05409 72.0061 7.10469 78 10.3968 78Z"
      ></path>
      <path
        fill="url(#paint1_linear_131_19)"
        d="M63.0824 25L34.8099 32.0351C33.7675 32.2957 32.8714 33.0215 32.1582 34.1382C31.6096 34.9943 31.1524 36.0738 30.8049 37.3393C30.5489 38.2513 30.366 39.2563 30.238 40.3544C29.6894 44.7839 30.0734 50.5348 31.5547 56.6207C33.0177 62.7067 35.2854 67.9925 37.7725 71.6587C38.3942 72.5707 39.016 73.371 39.6561 74.0596C40.5339 75.0274 41.43 75.7718 42.3078 76.2743C43.1307 76.7396 43.9536 77 44.74 77C45.0326 77 45.3252 76.9628 45.5995 76.8883L72.5919 70.1698L74 69.8164C69.867 64.1027 66.6484 56.1184 64.7282 48.1527C62.7532 39.9451 62.1497 31.8306 63.0094 25.3166C63.0458 25.2233 63.0643 25.1117 63.0824 25Z"
      ></path>
      <path
        fill="url(#paint2_linear_131_19)"
        d="M155.865 50.9153L144.361 3.54791C143.844 1.43031 141.964 0 139.88 0C139.512 0 139.143 0.0371509 138.774 0.130028L75.0921 15.8448C74.3361 16.0306 73.654 16.4021 73.0271 16.9594C72.1239 17.7581 71.3493 18.9284 70.7411 20.3958C70.3537 21.3246 70.0403 22.3648 69.7823 23.4979C68.4731 29.2935 68.7683 37.7267 70.9621 46.7544C73.2115 55.9863 76.9358 63.7509 80.8447 68.2277C81.6375 69.1194 82.4303 69.8995 83.2229 70.5125C83.4259 70.6795 83.6654 70.8283 83.9051 70.9581C85.6752 71.9798 87.7955 72.2584 89.7865 71.7571L152.492 56.5065C154.962 55.912 156.474 53.4044 155.865 50.9153Z"
      ></path>
      <defs>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="78"
          x2="16"
          y1="42"
          x1="16"
          id="paint0_linear_131_19"
        >
          <stop stop-color="#6A8EF6"></stop>
          <stop stop-color="#BF8AEB" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="77"
          x2="52"
          y1="25"
          x1="52"
          id="paint1_linear_131_19"
        >
          <stop stop-color="#6A8EF6"></stop>
          <stop stop-color="#BF8AEB" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="72"
          x2="112.5"
          y1="0"
          x1="112.5"
          id="paint2_linear_131_19"
        >
          <stop stop-color="#6A8EF6"></stop>
          <stop stop-color="#BF8AEB" offset="1"></stop>
        </linearGradient>
      </defs>
    </svg>

    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 104 69"
      class="tripod"
    >
      <path
        stroke-linecap="round"
        stroke-width="11"
        stroke="url(#paint0_linear_124_14)"
        d="M98.4336 63.3406L52 5.99991"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="11"
        stroke="url(#paint1_linear_124_14)"
        d="M52.4336 6L6.00004 63.3407"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="11"
        stroke="url(#paint2_linear_124_14)"
        d="M52 63L52 6"
      ></path>
      <defs>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="40.5"
          x2="68"
          y1="32"
          x1="77.5"
          id="paint0_linear_124_14"
        >
          <stop stop-color="#8E8DF2"></stop>
          <stop stop-color="#BC8BEC" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="40.5174"
          x2="36.4196"
          y1="32.9922"
          x1="26.1302"
          id="paint1_linear_124_14"
        >
          <stop stop-color="#8E8DF2"></stop>
          <stop stop-color="#BC8BEC" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="34.8174"
          x2="42.7435"
          y1="34.0069"
          x1="55.4548"
          id="paint2_linear_124_14"
        >
          <stop stop-color="#8E8DF2"></stop>
          <stop stop-color="#BC8BEC" offset="1"></stop>
        </linearGradient>
      </defs>
    </svg>
  </span>

  <span class="text">Explore</span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, purple, gradient, button, hover, search, hover effect, explore */
.Explore-Button {
  width: fit-content;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 15px;
  gap: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  background: linear-gradient(120deg, rgb(65, 43, 95), rgb(96, 51, 154));
}
.IconContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
}
.telescope {
  width: 100%;
  height: auto;
  transform-origin: center;
  transition: all 1s;
  transform: rotate(20deg);
}
.tripod {
  width: 60%;
  height: auto;
}
.text {
  color: rgb(240, 240, 240);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
}
.Explore-Button:hover .telescope {
  transform: rotate(-35deg);
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_evil-chicken-13.html
================================================
<button class="Documents-btn">
  <span class="folderContainer">
    <svg
      class="fileBack"
      width="146"
      height="113"
      viewBox="0 0 146 113"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M0 4C0 1.79086 1.79086 0 4 0H50.3802C51.8285 0 53.2056 0.627965 54.1553 1.72142L64.3303 13.4371C65.2799 14.5306 66.657 15.1585 68.1053 15.1585H141.509C143.718 15.1585 145.509 16.9494 145.509 19.1585V109C145.509 111.209 143.718 113 141.509 113H3.99999C1.79085 113 0 111.209 0 109V4Z"
        fill="url(#paint0_linear_117_4)"
      ></path>
      <defs>
        <linearGradient
          id="paint0_linear_117_4"
          x1="0"
          y1="0"
          x2="72.93"
          y2="95.4804"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#8F88C2"></stop>
          <stop offset="1" stop-color="#5C52A2"></stop>
        </linearGradient>
      </defs>
    </svg>
    <svg
      class="filePage"
      width="88"
      height="99"
      viewBox="0 0 88 99"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect width="88" height="99" fill="url(#paint0_linear_117_6)"></rect>
      <defs>
        <linearGradient
          id="paint0_linear_117_6"
          x1="0"
          y1="0"
          x2="81"
          y2="160.5"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="white"></stop>
          <stop offset="1" stop-color="#686868"></stop>
        </linearGradient>
      </defs>
    </svg>

    <svg
      class="fileFront"
      width="160"
      height="79"
      viewBox="0 0 160 79"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M0.29306 12.2478C0.133905 9.38186 2.41499 6.97059 5.28537 6.97059H30.419H58.1902C59.5751 6.97059 60.9288 6.55982 62.0802 5.79025L68.977 1.18034C70.1283 0.410771 71.482 0 72.8669 0H77H155.462C157.87 0 159.733 2.1129 159.43 4.50232L150.443 75.5023C150.19 77.5013 148.489 79 146.474 79H7.78403C5.66106 79 3.9079 77.3415 3.79019 75.2218L0.29306 12.2478Z"
        fill="url(#paint0_linear_117_5)"
      ></path>
      <defs>
        <linearGradient
          id="paint0_linear_117_5"
          x1="38.7619"
          y1="8.71323"
          x2="66.9106"
          y2="82.8317"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#C3BBFF"></stop>
          <stop offset="1" stop-color="#51469A"></stop>
        </linearGradient>
      </defs>
    </svg>
  </span>
  <p class="text">Documents</p>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: icon, animation, button, hover, hover effect, file, documents, folder */
.Documents-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  height: 45px;
  border: none;
  padding: 0px 15px;
  border-radius: 5px;
  background-color: rgb(49, 49, 83);
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s;
}
.folderContainer {
  width: 40px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.fileBack {
  z-index: 1;
  width: 80%;
  height: auto;
}
.filePage {
  width: 50%;
  height: auto;
  position: absolute;
  z-index: 2;
  transition: all 0.3s ease-out;
}
.fileFront {
  width: 85%;
  height: auto;
  position: absolute;
  z-index: 3;
  opacity: 0.95;
  transform-origin: bottom;
  transition: all 0.3s ease-out;
}
.text {
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.Documents-btn:hover .filePage {
  transform: translateY(-5px);
}
.Documents-btn:hover {
  background-color: rgb(58, 58, 94);
}
.Documents-btn:active {
  transform: scale(0.95);
}
.Documents-btn:hover .fileFront {
  transform: rotateX(30deg);
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_fluffy-sheep-17.html
================================================
<button class="signupBtn">
  SIGN UP
  <span class="arrow">
     <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512" fill="rgb(183, 128, 255)"><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"></path></svg>
  </span>
</button>


<style>
/* From Uiverse.io by vinodjangid07 - Tags: gradient, button, hover effect, sign up */
.signupBtn {
  width: 120px;
  height: 40px;
  border-radius: 30px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
  gap: 9px;
  color: white;
  background: linear-gradient(to right,rgb(128, 128, 255),rgb(183, 128, 255));
  position: relative;
  cursor: pointer;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.212);
}

.arrow {
  position: absolute;
  right: 7.5px;
  background-color: rgb(255, 255, 255);
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.signupBtn:hover .arrow {
  animation: slide-in-left 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-10px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>


================================================
FILE: Buttons/vinodjangid07_fresh-tiger-82.html
================================================
<button class="button">
   <svg class="bell" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path></svg>
  Notifications
  <div class="arrow">›</div>
</button>

<style>
/* From Uiverse.io by vinodjangid07 - Tags: notification, button, hover effect, click effect */
.button {
  width: 200px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0px 15px;
  background-color: rgb(66, 66, 66);
  border-radius: 10px;
  color: white;
  border: none;
  position: relative;
  cursor: pointer;
  transition-duration: .2s;
}

.bell {
  width: 13px;
}

.bell path {
  fill: rgb(0, 206, 62);
}

.arrow {
  position: absolute;
  right: 0;
  width: 30px;
  height: 100%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button:hover {
  background-color: rgb(77, 77, 77);
  transition-duration: .2s;
}

.button:hover .arrow {
  animation: slide-right .6s ease-out both;
}
/* arrow animation */
@keyframes slide-right {
  0% {
    transform: translateX(-10px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.button:active {
  transform: translate(1px , 1px);
  transition-duration: .2s;
}

</style>


================================================
FILE: Buttons/vinodjangid07_funny-panther-79.html
================================================
<button class="faq-button">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
    <path
      d="M80 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74V320c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"
    ></path>
  </svg>
  <span class="tooltip">FAQ</span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: tooltip, gradient, button, hover effect, faq */
.faq-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: #ffe53b;
  background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.151);
  position: relative;
}
.faq-button svg {
  height: 1.5em;
  fill: white;
}
.faq-button:hover svg {
  animation: jello-vertical 0.7s both;
}
@keyframes jello-vertical {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

.tooltip {
  position: absolute;
  top: -20px;
  opacity: 0;
  background-color: #ffe53b;
  background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 0.2s;
  pointer-events: none;
  letter-spacing: 0.5px;
}

.tooltip::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  background-color: #ff2525;
  background-size: 1000%;
  background-position: center;
  transform: rotate(45deg);
  bottom: -15%;
  transition-duration: 0.3s;
}

.faq-button:hover .tooltip {
  top: -40px;
  opacity: 1;
  transition-duration: 0.3s;
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_great-ape-33.html
================================================
<button class="Btn">
 <span class="svgContainer">
   <svg fill="white" class="svgIcon" viewBox="0 0 448 512" height="1.5em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>
 </span>
 <span class="BG"></span>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: instagram, gradient, button, social media */
.Btn {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  /* overflow: hidden; */
  border-radius: 7px;
  cursor: pointer;
  transition: all .3s;
}

.svgContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(4px);
  letter-spacing: 0.8px;
  border-radius: 10px;
  transition: all .3s;
  border: 1px solid rgba(156, 156, 156, 0.466);
}

.BG {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  z-index: -1;
  border-radius: 9px;
  pointer-events: none;
  transition: all .3s;
}

.Btn:hover .BG {
  transform: rotate(35deg);
  transform-origin: bottom;
}

.Btn:hover .svgContainer {
  background-color: rgba(156, 156, 156, 0.466);
}

</style>


================================================
FILE: Buttons/vinodjangid07_grumpy-sloth-7.html
================================================
<button class="Btn">
   <svg fill="white" viewBox="0 0 512 512" height="1.2em"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
   <span class="tooltip">@username</span>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: twitter, button, social media, hover effect */
.Btn {
  width: 45px;
  height: 45px;
  /* border: none; */
  border-radius: 50%;
  background-color: #00acee;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition-duration: .5s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137);
  border: 2px solid #bbecff;
}

.logoIcon {
  fill: white;
}

.tooltip {
  position: absolute;
  top: -20px;
  opacity: 0;
  background-color: #00acee;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: .2s;
  pointer-events: none;
  letter-spacing: 0.5px;
}

.tooltip::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  background-color: #00acee;
  background-size: 1000%;
  background-position: center;
  transform: rotate(45deg);
  bottom: -20%;
  transition-duration: .3s;
}

.Btn:hover .tooltip {
  top: -45px;
  opacity: 1;
  transition-duration: .3s;
}

.Btn:hover {
  background-position: right;
  transition-duration: .5s;
}
</style>


================================================
FILE: Buttons/vinodjangid07_heavy-badger-29.html
================================================
<button class="bookmarkBtn">
  <span class="IconContainer">
    <svg viewBox="0 0 384 512" height="0.9em" class="icon">
      <path
        d="M0 48V487.7C0 501.1 10.9 512 24.3 512c5 0 9.9-1.5 14-4.4L192 400 345.7 507.6c4.1 2.9 9 4.4 14 4.4c13.4 0 24.3-10.9 24.3-24.3V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48z"
      ></path>
    </svg>
  </span>
  <p class="text">Save</p>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: button, save, hover effect, click effect, bookmark */
.bookmarkBtn {
  width: 100px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.349);
  background-color: rgb(12, 12, 12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition-duration: 0.3s;
  overflow: hidden;
}

.IconContainer {
  width: 30px;
  height: 30px;
  background: linear-gradient(to bottom, rgb(255, 136, 255), rgb(172, 70, 255));
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
  transition-duration: 0.3s;
}

.icon {
  border-radius: 1px;
}

.text {
  height: 100%;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 1;
  transition-duration: 0.3s;
  font-size: 1.04em;
}

.bookmarkBtn:hover .IconContainer {
  width: 90px;
  transition-duration: 0.3s;
}

.bookmarkBtn:hover .text {
  transform: translate(10px);
  width: 0;
  font-size: 0;
  transition-duration: 0.3s;
}

.bookmarkBtn:active {
  transform: scale(0.95);
  transition-duration: 0.3s;
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_helpless-starfish-55.html
================================================
<button class="appstore-button">
  <svg viewBox="0 0 24 24">
    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
    <g
      id="SVGRepo_tracerCarrier"
      stroke-linecap="round"
      stroke-linejoin="round"
    ></g>
    <g id="SVGRepo_iconCarrier">
      <path
        d="M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 17 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z"
      ></path>
    </g>
  </svg>
  <span class="button-text">
    <span class="top-text">Download on the</span>
    <span class="bottom-text">App Store</span>
  </span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: icon, button, dark, download, hover effect, play-store */
.appstore-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 3px solid rgb(189, 189, 189);
  background-color: rgb(15, 15, 15);
  border-radius: 15px;
  gap: 5px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0px 0px 100px -30px rgb(255, 255, 255);
}
.appstore-button svg {
  width: 45px;
}
.appstore-button svg path {
  fill: white;
  transition: all 0.3s;
}
.button-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: white;
  transition: all 0.3s;
}
.top-text {
  font-size: 13px;
  font-weight: 600;
}
.bottom-text {
  font-size: 24px;
  font-weight: 600;
}

.appstore-button:hover {
  background-color: rgb(236, 236, 236);
  border: 3px solid rgb(138, 138, 138);
}
.appstore-button:hover .button-text {
  color: black;
}
.appstore-button:hover svg path {
  fill: black;
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_horrible-husky-70.html
================================================
<button class="Btn">
  Jelly Button
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, jelly, hover effect */
.Btn {
  position: relative;
  width: 150px;
  height: 55px;
  border-radius: 45px;
  border: none;
  background-color: rgb(151, 95, 255);
  color: white;
  box-shadow: 0px 10px 10px rgb(210, 187, 253) inset,
  0px 5px 10px rgba(5, 5, 5, 0.212),
  0px -10px 10px rgb(124, 54, 255) inset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Btn::before {
  width: 70%;
  height: 2px;
  position: absolute;
  background-color: rgba(250, 250, 250, 0.678);
  content: "";
  filter: blur(1px);
  top: 7px;
  border-radius: 50%;
}

.Btn::after {
  width: 70%;
  height: 2px;
  position: absolute;
  background-color: rgba(250, 250, 250, 0.137);
  content: "";
  filter: blur(1px);
  bottom: 7px;
  border-radius: 50%;
}

.Btn:hover {
  animation: jello-horizontal 0.9s both;
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

</style>


================================================
FILE: Buttons/vinodjangid07_horrible-swan-51.html
================================================
<button class="palette-button">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 47 47"
    class="palette"
  >
    <path
      stroke-width="2"
      stroke="black"
      d="M23.5 46C11.0736 46 1 35.9264 1 23.5C1 11.0736 11.0736 1 23.5 1C35.9264 1 46 11.0736 46 23.5C46 24.2461 45.7117 24.7823 45.1652 25.2415C44.5763 25.7365 43.6859 26.1372 42.5263 26.4835C41.3771 26.8267 40.0662 27.0884 38.6848 27.3617L38.6142 27.3757C37.275 27.6407 35.8737 27.9179 34.5961 28.2889C32.0955 29.015 29.5022 30.2591 29.1333 33.106C28.9574 34.463 29.3233 36.0257 30.2167 37.8342C31.0026 39.425 32.2278 41.2689 33.9671 43.4224C30.8413 45.0683 27.2807 46 23.5 46Z"
    ></path>
    <circle
      fill="none"
      class="color-drop drop1"
      stroke-width="2"
      stroke="black"
      r="3.5"
      cy="13.5"
      cx="33.5"
    ></circle>
    <circle
      fill="none"
      class="color-drop drop2"
      stroke-width="2"
      stroke="black"
      r="3.5"
      cy="10.5"
      cx="20.5"
    ></circle>
    <circle
      fill="none"
      class="color-drop drop3"
      stroke-width="2"
      stroke="black"
      r="3.5"
      cy="18.5"
      cx="10.5"
    ></circle>
    <circle
      fill="none"
      class="color-drop drop4"
      stroke-width="2"
      stroke="black"
      r="3.5"
      cy="31.5"
      cx="11.5"
    ></circle>
  </svg>
  Customize
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: icon, animation, button, custom, hover effect */
.palette-button {
  background-color: #fff;
  width: 170px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgb(196, 196, 196);
  transition: all 0.3s;
}
.palette {
  width: 30px;
  transition: all 0.3s;
}
.palette-button:hover .palette {
  transform: rotate(-45deg);
}
.palette path {
  fill: rgb(255, 163, 183);
  stroke-width: 0;
}
.drop1 {
  fill: rgb(115, 115, 255);
  stroke-width: 0;
}
.drop2 {
  fill: red;
  stroke-width: 0;
}
.drop3 {
  fill: yellow;
  stroke-width: 0;
}
.drop4 {
  fill: rgb(104, 255, 255);
  stroke-width: 0;
}
.palette-button:hover {
  transform: scale(1.05);
  background-color: rgb(176, 115, 255);
  color: white;
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_lucky-bulldog-57.html
================================================
<button class="Btn-Container">
  <span class="text">let's go!</span>
  <span class="icon-Container">
    <svg
      width="16"
      height="19"
      viewBox="0 0 16 19"
      fill="nones"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle cx="1.61321" cy="1.61321" r="1.5" fill="black"></circle>
      <circle cx="5.73583" cy="1.61321" r="1.5" fill="black"></circle>
      <circle cx="5.73583" cy="5.5566" r="1.5" fill="black"></circle>
      <circle cx="9.85851" cy="5.5566" r="1.5" fill="black"></circle>
      <circle cx="9.85851" cy="9.5" r="1.5" fill="black"></circle>
      <circle cx="13.9811" cy="9.5" r="1.5" fill="black"></circle>
      <circle cx="5.73583" cy="13.4434" r="1.5" fill="black"></circle>
      <circle cx="9.85851" cy="13.4434" r="1.5" fill="black"></circle>
      <circle cx="1.61321" cy="17.3868" r="1.5" fill="black"></circle>
      <circle cx="5.73583" cy="17.3868" r="1.5" fill="black"></circle>
    </svg>
  </span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: icon, animation, button, svg, arrow, next, go */
.Btn-Container {
  display: flex;
  width: 170px;
  height: fit-content;
  background-color: #1d2129;
  border-radius: 40px;
  box-shadow: 0px 5px 10px #bebebe;
  justify-content: space-between;
  align-items: center;
  border: none;
  cursor: pointer;
}
.icon-Container {
  width: 45px;
  height: 45px;
  background-color: #f59aff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid #1d2129;
}
.text {
  width: calc(170px - 45px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1em;
  letter-spacing: 1.2px;
}
.icon-Container svg {
  transition-duration: 1.5s;
}
.Btn-Container:hover .icon-Container svg {
  transition-duration: 1.5s;
  animation: arrow 1s linear infinite;
}
@keyframes arrow {
  0% {
    opacity: 0;
    margin-left: 0px;
  }
  100% {
    opacity: 1;
    margin-left: 10px;
  }
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_massive-moose-26.html
================================================
<button class="Download-button">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height="16"
    width="20"
    viewBox="0 0 640 512"
  >
    <path
      d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-167l80 80c9.4 9.4 24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-39 39V184c0-13.3-10.7-24-24-24s-24 10.7-24 24V318.1l-39-39c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9z"
      fill="white"
    ></path>
  </svg>
  <span>Download</span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: simple, icon, button, hover, download, click effect */
.Download-button {
  display: flex;
  align-items: center;
  font-family: inherit;
  font-weight: 500;
  font-size: 17px;
  padding: 12px 20px;
  color: white;
  background: rgb(103, 92, 156);
  border: none;
  box-shadow: 0 0.7em 1.5em -0.5em rgba(59, 48, 78, 0.527);
  letter-spacing: 0.05em;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}

.Download-button svg {
  margin-right: 8px;
  width: 25px;
}

.Download-button:hover {
  box-shadow: 0 0.5em 1.5em -0.5em rgba(88, 71, 116, 0.627);
}

.Download-button:active {
  box-shadow: 0 0.3em 1em -0.5em rgba(88, 71, 116, 0.627);
}

.Download-button::before {
  content: "";
  width: 4px;
  height: 40%;
  background-color: white;
  position: absolute;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  left: 0;
  transition: all 0.2s;
}

.Download-button::after {
  content: "";
  width: 4px;
  height: 40%;
  background-color: white;
  position: absolute;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  right: 0;
  transition: all 0.2s;
}

.Download-button:hover::before,
.Download-button:hover::after {
  height: 60%;
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_modern-bear-96.html
================================================
<button class="Btn">
  <p class="text">Button</p>
  <span class="BG"></span>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: gradient, button, hover effect */
.Btn {
  position: relative;
  background-color: transparent;
  border: none;
  width: 100px;
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
  transition: all .3s;
}

.text {
  width: 100%;
  height: 100%;
  background-color: rgba(230, 230, 230, 0.466);
  border: none;
  border-radius: 7px;
  backdrop-filter: blur(5px);
  color: rgb(26, 26, 26);
  display: flex;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.8px;
}

.BG {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: linear-gradient(147deg, #FFE53B, #FF2525);
  z-index: -1;
  left: 6px;
  top: 6px;
  border-radius: 7px;
  pointer-events: none;
  transition: all .3s;
}

.Btn:hover {
  transform: translateY(-2px);
}

.Btn:hover .BG {
  transform: translateY(-1px);
}
</style>


================================================
FILE: Buttons/vinodjangid07_nasty-moose-44.html
================================================
<button class="setting-btn">
  <span class="bar bar1"></span>
  <span class="bar bar2"></span>
  <span class="bar bar1"></span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, button, hover effect, setting */
.setting-btn {
  width: 45px;
  height: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: rgb(129, 110, 216);
  border-radius: 10px;
  cursor: pointer;
  border: none;
  box-shadow: 0px 0px 0px 2px rgb(212, 209, 255);
}
.bar {
  width: 50%;
  height: 2px;
  background-color: rgb(229, 229, 229);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 2px;
}
.bar::before {
  content: "";
  width: 2px;
  height: 2px;
  background-color: rgb(126, 117, 255);
  position: absolute;
  border-radius: 50%;
  border: 2px solid white;
  transition: all 0.3s;
  box-shadow: 0px 0px 5px white;
}
.bar1::before {
  transform: translateX(-4px);
}
.bar2::before {
  transform: translateX(4px);
}
.setting-btn:hover .bar1::before {
  transform: translateX(4px);
}
.setting-btn:hover .bar2::before {
  transform: translateX(-4px);
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_neat-panther-45.html
================================================
<button class="open-file">
  <span class="file-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 71 67">
      <path
        stroke-width="5"
        stroke="black"
        d="M41.7322 11.7678L42.4645 12.5H43.5H68.5V64.5H2.5V2.5H32.4645L41.7322 11.7678Z"
      ></path>
    </svg>
    <span class="file-front"></span>
  </span>
  Open file
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: simple, animation, button, hover, hover effect, open, file */
.open-file {
  background-color: rgb(255, 255, 255);
  width: 140px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1px solid rgb(217, 217, 217);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 10px;
}
.file-wrapper {
  width: 15px;
  height: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.file-wrapper svg {
  width: 100%;
}
.file-front {
  position: absolute;
  width: 100%;
  height: 70%;
  border: 2px solid rgb(0, 0, 0);
  border-bottom: 1px solid black;
  transform: skewX(-40deg);
  transform-origin: bottom right;
  background-color: white;
  transition: all 0.5s;
  bottom: 0;
}
.open-file:hover .file-front {
  height: 50%;
  transform-origin: bottom right;
  transform: skewX(-55deg);
}
.open-file:hover {
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.048);
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_neat-seahorse-99.html
================================================
<button class="submitBtn">
  Submit
  <svg fill="white" viewBox="0 0 448 512" height="1em" class="arrow"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: gradient, button, submit, hover effect */
.submitBtn {
  width: 120px;
  height: 40px;
  border-radius: 30px;
  border: none;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.13);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  color: white;
  background: linear-gradient(to left,rgb(230, 35, 0),rgb(255, 174, 0));
  letter-spacing: 0.7px;
}

.submitBtn:hover .arrow {
  animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-10px);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.submitBtn:active {
  transform: scale(0.97);
}
</style>


================================================
FILE: Buttons/vinodjangid07_nervous-gecko-43.html
================================================
<button class="chatBtn">
 <svg height="1.6em" fill="white" xml:space="preserve" viewBox="0 0 1000 1000" y="0px" x="0px" version="1.1">
<path d="M881.1,720.5H434.7L173.3,941V720.5h-54.4C58.8,720.5,10,671.1,10,610.2v-441C10,108.4,58.8,59,118.9,59h762.2C941.2,59,990,108.4,990,169.3v441C990,671.1,941.2,720.5,881.1,720.5L881.1,720.5z M935.6,169.3c0-30.4-24.4-55.2-54.5-55.2H118.9c-30.1,0-54.5,24.7-54.5,55.2v441c0,30.4,24.4,55.1,54.5,55.1h54.4h54.4v110.3l163.3-110.2H500h381.1c30.1,0,54.5-24.7,54.5-55.1V169.3L935.6,169.3z M717.8,444.8c-30.1,0-54.4-24.7-54.4-55.1c0-30.4,24.3-55.2,54.4-55.2c30.1,0,54.5,24.7,54.5,55.2C772.2,420.2,747.8,444.8,717.8,444.8L717.8,444.8z M500,444.8c-30.1,0-54.4-24.7-54.4-55.1c0-30.4,24.3-55.2,54.4-55.2c30.1,0,54.4,24.7,54.4,55.2C554.4,420.2,530.1,444.8,500,444.8L500,444.8z M282.2,444.8c-30.1,0-54.5-24.7-54.5-55.1c0-30.4,24.4-55.2,54.5-55.2c30.1,0,54.4,24.7,54.4,55.2C336.7,420.2,312.3,444.8,282.2,444.8L282.2,444.8z"></path>
</svg>
<span class="tooltip">Chat</span>
</button>

<style>
/* From Uiverse.io by vinodjangid07 - Tags: gradient, button, chat, hover effect */
.chatBtn {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background-color: #FFE53B;
  background-image: linear-gradient(147deg, #FFE53B, #FF2525,#FFE53B);
  cursor: pointer;
  padding-top: 3px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.164);
  position: relative;
  background-size: 300%;
  background-position: left;
  transition-duration: 1s;
}

.tooltip {
  position: absolute;
  top: -40px;
  opacity: 0;
  background-color: rgb(255, 180, 82);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: .5s;
  pointer-events: none;
  letter-spacing: 0.5px;
}

.chatBtn:hover .tooltip {
  opacity: 1;
  transition-duration: .5s;
}

.chatBtn:hover {
  background-position: right;
  transition-duration: 1s;
}
</style>


================================================
FILE: Buttons/vinodjangid07_nervous-warthog-37.html
================================================
<button class="Projects-Button">
  <span class="IconContainer">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 259 259"
      class="svgBG"
    >
      <circle
        stroke-width="7"
        stroke="#fff"
        r="69"
        cy="129.5"
        cx="129.5"
      ></circle>
      <circle fill="#fff" r="18.5" cy="18.5" cx="129.5"></circle>
      <circle fill="#fff" r="18.5" cy="51.5" cx="206.5"></circle>
      <circle fill="#fff" r="18.5" cy="129.5" cx="240.5"></circle>
      <circle fill="#fff" r="18.5" cy="207.5" cx="207.5"></circle>
      <circle fill="#fff" r="18.5" cy="206.5" cx="52.5"></circle>
      <circle fill="#fff" r="18.5" cy="240.5" cx="129.5"></circle>
      <circle fill="#fff" r="18.5" cy="129.5" cx="18.5"></circle>
      <circle fill="#fff" r="18.5" cy="50.5" cx="51.5"></circle>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="78.7279"
        x2="79.3848"
        y1="63.1716"
        x1="63.8284"
      ></line>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="194.728"
        x2="195.385"
        y1="179.172"
        x1="179.828"
      ></line>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="58"
        x2="130"
        y1="36"
        x1="130"
      ></line>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="64.1715"
        x2="194.314"
        y1="78.3137"
        x1="180.172"
      ></line>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="180.172"
        x2="78.3137"
        y1="194.314"
        x1="64.1716"
      ></line>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="223"
        x2="130"
        y1="201"
        x1="130"
      ></line>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="129"
        x2="223"
        y1="129"
        x1="201"
      ></line>
      <line
        stroke-width="8"
        stroke="#fff"
        y2="129"
        x2="58"
        y1="129"
        x1="36"
      ></line>
    </svg>

    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 110 110"
      class="svgFG"
    >
      <circle stroke-width="28" stroke="#fff" r="32" cy="55" cx="55"></circle>
      <path
        fill="#fff"
        d="M41 4C41 1.79086 42.7909 0 45 0H65C67.2091 0 69 1.79086 69 4V12H41V4Z"
      ></path>
      <path
        fill="#fff"
        d="M91.9838 16.9513C93.9123 15.8736 96.3492 16.5633 97.4269 18.4918L107.183 35.9507C108.261 37.8791 107.571 40.3161 105.643 41.3937L98.6592 45.2963L85.0002 20.8538L91.9838 16.9513Z"
      ></path>
      <path
        fill="#fff"
        d="M106.209 69.0964C108.106 70.2275 108.728 72.6828 107.596 74.5804L97.3555 91.7596C96.2243 93.6571 93.7691 94.2784 91.8715 93.1472L84.9998 89.0509L99.337 65L106.209 69.0964Z"
      ></path>
      <path
        fill="#fff"
        d="M69 106C69 108.209 67.2091 110 65 110L45 110C42.7909 110 41 108.209 41 106L41 98L69 98V106Z"
      ></path>
      <path
        fill="#fff"
        d="M17.4641 93.2485C15.5509 94.3531 13.1046 93.6976 12 91.7844L2 74.4639C0.89543 72.5508 1.55093 70.1044 3.4641 68.9998L10.3923 64.9998L24.3923 89.2485L17.4641 93.2485Z"
      ></path>
      <path
        fill="#fff"
        d="M3.4641 41.2485C1.55093 40.144 0.895431 37.6976 2 35.7844L12 18.4639C13.1046 16.5508 15.5509 15.8953 17.4641 16.9998L24.3923 20.9998L10.3923 45.2485L3.4641 41.2485Z"
      ></path>
    </svg>
  </span>

  <span class="text">Projects</span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, purple, gradient, button, hover, svg, hover effect, projects */
.Projects-Button {
  width: fit-content;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  gap: 10px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(120deg, rgb(150, 86, 199), rgb(98, 47, 138));
  transition: all 0.3s;
  box-shadow: 0px 10px 10px rgba(144, 0, 255, 0.166);
}
.IconContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  position: relative;
}
.svgBG {
  width: 25px;
  height: auto;
}
.svgFG {
  width: 9px;
  height: auto;
  z-index: 2;
  position: absolute;
}
.text {
  color: rgb(240, 240, 240);
  font-weight: 500;
  font-size: 16px;
}
.Projects-Button:hover .svgFG {
  animation: clockwise 2s linear infinite;
}

.Projects-Button:hover .svgBG {
  animation: anti-clockwise 2s linear infinite;
}
@keyframes clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes anti-clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.Projects-Button:hover {
  background-color: rgb(119, 57, 166);
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_new-emu-14.html
================================================
<button class="Btn">
  SKIP
  <svg viewBox="0 0 320 512" class="svg">
    <path
      d="M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416V96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4l192 160L256 241V96c0-17.7 14.3-32 32-32s32 14.3 32 32V416c0 17.7-14.3 32-32 32s-32-14.3-32-32V271l-11.5 9.6-192 160z"
    ></path>
  </svg>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: icon, animation, blue, gradient, button, next, hover effect, skip */
.Btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100px;
  height: 40px;
  border: none;
  padding: 0px 20px;
  background: linear-gradient(to right, #8be3fc, #576bff);
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 20px 30px -7px rgba(97, 118, 238, 0.5);
  transition-duration: 0.3s;
}

.svg {
  width: 12px;
  position: absolute;
  right: 0;
  margin-right: 20px;
  fill: white;
  transition-duration: 0.3s;
}

.Btn:hover {
  color: transparent;
}

.Btn:hover svg {
  right: 43%;
  margin: 0;
  padding: 0;
  border: none;
  transition-duration: 0.3s;
}

.Btn:active {
  transform: translate(3px, 3px);
  transition-duration: 0.3s;
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_new-mole-80.html
================================================
<button class="Btn">
  <svg class="svgIcon" viewBox="0 0 512 512" height="1.2em"><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
  Messages
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: gradient, button, message, hover effect */
.Btn {
  width: 180px;
  height: 45px;
  border-radius: 40px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  background: linear-gradient( to right,#44ea76, #39fad7);
  transition-duration: .3s;
  letter-spacing: 1.4px;
}

.svgIcon path {
  fill: white;
}

.Btn:hover {
  transform: scale(0.95);
  transition-duration: .3s;
}

.Btn::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 30%;
  background: linear-gradient( to right,#44ea76, #39fad7);
  filter: blur(10px);
  bottom: -3px;
  z-index: -1;
  transition-duration: .3s;
}

.Btn:hover::before {
  bottom: -1px;
  filter: blur(5px);
  transition-duration: .3s;
}
</style>


================================================
FILE: Buttons/vinodjangid07_odd-snake-27.html
================================================
    <button class="Btn">
      <svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 448 512" class="svgIcon"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>
      <span class="text">Instagram</span>
    </button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: instagram, button, hover effect */
.Btn {
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: .4s;
  cursor: pointer;
  position: relative;
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  overflow: hidden;
}

.svgIcon {
  transition-duration: .3s;
}

.svgIcon path {
  fill: white;
}

.text {
  position: absolute;
  color: rgb(255, 255, 255);
  width: 120px;
  font-weight: 600;
  opacity: 0;
  transition-duration: .4s;
}

.Btn:hover {
  width: 110px;
  transition-duration: .4s;
  border-radius: 30px;
}

.Btn:hover .text {
  opacity: 1;
  transition-duration: .4s;
}

.Btn:hover .svgIcon {
  opacity: 0;
  transition-duration: .3s;
}
</style>


================================================
FILE: Buttons/vinodjangid07_orange-donkey-9.html
================================================
<button class="print-btn">
  <span class="printer-wrapper">
    <span class="printer-container">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 92 75">
        <path
          stroke-width="5"
          stroke="black"
          d="M12 37.5H80C85.2467 37.5 89.5 41.7533 89.5 47V69C89.5 70.933 87.933 72.5 86 72.5H6C4.067 72.5 2.5 70.933 2.5 69V47C2.5 41.7533 6.75329 37.5 12 37.5Z"
        ></path>
        <mask fill="white" id="path-2-inside-1_30_7">
          <path
            d="M12 12C12 5.37258 17.3726 0 24 0H57C70.2548 0 81 10.7452 81 24V29H12V12Z"
          ></path>
        </mask>
        <path
          mask="url(#path-2-inside-1_30_7)"
          fill="black"
          d="M7 12C7 2.61116 14.6112 -5 24 -5H57C73.0163 -5 86 7.98374 86 24H76C76 13.5066 67.4934 5 57 5H24C20.134 5 17 8.13401 17 12H7ZM81 29H12H81ZM7 29V12C7 2.61116 14.6112 -5 24 -5V5C20.134 5 17 8.13401 17 12V29H7ZM57 -5C73.0163 -5 86 7.98374 86 24V29H76V24C76 13.5066 67.4934 5 57 5V-5Z"
        ></path>
        <circle fill="black" r="3" cy="49" cx="78"></circle>
      </svg>
    </span>

    <span class="printer-page-wrapper">
      <span class="printer-page"></span>
    </span>
  </span>
  Print
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: simple, animation, button, hover, hover effect, print */
.print-btn {
  width: 100px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border: 1px solid rgb(213, 213, 213);
  border-radius: 10px;
  gap: 10px;
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  font-weight: 500;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.065);
  transition: all 0.3s;
}
.printer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 100%;
}
.printer-container {
  height: 50%;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.printer-container svg {
  width: 100%;
  height: auto;
  transform: translateY(4px);
}
.printer-page-wrapper {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.printer-page {
  width: 70%;
  height: 10px;
  border: 1px solid black;
  background-color: white;
  transform: translateY(0px);
  transition: all 0.3s;
  transform-origin: top;
}
.print-btn:hover .printer-page {
  height: 16px;
  background-color: rgb(239, 239, 239);
}
.print-btn:hover {
  background-color: rgb(239, 239, 239);
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_ordinary-swan-71.html
================================================
<button class="button">
   <svg viewBox="0 0 448 512" class="bell"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path></svg>
  Notifications
</button>

<style>
/* From Uiverse.io by vinodjangid07 - Tags: gradient, notification, button, hover effect */
.button {
  width: 140px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(to left,rgb(173, 154, 255),rgb(149, 110, 255));
  border-radius: 30px;
  color: rgb(255, 255, 255);
  font-weight: 600;
  border: none;
  position: relative;
  cursor: pointer;
  transition-duration: .2s;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.116);
}

.bell {
  width: 13px;
}

.bell path {
  fill: rgb(255, 255, 255);
}

.button:hover {
  background: linear-gradient(to left,rgb(154, 131, 255),rgb(135, 91, 255));
}

.button:active {
  transform: scale(0.97);
  transition-duration: .2s;
}

.button:hover .bell {
  animation: bellRing 0.9s both;
}

/* bell ringing animation keyframes*/
@keyframes bellRing {
  0%,
  100% {
    transform-origin: top;
  }

  15% {
    transform: rotateZ(10deg);
  }

  30% {
    transform: rotateZ(-10deg);
  }

  45% {
    transform: rotateZ(5deg);
  }

  60% {
    transform: rotateZ(-5deg);
  }

  75% {
    transform: rotateZ(2deg);
  }
}

</style>


================================================
FILE: Buttons/vinodjangid07_pink-cheetah-68.html
================================================
<button class="Btn">
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: gradient, button, hover effect, gold, golden effect , subscribe, premium */
.Btn {
  width: 140px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
  background-size: 250%;
  background-position: left;
  color: #ffd277;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition-duration: 1s;
  overflow: hidden;
}

.Btn::before {
  position: absolute;
  content: "SUBSCRIBE";
  color: #ffd277;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 97%;
  height: 90%;
  border-radius: 8px;
  transition-duration: 1s;
  background-color: rgba(0, 0, 0, 0.842);
  background-size: 200%;
}

.Btn:hover {
  background-position: right;
  transition-duration: 1s;
}

.Btn:hover::before {
  background-position: right;
  transition-duration: 1s;
}

.Btn:active {
  transform: scale(0.95);
}
</style>


================================================
FILE: Buttons/vinodjangid07_pretty-octopus-33.html
================================================
<button class="Btn">
  <span class="leftContainer">
    <svg fill="white" viewBox="0 0 512 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"></path></svg>
    <span class="like">Like</span>
  </span>
  <span class="likeCount">
    2,050
  </span>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, like, click effect */
.Btn {
  width: 140px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.089);
  cursor: pointer;
  background-color: transparent;
}

.leftContainer {
  width: 60%;
  height: 100%;
  background-color: rgb(238, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.leftContainer .like {
  color: white;
  font-weight: 600;
}

.likeCount {
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(238, 0, 0);
  font-weight: 600;
  position: relative;
  background-color: white;
}

.likeCount::before {
  height: 8px;
  width: 8px;
  position: absolute;
  content: "";
  background-color: rgb(255, 255, 255);
  transform: rotate(45deg);
  left: -4px;
}

.Btn:hover .leftContainer {
  background-color: rgb(219, 0, 0);
}

.Btn:active .leftContainer {
  background-color: rgb(201, 0, 0);
}

.Btn:active .leftContainer svg {
  transform: scale(1.15);
  transform-origin: top;
}

</style>


================================================
FILE: Buttons/vinodjangid07_proud-quail-59.html
================================================
 <button class="Btn">
        <svg class="Layer" viewBox="0 0 1095.66 1095.63"><path class="cls-1" d="M1298,749.62c.4,300.41-243,548-548.1,547.9C446.23,1297.4,201.92,1051.2,202.29,749c.37-301.52,244.49-547.41,548.34-547.12C1055.43,202.18,1298.25,449.6,1298,749.62Z" transform="translate(-202.29 -201.89)"></path><path class="cls-2" d="M1285.89,749.79c-.25,297.07-241.24,535.86-536.12,535.66-296.34-.21-537-241.72-535.29-539,1.68-293.16,240.83-534.18,539.15-532.37C1046.8,215.84,1285.62,453.88,1285.89,749.79Z" transform="translate(-202.29 -201.89)"></path><path class="cls-3" d="M1195.29,749.56c.54,244.73-198.67,446.2-446.87,445.33C503.27,1194,304,994.53,304.93,748c.91-244.52,199.12-443.08,444.39-443.49C997.43,304,1195.74,505.59,1195.29,749.56Z" transform="translate(-202.29 -201.89)"></path><path class="cls-4" d="M1097.23,749.87c.22,190.31-154.42,347.43-348,346.92-192-.5-346.48-156.44-346.17-347.7C403.33,558,558.18,402,751.08,402.55,944.62,403.09,1097.69,560.56,1097.23,749.87Z" transform="translate(-202.29 -201.89)"></path><path class="cls-5" d="M1006.72,744.28c2.81,143.23-110.17,257.35-247.42,261.9C613.15,1011,498.22,895.93,493.71,758.88,488.93,613.71,603,498,740.69,493.28,886.73,488.24,1004,603.87,1006.72,744.28Z" transform="translate(-202.29 -201.89)"></path><path class="cls-6" d="M607.55,553.77c5.13,3.72,10.28,7.42,15.4,11.15l124.12,90.24a8.57,8.57,0,0,1,1.2.84c1.26,1.27,2.35,1.09,3.77,0,6.36-4.74,12.82-9.35,19.24-14l118.23-85.89c1.07-.78,2.17-1.54,3.28-2.32.82,1.1,0,2-.27,2.77Q866.29,637.48,840,718.38c-1.11,3.42-1.13,3.42,1.81,5.56l136,98.81c1.17.86,2.33,1.74,3.79,2.83-1.48.73-2.79.45-4,.45q-84.07,0-168.16,0h-.73c-3.7,0-3.68,0-4.8,3.43q-26.1,80.4-52.23,160.78c-.4,1.21-.45,2.66-1.77,3.6L735,948.24q-19.34-59.52-38.68-119c-1-3.16-1-3.17-4.6-3.17q-84.27,0-168.53,0a10.57,10.57,0,0,1-4.24-.34,13.17,13.17,0,0,1,3.33-2.77q67.55-49.08,135.1-98.18c5-3.63,4.38-1.8,2.43-7.83q-25.94-80.07-52-160.11c-.3-.91-.57-1.83-.85-2.75Z" transform="translate(-202.29 -201.89)"></path></svg>
        <p class="text">Hover Me</p>
    </button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, superhero, captain, marvel, captain america */
.Btn {
  position: relative;
  width: 180px;
  height: 50px;
  border: none;
  background-color: #005f99;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 8px 8px 0px rgb(12, 12, 12);
  transition-duration: .3s;
}

.Layer {
  width: 60px;
  position: absolute;
  left: -30px;
  transition-duration: .3s;
  animation: spin 5s  linear infinite;
}

.Btn:hover {
  transform: translateY(5px);
  box-shadow: 3px 3px 0px black;
  transition-duration: .3s;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.Btn:hover .Layer {
  left: 0%;
  width: 100%;
  transition-duration: .3s;
}

.text {
  color: white;
  font-weight: 600;
  font-size: 1.1em;
  position: absolute;
  z-index: 2;
  transition-duration: .1s;
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.Btn:hover .text {
  color: transparent;
  transition-duration: .3s;
}
/* svg colors */
.cls-1 {
  fill: #242021;
}

.cls-2 {
  fill: #e82728;
}

.cls-3 {
  fill: #fefefe;
}

.cls-4 {
  fill: #e92728;
}

.cls-5 {
  fill: #005f99;
}

.cls-6 {
  fill: #fff;
}
/* svg colors */
</style>


================================================
FILE: Buttons/vinodjangid07_quiet-turkey-100.html
================================================
<button class="Btn">
  <span class="svgContainer">
    <svg viewBox="0 0 448 512"><path d="M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z"></path></svg>
  </span>
  <span class="textContainer">Share</span>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, share, hover effect */
.Btn {
  width: 145px;
  height: 45px;
  background: linear-gradient(-45deg, #6bc5f8, #cf59e6, #6bc5f8, #cf59e6);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 5px 5px 0px #4dc6d93d;
  background-size: 400% 400%;
}

.svgContainer {
  width: 45px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.svgContainer svg {
  width: 16px;
}

.svgContainer svg path {
  fill: white;
}

.textContainer {
  width: 100px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

.Btn:hover {
  animation: gradient 5s ease infinite;
}
/* Button's gradient animation */
@keyframes gradient {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}
</style>


================================================
FILE: Buttons/vinodjangid07_rare-stingray-41.html
================================================
<button class="cartBtn">
  <svg class="cart" fill="white" viewBox="0 0 576 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"></path></svg>
  ADD TO CART
  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512" class="product"><path d="M211.8 0c7.8 0 14.3 5.7 16.7 13.2C240.8 51.9 277.1 80 320 80s79.2-28.1 91.5-66.8C413.9 5.7 420.4 0 428.2 0h12.6c22.5 0 44.2 7.9 61.5 22.3L628.5 127.4c6.6 5.5 10.7 13.5 11.4 22.1s-2.1 17.1-7.8 23.6l-56 64c-11.4 13.1-31.2 14.6-44.6 3.5L480 197.7V448c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64V197.7l-51.5 42.9c-13.3 11.1-33.1 9.6-44.6-3.5l-56-64c-5.7-6.5-8.5-15-7.8-23.6s4.8-16.6 11.4-22.1L137.7 22.3C155 7.9 176.7 0 199.2 0h12.6z"></path></svg>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, hover effect, click effect */
.cartBtn {
  width: 155px;
  height: 50px;
  border: none;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: white;
  font-weight: 500;
  position: relative;
  background-color: rgb(29, 29, 29);
  box-shadow: 0 20px 30px -7px rgba(27, 27, 27, 0.219);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  overflow: hidden;
}

.cart {
  z-index: 2;
}

.cartBtn:active {
  transform: scale(0.96);
}

.product {
  position: absolute;
  width: 12px;
  border-radius: 3px;
  content: "";
  left: 23px;
  bottom: 23px;
  opacity: 0;
  z-index: 1;
  fill: rgb(211, 211, 211);
}

.cartBtn:hover .product {
  animation: slide-in-top 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-30px);
    opacity: 1;
  }

  100% {
    transform: translateY(0) rotate(-90deg);
    opacity: 1;
  }
}

.cartBtn:hover .cart {
  animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-10px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>


================================================
FILE: Buttons/vinodjangid07_red-bobcat-62.html
================================================
<button class="Btn">
   <svg class="logoIcon" height="1em" viewBox="0 0 576 512"><path d="M309 106c11.4-7 19-19.7 19-34c0-22.1-17.9-40-40-40s-40 17.9-40 40c0 14.4 7.6 27 19 34L209.7 220.6c-9.1 18.2-32.7 23.4-48.6 10.7L72 160c5-6.7 8-15 8-24c0-22.1-17.9-40-40-40S0 113.9 0 136s17.9 40 40 40c.2 0 .5 0 .7 0L86.4 427.4c5.5 30.4 32 52.6 63 52.6H426.6c30.9 0 57.4-22.1 63-52.6L535.3 176c.2 0 .5 0 .7 0c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40c0 9 3 17.3 8 24l-89.1 71.3c-15.9 12.7-39.5 7.5-48.6-10.7L309 106z"></path></svg>
   <span class="tooltip">Premium</span>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: gradient, button, hover effect, premium */
.Btn {
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(-50deg,rgb(39, 107, 255),rgb(112, 186, 255),rgb(39, 107, 255));
  background-size: 250%;
  background-position: left;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition-duration: .5s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);
}

.logoIcon {
  fill: white;
}

.tooltip {
  position: absolute;
  top: -20px;
  opacity: 0;
  background: linear-gradient(to right,rgb(39, 107, 255),rgb(108, 184, 255));
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: .2s;
  pointer-events: none;
  letter-spacing: 0.5px;
}

.tooltip::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  background: linear-gradient(45deg,rgb(39, 107, 255),rgb(108, 184, 255));
  background-size: 1000%;
  background-position: center;
  transform: rotate(45deg);
  bottom: -15%;
  transition-duration: .3s;
}

.Btn:hover .tooltip {
  top: -50px;
  opacity: 1;
  transition-duration: .3s;
}

.Btn:hover {
  background-position: right;
  transition-duration: .5s;
}
</style>


================================================
FILE: Buttons/vinodjangid07_slippery-fox-79.html
================================================
<button class="deleteButton">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 50 59"
    class="bin"
  >
    <path
      fill="#B5BAC1"
      d="M0 7.5C0 5.01472 2.01472 3 4.5 3H45.5C47.9853 3 50 5.01472 50 7.5V7.5C50 8.32843 49.3284 9 48.5 9H1.5C0.671571 9 0 8.32843 0 7.5V7.5Z"
    ></path>
    <path
      fill="#B5BAC1"
      d="M17 3C17 1.34315 18.3431 0 20 0H29.3125C30.9694 0 32.3125 1.34315 32.3125 3V3H17V3Z"
    ></path>
    <path
      fill="#B5BAC1"
      d="M2.18565 18.0974C2.08466 15.821 3.903 13.9202 6.18172 13.9202H43.8189C46.0976 13.9202 47.916 15.821 47.815 18.0975L46.1699 55.1775C46.0751 57.3155 44.314 59.0002 42.1739 59.0002H7.8268C5.68661 59.0002 3.92559 57.3155 3.83073 55.1775L2.18565 18.0974ZM18.0003 49.5402C16.6196 49.5402 15.5003 48.4209 15.5003 47.0402V24.9602C15.5003 23.5795 16.6196 22.4602 18.0003 22.4602C19.381 22.4602 20.5003 23.5795 20.5003 24.9602V47.0402C20.5003 48.4209 19.381 49.5402 18.0003 49.5402ZM29.5003 47.0402C29.5003 48.4209 30.6196 49.5402 32.0003 49.5402C33.381 49.5402 34.5003 48.4209 34.5003 47.0402V24.9602C34.5003 23.5795 33.381 22.4602 32.0003 22.4602C30.6196 22.4602 29.5003 23.5795 29.5003 24.9602V47.0402Z"
      clip-rule="evenodd"
      fill-rule="evenodd"
    ></path>
    <path fill="#B5BAC1" d="M2 13H48L47.6742 21.28H2.32031L2 13Z"></path>
  </svg>

  <span class="tooltip">Delete</span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: tooltip, button, hover, trash, delete, hover effect, bin */
.deleteButton {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background-color: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.deleteButton svg {
  width: 44%;
}
.deleteButton:hover {
  background-color: rgb(237, 56, 56);
  overflow: visible;
}
.bin path {
  transition: all 0.2s;
}
.deleteButton:hover .bin path {
  fill: #fff;
}
.deleteButton:active {
  transform: scale(0.98);
}
.tooltip {
  --tooltip-color: rgb(41, 41, 41);
  position: absolute;
  top: -40px;
  background-color: var(--tooltip-color);
  color: white;
  border-radius: 5px;
  font-size: 12px;
  padding: 8px 12px;
  font-weight: 600;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.105);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.5s;
}
.tooltip::before {
  position: absolute;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  content: "";
  background-color: var(--tooltip-color);
  bottom: -10%;
}
.deleteButton:hover .tooltip {
  opacity: 1;
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_smart-emu-83.html
================================================
<button class="button">
  <svg viewBox="0 0 448 512" class="svgIcon"><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"></path></svg>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, hover, trash, delete */
.button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(20, 20, 20);
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);
  cursor: pointer;
  transition-duration: .3s;
  overflow: hidden;
  position: relative;
}

.svgIcon {
  width: 12px;
  transition-duration: .3s;
}

.svgIcon path {
  fill: white;
}

.button:hover {
  width: 140px;
  border-radius: 50px;
  transition-duration: .3s;
  background-color: rgb(255, 69, 69);
  align-items: center;
}

.button:hover .svgIcon {
  width: 50px;
  transition-duration: .3s;
  transform: translateY(60%);
}

.button::before {
  position: absolute;
  top: -20px;
  content: "Delete";
  color: white;
  transition-duration: .3s;
  font-size: 2px;
}

.button:hover::before {
  font-size: 13px;
  opacity: 1;
  transform: translateY(30px);
  transition-duration: .3s;
}
</style>


================================================
FILE: Buttons/vinodjangid07_smooth-rabbit-93.html
================================================
<button class="readmore-btn">
  <span class="book-wrapper">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="rgb(86, 69, 117)"
      viewBox="0 0 126 75"
      class="book"
    >
      <rect
        stroke-width="3"
        stroke="#fff"
        rx="7.5"
        height="70"
        width="121"
        y="2.5"
        x="2.5"
      ></rect>
      <line stroke-width="3" stroke="#fff" y2="75" x2="63.5" x1="63.5"></line>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#fff"
        d="M25 20H50"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#fff"
        d="M101 20H76"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#fff"
        d="M16 30L50 30"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#fff"
        d="M110 30L76 30"
      ></path>
    </svg>

    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 65 75"
      class="book-page"
    >
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#fff"
        d="M40 20H15"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#fff"
        d="M49 30L15 30"
      ></path>
      <path
        stroke-width="3"
        stroke="#fff"
        d="M2.5 2.5H55C59.1421 2.5 62.5 5.85786 62.5 10V65C62.5 69.1421 59.1421 72.5 55 72.5H2.5V2.5Z"
      ></path>
    </svg>
  </span>
  <span class="text"> Read more </span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, button, hover, hover effect, read more, read */
.readmore-btn {
  width: fit-contentd;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: rgb(186, 125, 255);
  border: none;
  border-radius: 10px;
  padding: 0px 15px;
  gap: 0px;
  transition: all 0.4s;
}
.book-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: 45px;
  height: 100%;
}
.book-wrapper .book-page {
  width: 50%;
  height: auto;
  position: absolute;
}
.readmore-btn:hover .book-page {
  animation: paging 0.4s linear infinite;
  transform-origin: left;
}
.readmore-btn:hover {
  background-color: rgb(159, 74, 255);
}
@keyframes paging {
  0% {
    transform: rotateY(0deg) skewY(0deg);
  }
  50% {
    transform: rotateY(90deg) skewY(-20deg);
  }
  100% {
    transform: rotateY(180deg) skewY(0deg);
  }
}
.text {
  width: 105px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  color: rgb(255, 255, 255);
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_splendid-panda-48.html
================================================
<button title="filter" class="filter">
  <svg viewBox="0 0 512 512" height="1em">
    <path
      d="M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z"
    ></path>
  </svg>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: button, hover effect, filter, setting */
.filter {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.192);
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.021);
  transition: all 0.3s;
}

.filter svg {
  height: 16px;
  fill: rgb(77, 77, 77);
  transition: all 0.3s;
}
.filter:hover {
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.11);
  background-color: rgb(59, 59, 59);
}
.filter:hover svg {
  fill: white;
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_stale-hound-2.html
================================================
<button class="Btn">
  <svg viewBox="0 0 512 512" class="svgIcon" height="1em"><path d="M288 448H64V224h64V160H64c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H288c35.3 0 64-28.7 64-64V384H288v64zm-64-96H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H224c-35.3 0-64 28.7-64 64V288c0 35.3 28.7 64 64 64z"></path></svg>
  <p class="text">COPY</p>
  <span class="effect"></span>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, neon, copy, hover effect */
.Btn {
  width: 120px;
  height: 45px;
  background-color: rgb(65, 64, 64);
  border: none;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.342);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  position: relative;
  overflow: hidden;
  transition-duration: .5s;
}

.text {
  color: rgb(184, 236, 104);
  font-weight: 800;
  letter-spacing: 1.1px;
  z-index: 2;
}

.svgIcon {
  z-index: 2;
}

.svgIcon path {
  fill: rgb(184, 236, 104);
}

.Btn:hover {
  color: rgb(230, 255, 193);
}

.effect {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: rgb(184, 236, 104);
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  transition-duration: .5s;
}

.Btn:hover .effect {
  transform: scale(15);
  transform-origin: center;
  opacity: 1;
  transition-duration: .5s;
}

.Btn:hover {
  box-shadow: 0px 0px 5px rgb(184, 236, 104),
  0px 0px 10px rgb(184, 236, 104),
  0px 0px 30px rgb(184, 236, 104);
  transition-duration: .7s;
}

.Btn:hover .text {
  color: rgb(65, 64, 64);
}

.Btn:hover .svgIcon path {
  fill: rgb(65, 64, 64);
}
</style>


================================================
FILE: Buttons/vinodjangid07_strange-penguin-42.html
================================================
<button class="Btn-container">
  <span class="inner-wrapper">
    <span class="text">
      <p>Upgrade to</p>
      <p class="pro">PRO</p>
    </span>
    <span class="icon">
      <svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
        ></path>
      </svg>
    </span>
  </span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Website: https://dribbble.com/shots/18149466-Upgrade-to-Pro-Button/attachments/13347110?mode=media - Name: Mobin Madadi - Tags: link, button, hover, active, hover effect, pro, upgrade, redirect */
.Btn-container {
  width: fit-content;
  height: fit-content;
  border: none;
  background-color: #ebebeb;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 2px 5px #e1e1e1;
  transition: 0.2s;
}
.inner-wrapper {
  width: fit-content;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f7f7;
  border-radius: 5px;
  padding: 8px 15px;
  box-shadow: 0px 4px 10px #d3d3d3;
  gap: 50px;
  transition: 0.2s;
}
.text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.text p {
  font-size: 1.2em;
  font-weight: 600;
  color: rgb(140, 140, 140);
}
.text .pro {
  background-color: black;
  color: white;
  padding: 4px 8px;
  border-radius: 5px;
}
.icon {
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
  transition: 0.2s;
}
.icon svg {
  width: 15px;
}
.Btn-container:active {
  transform: scale(1);
}
.Btn-container:active .inner-wrapper {
  transform: scale(0.97);
}
.Btn-container:hover .icon {
  transform: rotate(0deg);
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_tall-termite-79.html
================================================
<button class="Btn">
  Pay
  <svg class="svgIcon" viewBox="0 0 576 512"><path d="M512 80c8.8 0 16 7.2 16 16v32H48V96c0-8.8 7.2-16 16-16H512zm16 144V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V224H528zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm56 304c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H120zm128 0c-13.3 0-24 10.7-24 24s10.7 24 24 24H360c13.3 0 24-10.7 24-24s-10.7-24-24-24H248z"></path></svg>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: icon, button, pay */
.Btn {
  width: 130px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(15, 15, 15);
  border: none;
  color: white;
  font-weight: 600;
  gap: 8px;
  cursor: pointer;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.103);
  position: relative;
  overflow: hidden;
  transition-duration: .3s;
}

.svgIcon {
  width: 16px;
}

.svgIcon path {
  fill: white;
}

.Btn::before {
  width: 130px;
  height: 130px;
  position: absolute;
  content: "";
  background-color: white;
  border-radius: 50%;
  left: -100%;
  top: 0;
  transition-duration: .3s;
  mix-blend-mode: difference;
}

.Btn:hover::before {
  transition-duration: .3s;
  transform: translate(100%,-50%);
  border-radius: 0;
}

.Btn:active {
  transform: translate(5px,5px);
  transition-duration: .3s;
}
</style>


================================================
FILE: Buttons/vinodjangid07_tame-cobra-18.html
================================================
<button class="bin-button">
  <svg
    class="bin-top"
    viewBox="0 0 39 7"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <line y1="5" x2="39" y2="5" stroke="white" stroke-width="4"></line>
    <line
      x1="12"
      y1="1.5"
      x2="26.0357"
      y2="1.5"
      stroke="white"
      stroke-width="3"
    ></line>
  </svg>
  <svg
    class="bin-bottom"
    viewBox="0 0 33 39"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <mask id="path-1-inside-1_8_19" fill="white">
      <path
        d="M0 0H33V35C33 37.2091 31.2091 39 29 39H4C1.79086 39 0 37.2091 0 35V0Z"
      ></path>
    </mask>
    <path
      d="M0 0H33H0ZM37 35C37 39.4183 33.4183 43 29 43H4C-0.418278 43 -4 39.4183 -4 35H4H29H37ZM4 43C-0.418278 43 -4 39.4183 -4 35V0H4V35V43ZM37 0V35C37 39.4183 33.4183 43 29 43V35V0H37Z"
      fill="white"
      mask="url(#path-1-inside-1_8_19)"
    ></path>
    <path d="M12 6L12 29" stroke="white" stroke-width="4"></path>
    <path d="M21 6V29" stroke="white" stroke-width="4"></path>
  </svg>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, button, hover, trash, delete, transition, hover effect, bin */
.bin-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border-radius: 15px;
  background-color: rgb(255, 95, 95);
  cursor: pointer;
  border: 3px solid rgb(255, 201, 201);
  transition-duration: 0.3s;
}
.bin-bottom {
  width: 15px;
}
.bin-top {
  width: 17px;
  transform-origin: right;
  transition-duration: 0.3s;
}
.bin-button:hover .bin-top {
  transform: rotate(45deg);
}
.bin-button:hover {
  background-color: rgb(255, 0, 0);
}
.bin-button:active {
  transform: scale(0.9);
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_thin-duck-22.html
================================================
<button class="Btn">
  
  <div class="sign"><svg viewBox="0 0 512 512"><path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"></path></svg></div>
  
  <div class="text">Logout</div>
</button>



<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, hover, logout */
.Btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition-duration: .3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background-color: rgb(255, 65, 65);
}

/* plus sign */
.sign {
  width: 100%;
  transition-duration: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign svg {
  width: 17px;
}

.sign svg path {
  fill: white;
}
/* text */
.text {
  position: absolute;
  right: 0%;
  width: 0%;
  opacity: 0;
  color: white;
  font-size: 1.2em;
  font-weight: 600;
  transition-duration: .3s;
}
/* hover effect on button width */
.Btn:hover {
  width: 125px;
  border-radius: 40px;
  transition-duration: .3s;
}

.Btn:hover .sign {
  width: 30%;
  transition-duration: .3s;
  padding-left: 20px;
}
/* hover effect button's text */
.Btn:hover .text {
  opacity: 1;
  width: 70%;
  transition-duration: .3s;
  padding-right: 10px;
}
/* button click effect*/
.Btn:active {
  transform: translate(2px ,2px);
}
</style>


================================================
FILE: Buttons/vinodjangid07_tidy-ape-69.html
================================================
<button class="inbox-btn">
  <svg viewBox="0 0 512 512" height="16" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"
    ></path>
  </svg>
  <span class="msg-count">99</span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: black, notification, button, hover effect, inbox */
.inbox-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.082);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #464646;
  cursor: pointer;
  transition: all 0.3s;
}
.inbox-btn svg path {
  fill: white;
}
.inbox-btn svg {
  height: 17px;
  transition: all 0.3s;
}
.msg-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  font-size: 0.7em;
  color: rgb(0, 0, 0);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inbox-btn:hover {
  transform: scale(1.1);
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_tiny-walrus-86.html
================================================
<button class="button">
    <svg fill="white" height="1.5em" class="svgIcon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path></svg>
    <span class="tooltip">Info</span>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, hover effect, shine */
.button {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: rgb(32, 32, 32);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.svgIcon {
  z-index: 2;
}

.button::before {
  width: 35px;
  height: 22px;
  background: linear-gradient(to bottom,rgba(255, 255, 255, 0.575), rgba(0, 0, 0, 0.103));
  position: absolute;
  content: "";
  top: 3.6px;
  border-radius: 50%;
  z-index: 1;
}

.tooltip {
  position: absolute;
  top: -40px;
  opacity: 0;
  background-color: rgb(134, 134, 134);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: .5s;
  pointer-events: none;
  letter-spacing: 0.5px;
}

.button:hover .tooltip {
  opacity: 1;
  transition-duration: .5s;
}

.button:hover {
  background-position: right;
  transition-duration: 1s;
}
</style>


================================================
FILE: Buttons/vinodjangid07_tricky-bullfrog-41.html
================================================
<button class="button">
   <svg viewBox="0 0 448 512" class="bell"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path></svg>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: notification, button, hover effect, click effect */
.button {
  width: 50px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(44, 44, 44);
  border-radius: 50%;
  cursor: pointer;
  transition-duration: .3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.13);
  border: none;
}

.bell {
  width: 18px;
}

.bell path {
  fill: white;
}

.button:hover {
  background-color: rgb(56, 56, 56);
}

.button:hover .bell {
  animation: bellRing 0.9s both;
}

/* bell ringing animation keyframes*/
@keyframes bellRing {
  0%,
  100% {
    transform-origin: top;
  }

  15% {
    transform: rotateZ(10deg);
  }

  30% {
    transform: rotateZ(-10deg);
  }

  45% {
    transform: rotateZ(5deg);
  }

  60% {
    transform: rotateZ(-5deg);
  }

  75% {
    transform: rotateZ(2deg);
  }
}

.button:active {
  transform: scale(0.8);
}

</style>


================================================
FILE: Buttons/vinodjangid07_tricky-rattlesnake-70.html
================================================
 <button>
        <svg class="layer" viewBox="0 0 734.93 1135.91"><defs></defs><path class="cls-1" d="M1.25,0V1128.28c0,6.54,0,6.54,6.52,6.54H734.91c-.22.31.5,1-.5,1h-4q-362.83,0-725.67.09c-3.75,0-4.59-.84-4.59-4.59Q.32,567.92.37,4.52C.37,3-.83,1.11,1.25,0Z" transform="translate(-0.03)"></path><path class="cls-2" d="M574.37,543.4C572.14,538,570,533,568,527.89c-1.14-3-2.79-4-6.06-3.28Q496.49,538.92,431,553.08a54.57,54.57,0,0,1-11.8,1.44c-32.76,0-65.53-.14-98.29.08-11.5.08-22.34-3.17-33.35-5.51q-56.28-12-112.46-24.4c-3.3-.72-5.2-.1-6.33,3.41-1.38,4.25-3.45,8.28-5.11,12.45-.86,2.15-1.56,3.07-3.65.89-4.83-5-9.93-9.84-14.8-14.84-2.73-2.8-3.53-6-2.52-10.07,3.57-14.17,7.83-28.17,9.67-42.76,1.11-8.78-.19-17.35-1.64-25.8-8.61-50.48-8.6-101.37-7.77-152.31.1-6.66.05-13.31.16-20a20.72,20.72,0,0,1,6.95-15.86c12.77-11.66,24.95-24,37.83-35.52,18.35-16.44,41-24.25,64.27-30.4,6.74-1.78,13.58-3.22,20.26-5.19,3.54-1,4.65.08,5.18,3.44,3.27,20.68,6.3,41.41,10.13,62,5,27.12,7.13,54.74,13.88,81.56a148.51,148.51,0,0,0,7.12,21.25c3.17,7.55,8.37,12.17,17,12.18,25,0,49.89.19,74.84.27,3.32,0,6.65-.09,10-.14,9.11-.15,14.71-4.94,18-13.21a179.88,179.88,0,0,0,10.88-40.85c5.45-38,12.37-75.77,18.43-113.68.55-3.44,1-6.9,1.56-10.35.3-2,.65-3.52,3.42-2.79,25.52,6.72,51.55,11.89,74.15,26.77,10.09,6.64,18.41,15.26,27.17,23.4,7.8,7.25,15.4,14.71,23.25,21.89a17.4,17.4,0,0,1,6.09,13.16c.47,49.06,3.21,98.17-4.15,147-2,13.3-3.43,26.7-5,40.07-1.52,12.87,2.26,25.06,5.18,37.33q2.31,9.7,4.82,19.36c.72,2.77.58,5.46-1.39,7.49C587,531.05,580.82,537,574.37,543.4Z" transform="translate(-0.03)"></path><path class="cls-2" d="M278.88,806.78a13.6,13.6,0,0,0-9,9.92c-1.7,6.51-5.84,11.48-9.91,16.53-1,1.17-1.66,2-3.19.84C249.22,828.43,240.7,824,235,816c-3.43-4.85-6.24-10-6.45-16-1.18-33.61-15.46-62-34.05-89-19-27.67-37.83-55.51-54.92-84.45-6-10.12-10.47-20.73-12.25-32.42-.82-5.44.66-10.6,1.64-15.79,2.69-14.21,5.56-28.38,8.4-42.56a39.65,39.65,0,0,1,1.29-4l22.82,22.27c3.69,3.61,7.73,6.93,10.94,10.93,7.85,9.79,18.38,14,30.25,16.5,16.17,3.38,32.24,5.61,48.91,4.24,12.73-1,25.53-1.34,38.19-3.27a56,56,0,0,0,10.56-2.84,11.6,11.6,0,0,0,7.93-8.12c2.06-6.7,4.29-8.17,11.27-8.18q48.9-.09,97.8,0c7.09,0,9.08,1.33,11.11,8.2,1.92,6.5,7.11,8.44,12.63,9.86,8.39,2.15,17.07,2.71,25.65,3.52,27.51,2.6,54.76,1.93,81.27-7.19a22.34,22.34,0,0,0,8.78-5.37c12.67-12.5,25.46-24.88,38.13-37.38,2.6-2.57,3.75-3.23,4.59,1.31,2.62,14.22,5.58,28.38,8.53,42.53,3.43,16.49-1.25,31.21-9.45,45.27-14.92,25.58-31.53,50.07-47.88,74.74-10.54,15.92-22.09,31.24-30,48.82a138.26,138.26,0,0,0-12.27,50.08c-.51,10.61-5.56,18.68-13.21,25.31-4.38,3.79-9.41,6.83-14,10.34-1.92,1.45-3.22,1.76-4.86-.48-3.62-5-7.73-9.55-9.26-15.79A13.83,13.83,0,0,0,458.3,807c-1.67-1.43-3.68-1.3-5.68-1.3H283.53C281.91,805.67,280.16,805.28,278.88,806.78Z" transform="translate(-0.03)"></path><path class="cls-2" d="M441.92,825.09c9.25,1.71,15.53,8,21.52,14.45,4.61,5,8.92,10.31,13.09,15.69,2,2.55,3.17,2.4,5.3.21,9.4-9.65,18.95-19.15,28.46-28.69,1.16-1.16,2.41-2.23,4.26-3.92,2.32,9.92,4.51,19.22,6.68,28.53,1.24,5.35,2.31,10.73,3.7,16,.85,3.22.35,5.56-2.25,8q-17.59,16.23-34.86,32.84c-2.58,2.47-4.79,2.5-7.39.41-6.87-5.51-14.19-10.55-20.53-16.62-8.62-8.25-18.83-11.37-30.29-11.9-4.48-.21-9-.93-13.42-.9-7.39,0-14.25-.91-19.23-7.16a2.31,2.31,0,0,0-.39-.31c-14.91-11.24-46.73-9.55-60.08,3.42-3.24,3.15-7,3.47-11,3.78-10.43.79-20.92.93-31.24,3a25,25,0,0,0-11.1,5.29c-8.81,7.08-17.72,14-26.51,21.14-3,2.4-5.14,2.34-8-.48q-16.67-16.14-33.83-31.75c-2.93-2.67-3.88-5.2-2.9-9.14,3.27-13.22,6.14-26.54,9.31-39.79.3-1.29,0-3.4,1.76-3.73,1.37-.25,2.1,1.42,3,2.34,9.58,9.71,19.21,19.37,28.64,29.22,2.48,2.6,3.89,2.54,6.12-.23,5.73-7.12,11.16-14.51,18-20.66,4.62-4.16,9.57-7.73,15.84-9,1.39-.84,2.92-.47,4.39-.47H437.46C439,824.66,440.51,824.38,441.92,825.09Z" transform="translate(-0.03)"></path><path class="cls-3" d="M278.88,806.78c.91-2.46,3-1.6,4.71-1.6q84.56-.07,169.09,0c1.92,0,4.49-1.16,5.59,1.78-3.13-.28-6.25-.81-9.38-.81q-79.8-.07-159.6,0C285.81,806.12,282.31,805.92,278.88,806.78Z" transform="translate(-0.03)"></path><path class="cls-4" d="M441.92,825.09H294.58c2.79-1.57,5.79-1.07,8.79-1.07q65.43-.09,130.86,0C436.77,824,439.51,823.52,441.92,825.09Z" transform="translate(-0.03)"></path></svg>
        <p>Hover Me</p>
    </button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: red, button, superhero, iron man */
button {
  position: relative;
  width: 180px;
  height: 50px;
  border: none;
  background-color: rgb(231, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: hidden;
  border-radius: 0px;
  cursor: pointer;
  box-shadow: 8px 8px 0px rgb(12, 12, 12);
  transition-duration: .3s;
}

.layer {
  width: 60px;
  position: absolute;
  left: -30px;
  transition-duration: .3s;
  fill: #ffaf02;
}

button:hover {
  transform: translateY(5px);
  box-shadow: 3px 3px 0px rgb(0, 0, 0);
  transition-duration: .3s;
}

button:hover .layer {
  left: 0%;
  width: 100%;
  transition-duration: .3s;
}

button p {
  color: white;
  font-weight: 600;
  font-size: 14px;
  position: absolute;
  z-index: 2;
  transition-duration: .1s;
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

button:hover p {
  color: transparent;
  transition-duration: .3s;
}

</style>


================================================
FILE: Buttons/vinodjangid07_wet-catfish-4.html
================================================
<button class="BugButton">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 43 42"
    class="bugsvg"
  >
    <path
      stroke-width="4"
      stroke="#cfcfcf"
      d="M20 7H23C26.866 7 30 10.134 30 14V28.5C30 33.1944 26.1944 37 21.5 37C16.8056 37 13 33.1944 13 28.5V14C13 10.134 16.134 7 20 7Z"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="4"
      stroke="#cfcfcf"
      d="M18 2V7"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="4"
      stroke="#cfcfcf"
      d="M25 2V7"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="4"
      stroke="#cfcfcf"
      d="M31 22H41"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="4"
      stroke="#cfcfcf"
      d="M2 22H12"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="4"
      stroke="#cfcfcf"
      d="M12.5785 15.2681C3.5016 15.2684 4.99951 12.0004 5 4"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="4"
      stroke="#cfcfcf"
      d="M12.3834 29.3877C3.20782 29.3874 4.72202 32.4736 4.72252 40.0291"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="4"
      stroke="#cfcfcf"
      d="M30.0003 14.8974C39.0545 15.553 37.7958 12.1852 38.3718 4.20521"
    ></path>
    <path
      stroke-linecap="round"
      stroke-width="4"
      stroke="#cfcfcf"
      d="M29.9944 29.7379C39.147 29.1188 37.8746 32.2993 38.4568 39.8355"
    ></path>
  </svg>

  <span class="tooltip">Bug Report</span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: tooltip, button, hover, hover effect, bug, report */
.BugButton {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background-color: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.BugButton svg {
  width: 44%;
}
.BugButton:hover {
  background-color: rgb(61, 41, 71);
  overflow: visible;
}
.bugsvg path {
  transition: all 0.2s;
}
.BugButton:hover .bugsvg path {
  stroke: #fff;
}
.BugButton:active {
  transform: scale(0.98);
}
.tooltip {
  --tooltip-color: rgb(41, 41, 41);
  position: absolute;
  top: -40px;
  background-color: var(--tooltip-color);
  color: white;
  border-radius: 5px;
  font-size: 12px;
  padding: 8px 12px;
  font-weight: 600;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.105);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.5s;
  min-width: 100px;
}
.tooltip::before {
  position: absolute;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  content: "";
  background-color: var(--tooltip-color);
  bottom: -10%;
}
.BugButton:hover .tooltip {
  opacity: 1;
}

</style>
    

================================================
FILE: Buttons/vinodjangid07_wonderful-squid-57.html
================================================
<button class="Btn">
   <svg class="svgIcon" viewBox="0 0 384 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path></svg>
   <span class="icon2"></span>
   <span class="tooltip">Download</span>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, download, hover effect */
.Btn {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: rgb(27, 27, 27);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition-duration: .3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);
}

.svgIcon {
  fill: rgb(214, 178, 255);
}

.icon2 {
  width: 18px;
  height: 5px;
  border-bottom: 2px solid rgb(182, 143, 255);
  border-left: 2px solid rgb(182, 143, 255);
  border-right: 2px solid rgb(182, 143, 255);
}

.tooltip {
  position: absolute;
  right: -105px;
  opacity: 0;
  background-color: rgb(12, 12, 12);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: .2s;
  pointer-events: none;
  letter-spacing: 0.5px;
}

.tooltip::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  background-color: rgb(12, 12, 12);
  background-size: 1000%;
  background-position: center;
  transform: rotate(45deg);
  left: -5%;
  transition-duration: .3s;
}

.Btn:hover .tooltip {
  opacity: 1;
  transition-duration: .3s;
}

.Btn:hover {
  background-color: rgb(150, 94, 255);
  transition-duration: .3s;
}

.Btn:hover .icon2 {
  border-bottom: 2px solid rgb(235, 235, 235);
  border-left: 2px solid rgb(235, 235, 235);
  border-right: 2px solid rgb(235, 235, 235);
}

.Btn:hover .svgIcon {
  fill: rgb(255, 255, 255);
  animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

</style>


================================================
FILE: Buttons/vinodjangid07_wonderful-yak-52.html
================================================
<button class="Btn">
 <span class="svgContainer">
   <svg fill="white" viewBox="0 0 496 512" height="1.6em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
 </span>
 <span class="BG"></span>
</button>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, github, button hover effect  */
.Btn {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  /* overflow: hidden; */
  border-radius: 7px;
  cursor: pointer;
  transition: all .3s;
}

.svgContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(0px);
  letter-spacing: 0.8px;
  border-radius: 10px;
  transition: all .3s;
  border: 1px solid rgba(156, 156, 156, 0.466);
}

.BG {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #181818;
  z-index: -1;
  border-radius: 10px;
  pointer-events: none;
  transition: all .3s;
}

.Btn:hover .BG {
  transform: rotate(35deg);
  transform-origin: bottom;
}

.Btn:hover .svgContainer {
  background-color: rgba(156, 156, 156, 0.466);
  backdrop-filter: blur(4px);
}

</style>


================================================
FILE: Buttons/vinodjangid07_young-snake-87.html
================================================
<button class="editBtn">
  <svg height="1em" viewBox="0 0 512 512">
    <path
      d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
    ></path>
  </svg>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, button, edit, hover effect */
.editBtn {
  width: 55px;
  height: 55px;
  border-radius: 20px;
  border: none;
  background-color: rgb(93, 93, 116);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.123);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}
.editBtn::before {
  content: "";
  width: 200%;
  height: 200%;
  background-color: rgb(102, 102, 141);
  position: absolute;
  z-index: 1;
  transform: scale(0);
  transition: all 0.3s;
  border-radius: 50%;
  filter: blur(10px);
}
.editBtn:hover::before {
  transform: scale(1);
}
.editBtn:hover {
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.336);
}

.editBtn svg {
  height: 17px;
  fill: white;
  z-index: 3;
  transition: all 0.2s;
  transform-origin: bottom;
}
.editBtn:hover svg {
  transform: rotate(-15deg) translateX(5px);
}
.editBtn::after {
  content: "";
  width: 25px;
  height: 1.5px;
  position: absolute;
  bottom: 19px;
  left: -5px;
  background-color: white;
  border-radius: 2px;
  z-index: 2;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease-out;
}
.editBtn:hover::after {
  transform: scaleX(1);
  left: 0px;
  transform-origin: right;
}

</style>
    

================================================
FILE: Buttons/virus231_fat-mouse-84.html
================================================
<button class="button">Button</button>

<style>
/* From Uiverse.io by virus231  - Tags: button, gradients, hover effect, advanced */
.button {
  background: linear-gradient(140.14deg, #ec540e 15.05%, #d6361f 114.99%)
      padding-box,
    linear-gradient(142.51deg, #ff9465 8.65%, #af1905 88.82%) border-box;
  border-radius: 7px;
  border: 2px solid transparent;

  text-shadow: 1px 1px 1px #00000040;
  box-shadow: 8px 8px 20px 0px #45090059;

  padding: 10px 40px;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.3s;
  color: white;
  font-size: 18px;
  font-weight: 500;
}

.button:hover {
  box-shadow: none;
  opacity: 80%;
}

</style>
    

================================================
FILE: Buttons/vishal2231179_breezy-insect-31.html
================================================
<button class="button">Play it</button>

<style>
/* From Uiverse.io by vishal2231179  - Tags: black, button, game, click animation, hover button, #button, 3d button, button hover effect  */
.button {
  cursor: pointer;
  padding: 15px 40px 15px 40px;
  border-radius: 10px;
  border-style: double;
  font-weight: 600;
  background-image: linear-gradient(
    rgb(54, 53, 53),
    rgb(0, 0, 0),
    rgb(54, 54, 54)
  );
  color: rgb(164, 164, 162);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  border-color: rgb(0, 0, 0);
  transition: 400ms;
}

.button:hover {
  transition: 400ms;
  border-style: double;
  border-color: rgb(208, 207, 207);
  color: rgb(219, 216, 216);
  font-size: 16px;
  text-shadow: 1px 10px 5px rgb(61, 61, 61);
}

</style>
    

================================================
FILE: Buttons/vishal2231179_giant-frog-58.html
================================================
<button class="button" type="submit">
  <svg viewBox="0 0 576 512" class="svg" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z"
      fill="#74C0FC"
    ></path>
  </svg>
  Hover Me
</button>

<style>
/* From Uiverse.io by vishal2231179  - Tags: button, light&dark, hover effect, hoverme, hover button, 3d button, button hover effect , generate button */
.button {
  cursor: pointer;
  /* padding: 15px; */
  padding: 20px;
  width: 190px;
  /* background-color: rgb(43, 43, 43); */
  border-radius: 30px;
  font-weight: 600;
  font-size: 20px;
  border-style: double;
  border-color: rgba(74, 61, 255, 0.753);

  color: rgba(126, 185, 236, 0.968);
  background-image: linear-gradient(to right, rgb(14, 15, 58), rgb(49, 3, 118));
  /* border-color: rgb(67, 67, 67); */
  transition: 300ms;
}
.button:hover {
  border-color: rgb(100, 43, 215);
  border-top-right-radius: 5%;
  border-bottom-left-radius: 5%;

  box-shadow: 0px 5px 10px 1px rgb(0, 0, 0);
  font-size: 22px;
  transition: 400px;
}
.svg {
  height: 20px;
}

</style>
    

================================================
FILE: Buttons/vishalparajuli_warm-snake-99.html
================================================
  <div class="button">
    <div class="button__front">rocket</div>
    <div class="button__back">roll</div>
  </div>
<style>
/* From Uiverse.io by vishalparajuli - Tags: button, 3d button, 3d card */
.button {
  width: 100px;
  height: 50px;
  position: relative;
  perspective: 800px;
}

.button__front,
  .button__back {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  background-color: #3498db;
  border-radius: 5px;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 0.5s ease;
}

.button__back {
  background-color: #e74c3c;
  transform: rotateY(180deg);
}

.button:hover .button__front {
  transform: rotateY(-180deg);
}

.button:hover .button__back {
  transform: rotateY(0);
}
</style>


================================================
FILE: Buttons/vladaxnt_neat-badger-22.html
================================================
<button class="button">
  <div class="border">
    <div class="outer">
      <div class="inner">
        <svg
          class="icon"
          width="26"
          height="26"
          viewBox="0 0 26 26"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g filter="url(#filter0_d_253_3447)">
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M22.8417 5.93711C23.5329 3.62302 21.377 1.46711 19.0629 2.15834L5.19469 6.30079C2.9915 6.95888 2.29064 9.7318 3.91654 11.3577L5.29411 12.7353C6.54198 13.9831 8.43704 14.3033 10.0203 13.5481L14.8037 8.76481C15.199 8.36951 15.8399 8.36951 16.2352 8.76481C16.6305 9.16011 16.6305 9.80102 16.2352 10.1963L11.4519 14.9797C10.6967 16.563 11.0169 18.458 12.2647 19.7059L13.6423 21.0835C15.2682 22.7094 18.0411 22.0085 18.6992 19.8053L22.8417 5.93711ZM9.08131 15.9187C7.20189 16.1789 5.25956 15.5637 3.8626 14.1668L2.48504 12.7892C-0.224811 10.0794 0.943288 5.45784 4.61528 4.36102L18.4835 0.218565C22.3403 -0.933473 25.9335 2.65971 24.7814 6.51653L20.639 20.3847C19.5422 24.0567 14.9206 25.2248 12.2108 22.515L10.8332 21.1374C9.43626 19.7404 8.82111 17.7981 9.08131 15.9187Z"
              fill="#171717"
            ></path>
          </g>
          <defs>
            <filter
              id="filter0_d_253_3447"
              x="0"
              y="0"
              width="26"
              height="26"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
              <feColorMatrix
                in="SourceAlpha"
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                result="hardAlpha"
              ></feColorMatrix>
              <feOffset dy="1"></feOffset>
              <feGaussianBlur stdDeviation="0.5"></feGaussianBlur>
              <feComposite in2="hardAlpha" operator="out"></feComposite>
              <feColorMatrix
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
              ></feColorMatrix>
              <feBlend
                mode="normal"
                in2="BackgroundImageFix"
                result="effect1_dropShadow_253_3447"
              ></feBlend>
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="effect1_dropShadow_253_3447"
                result="shape"
              ></feBlend>
            </filter>
          </defs>
        </svg>
        <span>Send Message</span>
      </div>
    </div>
  </div>
</button>

<style>
/* From Uiverse.io by vladaxnt  - Tags: button, hover, active, message, shadow, rotate, click effect */
.icon,
.button {
  transition: box-shadow 0.3s cubic-bezier(0.075, 0.82, 0.165, 1),
    transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.button {
  background: none;
  border: none;
  border-radius: 56px;
  cursor: pointer;
  color: #171717;
  box-shadow: 0px 127px 36px 0px rgba(23, 23, 23, 0),
    0px 81px 33px 0px rgba(23, 23, 23, 0.01),
    0px 46px 27px 0px rgba(23, 23, 23, 0.05),
    0px 20px 20px 0px rgba(23, 23, 23, 0.09),
    0px 5px 11px 0px rgba(23, 23, 23, 0.1);
}

.button span {
  font-size: 18px;
  line-height: 36px;
  font-weight: 500;
  text-shadow: 0px 1px 1px rgba(23, 23, 23, 0.25);
}

.button .inner {
  background: linear-gradient(0deg, #fff 0%, #edeeee 100%);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 56px;
}

.button .outer {
  padding: 6px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 25.56%, #ebebeb 115.56%);
}

.button .border {
  padding: 3px;
  border-radius: 20px;
  border: 1px solid #f0f0f0;
  background: linear-gradient(180deg, #e3e3e3 0%, #7d7d7d 100%);
}

.button:hover .icon {
  transform: rotate(45deg);
}

.button:hover {
  transform: scale(1.03);
  box-shadow: 0px 185px 52px 0px rgba(23, 23, 23, 0),
    0px 119px 47px 0px rgba(23, 23, 23, 0.01),
    0px 67px 40px 0px rgba(23, 23, 23, 0.05),
    0px 30px 30px 0px rgba(23, 23, 23, 0.09),
    0px 7px 16px 0px rgba(23, 23, 23, 0.1);
}

.button:active {
  transform: scale(0.94);
  box-shadow: 0px 43px 12px 0px rgba(23, 23, 23, 0),
    0px 28px 11px 0px rgba(23, 23, 23, 0.01),
    0px 16px 9px 0px rgba(23, 23, 23, 0.05),
    0px 7px 7px 0px rgba(23, 23, 23, 0.09),
    0px 2px 4px 0px rgba(23, 23, 23, 0.1);
}

</style>
    

================================================
FILE: Buttons/wang3616359git_bright-turkey-74.html
================================================
<button class="bt" id="bt">
    <span class="msg" id="msg"></span>
    SEND
</button>
<style>
/* From Uiverse.io by wang3616359git - Tags: button */
.bt {
  border: none;
  user-select: none;
  font-size: 18px;
  color: white;
  text-align: center;
  background-color: #0873bd;
  box-shadow: #cacaca 2px 2px 10px 1px;
  border-radius: 12px;
  height: 60px;
  line-height: 60px;
  width: 155px;
  transition: all 0.2s ease;
  position: relative;
}

.msg {
  height: 0;
  width: 0;
  border-radius: 2px;
  position: absolute;
  left: 15%;
  top: 25%;
}

.bt:active {
  transition: all 0.001s ease;
  background-color: #5d9fcd;
  box-shadow: #97989a 0 0 0 0;
  transform: translateX(1px) translateY(1px);
}

.bt:hover .msg {
  animation: msgRun 2s forwards;
}

@keyframes msgRun {
  0% {
    border-top: #d6d6d9 0 solid;
    border-bottom: #f2f2f5 0 solid;
    border-left: #f2f2f5 0 solid;
    border-right: #f2f2f5 0 solid;
  }

  20% {
    border-top: #d6d6d9 14px solid;
    border-bottom: #f2f2f5 14px solid;
    border-left: #f2f2f5 20px solid;
    border-right: #f2f2f5 20px solid;
  }

  25% {
    border-top: #d6d6d9 12px solid;
    border-bottom: #f2f2f5 12px solid;
    border-left: #f2f2f5 18px solid;
    border-right: #f2f2f5 18px solid;
  }

  80% {
    border-top: transparent 12px solid;
    border-bottom: transparent 12px solid;
    border-left: transparent 18px solid;
    border-right: transparent 18px solid;
  }

  100% {
    transform: translateX(150px);
    border-top: transparent 12px solid;
    border-bottom: transparent 12px solid;
    border-left: transparent 18px solid;
    border-right: transparent 18px solid;
  }
}
</style>


================================================
FILE: Buttons/wang3616359git_hard-pig-94.html
================================================
<button class="bt">
  Button

</button>
<style>
/* From Uiverse.io by wang3616359git - Tags: button */
.bt {
  border: none;
  color: white;
  font-weight: 600;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
        /*background-color: #0985e8;*/
  background-color: rgba(92, 215, 152,0.8);
  height: 40px;
  width: 100px;
  clip-path: polygon(
                0 0,5% 0,5% 15%,10% 15%,10% 0,100% 0,
                100% 75%,95% 75%,95% 85%,100% 85%,100% 100%,
                50% 100%,50% 85%,45% 85%,45% 100%,0 100%,
                0 65%,5% 65%,5% 50%,0 50%,0 0
        );
  border-top-right-radius: 5px;
  border-right: #aebdb7 2px solid;
  border-bottom: #b0bab1 2px solid;
  transition: all 0.6s ease;
}

.bt:active {
  transition: all 0.01s ease;
  border-right: #aebdb7 0 solid;
  border-bottom: #b0bab1 0 solid;
  user-select: none;
  transform: translateX(1px) translateY(1px);
}
</style>


================================================
FILE: Buttons/watchakorn-18k_chilly-cow-66.html
================================================
<button class="btn-space space">
  Button
</button>
<style>
/* From Uiverse.io by watchakorn-18k - Tags: gradient, button, transition */
.btn-space {
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  background-size: 500% auto;
  font-weight: bold;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.103);
  border-radius: 10px;
}

.btn-space:hover {
  background-position: right center;
  border-image-source: linear-gradient(90deg, #d53a9d,#743ad5 );
  -webkit-box-shadow: 0 0 20px #743ad5;
  box-shadow: 0 0 20px #743ad5;
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 10px #d53a9d;
}

.space {
  background-image: -webkit-gradient(linear, left top, right top, from(#743ad5), color-stop(51%, #d53a9d), to(#743ad5));
  background-image: linear-gradient(to right, #743ad5 0%, #d53a9d 51%, #743ad5 100%);
  border-image-source: linear-gradient(45deg, #743ad5, #d53a9d );
  border-image-outset: 1em;
}




</style>


================================================
FILE: Buttons/willeumsk_nice-panda-73.html
================================================
<!-- From Uiverse.io by willeumsk  - Tags: blue, social, twitter, button, shadow, glow -->
<ul class="mb-4 mt-4 list-none space-x-1">
  <li class="inline-block text-left">
    <a
      class="relative mb-1 inline-block cursor-pointer select-none overflow-hidden whitespace-nowrap rounded p-2 text-center align-middle text-xs font-medium leading-5 tracking-wide text-slate-800 transition duration-300 ease-linear hover:text-blue-400 hover:shadow-2xl hover:shadow-blue-600"
      href=""
    >
      <span class="sr-only hidden">Twitter</span>
      <svg
        stroke="currentColor"
        fill="currentColor"
        aria-label="Twitter"
        aria-hidden="true"
        viewBox="0 0 24 24"
        class="h-8 w-8 fill-current"
      >
        <g>
          <path
            d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
          ></path>
        </g>
      </svg>
    </a>
  </li>
</ul>


    

================================================
FILE: Buttons/wizard503_breezy-tiger-28.html
================================================
<div class="btn-container">
  <button type="submit" name="space-button" id="space-btn">
    <span>Look Up</span>
    <span class="moon"><span class="moon1"></span></span>
    <span class="planet"></span>
    <div class="star" style="left: 119.273px;
        top: 18.0747px;
        animation-delay: 3.37051s;
        transform: scale(1.1);"></div>
    <div class="star" style="left: 22.2022px;
        top: 10.69534px;
        animation-delay: 4.9s;
        transform: scale(2.22);"></div>
    <div class="star" style="left: 14.754px;
        top: 25.2924px;
        animation-delay: 0.05s;
        transform: scale(0.1);"></div>
    <div class="star" style="left: 95.948px;
        top: 54.8942px;
        animation-delay: 3.1s;
        transform: scale(1.87);"></div>
    <div class="star" style="left: 184.622px;
        top: 20.0923px;
        animation-delay: 2.8s;
        transform: scale(1.77);"></div>
    <div class="star" style="left: 142.1px;
        top: 22.3542px;
        animation-delay: 2.73988s;
        transform: scale(1.62715);"></div>
    <div class="star" style="left: 145.079px;
        top: 6.97553px;
        animation-delay: 0.0408754s;
        transform: scale(0.468075);"></div>
    <div class="star" style="left: 42.2308px;
        top: 9.78383px;
        animation-delay: 4.58407s;
        transform: scale(0.0422065);"></div>
    <div class="star" style="left: 91.2734px;
        top: 14.0408px;
        animation-delay: 2.05927s;
        transform: scale(0.11997);"></div>
    <div class="star" style="left: 35.6985px;
        top: 52.6403px;
        animation-delay: 3.07343s;
        transform: scale(0.672992);"></div>
    <div class="star" style="left: 76.4191px;
        top: 48.453px;
        animation-delay: 2.35679s;
        transform: scale(2.001);"></div>
    <div class="star" style="left: 154.027px;
        top: 45.9848px;
        animation-delay: 3.723s;
        transform: scale(1.4118);"></div>
    <div class="star" style="left: 110.241px;
        top: 20.2684px;
        animation-delay: 2.94906s;
        transform: scale(1.2193);"></div>
    <div class="star" style="left: 12.602px;
        top: 19.8836px;
        animation-delay: 4.072s;
        transform: scale(1.49026);"></div>
    <div class="star" style="left: 30.0911px;
        top: 37.9746px;
        animation-delay: 1.02002s;
        transform: scale(1.41008);"></div>
    <div class="star" style="left: 62.3096px;
        top: 9.64604px;
        animation-delay: 3.9445s;
        transform: scale(0.231214);"></div>
    <div class="star" style="left: 44.7189px;
        top: 32.4307px;
        animation-delay: 4.78921s;
        transform: scale(0.359408);"></div>
    <div class="star" style="left: 191.866px;
        top: 27.151px;
        animation-delay: 1.34451s;
        transform: scale(1.13484);"></div>
    <div class="star" style="left: 47.6744px;
        top: 3.00604px;
        animation-delay: 1.04567s;
        transform: scale(0.682023);"></div>
    <div class="star" style="left: 98.6225px;
        top: 49.6115px;
        animation-delay: 2.41384s;
        transform: scale(1.96254);"></div>
    <div class="star" style="left: 57.4785px;
        top: 29.6588px;
        animation-delay: 3.3569s;
        transform: scale(1.53118);"></div>
    <div class="star" style="left: 13.2213px;
        top: 24.538px;
        animation-delay: 1.69582s;
        transform: scale(1.6236);"></div>
    <div class="star" style="left: 56.9067px;
        top: 51.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="left: 139.8361px;
        top: 45.3876px;
        animation-delay: 1.28648s;
        transform: scale(0.566118);"></div>
    <div class="star" style="right: 40.9067px;
        top: 21.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 30.9067px;
        top: 26.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 30.9067px;
        top: 16.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 20.9067px;
        top: 10.904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 40.9067px;
        top: 8.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="left: 80.9067px;
        top: 8.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="left: 100.9067px;
        top: 6.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="left: 130.9067px;
        top: 8.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 80.9067px;
        top: 5.9904px;
        animation-delay: 4.74375s;
        transform: scale(1.9999998);"></div>
    <div class="star" style="right: 45.9067px;
        top: 35.9904px;
        animation-delay: 4.74375s;
        transform: scale(1.999998);"></div>
    <div class="star" style="right: 85.9067px;
        top: 44.9904px;
        animation-delay: 4.74375s;
        transform: scale(1.99998998);"></div>
  </button>
</div>

<style>
/* From Uiverse.io by wizard503 - Tags: button */
button#space-btn {
  width: 200px;
  height: 60px;
  position: relative;
  border: none;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  box-shadow: inset 0px 0px 21px #3b2ad5;
  background: #03001e;
  cursor: pointer;
}

button#space-btn:hover {
  background: linear-gradient(180deg, #3b2ad5 0%,#88007d 60%,#ff0055c4 100%);
  box-shadow: 0px 5px 10px #03001e,inset 0px 5px 10px #8611d4,inset 0 -5px 10px #ff0055a1;
}

.btn-container:hover {
  background: #03001e;
  box-shadow: 0px -10px 40px #9611d4,0px 5px 10px #00a2ffe3,inset 0px 10px 21px #3b2ad5;
}

.btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
  width: 205px;
  height: 65px;
  background: linear-gradient(0deg, #88007d 0%,#ff0055c4 100%);
}

button span {
  color: white;
  font-weight: bold;
  font-size: 20px;
}

button div.star {
  opacity: 0;
  position: absolute;
  border-radius: 100%;
  background-color: white;
  width: 1px;
  height: 1px;
}

button:hover .star {
  opacity: 1;
}

button .planet {
  margin-left: -2.5em;
  opacity: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  position: absolute;
  background: linear-gradient(rgb(255, 0, 0), transparent),linear-gradient(to top left, rgb(255, 0, 212), transparent), linear-gradient(to top right, rgb(251, 255, 0), transparent);
  background-blend-mode: screen;
  background-size: 100% 200%;
  filter: drop-shadow(0px 0px 4px rgb(82, 59, 16));
}

button:hover .planet {
  z-index: 1;
  opacity: 1;
  animation: orbita 6s reverse linear infinite;
}

.planet::after {
  content: '';
  width: 40px;
  height: 10px;
  border: 3px solid #813dff;
  filter: drop-shadow(0px 0px 1px #cf3333);
  border-width: 0px 3px 3px 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(15deg);
  border-radius: 50%;
}

.planet::before {
  position: absolute;
  color: rgb(255, 0, 0);
  visibility: hidden;
}

.moon {
  margin-left: -3rem;
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0px 0px 10px 5px rgb(146, 146, 140);
}

.moon::after {
  position: absolute;
  content: '';
  margin-top: 15%;
  box-shadow: 0px 0px 10px 3px #333;
  margin-left: -10%;
  border-radius: 100%;
  width: 3px;
  height: 3px;
  background-color: rgb(121, 121, 121);
}

.moon1::after {
  position: absolute;
  content: '';
  margin-top: 65%;
  box-shadow: 0px 0px 8px 3px #333;
  margin-left: -9px;
  border-radius: 100%;
  width: 2px;
  height: 2px;
  background-color: rgb(121, 121, 121);
}

.moon::before {
  position: absolute;
  content: '';
  margin-top: 30%;
  margin-left: -30%;
  border-radius: 100%;
  box-shadow: 0px 0px 8px 1px rgb(3, 3, 3);
  width: 5px;
  height: 5px;
  background-color: rgb(134, 133, 133);
}

.moon1::before {
  position: absolute;
  content: '';
  margin-top: 70%;
  margin-left: 4%;
  border-radius: 100%;
  box-shadow: -5px 1px 4px 3px rgb(134, 133, 133);
  width: 2px;
  height: 2px;
  background-color: rgb(134, 133, 133);
}

button span.moon,span.moon1 {
  opacity: 0;
}

button:hover span.moon,span.moon1 {
  z-index: -1;
  opacity: 1;
  animation: orbita 2.7s linear infinite;
}

@keyframes orbita {
  0% {
    transform: rotate(0deg);
    transform: translateX(90px);
  }

  100% {
    rotate: 360deg;
    transform: translateX(90px);
  }
}
</style>


================================================
FILE: Buttons/wizard503_lucky-mouse-88.html
================================================
<div class="share">
  <a class="fb" href="">
    <svg
      class="facebook"
      id="IconChangeColor"
      viewBox="0 0 15 30"
      height="80"
      width="90"
    >
      <path
        fill="#ffffff"
        id="mainIconPathAttribute"
        d="M23.446 18l0.889-5.791h-5.557v-3.758c0-1.584 0.776-3.129 3.265-3.129h2.526v-4.93c0 0-2.292-0.391-4.484-0.391-4.576 0-7.567 2.774-7.567 7.795v4.414h-5.087v5.791h5.087v14h6.26v-14z"
      ></path>
    </svg>
  </a>
  <a class="tw" href="">
    <svg
      class="twitter"
      width="50"
      height="85"
      fill="currentColor"
      viewBox="0 0 16 16"
      id="IconChangeColor"
    >
      <path
        d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
        id="mainIconPathAttribute"
        fill="#ffffff"
      ></path>
    </svg>
  </a>
  <a class="ins" href="">
    <svg
      id="IconChangeColor"
      viewBox="0 0 16 25"
      class="instagram"
      fill="currentColor"
      height="70"
      width="90"
    >
      <path
        fill="#ffffff"
        id="mainIconPathAttribute"
        d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"
      ></path>
    </svg>
  </a>
  <a class="wh" href="">
    <svg
      width="50"
      height="50"
      class="whatsapp"
      fill="white"
      viewBox="0 0 16 16"
    >
      <path
        fill="#ffffff"
        d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"
      ></path>
    </svg>
  </a>
</div>

<style>
/* From Uiverse.io by wizard503  - Tags: social, button, share */
.share {
  width: 150px;
  height: 150px;
  margin: 5em auto;
  background: rgba(10, 237, 189, 1);
  background: -webkit-radial-gradient(
    top left,
    rgba(10, 237, 189, 1),
    rgba(37, 211, 103, 1)
  );
  background: -moz-radial-gradient(
    top left,
    rgba(10, 237, 189, 1),
    rgba(37, 211, 103, 1)
  );
  background: radial-gradient(
    to bottom right,
    rgba(10, 237, 189, 1),
    rgba(37, 211, 103, 1)
  );
  text-align: center;
  border-radius: 100%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
}

.share a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 90px;
  height: 90px;
  position: relative;
  z-index: 1;
}

.share::after {
  content: "Share";
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  font-size: 25px;
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
}

.share:hover::after {
  color: transparent;
}

.share:hover {
  background: rgba(242, 41, 92, 1);
  background: -webkit-radial-gradient(
    top left,
    rgba(242, 41, 92, 1),
    rgba(41, 172, 225, 1)
  );
  background: -moz-radial-gradient(
    top left,
    rgba(242, 41, 92, 1),
    rgba(41, 172, 225, 1)
  );
  background: radial-gradient(
    to bottom right,
    rgba(242, 41, 92, 1),
    rgba(41, 172, 225, 1)
  );
}

.share a.fb {
  background: #1266f1;
  top: -5.65em;
  left: -2.83em;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.share a.tw {
  background: #28abe1;
  top: -6.55em;
  right: -9.39em;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.share a.ins {
  background: #f2295b;
  bottom: 6.7em;
  left: -7.5em;
  -webkit-tra3nsition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.share a.wh {
  background: #25d366;
  right: -2.81em;
  bottom: 7.5em;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.share:hover a.fb {
  top: -0.96em;
}

.share:hover a.tw {
  right: -2.8em;
}

.share:hover a.ins {
  left: -2.84em;
}

.share:hover a.wh {
  bottom: 12.3em;
}

.facebook {
  padding-top: 45%;
}

.instagram {
  padding-left: 30%;
  padding-top: 15%;
}

.whatsapp {
  padding-left: 15%;
  padding-top: 15%;
}

.twitter {
  padding-top: 25%;
  padding-left: 10%;
}

.fb:hover {
  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5) inset;
}

.tw:hover {
  box-shadow: 10px 5px 30px 2px rgba(0, 0, 0, 0.5) inset;
}

.ins:hover {
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5) inset;
}

.wh:hover {
  box-shadow: 10px 20px 20px rgba(0, 0, 0, 0.5) inset;
}

</style>
    

================================================
FILE: Buttons/xXJollyHAKERXx_swift-fly-20.html
================================================
<button class="button1"> Button
</button>
<style>
/* From Uiverse.io by xXJollyHAKERXx - Tags: simple, gradient, button */
.button1 {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 font-size: 16px;
 font-weight: 400;
 height: 45px;
 width: 85px;
 border: 0px solid;
 background-image: linear-gradient(45deg,blue,#00f0a0,blue);
 background-size: 500% 400%;
 color: white;
 border-radius: 50px;
 transition: 0.6s all;
}

.button1:hover {
 background-position: 75% 50%;
 transform: perspective(100px)
}

.button1:active {
 transform: scale(0.95);
 transition: 0.1s;
}
</style>


================================================
FILE: Buttons/xantha01_fresh-earwig-7.html
================================================
<a class="swipe">Get Started <span class="container"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="currentColor"></path></svg></span> </a>
<style>
/* From Uiverse.io by xantha01 - Tags: button, arrow, startbutton  */
.swipe {
  position: relative;
  background-color: #F1F7F7;
  width: 200px;
  height: 60px;
  color: rgba(255, , 204, 1);
  border-radius: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  letter-spacing: 2px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.35);
  border-left: 0.5px solid rgba(0, 0, 0, 0.35);
  padding-left: 40px;
  cursor: pointer;
  transition: 0.35s ease;
}

.swipe:hover {
  padding-left: 0;
  padding-right: 40px;
  color: #324B4C;
}

.container {
  position: absolute;
  left: 5px;
  width: 50px;
  height: 50px;
  background: #7AB5B7;
  border-radius: 50%;
  transition: 0.35s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f1f4f7;
}

.swipe:hover .container {
  left: calc(100% - 55px);
  color: #324B4C;
}
</style>


================================================
FILE: Buttons/xueyuantan_rotten-pig-19.html
================================================
<button> Pick up!
</button>
<style>
/* From Uiverse.io by xueyuantan - Tags: button */
button {
 width: 9em;
 height: 3em;
 border-radius: 30em;
 font-size: 15px;
 font-family: inherit;
 border: none;
 position: relative;
 overflow: hidden;
 z-index: 1;
 box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

button::before {
 content: '';
 width: 0;
 height: 3em;
 border-radius: 30em;
 position: absolute;
 top: 0;
 left: 0;
 background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%);
 transition: .5s ease;
 display: block;
 z-index: -1;
}

button:hover::before {
 width: 9em;
}
</style>


================================================
FILE: Buttons/yaasiinaxmed_serious-stingray-77.html
================================================
<button>
    Button
</button>
<style>
/* From Uiverse.io by yaasiinaxmed - Tags: button */
button {
  --color: #0077ff;
  font-family: inherit;
  display: inline-block;
  width: 6em;
  height: 2.6em;
  line-height: 2.5em;
  overflow: hidden;
  margin: 20px;
  font-size: 17px;
  z-index: 1;
  color: var(--color);
  border: 2px solid var(--color);
  border-radius: 6px;
  position: relative;
}

button::before {
  position: absolute;
  content: "";
  background: var(--color);
  width: 150px;
  height: 200px;
  z-index: -1;
  border-radius: 50%;
}

button:hover {
  color: white;
}

button:before {
  top: 100%;
  left: 100%;
  transition: .3s all;
}

button:hover::before {
  top: -30px;
  left: -30px;
}
</style>


================================================
FILE: Buttons/yaroslavas2001_lovely-fox-50.html
================================================
<button class="btn">
    <div class="wrapper">
        <p class="text">Flowers </p>

        <div class="flower flower1">
            <div class="petal one"></div>
            <div class="petal two"></div>
            <div class="petal three"></div>
            <div class="petal four"></div>
        </div>
        <div class="flower flower2">
            <div class="petal one"></div>
            <div class="petal two"></div>
            <div class="petal three"></div>
            <div class="petal four"></div>
        </div>
        <div class="flower flower3">
            <div class="petal one"></div>
            <div class="petal two"></div>
            <div class="petal three"></div>
            <div class="petal four"></div>
        </div>
        <div class="flower flower4">
            <div class="petal one"></div>
            <div class="petal two"></div>
            <div class="petal three"></div>
            <div class="petal four"></div>
        </div>
        <div class="flower flower5">
            <div class="petal one"></div>
            <div class="petal two"></div>
            <div class="petal three"></div>
            <div class="petal four"></div>
        </div>
        <div class="flower flower6">
            <div class="petal one"></div>
            <div class="petal two"></div>
            <div class="petal three"></div>
            <div class="petal four"></div>
        </div>
    </div>
</button>
<style>
/* From Uiverse.io by yaroslavas2001 - Tags: button */
.btn {
  height: 4em;
  width: 12em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0px solid black;
}

.wrapper {
  height: 2em;
  width: 8em;
  position: relative;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 17px;
  z-index: 1;
  color: #000;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  transition: all 0.5s ease;
}

.flower {
  display: grid;
  grid-template-columns: 1em 1em;
  position: absolute;
  transition: grid-template-columns 0.8s ease;
}

.flower1 {
  top: -12px;
  left: -13px;
  transform: rotate(5deg);
}

.flower2 {
  bottom: -5px;
  left: 8px;
  transform: rotate(35deg);
}

.flower3 {
  bottom: -15px;
  transform: rotate(0deg);
}

.flower4 {
  top: -14px;
  transform: rotate(15deg);
}

.flower5 {
  right: 11px;
  top: -3px;
  transform: rotate(25deg);
}

.flower6 {
  right: -15px;
  bottom: -15px;
  transform: rotate(30deg);
}

.petal {
  height: 1em;
  width: 1em;
  border-radius: 40% 70% / 7% 90%;
  background: linear-gradient(#07a6d7, #93e0ee);
  border: 0.5px solid #96d1ec;
  z-index: 0;
  transition: width 0.8s ease, height 0.8s ease;
}

.two {
  transform: rotate(90deg);
}

.three {
  transform: rotate(270deg);
}

.four {
  transform: rotate(180deg);
}

.btn:hover .petal {
  background: linear-gradient(#0761d7, #93bdee);
  border: 0.5px solid #96b4ec;
}

.btn:hover .flower {
  grid-template-columns: 1.5em 1.5em;
}

.btn:hover .flower .petal {
  width: 1.5em;
  height: 1.5em;
}

.btn:hover .text {
  background: rgba(255, 255, 255, 0.4);
}

.btn:hover div.flower1 {
  animation: 15s linear 0s normal none infinite running flower1;
}

@keyframes flower1 {
  0% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(365deg);
  }
}

.btn:hover div.flower2 {
  animation: 13s linear 1s normal none infinite running flower2;
}

@keyframes flower2 {
  0% {
    transform: rotate(35deg);
  }

  100% {
    transform: rotate(-325deg);
  }
}

.btn:hover div.flower3 {
  animation: 16s linear 1s normal none infinite running flower3;
}

@keyframes flower3 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.btn:hover div.flower4 {
  animation: 17s linear 1s normal none infinite running flower4;
}

@keyframes flower4 {
  0% {
    transform: rotate(15deg);
  }

  100% {
    transform: rotate(375deg);
  }
}

.btn:hover div.flower5 {
  animation: 20s linear 1s normal none infinite running flower5;
}

@keyframes flower5 {
  0% {
    transform: rotate(25deg);
  }

  100% {
    transform: rotate(-335deg);
  }
}

.btn:hover div.flower6 {
  animation: 15s linear 1s normal none infinite running flower6;
}

@keyframes flower6 {
  0% {
    transform: rotate(30deg);
  }

  100% {
    transform: rotate(390deg);
  }
}
</style>


================================================
FILE: Buttons/yash-mishra150_plastic-zebra-0.html
================================================
<!-- From Uiverse.io by yash-mishra150  - Tags: button, hover button, gradient border -->
<button
  class="cursor-pointer w-28 h-10 font-poppins text-lg border-solid border-2 border-slate-400 rounded-3xl active:shadow-none hover:shadow-lg duration-300 transition hover:text-white hover:bg-gradient-to-r from-[#F28500] to-[#FF00FF] rounded p-1"
>
  <span
    class="h-9 bg-black hover:text-white rounded-3xl p-1 px-6 transition duration-300"
  >
    Button
  </span>
</button>


    

================================================
FILE: Buttons/yuuzuk_fat-owl-93.html
================================================
<!-- From Uiverse.io by yuuzuk  - Tags: simple, glassmorphism, animation, green, minimalist, button, clean, tailwind -->
<button
  class="text-zinc-700 hover:text-green-600 backdrop-blur-lg bg-gradient-to-tr from-transparent via-[rgba(121,121,121,0.16)] to-transparent rounded-md py-2 px-6 shadow hover:shadow-green-600 duration-700"
>
  Button
</button>


    

================================================
FILE: Buttons/z1789976172_blue-rat-89.html
================================================
<div class="btn btn--huge">
  <div class="btn--huge__text">
    <div>
      Explore More
      <span>Explore More</span>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by z1789976172 - Source: https://www.respawn.com/ - Tags: button, animal, hover button */
:after,:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.btn--huge {
  cursor: pointer;
  position: relative;
  height: 45px;
  background-color: #ff4e33;
  text-transform: uppercase;
  display: inline-block;
  color: fff;
  font-family: Arial;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 0 20px 0 50px;
  white-space: nowrap;
}

.btn--huge:before {
  -webkit-transition: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.5s cubic-bezier(0.785, 0.15 , 0.15, 0.86);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #D6D4D3;
}

.btn--huge:after {
  -webkit-transition: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.5s cubic-bezier(0.785, 0.15 , 0.15, 0.86);
  content: '→';
  font-size: 14px;
  line-height: 1;
  color: #D6D4D3;
  position: absolute;
  left: 20px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: #FF4E33;
  z-index: 2;
  border-radius: 50%;
  border: 1px solid #D6D4D3;
}

.btn--huge__text {
  position: relative;
  top: -1px;
  -webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  height: 100%;
  display: flex;
  align-items: center;
}

.btn--huge__text div {
  position: relative;
  color: #fff;
}

.btn--huge__text span {
  -webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  top: 0;
  left: 0;
  color: #000;
  width: 0;
}

.btn--huge:hover:after {
  -webkit-transform: translateX(-30px);
  transform: translateX(-30px);
}

.btn--huge:hover:before {
  width: 0;
}

.btn--huge:hover .btn--huge__text span {
  width: 100%;
}
</style>


================================================
FILE: Buttons/zanina-yassine_curly-shrimp-52.html
================================================
<div class="tab-container">
  <input type="radio" name="tab" id="tab1" class="tab tab--1" />
  <label class="tab_label" for="tab1">Profile</label>

  <input type="radio" name="tab" id="tab2" class="tab tab--2" />
  <label class="tab_label" for="tab2">Settings</label>

  <input type="radio" name="tab" id="tab3" class="tab tab--3" />
  <label class="tab_label" for="tab3">Notifications</label>

  <div class="indicator"></div>
</div>

<style>
/* From Uiverse.io by zanina-yassine  - Tags: minimalist, ios, navigation, tabs */
/* Remove this container when use*/
.component-title {
  width: 100%;
  position: absolute;
  z-index: 999;
  top: 30px;
  left: 0;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #888;
  text-align: center;
}

.tab-container {
  position: relative;

  display: flex;
  flex-direction: row;
  align-items: flex-start;

  padding: 2px;

  background-color: #dadadb;
  border-radius: 9px;
}

.indicator {
  content: "";
  width: 130px;
  height: 28px;
  background: #ffffff;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 9;
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
  border-radius: 7px;
  transition: all 0.2s ease-out;
}

.tab {
  width: 130px;
  height: 28px;
  position: absolute;
  z-index: 99;
  outline: none;
  opacity: 0;
}

.tab_label {
  width: 130px;
  height: 28px;

  position: relative;
  z-index: 999;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;

  font-size: 0.75rem;
  opacity: 0.6;

  cursor: pointer;
}

.tab--1:checked ~ .indicator {
  left: 2px;
}

.tab--2:checked ~ .indicator {
  left: calc(130px + 2px);
}

.tab--3:checked ~ .indicator {
  left: calc(130px * 2 + 2px);
}

</style>
    

================================================
FILE: Buttons/zanina-yassine_perfect-penguin-77.html
================================================
<button class="button">Sign Up</button>

<style>
/* From Uiverse.io by zanina-yassine  - Tags: blue, minimalist, gradient, button, hover, rounded, dark, glow */
.button {
  min-width: 120px;

  position: relative;
  cursor: pointer;

  padding: 12px 17px;
  border: 0;
  border-radius: 7px;

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  background: radial-gradient(
    ellipse at bottom,
    rgba(71, 81, 92, 1) 0%,
    rgba(11, 21, 30, 1) 45%
  );

  color: rgb(255, 255, 255, 0.66);

  transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.button::before {
  content: "";
  width: 70%;
  height: 1px;

  position: absolute;
  bottom: 0;
  left: 15%;

  background: rgb(255, 255, 255);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0.2;

  transition: all 1s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.button:hover {
  color: rgb(255, 255, 255, 1);
  transform: scale(1.1) translateY(-3px);
}

.button:hover::before {
  opacity: 1;
}

</style>
    

================================================
FILE: Buttons/zanina-yassine_shy-octopus-85.html
================================================
<div class="btn-container">
<button id="space-btn" name="space-button" type="submit">
  <span>Let's Go to Space</span>
<div style="position: absolute; left: 119.273px; top: 18.0747px; animation-delay: 3.37051s; transform: scale(0.196521);" class="star"></div><div style="position: absolute; left: 166.774px; top: 47.4519px; animation-delay: 3.03913s; transform: scale(0.33078);" class="star"></div><div style="position: absolute; left: 238.677px; top: 19.6434px; animation-delay: 3.85796s; transform: scale(1.29037);" class="star"></div><div style="position: absolute; left: 22.2022px; top: 4.69534px; animation-delay: 4.9415s; transform: scale(1.82231);" class="star"></div><div style="position: absolute; left: 206.74px; top: 40.7685px; animation-delay: 1.59195s; transform: scale(1.01375);" class="star"></div><div style="position: absolute; left: 241.531px; top: 14.2516px; animation-delay: 1.67616s; transform: scale(0.811597);" class="star"></div><div style="position: absolute; left: 14.754px; top: 25.2924px; animation-delay: 0.0348248s; transform: scale(0.102529);" class="star"></div><div style="position: absolute; left: 220.444px; top: 43.9803px; animation-delay: 1.5106s; transform: scale(0.16088);" class="star"></div><div style="position: absolute; left: 95.948px; top: 54.8942px; animation-delay: 3.18662s; transform: scale(1.7822);" class="star"></div><div style="position: absolute; left: 30.3484px; top: 36.5984px; animation-delay: 4.30868s; transform: scale(1.16326);" class="star"></div><div style="position: absolute; left: 184.622px; top: 20.0923px; animation-delay: 2.83829s; transform: scale(1.27781);" class="star"></div><div style="position: absolute; left: 142.1px; top: 22.3542px; animation-delay: 2.73988s; transform: scale(1.62715);" class="star"></div><div style="position: absolute; left: 145.079px; top: 6.97553px; animation-delay: 0.0408754s; transform: scale(0.468075);" class="star"></div><div style="position: absolute; left: 6.67886px; top: 38.4849px; animation-delay: 3.84019s; transform: scale(0.272217);" class="star"></div><div style="position: absolute; left: 201.17px; top: 39.9168px; animation-delay: 2.93587s; transform: scale(0.521258);" class="star"></div><div style="position: absolute; left: 224.215px; top: 42.9903px; animation-delay: 0.895495s; transform: scale(0.0458902);" class="star"></div><div style="position: absolute; left: 42.2308px; top: 9.78383px; animation-delay: 4.58407s; transform: scale(0.0422065);" class="star"></div><div style="position: absolute; left: 91.2734px; top: 14.0408px; animation-delay: 2.05927s; transform: scale(0.11997);" class="star"></div><div style="position: absolute; left: 35.6985px; top: 52.6403px; animation-delay: 3.07343s; transform: scale(0.672992);" class="star"></div><div style="position: absolute; left: 76.4191px; top: 48.453px; animation-delay: 2.35679s; transform: scale(1.46957);" class="star"></div><div style="position: absolute; left: 184.503px; top: 4.18267px; animation-delay: 1.43409s; transform: scale(0.606616);" class="star"></div><div style="position: absolute; left: 221.039px; top: 54.2493px; animation-delay: 2.92356s; transform: scale(0.638665);" class="star"></div><div style="position: absolute; left: 185.612px; top: 44.3px; animation-delay: 1.36401s; transform: scale(1.65012);" class="star"></div><div style="position: absolute; left: 154.027px; top: 45.9848px; animation-delay: 3.723s; transform: scale(1.4118);" class="star"></div><div style="position: absolute; left: 220.591px; top: 4.95194px; animation-delay: 0.363098s; transform: scale(0.52369);" class="star"></div><div style="position: absolute; left: 236.028px; top: 11.1663px; animation-delay: 3.67493s; transform: scale(0.956478);" class="star"></div><div style="position: absolute; left: 110.241px; top: 20.2684px; animation-delay: 2.94906s; transform: scale(1.2193);" class="star"></div><div style="position: absolute; left: 12.602px; top: 19.8836px; animation-delay: 4.072s; transform: scale(1.49026);" class="star"></div><div style="position: absolute; left: 30.0911px; top: 37.9746px; animation-delay: 1.02002s; transform: scale(1.41008);" class="star"></div><div style="position: absolute; left: 62.3096px; top: 9.64604px; animation-delay: 3.9445s; transform: scale(0.231214);" class="star"></div><div style="position: absolute; left: 44.7189px; top: 32.4307px; animation-delay: 4.78921s; transform: scale(0.359408);" class="star"></div><div style="position: absolute; left: 191.866px; top: 27.151px; animation-delay: 1.34451s; transform: scale(1.13484);" class="star"></div><div style="position: absolute; left: 47.6744px; top: 3.00604px; animation-delay: 1.04567s; transform: scale(0.682023);" class="star"></div><div style="position: absolute; left: 98.6225px; top: 49.6115px; animation-delay: 2.41384s; transform: scale(1.96254);" class="star"></div><div style="position: absolute; left: 57.4785px; top: 29.6588px; animation-delay: 3.3569s; transform: scale(1.53118);" class="star"></div><div style="position: absolute; left: 13.2213px; top: 24.538px; animation-delay: 1.69582s; transform: scale(1.6236);" class="star"></div><div style="position: absolute; left: 131.656px; top: 31.1837px; animation-delay: 1.29918s; transform: scale(1.84486);" class="star"></div><div style="position: absolute; left: 56.9067px; top: 51.9904px; animation-delay: 4.74375s; transform: scale(0.749788);" class="star"></div><div style="position: absolute; left: 82.8361px; top: 54.3876px; animation-delay: 1.28648s; transform: scale(0.566118);" class="star"></div><div style="position: absolute; left: 193.213px; top: 43.9428px; animation-delay: 0.390178s; transform: scale(1.411);" class="star"></div><div style="animation-delay: 1.2122s;" class="shooting-star shooting-star-1"></div><div style="animation-delay: 0.777895s;" class="shooting-star shooting-star-2"></div><div style="animation-delay: 4.90483s;" class="shooting-star shooting-star-3"></div><div style="animation-delay: 3.66012s;" class="shooting-star shooting-star-4"></div></button>
</div>
<style>
/* From Uiverse.io by zanina-yassine - Tags: button */
button#space-btn {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 0;
  outline: 0;
  border-radius: 11px;
  background: #03001e;
  background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);
  cursor: pointer;
}

.btn-container {
  width: 200px;
  height: 60px;
  position: relative;
  overflow: visible;
}

.btn-container::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 20px;
  z-index: -1;
  background: #03001e;
  background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);
  filter: blur(20px);
  opacity: 0;
}

.btn-container:hover {
  transform: scale(1.1);
  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.btn-container:hover:after {
  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
  opacity: 0.6;
}

button span {
  color: white;
  font-weight: 700;
  font-size: 16px;
}

button#space-btn div.star {
  width: 1px;
  height: 1px;
  background-color: white;
  border-radius: 50%;
  animation: blink 2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

button#space-btn div.shooting-star {
  width: 80px;
  height: 1px;
  position: absolute;
  background: linear-gradient(80deg, #ffffffff, #ffffff00);
  border-radius: 50%;
  transform: rotate(-40deg);
  opacity: 0
}

button#space-btn div.shooting-star-1 {
  animation: fallingStar1 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

button#space-btn div.shooting-star-2 {
  animation: fallingStar2 2s 10s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

button#space-btn div.shooting-star-3 {
  animation: fallingStar3 8s 20s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

button#space-btn div.shooting-star-4 {
  animation: fallingStar4 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

@keyframes blink {
  0% {
    box-shadow: 0 0 10px 0 white;
  }

  50% {
    box-shadow: 0 0 10px 2px white;
  }

  100% {
    box-shadow: 0 0 10px 0 white;
  }
}

@keyframes fallingStar1 {
  0% {
    top: -10px;
    left: 220px;
    opacity: 1;
  }

  100% {
    top: 200px;
    left: -20px;
    opacity: 1;
  }
}

@keyframes fallingStar2 {
  0% {
    top: -10px;
    left: 150px;
    opacity: 1;
  }

  100% {
    top: 200px;
    left: -90px;
    opacity: 1;
  }
}

@keyframes fallingStar3 {
  0% {
    top: -10px;
    left: 80px;
    opacity: 1
  }

  100% {
    top: 200px;
    left: -160px;
    opacity: 1
  }
}

@keyframes fallingStar4 {
  0% {
    top: -10px;
    left: 0px;
    opacity: 1;
  }

  100% {
    top: 200px;
    left: -240px;
    opacity: 1;
  }
}

</style>


================================================
FILE: Buttons/zebra76966_brown-emu-91.html
================================================
<button class="c-button">
  <span class="c-main">
    <span class="c-ico"><span class="c-blur"></span> <span class="ico-text">+</span></span>
    button
  </span>
</button>

<style>
/* From Uiverse.io by zebra76966 - Tags: button, dark, 3d button */
button {
  border: none;
}

.c-button {
  background: linear-gradient(140deg, rgba(75, 118, 200, 1) 0%, rgba(31, 70, 145, 1) 100%);
  border-radius: 45px;
  font-size: 25px;
  text-align: left;
  padding: 11px 0px 11px 0px;
  border: 4px solid rgb(37, 37, 37) !important;
  border-style: outset;
  box-shadow: -6px -5px 18px rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.c-button .c-main {
  border-radius: 45px;
  color: rgba(255, 255, 255, 1);
  padding: 11px 25px 11px 2px;
  box-shadow: inset 0px 0px 5px rgba(17, 17, 17, 0);
  transition: all 0.5s ease-in-out;
  border: 1px solid transparent;
}

.c-ico .c-blur {
  background: linear-gradient(318deg, rgba(75, 118, 200, 1) 0%, rgba(31, 70, 145, 1) 100%);
  border-radius: 100%;
  margin-left: 0;
  padding: 8px 23px;
  filter: blur(1px);
  text-align: center;
}

.c-ico {
  position: relative;
  margin-right: 20px;
}

.c-ico .ico-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Hovering */

.c-button .c-main:hover {
  box-shadow: inset 0px 0px 5px rgba(17, 17, 17, 0.6);
  border: 1px solid rgba(26, 26, 26,0.5);
  color: rgba(255, 255, 255, 0.5);
}

</style>


================================================
FILE: Buttons/zebra76966_polite-ape-16.html
================================================
<button class="rainbow-btn">
  <div class="content">
    <svg
      viewBox="0 0 16 16"
      class="bi bi-lightning-charge-fill"
      fill="currentColor"
      height="25"
      width="25"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"
      ></path>
    </svg>

    Join now
  </div>
</button>

<style>
/* From Uiverse.io by zebra76966  - Tags: animation, gradient, button, click animation */
.rainbow-btn {
  border: 2px;
  border-radius: 35px;
  width: 18em;
  font-size: 2rem;
  padding: 28px 28px;
  color: black;
  background: transparent;
  position: relative;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.rainbow-btn::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  content: "";
  height: 4.3em;
  border-radius: 35px;
  width: 18em;
  filter: blur(1px);
  background: radial-gradient(
      at 0% 0%,
      hsla(312, 66%, 67%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 28% 79%, hsla(355, 80%, 64%, 1) 0px, transparent 50%),
    radial-gradient(at 100% 1%, hsla(279, 96%, 65%, 1) 0px, transparent 50%),
    radial-gradient(at 5% 91%, hsla(289, 80%, 70%, 1) 0px, transparent 50%),
    radial-gradient(at 50% 37%, hsla(28, 100%, 74%, 1) 0px, transparent 50%),
    radial-gradient(at 27% 38%, hsla(189, 0%, 100%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 1) 0px, transparent 50%),
    radial-gradient(at 64% 78%, hsla(340, 100%, 76%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 1) 0px, transparent 50%),
    radial-gradient(at 72% 55%, hsla(240, 68%, 97%, 1) 0px, transparent 50%),
    radial-gradient(at 51% 14%, hsla(28, 100%, 74%, 1) 0px, transparent 50%);
}

.rainbow-btn .content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 8px;
  font-weight: 500;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  box-shadow: inset 0 0 1px 2px rgba(255, 255, 255, 0.712);
}
.rainbow-btn .content::before {
  content: " ";
  border: 10px double rgba(247, 201, 232, 0.5);
  border-radius: 35px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 17em;
  height: 3em;
  padding: 10px 8px;
  position: absolute;
  z-index: 2;
}

.rainbow-btn .content svg {
  margin-right: 10px;
}

.rainbow-btn:hover {
  scale: 1.1;
}
.rainbow-btn:focus {
  scale: 0.9;
}

</style>
    

================================================
FILE: Buttons/zjssun_curly-seahorse-76.html
================================================
<button class="button">
  Button
</button>
<style>
/* From Uiverse.io by zjssun - Tags: button */
.button {
  position: relative;
  padding: 10px 22px;
  border-radius: 6px;
  border: none;
  color: #fff;
  cursor: pointer;
  background-color: #7d2ae8;
  transition: all 0.2s ease;
}

.button:active {
  transform: scale(0.96);
}

.button:before,
.button:after {
  position: absolute;
  content: "";
  width: 150%;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1000;
  background-repeat: no-repeat;
}

.button:hover:before {
  top: -70%;
  background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #7d2ae8 20%, transparent 30%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
  background-position: 50% 120%;
  animation: greentopBubbles 0.6s ease;
}

@keyframes greentopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }

  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
      50% 50%, 65% 20%, 90% 30%;
  }

  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

.button:hover::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 50% 0%;
  animation: greenbottomBubbles 0.6s ease;
}

@keyframes greenbottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
      70% -10%, 70% 0%;
  }

  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
      105% 0%;
  }

  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
      110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
</style>


================================================
FILE: Buttons/zjssun_popular-puma-6.html
================================================
<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg" height="8em" viewBox="0 0 384 512" class="svg2"><path d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z"></path></svg>
  <svg xmlns="http://www.w3.org/2000/svg" height="8em" viewBox="0 0 384 512" class="svg"><path d="M297.2 248.9C311.6 228.3 320 203.2 320 176c0-70.7-57.3-128-128-128S64 105.3 64 176c0 27.2 8.4 52.3 22.8 72.9c3.7 5.3 8.1 11.3 12.8 17.7l0 0c12.9 17.7 28.3 38.9 39.8 59.8c10.4 19 15.7 38.8 18.3 57.5H109c-2.2-12-5.9-23.7-11.8-34.5c-9.9-18-22.2-34.9-34.5-51.8l0 0 0 0c-5.2-7.1-10.4-14.2-15.4-21.4C27.6 247.9 16 213.3 16 176C16 78.8 94.8 0 192 0s176 78.8 176 176c0 37.3-11.6 71.9-31.4 100.3c-5 7.2-10.2 14.3-15.4 21.4l0 0 0 0c-12.3 16.8-24.6 33.7-34.5 51.8c-5.9 10.8-9.6 22.5-11.8 34.5H226.4c2.6-18.7 7.9-38.6 18.3-57.5c11.5-20.9 26.9-42.1 39.8-59.8l0 0 0 0 0 0c4.7-6.4 9-12.4 12.7-17.7zM192 128c-26.5 0-48 21.5-48 48c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-44.2 35.8-80 80-80c8.8 0 16 7.2 16 16s-7.2 16-16 16zm0 384c-44.2 0-80-35.8-80-80V416H272v16c0 44.2-35.8 80-80 80z"></path></svg>
  
</button>
<style>
/* From Uiverse.io by zjssun - Tags: button */
.button {
  position: relative;
  list-style: none;
  border: none;
  background-color: transparent;
  border-radius: 50%;
  cursor: grab;
}

.button .svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: all 0.3s;
}

.button .svg2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  fill: #f4af03;
  opacity: 0;
  transition: opacity 0.3s;
}

.button:hover .svg {
  fill: #f4af03;
}

.button:hover .svg2 {
  opacity: 1;
  fill: #f4af03;
}
</style>


================================================
FILE: Buttons/zjssun_tidy-sloth-40.html
================================================
<button id="btn">
  Button
</button>
<style>
/* From Uiverse.io by zjssun - Tags: button, neon */
button {
  padding: 10px 20px;
  text-transform: uppercase;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff80;
  text-shadow: none;
  background: transparent;
  box-shadow: transparent;
  border: 1px solid #ffffff80;
  transition: 0.5s ease;
  user-select: none;
}

#btn:hover,:focus {
  color: #ffffff;
  background: #008cff;
  border: 1px solid #008cff;
  text-shadow: 0 0 5px #ffffff,
              0 0 10px #ffffff,
              0 0 20px #ffffff;
  box-shadow: 0 0 5px #008cff,
              0 0 20px #008cff,
              0 0 50px #008cff,
              0 0 100px #008cff;
}
</style>


================================================
FILE: Buttons/znvscripts_stale-tiger-99.html
================================================
<button>Button</button>

<style>
/* From Uiverse.io by znvscripts  - Tags: simple, button, click effect */
button {
  position: relative;
  background: transparent;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  touch-action: manipulation;
  font-size: 1.1rem;
  color: white;
  box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.3);
  background: rgb(255, 0, 0);
  border-radius: 12px;
  padding: 12px 27px;
  border: 3px solid black;
}

button:hover {
  filter: brightness(110%);
}

button:active {
  transform: translateY(2px);
  transition: transform 34ms;
}

</style>
    

================================================
FILE: Cards/05akalan57_thin-sloth-31.html
================================================
<!-- From Uiverse.io by 05akalan57  - Tags: card, border, css effect -->
<div
  class="relative drop-shadow-xl w-48 h-64 overflow-hidden rounded-xl bg-[#3d3c3d]"
>
  <div
    class="absolute flex items-center justify-center text-white z-[1] opacity-90 rounded-xl inset-0.5 bg-[#323132]"
  >
    CARD
  </div>
  <div class="absolute w-56 h-48 bg-white blur-[50px] -left-1/2 -top-1/2"></div>
</div>


    

================================================
FILE: Cards/0senno_warm-cheetah-38.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by 0senno  - Tags: simple, card, Discord, smooth */
.card {
  max-width: 500px;
  margin: 0 auto;
  background-color: #1e1e1e;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.image {
  width: 100%;
  max-width: 180px;
  display: block;
  margin: auto;
}

.heading {
  font-size: 1.5rem;
  color: #fff;
  padding: 20px 0;
}

.icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #2e2e2e;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.icons a:hover {
  background-color: #405de6;
}

.icons svg {
  fill: #fff;
  width: 30px;
  height: 30px;
}

</style>
    

================================================
FILE: Cards/0xnihilism_average-mole-62.html
================================================
<div class="card">
  <div class="banner">
    <span class="banner-text">SUBSCRIBE</span>
    <span class="banner-text">JOIN US</span>
  </div>
  <span class="card__title">Nihilism</span>
  <p class="card__subtitle">Get fresh void to your inbox every week.</p>
  <form class="card__form">
    <input placeholder="Your Email" type="email" required="" />
    <button class="sign-up">Sign up</button>
  </form>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: 3d, card, clean, Brutalism */
.card {
  width: 320px;
  padding: 30px;
  background: #fff;
  border: 8px solid #000;
  box-shadow: 15px 15px 0 #000;
  transform: rotate(-2deg);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.card:active {
  animation: shake 0.5s ease-in-out;
}
.card:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 20px 20px 0 #000;
}
.banner {
  position: absolute;
  top: 3px;
  right: -95px;
  background: #000;
  color: #fff;
  padding: 15px;
  width: 350px;
  text-align: center;
  transform: rotate(45deg);
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 2px;
  overflow: hidden;
  transition: background 0.5s ease;
}
.banner-text {
  display: inline-block;
  transition: opacity 0.5s ease, transform 0.5s ease;
  width: 100%;
  position: absolute;
  left: 13%;
  top: 50%;
  transform: translateY(-50%);
}
.banner:hover .banner-text:first-child {
  opacity: 0;
  transform: translateY(-100%);
}
.banner:hover .banner-text:last-child {
  opacity: 1;
  transform: translateY(-40%);
}
.banner-text:last-child {
  opacity: 0;
  transform: translateY(60%);
}
.banner:hover {
  background: red;
}
.card__title {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
  border-bottom: 2px solid #000;
  width: 50%; /* or any other percentage or pixel value */
}
.card__subtitle {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
}
.card__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.card__form input {
  padding: 12px;
  border: 4px solid #000;
  font-size: 16px;
  font-family: "Proxima Nova", sans-serif;
  transition: all 0.3s ease;
  background-color: #fff;
}
.card__form input:focus {
  outline: none;
  transform: scale(1.05);
}
.sign-up {
  border: 4px solid #000;
  background: #000;
  color: #fff;
  padding: 12px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.sign-up:hover {
  background: #fff;
  color: #000;
  transform: translateY(-5px);
  box-shadow: 0 5px 0 #000;
}
.sign-up:active {
  animation: shake 0.5s ease-in-out;
  transform: translateY(0);
  box-shadow: none;
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

</style>
    

================================================
FILE: Cards/0xnihilism_cold-tiger-22.html
================================================
<div class="card">
  <div data-text="The Eye of Providence" class="title">
    The Eye of Providence
  </div>
  <div class="eye-of-providence">
    <div class="triangle"></div>
    <div class="eye">
      <div class="eyelid"></div>
      <div class="iris">
        <div class="pupil"></div>
      </div>
    </div>
  </div>
  <div class="spotlight"></div>
  <div class="scan-line"></div>
  <div class="glitch-text">Always Watching</div>
  <div class="footer-text">Obey. Trust. Consume</div>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: simple, card, smooth, hover effect, advanced, card hover */
.card {
  background-color: #222;
  border: 10px solid rgb(161, 156, 116);
  padding: 30px;
  width: 400px;
  text-align: center;
  position: relative;
  box-shadow: 9px 11px 1px rgb(0, 0, 0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 2px
  );

  opacity: 0.3;
  pointer-events: none;
  z-index: 2;
  animation: tv-static 0.2s infinite linear alternate;
}

.card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  background-size: 100% 2px, 3px 100%;
  animation: tv-flicker 0.15s infinite;
  z-index: 35;
  pointer-events: none;
  opacity: 0.5;
}

@keyframes tv-static {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.1;
  }
}

.eye-of-providence {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 20px;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 110px solid transparent;
  border-right: 110px solid transparent;
  border-bottom: 190px solid rgb(198, 181, 113);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: transform 0.3s ease;
}

.card:hover .triangle {
  transform: scale(1.05);
}

.eye {
  width: 90px;
  height: 50px;
  background: radial-gradient(circle at 30% 30%, #fff, #e6e6e6);
  border-radius: 50%;
  position: absolute;
  top: 90px;
  left: 65px;
  overflow: hidden;
  box-shadow: 0 0 0 10px rgb(115, 112, 92), 15px 15px 0 #000,
    inset -5px -5px 10px rgba(0, 0, 0, 0.2),
    inset 5px 5px 10px rgba(255, 255, 255, 0.3);
  z-index: 2;
  animation: blink 6s infinite cubic-bezier(0.76, 0, 0.24, 1);
}

.pupil {
  width: 16px;
  height: 16px;
  background: rgb(207, 19, 19);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #000, #444);
  border: 2px solid #fff;
  position: absolute;
  top: 14px;
  left: 14px;
  box-shadow: inset 0 0 10px rgba(203, 4, 4, 0.2), 0 0 10px rgba(0, 0, 0, 0.5);
}

@keyframes blink {
  0%,
  90%,
  100% {
    height: 50px;
  }
  92%,
  98% {
    height: 0px;
  }
}

@keyframes blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  94% {
    transform: scaleY(0.1);
  }
}

.iris {
  width: 45px;
  height: 45px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 22px;
  animation: look-around 6s infinite;
  animation-timing-function: ease-in-out;
}

@keyframes look-around {
  0%,
  100% {
    transform: translate(-2, 10px) scale(1);
  }
  25% {
    transform: translate(-18px, 10px) scale(1.1);
  }
  50% {
    transform: translate(0, 15px) scale(1.2);
  }
  75% {
    transform: translate(20px, 10px) scale(1.1);
  }
}

.triangle-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4px solid #f00;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation: rotate 15s linear infinite;
  z-index: 0;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.title {
  color: rgb(255, 255, 255);
  margin-top: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 28px;
  padding-bottom: 33px;
  text-shadow: 3px 3px #000;
  z-index: 3;
  position: relative;
  display: inline-block;
}

.title::before,
.title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.title::before {
  left: 2px;
  text-shadow: -1px 0 red;
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.title::after {
  left: -2px;
  text-shadow: -1px 0 blue;
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% {
    clip: rect(30px, 9999px, 10px, 0);
  }
  100% {
    clip: rect(42px, 9999px, 78px, 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    top: -1px;
    left: 1px;
    clip: rect(65px, 9999px, 119px, 0);
  }
  100% {
    top: 1px;
    left: -1px;
    clip: rect(79px, 9999px, 16px, 0);
  }
}

.glitch-text {
  color: #fff;
  font-size: 20px;
  margin-top: 20px;
  position: relative;
  display: inline-block;
  text-shadow: 2px 2px #000;
  z-index: 3;
}

.glitch-text {
  color: #fff;
  font-size: 20px;
  margin-top: 20px;
  position: relative;
  display: inline-block;
  text-shadow: 2px 2px #000;
  z-index: 3;
}

.glitch-text::before,
.glitch-text::after {
  content: "The Eye of Providence";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  left: 3px;
  text-shadow: -3px 0 #f00;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -3px;
  text-shadow: -3px 0 #0ff;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% {
    clip: rect(34px, 9999px, 11px, 0);
  }
  5% {
    clip: rect(92px, 9999px, 89px, 0);
  }
  10% {
    clip: rect(6px, 9999px, 22px, 0);
  }
  15% {
    clip: rect(75px, 9999px, 4px, 0);
  }
  20% {
    clip: rect(6px, 9999px, 87px, 0);
  }
  25% {
    clip: rect(45px, 9999px, 98px, 0);
  }
  30% {
    clip: rect(39px, 9999px, 57px, 0);
  }
  35% {
    clip: rect(90px, 9999px, 65px, 0);
  }
  40% {
    clip: rect(7px, 9999px, 90px, 0);
  }
  45% {
    clip: rect(30px, 9999px, 88px, 0);
  }
  50% {
    clip: rect(76px, 9999px, 23px, 0);
  }
  55% {
    clip: rect(57px, 9999px, 35px, 0);
  }
  60% {
    clip: rect(85px, 9999px, 87px, 0);
  }
  65% {
    clip: rect(54px, 9999px, 12px, 0);
  }
  70% {
    clip: rect(32px, 9999px, 56px, 0);
  }
  75% {
    clip: rect(36px, 9999px, 98px, 0);
  }
  80% {
    clip: rect(12px, 9999px, 43px, 0);
  }
  85% {
    clip: rect(54px, 9999px, 76px, 0);
  }
  90% {
    clip: rect(43px, 9999px, 23px, 0);
  }
  95% {
    clip: rect(76px, 9999px, 87px, 0);
  }
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: rgba(75, 68, 68, 0.5);
  animation: scan 2.5s linear infinite;
  z-index: 4;
}

@keyframes scan {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

.triangle-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4px solid #f00;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation: rotate 15s linear infinite;
  z-index: 0;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.title {
  color: rgb(255, 255, 255);
  margin-top: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 28px;
  text-shadow: 3px 3px #000;
  z-index: 3;
}

.glitch-text {
  color: #fff;
  font-size: 20px;
  margin-top: 20px;
  position: relative;
  display: inline-block;
  text-shadow: 2px 2px #000;
  z-index: 3;
}

.glitch-text::before,
.glitch-text::after {
  content: "The Eye of Providence";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  left: 3px;
  text-shadow: -3px 0 #f00;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -3px;
  text-shadow: -3px 0 #0ff;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% {
    clip: rect(34px, 9999px, 11px, 0);
  }
  5% {
    clip: rect(92px, 9999px, 89px, 0);
  }
  10% {
    clip: rect(6px, 9999px, 22px, 0);
  }
  15% {
    clip: rect(75px, 9999px, 4px, 0);
  }
  20% {
    clip: rect(6px, 9999px, 87px, 0);
  }
  25% {
    clip: rect(45px, 9999px, 98px, 0);
  }
  30% {
    clip: rect(39px, 9999px, 57px, 0);
  }
  35% {
    clip: rect(90px, 9999px, 65px, 0);
  }
  40% {
    clip: rect(7px, 9999px, 90px, 0);
  }
  45% {
    clip: rect(30px, 9999px, 88px, 0);
  }
  50% {
    clip: rect(76px, 9999px, 23px, 0);
  }
  55% {
    clip: rect(57px, 9999px, 35px, 0);
  }
  60% {
    clip: rect(85px, 9999px, 87px, 0);
  }
  65% {
    clip: rect(54px, 9999px, 12px, 0);
  }
  70% {
    clip: rect(32px, 9999px, 56px, 0);
  }
  75% {
    clip: rect(36px, 9999px, 98px, 0);
  }
  80% {
    clip: rect(12px, 9999px, 43px, 0);
  }
  85% {
    clip: rect(54px, 9999px, 76px, 0);
  }
  90% {
    clip: rect(43px, 9999px, 23px, 0);
  }
  95% {
    clip: rect(76px, 9999px, 87px, 0);
  }
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: rgba(75, 68, 68, 0.5);
  animation: scan 2.5s linear infinite;
  z-index: 4;
}

@keyframes scan {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

.triangle-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4px solid #f00;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation: rotate 15s linear infinite;
  z-index: 0;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.title {
  color: rgb(255, 255, 255);
  margin-top: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 28px;
  text-shadow: 3px 3px #000;
  z-index: 3;
}

.glitch-text {
  color: #fff;
  font-size: 20px;
  margin-top: 20px;
  position: relative;
  display: inline-block;
  text-shadow: 2px 2px #000;
  z-index: 3;
}

.glitch-text::before,
.glitch-text::after {
  content: "Always Watching";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  left: 3px;
  text-shadow: -3px 0 #f00;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -3px;
  text-shadow: -3px 0 #0ff;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}

.footer-text {
  color: #fff;
  font-size: 14px;
  margin-top: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
  position: relative;
  z-index: 3;
}

.footer-text::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 50px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%);
}

</style>
    

================================================
FILE: Cards/0xnihilism_moody-moth-91.html
================================================
<div class="card">
  <div class="content">
    <div class="name">Nihilist</div>
    <div class="handle">@0xNihilist</div>
    <div class="title">
      <span class="emoji">😊</span> Happy<br />
      Product Designer
    </div>
  </div>
  <div class="dots orange-dots"></div>
  <div class="dots pink-dots"></div>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: simple, card, light */
.card-container {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #ffa07a 25%, transparent 25%) -50px 0,
    linear-gradient(225deg, #ffa07a 25%, transparent 25%) -50px 0,
    linear-gradient(315deg, #ffa07a 25%, transparent 25%),
    linear-gradient(45deg, #ffa07a 25%, transparent 25%);
  background-size: 100px 100px;
  background-color: #ffffff;
  perspective: 1000px;
}

.card {
  width: 400px;
  background-color: rgba(223, 216, 179, 0.9);
  border-radius: 20px;
  position: relative;
  border: 3px solid #000;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
}

.card:hover {
  transform: translateZ(20px) rotateX(5deg) rotateY(-5deg);
  box-shadow: 20px 20px 0 rgba(0, 0, 0, 0.2);
}

.card .content {
  padding: 30px;
  padding-top: 60px;
}

.card .name {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.card .handle {
  position: absolute;
  top: 0;
  right: 20px;
  background-color: #f4c430;
  padding: 10px 20px;
  border-radius: 0 0 15px 15px;
  border: 2px solid #000;
  border-top: none;
  font-weight: bold;
}

.card .title {
  font-size: 18px;
}

.card .emoji {
  font-size: 24px;
}

.card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0) 80%
  );
  transform: rotate(-30deg);
  pointer-events: none;
}

.card .name,
.card .title {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.card:hover .name {
  transform: translateZ(30px);
}

.card:hover .title {
  transform: translateZ(20px);
}

.card .handle {
  transition: transform 0.3s ease-out, background-color 0.3s ease-out;
}

.card:hover .handle {
  transform: translateZ(40px) translateY(-5px);
  background-color: #ffdb58;
}

.card .emoji {
  display: inline-block;
  transition: transform 0.3s ease-out;
}

.card:hover .emoji {
  transform: translateZ(50px) rotate(15deg) scale(1.2);
}

@keyframes glitch {
  0% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(-5px, 5px);
  }
  20% {
    clip-path: inset(10% 0 60% 0);
    transform: translate(5px, -5px);
  }
  40% {
    clip-path: inset(40% 0 20% 0);
    transform: translate(-5px, 5px);
  }
  60% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(5px, -5px);
  }
  80% {
    clip-path: inset(15% 0 70% 0);
    transform: translate(-5px, 5px);
  }
  100% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(5px, -5px);
  }
}

.card::after {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  z-index: -1;
}

.card:hover::after {
  opacity: 0.1;
}

</style>
    

================================================
FILE: Cards/0xnihilism_nasty-husky-13.html
================================================
<div class="card">
  <span class="card__title">Newsletter</span>
  <p class="card__content">
    Get existential crisis delivered straight to your inbox every week.
  </p>
  <form class="card__form">
    <input required="" type="email" placeholder="Your life" />
    <button class="card__button">Click me</button>
  </form>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: newsletter, card, light, box-shadow, hover button, cool card, brutalism */
.card {
  width: 300px;
  padding: 20px;
  background: #fff;
  border: 6px solid #000;
  box-shadow: 12px 12px 0 #000;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translate(-5px, -5px);
  box-shadow: 17px 17px 0 #000;
}

.card__title {
  font-size: 32px;
  font-weight: 900;
  color: #000;
  text-transform: uppercase;
  margin-bottom: 15px;
  display: block;
  position: relative;
  overflow: hidden;
}

.card__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90%;
  height: 3px;
  background-color: #000;
  transform: translateX(-100%);
  transition: transform 0.3s;
}

.card:hover .card__title::after {
  transform: translateX(0);
}

.card__content {
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  margin-bottom: 20px;
}

.card__form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card__form input {
  padding: 10px;
  border: 3px solid #000;
  font-size: 16px;
  font-family: inherit;
  transition: transform 0.3s;
  width: calc(100% - 26px); /* Adjust for padding and border */
}

.card__form input:focus {
  outline: none;
  transform: scale(1.05);
  background-color: #000;
  color: #ffffff;
}

.card__button {
  border: 3px solid #000;
  background: #000;
  color: #fff;
  padding: 10px;
  font-size: 18px;
  left: 20%;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s;
  width: 50%;
  height: 100%;
}

.card__button::before {
  content: "Sure?";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 105%;
  background-color: #5ad641;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: transform 0.3s;
}

.card__button:hover::before {
  transform: translateY(0);
}

.card__button:active {
  transform: scale(0.95);
}

@keyframes glitch {
  0% {
    transform: translate(2px, 2px);
  }
  25% {
    transform: translate(-2px, -2px);
  }
  50% {
    transform: translate(-2px, 2px);
  }
  75% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(2px, 2px);
  }
}

.glitch {
  animation: glitch 0.3s infinite;
}

</style>
    

================================================
FILE: Cards/0xnihilism_thin-crab-36.html
================================================
<div class="brutalist-card">
  <div class="brutalist-card__header">
    <div class="brutalist-card__icon">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
        ></path>
      </svg>
    </div>
    <div class="brutalist-card__alert">Warning</div>
  </div>
  <div class="brutalist-card__message">
    This is a brutalist card with a very angry button. Proceed with caution,
    you've been warned.
  </div>
  <div class="brutalist-card__actions">
    <a class="brutalist-card__button brutalist-card__button--mark" href="#"
      >Mark as Read</a
    >
    <a class="brutalist-card__button brutalist-card__button--read" href="#"
      >Okay</a
    >
  </div>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: icon, minimalist, notification, card, hover, brutalist */
.brutalist-card {
  width: 320px;
  border: 4px solid #000;
  background-color: #fff;
  padding: 1.5rem;
  box-shadow: 10px 10px 0 #000;
  font-family: "Arial", sans-serif;
}

.brutalist-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #000;
  padding-bottom: 1rem;
}

.brutalist-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  padding: 0.5rem;
}

.brutalist-card__icon svg {
  height: 1.5rem;
  width: 1.5rem;
  fill: #fff;
}

.brutalist-card__alert {
  font-weight: 900;
  color: #000;
  font-size: 1.5rem;
  text-transform: uppercase;
}

.brutalist-card__message {
  margin-top: 1rem;
  color: #000;
  font-size: 0.9rem;
  line-height: 1.4;
  border-bottom: 2px solid #000;
  padding-bottom: 1rem;
  font-weight: 600;
}

.brutalist-card__actions {
  margin-top: 1rem;
}

.brutalist-card__button {
  display: block;
  width: 100%;
  padding: 0.75rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  border: 3px solid #000;
  background-color: #fff;
  color: #000;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 5px 5px 0 #000;
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 1rem;
}

.brutalist-card__button--read {
  background-color: #000;
  color: #fff;
}

.brutalist-card__button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: all 0.6s;
}

.brutalist-card__button:hover::before {
  left: 100%;
}

.brutalist-card__button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 #000;
}

.brutalist-card__button--mark:hover {
  background-color: #296fbb;
  border-color: #296fbb;
  color: #fff;
  box-shadow: 7px 7px 0 #004280;
}

.brutalist-card__button--read:hover {
  background-color: #ff0000;
  border-color: #ff0000;
  color: #fff;
  box-shadow: 7px 7px 0 #800000;
}

.brutalist-card__button:active {
  transform: translate(5px, 5px);
  box-shadow: none;
}

</style>
    

================================================
FILE: Cards/1osm_afraid-mouse-29.html
================================================
<div class="YoutubeVideo">
  <div class="Image"></div>
  <div class="Icon"></div>
  <div class="Title"></div>
  <div class="Name"></div>
</div>
<style>
/* From Uiverse.io by 1osm - Tags: card */
.YoutubeVideo {
  width: 250px;
  height: 220px;
  background: transparent;
}

.Image {
  width: 250px;
  height: 154px;
  border-radius: 10px;
  background: #3a3a3a;
}

.Icon {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  float: right;
  background-color: #3a3a3a;
  transform: translate(0px,10px);
}

.Title {
  width: 180px;
  height: 15px;
  border-radius: 2px;
  float: right;
  background-color: #3a3a3a;
  transform: translate(-15px,10px);
}

.Name {
  width: 100px;
  height: 15px;
  border-radius: 2px;
  float: right;
  background-color: #3a3a3a;
  transform: translate(-15px,20px);
}
</style>


================================================
FILE: Cards/1osm_funny-cat-84.html
================================================
<div class="card">
  <div class="imge">
    <div class="Usericon"></div>
    <p class="UserName"></p>
    <p class="Id"></p>
  </div>

  <div class="Description"></div>

  <div class="social-media">
        <a href="#">
            <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
            </svg>
        </a>
        <a href="#">
            <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
            </svg>
        </a>
        <a href="#">
            <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                <path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path>
            </svg>
        </a>
        <a href="#">
            <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                <path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
            </svg>
        </a>
    </div>

</div>
<style>
/* From Uiverse.io by 1osm - Tags: card */
.card {
  width: 190px;
  height: 254px;
  background: rgb(38, 38, 38);
  box-shadow: 7px 5px 10px rgba(0, 0, 0, 0.333);
}

.imge {
  height: 70px;
  background-color: #ff5858;
}

.imge .Usericon {
  background-color: #414141;
  transform: translateX(10px) translateY(10px);
  width: 50px;
  height: 50px;
  border-radius: 10px;
}

.imge .UserName {
  background-color: #414141;
  width: 60px;
  height: 15px;
  border-width: 10px;
  border-radius: 5px;
  border-color: #262626;
  color: #262626;
  font-size: 15px;
  font-weight: bold;
  transform: translateX(70px) translateY(-35px);
}

.imge .Id {
  background-color: #414141;
  width: 100px;
  height: 15px;
  border-width: 10px;
  border-radius: 5px;
  border-color: #262626;
  color: #262626;
  font-size: 15px;
  font-weight: bold;
  transform: translateX(70px) translateY(-25px);
}

.Description {
  border-color: #141414;
  background-color: #414141;
  transform: translate(5px, 6px);
  width: 180px;
  height: 130px;
  border-radius: 5px;
}

/*______Social Media______*/
.social-media:before {
  content: " ";
  display: block;
  width: 100%;
  height: 2px;
  transform: translatey(10px);
  background: #414141;
}

.social-media a {
  margin-right: 15px;
  text-decoration: none;
  color: inherit;
}

.social-media a:last-child {
  margin-right: 0;
}

.social-media a svg {
  color: #ff5858;
  transform: translatex(25px) translateY(20px);
  width: 20px;
  fill: currentColor;
}
</style>


================================================
FILE: Cards/1osm_light-chipmunk-10.html
================================================
<div class="card">
  <div class="smallIcon">
    <div class="Icon"></div>
    <div class="Name"></div>
    <div class="Roles"></div>
    <div class="Descripion"></div>
  </div>
</div>
<style>
/* From Uiverse.io by 1osm - Tags: card */
.card {
  width: 250px;
  height: 90px;
  background: #262626;
}

.smallIcon {
  width: 100%;
  height: 100%;
  background-color: #ff5858;
}

.smallIcon div {
  background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 
  40%, #e5e5e5 48%);
  margin-top: 10px;
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: load89234 2s infinite;
  color: #262626;
  font-weight: bold;
  font-size: 15px;
}

.Icon {
  margin: 10px;
  width: 70px;
  height: 70px;
  float: left;
  border-radius: 5px;
}

.Name {
  width: 90px;
  height: 20px;
  float: left;
  transform: translate(10px ,0px);
  border-radius: 5px;
}

.Roles {
  width: 40px;
  height: 20px;
  float: left;
  transform: translate(20px ,0px);
  border-radius: 5px;
}

.Descripion {
  margin: 10px;
  width: 140px;
  height: 45px;
  float: left;
  transform: translate(0px ,-5px);
  border-radius: 5px;
}

@keyframes load89234 {
  100% {
    background-position: -100% 0;
  }
}
</style>


================================================
FILE: Cards/1osm_little-insect-93.html
================================================
<div class="card">
  <div class="GameImg">

    <div class="Gfooter">
      <div class="SmallIcon"></div>
      <span class="Stars"><svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 50.000000 50.000000" height="50.000000pt" width="50.000000pt" version="1.0" xmlns="http://www.w3.org/2000/svg" class="StarIcon">
      <g stroke="none" fill="#ebd300" transform="translate(0.000000,50.000000) scale(0.100000,-0.100000)">
      <path d="M210 405 l-33 -85 -83 0 c-45 0 -85 -4 -88 -9 -3 -5 23 -33 59 -62 36 -29 65 -60 65 -68 0 -9 -9 -48 -20 -86 -11 -38 -20 -71 -20 -72 0 -12 35 4 85 37 33 22 67 40 75 40 8 0 42 -18 75 -40 50 -33 85 -49 85 -37 0 1 -9 34 -20 72 -11 38 -20 77 -20 86 0 8 29 39 65 68 36 28 63 56 60 62 -4 5 -44 9 -90 9 l-83 0 -33 85 c-17 47 -35 85 -39 85 -4 0 -22 -38 -40 -85z"></path>
      </g>
      </svg>
        5/5</span>
      <span class="Descripion">This is Descripion of The Game</span>
    </div>

    <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 50.000000 50.000000" height="50.000000pt" width="50.000000pt" version="1.0" xmlns="http://www.w3.org/2000/svg" class="GameIcon">
    <g stroke="none" fill="#ff5858" transform="translate(0.000000,50.000000) scale(0.100000,-0.100000)">
    <path d="M427 471 c-2 -11 -36 -35 -78 -57 -62 -33 -77 -46 -94 -81 -14 -30 -24 -41 -35 -36 -64 25 -90 27 -117 7 -58 -42 -115 -185 -99 -248 19 -76 81 -73 195 9 19 14 41 25 50 25 9 0 43 -18 75 -40 33 -22 70 -43 83 -46 64 -16 101 30 89 113 -7 56 -62 159 -99 187 -28 20 -56 18 -121 -9 -16 -7 -17 -5 -11 16 12 39 36 60 102 90 56 25 83 50 83 78 0 18 -17 12 -23 -8z m-41 -252 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z m-236 -14 c0 -8 7 -15 15 -15 8 0 15 -7 15 -15 0 -8 -7 -15 -15 -15 -8 0 -15 -7 -15 -15 0 -8 -7 -15 -15 -15 -8 0 -15 7 -15 15 0 8 -7 15 -15 15 -8 0 -15 7 -15 15 0 8 7 15 15 15 8 0 15 7 15 15 0 8 7 15 15 15 8 0 15 -7 15 -15z m196 -26 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z m80 0 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z m-40 -40 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z"></path></g></svg>
    <span class="Name">Game Name</span>
  </div>
</div>
<style>
/* From Uiverse.io by 1osm - Tags: card */
.card {
  width: 200px;
  height: 250px;
  background: #262626;
}

.GameIcon {
  transform: translate(-80px,-50px);
  position: absolute;
  width: 200px;
  height: 200px;
  transition: 0.3s;
}

.GameImg {
  width: 100%;
  height: 100%;
}

.Gfooter {
  width: 100%;
  height: 0%;
  background-color: #262626;
  border-radius: 10px;
  transition: all 0.3s;
}

.Name {
  transform: translate(10px,200px);
  position: absolute;
  background-color: transparent;
  font-weight: bold;
  font-size: 18px;
  transition: 0.3s;
  color: #ff5858;
}

.SmallIcon {
  width: 0px;
  height: 0px;
  transform: translate(10px,10px);
  border-radius: 10px;
  background-color: #ff5858;
  transition: 0.2s;
}

.Descripion {
  padding: 10px;
  position: absolute;
  transform: translate(0px,20px);
  opacity: 0%;
  color: #ff5858;
  font-weight: bold;
  font-size: 15px;
}

.StarIcon {
  transform: translate(-0px,25px);
  width: 20px;
  fill: #ebd300;
}

.Stars {
  position: absolute;
  color: white;
  font-size: 15px;
  font-weight: bold;
  transform: translate(80px,-70px);
}

.GameImg:hover .Descripion {
  opacity: 100%;
}

.GameImg:hover .Gfooter {
  width: 100%;
  height: 100%;
}

.GameImg:hover .SmallIcon {
  width: 60px;
  height: 60px;
}

.GameImg:hover .Name {
  transform: translate(75px,-235px);
}

.GameImg:hover .GameIcon {
  transform: translate(100px,-160px);
}

</style>


================================================
FILE: Cards/AbanoubMagdy1_hard-zebra-100.html
================================================
<div class="card">
    <div class="img img1"></div>
    <div class="img img2"></div>
    <div class="card__content">
        <span class="name">John Doe</span>
        <span class="job">Software engineer</span>
    </div>
</div>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: card */
.card {
  border: .05rem solid black;
  height: 210px;
  width: 180px;
  overflow: hidden;
  position: relative;
}

.card:hover .img1 {
  transform: scale(1.5, 1.2) translate(5px, -30px) rotate(5deg);
}

.card:hover .img1::before {
  transition: transform 1s 0.4s;
  transform: translateX(400px) skewX(-10deg);
}

.card:hover .img2 {
  transform: translateY(120%);
}

.card .img {
  position: absolute;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, rgb(65, 122, 255), rgb(23, 65, 193));
  background-size: 100% 200%;
  transition: 0.3s all;
}

.card .img1 {
  top: 0;
  right: 0;
  position: relative;
}

.card .img1::before {
  content: "";
  position: absolute;
  top: 0;
  left: -25px;
  height: 100%;
  width: 10px;
  transform: skewX(-10deg);
  background-image: linear-gradient(to right, rgb(32, 151, 248), rgba(255, 255, 255, 0.9));
}

.card .img2 {
  bottom: 0;
  right: 0;
  background-position: bottom center;
}

.card__content {
  margin-left: 1rem;
  margin-top: 1rem;
  transform: translateX(-130%);
  transition: .5s ease-in-out transform .3s;
  position: relative;
  z-index: -1;
}

.card__content span {
  display: block;
}

.card__content .name {
  font-weight: bold;
  font-size: 1.7rem;
}

.card__content .job {
  color: #B2B2B2;
}

.card:hover .card__content {
  transform: translateX(0);
}
</style>


================================================
FILE: Cards/Admin12121_average-parrot-89.html
================================================
<div class="main">
<div class="card">
  <div class="card-content">
    <div class="h3"><span>UI</span>VERSE</div>
    <div class="h1">Love to Code.</div>
    <p class="p">Love to spend hours in codeing and get lost in own fantasy world of code, the feeling 😂🚀😊 </p>
  </div>
</div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: card, cardhover , card animation */
.h3 span {
  font-weight: 800;
  background: linear-gradient(125deg, #b663ff, #13c1ef);
  text-transform: uppercase;
  -webkit-background-cLip: text;
  -webkit-text-filL-coLor: transparent;
}

.h3::after {
  content: '';
  margin-top: -5px;
  height: 3px;
  width: 25%;
  background: linear-gradient(125deg, #b663ff, #13c1ef);
  display: block;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 80%;
  position: relative;
  background-color: rgb(16 16 16);
  border: 1px solid rgb(255 255 255 / 5%);
  border-radius: 1.5rem;
  padding: 1rem;
}

.card:after {
  content: "";
  height: 70px;
  width: 1px;
  position: absolute;
  left: -1px;
  top: 65%;
  transition: top, opacity;
  transition-duration: 600ms;
  transition-timing-function: ease;
  background: linear-gradient(transparent, mediumslateblue,transparent);
  box-shadow: 0 0 30px mediumslateblue;
  opacity: 0;
}

.card:after {
  top: 65%;
  opacity: 0;
}

.card:hover:after {
  top: 25%;
  opacity: 1;
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.1) 1px, 
    transparent 1px
  );
  background-position: 50% 50%;
  background-size: 1.1rem 1.1rem;
  padding: 2.3rem;
  border-radius: 1.25rem;
  overflow: hidden;
}

.card-content .h1,.h3,.p {
  text-align: center;
}

.card-content .h1 {
  color: rgb(250 249 246);
  font-size: 2.6rem;
}

.card-content  .h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.5rem;
}

.card-content  .p {
  color: rgb(255 255 255 / 75%);
  line-height: 1.3rem;
}

@media(max-width: 700px) {
  .card {
    width: calc(100% - 2rem);
    margin: 0rem 1rem;
    padding: 0.75rem;
    border-radius: 1rem;
  }
}

@media(max-width: 600px) {
  .card-content {
    padding: 3rem;
  }

  .card-content  .h1 {
    font-size: 2.2rem;
  }
}

</style>


================================================
FILE: Cards/Admin12121_brown-bird-6.html
================================================
<div class="price-section">
	<article class="price-table">
		<div class="price"><small>$</small>249</div>
		<span class="title">Solo Version</span>
		<span class="description">A single license for solo designers, developers and freelancers.
		</span>
		<div class="features">
			
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
						</svg>
					</i>
					<span class="name">Free updates</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
						</svg>
					</i>
				</summary>
				<div class="answer">
					You will gain access to every future update.
				</div>
			</details>
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
						</svg>
					</i>
					<span class="name">Use on unlimited projects</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
						</svg>
					</i>
				</summary>
				<div class="answer">
					Create as many projects as you want.
				</div>
			</details>
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
						</svg>
					</i>
					<span class="name">Asset Hosting</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
						</svg>
					</i>
				</summary>
				<div class="answer">
					Keep your files for easy access and management. 5GB space included. Scale when necessary.
				</div>
			</details>
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
						</svg>
					</i>
					<span class="name">Community support</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
						</svg>
					</i>
				</summary>
				<div class="answer">
					Get help and learn new things in our community Slack with over 5,000 contributors.
				</div>
			</details>
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
						</svg>
					</i>
					<span class="name">Version control</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
						</svg>
					</i>
				</summary>
				<div class="answer">
					Instant rollbacks to any version
				</div>
			</details>
		</div>
	</article>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: card, business card, card template, card design */
.price-section {
  color: #fff;
}
/* End basic CSS override */
.price-table {
  background-color: #152148;
  border-radius: 16px;
  max-width: 355px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 45px 0 rgba(0, 0, 0, 0.15);
  position: relative;
  background-image: linear-gradient(135deg, rgba(74, 222, 128, 0.15), rgba(29, 123, 219, 0.1) 20%, #152148 40%, #152148 100%);
}

.price-table:after {
  content: "";
  display: block;
  top: -3px;
  left: -3px;
  bottom: -3px;
  right: -3px;
  z-index: -1;
  position: absolute;
  border-radius: 16px;
  background-image: linear-gradient(135deg, #4ade80, #1d7bdb 40%, #293359 60%, #152148 100%);
}

.price-table .price {
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 4px;
  position: relative;
  color: #fff;
}

.price-table .price small {
  font-size: 1.25rem;
  font-weight: 400;
  position: absolute;
  left: -1.5ch;
}

.price-table .title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  margin-top: 10px;
  color: #fff;
}

.price-table .description {
  font-size: 1rem;
  text-align: center;
  margin-top: 2px;
}

.features {
  margin-top: 22px;
}

.feature {
  position: relative;
}

.feature + .feature {
  margin-top: 16px;
}

.feature summary {
  display: inline-flex;
  align-items: center;
  list-style: none;
}

.feature summary::-webkit-details-marker {
  display: none;
}

.feature[open] summary:after {
  content: "";
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  z-index: 50;
}

.feature[open] div {
  -webkit-animation: scale 0.15s ease;
  animation: scale 0.15s ease;
}

.feature .checkmark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #4ade80;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.feature .checkmark svg {
  width: 18px;
  height: 18px;
  color: #fff;
}

.feature .question-icon {
  display: flex;
  align-items: center;
  margin-left: 6px;
  cursor: pointer;
}

.feature .answer {
  padding: 12px;
  background-color: #111b40;
  border-radius: 6px;
  position: absolute;
  top: -12px;
  z-index: 100;
  transform: translatey(-100%) translatex(-50%);
  transform-origin: bottom center;
  width: 80%;
  left: 50%;
  border: 1px solid #293359;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.1);
}

@-webkit-keyframes scale {
  0% {
    transform: translatey(-100%) translatex(-50%) scale(0);
  }

  100% {
    transform: translatey(-100%) translatex(-50%) scale(1);
  }
}

@keyframes scale {
  0% {
    transform: translatey(-100%) translatex(-50%) scale(0);
  }

  100% {
    transform: translatey(-100%) translatex(-50%) scale(1);
  }
}
</style>


================================================
FILE: Cards/Admin12121_fluffy-vampirebat-68.html
================================================
<div class="wrapper">

<article>
	<span class="h1">How to create a pop-up without JavaScript</span>
	<p>Ever wanted a pop-up mechanism on your website, but you don't want to use JavaScript? Here's how:</p>

	<p>Toggle the <strong>How it works</strong> button for more info.</p>

</article>

<details>
	<summary>How it works<svg viewBox="0 0 256 256" fill="currentColor" height="192" width="192" xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="256" width="256"></rect><circle stroke-width="16" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none" r="96" cy="128" cx="128"></circle><circle r="12" cy="180" cx="128"></circle><path stroke-width="16" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none" d="M127.9995,144.0045v-8a28,28,0,1,0-28-28"></path></svg></summary>
	<div>
			<p>The scaling effect you see when you open this <code>&lt;details&gt;</code> element is created by using a keyframe animation.</p>
		<p></p><pre><code>@keyframes scale { 
&nbsp;0% {
&nbsp;&nbsp;transform: scale(0);
&nbsp;}
&nbsp;100% {
&nbsp;&nbsp;transform: scale(1);
&nbsp;}
}</code></pre> <p></p>
<p>This animation is added to the <code>&lt;div&gt;</code>, but only when the <code>[open]</code> attribute is toggled.</p>
<p></p><pre><code>details[open] div { 
&nbsp;animation: scale .15s ease;
}</code></pre><p></p>
	<p>Sadly there's no way (that I know of) to animate the  <code>&lt;div&gt;</code> when the  <code>&lt;details&gt;</code> is closing.</p>
	</div>
</details>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: card, popup */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

article {
  margin-top: 50px;
  width: 90%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.125rem;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.1);
}

article > * + * {
  margin-top: 0.5em;
}

article:is(h1, h2, h3) + * {
  margin-top: 0.5em;
}

article .h1 {
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.125;
}

article code {
  background-color: #eee;
  font-weight: 600;
  font-family: monospace;
}

details {
  position: relative;
  right: 16px;
  margin-top: 35px;
  bottom: 16px;
  color: #6b7280;
  display: flex;
  flex-direction: column;
}

details div {
  background-color: #1e1e27;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  padding: 1rem;
  border-radius: 8px;
  position: absolute;
  height: 350px;
  width: 400px;
  bottom: calc(100% + 1rem);
  right: -50%;
  overflow: auto;
  transform-origin: 100% 100%;
  color: #95a3b9;
}

details div::-webkit-scrollbar {
  width: 15px;
  background-color: #1e1e27;
}

details div::-webkit-scrollbar-thumb {
  width: 5px;
  border-radius: 99em;
  background-color: #95a3b9;
  border: 5px solid #1e1e27;
}

details div > * + * {
  margin-top: 0.75em;
}

details div p > code {
  font-size: 1rem;
  font-family: monospace;
}

details div pre {
  white-space: pre-line;
  border: 1px solid #95a3b9;
  border-radius: 6px;
  font-family: monospace;
  padding: 0.75em;
  font-size: 0.875rem;
  color: #fff;
}

details[open] div {
  -webkit-animation: scale 0.25s ease;
  animation: scale 0.25s ease;
}

summary {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  padding: 0.75em 3em 0.75em 1.25em;
  border-radius: 99em;
  color: #fff;
  background-color: #185adb;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  list-style: none;
  text-align: center;
  cursor: pointer;
  transition: 0.15s ease;
  position: relative;
}

summary::-webkit-details-marker {
  display: none;
}

summary:hover, summary:focus {
  background-color: #1348af;
}

summary svg {
  position: absolute;
  right: 1.25em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em;
  height: 1.5em;
}

@-webkit-keyframes scale {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes scale {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}
</style>


================================================
FILE: Cards/Admin12121_little-catfish-39.html
================================================
<div class="section_our_solution">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <div class="our_solution_category">
        <div class="solution_cards_box">
          <div class="solution_card">
            <div class="hover_color_bubble"></div>
            <div class="so_top_icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" viewBox="0 0 512 512" height="50" id="Layer_1">
                <g>
                  <g>
                    <g>
                      <g>
                        <path fill="#fae19e" d="m47.478 452.317 295.441 19.76c5.511.369 10.277-3.8 10.645-9.31l28.393-424.517c.369-5.511-3.8-10.276-9.31-10.645l-295.441-19.76c-5.511-.369-10.276 3.8-10.645 9.31l-28.394 424.517c-.368 5.511 3.8 10.277 9.311 10.645z"></path>
                      </g>
                      <g>
                        <g>
                          <g>
                            <g>
                              <g>
                                <path fill="#fff9e9" d="m17.5 504.177h226.14l79.96-79.605v-355.86c0-5.523-4.477-10-10-10h-296.1c-5.523 0-10 4.477-10 10v425.466c0 5.522 4.477 9.999 10 9.999z"></path>
                              </g>
                              <path fill="#fff4d6" d="m313.601 58.712h-40c5.523 0 10 4.477 10 10v355.861l-.258 40.078 40.258-40.078v-355.861c0-5.523-4.477-10-10-10z"></path>
                            </g>
                          </g>
                        </g>
                        <path fill="#ffeec2" d="m243.64 504.177v-70.253c0-5.523 4.477-10 10-10h69.96z"></path>
                      </g>
                    </g>
                    <g>
                      <path fill="#fed23a" d="m468.636 248.58-33.372.165v-50.826c0-9.183 7.463-16.662 16.673-16.708h.007c9.217-.046 16.693 7.371 16.693 16.562v50.807z"></path>
                      <path fill="#54b1ff" d="m451.96 504.177c-10.362-10.277-16.196-24.263-16.208-38.857l-.062-73.973c0-.644.524-1.169 1.171-1.173l30.038-.149c.647-.003 1.171.517 1.171 1.161l.062 74.079c.012 14.531-5.749 28.472-16.015 38.756z"></path>
                      <path fill="#fdf385" d="m451.959 469.333h-.01c-14.434.072-26.14-11.542-26.14-25.935v-213.527c0-6.778 5.477-12.283 12.255-12.316l27.626-.137c6.826-.034 12.378 5.49 12.378 12.316v213.436c0 14.38-11.687 26.091-26.109 26.163z"></path>
                      <path fill="#faee6e" d="m465.69 217.417-23.769.118c6.037.79 10.708 5.94 10.708 12.198v213.437c0 9.823-5.455 18.397-13.507 22.87 3.79 2.115 8.164 3.317 12.826 3.293h.01c14.422-.072 26.109-11.783 26.109-26.163v-213.436c.001-6.826-5.551-12.351-12.377-12.317z"></path>
                      <path fill="#54b1ff" d="m491.274 247.925-71.615.355c-7.305.036-13.226 5.968-13.226 13.248 0 7.281 5.921 13.153 13.226 13.117l58.389-.29v77.489c0 7.281 5.921 13.153 13.226 13.117 7.305-.036 13.226-5.968 13.226-13.248v-90.672c0-7.28-5.922-13.152-13.226-13.116z"></path>
                      <g>
                        <path fill="#3da7ff" d="m491.274 247.925-38.441.188-.167 26.311 25.381-.067v77.489c0 7.281 5.921 13.153 13.226 13.117 7.305-.036 13.226-5.968 13.226-13.248v-90.672c.001-7.282-5.921-13.154-13.225-13.118z"></path>
                      </g>
                    </g>
                  </g>
                  <g fill="#060606">
                    <path d="m373.147 20.122-295.44-19.761c-9.631-.638-17.984 6.665-18.629 16.293l-2.311 34.557h-39.267c-9.649 0-17.5 7.851-17.5 17.5v425.466c0 9.649 7.851 17.5 17.5 17.5h226.141c1.96 0 3.902-.801 5.292-2.185l34.138-33.987c.347.074.701.133 1.065.157l58.282 3.898c9.302.614 18.005-6.952 18.629-16.293l28.393-424.515c.639-9.528-6.766-17.993-16.293-18.63zm-122.006 465.902v-52.1c0-1.378 1.122-2.5 2.5-2.5h51.9zm94.939-23.757c-.244 1.51-1.131 2.286-2.66 2.327l-46.28-3.096 31.752-31.611c1.414-1.407 2.209-3.32 2.209-5.315v-355.86c0-9.649-7.851-17.5-17.5-17.5h-77.993c-9.697 0-9.697 15 0 15h77.993c1.379 0 2.5 1.122 2.5 2.5v347.712h-62.46c-9.649 0-17.5 7.851-17.5 17.5v62.753h-218.641c-1.378 0-2.5-1.122-2.5-2.5v-425.465c0-1.378 1.122-2.5 2.5-2.5h178.168c9.697 0 9.697-15 0-15h-123.868l2.244-33.556c.244-1.511 1.131-2.286 2.661-2.327l295.44 19.76c1.511.244 2.287 1.131 2.328 2.661z"></path>
                    <path d="m267.827 237.047h-204.553c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5h204.553c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5z"></path>
                    <path d="m267.827 289.332h-204.553c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5h204.553c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5z"></path>
                    <path d="m55.774 192.262c0 4.142 3.358 7.5 7.5 7.5h204.553c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-204.553c-4.142 0-7.5 3.358-7.5 7.5z"></path>
                    <path d="m91.807 139.977c0 4.142 3.358 7.5 7.5 7.5h132.487c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5h-132.487c-4.142 0-7.5 3.358-7.5 7.5z"></path>
                    <path d="m194.755 438.787c-13.489.036-26.978.065-40.467.086-4.534.007-9.067.013-13.6.016-8.215.006-13.75-1.643-15.59-10.679-1.556-7.64-12.364-6.613-14.464 0-5.19 16.337-13.774 9.936-18.582-1.053-4.797-10.963-6.027-23.233-8.122-34.9-1.54-8.573-14.506-6.17-14.732 1.994-.298 10.751-1.302 21.331-4.031 31.758-2.815 10.758-7.034 21.097-11.222 31.376-3.651 8.961 10.867 12.816 14.464 3.988 3.711-9.108 7.427-18.266 10.193-27.714 5.14 12.36 15.774 26.34 30.927 18.101 2.819-1.533 5.452-3.712 7.763-6.253 7.88 9.106 19.609 8.388 30.584 8.375 15.627-.02 31.254-.054 46.881-.095 9.649-.025 9.667-15.025-.002-15z"></path>
                    <path d="m505.932 246.439c-3.897-3.878-9.255-5.867-14.695-6.014l-5.668.028v-10.719c0-6.529-3.878-13.427-9.433-16.862v-15.098c0-31.069-48.372-30.934-48.372.146v15.1c-5.659 3.498-9.455 9.741-9.455 16.852v10.982c-24.966 1.7-25.037 39.745.028 41.232.16 33.575.152 66.6-.028 100.737-.049 9.414 14.949 9.966 15 .079.18-34.166.188-67.22.029-100.823l37.211-.185s-.048 110.848-.048 160.784c0 24.338-37.219 24.5-37.219-.253l.013-13.677c.585-9.68-14.387-10.583-14.973-.904v12.834c0 11 3.402 20.316 9.988 26.869.586 15.693 7.198 30.878 18.369 41.956 3.205 3.18 7.642 2.208 10.744-.182 11.365-11.385 17.769-26.394 18.169-42.414 4.951-4.931 9.908-9.896 9.908-26.896l.006-68.351c12.97 3.689 26.494-6.348 26.494-19.946v-90.672c0-5.523-2.155-10.709-6.068-14.603zm-72.623-5.727v-10.841c0-2.219 1.523-4.08 3.573-4.633l30.025-.149c.84.208 1.615.605 2.243 1.231.915.911 1.419 2.123 1.419 3.414v10.794zm18.671-52c4.604 0 9.155 4.514 9.155 9.062v12.166l-18.372.091v-12.111c.001-5.053 4.133-9.183 9.217-9.208zm-.011 303.901c-3.487-4.942-6.009-10.531-7.417-16.406 2.322.503 4.674.765 7.027.765 2.627 0 5.253-.326 7.839-.957-1.374 5.964-3.892 11.587-7.449 16.598zm45.031-140.899c0 7.101-11.452 7.66-11.452.131 0 0 .013-70.974.021-77.48.005-4.196-3.483-7.509-7.558-7.509l-58.389.29c-7.242 0-7.073-11.331.074-11.366l71.615-.355c3.463.295 5.359 2.168 5.688 5.617v90.672z"></path>
                  </g>
                </g>
              </svg>
            </div>
            <div class="solu_title">
              <div>Demo 1</div>
            </div>
            <div class="solu_description">
              <p>
                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
              </p>
              <button class="read_more_btn" type="button">Read More</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: card, hover effect, card animation, card hover */
.section_our_solution .row {
  align-items: center;
}

.our_solution_category {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.our_solution_category .solution_cards_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.solution_cards_box .solution_card {
  flex: 0 50%;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2),
    0 5px 15px 0 rgba(37, 44, 97, 0.15);
  border-radius: 15px;
  margin: 8px;
  padding: 10px 15px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 265px;
  transition: 0.7s;
}

.solution_cards_box .solution_card:hover {
  background: #309df0;
  color: #fff;
  transform: scale(1.1);
  z-index: 9;
}

.solution_cards_box .solution_card:hover::before {
  background: rgb(85 108 214 / 10%);
}

.solution_cards_box .solution_card:hover .solu_title h3,
.solution_cards_box .solution_card:hover .solu_description p {
  color: #fff;
}

.solution_cards_box .solution_card:before {
  content: "";
  position: absolute;
  background: rgb(85 108 214 / 5%);
  width: 170px;
  height: 400px;
  z-index: -1;
  transform: rotate(42deg);
  right: -56px;
  top: -23px;
  border-radius: 35px;
}

.solution_cards_box .solution_card:hover .solu_description button {
  background: #fff !important;
  color: #309df0;
}

.solution_card .so_top_icon {
}

.solution_card .solu_title div {
  color: #212121;
  font-size: 1.3rem;
  margin-top: 13px;
  margin-bottom: 13px;
}

.solution_card .solu_description p {
  font-size: 15px;
  margin-bottom: 15px;
}

.solution_card .solu_description button {
  border: 0;
  border-radius: 15px;
  background: linear-gradient(
    140deg,
    #42c3ca 0%,
    #42c3ca 50%,
    #42c3cac7 75%
  ) !important;
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  padding: 5px 16px;
}

.our_solution_content div {
  text-transform: capitalize;
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.our_solution_content p {
}

.hover_color_bubble {
  position: absolute;
  background: rgb(54 81 207 / 15%);
  width: 100rem;
  height: 100rem;
  left: 0;
  right: 0;
  z-index: -1;
  top: 16rem;
  border-radius: 50%;
  transform: rotate(-36deg);
  left: -18rem;
  transition: 0.7s;
}

.solution_cards_box .solution_card:hover .hover_color_bubble {
  top: 0rem;
}

.solution_cards_box .solution_card .so_top_icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.solution_cards_box .solution_card .so_top_icon img {
  width: 40px;
  height: 50px;
  object-fit: contain;
}

/*start media query*/
@media screen and (min-width: 320px) {
  .sol_card_top_3 {
    position: relative;
    top: 0;
  }

  .our_solution_category {
    width: 100%;
    margin: 0 auto;
  }

  .our_solution_category .solution_cards_box {
    flex: auto;
  }
}

@media only screen and (min-width: 768px) {
  .our_solution_category .solution_cards_box {
    flex: 1;
  }
}

@media only screen and (min-width: 1024px) {
  .sol_card_top_3 {
    position: relative;
    top: -3rem;
  }

  .our_solution_category {
    width: 80%;
    margin: 0 auto;
  }
}
</style>


================================================
FILE: Cards/Admin12121_plastic-goose-38.html
================================================
<div class="container">
 <div class="left-side">
  <div class="card">
   <div class="card-line"></div>
   <div class="buttons"></div>
  </div>
  <div class="post">
   <div class="post-line"></div>
   <div class="screen">
    <div class="dollar">$</div>
   </div>
   <div class="numbers"></div>
   <div class="numbers-line2"></div>
  </div>
 </div>
 <div class="right-side">
  <div class="new">New Transaction</div>
  
   <svg viewBox="0 0 451.846 451.847" height="512" width="512" xmlns="http://www.w3.org/2000/svg" class="arrow"><path fill="#cfcfcf" data-old_color="#000000" class="active-path" data-original="#000000" d="M345.441 248.292L151.154 442.573c-12.359 12.365-32.397 12.365-44.75 0-12.354-12.354-12.354-32.391 0-44.744L278.318 225.92 106.409 54.017c-12.354-12.359-12.354-32.394 0-44.748 12.354-12.359 32.391-12.359 44.75 0l194.287 194.284c6.177 6.18 9.262 14.271 9.262 22.366 0 8.099-3.091 16.196-9.267 22.373z"></path></svg>
 
 </div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: payment card, animated, hover effect, card animation */
.container {
  background-color: #ffffff;
  display: flex;
  width: 460px;
  height: 120px;
  position: relative;
  border-radius: 6px;
  transition: 0.3s ease-in-out;
}

.container:hover {
  transform: scale(1.03);
  width: 220px;
}

.container:hover .left-side {
  width: 100%;
}

.left-side {
  background-color: #5de2a3;
  width: 130px;
  height: 120px;
  border-radius: 4px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
  flex-shrink: 0;
  overflow: hidden;
}

.right-side {
  width: calc(100% - 130px);
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  justify-content: space-between;
  white-space: nowrap;
  transition: 0.3s;
}

.right-side:hover {
  background-color: #f9f7f9;
}

.arrow {
  width: 20px;
  height: 20px;
  margin-right: 20px;
}

.new {
  font-size: 23px;
  font-family: "Lexend Deca", sans-serif;
  margin-left: 20px;
}

.card {
  width: 70px;
  height: 46px;
  background-color: #c7ffbc;
  border-radius: 6px;
  position: absolute;
  display: flex;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
  -moz-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
  -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
}

.card-line {
  width: 65px;
  height: 13px;
  background-color: #80ea69;
  border-radius: 2px;
  margin-top: 7px;
}

@media only screen and (max-width: 480px) {
  .container {
    transform: scale(0.7);
  }

  .container:hover {
    transform: scale(0.74);
  }

  .new {
    font-size: 18px;
  }
}

.buttons {
  width: 8px;
  height: 8px;
  background-color: #379e1f;
  box-shadow: 0 -10px 0 0 #26850e, 0 10px 0 0 #56be3e;
  border-radius: 50%;
  margin-top: 5px;
  transform: rotate(90deg);
  margin: 10px 0 0 -30px;
}

.container:hover .card {
  animation: slide-top 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}

.container:hover .post {
  animation: slide-post 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-70px) rotate(90deg);
    transform: translateY(-70px) rotate(90deg);
  }

  60% {
    -webkit-transform: translateY(-70px) rotate(90deg);
    transform: translateY(-70px) rotate(90deg);
  }

  100% {
    -webkit-transform: translateY(-8px) rotate(90deg);
    transform: translateY(-8px) rotate(90deg);
  }
}

.post {
  width: 63px;
  height: 75px;
  background-color: #dddde0;
  position: absolute;
  z-index: 11;
  bottom: 10px;
  top: 120px;
  border-radius: 6px;
  overflow: hidden;
}

.post-line {
  width: 47px;
  height: 9px;
  background-color: #545354;
  position: absolute;
  border-radius: 0px 0px 3px 3px;
  right: 8px;
  top: 8px;
}

.post-line:before {
  content: "";
  position: absolute;
  width: 47px;
  height: 9px;
  background-color: #757375;
  top: -8px;
}

.screen {
  width: 47px;
  height: 23px;
  background-color: #ffffff;
  position: absolute;
  top: 22px;
  right: 8px;
  border-radius: 3px;
}

.numbers {
  width: 12px;
  height: 12px;
  background-color: #838183;
  box-shadow: 0 -18px 0 0 #838183, 0 18px 0 0 #838183;
  border-radius: 2px;
  position: absolute;
  transform: rotate(90deg);
  left: 25px;
  top: 52px;
}

.numbers-line2 {
  width: 12px;
  height: 12px;
  background-color: #aaa9ab;
  box-shadow: 0 -18px 0 0 #aaa9ab, 0 18px 0 0 #aaa9ab;
  border-radius: 2px;
  position: absolute;
  transform: rotate(90deg);
  left: 25px;
  top: 68px;
}

@keyframes slide-post {
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-70px);
    transform: translateY(-70px);
  }
}

.dollar {
  position: absolute;
  font-size: 16px;
  font-family: "Lexend Deca", sans-serif;
  width: 100%;
  left: 0;
  top: 0;
  color: #4b953b;
  text-align: center;
}

.container:hover .dollar {
  animation: fade-in-fwd 0.3s 1s backwards;
}

@keyframes fade-in-fwd {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>


================================================
FILE: Cards/Admin12121_purple-parrot-82.html
================================================
<div class="body">
<a class="card education" href="#">
     <div class="overlay"></div>
  <div class="circle">

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="29 14 71 76" height="76px" width="71px">
    
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g transform="translate(30.000000, 14.000000)" fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="Group">
        <g fill="#D98A19" id="Group-8">
            <g id="Group-7">
                <g id="Group-6">
                    <path id="Fill-1" d="M0,0 L0,75.9204805 L69.1511499,75.9204805 L0,0 Z M14.0563973,32.2825679 L42.9457663,63.9991501 L14.2315268,63.9991501 L14.0563973,32.2825679 Z"></path>
                </g>
            </g>
        </g>
        <g stroke-linecap="square" stroke="#FFFFFF" transform="translate(0.000000, 14.114286)" id="Group-20">
            <path id="Line" d="M0.419998734,54.9642857 L4.70316223,54.9642857"></path>
            <path id="Line" d="M0.419998734,50.4404762 L4.70316223,50.4404762"></path>
            <path id="Line" d="M0.419998734,45.9166667 L4.70316223,45.9166667"></path>
            <path id="Line" d="M0.419998734,41.3928571 L2.93999114,41.3928571"></path>
            <path id="Line" d="M0.419998734,36.8690476 L4.70316223,36.8690476"></path>
            <path id="Line" d="M0.419998734,32.3452381 L4.70316223,32.3452381"></path>
            <path id="Line" d="M0.419998734,27.8214286 L4.70316223,27.8214286"></path>
            <path id="Line" d="M0.419998734,23.297619 L2.93999114,23.297619"></path>
            <path id="Line" d="M0.419998734,18.7738095 L4.70316223,18.7738095"></path>
            <path id="Line" d="M0.419998734,14.25 L4.70316223,14.25"></path>
            <path id="Line" d="M0.419998734,9.72619048 L4.70316223,9.72619048"></path>
            <path id="Line" d="M0.419998734,5.20238095 L2.93999114,5.20238095"></path>
            <path id="Line" d="M0.419998734,0.678571429 L4.70316223,0.678571429"></path>
        </g>
    </g>
</svg>
  </div>
  <p>Education</p>
</a>

</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: cardgift, card template, card animation, card hover */
.education {
  --bg-color: #ffd861;
  --bg-color-light: #ffeeba;
  --text-color-hover: #4C5656;
  --box-shadow-color: rgba(255, 215, 97, 0.48);
}

.card {
  width: 220px;
  height: 321px;
  background: #fff;
  border-top-right-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 14px 26px rgba(0,0,0,0.04);
  transition: all 0.3s ease-out;
  text-decoration: none;
}

.card:hover {
  transform: translateY(-5px) scale(1.005) translateZ(0);
  box-shadow: 0 24px 36px rgba(0,0,0,0.11),
    0 24px 46px var(--box-shadow-color);
}

.card:hover .overlay {
  transform: scale(4) translateZ(0);
}

.card:hover .circle {
  border-color: var(--bg-color-light);
  background: var(--bg-color);
}

.card:hover .circle:after {
  background: var(--bg-color-light);
}

.card:hover p {
  color: var(--text-color-hover);
}

.card:active {
  transform: scale(1) translateZ(0);
  box-shadow: 0 15px 24px rgba(0,0,0,0.11),
    0 15px 24px var(--box-shadow-color);
}

.card p {
  font-size: 17px;
  color: #4C5656;
  margin-top: 30px;
  z-index: 1000;
  transition: color 0.3s ease-out;
}

.circle {
  width: 131px;
  height: 131px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-out;
}

.circle:after {
  content: "";
  width: 118px;
  height: 118px;
  display: block;
  position: absolute;
  background: var(--bg-color);
  border-radius: 50%;
  transition: opacity 0.3s ease-out;
}

.circle svg {
  z-index: 10000;
  transform: translateZ(0);
}

.overlay {
  width: 118px;
  position: absolute;
  height: 118px;
  border-radius: 50%;
  background: var(--bg-color);
  top: 70px;
  left: 50px;
  z-index: 0;
  transition: transform 0.3s ease-out;
}
</style>


================================================
FILE: Cards/Admin12121_quick-impala-38.html
================================================
<div class="modal">
	<article class="modal-container">
		<header class="modal-container-header">
			<span class="modal-container-title">
				<svg aria-hidden="true" height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
					<path d="M0 0h24v24H0z" fill="none"></path>
					<path d="M14 9V4H5v16h6.056c.328.417.724.785 1.18 1.085l1.39.915H3.993A.993.993 0 0 1 3 21.008V2.992C3 2.455 3.449 2 4.002 2h10.995L21 8v1h-7zm-2 2h9v5.949c0 .99-.501 1.916-1.336 2.465L16.5 21.498l-3.164-2.084A2.953 2.953 0 0 1 12 16.95V11zm2 5.949c0 .316.162.614.436.795l2.064 1.36 2.064-1.36a.954.954 0 0 0 .436-.795V13h-5v3.949z" fill="currentColor"></path>
				</svg>
				Terms and Services
			</span>
			<button class="icon-button">
				<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
					<path d="M0 0h24v24H0z" fill="none"></path>
					<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" fill="currentColor"></path>
				</svg>
			</button>
		</header>
		<section class="modal-container-body rtf">
			<span>Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur.</span>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Hoc est non modo cor non habere, sed ne palatum quidem. Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Duo Reges: constructio interrete. </p>

			<span>Ut proverbia non nulla veriora sint quam vestra dogmata.</span>

			<p>Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Tria genera cupiditatum, naturales et necessariae, naturales et non necessariae, nec naturales nec necessariae. Sin aliud quid voles, postea. Consequatur summas voluptates non modo parvo, sed per me nihilo, si potest; </p>

			<p>Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur? Primum in nostrane potestate est, quid meminerimus? Eam tum adesse, cum dolor omnis absit; Quodsi ipsam honestatem undique pertectam atque absolutam. Aliam vero vim voluptatis esse, aliam nihil dolendi, nisi valde pertinax fueris, concedas necesse est. Nec enim, cum tua causa cui commodes, beneficium illud habendum est, sed faeneratio, nec gratia deberi videtur ei, qui sua causa commodaverit. Universa enim illorum ratione cum tota vestra confligendum puto. Sed residamus, inquit, si placet. Sed vobis voluptatum perceptarum recordatio vitam beatam facit, et quidem corpore perceptarum. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Ita enim se Athenis collocavit, ut sit paene unus ex Atticis, ut id etiam cognomen videatur habiturus. Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. </p>

			<span>An hoc usque quaque, aliter in vita?</span>
			<ol>
				<li>Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur.</li>
				<li>Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q.</li>
				<li>Certe nihil nisi quod possit ipsum propter se iure laudari.</li>
				<li>Itaque e contrario moderati aequabilesque habitus, affectiones ususque corporis apti esse ad naturam videntur.</li>
			</ol>

			<p>Utilitatis causa amicitia est quaesita. Qui autem de summo bono dissentit de tota philosophiae ratione dissentit. Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Sed emolumenta communia esse dicuntur, recte autem facta et peccata non habentur communia. Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Totum autem id externum est, et quod externum, id in casu est. Non autem hoc: igitur ne illud quidem. Simul atque natum animal est, gaudet voluptate et eam appetit ut bonum, aspernatur dolorem ut malum. Quamquam tu hanc copiosiorem etiam soles dicere. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere. Videsne quam sit magna dissensio? </p>

			<span>Claudii libidini, qui tum erat summo ne imperio, dederetur.</span>

			<p>Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Cum audissem Antiochum, Brute, ut solebam, cum M. An obliviscimur, quantopere in audiendo in legendoque moveamur, cum pie, cum amice, cum magno animo aliquid factum cognoscimus? Qui igitur convenit ab alia voluptate dicere naturam proficisci, in alia summum bonum ponere? Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. Haec mirabilia videri intellego, sed cum certe superiora firma ac vera sint, his autem ea consentanea et consequentia, ne de horum quidem est veritate dubitandum. At, illa, ut vobis placet, partem quandam tuetur, reliquam deserit. Sed utrum hortandus es nobis, Luci, inquit, an etiam tua sponte propensus es? Sed est forma eius disciplinae, sicut fere ceterarum, triplex: una pars est naturae, disserendi altera, vivendi tertia. Nemo enim est, qui aliter dixerit quin omnium naturarum simile esset id, ad quod omnia referrentur, quod est ultimum rerum appetendarum. Quid est, quod ab ea absolvi et perfici debeat? Quod cum accidisset ut alter alterum necopinato videremus, surrexit statim. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Quod iam a me expectare noli. Quod totum contra est. Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non deserat. </p>

			<span>Sed nimis multa.</span>

			<p>Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Negat enim summo bono afferre incrementum diem. Causa autem fuit huc veniendi ut quosdam hinc libros promerem. Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc? Minime vero probatur huic disciplinae, de qua loquor, aut iustitiam aut amicitiam propter utilitates adscisci aut probari. Nulla profecto est, quin suam vim retineat a primo ad extremum. Sed ad illum redeo. Quem quidem vos, cum improbis poenam proponitis, inpetibilem facitis, cum sapientem semper boni plus habere vultis, tolerabilem. Huic ego, si negaret quicquam interesse ad beate vivendum quali uteretur victu, concederem, laudarem etiam; Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. His singulis copiose responderi solet, sed quae perspicua sunt longa esse non debent. Quae cum ita sint, effectum est nihil esse malum, quod turpe non sit. </p>

		</section>
		<footer class="modal-container-footer">
			<button class="button is-ghost">Decline</button>
			<button class="button is-primary">Accept</button>
		</footer>
	</article>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: card, accept, card design */
.button,
.input,
.select,
.textarea {
  font: inherit;
}

a {
  color: inherit;
}

.modal-container {
  max-height: 400px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);
}

@media (max-width: 600px) {
  .modal-container {
    width: 90%;
  }
}

.modal-container-header {
  padding: 16px 32px;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-container-title {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  font-weight: 700;
  font-size: 1.125;
}

.modal-container-title svg {
  width: 32px;
  height: 32px;
  color: #750550;
}

.modal-container-body {
  padding: 24px 32px 51px;
  overflow-y: auto;
}

.rtf h1,
.rtf h2,
.rtf h3,
.rtf h4,
.rtf h5,
.rtf h6 {
  font-weight: 700;
}

.rtf h1 {
  font-size: 1.5rem;
  line-height: 1.125;
}

.rtf h2 {
  font-size: 1.25rem;
  line-height: 1.25;
}

.rtf h3 {
  font-size: 1rem;
  line-height: 1.5;
}

.rtf > * + * {
  margin-top: 1em;
}

.rtf > * + :is(h1, h2, h3) {
  margin-top: 2em;
}

.rtf > :is(h1, h2, h3) + * {
  margin-top: 0.75em;
}

.rtf ul,
.rtf ol {
  margin-left: 20px;
  list-style-position: inside;
}

.rtf ol {
  list-style: numeric;
}

.rtf ul {
  list-style: disc;
}

.modal-container-footer {
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #ddd;
  gap: 12px;
  position: relative;
}

.modal-container-footer:after {
  content: "";
  display: block;
  position: absolute;
  top: -51px;
  left: 24px;
  right: 24px;
  height: 50px;
  flex-shrink: 0;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.75), transparent);
  pointer-events: none;
}

.button {
  padding: 12px 20px;
  border-radius: 8px;
  background-color: transparent;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.button.is-ghost:hover, .button.is-ghost:focus {
  background-color: #dfdad7;
}

.button.is-primary {
  background-color: #750550;
  color: #fff;
}

.button.is-primary:hover, .button.is-primary:focus {
  background-color: #4a0433;
}

.icon-button {
  padding: 0;
  border: 0;
  background-color: transparent;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.15s ease;
}

.icon-button svg {
  width: 24px;
  height: 24px;
}

.icon-button:hover, .icon-button:focus {
  background-color: #dfdad7;
}
</style>


================================================
FILE: Cards/Admin12121_strange-jellyfish-63.html
================================================
    <section class="product-container product-1">
      <div class="card">
        <div class="photo"></div>
        <div class="content">
          <div class="title">GeForce RTX 4090</div>
          <div class="bg-title">RTX</div>
          <div class="feature size">
            <div>size :</div>
            <span>S</span>
            <span>M</span>
            <span>L</span>
          </div>
          <div class="feature color">
            <div>color :</div>
            <span>pink</span>
            <span class="tt">blue</span>
            <span class="ttt">green</span>
          </div>
          <button class="btn-buy">buy now</button>
        </div>
      </div>
    </section>

<style>
/* From Uiverse.io by Admin12121 - Tags: animated, card animation, card hover, 3d card */
.product-container {
  position: relative;
}

.card {
  font-family: Lato, sans-serif;
  position: relative;
  width: 290px;
  height: 400px;
  background: #232323;
  border-radius: 20px;
  overflow: hidden;
}

.card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--product-color);
  clip-path: circle(150px at 80% 20%);
  transition: .5s ease-in-out;
}

.card:hover:before {
  clip-path: circle(300px at 80% -20%);
}

.title {
  position: relative;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  margin-top: 12px;
}

.bg-title {
  font-size: 10em;
  font-weight: 900;
  font-style: italic;
  color: rgba(255,255,255,.04);
  position: absolute;
  max-width: 120%;
  top: -150%;
  transition: .6s;
}

.card:hover .bg-title {
  transform: translateY(60%);
}

.photo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 100%;
  height: 220px;
  transition: .5s;
}

.card:hover .photo {
  top: 0%;
  transform: translateY(0%);
}

.photo img {
  position: absolute;
  width: 220px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  transition: .5s;
}

.card:hover .photo img {
  width: 260px;
  top: 56%;
}

.content {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  text-align: center;
  transition: 1s;
  z-index: 5;
}

.card:hover .content {
  height: 190px;
}

.feature {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  transition: .5s;
  visibility: hidden;
  opacity: 0;
}

.card:hover .feature {
  visibility: visible;
  opacity: 1;
  transition-delay: .5s;
}

.feature div {
  color: #fff;
  font-weight: 300;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-right: 10px;
}

.feature span {
  min-width: 20px;
  padding: 0 4px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  font-size: 14px;
  display: inline-block;
  color: #111;
  background: #fff;
  margin: 0 5px;
  transition: .4s;
  border-radius: 4px;
  cursor: pointer
}

.feature span:hover {
  color: #000;
  background: var(--product-color);
}

.btn-buy {
  display: inline-block;
  padding: 10px 20px;
  background: #fff;
  border: none;
  border-radius: 4px;
  margin-top: 10px;
  text-decoration: none;
  font-weight: 600;
  color: #111;
  opacity: 0;
  transform: translateY(50px);
  transition: 0.5s;
  cursor: pointer;
  outline: none;
}

.card:hover .btn-buy {
  opacity: 1;
  transform: translateY(0px);
  transition: 0.5s;
  transition-delay: 0.5s;
}

.card:hover .btn-buy:hover {
  background: var(--product-color);
  transition-delay: 0;
  transition: 0.05s;
}

.product-1 {
  --product-color: #EB6CA4;
}

.size span {
  cursor: pointer;
  z-index: 50;
}

.feature .tt:hover {
  background: #038dff;
}

.feature .ttt:hover {
  background: #09ff0d;
}
</style>


================================================
FILE: Cards/Admin12121_ugly-sheep-18.html
================================================
<section class="container">
  <div class="card">
    <div class="content">
    <p class="logo">Digital Way</p>
      <div class="h6">Data &amp; Infrastructure Agility</div>
      <div class="hover_content">
        <p>mParticle’s customer data platform empowers you to Integrate all of your data and orchestrate it across channels, partners, and systems.</p>
      </div>
    </div>
  </div>       
</section>
<style>
/* From Uiverse.io by Admin12121 - Tags: cardgift, card template, cardhover , card animation */
.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  position: relative;
  display: flex;
  justify-content: center;
  cursor: pointer;
  width: 22em;
  max-width: 80%;
  padding: 2em 0;
  background: #FFF;
  box-shadow: 0 0 6px 0 rgba(32, 32, 36, 0.12);
  transition: all 0.35s ease;
}

.card::before, .card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: orange;
  height: 4px;
}

.card::before {
  width: 0;
  opacity: 0;
  transition: opacity 0 ease, width 0 ease;
  transition-delay: 0.5s;
}

.card::after {
  width: 100%;
  background: white;
  transition: width 0.5s ease;
}

.card .content {
  width: 18em;
  max-width: 80%;
}

.card .logo {
  margin: 0 0 1em;
  width: 10.625em;
  transition: all 0.35s ease;
}

.card .h6 {
  color: #999;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 2px;
}

.card .hover_content {
  overflow: hidden;
  max-height: 0;
  transform: translateY(1em);
  transition: all 0.55s ease;
}

.card .hover_content p {
  margin: 1.5em 0 0;
  color: #6E6E70;
  line-height: 1.4em;
}

.card:hover {
  width: 24em;
  box-shadow: 0 10px 20px 0 rgba(32, 32, 36, 0.12);
}

.card:hover::before {
  width: 100%;
  opacity: 1;
  transition: opacity 0.5s ease, width 0.5s ease;
  transition-delay: 0;
}

.card:hover::after {
  width: 0;
  opacity: 0;
  transition: width 0 ease;
}

.card:hover .logo {
  margin-bottom: 0.5em;
}

.card:hover .hover_content {
  max-height: 10em;
  transform: none;
}
</style>


================================================
FILE: Cards/Admin12121_witty-treefrog-58.html
================================================
<div class="cookie-warning">
  <span class="cookie-warning__title">We use cookies 🍪</span>
    <div class="cookie-warning__text">This site uses cookies to enhance your experience. Give 'em a go! Or don't! It's up to you! <a href="#">Read more about our cookies</a></div>
    <div class="cookie-warning__button-group">
      <button class="cookie-warning__button">Accept</button>
      <button class="cookie-warning__button">Decline</button>
    </div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: card, accept, card design */
.cookie-warning {
  background: linear-gradient(0deg, #9005bd 0%, #bc28d2 100%);
  box-shadow: 10px 5px 20px 0 rgba(144, 5, 189, 0.3);
  max-width: 400px;
  display: flex;
  color: #FFF;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 0.6rem;
/*  position: fixed; */
  left: 2.4rem;
  right: 2.4rem;
  bottom: 2.4rem;
  z-index: 100;
}

.cookie-warning__title {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}

.cookie-warning__text {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

.cookie-warning a {
  color: rgba(255, 255, 255, 0.8);
}

.cookie-warning__button-group {
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
  margin-bottom: -0.5rem;
}

.cookie-warning__button {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  padding: 8px 8px;
  border-radius: 0.6rem;
  margin-right: 0.8rem;
  font-size: 1rem;
  color: #FFF;
  transition: 0.15s ease;
}

.cookie-warning__button:hover {
  color: #9005bd;
  background-color: rgba(255, 255, 255, 0.8);
}
</style>


================================================
FILE: Cards/Adrwaan_dry-bullfrog-78.html
================================================
<div class="card">
  <svg viewBox="0 0 512 512" class="paperplane">
    <path
      d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"
    ></path>
  </svg>
</div>

<style>
/* From Uiverse.io by Adrwaan  - Tags: icon, animation, card, hover, glow, svg, border, color */
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 190px;
  height: 254px;
  background: #434343;
  border-radius: 10px;
}

.card::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 254px;
  background-color: tomato;
  border-radius: 10px;
  z-index: -1;
  transition: all 0.4s;
  animation: animate 5s linear infinite;
}

.card:hover::before {
  width: 197px;
  height: 259px;
}

.card:hover .paperplane {
  transform: scale(1.07) translateY(-10%) rotate(18deg);
}

.paperplane {
  fill: #888;
  width: 70px;
  transition: 0.4s all;
}

@keyframes animate {
  50% {
    filter: hue-rotate(350deg);
  }
}

</style>
    

================================================
FILE: Cards/Alaner-xs_sweet-seahorse-62.html
================================================
<div class="card">
  <div class="card-border-top">
  </div>
  <div class="img">
  </div>
  <span> Person</span>
  <p class="job"> Job Title</p>
  <button> Click
  </button>
</div>
<style>
/* From Uiverse.io by Alaner-xs - Tags: gradient, card */
.card {
  width: 190px;
  height: 254px;
  background-image: linear-gradient(144deg,#8608b4, #492fed 60%,#bd6fda);
  border: none;
  border-radius: 10px;
  padding-top: 10px;
  position: relative;
  margin: auto;
  font-family: inherit;
}

.card span {
  font-weight: 600;
  color: white;
  text-align: center;
  display: block;
  padding-top: 10px;
  font-size: 1.3em;
}

.card .job {
  font-weight: 400;
  color: white;
  display: block;
  text-align: center;
  padding-top: 5px;
  font-size: 1em;
}

.card .img {
  width: 70px;
  height: 70px;
  background: #e8e8e8;
  border-radius: 100%;
  margin: auto;
  margin-top: 20px;
}

.card button {
  padding: 8px 25px;
  display: block;
  margin: auto;
  border-radius: 8px;
  border: none;
  margin-top: 30px;
  background: #e8e8e8;
  color: #111111;
  font-weight: 600;
}

.card button:hover {
  background: #212121;
  color: #ffffff;
}
</style>


================================================
FILE: Cards/Ali-Tahmazi99_curly-insect-62.html
================================================
<div class="card">
    <p>
        Hover Me
    </p>
</div>
<style>
/* From Uiverse.io by Ali-Tahmazi99 - Tags: card */
.card {
  width: 200px;
  height: 300px;
  background: #f8f9fa;
  position: relative;
  box-shadow: 15px 15px 50px #adb5bd75;
  text-align: center;
  overflow: hidden;
  transition: all 0.3s ease-in;
}

.card p {
  transition: all 0.3s ease-in;
  margin-top: 40px;
}

.card:hover {
  cursor: pointer;
  box-shadow: none;
}

.card:hover p {
  transform: scale(1.5);
  color: #f8f9fa;
}

.card::before {
  content: '';
  width: 100%;
  height: 0;
  background: #3f72ff;
  position: absolute;
  left: 0;
  bottom: 0;
      /* Or Top */
  transition: 0.3s ease-in-out;
  z-index: -1;
}

.card:hover::before {
  height: 100%;
}
</style>


================================================
FILE: Cards/AmIt-DasIT_quick-frog-32.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: card */
.card {
  width: 310px;
  height: 330px;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 15px;
  padding: 5px;
  color: white;
  z-index: 1030;
  transition: 0.4s;
  overflow: hidden;
  position: relative;
  animation: shadow 3s linear infinite;
}

.card::before {
  content: "";
  position: absolute;
  top: -27%;
  width: 550px;
  height: 550px;
  z-index: -1;
  background-image: conic-gradient(transparent, transparent, transparent, crimson);
  animation: rotate 3s linear infinite;
  /* animation-delay: 1.5s; */
}

.card::after {
  content: "";
  position: absolute;
  bottom: -30%;
  width: 550px;
  height: 550px;
  transform: rotate(180deg);
  background-image: conic-gradient(transparent, transparent, transparent, yellow);
  z-index: -1;
  animation: rotate1 3s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate1 {
  0% {
    transform: rotate(180deg);
  }

  0% {
    transform: rotate(-180deg);
  }
}

@keyframes shadow {
  0% {
    box-shadow: 6px 6px 15px rgba(255, 194, 80, 0.25),
  -6px -6px 20px rgba(255, 0, 0, 0.25);
  }

  50% {
    box-shadow: -6px -6px 15px rgba(255, 194, 80, 0.25),
  6px 6px 20px rgba(255, 0, 0, 0.25);
  }

  100% {
    box-shadow: 6px 6px 15px rgba(255, 194, 80, 0.25),
  -6px -6px 20px rgba(255, 0, 0, 0.25);
  }
}

.card .heading {
  font-size: 18px;
  font-weight: 800;
  background-size: 300% 300%;
  background-image: linear-gradient(to right, #d52643, yellow, yellowgreen);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  z-index: 1000;
  animation: AnimateBG 4s ease infinite;
}

@keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.card .content {
  display: flex;
  width: 301px;
  height: 322px;
  border-radius: 15px;
  position: absolute;
  justify-content: center;
  align-items: center;
  background-color: rgb(28, 28, 28);
  gap: 20px;
}

.card .content .item {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 80px;
  height: 30px;
  cursor: pointer;
  border-radius: 10px;
  font-weight: 600;
  transition: 1s;
}

.card .content .item:hover svg path {
  stroke: #26d526
}

.card .content .item:hover svg {
  animation: anima 2s;
}

@keyframes anima {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.card .content .item--post:hover svg {
  animation: launch 2s;
}

@keyframes launch {
  0% {
    transform: translateX(0px);
  }

  10% {
    transform: translateY(20px);
  }

  75% {
    transform: translateY(-250px) rotate(10deg) translateX(20px);
    opacity: 0;
  }

  80% {
    transform: translateY(5px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.card button {
  padding: 10px 30px;
  border-radius: 20px;
  font-size: 15px;
  z-index: 1000;
  border: none;
  font-weight: 600;
  background: linear-gradient(to right, #26d526, yellow);
  cursor: pointer;
}

.card button:hover {
  background: linear-gradient(to right, #4bff4b, rgb(255, 255, 86));
}
</style>


================================================
FILE: Cards/Amine-maker_friendly-pig-12.html
================================================
<article class="article-wrapper">
  <div class="rounded-lg container-project">
    </div>
    <div class="project-info">
      <div class="flex-pr">
        <div class="project-title text-nowrap">Project</div>
          <div class="project-hover">
            <svg style="color: black;" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" color="black" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke="currentColor"><line y2="12" x2="19" y1="12" x1="5"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
            </div>
          </div>
          <div class="types">
            <span style="background-color: rgba(165, 96, 247, 0.43); color: rgb(85, 27, 177);" class="project-type">• Analytics</span>
             <span class="project-type">• Dashboards</span>
        </div>
    </div>
</article>
<style>
/* From Uiverse.io by Amine-maker - Tags: card */
.article-wrapper {
  width: 250px;
  -webkit-transition: 0.15s all ease-in-out;
  transition: 0.15s all ease-in-out;
  border-radius: 10px;
  padding: 5px;
  border: 4px solid transparent;
  cursor: pointer;
  background-color: white;
}

.article-wrapper:hover {
  -webkit-box-shadow: 10px 10px 0 #4e84ff, 20px 20px 0 #4444bd;
  box-shadow: 10px 10px 0 #4e84ff, 20px 20px 0 #4444bd;
  border-color: #0578c5;
  -webkit-transform: translate(-20px, -20px);
  -ms-transform: translate(-20px, -20px);
  transform: translate(-20px, -20px);
}

.article-wrapper:active {
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

.types {
  gap: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  place-content: flex-start;
}

.rounded-lg {
 /* class tailwind */
  border-radius: 10px;
}

.article-wrapper:hover .project-hover {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background-color: #a6c2f0;
}

.project-info {
  padding-top: 20px;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
}

.project-title {
  font-size: 2em;
  margin: 0;
  font-weight: 600;
 /* depend de la font */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: black;
}

.flex-pr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.project-type {
  background: #b2b2fd;
  color: #1a41cd;
  font-weight: bold;
  padding: 0.3em 0.7em;
  border-radius: 15px;
  font-size: 12px;
  letter-spacing: -0.6px
}

.project-hover {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 9px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.container-project {
  width: 100%;
  height: 170px;
  background: gray;
}

</style>


================================================
FILE: Cards/AnnixArt_wonderful-liger-82.html
================================================
<div class="container">
  <div class="coffee-header">
    <div class="coffee-header__buttons coffee-header__button-one"></div>
    <div class="coffee-header__buttons coffee-header__button-two"></div>
    <div class="coffee-header__display"></div>
    <div class="coffee-header__details"></div>
  </div>
  <div class="coffee-medium">
    <div class="coffe-medium__exit"></div>
    <div class="coffee-medium__arm"></div>
    <div class="coffee-medium__liquid"></div>
    <div class="coffee-medium__smoke coffee-medium__smoke-one"></div>
    <div class="coffee-medium__smoke coffee-medium__smoke-two"></div>
    <div class="coffee-medium__smoke coffee-medium__smoke-three"></div>
    <div class="coffee-medium__smoke coffee-medium__smoke-for"></div>
    <div class="coffee-medium__cup"></div>
  </div>
  <div class="coffee-footer"></div>
</div>

<style>
/* From Uiverse.io by AnnixArt  - Tags: action, social, card */
.container {
  width: 300px;
  height: 280px;
  position: absolute;
  top: calc(50% - 140px);
  left: calc(50% - 150px);
}
.coffee-header {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ddcfcc;
  border-radius: 10px;
}
.coffee-header__buttons {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 25px;
  background-color: #282323;
  border-radius: 50%;
}
.coffee-header__buttons::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: -8px;
  left: calc(50% - 4px);
  background-color: #615e5e;
}
.coffee-header__button-one {
  left: 15px;
}
.coffee-header__button-two {
  left: 50px;
}
.coffee-header__display {
  width: 50px;
  height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  border-radius: 50%;
  background-color: #9acfc5;
  border: 5px solid #43beae;
  box-sizing: border-box;
}
.coffee-header__details {
  width: 8px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #9b9091;
  box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091;
}
.coffee-medium {
  width: 90%;
  height: 160px;
  position: absolute;
  top: 80px;
  left: calc(50% - 45%);
  background-color: #bcb0af;
}
.coffee-medium:before {
  content: "";
  width: 90%;
  height: 100px;
  background-color: #776f6e;
  position: absolute;
  bottom: 0;
  left: calc(50% - 45%);
  border-radius: 20px 20px 0 0;
}
.coffe-medium__exit {
  width: 60px;
  height: 20px;
  position: absolute;
  top: 0;
  left: calc(50% - 30px);
  background-color: #231f20;
}
.coffe-medium__exit::before {
  content: "";
  width: 50px;
  height: 20px;
  border-radius: 0 0 50% 50%;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 25px);
  background-color: #231f20;
}
.coffe-medium__exit::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: -30px;
  left: calc(50% - 5px);
  background-color: #231f20;
}
.coffee-medium__arm {
  width: 70px;
  height: 20px;
  position: absolute;
  top: 15px;
  right: 25px;
  background-color: #231f20;
}
.coffee-medium__arm::before {
  content: "";
  width: 15px;
  height: 5px;
  position: absolute;
  top: 7px;
  left: -15px;
  background-color: #9e9495;
}
.coffee-medium__cup {
  width: 80px;
  height: 47px;
  position: absolute;
  bottom: 0;
  left: calc(50% - 40px);
  background-color: #fff;
  border-radius: 0 0 70px 70px / 0 0 110px 110px;
}
.coffee-medium__cup::after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 6px;
  right: -13px;
  border: 5px solid #fff;
  border-radius: 50%;
}
@keyframes liquid {
  0% {
    height: 0px;
    opacity: 1;
  }
  5% {
    height: 0px;
    opacity: 1;
  }
  20% {
    height: 62px;
    opacity: 1;
  }
  95% {
    height: 62px;
    opacity: 1;
  }
  100% {
    height: 62px;
    opacity: 0;
  }
}
.coffee-medium__liquid {
  width: 6px;
  height: 63px;
  opacity: 0;
  position: absolute;
  top: 50px;
  left: calc(50% - 3px);
  background-color: #74372b;
  animation: liquid 4s 4s linear infinite;
}
.coffee-medium__smoke {
  width: 8px;
  height: 20px;
  position: absolute;
  border-radius: 5px;
  background-color: #b3aeae;
}
@keyframes smokeOne {
  0% {
    bottom: 20px;
    opacity: 0;
  }
  40% {
    bottom: 50px;
    opacity: 0.5;
  }
  80% {
    bottom: 80px;
    opacity: 0.3;
  }
  100% {
    bottom: 80px;
    opacity: 0;
  }
}
@keyframes smokeTwo {
  0% {
    bottom: 40px;
    opacity: 0;
  }
  40% {
    bottom: 70px;
    opacity: 0.5;
  }
  80% {
    bottom: 80px;
    opacity: 0.3;
  }
  100% {
    bottom: 80px;
    opacity: 0;
  }
}
.coffee-medium__smoke-one {
  opacity: 0;
  bottom: 50px;
  left: 102px;
  animation: smokeOne 3s 4s linear infinite;
}
.coffee-medium__smoke-two {
  opacity: 0;
  bottom: 70px;
  left: 118px;
  animation: smokeTwo 3s 5s linear infinite;
}
.coffee-medium__smoke-three {
  opacity: 0;
  bottom: 65px;
  right: 118px;
  animation: smokeTwo 3s 6s linear infinite;
}
.coffee-medium__smoke-for {
  opacity: 0;
  bottom: 50px;
  right: 102px;
  animation: smokeOne 3s 5s linear infinite;
}
.coffee-footer {
  width: 95%;
  height: 15px;
  position: absolute;
  bottom: 25px;
  left: calc(50% - 47.5%);
  background-color: #41bdad;
  border-radius: 10px;
}
.coffee-footer::after {
  content: "";
  width: 106%;
  height: 26px;
  position: absolute;
  bottom: -25px;
  left: -8px;
  background-color: #000;
}

</style>
    

================================================
FILE: Cards/AnthonyPreite_tiny-shrimp-10.html
================================================

<div class="cards__inner">
  <div class="cards__card card">
    <p class="card__heading">Free Plan</p>
    <p class="card__price">$0/month</p>
    <ul class="card_bullets flow" role="list">
      <li>Access to all features</li>
      <li>Unlimited storage</li>
      <li>No ads</li>
    </ul>
    <a class="card__cta cta" href="#basic">Get Started</a>
  </div>
  <div class="overlay cards__inner"></div>
</div>

<style>
/* From Uiverse.io by AnthonyPreite - Source: Nothing4U - Tags: purple, gradient, card, Colored, blue&pink, Glowing, GlowingHoverCard, Pricing */
.main__heading {
  font-weight: 600;
  font-size: 2.25em;
  margin-bottom: 0.75em;
  text-align: center;
  color: #eceff1;
}

.cards {
  position: relative;
}

.card {
  --flow-space: 0.5em;
  --hsl: var(--hue), var(--saturation), var(--lightness);
  flex: 1 1 14rem;
  padding: 1.5em 2em;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-items: start;
  gap: 1.25em;
  color: #eceff1;
  background-color: #2b2b2b;
  border: 1px solid #eceff133;
  border-radius: 15px;
}

.card:nth-child(1) {
  --hue: 165;
  --saturation: 82.26%;
  --lightness: 51.37%;
}

.card__bullets {
  line-height: 1.4;
}

.card__heading {
  font-size: 1.05em;
  font-weight: 600;
}

.card__price {
  font-size: 1.75em;
  font-weight: 700;
}

.flow > * + * {
  margin-top: var(--flow-space, 1.25em);
}

.cta {
  display: block;
  align-self: end;
  margin: 1em 0 0.5em 0;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: transparent;
  outline: 1px solid white;
  padding: 0.7em;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
}

.card:hover {
  --lightness: 80%;
  background: #ffffff80;
  color: #000;
  outline: 1px solid rgb(255, 255, 255);
  box-shadow: inset 0 0 80px whitesmoke, inset 20px 0 80px rgba(255, 0, 255, 0.747),
    inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff,
    0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;
  transition: all ease-in-out 0.3s;
}

.card:hover > .cta {
  outline: none;
  background-color: #0d0d0d;
}

</style>


================================================
FILE: Cards/Aryan-81_rare-rattlesnake-22.html
================================================
<div class="card">
  <div>
    <p class="heading">Popular this month</p>
    <p>Powered By</p>
    <p>Uiverse</p>
  </div>

  <button class="card-button">More Info</button>
</div>

<style>
/* From Uiverse.io by Aryan-81  - Tags: card, black, square, gradient, minimalistic, card, neon, glow, monthly, popular, Uiverse */
.card {
  position: relative;
  width: 190px;
  height: 190px;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 12px;
  gap: 12px;
  border-radius: 8px;
  cursor: pointer;
  color: rgb(255, 255, 255);
}
.card > div {
  margin: auto auto;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -5px;
  margin: auto;
  width: 200px;
  height: 200px;
  border-radius: 10px;
  background: linear-gradient(-45deg, #fff01c 0%, #40c9ff 100%);
  z-index: -10;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card::after {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #fff01c 0%, #40c9ff 100%);
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

.heading {
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 700;
}

.card p:not(.heading) {
  font-size: 14px;
}

.card p:last-child {
  color: #e81cff;
  font-weight: 600;
}

.card:hover::after {
  filter: blur(30px);
}

.card:hover::before {
  transform: rotate(-90deg) scaleX(1) scaleY(1);
}

.card:hover .card-button {
  transform: translate(-50%, 50%);
  opacity: 1;
}
.card-button {
  transform: translate(-50%, 125%);
  width: 60%;
  border-radius: 1rem;
  border: none;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100%);
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  position: absolute;
  left: 50%;
  bottom: 0;
  opacity: 0;
  transition: 0.3s ease-out;
}

</style>
    

================================================
FILE: Cards/Bastiennnn_white-lion-97.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by Bastiennnn  - Tags: animation, card, futuristic, colorful, transition */
.card {
  position: relative;
  background-image: linear-gradient(
    to right,
    #9b00ff,
    #8515ff,
    #6c20ff,
    #4b27ff,
    #002dff
  );
  border: 5px solid rgb(20, 7, 82);
  border-radius: 10px;
  text-align: center;
  width: 250px;
  height: 310px;
  transition: 1s;
  overflow: hidden;
  animation: rainbowBorder 1.5s linear infinite;
}

@keyframes rainbowBorder {
  0%,
  100% {
    box-shadow: 0px 5px 5px #0011ff;
  }
  25% {
    box-shadow: 5px 0px 5px #511ccc;
  }
  50% {
    box-shadow: 0px -5px 5px #5500ff;
  }
  75% {
    box-shadow: -5px 5px 5px #8b0eff;
  }
}

.card:hover {
  transform: scale(1.04) rotate(-1deg);
}

a {
  text-decoration: none;
}

.icons {
  background: rgba(0, 0, 0, 0.5);
  border: 3px solid rgb(20, 7, 82);
  border-radius: 10px;
  width: 200px;
  height: 40px;
  margin-left: 20px;
}

svg {
  background-color: rgb(36, 45, 134);
  color: rgb(255, 255, 255);
  border: 3px solid rgb(20, 7, 82);
  border-radius: 9px;
  width: 30px;
  height: 30px;
  margin: 7px;
  margin-top: 2.5px;
  transition: 1s;
}

svg:hover {
  background-color: #8515ff;
}

.heading {
  font-size: 17px;
  font-weight: bold;
  color: black;
}

img {
  width: 150px;
  animation: img 3s infinite;
  margin-top: 20px;
}

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

</style>
    

================================================
FILE: Cards/Bastiennnn_wicked-dog-68.html
================================================
<div class="card">
  <div class="header">
    <div class="top">
      <div class="circle">
        <span class="red circle2"></span>
      </div>
      <div class="circle">
        <span class="yellow circle2"></span>
      </div>
      <div class="circle">
        <span class="green circle2"></span>
      </div>
      <div class="title">
        <p id="title2">style.css</p>
      </div>
    </div>
  </div>
  <div class="code-container">
    <textarea class="area" id="code" name="code" readonly="">
.card {
  width: 300px;
  height: 400px;
  margin: 0 auto;
  background-color: #24233b;
  border-radius: 8px;
  z-index: 1;
  box-shadow: 0px 10px 10px rgb(73, 70, 92);
  transition: 0.5s;
}

.card:hover {
  transform: translateY(-7px);
  box-shadow: 0px 10px 10px black;
}

.top {
  display: flex;
  align-items: center;
  padding-left: 10px;
}</textarea
    >
  </div>
</div>

<style>
/* From Uiverse.io by Bastiennnn  - Tags: animation, blue, card, code, hover effect, cool card, cardhover , card hover */
.card {
  width: 300px;
  height: 400px;
  margin: 0 auto;
  background-color: #24233b;
  border-radius: 8px;
  z-index: 1;
  box-shadow: 0px 10px 10px rgb(73, 70, 92);
  transition: 0.5s;
}

.card:hover {
  transform: translateY(-7px);
  box-shadow: 0px 10px 10px black;
}

.top {
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.circle {
  padding: 0 4px;
}

.circle2 {
  display: inline-block;
  align-items: center;
  width: 10px;
  height: 10px;
  padding: 1px;
  border-radius: 5px;
}

.red {
  background-color: #ff605c;
}

.yellow {
  background-color: #ffbd44;
}

.green {
  background-color: #00ca4e;
}

.header {
  margin: 5px;
  margin-top: 5px;
  border-radius: 5px;
}

#title2 {
  color: white;
  padding-left: 50px;
  font-size: 15px;
}

.code-container {
  text-align: center;
}
#code {
  width: 270px;
  height: 350px;
  resize: none;
  background-color: rgb(73, 70, 92);
  border-radius: 5px;
  border: none;
  color: white;
  padding: 10px;
}
#code:focus {
  outline: none !important;
}

</style>
    

================================================
FILE: Cards/Bodyhc_bitter-zebra-88.html
================================================
<div class="ag-courses_item">
  <a class="ag-courses-item_link" href="#">
    <div class="ag-courses-item_bg"></div>
    <div class="ag-courses-item_title">You Welcome In Uiverse</div>
    <div class="ag-courses-item_date-box">
      Start:
      <span class="ag-courses-item_date"> 14.11.2023 </span>
    </div>
  </a>
</div>

<style>
/* From Uiverse.io by Bodyhc  - Tags:  */
.ag-courses_item {
  margin: auto;
  overflow: hidden;
  border-radius: 28px;
}
.ag-courses-item_link {
  display: block;
  padding: 30px 20px;
  background-color: #121212;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.ag-courses-item_link:hover,
.ag-courses-item_link:hover .ag-courses-item_date {
  color: #121212;
}
.ag-courses-item_link:hover .ag-courses-item_bg {
  -webkit-transform: scale(10);
  -ms-transform: scale(10);
  transform: scale(10);
}
.ag-courses-item_title {
  min-height: 57px;
  margin: 0 0 30px;
  overflow: hidden;
  font-weight: bold;
  font-size: 20px;
  color: rgb(255, 255, 255);
  z-index: 2;
  position: relative;
}
.ag-courses-item_date-box {
  font-size: 18px;
  color: #fff;
  z-index: 2;
  position: relative;
}
.ag-courses-item_date {
  font-weight: bold;
  color: #f9e534;
  -webkit-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease;
}
.ag-courses-item_bg {
  height: 130px;
  width: 100px;
  background-color: #f9b234;
  z-index: 1;
  position: absolute;
  top: -75px;
  right: -75px;
  border-radius: 50%;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

</style>
    

================================================
FILE: Cards/Brola2008_calm-octopus-51.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by Brola2008 - Tags: gradient, card, box-shadow */
.one-div {
  width: 190px;
  height: 250px;
  background: linear-gradient(-45deg, rgb(9, 16, 109) ,  rgba(0,255,239,1));
  border-radius: 20px;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
  transition: 0.5s ease;
}

.one-div::after {
  content: "HOVER ME";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-weight: bold;
  text-shadow: 1px 1px 4px rgb(0,0,0);
  transition: .3s;
}

.one-div:hover {
  scale: 1.1;
  border-radius: 20px 80px;
  box-shadow: 11px 11px 25px rgba(0, 0, 0, 0.5);
}

.one-div:hover::after {
  content: "THANKS";
  color: aqua;
}

</style>


================================================
FILE: Cards/ClawHack1_loud-cat-92.html
================================================
<div class="login-card">
  <div class="card-header">
    <h1>Login</h1>
  </div>
  <div class="card-body">
    <form>
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" id="username" name="username" required="">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" required="">
      </div>
      <div class="form-group">
        <button type="submit" class="login-button">Login</button>
      </div>
    </form>
  </div>
</div>

<style>
/* From Uiverse.io by ClawHack1 - Tags: login, card */
.login-card {
  background-color: #f8f8f8;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px;
  max-width: 400px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

.card-header {
  text-align: center;
  margin-bottom: 20px;
}

.card-header h1 {
  font-size: 2em;
  color: #333;
  text-shadow: 1px 1px #ddd;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  font-size: 1.2em;
  color: #555;
  margin-bottom: 10px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  border: none;
  background-color: #f0f0f0;
  font-size: 1.2em;
  color: #555;
  box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.3);
  outline: none;
}

input[type="submit"] {
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 1.2em;
  padding: 10px;
  transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
  background-color: #0069d9;
}

.login-button {
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 1.2em;
  padding: 10px;
  width: 100%;
  transition: background-color 0.3s ease;
  transition: 0.25s;
}

.login-button:hover {
  background-color: #0069d9e7;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0,105,217,1);
  -moz-box-shadow: 0px 0px 30px 0px rgba(0,105,217,1);
  box-shadow: 0px 0px 30px 0px rgba(0,105,217,1);
}

</style>


================================================
FILE: Cards/Clenio21_stale-sloth-57.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by Clenio21 - Tags: card */
.card {
 width: 190px;
 height: 254px;
 --border-radius: 15px;
 --border-width: 4px;
 appearance: none;
 position: relative;
 padding: 1em 2em;
 border: 0;
 background: rgb(5, 5, 22);
 font-size: 18px;
 font-weight: 500;
 color: #fff;
 z-index: 2;
 border-radius: 15px;
}

.card::after {
 --m-i: linear-gradient(#000, #000);
 --m-o: content-box, padding-box;
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 padding: var(--border-width);
 border-radius: var(--border-radius);
 background-image: conic-gradient(
		#488cfb,
		#29dbbc,
		#ddf505,
		#ff9f0e,
		#e440bb,
		#655adc,
		#488cfb
	);
 -webkit-mask-image: var(--m-i), var(--m-i);
 mask-image: var(--m-i), var(--m-i);
 -webkit-mask-origin: var(--m-o);
 mask-origin: var(--m-o);
 -webkit-mask-clip: var(--m-o);
 mask-composite: exclude;
 -webkit-mask-composite: destination-out;
 filter: hue-rotate(0);
 animation: rotate-hue linear 500ms infinite;
 animation-play-state: paused;
}

.card:hover::after {
 animation-play-state: running;
}

@keyframes rotate-hue {
 to {
  filter: hue-rotate(1turn);
 }
}

.card,
.card::after {
 box-sizing: border-box;
}

.card:active {
 --border-width: 5px;
}
</style>


================================================
FILE: Cards/Cobp_itchy-ape-77.html
================================================
<div class="card">
  <div class="card_form">
    <span>(Topic)</span>
  </div>
  <div class="card_data">
    <div style="display: flex" class="data">
      <div class="text">
        <label class="text_m">Main Title</label>
        <div class="cube text_s">
          <label class="side front">Access the list (Topic)</label>
          <label class="side top">Username-id</label>
        </div>
      </div>
    </div>
    <span title="Acceder a la lista (Temas)">Access</span>
  </div>
</div>

<style>
/* From Uiverse.io by Cobp  - Tags: material design, animation, 3d, card, modern */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #242824;
  padding: 10px;
  border-radius: 6px;
  gap: 0.5rem;
  height: max-content;
}
.card_form {
  position: relative;
  width: 15em;
  height: 15em;
  border-radius: 4px;
  background-color: #9147ff;
  transition: 0.2s ease-in-out;
  overflow: hidden;
}
.card_form span {
  font-size: 1.5em;
  position: absolute;
  inset: 0;
  padding: 5px 10px;
  color: #fff;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.card:hover .card_form span,
.card:hover .card_data span {
  opacity: 1;
}
.card_data {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card_data span {
  color: #9147ff;
  display: flex;
  align-items: center;
  font-size: 0.9em;
  transition: 0.2s ease-in-out;
  opacity: 0;
  cursor: pointer;
}
.card_data span:hover {
  text-decoration: underline;
}
.text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: white;
}
.text_m {
  font-size: 0.9em;
}
.text_s {
  color: #9147ff;
  font-size: 0.6em;
}
.cube {
  width: max-content;
  height: 10px;
  transition: all 0.2s;
  transform-style: preserve-3d;
}
.card:hover .cube {
  transform: rotateX(90deg);
}
.side {
  width: max-content;
  height: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
}
.top {
  transform: rotateX(-90deg) translate3d(0, 0, 0em);
}
.front {
  transform: translate3d(0, 0, 1em);
}

</style>
    

================================================
FILE: Cards/Cobp_jolly-skunk-2.html
================================================
<div class="card">
  <div class="bar"></div>
  <div class="card_form"></div>
  <div class="card_data">
    <div class="data">
      <div class="text">
        <label class="text_m">Main Title</label>
        <div class="cube text_s">
          <label class="side front">Access the list (Topic)</label>
          <label class="side top">Username-id</label>
        </div>
        <label class="text_d"
          >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Unum nescio,
          quo modo possit, si luxuriosus sit, finitas cupiditates habere.
        </label>
      </div>
    </div>
    <span title="Acceder a la lista (Temas)">Access</span>
  </div>
</div>

<style>
/* From Uiverse.io by Cobp  - Tags: material design, animation, card, modern */
.card {
  position: relative;
  display: flex;
  width: 350px;
  background-color: #242824;
  padding: 10px;
  border-radius: 6px;
  gap: 0.5rem;
  height: max-content;
}
.bar {
  width: 10px;
  border-radius: 5px;
  background-color: #9147ff;
  transition: all 0.5s ease-in-out;
}
.card:hover .bar {
  margin-right: 5px;
}
.card_form {
  position: relative;
  min-width: 5em;
  min-height: 5em;
  border-radius: 4px;
  background-color: #9147ff;
  transition: 0.2s ease-in-out;
  overflow: hidden;
}
.card_data {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card_data span {
  color: #9147ff;
  margin-top: auto;
  font-size: 0.9em;
  transition: 0.2s ease-in-out;
  cursor: pointer;
}
.card_data span:hover {
  color: #28aea5;
  text-decoration: underline;
}
.text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: 0.5em;
  color: white;
}
.text_m {
  font-size: 0.9em;
}
.text_s {
  color: #9147ff;
  font-size: 0.6em;
}
.text_d {
  font-size: 0.7em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.cube {
  width: max-content;
  height: 10px;
  transition: all 0.2s;
  transform-style: preserve-3d;
}
.card:hover .cube {
  transform: rotateX(90deg);
}
.side {
  width: max-content;
  height: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
}
.top {
  transform: rotateX(-90deg) translate3d(0, 0, 0em);
}
.front {
  transform: translate3d(0, 0, 1em);
}

</style>
    

================================================
FILE: Cards/Codewithvinay_afraid-dodo-14.html
================================================
<div class="box">
  <span></span>
  <div class="content">
    <h2>Hover me!</h2>
  </div>
</div>
<style>
/* From Uiverse.io by Codewithvinay - Tags: glassmorphism, card */
.box {
 position: relative;
 width: 220px;
 height: 300px;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: 0.5s;
 z-index: 1;
}

.box::before {
 content: ' ';
 position: absolute;
 top: 0;
 left: 50px;
 width: 50%;
 height: 100%;
 text-decoration: none;
 background: #fff;
 border-radius: 8px;
 transform: skewX(15deg);
 transition: 0.5s;
}

.box::after {
 content: '';
 position: absolute;
 top: 0;
 left: 50;
 width: 50%;
 height: 100%;
 background: #fff;
 border-radius: 8px;
 transform: skewX(15deg);
 transition: 0.5s;
 filter: blur(30px);
}

.box:hover:before,
.box:hover:after {
 transform: skewX(0deg) scaleX(1.3);
}

.box:before,
.box:after {
 background: linear-gradient(315deg, #ffbc00, #ff0058)
}

.box span {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 5;
 pointer-events: none;
}

.box span::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 0;
 border-radius: 8px;
 background: rgba(255, 255, 255, 0.1);
 backdrop-filter: blur(10px);
 opacity: 0;
 transition: 0.1s;
 animation: animate 2s ease-in-out infinite;
 box-shadow: 0 5px 15px rgba(0,0,0,0.08)
}

.box span::before {
 top: -40px;
 left: 40px;
 width: 50px;
 height: 50px;
 opacity: 1;
}

.box span::after {
 content: '';
 position: absolute;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 100%;
 border-radius: 8px;
 background: rgba(255, 255, 255, 0.1);
 backdrop-filter: blur(10px);
 opacity: 0;
 transition: 0.5s;
 box-shadow: 0 5px 15px rgba(0,0,0,0.08);
 animation-delay: -1s;
}

.box span:after {
 bottom: -40px;
 right: 40px;
 width: 50px;
 height: 50px;
 opacity: 1;
}

.box .content {
 position: relative;
 width: 190px;
 height: 254px;
 padding: 20px 40px;
 background: rgba(255, 255, 255, 0.05);
 backdrop-filter: blur(10px);
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 border-radius: 8px;
 z-index: 1;
 transform: 0.5s;
 color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
}

.box .content h2 {
 font-size: 20px;
 color: #fff;
 margin-bottom: 10px;
}
</style>


================================================
FILE: Cards/Codewithvinay_orange-earwig-38.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by Codewithvinay - Tags: neumorphism, card */
.card {
 width: 190px;
 height: 254px;
 border-radius: 50px;
 background: #e0e0e0;
 box-shadow: 20px 20px 60px #bebebe,
               -20px -20px 60px #ffffff;
}
</style>


================================================
FILE: Cards/Cornerstone-04_moody-treefrog-55.html
================================================
<div class="cards">
    <figure class="card">
        <figcaption class="card_title">3D Hover</figcaption>
    </figure>
</div>
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: card */
.cards {
  perspective: 500px;
}

.card {
  width: 200px;
  height: 250px;
  background: #16161d;
  border: 2px solid #555555;
  border-radius: 4px;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .5s;
}

.card:hover {
  transform: translateZ(10px) rotateX(20deg) rotateY(20deg);
}

.card_title {
  color: #fff;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  transition: transform .5s;
  font: 700 1.5rem monospace;
  text-shadow: -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

.card:hover .card_title {
  transform: translateZ(50px);
}
</style>


================================================
FILE: Cards/Cornerstone-04_perfect-rattlesnake-29.html
================================================
<div class="card">Hover me</div>
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: card */
.card {
  width: 160px;
  height: 200px;
  background: #ffffff;
  transform: rotate(20deg) skew(-10deg, -5deg);
  transition: .4s linear;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 200px;
}

.card:hover {
  box-shadow: rgba(0,0,0,0.5) 5px 3px,
  rgba(0,0,0,0.4) 10px 6px,
  rgba(0,0,0,0.3) 15px 9px;
  background: #000;
  color: #fff;
  font-size: 1.5rem;
}
</style>


================================================
FILE: Cards/Creatlydev_dull-moose-30.html
================================================
<article class="card">
  <section class="card__hero">
    <header class="card__hero-header">
      <span>$150/hr</span>
      <div class="card__icon">
        <svg
          height="20"
          width="20"
          stroke="currentColor"
          stroke-width="1.5"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"
            stroke-linejoin="round"
            stroke-linecap="round"
          ></path>
        </svg>
      </div>
    </header>

    <p class="card__job-title">Senior Backend Engineer</p>
  </section>

  <footer class="card__footer">
    <div class="card__job-summary">
      <div class="card__job-icon">
        <svg
          height="35"
          width="28"
          viewBox="0 0 250 250"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill="#4285F4"
            d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
          ></path>
          <path
            fill="#34A853"
            d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
          ></path>
          <path
            fill="#FBBC05"
            d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
          ></path>
          <path
            fill="#EB4335"
            d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
          ></path>
        </svg>
      </div>
      <div class="card__job">
        <p class="card__job-title">
          Senior Backend <br />
          Engineer
        </p>
      </div>
    </div>

    <button class="card__btn">view</button>
  </footer>
</article>

<style>
/* From Uiverse.io by Creatlydev  - Tags: card */
.card {
  margin: auto;
  width: min(300px, 100%);
  background-color: #fefefe;
  border-radius: 1rem;
  padding: 0.5rem;
  color: #141417;
}
.card__hero {
  background-color: #fef4e2;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 1.5rem;
  font-size: 0.875rem;
}
.card__hero .card__job-title {
  margin: 2rem 0;
  font-size: 2rem;
  font-weight: 600;
  padding-right: 2rem;
}
.card__hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  font-weight: 700;
}
.card__footer {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 0.75rem;
  row-gap: 1rem;
  font-weight: 700;
  font-size: 0.875rem;
}
@media (min-width: 340px) {
  .card__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
}
.card__job-summary {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.75rem;
}
.card__btn {
  width: 100%;
  font-weight: 400;
  display: block;
  text-align: center;
  padding: 0.5rem 1.25rem;
  border-radius: 1rem;
  background-color: #141417;
  color: #fff;
  font-size: 1rem;
}
@media (min-width: 340px) {
  .card__btn {
    width: max-content;
  }
}

</style>
    

================================================
FILE: Cards/Creatlydev_friendly-fish-0.html
================================================
<div class="card">
  <div class="card__body">
    <div class="card__icon">
      <svg
        height="32"
        width="32"
        stroke="currentColor"
        stroke-width="1.5"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"
          stroke-linejoin="round"
          stroke-linecap="round"
        ></path>
      </svg>
    </div>

    <p class="card__title">Abstract Design</p>
    <p class="card__paragraph">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus
      perferendis eaque dolore repellat numquam. Dolores.
    </p>
  </div>

  <div class="card__ribbon">
    <label class="card__ribbon-label">01</label>
  </div>
</div>

<style>
/* From Uiverse.io by Creatlydev  - Tags: card */
.card {
  width: min(300px, 100%);
  margin: auto;
  background-color: #f4f5f2;
  text-align: center;
  border-top-left-radius: 4rem;
  border: 2px solid #fff;
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  height: 30px;
  width: 120px;
  background-color: #393e7f;
  top: 32px;
  right: -2.5px;
  -webkit-clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

.card__body {
  padding: 2rem 1.5rem;
  max-width: 25ch;
  margin: auto;
}

.card__title {
  font-weight: 800;
  color: #121513;
  font-size: 1.25rem;
  margin-block: 1.5rem 0.75rem;
}

.card__paragraph {
  color: #303830;
  font-size: 0.875rem;
}

.card__ribbon {
  margin-top: 1.5rem;
  display: grid;
  place-items: center;
  height: 50px;
  background-color: #393e7f;
  position: relative;
  width: 110%;
  left: -5%;
  top: 10px;
  position: relative;
  border-radius: 0 0 2rem 2rem;
}

.card__ribbon::after,
.card__ribbon::before {
  content: "";
  position: absolute;
  width: 20px;
  aspect-ratio: 1/1;
  bottom: 100%;
  z-index: -2;
  background-color: #191c39;
}

.card__ribbon::before {
  left: 0;
  transform-origin: left bottom;
  transform: rotate(45deg);
}

.card__ribbon::after {
  right: 0;
  transform-origin: right bottom;
  transform: rotate(-45deg);
}

.card__ribbon-label {
  display: block;
  width: 84px;
  aspect-ratio: 1/1;
  background-color: #fff;
  position: relative;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 8px solid #393e7f;
  display: grid;
  place-items: center;
  font-weight: 900;
  line-height: 1;
  font-size: 1.5rem;
}

.card__ribbon-label::before,
.card__ribbon-label::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  bottom: 50%;
}

.card__ribbon-label::before {
  right: calc(100% + 4px);
  border-bottom-right-radius: 20px;
  box-shadow: 5px 5px 0 #393e7f;
}

.card__ribbon-label::after {
  left: calc(100% + 4px);
  border-bottom-left-radius: 20px;
  box-shadow: -5px 5px 0 #393e7f;
}

</style>
    

================================================
FILE: Cards/Cybercom682_empty-wolverine-58.html
================================================
<!-- From Uiverse.io by Cybercom682  - Tags: alert, card, hover, modern -->
<div class="space-y-2 p-4">
  <div
    role="alert"
    class="bg-green-100 dark:bg-green-900 border-l-4 border-green-500 dark:border-green-700 text-green-900 dark:text-green-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-green-200 dark:hover:bg-green-800 transform hover:scale-105"
  >
    <svg
      stroke="currentColor"
      viewBox="0 0 24 24"
      fill="none"
      class="h-5 w-5 flex-shrink-0 mr-2 text-green-600"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
    <p class="text-xs font-semibold">Success - Everything went smoothly!</p>
  </div>

  <div
    role="alert"
    class="bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 dark:border-blue-700 text-blue-900 dark:text-blue-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-blue-200 dark:hover:bg-blue-800 transform hover:scale-105"
  >
    <svg
      stroke="currentColor"
      viewBox="0 0 24 24"
      fill="none"
      class="h-5 w-5 flex-shrink-0 mr-2 text-blue-600"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
    <p class="text-xs font-semibold">
      Info - This is some information for you.
    </p>
  </div>

  <div
    role="alert"
    class="bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-500 dark:border-yellow-700 text-yellow-900 dark:text-yellow-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-yellow-200 dark:hover:bg-yellow-800 transform hover:scale-105"
  >
    <svg
      stroke="currentColor"
      viewBox="0 0 24 24"
      fill="none"
      class="h-5 w-5 flex-shrink-0 mr-2 text-yellow-600"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
    <p class="text-xs font-semibold">
      Warning - Be careful with this next step.
    </p>
  </div>

  <div
    role="alert"
    class="bg-red-100 dark:bg-red-900 border-l-4 border-red-500 dark:border-red-700 text-red-900 dark:text-red-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-red-200 dark:hover:bg-red-800 transform hover:scale-105"
  >
    <svg
      stroke="currentColor"
      viewBox="0 0 24 24"
      fill="none"
      class="h-5 w-5 flex-shrink-0 mr-2 text-red-600"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
    <p class="text-xs font-semibold">Error - Something went wrong.</p>
  </div>
</div>


    

================================================
FILE: Cards/Cybercom682_modern-fish-50.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by Cybercom682  - Tags: card, space, galaxy, contest */
.card {
  background-color: #1a1a1a;
  position: relative;
  color: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 300px;
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);
  transition: all 0.1s ease-out;
}
.card:hover {
  box-shadow: 4px 4px 6px 0px rgba(82, 20, 137, 0.059);
  transform: scale(1.02);
  transition: all 0.1s ease-in;
}
.card:hover::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0%;
  background-image: radial-gradient(#ffffff2b 2%, transparent 0%),
    radial-gradient(#ffffff17 1%, transparent 0%);
  background-size: 100px 100px;
  background-position: 0 0, 50px 50px;
  animation: stars 8s ease-in-out infinite;
}

.image {
  width: 100%;
  max-width: 190px;
  display: block;
  margin: auto;
  border-radius: 10px;
}

.card:hover .image {
  animation: hoverman 8s ease-in-out infinite;
}

.heading {
  font-size: 19px;
  font-weight: bold;
  margin-top: 15px;
  text-transform: uppercase;
}

.icons {
  margin-top: 15px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.icons a {
  display: inline-block;
  margin-right: 10px;
}

.icons a:last-child {
  margin-right: 0;
}

.card svg {
  width: 24px;
  height: 24px;
}

.instagram path,
.twitter path,
.discord path {
  stroke: #fff;
}

.instagram:hover path,
.twitter:hover path,
.discord:hover path {
  stroke: #55acee;
}

@keyframes hoverman {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes stars {
  0% {
    background-position: 0 0, 50px 50px;
    opacity: 0;
  }
  50% {
    background-position: 30px 10px, 50px 50px;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

</style>
    

================================================
FILE: Cards/Cybercom682_ordinary-duck-36.html
================================================
<!-- From Uiverse.io by Cybercom682  - Tags: alert, progress, card, dark, info -->
<div
  class="max-w-sm mx-auto bg-white dark:bg-zinc-800 shadow-md rounded-lg overflow-hidden"
>
  <div class="px-5 py-3 flex justify-between items-center">
    <h3 class="text-zinc-900 dark:text-white text-lg">Progress</h3>
    <svg
      stroke-width="2"
      stroke="currentColor"
      viewBox="0 0 24 24"
      fill="none"
      class="h-6 w-6 text-zinc-900 dark:text-white"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
  </div>
  <div class="px-5 pb-5">
    <p class="mb-2 text-sm text-zinc-600 dark:text-zinc-400">
      File: var/test/admin.php extracted..
    </p>
    <div class="w-full bg-zinc-200 dark:bg-zinc-700 rounded-full h-2.5">
      <div style="width: 70%" class="bg-blue-600 h-2.5 rounded-full"></div>
    </div>
    <div class="flex justify-between items-center mt-3">
      <span class="text-sm text-zinc-600 dark:text-zinc-400">70% Complete</span>
      <button class="text-xs text-blue-600 hover:underline">Details</button>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/Cybercom682_witty-goose-35.html
================================================
<!-- From Uiverse.io by Cybercom682  - Tags: card, input, chat, bot, chatbot -->
<div
  class="max-w-md mx-auto bg-white dark:bg-zinc-800 shadow-md rounded-lg overflow-hidden"
>
  <div class="flex flex-col h-[400px]">
    <div class="px-4 py-3 border-b dark:border-zinc-700">
      <div class="flex justify-between items-center">
        <h2 class="text-lg font-semibold text-zinc-800 dark:text-white">
          Chatbot Assistant
        </h2>
        <div class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">
          Online
        </div>
      </div>
    </div>
    <div
      class="flex-1 p-3 overflow-y-auto flex flex-col space-y-2"
      id="chatDisplay"
    >
      <div
        class="chat-message self-end bg-blue-500 text-white max-w-xs rounded-lg px-3 py-1.5 text-sm"
      >
        Hello! How can I assist you today?
      </div>
      <div
        class="chat-message self-start bg-zinc-500 text-white max-w-xs rounded-lg px-3 py-1.5 text-sm"
      >
        Hello! I need a Chatbot!
      </div>
    </div>
    <div class="px-3 py-2 border-t dark:border-zinc-700">
      <div class="flex gap-2">
        <input
          placeholder="Type your message..."
          class="flex-1 p-2 border rounded-lg dark:bg-zinc-700 dark:text-white dark:border-zinc-600 text-sm"
          id="chatInput"
          type="text"
        />
        <button
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1.5 px-3 rounded-lg transition duration-300 ease-in-out text-sm"
          id="sendButton"
        >
          Send
        </button>
      </div>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/Dalyn-Liu_polite-deer-52.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by Dalyn-Liu - Tags: challenge, copy, border, box-shadow */
.one-div {
  width: 50px;
  height: 50px;
  background: #1abc9c;
  border-radius: 30% 70% 63% 37% / 30% 30% 70% 70%;
  margin-right: 15px;
  animation: logo 1.2s infinite alternate;
  box-shadow: 0 0 10px #1abc9c;
}

@keyframes logo {
  100% {
    transform: scale(1.2);
    border-radius: 67% 33% 37% 63% / 29% 60% 40% 71%;
  }
}
</style>


================================================
FILE: Cards/Daniel1227k_moody-newt-4.html
================================================
<div class="card">
  <b></b>
  <div class="content">
    <p class="title">Some Fomous<br><span>Creative Designer</span></p>
    <ul class="sci">
      <li>
        <a href="#">
          <svg class="fa-brands fa-facebook" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg>
        </a>
      </li>

      <li>
        <a href="#">
          <svg class="fa-brands fa-twitter" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
        </a>
      </li>

      <li>
        <a href="#">
          <svg class="fa-brands fa-linkedin-in" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg>
        </a>
      </li>

      <li>
        <a href="#">
          <svg class="fa-brands fa-instagram" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>
        </a>
      </li>
    </ul>
  </div>
</div>
<style>
/* From Uiverse.io by Daniel1227k - Tags: gradient, card */
.card {
  position: relative;
  width: 190px;
  height: 254px;
  background: #f00;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(315deg,#03a9f4,#ff0058);
}

.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(315deg,#03a9f4,#ff0058);
  filter: blur(30px);
}

.card b {
  position: absolute;
  inset: 6px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.card img {
  position: absolute;
  z-index: 3;
  scale: 0.8;
  opacity: 0.25;
  transition: 0.5s;
}

.card:hover img {
  scale: 0.5;
  opacity: 0.9;
  transform: translateY(-70px);
}

.card .content {
  position: absolute;
  z-index: 3;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0);
  transition: 0.5s;
}

.card:hover .content {
  transform: scale(1);
  bottom: 25px;
}

.content .title {
  position: relative;
  color: #fff;
  font-weight: 500;
  line-height: 1em;
  font-size: 1em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.content .title span {
  font-weight: 300;
  font-size: 0.70em;
}

.content .sci {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.sci li {
  list-style: none;
}

.sci li .fa-brands {
  width: 14px;
}

.sci li .fa-facebook {
  width: 10px;
}

.sci li a {
  position: relative;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.2);
  fill: currentColor;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: 0.5s;
}

.sci li a:hover {
  fill: currentColor;
  color: rgba(255, 255, 255, 1);
}

</style>


================================================
FILE: Cards/Darlley_unlucky-mouse-37.html
================================================
<!-- From Uiverse.io by Darlley - Tags: animation, card, tailwind -->
<div class="relative h-full w-full flex items-center justify-center">
  <div class="profileCard_container relative p-10 border-2 border-dashed rounded-full border-spacing-4 border-gray-400/50">
    <button class="profile_item left-[45px] -top-[4px] absolute rounded-full bg-cover cursor-pointer border border-gray-400/50 p-[2px] active:scale-95 hover:scale-95 transition-all duration-500">
      <span class="block w-[40px] h-[40px] transition-all duration-500 rounded-full z-[2] bg-white p-1">
        <svg viewBox="0 0 128 128">
          <g fill="#61DAFB"><circle r="11.4" cy="64" cx="64"></circle><path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zM92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zM81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zM64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zM64 30.2c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zM31.7 35c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zM7 64c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zM96.3 93c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"></path></g>
        </svg>
      </span>
    </button>

    <button class="profile_item right-[45px] -top-[4px] absolute rounded-full bg-cover cursor-pointer border border-gray-400/50 p-[2px] active:scale-95 hover:scale-95 transition-all duration-500">
      <span class="block w-[40px] h-[40px] transition-all duration-500 rounded-full z-[2] bg-white p-1">
        <svg viewBox="0 0 48 48" y="0px" x="0px" xmlns="http://www.w3.org/2000/svg">
          <path d="M24,9.604c-6.4,0-10.4,3.199-12,9.597c2.4-3.199,5.2-4.398,8.4-3.599 c1.826,0.456,3.131,1.781,4.576,3.247C27.328,21.236,30.051,24,36,24c6.4,0,10.4-3.199,12-9.598c-2.4,3.199-5.2,4.399-8.4,3.6 c-1.825-0.456-3.13-1.781-4.575-3.247C32.672,12.367,29.948,9.604,24,9.604L24,9.604z M12,24c-6.4,0-10.4,3.199-12,9.598 c2.4-3.199,5.2-4.399,8.4-3.599c1.825,0.457,3.13,1.781,4.575,3.246c2.353,2.388,5.077,5.152,11.025,5.152 c6.4,0,10.4-3.199,12-9.598c-2.4,3.199-5.2,4.399-8.4,3.599c-1.826-0.456-3.131-1.781-4.576-3.246C20.672,26.764,17.949,24,12,24 L12,24z" fill="#00acc1"></path>
        </svg>
      </span>
    </button>

    <button class="profile_item -left-4 top-20 absolute rounded-full bg-cover cursor-pointer border border-gray-400/50 p-[2px] active:scale-95 hover:scale-95 transition-all duration-500">
      <span class="block w-[40px] h-[40px] transition-all duration-500 rounded-full z-[2] bg-white p-1">
        <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><path d="M45.5 129c11.9 0 21.5-9.6 21.5-21.5V86H45.5C33.6 86 24 95.6 24 107.5S33.6 129 45.5 129zm0 0" fill="#0acf83"></path><path d="M24 64.5C24 52.6 33.6 43 45.5 43H67v43H45.5C33.6 86 24 76.4 24 64.5zm0 0" fill="#a259ff"></path><path d="M24 21.5C24 9.6 33.6 0 45.5 0H67v43H45.5C33.6 43 24 33.4 24 21.5zm0 0" fill="#f24e1e"></path><path d="M67 0h21.5C100.4 0 110 9.6 110 21.5S100.4 43 88.5 43H67zm0 0" fill="#ff7262"></path><path d="M110 64.5c0 11.9-9.6 21.5-21.5 21.5S67 76.4 67 64.5 76.6 43 88.5 43 110 52.6 110 64.5zm0 0" fill="#1abcfe"></path></svg>
      </span>
    </button>

    <button class="profile_item -right-4 top-20 absolute rounded-full bg-cover cursor-pointer border border-gray-400/50 p-[2px] active:scale-95 hover:scale-95 transition-all duration-500">
      <span class="block w-[40px] h-[40px] transition-all duration-500 rounded-full z-[2] bg-white p-1">
        <svg viewBox="0 0 48 48" y="0px" x="0px" xmlns="http://www.w3.org/2000/svg">
          <linearGradient gradientUnits="userSpaceOnUse" y2="40.968" y1="4.776" x2="35.821" x1="10.608" id="ezltMdBuodGDdUF~YSi~Aa_v9uZbuVoWleB_gr1"><stop stop-color="#0d61a9" offset="0"></stop><stop stop-color="#16528c" offset="1"></stop></linearGradient><path d="M24,4C12.97,4,4,12.976,4,24s8.97,20,19.999,20C35.03,44,44,35.024,44,24S35.03,4,24,4z" fill="url(#ezltMdBuodGDdUF~YSi~Aa_v9uZbuVoWleB_gr1)"></path><path opacity=".05" d="M24,43.001C13.521,43.001,4.995,34.477,4.995,24c0-10.476,8.525-18.999,19.004-18.999	c10.48,0,19.006,8.523,19.006,18.999C43.005,34.477,34.479,43.001,24,43.001z M20.778,38.651C21.83,38.883,22.912,39,24.001,39	c1.344,0,2.682-0.181,3.984-0.539l-3.676-10.072L20.778,38.651z M9.416,20.488C9.14,21.632,9.001,22.808,9.001,24	c0,4.864,2.259,9.284,6.111,12.093L9.416,20.488z M38.753,21.289c-0.211,0.895-0.507,1.818-0.893,2.783l-3.829,11.082	C37.169,32.322,39,28.265,39,24C39,23.088,38.917,22.182,38.753,21.289z M20.025,30.673l2.442-7.328l-2.265-6.308	c-0.613-0.051-1.086-0.112-1.086-0.112c-0.854-0.053-1.5-0.783-1.47-1.694c0.03-0.921,0.735-1.616,1.641-1.616l0.222,0.014	c1.825,0.125,3.188,0.188,4.051,0.188c1.606,0,4.162-0.195,4.188-0.197c0.001,0,0.002,0,0.003,0c1.006,0,1.715,0.637,1.77,1.549	c0.045,0.76-0.455,1.633-1.473,1.757c-0.078,0.009-0.294,0.034-0.596,0.062l4.483,13.401l0.693-2.308	c0.786-2.016,1.177-3.647,1.177-4.888c0-1.386-0.644-2.439-1.211-3.368c-0.117-0.191-0.228-0.373-0.327-0.546l-0.197-0.318	c-0.778-1.26-1.511-2.449-1.511-3.931c0-1.329,0.831-2.61,2.067-3.307C30.121,9.961,27.091,9,24.001,9	c-4.183,0-8.113,1.719-10.948,4.751c1.342-0.057,2.676-0.159,2.693-0.16l0.134-0.005c0.882,0,1.588,0.668,1.641,1.554	c0.045,0.76-0.457,1.634-1.478,1.757c-0.068,0.008-0.285,0.033-0.592,0.062L20.025,30.673z"></path><path opacity=".07" d="M24,42.501C13.796,42.501,5.495,34.202,5.495,24c0-10.2,8.301-18.499,18.504-18.499	C34.203,5.501,42.505,13.8,42.505,24C42.505,34.202,34.204,42.501,24,42.501z M20.126,39.009c1.258,0.326,2.559,0.491,3.875,0.491	c1.571,0,3.128-0.238,4.637-0.709l-4.343-11.898L20.126,39.009z M9.365,18.892C8.791,20.532,8.501,22.245,8.501,24	c0,5.553,2.88,10.554,7.599,13.339L9.365,18.892z M38.622,18.85c-0.106,1.604-0.502,3.227-1.225,5.036l-4.404,12.743	C37.039,33.739,39.5,29.021,39.5,24C39.5,22.245,39.2,20.5,38.622,18.85z M20.026,32.253l2.971-8.915l-2.433-6.775	c-0.747-0.052-1.384-0.134-1.384-0.134c-0.606-0.039-1.055-0.537-1.034-1.182c0.021-0.646,0.512-1.132,1.141-1.132	c0.119,0.005,2.741,0.202,4.272,0.202c1.636,0,4.2-0.196,4.226-0.198c0.003,0,0.005,0,0.008,0c0.714,0,1.191,0.455,1.229,1.081	c0.033,0.545-0.312,1.143-1.034,1.23c-0.028,0.003-0.539,0.064-1.211,0.114l5.185,15.498l1.146-3.816	c0.8-2.048,1.198-3.728,1.198-5.032c0-1.527-0.712-2.693-1.285-3.629c-0.114-0.187-0.223-0.364-0.32-0.534l-0.205-0.332	c-0.739-1.197-1.437-2.328-1.437-3.669c0-1.431,1.13-2.757,2.557-3.191C30.893,9.678,27.52,8.5,24.001,8.5	c-4.695,0-9.141,2.146-12.074,5.785c1.621-0.024,3.834-0.194,3.858-0.196l0.094-0.003c0.624,0,1.104,0.456,1.142,1.083	c0.033,0.546-0.313,1.144-1.039,1.231c-0.027,0.003-0.535,0.064-1.208,0.114L20.026,32.253z"></path><path d="M23.999,6.001c-9.93,0-18.004,8.075-18.004,17.999S14.072,42.001,24,42.001	c9.929,0,18.005-8.077,18.005-18.001S33.929,6.001,23.999,6.001z M8.001,24c0-2.324,0.497-4.521,1.384-6.512L17.019,38.4	C11.681,35.806,8.001,30.336,8.001,24z M24.001,40c-1.57,0-3.084-0.226-4.52-0.652l4.8-13.952l4.918,13.477	c0.033,0.077,0.078,0.149,0.118,0.22C27.65,39.676,25.862,40,24.001,40z M26.095,16.085c0.962-0.047,1.832-0.152,1.832-0.152	c0.861-0.104,0.757-1.373-0.104-1.316c0,0-2.589,0.2-4.264,0.2c-1.569,0-4.217-0.2-4.217-0.2c-0.86-0.059-0.96,1.26-0.098,1.316	c0,0,0.818,0.106,1.679,0.152l2.603,7.248l-3.5,10.501l-5.931-17.778c0.964-0.047,1.828-0.152,1.828-0.152	c0.866-0.104,0.761-1.373-0.099-1.316c0,0-2.595,0.2-4.264,0.2c-0.304,0-0.383,0.035-0.611-0.039C13.848,10.666,18.612,8,24.001,8	c4.167,0,7.96,1.584,10.804,4.198c-0.071-0.002-0.135-0.008-0.206-0.008c-1.57,0-3.041,1.375-3.041,2.84	c0,1.315,0.763,2.423,1.576,3.752c0.607,1.062,1.67,2.435,1.67,4.412c0,1.375-0.405,3.095-1.219,5.175l-1.599,5.326L26.095,16.085z M32.047,37.835L36.932,23.7c0.913-2.286,1.219-4.109,1.219-5.737c0-0.586-0.037-1.135-0.108-1.645C39.289,18.604,40,21.219,40,24	C40,29.902,36.805,35.063,32.047,37.835z" fill="#fff"></path>
        </svg>
      </span>
    </button>

    <button class="profile_item bottom-8 -left-0 absolute rounded-full bg-cover cursor-pointer border border-gray-400/50 p-[2px] active:scale-95 hover:scale-95 transition-all duration-500">
      <span class="block w-[40px] h-[40px] transition-all duration-500 rounded-full z-[2] bg-white p-1">
        <svg preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-4 0 264 264">
          <g>
            <path fill="#FF2D20" d="M255.855641,59.619717 C255.950565,59.9710596 256,60.3333149 256,60.6972536 L256,117.265345 C256,118.743206 255.209409,120.108149 253.927418,120.843385 L206.448786,148.178786 L206.448786,202.359798 C206.448786,203.834322 205.665123,205.195421 204.386515,205.937838 L105.27893,262.990563 C105.05208,263.119455 104.804608,263.201946 104.557135,263.289593 C104.464333,263.320527 104.376687,263.377239 104.278729,263.403017 C103.585929,263.58546 102.857701,263.58546 102.164901,263.403017 C102.051476,263.372083 101.948363,263.310215 101.840093,263.26897 C101.613244,263.186479 101.376082,263.1143 101.159544,262.990563 L2.07258227,205.937838 C0.7913718,205.201819 0,203.837372 0,202.359798 L0,32.6555248 C0,32.2843161 0.0515567729,31.9234187 0.144358964,31.5728326 C0.175293028,31.454252 0.24747251,31.3459828 0.288717928,31.2274022 C0.366053087,31.0108638 0.438232569,30.7891697 0.55165747,30.5880982 C0.628992629,30.4540506 0.742417529,30.3457814 0.83521972,30.2220451 C0.953800298,30.0570635 1.06206952,29.8869261 1.20127281,29.7425672 C1.31985339,29.6239866 1.4745237,29.5363401 1.60857131,29.4332265 C1.75808595,29.3094903 1.89213356,29.1754427 2.06227091,29.0774848 L2.06742659,29.0774848 L51.6134853,0.551122364 C52.8901903,-0.183535768 54.4613221,-0.183535768 55.7380271,0.551122364 L105.284086,29.0774848 L105.294397,29.0774848 C105.459379,29.1805983 105.598582,29.3094903 105.748097,29.4280708 C105.882144,29.5311844 106.031659,29.6239866 106.15024,29.7374115 C106.294599,29.8869261 106.397712,30.0570635 106.521448,30.2220451 C106.609095,30.3457814 106.727676,30.4540506 106.799855,30.5880982 C106.918436,30.7943253 106.985459,31.0108638 107.06795,31.2274022 C107.109196,31.3459828 107.181375,31.454252 107.212309,31.5779883 C107.307234,31.9293308 107.355765,32.2915861 107.356668,32.6555248 L107.356668,138.651094 L148.643332,114.878266 L148.643332,60.6920979 C148.643332,60.3312005 148.694889,59.9651474 148.787691,59.619717 C148.823781,59.4959808 148.890804,59.3877116 148.93205,59.269131 C149.014541,59.0525925 149.08672,58.8308984 149.200145,58.629827 C149.27748,58.4957794 149.390905,58.3875102 149.478552,58.2637739 C149.602288,58.0987922 149.705401,57.9286549 149.84976,57.7842959 C149.968341,57.6657153 150.117856,57.5780688 150.251903,57.4749553 C150.406573,57.351219 150.540621,57.2171714 150.705603,57.1192136 L150.710758,57.1192136 L200.261973,28.5928511 C201.538395,27.8571345 203.110093,27.8571345 204.386515,28.5928511 L253.932573,57.1192136 C254.107866,57.2223271 254.241914,57.351219 254.396584,57.4697996 C254.525476,57.5729132 254.674991,57.6657153 254.793572,57.7791402 C254.93793,57.9286549 255.041044,58.0987922 255.16478,58.2637739 C255.257582,58.3875102 255.371007,58.4957794 255.443187,58.629827 C255.561767,58.8308984 255.628791,59.0525925 255.711282,59.269131 C255.757683,59.3877116 255.824707,59.4959808 255.855641,59.619717 Z M247.740605,114.878266 L247.740605,67.8378666 L230.402062,77.8192579 L206.448786,91.6106946 L206.448786,138.651094 L247.745761,114.878266 L247.740605,114.878266 Z M198.194546,199.97272 L198.194546,152.901386 L174.633101,166.357704 L107.351512,204.757188 L107.351512,252.27191 L198.194546,199.97272 Z M8.25939501,39.7961379 L8.25939501,199.97272 L99.0921175,252.266755 L99.0921175,204.762344 L51.6392637,177.906421 L51.6237967,177.89611 L51.603174,177.885798 C51.443348,177.792996 51.3093004,177.658949 51.1597857,177.545524 C51.0308938,177.44241 50.8813791,177.359919 50.7679542,177.246494 L50.7576429,177.231027 C50.6235953,177.102135 50.5307931,176.942309 50.4173682,176.79795 C50.3142546,176.658747 50.1905184,176.540167 50.1080276,176.395808 L50.1028719,176.380341 C50.0100697,176.22567 49.9533572,176.040066 49.8863334,175.864773 C49.8193096,175.710103 49.7316631,175.565744 49.6904177,175.400762 L49.6904177,175.395606 C49.6388609,175.19969 49.6285496,174.993463 49.6079269,174.792392 C49.5873041,174.637722 49.5460587,174.483051 49.5460587,174.328381 L49.5460587,174.31807 L49.5460587,63.5689658 L25.5979377,49.7723734 L8.25939501,39.8012935 L8.25939501,39.7961379 Z M53.6809119,8.89300821 L12.3994039,32.6555248 L53.6706006,56.4180414 L94.9469529,32.6503692 L53.6706006,8.89300821 L53.6809119,8.89300821 Z M75.1491521,157.19091 L99.0972731,143.404629 L99.0972731,39.7961379 L81.7587304,49.7775291 L57.8054537,63.5689658 L57.8054537,167.177457 L75.1491521,157.19091 Z M202.324244,36.934737 L161.047891,60.6972536 L202.324244,84.4597702 L243.59544,60.6920979 L202.324244,36.934737 Z M198.194546,91.6106946 L174.24127,77.8192579 L156.902727,67.8378666 L156.902727,114.878266 L180.850848,128.664547 L198.194546,138.651094 L198.194546,91.6106946 Z M103.216659,197.616575 L163.759778,163.052915 L194.023603,145.781396 L152.778185,122.034346 L105.289242,149.374903 L62.0073307,174.292291 L103.216659,197.616575 Z"></path>
          </g>
        </svg>
      </span>
    </button>

    <button class="profile_item bottom-8 -right-0 absolute rounded-full bg-cover cursor-pointer border border-gray-400/50 p-[2px] active:scale-95 hover:scale-95 transition-all duration-500">
      <span class="block w-[40px] h-[40px] transition-all duration-500 rounded-full z-[2] bg-white p-1">
        <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><path d="M2.001 90.458h4.108V74.235l6.36 14.143c.75 1.712 1.777 2.317 3.792 2.317s3.003-.605 3.753-2.317l6.36-14.143v16.223h4.108V74.262c0-1.58-.632-2.345-1.936-2.739-3.121-.974-5.215-.131-6.163 1.976l-6.241 13.958-6.043-13.959c-.909-2.106-3.042-2.949-6.163-1.976C2.632 71.917 2 72.681 2 74.261v16.197zm31.898-13.206h4.107v8.938c-.038.485.156 1.625 2.406 1.661 1.148.018 8.862 0 8.934 0V77.208h4.117c.019 0-.004 14.514-.004 14.574.022 3.58-4.441 4.357-6.499 4.417H33.988v-2.764c.022 0 12.963.003 12.995-.001 2.645-.279 2.332-1.593 2.331-2.035v-1.078h-8.731c-4.062-.037-6.65-1.81-6.683-3.85-.002-.187.089-9.129-.001-9.219z" fill="#00618A"></path><path d="M56.63 90.458h11.812c1.383 0 2.727-.289 3.793-.789 1.777-.816 2.646-1.922 2.646-3.372v-3.002c0-1.185-.987-2.292-2.923-3.028-1.027-.396-2.292-.605-3.517-.605h-4.978c-1.659 0-2.449-.5-2.646-1.606-.039-.132-.039-.237-.039-.369v-1.87c0-.105 0-.211.039-.342.197-.843.632-1.08 2.094-1.212l.395-.026h11.733v-2.738H63.504c-1.659 0-2.528.105-3.318.342-2.449.764-3.517 1.975-3.517 4.082v2.396c0 1.844 2.095 3.424 5.61 3.793.396.025.79.053 1.185.053h4.267c.158 0 .316 0 .435.025 1.304.105 1.856.343 2.252.816a.98.98 0 01.315.737v2.397c0 .289-.197.658-.592.974-.355.316-.948.527-1.738.58l-.435.026H56.63v2.738zm43.881-4.766c0 2.817 2.094 4.397 6.32 4.714.395.026.79.052 1.185.052h10.706V87.72h-10.784c-2.41 0-3.318-.606-3.318-2.055V71.497h-4.108v14.195zm-23.008.142v-9.765c0-2.48 1.742-3.985 5.186-4.46a7.8 7.8 0 011.108-.079h7.799c.396 0 .752.026 1.147.079 3.444.475 5.187 1.979 5.187 4.46v9.765c0 2.014-.74 3.09-2.445 3.792l4.048 3.653h-4.771l-3.274-2.956-3.296.209h-4.395a9.075 9.075 0 01-2.414-.343c-2.613-.712-3.88-2.085-3.88-4.355zm4.434-.237c0 .132.039.265.079.423.237 1.135 1.307 1.768 2.929 1.768h3.732l-3.428-3.095h4.771l2.989 2.7c.552-.295.914-.743 1.041-1.32.039-.132.039-.264.039-.396v-9.368c0-.105 0-.238-.039-.37-.238-1.056-1.307-1.662-2.89-1.662h-6.216c-1.82 0-3.008.792-3.008 2.032v9.288z" fill="#E48E00"></path><path d="M122.336 66.952c-2.525-.069-4.454.166-6.104.861-.469.198-1.216.203-1.292.79.257.271.297.674.502 1.006.394.637 1.059 1.491 1.652 1.938.647.489 1.315 1.013 2.011 1.437 1.235.754 2.615 1.184 3.806 1.938.701.446 1.397 1.006 2.082 1.509.339.247.565.634 1.006.789v-.071c-.231-.294-.291-.698-.503-1.006l-.934-.934c-.913-1.212-2.071-2.275-3.304-3.159-.982-.705-3.18-1.658-3.59-2.801l-.072-.071c.696-.079 1.512-.331 2.154-.503 1.08-.29 2.045-.215 3.16-.503l1.508-.432v-.286c-.563-.578-.966-1.344-1.58-1.867-1.607-1.369-3.363-2.737-5.17-3.879-1.002-.632-2.241-1.043-3.304-1.579-.356-.181-.984-.274-1.221-.575-.559-.711-.862-1.612-1.293-2.441a93.068 93.068 0 01-2.585-5.458c-.544-1.245-.9-2.473-1.579-3.59-3.261-5.361-6.771-8.597-12.208-11.777-1.157-.677-2.55-.943-4.021-1.292l-2.37-.144c-.481-.201-.983-.791-1.436-1.077-1.802-1.138-6.422-3.613-7.756-.358-.842 2.054 1.26 4.058 2.011 5.099.527.73 1.203 1.548 1.58 2.369.248.54.29 1.081.503 1.652.521 1.406.976 2.937 1.651 4.236.341.658.718 1.351 1.149 1.939.264.36.718.52.789 1.077-.443.62-.469 1.584-.718 2.369-1.122 3.539-.699 7.938.934 10.557.501.805 1.681 2.529 3.303 1.867 1.419-.578 1.103-2.369 1.509-3.95.092-.357.035-.621.215-.861v.072l1.293 2.585c.957 1.541 2.654 3.15 4.093 4.237.746.563 1.334 1.538 2.298 1.867v-.073h-.071c-.188-.291-.479-.411-.719-.646-.562-.551-1.187-1.235-1.651-1.867-1.309-1.776-2.465-3.721-3.519-5.745-.503-.966-.94-2.032-1.364-3.016-.164-.379-.162-.953-.502-1.148-.466.72-1.149 1.303-1.509 2.154-.574 1.36-.648 3.019-.861 4.739l-.144.071c-1.001-.241-1.352-1.271-1.724-2.154-.94-2.233-1.115-5.83-.287-8.401.214-.666 1.181-2.761.789-3.376-.187-.613-.804-.967-1.148-1.437a11.222 11.222 0 01-1.149-2.011c-.77-1.741-1.129-3.696-1.938-5.457-.388-.842-1.042-1.693-1.58-2.441-.595-.83-1.262-1.44-1.724-2.442-.164-.356-.387-.927-.144-1.293.077-.247.188-.35.432-.431.416-.321 1.576.107 2.01.287 1.152.479 2.113.934 3.089 1.58.468.311.941.911 1.508 1.077h.646c1.011.232 2.144.071 3.088.358 1.67.508 3.166 1.297 4.524 2.155 4.139 2.614 7.522 6.334 9.838 10.772.372.715.534 1.396.861 2.154.662 1.528 1.496 3.101 2.154 4.596.657 1.491 1.298 2.996 2.227 4.237.488.652 2.374 1.002 3.231 1.364.601.254 1.585.519 2.154.861 1.087.656 2.141 1.437 3.16 2.155.509.362 2.076 1.149 2.154 1.798zM90.237 39.593a5.124 5.124 0 00-1.293.144v.071h.072c.251.517.694.849 1.005 1.293l.719 1.508.071-.071c.445-.313.648-.814.646-1.58-.179-.188-.205-.423-.359-.646-.204-.3-.602-.468-.861-.719z" fill="#00618A"></path></svg>
      </span>
    </button>

    <button class="profile_item right-[40%] -bottom-4 absolute rounded-full bg-cover cursor-pointer border border-gray-400/50 p-[2px] active:scale-95 hover:scale-95 transition-all duration-500">
      <span class="block w-[40px] h-[40px] transition-all duration-500 rounded-full z-[2] bg-white p-1">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 -30 150 150">
          <path fill="#F90" d="M122.714 62.703c5.28-.643 16.924-2.027 18.997.643 2.072 2.621-2.319 13.649-4.293 18.544-.592 1.484.691 2.077 2.023.94 8.684-7.319 10.954-22.6 9.178-24.825-1.777-2.175-17.023-4.055-26.3 2.473-1.431 1.038-1.184 2.423.395 2.225z"></path>
          <path fill="#F90" d="M74.852 89.456c20.28 0 43.865-6.38 60.099-18.396 2.664-1.978.345-4.994-2.369-3.758-18.207 7.714-37.993 11.473-56.003 11.473-26.694 0-52.5-7.368-73.42-19.533-1.827-1.088-3.208.791-1.679 2.176 19.343 17.505 44.951 28.038 73.372 28.038z"></path>
          <path fill="#252F3E" d="M42.632 32.835c0 1.83.197 3.313.542 4.401a26.505 26.505 0 001.58 3.56c.246.396.345.792.345 1.138 0 .495-.296.99-.938 1.484l-3.108 2.077c-.444.296-.889.445-1.283.445-.494 0-.987-.248-1.48-.693a15.29 15.29 0 01-1.777-2.324 38.28 38.28 0 01-1.53-2.918c-3.848 4.55-8.684 6.825-14.506 6.825-4.145 0-7.45-1.187-9.868-3.56-2.418-2.374-3.652-5.54-3.652-9.495 0-4.204 1.48-7.616 4.49-10.187 3.01-2.572 7.007-3.857 12.09-3.857 1.677 0 3.404.148 5.23.395 1.825.248 3.7.643 5.674 1.088v-3.61c0-3.758-.79-6.379-2.32-7.912-1.578-1.533-4.243-2.274-8.042-2.274-1.727 0-3.503.197-5.329.642a39.247 39.247 0 00-5.329 1.682 14.14 14.14 0 01-1.727.643c-.345.098-.592.148-.79.148-.69 0-1.036-.494-1.036-1.533V6.577c0-.791.1-1.385.346-1.73.246-.347.69-.693 1.381-1.04 1.727-.89 3.8-1.631 6.217-2.225C20.23.94 22.797.642 25.51.642c5.872 0 10.164 1.336 12.927 4.006 2.714 2.67 4.096 6.726 4.096 12.165v16.022h.099zm-20.033 7.517c1.628 0 3.306-.297 5.082-.89 1.776-.594 3.355-1.682 4.687-3.165.79-.94 1.382-1.978 1.678-3.165.296-1.187.493-2.621.493-4.302v-2.077a41.135 41.135 0 00-4.539-.84 37.099 37.099 0 00-4.638-.298c-3.306 0-5.724.643-7.352 1.978-1.628 1.336-2.418 3.215-2.418 5.687 0 2.324.592 4.055 1.826 5.242 1.184 1.236 2.911 1.83 5.18 1.83zm39.621 5.34c-.888 0-1.48-.148-1.875-.494-.394-.297-.74-.99-1.036-1.929L47.714 5.044c-.296-.99-.444-1.632-.444-1.978 0-.791.394-1.236 1.184-1.236h4.835c.938 0 1.58.148 1.925.494.395.297.69.99.987 1.929l8.29 32.736 7.697-32.736c.246-.99.542-1.632.937-1.929.395-.297 1.085-.494 1.974-.494h3.947c.938 0 1.579.148 1.974.494.395.297.74.99.937 1.929l7.796 33.132L98.29 4.253c.295-.99.64-1.632.986-1.929.395-.297 1.036-.494 1.925-.494h4.588c.79 0 1.234.395 1.234 1.236 0 .247-.049.494-.099.791a7.041 7.041 0 01-.345 1.236L94.688 43.32c-.297.989-.642 1.631-1.037 1.928-.394.297-1.036.495-1.875.495h-4.243c-.938 0-1.58-.149-1.974-.495-.394-.346-.74-.989-.937-1.978l-7.648-31.895-7.599 31.846c-.247.989-.543 1.632-.938 1.978-.394.346-1.085.494-1.973.494H62.22zm63.405 1.336c-2.566 0-5.132-.297-7.599-.89-2.467-.594-4.391-1.237-5.674-1.979-.79-.445-1.332-.94-1.53-1.384a3.503 3.503 0 01-.296-1.385v-2.522c0-1.038.395-1.533 1.135-1.533.296 0 .592.05.888.148.296.1.74.297 1.234.495a26.791 26.791 0 005.428 1.73c1.973.396 3.898.594 5.871.594 3.109 0 5.527-.544 7.204-1.632 1.678-1.088 2.566-2.67 2.566-4.698 0-1.384-.444-2.521-1.332-3.461-.888-.94-2.566-1.78-4.984-2.571l-7.154-2.226c-3.602-1.137-6.267-2.818-7.895-5.044-1.628-2.176-2.467-4.599-2.467-7.17 0-2.077.444-3.907 1.332-5.489.888-1.582 2.072-2.967 3.553-4.055 1.48-1.137 3.157-1.978 5.131-2.571 1.974-.594 4.046-.841 6.217-.841 1.086 0 2.221.05 3.306.198 1.135.148 2.171.346 3.207.544.987.247 1.925.494 2.813.79.888.298 1.579.594 2.072.891.691.396 1.185.791 1.481 1.236.296.396.444.94.444 1.632V8.16c0 1.039-.395 1.583-1.135 1.583-.395 0-1.036-.198-1.875-.594-2.813-1.285-5.971-1.928-9.474-1.928-2.812 0-5.033.445-6.562 1.384-1.53.94-2.319 2.374-2.319 4.402 0 1.384.493 2.57 1.48 3.51s2.812 1.88 5.427 2.72l7.007 2.226c3.553 1.137 6.118 2.72 7.648 4.747 1.53 2.027 2.27 4.351 2.27 6.923 0 2.126-.444 4.055-1.283 5.736-.888 1.681-2.072 3.165-3.602 4.352-1.53 1.236-3.355 2.126-5.477 2.769-2.22.692-4.54 1.039-7.056 1.039z"></path>
        </svg>
      </span>
    </button>

    <button class="profile_item w-[200px] h-[200px] p-1 border-2 rounded-full hover:border-gray-400/50 cursor-pointer transition-all duration-500 z-0">
      <div class="w-full bg-white h-full flex items-center justify-center p-2 rounded-full active:scale-95 hover:scale-95 object-cover transition-all duration-500">
        <span class="w-20 h-20 inline-block">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.99296258,10.5729355 C12.478244,10.5729355 14.4929626,8.55821687 14.4929626,6.0729355 C14.4929626,3.58765413 12.478244,1.5729355 9.99296258,1.5729355 C7.5076812,1.5729355 5.49296258,3.58765413 5.49296258,6.0729355 C5.49296258,8.55821687 7.5076812,10.5729355 9.99296258,10.5729355 Z M10,0 C13.3137085,0 16,2.6862915 16,6 C16,8.20431134 14.8113051,10.1309881 13.0399615,11.173984 C16.7275333,12.2833441 19.4976819,15.3924771 19.9947005,19.2523727 C20.0418583,19.6186047 19.7690435,19.9519836 19.3853517,19.9969955 C19.0016598,20.0420074 18.6523872,19.7816071 18.6052294,19.4153751 C18.0656064,15.2246108 14.4363723,12.0699838 10.034634,12.0699838 C5.6099956,12.0699838 1.93381693,15.231487 1.39476476,19.4154211 C1.34758036,19.7816499 0.998288773,20.0420271 0.614600177,19.9969899 C0.230911582,19.9519526 -0.0418789616,19.6185555 0.00530544566,19.2523267 C0.500630192,15.4077896 3.28612316,12.3043229 6.97954305,11.1838052 C5.19718955,10.1447285 4,8.21217353 4,6 C4,2.6862915 6.6862915,0 10,0 Z" fill="#555"></path>
          </svg>
        </span>
      </div>
    </button>
  </div>
</div>





================================================
FILE: Cards/DeepanshuKant_moody-fireant-5.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by DeepanshuKant - Tags: card */
.card {
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  max-width: 400px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  user-select: none;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.card>button {
  padding: 10px;
  background-color: #1c1f2b;
  color: #fff;
  outline: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
}

.card>button:hover {
  transition: color 0.2s ease;
  color: #47b8ff;
}

.heading {
  background-color: #1c1f2b;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.heading span {
  color: #47b8ff;
  font-weight: normal;
}

.content {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.item {
  align-items: center;
  display: flex;
  margin-bottom: 16px;
}

.item svg {
  fill: #47b8ff;
  margin-right: 12px;
}

.item span {
  color: #1c1f2b;
  font-size: 18px;
  font-weight: bold;
}

.item.item--create svg {
  fill: #5eba7d;
}

.item.item--create span {
  color: #5eba7d;
}

.item.item--post svg {
  fill: #f44336;
}

.item.item--post span {
  color: #f44336;
}

.item.item--inspire span {
  color: #fefefe;
}

</style>


================================================
FILE: Cards/DellBee_honest-pug-16.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by DellBee - Tags: card */
.card {
  border: 3px solid rgb(20, 228, 255);
  height: 250px;
  width: 300px;
  border-radius: 20px;
  color: white;
  opacity: 0.5;
  transition: all 0.2s;
}

.card:hover {
  opacity: 2;
  filter: drop-shadow( 0 0 10px rgb(20, 228, 255)) drop-shadow(0 0 60px rgb(20, 228, 255));
}

.card:hover ~ .heading {
  filter: drop-shadow( 0 0 10px rgb(248, 125, 146)) drop-shadow(0 0 60px rgb(248, 125, 146));
}

.card:hover ~ button {
  filter: drop-shadow( 0 0 10px rgb(248, 125, 146)) drop-shadow(0 0 60px rgb(248, 125, 146));
  box-shadow: inset 0 0 0 0 rgb(248, 125, 146);
}

.heading {
  color: rgb(248, 125, 146);
  display: flex;
  justify-content: center;
  font-weight: bolder;
  position: relative;
  top: 10px;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 20px;
}

.item {
  display: flex;
  margin-top: 20px;
  cursor: pointer;
}

.item svg {
  display: flex;
  position: relative;
  right: 5px;
}

.item:hover {
  color: rgb(248, 125, 146);
  filter: drop-shadow( 0 0 10px rgb(248, 125, 146)) drop-shadow(0 0 60px rgb(248, 125, 146));
}

.item:hover svg {
  right: 15px;
  transition: all 0.3s;
}

button {
  background-color: transparent;
  color: white;
  border: 2px solid rgb(248, 125, 146);
  position: relative;
  height: 30px;
  top: 50px;
  left: 50%;
  transform: translate(-50%);
  border-radius: 5px;
  transition: ease-out 0.3s;
}

button:hover {
  color: white;
  box-shadow: inset -110px 0 0 0 rgb(248, 125, 146);
  filter: drop-shadow( 0 0 10px rgb(248, 125, 146)) drop-shadow(0 0 60px rgb(248, 125, 146));
}

button:active {
  transform: scale(0.8) translate(-50%)
}




</style>


================================================
FILE: Cards/Dhananjoy43_pretty-earwig-32.html
================================================
<!-- From Uiverse.io by Dhananjoy43 - Tags: simple, login, blue, card, login form -->
<div class="card px-8 py-6 rounded-lg bg-gray-800 w-72">
  <h1 class="text-center font-bold text-3xl text-white">Login</h1>
  <form class="my-6">
    <input class="p-2 my-2 rounded w-[100%] focus:outline-blue-600" placeholder="Name" type="text">
    <input class="p-2 my-2 rounded w-[100%] focus:outline-blue-600" placeholder="Email" type="email">
    <input class="p-2 my-2 rounded w-[100%] focus:outline-blue-600" placeholder="Password" type="password">
    <button class="bg-blue-600 hover:bg-blue-500 text-white font-semibold p-2 mt-3 rounded w-[100%]">Login</button>
  </form>
</div>



================================================
FILE: Cards/EcheverriaJesus_curly-squid-96.html
================================================
<!-- From Uiverse.io by EcheverriaJesus  - Tags: simple, material design, white, card, tailwind -->
<div
  class="flex flex-col items-center bg-white w-72 h-auto pt-5 pb-7 border border-gray-200 rounded-lg space-y-8"
>
  <section class="flex flex-col text-center space-y-1">
    <h2 class="text-2xl font-bold tracking-tight text-gray-900">
      Title of your Card
    </h2>
    <p class="text-slate-500 text-sm">Subtitle on your Card</p>
  </section>
  <section class="space-y-2">
    <div class="flex gap-2">
      <svg
        fill="currentColor"
        viewBox="0 0 20 20"
        class="w-5 h-5 text-blue-500"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          clip-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
          fill-rule="evenodd"
        ></path>
      </svg>
      <span class="text-slate-500 text-sm">Name Product</span>
    </div>
    <div class="flex gap-2">
      <svg
        fill="currentColor"
        viewBox="0 0 20 20"
        class="w-5 h-5 text-blue-500"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          clip-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
          fill-rule="evenodd"
        ></path>
      </svg>
      <span class="text-slate-500 text-sm">Name Product</span>
    </div>
    <div class="flex gap-2">
      <svg
        fill="currentColor"
        viewBox="0 0 20 20"
        class="w-5 h-5 text-blue-500"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          clip-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
          fill-rule="evenodd"
        ></path>
      </svg>
      <span class="text-slate-500 text-sm">Name Product</span>
    </div>
  </section>
  <section class="flex w-full flex-col space-y-2 px-9">
    <button
      class="py-3 font-medium tracking-wide capitalize transition-colors duration-300 transform bg-gray-100 rounded-md hover:bg-gray-200 text-sm text-gray-600"
    >
      First Buttom
    </button>
    <button
      class="py-3 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-md hover:bg-blue-600"
    >
      Accept
    </button>
  </section>
</div>


    

================================================
FILE: Cards/EcheverriaJesus_fluffy-grasshopper-81.html
================================================
<!-- From Uiverse.io by EcheverriaJesus - Tags: card, product, card hover, tailwind -->
<div class="flex flex-col justify-center items-center w-auto h-auto gap-5 p-5 bg-gray-800 rounded-lg md:flex-row">
<div class="flex justify-center items-center w-28 h-28 p-5 bg-gradient-to-r from-green-400 to-[#002Ff9] rounded-lg hover:-translate-y-10 duration-700 hover:scale-125">
 <svg class="logo-svg" viewBox="0 0 29.667 31.69" xmlns="http://www.w3.org/2000/svg" fill="white">
      <path transform="translate(0 0)" d="M12.827,1.628A1.561,1.561,0,0,1,14.31,0h2.964a1.561,1.561,0,0,1,1.483,1.628v11.9a9.252,9.252,0,0,1-2.432,6.852q-2.432,2.409-6.963,2.409T2.4,20.452Q0,18.094,0,13.669V1.628A1.561,1.561,0,0,1,1.483,0h2.98A1.561,1.561,0,0,1,5.947,1.628V13.191a5.635,5.635,0,0,0,.85,3.451,3.153,3.153,0,0,0,2.632,1.094,3.032,3.032,0,0,0,2.582-1.076,5.836,5.836,0,0,0,.816-3.486Z" data-name="Path 6" id="Path_6"></path>
      <path transform="translate(-45.91 0)" d="M75.207,20.857a1.561,1.561,0,0,1-1.483,1.628h-2.98a1.561,1.561,0,0,1-1.483-1.628V1.628A1.561,1.561,0,0,1,70.743,0h2.98a1.561,1.561,0,0,1,1.483,1.628Z" data-name="Path 7" id="Path_7"></path>
      <path transform="translate(0 -51.963)" d="M0,80.018A1.561,1.561,0,0,1,1.483,78.39h26.7a1.561,1.561,0,0,1,1.483,1.628v2.006a1.561,1.561,0,0,1-1.483,1.628H1.483A1.561,1.561,0,0,1,0,82.025Z" data-name="Path 8" id="Path_8"></path>
    </svg>
</div>
<div class="max-w-sm h-auto space-y-3">
  <div class="flex justify-center items-center sm:justify-between">
  <h2 class="text-white text-2xl font-bold tracking-widest">Jesus Echeverria</h2>
  <svg viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg" class="hidden sm:flex hover:scale-150 duration-300 fill-white cursor-pointer"><path d="M16 2v17.582l-4-3.512-4 3.512v-17.582h8zm2-2h-12v24l6-5.269 6 5.269v-24z"></path></svg>
  </div>
  <p class="text-sm text-gray-200">Description: product information for sale.</p>
  <div class="flex gap-6 items-center justify-center">
    <p class="text-white font-bold text-lg">$300.00</p>
    <p class="text-gray-300 font-semibold text-sm line-through">$320.00</p>
  </div>
  <div class="flex justify-around items-center my-2">
    <button class="px-2 bg-blue-600 p-1 rounded-md text-white font-semibold shadow-xl shadow-blue-500/50 hover:ring-2 ring-blue-400 hover:scale-75 duration-500">Buy Now</button>
    <button class="px-2 border-2 border-white p-1 rounded-md text-white font-semibold shadow-lg shadow-white hover:scale-75 duration-500">Add to Cart</button>
  </div>
</div>
</div>



================================================
FILE: Cards/EcheverriaJesus_rare-goat-94.html
================================================
<!-- From Uiverse.io by EcheverriaJesus - Tags: simple, gradient, card, hover, tailwind, card tailwind -->
<div class="flex items-center p-3 w-72 h-28 bg-white rounded-md shadow-lg">
  <section class="flex justify-center items-center w-14 h-14 rounded-full shadow-md bg-gradient-to-r from-[#F9C97C] to-[#A2E9C1] hover:from-[#C9A9E9] hover:to-[#7EE7FC] hover:cursor-pointer hover:scale-110 duration-300">
    <svg viewBox="0 0 15 15" class="w-7 fill-gray-700">
      <path d="M7.5 0.875C5.49797 0.875 3.875 2.49797 3.875 4.5C3.875 6.15288 4.98124 7.54738 6.49373 7.98351C5.2997 8.12901 4.27557 8.55134 3.50407 9.31167C2.52216 10.2794 2.02502 11.72 2.02502 13.5999C2.02502 13.8623 2.23769 14.0749 2.50002 14.0749C2.76236 14.0749 2.97502 13.8623 2.97502 13.5999C2.97502 11.8799 3.42786 10.7206 4.17091 9.9883C4.91536 9.25463 6.02674 8.87499 7.49995 8.87499C8.97317 8.87499 10.0846 9.25463 10.8291 9.98831C11.5721 10.7206 12.025 11.8799 12.025 13.5999C12.025 13.8623 12.2376 14.0749 12.5 14.0749C12.7623 14.075 12.975 13.8623 12.975 13.6C12.975 11.72 12.4778 10.2794 11.4959 9.31166C10.7244 8.55135 9.70025 8.12903 8.50625 7.98352C10.0187 7.5474 11.125 6.15289 11.125 4.5C11.125 2.49797 9.50203 0.875 7.5 0.875ZM4.825 4.5C4.825 3.02264 6.02264 1.825 7.5 1.825C8.97736 1.825 10.175 3.02264 10.175 4.5C10.175 5.97736 8.97736 7.175 7.5 7.175C6.02264 7.175 4.825 5.97736 4.825 4.5Z">
      </path>
    </svg>
  </section>

  <section class="block border-l border-gray-300 m-3">
    <div class="pl-3">
      <h3 class="text-gray-600 font-semibold text-sm">Jesus Echeverria</h3>
      <h3 class="bg-clip-text text-transparent bg-gradient-to-l from-[#005BC4] to-[#27272A] text-lg font-bold">Web
        Developer</h3>
    </div>
    <div class="flex gap-3 pt-2 pl-3">
      <svg stroke="currentColor" viewBox="0 0 24 24" class="w-4 hover:scale-125 duration-200 hover:cursor-pointer fill-white stroke-2">
        <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22">
        </path>
      </svg>
      <svg stroke="currentColor" viewBox="0 0 24 24" class="w-4 hover:scale-125 duration-200 hover:cursor-pointer fill-white stroke-2">
        <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z">
        </path>
        <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
      </svg>
      <svg stroke="currentColor" viewBox="0 0 24 24" class="w-4 hover:scale-125 duration-200 hover:cursor-pointer fill-white stroke-2">
        <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z">
        </path>
      </svg>
      <svg stroke="currentColor" viewBox="0 0 24 24" class="w-4 hover:scale-125 duration-200 hover:cursor-pointer fill-white stroke-2">
        <path d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7"></path>
      </svg>
    </div>
  </section>
</div>



================================================
FILE: Cards/EcheverriaJesus_stale-yak-33.html
================================================
<!-- From Uiverse.io by EcheverriaJesus - Tags: card, product, tailwind -->
<div class="flex flex-col bg-white w-72 h-48 rounded-md py-4 px-6 border">
  <h3 class="text-center font-bold text-xl text-gray-800 pb-2">$300.00</h3>
  <h3 class="text-base font-semibold text-gray-900">Product Name</h3>
  <p class="text-sm text-gray-500 pb-3">Product Description</p>
  <div class="flex gap-2 text-sm text-gray-500 border-b pb-2">
      <p class="">last update:</p>
      <p>14/08/2023</p>
  </div>
  <div class="flex justify-around items-center py-3">
      <div class="flex gap-2 text-gray-600 hover:scale-110 duration-200 hover:cursor-pointer">
          <svg class="w-6 stroke-green-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
          </svg>
          <button class="font-semibold text-sm text-green-700">Edit</button>
      </div>
      <div class="flex gap-2 text-gray-600 hover:scale-110 duration-200 hover:cursor-pointer">
        <svg class="w-6 stroke-red-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
        <button class="font-semibold text-sm text-red-700">Delete</button>
      </div>
  </div>
</div>



================================================
FILE: Cards/EcheverriaJesus_tame-panther-22.html
================================================
<!-- From Uiverse.io by EcheverriaJesus - Tags: card, box, card hover -->
<div class="m-12 bg-gray-700 max-w-[300px] rounded-xl hover:bg-gray-900 hover:scale-110 duration-700 p-5">
  <figure class="w-10 h-10 p-2 bg-blue-800 rounded-md">
    <svg width="24" height="24" fill="#FFFFFF">
      <path d="M18.799 7.038c-.496-.535-.799-1.252-.799-2.038 0-1.656 1.344-3 3-3s3 1.344 3 3-1.344 3-3 3c-.146 0-.29-.01-.431-.031l-3.333 6.032c.475.53.764 1.231.764 1.999 0 1.656-1.344 3-3 3s-3-1.344-3-3c0-.583.167-1.127.455-1.587l-2.565-3.547c-.281.087-.58.134-.89.134l-.368-.022-3.355 6.069c.451.525.723 1.208.723 1.953 0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3c.186 0 .367.017.543.049l3.298-5.967c-.52-.539-.841-1.273-.841-2.082 0-1.656 1.344-3 3-3s3 1.344 3 3c0 .617-.187 1.191-.507 1.669l2.527 3.495c.307-.106.637-.164.98-.164.164 0 .325.013.482.039l3.317-6.001zm-3.799 7.962c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1zm-6-8c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1z"></path>
    </svg>
  </figure>
  <h4 class="py-2 text-white font-bold">Jesus Echeverria</h4>
  <p class="text-base leading-7 text-white font-semibold space-y-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  <p class="text-sm leading-7 text-slate-300 space-y-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro est numquam ipsa consequatur provident fugiat quaerat cupiditate temporibus cum?</p>
  <div class="pt-5 pb-2 flex justify-center">
    <button class="w-36 h-10 font-semibold rounded-md bg-indigo-100 hover:scale-90 duration-500">Button</button>
  </div>
</div>




================================================
FILE: Cards/Eclairant69_purple-frog-76.html
================================================
<div class="card">
  <img
    class="image"
    alt=""
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a class="instagram" href="https://www.instagram.com/uiverse.io/">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 25"
        height="25"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
        ></path>
      </svg>
    </a>
    <a class="x" href="https://twitter.com/uiverse_io">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
        ></path>
      </svg>
    </a>
    <a class="discord" href="https://discord.gg/KD8ba2uUpT">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 25 25"
        height="25"
        width="25"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by Eclairant69  - Tags: simple, material design, green, card */
.card {
  background-color: #6ed371;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  transition: transform 0.3s ease-in-out;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  text-align: center;
}

h2 {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10px;
  transition: color 0.3s ease-in-out;
}

p {
  font-size: 16px;
  color: #fff;
  margin-bottom: 20px;
  transition: color 0.3s ease-in-out;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  transition: transform 0.3s ease-in-out;
}

li {
  margin: 0 10px;
  transition: transform 0.3s ease-in-out;
}

a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

a:hover {
  color: #ccc;
}

.fab {
  font-size: 24px;
  transition: transform 0.3s ease-in-out;
}

.fab:hover {
  transform: rotate(360deg);
}

.cta-button {
  background-color: #fff;
  color: #181a18;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

</style>
    

================================================
FILE: Cards/EddyBel_stale-mule-90.html
================================================
<div class="card">
  <div class="card__view">
    <div class="card__view__data">
      <p class="card__view__preview">Preview</p>
      <p class="card__play__icon">
        <svg width="8px" height="8px" viewBox="-0.5 0 7 7" version="1.1">
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Dribbble-Light-Preview" transform="translate(-347.000000, -3766.000000)" fill="#000000">
              <g id="icons" transform="translate(56.000000, 160.000000)">
                <path fill="#EAECEE" d="M296.494737,3608.57322 L292.500752,3606.14219 C291.83208,3605.73542 291,3606.25002 291,3607.06891 L291,3611.93095 C291,3612.7509 291.83208,3613.26444 292.500752,3612.85767 L296.494737,3610.42771 C297.168421,3610.01774 297.168421,3608.98319 296.494737,3608.57322" id="play-[#1003]"></path>
              </g>
            </g>
          </g>
        </svg>
      </p>
      <p class="card__lenght">10:19</p>
    </div>
  </div>
  <div class="card__content">
    <p class="channel__video__name">The Backwards Brain Bicycle - Smarter Every Day 133" by Destin Sandlin</p>
    <div class="channel__data">
      <div class="channel__img"></div>
      <div class="channel__data__text">
        <p class="channel__name">SmarterEveryDay</p>
        <div class="channel__subdata">
          <p class="channel__views">519.7K Views</p>
          <p class="channel__date">3 months ago</p>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by EddyBel - Tags: gradient, card, clean, video */
/* In this section you start by assigning a shape to the letter and an assigned size. */
.card {
  --rounded: 20px;
  --size: 270px;
  width: var(--size);
  height: calc(var(--size) - 10px);
  border-radius: var(--rounded);
  background: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* With the before property assigns the gradient that will be used as background for the chart. */
.card::before {
  --size: 100%;
  --blur: 20px;
  content: "";
  position: absolute;
  width: var(--size);
  height: var(--size);
  filter: blur(var(--blur));
  background-color: #faff99;
  background-image: radial-gradient(at 33% 82%, hsla(254,71%,69%,1) 0px, transparent 50%),
  radial-gradient(at 28% 4%, hsla(289,96%,63%,1) 0px, transparent 50%),
  radial-gradient(at 69% 49%, hsla(309,91%,71%,1) 0px, transparent 50%),
  radial-gradient(at 94% 14%, hsla(232,66%,62%,1) 0px, transparent 50%),
  radial-gradient(at 19% 93%, hsla(51,98%,74%,1) 0px, transparent 50%),
  radial-gradient(at 15% 80%, hsla(194,87%,63%,1) 0px, transparent 50%),
  radial-gradient(at 56% 52%, hsla(109,71%,61%,1) 0px, transparent 50%);
}

/* Cover the chart with a light white tone, this helps the gradient colors to be less aggressive. */
.card::after {
  --size: 100%;
  content: "";
  position: absolute;
  width: var(--size);
  height: var(--size);
  background: rgba(255, 255, 255, 0.5);
}

/* 
In this section you define where the video cover will be displayed.
Modify the background-image with the address of the cover to use. */
.card__view {
  position: absolute;
  height: 55%;
  left: 0;
  top: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  background-image: linear-gradient(to right bottom, #fff, #e2e2e2);
  background-repeat: no-repeat;
  background-size: cover;
}

/* When hovering over the element you can see the video preview. */
/* Place in the HTML an "iframe" tag with the address of the youtube video to show as preview. 
   The iframe tag must be a child of the div with the class "card__view".
   Also place a class with name "preview__video". */
.card:hover .preview__video {
  opacity: 100;
}

.preview__video {
  transition: opacity 300ms;
  opacity: 0;
}


/* In this section you define the size and position of the section that will contain the video content. */
.card__content {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 40%;
  left: 0;
  right: 0;
  bottom: 0;
  padding-left: 9px;
  padding-right: 9px;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.channel__video__name {
  font-size: 0.8em;
  margin-bottom: 10px;
  max-height: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  color: #000;
}

.channel__data {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  margin-bottom: 8px;
}

/* In this section you assign the image of the channel that owns the video, modify the parameter "background-image" by the address of the channel cover. */
.channel__img {
  --size-channel: 35px;
  --rounded: 50%;
  --duration: 300ms;
  min-width: var(--size-channel);
  min-height: var(--size-channel);
  border-radius: var(--rounded);
  transition: transform var(--duration);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #99cfff;
  background-image: radial-gradient(at 6% 14%, hsla(234,90%,72%,1) 0px, transparent 50%),
  radial-gradient(at 9% 73%, hsla(298,79%,64%,1) 0px, transparent 50%),
  radial-gradient(at 50% 38%, hsla(196,72%,75%,1) 0px, transparent 50%),
  radial-gradient(at 61% 82%, hsla(288,92%,79%,1) 0px, transparent 50%),
  radial-gradient(at 91% 67%, hsla(170,86%,66%,1) 0px, transparent 50%),
  radial-gradient(at 83% 29%, hsla(289,73%,63%,1) 0px, transparent 50%),
  radial-gradient(at 93% 34%, hsla(191,88%,75%,1) 0px, transparent 50%);
}

.channel__img:hover {
  transform: scale(1.08);
}

.channel__data__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.channel__subdata {
  display: flex;
  gap: 10px;
}

.channel__name {
  font-size: 0.8em;
  transition: color 400ms;
}

.channel__views, .channel__date {
  font-size: 0.6em;
}

.card__view__data {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px;
  box-sizing: border-box;
  pointer-events: none;
}

.card__lenght, .card__play__icon, .card__view__preview {
  background: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border-radius: 6px;
  font-size: 0.6em;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.7);
}

.card__play__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 30px;
}

.card__view__preview {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 900ms, transform 900ms;
}

.card:hover .card__view__preview {
  opacity: 100;
  transform: translateY(0px);
}

/* List of other colors you can use */
.card:nth-child(2n)::before {
  background-color: #ffd399;
  background-image: radial-gradient(at 15% 65%, hsla(249,84%,60%,1) 0px, transparent 50%),
 radial-gradient(at 38% 24%, hsla(197,80%,66%,1) 0px, transparent 50%),
 radial-gradient(at 65% 93%, hsla(228,83%,60%,1) 0px, transparent 50%),
 radial-gradient(at 16% 58%, hsla(314,83%,72%,1) 0px, transparent 50%),
 radial-gradient(at 77% 57%, hsla(298,90%,78%,1) 0px, transparent 50%),
 radial-gradient(at 76% 95%, hsla(178,64%,76%,1) 0px, transparent 50%),
 radial-gradient(at 15% 61%, hsla(248,75%,64%,1) 0px, transparent 50%);
}

.card:nth-child(3n)::before {
  background-color: #99b3ff;
  background-image: radial-gradient(at 93% 72%, hsla(293,71%,70%,1) 0px, transparent 50%),
  radial-gradient(at 28% 37%, hsla(252,81%,71%,1) 0px, transparent 50%),
  radial-gradient(at 25% 59%, hsla(158,67%,62%,1) 0px, transparent 50%),
  radial-gradient(at 48% 16%, hsla(197,69%,63%,1) 0px, transparent 50%),
  radial-gradient(at 70% 56%, hsla(171,69%,70%,1) 0px, transparent 50%),
  radial-gradient(at 7% 33%, hsla(65,65%,79%,1) 0px, transparent 50%),
  radial-gradient(at 89% 22%, hsla(286,64%,72%,1) 0px, transparent 50%);
}

.card:nth-child(4n)::before {
  background-color: #e2ff99;
  background-image: radial-gradient(at 22% 80%, hsla(265,77%,67%,1) 0px, transparent 50%),
  radial-gradient(at 91% 77%, hsla(292,60%,78%,1) 0px, transparent 50%),
  radial-gradient(at 66% 7%, hsla(46,95%,76%,1) 0px, transparent 50%),
  radial-gradient(at 16% 32%, hsla(275,90%,75%,1) 0px, transparent 50%),
  radial-gradient(at 26% 23%, hsla(283,60%,69%,1) 0px, transparent 50%),
  radial-gradient(at 2% 64%, hsla(208,62%,62%,1) 0px, transparent 50%),
  radial-gradient(at 62% 77%, hsla(112,88%,75%,1) 0px, transparent 50%);
}

.card:nth-child(5n)::before {
  background-color: #99d1ff;
  background-image: radial-gradient(at 21% 94%, hsla(270,95%,76%,1) 0px, transparent 50%),
  radial-gradient(at 56% 5%, hsla(252,65%,79%,1) 0px, transparent 50%),
  radial-gradient(at 67% 94%, hsla(194,81%,67%,1) 0px, transparent 50%),
  radial-gradient(at 15% 72%, hsla(304,97%,77%,1) 0px, transparent 50%),
  radial-gradient(at 63% 56%, hsla(38,98%,63%,1) 0px, transparent 50%),
  radial-gradient(at 41% 67%, hsla(321,61%,77%,1) 0px, transparent 50%),
  radial-gradient(at 68% 68%, hsla(263,67%,69%,1) 0px, transparent 50%);
}
</style>


================================================
FILE: Cards/ElSombrero2_fresh-wombat-97.html
================================================
<div id="card" class="card">
  <div class="content">
    <span>HOVER ME</span>
  </div>
</div>
<style>
/* From Uiverse.io by ElSombrero2 - Tags: card */
.card {
  width: 190px;
  height: 254px;
  background: #171717;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 3px 1px #00000088;
  cursor: pointer;
}

.card .content {
  border-radius: 5px;
  background: #171717;
  width: 186px;
  height: 250px;
  z-index: 1;
  padding: 20px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content::before {
  opacity: 0;
  transition: opacity 300ms;
  content: ' ';
  display: block;
  background: white;
  width: 50px;
  height: 50px;
  position: absolute;
  filter: blur(50px);
}

.card:hover .content::before {
  opacity: 1;
}

.card::before {
  opacity: 0;
  content: ' ';
  position: absolute;
  display: block;
  width: 120px;
  height: 360px;
  background: linear-gradient(90deg, transparent, #ff2288, #387EF0, transparent);
  transition: opacity 300ms;
  animation: rotation_9018 3000ms infinite linear;
  animation-play-state: paused;
}

.card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

.card::after {
  position: absolute;
  content: ' ';
  display: block;
  width: 190px;
  height: 254px;
  background: #17171733;
  backdrop-filter: blur(50px);
}

@keyframes rotation_9018 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: Cards/ElSombrero2_orange-newt-83.html
================================================
<div class="card">
  <div class="content">
    <svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
    <g>
      <path style="fill:#D33D3D;" d="M170.207,358.652H49.942c-19.975,0-36.169,16.798-36.169,37.519v6.254
        c0,20.721,16.194,37.519,36.169,37.519l198.511,14.958L170.207,358.652z"></path>
      <path style="fill:#D33D3D;" d="M462.058,358.652H342.483l-74.863,89.721l194.438-8.429c19.975,0,36.169-16.798,36.169-37.519
        v-6.254C498.226,375.45,482.032,358.652,462.058,358.652z"></path>
    </g>
    <g>
      <path style="fill:#EFAC52;" d="M435.773,231.163h55.511c10.278-1.948,23.917-11.214,17.415-48.429
        C487.824,84.147,395.409,9.839,284.57,9.839h-57.14c-110.504,0-202.699,73.852-223.946,171.989c0,0-9.843,49.334,27.244,49.334
        h378.629"></path>
      <path style="fill:#EFAC52;" d="M512,450.035v-4.588c0-3.04-2.464-5.503-5.503-5.503H277.226c-1.631,0-3.18,0.724-4.224,1.978
        l-17.355,20.798l-17.049-20.766c-1.045-1.272-2.605-2.01-4.252-2.01H5.503c-3.04,0-5.503,2.463-5.503,5.503v4.658
        c0.003,0.178,0.013,0.365,0.024,0.499l0.023,0.428l-0.02,0.372c-0.015,0.187-0.024,0.374-0.028,0.63v11.408
        c0.003,0.181,0.013,0.368,0.024,0.492l0.023,0.438l-0.02,0.368c-0.015,0.187-0.024,0.376-0.028,0.63v13.913
        c0,12.615,9.895,22.877,22.058,22.877h467.886c12.161,0,22.056-10.263,22.056-22.877v-13.982c-0.002-0.185-0.013-0.37-0.023-0.514
        l-0.024-0.415l0.021-0.376c0.014-0.187,0.024-0.374,0.026-0.625v-11.406c-0.002-0.187-0.013-0.372-0.023-0.51l-0.024-0.424
        l0.022-0.381C511.987,450.467,511.998,450.282,512,450.035z"></path>
    </g>
    <g>
      <path style="fill:#E95353;" d="M84.182,394.634c4.558,0,8.255-3.695,8.255-8.255v-27.727h-16.51v27.727
        C75.927,390.939,79.622,394.634,84.182,394.634z"></path>
      <path style="fill:#E95353;" d="M135.83,394.634c4.559,0,8.255-3.695,8.255-8.255v-27.727h-16.51v27.727
        C127.575,390.939,131.271,394.634,135.83,394.634z"></path>
      <path style="fill:#E95353;" d="M373.42,394.634c4.559,0,8.255-3.695,8.255-8.255v-27.727h-16.51v27.727
        C365.165,390.939,368.86,394.634,373.42,394.634z"></path>
      <path style="fill:#E95353;" d="M416.814,358.652v27.727c0,4.56,3.696,8.255,8.255,8.255c4.56,0,8.255-3.695,8.255-8.255v-27.727
        H416.814z"></path>
    </g>
    <g>
      <path style="fill:#7DC44E;" d="M92.552,294.842c-1.849,0-3.71-0.62-5.248-1.888l-35.298-29.116l-35.322,29.095
        c-3.519,2.898-8.722,2.395-11.62-1.125c-2.9-3.519-2.397-8.722,1.123-11.62l40.574-33.419c3.049-2.513,7.453-2.511,10.501,0.002
        l40.548,33.446c3.517,2.902,4.015,8.104,1.116,11.622C97.293,293.818,94.932,294.842,92.552,294.842z"></path>
      <path style="fill:#7DC44E;" d="M94.551,296.426c-1.863,0-3.728-0.63-5.251-1.888l-40.552-33.442
        c-3.518-2.9-4.016-8.102-1.117-11.62c2.902-3.519,8.104-4.017,11.622-1.118l35.303,29.116l35.318-29.095
        c3.519-2.898,8.722-2.395,11.622,1.123c2.898,3.519,2.395,8.722-1.125,11.622l-40.569,33.419
        C98.277,295.798,96.413,296.426,94.551,296.426z"></path>
      <path style="fill:#7DC44E;" d="M175.675,296.45c-1.863,0-3.728-0.63-5.251-1.888l-40.553-33.444
        c-3.519-2.9-4.017-8.102-1.118-11.62c2.902-3.519,8.104-4.017,11.622-1.118l35.303,29.114l35.318-29.093
        c3.518-2.898,8.722-2.397,11.62,1.123c2.899,3.519,2.397,8.722-1.123,11.622l-40.569,33.419
        C179.399,295.822,177.537,296.45,175.675,296.45z"></path>
      <path style="fill:#7DC44E;" d="M256.797,296.473c-1.862,0-3.727-0.63-5.251-1.888l-40.555-33.444
        c-3.517-2.9-4.017-8.102-1.116-11.62c2.9-3.519,8.102-4.017,11.62-1.118l35.305,29.116l35.32-29.097
        c3.519-2.898,8.722-2.397,11.622,1.123c2.898,3.519,2.395,8.722-1.124,11.622l-40.571,33.421
        C260.52,295.846,258.659,296.473,256.797,296.473z"></path>
      <path style="fill:#7DC44E;" d="M338.238,296.497c-1.863,0-3.728-0.63-5.251-1.888l-40.553-33.444
        c-3.519-2.9-4.017-8.102-1.118-11.62c2.902-3.519,8.104-4.017,11.622-1.118l35.303,29.114l35.318-29.095
        c3.519-2.898,8.722-2.397,11.621,1.123c2.899,3.519,2.396,8.722-1.123,11.622l-40.569,33.421
        C341.961,295.87,340.099,296.497,338.238,296.497z"></path>
      <path style="fill:#7DC44E;" d="M419.36,296.518c-1.863,0-3.728-0.63-5.251-1.888l-40.553-33.444
        c-3.519-2.9-4.017-8.102-1.118-11.62c2.901-3.519,8.104-4.017,11.622-1.118l35.303,29.116l35.325-29.097
        c3.519-2.898,8.722-2.397,11.62,1.123c2.9,3.519,2.397,8.722-1.123,11.622l-40.576,33.421
        C423.083,295.891,421.221,296.518,419.36,296.518z"></path>
      <path style="fill:#7DC44E;" d="M500.477,296.54c-1.851,0-3.71-0.62-5.25-1.888l-40.545-33.444c-3.517-2.9-4.016-8.104-1.116-11.622
        c2.901-3.517,8.104-4.015,11.622-1.116l40.546,33.444c3.517,2.902,4.016,8.104,1.116,11.622
        C505.218,295.516,502.856,296.54,500.477,296.54z"></path>
    </g>
    <path style="fill:#FCAF29;" d="M347.468,356.319c-0.905-1.935-2.849-3.171-4.985-3.171H170.207c-2.129,0-4.065,1.227-4.975,3.149
      c-0.909,1.924-0.628,4.2,0.722,5.846l85.441,104.068c1.04,1.268,2.591,2.005,4.231,2.012c0.008,0,0.015,0,0.022,0
      c1.631,0,3.18-0.724,4.227-1.978l86.835-104.068C348.078,360.537,348.374,358.254,347.468,356.319z"></path>
    <path style="opacity:0.15;fill:#202020;enable-background:new    ;" d="M22.564,181.828C43.807,83.691,136.003,9.839,246.507,9.839
      H227.43c-110.504,0-202.699,73.852-223.946,171.989c0,0-9.843,49.334,27.244,49.334h19.077
      C12.718,231.163,22.564,181.828,22.564,181.828z"></path>
    <g style="opacity:0.15;">
      <path style="fill:#202020;" d="M19.079,479.283V465.37c0.002-0.253,0.013-0.442,0.026-0.63l0.021-0.368l-0.023-0.438
        c-0.011-0.124-0.022-0.311-0.024-0.492v-11.408c0.002-0.255,0.013-0.442,0.026-0.63l0.021-0.372l-0.023-0.428
        c-0.011-0.133-0.022-0.32-0.024-0.499v-4.658c0-3.04,2.463-5.503,5.503-5.503H5.503c-3.04,0-5.503,2.463-5.503,5.503v4.658
        c0.003,0.178,0.013,0.365,0.024,0.499l0.023,0.428l-0.02,0.372c-0.015,0.187-0.024,0.374-0.028,0.63v11.408
        c0.003,0.181,0.013,0.368,0.024,0.492l0.023,0.438l-0.02,0.368c-0.015,0.187-0.024,0.376-0.028,0.63v13.913
        c0,12.615,9.895,22.877,22.058,22.877h19.077C28.974,502.161,19.079,491.898,19.079,479.283z"></path>
    </g>
    <g>
      <path style="opacity:0.15;fill:#202020;enable-background:new    ;" d="M32.85,402.424v-6.254
        c0-20.721,16.196-37.519,36.171-37.519H49.942c-19.975,0-36.169,16.798-36.169,37.519v6.254c0,20.721,16.194,37.519,36.169,37.519
        h19.079C49.046,439.944,32.85,423.145,32.85,402.424z"></path>
      <path style="opacity:0.15;fill:#202020;enable-background:new    ;" d="M185.031,362.143c-1.351-1.644-1.631-3.922-0.722-5.846
        c0.911-1.922,2.849-3.149,4.976-3.149h-19.079c-2.129,0-4.065,1.227-4.975,3.149c-0.909,1.924-0.628,4.2,0.722,5.846
        l85.441,104.068c1.04,1.268,2.591,2.005,4.231,2.012c0.008,0,0.015,0,0.022,0c1.631,0,3.18-0.724,4.227-1.978l5.355-6.419
        L185.031,362.143z"></path>
    </g>
    <path style="fill:#8C5549;" d="M498.226,346.545c0,7.294-5.913,13.208-13.208,13.208H26.982c-7.295,0-13.208-5.914-13.208-13.208
      v-20.662c0-7.294,5.913-13.208,13.208-13.208h458.037c7.295,0,13.208,5.914,13.208,13.208L498.226,346.545L498.226,346.545z"></path>
    <path style="opacity:0.15;fill:#202020;enable-background:new    ;" d="M32.85,345.444v-20.662c0-7.294,5.914-13.208,13.208-13.208
      H26.982c-7.295,0-13.208,5.914-13.208,13.208v20.66c0,7.294,5.913,13.208,13.208,13.208h19.077
      C38.764,358.652,32.85,352.739,32.85,345.444z"></path>
    </svg>
    <div class="description">
      <p class="title">
        <strong>Spicy Burger</strong>
      </p>
      <p class="info">
        30 Min | 165 Sell
      </p>
      <p class="price">
        2.50
      </p>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by ElSombrero2 - Tags: card */
.card {
  width: 190px;
  height: 254px;
  overflow: visible;
  cursor: pointer;
  position: relative;
}

.card::before, .content {
  border-radius: 5px;
  box-shadow: 0px 0px 5px 1px #00000022;
  transition: transform 300ms, box-shadow 200ms;
}

.card::before {
  position: absolute;
  content: ' ';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ee9933;
  transform: rotateZ(5deg);
}

.description {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.info {
  color: #00000066;
}

.price::before {
  content: '$';
}

.price {
  font-weight: bold;
  color: #ee9933;
}

.description p {
  margin-bottom: 10px;
}

.card .content {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotateZ(-5deg);
}

.content .img {
  width: 150px;
  height: fit-content;
}

.card:hover::before, .card:hover .content {
  transform: rotateZ(0deg);
}

.card:active::before, .card:active .content {
  box-shadow: none;
}
</style>


================================================
FILE: Cards/ElSombrero2_tricky-robin-67.html
================================================
<div class="card">
  <div class="content">
    <div class="back">
      <div class="back-content">
        <svg stroke="#ffffff" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" height="50px" width="50px" fill="#ffffff">

        <g stroke-width="0" id="SVGRepo_bgCarrier"></g>

        <g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g>

        <g id="SVGRepo_iconCarrier">

        <path d="M20.84375 0.03125C20.191406 0.0703125 19.652344 0.425781 19.21875 1.53125C18.988281 2.117188 18.5 3.558594 18.03125 4.9375C17.792969 5.636719 17.570313 6.273438 17.40625 6.75C17.390625 6.796875 17.414063 6.855469 17.40625 6.90625C17.398438 6.925781 17.351563 6.949219 17.34375 6.96875L17.25 7.25C18.566406 7.65625 19.539063 8.058594 19.625 8.09375C22.597656 9.21875 28.351563 11.847656 33.28125 16.78125C38.5 22 41.183594 28.265625 42.09375 30.71875C42.113281 30.761719 42.375 31.535156 42.75 32.84375C42.757813 32.839844 42.777344 32.847656 42.78125 32.84375C43.34375 32.664063 44.953125 32.09375 46.3125 31.625C47.109375 31.351563 47.808594 31.117188 48.15625 31C49.003906 30.714844 49.542969 30.292969 49.8125 29.6875C50.074219 29.109375 50.066406 28.429688 49.75 27.6875C49.605469 27.347656 49.441406 26.917969 49.25 26.4375C47.878906 23.007813 45.007813 15.882813 39.59375 10.46875C33.613281 4.484375 25.792969 1.210938 22.125 0.21875C21.648438 0.0898438 21.234375 0.0078125 20.84375 0.03125 Z M 16.46875 9.09375L0.0625 48.625C-0.09375 48.996094 -0.00390625 49.433594 0.28125 49.71875C0.472656 49.910156 0.738281 50 1 50C1.128906 50 1.253906 49.988281 1.375 49.9375L40.90625 33.59375C40.523438 32.242188 40.222656 31.449219 40.21875 31.4375C39.351563 29.089844 36.816406 23.128906 31.875 18.1875C27.035156 13.34375 21.167969 10.804688 18.875 9.9375C18.84375 9.925781 17.8125 9.5 16.46875 9.09375 Z M 17 16C19.761719 16 22 18.238281 22 21C22 23.761719 19.761719 26 17 26C15.140625 26 13.550781 24.972656 12.6875 23.46875L15.6875 16.1875C16.101563 16.074219 16.550781 16 17 16 Z M 31 22C32.65625 22 34 23.34375 34 25C34 25.917969 33.585938 26.730469 32.9375 27.28125L32.90625 27.28125C33.570313 27.996094 34 28.949219 34 30C34 32.210938 32.210938 34 30 34C27.789063 34 26 32.210938 26 30C26 28.359375 26.996094 26.960938 28.40625 26.34375L28.3125 26.3125C28.117188 25.917969 28 25.472656 28 25C28 23.34375 29.34375 22 31 22 Z M 21 32C23.210938 32 25 33.789063 25 36C25 36.855469 24.710938 37.660156 24.25 38.3125L20.3125 39.9375C18.429688 39.609375 17 37.976563 17 36C17 33.789063 18.789063 32 21 32 Z M 9 34C10.65625 34 12 35.34375 12 37C12 38.65625 10.65625 40 9 40C7.902344 40 6.960938 39.414063 6.4375 38.53125L8.25 34.09375C8.488281 34.03125 8.742188 34 9 34Z"></path>

        </g>

        </svg>
        <strong>Hover Me</strong>
      </div>
    </div>
    <div class="front">
      
      <div class="img">
        <div class="circle">
        </div>
        <div class="circle" id="right">
        </div>
        <div class="circle" id="bottom">
        </div>
      </div>

      <div class="front-content">
        <small class="badge">Pasta</small>
        <div class="description">
          <div class="title">
            <p class="title">
              <strong>Spaguetti Bolognese</strong>
            </p>
            <svg fill-rule="nonzero" height="15px" width="15px" viewBox="0,0,256,256" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g style="mix-blend-mode: normal" text-anchor="none" font-size="none" font-weight="none" font-family="none" stroke-dashoffset="0" stroke-dasharray="" stroke-miterlimit="10" stroke-linejoin="miter" stroke-linecap="butt" stroke-width="1" stroke="none" fill-rule="nonzero" fill="#20c997"><g transform="scale(8,8)"><path d="M25,27l-9,-6.75l-9,6.75v-23h18z"></path></g></g></svg>
          </div>
          <p class="card-footer">
            30 Mins &nbsp; | &nbsp; 1 Serving
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by ElSombrero2 - Tags: card, flip */
.card {
  overflow: visible;
  width: 190px;
  height: 254px;
}

.content {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 300ms;
  box-shadow: 0px 0px 10px 1px #000000ee;
  border-radius: 5px;
}

.front, .back {
  background-color: #151515;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 5px;
  overflow: hidden;
}

.back {
  width: 100%;
  height: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.back::before {
  position: absolute;
  content: ' ';
  display: block;
  width: 160px;
  height: 160%;
  background: linear-gradient(90deg, transparent, #ff9966, #ff9966, #ff9966, #ff9966, transparent);
  animation: rotation_481 5000ms infinite linear;
}

.back-content {
  position: absolute;
  width: 99%;
  height: 99%;
  background-color: #151515;
  border-radius: 5px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.card:hover .content {
  transform: rotateY(180deg);
}

@keyframes rotation_481 {
  0% {
    transform: rotateZ(0deg);
  }

  0% {
    transform: rotateZ(360deg);
  }
}

.front {
  transform: rotateY(180deg);
  color: white;
}

.front .front-content {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.front-content .badge {
  background-color: #00000055;
  padding: 2px 10px;
  border-radius: 10px;
  backdrop-filter: blur(2px);
  width: fit-content;
}

.description {
  box-shadow: 0px 0px 10px 5px #00000088;
  width: 100%;
  padding: 10px;
  background-color: #00000099;
  backdrop-filter: blur(5px);
  border-radius: 5px;
}

.title {
  font-size: 11px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
}

.title p {
  width: 50%;
}

.card-footer {
  color: #ffffff88;
  margin-top: 5px;
  font-size: 8px;
}

.front .img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #ffbb66;
  position: relative;
  filter: blur(15px);
  animation: floating 2600ms infinite linear;
}

#bottom {
  background-color: #ff8866;
  left: 50px;
  top: 0px;
  width: 150px;
  height: 150px;
  animation-delay: -800ms;
}

#right {
  background-color: #ff2233;
  left: 160px;
  top: -80px;
  width: 30px;
  height: 30px;
  animation-delay: -1800ms;
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0px);
  }
}
</style>


================================================
FILE: Cards/ElektroRaks_sour-otter-25.html
================================================
<div class="card">
     <div class="box">
          <div class="content">
               <span class="card-title">CSS Clip-Path </span>
          <div class="text">
               <strong>ELEKTRO RAKS</strong>
               <p>Custom card</p>
          </div>
          </div>
     </div>
</div>
<style>
/* From Uiverse.io by ElektroRaks - Tags: card, polygon, blur filter, text animation, rotate, clip-path */
.card {
  width: 11.875em;
  height: 15.875em;
  background: linear-gradient(135deg, #1afbf0, #da00ff);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.074);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(54% 27%, 100% 50%, 100% 100%, 51% 74%, 0 50%, 0% 0%);
  transition: 0.5s;
  line-height: 1.2;
}

.card-title {
  width: 100%;
  font-weight: bold;
  color: white;
  display: block;
  padding-top: 6.3em;
  font-size: 1.2em;
  transform: rotate(34deg);
  transition: 0.5s;
  margin-left: 25%;
}

.text {
  color: white;
  opacity: 0;
  transition: 0.5s;
}

.card:hover .content {
  clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
}

.card:hover .card-title {
  padding-top: 1em;
  margin-left: 0%;
  transform: rotate(0deg);
}

.card:hover .text {
  opacity: 1;
}
</style>


================================================
FILE: Cards/EmmaxPlay_curvy-stingray-36.html
================================================
<div class="card">
  <div class="tools">
    <div class="circle">
      <span class="red box"></span>
    </div>
    <div class="circle">
      <span class="yellow box"></span>
    </div>
    <div class="circle">
      <span class="green box"></span>
    </div>
  </div>
  <div class="card__content">
  </div>
</div>
<style>
/* From Uiverse.io by EmmaxPlay - Tags: card */
.card {
 width: 190px;
 height: 254px;
 margin: 0 auto;
 background-color: #011522;
 border-radius: 8px;
 z-index: 1;
}

.tools {
 display: flex;
 align-items: center;
 padding: 9px;
}

.circle {
 padding: 0 4px;
}

.box {
 display: inline-block;
 align-items: center;
 width: 10px;
 height: 10px;
 padding: 1px;
 border-radius: 50%;
}

.red {
 background-color: #ff605c;
}

.yellow {
 background-color: #ffbd44;
}

.green {
 background-color: #00ca4e;
}

</style>


================================================
FILE: Cards/EmmaxPlay_itchy-bobcat-50.html
================================================
<div class="card">
  <div class="tools">
    <div class="circle">
      <span class="red box"></span>
    </div>
    <div class="circle">
      <span class="yellow box"></span>
    </div>
    <div class="circle">
      <span class="green box"></span>
    </div>
  </div>
  <div class="card__content">
  </div>
</div>
<style>
/* From Uiverse.io by EmmaxPlay - Tags: card */
.card {
 width: 190px;
 height: 254px;
 margin: 0 auto;
 background-color: #F8FBFE;
 border-radius: 8px;
 z-index: 1;
}

.tools {
 display: flex;
 align-items: center;
 padding: 9px;
}

.circle {
 padding: 0 4px;
}

.box {
 display: inline-block;
 align-items: center;
 width: 10px;
 height: 10px;
 padding: 1px;
 border-radius: 50%;
}

.red {
 background-color: #ff605c;
}

.yellow {
 background-color: #ffbd44;
}

.green {
 background-color: #00ca4e;
}

</style>


================================================
FILE: Cards/EzzoHamdan_strong-earwig-64.html
================================================
<div class="card">
  <img
    class="image"
    alt=""
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a class="instagram" href="https://www.instagram.com/uiverse.io/">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 25"
        height="25"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
        ></path>
      </svg>
    </a>
    <a class="x" href="https://twitter.com/uiverse_io">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
        ></path>
      </svg>
    </a>
    <a class="discord" href="https://discord.gg/KD8ba2uUpT">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 25 25"
        height="25"
        width="25"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by EzzoHamdan  - Tags: animation, purple, social, gradient, card, space, glow, creative */
.card {
  position: relative;
  margin: 0 auto;
  height: fit-content;
  padding: 20px;
  background-image: linear-gradient(
    45deg,
    blueviolet,
    black,
    rgb(116, 214, 247)
  );
  background-color: #121212;
  border-radius: 10px;
  box-shadow: 5px -5px 25px rgb(116, 214, 247), -5px 5px 25px blueviolet;
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0px 5px 10px rgb(116, 214, 247), 0px -5px 10px blueviolet;
  transform: scale(1.05);
  background-size: 0 0;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.8) 0%,
    rgb(138, 43, 226) 15%,
    rgba(138, 79, 226, 0.75) 35%,
    rgba(138, 43, 226, 0.5) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  border-radius: 10px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.card:hover::before {
  opacity: 1;
  animation: space-animation 25s infinite alternate, sparkle 1.5s infinite;
}

@keyframes space-animation {
  0%,
  100% {
    background-position: -10%;
  }

  50% {
    background-position: 110%;
  }
}

@keyframes sparkle {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.image {
  width: 100%;
  max-width: 190px;
  display: block;
  margin: auto;
  margin-bottom: 20px;
  border-radius: 10px;
  transition: rotate 1s ease, scale 1s ease;
  rotate: -70deg;
  animation: float 10s ease infinite;
  scale: 1.4;
  z-index: -1;
}

.card:hover .image {
  rotate: 70deg;
  scale: 1.05;
}

.card:hover .image:hover {
  scale: 1.15;
}

@keyframes float {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-20px);
  }
}

.heading {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: #f0f0f0;
  transform: translateY(-30px);
  transition: all 0.3s ease;
}

.heading:hover {
  transform: translateY(-40px);
}

.card:hover .heading {
  color: rgb(116, 214, 247);
}

.icons {
  display: flex;
  justify-content: space-between;
}

.icons a {
  text-decoration: none;
  color: #f0f0f0;
  transition: transform 0.3s ease;
}

.card:hover a {
  color: rgb(116, 214, 247);
}

.icons .instagram:hover {
  color: #e4405f;
}

.instagram:hover {
  animation: wiggle 0.5s ease infinite;
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.icons .x:hover {
  color: #14171a;
}

.x:hover {
  animation: pulse 0.5s ease infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.icons .discord:hover {
  color: #7289da;
}

.discord:hover {
  animation: bounce 0.5s ease infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
  }
}

</style>
    

================================================
FILE: Cards/FWDJc_ordinary-mouse-22.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by FWDJc - Tags: card, challenge, div, dvd */
.one-div {
  width: 230px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  animation: bounce 5s infinite;
}

.one-div::before {
  content: 'DIV';
  position: absolute;
  display: block;
  left: 12%;
  bottom: 55%;
  color: green;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 6em;
  font-weight: 900;
  font-style: italic;
  animation: div-color-change 5s infinite;
}

.one-div::after {
  content: 'DIVISION';
  position: absolute;
  top: 27%;
  left: 18%;
  color: #212121;
  font-size: 1em;
  font-weight: 800;
  letter-spacing: 10px;
  z-index: 1;
}

@keyframes bounce {
  0% {
    background-color: red;
    transform: translateX(0) translateY(100px);
  }

  25% {
    background-color: blue;
    transform: translateX(100px) translateY(0);
  }

  55% {
    background-color: green;
    transform: translateX(0) translateY(-100px);
  }

  75% {
    background-color: yellow;
    transform: translateX(-100px) translateY(0);
  }

  100% {
    background-color: purple;
    transform: translateX(0) translateY(100px);
  }
}

@keyframes div-color-change {
  0% {
    color: red;
  }

  25% {
    color: blue;
  }

  55% {
    color: green;
  }

  75% {
    color: yellow;
  }

  100% {
    color: purple;
  }
}
</style>


================================================
FILE: Cards/FahadArnob52539_tender-swan-85.html
================================================
<!-- From Uiverse.io by FahadArnob52539  - Tags: card -->
<div class="h-[220px] w-[700px] bg-slate-200 flex rounded-xl">
  <div class="h-full w-[250px] p-7 text-white bg-[#261a6b] rounded-l-xl">
    <p class="text-[11px] tracking-widest text-[#cccc]">COURSE</p>
    <h1 class="text-[25px] pt-5 font-medium tracking-wide leading-[25px]">
      JavaScript Fundamentals
    </h1>
    <h4 class="text-[12px] pt-[50px] text-[#cccccc] cursor-pointer">
      view all chapters <i class="fa-solid fa-chevron-right"></i>
    </h4>
  </div>

  <div class="p-7 bg-white w-full rounded-r-xl relative">
    <div class="flex justify-between">
      <h1 class="text-[#949494] text-[13px] tracking-[.5px]">CHAPTER 4</h1>
      <div class="relative">
        <div class="h-1.5 w-[200px] bg-slate-200 rounded-xl">
          <div class="h-1.5 w-[120px] bg-[#261a6b] rounded-xl"></div>
        </div>
        <p class="text-[#a8a8a8] text-[12px] tracking-[.5px] absolute right-0">
          6/9 Chaqllenges
        </p>
      </div>
    </div>
    <h1 class="text-[28px] pt-2 font-[500] tracking-wide">
      Callbacks &amp; Closures
    </h1>
    <input
      type="button"
      value="Continue"
      class="h-10 w-[120px] bg-[#261a6be8] text-white rounded-3xl tracking-wide absolute right-10 bottom-7 cursor-pointer hover:bg-[#4938b6e8]"
    />
  </div>
</div>


    

================================================
FILE: Cards/Fatima-Zahrae-Acharki_calm-ape-12.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by Fatima-Zahrae-Acharki - Tags: card */
.card {
  height: 350px;
  width: 300px;
  overflow: hidden;
  border: solid none;
  border-radius: 20px;
  background-image: linear-gradient(to bottom right,darkblue, 180px,purple);
  filter: blur(0.4px);
  box-shadow: 10px 0px 1500px rgb(141, 88, 255);
  display: flex;
  align-items: center;
  flex-direction: column;
  transition: all 1s linear;
  animation: fly 6s linear;
}

.card::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 800px;
  top: 0;
  z-index: -1;
  /* background-image: linear-gradient(360deg, #7b84ff, #932eff, #ff78ed, #f7d9e9); */
  animation: rotate 5s linear infinite;
  transition: all 0.2s linear;
}

.card::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 10px;
  background-image: linear-gradient(to bottom right,#00076f, #44008b,180px,#9f45b0,#e54ed0,#ffe4f2);
}

.heading {
  margin-top: 20px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  height: 150px;
  width: auto;
  font-size: 20px;
  font-family: monospace;
  font-weight: bold;
  letter-spacing: 1px;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.item {
  border-radius: 6px;
  color: #ffffff;
  height: 100px;
  width: 100px;
  margin-top: 15px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.item--create:hover {
  transition: all 0.3s linear;
  transform: translateX(-10px);
  background-color: #e600ff;
}

.item--inspire:hover {
  transition: all 0.3s linear;
  transform: translateX(-10px);
  background-color: #44008b;
}

.item--post:hover {
  transition: all 0.3s linear;
  transform: translateX(10px);
  background-color: #ae04d1;
}

.item svg {
  fill: #ffffff;
  height: 26px;
  margin-bottom: 10px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item .item--create {
  border: 1px solid rgb(255, 255, 255);
}

.item--create svg {
  animation: spin 1s linear infinite;
}

.item--post svg {
  animation: flying 2s linear infinite;
}

.item--inspire svg {
  animation: flash 1s linear infinite;
}

@keyframes flash {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes flying {
  0% {
    transform: translateY(10px);
  }

  50% {
    transform: translateY(-2px);
  }

  100% {
    transform: translateY(2px);
  }
}

@keyframes spin {
  from {
  }

  to {
    transform: rotate(380deg);
  }
}

button {
  height: 50px;
  width: auto;
  background: transparent;
  border: 2px solid rgb(107, 19, 166);
  border-radius: 5px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 10px;
  margin-top: 55px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.5s ease;
  color: rgb(255, 255, 255);
  cursor: pointer;
  letter-spacing: 1px;
}

button:hover {
  filter: blur(1px);
  transform: scale(1.1);
  color: #2a0058;
}


</style>


================================================
FILE: Cards/Fcodingx_afraid-lionfish-0.html
================================================
<div class="card">
    <div class="align">
        <span class="red"></span>
        <span class="yellow"></span>
        <span class="green"></span>
    </div>

    <h1>HOVER ME</h1>
    <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde explicabo enim rem odio assumenda?
    </p>
</div>
<style>
/* From Uiverse.io by Fcodingx - Tags: card */
.card {
  width: 190px;
  height: 120px;
  padding: 0.5rem;
  background: rgba(198, 198, 198, 0.34);
  border-radius: 8px;
  backdrop-filter: blur(5px);
  border-bottom: 3px solid rgba(255, 255, 255, 0.440);
  border-left: 2px  rgba(255, 255, 255, 0.545) outset;
  box-shadow: -40px 50px 30px rgba(0, 0, 0, 0.280);
  transform: skewX(10deg);
  transition: .4s;
  overflow: hidden;
  color: white;
}

.card:hover {
  height: 254px;
  transform: skew(0deg);
}

.align {
  padding: 1rem;
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-self: flex-start;
}

.red {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff605c;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
}

.yellow {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffbd44;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
}

.green {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #00ca4e;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
}

.card h1 {
  text-align: center;
  margin: 1.3rem;
  color: rgb(218, 244, 237);
  text-shadow: -10px 5px 10px rgba(0, 0, 0, 0.573);
}


</style>


================================================
FILE: Cards/FoxVidaan_young-otter-32.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by FoxVidaan - Tags: card */
.card {
  max-width: 300px;
  font-family: sans-serif;
  color: white;
  background: linear-gradient(-45deg, #7121A6, #520153, #044146, #04967b );
  background-size: 400% 400%;
  animation: gradient 12s ease infinite;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 10px;
}

.heading {
  position: relative;
  overflow: hidden;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  padding-bottom: 10px;
}

.heading span {
  display: block;
  margin-top: -0.5rem;
  font-size: 2.7rem;
  font-weight: 800;
  -webkit-text-stroke: #fff 0.1rem;
  letter-spacing: 0.2rem;
  color: transparent;
  position: relative;
  /* top: 10rem; */
  /* animation: slide-in 0.4s 1s both; */
  text-shadow: 0px 0px 16px #CECECE;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.content .item {
  width: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 10px 16px;
  background: rgba( 255, 255, 255, 0.05 );
  box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.37);
  backdrop-filter: blur( 3px );
  -webkit-backdrop-filter: blur( 3px );
  border-radius: 10px;
}

.content .item:first-child {
  align-self: flex-start;
}

.content .item:last-child {
  align-self: flex-end;
}

.content .item.item--create:hover svg {
  animation: create-animation 1s infinite alternate;
}

.content .item.item--post:hover svg {
  animation: post-animation 2s infinite;
}

.content .item.item--inspire:hover svg {
  animation: inspire-animation 2s infinite;
}

button {
  cursor: pointer;
  margin-top: 0.5rem;
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: #7121a6af;
  animation: text-color 12s ease infinite;
  background-color: #ffffffbb;
  border: none;
  border-radius: 20px;
  padding: 16px 24px;
  transition: 0.4s;
  box-shadow: -4px -2px 10px 0px #ffffffbb, 4px 2px 16px 0px #02735e80;
}

button:hover {
  color: #7121a6;
  background-color: #ffffff;
  box-shadow: -2px -1px 8px 0px #ffffff, 2px 1px 8px 0px #02735e;
}

button:active {
  box-shadow: none;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes slide-in {
  100% {
    top: 0rem;
  }
}

@keyframes create-animation {
  0% {
    transform: scaleX(0.8);
  }

  100% {
    transform: scaleX(1.2);
  }
}

@keyframes post-animation {
  0%, 100% {
    transform: rotate(-90deg) translateY(0%);
  }

  45% {
    transform: rotate(-90deg) translateY(-50%);
  }

  50% {
    transform: rotate(-90deg) translateY(-50%) scaleY(-1);
  }

  55% {
    transform: rotate(-90deg) translateY(-50%) scaleY(-1);
  }

  90% {
    transform: rotate(-90deg) translateY(0%) scaleY(-1);
  }
}

@keyframes inspire-animation {
  0%,60% {
    filter: brightness(0.8) drop-shadow(0px 0px 2px rgb(0 0 0 / 0.4));
  }

  30%,100% {
    filter: brightness(1) drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.4));
  }
}

@keyframes text-color {
  0% {
    color: #02735E;
  }

  50% {
    color: #7121a6;
  }

  100% {
    color: #02735E;
  }
}

</style>


================================================
FILE: Cards/FrM-bot_soft-rabbit-4.html
================================================
<div class="card">
    <div class="img-container">
        <div class="img">
        </div>
        <div class="description card">
            <span class="title">
                Card
            </span>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by FrM-bot - Tags: card */
/* From uiverse.io by @FrM-bot */
.card {
  width: 200px;
  height: min-content;
  transition: all .3s;
  position: relative;
  border-radius: .5rem 2rem;
  box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.5);
}

.card:hover {
  transform: scale(1.03);
}

.img {
  transition: all .3s;
  background: #ff0084;
  background: -webkit-linear-gradient(to right, #33001b, #ff0084);
  background: linear-gradient(to right, #33001b, #ff0084);
  width: 100%;
}

.img:hover {
  transform: scale(1.3);
}

.img-container {
  display: grid;
  border-radius: .5rem 2rem;
  height: 270px;
  overflow: hidden;
}

.description {
  position: absolute;
  bottom: .5rem;
  left: .5rem;
  text-align: start;
  padding: .5rem 1em;
  width: 90%;
  transition: all 0.5s ease;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(.1rem);
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: .5rem 2rem;
}

.description:hover {
  transform: perspective(100px) translateX(7px) rotateX(3deg) rotateY(3deg) scale(1);
  box-shadow: none;
}

.title {
  color: aliceblue;
}
</style>


================================================
FILE: Cards/G4b413l_good-crab-75.html
================================================
<div class="card">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="card-inner"></div>
</div>
<style>
/* From Uiverse.io by G4b413l - Tags: glassmorphism, card, hover */
.card {
  width: 190px;
  height: 254px;
  transition: all 0.2s;
  position: relative;
  cursor: pointer;
}

.card-inner {
  width: inherit;
  height: inherit;
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  border-radius: 8px;
}

.card:hover {
  transform: scale(1.04) rotate(1deg);
}

.circle {
  width: 100px;
  height: 100px;
  background: radial-gradient(#b0e633, #53ef7d);
  border-radius: 50%;
  position: absolute;
  animation: move-up6 2s ease-in infinite alternate-reverse;
}

.circle:nth-child(1) {
  top: -25px;
  left: -25px;
}

.circle:nth-child(2) {
  bottom: -25px;
  right: -25px;
  animation-name: move-down1;
}

@keyframes move-up6 {
  to {
    transform: translateY(-10px);
  }
}

@keyframes move-down1 {
  to {
    transform: translateY(10px);
  }
}
</style>


================================================
FILE: Cards/G4b413l_polite-wombat-84.html
================================================
<div class="container">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
</div>
<style>
/* From Uiverse.io by G4b413l - Tags: card, animated */
.container {
  display: flex;
  gap: 10px;
}

.card {
  background-color: #fff;
  height: 100px;
  width: 100px;
  flex: 1;
  border-radius: 16px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card:hover {
  flex: 2;
  background-color: #b8b8b8;
}
</style>


================================================
FILE: Cards/G4b413l_pretty-fireant-44.html
================================================
<div class="card">
  <span>Social</span>
  <a class="social-link" href="#">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 461.001 461.001" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path style="fill:#F61C0D;" d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728 c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137 C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607 c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"></path> </g> </g></svg>
  </a>
  <a class="social-link" href="#">
    <svg fill="#000000" viewBox="0 0 512 512" id="icons" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z"></path></g></svg>
  </a>
  <a class="social-link" href="#">
    <svg viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#5865F2" fill-rule="nonzero"> </path> </g> </g></svg>
  </a>
  <a class="social-link" href="#">
    <svg fill="#000000" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M488.1 414.7V303.4L300.9 428l83.6 55.8zm254.1 137.7v-79.8l-59.8 39.9zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm278 533c0 1.1-.1 2.1-.2 3.1 0 .4-.1.7-.2 1a14.16 14.16 0 0 1-.8 3.2c-.2.6-.4 1.2-.6 1.7-.2.4-.4.8-.5 1.2-.3.5-.5 1.1-.8 1.6-.2.4-.4.7-.7 1.1-.3.5-.7 1-1 1.5-.3.4-.5.7-.8 1-.4.4-.8.9-1.2 1.3-.3.3-.6.6-1 .9-.4.4-.9.8-1.4 1.1-.4.3-.7.6-1.1.8-.1.1-.3.2-.4.3L525.2 786c-4 2.7-8.6 4-13.2 4-4.7 0-9.3-1.4-13.3-4L244.6 616.9c-.1-.1-.3-.2-.4-.3l-1.1-.8c-.5-.4-.9-.7-1.3-1.1-.3-.3-.6-.6-1-.9-.4-.4-.8-.8-1.2-1.3a7 7 0 0 1-.8-1c-.4-.5-.7-1-1-1.5-.2-.4-.5-.7-.7-1.1-.3-.5-.6-1.1-.8-1.6-.2-.4-.4-.8-.5-1.2-.2-.6-.4-1.2-.6-1.7-.1-.4-.3-.8-.4-1.2-.2-.7-.3-1.3-.4-2-.1-.3-.1-.7-.2-1-.1-1-.2-2.1-.2-3.1V427.9c0-1 .1-2.1.2-3.1.1-.3.1-.7.2-1a14.16 14.16 0 0 1 .8-3.2c.2-.6.4-1.2.6-1.7.2-.4.4-.8.5-1.2.2-.5.5-1.1.8-1.6.2-.4.4-.7.7-1.1.6-.9 1.2-1.7 1.8-2.5.4-.4.8-.9 1.2-1.3.3-.3.6-.6 1-.9.4-.4.9-.8 1.3-1.1.4-.3.7-.6 1.1-.8.1-.1.3-.2.4-.3L498.7 239c8-5.3 18.5-5.3 26.5 0l254.1 169.1c.1.1.3.2.4.3l1.1.8 1.4 1.1c.3.3.6.6 1 .9.4.4.8.8 1.2 1.3.7.8 1.3 1.6 1.8 2.5.2.4.5.7.7 1.1.3.5.6 1 .8 1.6.2.4.4.8.5 1.2.2.6.4 1.2.6 1.7.1.4.3.8.4 1.2.2.7.3 1.3.4 2 .1.3.1.7.2 1 .1 1 .2 2.1.2 3.1V597zm-254.1 13.3v111.3L723.1 597l-83.6-55.8zM281.8 472.6v79.8l59.8-39.9zM512 456.1l-84.5 56.4 84.5 56.4 84.5-56.4zM723.1 428L535.9 303.4v111.3l103.6 69.1zM384.5 541.2L300.9 597l187.2 124.6V610.3l-103.6-69.1z"></path> </g></svg>
  </a>
</div>
<style>
/* From Uiverse.io by G4b413l - Tags: social, card, share */
.card svg {
  height: 25px;
}

.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e7e7e7;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  height: 50px;
  width: 200px;
}

.card::before, .card::after {
  position: absolute;
  display: flex;
  align-items: center;
  width: 50%;
  height: 100%;
  transition: 0.25s linear;
  z-index: 1;
}

.card::before {
  content: "";
  left: 0;
  justify-content: flex-end;
  background-color: #4d60b6;
}

.card::after {
  content: "";
  right: 0;
  justify-content: flex-start;
  background-color: #4453a6;
}

.card:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card:hover span {
  opacity: 0;
  z-index: -3;
}

.card:hover::before {
  opacity: 0.5;
  transform: translateY(-100%);
}

.card:hover::after {
  opacity: 0.5;
  transform: translateY(100%);
}

.card span {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: whitesmoke;
  font-family: 'Fira Mono', monospace;
  font-size: 24px;
  font-weight: 700;
  opacity: 1;
  transition: opacity 0.25s;
  z-index: 2;
}

.card .social-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25%;
  height: 100%;
  color: whitesmoke;
  font-size: 24px;
  text-decoration: none;
  transition: 0.25s;
}

.card .social-link svg {
  text-shadow: 1px 1px rgba(31, 74, 121, 0.7);
  transform: scale(1);
}

.card .social-link:hover {
  background-color: rgba(249, 244, 255, 0.774);
  animation: bounce_613 0.4s linear;
}

@keyframes bounce_613 {
  40% {
    transform: scale(1.4);
  }

  60% {
    transform: scale(0.8);
  }

  80% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}
</style>


================================================
FILE: Cards/G4b413l_smooth-fish-45.html
================================================
<div class="card">
<div class="image"><span class="text">This is a chair.</span></div>
  <span class="title">Cool Chair</span>
  <span class="price">$100</span>
</div>
<style>
/* From Uiverse.io by G4b413l - Tags: card */
.card {
  position: relative;
  width: 11.875em;
  height: 16.5em;
  box-shadow: 0px 1px 13px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 120ms;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 0.5em;
  padding-bottom: 3.4em;
}

.card::after {
  content: "Add to Cart";
  padding-top: 1.25em;
  padding-left: 1.25em;
  position: absolute;
  left: 0;
  bottom: -60px;
  background: #00AC7C;
  color: #fff;
  height: 2.5em;
  width: 90%;
  transition: all 80ms;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0;
}

.card .title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  position: absolute;
  left: 0.625em;
  bottom: 1.875em;
  font-weight: 400;
  color: #000;
}

.card .price {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 0.9em;
  position: absolute;
  left: 0.625em;
  bottom: 0.625em;
  color: #000;
}

.card:hover::after {
  bottom: 0;
  opacity: 1;
}

.card:active {
  transform: scale(0.98);
}

.card:active::after {
  content: "Added !";
  height: 3.125em;
}

.text {
  max-width: 55px;
}

.image {
  background: rgb(241, 241, 241);
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
</style>


================================================
FILE: Cards/Galahhad_breezy-insect-49.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by Galahhad - Tags: card, gold, ticket */
.one-div {
  --circle-color: #212121;
  width: 300px;
  height: 150px;
  position: relative;
}

.one-div::before {
  content: "Golden Ticket";
  color: transparent;
  text-shadow: -55px 0 #2E2205;
  text-transform: uppercase;
  font-family: "Anton", Impact, sans-serif;
  font-size: 1.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  background-image: -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      -o-radial-gradient(right bottom, ellipse farthest-corner, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
      -o-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  background-image: linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
      radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  background-size: 55%, 55%, 1%, 1%, 1%, 1%, 1%, 1%, 1%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 100%, 100%, 100%, 100%, 100%, 100%;
  background-position: 8px -6px, 8px 125px, 198px 3px, 198px 20px, 198px 37px, 198px 54px, 198px 71px, 198px 88px, 198px 105px, 235px 15px, 235px 20px, 235px 27px, 235px 31px, 235px 39px, 235px 43px, 235px 50px, 235px 54px, 235px 58px, 235px 65px, 235px 69px, 235px 76px, 235px 80px, 235px 87px, 235px 91px, 235px 95px, 235px 103px, 235px 106px, 50px -90px, 50px 90px, 200px, -200px, 0, 0;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: .8s;
  -o-transition: .8s;
  transition: .8s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.one-div::after {
  content: "This golden ticket\A ensures admittance";
  white-space: pre;
  color: transparent;
  text-shadow: 55px 0 #2E2205;
  font-family: "Anton", Impact, sans-serif;
  text-align: center;
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  background-image: -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      -o-radial-gradient(left bottom, ellipse farthest-corner, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
      -o-radial-gradient(right top, ellipse farthest-corner, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  background-image: linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      radial-gradient(ellipse farthest-corner at left bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
      radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  background-size: 55%, 55%, 1%, 1%, 1%, 1%, 1%, 1%, 1%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 100%, 100%, 100%, 100%, 100%, 100%;
  background-position: 126px -6px, 126px 125px, 98px 3px, 98px 20px, 98px 37px, 98px 54px, 98px 71px, 98px 88px, 98px 105px, 20px 15px, 20px 20px, 20px 27px, 20px 31px, 20px 39px, 20px 43px, 20px 50px, 20px 54px, 20px 58px, 20px 65px, 20px 69px, 20px 76px, 20px 80px, 20px 87px, 20px 91px, 20px 95px, 20px 103px, 20px 106px, -50px -90px, -50px 90px, 200px, -200px, 0, 0;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: .8s;
  -o-transition: .8s;
  transition: .8s;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.one-div:hover::before {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.one-div:hover::after {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}
</style>


================================================
FILE: Cards/Gaurav-WebDev_curly-lionfish-2.html
================================================
<div class="card">
  <p class="c-txt">Hover Me</p>
</div>
<style>
/* From Uiverse.io by Gaurav-WebDev - Tags: card, hover effect, cool card */
.card {
  width: 190px;
  height: 254px;
  background: lightgray;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  color: #333;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  border-radius: 40px;
  cursor: pointer;
  position: relative;
  transition: all 0.7s ease-in-out;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  height: 40%;
  width: 100%;
  background-color: #088080;
  bottom: 0;
  right: 0;
  transform: translatey(70px);
  border-radius: 100%;
  transition: all 0.7s ease-in-out;
}

.c-txt {
  z-index: 2;
}

.card:hover::before {
  transform: scale(7) translate(-20px);
}

.card:hover {
  box-shadow: 1px -10px 500px 500px #9fe4e44a;
  color: #f3f3f3;
}

</style>


================================================
FILE: Cards/Gerente-S4V1T4R_shaggy-kangaroo-21.html
================================================
<div class="container">
  <div class="box">
    <div class="content">
      
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Gerente-S4V1T4R - Tags: card */
.container {
  --background: linear-gradient(to left, #880505 0%, #f36b11 100%);
  width: 190px;
  height: 254px;
  padding: 4px;
  border-radius: 5px;
  overflow: visible;
  display: flex;
  align-items: center;
  background: var(--background);
  position: relative;
}

.container .box {
  position: relative;
  width: 190px;
  height: 244px;
  background: #1b1b1b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 10px;
}

.container .box .content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  gap: 20px;
  padding: 0 20px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.container .box .content .icon {
  width: 50px;
  height: 50px;
  -webkit-box-shadow: 0 0 0 4px #e6e6e6,
    0 0 0 6px rgb(212, 10, 10);
  box-shadow: 0 0 0 4px #e6e6e6,
    0 0 0 6px rgb(212, 10, 10);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 2.5em;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.container .box::before {
  content: '';
  position: absolute;
  inset: -10px 50px;
  border-top: 4px solid rgb(99, 89, 247);
  z-index: -1;
  border-bottom: 4px solid rgb(65, 44, 250);
  z-index: -1;
  z-index: -1;
  -webkit-transform: skewY(15deg);
  -ms-transform: skewY(15deg);
  transform: skewY(15deg);
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.container .box:hover::before {
  -webkit-transform: skewY(0deg);
  -ms-transform: skewY(0deg);
  transform: skewY(0deg);
  inset: -10px 40px;
}

.container .box::after {
  content: '';
  position: absolute;
  inset: 60px -10px;
  border-left: 4px solid #880505;
  z-index: -1;
  border-right: 4px solid #aa551d;
  z-index: -1;
  -webkit-transform: skew(15deg);
  -ms-transform: skew(15deg);
  transform: skew(15deg);
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.container .box:hover::after {
  -webkit-transform: skew(0deg);
  -ms-transform: skew(0deg);
  transform: skew(0deg);
  inset: 40px -10px;
}

.container .box .content {
  border-radius: 50%;
}

</style>


================================================
FILE: Cards/Gianluks90_curly-catfish-36.html
================================================
<div class="card">
  <div class="foreground">
    <div class="credit-card-header">
      <div class="category"> <strong>Credit</strong> card</div>
      <div class="bank">bank-name</div>
    </div>
    <div class="credit-card-chip-container">
      <svg xml:space="preserve" viewBox="0 0 511 511" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1" width="800px" height="800px" fill="#d4af37" class="chip">
        <path d="M455.5,56h-400C24.897,56,0,80.897,0,111.5v288C0,430.103,24.897,455,55.5,455h400c30.603,0,55.5-24.897,55.5-55.5v-288
	C511,80.897,486.103,56,455.5,56z M464,248H343v-56.5c0-4.687,3.813-8.5,8.5-8.5H464V248z M343,263h121v65H343V263z M479,223h17v65
	h-17V223z M479,208v-65h17v65H479z M464,168H351.5c-12.958,0-23.5,10.542-23.5,23.5V408H183V103h272.5c4.687,0,8.5,3.813,8.5,8.5
	V168z M168,248H47v-65h121V248z M32,288H15v-65h17V288z M47,263h121v65H47V263z M263,88V71h137v17H263z M248,88H111V71h137V88z
	 M168,103v65H47v-56.5c0-4.687,3.813-8.5,8.5-8.5H168z M32,208H15v-65h17V208z M15,303h17v65H15V303z M47,343h121v65H55.5
	c-4.687,0-8.5-3.813-8.5-8.5V343z M248,423v17H111v-17H248z M263,423h137v17H263V423z M343,408v-65h121v56.5
	c0,4.687-3.813,8.5-8.5,8.5H343z M479,303h17v65h-17V303z M496,111.5V128h-17v-16.5c0-12.958-10.542-23.5-23.5-23.5H415V71h40.5
	C477.832,71,496,89.168,496,111.5z M55.5,71H96v17H55.5C42.542,88,32,98.542,32,111.5V128H15v-16.5C15,89.168,33.168,71,55.5,71z
	 M15,399.5V383h17v16.5c0,12.958,10.542,23.5,23.5,23.5H96v17H55.5C33.168,440,15,421.832,15,399.5z M455.5,440H415v-17h40.5
	c12.958,0,23.5-10.542,23.5-23.5V383h17v16.5C496,421.832,477.832,440,455.5,440z"></path>
      </svg>
    </div>
    <div class="info-container">
      <p class="names">Owner name</p>
      <p class="serial">1264 3245 3322 1356</p>
      <p class="expire">03/24</p>
    </div>
  </div>
  <svg viewBox="0 0 1600 800" height="100%" width="100%" class="background">
    <rect height="800" width="1600" fill="#ff9d00"></rect>
    <g transform="rotate(-30 500 100)" stroke-opacity="0.05" stroke-width="66.7" stroke="#000">
      <circle r="1800" cy="0" cx="0" fill="#ff9d00"></circle>
      <circle r="1700" cy="0" cx="0" fill="#fb8d17"></circle>
      <circle r="1600" cy="0" cx="0" fill="#f47d24"></circle>
      <circle r="1500" cy="0" cx="0" fill="#ed6e2d"></circle>
      <circle r="1400" cy="0" cx="0" fill="#e35f34"></circle>
      <circle r="1300" cy="0" cx="0" fill="#d85239"></circle>
      <circle r="1200" cy="0" cx="0" fill="#cc453e"></circle>
      <circle r="1100" cy="0" cx="0" fill="#be3941"></circle>
      <circle r="1000" cy="0" cx="0" fill="#b02f43"></circle>
      <circle r="900" cy="0" cx="0" fill="#a02644"></circle>
      <circle r="800" cy="0" cx="0" fill="#901e44"></circle>
      <circle r="700" cy="0" cx="0" fill="#801843"></circle>
      <circle r="600" cy="0" cx="0" fill="#6f1341"></circle>
      <circle r="500" cy="0" cx="0" fill="#5e0f3d"></circle>
      <circle r="400" cy="0" cx="0" fill="#4e0c38"></circle>
      <circle r="300" cy="0" cx="0" fill="#3e0933"></circle>
      <circle r="200" cy="0" cx="0" fill="#2e062c"></circle>
      <circle r="100" cy="0" cx="0" fill="#210024"></circle>
    </g>
  </svg>

</div>
<style>
/* From Uiverse.io by Gianluks90 - Tags: card, creditcard */
.card {
  width: 245px;
  height: 155px;
  background: lightgrey;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}

.foreground {
  border-radius: 15px;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2.8px);
  -webkit-backdrop-filter: blur(2.8px);
  padding: 16px;
  color: white;
}

.credit-card-header {
  display: flex;
  justify-content: space-between;
}

.credit-card-chip-container {
  margin: 8px 0;
  height: 40px;
  width: 40px;
}

.chip {
  width: 100%;
  height: 100%;
}

.category, .bank {
  font-size: smaller;
}

.info-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.names {
  align-self: flex-end;
  text-transform: uppercase;
  font-size: smaller;
}

.serial {
  align-self: flex-end;
  letter-spacing: 2px;
  font-size: 15px;
  font-family: monospace;
}

.expire {
  margin-left: 3px;
  font-size: smaller;
}

</style>


================================================
FILE: Cards/Giuxpro_quiet-warthog-95.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by Giuxpro - Tags: card */
.card {
 width: 190px;
 height: 254px;
 background: rgb(46, 44, 44);
 transition: all 300ms;
}

.card:hover {
 opacity: 0.8;
 transform: scale(1.10);
}



</style>


================================================
FILE: Cards/Hoseinnaqvi_terrible-hound-31.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by Hoseinnaqvi - Tags: logo, one-div, fruit */
.one-div {
  margin-top: 40px;
  width: 300px;
  height: 300px;
  background-image: linear-gradient(to right,red,orange);
  border-radius: 40%;
  box-shadow: 0px 0px 10px black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.one-div::before {
  content: '';
  height: 90px;
  width: 90px;
  border-radius: 0 40% 0 60%;
  background-color: green;
  position: absolute;
  top: 5%;
  left: 42%;
  box-shadow: 0px -3px 6px rgba(4, 4, 4, 0.695);
  z-index: -1;
}

.one-div::after {
  content: '😋';
  filter: hue-rotate(130deg);
  font-size: 10em;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  border-radius: 0 40% 0 60%;
  text-align: center;
  top: 33%;
  left: 37%;
  animation: txt 1s infinite alternate;
}

@keyframes txt {
  0% {
    opacity: 0.1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes intro {
  0% {
    top: -100px;
  }

  50% {
    top: -50px;
  }

  100% {
    top: 0px;
  }
}

</style>


================================================
FILE: Cards/IWhat1_cold-frog-10.html
================================================
<div class="container">
  <div class="card">
    <div class="front">
      <p class="front-heading">Front card</p>
      <p>Follow Me For More</p>
    </div>
    <div class="back">
      <p class="back-heading">Back card</p>
      <p>Follow Me For More</p>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by IWhat1 - Tags: animation, 3d, card, hover, flip, hover effect, card animation, card hover */
.container {
  width: 240px;
  height: 294px;
  perspective: 900px;
}

.card {
  height: 100%;
  width: 100%;
  background-color: aliceblue;
  position: relative;
  transition: transform 1500ms;
  transform-style: preserve-3d;
  border-radius: 2rem;
}

.container:hover > .card {
  cursor: pointer;
  transform: rotateY(180deg) rotateZ(180deg);
}

.front, .back {
  height: 100%;
  width: 100%;
  border-radius: 2rem;
  position: absolute;
  box-shadow: 0 0 10px 2px rgba(50, 50, 50, 2.5);
  backface-visibility: hidden;
  color: aliceblue;
  background: linear-gradient(-135deg, 
#F80A4A, #0AA4F8);
}

.front, .back {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.back {
  transform: rotateY(180deg) rotateZ(180deg);
}

.back-heading, .front-heading {
  font-size: 28px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
}

</style>


================================================
FILE: Cards/IWhat1_curvy-fox-39.html
================================================
<div class="container">
  <div class="card">
    <div class="front">
      <div class="card-top">
        <p class="card-top-para">Profile</p>
      </div>
      
      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
        <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"></path>
      </svg>
      <p class="heading"> Front Card </p>
      <p class="follow">Follow me for more...
    </p></div>
    <div class="back">
      <p class="heading">Follow Me</p>
      
      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-person-add" viewBox="0 0 16 16">
        <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0Zm-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
        <path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"></path>
      </svg>

      <div class="icons">
        
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
          <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
        </svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
          <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"></path>
        </svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
            <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"></path>
        </svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
          <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path>
        </svg>

      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by IWhat1 - Source: IWhat1 - Tags: animation, black, card, hover, hover effect, card template, cardhover , card hover */
.container {
  height: 294px;
  width: 240px;
  color: red;
  perspective: 800px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.card {
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 2rem;
  position: relative;
  transition: transform 1500ms;
  transform-style: preserve-3d;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10%;
  position: absolute;
  width: 50%;
  background-color: transparent;
  border: 2px solid black;
  top: 0;
  border-top: none;
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0px 0px 10px 5px rgba(255, 0, 0, 0.7);
}

.card-top-para {
  font-size: 16px;
  font-weight: bold;
}

.container:hover > .card {
  cursor: pointer;
  transform: rotateX(180deg) rotateZ(-180deg);
}

.front,
.back {
  height: 100%;
  width: 100%;
  border-radius: 2rem;
  box-shadow: 0px 0px 10px 5px rgba(255, 0, 0, 0.7);
  position: absolute;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.back {
  background-color: black;
  transform: rotateX(180deg) rotateZ(-180deg);
}

.heading {
  font-size: 22px;
  font-weight: bold;
}

.follow {
  font-size: 16px;
  font-weight: 500;
}

.icons {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 20px;
}

</style>


================================================
FILE: Cards/IWhat1_nice-pig-2.html
================================================
<div class="container">
  <div class="card">
    <div class="front">
      <div class="card-top">
        <p class="card-top-para">Profile</p>
      </div>
      
      <svg viewBox="0 0 16 16" class="bi bi-person-circle" fill="currentColor" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
        <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" fill-rule="evenodd"></path>
      </svg>
      <p class="heading"> Front Card </p>
      <p class="follow">Follow me for more...
    </p></div>
    <div class="back">
      <p class="heading">Follow Me</p>
      
      <svg viewBox="0 0 16 16" class="bi bi-person-add" fill="currentColor" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
        <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0Zm-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
        <path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"></path>
      </svg>

      <div class="icons">
        
        <svg viewBox="0 0 16 16" class="bi bi-instagram" fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
        </svg>
        
        <svg viewBox="0 0 16 16" class="bi bi-twitter-x" fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"></path>
        </svg>
        
        <svg viewBox="0 0 16 16" class="bi bi-whatsapp" fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"></path>
        </svg>
        
        <svg viewBox="0 0 16 16" class="bi bi-facebook" fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg">
          <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path>
        </svg>

      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by IWhat1 - Tags: animation, black, card, hover, hover effect, card template, cardhover , card hover */
.container {
  height: 294px;
  width: 240px;
  color: yellow;
  perspective: 800px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.card {
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 2rem;
  position: relative;
  transition: transform 1500ms;
  transform-style: preserve-3d;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10%;
  position: absolute;
  width: 50%;
  background-color: transparent;
  border: 2px solid black;
  top: 0;
  border-top: none;
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0px 0px 10px 5px rgba(255, 255, 0, 0.7);
}

.card-top-para {
  font-size: 16px;
  font-weight: bold;
}

.container:hover > .card {
  cursor: pointer;
  transform: rotateX(180deg) rotateZ(-180deg);
}

.front,
.back {
  height: 100%;
  width: 100%;
  border-radius: 2rem;
  box-shadow: 0px 0px 10px 5px rgba(255, 255, 0, 0.7);
  position: absolute;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.back {
  background-color: black;
  transform: rotateX(180deg) rotateZ(-180deg);
}

.heading {
  font-size: 22px;
  font-weight: bold;
}

.follow {
  font-size: 16px;
  font-weight: 500;
}

.icons {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 20px;
}

</style>


================================================
FILE: Cards/IWhat1_old-ladybug-79.html
================================================
<div class="card-container">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="container">
        <div class="log-card">
    <p class="heading">Welcome Back</p>
    <p>We are you to have you Again</p>

    <div class="input-group">
        <p class="text">Username</p>
        <input class="input" type="username" placeholder="For Ex: Jayakrishna007">
        <p class="text">Password</p>
        <input class="input" type="password" placeholder="Enter Password">
    </div>

    <div class="password-group">
        <div class="checkbox-group">
            <input type="checkbox">
            <label class="label">Remember Me</label>
        </div>
            <a href="" class="forget-password">Forget Password</a>
    </div>

    <button class="btn">Sign In</button>

    <p class="no-account">Don't Have an Account ?<a class="link"> Sign Up</a></p>
</div>
    </div>
</div>

<style>
/* From Uiverse.io by IWhat1 - Tags: neumorphism, skeuomorphism, glassmorphism, login, card, login form, cool card, card animation */
.card-container {
  width: 350px;
  height: 440px;
  background: transparent;
  position: relative;
}

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

.circle1 {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: #2879f3;
  position: absolute;
  top: 0;
  left: 0;
}

.circle2 {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: #f37e10;
  position: absolute;
  right: 0;
  bottom: 0;
}

.log-card {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: absolute;
  width: 300px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  padding: 20px;
}

.heading {
  font-size: 28px;
  font-weight: 800;
}

.para {
  font-size: 14px;
  font-weight: 500;
}

.text {
  margin-top: 15px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  color: lightslategray;
}

.input-group {
  margin-top: 10px;
  margin-bottom: 4px;
}

.input {
  box-sizing: border-box;
  margin-bottom: 5px;
  width: 100%;
  border: none;
  padding: 8px 16px;
  background-color: transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  font-weight: 600;
  color: #2879f3;
}

.input:hover {
  color: #2879f3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.password-group {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.checkbox-group {
  color: black;
  font-size: 14px;
  font-weight: 500;
}

.forget-password {
  font-size: 14px;
  font-weight: 500;
  color: #2879f3;
  text-decoration: none;
}

.forget-password:hover {
  text-decoration: underline;
  color: #f37e10;
}

.btn {
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 8px 16px;
  border: none;
  background-color: #2879f3;
  color: white;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
}

.btn:hover {
  background-color: #0653c7;
}

.no-account {
  font-size: 16px;
  font-weight: 400;
}

.link {
  font-weight: 800;
  color: #2879f3;
}

.link:hover {
  color: #f37e10;
  text-decoration: underline;
}
</style>


================================================
FILE: Cards/IWhat1_strange-panther-78.html
================================================
<div class="container">
  <div class="card">
    <div class="front">
      <div class="card-top">
        <p class="card-top-para">Profile</p>
      </div>
      
      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
        <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"></path>
      </svg>
      <p class="heading"> Front Card </p>
      <p class="follow">Follow me for more...
    </p></div>
    <div class="back">
      <p class="heading">Follow Me</p>
      
      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-person-add" viewBox="0 0 16 16">
        <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0Zm-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
        <path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"></path>
      </svg>

      <div class="icons">
        
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
          <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
        </svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
          <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"></path>
        </svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
            <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"></path>
        </svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
          <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path>
        </svg>

      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by IWhat1 - Source: IWhat1 - Tags: animation, black, card, hover, hover effect, card template, cardhover , card hover */
.container {
  height: 294px;
  width: 240px;
  color: white;
  perspective: 800px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.card {
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 2rem;
  position: relative;
  transition: transform 1500ms;
  transform-style: preserve-3d;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10%;
  position: absolute;
  width: 50%;
  background-color: transparent;
  border: 2px solid black;
  top: 0;
  border-top: none;
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.7);
}

.card-top-para {
  font-size: 16px;
  font-weight: bold;
}

.container:hover > .card {
  cursor: pointer;
  transform: rotateX(180deg) rotateZ(-180deg);
}

.front,
.back {
  height: 100%;
  width: 100%;
  border-radius: 2rem;
  box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.7);
  position: absolute;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.back {
  background-color: black;
  transform: rotateX(180deg) rotateZ(-180deg);
}

.heading {
  font-size: 22px;
  font-weight: bold;
}

.follow {
  font-size: 16px;
  font-weight: 500;
}

.icons {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 20px;
}

</style>


================================================
FILE: Cards/IverMisericordiaM_short-gecko-15.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by IverMisericordiaM - Tags: card */
.card {
 width: 190px;
 height: 254px;
 box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 background: linear-gradient(293deg, rgb(185, 185, 255) 0%, rgb(72, 225, 255) 100%);
}
</style>


================================================
FILE: Cards/JOBOYA_chilly-sheep-21.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by JOBOYA - Tags:  */
.card {
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  margin: 20px;
  max-width: 400px;
  padding: 20px;
  position: relative;
  transition: 0.3s
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.2)
}

.heading {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.heading span {
  color: #3498db
}

.content {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px
}

.item {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  text-align: center;
  transition: 0.3s;
}

.item:hover {
  animation: slotMachine 0.8s ease-in-out forwards
}

@keyframes slotMachine {
  0% {
    transform: translateY(0);
    opacity: 1
  }

  25% {
    transform: translateY(-100%);
    opacity: 0
  }

  50% {
    transform: translateY(100%);
    opacity: 0
  }

  75% {
    transform: translateY(0);
    opacity: 1
  }

  100% {
    transform: translateY(0);
    opacity: 1
  }
}

.content .item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-transform: uppercase;
  font-weight: 700
}

.content .item span {
  margin-top: 8px;
  font-size: 14px;
  color: rgb(111,110,110);
  font-weight: 400;
  cursor: pointer
}

.heading span {
  display: inline-block;
  background-image: linear-gradient(to right,#3498db,#5a5aeb,#7d44f0,#9a16ec);
  background-clip: text;
  color: transparent
}

.item svg {
  fill: #3498db;
  height: 48px;
  margin-bottom: 5px;
  width: 48px;
}

.item--create,
.item--post,
.item--inspire {
  color: #4d34db !important;
}

button {
  position: relative;
  overflow: hidden;
  background-color: #3498db;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  margin-top: 10px;
  padding: 10px 20px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.3s;
  width: 100%;
  z-index: 1
}

button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right,#3498db,#5a5aeb,#7d44f0,#9a16ec);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s
}

button:hover::after {
  opacity: 1
}

</style>


================================================
FILE: Cards/Jamshibkl_heavy-goat-11.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by Jamshibkl - Tags: card */
.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  width: 280px;
  height: 350px;
  padding: 30px;
  border-radius: 18px;
  position: relative;
  box-sizing: border-box;
  background: linear-gradient(90deg, #0a76b5 0%, #3bf8a0 100%);
  animation: gradient 8s ease-in-out infinite;
  background-size: 500% 500%;
  transition: all 0.5s;
  box-shadow: 0px 15px 20px rgba(32, 64, 194, 0.4);
}

.heading {
  font-size: 25px;
  font-weight: bold;
  color: rgb(15, 17, 36);
  margin-top: 20px;
  text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.3);
  ;
}

.heading span {
  color: #ffffffeb;
  text-shadow: 0px 0px 16px #CECECE;
}

.content {
  display: flex;
  justify-content: space-between;
  list-style: none;
  background-color: #17181c;
  border-radius: 1em;
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.3);
  transform-origin: 50% 133%;
  text-shadow: 0px 0px 16px #CECECE;
}

.content:hover {
  box-shadow: 0px 15px 20px rgba(32, 64, 194, 0.4);
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 5rem;
  height: 4rem;
  text-decoration: none;
  transition: transform 0.2s ease-in-out;
  color: #ffffff;
  text-shadow: 0px 0px 16px #CECECE;
}

.item:hover {
  color: dodgerblue;
  transform: translateY(-10px);
}

.item:focus {
  outline: transparent;
}

.item item--create svg {
  display: block;
  margin: 0 auto;
  overflow: visible;
  width: 1.5em;
  height: 1.5em;
  transition: transform 0.3s cubic-bezier(0.7,0,0.3,1);
}

.item span {
  display: block;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  transition: opacity 0.3s;
}

.item--create svg {
  animation: spin 2s linear infinite;
}

.item--post svg {
  animation: upDown 2s ease-in-out infinite alternate;
}

.item--inspire svg {
  animation: flash 1.2s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes upDown {
  0% {
    transform: translateY(1.8px);
  }

  100% {
    transform: translateY(-1.8px);
  }
}

@keyframes flash {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.content span:hover {
  color: dodgerblue;
  text-shadow: 0px 0px 16px #CECECE;
}

.item:focus span {
  opacity: 0;
}

button {
  padding: 15px;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0px 0px 16px #CECECE;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #fff;
  background-color: rgb(12, 17, 80);
  border: none;
  border-radius: 25px;
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
}

button:hover {
  background-color: #251ab6;
  box-shadow: 0px 15px 20px rgba(32, 64, 194, 0.4);
  color: #fff;
  transform: translateY(-7px);
}

button:active {
  transform: translateY(-1px);
}
</style>


================================================
FILE: Cards/Jarol20cb_sour-jellyfish-99.html
================================================
<div id="card" class="card">
  <div class="content">
    <div class="card-body">
      <div class="code-container float-animation">
        <span class="line"><span class="code-comment">// Código de ejemplo</span></span>
        <span class="line"><span class="code-keyword">function</span> <span class="code-function">example</span>()</span>
        <span class="line">{</span>
        <span class="line indent"><span class="code-keyword">let</span> <span class="code-variable">message</span> = <span class="code-string">"Hello, World!"</span>;</span>
        <span class="line indent"><span class="code-built-in">console</span>.<span class="code-method">log</span>(<span class="code-variable">message</span>);</span>
        <span class="line">}</span>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Jarol20cb - Tags: card, animated, console */
.card {
  width: 200px;
  height: 200px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

.code-container {
  background-color: #222;
  border-radius: 8px;
  padding: 16px;
}

.line {
  display: block;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  margin: 4px 0;
  position: relative;
}

.code-comment {
  color: #5c6370;
}

.code-keyword {
  color: #c678dd;
}

.code-function {
  color: #61afef;
}

.code-variable {
  color: #dcdcaa;
}

.code-string {
  color: #98c379;
}

.indent {
  padding-left: 20px;
}

/* Animación */
@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.float-animation {
  animation: float 2s ease-in-out infinite;
}

</style>


================================================
FILE: Cards/Javierrocadev_angry-puma-14.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: card, hover, blur filter, card template, cool card, cardhover , card hover, 3d card -->
<div
  class="hover:-translate-y-2 group bg-neutral-50 duration-500 w-44 h-44 flex text-neutral-600 flex-col justify-center items-center relative rounded-xl overflow-hidden shadow-md"
>
  <svg
    viewBox="0 0 200 200"
    xmlns="http://www.w3.org/2000/svg"
    class="absolute blur z-10 fill-red-300 duration-500 group-hover:blur-none group-hover:scale-105"
  >
    <path
      transform="translate(100 100)"
      d="M39.5,-49.6C54.8,-43.2,73.2,-36.5,78.2,-24.6C83.2,-12.7,74.8,4.4,69,22.5C63.3,40.6,60.2,59.6,49.1,64.8C38.1,70,19,61.5,0.6,60.7C-17.9,59.9,-35.9,67,-47.2,61.9C-58.6,56.7,-63.4,39.5,-70,22.1C-76.6,4.7,-84.9,-12.8,-81.9,-28.1C-79,-43.3,-64.6,-56.3,-49.1,-62.5C-33.6,-68.8,-16.8,-68.3,-2.3,-65.1C12.1,-61.9,24.2,-55.9,39.5,-49.6Z"
    ></path>
  </svg>

  <div class="z-20 flex flex-col justify-center items-center">
    <span class="font-bold text-6xl ml-2">34+</span>
    <p class="font-bold">Projects</p>
  </div>
</div>


    

================================================
FILE: Cards/Javierrocadev_brave-emu-25.html
================================================
<div class="card">
  <div class="card__image"></div>
  <div class="card__content">
    <span class="title">Title card</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit vitae orci quis dignissim.</p>
  </div>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: card, cart, card hover */
.card {
  width: 300px;
  height: 350px;
  background: #ffd166;
  color: #073b4c;
  font-weight: 600;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: left;
  position: relative;
  transition: all .5s ease;
}

.card::before {
  content: "32,99$";
  position: absolute;
  width: 75px;
  height: 75px;
  top: 35%;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #ef476f;
  color: aliceblue;
  font-weight: 800;
  transition: all .5s ease;
}

.card__image {
  width: initial;
  height: 150px;
  background: rgb(6,214,160);
  background: linear-gradient(163deg, #06d6a0 18%, rgba(17,138,178,1) 79%);
  transition: all .5s ease;
}

.title {
  font-weight: 800;
  font-size: 1.4em;
}

.card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  gap: 10px;
}

.card:hover {
  border-top-left-radius: 35px;
  box-shadow: 5px 5px 0px 0px #06d6a0, 10px 10px 0px 0px #118ab2, 15px 15px 0px 0px #06d6a0, 5px 5px 15px 5px rgba(0,0,0,0);
}

.card:hover .card__image {
  border-top-left-radius: 25px;
}

.card:hover::before {
  transform: scale(1.3) rotate(-30deg);
}
</style>


================================================
FILE: Cards/Javierrocadev_brave-fireant-77.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: icon, blue, gradient, card, hover, hover effect, card hover, tailwind -->
<div
  class="group hover:-rotate-0 [transform:rotate3d(1_,-1,_1,_15deg)] duration-500 overflow-hidden bg-gradient-to-bl from-sky-400 via-sky-500 to-sky-700 p-6 rounded-lg hover:shadow-lg [box-shadow:12px_12px_0px_0px_#0d0d0d] backdrop-filter backdrop-blur-md border border-neutral-600"
>
  <div class="flex items-center justify-between">
    <div>
      <h2 class="text-2xl font-bold text-white">City Name</h2>
      <p class="text-neutral-800">Sunny</p>
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="48px"
      height="48px"
      viewBox="0 0 24 24"
      fill="none"
      class="absolute -top-2 -right-2 w-12 h-12 stroke-yellow-300"
    >
      <path
        d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
        stroke=""
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
    </svg>
  </div>
  <div class="mt-4">
    <p class="text-4xl font-bold text-white">22°C</p>
    <div class="flex items-center justify-between gap-1">
      <span class="mr-2 text-neutral-800">Feels Like</span>
      <span class="text-white">20°C</span>
    </div>
    <div class="flex items-center justify-between gap-1">
      <span class="text-neutral-800">Wind</span>
      <span class="text-white">10 km/h</span>
    </div>
    <div class="flex items-center justify-between gap-1">
      <span class="text-neutral-800">Humidity</span>
      <span class="text-white">75%</span>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/Javierrocadev_bright-turkey-65.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: neumorphism, card, hover, hover effect, cool card, card animation, card hover, tailwind -->
<div
  class="cursor-pointer group overflow-hidden p-5 duration-1000 hover:duration-1000 relative w-64 h-64 bg-neutral-800 rounded-xl"
>
  <div
    class="bg-transparent group-hover:scale-150 -top-12 -left-12 absolute shadow-yellow-800 shadow-inner rounded-full transition-all ease-in-out group-hover:duration-1000 duration-1000 w-24 h-24"
  ></div>
  <div
    class="bg-transparent group-hover:scale-150 top-44 left-14 absolute shadow-red-800 shadow-inner rounded-full transition-all ease-in-out group-hover:duration-1000 duration-1000 w-24 h-24"
  ></div>
  <div
    class="bg-transparent group-hover:scale-150 top-24 left-56 absolute shadow-sky-800 shadow-inner rounded-full transition-all ease-in-out group-hover:duration-1000 duration-1000 w-24 h-24"
  ></div>
  <div
    class="bg-transparent group-hover:scale-150 top-12 left-12 absolute shadow-red-800 shadow-inner rounded-full transition-all ease-in-out group-hover:duration-1000 duration-1000 w-12 h-12"
  ></div>
  <div
    class="bg-transparent group-hover:scale-150 top-12 left-12 absolute shadow-green-800 shadow-inner rounded-full transition-all ease-in-out group-hover:duration-1000 duration-1000 w-44 h-44"
  ></div>
  <div
    class="bg-transparent group-hover:scale-150 -top-24 -left-12 absolute shadow-sky-800 shadow-inner rounded-full transition-all ease-in-out group-hover:duration-1000 duration-1000 w-64 h-64"
  ></div>
  <div
    class="bg-transparent group-hover:scale-150 top-24 left-12 absolute shadow-sky-500 shadow-inner rounded-full transition-all ease-in-out group-hover:duration-1000 duration-1000 w-4 h-4"
  ></div>
  <div
    class="w-full h-full shadow-xl shadow-neutral-900 p-3 bg-neutral-600 opacity-50 rounded-xl flex-col gap-2 flex justify-center"
  >
    <span class="text-neutral-50 font-bold text-xl italic">Explore More</span>
    <p class="text-neutral-300">
      Dive into curated collections, traverse user-friendly interfaces, and let
      curiosity guide your exploration.
    </p>
  </div>
</div>


    

================================================
FILE: Cards/Javierrocadev_brown-kangaroo-82.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: icon, green, card, cardhover  -->
<div class="relative group duration-500 cursor-pointer group overflow-hidden relative text-gray-50 h-72 w-56  rounded-2xl hover:duration-700 duration-700">
  <div class="w-56 h-72 bg-lime-400 text-gray-800">
    <div class="flex flex-row justify-between">
    <svg class="fill-current stroke-current w-8 h-8 p-2 hover:bg-lime-200  rounded-full m-1" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
  <path class="" d="M15.8,32.9V15.8m0,0H32.9m-17.1,0L37.2,37.2m47-4.3V15.8m0,0H67.1m17.1,0L62.8,37.2m-47,29.9V84.2m0,0H32.9m-17.1,0L37.2,62.8m47,21.4L62.8,62.8M84.2,84.2V67.1m0,17.1H67.1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8">
  </path>
  </svg>
  <svg class="fill-current stroke-current w-8 h-8 p-2 m-1 hover:bg-lime-200 rounded-full" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
  <path class="svg-stroke-primary" d="M50,17.4h0M50,50h0m0,32.6h0M50,22a4.7,4.7,0,1,1,4.7-4.6A4.7,4.7,0,0,1,50,22Zm0,32.7A4.7,4.7,0,1,1,54.7,50,4.7,4.7,0,0,1,50,54.7Zm0,32.6a4.7,4.7,0,1,1,4.7-4.7A4.7,4.7,0,0,1,50,87.3Z" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8">
  </path>
  </svg>
    </div>
  </div>
  <div class="absolute bg-gray-50 -bottom-24 w-56 p-3 flex flex-col gap-1 group-hover:-bottom-0 group-hover:duration-600 duration-500">
    <span class="text-lime-400 font-bold text-xs">TAILWIND</span>
    <span class="text-gray-800 font-bold text-3xl">Cheat Sheet</span>
    <p class="text-neutral-800">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  

</div>



================================================
FILE: Cards/Javierrocadev_calm-firefox-51.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: blue, black, card, cardhover , tailwind -->
<div class="w-60 h-80 bg-neutral-800 rounded-3xl text-neutral-300 p-4 flex flex-col items-start justify-center gap-3 hover:bg-gray-900 hover:shadow-2xl hover:shadow-sky-400 transition-shadow">
  <div class="w-52 h-40 bg-sky-300 rounded-2xl"></div>
  <div class="">
      <p class="font-extrabold">Card title</p>
      <p class="">4 popular types of cards in UI design.</p>
  </div>
  <button class="bg-sky-700 font-extrabold p-2 px-6 rounded-xl hover:bg-sky-500 transition-colors">See more</button>
</div>



================================================
FILE: Cards/Javierrocadev_chatty-stingray-29.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: blue, card, hover, hover effect, cardhover , card hover -->
<div class="relative duration-300  hover:-rotate-0  -rotate-12 group border border-sky-900 border-4  overflow-hidden rounded-2xl relative h-52 w-72 bg-sky-800 p-5 flex flex-col items-start gap-4">
  <div class="text-gray-50">
    <span class="font-bold text-5xl">Jr</span>
    <p class="text-xs">Frontend Developer</p>
  </div>
  <button class="duration-300 hover:bg-sky-900 border hover:text-gray-50 bg-gray-50 font-semibold text-sky-800 px-3 py-2 flex flex-row items-center gap-3">Dowload CV 
    <svg class="w-6 h-6 fill-current" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
 <path d="M22.1,77.9a4,4,0,0,1,4-4H73.9a4,4,0,0,1,0,8H26.1A4,4,0,0,1,22.1,77.9ZM35.2,47.2a4,4,0,0,1,5.7,0L46,52.3V22.1a4,4,0,1,1,8,0V52.3l5.1-5.1a4,4,0,0,1,5.7,0,4,4,0,0,1,0,5.6l-12,12a3.9,3.9,0,0,1-5.6,0l-12-12A4,4,0,0,1,35.2,47.2Z" fill-rule="evenodd">
 </path>
</svg>
  </button>

  <svg class="group-hover:scale-125 duration-500 absolute -bottom-0.5 -right-20 w-48 h-48 z-10 -my-2  fill-gray-50 stroke-sky-900" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path data-name="layer1" d="M 50.4 51 C 40.5 49.1 40 46 40 44 v -1.2 a 18.9 18.9 0 0 0 5.7 -8.8 h 0.1 c 3 0 3.8 -6.3 3.8 -7.3 s 0.1 -4.7 -3 -4.7 C 53 4 30 0 22.3 6 c -5.4 0 -5.9 8 -3.9 16 c -3.1 0 -3 3.8 -3 4.7 s 0.7 7.3 3.8 7.3 c 1 3.6 2.3 6.9 4.7 9 v 1.2 c 0 2 0.5 5 -9.5 6.8 S 2 62 2 62 h 60 a 14.6 14.6 0 0 0 -11.6 -11 z" stroke-miterlimit="10" stroke-width="5"></path></svg>

  <svg class="group-hover:scale-125 duration-200 absolute -bottom-0.5 -right-20 w-48 h-48 z-10 -my-2  fill-gray-50 stroke-sky-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path data-name="layer1" d="M 50.4 51 C 40.5 49.1 40 46 40 44 v -1.2 a 18.9 18.9 0 0 0 5.7 -8.8 h 0.1 c 3 0 3.8 -6.3 3.8 -7.3 s 0.1 -4.7 -3 -4.7 C 53 4 30 0 22.3 6 c -5.4 0 -5.9 8 -3.9 16 c -3.1 0 -3 3.8 -3 4.7 s 0.7 7.3 3.8 7.3 c 1 3.6 2.3 6.9 4.7 9 v 1.2 c 0 2 0.5 5 -9.5 6.8 S 2 62 2 62 h 60 a 14.6 14.6 0 0 0 -11.6 -11 z" stroke-miterlimit="10" stroke-width="2"></path></svg>

  
</div>



================================================
FILE: Cards/Javierrocadev_cowardly-starfish-70.html
================================================
<div class="card">
  <div class="up">
    <svg class="svg-icon" viewBox="0 0 20 20">
							<path d="M16.198,10.896c-0.252,0-0.455,0.203-0.455,0.455v2.396c0,0.626-0.511,1.137-1.138,1.137H5.117c-0.627,0-1.138-0.511-1.138-1.137V7.852c0-0.626,0.511-1.137,1.138-1.137h5.315c0.252,0,0.456-0.203,0.456-0.455c0-0.251-0.204-0.455-0.456-0.455H5.117c-1.129,0-2.049,0.918-2.049,2.047v5.894c0,1.129,0.92,2.048,2.049,2.048h9.488c1.129,0,2.048-0.919,2.048-2.048v-2.396C16.653,11.099,16.45,10.896,16.198,10.896z"></path>
							<path d="M14.053,4.279c-0.207-0.135-0.492-0.079-0.63,0.133c-0.137,0.211-0.077,0.493,0.134,0.63l1.65,1.073c-4.115,0.62-5.705,4.891-5.774,5.082c-0.084,0.236,0.038,0.495,0.274,0.581c0.052,0.019,0.103,0.027,0.154,0.027c0.186,0,0.361-0.115,0.429-0.301c0.014-0.042,1.538-4.023,5.238-4.482l-1.172,1.799c-0.137,0.21-0.077,0.492,0.134,0.629c0.076,0.05,0.163,0.074,0.248,0.074c0.148,0,0.294-0.073,0.382-0.207l1.738-2.671c0.066-0.101,0.09-0.224,0.064-0.343c-0.025-0.118-0.096-0.221-0.197-0.287L14.053,4.279z"></path>
						</svg>
		<div class="right">
						 <svg class="svg-icon" viewBox="0 0 20 20">
							<path d="M10.032,8.367c-1.112,0-2.016,0.905-2.016,2.018c0,1.111,0.904,2.014,2.016,2.014c1.111,0,2.014-0.902,2.014-2.014C12.046,9.271,11.143,8.367,10.032,8.367z M10.032,11.336c-0.525,0-0.953-0.427-0.953-0.951c0-0.526,0.427-0.955,0.953-0.955c0.524,0,0.951,0.429,0.951,0.955C10.982,10.909,10.556,11.336,10.032,11.336z"></path>
							<path d="M17.279,8.257h-0.785c-0.107-0.322-0.237-0.635-0.391-0.938l0.555-0.556c0.208-0.208,0.208-0.544,0-0.751l-2.254-2.257c-0.199-0.2-0.552-0.2-0.752,0l-0.556,0.557c-0.304-0.153-0.617-0.284-0.939-0.392V3.135c0-0.294-0.236-0.532-0.531-0.532H8.435c-0.293,0-0.531,0.237-0.531,0.532v0.784C7.582,4.027,7.269,4.158,6.966,4.311L6.409,3.754c-0.1-0.1-0.234-0.155-0.376-0.155c-0.141,0-0.275,0.055-0.375,0.155L3.403,6.011c-0.208,0.207-0.208,0.543,0,0.751l0.556,0.556C3.804,7.622,3.673,7.935,3.567,8.257H2.782c-0.294,0-0.531,0.238-0.531,0.531v3.19c0,0.295,0.237,0.531,0.531,0.531h0.787c0.105,0.318,0.236,0.631,0.391,0.938l-0.556,0.559c-0.208,0.207-0.208,0.545,0,0.752l2.254,2.254c0.208,0.207,0.544,0.207,0.751,0l0.558-0.559c0.303,0.154,0.616,0.285,0.938,0.391v0.787c0,0.293,0.238,0.531,0.531,0.531h3.191c0.295,0,0.531-0.238,0.531-0.531v-0.787c0.322-0.105,0.636-0.236,0.938-0.391l0.56,0.559c0.208,0.205,0.546,0.207,0.752,0l2.252-2.254c0.208-0.207,0.208-0.545,0.002-0.752l-0.559-0.559c0.153-0.303,0.285-0.615,0.389-0.938h0.789c0.295,0,0.532-0.236,0.532-0.531v-3.19C17.812,8.495,17.574,8.257,17.279,8.257z M16.747,11.447h-0.653c-0.241,0-0.453,0.164-0.514,0.398c-0.129,0.496-0.329,0.977-0.594,1.426c-0.121,0.209-0.089,0.473,0.083,0.645l0.463,0.465l-1.502,1.504l-0.465-0.463c-0.174-0.174-0.438-0.207-0.646-0.082c-0.447,0.262-0.927,0.463-1.427,0.594c-0.234,0.061-0.397,0.271-0.397,0.514V17.1H8.967v-0.652c0-0.242-0.164-0.453-0.397-0.514c-0.5-0.131-0.98-0.332-1.428-0.594c-0.207-0.123-0.472-0.09-0.646,0.082l-0.463,0.463L4.53,14.381l0.461-0.463c0.169-0.172,0.204-0.434,0.083-0.643c-0.266-0.461-0.467-0.939-0.596-1.43c-0.06-0.234-0.272-0.398-0.514-0.398H3.313V9.319h0.652c0.241,0,0.454-0.162,0.514-0.397c0.131-0.498,0.33-0.979,0.595-1.43c0.122-0.208,0.088-0.473-0.083-0.645L4.53,6.386l1.503-1.504l0.46,0.462c0.173,0.172,0.437,0.204,0.646,0.083c0.45-0.265,0.931-0.464,1.433-0.597c0.233-0.062,0.396-0.274,0.396-0.514V3.667h2.128v0.649c0,0.24,0.161,0.452,0.396,0.514c0.502,0.133,0.982,0.333,1.433,0.597c0.211,0.12,0.475,0.089,0.646-0.083l0.459-0.462l1.504,1.504l-0.463,0.463c-0.17,0.171-0.202,0.438-0.081,0.646c0.263,0.448,0.463,0.928,0.594,1.427c0.061,0.235,0.272,0.397,0.514,0.397h0.651V11.447z"></path>
						</svg>
    	<svg class="svg-icon" viewBox="0 0 20 20">
							<path d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>
			</svg>
		</div>       
  </div>
	<div class="playbar">
		<div class="bar"></div>	
	</div>
	<div class="down">
		<div class="down__icons">
			<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon pause" viewBox="0 0 16 16"> <path d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z"></path> </svg>

			<svg class="svg-icon" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
			<path d="M24.7,29.4a4.6,4.6,0,0,0-4.4-.2A4.5,4.5,0,0,0,18.1,33V67a4.5,4.5,0,0,0,2.2,3.8,4.6,4.6,0,0,0,4.4-.2L47.9,55.1V67a4.3,4.3,0,0,0,2.2,3.8,4.6,4.6,0,0,0,4.4-.2L80,53.5a4.2,4.2,0,0,0,0-7L54.5,29.4a4.6,4.6,0,0,0-4.4-.2A4.3,4.3,0,0,0,47.9,33V44.9Z">
			</path>
			</svg>
			
			<svg class="svg-icon" viewBox="0 0 20 20">
								<path d="M9.344,2.593c-0.253-0.104-0.547-0.045-0.743,0.15L4.486,6.887H1.313c-0.377,0-0.681,0.305-0.681,0.681v4.916c0,0.377,0.304,0.681,0.681,0.681h3.154l4.137,4.142c0.13,0.132,0.304,0.201,0.482,0.201c0.088,0,0.176-0.017,0.261-0.052c0.254-0.105,0.42-0.354,0.42-0.629L9.765,3.224C9.765,2.947,9.599,2.699,9.344,2.593z M5.233,12.003c-0.128-0.127-0.302-0.2-0.483-0.2H1.994V8.249h2.774c0.182,0,0.355-0.072,0.483-0.201l3.151-3.173l0.001,10.305L5.233,12.003z"></path>
								<path d="M16.434,10.007c0-2.553-1.518-4.853-3.869-5.858C12.223,4,11.821,4.16,11.672,4.506c-0.148,0.346,0.013,0.746,0.359,0.894c1.846,0.793,3.041,2.6,3.041,4.608c0,1.997-1.188,3.799-3.025,4.592c-0.346,0.149-0.505,0.551-0.356,0.895c0.112,0.258,0.362,0.411,0.625,0.411c0.091,0,0.181-0.017,0.269-0.056C14.922,14.843,16.434,12.548,16.434,10.007z"></path>
								<path d="M13.418,10.005c0-1.349-0.802-2.559-2.042-3.086c-0.346-0.144-0.745,0.015-0.894,0.362c-0.146,0.346,0.016,0.745,0.362,0.893c0.737,0.312,1.212,1.031,1.212,1.832c0,0.792-0.471,1.509-1.2,1.825c-0.345,0.149-0.504,0.551-0.352,0.895c0.112,0.257,0.362,0.41,0.625,0.41c0.091,0,0.181-0.017,0.27-0.057C12.625,12.545,13.418,11.339,13.418,10.005z"></path>
								<path d="M13.724,1.453c-0.345-0.15-0.746,0.012-0.895,0.358c-0.148,0.346,0.013,0.745,0.358,0.894c2.928,1.256,4.819,4.122,4.819,7.303c0,3.171-1.886,6.031-4.802,7.289c-0.346,0.149-0.505,0.55-0.356,0.894c0.112,0.258,0.362,0.412,0.626,0.412c0.09,0,0.181-0.019,0.269-0.056c3.419-1.474,5.626-4.826,5.626-8.54C19.368,6.282,17.152,2.923,13.724,1.453z"></path>
			</svg>
		</div>
		<p class="time">12:23 / 15:43</p>
	</div>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: youtube, card, video, pause, play, music, card hover, button hover effect  */
.card {
  width: 350px;
  height: 225px;
  background: rgba(114,113,114);
  border-radius: 15px;
  padding: 10px;
  color: white;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0px 0px 1px black;
  transition: all .2s ease-in;
}

.card::after {
  content: "hover video";
  font-size: 1.4em;
  font-weight: 800;
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%,-50%);
}

.up {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.up .right {
  display: flex;
  gap: 20px;
}

.playbar {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: end;
}

.bar {
  width: 340px;
  height: 8px;
  margin-bottom: 8px;
  background-color: rgba(170, 163, 163, 0.356);
}

.bar::after {
  content: "";
  width: 10px;
  height: 8px;
  position: absolute;
  background: rgb(167, 57, 57);
  animation: example 25s ease;
}

.down {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.down__icons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.pause {
  width: 50px;
  height: 50px;
  fill: rgb(241, 239, 239);
}

.time {
  font-size: .85em;
}

.svg-icon {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 50%;
  ;
  fill: rgb(241, 239, 239);
}

.card * {
  opacity: 0;
  transition: all .2s ease-in;
}

.card:hover * {
  opacity: 1;
}

.card:hover {
  box-shadow: inset 0px 10px 36px -13px rgba(0,0,0,0.75);
}

.svg-icon:hover {
  background-color: rgba(3, 5, 5, 0.5);
}

@keyframes example {
  0% {
    width: 0px;
  }

  100% {
    width: 330px;
  }
}

</style>


================================================
FILE: Cards/Javierrocadev_curly-wolverine-36.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: blue, card, svg, hover button, card template -->
<div class="relative w-60 h-80 bg-gray-50 rounded-2xl p-4  shadow shadow-sky-800 flex flex-col justify-around items-stretch">
  <svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="stroke-blue-400 w-12 h-12 p-1 bg-sky-100 rounded-2xl">
    <path stroke-width="8" stroke-linejoin="round" stroke-linecap="round" fill="none" d="M60.7,25v7.2m0,14.2v7.2m0,14.2V75M25,25a7.1,7.1,0,0,0-7.1,7.2V42.9a7.1,7.1,0,1,1,0,14.2V67.8A7.1,7.1,0,0,0,25,75H75a7.1,7.1,0,0,0,7.1-7.2V57.1a7.1,7.1,0,1,1,0-14.2V32.2A7.1,7.1,0,0,0,75,25Z">
    </path>
  </svg>
  <span class="text-blue-400 font-semibold text-xl">Continue payment</span>
  <p class="text-base text-gray-600">Wait! you have NOT finished your purchase, do you want to continue? </p>
  <div class="flex flex-col gap-2">
    <button class="border-2 border-blue-400 bg-blue-400 py-1 rounded text-gray-50 hover:bg-blue-300">Continue</button>
    <button class="border-2 border-blue-400 py-1 rounded hover:bg-gray-100">See more films</button>
  </div>
  <div class="absolute top-3 right-2  text-red-300 hover:text-red-500">
    <svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="w-12 h-12 fill-current">
    <path fill-rule="evenodd" d="M50,87.4A37.4,37.4,0,1,0,12.6,50,37.3,37.3,0,0,0,50,87.4ZM44,37.3A4.7,4.7,0,0,0,37.3,44l6.1,6-6.1,6A4.7,4.7,0,0,0,44,62.7l6-6.1,6,6.1A4.7,4.7,0,0,0,62.7,56l-6.1-6,6.1-6A4.7,4.7,0,0,0,56,37.3l-6,6.1Z">
    </path>
    </svg>

  </div>
</div>



================================================
FILE: Cards/Javierrocadev_dull-frog-65.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: 3d, minimalist, card, hover, shadow, light&dark, box-shadow, card hover -->
<div
  class="relative rounded-lg -skew-x-6 -translate-y-2 -translate-y-6 hover:-translate-y-1 hover:-translate-x-0 hover:skew-x-0 duration-500 w-72 h-44 p-2 bg-neutral-50 card-compact hover:bg-base-200 transition-all duration-200 [box-shadow:12px_12px] hover:[box-shadow:4px_4px]"
>
  <figure class="w-full h-full">
    <div
      alt="change to a img tag"
      class="bg-neutral-800 text-neutral-50 min-h-full rounded-lg border border-opacity-5"
    ></div>
  </figure>
  <div class="absolute text-neutral-50 bottom-4 left-0 px-4">
    <span class="font-bold">Tittle</span>
    <p class="text-sm opacity-60 line-clamp-2">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget
      feugiat orci. Curabitur efficitur elit arcu, a luctus sapien luctus ut.
    </p>
  </div>
</div>


    

================================================
FILE: Cards/Javierrocadev_fast-panther-65.html
================================================
<div class="card">
  <span>In this article</span>
  <div class="card__container">
   <p class="element">Try it</p> 
   <p class="element">Syntax</p> 
   <p class="element active">Formal definition</p> 
   <p class="element">Formal syntax</p> 
   <p class="element">Examples</p> 
   <p class="element">See also</p> 
  </div>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: list, blue, card, hover, dark, hover effect, card hover, mozilla */
.card {
  width: 250px;
  height: 290px;
  border-radius: 15px;
  background: rgb(27, 26, 26);
  color: white;
  font-weight: 600;
  font-size: 1.2em;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: -5px 5px 1px 0px #004d92;
}

.element {
  color: grey;
  font-size: .8em;
  padding: 6px 15px;
  border-left: 2px solid grey;
  cursor: pointer;
}

.active {
  background-color: #004d92;
  border-left: 2px solid #8cb4ff;
  color: azure;
}

.element:hover:not(.active) {
  color: #3775bb;
}
</style>


================================================
FILE: Cards/Javierrocadev_fluffy-stingray-76.html
================================================
<div class="card">
  <span class="text">Go!</span>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: card, box-shadow */
.card {
  width: 150px;
  height: 150px;
  background: #a53c3c;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 3em;
  font-weight: 900;
  color: aliceblue;
  transition: all .5s ease-in-out;
}

.text {
  transition: all 0.3s ease-in-out;
}

.card:hover {
  box-shadow: 75px 75px 5px -20px #bf5e37, -75px 75px 5px -20px #d08432, -75px -75px 5px -20px #bf5e37 , 75px -75px 5px -20px #d08432;
  transform: rotate(-45deg);
}

.card:hover .text {
  transform: rotate(45deg);
}
</style>


================================================
FILE: Cards/Javierrocadev_funny-cobra-5.html
================================================
<div class="uno-card">
  <div class="card-inner">
    <div class="front">
      <div class="front-bg"></div>
    </div>
    <div class="back">
      <div class="back-bg">
        <p class="uno">UNO</p>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Javierrocadev  - Tags: card, hover, flip, game, hover effect, css effect, uno */
.uno-card {
  background-color: transparent;
  width: 190px;
  height: 260px;
  perspective: 1000px;
  transform-origin: top left;
  border-radius: 15px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1.1s;
  transform-style: preserve-3d;
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.uno-card:hover .card-inner {
  transform: rotateY(180deg) rotate(25deg);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.front {
  background-color: #fff;
  color: black;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.front::after {
  content: "1";
  color: #C90522;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4em;
  font-weight: 900;
  width: 170px;
  height: 180px;
  background-color: #ffffff;
  border: 5px solid white;
  border-radius: 850px 150px 850px 150px;
  position: absolute;
  text-shadow: -1px 1px 0 #191F1F,-2px 2px 0 #191F1F,-3px 3px 0 #191F1F,-4px 4px 0 #191F1F,-5px 5px 0 #191F1F,-6px 6px 0 #191F1F,-7px 7px 0 #191F1F,-8px 8px 0 #191F1F,-9px 9px 0 #191F1F;
}

.front-bg {
  width: 90%;
  height: 90%;
  background: #C90522;
  border-radius: 15px;
}

.front-bg::after {
  content: "1";
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 2em;
  color: white;
  font-weight: 900;
  text-shadow: -1px 1px 0 #191F1F,-2px 2px 0 #191F1F,-3px 3px 0 #191F1F,-4px 4px 0 #191F1F,-5px 5px 0 #191F1F;
}

.front-bg::before {
  content: "1";
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 2em;
  color: white;
  font-weight: 900;
  text-shadow: -1px 1px 0 #191F1F,-2px 2px 0 #191F1F,-3px 3px 0 #191F1F,-4px 4px 0 #191F1F,-5px 5px 0 #191F1F;
}

.back {
  background-color: #fff;
  color: white;
  transform: rotateY(180deg);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-bg::before {
  content: "";
  width: 170px;
  height: 180px;
  background-color: #C90522;
  border-radius: 850px 150px 850px 150px;
  position: absolute;
}

.back-bg {
  width: 90%;
  height: 90%;
  background: #191F1F;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uno {
  color: #E5CA22;
  font-size: 5em;
  font-weight: 900;
  letter-spacing: -5px;
  transform: rotate(-25deg);
  text-shadow: -1px 1px 0 #191F1F,-2px 2px 0 #191F1F,-3px 3px 0 #191F1F,-4px 4px 0 #191F1F,-5px 5px 0 #191F1F,-6px 6px 0 #191F1F,-7px 7px 0 #191F1F,-8px 8px 0 #191F1F,-9px 9px 0 #191F1F,-10px 10px 0 #fff,-11px 11px 0 #fff;
}
</style>
    

================================================
FILE: Cards/Javierrocadev_good-sheep-89.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: card, hover, rotate, hover effect, card hover -->
<div class="relative duration-500 [transform:rotate3d(20_,-10,_1,_60deg)]  hover:-rotate-0  group border border-sky-900 border-4  overflow-hidden rounded-2xl relative h-52 w-72 bg-sky-800 p-5 flex flex-col items-start gap-4">
  <div class="text-gray-50">
    <span class="font-bold text-5xl">Jr</span>
    <p class="text-xs">Frontend Developer</p>
  </div>
  <button class="duration-300 hover:bg-sky-900 border hover:text-gray-50 bg-gray-50 font-semibold text-sky-800 px-3 py-2 flex flex-row items-center gap-3">Dowload CV 
    <svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="w-6 h-6 fill-current">
 <path fill-rule="evenodd" d="M22.1,77.9a4,4,0,0,1,4-4H73.9a4,4,0,0,1,0,8H26.1A4,4,0,0,1,22.1,77.9ZM35.2,47.2a4,4,0,0,1,5.7,0L46,52.3V22.1a4,4,0,1,1,8,0V52.3l5.1-5.1a4,4,0,0,1,5.7,0,4,4,0,0,1,0,5.6l-12,12a3.9,3.9,0,0,1-5.6,0l-12-12A4,4,0,0,1,35.2,47.2Z">
 </path>
</svg>
  </button>

  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" class="group-hover:scale-125 duration-500 absolute -bottom-0.5 -right-20 w-48 h-48 z-10 -my-2  fill-gray-50 stroke-sky-900"><path stroke-width="5" stroke-miterlimit="10" d="M 50.4 51 C 40.5 49.1 40 46 40 44 v -1.2 a 18.9 18.9 0 0 0 5.7 -8.8 h 0.1 c 3 0 3.8 -6.3 3.8 -7.3 s 0.1 -4.7 -3 -4.7 C 53 4 30 0 22.3 6 c -5.4 0 -5.9 8 -3.9 16 c -3.1 0 -3 3.8 -3 4.7 s 0.7 7.3 3.8 7.3 c 1 3.6 2.3 6.9 4.7 9 v 1.2 c 0 2 0.5 5 -9.5 6.8 S 2 62 2 62 h 60 a 14.6 14.6 0 0 0 -11.6 -11 z" data-name="layer1"></path></svg>

  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" class="group-hover:scale-125 duration-200 absolute -bottom-0.5 -right-20 w-48 h-48 z-10 -my-2  fill-gray-50 stroke-sky-700"><path stroke-width="2" stroke-miterlimit="10" d="M 50.4 51 C 40.5 49.1 40 46 40 44 v -1.2 a 18.9 18.9 0 0 0 5.7 -8.8 h 0.1 c 3 0 3.8 -6.3 3.8 -7.3 s 0.1 -4.7 -3 -4.7 C 53 4 30 0 22.3 6 c -5.4 0 -5.9 8 -3.9 16 c -3.1 0 -3 3.8 -3 4.7 s 0.7 7.3 3.8 7.3 c 1 3.6 2.3 6.9 4.7 9 v 1.2 c 0 2 0.5 5 -9.5 6.8 S 2 62 2 62 h 60 a 14.6 14.6 0 0 0 -11.6 -11 z" data-name="layer1"></path></svg>

  
</div>



================================================
FILE: Cards/Javierrocadev_great-swan-88.html
================================================
<div class="container">
  <div class="data">
    <p>34° 36' 30″ S; 58° 22' 16″ O</p>
  </div>
  <div class="card">
    <div class="circle"></div>
    <div class="dot"></div>
    <div class="dot2"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: green, black, card */
.container {
  width: 280px;
  height: 380px;
  background-color: #151716;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  filter: hue-rotate(10deg);
  color: #2fbb39;
  gap: 20px;
}

.data {
  margin-top: 25px;
  border: 2px solid;
  padding: 15px;
  border-radius: 5px;
  background: #000000;
}

.data::after {
  background: #000000;
  content: "WIND - 54,3";
  position: absolute;
  bottom: 5%;
  right: 5%;
  border: 2px solid;
  padding: 3px;
  border-radius: 5px;
  font-size: .7em;
}

.data::before {
  content: "DEPT - 600";
  position: absolute;
  bottom: 5%;
  left: 5%;
  border: 2px solid;
  padding: 3px;
  border-radius: 5px;
  font-size: .7em;
  background: #000000;
}

.card {
  width: 200px;
  height: 200px;
  background: #000000;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #18D322;
  overflow: hidden;
}

.card::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 200px;
  left: 49%;
  background-color: #18D322;
  animation: rotate 3s linear infinite;
  z-index: 6;
}

.card::before {
  content: "";
  position: absolute;
  width: 0px;
  height: 200px;
  left: 49%;
  transform: rotate(-4deg);
  background-color: #18D322;
  animation: rotate 3s linear infinite;
  box-shadow: 0 0 10px 10px #2fbb39;
  z-index: 6;
}

.circle {
  width: 100px;
  height: 100px;
  border: 2px solid #18D322;
  border-radius: 50%;
}

.circle::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 2px solid #18D322;
  border-radius: 50%;
}

.circle::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 2px solid #18D322;
  border-radius: 50%;
}

.dot {
  width: 4px;
  height: 4px;
  top: 30%;
  background-color: #18D322;
  border-radius: 50%;
  position: absolute;
  animation: doted 1.5s  ease infinite;
}

.dot2 {
  width: 4px;
  height: 4px;
  top: 80%;
  right: 30%;
  background-color: #18D322;
  border-radius: 50%;
  position: absolute;
  animation: doted 1.5s  1.2s ease infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes doted {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 10px 5px rgba(24, 211, 33, 0.3),0 0 10px 10px rgba(24, 211, 33, 0.3);
  }

  60% {
    transform: scale(0.95);
    box-shadow: 0 0 10px 5px rgba(24, 211, 33, 0.3),0 0 10px 10px rgba(24, 211, 33, 0.3);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(24, 211, 33, 0.7),0 0 0 0 rgba(24, 211, 33, 0.5),0 0 0 0 rgba(24, 211, 33, 0.3);
    opacity: 0;
  }
}
</style>


================================================
FILE: Cards/Javierrocadev_happy-newt-18.html
================================================
<div class="card">
  <p class="title">Who to follow</p>
  <div class="user__container">
    <div class="user">
      <div class="image"></div>
      <div class="user__content">
        <div class="text">
          <span class="name">Name</span>
          <p class="username">@namedlorem</p>
        </div>
        <button class="follow">Follow</button>
      </div>
      
    </div> 
    <div class="user">
      <div class="image"></div>
      <div class="user__content">
        <div class="text">
          <span class="name">Name</span>
          <p class="username">@namedlorem</p>
        </div>
        <button class="follow">Follow</button>
      </div>
      
    </div> 
    <div class="user">
      <div class="image"></div>
      <div class="user__content">
        <div class="text">
          <span class="name">Name</span>
          <p class="username">@namedlorem</p>
        </div>
        <button class="follow">Follow</button>
      </div>
      
    </div> 

  </div>
  <a class="more" href="#">See more</a>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Source: twitter.com - Tags: twitter, card, card hover */
.card {
  width: 350px;
  height: 350px;
  background: #E8EAEA;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title, .more {
  padding: 10px 15px;
}

.user {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
}

.user__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}

.user__container {
  display: flex;
  flex-direction: column;
}

.title {
  font-weight: 900;
  font-size: 1.3em;
}

.name {
  font-weight: 800;
}

.username {
  font-size: .9em;
  color: #64696e;
}

.image {
  width: 60px;
  height: 60px;
  background: rgb(22,19,70);
  background: linear-gradient(295deg, rgba(22,19,70,1) 41%, rgba(89,177,237,1) 100%);
  border-radius: 50%;
  margin-right: 15px;
}

.follow {
  border: none;
  border-radius: 25px;
  background-color: #0f1113;
  color: white;
  padding: 8px 15px;
  font-weight: 700;
}

.more {
  display: block;
  text-decoration: none;
  color: rgb(29, 155, 240);
  font-weight: 800;
}

.user:hover {
  background-color: #b3b6b6;
}

.more:hover {
  background-color: #b3b6b6;
  border-radius: 0px 0px 15px 15px;
}

.follow:hover {
  background-color: #2c3136;
}
</style>


================================================
FILE: Cards/Javierrocadev_itchy-warthog-55.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: card, hover, blur filter, hover effect, hoverme, hover button, cardhover , card hover -->
<div
  class="w-96 h-64 duration-500 group overflow-hidden relative rounded bg-neutral-800 text-neutral-50 p-4 flex flex-col justify-evenly"
>
  <div
    class="absolute blur duration-500 group-hover:blur-none w-72 h-72 rounded-full group-hover:translate-x-12 group-hover:translate-y-12 bg-sky-900 right-1 -bottom-24"
  ></div>
  <div
    class="absolute blur duration-500 group-hover:blur-none w-12 h-12 rounded-full group-hover:translate-x-12 group-hover:translate-y-2 bg-indigo-700 right-12 bottom-12"
  ></div>
  <div
    class="absolute blur duration-500 group-hover:blur-none w-36 h-36 rounded-full group-hover:translate-x-12 group-hover:-translate-y-12 bg-indigo-800 right-1 -top-12"
  ></div>
  <div
    class="absolute blur duration-500 group-hover:blur-none w-24 h-24 bg-sky-700 rounded-full group-hover:-translate-x-12"
  ></div>
  <div class="z-10 flex flex-col justify-evenly w-full h-full">
    <span class="text-2xl font-bold">Text title</span>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat
      felis nec rutrum vulputate. Morbi ut lobortis enim. Nam nec elit nibh.
    </p>
    <button
      class="hover:bg-neutral-200 bg-neutral-50 rounded text-neutral-800 font-extrabold w-full p-3"
    >
      See more
    </button>
  </div>
</div>


    

================================================
FILE: Cards/Javierrocadev_jolly-chipmunk-45.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: card, hover, rotate, hover effect, hover button, card hover -->
<div class="relative duration-500  hover:-rotate-0   group [transform:rotate3d(1_,-1,_1,_60deg)] border border-sky-900 border-4  overflow-hidden rounded-2xl relative h-96 w-64 bg-sky-800 p-5 flex flex-col items-start gap-4">
  <div class="text-gray-50">
    <span class="font-bold text-5xl">Jr</span>
    <p class="text-xs">Frontend Developer</p>
  </div>
  <button class="duration-300 hover:bg-sky-900 border hover:text-gray-50 bg-gray-50 font-semibold text-sky-800 px-3 py-2 flex flex-row items-center gap-3">Dowload CV 
    <svg class="w-6 h-6 fill-current" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
 <path d="M22.1,77.9a4,4,0,0,1,4-4H73.9a4,4,0,0,1,0,8H26.1A4,4,0,0,1,22.1,77.9ZM35.2,47.2a4,4,0,0,1,5.7,0L46,52.3V22.1a4,4,0,1,1,8,0V52.3l5.1-5.1a4,4,0,0,1,5.7,0,4,4,0,0,1,0,5.6l-12,12a3.9,3.9,0,0,1-5.6,0l-12-12A4,4,0,0,1,35.2,47.2Z" fill-rule="evenodd">
 </path>
</svg>
  </button>

  <svg class="group-hover:scale-125 duration-500 absolute -bottom-0.5 -right-20 w-48 h-48 z-10 -my-2  fill-gray-50 stroke-sky-900" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path data-name="layer1" d="M 50.4 51 C 40.5 49.1 40 46 40 44 v -1.2 a 18.9 18.9 0 0 0 5.7 -8.8 h 0.1 c 3 0 3.8 -6.3 3.8 -7.3 s 0.1 -4.7 -3 -4.7 C 53 4 30 0 22.3 6 c -5.4 0 -5.9 8 -3.9 16 c -3.1 0 -3 3.8 -3 4.7 s 0.7 7.3 3.8 7.3 c 1 3.6 2.3 6.9 4.7 9 v 1.2 c 0 2 0.5 5 -9.5 6.8 S 2 62 2 62 h 60 a 14.6 14.6 0 0 0 -11.6 -11 z" stroke-miterlimit="10" stroke-width="5"></path></svg>

  <svg class="group-hover:scale-125 duration-200 absolute -bottom-0.5 -right-20 w-48 h-48 z-10 -my-2  fill-gray-50 stroke-sky-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path data-name="layer1" d="M 50.4 51 C 40.5 49.1 40 46 40 44 v -1.2 a 18.9 18.9 0 0 0 5.7 -8.8 h 0.1 c 3 0 3.8 -6.3 3.8 -7.3 s 0.1 -4.7 -3 -4.7 C 53 4 30 0 22.3 6 c -5.4 0 -5.9 8 -3.9 16 c -3.1 0 -3 3.8 -3 4.7 s 0.7 7.3 3.8 7.3 c 1 3.6 2.3 6.9 4.7 9 v 1.2 c 0 2 0.5 5 -9.5 6.8 S 2 62 2 62 h 60 a 14.6 14.6 0 0 0 -11.6 -11 z" stroke-miterlimit="10" stroke-width="2"></path></svg>

  
</div>



================================================
FILE: Cards/Javierrocadev_lazy-shrimp-49.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: blue, card, blur filter, cardhover , tailwind -->
<div class="bg-sky-700 rounded-2xl shadow-sm shadow-sky-500">
<div class="group overflow-hidden relative after:duration-500 before:duration-500  duration-500 hover:after:duration-500 hover:after:translate-x-24 hover:before:translate-y-12 hover:before:-translate-x-32 hover:duration-500 after:absolute after:w-24 after:h-24 after:bg-sky-700 after:rounded-full  after:blur-xl after:bottom-32 after:right-16 after:w-12 after:h-12  before:absolute before:w-20 before:h-20 before:bg-sky-400 before:rounded-full  before:blur-xl before:top-20 before:right-16 before:w-12 before:h-12  hover:rotate-12 flex justify-center items-center h-56 w-80 origin-bottom-right bg-neutral-900 rounded-2xl outline outline-slate-400 -outline-offset-8">
  <div class="z-10 flex flex-col items-center gap-2">
    <span class="text-slate-400 text-6xl font-bold">JR </span>
    <p class="text-gray-50">Frontend developer</p>
  </div>
</div>
</div>




================================================
FILE: Cards/Javierrocadev_loud-dragon-12.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: card, hover, hover effect, hoverme, cardhover , card animation, card hover, tailwind -->
<div
  class="relative group cursor-pointer overflow-hidden duration-500 w-64 h-80 bg-zinc-800 text-gray-50 p-5"
>
  <div class="">
    <div
      class="group-hover:scale-110 w-full h-60 bg-blue-400 duration-500"
    ></div>
    <div
      class="absolute w-56 left-0 p-5 -bottom-16 duration-500 group-hover:-translate-y-12"
    >
      <div
        class="absolute -z-10 left-0 w-64 h-28 opacity-0 duration-500 group-hover:opacity-50 group-hover:bg-blue-900"
      ></div>
      <span class="text-xl font-bold">Hover me!</span>
      <p class="group-hover:opacity-100 w-56 duration-500 opacity-0">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/Javierrocadev_lovely-panther-15.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: minimalist, card, hover, light, hover effect, hover button, card hover, tailwind -->
<div
  class="group flex flex-col justify-start items-start gap-2 w-96 h-56 duration-500 relative rounded-lg p-4 bg-gray-100 hover:-translate-y-2 hover:shadow-xl shadow-gray-300"
>
  <div
    class="absolute duration-700 shadow-md group-hover:-translate-y-4 group-hover:-translate-x-4 -bottom-10 -right-10 w-1/2 h-1/2 rounded-lg bg-gray-200"
    alt="image here"
  ></div>

  <div class="">
    <h2 class="text-2xl font-bold mb-2 text-gray-800">Card</h2>
    <p class="text-gray-700 line-clamp-3">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis
      magna quis lectus fermentum, quis scelerisque orci pellentesque. Duis id
      porta justo. Sed ac enim id justo tincidunt hendrerit id ac lectus.
      Pellentesque maximus posuere tortor vitae consequat.
    </p>
  </div>
  <button
    class="hover:bg-gray-300 bg-gray-200 text-gray-800 mt-6 rounded p-2 px-6"
  >
    Explore
  </button>
</div>


    

================================================
FILE: Cards/Javierrocadev_modern-dragon-29.html
================================================
<div class="card">
  <div class="card__content">
    <span>Honey</span>
    <svg class="svg-icon" height="100" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
 <path class="svg-fill-primary" d="M56.493,56.709c-1.563-1.599-3-3.458-4.257-5.559-2.03,.234-3.916,.144-5.38-.036-1.15,1.895-2.488,3.853-3.988,5.667,1.32,.323,3.799,.799,6.835,.799,2.066,0,4.392-.225,6.79-.871Z" opacity=".5">
 </path>
 <path class="svg-icon" d="M64.1,62.169c-1.742-.799-3.476-1.868-5.128-3.197h-.009c-9.574,3-15.394,1.051-17.172,.26-.081-.458-.126-.808-.153-1.024-.189,.216-.386,.431-.593,.638-1.374,1.446-2.874,2.739-4.464,3.736-.153,.099-.305,.189-.458,.278,1.257,5.119,4.437,13.436,12.268,17.567,.458,.242,.961,.359,1.473,.359,.323,0,.656-.045,.979-.153,.485-.162,11.11-3.817,13.939-18.169-.234-.09-.458-.189-.683-.296Zm-14.038,11.936c-2.919-1.976-4.859-4.913-6.125-7.742,1.518,.287,3.314,.485,5.371,.485,2.299,0,4.922-.243,7.859-.889-2.12,4.868-5.371,7.194-7.104,8.146Z" opacity=".5">
 </path>
 <path class="svg-icon" d="M80.787,47.952c-3.063-6.413-11.119-10.508-14.541-11.478-1.329-.386-2.811-.683-4.518-.907-.278-2.784-1.572-5.272-3.494-7.104,.799-1.769,2.811-3.575,3.889-4.32,1.428-.97,1.796-2.928,.826-4.356-.979-1.437-2.928-1.814-4.365-.835-.53,.359-4.104,2.883-5.937,6.601-.727-.144-1.482-.225-2.254-.225-.736,0-1.455,.072-2.156,.207-1.832-3.709-5.398-6.224-5.919-6.583-1.437-.97-3.377-.602-4.356,.826-.979,1.428-.611,3.386,.808,4.365,1.069,.736,3.027,2.497,3.862,4.239-1.985,1.85-3.323,4.401-3.592,7.257-9.825,1.302-19.31,8.622-20.845,16.391-.97,4.931,1.383,9.152,6.457,11.577,1.599,.763,3.278,1.15,4.967,1.15,1.446,0,2.919-.287,4.365-.844,.727-.287,1.446-.638,2.138-1.051,.153-.09,.305-.18,.458-.278,1.59-.997,3.09-2.29,4.464-3.736,.207-.207,.404-.422,.593-.638,.431-.467,.835-.943,1.23-1.428,1.5-1.814,2.838-3.772,3.988-5.667,.656-1.069,1.257-2.12,1.787-3.116,.386-.719,.745-1.401,1.069-2.048,.287,.745,.593,1.473,.925,2.173,.485,1.06,1.024,2.066,1.599,3.027,1.257,2.102,2.694,3.961,4.257,5.559,.799,.826,1.626,1.581,2.47,2.254v.009h.009c1.653,1.329,3.386,2.398,5.128,3.197,.225,.108,.449,.207,.683,.296,1.769,.736,3.539,1.195,5.245,1.347,5.092,.476,9.206-1.751,10.993-5.964,1.383-3.26,1.302-6.682-.233-9.897Zm-37.856-2.614c-2.802,5.092-6.934,11.038-11.236,12.708-1.536,.602-2.91,.566-4.329-.117-3.215-1.527-3.251-3.413-3-4.688,.916-4.634,8.047-10.535,15.825-11.415,.332-.045,.665-.072,.997-.09,1.293-.072,2.515-.135,3.673-.189-.539,1.141-1.186,2.434-1.931,3.79Zm32.305,10.05c-.88,2.066-3,2.317-4.634,2.164-4.706-.44-10.436-4.455-13.903-11.343-.745-1.482-1.383-3.089-1.886-4.823,2.443,.054,4.311,.189,5.811,.368,1.697,.207,2.91,.485,3.898,.763,2.281,.647,8.577,3.925,10.589,8.146,.772,1.608,.808,3.108,.126,4.724Z">
 </path>
</svg>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
  </div>
   <button class="cart">
      <p>Add to cart</p>
      <svg class="svg-icon" viewBox="0 0 20 20">
							<path d="M18.037,18.517L16.787,4.646c-0.034-0.38-0.355-0.672-0.735-0.672h-2.1c-0.258-1.968-1.93-3.499-3.967-3.499c-2.039,0-3.71,1.531-3.967,3.499H3.921c-0.381,0-0.7,0.291-0.735,0.672L1.915,18.72c-0.02,0.206,0.049,0.411,0.19,0.564c0.138,0.152,0.338,0.241,0.545,0.241h14.67c0.012-0.002,0.02-0.002,0.03,0c0.408,0,0.738-0.331,0.738-0.738C18.088,18.692,18.07,18.601,18.037,18.517z M9.985,1.951c1.225,0,2.25,0.87,2.49,2.023h-4.98C7.735,2.821,8.76,1.951,9.985,1.951zM3.457,18.049l1.139-12.6h10.782l1.135,12.6H3.457z"></path>
						</svg>
   </button>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: card, add to cart */
.card {
  width: 300px;
  height: 300px;
  background: #003566;
  color: white;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid #001d3d;
}

.card::before {
  content: "10%";
  position: absolute;
  width: 100px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -20px;
  left: -20px;
  background-color: red;
  color: white;
  font-weight: 900;
  font-size: 2em;
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  transform: rotate(40deg);
}

.card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  text-align: center;
}

.card__content span {
  font-size: 1.5em;
  font-weight: 900;
}

.cart {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 10px 0px;
  border: none;
  background: #ffd60a;
  color: #003566;
  font-weight: 800;
  transition: all .5s ease;
  cursor: pointer;
}

.svg-icon {
  fill: #ffd60a;
  transition: all .7s ease;
}

.cart .svg-icon {
  fill: blue;
  width: 15px;
}

.cart:hover {
  background: white;
  color: black;
}

.card:hover .card__content svg {
  transform: scale(1.5) rotate(-25deg);
}

</style>


================================================
FILE: Cards/Javierrocadev_nasty-dingo-81.html
================================================
<div class="card">
  <div class="pentagon1"></div>
  <div class="pentagon2"></div>
  <div class="pentagon3"></div>
  <div class="pentagon4"></div>
  <div class="pentagon5"></div>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Source: Javierrocadev - Tags: card, clip-path, shape, card hover, clip path animation */
.card {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card * {
  position: absolute;
}

.pentagon1 {
  width: 250px;
  height: 250px;
  background: #03045e;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  transition: all .3s ease-in-out;
}

.pentagon2 {
  width: 220px;
  height: 220px;
  background: #0077b6;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  transition: all .4s ease-in-out;
}

.pentagon3 {
  width: 190px;
  height: 190px;
  background: #00b4d8;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  transition: all .5s ease-in-out;
}

.pentagon4 {
  width: 160px;
  height: 160px;
  background: #90e0ef;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  transition: all .6s ease-in-out;
}

.pentagon5 {
  width: 130px;
  height: 130px;
  background: #caf0f8;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  transition: all .7s ease-in-out;
}

.card:hover .pentagon1, .card:hover .pentagon2 , .card:hover .pentagon3, .card:hover .pentagon4, .card:hover .pentagon5 {
  transform: rotate(35deg);
}
</style>


================================================
FILE: Cards/Javierrocadev_orange-bulldog-55.html
================================================
<div class="card">

  <div class="card__date">
    <span class="time">14:34</span>
    <span class="date">Mon.,21 August</span>
  </div>
    <div class="popup">
        <p class="title">Software update</p>
        <p>Postponed update</p>
    </div>

</div>
<style>
/* From Uiverse.io by Javierrocadev - Source: Javierrocadev - Tags: phone, card hover, 3d card */
.card {
  width: 164px;
  height: 276px;
  background: rgb(0, 0, 0);
  border: 3px solid rgb(17, 4, 94);
  border-radius: 15px;
  position: relative;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: all 1s ease;
  color: antiquewhite;
}

.card::before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 10px;
  right: 77px;
  border-radius: 50%;
  background-color: rgb(17, 4, 94);
}

.card__date {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.time {
  font-size: 2em;
}

.popup {
  background-color: #444746;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  font-size: .8em;
  padding: 3px;
}

.popup .title {
  font-size: 9px;
  color: #9cbde2;
}

.card__date , .popup {
  opacity: 0;
  transition: all .5s ease;
}

.card:hover {
  transform: rotate3d(5, 5, 10, -45deg);
}

.card:hover .card__date , .card:hover .popup {
  opacity: 1;
}
</style>


================================================
FILE: Cards/Javierrocadev_ordinary-catfish-76.html
================================================
<!-- From Uiverse.io by Javierrocadev - Source: Javierrocadev - Tags: animation, blue, card, realistic, watch, time -->
<div class="before:absolute before:bg-sky-500 before:w-3 before:h-12 before:top-24 before:-right-2 before:-z-10 before:rounded-2xl before:shadow-inner before:shadow-gray-50 relative w-60 h-60 bg-sky-500 shadow-inner shadow-gray-50 flex justify-center items-center rounded-3xl">
  <div class="w-56 h-56 bg-neutral-900 shadow-inner shadow-gray-50 flex justify-center items-center rounded-3xl">
    <div class="flex flex-col items-center justify-center rounded-2xl bg-neutral-900 shadow-inner shadow-gray-50 w-52 h-52">
      <div class="before:absolute before:w-12 before:h-12 before:bg-orange-800 before:rounded-full before:blur-xl before:top-16 relative   flex flex-col justify-around items-center w-44 h-40 bg-neutral-900 text-gray-50">
        <span class="">Wed, Sep 19</span>
        <span class="z-10 flex items-center text-6xl text-amber-600 [text-shadow:_2px_2px_#fff,_1px_2px_#fff]">12<span class="text-xl font-bold text-gray-50 [text-shadow:none]">:</span>58</span>
        <div class="text-gray-50 w-48 flex flex-row justify-evenly">
          <span class="text-xs font-bold">89</span>
          <div class="flex flex-row items-center">
            <svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="w-5 h-5 fill-red-500 animate-bounce">
            <path fill-rule="evenodd" d="M23,27.6a15.8,15.8,0,0,1,22.4,0L50,32.2l4.6-4.6A15.8,15.8,0,0,1,77,50L50,77,23,50A15.8,15.8,0,0,1,23,27.6Z" class="">
            </path>
            </svg>
            <svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="w-5 h-5 fill-current">
            <path d="M80.2,40.7l-1.1-2-.2-.3.3-.3c2.2-14.7-21.3-25.6-20.7-21S57,38.1,45.4,31.8c-9.3-5.1-12.9,12.1-22.8,33.7C16.2,79.4,20.8,82.3,27,81l.3.4L29,83.3a1.4,1.4,0,0,0,1.8.5l.9-.3a1.6,1.6,0,0,0,1.1-1.9l-.5-2.5a38.2,38.2,0,0,0,4.5-2.7L38.6,78a1.8,1.8,0,0,0,2.4-.1l1.2-1.1a1.9,1.9,0,0,0,.4-1.9l-1-2.5L45.5,69l1.7,1.6a1.8,1.8,0,0,0,2.4-.1l.9-1a1.7,1.7,0,0,0,.4-1.8L50,65c5.6-5,11.9-10.9,17.3-15.8l.4.2,1.9,1.1a1.6,1.6,0,0,0,2.1-.2l.8-.8a1.6,1.6,0,0,0,.3-2.1l-1.3-2.1,3.2-3.1,2.2,1.5a1.8,1.8,0,0,0,2.2-.1l.8-.8A1.7,1.7,0,0,0,80.2,40.7Z" class="svg-fill-primary">
            </path>
            </svg>
            <svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="w-5 h-5 fill-current">
            <path fill-rule="evenodd" d="M59.5,20.5a3.9,3.9,0,0,0-2.5-2,4.3,4.3,0,0,0-3.3.5,11.9,11.9,0,0,0-3.2,3.5,26,26,0,0,0-2.3,4.4,76.2,76.2,0,0,0-3.3,10.8,120.4,120.4,0,0,0-2.4,14.2,11.4,11.4,0,0,1-3.8-4.2c-1.3-2.7-1.5-6.1-1.5-10.5a4,4,0,0,0-2.5-3.7,3.8,3.8,0,0,0-4.3.9,27.7,27.7,0,1,0,39.2,0,62.4,62.4,0,0,1-5.3-5.8A42.9,42.9,0,0,1,59.5,20.5ZM58.4,70.3a11.9,11.9,0,0,1-20.3-8.4s3.5,2,9.9,2c0-4,2-15.9,5-17.9a21.7,21.7,0,0,0,5.4,7.5,11.8,11.8,0,0,1,3.5,8.4A12,12,0,0,1,58.4,70.3Z" class="svg-fill-primary">
            </path>
            </svg>
          </div>
        </div>
      </div>
      <span class="text-gray-700 text-lg font-light">fitbit</span>
    </div>
  </div>
</div>



================================================
FILE: Cards/Javierrocadev_plastic-turtle-87.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: card, hover effect, hover button, tailwind -->
<div class="group before:hover:scale-95 before:hover:h-72 before:hover:w-80 before:hover:h-44 before:hover:rounded-b-2xl before:transition-all before:duration-500 before:content-[''] before:w-80 before:h-24 before:rounded-t-2xl before:bg-gradient-to-bl from-sky-200 via-orange-200 to-orange-700 before:absolute before:top-0 w-80 h-72 relative bg-slate-50 flex flex-col items-center justify-center gap-2 text-center rounded-2xl overflow-hidden">
  <div class="w-28 h-28 bg-blue-700 mt-8 rounded-full border-4 border-slate-50 z-10 group-hover:scale-150 group-hover:-translate-x-24  group-hover:-translate-y-20 transition-all duration-500"></div>
  <div class="z-10  group-hover:-translate-y-10 transition-all duration-500">
    <span class="text-2xl font-semibold">George Johnson</span>
    <p>Support Specialist</p>
  </div>
  <a class="bg-blue-700 px-4 py-1 text-slate-50 rounded-md z-10 hover:scale-125 transition-all duration-500 hover:bg-blue-500" href="#">Folow</a>
</div>



================================================
FILE: Cards/Javierrocadev_popular-treefrog-90.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: material design, black, card, dark, card template, cool card, cardhover  -->
<div class="group origin-bottom-right duration-500 -rotate-12 hover:-rotate-0 hover:-skew-x-12 skew-x-0 hover:-translate-x-6  hover:translate-y-12">
  <div class="duration-500 group-hover:duration-400 relative rounded-2xl w-64 h-36 bg-zinc-800 text-gray-50 flex flex-col justify-center items-center gap-1 before:-skew-x-12  before:rounded-2xl  before:absolute before:content['']  before:bg-neutral-700 before:right-3 before:top-0 before:w-64 before:h-32 before:-z-10 group-hover:before:-right-3 group-hover:before:skew-x-12 before:duration-500 group-hover:duration-500">
    <span class="text-5xl font-bold">Jr</span>
    <p class="text-amber-300 font-thin">- Frontend Developer -</p>
  </div>
</div>



================================================
FILE: Cards/Javierrocadev_pretty-wasp-36.html
================================================
<div class="card">
   <div class="icons"> 
      <button class="save">
      <svg class="save__icon" viewBox="0 0 20 20"><path d="M8.416,3.943l1.12-1.12v9.031c0,0.257,0.208,0.464,0.464,0.464c0.256,0,0.464-0.207,0.464-0.464V2.823l1.12,1.12c0.182,0.182,0.476,0.182,0.656,0c0.182-0.181,0.182-0.475,0-0.656l-1.744-1.745c-0.018-0.081-0.048-0.16-0.112-0.224C10.279,1.214,10.137,1.177,10,1.194c-0.137-0.017-0.279,0.02-0.384,0.125C9.551,1.384,9.518,1.465,9.499,1.548L7.76,3.288c-0.182,0.181-0.182,0.475,0,0.656C7.941,4.125,8.234,4.125,8.416,3.943z M15.569,6.286h-2.32v0.928h2.32c0.512,0,0.928,0.416,0.928,0.928v8.817c0,0.513-0.416,0.929-0.928,0.929H4.432c-0.513,0-0.928-0.416-0.928-0.929V8.142c0-0.513,0.416-0.928,0.928-0.928h2.32V6.286h-2.32c-1.025,0-1.856,0.831-1.856,1.856v8.817c0,1.025,0.832,1.856,1.856,1.856h11.138c1.024,0,1.855-0.831,1.855-1.856V8.142C17.425,7.117,16.594,6.286,15.569,6.286z"></path></svg>
      Save 
    </button>
    <button class="see-more">
      <svg viewBox="0 0 20 20" class="see-more__icon">
							<path d="M3.936,7.979c-1.116,0-2.021,0.905-2.021,2.021s0.905,2.021,2.021,2.021S5.957,11.116,5.957,10
								S5.052,7.979,3.936,7.979z M3.936,11.011c-0.558,0-1.011-0.452-1.011-1.011s0.453-1.011,1.011-1.011S4.946,9.441,4.946,10
								S4.494,11.011,3.936,11.011z M16.064,7.979c-1.116,0-2.021,0.905-2.021,2.021s0.905,2.021,2.021,2.021s2.021-0.905,2.021-2.021
								S17.181,7.979,16.064,7.979z M16.064,11.011c-0.559,0-1.011-0.452-1.011-1.011s0.452-1.011,1.011-1.011S17.075,9.441,17.075,10
								S16.623,11.011,16.064,11.011z M10,7.979c-1.116,0-2.021,0.905-2.021,2.021S8.884,12.021,10,12.021s2.021-0.905,2.021-2.021
								S11.116,7.979,10,7.979z M10,11.011c-0.558,0-1.011-0.452-1.011-1.011S9.442,8.989,10,8.989S11.011,9.441,11.011,10
								S10.558,11.011,10,11.011z"></path>
						</svg>
    </button>
    </div>
  <div class="image"></div>
   <div class="card__info">
     <span class="page">BBC</span>
     <a href="#" class="title">Stunning photos as Perseid meteors light up skies</a>
     <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
   </div>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: hover, card animation, article */
.card {
  width: 300px;
  height: 325px;
  background: #e8e8e8;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  color: #212121;
  border: 2px solid #ab4b38;
  transition: all .5s ease;
}

.icons {
  display: flex;
  flex-direction: row;
  gap: 5px;
  position: absolute;
  right: 15px;
  top: 15px;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.image {
  width: 300px;
  height: 148px;
  background: rgb(223,235,56);
  background: rgb(56,235,226);
  background: linear-gradient(163deg, rgba(56,235,226,1) 0%, rgba(134,221,245,1) 50%);
}

.save {
  background: #eb4b38;
  color: white;
  border: none;
  border-radius: 5px;
}

.see-more {
  background: #ab4b38;
  border: none;
  border-radius: 5px;
  color: white;
}

.save, .see-more {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
  padding: 5px;
}

.save__icon, .see-more__icon {
  width: 15px;
  fill: white;
}

.card__info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  padding: 15px;
  gap: 3px;
}

.page {
  font-size: 13px;
  font-weight: 100;
}

.title {
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  color: black;
}

.content {
  font-size: 14px;
}

.card:hover {
  box-shadow: 5px 5px 10px 0px #ab4b3866;
}

.card:hover .icons {
  z-index: 1;
  opacity: 1;
}

.card:hover .image {
  filter: brightness(.8);
}

.card:hover .title {
  color: #ab4b38;
}
</style>


================================================
FILE: Cards/Javierrocadev_quick-emu-41.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: simple, phone, card, hover, blur filter, hover effect, tailwind -->
<div class="group cursor-pointer group-hover:duration-500 overflow-hidden relative  rounded-2xl shadow-inner shadow-gray-50 flex flex-col justify-around items-center w-40 h-80 bg-neutral-900 text-gray-50">
  <div class="after:duration-500 before:duration-500 duration-500  group-hover:before:translate-x-11 group-hover:before:-translate-y-11  group-hover:after:translate-x-11 group-hover:after:translate-y-16 after:absolute after:w-12 after:h-12 after:bg-orange-400 after:rounded-full after:-z-10 after:blur-xl after:bottom-32 after:right-16 after:w-12 after:h-12 before:absolute before:w-20 before:h-20 before:bg-sky-400 before:rounded-full before:-z-10 before:blur-xl before:top-20 before:right-16 before:w-12 before:h-12 flex flex-col font-extrabold text-6xl z-10">
    <span>03</span>
    <span>40</span>
  </div>
  <div class="flex flex-row justify-center text-sm font-thin items-center gap-1 font-thin">
    <span>Touch to unlock</span>
    <svg class="w-4 h-4 stroke-current" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
    <path d="M33.9,46V29.9a16.1,16.1,0,0,1,32.2,0M50,62v8.1m-24.1,16H74.1a8,8,0,0,0,8-8V54a8,8,0,0,0-8-8H25.9a8,8,0,0,0-8,8V78.1A8,8,0,0,0,25.9,86.1Z" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8">
    </path>
  </svg></div>
</div>



================================================
FILE: Cards/Javierrocadev_red-stingray-37.html
================================================

	<div class="card">
		<div class="text">
			<span>Lorem ipsum dolor sit amet</span>
			<p class="subtitle">Vivamus nisi purus</p>
		</div>
		<div class="icons">
			<a class="btn" href="#">
				<svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="svg-icon">
					<path stroke-width="8" stroke-linejoin="round" stroke-linecap="round" fill="none" d="M31.8,64.5a14.5,14.5,0,0,1-3.2-28.7,17.5,17.5,0,0,1-.4-4,18.2,18.2,0,0,1,36-3.6h.3a18.2,18.2,0,0,1,3.7,36M39.1,75.4,50,86.3m0,0L60.9,75.4M50,86.3V42.7">
					</path>
				</svg>
			</a>
			<a class="btn" href="#">
			<svg class="svg-icon" viewBox="0 0 20 20">
				<path d="M4.317,16.411c-1.423-1.423-1.423-3.737,0-5.16l8.075-7.984c0.994-0.996,2.613-0.996,3.611,0.001C17,4.264,17,5.884,16.004,6.88l-8.075,7.984c-0.568,0.568-1.493,0.569-2.063-0.001c-0.569-0.569-0.569-1.495,0-2.064L9.93,8.828c0.145-0.141,0.376-0.139,0.517,0.005c0.141,0.144,0.139,0.375-0.006,0.516l-4.062,3.968c-0.282,0.282-0.282,0.745,0.003,1.03c0.285,0.284,0.747,0.284,1.032,0l8.074-7.985c0.711-0.71,0.711-1.868-0.002-2.579c-0.711-0.712-1.867-0.712-2.58,0l-8.074,7.984c-1.137,1.137-1.137,2.988,0.001,4.127c1.14,1.14,2.989,1.14,4.129,0l6.989-6.896c0.143-0.142,0.375-0.14,0.516,0.003c0.143,0.143,0.141,0.374-0.002,0.516l-6.988,6.895C8.054,17.836,5.743,17.836,4.317,16.411"></path>
			</svg>
			</a>
			<a class="btn" href="#">
			<svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="svg-icon">
				<path stroke-width="8" stroke-linejoin="round" stroke-linecap="round" fill="none" d="M21.9,50h0M50,50h0m28.1,0h0M25.9,50a4,4,0,1,1-4-4A4,4,0,0,1,25.9,50ZM54,50a4,4,0,1,1-4-4A4,4,0,0,1,54,50Zm28.1,0a4,4,0,1,1-4-4A4,4,0,0,1,82.1,50Z">
				</path>
			</svg>
			</a>
		</div>
	</div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: card, svg, hover effect, cardhover  */
.card {
  width: 250px;
  height: 200px;
  border-radius: 15px;
  background: rgba(105, 13, 197, 0.103);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  height: 100px;
  width: 100px;
  position: absolute;
  top: -40%;
  left: -20%;
  border-radius: 50%;
  border: 35px solid rgba(255, 255, 255, 0.102);
  transition: all .8s ease;
  filter: blur(.5rem);
}

.text {
  flex-grow: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  color: aliceblue;
  font-weight: 900;
  font-size: 1.2em;
}

.subtitle {
  font-size: .6em;
  font-weight: 300;
  color: rgba(240, 248, 255, 0.691);
}

.icons {
  display: flex;
  justify-items: center;
  align-items: center;
  width: 250px;
  border-radius: 0px 0px 15px 15px;
  overflow: hidden;
}

.btn {
  border: none;
  width: 84px;
  height: 35px;
  background-color: rgba(247, 234, 234, 0.589);
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg-icon {
  width: 25px;
  height: 25px;
  stroke: rgb(38, 59, 126);
}

.btn:hover {
  background-color: rgb(247, 234, 234);
}

.card:hover::before {
  width: 140px;
  height: 140px;
  top: -30%;
  left: 50%;
  filter: blur(0rem);
}
</style>


================================================
FILE: Cards/Javierrocadev_serious-jellyfish-64.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: blue, card, watch, tailwind -->
<div class="after:-z-10  after:absolute after:w-20 after:h-80 after:bg-sky-700 after:rounded-2xl after:shadow-inner after:shadow-slate-900 before:absolute before:w-8 before:h-8 before:bg-sky-400 before:rounded-full before:blur-xl before:top-20 before:right-6 before:w-12 before:h-12  relative  rounded-2xl shadow-inner shadow-gray-50 flex flex-col justify-evenly items-center w-24 h-44 bg-neutral-900 text-gray-50">
  <div class="flex flex-col font-extrabold text-6xl z-10">
    <span>03</span>
    <span>40</span>
  </div>
  <div class="flex flex-row justify-center items-center gap-1 font-thin">
    <span>90</span>
    <svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="w-5 h-5 fill-red-500">
      <path fill-rule="evenodd" d="M23,27.6a15.8,15.8,0,0,1,22.4,0L50,32.2l4.6-4.6A15.8,15.8,0,0,1,77,50L50,77,23,50A15.8,15.8,0,0,1,23,27.6Z" class="">
      </path>
    </svg>
  </div>
</div>




================================================
FILE: Cards/Javierrocadev_short-bobcat-64.html
================================================
<!-- From Uiverse.io by Javierrocadev - Source: Javierrocadev - Tags: simple, blue, gradient, card, hover effect, card template -->
<div class="w-60 h-80 bg-gray-50 p-3 flex flex-col gap-1">
  <div class="duration-500 contrast-50 h-48 bg-gradient-to-bl from-black via-orange-900 to-indigo-600  hover:contrast-100"></div>
  <div class="flex flex-col gap-4">
    <div class="flex flex-row justify-between">
      <div class="flex flex-col">
        <span class="text-xl font-bold">Long Chair</span>
        <p class="text-xs text-gray-700">ID: 23432252</p>
      </div>
      <span class="font-bold  text-red-600">$25.99</span>
    </div>
    <button class="hover:bg-sky-700 text-gray-50 bg-sky-800 py-2">Add to cart</button>
  </div>
</div>



================================================
FILE: Cards/Javierrocadev_splendid-pig-71.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: blue, card, shop, card template, tailwind -->
<div class="overflow-hidden relative w-56 h-64 bg-gray-50 rounded-2xl text-sky-400 flex flex-col justify-end items-center gap-2">
  <svg class="absolute opacity-30 -rotate-12 -bottom-12 -right-12 w-40 h-40 stroke-current" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
    <path class="svg-stroke-primary" d="M65.8,46.1V30.3a15.8,15.8,0,1,0-31.6,0V46.1M22.4,38.2H77.6l4,47.3H18.4Z" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8">
    </path>
  </svg>
  <div class="flex flex-col items-center">
    <p class="text-xl font-extrabold">Discount</p>
    <p class="relative text-xs inline-block after:absolute after:content-[''] after:ml-2 after:top-1/2 after:bg-sky-200 after:w-12 after:h-0.5   before:absolute before:content-[''] before:-ml-14 before:top-1/2 before:bg-sky-200 before:w-12 before:h-0.5">Up to</p>
  </div>
  <span class="font-extrabold text-7xl -skew-x-12 -skew-y-12 -mt-1 mb-5">70%</span>
  <button class="z-10 px-4 py-2 bg-sky-400 text-gray-50 hover:bg-sky-300">Shop now</button>
  <p class="text-xs mb-1">*Variable prices</p>
</div>



================================================
FILE: Cards/Javierrocadev_stupid-baboon-34.html
================================================
<div class="card">
  <div class="star star-1"></div>
  <div class="star star-2"></div>
  <div class="star star-3"></div>
  <div class="star star-4"></div>
  <div class="star star-5"></div>
  <div class="star star-6"></div>
  <div class="star star-7"></div>
  <div class="card-info">
    <span>To the moon!</span>
  </div>
  <svg class="moon" viewBox="0 0 20 20">
							<path d="M 10 9 z z M 7.007 6.552 c 0 -2.259 0.795 -4.33 2.117 -5.955 C 4.34 1.042 0.594 5.07 0.594 9.98 c 0 5.207 4.211 9.426 9.406 9.426 c 2.94 0 5.972 -1.354 7.696 -3.472 c -0.289 0.026 -0.987 0.044 -1.283 0.044 C 11.219 15.979 7.007 11.759 7.007 6.552 z"></path></svg>
  <svg class="rocket" viewBox="48.0129 48.1783 416 415.6">
  <path d="M461.81,53.81a4.4,4.4,0,0,0-3.3-3.39c-54.38-13.3-180,34.09-248.13,102.17a294.9,294.9,0,0,0-33.09,39.08c-21-1.9-42-.3-59.88,7.5-50.49,22.2-65.18,80.18-69.28,105.07a9,9,0,0,0,9.8,10.4l81.07-8.9a180.29,180.29,0,0,0,1.1,18.3,18.15,18.15,0,0,0,5.3,11.09l31.39,31.39a18.15,18.15,0,0,0,11.1,5.3,179.91,179.91,0,0,0,18.19,1.1l-8.89,81a9,9,0,0,0,10.39,9.79c24.9-4,83-18.69,105.07-69.17,7.8-17.9,9.4-38.79,7.6-59.69a293.91,293.91,0,0,0,39.19-33.09C427.82,233.76,474.91,110.9,461.81,53.81ZM298.66,213.67a42.7,42.7,0,1,1,60.38,0A42.65,42.65,0,0,1,298.66,213.67Z"></path></svg>
						
</div>

<style>
/* From Uiverse.io by Javierrocadev - Tags: card, star, moon, rotate, keyframes, rocket */
.card {
  width: 290px;
  height: 350px;
  background: linear-gradient(135deg, rgba(48,48,48,1) 48%, rgba(0,0,0,1) 100%);
  background-size: 300%,300%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 15px;
  box-shadow: 5px 5px 15px 5px #000000;
  overflow: hidden;
  transition: all 1s ease;
}

.moon {
  width: 70px;
  height: 70px;
  top: 15%;
  right: 120px;
  position: absolute;
  fill: white;
  transform: rotate(-20deg);
  transition: all 1s ease;
}

.rocket {
  width: 70px;
  height: 70px;
  bottom: -2%;
  left: -2%;
  position: absolute;
  fill: white;
  transition: all 1.9s ease;
}

.star {
  position: absolute;
  background: radial-gradient(circle, rgba(251,239,63,1) 0%, rgba(255,253,212,1) 100%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.star-1 {
  width: 100px;
  height: 100px;
  bottom: 90px;
  left: -15px;
  transition: all 1s ease;
}

.star-2 {
  width: 150px;
  height: 150px;
  top: -10%;
  left: -10%;
  transition: all .5s ease;
}

.star-3 {
  width: 100px;
  height: 100px;
  bottom: 5%;
  right: -15px;
  transition: all .3s ease;
}

.star-4 {
  width: 20px;
  height: 20px;
  top: 4%;
  right: 5px;
  transition: all 1.4s ease;
}

.star-5 {
  width: 20px;
  height: 20px;
  bottom: 24%;
  right: 45%;
  animation: rotate 3s normal linear infinite;
}

.star-6 {
  width: 20px;
  height: 20px;
  top: 14%;
  right: 25%;
  animation: rotate 5s normal linear infinite;
}

.star-7 {
  width: 40px;
  height: 40px;
  top: 34%;
  right: 65%;
  animation: rotate 5s normal linear infinite;
}

.card-info span {
  font-size: 1.2em;
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 1s ease;
}

.card:hover {
  background: rgb(48,48,48);
  background: linear-gradient(135deg, rgba(48,48,48,1) 10%, rgba(0,0,0,1) 90%);
  background-size: 100%,100%;
}

.card:hover .star-1,
.card:hover .star-3 {
  background: linear-gradient(90deg, rgba(255,241,0,1) 0%, rgba(246,249,93,1) 77%, rgba(238,255,0,1) 100%);
  transform: scale(1.2) rotate(10deg);
}

.card:hover .star-2,
.card:hover .star-4,
.card:hover .star-5 {
  background: linear-gradient(90deg, rgba(255,241,0,1) 0%, rgba(246,249,93,1) 77%, rgba(238,255,0,1) 100%);
  transform: scale(1.2) rotate(-150deg);
}

.card:hover .rocket {
  transform: scale(.3) translate(450px,-730px) rotate(-260deg);
}

.card:hover .moon {
  width: 50px;
  height: 50px;
}

.card:hover span {
  font-size: 1.5em;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }

  25% {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
  }

  50% {
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
  }

  75% {
    -webkit-transform: rotate3d(0, 0, 1, 270deg);
    transform: rotate3d(0, 0, 1, 270deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }
}
</style>


================================================
FILE: Cards/Javierrocadev_sweet-cat-65.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: card, hover, blur filter, hover effect, hover button, cardhover , card animation, card hover -->
<div class="group relative overflow-hidden h-72 w-64 bg-sky-300 rounded-xl">
  <div
    class="absolute w-56 h-64 bg-gray-50 z-10 top-4 left-4 opacity-50 rounded-2xl blur duration-300 group-hover:blur-none [transform:rotate3d(1_,-1,_1,_30deg)] duration-500 group-hover:[transform:rotate3d(1_,-1,_1,_0deg)]"
  ></div>
  <div
    class="absolute w-56 h-64 z-10 top-4 left-4 p-3 rounded-2xl flex flex-col justify-end items-start gap-4 [transform:rotate3d(1_,-1,_1,_30deg)] duration-500 group-hover:[transform:rotate3d(1_,-1,_1,_0deg)]"
  >
    <span class="text-red-800 text-2xl font-extrabold">Card title</span>
    <p class="text-gray-800 font-bold">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor.
    </p>
    <button
      class="bg-gray-50 px-3 py-2 rounded-xl hover:bg-sky-600 duration-300"
    >
      See more
    </button>
  </div>

  <svg
    y="0"
    xmlns="http://www.w3.org/2000/svg"
    x="0"
    width="100"
    viewBox="0 0 10 10"
    preserveAspectRatio="xMidYMid meet"
    height="100"
    class="fill-sky-400 w-64 h-64 absolute -bottom-20 -left-32"
  >
    <path
      d="M0,5A5,5,0,1,0,5,0,5,5,0,0,0,0,5ZM8.12,5A3.12,3.12,0,1,1,5,1.88,3.12,3.12,0,0,1,8.12,5Z"
    ></path>
  </svg>
</div>


    

================================================
FILE: Cards/Javierrocadev_sweet-chicken-73.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: blue, card, hover, rounded, rotate, card hover -->
<div class="relative duration-300  hover:-rotate-0 [transform:rotate3d(1_,-1,_1,_60deg)] group border border-sky-900 border-4  overflow-hidden rounded-2xl relative h-52 w-72 bg-sky-800 p-5 flex flex-col items-start gap-4">
  <div class="text-gray-50">
    <span class="font-bold text-5xl">Jr</span>
    <p class="text-xs">Frontend Developer</p>
  </div>
  <button class="duration-300 hover:bg-sky-900 border hover:text-gray-50 bg-gray-50 font-semibold text-sky-800 px-3 py-2 flex flex-row items-center gap-3">Dowload CV 
    <svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="w-6 h-6 fill-current">
 <path fill-rule="evenodd" d="M22.1,77.9a4,4,0,0,1,4-4H73.9a4,4,0,0,1,0,8H26.1A4,4,0,0,1,22.1,77.9ZM35.2,47.2a4,4,0,0,1,5.7,0L46,52.3V22.1a4,4,0,1,1,8,0V52.3l5.1-5.1a4,4,0,0,1,5.7,0,4,4,0,0,1,0,5.6l-12,12a3.9,3.9,0,0,1-5.6,0l-12-12A4,4,0,0,1,35.2,47.2Z">
 </path>
</svg>
  </button>

  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" class="group-hover:scale-125 duration-500 absolute -bottom-0.5 -right-20 w-48 h-48 z-10 -my-2  fill-gray-50 stroke-sky-900"><path stroke-width="5" stroke-miterlimit="10" d="M 50.4 51 C 40.5 49.1 40 46 40 44 v -1.2 a 18.9 18.9 0 0 0 5.7 -8.8 h 0.1 c 3 0 3.8 -6.3 3.8 -7.3 s 0.1 -4.7 -3 -4.7 C 53 4 30 0 22.3 6 c -5.4 0 -5.9 8 -3.9 16 c -3.1 0 -3 3.8 -3 4.7 s 0.7 7.3 3.8 7.3 c 1 3.6 2.3 6.9 4.7 9 v 1.2 c 0 2 0.5 5 -9.5 6.8 S 2 62 2 62 h 60 a 14.6 14.6 0 0 0 -11.6 -11 z" data-name="layer1"></path></svg>

  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" class="group-hover:scale-125 duration-200 absolute -bottom-0.5 -right-20 w-48 h-48 z-10 -my-2  fill-gray-50 stroke-sky-700"><path stroke-width="2" stroke-miterlimit="10" d="M 50.4 51 C 40.5 49.1 40 46 40 44 v -1.2 a 18.9 18.9 0 0 0 5.7 -8.8 h 0.1 c 3 0 3.8 -6.3 3.8 -7.3 s 0.1 -4.7 -3 -4.7 C 53 4 30 0 22.3 6 c -5.4 0 -5.9 8 -3.9 16 c -3.1 0 -3 3.8 -3 4.7 s 0.7 7.3 3.8 7.3 c 1 3.6 2.3 6.9 4.7 9 v 1.2 c 0 2 0.5 5 -9.5 6.8 S 2 62 2 62 h 60 a 14.6 14.6 0 0 0 -11.6 -11 z" data-name="layer1"></path></svg>

  
</div>



================================================
FILE: Cards/Javierrocadev_sweet-earwig-59.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: simple, purple, card, hover, hover effect, card hover, tailwind -->
<div
  class="cursor-pointer transition-all duration-500 hover:translate-y-2 w-72 h-40 bg-neutral-50 rounded-lg shadow-xl flex flex-row items-center justify-evenly gap-4 px-4"
>
  <svg
    class="stroke-purple-300 shrink-0 rounded-full"
    height="50"
    preserveAspectRatio="xMidYMid meet"
    viewBox="0 0 100 100"
    width="50"
    x="0"
    xmlns="http://www.w3.org/2000/svg"
    y="0"
  >
    <path
      d="M17.9,60.7A14.3,14.3,0,0,0,32.2,75H64.3a17.9,17.9,0,0,0,0-35.7h-.4a17.8,17.8,0,0,0-35.3,3.6,17.2,17.2,0,0,0,.4,3.9A14.3,14.3,0,0,0,17.9,60.7Z"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="8"
    ></path>
  </svg>
  <div>
    <span class="font-bold text-purple-300">Card title</span>
    <p class="line-clamp-3">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
</div>


    

================================================
FILE: Cards/Javierrocadev_tall-donkey-37.html
================================================
<div class="temporary__storage">
  <div class="card">
    <div class="image"></div>
    <div class="image__overlay"></div>
    <div class="content">
      <div class="avatar"></div>
      <div class="content__text">
        <span class="stream__title">🚀2023 LEC Summer - Group Stage - Day 2 - KOI vs. G2</span>
        <div class="content__body">
          <span class="streamer__name">ibai</span>
          <span class="event">League of Legends</span>
        </div>
       
        <span class="categories">
          <a class="categories__btn" href="#">Español</a>
          <a class="categories__btn" href="#">KOI</a>
          <a class="categories__btn" href="#">LOL</a>
        </span>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: card, hover, dark, card animation, twitch */
.temporary__storage {
/*delete this*/
  width: 350px;
  height: 350px;
  background: #1b1a1a;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 320px;
  height: 300px;
  background: #1b1a1a;
  position: relative;
  color: #e6e6ea;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.image {
  width: 100%;
  height: 180px;
  position: absolute;
  background-color: rgb(144, 197, 47);
  cursor: pointer;
  transition: all .2s ease;
}

.image::before {
  content: "LIVE";
  position: absolute;
  top: 7px;
  left: 7px;
  font-weight: 900;
  font-size: .8em;
  background-color: rgb(228, 33, 33);
  border-radius: 5px;
  padding: 3px 5px;
}

.image::after {
  content: "102.2k viewers";
  position: absolute;
  bottom: 7px;
  left: 7px;
  font-weight: 300;
  font-size: .7em;
  background-color: rgb(59, 53, 53);
  border-radius: 2px;
  padding: 3px 5px;
}

.image__overlay {
  width: 100%;
  height: 180px;
}

.image:hover {
  transform: translate(8px, -8px);
  box-shadow: -1px 1px 0px 0px violet,-2px 2px 0px 0px violet,-3px 3px 0px 0px violet,-4px 4px 0px 0px violet,-5px 5px 0px 0px violet,-6px 6px 0px 0px violet,-7px 7px 0px 0px violet,-8px 8px 0px 0px violet;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  background-image: linear-gradient(to right top, #371f05, #654607, #8b7600, #a4ae00, #a8eb12);
}

.content {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.content__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.content__body {
  display: flex;
  flex-direction: column;
}

.stream__title {
  font-weight: 900;
  width: 260px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}

.event {
  cursor: pointer;
}

.streamer__name, .event {
  font-size: .8em;
  font-weight: 400;
  color: rgb(216, 213, 213);
}

.categories__btn {
  text-decoration: none;
  color: rgb(216, 213, 213);
  font-size: .8em;
  background-color: rgb(73, 71, 71);
  padding: 3px 10px;
  border-radius: 15px;
}

.stream__title:hover, .event:hover {
  color: #9f7cd3;
}

.categories__btn:hover {
  background-color: rgb(79, 79, 79);
}
</style>


================================================
FILE: Cards/Javierrocadev_tender-cougar-56.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: card, hover, blur filter, hover effect, hoverme, hover button, card hover -->
	<div class="group overflow-hidden bg-neutral-50 rounded-xl bg-gradient-to-tr from-cyan-800 via-cyan-700 to-cyan-500 text-gray-50">
		<div class="before:duration-700 before:absolute before:w-28 before:h-28 before:bg-transparent before:blur-none before:border-8 before:opacity-50 before:rounded-full before:-left-4 before:-top-12 w-64 h-48  flex flex-col justify-between relative z-10 group-hover:before:top-28 group-hover:before:left-44 group-hover:before:scale-125 group-hover:before:blur">
			<div class="text p-3 flex flex-col justify-evenly h-full">
				<span class="font-bold text-2xl">Get Your Document</span>
				<p class="subtitle">Access your document instantly, simply click the download link.</p>
			</div>
			<div class="w-full flex flex-row justify-between z-10">
				<a class="hover:opacity-90 py-3 bg-cyan-50 w-full flex justify-center" href="#">
					<svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="w-6 h-6  stroke-cyan-800">
						<path stroke-width="8" stroke-linejoin="round" stroke-linecap="round" fill="none" d="M18.3,65.8v4A11.9,11.9,0,0,0,30.2,81.7H69.8A11.9,11.9,0,0,0,81.7,69.8v-4M65.8,50,50,65.8m0,0L34.2,50M50,65.8V18.3" class="">
						</path>
					</svg>
				</a>
				<a class="hover:opacity-90 py-3 bg-cyan-50 w-full flex justify-center" href="#">
					<svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="w-6 h-6  stroke-cyan-800">
						<path stroke-width="8" stroke-linejoin="round" stroke-linecap="round" fill="none" d="M21.9,50h0M50,50h0m28.1,0h0M25.9,50a4,4,0,1,1-4-4A4,4,0,0,1,25.9,50ZM54,50a4,4,0,1,1-4-4A4,4,0,0,1,54,50Zm28.1,0a4,4,0,1,1-4-4A4,4,0,0,1,82.1,50Z">
						</path>
					</svg>
				</a>
			</div>
		</div>
	</div>



================================================
FILE: Cards/Javierrocadev_tender-robin-5.html
================================================

<div class="card">
<div class="svgContainer">
  <svg class="svg-icon dartboard" viewBox="0 0 20 20">
    <path d="M14.613,10c0,0.23-0.188,0.419-0.419,0.419H10.42v3.774c0,0.23-0.189,0.42-0.42,0.42s-0.419-0.189-0.419-0.42v-3.774H5.806c-0.23,0-0.419-0.189-0.419-0.419s0.189-0.419,0.419-0.419h3.775V5.806c0-0.23,0.189-0.419,0.419-0.419s0.42,0.189,0.42,0.419v3.775h3.774C14.425,9.581,14.613,9.77,14.613,10 M17.969,10c0,4.401-3.567,7.969-7.969,7.969c-4.402,0-7.969-3.567-7.969-7.969c0-4.402,3.567-7.969,7.969-7.969C14.401,2.031,17.969,5.598,17.969,10 M17.13,10c0-3.932-3.198-7.13-7.13-7.13S2.87,6.068,2.87,10c0,3.933,3.198,7.13,7.13,7.13S17.13,13.933,17.13,10"></path>
  </svg>
  
  <svg class="svg-icon eyehole" viewBox="0 0 20 20">
    <path d="M17.659,9.597h-1.224c-0.199-3.235-2.797-5.833-6.032-6.033V2.341c0-0.222-0.182-0.403-0.403-0.403S9.597,2.119,9.597,2.341v1.223c-3.235,0.2-5.833,2.798-6.033,6.033H2.341c-0.222,0-0.403,0.182-0.403,0.403s0.182,0.403,0.403,0.403h1.223c0.2,3.235,2.798,5.833,6.033,6.032v1.224c0,0.222,0.182,0.403,0.403,0.403s0.403-0.182,0.403-0.403v-1.224c3.235-0.199,5.833-2.797,6.032-6.032h1.224c0.222,0,0.403-0.182,0.403-0.403S17.881,9.597,17.659,9.597 M14.435,10.403h1.193c-0.198,2.791-2.434,5.026-5.225,5.225v-1.193c0-0.222-0.182-0.403-0.403-0.403s-0.403,0.182-0.403,0.403v1.193c-2.792-0.198-5.027-2.434-5.224-5.225h1.193c0.222,0,0.403-0.182,0.403-0.403S5.787,9.597,5.565,9.597H4.373C4.57,6.805,6.805,4.57,9.597,4.373v1.193c0,0.222,0.182,0.403,0.403,0.403s0.403-0.182,0.403-0.403V4.373c2.791,0.197,5.026,2.433,5.225,5.224h-1.193c-0.222,0-0.403,0.182-0.403,0.403S14.213,10.403,14.435,10.403"></path>
  </svg>
  <svg class="svg-icon batman">
    <path class="svg-fill-primary" d="M86.578,41.004s-8.219,.295-8.607,7.685c0,0-9.824-4.379-11.571,7.874,0,0-8.653-5.402-14.586,9.744l-1.861-3.908-1.861,3.908c-5.933-15.146-14.586-9.744-14.586-9.744-1.752-12.253-11.571-7.874-11.571-7.874-.366-6.927-7.609-7.621-8.514-7.68,11.643,.442,15.904-7.314,15.904-7.314,3.015,13.499,14.097,14.603,14.097,14.603l2.43-9.335,1.461,4.379h5.28l1.457-4.379,2.43,9.335s11.087-1.103,14.102-14.603c0,0,4.282,7.798,15.996,7.31Z">
  </path>
  </svg>
  

</div>
<div class="card-info">
  <span>Stance and Aim</span>
  <p>Visualize the trajectory and mentally aim for your desired spot.</p>
  <a href="#" class="challengeButton">Challenge</a>
</div>
</div>

<style>
/* From Uiverse.io by Javierrocadev - Tags: card, animated, batman */
.card {
  width: 370px;
  height: 270px;
  background: linear-gradient(120deg, rgba(255,237,57,1) 0%, rgba(247,253,45,1) 100%);
  ;
  position: relative;
  display: flex;
  justify-content: center;
  padding: 20px;
  border-radius: 15px;
  transition: all 0.5s ease;
}

.card::before {
  content: 'Dart';
  position: absolute;
  width: 0px;
  height: 60px;
  border-left: 30px solid #3A486F;
  border-right: 30px solid #3A486F;
  border-bottom: 10px solid transparent;
  top: -10px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 8px;
  text-transform: uppercase;
  transition: all 0.5s ease;
}

.svg-icon {
  width: 5em;
  height: 5em;
  fill: #3A486F;
}

.svgContainer {
  height: 100px;
  width: 100px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svgContainer svg {
  position: absolute;
  overflow: visible;
}

.dartboard {
  width: 2em;
  height: 2em;
  padding: 6px;
  border: 3px solid #3A486F;
  border-radius: 50%;
  transition: all 0.5s ease;
  transform: scale(2) rotate(34deg);
}

.eyehole {
  transform: scale(1.2) rotate(-270deg);
  transition: all 0.5s ease;
}

.batman {
  transition: all .4s ease-in;
  transform: rotate(55deg) translate(240px, -45px) scale(1.2);
}

.svg-fill-primary {
  fill: #242424;
}

.card-info {
  display: flex;
  flex-direction: column;
  justify-content: end;
  text-align: center;
  gap: 10px;
  align-items: center;
}

.card span {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

.card-info p {
  color: #3A486F;
  font-weight: 600;
}

.card-info .challengeButton {
  text-decoration: none;
  background-color: #343434;
  color: white;
  padding: 5px 15px;
  border-radius: 10px;
  box-sizing: border-box;
  transition: all 0.5s ease;
}

.card:hover {
  box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.83);
}

.card:hover .batman {
  transform: rotate(-50deg) translate(12px, 2px);
}

.card:hover .eyehole {
  transform: scale(1);
}

.card:hover .dartboard {
  transform: scale(1) rotate(0deg) translate(0, 0);
}

.challengeButton:hover {
  background-color: #3A486F;
}

.card:hover::before {
  border-left: 30px solid #182445;
  border-right: 30px solid #182445;
  border-bottom: 10px solid transparent;
  top: -15px;
}
</style>


================================================
FILE: Cards/Javierrocadev_terrible-stingray-70.html
================================================
<div class="card">
  <div class="image"></div>
  <div class="card-info">
    <span>George Johnson</span>
    <p>Support Specialist</p>
  </div>
  <a href="#" class="button">Folow</a>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Source: Javierrocadev - Tags: card, circle, card animation */
.card {
  width: 350px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  background-color: #fffffe;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  width: 350px;
  height: 100px;
  position: absolute;
  top: 0;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: 3px solid #fefefe;
  background: linear-gradient(40deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
  transition: all 0.5s ease;
}

.card * {
  z-index: 1;
}

.image {
  width: 90px;
  height: 90px;
  background-color: #1468BF;
  border-radius: 50%;
  border: 4px solid #fefefe;
  margin-top: 30px;
  transition: all 0.5s ease;
}

.card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  transition: all 0.5s ease;
}

.card-info span {
  font-weight: 600;
  font-size: 24px;
  color: #161A42;
  margin-top: 15px;
  line-height: 5px;
}

.card-info p {
  color: rgba(0, 0, 0, 0.5);
}

.button {
  text-decoration: none;
  background-color: #1468BF;
  color: white;
  padding: 5px 20px;
  border-radius: 5px;
  border: 1px solid white;
  transition: all 0.5s ease;
}

.card:hover::before {
  width: 350px;
  height: 300px;
  border-bottom: none;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  transform: scale(0.95);
}

.card:hover .card-info {
  transform: translate(0%,-25%);
}

.card:hover .image {
  transform: scale(2) translate(-60%,-40%);
}

.button:hover {
  background-color: #FF6844;
  transform: scale(1.1);
}
</style>


================================================
FILE: Cards/Javierrocadev_tough-fireant-65.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: card, light, hover effect, candle -->
<div
  class="w-64 h-64 bg-neutral-800 group relative rounded-xl flex justify-center items-center overflow-hidden"
>
  <div class="w-24 h-24 bottom-8 absolute bg-red-300">
    <div
      class="w-24 h-24 absolute bg-neutral-50 duration-500 shadow-2xl [box-shadow:0px_-75px_55px_-30px_#262626] group-hover:[box-shadow:0px_-75px_95px_0px_#FDE047]"
    >
      <div class="w-24 h-24 bg-neutral-50 shadow-inner shadow-yellow-200"></div>
      <div
        class="w-24 h-24 bg-neutral-50 absolute -bottom-12 rounded-full [transform:_rotateX(80deg)]"
      ></div>
      <div
        class="w-24 h-24 bg-yellow-400 border-4 border-yellow-300 absolute -top-12 rounded-full [transform:_rotateX(80deg)]"
      ></div>
    </div>
    <svg
      class="group-hover:-skew-x-2 duration-500 absolute rounded-full shadow-yellow-200 -top-12 left-4 fill-yellow-300 w-16 h-16"
      height="100"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 100 100"
      width="100"
      x="0"
      xmlns="http://www.w3.org/2000/svg"
      y="0"
    >
      <path
        class=""
        d="M59.5,20.5a3.9,3.9,0,0,0-2.5-2,4.3,4.3,0,0,0-3.3.5,11.9,11.9,0,0,0-3.2,3.5,26,26,0,0,0-2.3,4.4,76.2,76.2,0,0,0-3.3,10.8,120.4,120.4,0,0,0-2.4,14.2,11.4,11.4,0,0,1-3.8-4.2c-1.3-2.7-1.5-6.1-1.5-10.5a4,4,0,0,0-2.5-3.7,3.8,3.8,0,0,0-4.3.9,27.7,27.7,0,1,0,39.2,0,62.4,62.4,0,0,1-5.3-5.8A42.9,42.9,0,0,1,59.5,20.5ZM58.4,70.3a11.9,11.9,0,0,1-20.3-8.4s3.5,2,9.9,2c0-4,2-15.9,5-17.9a21.7,21.7,0,0,0,5.4,7.5,11.8,11.8,0,0,1,3.5,8.4A12,12,0,0,1,58.4,70.3Z"
        fill-rule="evenodd"
      ></path>
    </svg>
  </div>
</div>


    

================================================
FILE: Cards/Javierrocadev_tough-mule-12.html
================================================
<div class="card">
  <div class="card__icons">
    <svg class="svg-icon" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
    <path d="M50,35.7V50L60.7,60.7M82.1,50A32.1,32.1,0,1,1,50,17.9,32.1,32.1,0,0,1,82.1,50Z" stroke-width="8">
    </path>
    </svg>
    <svg class="svg-icon" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
      <path d="M17.7,28.5H82.3a5.4,5.4,0,0,0,5.4-5.4,5.4,5.4,0,0,0-5.4-5.4H17.7a5.4,5.4,0,0,0-5.4,5.4A5.4,5.4,0,0,0,17.7,28.5Z" fill-rule="evenodd">
      </path>
      <path d="M82.3,44.6H17.7a5.4,5.4,0,0,0,0,10.8H82.3a5.4,5.4,0,1,0,0-10.8Z" fill-rule="evenodd">
      </path>
      <path d="M50,71.5H17.7a5.4,5.4,0,0,0-5.4,5.4,5.4,5.4,0,0,0,5.4,5.4H50a5.4,5.4,0,0,0,5.4-5.4A5.4,5.4,0,0,0,50,71.5Z" fill-rule="evenodd">
      </path>
    </svg>
  </div>
  <div class="card__time">
  <p>10:12</p>
  </div>
</div>

<style>
/* From Uiverse.io by Javierrocadev - Tags: youtube, card, video, cardhover , card hover, music player */
.card {
  width: 260px;
  height: 170px;
  background-color: #ffb3b3;
  border-radius: 15px;
  border: 1px solid rgb(156, 151, 151);
  position: relative;
  transition: all .3s ease;
}

.card__icons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 10px;
  padding-top: 10px;
  gap: 10px;
  opacity: 0;
  transition: all .3s ease;
  cursor: pointer;
}

.card__time {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  font-weight: lighter;
  border-radius: 5px;
  text-align: center;
  padding: 2px 8px;
  color: whitesmoke;
  background-color: rgb(77, 67, 67);
}

.svg-icon {
  background-color: rgb(77, 67, 67);
  fill: #ece6e6;
  width: 35px;
  height: 35px;
  border-radius: 5px;
  padding: 2px;
  transition: all .5s ease-in-out;
}

.card:hover {
  opacity: 0.8;
  animation: video 5s ease;
}

.card:hover .card__icons {
  opacity: 1;
}

</style>


================================================
FILE: Cards/Javierrocadev_wet-panda-59.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: simple, card, hover button -->
<div
  class="w-72 h-40 flex flex-col justify-center gap-2 bg-neutral-50 rounded-lg shadow p-2"
>
  <div class="flex gap-2">
    <img class="bg-neutral-500 w-24 h-24 shrink-0 rounded-lg" alt="" />
    <div class="flex flex-col">
      <span class="font-bold text-neutral-700 italic">Card title</span>
      <p class="line-clamp-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non
        dolor augue. Nunc dictum erat sit amet iaculis interdum. Ut neque
        tellus, congue vel lectus aliquam, dignissim porttitor velit.
      </p>
    </div>
  </div>
  <button
    class="hover:bg-indigo-700 bg-indigo-500 font-bold text-neutral-50 rounded p-2"
  >
    See more
  </button>
</div>


    

================================================
FILE: Cards/Javierrocadev_wicked-skunk-52.html
================================================
<div class="card">
  <span class="card__title">Subscribe to Premium</span>
  <p class="card__text">Subscribe to unlock new features and if eligible, receive a share of ads revenue.</p>
  <button class="card__button">Subscribe</button>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Source: twitter.com - Tags: twitter, card, white card, round card */
.card {
  width: 350px;
  height: 160px;
  background: #f7f9f9;
  padding: 10px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}

.card__title {
  font-size: 1.4em;
  font-weight: 800;
}

.card__text {
  font-weight: 500;
}

.card__button {
  cursor: pointer;
  background-color: rgb(15, 20, 25);
  color: #f7f9f9;
  font-size: 1.15em;
  border: none;
  padding: 5px 15px;
  border-radius: 15px;
}

.card__button:hover {
  background-color: #272C30;
}
</style>


================================================
FILE: Cards/Javierrocadev_wonderful-bobcat-57.html
================================================
<div class="container">
   <svg class="svg-icon" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
    <path d="M62.11,53.93c22.582-3.125,22.304-23.471,18.152-29.929-4.166-6.444-10.36-2.153-10.36-2.153v-4.166H30.099v4.166s-6.194-4.291-10.36,2.153c-4.152,6.458-4.43,26.804,18.152,29.929l5.236,7.777v8.249s-.944,4.597-4.833,4.986c-3.903,.389-7.791,4.028-7.791,7.374h38.997c0-3.347-3.889-6.986-7.791-7.374-3.889-.389-4.833-4.986-4.833-4.986v-8.249l5.236-7.777Zm7.388-24.818s2.833-3.097,5.111-1.347c2.292,1.75,2.292,15.86-8.999,18.138l3.889-16.791Zm-44.108-1.347c2.278-1.75,5.111,1.347,5.111,1.347l3.889,16.791c-11.291-2.278-11.291-16.388-8.999-18.138Z">
    </path>
  </svg>  
  <div class="container__star">
     
    <div class="star-eight"></div>
  </div>
  
<div></div></div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: card, star, rotate, hover effect, trophy, winner */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 5em;
  font-weight: 900;
  color: #e10600;
  position: relative;
  transition: all 1s ease;
  text-align: center;
}

.container__star {
  transition: all .7s ease-in-out;
}

.first {
  position: absolute;
  top: 20px;
  left: 50px;
  transition: all .7s ease-in-out;
}

.svg-icon {
  position: absolute;
  fill: #e94822;
  z-index: 1;
}

.star-eight {
  background: #efd510;
  width: 150px;
  height: 150px;
  position: relative;
  text-align: center;
  animation: rot 3s  infinite;
}

.star-eight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 150px;
  width: 150px;
  background: #efd510;
  transform: rotate(135deg);
}

.container:hover .container__star {
  transform: rotateX(70deg) translateY(250px);
  box-shadow: 0px 0px 120px -100px #e4e727;
}

.container:hover .svg-icon {
  animation: grow 1s linear infinite;
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(340deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes grow {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-5deg);
  }

  75% {
    transform: rotate(5deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}
</style>


================================================
FILE: Cards/Javierrocadev_young-panda-66.html
================================================
<div class="card">
  <span class="title">All tags</span>
  <div class="card__tags">
    <ul class="tag">
      <li class="tag__name">JS</li>
      <li class="tag__name">wordpress</li>
      <li class="tag__name">uiverse</li>
      <li class="tag__name">Css</li>
      <li class="tag__name">html</li>
      <li class="tag__name">go</li>
      <li class="tag__name">java</li>
      <li class="tag__name">ux/ui</li>
      <li class="tag__name">figma</li> 
    </ul>
  </div>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: green, card, hover effect, tags */
.card {
  width: 290px;
  height: 300px;
  background: #ecf39e;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  color: #31572c;
  border-radius: 15px;
  box-shadow: -20px 20px 0px -5px #31572c;
}

.title {
  font-weight: 900;
  font-size: 1.7em;
}

.tag__name {
  display: inline-block;
  color: #fff;
  font-size: 1.1em;
  background-color: #31572c;
  padding: 6px 23px 9px;
  border-radius: 70em;
  margin: 8px 6px 8px 0;
  margin-left: 0px;
  position: relative;
  text-transform: lowercase;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.tag__name::before,.tag__name::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 40%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #90a955;
}

.tag__name::before {
  left: 7px;
}

.tag__name::after {
  right: 7px;
}

.tag__name:hover {
  transform: scale(1.1);
  background-color: #51572c;
}
</style>


================================================
FILE: Cards/JaydipPrajapati1910_bitter-fireant-97.html
================================================
<div class="card"></div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: black, gradient, card */
.card {
  width: 190px;
  height: 254px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0px 15px;
  background-color: red;
  border-radius: 10px;
  border: none;
  color: white;
  position: relative;
  cursor: pointer;
  font-weight: 900;
  transition-duration: .2s;
  background: linear-gradient(0deg, #000, #272727);
}

.card:before, .card:after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  border-radius: 10px;
  background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
		#0000ff, #00ff00,#ffff00, #ff0000);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: steam 20s linear infinite;
}

@keyframes steam {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}

.card:after {
  filter: blur(100px);
}


</style>


================================================
FILE: Cards/JaydipPrajapati1910_dry-termite-86.html
================================================
<div class="container">
  <div class="card">
    <div class="box">
      <div class="content">
        <span class="heading">01</span>
        <span class="content">Card </span>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, totam velit? Iure nemo labore inventore?</p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div></div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: card, animated */
.container {
  background: #232427;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 40px 0;
  border-radius: 20px;
}

.container .card {
  position: relative;
  min-width: 320px;
  height: 380px;
  box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
    inset -5px -5px 15px rgba(255, 255, 255, 0.1),
    5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  margin: 30px;
  transition: 0.5s;
}

.container .card:nth-child(1) .box .content a {
  background: #2196f3;
}

.container .card:nth-child(2) .box .content a {
  background: #e91e63;
}

.container .card:nth-child(3) .box .content a {
  background: #23c186;
}

.container .card .box {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: #2a2b2f;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.5s;
}

.container .card .box:hover {
  transform: translateY(-50px);
}

.container .card .box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
}

.container .card .box .content {
  padding: 20px;
  text-align: center;
}

.container .card .box .content .heading {
  position: absolute;
  top: -10px;
  right: 30px;
  font-size: 8rem;
  color: rgba(255, 255, 255, 0.1);
}

.container .card .box .content .content {
  font-size: 1.8rem;
  color: #fff;
  z-index: 1;
  transition: 0.5s;
  margin-bottom: 15px;
}

.container .card .box .content p {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  z-index: 1;
  transition: 0.5s;
}

.container .card .box .content a {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  background: black;
  border-radius: 5px;
  text-decoration: none;
  color: white;
  margin-top: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: 0.5s;
}

.container .card .box .content a:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
  background: #fff;
  color: #000;
}

</style>


================================================
FILE: Cards/JaydipPrajapati1910_great-panda-16.html
================================================
<div class="card"></div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: card, box-shadow, photo card */
.card {
  width: 200px;
  height: 250px;
  border: none;
  border-radius: 10px;
  background: radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #ff0000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%);
  background-blend-mode: normal, normal, screen, overlay, normal;
  box-shadow: 0px 0px 10px 1px #000000;
}




</style>


================================================
FILE: Cards/JaydipPrajapati1910_kind-lionfish-71.html
================================================
<div class="card">
      <div class="card-header">
            <div class="card-header-bar">
              <a class="btn-message" href="#"><svg viewBox="0 0 16 16" class="bi bi-chat-dots-fill" fill="white" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
</svg><span class="sr-only">Message</span></a>
              <a class="btn-menu" href="#"><svg viewBox="0 0 16 16" class="bi bi-list" fill="white" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" fill-rule="evenodd"></path>
</svg><span class="sr-only">Menu</span></a>
            </div>
             <span class="image">Image Here</span>  
            <div class="card-header-slanted-edge">      
            </div>
      </div>

      <div class="card-body">
          <span class="name">John Smith</span><br>
          <span class="job-title"><u>Product Designer</u></span>
          <div class="bio">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aperiam.</div>
          <div class="social-accounts">
            <a href="#"><svg viewBox="0 0 16 16" class="bi bi-facebook" fill="grey" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path>
</svg><span class="sr-only">facebook</span></a>
            <a href="#"><svg viewBox="0 0 16 16" class="bi bi-twitter" fill="grey" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg><span class="sr-only">Twitter</span></a>
            <a href="#">
            <svg viewBox="0 0 16 16" class="bi bi-instagram" fill="grey" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
</svg><span class="sr-only">Instagram</span></a>
          </div>
      </div>

      <div class="card-footer">
          <div class="stats">
              <div class="stat">
                <span class="label">Following</span>
                <span class="value">56K</span>
              </div>
              <div class="stat">
                <span class="label">Followers</span>
                <span class="value">940</span>
              </div>
              <div class="stat">
                <span class="label">Likes</span>
                <span class="value">320</span>
              </div>
          </div>
      </div>
  </div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: gradient, card, social links, card design */
.card {
  position: relative;
  width: 315px;
  height: 450px;
  margin: 30px auto;
  box-shadow: 0 0 100px rgba(0,0,0, .3);
  border-radius: 10px;
}

.card-header {
  position: relative;
  height: 220px;
  background-size: cover;
  background-position: top;
}

.card-header:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgb(5,85,134), rgba(181,181,181, -0.20));
  border-radius: 10px;
}

.image {
  position: absolute;
  margin-top: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #222;
  font-size: 20px;
  font-weight: 400;
}

.card-header-bar {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0,0,0,0);
  border: none;
  overflow: hidden;
}

.btn-message {
  display: inline-block;
  width: 19.37px;
  height: 16.99px;
  margin-right: 10px;
  margin-top: 10px;
  float: right;
}

.btn-menu {
  display: inline-block;
  background: width: 19px;
  height: 12.16px;
  margin-left: 10px;
  margin-top: 10px;
  float: left;
}

.card-header-slanted-edge {
  position: absolute;
  bottom: -3px;
  z-index: 1;
  width: 100%;
  right: 0;
  left: 0;
}

.card-body {
  text-align: center;
  padding-left: 10px;
}

.name {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 auto;
}

.job-title {
  font-size: 14px;
  font-weight: 300;
  margin-top: 15px;
  color: #919191;
}

.bio {
  font-size: 14px;
  color: #7B7B7B;
  font-weight: 300;
  margin: 10px auto;
  line-height: 20px;
}

.social-accounts img {
  width: 15px;
}

.social-accounts a {
  margin-left: 10px;
}

.social-accounts a:first-child {
  margin-left: 0;
}

.card-footer {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 20px;
}

.stat {
  box-sizing: border-box;
  width: calc(100% / 3);
  float: left;
  text-align: center;
}

.stat:nth-child(2) {
  border-left: 1px solid grey;
}

.stat:nth-child(3) {
  border-left: 1px solid grey;
}

.stat .label {
  display: block;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 1px;
  color: #95989A;
}

.stat .value {
  display: block;
  font-weight: 700;
  font-size: 20px;
  margin-top: 5px;
}
</style>


================================================
FILE: Cards/JaydipPrajapati1910_popular-walrus-75.html
================================================
<ul>
  <li>
    <a href="#">
      <span>
     Hover Me
      </span>
    </a>
  </li> 
  </ul>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: 3d, card, shadow, box-shadow */
ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
  margin: 0 5px;
}

ul li a span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  letter-spacing: 1px;
  transition: .5s;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: sans-serif;
  font-size: px;
  font-weight: 900;
}

ul li a {
  text-decoration: none;
  display: block;
  width: 200px;
  height: 250px;
  background: #333;
  padding-left: 20px;
  transform: rotate(-30deg) skew(25deg) translate(0,0);
  transition-duration: .5s;
  box-shadow: -20px 20px 10px rgba(0,0,0,.5);
}

ul li a:before {
  content: '';
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  background: #444;
  transition-duration: .5s;
  transform: rotate(0deg) skewY(-45deg);
}

ul li a:after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -10px;
  height: 20px;
  width: 100%;
  background: #444;
  transition-duration: .5s;
  transform: rotate(0deg) skewX(-45deg);
}

ul li a:hover {
  transform: rotate(-30deg) skew(25deg) translate(20px,-15px);
  box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}

ul li:hover span {
  color: #fff;
}

ul li:hover:nth-child(1) a {
  background: #00aced;
}

ul li:hover:nth-child(1) a:before {
  background: #097aa5;
}

ul li:hover:nth-child(1) a:after {
  background: #53b9e0;
}



</style>


================================================
FILE: Cards/JaydipPrajapati1910_slimy-starfish-15.html
================================================
<div class="card shadow">

<div class="ribbon">
    <div class="ribbon-stitches-top"></div>
    <div class="ribbon-content">
        <span>Text Here</span>
    </div>
    <div class="ribbon-stitches-bottom"></div>
</div>
</div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: card, white and red, card template, ribbon  */
.card {
  width: 200px;
  height: 290px;
  background: white;
  border-radius: 10px;
  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
}

.shadow {
  box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
}

.ribbon {
  width: 230px;
  position: absolute;
  margin-top: 229px;
  margin-left: -20px;
  text-align: center;
  font-size: 20px !important;
  background: #D64B4B;
  background: -webkit-gradient(linear, left top, left bottom, from(#D64B4B), to(#AB2C2C));
  background: -webkit-linear-gradient(top, #D64B4B, #AB2C2C);
  background: -moz-linear-gradient(top, #D64B4B, #AB2C2C);
  background: -ms-linear-gradient(top, #D64B4B, #AB2C2C);
  background: -o-linear-gradient(top, #D64B4B, #AB2C2C);
  background-image: -ms-linear-gradient(top, #D64B4B 0%, #AB2C2C 100%);
  -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 1px;
  -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 1px;
  box-shadow: rgba(0,0,0,0.3) 0 1px 1px;
  font-family: 'Helvetica Neue',Helvetica, sans-serif;
}

.ribbon span {
  font-size: 35px !important;
  color: #801111;
  text-shadow: #D65C5C 0 1px 0;
  margin: 0px;
  padding: 19px 10px;
}

.ribbon:before, .ribbon:after {
  content: '';
  position: absolute;
  display: block;
  bottom: -1em;
  border: 1.5em solid #C23A3A;
  z-index: -1;
}

.ribbon:before {
  left: -2em;
  border-right-width: 1.5em;
  border-left-color: transparent;
  -webkit-box-shadow: rgba(0,0,0,0.4) 1px 1px 1px;
  -moz-box-shadow: rgba(0,0,0,0.4) 1px 1px 1px;
  box-shadow: rgba(0,0,0,0.4) 1px 1px 1px;
}

.ribbon:after {
  right: -2em;
  border-left-width: 1.5em;
  border-right-color: transparent;
  -webkit-box-shadow: rgba(0,0,0,0.4) -1px 1px 1px;
  -moz-box-shadow: rgba(0,0,0,0.4) -1px 1px 1px;
  box-shadow: rgba(0,0,0,0.4) -1px 1px 1px;
}

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
  border-color: #871616 transparent transparent transparent;
  position: absolute;
  display: block;
  border-style: solid;
  bottom: -1em;
  content: '';
}

.ribbon .ribbon-content:before {
  left: 0;
  border-width: 1em 0 0 1em;
}

.ribbon .ribbon-content:after {
  right: 0;
  border-width: 1em 1em 0 0;
}

.ribbon-stitches-top {
  margin-top: 2px;
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
}

.ribbon-stitches-bottom {
  margin-bottom: 2px;
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
}

</style>


================================================
FILE: Cards/JaydipPrajapati1910_strange-walrus-5.html
================================================
<div class="card">
<div class="card__content">
card</div>
</div>







<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: white, black, card, box-shadow */
.card {
  width: 190px;
  height: 254px;
  border-radius: 20px;
  padding: 2px;
  box-shadow: #111 0 1px 3px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  position: relative;
  cursor: pointer;
}

.card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(0deg, #000, #272727);
  color: #fff;
  border-radius: 17px;
  width: 100%;
  height: 100%;
  font-size: 20px;
  font-weight: 900;
}


 







 












</style>


================================================
FILE: Cards/JesusRafaelNavaCruz_soft-cat-28.html
================================================
<div class="container">
  <div class="card">
    <p class="title">
      Rick Sanchez
    </p>
  </div>
  <div class="card">
    <p class="title">
      Morty Smith
    </p>
  </div>
  <div class="card">
    <p class="title">
      Summer Smith
    </p>
  </div>

  <div class="card">
    <p class="title">
      Beth Smith
    </p>
  </div>
</div>
<style>
/* From Uiverse.io by JesusRafaelNavaCruz - Tags: slider, sliding, slide */
.container {
  overflow: auto;
  display: flex;
  scroll-snap-type: x mandatory;
  width: 90%;
  margin: 0 auto;
  padding: 0 15px;
}

.card {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: 10px;
  padding: 2rem;
  margin: 1rem;
  width: 100%;
}

.title {
  width: 100%;
  display: inline-block;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  margin: 1rem auto;
}
</style>


================================================
FILE: Cards/JinHuynh_friendly-octopus-41.html
================================================
<a class="card education" href="#">
  <div class="overlay"></div>
  <div class="circle">
    <svg
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      viewBox="29 14 71 76"
      height="76px"
      width="71px"
    >
      <desc>Created with Sketch.</desc>
      <defs></defs>
      <g
        transform="translate(30.000000, 14.000000)"
        fill-rule="evenodd"
        fill="none"
        stroke-width="1"
        stroke="none"
        id="Group"
      >
        <g fill="#D98A19" id="Group-8">
          <g id="Group-7">
            <g id="Group-6">
              <path
                id="Fill-1"
                d="M0,0 L0,75.9204805 L69.1511499,75.9204805 L0,0 Z M14.0563973,32.2825679 L42.9457663,63.9991501 L14.2315268,63.9991501 L14.0563973,32.2825679 Z"
              ></path>
            </g>
          </g>
        </g>
        <g
          stroke-linecap="square"
          stroke="#FFFFFF"
          transform="translate(0.000000, 14.114286)"
          id="Group-20"
        >
          <path
            id="Line"
            d="M0.419998734,54.9642857 L4.70316223,54.9642857"
          ></path>
          <path
            id="Line"
            d="M0.419998734,50.4404762 L4.70316223,50.4404762"
          ></path>
          <path
            id="Line"
            d="M0.419998734,45.9166667 L4.70316223,45.9166667"
          ></path>
          <path
            id="Line"
            d="M0.419998734,41.3928571 L2.93999114,41.3928571"
          ></path>
          <path
            id="Line"
            d="M0.419998734,36.8690476 L4.70316223,36.8690476"
          ></path>
          <path
            id="Line"
            d="M0.419998734,32.3452381 L4.70316223,32.3452381"
          ></path>
          <path
            id="Line"
            d="M0.419998734,27.8214286 L4.70316223,27.8214286"
          ></path>
          <path
            id="Line"
            d="M0.419998734,23.297619 L2.93999114,23.297619"
          ></path>
          <path
            id="Line"
            d="M0.419998734,18.7738095 L4.70316223,18.7738095"
          ></path>
          <path id="Line" d="M0.419998734,14.25 L4.70316223,14.25"></path>
          <path
            id="Line"
            d="M0.419998734,9.72619048 L4.70316223,9.72619048"
          ></path>
          <path
            id="Line"
            d="M0.419998734,5.20238095 L2.93999114,5.20238095"
          ></path>
          <path
            id="Line"
            d="M0.419998734,0.678571429 L4.70316223,0.678571429"
          ></path>
        </g>
      </g>
    </svg>
  </div>
  <p>Education</p>
</a>

<style>
/* From Uiverse.io by JinHuynh  - Tags: card, hover effect, cardhover , card hover */
.education {
  --bg-color: #ffd861;
  --bg-color-light: #ffeeba;
  --text-color-hover: #4c5656;
  --box-shadow-color: rgba(255, 215, 97, 0.48);
}

.credentialing {
  --bg-color: #b8f9d3;
  --bg-color-light: #e2fced;
  --text-color-hover: #4c5656;
  --box-shadow-color: rgba(184, 249, 211, 0.48);
}

.wallet {
  --bg-color: #ceb2fc;
  --bg-color-light: #f0e7ff;
  --text-color-hover: #fff;
  --box-shadow-color: rgba(206, 178, 252, 0.48);
}

.human-resources {
  --bg-color: #dce9ff;
  --bg-color-light: #f1f7ff;
  --text-color-hover: #4c5656;
  --box-shadow-color: rgba(220, 233, 255, 0.48);
}

.card {
  width: 220px;
  height: 321px;
  background: #fff;
  border-top-right-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease-out;
  text-decoration: none;
}

.card:hover {
  transform: translateY(-5px) scale(1.005) translateZ(0);
  box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11),
    0 24px 46px var(--box-shadow-color);
}

.card:hover .overlay {
  transform: scale(4) translateZ(0);
}

.card:hover .circle {
  border-color: var(--bg-color-light);
  background: var(--bg-color);
}

.card:hover .circle:after {
  background: var(--bg-color-light);
}

.card:hover p {
  color: var(--text-color-hover);
}

.card:active {
  transform: scale(1) translateZ(0);
  box-shadow: 0 15px 24px rgba(0, 0, 0, 0.11),
    0 15px 24px var(--box-shadow-color);
}

.card p {
  font-size: 17px;
  color: #4c5656;
  margin-top: 30px;
  z-index: 1000;
  transition: color 0.3s ease-out;
}

.circle {
  width: 136px;
  height: 136px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-out;
}

.circle:after {
  content: "";
  width: 118px;
  height: 118px;
  display: block;
  position: absolute;
  background: var(--bg-color);
  border-radius: 50%;
  top: 7px;
  left: 7px;
  transition: opacity 0.3s ease-out;
}

.circle svg {
  z-index: 10000;
  transform: translateZ(0);
}

.overlay {
  width: 118px;
  position: absolute;
  height: 118px;
  border-radius: 50%;
  background: var(--bg-color);
  top: 70px;
  left: 50px;
  z-index: 0;
  transition: transform 0.3s ease-out;
}

</style>
    

================================================
FILE: Cards/JkHuger_dull-impala-9.html
================================================
<div class="cardBox">
  <div class="card">
    <span class="text">Hover Me</span>
    <div class="content">
      <p>Hi, put your text here</p>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: card */
.cardBox {
  width: 270px;
  height: 300px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px 0px,
    rgba(0, 0, 0, 0.5) 0px 2px 25px 0px;
}

.card {
  position: absolute;
  width: 95%;
  height: 95%;
  background: #000814;
  border-radius: 20px;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  padding: 20px;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 60px -12px inset,
    rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset;
}

.card h3, span {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: 800;
  pointer-events: none;
  opacity: 0.1;
}

.text {
  top: 50%;
}

.card .content h3 {
  font-size: 3rem;
  padding-bottom: 10px;
}

.card .content p {
  font-size: 1.6rem;
  line-height: 25px;
}

.card .content {
  transform: translateY(100%);
  opacity: 0;
  transition: 0.3s ease-in-out;
}

.card:hover .content {
  transform: translateY(0);
  opacity: 1;
}

.cardBox::before {
  content: "";
  position: absolute;
  width: 40%;
  height: 150%;
  background: #40E0D0;
  background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
  background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
  animation: glowing01 5s linear infinite;
  transform-origin: center;
  animation: glowing 5s linear infinite;
}

@keyframes glowing {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

</style>


================================================
FILE: Cards/JkHuger_nice-walrus-27.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: card */
.card {
  background-color: #191c27;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
  height: 210px;
  width: 350px;
}

.heading {
  color: #ffffff;
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  margin: 20px;
  text-shadow: 0 0 5px #ffffff;
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 20px;
}

.item {
  align-items: center;
  background-color: #343a4b;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  height: 80px;
  justify-content: center;
  width: 100px;
  transition: transform 0.2s ease-in-out;
  margin: 10px;
}

.item:hover {
  transform: translateY(-10px);
}

.item svg {
  fill: #ffffff;
  height: 40px;
  margin-bottom: 10px;
  width: 40px;
}

.item--create svg {
  animation: spin 2s linear infinite;
}

.item--post svg {
  animation: upDown 2s ease-in-out infinite alternate;
}

.item--inspire svg {
  animation: flash 1.2s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes upDown {
  0% {
    transform: translateY(1.8px);
  }

  100% {
    transform: translateY(-1.8px);
  }
}

@keyframes flash {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.item span {
  color: #ffffff;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  text-shadow: 0 0 5px #ffffff;
}

.item--create:hover {
  background-color: #6d9eeb;
  transition: transform .35s ease-in-out;
}

.item--post:hover {
  background-color: #f4b41a;
  transition: transform .35s ease-in-out;
}

.item--inspire:hover {
  background-color: #eb6d6d;
  transition: transform .35s ease-in-out;
}

button {
  background-color: #2E4057;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

button:hover {
  background-color: #3E5368;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}


</style>


================================================
FILE: Cards/JkHuger_spotty-swan-68.html
================================================
<div class="card">
<div class="card__info">
    <div class="card__logo">MasterCard</div>
    <div class="card__chip">
        <svg class="card__chip-lines" role="img" width="20px" height="20px" viewBox="0 0 100 100" aria-label="Chip">
            <g opacity="0.8">
                <polyline points="0,50 35,50" fill="none" stroke="#000" stroke-width="2"></polyline>
                <polyline points="0,20 20,20 35,35" fill="none" stroke="#000" stroke-width="2"></polyline>
                <polyline points="50,0 50,35" fill="none" stroke="#000" stroke-width="2"></polyline>
                <polyline points="65,35 80,20 100,20" fill="none" stroke="#000" stroke-width="2"></polyline>
                <polyline points="100,50 65,50" fill="none" stroke="#000" stroke-width="2"></polyline>
                <polyline points="35,35 65,35 65,65 35,65 35,35" fill="none" stroke="#000" stroke-width="2"></polyline>
                <polyline points="0,80 20,80 35,65" fill="none" stroke="#000" stroke-width="2"></polyline>
                <polyline points="50,100 50,65" fill="none" stroke="#000" stroke-width="2"></polyline>
                <polyline points="65,65 80,80 100,80" fill="none" stroke="#000" stroke-width="2"></polyline>
            </g>
        </svg>
        <div class="card__chip-texture"></div>
    </div>
      <div class="card__type">debit</div>
      <div class="card__number">
        <span class="card__digit-group">0123</span>
        <span class="card__digit-group">4567</span>
        <span class="card__digit-group">8901</span>
        <span class="card__digit-group">2345</span>
    </div>
      <div class="card__valid-thru" aria-label="Valid thru">Valid<br>thru</div>
      <div class="card__exp-date"><time datetime="2038-01">01/38</time></div>
      <div class="card__name" aria-label="Dee Stroyer">Jk Huger</div>
      <div class="card__vendor" role="img" aria-labelledby="card-vendor">
      <span id="card-vendor" class="card__vendor-sr">Mastercard</span>
    </div>
<div class="card__texture"></div>
        </div>
            </div>
<style>
/* From Uiverse.io by JkHuger - Tags: card, glossy, debitcard */
.card,
.card__chip {
  overflow: hidden;
  position: relative;
}

.card,
.card__chip-texture,
.card__texture {
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.card {
  animation-name: rotate_500;
  background-color: var(--primary);
  background-image: radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 29.5%,hsla(0,0%,100%,0) 30%),
        radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 39.5%,hsla(0,0%,100%,0) 40%),
        radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 49.5%,hsla(0,0%,100%,0) 50%);
  border-radius: 0.5em;
  box-shadow: 0 0 0 hsl(0,0%,80%),
        0 0 0 hsl(0,0%,100%),
        -0.2rem 0 0.75rem 0 hsla(0,0%,0%,0.3);
  color: hsl(0,0%,100%);
  width: 10.3em;
  height: 6.8em;
  transform: translate3d(0,0,0);
}

.card__info,
.card__chip-texture,
.card__texture {
  position: absolute;
}

.card__chip-texture,
.card__texture {
  animation-name: texture;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
}

.card__info {
  font: 0.75em/1 "DM Sans", sans-serif;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.75rem;
  inset: 0;
}

.card__logo,
.card__number {
  width: 100%;
}

.card__logo {
  font-weight: bold;
  font-style: italic;
}

.card__chip {
  background-image: linear-gradient(hsl(0,0%,70%),hsl(0,0%,80%));
  border-radius: 0.2rem;
  box-shadow: 0 0 0 0.05rem hsla(0,0%,0%,0.5) inset;
  width: 1.25rem;
  height: 1.25rem;
  transform: translate3d(0,0,0);
}

.card__chip-lines {
  width: 100%;
  height: auto;
}

.card__chip-texture {
  background-image: linear-gradient(-80deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0.6) 48% 52%,hsla(0,0%,100%,0));
}

.card__type {
  align-self: flex-end;
  margin-left: auto;
}

.card__digit-group,
.card__exp-date,
.card__name {
  background: linear-gradient(hsl(0,0%,100%),hsl(0,0%,85%) 15% 55%,hsl(0,0%,70%) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Courier Prime", monospace;
  filter: drop-shadow(0 0.05rem hsla(0,0%,0%,0.3));
}

.card__number {
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
}

.card__valid-thru,
.card__name {
  text-transform: uppercase;
}

.card__valid-thru,
.card__exp-date {
  margin-bottom: 0.25rem;
  width: 50%;
}

.card__valid-thru {
  font-size: 0.3rem;
  padding-right: 0.25rem;
  text-align: right;
}

.card__exp-date,
.card__name {
  font-size: 0.6rem;
}

.card__exp-date {
  padding-left: 0.25rem;
}

.card__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 6.25rem;
}

.card__vendor,
.card__vendor:before,
.card__vendor:after {
  position: absolute;
}

.card__vendor {
  right: 0.375rem;
  bottom: 0.375rem;
  width: 2.55rem;
  height: 1.5rem;
}

.card__vendor:before,
.card__vendor:after {
  border-radius: 50%;
  content: "";
  display: block;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.card__vendor:before {
  background-color: #e71d1a;
  left: 0;
}

.card__vendor:after {
  background-color: #fa5e03;
  box-shadow: -1.05rem 0 0 #f59d1a inset;
  right: 0;
}

.card__vendor-sr {
  clip: rect(1px,1px,1px,1px);
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
}

.card__texture {
  animation-name: texture;
  background-image: linear-gradient(-80deg,hsla(0,0%,100%,0.3) 25%,hsla(0,0%,100%,0) 45%);
}
 
/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue),10%,30%);
    --fg: hsl(var(--hue),10%,90%);
  }
}

/* Animation */
@keyframes rotate_500 {
  from,
    to {
    animation-timing-function: ease-in;
    box-shadow: 0 0 0 hsl(0,0%,80%),
            0.1rem 0 0 hsl(0,0%,100%),
            -0.2rem 0 0.75rem 0 hsla(0,0%,0%,0.3);
    transform: rotateY(-10deg);
  }

  25%,
    75% {
    animation-timing-function: ease-out;
    box-shadow: 0 0 0 hsl(0,0%,80%),
            0 0 0 hsl(0,0%,100%),
            -0.25rem -0.05rem 1rem 0.15rem hsla(0,0%,0%,0.3);
    transform: rotateY(0deg);
  }

  50% {
    animation-timing-function: ease-in;
    box-shadow: -0.1rem 0 0 hsl(0,0%,80%),
            0 0 0 hsl(0,0%,100%),
            -0.3rem -0.1rem 1.5rem 0.3rem hsla(0,0%,0%,0.3);
    transform: rotateY(10deg);
  }
}

@keyframes texture {
  from,
    to {
    transform: translate3d(0,0,0);
  }

  50% {
    transform: translate3d(-50%,0,0);
  }
}                
</style>


================================================
FILE: Cards/John-CFO_heavy-goose-49.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by John-CFO - Tags:  */
.card {
  background-color: #161617;
  height: 360px;
  width: 310px;
  position: relative;
  padding: 10px;
  padding-top: 10px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.card::before {
  content: '';
  background: linear-gradient(315deg,#03a9f4,#ff0058);
  height: 368px;
  width: 318px;
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: -1;
  border-radius: 12px;
}

.heading {
  line-height: 10px;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  color: rgb(110, 110, 110);
}

.heading span {
  position: relative;
  top: 24px;
  font-size: 50px;
  font-weight: bold;
  color: rgb(176, 243, 255);
  z-index: 2;
  font-family: 'Avalors Personal Use';
  letter-spacing: 5px;
  text-shadow: 0 0 14px white;
}

.content {
  width: 100%;
  height: 250px;
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.item {
  color: white;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.item svg {
  transition-duration: .3s;
}

.item:hover svg {
  color: rgb(176,243,255);
  transition-duration: .2s;
  transform: translateX(-1em);
}

button {
  --glow-color: rgb(176, 243, 255);
  --glow-spread-color: rgba(123, 251, 255, 0.781);
  --enhanced-glow-color: rgb(71, 182, 182);
  --btn-color: rgba(13, 17, 241, 0.508);
  border: .25em solid var(--glow-color);
  padding: 1em 2em;
  color: var(--glow-color);
  font-size: 14px;
  font-weight: bold;
  background-color: var(--btn-color);
  border-radius: 1em;
  outline: none;
  box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 1em var(--glow-spread-color),
        inset 0 0 .05em .25em var(--glow-color);
  text-shadow: 0 0 .5em var(--glow-color);
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
}

button::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 120%;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--glow-spread-color);
  filter: blur(2em);
  opacity: .7;
  transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
}

button:hover {
  color: var(--btn-color);
  background-color: var(--glow-color);
  box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 2em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
}

button:active {
  box-shadow: 0 0 0.6em .25em var(--glow-color),
        0 0 2.5em 2em var(--glow-spread-color),
        inset 0 0 .5em .25em var(--glow-color);
}





</style>


================================================
FILE: Cards/JohnnyCSilva_black-rabbit-68.html
================================================
<div class="coin">
  <div class="side heads">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 4091.27 4091.73" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"></metadata>
  <g id="_1421344023328">
   <path fill="#F7931A" fill-rule="nonzero" d="M4030.06 2540.77c-273.24,1096.01 -1383.32,1763.02 -2479.46,1489.71 -1095.68,-273.24 -1762.69,-1383.39 -1489.33,-2479.31 273.12,-1096.13 1383.2,-1763.19 2479,-1489.95 1096.06,273.24 1763.03,1383.51 1489.76,2479.57l0.02 -0.02z"></path>
   <path fill="white" fill-rule="nonzero" d="M2947.77 1754.38c40.72,-272.26 -166.56,-418.61 -450,-516.24l91.95 -368.8 -224.5 -55.94 -89.51 359.09c-59.02,-14.72 -119.63,-28.59 -179.87,-42.34l90.16 -361.46 -224.36 -55.94 -92 368.68c-48.84,-11.12 -96.81,-22.11 -143.35,-33.69l0.26 -1.16 -309.59 -77.31 -59.72 239.78c0,0 166.56,38.18 163.05,40.53 90.91,22.69 107.35,82.87 104.62,130.57l-104.74 420.15c6.26,1.59 14.38,3.89 23.34,7.49 -7.49,-1.86 -15.46,-3.89 -23.73,-5.87l-146.81 588.57c-11.11,27.62 -39.31,69.07 -102.87,53.33 2.25,3.26 -163.17,-40.72 -163.17,-40.72l-111.46 256.98 292.15 72.83c54.35,13.63 107.61,27.89 160.06,41.3l-92.9 373.03 224.24 55.94 92 -369.07c61.26,16.63 120.71,31.97 178.91,46.43l-91.69 367.33 224.51 55.94 92.89 -372.33c382.82,72.45 670.67,43.24 791.83,-303.02 97.63,-278.78 -4.86,-439.58 -206.26,-544.44 146.69,-33.83 257.18,-130.31 286.64,-329.61l-0.07 -0.05zm-512.93 719.26c-69.38,278.78 -538.76,128.08 -690.94,90.29l123.28 -494.2c152.17,37.99 640.17,113.17 567.67,403.91zm69.43 -723.3c-63.29,253.58 -453.96,124.75 -580.69,93.16l111.77 -448.21c126.73,31.59 534.85,90.55 468.94,355.05l-0.02 0z"></path>
  </g>
 </g>
    </svg>
  </div>
  <div class="side tails">
    <svg xmlns="http://www.w3.org/2000/svg" class="svg_back" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 4091.27 4091.73" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"></metadata>
  <g id="_1421344023328">
   <path fill="#F7931A" fill-rule="nonzero" d="M4030.06 2540.77c-273.24,1096.01 -1383.32,1763.02 -2479.46,1489.71 -1095.68,-273.24 -1762.69,-1383.39 -1489.33,-2479.31 273.12,-1096.13 1383.2,-1763.19 2479,-1489.95 1096.06,273.24 1763.03,1383.51 1489.76,2479.57l0.02 -0.02z"></path>
   <path fill="white" fill-rule="nonzero" d="M2947.77 1754.38c40.72,-272.26 -166.56,-418.61 -450,-516.24l91.95 -368.8 -224.5 -55.94 -89.51 359.09c-59.02,-14.72 -119.63,-28.59 -179.87,-42.34l90.16 -361.46 -224.36 -55.94 -92 368.68c-48.84,-11.12 -96.81,-22.11 -143.35,-33.69l0.26 -1.16 -309.59 -77.31 -59.72 239.78c0,0 166.56,38.18 163.05,40.53 90.91,22.69 107.35,82.87 104.62,130.57l-104.74 420.15c6.26,1.59 14.38,3.89 23.34,7.49 -7.49,-1.86 -15.46,-3.89 -23.73,-5.87l-146.81 588.57c-11.11,27.62 -39.31,69.07 -102.87,53.33 2.25,3.26 -163.17,-40.72 -163.17,-40.72l-111.46 256.98 292.15 72.83c54.35,13.63 107.61,27.89 160.06,41.3l-92.9 373.03 224.24 55.94 92 -369.07c61.26,16.63 120.71,31.97 178.91,46.43l-91.69 367.33 224.51 55.94 92.89 -372.33c382.82,72.45 670.67,43.24 791.83,-303.02 97.63,-278.78 -4.86,-439.58 -206.26,-544.44 146.69,-33.83 257.18,-130.31 286.64,-329.61l-0.07 -0.05zm-512.93 719.26c-69.38,278.78 -538.76,128.08 -690.94,90.29l123.28 -494.2c152.17,37.99 640.17,113.17 567.67,403.91zm69.43 -723.3c-63.29,253.58 -453.96,124.75 -580.69,93.16l111.77 -448.21c126.73,31.59 534.85,90.55 468.94,355.05l-0.02 0z"></path>
  </g>
 </g>
</svg></div>
</div>
<style>
/* From Uiverse.io by JohnnyCSilva  - Tags: card, crypto, bitcoin, rotating */
.coin {
  font-size: 200px;
  width: 0.1em;
  height: 1em;
  background: linear-gradient(#faa504, #141001);
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: rotate_4001510 7s infinite linear;
  transform-style: preserve-3d;
}

.coin .side, .coin:before, .coin:after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  overflow: hidden;
  border-radius: 50%;
  right: -0.4em;
  text-align: center;
  line-height: 1;
  transform: rotateY(-90deg);
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.coin .tails, .coin:after {
  left: -0.4em;
  transform: rotateY(90deg);
}

.coin:before, .coin:after {
  background: linear-gradient(#faa504, #141001);
  backface-visibility: hidden;
  transform: rotateY(90deg);
}

.coin:after {
  transform: rotateY(-90deg);
}

@keyframes rotate_4001510 {
  100% {
    transform: rotateY(360deg);
  }
}

.svg_back {
  transform: scaleX(-1);
}

</style>
    

================================================
FILE: Cards/JohnnyCSilva_jolly-elephant-67.html
================================================
<div class="card">
  <div class="img">
    <div class="save">
      <svg class="svg" width="683" height="683" viewBox="0 0 683 683" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_25)">
  <mask id="mask0_993_25" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="683" height="683">
  <path d="M0 -0.00012207H682.667V682.667H0V-0.00012207Z" fill="white"></path>
  </mask>
  <g mask="url(#mask0_993_25)">
  <path d="M148.535 19.9999C137.179 19.9999 126.256 24.5092 118.223 32.5532C110.188 40.5866 105.689 51.4799 105.689 62.8439V633.382C105.689 649.556 118.757 662.667 134.931 662.667H135.039C143.715 662.667 151.961 659.218 158.067 653.09C186.451 624.728 270.212 540.966 304.809 506.434C314.449 496.741 327.623 491.289 341.335 491.289C355.045 491.289 368.22 496.741 377.859 506.434C412.563 541.074 496.752 625.242 524.816 653.348C530.813 659.314 538.845 662.667 547.308 662.667C563.697 662.667 576.979 649.395 576.979 633.019V62.8439C576.979 51.4799 572.48 40.5866 564.447 32.5532C556.412 24.5092 545.489 19.9999 534.133 19.9999H148.535Z" stroke="#CED8DE" stroke-width="40" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
  </g>
  </g>
  <defs>
  <clipPath id="clip0_993_25">
  <rect width="682.667" height="682.667" fill="white"></rect>
  </clipPath>
  </defs>
      </svg>
    </div>
  </div>

  <div class="text">
    <p class="h3"> Meeting your Colleagues </p>
    <p class="p"> 6 Video - 40 min </p>

    <div class="icon-box">
      <svg version="1.1" class="svg" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
	<path style="fill:#3D6687;" d="M165,68.715l-26.327-26.327l37.363-37.363c3.739-3.739,9.801-3.739,13.54,0l12.786,12.786
		c3.739,3.739,3.739,9.801,0,13.54L165,68.715z"></path>
	<path style="fill:#3D6687;" d="M234.998,101.725l-26.327-26.327l37.363-37.363c3.739-3.739,9.801-3.739,13.54,0l12.786,12.786
		c3.739,3.739,3.739,9.801,0,13.54L234.998,101.725z"></path>
	<path style="fill:#3D6687;" d="M445.507,349.222l26.327,26.327l37.363-37.363c3.739-3.739,3.739-9.801,0-13.54l-12.787-12.787
		c-3.739-3.739-9.801-3.739-13.54,0L445.507,349.222z"></path>
	<path style="fill:#3D6687;" d="M408.054,279.224l26.327,26.327l37.363-37.363c3.739-3.739,3.739-9.801,0-13.54l-12.786-12.786
		c-3.739-3.739-9.801-3.739-13.54,0L408.054,279.224z"></path>
</g>
<g>
	<path style="fill:#CCDFED;" d="M443.378,458.836L276.261,234.948L52.372,67.83c-7.845-5.856-8.673-17.309-1.75-24.232
		l22.953-22.954c10.277-10.277,25.733-13.35,39.158-7.785l272.626,112.989l112.989,272.626c5.564,13.427,2.491,28.882-7.785,39.158
		l-22.953,22.953C460.688,467.51,449.234,466.683,443.378,458.836z"></path>
	<path style="fill:#CCDFED;" d="M181.785,507.029L104.93,404.848L2.75,327.993c-3.349-2.518-3.694-7.418-0.73-10.381l11.782-11.782
		c7.939-7.939,19.965-10.129,30.193-5.499l113.895,51.558l51.558,113.895c4.63,10.228,2.439,22.254-5.499,30.193l-11.783,11.782
		C189.203,510.722,184.303,510.378,181.785,507.029z"></path>
</g>
<g>
	<path style="fill:#BAD5E5;" d="M209.448,465.784l-17.656-39.003l0,0L180.8,437.772c-9.575,9.575-25.407,8.461-33.546-2.361
		l-31.288-41.599l-0.098,0.097L7.359,312.273l0,0l-5.34,5.34c-2.963,2.963-2.618,7.862,0.73,10.381l102.181,76.855l76.855,102.181
		c2.518,3.349,7.418,3.694,10.381,0.73l11.783-11.783C211.887,488.038,214.078,476.012,209.448,465.784z"></path>
	<path style="fill:#BAD5E5;" d="M497.749,427.311c0.462-0.999,0.894-2.01,1.261-3.045c0.754-2.12,1.283-4.309,1.628-6.528
		c0.991-6.38,0.291-13.038-2.289-19.265l-16.424-39.63l-1.043-2.517c-0.973,7.762-4.471,15.169-10.243,20.941l-22.953,22.953
		c-6.923,6.923-18.375,6.096-24.232-1.75L290.651,220.557L52.357,41.862l-1.735,1.735c-4.549,4.549-5.73,11.047-3.795,16.634
		c1.01,2.917,2.855,5.589,5.545,7.597l145.464,108.579l78.425,58.539l58.539,78.425l108.579,145.464
		c2.008,2.691,4.681,4.535,7.597,5.545c5.587,1.935,12.086,0.754,16.635-3.795l22.953-22.953
		C493.61,434.588,496.005,431.079,497.749,427.311z"></path>
</g>
<path style="fill:#61AFF6;" d="M104.914,432.283L104.914,432.283c-17.494,8.348-35.767-9.925-27.419-27.419l0,0
	c18.554-38.883,42.253-75.095,70.46-107.661L341.791,73.417c28.676-33.108,69.054-53.832,112.672-57.831l11.885-1.089
	c16.568-1.519,30.453,12.365,28.935,28.934l-1.089,11.885c-3.999,43.617-24.724,83.995-57.831,112.672L212.576,361.824
	C180.009,390.03,143.799,413.73,104.914,432.283z"></path>
<path style="fill:#399AEA;" d="M494.193,55.316l1.089-11.885c1.519-16.568-12.366-30.453-28.935-28.934l-11.885,1.089
	c-0.155,0.014-0.309,0.034-0.464,0.048c-4.103,43.439-24.793,83.633-57.783,112.208L81.614,428.357
	c5.715,5.643,14.603,8.077,23.3,3.926l0,0c38.883-18.553,75.095-42.253,107.661-70.459l223.786-193.836
	C469.469,139.311,490.194,98.934,494.193,55.316z"></path>
<path style="fill:#FFFFFF;" d="M400.892,56.26c-4.215-0.36-7.923,2.765-8.285,6.978c-0.36,4.214,2.765,7.924,6.978,8.285
	c22.969,1.966,36.702,15.7,38.667,38.667c0.161,1.871,0.981,3.528,2.213,4.76c1.542,1.542,3.729,2.418,6.071,2.218
	c4.215-0.361,7.339-4.07,6.978-8.285C450.92,78.531,431.246,58.856,400.892,56.26z"></path>
<path style="fill:#CCDFED;" d="M446.539,117.17c4.215-0.361,7.339-4.07,6.978-8.285c-1.271-14.849-6.637-27.132-15.331-36.121
	c-2.36,4.942-4.957,9.768-7.785,14.46c4.392,6.071,7.067,13.778,7.853,22.967c0.161,1.871,0.981,3.528,2.213,4.76
	C442.01,116.493,444.197,117.371,446.539,117.17z"></path>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
      </svg>
      <p class="span">Business Trip
    </p></div>
  </div>
</div>
<style>
/* From Uiverse.io by JohnnyCSilva - Tags: gradient, card */
.card {
  width: 252px;
  height: 265px;
  background: white;
  border-radius: 30px;
  box-shadow: 15px 15px 30px #bebebe,
             -15px -15px 30px #ffffff;
  transition: 0.2s ease-in-out;
}

.img {
  width: 100%;
  height: 50%;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  background: linear-gradient(#e66465, #9198e5);
  display: flex;
  align-items: top;
  justify-content: right;
}

.save {
  transition: 0.2s ease-in-out;
  border-radius: 10px;
  margin: 20px;
  width: 30px;
  height: 30px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: space-around;
}

.save .svg {
  transition: 0.2s ease-in-out;
  width: 15px;
  height: 15px;
}

.icon-box {
  margin-top: 15px;
  width: 70%;
  padding: 10px;
  background-color: #e3fff9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: left;
}

.icon-box svg {
  width: 17px;
}

.text .h3 {
  font-family: 'Lucida Sans' sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: black;
}

.text .p {
  font-family: 'Lucida Sans' sans-serif;
  color: #999999;
  font-size: 13px;
}

.icon-box .span {
  margin-left: 10px;
  font-family: 'Lucida Sans' sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #9198e5;
}

.card:hover {
  cursor: pointer;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}

.save:hover {
  transform: scale(1.1) rotate(10deg);
}

.save:hover .svg {
  fill: #ced8de;
}
</style>


================================================
FILE: Cards/JohnnyCSilva_quick-chicken-16.html
================================================
<div class="card">
  <svg class="img" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 784.37 1277.39" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"></metadata>
  <g id="_1421394342400">
   <g>
    <polygon fill="#343434" fill-rule="nonzero" points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54"></polygon>
    <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33"></polygon>
    <polygon fill="#3C3C3B" fill-rule="nonzero" points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89"></polygon>
    <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,1277.38 392.07,956.52 -0,724.89"></polygon>
    <polygon fill="#141414" fill-rule="nonzero" points="392.07,882.29 784.13,650.54 392.07,472.33"></polygon>
    <polygon fill="#393939" fill-rule="nonzero" points="0,650.54 392.07,882.29 392.07,472.33"></polygon>
   </g>
  </g>
 </g>
</svg>
  <div class="textBox">
    <p class="text head">Ethereum</p>
    <span>Cryptocurrency</span>
    <p class="text price">1.654,34€</p>
  </div>
</div>

<style>
/* From Uiverse.io by JohnnyCSilva - Tags: card, crypto, ethereum */
.card {
  width: 195px;
  height: 285px;
  background: #313131;
  border-radius: 20px;
  ;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  transition: 0.2s ease-in-out;
}

.img {
  height: 30%;
  position: absolute;
  transition: 0.2s ease-in-out;
  z-index: 1;
}

.textBox {
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  transition: 0.2s ease-in-out;
  z-index: 2;
}

.textBox > .text {
  font-weight: bold;
}

.textBox > .head {
  font-size: 20px;
}

.textBox > .price {
  font-size: 17px;
}

.textBox > span {
  font-size: 12px;
  color: lightgrey;
}

.card:hover > .textBox {
  opacity: 1;
}

.card:hover > .img {
  height: 65%;
  filter: blur(7px);
  animation: anim 3s infinite;
}

@keyframes anim {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}

.card:hover {
  transform: scale(1.04) rotate(-1deg);
}


</style>


================================================
FILE: Cards/JohnnyCSilva_spicy-vampirebat-51.html
================================================
<div class="card">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58" class="image"><g fill-rule="evenodd" fill="none" id="Page-1"><g fill-rule="nonzero" id="059---Money-Bag"><path fill="#f29c1f" d="m23 16.98v-9.98c0-1.66-2.91-3-6.5-3s-6.5 1.34-6.5 3v11.01c-3.36.12-6 1.41-6 2.99v26.23c-2.35.45-4 1.52-4 2.77v5c0 1.66 2.91 3 6.5 3s6.5-1.34 6.5-3v-2c0 1.66 2.91 3 6.5 3s6.5-1.34 6.5-3l.5-13z" id="Shape"></path><path fill="#f3d55b" d="m54.527 13.355c-.072-.108-1.461-2.092-5.5-3 1.0331933-.84954961 1.6441867-2.10769199 1.673-3.445 0-2.358-2.006-4.417-4.769-4.895-.5372791-.08053169-1.0405693.28263221-1.1334952.81790692s.2585108 1.04682267.7914952 1.15209308c1.798.315 3.111 1.542 3.111 2.925 0 1.638-1.775 2.984-4 3-.8755119.01021562-1.7370699-.21978683-2.491-.665-.4719273-.28691192-1.0870881-.13692731-1.374.33500001-.2869119.47192729-.1369273 1.08708809.335 1.37399999 1.0594655.6270481 2.2688888.9556657 3.5.951.01 0 .017.005.026.005 6.213 0 8.124 2.5 8.176 2.567.200426.2958159.5434432.4622351.8998403.436569.356397-.025666.6720289-.239518.828-.561.155971-.3214819.1285857-.7017531-.0718403-.997569z" id="Shape"></path><path fill="#a56a43" d="m45.19 52h-19.19v-12c0-1.66-2.91-3-6.5-3-.8387701-.0034358-1.6759363.0735835-2.5.23v-10.89c1.4565382-3.4367258 3.4852949-6.6015863 6-9.36v-.01c2.0874104-2.3329398 4.5726948-4.2764728 7.34-5.74v-.01c.8551132.5204315 1.8390235.7906603 2.84.78h5.6c1.0050057.0070139 1.9920265-.2665813 2.85-.79 2.18 1.08 12.01 6.72 15.56 21.79 4 17-8 19-12 19z" id="Shape"></path><path fill="#fdd7ad" d="m45.19 49c-.5522847 0-1-.4477153-1-1s.4477153-1 1-1c.723 0 4.425-.125 6.376-2.589.9225786-1.3035875 1.4145252-2.8629918 1.407-4.46.0332885-.5485091.4978261-.970453 1.047-.951.2649656.0126906.5140321.1301392.6923876.326499.1783554.1963597.2713838.4555393.2586124.720501-.0084762 2.0150456-.6508108 3.9763353-1.836 5.606-2.524 3.186-7.061 3.347-7.945 3.347z" id="Shape"></path><path fill="#805333" d="m46 1.17c.01 2.2-.43 7-3.95 9.75-.1318612.1079533-.2723293.2049432-.42.29-.8579735.5234187-1.8449943.7970139-2.85.79h-5.6c-1.0009765.0106603-1.9848868-.2595685-2.84-.78-.1495192-.0908277-.2931396-.191028-.43-.3-3.52-2.75-3.95-7.55-3.95-9.75.0016568-.33258473.1685567-.6425818.4452874-.8270689.2767306-.18448711.6270741-.21931899.9347126-.0929311 1.28.54 1.71 1.75 3.65 1.75 2.49 0 2.49-2 4.98-2s2.5 2 5 2c1.94 0 2.37-1.22 3.65-1.75.3076385-.12638789.657982-.09155601.9347126.0929311.2767307.1844871.4436306.49448417.4452874.8270689z" id="Shape"></path><path fill="#603e26" d="m36.45 11.982c1.164119-1.6359812 2.0400633-3.45889226 2.59-5.39.1491169-.53295478.7020452-.84411688 1.235-.695s.8441169.70204522.695 1.235c-.545409 1.83131833-1.3359015 3.5804932-2.35 5.2l3.34 3.12c.4031679.3783151.423315 1.0118321.045 1.415-.3783151.4031678-1.0118321.423315-1.415.045l-3.59-3.35v3.3c0 .5522847-.4477153 1-1 1s-1-.4477153-1-1v-3.3l-3.58 3.35c-.1844231.1726652-.4273651.2691275-.68.27-.2800466-.0009897-.5474685-.1166316-.74-.32-.3709419-.4048785-.3486888-1.0324134.05-1.41l3.35-3.12c-1.0179074-1.618792-1.8117948-3.36803545-2.36-5.2-.0704836-.2559398-.0363072-.52940237.0949974-.76012341.1313047-.23072105.3489609-.3997642.6050026-.46987659.2546559-.07392838.5283328-.04249768.7595988.08723693.231266.1297346.4007475.34690489.4704012.60276307.5569409 1.93085241 1.4433119 3.7509576 2.62 5.38z" id="Shape"></path><path fill="#f0c419" d="m17 21c0 1.66-2.91 3-6.5 3s-6.5-1.34-6.5-3c0-1.58 2.64-2.87 6-2.99.17-.01.33-.01.5-.01 3.59 0 6.5 1.34 6.5 3z" id="Shape"></path><path fill="#e57e25" d="m23 7v9.98c-2.5147051 2.7584137-4.5434618 5.9232742-6 9.36v-5.34c0-1.66-2.91-3-6.5-3-.17 0-.33 0-.5.01v-11.01c0 1.66 2.91 3 6.5 3s6.5-1.34 6.5-3z" id="Shape"></path><path fill="#f9eab0" d="m13 50c0 1.66-2.91 3-6.5 3s-6.5-1.34-6.5-3c0-1.25 1.65-2.32 4-2.77.82406367-.1564165 1.66122992-.2334358 2.5-.23 3.59 0 6.5 1.34 6.5 3z" id="Shape"></path><path fill="#f3d55b" d="m13 50v5c0 1.66-2.91 3-6.5 3s-6.5-1.34-6.5-3v-5c0 1.66 2.91 3 6.5 3s6.5-1.34 6.5-3z" id="Shape"></path><path fill="#f3d55b" d="m26 40c0 1.66-2.91 3-6.5 3s-6.5-1.34-6.5-3c0-1.25 1.65-2.32 4-2.77.8240637-.1564165 1.6612299-.2334358 2.5-.23 3.59 0 6.5 1.34 6.5 3z" id="Shape"></path><path fill="#f0c419" d="m26 40v13c0 1.66-2.91 3-6.5 3s-6.5-1.34-6.5-3v-13c0 1.66 2.91 3 6.5 3s6.5-1.34 6.5-3z" id="Shape"></path><path fill="#fdd7ad" d="m39 27c0 .5522847.4477153 1 1 1s1-.4477153 1-1c0-2.209139-1.790861-4-4-4v-1c0-.5522847-.4477153-1-1-1s-1 .4477153-1 1v1c-2.209139 0-4 1.790861-4 4s1.790861 4 4 4v4c-1.1045695 0-2-.8954305-2-2 0-.5522847-.4477153-1-1-1s-1 .4477153-1 1c0 2.209139 1.790861 4 4 4v1c0 .5522847.4477153 1 1 1s1-.4477153 1-1v-1c2.209139 0 4-1.790861 4-4s-1.790861-4-4-4v-4c1.1045695 0 2 .8954305 2 2zm0 6c0 1.1045695-.8954305 2-2 2v-4c1.1045695 0 2 .8954305 2 2zm-4-4c-1.1045695 0-2-.8954305-2-2s.8954305-2 2-2z" id="Shape"></path></g></g></svg>
  <p class="number-h1">01</p>
  <p class="h1"> Save with cofidence </p>
  <p class="p">Eliminate the stress of saving money with our innovative solution. We understand that saving is something hard.</p>
  </div>
<style>
/* From Uiverse.io by JohnnyCSilva - Tags: card, card template, product card, cool card, simplistic */
.card {
  width: 275px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 20px;
  padding: 30px;
  gap: 10px;
  border: 2px solid transparent;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.card:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.card > .image {
  width: 70px;
  height: 70px;
  transition: all 0.1s ease-in-out;
}

.card > .number-h1 {
  font-size: 15px;
  font-weight: bold;
  padding: 5px 7px;
  border-radius: 10px;
  color: white;
  background-color: #e57e25;
}

.card > .h1 {
  font-size: 17px;
  font-weight: bold;
  text-align: center;
}

.card > .p {
  color: #9e9da1;
  font-size: 14px;
  text-align: center;
}
</style>


================================================
FILE: Cards/JohnnyCSilva_ugly-stingray-77.html
================================================
<div class="card">
  <div class="img"></div>
  <div class="textBox">
    <div class="textContent">
      <p class="h1">Clans of Clash</p>
      <span class="span">12 min ago</span>
    </div>
    <p class="p">Xhattmahs is not attacking your base!</p>
  <div>
</div></div></div>
<style>
/* From Uiverse.io by JohnnyCSilva - Tags: notification */
.card {
  width: 100%;
  max-width: 290px;
  height: 70px;
  background: #353535;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: left;
  backdrop-filter: blur(10px);
  transition: 0.5s ease-in-out;
}

.card:hover {
  cursor: pointer;
  transform: scale(1.05);
}

.img {
  width: 50px;
  height: 50px;
  margin-left: 10px;
  border-radius: 10px;
  background: linear-gradient(#d7cfcf, #9198e5);
}

.card:hover > .img {
  transition: 0.5s ease-in-out;
  background: linear-gradient(#9198e5, #712020);
}

.textBox {
  width: calc(100% - 90px);
  margin-left: 10px;
  color: white;
  font-family: 'Poppins' sans-serif;
}

.textContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.span {
  font-size: 10px;
}

.h1 {
  font-size: 16px;
  font-weight: bold;
}

.p {
  font-size: 12px;
  font-weight: lighter;
}


</style>


================================================
FILE: Cards/JoseIsra_white-pug-89.html
================================================
   <div class="card">
       <div class="content">
           <div class="front">
               <h3 class="title">Hey</h3>
               <p class="subtitle">Hover me :)</p>
           </div>

           <div class="back">
               <p class="description">
                   Cool description so you can read it too my friend
               </p>
           </div>
       </div>
   </div>
<style>
/* From Uiverse.io by JoseIsra - Tags: card, flip */
.card {
  width: 12rem;
  cursor: pointer;
}

.content {
  text-align: center;
  position: relative;
  transition: all 2.25s;
  background-color: rgb(127, 204, 240);
  padding: 5em;
  transform-style: preserve-3d;
}

.card:hover .content {
  transform: rotateY(0.5turn);
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 2em;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.title {
  transform: translateZ(5rem);
  font-size: 2rem;
}

.subtitle {
  transform: translateZ(2rem);
}

.back {
  transform: rotateY(0.5turn);
  background-color: #009bff;
}

.description {
  transform: translateZ(3rem);
}

</style>


================================================
FILE: Cards/Juanes200122_light-seahorse-74.html
================================================
    <div class="container">
        <div class="skill-box">
            <span class="title">HTML</span>

            <div class="skill-bar">
                <span class="skill-per html">
                    <span class="tooltip">50%</span>
                </span>
            </div>
        </div>

        <div class="skill-box">
            <span class="title">CSS</span>

            <div class="skill-bar">
                <span class="skill-per css">
                    <span class="tooltip">70%</span>
                </span>
            </div>
        </div>
        <div class="skill-box">
            <span class="title">JavaScript</span>

            <div class="skill-bar">
                <span class="skill-per javascript">
                    <span class="tooltip">50%</span>
                </span>
            </div>
        </div>
        <div class="skill-box">
            <span class="title">NodeJS</span>

            <div class="skill-bar">
                <span class="skill-per nodejs">
                    <span class="tooltip">30%</span>
                </span>
            </div>
        </div>
    </div>
<style>
/* From Uiverse.io by Juanes200122 - Tags: animation, social, card */
.container {
  position: relative;
  max-width: 500px;
  width: 100%;
  background: #ececec;
  margin: 0 15px;
  padding: 10px 20px;
  border-radius: 7px;
}

.container .skill-box {
  width: 100%;
  margin: 25px 0;
}

.skill-box .title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.skill-box .skill-bar {
  height: 8px;
  width: 100%;
  border-radius: 6px;
  margin-top: 6px;
  background: rgba(0,0,0,0.1);
}

.skill-bar .skill-per {
  position: relative;
  display: block;
  height: 100%;
  width: 90%;
  border-radius: 6px;
  background: #4070f4;
  animation: progress 0.4s ease-in-out forwards;
  opacity: 0;
}

.skill-per.html {
   /*progreso de las diferentes lenguajes*/
  width: 50%;
  animation-delay: 0.1s;
}

.skill-per.css {
         /*progreso de las diferentes lenguajes*/
  width: 70%;
  animation-delay: 0.1s;
}

.skill-per.javascript {
      /*progreso de las diferentes lenguajes*/
  width: 50%;
  animation-delay: 0.2s;
}

.skill-per.nodejs {
      /*progreso de las diferentes lenguajes*/
  width: 30%;
  animation-delay: 0.3s;
}

@keyframes progress {
  0% {
    width: 0;
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.skill-per .tooltip {
  position: absolute;
  right: -14px;
  top: -28px;
  font-size: 9px;
  font-weight: 500;
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  background: #4070f4;
  z-index: 1;
}

.tooltip::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  height: 10px;
  width: 10px;
  z-index: -1;
  background-color: #4070f4;
  transform: translateX(-50%) rotate(45deg);
}
</style>


================================================
FILE: Cards/Kagamiie_funny-ladybug-49.html
================================================
<article class="card">
  <div class="card-img">
    <div class="card-imgs pv delete"></div>
  </div>

  <div class="project-info">
    <div class="flex">
      <div class="project-title">Title card</div>
      <span class="tag">type</span>
    </div>
    <span class="lighter"
      >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae
      voluptas ullam aut incidunt minima.</span
    >
  </div>
</article>

<style>
/* From Uiverse.io by Kagamiie  - Tags: simple, card, about me, profilecard */
.project-info {
  padding: 100px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  top: -50px;
}

.project-title {
  font-weight: 500;
  font-size: 1.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: black;
}

.lighter {
  font-size: 0.9em;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tag {
  font-weight: lighter;
  color: grey;
}

/*DELETE THIS TWO LINE*/
.delete {
  background-color: #b2b2fd;
}

.card-img div {
  width: 90%;
}
/*IF USING IMAGES*/

.card {
  background-color: white;
  color: black;
  width: 300px;
  max-height: 330px;
  border-radius: 8px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.card-img {
  position: relative;
  top: -20px;
  height: 100px;
  display: flex;
  justify-content: center;
}

/* Change the .card-img div to .card-img img to use img*/
.card-img a,
.card-img div {
  height: 150px;
  width: 90%;
  /* Change this width here to change the width of the color/image */
  object-fit: cover;
  border-radius: 8px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.card-imgs {
  transition: all 0.5s;
}

</style>
    

================================================
FILE: Cards/KareemTolan_funny-pug-52.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by KareemTolan - Tags: card */
.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  padding: 40px 20px;
  color: #fff;
  font-size: 1.2rem;
}

.heading {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  text-transform: uppercase;
}

.heading span {
  color: #03DAC6;
}

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.item {
  display: flex;
  align-items: center;
  margin: 0 20px;
  color: #fff;
  font-size: 1.2rem;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.item:hover {
  transform: scale(1.05);
  color: #03DAC6;
  text-shadow: 0px 0px 20px #03DAC6;
}

.item svg {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.item--create svg path {
  fill: #03DAC6;
}

.item--post svg path {
  fill: #BB86FC;
}

.item--inspire svg path {
  fill: #FF9800;
}

button {
  background-color: #03DAC6;
  border: none;
  border-radius: 5px;
  color: #212121;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

button:hover {
  background-color: #BB86FC;
  box-shadow: 0px 0px 20px #BB86FC, 0px 0px 40px #BB86FC, 0px 0px 60px #BB86FC;
}
</style>


================================================
FILE: Cards/Kemboi-Dun_grumpy-snail-54.html
================================================
<article class="card">
    <div class="temporary_text">
        Place image here
    </div>
<div class="card_content">
    <span class="card_title">This is a Title</span>
        <span class="card_subtitle">Thsi is a subtitle of this page. Let us see how it looks on the Web.</span>
        <p class="card_description">Lorem ipsum dolor, sit amet  expedita exercitationem recusandae aut dolor tempora aperiam itaque possimus at, cupiditate earum, quae repudiandae aspernatur? Labore minus soluta consequatur placeat.</p>
    
</div>
</article>
<style>
/* From Uiverse.io by Kemboi-Dun - Tags: card */
.card {
  position: relative;
  width: 250px;
  height: 250px;
  color: #2e2d31;
  background: #131313;
  overflow: hidden;
  border-radius: 20px;
}

.temporary_text {
  font-weight: bold;
  font-size: 24px;
  padding: 6px 12px;
  color: #f8f8f8;
}

.card_title {
  font-weight: bold;
}

.card_content {
  position: absolute;
  left: 0;
  bottom: 0;
    /* edit the width to fit card */
  width: 100%;
  padding: 20px;
  background: #f2f2f2;
  border-top-left-radius: 20px;
    /* edit here to change the height of the content box */
  transform: translateY(150px);
  transition: transform .25s;
}

.card_content::before {
  content: '';
  position: absolute;
  top: -47px;
  right: -45px;
  width: 100px;
  height: 100px;
  transform: rotate(-175deg);
  border-radius: 50%;
  box-shadow: inset 48px 48px #f2f2f2;
}

.card_title {
  color: #131313;
  line-height: 15px;
}

.card_subtitle {
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
}

.card_description {
  font-size: 14px;
  opacity: 0;
  transition: opacity .5s;
}

.card:hover .card_content {
  transform: translateY(0);
}

.card:hover .card_description {
  opacity: 1;
  transition-delay: .25s;
}
















</style>


================================================
FILE: Cards/Kemboi-Dun_slimy-chicken-73.html
================================================
<div class="card">
  <div class="card-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-collection" viewBox="0 0 16 16"> <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"></path> </svg>
  </div>
  <span class="card-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </span>
</div>
<style>
/* From Uiverse.io by Kemboi-Dun - Tags: simple, minimalist, card, hover */
.card {
  width: 300px;
  height: 300px;
  background: #e4e3e3da;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0.4em;
  align-items: flex-start;
  padding: 1em 1.5em;
  transition: all 0.5s ease;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card:hover {
  background: #f1f1f1;
}

.card-icon svg {
  height: 4rem;
  width: 4rem;
}

.card-body {
  text-align: justify;
}
</style>


================================================
FILE: Cards/Kemboi-Dun_spotty-squid-30.html
================================================
<div class="container">
    <div class="terminal_toolbar">
        <div class="butt">
            <button class="btn btn-color"></button>
            <button class="btn"></button>
            <button class="btn"></button>
        </div>
        <p class="user">johndoe@admin: ~</p>
        <div class="add_tab">
            +
        </div>
    </div>
    <div class="terminal_body">
        <div class="terminal_promt">
            <span class="terminal_user">johndoe@admin:</span>
            <span class="terminal_location">~</span>
            <span class="terminal_bling">$</span>
            <span class="terminal_cursor"></span>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by Kemboi-Dun - Tags: card */
.container {
  width: 250px;
  height: 250px;
}

.terminal_toolbar {
  display: flex;
  height: 30px;
  align-items: center;
  padding: 0 8px;
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: #212121;
  justify-content: space-between;
}

.butt {
  display: flex;
  align-items: center;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin-right: 5px;
  font-size: 8px;
  height: 12px;
  width: 12px;
  box-sizing: border-box;
  border: none;
  border-radius: 100%;
  background: linear-gradient(#7d7871 0%, #595953 100%);
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2);
  box-shadow: 0px 0px 1px 0px #41403A, 0px 1px 1px 0px #474642;
}

.btn-color {
  background: #ee411a;
}

.btn:hover {
  cursor: pointer;
}

.btn:focus {
  outline: none;
}

.butt--exit {
  background: linear-gradient(#f37458 0%, #de4c12 100%);
}

.add_tab {
  border: 1px solid #fff;
  color: #fff;
  padding: 0 6px;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
  cursor: pointer;
}

.user {
  color: #d5d0ce;
  margin-left: 6px;
  font-size: 14px;
  line-height: 15px;
}

.terminal_body {
  background: rgba(0, 0, 0, 0.6);
  height: calc(100% - 30px);
  padding-top: 2px;
  margin-top: -1px;
  font-size: 12px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.terminal_promt {
  display: flex;
}

.terminal_promt span {
  margin-left: 4px;
}

.terminal_user {
  color: #1eff8e;
}

.terminal_location {
  color: #4878c0;
}

.terminal_bling {
  color: #dddddd;
}

.terminal_cursor {
  display: block;
  height: 14px;
  width: 5px;
  margin-left: 10px;
  animation: curbl 1200ms linear infinite;
}

@keyframes curbl {

  0% {
    background: #ffffff;
  }

  49% {
    background: #ffffff;
  }

  60% {
    background: transparent;
  }

  99% {
    background: transparent;
  }

  100% {
    background: #ffffff;
  }
}
</style>


================================================
FILE: Cards/KhaledMatalkah_fuzzy-bullfrog-8.html
================================================
<div class="cube-container">
  <div class="cube">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
    <div class="face right">Right</div>
    <div class="face left">Left</div>
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
  </div>
</div>

<style>
/* From Uiverse.io by KhaledMatalkah - Tags: animation, card, hover, cube */
.cube-container {
  width: 200px;
  height: 200px;
  perspective: 800px;
  margin: 50px auto;
}

.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate 8s infinite linear;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  color: rgb(214, 21, 21);
  font-size: 18px;
  text-align: center;
  line-height: 200px;
  background: transparent;
  opacity: 0.9;
  border: 2px solid;
  border-image: linear-gradient(to right, #ff6b6b, #355c7d, #557d35, #cfcf16, #a51f1f) 1;
  box-shadow: 0 0 100px rgba(245, 8, 8, 0.8);
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: rotateY(180deg) translateZ(100px);
}

.right {
  transform: rotateY(90deg) translateZ(100px);
}

.left {
  transform: rotateY(-90deg) translateZ(100px);
}

.top {
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

.cube-container:hover .cube {
  animation-play-state: paused;
}

@keyframes rotate {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

</style>


================================================
FILE: Cards/KhaledMatalkah_slippery-stingray-30.html
================================================
<div class="card"></div>
<style>
/* From Uiverse.io by KhaledMatalkah - Tags: card, hover, animated */
.card {
  width: 254px;
  height: 300px;
  background: linear-gradient(180deg, #5b1577, #a52585);
  border-radius: 10%;
  box-shadow: -35px 35px 70px #891883, 10px -35px 70px #db26db;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
  animation: shadowAnimation 5s infinite ease-in-out;
}

@keyframes shadowAnimation {
  0% {
    box-shadow: -35px 35px 70px #ca21ae, 10px -35px 70px #ca21ae;
  }

  50% {
    box-shadow: -20px 10px 50px #bd3fa2, 0 -20px 50px #b9317c;
  }

  100% {
    box-shadow: -35px 35px 70px #ca27af, 10px -35px 70px #bd3fa2;
  }
}

.card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, #68057c, #a52574);
  border-radius: 50%;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #b700ff, #be268b, transparent);
  border-radius: 50%;
  opacity: 0.2;
  transition: opacity 0.3s ease;
}

.card:hover {
  transform: scale(1.1);
}

.card:hover::before,
.card:hover::after {
  opacity: 1;
}

</style>


================================================
FILE: Cards/KillerRP_ordinary-ladybug-100.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by KillerRP - Tags: 3d, clock, animated */
.one-div {
  --box-width: 100px;
  width: var(--box-width);
  height: var(--box-width);
  border: 2px solid red;
  background-color: white;
  border-radius: 100%;
  position: relative;
  transform: scale(1);
  transition: 2s ease;
  cursor: pointer;
  box-shadow: 2px 2px 10px white;
}

.one-div:hover {
  transform: scale(1.5);
  box-shadow: 2px 2px 50px yellow;
}

.one-div::before, .one-div::after {
  content: "";
  width: 2px;
  display: block;
  height: 100%;
  background: linear-gradient(black 50%, transparent 50%);
  border-radius: 20px;
  position: absolute;
  left: 50%;
  transform-origin: translate(-100%, -100%);
}

.one-div::after {
  height: 100%;
  animation: secondsMotion 120s  infinite linear;
}

.one-div::before {
  animation: secondsMotion 6s infinite linear;
}

@keyframes secondsMotion {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

</style>


================================================
FILE: Cards/Koopro_tidy-cobra-63.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by Koopro - Source: Lynn Fisher - https://a.singlediv.com/ - Tags: windows, night, css */
.one-div {
  box-sizing: border-box;
  font-size: 10px;
  width: 20em;
  height: 25em;
  background-repeat: no-repeat;
  background-image: linear-gradient(#6a5acd, #6a5acd),
    repeating-linear-gradient(
      to bottom,
      #48d1cc,
      #48d1cc 0.1em,
      #6a5acd 0.1em,
      #6a5acd 0.4em,
      transparent 0.4em,
      transparent 0.9em
    ),
    linear-gradient(#6acd 40%, #48cc),
    radial-gradient(circle, #48d1cc 30%, rgba(72, 209, 204, 0) 31%),
    radial-gradient(circle, #7fffd4 50%, rgba(127, 255, 212, 0) 51%),
    linear-gradient(#41cc, #d1cc),
    linear-gradient(60deg, transparent 40%, #483d8b 41%),
    linear-gradient(-60deg, transparent 40%, #483d8b 41%),
    linear-gradient(to right, #48d1cc 0.1em, #483d8b 0.1em),
    linear-gradient(to bottom, #231e44 30%, #c71585);
  background-size: calc(100% - 0.4em) 2em, calc(100% - 0.6em) 6em, 0.1em 20em,
    1.1em 1.1em, 10em 10em, 5em 0.1em, 3.5em 2em, 3.5em 2em, 0.4em 5em,
    100% 100%;
  background-position: 50% 0.2em, 50% 2.7em, 1.1em 0.2em, 0.6em 19em, 80% 18%,
    right 3.8em bottom 2em, right 6em bottom 0, right 3em bottom 0,
    right 6em bottom 0, 0 0;
  border: 0.1em solid #48d1cc;
  border-top-color: #6a5acd;
  box-shadow: 0 0 0 0.8em #483d8b, 0 0 0 0.9em #6a5acd;
}

.one-div::before {
  width: 24em;
  height: 2em;
  background-color: #483d8b;
  border: 0.1em solid #6a5acd;
  border-top-color: #54c8c4;
  box-shadow: 0 1.4em 0 -0.8em #483d8b, 0 1.4em 0 -0.7em #6a5acd;
}

.one-div::after {
  background-color: #483d8b;
  border-radius: 2em 0;
  border-top: 0.1em solid #1d2d2d;
}

</style>


================================================
FILE: Cards/Lakshay-art_lazy-goose-42.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by Lakshay-art - Tags:  */
.card::before {
  content: "";
  background: rgb(202, 26, 114);
  position: absolute;
  /* inset: 0; */
  z-index: -100;
}

.card {
  width: 300px;
  height: 300px;
  zoom: .8;
}

.heading {
  font-size: 24px;
  color: white;
  text-shadow: -1px 2px 0px #fff,
				  -1px -2px 12px #fff;
  position: absolute;
  top: calc(50% - 190px);
}

.heading span {
  color: hotpink;
  text-shadow: -1px 2px 0px #ff69b4,
				  -1px -2px 12px hotpink;
}

button {
  border: 2px #ff69b4 solid;
  padding: 10px 80px;
  background-color: #ff69b422;
  border-radius: 30px;
  color: #ff69b4;
  font-weight: 900;
  font-size: 16px;
  margin-top: 345px;
}

button:hover {
  background-color: #ff69b444;
}

.item--create::before {
  content: "";
  background-color: rgb(69, 1, 37);
  width: 120px;
  height: 120px;
  position: absolute;
  top: 0px;
  z-index: -1;
}

.item--create {
  width: 120px;
  height: 125px;
  position: absolute;
  top: calc(50% - 115px);
  left: calc(50% - 65px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 45px;
  transition: padding-top 0.5s ease-out;
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE0LjYxIDIxLjE4IDE2Ny41NSAxNDkuMzQiPgogIDxwYXRoIGZpbGw9IiNGRjAwNjYiIGQ9Ik00MCwtNjYuMkM0OS4yLC01Ni4zLDUyLjMsLTQwLjgsNTkuOSwtMjYuN0M2Ny40LC0xMi41LDc5LjMsMC4zLDgxLjcsMTQuNkM4NC4xLDI4LjksNzcsNDQuNyw2NC43LDUyLjZDNTIuNSw2MC41LDM1LjEsNjAuNSwxOS43LDYzLjRDNC4yLDY2LjMsLTkuMyw3Mi4xLC0yMS42LDcwLjFDLTMzLjgsNjgsLTQ0LjcsNTguMSwtNTYuMSw0Ny4zQy02Ny40LDM2LjUsLTc5LjMsMjQuOCwtODMuNSwxMC42Qy04Ny44LC0zLjYsLTg0LjYsLTIwLjQsLTc1LjQsLTMyQy02Ni4zLC00My42LC01MS4zLC01MCwtMzcuNywtNThDLTI0LjIsLTY2LC0xMi4xLC03NS41LDEuNiwtNzguMUMxNS40LC04MC43LDMwLjcsLTc2LjIsNDAsLTY2LjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAgMTAwKSIvPgo8L3N2Zz4=');
  z-index: 100;
  -webkit-mask-repeat: no-repeat;
}

.item--create svg {
  height: 50px !important;
  width: 50px !important;
  margin-bottom: 10px;
  transition: height 0.5s ease-out,width 0.5s ease-out,margin-bottom 0.5s ease-out;
}

.item--create:hover svg {
  height: 40px !important;
  width: 40px !important;
  margin-bottom: 5px;
}

.item--create:hover {
  padding-top: 30px;
}

.item--post::before {
  content: "";
  background-color: rgb(114, 7, 79);
  width: 230px;
  height: 230px;
  position: absolute;
  top: 0px;
  z-index: -2;
   /* top:200px;
   left:calc(50% - 50px); */
}

.item--post {
  min-width: 230px;
  min-height: 230px;
  position: absolute;
  top: calc(50% - 130px);
  left: calc(50% - 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 140px;
  transition: padding-top 0.5s ease-out;
  z-index: 99;
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE0LjYxIDIxLjE4IDE2Ny41NSAxNDkuMzQiPgogIDxwYXRoIGZpbGw9IiNGRjAwNjYiIGQ9Ik00MCwtNjYuMkM0OS4yLC01Ni4zLDUyLjMsLTQwLjgsNTkuOSwtMjYuN0M2Ny40LC0xMi41LDc5LjMsMC4zLDgxLjcsMTQuNkM4NC4xLDI4LjksNzcsNDQuNyw2NC43LDUyLjZDNTIuNSw2MC41LDM1LjEsNjAuNSwxOS43LDYzLjRDNC4yLDY2LjMsLTkuMyw3Mi4xLC0yMS42LDcwLjFDLTMzLjgsNjgsLTQ0LjcsNTguMSwtNTYuMSw0Ny4zQy02Ny40LDM2LjUsLTc5LjMsMjQuOCwtODMuNSwxMC42Qy04Ny44LC0zLjYsLTg0LjYsLTIwLjQsLTc1LjQsLTMyQy02Ni4zLC00My42LC01MS4zLC01MCwtMzcuNywtNThDLTI0LjIsLTY2LC0xMi4xLC03NS41LDEuNiwtNzguMUMxNS40LC04MC43LDMwLjcsLTc2LjIsNDAsLTY2LjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAgMTAwKSIvPgo8L3N2Zz4=');
  -webkit-mask-repeat: no-repeat;
}

.item--post svg {
  height: 50px !important;
  width: 50px !important;
  margin-bottom: 15px;
  transition: height 0.5s ease-out,width 0.5s ease-out,margin-bottom 0.5s ease-out;
}

.item--post:hover svg {
  height: 40px !important;
  width: 40px !important;
  margin-bottom: 5px;
}

.item--post:hover {
  padding-top: 130px;
}

.item--inspire::before {
    /* background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE0LjYxIDIxLjE4IDE2Ny41NSAxNDkuMzQiPgogIDxwYXRoIGZpbGw9IiNGRjAwNjYiIGQ9Ik00MCwtNjYuMkM0OS4yLC01Ni4zLDUyLjMsLTQwLjgsNTkuOSwtMjYuN0M2Ny40LC0xMi41LDc5LjMsMC4zLDgxLjcsMTQuNkM4NC4xLDI4LjksNzcsNDQuNyw2NC43LDUyLjZDNTIuNSw2MC41LDM1LjEsNjAuNSwxOS43LDYzLjRDNC4yLDY2LjMsLTkuMyw3Mi4xLC0yMS42LDcwLjFDLTMzLjgsNjgsLTQ0LjcsNTguMSwtNTYuMSw0Ny4zQy02Ny40LDM2LjUsLTc5LjMsMjQuOCwtODMuNSwxMC42Qy04Ny44LC0zLjYsLTg0LjYsLTIwLjQsLTc1LjQsLTMyQy02Ni4zLC00My42LC01MS4zLC01MCwtMzcuNywtNThDLTI0LjIsLTY2LC0xMi4xLC03NS41LDEuNiwtNzguMUMxNS40LC04MC43LDMwLjcsLTc2LjIsNDAsLTY2LjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAgMTAwKSIvPgo8L3N2Zz4='); */
  content: "";
  background-color: rgb(179, 4, 100);
  width: 350px;
  height: 350px;
  position: absolute;
  top: 0px;
  z-index: -3;
   /* top:200px;
   left:calc(50% - 50px); */
}

.item--inspire {
  min-width: 350px;
  min-height: 350px;
  position: absolute;
  top: calc(50% - 145px);
  left: calc(50% - 350px / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 245px;
  transition: padding-top 0.5s ease-out;
  z-index: 98;
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE0LjYxIDIxLjE4IDE2Ny41NSAxNDkuMzQiPgogIDxwYXRoIGZpbGw9IiNGRjAwNjYiIGQ9Ik00MCwtNjYuMkM0OS4yLC01Ni4zLDUyLjMsLTQwLjgsNTkuOSwtMjYuN0M2Ny40LC0xMi41LDc5LjMsMC4zLDgxLjcsMTQuNkM4NC4xLDI4LjksNzcsNDQuNyw2NC43LDUyLjZDNTIuNSw2MC41LDM1LjEsNjAuNSwxOS43LDYzLjRDNC4yLDY2LjMsLTkuMyw3Mi4xLC0yMS42LDcwLjFDLTMzLjgsNjgsLTQ0LjcsNTguMSwtNTYuMSw0Ny4zQy02Ny40LDM2LjUsLTc5LjMsMjQuOCwtODMuNSwxMC42Qy04Ny44LC0zLjYsLTg0LjYsLTIwLjQsLTc1LjQsLTMyQy02Ni4zLC00My42LC01MS4zLC01MCwtMzcuNywtNThDLTI0LjIsLTY2LC0xMi4xLC03NS41LDEuNiwtNzguMUMxNS40LC04MC43LDMwLjcsLTc2LjIsNDAsLTY2LjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAgMTAwKSIvPgo8L3N2Zz4=');
  -webkit-mask-repeat: no-repeat;
}

.item--inspire svg {
  height: 50px !important;
  width: 50px !important;
  margin-bottom: 15px;
  transition: height 0.5s ease-out,width 0.5s ease-out,margin-bottom 0.5s ease-out;
}

.item--inspire:hover svg {
  height: 40px !important;
  width: 40px !important;
  margin-bottom: 5px;
}

.item--inspire:hover {
  padding-top: 232px;
}
</style>


================================================
FILE: Cards/Lakshay-art_light-termite-47.html
================================================
 <div class="bo">
 <div class="face">     <div class="earL"></div>
       <div class="earR"></div>
       <div class="eyeL"></div>
       <div class="eyeR"></div>
       <div class="hairs"></div>
       <div class="nose"></div>
       <div class="mouth"></div>
        <div class="smileL">
        <svg xml:space="preserve" viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg">
        <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur>
  </filter>
  <path d="M25 19c-6 2-12 4-18 5-2 0-4-2-6-3 1-1 2-3 3-4 11-3 22-7 32-10 2-1 4 1 6 2-1 1-2 4-3 4-4 2-9 4-14 6z" fill="#EF7F71" filter="url(#blurMe)"></path>
    <path d="M35 35c-6 2-12 4-18 5-2 0-4-2-6-3 1-1 2-3 3-4 11-3 22-7 32-10 2-1 4 1 6 2-1 1-2 4-3 4-4 2-9 4-14 6z" fill="#EF7F71" filter="url(#blurMe)"></path>
      <path d="M45 50c-6 2-12 4-18 5-2 0-4-2-6-3 1-1 2-3 3-4 11-3 22-7 32-10 2-1 4 1 6 2-1 1-2 4-3 4-4 2-9 4-14 6z" fill="#EF7F71" filter="url(#blurMe)"></path>
</svg>
        </div>
         <div class="smileR">
          <svg xml:space="preserve" viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg">
        <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur>
  </filter>
  <path d="M25 19c-6 2-12 4-18 5-2 0-4-2-6-3 1-1 2-3 3-4 11-3 22-7 32-10 2-1 4 1 6 2-1 1-2 4-3 4-4 2-9 4-14 6z" fill="#EF7F71" filter="url(#blurMe)"></path>
    <path d="M35 35c-6 2-12 4-18 5-2 0-4-2-6-3 1-1 2-3 3-4 11-3 22-7 32-10 2-1 4 1 6 2-1 1-2 4-3 4-4 2-9 4-14 6z" fill="#EF7F71" filter="url(#blurMe)"></path>
      <path d="M45 50c-6 2-12 4-18 5-2 0-4-2-6-3 1-1 2-3 3-4 11-3 22-7 32-10 2-1 4 1 6 2-1 1-2 4-3 4-4 2-9 4-14 6z" fill="#EF7F71" filter="url(#blurMe)"></path>
</svg></div>
  
<div class="snow">
<div class="mountain-cap-1"></div>
      <div class="mountain-cap-2"></div>
      <div class="mountain-cap-3"></div>
      <div class="mountain-cap-4"></div>
      <div>
</div>
</div>
</div></div>
<style>
/* From Uiverse.io by Lakshay-art - Tags: animation, minimalist, card, hover, realistic, cartoon, shinchan, boochan */
.face {
  position: relative;
  width: 300px;
  height: 350px;
  background-color: #6C757D;
  background: linear-gradient(180deg,#452824 184px,#f2bbad 34px);
    /* transform: translateX(0px); */
  border-top-right-radius: 250px 350px;
  border-top-left-radius: 250px 350px;
  border-bottom-left-radius: 250px 250px;
  border-bottom-right-radius: 250px 250px;
  border: 5px solid black;
}

.hairs {
  height: 180px;
  background-color: #f2bbad;
  position: absolute;
  width: 290px;
  border-top-right-radius: 250px 350px;
  border-top-left-radius: 250px 350px;
  top: 25px;
}

.snow {
  transform: translateX(150px);
  transform-origin: right;
}

.mountain-cap-1, .mountain-cap-2, .mountain-cap-3,.mountain-cap-4 {
  position: absolute;
  top: 20px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 40px solid #452824;
}

.mountain-cap-1 {
  left: -65px;
}

.mountain-cap-2 {
  left: -35px;
}

.mountain-cap-3 {
  left: -5px;
}

.mountain-cap-4 {
  left: 25px;
}

.earL {
  border-top-right-radius: 250px 350px;
  border-top-left-radius: 250px 350px;
  border-bottom-left-radius: 250px 250px;
  border-bottom-right-radius: 250px 250px;
  height: 70px;
  width: 50px;
  background-color: #f2bbad;
  position: absolute;
  left: -30px;
  top: 150px;
  z-index: -1;
  border: 5px solid black;
}

.earR {
  border-top-right-radius: 250px 350px;
  border-top-left-radius: 250px 350px;
  border-bottom-left-radius: 250px 250px;
  border-bottom-right-radius: 250px 250px;
  height: 70px;
  width: 50px;
  background-color: #f2bbad;
  position: absolute;
  right: -30px;
  top: 150px;
  z-index: -4;
  border: 5px solid black;
}

.eyeR {
  border-top-right-radius: 250px 350px;
  border-top-left-radius: 250px 350px;
  border-bottom-left-radius: 250px 250px;
  border-bottom-right-radius: 250px 250px;
  height: 10px;
  width: 10px;
  background-color: black;
  position: absolute;
  left: 128px;
  top: 120px;
  z-index: 2;
  animation: blinkR 5s infinite linear;
}

.eyeL {
  border-top-right-radius: 250px 350px;
  border-top-left-radius: 250px 350px;
  border-bottom-left-radius: 250px 250px;
  border-bottom-right-radius: 250px 250px;
  height: 10px;
  width: 10px;
  background-color: black;
  position: absolute;
  right: 128px;
  top: 120px;
  z-index: 2;
  animation: blinkL 5s infinite linear;
}

.nose {
  background: #fefefe;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #0F0;
  position: absolute;
  top: 220px;
  left: 140px;
  scale: 1 1;
  transition: all ease-in-out .3s;
  z-index: 100;
}

.nose:hover {
  scale: 1 1.25;
  top: 236px;
}

.nose:active {
  animation: propeller .5s infinite linear;
  transform-origin: 50% -55px;
  scale: 1 1.25;
  top: 220px;
  animation-delay: .5s;
}

@keyframes propeller {
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes blinkL {
  98% {
    height: 10px;
    width: 10px;
    right: 128px;
    top: 120px;
  }

  100% {
    height: 3px;
    width: 11px;
    right: 126px;
    top: 123px;
  }
}

@keyframes blinkR {
  98% {
    height: 10px;
    width: 10px;
    left: 128px;
    top: 120px;
  }

  100% {
    height: 3px;
    width: 11px;
    left: 126px;
    top: 123px;
  }
}

.nose:before {
  content: "";
  position: absolute;
  top: -64px;
  left: 50%;
  border: 10px solid transparent;
  border-bottom: 62px solid #fefefe;
  transform: translateX(-50%);
}

.mouth {
  position: absolute;
  top: 300px;
  left: 140px;
  background: #a36655;
  width: 25px;
  height: 18px;
  border: 5px solid black;
  border-radius: 50%;
  transition: all .3s linear;
}

.face:active .mouth {
  top: 290px;
  width: 60px;
  height: 25px;
  left: 123px;
  border-radius: 7px 7px 130px 130px;
}

.face:active .smileL {
  height: 30px;
  width: 30px;
}

.face:active .smileR {
  height: 30px;
  width: 30px;
}

.bo {
  z-index: 10;
  zoom: 0.8;
}

.smileL {
  position: absolute;
  height: 0px;
  width: 0px;
  rotate: 310deg;
  top: 180px;
  left: 70px;
  transition: all .1s linear;
}

.smileR {
  position: absolute;
  height: 0px;
  width: 0px;
  rotate: 310deg;
  top: 180px;
  right: 70px;
  transition: all .1s linear;
}


</style>


================================================
FILE: Cards/Lakshay-art_shy-puma-30.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by Lakshay-art - Tags: card, hover effect, aeroplane, single-div */
.one-div {
  height: 200px;
  width: 200px;
  background-image: radial-gradient(circle, black 25%,rgb(69, 11, 11) 45%, red 46%, black , red);
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 50%;
}

.one-div::before {
  content: '';
  height: 60px;
  width: 420px;
  bottom: -20px;
  left: -100px;
  position: absolute;
  z-index: -10;
  transition: all 1s linear;
  transform-origin: 50% 0%;
  isolation: isolate;
  background-image: linear-gradient(180deg,rgb(255, 179, 0) 20%,rgb(244, 205, 205),rgb(255, 179, 0) 30%,rgb(5, 56, 99) 90%);
  border-radius: 30px 30px 70% 70%;
}

.one-div::after {
  content: '';
  position: absolute;
  height: 280px;
  width: 30px;
  border-radius: 50%;
  top: -30px;
  left: 85px;
  background-image: linear-gradient(0deg,rgb(255, 179, 0), #777 25px,#eee, #777 calc(100% - 25px) , rgb(255, 179, 0));
  animation: propeller 1.5s infinite linear;
  z-index: 1;
}

.one-div:hover::after {
  animation: propeller .35s infinite linear;
}

.one-div:hover::before {
  /* animation: propeller 1.5s infinite linear; */
  transform: rotate(20deg);
  left: -110px;
}

@keyframes propeller {
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes rev-propeller {
  to {
    transform: rotateZ(-360deg);
  }
}
</style>


================================================
FILE: Cards/Lakshay-art_soft-dingo-98.html
================================================
<div class="section-banner">
  <div id="star-1">
    <div class="curved-corner-star">
      <div id="curved-corner-bottomright"></div>
      <div id="curved-corner-bottomleft"></div>
    </div>
    <div class="curved-corner-star">
      <div id="curved-corner-topright"></div>
      <div id="curved-corner-topleft"></div>
    </div>
  </div>

  <div id="star-2">
    <div class="curved-corner-star">
      <div id="curved-corner-bottomright"></div>
      <div id="curved-corner-bottomleft"></div>
    </div>
    <div class="curved-corner-star">
      <div id="curved-corner-topright"></div>
      <div id="curved-corner-topleft"></div>
    </div>
  </div>

  <div id="star-3">
    <div class="curved-corner-star">
      <div id="curved-corner-bottomright"></div>
      <div id="curved-corner-bottomleft"></div>
    </div>
    <div class="curved-corner-star">
      <div id="curved-corner-topright"></div>
      <div id="curved-corner-topleft"></div>
    </div>
  </div>

  <div id="star-4">
    <div class="curved-corner-star">
      <div id="curved-corner-bottomright"></div>
      <div id="curved-corner-bottomleft"></div>
    </div>
    <div class="curved-corner-star">
      <div id="curved-corner-topright"></div>
      <div id="curved-corner-topleft"></div>
    </div>
  </div>

  <div id="star-5">
    <div class="curved-corner-star">
      <div id="curved-corner-bottomright"></div>
      <div id="curved-corner-bottomleft"></div>
    </div>
    <div class="curved-corner-star">
      <div id="curved-corner-topright"></div>
      <div id="curved-corner-topleft"></div>
    </div>
  </div>

  <div id="star-6">
    <div class="curved-corner-star">
      <div id="curved-corner-bottomright"></div>
      <div id="curved-corner-bottomleft"></div>
    </div>
    <div class="curved-corner-star">
      <div id="curved-corner-topright"></div>
      <div id="curved-corner-topleft"></div>
    </div>
  </div>

  <div id="star-7">
    <div class="curved-corner-star">
      <div id="curved-corner-bottomright"></div>
      <div id="curved-corner-bottomleft"></div>
    </div>
    <div class="curved-corner-star">
      <div id="curved-corner-topright"></div>
      <div id="curved-corner-topleft"></div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Lakshay-art  - Tags: blue, card, rotate, stars, box-shadow, earth */
.section-banner {
  height: 250px;
  width: 250px;
  position: relative;
  transition: left 0.3s linear;
  background: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAAAAAAD/2wBDACYaHSEdGCYhHyErKCYtOV8+OTQ0OXVTWEVfinmRj4h5hYOYq9u6mKLPpIOFvv/Bz+Lp9fj1lLf////u/9vw9ez/2wBDASgrKzkyOXA+PnDsnYWd7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Oz/wAARCAE5AfQDASIAAhEBAxEB/8QAGgAAAwEBAQEAAAAAAAAAAAAAAgMEAQAFBv/EADoQAAIBAwIFAwIFAgUFAQADAAECEQADIRIxBCJBUWETcYEykRRCUqGxI8EFYnLR8DOCkuHxQxVTY//EABgBAQEBAQEAAAAAAAAAAAAAAAABAgME/8QAIBEBAQEAAwEBAAMBAQAAAAAAAAERAiExEkETUXEDYf/aAAwDAQACEQMRAD8A9T1Adg32rZPtWavI+9bA8VpAy3dftRDP5vtSmuDaPtXBWI5dSjyaYhx0jd/3riyD89TlXH029fzWAOufTtp96Yaf61rb1Kw3rQ/P+1KD92n2U0epTnQ3wKuAhxFo7GfisPE2huY94rAQThG9sAULBQPox4IpkDBftMJUz8Vmv/QPegV7cxoB/eiKof8A8ZpgFr4XdlHwaAcWn6x8LTQkbWVH2rpYHCn7U6AjiVPU/wDjW+uP1D5FFqJEQD70GknMADsBFAYuk7H7LXa26k/+NcGYefijWf8AgqANTxgH/wAazXc/Sf8AwpuOprGmOWKKSbrgTA/8TWes/wClaZqHWJ8Zro1dvmqhfrxuq/eu9YxISfY1rLp3VfkCsVo2Fv8AiqM9c/8A9bV3rx/+T/aiJU/UFHkNShYXJV1z3n/enSGi8D+UzRqxP5alNoz/ANa17ATWCyx+niAPmmQV6u4rdY61J6fELtdDfNDr4lTzIGHjemGrda9x962QdiKlW8mrmLp4KmqF0ESp/aKij0jxW6B0iksLUwXAPvXemoEy0eDQO0e1ZpHilBViSG+WrtNsn64PioGEe1cQImaDQnVprilsDOP+6qO1Cd5rp7A/ehLWx9Pp/LUOt5hTY+9A2T2H3rA+Y5fvS9dwQSLQ8zXfiAMMLRH+qiGF4MHT967VPQfcVO13hyZ9FSfDVnqWelhfk1cDjdUd/g0QugiQ0fNJFwDK2bcdxXeuZghR4j/1QMN8D89aL6H84oBfH6Y/7aI3kjNsfagaHU9Qfmt1Cdh96Ut2ye3/AI0X9IjlVDUUZYfoP3rNX/8Am3waGF/T+9CSqnKAe5oDNwdVYe9YbqdA1Z6w2BU0J4gLgqtMB+snUH70QvWz3+9Bbu+ocLjvpxWu4Xe1PkUB+qld6qePvSg9o/lK0RNro0e1MDPUH+X71nqp1FK1WRktq+KIC0/0zUyBnqp0/it9W33H2oBbQ400JtocTHtTIG60/UK6khE6XG+9dTBIeKukSBB7QKKzxF0nnIj2rbic35vcCsXUJ2MdDW+kVAh1lTFMXaovWB6Ed4NN9UEjH71nFVD3rPSU5k/egt3J/KBFZdukJIYKo3JzUxR+mi5E/c1zagOWKSpvMNXqrpO2JrR62row77UGM7A5kewqch9wQx7RVbFozbn2M1i20YfTHvVlTE/rNbXntftWWuKRjpKaT3BptxdLAKRnoKWbNtxGgT3HStdIpV8YIIrifJFQCwVIKOwHWMU4LciRcvDsGG9TIacbkGAwohdM5AIpDawCXtK4HWCDXWmRtgV8MaYKCysOvxQZGzVhxRCQNqhodRHU12onua6u22qprQW2j96wgjOPvXAEVsGJCE+1F1mqGkAVpdWHMs/NCCMyo+ZrdYGNGr5NBk2JyF+4oh6PRT8Ut3Trailm1auNKgr/AKRQURaO6P8A+NZpsloCtPaK62giAHI7kYpn07H9qi4XptHKhj8U1Vjv80vUQ+ogrPmuLmcKfcGgYdUYJqN7xW7pchx/mUVR6hIgjHkVLxNkMZClT52pIU1b1m6IkKR0Bx+9M3H9Ncd1ivPWxJyG+BNV8Pw628uAD071bJENlQOYE+9CSp+m18laZqVR9LHzFGus7KAP8xqauEAtP/TSPIrtJnCLnuKpz4/iu001cTi23VU+1ELafpXzijM94odQiAfim1HC2o2An/SKE236KnvprIA5rhI6RWszRI5E+5P+1Bg4ePqcjwKNURTAT5oFa3Opyy/5ZrvUDNB5VO0GnZ0J7kYEg9MVi3gejTQNw7ESpB7VhssowsE+Jq9BhuADJNL/ABABjB96A8OWySQfesW3peDme9XIhwdGyUFYSs8oIrhaBPYe9NW1AgMY8VAvUZzntTxKrLYFYtsJ596wyNgKlVzC0RLKtLe2pUemo+cURtyMA/FC9twOVT96DEtEzJJHaSKMWQNrYHvmpmLkEGB7rRW72kQY+KuVFOhh+VPtQXLZK8qKD3mlniiozDe4Io0vi4JE+RU7Ur036KCaaL11bcent13ojeQDr9xQ/iB00/ar6jA11iCAZ9q66HccyKvk4NMF8gA8p9gaWRdvOeXSvmgEWrjCdaV1A1u4CdJePaupqYaLzIDrU+DRq9q5iAf2NKJ/TDL+k5ikkgDUDHijat7VttomkPZIBIyPFLW6ymdQgdTVKuHTnI+KCeGAkN9jT0vLEODMUGoAn8w7daFoJlRimmHWgtsQhHpk7bgU9Au6mPFQA5wKIcQRiRioPQrCpI3n5qMcXJgdKf6pUDUMHY96mGmAMP0x96xrcn6iPbFctxWyGo8UAC2BsI75zWBVGYgzTY81kVNUkl5AgnOykUItXGuarhGiPpmRW3CgYMQ6kdQKWblu7I9VWB6DV/vVRO7XLbEKDp7EdKqtkNaDCYPep7o9Jiq2f+e1O4e4XTSTLDcRWmKYq6jR/wBNBLGZ2oCwt2yxHKKga63EXfGwFT1Y9A3URslQPFcLiXCAA4z0xSV4VNOWnzSL1tLbaVE+ZpkV6JdUHM4juxpfrNq/phWBOJevM0ZzE1VwqQZW6yxvimYapLv1VB/3H/asN5UGp3UD3NNVgRGpm8kUFx7TLBAbrtUUPqI41C8n/bBrLiyQpuEE7cu9TOigFovqv+oCkEIBLKQO+qasiLXdbWTcUt5eP2pB4vnEPv8ApQ/yTU6i3MgR5OKciocBZO21XEGt/wBQx/U94mjTh2uGeb5NErpYJIEv17Um5xV0neJ7Vm8msWJZW2p1QJ6k1xu2VEhgenKK8m9xRAAkt7nArEXRl31E1P8AR6n4m1OzT3NGrl8gGPtXli4Z3ptu4yiVP96ar0DcCgSRG2aW18wcrEdDk+1JRzIlmjsaaDbIL+mogwwjpVRqkuDv8mmi3jaKS922qkWwVnqKS11j9LEeNWaCi9ZY8w3japnVhkiTTLXFMmG5h5qlXt3TA3q7iYiFu4d9KjfJFPQoluG0knqM1Pdtm2xIyJ3oQVjrNVDjdGAq/vTV4joRUgHiPbFEHYY1Y81ehWLtpsGiGjp/FRlh1g/FbgbE1MNXACiORSVb00BuH2pLcUGeNOOgms4uqGuKlIucSFMaTPY4pPq88sCR2ihI1NJA7fFWCq3d1gsGhR36UxHBGGDDxSbNq0qmTq8UbXLekDpttQH6iiZbBxWPbRxI0k+01LdKs2Xke9FbVDEOZ6AUwb6DfpI9tqw2Lh3EeZmmG+qmJON60XptmO8Sau0yFLaKiGEHuaM2wxBYwegArrxuFeXIMQdqU+ldJWPUAgsTimmHniLds6YyOtYeJaJ0iNgamfXcIySfBmuJ0WxLEnsRU6OzzeYHKgGuqX1T2rqbDKp5QeYhpG0UF0DVKmR2pHqw8HV70dt4MgzntU1XBZ2FOI0EDdgJNZaUBA5EdKwQ8yd/3q6MYjJXoY7xWoTGrHvFEq6CSRMUBTSCy7desVFOKW2WSnyBUN+zHMN53mmBocGSCcxt801nUjmGfAmgmNzVYUG22pd2OK1eMa3iZ7SJph15Akidlz9xvSmtW2GxX22q7E+RfioYFWwd6us8QGEEj3ryrdokw2zdR1pyAKYmI7Hapasj1VuoRvFHIPWvOVyhzBEYP+9NNwrGRt0FPRXQlUGdI94paXRoy2Z3mDRJq3JBG80QF8ADSpXU3V2wKWeFthAblwKe4wKHjFD8wH01Ot6RpfmUbZqyIO4LOnSL5j/QaXbcWzg6xttFY40EsBg9DSmddQOBmqituJaNielLBdj2Hk1OXIwSI3it9aQObPSgsSzbwTc+FFHr9Mf0/SUdyTJrzyzHm39jBoWZ99hvE0HoniQiS7hyezRU9/iy4gQoqInIHWhck5GBtNXDVLXzqIDEntNBdF5AWMHqSBtRHhlt2muMWJXMjFFbH4izDrAjDT+9YvJUfqv+oiquE4opq15MdqnuWmtHmBicHoaK1avOJRQJ6mt2yxJqj1dTTBAJiT3rTOSYxXXLTPp1BSQMg9DQNZuu2bgA/wAo3rj03tT3WDMCqwCMVRbLsdLswIE/SKxeF0OG1ExmIqlQSIwPereUvUSBt2oJLPI89a1FVcIvyTRhJOTRaVEQMT96are4Bmd+9EnKfjbuKWxEkgx7VjPAgEk+cRTUES0EAwPHalyZ3/esJ61qnbvTVEJKnIjzTLOgZYGOsGkPJPb2oZINX6hiq86hAgbUR1qYk+9DJ70Shm2FWVMaGIGduldMYmZo0QTklvCj+9MVih5bBB7jJqpgEtsSMR770TMll8QSPmuYastdjw9KuIU3GB+YbGpeS465edzuAPaglgpwCpMSaE71pk7MCO1Z+qY0M8zrIPijF30ztPfzSciRMVhMZJppiuxxJDqGVQD9RJinlV4kF1kKBAkRXnodX1HTJ+wqgMuUyQMkjE+9WUUKthGVVy5/N/eivM+vRbUT+qkorTzaY6TWG22AA3vFUBpcTq+1cgDCWACDMT36UbsmnSWJj/kTStRbqJG0dKaYdecuoAaE6YqV7oJ/UfAgCiuF7ilSZnqaWU5SSdtwKswd6pyFBidxQo7MTj96w9oEdia7WEJ0IgjqTNMiaxjcnlcgdtNdXalYkvJPvXUyGtt3lcREkd9xTUy/71HaWL+e2artkgEgEzWOUyrO1CmSVJAHvAoyvMDIWDmaRqKzIydiacmllALcsSfFVY1LunG4O9YCNQ0zM70okhuUYitW4Y2x1rO9tYdIksCFJPwKU7rmMGehxXE5xGe2KwgYDCDV1kAuANLuABgSJpgbUAVuJHeSaTdRArPpAEZih0MlqQoneBQNNpoNzlYd5z9qAkySwNdDadTgAHbNZAIHbxUHaniJkVhe4BgY8muLKuZCjuaD1keRiAMk4qxNZ+KAEjJ7GrbT3MEEgHYHavMZ7InQpMj2HvQhric4JHmt4a9i5dS6wEBbi5UzGalfmElRIzEVH65IEk42g04X1Nogy0kZ61ZEa+ogAZHilvIXIx280RAwwneRPTxQnDSCJjvVQKhsEYH81yIDzawo280WiTzbdhREBFGCf70GaQgwhM9CcUBPTBPatLFnBAAAPU70Uu7EsQevvQAQoEDB796AntuDMiibAyoH96WSAMb1UFcZmbmcv8zVVtuIYLotgKfzE6qjCsRIUke1HYZ7d1SoIz2rPKTFi0WdZm/DnoBgCm/TgEDoIoWYkTGKzWMEkAR3xXDutiB6zPvXKZPQGlo6XEJQgkdAIzQWrgZiCNLjcGphqg75FcDB7GsD4iKwAkb1AZjeawsTSb970UEDmO1JtcVykXDnoQtbk5WabFWnNZEGJqa1eDMfUuMewIgVWiM55QTSywlBGaYFFJ4ktYWdJmevSu4X1bv9RrxgH6QMU+eta38OYClkE1TpDGpbNy414gppUCpFccHNdOKawUmCc0PpjoZpKAljiTWy22o+1bpzvjxWrbLGAPirtOgAd6etsWlMNDMMjxWC31I5R+9axVgdX1U8M0s2wfJodJRt4opg5BnuKINJzHzU0woyZ6igKxmMmq/RkTkRua4WweoqpiZVxtTkJGwE00WsTQxpJ6U1ccXIG8fNYxcpqdjpOwJrok4msKjrk1fpnANBoc0emK4iR1qagE3jrQLcDi9LYBgEd6C8WKlLWSTBM0qyrmw+lQ2QCCM/Fbk61nRlyUnAn7UtiOgrV1L9XJ2neuAWZyK6INAI5lJPWBXUS8SqKFVMe011QLtfXgSoXOKrssBeOtRB6AdPFQKNLQWgHBq1XW5J2IJjzWee+tcT7h5o0hc401oGSoEr1JrkAKlHyvQjMVtu6FVkkTMz3FY1uwp7skKByjFaaBhmU/fpTOmaxQMZ7Vp8Z9zWMa4NO2aMj0sVI2FaY04MYxFYpxG9aD9qstCgGkkMfk1l11tqWf8A+0zSCZH2qDjGl1AcN3jvV4zal6DeueodJUKAd94oLVr1CwnbrFYiydRwvUzFPN1SCiCZjJx8V3zGSltAOdZ5V+oigRgpJgT0kVTxCLb4YCIZyDSE0aCSwB2jvVGF9SAFcgQDFcAxHKrQR96YWVVaDH6Rn71od8B3wR0xjzQYj4CtgiiuoTBiR4oSLe8EeWp1omYYQNvIqCe2xBGCQDmDRnNuTzT1rXTTcGoAnc9iO9YrMNm9t8fagxSIzt0okD7lSoPWtIKTIAIXMjJ/vQlOUxk46YoAJM5IPvXQg3WuYQD37djWLcO0KfeiLbCkW11AyBTznmC47VDZvuWVdIjxTDdvn6bQXse1cbxuussxl66NRQKADgk1KXgQmB3qheEZsu+TvRfgfLGewrcvGM2WkuzWbo0MDyiYGKPVb4idSlbkYIzNZf4cWlXTJJ6f+qBy5T/phO5URNXJe4nh3DXMshfVtpmjuXxafTBJqFWKsCNxTXuNdM8oA2ExFS8OzVN2x69wN9IjeZol4BFA1yT4NIt8WUUAiYFOHHMLBlBOwJb/AIamcp0vQX4EBuVyB5zTbNo2k06if2o7SveTVmOviteyyAnUJHes22+tZGK7JgH4ORSfxa+vpVVEmCw/mjSSYOPegb/DySSsgdYzV43+0v8A4qUkKA33ArQAJg70sKYE5jArjIHWsOjnkjFcokgMaxQTvTrBb1OUCBvAFIld+HO3XzFGLCrlobxOKewV4l9x96VpNsgGCPetpMYw5pU6R2iuLJsyJPeK4yWiYz1NZoyeZZ/1VntroIFsGYPvitNu0STzfaKLSYwy5812gwcH4FU2N5SgQao74rRaUdpNLDEMwKAnuBBFd6mJEE1E010dMxONxSnYxE/FcbzsNyB4oe5pbE0tr4spzH2AyTWNdWVDMA5/KTmgvm3a/qsIO3JjV7155vH1fUSVI7nV/Na48djNq69eW0MnmOwiak/EONXNrnuSB9qo4iG4bn+qJE7zUiWXddQGPOK1xkztmhdzcYsxyf8AkVTea5atIVICsIiNsVtrhkVQ10ie04pfEH1+JVEIOwHaau7UK5i3OSWIwSaJlZbmiDPYVl1QpicjeBArNR3G81saQ6cpLA9jiuo2uKsaGGRJ1AEz7muqDXsG1AuyAdiM0y5aCW+RixAkEGRFU8Xp/CLa1Auu53jNRopB0u3KDHf4qeh3D8SPTcuCdOcbxVQe3etFiqsNMg9a8sP6d1SRKj9OMU4X9BBUn0mJjGVNYvHL06S7FaqoUQTvNETilBulF0B6VybdO9YJNBfYrblNyQKnaxc1iSdZ71vjx1zqssB9TKD5MUQYBZBkHOK8+7OqC5Yjc0SsFvKwXlXcKavx0mm3Lj3bhtBtCgx5NBfsKqKbYIOxB/mi4llW8rqRDCQf70oX9I0lRGxg1vj4lGlkOAbrmQYx0FYStt0ULAB1HO9Dcu2ysKrE7yTtSoJInrma0h1wtel2xJiIwtKlnYEnwIHSmMhNnJ+k/T3oeRnWBA05B6Gg5CQYTMHOKIEqxYvBxhYmKWHIQiIPetXDRt70Dw4XJkHyN6zWSx9NcdcTSIAPc91py3baCLeo5mG2oNNzAS6ueh7UDDSZHMo6jpWsy5IQBu8z+1AiTq1Y0jp3oD1sFAccvTqR7dqDXzNpEg7E71qIG5hnuK0Wi2cnt5oBBVSNShjH5TQAbDHzTQCsQomrE4NUCs6zc7TgVLyxZNDaspyqoljgmrk4fSAPpPtW2lCLqAM96NGDNAmBXF0avDiZIDUwWFAIH70q4+lSA2SayzcLZ3A3nrVCr/DW3PMBt7EVPc4HUvJE+a9BwrOZHjeuKou/70lsT15Nn/D2a4VuKygCZGxo7n+G5JtsV8MJr1gqPkMa3lGCwmr9VMjxf/4xwJN1Z6ACawf4c++sHO0RXssVU8oAPQ1Hxl64FYnJAytX7p8mWHVLaqLcsNzRPb1A9O0dKk4fiEeHckLHaqBfV/pA0/vXO2tkOhUgEZ7ijtsLkpdeEjBGwp+kNiRFefeuXeHuEXF1ICOZcR8VePaVeLSgw+rTGGkUL2VSNR5fGakPFhhyux6ZG1ZqJ21H4q24TtW9tVgpI65pRMuCcKO1CrHsQetH9Zhois61jg+htVssD2JxVOsXbfKRMSyHMVO2kYFCq62AG/TxVlSw4hhlhHnvXSPHemEhLAD3C0mCJ2pJW3+VwR5Bq4mj080aST4rnL2iCoKjwaWrorAzMdIrn4uSVdQwPbpTU1zMW3O46npXaYUZz1pKkk9Ypg3gmKzQSgA0RyMUERBmtLYmoAuhWlDsRBFeQ66XKzMHeN69S64RGuHYDYda8264eDnUcsfNdv8AmzycDpdWdRBG3cU27ebURb+naaWSOUqxIAGD0NcR6jHSOcmAo6963kZAzMzSxJI706zqRTdG+ynse9LdVDQjagwjIyD7VwMKbbCJPXpVHb5ZiW81gUExq60egOx9NWbPaiPDXFHPC+C2aDllRCsI9q6jR0CgG5c/7RiuoCwpVdQAIkAf8/5FAzSoEjqNJ6jpQqzMCG0BiPqIjHiu06Ms5PTsM+9RQQSdJIMztnbamLavLaANstbIkjsaosH0xhrd0dlgVlziGj6NIMZnegn4W4wYWyZXp4qwbeakB0qGzqUQI6R/9ol4kGA40nv0rny473GpT7cC7bLEAAmCdp6VJxLv+IeSJBIxVnLctkGCD2pP4RCSTcJ+KceUnqWJxausuoIY3msTSVOtyPA61TxDBLBG04FSbmtcbrKhbaM4Nm9Ljo4ikm2wIR0YN0xvRFECqRcmfqGnIojcLtpa67p0Bj+KvakR80YjSGBOqcCMVTqs3SEHDwTuZ0xU7qtskFiWGDEEferLqYIk8+qCD5zWl7iGEc6SJB8UkKSBAmqrPCu7hGIIAk5kL/tQTgk3JLRO5rGJD4Mx1Br0P8SsIiTbCrBkwe9QBCTyjV7UgK1bNwnBgbkVS/CXEtEA6Qc6Tuar4Lg2VJuHSAZIjeu4lVuhn1KF2mdqmmPKSdypOIkDatIK5YMPfFExUHlZiAZAnrTLKq0kvG5O81Qq2hIPQb0TXdI0g1pEbBiDtiJ9qS+CcR4oLOAt+rda6/MEIgdz0r0gJbmgHpXlf4Y2niSemkye1eqtxVbB33Jrjz9dOPjmQwZOOwrrZj8kUwXEnLCuZ16Gsa0WwUkEjNDpecRp80LaS3T70TtC7T7U1TAumGjPjrWM4JDNgAYFbYDm1Fz470bqoG01EJt3SXYKeUeN6Y3MATM+KWiBCWXA7UxDIJoObK9zU3EEMNR22qg7RSHwuYgUHmQbN0AQUc9RtV1k6QAzZjbtU/E2vUBg5mQehpfCXicEnUNjXS9zU8uPUtycnatv2UvLpcSJneK62y+mCe2a43BHiuap7nCp6JtqsJM4rzuJs/h2UK+SJicivSvcbbtKVUFn7dvevKcPcuFiZYmYmu3CVjlYAMRkEz71dwl57iuWElAM96gII3EUbaktxsGg4O9dLxlZlseizhgSDnauRypBHTvUvBn+mw7GapRScmuFmV1l2KXvC5YaSAx770j1VUczRO00q44tjMknYDc1IbzawzAGPykYFanG8mLcW+qj4U53o2SFVu9QPeLOrDBHUVcjF7KE4nYVOXHEl1oNHBYz2rFWQKC+j6GVTkjesxTNaEGLi8u5nalNxVkHSpL/AOkVHbYLZe2bYDsYLN0+KFQSWCmYE4rpOETTXum5cT1UItqfpmk3X9S+z4AY9q0EC4qqsNMb7Uy/psnREtOoEYitzJUYgtJdALErOQFNZ6SO8rcUL1JxFIZtRJySTOTXCCeYwPatIuuW+EUIQxOMsrbn5qa61ksPSVh3LGZpIBY4BJ8UbeoUWQdI2ximAjfuxGvHZcD9q7QxIe5gRIB60r8tMVRI1cx6CgYb5/KgbyVmupluwugTH3rqgWtxmH9Yak7msYp6IXTzdM7eTQKYPc7ZrZ1nmIgbVQBl3lmz3rQwDGJmNyYoyjlJW2xHeJpYEk6ht0oDeSIBkdR3oWwxZtz0FFayGMxAyQK5LbXFLjYYzUCwSuxI9qOxeay0jKncGsFsk5kDvFZsI/tTILBxCnSGGnVtkGu4oA2dhMx7VGELHlExuaqBDWvSurt9LKZM+1YvHPGtSkwSCKJYMDSF/wAxk1S1myTat6xqIPOBAPv5qmzaCBcBmOxYbCtXliY882m1RE1sW1DAnPTTtNezbsAuTCyTMAbD+9KvcJaVv+iq53B3qfS/LyAY/aiRtTBSSE3IFWX7AIOjSp7bVHoKvpICknM9KssqWYc9w8QujoFgE0zhnt2w1kA3LjGB0BqVtSFh9Q6mis8hZ1ABAxPSriPWvXw+sTpQCJB3+K8p7bXLui3LH3oNTOwUSPc1zAkwpkAZMUwX2/wlhCt4lnKj8sxSn4qwoK2wxEQMATUhVljUDByJ600j00xoJI3A6Uwa91rjBjAA2WMUi5JYkiJpyXGwCiXB1GmP3Ga7iNDEabXpmNg2oUg7g3ChxAnGetU+riKgRLkzbBMbkbVcypoUq6kxDAdDXPnx/W+PIQuHrRi5mkbVsma5419KBcAOTRK41SKlMnatyBTDVoumYms/FNqYEbVGWjrXSSJj5imGqm4gMcmhW8QQAZFS+RWqzdKfK7FhugDfFTXrpJ5TQyzY3rNBjO/ak4mtQs2OlJcBbq3BiBDVbZti2NbCRE57UllXUVKkDse3mt+M7pY47SCBzfxSjxFy44AuBVOCdhVNq1YU/Qv2mkccwJVEgBckVeOb0XS7oHqkIy3B0Y9qEJcIJUjsQDmO/tSgYmtDkgKWMdprrjmMKzAqo1kAZGf+CutFCyrcgAbkjxtXa99LaFPQSZrPShdZMKdp/N7UDbSvZuAlSEfAkRNXcsAgjGTXmO1y5AY/TgSdqrHEK9tEUy74PjvXPnx71qVLDgrcBkk4PmgaSxPWaawKFrbGY+kk0sNAMgGe9dIzTEt+ogCkBhMz1roZXTUTKnEmgtkFgCYnrWMFF2EaVnc1B6i3kQhCQDEieua13LdMd6g4oRd1TqDDlNGOMK2Su7TjH81y+OumtZxkLcVgBJWphqIMdBJondrhliTS9q68ZkZMsMUvKw6GdulOvWhcd2QktO28+xoGVfSLqV5sGTke1Osa2tWwFGpZhien81Lf1YmVtNuEEMcEn+1LIgwZmjvL6d51zg0bO1yyJkkGMwa0haNoBgDOJjatd2do3A2iqOHtWLkAzJWDJ69KVdtPaYcrAjuIpoXIGnE96fwdv1+LtqTk5JNLthR9YOrz0piIRc12mUMMhZ39qlFP4f1HuEysNETMV1b+IQ5bWCcmFH966oqDGYWB19qK3ABMjuCeleld4S0y67av3xkVBdUqQXmScBsn7VdRTY4lfUUPLIMcmwNNuJY4i4SP6aHfFQXLvpsAiskZy00+3xYKhW0g0wdxHCm2g9PU9o/mA6ii4d2scOBjPRhmT1pqOBazlTlgDis4srdRXsprZVgx0FRQ2la8xW6ueojpVL8Lw2lmVVwuc4qS3xMcM3pOVuAAMX/tQ+qt1FtkPqJ5iNj8UQPEJbFqFTAzqBxSFvBUK20A1CGJyaddIsYsvrBXBjYf2qQKT4rUDbagsS2817KQACwjrHepP8PsBucDwvt5r0btjXpUEKsbd65crtahT3YcHeexpdy6boMQF99zQPbYSXme8TTuFFtmIJBIyDUUhRqkkQR22oLiK2lrtrPQzFVta5nUsRGcCcVKyExrhcbdT8UzAN7hbdy0GtFsHJPXxSbFuwZN25B7KJpygK07jrNTtYZnYrDKR06fFalZwN22gckEmT+1Y+pRrWAOkRWiJ0uCrDOf4qi3whvLAXQRnUx6VrQhnIsDUupiRzzJxSVdgI0gj2os2rpQ8yg5HQ117ScohCjvNVDFvC4ArWhqn6hvFV3xYS2NOpHIzI6V5s7ECCKaOILf9VQ5/wAxIqKaVtH/AKV0wT9BU796M+itouGAcYAXp7ih4fibNljcNpdQOBJNLbiFa8zC2NROGZtu2KYKGvW7SKdM3OoLf2pbcQ557lkqoEAzAouHspdZ71xmKJu3UnvUjXHucpuMyTiTU+YaMX7jEAHTPan2eLW2vMGcg4IiKkIAnSfFcIhgd+lX5hr0NQcHmUO0SYkjx/FUfh7SJpVw9xtpO1RWCy2x6eJ6gVtxHDQ5zg1zUZh7pGqJPUQKf+GeSWYEHqCIqQAF4LQp3MVZw7IF9JyCCZGdzGfirKA4eyru7sx9Mdx0oipNzVbj68AZn70T2Xd/6NzkP+alG4bPEujJqiSxJ3oNvXDOliW0mBNILljLGSase3aFsl5BzAG/zXm37oQGBntUu1fDy4VCUEkAmDXnKNbEsxk+Jk1vqFgdZJboe1Yhi4Dgidj1rpx44zbrSqL3PcHFAxEmBFbu2THmsJ3EzW0aqgkSQB1ozcLE82F2nFKraA5wJjrmjW3cGlkXMghpEClAwBRazq1AgnrI3qA9TNcm5BBwcTjxW+gdSqHUE9Cf2oFcajPKpOwGKIvbjSLY3kUGG0yNzAiDuOlHatJdUAlluedjS2BJO4gTBNGzaNMbadwSM96lFFoKVayyEAflJmPY+9RldLNBwpPzVqMLgyOZcHpBpTaRxDNcTWI22BOwNY43taQukNnNO4ewSNVzC76Y3plhUAMhfUVjkZpv/M05cvwkS8R6Ru7ENuegpVu66XNSxMRkdKdcX1L5/pkhVnBjUKB0Cf8A5GTsNUx8VqeYEsZMkyTXAAEGZnoDR7WIjmLV34dypdSpAzvV0clz0Lp1IDIj2q61/iKXkFviLQc7dp/2rzvTMEntOM1wPLAAmd+tM0e3xP8Ah6suuyRn9Rn96867baw+loHtRWOMvWdIuDUnkbV6d27ZuWZJGiN27eKng8cXD3B966iv2AtyFlRGzGDXVUWWeLcWbnrIxExM1IyEu98IRbB5Z716d69bs2dOmIEDr8YryeIv+s4YAADAHapApjqaT3ya5bbNEAmdsb1jGWxV2m6/puqGQMFYHtP2rQjXVBClj0Iiaaoe2MYaYDA1Uipw1lTcYi7BPeut2w7AhxO8nEVNEiK6NzyJIyTHXvVljhyES4RpdpjtB8066ba31uELoRdMHAM9ql4riXYaFblGyrEUFVlOHtDRcIIjcDFT8TYsoNVlwy7x2qK5cZ4DT5rAIwRMdRTB63BQtvlyHWRnaqbMOksWLyQJNeVwtxbd5VDSj4E4g16L3fRaSgaZNc7MbDcRrgKIIJOd4obFt2S4QRJXlMfemXeIttBB1CJC6Zg96nVxMLIzjxUDLLMsqSArbgiQa65YJP8ATKE9Qp2o3ZTbBOSBB5s/alrduKAFKoh6ximBT23Vgrb+21Ekpmd+4ow5DqVEMBzNMhq0IXsyDmdompgwqt1gDaTJ3C0F3h9S6bZ0FdhOK49ASSexFMUGdx8VO2pI8u7auWrgDwDvIrnJgM0sT3NVcVcB4gIw5QIM9T70i+qat4gSZzPiu02ztzvpTABgVjI2Gaw6SD0I2810kNrWFMyKK4Gy9wSW2M1UAFBEagD2NGFlRHMZ6UJCwCJgHNapKNAeI65oD9ZfTdFGjUZnfHal2/rABAzuaxgJ5FaPajNi6qByuCYjrQbeZS7aCIkxj96V5qq0i310BlW5MknrXXuEu20iJjJA3oO4a96dwKMjbNenxT22t6dUsfAM/PSvIUjUvUjpG9etbs27g9QDBGANge1Y5RqE27OsQokjxRM3oaxcRWuHY9qoa4LSaWBBBw460q/dS6nRjBjBkVAdm4lgFUEkj71124guQbahxMkrNKtJoI1AzkEHAGKAurFQYxIIyRUVl1wNRChl75Ge/ivOUhbpPEWywJ6yK9MOqjlQGJ3yD5qDiXN5yArEqSWmtcGaHiUsQHsMMzy5wKmpyBCpBB1RygCZoHGx0x8YrpEBTLbqkygY9J6VtoIZ1KT/AN0U8W7PQZI2kEfegWosXFOo+m3sTNGLdhZVjqPTTkmtt8ItxuUkAYMkR96tt8DbAMK7eUFS1XnXkBJCWCmdyZpLIy7qR71654Sw5ILlH35hFTXuDldQIJHnBikqIM0+w+idQERtGTXIAL2i4IEdBEVbxPC2nS21toJ5c4Aq6IyLaoWB1Qdz/tThD2VKiIP7VIHdDpnAO001eJbRoKoQQZMZ96BgIRpQMR1HitvOHs/0yGJO0ZipxdbTvttR8O0XC2oqW2jas2fpoBcZLjRAPWBijXimEyAfbFVXWtpJW5bdj3Xp5IpYtG+ZW3I2JU4FT32KXZvHnDGOXBJz7Cl3ypbXbP1bx0pjcN6ZBMxEyCCDQjSQ2oaAOpAB+BTrdCw4mfSBJ6mTRWrhBOm3qDHaetCzieUH5NCXJiIEdq1gt4e7ZgW01Kex60TWLbHKj3GDUnDIzPqVQxXIWYqkXggIuowcDIGa52WXpSr9p0Xllh3A2obXr2VMs1u2ckzE060WvWyr7mcLgx381KLLKwIZSNwRWpvlHeldu88MwPU9a6ii+6jlZgBAIMYrq0jj6ttmtsSpGCCaWQF6ya245dyxySetZ5OTVRwAI6A9qc1xTbAJMqCARShgeZ2owAxMqAe21AKX3U7k/NGb2n6d+xG1AEEaiuPBrlU6pUbd6A9bYkySJntQSrHYjsJogx1CVB8U305MvOckrk0GLwjPiCG7VycMSdJKhgMLqyasNhPTFzSLg3BJ/vWHi1wGAI8ipohILn0gMgmPftV9i4L/AA664LDDUl0V3mVE/Y+9ZcR0s60OUGCMEVLNWdKhYBhVfS3SScmgOpG0sIZehpfD8R6kq0SomQP+Zq4onELDmLijcb1yrefqR2DNlSPHau0xqGvpsOtXpw5Nso8EjYmpblh7Txk9QwGxohABHXNPDAgAIFB6igYAMep23msPjFTWsE1wxBzHWlcRxBtW4BILY1Dp7Vu+JqbimGtF6ASavHupfC7beoTqgwD9Rk0H03Mc2k9NqzqzyCZrEYqZU8x813c2zAzufFNlnREOCnRh9opDSG5p9qcLksG1EMNmJ/aoGRrQQFDYwh/mjS0BAcaSTtG1St9Mg7HAO9XcGUdCjKG7EeKigUKrDBk9RQcRce3dhSQwwSDXo6Ftg6UJuE48ea8/i09Jxr5ycmcTSBCjROoQYwKdY4t7WZDZzJqcwVJBg9qyMTqG21VDSBcvcmJPWvZtsq8OpZmCgadMzPmvF4Z1t3wzbfxXrWnKiGYAE48Vjl61J0XfYuusnqRt06VKSwO9U3NEAZMd6QVBEg5FZqsDd+tOtkHRIBA2AME0j+a3VB2HzU0UEMyRoMgAT1Fee2ocW6KwGpoknHzTLnFv9NtsRBM4NTH6uacnNdOM/WbVFywFvQtxdawTpOx70xi7W7q6Sy/UWnINPtWlZSVgBVnakcPeVeJaCChJw+JjzUltMRMdLYEd60Mp+qas4jhla5rkWg2QPqFQsulokEdxXSIat0lkUAwOwya9VrpRUCrLETpDbVLwl+1w41i0CwBk0u7xQvcQX0gA7gioKbYN2I17yWjAz2qg2NZaCjA/VJiT3rzTcKmQSTMkZzT14tTbyV1dv/dMVQ3AqTqdwAegqe8Q9uNxP0DtFMbjBcxqHtOalvKxzpJM9+lSCMiCRR2VLOIE09OGVx1BP2qqxwRtMtyDyiSSd6tqYmtcLcN4powDDA7CuvqisbaQSm0V6N5v6Bh8HfVJFeQ31fVk43qTsaq6yeaCF/NWqyoxBTWvUTSSZJ236Vonoa0K7V4I+i2rKH2ESPtQXlF1QVWH1FSsbeKC5xNy4YJnEBQKt4XhWKIIOvfesW4smom4VxoAXJ3O4qz0EIIYavenm26nTpz2FZp+K5Xla18vN4jTauKLXKV3gmaLhh63ql5JIg5qy9ZW4IYA+aGzYFkNBmTO1a++k+UjWkU/mDAA43HkUl3knOqe4qviQwIdJkYMdqmCi79UIf1bA1043YhJJO9dRMukxIPtXVpHHxW2hNwDPxRG2VyRIG8UAkHG5oCxpnYjEdz3rGbVmMmtA1HOJ8VnpvMaT22oNQ9yK1ebEGK0pyjTnuOorgRkDHvQbqhYjE9q5bmjrA7DFcLTs3IGIAnvXGy88wHsaBlu8VA0sQJ6U9LK3l+vbOOnmplQ4GnfvRhmsPn7A7VBXZtqpIK6iD0PSguIpEA6e4M11niNaEGQ4XPkd6DiiVuXCesHHSorrctedoGFCwBEVaFuCLmr6Rg/2qWwQ2pg5dQZkiKZ6zKAFMT+9c763PHoC4ttFVmJaNz1oLlwMg5wucZivP8AVciWhveuZmcySZjFNiCYgMTLH3oWYb0s6gMihDJrm4wgD6SdzUzaa1ryic5FCbtp2i6OU7N+mp3bW8xiIAGTQ7jH2rpOOMn8TwdzhnDCGttswzSLiFR0jvVacW9tNBAe3H0npQXUmyt1Mox+x7GqJnlhMgwKxSQaLTPTMT70IEtWkMEiP4NMRtGVJOcRiaWn1Q370wrqYBdjuRtNQVX+KZQsiSRM96guO1xpMmqrzg20UcwAnOM0gjlABKk9ZxQKho2P2rSjKJIIFNK3UQyuDjUDFDcv3GVUJhRsJoA0Np1FTp2mKv4Zi3DBtmVonvUKluh+Jqrhbo9P02gfpjvWeU2NcfVA1QdRmaCYo1OM7UpyCxFcnSuYjSABkUJH+1ZSrrSVXUQIzFWTWLSASjypgg4ow/qXF15z0FZcQpgjPcdaADrOa7/jD0XulLDAYMRUJUqxUENHaididJdzB7DamNZi3ba2wYncatzWeMyLeyg1y0rW4jM7ZrrRBmSBA3Oa5iGPMCD1oMBYg5rSGAMbcT4g0uCBBkfxW6ogg46CZo1H9P68kyRE0AjWxiSYFEl3TIZZ/kVy6naFXp2oiAR/UDavBmis9VQOXHcEVUilCDAYLGQ2PaoyEnZ1zmc0StctAsjcpFQenaXUpws9CTBpssBp9TTG2ARUvCcda0BXQB4yTsatco9oQVznJrNEl8apU3FjweledetaMiIOwmavvoSpzA7xMGvO06X550/5a1EbbtszMwUHSJI6VYvD23XXoZP8vT/5UvqRaBVSBMaviquCu6rcSeXBz0rPPc6a4+nWwEEKqr7CKot3fT5h9qSSJxWg4rz67K2vK2FAII2OKWbTsoxEn7UmCdjTE4i4uCQRtBrU5f2zZ/TDbZOVhSzyY3FVK2sGZEbUi+p1RWa1CDA2qTiFZSXXI7ETFVRuKxgAM1rjcc+URDh3uDUpEHtXVju9u46qxUTsK6vQ5q+I4O96YKwY3UUlOCusQWQgbV6fqzWi5ynEz2NTarxzZYNBEeTiuAu2+uVP071fetl9i+M6TmK30UaCQW8f/KuiNOJsx/UsDVO6mJrfxFjSALJZhuSTVT8EGLAHB7D+9CvA7xOMxtREovcPPNw0ezEURXhHgo7qf0nMfNOvcLpUkDVmonWgpPCoGhkuEMcMCCKaLIRB/SIUiGa4IqazxBQEESp3ESDVbB7LB0b+g/fOk1BLdPpXYUYCkb9DWtcN200gx9RbvHSqJtsGx6mkYC4jv8Uu2HW8QbZVGyB0xVG8MNHDspENOa1vqxWpAVgPihyDXC+uv4MQBFaNsbUBNLuu6AG2d+lJNZ0x3C5I1dh3qcWrlx/6aEmckD+TW2zNzVcyYnJiR2ouI4m40W0aBEEKIrrJjOse0lkf1HVX/TOpv2oFVX2DA9yBFBI5VABE7964LJ+qI85rQJ7ZmOvSRE0Vi8LRZGBNt8OOoofUgc3MvWmXLYVRcEkeO1B1+yAguW21LvU11PTfBlWEiruFYLcW0xlTlT0IoeKtcpQAgatSH36UEI37imSHH1cw26e1B9cYClcHzmjdTpMCCuSKo5izfWx5d4M9aFV6hgP9Q3rg+ASQIFcxWALYIxzZ3NAx7ruyLcgKPyqBmjCa49JdTr9QJ5j7Cp2OFGo7bREVqhkMgwag5o3Bz1ERFYqs2RuDimtfL/Vbtse5GTWhbcElTbBxIOoexoGrdYopMiRXFqUq+jc03XBXspyRVjWuGuIwUMjTvJEe9Y+WvpLcuhB3Y7CstvZZh6qsr9XVv7V1zhLqtqtrIicVOZ1QZDecVqSRm1Rd4a4rldWpMFWnGdsVO6MjQeuZG1UcPxDoCoaARB8e1WcUlu7b9S2ouM2xmIq7g8uSIM5FOttCkhiB+kzFElsXOXTBG++a9BEWzaPplyp/KpGPuKWo8gtJJP5t65CS4iJnrtTuItDVKIQNs0pkZBDCPNUYZaVkRvXIrIVcCRO4zWFTA87ZrJIwKoct2FGApB3jMVh0OZmCd5xS9WVI6CmhlJJHLNQYGAkMCJ7U2AIKsvNjIwfegCkEqxx0xg1qrpvBYJB7ZqDmtENzIV8gTRar9vCmQOlW8HatMp9S6STgANVR4WxEDVq6Zqarxm4h8hwRq7msDW1uK31L1gRVnE8NoIUspAyekVI6lV7DeNoqor4mxZbhSOHONWrJ3qLhGKXxjcQa21fuWSNIGn9JE1Xeshit6yChYZEYqXzFG8KJWsW6F+s6R3NTXjdgBmC7nBpJaZ1MzdhXP+Nv7XPxlnpqY+BWJxtt20kaSe9RKpJlSAd96EkR1kVr+OJ9165vQsA5rjdLQJ2ETXm277dckCBVaMGAMQCK53jjc5aKebahdhnVGO9EXCiftUnFPIAx5FSTazypFzSzltW+dq6tF1QI0T811elzO9V/P3o14hhiTHalgHVGTTEt6mAPXY9qgt4dvUBKtnp/86V34h7c+qhEGJqMF+GeRg/83r00C3rcsuR0NRQJxCvOg/ejd7kQqe+amvKRJ08wM460K3IVjrGo9JoDu+o6EHAqG5bCnuT0iqbrEkwCRAyTUrLDY61UL2r0f8NJuW7loiRuKgKiDODXo/4SQrOrCCRialWIdfpXZM6TKNHam2WAW4jNBtgwQN+lN/xHhCrs9sSGOr270m3bYW9JGXwI3Oab0GWeprrkaSwBMdBk1yYFBxN46DbUEedq5SbXTyE3b3MFQsAN8QZpds+oSHJjEz2pUw2Z/vWo0Ag5JrtJI52ntc1EgBVU9IyaFlhi25/k0kOwERIph5iACIHX3qowBWyd5+1EogdRnrWEaPnJo4xIM95oDNq4i6rQDhsYqmzYZbBFxSuxOYxU1m9csvyEROxq4f4gLo0X7P8A3DNShPCC56xXRGkSkZx1g1bd4dbiQu6MSPnpU6cYUeBcDIRAgAR7063xan6s/wCYGs3VQ3OAPqsVnedppVyy6mGh574Ir1W4mwWMPB8ijS5aKnUVMb4mrpjwm4VlElgPeksjKYK56V9C9pGXWpgeNqma2oOrA9lGaujx9LQTpNOs8T6QhrauOzVebxkyoM4IYY+1ATYdYuWQROCpgimiY3+HuiGs+m3Qq1Lu2YEoxYdiIMf3r0bfCcI4JRioP5XiiezctnPoFei4Ej5po8XY/wC1MUuxjUfk1678Lw963y2lV4xDbe8VH+Fu2WC6dQbaCY/amjbfEcRauI1xmdfzdcU3iOJ4O7GtS5HWKmucPdCgsjLGJIpbJpVsrynPmgpI4O4x5tIiBRJwV62jG28+DiomInVbUqO0zmvW/wAOOrgzpeWEyD0qVAcDa9Ry10MrJg+adxDMtzTpGk41f2oHuC05UMAxH0nvW6znBHeaisa8qMAwnHTINcfw5BDBVB3mhu3EtyEA+1SO3qMS37RVRnE8LoGtLcp4NZat2GQaiy98ZBo0Ny3lCY3iqk9LihDKFuDqBVHn3bVtG5XLINwRBrLcKiSE55EkTFW3rEAq66YnS3Q/+6newY0sCsmVJFABtMogyCf3rHYEZGryaotWCbUlsqYM9qX6NzWIGo7Y6UCEAmVMHtNXW+K0f9TlMZ80r8Hfa6LRUqWBPMMClXUuWGCPAkSJMip6KL943hrXIAjGajaHbnYnO5NHbJtkkqQerUxFLnkUPOSFOftVG2HVGAgMhGQcirrZF4KUEEYAio7tpkaFAaczEGl2btzh3OW3yvWoouKtvIZskjealZSWGxJ6CvVN31FDEqwYxBE9Kl/E2Ux+ESZwQaIBbdlkQ+sVbZgw29qG9w7W4aNaHZhtV/DcbZuOEa2ik7EqK9H0wbZOkT4xNNxcfNMgiQG+dqK2xUQJ8aTvVPFWUS5GkITmO1ToHa4LarLE9OtX1BAXbijSx0ncFqnIAYjMA1VdtXeHkAiCdwQf+GhtuqKcKzfxUhS3tyQQQARiYFdRNoczqtjxBrqor4O2Ll7IwFNZct3bVw2n1EETynFbwN023eBqldqe/EvuDBPWBNAhbJOAnN3bAHsKtTTZtBQdh1qR+LuFdh/FTa3dj/UUe7RTBRfvBpEb0FhdVxUYmCdzS1XrOqdop9qN4E9Y3pSKOItFLZVSfaKjdCBJECrTdkGTIO+KmugENEk96kE24IO4NHaZ0Iu7aTuKU0g4G9XWE9ay1tjpYbA1RWx9W2IO+xqYMjcRbxCgAdo7jxTeEUqgtvOrpQ8XYKsbiH3U1lonYSdqRdLsRpHLuBRlzIEQexO9daYW5JGtD0napItvRbhbiyRJmDHSkXEtoY0tt2irNVpiVRiFO2YIrfw/JObncTmtsIFDNy6dUjr0reZDIGe9Wra0MQVhencUxbJY5Bj2mqPPILACInMHFGNSAgie9O4m16UFl1LP0mkm5ADWg3p9iJigwMsYzTUCHfB9qQ5QnUrET0HStS442hh96B13hrg5tOpf1CgVTbOHimW7oflU6GjOcGityNlVx4AP8VAEEtuCTWglYyQPFUqllxhdLdiKF7LrOn9qAbd0oeUsJG24rvU6f+qAAzBAmihisHbyKDAx+PPStdRMlceIrltjqRHirV4VSkqDHY4oqBhBGmR71p9TTOqREirTwS6DCEGMQ2KBeFJYgELI2bepoiGoNkSdwYyPtV/DPedTKSRkNnP/ALpL8M5y2B0Pf2orRucPc0lge4nalGXL1wMW1NB/Kw/4RS+KVDZD+mM5JP8ANXlEdfUC5IzUl9XvOqhToQSF7nzUggWy93mCcverP8LtMLjvBCxEVUlogL0LDboBR3FHDp/TJB2icVdEXGw14DIalXTPKrkhcA11wuXLE58UEnAGogVUZckiG5x56Ua2TEyKHQ0/SZog5GX9vNAwKFWZyOkb1lrQ7AQVbxXTI6fFajC25Oj5maCu3dKgW7v9ROpO9Hc4ZdP9NZU5xup7j/akLcD/AEkT/FH+I9MgQQTgBRUxSp9C4uvUB3AMGg12vVJVgqT9h2NWLeJUhlBB7x/FJa1w7TrtquNwKBFu/N5lS4xQLCgtg0q7ZW4S7GGPWmtwAgNaeAe5x96eiBgRdlWAjU0Gfmgkkrw7qFOpIHxSLY19NJ9quexrGnM9IMGphZggHDCiG27rqpR2YgEEZ7UN+0L0suZM5MEU5LaMgk596FrBBlHWPNFDZuPYQroFwTMEgkV3orcMki03fof9q4m5b6qRQi9p6ZojW/w9gpjmY5BU1Zw/F3FTTdQyOhGaHg7yS2dIp9zhhkhtI/ap/qk3H4fiTDSG7HBrLNheGLFYJP5jmsa2shbihvP/ALqjRotBVIdowxoPN4+09tka2RobeO53pVnh34hgqgqozJ7V6b2fXt8ygMBOKltKS4UbTgVYMHDoZABGnH011PfhnuNOsDpG1dU0efaGmJ3296YwDfG1GV6SDHShMdK2ySbTM2Wo0tKOWC58VsmYMx9qarFMAADrFBqD08BFB7STW+swwVEeKE3kLZGT1BirEsKyDTn2NSql9UTzAiguurrAmmPw7IGgYFIYaWOINBoUFQW2GDFE6tZdSJDbgnFLDeenvTHuq1rSQSZxjags4a+LpGIIG1OvGWXEggg+K8lDpgmYGZG4qxLxvLpB5/OJqYunvZTrilXFtAaWcQfzDBo0utGl5le1Ia+UulWXUD+ZcUQTWhAIi4PImhFoO0FDnEKaxFFxgULqfGxp44e7cB/qMGB3bpVCxw2NCqxnInApg4e6pEsIAzDRT7a8Qoi4yN5WhuWy7STgfNZ1cIulr39PRC9M0i3Yu2gQmUmrRptid/FC2pzKR7TV1EZ4UN/UMjME023wFt/qAnoe9W21KLBBPvS7lyyridIxmpq4BOBtgiQY871lzhks3JFgsIwy7im/iE0whkDoK1eIUiCYPY07XpPctC4pJmB9xQLaa2wzMEYqktbYQTk9qBVUYW6wB/K1VkkFUBuMoMkwKcLrushAVH6qG+moxqB7xWIugeizEq2zDp7igZauWmTUEVWGw7+1a/FAGAxBjNZctFUPp3Cqnt2qcWRqMvPsN6i6aeJdt465Fbw1x2YgGBMkmuFpY65/UaIW1gjUtXobxF0C4oYyFM7VI/O4YklydztTTaeDDRPShXhiSJuFT5EURVaNshYwRRsuk6k+R0qVbekHVcn2pyMA0Y099VTF0u4zOeVip7Gpb151EEz4NXl1EzDewpVy3ZvNzg+KsR52ssZMrXQT9Jcj3iq7nDKAfTf4NTMjqvNlaqMJKgz9gaUxjpRQMkk52rihO0mgK0QQQSRTQTkfFDass4xAC9aIiOkmg5E1GVwR8U10uBVaBHeaXaaLkkxVDkC3FFCra9lx5NOVU3uEewqQLGYON4NOkESG9xOaYaoYoDqSV6V2gXDC7eNqBbYIEODNOtpGQ2anigSxG/TuelKv8OGdjkT1qzV0PSgulNJB/Y1B5DhkbSGx71tvruT70y/6SEkA/JmhDiJUZrSCCKTkfc1ly1bP0sV+aZa4Z7il2wKFrIUmcr4oAslrFwMpDf3r1bYBthkBAYTBO1QWwuiOk1SlzEEgDbapYSjnU8YDV2prcgzilsCeaPJNMtuGwTJHc/3qKzSWyTB96SYQ4XaYNW8oXtUtyILRSFLuPDcoAHuc11KLz2rq1iaNQrAApH8il3LJ/Jn33qgoynvXKCD9FB5zq4MEZoeYdP2r1Sqn6lx7Ul7VonDQfNXUedVNm84UDUYFMNgHYfNaOEc5A+KCsMb/AA5I36RUN22bZ2OKoso9uYjG8mnyCJaCBWVeaF1bADtRHh2jUBgbntVoe10AB/00l7jsYJkDoKCUIZ5dJ8GuBKY2I7inC/dQkZg5yK0Xdci5LL7ZFUHwj+qYddR87/eh46ycuCYn7UC3Bauh7Tah5Ga9EXFe2GH0moIuHUogSNsiKq9QqMHlHVhml3Wj6cGlMbpH6varmpuDPHANBJB/atZ3IlTM1MbcnUw0n704EASJI+1MNdN4qZTPeKSL7IdIVlP2qnU+4kCsLK+LmfMUCTf1iH9Ro2yKWHg4AHgiqmeyygEz7xSCeHzAbxBoFs+r8x9gIoWAXYgHzmqrd/Qp9Gyfc0Xpm8QXSI80COHHMWd4WqHQHSyyAdlJyaIWCTLYUdKJrYa4pOAuaitRdFpicadiaLUtxQWAXHSsZdaiSVXtUysysVywnBFJNVUEVZgnTvWMAy6kAkHAOKUt2AVaR5rtFwkuhB/y9KYmjAuFofSF6kGTRNYtRLaiO80vVdE+okDxTVaBDRFBJetvbnQrBfeRShdddmI+f7VfbZQIViRXXbNp8sBNNEI4lpyqn4ijN5Dumk+Kqt2rdudIrGS2zS4nxFUIRwxgNTemVmu9G0DK8vtWsqRyhvvFAB9oriAylSRBogpMnTPaDSm1AkFT9iaI30VCwEU0r0AzCdvGKJdZOxA70xbTn6QCPOKowlEt6QPgVO8sJx8VYOGkbkHztQNw7oNp9qglSRcBOwOZqj6gOtCbZ6CugjvVGOcHFLBOIIJpwtlxvRjhl6tTQFu5JjmnxTfUI6tWqidBRBFHtQTtxFzUYUn3FA3qvnPsKrZgBgQKQ7Mx5JFAleFcnKx81XY4NAAWOrwKUtu4WBZtu1WpJETFSrHMMQDAqa+krApt7UtR3rhJIyPFJCm/h1UA+poJ6VgtIrZu6j4pSAucuB5piqky10n4qoqFlQkAQe5ogqgZ37yKm1sTysI/1Gjsq6kl2LexrOLpxdQJGfc1LduPcMDTHim3FD5BIpDIFBMn2irAvR7Cuogy/pb9q6qi8gGhI7GK4GN64sO1RQNr6EfJrgJHOi/FECO9cdJ3zQCLQnGK5kcZVVn3ogw6YHiuZlODOaBYN1jzIPvRgCIZSI+1EqiMMCKMDHSpoUVAwF+KFkJEC3/aqAIrJHUCmiX0n3iK08MCJIIP7VQXIOBNCXY7UE34Vdzc+y5p4UBAqECO9EDdA2X7VvNH0KDQJNtgTpEjvOTQ+hcgQKpFwjBUVhuDoufeKdmJhYY9vmtazdj6lgU8luwj71mmchRPg1dMTm3eMAssVxsXDgH9qrQONwPvRFgN5n2qaYi/CsMGfvTF4eIJI/mn6idlJ+KOI3AmmmJiEUZyR2FMSQMKfkUZI+a3PegAqSc7dqEkhvpxRkkCYH3oSGPaKBbFmbqBXAaTjPck0yI7VkHuaoxraOohVY+GiuTUuCqgdBvXKoBmD8UXIcZqApAG9Lu6WENEUJt/oafeuCtEFB9qo1WAAgTjcGhe4D9D6fBFGF04Az7VpV+oX5WoBtgsOYrPisKN0WR4NboEzpM+KZkjK00KKv0Qn5rDrjdQe001VPWQPegcsDysftV0DmNoPhqNVwMkHyJpeq5/9FcC+5j7UBs1xM6hHsKJWdiCCPmlg5yw+00cKREn4FA0TGYmuKk70I0jq1bCHdprKlvbjagKYzP2p8IvauMnY4q6hIKAQJn2oXMEY+aafMGsI7CqOUmJAEd4rQCwwAfMxQOGJABx2iiVWX2ioBZIIJArgUAyINcVSeYGfmt9JWyJ+1VGiCMUxDHShCxitgdTUURTUN6nuWDrJAmmnT+ofNZqQ4J+xpBP6Qg6wBXC3amCx9xVXLGT96AhP+CrpgVsqolDWqur9I+K2Y2LV2f1n5oCLTjaOtDoY7hftXA9zJog3TFQAbTdIHutdRk+RXVexpcEbj7UM+f2rK470Rs1wNd1oxQBjua6O2qmUQqapMN+ljRgHsRTDQmmgSveuiOpraEb0HT/AJo+KElpw4+RRnagNUEA5/NPxWaH6afvWDeibpUGhT1j4rtOKEVvSg0qP1EfArNJ6E/auFGN6gVzLu371wYnr+9P60LVZQrU3cV2o7av3ohvWmqgAVG5BrdY7itND1oNJHiuAmuFMWopZQfqodI/XT+lYaahOkfrNbAH5q25tSDVDSJ2A+9coPUfY0la01UUDHSt+4+amXemVMXTNUd6zX3mu7UYqKHWO9YW8kfIrTuaBtqGuJn87fauGjqCfcUo/VXdaqGhLJOxH7UcKBgn70rpXCop0DrJ9zXAqMQKXW0wHy/8FZI7D7Vx2oDvQES3QCsAJ3P7Vwoqo6B1roE711D1qDSortu1cayqjTq8fahIJohW9KKCD2/atWR/8ojWURuofprixO8fNYdqyorSs9BXG1P5f3rl3pp2qWqT6X+U/eu9M9J+9N6UBq6F+m36R966irqqP//Z");
  background-size: cover;
  background-position: left;
  bottom: 0px;
  border-radius: 50%;
  animation: earthRotate 30s linear 0s infinite;
  box-shadow: 0px 0 20px RGBA(255, 255, 255, 0.2), -5px 0px 8px #c3f4ff inset,
    15px 2px 25px #000 inset, -24px -2px 34px #c3f4ff99 inset,
    250px 0px 44px #00000066 inset, 150px 0px 38px #000000aa inset;
}
@keyframes earthRotate {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 400px 0;
  }
}

.curved-corner-star {
  display: flex;
  position: relative;
}

#curved-corner-bottomleft,
#curved-corner-bottomright,
#curved-corner-topleft,
#curved-corner-topright {
  width: 4px;
  height: 5px;
  overflow: hidden;
  position: relative;
}

#curved-corner-bottomleft:before,
#curved-corner-bottomright:before,
#curved-corner-topleft:before,
#curved-corner-topright:before {
  content: "";
  display: block;
  width: 200%;
  height: 200%;
  position: absolute;
  border-radius: 50%;
}

#curved-corner-bottomleft:before {
  bottom: 0;
  left: 0;
  box-shadow: -5px 5px 0 0 white;
}

#curved-corner-bottomright:before {
  bottom: 0;
  right: 0;
  box-shadow: 5px 5px 0 0 white;
}

#curved-corner-topleft:before {
  top: 0;
  left: 0;
  box-shadow: -5px -5px 0 0 white;
}

#curved-corner-topright:before {
  top: 0;
  right: 0;
  box-shadow: 5px -5px 0 0 white;
}

@keyframes twinkling {
  0%,
  100% {
    opacity: 0.1;
  }
  50% {
    opacity: 1;
  }
}

#star-1 {
  position: absolute;
  left: -20px;
  animation: twinkling 3s infinite;
}

#star-2 {
  position: absolute;
  left: -40px;
  top: 30px;
  animation: twinkling 2s infinite;
}
#star-3 {
  position: absolute;
  left: 350px;
  top: 90px;
  animation: twinkling 4s infinite;
}
#star-4 {
  position: absolute;
  left: 200px;
  top: 290px;
  animation: twinkling 3s infinite;
}
#star-5 {
  position: absolute;
  left: 50px;
  top: 270px;
  animation: twinkling 1.5s infinite;
}

#star-6 {
  position: absolute;
  left: 250px;
  top: -50px;
  animation: twinkling 4s infinite;
}
#star-7 {
  position: absolute;
  left: 290px;
  top: 60px;
  animation: twinkling 2s infinite;
}

</style>
    

================================================
FILE: Cards/LeonKohli_chatty-lionfish-6.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by LeonKohli  - Tags: simple, animation, minimalist, black, card, card animation, card hover */
.card {
  width: 20em;
  background: linear-gradient(135deg, #141313, #282727);
  border-radius: 1em;
  padding: 1.5em;
  text-align: center;
  box-shadow: 0 0.5em 0.75em rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 0.75em 1.5em rgba(0, 0, 0, 0.25);
}

.card .image {
  width: 100%;
  max-width: 12em;
  margin: 0 auto;
  display: block;
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card .image:hover {
  transform: scale(1.1);
}

.card .heading {
  font-size: 1.5em;
  font-weight: 900;
  background: -webkit-linear-gradient(left, #ffffff, #cccccc);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 1em 0;
  text-shadow: 0.125em 0.125em 0.25em rgba(0, 0, 0, 0.5);
}

.card .icons {
  display: flex;
  justify-content: center;
  gap: 1em;
}

.card .icons a {
  color: #ffffff;
  transition: color 0.3s ease, transform 0.3s ease;
}

.card .icons .instagram:hover {
  color: #e1306c;
  transform: scale(1.2);
}

.card .icons .x:hover {
  color: #8f8f8f;
  transform: scale(1.2);
}

.card .icons .discord:hover {
  color: #7289da;
  transform: scale(1.2);
}

.card .icons svg {
  width: 2em;
  height: 2em;
  transition: fill 0.3s ease;
}

</style>
    

================================================
FILE: Cards/LeryLey_silent-horse-11.html
================================================
<!-- From Uiverse.io by LeryLey  - Tags: simple, card, hover -->
<article
  class="w-72 bg-gray-700 shadow p-4 space-y-2 rounded-md hover:-translate-y-2 duration-300"
>
  <svg
    viewBox="0 0 24 24"
    fill="none"
    height="24"
    width="24"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    class="w-10 h-10 text-gray-300 bg-gray-600 rounded-full p-1"
  >
    <path
      d="m8.032 12 1.984 1.984 4.96-4.96m4.55 5.272.893-.893a1.984 1.984 0 0 0 0-2.806l-.893-.893a1.984 1.984 0 0 1-.581-1.403V7.04a1.984 1.984 0 0 0-1.984-1.984h-1.262a1.983 1.983 0 0 1-1.403-.581l-.893-.893a1.984 1.984 0 0 0-2.806 0l-.893.893a1.984 1.984 0 0 1-1.403.581H7.04A1.984 1.984 0 0 0 5.055 7.04v1.262c0 .527-.209 1.031-.581 1.403l-.893.893a1.984 1.984 0 0 0 0 2.806l.893.893c.372.372.581.876.581 1.403v1.262a1.984 1.984 0 0 0 1.984 1.984h1.262c.527 0 1.031.209 1.403.581l.893.893a1.984 1.984 0 0 0 2.806 0l.893-.893a1.985 1.985 0 0 1 1.403-.581h1.262a1.984 1.984 0 0 0 1.984-1.984V15.7c0-.527.209-1.031.581-1.403Z"
      stroke-width="2"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke="currentColor"
    ></path>
  </svg>
  <p class="text-sm w-full text-gray-400">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget massa
    interdum, rhoncus ex dignissim, ultricies tellus. Proin convallis mauris ut
    est pulvinar aliquet. Nulla facilisi.
  </p>
</article>


    

================================================
FILE: Cards/Li-Deheng_itchy-octopus-9.html
================================================
<div class="card-conteiner">
  <div class="card-content">
    <div class="card-title">Price <span>Range</span></div>
    <div class="values">
      <div>$<span id="first">735</span></div> -
      <div>$<span id="second">6 465</span></div>
    </div>
    <small class="current-range">
      Current Range:
      <div>$<span id="third">7 200</span></div>
    </small>
    <div data-range="#third" data-value-1="#second" data-value-0="#first" class="slider">
      <label class="label-min-value">1</label>
      <label class="label-max-value">10 000</label>
    </div>
    <div class="rangeslider">
      <input class="min input-ranges" name="range_1" type="range" min="1" max="10000" value="735">
      <input class="max input-ranges" name="range_1" type="range" min="1" max="10000" value="6465">
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Li-Deheng - Tags: slider, pricing, card, price, range */
.card-conteiner {
  cursor: default;
  --color-primary: #275efe;
  --color-headline: #3f4656;
  --color-text: #99a3ba;
}

.card-content {
  width: 100%;
  max-width: 312px;
  padding: 36px 32px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(18, 22, 33, .12);
}

.card-content .card-title {
  font-family: inherit;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: var(--color-headline);
}

.card-content .card-title span {
  font-weight: 500;
}

.card-content .values div, .card-content .current-range div {
  display: inline-block;
  vertical-align: top;
}

.card-content .values {
  margin: 0;
  font-weight: 500;
  color: var(--color-primary);
}

.card-content .values > div:first-child {
  margin-right: 2px;
}

.card-content .values > div:last-child {
  margin-left: 2px;
}

.card-content .current-range {
  display: block;
  color: var(--color-text);
  margin-top: 8px;
  font-size: 14px;
}

.card-content .slider {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: .6em;
  color: var(--color-text);
}

/* Range Slider */
.input-ranges[type='range'] {
  width: 210px;
  height: 30px;
  overflow: hidden;
  outline: none;
}

.input-ranges[type='range'],
.input-ranges[type='range']::-webkit-slider-runnable-track,
.input-ranges[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: none;
}

.input-ranges[type='range']::-webkit-slider-runnable-track {
  width: 200px;
  height: 1px;
  background: var(--color-headline);
}

.input-ranges[type='range']:nth-child(2)::-webkit-slider-runnable-track {
  background: none;
}

.input-ranges[type='range']::-webkit-slider-thumb {
  position: relative;
  height: 15px;
  width: 15px;
  margin-top: -7px;
  background: #fff;
  border: 1px solid var(--color-headline);
  border-radius: 25px;
  cursor: pointer;
  z-index: 1;
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
}

.input-ranges[type='range']::-webkit-slider-thumb:hover {
  background: #eaefff;
  border: 1px solid var(--color-primary);
  outline: .5px solid var(--color-primary);
}

.input-ranges[type='range']::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.input-ranges[type='range']:nth-child(1)::-webkit-slider-thumb {
  z-index: 2;
}

.rangeslider {
  font-family: sans-serif;
  font-size: 14px;
  position: relative;
  height: 20px;
  width: 210px;
  display: inline-block;
  margin-top: -5px;
}

.rangeslider input {
  position: absolute;
}

.rangeslider span {
  position: absolute;
  margin-top: 20px;
  left: 0;
}

.rangeslider .right {
  position: relative;
  float: right;
  margin-right: -5px;
}
</style>


================================================
FILE: Cards/Li-Deheng_sweet-liger-88.html
================================================
<div class="like-dislike-container">
	<div class="tool-box">
		<button class="btn-close">×</button>
	</div>
	<p class="text-content">What did you think<br>of this post?</p>				
	<div class="icons-box">
		<div class="icons">
			<label class="btn-label" for="like-checkbox">
				<span class="like-text-content">123</span>
				<input class="input-box" id="like-checkbox" type="checkbox">
				<svg class="svgs" id="icon-like-solid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2H464c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48H294.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V320 272 247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192H96c17.7 0 32 14.3 32 32V448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32z"></path></svg>
				<svg class="svgs" id="icon-like-regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.1s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z"></path></svg>
				<div class="fireworks">
					<div class="checked-like-fx"></div>
				</div>
			</label>
		</div>
		<div class="icons">
			<label class="btn-label" for="dislike-checkbox">
				<input class="input-box" id="dislike-checkbox" type="checkbox">
				<div class="fireworks">
					<div class="checked-dislike-fx"></div>
				</div>
				<svg class="svgs" id="icon-dislike-solid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2H464c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48H294.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V320 272 247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192H96c17.7 0 32 14.3 32 32V448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32z"></path></svg>
				<svg class="svgs" id="icon-dislike-regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.1s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z"></path></svg>
				<span class="dislike-text-content">4</span>
			</label>
		</div>
	</div>
</div>
<style>
/* From Uiverse.io by Li-Deheng - Source: Li-Deheng - Tags: animation, button, card, checkbox, like, dislike, animated, hover effect */
.like-dislike-container {
  --dark-grey: #353535;
  --middle-grey: #767676;
  --lightest-grey: linear-gradient(#fafafa,#ebebeb);
  --shadow: 0 5px 15px 0 #00000026;
  --shadow-active: 0 5px 5px 0 #00000026;
  --border-radius-main: 10px;
  --border-radius-icon: 50px;
  position: relative;
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  cursor: default;
  color: var(--dark-grey);
  opacity: .9;
  margin: auto;
  padding: 1.5rem;
  font-weight: 600;
  background: var(--lightest-grey);
  max-width: max-content;
  border-radius: var(--border-radius-main);
  box-shadow: var(--shadow);
  transition: .2s ease all;
}

.like-dislike-container:hover {
  box-shadow: var(--shadow-active);
}

.like-dislike-container .tool-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  top: 0;
  right: 0;
  border-radius: var(--border-radius-main);
}

.like-dislike-container .btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: .8rem;
  height: .8rem;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  background-color: #ff000080;
  border: none;
  border-radius: var(--border-radius-main);
  transition: .2s ease all;
}

.like-dislike-container .btn-close:hover {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  color: #ffffff;
  background-color: #ff0000cc;
  box-shadow: var(--shadow-active);
}

.like-dislike-container .btn-close:active {
  width: .9rem;
  height: .9rem;
  font-size: .9rem;
  color: #ffffffde;
  --shadow-btn-close: 0 3px 3px 0 #00000026;
  box-shadow: var(--shadow-btn-close);
}

.like-dislike-container .text-content {
  margin-bottom: 1rem;
  font-size: 18px;
  line-height: 1.6;
  cursor: default;
}

.like-dislike-container .icons-box {
  display: flex;
}

.like-dislike-container .icons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: .6;
  margin: 0 0.5rem;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--middle-grey);
  border-radius: var(--border-radius-icon);
  transition: .2s ease all;
}

.like-dislike-container .icons:hover {
  opacity: .9;
  box-shadow: var(--shadow);
}

.like-dislike-container .icons:active {
  opacity: .9;
  box-shadow: var(--shadow-active);
}

.like-dislike-container .icons .btn-label {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.5rem;
  cursor: pointer;
  position: relative;
}

.like-dislike-container .like-text-content {
  border-right: 0.1rem solid var(--dark-grey);
  padding: 0 0.6rem 0 0.5rem;
  pointer-events: none;
}

.like-dislike-container .dislike-text-content {
  border-left: 0.1rem solid var(--dark-grey);
  padding: 0 0.5rem 0 0.6rem;
  pointer-events: none;
}

.like-dislike-container .icons .svgs {
  width: 1.3rem;
  fill: #000000;
  box-sizing: content-box;
  padding: 10px 10px;
  transition: .2s ease all;
}

/* Hide the default checkbox */
.like-dislike-container .icons .input-box {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.like-dislike-container .icons #icon-like-regular {
  display: block;
}

.like-dislike-container .icons #icon-like-solid {
  display: none;
}

.like-dislike-container .icons:hover :is(#icon-like-solid, #icon-like-regular) {
  animation: rotate-icon-like 0.7s ease-in-out both;
}

.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-regular {
  display: none;
  animation: checked-icon-like 0.5s;
}

.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-solid {
  display: block;
  animation: checked-icon-like 0.5s;
}

.like-dislike-container .icons #icon-dislike-regular {
  display: block;
  transform: rotate(180deg);
}

.like-dislike-container .icons #icon-dislike-solid {
  display: none;
  transform: rotate(180deg);
}

.like-dislike-container .icons:hover :is(#icon-dislike-solid, #icon-dislike-regular) {
  animation: rotate-icon-dislike 0.7s ease-in-out both;
}

.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-regular {
  display: none;
  animation: checked-icon-dislike 0.5s;
}

.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-solid {
  display: block;
  animation: checked-icon-dislike 0.5s;
}

.like-dislike-container .icons .fireworks {
  transform: scale(0.4);
}

.like-dislike-container .icons #like-checkbox:checked ~ .fireworks > .checked-like-fx {
  position: absolute;
  width: 10px;
  height: 10px;
  right: 40px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

.like-dislike-container .icons #dislike-checkbox:checked ~ .fireworks > .checked-dislike-fx {
  position: absolute;
  width: 10px;
  height: 10px;
  left: 40px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

/* Shake Animation */
@keyframes rotate-icon-like {
  0% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }

  25% {
    transform: rotate(3deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(-3deg) translate3d(0, 0, 0);
  }

  75% {
    transform: rotate(1deg) translate3d(0, 0, 0);
  }

  100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

@keyframes rotate-icon-dislike {
  0% {
    transform: rotate(180deg) translate3d(0, 0, 0);
  }

  25% {
    transform: rotate(183deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(177deg) translate3d(0, 0, 0);
  }

  75% {
    transform: rotate(181deg) translate3d(0, 0, 0);
  }

  100% {
    transform: rotate(180deg) translate3d(0, 0, 0);
  }
}

/* Checked Animation */
@keyframes checked-icon-like {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.2) rotate(-10deg);
  }
}

@keyframes checked-icon-dislike {
  0% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.2) rotate(170deg);
  }
}

/* Fireworks Animation */
@keyframes fireworks-position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}

@keyframes fireworks-gravity {
  to {
    transform: translateY(200px);
    opacity: 0;
  }
}

@keyframes fireworks-bang {
  to {
    box-shadow: 114px -107.3333333333px #8800ff, 212px -166.3333333333px #a600ff, 197px -6.3333333333px #ff006a, 179px -329.3333333333px #3300ff, -167px -262.3333333333px #ff0062, 233px 65.6666666667px #ff008c, 81px 42.6666666667px #0051ff, -13px 54.6666666667px #00ff2b, -60px -183.3333333333px #0900ff, 127px -259.3333333333px #ff00e6, 117px -122.3333333333px #00b7ff, 95px 20.6666666667px #ff8000, 115px 1.6666666667px #0004ff, -160px -328.3333333333px #00ff40, 69px -242.3333333333px #000dff, -208px -230.3333333333px #ff0400, 30px -15.3333333333px #e6ff00, 235px -15.3333333333px #fb00ff, 80px -232.3333333333px #d5ff00, 175px -173.3333333333px #00ff3c, -187px -176.3333333333px #aaff00, 4px 26.6666666667px #ff6f00, 227px -106.3333333333px #ff0099, 119px 17.6666666667px #00ffd5, -102px 4.6666666667px #ff0088, -16px -4.3333333333px #00fff7, -201px -310.3333333333px #00ffdd, 64px -181.3333333333px #f700ff, -234px -15.3333333333px #00fffb, -184px -263.3333333333px #aa00ff, 96px -303.3333333333px #0037ff, -139px 10.6666666667px #0026ff, 25px -205.3333333333px #00ff2b, -129px -322.3333333333px #40ff00, -235px -187.3333333333px #26ff00, -136px -237.3333333333px #0091ff, -82px -321.3333333333px #6a00ff, 7px -267.3333333333px #ff00c8, -155px 30.6666666667px #0059ff, -85px -73.3333333333px #6a00ff, 60px -199.3333333333px #55ff00, -9px -289.3333333333px #00ffaa, -208px -167.3333333333px #00ff80, -13px -299.3333333333px #ff0004, 179px -164.3333333333px #ff0044, -112px 12.6666666667px #0051ff, -209px -125.3333333333px #ff00bb, 14px -101.3333333333px #00ff95, -184px -292.3333333333px #ff0099, -26px -168.3333333333px #09ff00, 129px -67.3333333333px #0084ff, -17px -23.3333333333px #0059ff, 129px 34.6666666667px #7300ff, 35px -24.3333333333px #ffd900, -12px -297.3333333333px #ff8400, 129px -156.3333333333px #0dff00, 157px -29.3333333333px #1a00ff, -221px 6.6666666667px #ff0062, 0px -311.3333333333px #ff006a, 155px 50.6666666667px #00ffaa, -71px -318.3333333333px #0073ff;
  }
}
</style>


================================================
FILE: Cards/LilaRest_quick-dragonfly-7.html
================================================
<div class="card">
  <div class="card-overlay"></div>
  <div class="card-inner">YOUR<br>CONTENT<br>HERE</div>
</div>
<style>
/* From Uiverse.io by LilaRest - Tags: neumorphism, skeuomorphism, minimalist, card, thick, rounded, smooth, noise, paper, realistic */
.card {
  --bg: #e8e8e8;
  --contrast: #e2e0e0;
  --grey: #93a1a1;
  position: relative;
  padding: 9px;
  background-color: var(--bg);
  border-radius: 35px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.card-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-conic-gradient(var(--bg) 0.0000001%, var(--grey) 0.000104%) 60% 60%/600% 600%;
  filter: opacity(10%) contrast(105%);
}

.card-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 190px;
  height: 254px;
  background-color: var(--contrast);
  border-radius: 30px;
  /* Content style */
  font-size: 30px;
  font-weight: 900;
  color: #c7c4c4;
  text-align: center;
  font-family: monospace;
}
</style>


================================================
FILE: Cards/Lmickk2_brown-sheep-53.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by Lmickk2 - Tags: card, hover, light&dark, one-div */
.one-div {
  width: 8em;
  height: 12em;
  background-color: rgb(69, 152, 201);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.one-div::before {
  content: "One";
  position: absolute;
  top: 0;
  width: 8em;
  height: 12em;
  background-color: rgb(235, 110, 101);
  transition: opacity 0.3s ease-in-out;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.one-div::after {
  content: "Div";
  position: absolute;
  top: 0;
  width: 8em;
  height: 12em;
  background-color: rgb(230, 190, 10);
  transition: opacity 0.3s ease-in-out;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.one-div:hover:before {
  left: -7em;
  margin-top: 1em;
  transform: rotate(-15deg);
  animation: slide-left 0.8s;
  transition: 0.5s ease-in-out;
}

.one-div:hover:after {
  right: -7em;
  margin-top: 1em;
  transform: rotate(15deg);
  animation: slide-right 0.8s;
  transition: 0.5s ease-in-out;
}

@keyframes slide-left {
  0% {
    left: 0;
  }

  100% {
    left: -3em;
  }

  100% {
    left: -7em;
  }
}

@keyframes slide-right {
  0% {
    right: 0;
  }

  100% {
    right: -3em;
  }

  100% {
    right: -7em;
  }
}

.one-div:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.596);
}

.one-div:hover::after {
  box-shadow: 3px 1px 10px rgba(0, 0, 0, 0.596);
}

.one-div:hover::before {
  box-shadow: -3px 1px 10px rgba(0, 0, 0, 0.596);
}

</style>


================================================
FILE: Cards/Lmickk2_wonderful-robin-20.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by Lmickk2 - Tags: card, space, creative, inset */
.card {
  border-radius: 1em;
  padding: 2em;
  color: white;
  box-shadow: inset 3px 3px 10px black;
}

.heading {
  font-weight: bold;
}

.item {
  margin-top: 1em;
  text-align: center;
}

.item span {
  display: block;
}

.item--create svg:hover {
  filter: drop-shadow(0px 0px 3px #ffffff);
  font-weight: bold;
}

.item--post svg:hover {
  filter: drop-shadow(0px 0px 3px #ff09f3);
}

.item--inspire svg:hover {
  filter: drop-shadow(0px 0px 3px #efff0a);
}

button {
  margin: auto;
  display: block;
  margin-top: 2em;
  padding: 0.8em;
  border-radius: 0.5em;
  border: none;
  background: transparent;
  box-shadow: inset 2px 2px 5px black;
  color: white;
  transition: background 0.4s;
  font-weight: 600;
}

button:hover {
  animation: bg-change 5s infinite;
  box-shadow: inset 3px 3px 4px black;
  background: linear-gradient(0deg, rgb(97, 4, 55), rgb(148, 31, 128), rgb(40, 10, 88));
  background-size: 400% 400%;
}

@keyframes bg-change {
  0% {
    background-position: 50% 0%
  }

  50% {
    background-position: 50% 100%
  }

  100% {
    background-position: 50% 0%
  }
}
</style>


================================================
FILE: Cards/Lucaasbre_clever-lizard-75.html
================================================
<div class="warning-general">
  <div class="confirm-div">
    <p>
      <strong>The “Horror Games” category will be eliminated.</strong>
      <span>Are you sure you want to continue?</span>
    </p>
    <div class="modals-container">
      <button class="red-btn">Cancel</button>
      <button class="green-btn">Accept</button>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Lucaasbre  - Tags: minimalist, warning, card, modern, clean, confirm, modal, security */
.confirm-div {
  background-color: #ccc;
}

.green-btn {
  background-color: #47a04b;
}

.green-btn:hover {
  background-color: #368339;
}

.green-btn:active {
  background-color: #2d6830;
}

.green-btn:disabled {
  background-color: #c8eac9;
  color: #1b7a43;
}

.red-btn {
  background-color: #f93a3a;
}

.red-btn:hover {
  background-color: #e71f1f;
}

.red-btn:active {
  background-color: #c21313;
}

.red-btn:disabled {
  background-color: #ffc7c7;
  color: #c21313;
}

.confirm-div {
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  text-align: center;
  border-radius: 6px;
  box-shadow: 4px 4px 15px #3e3e3e;
  font-family: "Segoe UI", Tahoma, sans-serif;
  cursor: default;
}

.confirm-div button {
  cursor: pointer;
  width: 100%;
  padding: 4px 6px;
  border-radius: 4px;
  color: #fff;
  border: none;
  height: 30px;
  width: 100%;
}

.confirm-div p {
  display: flex;
  flex-direction: column;
}

.confirm-div p strong {
  margin-bottom: 15px;
}

.warning-general {
  position: absolute; /* switch to fixed */
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2px);
}

.modals-container {
  display: flex;
  flex-direction: row;
  height: 32px;
  margin-top: 20px;
  gap: 7px;
  width: 100%;
}

</style>
    

================================================
FILE: Cards/Luciifer666_soft-eagle-25.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by Luciifer666 - Tags: loading, card, one-div */
.one-div {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  position: relative;
}

.one-div::before, .one-div::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid transparent;
}

.one-div::before {
  border-top-color: #3468db;
  animation: spin 1.5s infinite linear;
}

.one-div::after {
  border-top-color: #e67e22;
  animation: spin-reverse 1.5s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}
</style>


================================================
FILE: Cards/MRez321_slippery-owl-0.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by MRez321 - Tags: hover, animated, floating, div, eye */
.one-div {
  background-color: #322e2e;
  width: 20rem;
  height: 15rem;
  position: relative;
  border: solid 1.2rem #dacfcf;
  border-radius: 50% 50% 44% 44% / 55% 55% 40% 40%;
}

.one-div::before,
.one-div::after {
  content: '';
  width: 6rem;
  height: 6rem;
  position: absolute;
  top: 35%;
  background-image: repeating-linear-gradient(0deg, #474bff, #474bff 3.5px, transparent 3.5px, transparent);
  background-size: .4rem .4rem;
  background-color: #31abd1;
  border: solid 2px #00adcc;
  filter: drop-shadow(0 1px 6px #04d9ff);
}

.one-div::before {
  left: 1.4rem;
  border-radius: 25% 75% 25% 75% / 25% 75% 25% 75%;
}

.one-div::after {
  right: 1.4rem;
  border-radius: 75% 25% 75% 25% / 75% 25% 75% 25%;
}

.one-div:hover {
  animation: float 2s infinite;
}

.one-div:hover::before,
.one-div:hover::after {
  animation: blink 2.5s infinite;
}

@keyframes float {
  0% {
    bottom: 0;
  }

  50% {
    bottom: -.4rem;
  }

  100% {
    bottom: 0;
  }
}

@keyframes blink {
  90% {
    transform: none;
    animation-timing-function: ease-in;
  }

  93% {
    transform: translateY(15px) scaleY(0)
  }

  100% {
    animation-timing-function: ease-out;
  }
}
</style>


================================================
FILE: Cards/MRez321_tame-rat-4.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by MRez321 - Tags:  */
.card {
  position: relative;
  width: 20rem;
  height: 30rem;
  border-radius: 1rem;
  padding: 1rem;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #393E46;
  background-image: linear-gradient(135deg, #222831 0%, #393E46 100%);
}

.card:hover::before {
  content: '';
  z-index: -1;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .3;
  background-image: linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%);
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.heading {
  background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: #232d2d;
  font-size: 1.4rem;
}

.heading span {
  display: block;
  text-align: center;
  font-size: 3.5rem;
  filter: drop-shadow(0 2px 3px black);
  background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pulsing-span 1s infinite both linear;
}

@keyframes pulsing-span {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(.9);
  }

  100% {
    transform: scale(1);
  }
}

.content {
  width: 90%;
  height: 14rem;
  margin: 1rem 0;
}

.item {
  margin: 1.4rem 1rem;
  padding: .3rem;
  font-size: 1.5rem;
  border-bottom: solid;
}

.item span {
  display: inline-block;
}

.item:hover span {
  transition: 200ms;
  transform: translate(32px,0);
}

.item--create {
  color: #00abfb;
}

.item--post {
  color: #2fbdff;
}

.item--inspire {
  color: #62cdff;
}

.item:hover svg {
  transform: scale(1.5);
  transition: transform 300ms;
  filter: drop-shadow(0 2px 5px #D5DEF5);
}

button {
  position: relative;
  cursor: pointer;
  width: 12em;
  height: 4em;
  font-size: 14px;
  font-weight: 900;
  color: #272424;
  background-color: #dcdada;
  transition: 200ms;
}

button:hover {
  filter: hue-rotate(30deg);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(110, 190, 251, 0.5);
  }

  100% {
    box-shadow: 0 0 0 20px #0000;
  }
}

::before,
::after {
  content: '';
  position: absolute;
}

button::before,
button::after {
  width: 0%;
  height: 0%;
  opacity: 0;
  transition: width 0.2s 0.15s linear, height 0.15s linear, opacity 0s 0.35s;
}

button::before {
  top: 0;
  right: 0;
  border-top: 4px solid #00abfb;
  border-left: 4px solid #548CFF;
}

button::after {
  bottom: 0;
  left: 0;
  border-bottom: 4px solid #00abfb;
  border-right: 4px solid #548CFF;
}

button:hover::before,
button:hover::after {
  width: 98%;
  height: 90%;
  opacity: 1;
  transition: width 0.2s linear, height 0.15s 0.2s linear, opacity 0s;
}
</style>


================================================
FILE: Cards/MadelineMaid_tidy-parrot-53.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by MadelineMaid  - Tags: simple, animation, twitter, instagram, card, Discord */
@keyframes spin {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

.image {
  animation: spin 20s infinite linear;
}
icons {
  fill: white;
}

.heading {
  color: white;
}

.card svg {
  color: white;
}

</style>
    

================================================
FILE: Cards/Madflows_great-chipmunk-4.html
================================================
<div class="card">
<header class="card-header">
  <p>May 3rd 2023</p>
  <span class="title">A Tale of Two Divs</span>
</header>
<div class="card-author">
  <a class="author-avatar" href="#">
    <span>
  </span></a>
  <svg class="half-circle" viewBox="0 0 106 57">
    <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
  </svg>
  <div class="author-name">
    <div class="author-name-prefix">Author</div> Folarin Lawal
    </div>
  </div>
  <div class="tags">
    <a href="#">html</a>
    <a href="#">css</a>
    <a href="#">web-dev</a>
  </div>
</div>
<style>
/* From Uiverse.io by Madflows - Tags: card */
.card {
  display: flex;
  position: relative;
  flex-direction: column;
  height: 350px;
  width: 190px;
  min-width: 250px;
  padding: 1rem;
  border-radius: 16px;
  background: #17141d;
  box-shadow: -1rem 0 3rem #00000067;
  transition: .2s;
  font-family: 'Inter', sans-serif;
}

.card:hover {
  transform: translateY(-0.4rem);
}

.card-author {
  position: relative;
  display: grid;
  grid-template-columns: 75px 1fr;
  align-items: center;
  margin: 3rem 0 0;
}

.author-name {
  color: #7a7a8c;
}

.author-name-prefix {
  color: #e52e71;
  font-weight: 600;
}

.author-avatar span {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f2f2f2;
  margin: 16px 10px;
}

.half-circle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 48px;
  fill: none;
  stroke: #ff8a00;
  stroke-width: 8;
  stroke-linecap: round;
}

.card-header {
  margin-bottom: auto;
  color: #7a7a8c;
}

.card-header p {
  font-size: 14px;
  margin: 0 0 1rem;
  color: #7a7a8c;
}

.card-header .title {
  font-size: 25px;
  margin: .25rem 0 auto;
  cursor: pointer;
  font-family: 'Arial Black', sans-serif;
}

.card-header .title:hover {
  background: linear-gradient(90deg,#ff8a00,#e52e71);
  text-shadow: none;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tags {
  margin: 1rem 0 2rem;
  padding: .5rem 0 1rem;
  line-height: 2;
  margin-bottom: 0;
}

.tags a {
  font-style: normal;
  font-weight: 700;
  color: #7a7a8c;
  text-transform: uppercase;
  font-size: .66rem;
  border: 3px solid #28242f;
  border-radius: 2rem;
  padding: .2rem .85rem .25rem;
  position: relative;
}

.tags a:hover {
  background: linear-gradient(90deg,#ff8a00,#e52e71);
  text-shadow: none;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-clip: text;
  border-color: white;
}
</style>


================================================
FILE: Cards/Manish-Tamang_cold-tiger-81.html
================================================
<!-- From Uiverse.io by Manish-Tamang  - Tags: twitter, card, tailwind, tailwindcss -->
<div
  class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden mx-auto"
>
  <div class="flex justify-between items-center px-6 py-4">
    <div class="flex space-x-4">
      <div>
        <svg
          class="rounded-full bg-yellow-400"
          height="48"
          width="48"
          viewBox="0 0 48 48"
          xmlns="http://www.w3.org/2000/svg"
        ></svg>
      </div>
      <div>
        <div class="text-lg font-bold dark:text-white">Manish Gole</div>
        <div class="text-sm text-gray-500 dark:text-gray-200">@manishgole</div>
      </div>
    </div>
    <div>
      <button
        type="button"
        role="combobox"
        aria-controls="radix-:R6dafnnja:"
        aria-expanded="false"
        aria-autocomplete="none"
        dir="ltr"
        data-state="closed"
        data-placeholder=""
        class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
        aria-label="Options"
      >
        <svg
          class="w-6 h-6 text-gray-500 dark:text-gray-200"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="12" cy="12" r="1"></circle>
          <circle cx="19" cy="12" r="1"></circle>
          <circle cx="5" cy="12" r="1"></circle>
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="h-4 w-4 opacity-50"
          aria-hidden="true"
        >
          <path d="m6 9 6 6 6-6"></path>
        </svg>
      </button>
      <select
        aria-hidden="true"
        tabindex="-1"
        style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"
      >
        <option value=""></option>
      </select>
    </div>
  </div>
  <div class="px-6 py-4">
    <div class="text-sm text-gray-800 dark:text-gray-200">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
      pellentesque id erat at blandit. Donec ullamcorper turpis vitae dolor
      lacinia mollis. Donec at augue eget ipsum porttitor interdum.
    </div>
  </div>
  <div
    class="flex justify-between items-center space-x-4 pt-4 border-t border-gray-200 dark:border-gray-700 p-4"
  >
    <div class="flex items-center space-x-4">
      <svg
        class="h-4 w-4 text-gray-500 dark:text-gray-200"
        fill="none"
        height="24"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
        <path d="M21 3v5h-5"></path>
        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
        <path d="M8 16H3v5"></path>
      </svg>
      <svg
        class="h-4 w-4 text-gray-500 dark:text-gray-200"
        fill="none"
        height="24"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
        ></path>
      </svg>
      <svg
        class="h-4 w-4 text-gray-500 dark:text-gray-200"
        fill="none"
        height="24"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
        <polyline points="17 8 12 3 7 8"></polyline>
        <line x1="12" x2="12" y1="3" y2="15"></line>
      </svg>
    </div>
    <div class="flex items-center space-x-4">
      <svg
        class="h-4 w-4 text-gray-500 dark:text-gray-200"
        fill="none"
        height="24"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle cx="12" cy="12" r="1"></circle>
        <circle cx="19" cy="12" r="1"></circle>
        <circle cx="5" cy="12" r="1"></circle>
      </svg>
      <svg
        class="h-4 w-4 text-gray-500 dark:text-gray-200"
        fill="none"
        height="24"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
      </svg>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/Manish-Tamang_cuddly-rabbit-84.html
================================================
<!-- From Uiverse.io by Manish-Tamang  - Tags: card, cool card, tailwindcss -->
<div class="p-4 w-[300px] rounded-lg border dark:border-gray-800">
  <h1 class="text-2xl font-bold">History</h1>
  <div class="grid gap-4 mt-2">
    <div class="flex gap-2 items-center">
      <div class="bg-red-500 w-20 h-10 rounded"></div>
      <div class="grid gap-1 text-sm flex-1">
        <h2 class="font-semibold leading-none line-clamp-2">
          Introducing the frontend cloud
        </h2>
        <div class="text-xs text-gray-500 line-clamp-1 dark:text-gray-400">
          1.2M views
        </div>
      </div>
    </div>
    <div class="flex gap-2 items-center">
      <div class="bg-yellow-500 w-20 h-10 rounded"></div>
      <div class="grid gap-1 text-sm flex-1">
        <h2 class="font-semibold leading-none line-clamp-2">
          Using Vercel KV with Svelte
        </h2>
        <div class="text-xs text-gray-500 line-clamp-1 dark:text-gray-400">
          21K views
        </div>
      </div>
    </div>
    <div class="flex gap-2 items-center">
      <div class="bg-blue-500 w-20 h-10 rounded"></div>
      <div class="grid gap-1 text-sm flex-1">
        <h2 class="font-semibold leading-none line-clamp-2">
          Loading UI with Next.js 13
        </h2>
        <div class="text-xs text-gray-500 line-clamp-1 dark:text-gray-400">
          12K views
        </div>
      </div>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/Manish-Tamang_empty-firefox-58.html
================================================
<!-- From Uiverse.io by Manish-Tamang  - Tags: card, creative, bash, npm -->
<aside class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono">
  <div class="flex justify-between items-center">
    <div class="flex space-x-2 text-red-500">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <p class="text-sm">bash</p>
  </div>
  <div class="mt-4">
    <p class="text-green-400">$ npm install next</p>
    <p class="text-white">+ next@10.2.3</p>
    <p class="text-white">added 1 package, and audited 2 packages in 3s</p>
    <p class="text-green-400">$</p>
  </div>
</aside>


    

================================================
FILE: Cards/Manish-Tamang_fluffy-horse-12.html
================================================
<!-- From Uiverse.io by Manish-Tamang  - Tags: card, hover effect, tailwindcss -->
<a
  href="#"
  class="group relative block max-w-screen-sm mx-auto h-64 sm:h-80 lg:h-96"
>
  <span class="absolute inset-0 border-2 border-dashed border-black"></span>

  <div
    class="relative flex h-full w-60 transform items-end border-2 border-black bg-white transition-transform group-hover:scale-105"
  >
    <div
      class="p-4 !pt-0 transition-opacity group-hover:absolute group-hover:opacity-0 sm:p-6 lg:p-8"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-10 w-10 sm:h-12 sm:w-12"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        ></path>
      </svg>

      <h2 class="mt-4 text-xl font-medium sm:text-2xl">Go around the world</h2>
    </div>

    <div
      class="absolute p-4 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 sm:p-6 lg:p-8"
    >
      <h3 class="mt-4 text-xl font-medium sm:text-2xl">Go around the world</h3>

      <p class="mt-4 text-sm sm:text-base">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate,
        praesentium voluptatem omnis atque culpa repellendus.
      </p>

      <p class="mt-8 font-bold">Read more</p>
    </div>
  </div>
</a>


    

================================================
FILE: Cards/Manish-Tamang_honest-earwig-91.html
================================================
<!-- From Uiverse.io by Manish-Tamang  - Tags: card, svg, clean, musicplayer -->
<div
  class="w-full max-w-md mx-auto bg-white shadow-md rounded-lg overflow-hidden dark:bg-zinc-900"
>
  <div class="flex justify-between items-center px-6 py-4">
    <div class="flex items-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        viewBox="0 0 24 24"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke="currentColor"
        height="24"
        fill="none"
        class="h-6 w-6 text-yellow-500"
      >
        <path d="M9 18V5l12-2v13"></path>
        <circle r="3" cy="18" cx="6"></circle>
        <circle r="3" cy="16" cx="18"></circle>
      </svg>
      <div class="mx-3">
        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">
          Timro Mann
        </h3>
        <p class="text-gray-500 dark:text-gray-400">Dibbya Subba</p>
      </div>
    </div>
    <div class="flex items-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        viewBox="0 0 24 24"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke="currentColor"
        height="24"
        fill="none"
        class="h-6 w-6 text-red-500"
      >
        <path
          d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
        ></path></svg
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        viewBox="0 0 24 24"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke="currentColor"
        height="24"
        fill="none"
        class="h-6 w-6 text-gray-500 dark:text-gray-400 ml-4"
      >
        <polygon
          points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
        ></polygon>
      </svg>
    </div>
  </div>
  <div class="relative">
    <div class="absolute inset-0 flex items-center justify-center"></div>
  </div>
  <div class="px-6 py-4">
    <div class="flex items-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        viewBox="0 0 24 24"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke="currentColor"
        height="24"
        fill="none"
        class="h-5 w-5 text-gray-500 dark:text-gray-400"
      >
        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
      </svg>
      <div class="w-full mx-3">
        <div
          class="relative mt-1 h-1 bg-gray-200 rounded overflow-hidden dark:bg-gray-800"
        >
          <div class="absolute left-0 top-0 h-full bg-yellow-500 w-1/2"></div>
        </div>
      </div>
      <p class="text-sm text-gray-500 dark:text-gray-400">50%</p>
    </div>
    <div
      class="flex justify-between text-sm text-gray-500 dark:text-gray-400 mt-3"
    >
      <span> 00:03 </span><span> 3:35 </span>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/Manish-Tamang_smooth-quail-65.html
================================================
<!-- From Uiverse.io by Manish-Tamang  - Tags: card, gradients, border, hover effect -->
<article
  class="hover:animate-background rounded-xl bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 p-0.5 shadow-xl transition hover:bg-[length:400%_400%] hover:shadow-sm hover:[animation-duration:_4s]"
>
  <div class="w-60 rounded-[10px] bg-white p-4 !pt-20 sm:p-6">
    <time class="block text-xs text-gray-500" datetime="2019-06-29">
      29th June 2019
    </time>

    <a href="#">
      <h3 class="mt-0.5 text-lg font-medium text-gray-900">
        Next.js crash course by KhateykoBan
      </h3>
    </a>

    <div class="mt-4 flex flex-wrap gap-1">
      <span
        class="whitespace-nowrap rounded-full bg-purple-100 px-2.5 py-0.5 text-xs text-purple-600"
      >
        Snippet
      </span>

      <span
        class="whitespace-nowrap rounded-full bg-purple-100 px-2.5 py-0.5 text-xs text-purple-600"
      >
        JavaScript
      </span>
    </div>
  </div>
</article>


    

================================================
FILE: Cards/Manish-Tamang_weak-vampirebat-44.html
================================================
<!-- From Uiverse.io by Manish-Tamang  - Tags: notification, card, tailwindcss -->
<div
  role="alert"
  class="w-full max-w-xs p-4 text-gray-900 bg-white rounded-lg shadow dark:bg-gray-800 dark:text-gray-300"
  id="toast-notification"
>
  <div class="flex items-center mb-3">
    <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white"
      >New notification</span
    >
    <button
      aria-label="Close"
      data-dismiss-target="#toast-notification"
      class="ms-auto -mx-1.5 -my-1.5 bg-white justify-center items-center flex-shrink-0 text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
      type="button"
    >
      <span class="sr-only">Close</span>
      <svg
        viewBox="0 0 14 14"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        class="w-3 h-3"
      >
        <path
          d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
          stroke-width="2"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke="currentColor"
        ></path>
      </svg>
    </button>
  </div>
  <div class="flex items-center">
    <div class="relative inline-block shrink-0">
      <div
        class="w-12 h-12 rounded-full bg-green-600 flex items-center justify-center text-white font-bold text-xl"
      >
        M
      </div>
      <span
        class="absolute bottom-0 right-0 inline-flex items-center justify-center w-6 h-6 bg-blue-600 rounded-full"
      >
        <svg
          fill="currentColor"
          viewBox="0 0 20 18"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          class="w-3 h-3 text-white"
        >
          <path
            fill="currentColor"
            d="M18 4H16V9C16 10.0609 15.5786 11.0783 14.8284 11.8284C14.0783 12.5786 13.0609 13 12 13H9L6.846 14.615C7.17993 14.8628 7.58418 14.9977 8 15H11.667L15.4 17.8C15.5731 17.9298 15.7836 18 16 18C16.2652 18 16.5196 17.8946 16.7071 17.7071C16.8946 17.5196 17 17.2652 17 17V15H18C18.5304 15 19.0391 14.7893 19.4142 14.4142C19.7893 14.0391 20 13.5304 20 13V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4Z"
          ></path>
          <path
            fill="currentColor"
            d="M12 0H2C1.46957 0 0.960859 0.210714 0.585786 0.585786C0.210714 0.960859 0 1.46957 0 2V9C0 9.53043 0.210714 10.0391 0.585786 10.4142C0.960859 10.7893 1.46957 11 2 11H3V13C3 13.1857 3.05171 13.3678 3.14935 13.5257C3.24698 13.6837 3.38668 13.8114 3.55279 13.8944C3.71889 13.9775 3.90484 14.0126 4.08981 13.996C4.27477 13.9793 4.45143 13.9114 4.6 13.8L8.333 11H12C12.5304 11 13.0391 10.7893 13.4142 10.4142C13.7893 10.0391 14 9.53043 14 9V2C14 1.46957 13.7893 0.960859 13.4142 0.585786C13.0391 0.210714 12.5304 0 12 0Z"
          ></path>
        </svg>
        <span class="sr-only">Message icon</span>
      </span>
    </div>
    <div class="ms-3 text-sm font-normal">
      <div class="text-sm font-semibold text-gray-900 dark:text-white">
        Ilena Khadka
      </div>
      <div class="text-sm font-normal">commented on your photo</div>
      <span class="text-xs font-medium text-blue-600 dark:text-blue-500"
        >a few seconds ago</span
      >
    </div>
  </div>
</div>


    

================================================
FILE: Cards/Manish-Tamang_witty-bullfrog-37.html
================================================
<div class="wrapper">
  <input id="tab-1" name="slider" type="radio" />
  <input checked="" id="tab-2" name="slider" type="radio" />
  <input id="tab-3" name="slider" type="radio" />
  <header>
    <label class="tab-1" for="tab-1">Basic</label>
    <label class="tab-2" for="tab-2">Standard</label>
    <label class="tab-3" for="tab-3">Team</label>
    <div class="slider"></div>
  </header>
  <div class="card-area">
    <div class="cards">
      <div class="row row-1">
        <div class="price-details">
          <span class="price">150</span>
          <p>For beginner use</p>
        </div>
        <ul class="features">
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-white text-2xs bg-green-500 rounded-full mr-2 p-1"
            >
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
            <span>Unlimited nvme-SSD Storage (5GB) </span>
          </li>
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-white text-2xs bg-green-500 rounded-full mr-2 p-1"
            >
              <polyline points="20 6 9 17 4 12"></polyline></svg
            ><span>FREE 50+ Installation Scripts WordPress Supported</span>
          </li>
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-white text-2xs bg-green-500 rounded-full mr-2 p-1"
            >
              <polyline points="20 6 9 17 4 12"></polyline></svg
            ><span
              >One FREE Domain Registration .com and .np extensions only</span
            >
          </li>
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-white text-2xs bg-green-500 rounded-full mr-2 p-1"
            >
              <polyline points="20 6 9 17 4 12"></polyline></svg
            ><span>Unlimited Email Accounts &amp; Databases</span>
          </li>
        </ul>
      </div>
      <div class="row">
        <div class="price-details">
          <span class="price">499</span>
          <p>For professional use</p>
        </div>
        <ul class="features">
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-white text-2xs bg-green-500 rounded-full mr-2 p-1"
            >
              <polyline points="20 6 9 17 4 12"></polyline></svg
            ><span>Unlimited GB Premium Bandwidth</span>
          </li>
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-white text-2xs bg-green-500 rounded-full mr-2 p-1"
            >
              <polyline points="20 6 9 17 4 12"></polyline></svg
            ><span>FREE 200+ Installation Scripts WordPress Supported</span>
          </li>
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-white text-2xs bg-green-500 rounded-full mr-2 p-1"
            >
              <polyline points="20 6 9 17 4 12"></polyline></svg
            ><span
              >Five FREE Domain Registration .com and .np extensions only</span
            >
          </li>
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-white text-2xs bg-green-500 rounded-full mr-2 p-1"
            >
              <polyline points="20 6 9 17 4 12"></polyline></svg
            ><span>Unlimited Email Accounts &amp; Databases</span>
          </li>
        </ul>
      </div>
      <div class="row">
        <div class="price-details">
          <span class="price">1999</span>
          <p>For team collaboration</p>
        </div>
        <ul class="features">
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-white text-2xs bg-green-500 rounded-full mr-2 p-1"
            >
              <polyline points="20 6 9 17 4 12"></polyline></svg
            ><span>200 GB Premium Bandwidth</span>
          </li>
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-white text-2xs bg-green-500 rounded-full mr-2 p-1"
            >
              <polyline points="20 6 9 17 4 12"></polyline></svg
            ><span>FREE 100+ Installation Scripts WordPress Supported</span>
          </li>
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-white text-2xs bg-green-500 rounded-full mr-2 p-1"
            >
              <polyline points="20 6 9 17 4 12"></polyline></svg
            ><span
              >Two FREE Domain Registration .com and .np extensions only</span
            >
          </li>
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-white text-2xs bg-green-500 rounded-full mr-2 p-1"
            >
              <polyline points="20 6 9 17 4 12"></polyline></svg
            ><span>Unlimited Email Accounts &amp; Databases</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <button>Choose plan</button>
</div>

<style>
/* From Uiverse.io by Manish-Tamang  - Tags: card, gradients, svg, html, css */
.wrapper {
  width: 400px;
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.05);
}
.wrapper header {
  height: 55px;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 30px;
  position: relative;
}
header label {
  height: 100%;
  z-index: 2;
  width: 30%;
  display: flex;
  cursor: pointer;
  font-size: 18px;
  position: relative;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}
#tab-1:checked ~ header .tab-1,
#tab-2:checked ~ header .tab-2,
#tab-3:checked ~ header .tab-3 {
  color: #fff;
}
header label:nth-child(2) {
  width: 40%;
}
header .slider {
  position: absolute;
  height: 85%;
  border-radius: inherit;
  background: linear-gradient(145deg, #d5a3ff 0%, #77a5f8 100%);
  transition: all 0.3s ease;
}
#tab-1:checked ~ header .slider {
  left: 0%;
  width: 90px;
  transform: translateX(5%);
}
#tab-2:checked ~ header .slider {
  left: 50%;
  width: 120px;
  transform: translateX(-50%);
}
#tab-3:checked ~ header .slider {
  left: 100%;
  width: 95px;
  transform: translateX(-105%);
}
.wrapper input[type="radio"] {
  display: none;
}
.card-area {
  overflow: hidden;
}
.card-area .cards {
  display: flex;
  width: 300%;
}
.cards .row {
  width: 33.4%;
}
.cards .row-1 {
  transition: all 0.3s ease;
}
#tab-1:checked ~ .card-area .cards .row-1 {
  margin-left: 0%;
}
#tab-2:checked ~ .card-area .cards .row-1 {
  margin-left: -33.4%;
}
#tab-3:checked ~ .card-area .cards .row-1 {
  margin-left: -66.8%;
}
.row .price-details {
  margin: 20px 0;
  text-align: center;
  padding-bottom: 25px;
  border-bottom: 1px solid #e6e6e6;
}
.price-details .price {
  font-size: 65px;
  font-weight: 600;
  position: relative;
  font-family: "Noto Sans", sans-serif;
}
.price-details .price::before,
.price-details .price::after {
  position: absolute;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
}
.price-details .price::before {
  content: "रू";
  left: -27px;
  top: 17px;
  font-size: 28px;
}
.price-details .price::after {
  content: "/mon";
  right: -33px;
  bottom: 17px;
  font-size: 13px;
}
.price-details p {
  font-size: 18px;
  margin-top: 5px;
}
.row .features li {
  display: flex;
  font-size: 15px;
  list-style: none;
  margin-bottom: 10px;
  align-items: center;
}
.features li i {
  background: linear-gradient(#d5a3ff 0%, #77a5f8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.features li span {
  margin-left: 10px;
}
.wrapper button {
  width: 100%;
  border-radius: 25px;
  border: none;
  outline: none;
  height: 50px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  margin-top: 20px;
  background: linear-gradient(145deg, #d5a3ff 0%, #77a5f8 100%);
  transition: transform 0.3s ease;
}
.wrapper button:hover {
  transform: scale(0.98);
}

</style>
    

================================================
FILE: Cards/Manishtmang_shaggy-parrot-26.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by Manishtmang - Tags: card */
/* Style for the entire card */
.card {
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: inline-block;
  margin: 16px;
  padding: 16px;
  width: 300px;
}

/* Style for the card heading */
.heading {
  color: #444444;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
  text-transform: uppercase;
}

/* Style for the card heading span */
.heading span {
  color: #7eb0ff;
}

/* Style for the card content */
.content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Style for the card items */
.item {
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  padding: 16px;
}

/* Style for the create item */
.item--create {
  background-color: #7eb0ff;
  color: #ffffff;
}

/* Style for the create item svg */
.item--create svg {
  fill: #ffffff;
}

/* Style for the post item */
.item--post {
  background-color: #ffffff;
  color: #444444;
}

/* Style for the post item svg */
.item--post svg {
  fill: #444444;
}

.item--inspire {
  background-color: #ffffff;
  color: #444444;
}

/* Style for the post item svg */
.item--inspire svg {
  fill: #444444;
}

/* Style for the item span */
.item span {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: bold;
  margin-left: 16px;
}

button {
  display: block;
  margin: 0 auto;
  position: relative;
  top: 0.5em;
  padding: 10px 20px;
  font-size: 18px;
  color: #fff;
  background-color: #7eb0ff;
  border: none;
  border-radius: 30px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease-in-out;
}

button:hover {
  transform: scale(1.1);
  background-color: #5f9cff;
}


</style>


================================================
FILE: Cards/Mhyar-nsi_modern-fly-46.html
================================================
    <div class="card">
        <div class="top">
            <div class="dots">
                <div class="dot dot-1"></div>
                <div class="dot dot-2"></div>
                <div class="dot dot-3"></div>
              </div>
            <p class="g-color">_&gt;</p>
        </div>
        <div class="bottom">
            <p class="code">
                <span class="red">function</span> <span class="violet">helloWorld</span><span class="blue">(</span><span class="orange">text</span><span class="blue">)</span><span class="blue">{</span><br>
                    <span class="red space-4">for</span><span class="orange">(</span><span class="red">let</span> <span class="white">i</span> <span class="red">=</span> <span class="blue">0</span> <span class="white">; i</span> <span class="red">&lt;</span> <span class="blue">10</span> <span class="white">; i</span><span class="red">++</span><span class="orange">){</span><br>
                        <span class="blue space-4x2">console</span><span class="white">.</span><span class="violet">log(</span><span class="blue">`${</span><span class="orange">text</span><span class="blue">}`</span><span class="violet">)</span><span class="white">;</span><br>
                    <span class="orange space-4">}</span><br>
                <span class="blue">}</span><br>
                <br>
                <span class="violet">helloWorld</span><span class="blue">('Hello World')</span><span class="white">;</span>
            </p>            
        </div>
      </div>
<style>
/* From Uiverse.io by Mhyar-nsi - Tags: card, code, syntax, code block */
.card {
  font-family: monospace;
  margin-top: 40px;
  width: 350px;
  height: 260px;
  background: #292828da;
  border: 2px solid #000;
  border-radius: 15px;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
}

.dots {
  display: flex;
  justify-content: last baseline;
}

.dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

.dot-1 {
  background-color: rgb(0, 132, 255);
}

.dot-2 {
  background-color: rgb(230, 0, 255);
}

.dot-3 {
  background-color: rgb(0, 255, 89);
}

.top p {
  font-size: 20px;
  font-weight: bold;
}

.dot , .top p {
  margin: 5px;
}

.g-color {
  color: darkgreen;
}

.bottom {
  margin-top: 30px;
  padding: 0 25px;
}

.code {
  font-size: 15px;
}

.red {
  color: rgb(210, 63, 52);
}

.violet {
  color: rgb(181, 40, 203);
}

.blue {
  color: rgb(91, 131, 223);
}

.orange {
  color: rgb(195, 128, 3);
}

.white {
  color: rgb(163, 163, 163);
}

.space-4 {
  margin-left: 35px;
}

.space-4x2 {
  margin-left: 70px;
}
</style>


================================================
FILE: Cards/MijailVillegas_empty-otter-85.html
================================================
<section class="container">
        <div class="card-container">
            <div class="card-content">
                <div class="card-title">
                    <span class="title">TITLE</span>
                </div>
                <div class="card-body">
                    <div class="svg-card">
                        <svg viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg" class="face"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg>
                    </div>
                    <div class="svg-card">
                        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="twit"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
                    </div>
                    <div class="svg-card">
                        <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" class="insta"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>
                    </div>
                    <div class="svg-card">
                        <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" class="whats"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg>
                    </div>
                </div>
                <div class="card-footer">
                    <span class="title">Some extra Information</span>
                </div>
            </div>
        </div>
    </section>
<style>
/* From Uiverse.io by MijailVillegas - Tags: cyberpunk, card, neon, futuristic, gradients */
.container {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-style: italic;
  font-weight: bold;
  display: flex;
  margin: auto;
  aspect-ratio: 16/9;
  align-items: center;
  justify-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1em;
}

.card-container {
  filter: drop-shadow(46px 36px 24px #4090b5) drop-shadow(-55px -40px 25px #9e30a9);
  animation: blinkShadowsFilter 8s ease-in infinite;
}

.card-content {
  display: grid;
  align-content: center;
  justify-items: center;
  align-items: center;
  text-align: center;
  padding: 1em;
  grid-template-rows: 0.1fr 0.7fr 0.25fr;
  background-color: hsl(296, 59%, 10%);
  width: 10em;
  aspect-ratio: 9/16;
  -webkit-clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
  clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
}

.card-content::before {
  content: "";
  position: absolute;
  width: 250%;
  aspect-ratio: 1/1;
  transform-origin: center;
  background: linear-gradient(to bottom, transparent, transparent, #66e0ff, #66e0ff, #e366ff, #e366ff, transparent, transparent), linear-gradient(to left, transparent, transparent, #66e0ff, #66e0ff, #e366ff, #e366ff, transparent, transparent);
  animation: rotate 5s infinite linear;
}

.card-content::after {
  content: "";
  position: absolute;
  top: 1%;
  left: 1%;
  width: 98%;
  height: 98%;
  background: repeating-linear-gradient(to bottom, transparent 0%, rgba(64, 144, 181, 0.6) 1px, rgb(0, 0, 0) 3px, rgba(64, 144, 181, 0.3019607843) 5px, #153544 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsla(295, 60%, 12%, 0.99) 100%);
  box-shadow: inset 0px 0px 30px 40px hsl(296, 59%, 10%);
  -webkit-clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
  clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
  animation: backglitch 94ms linear infinite;
}

.card-title {
  z-index: 80;
  -webkit-clip-path: polygon(90% 0, 100% 100%, 0% 100%, 0% 0%);
  clip-path: polygon(90% 0, 100% 100%, 0% 100%, 0% 0%);
  background: linear-gradient(90deg, rgba(255, 254, 250, 0) 0%, rgba(102, 224, 255, 0.3) 27%, rgba(102, 224, 255, 0.3) 63%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(102, 224, 255, 0.3) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 96%, rgba(102, 224, 255, 0.3) 100%);
  width: 98%;
  font-size: 1.2em;
}

.title {
  width: 100%;
  height: 100%;
  text-align: right;
  position: relative;
  z-index: 2;
  color: hsl(192, 100%, 88%);
  font-size: 1em;
  transition: all ease-in-out 2s linear;
}

.card-body {
  padding-block: 1.5em;
  padding-inline: 1em;
  z-index: 80;
  display: flex;
  gap: 1.5em;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}

.svg-card {
  text-decoration: none;
  color: hsl(192, 100%, 88%);
  background: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.2) 27%, rgba(102, 224, 255, 0.2) 63%, transparent 100%);
  fill: currentColor;
  width: 2em;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}

.svg-card .face {
  width: 0.7em;
}

.svg-card .twit {
  width: 1em;
}

.svg-card .insta {
  width: 1em;
}

.svg-card .whats {
  width: 1.1em;
}

.svg-card:hover {
  cursor: pointer;
  color: hsl(192, 100%, 100%);
}

.card-footer {
  padding-inline: 1em;
}

@keyframes backglitch {
  0% {
    box-shadow: inset 0px 20px 30px 40px hsl(296, 59%, 10%);
  }

  50% {
    box-shadow: inset 0px -20px 30px 40px hsl(296, 59%, 10.2%);
  }

  to {
    box-shadow: inset 0px 20px 30px 40px hsl(296, 59%, 10%);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) translate(-50%, 20%);
  }

  50% {
    transform: rotate(180deg) translate(40%, 10%);
  }

  to {
    transform: rotate(360deg) translate(-50%, 20%);
  }
}

@keyframes blinkShadowsFilter {
  0% {
    filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9);
  }

  25% {
    filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 24px #9e30a9);
  }

  50% {
    filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471));
  }

  75% {
    filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471));
  }

  to {
    filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9);
  }
}/*# sourceMappingURL=style.css.map */
</style>


================================================
FILE: Cards/MijailVillegas_kind-gecko-74.html
================================================
<div class="card">
  <ul>
    <li class="iso-pro">
      <span></span>
      <span></span>
      <span></span>
      <a href="">
        <svg
          viewBox="0 0 320 512"
          xmlns="http://www.w3.org/2000/svg"
          class="svg"
        >
          <path
            d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
          ></path></svg
      ></a>
      <div class="text">Facebook</div>
    </li>
    <li class="iso-pro">
      <span></span>
      <span></span>
      <span></span>
      <a href="">
        <svg
          class="svg"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
        >
          <path
            d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
          ></path>
        </svg>
      </a>
      <div class="text">Twitter</div>
    </li>
    <li class="iso-pro">
      <span></span>
      <span></span>
      <span></span>
      <a href="">
        <svg
          class="svg"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 448 512"
        >
          <path
            d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
          ></path>
        </svg>
      </a>
      <div class="text">Instagram</div>
    </li>
  </ul>
</div>

<style>
/* From Uiverse.io by MijailVillegas  - Tags: simple, card, hover */
.card {
  max-width: fit-content;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  gap: 1rem;
  backdrop-filter: blur(15px);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.192),
    inset 0 0 5px rgba(255, 255, 255, 0.274), 0 5px 5px rgba(0, 0, 0, 0.164);
  transition: 0.5s;
}

.card:hover {
  animation: ease-out 5s;
  background: rgba(173, 173, 173, 0.05);
}

.card ul {
  padding: 1rem;
  display: flex;
  list-style: none;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.card ul li {
  cursor: pointer;
}

.svg {
  transition: all 0.3s;
  /* if you find some problems change w - h : 30px*/
  padding: 1rem;
  height: 60px;
  width: 60px;
  border-radius: 100%;
  color: rgb(255, 174, 0);
  fill: currentColor;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3),
    inset 0 0 5px rgba(255, 255, 255, 0.5), 0 5px 5px rgba(0, 0, 0, 0.164);
}

.text {
  opacity: 0;
  border-radius: 5px;
  padding: 5px;
  transition: all 0.3s;
  color: rgb(255, 174, 0);
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  z-index: 9999;
  box-shadow: -5px 0 1px rgba(153, 153, 153, 0.2),
    -10px 0 1px rgba(153, 153, 153, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.3),
    inset 0 0 5px rgba(255, 255, 255, 0.5), 0 5px 5px rgba(0, 0, 0, 0.082);
}

/*isometric prooyection*/
.iso-pro {
  transition: 0.5s;
}
.iso-pro:hover a > .svg {
  transform: translate(15px, -15px);
  border-radius: 100%;
}

.iso-pro:hover .text {
  opacity: 1;
  transform: translate(25px, -2px) skew(-5deg);
}

.iso-pro:hover .svg {
  transform: translate(5px, -5px);
}

.iso-pro span {
  opacity: 0;
  position: absolute;
  color: #1877f2;
  border-color: #1877f2;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3),
    inset 0 0 5px rgba(255, 255, 255, 0.5), 0 5px 5px rgba(0, 0, 0, 0.164);
  border-radius: 50%;
  transition: all 0.3s;
  height: 60px;
  width: 60px;
}

.iso-pro:hover span {
  opacity: 1;
}

.iso-pro:hover span:nth-child(1) {
  opacity: 0.2;
}

.iso-pro:hover span:nth-child(2) {
  opacity: 0.4;
  transform: translate(5px, -5px);
}

.iso-pro:hover span:nth-child(3) {
  opacity: 0.6;
  transform: translate(10px, -10px);
}

</style>
    

================================================
FILE: Cards/MijailVillegas_smooth-firefox-47.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by MijailVillegas - Tags: card */
.card {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bolder;
  color: hsla(0, 0%, 0%, 0.3);
  z-index: 1;
  width: 280px;
  height: 400px;
  display: grid;
  justify-items: center;
  align-items: center;
  align-content: space-around;
  text-align: center;
  grid-template-rows: 0.25fr 0.5fr 0.25fr;
  padding: 1em;
  border-radius: 3em;
  border: solid 0.5em #fafafa;
  background: #fafafa;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuZGV2L3N2Z2pzIiB2aWV3Qm94PSIwIDAgMjQwMCA4MDAiIG9wYWNpdHk9IjAuODgiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIiBpZD0ic3NzdXJmLWdyYWQiPjxzdG9wIHN0b3AtY29sb3I9ImhzbGEoMTc0LCA3NyUsIDUwJSwgMS4wMCkiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwJSI+PC9zdG9wPjxzdG9wIHN0b3AtY29sb3I9ImhzbGEoMTc0LCA3NyUsIDgwJSwgMC4yOSkiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0idXJsKCNzc3N1cmYtZ3JhZCkiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMCwtODguNTg3MjQ5NzU1ODU5MzgpIj48cGF0aCBkPSJNIDAgMjkyLjE4MDc4ODA0ODE2NzYgUSA2MDAgNjA5Ljg4OTY2NjQwOTY4NTIgODAwIDI5MC4xNzQ1MDY0NTIzMDIxIFEgMTQwMCA2MzMuODIzNjQ1MDgwOTAxMyAxNjAwIDMxMi45MTEwMzE2MDA3MTgzMyBRIDIyMDAgNTU2LjA5OTYxNDc2MzY4NjEgMjQwMCAzMzcuNzE2MTYyODQ1MjExMSBMIDI0MDAgODAwIEwgMCA4MDAgTCAwIDM0OC40OTg2MjAwNDgzMjYyNSBaIiB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDAsNDEpIiBvcGFjaXR5PSIwLjA1Ij48L3BhdGg+PHBhdGggZD0iTSAwIDI5Mi4xODA3ODgwNDgxNjc2IFEgNjAwIDYwOS44ODk2NjY0MDk2ODUyIDgwMCAyOTAuMTc0NTA2NDUyMzAyMSBRIDE0MDAgNjMzLjgyMzY0NTA4MDkwMTMgMTYwMCAzMTIuOTExMDMxNjAwNzE4MzMgUSAyMjAwIDU1Ni4wOTk2MTQ3NjM2ODYxIDI0MDAgMzM3LjcxNjE2Mjg0NTIxMTEgTCAyNDAwIDgwMCBMIDAgODAwIEwgMCAzNDguNDk4NjIwMDQ4MzI2MjUgWiIgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwwLDgyKSIgb3BhY2l0eT0iMC4yNCI+PC9wYXRoPjxwYXRoIGQ9Ik0gMCAyOTIuMTgwNzg4MDQ4MTY3NiBRIDYwMCA2MDkuODg5NjY2NDA5Njg1MiA4MDAgMjkwLjE3NDUwNjQ1MjMwMjEgUSAxNDAwIDYzMy44MjM2NDUwODA5MDEzIDE2MDAgMzEyLjkxMTAzMTYwMDcxODMzIFEgMjIwMCA1NTYuMDk5NjE0NzYzNjg2MSAyNDAwIDMzNy43MTYxNjI4NDUyMTExIEwgMjQwMCA4MDAgTCAwIDgwMCBMIDAgMzQ4LjQ5ODYyMDA0ODMyNjI1IFoiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMCwxMjMpIiBvcGFjaXR5PSIwLjQzIj48L3BhdGg+PHBhdGggZD0iTSAwIDI5Mi4xODA3ODgwNDgxNjc2IFEgNjAwIDYwOS44ODk2NjY0MDk2ODUyIDgwMCAyOTAuMTc0NTA2NDUyMzAyMSBRIDE0MDAgNjMzLjgyMzY0NTA4MDkwMTMgMTYwMCAzMTIuOTExMDMxNjAwNzE4MzMgUSAyMjAwIDU1Ni4wOTk2MTQ3NjM2ODYxIDI0MDAgMzM3LjcxNjE2Mjg0NTIxMTEgTCAyNDAwIDgwMCBMIDAgODAwIEwgMCAzNDguNDk4NjIwMDQ4MzI2MjUgWiIgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwwLDE2NCkiIG9wYWNpdHk9IjAuNjIiPjwvcGF0aD48cGF0aCBkPSJNIDAgMjkyLjE4MDc4ODA0ODE2NzYgUSA2MDAgNjA5Ljg4OTY2NjQwOTY4NTIgODAwIDI5MC4xNzQ1MDY0NTIzMDIxIFEgMTQwMCA2MzMuODIzNjQ1MDgwOTAxMyAxNjAwIDMxMi45MTEwMzE2MDA3MTgzMyBRIDIyMDAgNTU2LjA5OTYxNDc2MzY4NjEgMjQwMCAzMzcuNzE2MTYyODQ1MjExMSBMIDI0MDAgODAwIEwgMCA4MDAgTCAwIDM0OC40OTg2MjAwNDgzMjYyNSBaIiB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDAsMjA1KSIgb3BhY2l0eT0iMC44MSI+PC9wYXRoPjxwYXRoIGQ9Ik0gMCAyOTIuMTgwNzg4MDQ4MTY3NiBRIDYwMCA2MDkuODg5NjY2NDA5Njg1MiA4MDAgMjkwLjE3NDUwNjQ1MjMwMjEgUSAxNDAwIDYzMy44MjM2NDUwODA5MDEzIDE2MDAgMzEyLjkxMTAzMTYwMDcxODMzIFEgMjIwMCA1NTYuMDk5NjE0NzYzNjg2MSAyNDAwIDMzNy43MTYxNjI4NDUyMTExIEwgMjQwMCA4MDAgTCAwIDgwMCBMIDAgMzQ4LjQ5ODYyMDA0ODMyNjI1IFoiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMCwyNDYpIiBvcGFjaXR5PSIxLjAwIj48L3BhdGg+PC9nPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: revert;
  box-shadow: 5px 5px 7px hsla(0, 0%, 84%, 0.447), -3px -4px 7px rgba(255, 255, 255, 0.3843137255);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-position 1s ease-in;
  animation: blinkShadowsFilter 8s ease-in infinite;
}

.card .heading {
  align-self: baseline;
  display: grid;
  letter-spacing: 3px;
}

.card .heading span {
  -webkit-background-clip: text;
  background-clip: text;
  color: #afafaf;
  background-color: transparent;
  transition: all 1s ease-in;
  transform: translateY(-20%);
  text-align: center;
  font-size: 3.5em;
}

.card button {
  align-self: flex-end;
  font-size: 1em;
  border-style: none;
  padding: 1em;
  border-radius: 5em;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bolder;
  text-shadow: 3px 3px 5px #48beb3, -3px -3px 5px #68ffff;
  color: #e0fff8;
  background: #12a597;
  background: linear-gradient(145deg, #5ef8e9, #4fd1c4);
  box-shadow: 3px 3px 5px #48beb3, -3px -3px 5px #68ffff;
}

.card button:active {
  background: #57e9db;
  box-shadow: inset 3px 3px 5px #47bfb4, inset -3px -3px 5px #67ffff;
}

.card button:hover {
  cursor: pointer;
}

.card:hover {
  background-position: right;
}

.card:hover .heading span {
  background-repeat: no-repeat;
  background-size: cover;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuZGV2L3N2Z2pzIiB2aWV3Qm94PSIwIDAgODAwIDgwMCI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJjY2NpcmN1bGFyLWdyYWQiIHI9IjUwJSIgY3g9IjUwJSIgY3k9IjUwJSI+CiAgICAgICAgIDxzdG9wIG9mZnNldD0iMTUlIiBzdG9wLWNvbG9yPSIjYWMzZDAwIiBzdG9wLW9wYWNpdHk9IjAuNSI+PC9zdG9wPgogICAgICAgICA8c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iaHNsKDI1LCA4MyUsIDQ5JSkiIHN0b3Atb3BhY2l0eT0iMSI+PC9zdG9wPgogICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZjZTc4IiBzdG9wLW9wYWNpdHk9IjEiPjwvc3RvcD4KICAgICAgICA8L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJ1cmwoI2NjY2lyY3VsYXItZ3JhZCkiPjxjaXJjbGUgcj0iNjQzLjUiIGN4PSI0MDAiIGN5PSI0MDAiPjwvY2lyY2xlPjxjaXJjbGUgcj0iNTg1IiBjeD0iNDAwIiBjeT0iNDAwIj48L2NpcmNsZT48Y2lyY2xlIHI9IjUyNi41IiBjeD0iNDAwIiBjeT0iNDAwIj48L2NpcmNsZT48Y2lyY2xlIHI9IjQ2OCIgY3g9IjQwMCIgY3k9IjQwMCI+PC9jaXJjbGU+PGNpcmNsZSByPSI0MDkuNSIgY3g9IjQwMCIgY3k9IjQwMCI+PC9jaXJjbGU+PGNpcmNsZSByPSIzNTEiIGN4PSI0MDAiIGN5PSI0MDAiPjwvY2lyY2xlPjxjaXJjbGUgcj0iMjkyLjUiIGN4PSI0MDAiIGN5PSI0MDAiPjwvY2lyY2xlPjxjaXJjbGUgcj0iMjM0IiBjeD0iNDAwIiBjeT0iNDAwIj48L2NpcmNsZT48Y2lyY2xlIHI9IjE3NS41IiBjeD0iNDAwIiBjeT0iNDAwIj48L2NpcmNsZT48Y2lyY2xlIHI9IjExNyIgY3g9IjQwMCIgY3k9IjQwMCI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==");
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 1s ease-in;
}

.content .item {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  gap: 1em;
  align-items: center;
  transition: all 0.8s ease-in-out;
}

.content .item span {
  transition: all 0.5s ease-in;
  width: 0%;
  background: transparent;
  font-size: 1.2em;
}

.content .item--create {
  transition: all 0.8s ease-in-out;
  transform: translateX(100%);
}

.content .item--post {
  transition: all 0.8s ease-in-out;
  transform: translateX(80%);
}

.content .item--inspire {
  transition: all 0.8s ease-in-out;
  transform: translateX(20%);
}

.content .item--inspire svg {
  box-shadow: 4px 4px 7px #47bfb4, -4px -4px 7px #67ffff;
}

.content svg {
  border-radius: 1em;
  width: 2.5em;
  height: 2.5em;
  padding: 0.5em;
  background: #fafafa;
  box-shadow: 4px 4px 7px #d5d5d5, -4px -4px 7px #ffffff;
}

.content:hover .item {
  padding-left: 2em;
}

.content:hover .item--create {
  transform: translateX(20%);
}

.content:hover .item--post {
  transform: translateX(20%);
}

.content:hover .item--inspire {
  transform: translateX(20%);
}

.item:hover {
  gap: 2em;
  color: hsl(19, 78%, 65%);
  cursor: pointer;
}

.item:hover span {
  letter-spacing: 2px;
  padding-inline: 1rem;
  border-radius: 1em;
  color: rgba(0, 0, 0, 0.6);
}

.item:hover svg {
  box-shadow: inset 4px 4px 7px #d5d5d5, inset -4px -4px 7px #ffffff;
}

@keyframes blinkShadowsFilter {
  0% {
    filter: drop-shadow(23px 12px 28px hsla(218, 87%, 88%, 0.3)) drop-shadow(-20px -18px 28px hsla(171, 80%, 73%, 0.3));
  }

  25% {
    filter: drop-shadow(23px -12px 24px hsla(218, 87%, 88%, 0.3)) drop-shadow(-20px 18px 24px hsla(171, 100%, 93%, 0.3));
  }

  50% {
    filter: drop-shadow(23px 12px 30px hsla(218, 100%, 88%, 0.3)) drop-shadow(-20px 18px 30px hsla(171, 95%, 83%, 0.3));
  }

  75% {
    filter: drop-shadow(20px -18px 25px hsla(218, 87%, 88%, 0.3)) drop-shadow(-20px 20px 25px hsla(171, 100%, 80%, 0.3));
  }

  to {
    filter: drop-shadow(23px 12px 28px hsla(218, 87%, 88%, 0.3)) drop-shadow(-20px -18px 28px hsla(171, 80%, 73%, 0.3));
  }
}
</style>


================================================
FILE: Cards/MikeAndrewDesigner_fast-octopus-78.html
================================================
<div class="e-card playing">
  <div class="image"></div>
  
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  

      <div class="infotop">

    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="icon">
  <path fill="currentColor" d="M19.4133 4.89862L14.5863 2.17544C12.9911 1.27485 11.0089 1.27485 9.41368 2.17544L4.58674
  4.89862C2.99153 5.7992 2 7.47596 2 9.2763V14.7235C2 16.5238 2.99153 18.2014 4.58674 19.1012L9.41368
  21.8252C10.2079 22.2734 11.105 22.5 12.0046 22.5C12.6952 22.5 13.3874 22.3657 14.0349 22.0954C14.2204
  22.018 14.4059 21.9273 14.5872 21.8252L19.4141 19.1012C19.9765 18.7831 20.4655 18.3728 20.8651
  17.8825C21.597 16.9894 22 15.8671 22 14.7243V9.27713C22 7.47678 21.0085 5.7992 19.4133 4.89862ZM4.10784
  14.7235V9.2763C4.10784 8.20928 4.6955 7.21559 5.64066 6.68166L10.4676 3.95848C10.9398 3.69152 11.4701
  3.55804 11.9996 3.55804C12.5291 3.55804 13.0594 3.69152 13.5324 3.95848L18.3593 6.68166C19.3045 7.21476
  19.8922 8.20928 19.8922 9.2763V9.75997C19.1426 9.60836 18.377 9.53091 17.6022 9.53091C14.7929 9.53091
  12.1041 10.5501 10.0309 12.3999C8.36735 13.8847 7.21142 15.8012 6.68783 17.9081L5.63981 17.3165C4.69466
  16.7834 4.10699 15.7897 4.10699 14.7235H4.10784ZM10.4676 20.0413L8.60933 18.9924C8.94996 17.0479 9.94402
  15.2665 11.4515 13.921C13.1353 12.4181 15.3198 11.5908 17.6022 11.5908C18.3804 11.5908 19.1477 11.6864
  19.8922 11.8742V14.7235C19.8922 15.2278 19.7589 15.7254 19.5119 16.1662C18.7615 15.3596 17.6806 14.8528
   16.4783 14.8528C14.2136 14.8528 12.3781 16.6466 12.3781 18.8598C12.3781 19.3937 12.4861 19.9021 12.68
   20.3676C11.9347 20.5316 11.1396 20.4203 10.4684 20.0413H10.4676Z"></path></svg><br>      
  UI / EX Designer
<br>
<div class="name">MikeAndrewDesigner</div>
  </div>
</div>
<style>
/* From Uiverse.io by MikeAndrewDesigner - Tags: animation, card, colorful, wave, cool card */
.e-card {
  margin: 100px auto;
  background: transparent;
  box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.45);
  position: relative;
  width: 240px;
  height: 330px;
  border-radius: 16px;
  overflow: hidden;
}

.wave {
  position: absolute;
  width: 540px;
  height: 700px;
  opacity: 0.6;
  left: 0;
  top: 0;
  margin-left: -50%;
  margin-top: -70%;
  background: linear-gradient(744deg,#af40ff,#5b42f3 60%,#00ddeb);
}

.icon {
  width: 3em;
  margin-top: -1em;
  padding-bottom: 1em;
}

.infotop {
  text-align: center;
  font-size: 20px;
  position: absolute;
  top: 5.6em;
  left: 0;
  right: 0;
  color: rgb(255, 255, 255);
  font-weight: 600;
}

.name {
  font-size: 14px;
  font-weight: 100;
  position: relative;
  top: 1em;
  text-transform: lowercase;
}

.wave:nth-child(2),
.wave:nth-child(3) {
  top: 210px;
}

.playing .wave {
  border-radius: 40%;
  animation: wave 3000ms infinite linear;
}

.wave {
  border-radius: 40%;
  animation: wave 55s infinite linear;
}

.playing .wave:nth-child(2) {
  animation-duration: 4000ms;
}

.wave:nth-child(2) {
  animation-duration: 50s;
}

.playing .wave:nth-child(3) {
  animation-duration: 5000ms;
}

.wave:nth-child(3) {
  animation-duration: 45s;
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: Cards/Mizohack_old-sloth-96.html
================================================
<div class="wrapper">
  <div class="display">
    <div id="time"></div>
  </div>
  <span></span>
  <span></span>
</div>

<style>
/* From Uiverse.io by Mizohack  - Tags: card */
.wrapper {
  height: 100px;
  width: 240px;
  position: relative;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  border-radius: 10px;
  cursor: default;
  animation: animate 1.5s linear infinite;
}
.wrapper .display,
.wrapper span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wrapper .display {
  z-index: 999;
  height: 85px;
  width: calc(100% - 16px);
  background: #1b1b1b;
  border-radius: 6px;
  text-align: center;
}
.display #time {
  line-height: 85px;
  color: #fff;
  font-size: 50px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate 1.5s linear infinite;
}
@keyframes animate {
  100% {
    filter: hue-rotate(360deg);
  }
}
.wrapper span {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background: inherit;
}
.wrapper span:first-child {
  filter: blur(7px);
}
.wrapper span:last-child {
  filter: blur(20px);
}

</style>
    

================================================
FILE: Cards/Muhammad-Abdullah-Zeeshan_lazy-lion-3.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by Muhammad-Abdullah-Zeeshan - Tags: card */
.card {
 width: 190px;
 height: 254px;
 background: rgb(50, 126, 224);
 border-radius: 40px 0 40px 0;
}
</style>


================================================
FILE: Cards/MuhammadHasann_brown-falcon-18.html
================================================
<div class="card">
  <div data-position="top" class="carousel">
    <span class="carousel__text"
      >• card component • card component • card component • card component •
      card component • card component</span
    >
  </div>
  <div class="image">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"
      ></path>
    </svg>
  </div>
  <span class="title">Highlight Curation</span>
  <p class="paragraph">
    Works autonomously through artificial intelligent and hundred of
    micro-services
  </p>
  <div data-direction="right" data-position="bottom" class="carousel">
    <span class="carousel__text"
      >• card component • card component • card component • card component •
      card component • card component</span
    >
  </div>
</div>

<style>
/* From Uiverse.io by MuhammadHasann  - Tags: animation, card, rounded */
.card {
  --lime-500: #bdd910;
  --violet-700: #8a07b8;

  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;

  padding: 1rem;
  width: 14rem;
  height: auto;
  min-height: 16rem;
  background-color: var(--lime-500);

  border-radius: 0.5rem;
}

.card::before {
  content: "";
  position: absolute;
  top: 7rem;
  right: 2rem;

  width: 1.25rem;
  aspect-ratio: 1 / 1;
  background-color: var(--violet-700);

  border-radius: 9999px;
}

.card::after {
  content: "";
  position: absolute;
  top: 8.75rem;
  right: -0.5rem;

  width: 3rem;
  aspect-ratio: 1 / 1;
  background-color: var(--violet-700);

  border-radius: 9999px;
}

.card .carousel {
  position: absolute;
  left: 0;

  animation: carousel 10s linear var(--carousel_direction, normal) infinite;
}

.card .carousel[data-direction="right"] {
  --carousel_direction: reverse;
}
.card .carousel[data-position="top"] {
  top: 0.75rem;
}
.card .carousel[data-position="bottom"] {
  bottom: 0.75rem;
}

.card .carousel .carousel__text {
  font-size: 0.75rem;
  color: black;
  text-wrap: nowrap;
}

@keyframes carousel {
  to {
    transform: translate(-50%);
  }
}

.card .image {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0.25rem;
  margin-bottom: 0.5rem;
  width: fit-content;
  aspect-ratio: 1 / 1;
  background-color: black;

  border-radius: 0.25rem;
}

.card .image svg {
  width: 1.5rem;
  fill: white;
}

.card .title {
  position: relative;
  z-index: 10;

  font-size: 1rem;
  color: black;
  font-weight: bold;
}

.card .paragraph {
  position: relative;
  z-index: 10;

  padding-right: 0.25rem;

  font-size: 0.75rem;
  color: black;
}

</style>
    

================================================
FILE: Cards/MuhammadHasann_calm-sloth-44.html
================================================
<div class="card">
  <div class="rectangle left-top"></div>
  <div class="rectangle right-top"></div>
  <div class="rectangle left-bottom"></div>
  <div class="rectangle right-bottom"></div>
  <div class="image">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="svg">
      <path
        d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"
      ></path>
    </svg>
  </div>
  <div class="love">
    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="svg">
      <path
        d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"
      ></path>
    </svg>
    <span>2322</span>
  </div>
  <div class="category">
    <button class="button">Abstract</button>
    <button class="button">Nature</button>
    <button class="button">Simple</button>
  </div>
  <button class="action">Action</button>
</div>

<style>
/* From Uiverse.io by MuhammadHasann  - Tags: simple, action, minimalist, card, hover, rounded, smooth, image */
.card {
  --pink-500: #fda8ff;
  --red-400: #f56767;
  --sky-300: #bbefff;
  --blue-500: #00a3fe;

  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;

  padding: 1rem;
  width: 14rem;
  height: auto;
  background-color: black;

  border-radius: 0.5rem;
}

.card .rectangle {
  position: absolute;

  width: 0.925rem;
  aspect-ratio: 1 / 1;
  background-color: white;

  opacity: 0;
  box-shadow: 0rem 0rem 0rem 0.175rem black;
}
.card:hover .rectangle {
  opacity: 1;
}

.card .rectangle.left-top {
  top: -0.25rem;
  left: -0.25rem;
}
.card .rectangle.right-top {
  top: -0.25rem;
  right: -0.25rem;
}
.card .rectangle.left-bottom {
  bottom: -0.25rem;
  left: -0.25rem;
}
.card .rectangle.right-bottom {
  bottom: -0.25rem;
  right: -0.25rem;
}

.card .image {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0.25rem;
  width: 100%;
  height: 7.25rem;
  background-color: var(--pink-500);

  border-radius: 0.25rem;
}

.card .image .svg {
  width: 2.5rem;
  fill: black;
}

.card .title {
  position: relative;
  z-index: 10;

  font-size: 1.25rem;
  color: white;
  font-weight: bold;
}

.card .love {
  display: flex;
  align-items: center;
  gap: 0.375rem;

  font-size: 1rem;
  font-weight: bold;
  color: white;
}

.card .love .svg {
  width: 1.25rem;
  fill: var(--red-400);
}

.card .category {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.card .category .button {
  cursor: pointer;

  padding: 0.25rem 0.5rem;
  background-color: #d9d9d9;

  font-size: 0.5rem;
  color: black;

  border: 2px solid transparent;
  border-radius: 9999px;
  transition: all 0.3s ease-in-out;
}
.card .category .button:hover {
  border: 2px solid var(--blue-500);
}

.card .action {
  padding-block: 0.375rem;
  margin-top: 0.75rem;
  background-color: var(--sky-300);

  font-size: 0.75rem;
  font-weight: 700;
  color: black;

  border: 2px solid transparent;
  border-radius: 0.5rem;
  transition: all 0.3s ease-in-out;
}
.card .action:hover {
  border: 2px solid var(--blue-500);
}

</style>
    

================================================
FILE: Cards/MuhammadHasann_fast-badger-70.html
================================================
<div class="card">
  <div class="card__border"></div>
  <div class="card_title__container">
    <span class="card_title">Explosive Growth</span>
    <p class="card_paragraph">
      Perfect for your next content, leave to us and enjoy the result!
    </p>
  </div>
  <hr class="line" />
  <ul class="card__list">
    <li class="card__list_item">
      <span class="check">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="check_svg"
        >
          <path
            fill-rule="evenodd"
            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
            clip-rule="evenodd"
          ></path>
        </svg>
      </span>
      <span class="list_text">10 Launch Weeks</span>
    </li>
    <li class="card__list_item">
      <span class="check">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="check_svg"
        >
          <path
            fill-rule="evenodd"
            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
            clip-rule="evenodd"
          ></path>
        </svg>
      </span>
      <span class="list_text">10 Influencers Post</span>
    </li>
    <li class="card__list_item">
      <span class="check">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="check_svg"
        >
          <path
            fill-rule="evenodd"
            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
            clip-rule="evenodd"
          ></path>
        </svg>
      </span>
      <span class="list_text">100.000 Views</span>
    </li>
    <li class="card__list_item">
      <span class="check">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="check_svg"
        >
          <path
            fill-rule="evenodd"
            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
            clip-rule="evenodd"
          ></path>
        </svg>
      </span>
      <span class="list_text">10 Reddit Posts</span>
    </li>
    <li class="card__list_item">
      <span class="check">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="check_svg"
        >
          <path
            fill-rule="evenodd"
            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
            clip-rule="evenodd"
          ></path>
        </svg>
      </span>
      <span class="list_text">2 Hours Marketing Consultation</span>
    </li>
  </ul>
  <button class="button">Book a Call</button>
</div>

<style>
/* From Uiverse.io by MuhammadHasann  - Tags: simple, animation, gradient, card, card animation */
.card {
  --white: hsl(0, 0%, 100%);
  --black: hsl(240, 15%, 9%);
  --paragraph: hsl(0, 0%, 83%);
  --line: hsl(240, 9%, 17%);
  --primary: hsl(266, 92%, 58%);

  position: relative;

  display: flex;
  flex-direction: column;
  gap: 1rem;

  padding: 1rem;
  width: 19rem;
  background-color: hsla(240, 15%, 9%, 1);
  background-image: radial-gradient(
      at 88% 40%,
      hsla(240, 15%, 9%, 1) 0px,
      transparent 85%
    ),
    radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 0% 64%, hsla(263, 93%, 56%, 1) 0px, transparent 85%),
    radial-gradient(at 41% 94%, hsla(284, 100%, 84%, 1) 0px, transparent 85%),
    radial-gradient(at 100% 99%, hsla(306, 100%, 57%, 1) 0px, transparent 85%);

  border-radius: 1rem;
  box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset;
}

.card .card__border {
  overflow: hidden;
  pointer-events: none;

  position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background-image: linear-gradient(
    0deg,
    hsl(0, 0%, 100%) -50%,
    hsl(0, 0%, 40%) 100%
  );

  border-radius: 1rem;
}

.card .card__border::before {
  content: "";
  pointer-events: none;

  position: fixed;
  z-index: 200;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%), rotate(0deg);
  transform-origin: left;

  width: 200%;
  height: 10rem;
  background-image: linear-gradient(
    0deg,
    hsla(0, 0%, 100%, 0) 0%,
    hsl(277, 95%, 60%) 40%,
    hsl(277, 95%, 60%) 60%,
    hsla(0, 0%, 40%, 0) 100%
  );

  animation: rotate 8s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.card .card_title__container .card_title {
  font-size: 1rem;
  color: var(--white);
}

.card .card_title__container .card_paragraph {
  margin-top: 0.25rem;
  width: 65%;

  font-size: 0.5rem;
  color: var(--paragraph);
}

.card .line {
  width: 100%;
  height: 0.1rem;
  background-color: var(--line);

  border: none;
}

.card .card__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card .card__list .card__list_item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card .card__list .card__list_item .check {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 1rem;
  height: 1rem;
  background-color: var(--primary);

  border-radius: 50%;
}

.card .card__list .card__list_item .check .check_svg {
  width: 0.75rem;
  height: 0.75rem;

  fill: var(--black);
}

.card .card__list .card__list_item .list_text {
  font-size: 0.75rem;
  color: var(--white);
}

.card .button {
  cursor: pointer;

  padding: 0.5rem;
  width: 100%;
  background-image: linear-gradient(
    0deg,
    rgba(94, 58, 238, 1) 0%,
    rgba(197, 107, 240, 1) 100%
  );

  font-size: 0.75rem;
  color: var(--white);

  border: 0;
  border-radius: 9999px;
  box-shadow: inset 0 -2px 25px -4px var(--white);
}

</style>
    

================================================
FILE: Cards/MuhammadHasann_friendly-dragonfly-11.html
================================================
<div class="card">
      <div class="container-image">
        <svg class="image-circle" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 335.76 195.21" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-shoes1" d="M332.99 147.72c-0.87,-8.61 -2.43,-5.69 -1.57,-16.93 0.7,-9.13 -0.29,-27.37 -1.46,-37.14 -0.23,-1.89 -0.43,-5.19 -1.06,-8.26l-3.31 -12.45c-0.54,-1.82 -0.16,-2.7 -0.7,-4.36 -1.5,-4.56 -2.81,-6.58 -3.32,-12.45 -0.27,-3.05 0.85,-4.81 -1.89,-7.13 -1.31,-1.11 -2.14,-1.33 -3.74,-1.23 -10.29,0.69 -19.1,-4.44 -28.23,-7.89l-5.37 -2.51c-7.84,-3.92 -16.02,-10.9 -23.59,-15.81 -5.06,-3.28 -2.36,-0.49 -4.87,-5.83 -2.48,-5.29 -11.1,-6.93 -16.27,-8.5 -2.53,-0.76 -1.72,-0.99 -3.98,-1.68 -1.14,-0.35 -3.14,-0.5 -3.63,-0.76 -2.09,-1.09 -7.48,-4.47 -9.41,-4.76 -3.83,-0.58 -7,6.85 -9.59,10.32 -1.8,2.42 -3.23,5.65 -3.64,8.83 -0.22,1.71 -1.74,3.48 -2.63,5.16 -8.27,-3.97 -8.47,-1.81 -9.27,0.86 -1.69,5.63 -4.59,10.52 -6.25,16.27 -3.05,10.56 -6.49,6.16 -11.04,12.04 -1.64,2.12 -0.97,2.39 -3.42,3.9 -5.38,3.33 -9.5,0.93 -16.05,7.03 -10.09,9.4 -3.03,2.62 -9.55,5.65 -1.43,0.66 -3.15,2.01 -4.26,3.06 -2.1,2.01 -1.92,2.22 -3.22,4.67 -11.67,0 -10.17,6.25 -14.88,7.64 -4.6,1.36 -6.75,1.85 -9.78,5.42 -1.14,1.35 -2.27,3.88 -3.22,4.66 -1.61,1.31 -2.53,0.56 -4.95,2.37 -3.18,2.38 -6.99,3.65 -9.48,5.71 -2.55,2.1 -1.2,1.6 -4.73,3.15 -5.39,2.38 -10.82,3.14 -15.13,7.39 -1.64,1.62 -16.4,4.41 -18.66,4.98 -11.91,3.03 -25.8,4.05 -37.36,8.24 -6.1,2.21 -4.85,-2.22 -11.16,4.05 -4.74,4.71 -3.68,10.8 -6.22,16.29 -1.07,2.31 -1.69,1.85 -2.68,5.2l-1.44 5.87c-0.73,4.22 -2.36,6.72 -1.86,12.16l1.02 4.62c1.95,5.05 7.38,8.45 12.31,10.21l13.44 4.02c5.09,1.37 11.26,1.47 16.51,2.63 5.72,1.26 34.16,1.33 39.85,0.87 2.59,-0.21 3.66,0.35 5.75,0.84 3.42,0.8 4.45,-0.44 7.03,-0.28 2.33,0.14 3.31,1.06 6.8,1.09 9.62,0.08 90.6,0.66 98.33,-0.28 4.23,-0.52 10.35,0.74 14.86,0.26 11.36,-1.21 24.28,-2.91 36.17,-1.87 7.05,0.61 29.63,1.01 33.07,-1.51 1.48,0.99 29.81,-0.46 33.72,-0.68 8.78,-0.5 17.29,-6.69 16.8,-15.89 -0.1,-9.37 -1.8,-17.8 -2.75,-27.26z"></path></g></svg>
      </div>
      <div class="content">
        <div class="detail">
          <span>Lorem <br> Ipsum dolor.</span>
          <p>$199</p>
          <button>Buy</button>
        </div>
        <div class="product-image">
          <div class="box-image">
            <svg class="img-product" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 116.83 182.61" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-shoes2" d="M99.33 20.55c-4.24,-1.91 -3.3,-0.4 -8.3,-3.82 -4.06,-2.78 -12.82,-7.22 -17.68,-9.3 -0.94,-0.4 -2.53,-1.19 -4.13,-1.73l-6.69 -1.8c-0.99,-0.23 -1.3,-0.65 -2.22,-0.84 -2.53,-0.53 -3.82,-0.46 -6.69,-1.8 -1.49,-0.7 -2.01,-1.69 -3.83,-1.04 -0.87,0.31 -1.19,0.64 -1.58,1.41 -2.44,4.98 -7.2,7.7 -11.26,11.02l-2.61 1.83c-3.93,2.6 -9.38,4.53 -13.7,6.73 -2.89,1.47 -0.86,0.97 -4.02,0.7 -3.13,-0.27 -6.21,3.31 -8.33,5.29 -1.04,0.97 -0.92,0.53 -1.85,1.4 -0.47,0.44 -1.08,1.33 -1.33,1.49 -1.07,0.68 -4.09,2.28 -4.75,3.1 -1.3,1.63 1.31,5.1 2.23,7.24 0.64,1.49 1.76,3.02 3.13,4.07 0.74,0.56 1.15,1.74 1.7,2.61 -4.07,2.78 -3.12,3.46 -2.09,4.55 2.17,2.3 3.66,4.97 5.89,7.28 4.1,4.26 1.12,4.68 2.64,8.38 0.55,1.33 0.85,1.09 0.9,2.64 0.11,3.4 -2.12,4.67 -1.04,9.36 1.66,7.23 0.4,2.11 0.06,5.96 -0.07,0.84 0.09,2.01 0.28,2.8 0.37,1.51 0.52,1.49 1.31,2.75 -3.14,5.43 0.18,6.41 -0.44,8.98 -0.6,2.51 -0.95,3.64 -0.11,6.01 0.32,0.9 1.2,2.1 1.3,2.75 0.18,1.1 -0.42,1.33 -0.22,2.94 0.25,2.12 -0.18,4.23 0.11,5.95 0.29,1.75 0.42,0.99 0.2,3.05 -0.34,3.15 -1.45,5.88 -0.63,9.03 0.31,1.2 -2.36,8.82 -2.7,10.03 -1.79,6.36 -5.05,13.1 -6.2,19.61 -0.61,3.43 -2.34,1.66 -1.11,6.28 0.92,3.47 4.04,4.61 5.91,7.28 0.79,1.12 0.41,1.28 1.7,2.65l2.35 2.25c1.77,1.48 2.49,2.9 5.16,4.13l2.42 0.76c2.87,0.45 5.92,-1.16 8.06,-2.98l5.48 -5.18c2.01,-2 3.71,-4.85 5.66,-6.98 2.12,-2.32 9.8,-15.54 11.11,-18.32 0.6,-1.26 1.15,-1.61 1.93,-2.45 1.29,-1.38 0.99,-2.19 1.76,-3.35 0.69,-1.05 1.38,-1.26 2.33,-2.87 2.62,-4.45 24.66,-42 26.3,-45.85 0.9,-2.11 3.13,-4.62 4.12,-6.85 2.49,-5.61 5.17,-12.08 8.85,-17.34 2.18,-3.12 8.43,-13.52 8.19,-15.8 0.86,-0.42 7.8,-14 8.75,-15.88 2.13,-4.22 1.53,-9.85 -2.88,-12.09 -4.39,-2.47 -8.77,-3.95 -13.43,-6.05z"></path></g></svg>
          </div>
        </div>
      </div>
    </div>
<style>
/* From Uiverse.io by MuhammadHasann - Tags: animation, card, shoe */
.card {
  position: relative;
  background: transparent;
  width: 300px;
  height: 300px;
  border: none;
}

.card:hover {
  width: 300px;
}

.card .container-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #e7e7e7;
  width: 190px;
  height: 190px;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 3px 1px #1818183d, 2px 2px 3px #18181865, inset 2px 2px 2px #ffffff;
  transition: all .3s ease-in-out, opacity .3s;
  transition-delay: .6s, 0s;
}

.card:hover .container-image {
  opacity: 0;
  border-radius: 8px;
  transition-delay: 0s, .6s;
}

.card .container-image .image-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 125px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(2px 2px 2px #1818188a);
  transition: all .3s ease-in-out;
  transition-delay: .4s;
}

.card:hover .container-image .image-circle {
  opacity: 0;
  transition-delay: 0s;
}

.card .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #e7e7e7;
  padding: 20px;
  width: 190px;
  height: 190px;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 3px 1px #1818183d, 2px 2px 3px #18181865, inset 2px 2px 2px #ffffff;
  visibility: hidden;
  transition: .3s ease-in-out;
  transition-delay: 0s;
  z-index: 1;
}

.card:hover .content {
  width: 290px;
  height: 190px;
  visibility: visible;
  transition-delay: .5s;
}

.card .content .detail {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all .3s ease-in-out;
  transition-delay: 0s;
}

.card:hover .content .detail {
  color: #181818;
  opacity: 100%;
  transition: 1s;
  transition-delay: .3s;
}

.card .content .detail span {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 800;
}

.card .content .detail button {
  background: #b8854b;
  margin-top: auto;
  width: 75px;
  height: 25px;
  color: #ffffff;
  font-size: 13px;
  border: none;
  border-radius: 8px;
  transition: .3s ease-in-out;
}

.card .content .detail button:hover {
  background: #d39f63;
}

.card .content .product-image {
  position: relative;
  width: 100%;
  height: 100%;
}

.card .content .product-image .box-image {
  display: flex;
  position: absolute;
  top: 0;
  left: -25%;
  width: 100%;
  height: 115%;
  opacity: 0;
  transform: scale(.5);
  transition: all .5s ease-in-out;
  transition-delay: 0s;
}

.card:hover .content .product-image .box-image {
  top: -25%;
  left: 0;
  opacity: 100%;
  transform: scale(1);
  transition-delay: .3s;
}

.card .content .product-image .box-image .img-product {
  margin: auto;
  width: 7rem;
  height: auto;
}

.fil-shoes1, .fil-shoes2 {
  fill: #333333
}
</style>


================================================
FILE: Cards/MuhammadHasann_heavy-skunk-16.html
================================================
<div class="card">
  <span class="title"
    >Pro
    <p class="pricing">$8 <span class="pricing-time">/ month</span></p>
    <span class="sub-title"
      >Everything on Basic plus:
      <ul class="list">
        <li class="list-item"><span class="check">✓</span> Feature</li>
        <li class="list-item"><span class="check">✓</span> Feature</li>
        <li class="list-item"><span class="check">✓</span> Feature</li>
        <li class="list-item"><span class="check">✓</span> Feature</li>
        <li class="list-item"><span class="check">✓</span> Feature</li>
      </ul>
      <button class="button">
        <span class="text-button">Get pro now</span>
      </button>
    </span></span
  >
</div>

<style>
/* From Uiverse.io by MuhammadHasann  - Tags: subscription, purple, minimalist, card, rounded, smooth */
.card {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  width: 14rem;
  height: auto;
  background-color: rgb(122, 48, 143);
  background-image: radial-gradient(
      circle at 0% 0%,
      rgb(37, 7, 44) 15%,
      rgba(0, 0, 0, 0) 75%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgb(25, 2, 31, 0.9) 15%,
      rgba(0, 0, 0, 0) 150%
    ),
    linear-gradient(
      135deg,
      rgba(24, 8, 28, 0) 0%,
      rgb(122, 48, 143) 50%,
      rgba(24, 8, 28, 0) 100%
    );
  border-radius: 0.5rem;
}

.card::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  background-color: rgb(122, 48, 143);
  background-image: linear-gradient(
    0deg,
    rgba(118, 42, 180, 1) 0%,
    rgb(199, 95, 228) 75%
  );
  border-radius: 9999px;
  box-shadow: 0 1px 5px 3px rgb(199, 95, 228), 0 0 30px 5px rgb(199, 95, 228);
}

.card .title {
  font-size: 1rem;
  color: white;
  font-weight: 600;
}

.card .pricing {
  font-size: 1.5rem;
  color: white;
  font-weight: 600;
}

.card .pricing .pricing-time,
.card .sub-title {
  font-size: 0.75rem;
  color: rgb(184, 132, 199);
  font-weight: 500;
}

.card .list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: white;
  font-weight: 500;
  list-style: none;
}

.card .list .list-item .check {
  margin-right: 0.25rem;
  font-size: 1rem;
  color: rgb(199, 95, 228);
  font-weight: 900;
}

.card .button {
  overflow: hidden;
  cursor: pointer;
  position: relative;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  width: 100%;
  height: fit-content;
  background-color: rgb(122, 48, 143);
  font-size: 0.75rem;
  color: white;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 2px 1px rgb(122, 48, 143);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.card .button .text-button {
  position: relative;
  z-index: 10;
}

.card .button::before,
.card .button::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
}
.card .button::before {
  left: 0;
  background-image: radial-gradient(
    circle at 0% 45%,
    rgba(16, 5, 36, 1) 19%,
    rgba(16, 5, 36, 0.26) 46%,
    rgba(16, 5, 36, 0) 100%
  );
}
.card .button::after {
  right: 0;
  background-image: radial-gradient(
    circle at 100% 45%,
    rgba(16, 5, 36, 1) 19%,
    rgba(16, 5, 36, 0.26) 46%,
    rgba(16, 5, 36, 0) 100%
  );
}

.card .button:hover {
  box-shadow: 0px 0px 20px 0 rgb(122, 48, 143);
}

.card .button:hover::before,
.card .button:hover::after {
  width: 0;
  opacity: 0;
}

</style>
    

================================================
FILE: Cards/MuhammadHasann_hot-liger-0.html
================================================
<div class="card_container">
  <div class="card_hover">
    <div class="part part-1"></div>
    <div class="part part-2"></div>
    <div class="part part-3"></div>
    <div class="part part-4"></div>
    <div class="part part-5"></div>
    <div class="part part-6"></div>
    <div class="part part-7"></div>
    <div class="part part-8"></div>
    <div class="part part-9"></div>
    <div class="part part-10"></div>
    <div class="part part-11"></div>
    <div class="part part-12"></div>
    <div class="part part-13"></div>
    <div class="part part-14"></div>
    <div class="part part-15"></div>
  </div>
  <div class="card">
    <div class="say-hi">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 71 74"
        class="icon_say-hi"
      >
        <path
          fill="black"
          d="M43.6574 32.6925C46.2318 27.3745 42.4638 8.00882 50.0978 4.62384C53.3046 3.19858 56.1818 5.55916 57.0637 8.98869C58.7918 15.723 56.7074 24.034 54.9793 30.5011C54.712 31.5166 53.8925 33.7525 54.0261 34.7413C58.5781 27.5437 59.4243 18.9209 63.0587 16.3644C65.9894 14.2978 68.9201 15.4647 70.372 18.7339C72.8573 24.3369 65.6776 37.2266 62.4084 41.7963C67.0227 52.1917 65.9538 64.93 54.9347 70.4083C51.7814 71.21 49.0734 71.2813 45.9556 70.2569C45.9378 70.2569 45.6973 70.1767 45.6706 70.1678C41.0741 73.2588 30.358 73.7309 27.4362 72.3502C20.6395 68.8138 18.2522 61.8479 6.11974 55.3273C4.40052 54.4098 1.96868 53.2518 0.721583 51.0159C-2.53869 45.1902 6.16428 41.0748 14.3773 44.5666C16.7023 45.5554 20.5772 48.1565 22.2251 50.624C23.7395 49.7688 22.9556 47.9071 22.047 44.4954C19.3479 34.4206 8.0082 21.9763 9.7096 14.7699C10.8676 9.85275 16.0965 7.11804 20.0338 10.984C25.5923 16.4535 29.0574 27.9624 31.7031 35.2045C32.8166 34.4117 32.7453 35.2668 31.5873 30.9554C30.2689 26.0472 28.6388 21.1657 27.6322 16.3377C26.492 10.8415 24.746 2.69084 31.4091 0.321349C40.1744 -2.80531 42.2232 18.4132 42.8201 23.6421L43.6841 32.7014L43.6574 32.6925ZM46.5881 69.5888H46.8197C47.5769 69.5977 48.3608 69.6155 49.0823 69.66C51.8615 69.8293 52.8859 69.2146 55.2109 68.1813C63.9584 64.2975 64.6087 52.2452 61.0455 43.5155C60.3685 41.8497 60.6447 41.3509 61.3128 40.2285C64.4661 34.9016 71.343 24.8714 68.6439 18.8051C67.7442 16.792 64.8314 16.2129 63.032 18.333C60.9297 20.8094 59.3976 28.4702 57.0815 32.2916C56.5114 33.2358 55.7275 34.1444 55.2554 34.9818C56.0839 35.5163 55.9859 35.3114 56.4134 36.3981C55.1396 36.3001 51.6299 35.828 50.9886 35.0352C53.1086 34.0821 53.2423 31.8195 54.0885 27.9891C54.6764 25.3079 55.2554 22.9918 55.6385 20.0879C55.9859 17.46 56.3333 14.5116 56.0126 11.7412C55.6117 8.29387 53.9905 4.63275 50.1512 6.34305C44.6105 8.80162 47.7728 25.9314 44.8689 33.6456C45.8131 34.2068 45.8398 33.9039 46.5792 35.2312L39.9696 34.67C41.9738 32.9063 42.152 35.1332 41.083 26.3768C40.602 22.4574 39.3906 11.0019 38.1969 7.79503C36.2728 2.62848 34.4467 0.704387 30.5629 2.43251C27.2135 3.92012 28.9862 13.9414 29.4939 16.8098C29.9571 19.402 30.7856 22.4039 31.5427 25.1208L34.0013 33.8238C34.3754 34.6611 34.8119 34.2603 35.774 35.1421C33.4134 36.1933 31.0973 36.3269 28.8347 37.1731C28.8169 35.8904 29.6365 36.1487 30.3045 35.1154C28.4517 30.51 20.5415 8.29387 15.0009 10.7524C2.31609 16.3822 24.8975 35.7122 24.4165 49.3056C31.9347 45.8048 38.1078 49.4927 42.2678 54.9532C39.542 54.971 36.3708 48.3792 28.2736 49.9559C25.8417 50.428 24.5501 51.4257 22.3142 52.2096C19.7398 50.9357 16.5776 46.8203 12.088 45.3951C10.44 44.8695 -0.391898 43.8985 2.18247 49.7065C3.58991 52.8777 8.96134 54.6681 11.3576 56.1112C15.179 58.4094 17.0497 60.4048 20.2743 63.7898C34.028 78.2294 44.9669 67.54 47.6036 67.8339C47.3898 68.4842 46.9711 69.0721 46.3743 69.5977L46.5703 69.5888H46.5881ZM53.6698 46.5798L43.31 44.914C37.5644 44.3617 35.6938 45.1724 33.7608 45.1545C32.291 45.1456 33.1907 45.3951 32.5048 44.6379C34.0102 42.9454 41.6531 43.1948 43.693 43.2839C47.2295 43.4353 50.9708 44.2994 53.6698 46.5798Z"
          clip-rule="evenodd"
          fill-rule="evenodd"
        ></path>
      </svg>
    </div>
    <div class="title">
      <span>Hi, I'm Name</span>
    </div>
    <div class="paragraph">
      <span>Passionate about creating, beautiful and functional websites</span>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by MuhammadHasann  - Website: https://twitter.com/greeenyang/status/1756875866863468827 - Name: Greeen Yang - Tags: animation, minimalist, card, card animation */
.card_container {
  --X: 0deg;
  --Y: 0deg;
  --Z: 0deg;
  --angleX: 15deg;
  --angleY: 20deg;

  cursor: pointer;

  position: relative;
}

.card_hover {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;

  display: flex;
  flex-wrap: wrap;

  width: 100%;
  height: 100%;
}

.card_hover .part {
  width: 20%;
  height: calc(100% / 3);
  background-color: transparent;
}

.card_container:has(.part-1:hover) {
  --X: var(--angleX);
  --Y: calc(var(--angleY) * -1);
}
.card_container:has(.part-2:hover) {
  --X: var(--angleX);
  --Y: calc((var(--angleY) / 2) * -1);
}
.card_container:has(.part-3:hover) {
  --X: var(--angleX);
}
.card_container:has(.part-4:hover) {
  --X: var(--angleX);
  --Y: calc(var(--angleY) / 2);
}
.card_container:has(.part-5:hover) {
  --X: var(--angleX);
  --Y: var(--angleY);
}
.card_container:has(.part-6:hover) {
  --Y: calc(var(--angleY) * -1);
}
.card_container:has(.part-7:hover) {
  --Y: calc((var(--angleY) / 2) * -1);
}
.card_container:has(.part-9:hover) {
  --Y: calc(var(--angleY) / 2);
}
.card_container:has(.part-10:hover) {
  --Y: var(--angleY);
}
.card_container:has(.part-11:hover) {
  --X: calc(var(--angleX) * -1);
  --Y: calc(var(--angleY) * -1);
}
.card_container:has(.part-12:hover) {
  --X: calc(var(--angleX) * -1);
  --Y: calc((var(--angleY) / 2) * -1);
}
.card_container:has(.part-13:hover) {
  --X: calc(var(--angleX) * -1);
}
.card_container:has(.part-14:hover) {
  --X: calc(var(--angleX) * -1);
  --Y: calc(var(--angleY) / 2);
}
.card_container:has(.part-15:hover) {
  --X: calc(var(--angleX) * -1);
  --Y: var(--angleY);
}

.card {
  --light: #d9d9d9;
  --dark: #1f1f1f;

  position: relative;

  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  padding: 1.5rem;
  width: 15rem;
  background-color: rgb(172, 250, 233);
  background-image: linear-gradient(
    135deg,
    rgba(172, 250, 233, 1) 0%,
    rgba(213, 143, 235, 1) 50%,
    rgba(242, 126, 241, 1) 100%
  );

  border-radius: 0.5rem;

  transform-origin: center;
  transform: rotateX(var(--X)) rotateY(var(--Y)) rotateZ(var(--Z));
  transition: transform 0.3s ease-in-out;
}

.say-hi {
  position: relative;

  width: 100%;
  height: 2rem;
  background-color: transparent;
}

.icon_say-hi {
  position: absolute;
  bottom: 0;
  left: -0.5rem;

  width: 3rem;

  opacity: 0;
  transform-origin: 60% 90%;
  transform: translate(-15deg);
  filter: drop-shadow(0 0 0.5rem #2b2b2b);
  transition: all 0.2s ease-in-out;
}

.card_container:hover .card .icon_say-hi {
  width: 3.5rem;

  opacity: 1;
  animation: say-hi 0.35s linear infinite alternate;
}

@keyframes say-hi {
  to {
    transform: rotate(25deg);
  }
}

.title {
  overflow: clip;

  width: 100%;

  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  text-transform: capitalize;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

.paragraph {
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--dark);
}

</style>
    

================================================
FILE: Cards/MuhammadHasann_mighty-tiger-68.html
================================================
<div class="card">
  <div class="sub-card category">
    <span class="text_span">Basketball sport</span>
    <svg
      class="icon_svg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
    >
      <path
        d="M86.6 64l85.2 85.2C194.5 121.7 208 86.4 208 48c0-14.7-2-28.9-5.7-42.4C158.6 15 119 35.5 86.6 64zM64 86.6C35.5 119 15 158.6 5.6 202.3C19.1 206 33.3 208 48 208c38.4 0 73.7-13.5 101.3-36.1L64 86.6zM256 0c-7.3 0-14.6 .3-21.8 .9C238 16 240 31.8 240 48c0 47.3-17.1 90.5-45.4 124L256 233.4 425.4 64C380.2 24.2 320.9 0 256 0zM48 240c-16.2 0-32-2-47.1-5.8C.3 241.4 0 248.7 0 256c0 64.9 24.2 124.2 64 169.4L233.4 256 172 194.6C138.5 222.9 95.3 240 48 240zm463.1 37.8c.6-7.2 .9-14.5 .9-21.8c0-64.9-24.2-124.2-64-169.4L278.6 256 340 317.4c33.4-28.3 76.7-45.4 124-45.4c16.2 0 32 2 47.1 5.8zm-4.7 31.9C492.9 306 478.7 304 464 304c-38.4 0-73.7 13.5-101.3 36.1L448 425.4c28.5-32.3 49.1-71.9 58.4-115.7zM340.1 362.7C317.5 390.3 304 425.6 304 464c0 14.7 2 28.9 5.7 42.4C353.4 497 393 476.5 425.4 448l-85.2-85.2zM317.4 340L256 278.6 86.6 448c45.1 39.8 104.4 64 169.4 64c7.3 0 14.6-.3 21.8-.9C274 496 272 480.2 272 464c0-47.3 17.1-90.5 45.4-124z"
      ></path>
    </svg>
  </div>
  <div class="card_container">
    <svg class="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"
      ></path>
    </svg>
  </div>
  <div class="sub-card named">
    <span class="text_span">Golden state warriors</span>
  </div>
</div>

<style>
/* From Uiverse.io by MuhammadHasann  - Tags: simple, animation, minimalist, card, rounded, smooth, image, card template */
.card {
  --white: hsl(0, 0%, 83%);
  --black: hsl(240, 15%, 9%);
  --stone-300: hsl(24, 6%, 83%);
  --pink-500: hsl(299, 100%, 83%);

  cursor: pointer;

  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.sub-card {
  display: flex;
  align-items: center;

  padding: 0.75rem;
  min-width: 11.5rem;
  height: 2.25rem;
  background-color: var(--stone-300);
}
.sub-card.category {
  justify-content: space-between;

  border-radius: 0.5rem 0.5rem 0rem 0rem;

  transition: all 0.5s cubic-bezier(1, 0, 0, 1);
}
.sub-card.named {
  justify-content: center;

  border-radius: 0rem 0rem 0.5rem 0.5rem;

  transition: all 0.5s cubic-bezier(1, 0, 0, 1);
}

.card:hover .sub-card.category {
  transform: translateY(100%);
}
.card:hover .sub-card.named {
  transform: translateY(-100%);
}

.sub-card .text_span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--black);
  text-transform: capitalize;
}

.sub-card .icon_svg {
  width: 1rem;
  fill: var(--black);
}

.card_container {
  overflow: hidden;

  position: relative;
  z-index: 5;

  width: 17rem;
  height: 14rem;
  background-color: var(--pink-500);

  border-radius: 0.5rem;
}
.card_container::before {
  content: "";

  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 0rem;
  aspect-ratio: 1;
  background-color: hsl(240, 15%, 9%, 0.2);

  border-radius: 50%;
  transform-origin: center;

  transition: all 1s cubic-bezier(1, 0, 0, 1) 0.2s;
}
.card_container::after {
  content: "See more";

  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0rem;
  box-sizing: border-box;
  width: 0rem;
  aspect-ratio: 1;
  background-color: hsl(240, 15%, 9%, 0.5);

  font-size: 0rem;
  font-weight: bold;
  color: var(--white);
  text-align: center;

  border-radius: 50%;
  transform-origin: center;

  transition: all 1s cubic-bezier(1, 0, 0, 1) 0s;
}

.card:hover .card_container::before {
  width: 22.5rem;

  transition: all 1s cubic-bezier(1, 0, 0, 1) 0s;
}
.card:hover .card_container::after {
  padding: 1rem;
  width: 5rem;

  font-size: 0.75rem;

  transition: all 0.3s ease-in-out 0.4s;
}

.card_container .image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 3rem;
  fill: var(--black);
}

</style>
    

================================================
FILE: Cards/MuhammadHasann_old-eagle-40.html
================================================
<div class="card">
  <div class="image_container">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="image">
      <path
        d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"
      ></path>
    </svg>
  </div>
  <div class="title">
    <span>New brand name</span>
  </div>
  <div class="size">
    <span>Size</span>
    <ul class="list-size">
      <li class="item-list"><button class="item-list-button">37</button></li>
      <li class="item-list"><button class="item-list-button">38</button></li>
      <li class="item-list"><button class="item-list-button">39</button></li>
      <li class="item-list"><button class="item-list-button">40</button></li>
      <li class="item-list"><button class="item-list-button">41</button></li>
    </ul>
  </div>
  <div class="action">
    <div class="price">
      <span>$299</span>
    </div>
    <button class="cart-button">
      <svg
        class="cart-icon"
        stroke="currentColor"
        stroke-width="1.5"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
          stroke-linejoin="round"
          stroke-linecap="round"
        ></path>
      </svg>
      <span>Add to cart</span>
    </button>
  </div>
</div>

<style>
/* From Uiverse.io by MuhammadHasann  - Tags: card, product, card template, cool card */
.card {
  --bg-card: #27272a;
  --primary: #6d28d9;
  --primary-800: #4c1d95;
  --primary-shadow: #2e1065;
  --light: #d9d9d9;
  --zinc-800: #18181b;
  --bg-linear: linear-gradient(0deg, var(--primary) 50%, var(--light) 125%);

  position: relative;

  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  padding: 1rem;
  width: 14rem;
  background-color: var(--bg-card);

  border-radius: 1rem;
}

.image_container {
  overflow: hidden;
  cursor: pointer;

  position: relative;
  z-index: 5;

  width: 100%;
  height: 8rem;
  background-color: var(--primary-800);

  border-radius: 0.5rem;
}

.image_container .image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 3rem;
  fill: var(--light);
}

.title {
  overflow: clip;

  width: 100%;

  font-size: 1rem;
  font-weight: 600;
  color: var(--light);
  text-transform: capitalize;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

.size {
  font-size: 0.75rem;
  color: var(--light);
}

.list-size {
  display: flex;
  align-items: center;
  gap: 0.25rem;

  margin-top: 0.25rem;
}

.list-size .item-list {
  list-style: none;
}

.list-size .item-list-button {
  cursor: pointer;

  padding: 0.5rem;
  background-color: var(--zinc-800);

  font-size: 0.75rem;
  color: var(--light);

  border: 2px solid var(--zinc-800);
  border-radius: 0.25rem;

  transition: all 0.3s ease-in-out;
}

.item-list-button:hover {
  border: 2px solid var(--light);
}
.item-list-button:focus {
  background-color: var(--primary);

  border: 2px solid var(--primary-shadow);

  box-shadow: inset 0px 1px 4px var(--primary-shadow);
}

.action {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--light);
}

.cart-button {
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;

  padding: 0.5rem;
  width: 100%;
  background-image: var(--bg-linear);

  font-size: 0.75rem;
  font-weight: 500;
  color: var(--light);
  text-wrap: nowrap;

  border: 2px solid hsla(262, 83%, 58%, 0.5);
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0.25rem 1px var(--light);
}

.cart-button .cart-icon {
  width: 1rem;
}

</style>
    

================================================
FILE: Cards/MuhammadHasann_proud-vampirebat-28.html
================================================
<div class="card">
  <div class="shine">
    <div class="shine-effect">
    </div>
    <div class="pattern-1">
      <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 248.1 144.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M-0 101.69c3.87,24.91 27.23,42.84 55.21,42.84 28.05,0 13.24,-14.35 23.04,-42.64 18.22,-6.31 57.88,20.73 59.39,-14.47 0.19,-4.46 -28.08,-55.58 20.75,-55.58 30.25,0 24.2,12.13 62.74,-8.44 8.07,-4.31 32.04,-6.02 26.02,-23.41l-247.14 0 0 101.69z" class="fil-pattern-1"></path></g></svg>
    </div>
    <div class="pattern-2">
      <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 463.79 245.8" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M1.24 213.24c10.61,3.04 20.12,9.07 29.16,14.79 4.79,3.03 9.45,5.99 14.01,8.32 17.17,8.76 33.58,8.5 53.96,-31.44 3.21,-6.29 14.73,-22.72 25.19,-35.42 7.93,-9.64 15.51,-17.24 19.14,-17.24 32.08,0 48.71,14.44 60.13,24.36 4.12,3.58 7.52,6.53 10.51,7.77 7.62,3.14 14.59,-5.57 31.57,-46.74 5.13,-12.43 13.8,-14.8 25.61,-18.01 16.48,-4.5 39.57,-10.79 67.6,-52.2 12.14,-17.94 26.21,-14.56 40.15,-11.22 15.27,3.66 30.37,7.29 41.56,-24.24 2.89,-8.15 9.35,-16.72 17.85,-22.91 7.44,-5.42 16.47,-9.05 26.09,-9.05l0 4.54c-8.6,0 -16.72,3.28 -23.43,8.17 -7.76,5.65 -13.63,13.42 -16.24,20.76 -12.56,35.37 -29.63,31.27 -46.88,27.13 -12.43,-2.98 -24.97,-5.99 -35.36,9.35 -28.98,42.82 -53.01,49.36 -70.16,54.03 -10.57,2.87 -18.33,4.99 -22.61,15.36 -18.38,44.56 -26.83,53.61 -37.48,49.21 -3.68,-1.52 -7.33,-4.69 -11.75,-8.53 -10.9,-9.46 -26.77,-23.25 -57.17,-23.25 -2.08,0 -8.49,6.87 -15.65,15.57 -10.26,12.47 -21.53,28.52 -24.64,34.61 -22.14,43.39 -40.59,43.36 -60.07,33.42 -4.74,-2.42 -9.5,-5.43 -14.39,-8.53 -8.77,-5.56 -17.99,-11.4 -27.97,-14.26l1.24 -4.36z" class="fil-pattern-2"></path></g></svg>
    </div>
  </div>
  <div class="tape-1">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 140.92 299.32" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><g id="_2766174952096"><path d="M10.86 9.67c43.35,-3.22 86.71,-6.45 130.06,-9.67 -6.64,101.67 -12.54,203.13 0,299.32 -46.32,-2.04 -92.65,-4.07 -138.97,-6.11 -5.07,-190.99 0.39,-255.64 8.91,-283.54z" class="fil-tape-10"></path><path d="M25.58 18.62c-0.02,0.34 -8.14,117.07 -7.13,155.71 1.02,38.7 0,102.67 0,102.85l-1.44 -0.02c0,-0.18 1.02,-64.13 0,-102.8 -1.02,-38.74 7.1,-155.5 7.13,-155.83l1.44 0.1zm88.58 53.95c-0.03,0.54 -11.21,187.47 -16.35,198.78l-1.31 -0.59c5.04,-11.08 16.2,-197.74 16.23,-198.28l1.44 0.08zm-18.32 -54l0 62.1 -1.44 0 0 -62.1 1.44 0zm-24.44 -1c-0.02,0.71 -7.5,249.12 -8.14,263.7l-1.44 -0.06c0.64,-14.62 8.12,-262.96 8.14,-263.68l1.44 0.04zm-25.45 -0.01l-1.02 59.07c-0.03,0.52 -9.16,181.13 -7.14,191.23l-1.42 0.28c-2.05,-10.26 7.09,-191.06 7.12,-191.58l1.02 -59.03 1.44 0.02z" class="fil-tape-11"></path></g></g></svg>
  </div>
  <div class="tape-2">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 178.8 470.05" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><g id="_2766172114016"><path d="M12 0c55.6,8.84 111.2,17.69 166.79,26.54 -14.35,216.21 -8.24,321.98 -5.05,443.52 -57.91,-2.74 -115.83,-5.48 -173.74,-8.21 13.79,-254.59 21.83,-450.07 12,-461.84z" class="fil-tape-20"></path><path d="M46.38 22.01c0.04,0.33 12.64,115.04 11.38,149.23l-1.78 -0.06c1.26,-34.04 -11.33,-148.64 -11.37,-148.97l1.78 -0.2zm94.77 78.46c-0.02,0.79 -6.32,275.54 -11.38,308.43l-1.77 -0.27c5.05,-32.82 11.35,-307.41 11.37,-308.2l1.78 0.04zm-25.27 -69.45c-0.08,1.13 -27.78,392.77 -21.55,407.73l-1.65 0.69c-6.4,-15.36 21.33,-407.42 21.41,-408.54l1.78 0.13zm-89.71 245.07c0,0.42 1.26,147.7 5.01,158.94l-1.69 0.56c-3.83,-11.5 -5.1,-159.06 -5.1,-159.48l1.78 -0.01zm50.17 -227.37c-0.04,0.98 -13.9,340.03 -20.22,391.85l-3.55 -0.42c6.31,-51.79 20.17,-390.6 20.21,-391.57l3.57 0.14z" class="fil-tape-21"></path></g></g></svg>
  </div>
  
  <div class="product">
    <p>Photos</p>
  </div>
  <div class="tree">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2147.86 3138.13" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M1151.62 1722.98c5.86,-5.53 11.22,-14.28 15.5,-21.09 5.61,-8.92 12,-17.9 19.61,-25.25 4.82,-4.64 9.65,-7.99 15.15,-11.68 2.26,-1.51 4.48,-3.05 6.58,-4.77 4.51,-3.68 9.09,-10.62 12.26,-15.47 5.9,-9.01 11.39,-18.33 17.09,-27.47 15.77,-25.3 32.56,-49.06 53.59,-70.34 6.71,-6.79 13.02,-13.85 20.02,-20.36 17.43,-16.22 35.08,-32.03 53.44,-47.21 18.21,-15.06 36.89,-29.61 55.38,-44.33 7.23,-5.76 14.76,-11.4 21.53,-17.69 1.4,-1.3 2.82,-2.55 4.27,-3.77 -41.53,9.09 -86.6,28.92 -121.21,49.34 -18.5,10.91 -37.37,24.3 -54.23,37.56 -11.1,8.73 -44.24,35.85 -45.76,50.51l-0.53 5.17 -5.12 0.88c-2.98,0.51 -5.7,1.31 -8.24,2.99 -2.92,1.92 -5.67,4.88 -8.11,7.36 -4.69,4.77 -9.37,9.25 -14.53,13.53 -11.54,9.56 -23.66,18.2 -35.86,26.88 -10.99,7.81 -22.03,15.68 -32.2,24.55 -9.71,8.46 -18.36,17.66 -25.66,28.3 -16.5,24.04 -28.63,49.8 -32.11,78.97 -2.09,17.57 -0.81,34.38 1.33,51.48 9.81,-12.06 28.54,-26.09 38.85,-33.76 10.58,-7.87 21.39,-15.44 32.27,-22.88 3.83,-2.62 7.67,-5.22 11.5,-7.83 1.64,-1.12 3.64,-2.37 5.19,-3.61zm-85.6 84.38c1.86,13.25 3.6,26.46 4.04,39.85l0.01 0.2 -0 0.2c-0.25,10.34 -1.43,20.4 -5.03,30.15 -3.67,9.96 -6.67,15.57 -15.22,17.59 2.38,10.11 5.06,20.15 8.37,29.91 5.15,15.14 11.87,29.78 18.66,44.24 7.51,16 13.6,31.96 18.64,48.89 3.2,10.74 6.05,21.59 8.92,32.44 2.3,-8.16 4.36,-16.43 6.46,-24.64 6.7,-26.25 13.49,-52.43 22.14,-78.11 4.6,-13.65 9.71,-27.2 15.71,-40.3 1.96,-4.28 2.92,-7.07 3.47,-11.66 0.35,-2.93 0.88,-5.45 1.87,-8.25 6.32,-17.87 12.93,-36.79 13.31,-55.93 0.12,-6 0.02,-11.94 0.32,-17.95 0.48,-9.8 1.74,-19.54 3.37,-29.22 2.5,-14.94 6.7,-28.71 10.96,-43.17 3.84,-13.04 6.62,-24.75 8.03,-37.24 -4.02,6.1 -7.72,12.8 -10.96,17.38 -4.38,6.2 -9.37,11.93 -15.56,16.38 -3.18,2.29 -6.81,3.96 -9.84,6.19 -0.86,0.64 -1.59,1.32 -2.24,2.18l-1.33 1.77 -2.11 0.66c-11.09,3.44 -27.05,17.92 -35.79,25.68 -10.28,9.13 -32.17,30.6 -45.61,32.67l-0.58 0.09zm-21.73 62.45c0.2,-1.47 0.26,-3.09 0.12,-4.94l-0.11 -1.48 2.98 -8.11c0.19,-1.61 0.22,-3.68 0.23,-5.22 0.02,-4.17 -0.47,-8.58 -0.92,-12.73 -2.21,-20.31 -6.25,-40.46 -7.89,-60.8 -3.31,-40.95 5.73,-72.89 26.27,-108.41 15.17,-26.23 31.34,-43.8 56,-61.11 10.27,-7.21 20.89,-13.88 31.06,-21.24 12.21,-8.84 23.36,-18.4 33.83,-29.27 5.19,-5.39 9.97,-10.54 15.53,-15.61 14.7,-13.43 20.08,-63.21 21.82,-82.33 2.6,-28.58 3.11,-56.87 3.63,-85.51 0.12,-6.72 0.73,-13.67 1.22,-20.38 0.76,-10.27 1.58,-20.53 2.4,-30.79 0.89,-11.23 1.79,-22.46 2.56,-33.7 0.28,-4.02 0.54,-8.06 0.72,-12.09 0.07,-1.53 0.23,-3.65 0.14,-5.27 -0.04,-0.1 -0.07,-0.19 -0.11,-0.29 -1.04,-2.62 -2.49,-5.16 -3.76,-7.68 -1.89,-3.72 -3.47,-7.41 -4.65,-11.43 -2.36,-8.05 -3.54,-16.38 -4.48,-24.7 -1.83,-16.17 -2.3,-33.09 -6.43,-48.86 -14,-53.44 -70.03,-83.32 -115.23,-107.4 -59.35,-31.63 -92.59,-49.09 -125.63,-110.15 -21.73,-40.15 -40.74,-91.58 -77.3,-120.83 -11.9,-9.52 -24.03,-18.82 -35.75,-28.55 -9.4,-7.8 -18.48,-15.94 -26.47,-25.2 -19.48,-22.56 -30.15,-50.09 -39.26,-78.09 -1.61,-4.93 -3.7,-14.12 -7.14,-17.92l-1.78 -1.97 0.01 -2.65c0.03,-8.83 -4.79,-23.73 -7.54,-32.16 -5.39,-16.51 -11.8,-32.88 -18.53,-48.88 -5.5,-13.08 -11.31,-26.07 -17.49,-38.85 -4.78,-9.88 -9.87,-20 -15.59,-29.38 -4.16,-6.82 -9.47,-11.04 -8.94,-19.93l0.04 -0.73 2.81 -10.12 6.11 1.05c11.57,1.99 32.57,26.48 41.33,35.35 31.59,31.99 92.18,60.3 135.96,70.08 16.82,3.76 33.86,7.42 50.47,12.04 12.66,3.53 25,7.71 36.74,13.67 22.15,11.23 40.64,28.25 58.16,45.57 58.35,57.68 118.97,139.49 142.83,218.84 12.55,41.72 9.31,83.05 16.58,125.23 2.18,12.63 5.35,25 8.88,37.31 7.23,25.19 15.21,49.32 19.76,75.27l0.08 0.43 0.02 0.44c1.36,29.92 1.5,63.87 8.07,94.24 4.6,-12.61 10.14,-24.49 17.1,-36.15 5.05,-8.46 11.15,-16.84 15.52,-25.61 8.94,-17.93 7.14,-37.8 4.21,-57.02 -1.74,-11.42 -4.62,-22.2 -8.92,-32.92 -3.49,-8.71 -7.78,-16.96 -11.72,-25.46 -5.15,-11.1 -8.94,-21.64 -10.9,-33.78 -2.7,-16.73 -1.67,-34.14 0.7,-50.85 3.44,-24.21 6.41,-48.48 9.95,-72.69 2.29,-15.66 4.7,-31.37 7.66,-46.92 1.74,-9.17 4.17,-22.75 8.05,-31.18 0.55,-1.2 1,-2.45 1.34,-3.73 2.05,-7.74 0.19,-17.46 -1.37,-25.16 -2.78,-13.71 -5.87,-26.81 -7.6,-40.76 -3.53,-28.59 -4.46,-57.43 -2.95,-86.2 5.49,-104.04 50.35,-232.2 123.11,-307.92 9.6,-9.99 18.43,-20.32 26.5,-31.58 11.62,-16.22 21.74,-33.93 31.99,-51.05 37.9,-63.27 104.14,-84.59 159.11,-128.52 12.47,-9.96 26.37,-20.03 37.12,-31.82l59.29 -65.03c8.08,-9.14 13.91,-18.5 20.11,-28.89 4.32,-7.23 9.34,-15.98 17.35,-19.56 3.25,-1.45 6.73,-1.97 10.27,-1.72l9.34 0.65 -3.45 8.71c-2.86,7.22 -6.44,13.12 -10.69,19.53 -5.38,8.12 -9.12,14.51 -12.04,23.96 -5.16,16.75 -6.44,36.99 -6.98,54.39 -0.67,21.64 -0.45,43.72 -2.74,65.24 -2.04,19.18 -6.29,36.97 -12.83,55.12 -11.54,32.04 -28.96,60.52 -48.65,88.12 -18.1,25.37 -37.96,49.68 -55.01,75.76 -18.57,28.4 -31.97,57.99 -44.84,89.25 -11.21,27.24 -21.97,55.29 -37.56,80.4 -1.73,2.78 -3.51,5.52 -5.35,8.22 -21.69,31.71 -40.29,43.13 -71.97,63.46 -32.69,20.98 -44.8,31.43 -60.5,67.97 -10.07,27.11 -18.63,59.74 -36.15,82.92 -6.27,8.3 -13.62,15.38 -22.22,21.24 -19.34,13.19 -30.69,11.07 -35.73,36.91 -3.17,16.25 -5.96,33.39 -7.89,50.27l52.2 -53.66c6.16,-8.82 11.58,-17.96 16.19,-27.69 3.8,-8.01 6.92,-16.21 10.09,-24.48 5.2,-13.57 10.48,-25.85 18.14,-38.29 7.88,-12.81 16.4,-25.12 26.25,-36.49 4.14,-4.77 10.06,-10.39 13.44,-15.57l0.57 -0.88 44.9 -36.93 0.21 -0.15c52.64,-36.98 118.64,-57.45 182,-66.22 17.88,-2.47 36.06,-3.87 54.08,-4.82 20.8,-1.09 41.66,-1.54 62.49,-1.49 21.08,0.05 42.21,0.61 63.25,1.83 18.16,1.06 36.5,2.57 54.51,5.21l8.57 1.26 -3.2 8.06c-3.94,9.92 -7.92,10.9 -15.97,16.62 -32.41,23.03 -64.18,46.2 -98.23,66.84 -81.79,49.6 -165.06,93.6 -254.76,127.43 -59.25,22.34 -91.9,33.05 -155.19,23.65 -3.43,5.08 -6.97,10.1 -10.85,14.85 -3.91,4.79 -8.15,9.28 -12.46,13.72 -9.54,9.81 -19.5,19.01 -29.35,28.48 -7.37,7.09 -14.73,14.47 -20.64,22.84 -9.43,13.38 -13.65,27.68 -15.89,43.77 -2.79,20.06 -5.06,43.26 -2.02,63.42 1.84,12.17 5.44,21.26 11.1,32.04 5.54,10.53 10.53,19.74 14.13,31.24 4.59,14.63 6.43,30.26 7,45.66 26.94,-11.97 45.79,-45.69 57.68,-70.41l22.95 -50.05 0.05 -0.1c44.78,-89.59 90.22,-147.73 189.58,-179.61 41.42,-13.29 84.36,-24.26 126.94,-33.1 37.54,-7.79 76.65,-14.37 114.94,-16.7 24.17,-1.47 47.71,-0.89 71.78,1.66 20.79,2.2 41.45,5.66 62.08,8.99 19.73,3.19 42.51,6.68 62.56,6.08 9.67,-0.29 16.73,-1.65 25.73,-4.96 4.88,-1.8 9.59,-3.59 14.63,-4.95 7.39,-2 14.95,-3.08 22.57,-3.66l16.17 -1.24 -10.37 12.46c-10.98,13.18 -33.78,15.85 -49.72,18.83 -10.82,2.02 -28.09,11.76 -37.32,17.88 -14.74,9.77 -27.04,21.17 -38.88,34.23 -10.44,11.53 -20.11,23.82 -31.07,34.87 -18.3,18.43 -37.32,29.77 -62.61,36.24 -34.9,8.93 -71.35,6.16 -106.78,11.35 -60.27,8.83 -110.59,46.1 -165.32,69.78 -66.75,28.88 -128.91,32.47 -200.3,33.85 -8.89,19.86 -19.61,39.64 -32.36,57.19 -5.84,8.04 -16.56,19.1 -24.38,25.26 -5.43,4.27 -11.2,8 -17.67,10.48 -2.14,0.82 -6.15,1.78 -7.96,2.83 -2.03,1.18 -3.9,7.09 -4.55,9.09 -1.72,5.3 -3.11,10.79 -4.46,16.19 -2.25,9.02 -4.34,18.09 -6.44,27.15l-1.05 4.53 -4.6 0.7c-2.23,0.34 -4.44,0.58 -6.68,0.79 -0.46,0.04 -1.12,0.08 -1.7,0.15 -0.41,0.79 -0.83,1.83 -1.1,2.43 -1.3,2.99 -2.58,5.98 -3.93,8.95 -3.94,8.67 -7.28,17.38 -10.4,26.37 -4.32,12.45 -6.73,27.63 -8.64,40.65 -2.74,18.7 -4.63,37.62 -6.1,56.45 -1.65,21.07 -2.79,42.28 -3.19,63.42 -0.16,8.35 -0.2,16.72 0.02,25.06 0.03,1.24 0.07,2.5 0.12,3.77 2.75,-1.97 5.36,-3.73 7.09,-4.92 10.47,-7.2 21.18,-14.11 31.86,-21 9.13,-5.9 18.29,-11.76 27.37,-17.73 6.05,-3.97 12.52,-8.1 18.23,-12.53 12.18,-9.45 14.21,-13.41 22.55,-25.77 0.68,-1.01 1.38,-2.07 2.12,-3.04l0.08 -0.11 2.3 -2.79c2.97,-3.5 5.51,-6.12 8.13,-9.94 9.57,-13.93 18.96,-28.1 28.79,-41.84 6.03,-8.43 12.29,-16.63 19.72,-23.89 8.09,-7.91 17.36,-14.5 26.67,-20.88 16.11,-11.04 32.49,-21.72 48.63,-32.72 93.63,-63.78 264.01,-129.96 370.53,-64.66 13.33,8.17 26.47,16.69 39.89,24.7 20.44,12.2 40.62,22.04 62.9,30.51 25.48,9.68 97.21,36.5 105,63.93l1.46 5.14 -4.62 2.67c-3.41,1.97 -15.12,2.98 -19.21,3.43 -10.76,1.2 -21.54,2.23 -32.32,3.3 -9.14,0.91 -18.28,1.83 -27.4,2.89 -5.67,0.66 -12.12,1.29 -17.67,2.57 -8.2,1.88 -16.31,4.09 -24.35,6.56 -31.03,9.53 -61.11,22.83 -91.21,34.95 -38.33,15.43 -76.24,28.7 -116.42,38.67 -61.03,15.14 -124.36,23.03 -187.2,24.23 -20.01,0.38 -39.71,-0.09 -59.36,-1.38l-4.23 5.86c-4.21,5.84 -10.44,11.63 -15.77,16.47 -7.29,6.62 -14.9,12.95 -22.54,19.17 -12.04,9.79 -24.37,19.22 -36.39,29.01 -12.95,10.55 -26.3,20.59 -39.15,31.25 -42.14,34.96 -77.69,71.84 -108.38,117.18 -8.26,12.21 -15.97,24.83 -24.35,36.92 -6.87,9.91 -14.36,19.48 -23.88,27 -0.54,0.42 -1.08,0.84 -1.62,1.25 -0.39,22.03 -2.89,40.45 -8.92,61.95 -3.12,11.13 -6.35,21.96 -8.71,33.31 -3.55,17.1 -5.34,34.53 -6.33,51.94 -0.7,12.35 -2.92,24.26 -4.64,36.3 0.05,-0.04 0.1,-0.08 0.15,-0.12l77.63 -62.46 -1.62 -3.19 -0.01 -0.04c-0.28,-0.47 -0.51,-0.96 -0.71,-1.52l-2.6 -7.58 7.9 -1.39c1.09,-0.19 3.09,-0.45 4.68,-0.77 0.08,-1.4 0.08,-3.03 0.14,-4.05 0.28,-5.1 0.89,-10.11 1.75,-15.14 1.72,-9.96 6.01,-20.98 10.68,-29.91 16.21,-31.02 46.06,-59.53 73.39,-81.01 11.09,-8.72 21.79,-17.9 32.88,-26.61 18.49,-14.52 36.58,-25.96 58.4,-34.99 17.64,-7.3 36.01,-13.08 53.19,-21.45 13.85,-6.75 26.76,-14.74 40.11,-22.37 20.59,-11.76 39.31,-19.96 62.66,-24.98 47.98,-10.32 96.44,-5.07 145,-6.01 24.63,-0.48 47.11,-3.74 71.13,-8.78 18.9,-3.96 37.52,-8.24 56.64,-11.21 26.1,-4.05 48.9,-2.28 74.39,4.05 18.11,4.5 35.79,10.52 53.97,14.89 22.65,5.45 44.72,8.07 68.04,7.87 14.21,-0.12 56.2,-8.84 66.17,-4.59l8.1 3.45 -5.33 7.01c-1.82,2.39 -2.26,2.8 -4.65,4.75 -3.39,2.76 -8.53,5.34 -12.44,7.34 -5.99,3.06 -12.1,5.94 -18.22,8.74 -9.79,4.49 -20.07,9.18 -30.13,13 -26.08,9.91 -50.29,12.19 -77.63,15.8 -60.12,7.94 -97.31,40.88 -144.02,75.04 -31.23,22.84 -61.71,41.25 -100.17,49.16 -15.37,3.16 -29.97,2.93 -45.34,4.6 -10.91,1.19 -20.57,3.56 -30.35,8.7 -8.87,4.66 -17.38,10.04 -26.22,14.6 -12.16,6.27 -25.23,9.61 -38.49,12.67l-0.47 0.11 -0.48 0.04c-39.98,3.4 -78.33,5.47 -117.87,-3.25l-0.24 -0.05 -0.24 -0.07c-2.72,-0.81 -5.42,-1.69 -8.12,-2.56 -8.11,-2.62 -19.76,-6.67 -28.29,-4.69 -4.8,1.11 -8.27,4 -11.12,7.93 -18.48,25.51 -29.48,17.28 -56.26,21.69 -5.74,0.94 -10,2.43 -13.77,6.95 -2.8,3.36 -4.99,7.01 -7.96,10.34 -4.26,4.77 -9.19,8.3 -14.81,11.13 8.58,-3.57 17.11,-6.5 26.71,-8.43l0.31 -0.06 0.31 -0.03c17.59,-1.87 34.63,-0.31 51.88,3.27 17.93,3.72 35.38,9.4 53.03,14.21 18.36,5.01 36.55,8.89 55.63,9.68 29.49,1.22 59.68,0.25 88.75,5.95 18.87,3.7 34.01,9.99 51.56,17.24 6.95,2.87 13.91,5.57 21.12,7.72l2.53 0.75 1.31 2.16c2.24,2.96 16.19,10.12 20.22,12.67 44.25,27.99 111.28,104.91 112.4,159.3l0.14 6.61 -6.6 0.38c-16.46,0.94 -24.39,-9.79 -36.44,-18.11 -26.43,-18.25 -59.92,-38.77 -91.36,-46.22l-0.28 -0.07 -0.27 -0.09c-18.32,-5.99 -35.82,-7.68 -54.86,-4.77 -16.13,2.46 -31.39,7.86 -47.09,12.05 -17.16,4.58 -33.32,7.07 -51.11,4.81 -23.58,-2.99 -45.27,-13.8 -64.77,-26.96 -26.46,-17.87 -48.69,-40.82 -75.59,-58.07 -27.9,-17.89 -61.45,-24.48 -89.16,-43.16l-0.5 -0.34 -0.44 -0.42c-3.32,-3.21 -13.41,-14.98 -17.01,-16.21 -1.6,-0.44 -3.68,-0.7 -5.32,-0.96 -3.27,-0.52 -6.56,-1 -9.84,-1.45 -3.3,-0.46 -6.61,-0.89 -9.92,-1.29 -1.67,-0.2 -3.73,-0.51 -5.34,-0.53 -13.38,0.24 -30.91,17.98 -41.07,26.08 -10.33,8.24 -20.87,16.08 -31.35,24.12 -6.11,4.69 -12.39,9.59 -17.52,15.36 -8.41,9.46 -13.97,22.13 -18.86,33.67 -6.5,15.33 -11.8,31.98 -16.74,47.88 -6.78,21.81 -12.98,43.86 -18.76,65.96 -5.82,22.27 -11.26,44.74 -15.88,67.29 -3.28,15.99 -6.8,33.72 -7.76,50.02 -2.58,43.68 7.35,89.27 11.97,132.69 2.55,23.98 3.43,48.6 4.1,72.69 0.93,33.64 1.13,67.33 1.07,100.98 -0.13,83.11 -1.83,166.3 -3.83,249.39 -2,82.9 -4.45,165.78 -6.77,248.66 -0.94,33.52 -1.86,67.04 -2.62,100.56 -0.54,23.98 -1.06,48.01 -1.11,72l-0.01 6.84 -23.38 0 0.12 -6.98c1.04,-58.87 3.01,-117.8 4.65,-176.66 2.39,-85.47 4.65,-170.95 6.34,-256.44 1.7,-86.04 2.99,-172.21 2.47,-258.27 -0.21,-34.48 -0.69,-69.01 -2.01,-103.47 -0.92,-23.95 -2.05,-48.65 -5.08,-72.43 -2.19,-17.21 -4.64,-34.38 -6.8,-51.59 -1.41,-11.29 -2.65,-22.6 -2.85,-33.98 -0.45,-25.09 4.24,-51.96 8.09,-76.7 0.31,-2.01 0.98,-5.85 0.34,-7.88 -0.4,-1.27 -1.05,-2.6 -1.53,-3.85 -1.08,-2.75 -1.9,-5.56 -2.58,-8.43 -4.24,-18 -8.01,-36.47 -13.23,-54.19 -5.74,-19.49 -13.78,-37.73 -22.54,-56.03 -14.54,-30.35 -24.9,-55.94 -28.93,-89.91 -3.39,-14.88 -6.86,-29.86 -11.57,-44.39 -3.49,-10.74 -7.67,-21.09 -12.44,-31.32 -4.82,-10.33 -10.87,-20.9 -16.58,-30.77 -3.78,-6.54 -7.68,-13.08 -11.81,-19.41 -0.63,-0.97 -1.45,-2.24 -2.35,-3.58 -0.34,0.75 -0.68,1.53 -1.02,2.36 -4.92,11.82 -12.84,20.18 -21.76,29.23 -11.22,11.39 -23.48,20.78 -35.65,31.05 -11.74,9.91 -23.76,20.34 -32.79,32.87 -3.61,5.01 -6.83,10.32 -10.03,15.59 -4.69,7.74 -9.38,15.44 -14.27,23.06 -29.04,45.27 -60.6,67.62 -103.88,97.28 -6.55,4.49 -13.24,8.78 -19.76,13.09l-15.11 10.4c-1.39,1.24 -1.67,1.62 -3.01,3.19l-1.35 1.58 -2 0.56c-12.03,3.39 -38.29,26.79 -47.75,35.52 -7.72,7.12 -15.26,14.5 -22.46,22.14 -5.33,5.65 -10.93,11.79 -15.47,18.1 -17.03,23.7 -29.04,49.18 -36.59,77.34 -2.42,9.03 -4.25,18.07 -6.12,27.22 -1.08,5.27 -2.5,13.14 -5.36,17.68l-2.01 3.19 -3.77 0.01c-17.96,0.04 -33.78,-26.39 -41.34,-40.1 -7.3,-13.22 -14.83,-29.19 -19.57,-43.58 -8.11,-24.63 -11.81,-48.29 -11.01,-74.18 0.27,-8.67 1.04,-17.25 1.62,-25.89 0.44,-6.62 0.77,-13.52 -0.08,-20.13l-0.22 -1.7 2.73 -7.22c0.37,-1.23 0.57,-2.09 0.88,-3.38 0.78,-3.16 1.24,-6.41 1.99,-9.59 3.22,-13.68 8.12,-26.95 13.43,-39.94 10.13,-24.8 25.51,-55.08 27.24,-81.89 0.61,-9.47 -0.91,-19.34 -2.38,-28.68 -1.83,-11.66 -3.69,-23.09 -4.12,-34.92 -1.25,-34.79 10.36,-63.75 30.62,-91.7 24.94,-34.42 70.72,-63.13 109.31,-79.59 40.22,-17.15 94.9,-30.55 138.91,-15.83 -9.49,-13.51 -22.54,-29.75 -27.55,-34.38 -17.02,-15.73 -27.83,-35.06 -36.81,-56.14 -3.25,-7.63 -6.19,-15.37 -9.36,-23.02l-4.52 -1.14c-3.65,-0.92 -7.19,-1.99 -9.81,-4.86 -0.64,-0.7 -1.2,-1.5 -1.71,-2.34 -11.1,3.2 -27.88,1.57 -37.28,3.94 -35.08,8.83 -62.39,32.02 -92.99,49.9 -22.33,13.04 -44.23,20.65 -69.96,23.27 -15.18,1.54 -30.48,1.33 -45.72,1.08 -17.58,-0.29 -34.97,-0.52 -52.55,0.4 -25.08,1.32 -47.46,6.32 -71.85,11.4 -14.39,3 -28.62,5.51 -43.31,6.62 -18.04,1.36 -35.91,0.58 -53.84,-1.8 -36.05,-4.78 -86.04,-13.24 -117.21,10.69 -8.88,6.82 -16.13,20.31 -27.01,23.95l-5.48 1.83 -2.73 -5.09c-0.58,-1.07 -1,-2.29 -1.27,-3.33 -0.26,-0.82 -0.54,-1.52 -0.73,-2.38 -1.46,-6.93 0.45,-18.36 1.87,-25.08 13.87,-65.96 47.07,-85.93 103.31,-114.15 8.7,-4.36 17.34,-10 25.31,-15.56 8.99,-6.27 18.8,-13.55 26.67,-21.2 12.43,-12.08 24.21,-24.66 38.02,-35.24 16.08,-12.32 33.11,-20.5 53.05,-24.47 73.11,-14.54 139.99,-18.54 209.89,11.3 1.98,0.85 3.96,1.67 5.95,2.48 -4.99,-3.68 -9.98,-7.57 -15.1,-11.68 -11.72,-9.42 -23.19,-18.85 -35.82,-27.06 -11.17,-7.26 -23.88,-13.37 -35.71,-19.56 -13.74,-7.19 -32.66,-16.96 -43.3,-28.22 -18.49,-19.55 -36.02,-34.32 -62.14,-41.93 -10.2,-2.97 -20.74,-5.01 -31.05,-7.67 -14.24,-3.66 -27.75,-8.3 -41.2,-14.28 -36.74,-16.34 -63.62,-37.07 -86.39,-70.26 -13.18,-19.21 -23.82,-40.25 -35.56,-60.37 -5.97,-10.24 -12.29,-20.21 -19.13,-29.89 -5.19,-7.35 -10.65,-14.47 -16.07,-21.65 -9.02,-11.97 -17.08,-23.74 -24.51,-36.79 -12.27,-21.54 -22.63,-44.67 -32.26,-67.49 -7.43,-17.61 -15.12,-35.16 -23.26,-52.45 -5.28,-11.22 -10.77,-22.46 -16.78,-33.31 -3.24,-5.84 -8.5,-15.29 -13.26,-19.95l-1.1 -1.08 -0.53 -1.45c-2.91,-7.86 -10.44,-18.07 -15.31,-25.01 -5.58,-7.95 -18.54,-24.98 -19.53,-34.42l-0.66 -6.38 6.32 -1.09c17.51,-3.01 17.61,7.32 30.39,12.76 9.89,4.21 21.33,6.52 31.79,9l0.13 0.03c31.35,8.09 53.6,21.02 79.11,40.26 16.48,12.43 31.94,24.78 50.1,34.85 141.19,78.33 293.55,63.98 391.45,214.47 15.1,23.21 28.41,49.32 40.18,74.36 9.67,20.57 18.84,41.82 26.37,63.27 8.19,23.34 12.85,48.1 17.3,72.39 5.33,29.08 10.43,60.39 21.68,87.82 7.04,17.17 13.59,28.86 26.58,41.97 8.32,8.41 15.24,15.53 22,25.43 11.83,17.32 20.95,38.03 28.68,57.44 6.56,16.46 17.77,31.87 28.77,45.64 10.05,12.58 20.77,24.63 30.73,37.26 7.18,9.1 14.9,19.61 19.72,30.53 30.29,-3.51 63.41,-1.87 88.34,17.51 13.57,10.55 22.78,24.77 29.25,40.3 6.44,-20.77 11.01,-42.67 10.83,-64.05 -0.17,-20.22 -4.59,-38.09 -13.12,-56.36 -5.61,-12.03 -12.55,-23.42 -19.55,-34.68 -7.86,-12.65 -15.78,-25.17 -22.9,-38.27 -19.21,-35.36 -29.93,-70.44 -34.34,-110.51 -3.84,-34.88 -6.79,-69.9 -8.68,-104.94 -1.85,-34.21 -2.74,-68.63 -1.86,-102.88 0.31,-12.12 1.64,-24.82 2.76,-36.9 1.79,-19.27 3.84,-38.54 6.1,-57.76 2.41,-20.51 5.01,-41.1 8.33,-61.48 1.4,-8.62 4.52,-29.39 8.83,-36.72l2.23 -3.78 4.37 0.44c3.37,0.34 6.82,-0.1 9.72,2.05 3.52,2.62 4.05,8.02 5.2,12.04 1.25,4.4 1.9,8.93 3.08,13.32 2.38,8.87 5.34,17.46 8.49,26.08 9.24,25.31 19.68,49.78 30.74,74.33 8.66,19.22 17.62,38.44 24.73,58.3 17.58,49.04 19.32,95.33 15.99,146.95 -1.62,25.08 1.48,48.28 5.08,72.97 2.71,18.61 5.21,36.91 5.44,55.75 0.48,39.17 -8.49,82.95 -26.37,117.79 -0.9,1.76 -2.01,3.27 -2.95,4.86 0.29,1.04 0.84,2.39 1.13,3.17 1.41,3.79 2.88,7.57 4.28,11.36 10.22,27.61 8.34,54.76 1.5,82.83 -2.91,11.96 -6.62,23.65 -10.05,35.46 -2.81,9.65 -5.67,19.94 -6.64,29.96 -0.36,3.75 3.79,11.11 5.58,14.25 5.49,9.59 11.69,18.87 17.33,28.4 19.11,32.3 32.24,64.8 39.86,101.68 0.08,0.39 0.16,0.79 0.24,1.18zm409.98 -477.46c-8.2,-0.95 -16.41,-2.04 -24.66,-3.26 -13.52,-2 -26.97,-4.36 -40.47,-6.43 -8.65,-1.33 -17.7,-2.65 -26.52,-2.97 -22.59,23.68 -53.99,40.63 -81.34,58.08 -10.07,6.43 -28.43,17.19 -34.58,27.75 -3.25,5.6 -4.65,12.67 -5.77,18.98 -1.16,6.58 -2.15,13.21 -3.15,19.84l39.15 -32.01 0.17 -0.12c12.53,-9.06 26.07,-17.23 39.54,-24.8 16.21,-9.1 32.88,-17.52 49.81,-25.21 22.58,-10.26 57.7,-24.67 87.82,-29.85zm-105.76 404.87c-18.54,6.78 -39.13,4.67 -58.64,5.4l-2.6 2.99c1.04,0.09 2.08,0.19 3.12,0.3 10.06,1.03 19.77,1.11 29.89,1.01 7.95,-0.08 16.91,-4.52 24.01,-7.78 1.42,-0.65 2.83,-1.29 4.22,-1.92zm-17.66 -1109.63c0.32,-0.85 0.61,-1.77 0.9,-2.6 0.53,-1.53 0.97,-3.19 1.33,-4.78l5.88 -38.41c5.47,-38.91 13.99,-73.35 35.45,-106.67 9.25,-14.36 20.07,-27.78 30.56,-41.25 13.71,-17.6 26.73,-35.27 38.89,-53.99 16.15,-24.86 29.93,-51.17 45.61,-76.33 13.13,-21.07 26.81,-41.18 42.68,-60.3 12.01,-14.47 24.91,-28.25 37.69,-42.04 5,-5.39 9.67,-10.99 14.96,-16.11 29.83,-28.88 75.84,-88.44 95.41,-135.77 -32.88,32.08 -67.86,59.52 -106.79,85.32 -15.96,10.58 -32.28,20.65 -48.14,31.37 -11.65,7.87 -23.89,16.61 -33.56,26.87 -7.37,7.82 -13.51,16.47 -19.16,25.59 -10.4,16.77 -19.03,34.11 -30.72,50.16 -17.44,23.96 -38.58,44.59 -56.26,68.32 -60.21,80.82 -92.74,178.23 -96.13,278.76 -0.82,24.4 0.46,47.86 3.75,72.04 0.71,5.19 1.49,10.37 2.31,15.55 0.77,-1.85 1.72,-3.58 2.88,-5.23 2.31,-3.3 5.34,-6.19 7.91,-9.32 4.21,-5.13 7.58,-10.84 10.57,-16.75 5.15,-10.17 13.22,-26.95 11.92,-38.56l-0.27 -2.45 1.34 -2.06c0.32,-0.49 0.64,-0.94 0.99,-1.37zm-33.68 85.76c1.42,8.39 2.91,16.78 4.37,25.16 16.68,-7.38 29.96,-19.93 38.73,-36.28 6.41,-11.95 23.14,-50.62 23.45,-63.26l0.07 -2.75 1.95 -1.94c0.42,-0.42 0.89,-0.84 1.31,-1.27 0.41,-0.57 0.82,-1.28 1.19,-1.87 2.86,-4.54 5.03,-10.09 7.37,-14.96 3.56,-7.4 7.55,-14.1 12.85,-20.4 10.39,-12.37 22.36,-22.09 35.64,-31.16 11.31,-7.72 23.08,-14.75 34.32,-22.58 12.22,-8.52 23.34,-17.75 33.36,-28.82 10.3,-11.37 18.51,-26.06 25.3,-39.74 8.37,-16.88 15.56,-34.45 22.68,-51.89 9.88,-24.18 19.79,-49.52 32.62,-72.28 29.26,-51.94 70.84,-94.92 99.65,-146.91 15.79,-28.5 26.86,-55.53 30.32,-88.36 1.37,-13.05 1.93,-26.02 2.27,-39.13 0.31,-11.7 0.63,-23.16 1.28,-34.63 -12.32,29.99 -26.96,58.5 -45.63,85.9 -17.34,25.45 -37.24,48.82 -58.1,71.43 -5.04,5.46 -10.86,9.65 -16.08,14.82 -5.4,5.35 -10.26,11.12 -15.18,16.9 -9.65,11.35 -19.94,21.94 -28.84,33.94 -27.32,36.86 -49.12,75.18 -72.14,114.71 -15.45,26.53 -34.19,50.99 -53.47,74.82 -16.57,20.49 -30.55,41.46 -39.86,66.24 -6.08,16.18 -9.93,33.03 -13.1,49.99 -4.22,22.53 -7.5,45.32 -11.2,67.95l-0.09 0.56 -0.18 0.54c-7.29,21.49 -22.16,75.39 -50.43,75.29l-4.44 -0.02zm-85.8 351.09c-2.53,-12.99 -6.39,-25.61 -10.51,-38.53 -3.26,-10.21 -6.6,-20.4 -9.41,-30.74 -1.86,-6.82 -2.9,-13.45 -4.11,-20.37 -0.54,-3.13 -1.31,-7.71 -3.13,-10.38l-1.58 -2.31 0.49 -2.75c1.04,-5.79 0.61,-13.91 0.31,-19.79 -0.51,-9.94 -1.49,-19.91 -2.64,-29.79 -1.12,-9.62 -2.44,-19.23 -3.98,-28.79 -1.08,-6.68 -2.22,-13.66 -3.87,-20.23 -21.87,-87.39 -70.57,-141.34 -125.65,-208.55 -31.61,-38.57 -62.44,-59.7 -110.28,-72.87 -17.99,-4.95 -36.31,-8.62 -54.36,-13.4 -21.17,-5.61 -41.26,-12.58 -60.91,-22.34 -17.24,-8.56 -31.39,-16.88 -46.46,-28.74 -1.7,-1.34 -3.39,-2.66 -5.07,-3.95 6.91,16.77 14.79,33.29 20.82,50.42 3.88,11.03 7.16,22.33 10.54,33.52 3.91,12.97 7.94,26.83 13.35,39.24l0.19 0.44 0.13 0.46c8.65,30.87 19.7,58.27 41.72,82.06 13.59,14.67 30.1,27.39 45.49,40.14 22.47,18.62 37.24,33.01 52.94,58.24 10.47,16.83 19.55,33.97 28.17,51.8 6.37,13.17 12.48,26.7 19.93,39.3 8.86,14.98 19.1,27.15 32.2,38.63 19.43,17.03 43.02,31.16 65.62,43.49 18.55,10.12 37.93,19.25 55.97,30.21 16.37,9.94 30.54,21.13 43.94,34.84 3.44,3.52 6.89,7.06 10.13,10.77zm164.2 -306.63c32.21,14.38 106.73,-11.63 135.14,-22.14 43.35,-16.04 85.95,-35.56 127.25,-56.29 16.45,-8.26 32.71,-17.2 48.79,-26.15 21.89,-12.19 43.62,-24.71 65.14,-37.54 20.53,-12.24 40.95,-24.78 60.92,-37.92 13.03,-8.57 26.79,-17.77 39.09,-27.7 -15.23,-0.97 -30.56,-1.9 -45.93,-2.66l-1.52 3.46c-13.09,29.85 -87.38,45.52 -117.21,50.32 -39.74,6.4 -92.71,10.28 -127.42,31.26 -15.99,9.67 -27.52,20.41 -40.87,33.16 -12.45,11.89 -24.02,21.7 -39.09,30.3 -22.57,12.87 -48.69,21.04 -73.8,27.21 -3.38,0.83 -6.74,1.41 -10.14,2.08 -1.78,0.35 -3.87,0.77 -5.51,1.59 -5.99,2.98 -11.79,20.86 -14.85,31.03zm406.76 -211.39c-48.44,-1.67 -97.09,-0.82 -144.38,7 -37.13,6.14 -73.25,16.39 -107.57,31.91 -17.65,7.99 -71.44,39.74 -81.49,54.89l-1.07 1.61 -1.76 0.82c-8.27,3.84 -26.87,29.3 -32.22,37.13 -5.12,7.48 -11.29,17 -15.85,26.23 25.89,-4.76 50.22,-13.04 72.72,-27.55 19.21,-12.39 34.39,-27.79 51.62,-42.47 15.38,-13.1 30.68,-23.47 49.74,-30.58 38.39,-14.33 80.59,-17.82 120.82,-24.26 19.02,-3.05 38.2,-7.11 56.02,-14.6 7.68,-3.23 15.08,-7.06 22.11,-11.53 4.41,-2.8 7.75,-5.99 11.31,-8.59zm-1720.35 215.44l93.22 90.71 0.13 0.14c3.24,3.52 5.64,7.22 8.6,10.89 36.66,45.44 83.58,83.81 129.08,120.05l0.16 0.13 325.24 293.04 0.12 0.12c12.97,12.96 25.66,26.16 38.32,39.42 5.12,5.36 10.23,10.83 15.43,16.22 -3.49,-8.29 -6.64,-16.6 -8.97,-25.37 -5.7,-21.49 -8.94,-43.5 -13.01,-65.33 -4.6,-24.62 -10.45,-48.66 -18.84,-72.28 -5.26,-14.79 -11.4,-29.19 -18.16,-43.36 -19.54,-41.01 -40.58,-84.52 -70.33,-119.2 -18.08,-21.08 -38.74,-38.12 -62.23,-52.88 -30.18,-18.96 -64.22,-32.32 -97.8,-43.9 -36.47,-12.58 -73.52,-23.39 -109.84,-36.43 -41.72,-14.98 -82.61,-32.91 -118.79,-58.87 -11.95,-8.57 -23.14,-18.06 -35.02,-26.66 -18.48,-13.38 -35.75,-21 -57.34,-26.45zm1345.21 200.65c6.65,-2.57 13.23,-5.39 19.75,-8.26 11.16,-4.91 22.56,-10.07 33.43,-15.6 23.46,-11.96 43.95,-26.15 64.32,-42.72 16.57,-13.48 32.59,-28.09 50.29,-40.07 26.53,-17.95 52.85,-26.55 84.8,-29.03 19.7,-1.53 39.73,-2.89 59.33,-5.29 9.63,-1.18 19.06,-2.68 28.3,-5.71 8.56,-2.81 17.02,-6.7 25.31,-10.24 16,-6.84 32.11,-13.2 48.45,-19.21 44.9,-16.5 93.09,-22.67 139.64,-34.05 -6.17,-1.01 -12.36,-1.94 -18.53,-2.84 -14.77,-2.16 -29.56,-4.09 -44.36,-6.08 -33.95,-4.56 -66.65,-4.74 -100.72,-1.44 -59.87,5.81 -118.53,21.2 -176.65,36.08 -125.56,32.14 -160.02,78.8 -213.36,184.46zm19.68 13.3c49.77,-0.78 110.04,-11.5 150.87,-28.48 19.03,-7.92 37.25,-17.43 55.47,-27.04 29.37,-15.49 57.79,-30.22 89.72,-39.99 19.56,-5.98 40.24,-8.25 60.56,-9.83 35.27,-2.76 82.93,-2.72 111.75,-25.76 7.74,-6.19 15.26,-12.73 22.07,-19.95 4.61,-4.89 8.7,-10 12.87,-15.26 7.52,-9.47 14.66,-17.25 23.88,-25.18 5.44,-4.68 11.19,-9.19 17.11,-13.55 -0.83,0.25 -1.67,0.5 -2.5,0.75 -10.5,3.12 -21.34,6.22 -32.09,8.3 -28.82,5.58 -58.49,9.76 -86.62,18.21 -12.61,3.79 -24.92,8.21 -37.14,13.09 -10.72,4.28 -21.31,8.86 -32.02,13.13 -13.95,5.57 -27.84,10.37 -42.46,13.9 -18.46,4.45 -37.25,6.77 -56.19,7.79 -34.41,1.86 -66.07,6.83 -95.11,26.43 -16.7,11.28 -32.05,26 -47.57,38.94 -31.78,26.49 -64,44.32 -102.01,60.45 -3.17,1.35 -6.81,2.67 -10.6,4.04zm-1032.88 210.51c13.87,4.77 27.17,10.69 38.02,20.99 3.46,3.29 6.68,6.83 10.03,10.23 4.31,4.39 8.77,8.47 13.54,12.35 22.02,17.91 49.08,28.09 72.86,43.48 16.44,10.63 31.22,22.93 46.7,34.82 27.65,21.23 51.35,33.99 83,40.97 -2.49,-2.51 -5.02,-4.99 -7.54,-7.45 -5.24,-5.1 -10.58,-10.15 -15.65,-15.42l-173.44 -167.37 -1.82 1.64c-13.27,11.95 -31.29,-4.54 -49.03,4.88 -6.11,3.24 -8.7,6.49 -11.84,12.45 -1.66,3.15 -3.13,5.89 -4.83,8.43zm54.86 -39.62l-7.55 -7.29 -0.11 -0.12c-4.3,-4.56 -9.19,-8.86 -13.91,-12.98 -6.18,-5.39 -12.46,-10.67 -18.72,-15.96 -9.05,-7.65 -18.3,-15.37 -26.85,-23.57l-61.98 -52.83c-25.96,-22.13 -53.03,-43.07 -79.32,-64.83 -15.53,-12.85 -30.91,-25.97 -45.65,-39.73 -13.3,-12.4 -26.4,-25.53 -37.86,-39.65 -11.52,-14.18 -24.04,-27.5 -35.53,-41.72l-36.13 -38.3c-5.79,-5.42 -12.02,-11.26 -18.52,-16.8 1.83,3.08 3.63,6.15 5.31,9.24 9.71,17.76 18.76,35.67 27.08,54.12 8.53,18.9 16.42,38.14 24.52,57.23 11.83,27.9 27.13,51.56 44.59,76.13 13.11,18.45 26.36,36.55 38.07,55.97 10.58,17.53 20.12,35.91 31.63,52.83 18.15,26.68 38.6,44.26 67.62,58.58 10.41,5.13 21.03,10.14 31.83,14.43 6.53,2.59 13.54,5.14 20.43,6.58 5.09,1.07 11.72,2.07 16.07,-1.55 3.51,-2.93 7.05,-9.05 10.11,-12.76 6.39,-7.75 13.86,-12.64 23.4,-15.82 12.81,-4.27 27.92,-4.16 41.46,-1.2zm1572.97 51.7c-18.94,-11.12 -44.2,-21.03 -58.89,-26.44 -25.4,-9.36 -49.08,-20.55 -72.37,-34.31 -16.26,-9.6 -31.99,-20.45 -48.57,-29.43 -15.34,-8.3 -30.4,-14.02 -47.51,-17.55 -36.13,-7.46 -74.63,-3.31 -110.26,4.95 -23.15,5.37 -46.02,12.85 -68.15,21.5 -35.88,14.02 -72.78,32.11 -104.9,53.46 -14.15,9.4 -28.5,18.47 -42.65,27.86 -10.29,6.83 -20.46,13.9 -29.79,22.01 -18.53,16.1 -32.84,36.39 -45.77,57.21 12.99,-2.82 25.91,-7.96 37.57,-13.27 19.61,-8.93 38.54,-19.7 57.41,-30.1 32.34,-17.81 73.48,-40.64 110.92,-42.5 15.07,-0.75 29.6,0.55 44.58,1.77 17.19,1.39 33.01,2.01 50.15,-0.91 28.31,-4.84 55.36,-14.84 83.84,-19.52 61.39,-10.1 127.02,-2.33 187.31,11.25 13.49,3.04 26.98,6.81 40.45,10.08 2.87,0.7 9.49,2.34 16.63,3.94zm-1103.42 -216.03c-1.22,8.49 -2.53,16.96 -3.9,25.43 -1.96,12.12 -4.07,24.23 -5.89,36.37 -5.17,34.38 -6.56,67.44 -6.56,102.19 0,32.51 1.32,65.25 3.47,97.68 2.21,33.23 5.21,67.42 10.9,100.23 4.81,27.76 13.84,52.24 28.01,76.39l34.98 56.71c11.79,-23.28 17.96,-70.92 17.96,-91.42 0,-20.32 -2.42,-38.64 -5.61,-58.59 -2.78,-17.41 -5.02,-33.97 -5.41,-51.66l-0 -0.23 3.1 -70.58c1.71,-63.7 -31.92,-127.9 -56.37,-185.11l-0.08 -0.19 -14.61 -37.24zm460.22 318.87c19.77,6.13 65.71,10.04 78.82,11.09 16.8,1.35 33.64,2.38 50.47,3.11 11.54,0.5 23.33,0.99 34.89,0.83 113.65,-1.49 215.37,-23.14 319.82,-67.53 18.58,-7.9 37.18,-15.84 56.19,-22.67 22.6,-8.11 44.72,-14.04 67.7,-17.85 -2.3,-0.57 -4.54,-1.11 -6.65,-1.62 -16.88,-4.03 -34.07,-7.27 -51.19,-10.11 -15.58,-2.59 -31.25,-4.86 -46.94,-6.72 -11.87,-1.4 -24.08,-2.71 -36.03,-3.13 -27.11,-0.94 -53.03,1.07 -79.57,6.59 -20.1,4.18 -39.62,10.3 -59.62,14.69 -12.06,2.64 -24.1,4.49 -36.45,5.04 -2.78,0.12 -5.56,0.17 -8.35,0.15 -28.59,-0.18 -60,-7.87 -87.76,-0.33 -16.53,4.49 -35.39,15.09 -50.46,23.29 -21.63,11.77 -43.02,23.86 -65.39,34.2 -6.36,2.94 -12.8,5.74 -19.31,8.34 -12.46,4.97 -24.75,8.74 -37.56,12.58 -6.72,2.01 -14.85,4.33 -20.61,8.44 -0.7,0.5 -1.37,1.03 -2.01,1.59zm-1247.09 219.58c5.29,-3.57 10.43,-6.42 16.88,-8.98 42.37,-16.82 80.87,-7.97 124.18,-3.04 31.47,3.59 57.63,-0.11 88.26,-6.53 25.56,-5.36 49.37,-10.5 75.68,-11.28 17.35,-0.51 34.47,-0.1 51.8,0.35 12.72,0.33 25.65,0.65 38.32,-0.77 24.23,-2.71 44.35,-12.15 64.97,-24.77 16.56,-10.14 32.58,-21.73 49.64,-30.94 24.2,-13.07 47.45,-18.54 73.8,-20.18 -16.95,-20.99 -50.62,-32.08 -74.35,-39.06 -13.05,-3.84 -26.22,-7.19 -39.34,-10.76 -11.65,-3.16 -23.58,-6.5 -34.8,-10.94 -26.92,-10.67 -56.08,-22.25 -84.94,-26.02 -14.86,-1.94 -29.61,-1.84 -44.53,-0.8 -20.76,1.46 -41.68,4.49 -62.26,7.53 -33.19,4.9 -50.46,10.34 -74.3,34.8 -21.33,21.88 -44.18,41.24 -70.68,56.58 -8.71,5.04 -17.61,9.51 -26.63,13.96 -7.42,3.66 -14.9,7.31 -21.97,11.62 -5.98,3.64 -11.51,7.72 -16.63,12.5 -13.93,13.03 -27.46,35.75 -33.07,56.72zm1946.36 -36.1c-6.96,0.4 -13.9,0.75 -20.94,0.75 0.25,0.25 0.5,0.51 0.84,0.76l5.55 4.24c4.65,-1.59 9.25,-3.39 13.79,-5.4 0.25,-0.11 0.51,-0.23 0.76,-0.34zm-56.24 -2.28c-10.98,-1.71 -21.82,-4.05 -32.72,-6.95 -14.09,-3.75 -27.95,-8.36 -42.05,-12.02 -25.19,-6.55 -46.49,-7.84 -70.96,-4.15 0.37,0.18 0.74,0.38 1.1,0.59l6.22 3.61 -3.9 6.04c-1.7,2.64 -3.44,5.1 -6.21,6.71 -2.14,1.25 -4.44,1.7 -6.8,2.3 -3.59,0.92 -7.04,2.1 -10.49,3.46 -10.53,4.17 -27.35,12.95 -38.88,22.21 28.71,2.8 57.09,2.88 85.97,-0.69 25.42,-3.14 49.72,-9.09 74.72,-14.24 14.71,-3.03 29.22,-5.5 44,-6.87zm-182.37 -15.76c-10.31,2.2 -20.64,4.35 -31.01,6.18 -23.63,4.18 -46.43,6.06 -70.44,6.06 -43.7,0.01 -90.76,-4.02 -133.42,6.45 -22.78,5.59 -41.24,15.27 -61.35,26.89 -11.35,6.56 -22.59,13.17 -34.42,18.86 -16.49,7.94 -33.97,12.93 -50.74,20.11 -44.53,19.07 -125.9,85.86 -150.49,127.61 -7.43,12.61 -12.08,26.81 -13.04,41.38 11.31,-5.37 20.86,-12.81 30.02,-21.95 11.7,-11.67 21.84,-24.87 33.3,-36.8 13.53,-14.07 27.85,-25.3 45.86,-33.17 26.16,-11.43 54.61,-16.49 80.86,-27.38 23.78,-9.87 44.22,-24.79 65.93,-38.28 25.04,-15.55 48.75,-23.48 77.56,-28.6 14.3,-2.54 28.72,-4.36 43.02,-6.92 16.2,-2.9 31.86,-6.73 47.4,-12.19 14.86,-5.22 28.56,-9.73 44.35,-11.52 3.88,-0.44 8.15,-0.31 11.93,-0.94 16.67,-2.77 41.9,-23.43 64.68,-35.8zm106.08 49.97c-7.29,1.44 -14.59,2.85 -21.91,4.14 -31.1,5.5 -60.74,8.22 -92.33,5.43 -18.31,-1.62 -38.02,-4.15 -56.37,-3.19 -16.9,0.88 -32.49,5.13 -48.4,10.7 -16.48,5.78 -32.52,10.02 -49.74,12.88 -17.68,2.94 -35.53,4.87 -53.25,7.79 -17.93,2.95 -32.86,8.42 -48.56,17.46 -15.59,8.98 -30.17,19.69 -45.8,28.78 -23.41,13.62 -47.66,23.58 -73.58,31.39 -18.49,5.57 -38.65,12.32 -55.54,21.83 -10.33,5.82 -18.36,12.25 -26.26,21.05 -5.78,6.44 -11.07,13.35 -16.71,19.92 -7.87,9.17 -16.2,17.55 -25.36,25.45 -0.84,0.73 -1.76,1.46 -2.73,2.21 10.42,-1.11 19.35,-4.88 27.18,-14.92 17.35,-22.24 27.88,-19.82 54.11,-22.04 4.69,-0.4 10.12,-1.39 13.86,-4.47 2.74,-2.26 4.57,-5.64 6.53,-8.56 5.57,-8.31 11.88,-12.21 21.87,-13.68 16.67,-2.44 40.63,3.02 56.75,7.01 28.25,6.99 93.14,6.03 120.97,-2.34 17.03,-5.12 28.19,-15.96 43.87,-23.07 9.1,-4.12 18.31,-6.52 28.18,-7.9 8.18,-1.15 16.44,-1.6 24.66,-2.27 9,-0.74 17.82,-1.78 26.67,-3.68 26.66,-5.72 50.91,-18.56 73.38,-33.69 27.1,-18.24 52.32,-38.86 79.88,-56.51 12.75,-8.17 25.52,-14.64 38.63,-19.74zm-1126.22 62.41c-32.92,-26.29 -96.83,-7.49 -130.41,6.3 -42.08,17.27 -77.02,39.2 -103.7,76.53 -18.11,25.33 -26.29,50.37 -24.47,81.44 0.68,11.61 2.64,22.96 4.26,34.45 1.52,10.81 2.75,21.94 1.35,32.84 -1.28,9.98 -3.62,19.74 -6.64,29.32 -5.89,18.64 -14.23,36.39 -21.55,54.48 -7.72,19.09 -13.95,37.97 -16.55,58.49l-0.02 0.16 -0.03 0.16c-4.33,24.88 -3.15,52.44 0.99,77.27 3.31,19.85 9.72,43.8 20.02,64.47 3.31,-9.05 7.79,-17.65 11.04,-26.74 5.74,-16.07 10.3,-33.93 14.31,-50.52 2.6,-10.77 5.03,-21.67 6.91,-32.6 1.08,-6.28 2.66,-15.36 2.2,-21.7l-0.21 -2.88 1.88 -2.12c2.83,-3.65 7.26,-24.2 8.38,-29.33 1.31,-5.96 2.55,-11.93 3.85,-17.88 0.97,-4.42 1.95,-9.09 3.3,-13.4 6.21,-19.75 14.08,-38.69 24.66,-56.51 8.27,-13.93 17.81,-26.4 28.07,-38.89 13.7,-16.7 26.81,-32.29 38.13,-50.84 20.96,-34.34 25.27,-76.62 46.8,-110.73 19.89,-31.53 53.72,-48.48 87.43,-61.79zm-268.47 530.4c2.31,3.51 4.76,6.83 7.36,9.93l1.4 -4.62c1.05,-4.98 2.26,-9.9 3.63,-14.77 -3.6,4.67 -7.71,8.08 -12.39,9.47zm31.43 -56.81c14.41,-27.22 33.8,-51.84 56.45,-72.86l0.21 -0.19 42.15 -33.13 0.8 -0.35c3.53,-1.55 7.33,-4 10.57,-6.08 5.01,-3.21 9.92,-6.58 14.8,-9.98 3.49,-2.43 6.96,-4.9 10.44,-7.37l-4.91 0.66 2.85 -10.06c1.1,-3.88 2.18,-8.93 5.79,-10.74 0.19,-0.33 0.36,-0.66 0.51,-0.93 1.7,-3.16 2.89,-6.06 2.49,-9.68 -0.27,-2.41 -0.93,-4.89 -1.34,-7.3 -0.71,-4.11 -0.94,-8.08 -0.69,-12.24 0.78,-13.09 6.06,-27.75 11.41,-40.26 -22.31,-17.05 -30.11,-40.45 -32,-66.29 -7.37,11.01 -15.64,21.4 -23.94,31.71 -10.46,13 -20.89,25.89 -30.29,39.7 -24.82,36.48 -38.2,73.74 -44.19,117.48l-0.06 0.43 -0.11 0.42c-7.24,26.93 -10.25,54.87 -17.18,81.93 -0.99,3.88 -2.21,9.17 -3.73,15.14zm163.32 -148.99c10.54,-7.14 21.18,-14.59 31.25,-22.55l-1.25 -3.95c-0.91,-2.9 -1.51,-5.89 -1.48,-8.94 0.01,-1.09 0.18,-2.12 0.27,-3.15 -1.84,-2.01 -7.58,-5.95 -9.23,-7.12 -4.69,-3.31 -9.17,-6.94 -13.9,-10.18 -3.95,11.19 -6.33,18.46 -5.11,33.3 0.67,8.2 0.98,16.01 -0.56,22.59zm52.52 -41.3c0.92,-0.92 1.82,-1.84 2.71,-2.77 18.22,-19.03 33.09,-42.9 47.14,-65.08 9.01,-14.22 18.3,-26.78 30.8,-38.13 9.32,-8.47 19.64,-16.13 29.33,-24.22l20.66 -19.18c31.16,-28.08 32.22,-70.34 5.91,-102.3 -11.95,-14.52 -30.26,-23.51 -48.57,-26.7 -25.61,-4.46 -38.36,4.34 -60.99,13.26 -38.27,15.08 -64.94,31.68 -82.51,69.98 -14.32,31.23 -27.51,90.02 -13.06,122.47 4.67,10.49 13.2,19.96 21.45,27.81 10.03,9.54 20.96,17.76 31.47,26.7 5.07,4.31 12.98,10.89 15.65,18.15zm1010.32 66.79c-4.03,-9.48 -8.88,-18.98 -14.39,-28.3l-1.95 0.96c-3.88,1.91 -7.94,3.23 -12.3,2.3 -4.45,-0.95 -7.93,-4.05 -11.41,-6.77 -5.21,-4.08 -10.38,-7.42 -16.27,-10.46 -9.56,-4.93 -25.07,-12.97 -36.02,-12.12l-2.32 0.18 -1.95 -1.27c-0.28,-0.19 -0.65,-0.36 -0.96,-0.51 -3.07,-1.42 -6.24,-2.62 -9.47,-3.61 -9.32,-2.87 -19.21,-4.16 -28.87,-5.35 -12.26,-1.52 -24.33,-2.96 -36.45,-5.45 -38.27,-7.85 -71.93,-24.6 -104.22,-46.3 -24.52,-16.48 -46.28,-26.4 -76.14,-25.06 -10.71,0.48 -21.4,1.97 -32.1,2.79 -13.76,1.05 -27.07,1 -40.79,-0.64 -1.38,-0.16 -2.72,-0.35 -4.01,-0.55 1.02,0.35 1.98,0.69 2.84,1.01 25.01,9.33 45.45,20.27 66.52,36.6 8.35,6.47 16.4,13.33 24.56,20.04 9.57,7.87 19.26,15.47 29.35,22.68 28.36,20.24 58.77,31.45 93.69,22.41 10.39,-2.69 20.7,-5.61 31.07,-8.36 7.7,-2.04 15.45,-3.95 23.34,-5.06 20.61,-2.92 42.52,0.15 62.96,3.16l0.94 0.14 0.87 0.39c9.09,4.09 18.38,7.25 27.74,10.63 10.93,3.95 21.09,8.18 31.16,14.05 7.96,4.64 15.77,10.07 23.46,15.17 3.69,2.45 7.38,4.9 11.12,7.3zm-29.89 -51.69c-18.67,-25.33 -41.71,-47.78 -65.58,-62.64 -1.37,-0.85 -2.61,-1.69 -3.87,-2.6 -0.9,-0.05 -1.78,-0.14 -2.71,-0.25l-2.92 -0.36 -1.75 -2.36c-4.31,-5.82 -10.46,-7.16 -16.66,-10.37 -30.03,-15.5 -56.64,-22.69 -90.21,-24.75 -25.4,-1.55 -50.41,-0.98 -75.87,-3.61 -20.42,-2.11 -39.44,-7.55 -58.95,-13.61 -16.48,-5.12 -33.49,-10.73 -50.71,-12.55 -16.47,-1.74 -31.59,0.28 -46.89,6.66l-9.2 4.99c8.75,6.42 15.47,11.4 28.14,14.29 20.14,4.59 37.95,2.88 58.16,1.01 15.33,-1.42 29.93,-2.34 45.27,-0.16 19.65,2.79 37.44,10.19 54.32,20.48 10.14,6.18 19.77,12.99 29.7,19.46 14.46,9.42 27.99,16.34 44.49,21.69 31.14,10.09 65.94,13.82 98.2,19.6l0.38 0.07 0.37 0.11c20.45,6.1 46.79,12.28 66.28,24.91z" class="fil0"></path></g></svg>
  </div>
</div>
<style>
/* From Uiverse.io by MuhammadHasann - Tags: card */
.card {
  position: relative;
  background: #a68b8a;
  width: 190px;
  height: 265px;
  cursor: pointer;
  transition: all .3 ease;
  overflow: visible;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, .3);
}

.product {
  content: "";
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 150px;
  height: 150px;
  background-color: #faf3e8;
  z-index: 1;
}

.product p {
  font-size: 17px;
  text-align: center;
  color: #181818;
  line-height: 150px;
}

.shine {
  position: relative;
  top: 0;
  left: 0;
  width: 190px;
  height: 265px;
  overflow: hidden;
}

.shine-effect {
  position: absolute;
  top: -15%;
  left: 150%;
  width: 25px;
  height: 400px;
  background-color: #ffffff2a;
  box-shadow: 0 0 15px 2px #ffffff42;
  transform: rotate(25deg);
  transition: all 1s cubic-bezier(0.78, 0.02, 0.5, 0.77);
  z-index: 5;
}

.pattern-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 125px;
  height: auto;
  z-index: 2;
}

.pattern-2 {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 200px;
  height: auto;
  z-index: 2;
}

.tree {
  position: absolute;
  bottom: 1%;
  right: -2%;
  width: 100px;
  height: auto;
  transform-origin: 100% 0;
  transform: rotate(-15deg);
  z-index: 3;
}

.tape-1 {
  position: absolute;
  top: -20%;
  left: 2%;
  width: 35px;
  height: auto;
  filter: drop-shadow(1px 3px 3px #18181870);
  z-index: 6;
}

.tape-2 {
  position: absolute;
  top: -25%;
  right: 2%;
  width: 35px;
  height: auto;
  filter: drop-shadow(1px 3px 3px #18181870);
  z-index: 6;
}

.card:hover {
  transform: scale(1.02);
}

.card:hover .tape-1 {
  transform: scale(1);
}

.card:hover .tape-2 {
  transform: scale(1);
}

.card:hover .shine-effect {
  left: -100%;
}

.card:active {
  transform: scale(1.02) translate(0, 5%);
}

.card:active .tape-1 {
  transform-origin: 0 100%;
  transform: scaleY(1.1);
}

.card:active .tape-2 {
  transform-origin: 0 100%;
  transform: scaleY(1.1);
}

.fil-tape-10 {
  fill: #A99473
}

.fil-tape-11 {
  fill: #BBAA88;
  fill-rule: nonzero
}

.fil-tape-20 {
  fill: #A99473
}

.fil-tape-21 {
  fill: #BBAA88;
  fill-rule: nonzero
}

.fil-pattern-1 {
  fill: #f3dfde
}

.fil-pattern-2 {
  fill: #333333;
  fill-rule: nonzero
}

.fil0 {
  fill: #333333
}
</style>


================================================
FILE: Cards/MuhammadHasann_smooth-impala-44.html
================================================
<div class="card">
  
  <div class="image">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 116.83 182.61" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" class="img-product"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M99.33 20.55c-4.24,-1.91 -3.3,-0.4 -8.3,-3.82 -4.06,-2.78 -12.82,-7.22 -17.68,-9.3 -0.94,-0.4 -2.53,-1.19 -4.13,-1.73l-6.69 -1.8c-0.99,-0.23 -1.3,-0.65 -2.22,-0.84 -2.53,-0.53 -3.82,-0.46 -6.69,-1.8 -1.49,-0.7 -2.01,-1.69 -3.83,-1.04 -0.87,0.31 -1.19,0.64 -1.58,1.41 -2.44,4.98 -7.2,7.7 -11.26,11.02l-2.61 1.83c-3.93,2.6 -9.38,4.53 -13.7,6.73 -2.89,1.47 -0.86,0.97 -4.02,0.7 -3.13,-0.27 -6.21,3.31 -8.33,5.29 -1.04,0.97 -0.92,0.53 -1.85,1.4 -0.47,0.44 -1.08,1.33 -1.33,1.49 -1.07,0.68 -4.09,2.28 -4.75,3.1 -1.3,1.63 1.31,5.1 2.23,7.24 0.64,1.49 1.76,3.02 3.13,4.07 0.74,0.56 1.15,1.74 1.7,2.61 -4.07,2.78 -3.12,3.46 -2.09,4.55 2.17,2.3 3.66,4.97 5.89,7.28 4.1,4.26 1.12,4.68 2.64,8.38 0.55,1.33 0.85,1.09 0.9,2.64 0.11,3.4 -2.12,4.67 -1.04,9.36 1.66,7.23 0.4,2.11 0.06,5.96 -0.07,0.84 0.09,2.01 0.28,2.8 0.37,1.51 0.52,1.49 1.31,2.75 -3.14,5.43 0.18,6.41 -0.44,8.98 -0.6,2.51 -0.95,3.64 -0.11,6.01 0.32,0.9 1.2,2.1 1.3,2.75 0.18,1.1 -0.42,1.33 -0.22,2.94 0.25,2.12 -0.18,4.23 0.11,5.95 0.29,1.75 0.42,0.99 0.2,3.05 -0.34,3.15 -1.45,5.88 -0.63,9.03 0.31,1.2 -2.36,8.82 -2.7,10.03 -1.79,6.36 -5.05,13.1 -6.2,19.61 -0.61,3.43 -2.34,1.66 -1.11,6.28 0.92,3.47 4.04,4.61 5.91,7.28 0.79,1.12 0.41,1.28 1.7,2.65l2.35 2.25c1.77,1.48 2.49,2.9 5.16,4.13l2.42 0.76c2.87,0.45 5.92,-1.16 8.06,-2.98l5.48 -5.18c2.01,-2 3.71,-4.85 5.66,-6.98 2.12,-2.32 9.8,-15.54 11.11,-18.32 0.6,-1.26 1.15,-1.61 1.93,-2.45 1.29,-1.38 0.99,-2.19 1.76,-3.35 0.69,-1.05 1.38,-1.26 2.33,-2.87 2.62,-4.45 24.66,-42 26.3,-45.85 0.9,-2.11 3.13,-4.62 4.12,-6.85 2.49,-5.61 5.17,-12.08 8.85,-17.34 2.18,-3.12 8.43,-13.52 8.19,-15.8 0.86,-0.42 7.8,-14 8.75,-15.88 2.13,-4.22 1.53,-9.85 -2.88,-12.09 -4.39,-2.47 -8.77,-3.95 -13.43,-6.05z" class="fil-shoes2"></path></g></svg>
  </div>
  <div class="text">
    <span>Shoes Force</span>
    <p>$100</p>
  </div>
</div>
<style>
/* From Uiverse.io by MuhammadHasann - Tags: card */
.card {
  position: relative;
  background: #fff;
  width: 190px;
  height: 265px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 120ms;
  overflow: hidden;
  box-shadow: 0px 1px 13px rgba(0,0,0,0.1);
}

.card:active {
  transform: scale(.95);
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 0px 25px 5px rgba(255, 255, 255, .5);
  z-index: 1;
}

.card::after {
  content: "Add to Cart";
  position: absolute;
  bottom: -50%;
  left: 0;
  padding-left: 15px;
  background: #181818;
  width: 100%;
  height: 60px;
  color: #fff;
  line-height: 50px;
  text-transform: uppercase;
  z-index: 2;
  transition: all .2s ease-in;
}

.card:hover::after {
  bottom: 0;
}

.card:active::after {
  content: "Adding !";
  height: 65px;
}

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: auto;
  filter: drop-shadow(3px 3px 5px #18181815);
  transform: translate(-50%, -50%);
  animation: shoes 1s ease infinite alternate;
  transition: all .5s ease-in;
}

@keyframes shoes {
  from {
    top: 48%;
  }

  to {
    top: 52%;
  }
}

.card:hover .image {
  /* top: 20%;
  left: 30%; */
  width: 220px;
  height: auto;
  animation: none;
  transform: rotate(15deg) translate(-35%, -25%);
}

.text {
  position: absolute;
  top: 15%;
  left: -80%;
  color: #181818;
  transition: all .3s ease-in;
}

.text span {
  font-size: 25px;
  font-weight: 400;
  margin-bottom: 5px;
}

.text p {
  font-size: 18px;
  font-weight: bold;
}

.card:hover .text {
  top: 15%;
  left: 5%;
}

.fil-shoes2 {
  fill: #a59573
}
</style>


================================================
FILE: Cards/Na3ar-17_afraid-bulldog-66.html
================================================
<div class="card">
  <div class="deg">
    <span>Rain</span>
    <p class="number">
      21
      <span>0</span>
    </p>
  </div>
  <div class="date">
    <p>Monday,22 October Saigon</p>
  </div>
  <div class="rain">
    <div class="block">
      <div class="drop"></div>
      <div class="drop"></div>
    </div>
    <div class="block">
      <div class="drop"></div>
      <div class="drop"></div>
    </div>
    <div class="block">
      <div class="drop"></div>
      <div class="drop"></div>
    </div>
    <div class="block">
      <div class="drop"></div>
      <div class="drop"></div>
    </div>
    <div class="block">
      <div class="drop"></div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Na3ar-17  - Website: https://dribbble.com/shots/16188207-Weather-Card-UI - Tags: animation, card, cool card, card hover */
.card {
  background-color: #232732;
  border-radius: 12px;
  min-width: 200px;
  display: grid;
  grid-template-columns: 100px 1fr 1fr;
  padding: 10px 14px 0px 20px;
  color: #fff;
  align-items: center;
  gap: 20px;
  width: 450px;
  position: relative;
  height: 105px;
  transition: all 0.4s ease-in-out;
}

.card .deg span {
  color: #adb0b8;
}
.card .deg .number {
  font-size: 45px;
  position: relative;
}

.card .deg .number span {
  position: absolute;
  font-size: 20px;
  color: #fff;
}

.card .date p {
  font-size: 17px;
  max-width: 220px;
  color: #adb0b8;
}

.card .rain {
  --bg1: #494b57;
  --bg2: #bfc0c0;
  position: absolute;
  right: 5px;
  top: -3px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 150px;
  transform: rotate(-56deg);
}

.card .rain .block {
  display: grid;
  gap: 5px;
  --start-position: 0px;
  --mid-position: 10px;
  --end-position: 0;
}

.card .rain .block .drop {
  height: 10px;
  border-radius: 20px;
  background-color: var(--bg2);
}

.card .rain .block:first-child {
  grid-template-columns: 40px 1fr;
  margin-left: 60px;
}

.card .rain .block:nth-child(2) {
  grid-template-columns: 60px 1fr;
  margin-right: 40px;
}

.card .rain .block:nth-child(3) {
  grid-template-columns: 30px 1fr;
  margin-left: 40px;
}
.card .rain .block:nth-child(4) {
  grid-template-columns: 20px 1fr;
  margin-left: 20px;
}

.card .rain .block:last-child {
  width: 30px;
  margin-left: 70px;
}

.card .rain .block:first-child .drop:first-child {
  background-color: var(--bg2);
}
.card .rain .block:first-child .drop:last-child {
  -webkit-box-shadow: 21px 8px 58px 2px rgba(86, 91, 91, 1);
  -moz-box-shadow: 21px 8px 58px 2px rgba(86, 91, 91, 1);
  box-shadow: 21px 8px 58px 2px rgba(86, 91, 91, 1);
}

.card .rain .block:nth-child(2) .drop:last-child {
  background-color: var(--bg1);
}

.card .rain .block:nth-child(3) .drop:first-child {
  background-color: var(--bg1);
}

.card .rain .block:nth-child(3) .drop:last-child {
  background-color: var(--bg2);
}

.card .rain .block:nth-child(4) .drop:last-child {
  background-color: var(--bg1);
}

.card:hover .rain .block:first-child .drop:first-child {
  animation: move 3s ease infinite;
}
.card:hover .rain .block:first-child .drop:last-child {
  --mid-position: 9px;
  animation: move 3s ease infinite 0.2s;
}

.card:hover .rain .block:nth-child(2) .drop:first-child {
  --mid-position: 13px;
  --start-position: 0px;
  --end-position: 0;
  animation: move 3s ease infinite 0.3s;
}
.card:hover .rain .block:nth-child(2) .drop:last-child {
  --mid-position: 10px;
  --start-position: 0px;
  --end-position: 0;
  animation: move 3.2s ease infinite 0.4s;
}
.card:hover .rain .block:nth-child(3) .drop:last-child {
  --mid-position: 15px;
  --start-position: 0px;
  --end-position: 0;
  animation: move 3.2s ease infinite 0.2s;
}
.card:hover .rain .block:nth-child(3) .drop:first-child {
  --mid-position: 13px;
  --start-position: 0px;
  --end-position: 0;
  animation: move 3s ease infinite 0.2s;
}
.card:hover .rain .block:nth-child(4) .drop:first-child {
  --mid-position: 20px;
  --start-position: 0px;
  --end-position: 0;
  animation: move 3s ease infinite 0.2s;
}
.card:hover .rain .block:nth-child(4) .drop:last-child {
  --mid-position: 25px;
  --start-position: 0px;
  --end-position: 0;
  animation: move 3s ease infinite 0.3s;
}

.card:hover .rain .block:last-child .drop:last-child {
  --mid-position: 30px;
  --start-position: 0px;
  --end-position: 0;
  animation: move 3s ease infinite 0.3s;
}

@keyframes move {
  0% {
    transform: translateX(var(--start-position, 0px));
  }
  50% {
    transform: translateX(var(--mid-position, 10px));
  }
  100% {
    transform: translateX(var(--end-position, 0));
  }
}

</style>
    

================================================
FILE: Cards/Na3ar-17_bitter-moth-75.html
================================================
<div class="card">
  <div class="no-image">
    <svg
      class="icon"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
    >
      <path
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="1.1"
        d="m3 16 5-7 6 6.5m6.5 2.5L16 13l-4.286 6M14 10h.01M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z"
      ></path>
    </svg>
  </div>
  <div class="content">
    <p class="name">UIVERSE</p>
    <p class="time">03.04.2024 - 04.04.2024</p>
  </div>
</div>

<style>
/* From Uiverse.io by Na3ar-17  - Tags: simple, card, html, css */
.card {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  width: 285px;
  padding: 8px;
  background-color: #282727;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  aspect-ratio: 16/12;
  transition: all 0.3s ease;
}

.card .no-image {
  border: 2px dashed #373737;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  aspect-ratio: 16/8;
}

.card .no-image .icon {
  width: 60px;
  color: #373737;
}

.card .image {
  width: 100%;
  aspect-ratio: 16/8;
}

.card .image .picture {
  border-radius: 8px;
  width: inherit;
  aspect-ratio: 16/8;
}

.card .content {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  padding-left: 4px;
}

.card .content .name {
  font-size: 1.5rem;
  color: #ffffff;
}

.card .content .time {
  padding-top: 12px;
  font-size: 0.875rem;
  color: #c5c5c5;
}

.card:hover {
  -webkit-box-shadow: 0px 0px 15px -8px rgba(66, 68, 90, 1);
  -moz-box-shadow: 0px 0px 15px -8px rgba(66, 68, 90, 1);
  box-shadow: 0px 0px 15px -8px rgba(66, 68, 90, 1);
}

</style>
    

================================================
FILE: Cards/Na3ar-17_curvy-bird-92.html
================================================
<div class="container">
  <div class="card">
    <div class="header">
      <p class="title">Terminal</p>
      <span class="copy">
        <svg
          viewBox="0 0 24 24"
          fill="currentColor"
          height="24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          class="w-[19px] h-[19px] text-gray-800 dark:text-white"
        >
          <path
            clip-rule="evenodd"
            d="M18 3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1V9a4 4 0 0 0-4-4h-3a1.99 1.99 0 0 0-1 .267V5a2 2 0 0 1 2-2h7Z"
            fill-rule="evenodd"
          ></path>
          <path
            clip-rule="evenodd"
            d="M8 7.054V11H4.2a2 2 0 0 1 .281-.432l2.46-2.87A2 2 0 0 1 8 7.054ZM10 7v4a2 2 0 0 1-2 2H4v6a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3Z"
            fill-rule="evenodd"
          ></path>
        </svg>
      </span>
    </div>

    <div class="footer">
      <div class="code">
        <span class="icon">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            height="13"
            width="13"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            class="w-[19px] h-[19px] text-gray-800 dark:text-white"
          >
            <path
              d="m9 5 7 7-7 7"
              stroke-width="3"
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke="currentColor"
            ></path>
          </svg>
        </span>
        <p class="text">npm install -D tailwindcss</p>
      </div>
      <div class="code">
        <span class="icon">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            height="13"
            width="13"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            class="w-[19px] h-[19px] text-gray-800 dark:text-white"
          >
            <path
              d="m9 5 7 7-7 7"
              stroke-width="3"
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke="currentColor"
            ></path>
          </svg>
        </span>
        <p class="text">npx tailwindcss init</p>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Na3ar-17  - Tags: simple, tailwind, tailwindcss */
.container * {
  padding: 0;
  margin: 0;
}

.card {
  width: 363px;
  height: 130px;
  background-color: #1e293b;
  border-radius: 10px;
  display: grid;
  grid-template-rows: 40px 1fr;
}

.card .header {
  display: flex;
  align-items: center;
  position: relative;
}

.card .header .title {
  color: #7dd3fc;
  font-size: 13px;
  padding: 2px 12px;
}

.card .header .copy {
  position: absolute;
  top: 61%;
  right: 1px;
  transform: translate(-50%, -50%);
  color: rgb(100, 116, 139);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100;
}

.card .header .copy:hover {
  color: rgb(148, 163, 184);
}

.card .header::before {
  content: "";
  position: absolute;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border: 1px solid #64748b4d;
  right: 1px;
  bottom: 0;
  background-color: #33415580;
  width: 282px;
  height: 33px;
  z-index: 100;
}

.card .header::after {
  content: "";
  position: absolute;
  width: 22%;
  height: 1px;
  background-color: #7dd3fc;
  bottom: 0;
}

.card .footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding-left: 10px;
}

.card .footer .code {
  display: flex;
  align-items: center;
}

.card .footer .code .icon {
  color: rgb(244, 114, 182);
  padding-top: 3px;
}

.card .footer .code .text {
  padding-left: 3px;
  color: #f8fafc;
}

</style>
    

================================================
FILE: Cards/Na3ar-17_terrible-gecko-91.html
================================================
<div class="card">
  <ul class="list">
    <li class="element">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="25"
        height="25"
        viewBox="0 0 24 24"
        fill="none"
        stroke="#7e8590"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-pencil"
      >
        <path
          d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
        ></path>
        <path d="m15 5 4 4"></path>
      </svg>
      <p class="label">Rename</p>
    </li>
    <li class="element">
      <svg
        class="lucide lucide-user-round-plus"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="2"
        stroke="#7e8590"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M2 21a8 8 0 0 1 13.292-6"></path>
        <circle r="5" cy="8" cx="10"></circle>
        <path d="M19 16v6"></path>
        <path d="M22 19h-6"></path>
      </svg>
      <p class="label">Add Member</p>
    </li>
  </ul>
  <div class="separator"></div>
  <ul class="list">
    <li class="element">
      <svg
        class="lucide lucide-settings"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="2"
        stroke="#7e8590"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
        ></path>
        <circle r="3" cy="12" cx="12"></circle>
      </svg>
      <p class="label">Settings</p>
    </li>
    <li class="element delete">
      <svg
        class="lucide lucide-trash-2"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="2"
        stroke="#7e8590"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M3 6h18"></path>
        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
        <line y2="17" y1="11" x2="10" x1="10"></line>
        <line y2="17" y1="11" x2="14" x1="14"></line>
      </svg>
      <p class="label">Delete</p>
    </li>
  </ul>
  <div class="separator"></div>
  <ul class="list">
    <li class="element">
      <svg
        class="lucide lucide-users-round"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="2"
        stroke="#7e8590"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M18 21a8 8 0 0 0-16 0"></path>
        <circle r="5" cy="8" cx="10"></circle>
        <path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"></path>
      </svg>
      <p class="label">Team Access</p>
    </li>
  </ul>
</div>

<style>
/* From Uiverse.io by Na3ar-17  - Tags: card */
.card {
  width: 200px;
  /* background-color: rgba(36, 40, 50, 1);
background-image: linear-gradient(135deg, rgba(36, 40, 50, 1) 0%, rgba(36, 40, 50, 1) 40%, rgba(37, 28, 40, 1) 100%); */

  background-color: rgba(36, 40, 50, 1);
  background-image: linear-gradient(
    139deg,
    rgba(36, 40, 50, 1) 0%,
    rgba(36, 40, 50, 1) 0%,
    rgba(37, 28, 40, 1) 100%
  );

  border-radius: 10px;
  padding: 15px 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card .separator {
  border-top: 1.5px solid #42434a;
}

.card .list {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0px 10px;
}

.card .list .element {
  display: flex;
  align-items: center;
  color: #7e8590;
  gap: 10px;
  transition: all 0.3s ease-out;
  padding: 4px 7px;
  border-radius: 6px;
  cursor: pointer;
}

.card .list .element svg {
  width: 19px;
  height: 19px;
  transition: all 0.3s ease-out;
}

.card .list .element .label {
  font-weight: 600;
}

.card .list .element:hover {
  background-color: #5353ff;
  color: #ffffff;
  transform: translate(1px, -1px);
}
.card .list .delete:hover {
  background-color: #8e2a2a;
}

.card .list .element:active {
  transform: scale(0.99);
}

.card .list:not(:last-child) .element:hover svg {
  stroke: #ffffff;
}

.card .list:last-child svg {
  stroke: #bd89ff;
}
.card .list:last-child .element {
  color: #bd89ff;
}

.card .list:last-child .element:hover {
  background-color: rgba(56, 45, 71, 0.836);
}

</style>
    

================================================
FILE: Cards/Nayzerftn_mighty-goat-69.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by Nayzerftn - Tags: card */
.card {
  height: 350px;
  width: 300px;
  overflow: hidden;
  border: none;
  border-radius: 10px;
  background-image: linear-gradient(to bottom right,darkblue, 180px,purple);
  filter: blur(0.4px);
  box-shadow: -10px 10px 15px black;
  display: flex;
  align-items: center;
  flex-direction: column;
  transition: all 1s linear;
  animation: fly 4s linear infinite alternate;
}

.card::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 800px;
  top: 0;
  z-index: -1;
  background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
  animation: rotate 5s linear infinite;
  transition: all 0.2s linear;
}

.card::after {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: 10px;
  background-image: linear-gradient(to bottom right,darkblue, 180px,purple);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes fly {
  0% {
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(10px);
  }
}

.heading {
  margin-top: 30px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  height: 150px;
  width: auto;
  font-size: 20px;
  font-family: monospace;
  font-weight: bold;
  letter-spacing: 1px;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.item {
  border-radius: 10px;
  height: 100px;
  width: 100px;
  margin-top: 15px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.item--create:hover {
  transition: all 0.3s linear;
  transform: translateY(-10px);
  background-color: rgb(48, 48, 48);
}

.item--inspire:hover {
  transition: all 0.3s linear;
  transform: translateY(-10px);
  background-color: grey;
}

.item--post:hover {
  transition: all 0.3s linear;
  transform: translateY(-10px);
  background-color: purple;
}

.item svg {
  fill: #ffffff;
  height: 26px;
  margin-bottom: 10px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item .item--create {
  border: 1px solid white;
}

.item--create svg {
  animation: spin 2s linear infinite;
}

.item--post svg {
  animation: flying 2s linear infinite alternate;
}

.item--inspire svg {
  animation: flash 2s linear infinite;
}

@keyframes flash {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes flying {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-2px);
  }

  100% {
    transform: translateY(2px);
  }
}

@keyframes spin {
  from {
  }

  to {
    transform: rotate(360deg);
  }
}

button {
  height: 40px;
  width: auto;
  background: transparent;
  border: 2px solid white;
  border-radius: 5px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 10px;
  margin-top: 55px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.5s ease;
  color: white;
  cursor: pointer;
  letter-spacing: 1px;
}

button:hover {
  filter: blur(1px);
  transform: scale(1.1);
}


</style>


================================================
FILE: Cards/NlghtM4re_evil-warthog-61.html
================================================
<div class="container"> 
  <div class="window"> 
    <div class="window-title">
      <p>Console Window</p>
      <div class="window-buttons">
        <div class="window-button fullscreen"></div>
        <div class="window-button reduce"></div>
        <div class="window-button close"></div>
      </div>
    </div>
    <div class="console">
      <pre><code>def main():
  for i in range(100):
    print(f"Add to favorites {i}")
    if favorite = true:
      Favorite()

def Favorite():
  print("thanks")

main()</code></pre>
    </div>
  </div>
</div>


<style>
/* From Uiverse.io by NlghtM4re - Tags: green, card, code, menu */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.window {
  position: absolute;
  height: 200px;
  width: 300px;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 15px;
  overflow: hidden;
}

.window-title {
  height: 30px;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
}

.window-title p {
  color: #fff;
  font-weight: bold;
  margin: 0;
  padding: 0;
  text-align: left;
}

.window-buttons {
  display: flex;
  align-items: center;
}

.window-button {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin: 5px;
  transition: background-color 0.2s ease;
}

.window-button.close {
  background-color: #f00;
}

.window-button.close:hover {
  background-color: rgb(182, 2, 2);
  cursor: pointer;
}

.window-button.reduce {
  background-color: #ff0;
}

.window-button.reduce:hover {
  background-color: rgb(172, 172, 4);
  cursor: pointer;
}

.window-button.fullscreen {
  background-color: #0f0;
}

.window-button.fullscreen:hover {
  background-color: rgb(7, 159, 7);
  cursor: pointer;
}

.window-button:focus {
  outline: none;
}

.console {
  width: 100%;
  height: calc(100% - 30px);
  background-color: #000;
  color: #fff;
  overflow: auto;
}

.console pre {
  margin: 0;
  padding: 5px;
  font-size: 15px;
}

.console pre code {
  color: #0f0;
  outline: none;
}

.console::-webkit-scrollbar {
  width: 8px;
}

.console::-webkit-scrollbar-track {
  background-color: #333;
}

.console::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 10px;
  border: 2px solid #333;
}

.console::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}
</style>


================================================
FILE: Cards/NlghtM4re_pretty-walrus-13.html
================================================
<div class="card">
    <div class="wave">
      <svg class="transition duration-300 ease-in-out delay-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 690" id="svg" height="100%" width="100%"><path class="transition-all duration-300 ease-in-out delay-150 path-0" fill-opacity="0.265" fill="#0693e3" stroke-width="0" stroke="none" d="M 0,700 C 0,700 0,140 0,140 C 49.78660747317794,111.80801578493032 99.57321494635588,83.61603156986065 154,95 C 208.42678505364412,106.38396843013935 267.49374768775436,157.34388950548774 318,162 C 368.50625231224564,166.65611049451226 410.4517943026267,125.00841040818842 457,125 C 503.5482056973733,124.99158959181158 554.6990751017388,166.62246886175853 622,169 C 689.3009248982612,171.37753113824147 772.7519052904181,134.50171414477742 828,138 C 883.2480947095819,141.49828585522258 910.2933037365889,185.37067455913183 958,184 C 1005.7066962634111,182.62932544086817 1074.0748797632264,136.01558761869526 1126,133 C 1177.9251202367736,129.98441238130474 1213.4071772105067,170.56697496608706 1263,179 C 1312.5928227894933,187.43302503391294 1376.2964113947467,163.71651251695647 1440,140 C 1440,140 1440,700 1440,700 Z"></path><path class="transition-all duration-300 ease-in-out delay-150 path-1" fill-opacity="0.4" fill="#0693e3" stroke-width="0" stroke="none" d="M 0,700 C 0,700 0,280 0,280 C 62.90669626341102,299.99447527438645 125.81339252682204,319.98895054877295 186,328 C 246.18660747317796,336.01104945122705 303.6531261561229,332.03867307929465 349,318 C 394.3468738438771,303.96132692070535 427.5741028486866,279.85635713404855 469,280 C 510.4258971513134,280.14364286595145 560.0504624491306,304.535898384511 619,296 C 677.9495375508694,287.464101615489 746.224047354791,246.0000493279073 810,241 C 873.775952645209,235.9999506720927 933.0533481317054,267.46390430385986 979,280 C 1024.9466518682946,292.53609569614014 1057.5625601183872,286.1443334566531 1111,273 C 1164.4374398816128,259.8556665433469 1238.6964113947465,239.95876186952768 1297,240 C 1355.3035886052535,240.04123813047232 1397.6517943026267,260.02061906523613 1440,280 C 1440,280 1440,700 1440,700 Z"></path><path class="transition-all duration-300 ease-in-out delay-150 path-2" fill-opacity="0.53" fill="#0693e3" stroke-width="0" stroke="none" d="M 0,700 C 0,700 0,420 0,420 C 57.217906030336664,427.6082870884203 114.43581206067333,435.21657417684054 176,435 C 237.56418793932667,434.78342582315946 303.47465778764337,426.7419903810581 349,423 C 394.52534221235663,419.2580096189419 419.6655567887532,419.8154642989271 473,410 C 526.3344432112468,400.1845357010729 607.8631150573436,379.99615242323347 667,380 C 726.1368849426564,380.00384757676653 762.8819829818719,400.1999260081391 813,420 C 863.1180170181281,439.8000739918609 926.6089530151683,459.2041435442102 982,448 C 1037.3910469848317,436.7958564557898 1084.6822049574546,394.9834998150203 1127,375 C 1169.3177950425454,355.0165001849797 1206.6622271550127,356.86185719570847 1258,368 C 1309.3377728449873,379.13814280429153 1374.6688864224936,399.56907140214577 1440,420 C 1440,420 1440,700 1440,700 Z"></path><path class="transition-all duration-300 ease-in-out delay-150 path-3" fill-opacity="1" fill="#0693e3" stroke-width="0" stroke="none" d="M 0,700 C 0,700 0,560 0,560 C 56.23090393390059,560.0061166605007 112.46180786780118,560.0122333210013 171,564 C 229.53819213219882,567.9877666789987 290.38367246269576,575.9571833764952 346,570 C 401.61632753730424,564.0428166235048 452.00350228141565,544.1590331730176 502,537 C 551.9964977185844,529.8409668269824 601.6023184116415,535.4066839314343 648,537 C 694.3976815883585,538.5933160685657 737.5872240720187,536.2142311012456 782,540 C 826.4127759279813,543.7857688987544 872.0487853002836,553.7363916635837 933,548 C 993.9512146997164,542.2636083364163 1070.2176347268467,520.8402022444197 1136,528 C 1201.7823652731533,535.1597977555803 1257.0806757923294,570.9027993587372 1306,581 C 1354.9193242076706,591.0972006412628 1397.4596621038354,575.5486003206314 1440,560 C 1440,560 1440,700 1440,700 Z"></path></svg>
    </div>
    <div class="sun">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path transform="rotate(
                  0,
                  100,
                  100
              ) translate(
                  70
                  70
              )" fill="#FADB5F" d="M 0, 30
                  C 0, 11.700000000000001 11.700000000000001, 0 30, 0
                  S 60, 11.700000000000001 60, 30
                      48.3, 60 30, 60
                      0, 48.3 0, 30"></path></svg>
    </div>
</div>
<div class="sun-shadow"></div>
<div class="sun-ring-container">
    <div class="sun-ring"></div>
    <div class="sun-ring"></div>
    <div class="sun-ring"></div>
    <div class="sun-ring"></div>
    <div class="sun-ring"></div>
    <div class="sun-ring"></div>
    <div class="sun-ring"></div>
    <div class="sun-ring"></div>
    <div class="sun-ring"></div>
</div>
<style>
/* From Uiverse.io by NlghtM4re - Tags: blue, card, theme, sun, water, colorful */
.card {
  width: 190px;
  height: 254px;
  border-radius: 5px;
  background: lightblue;
  border: 2px solid rgb(49, 161, 198);
}

.wave {
  transform: translate(0,161px);
}

.sun {
  transform: translate(-45px, -143px);
}

.sun-shadow {
  position: absolute;
  width: 190px;
  height: 190px;
  display: flex;
  justify-content: center;
  transform: rotate(-90deg) translate(253px,0);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(156,224,254,0) 0%, rgba(87,201,251,0) 33%, rgba(250,251,87,0.11545868347338939) 65%, rgba(149,140,0,0.23030462184873945) 100%);
}

.sun-ring {
  width: 5px;
  height: 20px;
  position: absolute;
  background-color: rgb(249, 215, 46);
  border-radius: 5px;
}

.sun-ring-container {
  transform: translate(48px,-217px);
}

.sun-ring:nth-child(1) {
  transform: translate(0,40px);
}

.sun-ring:nth-child(2) {
  transform: translate(25px,32px)  rotate(-35deg);
}

.sun-ring:nth-child(3) {
  transform: translate(40px,5px)  rotate(-80deg);
}

.sun-ring:nth-child(4) {
  transform: translate(37px,-25px)  rotate(-120deg);
}

.sun-ring:nth-child(5) {
  transform: translate(-25px,34px)  rotate(35deg);
}

.sun-ring:nth-child(6) {
  transform: translate(-38px,13px)  rotate(75deg) scaleY(0.7);
}

.sun-ring:nth-child(7) {
  transform: translate(-38px,-17px)  rotate(110deg) scaleY(0.7);
}

.sun-ring:nth-child(8) {
  transform: translate(-20px,-35px)  rotate(160deg) scaleY(0.7);
}

.sun-ring:nth-child(9) {
  transform: translate(10px,-37px)  rotate(195deg) scaleY(0.51);
}
</style>


================================================
FILE: Cards/NotReal22_popular-gecko-14.html
================================================
 <div class="card-2">
        <span id="card-2-h1">Welcome</span>
        <div class="h1-circle">
             <ul id="h1-circle-ul-1">
            <li>Easer</li>
            <li>Cheaper</li>
            <li>World Wild</li>
             </ul>
             <ul id="h1-circle-ul-2">
            <li>Secrets</li>
            <li>Expensive</li>
            <li>World Wild</li>
             </ul>
        </div>
    </div>
<style>
/* From Uiverse.io by NotReal22 - Tags: card, stylish */
.card-2 {
  position: relative;
  width: 300px;
  height: 400px;
  background-image: linear-gradient(to top,rgb(117, 117, 197),#67be96);
  border-radius: 30px;
  border: 2px solid white;
  overflow: hidden;
}

.h1-circle {
  position: absolute;
  right: 70px;
  border-radius: 50%;
  width: 400px;
  height: 400px;
  background-image: radial-gradient(circle at center, #8798c5, #494fa1);
  opacity: .8;
}

.card-2:hover .h1-circle,
.h1-circle:hover {
  animation: moving-weel 1s linear;
  animation-fill-mode: forwards;
}

.h1-circle:not(:hover) {
  animation: moving-weel-2 1s linear;
  animation-fill-mode: backwards;
}

@keyframes moving-weel-2 {
  0% {
    rotate: 160deg;
    right: -170px;
  }

  50% {
    right: 20px;
    rotate: 75deg;
  }

  100% {
    rotate: 0deg;
  }
}

@keyframes moving-weel {
  0% {
    rotate: 0deg;
  }

  50% {
    right: 20px;
    rotate: 90deg;
  }

  100% {
    rotate: 180deg;
    right: -170px;
  }
}

.h1-circle ul li {
  list-style: none;
  color: white;
  font-size: 20px;
  margin: 20px;
}

#h1-circle-ul-1 {
  display: flex;
  flex: 1;
  flex-direction: column;
  position: absolute;
  top: 100px;
  left: 200px;
  transition: 500ms ease-in;
}

#h1-circle-ul-2 {
  opacity: 0;
  flex: 1;
  flex-direction: column;
  position: absolute;
  top: 100px;
  left: 200px;
  transition: 1s ease-in;
}

#h1-circle-ul-2 li {
  transform: rotate(180deg);
  font-size: 20px;
  margin: 30px;
}

#card-2-h1 {
  position: absolute;
  left: 60px;
  top: 10px;
  color: transparent;
  font-size: 40px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  z-index: 700;
  background: linear-gradient(to bottom right, transparent, white 90%),rgb(117, 190, 117);
  -webkit-background-clip: text;
  background-clip: text;
  text-transform: uppercase;
  transition: 1s ease-in;
}

.card-2:hover #h1-circle-ul-2 {
  opacity: 1;
  transition: 1s ease-in;
}

.card-2:hover #h1-circle-ul-1 {
  opacity: 0;
  transition: 500ms ease-in;
}
</style>


================================================
FILE: Cards/NouvelleTechno_bright-cow-83.html
================================================
<div class="card">
    <span class="title">🍪 Cookie Notice</span>
    <p class="description">We use cookies to ensure that we give you the best experience on our website. <a href="#">Read cookies policies</a>. </p>
    <a class="prefs">
        Manage preferences
    </a>    
    <div class="actions">
        <button class="decline">
            Decline
        </button>
        <button class="valid">
            Accept
        </button>
    </div>
</div>
<style>
/* From Uiverse.io by NouvelleTechno - Tags: card, claymorphism, shadow */
.card {
  width: 370px;
  background: white;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  border-radius: 40px;
  background-color: hsl(120deg 20% 95%);
  box-shadow: 17px 17px 34px 0px rgb(124, 134, 124), 
    inset -8px -8px 16px 0px rgba(117, 133, 117, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
}

.card .title {
  color: black;
  font-size: 2rem;
  font-weight: 600;
}

.card .description {
  color: black;
  margin-top: 10px;
  margin-bottom: 20px;
}

.card .prefs {
  color: blue;
  font-size: .8em;
  margin-bottom: 20px;
}

.card .actions {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card button {
  color: white;
  border: none;
  background: none;
  padding: 20px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: bold;
}

.card .decline {
  color: rgb(255, 0, 0);
  box-shadow: 4px 4px 8px 0px rgb(134, 124, 124), 
    inset -8px -8px 16px 0px rgba(92, 92, 92, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
}

.card .valid {
  color: rgb(0, 156, 0);
  box-shadow: 4px 4px 8px 0px rgb(124, 134, 125), 
    inset -8px -8px 16px 0px rgba(121, 121, 121, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
}

.card .decline:hover {
  color: white;
  background-color: rgb(255, 0, 0);
  box-shadow: 4px 4px 8px 0px rgb(134, 124, 124), 
    inset -8px -8px 16px 0px rgba(134, 20, 20, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
}

.card .valid:hover {
  color: white;
  background-color: rgb(0, 156, 0);
  box-shadow: 4px 4px 8px 0px rgb(124, 134, 125), 
    inset -8px -8px 16px 0px rgba(47, 134, 20, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
}

</style>


================================================
FILE: Cards/NouvelleTechno_fast-dragon-71.html
================================================
<div class="card">
    <span class="title">🍪 Cookie Notice</span>
    <p class="description">We use cookies to ensure that we give you the best experience on our website. <a href="#">Read cookies policies</a>. </p>
    <div class="actions">
        <a class="prefs">
            Manage preferences
        </a>
        <button class="decline">
            Decline
        </button>
        <button class="valid">
            Accept
        </button>
    </div>
</div>
<style>
/* From Uiverse.io by NouvelleTechno - Tags: card */
.card {
  width: 350px;
  background: white;
  padding: 20px;
  position: relative;
}

.card .title {
  color: black;
  font-size: 2rem;
  font-weight: 600;
}

.card .description {
  color: black;
  margin-top: 10px;
  margin-bottom: 20px;
}

.card .prefs {
  color: blue;
}

.card .actions {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8em;
}

.card button {
  border: 1px solid;
  border-radius: 4px;
  padding: 5px;
  background: none;
  font-size: 1.2em;
  font-weight: bold;
}

.card .decline {
  border-color: red;
  color: red;
}

.card .decline:hover {
  background-color: red;
  color: white;
}

.card .valid {
  border-color: green;
  color: green;
}

.card .valid:hover {
  background-color: green;
  color: white;
}

.card div::before, div::after {
  content: "";
  z-index: -1;
  position: absolute;
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: rgba(0,0,0,0.7);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0,0.7);
  box-shadow: 0 15px 10px rgba(0,0,0,0.7);
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.card div::after {
  right: 10px;
  left: unset;
  transform: rotate(3deg);
}
</style>


================================================
FILE: Cards/PINKYSEE_nervous-cougar-38.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by PINKYSEE - Tags: card */
.card {
  position: relative;
  box-shadow: 0 0 10px #ae00ff, 0 0 25px #001eff, 0 0 50px #ae00ff;
  background: linear-gradient(320.62deg, #21CFDC 0%, rgba(183, 53, 162, 0.522696) 47.73%, rgba(44, 70, 206, 0) 100%);
  border-radius: 50px;
  width: 300px;
  height: 300px;
  padding: 25px;
}

.content {
  display: flex;
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.item {
  position: relative;
  min-height: 100%;
  min-width: 100%;
  overflow: hidden;
  animation: infinite 9s createanim;
  animation-delay: 0s;
}

.item--create {
  overflow: hidden;
  position: relative;
}

.item--post {
  overflow: hidden;
  position: relative;
}

.item--inspire {
  overflow: hidden;
  position: relative;
}

.item--create svg {
  width: 128px;
  height: 128px;
  position: absolute;
  left: 25%;
}

.item--post span {
  position: absolute;
  top: 80%;
  left: 38%;
  font-size: 24px;
}

.item--post svg {
  width: 128px;
  height: 128px;
  position: absolute;
  left: 25%;
}

.item--create span {
  position: absolute;
  top: 80%;
  left: 32%;
  font-size: 24px;
}

.item--inspire svg {
  width: 128px;
  height: 128px;
  position: absolute;
  left: 25%;
}

.item--inspire span {
  position: absolute;
  top: 80%;
  left: 30%;
  font-size: 24px;
}

.heading {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 20px;
}

.heading span {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 20px;
}

button {
  border: 1px solid white;
  color: white;
  background-color: #001eff00;
  height: 50px;
  width: 250px;
  font-size: 20px;
  border-radius: 50px;
  position: absolute;
  bottom: 15px;
  transition: all 0.3s;
  left: 25px;
}

button:hover {
  width: 260px;
  left: 20px;
  bottom: 20px;
}

.content:hover .item {
  animation-play-state: paused;
}

@keyframes createanim {
  0% {
    left: 70%;
  }

  100% {
    left: -280%;
  }
}
</style>


================================================
FILE: Cards/ParasSalunke_tasty-tiger-60.html
================================================
<div class="music-card">
  <div class="card-header">
    <div class="track-info">
      <svg
        class="track-icon"
        fill="none"
        height="24"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M9 18V5l12-2v13"></path>
        <circle cx="6" cy="18" r="3"></circle>
        <circle cx="18" cy="16" r="3"></circle>
      </svg>
      <div class="track-details">
        <span class="track-title">Music Name</span>
        <p class="track-artist">Music Singer</p>
      </div>
    </div>
    <div class="card-icons">
      <svg
        class="icon-heart"
        fill="none"
        height="24"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
        ></path>
      </svg>
      <svg
        class="icon-star"
        fill="none"
        height="24"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <polygon
          points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
        ></polygon>
      </svg>
    </div>
  </div>
  <div class="progress-container">
    <div class="progress-bar"></div>
  </div>
  <div class="progress-time"><span>00:03</span><span>3:35</span></div>
</div>

<style>
/* From Uiverse.io by ParasSalunke  - Tags: card */
.music-card {
  cursor: pointer;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  background-color: #f7f7f7;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.music-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #fff;
}

.track-info {
  display: flex;
  align-items: center;
}

.track-icon {
  height: 24px;
  width: 24px;
  color: #f59e0b;
}

.track-details {
  margin-left: 12px;
}

.track-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}

.track-artist {
  font-size: 0.9rem;
  color: #666;
}

.card-icons {
  display: flex;
  align-items: center;
}

.icon-heart {
  height: 24px;
  width: 24px;
  color: #ef4444;
  cursor: pointer;
}

.icon-star {
  height: 24px;
  width: 24px;
  color: #9ca3af;
  margin-left: 16px;
  cursor: pointer;
}

.icon-star:hover {
  color: #fbbf24;
}

.progress-container {
  position: relative;
  margin: 16px 16px 8px 16px;
  height: 6px;
  background-color: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 60%;
  background-color: #f59e0b;
  border-radius: 3px;
}

.progress-time {
  display: flex;
  justify-content: space-between;
  padding: 0 16px 16px 16px;
  font-size: 0.85rem;
  color: #6b7280;
}

</style>
    

================================================
FILE: Cards/Peary74_neat-cobra-65.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by Peary74 - Tags: card */
.card {
  width: 190px;
  height: 254px;
  transition: all 0.2s;
  position: relative;
  cursor: pointer;
  color: black;
  text-shadow: -2px -2px 0px #fff, 2px 2px 0px #fff;
}

.heading {
  width: inherit;
  height: inherit;
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  color: white;
  text-shadow: -1px -1px 0px #b0e633, 1px 1px 0px #53ef7d;
}

.heading span {
  transform: translateX(10px) translateY(10px);
  width: 100px;
  padding: 2px;
  margin-top: -5px;
  margin-left: -6.3px;
  color: white;
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  animation-timing-function: steps(2, end);
  text-shadow: -2px -2px 0px #b0e633, 2px 2px 0px #53ef7d;
}

.card:hover {
  transform: scale(1.04) rotate(1deg);
}

.item {
  width: 100px;
  height: 100px;
  background: radial-gradient(#b0e633, #53ef7d);
  border-radius: 50%;
  position: absolute;
  animation: move-up6 2s ease-in infinite alternate-reverse;
}

.item:nth-child(1) {
  top: -55px;
  left: -40px;
  z-index: -1;
}

.item:nth-child(2) {
  top: -55px;
  left: 130px;
  z-index: -1;
  animation-name: move-down1;
}

.item:nth-child(3) {
  top: 210px;
  left: 130px;
  z-index: -1;
  animation-name: move-updown1;
}

.item--create {
  width: 100px;
  height: 100px;
  background: radial-gradient(#b0e633, #53ef7d);
  border-radius: 50%;
  position: absolute;
  animation: move-up6 2s ease-in infinite alternate-reverse;
}

.item--create svg {
  margin-top: 10px;
  margin-left: 10px;
}

.item--post svg {
  margin-top: 10px;
  margin-left: 13px;
}

.item--inspire svg {
  margin-top: 55px;
  margin-left: 4px;
}

.item--create:nth-child(2) {
  top: 210px;
  left: 130px;
  animation-name: move-updown1;
}

.item--create:nth-child(3) {
  top: 210px;
  left: 130px;
  animation-name: move-updown1;
}

@keyframes move-up6 {
  to {
    transform: translateY(-10px);
  }
}

@keyframes move-down1 {
  to {
    transform: translateY(10px);
  }
}

@keyframes move-updown1 {
  to {
    transform: translateY(-10px);
  }
}

button {
  display: inline-block;
  width: 160px;
  height: 50px;
  margin-left: -40px;
  border-radius: 10px;
  background: radial-gradient(#b0e633, #53ef7d);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  animation: 2s linear infinite;
  border: none;
}

button:hover {
  background: radial-gradient(#53ef7d, #b0e633);
  transform: translate(-0.3rem,-0.3rem);
  box-shadow: 6px 6px #a7fabd;
  cursor: pointer;
}

button:active {
  transform: translate(0);
  box-shadow: none;
  color: #000;
}

.card span::before {
  content: "";
  position: absolute;
  top: 120px;
  left: 176px;
  transform: rotate(90deg);
  bottom: -5px;
  width: 30px;
  height: 10px;
  background: #53ef7d;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.5;
}

.card span:nth-child(2)::before {
  left: -5px;
}

.card span:nth-child(2)::after {
  top: 2px;
  left: 75px;
}

.card:hover span:nth-child(2)::before {
  animation-delay: .1s;
  animation: drop 1s linear infinite;
}

.card:hover .content:hover span:nth-child(2)::before {
  display: none;
}

.card:hover span:nth-child(2)::after {
  animation-delay: .2s;
  animation: drop 0.5s linear infinite;
}

.card:hover .content:hover span:nth-child(2)::after {
  display: none;
}

@keyframes drop {
  0% {
    top: -10px;
    transform: translateY(0);
  }

  100% {
    top: -10px;
    transform: translateY(500px);
  }
}

.card :hover span::before {
  left: 90px;
  top: 60px;
  height: 50%;
  width: 10%;
  border-radius: 30px;
  transform: rotate(945deg);
}

.card span::after {
  content: "";
  position: absolute;
  margin-top: 120px;
  left: -15px;
  transform: rotate(90deg);
  top: -5px;
  width: 30px;
  height: 10px;
  background: #53ef7d;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.5;
}

.card :hover span::after {
  left: 90px;
  top: -60px;
  height: 50%;
  width: 10%;
  border-radius: 30px;
  transform: rotate(-945deg);
}

.item--create svg {
  animation: spin 2s linear infinite;
}

.item--post svg {
  animation: upDown 2s ease-in-out infinite alternate;
}

.item--inspire svg {
  animation: flash 1.2s linear infinite;
}

@keyframes spin {
  
  0% {
    transform: rotate(360deg);
    color: #000;
  }

  50% {
    transform: rotate(0deg);
    color: #fff;
  }

  100% {
    transform: rotate(360deg);
    color: #000;
  }
}

@keyframes upDown {
  0% {
    transform: translateY(5px);
    color: #fff;
    text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8;
    background-color: transparent;
    border: none;
    box-shadow: 0px 10px 10px -10px rgb(0, 255, 213);
  }

  100% {
    transform: translateY(-5px);
    color: #000;
  }
}

@keyframes flash {
  0% {
    color: white;
    text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8;
    background-color: transparent;
    border: none;
    box-shadow: 0px 10px 10px -10px rgb(0, 255, 213);
  }

  50% {
    color: #000;
  }

  100% {
    color: white;
  }
}

.card:hover .item--create {
  filter: blur(2px);
  opacity: .5;
  transform: scale(.90);
  box-shadow: none;
}

.card:hover .item--post {
  filter: blur(2px);
  opacity: .5;
  transform: scale(.90);
  box-shadow: none;
}

.card:hover .item--inspire {
  filter: blur(2px);
  opacity: .5;
  transform: scale(.90);
  box-shadow: none;
}

.card:hover .item--create:hover {
  transition: transform .35s ease-in-out;
  filter: blur(0px);
  opacity: 1;
  width: 120px;
  height: 120px;
  background: radial-gradient(#53ef7d, #b0e633);
  transform: translate(-0.3rem,-0.3rem);
}

.card:hover .item--post:hover {
  transition: transform .35s ease-in-out;
  filter: blur(0px);
  opacity: 1;
  width: 120px;
  height: 120px;
  background: radial-gradient(#53ef7d, #b0e633);
  transform: translate(-0.3rem,-0.3rem);
}

.card:hover .item--inspire:hover {
  transition: transform .35s ease-in-out;
  filter: blur(0px);
  opacity: 1;
  width: 120px;
  height: 120px;
  background: radial-gradient(#53ef7d, #b0e633);
  transform: translate(-0.3rem,-0.3rem);
}

</style>


================================================
FILE: Cards/Praashoo7_black-lizard-62.html
================================================
<div class="flip-card">
    <div class="flip-card-inner">
        <div class="flip-card-front">
            <p class="heading_8264">MASTERCARD</p>
            <svg class="logo" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="36" height="36" viewBox="0 0 48 48">
            <path fill="#ff9800" d="M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z"></path><path fill="#d50000" d="M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z"></path><path fill="#ff3d00" d="M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z"></path>
            </svg>
            <svg version="1.1" class="chip" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 50 50" xml:space="preserve">  <image id="image0" width="50" height="50" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
              AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB6VBMVEUAAACNcTiVeUKVeUOY
              fEaafEeUeUSYfEWZfEaykleyklaXe0SWekSZZjOYfEWYe0WXfUWXe0WcgEicfkiXe0SVekSXekSW
              ekKYe0a9nF67m12ZfUWUeEaXfESVekOdgEmVeUWWekSniU+VeUKVeUOrjFKYfEWliE6WeESZe0GS
              e0WYfES7ml2Xe0WXeESUeEOWfEWcf0eWfESXe0SXfEWYekSVeUKXfEWxklawkVaZfEWWekOUekOW
              ekSYfESZe0eXekWYfEWZe0WZe0eVeUSWeETAnmDCoWLJpmbxy4P1zoXwyoLIpWbjvXjivnjgu3bf
              u3beunWvkFWxkle/nmDivXiWekTnwXvkwHrCoWOuj1SXe0TEo2TDo2PlwHratnKZfEbQrWvPrWua
              fUfbt3PJp2agg0v0zYX0zYSfgkvKp2frxX7mwHrlv3rsxn/yzIPgvHfduXWXe0XuyIDzzISsjVO1
              lVm0lFitjVPzzIPqxX7duna0lVncuHTLqGjvyIHeuXXxyYGZfUayk1iyk1e2lln1zYTEomO2llrb
              tnOafkjFpGSbfkfZtXLhvHfkv3nqxH3mwXujhU3KqWizlFilh06khk2fgkqsjlPHpWXJp2erjVOh
              g0yWe0SliE+XekShhEvAn2D///+gx8TWAAAARnRSTlMACVCTtsRl7Pv7+vxkBab7pZv5+ZlL/UnU
              /f3SJCVe+Fx39naA9/75XSMh0/3SSkia+pil/KRj7Pr662JPkrbP7OLQ0JFOijI1MwAAAAFiS0dE
              orDd34wAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfnAg0IDx2lsiuJAAACLElEQVRIx2Ng
              GAXkAUYmZhZWPICFmYkRVQcbOwenmzse4MbFzc6DpIGXj8PD04sA8PbhF+CFaxEU8iWkAQT8hEVg
              OkTF/InR4eUVICYO1SIhCRMLDAoKDvFDVhUaEhwUFAjjSUlDdMiEhcOEItzdI6OiYxA6YqODIt3d
              I2DcuDBZsBY5eVTr4xMSYcyk5BRUOXkFsBZFJTQnp6alQxgZmVloUkrKYC0qqmji2WE5EEZuWB6a
              lKoKdi35YQUQRkFYPpFaCouKIYzi6EDitJSUlsGY5RWVRGjJLyxNy4ZxqtIqqvOxaVELQwZFZdkI
              JVU1RSiSalAt6rUwUBdWG1CP6pT6gNqwOrgCdQyHNYR5YQFhDXj8MiK1IAeyN6aORiyBjByVTc0F
              qBoKWpqwRCVSgilOaY2OaUPw29qjOzqLvTAchpos47u6EZyYnngUSRwpuTe6D+6qaFQdOPNLRzOM
              1dzhRZyW+CZouHk3dWLXglFcFIflQhj9YWjJGlZcaKAVSvjyPrRQ0oQVKDAQHlYFYUwIm4gqExGm
              BSkutaVQJeomwViTJqPK6OhCy2Q9sQBk8cY0DxjTJw0lAQWK6cOKfgNhpKK7ZMpUeF3jPa28BCET
              amiEqJKM+X1gxvWXpoUjVIVPnwErw71nmpgiqiQGBjNzbgs3j1nus+fMndc+Cwm0T52/oNR9lsdC
              S24ra7Tq1cbWjpXV3sHRCb1idXZ0sGdltXNxRateRwHRAACYHutzk/2I5QAAACV0RVh0ZGF0ZTpj
              cmVhdGUAMjAyMy0wMi0xM1QwODoxNToyOSswMDowMEUnN7UAAAAldEVYdGRhdGU6bW9kaWZ5ADIw
              MjMtMDItMTNUMDg6MTU6MjkrMDA6MDA0eo8JAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIzLTAy
              LTEzVDA4OjE1OjI5KzAwOjAwY2+u1gAAAABJRU5ErkJggg=="></image>
            </svg>
            <svg version="1.1" class="contactless" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 50 50" xml:space="preserve">  <image id="image0" width="50" height="50" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAQAAAC0NkA6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
              AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
              cwAACxMAAAsTAQCanBgAAAAHdElNRQfnAg0IEzgIwaKTAAADDklEQVRYw+1XS0iUURQ+f5qPyjQf
              lGRFEEFK76koKGxRbWyVVLSOgsCgwjZBJJYuKogSIoOonUK4q3U0WVBWFPZYiIE6kuArG3VGzK/F
              fPeMM/MLt99/NuHdfPd888/57jn3nvsQWWj/VcMlvMMd5KRTogqx9iCdIjUUmcGR9ImUYowyP3xN
              GQJoRLVaZ2DaZf8kyjEJALhI28ELioyiwC+Rc3QZwRYyO/DH51hQgWm6DMIh10KmD4u9O16K49it
              VoPOAmcGAWWOepXIRScAoJZ2Frro8oN+EyTT6lWkkg6msZfMSR35QTJmjU0g15tIGSJ08ZZMJkJk
              HpNZgSkyXosS13TkJpZ62mPIJvOSzC1bp8vRhhCakEk7G9/o4gmZdbpsTcKu0m63FbnBP9Qrc15z
              bkbemfgNDtEOI8NO5L5O9VYyRYgmJayZ9nPaxZrSjW4+F6Uw9yQqIiIZwhp2huQTf6OIvCZyGM6g
              DJBZbyXifJXr7FZjGXsdxADxI7HUJFB6iWvsIhFpkoiIiGTJfjJfiCuJg2ZEspq9EHGVpYgzKqwJ
              qSAOEwuJQ/pxPvE3cYltJCLdxBLiSKKIE5HxJKcTRNeadxfhDiuYw44zVs1dxKwRk/uCxIiQkxKB
              sSctRVAge9g1E15EHE6yRUaJecRxcWlukdRIbGFOSZCMWQA/iWauIP3slREHXPyliqBcrrD71Amz
              Z+rD1Mt2Yr8TZc/UR4/YtFnbijnHi3UrN9vKQ9rPaJf867ZiaqDB+czeKYmd3pNa6fuI75MiC0uX
              XSR5aEMf7s7a6r/PudVXkjFb/SsrCRfROk0Fx6+H1i9kkTGn/E1vEmt1m089fh+RKdQ5O+xNJPUi
              cUIjO0Dm7HwvErEr0YxeibL1StSh37STafE4I7zcBdRq1DiOkdmlTJVnkQTBTS7X1FYyvfO4piaI
              nKbDCDaT2anLudYXCRFsQBgAcIF2/Okwgvz5+Z4tsw118dzruvIvjhTB+HOuWy8UvovEH6beitBK
              xDyxm9MmISKCWrzB7bSlaqGlsf0FC0gMjzTg6GgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjMtMDIt
              MTNUMDg6MTk6NTYrMDA6MDCjlq7LAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIzLTAyLTEzVDA4OjE5
              OjU2KzAwOjAw0ssWdwAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMy0wMi0xM1QwODoxOTo1Nisw
              MDowMIXeN6gAAAAASUVORK5CYII="></image>
            </svg>
            <p class="number">9759 2484 5269 6576</p>
            <p class="valid_thru">VALID THRU</p>
            <p class="date_8264">1 2 / 2 4</p>
            <p class="name">BRUCE WAYNE</p>
        </div>
        <div class="flip-card-back">
            <div class="strip"></div>
            <div class="mstrip"></div>
            <div class="sstrip">
              <p class="code">***</p>
            </div>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: card, flip, realistic, creditcard */
.flip-card {
  background-color: transparent;
  width: 240px;
  height: 154px;
  perspective: 1000px;
  color: white;
}

.heading_8264 {
  position: absolute;
  letter-spacing: .2em;
  font-size: 0.5em;
  top: 2em;
  left: 18.6em;
}

.logo {
  position: absolute;
  top: 6.8em;
  left: 11.7em;
}

.chip {
  position: absolute;
  top: 2.3em;
  left: 1.5em;
}

.contactless {
  position: absolute;
  top: 3.5em;
  left: 12.4em;
}

.number {
  position: absolute;
  font-weight: bold;
  font-size: .6em;
  top: 8.3em;
  left: 1.6em;
}

.valid_thru {
  position: absolute;
  font-weight: bold;
  top: 635.8em;
  font-size: .01em;
  left: 140.3em;
}

.date_8264 {
  position: absolute;
  font-weight: bold;
  font-size: 0.5em;
  top: 13.6em;
  left: 3.2em;
}

.name {
  position: absolute;
  font-weight: bold;
  font-size: 0.5em;
  top: 16.1em;
  left: 2em;
}

.strip {
  position: absolute;
  background-color: black;
  width: 15em;
  height: 1.5em;
  top: 2.4em;
  background: repeating-linear-gradient(
    45deg,
    #303030,
    #303030 10px,
    #202020 10px,
    #202020 20px
  );
}

.mstrip {
  position: absolute;
  background-color: rgb(255, 255, 255);
  width: 8em;
  height: 0.8em;
  top: 5em;
  left: .8em;
  border-radius: 2.5px;
}

.sstrip {
  position: absolute;
  background-color: rgb(255, 255, 255);
  width: 4.1em;
  height: 0.8em;
  top: 5em;
  left: 10em;
  border-radius: 2.5px;
}

.code {
  font-weight: bold;
  text-align: center;
  margin: .2em;
  color: black;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
}

.flip-card-front {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  background-color: #171717;
}

.flip-card-back {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  background-color: #171717;
  transform: rotateY(180deg);
}
</style>


================================================
FILE: Cards/Praashoo7_chilly-dragon-63.html
================================================
<div class="main">
  <div class="card">
    <div class="fl">
      <div class="fullscreen">
        <svg viewBox="0 0 100 100" class="fullscreen_svg"><path d="M3.563-.004a3.573 3.573 0 0 0-3.527 4.09l-.004-.02v28.141c0 1.973 1.602 3.57 3.57 3.57s3.57-1.598 3.57-3.57V12.218v.004l22.461 22.461a3.571 3.571 0 0 0 6.093-2.527c0-.988-.398-1.879-1.047-2.523L12.218 7.172h19.989c1.973 0 3.57-1.602 3.57-3.57s-1.598-3.57-3.57-3.57H4.035a3.008 3.008 0 0 0-.473-.035zM96.333 0l-.398.035.02-.004h-28.16a3.569 3.569 0 0 0-3.57 3.57 3.569 3.569 0 0 0 3.57 3.57h19.989L65.323 29.632a3.555 3.555 0 0 0-1.047 2.523 3.571 3.571 0 0 0 6.093 2.527L92.83 12.221v19.985a3.569 3.569 0 0 0 3.57 3.57 3.569 3.569 0 0 0 3.57-3.57V4.034v.004a3.569 3.569 0 0 0-3.539-4.043l-.105.004zM3.548 64.23A3.573 3.573 0 0 0 .029 67.8v28.626-.004l.016.305-.004-.016.004.059v-.012l.039.289-.004-.023.023.121-.004-.023c.074.348.191.656.34.938l-.008-.02.055.098-.008-.02.148.242-.008-.012.055.082-.008-.012c.199.285.43.531.688.742l.008.008.031.027.004.004c.582.461 1.32.742 2.121.762h.004l.078.004h28.61a3.569 3.569 0 0 0 3.57-3.57 3.569 3.569 0 0 0-3.57-3.57H12.224l22.461-22.461a3.569 3.569 0 0 0-2.492-6.125l-.105.004h.008a3.562 3.562 0 0 0-2.453 1.074L7.182 87.778V67.793a3.571 3.571 0 0 0-3.57-3.57h-.055.004zm92.805 0a3.573 3.573 0 0 0-3.519 3.57v19.993-.004L70.373 65.328a3.553 3.553 0 0 0-2.559-1.082h-.004a3.573 3.573 0 0 0-3.566 3.57c0 1.004.414 1.91 1.082 2.555l22.461 22.461H67.802a3.57 3.57 0 1 0 0 7.14h28.606c.375 0 .742-.059 1.082-.168l-.023.008.027-.012-.02.008.352-.129-.023.008.039-.02-.02.008.32-.156-.02.008.023-.016-.008.008c.184-.102.34-.207.488-.32l-.008.008.137-.113-.008.004.223-.211.008-.008c.156-.164.301-.34.422-.535l.008-.016-.008.016.008-.02.164-.285.008-.02-.008.016.008-.02c.098-.188.184-.406.246-.633l.008-.023-.004.008.008-.023a3.44 3.44 0 0 0 .121-.852v-.004l.004-.078V67.804a3.569 3.569 0 0 0-3.57-3.57h-.055.004z"></path></svg>
      </div>
    </div>
    <div class="card_content">
      <label class="switch_738">
        <input type="checkbox" class="chk_738">
        <span class="slider_738"></span>
      </label>
    </div>
    <div class="card_back"></div>
  </div>
  <div class="data">
    <div class="img">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 80 80">
      <g stroke-width="2.00" fill="none" stroke-linecap="butt">
      <path stroke="#59afb1" d="M 14.06 0.00
        Q 13.33 4.09 13.93 7.52
        A 1.04 1.02 -78.7 0 0 14.37 8.19
        L 32.87 20.19"></path>
      <path stroke="#4fa6a8" d="M 32.87 20.19
        L 42.25 26.79"></path>
      <path stroke="#69cbc0" d="M 42.25 26.79
        C 41.40 28.26 24.14 34.92 21.32 36.20"></path>
      <path stroke="#6fcdbb" d="M 21.32 36.20
        Q 15.81 38.21 11.00 41.21"></path>
      <path stroke="#5ec8ab" d="M 11.00 41.21
        L 9.75 40.96"></path>
      <path stroke="#5cae9e" d="M 9.75 40.96
        Q 5.99 37.71 1.71 35.19
        A 1.00 1.00 0.0 0 0 0.22 35.85
        L 0.00 36.94"></path>
      <path stroke="#3190a6" d="M 79.95 6.12
        L 62.46 11.32"></path>
      <path stroke="#3a96a3" d="M 62.46 11.32
        Q 47.42 14.67 32.87 20.19"></path>
      <path stroke="#22a3be" d="M 80.00 11.06
        L 64.50 17.46"></path>
      <path stroke="#28879d" d="M 64.50 17.46
        L 62.46 11.32"></path>
      <path stroke="#2ba9bb" d="M 64.50 17.46
        L 43.00 26.96"></path>
      <path stroke="#4ab2b2" d="M 43.00 26.96
        L 42.25 26.79"></path>
      <path stroke="#45ced3" d="M 80.00 52.31
        Q 71.64 45.91 62.46 40.67"></path>
      <path stroke="#13636e" d="M 62.46 40.67
        Q 62.43 36.88 58.50 36.79"></path>
      <path stroke="#45ced3" d="M 58.50 36.79
        Q 50.07 32.95 43.00 26.96"></path>
      <path stroke="#326b65" d="M 58.50 36.79
        Q 55.85 40.04 56.86 44.07
        C 57.53 46.71 60.02 47.68 61.77 45.19
        Q 61.91 44.99 61.94 44.74
        L 62.46 40.67"></path>
      <path stroke="#59d4b5" d="M 40.81 79.86
        Q 46.22 74.94 52.34 70.94
        A 1.00 1.00 0.0 0 0 52.39 69.30
        Q 44.74 63.65 43.10 62.62
        Q 34.11 56.98 32.50 55.79"></path>
      <path stroke="#6ad8c5" d="M 32.50 55.79
        C 36.74 55.42 30.64 48.79 29.79 47.81
        C 27.54 45.21 26.34 42.09 24.05 39.44
        Q 22.66 37.82 21.32 36.20"></path>
      <path stroke="#326b65" d="M 48.75 39.07
        A 2.30 2.30 0.0 0 0 46.45 36.77
        L 46.05 36.77
        A 2.30 2.30 0.0 0 0 43.75 39.07
        L 43.75 44.21
        A 2.30 2.30 0.0 0 0 46.05 46.51
        L 46.45 46.51
        A 2.30 2.30 0.0 0 0 48.75 44.21
        L 48.75 39.07"></path>
      <path stroke="#326b65" d="M 58.63 54.41
        C 54.90 57.18 50.72 56.87 46.91 54.39
        A 1.00 0.99 51.9 0 0 46.04 54.28
        C 42.37 55.52 43.88 58.13 46.28 59.41
        Q 53.38 63.20 60.15 58.94
        C 62.54 57.43 62.47 54.80 59.41 54.23
        A 1.00 1.00 0.0 0 0 58.63 54.41"></path>
      <path stroke="#4bb793" d="M 9.75 40.96
        Q 5.15 43.50 0.05 44.46"></path>
      <path stroke="#5fd6b0" d="M 32.50 55.79
        L 11.00 41.21"></path>
      <path stroke="#48d08e" d="M 11.19 80.00
        Q 12.51 79.61 11.57 78.67
        Q 5.99 73.11 1.70 65.70
        C 1.28 64.97 0.74 64.76 0.00 65.19"></path>
      </g>
      <path fill="#6ebfb6" d="M 0.00 0.00
        L 14.06 0.00
        Q 13.33 4.09 13.93 7.52
        A 1.04 1.02 -78.7 0 0 14.37 8.19
        L 32.87 20.19
        L 42.25 26.79
        C 41.40 28.26 24.14 34.92 21.32 36.20
        Q 15.81 38.21 11.00 41.21
        L 9.75 40.96
        Q 5.99 37.71 1.71 35.19
        A 1.00 1.00 0.0 0 0 0.22 35.85
        L 0.00 36.94
        L 0.00 0.00
        Z"></path>
      <path fill="#439eac" d="M 14.06 0.00
        L 80.00 0.00
        L 79.95 6.12
        L 62.46 11.32
        Q 47.42 14.67 32.87 20.19
        L 14.37 8.19
        A 1.04 1.02 -78.7 0 1 13.93 7.52
        Q 13.33 4.09 14.06 0.00
        Z"></path>
      <path fill="#1f81a0" d="M 79.95 6.12
        L 80.00 11.06
        L 64.50 17.46
        L 62.46 11.32
        L 79.95 6.12
        Z"></path>
      <path fill="#308d99" d="M 62.46 11.32
        L 64.50 17.46
        L 43.00 26.96
        L 42.25 26.79
        L 32.87 20.19
        Q 47.42 14.67 62.46 11.32
        Z"></path>
      <path fill="#25c5dc" d="M 80.00 11.06
        L 80.00 52.31
        Q 71.64 45.91 62.46 40.67
        Q 62.43 36.88 58.50 36.79
        Q 50.07 32.95 43.00 26.96
        L 64.50 17.46
        L 80.00 11.06
        Z"></path>
      <path fill="#64d6ca" d="M 42.25 26.79
        L 43.00 26.96
        Q 50.07 32.95 58.50 36.79
        Q 55.85 40.04 56.86 44.07
        C 57.53 46.71 60.02 47.68 61.77 45.19
        Q 61.91 44.99 61.94 44.74
        L 62.46 40.67
        Q 71.64 45.91 80.00 52.31
        L 80.00 80.00
        L 40.81 79.86
        Q 46.22 74.94 52.34 70.94
        A 1.00 1.00 0.0 0 0 52.39 69.30
        Q 44.74 63.65 43.10 62.62
        Q 34.11 56.98 32.50 55.79
        C 36.74 55.42 30.64 48.79 29.79 47.81
        C 27.54 45.21 26.34 42.09 24.05 39.44
        Q 22.66 37.82 21.32 36.20
        C 24.14 34.92 41.40 28.26 42.25 26.79
        Z
        M 48.75 39.07
        A 2.30 2.30 0.0 0 0 46.45 36.77
        L 46.05 36.77
        A 2.30 2.30 0.0 0 0 43.75 39.07
        L 43.75 44.21
        A 2.30 2.30 0.0 0 0 46.05 46.51
        L 46.45 46.51
        A 2.30 2.30 0.0 0 0 48.75 44.21
        L 48.75 39.07
        Z
        M 58.63 54.41
        C 54.90 57.18 50.72 56.87 46.91 54.39
        A 1.00 0.99 51.9 0 0 46.04 54.28
        C 42.37 55.52 43.88 58.13 46.28 59.41
        Q 53.38 63.20 60.15 58.94
        C 62.54 57.43 62.47 54.80 59.41 54.23
        A 1.00 1.00 0.0 0 0 58.63 54.41
        Z"></path>
      <path fill="#499c85" d="M 9.75 40.96
        Q 5.15 43.50 0.05 44.46
        L 0.00 36.94
        L 0.22 35.85
        A 1.00 1.00 0.0 0 1 1.71 35.19
        Q 5.99 37.71 9.75 40.96
        Z"></path>
      <path fill="#70dac0" d="M 21.32 36.20
        Q 22.66 37.82 24.05 39.44
        C 26.34 42.09 27.54 45.21 29.79 47.81
        C 30.64 48.79 36.74 55.42 32.50 55.79
        L 11.00 41.21
        Q 15.81 38.21 21.32 36.20
        Z"></path>
      <rect fill="#000000" x="43.75" y="36.77" width="5.00" height="9.74" rx="2.30"></rect>
      <path fill="#000000" d="M 58.50 36.79
        Q 62.43 36.88 62.46 40.67
        L 61.94 44.74
        Q 61.91 44.99 61.77 45.19
        C 60.02 47.68 57.53 46.71 56.86 44.07
        Q 55.85 40.04 58.50 36.79
        Z"></path>
      <path fill="#4dd1a0" d="M 9.75 40.96
        L 11.00 41.21
        L 32.50 55.79
        Q 34.11 56.98 43.10 62.62
        Q 44.74 63.65 52.39 69.30
        A 1.00 1.00 0.0 0 1 52.34 70.94
        Q 46.22 74.94 40.81 79.86
        L 11.19 80.00
        Q 12.51 79.61 11.57 78.67
        Q 5.99 73.11 1.70 65.70
        C 1.28 64.97 0.74 64.76 0.00 65.19
        L 0.05 44.46
        Q 5.15 43.50 9.75 40.96
        Z"></path>
      <path fill="#000000" d="M 46.91 54.39
        C 50.72 56.87 54.90 57.18 58.63 54.41
        A 1.00 1.00 0.0 0 1 59.41 54.23
        C 62.47 54.80 62.54 57.43 60.15 58.94
        Q 53.38 63.20 46.28 59.41
        C 43.88 58.13 42.37 55.52 46.04 54.28
        A 1.00 0.99 51.9 0 1 46.91 54.39
        Z"></path>
      <path fill="#43ce7c" d="M 11.19 80.00
        L 0.00 80.00
        L 0.00 65.19
        C 0.74 64.76 1.28 64.97 1.70 65.70
        Q 5.99 73.11 11.57 78.67
        Q 12.51 79.61 11.19 80.00
        Z"></path>
      </svg>
    </div>
    <div class="text">
      <div class="text_m">CSS Theme Switch</div>
      <div class="text_s">Praashoo7</div>
    </div>
  </div>
  <div class="btns">
    <div class="likes">
      <svg class="likes_svg" viewBox="-2 0 105 92"><path d="M85.24 2.67C72.29-3.08 55.75 2.67 50 14.9 44.25 2 27-3.8 14.76 2.67 1.1 9.14-5.37 25 5.42 44.38 13.33 58 27 68.11 50 86.81 73.73 68.11 87.39 58 94.58 44.38c10.79-18.7 4.32-35.24-9.34-41.71Z"></path></svg><span class="likes_text">22</span>
    </div>
    <div class="comments">
      <svg class="comments_svg" viewBox="-405.9 238 56.3 54.8" title="Comment"><path d="M-391 291.4c0 1.5 1.2 1.7 1.9 1.2 1.8-1.6 15.9-14.6 15.9-14.6h19.3c3.8 0 4.4-.8 4.4-4.5v-31.1c0-3.7-.8-4.5-4.4-4.5h-47.4c-3.6 0-4.4.9-4.4 4.5v31.1c0 3.7.7 4.4 4.4 4.4h10.4v13.5z"></path></svg><span class="comments_text">12</span>
    </div>
    <div class="views">
      <svg class="views_svg" viewBox="0 0 30.5 16.5" title="Views"><path d="M15.3 0C8.9 0 3.3 3.3 0 8.3c3.3 5 8.9 8.3 15.3 8.3s12-3.3 15.3-8.3C27.3 3.3 21.7 0 15.3 0zm0 14.5c-3.4 0-6.2-2.8-6.2-6.2C9 4.8 11.8 2 15.3 2c3.4 0 6.2 2.8 6.2 6.2 0 3.5-2.8 6.3-6.2 6.3z"></path></svg><span class="views_text">332</span>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: card, codepen, design */
/* CodePen Card */

.card {
  width: 15em;
  height: 10em;
  background-color: #252525;
  border-radius: 7px;
  cursor: pointer;
}

.fl {
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transition: .2s ease-in-out;
}

.fl:hover .fullscreen {
  scale: 1.2;
}

.fl:hover .fullscreen_svg {
  fill: white;
}

.fullscreen {
  width: 1.5em;
  height: 1.5em;
  border-radius: 5px;
  background-color: #727890;
  margin: 1em;
  margin-right: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s ease-in-out;
  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
}

.fullscreen_svg {
  width: 15px;
  height: 15px;
  fill: rgb(177, 176, 176);
  transition: .2s ease-in-out;
}

.card_back {
  position: absolute;
  width: 15em;
  height: 13em;
  background-color: rgba(30, 31, 38, 0.575);
  border-radius: 7px;
  margin-top: -5em;
  margin-left: 0.7em;
  transition: .2s ease-in-out;
  z-index: -1;
}

.main:hover .card_back {
  margin-top: -6.25em;
  margin-left: 0em;
  scale: 1.1;
  height: 15.25em;
  cursor: pointer;
}

.main:hover .fl {
  opacity: 1;
  cursor: pointer;
  margin-right: 0.5em;
}

.data {
  display: flex;
  flex-direction: row;
  margin-top: 1em;
}

.img {
  width: 2.25em;
  height: 2.25em;
  background-color: #252525;
  border-radius: 5px;
  overflow: hidden;
}

.text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: 0.5em;
  font-family: Montserrat;
  color: white;
}

.text_m {
  font-weight: bold;
  font-size: 0.9em;
}

.text_s {
  font-size: 0.7em;
}

.btns {
  display: flex;
  gap: 0.5em;
  transition: .2s ease-in-out;
}

.likes {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 1.4em;
  border-radius: 4px;
  margin-top: -0.5em;
  opacity: 0;
  background-color: #444857;
  transition: .2s ease-in-out;
}

.likes_text {
  font-family: Montserrat;
  font-size: 0.8em;
  margin-left: 0.25em;
  color: white;
}

.likes_svg {
  width: 12px;
  height: 12px;
  fill: white;
}

.likes:hover {
  background-color: #5A5F73;
  cursor: pointer;
}

.comments {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 1.4em;
  border-radius: 4px;
  margin-top: -0.5em;
  opacity: 0;
  background-color: #444857;
  transition: .24s ease-in-out;
}

.comments_text {
  font-family: Montserrat;
  font-size: 0.8em;
  margin-left: 0.25em;
  color: white;
}

.comments_svg {
  width: 12px;
  height: 12px;
  fill: white;
}

.comments:hover {
  background-color: #5A5F73;
  cursor: pointer;
}

.views {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 1.4em;
  border-radius: 4px;
  margin-top: -0.5em;
  opacity: 0;
  background-color: #444857;
  transition: .28s ease-in-out;
}

.views_text {
  font-family: Montserrat;
  font-size: 0.8em;
  margin-left: 0.25em;
  color: white;
}

.views_svg {
  width: 12px;
  height: 12px;
  fill: white;
}

.views:hover {
  background-color: #5A5F73;
  cursor: pointer;
}

.main:hover .likes {
  margin-top: 0.5em;
  opacity: 1;
}

.main:hover .comments {
  margin-top: 0.5em;
  opacity: 1;
}

.main:hover .views {
  margin-top: 0.5em;
  opacity: 1;
}



/* The Main Switch */

.card_content {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The switch - the box around the slider */
.switch_738 {
  font-size: 13px;
  position: relative;
  display: inline-block;
  width: 1.2em;
  height: 3.3em;
}

/* Hide default HTML checkbox */
.switch_738 .chk_738 {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider_738 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 5px;
}

.slider_738:before {
  position: absolute;
  content: "";
  height: .5em;
  width: 2.4em;
  border-radius: 5px;
  left: -0.6em;
  top: 0.2em;
  background-color: white;
  box-shadow: 0 6px 7px rgba(0,0,0,0.3);
  transition: .4s;
}

.slider_738:before, .slider_738:after {
  content: "";
  display: block;
}

.slider_738:after {
  background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.15) 0) 0 50% / 50% 100%,
		repeating-linear-gradient(90deg,rgb(255, 255, 255) 0,rgb(255, 255, 255),rgb(255, 255, 255) 20%,rgb(255, 255, 255) 20%,rgb(255, 255, 255) 40%) 0 50% / 50% 100%,
		radial-gradient(circle at 50% 50%,rgb(255, 255, 255) 25%, transparent 26%);
  background-repeat: no-repeat;
  border: 0.25em solid transparent;
  border-left: 0.4em solid #ffffff;
  border-right: 0 solid transparent;
  transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
  transform: translateX(-22.5%) rotate(90deg);
  transform-origin: 25% 50%;
  position: relative;
  top: 0.5em;
  left: 0.55em;
  width: 2em;
  height: 1em;
  box-sizing: border-box;
}

.chk_738:checked + .slider_738 {
  background-color: limegreen;
}

.chk_738:focus + .slider_738 {
  box-shadow: 0 0 1px limegreen;
}

.chk_738:checked + .slider_738:before {
  transform: translateY(2.3em);
}

.chk_738:checked + .slider_738:after {
  transform: rotateZ(90deg) rotateY(180deg) translateY(0.45em) translateX(-1.4em);
}
</style>


================================================
FILE: Cards/Praashoo7_fat-horse-65.html
================================================
<div class="main_wrapper">
  <div class="main">
    <div class="antenna">
      <div class="antenna_shadow"></div>
      <div class="a1"></div>
      <div class="a1d"></div>
      <div class="a2"></div>
      <div class="a2d"></div>
      <div class="a_base"></div>
    </div>
    <div class="tv">
      <div class="cruve">
        <svg
          xml:space="preserve"
          viewBox="0 0 189.929 189.929"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
          class="curve_svg"
        >
          <path
            d="M70.343,70.343c-30.554,30.553-44.806,72.7-39.102,115.635l-29.738,3.951C-5.442,137.659,11.917,86.34,49.129,49.13
        C86.34,11.918,137.664-5.445,189.928,1.502l-3.95,29.738C143.041,25.54,100.895,39.789,70.343,70.343z"
          ></path>
        </svg>
      </div>
      <div class="display_div">
        <div class="screen_out">
          <div class="screen_out1">
            <div class="screen">
              <span class="notfound_text"> NOT FOUND</span>
            </div>
          </div>
        </div>
      </div>
      <div class="lines">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
      </div>
      <div class="buttons_div">
        <div class="b1"><div></div></div>
        <div class="b2"></div>
        <div class="speakers">
          <div class="g1">
            <div class="g11"></div>
            <div class="g12"></div>
            <div class="g13"></div>
          </div>
          <div class="g"></div>
          <div class="g"></div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="base1"></div>
      <div class="base2"></div>
      <div class="base3"></div>
    </div>
  </div>
  <div class="text_404">
    <div class="text_4041">4</div>
    <div class="text_4042">0</div>
    <div class="text_4043">4</div>
  </div>
</div>

<style>
/* From Uiverse.io by Praashoo7  - Tags: card, error, card template, card animation, 404, not found, 404 not found, tv */
/* Design Inspired by one of Stefan Devai's Design on Dribble */

.main_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30em;
  height: 30em;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 5em;
}

.antenna {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 2px solid black;
  background-color: #f27405;
  margin-bottom: -6em;
  margin-left: 0em;
  z-index: -1;
}
.antenna_shadow {
  position: absolute;
  background-color: transparent;
  width: 50px;
  height: 56px;
  margin-left: 1.68em;
  border-radius: 45%;
  transform: rotate(140deg);
  border: 4px solid transparent;
  box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;
  -moz-box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;
}
.antenna::after {
  content: "";
  position: absolute;
  margin-top: -9.4em;
  margin-left: 0.4em;
  transform: rotate(-25deg);
  width: 1em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #f69e50;
}
.antenna::before {
  content: "";
  position: absolute;
  margin-top: 0.2em;
  margin-left: 1.25em;
  transform: rotate(-20deg);
  width: 1.5em;
  height: 0.8em;
  border-radius: 50%;
  background-color: #f69e50;
}
.a1 {
  position: relative;
  top: -102%;
  left: -130%;
  width: 12em;
  height: 5.5em;
  border-radius: 50px;
  background-image: linear-gradient(
    #171717,
    #171717,
    #353535,
    #353535,
    #171717
  );
  transform: rotate(-29deg);
  clip-path: polygon(50% 0%, 49% 100%, 52% 100%);
}
.a1d {
  position: relative;
  top: -211%;
  left: -35%;
  transform: rotate(45deg);
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  border: 2px solid black;
  background-color: #979797;
  z-index: 99;
}
.a2 {
  position: relative;
  top: -210%;
  left: -10%;
  width: 12em;
  height: 4em;
  border-radius: 50px;
  background-color: #171717;
  background-image: linear-gradient(
    #171717,
    #171717,
    #353535,
    #353535,
    #171717
  );
  margin-right: 5em;
  clip-path: polygon(
    47% 0,
    47% 0,
    34% 34%,
    54% 25%,
    32% 100%,
    29% 96%,
    49% 32%,
    30% 38%
  );
  transform: rotate(-8deg);
}
.a2d {
  position: relative;
  top: -294%;
  left: 94%;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  border: 2px solid black;
  background-color: #979797;
  z-index: 99;
}

.notfound_text {
  background-color: black;
  padding-left: 0.3em;
  padding-right: 0.3em;
  font-size: 0.75em;
  color: white;
  letter-spacing: 0;
  border-radius: 5px;
  z-index: 10;
}
.tv {
  width: 17em;
  height: 9em;
  margin-top: 3em;
  border-radius: 15px;
  background-color: #d36604;
  display: flex;
  justify-content: center;
  border: 2px solid #1d0e01;
  box-shadow: inset 0.2em 0.2em #e69635;
}
.tv::after {
  content: "";
  position: absolute;
  width: 17em;
  height: 9em;
  border-radius: 15px;
  background: repeating-radial-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%)
      50% 0/2500px 2500px,
    repeating-conic-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%) 60% 60%/2500px
      2500px;
  background-blend-mode: difference;
  opacity: 0.09;
}
.curve_svg {
  position: absolute;
  margin-top: 0.25em;
  margin-left: -0.25em;
  height: 12px;
  width: 12px;
}
.display_div {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  border-radius: 15px;
  box-shadow: 3.5px 3.5px 0px #e69635;
}
.screen_out {
  width: auto;
  height: auto;

  border-radius: 10px;
}
.screen_out1 {
  width: 11em;
  height: 7.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.screen {
  width: 13em;
  height: 7.85em;
  font-family: Montserrat;
  border: 2px solid #1d0e01;
  background: repeating-radial-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 50% 0/2500px
      2500px,
    repeating-conic-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 60% 60%/2500px
      2500px;
  background-blend-mode: difference;
  animation: b 0.2s infinite alternate;
  border-radius: 10px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #252525;
  letter-spacing: 0.15em;
  text-align: center;
}
@keyframes b {
  100% {
    background-position: 50% 0, 60% 50%;
  }
}

/* Another Error Screen to Use 

.screen {
  width: 13em;
  height: 7.85em;
  position: relative;
  background: linear-gradient(to right, #002fc6 0%, #002bb2 14.2857142857%, #3a3a3a 14.2857142857%, #303030 28.5714285714%, #ff0afe 28.5714285714%, #f500f4 42.8571428571%, #6c6c6c 42.8571428571%, #626262 57.1428571429%, #0affd9 57.1428571429%, #00f5ce 71.4285714286%, #3a3a3a 71.4285714286%, #303030 85.7142857143%, white 85.7142857143%, #fafafa 100%);
  border-radius: 10px;
  border: 2px solid black;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #252525;
  letter-spacing: 0.15em;
  text-align: center;
  overflow: hidden;
}
.screen:before, .screen:after {
  content: "";
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
}
.screen:before {
  top: 0;
  height: 68.4782608696%;
  background: linear-gradient(to right, white 0%, #fafafa 14.2857142857%, #ffe60a 14.2857142857%, #f5dc00 28.5714285714%, #0affd9 28.5714285714%, #00f5ce 42.8571428571%, #10ea00 42.8571428571%, #0ed600 57.1428571429%, #ff0afe 57.1428571429%, #f500f4 71.4285714286%, #ed0014 71.4285714286%, #d90012 85.7142857143%, #002fc6 85.7142857143%, #002bb2 100%);
}
.screen:after {
  bottom: 0;
  height: 21.7391304348%;
  background: linear-gradient(to right, #006c6b 0%, #005857 16.6666666667%, white 16.6666666667%, #fafafa 33.3333333333%, #001b75 33.3333333333%, #001761 50%, #6c6c6c 50%, #626262 66.6666666667%, #929292 66.6666666667%, #888888 83.3333333333%, #3a3a3a 83.3333333333%, #303030 100%);
}

  */

.lines {
  display: flex;
  column-gap: 0.1em;
  align-self: flex-end;
}
.line1,
.line3 {
  width: 2px;
  height: 0.5em;
  background-color: black;
  border-radius: 25px 25px 0px 0px;
  margin-top: 0.5em;
}
.line2 {
  flex-grow: 1;
  width: 2px;
  height: 1em;
  background-color: black;
  border-radius: 25px 25px 0px 0px;
}

.buttons_div {
  width: 4.25em;
  align-self: center;
  height: 8em;
  background-color: #e69635;
  border: 2px solid #1d0e01;
  padding: 0.6em;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 0.75em;
  box-shadow: 3px 3px 0px #e69635;
}
.b1 {
  width: 1.65em;
  height: 1.65em;
  border-radius: 50%;
  background-color: #7f5934;
  border: 2px solid black;
  box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721,
    -2px 0px 0px 1px black;
}
.b1::before {
  content: "";
  position: absolute;
  margin-top: 1em;
  margin-left: 0.5em;
  transform: rotate(47deg);
  border-radius: 5px;
  width: 0.1em;
  height: 0.4em;
  background-color: #000000;
}
.b1::after {
  content: "";
  position: absolute;
  margin-top: 0.9em;
  margin-left: 0.8em;
  transform: rotate(47deg);
  border-radius: 5px;
  width: 0.1em;
  height: 0.55em;
  background-color: #000000;
}
.b1 div {
  content: "";
  position: absolute;
  margin-top: -0.1em;
  margin-left: 0.65em;
  transform: rotate(45deg);
  width: 0.15em;
  height: 1.5em;
  background-color: #000000;
}
.b2 {
  width: 1.65em;
  height: 1.65em;
  border-radius: 50%;
  background-color: #7f5934;
  border: 2px solid black;
  box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721,
    -2px 0px 0px 1px black;
}
.b2::before {
  content: "";
  position: absolute;
  margin-top: 1.05em;
  margin-left: 0.8em;
  transform: rotate(-45deg);
  border-radius: 5px;
  width: 0.15em;
  height: 0.4em;
  background-color: #000000;
}
.b2::after {
  content: "";
  position: absolute;
  margin-top: -0.1em;
  margin-left: 0.65em;
  transform: rotate(-45deg);
  width: 0.15em;
  height: 1.5em;
  background-color: #000000;
}
.speakers {
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
}
.speakers .g1 {
  display: flex;
  column-gap: 0.25em;
}
.speakers .g1 .g11,
.g12,
.g13 {
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background-color: #7f5934;
  border: 2px solid black;
  box-shadow: inset 1.25px 1.25px 1px #b49577;
}
.speakers .g {
  width: auto;
  height: 2px;
  background-color: #171717;
}

.bottom {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 8.7em;
}
.base1 {
  height: 1em;
  width: 2em;
  border: 2px solid #171717;
  background-color: #4d4d4d;
  margin-top: -0.15em;
  z-index: -1;
}
.base2 {
  height: 1em;
  width: 2em;
  border: 2px solid #171717;
  background-color: #4d4d4d;
  margin-top: -0.15em;
  z-index: -1;
}
.base3 {
  position: absolute;
  height: 0.15em;
  width: 17.5em;
  background-color: #171717;
  margin-top: 0.8em;
}

.text_404 {
  position: absolute;
  display: flex;
  flex-direction: row;
  column-gap: 6em;
  z-index: -5;
  margin-bottom: 2em;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  font-family: Montserrat;
}
.text_4041 {
  transform: scaleY(24.5) scaleX(9);
}
.text_4042 {
  transform: scaleY(24.5) scaleX(9);
}
.text_4043 {
  transform: scaleY(24.5) scaleX(9);
}

</style>
    

================================================
FILE: Cards/Praashoo7_horrible-penguin-32.html
================================================
<div class="card">
  <div class="img"></div>
  <span>About Me</span>
  <p class="info">I’m Walter, a multidisciplinary designer who focuses on telling my clients’ stories visually, through enjoyable and meaningful experiences. I specialize in responsive websites and functional user interfaces.</p>
  <div class="share">
    <a href=""><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
    </svg></a>
    <a href=""><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
  <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
  </svg></a>
    <a href=""><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
  <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
  </svg></a>
  <a href=""><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
  <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"></path>
  </svg></a>
  </div>
  <button>Resume</button>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: flat design, black, card, about me */
.card {
  width: 17em;
  height: 22.5em;
  background: #171717;
  transition: 1s ease-in-out;
  clip-path: polygon(30px 0%, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0% 30px);
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  display: flex;
  flex-direction: column;
}

.card span {
  font-weight: bold;
  color: white;
  text-align: center;
  display: block;
  font-size: 1em;
}

.card .info {
  font-weight: 400;
  color: white;
  display: block;
  text-align: center;
  font-size: 0.72em;
  margin: 1em;
}

.card .img {
  width: 4.8em;
  height: 4.8em;
  background: white;
  border-radius: 15px;
  margin: auto;
}

.card .share {
  margin-top: 1em;
  display: flex;
  justify-content: center;
  gap: 1em;
}

.card a {
  color: white;
  transition: .4s ease-in-out;
}

.card a:hover {
  color: red;
}

.card button {
  padding: 0.8em 1.7em;
  display: block;
  margin: auto;
  border-radius: 25px;
  border: none;
  font-weight: bold;
  background: #ffffff;
  color: rgb(0, 0, 0);
  transition: .4s ease-in-out;
}

.card button:hover {
  background: red;
  color: white;
  cursor: pointer;
}
</style>


================================================
FILE: Cards/Praashoo7_jolly-bulldog-31.html
================================================
<div class="main">
  <div class="card">
    <div class="ups">
      <div class="screw1">+</div>
      <div class="screw2">+</div>
    </div>
    <div class="card1">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="yl">
        <div class="roll">
          <div class="s_wheel"></div>
          <div class="tape"></div>
          <div class="e_wheel"></div>
        </div>
        <p class="num">90</p>
      </div>
      <div class="or">
        <p class="time">2×30min</p>
      </div>
    </div>
    <div class="card2_main">
      <div class="card2">
        <div class="c1"></div>
        <div class="t1"></div>
        <div class="screw5">+</div>
        <div class="t2"></div>
        <div class="c2"></div>
      </div>
    </div>
    <div class="downs">
      <div class="screw3">+</div>
      <div class="screw4">+</div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: card, realistic, cassette */
.card {
  width: 300px;
  height: 200px;
  background: #252525;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.ups {
  display: flex;
}

.screw1 {
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.75em;
  margin: 0.5em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.screw2 {
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.7em;
  margin-top: 0.5em;
  margin-left: 15.8em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.downs {
  display: flex;
}

.screw3 {
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.75em;
  margin-top: -1.3em;
  margin-left: 0.5em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.screw4 {
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.75em;
  margin-top: -1.3em;
  margin-left: 16.35em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.card1 {
  width: 230px;
  height: 115px;
  margin-top: 0.5em;
  margin-left: 2.18em;
  background-color: #FFFDD0;
  clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 10%);
  border-radius: 5px;
}

.line1 {
  position: relative;
  width: 200px;
  height: 1px;
  background-color: black;
  top: 1em;
  left: 0.8em;
}

.line2 {
  position: relative;
  width: 200px;
  height: 1px;
  background-color: black;
  top: 2em;
  left: 0.8em;
}

.yl {
  display: flex;
  width: 228px;
  height: 50px;
  background-color: rgb(242, 188, 0);
  margin-top: 2.5em;
  margin-left: 0.06em;
}

.roll {
  width: 8em;
  height: 2em;
  margin-left: 3em;
  border-radius: 15px;
  background-color: #171717;
  display: flex;
}

.tape {
  width: 3em;
  height: 1.5em;
  position: relative;
  left: 0.9em;
  background-color: #252525;
}

.s_wheel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0.215em;
  left: 0.15em;
  width: 1.55em;
  height: 1.55em;
  border: 2px dashed #fff;
  box-shadow: 0 0 0 4.4px #fff;
  border-radius: 50%;
  animation: 2s run infinite linear;
}

.window {
  background-color: white;
  width: auto;
  height: 2em;
}

.e_wheel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0.215em;
  left: 1.7em;
  width: 1.55em;
  height: 1.55em;
  border: 2px dashed #fff;
  box-shadow: 0 0 0 4.4px #fff;
  border-radius: 50%;
  animation: 2s run infinite linear;
}

.num {
  margin-left: 1.5em;
  align-self: center;
}

.or {
  display: flex;
  width: 230px;
  height: 18px;
  background-color: rgb(241, 90, 37);
  margin-top: 0.4em;
  margin-left: 0em;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  align-items: center;
  justify-content: center;
}

.time {
  font-size: 0.5em;
}

.card2_main {
  filter: drop-shadow(4px 4px 14px rgba(0, 0, 0, 1));
}

.card2 {
  width: 150px;
  height: 50px;
  margin-top: 0em;
  margin-left: 4.6em;
  background-color: #252525;
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

.screw5 {
  position: relative;
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.75em;
  left: 4.25em;
  top: -0.5em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.c1 {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  background-color: rgb(190, 190, 190);
  border-radius: 50%;
  left: 1.5em;
  top: 2em;
}

.t1 {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  background-color: rgb(190, 190, 190);
  border-radius: 2px;
  left: 3em;
  top: 1em;
}

.t2 {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  background-color: rgb(190, 190, 190);
  border-radius: 2px;
  left: 5.7em;
  top: -0.2em;
}

.c2 {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  background-color: rgb(190, 190, 190);
  border-radius: 50%;
  left: 7.2em;
  top: -0.2em;
}

@keyframes run {
  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: Cards/Praashoo7_old-dingo-81.html
================================================
<div class="cardm">
  <div class="card">
    <svg class="weather" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve">  <image id="image0" width="100" height="100" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAMg0lEQVR42u2de5AcVb3HP7/unZ19Tt4vQsgGwpIABoREEVJqlFyLwgclEsmliFZULIWgqFHxlZKioBRKIVzBRwEmKUFQsQollhCzAW9xrzxKi/IiybVAgVjktdlkd3Z3errPzz+6Z3d2d2a3Z7bnsaF/VVvdc/qc032+nz3nd87p7tMQW2yxxRZbbLHFFltsscVWXZNaX0Ap1ruLeQ1ZlqN0CsxXQ6vCdFHaMKBCnxp6BNKqvCHKXs/mpfYPcaDW1x7W6haIdtGQdVlllDUoa1RZJTANBRQ02A79ZuTvEXEMPcBzCrvF0NUyj+dkDW6ty1jI6gqIbsEafBdrxLAB5TJRUqq5g1AWjLz0eWHH1fBrhO1te9kj38bUuuw5qwsg+hRzHJdNKB9HWTRCVIgaxoi0anhNlPvV5q7UVRyutRY1BaK7mOfYfEaVG0RJjREVKgpjRJghrXCv7XBb6zW8XitNagJEn6bZyfB14EsoyYKiQvVg5MVTwyDCbak2bpV1DFRbm6oDyXbxflW2IiwpKFYNYeTSql9jXka4ftoneaya+lQNiHbRloUfAlcNFbpeYYw8vj2T5dp519F3wgAZfIozLcPDKGdNJRh+HEGVvWp03cxreaHSWlmVPkHmSa4Sw/NTFQYKAmdYIv/bcxdXTmkgThebMGwXpWmqwsi7tmaDPHB0K1+cckBUkcwebkHYKsE5pjgM1K8pAnL70Tvk5ikFxHmKmwVuHL/QUwvGiHjC1498X26qhHaRO3VnD58FfnDCwhiRVj8/8wvcWbdAMk9xJR4/O5GaKcZJq4pRox+dvZlf1h2QzB85C5dnBFreDDCG4hnSanTV7K/ytyh0jMSH6NM0i8sDbzoY/rFWRB7ev8Uve10AyTr8AFjxpoMRHBc4O9kkd0Sh5aSbrGwXFys88WaFkR+m6Hvn3Mjuyeg5qRqif6VRlbtiGP5WPLln350kawYke4gvIyyLYQyFd844xucno2nZTZZ2MduBf6C0xjCGf6vS2+hpx/Rv012OrmXXEEf5XAxjbLkF2rOWXF+urmXVEN1JKpPkHwIzYhhjy61Kt6S1Y85t9JaqbVk1JJPk0zGM4uVGmUkz15SjbVlARNkYwxi/3MbIxqoAcXbxNmBZDGP8cotw5sFv8NaKA1Hl6hjGBOXOlcnI1RUHAnw4hhG6TB+pKJDBx1mOclIMI2SZYNHBzZxeMSCW/9BzDKOEMhnhPRUD4ilrYhillQmVygEROD+GUUKZ/HKdV6LG4Ux3khy0SItixzDCwQjO7fUOamvnXWTC6NwQFoijdJ5oMFTBM+B54Hr+vprhtLZAgwV2sF8qDBREsdsaOQ14MVIgatOJOTFgeB44LgxmIeP6+9qQwmqbj900C+Nm8PqP4Pa8RkIMjTYkbWiyIWEFzUoIGENhhjOiB2KYV46g9QTDMzDoQH8W0hlILnonqbM/QvuSd5Gc2xlclw5tvUya/tefp+eF39L9wsMkeg/RloTWhF9jQsFQEJgbVudSgLTn/jOmIgzH9SEcH4TGJZfQsXYLLQvOGboW1WEQGgRKooXWJatp6VjN/Eu+xZFntnP4iVsY6DvK9GZIWhPDCPbbw+ocupclSttUhZFx4Wg/HDMzmHfZTzltwyM0LzgHo4qqjtkW+qOhiVnvuIZTv/Ac5tRLOdzn5xvG+YuR6IEQAJlqMJwARjpxMh0bdzFjxUd94U0g9qitMeNDsltnccqGHTRd9CUO94HjjQ8jKHcqrMyhmywUo8XazTqF4XpwbADS9nw6P9VFYtpCX9g8PzHcPdWiWw1OkL+d+76vcUDh2P/czsym4XMKY8utSg5bdEAM9MkUgqEK/Rk47jSyeMMOEqkARnAxhbfFAYzdwpz/+Ar/OriPA3sfxQQ90ITl+5akBQnbb4JENfSdw9BARINXuqYIjKwLvRmYtfortC6+EBNELARiuMYUBzC25vjnn3flPWj2+9CQxO09QLb7ddL7nuT4iztpOPQSqSQ0SfjX4cL3spTjBfvfdQgDhX4HnOYOFl/0uTE1I7/JogiQ8Zqw3LkVBSsByQZQsKctxE4tJNnxNli7md4Xf8/h391KqvulwciBAP+aKjA84481Zq3ehDQ0YcxE4g43QwVhjYgzftx88K3L19J8+rsZ+NvO5dz/mVAih+5l2creeobhGb+ZGggGfY7XxLS3rCvajQ3T1R2KU6RHpkaHemzFem5YDTSd+YFrX3719W+G0Tn85GIXDekjpEVprCcYWdcfffdmICPttHZ+kOZFF9A0/2yaTjo/lH8Y20wN/5cX9zfF8y1YA1XVGF1/+qmLH4oECED6F7wILK8HGCaYBunphwHTzIwLb2D2hdcjiZZI/MPE/mY434nzGwLWi5ddunTp0oPFNC7Fh4DyDLC8HmCkB/0xRiYxn1PWP0zTgnP9eKaYGCP9QRHBxvclBfxEuPyG8m1Xy/4msKmYxCXdoFKlq55g9GuKxR97jKYF54b3D6NH5CX4hxF+okyfZIxufG7//qIv95R2T92wu9Y+IxM47X4HTvrAVhpnLi3NQU8yzlDcMoCqGlBa2vozayMB0rKe1zDsqxUMx4WBjD+pl1ywkvbll1UIgCkap5S4RWuJmtWRAAn0e6hWXdusO3xDacbKT6CEEWxYuErVpJLzM7owMiCey3YTzM9VE4bjQtYDT8E1QvOpF088YztRsxJhU1YKJA9mRQZk+gb+LvCnasJQHb7vbTywk9OxW2aV1/bnb0MCndA/lArJmIi6vYEZ5SeWckG1YKgJaobn97KslplDhR5KN6o7Ot64YXR3tJrjkSDf/ZHVEIBUPzvU8M9qwEDB5Hd7Fbz+7iq1/aaE/Ezoc2JMV6RA5NNkVfleNWDkH/cMiII32EO2vyevWQknhhYQbtIOutQ4xhxvSdp7IgUCkGrlJ2p4o9IwCJosVR+GJYBR0v//xKiCTjzRN65/qBIko/xXZ2dn0YfmygYi6xhAubHSMPLDBB+IKvT+5YFoBZsAZGiHP845jZpD6iS/O56uk3pPPfUJtqHsqTSM3I2x3LNQtgX9r/yR/r//oTLNymRqSXGQrmKuWrnytGMVAyKCWobrVMlWtGYEWyuYm24Mnoc69OgNOMf2V6ftDw3JjG2mjDGq3qZVK1Y8MZGmk158pv0a/g/DTZV88NkK0iVsH07C8muL23uQAw9ciXPkleC/0JQgrikBgJkEJHNc4EOrzl3xwzB62pMFAnDr+fz3YJu8Q+C0qGHkjuWe6jDG723ZEozc092k//oIVnIaibnLQCw/fRnjkqFxwiTHGsFpXcXca3uJK1aed9bzYbWMbAGz3ruZ6yF/JvfKW0QwgnKSzT0UrdA76IMxxp/1NUG8humLaV52KY0dF2G3z8NumY0R8L99MFbkXN6BhAXEHT2QDOKavHwEYxpbe0VIo7IfNa8qPK6O9ejb3372G6XqGOkSf8fu5gJjZBf5S25EACP3e8AZfn0g7QSCBeFZb1Ra8tJSJH/GuYa8sBH7eWGiDExP6sXnPcTTUWkY+SKYPVu52CCP5e69RwUDBTe4bZsbJKYdv5YQNGWu58PyCog5ZmxDuOsqBEMBC7JtSb38/Af5TZT6VWSp8e47uRqVbYBEBSMXJzfri/pN1WBQO3Iv2pRUM8qEgcEkbd14zs/ZFrV2FVv7vfsO/lON/FQgERWMXNqs5985zD/uun4NMqPOUS6MgmH+L8dCP3Xug2yvhG4VXYz/6O28V0V+jdIeFYxcmAmew3K9AmmjgjEqrUAadN0ZO9hZKc0q/nWEQ7exSlR+JbAoKhij47jesIMvmv8kYajymuvp5ct+xrOV1Ksqn6s4dguzsrZsE7g0Shih0kYBw/Bby9OPn7yDI5XWqnofdFGk+ztsViM3wfBnjuocxqCqfmPR/Xwvbx7ixACSswO3sNRS2SrKJfUMw8BuT/S6JfdGs2J1WKvZV9oO3swVovJdlI56gqGGVxDdvOg+flULXWr72bwfkThygPXGyI3o8KJoOcGqDONlNfqdAwnuX/ljsrXSpD4+LLkF65ByOSobFdaKYlcDhiqeGB5X0ftOXsgj9fDFz7oAkm8Hv8YCI6wXI1eoslKgIUoYanBVeRb0F67Dg0u2UfIEYCWt7oDk2+EtpLL9vBOR9+B/nHgZyuxSYKjhELBX4FlFdycdnpxzX+nLt1bL6hpIIXv1BmY2QqdRTgZaBdpM8PluC/rU0Af0eR77Ncu+U+4tb4Xp2GKLLbbYYosttthiiy222GKLLbbYYottfPs3GPtpnh9ZV0oAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjMtMDItMTdUMDg6MDM6MDcrMDA6MDBPnKiVAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIzLTAyLTE3VDA4OjAzOjA3KzAwOjAwPsEQKQAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMy0wMi0xN1QwODowMzowNyswMDowMGnUMfYAAAAASUVORK5CYII="></image>
    </svg>
    <div class="main">23 °C</div>
    <div class="mainsub">Dunmore, Ireland</div>

  </div>

  <div class="card2">
    <div class="upper">
      <div class="humidity">
        <div class="humiditytext">Humidity<br>30%</div>
        <svg xml:space="preserve" viewBox="0 0 30 30" height="30px" width="30px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" class="humiditysvg">  <image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
          AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABiVBMVEUAAAAAAP9NerV/f39O
          e7ZQfLZVf6pRfbfL5fdRfbZIbbZmmcxols5nl85OebSPsteLrdVSfLZxl89ok9FqlM5ahsBdicNa
          hsFcicRhjcdWgbpahsFfi8ZbhsFijsmErOWLt+9xndZcicJahsFahsFdicN5n81xjcZqlNRpls1q
          lNBfn99pls9nkcxXgrpZgrtik81OebWNsdeMrtZOebRNerVZg7pwmMhNebRKdLRNerZNebHZ8v9o
          lM9jj8rV7v3W7v1ch7+Ktu6Lt/CEsep7p+Cz1PO+3fqJte5/q+V+quOUvvLY8f+TvfKpzvapzfaq
          z/aRvPGdxfSVv/LX8P/W8P+32fnK5vyMuPCmzPXW8P6ny/WWv/KOufGawvO22PjJ5vzB4PrU7v6i
          yPSz1fiYwfKOufDD4funzPXF4vvE4vuOuvHV7/7U7/7G4/uNufCx1Pew0/ev0veu0feQu/G01viP
          ufF/q+SCrud+quSItO2kyvWjyfVijslrltFmkcyEqtZgjMf///8NXQssAAAAPHRSTlMAAZgCW+EG
          y+jMBxRaRXHC2H8bX0ry/vrhyvnw0PDHR0Be/e/4/f4SDDNiEFVb0eI5iMHCho7NwI0YOBdy59Cm
          AAAAAWJLR0SCi7P/RAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+cCEBITAJMBs+kAAAFb
          SURBVCjPY2CAAUYmZgY8gIWVBY8sGzsHJxc2CW4eXiDJx28jIAjiCgnzgoV5ebiBpIiomK2duISk
          lL2Ng6O0jIwsmCsnIW5nKyYqwiDv5AwELq5uNjY27h6enh5grpcLiHKSZ1BwBgNvH6C0j68zKlCA
          SfvZgIA/LukAsHQAVDgwCE06OAQoGxoMlQ4Lj0CVdo6MsomKhrJjfGwi0aSdY+NiYcx4G5sEdGkk
          kGhjk4RHOjnEJgWPtLNvKprL07CpgktHpEfgk/a3ycAnnWmThRDMxpDOscmFi6Xl5aNLF+QUwqWL
          bIoxogQBSpJskkpwS5cC4yYFp3RZElA6qQwh7VFeAWZXVFYByWpwxNcAueUeQGlFJWUZCZXauloV
          CRllVdt6NbB0QyOIq6TIoK4BSrWaWpogSltHVw8srW8A4mqoY6R6QyOgrLEJztxiamZuZsGGOztZ
          WlnD2QBCYbJl9Cx9XAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMy0wMi0xNlQxODoxOTowMCswMDow
          MG/wqfUAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjMtMDItMTZUMTg6MTk6MDArMDA6MDAerRFJAAAA
          KHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIzLTAyLTE2VDE4OjE5OjAwKzAwOjAwSbgwlgAAAABJRU5ErkJggg==" y="0" x="0" height="30" width="30" id="image0"></image>
          </svg>
      </div>

      <div class="air">
        <div class="airtext">Wind<br>8 Km/h</div>
          <svg class="airsvg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" xml:space="preserve">  <image id="image0" width="30" height="30" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
            AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABaFBMVEUAAAAA//8ilfIhlfMg
            lvIglfMglvIeku8cjf8glvMhlfIflvMhlfIhlvIglvMhl/MglvIglfIglPEfmfIhlfIglvQfn/8g
            lfIglvIhlfMglfIglvMhl/AhlfIcm/AAf/8qlOkglPYglvIZmf8zmf8hlfIglfIXi+cilPMhlvMg
            lfQhlvMglvIhlfIgl/MglvMhlvMhlfMhlvIfl+8hlvMhlfMglvMglvI/f/8hlvMilvMelvAglfIg
            lvMhlvIglPIglvIhlfIkkfUglfMglfMhlvMhlvMilvMjlfEglvMhlfIhlfMglfIflvEnnOshlvIf
            lPEflfIek/QglvIglvMhlfIime4jlPAglvMglvEhlvMhl/MglfMglfMhlvIak/Edk/UhlvIglfMg
            l/IglvIglfIilPIhlvMhlfMhk/Eqqv8glvIglfMcl/UhlfMhlvIhlvMhlfIglfIhlfIgl/QflPQh
            lvP///+FIn/GAAAAdnRSTlMAAVKu1MmNIQmy91ig/Z5s0fo3KP5dCL27Lvm0NvwSAgwf+woFv7oL
            Q0RGa9L1Vtndx4sgme3FZgTIFiI/hvZld3sch8Tv7kI683nV6DgN4GBQMsycjw8k6nWqRW3cUxMa
            5dpnfLU87N8mBrxXG5jnibjLoi8YaHuXCQAAAAFiS0dEd0Zk+dcAAAAJcEhZcwAACxMAAAsTAQCa
            nBgAAAAHdElNRQfnAhEIBBbLW8PtAAABJ0lEQVQoz62RZ1fCMBSG46atomBR1IJ7g+KotKKgxYl7
            4Z6493x/v6T0QKMtn/p8ec/Nk5Pc5BLiHCWlZeUVlVU21sWBwgvWuho1bqG2Dh6vla0X4ctGQyP8
            VrqpuUVPCQGXlQ+26tEGtBfpX0JHp73t6kYPs9Db159nYDAEj8RoNxjCQ+xxvuFIgZHRMcemQMi4
            iP+I8kRU0TUHG9RJqpWYFVPTcahKsc/jkSAzfgNuVvvjk5gj84W7FhZZvYRl4o0apFawGmT0GsKm
            an0DmzS31O3cQgo75t27SNLYQyRNc/8AhzkROzrOPjCEE1poMk7Pzi8Sl7gyxp5B/Fq4Aa//A7m9
            y7V6/2Ac+/hEy8CzUb68ysDbezp/rZL5+Pz6NvWh/TgwzV+1HV523WQ81AAAACV0RVh0ZGF0ZTpj
            cmVhdGUAMjAyMy0wMi0xN1QwODowNDoyMiswMDowML1dmzYAAAAldEVYdGRhdGU6bW9kaWZ5ADIw
            MjMtMDItMTdUMDg6MDQ6MjIrMDA6MDDMACOKAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIzLTAy
            LTE3VDA4OjA0OjIyKzAwOjAwmxUCVQAAAABJRU5ErkJggg=="></image>
        </svg>
      </div>
    </div>

    <div class="lower">
      <div class="aqi">
        <svg class="aqisvg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" xml:space="preserve">  <image id="image0" width="20" height="20" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
          AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABBVBMVEUAAABL4f9O5v9P5f9Q
          5f9R5/8AZsxB0vYAd9EAeNQAd9MeoOM1w/EYmuIZm+IXnOIAAP8AccYmrOgYmuAWneEA//8AdtQZ
          m+JP5f8ZmeUAf89L3vwcoOQYmeIAddEAeNUrseocjeIAd9QAeNMxu+4kqucZmuEYm+IWmeI5xfIf
          n99P3/9Q5v9Q5v9Q5v9G2Pk0wPA+zfZN4v5L3/w+zfUyve8iqOcrs+s9zPVM4f1N4v1E1vklrOki
          p+cmrOhH2fpP5f5F1/kstewqs+tO4/4nruott+0or+pL3vxE1flK3vxA0fcjqecrtOxO5P4yvvAs
          tOw6yPNA0Pc7yfQ4xfI3xPL////cI4U2AAAALnRSTlMAEXF3ZWsFeC3S26iVh7MsAQnAVCIBZ7Ft
          ChBv6GonVZQJs4yLxtPNLY8IEHuINVg0ZAAAAAFiS0dEVgoN6YkAAAAJcEhZcwAACxMAAAsTAQCa
          nBgAAAAHdElNRQfnAhIFCRn0J5yMAAAAq0lEQVQY02NgIAkwMjFDARMjXJBFDw5Y4IKsCEFWmBgb
          u56+gaERsiAHJxe3nrGJqZm5haWeFQ8vHz9QUEAQqt3a1MbWTkhYRBRmprG9A5qZYuJ6jk62ziYu
          QEEJSaiglDRIjaOpraubu4wsupM8PL2g2gXk5BX0vH18LYwgZiqCLOJQUlbR0/Nz9LcNCAwKVlVT
          10DRbh1iGqqphc+b2ANEW0cXCnS0SQt0ALCcIug70CWhAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIz
          LTAyLTE4VDA1OjA5OjI1KzAwOjAwRMIpTAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMy0wMi0xOFQw
          NTowOToyNSswMDowMDWfkfAAAAAodEVYdGRhdGU6dGltZXN0YW1wADIwMjMtMDItMThUMDU6MDk6
          MjUrMDA6MDBiirAvAAAAAElFTkSuQmCC"></image>
        </svg>
        <div class="aqitext">AQI<br>30</div>
      </div>

      <div class="realfeel">
        <svg class="rfsvg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" xml:space="preserve">  <image id="image0" width="20" height="20" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
          AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABuVBMVEUAAAAAAAAECQkIDg4E
          BAQAAAAAAAAFBQUHDAwIDg4MFBUNFRUKCgoPGhxGenw/b3FDdXcmRUYJDAwJDw9Pi40LFBQNFhYM
          FhYPGhsMExUKEhIPGhoKEhQMExMOGhoMExMPGhoKFBQLExMNFxcKEhILFBQKExMKExQLEhILERMK
          EREHDQ1SkJMuUlMABAQAAAASHh9FeXtAcXI8aWszWlwvU1M4Y2QjPT4NGBoAAAAAAAAAAAAAAAAA
          AAAAAAAAAAAAAABYmZtWlplKgoVlsbRsvsF0zM9uwsVuwcNsvb9ecU53czF0bStgbkdqt7dntbhp
          tbVxaCf5uxD+vxD7vBBTUilYlZdtwMNms7Zdc1P8vRDYpBR5b0imsKy0wcFzhoZdkpRldEx6cU3W
          5eWLnJxdm51otrlZdl67kBWxvbmUo6RmfHxajo9ouLpqt7mJdiN8YxnH1dWVpaVfn6Jgl41OUUKv
          u7pWe3xwxsldn6KmtLTO3NxUf4BswMN0ys1gpaedrKzT4uJjd3dsvcBqubxXg4Vgd3hthYVid3dh
          dnZof39shYVkf4BVeXpqt7pksbJjr7Jdo6X////f0mPcAAAAQXRSTlMABGh/a1xUZIqPo7BH2vv4
          /vJQgvyxwLLCpqXBsafBqcKutcCwuamtop+SgPzwOQzg/f728fD166Zla1o/PiEmFs+XjUIAAAAB
          YktHRJKWBO8gAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5wISBQ8aO3RqsAAAAQlJREFU
          GNNjYMAOGJmYmVlY2djYmZk5OLm4ecBivHyOTs7O/ALOTo6Oji6ugkJAQWERNxTgLgoUFEMVc/MQ
          BwpKuLl5enn7+PpBBf0lwYIBgUHBwSGhYeFgwQgpoKC0W2RUcHB0TGxcfAJYuwxYMDE4OCgpGQhS
          UoGCabJAQTm39KDgjEyQYHJWdo5brjxQUMEtLz+ooDAZAoqKXRXBgm4lpWXJMFBeoQQUVHZzq6yC
          i1XX1KoABVXr3OobYGKNTc0takBBdVc3t9a29vaOzq7unt4+t34NoKDmBFRvTtQCCmrroArq6gEF
          9Q0MnY2MTUxNzYxBwNwCHMj6llbWNrZ29jZg4IAjKhgAAWdbVO4nzP4AAAAldEVYdGRhdGU6Y3Jl
          YXRlADIwMjMtMDItMThUMDU6MTU6MjYrMDA6MDCumAyfAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIz
          LTAyLTE4VDA1OjE1OjI2KzAwOjAw38W0IwAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMy0wMi0x
          OFQwNToxNToyNiswMDowMIjQlfwAAAAASUVORK5CYII="></image>
        </svg>
        <div class="realfeeltext">Real Feel<br>21 °C</div>
      </div>

      <div class="pressure">
        <svg class="pressuresvg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" xml:space="preserve">  <image id="image0" width="20" height="20" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
          AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABNVBMVEUAAAAAr8EArMAAqsAA
          rMEBrMEBrMAAq8AArb8AqsIBrMEgtMa53+S53+QetMYArMEArMEAqrsArMA9scFegp4Cqr8Ao8gA
          rMEErMHn6+wTobgArMAArMBCvc1sco8Aq8EArMFSqrmNWn1Dvs4Aq8EErcLo7O0SorgArMAAq8A8
          sMBie5gCqr8BrMEftMa23eO33uQcs8YAq8AArMAAq8ABq8AAq8EAq8Mtdn9DW2OvvcSwvcSrucJ3
          kZyvvcWvv8OruMJ6kZ55kJ2rusAArMHFzdLH0NS5xMru7u7l5+jm6Ojp3eDd4OK2ubvAhZL4G0en
          rK1YYWV3foHu7e39Mlns7OwzXWQxW2Tl5+f6VHSssLKpra/9MVnc4OL1m6y5xcvv09kxcX5FWmR4
          kJywvsWsusL///80ikJBAAAARHRSTlMAHUotv/j5vSw/9cvd3MrzPg/q4+rqDnXk+/NzucP3t873
          /cJ05Przcunj8en0y93cyz28/vu7K1RASpWb/YBAhvP3hpKCbb4AAAABYktHRGYs1NklAAAACXBI
          WXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5wISBRAIBZcVZgAAAM1JREFUGNNjYMAHGJmYGNGEmFlc
          WNlc2DmQxTi5uHlc3Xj5+AUQYoJCwu4enl4e3iKiYnBBcQlJHw8PD18/fylpuKCMLFAoIDAoOERO
          Hi6ooOjuERoWHuERqaSAUKkMVBkV7REcg6RSRVUtFijsEeevroGwXVMrHiSYoK2DsJ1BQFdP38PD
          wJDfCNn1HMYmpqYmZuZoHrVITLTACBDLpCRLJK6VNRDY2CYn29qAWFZgQbsUIEhNBoJUEMsOLGhv
          BwQOjk5Ojs4glj0DCQAAJCUofMKIT9cAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjMtMDItMThUMDU6
          MTY6MDgrMDA6MDBXtcu8AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIzLTAyLTE4VDA1OjE2OjA4KzAw
          OjAwJuhzAAAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMy0wMi0xOFQwNToxNjowOCswMDowMHH9
          Ut8AAAAASUVORK5CYII="></image>
        </svg>
        <div class="pressuretext">Pressure<br>1012 mbar</div>
      </div>
      <div class="card3">
      Healthy
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: card, weather */
.cardm {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 46.64%;
  left: 50%;
}

.card {
  position: absolute;
  width: 250px;
  height: 130px;
  border-radius: 25px;
  background: whitesmoke;
  color: black;
  z-index: 2;
  transition: .4s ease-in-out;
}

.weather {
  position: relative;
  margin: 1em;
}

.main {
  font-size: 2em;
  position: relative;
  top: -3em;
  left: 4.3em;
}

.mainsub {
  position: relative;
  top: -10.2em;
  left: 14em;
  font-size: 0.6em;
}

.card2 {
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 240px;
  height: 130px;
  border-radius: 35px;
  background: white;
  z-index: -1;
  transition: .4s ease-in-out;
}

.card:hover {
  background-color: #FFE87C;
  cursor: pointer;
}

.card:hover + .card2 {
  height: 300px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.card:hover + .card2 .lower {
  top: 20.2em;
}

.upper {
  display: flex;
  flex-direction: row;
  position: relative;
  color: black;
  left: 1.8em;
  top: 0.5em;
  gap: 4em;
}

.humiditytext {
  position: relative;
  left: 3.6em;
  top: 2.7em;
  font-size: 0.6em;
}

.airtext {
  position: relative;
  left: 3.8em;
  top: 2.7em;
  font-size: 0.6em;
}

.lower {
  display: flex;
  flex-direction: row;
  position: absolute;
  text-align: center;
  color: black;
  left: 3em;
  top: 1em;
  margin-top: 0.7em;
  font-size: 0.7em;
  transition: .4s ease-in-out;
}

.aqi {
  margin-right: 3.25em;
}

.realfeel {
  margin-right: 1.8em;
}

.card3 {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 30px;
  top: 4.7em;
  left: -2.4em;
  font-size: 1.24em;
  border-bottom-left-radius: 35px;
  border-bottom-right-radius: 35px;
  background: limegreen;
  transition: .4s ease-in-out;
}
</style>


================================================
FILE: Cards/Praashoo7_popular-lionfish-100.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: neumorphism, card, gradients */
.card {
  width: 8em;
  font-family: Montserrat;
  height: 8em;
  background: #ae47c2;
  box-shadow: inset -25px -25px 0px #a73dbd, 10px 10px 10px rgba(0,0,0,0.2);
  overflow: hidden;
  border-radius: 50%;
  transition: .4s ease-in-out;
}

.card:before {
  position: relative;
  text-align: center;
  content: "Code Planet";
  color: white;
  border-radius: 50%;
  top: 3.4em;
  left: 0.85em;
  font-weight: 600;
}

.card .heading {
  opacity: 0;
  transition: .1s ease-in-out;
}

.card .heading span {
  transition: .4s ease-in-out;
}

.card button {
  opacity: 0;
  transition: .001s ease-in-out;
}

.card .heading:hover {
  background: linear-gradient(to right, #fff 20%,orange 40%,yellow 60%, skyblue 80%, #ffe4f2 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient_6346 5s linear infinite;
  letter-spacing: 1px;
  scale: 1.01;
}

@keyframes gradient_6346 {
  to {
    background-position: 200% center;
  }
}

.card .content {
  opacity: 0;
  transition: .1s ease-in-out;
}

.card:hover {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 15.4em;
  height: 22.9em;
  padding-top: .4em;
  padding-bottom: 1.5em;
  background-color: #171717;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  background: linear-gradient(270deg, #ce68d9, #45c6db, #45db79);
  background-size: 800% 800%;
  -webkit-animation: AnimationName 3s ease infinite;
  -moz-animation: AnimationName 3s ease infinite;
  animation: AnimationName 3s ease infinite;
  transition: .4s ease-in-out;
}

.card:hover .heading {
  opacity: 1;
  transition: .8s ease-in-out;
}

.card:hover .content {
  opacity: 1;
  transition: .8s ease-in-out;
}

.card:hover button {
  opacity: 1;
  transition: .4s ease-in-out;
}

.card:hover::before {
  opacity: 0;
}

.heading {
  display: flex;
  flex-direction: column;
  color: white;
  font-size: 1em;
  text-align: center;
  padding-bottom: 1em;
  font-weight: bold;
  transition: .4s ease-in-out;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 2em;
}

.item {
  font-size: 0.8em;
  margin: 0.5em;
  padding: 0.8em;
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  border-radius: 15px;
  transition: .4s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.item:hover {
  cursor: pointer;
  scale: 0.9;
  box-shadow: none;
}

.item:active {
  cursor: pointer;
  scale: 0.8;
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.2);
}

.item--create {
  padding-left: 2.5em;
  padding-right: 2.5em;
}

.item--post {
  padding-left: 3em;
  padding-right: 3em;
}

.item--inspire {
  padding-left: 2.5em;
  padding-right: 2.5em;
}

button {
  padding: 0.8em;
  width: 14em;
  border-radius: 10px;
  align-self: center;
  outline: none;
  font-weight: bold;
  border: 1px solid white;
  background-color: transparent;
  color: white;
  transition: .4s ease-in-out;
}

button::after {
  content: "(Hold Me)";
  opacity: 0;
  position: absolute;
}

button::before {
  content: "∞";
  font-size: 3.5em;
  position: absolute;
  opacity: 0;
  left: 1.6em;
  top: -0.33em;
  transition: .4s ease-in-out;
}

button:hover {
  cursor: pointer;
  color: black;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

button:hover::after {
  position: relative;
  opacity: 1;
  font-size: 0.7em;
}

@keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

button:active {
  scale: 1.1;
  opacity: 1;
  color: transparent;
  background: linear-gradient(90deg, #ce68d9, #45c6db, #45db79, #9f45b0, #e54ed0, #ffe4f2);
  background-size: 800% 800%;
  -webkit-animation: AnimationName 1s ease infinite;
  -moz-animation: AnimationName 1s ease infinite;
  animation: AnimationName 1s ease infinite;
}

button:active::before {
  color: white;
  opacity: 1;
}
</style>


================================================
FILE: Cards/Praashoo7_silent-rabbit-57.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by Praashoo7  - Tags: card, space, social media, blur filter, gradients, stars, uiverse, click animation */
/* HOLD THE ASTRONAUT */

.card {
  position: relative;
  width: 19em;
  height: 25em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #171717;
  color: white;
  font-family: Montserrat;
  font-weight: bold;
  padding: 1em 2em 1em 1em;
  border-radius: 20px;
  overflow: hidden;
  z-index: 1;
  row-gap: 1em;
}
.card img {
  width: 12em;
  margin-right: 1em;
  animation: move 10s ease-in-out infinite;
  z-index: 5;
}
.image:hover {
  cursor: -webkit-grab;
  cursor: grab;
}

.icons svg {
  width: 20px;
  height: 20px;
}

.card::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: -3px;
  border-radius: 10px;
  background: radial-gradient(#858585, transparent, transparent);
  transform: translate(-5px, 250px);
  transition: 0.4s ease-in-out;
  z-index: -1;
}
.card:hover::before {
  width: 150%;
  height: 100%;
  margin-left: -4.25em;
}
.card::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 20px;
  background: rgb(23, 23, 23, 0.7);
  transition: all 0.4s ease-in-out;
  z-index: -1;
}

.heading {
  z-index: 2;
  transition: 0.4s ease-in-out;
}
.card:hover .heading {
  letter-spacing: 0.025em;
}

.heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 1;
  box-shadow: 220px 118px #fff, 280px 176px #fff, 40px 50px #fff,
    60px 180px #fff, 120px 130px #fff, 180px 176px #fff, 220px 290px #fff,
    520px 250px #fff, 400px 220px #fff, 50px 350px #fff, 10px 230px #fff;
  z-index: -1;
  transition: 1s ease;
  animation: 1s glowing-stars linear alternate infinite;
  animation-delay: 0s;
}
.icons::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 1;
  box-shadow: 140px 20px #fff, 425px 20px #fff, 70px 120px #fff, 20px 130px #fff,
    110px 80px #fff, 280px 80px #fff, 250px 350px #fff, 280px 230px #fff,
    220px 190px #fff, 450px 100px #fff, 380px 80px #fff, 520px 50px #fff;
  z-index: -1;
  transition: 1.5s ease;
  animation: 1s glowing-stars linear alternate infinite;
  animation-delay: 0.4s;
}
.icons::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 1;
  box-shadow: 490px 330px #fff, 420px 300px #fff, 320px 280px #fff,
    380px 350px #fff, 546px 170px #fff, 420px 180px #fff, 370px 150px #fff,
    200px 250px #fff, 80px 20px #fff, 190px 50px #fff, 270px 20px #fff,
    120px 230px #fff, 350px -1px #fff, 150px 369px #fff;
  z-index: -1;
  transition: 2s ease;
  animation: 1s glowing-stars linear alternate infinite;
  animation-delay: 0.8s;
}
.card:hover .heading::before,
.card:hover .icons::before,
.card:hover .icons::after {
  filter: blur(3px);
}

.image:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.image:active + .heading::before {
  box-shadow: 240px 20px #9b40fc, 240px 25px #9b40fc, 240px 30px #9b40fc,
    240px 35px #9b40fc, 240px 40px #9b40fc, 242px 45px #9b40fc,
    246px 48px #9b40fc, 251px 49px #9b40fc, 256px 48px #9b40fc,
    260px 45px #9b40fc, 262px 40px #9b40fc;
  animation: none;
  filter: blur(0);
  border-radius: 2px;
  width: 0.45em;
  height: 0.45em;
  scale: 0.65;
  transform: translateX(9em) translateY(1em);
}
.image:active ~ .icons::before {
  box-shadow: 262px 35px #9b40fc, 262px 30px #9b40fc, 262px 25px #9b40fc,
    262px 20px #9b40fc, 275px 20px #9b40fc, 275px 24px #9b40fc,
    275px 28px #9b40fc, 275px 32px #9b40fc, 275px 36px #9b40fc,
    275px 40px #9b40fc, 275px 44px #9b40fc, 275px 48px #9b40fc;
  animation: none;
  filter: blur(0);
  border-radius: 2px;
  width: 0.45em;
  height: 0.45em;
  scale: 0.65;
  transform: translateX(9em) translateY(1em);
}
.image:active ~ .icons::after {
  box-shadow: 238px 60px #9b40fc, 242px 60px #9b40fc, 246px 60px #9b40fc,
    250px 60px #9b40fc, 254px 60px #9b40fc, 258px 60px #9b40fc,
    262px 60px #9b40fc, 266px 60px #9b40fc, 270px 60px #9b40fc,
    274px 60px #9b40fc, 278px 60px #9b40fc, 282px 60px #9b40fc,
    234px 60px #9b40fc, 234px 60px #9b40fc;
  animation: none;
  filter: blur(0);
  border-radius: 2px;
  width: 0.45em;
  height: 0.45em;
  scale: 0.65;
  transform: translateX(9em) translateY(1.25em);
}

.heading::after {
  content: "";
  top: -8.5%;
  left: -8.5%;
  position: absolute;
  width: 7.5em;
  height: 7.5em;
  border: none;
  outline: none;
  border-radius: 50%;
  background: #f9f9fb;
  box-shadow: 0px 0px 100px rgba(193, 119, 241, 0.8),
    0px 0px 100px rgba(135, 42, 211, 0.8), inset #9b40fc 0px 0px 40px -12px;
  transition: 0.4s ease-in-out;
  z-index: -1;
}
.card:hover .heading::after {
  box-shadow: 0px 0px 200px rgba(193, 119, 241, 1),
    0px 0px 200px rgba(135, 42, 211, 1), inset #9b40fc 0px 0px 40px -12px;
}

.icons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  column-gap: 1em;
  z-index: 1;
}

.instagram,
.x,
.discord {
  position: relative;
  transition: 0.4s ease-in-out;
}
.instagram:after,
.x:after,
.discord:after {
  content: "";
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  left: 0;
  background-color: white;
  box-shadow: 0px 0px 10px rgba(233, 233, 233, 0.5),
    0px 0px 10px rgba(192, 192, 192, 0.5);
  border-radius: 50%;
  z-index: -1;
  transition: 0.3s ease-in-out;
}
.instagram svg path,
.x svg path,
.discord svg path {
  stroke: #808080;
  transition: 0.4s ease-in-out;
}
.instagram:hover svg path {
  stroke: #cc39a4;
}
.x:hover svg path {
  stroke: black;
}
.discord:hover svg path {
  stroke: #8c9eff;
}
.instagram svg,
.x svg,
.discord svg {
  transition: 0.3s ease-in-out;
}
.instagram:hover svg {
  scale: 1.4;
}
.x:hover svg,
.discord:hover svg {
  scale: 1.25;
}
.instagram:hover:after,
.x:hover:after,
.discord:hover:after {
  scale: 4;
  transform: translateX(0.09em) translateY(0.09em);
}

.instagram::before {
  content: "";
  position: absolute;
  top: -700%;
  left: 1050%;
  rotate: -45deg;
  width: 5em;
  height: 1px;
  background: linear-gradient(90deg, #ffffff, transparent);
  animation: 4s shootingStar ease-in-out infinite;
  transition: 1s ease;
  animation-delay: 1s;
}
.x::before {
  content: "";
  position: absolute;
  top: -1300%;
  left: 850%;
  rotate: -45deg;
  width: 5em;
  height: 1px;
  background: linear-gradient(90deg, #ffffff, transparent);
  animation: 4s shootingStar ease-in-out infinite;
  animation-delay: 3s;
}
.discord::before {
  content: "";
  position: absolute;
  top: -2100%;
  left: 850%;
  rotate: -45deg;
  width: 5em;
  height: 1px;
  background: linear-gradient(90deg, #ffffff, transparent);
  animation: 4s shootingStar ease-in-out infinite;
  animation-delay: 5s;
}
.card:hover .instagram::before,
.card:hover .x::before,
.card:hover .discord::before {
  filter: blur(3px);
}
.image:active ~ .icons .instagram::before,
.image:active ~ .icons .x::before,
.image:active ~ .icons .discord::before {
  animation: none;
  opacity: 0;
}

@keyframes shootingStar {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-55em) translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateX(-70em) translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateX(0) translateY(0);
    opacity: 0;
  }
}

@keyframes move {
  0% {
    transform: translateX(0em) translateY(0em);
  }
  25% {
    transform: translateY(-1em) translateX(-1em);
    rotate: -10deg;
  }
  50% {
    transform: translateY(1em) translateX(-1em);
  }
  75% {
    transform: translateY(-1.25em) translateX(1em);
    rotate: 10deg;
  }
  100% {
    transform: translateX(0em) translateY(0em);
  }
}

@keyframes glowing-stars {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

</style>
    

================================================
FILE: Cards/Praashoo7_silent-sheep-14.html
================================================
<div class="main">
<div class="card">
  <div class="heading">UltraFlex</div>
  <div class="details">Beste Design till date.<br>Flex it up as you wish,<br> but you can't break it.</div>
  <div class="price">$299</div>
  <button class="btn1">Buy</button>
  <button class="btn2">Add to Cart</button>
</div>

<svg class="glasses" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve">  <image id="image0" width="100" height="100" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAA
CXBIWXMAAAsTAAALEwEAmpwYAAASrUlEQVR42u1deXhUVZb/nfeqKjsJYRGUCCSELeAC7YC0WgMJ
EJL4JZhUIy7T9uiM9vh1tz2O0tNOf+i0Ol/7tSiCfg5CuwNaKaAxCYFUAlEQEUUWs0BCKhDW7GSt
SlW9M38EnKp6VamqpBai9fuv7r3vvPO7593t3HNvASGEEEIIIYQQQgghhBBCCCH8pEHBVsBXUGdn
x4lWIVFgGsegMSSREsStTGiVrIqGvcWfnA62jp5gWBskNUtzJ0lSDhNSwbidiASXhZkvM9EBMErD
SbWlsHBzW7D1d4Zha5DUjNzfE9Grg+LA3AvQp2Ber9+l+ybYXGwxbA2Slpl7EaBxQxTDYHwgiYpV
ZZ9tvRxsTgAgDF1E0NDqAxkEwi8FyXxycYbmkWAT6ldomGJRxn0LBQjbQIhjRg+ALwi0jyCds7Jw
WRDRB0kaxaBxIL4DTD8nQvKAQpnXjIwSntVqtdZg8Rq2BgGAxYsfirKE907quDDq1LffbjC7LZ+5
fJbEwuNEeBigWOeluNDcFZ1XXv6+MRichrVBBovMzAdGmtD3PDM/SUSiYz4D2rt+lnL/Cy+8IAVa
t5+kQa5hYUbuAoEon4DxjnkM/LW0MP+ZQOskDl3E8EV9TVXDzUnTPhEFYSEcjELAgslTZxoMNZXH
AqnTT7qFXMOSJZp4SSl9CdA0+xy+AhJu0RdozwZKl+E87fUZ9uzRtjI4g4FG+xyKBfMmBPDD/Ul3
WbYw1FS1TZk24zhAD8HeAIlJU2Y01dVWHQ6EHiGD2KDuVNXpxOSZN4Nwu206g/4xccrsfENtRYu/
dQh1WQ4wR9HvALbzDBMhksjynkaj8fsHHDKIA8q12i4J+BUz269BiO5s65H+w9/vH5azLHWGZpwS
0j0A5jEwGUQJBMT/UIDRzoTTxFwL4Bv0CaV6vfaKN+9Iy8xbC+C3tmkMmEiiO/S7tCf8xW3YGGTp
0uXjzQrxYWI8TIRZXj5uAeMgg/MjBNPGgoKCHncPZGVlRRo57Ih8KozvRkbSfK1W2+cPnte9QdIy
70tmCC8QoAGg8IFIjys0LX35fIjiF/L38ov6Qt2f/MH3up1lqbOz46YkzX6NCBsJdCt8N96NN5lo
X11tpcFdwbra6nOTk2eGE+Fu+xxaMGlqym5DTeV5X/O+Lgf1tCyNWmlWHCPCEwApByrLzH0A6hj4
HIAejMPMbGBmly50SbR0eqpLfBS9wAxH94mCmN+fr9FE+Jr7ddVlrV69WjhwuOJ5Bj/nan+cmSUQ
9hGEnWyVPo+PEY4727/QaDSqlh7cRpCWEtO9INzR/zi/WVqk+403ei3JXH6rlYWviUjloMvrpUW6
3/uyDq4bg6izs+MUZuXHRMhwWoC5l4neVFjEN3fv/qTeW/np6ZoxVquFSkq2N3r7LACkZub9JwEv
26vEEgnCIn2BttxX9XBdGGThvbkpgpW2u9rRY+AjBv2hrFDr8z7bU2g0GrG1h/cTMN9ON2ZDr8J8
65c7d3rcDQ6EoBtkUaYmT2DpXRBFO+YxuFUAPVFSmK8Ntp4AkLpsxVSQ9TsiRNrpyXintCj/X33x
jmDOsigtM3cVAf8LojBZLuM4iFP1hboDQdTRDobaipbE5BldRLTMjghhbmJyyjd1NZU1Q66UYBBb
skQTb1XwZiIsdVqAeSuZIx4rKfmoOxj6uQGlZuTtctSdgYtQWmaX7tgxJAekLxZaXmHRvbm3SBJv
JyDRMY+ZrUR4Tl+ke6Wf43UJtkjWxxSicJxAI68lEjCezYp1AB4YivCAdlmpWZoVxLyTQDfIaaKF
WVheWpT/QSB1GgzO1FZ3JE6d2USgbNt0AmYnJs+oqqupqhis7IB0WVdnKC8R8KyzdzLjmCDS8pLP
tG5Xz9cTUjPzdATcZ08GLWbQrPIi7aXByPT7Sj01J2dUW4+0i4BVcPYBMG+NEIwLhpsxAEBppSdk
276EUQrwhsHK9GsLubrC3U5Ekx3zfhgvCnV/8acO/sairPtyBBa2yzII/6wvyH/XW3l+M0haRu5K
Bm10nLMDABgtEtPKsl3aEn9XWCCQlpG7BUT321PkDon5lr1F2854I8vnsyy1Wq1QRI95EcAqZ9a+
Nl6UDcMuyhXMSsuvlRblXQAmXEsj0AiB8DcAafBixujTWZY6a+VohTJ8R3/srBMwb40QTNnFBTua
glN1/sGZkyeNSdNmVDhGrBBo8uTkmS2GmsqvPZXlsy4rNT33dojYRqBJjnk/lvHCbR1k5r5DoMfs
uaMHLN5euuuTU57I8MksKzUz70EItN+ZMcBoAXH6j90YACD0RTzlLGIFgvV9TyNWhtRlqdVqxZRZ
d7xMwBoiyDaSGHxUEIU0fYHuSLArKxCoqztuTpw26wgzP0JENl0XJvSaYTTUVO53J2PQBlFnrRyt
UIX9nUBOxwsGtkSQKefHNl64Q92pyrOJyTNHEpGdmx7Md0+ePnOn4VTVgEfnBjWGLMpaPkdgcRuA
iY55P5XxYiCkp6eHWYTob0FIsa8bHIuPon8YKMDC6xayKEPzKIG2ETBKlsncLLCQrS/K/+ha0urV
q4WIiAkxtbUnTMGuqEChtrbWOmlqyjcE/Ao24zQRxvWaWTDUVJW5etbjFqLRaFSt3by2P/DABZgP
MpFEwAQwjwWRfRAAoxPE3WBqYIIBgIGBo8zSQW8XUL5Gak7OKMEiLJCY5gE0EcwJAG4iwgSAwh2I
GplxDkQXAJwF4ywRHWKl+YCt+z0tM/fPAP2Xw6ssxHxXSZHu0KANsnTp8vFWhZgPYIH/qoQvASgk
wqd9nc1l5eXlFv+9q7/lfnH4hJog/IKI7wFohqf1MRAJBleDqZwhfWrtjjmoiO46SKDbHIqd7IoU
bv9Kq+11FOBWgdQszZ2QpHwiutGfFWSnbr/D7nWlNezN4uKPO3wpe/Hih6JYZfwXAE/ByRjoY5xh
5jIiegQOdc3Ma0uLdE85PjCgQRZl5D1O4Dccw18CBQa3EbBKX6h7xxfyFmfmaRhYAxsXR7DAzBKD
08qKtu21TXdqkPT09DCzGLXecdXpKURVBEgVDlEVjilTkqBSqVBdXQOLqQdSnxFWk5c7s4wdCins
l4NtLWq1WqGMHr0eoMe9eS48KgZRsSMRExuHmBGx6DX14VzDeVj7egfHQ0aL65XW8FtteckMsihT
cxOBdQTMcyuRCOFjJiJywnSEj7kZEaMTEDYmAWJYFABgxVRg3tW9wdp24O3vAYkBNptgbD4HY/NZ
GJsa0HvhFLov1AA8wClk5v3hgmmp0RihZBXuJOIUgG8AEAtGLBMJYLQD3EGEJiKuFC3iV/PmzWzZ
/03F+wQ8NBCPySlzMWf+AiRNnoiJ40cjIT4CEQr591rRCrxbOQQecmKb9IW6Hz58uzemZWnuAkta
d3eITJo+CzkrHkT8+AQcbglDvZPvdmwk8Ie59ml/qwS+dxECYDV2o736S7Qe3QPj5XpXRjkLwnh3
4aX/X5wlAGec7ccAwPjJ07AsbyXuum06EmI9XwFsrAAqXVzs4REPmaKUpS/SFtoZZPGy3CdZwGsD
kR0RF49/f241Fky/EdccA1YG/noEuOwQ4D8uCnh2jn3ae1XA8Wa3tYgrpw7hYskmmLvbPa4kbxAZ
E4snV/0JqbdMhDgIb94H1cBRd/4HL3jYRqyIAJCWkfsXCPQSQC4/k4TEZKxf+yqm3RgLsmlXAgGt
JshaSZcZuCGy3zAAcLYTKKzvb+oDggjhoycgLkWNLsNRWHq8OmfjFmNvmoh1617HrRPjIQxiktvc
C+w09H+IvuJBQAwkIcFQU6mjxYuXj5WUwsWBLv+KjI7Bxo0bMCba+X7WpkrA2XFIApAYC6gE4FS7
ByQcYOlqQ817z8DS7RujKMPCsWHTJkyIG3jSaJGASz1AixHosQBGC2C0Am3G/i7X6OXVNB7yYNEi
Jio4IkxBVsuA38qjv3naqTEkBvadd24MoH+b7PQQ6lIRPRLj7l6Jc8VvOwjmg8x4WVQI1UpJ2XLp
UnRXYmIb9fQoo3os5rGktM4QmP4boNm2jz34xFNOjcHob8FHGoHaK/3dr9uW7AseTkAAkJaR+xaI
fu1UmEKETrsZkUr7BnSsGSiqB5p63b5jSJAsZlStfxSSyeZFjCP6ovy5Az2XlplbC1CSbdrWT7di
VKR9r9zQBXxaA5zvCgIPWzCv0RfpnhYAQF+k+zcJNA8SPehYbvbPFsiMUdECfFDlf2MAgKBQIvpm
hyOFhFswwKJWrdFEOxojKWWOzBhNvcBbx/1vDJc8wEYCfiGRda6+SPc0YOOJLCvUfs1h5t2OgsYn
yL0Lhy4HNs5TFTvGMUmhzs6OdVVe6BRkkZE3TpwkK3f4MmAK4FVljjyYoSopzM8vK9j+wwae3aev
NCplA3tYuDwwvdMv509dQ1DIdYgwqVxOz0UBsoHCaJF/Qmd8cqJj8DyIiFavXm3X0u0MoFD0ynwB
VzrkWkd5tCzzHax9zvrGTtduFEGS8aiurbdbzH3f0u89CCoP5m7HS9Lspk4FBQU9qZl5JgJ+MGVb
k/wEWJz8g/Ur5HN4NhYXF7vc8FJYVO0W0T7b3NWGTRXAxBH9v890BD68XsaDqN2xjKyLIoeoifpT
FTLFE0cEloip9aLdb2aqHah8cfHHHY4xt6a2i2Bm1Hf0L2KDcdbBkQcYMh5OFoNUZfurrbkJFzvs
B43kOAxqlTsYSKZemJobHFREldsHme3KsNkEY2PwNiWd8gDLeDhbnctCVU7UnrP7HaMCZo9CQNB1
9nuw5DAVYnYbTgOS8+isPx4YpT3mIch0lBlEEli2Ab+7sED2goUTAnO45IqTUCZJRKm75wRJkPG4
UuXejgHkwaJk2euYKDNI2We648yotk07cegLnG62nyHcHAPMl93l6VuYu9vRUWt/kRuDq/Z+pnN7
Qqmvp/Hzq/v0P6D3sgHd50/6V2mPeeCL3bu3X3Qs69ShSMQfOqbl7yiSlcuYCKj8eCiu+asdkCyO
9yPTh5482x8kQVsc05sObvOfwl7wIPBHzso6NYiZVBsYbDeX1+/YihPn7af+UUpgrM9v++iHqfU8
Wr5zcBwwd0Fp8fh0Egm0DoBd9Ern6SPoMhz1j9Ie8mCgMZxMHzsr79Qg5QVbmgkkI77mlVdgsvGh
d5uBRrc3T3kPlqw4V/QW2GofCcREb3tz7LjkM62BwbJWcn73hiHvhw+FB4HXuLqzy+UeSBhUf2aw
3b7YudMnsfqNj3CqjXGms38fpM8Pl3Ff2vshes7bR+8z0GhRmF/yVpbFKv3RsbX3XWlCQ8F6L/e+
fcMDQJ25K3qtq2dcjgA1NSeMiVNnNhIoxzb9ouEkDhnaURk1B+19vp9nNR0uQOMB+U0aAvMTZQXb
PT74cg1naqs7kqammAAssU3va70Aa/cVxCTNgd0WqH95sCTxQ/v0W6pdPTfgkGyoqTqWmDxjBojs
/Ma9l+pgvtKEmKQ5IMFHB3mZcflLLS6Xb3aWuVlfpHt+sKIffkBzqOFC4wJHl3zgeWBdaZFu3UCP
u50jTU2as8dK1gwi2EWiGBvr0VV/AtGTZkMMjxoSB0tvJxoK3kDrd/IzoAw+2iuacxtOnhy0j7m8
vJyTJk3fDZHuAyjeNi9wPPC50tr1T7W1tQM6/D1qq/2xWpLTE1KCMgxjF+Rh1NxlEJTeeR1ZsqL9
xD5c/HwzrD1y5y2D60lU/ly/c+uFIdXUVVy9v3E/AWMDyQOMCsFC9+zZo3X7r0Aed55LslckSBZL
iZNbOgEAiqhYjJy9EHEp9yB8dMKAssxXmtBedQCtx/Toa3d+foUZ1aJSXLLn7580wIdYuFQzTRCl
EiJyqqTPeYC/tZAqvbxgi7sAKABeej/UWStHK9m8Bf1HfV1CGTMKEeOToIobB0VEDABAMvXA1H4Z
xkaD3Ospp1FiJtUDnpLwFur05RMUopjvLjpzqDwY2NYr9j3izeVmXk8vNBqN2NaN55j4j7b7Jr4A
AyYwXoyPov/x9/9AaTQa1dX7V56Cj8/rM7ibIDynL9S+AS89/YOe76VlrJgBsr4KYNlgZdiRYBSJ
gvT0noJt1UOX5jmWZGrmWsFrCLjHFzTArBOtimcGcy8k4AOH7dV/2/wdE+V422IYMBHzdkjSWn3x
9q98UCGDxuJlmkUs8G8BZMLLFsPgbmLKF8j62p7C7UP6Rx7fXRyQkzMKZkU6MS8BaC6Dk51cq9oH
0CkCvgXTHsGKYk9mHoHEonvvv0FgSwaY0wDMvbp2sTPQ1a61GsSHBdAe0Rq221cHi/y2paFWqxUq
VXw8hStGAAAbLR19fa2t/j6q5mtoNBpVi1EcKUh9IxiwKq1iZ0wMWoP5X4chhBBCCCGEEEIIIYQQ
QgghhBBCCCGEEEIIMvwfccYoJVersfQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjMtMDItMTZUMTI6
MzA6NTErMDA6MDAfQVgIAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIzLTAyLTE2VDEyOjMwOjUxKzAw
OjAwbhzgtAAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMy0wMi0xNlQxMjozMDo1MSswMDowMDkJ
wWsAAAAASUVORK5CYII="></image>
</svg>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: card, product, shop */
.card {
  position: relative;
  top: 2em;
  width: 12.5em;
  height: 7.5em;
  background: white;
  transition: .4s ease-in-out;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  overflow: hidden;
}

.heading {
  position: relative;
  color: black;
  font-weight: bold;
  font-size: 1.1em;
  padding-top: 1em;
  padding-left: 1em;
  transition: .4s ease-in-out;
}

.details {
  position: relative;
  color: black;
  font-size: 0.6em;
  padding-top: 1.5em;
  padding-left: 2em;
  transition: .4s ease-in-out;
}

.price {
  position: relative;
  color: black;
  font-weight: bold;
  font-size: 0.8em;
  padding-top: 1.5em;
  padding-left: 1.5em;
  top: 9.6em;
  left: 5em;
  transition: .4s ease-in-out;
}

.btn1 {
  position: relative;
  border: none;
  outline: none;
  background-color: black;
  color: white;
  font-size: 0.6em;
  padding-left: 6.9em;
  padding-right: 6.9em;
  padding-top: 0.8em;
  padding-bottom: 0.85em;
  border-radius: 10px;
  left: 2.6em;
  top: 14.8em;
  transition: .4s ease-in-out;
  font-weight: bold;
}

.btn1:hover {
  background-color: limegreen;
  cursor: pointer;
}

.btn2 {
  position: relative;
  border: none;
  outline: none;
  background-color: black;
  color: white;
  font-size: 0.6em;
  padding-left: 5.1em;
  padding-right: 5.1em;
  padding-top: 0.8em;
  padding-bottom: 0.85em;
  border-radius: 10px;
  left: 2.6em;
  top: 15.5em;
  transition: .4s ease-in-out;
  font-weight: bold;
}

.btn2:hover {
  background-color: limegreen;
  cursor: pointer;
}

.glasses {
  position: relative;
  top: -4em;
  left: 9.5em;
  width: 70px;
  height: 70px;
  transition: .4s ease-in-out;
}

.card:hover {
  width: 12.5em;
  height: 23em;
  transform: translateY(1.25em);
}

.card:hover + .glasses {
  transform: rotateX(360deg);
  height: 100px;
  width: 100px;
  left: 3em;
  top: -18em;
}

.card:hover .heading {
  transform: translateY(7em) translateX(2.3em);
}

.card:hover .details {
  transform: translateY(13em) translateX(3.5em);
}
</style>


================================================
FILE: Cards/Praashoo7_thin-sloth-31.html
================================================
<div class="main">
  <div class="currentplaying">
    <svg height="50px" width="50px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" class="spotify"><radialGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(0 -534)" r="43.888" cy="572.064" cx="33.34" id="ipdIa4~cOclR8yt_ClW93a"><stop stop-color="#f4e9c3" offset="0"></stop><stop stop-color="#f8eecd" offset=".219"></stop><stop stop-color="#fdf4dc" offset=".644"></stop><stop stop-color="#fff6e1" offset="1"></stop></radialGradient><path d="M51.03,37.34c0.16,0.98,1.08,1.66,2.08,1.66h5.39c2.63,0,4.75,2.28,4.48,4.96	C62.74,46.3,60.64,48,58.29,48H49c-1.22,0-2.18,1.08-1.97,2.34c0.16,0.98,1.08,1.66,2.08,1.66h8.39c1.24,0,2.37,0.5,3.18,1.32	C61.5,54.13,62,55.26,62,56.5c0,2.49-2.01,4.5-4.5,4.5h-49c-1.52,0-2.9-0.62-3.89-1.61C3.62,58.4,3,57.02,3,55.5	C3,52.46,5.46,50,8.5,50H14c1.22,0,2.18-1.08,1.97-2.34C15.81,46.68,14.89,44,13.89,44H5.5c-2.63,0-4.75-2.28-4.48-4.96	C1.26,36.7,3.36,35,5.71,35H8c1.71,0,3.09-1.43,3-3.16C10.91,30.22,9.45,29,7.83,29H4.5c-2.63,0-4.75-2.28-4.48-4.96	C0.26,21.7,2.37,20,4.71,20H20c0.83,0,1.58-0.34,2.12-0.88C22.66,18.58,23,17.83,23,17c0-1.66-1.34-3-3-3h-1.18	c-0.62-0.09-1.43,0-2.32,0h-9c-1.52,0-2.9-0.62-3.89-1.61S2,10.02,2,8.5C2,5.46,4.46,3,7.5,3h49c3.21,0,5.8,2.79,5.47,6.06	C61.68,11.92,60.11,14,57.24,14H52c-2.76,0-5,2.24-5,5c0,1.38,0.56,2.63,1.46,3.54C49.37,23.44,50.62,24,52,24h6.5	c3.21,0,5.8,2.79,5.47,6.06C63.68,32.92,61.11,35,58.24,35H53C51.78,35,50.82,36.08,51.03,37.34z" fill="url(#ipdIa4~cOclR8yt_ClW93a)"></path><linearGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(0 -534)" y2="590.253" y1="530.096" x2="32" x1="32" id="ipdIa4~cOclR8yt_ClW93b"><stop stop-color="#42d778" offset="0"></stop><stop stop-color="#3dca76" offset=".428"></stop><stop stop-color="#34b171" offset="1"></stop></linearGradient><path d="M57,32c0,12.837-9.663,23.404-22.115,24.837C33.942,56.942,32.971,57,32,57	c-1.644,0-3.25-0.163-4.808-0.471C15.683,54.298,7,44.163,7,32C7,18.192,18.192,7,32,7S57,18.192,57,32z" fill="url(#ipdIa4~cOclR8yt_ClW93b)"></path><path d="M41.683,44.394c-0.365,0-0.731-0.181-1.096-0.365c-3.471-2.009-7.674-3.105-12.24-3.105	c-2.559,0-5.116,0.364-7.491,0.912c-0.365,0-0.914,0.183-1.096,0.183c-0.914,0-1.461-0.732-1.461-1.462	c0-0.913,0.547-1.463,1.279-1.643c2.923-0.732,5.846-1.096,8.951-1.096c5.116,0,9.866,1.276,13.885,3.655	c0.548,0.364,0.914,0.73,0.914,1.642C43.145,43.847,42.414,44.394,41.683,44.394z M44.241,38.181c-0.547,0-0.912-0.18-1.279-0.364	c-3.835-2.375-9.135-3.839-15.163-3.839c-2.924,0-5.664,0.366-7.674,0.916c-0.549,0.18-0.731,0.18-1.096,0.18	c-1.096,0-1.827-0.912-1.827-1.826c0-1.096,0.549-1.645,1.461-2.009c2.74-0.73,5.481-1.279,9.317-1.279	c6.213,0,12.241,1.463,16.991,4.384c0.73,0.364,1.096,1.096,1.096,1.826C46.069,37.269,45.337,38.181,44.241,38.181z M47.165,30.876	c-0.548,0-0.731-0.182-1.279-0.364c-4.385-2.559-10.961-4.021-17.356-4.021c-3.289,0-6.577,0.366-9.5,1.096	c-0.366,0-0.731,0.182-1.279,0.182c-1.279,0.183-2.193-0.912-2.193-2.192c0-1.279,0.731-2.009,1.644-2.192	c3.471-1.096,7.125-1.462,11.327-1.462c6.943,0,14.25,1.462,19.731,4.567c0.73,0.366,1.278,1.096,1.278,2.193	C49.357,29.961,48.442,30.876,47.165,30.876z" fill="#fff"></path></svg>
    <p class="heading">Currently Playing</p>
  </div>
  <div class="loader">
    <div class="song">
      <p class="name">Time in a Bottle</p>
      <p class="artist">Jim Corce</p>
    </div>
    <div class="albumcover"></div>
    <div class="loading">
      <div class="load"></div>
      <div class="load"></div>
      <div class="load"></div>
      <div class="load"></div>
    </div>
  </div>
  <div class="loader">
    <div class="song">
      <p class="name">My Way</p>
      <p class="artist">Frank Sinatra</p>
    </div>
    <div class="albumcover"></div>
    <div class="play"></div>
  </div>
  <div class="loader">
    <div class="song">
      <p class="name">Lemon Tree</p>
      <p class="artist">Fools Garden</p>
    </div>
    <div class="albumcover"></div>
    <div class="play"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: media, card, spotify, now playing */
.main {
  background-color: white;
  padding: 1em;
  padding-bottom: 1.1em;
  border-radius: 15px;
  margin: 1em;
}

.loader {
  display: flex;
  flex-direction: row;
  height: 4em;
  padding-left: 1em;
  padding-right: 1em;
  transform: rotate(180deg);
  justify-content: right;
  border-radius: 10px;
  transition: .4s ease-in-out;
}

.loader:hover {
  cursor: pointer;
  background-color: lightgray;
}

.currentplaying {
  display: flex;
  margin: 1em;
}

.spotify {
  width: 50px;
  height: 50px;
  margin-right: 0.6em;
}

.heading {
  color: black;
  font-size: 1.1em;
  font-weight: bold;
  align-self: center;
}

.loading {
  display: flex;
  margin-top: 1em;
  margin-left: 0.3em;
}

.load {
  width: 2px;
  height: 33px;
  background-color: limegreen;
  animation: 1s move6 infinite;
  border-radius: 5px;
  margin: 0.1em;
}

.load:nth-child(1) {
  animation-delay: 0.2s;
}

.load:nth-child(2) {
  animation-delay: 0.4s;
}

.load:nth-child(3) {
  animation-delay: 0.6s;
}

.play {
  position: relative;
  left: 0.35em;
  height: 1.6em;
  width: 1.6em;
  clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);
  background-color: black;
  transform: rotate(-90deg);
  align-self: center;
  margin-top: 0.7em;
  justify-self: center;
}

.albumcover {
  position: relative;
  margin-right: 1em;
  height: 40px;
  width: 40px;
  background-color: rgb(233, 232, 232);
  align-self: center;
  border-radius: 5px;
}

.song {
  position: relative;
  transform: rotate(180deg);
  margin-right: 1em;
  color: black;
  align-self: center;
}

.artist {
  font-size: 0.6em;
}

@keyframes move6 {
  0% {
    height: 0.2em;
  }

  25% {
    height: 0.7em;
  }

  50% {
    height: 1.5em;
  }

  100% {
    height: 0.2em;
  }
}
</style>


================================================
FILE: Cards/Pradeepsaranbishnoi_loud-turkey-91.html
================================================
<div class="cardBox">
  <div class="card">
     <div class="h4">Animated card</div>
   
    <div class="content">
      <div class="h3">How's it goin Fam ?</div>
      <p>This is Pradeep Saran, your tech mate!!! I love you all. Lets make this world a better place for all of us. Keep prospering...Keep learning!!!</p>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: card */
.cardBox {
  width: 250px;
  height: 300px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px 0px,
    rgba(0, 0, 0, 0.5) 0px 2px 25px 0px;
}

.card {
  position: absolute;
  width: 95%;
  height: 95%;
  background: #000814;
  border-radius: 20px;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  padding: 20px;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 60px -12px inset,
    rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset;
}

.card .h4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: 800;
  pointer-events: none;
  opacity: .5;
}

.card .content .h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}

.card .content p {
  font-size: 14px;
  line-height: 1.4em;
}

.card .content {
  transform: translateY(100%);
  opacity: 0;
  transition: 0.3s ease-in-out;
}

.card:hover .content {
  transform: translateY(0);
  opacity: 1;
}

.card:hover .h4 {
  opacity: 0;
}

.cardBox::before {
  content: "";
  position: absolute;
  width: 40%;
  height: 150%;
  background: #40E0D0;
  background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
  background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
  transform-origin: center;
  animation: glowing_401 5s linear infinite;
}

@keyframes glowing_401 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

</style>


================================================
FILE: Cards/Pradeepsaranbishnoi_nasty-firefox-56.html
================================================

  <div class="container">
    <div class="card">
      <span class="logo"><svg viewBox="0 0 256 83" height="83" width="256" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient y2="100%" y1="-2.006%" x2="54.877%" x1="45.974%" id="logosVisa0"><stop stop-color="#222357" offset="0%"></stop><stop stop-color="#254AA5" offset="100%"></stop></linearGradient></defs><path transform="matrix(1 0 0 -1 0 82.668)" d="M132.397 56.24c-.146-11.516 10.263-17.942 18.104-21.763c8.056-3.92 10.762-6.434 10.73-9.94c-.06-5.365-6.426-7.733-12.383-7.825c-10.393-.161-16.436 2.806-21.24 5.05l-3.744-17.519c4.82-2.221 13.745-4.158 23-4.243c21.725 0 35.938 10.724 36.015 27.351c.085 21.102-29.188 22.27-28.988 31.702c.069 2.86 2.798 5.912 8.778 6.688c2.96.392 11.131.692 20.395-3.574l3.636 16.95c-4.982 1.814-11.385 3.551-19.357 3.551c-20.448 0-34.83-10.87-34.946-26.428m89.241 24.968c-3.967 0-7.31-2.314-8.802-5.865L181.803 1.245h21.709l4.32 11.939h26.528l2.506-11.939H256l-16.697 79.963h-17.665m3.037-21.601l6.265-30.027h-17.158l10.893 30.027m-118.599 21.6L88.964 1.246h20.687l17.104 79.963h-20.679m-30.603 0L53.941 26.782l-8.71 46.277c-1.022 5.166-5.058 8.149-9.54 8.149H.493L0 78.886c7.226-1.568 15.436-4.097 20.41-6.803c3.044-1.653 3.912-3.098 4.912-7.026L41.819 1.245H63.68l33.516 79.963H75.473" fill="url(#logosVisa0)"></path></svg></span>
      <span class="remove"><svg viewBox="0 0 16 16" class="bi bi-trash-fill" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"></path> </svg></span>
      
      <span class="number">**** **** **** 1320</span>
      <span class="owner">Jhon D.</span>
    </div>
  </div>
  
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: card, debitcard, payment card */
.logo svg {
  height: 48px;
  width: 54px;
}

::selection {
  background-color: rgba(0, 0, 0, 0);
}

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.card {
  background: radial-gradient(circle, white 0%, #d5d5d5 100%);
  width: 300px;
  height: 200px;
  border-radius: 20px;
  position: relative;
  box-shadow: 3px 3px 17px 0px rgba(0, 0, 0, 0.55);
}

.card .remove, .card .logo {
  position: absolute;
  display: inline-block;
  cursor: pointer;
}

.card .remove {
  top: 30px;
  right: 30px;
  opacity: .9;
  color: black;
}

.card .remove:hover {
  color: #f06b5d;
}

.card .logo {
  top: 20px;
  left: 30px;
  font-size: 3em;
  opacity: 1;
}

.card .number, .card .owner {
  display: block;
  position: absolute;
  left: 30px;
  cursor: default;
  color: black;
  opacity: .9;
  transition: color .7s ease-out;
}

.card .number {
  bottom: 60px;
  letter-spacing: 4px;
}

.card .owner {
  bottom: 30px;
  letter-spacing: 1px;
}

</style>


================================================
FILE: Cards/Pradeepsaranbishnoi_quick-horse-75.html
================================================
<div class="card wallet">
    <div class="overlay"></div>
    <div class="circle">


        <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="23 29 78 60" height="60px" width="78px">
  
            <defs></defs>
            <g transform="translate(23.000000, 29.500000)" fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="icon">
                <rect rx="4.70247832" height="21.8788565" width="9.40495664" y="26.0333433" x="67.8357511" fill="#AC8BE9" id="Rectangle-3"></rect>
                <rect rx="4.70247832" height="10.962961" width="9.40495664" y="38.776399" x="67.8357511" fill="#6A5297" id="Rectangle-3"></rect>
                <polygon points="57.3086772 0 67.1649301 26.3776902 14.4413177 45.0699507 4.58506484 18.6922605" fill="#6A5297" id="Rectangle-2">
                </polygon>
                <path fill="#8B6FC0" id="Rectangle" d="M0,19.6104296 C0,16.2921718 2.68622235,13.6021923 5.99495032,13.6021923 L67.6438591,13.6021923 C70.9547788,13.6021923 73.6388095,16.2865506 73.6388095,19.6104296 L73.6388095,52.6639057 C73.6388095,55.9821635 70.9525871,58.672143 67.6438591,58.672143 L5.99495032,58.672143 C2.68403068,58.672143 0,55.9877847 0,52.6639057 L0,19.6104296 Z"></path>
                <path fill="#F6F1FF" id="Fill-12" d="M47.5173769,27.0835169 C45.0052827,24.5377699 40.9347162,24.5377699 38.422622,27.0835169 L36.9065677,28.6198808 L35.3905134,27.0835169 C32.8799903,24.5377699 28.8078527,24.5377699 26.2957585,27.0835169 C23.7852354,29.6292639 23.7852354,33.7559532 26.2957585,36.3001081 L36.9065677,47.0530632 L47.5173769,36.3001081 C50.029471,33.7559532 50.029471,29.6292639 47.5173769,27.0835169"></path>
                <rect height="12.863158" width="15.6082259" y="26.1162588" x="58.0305835" fill="#AC8BE9" id="Rectangle-4"></rect>
                <ellipse ry="2.23319575" rx="2.20116007" cy="33.0919007" cx="65.8346965" fill="#FFFFFF" id="Oval">
                </ellipse>
            </g>
        </svg>

    </div>
    <p>Wallet</p>
</div>

<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: card */
.wallet {
  --bg-color: #ceb2fc;
  --bg-color-light: #f0e7ff;
  --text-color-hover: #fff;
  --box-shadow-color: rgba(206, 178, 252, 0.48);
}

.card {
  width: 220px;
  height: 321px;
  background: #fff;
  border-top-right-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease-out;
  text-decoration: none;
}

.card:hover {
  transform: translateY(-5px) scale(1.005) translateZ(0);
  box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11),
    0 24px 46px var(--box-shadow-color);
}

.card:hover .overlay {
  transform: scale(4) translateZ(0);
}

.card:hover .circle {
  border-color: var(--bg-color-light);
  background: var(--bg-color);
}

.card:hover .circle:after {
  background: var(--bg-color-light);
}

.card:hover p {
  color: var(--text-color-hover);
}

.card p {
  font-size: 17px;
  color: #4c5656;
  margin-top: 30px;
  z-index: 1000;
  transition: color 0.3s ease-out;
}

.circle {
  width: 131px;
  height: 131px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-out;
}

.circle:after {
  content: "";
  width: 118px;
  height: 118px;
  display: block;
  position: absolute;
  background: var(--bg-color);
  border-radius: 50%;
  top: 7px;
  left: 7px;
  transition: opacity 0.3s ease-out;
}

.circle svg {
  z-index: 10000;
  transform: translateZ(0);
}

.overlay {
  width: 118px;
  position: absolute;
  height: 118px;
  border-radius: 50%;
  background: var(--bg-color);
  top: 70px;
  left: 50px;
  z-index: 0;
  transition: transform 0.3s ease-out;
}
</style>


================================================
FILE: Cards/Pradeepsaranbishnoi_strong-treefrog-90.html
================================================
<input id="switch" type="checkbox">
<div class="app">
  <div class="body">
    
    <div class="phone">
    
      <div class="menu">
        <div class="time">4:20</div>
        <div class="icons">
          <div class="network"></div>
          <div class="battery"></div>
        </div>
      </div>
    
      <div class="content">
        <div class="circle">
          <div class="crescent"></div>
        </div>
       
        <label for="switch">
          <div class="toggle"></div>
          <div class="names">
            <p class="light">Light</p>
            <p class="dark">Dark</p>
          </div>
        </label>
        
       
      </div>
      
    </div>
  </div>
  
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: animation, card, dark, theme, light */
/* GENERAL */

.credit {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  color: white;
}

.credit a {
  color: inherit;
}

/* Main Circle */
.main-circle {
  width: 40rem;
  height: 40rem;
  border-radius: 100%;
  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
  position: absolute;
  z-index: 1;
  left: 50%;
  -webkit-transform: translate(-50%, -70%);
  -ms-transform: translate(-50%, -70%);
  transform: translate(-50%, -70%)
}

/* Phone */
.phone {
  position: relative;
  z-index: 2;
  width: 18rem;
  height: 17rem;
  background-color: inherit;
  -webkit-box-shadow: 0 4px 35px rgba(0,0,0,.1);
  box-shadow: 0 4px 35px rgba(0,0,0,.1);
  border-radius: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}



/* Top */
.menu {
/*   background-color: blue; */
  font-size: 80%;
  opacity: .4;
  padding: .8rem 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: .5rem;
}

.battery {
  width: .85rem;
  height: .45rem;
  background-color: black;
}

.network {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6.8px 7.2px 6.8px;
  border-color: transparent transparent black transparent;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  margin: .12rem .5rem;
}

/* Middle */
.content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: auto;
  text-align: center;
  width: 70%;
  -webkit-transform: translateY(5%);
  -ms-transform: translateY(5%);
  transform: translateY(5%);
}

.circle {
  position: relative;
  border-radius: 100%;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
  margin: auto;
}

.crescent {
  position: absolute;
  border-radius: 100%;
  right: 0;
  width: 6rem;
  height: 6rem;
  background: white;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

label, .toggle {
  height: 2.8rem;
  border-radius: 100px;
}

label {
  width: 100%;
  background-color: rgba(0,0,0,.1);
  border-radius: 100px;
  position: relative;
  margin: 1.8rem 0 4rem 0;
  cursor: pointer;
}

.toggle {
  position: absolute;
  width: 50%;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 15px rgba(0,0,0,.15);
  box-shadow: 0 2px 15px rgba(0,0,0,.15);
  -webkit-transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.names {
  font-size: 90%;
  font-weight: bolder;
  color: black;
  width: 65%;
  margin-left: 17.5%;
  margin-top: 6.5%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.dark {
  opacity: .5;
}

.mark {
  border-radius: 100px;
  background-color: black;
}

.time {
  color: black;
}
/* -------- Switch Styles ------------*/
[type="checkbox"] {
  display: none;
}
/* Toggle */
[type="checkbox"]:checked + .app .toggle {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  background-color: #34323D;
}

[type="checkbox"]:checked + .app .dark {
  opacity: 1;
  color: white;
}

[type="checkbox"]:checked + .app .light {
  opacity: 1;
  color: white;
}
/* App */
[type="checkbox"]:checked + .app .body {
  background-color: #26242E;
  color: white;
}
/* Circle */
[type="checkbox"]:checked + .app .crescent {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  background: #26242E;
}

[type="checkbox"]:checked + .app .circle {
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
}

[type="checkbox"]:checked + .app .main-circle {
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
}

[type="checkbox"]:checked + .time {
  color: white;
}

[type="checkbox"]:checked + .app .body .phone .menu .time {
  color: white;
}

[type="checkbox"]:checked + .app .body .phone .menu .icons .network {
  border-color: transparent transparent white transparent;
}

[type="checkbox"]:checked + .app .body .phone .menu .icons .battery {
  background-color: white;
}

[type="checkbox"]:checked + .app .body {
  border-radius: 40px;
  ;
}

.menu {
/*   background-color: blue; */
  font-size: 80%;
  opacity: .4;
  padding: .8rem 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

</style>


================================================
FILE: Cards/Pranali9922_honest-grasshopper-12.html
================================================
<div class="card">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="card-inner"></div>
</div>

<style>
/* From Uiverse.io by Pranali9922  - Tags: card, cool card, card animation, card hover */
.card {
  width: 200px;
  height: 200px;
  transition: all 0.2s;
  position: relative;
  cursor: pointer;
}

.card-inner {
  width: inherit;
  height: inherit;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  border-radius: 8px;
}

.card:hover {
  transform: scale(1.04) rotate(1deg);
}

.circle {
  width: 100px;
  height: 100px;
  background: repeating-linear-gradient(48deg, #3023ae 0%, #ff0099 100%);
  border-radius: 35% 30% 75% 30% / 49% 30% 70% 51%;
  position: absolute;
  animation: move-up6 2s ease-in infinite alternate-reverse;
}

.circle:nth-child(1) {
  top: -25px;
  left: -25px;
}

.circle:nth-child(2) {
  bottom: -25px;
  right: -25px;
  animation-name: move-down1;
}

@keyframes move-up6 {
  to {
    transform: translateY(-10px);
  }
}

@keyframes move-down1 {
  to {
    transform: translateY(10px);
  }
}

</style>
    

================================================
FILE: Cards/Prince4fff_slippery-baboon-37.html
================================================
<div class="card">
   <a class="card1" href="#">
    <p>This is heading</p>
    <p class="small">Card description with lots of great facts and interesting details.</p>
    <div class="go-corner" href="#">
      <div class="go-arrow">
        →
      </div>
    </div>
  </a>
</div>
<style>
/* From Uiverse.io by Prince4fff - Tags: card */
.card p {
  font-size: 17px;
  font-weight: 400;
  line-height: 20px;
  color: #666;
}

.card p.small {
  font-size: 14px;
}

.go-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 32px;
  height: 32px;
  overflow: hidden;
  top: 0;
  right: 0;
  background-color: #00838d;
  border-radius: 0 4px 0 32px;
}

.go-arrow {
  margin-top: -4px;
  margin-right: -4px;
  color: white;
  font-family: courier, sans;
}

.card1 {
  display: block;
  position: relative;
  max-width: 262px;
  background-color: #f2f8f9;
  border-radius: 4px;
  padding: 32px 24px;
  margin: 12px;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
}

.card1:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -16px;
  right: -16px;
  background: #00838d;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.25s ease-out;
}

.card1:hover:before {
  transform: scale(21);
}

.card1:hover p {
  transition: all 0.3s ease-out;
  color: rgba(255, 255, 255, 0.8);
}

.card1:hover h3 {
  transition: all 0.3s ease-out;
  color: #fff;
}

.card2 {
  display: block;
  top: 0px;
  position: relative;
  max-width: 262px;
  background-color: #f2f8f9;
  border-radius: 4px;
  padding: 32px 24px;
  margin: 12px;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
  border: 1px solid #f2f8f9;
}

.card2:hover {
  transition: all 0.2s ease-out;
  box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
  top: -4px;
  border: 1px solid #ccc;
  background-color: white;
}

.card2:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -16px;
  right: -16px;
  background: #00838d;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  transform: scale(2);
  transform-origin: 50% 50%;
  transition: transform 0.15s ease-out;
}

.card2:hover:before {
  transform: scale(2.15);
}

.card3 {
  display: block;
  top: 0px;
  position: relative;
  max-width: 262px;
  background-color: #f2f8f9;
  border-radius: 4px;
  padding: 32px 24px;
  margin: 12px;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid #f2f8f9;
}

.card3 .go-corner {
  opacity: 0.7;
}

.card3:hover {
  border: 1px solid #00838d;
  box-shadow: 0px 0px 999px 999px rgba(255, 255, 255, 0.5);
  z-index: 500;
}

.card3:hover p {
  color: #00838d;
}

.card3:hover .go-corner {
  transition: opactiy 0.3s linear;
  opacity: 1;
}

.card4 {
  display: block;
  top: 0px;
  position: relative;
  max-width: 262px;
  background-color: #fff;
  border-radius: 4px;
  padding: 32px 24px;
  margin: 12px;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid #ccc;
}

.card4 .go-corner {
  background-color: #00838d;
  height: 100%;
  width: 16px;
  padding-right: 9px;
  border-radius: 0;
  transform: skew(6deg);
  margin-right: -36px;
  align-items: start;
  background-image: linear-gradient(-45deg, #8f479a 1%, #dc2a74 100%);
}

.card4 .go-arrow {
  transform: skew(-6deg);
  margin-left: -2px;
  margin-top: 9px;
  opacity: 0;
}

.card4:hover {
  border: 1px solid #cd3d73;
}

.card4 h3 {
  margin-top: 8px;
}

.card4:hover .go-corner {
  margin-right: -12px;
}

.card4:hover .go-arrow {
  opacity: 1;
}
</style>


================================================
FILE: Cards/PriyanshuGupta28_cuddly-gecko-29.html
================================================
<div class="card"></div>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: card, card hover, 3d card */
.card {
  width: 190px;
  height: 254px;
  border-radius: 1rem;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
</style>


================================================
FILE: Cards/PriyanshuGupta28_silly-turtle-43.html
================================================
<div class="card">
  <p class="heading">Form</p>
  
 <div class="input-div">
    <input type="text" class="input" placeholder="Email">
    </div>
    <div class="input-div">
    <input class="input" type="text" placeholder="Phone">
    </div>
    <div class="input-div">
    <input class="input" type="text" placeholder="Message">
    </div>
    <div class="button-div">
      <button class="submit">Submit</button>
    </div>
</div>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: contacts form */
.card {
  height: 20rem;
  background: lightgrey;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  border-top-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  padding: 1rem;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  transition: 0.5s ease-in-out;
}

.heading {
  text-align: center;
  font-weight: 600;
  padding-top: 1rem;
  font-size: large;
}

.input-div {
  display: flex;
  margin-top: 1rem;
  transition: 0.5s ease-in-out;
}

.card input {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid black;
  width: 12rem;
  padding: 8px;
  outline: none;
}

.button-div {
  text-align: center;
}

.submit {
  margin-top: 3rem;
  text-align: center;
  padding: 8px 3rem;
  border: none;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  background-color: black;
  color: white;
  transition: 0.5s ease-in-out;
  cursor: pointer
}

.submit:hover {
  box-shadow: rgba(44, 43, 43, 0.664) 5px 5px, rgba(45, 45, 45, 0.3) 10px 10px, rgba(60, 59, 59, 0.2) 15px 15px, rgba(54, 53, 53, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
}

.card input::placeholder {
  color: black;
}

.input:focus {
  transition: 0.2s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.input:hover {
  transition: 0.2s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}


</style>


================================================
FILE: Cards/PriyanshuGupta28_sour-rat-57.html
================================================
<div class="toast">
    
    <div class="toast-content">
      This is a toast message.
    </div>
    <div class="toast-icon">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 0h24v24H0z" fill="none"></path>
        <path d="M15.795 8.342l-5.909 9.545a1 1 0 0 1-1.628 0l-3.182-4.909a1 1 0 0 1 1.629-1.165l2.556 3.953L14.165 7.51a1 1 0 0 1 1.63 1.165z"></path>
      </svg>
    </div>
  </div>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: alert, card, toast, aleartToast */
.toast {
  bottom: 20px;
  right: 20px;
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toast-icon svg {
  width: 30px;
  height: 20px;
  fill: #fff;
}

.toast-content {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

</style>


================================================
FILE: Cards/ProgramaConPid_dangerous-shrimp-68.html
================================================
<div class="card">
    <span class="card__hover">Hover Here!</span>

    
    <figure class="card__figure">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;">
        <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8 0-1.168.258-2.275.709-3.276.154.09.308.182.456.276.396.25.791.5 1.286.688.494.187 1.088.312 1.879.312.792 0 1.386-.125 1.881-.313s.891-.437 1.287-.687.792-.5 1.287-.688c.494-.187 1.088-.312 1.88-.312s1.386.125 1.88.313c.495.187.891.437 1.287.687s.792.5 1.287.688c.178.067.374.122.581.171.191.682.3 1.398.3 2.141 0 4.411-3.589 8-8 8z"></path>
        <circle cx="8.5" cy="12.5" r="1.5"></circle>
        <circle cx="15.5" cy="12.5" r="1.5"></circle>
      </svg>
    </figure>

    
    <div class="card__info">
      <span class="card__name">Jackson Williams
      <span class="card__ocupation">  Frontend Developer </span>
      <div class="card__links">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;"><path d="M13.397 20.997v-8.196h2.765l.411-3.209h-3.176V7.548c0-.926.258-1.56 1.587-1.56h1.684V3.127A22.336 22.336 0 0 0 14.201 3c-2.444 0-4.122 1.492-4.122 4.231v2.355H7.332v3.209h2.753v8.202h3.312z"></path></svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;"><path d="M11.999 7.377a4.623 4.623 0 1 0 0 9.248 4.623 4.623 0 0 0 0-9.248zm0 7.627a3.004 3.004 0 1 1 0-6.008 3.004 3.004 0 0 1 0 6.008z"></path><circle cx="16.806" cy="7.207" r="1.078"></circle><path d="M20.533 6.111A4.605 4.605 0 0 0 17.9 3.479a6.606 6.606 0 0 0-2.186-.42c-.963-.042-1.268-.054-3.71-.054s-2.755 0-3.71.054a6.554 6.554 0 0 0-2.184.42 4.6 4.6 0 0 0-2.633 2.632 6.585 6.585 0 0 0-.419 2.186c-.043.962-.056 1.267-.056 3.71 0 2.442 0 2.753.056 3.71.015.748.156 1.486.419 2.187a4.61 4.61 0 0 0 2.634 2.632 6.584 6.584 0 0 0 2.185.45c.963.042 1.268.055 3.71.055s2.755 0 3.71-.055a6.615 6.615 0 0 0 2.186-.419 4.613 4.613 0 0 0 2.633-2.633c.263-.7.404-1.438.419-2.186.043-.962.056-1.267.056-3.71s0-2.753-.056-3.71a6.581 6.581 0 0 0-.421-2.217zm-1.218 9.532a5.043 5.043 0 0 1-.311 1.688 2.987 2.987 0 0 1-1.712 1.711 4.985 4.985 0 0 1-1.67.311c-.95.044-1.218.055-3.654.055-2.438 0-2.687 0-3.655-.055a4.96 4.96 0 0 1-1.669-.311 2.985 2.985 0 0 1-1.719-1.711 5.08 5.08 0 0 1-.311-1.669c-.043-.95-.053-1.218-.053-3.654 0-2.437 0-2.686.053-3.655a5.038 5.038 0 0 1 .311-1.687c.305-.789.93-1.41 1.719-1.712a5.01 5.01 0 0 1 1.669-.311c.951-.043 1.218-.055 3.655-.055s2.687 0 3.654.055a4.96 4.96 0 0 1 1.67.311 2.991 2.991 0 0 1 1.712 1.712 5.08 5.08 0 0 1 .311 1.669c.043.951.054 1.218.054 3.655 0 2.436 0 2.698-.043 3.654h-.011z"></path></svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;"><path d="M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z"></path></svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;"><circle cx="4.983" cy="5.009" r="2.188"></circle><path d="M9.237 8.855v12.139h3.769v-6.003c0-1.584.298-3.118 2.262-3.118 1.937 0 1.961 1.811 1.961 3.218v5.904H21v-6.657c0-3.27-.704-5.783-4.526-5.783-1.835 0-3.065 1.007-3.568 1.96h-.051v-1.66H9.237zm-6.142 0H6.87v12.139H3.095z"></path></svg>
      </div>
    </span></div>
  </div>

<style>
/* From Uiverse.io by ProgramaConPid - Tags: neumorphism, card, modern, html, css, cardhover , card animation */
/* Card Styles */
.card {
  width: 300px;
  height: 400px;
  padding: 15px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background-color: rgba(113, 113, 113, 0.6);
  backdrop-filter: blur(20px);
  text-align: center;
  border: 1px solid #fff;
  /* Transform Propertys */
  --rotate-animation: rotate(45deg);
  --scale-animation: scale(0);
  /* Backgrounds - Social Media Hover */
  --bg-facebook: blue;
  --bg-instagram: linear-gradient(to right, #8a2387, #e94057, #f27121);
  --bg-twitter: rgb(25, 173, 206);
  --bg-linkedin: rgb(30, 48, 131);
}

.card::before {
  content: '';
  height: 110%;
  width: 110%;
  position: absolute;
  top: -5%;
  left: -5%;
  z-index: -1;
  background: linear-gradient(
    to right,
    #0f0c29,
    #302b63,
    #24243e
  );
  filter: blur(30px);
}

.card__hover {
  color: #fff;
  width: 100%;
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  position: absolute;
  top: 50%;
  left: 0;
  text-align: center;
  letter-spacing: 2px;
  pointer-events: none;
  transform: scale(1) translateY(-50%);
  font-family: var(--font-mulish);
  transition: transform 500ms;
}

.card:hover .card__hover {
  transform: scale(0);
}

.card__figure {
  width: 100%;
  height: 65%;
  border-radius: 10px;
  overflow: hidden;
  transform: var(--rotate-animation) var(--scale-animation);
  transition: transform 600ms ease 100ms;
}

.card:hover .card__figure {
  --rotate-animation: rotate(0);
  --scale-animation: scale(1);
}

.card__figure svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: drop-shadow(0 0 2px #0f0c29);
}

.card__info {
  display: flex;
  flex-direction: column;
  transform: var(--scale-animation);
  transition: transform 600ms ease 100ms;
}

.card:hover .card__info {
  --scale-animation: scale(1);
}

.card__name {
  color: #fff;
  font-size: 28px;
  letter-spacing: 1px;
  font-family: var(--font-AR-One-Sans);
}

.card__ocupation {
  color: aliceblue;
  font-family: var(--font-mulish);
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 2px;
}

.card__links {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  --transform-animation: translateY(-10px);
}

.card__links svg {
  height: 55px;
  width: 55px;
  padding: 10px;
  background-color: rgba(128, 128, 128, 0.211);
  border-radius: 15px;
  cursor: pointer;
  transition: background .3s ease,
              transform .2s ease;
}

.card__links svg:hover {
  transform: var(--transform-animation);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
}

/* Hover Colors */
.card__links svg:nth-child(1):hover {
  background: var(--bg-facebook);
}

.card__links svg:nth-child(2):hover {
  background: var(--bg-instagram);
}

.card__links svg:nth-child(3):hover {
  background: var(--bg-twitter);
}

.card__links svg:nth-child(4):hover {
  background: var(--bg-linkedin);
}


</style>


================================================
FILE: Cards/Qasimsaifi_brown-cheetah-82.html
================================================
<!-- From Uiverse.io by Qasimsaifi - Tags: blue, card, card template, cool card, cardhover , card animation -->
<div class="w-80 p-4 bg-white rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
        <img class="w-full h-40 object-cover rounded-t-lg" alt="Card Image" src="https://via.placeholder.com/150">
        <div class="p-4">
            <h2 class="text-xl  font-semibold">Beautiful Card</h2>
            <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ante sit amet tellus ornare tincidunt.</p>
            <div class="flex justify-between items-center mt-4">
                <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400">Learn More</button>
            </div>
        </div>
    </div>



================================================
FILE: Cards/RashadGhzi_bad-pig-34.html
================================================
<!-- From Uiverse.io by RashadGhzi  - Tags: simple, card, hover effect, tailwindcss -->
<div
  class="card font-sans bg-white rounded-lg overflow-hidden w-96 transform transition duration-500 hover:shadow-2xl"
>
  <div
    class="p-4 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-white"
  >
    <div class="flex justify-between items-center">
      <div class="text-lg font-montserrat font-bold">Social Media</div>
      <div class="flex space-x-4">
        <a href="#" class="hover:text-gray-200">
          <svg
            class="w-6 h-6 scale-100 ease-out transistion duration-300 hover:scale-75"
            fill="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M22.675 0H1.325C.593 0 0 .592 0 1.326v21.348C0 23.406.592 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.896-4.788 4.66-4.788 1.325 0 2.462.099 2.794.143v3.239h-1.918c-1.505 0-1.795.716-1.795 1.764v2.315h3.588l-.467 3.622h-3.121V24h6.116c.73 0 1.325-.594 1.325-1.326V1.326C24 .592 23.408 0 22.675 0"
            ></path>
          </svg>
        </a>
        <a href="#" class="hover:text-gray-200">
          <svg
            class="w-6 h-6 w-6 h-6 scale-100 ease-out transistion duration-300 hover:scale-75"
            fill="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M23.954 4.569c-.885.392-1.83.656-2.825.775a4.93 4.93 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195 4.916 4.916 0 00-8.384 4.482A13.94 13.94 0 011.671 3.149a4.916 4.916 0 001.524 6.574 4.902 4.902 0 01-2.228-.616c-.054 2.28 1.581 4.415 3.95 4.89a4.932 4.932 0 01-2.224.084c.623 1.941 2.432 3.355 4.578 3.396A9.867 9.867 0 010 21.543a13.933 13.933 0 007.548 2.209c9.058 0 14.01-7.503 14.01-14.01 0-.213 0-.426-.015-.637a10.012 10.012 0 002.457-2.548l-.047-.02z"
            ></path>
          </svg>
        </a>
        <a href="#" class="hover:text-gray-200">
          <svg
            class="w-6 h-6 w-6 h-6 scale-100 ease-out transistion duration-300 hover:scale-75"
            fill="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12.004 2.029C6.475 2.029 2.005 6.499 2.005 12.027c0 4.432 2.869 8.19 6.84 9.514.5.092.684-.217.684-.482 0-.24-.008-.874-.013-1.716-2.782.606-3.37-1.34-3.37-1.34-.454-1.152-1.11-1.459-1.11-1.459-.907-.62.069-.607.069-.607 1.003.071 1.532 1.03 1.532 1.03.89 1.526 2.337 1.085 2.906.83.091-.646.35-1.085.636-1.334-2.22-.253-4.555-1.11-4.555-4.942 0-1.091.39-1.983 1.029-2.682-.103-.253-.447-1.273.098-2.655 0 0 .84-.268 2.75 1.026A9.55 9.55 0 0112 6.856a9.55 9.55 0 012.506.338c1.908-1.294 2.746-1.026 2.746-1.026.547 1.382.203 2.402.1 2.655.64.699 1.027 1.591 1.027 2.682 0 3.842-2.339 4.685-4.566 4.934.36.31.68.922.68 1.856 0 1.34-.012 2.421-.012 2.75 0 .267.181.579.689.48 3.973-1.325 6.837-5.083 6.837-9.514 0-5.528-4.471-9.998-9.996-9.998z"
            ></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
  <div class="p-6 font-montserrat">
    <div class="text-black text-xl font-bold mb-2">Advanced 3D Card</div>
    <div class="text-gray-700 mb-4">
      This card showcases complex animations and 3D effects using Tailwind CSS.
      Hover to see the interaction!
    </div>
    <a
      href="#"
      class="inline-block font-mono text-sm font-bold bg-slate-500 text-white py-2 px-4 rounded-full transition duration-100 transform hover:opacity-75"
      >Learn More</a
    >
  </div>
  <div class="p-4 bg-gray-100 text-center">
    <div class="text-gray-600 font-mono text-sm">© 2024 Your Company</div>
  </div>
</div>


    

================================================
FILE: Cards/RashadGhzi_tasty-bulldog-46.html
================================================
<!-- From Uiverse.io by RashadGhzi  - Tags: simple, card, modern, futuristic, creative, card template, tailwindcss -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-xs font-serif">
  <div class="relative">
    <svg
      fill="currentColor"
      viewBox="0 0 24 24"
      class="absolute -top-6 -right-6 w-24 h-24 text-indigo-400 opacity-25"
    >
      <path
        d="M12 0l3.094 9.488h9.956L15.49 15.338 18.585 24 12 18.512 5.415 24l3.094-8.662L0 9.488h9.956z"
      ></path>
    </svg>
    <svg
      fill="currentColor"
      viewBox="0 0 24 24"
      class="w-16 h-16 mx-auto text-indigo-600"
    >
      <path
        d="M12 0l3.094 9.488h9.956L15.49 15.338 18.585 24 12 18.512 5.415 24l3.094-8.662L0 9.488h9.956z"
      ></path>
    </svg>
  </div>
  <div class="mt-4 text-center">
    <div class="text-2xl font-semibold text-gray-900 font-mono">
      Unique Card Title
    </div>
    <div class="mt-2 text-gray-600">
      This is a unique card design featuring an abstract SVG pattern. It's
      modern, minimalist, and stands out from the usual card designs.
    </div>
    <button
      class="mt-6 px-4 py-2 bg-indigo-600 text-white text-sm w-full rounded shadow-md hover:bg-indigo-700 transition ease-out duration-300 hover:scale-95"
    >
      Learn More
    </button>
  </div>
</div>


    

================================================
FILE: Cards/Rodrypaladin_fluffy-eagle-31.html
================================================
<div class="card">
  <div class="top">
    <div class="metal"></div>
    <div class="plastic"></div>
  </div>
  <div class="bottom">
    <div class="line1"></div>
    <div class="yellow"></div>
  </div>
  <div class="minicuadro1"></div>
  <div class="minicuadro2"></div>
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
  <div class="line4"></div>
  <div class="line5"></div>
  <p class="index">Index</p>
</div>
<style>
/* From Uiverse.io by Rodrypaladin - Tags: card, hover, about me, custom, creative, click animation */
.card {
  width: 300px;
  height: 300px;
  background-image: linear-gradient(to right bottom, #252324, #292728, #2d2c2d, #313031, #353535);
  position: relative;
  border-radius: 5px;
  box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.307);
}

.top {
  position: absolute;
  width: 65%;
  height: 37%;
  top: 0;
  left: 37px;
  background-image: linear-gradient(to right bottom, #202020, #222222, #232323, #252525, #272727);
  z-index: 500;
  border-top: 4px solid #e8e8e8;
  border-right: 3px solid #121212;
  border-bottom: 3px solid #121212;
  border-left: 3px solid #121212;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.plastic {
  position: absolute;
  top: 0;
  right: 60px;
  width: 60px;
  background-color: black;
  height: 100%;
  z-index: 1000;
  border-top: 25px solid white;
}

.bottom {
  z-index: 1000;
  position: absolute;
  bottom: 1px;
  right: 50%;
  transform: translate(50%,0);
  width: 75%;
  height: 52%;
  background-color: #ecebe0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-top: 3px solid #121212;
  border-left: 3px solid #121212;
  border-right: 3px solid #121212;
  border-radius: 10px;
}

.metal {
  z-index: 2000;
  position: absolute;
  top: -3px;
  right: 0;
  width: 77%;
  height: 103%;
  background-image: linear-gradient(to right bottom, #bdbdbd, #cacaca, #d7d7d7, #e5e5e5, #f2f2f2);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: transform 0.2s ease-in;
  clip-path: polygon(0% 0%, 0% 100%, 60% 100%, 60% 18%, 85% 18%, 85% 93%, 25% 93%, 25% 100%, 100% 100%, 100% 0%);
}

.cuadro-metal {
  position: absolute;
  top: 15px;
  right: 45px;
  width: 40px;
  transform: translate(50%,0);
  height: 80px;
  background-color: #252324;
  z-index: 2000;
  transition: transform 0.2s ease-in;
  border-radius: 3px;
}

.card:hover .metal {
  transform: translateX(-44px);
}

.card:hover .cuadro-metal {
  transform: translateX(-30px);
}

.minicuadro1 {
  bottom: 25px;
  right: 12px;
  position: absolute;
  width: 17px;
  height: 17px;
  background-color: #d7d7d7;
  border: 2px solid #191919;
}

.minicuadro2 {
  bottom: 25px;
  left: 12px;
  position: absolute;
  width: 17px;
  height: 17px;
  background-image: linear-gradient(to right bottom, #191919, #202020, #272727, #2e2e2e, #353535);
  border: 2px solid #191919;
}

.yellow {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 23px;
  background-color: rgb(255, 157, 0);
}

.line1 {
  position: absolute;
  bottom: 42px;
  right: 61.5%;
  transform: translate(50%,0);
  width: 125px;
  height: 2px;
  background-color: rgb(192, 33, 33);
}

.line2 {
  position: absolute;
  bottom: 64px;
  right: 50%;
  transform: translate(50%,0);
  width: 175px;
  height: 2px;
  background-color: rgb(192, 33, 33);
  z-index: 2000;
}

.line3 {
  position: absolute;
  bottom: 86px;
  right: 50%;
  transform: translate(50%,0);
  width: 175px;
  height: 2px;
  background-color: rgb(192, 33, 33);
  z-index: 2000;
}

.line4 {
  position: absolute;
  bottom: 108px;
  right: 50%;
  transform: translate(50%,0);
  width: 175px;
  height: 2px;
  background-color: rgb(192, 33, 33);
  z-index: 2000;
}

.line5 {
  position: absolute;
  bottom: 130px;
  right: 50%;
  transform: translate(50%,0);
  width: 175px;
  height: 2px;
  background-color: rgb(192, 33, 33);
  z-index: 2000;
}

.index {
  position: absolute;
  bottom: 35px;
  right: 62px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: rgb(192, 33, 33);
  z-index: 2000;
}


</style>


================================================
FILE: Cards/Rodrypaladin_funny-grasshopper-66.html
================================================
<div class="card">
  <div class="card__corner"></div>
  <div class="card__img">
    <span class="card__span">Category</span>
  </div>
  <div class="card-int">
    <p class="card-int__title">This is the article title</p>
    <p class="excerpt">Lorem ipsum dolor sit amet consectetur adipiscing elit, donec suspendisse vulputate dictumst enim per mus imperdiet, platea non massa dictum tempus sapien.</p>
    <button class="card-int__button">Show</button>
  </div>
</div>
<style>
/* From Uiverse.io by Rodrypaladin - Tags: animation, blue, button, card, modern, gradients, click effect, click animation */
.card {
  width: 275px;
  position: relative;
  background: rgb(255, 255, 255);
  padding: 20px;
}

.card::after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 50%;
  height: 10px;
  bottom: 15px;
  right: 0;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);
  transform: rotate(5deg);
  transition: all 0.1s ease-in;
}

.card::before {
  z-index: -1;
  content: "";
  position: absolute;
  width: 50%;
  height: 10px;
  bottom: 15px;
  left: 0;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);
  transform: rotate(-5deg);
  transition: all 0.1s ease-in;
}

.card:hover:before, .card:hover:after {
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.6);
}

.card:hover:before {
  transform: rotate(-8deg);
}

.card:hover:after {
  transform: rotate(8deg);
}

.card__img {
  position: relative;
  background: #FFFFFF;
  background: linear-gradient(315deg, #68aeff, #0032a6);
  width: 100%;
  height: 175px;
}

.card__span {
  cursor: pointer;
  font-size: 11px;
  position: absolute;
  background-color: white;
  top: 10px;
  left: 10px;
  padding: 3px 7px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease-in;
  user-select: none;
}

.card__span:hover {
  transform: translateX(5px);
}

.card-int {
  padding: 20px 0 0 0;
}

.card-int__title {
  font-weight: bold;
  font-size: 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 10px;
}

.card-int__button {
  cursor: pointer;
  margin: 20px 0 0 0;
  padding: 7px 20px;
  width: 100%;
  background-color: rgb(238, 246, 255);
  border: none;
  color: black;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);
  transition: box-shadow 0.1s ease-in;
  user-select: none;
}

.card-int__button:active {
  box-shadow: 0px 0px 15px rgba(0, 119, 255, 0.5);
}

.card-int__button:hover::before {
  animation: effect_two 0.4s 1;
}

.card-int__button::before {
  content: 'More for this article';
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  background: rgb(0,133,255);
  background: linear-gradient(146deg, #0032a6 0%, #68aeff 100%);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: translateX(-99%);
  z-index: 1;
  animation: effect_one 10s infinite;
}

.card-int__button:hover::before {
  transform: translateX(0%);
}

.excerpt {
  font-size: 14px;
}

@keyframes effect_one {
  0% {
    transform: translateX(-99%);
  }

  25% {
    transform: translateX(-90%);
  }

  50% {
    transform: translateX(-80%);
  }

  75% {
    transform: translateX(-95%);
  }

  100% {
    transform: translateX(-99%);
  }
}

@keyframes effect_two {
  to {
    transform: translateX(-1%);
  }

  from {
    transform: translateX(-99%);
  }
}
</style>


================================================
FILE: Cards/Rodrypaladin_itchy-sloth-9.html
================================================
<div class="card">
  <div class="card__title">table</div>
  <div class="card__data">
    <div class="card__right">
      <div class="item">id</div>
      <div class="item">name</div>
      <div class="item">date</div>
      <div class="item">active</div>
    </div>
    <div class="card__left">
      <div class="item">int</div>
      <div class="item">varchar</div>
      <div class="item">datetime</div>
      <div class="item">boolean</div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Rodrypaladin  - Tags: minimalist, black, card, dark, product, custom, creative */
.card {
  width: 250px;
  background: rgb(44, 44, 44);
  font-family: "Courier New", Courier, monospace;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}

.card__title {
  color: white;
  font-weight: bold;
  padding: 5px 10px;
  border-bottom: 1px solid rgb(167, 159, 159);
  font-size: 0.95rem;
}

.card__data {
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  border-right: 1px solid rgb(203, 203, 203);
  border-left: 1px solid rgb(203, 203, 203);
  border-bottom: 1px solid rgb(203, 203, 203);
}

.card__right {
  width: 60%;
  border-right: 1px solid rgb(203, 203, 203);
}

.card__left {
  width: 40%;
  text-align: end;
}

.item {
  padding: 3px 0;
  background-color: white;
}

.card__right .item {
  padding-left: 0.8em;
}

.card__left .item {
  padding-right: 0.8em;
}

.item:nth-child(even) {
  background: rgb(234, 235, 234);
}

</style>
    

================================================
FILE: Cards/Rodrypaladin_nasty-turkey-29.html
================================================
<article class="card">
    <div class="card-int">
        <span class="card__span">Category</span>
        <div class="img"></div>
        <div class="card-data">
          <p class="title">This is a test title
          </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <button class="button">More info</button>
        </div>
    </div>
</article>
<style>
/* From Uiverse.io by Rodrypaladin - Tags: animation, purple, pink, card, hover, html, css, cool card */
.card {
  width: 300px;
  padding: 10px;
  background-image: linear-gradient(to right bottom, #5d0391, #7b05ae, #9b05cb, #bd00e7, #bd00e7);
  background-size: 200% 200%;
  border-radius: 12px;
}

.card-int {
  position: relative;
  height: 100%;
  overflow: hidden;
  font-size: 14px;
  border-radius: 6px;
  background-color: white;
}

.img {
  width: 100%;
  height: 175px;
  background-color: pink;
}

.title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.card-data {
  padding: 20px;
  font-size: 14px;
}

.card__span {
  font-family: 'Lucida Sans' sans-serif;
  font-size: 11px;
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: white;
  padding: 5px 10px;
  border-radius: 15px;
}

button {
  width: 100%;
  margin-top: 15px;
  background-image: linear-gradient(to right bottom, #5d0391, #7b05ae, #9b05cb, #bd00e7, #bd00e7);
  background-size: 200% 200%;
  border: none;
  padding: 8px 10px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  transition: transform 0.1s ease-in;
}

button:active {
  transform: translateY(3px);
}

.card:hover, button:hover {
  animation: gradient 0.8s ease-in 1;
}

@keyframes gradient {
  0% {
    background-position: 200% 200%;
  }

  100% {
    background-position: 400% 400%;
  }
}

</style>


================================================
FILE: Cards/Rodrypaladin_plastic-otter-67.html
================================================
<div class="card">
  
  <div class="btn1"></div>
  <div class="btn2"></div>
  <div class="btn3"></div>
  <div class="btn4"></div>
  <div class="card-int">
    <div class="hello">Hello
      <span class="hidden">uiverse</span>
    </div>
  </div>
  <div class="top">
    <div class="camera">
      <div class="int"></div>
    </div>
    <div class="speaker"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Rodrypaladin - Tags: animation, purple, pink, card, text animation, click animation */
.card {
  width: 210px;
  height: 400px;
  background: black;
  border-radius: 35px;
  border: 2px solid rgb(40, 40, 40);
  padding: 7px;
  position: relative;
  box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.486);
}

.card-int {
  background-image: linear-gradient(to right bottom, #ff0000, #ff0045, #ff0078, #ea00aa, #b81cd7, #8a3ad6, #5746cf, #004ac2, #003d94, #002e66, #001d3a, #020812);
  background-size: 200% 200%;
  background-position: 0% 0%;
  height: 100%;
  border-radius: 25px;
  transition: all 0.6s ease-out;
  overflow: hidden;
}

.card:hover .card-int {
  background-position: 100% 100%;
}

.top {
  position: absolute;
  top: 0px;
  right: 50%;
  transform: translate(50%, 0%);
  width: 35%;
  height: 18px;
  background-color: black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.speaker {
  position: absolute;
  top: 2px;
  right: 50%;
  transform: translate(50%, 0%);
  width: 40%;
  height: 2px;
  border-radius: 2px;
  background-color: rgb(20, 20, 20);
}

.camera {
  position: absolute;
  top: 6px;
  right: 84%;
  transform: translate(50%, 0%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.048);
}

.int {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  background-color: rgba(0, 0, 255, 0.212);
}

.btn1, .btn2, .btn3, .btn4 {
  position: absolute;
  width: 2px;
}

.btn1, .btn2, .btn3 {
  height: 45px;
  top: 30%;
  right: -4px;
  background-image: linear-gradient(to right, #111111, #222222, #333333, #464646, #595959);
}

.btn2, .btn3 {
  transform: scale(-1);
  left: -4px;
}

.btn2, .btn3 {
  transform: scale(-1);
  height: 30px;
}

.btn2 {
  top: 26%
}

.btn3 {
  top: 36%
}

.hello {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  line-height: 35px;
  height: 100%;
  transition: 0.5s ease-in-out;
}

.hidden {
  display: block;
  opacity: 0;
  transition: all 0.3s ease-in;
}

.card:hover .hidden {
  opacity: 1;
}

.card:hover .hello {
  transform: translateY(-20px);
}



</style>


================================================
FILE: Cards/RozheenNM_tough-impala-7.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by RozheenNM - Tags: button, card, day */
.one-div {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 10mm;
  animation: flip-and-rotate 8s ease-in-out infinite;
  transform-origin: center;
  background: linear-gradient(135deg, #f7af6c, #fa8b8b, #f75bea);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.one-div::before,
.one-div::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 80%;
  background-color: rgb(255, 193, 122);
  box-shadow: #33577e;
  border-radius: 100%;
  transform: translate(-50%, -80%) rotate(90deg);
}

.one-div::before {
  top: 50%;
  left: 50%;
}

.one-div::after {
  bottom: 50%;
  right: 50%;
}

.one-div::before,
.one-div::after {
  animation: move 1.2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.88);
}

@keyframes move {
  0% {
    transform: translate(50%, 50%) rotate(45deg) scale(0.8);
  }

  50% {
    transform: translate(50%, 50%) rotate(45deg) scale(1.2);
  }

  100% {
    transform: translate(50%, 50%) rotate(45deg) scale(0.8);
  }
}

@keyframes flip-and-rotate {
  0% {
    transform: scale(1) rotate(0deg);
    background: linear-gradient(135deg, #f7af6c, #fa8b8b, #f75bea);
  }

  10% {
    transform: scale(1) rotate(10deg);
    background: linear-gradient(135deg, #7bbbd4, #33577e, #00061b);
  }

  20% {
    transform: scale(1) rotate(20deg);
    background: linear-gradient(135deg, #f7af6c, #fa8b8b, #f75bea);
  }

  30% {
    transform: scale(1) rotate(-30deg);
    background: linear-gradient(135deg, #6cb2ce, #3d93a8, #00061b);
  }

  40% {
    transform: scale(1) rotate(40deg);
    background: linear-gradient(135deg, #f7af6c, #fa8b8b, #f75bea);
  }

  50% {
    transform: scale(1) rotate(-5deg);
    background: linear-gradient(135deg, #64b5d4, #184d85, #00061b);
  }

  60% {
    transform: scale(1) rotate(60deg);
    background: linear-gradient(135deg, #f7af6c, #fa8b8b, #f75bea);
  }

  70% {
    transform: scale(1) rotate(70deg);
    background: linear-gradient(135deg, #081c24, #041527, #00061b);
  }

  100% {
    transform: scale(1) rotate(-360deg);
    background: linear-gradient(135deg, #f7af6c, #fa8b8b, #f75bea);
  }
}

</style>


================================================
FILE: Cards/SRIMANKS_lazy-jellyfish-5.html
================================================
<div class="card">
  <svg width="100" height="200" viewBox="0 0 90 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M53.6937 1.8999C47.463 -0.352255 40.9068 -0.674076 34.5272 1.32166C34.0341 1.4759 33.7207 2.18011 33.8272 2.89456C33.9336 3.609 34.4196 4.06315 34.9126 3.90891C41.0222 1.99765 47.3157 2.31279 53.302 4.48699C67.6179 9.68648 79.5341 25.284 84.0727 45.6586C85.8279 53.538 86.5735 61.9282 86.7228 70.7212C86.7352 71.4519 87.1541 72.0296 87.6583 72.0117C88.1625 71.9937 88.5612 71.3868 88.5488 70.6561C88.3975 61.7424 87.6431 53.1364 85.8446 44.9969C81.1312 23.6662 68.6768 7.31577 53.6937 1.8999Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M29.8925 5.90399C30.3787 5.70962 30.6642 4.98086 30.53 4.27628C30.3959 3.57169 29.893 3.15808 29.4068 3.35245C22.735 6.01959 13.3498 15.2355 7.54967 27.5472C7.54742 27.552 7.54518 27.5568 7.54297 27.5616C2.45006 38.6835 -0.742467 52.6602 0.148878 66.2225C0.149727 66.2354 0.150707 66.2483 0.151817 66.2612C0.365435 68.7376 0.724051 71.2094 1.08309 73.6842C1.83929 78.8964 2.59735 84.1216 2.00648 89.4297C1.92616 90.1512 2.26471 90.8306 2.76266 90.9469C3.26061 91.0633 3.72939 90.5727 3.80972 89.8512C4.42737 84.3025 3.66044 78.8903 2.89335 73.477C2.5386 70.9735 2.18381 68.4697 1.96593 65.9522C1.1276 53.1368 4.1472 39.7675 9.0616 29.0324C14.6411 17.1932 23.6761 8.38911 29.8925 5.90399Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M41.877 8.86083C53.3431 7.84619 64.8069 14.6272 72.5058 27.6184C72.8344 28.1729 72.7906 29.0085 72.4079 29.4846C72.0253 29.9608 71.4487 29.8973 71.1201 29.3428C63.7987 16.9887 52.8899 10.5356 41.9828 11.5032C41.9789 11.5036 41.975 11.5039 41.9711 11.5042C28.1777 12.4713 15.2601 26.031 10.5087 45.0313C10.3369 45.7185 9.81317 46.0737 9.33895 45.8247C8.86474 45.5757 8.61962 44.8167 8.79146 44.1295C13.7968 24.1134 27.3611 9.88221 41.877 8.86083Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M75.2881 33.4001C75.0069 32.7933 74.4395 32.6318 74.0208 33.0393C73.602 33.4468 73.4905 34.269 73.7718 34.8758C78.0398 44.085 79.8045 54.1063 80.5021 65.9987C80.5448 66.727 80.9869 67.2672 81.4895 67.2053C81.9921 67.1433 82.3648 66.5028 82.3221 65.7745C81.6092 53.6222 79.7893 43.1126 75.2881 33.4001Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M81.7115 71.3933C82.2149 71.3477 82.6485 71.9021 82.68 72.6316C83.0242 80.6118 83.0274 89.6407 82.4182 96.313C82.352 97.0376 81.893 97.5473 81.393 97.4514C80.893 97.3555 80.5413 96.6904 80.6074 95.9658C81.1946 89.5349 81.1978 80.6975 80.857 72.7967C80.8256 72.0672 81.2081 71.4389 81.7115 71.3933Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9.1296 51.4413C9.24798 50.7309 8.94648 50.0158 8.45618 49.8443C7.96588 49.6727 7.47245 50.1096 7.35407 50.8201C6.68375 54.8432 6.33577 58.9762 6.32198 63.1129C6.30777 67.3766 6.85639 71.5385 7.40523 75.702C7.8542 79.1079 8.30331 82.5149 8.44458 85.9795C8.63015 90.5307 7.96954 95.0885 6.82798 99.4264C6.64827 100.109 6.88462 100.874 7.35591 101.135C7.82719 101.395 8.35493 101.052 8.53465 100.37C9.74129 95.7842 10.4727 90.8451 10.2679 85.8234C10.1276 82.3825 9.67857 78.9953 9.22967 75.6095C8.68192 71.478 8.13443 67.3485 8.1485 63.1257C8.16161 59.1949 8.49231 55.2662 9.1296 51.4413Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M33.0936 22.032C33.2815 22.7103 33.0545 23.4809 32.5864 23.7533C23.1183 29.2632 16.0083 41.697 14.5579 56.3591C13.9519 62.4848 14.6066 68.5525 15.2611 74.6187C15.6297 78.0349 15.9982 81.4506 16.1415 84.8757C16.4522 92.3028 15.8684 100.461 12.5328 107.883C12.2576 108.496 11.6918 108.669 11.2692 108.27C10.8465 107.871 10.727 107.052 11.0022 106.439C14.0413 99.6763 14.6165 92.1647 14.3183 85.0359C14.1729 81.5605 13.8067 78.1053 13.4407 74.6523C12.784 68.4569 12.1281 62.2685 12.7498 55.9835C14.2985 40.3282 21.8707 27.1369 31.9057 21.2971C32.3738 21.0247 32.9056 21.3538 33.0936 22.032Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M65.1548 29.5667C57.6854 19.4288 46.8594 15.8905 37.0204 19.0178C36.5278 19.1744 36.216 19.8801 36.324 20.594C36.4321 21.308 36.9191 21.7598 37.4118 21.6032C46.7286 18.6419 56.9225 22.0199 63.9062 31.4986C69.7925 39.4878 73.2107 51.1126 74.1054 63.7958C74.1567 64.523 74.6051 65.0521 75.1068 64.9778C75.6086 64.9035 75.9738 64.2538 75.9225 63.5267C74.9934 50.3568 71.431 38.085 65.1548 29.5667Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M75.7314 69.8294C76.2331 69.7547 76.6817 70.2836 76.7332 71.0107C77.6005 83.2483 77.2267 96.4661 75.9173 109.253C75.8433 109.976 75.3788 110.475 74.8799 110.368C74.381 110.26 74.0365 109.587 74.1106 108.864C75.4017 96.2554 75.7654 83.2621 74.9162 71.2811C74.8647 70.554 75.2297 69.9041 75.7314 69.8294Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M43.8912 26.8962C29.8964 26.8962 18.5255 43.0755 18.5255 63.0789C18.5255 65.2157 18.6564 67.3093 18.9058 69.3451C18.994 70.0648 19.4681 70.5446 19.9647 70.4168C20.4613 70.289 20.7924 69.602 20.7042 68.8824C20.4733 66.9976 20.3521 65.0587 20.3521 63.0789C20.3521 44.578 30.8769 29.543 43.8912 29.543C49.7724 29.543 55.1459 32.6147 59.2702 37.6903C59.6547 38.1634 60.231 38.0954 60.5575 37.5382C60.884 36.9811 60.837 36.1459 60.4525 35.6728C56.0081 30.2033 50.2186 26.8962 43.8912 26.8962Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M62.4988 40.6072C62.8628 40.1013 63.441 40.1188 63.7901 40.6464C67.8205 46.7369 69.1107 56.3093 69.9643 64.3426C70.9259 73.3915 71.0727 82.2193 71.0727 86.3123C71.0727 87.0432 70.6638 87.6357 70.1594 87.6357C69.6551 87.6357 69.2462 87.0432 69.2462 86.3123C69.2462 82.2855 69.1007 73.6071 68.1591 64.7455C67.3665 57.2875 66.2241 48.1486 62.4717 42.4784C62.1226 41.9508 62.1347 41.1131 62.4988 40.6072Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M70.8408 93.8916C70.8809 93.1629 70.5058 92.5252 70.003 92.4671C69.5002 92.409 69.0601 92.9526 69.0201 93.6812C68.5716 101.833 67.9855 109.976 66.7963 117.498C66.6837 118.211 66.9909 118.921 67.4826 119.084C67.9742 119.247 68.4641 118.802 68.5767 118.089C69.7972 110.369 70.3911 102.065 70.8408 93.8916Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M20.3758 74.216C20.8707 74.0748 21.3509 74.5417 21.4484 75.2588C23.3794 89.4686 22.0454 102.377 16.9318 113.685C16.6553 114.296 16.0892 114.467 15.6673 114.066C15.2454 113.665 15.1276 112.845 15.404 112.234C20.2154 101.595 21.5103 89.4138 19.6562 75.7702C19.5588 75.0531 19.881 74.3572 20.3758 74.216Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M43.8912 35.507C34.8067 35.507 25.8947 45.6973 24.9851 58.5043C24.5869 64.1112 25.1463 69.6341 25.7059 75.1592C26.1946 79.9836 26.6835 84.8098 26.535 89.695C26.1954 100.876 23.9316 110.105 20.0418 117.706C19.7413 118.293 19.8262 119.122 20.2314 119.557C20.6365 119.993 21.2085 119.87 21.509 119.283C25.6345 111.22 28.0056 101.472 28.3598 89.8114C28.5076 84.9483 28.0172 80.1375 27.5272 75.3298C26.9669 69.8321 26.4069 64.3385 26.802 58.7753C27.6011 47.5245 35.5925 38.1539 43.8912 38.1539C47.7618 38.1539 57.7763 41.191 60.9619 56.2288C62.9582 65.6525 63.5027 78.406 63.0192 90.7961C62.5357 103.185 61.0317 115.034 59.0093 122.632C58.8278 123.314 59.0621 124.08 59.5327 124.343C60.0033 124.606 60.532 124.266 60.7135 123.584C62.8293 115.635 64.3534 103.486 64.8428 90.9455C65.3321 78.4067 64.7943 65.3002 62.708 55.4521C59.1719 38.7595 48.0871 35.507 43.8912 35.507Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M29.8367 113.687C30.2591 114.086 30.3782 114.906 30.1027 115.518C29.5364 116.776 29.0382 118.093 28.54 119.409C28.0417 120.726 27.5434 122.043 26.977 123.301C26.7015 123.913 26.1356 124.086 25.7131 123.687C25.2907 123.287 25.1716 122.467 25.4471 121.855C26.0135 120.597 26.5116 119.28 27.0099 117.964C27.5081 116.647 28.0064 115.331 28.5728 114.072C28.8484 113.46 29.4142 113.287 29.8367 113.687Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M37.6567 49.2448C38.076 48.8384 38.1885 48.0165 37.9081 47.409C37.6277 46.8014 37.0605 46.6383 36.6412 47.0447C33.0248 50.5499 30.8061 55.37 30.8061 62.4311C30.8061 66.6357 31.3201 70.0725 31.8473 73.5975C32.6362 78.8723 33.1713 84.1358 33.0751 89.5538C32.9584 96.1329 32.0701 102.145 30.3625 107.872C30.1624 108.543 30.3756 109.322 30.8386 109.612C31.3016 109.902 31.8391 109.593 32.0392 108.922C33.8447 102.866 34.7787 96.519 34.9011 89.6218C35.001 83.9918 34.4511 78.52 33.6328 73.0378C33.1044 69.4974 32.6326 66.3365 32.6326 62.4311C32.6326 56.3811 34.4693 52.3342 37.6567 49.2448Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M41.2213 44.5949C45.011 43.4753 49.0892 44.8587 52.0909 48.3794C57.4527 54.6682 58.1657 66.1368 58.7436 75.4302L58.773 75.9036C59.5197 87.8832 58.665 99.519 56.9432 111.204C56.8379 111.919 56.3526 112.375 55.8594 112.222C55.3661 112.07 55.0516 111.366 55.1569 110.652C56.8529 99.1415 57.6795 87.7826 56.9539 76.1418C56.9299 75.7563 56.906 75.3655 56.8818 74.9699L56.8815 74.9642C56.3682 66.5659 55.7253 56.0474 50.9418 50.4368C48.3754 47.4268 44.8557 46.2225 41.5861 47.1884C41.0919 47.3344 40.6096 46.8721 40.5088 46.156C40.4081 45.4398 40.727 44.7409 41.2213 44.5949Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M55.6524 117.79C55.7769 117.081 55.4815 116.361 54.9927 116.181C54.5039 116 54.0068 116.428 53.8823 117.137C53.3302 120.279 52.4795 123.116 51.4008 125.727C51.1417 126.355 51.2826 127.167 51.7154 127.543C52.1482 127.918 52.709 127.714 52.968 127.087C54.1305 124.272 55.0534 121.199 55.6524 117.79Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M51.1864 98.5844C51.6873 98.6702 52.0453 99.3283 51.9861 100.054C51.1235 110.616 49.1763 120.037 46.0517 128.207C45.8072 128.846 45.2514 129.077 44.8102 128.723C44.369 128.369 44.2096 127.563 44.4541 126.924C47.4443 119.105 49.3324 110.027 50.1722 99.7431C50.2314 99.0172 50.6856 98.4985 51.1864 98.5844Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M50.9982 61.737C50.3651 56.8346 47.4614 53.0844 43.9364 53.0844C39.1631 53.0844 35.814 60.0567 36.9942 66.5435C38.9911 77.9939 39.3189 89.0296 37.9671 99.6584L37.9661 99.6662C36.793 109.209 34.5403 117.794 31.4674 125.069C31.204 125.692 31.3393 126.507 31.7695 126.889C32.1997 127.27 32.7619 127.074 33.0252 126.451C36.2238 118.879 38.5532 109.98 39.7639 100.134C41.1675 89.0953 40.8197 77.6727 38.7639 65.8881L38.7614 65.8742C37.8762 61.0219 40.3436 55.7313 43.9364 55.7313C46.5292 55.7313 48.7183 58.4952 49.2017 62.215C50.531 73.3886 51.2234 83.7501 50.7304 92.6713C50.6902 93.3999 51.0651 94.0378 51.5679 94.0961C52.0707 94.1545 52.5109 93.6111 52.5511 92.8826C53.0621 83.6357 52.3409 73.019 51.0006 61.7556C50.9998 61.7494 50.999 61.7432 50.9982 61.737Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M41.2113 119.056C41.6599 119.39 41.8367 120.187 41.6061 120.838L39.1862 127.662C38.9557 128.312 38.4051 128.568 37.9565 128.234C37.5079 127.9 37.3311 127.102 37.5616 126.452L39.9815 119.628C40.2121 118.978 40.7626 118.722 41.2113 119.056Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M44.6157 63.0132C44.5003 62.3016 44.0088 61.8603 43.5177 62.0275C43.0267 62.1946 42.7222 62.9069 42.8375 63.6185C45.9173 82.6163 45.4943 99.2983 41.743 113.509C41.5628 114.192 41.7986 114.957 42.2697 115.218C42.7408 115.479 43.2687 115.137 43.449 114.455C47.3604 99.6374 47.758 82.3966 44.6157 63.0132Z" stroke="#00E0FF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>


</div>
<style>
/* From Uiverse.io by SRIMANKS - Tags: card */
.card {
  width: 190px;
  height: 254px;
  background: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 0.2s;
}

.card:hover {
  transform: scale(1.05);
  transition: 0.2s;
  filter: drop-shadow(0px 0px 10px rgb(0, 247, 255));
}

.card::after {
  content: "scanning";
  height: fit-content;
  width: 100%;
  color: lightskyblue;
  position: absolute;
  z-index: 2;
  bottom: 15%;
  text-align: center;
  animation: 2s dots  infinite;
}

.card::before {
  content: "";
  height: 0.1em;
  width: 80%;
  border-radius: 10px;
  background-color: rgb(00, 200, 255);
  position: absolute;
  z-index: 2;
  bottom: 10%;
  animation: 4s grow  infinite;
  align-self: flex-start;
  margin-left: 10%;
  filter: drop-shadow(0px 0px 10px #3fefef) drop-shadow(0px 0px 10px #3fefef);
}

.card svg {
  filter: drop-shadow(0px 0px 10px #3fefef) drop-shadow(0px 0px 50px #3fefef);
}

path {
  stroke-dasharray: 90;
  animation: loop 4s infinite;
}

@keyframes loop {
  0% {
    stroke-dashoffset: 50;
    stroke-dasharray: 90;
  }

  50% {
    stroke-dashoffset: 100;
    ;
        stroke-dasharray: 50;
  }

  100% {
    stroke-dashoffset: 50;
    stroke-dasharray: 90;
  }
}

@keyframes dots {
  0% {
    content: "scanning."
  }

  25% {
    content: "scanning.."
  }

  50% {
    content: "scanning..."
  }

  75% {
    content: "scanning"
  }

  100% {
    content: "scanning."
  }
}

@keyframes grow {
  0% {
    width: 0%;
  }

  50% {
    width: 80%
  }

  100% {
    width: 0%;
  }
}
</style>


================================================
FILE: Cards/Saad3092003_angry-wombat-84.html
================================================
 <div class="bg-black py-5 d-flex justify-content-center align-items-center">
    <div class="obj">
        <div class="objchild">
            <span class="inn1"></span>
            <span class="inn2"></span>
            <span class="inn3"></span>
            <span class="inn4"></span>
            <span class="inn5"></span>
            <span class="inn6"></span>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by Saad3092003 - Tags: animation, card, shadow, animated, creative, box, css, css effect */
.obj {
  position: relative;
  width: 200px;
  height: 200px;
    /* background-color: rgb(96, 96, 232); */
  transform-style: preserve-3d;
  transition: 0.5s all;
  transform: rotateX(-25deg) rotateY(20deg);
}

.objchild {
  animation: rotate 4s infinite linear;
  transform-style: preserve-3d;
  position: absolute;
  width: 100%;
  height: 100%;
    /* background:linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) ) ; */
}

.objchild::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
    /* background: rgb(37, 101, 230); */
    /* background: radial-gradient(center center, farthest-side , #9993, transparent); */
  filter: blur(20px);
  box-shadow: 0 0 200px 15px white;
  transform: rotateX(90deg) scale(1.1) translateZ(-120px);
}

.inn1 {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  filter: blur(2px);
  transform: translateZ(-250px);
  background: linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) );
}

.inn2 {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateZ(100px);
  background: linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) );
}

.inn3 {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateX(-100px) rotateY(90deg);
  background: linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) );
}

.inn4 {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateX(100px) rotateY(90deg);
  background: linear-gradient( to top,rgb(10, 10, 78),rgb(96, 96, 232) );
}

.inn5 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(10, 10, 79);
  transform: rotateX(90deg) translateZ(-100px);
}

.inn6 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(46, 46, 46);
  transform: rotateX(90deg) translateZ(100px);
}

@keyframes rotate {
  0% {
    transform: rotate3d(0,1,0,0deg);
  }

  100% {
    transform: rotate3d(0,1,0,360deg);
  }
}
</style>


================================================
FILE: Cards/Saad3092003_chatty-rabbit-71.html
================================================
 <div class="bg-black py-5 d-flex justify-content-center align-items-center">
    <div class="obj">
        <div class="objchild">
            <span class="inn6"></span>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by Saad3092003 - Tags: animation, 3d, card, shadow, animated, box-shadow */
.obj {
  position: relative;
  width: 200px;
  height: 200px;
    /* background-color: rgb(96, 96, 232); */
  transform-style: preserve-3d;
  transition: 0.5s all;
  transform: rotateX(-25deg) rotateY(20deg);
}

.objchild {
  animation: rotate 10s infinite linear;
  transform-style: preserve-3d;
  position: absolute;
  width: 100%;
  height: 100%;
    /* background:linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) ) ; */
}

.objchild::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
    /* background: rgb(37, 101, 230); */
    /* background: radial-gradient(center center, farthest-side , #9993, transparent); */
  filter: blur(20px);
  box-shadow: 0 0 200px 15px white;
  transform: rotateX(90deg) scale(1.1) translateZ(-120px);
}

.inn6 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(21, 21, 21);
  transform: rotateX(90deg) translateZ(100px);
  animation: updown 4s infinite ease-in-out;
}

@keyframes rotate {
  0% {
    transform: rotate3d(0,1,0,0deg);
  }

  100% {
    transform: rotate3d(0,1,0,360deg);
  }
}

@keyframes updown {
  0% {
    transform: translateY(100px) rotateX(90deg) translateZ(100px);
  }

  50% {
    transform: translateY(200px) rotateX(90deg) translateZ(100px);
  }

  100% {
    transform: translateY(100px) rotateX(90deg) translateZ(100px);
  }
}
</style>


================================================
FILE: Cards/Saad3092003_itchy-starfish-99.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by Saad3092003 - Tags: animation, card, hover, shadow, animated, hover effect, css effect, box-shadow, one-div */
.one-div {
  position: relative;
  height: 250px;
  width: 200px;
  background-color: rgb(15, 15, 15);
  transform-style: preserve-3d;
  animation: rot 2s infinite ease;
  border-radius: 20px;
  box-shadow: 0 0 50px 0px white ,inset 0 0 50px 0px white;
  transition: 1s;
}

.one-div::after {
  content: 'D I V';
  font-size: 30px;
  text-shadow: 5px 5px 1px black;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
  color: white;
}

.one-div:hover.one-div::after {
  font-size: 40px;
}

.one-div::before {
  content: 'UIVERSE';
  color: white;
  font-size: 25px;
  letter-spacing: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -20px;
  left: 40px;
  background-color: rgb(25, 25, 25);
  width: 220px;
  height: 270px;
  transform: translateY(50px) translateZ(50px);
  border-radius: 20px;
  filter: blur(0px);
  transition: 0.5s;
  box-shadow: 0 0 5px 0px black, -3px -3px 10px 3px rgb(25,25,25),inset 0px 0px 40px -20px black;
}

.one-div:active.one-div::after {
  text-shadow: 0 0 0 black;
  transition: 0.5s;
  transform: translateY(5px) translateZ(5px);
}

.one-div:hover.one-div::before {
  font-size: 10px;
  width: 250px;
  height: 300px;
  transform: translateZ(-50px) translateY(50px);
  box-shadow: 0 0 5px 0px black, -3px -3px 10px 3px rgb(25,25,25),inset 0px 0px 40px -20px;
}

.one-div:hover {
  height: 300px;
  width: 250px;
  box-shadow: 0 0 5px 0px black,inset -3px -3px 10px 3px rgb(25,25,25),inset 3px 3px 20px 3px black;
  cursor: pointer;
}

@keyframes rot {
  0% {
    transform: rotateX(-15deg) translateY(0px);
  }

  50% {
    transform: rotateX(-15deg) translateY(-10px);
  }

  100% {
    transform: rotateX(-15deg) translateY(0px);
  }
}

</style>


================================================
FILE: Cards/Saad3092003_pretty-quail-56.html
================================================
<div class="one-div">
  <div class="text">Hello There</div>
</div>

<style>
/* From Uiverse.io by Saad3092003  - Tags: animation, card, hover, shadow, animated, shake, hover effect, box-shadow */
.one-div {
  position: relative;
  height: 250px;
  width: 200px;
  background-color: rgb(15, 15, 15);
  transform-style: preserve-3d;
  animation: rot 2s infinite ease;
  border-radius: 20px;
  box-shadow: 0 0 50px 0px, inset 0 0 90px 0px;
  color: white;
  transition: 1s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.one-div .text {
  opacity: 0;
  transition: all 0.5s;
}

.one-div:hover.one-div .text {
  scale: 1.2;
  opacity: 0.7;
}

.one-div:hover {
  box-shadow: 0 0 50px 0px, inset 5px 5px 20px 0px black;
}

@keyframes rot {
  0% {
    transform: rotateX(-15deg) translateY(0px);
  }

  50% {
    transform: rotateX(-15deg) translateY(-10px);
  }

  100% {
    transform: rotateX(-15deg) translateY(0px);
  }
}

</style>
    

================================================
FILE: Cards/SachinKumar666_spicy-tiger-75.html
================================================
<div class="card"></div>

<style>
/* From Uiverse.io by SachinKumar666  - Tags: simple, material design, animation, card, shadow, glow, code */
.card {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 190px;
  height: 254px;
  background: rgb(255, 255, 255);
  border-radius: 1rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  transition: all ease-in-out 0.3s;
}

.card:hover {
  background-color: #fdfdfd;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

</style>
    

================================================
FILE: Cards/Samalander0_sweet-eel-98.html
================================================
<div class="card">
  <div class="card-content">
    <div class="card-top">
      <span class="card-title">01.</span>
      <p>Lightning.</p>
    </div>
    <div class="card-bottom">
      <p>Hover Me?</p>
      <svg width="32" viewBox="0 -960 960 960" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M226-160q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19ZM226-414q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19ZM226-668q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Z"></path></svg>
    </div>
  </div>
  <div class="card-image">
    <svg width="48" viewBox="0 -960 960 960" height="48" xmlns="http://www.w3.org/2000/svg"><path d="m393-165 279-335H492l36-286-253 366h154l-36 255Zm-73 85 40-280H160l360-520h80l-40 320h240L400-80h-80Zm153-395Z"></path></svg>
  </div>
</div>
<style>
/* From Uiverse.io by Samalander0 - Tags: card, hover, rounded, hover effect */
.card {
  width: 320px;
  background: #fff480;
  color: black;
  position: relative;
  border-radius: 2.5em;
  padding: 2em;
  transition: transform 0.4s ease;
}

.card .card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5em;
  height: 100%;
  transition: transform 0.4s ease;
}

.card .card-top, .card .card-bottom {
  display: flex;
  justify-content: space-between;
}

.card .card-top p, .card .card-top .card-title, .card .card-bottom p, .card .card-bottom .card-title {
  margin: 0;
}

.card .card-title {
  font-weight: bold;
}

.card .card-top p, .card .card-bottom p {
  font-weight: 600;
}

.card .card-bottom {
  align-items: flex-end;
}

.card .card-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.card .card-image svg {
  width: 4em;
  height: 4em;
  transition: transform 0.4s ease;
}

.card:hover {
  cursor: pointer;
  transform: scale(0.97);
}

.card:hover .card-content {
  transform: scale(0.96);
}

.card:hover .card-image svg {
  transform: scale(1.05);
}

.card:active {
  transform: scale(0.9);
}
</style>


================================================
FILE: Cards/SanthoshSJ-Dev_strong-ladybug-68.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by SanthoshSJ-Dev - Tags: card, challenge, sea, bottle */
.one-div {
  width: 300px;
  height: 200px;
  display: grid;
  position: relative;
  margin: auto 0 0;
  background: radial-gradient(circle 44px at top,#0000 94%,#5dc1e4) 0 40px, radial-gradient(circle 44px at top,#0000 94%,#008cd9) 0 0;
  background-size: 80px 100%;
  background-repeat: repeat-x;
  animation: a 1s infinite linear;
  border-radius: 20px;
  transition: height 1s;
  cursor: pointer;
}

.one-div:hover {
  height: 350px;
}

.one-div:before {
  content: "";
  width: 100%;
  z-index: 1;
  background: radial-gradient(circle 44px at top,#0000 94%,#b0e5f3) 0 70px;
  background-size: 80px 100%;
  background-repeat: repeat-x;
  animation: b 1s infinite linear;
  border-radius: 20px;
}

.one-div:after {
  content: "";
  position: absolute;
  width: 70px;
  height: 150px;
  background: linear-gradient(#f0caa3 0 0) bottom/16% 67%, linear-gradient(#33b54d 0 0) 50% 50%/54% 12%, radial-gradient(farthest-side at bottom left,#33b54d 98%,#0000) 100% 48%/25% 12%, radial-gradient(farthest-side at bottom right,#33b54d 98%,#0000) 0 48%/25% 12%, radial-gradient(farthest-side at top left,#0000 98%,#33b54d) 16% 30%/31% 20%, radial-gradient(farthest-side at top right,#0000 98%,#33b54d) 87% 30%/31% 20%, linear-gradient(#a87d53 0 0) top/20% 8%,linear-gradient(#33b54d 0 0)50% 7%/37% 8%, linear-gradient(#33b54d 0 0) bottom/100% 50%, linear-gradient(#33b54d 0 0) center/20% 100%;
  background-repeat: no-repeat;
  border-radius: 0 0 20px 20px;
  left: calc(50% - 35px);
  top: 0px;
  transform: rotate(45deg);
  animation: c 1s infinite linear;
}

@keyframes a {
  50% {
    background-position: -40px 15px,45px 10px
  }

  100% {
    background-position: -80px 40px,80px 0px
  }
}

@keyframes b {
  50% {
    background-position: 40px 45px
  }

  100% {
    background-position: 80px 70px
  }
}

@keyframes c {
  0%,100% {
    transform: translate(0,0) rotate(40deg)
  }

  33% {
    transform: translate(10px,-20px) rotate(50deg)
  }

  66% {
    transform: translate(5px,-10px) rotate(30deg)
  }
}

</style>


================================================
FILE: Cards/SantiagoBoS_wet-fish-33.html
================================================
<div class="firstAnimation">
    <div class="secondAnimation">
        <div class="card">
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by SantiagoBoS - Tags: card */
.card {
  width: 190px;
  height: 254px;
  background: rgb(0, 0, 0);
  border: 2px solid rgb(255, 255, 255);
  border-radius: 20px;
}

.card:hover {
  width: 190px;
  height: 254px;
  background: rgb(255, 255, 255);
  border: 2px solid rgb(200, 200, 200);
  border-radius: 20px;
  background-color: #dfdfdf;
  transition: all .5s;
}

.secondAnimation {
  --hoverContorno: #959595;
}

.secondAnimation:hover,
.secondAnimation:focus {
  -webkit-animation: cardAnimacion 1.4s;
  animation: cardAnimacion 1.4s;
  box-shadow: 0 0 0 0.8em rgba(255, 255, 255, 0);
  border-radius: 20px;
}

@-webkit-keyframes cardAnimacion {
  0% {
    box-shadow: 0 0 0 0 var(--hoverContorno);
  }
}

@keyframes cardAnimacion {
  0% {
    box-shadow: 0 0 0 0 var(--hoverContorno);
  }
}




</style>


================================================
FILE: Cards/Sashank02_new-warthog-10.html
================================================
<div class="card">
  <div class="card-image"></div>
  <p class="card-title">Card title</p>
  <p class="card-body">
    Nullam ac tristique nulla, at convallis quam. Integer consectetur mi nec magna tristique, non lobortis.
  </p>
  <p class="footer">Written by <span class="by-name">John Doe</span> on <span class="date">25/05/23</span></p>
</div>
<style>
/* From Uiverse.io by Sashank02 - Tags: neumorphism, card, box-shadow */
.card {
  padding: 20px;
  width: 330px;
  min-height: 370px;
  border-radius: 20px;
  background: #e8e8e8;
  box-shadow: 5px 5px 6px #dadada,
               -5px -5px 6px #f6f6f6;
  transition: 0.4s;
}

.card:hover {
  translate: 0 -10px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #2e54a7;
  margin: 15px 0 0 10px;
}

.card-image {
  min-height: 170px;
  background-color: #c9c9c9;
  border-radius: 15px;
  box-shadow: inset 8px 8px 10px #c3c3c3,
            inset -8px -8px 10px #cfcfcf;
}

.card-body {
  margin: 13px 0 0 10px;
  color: rgb(31, 31, 31);
  font-size: 15px;
}

.footer {
  float: right;
  margin: 28px 0 0 18px;
  font-size: 13px;
  color: #636363;
}

.by-name {
  font-weight: 700;
}
</style>


================================================
FILE: Cards/Satwinder04_sour-panda-50.html
================================================
<div class="card5">
  <div class="card5-content">
    <span>Card Title</span>
    <p>Card description goes here.</p>
  </div>
</div>

<style>
/* From Uiverse.io by Satwinder04 - Tags: card */
.card5 {
  width: 270px;
  height: 350px;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.card5:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #8f7eff, #44a4ff);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.card5:hover:before {
  opacity: 0.5;
}

.card5-content {
  width: 170px;
  height: 200px;
  padding: 0 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  text-align: center;
  color: rgb(0, 0, 0);
  z-index: 1;
  background-color: white;
  transition: all 0.3s ease-in-out;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}

.card5-content span {
  font-size: 1.7rem;
  font-weight: 700;
}

.card5:hover .card5-content {
  transform: translate(-50%, -50%);
}

</style>


================================================
FILE: Cards/Satwinder04_sweet-donkey-86.html
================================================
<div id="cal-body">
            <div class="input">
                <input type="text">
            </div>
            <div style="padding-top: 40px;">

                <div class="buttons">
                    <button>1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>+</button>
                </div>
                <div class="buttons">
                    <button>4</button>
                    <button>5</button>
                    <button>6</button>
                    <button>-</button>
                </div>
                <div class="buttons">
                    <button>7</button>
                    <button>8</button>
                    <button>9</button>
                    <button>*</button>
                </div>
                <div class="buttons">
                    <button>.</button>
                    <button>0</button>
                    <button style="width: 140px;">=</button>
                    
                </div>
            </div>
        </div>
<style>
/* From Uiverse.io by Satwinder04 - Tags: button, card, calculator */
#cal-body {
  width: 400px;
  border-radius: 20px;
  background: #dde1e7;
  box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94,104,121,0.3);
  padding: 45px;
  scale: 0.6;
}

.input input {
  height: 100px;
  width: 100%;
  border-radius: 10px;
  background: #dde1e7;
  box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);
  border: 0;
  color: rgb(116, 116, 116);
  font-size: 2.5rem;
  padding: 0 30px;
}

.input input:focus {
  outline: none;
  background: #dde1e7;
  box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);
}

.buttons button {
  cursor: pointer;
  height: 60px;
  width: 60px;
  border: 0;
  font-size: 2rem;
  border-radius: 50px;
  background: #dde1e7;
  box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94,104,121,0.3);
  color: rgb(137, 137, 137);
}

.buttons button:focus {
  background: #dde1e7;
  box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);
}

.buttons {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
}
</style>


================================================
FILE: Cards/Satwinder04_young-zebra-44.html
================================================
<div class="card">
  <div class="card__image">
    
  </div>
  <div class="card__content">
    <p class="card__title">Card Title</p>
    <p class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a class="card__button" href="#">Read More</a>
  </div>
</div>

<style>
/* From Uiverse.io by Satwinder04 - Tags: card */
.card {
  position: relative;
  width: 300px;
  height: 400px;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background-color: #fff;
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.card__title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card__text {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.card__button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.card:hover {
  transform: translateY(-10px);
}

.card:hover .card__image img {
  transform: scale(1.2);
}

.card:hover .card__content {
  transform: translateY(-100%);
}

.card__image {
  height: 400px;
  width: 300px;
  background-color: #000;
  /* you can put img url here  */
}
</style>


================================================
FILE: Cards/SelfMadeSystem_smooth-vampirebat-98.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: card */
.card {
  position: relative;
  transform-style: preserve-3d;
  font-size: 0.75rem;
  width: 15em;
  height: 20em;
  border-radius: 20px;
  /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.card::before {
  content: '';
  position: absolute;
  width: 1em;
  height: 100em;
  background: #fff;
}

.card::after {
  content: '';
  position: absolute;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZwogIHdpZHRoPSIzMmVtIgogIGhlaWdodD0iMzJlbSIKICB2ZXJzaW9uPSIxLjEiCiAgdmlld0JveD0iMCAwIDEyOCAxMjgiCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgo+CiAgPGcgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxjaXJjbGUKICAgICAgY3g9IjY0IgogICAgICBjeT0iNjQiCiAgICAgIHI9IjYwIgogICAgICBmaWxsPSIjNzMwMGZmIgogICAgICBmaWxsLW9wYWNpdHk9Ii4yNSIKICAgICAgc3Ryb2tlLXdpZHRoPSI3LjUiCiAgICAvPgogICAgPGNpcmNsZQogICAgICBjeD0iNjQiCiAgICAgIGN5PSI2NCIKICAgICAgcj0iMzguNjM0IgogICAgICBmaWxsPSIjZDEzZDkxIgogICAgICBmaWxsLW9wYWNpdHk9Ii41IgogICAgICBzdHJva2Utd2lkdGg9IjQuODI5MyIKICAgIC8+CiAgICA8Y2lyY2xlCiAgICAgIGN4PSI2NCIKICAgICAgY3k9IjY0IgogICAgICByPSIyNi45OTkiCiAgICAgIGZpbGw9IiNmZjVlNWUiCiAgICAgIGZpbGwtb3BhY2l0eT0iLjc1IgogICAgICBzdHJva2Utd2lkdGg9IjMuMzc0OSIKICAgIC8+CiAgICA8Y2lyY2xlIGN4PSI2NCIgY3k9IjY0IiByPSIyMS4xNDMiIGZpbGw9IiNmZjhkNGYiIHN0cm9rZS13aWR0aD0iMi42NDI5IiAvPgogICAgPGNpcmNsZSBjeD0iNjQiIGN5PSI2NCIgcj0iMTAuMjMxIiBmaWxsPSIjZmZkNjVjIiBzdHJva2Utd2lkdGg9IjEuMjc4OSIgLz4KICAgIDxnIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMyI+CiAgICAgIDxjaXJjbGUKICAgICAgICBjeD0iNjQiCiAgICAgICAgY3k9IjY0IgogICAgICAgIHI9IjYwIgogICAgICAgIHN0cm9rZT0iIzQzMjViYSIKICAgICAgICBzdHJva2UtZGFzaGFycmF5PSI3OCwgMTIsIDE4IgogICAgICA+CiAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0KICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIKICAgICAgICAgIHR5cGU9InJvdGF0ZSIKICAgICAgICAgIGZyb209IjAgNjQgNjQiCiAgICAgICAgICB0bz0iMzYwIDY0IDY0IgogICAgICAgICAgZHVyPSIyMHMiCiAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIKICAgICAgICAvPgogICAgICA8L2NpcmNsZT4KICAgICAgPGNpcmNsZQogICAgICAgIGN4PSI2NCIKICAgICAgICBjeT0iNjQiCiAgICAgICAgcj0iNDguMzE3IgogICAgICAgIHN0cm9rZT0iIzIzNThkZSIKICAgICAgICBzdHJva2UtZGFzaGFycmF5PSI1NCwxMiwxMiw2LDMsNjAiCiAgICAgID4KICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIgogICAgICAgICAgdHlwZT0icm90YXRlIgogICAgICAgICAgZnJvbT0iMCA2NCA2NCIKICAgICAgICAgIHRvPSIzNjAgNjQgNjQiCiAgICAgICAgICBkdXI9IjEwcyIKICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIgogICAgICAgIC8+CiAgICAgIDwvY2lyY2xlPgogICAgICA8Y2lyY2xlCiAgICAgICAgY3g9IjY0IgogICAgICAgIGN5PSI2NCIKICAgICAgICByPSIzOC42MzQiCiAgICAgICAgc3Ryb2tlPSIjZDEzZDkxIgogICAgICAgIHN0cm9rZS1kYXNoYXJyYXk9IjM2LDEyLDYsMjQiCiAgICAgID4KICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIgogICAgICAgICAgdHlwZT0icm90YXRlIgogICAgICAgICAgZnJvbT0iMCA2NCA2NCIKICAgICAgICAgIHRvPSItMzYwIDY0IDY0IgogICAgICAgICAgZHVyPSIxNnMiCiAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIKICAgICAgICAvPgogICAgICA8L2NpcmNsZT4KICAgICAgPGNpcmNsZQogICAgICAgIGN4PSI2NCIKICAgICAgICBjeT0iNjQiCiAgICAgICAgcj0iMjYuOTk5IgogICAgICAgIHN0cm9rZT0iI2ZmNWU1ZSIKICAgICAgICBzdHJva2UtZGFzaGFycmF5PSIxOCwgNiwgOSwgMjQiCiAgICAgID4KICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIgogICAgICAgICAgdHlwZT0icm90YXRlIgogICAgICAgICAgZnJvbT0iMCA2NCA2NCIKICAgICAgICAgIHRvPSIzNjAgNjQgNjQiCiAgICAgICAgICBkdXI9IjEzcyIKICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIgogICAgICAgIC8+CiAgICAgIDwvY2lyY2xlPgogICAgICA8Y2lyY2xlCiAgICAgICAgY3g9IjY0IgogICAgICAgIGN5PSI2NCIKICAgICAgICByPSIyMS4xNDMiCiAgICAgICAgc3Ryb2tlPSIjZmY1ZTVlIgogICAgICAgIHN0cm9rZS1kYXNoYXJyYXk9IjYsIDYsIDQyLCA2LCA5LCA2LCAzLCAyOTciCiAgICAgID4KICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIgogICAgICAgICAgdHlwZT0icm90YXRlIgogICAgICAgICAgZnJvbT0iMCA2NCA2NCIKICAgICAgICAgIHRvPSItMzYwIDY0IDY0IgogICAgICAgICAgZHVyPSIxMHMiCiAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIKICAgICAgICAvPgogICAgICA8L2NpcmNsZT4KICAgICAgPGNpcmNsZQogICAgICAgIGN4PSI2NCIKICAgICAgICBjeT0iNjQiCiAgICAgICAgcj0iMTQuNjU2IgogICAgICAgIHN0cm9rZT0iI2ZmZDY1YyIKICAgICAgICBzdHJva2UtZGFzaGFycmF5PSI5LDksMjQsMjk3IgogICAgICA+CiAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0KICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIKICAgICAgICAgIHR5cGU9InJvdGF0ZSIKICAgICAgICAgIGZyb209IjAgNjQgNjQiCiAgICAgICAgICB0bz0iMzYwIDY0IDY0IgogICAgICAgICAgZHVyPSIxMHMiCiAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIKICAgICAgICAvPgogICAgICA8L2NpcmNsZT4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
  background-size: 22rem;
  width: 22rem;
  height: 22rem;
  --rx: 60deg;
  transform: rotateX(var(--rx)) rotateZ(0deg);
  pointer-events: none;
}

@keyframes weee {
  to {
    transform: rotateX(var(--rx)) rotateZ(360deg);
  }
}

.card .heading {
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  padding: 1em;
  background-image: linear-gradient(90deg, rgba(255,0,111, 0.4) 0%, rgba(128,40,183,1) 50%, rgba(0,80,255, 0.4) 100%);
  border-radius: 15px;
  transform: translateZ(1px) translateY(-5em)
}

.card .heading span {
  font-weight: 700;
  background: linear-gradient(90deg, rgba(123,173,255,1) 0%, rgba(209,131,255,1) 50%, rgba(123,173,255,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 50% 100%;
  animation: animatedBackground 1s linear infinite;
}

.card .heading span::after {
  content: "!";
}

.card .content {
  border-radius: 5px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  padding-bottom: 1rem;
  z-index: 999;
  transform: translateZ(100px) translateY(-6em);
}

.card .content .item {
  font-size: small;
}

.card .content .item svg {
  color: #000;
  background: #fff;
  padding: 0.3em;
  width: 2.5em;
  height: 2.5em;
  border-radius: 8px;
}

.card .content .item span {
  position: absolute;
  background-color: #0009;
  backdrop-filter: blur(9px);
  padding: 4px;
  border-radius: 0px 8px 8px 0px;
  transform: translateY(0.25em);
}

.card button {
  position: absolute;
  font-size: 1rem;
  font-weight: 600;
  ;
  color: #fff;
  background: linear-gradient(90deg, rgb(166, 0, 216) 0%, rgba(0,80,255) 50%, rgb(166, 0, 216) 100%);
  background-size: 200% 100%;
  border: none;
  padding: 1em;
  border-radius: 1em;
  transform: translateY(6rem);
  cursor: pointer;
  transition: transform 0.15s;
  animation: animatedBackground2 2s linear infinite;
}

.card button:hover {
  transform: translateY(6rem) scale(1.05);
}

.card button:active {
  transform: translateY(6rem) scale(0.9);
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  }
}

@keyframes animatedBackground2 {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 200% 0;
  }
}

</style>


================================================
FILE: Cards/SelfMadeSystem_swift-bullfrog-34.html
================================================
<div class="card">
      <div class="bg uwu"></div>
      <div class="bg"></div>
      <div class="content">
            <div class="img">
                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"></path></svg>
            </div>
            <div class="h1">
                  Johnathon<br>F. Stag
            </div>
            <div class="p">
                  Professional human
                  <p>
                        I do human things such as exist, eat foot, and work.
                  </p>
            </div>
      </div>
</div>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: animation, card, glow, rainbow */
.card {
  position: relative;
  width: 190px;
  color: white;
  height: 260px;
  background: #444;
  border-radius: 14px;
}

.bg {
  position: absolute;
  z-index: -1;
  inset: -4px;
  border-radius: 16px;
  overflow: hidden;
}

.uwu {
  filter: blur(8px);
  transition: filter 0.3s;
}

.bg::before {
  content: '';
  position: absolute;
  aspect-ratio: 1/1;
  top: 50%;
  left: 50%;
  min-width: 150%;
  min-height: 150%;
  background-image: conic-gradient(
    hsl(0, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(240, 100%, 60%),
    hsl(270, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(360, 100%, 50%)
  );
  animation: speeen 4s linear infinite;
  transform-origin: 0% 0%;
  transform: rotate(0deg) translate(-50%, -50%);
}

@keyframes speeen {
  from {
    transform: rotate(0deg) translate(-50%, -50%);
  }

  to {
    transform: rotate(360deg) translate(-50%, -50%);
  }
}

.content {
  position: relative;
  padding: 14px 16px;
}

.img {
  height: 5em;
  width: 5em;
  margin: auto;
  background-color: #fff3;
  border-radius: 1em;
}

.img svg {
  height: 100%;
  fill: white;
}

.content div {
  text-align: center;
}

.h1 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-size: 1em;
  font-weight: 600;
}

.p {
  font-size: 0.75em;
}

.p p {
  margin-top: 0.5em;
  padding: 0.5em;
  background-color: #0003;
  border-radius: 1em;
}
</style>


================================================
FILE: Cards/Sharkotech_cowardly-walrus-58.html
================================================
<div class="main">
  <div class="card" id="c1"></div>
  <div class="card" id="c2"></div>
  <div class="card" id="c3"></div>
  <div class="card" id="c4"></div>
</div>
<style>
/* From Uiverse.io by Sharkotech - Tags: card */
.card {
  width: 190px;
  height: 254px;
  background: rgba(211, 211, 211, 0.199);
  position: absolute;
  transition: .3s ease-in-out;
  cursor: pointer;
  box-shadow: 0px 0px 30px -10px rgba(0, 0, 0, 0.3);
}

#c1 {
  background-color: black;
}

#c2 {
  background-color: blue;
}

#c3 {
  background-color: red;
}

#c4 {
  background-color: green;
}

.main:hover #c1 {
  transform: translateX(-100px) rotate(-40deg);
}

.main:hover #c2 {
  transform: translateX(-50px) rotate(-30deg);
}

.main:hover #c3 {
  transform: translateX(0) rotate(-20deg);
}

.main:hover #c4 {
  transform: translateX(50px) rotate(-10deg);
}

#c1:hover {
  transform: translateX(-150px) rotate(0deg) !important;
}

#c2:hover {
  transform: translateX(-100px) rotate(0deg) !important;
}

#c3:hover {
  transform: translateX(-50px) rotate(0deg) !important;
}

#c4:hover {
  transform: translateX(50px) rotate(0deg) !important;
}

.main {
  display: grid;
  height: 50vmax;
  place-items: center;
}
</style>


================================================
FILE: Cards/SharpTH_fluffy-liger-83.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by SharpTH - Tags: card */
.card {
 cursor: pointer;
 width: 190px;
 height: 254px;
 background: rgb(255, 255, 255);
 border-radius: 5px;
 border: 1px solid rgba(0, 0, 255, .2);
 transition: all .2s;
 box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
}

.card:hover {
 box-shadow: -12px 12px 2px -1px rgba(0, 0, 255, .2);
}




</style>


================================================
FILE: Cards/Shoh2008_light-squid-68.html
================================================
<div class="container">
	<article class="card">
		<a class="card__link" href="#">
		
			
			<div class="card__icon">
				<svg viewBox="0 0 1129 994">
					<g stroke-width="41" stroke="#999" fill-rule="nonzero" fill="none">
						<path d="M564.5 212.437L95.67 873.5h937.66L564.5 212.437z"></path>
						<path d="M564.5 407.47L163.638 973.5h801.724L564.5 407.47z"></path>
						<path d="M564.5 35.409L39.699 774.5H1089.3L564.5 35.409z"></path>
					</g>
				</svg>
			</div>

			
			<div class="card__media">
				<svg viewBox="0 0 1129 994">
					<g stroke-width="41" stroke="#F5F5F5" fill-rule="nonzero" fill="none">
						<path d="M564.5 212.437L95.67 873.5h937.66L564.5 212.437z"></path>
						<path d="M564.5 407.47L163.638 973.5h801.724L564.5 407.47z"></path>
						<path d="M564.5 35.409L39.699 774.5H1089.3L564.5 35.409z"></path>
					</g>
				</svg>
			</div>

			
			<div class="card__header">
				<p class="card__header-title">Title of Card</p>
				<p class="card__header-meta">Subtitle</p>
				<div class="card__header-icon">
					<svg viewBox="0 0 28 25">
						<path d="M13.145 2.13l1.94-1.867 12.178 12-12.178 12-1.94-1.867 8.931-8.8H.737V10.93h21.339z" fill="#fff"></path>
					</svg>
				</div>
			</div>
			
		</a>
	</article>
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: card */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0) translateY(50%);
  }

  90% {
    transform: scale(1.05);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

.card {
  position: relative;
  width: 20em;
  background-color: #292929;
  transition: all .3s ease-in-out;
}

.card:hover {
  box-shadow: 0 10px 20px 10px rgba(black, .2);
}

.card__link {
  display: block;
  padding: 1em;
  text-decoration: none;
}

.card__icon {
  position: absolute;
  width: 4em;
  height: 4em;
  transition: all .3s ease-in-out;
}

.card:hover .card__icon {
  opacity: 0;
  transform: scale(0);
}

.card__media {
  padding: 2em 0;
}

.card__media	svg path {
  opacity: 0;
  transition: all .3s ease-in-out;
  transform-origin: center center;
}

.card:hover svg path {
  animation: fadeInScale .3s ease-in-out forwards;
}

.card:hover 	svg path:nth-child(2) {
  animation-delay: .1s;
}

.card:hover 	svg path:nth-child(3) {
  animation-delay: .2s;
}

.card__header {
  position: relative;
}

.card__header-title {
  margin: 0 0 .25em;
  color: white;
}

.card__header-meta {
  margin: 0;
  color: #999;
}

.card__header-icon {
  opacity: 0;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -1em;
  transform: translateX(-20%);
  width: 2em;
  height: 2em;
  transition: all .3s ease-in-out;
}

.card:hover .card__header-icon {
  opacity: 1;
  transform: translateX(0);
}
</style>


================================================
FILE: Cards/Shoh2008_little-termite-6.html
================================================
<div class="card card-5">
  <div class="card__icon">🏆</div>
  <p class="card__exit">※</p>
  <div class="text">Ut aliquip ex ea commodo consequat. Duis aute irure dolor</div>
  <p class="card__apply">
    <a class="card__link" href="#">Apply Now <i class="fas fa-arrow-right"></i></a>
  </p>
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: card */
.card {
  margin: 20px;
  padding: 20px;
  width: 300px;
  min-height: 200px;
  display: grid;
  grid-template-rows: 20px 50px 1fr 50px;
  border-radius: 10px;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.2s;
}

.card:hover {
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
  transform: scale(1.01);
}

.card__link,
.card__exit,
.card__icon {
  position: relative;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
}

.card__link::after {
  position: absolute;
  top: 25px;
  left: 0;
  content: "";
  width: 0%;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.6);
  transition: all 0.5s;
}

.card__link:hover::after {
  width: 100%;
}

.text {
  color: white;
}

.card__exit {
  grid-row: 1/2;
  justify-self: end;
}

.card__icon {
  grid-row: 2/3;
  font-size: 30px;
}

.card__title {
  grid-row: 3/4;
  font-weight: 400;
  color: #ffffff;
}

.card__apply {
  grid-row: 4/5;
  align-self: center;
}

.card-5 {
  background: radial-gradient(#f588d8, #c0a3e5);
}

@media (max-width: 1600px) {
  .cards {
    justify-content: center;
  }
}

</style>


================================================
FILE: Cards/Shoh2008_serious-badger-45.html
================================================
<div class="container">
  <div class="card">
     <div class="card__image-container">
    </div>
      
      <svg class="card__svg" viewBox="0 0 800 500">

        <path d="M 0 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 800 400 L 800 500 L 0 500" stroke="transparent" fill="#333"></path>
        <path class="card__line" d="M 0 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 800 400" stroke="pink" stroke-width="3" fill="transparent"></path>
      </svg>
    
     <div class="card__content">
       <p class="card__title">Lorem ipsum</p>
     <p>Soluta dolor praesentium at quod autem omnis, amet earum nesciunt porro.</p>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: card */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 350px;
  background: #444;
  border-radius: 10px;
}

.card {
  position: relative;
  background: #333;
  width: 250px;
  height: 350px;
  border-radius: 10px;
  padding: 2rem;
  color: #aaa;
  box-shadow: 0 .25rem .25rem rgba(0,0,0,0.2),
    0 0 1rem rgba(0,0,0,0.2);
  overflow: hidden;
}

.card__image-container {
  margin: -2rem -2rem 1rem -2rem;
}

.card__line {
  opacity: 0;
  animation: LineFadeIn .8s .8s forwards ease-in;
}

.card__image {
  opacity: 0;
  animation: ImageFadeIn .8s 1.4s forwards;
}

.card__title {
  color: white;
  margin-top: 35px;
  margin-bottom: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.card__content {
  margin-top: -1rem;
  opacity: 0;
  animation: ContentFadeIn .8s 1.6s forwards;
}

.card__svg {
  position: absolute;
  left: 0;
  top: 115px;
}

@keyframes LineFadeIn {
  0% {
    opacity: 0;
    d: path("M 0 300 Q 0 300 0 300 Q 0 300 0 300 C 0 300 0 300 0 300 Q 0 300 0 300 ");
    stroke: #fff;
  }

  50% {
    opacity: 1;
    d: path("M 0 300 Q 50 300 100 300 Q 250 300 350 300 C 350 300 500 300 650 300 Q 750 300 800 300");
    stroke: #888BFF;
  }

  100% {
    opacity: 1;
    d: path("M -2 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 802 400");
    stroke: #545581;
  }
}

@keyframes ContentFadeIn {
  0% {
    transform: translateY(-1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes ImageFadeIn {
  0% {
    transform: translate(-.5rem, -.5rem) scale(1.05);
    opacity: 0;
    filter: blur(2px);
  }

  50% {
    opacity: 1;
    filter: blur(2px);
  }

  100% {
    transform: translateY(0) scale(1.0);
    opacity: 1;
    filter: blur(0);
  }
}
</style>


================================================
FILE: Cards/Shohjahon3807_thin-falcon-19.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by Shohjahon3807 - Tags: card, hover, follow me */
.one-div {
  width: 300px;
  height: 200px;
  background-color: #f0f5f9;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 24px;
  color: #333;
  position: relative;
  overflow: hidden;
}

.one-div::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: -1;
  background-image: linear-gradient(45deg, #e1e8f2, #f0f5f9);
  border-radius: 20px;
  opacity: 0.8;
  transform: scale(1.2);
  filter: blur(10px);
}

.one-div:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.one-div:hover::before {
  animation: gradient-animation 5s linear infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

</style>


================================================
FILE: Cards/ShrinilDhorda_strong-mayfly-18.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by ShrinilDhorda - Tags: card, glow, code, blur filter, gradients, svg, clean, creative, challenge */
.card {
  padding: 4.4rem 1.4rem;
  display: flex;
  gap: 1.5rem;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

.card::before {
  content: '';
  width: 5rem;
  height: 5rem;
  border-radius: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  background-color: rgb(163, 159, 198);
  filter: blur(50px) saturate(5);
  animation: top 8s infinite ease-in-out;
}

.card::after {
  content: '';
  width: 5rem;
  height: 5rem;
  border-radius: 100%;
  position: absolute;
  bottom: 0%;
  left: 85%;
  background-color: rgba(163, 159, 198);
  filter: blur(50px) saturate(5);
  animation: bottom 8s infinite ease-in-out;
}

.card .heading {
  display: flex;
  flex-direction: column;
  font-size: 1.3rem;
  justify-content: center;
  align-items: center;
  user-select: none;
}

.card .heading span {
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 0.4rem;
  text-shadow: 0 0 19px rgba(255, 255, 255, 0.695), 0 0 20px rgba(255, 255, 255, 0.568), 0 0 30px #1a0e34, 0 0 40px #721faad9, 0 0 50px #2c26729f, 0 0 60px #180e5c5c, 0 0 70px #101d3548;
  border-radius: 70%;
  padding: 0.5rem;
  position: relative;
}

.card .content {
  display: flex;
}

.card .content .item {
  padding: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 70%;
  transition: 0.5s ease;
  margin: 0 0.5rem;
  position: relative;
  border-radius: 2rem;
}

.item::before {
  content: '';
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.466);
  position: absolute;
  filter: blur(20px);
  top: 0%;
}

button {
  background-color: transparent;
  font-size: 1.3rem;
  padding: 1rem;
  color: rgba(255, 255, 255, 0.948);
  transition: 0.5s ease-in-out;
  cursor: pointer;
  position: relative;
  border: none;
  border-radius: 2rem;
  box-shadow: 0px 10px 70px 33px rgba(0,0,0,0.1);
  background: linear-gradient(90deg, rgba(221, 218, 222, 0.185) 20%, rgba(16, 9, 9, 0.311) 100%);
  background-size: 400% 400%;
  animation: gradient 13s ease infinite;
}

button::before {
  content: '';
  width: 10rem;
  height: 2.5rem;
  border-radius: 100%;
  background-color: rgb(163, 159, 198,0.3);
  position: absolute;
  filter: blur(25px);
  top: 10%;
}

button:hover {
  scale: 102%;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
    transform: rotateY(10deg);
  }

  50% {
    background-position: 100% 50%;
    transform: rotateY(13deg);
  }

  100% {
    background-position: 0% 50%;
    transform: rotateY(10deg);
  }
}

@keyframes top {
  0% {
    top: 0%;
    transform: rotate(0deg);
  }

  50% {
    top: 10%;
    transform: rotate(180deg);
  }

  100% {
    top: 0%;
    transform: rotate(0deg);
  }
}

@keyframes bottom {
  0% {
    bottom: 0%;
    transform: rotate(0deg);
  }

  50% {
    bottom: 10%;
    transform: rotate(180deg);
  }

  100% {
    bottom: 0%;
    transform: rotate(0deg);
  }
}

.card .content .item:hover {
  opacity: 100%;
  transform: translateY(-5px);
} 
</style>


================================================
FILE: Cards/Smit-Prajapati_curly-goose-86.html
================================================
<div class="card">
  <div class="boxshadow"></div>
  <div class="main">
    <div class="top"></div>
    <div class="left side"></div>
    <div class="right side"></div>
    <div class="title">TITLE</div>
    <div class="button-container">
      <button class="button">
        <svg class="svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="red" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
            <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
        </svg>
      </button>
      <button class="button">
        <svg class="svg twitter" xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="red" viewBox="0 0 512 512">
            <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
            </path>
        </svg>
      </button>
      <button class="button">
        <svg class="svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4">
            </path>
            <path d="M9 18c-4.51 2-5-2-7-2"></path>
        </svg>
      </button>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: card, sci-fi, cool card, cardhover , card animation, card hover, card design */
.card {
  position: relative;
  height: 300px;
  width: 230px;
}

.card .boxshadow {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 1px solid red;
  transform: scale(0.8);
  box-shadow: rgb(255, 0, 0) 0px 30px 70px 0px;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.card .main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: red;
  background: linear-gradient(0deg, rgb(62, 0, 0) 0%, rgb(255, 0, 0) 60%, rgb(62, 0, 0) 100%);
  position: relative;
  -webkit-clip-path: polygon(0 40px, 40px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px));
  clip-path: polygon(0 40px, 40px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px));
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px));
  clip-path: polygon(0 0, 100% 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px));
  box-shadow: rgb(255, 0, 0) 0px 7px 29px 0px;
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.card .main .top {
  position: absolute;
  top: 0px;
  left: 0;
  width: 0px;
  height: 0px;
  z-index: 2;
  border-top: 115px solid black;
  border-left: 115px solid transparent;
  border-right: 115px solid transparent;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.card .main .side {
  position: absolute;
  width: 100%;
  top: 0;
  transform: translateX(-50%);
  height: 101%;
  background: black;
  -webkit-clip-path: polygon(0% 0%, 50% 0, 95% 45%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 50% 0, 95% 45%, 100% 100%, 0% 100%);
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s;
}

.card .main .left {
  left: 0;
}

.card .main .right {
  right: 0;
  transform: translateX(50%) scale(-1, 1);
}

.card .main .title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 90px;
  font-weight: bold;
  font-size: 25px;
  opacity: 0;
  z-index: -1;
  transition: all 0.2s ease-out 0s;
}

.card .main .button-container {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.card .main .button-container .button {
  position: absolute;
  transform: translateX(-50%);
  padding: 5px 10px;
  -webkit-clip-path: polygon(0 0, 100% 0, 81% 100%, 21% 100%);
  clip-path: polygon(0 0, 100% 0, 81% 100%, 21% 100%);
  background: black;
  border: none;
  color: white;
  display: grid;
  place-content: center;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.card .main .button-container .button .svg {
  width: 15px;
  transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.card .main .button-container .button:nth-child(1) {
  bottom: 300px;
  transition-delay: 0.4s;
}

.card .main .button-container .button:nth-child(2) {
  bottom: 300px;
  transition-delay: 0.6s;
}

.card .main .button-container .button:nth-child(3) {
  bottom: 300px;
  transition-delay: 0.8s;
}

.card .main .button-container .button:hover .svg {
  transform: scale(1.2);
}

.card .main .button-container .button:active .svg {
  transform: scale(0.7);
}

.card:hover .main {
  transform: scale(1.1);
}

.card:hover .main .top {
  top: -50px;
}

.card:hover .main .left {
  left: -50px;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;
}

.card:hover .main .right {
  right: -50px;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;
}

.card:hover .main .title {
  opacity: 1;
  transition: all 0.2s ease-out 1.3s;
}

.card:hover .main .button-container .button:nth-child(1) {
  bottom: 80px;
  transition-delay: 0.8s;
}

.card:hover .main .button-container .button:nth-child(2) {
  bottom: 40px;
  transition-delay: 0.6s;
}

.card:hover .main .button-container .button:nth-child(3) {
  bottom: 0;
  transition-delay: 0.4s;
}
</style>


================================================
FILE: Cards/Smit-Prajapati_dull-dolphin-40.html
================================================
<div class="card">
    <div class="dot-container-main">
      <span class="dot dot1	 size-5"></span>
      <span class="dot dot2	 size-5"></span>
      <span class="dot dot3	 size-5"></span>
      <span class="dot dot4	 size-5"></span>
      <span class="dot dot5	 size-5"></span>
      <span class="dot dot6	 size-5"></span>
      <span class="dot dot7	 size-5"></span>
      <span class="dot dot8	 size-5"></span>
      <span class="dot dot9	 size-5"></span>
      <span class="dot dot10 size-5"></span>
      <span class="dot dot11 size-5"></span>
      <span class="dot dot12 size-5"></span>
      <span class="dot dot13 size-5"></span>
      <span class="dot dot14 size-5"></span>
      <span class="dot dot15 size-5"></span>
      <span class="dot dot16 size-5"></span>
      <span class="dot dot17 size-5"></span>
      <span class="dot dot18 size-5"></span>
      <span class="dot dot19 size-5"></span>
      <span class="dot dot20 size-5"></span>
      <span class="dot dot21 size-5"></span>
      <span class="dot dot22 size-5"></span>
      <span class="dot dot23 size-5"></span>
      <span class="dot dot24 size-5"></span>
      <span class="dot dot25 size-5"></span>
      <span class="dot dot26 size-5"></span>
      <span class="dot dot27 size-5"></span>
      <span class="dot dot28 size-5"></span>
      <span class="dot dot29 size-5"></span>
      <span class="dot dot30 size-5"></span>
      <span class="dot dot31 size-5"></span>
      <span class="dot dot32 size-5"></span>
      <span class="dot dot33 size-5"></span>
      <span class="dot dot34 size-5"></span>
      <span class="dot dot35 size-5"></span>
      <span class="dot dot36 size-5"></span>
      <span class="dot dot37 size-5"></span>
      <span class="dot dot38 size-5"></span>
      <span class="dot dot39 size-5"></span>
      <span class="dot dot40 size-5"></span>
      <span class="dot dot41 size-5"></span>
      <span class="dot dot42 size-5"></span>
      <span class="dot dot43 size-5"></span>
      <span class="dot dot44 size-5"></span>
      <span class="dot dot45 size-5"></span>
      <span class="dot dot46 size-5"></span>
      <span class="dot dot47 size-5"></span>
      <span class="dot dot48 size-5"></span>
      <span class="dot dot49 size-5"></span>
      <span class="dot dot50 size-5"></span>
      <span class="dot dot51 size-5"></span>
      <span class="dot dot52 size-10"></span>
      <span class="dot dot53 size-10"></span>
      <span class="dot dot54 size-10"></span>
      <span class="dot dot55 size-10"></span>
      <span class="dot dot56 size-10"></span>
      <span class="dot dot57 size-10"></span>
      <span class="dot dot58 size-10"></span>
      <span class="dot dot59 size-10"></span>
      <span class="dot dot60 size-10"></span>
      <span class="dot dot61 size-10"></span>
      <span class="dot dot62 size-10"></span>
      <span class="dot dot63 size-10"></span>
      <span class="dot dot64 size-10"></span>
      <span class="dot dot65 size-10"></span>
      <span class="dot dot66 size-10"></span>
      <span class="dot dot67 size-10"></span>
      <span class="dot dot68 size-10"></span>
      <span class="dot dot69 size-10"></span>
      <span class="dot dot70 size-10"></span>
      <span class="dot dot71 size-10"></span>
      <span class="dot dot72 size-15"></span>
      <span class="dot dot73 size-15"></span>
      <span class="dot dot74 size-15"></span>
      <span class="dot dot75 size-15"></span>
      <span class="dot dot76 size-20">
        <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" class="svg">
          <path d="M 9.9980469 3 C 6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z"></path>
        </svg>
      </span>
      <span class="dot dot77	size-20">
        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="svg">
          <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
        </svg>
      </span>
      <span class="dot dot78	size-20">
        <svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" class="svg">
          <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path>
        </svg>
      </span>
      <span class="dot dot79	size-15"></span>
      <span class="dot dot80	size-5"></span>
      <span class="dot dot81	size-5"></span>
      <span class="dot dot82	size-5"></span>
      <span class="dot dot83	size-5"></span>
    </div>
    <div class="text">UIVERS.IO</div>
  </div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: card, cool card, cardhover , card animation, card hover */
.card {
  width: 200px;
  height: 300px;
  position: relative;
  background-image: linear-gradient(230deg, rgba(93, 93, 93, 0.03) 0%, rgba(93, 93, 93, 0.03) 50%, rgba(78, 78, 78, 0.03) 50%, rgba(78, 78, 78, 0.03) 100%), linear-gradient(107deg, rgba(55, 55, 55, 0.01) 0%, rgba(55, 55, 55, 0.01) 50%, rgba(170, 170, 170, 0.01) 50%, rgba(170, 170, 170, 0.01) 100%), linear-gradient(278deg, rgba(16, 16, 16, 0.03) 0%, rgba(16, 16, 16, 0.03) 50%, rgba(24, 24, 24, 0.03) 50%, rgba(24, 24, 24, 0.03) 100%), linear-gradient(205deg, rgba(116, 116, 116, 0.03) 0%, rgba(116, 116, 116, 0.03) 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 100%), linear-gradient(150deg, rgba(5, 5, 5, 0.03) 0%, rgba(5, 5, 5, 0.03) 50%, rgba(80, 80, 80, 0.03) 50%, rgba(80, 80, 80, 0.03) 100%), linear-gradient(198deg, rgba(231, 231, 231, 0.03) 0%, rgba(231, 231, 231, 0.03) 50%, rgba(26, 26, 26, 0.03) 50%, rgba(26, 26, 26, 0.03) 100%), linear-gradient(278deg, rgba(89, 89, 89, 0.03) 0%, rgba(89, 89, 89, 0.03) 50%, rgba(26, 26, 26, 0.03) 50%, rgba(26, 26, 26, 0.03) 100%), linear-gradient(217deg, rgba(28, 28, 28, 0.03) 0%, rgba(28, 28, 28, 0.03) 50%, rgba(202, 202, 202, 0.03) 50%, rgba(202, 202, 202, 0.03) 100%), linear-gradient(129deg, rgba(23, 23, 23, 0.03) 0%, rgba(23, 23, 23, 0.03) 50%, rgba(244, 244, 244, 0.03) 50%, rgba(244, 244, 244, 0.03) 100%), linear-gradient(135deg, rgb(1, 132, 255), rgb(198, 5, 91));
  display: grid;
  place-content: center;
  border-radius: 20px;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.size-5 {
  width: 5px;
  border-radius: 2px;
}

.size-10 {
  width: 10px;
  border-radius: 4px;
}

.size-15 {
  width: 15px;
  border-radius: 5px;
}

.size-20 {
  width: 20px;
  border-radius: 7px;
}

.dot-container-main {
  width: 95px;
  height: 110px;
  position: relative;
}

.dot {
  position: absolute;
  aspect-ratio: 1;
  background: linear-gradient(45deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.34) 100%);
  border-top: 1px solid rgb(255, 255, 255);
  border-right: 1px solid white;
  transition: left 1s ease-in-out, top 1s ease-in-out, transform 0.2s ease-in-out;
}

.dot:hover {
  transform: scale(1.8);
}

.dot1 {
  left: -40px;
  top: -80px;
}

.dot52 {
  left: 10px;
  top: -75px;
}

.dot4 {
  left: 40px;
  top: -50px;
}

.dot3 {
  left: -20px;
  top: -70px;
}

.dot72 {
  left: 50px;
  top: -85px;
}

.dot2 {
  left: 110px;
  top: -30px;
}

.dot53 {
  left: 125px;
  top: -80px;
}

.dot5 {
  left: 100px;
  top: -20px;
}

.dot73 {
  left: -25px;
  top: -50px;
}

.dot6 {
  left: 30px;
  top: -45px;
}

.dot7 {
  left: 80px;
  top: -60px;
}

.dot55 {
  left: 60px;
  top: -30px;
}

.dot8 {
  left: 70px;
  top: -35px;
}

.dot54 {
  left: 120px;
  top: -20px;
}

.dot56 {
  left: 85px;
  top: -5px;
}

.dot10 {
  left: 80px;
  top: -20px;
}

.dot12 {
  left: -40px;
  top: -25px;
}

.dot9 {
  left: 0px;
  top: -50px;
}

.dot76 {
  left: 10px;
  top: -20px;
}

.dot11 {
  left: 110px;
  top: 0px;
}

.dot59 {
  left: 110px;
  top: 30px;
}

.dot14 {
  left: 100px;
  top: 10px;
}

.dot58 {
  left: -20px;
  top: 0px;
}

.dot13 {
  left: 50px;
  top: -10px;
}

.dot15 {
  left: 70px;
  top: 0px;
}

.dot57 {
  left: 30px;
  top: 15px;
}

.dot17 {
  left: 80px;
  top: 10px;
}

.dot19 {
  left: 95px;
  top: 30px;
}

.dot23 {
  left: 130px;
  top: 45px;
}

.dot61 {
  left: 75px;
  top: 20px;
}

.dot28 {
  left: 100px;
  top: 40px;
}

.dot18 {
  left: -35px;
  top: 0px;
}

.dot16 {
  left: 0px;
  top: 20px;
}

.dot20 {
  left: -30px;
  top: 10px;
}

.dot24 {
  left: -30px;
  top: 30px;
}

.dot21 {
  left: 50px;
  top: 10px;
}

.dot65 {
  left: 30px;
  top: 30px;
}

.dot60 {
  left: -15px;
  top: 20px;
}

.dot25 {
  left: -5px;
  top: 40px;
}

.dot30 {
  left: 20px;
  top: 40px;
}

.dot32 {
  left: 0px;
  top: 60px;
}

.dot78 {
  left: -35px;
  top: 170px;
}

.dot50 {
  left: 120px;
  top: 180px;
}

.dot79 {
  left: 60px;
  top: 170px;
}

.dot69 {
  left: 100px;
  top: 135px;
}

.dot68 {
  left: 110px;
  top: 100px;
}

.dot47 {
  left: 0px;
  top: 175px;
}

.dot71 {
  left: 20px;
  top: 160px;
}

.dot83 {
  left: 100px;
  top: 170px;
}

.dot45 {
  left: 10px;
  top: 160px;
}

.dot67 {
  left: 40px;
  top: 140px;
}

.dot49 {
  left: 45px;
  top: 190px;
}

.dot48 {
  left: 20px;
  top: 180px;
}

.dot46 {
  left: 100px;
  top: 120px;
}

.dot70 {
  left: 80px;
  top: 145px;
}

.dot75 {
  left: -20px;
  top: 140px;
}

.dot82 {
  left: 60px;
  top: 160px;
}

.dot43 {
  left: 50px;
  top: 170px;
}

.dot44 {
  left: 60px;
  top: 130px;
}

.dot77 {
  left: 110px;
  top: 70px;
}

.dot42 {
  left: 90px;
  top: 110px;
}

.dot81 {
  left: 90px;
  top: 140px;
}

.dot62 {
  left: 100px;
  top: 55px;
}

.dot31 {
  left: 85px;
  top: 80px;
}

.dot33 {
  left: -30px;
  top: 130px;
}

.dot80 {
  left: 70px;
  top: 120px;
}

.dot39 {
  left: 30px;
  top: 115px;
}

.dot63 {
  left: -30px;
  top: 55px;
}

.dot41 {
  left: 50px;
  top: 110px;
}

.dot40 {
  left: 40px;
  top: 120px;
}

.dot66 {
  left: 70px;
  top: 95px;
}

.dot37 {
  left: 10px;
  top: 130px;
}

.dot51 {
  left: -5px;
  top: 105px;
}

.dot29 {
  left: -15px;
  top: 90px;
}

.dot38 {
  left: 10px;
  top: 90px;
}

.dot35 {
  left: 50px;
  top: 90px;
}

.dot64 {
  left: 80px;
  top: 45px;
}

.dot34 {
  left: 70px;
  top: 70px;
}

.dot36 {
  left: 65px;
  top: 80px;
}

.dot74 {
  left: 30px;
  top: 70px;
}

.dot26 {
  left: 45px;
  top: 60px;
}

.dot22 {
  left: 60px;
  top: 35px;
}

.dot27 {
  left: 50px;
  top: 70px;
}

.card:hover {
  transform: scale(1.1);
}

.card:hover .text {
  opacity: 1;
}

.card:hover .dot1 {
  left: 0px;
  top: 0px;
}

.card:hover .dot2 {
  left: 90px;
  top: 0px;
}

.card:hover .dot3 {
  left: 5px;
  top: 5px;
}

.card:hover .dot4 {
  left: 45px;
  top: 5px;
}

.card:hover .dot5 {
  left: 85px;
  top: 5px;
}

.card:hover .dot6 {
  left: 15px;
  top: 10px;
}

.card:hover .dot7 {
  left: 75px;
  top: 10px;
}

.card:hover .dot8 {
  left: 55px;
  top: 15px;
}

.card:hover .dot9 {
  left: 15px;
  top: 20px;
}

.card:hover .dot10 {
  left: 60px;
  top: 20px;
}

.card:hover .dot11 {
  left: 90px;
  top: 20px;
}

.card:hover .dot12 {
  left: 0px;
  top: 25px;
}

.card:hover .dot13 {
  left: 75px;
  top: 25px;
}

.card:hover .dot14 {
  left: 85px;
  top: 25px;
}

.card:hover .dot15 {
  left: 80px;
  top: 30px;
}

.card:hover .dot16 {
  left: 15px;
  top: 35px;
}

.card:hover .dot17 {
  left: 75px;
  top: 35px;
}

.card:hover .dot18 {
  left: 0px;
  top: 40px;
}

.card:hover .dot19 {
  left: 85px;
  top: 40px;
}

.card:hover .dot20 {
  left: 5px;
  top: 45px;
}

.card:hover .dot21 {
  left: 50px;
  top: 45px;
}

.card:hover .dot22 {
  left: 60px;
  top: 45px;
}

.card:hover .dot23 {
  left: 90px;
  top: 45px;
}

.card:hover .dot24 {
  left: 0px;
  top: 50px;
}

.card:hover .dot25 {
  left: 15px;
  top: 50px;
}

.card:hover .dot26 {
  left: 45px;
  top: 50px;
}

.card:hover .dot27 {
  left: 55px;
  top: 50px;
}

.card:hover .dot28 {
  left: 80px;
  top: 50px;
}

.card:hover .dot29 {
  left: 10px;
  top: 55px;
}

.card:hover .dot30 {
  left: 20px;
  top: 55px;
}

.card:hover .dot31 {
  left: 75px;
  top: 55px;
}

.card:hover .dot32 {
  left: 25px;
  top: 60px;
}

.card:hover .dot33 {
  left: 5px;
  top: 65px;
}

.card:hover .dot34 {
  left: 55px;
  top: 65px;
}

.card:hover .dot35 {
  left: 30px;
  top: 70px;
}

.card:hover .dot36 {
  left: 50px;
  top: 70px;
}

.card:hover .dot37 {
  left: 25px;
  top: 75px;
}

.card:hover .dot38 {
  left: 35px;
  top: 75px;
}

.card:hover .dot39 {
  left: 30px;
  top: 90px;
}

.card:hover .dot40 {
  left: 40px;
  top: 90px;
}

.card:hover .dot41 {
  left: 50px;
  top: 90px;
}

.card:hover .dot42 {
  left: 80px;
  top: 90px;
}

.card:hover .dot43 {
  left: 35px;
  top: 95px;
}

.card:hover .dot44 {
  left: 55px;
  top: 95px;
}

.card:hover .dot45 {
  left: 25px;
  top: 100px;
}

.card:hover .dot46 {
  left: 50px;
  top: 100px;
}

.card:hover .dot47 {
  left: 20px;
  top: 105px;
}

.card:hover .dot48 {
  left: 45px;
  top: 105px;
}

.card:hover .dot49 {
  left: 55px;
  top: 105px;
}

.card:hover .dot50 {
  left: 90px;
  top: 105px;
}

.card:hover .dot51 {
  left: 15px;
  top: 60px;
}

.card:hover .dot52 {
  left: 10px;
  top: 0px;
}

.card:hover .dot53 {
  left: 75px;
  top: 0px;
}

.card:hover .dot54 {
  left: 85px;
  top: 10px;
}

.card:hover .dot55 {
  left: 45px;
  top: 15px;
}

.card:hover .dot56 {
  left: 75px;
  top: 15px;
}

.card:hover .dot57 {
  left: 10px;
  top: 25px;
}

.card:hover .dot58 {
  left: 0px;
  top: 30px;
}

.card:hover .dot59 {
  left: 85px;
  top: 30px;
}

.card:hover .dot60 {
  left: 10px;
  top: 40px;
}

.card:hover .dot61 {
  left: 75px;
  top: 40px;
}

.card:hover .dot62 {
  left: 85px;
  top: 50px;
}

.card:hover .dot63 {
  left: 0px;
  top: 55px;
}

.card:hover .dot64 {
  left: 55px;
  top: 55px;
}

.card:hover .dot65 {
  left: 30px;
  top: 60px;
}

.card:hover .dot66 {
  left: 40px;
  top: 70px;
}

.card:hover .dot67 {
  left: 20px;
  top: 90px;
}

.card:hover .dot68 {
  left: 85px;
  top: 90px;
}

.card:hover .dot69 {
  left: 80px;
  top: 100px;
}

.card:hover .dot70 {
  left: 40px;
  top: 95px;
}

.card:hover .dot71 {
  left: 30px;
  top: 100px;
}

.card:hover .dot72 {
  left: 50px;
  top: 0px;
}

.card:hover .dot73 {
  left: 0px;
  top: 10px;
}

.card:hover .dot74 {
  left: 40px;
  top: 55px;
}

.card:hover .dot75 {
  left: 10px;
  top: 65px;
}

.card:hover .dot76 {
  left: 45px;
  top: 25px;
}

.card:hover .dot77 {
  left: 75px;
  top: 60px;
}

.card:hover .dot78 {
  left: 0px;
  top: 90px;
}

.card:hover .dot79 {
  left: 60px;
  top: 95px;
}

.card:hover .dot80 {
  left: 60px;
  top: 90px;
}

.card:hover .dot81 {
  left: 70px;
  top: 90px;
}

.card:hover .dot82 {
  left: 75px;
  top: 95px;
}

.card:hover .dot83 {
  left: 75px;
  top: 105px;
}

.size-20 {
  display: grid;
  place-content: center;
  border: 1px solid rgb(255, 255, 255);
}

.size-20::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: inherit;
  background: black;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.size-20 .svg {
  fill: rgba(255, 255, 255, 0);
  height: 10px;
  width: 10px;
  transition: all 0.2s ease-in-out;
}

.size-20:hover {
  transform: scale(1.5);
  border: none;
}

.size-20:hover::before {
  opacity: 1;
}

.size-20:hover .svg {
  fill: white;
  z-index: 99;
}

.text {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 5px;
  color: white;
  opacity: 0;
  transition: all 1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
</style>


================================================
FILE: Cards/Smit-Prajapati_funny-sloth-75.html
================================================
<div class="card">
    <div class="image-container">
            <svg viewBox="0 0 1921 1081" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="svg">
                <defs>
                    <radialGradient gradientUnits="objectBoundingBox" gradientTransform="translate(0.219) scale(0.563 1)" r="1.204" cy="0.5" cx="0.5" id="radial-gradient">
                        <stop stop-color="#fff" offset="0"></stop>
                        <stop stop-color="#bcbcbc" offset="1"></stop>
                    </radialGradient>
                    </defs>
                    <g transform="translate(-121.5 -92.5)" id="hoodie">
                    <rect fill="url(#radial-gradient)" stroke-width="1" stroke-miterlimit="10" stroke="#fff" transform="translate(122 93)" height="1080" width="1920" data-name="Rectangle 83" id="Rectangle_83"></rect>
                    <g transform="translate(679.338 886.938)" data-name="Group 67" id="Group_67">
                        <path fill="#dbdbdb" transform="translate(-679.026 -701.302)" d="M689.907,702.85s-7.253,22.231-9.689,34.844a8.084,8.084,0,0,0,2.15,7.3c5.49,5.5,19.551,16.583,46.956,20.927a15.4,15.4,0,0,0,14.4-5.733l14.95-18.791Z" data-name="Path 27" id="Path_27"></path>
                        <path transform="translate(-679.338 -701.77)" d="M731.958,767.6a14.468,14.468,0,0,1-2.48-.2c-27.247-4.329-41.466-15.15-47.529-21.228a9.162,9.162,0,0,1-2.437-8.227c2.422-12.527,9.646-34.744,9.718-34.973l.387-1.2,1.089.616,69.846,39.13-15.709,19.737A16.4,16.4,0,0,1,731.958,767.6Zm-41.136-62.765c-1.534,4.787-7.2,22.79-9.274,33.526a7.031,7.031,0,0,0,1.878,6.364c5.877,5.891,19.723,16.412,46.382,20.64a14.4,14.4,0,0,0,13.445-5.361l14.19-17.845Z" data-name="Path 28" id="Path_28"></path>
                    </g>
                    <g transform="translate(1403.771 886.981)" data-name="Group 68" id="Group_68">
                        <path fill="#dbdbdb" transform="translate(-1184.283 -701.345)" d="M1254.631,702.85s7.253,22.231,9.689,34.844a8.084,8.084,0,0,1-2.15,7.3c-5.49,5.5-19.551,16.583-46.956,20.927a15.4,15.4,0,0,1-14.4-5.733l-14.95-18.791Z" data-name="Path 29" id="Path_29"></path>
                        <path transform="translate(-1184.76 -701.8)" d="M1213.369,767.59a16.533,16.533,0,0,1-12.9-6.307l-15.709-19.737L1255.7,701.8l.387,1.2c.072.215,7.31,22.432,9.718,34.973a9.161,9.161,0,0,1-2.437,8.227c-6.049,6.063-20.282,16.9-47.529,21.228A20.362,20.362,0,0,1,1213.369,767.59Zm-25.485-25.427,14.19,17.845a14.42,14.42,0,0,0,13.445,5.361c26.674-4.243,40.506-14.749,46.4-20.64a7.093,7.093,0,0,0,1.878-6.364c-2.078-10.75-7.74-28.738-9.273-33.525Z" data-name="Path 30" id="Path_30"></path>
                    </g>
                    <g transform="translate(868.454 973.453)" data-name="Group 69" id="Group_69">
                        <path fill="#dbdbdb" transform="translate(-810.972 -761.818)" d="M1024.839,822.233c-118.149.186-175.51-12.7-199.06-20.324a20,20,0,0,1-13.789-19.049V762.85h425.668v19.78a19.992,19.992,0,0,1-14,19.12C1199.7,809.232,1141.655,822.061,1024.839,822.233Z" data-name="Path 31" id="Path_31"></path>
                        <path transform="translate(-811.28 -762.13)" d="M1022.681,823.577c-116.458,0-173.317-12.742-196.91-20.368a20.954,20.954,0,0,1-14.491-20.038V762.13h427.733v20.812a20.941,20.941,0,0,1-14.72,20.109c-24.295,7.6-82.488,20.353-199.146,20.525h-2.465ZM813.344,764.194v18.977a18.9,18.9,0,0,0,13.072,18.074c23.478,7.6,80.123,20.267,196.279,20.267h2.465c116.386-.172,174.349-12.886,198.53-20.439a18.894,18.894,0,0,0,13.273-18.146V764.18H813.344Z" data-name="Path 32" id="Path_32"></path>
                    </g>
                    <g transform="translate(687.323 338.147)" data-name="Group 70" id="Group_70">
                        <path fill="#144076" transform="translate(-684.595 -318.574)" d="M1276.044,391.057c-80.022-65.732-179.954-70.978-195.391-71.394v-.043s-.4,0-1.061.014c-.659-.014-1.061-.014-1.061-.014v.043c-15.451.416-115.368,5.662-195.391,71.394-86.974,71.437-202.07,442.41-197.369,470.474s25.857,48.475,70.52,45.924c39.961-2.279,108.173-164.761,122.062-198.888a.853.853,0,0,1,1.62.487c-18.16,136.8-25.943,234.162-13.2,245.858,39.99,36.736,385.679,36.736,425.669,0,12.728-11.7,4.959-109.062-13.2-245.858a.853.853,0,0,1,1.62-.487c13.889,34.127,82.1,196.609,122.062,198.888,44.662,2.551,65.818-17.859,70.52-45.924C1478.114,833.467,1363.018,462.494,1276.044,391.057Z" data-name="Path 33" id="Path_33"></path>
                        <path transform="translate(-684.909 -318.89)" d="M1079.906,983.809c-91.217,0-192.61-8.6-213.536-27.821-11.9-10.922-7.74-91.188,12.7-245.385-14.62,35.776-82.287,195.907-122.42,198.2-55,3.053-68.441-27.964-71.594-46.784-2.422-14.419,25.757-115.54,64.356-219.5,28.423-76.511,83.534-211,133.371-251.95,78.13-64.184,173.977-70.907,195.018-71.595v-.043l1.046-.029,1.075.014,2.078-.029v.086c21.041.688,116.873,7.41,195.018,71.595,49.851,40.95,104.962,175.425,133.371,251.95,38.614,103.959,66.778,205.08,64.356,219.5-3.153,18.82-16.641,49.851-71.594,46.784-40.319-2.308-108.388-163.858-122.607-198.673,20.611,154.441,24.8,234.907,12.885,245.858C1272.516,975.195,1171.108,983.809,1079.906,983.809ZM879.384,707.335a2.023,2.023,0,0,1,.5.072,1.888,1.888,0,0,1,1.4,2.107c-20.21,152.219-24.768,234.635-13.531,244.955,39.66,36.421,384.618,36.421,424.278,0,11.237-10.32,6.679-92.736-13.531-244.955a1.888,1.888,0,0,1,1.4-2.107,1.791,1.791,0,0,1,2.179,1.1c13.316,32.708,81.743,195.993,121.159,198.243,39.5,2.265,64.184-13.746,69.444-45.064,2.379-14.176-25.757-114.781-64.256-218.453-28.337-76.325-83.276-210.426-132.754-251.061-78.947-64.844-176.1-70.663-194.774-71.165l-1.577-.029-.473.029c-18.676.5-115.827,6.321-194.76,71.165C834.621,432.81,779.7,566.927,751.345,643.237c-38.5,103.672-66.635,204.277-64.256,218.453,5.246,31.318,29.914,47.343,69.445,45.064C795.95,904.5,864.377,741.219,877.693,708.5A1.816,1.816,0,0,1,879.384,707.335Z" data-name="Path 34" id="Path_34"></path>
                    </g>
                    <g transform="translate(894.605 274.45)" data-name="Group 71" id="Group_71">
                        <path fill="#dbdbdb" transform="translate(-829.219 -274.134)" d="M1202.879,371.815c-3.2-13.559-12.112-18.275-17.931-19.923a4.091,4.091,0,0,1-2.695-5.633c3.354-7.482,7.009-22.489-8.743-35.6-22.016-18.347-90.529-35.475-156.591-35.475-61.174,0-134.575,17.128-156.591,35.475-15.752,13.129-12.1,28.136-8.743,35.6a4.091,4.091,0,0,1-2.695,5.633c-5.819,1.634-14.735,6.364-17.931,19.923-4.888,20.8,14.677,30.587,63.611,41.6s105.206,74.619,122.334,78.288c17.128-3.669,73.4-67.28,122.334-78.288C1188.2,402.4,1207.781,392.612,1202.879,371.815Z" data-name="Path 35" id="Path_35"></path>
                        <path transform="translate(-829.525 -274.45)" d="M1017.24,493.075l-.215-.043c-6.651-1.419-18.547-11.194-33.626-23.578-24.61-20.21-58.322-47.887-88.723-54.724-38.255-8.614-55.713-16.025-62.249-26.474-2.938-4.687-3.626-10.033-2.15-16.369,3.383-14.362,13.129-19.12,18.648-20.683a3.189,3.189,0,0,0,2.021-1.691,3.038,3.038,0,0,0,.014-2.523c-3.569-7.969-7.152-23.349,9.016-36.822,22.432-18.691,97.38-35.719,157.25-35.719,63.081,0,133.615,16.025,157.25,35.719,16.182,13.488,12.6,28.867,9.016,36.822a2.935,2.935,0,0,0,.014,2.523,3.189,3.189,0,0,0,2.021,1.691c5.518,1.548,15.265,6.307,18.647,20.683h0c1.491,6.335.788,11.682-2.15,16.369-6.536,10.449-23.994,17.859-62.249,26.474-30.4,6.837-64.113,34.514-88.723,54.724-15.079,12.384-26.975,22.159-33.626,23.578Zm0-216.561c-59.483,0-133.8,16.8-155.931,35.245-15.136,12.613-11.8,26.961-8.457,34.4a5.045,5.045,0,0,1-.029,4.243,5.243,5.243,0,0,1-3.34,2.809c-6.206,1.749-14.219,6.493-17.2,19.164-1.362,5.762-.745,10.607,1.892,14.792,7.167,11.438,29.541,18.49,60.945,25.556,30.888,6.952,64.8,34.8,89.583,55.14,14.692,12.054,26.316,21.615,32.536,23.105,6.206-1.491,17.845-11.051,32.536-23.105,24.768-20.339,58.695-48.188,89.583-55.14,31.4-7.066,53.793-14.118,60.959-25.556,2.623-4.185,3.239-9.03,1.892-14.792-2.981-12.671-10.994-17.415-17.2-19.164a5.236,5.236,0,0,1-3.339-2.809,5.1,5.1,0,0,1-.029-4.243c3.34-7.425,6.665-21.787-8.457-34.4C1152.833,294.818,1087.43,276.514,1017.24,276.514Z" data-name="Path 36" id="Path_36"></path>
                    </g>
                    <g transform="translate(975.916 293.6)" data-name="Group 72" id="Group_72">
                        <path fill="#144076" transform="translate(-885.945 -287.5)" d="M1096.279,325.555c-14.677-39.144-107.284-37.008-103.945-37.008s-89.253-2.136-103.945,37.008c-13.6,36.277,74.4,60.286,99.286,98.455a5.519,5.519,0,0,0,9.288,0C1021.889,385.855,1109.881,361.832,1096.279,325.555Z" data-name="Path 37" id="Path_37"></path>
                        <path fill="#144076" transform="translate(-886.255 -287.81)" d="M992.658,427.889a6.591,6.591,0,0,1-5.518-3c-10.177-15.609-31.117-28.867-51.356-41.7-28.953-18.332-56.3-35.647-48.031-57.691,14.147-37.739,98.455-37.854,104.862-37.668h.043c6.049-.215,90.715-.158,104.9,37.668,8.27,22.045-19.078,39.359-48.031,57.691-20.239,12.828-41.179,26.086-51.356,41.7A6.59,6.59,0,0,1,992.658,427.889Zm-1.018-138c-9.962,0-88.837,1.347-101.967,36.349-7.668,20.468,18.977,37.352,47.2,55.226,20.439,12.943,41.566,26.316,51.987,42.3a4.5,4.5,0,0,0,7.568,0c10.42-15.982,31.562-29.369,51.987-42.3,28.222-17.874,54.882-34.758,47.2-55.226-13.129-35-91.976-36.349-101.952-36.349h-.014v.014l-1.921-.014Z" data-name="Path 38" id="Path_38"></path>
                    </g>
                    <g transform="translate(1048.135 448.054)" data-name="Group 75" id="Group_75">
                        <g transform="translate(0 0)" data-name="Group 73" id="Group_73">
                        <path fill="#47474c" transform="translate(-936.484 -395.41)" d="M947.836,401.358a5.418,5.418,0,1,1-5.418-5.418A5.414,5.414,0,0,1,947.836,401.358Z" data-name="Path 39" id="Path_39"></path>
                        <path transform="translate(-936.64 -395.57)" d="M942.574,407.438a5.934,5.934,0,1,1,5.934-5.934A5.946,5.946,0,0,1,942.574,407.438Zm0-10.822a4.9,4.9,0,1,0,4.9,4.9A4.909,4.909,0,0,0,942.574,396.616Z" data-name="Path 40" id="Path_40"></path>
                        </g>
                        <g transform="translate(56.487 0)" data-name="Group 74" id="Group_74">
                        <path fill="#47474c" transform="translate(-975.894 -395.41)" d="M987.246,401.358a5.418,5.418,0,1,1-5.418-5.418A5.414,5.414,0,0,1,987.246,401.358Z" data-name="Path 41" id="Path_41"></path>
                        <path transform="translate(-976.05 -395.57)" d="M981.984,407.438a5.934,5.934,0,1,1,5.934-5.934A5.946,5.946,0,0,1,981.984,407.438Zm0-10.822a4.9,4.9,0,1,0,4.9,4.9A4.909,4.909,0,0,0,981.984,396.616Z" data-name="Path 42" id="Path_42"></path>
                        </g>
                    </g>
                    <path transform="translate(136.632 21.684)" d="M1110.076,324.49c-1.089,6.163,3.626,6.034,3.626,6.034-4.071,4.8-19.966,19.909-25.14,23.464a98.7,98.7,0,0,1-16.526,9c-5.719,2.494-11.395,4.73-17.013,7.281A249.431,249.431,0,0,0,1022.356,387a118.945,118.945,0,0,0-27.706,23.965,94.137,94.137,0,0,1,11.61-14.563,113.846,113.846,0,0,1,14.333-12.04c10.191-7.281,21.442-12.814,32.766-17.874,11.409-5.06,23.12-8.786,33.468-15.15C1098.81,343.811,1108.1,330.352,1110.076,324.49Z" data-name="Path 43" id="Path_43"></path>
                    <path transform="translate(71.035 21.35)" d="M952.36,396.791a122.341,122.341,0,0,0-14.376-11.567,193.593,193.593,0,0,0-32.006-18.046c-47.371-21.013-56.014-34.514-59.483-43.458,0,0,.86,5.576-3.225,7.124a84.15,84.15,0,0,0,28.193,23.564c10.664,6.178,21.815,11.137,32.723,16.469,10.951,5.246,21.772,10.707,32.092,16.956,10.22,6.35,20.081,13.588,27.348,23.449A62.461,62.461,0,0,0,952.36,396.791Z" data-name="Path 44" id="Path_44"></path>
                    <g transform="translate(949.178 540.102)" data-name="Group 76" id="Group_76">
                        <path fill="#dbdbdb" transform="translate(-799.273 -418.369)" d="M1065.571,570.358h-11.682a7.9,7.9,0,0,0-1.691-4.071c-1.247-1.247-3.383-1.892-6.321-1.892-2.9,0-4.916.487-6.034,1.448a3.767,3.767,0,0,0-1.29,2.981c0,1.763,2.465,3.182,7.324,4.271a114.856,114.856,0,0,1,12,3.1c.645.244,1.2.444,1.605.645,4.959,2.336,7.41,5.891,7.41,10.635,0,5.8-2.422,10.033-7.21,12.685-.6.33-1.175.6-1.82.889a27.2,27.2,0,0,1-10.793,2.007c-6.077,0-10.994-1.089-14.735-3.225a14.084,14.084,0,0,1-5.289-5.16,14.53,14.53,0,0,1-1.763-7.281h12.241a5.831,5.831,0,0,0,2.25,4.873c1.491,1.175,4.028,1.777,7.611,1.777,2.695,0,4.716-.573,6.049-1.691a3.78,3.78,0,0,0,1.534-2.981c0-1.892-2.408-3.383-7.21-4.429-7.167-1.534-11.682-2.781-13.531-3.669-4.916-2.293-7.324-5.834-7.324-10.75a14.031,14.031,0,0,1,3.827-10.019c3.225-3.426,8.055-5.117,14.462-5.117,5.275,0,9.5.774,12.685,2.25a4.393,4.393,0,0,1,.774.4,12.756,12.756,0,0,1,5.189,4.959A14.855,14.855,0,0,1,1065.571,570.358Z" data-name="Path 45" id="Path_45"></path>
                        <path fill="#dbdbdb" transform="translate(-830.846 -459.79)" d="M1027.956,520.592l33.067,55.1H1007.9l-31.576-52.632L952.42,483.225l23.908-14.376,15.064-9.059Z" data-name="Path 46" id="Path_46"></path>
                        <path fill="#dbdbdb" transform="translate(-815.203 -418.213)" d="M1036.321,579.662v22.589h-10.994v-2.494a23.509,23.509,0,0,1-12.886,3.827h-.129a23.923,23.923,0,0,1,0-47.844h.129a23.627,23.627,0,0,1,12.886,3.827v-2.623h10.994Zm-10.994,2.494v-4.988a13.186,13.186,0,0,0-12.886-10.635h-.129a13.151,13.151,0,0,0,0,26.3h.129A13.25,13.25,0,0,0,1025.328,582.156Z" data-name="Path 47" id="Path_47"></path>
                        <path fill="#dbdbdb" transform="translate(-830.807 -422.546)" d="M1000.3,584v22.589H989.3v-2.494a23.58,23.58,0,0,1-12.885,3.827H976.3a23.923,23.923,0,0,1,0-47.844h.115A23.663,23.663,0,0,1,989.3,563.9V545.74H1000.3ZM989.3,586.489V581.5a13.186,13.186,0,0,0-12.885-10.635H976.3a13.151,13.151,0,0,0,0,26.3h.115A13.238,13.238,0,0,0,989.3,586.489Z" data-name="Path 48" id="Path_48"></path>
                        <path fill="#dbdbdb" transform="translate(-845.041 -447.323)" d="M990.524,541.55l12.972,21.672H950.419L920.95,514.173l-1.29-2.136,1.29-.76,37.725-22.718Z" data-name="Path 49" id="Path_49"></path>
                        <rect fill="#dbdbdb" transform="translate(105.421 137.527)" height="46.511" width="11.954" data-name="Rectangle 84" id="Rectangle_84"></rect>
                        <rect fill="#dbdbdb" transform="translate(105.421 123.438)" height="10.506" width="11.954" data-name="Rectangle 85" id="Rectangle_85"></rect>
                        <path fill="#dbdbdb" transform="translate(-851.844 -422.546)" d="M951.79,584v22.589H940.8v-2.494a23.688,23.688,0,0,1-12.929,3.827h-.115a23.923,23.923,0,0,1,0-47.844h.115A23.808,23.808,0,0,1,940.8,563.9V545.74H951.79ZM940.8,586.489V581.5a13.185,13.185,0,0,0-12.929-10.635h-.115a13.151,13.151,0,0,0,0,26.3h.115A13.237,13.237,0,0,0,940.8,586.489Z" data-name="Path 50" id="Path_50"></path>
                        <path fill="#dbdbdb" transform="translate(-859.224 -434.844)" d="M935.133,532.611,946,550.742h-53.1l-5.963-9.947,39.015-23.435Z" data-name="Path 51" id="Path_51"></path>
                        <path fill="#dbdbdb" transform="translate(-867.6 -418.213)" d="M915.4,579.662v22.589H904.408v-2.494a23.724,23.724,0,0,1-12.929,3.827h-.129a23.923,23.923,0,0,1,0-47.844h.129a23.881,23.881,0,0,1,12.929,3.827v-2.623H915.4Zm-10.994,2.494v-4.988a13.186,13.186,0,0,0-12.929-10.635h-.129a13.152,13.152,0,0,0,0,26.3h.129A13.25,13.25,0,0,0,904.408,582.156Z" data-name="Path 52" id="Path_52"></path>
                    </g>
                    <path transform="translate(111.117 53.658)" d="M942.952,521.374a2.056,2.056,0,0,1-2.021-1.691c-11.567-63.439-.1-119.21.014-119.769a2.065,2.065,0,0,1,4.042.846c-.115.545-11.4,55.57.014,118.178a2.086,2.086,0,0,1-1.663,2.408A3.533,3.533,0,0,1,942.952,521.374Z" data-name="Path 53" id="Path_53"></path>
                    <path transform="translate(128.257 53.656)" d="M977.4,540.182a1.749,1.749,0,0,1-.53-.072,2.068,2.068,0,0,1-1.476-2.523c12.212-46.368,4.916-136.18,4.845-137.083a2.063,2.063,0,0,1,4.114-.33c.072.9,7.425,91.417-4.959,138.473A2.065,2.065,0,0,1,977.4,540.182Z" data-name="Path 54" id="Path_54"></path>
                    <path transform="translate(111.144 85.257)" d="M946.666,476.618a5.418,5.418,0,1,1-5.418-5.418A5.414,5.414,0,0,1,946.666,476.618Z" data-name="Path 55" id="Path_55"></path>
                    <path transform="translate(127.991 91.15)" d="M985.546,490.218a5.418,5.418,0,1,1-5.418-5.418A5.414,5.414,0,0,1,985.546,490.218Z" data-name="Path 56" id="Path_56"></path>
                    <path transform="translate(57.485 54.278)" d="M812,399.71c4.2,19.694,6.436,39.818,8.887,59.813,2.322,20.038,4.142,40.133,5.69,60.243,1.39,20.124,2.523,40.276,2.981,60.443.487,20.167.358,40.362-.731,60.5.315-20.167-.1-40.319-.86-60.443q-1.182-30.207-3.454-60.343c-1.39-20.1-3.225-40.176-5.217-60.228q-1.484-15.05-3.225-30.057C814.867,419.648,814.007,409.557,812,399.71Z" data-name="Path 57" id="Path_57"></path>
                    <path transform="translate(180.783 54.278)" d="M1114.371,399.71c-2.021,9.833-2.881,19.938-4.085,29.928q-1.741,15.007-3.225,30.057c-1.978,20.052-3.827,40.119-5.217,60.228q-2.322,30.143-3.454,60.343c-.76,20.138-1.175,40.291-.86,60.443-1.075-20.138-1.2-40.334-.731-60.5s1.591-40.319,2.981-60.443c1.562-20.11,3.368-40.2,5.69-60.243C1107.936,439.528,1110.172,419.418,1114.371,399.71Z" data-name="Path 58" id="Path_58"></path>
                    </g>
                </svg>
                
        <div class="price">$49.9</div>
    </div>
    <label class="favorite">
        <input checked="" type="checkbox">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
            <path d="M12 20a1 1 0 0 1-.437-.1C11.214 19.73 3 15.671 3 9a5 5 0 0 1 8.535-3.536l.465.465.465-.465A5 5 0 0 1 21 9c0 6.646-8.212 10.728-8.562 10.9A1 1 0 0 1 12 20z"></path>
        </svg>
    </label>

    <div class="content">
        <div class="brand">ADIDAS</div>
        <div class="product-name">Classic oversized hoodie</div>
        <div class="color-size-container">
            <div class="colors">
                Color
                <ul class="colors-container">
                    <li class="color"><a href="#"></a> <span class="color-name">Collegiate Gold</span></li>
                    <li class="color active"><a href="#"></a><span class="color-name">Team Navy</span></li>
                    <li class="color"><a href="#"></a><span class="color-name">Pulse Blue</span></li>
                    <li class="color"><a href="#"></a><span class="color-name">Pink Fusion</span></li>
                    +2
                </ul>
            </div>
            <div class="sizes">
                Size
                <ul class="size-container">
                    <li class="size">
                        <label class="size-radio">
                            <input name="size" value="xs" type="radio">
                            <span class="name">XS</span>
                        </label>
                    </li>
                    <li class="size">
                        <label class="size-radio">
                            <input checked="" name="size" value="s" type="radio">
                            <span class="name">S</span>
                        </label>
                    </li>
                    <li class="size">
                        <label class="size-radio">
                            <input name="size" value="m" type="radio">
                            <span class="name">M</span>
                        </label>
                    </li>
                    <li class="size">
                        <label class="size-radio">
                            <input name="size" value="l" type="radio">
                            <span class="name">L</span>
                        </label>
                    </li>
                    <li class="size">
                        <label class="size-radio">
                            <input name="size" value="xl" type="radio">
                            <span class="name">XL</span>
                        </label>
                    </li>
                    
                </ul>
            </div>
        </div>
        <div class="rating">
            <svg viewBox="0 0 99.498 16.286" xmlns="http://www.w3.org/2000/svg" class="svg four-star-svg">
                <path fill="#fc0" transform="translate(-0.001 -1.047)" d="M9.357,1.558,11.282,5.45a.919.919,0,0,0,.692.5l4.3.624a.916.916,0,0,1,.509,1.564l-3.115,3.029a.916.916,0,0,0-.264.812l.735,4.278a.919.919,0,0,1-1.334.967l-3.85-2.02a.922.922,0,0,0-.855,0l-3.85,2.02a.919.919,0,0,1-1.334-.967l.735-4.278a.916.916,0,0,0-.264-.812L.279,8.14A.916.916,0,0,1,.789,6.576l4.3-.624a.919.919,0,0,0,.692-.5L7.71,1.558A.92.92,0,0,1,9.357,1.558Z" id="star-svgrepo-com"></path>
                <path fill="#fc0" transform="translate(20.607 -1.047)" d="M9.357,1.558,11.282,5.45a.919.919,0,0,0,.692.5l4.3.624a.916.916,0,0,1,.509,1.564l-3.115,3.029a.916.916,0,0,0-.264.812l.735,4.278a.919.919,0,0,1-1.334.967l-3.85-2.02a.922.922,0,0,0-.855,0l-3.85,2.02a.919.919,0,0,1-1.334-.967l.735-4.278a.916.916,0,0,0-.264-.812L.279,8.14A.916.916,0,0,1,.789,6.576l4.3-.624a.919.919,0,0,0,.692-.5L7.71,1.558A.92.92,0,0,1,9.357,1.558Z" data-name="star-svgrepo-com" id="star-svgrepo-com-2"></path>
                <path fill="#fc0" transform="translate(41.215 -1.047)" d="M9.357,1.558,11.282,5.45a.919.919,0,0,0,.692.5l4.3.624a.916.916,0,0,1,.509,1.564l-3.115,3.029a.916.916,0,0,0-.264.812l.735,4.278a.919.919,0,0,1-1.334.967l-3.85-2.02a.922.922,0,0,0-.855,0l-3.85,2.02a.919.919,0,0,1-1.334-.967l.735-4.278a.916.916,0,0,0-.264-.812L.279,8.14A.916.916,0,0,1,.789,6.576l4.3-.624a.919.919,0,0,0,.692-.5L7.71,1.558A.92.92,0,0,1,9.357,1.558Z" data-name="star-svgrepo-com" id="star-svgrepo-com-3"></path>
                <path fill="#fc0" transform="translate(61.823 -1.047)" d="M9.357,1.558,11.282,5.45a.919.919,0,0,0,.692.5l4.3.624a.916.916,0,0,1,.509,1.564l-3.115,3.029a.916.916,0,0,0-.264.812l.735,4.278a.919.919,0,0,1-1.334.967l-3.85-2.02a.922.922,0,0,0-.855,0l-3.85,2.02a.919.919,0,0,1-1.334-.967l.735-4.278a.916.916,0,0,0-.264-.812L.279,8.14A.916.916,0,0,1,.789,6.576l4.3-.624a.919.919,0,0,0,.692-.5L7.71,1.558A.92.92,0,0,1,9.357,1.558Z" data-name="star-svgrepo-com" id="star-svgrepo-com-4"></path>
                <path fill="#e9e9e9" transform="translate(82.431 -1.047)" d="M9.357,1.558,11.282,5.45a.919.919,0,0,0,.692.5l4.3.624a.916.916,0,0,1,.509,1.564l-3.115,3.029a.916.916,0,0,0-.264.812l.735,4.278a.919.919,0,0,1-1.334.967l-3.85-2.02a.922.922,0,0,0-.855,0l-3.85,2.02a.919.919,0,0,1-1.334-.967l.735-4.278a.916.916,0,0,0-.264-.812L.279,8.14A.916.916,0,0,1,.789,6.576l4.3-.624a.919.919,0,0,0,.692-.5L7.71,1.558A.92.92,0,0,1,9.357,1.558Z" data-name="star-svgrepo-com" id="star-svgrepo-com-5"></path>
            </svg>
            (29,062)
        </div>
    </div>

    <div class="button-container">
        <button class="buy-button button">Buy Now</button>
        <button class="cart-button button">
            <svg viewBox="0 0 27.97 25.074" xmlns="http://www.w3.org/2000/svg">
                <path d="M0,1.175A1.173,1.173,0,0,1,1.175,0H3.4A2.743,2.743,0,0,1,5.882,1.567H26.01A1.958,1.958,0,0,1,27.9,4.035l-2.008,7.459a3.532,3.532,0,0,1-3.4,2.61H8.36l.264,1.4a1.18,1.18,0,0,0,1.156.955H23.9a1.175,1.175,0,0,1,0,2.351H9.78a3.522,3.522,0,0,1-3.462-2.865L3.791,2.669A.39.39,0,0,0,3.4,2.351H1.175A1.173,1.173,0,0,1,0,1.175ZM6.269,22.724a2.351,2.351,0,1,1,2.351,2.351A2.351,2.351,0,0,1,6.269,22.724Zm16.455-2.351a2.351,2.351,0,1,1-2.351,2.351A2.351,2.351,0,0,1,22.724,20.373Z" id="cart-shopping-solid"></path>
            </svg>

        </button>
    </div>
</div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: card, product, product card, cardhover , card animation, card hover */
.card {
  --accent-color: #ffd426;
  position: relative;
  width: 240px;
  background: white;
  border-radius: 1rem;
  padding: 0.3rem;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 50px 30px -20px;
  transition: all 0.5s ease-in-out;
}

.card .image-container {
  position: relative;
  width: 100%;
  height: 130px;
  border-radius: 0.7rem;
  border-top-right-radius: 4rem;
  margin-bottom: 1rem;
}

.card .image-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: inherit;
}

.card .image-container .svg {
  height: 100%;
  width: 100%;
  border-radius: inherit;
}

.card .image-container .price {
  position: absolute;
  right: 0.7rem;
  bottom: -1rem;
  background: white;
  color: var(--accent-color);
  font-weight: 900;
  font-size: 0.9rem;
  padding: 0.5rem;
  border-radius: 1rem 1rem 2rem 2rem;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 15px 0px;
}

.card .favorite {
  position: absolute;
  width: 19px;
  height: 19px;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.card .favorite input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.card .favorite input:checked ~ svg {
  animation: bouncing 0.5s;
  fill: rgb(255, 95, 95);
  filter: drop-shadow(0px 3px 1px rgba(53, 53, 53, 0.14));
}

.card .favorite svg {
  fill: #a8a8a8;
}

.card .content {
  padding: 0px 0.8rem;
  margin-bottom: 1rem;
}

.card .content .brand {
  font-weight: 900;
  color: #a6a6a6;
}

.card .content .product-name {
  font-weight: 700;
  color: #666666;
  font-size: 0.7rem;
  margin-bottom: 1rem;
}

.card .content .color-size-container {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
  color: #a8a8a8;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.card .content .color-size-container > * {
  flex: 1;
}

.card .content .color-size-container .colors .colors-container {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  font-size: 0.5rem;
  margin-top: 0.2rem;
}

.card .content .color-size-container .colors .colors-container .color {
  height: 14px;
  position: relative;
}

.card .content .color-size-container .colors .colors-container .color:hover .color-name {
  display: block;
}

.card .content .color-size-container .colors .colors-container .color a {
  display: inline-block;
  height: 100%;
  aspect-ratio: 1;
  border: 3px solid black;
  border-radius: 50%;
}

.card .content .color-size-container .colors .colors-container .color .color-name {
  display: none;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  background: black;
  padding: 0.2rem 1rem;
  border-radius: 1rem;
  text-align: center;
}

.card .content .color-size-container .colors .colors-container .color:first-child a {
  border-color: #ffd426;
}

.card .content .color-size-container .colors .colors-container .color:nth-child(2) a {
  background: #144076;
}

.card .content .color-size-container .colors .colors-container .color:nth-child(3) a {
  border-color: #00b9ff;
}

.card .content .color-size-container .colors .colors-container .color:nth-child(4) a {
  border-color: #ff6ba1;
}

.card .content .color-size-container .colors .colors-container .active {
  border-color: black;
}

.card .content .color-size-container .sizes .size-container {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.2rem;
}

.card .content .color-size-container .sizes .size-container .size {
  height: 14px;
}

.card .content .color-size-container .sizes .size-container .size .size-radio {
  cursor: pointer;
}

.card .content .color-size-container .sizes .size-container .size .size-radio input {
  display: none;
}

.card .content .color-size-container .sizes .size-container .size .size-radio input:checked ~ .name {
  background: var(--accent-color);
  border-radius: 2rem 2rem 1.5rem 1.5rem;
  color: white;
}

.card .content .color-size-container .sizes .size-container .size .size-radio .name {
  display: grid;
  place-content: center;
  height: 100%;
  aspect-ratio: 1.2/1;
  text-decoration: none;
  color: #484848;
  font-size: 0.5rem;
  text-align: center;
}

.card .content .rating {
  color: #a8a8a8;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card .content .rating svg {
  height: 12px;
}

.card .button-container {
  display: flex;
  gap: 0.3rem;
}

.card .button-container .button {
  border-radius: 1.4rem 1.4rem 0.7rem 0.7rem;
  border: none;
  padding: 0.5rem 0;
  background: var(--accent-color);
  color: white;
  font-weight: 900;
  cursor: pointer;
}

.card .button-container .button:hover {
  background: orangered;
}

.card .button-container .buy-button {
  flex: auto;
}

.card .button-container .cart-button {
  display: grid;
  place-content: center;
  width: 50px;
}

.card .button-container .cart-button svg {
  width: 15px;
  fill: white;
}

.card:hover {
  transform: scale(1.03);
}

@keyframes bouncing {
  from, to {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(1.5, 2.1);
  }

  50% {
    transform: scale(2.1, 1.5);
  }

  75% {
    transform: scale(1.5, 2.05);
  }
}
</style>


================================================
FILE: Cards/Smit-Prajapati_great-bat-98.html
================================================
<div class="card">
  <div class="top-section">
    <div class="border"></div>
    <div class="icons">
      <div class="logo">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 94 94" class="svg">
          <path fill="white" d="M38.0481 4.82927C38.0481 2.16214 40.018 0 42.4481 0H51.2391C53.6692 0 55.6391 2.16214 55.6391 4.82927V40.1401C55.6391 48.8912 53.2343 55.6657 48.4248 60.4636C43.6153 65.2277 36.7304 67.6098 27.7701 67.6098C18.8099 67.6098 11.925 65.2953 7.11548 60.6663C2.37183 56.0036 3.8147e-06 49.2967 3.8147e-06 40.5456V4.82927C3.8147e-06 2.16213 1.96995 0 4.4 0H13.2405C15.6705 0 17.6405 2.16214 17.6405 4.82927V39.1265C17.6405 43.7892 18.4805 47.2018 20.1605 49.3642C21.8735 51.5267 24.4759 52.6079 27.9678 52.6079C31.4596 52.6079 34.0127 51.5436 35.6268 49.4149C37.241 47.2863 38.0481 43.8399 38.0481 39.0758V4.82927Z"></path>
          <path fill="white" d="M86.9 61.8682C86.9 64.5353 84.9301 66.6975 82.5 66.6975H73.6595C71.2295 66.6975 69.2595 64.5353 69.2595 61.8682V4.82927C69.2595 2.16214 71.2295 0 73.6595 0H82.5C84.9301 0 86.9 2.16214 86.9 4.82927V61.8682Z"></path>
          <path fill="white" d="M2.86102e-06 83.2195C2.86102e-06 80.5524 1.96995 78.3902 4.4 78.3902H83.6C86.0301 78.3902 88 80.5524 88 83.2195V89.1707C88 91.8379 86.0301 94 83.6 94H4.4C1.96995 94 0 91.8379 0 89.1707L2.86102e-06 83.2195Z"></path>
        </svg>
      </div>
      <div class="social-media">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" class="svg">
          <path d="M 9.9980469 3 C 6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z"></path>
        </svg>
        <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
        </svg>
        <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
          <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path>
        </svg>
      </div>
    </div>
  </div>
  <div class="bottom-section">
    <span class="title">UNIVERSE OF UI</span>
    <div class="row row1">
      <div class="item">
        <span class="big-text">2626</span>
        <span class="regular-text">UI elements</span>
      </div>
      <div class="item">
        <span class="big-text">100%</span>
        <span class="regular-text">Free for use</span>
      </div>
      <div class="item">
        <span class="big-text">38,631</span>
        <span class="regular-text">Contributers</span>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: card, cool card, pure css, simple cards, blue card */
.card {
  width: 230px;
  border-radius: 20px;
  background: #1b233d;
  padding: 5px;
  overflow: hidden;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 20px 0px;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card:hover {
  transform: scale(1.05);
}

.card .top-section {
  height: 150px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(45deg, rgb(4, 159, 187) 0%, rgb(80, 246, 255) 100%);
  position: relative;
}

.card .top-section .border {
  border-bottom-right-radius: 10px;
  height: 30px;
  width: 130px;
  background: white;
  background: #1b233d;
  position: relative;
  transform: skew(-40deg);
  box-shadow: -10px -10px 0 0 #1b233d;
}

.card .top-section .border::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 0;
  right: -15px;
  background: rgba(255, 255, 255, 0);
  border-top-left-radius: 10px;
  box-shadow: -5px -5px 0 2px #1b233d;
}

.card .top-section::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  background: rgba(255, 255, 255, 0);
  height: 15px;
  width: 15px;
  border-top-left-radius: 15px;
  box-shadow: -5px -5px 0 2px #1b233d;
}

.card .top-section .icons {
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
}

.card .top-section .icons .logo {
  height: 100%;
  aspect-ratio: 1;
  padding: 7px 0 7px 15px;
}

.card .top-section .icons .logo .top-section {
  height: 100%;
}

.card .top-section .icons .social-media {
  height: 100%;
  padding: 8px 15px;
  display: flex;
  gap: 7px;
}

.card .top-section .icons .social-media .svg {
  height: 100%;
  fill: #1b233d;
}

.card .top-section .icons .social-media .svg:hover {
  fill: white;
}

.card .bottom-section {
  margin-top: 15px;
  padding: 10px 5px;
}

.card .bottom-section .title {
  display: block;
  font-size: 17px;
  font-weight: bolder;
  color: white;
  text-align: center;
  letter-spacing: 2px;
}

.card .bottom-section .row {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.card .bottom-section .row .item {
  flex: 30%;
  text-align: center;
  padding: 5px;
  color: rgba(170, 222, 243, 0.721);
}

.card .bottom-section .row .item .big-text {
  font-size: 12px;
  display: block;
}

.card .bottom-section .row .item .regular-text {
  font-size: 9px;
}

.card .bottom-section .row .item:nth-child(2) {
  border-left: 1px solid rgba(255, 255, 255, 0.126);
  border-right: 1px solid rgba(255, 255, 255, 0.126);
}
</style>


================================================
FILE: Cards/Smit-Prajapati_massive-insect-5.html
================================================
<div class="card">
  <div class="background">
  </div>
  <div class="logo">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.667 31.69" class="logo-svg">
      <path id="Path_6" data-name="Path 6" d="M12.827,1.628A1.561,1.561,0,0,1,14.31,0h2.964a1.561,1.561,0,0,1,1.483,1.628v11.9a9.252,9.252,0,0,1-2.432,6.852q-2.432,2.409-6.963,2.409T2.4,20.452Q0,18.094,0,13.669V1.628A1.561,1.561,0,0,1,1.483,0h2.98A1.561,1.561,0,0,1,5.947,1.628V13.191a5.635,5.635,0,0,0,.85,3.451,3.153,3.153,0,0,0,2.632,1.094,3.032,3.032,0,0,0,2.582-1.076,5.836,5.836,0,0,0,.816-3.486Z" transform="translate(0 0)"></path>
      <path id="Path_7" data-name="Path 7" d="M75.207,20.857a1.561,1.561,0,0,1-1.483,1.628h-2.98a1.561,1.561,0,0,1-1.483-1.628V1.628A1.561,1.561,0,0,1,70.743,0h2.98a1.561,1.561,0,0,1,1.483,1.628Z" transform="translate(-45.91 0)"></path>
      <path id="Path_8" data-name="Path 8" d="M0,80.018A1.561,1.561,0,0,1,1.483,78.39h26.7a1.561,1.561,0,0,1,1.483,1.628v2.006a1.561,1.561,0,0,1-1.483,1.628H1.483A1.561,1.561,0,0,1,0,82.025Z" transform="translate(0 -51.963)"></path>
    </svg>
  </div>
  <div class="box box1"><span class="icon"><svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" class="svg">
        <path d="M 9.9980469 3 C 6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z"></path>
      </svg></span></div>
  <div class="box box2"> <span class="icon"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="svg">
        <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
      </svg></span></div>
  <div class="box box3"><span class="icon"><svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" class="svg">
        <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path>
      </svg></span></div>
  <div class="box box4"></div>
</div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: card, follow me, cool card, card animation, card hover */
.card {
  position: relative;
  width: 200px;
  height: 200px;
  background: lightgrey;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transition: all 1s ease-in-out;
}

.background {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 107%, #ff89cc 0%, #9cb8ec 30%, #00ffee 60%, #62c2fe 100%);
}

.logo {
  position: absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  transition: all 0.6s ease-in-out;
}

.logo .logo-svg {
  fill: white;
  width: 30px;
  height: 30px;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.icon .svg {
  fill: rgba(255, 255, 255, 0.797);
  width: 100%;
  transition: all 0.5s ease-in-out;
}

.box {
  position: absolute;
  padding: 10px;
  text-align: right;
  background: rgba(255, 255, 255, 0.389);
  border-top: 2px solid rgb(255, 255, 255);
  border-right: 1px solid white;
  border-radius: 10% 13% 42% 0%/10% 12% 75% 0%;
  box-shadow: rgba(100, 100, 111, 0.364) -7px 7px 29px 0px;
  transform-origin: bottom left;
  transition: all 1s ease-in-out;
}

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.box:hover .svg {
  fill: white;
}

.box1 {
  width: 70%;
  height: 70%;
  bottom: -70%;
  left: -70%;
}

.box1::before {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #ff53d4 60%, #62c2fe 90%);
}

.box1:hover::before {
  opacity: 1;
}

.box1:hover .icon .svg {
  filter: drop-shadow(0 0 5px white);
}

.box2 {
  width: 50%;
  height: 50%;
  bottom: -50%;
  left: -50%;
  transition-delay: 0.2s;
}

.box2::before {
  background: radial-gradient(circle at 30% 107%, #91e9ff 0%, #00ACEE 90%);
}

.box2:hover::before {
  opacity: 1;
}

.box2:hover .icon .svg {
  filter: drop-shadow(0 0 5px white);
}

.box3 {
  width: 30%;
  height: 30%;
  bottom: -30%;
  left: -30%;
  transition-delay: 0.4s;
}

.box3::before {
  background: radial-gradient(circle at 30% 107%, #969fff 0%, #b349ff 90%);
}

.box3:hover::before {
  opacity: 1;
}

.box3:hover .icon .svg {
  filter: drop-shadow(0 0 5px white);
}

.box4 {
  width: 10%;
  height: 10%;
  bottom: -10%;
  left: -10%;
  transition-delay: 0.6s;
}

.card:hover {
  transform: scale(1.1);
}

.card:hover .box {
  bottom: -1px;
  left: -1px;
}

.card:hover .logo {
  transform: translate(0, 0);
  bottom: 20px;
  right: 20px;
}
</style>


================================================
FILE: Cards/Smit-Prajapati_moody-rat-79.html
================================================
<div class="card">
    <div class="logo"><svg class="svg" viewBox="0 0 94 94" xmlns="http://www.w3.org/2000/svg">
            <path d="M38.0481 4.82927C38.0481 2.16214 40.018 0 42.4481 0H51.2391C53.6692 0 55.6391 2.16214 55.6391 4.82927V40.1401C55.6391 48.8912 53.2343 55.6657 48.4248 60.4636C43.6153 65.2277 36.7304 67.6098 27.7701 67.6098C18.8099 67.6098 11.925 65.2953 7.11548 60.6663C2.37183 56.0036 3.8147e-06 49.2967 3.8147e-06 40.5456V4.82927C3.8147e-06 2.16213 1.96995 0 4.4 0H13.2405C15.6705 0 17.6405 2.16214 17.6405 4.82927V39.1265C17.6405 43.7892 18.4805 47.2018 20.1605 49.3642C21.8735 51.5267 24.4759 52.6079 27.9678 52.6079C31.4596 52.6079 34.0127 51.5436 35.6268 49.4149C37.241 47.2863 38.0481 43.8399 38.0481 39.0758V4.82927Z">
            </path>
            <path d="M86.9 61.8682C86.9 64.5353 84.9301 66.6975 82.5 66.6975H73.6595C71.2295 66.6975 69.2595 64.5353 69.2595 61.8682V4.82927C69.2595 2.16214 71.2295 0 73.6595 0H82.5C84.9301 0 86.9 2.16214 86.9 4.82927V61.8682Z">
            </path>
            <path d="M2.86102e-06 83.2195C2.86102e-06 80.5524 1.96995 78.3902 4.4 78.3902H83.6C86.0301 78.3902 88 80.5524 88 83.2195V89.1707C88 91.8379 86.0301 94 83.6 94H4.4C1.96995 94 0 91.8379 0 89.1707L2.86102e-06 83.2195Z">
            </path>
        </svg>
    </div>
    <div class="title">Main Title</div>
    <div class="icons-container">
        <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="svg">
            <rect ry="5" rx="5" y="2" x="2" height="20" width="20"></rect>
            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
            <line y2="6.5" y1="6.5" x2="17.51" x1="17.5"></line>
        </svg>
        <svg viewBox="0 0 512 512" width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="svg twitter">
            <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
        </svg>
        <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="svg">
            <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
            <path d="M9 18c-4.51 2-5-2-7-2"></path>
        </svg>
    </div>
    <div class="box box3">
        <div class="content">
            <span class="box-title">Title 1</span>
            <span class="box-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, facere.
            </span>

        </div>
    </div>
    <div class="box box2">
        <div class="content">
            <span class="box-title">Title 2</span>
            <span class="box-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et hic praesentium
                nobis cumque, dolores adipisci?
            </span>
        </div>
    </div>
    <div class="box box1">
        <div class="content">
            <span class="box-title">Title 3</span>
            <span class="box-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, facilis!
            </span>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: card, cool card, card animation, card hover, simple cards, card design */
.card {
  position: relative;
  width: 230px;
  height: 300px;
  background: linear-gradient(-45deg, rgb(0, 153, 255) 0%, cyan 100%);
  overflow: hidden;
  border: 1px solid black;
  box-shadow: rgba(141, 177, 205, 0.618) 0px 40px 30px -25px;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.card:hover {
  transform: scale(1.08);
  box-shadow: rgba(141, 177, 205, 0.618) 0px 30px 30px -25px;
}

.icons-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  z-index: 999;
}

.icons-container .svg {
  stroke: white;
  width: 20px;
  transition: transform 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.icons-container .svg:hover {
  transform: scale(1.5);
  stroke: black;
}

.icons-container .twitter {
  fill: white;
}

.icons-container .twitter:hover {
  fill: black;
  stroke: none;
}

.logo {
  width: 50px;
  padding: 1rem;
}

.logo .svg {
  fill: white;
}

.title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: White;
  font-weight: bold;
  font-size: 1.1rem;
}

.box {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: rgba(66, 66, 66, 0.349) 5px 0px 10px 0px inset;
  transition: all 0.5s ease-in-out;
  display: grid;
  place-content: center;
  padding: 2rem 2rem 3rem 2rem;
  border: 1px solid black;
}

.box .content {
  position: relative;
  transform: translateY(-100%);
  opacity: 0;
  transition: all 0.5s ease-in-out 0.3s;
}

.box .content .box-title {
  display: block;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.box .content .box-text {
  color: rgba(255, 255, 255, 0.738);
  font-size: 0.8rem;
}

.box:hover {
  right: 0;
  top: 0;
  border-radius: 0;
  border: 1px solid transparent;
  box-shadow: rgba(66, 66, 66, 0) 5px 0px 10px 0px inset;
}

.box:hover .content {
  transform: translate(0, 0);
  opacity: 1;
}

.box1 {
  top: -85%;
  right: -40%;
  background: rgb(255, 112, 60);
  border-radius: 200px;
}

.box2 {
  top: -70%;
  right: -45%;
  background: rgb(255, 174, 0);
  border-radius: 200px;
}

.box3 {
  top: -62%;
  right: -30%;
  background: rgb(255, 194, 52);
  border-radius: 200px;
}
</style>


================================================
FILE: Cards/Smit-Prajapati_smart-liger-5.html
================================================
<div class="parent">
        <div class="card">
            <div class="logo">
                <span class="circle circle1"></span>
                <span class="circle circle2"></span>
                <span class="circle circle3"></span>
                <span class="circle circle4"></span>
                <span class="circle circle5">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.667 31.69" class="svg">
                        <path id="Path_6" data-name="Path 6" d="M12.827,1.628A1.561,1.561,0,0,1,14.31,0h2.964a1.561,1.561,0,0,1,1.483,1.628v11.9a9.252,9.252,0,0,1-2.432,6.852q-2.432,2.409-6.963,2.409T2.4,20.452Q0,18.094,0,13.669V1.628A1.561,1.561,0,0,1,1.483,0h2.98A1.561,1.561,0,0,1,5.947,1.628V13.191a5.635,5.635,0,0,0,.85,3.451,3.153,3.153,0,0,0,2.632,1.094,3.032,3.032,0,0,0,2.582-1.076,5.836,5.836,0,0,0,.816-3.486Z" transform="translate(0 0)"></path>
                        <path id="Path_7" data-name="Path 7" d="M75.207,20.857a1.561,1.561,0,0,1-1.483,1.628h-2.98a1.561,1.561,0,0,1-1.483-1.628V1.628A1.561,1.561,0,0,1,70.743,0h2.98a1.561,1.561,0,0,1,1.483,1.628Z" transform="translate(-45.91 0)"></path>
                        <path id="Path_8" data-name="Path 8" d="M0,80.018A1.561,1.561,0,0,1,1.483,78.39h26.7a1.561,1.561,0,0,1,1.483,1.628v2.006a1.561,1.561,0,0,1-1.483,1.628H1.483A1.561,1.561,0,0,1,0,82.025Z" transform="translate(0 -51.963)"></path>
                      </svg>
                </span>

            </div>
            <div class="glass"></div>
            <div class="content">
                <span class="title">UIVERSE (3D UI)</span>
                <span class="text">Create, share, and use beautiful custom elements made with CSS</span>
            </div>
            <div class="bottom">
                
                <div class="social-buttons-container">
                    <button class="social-button .social-button1">
                        <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" class="svg">
                            <path d="M 9.9980469 3 C 6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z"></path>
                          </svg></button>
                      <button class="social-button .social-button2">
                        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="svg">
                            <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
                          </svg>
                      </button>
                      <button class="social-button .social-button3">
                        <svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" class="svg">
                            <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path>
                          </svg>
                      </button>
                </div>
                <div class="view-more">
                    <button class="view-more-button">View more</button>
                    <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
                </div>
            </div>
        </div>
    </div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: glassmorphism, card, hover effect, cool card, card animation, card hover, 3d card, hover me, 3d cool effect, 3d hover */
.parent {
  width: 290px;
  height: 300px;
  perspective: 1000px;
}

.card {
  height: 100%;
  border-radius: 50px;
  background: linear-gradient(135deg, rgb(0, 255, 214) 0%, rgb(8, 226, 96) 100%);
  transition: all 0.5s ease-in-out;
  transform-style: preserve-3d;
  box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, 0.2) 0px 25px 25px -5px;
}

.glass {
  transform-style: preserve-3d;
  position: absolute;
  inset: 8px;
  border-radius: 55px;
  border-top-right-radius: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
  /* -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px); */
  transform: translate3d(0px, 0px, 25px);
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  transition: all 0.5s ease-in-out;
}

.content {
  padding: 100px 60px 0px 30px;
  transform: translate3d(0, 0, 26px);
}

.content .title {
  display: block;
  color: #00894d;
  font-weight: 900;
  font-size: 20px;
}

.content .text {
  display: block;
  color: rgba(0, 137, 78, 0.7647058824);
  font-size: 15px;
  margin-top: 20px;
}

.bottom {
  padding: 10px 12px;
  transform-style: preserve-3d;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translate3d(0, 0, 26px);
}

.bottom .view-more {
  display: flex;
  align-items: center;
  width: 40%;
  justify-content: flex-end;
  transition: all 0.2s ease-in-out;
}

.bottom .view-more:hover {
  transform: translate3d(0, 0, 10px);
}

.bottom .view-more .view-more-button {
  background: none;
  border: none;
  color: #00c37b;
  font-weight: bolder;
  font-size: 12px;
}

.bottom .view-more .svg {
  fill: none;
  stroke: #00c37b;
  stroke-width: 3px;
  max-height: 15px;
}

.bottom .social-buttons-container {
  display: flex;
  gap: 10px;
  transform-style: preserve-3d;
}

.bottom .social-buttons-container .social-button {
  width: 30px;
  aspect-ratio: 1;
  padding: 5px;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  border: none;
  display: grid;
  place-content: center;
  box-shadow: rgba(5, 71, 17, 0.5) 0px 7px 5px -5px;
}

.bottom .social-buttons-container .social-button:first-child {
  transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
}

.bottom .social-buttons-container .social-button:nth-child(2) {
  transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
}

.bottom .social-buttons-container .social-button:nth-child(3) {
  transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
}

.bottom .social-buttons-container .social-button .svg {
  width: 15px;
  fill: #00894d;
}

.bottom .social-buttons-container .social-button:hover {
  background: black;
}

.bottom .social-buttons-container .social-button:hover .svg {
  fill: white;
}

.bottom .social-buttons-container .social-button:active {
  background: rgb(255, 234, 0);
}

.bottom .social-buttons-container .social-button:active .svg {
  fill: black;
}

.logo {
  position: absolute;
  right: 0;
  top: 0;
  transform-style: preserve-3d;
}

.logo .circle {
  display: block;
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  top: 0;
  right: 0;
  box-shadow: rgba(100, 100, 111, 0.2) -10px 10px 20px 0px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: rgba(0, 249, 203, 0.2);
  transition: all 0.5s ease-in-out;
}

.logo .circle1 {
  width: 170px;
  transform: translate3d(0, 0, 20px);
  top: 8px;
  right: 8px;
}

.logo .circle2 {
  width: 140px;
  transform: translate3d(0, 0, 40px);
  top: 10px;
  right: 10px;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  transition-delay: 0.4s;
}

.logo .circle3 {
  width: 110px;
  transform: translate3d(0, 0, 60px);
  top: 17px;
  right: 17px;
  transition-delay: 0.8s;
}

.logo .circle4 {
  width: 80px;
  transform: translate3d(0, 0, 80px);
  top: 23px;
  right: 23px;
  transition-delay: 1.2s;
}

.logo .circle5 {
  width: 50px;
  transform: translate3d(0, 0, 100px);
  top: 30px;
  right: 30px;
  display: grid;
  place-content: center;
  transition-delay: 1.6s;
}

.logo .circle5 .svg {
  width: 20px;
  fill: white;
}

.parent:hover .card {
  transform: rotate3d(1, 1, 0, 30deg);
  box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
}

.parent:hover .card .bottom .social-buttons-container .social-button {
  transform: translate3d(0, 0, 50px);
  box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px 0px;
}

.parent:hover .card .logo .circle2 {
  transform: translate3d(0, 0, 60px);
}

.parent:hover .card .logo .circle3 {
  transform: translate3d(0, 0, 80px);
}

.parent:hover .card .logo .circle4 {
  transform: translate3d(0, 0, 100px);
}

.parent:hover .card .logo .circle5 {
  transform: translate3d(0, 0, 120px);
}
</style>


================================================
FILE: Cards/Smit-Prajapati_spicy-rat-83.html
================================================
<div class="card">
    <div class="border"></div>
    <div class="content">
      <div class="logo">
        <div class="logo1">
          <svg viewBox="0 0 29.667 31.69" xmlns="http://www.w3.org/2000/svg" id="logo-main">
            <path transform="translate(0 0)" d="M12.827,1.628A1.561,1.561,0,0,1,14.31,0h2.964a1.561,1.561,0,0,1,1.483,1.628v11.9a9.252,9.252,0,0,1-2.432,6.852q-2.432,2.409-6.963,2.409T2.4,20.452Q0,18.094,0,13.669V1.628A1.561,1.561,0,0,1,1.483,0h2.98A1.561,1.561,0,0,1,5.947,1.628V13.191a5.635,5.635,0,0,0,.85,3.451,3.153,3.153,0,0,0,2.632,1.094,3.032,3.032,0,0,0,2.582-1.076,5.836,5.836,0,0,0,.816-3.486Z" data-name="Path 6" id="Path_6"></path>
            <path transform="translate(-45.91 0)" d="M75.207,20.857a1.561,1.561,0,0,1-1.483,1.628h-2.98a1.561,1.561,0,0,1-1.483-1.628V1.628A1.561,1.561,0,0,1,70.743,0h2.98a1.561,1.561,0,0,1,1.483,1.628Z" data-name="Path 7" id="Path_7"></path>
            <path transform="translate(0 -51.963)" d="M0,80.018A1.561,1.561,0,0,1,1.483,78.39h26.7a1.561,1.561,0,0,1,1.483,1.628v2.006a1.561,1.561,0,0,1-1.483,1.628H1.483A1.561,1.561,0,0,1,0,82.025Z" data-name="Path 8" id="Path_8"></path>
          </svg>
        </div>
        <div class="logo2">
          <svg viewBox="0 0 101.014 23.535" xmlns="http://www.w3.org/2000/svg" id="logo-second">
            <g transform="translate(-1029.734 -528.273)">
              <path transform="translate(931.023 527.979)" d="M109.133,14.214l3.248-11.706A1.8,1.8,0,0,1,114.114,1.2h2.229a1.789,1.789,0,0,1,1.7,2.358L111.884,21.71a1.8,1.8,0,0,1-1.7,1.216h-3a1.8,1.8,0,0,1-1.7-1.216L99.317,3.554a1.789,1.789,0,0,1,1.7-2.358h2.229a1.8,1.8,0,0,1,1.734,1.312l3.248,11.706a.468.468,0,0,0,.9,0Z" data-name="Path 1" id="Path_1"></path>
              <path transform="translate(888.72 528.773)" d="M173.783,22.535a10.77,10.77,0,0,1-7.831-2.933,10.387,10.387,0,0,1-3.021-7.813v-.562A13.067,13.067,0,0,1,164.2,5.372,9.315,9.315,0,0,1,167.81,1.4,10.176,10.176,0,0,1,173.136,0,9.105,9.105,0,0,1,180.2,2.812q2.576,2.812,2.577,7.973v.583a1.793,1.793,0,0,1-1.8,1.787H169.407a.466.466,0,0,0-.457.564,5.08,5.08,0,0,0,5.217,4.136A6.594,6.594,0,0,0,178.25,16.6a1.817,1.817,0,0,1,2.448.218l.557.62a1.771,1.771,0,0,1-.1,2.488,9.261,9.261,0,0,1-2.4,1.57,11.732,11.732,0,0,1-4.972,1.034ZM173.115,4.68A3.66,3.66,0,0,0,170.3,5.85,6.04,6.04,0,0,0,168.911,9.2h8.125V8.735a4.305,4.305,0,0,0-1.051-3,3.781,3.781,0,0,0-2.87-1.059Z" data-name="Path 2" id="Path_2"></path>
              <path transform="translate(842.947 528.771)" d="M244.851,3.928a1.852,1.852,0,0,1-1.95,1.76c-.1,0-.2,0-.3,0a7.53,7.53,0,0,0-2.234.3,3.275,3.275,0,0,0-2.348,3.1V20.347a1.844,1.844,0,0,1-1.9,1.787h-2.366a1.844,1.844,0,0,1-1.9-1.787V1.751A1.391,1.391,0,0,1,233.294.4h3.043a1.4,1.4,0,0,1,1.428,1.265l.035.533a.282.282,0,0,0,.5.138A5.617,5.617,0,0,1,242.988,0h.031a1.832,1.832,0,0,1,1.864,1.813l-.032,2.114Z" data-name="Path 3" id="Path_3"></path>
              <path transform="translate(814.555 528.773)" d="M287.2,16.127a1.869,1.869,0,0,0-1.061-1.677,12.11,12.11,0,0,0-3.406-1.095q-7.8-1.627-7.8-6.587a5.956,5.956,0,0,1,2.415-4.83A9.781,9.781,0,0,1,283.659,0a10.536,10.536,0,0,1,6.659,1.948,6.36,6.36,0,0,1,2.029,2.586,1.791,1.791,0,0,1-1.661,2.475h-2.291a1.754,1.754,0,0,1-1.624-1.137,2.7,2.7,0,0,0-.606-.922,3.435,3.435,0,0,0-2.526-.814,3.512,3.512,0,0,0-2.284.663,2.088,2.088,0,0,0-.808,1.687,1.786,1.786,0,0,0,.92,1.557,9.485,9.485,0,0,0,3.1,1.024,25.5,25.5,0,0,1,3.678.974q4.627,1.687,4.628,5.844a5.659,5.659,0,0,1-2.567,4.81,11.125,11.125,0,0,1-6.629,1.838,11.627,11.627,0,0,1-4.881-.974,8.173,8.173,0,0,1-3.345-2.671,6.843,6.843,0,0,1-.679-1.174,1.784,1.784,0,0,1,1.653-2.492h1.9a1.786,1.786,0,0,1,1.673,1.133,2.8,2.8,0,0,0,.925,1.237,4.587,4.587,0,0,0,2.87.824,4.251,4.251,0,0,0,2.536-.632,1.965,1.965,0,0,0,.859-1.657Z" data-name="Path 4" id="Path_4"></path>
              <path transform="translate(772.607 528.773)" d="M348.648,22.535a10.77,10.77,0,0,1-7.832-2.933,10.386,10.386,0,0,1-3.021-7.813v-.562a13.067,13.067,0,0,1,1.273-5.854A9.314,9.314,0,0,1,342.676,1.4,10.174,10.174,0,0,1,348,0a9.1,9.1,0,0,1,7.063,2.812q2.576,2.812,2.577,7.973v.583a1.793,1.793,0,0,1-1.8,1.787H344.272a.467.467,0,0,0-.457.564,5.081,5.081,0,0,0,5.217,4.136,6.594,6.594,0,0,0,4.083-1.251,1.817,1.817,0,0,1,2.448.218l.557.62a1.771,1.771,0,0,1-.1,2.488,9.26,9.26,0,0,1-2.4,1.57,11.731,11.731,0,0,1-4.972,1.034ZM347.981,4.68a3.659,3.659,0,0,0-2.819,1.17A6.035,6.035,0,0,0,343.777,9.2H351.9V8.735a4.307,4.307,0,0,0-1.051-3,3.781,3.781,0,0,0-2.87-1.059Z" data-name="Path 5" id="Path_5"></path>
            </g>
          </svg>
        </div>
        <span class="trail"></span>
      </div>
      <span class="logo-bottom-text">uiverse.io</span>
    </div>
    <span class="bottom-text">universe of ui</span>
  </div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: card, business card, card animation, card hover, simple cards */
.card {
  width: 300px;
  height: 200px;
  background: #243137;
  position: relative;
  display: grid;
  place-content: center;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

#logo-main, #logo-second {
  height: 100%;
}

#logo-main {
  fill: #bd9f67;
}

#logo-second {
  padding-bottom: 10px;
  fill: none;
  stroke: #bd9f67;
  stroke-width: 1px;
}

.border {
  position: absolute;
  inset: 0px;
  border: 2px solid #bd9f67;
  opacity: 0;
  transform: rotate(10deg);
  transition: all 0.5s ease-in-out;
}

.bottom-text {
  position: absolute;
  left: 50%;
  bottom: 13px;
  transform: translateX(-50%);
  font-size: 6px;
  text-transform: uppercase;
  padding: 0px 5px 0px 8px;
  color: #bd9f67;
  background: #243137;
  opacity: 0;
  letter-spacing: 7px;
  transition: all 0.5s ease-in-out;
}

.content {
  transition: all 0.5s ease-in-out;
}

.content .logo {
  height: 35px;
  position: relative;
  width: 33px;
  overflow: hidden;
  transition: all 1s ease-in-out;
}

.content .logo .logo1 {
  height: 33px;
  position: absolute;
  left: 0;
}

.content .logo .logo2 {
  height: 33px;
  position: absolute;
  left: 33px;
}

.content .logo .trail {
  position: absolute;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}

.content .logo-bottom-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-top: 30px;
  color: #bd9f67;
  padding-left: 8px;
  font-size: 11px;
  opacity: 0;
  letter-spacing: none;
  transition: all 0.5s ease-in-out 0.5s;
}

.card:hover {
  border-radius: 0;
  transform: scale(1.1);
}

.card:hover .logo {
  width: 134px;
  animation: opacity 1s ease-in-out;
}

.card:hover .border {
  inset: 15px;
  opacity: 1;
  transform: rotate(0);
}

.card:hover .bottom-text {
  letter-spacing: 3px;
  opacity: 1;
  transform: translateX(-50%);
}

.card:hover .content .logo-bottom-text {
  opacity: 1;
  letter-spacing: 9.5px;
}

.card:hover .trail {
  animation: trail 1s ease-in-out;
}

@keyframes opacity {
  0% {
    border-right: 1px solid transparent;
  }

  10% {
    border-right: 1px solid #bd9f67;
  }

  80% {
    border-right: 1px solid #bd9f67;
  }

  100% {
    border-right: 1px solid transparent;
  }
}

@keyframes trail {
  0% {
    background: linear-gradient(90deg, rgba(189, 159, 103, 0) 90%, rgb(189, 159, 103) 100%);
    opacity: 0;
  }

  30% {
    background: linear-gradient(90deg, rgba(189, 159, 103, 0) 70%, rgb(189, 159, 103) 100%);
    opacity: 1;
  }

  70% {
    background: linear-gradient(90deg, rgba(189, 159, 103, 0) 70%, rgb(189, 159, 103) 100%);
    opacity: 1;
  }

  95% {
    background: linear-gradient(90deg, rgba(189, 159, 103, 0) 90%, rgb(189, 159, 103) 100%);
    opacity: 0;
  }
}
</style>


================================================
FILE: Cards/Smit-Prajapati_stupid-bullfrog-39.html
================================================
<div class="card">
        <button class="mail">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>
        </button>
        <div class="profile-pic">
            
            <svg version="1.1" id="svg2" width="666.66669" height="666.66669" viewBox="0 0 666.66669 666.66669" xmlns="http://www.w3.org/2000/svg">
                <defs id="defs6">
                    <clipPath clipPathUnits="userSpaceOnUse" id="clipPath408">
                        <path d="m 699.926,0 h 3600.16 V 4818.31 H 699.926 Z" id="path406"></path>
                    </clipPath>
                </defs>
                
                <g id="g8" transform="matrix(1.3333333,0,0,-1.3333333,0,666.66667)">
                    <g id="g10" transform="scale(0.1)">
                        <path d="M 0,0 H 5000 V 5000 H 0 Z" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path12"></path>
                        <path d="M 0,1126.2 H 4487.25 V 5000 H 0 Z" style="fill:#fef0ef;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path14"></path>
                        <path d="M 5000,561.691 4487.25,1126.2 V 5000 H 5000 V 561.691" style="fill:#fde4e1;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path16"></path>
                        <path d="M 4487.25,1146.2 5000,590.422 V 530.859 L 4487.25,1106.22 0,1106.2 v 40 h 4487.25" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path18"></path>
                        <path d="m 914.891,2652.86 h 2369.21 V 4428.88 H 914.891 Z" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path20"></path>
                        <path d="m 995.844,2713.15 h 2207.3 v 1655.44 h -2207.3 z" style="fill:#fdeae9;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path22"></path>
                        <path d="M 2914.29,4139.24 H 1284.71 v 127.31 h 1629.58 v -127.31" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path24"></path>
                        <path d="m 1349.04,2921.58 h -126.83 v 318.43 h 126.83 v -318.43" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path26"></path>
                        <path d="m 1634.86,3519.55 h -126.83 v -597.97 h 126.83 v 597.97" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path28"></path>
                        <path d="m 1920.68,3457.72 h -126.84 v -536.14 h 126.84 v 536.14" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path30"></path>
                        <path d="m 2079.66,2921.58 h 126.828 v 838.84 H 2079.66 Z" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path32"></path>
                        <path d="M 2699.39,2833.93 H 1138.44 v 1154 h 17.32 V 2851.25 h 1543.63 v -17.32" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path34"></path>
                        <path d="m 1278.36,3412.46 -11.56,12.89 296.95,266.64 275.05,-59.75 297.83,331.57 12.89,-11.57 -304.57,-339.06 -276.22,60 -290.37,-260.72" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path36"></path>
                        <path d="m 2172.85,3903.25 -83.98,80.53 108.42,29.01 z" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path38"></path>
                        <path d="m 3051.89,3946.91 h -579.93 v 22.73 h 579.93 v -22.73" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path40"></path>
                        <path d="m 3051.89,3891.89 h -658.23 v 22.72 h 658.23 v -22.72" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path42"></path>
                        <path d="m 3051.89,3836.86 h -658.23 v 22.73 h 658.23 v -22.73" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path44"></path>
                        <path d="m 3051.89,3781.84 h -658.23 v 22.72 h 658.23 v -22.72" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path46"></path>
                        <path d="m 3051.89,3726.81 h -658.23 v 22.73 h 658.23 v -22.73" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path48"></path>
                        <path d="m 3051.89,3671.78 h -658.23 v 22.73 h 658.23 v -22.73" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path50"></path>
                        <path d="m 3051.89,3616.76 h -658.23 v 22.72 h 658.23 v -22.72" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path52"></path>
                        <path d="m 3051.89,3561.73 h -658.23 v 22.73 h 658.23 v -22.73" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path54"></path>
                        <path d="m 3051.89,3506.7 h -658.23 v 22.73 h 658.23 v -22.73" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path56"></path>
                        <path d="m 2393.66,3451.68 h 658.23 v 22.7188 h -658.23 z" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path58"></path>
                        <path d="m 2393.66,3396.65 h 658.23 v 22.7227 h -658.23 z" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path60"></path>
                        <path d="m 3051.89,3341.62 h -658.23 v 22.73 h 658.23 v -22.73" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path62"></path>
                        <path d="m 3051.89,3286.6 h -658.23 v 22.72 h 658.23 v -22.72" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path64"></path>
                        <path d="m 3051.89,3231.57 h -658.23 v 22.73 h 658.23 v -22.73" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path66"></path>
                        <path d="m 3051.89,3176.54 h -658.23 v 22.73 h 658.23 v -22.73" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path68"></path>
                        <path d="m 3051.89,3121.52 h -658.23 v 22.72 h 658.23 v -22.72" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path70"></path>
                        <path d="m 3051.89,3066.49 h -658.23 v 22.72 h 658.23 v -22.72" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path72"></path>
                        <path d="m 3051.89,3011.46 h -658.23 v 22.72 h 658.23 v -22.72" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path74"></path>
                        <path d="m 3051.89,2956.44 h -289.96 v 22.72 h 289.96 v -22.72" style="fill:#fff8f6;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path76"></path>
                        <path d="m 3661.18,4380.23 c -149.67,0 -271.42,-121.76 -271.42,-271.42 0,-149.66 121.75,-271.42 271.42,-271.42 149.66,0 271.42,121.76 271.42,271.42 0,149.66 -121.76,271.42 -271.42,271.42 z m 0,-574.43 c -167.08,0 -303.02,135.93 -303.02,303.01 0,167.08 135.94,303.01 303.02,303.01 167.08,0 303.01,-135.93 303.01,-303.01 0,-167.08 -135.93,-303.01 -303.01,-303.01" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path78"></path>
                        <path d="m 3846.4,4108.81 v 0 c 0,8.44 6.9,15.34 15.35,15.34 h 26.3 c 8.43,0 15.34,-6.9 15.34,-15.34 0,-8.44 -6.91,-15.34 -15.34,-15.34 h -26.3 c -8.45,0 -15.35,6.9 -15.35,15.34" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path80"></path>
                        <path d="m 3418.96,4108.81 v 0 c 0,8.44 6.91,15.34 15.36,15.34 h 26.3 c 8.43,0 15.34,-6.9 15.34,-15.34 0,-8.44 -6.91,-15.34 -15.34,-15.34 h -26.3 c -8.45,0 -15.36,6.9 -15.36,15.34" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path82"></path>
                        <path d="m 3661.18,3923.59 v 0 c 8.44,0 15.34,-6.91 15.34,-15.34 v -26.31 c 0,-8.43 -6.9,-15.34 -15.34,-15.34 -8.44,0 -15.34,6.91 -15.34,15.34 v 26.31 c 0,8.43 6.9,15.34 15.34,15.34" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path84"></path>
                        <path d="m 3661.18,4351.02 v 0 c 8.44,0 15.34,-6.9 15.34,-15.34 v -26.3 c 0,-8.45 -6.9,-15.35 -15.34,-15.35 -8.44,0 -15.34,6.9 -15.34,15.35 v 26.3 c 0,8.44 6.9,15.34 15.34,15.34" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path86"></path>
                        <path d="m 3530.21,3977.84 v 0 c 5.97,-5.97 5.97,-15.74 0,-21.7 l -18.6,-18.6 c -5.97,-5.97 -15.73,-5.97 -21.7,0 -5.96,5.97 -5.96,15.73 0,21.7 l 18.61,18.6 c 5.96,5.97 15.72,5.97 21.69,0" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path88"></path>
                        <path d="m 3832.45,4280.08 v 0 c 5.97,-5.97 5.97,-15.73 0,-21.7 l -18.6,-18.6 c -5.97,-5.97 -15.73,-5.97 -21.7,0 -5.97,5.97 -5.97,15.73 0,21.7 l 18.6,18.6 c 5.97,5.97 15.73,5.97 21.7,0" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path90"></path>
                        <path d="m 3530.21,4239.78 v 0 c -5.97,-5.97 -15.73,-5.97 -21.69,0 l -18.61,18.6 c -5.96,5.97 -5.96,15.73 0,21.7 5.97,5.97 15.73,5.97 21.7,0 l 18.6,-18.6 c 5.97,-5.97 5.97,-15.73 0,-21.7" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path92"></path>
                        <path d="m 3832.45,3937.54 v 0 c -5.97,-5.97 -15.73,-5.97 -21.7,0 l -18.6,18.6 c -5.97,5.96 -5.97,15.73 0,21.7 5.97,5.97 15.73,5.97 21.7,0 l 18.6,-18.6 c 5.97,-5.97 5.97,-15.73 0,-21.7" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path94"></path>
                        <path d="m 3686.25,4108.81 c 0,-13.85 -11.22,-25.07 -25.07,-25.07 -13.85,0 -25.07,11.22 -25.07,25.07 0,13.84 11.22,25.07 25.07,25.07 13.85,0 25.07,-11.23 25.07,-25.07" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path96"></path>
                        <path d="m 3661.18,4140.21 v 0 c -2.68,0 -4.87,2.18 -4.87,4.87 v 128.11 c 0,2.69 2.19,4.87 4.87,4.87 2.69,0 4.87,-2.18 4.87,-4.87 v -128.11 c 0,-2.69 -2.18,-4.87 -4.87,-4.87" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path98"></path>
                        <path d="m 3695.75,4108.81 v 0 c 0,2.69 2.18,4.87 4.87,4.87 h 84.62 c 2.69,0 4.87,-2.18 4.87,-4.87 0,-2.69 -2.18,-4.87 -4.87,-4.87 h -84.62 c -2.69,0 -4.87,2.18 -4.87,4.87" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path100"></path>
                        <path d="m 2811.08,1683.91 h -78.68 v 281.2 h 78.68 v -281.2" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path102"></path>
                        <path d="m 2734.9,1686.41 h 73.68 v 276.2 h -73.68 z m 78.68,-5 h -83.68 v 286.2 h 83.68 v -286.2" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path104"></path>
                        <path d="m 2790.73,1756.66 h -37.98 v 178.52 h 37.98 v -178.52" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path106"></path>
                        <path d="m 2757.74,1761.66 h 28 v 168.53 h -28 z m 37.98,-9.99 h -47.97 v 188.51 h 47.97 v -188.51" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path108"></path>
                        <path d="m 2968.46,1683.91 h -78.68 v 281.2 h 78.68 v -281.2" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path110"></path>
                        <path d="m 2892.27,1686.41 h 73.69 v 276.2 h -73.69 z m 78.69,-5 h -83.68 v 286.2 h 83.68 v -286.2" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path112"></path>
                        <path d="m 2948.11,1756.66 h -37.98 v 178.52 h 37.98 v -178.52" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path114"></path>
                        <path d="m 2915.12,1761.66 h 27.99 v 168.53 h -27.99 z m 37.98,-9.99 h -47.96 v 188.51 h 47.96 v -188.51" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path116"></path>
                        <path d="m 2889.78,1683.91 h -78.7 v 281.2 h 78.7 v -281.2" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path118"></path>
                        <path d="m 2869.41,1756.66 h -37.97 v 178.52 h 37.97 v -178.52" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path120"></path>
                        <path d="m 1071.52,2645.58 c 6.16,10.04 33.79,32.89 40.36,42.67 18.94,28.26 52.01,77.18 82.18,97.67 9.51,6.46 40.24,10.88 43.61,5.2 4.02,-6.77 -11.83,-7.71 -26.78,-14 -8.95,-3.76 -11.3,-13.34 -15.68,-19.31 9.07,-2.61 16.3,-6.1 12.79,-14.85 11.28,-1.69 15.53,-7.56 13.48,-18.77 22.62,-5.78 -13.1,-41.1 -21.58,-48.72 -5.52,-4.96 -11.55,-9.71 -18.69,-11.72 -7.15,-2.03 -24.27,-3.38 -29.15,2.21 -16.16,-11.71 -39.82,-43.31 -39.82,-43.31" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path122"></path>
                        <path d="m 692.59,786.012 41.078,0.449 c -0.172,-19.129 67.852,-36.16 97.129,-55.352 8.641,-5.66 24.715,-16.769 14.359,-26.8 -6.176,-5.977 -19.433,-8.028 -28.218,-7.809 -36.223,0.91 -73.047,0.23 -106.372,12.148 -13.382,4.801 -27.679,11.774 -31.25,23.571 -4.714,15.601 13.614,26.902 13.274,53.793" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path124"></path>
                        <path d="m 236.465,771.34 40.199,0.449 c -0.164,-19.117 66.285,-36.168 94.902,-55.348 8.446,-5.671 24.157,-16.781 14.036,-26.812 -6.036,-5.981 -19,-8.02 -27.582,-7.797 -35.418,0.898 -71.403,0.219 -103.977,12.137 -13.082,4.801 -27.063,11.773 -30.547,23.57 -4.613,15.602 13.305,26.902 12.969,53.801" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path126"></path>
                        <path d="m 729.652,2025.12 c 53.004,-269.56 53.004,-393.22 59.426,-591.82 7.797,-241.24 -28.414,-464.909 -42.637,-662.652 0,0 -30.484,-14.789 -57.668,-0.699 -25.941,120.86 -102.625,346.171 -76.082,506.411 4.77,28.79 8.68,57.72 9.028,86.9 0.82,68.39 -193.637,395.15 -154.762,707.41" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path128"></path>
                        <path d="m 551.762,2116.81 c 17.89,-176.45 -66.153,-599.99 -99.133,-763.54 -43.027,-213.38 -153.652,-563.45 -161.09,-597.239 -14.199,-9.531 -56.805,0.711 -56.805,0.711 -2.468,162.406 -44.211,378.558 13.246,533.038 10.321,27.75 21.661,55.54 25.09,84.57 3.258,27.56 -93.257,338.29 -76.437,470.17 8.887,69.68 33.719,153.77 94.676,229.93" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path130"></path>
                        <path d="m 537.809,1839.29 c -7.496,-46.72 -14.192,-93.54 -19.926,-140.51 -0.578,-4.72 -1.211,-9.42 -1.699,-14.15 -0.129,-1.25 -0.383,-2.56 -0.301,-3.81 0.058,-0.94 -0.113,-3.07 0.133,-1.21 -0.364,-2.73 3.933,-2.71 4.293,0 -0.352,-2.65 -0.075,-0.86 0.242,0.24 0.301,1.02 0.488,2.01 0.664,3.06 0.633,3.81 1.144,7.64 1.691,11.46 1.813,12.68 3.731,25.36 5.356,38.07 3.703,28.85 7.422,57.71 10.453,86.63 0.695,6.6 1.387,13.22 2.078,19.82 0.18,1.69 -2.719,2.1 -2.984,0.4" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path132"></path>
                        <path d="m 332.875,2756.77 c 29.961,31.32 84.684,18.2 127.605,24.28 33.36,4.73 66.715,9.46 100.079,14.18 7.953,1.13 16.046,2.26 23.984,1.02 11.52,-1.81 21.645,-8.4 31.363,-14.84 27.848,-18.44 55.696,-36.88 83.547,-55.32 29.75,-19.7 27.008,-62.55 31.027,-94.92 4.723,-38.06 8.247,-76.27 11.004,-114.53 5.434,-75.29 7.93,-150.8 8.532,-226.29 0.574,-72.24 -4.137,-143.8 -9.141,-215.82 -0.34,-4.9 -0.676,-9.88 0.297,-14.7 1.887,-9.29 8.43,-17.03 11.125,-26.13 5.496,-18.54 -6.012,-37.87 -19.52,-51.73 -57.355,-58.85 -159.183,-47.31 -233.832,-46.41 -72.73,0.87 -145.351,14.3 -213.75,39.92 -25.195,9.43 -76.218,22.82 -93.425,45.22 -17.594,22.9 22.671,77.83 23.375,105.68 4.324,171.4 8.324,341.74 12.644,513.14 0.84,33.27 -25.156,67.31 -2.043,90.49" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path134"></path>
                        <path d="m 199.426,1928.11 c 7.676,-1.92 11.082,-10.82 12.453,-18.61 4.32,-24.45 0.484,-49.52 -3.348,-74.06 -1.301,-8.27 -2.593,-16.55 -3.886,-24.83 -0.68,-4.34 -1.36,-8.77 -0.629,-13.11 0.675,-4.06 2.554,-7.8 4.238,-11.56 3.894,-8.71 6.875,-17.88 11.742,-26.09 4.867,-8.21 12.067,-15.59 21.289,-18.04 1.348,-0.36 2.754,-0.62 3.949,-1.33 1.567,-0.94 2.594,-2.54 3.618,-4.04 2.652,-3.88 7.199,-7.91 11.468,-5.95 1.649,9.38 -0.703,18.93 -1.757,28.4 -2.004,18.03 0.792,36.59 8.035,53.23 0.48,1.1 1.035,2.25 2.058,2.88 3.063,1.87 6.203,-2.3 7.395,-5.69 1.488,-4.22 2.976,-8.45 4.469,-12.67 0.929,-2.65 2.543,-5.79 5.343,-5.73 3.125,0.06 4.45,3.94 4.922,7.04 0.781,5.08 1.563,10.16 2.344,15.24 1.805,11.7 3.59,23.75 0.851,35.28 -1.968,8.29 -6.199,15.87 -10.734,23.07 -4.613,7.34 -9.598,14.42 -14.941,21.23 -3.164,4.04 -6.629,8.5 -6.379,13.62" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path136"></path>
                        <path d="m 1194.34,2167.15 c 6.53,-2.79 35.6,-24.1 42.05,-26.27 5.67,-1.92 23.16,0.77 36.32,0.16 4.85,-0.23 21.76,-6.35 28.11,-9.27 2.32,-1.08 9.94,-4.37 12.15,-5.67 2.29,-1.34 4.43,-2.93 6.57,-4.5 4.75,-3.5 9.49,-7.01 14.24,-10.52 1.23,-0.9 2.55,-1.93 2.94,-3.41 0.43,-1.6 -0.39,-3.33 -1.68,-4.37 -1.29,-1.02 -2.97,-1.44 -4.61,-1.62 -7.85,-0.8 -26.54,8.07 -26.53,7.11 0.01,-0.85 16.25,-14.4 22.79,-21.31 4.58,-4.85 21.66,-35.43 18.79,-42.68 -2.84,-7.19 -12.67,-8.2 -19.04,-6.43 -10.15,2.82 -30.06,22.53 -30.06,22.53 0,0 -11.31,3.39 -23.25,4.81 -6.36,0.77 -12.97,0.85 -18.79,3.54 -12.4,5.72 -16.94,20.89 -26.56,30.59 -7.23,7.29 -16.92,11.05 -26.14,15.1 -10.05,4.42 -26.59,11.02 -26.59,11.02" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path138"></path>
                        <path d="m 1252.4,2107.92 c 7.87,-3.1 16.11,-5.08 24.52,-5.92 4.22,-0.42 8.42,-0.52 12.65,-0.25 3.83,0.24 8.5,0.29 11.91,2.17 1.27,0.69 0.53,2.32 -0.66,2.47 -3.9,0.48 -8.19,-0.74 -12.12,-0.95 -3.91,-0.21 -7.86,-0.23 -11.78,-0.01 -8.15,0.46 -16.18,2.09 -23.9,4.75 -1.45,0.48 -2,-1.72 -0.62,-2.26" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path140"></path>
                        <path d="m 358.523,2609.3 c -71.804,-160.82 -123.921,-278.71 -173.578,-370.52 -2.367,-12.42 53.453,-250.68 85.129,-328.76 0,0 -6.074,-18.88 -27.023,-18.88 -20.946,0 -32.637,2.98 -32.637,2.98 0,0 -185.3124,239 -180.5038,371.95 6.9062,190.69 118.9338,405.64 145.5818,439.04 52.824,66.18 174.758,73.85 250.27,95.43" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path142"></path>
                        <path d="m 528.715,2806.1 c 37.398,-3.35 162.394,-22.63 193.973,-34.36 53.906,-20.01 109.539,-209.96 158.296,-301.8 58.032,69.01 221.266,211.92 221.266,211.92 l 38.2,-40.27 c 0,0 -208.38,-365.6 -274.161,-357.09 -65.781,8.51 -184.918,208.44 -229.805,265.78" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path144"></path>
                        <path d="m 425.414,2933.54 c -8.809,-47.72 -15.836,-95.78 -21.051,-144.03 -1.496,-14.09 34.09,-25.88 44.004,-29.63 37.742,-14.26 87.082,-12.11 111.336,25.12 9.727,14.93 0.57,31.9 -3.375,48.39 -5.566,23.3 -10.976,46.64 -16.601,69.93" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path146"></path>
                        <path d="m 582.031,3068.32 c 19.762,-6.66 33.559,-25.35 39.782,-45.26 6.218,-19.9 6.042,-41.16 5.808,-62.02 -0.058,-5.46 -0.141,-11.03 -1.918,-16.19 -2.738,-7.94 -16.683,-28.98 -24.89,-30.71 -8.215,-1.74 -10.375,16.07 -15.504,22.7 -2.844,3.67 -4.426,8.14 -5.957,12.52 -5.387,15.38 -10.774,30.76 -16.161,46.14" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path148"></path>
                        <path d="m 607.34,2932.04 c -3.047,28.24 0.797,56.87 -4.426,85.03 -6.316,34.08 -24.75,61.46 -58.617,72.14 -36.238,11.44 -78.891,4.29 -110.18,-16.98 -50.594,-34.39 -56.445,-108.55 -24.664,-160.83 31.781,-52.27 52.832,-71.39 69.641,-77.93 30.043,-11.69 106.14,-2.72 118.152,14.25 11.074,15.65 11.723,69.22 10.094,84.32" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path150"></path>
                        <path d="m 361.5,3002.41 c 3.41,14.62 9.867,27.75 10.629,42.89 -4.348,42.39 24.891,66.96 33.406,72.41 31.051,19.9 70.551,21.41 107.063,16.19 20.234,-2.89 39.879,-9.13 58.632,-17.15 30.032,-12.85 58.606,-49.55 25.442,-77.6 -5.438,-4.6 -12.461,-6.79 -19.363,-8.48 -32.637,-8.02 -65.532,-5.79 -98.7,-8 -8.027,-0.54 -23.437,-1.62 -29.796,-7.06 -7.997,-6.85 -5.575,-26.05 -3.965,-34.96 2.261,-12.5 7.07,-24.4 11.57,-36.22 1.375,-3.62 6.148,-13.46 -0.789,-14.37 -2.984,-0.38 -15.801,14.79 -18.852,19.73 -2.422,3.92 -6.187,6.51 -10.66,7.64 -1.625,-13.73 4.215,-25.74 3.254,-39.19 -0.758,-10.49 -0.637,-21.16 -1.992,-31.6 -17.027,2.21 -19.641,3 -30.16,8.62 -10.524,5.63 -28.071,22.13 -31.164,33.65 -6.68,24.86 -10.559,47.79 -4.555,73.5" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path152"></path>
                        <path d="m 582.387,2985.42 c -4.422,4.71 -9.907,4.96 -12.657,-6.49 -1.726,-7.21 -0.335,-20.55 9.395,-20.61 14.879,-0.09 10.48,19.43 3.262,27.1" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path154"></path>
                        <path d="m 584.398,2979.4 c -1.96,2.08 -4.394,2.2 -5.613,-2.88 -0.765,-3.2 -0.152,-9.11 4.164,-9.14 6.598,-0.04 4.649,8.62 1.449,12.02" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path156"></path>
                        <path d="m 493.395,2970.91 c -4.903,4.94 -11.032,5.15 -14.215,-7 -2.008,-7.65 -0.582,-21.76 10.3,-21.73 16.633,0.05 11.907,20.68 3.915,28.73" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path158"></path>
                        <path d="m 495.582,2964.56 c -2.18,2.19 -4.894,2.28 -6.305,-3.11 -0.886,-3.39 -0.257,-9.65 4.567,-9.63 7.379,0.02 5.277,9.16 1.738,12.74" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path160"></path>
                        <path d="m 459.516,2997.85 c 5.019,0.58 10.125,0.6 15.132,-0.08 2.457,-0.33 4.864,-0.87 7.266,-1.46 2.133,-0.52 5.547,-2.26 7.578,-0.97 l 0.914,2.24 c -0.941,2.58 -4.488,3.03 -6.883,3.57 -2.718,0.63 -5.515,0.99 -8.296,1.21 -5.422,0.44 -10.856,0.11 -16.207,-0.83 -2.051,-0.36 -1.602,-3.92 0.496,-3.68" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path162"></path>
                        <path d="m 586.43,3028.9 c -4.953,1.94 -10.434,0.44 -14.535,-2.69 -2.188,-1.68 -4.102,-3.67 -5.719,-5.9 -0.742,-1.03 -1.395,-2.2 -1.946,-3.35 l -0.476,-2.06 -0.508,-1.98 c -0.453,-1.77 1.688,-2.95 3,-1.74 l 1.258,1.15 1.285,0.9 2.035,2.61 c 1.516,1.89 2.446,3.38 4.289,5.08 1.266,1.17 2.992,2.26 4.692,3 1.574,0.69 3.679,1.18 5.504,0.92 2.675,-0.38 3.679,3.06 1.121,4.06" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path164"></path>
                        <path d="m 527.465,2892.82 -0.207,1.2 c 15.75,3.25 31.504,6.49 47.254,9.73 l 1.328,-0.22 0.14,-0.87 c -0.222,-3.1 -0.453,-6.2 -0.683,-9.3 -0.258,-3.53 -0.547,-7.17 -2.098,-10.36 -1.379,-2.82 -3.672,-5.11 -6.242,-6.93 -7.113,-5.01 -16.59,-6.48 -24.922,-3.93 -3.472,1.07 -6.816,2.85 -9.187,5.6 -2.375,2.76 -6.407,12.74 -5.59,16.28" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path166"></path>
                        <path d="m 554.543,2950.77 c 3.16,-3.99 6.082,-8.18 8.719,-12.53 2.519,-4.37 5.437,-9.19 4.277,-15.86 -0.449,-1.66 -1.543,-3.32 -3.023,-4.39 -1.426,-0.98 -3.231,-1.49 -4.36,-1.7 -2.551,-0.48 -5.105,-0.92 -7.691,-1.07 -5.152,-0.42 -10.352,-0.01 -15.336,1.19 5.074,0.74 9.965,1.64 14.773,2.67 2.395,0.59 4.793,1.09 7.125,1.81 2.438,0.63 3.278,1.25 3.703,2.81 0.817,3.4 -1.046,8.42 -2.957,12.83 -2.007,4.57 -3.75,9.3 -5.23,14.24" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path168"></path>
                        <path d="m 436.777,2949.79 c -3.203,2.93 -6.484,5.93 -10.461,7.69 -3.972,1.77 -8.839,2.12 -12.539,-0.18 -2.996,-1.86 -4.797,-5.14 -6.136,-8.41 -3.993,-9.77 -4.95,-20.99 -1.403,-30.93 3.551,-9.94 11.926,-18.33 22.215,-20.7 10.285,-2.38 22.098,2 27.406,11.12" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path170"></path>
                        <path d="m 409.633,2833.52 c 30.051,-25.09 82.187,-62.19 119.777,-73.13 -20.394,-9.34 -35.555,-42.52 -36.406,-61.99 -36.207,21.33 -74.344,59.83 -96.395,95.59" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path172"></path>
                        <path d="m 558.688,2824.92 c -2.493,-20.65 -15.434,-49 -29.278,-64.53 26.625,-0.68 41.02,-37.87 38.078,-41.83 0,0 13.293,46.23 4.875,88.5" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path174"></path>
                        <path d="m 536.582,2738.15 c 8.379,-140.98 17.441,-281.92 24.07,-422.99 3.188,-67.72 5.743,-135.48 6.621,-203.27 0.657,-50.23 8.618,-119.27 -20.449,-163.06 -1.047,-1.58 1.399,-2.88 2.496,-1.46 28.274,36.86 23.035,98.41 22.672,142.07 -0.582,69.6 -3.199,139.18 -6.484,208.7 -6.938,146.81 -17.965,293.38 -27.832,440.01 h -1.094" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path176"></path>
                        <path d="m 528.715,2565.06 c 6.976,0 6.988,10.84 0,10.84 -6.977,0 -6.985,-10.84 0,-10.84" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path178"></path>
                        <path d="m 535.172,2428.72 c 6.976,0 6.984,10.84 0,10.84 -6.981,0 -6.988,-10.84 0,-10.84" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path180"></path>
                        <path d="m 541.621,2292.37 c 6.977,0 6.988,10.85 0,10.85 -6.976,0 -6.988,-10.85 0,-10.85" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path182"></path>
                        <path d="m 548.07,2156.04 c 6.981,0 6.993,10.83 0,10.83 -6.972,0 -6.984,-10.83 0,-10.83" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path184"></path>
                        <path d="m 548.07,2019.69 c 6.981,0 6.993,10.85 0,10.85 -6.972,0 -6.984,-10.85 0,-10.85" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path186"></path>
                        <path d="m 522.266,2701.4 c 6.976,0 6.988,10.84 0,10.84 -6.977,0 -6.989,-10.84 0,-10.84" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path188"></path>
                        <path d="m 347.34,2570.76 c -2.274,-12.87 -7.61,-25.36 -12.594,-37.37 -7.676,-18.5 -16.266,-36.64 -25.051,-54.63 -20.707,-42.4 -42.961,-84.05 -65.507,-125.5 -17.516,-32.22 -35.204,-64.34 -52.825,-96.5 -2.129,-3.88 -4.258,-7.76 -6.297,-11.68 -0.867,-1.68 -2.234,-3.68 -2.582,-5.57 -0.589,-3.17 0.918,-7.44 1.481,-10.54 1.527,-8.42 3.18,-16.84 4.851,-25.25 5.508,-27.68 11.61,-55.23 17.981,-82.72 7.926,-34.16 15.906,-68.45 26.234,-101.97 2.512,-8.15 5.051,-16.3 7.824,-24.37 0.649,-1.89 3.5,-1.13 3.012,0.83 -15.855,63.9 -32.359,127.56 -46.035,191.99 -3.492,16.47 -7.195,32.92 -10.062,49.5 l -0.247,1.51 -0.074,-0.18 c 0.27,0.83 0.039,0.24 0.664,1.53 1.559,3.24 3.239,6.41 4.918,9.57 15.93,30.07 32.707,59.69 48.907,89.61 22.414,41.41 44.378,83.1 65.078,125.4 9.144,18.7 18.101,37.51 26.16,56.7 5.707,13.59 11.371,27.42 14.789,41.8 0.57,2.41 1.062,4.83 1.406,7.28 0.184,1.31 -1.793,1.91 -2.031,0.56" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path190"></path>
                        <path d="m 437.094,2880.48 c 12.422,-18.69 27.601,-36.84 48.789,-45.7 10.355,-4.34 21.496,-6.4 32.668,-7 11.715,-0.63 25.328,-0.95 36.488,3.12 1.785,0.66 1.477,3.15 -0.449,3.3 -11.121,0.86 -22.399,-1.39 -33.59,-0.99 -11.258,0.41 -22.594,2.17 -33.113,6.32 -20.93,8.25 -34.582,26.03 -48.949,42.37 -0.875,1 -2.575,-0.3 -1.844,-1.42" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path192"></path>
                        <path d="m 1163.57,2741.26 c 5.05,1.27 10.22,2.39 15.36,3.22 5.07,0.83 10.94,2.13 16.07,1.78 l 4.46,-1.14 -2.01,-1.75 c -2.1,-1.45 -4.41,-2.61 -6.69,-3.76 -4.01,-2.02 -8.88,-3.54 -12.47,-6.28 -2.14,-1.63 -2.86,-4.49 -3.08,-7.05 -0.42,-5.06 0.37,-10.25 0.13,-15.34 -0.54,-11.21 -3.31,-22.32 -12.08,-29.94 -1.92,-1.67 0.63,-5.04 2.74,-3.56 8.4,5.91 12.39,15.53 13.71,25.48 0.81,6.04 0.38,12.23 -0.24,18.28 -0.37,3.71 -1.35,8.09 2.37,10.18 5.2,2.94 10.76,5.22 15.8,8.45 2.91,1.86 7.8,6.07 2.09,7.95 -5.53,1.82 -11.47,0.3 -17.04,-0.52 -6.77,-1 -13.08,-2.73 -19.33,-5.5 l 0.21,-0.5" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path194"></path>
                        <path d="m 4166.23,629.648 -13.17,704.592 h 46.87 l -13.18,-704.592 c -0.16,-7.148 -4.75,-12.937 -10.26,-12.937 -5.51,0 -10.1,5.789 -10.26,12.937" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path196"></path>
                        <path d="m 4550.21,657.09 -272.23,650.01 43.56,17.29 247.73,-659.73 c 2.49,-6.699 0.36,-13.781 -4.76,-15.808 -5.13,-2.032 -11.53,1.66 -14.3,8.238" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path198"></path>
                        <path d="m 3802.77,657.09 272.23,650.01 -43.56,17.29 -247.73,-659.73 c -2.49,-6.699 -0.36,-13.781 4.76,-15.808 5.12,-2.032 11.53,1.66 14.3,8.238" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path200"></path>
                        <path d="m 3994.04,1530.23 c -14.71,197.23 0.38,398.57 57.42,588.75 46.77,155.94 211.19,194.9 347.35,113.83 131.11,-78.05 204.9,-231.16 246.76,-370.42 40.29,-134.05 66.53,-288.32 27.78,-425.78 -42.09,-149.32 -185.25,-203.6 -326.49,-217.84 -186.03,-18.75 -377.93,-12.3 -559.84,33.32 -56.56,14.19 -117.1,62.26 -49.95,112.39 55.52,41.46 144.08,57.04 212.37,58.14" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path202"></path>
                        <path d="m 3856.62,671.789 c -8,-16.168 -24.45,-24.82 -39.36,-33.418 -14.91,-8.609 -30.72,-20.262 -34.59,-37.949 15.45,-8.281 33.7,-9.57 51.22,-6.992 17.51,2.57 34.54,8.781 51.43,14.961 6.98,2.558 14.31,5.347 19.36,11.308 6.18,7.293 7.6,17.75 7.97,27.442 0.75,19.441 -8.44,35.257 -8.44,35.257" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path204"></path>
                        <path d="m 4473.13,1540.55 c 9.06,-29.51 16.25,-59.57 21.56,-89.96 10.44,-59.93 -8.99,-122.31 -62.07,-156.64 -29.13,-18.84 -63.34,-28.15 -97.34,-35.06 -62.08,-12.62 -124.34,12.66 -186.85,14.4 -68.46,1.91 -136.54,2.9 -204.85,9.17 -31.59,2.9 -63.36,8.38 -94.94,9.9 -25.92,1.26 -51.43,7.17 -70.85,26.24 -32.47,31.9 -34.21,88 -33.37,130.56 0.1,4.8 0.71,9.8 3.44,13.74 2.86,4.12 9.55,17.19 14.1,19.3 109.49,50.77 226.68,69.84 347.16,76.67" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path206"></path>
                        <path d="m 3923.73,1262.66 c -4.42,48.05 -10.96,97.05 -31.44,139.74 -20.47,42.71 -57.51,78.54 -101.13,82.99 -14.6,1.49 -30.12,-0.82 -42.02,-10.25 -11.06,-8.77 -17.81,-22.63 -23.22,-36.43 -47.82,-122.06 -16.89,-262.26 14.66,-390.6 29.4,-119.622 85.54,-257.239 114.95,-376.86 l 48.68,11.148 c 26.08,191.922 37.28,387.192 19.52,580.262" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path208"></path>
                        <path d="m 4516.36,1762.07 c -10.18,-49.98 -20.35,-99.96 -30.52,-149.94 -3.71,-18.2 -7.41,-37.05 -3.44,-55.2 0.82,-3.72 1.92,-7.78 0.21,-11.19 -1.28,-2.56 -3.88,-4.15 -6.41,-5.48 -19.35,-10.14 -41.71,-12.55 -63.48,-14.51 -112.31,-10.08 -225.3,-12.67 -337.96,-7.77 -26.63,1.16 -54.29,3.04 -77.58,15.99 -6.64,3.7 -13.36,12.52 -7.95,17.86 2.25,2.22 5.73,2.54 8.51,4.06 6.93,3.77 7.57,13.29 7.34,21.17 -1.76,59.65 -3.52,119.45 -11.95,178.54 -8.63,60.51 -24.23,120.29 -25.93,181.39 -0.73,25.91 1.06,51.93 -1.69,77.7 -2.72,25.35 -9.78,50 -16.82,74.51 -1.39,4.82 -2.77,9.65 -4.16,14.48" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path210"></path>
                        <path d="m 4073.5,646.719 c -7.99,-16.168 -24.46,-24.821 -39.36,-33.418 -14.9,-8.61 -30.72,-20.262 -34.59,-37.949 15.45,-8.282 33.7,-9.563 51.21,-6.993 17.52,2.571 34.55,8.789 51.45,14.961 6.98,2.559 14.3,5.352 19.35,11.309 6.18,7.293 7.6,17.75 7.97,27.441 0.75,19.442 -1.48,38.871 -6.6,57.2" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path212"></path>
                        <path d="m 4240.85,1218.89 c 3.74,47.98 5.54,97.19 -7.53,142.29 -13.07,45.1 -43.68,85.91 -86.1,96.8 -14.2,3.64 -29.95,3.67 -43.33,-3.84 -12.44,-6.98 -21.46,-19.62 -29.14,-32.4 -67.96,-113.06 -60.99,-255.73 -51.43,-386.81 8.92,-122.16 41.27,-266.039 50.18,-388.211 l 55.38,-0.129 c 58.22,185.09 96.98,379.54 111.97,572.3" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path214"></path>
                        <path d="m 4203.52,1662.97 c -63.09,0.71 -187.2,-1.16 -250.13,2.24 -109.24,5.91 -86.29,118.75 -89.02,204.33 -2.15,67.07 1.67,134.24 7.7,201.02 3.11,34.38 6.86,68.71 10.95,102.99 3.68,30.89 5.98,65.58 24.71,91.76 23.17,32.39 64.14,46.55 101.39,54.87 46.76,10.44 93.13,22.55 139.86,33.16 l 176.78,-2.06 c 67.92,-21.76 124.97,-45.16 192.89,-66.92 17.71,-5.68 35.98,-11.67 49.82,-24.11 49.82,-44.77 40.55,-126.31 37.12,-186.09 -1.76,-30.62 -8.17,-60.77 -14.55,-90.78 -18.06,-84.84 -38.09,-165.91 -78.36,-243.53 -8.07,-15.55 -16.93,-31.12 -29.97,-42.82 -19.84,-17.78 -47.46,-24.74 -74.1,-24.89" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path216"></path>
                        <path d="m 4302.06,2498.33 c 9.19,-49.81 16.52,-99.99 21.96,-150.36 -23.4,-17.35 -53.84,-23.3 -82.9,-21.1 -29.04,2.21 -77.03,10.22 -85.49,27.76 4.76,16.78 18.06,74.76 27.09,112.15" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path218"></path>
                        <path d="m 4091.7,2612.95 c -9.11,-6.13 -22.72,-12.86 -26.3,-23.93 -1.86,-5.72 -1.8,-11.86 -1.54,-17.87 1.51,-35.12 9.48,-69.96 23.38,-102.25 2.26,-5.26 4.95,-10.75 9.84,-13.69 6.48,-3.9 14.74,-2.19 22.08,-0.37 6.06,1.52 12.13,3.02 18.18,4.53 4.35,1.09 9.1,2.45 11.53,6.2" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path220"></path>
                        <path d="m 4103.72,2468.74 c -4.71,29.29 -16.45,57.06 -18.94,86.84 -3.02,36.07 8,68.71 39.17,88.79 33.34,21.5 78.27,26.03 115.63,13.21 60.41,-20.71 86.79,-93.88 69.16,-155.28 -11.01,-38.36 -36.54,-72.2 -58.66,-88.1 -18.31,-13.16 -54.84,-13.52 -78.74,-12.07 -19.47,1.17 -34.42,1.17 -46.66,16.36 -9.94,12.34 -18.45,34.6 -20.96,50.25" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path222"></path>
                        <path d="m 4295.39,2517.28 c -1.47,-18.2 3.26,-38 6.06,-56 0.23,-1.54 0.54,-3.21 1.68,-4.29 1.7,-1.61 4.42,-1.22 6.71,-0.71 7.55,1.65 15.1,3.3 22.65,4.95 2.54,0.56 5.16,1.14 7.3,2.62 4.11,2.83 5.55,8.34 5.28,13.32 -0.28,4.99 -1.95,9.78 -2.73,14.72 -2.35,15.08 3.74,29.99 7.89,44.68 10.06,35.52 8.92,74.12 -3.21,108.98 -2.3,6.63 -5.35,13.55 -11.32,17.23 -2.34,1.44 -5.05,2.32 -7.13,4.13 -2.57,2.25 -3.83,5.6 -5.09,8.78 -8.29,20.8 -22.58,40.98 -43.83,48.04 -13.17,4.37 -27.5,3.2 -41.21,1.08 -37.68,-5.84 -74.25,-18.53 -112.26,-21.55 -21.09,-1.68 -45.65,1.39 -57.33,19.03 -5.86,-10 -7.12,-22.58 -3.37,-33.55 -5.29,2.86 -10.6,5.72 -15.9,8.58 0.45,-9.32 2.86,-18.54 7.04,-26.88 -3.05,2.66 -7,4.27 -11.03,4.5 -3.16,0.18 -2.34,-55.33 -1.15,-59.84 9.64,-36.31 66.8,-28.52 93.15,-21.91 6.34,1.6 12.79,3.42 19.3,2.8 6.94,-0.65 13.29,-4 19.79,-6.5 12.05,-4.63 25.18,-6.35 38.02,-5.14 7.02,0.66 13.38,2.76 20.16,4.37 3.03,0.71 11.44,4.05 14,2.86 3.32,-1.54 4.18,-20.23 5.1,-24.28 1.08,-4.78 0.93,-13.34 6.36,-15.54 2.97,-1.19 6.28,0.24 9.14,1.64 2.26,1.11 4.56,2.24 6.27,4.08 1.53,1.64 2.5,3.76 4.17,5.24 1.68,1.48 4.56,2.07 6.02,0.36 l 0.96,-2.06 c 3.78,-12.4 6.32,-25.19 7.54,-38.1" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path224"></path>
                        <path d="m 4269.42,2546.15 c 2.42,3.85 4.9,7.76 8.42,10.63 3.52,2.88 8.31,4.57 12.67,3.28 3.53,-1.05 6.25,-3.86 8.49,-6.79 6.72,-8.73 10.78,-19.77 9.94,-30.77 -0.84,-10.98 -6.98,-21.73 -16.67,-26.95 -9.71,-5.22 -22.82,-4.07 -30.67,3.66" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path226"></path>
                        <path d="m 4449.89,2165.14 c -22.73,-111.29 -45.48,-222.58 -68.22,-333.87 l -41.46,54.17 109.68,279.7" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path228"></path>
                        <path d="m 4030.7,1856.76 c 15.81,11.45 202.57,68.74 230.66,75.98 -30.79,-7.14 -49.31,-7.42 -80.49,-12.59 -36.19,-6.01 -86.06,-19.56 -118.35,-34.04 -0.09,79.96 -9.56,276.68 -19.05,292.09 -0.08,-37.69 2.84,-131.36 1.88,-158.44 -1.92,-54.55 -6.57,-109.01 -14.65,-163" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path230"></path>
                        <path d="m 4245.18,2325.72 c 2.74,-51.87 5.96,-107.08 -0.24,-158.72 -0.42,-3.45 -5.19,-3.57 -5.46,0 -3.88,52.14 -0.16,106.44 1.1,158.72 0.06,2.98 4.44,2.95 4.6,0" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path232"></path>
                        <path d="m 4325.76,2351.28 c -15.4,-26.7 -50.23,-27.88 -77.65,-28.58 -34,-0.86 -67.97,1.33 -92.88,27.06 -4.19,4.32 2.41,10.94 6.63,6.61 22.07,-22.69 52.11,-25.09 82.05,-24.77 29.31,0.32 55.61,1.79 78.61,22.19 1.71,1.51 4.46,-0.4 3.24,-2.51" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path234"></path>
                        <path d="m 4225.44,2287.07 c -0.19,-1.95 -0.43,-3.5 -2.03,-4.77 -1.79,-1.41 -3.66,-1.42 -5.46,0 -1.63,1.29 -1.85,2.83 -2.03,4.77 -0.57,6.12 10.1,6.13 9.52,0" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path236"></path>
                        <path d="m 4224.23,2240.27 0.12,-2.03 c 0.27,-4.72 -7.61,-4.72 -7.34,0 l 0.12,2.03 c 0.26,4.56 6.83,4.57 7.1,0" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path238"></path>
                        <path d="m 4227.37,2192.73 c 1.16,-5.2 -5.97,-8.61 -8.83,-3.73 -3.63,6.21 7.33,10.56 8.83,3.73" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path240"></path>
                        <path d="m 4116.04,2537.81 c 3.03,5.73 8.28,7.42 13.97,-2.94 3.57,-6.52 5.76,-19.8 -3.64,-22.43 -14.38,-4.02 -15.29,16.04 -10.33,25.37" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path242"></path>
                        <path d="m 4115.68,2531.45 c 1.35,2.54 3.68,3.29 6.2,-1.3 1.59,-2.89 2.55,-8.78 -1.62,-9.95 -6.37,-1.78 -6.77,7.11 -4.58,11.25" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path244"></path>
                        <path d="m 4208.87,2540.5 c 3.43,6.08 9.31,7.9 15.61,-3.01 3.97,-6.88 6.32,-20.92 -4.23,-23.77 -16.11,-4.35 -16.99,16.87 -11.38,26.78" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path246"></path>
                        <path d="m 4208.44,2533.77 c 1.52,2.69 4.13,3.51 6.92,-1.34 1.76,-3.05 2.8,-9.27 -1.87,-10.54 -7.15,-1.92 -7.54,7.48 -5.05,11.88" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path248"></path>
                        <path d="m 4231.07,2571.63 c -5.06,-0.77 -10.05,-2.12 -14.77,-4.14 -2.31,-0.99 -4.52,-2.16 -6.72,-3.39 -1.1,-0.62 -2.16,-1.32 -3.26,-1.95 -1.38,-0.78 -2.54,-1.4 -4.08,-0.68 l -0.99,1.72 c -0.17,2.65 4.01,4.37 5.98,5.41 2.42,1.28 4.98,2.34 7.56,3.27 5.08,1.83 10.4,2.94 15.79,3.44 2.08,0.19 2.58,-3.36 0.49,-3.68" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path250"></path>
                        <path d="m 4102.35,2570.25 c 4.2,3.11 9.85,3.21 14.57,1.31 2.62,-1.05 5.04,-2.47 7.24,-4.25 0.97,-0.77 1.86,-1.69 2.69,-2.61 0.96,-1.05 1.45,-2.54 2.16,-3.8 0.91,-1.6 -0.88,-3.27 -2.46,-2.45 l -1.44,0.74 -1.57,0.55 c -0.92,0.53 -1.77,1.37 -2.63,2 -1.87,1.36 -3.58,2.81 -5.66,3.87 -3.04,1.56 -7.44,2.44 -10.77,1.01 -2.49,-1.08 -4.32,2 -2.13,3.63" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path252"></path>
                        <path d="m 4193.7,2462.71 -0.12,1.22 c -16.1,-1.03 -32.21,-2.06 -48.32,-3.09 l -1.22,-0.57 0.09,-0.88 c 1.05,-2.93 2.08,-5.87 3.13,-8.81 1.18,-3.35 2.42,-6.8 4.77,-9.48 2.07,-2.37 4.9,-3.98 7.87,-5.06 8.22,-2.96 17.78,-1.87 25.16,2.8 3.08,1.95 5.85,4.55 7.42,7.85 1.56,3.29 2.83,14.01 1.1,17.24" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path254"></path>
                        <path d="m 4152.16,2511.64 c -2,-4.7 -3.72,-9.54 -5.12,-14.44 -1.28,-4.9 -2.83,-10.33 0.05,-16.48 0.88,-1.48 2.37,-2.8 4.08,-3.43 1.65,-0.59 3.53,-0.6 4.68,-0.5 2.59,0.2 5.19,0.46 7.72,0.99 5.1,0.96 10.02,2.73 14.54,5.21 -5.11,-0.64 -10.08,-1.07 -15.01,-1.34 -2.47,-0.06 -4.93,-0.21 -7.38,-0.14 -2.53,-0.03 -3.5,0.36 -4.33,1.75 -1.69,3.09 -1.22,8.43 -0.54,13.21 0.74,4.96 1.17,9.99 1.31,15.17" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path256"></path>
                        <path d="m 4281.09,2299 c -4.7,5.55 -8.52,11.85 -11.28,18.58 -1.18,2.89 -2.23,5.97 -4.51,8.1 -3.65,3.43 -9.23,3.42 -14.23,3.23 -24.11,-0.91 -43.54,-0.44 -65.6,9.33 -1.02,0.45 -6.77,5.61 -10.57,1.97 -1.2,-1.15 -1.74,-5.56 -1.22,-7.14 2.02,-6.22 14.55,-33.53 20.56,-36.14 3.55,-1.55 6.98,1.36 8.69,4.84 -0.63,-4.16 7.62,-16.47 14.87,-18.38 3.07,-0.81 8.04,0.59 11.1,1.44 l 1.62,0.26 c 1.08,-0.2 1.61,-1.4 2,-2.42 3.25,-8.58 9.68,-15.9 17.75,-20.25" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path258"></path>
                        <path d="m 4471.7,1871.89 c 4.57,8.21 -17.97,97.4 -30.53,141.26 -17.02,59.44 -159.42,292.47 -159.42,292.47 l -59.09,-34.04 c 0,0 -2.58,-213.5 35.76,-388.46 23.46,-107.06 55.44,-199.68 132.61,-220.15 58.09,-15.41 114.21,44.5 114.21,44.5 l 6.2,30.42" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path260"></path>
                        <path d="m 4278.69,2286.47 c -5.86,26.91 -14.82,52.95 -26.63,77.37 -2.1,4.35 -4.32,8.68 -7.18,12.5 -6.77,9.01 -16.69,14.54 -26.32,19.82 -2.96,1.63 -6.02,3.28 -9.35,3.72 -3.1,0.4 -6.24,-0.27 -9.32,-0.94 -10.85,-2.38 -31.63,-9.76 -30.92,-12.24 1.58,-5.44 5.05,-5.08 7.14,-5.18 8.81,-0.41 16.12,1.4 24.92,0.99 -4.43,-1.03 -9.22,-2.28 -12.11,-6.06 -2.89,-3.8 -2.05,-10.87 2.36,-11.73 -3.35,1.61 -7.72,0.44 -10.07,-2.69 -2.35,-3.13 -2.48,-7.94 -0.28,-11.08 1.05,-1.51 2.67,-3.06 2.2,-4.91 -0.37,-1.4 -1.76,-2.13 -2.85,-3 -4.68,-3.78 -3.6,-10.29 -0.99,-14.88 3.16,-5.55 6.33,-11.11 9.49,-16.67 1.11,-1.97 2.04,-5.12 4.21,-5.12 7.05,0 2.1,13.38 2.1,13.38 0,0 10.08,-13.85 15.12,-20.78 3.53,-4.84 7.54,-12.36 14.76,-10.13 1.82,0.55 3.52,2.21 5.32,1.72 1.25,-0.34 2.04,-1.6 2.71,-2.78 4.14,-7.21 8.28,-14.43 12.42,-21.65" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path262"></path>
                        <path d="m 4245.39,2375.17 c -7.59,7.84 -16.48,14.53 -26.45,19.02 -4.89,2.19 -9.98,4.12 -15.4,4.05 -2.86,-0.03 -5.69,-0.45 -8.45,-1.13 -2.37,-0.59 -4.9,-1.75 -7.37,-1.63 l -0.66,1.6 c 3.23,3.6 10.55,4.2 15.08,4.42 5.79,0.29 10.98,-1.41 16.24,-3.66 11.05,-4.73 20.83,-11.92 28.55,-21.13 0.89,-1.07 -0.55,-2.58 -1.54,-1.54" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path264"></path>
                        <path d="m 4224.13,2369.03 c -3.29,2.41 -6.76,4.56 -10.38,6.42 -1.77,0.91 -3.55,1.75 -5.38,2.5 -0.97,0.4 -1.93,0.77 -2.91,1.13 -0.98,0.35 -1.86,0.55 -2.5,1.4 l 0.65,1.6 c 1.02,0.27 1.95,-0.23 2.88,-0.6 0.91,-0.35 1.81,-0.71 2.71,-1.09 1.91,-0.82 3.8,-1.72 5.64,-2.68 3.67,-1.94 7.16,-4.17 10.47,-6.66 1.19,-0.88 0.05,-2.91 -1.18,-2.02" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path266"></path>
                        <path d="m 4198.99,2334.93 c -1.14,0.84 -2.32,1.62 -3.55,2.33 -1.27,0.73 -2.61,1.31 -3.89,2.01 -1.24,0.67 -2.54,1.2 -3.81,1.81 l -1.7,0.79 -1.13,0.44 -0.96,0.71 0.47,1.81 2.29,-0.05 2.24,-0.53 c 1.49,-0.41 2.93,-1.1 4.32,-1.78 2.69,-1.32 5.12,-3.49 7.24,-5.58 0.97,-0.96 -0.34,-2.82 -1.52,-1.96" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path268"></path>
                        <path d="m 4207.67,2353.82 c -2.71,2.29 -5.7,4.01 -8.86,5.57 -3.1,1.54 -6.55,2.32 -9.42,4.3 -0.87,0.62 -0.91,2.25 0.33,2.5 3.99,0.81 7.8,-0.93 11.25,-2.8 3.35,-1.83 6.38,-4.5 8.95,-7.31 1.42,-1.53 -0.69,-3.58 -2.25,-2.26" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path270"></path>
                        <path d="m 4193.19,2320.12 0.03,-0.02 -0.17,0.13 -0.87,0.84 -0.6,0.92 -1.12,1.9 -1.08,1.91 c -0.42,0.85 -0.89,1.71 -0.77,2.7 l 0.64,1.25 1.38,0.29 0.75,-0.27 0.68,-0.56 0.98,-1.2 1.16,-1.95 1.08,-2.36 0.38,-1.08 0.06,-1.46 -0.91,-1.35 -1.62,0.31" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path272"></path>
                        <path d="m 4488.66,1878.58 c -25.52,134.06 -165.63,347.47 -208.41,418.32 -4.34,0.57 -37.94,-10.02 -50.05,-30.17 11.61,-154.22 51.02,-463.19 133.79,-551.03 16.07,-17.04 37.53,-31.8 60.98,-32.78 28.68,-1.19 72.15,31.1 87.71,56.93" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path274"></path>
                        <path d="m 4324.99,1288.59 c 44.8,7.88 91.36,19.01 125.25,49.34 15.53,13.9 27.59,31.17 39.51,48.27 1.95,2.8 3.9,5.61 5.86,8.42 -5.91,-40.21 -26.5,-77.07 -62.99,-100.67 -29.13,-18.84 -63.34,-28.15 -97.34,-35.06 -30.52,-6.2 -61.08,-3.24 -91.71,1.58 0.01,30.78 1.51,89.52 -14.41,113.27 30.98,-7.25 25.51,-77.7 56.2,-86.05 12.86,-3.51 26.51,-1.41 39.63,0.9" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path276"></path>
                        <path d="m 3879.46,1207.91 c -17.56,57.94 -44,114.12 -48.6,174.48 -0.23,3.06 -0.34,6.36 1.35,8.91 1.88,2.85 5.35,4.49 8.75,4.86 101.51,10.96 183.61,16.34 279.88,71.31 l 35.93,10.16 c -51,-22.16 -90.31,-47.18 -113.8,-97.57 -12.27,-26.31 -16.22,-64.12 -18.03,-102.96 -24.41,1.17 -56.91,3.11 -81.36,5.36 -7.36,0.67 -14.74,1.5 -22.12,2.38 0.83,-7.4 1.59,-14.8 2.27,-22.18 17.76,-193.07 6.56,-388.34 -19.52,-580.262 l -14.61,-3.339 c 3.18,96.613 23.97,222.332 17.36,315.183 -5.47,76.758 -5.18,140.008 -27.5,213.668" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path278"></path>
                        <path d="m 4298.17,1845.71 c -88.79,-58.78 -186.1,-125.26 -287.93,-156.44 h 59.2 c 38.91,7.41 180.15,113.83 208.54,135.24 28.4,21.42 20.19,21.2 20.19,21.2" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path280"></path>
                        <path d="m 4459.89,1979.37 c 15.28,-2.58 30.25,-6.99 44.49,-13.07 3.91,-1.68 7.83,-3.52 11.06,-6.28 12,-10.27 21.76,-23.58 27.29,-38.42 3.19,-8.5 4.36,-17.96 1.93,-26.71 -0.89,-3.19 -3.24,-6.85 -6.52,-6.29 -0.34,-3.5 0.17,-7.03 0.25,-10.55 0.07,-3.52 -0.35,-7.22 -2.32,-10.14 -1.97,-2.92 -5.83,-4.79 -9.13,-3.54 -0.03,-3.84 -0.35,-7.76 -1.85,-11.29 -1.51,-3.54 -4.35,-6.67 -8.05,-7.7 -2.92,-0.81 -4.04,2.47 -4.35,4.74 -0.47,3.33 -0.94,6.65 -1.41,9.98 1.23,-11.3 -3.13,-23.07 -11.4,-30.85 l -2.25,-1.22 c -1.77,-0.04 -2.6,2.15 -2.82,3.9 -2.25,17.8 -1.41,36.39 -8.7,53.69 -7.59,17.99 -13.66,42.04 -15.26,61.8" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path282"></path>
                        <path d="m 4497.92,1911.76 c 5.7,-7.29 10.21,-15.3 13.11,-24.11 1.43,-4.39 2.64,-8.91 3.27,-13.49 0.3,-2.24 0.66,-4.55 0.69,-6.81 0.03,-2.45 -0.31,-4.98 -0.42,-7.44 -0.07,-1.57 -2.29,-1.54 -2.41,0 -0.36,4.46 -1.36,8.97 -2.24,13.36 -0.87,4.3 -1.79,8.57 -3.09,12.77 -2.66,8.46 -6.2,16.68 -10.69,24.35 -0.62,1.07 0.97,2.41 1.78,1.37" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path284"></path>
                        <path d="m 4507.42,1926.42 c 7.6,-8.56 13.51,-18.73 16.97,-29.66 1.31,-4.12 2.24,-8.4 3.04,-12.64 0.75,-3.91 1.82,-8.77 0.61,-12.67 -0.48,-1.53 -2.83,-1.66 -3.24,0 -0.92,3.71 -1.31,7.62 -2.03,11.38 -0.78,4.09 -1.72,8.18 -2.9,12.17 -3.12,10.58 -7.84,20.45 -14.81,29.04 -1.34,1.65 0.91,4.02 2.36,2.38" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path286"></path>
                        <path d="m 4517.52,1948.01 c 7.6,-8.57 13.51,-18.74 16.97,-29.66 1.31,-4.12 2.23,-8.4 3.04,-12.64 0.75,-3.91 1.82,-8.78 0.6,-12.67 -0.47,-1.54 -2.82,-1.66 -3.24,0 -0.92,3.71 -1.31,7.61 -2.02,11.38 -0.78,4.1 -1.72,8.17 -2.9,12.17 -3.12,10.58 -7.85,20.44 -14.81,29.04 -1.34,1.65 0.9,4.01 2.36,2.38" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path288"></path>
                        <path d="m 3703.87,1683.91 h 533.97 l -107.63,307.61 c -3.34,9.58 -12.39,16 -22.53,16 h -492.24 c -12.12,0 -20.61,-11.96 -16.6,-23.4 l 105.03,-300.21" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path290"></path>
                        <path d="m 4163.79,1683.91 h 290.6 v 25.55 h -290.6 v -25.55" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path292"></path>
                        <path d="m 1287.71,629.648 13.18,704.592 h -46.87 l 13.18,-704.592 c 0.15,-7.148 4.74,-12.937 10.26,-12.937 5.51,0 10.1,5.789 10.25,12.937" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path294"></path>
                        <path d="m 903.746,657.09 272.214,650.01 -43.56,17.29 -247.72,-659.73 c -2.496,-6.699 -0.364,-13.781 4.758,-15.808 5.125,-2.032 11.531,1.66 14.308,8.238" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path296"></path>
                        <path d="m 1651.17,657.09 -272.22,650.01 43.56,17.29 247.72,-659.73 c 2.49,-6.699 0.37,-13.781 -4.75,-15.808 -5.12,-2.032 -11.53,1.66 -14.31,8.238" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path298"></path>
                        <path d="m 1459.9,1530.23 c 14.72,197.23 -0.38,398.57 -57.42,588.75 -46.77,155.94 -211.18,194.9 -347.34,113.83 -131.117,-78.05 -204.906,-231.16 -246.761,-370.42 -40.293,-134.05 -66.531,-288.32 -27.781,-425.78 42.093,-149.32 185.246,-203.6 326.482,-217.84 186.04,-18.75 377.94,-12.29 559.84,33.32 56.58,14.19 117.1,62.26 49.96,112.39 -55.52,41.46 -144.09,57.04 -212.38,58.14" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path300"></path>
                        <path d="m 2158.76,768.031 c 7.32,-15.461 1.65,-36.152 13.04,-48.902 8.6,-9.649 23.29,-10.34 36.19,-9.348 32.1,2.461 63.72,10.989 92.7,25.02 8.67,4.199 18.18,10.5 18.71,20.121 0.07,1.269 -0.05,2.629 -0.78,3.668 -1.01,1.469 -2.9,1.98 -4.63,2.379 -39.1,9.133 -78.2,18.261 -117.3,27.39" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path302"></path>
                        <path d="m 1625.97,1593.17 c 147.59,-54.99 256.32,-123.65 309.48,-219.54 72.45,-130.68 128.22,-248.98 170.65,-348.01 36.67,-85.569 65.58,-160.979 109.38,-243.132 -8.84,-12.699 -14.54,-21.398 -55.27,-18.199 -151.56,107.43 -319.13,283.551 -370.62,462.041 -6.58,22.82 -13.34,47.71 -32.31,62 -6.52,4.91 -14.08,8.2 -21.57,11.46 -153.34,66.58 -268.78,133.39 -422.12,199.98" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path304"></path>
                        <path d="m 2123.25,791.648 c -5.37,7.704 -11.1,15.172 -16.84,22.403 -68.55,86.32 -145.23,166.898 -202.19,261.259 -38.78,64.24 -80.27,174.93 -97.84,212.92 -16.95,36.63 -79.29,108.84 -134.62,152.45 -16.77,13.23 -37.16,31.85 -29.36,51.73 5.05,12.84 19.66,18.41 31.38,25.71 15.36,9.59 27.05,24.51 33.55,41.38 -25.59,11.8 -52.72,23 -81.36,33.67 l -312.38,-93.4 c 153.34,-66.59 268.78,-133.4 422.12,-199.98 7.49,-3.26 15.05,-6.55 21.57,-11.46 18.97,-14.29 25.73,-39.18 32.31,-62 47.33,-164.08 192.76,-326.119 333.66,-434.682" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path306"></path>
                        <path d="m 1785.57,680.398 c 7.89,-15.179 2.98,-36.039 14.84,-48.378 8.97,-9.309 23.66,-9.461 36.51,-8 31.99,3.66 63.28,13.371 91.71,28.468 8.5,4.524 17.78,11.172 17.95,20.801 0.02,1.27 -0.15,2.621 -0.92,3.641 -1.06,1.422 -2.97,1.859 -4.71,2.199 -39.42,7.672 -78.83,15.332 -118.24,23" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path308"></path>
                        <path d="m 1007.61,1604.23 c -61.579,-129.62 9.61,-250.68 116.3,-298.77 99.55,-44.89 262.94,-30.97 365.69,-66.02 11.47,-3.91 23.15,-8.19 32.37,-16.07 9.61,-8.2 20.19,-38.7 26.09,-49.87 31.95,-148.25 81.84,-292.82 234.92,-495.461 21.67,-8.629 45.3,-3.098 62.67,16.332 -23.23,132.988 -64.6,556.779 -116.98,636.679 -69.48,106 -263.61,238.66 -361.95,248.92" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path310"></path>
                        <path d="m 1766.04,714.102 c -55.43,120.859 -127.75,235.418 -160.87,364.198 -17.97,69.86 -28.83,150.67 -87.81,192.23 -32.96,23.23 -74.64,28.87 -113.85,38.21 -66.57,15.85 -130.35,44.31 -185.26,85.13 -8.83,6.56 -18.2,14.87 -18.63,25.87 -0.7,18.41 21.8,30.98 40.22,30.52 62.42,-1.56 116.93,-11.79 146.51,7.83 39.28,26.03 75.08,54.18 149.58,48.32 l -72.29,65.53 c -24.73,10.15 -77.81,6.04 -96.92,8.03 l -359.11,24.27 c -61.587,-129.63 9.61,-250.69 116.3,-298.78 99.55,-44.89 262.94,-30.97 365.69,-66.02 11.47,-3.91 23.15,-8.19 32.37,-16.07 9.61,-8.2 20.19,-38.7 26.09,-49.87 31.73,-147.18 81.18,-290.781 231.7,-491.148 -4.32,10.699 -8.93,21.269 -13.72,31.75" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path312"></path>
                        <path d="m 1433.69,2318.57 c -0.47,6.71 8.74,9.07 15.45,8.65 45.47,-2.85 88.54,-23.23 124.56,-51.12 36.03,-27.89 65.69,-63.07 93.59,-99.09 63.73,-82.3 119.97,-170.96 160.57,-266.79 10.63,-25.08 20.32,-51.67 18.23,-78.82 -3.06,-39.75 -31.75,-74.18 -66.72,-93.32 -34.98,-19.15 -75.54,-25.23 -115.33,-27.88 -20.5,-1.37 -41.06,-1.93 -61.61,-1.66 -18.28,0.24 -41.48,5.13 -44.77,23.11 -3.26,17.76 16.14,30.53 32.56,38.02 22.03,10.04 44.05,20.07 66.06,30.11 7.28,3.32 15.05,7.08 18.9,14.09 6.7,12.23 -1.64,26.9 -8.96,38.78 -34.5,55.9 -51.12,120.61 -73.18,182.48 -19.32,54.16 -43.08,106.73 -70.98,157 l -88.37,126.44" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path314"></path>
                        <path d="m 1560.43,2154.6 c -12.57,30.56 -16.75,63.64 -27.1,94.89 -9.12,27.56 -60.63,75.11 -57.2,77.46 -59.82,-52.96 -162.83,-10.2 -162.83,-10.2 0,0 -23.09,0.07 -47.63,-3.23 -10.66,-1.44 -21.32,-2.98 -31.93,-4.8 -6.15,-1.04 -17.34,-1.07 -22.66,-4.43 -25.87,-16.4 -35.74,-59.06 -55.5,-82.46 -125.97,-149.17 -93.25,-307.83 -142.33,-496.8 -6.18,-23.78 -11.79,-48.14 -10.26,-72.65 1.52,-24.52 11.14,-49.57 30.53,-64.65 11.44,-8.89 25.45,-13.77 39.35,-17.88 77.17,-22.81 158.56,-26.09 238.97,-29.21 83.11,-3.22 145.66,-5.28 228.11,5.64 89.86,11.88 126.94,55.92 129.7,71.05 23.99,132.05 -14.11,266.61 -51.86,395.41 -9.18,31.31 -18.42,62.8 -32.62,92.18 -8.07,16.65 -17.7,32.57 -24.74,49.68" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path316"></path>
                        <path d="m 1651.63,1591.85 c 6.35,35.15 12.03,70.45 13.72,106.09 1.8,37.93 -0.92,75.91 -3.63,113.78 -1.2,16.75 -2.44,33.61 -3.85,50.51 -11.06,50.71 -25.58,101.03 -40.08,150.51 -9.18,31.31 -18.42,62.8 -32.62,92.18 -8.07,16.65 -17.7,32.57 -24.74,49.68 -8.16,19.86 -12.8,40.79 -17.89,61.59 -5.25,3.2 -10.99,5.07 -17.23,4.48 0.89,-114.19 -0.72,-228.39 -4.81,-342.52 -1.42,-39.51 -4.17,-81.93 -28.78,-112.87 -10.04,-12.61 -23.11,-22.43 -36.23,-31.78 -39.88,-28.44 -81.78,-54.07 -125.26,-76.62 -24.89,-12.91 -50.96,-25.32 -69.74,-46.13 -16.32,-18.07 -25.48,-42.03 -26.67,-66.31 25.99,-1.7 52.05,-2.79 78.02,-3.8 83.11,-3.22 145.66,-5.28 228.11,5.64 56.72,7.5 92.37,27.8 111.68,45.57" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path318"></path>
                        <path d="m 1654.7,1594.84 c 9.21,9.19 14.03,17.45 14.95,22.49 3.23,17.77 5.25,35.59 6.39,53.43 l -21.34,-75.92" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path320"></path>
                        <path d="m 1370.53,1491.37 c 19.16,76.14 25.84,290.55 25.28,351 -0.74,81.71 -8.55,163.35 -23.31,243.71 -7.37,40.19 -16.48,80.05 -27.31,119.44 -2.88,10.44 -30.68,115.01 -36.79,114.3 -36.28,-4.2 -72.57,-9.79 -97.32,-15.53 -25.87,-16.4 -35.74,-59.06 -55.5,-82.46 -41.24,-48.83 -69.61,-105.96 -86.05,-167.58 -17.25,-64.64 -22.79,-131.63 -31.7,-197.74 -4.59,-34.08 -35.1,-163.43 -58.267,-307.85 306.897,-101.4 390.647,-58.49 390.967,-57.29" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path322"></path>
                        <path d="m 1180.98,1811.04 c -25.34,9.98 99.8,302.43 111.86,332.97 5.97,15.13 9.95,28.28 12.94,44.37 6.14,33.02 9.13,77.58 -17.38,103.1 -33.51,32.26 -120.59,7.81 -152.96,-17.13 -44.81,-34.52 -64.18,-66.08 -93.92,-122.93 -61.5,-117.57 -70.989,-241.93 -38.79,-370.65 12.4,-49.54 41.02,-79.35 90.01,-93.79 78.43,-23.1 160.89,95.53 88.24,124.06" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path324"></path>
                        <path d="m 1361.79,2138.51 c -2.56,-0.71 -5.12,-1.32 -7.76,-1.16 -11.78,0.77 -16.97,14.96 -19.33,26.55 -2.41,11.8 -4.8,24.22 -1.22,35.73 1.95,6.28 5.55,11.88 8.47,17.77 -2.23,8.23 -5.38,19.66 -8.87,31.94 -56.18,-56.72 -112.35,-113.45 -168.53,-170.17 -32.57,-32.89 -66.06,-67.19 -82.06,-110.62 -24.44,-66.35 -4.5,-144.65 -36.76,-207.57 l -25.05,7.56 c -6.34,-30.95 -13.8,-67.74 -21.446,-108.07 11.906,-1.06 23.816,-2.11 35.726,-3.17 31.8,-2.82 63.91,-5.62 95.54,-1.36 31.63,4.27 63.2,16.29 85.41,39.21 9.37,9.67 16.83,21 24.24,32.26 30.26,46.02 60.52,92.03 90.79,138.05 12.12,18.43 24.28,36.94 33.44,57.01 8.71,19.12 14.58,39.42 19.46,59.86 0.88,3.71 1.69,7.45 2.51,11.17 -3.61,31 -8.22,61.89 -13.85,92.58 -3.22,17.54 -6.84,35.01 -10.71,52.43" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path326"></path>
                        <path d="m 1510.19,2313.01 c -3.05,3.33 -34.06,13.94 -34.06,13.94 27.6,-74.96 108.48,-425.85 112.55,-811.45 74.48,7.31 96.97,53.72 96.97,53.72 -10.96,114.54 -26.72,260.29 -45.62,373.81 -34.78,208.87 -106.99,344.92 -129.84,369.98" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path328"></path>
                        <path d="m 1827.86,1910.22 c -40.6,95.83 -134.17,232.54 -290.42,380.77 -27.47,-4.95 -50.47,-17 -50.47,-17 0,0 6.99,-32.22 4.05,-35.14 l 15.78,-24.88 c 7.7,-33.66 15.91,-73.12 24.05,-117.22 0.52,-1.83 1.02,-3.65 1.54,-5.47 17.55,-61.47 40.07,-121.51 67.27,-179.36 14.81,-31.5 32.3,-63.5 57.57,-86.67 -2.62,19.95 -5.29,39.69 -8.07,58.82 5.24,-10.69 10.77,-21.24 17.06,-31.42 7.33,-11.88 15.66,-26.55 8.96,-38.78 l -1.18,-1.63 c 2.42,-1.61 4.71,-3.33 7.25,-4.78 15.44,-8.74 33.15,-14.06 50.86,-12.93 14.16,0.92 27.74,5.86 40.8,11.41 14.21,6.04 28.32,13.03 39.56,23.61 11.37,10.7 19.27,24.64 25.03,39.16 1.04,2.66 1.8,5.39 2.72,8.09 -3.38,11.36 -7.75,22.54 -12.36,33.42" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path330"></path>
                        <path d="m 1455.24,2360.69 c -12.9,-1.62 -21.53,-9.58 -30.49,-18.19 -8.45,-8.12 -10.51,-22.52 -11.79,-33.67 -0.41,-3.64 -0.64,-7.39 0.33,-10.93 1.55,-5.68 5.94,-10.1 8.85,-15.21 1.15,-2.03 2.11,-4.21 3.79,-5.82 1.68,-1.61 4.37,-2.46 6.35,-1.23 2.78,1.72 2.22,5.94 0.85,8.9 -1.38,2.97 -3.3,6.22 -2.12,9.28 l 0.59,0.97 c 1.61,1.51 3.88,-0.96 4.77,-2.98 4.85,-11.11 12.47,-20.99 21.98,-28.5 2.36,-1.87 4.91,-3.62 7.8,-4.45 4.2,-1.21 8.74,-0.36 12.8,1.25 1.78,0.7 3.7,1.57 5.55,1.07 1.88,-0.51 3.11,-2.25 4.19,-3.87 8.37,-12.46 17.77,-24.21 28.09,-35.12 l 1.9,-1.31 c 0.91,-0.16 1.79,0.36 2.56,0.86 10.15,6.49 20.28,13 30.43,19.49 -6.6,11.03 -14.98,20.87 -22.24,31.48 -8.97,13.11 -16.17,27.34 -23.34,41.53 -6.48,12.83 -12.96,25.66 -19.45,38.49 -1.15,2.27 -2.42,4.67 -4.65,5.89 -1.3,0.72 -2.79,0.95 -4.26,1.17 -7.45,1.08 -15.02,1.84 -22.49,0.9" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path332"></path>
                        <path d="m 1532.73,2278.56 c 0,0 -45.76,-12.32 -57.56,-36.63 24.76,-35.84 93.38,-206.26 110.57,-249.54 34.44,-86.72 61.67,-178.7 119.88,-251.63 9.04,-11.33 19.43,-22.55 33.19,-27.09 20.55,-6.78 43.86,3.75 57.36,20.65 13.52,16.89 18.91,38.85 21.57,60.33 8.72,70.4 -8.29,142.28 -38.63,206.42 -54.59,115.38 -246.38,277.49 -246.38,277.49" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path334"></path>
                        <path d="m 1334.42,2461.29 c -8.83,-47.9 -15.88,-96.12 -21.12,-144.54 22.5,-16.67 51.77,-22.4 79.7,-20.29 27.92,2.13 74.04,9.83 82.18,26.68 -4.57,16.13 -17.37,71.88 -26.05,107.81" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path336"></path>
                        <path d="m 1475.18,2323.14 c -4.55,16.06 -17.24,71.36 -25.92,107.31 l -0.5,0.59 -114.34,30.25 c -3.5,-18.99 -6.64,-38.03 -9.58,-57.11 6.92,-10.84 15.38,-20.68 25.31,-28.87 5.85,-4.82 12.17,-9.14 17.39,-14.65 5.22,-5.5 9.36,-12.51 9.55,-20.09 0.16,-6.23 -2.33,-12.18 -4.4,-18.07 -2.86,-8.1 -4.8,-17.01 -4.9,-25.64 8.38,-0.86 16.85,-1.03 25.21,-0.4 27.92,2.13 74.04,9.83 82.18,26.68" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path338"></path>
                        <path d="m 1521.56,2570 c 18.26,-10.21 28.44,-31.19 30.91,-51.96 2.48,-20.78 -1.61,-41.72 -5.67,-62.25 -1.07,-5.38 -2.17,-10.86 -4.89,-15.62 -4.15,-7.33 -12.21,-12.36 -20.63,-12.56 -8.42,-0.2 -16.84,4.6 -20.68,12.09 -2.13,4.14 -2.88,8.84 -3.58,13.43 -2.48,16.18 -4.96,32.34 -7.44,48.5" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path340"></path>
                        <path d="m 1521.45,2430.91 c 2.19,28.42 11.26,55.96 11.28,84.69 0.03,34.78 -13.11,65.19 -44.55,81.96 -33.65,17.95 -77.04,18.74 -111.81,3.51 -56.24,-24.61 -84.21,-97.39 -62.48,-154.81 21.74,-57.41 86.33,-104.12 147.11,-95.41 18.56,2.67 38.77,20.76 49.29,36.28 8.56,12.61 9.98,28.58 11.16,43.78" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path342"></path>
                        <path d="m 1552.39,2600.97 c -3.84,7.65 -11.96,12.01 -19.69,15.69 -30.37,14.42 -62.67,25.7 -96.18,28.35 -33.49,2.65 -68.41,-3.88 -96.31,-22.63 -21.32,-14.34 -38.42,-36.8 -41,-62.37 -23.94,-41.62 -17.51,-73.06 -16.36,-87.78 0.93,-11.95 5.85,-23.97 15.21,-31.45 9.33,-7.49 23.43,-9.44 33.49,-2.93 7.25,4.69 11.51,12.84 14.31,21.02 8.81,25.61 6.5,54.46 18.02,78.99 1.16,2.49 2.53,5 4.66,6.73 4.92,4.01 12.1,2.83 18.32,1.54 37.76,-7.83 77.38,-11.7 114.62,-1.69 15.57,4.17 30.87,11 42.03,22.64 8.63,8.99 14.47,22.74 8.88,33.89" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path344"></path>
                        <path d="m 2020.34,1683.91 h -533.96 l 107.61,307.61 c 3.36,9.58 12.4,16 22.55,16 h 492.24 c 12.12,0 20.6,-11.96 16.6,-23.4 l -105.04,-300.21" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path346"></path>
                        <path d="m 1560.43,1683.91 h -290.61 v 25.55 h 290.61 v -25.55" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path348"></path>
                        <path d="m 1357.7,2482.99 c -2.63,3.48 -5.31,7.04 -8.91,9.52 -3.59,2.47 -8.33,3.72 -12.4,2.13 -3.3,-1.28 -5.68,-4.19 -7.6,-7.17 -5.74,-8.91 -8.75,-19.79 -7.08,-30.25 1.67,-10.46 8.39,-20.28 18.1,-24.51 9.71,-4.23 22.17,-2.1 29.09,5.92" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path350"></path>
                        <path d="m 1424.2,2282.13 c 13.01,-62.88 23.15,-126.9 37.43,-189.42 0.66,-2.92 5.47,-2.34 5.28,0.72 -3.76,63.2 -19.84,129.55 -39.03,189.71 -0.75,2.37 -4.18,1.4 -3.68,-1.01" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path352"></path>
                        <path d="m 1451.68,2252.34 c 4.02,0 4.02,6.24 0,6.24 -4.01,0 -4.02,-6.24 0,-6.24" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path354"></path>
                        <path d="m 1467.12,2215.48 c 5.37,0 5.38,8.35 0,8.35 -5.37,0 -5.38,-8.35 0,-8.35" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path356"></path>
                        <path d="m 1477.01,2177.76 -1.39,0.38 c -5.97,1.61 -6,-8.76 0,-7.14 l 1.39,0.37 c 3.16,0.85 3.17,5.54 0,6.39" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path358"></path>
                        <path d="m 1485.64,2127.2 0.75,0.69 v 2.87 l -0.75,0.69 c -1.87,1.76 -5.12,0.54 -5.12,-2.12 0,-2.66 3.25,-3.89 5.12,-2.13" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path360"></path>
                        <path d="m 1511.46,2487.97 c -3.5,5.45 -8.87,6.71 -13.69,-4.08 -3.03,-6.8 -4.12,-20.21 5.47,-22.06 14.66,-2.83 13.92,17.23 8.22,26.14" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path362"></path>
                        <path d="m 1512.32,2481.66 c -1.55,2.41 -3.92,2.97 -6.06,-1.82 -1.35,-3 -1.83,-8.95 2.43,-9.77 6.5,-1.26 6.16,7.64 3.63,11.59" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path364"></path>
                        <path d="m 1420.99,2490.03 c -3.93,5.78 -9.94,7.11 -15.32,-4.29 -3.38,-7.18 -4.57,-21.37 6.18,-23.34 16.41,-3.01 15.54,18.22 9.14,27.63" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path366"></path>
                        <path d="m 1421.97,2483.36 c -1.74,2.56 -4.4,3.15 -6.78,-1.9 -1.51,-3.19 -2.04,-9.48 2.73,-10.35 7.28,-1.33 6.89,8.07 4.05,12.25" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path368"></path>
                        <path d="m 1392.87,2522.81 c 5.07,-0.34 10.05,-1.34 14.86,-2.94 2.34,-0.78 4.59,-1.72 6.83,-2.75 2.17,-0.99 5.01,-3.29 7.4,-2.12 l 0.99,1.72 c -0.25,2.8 -3.8,3.91 -6.06,4.9 -2.56,1.11 -5.21,2.02 -7.92,2.75 -5.24,1.41 -10.67,2.13 -16.1,2.19 -2.43,0.02 -2.38,-3.58 0,-3.75" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path370"></path>
                        <path d="m 1523.57,2530.03 c -4.73,2.94 -10.44,2.39 -15.26,-0.04 -2.29,-1.16 -4.52,-2.77 -6.37,-4.56 -0.89,-0.86 -1.67,-1.88 -2.44,-2.85 -0.87,-1.11 -1.21,-2.56 -1.8,-3.84 -0.71,-1.52 0.81,-3.5 2.46,-2.46 l 1.27,0.8 1.53,0.72 c 1.03,0.62 1.89,1.63 2.81,2.42 1.62,1.39 3.02,2.85 4.81,3.97 3.29,2.08 7.56,3.28 11.37,1.99 2.33,-0.78 3.61,2.62 1.62,3.85" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path372"></path>
                        <path d="m 1440.22,2406.73 0.02,1.22 c 16.14,0.3 32.28,0.59 48.41,0.9 l 1.27,-0.47 -0.02,-0.88 c -0.8,-3.02 -1.59,-6.03 -2.38,-9.04 -0.91,-3.44 -1.87,-6.98 -3.98,-9.84 -1.88,-2.54 -4.57,-4.37 -7.43,-5.68 -7.95,-3.64 -17.57,-3.34 -25.31,0.7 -3.23,1.69 -6.2,4.07 -8.04,7.22 -1.83,3.15 -3.97,13.74 -2.52,17.09" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path374"></path>
                        <path d="m 1477.6,2458.91 c 2.39,-4.53 4.49,-9.19 6.3,-13.98 1.68,-4.76 3.67,-10.06 1.3,-16.41 -0.76,-1.56 -2.13,-2.99 -3.78,-3.77 -1.6,-0.72 -3.47,-0.88 -4.62,-0.87 -2.6,-0.02 -5.21,0.02 -7.79,0.35 -5.15,0.53 -10.21,1.89 -14.9,3.99 5.14,-0.21 10.13,-0.22 15.06,-0.1 2.47,0.14 4.92,0.19 7.36,0.47 2.52,0.18 3.47,0.64 4.17,2.1 1.44,3.22 0.53,8.51 -0.54,13.21 -1.16,4.88 -2,9.86 -2.56,15.01" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path376"></path>
                        <path d="m 1369.53,2271.68 c 11.5,26.19 26.21,50.96 43.7,73.58 3.13,4.04 6.36,8.03 10.21,11.38 9.1,7.94 20.95,11.79 32.46,15.43 3.54,1.13 7.19,2.28 10.91,2.12 3.44,-0.14 6.74,-1.37 9.98,-2.59 11.38,-4.31 32.63,-15.44 31.39,-17.82 -2.74,-5.24 -6.47,-4.25 -8.77,-3.99 -9.67,1.15 -17.3,4.25 -26.98,5.39 4.64,-1.81 9.63,-3.93 12.06,-8.27 2.43,-4.34 0.18,-11.35 -4.8,-11.44 3.95,1.03 8.49,-0.92 10.48,-4.5 1.97,-3.58 1.19,-8.46 -1.8,-11.25 -1.44,-1.35 -3.51,-2.63 -3.33,-4.59 0.14,-1.48 1.51,-2.46 2.53,-3.54 4.4,-4.65 1.98,-11.03 -1.74,-15.21 -4.49,-5.07 -8.99,-10.14 -13.5,-15.21 -1.6,-1.8 -3.2,-4.82 -5.57,-4.44 -7.68,1.24 0.25,13.9 0.25,13.9 0,0 -13.61,-12.23 -20.43,-18.34 -4.76,-4.29 -10.56,-11.19 -18.02,-7.67 -1.87,0.89 -3.41,2.86 -5.47,2.67 -1.43,-0.11 -2.52,-1.25 -3.48,-2.33 -5.89,-6.57 -11.77,-13.14 -17.66,-19.72" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path378"></path>
                        <path d="m 1422.52,2355.52 c 9.98,6.78 21.08,11.98 32.85,14.72 5.91,1.38 11.87,2.4 17.9,1.25 2.77,-0.52 5.49,-1.34 8.11,-2.38 2.58,-1.02 5.18,-2.67 7.95,-3.1 l 1.05,1.37 c -3.21,4.16 -10.22,6.01 -15.14,7.06 -6.27,1.36 -12.23,0.69 -18.44,-0.66 -12.99,-2.81 -25.11,-8.38 -35.6,-16.54 -0.98,-0.76 0.29,-2.42 1.32,-1.72" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path380"></path>
                        <path d="m 1444.82,2345.73 c 3.98,1.82 8.09,3.34 12.3,4.56 2.05,0.59 4.11,1.11 6.19,1.55 1.05,0.21 2.09,0.42 3.14,0.6 1.03,0.18 2.24,0.17 3.12,0.8 0.77,0.56 0.66,1.68 -0.26,1.99 -1.07,0.38 -2.26,-0.02 -3.34,-0.22 -1.05,-0.19 -2.08,-0.4 -3.13,-0.64 -2.21,-0.48 -4.42,-1.07 -6.6,-1.73 -4.32,-1.31 -8.53,-2.96 -12.6,-4.89 -1.36,-0.64 -0.17,-2.64 1.18,-2.02" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path382"></path>
                        <path d="m 1465.78,2306.81 c 2.82,1.31 5.76,2.1 8.72,2.99 1.44,0.44 2.9,0.75 4.35,1.12 1.52,0.4 3.13,0.56 4.55,1.26 l -0.27,2.01 0.78,-0.77 -0.78,0.77 c -1.5,0.48 -3.19,0.25 -4.74,0.1 -1.69,-0.17 -3.37,-0.57 -5.01,-1.02 -3.12,-0.86 -6.15,-2.58 -8.86,-4.31 -1.38,-0.87 -0.18,-2.82 1.26,-2.15" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path384"></path>
                        <path d="m 1459.54,2327.29 c 3.41,1.86 6.94,3.1 10.67,4.12 3.72,1 7.61,1.21 11.18,2.68 1.23,0.52 1.34,2.17 0,2.64 -4.03,1.4 -8.45,0.32 -12.38,-0.95 -3.94,-1.27 -7.71,-3.35 -11.08,-5.73 -1.66,-1.17 -0.22,-3.77 1.61,-2.76" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path386"></path>
                        <path d="m 1468.96,2290.64 1.24,0.77 0.78,0.8 1.6,1.74 1.52,1.73 0.93,1.21 0.42,0.88 0.14,0.85 -1.61,1.6 -0.85,-0.12 -0.82,-0.4 -1.23,-1 -1.61,-1.74 -1.65,-2.17 -0.6,-1 -0.44,-1.48 0.52,-1.56 1.66,-0.11" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path388"></path>
                        <path d="m 1063.23,1895.92 c 53.24,131.14 246.5,322.42 306.57,386.59 4.85,-0.2 39.48,-16.82 48.88,-39.34 -41.9,-153.99 -143.46,-459.65 -250.38,-533.98 -20.75,-14.41 -46.95,-25.58 -72.7,-22.44 -31.51,3.84 -63.17,35.57 -79.85,61.05 -5.1,7.8 -7.31,17.06 -9.44,26.13" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path390"></path>
                        <path d="m 1659.88,1686.41 h 104.26 l 14.29,212.13 H 1645.6 l 14.28,-212.13 m 108.94,-5 h -113.61 l -14.95,222.13 h 143.51 l -14.95,-222.13" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path392"></path>
                        <path d="m 1754.09,1697.17 8.61,128.06 h -70.92 l -3.57,35.89 c -1.38,12.09 -7.68,18.5 -13.24,18.5 -5.65,0 -10.52,-6.6 -8.71,-20.59 l 3.16,-33.8 h -8.09 l 8.61,-128.06 -12.83,190.61 h 109.8 l -12.82,-190.61" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path394"></path>
                        <path d="m 1754.09,1697.17 h -84.15 l -8.61,128.06 h 8.09 l 9.4,-100.48 h 22.96 l -10,100.48 h 70.92 l -8.61,-128.06" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path396"></path>
                        <path d="m 1691.78,1825.23 h -22.36 l -3.16,33.8 c -1.81,13.99 3.06,20.59 8.71,20.59 5.56,0 11.86,-6.41 13.24,-18.5 l 3.57,-35.89" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path398"></path>
                        <path d="m 1701.78,1724.75 h -22.96 l -9.4,100.48 h 22.36 l 10,-100.48" style="fill:#fcd0ce;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path400"></path>
                        <g id="g402">
                            <g id="g404" clip-path="url(#clipPath408)">
                                <path d="m 1727.61,3604.87 c -36.16,-90.96 -16.78,-193.45 -26.43,-290.85 -7.55,-76.25 -33.53,-150.6 -75.13,-214.95 -37.59,-58.16 -87.62,-108.21 -119.25,-169.82 -31.79,-61.92 -43.32,-134.04 -32.42,-202.79 12.7,-80.18 54.91,-158.05 41.56,-238.11 -10.09,-60.47 -50.37,-110.88 -75.57,-166.77 -27.66,-61.34 -36.97,-129.1 -45.99,-195.78 77.44,18.59 151.25,32.74 228.69,51.32 14.35,3.45 29.09,7.06 41.16,15.56 13,9.15 21.69,23.13 29.15,37.16 40.89,76.95 54.46,165.13 64.58,251.67 11.76,100.56 19.69,201.52 27.61,302.45 16.72,213.05 33.27,429.37 -8.98,638.86 -13.09,64.9 -28.08,119.22 -48.98,182.05" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path410"></path>
                                <path d="m 3008.66,3659.55 c 45.77,-86.52 52.22,-249.81 72.32,-345.6 15.74,-74.99 49.6,-146.11 97.89,-205.59 43.64,-53.77 98.79,-98.13 136.87,-155.96 38.29,-58.13 57.54,-128.59 54.12,-198.11 -3.98,-81.08 -37.54,-163.05 -15.62,-241.2 16.55,-59.03 62.04,-104.8 93.11,-157.64 34.11,-58 50.69,-124.37 66.85,-189.68 -78.99,10.13 -153.9,16.22 -232.89,26.34 -14.64,1.88 -29.69,3.89 -42.6,11.03 -13.91,7.7 -24.06,20.65 -32.99,33.8 -48.95,72.08 -71.96,158.28 -91.35,243.24 -22.54,98.7 -41.32,198.21 -60.08,297.7 -39.62,210 -79.41,423.28 -60.01,636.09 6,65.94 0.39,180.87 14.38,245.58" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path412"></path>
                                <path d="m 3051.75,3468.19 c -21.48,124.8 -51.38,284.47 -131.26,427.52 -61.74,110.56 -173.2,201.05 -294.35,237.93 -48.89,14.89 -99.94,21.42 -150.86,25.85 -114.11,9.92 -240.96,-0.12 -322.67,-80.4 -117.89,-22.16 -216.4,-83.91 -293.42,-175.88 -95.95,-114.58 -139.55,-272.29 -150.21,-421.36 -15,-210.01 -88.93,-1218.58 -229.63,-1268.96 37.48,-46.78 253.38,-14.76 453.9,17.25 155.14,24.78 301.08,49.55 348.04,37.82 129.26,-32.29 232.88,-18.37 357.96,27.53 23.08,8.47 116.19,8.26 218.61,8.05 143.37,-0.3 304.99,-0.6 318.31,22.92 -70.82,30.89 -43.97,674.2 -124.42,1141.73" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path414"></path>
                                <path d="m 2157.83,4084.18 c -30.61,5.51 -62.21,3.26 -90.95,-9.08 -2.05,-0.89 -0.58,-4.21 1.52,-3.58 28.41,8.44 58.41,11.62 87.73,6.52 4.01,-0.69 5.75,5.42 1.7,6.14" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path416"></path>
                                <path d="m 2158.23,4073.7 c -1.68,23.6 10.53,44.67 28.28,59.38 1.53,1.26 -0.42,3.43 -2.02,2.62 -22.09,-11.21 -33.38,-38.07 -31.15,-62 0.29,-3.09 5.12,-3.16 4.89,0" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path418"></path>
                                <path d="m 2165.11,4083.31 c 2.89,9.59 8.42,17.99 15.61,24.9 7.3,7 16.23,11.33 25.46,15.19 1.43,0.6 1.48,3.1 -0.41,2.99 -10.9,-0.66 -20.95,-6.69 -28.81,-13.97 -8.03,-7.42 -13.89,-17.21 -16.85,-27.73 -0.9,-3.22 4.04,-4.57 5,-1.38" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path420"></path>
                                <path d="m 2156.7,4074.86 c -137.57,9.4 -252.8,-81.47 -331.87,-185.45 -83.59,-109.94 -118.41,-243.5 -127.7,-379.6 -4.5,-65.94 0.33,-131.64 -0.85,-197.61 -1.15,-64.71 -12.18,-128.81 -48.17,-183.84 -39.78,-60.8 -102.29,-102.23 -147.01,-159.12 -40.74,-51.85 -70.87,-113 -76.96,-179.34 -3.49,-37.95 0.9,-76.82 15.08,-112.35 13.22,-33.12 34.23,-62.29 49.36,-94.47 18.4,-39.12 21.7,-80 10.49,-121.7 -11.22,-41.79 -33.01,-80.2 -54.5,-117.42 -0.81,-1.41 1.34,-2.66 2.18,-1.27 34.66,56.71 72.39,121.92 62.48,191.15 -9.36,65.31 -61.08,114.44 -75.38,178.44 -16.08,71.88 3.37,146.74 40.64,208.86 17.86,29.77 39.64,57.04 63.64,82.08 24.44,25.52 51.46,48.43 75.87,73.99 44.38,46.45 72.88,101.93 82.64,165.56 9.37,61.03 4.29,123.04 3.84,184.47 -1,134.63 19.03,277.22 87.02,395.49 74.83,130.19 208.83,257.31 369.2,248.06 2.63,-0.15 2.61,3.89 0,4.07" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path422"></path>
                                <path d="m 2158.95,4081.97 c 67.52,47.01 140.15,88.3 224.32,92.11 47.38,2.14 94.34,-6.67 139.95,-18.73 41.31,-10.92 82.5,-23.43 122.26,-39.18 45.07,-17.87 87.79,-41.14 124.86,-72.62 2.08,-1.76 5.11,1.18 3.04,3.04 -64.34,57.57 -148.9,85.34 -230.61,108 -45.8,12.7 -92.84,23.24 -140.56,23.88 -42.05,0.57 -83.58,-7.42 -122.65,-22.91 -44,-17.46 -83.93,-43.22 -122.52,-70.33 -1.97,-1.38 -0.1,-4.65 1.91,-3.26" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path424"></path>
                                <path d="m 2147.7,3772.6 c -17.49,-32.91 -20.66,-70.62 -18.95,-107.3 1.28,-27.55 0.23,-69.26 25.74,-86.93 1.8,-1.24 3.46,1.38 2.2,2.85 -20.44,23.98 -20.84,59.14 -22.02,89.1 -1.37,34.4 1.88,68.87 15.58,100.78 0.74,1.7 -1.64,3.22 -2.55,1.5" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path426"></path>
                                <path d="m 2143.94,3767.08 c -7.69,-34.5 -9.29,-69.34 -3.66,-104.3 4.36,-27.06 12.08,-59.76 36.17,-76.13 1.65,-1.12 3.19,1.26 2.02,2.61 -19.15,22.22 -27.95,48.18 -32.45,76.82 -5.19,32.94 -4.84,67.3 1.13,100.11 0.38,2.08 -2.75,3 -3.21,0.89" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path428"></path>
                                <path d="m 2163.76,4034.82 c -53.9,13.4 -106.16,-17.19 -146.66,-49.73 -42.2,-33.92 -82.41,-72.17 -115.55,-115.09 -19.11,-24.75 -36.05,-51.88 -51.84,-78.89 -17.23,-29.48 -31.79,-60.45 -43.31,-92.59 -18.51,-51.64 -30.97,-107.19 -34.1,-162.02 -0.09,-1.62 2.66,-2.04 2.9,-0.39 6.76,48.8 14.28,96.91 29.39,143.95 10.84,33.74 24.88,66.36 42.04,97.36 12.41,22.42 26.24,44.17 40.39,65.52 30.03,45.33 68.96,83.93 109.7,119.61 44.39,38.87 102.93,83.82 165.98,68.41 2.5,-0.61 3.56,3.24 1.06,3.86" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path430"></path>
                                <path d="m 2184.42,4041.91 c 36.14,56.74 107.64,81.68 172.09,83.84 69.67,2.33 136.83,-19.62 198.8,-49.78 36.48,-17.74 71.18,-38.69 106.9,-57.84 1.48,-0.8 2.73,1.35 1.32,2.25 -62.65,39.76 -130.29,76.92 -202.21,96.65 -64.02,17.56 -135.07,19.83 -197.11,-6.38 -33.12,-13.99 -63.4,-36.26 -82.42,-67.19 -1.04,-1.68 1.59,-3.19 2.63,-1.55" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path432"></path>
                                <path d="m 2160.58,4014.36 c -92.04,-57.35 -138.7,-163.08 -143.69,-268.67 -1.56,-33.07 0.7,-66.55 6.82,-99.08 0.25,-1.31 2.52,-1.02 2.35,0.32 -7.19,57.75 -8.14,116.24 5.4,173.2 11.89,50.03 34.64,97.77 68.03,137.06 18.03,21.21 39.09,39.66 62.66,54.49 1.69,1.06 0.14,3.75 -1.57,2.68" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path434"></path>
                                <path d="m 2172.65,4064.22 c 9.93,17.03 24.83,29.67 42.14,38.8 1.2,0.63 0.37,2.74 -0.94,2.23 -18.65,-7.36 -34.1,-22.14 -44.08,-39.35 -1.08,-1.86 1.79,-3.53 2.88,-1.68" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path436"></path>
                                <path d="m 2190.75,4006.49 c -7.21,-61.28 -11.34,-123.06 -5.88,-184.67 5.06,-57.26 18.12,-115.86 45.6,-166.79 13.88,-25.7 32.63,-49.73 58.39,-64.28 1.95,-1.1 3.53,1.73 1.74,2.98 -45.91,31.79 -69.55,85.58 -84.2,137.71 -16.07,57.1 -20.72,116.81 -19.41,175.93 0.74,33.13 3.07,66.17 6.59,99.12 0.2,1.81 -2.62,1.79 -2.83,0" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path438"></path>
                                <path d="m 2214.66,3977.46 c 4.86,-54.71 16.58,-108.42 33.86,-160.54 8.54,-25.78 18.53,-51.08 29.91,-75.74 10.84,-23.47 22.48,-47.05 37.17,-68.4 13.65,-19.84 32.41,-41.15 56.91,-46.83 1.55,-0.36 2.69,1.91 1.13,2.69 -10.44,5.25 -20.29,10.83 -29.05,18.66 -8.57,7.68 -16.05,16.45 -22.69,25.83 -14,19.77 -25.23,41.71 -35.86,63.43 -23.44,47.97 -41.46,98.5 -53.49,150.52 -6.89,29.77 -11.98,60.01 -15.33,90.38 -0.19,1.61 -2.71,1.65 -2.56,0" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path440"></path>
                                <path d="m 2536.43,3665.45 c 40.19,-68.23 104.96,-121.02 180.81,-144.54 25.3,-7.84 51,-12.79 75.26,-23.82 2.14,-0.97 3.98,1.98 1.88,3.22 -18.81,11.08 -40.88,15.4 -61.71,21.07 -19.83,5.4 -39.13,12.4 -57.63,21.38 -35.54,17.25 -67.79,41.15 -94.91,69.86 -15.68,16.58 -29.36,34.79 -40.97,54.43 -1.03,1.75 -3.77,0.16 -2.73,-1.6" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path442"></path>
                                <path d="m 2583.62,3580.51 c 27.09,-31.03 59.22,-58.86 98.06,-73.91 19.51,-7.55 40.01,-10.99 60.92,-10.27 25.27,0.87 49.99,4.84 75.19,0.34 1.87,-0.33 2.57,2.18 0.78,2.84 -22.11,8.17 -46.13,3.62 -69.03,2.21 -21.53,-1.32 -42.49,0.98 -62.93,8.1 -39.58,13.8 -73.27,41.9 -101.1,72.57 -1.16,1.28 -3.01,-0.6 -1.89,-1.88" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path444"></path>
                                <path d="m 2119.16,4004.28 c -55.22,-41.58 -97.34,-99.57 -119.86,-164.94 -13,-37.76 -18.8,-77.55 -21.81,-117.25 -2.96,-39.02 -2.06,-78.22 -4.97,-117.22 -1.3,-17.52 -3.91,-35.2 -10.07,-51.74 -6.4,-17.17 -16.92,-30.57 -31.69,-41.3 -1.44,-1.04 -0.22,-3.18 1.4,-2.4 26.4,12.65 37.42,44.19 42.04,71.06 6.06,35.3 4.74,71.8 6.28,107.47 1.81,41.99 5.39,84.12 15.88,124.93 9.14,35.56 23.76,69.45 43.49,100.41 21.66,33.97 49.22,64.05 81.03,88.75 1.26,0.98 -0.43,3.2 -1.72,2.23" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path446"></path>
                                <path d="m 1985.14,3641.13 c -0.19,-31.65 2.58,-65.63 -8.31,-95.9 -4.56,-12.67 -11.45,-24.71 -20,-35.11 -8.91,-10.83 -19.67,-18.82 -30.76,-27.22 -1.22,-0.93 -0.21,-2.69 1.22,-2.06 24.11,10.62 42.89,35.8 52.17,59.75 12.29,31.68 8.69,67.29 8.23,100.54 -0.02,1.64 -2.55,1.64 -2.55,0" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path448"></path>
                                <path d="m 2324.31,4027.26 c 36.53,15.58 77.44,8.13 114,-3.38 31.14,-9.81 61.42,-22.53 90.45,-37.46 57.42,-29.54 110.06,-68.17 155.78,-113.75 45.52,-45.38 84.2,-97.6 113.97,-154.58 32.53,-62.27 51.37,-129.69 70.01,-197.09 18.63,-67.39 37.69,-136.45 73.99,-196.86 4.65,-7.73 9.57,-15.29 14.73,-22.69 1.53,-2.21 5.16,-0.14 3.64,2.13 -41.02,60.98 -63.35,131.28 -83.12,201.41 -19.22,68.19 -37.04,137.11 -68.46,200.97 -28.81,58.51 -67.01,112.37 -112.27,159.29 -45,46.67 -97.11,86.64 -154.12,117.56 -28.13,15.27 -57.48,28.33 -87.7,38.92 -34.04,11.94 -71.06,22.02 -107.32,15.54 -8.62,-1.55 -16.93,-4.16 -24.96,-7.66 -1.6,-0.7 -0.22,-3.03 1.38,-2.35" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path450"></path>
                                <path d="m 2138.53,2689.43 c 0,0 99,16.86 197.25,11.08 98.25,-5.78 216.15,5.78 216.15,5.78 0,0 40.87,4.06 60.89,-6.64 20.02,-10.7 52.39,-88.14 52.39,-88.14 l 23.11,-120.21 -36.98,-221.93 -549.05,19.65 -17.33,221.93 -3.47,105.18 57.04,73.3" style="fill:#d8d5d3;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path452"></path>
                                <path d="m 2779,2425.81 c -154.82,15.03 -182.13,274.54 -189.18,408.15 -1.05,20.02 5.51,44.57 4.46,64.58 37.41,36.32 87.1,90.85 116.02,134.23 28.12,42.18 48.49,137.68 49.25,186.53 7.29,-11.57 24.09,-13.61 36.79,-8.55 23.54,9.39 35.09,35.62 42.62,59.83 7.13,22.92 12.79,46.29 16.93,69.94 5.23,29.9 7.67,62.29 -6.54,89.1 -14.23,26.82 -50.82,43.58 -76.26,27.04 1.35,0.07 -1.21,-0.41 -3.77,-0.9 -2.56,-0.49 -5.12,-0.97 -3.76,-0.91 -40.34,-10.68 -83.48,0.71 -121.1,18.75 -37.62,18.05 -71.83,42.6 -109.48,60.58 -110.03,52.57 -223.19,36.28 -344.8,27.33 -29.18,56 -54.58,125.29 -42.38,187.24 -16.43,-63.6 -25.17,-130.94 -6.16,-193.82 -61.2,-7.29 -152.83,-55.56 -153.34,-76.85 -22.26,9.2 -52.89,-8.49 -64.64,-29.52 -23.39,-41.9 -17.29,-93.55 -8.04,-140.63 5.46,-27.79 12.11,-56.18 28.2,-79.48 16.08,-23.31 43.77,-40.68 71.81,-36.76 4.68,-39.38 8.09,-81.48 22.97,-118.25 14.73,-36.38 38.71,-68.14 62.42,-99.43 13.8,-18.22 40.7,-52.79 54.51,-71.01 4.19,-65.34 1.98,-254.46 -31.18,-331.84 -26.72,-62.37 -152.16,-175.75 -209.01,-184.46 133.86,-115.62 361.19,-615.35 537.76,-625.74 47.53,-2.8 228.11,292.8 273.76,306.35 45.64,13.56 59.2,202.76 74.96,247.69 9.3,26.53 -37.89,87.08 -22.82,110.81" style="fill:#f89f83;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path454"></path>
                                <path d="m 2202.44,2866.27 c 19.67,-26.17 43.94,-48.08 72.52,-64.15 14.12,-7.94 29.05,-14.41 44.51,-19.26 8.08,-2.53 16.29,-4.64 24.6,-6.27 6.96,-1.36 15.59,-3.7 22.62,-2.36 2.31,0.44 1.74,3.44 0,4.14 -6.88,2.78 -15.7,2.64 -23.02,4.08 -7.67,1.51 -15.27,3.41 -22.74,5.69 -15.37,4.69 -30.28,10.96 -44.4,18.61 -27.83,15.09 -53.1,35.68 -72.69,60.6 l -1.4,-1.08" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path456"></path>
                                <path d="m 2382.4,2774.93 c 39.92,5.51 78.47,18.7 113.65,38.32 33.87,18.88 67.87,44.16 90.71,75.9 0.95,1.31 -1.12,2.81 -2.21,1.7 -13.95,-14.13 -27.57,-28.48 -42.94,-41.12 -15.17,-12.48 -31.5,-23.56 -48.67,-33.13 -34.53,-19.26 -72.45,-32.09 -111.52,-38.1 -2.36,-0.37 -1.33,-3.89 0.98,-3.57" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path458"></path>
                                <path d="m 2293.58,3483.84 c 0.38,14.32 -5.2,28.71 -15.14,39.03 0.92,-2.72 1.84,-5.44 2.77,-8.16 -12.81,8.56 -28.82,13.14 -43.64,17.33 3.14,-1.37 5.45,-4.5 5.83,-7.9 -30.66,6.21 -63.64,12.63 -94.63,8.4 -37.64,-5.14 -71.86,-25.56 -99.72,-51.38 18.94,2.86 35.89,5.09 54.83,7.96 18.83,2.84 37.75,5.69 56.8,5.92 45.13,0.54 87.81,-12.99 132.9,-11.2" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path460"></path>
                                <path d="m 2456.15,3483.84 c -0.37,14.32 5.22,28.71 15.16,39.03 -0.93,-2.72 -1.86,-5.44 -2.77,-8.16 12.8,8.56 28.8,13.14 43.63,17.33 -3.15,-1.37 -5.45,-4.5 -5.83,-7.9 30.65,6.21 63.64,12.63 94.64,8.4 37.63,-5.14 71.85,-25.56 99.7,-51.38 -18.93,2.86 -35.89,5.09 -54.82,7.96 -18.84,2.84 -37.74,5.69 -56.8,5.92 -45.13,0.54 -87.81,-12.99 -132.91,-11.2" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path462"></path>
                                <path d="m 2310.28,3410.81 c 17.64,-9.54 25.87,-26.16 28.67,-45.35 3.23,-22.18 5.41,-44.92 1.64,-67.18 -0.31,-1.76 2.22,-2.54 2.7,-0.75 6.28,23.31 3.36,47.71 -0.1,71.24 -2.85,19.5 -12.84,36.62 -30.48,46.2 -2.72,1.48 -5.15,-2.68 -2.43,-4.16" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path464"></path>
                                <path d="m 2342.23,3135.42 c 1.88,0.42 3.78,0.84 5.66,1.26 0.99,-0.6 1.91,-1.26 2.79,-2.01 1.19,-0.91 2.34,-1.86 3.51,-2.79 1.92,-1.53 3.85,-3.05 5.8,-4.55 4.58,-3.51 9.3,-6.86 14.37,-9.65 9.44,-5.19 20.17,-8.49 31.01,-6.94 9.15,1.3 16.62,6.48 24.09,11.55 3.87,2.63 7.83,5.34 12.19,7.07 3.78,1.5 8.45,0.66 11.62,3.13 v 2.83 c -5.33,6.14 -18.77,-2.03 -23.77,-5.31 -10.43,-6.82 -19.45,-14.21 -32.7,-13.4 -13.95,0.86 -25.78,8.53 -36.69,16.63 -4.33,3.21 -19.52,15.77 -21.59,3.2 -0.39,-2.41 2.94,-3.43 3.71,-1.02" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path466"></path>
                                <path d="m 2326.38,3205.76 c -8.09,-12.67 -12.66,-28.76 -15.64,-43.38 -1.75,-8.56 -2.12,-17.83 1.98,-25.8 3.16,-6.13 9.74,-12.43 17.13,-10.96 1.74,0.35 1.89,2.83 0.48,3.66 -5.86,3.44 -10.99,6.36 -13.44,13.16 -2.84,7.88 -1.26,16.46 0.54,24.37 2.84,12.45 5.87,25.83 12.34,36.97 1.27,2.2 -2.04,4.1 -3.39,1.98" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path468"></path>
                                <path d="m 2463.62,3200.36 c 5.54,-11.61 11.46,-23.78 12.35,-36.82 0.38,-5.56 -0.12,-11.14 -1.83,-16.46 -0.87,-2.72 -2.06,-5.33 -3.56,-7.75 -1.38,-2.2 -2.86,-3.85 -3.06,-6.52 -0.11,-1.38 1.31,-2.02 2.43,-1.85 5.42,0.79 8.52,8.9 10.02,13.42 1.97,5.94 2.61,12.41 2.15,18.63 -1.06,14.33 -7.49,27.44 -13.76,40.11 -1.57,3.18 -6.24,0.4 -4.74,-2.76" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path470"></path>
                                <path d="m 2011.63,3224.82 c 0.51,-6.5 1.02,-13 1.53,-19.5 0.5,-6.39 0.86,-12.79 2.11,-19.08 0.29,-1.46 2.39,-1.02 2.47,0.33 0.4,6.38 -0.08,12.75 -0.43,19.12 -0.34,6.38 -0.68,12.75 -1.01,19.13 -0.17,3 -4.9,2.98 -4.67,0" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path472"></path>
                                <path d="m 2004.57,3400.74 c -7.31,13.81 -25.68,15.34 -37.6,6.75 -15.28,-11.02 -18.07,-30.81 -17.68,-48.32 0.46,-20.85 4.53,-41.67 13.06,-60.74 3.29,-7.34 7.44,-14.63 14.02,-19.51 7.34,-5.47 16.73,-7.16 24.27,-12.4 1.75,-1.21 4.28,1.24 2.99,2.99 -3.76,5.15 -9.04,7.3 -14.75,9.76 -7.55,3.24 -12.98,7.52 -17.13,14.76 -8.22,14.34 -12.62,31.74 -14.9,48.01 -2.26,16.05 -3.93,35.49 4.46,50.12 7.85,13.7 28.77,22.26 39.36,6.3 1.61,-2.42 5.28,-0.31 3.9,2.28" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path474"></path>
                                <path d="m 1997.05,3400.85 c 7,-5.4 8.16,-16.61 9.86,-24.65 1.05,-4.96 1.91,-9.95 2.77,-14.95 0.43,-2.49 0.82,-4.99 1.18,-7.49 0.35,-2.53 0.39,-5.33 1.57,-7.63 l 1.96,0.26 c 0.79,2.47 0.26,5.3 0.05,7.86 -0.24,2.87 -0.51,5.75 -0.85,8.63 -0.67,5.76 -1.69,11.5 -2.83,17.2 -1.79,8.93 -3.77,18.76 -11.54,24.49 -2.25,1.65 -4.31,-2.06 -2.17,-3.72" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path476"></path>
                                <path d="m 2012.05,3365.97 c -2.22,5.7 -5.35,10.93 -9.48,15.46 -3.9,4.27 -8.98,8.16 -14.94,8.57 -5.68,0.4 -10.65,-3.15 -13.08,-8.13 -1.28,-2.63 -1.89,-5.43 -2.1,-8.34 -0.23,-3.14 -0.19,-6.94 1.31,-9.79 0.62,-1.17 2.26,-0.76 2.64,0.34 0.88,2.52 0.52,5.53 0.69,8.16 0.15,2.27 0.56,4.6 1.55,6.66 1.8,3.73 5.26,6.43 9.56,5.53 4.51,-0.93 8.14,-4.16 11.13,-7.49 3.23,-3.61 5.85,-7.85 7.65,-12.36 0.53,-1.32 1.76,-2.26 3.23,-1.84 1.26,0.35 2.36,1.9 1.84,3.23" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path478"></path>
                                <path d="m 1987.91,3478.27 c -0.12,-3.49 -0.07,-7 0.18,-10.49 0.12,-1.78 0.32,-3.53 0.67,-5.29 0.35,-1.75 0.98,-3.39 1.6,-5.06 0.49,-1.28 2.45,-1.16 2.48,0.33 0.03,1.7 0.15,3.4 0.08,5.1 -0.08,1.71 -0.21,3.41 -0.34,5.12 -0.26,3.43 -0.32,6.86 -0.23,10.29 0.08,2.86 -4.35,2.86 -4.44,0" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path480"></path>
                                <path d="m 2765.74,3455.15 c 0.02,-10.08 0.05,-20.15 0.32,-30.23 0.09,-3.34 5.1,-3.34 5.18,0 0.23,10.08 0.22,20.15 0.21,30.23 -0.01,3.67 -5.72,3.68 -5.71,0" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path482"></path>
                                <path d="m 2754.29,3260.42 c -1.24,-13.12 -1.65,-26.58 0.91,-39.56 0.34,-1.69 2.99,-1.28 2.98,0.41 -0.07,13.08 -0.64,26.09 0.55,39.15 0.26,2.85 -4.18,2.82 -4.44,0" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path484"></path>
                                <path d="m 2768.61,3362.27 c 4.89,5.52 10.61,10.16 17.47,12.97 9.89,4.04 16.9,0.02 21.49,-9.05 7.21,-14.24 7.19,-31.38 5.4,-46.87 -1.55,-13.47 -4.53,-27.24 -10.62,-39.44 -2.96,-5.92 -6.65,-11.51 -11.37,-16.17 -2.37,-2.34 -4.95,-4.43 -7.77,-6.19 -4.34,-2.72 -15.55,-7.4 -16.66,1.93 -0.23,2.01 -3.52,2.97 -3.92,0.54 -1.28,-7.91 5.39,-13.09 12.98,-12.2 8.56,1 16.68,7.87 22.21,14.09 12.71,14.32 18.14,33.73 20.78,52.28 2.77,19.47 3.69,44.21 -8.99,60.76 -13.06,17.04 -34.91,4.04 -44.38,-10.05 -1.34,-2.01 1.76,-4.43 3.38,-2.6" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path486"></path>
                                <path d="m 2766.29,3361.52 c -3.61,-7.44 -5.6,-15.47 -5.49,-23.76 0.02,-2.09 3.23,-2.1 3.25,0 0.07,7.66 1.51,15.38 4.54,22.42 0.67,1.54 -1.54,2.91 -2.3,1.34" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path488"></path>
                                <path d="m 2764.22,3337.83 c 3.22,5.99 8.39,10.54 14.4,13.62 3.04,1.56 6.73,2.91 10.22,2.44 1.41,-0.19 2.64,-0.77 3.87,-1.49 1.22,-0.71 2.08,-2.07 3.31,-2.66 0.93,-0.44 2.17,-0.13 2.45,1 0.92,3.85 -3.98,7.04 -7.02,8.02 -4.4,1.41 -8.91,0.34 -12.96,-1.56 -7.56,-3.54 -14.24,-9.72 -17.85,-17.28 -1.14,-2.38 2.3,-4.47 3.58,-2.09" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path490"></path>
                                <path d="m 2285.02,3519.08 c 6.02,-8.28 9.12,-18.47 8.52,-28.7 h 0.99 c 0.87,10.51 -2.19,21.01 -8.66,29.35 l -0.85,-0.65" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path492"></path>
                                <path d="m 2290.55,3517.48 c 4.86,-10.55 9.63,-22.35 3.04,-33.27 l 0.66,-0.5 c 3.64,4.34 4.5,10.53 3.8,16.01 -0.84,6.52 -3.72,12.46 -6.58,18.3 l -0.92,-0.54" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path494"></path>
                                <path d="m 2235.22,3529.14 c 3.82,-1.55 6.66,-4.49 8.78,-7.95 l 0.85,0.35 c -1.64,4.07 -5.29,7.14 -9.3,8.74 l -0.74,-0.41 0.41,-0.73" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path496"></path>
                                <path d="m 2232.14,3527.29 c 1.71,-0.7 3.32,-1.64 4.78,-2.76 1.48,-1.13 2.79,-2.42 4.14,-3.67 l 0.6,0.46 c -0.94,1.73 -2.41,3.2 -3.97,4.37 -1.6,1.2 -3.34,2.16 -5.19,2.91 l -0.83,-0.48 0.47,-0.83" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path498"></path>
                                <path d="m 2467.54,3521.05 c -4.56,-3.94 -7.83,-9.1 -9.61,-14.86 -1.62,-5.27 -2.5,-12.15 -0.27,-17.37 l 0.96,0.27 c -0.19,2.73 -0.72,5.38 -0.67,8.13 0.05,2.92 0.51,5.81 1.34,8.6 1.64,5.52 4.76,10.59 8.98,14.5 l -0.73,0.73" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path500"></path>
                                <path d="m 2458.1,3515.5 c -3.05,-4.29 -4.79,-9.32 -5.28,-14.56 -0.46,-4.81 -0.06,-11.13 2.96,-15.12 l 0.76,0.31 c -0.48,2.42 -1.35,4.74 -1.79,7.18 -0.43,2.43 -0.55,4.94 -0.39,7.4 0.3,5.07 1.93,9.99 4.57,14.3 l -0.83,0.49" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path502"></path>
                                <path d="m 2467.11,3511.45 c 4.9,6.07 11.4,10.87 18.62,13.83 l -0.32,1.15 c -7.55,-2.92 -14.08,-7.84 -19.06,-14.22 l 0.76,-0.76" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path504"></path>
                                <path d="m 2503.57,3518.79 c 0.8,3.13 3.56,4.91 6.14,6.53 2.57,1.62 5.27,3.06 8.06,4.29 l -0.39,0.93 c -3.09,-1.21 -6.04,-2.73 -8.81,-4.59 -2.61,-1.76 -5.17,-3.66 -5.82,-6.94 l 0.82,-0.22" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path506"></path>
                                <path d="m 2506.71,3521.93 c 3.11,2.1 6.47,3.79 10.03,4.99 3.49,1.19 7.08,1.77 10.67,2.53 l -0.09,0.66 c -3.74,0.19 -7.58,-0.78 -11.08,-2.07 -3.55,-1.31 -6.92,-3.08 -10.02,-5.28 l 0.49,-0.83" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path508"></path>
                                <path d="m 2461.96,3485.43 c 1.44,11.77 8,21.88 17.27,29.05 l -0.41,0.52 c -10.26,-6.24 -16.81,-17.79 -18.18,-29.57 h 1.32" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path510"></path>
                                <path d="m 2467.03,3486.39 c 3.3,13.08 12.61,23.88 24.52,30 l -0.36,0.6 c -12.59,-5.4 -21.78,-17.18 -24.96,-30.38 l 0.8,-0.22" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path512"></path>
                                <path d="m 2484.45,3487.38 c 10.74,13.33 24.78,23.91 40.57,30.51 l -0.23,0.8 c -16.19,-6.34 -30.36,-16.87 -41.08,-30.56 l 0.74,-0.75" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path514"></path>
                                <path d="m 2500.23,3494.25 c 6.28,7.68 14.36,13.87 23.38,17.99 l -0.36,0.61 c -9.24,-3.99 -17.28,-10.19 -23.53,-18.08 l 0.51,-0.52" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path516"></path>
                                <path d="m 2513,3496.61 c 9.64,7.96 20.35,14.26 31.75,19.34 l -0.22,0.53 c -11.82,-4.26 -22.68,-11.03 -32.08,-19.32 l 0.55,-0.55" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path518"></path>
                                <path d="m 2282.27,3487.26 c 0.32,3.82 -1.78,7.18 -3.67,10.34 -2.06,3.43 -4.3,6.75 -6.91,9.78 -4.89,5.7 -11.18,10.36 -18.67,11.82 l -0.25,-0.87 c 6.97,-1.83 12.9,-6.16 17.54,-11.56 2.4,-2.8 4.48,-5.86 6.37,-9.02 1.89,-3.16 4.3,-6.66 4.01,-10.49 -0.07,-1.02 1.49,-1.01 1.58,0" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path520"></path>
                                <path d="m 2277.93,3509.26 c 2.62,-2.84 4.8,-6.02 6.6,-9.44 1.82,-3.46 2.9,-7.09 4.14,-10.76 l 0.67,0.09 c -0.34,3.87 -1.85,7.74 -3.6,11.18 -1.82,3.58 -4.23,6.84 -7.01,9.73 l -0.8,-0.8" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path522"></path>
                                <path d="m 2248.19,3516.76 c 5.12,-2.47 9.79,-5.87 13.74,-9.95 4.01,-4.14 6.96,-8.93 9.6,-14.02 l 0.63,0.27 c -3.62,10.95 -13.02,20.05 -23.28,24.86 l -0.69,-1.16" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path524"></path>
                                <path d="m 2212.4,3524.29 c 10.03,-7.2 17.27,-17.04 22.36,-28.19 l 0.78,0.33 c -4,11.76 -12.39,21.92 -22.42,29.08 l -0.72,-1.22" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path526"></path>
                                <path d="m 2206.89,3522.72 c 8.81,-6.82 15.36,-15.6 20.43,-25.44 l 0.83,0.34 c -4.17,10.36 -11.73,19.29 -20.57,25.99 l -0.69,-0.89" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path528"></path>
                                <path d="m 2196.4,3521.79 c 10.22,-5.23 18.42,-13.99 23.1,-24.48 l 0.86,0.36 c -4.13,11.08 -12.62,20.2 -23.35,25.17 l -0.61,-1.05" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path530"></path>
                                <path d="m 2257.67,2952.07 c 6.05,0 6.06,9.4 0,9.4 -6.05,0 -6.06,-9.4 0,-9.4" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path532"></path>
                                <path d="m 2643.54,3410.61 c 7.06,-1.72 14.33,-1.9 21.47,-0.61 6.92,1.25 14.21,3.92 18.72,9.56 0.7,0.87 0.09,2.52 -1.2,2.08 -6.12,-2.09 -11.93,-5.05 -18.28,-6.48 -6.4,-1.44 -13.07,-1.47 -19.48,-0.11 -2.89,0.62 -4.13,-3.73 -1.23,-4.44" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path534"></path>
                                <path d="m 2661.15,3397.12 c 8.75,-0.28 17.6,0.98 25.91,3.76 8.15,2.73 16.68,6.86 22.08,13.72 1.75,2.23 -0.36,5.1 -3.01,3.9 -7.24,-3.29 -13.99,-7.38 -21.62,-9.84 -7.58,-2.44 -15.41,-3.5 -23.36,-3.2 -5.36,0.2 -5.36,-8.16 0,-8.34" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path536"></path>
                                <path d="m 2473.88,3352.88 c 0,0 95.61,-36.18 138.7,-15.58 45.39,21.73 72.48,51.79 72.48,51.79 0,0 -47.66,39.6 -83.17,40.73 -35.5,1.14 -71.95,-9.05 -82.23,-19.23 -10.28,-10.19 -45.78,-57.71 -45.78,-57.71" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path538"></path>
                                <path d="m 2626.12,3380.38 c 0,-24.82 -19.41,-44.94 -43.35,-44.94 -23.94,0 -43.36,20.12 -43.36,44.94 0,24.82 19.42,44.94 43.36,44.94 23.94,0 43.35,-20.12 43.35,-44.94" style="fill:#4a2717;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path540"></path>
                                <path d="m 2562.27,3388.39 c 0,-4.08 -2.73,-7.38 -6.1,-7.38 -3.37,0 -6.1,3.3 -6.1,7.38 0,4.08 2.73,7.38 6.1,7.38 3.37,0 6.1,-3.3 6.1,-7.38" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path542"></path>
                                <path d="m 2474.17,3349.32 c 23.37,43.02 70.03,77.2 120.61,72.33 13.81,-1.34 27.74,-5.46 40.11,-11.72 10.87,-5.5 20.61,-13.04 31.69,-18.13 16.66,-7.66 37.31,-8.51 49.47,7.19 3.28,4.22 -1.84,9.8 -6.01,6.01 -23.74,-21.6 -51.13,6.68 -72.93,16.96 -21.23,10.02 -44.79,13.51 -68.01,10.08 -46.72,-6.89 -79.62,-38.86 -100.35,-79.55 -1.83,-3.59 3.49,-6.75 5.42,-3.17" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path544"></path>
                                <path d="m 2476.97,3364.49 c 21.58,31.02 50.35,59.82 88.74,67.29 20.78,4.04 40.37,-0.13 58.65,-10.46 16.82,-9.52 32.22,-23.03 49.92,-30.79 3.48,-1.53 7.68,2.67 4.4,5.72 -8.07,7.49 -18.1,13.03 -27.25,19.12 -9.2,6.12 -18.32,12.55 -28.28,17.4 -18.22,8.88 -38.11,11.47 -58.02,7.52 -40.08,-7.94 -70.36,-40.9 -90.29,-74.55 -0.82,-1.39 1.23,-2.53 2.13,-1.25" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path546"></path>
                                <path d="m 2481.66,3400.54 c -1.7,0 -3.32,1.64 -2.11,3.45 12.8,19.06 30.49,34.4 51.45,43.84 14.43,6.5 30.75,11.15 46.86,11.15 6.64,0 13.24,-0.79 19.66,-2.57 3.05,-0.84 2.33,-5.32 -0.72,-5.39 -21.39,-0.57 -42.23,-2.01 -62.22,-10.36 -19.93,-8.33 -37.98,-21.71 -50.89,-39.09 -0.54,-0.73 -1.29,-1.03 -2.03,-1.03" style="fill:#f28564;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path548"></path>
                                <path d="m 2657.47,3426.49 c -0.33,0 -0.67,0.07 -1,0.23 -6.45,3.06 -12.02,7.77 -18.2,11.37 -6.18,3.6 -12.78,6.33 -19.68,8.23 -3.32,0.91 -2.21,5.54 0.84,5.54 0.21,0 0.44,-0.02 0.67,-0.07 7.55,-1.57 14.85,-4.14 21.75,-7.6 6.77,-3.4 13.74,-7.82 17.54,-14.56 0.91,-1.61 -0.39,-3.14 -1.92,-3.14" style="fill:#f28564;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path550"></path>
                                <path d="m 2597.48,3326.22 c 25.91,5.66 52.31,18.6 70.37,38.38 l -0.47,0.47 c -10.14,-8.97 -20.53,-17.3 -32.47,-23.82 -11.83,-6.46 -24.53,-11.17 -37.68,-14.11 l 0.25,-0.92" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path552"></path>
                                <path d="m 2568.42,3323.94 c 7,-1.23 14.51,-1.63 21.42,0.21 l -0.07,0.58 c -7.09,-0.61 -14.05,-1.06 -21.12,0.07 l -0.23,-0.86" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path554"></path>
                                <path d="m 2522.69,3408.28 c 8.61,6.3 17.99,11.52 27.95,15.37 4.83,1.87 9.76,3.42 14.78,4.67 5.15,1.28 10.56,1.78 15.63,3.27 2.1,0.61 1.66,3.71 -0.51,3.78 -5.23,0.17 -10.79,-1.33 -15.81,-2.66 -5.33,-1.41 -10.55,-3.21 -15.63,-5.33 -10.04,-4.18 -19.46,-9.63 -28.08,-16.24 -1.65,-1.27 -0.07,-4.13 1.67,-2.86" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path556"></path>
                                <path d="m 2601.34,3428.96 c 4.95,-1.05 9.94,-2.53 14.66,-4.36 2.29,-0.89 4.54,-1.91 6.72,-3.03 2.26,-1.15 4.48,-2.98 7.09,-2.95 1.11,0.01 1.65,1.16 1.2,2.08 -1.17,2.35 -3.93,3.38 -6.19,4.48 -2.45,1.19 -4.96,2.27 -7.52,3.22 -2.47,0.91 -4.99,1.7 -7.53,2.36 -2.63,0.68 -5.32,0.99 -8,1.32 -1.78,0.21 -2.16,-2.75 -0.43,-3.12" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path558"></path>
                                <path d="m 2582.53,3344.31 c 5.86,0.63 11.48,2.45 16.52,5.53 2.41,1.47 4.75,3.2 6.66,5.29 1.95,2.12 4.01,4.58 4.28,7.55 0.11,1.16 -1.26,1.64 -2.13,1.22 -2.25,-1.08 -3.98,-3.18 -5.89,-4.75 -1.86,-1.54 -3.8,-3.01 -5.88,-4.25 -4.12,-2.46 -8.8,-4.09 -13.56,-4.55 -1.62,-0.16 -3.02,-1.28 -3.02,-3.03 0,-1.49 1.39,-3.19 3.02,-3.01" style="fill:#623417;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path560"></path>
                                <path d="m 2617.83,3372.43 c 0.58,2.17 0.96,4.38 1.22,6.61 0.12,0.97 0.24,1.98 0.25,2.96 l -0.13,1.49 -0.81,2.13 c -0.61,0.96 -2.18,1.38 -3,0.39 l -1.04,-1.44 -0.52,-1.51 -0.65,-2.58 c -0.47,-1.76 -1.08,-3.48 -1.78,-5.16 l 0.35,0.83 -0.42,-0.97 c -0.41,-0.92 -0.59,-1.76 -0.36,-2.75 0.24,-1.08 1.09,-1.91 2.07,-2.32 1.93,-0.81 4.27,0.23 4.82,2.32" style="fill:#623417;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path562"></path>
                                <path d="m 2290.24,3352.88 c 0,0 -95.62,-36.18 -138.7,-15.58 -45.4,21.73 -72.48,51.79 -72.48,51.79 0,0 47.66,39.6 83.17,40.73 35.5,1.14 71.95,-9.05 82.22,-19.23 10.29,-10.19 45.79,-57.71 45.79,-57.71" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path564"></path>
                                <path d="m 2138,3380.38 c 0,-24.82 19.4,-44.94 43.35,-44.94 23.94,0 43.35,20.12 43.35,44.94 0,24.82 -19.41,44.94 -43.35,44.94 -23.95,0 -43.35,-20.12 -43.35,-44.94" style="fill:#4a2717;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path566"></path>
                                <path d="m 2201.85,3388.39 c 0,-4.08 2.73,-7.38 6.1,-7.38 3.37,0 6.09,3.3 6.09,7.38 0,4.08 -2.72,7.38 -6.09,7.38 -3.37,0 -6.1,-3.3 -6.1,-7.38" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path568"></path>
                                <path d="m 2295.37,3352.49 c -20.74,40.69 -53.64,72.66 -100.35,79.55 -22.52,3.33 -45.39,0.17 -66.11,-9.22 -22.32,-10.12 -50.67,-39.81 -74.84,-17.82 -4.16,3.79 -9.28,-1.78 -6,-6.01 12,-15.5 32.21,-14.84 48.79,-7.48 10.73,4.76 20.15,11.97 30.51,17.44 12.89,6.81 27.42,11.3 41.97,12.7 50.58,4.87 97.23,-29.3 120.6,-72.33 1.94,-3.58 7.26,-0.42 5.43,3.17" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path570"></path>
                                <path d="m 2289.27,3365.74 c -19.92,33.65 -50.21,66.61 -90.29,74.55 -19.29,3.83 -38.68,1.56 -56.48,-6.8 -9.99,-4.69 -19.07,-10.98 -28.23,-17.07 -9.66,-6.42 -20.32,-12.27 -28.83,-20.17 -3.26,-3.03 0.88,-7.26 4.4,-5.72 17.7,7.76 33.09,21.27 49.93,30.79 18.26,10.33 37.85,14.5 58.64,10.46 38.39,-7.47 67.15,-36.27 88.73,-67.29 0.9,-1.28 2.95,-0.14 2.13,1.25" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path572"></path>
                                <path d="m 2282.46,3400.54 c -0.74,0 -1.49,0.3 -2.03,1.03 -12.92,17.38 -30.96,30.76 -50.9,39.09 -19.99,8.35 -40.82,9.79 -62.21,10.36 -3.09,0.07 -3.75,4.56 -0.73,5.39 6.42,1.78 13.03,2.57 19.68,2.57 16.1,0 32.44,-4.64 46.85,-11.15 20.96,-9.47 38.63,-24.77 51.44,-43.84 1.22,-1.82 -0.4,-3.45 -2.1,-3.45" style="fill:#f28564;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path574"></path>
                                <path d="m 2106.64,3426.49 c -1.53,0 -2.82,1.53 -1.91,3.14 3.81,6.74 10.77,11.16 17.54,14.56 6.89,3.46 14.2,6.03 21.74,7.6 0.24,0.05 0.46,0.07 0.67,0.07 3.06,0 4.16,-4.63 0.85,-5.54 -6.91,-1.9 -13.5,-4.63 -19.69,-8.23 -6.18,-3.6 -11.74,-8.31 -18.2,-11.37 -0.33,-0.16 -0.67,-0.23 -1,-0.23" style="fill:#f28564;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path576"></path>
                                <path d="m 2166.89,3327.14 c -13.15,2.94 -25.85,7.65 -37.68,14.11 -11.94,6.52 -22.33,14.85 -32.48,23.82 l -0.47,-0.47 c 18.07,-19.78 44.47,-32.72 70.38,-38.38 l 0.25,0.92" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path578"></path>
                                <path d="m 2195.46,3324.8 c -7.07,-1.13 -14.02,-0.68 -21.1,-0.07 l -0.08,-0.58 c 6.91,-1.84 14.42,-1.44 21.41,-0.21 l -0.23,0.86" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path580"></path>
                                <path d="m 2243.1,3411.14 c -8.63,6.61 -18.05,12.06 -28.08,16.24 -4.93,2.05 -9.99,3.81 -15.15,5.2 -5.15,1.4 -10.91,2.96 -16.3,2.79 -2.15,-0.07 -2.62,-3.16 -0.5,-3.78 5.06,-1.49 10.47,-1.99 15.63,-3.27 5.01,-1.25 9.95,-2.8 14.78,-4.67 9.95,-3.85 19.33,-9.07 27.95,-15.37 1.73,-1.27 3.33,1.59 1.67,2.86" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path582"></path>
                                <path d="m 2162.35,3432.08 c -2.59,-0.31 -5.22,-0.61 -7.76,-1.26 -2.64,-0.67 -5.22,-1.48 -7.77,-2.42 -2.48,-0.92 -4.93,-1.96 -7.31,-3.12 -2.3,-1.11 -5.21,-2.17 -6.4,-4.58 -0.46,-0.92 0.09,-2.07 1.2,-2.08 2.61,-0.03 4.82,1.8 7.09,2.95 2.18,1.12 4.42,2.14 6.72,3.03 4.72,1.83 9.7,3.31 14.65,4.36 1.72,0.37 1.37,3.33 -0.42,3.12" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path584"></path>
                                <path d="m 2181.58,3350.35 c -4.75,0.46 -9.44,2.09 -13.56,4.55 -2.02,1.2 -3.9,2.63 -5.73,4.12 -1.96,1.6 -3.73,3.77 -6.03,4.88 -0.88,0.42 -2.25,-0.06 -2.14,-1.22 0.27,-2.91 2.26,-5.32 4.14,-7.4 1.95,-2.16 4.33,-3.92 6.81,-5.44 5.03,-3.09 10.66,-4.9 16.51,-5.53 1.62,-0.18 3.02,1.51 3.02,3.01 0,1.77 -1.39,2.87 -3.02,3.03" style="fill:#623417;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path586"></path>
                                <path d="m 2152.81,3375.18 -0.42,0.97 0.35,-0.83 c -0.7,1.68 -1.3,3.4 -1.78,5.16 l -0.65,2.58 -0.38,1.21 -1.17,1.74 c -0.83,0.99 -2.39,0.57 -3.01,-0.39 l -0.8,-2.03 -0.14,-1.49 c -0.02,-1.01 0.13,-2.06 0.25,-3.06 0.27,-2.23 0.65,-4.44 1.22,-6.61 0.56,-2.08 2.89,-3.14 4.82,-2.32 l 1.9,1.89 c 0.47,1.12 0.3,2.1 -0.19,3.18" style="fill:#623417;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path588"></path>
                                <path d="m 2123.4,3415.05 c -6.41,-1.36 -13.09,-1.33 -19.47,0.11 -6.35,1.43 -12.17,4.39 -18.29,6.48 -1.29,0.44 -1.9,-1.21 -1.21,-2.08 4.53,-5.65 11.8,-8.31 18.72,-9.56 7.14,-1.29 14.43,-1.11 21.47,0.61 2.9,0.71 1.67,5.06 -1.22,4.44" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path590"></path>
                                <path d="m 2107.02,3405.46 c -7.96,-0.3 -15.79,0.76 -23.37,3.2 -7.62,2.46 -14.37,6.55 -21.61,9.84 -2.64,1.19 -4.77,-1.66 -3.01,-3.9 5.39,-6.86 13.92,-10.99 22.07,-13.72 8.31,-2.78 17.16,-4.04 25.92,-3.76 5.35,0.18 5.37,8.54 0,8.34" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path592"></path>
                                <path d="m 2519.2,3021.59 c -30.27,9.03 -49.08,33.31 -76.83,48.42 -8.3,4.53 -17.78,7.86 -27.12,6.33 -9.7,-1.59 -18.12,-8.25 -27.91,-9.22 -15.21,-1.5 -28.64,13.49 -42.79,7.68 -29.34,-12.05 -46.81,-45.17 -77.15,-54.41 -3.26,-1 -7.79,0.97 -8.76,-2.3 13.71,-5.03 19.19,-22.94 27.32,-35.07 9.56,-14.25 28.94,-44.41 50.49,-53.56 29.81,-12.67 64.18,-11.6 93.86,-1.33 26.87,9.3 47.12,31.8 62.26,55.87 7.64,12.17 13.67,31.39 26.63,37.59" style="fill:#e3382b;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path594"></path>
                                <path d="m 2234.74,3039.53 c -1.29,-3.94 -1.95,-8.15 -1.95,-12.3 0,-2.2 0.23,-4.38 0.57,-6.55 0.4,-2.63 1.46,-5 3.63,-6.62 2.08,-1.56 4.73,0.21 5.46,2.22 0.78,2.16 0.15,4.68 -0.23,6.84 -0.04,0.23 -0.21,1.41 -0.07,0.35 l -0.14,1.18 c -0.09,0.93 -0.13,1.85 -0.15,2.78 -0.02,1.72 0.06,3.43 0.28,5.14 -0.13,-1.04 0.08,0.37 0.12,0.57 l 0.26,1.37 c 0.2,0.9 0.44,1.79 0.71,2.68 0.66,2.21 -0.8,4.9 -3.07,5.42 -2.43,0.55 -4.66,-0.73 -5.42,-3.08" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path596"></path>
                                <path d="m 2240.21,3024.58 c 17.91,-11.86 37.48,-14.04 58.44,-12.16 20.9,1.88 41.56,5.53 62.07,-0.93 5.08,-1.59 7.24,6.35 2.2,7.95 -39.44,12.55 -81.73,-11.06 -119.05,11.4 -4.04,2.42 -7.52,-3.7 -3.66,-6.26" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path598"></path>
                                <path d="m 2369.16,3009.58 c 6.62,-4.51 13.99,-7.2 22.04,-7.36 3.76,-0.08 7.65,0.4 11.24,1.55 3.87,1.24 7.14,3.7 9.88,6.66 2.51,2.72 -0.78,7.62 -4.14,5.36 -10.99,-7.41 -25.12,-5.94 -36.88,-1.15 -3.07,1.25 -4.56,-3.4 -2.14,-5.06" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path600"></path>
                                <path d="m 2417.78,3017.09 c 22.5,0.81 45.16,-3.1 67.69,-3.28 12.68,-0.1 25.63,0.39 38.04,3.23 9.52,2.18 20.35,5.75 24.93,15.04 1.8,3.66 -2.4,6.68 -5.47,4.21 -17.28,-13.94 -41.52,-14.51 -62.72,-14.55 -20.81,-0.04 -41.71,3.35 -62.47,2.6 -4.65,-0.17 -4.67,-7.42 0,-7.25" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path602"></path>
                                <path d="m 2536.97,3042.22 c 0.62,-3.11 1.96,-6.21 3.81,-8.78 1.05,-1.45 2.17,-2.86 3.49,-4.07 1.66,-1.52 3.81,-2.4 5.93,-3.1 l 1.35,-0.18 1.98,0.44 c 0.98,0.42 1.93,1.13 2.44,2.1 0.43,0.8 0.66,1.67 0.7,2.58 0.05,1.14 -0.59,2.87 -1.49,3.61 l -1.43,1.28 -0.63,0.67 -1.75,1.5 1.16,-0.9 c -1.27,1.01 -2.41,2.16 -3.41,3.45 l 0.88,-1.13 c -0.99,1.29 -1.81,2.69 -2.45,4.18 l 0.55,-1.3 -0.84,2.48 c -0.36,1.29 -1.3,2.51 -2.46,3.19 -1.14,0.67 -2.83,0.95 -4.11,0.53 -1.29,-0.42 -2.53,-1.21 -3.18,-2.45 -0.69,-1.32 -0.83,-2.63 -0.54,-4.1" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path604"></path>
                                <path d="m 2366.34,3077.63 c 6.51,-2.63 13.91,-3.94 20.94,-3.21 3.48,0.37 6.94,1.04 10.27,2.14 3.68,1.22 6.6,2.97 9.52,5.51 1.66,1.44 -0.1,4.56 -2.2,3.77 -3.05,-1.15 -6.2,-2.23 -9.3,-3.23 -2.9,-0.94 -5.89,-1.58 -8.92,-1.88 -6.46,-0.62 -12.73,-0.13 -18.92,1.97 -3.26,1.1 -4.45,-3.84 -1.39,-5.07" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path606"></path>
                                <path d="m 2371.6,2899.53 c 8.51,4.14 17.96,5.91 27.39,5.4 4.59,-0.24 9.17,-1.07 13.6,-2.31 2.29,-0.65 4.53,-1.47 6.77,-2.29 2.04,-0.74 4.26,-1.97 6.48,-1.69 1.69,0.2 2.5,1.61 1.83,3.17 -1.81,4.2 -8.78,6.28 -12.75,7.57 -5.14,1.67 -10.53,2.51 -15.93,2.69 -10.64,0.35 -21.21,-2.06 -30.68,-6.91 -3.75,-1.93 -0.45,-7.45 3.29,-5.63" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path608"></path>
                                <path d="m 2388.64,2937.67 c 10.87,-0.92 21.99,0.92 32.04,5.1 5.36,2.23 10.04,5.07 14.6,8.65 2.07,1.62 4.08,3.35 5.91,5.24 2.07,2.12 3.38,4.67 4.67,7.32 1.52,3.16 -1.76,7.4 -5.18,5.18 -1.99,-1.3 -4.18,-2.33 -6.05,-3.79 -1.9,-1.47 -3.82,-2.88 -5.86,-4.15 -3.88,-2.41 -8.13,-4.53 -12.34,-6.14 -9.14,-3.49 -18.07,-4.67 -27.79,-3.64 -3.7,0.4 -6.88,-3.45 -6.88,-6.88 0,-3.99 3.16,-6.58 6.88,-6.89" style="fill:#d72e25;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path610"></path>
                                <path d="m 2465.25,2976.12 c 3.68,4.42 7.34,8.84 11.01,13.25 0.79,0.96 1.34,1.96 1.34,3.25 0,1.13 -0.5,2.47 -1.34,3.24 -0.88,0.81 -2.03,1.41 -3.25,1.35 -1.15,-0.05 -2.48,-0.42 -3.24,-1.35 -3.68,-4.41 -7.34,-8.83 -11.01,-13.24 -0.79,-0.96 -1.34,-1.96 -1.34,-3.25 0,-1.13 0.5,-2.47 1.34,-3.25 0.88,-0.8 2.03,-1.4 3.25,-1.34 1.15,0.05 2.48,0.42 3.24,1.34" style="fill:#d72e25;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path612"></path>
                                <path d="m 2314.68,3034.83 c 5.62,4.32 11.27,8.61 16.87,12.94 4.91,3.79 9.85,8.09 15.89,9.92 6.1,1.83 12.43,0.43 18.53,-0.6 4.92,-0.83 12.26,-2.79 16.66,0.38 1.75,1.26 1.88,4.54 -0.67,5.05 -2.98,0.6 -5.98,-0.17 -9.02,-0.06 -3.32,0.12 -6.58,0.68 -9.87,1.14 -6.11,0.87 -12.3,1.35 -18.2,-0.84 -5.65,-2.1 -10.42,-5.86 -15.03,-9.66 -5.96,-4.91 -11.8,-9.98 -17.7,-14.98 -1.79,-1.52 0.64,-4.74 2.54,-3.29" style="fill:#f26276;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path614"></path>
                                <path d="m 2412.57,3060.78 c 1.98,0.53 3.96,0.81 6.02,0.81 1.05,0 2.09,-0.07 3.14,-0.19 0.84,-0.09 1.69,-0.19 2.81,-0.42 1.02,-0.22 2.03,-0.49 3.03,-0.81 1,-0.34 1.68,-0.61 2.45,-0.98 2.16,-1.05 4.18,-2.53 6.36,-2.85 1.75,-0.27 4.04,1.14 3.24,3.24 -1.02,2.63 -3.41,4.38 -5.93,5.52 -2.36,1.07 -4.8,1.91 -7.37,2.35 -5.1,0.87 -10.33,0.28 -15.11,-1.72 -1.28,-0.54 -2.2,-1.7 -1.8,-3.16 0.38,-1.35 1.82,-2.15 3.16,-1.79" style="fill:#f26276;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path616"></path>
                                <path d="m 2612.82,2699.65 c 29.34,-86.82 50.46,-179.08 37.41,-269.8 -12.93,-89.94 -58.22,-171.34 -93.85,-254.94 -35.64,-83.59 -68.26,-180.06 -41.89,-267.01 -18.13,59.16 -38.77,122.08 -87.41,160.31 -41.31,32.46 -97.04,42.08 -138.33,74.56 -26.96,21.22 -45.97,50.82 -62.55,80.86 -33.93,61.49 -59.82,127.01 -85.61,192.33 -17.71,44.83 -35.6,90.4 -40.25,138.38 -4.65,47.98 5.62,99.55 38.19,135.09 -36.66,-7.26 -80.55,-33.69 -107.13,-59.96 -26.59,-26.27 -47.43,-57.72 -66.9,-89.61 -7.53,-12.34 -15,-24.92 -25.28,-35.07 -22.72,-22.44 -55.75,-30.03 -86.98,-36.67 -45.39,-217.01 2.36,-435.63 -9.57,-657 -4.69,-87.08 -17.93,-173.98 -13.7,-261.08 7.24,-148.83 64.77,-289.78 110.32,-431.64 37.15,-115.71 66.91,-234.4 118.28,-344.529 51.37,-110.133 127.48,-213.301 234.45,-270.973 38.27,-20.617 81.18,-35.238 124.56,-32.406 80.2,5.219 143.92,66.918 198.08,126.309 137.41,150.66 265.66,314.148 341.96,503.249 71.35,176.83 94.5,369.08 108.57,559.25 9.01,121.95 14.57,244.27 11.6,366.53 -1.33,54.24 -4.41,108.94 -18.79,161.25 -34.22,124.45 -129.09,130.89 -164.62,254.97 -17.34,60.57 -73.64,73.65 -155.7,170.44 -11.4,13.44 -36.99,31.43 -50.66,42.56 -7.89,6.44 -13.58,15.14 -20.63,22.5 -13.3,13.88 -34.44,20.19 -53.57,22.1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path618"></path>
                                <path d="m 2514.67,1902.16 c 13.21,-39.99 18.04,-82.13 19.49,-124.06 0.72,-20.88 0.68,-41.8 0.61,-62.69 -0.04,-10.33 -0.1,-20.66 -0.16,-30.99 -0.05,-10.62 -0.81,-21.57 0.88,-32.08 0.4,-2.47 4.55,-2.45 4.97,0 1.82,10.5 1.17,21.46 1.24,32.08 0.07,11.11 0.15,22.2 0.19,33.3 0.1,20.91 -0.02,41.81 -1.01,62.69 -1.96,41.81 -7.42,83.45 -21.56,123.03 -1.03,2.89 -5.64,1.69 -4.65,-1.28" style="fill:#d8d5d3;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path620"></path>
                                <path d="m 2535.84,1611.22 c -12.28,-92.15 -18.84,-184.72 -22.08,-277.6 -3.22,-92.29 -3.35,-184.81 1.15,-277.06 2.56,-52.21 4.41,-104.869 10.4,-156.818 0.3,-2.594 4.28,-2.742 4.16,0 -2.08,46.117 -6.18,92.117 -7.74,138.278 -1.57,46.56 -2.6,93.16 -2.84,139.74 -0.5,92.38 2.1,184.77 8.15,276.95 3.42,52.18 7.08,104.38 11.38,156.51 0.13,1.68 -2.37,1.59 -2.58,0" style="fill:#d8d5d3;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path622"></path>
                                <path d="m 2343.91,2019.77 c 21.52,-100.97 25.14,-204.23 26.52,-307.09 1.42,-105.36 2.06,-210.72 3.69,-316.07 0.46,-29.85 0.92,-59.71 1.39,-89.56 0.46,-29.75 -0.46,-59.91 1.9,-89.57 0.23,-2.81 4.25,-2.86 4.41,0 1.44,26.41 0.01,53.16 -0.24,79.62 -0.25,26.53 -0.51,53.08 -0.76,79.61 -0.52,53.5 -1.24,106.98 -1.99,160.48 -1.47,104.21 -0.66,208.78 -7.88,312.8 -4,57.41 -11.49,114.31 -25.68,170.15 l -1.36,-0.37" style="fill:#d8d5d3;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path624"></path>
                                <path d="m 2371.31,1179.65 c 1.44,-52.93 2.28,-105.92 2.18,-158.87 -0.06,-26.479 -0.36,-52.971 -0.8,-79.448 -0.44,-26.383 -2.37,-53.09 -0.44,-79.434 0.13,-1.808 3.14,-2.527 3.42,-0.449 2.72,19.852 2.7,40.012 3.07,60.02 0.38,20.691 0.64,41.383 0.7,62.07 0.13,41.791 -0.1,83.591 -1.08,125.381 -0.55,23.57 -1.37,47.15 -2.32,70.73 -0.11,3.04 -4.82,3.06 -4.73,0" style="fill:#d8d5d3;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path626"></path>
                                <path d="m 2441.03,1666.87 c -4.46,-7.17 -6.13,-16.6 -2.93,-24.59 2.94,-7.37 9.92,-12.6 17.84,-13.26 8.83,-0.72 15.9,5.61 19.89,12.91 4.02,7.35 5.76,17.57 0.45,24.78 -2.49,3.39 -6.17,5.94 -10.29,6.87 -2.18,0.5 -4.35,0.6 -6.53,0.13 -2.17,-0.48 -4.68,-2.23 -5.08,-4.56 1.23,0.5 2.45,1 3.68,1.49 -1.57,0.91 -3.47,1.01 -4.83,-0.34 -1.3,-1.3 -1.39,-3.38 -0.28,-4.8 2.66,-3.45 7.44,-0.18 6.25,3.65 -1.03,-1.03 -2.04,-2.05 -3.07,-3.08 0.93,-0.23 1.6,-0.13 2.57,-0.08 l 1.52,0.05 0.67,0.12 0.8,0.05 2.04,-0.01 0.41,-0.09 1.02,-0.24 1.26,-0.45 c 1.27,-0.59 2.24,-1.26 3.08,-2.07 4.2,-4.11 3.54,-11.31 1.25,-16.52 -2.4,-5.48 -6.95,-11.42 -13.46,-11.59 -5.43,-0.14 -10.89,2.94 -13.65,7.62 -4,6.78 -2.75,15.31 1.05,21.88 1.37,2.37 -2.23,4.45 -3.66,2.13" style="fill:#d8d5d3;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path628"></path>
                                <path d="m 2445.49,1235.25 c -5.47,-7.13 -7.63,-17.32 -3.5,-25.6 3.8,-7.64 12.83,-12.62 21.25,-9.87 8.1,2.63 13.68,10.82 13.79,19.25 0.12,8.98 -5.39,17.09 -12.59,22.04 -3.45,2.38 -7.84,3.86 -12.07,3.45 -4.61,-0.45 -9.93,-3.45 -8.68,-8.88 0.42,-1.82 3.02,-3.09 4.64,-1.88 l 1.68,1.31 0.16,0.26 0.6,0.42 2.22,0.82 c 2.51,0.14 4.48,-0.42 6.59,-1.7 4.97,-3 9.23,-8.3 9.87,-14.23 0.59,-5.4 -2.24,-11.07 -7.18,-13.52 -4.98,-2.47 -10.93,0.19 -14.04,4.39 -4.81,6.51 -2.77,15.09 1.71,21.15 0.84,1.12 0.18,2.86 -0.92,3.52 -1.31,0.79 -2.68,0.18 -3.53,-0.93" style="fill:#d8d5d3;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path630"></path>
                                <path d="m 2518.39,1998.27 c 10.41,27.87 21.79,55.41 34.19,82.46 11.28,24.6 22.56,50.73 38.14,72.97 7.23,10.32 16.7,19.85 29.13,23.41 12.62,3.61 26.28,0.67 37.67,-5.37 23.86,-12.67 39.2,-38.35 53.67,-60.2 8.14,-12.28 15.91,-24.82 22.3,-38.12 6.84,-14.28 11.3,-29.14 14.59,-44.6 0.55,-2.63 4.94,-2.09 4.73,0.64 -2.15,28.91 -16.58,56.23 -31.67,80.39 -14.31,22.93 -30.16,48.75 -53,64.11 -22.01,14.8 -50.27,16.31 -70.6,-2.04 -9.06,-8.18 -15.75,-18.79 -21.63,-29.39 -7.72,-13.91 -14.81,-28.19 -21.67,-42.54 -15.62,-32.63 -29.23,-66.07 -40.67,-100.39 -1.02,-3.08 3.72,-4.3 4.82,-1.33" style="fill:#d8d5d3;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path632"></path>
                                <path d="m 2808.17,2476.82 c 40.48,-113.48 38.9,-241.39 -3.14,-354.18 -11.98,-32.14 -26.78,-62.94 -45.07,-91.98 -1.81,-2.87 2.7,-5.45 4.53,-2.64 66.88,102.64 93.32,229.17 74.36,350.14 -5.36,34.22 -14.47,67.4 -27.07,99.65 -0.86,2.21 -4.43,1.3 -3.61,-0.99" style="fill:#d8d5d3;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path634"></path>
                                <path d="m 2671,2602.49 c 38.75,-95.87 39.68,-206.29 2.49,-302.76 -10.62,-27.53 -24.51,-53.69 -41.03,-78.11 -2.44,-3.61 3.37,-6.94 5.81,-3.41 59.98,86.68 82.66,198.77 62.55,302.12 -5.61,28.82 -14.72,56.69 -26.93,83.38 -0.75,1.6 -3.57,0.45 -2.89,-1.22" style="fill:#d8d5d3;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path636"></path>
                                <path d="m 2471.7,1995.96 c -21.55,16.29 -36.85,38.89 -56.5,57.16 -9.4,8.74 -19.78,16.55 -31.44,21.99 -14.07,6.56 -28.62,7.75 -43.59,10.92 -17.78,3.76 -35.11,9.95 -51.36,18.04 -15.54,7.76 -29.28,20.15 -45.86,25.58 -32.88,10.76 -64.21,-15.11 -84.34,-38.2 -24.35,-27.96 -43.38,-63.74 -48.44,-100.78 -0.42,-3.07 3.99,-4.54 4.81,-1.32 8.29,32.62 20.62,63.2 41.56,89.88 19.25,24.52 51.52,56.25 85.82,44.24 8.02,-2.81 15.08,-7.68 22.12,-12.3 7.45,-4.89 15.19,-9.3 23.22,-13.19 14.3,-6.94 29.35,-12.5 44.81,-16.28 14.57,-3.57 29.67,-4.16 43.73,-9.71 12.33,-4.86 23.31,-12.56 33.1,-21.4 20.76,-18.77 37.42,-41.72 60.26,-58.22 2.19,-1.58 4.2,2 2.1,3.59" style="fill:#d8d5d3;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path638"></path>
                                <path d="m 1970.5,2481.55 c 11.03,-72.97 22.08,-145.94 33.88,-218.8 5.9,-36.4 11.8,-72.8 17.7,-109.2 5.16,-31.81 9.01,-64.24 17.03,-95.5 7.3,-28.43 19.59,-56.64 44.36,-73.96 2.91,-2.04 6.62,2.7 3.82,4.96 -21.6,17.57 -33.09,42.87 -39.99,69.31 -7.78,29.83 -11.46,60.82 -16.49,91.19 -11.75,71.09 -23.52,142.17 -35.67,213.18 -6.86,39.98 -13.92,79.91 -20.96,119.84 -0.43,2.44 -4.05,1.38 -3.68,-1.02" style="fill:#d8d5d3;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path640"></path>
                                <path d="m 2062.7,2585.02 c 3.24,-45.28 11.68,-90.1 25.44,-133.38 6.8,-21.38 14.87,-42.35 24.04,-62.84 4.53,-10.14 9.36,-20.14 14.48,-29.99 5.1,-9.82 10.03,-20.59 17.69,-28.68 1,-1.07 2.97,0.03 2.5,1.45 -3.31,9.93 -9.37,18.91 -14.27,28.12 -5.23,9.79 -10.16,19.74 -14.8,29.82 -9.49,20.65 -17.67,41.88 -24.59,63.52 -13.7,42.82 -22.44,87.17 -25.92,131.98 -0.23,2.92 -4.79,2.95 -4.57,0" style="fill:#d8d5d3;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path642"></path>
                                <path d="M 3426.69,-27.6211 C 3287.36,-106.5 3196.8,-53.9609 3037.68,-71.8008 2482.56,-134 2025.97,-107.148 1477.02,-3.82031 c 10.09,42.58201 20.19,85.16011 30.27,127.74231 4.81,20.269 11.34,37.387 15.57,57.789 -32.97,15.437 -172.21,14.43 -199.83,38.129 -11.29,9.691 -17.99,23.539 -24.23,37.039 -53.95,116.851 -96.12,238.723 -138.21,360.34 -23.87,68.961 -47.81,138.211 -61.73,209.863 -32.95,169.648 -6.04,344.278 18.54,515.338 -19.49,43.92 -27.6,92.84 -23.3,140.7 2.33,25.93 8.22,51.95 4.59,77.72 -5.72,40.53 -34.41,75.92 -35.76,116.83 -1.1,33.66 16.58,65.1 20.67,98.53 4.13,33.69 -5.68,67.32 -10.07,100.98 -4.96,37.99 -2.97,76.86 5.84,114.15 9.45,39.96 26.54,77.71 37.58,117.26 11.64,41.71 16.49,85.16 29.45,126.47 17.17,54.77 48.71,104.97 90.59,144.22 19.02,17.81 40.48,33.6 64.99,42.43 44.75,16.12 94,7.59 141.55,6.38 41.15,-1.06 82.21,3.55 123.12,8.15 91.55,10.29 183.12,20.59 274.67,30.88 28.66,3.22 44.7,16.18 69.31,31.22 22.18,-94.05 28.91,-189.5 40.75,-285.4 53,-429.28 178.41,-856.36 236.13,-1285.03 0.73,-5.398 101.96,5.531 148.3,9.399 115.41,9.671 231.07,19.339 346.85,16.75 0,0 87.23,594.941 109.04,794.291 21.81,199.35 87.22,669.68 77.87,738.2 74.08,-16.9 137.21,-73.37 209.36,-97.2 33.69,-11.13 69.2,-15.47 104.52,-18.81 103.31,-9.78 207.38,-11.46 310.95,-5.01 18.07,1.12 36.9,2.37 53.6,-4.59 14.17,-5.91 25.38,-17.2 35.14,-29.05 27.44,-33.28 46.56,-73.35 55.17,-115.61 5.64,-27.66 6.98,-56.64 18.62,-82.35 8.5,-18.78 22.26,-35.21 27.88,-55.04 8.04,-28.36 -1.68,-59.89 8.32,-87.62 5.18,-14.42 15.29,-26.52 21.93,-40.34 32.75,-68.19 -26.05,-153.61 3.81,-223.12 10.76,-25.07 32.9,-48.48 27.55,-75.22 -3.81,-19.04 -21.4,-34.72 -19.71,-54.05 0.85,-9.84 6.65,-18.41 10.62,-27.45 9.48,-21.52 8.34,-47.42 -2.96,-68.03 9.67,-88.85 116.53,-153.02 124.44,-242.04 3.98,-44.77 -15.79,-92.18 1.71,-133.58 8.64,-20.47 25.31,-36.25 38.37,-54.22 32.56,-44.77 42.13,-103.111 36.87,-158.22 -5.25,-55.109 -24.1,-107.93 -44.01,-159.59 -45.2,-117.262 -99.28,-235.719 -192.51,-319.98 -15.83,-14.309 -33.2,-27.778 -53.6,-34 -15.7,-4.801 -32.37,-5.039 -48.77,-5.25 -61.78,-0.789 -186.35,-0.059 -248.13,-0.84 4.59,-88.879 79.57,-391.48844 77.95,-422.9611" style="fill:#cd3e37;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path644"></path>
                                <path d="m 2176.92,678.941 c -73.85,31.551 -151.4,83.43 -227.56,57.93 -57.58,-19.289 -125.67,-2.172 -167.27,42.07 -62.93,66.911 -55.82,175.75 -116.97,244.299 -35.33,4.14 -66.98,-20.53 -93.17,-44.599 -35.8,-32.903 -70.37,-68.02 -95.07,-109.903 -13.34,-22.578 -24.28,-47.687 -44.75,-64.058 -20.48,-16.379 -54.87,-19.469 -70.25,1.761 -1.99,2.731 -3.63,6.008 -3.2,9.36 0.48,3.808 3.45,6.75 6.16,9.469 12.8,12.859 23.38,27.859 31.61,44.039 9.92,19.543 16.35,40.64 24.77,60.89 19.49,46.883 53.19,93.611 82.79,134.871 -59.57,-17.09 -112.6,-56.01 -146.79,-107.699 -21.62,-32.68 -49.46,-65.512 -76.88,-93.512 -27.43,-28 -61.64,-47.8 -92.34,-23.418 -3.75,2.969 -7.38,7.168 -6.8,11.911 0.39,3.269 2.68,5.918 4.86,8.359 54.68,61.34 103.93,127.488 147.02,197.439 10.78,17.52 21.33,35.47 35.91,49.97 15.02,14.94 33.7,25.58 52.31,35.7 21.15,11.5 45.91,21.8 67.53,32.4 -31.17,8.3 -64.05,16.64 -95.26,8.43 -16.55,-4.36 -31.54,-13.14 -46.29,-21.83 -32.28,-18.99 -65.33,-38.66 -88.51,-68.07 -12.27,-15.58 -21.37,-33.42 -33.29,-49.27 -11.92,-15.85 -27.66,-30.16 -47.07,-34.23 -19.4,-4.08 -43.03,3.28 -49.22,22.12 40.76,45.36 56.44,109.46 99.01,153.12 24.93,25.56 57.47,42.38 83.91,66.37 20.17,18.31 38.25,41.65 64.67,48.32 13.83,3.49 28.36,1.88 42.53,0.24 37.42,-4.32 74.53,-6.24 111.95,-10.56 -4.99,27.07 -14.08,53.38 -26.86,77.76 -27.35,52.2 -70.56,94.09 -105.02,141.91 -14.7,20.4 -28.07,42.51 -33.16,67.14 -5.1,24.62 3.22,46.43 20.38,64.82 51.7,-60.15 103.41,-120.29 155.11,-180.45 16.41,-19.08 32.84,-38.2 47.33,-58.78 28.56,-40.52 49.17,-86.07 66.88,-132.37 31.2,0.1 57.99,-15.11 79.21,-37.98 21.22,-22.87 36.51,-50.47 54.15,-76.21 43.3,-63.21 100.72,-115.22 157.58,-166.579 17.47,-15.781 35.08,-31.68 55.34,-43.691 42.31,-25.098 93.03,-31.5 142.2,-32.961 15.15,-82.828 19.64,-151.328 32.52,-234.528" style="fill:#f89f83;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path646"></path>
                                <path d="m 3158.31,984.82 c -4.42,7.84 2.27,16.94 6.99,24.58 10.5,16.99 11.91,37.87 18.18,56.82 9.23,27.93 28.79,51.06 47.9,73.42 35.56,41.61 15.35,104.34 33,156.17 22.05,64.77 77.61,111.08 122.12,163.05 29.75,34.72 55.23,73.1 75.7,113.99 23.99,-3.47 38.07,-33.85 34.28,-57.8 -3.78,-23.96 -19.26,-44.11 -33.21,-63.95 -30.25,-43.02 -55.44,-89.62 -74.88,-138.49 17.28,10.96 28.49,16.82 45.77,27.79 -1.57,-0.87 -3.14,-1.73 -4.73,-2.6 69.33,6.64 143.51,7.38 212.62,-1.18 16.37,-2.03 32.28,-3.2 47.8,-8.75 29.29,-10.45 59.22,-19.07 89.58,-25.8 -9.37,-29.84 -40.36,-44.14 -71.57,-46.12 -31.21,-1.99 -61.71,8.52 -91.21,18.88 -51.53,-5.62 -100.94,-10.48 -151.04,-23.75 -16.34,-4.31 -21.22,-19.01 -29.31,-33.85 21.8,4.41 38.55,10.7 59.61,17.86 55.2,18.76 118.46,-8.73 176.46,-14.64 41.44,-4.22 83.38,-2.83 124.51,3.72 6.89,-22.84 -5.83,-46.37 -25.89,-59.26 -20.08,-12.89 -45.03,-15.58 -68.88,-14.95 -23.85,0.64 -47.68,4.24 -71.48,2.54 -6.2,1.99 -9.91,-1.51 -16.33,-2.61 -41.27,-7.01 -82.4,-14.92 -123.31,-23.74 -28.41,-6.12 -50.28,-29.27 -72.29,-48.23 21.45,8.64 37.89,14.19 59.34,22.83 17.08,6.88 34.37,13.82 52.62,16.31 17.09,2.33 34.47,0.68 51.62,-1.2 51.45,-5.65 102.67,-13.33 153.51,-23.04 0.9,-28.03 -26.66,-44.42 -54.59,-46.9 -27.93,-2.47 -55.82,6.03 -83.84,5.04 -37.33,-1.32 -71.8,-19.19 -107.88,-28.87 -38.12,-10.23 -78.01,-11.29 -117.38,-14.17 -77.32,-5.65 -138.89,-3.06 -213.79,-23.1" style="fill:#f89f83;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path648"></path>
                                <path d="m 1507.32,1174.4 c 10.19,5.37 20.62,10.25 31.3,14.53 5.18,2.08 10.4,4.02 15.68,5.84 2.55,0.87 5.11,1.68 7.65,2.59 2.44,0.88 5.09,1.6 7.03,3.37 0.81,0.73 0.46,2.39 -0.68,2.57 -4.96,0.79 -10.74,-1.97 -15.37,-3.57 -5.64,-1.95 -11.21,-4.05 -16.74,-6.29 -10.71,-4.36 -21.2,-9.25 -31.42,-14.65 -2.89,-1.52 -0.34,-5.91 2.55,-4.39" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path650"></path>
                                <path d="m 1512.92,1074.3 c 21.53,16.07 43.02,32.22 64.76,48.02 10.54,7.67 21.12,15.3 31.73,22.88 5.51,3.93 10.98,7.97 16.62,11.73 6.27,4.18 11.88,5.93 19.34,6.6 1.64,0.13 2.81,2.64 0.95,3.48 -10.37,4.64 -21.56,-4.6 -29.57,-10.24 -12.32,-8.7 -24.57,-17.48 -36.73,-26.4 -23.49,-17.23 -46.81,-34.7 -69.62,-52.81 -1.83,-1.46 0.63,-4.68 2.52,-3.26" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path652"></path>
                                <path d="m 1660.1,1178.69 c 7.21,-1.75 13.68,0.93 20.47,3.15 7.95,2.58 15.82,2.53 23.78,-0.04 7.64,-2.47 14.51,-6.9 20.61,-12.05 5.79,-4.91 10.63,-11.21 17.09,-15.22 1.6,-0.99 3.37,0.95 2.51,2.51 -3.75,6.78 -10.23,12.28 -16.14,17.17 -6.04,4.99 -12.61,9.26 -19.97,11.97 -6.93,2.55 -14.43,3.62 -21.75,2.51 -8.39,-1.29 -16.64,-7.32 -25.32,-5.35 -3.02,0.69 -4.31,-3.92 -1.28,-4.65" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path654"></path>
                                <path d="m 1632.55,1223.13 c 10.26,6.78 22.07,11.01 34.33,12.2 6.05,0.58 12.18,0.47 18.22,-0.36 5.67,-0.79 11.16,-3.1 16.81,-3.62 2.14,-0.2 2.48,2.71 1.01,3.72 -4.83,3.32 -12.03,4.13 -17.72,4.75 -6.47,0.72 -12.99,0.55 -19.43,-0.33 -12.52,-1.71 -24.49,-6.36 -34.81,-13.62 -1.64,-1.15 -0.13,-3.87 1.59,-2.74" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path656"></path>
                                <path d="m 1528.94,1285.7 c 17.55,-5.37 35.09,-10.83 52.64,-16.23 8.62,-2.65 17.27,-5.17 25.9,-7.77 5.92,-1.78 19.37,-3.33 21.25,-10.49 0.7,-2.66 4.37,-1.45 4.01,1.11 -0.89,6.42 -6.88,9.04 -12.41,10.8 -9.85,3.13 -19.83,5.92 -29.74,8.86 -20.16,5.98 -40.46,11.48 -60.73,17.09 -2.17,0.61 -3.07,-2.71 -0.92,-3.37" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path658"></path>
                                <path d="m 1655.5,1040.05 c 7.99,8.07 15.21,16.85 21.63,26.21 1.28,1.86 -1.76,3.62 -3.01,1.77 -6.17,-9.19 -13.15,-17.8 -20.85,-25.74 -1.41,-1.47 0.8,-3.7 2.23,-2.24" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path660"></path>
                                <path d="m 1672.51,1037.48 c 6.32,2.73 12.45,5.85 18.35,9.38 5.86,3.5 11.66,7.41 16.24,12.49 1.22,1.34 -0.31,3.46 -1.96,2.54 -5.89,-3.28 -11.35,-7.28 -17.1,-10.83 -5.76,-3.54 -11.75,-6.7 -17.92,-9.49 -2.8,-1.26 -0.36,-5.28 2.39,-4.09" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path662"></path>
                                <path d="m 1376.96,1106.55 c 1.47,-3.25 3.46,-6.25 5.82,-8.91 1.23,-1.39 2.55,-2.63 4.09,-3.68 1.4,-0.97 2.9,-1.83 4.44,-2.57 2.05,-1 3.55,1.69 1.76,3.01 -1.25,0.92 -2.42,1.96 -3.5,3.06 -1.15,1.16 -2.34,2.31 -3.44,3.53 l -0.76,0.89 -0.36,0.45 -0.14,0.17 -1.41,2.02 c -0.91,1.41 -1.71,2.89 -2.41,4.43 -0.51,1.13 -2.24,1.49 -3.24,0.84 -1.17,-0.76 -1.39,-2.03 -0.85,-3.24" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path664"></path>
                                <path d="m 1296.66,987.852 c 1.51,-2.422 3.36,-4.672 5.5,-6.571 1.13,-1.011 2.32,-1.941 3.62,-2.722 1.28,-0.75 2.78,-1.18 4.22,-1.547 0.91,-0.231 2.03,0.148 2.48,1.019 l -0.34,2.66 -1.46,1.219 -0.63,0.602 -0.54,0.48 -0.43,0.328 0.3,-0.23 c -0.96,0.84 -2.01,1.59 -2.94,2.469 -0.92,0.863 -1.78,1.773 -2.57,2.75 l -0.29,0.351 0.05,-0.051 -0.52,0.731 -1.07,1.66 c -0.83,1.398 -2.84,2.039 -4.27,1.121 -1.38,-0.891 -2.04,-2.789 -1.11,-4.269" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path666"></path>
                                <path d="m 1363.1,1287.48 c 1.03,-3.3 2.07,-6.6 3.1,-9.9 1.06,-3.37 2.29,-6.91 4.38,-9.79 1.32,-1.82 4.25,-1.26 4.34,1.17 0.13,3.55 -0.79,7.15 -1.79,10.52 -0.99,3.32 -1.99,6.63 -2.97,9.95 -0.55,1.83 -2.6,3.18 -4.51,2.55 -1.83,-0.58 -3.17,-2.54 -2.55,-4.5" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path668"></path>
                                <path d="m 1232.71,1179.42 c 2.14,-3.57 4.29,-7.15 6.44,-10.74 0.8,-1.32 2.69,-1.92 4.04,-1.05 1.33,0.86 1.91,2.61 1.06,4.03 -2.15,3.58 -4.3,7.17 -6.45,10.75 -0.79,1.32 -2.69,1.93 -4.04,1.06 -1.33,-0.86 -1.91,-2.62 -1.05,-4.05" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path670"></path>
                                <path d="m 1495.32,1503.24 c -1.43,-1.83 -2.88,-3.67 -4.31,-5.51 -0.8,-1.02 -1.54,-2.09 -2.25,-3.17 l -0.93,-1.52 -0.71,-1.65 0.31,-2.42 2.42,-0.31 c 1.03,0.75 2.04,1.47 2.93,2.39 l 2.36,2.55 c 1.47,1.81 2.95,3.61 4.41,5.41 l 0.88,2.12 -0.88,2.11 -2.11,0.88 -2.12,-0.88" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path672"></path>
                                <path d="m 1580.76,1395.86 -1.02,-1.22 -0.72,-0.32 -0.72,-0.5 1.81,0.23 c -1.02,0.43 -2.38,-0.01 -3.31,-0.54 -0.99,-0.59 -1.58,-1.62 -2.23,-2.51 -0.83,-1.18 -1.67,-2.34 -2.5,-3.5 -0.85,-1.18 -1.61,-2.33 -2.27,-3.63 -0.71,-1.44 -1.27,-2.87 -1.78,-4.39 -0.58,-1.72 1.69,-3.65 3.23,-2.49 1.26,0.95 2.46,1.89 3.58,2.99 1.21,1.19 2.2,2.49 3.2,3.85 0.88,1.2 1.76,2.4 2.63,3.6 0.72,0.98 1.24,1.8 1.37,3.07 0.11,1.13 -0.08,2.08 -0.89,2.95 l 0.61,-2.29 0.29,1.13 0.1,1.05 -0.21,-0.77 0.99,1.62 c 0.78,1.31 -1.12,2.87 -2.16,1.67" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path674"></path>
                                <path d="m 1424.74,930.781 c 3.4,-2.351 7.25,-4.121 11.26,-5.199 4,-1.094 8.55,-1.34 12.48,0.117 1.53,0.582 1.85,3.02 0,3.461 -3.62,0.84 -7.26,1.379 -10.85,2.352 -3.58,0.968 -6.69,2.449 -9.79,4.59 -1.38,0.937 -3.42,0.257 -4.22,-1.114 -0.89,-1.519 -0.26,-3.258 1.12,-4.207" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path676"></path>
                                <path d="m 1494.15,1022.44 c 0.63,0.09 1.62,0.2 2.54,0.27 l 2.66,0.16 c 2,0.07 4,0.03 5.99,-0.11 1.98,-0.14 3.22,-0.3 5.17,-0.66 2.14,-0.39 4.21,-0.62 6.38,-0.65 3.01,-0.04 4.03,4.08 1.52,5.58 -1.96,1.17 -3.88,1.93 -6.13,2.33 -2.3,0.41 -4.62,0.7 -6.94,0.85 -4.41,0.31 -8.79,0.01 -13.16,-0.63 -1.92,-0.29 -3.15,-2.81 -2.58,-4.56 0.68,-2.1 2.49,-2.88 4.55,-2.58" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path678"></path>
                                <path d="m 3368.1,1298.15 c -19.75,-14.46 -38.98,-29.82 -54.53,-48.88 -15.78,-19.34 -25.3,-42.62 -40.67,-62.28 -1.17,-1.5 0.62,-3.39 2.12,-2.12 8.88,7.5 14.66,18.13 20.22,28.15 6.13,11.03 12.24,21.94 20.13,31.83 15.45,19.4 34.92,35.29 54.45,50.36 1.7,1.31 0.07,4.26 -1.72,2.94" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path680"></path>
                                <path d="m 3424.67,1213.38 c -23.17,-11.42 -44.66,-25.67 -64.3,-42.44 -18.84,-16.1 -34.41,-38.32 -57.22,-49.07 -2.99,-1.41 -0.38,-5.86 2.61,-4.46 22.06,10.4 37.15,31.21 55.05,47.08 20,17.74 42.32,32.84 65.92,45.37 2.32,1.24 0.27,4.67 -2.06,3.52" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path682"></path>
                                <path d="m 3279.77,1100.8 c -41.55,-6.34 -70.92,-43.74 -90.83,-77.74 -1.65,-2.8 2.39,-4.94 4.23,-2.47 12.41,16.52 23.67,34.06 38.69,48.42 13.8,13.22 30.25,23.47 49.02,27.78 2.66,0.61 1.47,4.4 -1.11,4.01" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path684"></path>
                                <path d="m 3381.63,1060.9 c -15.69,-4.95 -31.49,-10.1 -46.19,-17.62 -13.84,-7.08 -27.88,-16.82 -35.86,-30.51 -1.12,-1.93 1.71,-4.31 3.2,-2.47 9.97,12.34 21.29,22.11 35.33,29.63 14.1,7.57 29.24,12.81 44.39,17.84 1.96,0.66 1.14,3.76 -0.87,3.13" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path686"></path>
                                <path d="m 3381.86,1443.01 c 2.5,-1.39 5,-2.77 7.51,-4.14 1.32,-0.74 2.61,-1.46 4.02,-2.03 1.34,-0.55 2.63,-0.97 4.03,-1.32 1.35,-0.33 2.4,1.35 1.38,2.36 -1.09,1.08 -2.2,2.01 -3.43,2.92 -1.14,0.83 -2.36,1.49 -3.59,2.2 -2.48,1.41 -4.96,2.83 -7.45,4.25 -1.12,0.63 -2.74,0.29 -3.35,-0.89 -0.62,-1.15 -0.33,-2.7 0.88,-3.35" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path688"></path>
                                <path d="m 3288.56,1333.39 c 4.26,-2.23 8.52,-4.46 12.78,-6.69 1.17,-0.62 2.81,-0.34 3.47,0.91 0.63,1.19 0.33,2.78 -0.91,3.47 -4.2,2.33 -8.4,4.65 -12.61,6.98 -1.24,0.68 -3.01,0.34 -3.7,-0.98 -0.66,-1.24 -0.36,-3 0.97,-3.69" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path690"></path>
                                <path d="m 3429.34,1329.48 c 1.39,-3.24 3.16,-6.31 5.29,-9.13 1.12,-1.49 2.28,-2.96 3.65,-4.24 1.4,-1.3 2.84,-2.38 4.51,-3.31 l 2.32,0.46 -0.15,2.36 -1.47,2.01 -1.61,1.88 c -0.92,1.15 -1.99,2.45 -2.89,3.71 -0.95,1.35 -1.83,2.75 -2.62,4.19 l -1.14,2.2 -0.51,1.12 -0.23,0.51 -0.14,0.35 c -0.61,1.53 -2.06,2.48 -3.71,1.79 -1.64,-0.69 -1.96,-2.38 -1.3,-3.9" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path692"></path>
                                <path d="m 3631.54,1331.73 c 0.77,1.15 0.62,2.66 -0.19,3.75 l -1.19,1.09 -0.48,0.21 -0.92,0.42 -1.05,0.17 0.49,-0.08 h -1.6 l -2.07,-1.47 c -0.85,-1.1 -1.11,-2.38 -1.24,-3.74 -0.09,-1.03 -0.04,-2.07 -0.04,-3.11 -0.01,-1.26 -0.07,-2.52 0.01,-3.78 0.06,-1.17 0.17,-2.32 0.26,-3.48 0.1,-1.41 0.44,-2.7 0.82,-4.04 0.55,-2.05 3.62,-2.07 4.17,0 l 0.58,2.19 c 0.21,0.91 0.21,1.87 0.28,2.8 0.09,1.48 0.18,2.94 0.16,4.42 -0.02,1.44 -0.06,2.88 -0.06,4.33 l 0.04,0.9 v -0.16 l 0.06,0.21 -0.07,-0.14 -0.09,-0.13 0.92,1.63 -0.74,-1.27 -0.67,-0.39 c -1.31,0.32 -1.7,0.34 -1.18,0.06 l -0.51,2.13 c -0.69,-1.12 -0.28,-2.8 0.9,-3.42 1.25,-0.66 2.63,-0.26 3.41,0.9" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path694"></path>
                                <path d="m 3539.68,1235.97 c 0.05,-4.34 -0.14,-8.77 0.9,-13.01 0.43,-1.75 3.1,-1.75 3.53,0 1.04,4.24 0.85,8.67 0.89,13.01 0.02,1.38 -1.23,2.72 -2.66,2.65 -1.42,-0.06 -2.67,-1.17 -2.66,-2.65" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path696"></path>
                                <path d="m 3644.83,1215.49 c 0.41,-2.41 0.82,-4.83 1.23,-7.24 0.22,-1.21 0.43,-2.39 0.79,-3.57 0.36,-1.24 0.9,-2.38 1.46,-3.54 0.6,-1.25 2.92,-1.03 3.12,0.4 0.17,1.28 0.38,2.52 0.36,3.81 -0.02,1.43 -0.23,2.81 -0.41,4.22 -0.34,2.48 -0.68,4.96 -1.02,7.44 -0.19,1.5 -2.19,2.43 -3.52,2 -1.61,-0.51 -2.28,-1.94 -2.01,-3.52" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path698"></path>
                                <path d="m 3503.54,1103.6 c -0.22,-5.52 1.36,-10.97 4.59,-15.48 0.73,-1.03 2.13,-1.62 3.3,-0.86 1.11,0.71 1.52,2.11 0.86,3.3 l -0.89,1.74 -0.14,0.3 -0.35,0.91 c -0.4,1.12 -0.7,2.26 -0.96,3.42 l -0.34,1.81 -0.03,0.21 -0.09,0.97 c -0.09,1.23 -0.07,2.46 0.03,3.68 0.14,1.58 -1.46,3.07 -2.99,3 -1.68,-0.08 -2.93,-1.32 -2.99,-3" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path700"></path>
                                <path d="m 3602.34,1105.65 c 3.05,-6.58 5.7,-13.71 10.41,-19.32 l 2.06,-0.27 0.79,1.93 c -0.58,3.71 -1.92,7.3 -3.45,10.72 -1.5,3.35 -2.99,6.7 -4.49,10.05 -0.66,1.47 -2.92,1.93 -4.21,1.1 -1.51,-0.97 -1.83,-2.64 -1.11,-4.21" style="fill:#de5d3e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path702"></path>
                                <path d="m 2145.43,908.879 c -1,-22.688 3.01,-46.027 5.92,-68.469 4.81,-37.012 10.24,-73.941 15.91,-110.828 12.25,-79.801 25.58,-159.523 41.23,-238.742 3.13,-15.879 6.37,-31.738 9.97,-47.508 1.36,-5.992 2.6,-12.07 4.43,-17.934 1.34,-4.296 3.43,-8.359 4.81,-12.566 0.89,-2.73 5.23,-1.562 4.32,1.188 -1.14,3.492 -1.45,7.71 -2.21,11.332 -1.05,5.058 -2.35,10.058 -3.52,15.097 -3.15,13.391 -5.97,26.852 -8.7,40.332 -7.39,36.461 -14.05,73.059 -20.46,109.688 -13.87,79.16 -26.88,158.531 -37.88,238.152 -3.69,26.711 -7.12,53.469 -10.16,80.258 -0.26,2.293 -3.55,2.41 -3.66,0" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path704"></path>
                                <path d="m 2225.64,406.141 c 76.3,18 153.77,30.32 231.46,40.531 76.41,10.047 153.13,19.719 229.92,26.269 77.14,6.579 154.65,6.981 230.54,-10.101 37.51,-8.442 74.32,-19.699 111.81,-28.18 35,-7.91 70.41,-14.308 105.84,-19.89 79.39,-12.5 160.06,-20.54 240.5,-17.7 4.69,0.172 4.72,7.43 0,7.321 -72.9,-1.672 -145.92,4.418 -218.01,14.91 -35.59,5.168 -71.01,11.449 -106.24,18.711 -37.3,7.679 -73.87,18.117 -110.83,27.238 -37.14,9.172 -74.64,15.609 -112.85,18.039 -38.78,2.461 -77.71,1.481 -116.45,-1.219 -76.89,-5.351 -153.64,-15.531 -230.08,-25.238 -86.38,-10.98 -172.55,-24.301 -257.29,-44.59 -3.95,-0.953 -2.28,-7.031 1.68,-6.101" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path706"></path>
                                <path d="m 1552.54,192.969 c 67.72,-1.879 134.68,5.742 200.6,21.121 58.06,13.562 114.99,31.672 173.44,43.59 73.53,14.98 148.07,18.691 222.88,13.75 85.33,-5.649 170.32,-18.129 255.2,-28.282 85.54,-10.226 171.08,-20.398 256.64,-30.468 10.74,-1.258 21.49,-2.528 32.24,-3.77 4.78,-0.558 4.71,6.899 0,7.481 -85.52,10.531 -171.09,20.75 -256.65,30.968 -85.06,10.172 -170.13,21.95 -255.49,29.34 -76.73,6.641 -153.48,6.16 -229.51,-7.008 -59.44,-10.312 -117.06,-28.011 -175.37,-43.101 -63.81,-16.5 -128.51,-27.371 -194.56,-28.219 -9.81,-0.129 -19.62,-0.051 -29.42,0.168 -3.59,0.09 -3.58,-5.457 0,-5.57" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path708"></path>
                                <path d="m 2696.18,215.332 c 24.61,36.789 40.8,78.629 47.05,122.449 3.37,23.539 4.34,47.328 7.36,70.899 3.15,24.761 9.46,48.629 16.96,72.39 1.35,4.239 -5.07,5.86 -6.57,1.821 -8.18,-22.012 -13.25,-45.262 -16.41,-68.5 -3.22,-23.551 -4.07,-47.352 -7.02,-70.942 -5.61,-44.711 -21.36,-87.679 -45.96,-125.429 -1.88,-2.879 2.7,-5.52 4.59,-2.688" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path710"></path>
                                <path d="m 2279.23,527.629 c -9.93,-6.789 -14.92,-19.289 -13.43,-31.141 1.52,-12.148 10.05,-22.468 22.46,-24.418 11.57,-1.832 24.04,2.52 30.81,12.352 7.56,10.969 3.82,25.668 -5.56,34.258 -5.23,4.789 -12.28,8.082 -19.49,7.582 -4.09,-0.293 -7.94,-1.34 -10.31,-4.93 -2.03,-3.082 -1.68,-8.34 2.74,-9.023 2.77,-0.418 5.07,2.652 2.87,4.953 l 0.22,-1.692 0.23,0.25 0.57,0.7 c 0.43,0.371 1.49,0.628 2.39,0.812 1.79,0.367 3.96,0.27 5.76,-0.152 4.22,-0.989 7.82,-3.442 10.73,-6.739 2.76,-3.14 4.76,-7.449 5.06,-11.339 0.17,-2.372 -0.02,-4.223 -0.76,-6.43 -0.47,-1.442 -1.58,-3.442 -2.46,-4.551 -4.85,-6.199 -13.44,-8.949 -20.84,-8 -8.5,1.078 -14.89,7.098 -16.95,15.508 -2.32,9.543 1.02,20.73 9.15,26.543 3.26,2.328 0.2,7.769 -3.19,5.457" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path712"></path>
                                <path d="m 2407.41,531.102 c -11.19,0.808 -17.27,-11.793 -15.82,-21.43 1.91,-12.621 16.08,-18.281 27.15,-19.75 6.68,-0.891 14.29,-1.25 20.29,2.328 4.97,2.961 8.23,8.32 9.13,13.969 2.16,13.461 -6.56,24.383 -17.89,30.5 -5.71,3.09 -12.23,5.922 -18.88,5.34 -3.26,-0.278 -6.36,-1.129 -8.8,-3.411 -2.36,-2.187 -3.61,-5.847 -1.5,-8.609 1.12,-1.469 2.93,-1.891 4.38,-0.57 1.1,1 -1.31,-1.5 0.91,0.722 l 0.76,0.938 0.99,1.031 c 1.04,0.699 2.77,0.988 4.31,1.031 3.84,0.09 7.51,-1.339 11.17,-3.14 7.77,-3.813 15.67,-10.18 15.8,-19.211 0.06,-3.539 -0.83,-7.231 -3.38,-9.77 -3.26,-3.23 -8.52,-3.191 -12.91,-2.98 -8.09,0.371 -18.69,2.512 -22.85,10.39 -2.83,5.372 -0.57,16.122 7.14,15.891 4.38,-0.129 4.29,6.418 0,6.731" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path714"></path>
                                <path d="m 2540.97,555.93 c -10.35,-5 -16.35,-17.219 -15.22,-28.481 1.23,-12.25 10.03,-21.949 22.3,-23.949 12,-1.969 25.16,2.859 30.84,14.172 5.9,11.769 3.16,26.976 -6.18,36.207 -5.54,5.48 -13.02,8.41 -20.7,9.121 -3.78,0.34 -8,0.172 -11.66,-0.891 -3.75,-1.089 -7.01,-3.418 -9.67,-6.25 -1.53,-1.617 -0.02,-4.328 2.18,-3.75 2.73,0.7 5.49,1.11 8.25,1.551 2.64,0.422 5.2,0.891 7.88,0.879 5.2,-0.019 10.27,-1.418 14.6,-4.32 8.04,-5.348 11.43,-16.18 8.89,-25.059 -5.04,-17.609 -33.59,-18.371 -38.35,0.172 -2.33,9.109 1.43,20.207 10.2,24.859 3.8,2.02 0.46,7.579 -3.36,5.739" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path716"></path>
                                <path d="m 2637.65,276.32 c -7.33,-6.429 -9.39,-17.07 -6.99,-26.238 2.62,-10.031 10.55,-17.684 20.98,-18.801 10.43,-1.109 21.14,5.18 26.36,14.051 5.65,9.629 3.74,21.328 -3.86,29.289 -3.97,4.16 -9.41,7.25 -15.06,8.379 -5.03,1.012 -15.31,1.582 -17.04,-4.73 -0.35,-1.27 0.21,-3.059 1.49,-3.661 1.36,-0.629 2.63,-1.05 4.15,-0.699 0.96,0.219 1.88,0.559 2.86,0.75 1.2,0.238 3.92,0.27 5,0.121 3.72,-0.531 7.13,-2.09 9.73,-4.109 6.19,-4.762 9,-11.883 6.01,-19.024 -2.54,-6.058 -9.69,-11.007 -16.17,-11.679 -7.37,-0.758 -13.46,3.281 -16.4,10.23 -2.88,6.821 -2.21,15.84 3.64,21.422 3.13,2.981 -1.51,7.5 -4.7,4.699" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path718"></path>
                                <path d="m 2543.64,302.27 c -8.07,-6.36 -13.86,-16.149 -14.96,-26.411 -1.09,-10.269 4.73,-20.418 14.95,-23.25 10.1,-2.8 21.98,1.762 27.02,11.071 5.44,10.05 3.31,22.902 -4.06,31.39 -4.13,4.75 -10.06,8.051 -16.14,9.559 -3.16,0.781 -6.49,1.16 -9.76,1.07 -1.76,-0.051 -3.56,-0.187 -5.28,-0.66 -2.01,-0.559 -3.23,-1.41 -4.49,-3.047 -0.94,-1.222 -0.29,-3.601 1.1,-4.211 2.57,-1.14 4.76,-0.812 7.47,-0.59 2.22,0.168 4.49,0.149 6.69,-0.179 4.17,-0.633 8.36,-2.211 11.68,-4.84 6.35,-5.043 9.19,-13.961 6.74,-21.703 -2.28,-7.168 -9.64,-11.297 -16.89,-10.52 -7.36,0.781 -11.67,7.352 -11.47,14.403 0.27,8.859 5.79,17.347 12.52,22.796 1.52,1.231 1.28,3.844 0,5.122 -1.51,1.511 -3.57,1.21 -5.12,0" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path720"></path>
                                <path d="m 2404.14,309.641 c -9.28,-1.082 -14.97,-9.489 -15.29,-18.403 -0.39,-10.769 7.81,-18.867 17.66,-21.789 10.14,-2.988 23.09,-1.449 31.24,5.633 4.61,4 6.57,10.117 5.28,16.047 -1.24,5.691 -5.39,10.543 -9.57,14.383 -5.07,4.64 -11.1,9.726 -18.21,10.379 -6.51,0.578 -12.63,-3.442 -13.04,-10.211 -0.21,-3.239 4.85,-4.711 6.27,-1.7 1.2,2.551 4.63,3.5 6.85,3.079 4.22,-0.809 7.99,-4.36 11.09,-7.137 4.79,-4.293 11.92,-12.113 5.39,-18.051 -5.23,-4.75 -14.27,-5.902 -20.97,-4.57 -6.63,1.328 -12.41,5.289 -13.84,11.847 -1.23,5.653 1.2,13.641 7.86,15.102 2.97,0.641 2.39,5.75 -0.72,5.391" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path722"></path>
                                <path d="m 2712.71,952.91 c 114.38,6.75 228.81,12.91 343.32,17.559 15.76,0.633 31.53,1.25 47.29,1.832 15.68,0.578 32.56,-0.52 47.95,2.679 2.23,0.461 2.38,4.321 0,4.649 -13.59,1.859 -28.03,0.062 -41.72,-0.438 -14.11,-0.519 -28.21,-1.062 -42.32,-1.621 -28.64,-1.129 -57.26,-2.359 -85.88,-3.679 -57.25,-2.641 -114.47,-5.719 -171.67,-9.2 -32.34,-1.98 -64.66,-4.191 -96.97,-6.543 -3.34,-0.238 -3.39,-5.437 0,-5.238" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path724"></path>
                                <path d="m 1661.49,1012.37 c -13.98,-38.069 -9.28,-82.261 12.78,-116.39 5.73,-8.871 13.23,-16.582 18.36,-25.839 6.06,-10.95 4.99,-23.149 7.25,-35.059 3.84,-20.203 20.5,-33.141 37.83,-41.934 2.06,-1.039 4.65,1.782 2.63,3.391 -7.41,5.922 -15.44,11.512 -22.1,18.27 -8.38,8.523 -11.75,18.171 -12.93,29.933 -0.94,9.309 -1.75,18.43 -6.03,26.918 -4.65,9.211 -12.09,16.641 -17.96,25.031 -23.11,33.028 -28.58,76.508 -15.17,114.399 1.04,2.94 -3.59,4.17 -4.66,1.28" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path726"></path>
                                <path d="m 1750.01,789.582 c 5.42,-3.922 10.53,-8.23 15.7,-12.473 5,-4.089 9.9,-8.39 15.31,-11.937 0.94,-0.633 2.02,0.789 1.21,1.57 -4.74,4.547 -10.12,8.43 -15.31,12.449 -5.2,4.039 -10.45,8.008 -15.4,12.348 -1.34,1.18 -2.98,-0.891 -1.51,-1.957" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path728"></path>
                                <path d="m 1737.83,787.781 c -58.73,-16.902 -108.54,-56.742 -138.72,-109.82 -1.9,-3.352 3.24,-6.371 5.17,-3.02 29.53,51.2 78.5,90.629 134.53,109.321 2.22,0.738 1.31,4.187 -0.98,3.519" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path730"></path>
                                <path d="m 1691.08,814.02 c -73.43,-12.329 -141.78,-51 -190.39,-107.379 -2.25,-2.61 1.46,-6.422 3.82,-3.821 49.62,54.442 115.75,91.739 187.92,106.321 3.22,0.648 1.82,5.418 -1.35,4.879" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path732"></path>
                                <path d="m 1678.39,847.051 c -58.89,-8.602 -116.05,-30.832 -164.62,-65.379 -2.17,-1.543 -1.48,-5.043 1.39,-5.121 31.19,-0.903 65.54,8.769 88.11,31.219 1.4,1.39 -0.46,4.019 -2.17,2.82 -25.82,-18.238 -53.78,-30.129 -85.94,-28.551 0.46,-1.707 0.91,-3.41 1.38,-5.117 49.09,33.449 104.42,56.039 163.2,65.238 3.23,0.512 1.84,5.36 -1.35,4.891" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path734"></path>
                                <path d="m 1477.31,1977.87 c 2.07,-75.29 18.95,-148.3 39.07,-220.56 20.36,-73.09 43.85,-145.53 58.12,-220.18 4.02,-20.97 7.21,-42.1 9.51,-63.33 2.32,-21.31 2.38,-42.64 3.96,-63.97 0.16,-2.16 3.09,-2.11 3.33,0 2.08,18.55 0.85,37.84 -0.4,56.42 -1.23,18.31 -3.4,36.52 -6.24,54.65 -5.79,36.98 -14.22,73.46 -23.88,109.6 -19.64,73.5 -43.97,145.78 -60.54,220.11 -9.34,41.95 -16.87,84.28 -19.19,127.26 -0.12,2.39 -3.8,2.42 -3.74,0" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path736"></path>
                                <path d="m 1313.05,2294.68 c 27.9,-77.76 61.77,-153.09 101.65,-225.44 11.29,-20.48 22.42,-41.85 36.17,-60.78 1.77,-2.44 5.5,-0.37 4.09,2.39 -9.28,18.2 -20.57,35.49 -30.59,53.3 -10.05,17.84 -19.81,35.85 -29.2,54.06 -18.77,36.43 -35.99,73.56 -52.2,111.19 -9.42,21.85 -18.33,43.9 -26.71,66.17 -0.75,1.97 -3.94,1.14 -3.21,-0.89" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path738"></path>
                                <path d="m 1274.87,2140.59 c 26.3,-32.26 54.71,-62.73 85.12,-91.14 15.06,-14.06 30.58,-27.64 46.58,-40.63 7.61,-6.18 15.33,-12.24 23.14,-18.19 8.18,-6.23 16.77,-14.06 26.17,-18.35 2.22,-1.02 4.6,1.59 2.71,3.52 -6.69,6.9 -15.68,12.03 -23.36,17.77 -8.65,6.47 -17.18,13.09 -25.6,19.87 -16.07,12.93 -31.73,26.34 -46.92,40.28 -30.37,27.88 -58.83,57.8 -85.25,89.45 -1.52,1.82 -4.06,-0.79 -2.59,-2.58" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path740"></path>
                                <path d="m 1439.34,1945.81 c -41.49,6.41 -82.99,12.72 -124.45,19.3 -3.29,0.51 -5.46,-3.64 -2.35,-5.58 34.57,-21.61 72.96,-40.56 112.77,-50.12 3.73,-0.89 5.14,4.45 1.57,5.7 -38.75,13.51 -76.07,28.28 -111.26,49.69 -0.79,-1.86 -1.57,-3.72 -2.35,-5.58 41.55,-6.09 83.08,-12.44 124.61,-18.7 3.45,-0.52 4.95,4.75 1.46,5.29" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path742"></path>
                                <path d="m 1459.72,1872.09 c -52.67,-10.11 -106.2,-15.6 -159.73,-18.55 -2.55,-0.14 -2.59,-3.96 0,-4 54.31,-0.71 108.15,5.8 161.19,17.26 3.47,0.75 1.98,5.95 -1.46,5.29" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path744"></path>
                                <path d="m 3461.93,2273.28 c -49.98,-70.5 -84.72,-150.66 -107.7,-233.73 -24.82,-89.74 -36.07,-182.46 -42.32,-275.16 -1.81,-26.88 -3.22,-53.78 -4.41,-80.7 -1.23,-27.65 -3.12,-55.53 -2.66,-83.21 0.05,-3.2 4.63,-3.11 4.91,0 2.17,23.95 2.42,48.16 3.48,72.2 1.07,24.06 2.27,48.12 3.79,72.16 3.03,48.14 7.22,96.22 13.82,144.01 12.02,87.06 31.9,173.22 65.26,254.72 18.39,44.93 41.31,87.96 68.92,127.9 1.32,1.91 -1.77,3.67 -3.09,1.81" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path746"></path>
                                <path d="m 3344.71,1801.89 c 2.16,25.59 13.44,48.84 26.17,70.74 11.74,20.19 24.16,40.14 37.62,59.24 13.67,19.38 28.82,37.83 46.84,53.34 18.3,15.77 39.48,27.07 61.27,37.22 24.02,11.2 49.06,21 70.14,37.36 2.17,1.68 -0.6,5.04 -2.87,3.73 -21.57,-12.53 -44.05,-23.09 -66.6,-33.67 -21.97,-10.29 -43.47,-21.47 -62.23,-37.03 -36.97,-30.65 -62.17,-72.96 -86.07,-113.93 -13.9,-23.86 -26.4,-49.05 -28.6,-77 -0.21,-2.77 4.09,-2.75 4.33,0" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path748"></path>
                                <path d="m 3705.85,1974.16 c -14.39,0.98 -27.48,-5.07 -39.38,-12.63 -12.27,-7.8 -23.96,-16.67 -35.17,-25.91 -22.8,-18.82 -43.56,-40.05 -60.33,-64.45 -1.15,-1.66 1.47,-3.7 2.8,-2.17 17.95,20.82 36.78,41.02 57.71,58.87 10.7,9.11 21.89,17.64 33.52,25.51 12.31,8.33 25.5,16.39 40.85,16.37 2.86,0 2.8,4.21 0,4.41" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path750"></path>
                                <path d="m 3714.83,1722.04 c -37.99,-33.29 -71.45,-73 -97.36,-116.39 -1.43,-2.37 2.12,-4.34 3.66,-2.13 28.9,41.45 60.99,79.77 97.11,115.11 2.24,2.2 -1.09,5.44 -3.41,3.41" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path752"></path>
                                <path d="m 3733.6,1601.15 c -21.49,-1.02 -38.47,-13.54 -54.83,-26.34 -17.62,-13.78 -34.58,-28.37 -50.84,-43.74 -32.44,-30.64 -62.12,-64.19 -88.66,-100.06 -15.18,-20.51 -29.69,-41.74 -41.04,-64.63 -1,-2.03 1.73,-3.61 3.02,-1.77 25.07,36.02 48.8,72.49 77.39,105.93 27.91,32.63 58.64,62.82 91.63,90.31 18.48,15.39 38.97,34.03 63.73,37.36 1.67,0.23 1.27,3.03 -0.4,2.94" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path754"></path>
                                <path d="m 3723.71,1511.01 c -34.19,-12.6 -66.64,-29.43 -96.47,-50.36 -14.58,-10.24 -28.58,-21.35 -41.82,-33.28 -13.29,-11.97 -27.17,-24.63 -37.26,-39.46 -1.48,-2.19 1.72,-4.37 3.53,-2.72 12.93,11.83 24.36,25.26 37.36,37.1 13.31,12.1 27.38,23.37 42.1,33.72 29.13,20.45 60.68,37.47 93.8,50.5 2.75,1.09 1.6,5.54 -1.24,4.5" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path756"></path>
                                <path d="m 3266.57,1409.16 c 18.59,85.45 38.04,175.33 97.57,242.8 14.91,16.91 32.26,30.67 49.93,44.5 1.74,1.36 -0.48,3.7 -2.21,2.88 -35.83,-16.9 -63.73,-51.6 -83.74,-84.83 -23.17,-38.47 -37.86,-81.33 -48.92,-124.66 -6.7,-26.26 -12,-52.83 -17.28,-79.41 -0.6,-3.02 3.99,-4.33 4.65,-1.28" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path758"></path>
                                <path d="m 3287.72,1489.59 c 21.13,31.12 45.74,59.78 73.36,85.32 27.75,25.64 58.33,47 89.99,67.47 2.16,1.4 0.28,4.62 -2.02,3.45 -33.66,-17.23 -64.4,-41.16 -91.78,-67.1 -27.58,-26.13 -52.06,-55.43 -72.99,-87.13 -1.43,-2.16 2.01,-4.13 3.44,-2.01" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path760"></path>
                                <path d="m 3253.39,1395.33 c -4.91,-23.76 -9.02,-47.65 -12.32,-71.7 -1.57,-11.44 -2.89,-22.93 -4.03,-34.43 -1.17,-11.77 -3.6,-24.49 -2.33,-36.27 0.21,-1.92 3.04,-2.64 3.59,-0.49 2.78,10.95 2.53,23.11 3.66,34.35 1.17,11.67 2.55,23.32 4,34.97 3.01,24.27 6.83,48.45 11.28,72.52 0.46,2.5 -3.33,3.59 -3.85,1.05" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path762"></path>
                                <path d="m 2148.1,910.25 c -0.25,3.238 -0.13,6.512 0.05,9.738 0.18,3.012 0.3,6.981 1.67,9.492 l 0.15,0.282 0.3,0.297 0.23,0.05 c 1.28,0.321 2.49,0.473 3.81,0.52 3.18,0.172 6.36,0.172 9.55,0.031 6.37,-0.281 12.95,-1.961 19.28,-1.019 1.35,0.199 1.27,2.039 0.36,2.66 -5.85,3.961 -14.2,4.078 -21.06,4.187 -3.45,0.071 -7.03,0.102 -10.46,-0.398 -2.43,-0.36 -5.01,-1.219 -6.36,-3.418 -1.99,-3.242 -2.15,-7.711 -2.32,-11.383 -0.17,-3.66 -0.08,-7.398 0.38,-11.039 0.35,-2.738 4.63,-2.891 4.42,0" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path764"></path>
                                <path d="m 1127.38,1336.82 c 31.48,11.34 64.5,17.37 97.94,18.28 33.78,0.93 66.27,-4.92 99.07,-12.28 2.09,-0.47 2.77,2.37 0.87,3.13 -31.22,12.64 -66.48,16.43 -99.94,15.72 -33.94,-0.72 -67.68,-7.47 -99.47,-19.33 -3.42,-1.27 -1.97,-6.79 1.53,-5.52" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path766"></path>
                                <path d="m 1116.5,1547.2 c 16.73,4.55 34.27,5.63 51.41,2.99 7.96,-1.23 15.82,-3.25 23.4,-5.99 3.74,-1.36 7.88,-2.69 11.3,-4.79 7.23,-4.46 -0.21,-8.97 -4.5,-11.55 -13.9,-8.33 -30.81,-11.35 -46.73,-8.3 -11.41,2.19 -27.95,8.71 -37.52,-1.33 -1.26,-1.33 0.34,-3.47 1.97,-2.55 12.77,7.27 26.14,0.43 39.48,-1.24 13.3,-1.67 26.93,0.57 39.08,6.2 5.31,2.47 12.01,5.67 15.11,10.91 2.82,4.78 0.69,9.16 -3.87,11.65 -12.47,6.82 -27.05,10.62 -41.06,12.4 -16.54,2.1 -33.33,0.87 -49.43,-3.42 -3.21,-0.86 -1.84,-5.85 1.36,-4.98" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path768"></path>
                                <path d="m 1112.95,1790.18 c 10.52,8.64 21.03,17.3 31.68,25.8 5.52,4.4 11.04,8.81 16.56,13.21 4.02,3.2 10.2,6.62 12.61,11.34 4.91,9.58 -9.11,14.21 -15.86,15 -11.41,1.34 -23.18,-2.53 -32.84,-8.43 -5.5,-3.36 -10.54,-7.43 -15.29,-11.78 -4.46,-4.1 -10.69,-8.86 -13.06,-14.56 -0.55,-1.35 1.17,-2.17 2.2,-1.7 5.33,2.46 9.47,8.5 13.76,12.44 4.92,4.53 10.15,8.73 15.93,12.09 5.62,3.28 11.78,5.68 18.2,6.74 6.08,1.02 13.81,1.08 19.43,-1.8 3.12,-1.6 5.23,-4.25 2.76,-7.46 -2.02,-2.62 -5.27,-4.67 -7.77,-6.82 -5.53,-4.74 -11.04,-9.49 -16.56,-14.24 -11.04,-9.5 -22.22,-18.85 -33.4,-28.18 -1.15,-0.97 0.5,-2.59 1.65,-1.65" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path770"></path>
                                <path d="m 1109.27,1583.84 c 43.23,18.74 88.61,27.9 135.39,31.82 1.79,0.16 1.85,2.84 0,2.84 -47.21,0.05 -94.61,-11.96 -137.82,-30.49 -2.84,-1.22 -0.39,-5.39 2.43,-4.17" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path772"></path>
                                <path d="m 1135.71,1308 c 18.28,-2.62 36.55,-5.25 54.86,-7.61 2.67,-0.34 3.33,4.31 0.65,4.74 -18,2.86 -36.03,5.46 -54.07,8.08 -3.4,0.49 -4.87,-4.72 -1.44,-5.21" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path774"></path>
                                <path d="m 1842,2436.26 c -3.38,-37.32 -2.95,-74.81 -1.78,-112.24 1.17,-37.18 2.5,-74.35 3.58,-111.54 2.16,-74.73 4.03,-149.46 5.32,-224.21 2.6,-150.34 2.89,-300.7 1.69,-451.05 -0.67,-84.74 -2.53,-169.45 -3.46,-254.16 -0.05,-4.62 6.98,-4.59 7.16,0 3,75.51 3.92,151.18 5,226.73 1.08,74.76 1.26,149.54 0.94,224.3 -0.65,150.34 -3.3,300.74 -8.71,451 -1.53,42.24 -3.28,84.48 -5.06,126.72 -1.75,41.47 -3.03,83.03 0.39,124.45 0.27,3.26 -4.78,3.23 -5.07,0" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path776"></path>
                                <path d="m 1854.89,1251.99 c 24.89,-26.27 50.45,-51.89 76.72,-76.78 25.85,-24.5 52.03,-49.07 80.37,-70.68 2.93,-2.24 6.6,2.63 3.93,5.1 -26.29,24.26 -53.87,47.1 -80.19,71.36 -26.32,24.26 -51.96,49.24 -76.94,74.89 -2.47,2.53 -6.31,-1.32 -3.89,-3.89" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path778"></path>
                                <path d="m 2119.6,1218.26 c -44.68,-63.73 -89.99,-127.06 -137.76,-188.5 -3.63,-4.67 2.97,-9.87 6.46,-4.99 45.41,63.5 91.17,126.75 135.39,191.1 1.74,2.53 -2.35,4.87 -4.09,2.39" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path780"></path>
                                <path d="m 1984.09,1022.06 c 18.08,-13.8 34.89,-29.22 50.21,-46.029 7.65,-8.422 14.96,-17.179 21.81,-26.261 3.33,-4.418 6.57,-8.899 9.7,-13.45 1.65,-2.39 3.25,-4.82 4.86,-7.25 0.71,-1.07 4.53,-5.351 4.31,-6.25 -0.8,-3.379 2.81,-6.371 5.93,-4.55 2.91,1.691 2.47,6.57 -0.97,7.371 -1.24,0.289 -3.45,5.441 -4.11,6.449 -1.58,2.441 -3.22,4.84 -4.87,7.242 -3.31,4.777 -6.73,9.488 -10.27,14.117 -7.02,9.231 -14.44,18.141 -22.27,26.699 -15.7,17.141 -32.97,32.742 -51.48,46.792 -2.9,2.21 -5.7,-2.7 -2.85,-4.88" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path782"></path>
                                <path d="m 2969.49,2412.49 c 6.4,-68.19 13.11,-136.35 19.68,-204.52 6.51,-67.47 12.44,-134.9 14.15,-202.7 3.39,-134.5 -5.17,-268.92 -4.46,-403.42 0.19,-38.03 1.11,-76.06 3.22,-114.04 2.08,-37.47 4.74,-75.16 10.7,-112.24 0.73,-4.5 8.45,-3.5 8.01,1.08 -3.21,33.38 -6.83,66.67 -8.88,100.15 -2.05,33.46 -3.13,66.98 -3.58,100.49 -0.91,67.63 0.79,135.26 2.27,202.87 1.46,67.23 2.87,134.51 1.6,201.77 -1.28,67.35 -6,134.51 -13.06,201.5 -8.06,76.38 -16.67,152.73 -25.32,229.06 -0.31,2.72 -4.59,2.79 -4.33,0" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path784"></path>
                                <path d="m 3014.9,1377.78 c -17.5,-13.84 -33.47,-29.56 -49.77,-44.76 -16.33,-15.23 -32.67,-30.44 -49,-45.67 -33.26,-31 -66.28,-62.26 -99.37,-93.45 -3.51,-3.31 1.79,-8.61 5.29,-5.3 33.07,31.21 66.19,62.36 99.08,93.75 16.15,15.41 32.29,30.82 48.43,46.23 16.12,15.38 31.9,31.28 49.22,45.33 2.76,2.23 -1.14,6.04 -3.88,3.87" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path786"></path>
                                <path d="m 2744.63,1223.92 c 20.64,-21.35 41.62,-42.37 62.92,-63.07 10.35,-10.07 20.7,-20.14 31.05,-30.2 5.33,-5.17 10.67,-10.33 16.03,-15.46 4.94,-4.74 10.18,-11.56 16.48,-14.37 2.83,-1.27 5.61,1.31 4.21,4.21 -2.86,5.94 -9.28,10.6 -13.92,15.18 -5.3,5.2 -10.59,10.41 -15.92,15.57 -10.67,10.33 -21.32,20.68 -31.98,31.02 -21.33,20.68 -42.96,41.04 -64.93,61.06 -2.64,2.4 -6.44,-1.35 -3.94,-3.94" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path788"></path>
                                <path d="m 2868.01,1096.61 c -22.02,-39.71 -42.58,-81.17 -57.29,-124.122 l 2.19,2.184 -1.34,-0.352 c -4.55,-1.199 -4.82,-7.672 -0.6,-9.461 4.13,-1.738 8.99,3.071 6.29,7.141 l 3.4,7.422 c 0.87,2.187 1.74,4.367 2.61,6.547 2.02,5.07 4.07,10.14 6.17,15.191 4.54,10.9 9.3,21.7 14.24,32.42 9.34,20.23 19.39,40.12 30.08,59.67 2.05,3.75 -3.67,7.11 -5.75,3.36" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path790"></path>
                                <path d="m 2870.4,2478.34 c -6.18,-123.71 -17.28,-247.31 -34.39,-370 -4.68,-33.58 -10.48,-67.06 -14.43,-100.74 -0.24,-2.09 3.22,-2.54 3.67,-0.5 6.68,30.46 10.99,61.48 15.44,92.33 4.27,29.57 8.19,59.18 11.77,88.84 7.44,61.65 13.33,123.45 17.55,185.4 2.37,34.86 4.03,69.76 5.3,104.67 0.11,3.16 -4.75,3.14 -4.91,0" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path792"></path>
                                <path d="m 2817.98,1980.91 c -16.38,-121.5 -30.3,-243.22 -44.39,-365 -14.04,-121.38 -28.59,-242.75 -46.41,-363.64 -9.22,-62.58 -20.37,-124.7 -31.72,-186.91 -0.53,-2.91 3.84,-4.2 4.49,-1.24 11.94,54.34 20.52,109.59 29.11,164.53 9.3,59.45 17.62,119.05 25.3,178.71 15.37,119.47 28.65,239.17 42.5,358.82 8.26,71.42 16.54,142.82 24.15,214.33 0.17,1.7 -2.8,2.12 -3.03,0.4" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path794"></path>
                                <path d="m 1910.5,2448.82 c 4.7,-27.52 7.65,-55.34 12.27,-82.9 4.62,-27.48 9.25,-54.97 14.01,-82.43 9.52,-54.9 19.18,-109.77 28.91,-164.62 19.41,-109.28 39.26,-218.47 59.19,-327.65 11.26,-61.69 21.25,-123.74 34.53,-185.04 0.58,-2.66 4.39,-1.46 4.01,1.11 -8.09,55.13 -18.91,109.89 -28.72,164.73 -9.83,54.85 -19.48,109.73 -29.16,164.6 -19.3,109.31 -38.65,218.61 -58.32,327.85 -5.52,30.68 -11.09,61.33 -16.74,91.99 -5.72,31 -13.1,61.7 -18.7,92.72 l -1.28,-0.36" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path796"></path>
                                <path d="m 2061.46,1578.08 c 18.95,-82.5 35.01,-165.6 49.89,-248.93 15.15,-84.94 29.9,-169.95 45.35,-254.83 4.3,-23.61 8.65,-47.19 13.09,-70.77 4.44,-23.55 7.37,-48.339 14.77,-71.171 0.59,-1.809 3.66,-1.629 3.51,0.48 -1.51,20.692 -6.8,41.313 -10.54,61.7 -3.9,21.221 -7.72,42.461 -11.49,63.711 -7.49,42.3 -14.77,84.62 -22.08,126.94 -14.62,84.75 -30.34,169.31 -47.27,253.62 -9.45,47 -19.48,93.89 -30.42,140.57 -0.74,3.13 -5.54,1.81 -4.81,-1.32" style="fill:#a92b28;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path798"></path>
                                <path d="m 2037.54,2831.19 c 28.42,-64.79 12.28,-140.36 -13.56,-206.23 -25.84,-65.87 -61.24,-129.18 -71.67,-199.16 -9.64,-64.72 3.46,-132.59 36.5,-189.07 33.84,-57.83 86.58,-102.22 124.73,-157.31 57.83,-83.52 79.19,-191.4 57.54,-290.67 -16.51,-75.73 -56.09,-144.12 -84.31,-216.32 -28.23,-72.2 -44.71,-154.91 -14.14,-226.15 -36.15,5.41 -57.89,42.94 -78.49,73.12 -55.25,80.98 -70.62,163.94 -66.91,261.9 2.2,58.38 40.28,164.97 37.66,223.32 -7.43,165.6 -194.69,274.37 -263.67,425.12 -52.98,115.76 -70.28,247.55 -48.98,373.07 2.24,13.23 34.33,20.27 46.54,25.83 33.93,15.48 67.87,30.94 101.81,46.42 71.82,32.74 158.87,44.52 236.95,56.13" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path800"></path>
                                <path d="m 2913.83,3871.1 c 61.77,-112.17 107.56,-232.59 136.5,-357.31 25.11,-108.21 39.82,-221.35 89.71,-321.92 25.05,-50.47 59.45,-92.81 100.73,-130.88 43.3,-39.95 90.85,-77.13 121.78,-128.21 30.82,-50.91 44.75,-111.63 39.59,-170.89 -5.34,-61.28 -36.24,-116.43 -43.8,-177.29 -13.6,-109.61 35.12,-232.33 128.26,-294.66 3.18,-2.12 7.19,2.94 4.13,5.35 -83.51,66.08 -134,167.08 -126.25,274.76 4.43,61.35 34.78,116.18 43.23,176.63 7.44,53.11 -0.48,107.94 -22.04,157.01 -23.29,53.04 -63.37,93.39 -105.86,131.53 -43.77,39.31 -86.31,78.12 -116.8,129.12 -57.9,96.84 -75.38,211.2 -99.02,319.74 -29.73,136.56 -78.02,267.15 -147.41,388.63 -1.01,1.78 -3.74,0.19 -2.75,-1.61" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path802"></path>
                                <path d="m 1630.01,2464.88 c 10.89,-63.16 32.77,-124.14 64.72,-179.72 16.05,-27.92 34.64,-54.31 55.47,-78.87 22.39,-26.41 48.02,-49.6 72.3,-74.2 48.34,-48.98 83.69,-107.71 100.82,-174.63 8.47,-33.06 12.36,-67.21 11.38,-101.33 -1.09,-37.23 -7.79,-73.97 -11.83,-110.93 -6.83,-62.64 -5.89,-144.4 49.12,-186.94 2.13,-1.65 4.94,0.94 3.04,3.04 -45.96,50.61 -51.66,116.23 -44.68,181.48 4.04,37.79 11.04,75.31 12.17,113.35 0.92,30.65 -2.1,61.43 -8.72,91.36 -13.25,59.88 -41,116.51 -80.7,163.3 -23.03,27.14 -50.07,50.43 -74.79,75.95 -23.05,23.8 -43.74,49.72 -62.07,77.3 -40.59,61.09 -68.26,130.03 -81.52,202.14 -0.57,3.1 -5.24,1.77 -4.71,-1.3" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path804"></path>
                                <path d="m 2019.05,2645.38 c -49.82,-88.71 -79.69,-194.61 -62.84,-296.53 8.45,-51.07 30.27,-97.15 58.51,-140.13 29.69,-45.19 64.77,-86.84 92.01,-133.64 31.49,-54.15 52.72,-116.47 39.33,-179.41 -0.79,-3.75 4.81,-5.35 5.8,-1.59 26.98,103.5 -44,197.97 -101.01,276.7 -31.24,43.15 -61.84,87.91 -77.92,139.22 -16.23,51.79 -18.11,107.05 -9.91,160.48 9.3,60.75 31.08,118.65 59.1,173.1 1.04,2.03 -1.93,3.81 -3.07,1.8" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path806"></path>
                                <path d="m 2110.67,2042.81 c 45.24,-68.73 70.05,-149.66 73.19,-231.77 1.58,-41.6 -2.54,-83.41 -12.68,-123.81 -10.58,-42.18 -28.42,-81.88 -45.55,-121.68 -17.94,-41.63 -37.29,-85.21 -41.17,-130.86 -0.2,-2.49 3.83,-3.02 4.37,-0.59 9.83,44.52 24.47,86.27 42.48,128.13 16.82,39.07 34.41,78.03 45.18,119.32 20.33,77.9 18.55,161 -3.79,238.25 -12.86,44.41 -32.98,86.59 -58.82,124.88 -1.33,1.96 -4.52,0.13 -3.21,-1.87" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path808"></path>
                                <path d="m 2161.28,1795 c -16.69,-145.45 -109.6,-279.35 -83.13,-429.75 6.2,-35.11 19.4,-69.15 42.38,-96.72 1.83,-2.21 5.66,0.71 4,3.09 -114.02,164.35 22.87,352.16 38.67,523.38 0.12,1.24 -1.78,1.21 -1.92,0" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path810"></path>
                                <path d="m 1937.79,1717.67 c -20.86,-50.5 -26.69,-105.75 -16.97,-159.5 9.36,-51.74 33.08,-107.05 72.78,-142.8 2.35,-2.12 5.32,1.02 3.4,3.4 -34.09,42.4 -59.76,87 -70.04,141.1 -9.95,52.35 -5.66,107.37 14.61,156.75 0.97,2.34 -2.83,3.34 -3.78,1.05" style="fill:#5b3318;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path812"></path>
                                <path d="m 2775.33,3180.04 c 9.93,-76 -4.89,-151.69 -23.95,-225.06 -9.76,-37.56 -20.7,-74.79 -30.44,-112.35 -9.16,-35.27 -18.02,-71.12 -21.95,-107.42 -3.68,-34.07 -3.38,-77.51 20.17,-105.16 1.43,-1.67 3.86,0.46 2.93,2.25 -7.99,15.41 -14.59,30.37 -17.36,47.66 -2.77,17.21 -2.44,34.86 -0.77,52.17 3.52,36.49 12.5,72.6 21.63,108.03 18.63,72.38 42,143.89 52.07,218.19 5.48,40.55 6.52,81.53 0.73,122.1 -0.25,1.72 -3.28,1.33 -3.06,-0.41" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path814"></path>
                                <path d="m 2704.09,2957.73 c -16.27,-39.07 -30.49,-78.87 -41.84,-119.66 -5.67,-20.36 -10.52,-40.93 -14.75,-61.63 -3.21,-15.77 -8.32,-34.48 2.47,-48.47 1.2,-1.55 3.82,-0.2 2.74,1.6 -9.85,16.39 -2.33,38.78 1.3,56.01 4.12,19.52 8.82,38.94 14,58.21 10.34,38.5 22.81,76.52 37.8,113.47 0.43,1.07 -1.29,1.51 -1.72,0.47" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path816"></path>
                                <path d="m 1985.28,3140.48 c 24.57,-63.86 37.57,-132.24 39.94,-200.57 1.19,-33.92 -0.37,-67.97 -4.59,-101.65 -4.2,-33.45 -12.5,-65.77 -19.64,-98.64 -7.16,-32.95 -14.08,-73.26 3.73,-104.11 0.83,-1.44 3.28,-0.49 2.74,1.16 -5.36,16.29 -8.87,32.47 -8.63,49.71 0.23,16.76 3.03,33.35 6.52,49.7 6.93,32.47 15.3,64.37 19.7,97.35 8.81,66.15 6.65,133.63 -6.09,199.11 -7.19,37.05 -18.04,73.3 -31.59,108.51 -0.49,1.29 -2.58,0.73 -2.09,-0.57" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path818"></path>
                                <path d="m 2089,2941.87 c -4.83,-37.46 -6.72,-75.26 -4.65,-112.99 0.99,-18.08 2.81,-36.1 5.51,-54 2.83,-18.63 5.66,-38.07 11.95,-55.89 0.9,-2.53 4.36,-1.49 3.96,1.1 -2.8,18.04 -7.58,35.77 -10.48,53.83 -3.04,19 -5.26,38.14 -6.55,57.33 -2.5,36.87 -1.86,73.93 2.59,110.62 0.18,1.49 -2.14,1.46 -2.33,0" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path820"></path>
                                <path d="m 1769.35,3495.61 c 2.35,-8.27 2.58,-17.7 3.5,-26.23 0.94,-8.76 1.82,-17.52 2.61,-26.29 1.49,-16.68 2.81,-33.39 3.65,-50.11 1.67,-33.23 1.71,-66.59 -0.25,-99.8 -3.83,-65.02 -14.36,-131.78 -36.51,-193.24 -40.88,-113.39 -129.38,-202.52 -166.46,-317.71 -19.07,-59.23 -26.83,-130.25 3.57,-187.23 1.15,-2.15 4.94,-0.65 4.01,1.68 -10.96,27.5 -17.71,55.65 -18.08,85.36 -0.36,29.21 4.51,58.25 12.52,86.29 16.62,58.12 46.94,110.16 78.72,161.09 31.46,50.4 64.27,100.51 86.15,156.02 23.35,59.25 34.37,124.36 39.23,187.63 2.82,36.72 3.17,73.6 1.17,110.37 -0.98,18.33 -2.4,36.65 -4.63,54.87 -1.08,8.85 -2.25,17.69 -3.62,26.5 -1.56,10.1 -4.53,20.69 -4.88,30.89 l -0.7,-0.09" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path822"></path>
                                <path d="m 1670.8,2771.51 c -8.02,-65.51 -13.31,-132.01 -7.48,-197.94 5.63,-63.57 22.52,-125.24 54.69,-180.63 62.49,-107.62 165.78,-183.04 235.35,-285.38 19.71,-29 36.93,-59.94 48.91,-92.96 11.93,-32.9 17.03,-66.48 18.3,-101.34 0.06,-1.96 2.81,-1.89 2.99,0 5.71,59.55 -18.65,120.26 -48.51,170.51 -31.71,53.38 -73.23,99.59 -115.54,144.68 -42.48,45.27 -85.91,90.22 -120.68,141.9 -36.11,53.66 -58.49,113.62 -67.97,177.55 -11,74.11 -6.23,149.58 2.83,223.61 0.23,1.84 -2.66,1.82 -2.89,0" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path824"></path>
                                <path d="m 2014.73,1865.46 c 20.56,-103.25 -26.67,-204.43 -20.46,-307.78 1.54,-25.73 5.75,-52.69 17.35,-75.93 0.75,-1.52 3.25,-0.46 2.75,1.15 -7.53,23.87 -13.34,47.48 -14.89,72.56 -1.5,24.22 -0.22,48.5 2.45,72.61 5.69,51.06 17.85,101.29 21.22,152.63 1.89,28.68 0.89,57.5 -5.05,85.69 -0.47,2.2 -3.81,1.27 -3.37,-0.93" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path826"></path>
                                <path d="m 2012.41,2109.24 c 32.18,-54.92 52.67,-115.97 62.33,-178.79 9.9,-64.41 6.37,-128.74 -6.89,-192.35 -7.82,-37.51 -16.71,-75.3 -14.06,-113.87 0.14,-1.97 3.12,-2.02 3.1,0 -0.26,36.15 7.37,71.5 14.71,106.7 6.65,31.91 11.95,63.86 13.46,96.47 2.92,63.43 -6.39,127.22 -27,187.26 -11.41,33.22 -26.31,65.2 -44.07,95.51 -0.59,1.01 -2.17,0.09 -1.58,-0.93" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path828"></path>
                                <path d="m 3009.82,3238.36 c 30.02,-79.1 82.04,-148.33 150.39,-198.39 37.84,-27.71 80.63,-48.23 108.25,-87.64 24.97,-35.63 37.56,-78.95 41.18,-121.98 5.01,-59.66 -6.16,-118.78 -15.76,-177.39 -0.38,-2.36 3.15,-3.42 3.64,-1.01 18.72,92.53 34.75,195.67 -12.36,282.72 -10.02,18.51 -22.88,35.57 -38.41,49.83 -17.05,15.68 -36.8,27.99 -56.23,40.46 -37.81,24.26 -72.02,52.55 -101.52,86.55 -32.61,37.6 -59.25,80.98 -77.41,127.34 -0.42,1.09 -2.19,0.63 -1.77,-0.49" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path830"></path>
                                <path d="m 3297.11,2588.71 c -7.94,-42.8 -13.56,-86.24 -14.82,-129.79 -0.57,-19.25 0.53,-39.21 7.5,-57.37 5.62,-14.67 15.52,-29.92 30.26,-36.64 1.44,-0.66 3.28,1.18 1.84,2.39 -13.18,11.11 -23.03,23.69 -28.61,40.19 -6.2,18.35 -6.56,38 -6.15,57.17 0.89,41.35 4.93,82.71 12.33,123.4 0.29,1.54 -2.06,2.2 -2.35,0.65" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path832"></path>
                                <path d="m 3184.74,2918.96 c 28.51,-65.29 0.48,-136.94 -31.8,-195.01 -31.74,-57.09 -70.98,-112.29 -79.75,-178.65 -4.3,-32.51 -1.84,-69.2 17.15,-97.05 1.04,-1.52 3.19,-0.22 2.44,1.43 -13.38,29.8 -18.49,60.7 -14.48,93.22 4.07,33.02 16.12,64.3 31.13,93.78 30.35,59.64 72.29,114.52 85.95,181.31 7,34.25 6.14,70.11 -8.19,102.4 -0.74,1.67 -3.18,0.22 -2.45,-1.43" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path834"></path>
                                <path d="m 2733.12,3973.71 c 80.8,-60.17 137.13,-151.01 157.38,-249.52 5.78,-28.12 8.01,-56.31 9.36,-84.93 0.07,-1.43 2.12,-1.42 2.22,0 3.39,50.56 -8.15,103.07 -26.15,150.08 -18.11,47.3 -44.76,91.33 -78.4,129.2 -18.95,21.33 -40.1,40.56 -63.1,57.42 -1.35,1 -2.64,-1.26 -1.31,-2.25" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path836"></path>
                                <path d="m 2825.05,3207.12 c 25.08,-63.97 32.41,-133.2 23.88,-201.23 -0.19,-1.5 2.43,-1.87 2.67,-0.36 11.03,68.06 1.89,138.54 -23.88,202.33 -0.66,1.63 -3.33,0.93 -2.67,-0.74" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path838"></path>
                                <path d="m 1938.84,3185.44 c 16.71,-42.68 10.51,-89.73 -2.69,-132.48 -13.58,-43.99 -35.44,-85.38 -46.05,-130.28 -0.31,-1.3 1.57,-1.81 1.98,-0.55 14.66,45.29 35.48,88.43 48.98,134.08 12.46,42.07 17.26,88.38 0.56,130.01 -0.68,1.7 -3.47,0.97 -2.78,-0.78" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path840"></path>
                                <path d="m 1882.23,2861.5 c -30.81,-82.52 -55.18,-167.81 -60.65,-256.12 -4.85,-78.32 5.71,-157.74 36.63,-230.19 16.86,-39.49 39.74,-76.48 69.48,-107.57 1.27,-1.33 3.17,0.63 2,2 -49.66,58.12 -81.41,128.58 -95.34,203.56 -15.27,82.12 -9.27,166.51 8.51,247.72 10.41,47.58 24.51,94.37 41.24,140.09 0.43,1.18 -1.44,1.68 -1.87,0.51" style="fill:#753d19;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path842"></path>
                                <path d="m 1904.52,3358.23 c -2.64,-1.1 -4.52,-2.96 -5.39,-5.73 -0.69,-2.21 -0.57,-4.81 0.17,-6.99 0.87,-2.58 2.36,-4.76 4.56,-6.38 2.6,-1.92 6.04,-2.6 9.21,-2.38 1.89,0.13 3.78,0.47 5.59,1.01 l 2.21,0.76 1.83,0.8 1.6,1.25 c 1.23,0.98 1.4,3.24 0.58,4.51 -0.95,1.48 -2.51,2.02 -4.21,1.71 l -1.7,-0.4 -1.79,-0.67 c -1.17,-0.39 -2.37,-0.68 -3.58,-0.91 v -0.01 l -0.92,-0.07 -1.85,0.01 -0.39,0.03 0.41,-0.06 -0.9,0.15 -1.76,0.48 -0.06,0.03 -0.48,0.25 -0.52,0.34 0.39,-0.3 -0.27,0.23 -0.81,0.86 0.28,-0.37 -0.21,0.3 -0.31,0.56 -0.27,0.57 0.18,-0.42 -0.09,0.26 -0.34,1.23 -0.04,0.27 0.06,-0.49 -0.05,0.62 0.04,1.22 -0.06,-0.5 0.06,0.34 0.18,0.65 0.09,0.23 -0.16,-0.37 0.32,0.58 -0.09,-0.11 0.46,0.47 -0.08,-0.06 0.07,0.03 0.63,0.32 c 1.52,0.7 1.97,2.8 1.38,4.2 -0.59,1.39 -2.42,2.59 -3.97,1.95" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path844"></path>
                                <path d="m 1973.52,3217.52 c -9.2,-13.14 -18.36,-29.45 -9.85,-45.33 3.61,-6.71 10.24,-11.57 17.83,-12.4 7.59,-0.82 14.84,3.26 19.06,9.42 2.28,3.32 3.9,7.49 4.19,11.53 0.3,4.17 -0.43,9.6 -4.32,11.9 -2.17,1.29 -4.96,0.46 -6.25,-1.64 -1.18,-1.9 -1.1,-3.82 -1.35,-5.95 0.12,0.98 -0.29,-1.2 -0.35,-1.42 l -0.53,-1.78 -0.78,-2.36 c 0.51,1.17 -0.58,-0.99 -0.7,-1.19 -0.15,-0.24 -1.58,-2.19 -0.71,-1.14 l -1.21,-1.35 c -0.2,-0.21 -2.04,-1.76 -0.85,-0.9 l -2.01,-1.22 v 0 l -1.13,-0.34 c -1.35,-0.49 0.79,-0.12 -0.56,-0.11 -0.33,0 -2.78,0.22 -1.31,-0.05 l -2.36,0.65 c 1.34,-0.5 -0.86,0.55 -1.1,0.68 l -0.14,0.02 -0.7,0.6 -1.55,1.56 -0.14,0.13 -0.72,1.06 -1.3,2.24 -0.58,1.16 0.04,-0.07 c -1.3,3.46 -1.58,5.18 -1.07,9.13 1.02,7.88 5.6,15.09 9.65,21.79 1.5,2.46 0.55,5.86 -1.91,7.3 -2.66,1.56 -5.63,0.45 -7.29,-1.92" style="fill:#cd3e37;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path846"></path>
                                <path d="m 2794.14,3231.13 c 4,-6.6 8.46,-13.66 9.62,-21.39 0.28,-1.9 0.34,-3.97 0.06,-5.88 0.17,1.17 -0.32,-1.25 -0.38,-1.48 l -0.6,-1.87 -0.07,-0.23 -0.57,-1.17 -1.31,-2.24 -0.72,-1.06 -0.14,-0.13 -1.54,-1.55 -0.72,-0.61 -0.12,-0.02 c -0.26,-0.13 -2.44,-1.18 -1.12,-0.68 l -2.35,-0.65 c 1.45,0.27 -0.67,0.05 -1.01,0.04 l -0.9,0.06 0.03,0.06 -1.12,0.34 -2,1.23 c 1.15,-0.85 -0.44,0.46 -0.65,0.68 -1.83,1.85 -2.74,3.37 -3.53,5.95 l -0.62,2.08 c -0.05,0.22 -0.45,2.4 -0.35,1.42 -0.24,2.13 -0.16,4.06 -1.33,5.96 -1.29,2.09 -4.09,2.93 -6.25,1.64 -3.67,-2.17 -4.31,-6.77 -4.36,-10.68 -0.04,-3.71 1.26,-7.41 2.96,-10.67 3.49,-6.68 10.28,-11.21 17.82,-11.61 7.78,-0.41 14.58,4.24 18.95,10.33 4.54,6.36 5.52,14.46 4.22,21.99 -1.64,9.48 -7.28,17.79 -12.69,25.52 -1.65,2.35 -4.66,3.45 -7.3,1.91 -2.46,-1.44 -3.4,-4.82 -1.91,-7.29" style="fill:#cd3e37;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path848"></path>
                                <path d="m 2846.43,3353.32 c 8.45,0 8.46,13.13 0,13.13 -8.45,0 -8.47,-13.13 0,-13.13" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path850"></path>
                                <path d="m 2838.82,3304.81 c 8.45,0 8.47,13.13 0,13.13 -8.45,0 -8.47,-13.13 0,-13.13" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path852"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
        </div>
        <div class="bottom">
            <div class="content">
                <span class="name">My Name</span>
                <span class="about-me">Lorem ipsum dolor sit amet consectetur adipisicinFcls </span>
            </div>
           <div class="bottom-bottom">
            <div class="social-links-container">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.999" viewBox="0 0 16 15.999">
                    <path id="Subtraction_4" data-name="Subtraction 4" d="M6-582H-2a4,4,0,0,1-4-4v-8a4,4,0,0,1,4-4H6a4,4,0,0,1,4,4v8A4,4,0,0,1,6-582ZM2-594a4,4,0,0,0-4,4,4,4,0,0,0,4,4,4,4,0,0,0,4-4A4.005,4.005,0,0,0,2-594Zm4.5-2a1,1,0,0,0-1,1,1,1,0,0,0,1,1,1,1,0,0,0,1-1A1,1,0,0,0,6.5-596ZM2-587.5A2.5,2.5,0,0,1-.5-590,2.5,2.5,0,0,1,2-592.5,2.5,2.5,0,0,1,4.5-590,2.5,2.5,0,0,1,2-587.5Z" transform="translate(6 598)"></path>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg>
                  
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>

            </div>
            <button class="button">Contact Me</button>
           </div>
        </div>
    </div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: card, profilecard, cool card, cardhover , card animation, card hover, card design */
.card {
  width: 280px;
  height: 280px;
  background: white;
  border-radius: 32px;
  padding: 3px;
  position: relative;
  box-shadow: #604b4a30 0px 70px 30px -50px;
  transition: all 0.5s ease-in-out;
}

.card .mail {
  position: absolute;
  right: 2rem;
  top: 1.4rem;
  background: transparent;
  border: none;
}

.card .mail svg {
  stroke: #fbb9b6;
  stroke-width: 3px;
}

.card .mail svg:hover {
  stroke: #f55d56;
}

.card .profile-pic {
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  top: 3px;
  left: 3px;
  border-radius: 29px;
  z-index: 1;
  border: 0px solid #fbb9b6;
  overflow: hidden;
  transition: all 0.5s ease-in-out 0.2s, z-index 0.5s ease-in-out 0.2s;
}

.card .profile-pic img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  -o-object-position: 0px 0px;
  object-position: 0px 0px;
  transition: all 0.5s ease-in-out 0s;
}

.card .profile-pic svg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 0px 0px;
  object-position: 0px 0px;
  transform-origin: 45% 20%;
  transition: all 0.5s ease-in-out 0s;
}

.card .bottom {
  position: absolute;
  bottom: 3px;
  left: 3px;
  right: 3px;
  background: #fbb9b6;
  top: 80%;
  border-radius: 29px;
  z-index: 2;
  box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px inset;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.card .bottom .content {
  position: absolute;
  bottom: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 160px;
}

.card .bottom .content .name {
  display: block;
  font-size: 1.2rem;
  color: white;
  font-weight: bold;
}

.card .bottom .content .about-me {
  display: block;
  font-size: 0.9rem;
  color: white;
  margin-top: 1rem;
}

.card .bottom .bottom-bottom {
  position: absolute;
  bottom: 1rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card .bottom .bottom-bottom .social-links-container {
  display: flex;
  gap: 1rem;
}

.card .bottom .bottom-bottom .social-links-container svg {
  height: 20px;
  fill: white;
  filter: drop-shadow(0 5px 5px rgba(165, 132, 130, 0.1333333333));
}

.card .bottom .bottom-bottom .social-links-container svg:hover {
  fill: #f55d56;
  transform: scale(1.2);
}

.card .bottom .bottom-bottom .button {
  background: white;
  color: #fbb9b6;
  border: none;
  border-radius: 20px;
  font-size: 0.6rem;
  padding: 0.4rem 0.6rem;
  box-shadow: rgba(165, 132, 130, 0.1333333333) 0px 5px 5px 0px;
}

.card .bottom .bottom-bottom .button:hover {
  background: #f55d56;
  color: white;
}

.card:hover {
  border-top-left-radius: 55px;
}

.card:hover .bottom {
  top: 20%;
  border-radius: 80px 29px 29px 29px;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
}

.card:hover .profile-pic {
  width: 100px;
  height: 100px;
  aspect-ratio: 1;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  z-index: 3;
  border: 7px solid #fbb9b6;
  box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px;
  transition: all 0.5s ease-in-out, z-index 0.5s ease-in-out 0.1s;
}

.card:hover .profile-pic:hover {
  transform: scale(1.3);
  border-radius: 0px;
}

.card:hover .profile-pic img {
  transform: scale(2.5);
  -o-object-position: 0px 25px;
  object-position: 0px 25px;
  transition: all 0.5s ease-in-out 0.5s;
}

.card:hover .profile-pic svg {
  transform: scale(2.5);
  transition: all 0.5s ease-in-out 0.5s;
}
</style>


================================================
FILE: Cards/Smit-Prajapati_tricky-lionfish-78.html
================================================
<div class="parent">
  <div class="card">
      <div class="content-box">
          <span class="card-title">3D Card</span>
          <p class="card-content">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
          </p>
          <span class="see-more">See More</span>
      </div>
      <div class="date-box">
          <span class="month">JUNE</span>
          <span class="date">29</span>
      </div>
  </div>
</div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: card, card hover, 3d card */
.parent {
  width: 300px;
  padding: 20px;
  perspective: 1000px;
}

.card {
  padding-top: 50px;
  /* border-radius: 10px; */
  border: 3px solid rgb(255, 255, 255);
  transform-style: preserve-3d;
  background: linear-gradient(135deg,#0000 18.75%,#f3f3f3 0 31.25%,#0000 0),
      repeating-linear-gradient(45deg,#f3f3f3 -6.25% 6.25%,#ffffff 0 18.75%);
  background-size: 60px 60px;
  background-position: 0 0, 0 0;
  background-color: #f0f0f0;
  width: 100%;
  box-shadow: rgba(142, 142, 142, 0.3) 0px 30px 30px -10px;
  transition: all 0.5s ease-in-out;
}

.card:hover {
  background-position: -100px 100px, -100px 100px;
  transform: rotate3d(0.5, 1, 0, 30deg);
}

.content-box {
  background: rgba(4, 193, 250, 0.732);
  /* border-radius: 10px 100px 10px 10px; */
  transition: all 0.5s ease-in-out;
  padding: 60px 25px 25px 25px;
  transform-style: preserve-3d;
}

.content-box .card-title {
  display: inline-block;
  color: white;
  font-size: 25px;
  font-weight: 900;
  transition: all 0.5s ease-in-out;
  transform: translate3d(0px, 0px, 50px);
}

.content-box .card-title:hover {
  transform: translate3d(0px, 0px, 60px);
}

.content-box .card-content {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #f2f2f2;
  transition: all 0.5s ease-in-out;
  transform: translate3d(0px, 0px, 30px);
}

.content-box .card-content:hover {
  transform: translate3d(0px, 0px, 60px);
}

.content-box .see-more {
  cursor: pointer;
  margin-top: 1rem;
  display: inline-block;
  font-weight: 900;
  font-size: 9px;
  text-transform: uppercase;
  color: rgb(7, 185, 255);
  /* border-radius: 5px; */
  background: white;
  padding: 0.5rem 0.7rem;
  transition: all 0.5s ease-in-out;
  transform: translate3d(0px, 0px, 20px);
}

.content-box .see-more:hover {
  transform: translate3d(0px, 0px, 60px);
}

.date-box {
  position: absolute;
  top: 30px;
  right: 30px;
  height: 60px;
  width: 60px;
  background: white;
  border: 1px solid rgb(7, 185, 255);
  /* border-radius: 10px; */
  padding: 10px;
  transform: translate3d(0px, 0px, 80px);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 17px 10px -10px;
}

.date-box span {
  display: block;
  text-align: center;
}

.date-box .month {
  color: rgb(4, 193, 250);
  font-size: 9px;
  font-weight: 700;
}

.date-box .date {
  font-size: 20px;
  font-weight: 900;
  color: rgb(4, 193, 250);
}
 
</style>


================================================
FILE: Cards/SmookyDev_afraid-liger-45.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: glassmorphism, card, hover, product, clean, box-shadow, cardhover , tailwind -->
<div
  class="product-card w-[300px] rounded-md shadow-xl overflow-hidden z-[100] relative cursor-pointer snap-start shrink-0 py-8 px-6 bg-white flex flex-col items-center justify-center gap-3 transition-all duration-300 group"
>
  <div
    class="absolute -left-[40%] top-0 group-hover:rotate-12 transition-all duration-300 group-hover:scale-150"
  >
    <div class="flex gap-1">
      <svg
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="1"
        fill="none"
        viewBox="0 0 24 24"
        class="fill-gray-300 rotate-[24deg]"
        height="200"
        width="200"
        xmlns="http://www.w3.org/2000/svg"
      >
        <polygon
          points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
        ></polygon>
      </svg>
    </div>
  </div>
  <div
    class="absolute rounded-full bg-gray-500 z-20 left-1/2 top-[44%] h-[110%] w-[110%] -translate-x-1/2 group-hover:top-[58%] transition-all duration-300"
  ></div>
  <div class="para uppercase text-center leading-none z-40">
    <p class="text-black font-semibold text-xs font-serif">Best</p>
    <p class="font-bold text-xl tracking-wider text-gray-500">Fashion</p>
  </div>
  <div class="img w-[180px] aspect-square bg-gray-100 z-40 rounded-md">
    <svg
      xml:space="preserve"
      viewBox="0 0 498.608 498.608"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      id="Layer_1"
      version="1.1"
    >
      <g>
        <ellipse
          ry="72.08"
          rx="73"
          cy="76.72"
          cx="249.3"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="26.664"
          rx="27"
          cy="63.48"
          cx="177.388"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="26.664"
          rx="27"
          cy="44.816"
          cx="201.388"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="26.664"
          rx="27"
          cy="91.488"
          cx="164.084"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="26.664"
          rx="27"
          cy="118.144"
          cx="164.084"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="20.408"
          rx="20.664"
          cy="139.728"
          cx="160.42"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="20.408"
          rx="20.664"
          cy="160.408"
          cx="153.092"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="17.448"
          rx="17.664"
          cy="17.448"
          cx="215.42"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="17.448"
          rx="17.664"
          cy="19.488"
          cx="237.868"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="26.664"
          rx="27"
          cy="63.48"
          cx="321.204"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="26.664"
          rx="27"
          cy="44.816"
          cx="297.204"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="26.664"
          rx="27"
          cy="91.488"
          cx="334.532"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="26.664"
          rx="27"
          cy="118.144"
          cx="334.532"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="20.408"
          rx="20.664"
          cy="139.728"
          cx="338.188"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="20.408"
          rx="20.664"
          cy="160.408"
          cx="345.548"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="17.448"
          rx="17.664"
          cy="17.448"
          cx="283.228"
          style="fill:#042635;"
        ></ellipse>
        <ellipse
          ry="17.448"
          rx="17.664"
          cy="19.488"
          cx="260.748"
          style="fill:#042635;"
        ></ellipse>
      </g>
      <polygon
        points="450.252,366.408 297.308,319.168 297.308,306.608 201.308,306.608 201.308,319.168 
                    	48.356,366.408 57.308,498.608 57.308,498.608 57.308,498.608 441.308,498.608 443.428,498.608 443.428,498.608"
        style="fill:#CC9789;"
      ></polygon>
      <polygon
        points="450.252,366.408 297.308,319.168 297.308,306.608 201.308,306.608 201.308,319.168 
                    	48.356,366.408 103.404,498.608 57.308,498.608 57.308,498.608 441.308,498.608 443.428,498.608 443.428,498.608"
        style="fill:#BF8377;"
      ></polygon>
      <polygon
        points="450.252,366.408 297.308,319.168 297.308,305.656 246.236,301.48 244.668,319.168 
                    	253.868,366.408 303.164,498.608 57.308,498.608 57.308,498.608 441.308,498.608 443.428,498.608 443.428,498.608"
        style="fill:#A06660;"
      ></polygon>
      <path
        d="M353.972,165.472c0,35.344-51.264,64-104.672,64c-53.376,0-104.656-28.656-104.656-64
                    	s51.28-64,104.656-64C302.708,101.472,353.972,130.128,353.972,165.472z"
        style="fill:#042635;"
      ></path>
      <g>
        <rect
          height="112"
          width="96"
          style="fill:#BF8377;"
          y="218.608"
          x="201.308"
        ></rect>
        <polygon
          points="290.084,311.312 249.308,416.152 199.804,335.424 249.308,285.92"
          style="fill:#BF8377;"
        ></polygon>
      </g>
      <polygon
        points="297.308,343.808 297.308,218.608 202.284,218.608 281.46,442.96"
        style="fill:#A06660;"
      ></polygon>
      <path
        d="M324.268,134.128c0,72.24-36.624,137.624-74.944,137.624s-74.96-65.376-74.96-137.624
                    	s36.64-84.288,74.96-84.288S324.268,61.888,324.268,134.128z"
        style="fill:#CC9789;"
      ></path>
      <path
        d="M249.324,49.84c38.32,0,74.944,12.048,74.944,84.288s-36.624,137.624-74.944,137.624"
        style="fill:#BF8377;"
      ></path>
      <g>
        <path
          d="M259.74,45.08c0,0-69.656,53.328,89.92,117.568c0,0,3.064-70.688-23-101.504
                    		c-26.08-30.8-66.44-27-66.44-27L259.74,45.08z"
          style="fill:#042635;"
        ></path>
        <path
          d="M284.692,35.968c0,0,64.16,71.112-135.672,132.048c0,0-11.784-75.976,18.984-108.528
                    		c30.76-32.552,85.92-27.144,85.92-27.144L284.692,35.968z"
          style="fill:#042635;"
        ></path>
      </g>
      <circle
        r="4.672"
        cy="284.128"
        cx="332.988"
        style="fill:#E5C15C;"
      ></circle>
      <g>
        <path
          d="M196.812,466.152c0,0,70.008-2,119.336-68s51.328-66,78-54.672
                    		c26.664,11.344-25.344-2-18.672,130.672c1.064,21.344-16.672-5.328-16.672-5.328l-81.328,2.656l-39.984,2.488L196.812,466.152z"
          style="fill:#744196;"
        ></path>
        <path
          d="M301.804,466.152c0,0-70.008-2-119.336-68s-51.336-66-78-54.672
                    		c-26.664,11.344,25.344-2,18.672,130.672c-1.064,21.344,16.664-5.328,16.664-5.328l81.336,2.656l39.984,2.488L301.804,466.152z"
          style="fill:#744196;"
        ></path>
      </g>
      <path
        d="M387.724,498.608c-20.88-80-56.76-34-138.416-34c-81.664,0-117.536-46-138.416,34H387.724z"
        style="fill:#9461AF;"
      ></path>
      <path
        d="M113.308,498.608h274.416c-20.872-80-56.416-34.496-137.208-34"
        style="fill:#744196;"
      ></path>
      <g>
        <path
          d="M154.3,188.312c-17.384,0-31.504,14.112-31.504,31.504s14.12,31.504,31.504,31.504
                    		c17.4,0,31.504-14.112,31.504-31.504S171.7,188.312,154.3,188.312z M154.3,237.312c-9.648,0-17.496-7.832-17.496-17.504
                    		s7.84-17.504,17.496-17.504c9.664,0,17.504,7.832,17.504,17.504S163.964,237.312,154.3,237.312z"
          style="fill:#9461AF;"
        ></path>
        <path
          d="M344.3,188.312c-17.384,0-31.496,14.112-31.496,31.504s14.112,31.504,31.496,31.504
                    		c17.4,0,31.504-14.112,31.504-31.504S361.7,188.312,344.3,188.312z M344.3,237.312c-9.648,0-17.504-7.832-17.504-17.504
                    		s7.848-17.504,17.504-17.504c9.664,0,17.504,7.832,17.504,17.504S353.964,237.312,344.3,237.312z"
          style="fill:#9461AF;"
        ></path>
        <path
          d="M317.692,308.824c0,26.496-30.064,48-67.168,48c-37.096,0-67.168-21.504-67.168-48
                    		c0-26.512,30.072-8,67.168-8C287.628,300.824,317.692,282.312,317.692,308.824z"
          style="fill:#9461AF;"
        ></path>
      </g>
      <path
        d="M317.692,308.824c0,26.496-30.064,48-67.168,48c-37.096,0-67.168-21.504-67.168-48
                    	c0-26.512,30.072,21.328,67.168,21.328C287.628,330.152,317.692,282.312,317.692,308.824z"
        style="fill:#744196;"
      ></path>
      <polygon
        points="303.644,302.152 324.316,262.152 358.316,260.152 349.644,286.152 314.316,300.152"
        style="fill:#9461AF;"
      ></polygon>
      <polygon
        points="295.644,324.152 314.316,300.152 356.316,303.48 379.644,325.48 350.316,331.48 
                    	313.644,310.152"
        style="fill:#744196;"
      ></polygon>
      <g>
        <circle
          r="3.76"
          cy="477.728"
          cx="143.068"
          style="fill:#F476D3;"
        ></circle>
        <circle
          r="3.752"
          cy="477.728"
          cx="162.348"
          style="fill:#F476D3;"
        ></circle>
        <circle r="3.76" cy="477.728" cx="181.7" style="fill:#F476D3;"></circle>
        <circle
          r="3.76"
          cy="477.728"
          cx="201.02"
          style="fill:#F476D3;"
        ></circle>
        <circle
          r="3.768"
          cy="477.728"
          cx="220.332"
          style="fill:#F476D3;"
        ></circle>
        <circle
          r="3.752"
          cy="477.728"
          cx="239.644"
          style="fill:#F476D3;"
        ></circle>
        <circle
          r="3.752"
          cy="477.728"
          cx="258.988"
          style="fill:#F476D3;"
        ></circle>
        <circle
          r="3.752"
          cy="477.728"
          cx="278.284"
          style="fill:#F476D3;"
        ></circle>
        <circle
          r="3.752"
          cy="477.728"
          cx="297.628"
          style="fill:#F476D3;"
        ></circle>
        <circle
          r="3.752"
          cy="477.728"
          cx="316.924"
          style="fill:#F476D3;"
        ></circle>
        <circle
          r="3.76"
          cy="477.728"
          cx="336.236"
          style="fill:#F476D3;"
        ></circle>
        <circle
          r="3.76"
          cy="477.728"
          cx="355.548"
          style="fill:#F476D3;"
        ></circle>
      </g>
    </svg>
  </div>
  <div
    class="btm-_container z-40 flex flex-row justify-between items-end gap-10"
  >
    <div class="flex flex-col items-start gap-1">
      <div class="inline-flex gap-3 items-center justify-center">
        <div class="p-1 bg-white flex items-center justify-center rounded-full">
          <svg
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="1"
            fill="none"
            viewBox="0 0 24 24"
            class="fill-gray-800 h-3 w-3 stroke-none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
            ></path>
          </svg>
        </div>
        <p class="font-semibold text-xs text-white">+1234 456 780</p>
      </div>
      <div class="flex flex-row gap-2">
        <div class="inline-flex gap-3 items-center justify-center">
          <div
            class="p-1 bg-white flex items-center justify-center rounded-full"
          >
            <svg
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke-width="1"
              fill="none"
              viewBox="0 0 24 24"
              class="fill-gray-800 h-3 w-3 stroke-white"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
              ></path>
              <polyline points="22,6 12,13 2,6"></polyline>
            </svg>
          </div>
          <p class="font-semibold text-xs text-white">email@gmail.com</p>
        </div>
      </div>
    </div>
    <div class="btn">
      <button
        class="uppercase font-semibold text-xs px-2 whitespace-nowrap py-1 rounded-full bg-white text-gray-800"
      >
        ORDER NOW
      </button>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/SmookyDev_bright-grasshopper-15.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: animation, card, hoverme, cardhover , card hover, tailwind, button hover effect , tailwindcss -->
<div
  class="profile-card w-[300px] rounded-md shadow-xl overflow-hidden z-[100] relative cursor-pointer snap-start shrink-0 bg-white flex flex-col items-center justify-center gap-3 transition-all duration-300 group"
>
  <div
    class="avatar w-full pt-5 flex items-center justify-center flex-col gap-1"
  >
    <div
      class="img_container w-full flex items-center justify-center relative z-40 after:absolute after:h-[6px] after:w-full after:bg-[#58b0e0] after:top-4 after:group-hover:size-[1%] after:delay-300 after:group-hover:delay-0 after:group-hover:transition-all after:group-hover:duration-300 after:transition-all after:duration-300 before:absolute before:h-[6px] before:w-full before:bg-[#58b0e0] before:bottom-4 before:group-hover:size-[1%] before:delay-300 before:group-hover:delay-0 before:group-hover:transition-all before:group-hover:duration-300 before:transition-all before:duration-300"
    >
      <svg
        class="size-36 z-40 border-4 border-white rounded-full group-hover:border-8 group-hover:transition-all group-hover:duration-300 transition-all duration-300"
        id="avatar"
        viewBox="0 0 61.8 61.8"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g data-name="Layer 2">
          <g data-name="—ÎÓÈ 1">
            <path
              d="M31.129 8.432c21.281 0 12.987 35.266 0 35.266-12.266 0-21.281-35.266 0-35.266z"
              fill-rule="evenodd"
              fill="#ffe8be"
            ></path>
            <circle fill="#58b0e0" r="30.9" cy="30.9" cx="30.9"></circle>
            <path
              d="M45.487 19.987l-29.173.175s1.048 16.148-2.619 21.21h35.701c-.92-1.35-3.353-1.785-3.909-21.385z"
              fill-rule="evenodd"
              fill="#60350a"
            ></path>
            <path
              d="M18.135 45.599l7.206-3.187 11.55-.3 7.42 3.897-5.357 11.215-7.613 4.088-7.875-4.35-5.331-11.363z"
              fill-rule="evenodd"
              fill="#d5e1ed"
            ></path>
            <path
              d="M24.744 38.68l12.931.084v8.949l-12.931-.085V38.68z"
              fill-rule="evenodd"
              fill="#f9dca4"
            ></path>
            <path
              opacity=".11"
              d="M37.677 38.778v3.58a9.168 9.168 0 0 1-.04 1.226 6.898 6.898 0 0 1-.313 1.327c-4.37 4.165-11.379.78-12.49-6.333z"
              fill-rule="evenodd"
            ></path>
            <path
              d="M52.797 52.701a30.896 30.896 0 0 1-44.08-.293l1.221-3.098 9.103-4.122c3.262 5.98 6.81 11.524 12.317 15.455A45.397 45.397 0 0 0 43.2 45.483l8.144 3.853z"
              fill-rule="evenodd"
              fill="#434955"
            ></path>
            <path
              d="M19.11 24.183c-2.958 1.29-.442 7.41 1.42 7.383a30.842 30.842 0 01-1.42-7.383zM43.507 24.182c2.96 1.292.443 7.411-1.419 7.384a30.832 30.832 0 001.419-7.384z"
              fill-rule="evenodd"
              fill="#f9dca4"
            ></path>
            <path
              d="M31.114 8.666c8.722 0 12.377 6.2 12.601 13.367.307 9.81-5.675 21.43-12.6 21.43-6.56 0-12.706-12.018-12.333-21.928.26-6.953 3.814-12.869 12.332-12.869z"
              fill-rule="evenodd"
              fill="#ffe8be"
            ></path>
            <path
              d="M33.399 24.983a7.536 7.536 0 0 1 5.223-.993h.005c5.154.63 5.234 2.232 4.733 2.601a2.885 2.885 0 0 0-.785 1.022 6.566 6.566 0 0 1-1.052 2.922 5.175 5.175 0 0 1-3.464 2.312c-.168.027-.34.048-.516.058a4.345 4.345 0 0 1-3.65-1.554 8.33 8.33 0 0 1-1.478-2.53v.003s-.797-1.636-2.072-.114a8.446 8.446 0 0 1-1.52 2.64 4.347 4.347 0 0 1-3.651 1.555 5.242 5.242 0 0 1-.516-.058 5.176 5.176 0 0 1-3.464-2.312 6.568 6.568 0 0 1-1.052-2.921 2.75 2.75 0 0 0-.77-1.023c-.5-.37-.425-1.973 4.729-2.603h.002a7.545 7.545 0 0 1 5.24 1.01l-.001-.001.003.002.215.131a3.93 3.93 0 0 0 3.842-.148l-.001.001zm-4.672.638a6.638 6.638 0 0 0-6.157-.253c-1.511.686-1.972 1.17-1.386 3.163a5.617 5.617 0 0 0 .712 1.532 4.204 4.204 0 0 0 3.326 1.995 3.536 3.536 0 0 0 2.966-1.272 7.597 7.597 0 0 0 1.36-2.37c.679-1.78.862-1.863-.82-2.795zm10.947-.45a6.727 6.727 0 0 0-5.886.565c-1.538.911-1.258 1.063-.578 2.79a7.476 7.476 0 0 0 1.316 2.26 3.536 3.536 0 0 0 2.967 1.272 4.228 4.228 0 0 0 .43-.048 4.34 4.34 0 0 0 2.896-1.947 5.593 5.593 0 0 0 .684-1.44c.702-2.25.076-2.751-1.828-3.451z"
              fill-rule="evenodd"
              fill="#464449"
            ></path>
            <path
              d="M17.89 25.608c0-.638.984-.886 1.598 2.943a22.164 22.164 0 0 0 .956-4.813c1.162.225 2.278 2.848 1.927 5.148 3.166-.777 11.303-5.687 13.949-12.324 6.772 3.901 6.735 12.094 6.735 12.094s.358-1.9.558-3.516c.066-.538.293-.733.798-.213C48.073 17.343 42.3 5.75 31.297 5.57c-15.108-.246-17.03 16.114-13.406 20.039z"
              fill-rule="evenodd"
              fill="#8a5c42"
            ></path>
            <path
              d="M24.765 42.431a14.125 14.125 0 0 0 6.463 5.236l-4.208 6.144-5.917-9.78z"
              fill-rule="evenodd"
              fill="#fff"
            ></path>
            <path
              d="M37.682 42.431a14.126 14.126 0 0 1-6.463 5.236l4.209 6.144 5.953-9.668z"
              fill-rule="evenodd"
              fill="#fff"
            ></path>
            <circle fill="#434955" r=".839" cy="52.562" cx="31.223"></circle>
            <circle fill="#434955" r=".839" cy="56.291" cx="31.223"></circle>
            <path
              d="M41.997 24.737c1.784.712 1.719 1.581 1.367 1.841a2.886 2.886 0 0 0-.785 1.022 6.618 6.618 0 0 1-.582 2.086v-4.949zm-21.469 4.479a6.619 6.619 0 0 1-.384-1.615 2.748 2.748 0 0 0-.77-1.023c-.337-.249-.413-1.06 1.154-1.754z"
              fill-rule="evenodd"
              fill="#464449"
            ></path>
          </g>
        </g>
      </svg>
      <div
        class="absolute bg-[#58b0e0] z-10 size-[60%] w-full group-hover:size-[1%] group-hover:transition-all group-hover:duration-300 transition-all duration-300 delay-700 group-hover:delay-0"
      ></div>
    </div>
  </div>
  <div class="headings *:text-center *:leading-4">
    <p class="text-xl font-serif font-semibold text-[#434955]">ANNA WILSON</p>
    <p class="text-sm font-semibold text-[#434955]">DEVELOPER</p>
  </div>
  <div class="w-full items-center justify-center flex">
    <ul
      class="flex flex-col items-start gap-2 has-[:last]:border-b-0 *:inline-flex *:gap-2 *:items-center *:justify-center *:border-b-[1.5px] *:border-b-stone-700 *:border-dotted *:text-xs *:font-semibold *:text-[#434955] pb-3"
    >
      <li>
        <svg
          id="phone"
          viewBox="0 0 24 24"
          class="fill-stone-700 group-hover:fill-[#58b0e0]"
          height="15"
          width="15"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M0 0h24v24H0V0z" fill="none"></path>
          <path
            d="M19.23 15.26l-2.54-.29c-.61-.07-1.21.14-1.64.57l-1.84 1.84c-2.83-1.44-5.15-3.75-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.64l-.29-2.52c-.12-1.01-.97-1.77-1.99-1.77H5.03c-1.13 0-2.07.94-2 2.07.53 8.54 7.36 15.36 15.89 15.89 1.13.07 2.07-.87 2.07-2v-1.73c.01-1.01-.75-1.86-1.76-1.98z"
          ></path>
        </svg>
        <p>+123-458-784</p>
      </li>
      <li>
        <svg
          class="fill-stone-700 group-hover:fill-[#58b0e0]"
          height="15"
          width="15"
          id="mail"
          viewBox="0 0 32 32"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M16,14.81,28.78,6.6A3,3,0,0,0,27,6H5a3,3,0,0,0-1.78.6Z"
            fill="#231f20"
          ></path>
          <path
            d="M16.54,16.84h0l-.17.08-.08,0A1,1,0,0,1,16,17h0a1,1,0,0,1-.25,0l-.08,0-.17-.08h0L2.1,8.26A3,3,0,0,0,2,9V23a3,3,0,0,0,3,3H27a3,3,0,0,0,3-3V9a3,3,0,0,0-.1-.74Z"
            fill="#231f20"
          ></path>
        </svg>
        <p>smkys@gmail.com</p>
      </li>
      <li>
        <svg
          class="fill-stone-700 group-hover:fill-[#58b0e0]"
          height="15"
          width="15"
          id="globe"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g data-name="Layer 2">
            <path
              data-name="globe"
              d="M22 12A10 10 0 0 0 12 2a10 10 0 0 0 0 20 10 10 0 0 0 10-10zm-2.07-1H17a12.91 12.91 0 0 0-2.33-6.54A8 8 0 0 1 19.93 11zM9.08 13H15a11.44 11.44 0 0 1-3 6.61A11 11 0 0 1 9.08 13zm0-2A11.4 11.4 0 0 1 12 4.4a11.19 11.19 0 0 1 3 6.6zm.36-6.57A13.18 13.18 0 0 0 7.07 11h-3a8 8 0 0 1 5.37-6.57zM4.07 13h3a12.86 12.86 0 0 0 2.35 6.56A8 8 0 0 1 4.07 13zm10.55 6.55A13.14 13.14 0 0 0 17 13h2.95a8 8 0 0 1-5.33 6.55z"
            ></path>
          </g>
        </svg>
        <p>smkydevelopr.com</p>
      </li>
      <li>
        <svg
          id="map"
          viewBox="0 0 16 16"
          class="fill-stone-700 group-hover:fill-[#58b0e0]"
          height="15"
          width="15"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M8 0C5.2 0 3 2.2 3 5s4 11 5 11 5-8.2 5-11-2.2-5-5-5zm0 8C6.3 8 5 6.7 5 5s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"
            fill="#444"
          ></path>
        </svg>
        <p>456 Anytown, Near Anywhere, ST 47523</p>
      </li>
    </ul>
  </div>
  <hr
    class="w-full group-hover:h-5 h-3 bg-[#58b0e0] group-hover:transition-all group-hover:duration-300 transition-all duration-300"
  />
</div>


    

================================================
FILE: Cards/SmookyDev_hungry-cobra-77.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: simple, card, light, light&dark, box-shadow, tailwind -->
<div
  class="flex flex-col gap-1 justify-center items-start w-[280px] bg-white dark:bg-transparent px-4 py-4 shadow-xl rounded-lg"
>
  <p class="font-semibold text-xl text-gray-600 mb-2">Tags</p>
  <div class="flex flex-wrap gap-2">
    <p
      class="px-3 py-1 text-[12px] bg-[#d9dfe3] max-w-max rounded font-semibold text-[#7281a3]"
    >
      #uiverse
    </p>
    <p
      class="px-3 py-1 text-[12px] bg-[#d9dfe3] max-w-max rounded font-semibold text-[#7281a3]"
    >
      #html
    </p>

    <p
      class="px-3 py-1 text-[12px] bg-[#d9dfe3] max-w-max rounded font-semibold text-[#7281a3]"
    >
      #css
    </p>
    <p
      class="px-3 py-1 text-[12px] bg-[#d9dfe3] max-w-max rounded font-semibold text-[#7281a3]"
    >
      #tailwindcss
    </p>

    <p
      class="px-3 py-1 text-[12px] bg-[#d9dfe3] max-w-max rounded font-semibold text-[#7281a3]"
    >
      #hoverme
    </p>
    <p
      class="px-3 py-1 text-[12px] bg-[#d9dfe3] max-w-max rounded font-semibold text-[#7281a3]"
    >
      #figma
    </p>

    <p
      class="px-3 py-1 text-[12px] bg-[#d9dfe3] max-w-max rounded font-semibold text-[#7281a3]"
    >
      #card
    </p>
    <p
      class="px-3 py-1 text-[12px] bg-[#d9dfe3] max-w-max rounded font-semibold text-[#7281a3]"
    >
      #PSD
    </p>
  </div>
</div>


    

================================================
FILE: Cards/SmookyDev_nasty-zebra-5.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: animation, email, card, card template, cool card, cardhover , card animation, tailwind -->
<div class="card">
  <div
    class="relative bg-black w-[300px] sm:w-[350px] group transition-all duration-700 aspect-video flex items-center justify-center"
  >
    <div
      class="transition-all flex flex-col items-center py-5 justify-start duration-300 group-hover:duration-1000 bg-white w-full h-full absolute group-hover:-translate-y-16"
    >
      <p class="text-xl sm:text-2xl font-semibold text-gray-500 font-serif">
        Thank You
      </p>
      <p class="px-10 text-[10px] sm:text-[12px] text-gray-700">
        It’s so nice that you had the time to view this idea
      </p>
      <p class="font-serif text-[10px] sm:text-[12px text-gray-700">
        Wishing you a fantastic day ahead!
      </p>
      <p class="font-sans text-[10px] text-gray-700 pt-5">SMOOKYDEV</p>
    </div>
    <button
      class="seal bg-rose-500 text-red-800 w-10 aspect-square rounded-full z-40 text-[10px] flex items-center justify-center font-semibold [clip-path:polygon(50%_0%,_80%_10%,_100%_35%,_100%_70%,_80%_90%,_50%_100%,_20%_90%,_0%_70%,_0%_35%,_20%_10%)] group-hover:opacity-0 transition-all duration-1000 group-hover:scale-0 group-hover:rotate-180 border-4 border-rose-900"
    >
      SMKY
    </button>
    <div
      class="tp transition-all duration-1000 group-hover:duration-100 bg-neutral-800 absolute group-hover:[clip-path:polygon(50%_0%,_100%_0,_0_0)] w-full h-full [clip-path:polygon(50%_50%,_100%_0,_0_0)]"
    ></div>
    <div
      class="lft transition-all duration-700 absolute w-full h-full bg-neutral-900 [clip-path:polygon(50%_50%,_0_0,_0_100%)]"
    ></div>
    <div
      class="rgt transition-all duration-700 absolute w-full h-full bg-neutral-800 [clip-path:polygon(50%_50%,_100%_0,_100%_100%)]"
    ></div>
    <div
      class="btm transition-all duration-700 absolute w-full h-full bg-neutral-900 [clip-path:polygon(50%_50%,_100%_100%,_0_100%)]"
    ></div>
  </div>
</div>


    

================================================
FILE: Cards/SmookyDev_odd-grasshopper-27.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: material design, tooltip, animation, card, product, hover effect, tailwind -->
<div
  class="product-card w-[300px] rounded-md shadow-xl overflow-hidden z-[100] relative cursor-pointer snap-start shrink-0 py-8 px-6 bg-white flex flex-col items-center justify-center gap-3 transition-all duration-300 group"
>
  <div class="para uppercase text-center leading-none z-40">
    <p
      style="-webkit-text-stroke: 1px rgb(207, 205, 205);
                -webkit-text-fill-color: transparent;"
      class="z-10 font-bold text-lg -mb-5 tracking-wider text-gray-500"
    >
      New Product
    </p>
    <p class="font-bold text-xl tracking-wider text-[#495c48] z-30">
      New Product
    </p>
  </div>
  <div
    class="w-[180px] aspect-square relative z-20 after:absolute after:h-1 after:w-full after:opacity-0 after:bg-[#7b956a] after:top-8 after:left-0 after:group-hover:opacity-100 after:translate-x-1/2 after:translate-y-1/2 after:-z-20 after:group-hover:w-full after:transition-all after:duration-300 after:group-hover:origin-right after:group-hover:-translate-x-1/2 group-hover:translate-x-1/2 transition-all duration-300"
  >
    <svg
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
      text-rendering="geometricPrecision"
      shape-rendering="geometricPrecision"
      image-rendering="optimizeQuality"
      fill-rule="evenodd"
      clip-rule="evenodd"
    >
      <linearGradient
        y2="0"
        y1="512"
        x2="256"
        x1="256"
        gradientUnits="userSpaceOnUse"
        id="id0"
      >
        <stop stop-color="#495c48" offset="0"></stop>
        <stop stop-color="#9db891" offset=".490196"></stop>
        <stop stop-color="#7b956a" offset="1"></stop>
      </linearGradient>
      <g id="Layer_x0020_1">
        <path
          fill="url(#id0)"
          d="m310 512h-108c-16.4 0-31.9-6.5-43.7-18.3s-18.3-27.3-18.3-43.7v-261c0-29.8 24.2-54 54-54h123c30.3 0 55 24.2 55 54v261c0 16.4-6.5 31.9-18.3 43.7s-27.3 18.3-43.7 18.3zm-90-439v-34c0-23 9.9-39 24-39h24c13.5 0 24 17.1 24 39v34zm-33 48.36v-27.36c0-3.9 3.1-7 7-7h124c3.9 0 7 3.1 7 7v27.46c-2.63-.3-5.3-.46-8-.46h-123c-2.36 0-4.7.12-7 .36zm69 71.6c-33.94 54.87-38.25 93.49-29.7 116.4 5.82 15.59 17.8 23.39 29.7 23.39s23.88-7.8 29.7-23.39c8.55-22.91 4.24-61.53-29.7-116.4zm-42.77 121.27c-10.32-27.64-5.23-73.83 36.85-137.91.52-.84 1.22-1.57 2.09-2.14 3.22-2.12 7.54-1.22 9.65 1.99 42.17 64.16 47.27 110.4 36.95 138.06-8.09 21.68-25.39 32.52-42.77 32.52s-34.68-10.84-42.77-32.52zm102.27 126.87c-2.8 0-5.9-.4-9.3-1.3-.1 0-.1 0-.2 0-14-4.2-21.8-18.1-17.7-31.7.1-.4.3-.8.4-1.1.2-.4.4-.8.6-1.3.8-1.9 1.9-4.3 3.8-6.5 24.5-50.8 21.9-118.2 21.9-118.9-.1-3.5 2.3-6.5 5.7-7.2s6.8 1.3 7.9 4.6c3.3 9.6 11.2 41 15.2 73.2 5.1 42 1.8 69.7-9.9 82.2-3.7 4-9.6 8-18.4 8zm-5.6-14.8c8 2.2 11.7-.5 13.7-2.7 12.5-13.4 9.3-57.7 2.8-94.5-2.9 23.5-8.9 51.9-21.2 76.9-.3.7-.8 1.3-1.3 1.9-.6.6-1.3 2.1-1.8 3.4-.2.4-.4.8-.5 1.2-1.5 5.9 2.1 11.9 8.3 13.8zm-113.4 14.8c-8.9 0-14.8-4-18.4-7.9-11.7-12.5-15-40.2-9.9-82.2 3.9-32.2 11.8-63.6 15.2-73.2 1.1-3.3 4.5-5.2 8-4.6 3.4.7 5.8 3.8 5.6 7.3 0 .7-3.5 68 21.8 118.6 1.9 2.2 3 4.7 3.9 6.6.2.5.4.9.6 1.3s.3.7.4 1.1c4.1 13.6-3.7 27.5-17.7 31.7-.1 0-.1 0-.2 0-3.4.9-6.5 1.3-9.3 1.3zm-11.2-110.6c-6.3 36.5-9.3 79.8 3.1 93.1 2 2.2 5.7 4.8 13.7 2.7 6.3-1.9 9.9-7.9 8.4-13.8-.2-.4-.4-.8-.5-1.2-.5-1.2-1.2-2.7-1.8-3.4-.5-.5-1-1.1-1.3-1.8-12.7-24.5-18.7-52.3-21.6-75.6z"
        ></path>
      </g>
    </svg>
    <div
      class="tooltips absolute top-0 left-0 -translate-x-[150%] p-2 flex flex-col items-start gap-10 transition-all duration-300 group-hover:-translate-x-full"
    >
      <p
        class="text-[#7b956a] font-semibold text-xl uppercase group-hover:delay-1000 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500"
      >
        Toner
      </p>
      <ul class="flex flex-col items-start gap-2">
        <li
          class="inline-flex gap-2 items-center justify-center group-hover:delay-200 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500"
        >
          <svg
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="3"
            class="stroke-[#495c48]"
            stroke="#000000"
            fill="none"
            viewBox="0 0 24 24"
            height="10"
            width="10"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
            <polyline points="22 4 12 14.01 9 11.01"></polyline>
          </svg>
          <p class="text-xs font-semibold text-[#495c48]">Hydration</p>
        </li>
        <li
          class="inline-flex gap-2 items-center justify-center group-hover:delay-300 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500"
        >
          <svg
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="3"
            class="stroke-[#495c48]"
            stroke="#000000"
            fill="none"
            viewBox="0 0 24 24"
            height="10"
            width="10"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
            <polyline points="22 4 12 14.01 9 11.01"></polyline>
          </svg>
          <p class="text-xs font-semibold text-[#495c48]">
            Protect Skin Barrier
          </p>
        </li>
        <li
          class="inline-flex gap-2 items-center justify-center group-hover:delay-400 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500"
        >
          <svg
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="3"
            class="stroke-[#495c48]"
            stroke="#000000"
            fill="none"
            viewBox="0 0 24 24"
            height="10"
            width="10"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
            <polyline points="22 4 12 14.01 9 11.01"></polyline>
          </svg>
          <p class="text-xs font-semibold text-[#495c48]">Reduce Winkles</p>
        </li>
        <li
          class="inline-flex gap-2 items-center justify-center group-hover:delay-500 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500"
        >
          <svg
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="3"
            class="stroke-[#495c48]"
            stroke="#000000"
            fill="none"
            viewBox="0 0 24 24"
            height="10"
            width="10"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
            <polyline points="22 4 12 14.01 9 11.01"></polyline>
          </svg>
          <p class="text-xs font-semibold text-[#495c48]">Anti Inflammatory</p>
        </li>
      </ul>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/SmookyDev_polite-puma-22.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: neumorphism, minimalist, card, product, cool card, card animation, card hover, tailwind -->
<div
  class="m-2 group px-10 py-5 bg-white/10 rounded-lg flex flex-col items-center justify-center gap-2 relative after:absolute after:h-full after:bg-[#abd373] z-20 shadow-lg after:-z-20 after:w-full after:inset-0 after:rounded-lg transition-all duration-300 hover:transition-all hover:duration-300 after:transition-all after:duration-500 after:hover:transition-all after:hover:duration-500 overflow-hidden cursor-pointer after:-translate-y-full after:hover:translate-y-0 [&amp;_p]:delay-200 [&amp;_p]:transition-all"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
    class="w-44 card1img aspect-square text-[#abd373] group-hover:bg-gray-800 text-5xl rounded-full p-2 transition-all duration-300 group-hover:transition-all group-hover:duration-300 group-hover:-translate-y-2 mx-auto"
    viewBox="0 0 256 256"
    xml:space="preserve"
  >
    <defs></defs>
    <g
      style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
      transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
    >
      <path
        d="M 37.712 41.541 c -2.437 -10.14 2.919 -19.609 8.772 -25.137 c -6.221 11.54 -7.41 20.104 -3.461 33.177 l 2.29 -0.854 c -0.882 -2.464 -1.413 -4.873 -1.685 -7.241 c 8.23 -2.355 13.883 -7.209 15.231 -15.926 C 59.796 13.651 52.042 6.72 43.718 0.117 c 3.04 9.758 -11.581 17.964 -10.296 30.949 c 0.271 2.741 0.697 5.33 1.326 7.825"
        style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(127,178,65); fill-rule: nonzero; opacity: 1;"
        transform="matrix(1 0 0 1 0 0)"
        stroke-linecap="round"
      ></path>
      <path
        d="M 34.069 30.999 c 0.917 -12.923 13.599 -21.098 9.649 -30.883 c 1.394 8.216 -9.771 12.38 -12.663 22.195 c -1.575 5.836 -1.151 11.452 3.693 16.579 C 34.119 36.396 33.937 33.751 34.069 30.999 z"
        style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(113,156,64); fill-rule: nonzero; opacity: 1;"
        transform="matrix(1 0 0 1 0 0)"
        stroke-linecap="round"
      ></path>
      <polygon
        points="68.77,61.09 70.46,47.61 43.69,47.61 19.54,47.61 21.23,61.09"
        style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(160,126,99); fill-rule: nonzero; opacity: 1;"
        transform="matrix(1 0 0 1 0 0)"
      ></polygon>
      <polyline
        points="63.11,61.09 59.5,90 44.01,90 30.5,90 26.89,61.09"
        style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(160,126,99); fill-rule: nonzero; opacity: 1;"
        transform="matrix(1 0 0 1 0 0)"
      ></polyline>
      <polygon
        points="62.61,65.09 63.11,61.09 26.89,61.09 27.39,65.09"
        style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(145,107,77); fill-rule: nonzero; opacity: 1;"
        transform="matrix(1 0 0 1 0 0)"
      ></polygon>
    </g>
  </svg>

  <p
    class="cardtxt font-semibold text-gray-200 tracking-wider group-hover:text-gray-700 text-xl"
  >
    Calathea Orbifolia
  </p>
  <p class="blueberry font-semibold text-gray-600 text-xs">
    One of Kind &amp; Unique Plants Collection Here at SMKY.
  </p>
  <div class="ordernow flex flex-row justify-between items-center w-full">
    <p
      class="ordernow-text text-[#abd373] font-semibold group-hover:text-gray-800"
    >
      $21.00
    </p>
    <p
      class="btun4 lg:inline-flex items-center gap-3 group-hover:bg-white/10 bg-[#abd373] shadow-[10px_10px_150px_#ff9f0d] cursor-pointer py-2 px-4 text-sm font-semibold rounded-full butn"
    >
      Order Now
    </p>
  </div>
</div>


    

================================================
FILE: Cards/SmookyDev_ugly-baboon-35.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: simple, material design, card, light&dark, hover effect, hoverme, tailwind -->
<div
  class="service-card w-[300px] shadow-xl cursor-pointer snap-start shrink-0 py-8 px-6 bg-white flex flex-col items-start gap-3 transition-all duration-300 group hover:bg-[#202127]"
>
  <svg
    stroke-linejoin="round"
    stroke-linecap="round"
    stroke-width="2"
    stroke="#000000"
    fill="none"
    viewBox="0 0 24 24"
    class="text-5xl h-12 w-12 stroke-gray-800 group-hover:stroke-gray-400"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect ry="2" rx="2" height="14" width="20" y="3" x="2"></rect>
    <line y2="21" x2="16" y1="21" x1="8"></line>
    <line y2="21" x2="12" y1="17" x1="12"></line>
  </svg>

  <p class="font-bold text-2xl group-hover:text-white text-black/80">
    WEBSITE SEO
  </p>
  <p class="text-gray-400 text-sm">
    Website ravida surna eveti semen the conse tusio anivite dianne one nivam
    acestion vue artin dictum.
  </p>
  <p
    style="-webkit-text-stroke: 1px gray;
                              -webkit-text-fill-color: transparent;"
    class="text-5xl font-bold self-end"
  >
    09
  </p>
</div>


    

================================================
FILE: Cards/SmookyDev_witty-otter-49.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: glassmorphism, icon, animation, 3d, card, hover, advanced, tailwind -->
<div class="flex flex-col gap-5 group mx-2 cursor-pointer">
  <div
    class="bg-gradient-to-r w-44 sm:w-52 aspect-square items-center justify-center flex from-gray-100 to-gray-300"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="group-hover:ease-in-out transition duration-700 group-hover:duration-1000 cursor-pointer object-center object-cover group-hover:scale-110 sm:group-hover:scale-150 w-16 sm:w-28 aspect-square rotate-0 group-hover:-rotate-[360deg] group-hover:stroke-lime-600 fill-lime-600 group-hover:-translate-y-12 group-hover:-skew-y-12 group-hover:skew-x-12"
      fill="currentColor"
      viewBox="0 0 16 16"
    >
      <path
        d="M7.202 15.967a7.987 7.987 0 0 1-3.552-1.26c-.898-.585-1.101-.826-1.101-1.306 0-.965 1.062-2.656 2.879-4.583C6.459 7.723 7.897 6.44 8.052 6.475c.302.068 2.718 2.423 3.622 3.531 1.43 1.753 2.088 3.189 1.754 3.829-.254.486-1.83 1.437-2.987 1.802-.954.301-2.207.429-3.239.33Zm-5.866-3.57C.589 11.253.212 10.127.03 8.497c-.06-.539-.038-.846.137-1.95.218-1.377 1.002-2.97 1.945-3.95.401-.417.437-.427.926-.263.595.2 1.23.638 2.213 1.528l.574.519-.313.385C4.056 6.553 2.52 9.086 1.94 10.653c-.315.852-.442 1.707-.306 2.063.091.24.007.15-.3-.319Zm13.101.195c.074-.36-.019-1.02-.238-1.687-.473-1.443-2.055-4.128-3.508-5.953l-.457-.575.494-.454c.646-.593 1.095-.948 1.58-1.25.381-.237.927-.448 1.161-.448.145 0 .654.528 1.065 1.104a8.372 8.372 0 0 1 1.343 3.102c.153.728.166 2.286.024 3.012a9.495 9.495 0 0 1-.6 1.893c-.179.393-.624 1.156-.82 1.404-.1.128-.1.127-.043-.148ZM7.335 1.952c-.67-.34-1.704-.705-2.276-.803a4.171 4.171 0 0 0-.759-.043c-.471.024-.45 0 .306-.358A7.778 7.778 0 0 1 6.47.128c.8-.169 2.306-.17 3.094-.005.85.18 1.853.552 2.418.9l.168.103-.385-.02c-.766-.038-1.88.27-3.078.853-.361.176-.676.316-.699.312a12.246 12.246 0 0 1-.654-.319Z"
      ></path>
    </svg>
  </div>

  <div class="flex flex-row place-items-center place-content-between">
    <div class="flex flex-col gap-1">
      <p
        class="font-semibold text-lg sm:text-xl relative after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:absolute after:origin-bottom-left after:transform after:ease-in-out after:duration-500 cursor-pointer w-full after:w-full group-hover:after:scale-x-100 group-hover:after:origin-bottom-left after:bg-lime-600 dark:after:bg-lime-500 text-gray-600 dark:text-lime-500"
      >
        3D Animation
      </p>
      <p class="text-sm text-gray-500">Design, Dimension</p>
    </div>
    <div class="-rotate-45 cursor-pointer">
      <svg
        clip-rule="evenodd"
        fill-rule="evenodd"
        stroke-linejoin="round"
        stroke-miterlimit="2"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        class="text-gray-600 font-semibold text-lg sm:text-xl transition-all duration-300 group-hover:transition-all group-hover:duration-300 group-hover:text-gray-200 fill-lime-600 group-hover:bg-lime-600 group-hover:fill-white group-hover:rotate-45 p-px rounded-full w-10 group-hover:rounded-full group-hover:animate-pulse"
      >
        <path
          d="m12.012 1.995c-5.518 0-9.998 4.48-9.998 9.998s4.48 9.998 9.998 9.998 9.997-4.48 9.997-9.998-4.479-9.998-9.997-9.998zm0 1.5c4.69 0 8.497 3.808 8.497 8.498s-3.807 8.498-8.497 8.498-8.498-3.808-8.498-8.498 3.808-8.498 8.498-8.498zm1.528 4.715s1.502 1.505 3.255 3.259c.146.147.219.339.219.531s-.073.383-.219.53c-1.753 1.754-3.254 3.258-3.254 3.258-.145.145-.336.217-.527.217-.191-.001-.383-.074-.53-.221-.293-.293-.295-.766-.004-1.057l1.978-1.977h-6.694c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h6.694l-1.979-1.979c-.289-.289-.286-.762.006-1.054.147-.147.339-.221.531-.222.19 0 .38.071.524.215z"
          fill-rule="nonzero"
        ></path>
      </svg>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/SmookyDev_wonderful-octopus-16.html
================================================
<!-- From Uiverse.io by SmookyDev  - Website: https://mambaui.com/components/weather - Name: https://mambaui.com - Tags: animation, card, tailwind, tailwindcss -->
<div
  class="w-[300px] aspect-video rounded-lg shadow flex flex-col items-center justify-center gap-2 bg-slate-50 group"
>
  <div
    class="flex flex-col items-center p-8 rounded-md w-full sm:px-12 bg-gray-900 text-gray-100"
  >
    <div class="text-center">
      <h2 class="text-xl font-semibold">Dubai</h2>
      <p class="text-sm text-gray-400">March 13</p>
    </div>
    <svg
      class="w-32 h-32 p-6 text-yellow-400 fill-current animate-[spin_5s_linear_infinite;]"
      viewBox="0 0 512 512"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M256,104c-83.813,0-152,68.187-152,152s68.187,152,152,152,152-68.187,152-152S339.813,104,256,104Zm0,272A120,120,0,1,1,376,256,120.136,120.136,0,0,1,256,376Z"
      ></path>
      <rect
        class="animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
        y="16"
        x="240"
        height="48"
        width="32"
      ></rect>
      <rect
        class="animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
        y="448"
        x="240"
        height="48"
        width="32"
      ></rect>
      <rect
        class="animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
        y="240"
        x="448"
        height="32"
        width="48"
      ></rect>
      <rect
        class="animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
        y="240"
        x="16"
        height="32"
        width="48"
      ></rect>
      <rect
        class="animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
        transform="rotate(-45 416 416)"
        y="393.373"
        x="400"
        height="45.255"
        width="32"
      ></rect>
      <rect
        class="animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
        transform="rotate(-45 96 96)"
        y="73.373"
        x="80"
        height="45.255"
        width="32.001"
      ></rect>
      <rect
        class="animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
        transform="rotate(-45.001 96.002 416.003)"
        y="400"
        x="73.373"
        height="32"
        width="45.255"
      ></rect>
      <rect
        class="animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
        transform="rotate(-45 416 96)"
        y="80"
        x="393.373"
        height="32.001"
        width="45.255"
      ></rect>
    </svg>
    <div class="mb-2 text-3xl font-semibold">
      27° <span class="mx-1 font-normal">/</span>19°
    </div>
    <p class="text-gray-400">Sunny</p>
  </div>
</div>


    

================================================
FILE: Cards/SouravBandyopadhyay_friendly-skunk-89.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by SouravBandyopadhyay - Tags: animation, card, hover, bubble, transition */
.one-div {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #ff5f6d, #ffc371, #ffd800);
  position: relative;
  overflow: hidden;
  transform: rotate(45deg);
  animation: rotate 5s infinite linear;
  border-radius: 1.5rem;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.one-div::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, #ffffff, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.8;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.4;
  }

  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.8;
  }
}

.one-div:hover {
  animation-play-state: paused;
}

</style>


================================================
FILE: Cards/SouravBandyopadhyay_giant-squid-24.html
================================================
 <div class="card">
      <p class="card-title">Product Name</p>
      <p class="small-desc">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat
        veritatis nobis saepe itaque rerum nostrum aliquid obcaecati odio
        officia deleniti. Expedita iste et illum, quaerat pariatur consequatur
        eum nihil itaque!
      </p>
      <div class="go-corner">
        <div class="go-arrow">→</div>
      </div>
    </div>
<style>
/* From Uiverse.io by SouravBandyopadhyay - Tags: card, transition, business card */
.card-title {
  color: #262626;
  font-size: 1.5em;
  line-height: normal;
  font-weight: 700;
  margin-bottom: 0.5em;
}

.small-desc {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5em;
  color: #452c2c;
}

.small-desc {
  font-size: 1em;
}

.go-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 2em;
  height: 2em;
  overflow: hidden;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #6293c8, #384c6c);
  border-radius: 0 4px 0 32px;
}

.go-arrow {
  margin-top: -4px;
  margin-right: -4px;
  color: white;
  font-family: courier, sans;
}

.card {
  display: block;
  position: relative;
  max-width: 300px;
  max-height: 320px;
  background-color: #f2f8f9;
  border-radius: 10px;
  padding: 2em 1.2em;
  margin: 12px;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #c3e6ec, #a7d1d9);
  font-family: Arial, Helvetica, sans-serif;
}

.card:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -16px;
  right: -16px;
  background: linear-gradient(135deg, #364a60, #384c6c);
  height: 32px;
  width: 32px;
  border-radius: 32px;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.35s ease-out;
}

.card:hover:before {
  transform: scale(28);
}

.card:hover .small-desc {
  transition: all 0.5s ease-out;
  color: rgba(255, 255, 255, 0.8);
}

.card:hover .card-title {
  transition: all 0.5s ease-out;
  color: #ffffff;
}

</style>


================================================
FILE: Cards/SouravBandyopadhyay_sharp-parrot-48.html
================================================
<!-- From Uiverse.io by SouravBandyopadhyay - Tags: card, profilecard, business card, portfolio, tailwind -->
<div class="flex min-h-screen items-center justify-center">
  <div class="w-64 rounded-lg border-2 border-indigo-500 bg-transparent p-4 text-center shadow-lg dark:bg-gray-800">
    <figure class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-indigo-500 dark:bg-indigo-600">
      
      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-person-fill text-white dark:text-indigo-300" viewBox="0 0 16 16">
        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
      </svg>
      <figcaption class="sr-only">John Doe, Web Developer</figcaption>
    </figure>
    <h2 class="mt-4 text-xl font-bold text-indigo-600 dark:text-indigo-400">John Doe</h2>
    <p class="mb-4 text-gray-600 dark:text-gray-300">Web Developer</p>
    <div class="flex items-center justify-center">
      <a href="#" class="rounded-full bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700 dark:bg-indigo-400 dark:hover:bg-indigo-500">Contact</a>
      <a href="#" class="ml-4 rounded-full bg-gray-300 px-4 py-2 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600">Portfolio</a>
    </div>
  </div>
</div>




================================================
FILE: Cards/SouravBandyopadhyay_tricky-puma-59.html
================================================
<div class="card">
  <img
    class="image"
    alt=""
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a class="instagram" href="https://www.instagram.com/uiverse.io/">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 25"
        height="25"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
        ></path>
      </svg>
    </a>
    <a class="x" href="https://twitter.com/uiverse_io">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
        ></path>
      </svg>
    </a>
    <a class="discord" href="https://discord.gg/KD8ba2uUpT">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 25 25"
        height="25"
        width="25"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by SouravBandyopadhyay  - Tags: simple, animation, black, social, card, dark, hover button, cardhover  */
.card {
  background: linear-gradient(
    112.1deg,
    rgb(32, 38, 57) 11.4%,
    rgb(63, 76, 119) 70.2%
  );
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 350px;
  text-align: center;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.card .image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  margin-bottom: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  object-fit: scale-down;
  transition: transform 0.3s ease-in-out;
}
.card .image:hover {
  animation: pendulum 1s infinite ease-in-out;
}

@keyframes pendulum {
  0% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

.card .heading {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 10px;
}

.card .icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.card .icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.3s ease;
}

.card .icons a:hover {
  background: rgba(255, 255, 255, 0.4);
}

.card .icons svg {
  fill: #f1f4ee;
}

.instagram svg,
.x svg,
.discord svg {
  width: 24px;
  height: 24px;
}

</style>
    

================================================
FILE: Cards/Sourcesketch_giant-owl-78.html
================================================
<div class="card">
  <div class="title-1">Card 1</div>
  <div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s.
  </div>
  <button class="btn">Learn more</button>
  <div class="bar">
    <div class="emptybar"></div>
    <div class="filledbar"></div>
  </div>
</div>

<div class="card">
  <div class="title-1">Card 2</div>
  <div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s.
  </div>
  <button class="btn">Learn more</button>
  <div class="bar">
    <div class="emptybar"></div>
    <div class="filledbar"></div>
  </div>
</div>

<style>
/* From Uiverse.io by Sourcesketch  - Tags: neumorphism, animation, card, shadow, futuristic, blur filter, card hover, 3d card */
.card {
  display: flex;
  height: 280px;
  width: 200px;
  background-color: #2b223f;
  border-radius: 10px;
  box-shadow: -1rem 0 3rem #00000044;
  margin-left: -80px;
  transition: 0.4s ease-out;
  position: relative;
  left: 0px;
}

.card:not(:first-child) {
  margin-left: -50px;
}

.card:hover {
  transform: translateY(-20px);
  transition: 0.4s ease-out;
  text-shadow: 2px 2px 8px #6e5b94;
}

.card:hover ~ .card {
  position: relative;
  left: 50px;
  transform: rotateX(-15deg) rotateY(10deg);
  transition: 0.4s ease-out;
}

.title-1 {
  color: #ffffff;
  font-size: 28px;
  font-weight: 800;
  position: absolute;
  left: 20px;
  top: 15px;
}

.btn {
  position: absolute;
  top: 195px;
  margin: 0 20px;
  width: 120px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background-color: #4a2f7c;
  color: #fff;
  transition: 0.4s ease-out;
}

.btn:hover {
  transition: 0.4s ease-out;
  background-color: #8a4ff8;
  color: #ffffff;
  box-shadow: 0px 0px 20px rgba(157, 71, 255, 0.5),
    0px 5px 5px -1px rgba(163, 58, 233, 0.25),
    inset 4px 4px 8px rgba(219, 175, 255, 0.5),
    inset -4px -4px 8px rgba(137, 19, 216, 0.35);
}

.bar {
  position: relative;
  top: 250px;

  height: 5px;
  width: 100%;
}

.emptybar {
  background-color: #201c29;
  width: 100%;
  height: 100%;
}

.filledbar {
  position: absolute;
  top: 0px;
  z-index: 3;
  width: 0px;
  height: 100%;
  background: #d059ff;
  background: linear-gradient(90deg, #6831cfab, #a777ff 100%);
  transition: 0.6s ease-out;
}

.card:hover .filledbar {
  width: 100%;
  transition: 0.4s ease-out;
}

.content {
  position: absolute;
  padding: 20px;
  top: 60px;
  color: #eae0fd;
  font-size: 0.7rem;
}

.stroke {
  stroke: white;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  transition: 0.6s ease-out;
}

.card:hover .stroke {
  stroke-dashoffset: 100;
  transition: 0.6s ease-out;
}

</style>
    

================================================
FILE: Cards/Spacious74_black-dragon-31.html
================================================
<div class="container">
  <div class="card1"></div>
  <div class="card2"></div>
  <div class="card3">
    * Card stacks are awesome and inspired by real card stack at your table.
  </div>
</div>

<style>
/* From Uiverse.io by Spacious74  - Tags: flashy, card, neon */
.container {
  position: relative;
  margin-top: -100px;
  width: 360px;
}

.container > * {
  width: 340px;
  height: 120px;
  border: solid 1px #bebebe;
  background-color: #1f1f1f;
  position: absolute;
  border-radius: 10px;
  padding: 10px;
  color: #fff;
  box-shadow: 0px 8px 20px -10px #bbbbbb;
  text-shadow: 0px 0px 5px #fff;
  letter-spacing: 1px;
  background-image: radial-gradient(circle 160px at 50% 120%, #353535, #1f1f1f);
}

.card1 {
  width: 300px;
  margin: -20px 0px 0px 20px;
}
.card2 {
  width: 320px;
  margin: -10px 0px 0px 10px;
}

</style>
    

================================================
FILE: Cards/Spacious74_moody-owl-18.html
================================================
<div class="outer">
  <div class="dot"></div>
  <div class="card">
    <div class="ray"></div>
    <div class="text">750k</div>
    <div>Views</div>
    <div class="line topl"></div>
    <div class="line leftl"></div>
    <div class="line bottoml"></div>
    <div class="line rightl"></div>
  </div>
</div>

<style>
/* From Uiverse.io by Spacious74  - Tags: neumorphism, animation, 3d, card, realistic, social media */
.outer {
  width: 300px;
  height: 250px;
  border-radius: 10px;
  padding: 1px;
  background: radial-gradient(circle 230px at 0% 0%, #ffffff, #0c0d0d);
  position: relative;
}

.dot {
  width: 5px;
  aspect-ratio: 1;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 10px #ffffff;
  border-radius: 100px;
  z-index: 2;
  right: 10%;
  top: 10%;
  animation: moveDot 6s linear infinite;
}

@keyframes moveDot {
  0%,
  100% {
    top: 10%;
    right: 10%;
  }
  25% {
    top: 10%;
    right: calc(100% - 35px);
  }
  50% {
    top: calc(100% - 30px);
    right: calc(100% - 35px);
  }
  75% {
    top: calc(100% - 30px);
    right: 10%;
  }
}

.card {
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  border: solid 1px #202222;
  background-size: 20px 20px;
  background: radial-gradient(circle 280px at 0% 0%, #444444, #0c0d0d);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-direction: column;
  color: #fff;
}
.ray {
  width: 220px;
  height: 45px;
  border-radius: 100px;
  position: absolute;
  background-color: #c7c7c7;
  opacity: 0.4;
  box-shadow: 0 0 50px #fff;
  filter: blur(10px);
  transform-origin: 10%;
  top: 0%;
  left: 0;
  transform: rotate(40deg);
}

.card .text {
  font-weight: bolder;
  font-size: 4rem;
  background: linear-gradient(45deg, #000000 4%, #fff, #000);
  background-clip: text;
  color: transparent;
}

.line {
  width: 100%;
  height: 1px;
  position: absolute;
  background-color: #2c2c2c;
}
.topl {
  top: 10%;
  background: linear-gradient(90deg, #888888 30%, #1d1f1f 70%);
}
.bottoml {
  bottom: 10%;
}
.leftl {
  left: 10%;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, #747474 30%, #222424 70%);
}
.rightl {
  right: 10%;
  width: 1px;
  height: 100%;
}

</style>
    

================================================
FILE: Cards/Spacious74_new-dog-87.html
================================================
<div class="card">
  <img
    class="image"
    alt=""
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a class="instagram" href="https://www.instagram.com/uiverse.io/">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 25"
        height="25"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
        ></path>
      </svg>
    </a>
    <a class="x" href="https://twitter.com/uiverse_io">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
        ></path>
      </svg>
    </a>
    <a class="discord" href="https://discord.gg/KD8ba2uUpT">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 25 25"
        height="25"
        width="25"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by Spacious74  - Tags: flashy, animation, card, box-shadow */
.card {
  border: solid 1px #dcfffc;
  padding: 10px 20px;
  border-radius: 25px;
  background-color: #000;
  color: #f0f8ff;
  box-shadow: 0 10px 40px -15px #000;
  background-image: radial-gradient(
      circle 200px at 10% 80%,
      #9f06ec46,
      #00000000
    ),
    radial-gradient(circle 200px at 100% 10%, #41fff263, #00000000);
}
.image {
  filter: drop-shadow(0 0 10px #242025);
  margin: auto;
  display: block;
  max-width: 190px;
  animation: social_image 1.5s ease-in-out infinite alternate;
}
@keyframes social_image {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translateY(15px);
    filter: drop-shadow(0 0 10px #f6d7ffb4) drop-shadow(0 0 30px #41fff288);
  }
}
.heading {
  text-align: center;
  font-weight: bolder;
  letter-spacing: 1px;
  font-size: 1.22rem;
}

.icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
}
.icons a {
  text-decoration: none;
  color: #fff;
}

</style>
    

================================================
FILE: Cards/Spacious74_proud-fly-20.html
================================================
<div class="watch">
  <div class="frame">
    <div class="text">
      <div>09</div>
      <div>55</div>
    </div>
  </div>
  <div class="sideBtn"></div>
  <div class="powerBtn"></div>
  <div class="dots">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

<style>
/* From Uiverse.io by Spacious74  - Tags: neumorphism, 3d, social, card */
.watch {
  position: relative;
  transform: scale(0.7);
}
.watch::after,
.watch::before {
  content: "";
  width: 10rem;
  height: 200px;
  background: radial-gradient(circle at 200px, rgb(0, 0, 0), rgb(48, 48, 48));
  box-shadow: inset 0px -10px 18px #ffffffb9, 10px 0px 30px #00000071;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
.watch::before {
  content: "";
  width: 10rem;
  height: 200px;
  background: radial-gradient(circle at 200px, rgb(0, 0, 0), rgb(48, 48, 48));
  box-shadow: inset 0px 10px 18px #ffffffb9, 10px 0px 30px #00000071;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -100%);
}
.dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 140%);
  padding: 3px;
  z-index: 20;
}
.dots .dot {
  width: 17px;
  aspect-ratio: 1;
  background-color: #000000;
  border-radius: 100px;
  display: block;
  margin-bottom: 50px;
  box-shadow: inset 2px 0 5px #ffffff48;
}
.frame {
  background: #0d0d0d;
  border-radius: 92px;
  box-shadow: inset 0 0 24px 1px #0d0d0d, inset 0 0 0 12px #606c78,
    0 20px 30px #00000071;
  height: 380px;
  margin: 0 20px;
  padding: 28px 26px;
  position: relative;
  width: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.text {
  color: #dddf8f;
  font-size: 10rem;
  font-family: serif;
  font-weight: bolder;
  line-height: 0.8;
  text-shadow: 0 0 40px #d7d886c7;
}
.frame::before {
  border: 1px solid #0d0d0d;
  border-radius: 80px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5),
    inset 0 0 12px 2px rgba(255, 255, 255, 0.75);
  content: "";
  height: 356px;
  left: 12px;
  position: absolute;
  top: 12px;
  width: 18.625rem;
}
.sideBtn {
  background: #606c78;
  border-left: 1px solid #000;
  border-radius: 8px 6px 6px 8px / 20px 6px 6px 20px;
  box-shadow: inset 8px 0 8px 0 #1c1f23, inset -2px 0 6px #272c31,
    -4px 0 8px #0d0d0d40;
  height: 72px;
  position: absolute;
  right: 6px;
  top: 108px;
  width: 18px;
  z-index: 9;
}
.sideBtn::before {
  background: #272c31;
  border-radius: 20%;
  box-shadow: 0 -30px rgba(62, 70, 77, 0.75), 0 -27px #272c31, 0 -25px #000,
    0 -21px rgba(62, 70, 77, 0.75), 0 -18px #272c31, 0 -16px #000,
    0 -12px rgba(62, 70, 77, 0.75), 0 -9px #272c31, 0 -7px #000,
    0 -3px rgba(62, 70, 77, 0.75), 0 0 #272c31, 0 2px #000,
    0 6px rgba(62, 70, 77, 0.75), 0 9px #272c31, 0 11px #000,
    0 15px rgba(62, 70, 77, 0.75), 0 18px #272c31, 0 20px #000,
    0 24px rgba(62, 70, 77, 0.75), 0 27px #272c31, 0 29px #000;
  content: "";
  height: 3px;
  margin-top: -2px;
  position: absolute;
  right: 2px;
  top: 50%;
  width: 10px;
  z-index: 9;
}
.sideBtn::after {
  background: #16181b;
  border-radius: 2px 4px 4px 2px / 20px 8px 8px 20px;
  box-shadow: inset -2px 0 2px 0 #000, inset -6px 0 18px #272c31;
  content: "";
  height: 72px;
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
}

.powerBtn {
  background: #272c31;
  border-radius: 2px 4px 4px 2px / 2px 8px 8px 2px;
  box-shadow: inset 0 0 2px 1px #101315;
  height: 72px;
  position: absolute;
  right: 18px;
  top: 212px;
  width: 4px;
}

</style>
    

================================================
FILE: Cards/Spacious74_silent-quail-90.html
================================================
<div class="laptop">
  <div class="screen">
    <div class="header"></div>
    <div class="text">Hello MackBook</div>
  </div>
  <div class="keyboard"></div>
</div>

<style>
/* From Uiverse.io by Spacious74  - Tags: animation, 3d, apple, card, ios */
.laptop {
  transform: scale(0.8);
}
.screen {
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px #c8cacb, inset 0 0 0 10px #000;
  height: 318px;
  width: 518px;
  margin: 0 auto;
  padding: 9px 9px 23px 9px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(
    15deg,
    #3f51b1 0%,
    #5a55ae 13%,
    #7b5fac 25%,
    #8f6aae 38%,
    #a86aa4 50%,
    #cc6b8e 62%,
    #f18271 75%,
    #f3a469 87%,
    #f7c978 100%
  );
  transform-style: preserve-3d;
  transform: perspective(1900px) rotateX(-88.5deg);
  transform-origin: 50% 100%;
  animation: open 4s infinite alternate;
}
@keyframes open {
  0% {
    transform: perspective(1900px) rotateX(-88.5deg);
  }
  100% {
    transform: perspective(1000px) rotateX(0deg);
  }
}
.screen::before {
  content: "";
  width: 518px;
  height: 12px;
  position: absolute;
  background: linear-gradient(#979899, transparent);
  top: -3px;
  transform: rotateX(90deg);
  border-radius: 5px 5px;
}

.text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 0 0 5px #fff;
}
.header {
  width: 100px;
  height: 12px;
  position: absolute;
  background-color: #000;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -0%);
  border-radius: 0 0 6px 6px;
}
.screen::after {
  background: linear-gradient(to bottom, #272727, #0d0d0d);
  border-radius: 0 0 20px 20px;
  bottom: 2px;
  content: "";
  height: 24px;
  left: 2px;
  position: absolute;
  width: 514px;
}
.keyboard {
  background: radial-gradient(circle at center, #e2e3e4 85%, #a9abac 100%);
  border: solid #a0a3a7;
  border-radius: 2px 2px 12px 12px;
  border-width: 1px 2px 0 2px;
  box-shadow: inset 0 -2px 8px 0 #6c7074;
  height: 24px;
  margin-top: -10px;
  position: relative;
  width: 620px;
  z-index: 9;
}
.keyboard::after {
  background: #e2e3e4;
  border-radius: 0 0 10px 10px;
  box-shadow: inset 0 0 4px 2px #babdbf;
  content: "";
  height: 10px;
  left: 50%;
  margin-left: -60px;
  position: absolute;
  top: 0;
  width: 120px;
}
.keyboard::before {
  background: 0 0;
  border-radius: 0 0 3px 3px;
  bottom: -2px;
  box-shadow: -270px 0 #272727, 250px 0 #272727;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -10px;
  position: absolute;
  width: 40px;
}

</style>
    

================================================
FILE: Cards/Spacious74_spotty-crab-93.html
================================================
<div class="card">
  <div class="shadow">⚠ Always follow traffic rules.</div>
</div>

<style>
/* From Uiverse.io by Spacious74  - Tags: animation, 3d, social, card, 3d card */
.card {
  width: 500px;
  height: 120px;
  background: #353535;
  transform-style: preserve-3d;
  transform: perspective(30rem) rotateX(30deg);
  position: relative;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.card::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 70%,
    #353535 70%,
    #353535 100%
  );
  background-size: 120px;
  animation: animateRoad 0.5s linear infinite;
}
@keyframes animateRoad {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: -120px;
  }
}

.card::after {
  content: "";
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: -20px;
  background-color: #272727;
  transform-origin: top;
  transform: perspective(30rem) rotateX(-30deg);
  box-shadow: 0 10px 20px -2px #272727;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.shadow {
  color: #fff;
  padding: 10px;
  letter-spacing: 1px;
}

</style>
    

================================================
FILE: Cards/Spacious74_tame-catfish-19.html
================================================
<div class="card">
  <div class="stripe">
    <div class="text">Uiverse Homepod</div>
  </div>
  <div class="frame"></div>
</div>

<style>
/* From Uiverse.io by Spacious74  - Tags: neumorphism, skeuomorphism, 3d, card, social media, 3d card */
.card {
  position: relative;
}
.card .text {
  text-align: center;
  background-color: #bebebe;
  width: 190px;
  padding: 3px 0;
  margin: auto;
  margin-top: 150px;
  border: solid 2px;
  border-radius: 10px;
  font-weight: bold;
  color: #3d3d3d;
  box-shadow: 0px 1px, inset 0 0 4px #000, 3px 3px 3px #000000a6;
}
.stripe {
  background: repeating-linear-gradient(
      45deg,
      rgba(141, 143, 149, 0.35) 0,
      rgba(141, 143, 149, 0.35) 2px,
      transparent 2px,
      transparent 6px
    ),
    repeating-linear-gradient(
      135deg,
      rgba(141, 143, 149, 0.35) 0,
      rgba(141, 143, 149, 0.35) 2px,
      transparent 2px,
      transparent 6px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 2px,
      rgba(29, 30, 32, 0.35) 2px,
      rgba(29, 30, 32, 0.35) 4px,
      transparent 4px,
      transparent 6px
    ),
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 2px,
      rgba(29, 30, 32, 0.35) 2px,
      rgba(29, 30, 32, 0.35) 4px,
      transparent 4px,
      transparent 6px
    );
  border-radius: 80px;
  box-shadow: inset 0 0 0 2px #36373a, inset 0 0 40px 1px #1d1e20,
    inset 0 12px 24px 1px #9b9ca1, inset 0 -12px 24px 1px #050505;
  height: 385px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 5px;
  width: 320px;
  z-index: 9;
  color: #404040;
}

.frame {
  background: linear-gradient(
    to right,
    #36373a 0,
    #8d8f95 25%,
    #1d1e20 60%,
    #111112 90%,
    #1d1e20 100%
  );
  border-radius: 80px;
  box-shadow: inset 0 0 0 2px #36373a, inset 0 0 40px 1px #1d1e20,
    inset 0 12px 40px 1px #fff, inset 0 -24px 40px 1px #000;
  height: 385px;
  margin: 5px auto;
  position: relative;
  width: 320px;
}
.frame::after,
.frame::before {
  content: "";
  position: absolute;
  border-radius: 50% 50% 8px 8px;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 10px;
  width: 170px;
  background-color: #404040;
}
.frame::after {
  bottom: 0;
  border-radius: 0 0 10% 10% / 0 0 8px 8px;
  transform: translate(-50%, 50%);
  background-color: #131313;
}

</style>
    

================================================
FILE: Cards/Spacious74_warm-hound-89.html
================================================
<div class="bgblue">
  <div class="card">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem molestiae
    explicabo placeat atque praesentium, dolorum corporis amet non, aliquid
    quasi voluptate delectus nulla exercitationem eius eum, ducimus architecto
    dolores suscipit!
  </div>
</div>

<style>
/* From Uiverse.io by Spacious74  - Tags: flashy, 3d, gradient, card, dark */
.bgblue {
  background: linear-gradient(135deg, #fffffff5, #3a4b8a, #ffffff98);
  padding: 1px;
  border-radius: 1.2rem;
  box-shadow: 0px 1rem 1.5rem -0.9rem #000000e1;
  max-width: 300px;
}

.card {
  font-size: 1rem;
  color: #bec4cf;
  background: linear-gradient(135deg, #0d1120 0%, #3a4b8a 43%, #0d1120 100%);
  padding: 1.5rem;
  border-radius: 1.2rem;
}

</style>
    

================================================
FILE: Cards/Spacious74_wicked-rat-71.html
================================================
<div class="card">
  <div class="lc cavity"></div>
  <div class="lc line"></div>
  <div class="led"></div>
  <div class="text">UIVERSE</div>
</div>

<style>
/* From Uiverse.io by Spacious74  - Tags: 3d, social, card, social media, 3d card, airpods, case */
.card {
  width: 270px;
  height: 220px;
  background-color: #e8e9eb;
  border-radius: 70px;
  box-shadow: inset 0px 35px 25px #ffffffe0, inset 10px 0px 25px #0000004b,
    inset 40px 0px 20px #ffffff, inset -10px 0px 25px #0000004b,
    inset -40px 0px 20px #fff, inset 0px 10px 10px #000000e0,
    inset 0px -15px 25px #00000036, 10px 25px 40px -10px #00000060;
  position: relative;
}

.card .line {
  width: 100%;
  height: 2px;
  background-color: #b4b2b2;
  margin-top: 30%;
  position: relative;
}
.line::after,
.line::before {
  content: "";
  position: absolute;
  width: 5%;
  height: 2px;
  background-color: #fff;
}
.line::before {
  right: 0;
}
.card .cavity {
  width: 150px;
  height: 20px;
  background: linear-gradient(180deg, #d6d6d6, #fff);
  border-radius: 200px;
  margin: auto;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 30%);
}
.card .led {
  width: 7px;
  aspect-ratio: 1;
  background-color: #66f66f;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 30%);
  border-radius: 100px;
  box-shadow: 0 0 6px #3eff4b;
}
.card .text {
  text-align: center;
  margin-top: 70px;
  color: #00000036;
  font-weight: bolder;
}

</style>
    

================================================
FILE: Cards/Spektruml_cowardly-bat-67.html
================================================
<div class="card">
  <img
    class="image"
    alt=""
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a class="instagram" href="https://www.instagram.com/uiverse.io/">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 25"
        height="25"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
        ></path>
      </svg>
    </a>
    <a class="x" href="https://twitter.com/uiverse_io">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
        ></path>
      </svg>
    </a>
    <a class="discord" href="https://discord.gg/KD8ba2uUpT">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 25 25"
        height="25"
        width="25"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by Spektruml  - Tags: black, social, card */
.card {
  background-color: #000;
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 300px;
}

.image {
  width: 100px;
  height: auto;
  border-radius: 50%;
  margin-bottom: 20px;
}

.heading {
  font-size: 1.5em;
  margin-bottom: 20px;
}

.icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.icons a {
  color: #fff;
  transition: color 0.3s;
}

.icons a:hover {
  color: #ddd;
}

</style>
    

================================================
FILE: Cards/StealthWorm_curvy-gecko-61.html
================================================
<div class="card-border">
  <div class="card-bg"> 
    <div class="container-logo">
      <div class="logo"></div>
        <div class="logo-inside">
          <div class="first"></div>
          <div class="second"></div>
        </div>
    </div>
    <div id="blur-area"></div>
    <div class="marquee">
      <div class="marquee__inner" aria-hidden="true">
        <span class="viper">viper viper viper viper</span>
        <span class="viper">viper viper viper viper</span>
        <span class="viper">viper viper viper viper</span>
      </div>
    </div>
    
  </div>
	<div class="mist-container">
		<div class="mist"></div>
	</div>
	<strong id="text-ext">Lorem ipsum</strong>
	<strong id="text-border">Lorem ipsum</strong>
</div>
<style>
/* From Uiverse.io by StealthWorm - Tags: card */
.card-border {
  z-index: 0;
  position: relative;
  padding: 1rem;
  width: 300px;
  height: 350px;
  box-sizing: border-box;
  background: transparent;
  backdrop-filter: blur(40px);
  border-radius: 0px 2rem;
  background-image: radial-gradient(#2121218a, #212121cc), linear-gradient(35deg,#124926 62%,#57ff94 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 1px 1px 3rem #57ff95;
  transition: all 0.5s;
  animation: pulse_3011 3s infinite;
}

.card-bg {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0px 0.8rem;
  background: linear-gradient(346.80deg, #124926 30%, #165c30 30%, rgba(255, 70, 84, 0) 30%, rgba(255, 70, 84, 0) 32%, #124926 32%, #124926  35%, transparent 35%);
}

strong {
  display: flex;
  height: 100%;
  width: 100%;
  text-transform: uppercase;
  font-family: 'Open Sans Pro', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  align-items: center;
  letter-spacing: 0.5rem;
}

#text-border {
  position: absolute;
  top: 15.35rem;
  left: 1.5rem;
  width: 100%;
  height: fit-content;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgb(255, 255, 255);
  background: linear-gradient(90deg,  transparent 100%, #ffffff  65%);
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
}

#text-ext {
  z-index: -1;
  display: flex;
  position: absolute;
  inset: 1rem;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #ffffff;
  background: linear-gradient(346.80deg, rgb(255, 255, 255)  30%, #ffffff 30%, #ffffff 30%, rgb(255, 255, 255)  32%, rgb(255, 255, 255)  32%, rgb(255, 255, 255) 35%);
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 9rem 0 0 0.5rem;
}

.marquee {
  top: 0;
  z-index: -5;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  --offset: 2rem;
  --move-initial: calc(-20% + var(--offset));
  --move-final: calc(-85% + var(--offset));
  border-radius: 0px 1rem;
  filter: opacity(0.3);
}

.marquee__inner {
  width: fit-content;
  display: flex;
  position: relative;
  transform: translate3d(var(--move-initial), 0, 0);
  animation: slide 60s linear infinite;
  border-radius: 0px 1rem;
}

.marquee__inner {
  animation-play-state: running;
}

#blur-area {
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  /* border: 1px solid rgb(12, 255, 65); */
  border-radius: 0 1rem;
  backdrop-filter: blur(3px);
  background: linear-gradient(90deg, transparent  0%, #00000044 100%);
}

.viper {
  display: flex;
  text-transform: uppercase;
  font-family: 'Open Sans Pro', sans-serif;
  font-size: 8rem;
  font-weight: 900;
  align-items: center;
  line-height: 0.9em;
  color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: rgb(255, 255, 255);
}

.container-logo {
  display: flex;
  position: absolute;
  width: 3.5rem;
  height: 3em;
  top: 1rem;
  left: 1rem;
  align-items: center;
  justify-content: center;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.logo {
  position: absolute;
  width: 200%;
  height: 200%;
  background: conic-gradient(#228647 0%, #fff 10%, #7bffac 25%, #0d381c 50%, #1ccc5d 70%, #69b384 90%);
  animation: spin 5s linear infinite;
}

.logo-inside {
  display: flex;
  width: 85%;
  height: 85%;
  align-items: center;
  justify-content: center;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background-color: #212121;
}

.first, .second {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #57ff95;
}

.first {
  clip-path: polygon(0 10%, 70% 90%, 35% 90%, 0 50%);
}

.second {
  clip-path: polygon(100% 10%, 100% 50%, 88% 65%, 55% 65%);
}

.mist-container {
  position: absolute;
  width: 450px;
  height: 150px;
  overflow: hidden;
  filter: blur(1rem);
  top: 60%;
  left: 0;
}

.mist {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(131, 255, 158, 0.63) 10%, rgba(255, 255, 255, 0) 50%);
  animation: mist 10s infinite both;
}

svg {
  position: absolute;
  top: 0%;
  width: 18rem;
  height: 100%;
  z-index: -2;
}

.card-border:hover {
  transform: rotateY(20deg);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes mist {
  0% {
    transform: translateX(-50%) translateY(0%) scaleY(0.7) rotate(0deg);
    opacity: 0.3;
  }

  50% {
    transform: translateX(0%) translateY(50%) scaleY(-10.3) rotate(20deg);
    opacity: 0.5;
  }

  100% {
    transform: translateX(-50%) translateY(0%) scaleY(0.7) rotate(-20deg);
    opacity: 0.3;
  }
}

@keyframes pulse_3011 {
  0% {
    box-shadow: 0 0 1rem #57ff95;
  }

  70% {
    box-shadow: 0 0 2rem #57ff95;
  }

  100% {
    box-shadow: 0 0 1rem #57ff95;
  }
}

@keyframes slide {
  0% {
    transform: translate3d(var(--move-initial), 0, 0);
  }

  100% {
    transform: translate3d(var(--move-final), 0, 0);
  }
}
</style>


================================================
FILE: Cards/StefanR1901_empty-mule-38.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by StefanR1901 - Tags: card, heart, pump */
.one-div-container {
  position: relative;
  height: 500px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;
}

.one-div {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,136,0,1) 0%, rgba(255,77,210,1) 50%, rgba(0,212,255,1) 100%);
  box-shadow: 0 0 50px rgba(255,255,255,0.5);
  transition: all 0.5s ease-in-out;
  animation: pulse 2s ease-in-out infinite;
}

.one-div:hover {
  transform: scale(1.2);
  background: radial-gradient(circle, rgba(0,212,255,1) 0%, rgba(255,77,210,1) 50%, rgba(255,136,0,1) 100%);
  box-shadow: 0 0 70px rgba(255,255,255,0.7), 0 0 20px rgba(255,255,255,0.7), 0 0 10px rgba(255,255,255,0.7);
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}
</style>


================================================
FILE: Cards/SteveBloX_dangerous-warthog-85.html
================================================
<div class="card">
  Click me
</div>
<style>
/* From Uiverse.io by SteveBloX - Tags: glassmorphism, card, hover, active */
.card {
  box-sizing: border-box;
  width: 190px;
  height: 254px;
  background: rgba(217, 217, 217, 0.58);
  border: 1px solid white;
  box-shadow: 12px 17px 51px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px);
  border-radius: 17px;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  font-weight: bolder;
  color: black;
}

.card:hover {
  border: 1px solid black;
  transform: scale(1.05);
}

.card:active {
  transform: scale(0.95) rotateZ(1.7deg);
}
</style>


================================================
FILE: Cards/SteveBloX_purple-panther-21.html
================================================
<div class="card"></div>
<style>
/* From Uiverse.io by SteveBloX - Tags: white, card, hover, active, claymorphism */
.card {
  width: 190px;
  height: 254px;
  backdrop-filter: blur(7px);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 26px;
  box-shadow: 35px 35px 68px 0px rgba(157, 177, 255, 0.2), inset -8px -8px 16px 0px rgba(157, 177, 255, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255);
  transition: all 0.3s;
  cursor: pointer;
}

.card:hover {
  box-shadow: 35px 35px 68px 0px rgba(157, 177, 255, 0.5);
}

.card:active {
  transform: scale(0.95);
  border: 1px solid blue;
}
</style>


================================================
FILE: Cards/SujitAdroja_big-treefrog-20.html
================================================

    <div class="card columns">
     
      <div class="button-container">
        <button class="btn red-flag">RED FLAG</button>
        <p class="offer">JOB OFFER</p>
      </div>
      <p class="secondary-heading">
        "As a UX designer,you will design the entire UI."
      </p>
      <p class="card-description">Verify alignment of job description with proposed position.<br>
      
      </p>
    </div>
<style>
/* From Uiverse.io by SujitAdroja - Tags: card, cardgift, cool card, card animation, card hover */
.columns {
  width: 18em;
  position: relative;
  border-radius: 20px;
  padding: 35px;
  border: 2px solid  black;
  transition: all 0.4s;
}

.columns:hover {
  box-shadow: 4px 4px 0 1px rgba(0,0,0);
}

.dots {
  position: absolute;
  right: 15px;
  top: 15px;
}

.columns .button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-bottom: 20px;
}

.offer {
  font-size: 17px;
  font-weight: 900;
  border-bottom: 2px solid black;
  cursor: pointer;
  transition: all 0.4s;
}

.btn {
  padding: 7px 15px;
  border: 1px solid black;
  background-color: orange;
  border-radius: 10px;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s;
}

.columns:hover .btn {
  box-shadow: 2px 2px 0 1px rgba(0,0,0);
}

.columns:hover .offer {
  color: green;
  border-color: green;
}

.btn:focus {
  background: transparent;
}

.secondary-heading {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.card-description {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}
 
</style>


================================================
FILE: Cards/Sujitkavaiya_mighty-pig-81.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by Sujitkavaiya - Tags: card */
.card {
 width: 190px;
 height: 254px;
 background: rgb(255, 255, 255);
 border-radius: 0.4em;
 box-shadow: 0.3em 0.3em 0.7em #00000015;
 transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 border: rgb(250, 250, 250) 0.2em solid;
}

.card:hover {
 border: #006fff 0.2em solid;
}
</style>


================================================
FILE: Cards/TamaniPhiri_smooth-stingray-60.html
================================================
<!-- From Uiverse.io by TamaniPhiri - Tags: card, contact -->
<div class="flex min-h-screen relative items-center justify-center w-full">
  <div class="absolute top-8">hover over the card😁</div>
  <div class="rounded-xl overflow-hidden relative text-center p-4 group items-center flex flex-col max-w-sm hover:shadow-2xl transition-all duration-500 shadow-xl">
    <div class="text-gray-500 group-hover:scale-105 transition-all">
      <svg class="w-16 h-16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" stroke-linejoin="round" stroke-linecap="round"></path>
      </svg>
    </div>
    <div class="group-hover:pb-10 transition-all duration-500 delay-200">
      <h1 class="font-semibold text-gray-700">Tamani Phiri</h1>
      <p class="text-gray-500 text-sm">@senior_developer</p>
    </div>
    <div class="flex items-center transition-all duration-500 delay-200 group-hover:bottom-3 -bottom-full absolute gap-2 justify-evenly w-full">
      <div class="flex gap-3 text-2xl bg-gray-700 text-white p-1 hover:p-2 transition-all duration-500 delay-200 rounded-full shadow-sm">
        <a class="hover:scale-110 transition-all duration-500 delay-200">
          <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
            <path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path>
          </svg>
        </a>
        <a class="hover:scale-110 transition-all duration-500 delay-200">
          <svg width="1em" height="1em" viewBox="0 0 24 24" stroke="currentColor" fill="none">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
            <path d="M22 6l-10 7L2 6"></path>
          </svg>
        </a>
        <a class="hover:scale-110 transition-all duration-500 delay-200">
          <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 960 1000">
            <path d="M480 20c133.333 0 246.667 46.667 340 140s140 206.667 140 340c0 132-46.667 245-140 339S613.333 980 480 980c-132 0-245-47-339-141S0 632 0 500c0-133.333 47-246.667 141-340S348 20 480 20M362 698V386h-96v312h96m-48-352c34.667 0 52-16 52-48s-17.333-48-52-48c-14.667 0-27 4.667-37 14s-15 20.667-15 34c0 32 17.333 48 52 48m404 352V514c0-44-10.333-77.667-31-101s-47.667-35-81-35c-44 0-76 16.667-96 50h-2l-6-42h-84c1.333 18.667 2 52 2 100v212h98V518c0-12 1.333-20 4-24 8-25.333 24.667-38 50-38 32 0 48 22.667 48 68v174h98"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>



================================================
FILE: Cards/TemRevil_green-goose-29.html
================================================
<div class="card"><p>Card</p></div>

<style>
/* From Uiverse.io by TemRevil  - Tags: simple, animation, action, card */
.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 190px;
  height: 254px;
  background: #023047;
  color: white;
  font-size: 32px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.1s 0s linear;
  position: relative;
  overflow: hidden;
}
.card:active {
  scale: 0.95;
}
.card::after {
  content: "";
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background-color: #fb8500;
  position: absolute;
  right: 250px;
  transition: right 0.4s 0s linear;
  z-index: 1;
}
.card:hover::after {
  right: -160px;
}
.card:hover {
  color: #023047;
}
.card p {
  position: absolute;
  z-index: 10;
}

</style>
    

================================================
FILE: Cards/Thomasfadi_fast-puma-64.html
================================================
<div class="container">
  <div class="card">
    <span class="logo"
      ><svg
        viewBox="0 0 256 83"
        height="83"
        width="256"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          <linearGradient
            y2="100%"
            y1="-2.006%"
            x2="54.877%"
            x1="45.974%"
            id="logosVisa0"
          >
            <stop stop-color="#222357" offset="0%"></stop>
            <stop stop-color="#254AA5" offset="100%"></stop>
          </linearGradient>
        </defs>
        <path
          transform="matrix(1 0 0 -1 0 82.668)"
          d="M132.397 56.24c-.146-11.516 10.263-17.942 18.104-21.763c8.056-3.92 10.762-6.434 10.73-9.94c-.06-5.365-6.426-7.733-12.383-7.825c-10.393-.161-16.436 2.806-21.24 5.05l-3.744-17.519c4.82-2.221 13.745-4.158 23-4.243c21.725 0 35.938 10.724 36.015 27.351c.085 21.102-29.188 22.27-28.988 31.702c.069 2.86 2.798 5.912 8.778 6.688c2.96.392 11.131.692 20.395-3.574l3.636 16.95c-4.982 1.814-11.385 3.551-19.357 3.551c-20.448 0-34.83-10.87-34.946-26.428m89.241 24.968c-3.967 0-7.31-2.314-8.802-5.865L181.803 1.245h21.709l4.32 11.939h26.528l2.506-11.939H256l-16.697 79.963h-17.665m3.037-21.601l6.265-30.027h-17.158l10.893 30.027m-118.599 21.6L88.964 1.246h20.687l17.104 79.963h-20.679m-30.603 0L53.941 26.782l-8.71 46.277c-1.022 5.166-5.058 8.149-9.54 8.149H.493L0 78.886c7.226-1.568 15.436-4.097 20.41-6.803c3.044-1.653 3.912-3.098 4.912-7.026L41.819 1.245H63.68l33.516 79.963H75.473"
          fill="url(#logosVisa0)"
        ></path></svg
    ></span>

    <span class="number">
      <div class="wave-group">
        <span class="label-char" style="--index: 0">card</span>
        <span class="label-char" style="--index: 1">number</span>
        <input required="" type="text" class="input" />
        <span class="bar"></span>
        <label class="label">
          <br />
        </label>
      </div>
    </span>
    <span class="owner">Thomas.F</span>
  </div>
</div>

<style>
/* From Uiverse.io by Thomasfadi  - Tags: action, card, creative */
.logo svg {
  height: 48px;
  width: 54px;
}

::selection {
  background-color: rgba(0, 0, 0, 0);
}

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.card {
  background: radial-gradient(circle, white 0%, #d5d5d5 100%);
  width: 300px;
  height: 200px;
  border-radius: 20px;
  position: relative;
  box-shadow: 3px 3px 17px 0px rgba(0, 0, 0, 0.55);
}

.card .remove,
.card .logo {
  position: absolute;
  display: inline-block;
  cursor: pointer;
}

.card .remove {
  top: 30px;
  right: 30px;
  opacity: 0.9;
  color: black;
}

.card .remove:hover {
  color: #f06b5d;
}

.card .logo {
  top: 20px;
  left: 30px;
  font-size: 3em;
  opacity: 1;
}

.card .number,
.card .owner {
  display: block;
  position: absolute;
  left: 30px;
  cursor: default;
  color: black;
  opacity: 0.9;
  transition: color 0.7s ease-out;
}

.card .number {
  bottom: 60px;
  letter-spacing: 4px;
}

.card .owner {
  bottom: 30px;
  letter-spacing: 1px;
}
.wave-group {
  position: relative;
}

.wave-group .input {
  font-size: 16px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 200px;
  border: none;
  border-bottom: 1px solid #515151;
  background: transparent;
}

.wave-group .input:focus {
  outline: none;
}

.wave-group .label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  display: flex;
}

.wave-group .label-char {
  transition: 0.2s ease all;
  transition-delay: calc(var(--index) * 0.05s);
}

.wave-group .input:focus ~ label .label-char,
.wave-group .input:valid ~ label .label-char {
  transform: translateY(-20px);
  font-size: 14px;
  color: #6e7fc1;
}

.wave-group .bar {
  position: relative;
  display: block;
  width: 200px;
}

.wave-group .bar:before,
.wave-group .bar:after {
  content: "";
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #0727a6;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.wave-group .bar:before {
  left: 50%;
}

.wave-group .bar:after {
  right: 50%;
}

.wave-group .input:focus ~ .bar:before,
.wave-group .input:focus ~ .bar:after {
  width: 50%;
}

</style>
    

================================================
FILE: Cards/Tiagoadag_cuddly-catfish-6.html
================================================
<div class="card">
  <div class="card2">
  </div>
</div>
<style>
/* From Uiverse.io by Tiagoadag - Tags: card */
.card {
 width: 190px;
 height: 254px;
 background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
 border-radius: 20px;
 transition: all .3s;
}

.card2 {
 width: 190px;
 height: 254px;
 background-color: #1a1a1a;
 border-radius:;
 transition: all .2s;
}

.card2:hover {
 transform: scale(0.98);
 border-radius: 20px;
}

.card:hover {
 box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30);
}
</style>


================================================
FILE: Cards/TimTrayler_strange-cat-80.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by TimTrayler - Tags: card */
.card {
 width: 200px;
 height: 260px;
 background-color: #212121;
 box-shadow: 15px 15px 30px #191919,
              -15px -15px 30px #292929;
 transition: border-radius cubic-bezier(0.075, 0.82, 0.165, 1) 1s,
              transform cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.card:hover {
 border-bottom-right-radius: 50px;
 border-top-left-radius: 50px;
 transform: scale(1.05);
}

</style>


================================================
FILE: Cards/Toseef-Ahmad_ancient-pug-90.html
================================================
<div class="card">
  <p>Write here</p>
</div>
<svg class="filter">
  <filter id="wavy2">
    <feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="1"></feTurbulence>
    <feDisplacementMap in="SourceGraphic" scale="20"></feDisplacementMap>
  </filter>
</svg>
<style>
/* From Uiverse.io by Toseef-Ahmad - Tags: card */
.card {
  width: 190px;
  height: 254px;
  display: flex;
  padding: 2em;
  box-shadow: 2px 3px 20px black, 0 0 60px #8a4d0f inset;
  background: #fffef0;
  filter: url(#wavy2);
}

.card p {
  color: black;
  font-size: 3rem;
  align-items: center;
}

.filter {
  display: none;
  position: absolute;
}
</style>


================================================
FILE: Cards/Tsiangana_brave-kangaroo-28.html
================================================
<div class="card">
  <div class="paleta">
    <div class="circle">
      <div class="component">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="22"
          height="22"
          fill="currentColor"
          class="bi bi-palette"
          viewBox="0 0 16 16"
        >
          <path
            d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
          ></path>
          <path
            d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
          ></path>
        </svg>
      </div>
    </div>
    <div class="cores cor1">
      <div class="div1"><span class="func">Hover me</span></div>
      <div class="div2">
        <div class="component">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="22"
            height="22"
            fill="currentColor"
            class="bi bi-palette"
            viewBox="0 0 16 16"
          >
            <path
              d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
            ></path>
            <path
              d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
            ></path>
          </svg>
        </div>
      </div>
      <div class="nome">0E3746</div>
    </div>
    <div class="cores cor2">
      <div class="div3"></div>
      <div class="div4">
        <div class="component">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="22"
            height="22"
            fill="currentColor"
            class="bi bi-palette"
            viewBox="0 0 16 16"
          >
            <path
              d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
            ></path>
            <path
              d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
            ></path>
          </svg>
        </div>
      </div>
      <div class="nome">EAE8DC</div>
    </div>
    <div class="cores cor3">
      <div class="div5"></div>
      <div class="div6">
        <div class="component">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="22"
            height="22"
            fill="currentColor"
            class="bi bi-palette"
            viewBox="0 0 16 16"
          >
            <path
              d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
            ></path>
            <path
              d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
            ></path>
          </svg>
        </div>
      </div>
      <div class="nome">F4F2EC</div>
    </div>
    <div class="cores cor4">
      <div class="div7"></div>
      <div class="div8">
        <div class="component">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="22"
            height="22"
            fill="currentColor"
            class="bi bi-palette"
            viewBox="0 0 16 16"
          >
            <path
              d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
            ></path>
            <path
              d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
            ></path>
          </svg>
        </div>
      </div>
      <div class="nome">BE2623</div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Tsiangana  - Tags: simple, card, modern, color, card hover */
.card {
  width: 320px;
  height: 220px;
  perspective: 1000px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 1px 1px 20px #c7c7c7;
}

.card .paleta {
  width: 100%;
  height: 180px;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.component {
  height: 23px;
}

.card .paleta .cores {
  width: 80px;
  height: 180px;
  cursor: pointer;
  transition: 0.3s linear;
  overflow: hidden;
}
.card .paleta .cores:hover {
  width: 120px;
  transition: 0.4s linear;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -60px;
  box-shadow: 1px 1px 8px #c7c7c7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card .paleta .cor1 {
  background-color: #0e3746;
  border-radius: 0px 0px 0px 10px;
}
.card .paleta .cor2 {
  background-color: #eae8dc;
}
.card .paleta .cor3 {
  background-color: #f4f2ec;
}
.card .paleta .cor4 {
  background-color: #be2623;
  border-radius: 0px 0px 10px 0px;
}

.card .paleta .cores .nome {
  width: 100%;
  height: 30px;
  background-color: #fff;
  text-align: center;
  font-size: 11px;
  font-family: Roboto, sans-serif;
  font-weight: 550;
}

.card .paleta .func {
  width: 100px;
  display: block;
  transform: rotate(-90deg);
  position: absolute;
  bottom: 40px;
  margin-left: -41px;
  padding-left: 5px;
  color: #fff;
  font-size: 15px;
  font-family: sans-serif;
  font-weight: 500;
}

.div1 {
  cursor: pointer;
  transition: background-color 0.3s;
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 150px;
}

.div2 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -60px;
  left: 135px;
  box-shadow: 1px 1px 8px #c7c7c7;
  align-items: center;
  justify-content: center;
  display: none;
}

.div1:hover + .div2 {
  background-color: #0e3746;
  display: flex;
  color: #fff;
  animation: cssAnimation_0 1512ms 1 ease-out;
}

.div3 {
  cursor: pointer;
  transition: background-color 0.3s;
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 150px;
}

.div4 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -60px;
  left: 135px;
  box-shadow: 1px 1px 8px #c7c7c7;
  align-items: center;
  justify-content: center;
  display: none;
}

.div3:hover + .div4 {
  background-color: #eae8dc;
  display: flex;
  color: #fff;
  animation: cssAnimation_0 1512ms 1 ease-out;
}

.div5 {
  cursor: pointer;
  transition: background-color 0.3s;
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 150px;
}

.div6 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -60px;
  left: 135px;
  box-shadow: 1px 1px 8px #c7c7c7;
  align-items: center;
  justify-content: center;
  display: none;
}

.div5:hover + .div6 {
  background-color: #f4f2ec;
  display: flex;
  color: #fff;
  animation: cssAnimation_0 1512ms 1 ease-out;
}

.div7 {
  cursor: pointer;
  transition: background-color 0.3s;
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 150px;
}

.div8 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -60px;
  left: 135px;
  box-shadow: 1px 1px 8px #c7c7c7;
  align-items: center;
  justify-content: center;
  display: none;
}

.div7:hover + .div8 {
  background-color: #be2623;
  display: flex;
  color: #fff;
  animation: cssAnimation_0 1512ms 1 ease-out;
}

@keyframes cssAnimation_0 {
  to {
    transform: rotate(360deg) translate(0px, 0px);
  }
}

</style>
    

================================================
FILE: Cards/Tsiangana_lovely-bear-22.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by Tsiangana  - Tags: glassmorphism, card, social media, hover effect */
.card {
  width: 220px;
  height: 350px;
  border-radius: 15px;
  backdrop-filter: blur(15px);
  background-color: #8ec5fc0a;
  background-image: linear-gradient(62deg, #8ec5fc21 0%, #e0c3fc3b 100%);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
}

.card::before {
  content: "Follom me";
  bottom: 30px;
  position: absolute;
  width: 130px;
  height: 22px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.card:hover > .image {
  height: 65%;
  filter: blur(7px);
  animation: anim 3s infinite;
}

@keyframes anim {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}

.card:hover {
  transform: scale(1.04) rotate(-1deg);
}

.card .image {
  width: 170px;
  margin-top: -20px;
}

.card .heading {
  position: absolute;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
.card .icons a {
  color: #fff;
  position: absolute;
  cursor: pointer;
  z-index: 5;
}

.card .icons a:nth-child(1) {
  top: 200px;
  left: 203px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cc39a4;
  background-color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

.card .icons a:nth-child(1):hover {
  background-color: #cc39a4;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  transition: all 0.2s ease-in-out;
}

.card .icons a:nth-child(2) {
  top: 240px;
  left: 203px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  background-color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

.card .icons a:nth-child(2):hover {
  background-color: #000;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  transition: all 0.2s ease-in-out;
}

.card .icons a:nth-child(3) {
  top: 280px;
  left: 203px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8c9eff;
  background-color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

.card .icons a:nth-child(3):hover {
  background-color: #8c9eff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  transition: all 0.2s ease-in-out;
}

</style>
    

================================================
FILE: Cards/Tsiangana_modern-monkey-77.html
================================================
<div class="card">
  <div class="one">
    <span class="title">Music</span>
    <div class="music">
      <svg
        viewBox="0 0 16 16"
        class="note bi bi-music-note"
        fill="currentColor"
        height="18"
        width="18"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M9 13c0 1.105-1.12 2-2.5 2S4 14.105 4 13s1.12-2 2.5-2 2.5.895 2.5 2z"
        ></path>
        <path d="M9 3v10H8V3h1z" fill-rule="evenodd"></path>
        <path
          d="M8 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 13 2.22V4L8 5V2.82z"
        ></path>
      </svg>
    </div>
    <span class="name"
      ><div></div>
      One piece first ending</span
    >
    <span class="name1"
      ><div></div>
      Desconhecido</span
    >
    <div class="bar">
      <svg
        viewBox="0 0 16 16"
        class="color bi bi-fast-forward-fill"
        fill="currentColor"
        height="16"
        width="16"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M7.596 7.304a.802.802 0 0 1 0 1.392l-6.363 3.692C.713 12.69 0 12.345 0 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692Z"
        ></path>
        <path
          d="M15.596 7.304a.802.802 0 0 1 0 1.392l-6.363 3.692C8.713 12.69 8 12.345 8 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692Z"
        ></path>
      </svg>
      <svg
        viewBox="0 0 16 16"
        class="color bi bi-caret-right-fill"
        fill="currentColor"
        height="18"
        width="18"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"
        ></path>
      </svg>
      <svg
        viewBox="0 0 16 16"
        class="color bi bi-fast-forward-fill"
        fill="currentColor"
        height="16"
        width="16"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M7.596 7.304a.802.802 0 0 1 0 1.392l-6.363 3.692C.713 12.69 0 12.345 0 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692Z"
        ></path>
        <path
          d="M15.596 7.304a.802.802 0 0 1 0 1.392l-6.363 3.692C8.713 12.69 8 12.345 8 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692Z"
        ></path>
      </svg>
    </div>
    <div class="bar">
      <svg
        viewBox="0 0 16 16"
        class="color1 bi bi-shuffle"
        fill="currentColor"
        height="14"
        width="14"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.624 9.624 0 0 0 7.556 8a9.624 9.624 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.595 10.595 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.624 9.624 0 0 0 6.444 8a9.624 9.624 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5z"
          fill-rule="evenodd"
        ></path>
        <path
          d="M13 5.466V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192zm0 9v-3.932a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192z"
        ></path>
      </svg>
      <svg
        viewBox="0 0 16 16"
        class="color1 bi bi-music-note-list"
        fill="currentColor"
        height="14"
        width="14"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M12 13c0 1.105-1.12 2-2.5 2S7 14.105 7 13s1.12-2 2.5-2 2.5.895 2.5 2z"
        ></path>
        <path d="M12 3v10h-1V3h1z" fill-rule="evenodd"></path>
        <path
          d="M11 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 16 2.22V4l-5 1V2.82z"
        ></path>
        <path
          d="M0 11.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 .5 7H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 .5 3H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z"
          fill-rule="evenodd"
        ></path>
      </svg>
      <svg
        viewBox="0 0 16 16"
        class="color1 bi bi-suit-heart"
        fill="currentColor"
        height="14"
        width="14"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="m8 6.236-.894-1.789c-.222-.443-.607-1.08-1.152-1.595C5.418 2.345 4.776 2 4 2 2.324 2 1 3.326 1 4.92c0 1.211.554 2.066 1.868 3.37.337.334.721.695 1.146 1.093C5.122 10.423 6.5 11.717 8 13.447c1.5-1.73 2.878-3.024 3.986-4.064.425-.398.81-.76 1.146-1.093C14.446 6.986 15 6.131 15 4.92 15 3.326 13.676 2 12 2c-.777 0-1.418.345-1.954.852-.545.515-.93 1.152-1.152 1.595L8 6.236zm.392 8.292a.513.513 0 0 1-.784 0c-1.601-1.902-3.05-3.262-4.243-4.381C1.3 8.208 0 6.989 0 4.92 0 2.755 1.79 1 4 1c1.6 0 2.719 1.05 3.404 2.008.26.365.458.716.596.992a7.55 7.55 0 0 1 .596-.992C9.281 2.049 10.4 1 12 1c2.21 0 4 1.755 4 3.92 0 2.069-1.3 3.288-3.365 5.227-1.193 1.12-2.642 2.48-4.243 4.38z"
        ></path>
      </svg>
      <svg
        viewBox="0 0 16 16"
        class="color1 bi bi-arrow-right"
        fill="currentColor"
        height="14"
        width="14"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"
          fill-rule="evenodd"
        ></path>
      </svg>
    </div>
  </div>
  <div class="two"></div>
  <div class="three"></div>
</div>

<style>
/* From Uiverse.io by Tsiangana  - Tags: card, creative, card template */
.card {
  width: 190px;
  height: 254px;
  background: lightgrey;
  border-radius: 10px;
}

.card .one {
  width: 190px;
  height: 254px;
  z-index: 10;
  position: absolute;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(8.5px);
  -webkit-backdrop-filter: blur(8.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.card .one .title {
  width: 70px;
  border: 1px solid rgba(180, 177, 177, 0.308);
  display: block;
  margin: 12px auto;
  text-align: center;
  font-size: 10px;
  border-radius: 12px;
  font-family: Roboto, sans-serif;
  color: rgba(102, 100, 100, 0.911);
}

.card .one .music {
  width: 80px;
  height: 80px;
  background: rgba(216, 212, 212, 0.726);
  margin: 30px auto;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card .one .name {
  width: 150px;
  height: 20px;
  font-size: 12px;
  font-weight: 500;
  font-family: Roboto, sans-serif;
  padding: 0 5px;
  margin: -22px auto;
  display: block;
  overflow: hidden;
  text-align: center;
  color: rgba(50, 49, 51, 0.637);
}
.card .one .name1 {
  width: 120px;
  height: 20px;
  font-size: 9px;
  font-weight: 500;
  font-family: Roboto, sans-serif;
  padding: 0 5px;
  margin: 19px auto;
  display: block;
  overflow: hidden;
  text-align: center;
  color: rgba(50, 49, 51, 0.637);
}
.card .one .bar {
  width: 100px;
  margin: -15px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  cursor: pointer;
}

.card .one .bar:last-child {
  margin: 35px auto;
  width: 100%;
  padding: 2px 23px;
}
.card .one .bar .color {
  fill: rgba(82, 79, 79, 0.829);
}
.card .one .bar .color1 {
  fill: rgba(29, 28, 28, 0.829);
  cursor: pointer;
}

.card .one .bar .bi:first-child {
  transform: rotate(180deg);
}
.card .one .bar:last-child .color1:first-child {
  transform: rotate(0deg);
}

.card .two {
  width: 60px;
  height: 60px;
  background-color: rgb(131, 25, 163);
  filter: drop-shadow(0 0 10px rgb(131, 25, 163));
  border-radius: 50%;
  position: relative;
  top: 30px;
  left: 20px;
  animation: one 5s infinite;
}

.card .three {
  width: 60px;
  height: 60px;
  background-color: rgb(29, 209, 149);
  filter: drop-shadow(0 0 10px rgb(29, 209, 149));
  border-radius: 50%;
  position: relative;
  top: 90px;
  left: 90px;
  animation: two 5s infinite;
}

@keyframes one {
  0% {
    top: 30px;
    left: 20px;
  }
  20% {
    top: 50px;
    left: 40px;
  }
  40% {
    top: 80px;
    left: 70px;
  }
  50% {
    top: 60px;
    left: 40px;
  }
  60% {
    top: 35px;
    left: 90px;
  }
  80% {
    top: 70px;
    left: 70px;
  }
  100% {
    top: 30px;
    left: 20px;
  }
}

@keyframes two {
  0% {
    top: 90px;
    left: 90px;
  }
  20% {
    top: 50px;
    left: 40px;
  }
  40% {
    top: 60px;
    left: 20px;
  }
  50% {
    top: 80px;
    left: 30px;
  }
  60% {
    top: 35px;
    left: 90px;
  }
  80% {
    top: 70px;
    left: 60px;
  }
  100% {
    top: 90px;
    left: 90px;
  }
}

</style>
    

================================================
FILE: Cards/Uncannypotato69_angry-rattlesnake-53.html
================================================
<!-- From Uiverse.io by Uncannypotato69  - Tags: simple, animation, card, card hover, tailwindcss -->
<div
  class="div h-[8em] w-[15em] bg-white m-auto rounded-[1em] overflow-hidden relative group p-2 z-0"
>
  <div
    class="circle absolute h-[5em] w-[5em] -top-[2.5em] -right-[2.5em] rounded-full bg-[#FF5800] group-hover:scale-[800%] duration-500 z-[-1] op"
  ></div>

  <button
    class="text-[0.8em] absolute bottom-[1em] left-[1em] text-[#6C3082] group-hover:text-[white] duration-500"
  >
    <span
      class="relative before:h-[0.16em] before:absolute before:w-full before:content-[''] before:bg-[#6C3082] group-hover:before:bg-[white] duration-300 before:bottom-0 before:left-0"
      >More Info</span
    >
    <i class="fa-solid fa-arrow-right"></i>
  </button>

  <h1
    class="z-20 font-bold font-Poppin group-hover:text-white duration-500 text-[1.4em]"
  >
    HEADING
  </h1>
</div>


    

================================================
FILE: Cards/Uncannypotato69_odd-pig-10.html
================================================
<!-- From Uiverse.io by Uncannypotato69  - Tags: card, hover, cool card, card animation, card hover, tailwindcss, jojo, balls -->
<div
  class="card shadow-[0px_4px_16px_px_#367E08] h-[400px] w-[280px] group gap-[0.5em] rounded-[1.5em] relative flex justify-end flex-col p-[1.5em] z-[1] overflow-hidden"
>
  <div class="absolute top-0 left-0 h-full w-full bg-[#fff8dc]"></div>

  <div
    class="container text-black z-[2] relative font-nunito flex flex-col gap-[0.5em]"
  >
    <div class="h-fit w-full">
      <h1
        style="font-weight: 900;
                -webkit-text-fill-color: transparent;
                -webkit-text-stroke-width: 1px;"
        class="card_heading text-[1.5em] tracking-[.2em]"
      >
        STEEL BALL RUN
      </h1>
      <p
        style="font-weight: 900;
                -webkit-text-fill-color: transparent;
                -webkit-text-stroke-width: 1px;
                text-shadow: 0 0 7px #fff;"
        class="text-[1.2em]"
      >
        By Hirohiko Araki
      </p>
    </div>

    <div class="flex justify-left items-center h-fit w-full gap-[1.5em]">
      <div class="w-fit h-fit flex justify-left gap-[0.5em]">
        <svg
          fill="#222222"
          class="h-[1em] w-[1em]"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 576 512"
        >
          <path
            d="M316.7 17.8l65.43 132.4l146.4 21.29c26.27 3.796 36.79 36.09 17.75 54.59l-105.9 102.1l25.05 145.5c4.508 26.31-23.23 45.9-46.49 33.7L288 439.6l-130.9 68.7C133.8 520.5 106.1 500.9 110.6 474.6l25.05-145.5L29.72 226.1c-19.03-18.5-8.516-50.79 17.75-54.59l146.4-21.29l65.43-132.4C271.1-6.083 305-5.786 316.7 17.8z"
          ></path>
        </svg>
        <svg
          fill="#222222"
          class="h-[1em] w-[1em]"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 576 512"
        >
          <path
            d="M316.7 17.8l65.43 132.4l146.4 21.29c26.27 3.796 36.79 36.09 17.75 54.59l-105.9 102.1l25.05 145.5c4.508 26.31-23.23 45.9-46.49 33.7L288 439.6l-130.9 68.7C133.8 520.5 106.1 500.9 110.6 474.6l25.05-145.5L29.72 226.1c-19.03-18.5-8.516-50.79 17.75-54.59l146.4-21.29l65.43-132.4C271.1-6.083 305-5.786 316.7 17.8z"
          ></path>
        </svg>
        <svg
          fill="#222222"
          class="h-[1em] w-[1em]"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 576 512"
        >
          <path
            d="M316.7 17.8l65.43 132.4l146.4 21.29c26.27 3.796 36.79 36.09 17.75 54.59l-105.9 102.1l25.05 145.5c4.508 26.31-23.23 45.9-46.49 33.7L288 439.6l-130.9 68.7C133.8 520.5 106.1 500.9 110.6 474.6l25.05-145.5L29.72 226.1c-19.03-18.5-8.516-50.79 17.75-54.59l146.4-21.29l65.43-132.4C271.1-6.083 305-5.786 316.7 17.8z"
          ></path>
        </svg>
        <svg
          fill="#222222"
          class="h-[1em] w-[1em]"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 576 512"
        >
          <path
            d="M316.7 17.8l65.43 132.4l146.4 21.29c26.27 3.796 36.79 36.09 17.75 54.59l-105.9 102.1l25.05 145.5c4.508 26.31-23.23 45.9-46.49 33.7L288 439.6l-130.9 68.7C133.8 520.5 106.1 500.9 110.6 474.6l25.05-145.5L29.72 226.1c-19.03-18.5-8.516-50.79 17.75-54.59l146.4-21.29l65.43-132.4C271.1-6.083 305-5.786 316.7 17.8z"
          ></path>
        </svg>
        <svg
          fill="#222222"
          class="h-[1em] w-[1em]"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 576 512"
        >
          <path
            d="M288 439.6l-130.9 68.7C152.2 510.8 147.1 512 142.2 512c-18.59 0-35.17-16.66-31.61-37.45l25.04-145.5L29.72 226.1C10.68 207.6 21.2 175.3 47.47 171.5l146.4-21.29l65.43-132.4c5.883-11.91 17.33-17.8 28.73-17.8c.0234 0-.0234 0 0 0L288 439.6z"
          ></path>
        </svg>
      </div>

      <div class="w-fit h-fit text-black font-nunito text-[1.2em] font-light">
        <p>4.5/5 stars</p>
      </div>
    </div>

    <div class="flex justify-center items-center h-fit w-fit gap-[0.5em]">
      <div
        class="border-2 border-[#222222] rounded-[0.5em] text-black font-nunito text-[1em] font-normal px-[0.5em] py-[0.05em] hover:bg-[#222222] hover:text-white duration-300 cursor-pointer"
      >
        <p>Drama</p>
      </div>
      <div
        class="border-2 border-[#222222] rounded-[0.5em] text-black font-nunito text-[1em] font-normal px-[0.5em] py-[0.05em] hover:bg-[#222222] hover:text-white duration-300 cursor-pointer"
      >
        <p>Action</p>
      </div>
      <div
        class="border-2 border-[#222222] rounded-[0.5em] text-black font-nunito text-[1em] font-normal px-[0.5em] py-[0.05em] hover:bg-[#222222] hover:text-white duration-300 cursor-pointer"
      >
        <p>Balls</p>
      </div>
    </div>
  </div>
  <p
    class="font-nunito block text-blackfont-light relative h-[0em] group-hover:h-[7em] leading-[1.2em] duration-500 overflow-hidden"
  >
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet officiis,
    dolorem ab animi magnam culpa fugit error voluptates adipisci, debitis ut
    fuga at nisi laborum suscipit a eos similique unde.
  </p>
</div>


    

================================================
FILE: Cards/Uncannypotato69_polite-sloth-0.html
================================================
<!-- From Uiverse.io by Uncannypotato69  - Tags: glassmorphism, purple, white, card, card hover, tailwindcss -->
<div
  class="relative flex h-[12em] w-[18em] items-center justify-center rounded-[1.5em] border-[1px] border-[rgba(107,33,168,1)] bg-[rgba(107,33,168,0.24)] p-[1.5em] text-lime-300"
>
  <div
    class="group absolute left-1/2 top-1/2 flex h-[3em] w-[3em] -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-hidden rounded-[1.5em] border-[1px] border-[#ffffffaa] bg-[#8988885c] backdrop-blur-[6px] duration-[500ms] hover:h-[10em] hover:w-[16em] hover:rounded-[1.5em]"
  >
    <svg
      class="h-[1.5em] w-[1.5em] duration-300 group-hover:opacity-0"
      viewBox="0 0 48 48"
      fill="none"
      height="48"
      width="48"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clip-path="url(#a)">
        <path
          clip-rule="evenodd"
          d="M21.6 36h4.8V21.6h-4.8V36ZM24 0C10.8 0 0 10.8 0 24s10.8 24 24 24 24-10.8 24-24S37.2 0 24 0Zm0 43.2C13.44 43.2 4.8 34.56 4.8 24 4.8 13.44 13.44 4.8 24 4.8c10.56 0 19.2 8.64 19.2 19.2 0 10.56-8.64 19.2-19.2 19.2Zm-2.4-26.4h4.8V12h-4.8v4.8Z"
          fill-rule="evenodd"
          fill="#fff"
        ></path>
      </g>
      <defs>
        <clipPath id="a">
          <path d="M0 0h48v48H0z" fill="#fff"></path>
        </clipPath>
      </defs>
    </svg>
    <div
      class="items-left duration-600 absolute left-0 top-0 flex h-[10em] w-[16em] translate-y-[100%] flex-col justify-between p-[1.5em] font-nunito text-[hsl(0,0%,85%)] group-hover:translate-y-0"
    >
      <div class="items-left flex flex-col justify-center">
        <h1 class="text-[1.5em] font-bold leading-[0.8em]">Heading</h1>
        <p class="text-[0.9em] font-light">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore
          magni repudiandae tenetur odio
        </p>
      </div>

      <p class="cursor-pointer text-[0.7em] underline">learn more</p>
    </div>
  </div>
  <h1 class="text-center font-nunito text-[2em] font-black text-purple-950">
    hover over the info icon
  </h1>
</div>


    

================================================
FILE: Cards/Uncannypotato69_serious-frog-21.html
================================================
<!-- From Uiverse.io by Uncannypotato69  - Tags: simple, purple, gradient, card, dark, tailwindcss -->
<div
  class="h-[12em] w-[18em] border-2 border-[rgba(75,30,133,0.5)] rounded-[1.5em] bg-gradient-to-br from-[rgba(75,30,133,1)] to-[rgba(75,30,133,0.01)] text-white font-nunito p-[1em] flex justify-center items-left flex-col gap-[0.75em] backdrop-blur-[12px]"
>
  <div>
    <h1 class="text-[2em] font-medium">Heading</h1>
    <p class="text-[0.85em]">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolorum
      blanditiis pariatur sequi magni.
    </p>
  </div>

  <button
    class="h-fit w-fit px-[1em] py-[0.25em] border-[1px] rounded-full flex justify-center items-center gap-[0.5em] overflow-hidden group hover:translate-y-[0.125em] duration-200 backdrop-blur-[12px]"
  >
    <p>Button</p>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="white"
      viewBox="0 0 24 24"
      stroke-width="1"
      stroke="currentColor"
      class="w-6 h-6 group-hover:translate-x-[10%] duration-300"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
      ></path>
    </svg>
  </button>
</div>


    

================================================
FILE: Cards/Uncannypotato69_sweet-donkey-14.html
================================================
<!-- From Uiverse.io by Uncannypotato69  - Tags: simple, minimalist, card, hover effect, tailwind, tailwindcss, fitness, health -->
<div
  class="fitCard flex min-h-[24em] min-w-[18em] flex-col items-center justify-center gap-[0.5rem] rounded-[1.5em] bg-[#FFFACD] p-[0.5rem] font-monts text-[#B49A18]"
>
  <div
    class="flex h-[4em] w-full items-center justify-between rounded-[1.5em] bg-[#FFF599] p-[0.5rem]"
  >
    <svg
      viewBox="0 0 48 48"
      fill="none"
      height="48"
      width="48"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M37.99 38.293C37.785 34.785 34.733 32 31 32H17c-3.735 0-6.786 2.785-6.99 6.293m27.98 0A19.94 19.94 0 0 0 44 24c0-11.046-8.954-20-20-20S4 12.954 4 24a19.94 19.94 0 0 0 6.01 14.293m27.98 0A19.935 19.935 0 0 1 24 44a19.935 19.935 0 0 1-13.99-5.707M30 20a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke="#B49A18"
      ></path>
    </svg>
    <p class="text-[1.25rem] font-semibold">Manpreet</p>
  </div>
  <div class="flex h-fit w-full items-center justify-center gap-[0.5em]">
    <div
      class="group relative flex h-[10em] w-[10em] items-center justify-center rounded-[1.5em] bg-[#FFF599] px-[0.5rem] pt-[1rem]"
    >
      <svg
        class="absolute left-1/2 top-[calc(50%+8px)] h-[9rem] w-[9rem] -translate-x-1/2 -translate-y-1/2"
        viewBox="0 0 160 160"
        fill="none"
        height="160"
        width="160"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M130.912 130.912a71.997 71.997 0 0 0-10.911-110.778A71.999 71.999 0 0 0 9.383 94.046a72.004 72.004 0 0 0 19.705 36.866"
          stroke-width="16"
          stroke-linecap="round"
          stroke="#EEDC82"
        ></path>
        <path
          d="M146.65 52.764A72.004 72.004 0 0 0 69.647 8.748a71.998 71.998 0 0 0-40.559 122.164"
          class="duration-[1s] [stroke-dasharray:100] [stroke-dashoffset:-98] group-hover:[stroke-dashoffset:0]"
          pathLength="100"
          stroke-width="16"
          stroke-linecap="round"
          stroke="#B49A18"
        ></path>
      </svg>
      <p class="text-[0.75rem] font-semibold">1729/2500 Steps</p>
    </div>
    <div
      class="flex h-[10em] flex-1 flex-col items-center justify-center gap-[0.5rem]"
    >
      <div
        class="flex w-full flex-1 items-center justify-center rounded-[1.5rem] bg-[#FFF599] group relative overflow-hidden"
      >
        <div
          class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-300 group-hover:-translate-y-[300%]"
        >
          <svg
            viewBox="0 0 48 48"
            fill="none"
            height="48"
            width="48"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m11 32 7-9 6 9 6-9 5 8h9"
              stroke-width="4"
              stroke-miterlimit="2"
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke="#B49A18"
            ></path>
            <path
              d="M44 19c0-6.075-4.925-11-11-11-3.72 0-7.01 1.847-9 4.674A10.987 10.987 0 0 0 15 8C8.925 8 4 12.925 4 19c0 11 13 21 20 23.326 1.194-.397 2.562-1.016 4.01-1.826"
              stroke-width="4"
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke="#B49A18"
            ></path>
          </svg>
        </div>
        <p
          class="absolute left-1/2 top-1/2 h-fit w-full -translate-x-1/2 translate-y-[150%] text-center text-[1rem] font-bold duration-300 group-hover:-translate-y-1/2"
        >
          98 bpm
        </p>
      </div>
      <div
        class="flex w-full flex-1 items-center justify-center rounded-[1.5rem] bg-[#FFF599] group relative overflow-hidden"
      >
        <div
          class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-300 group-hover:-translate-y-[300%]"
        >
          <svg
            viewBox="0 0 48 48"
            fill="none"
            height="48"
            width="48"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g clip-path="url(#a)">
              <path
                d="M47.32 28.378a1.776 1.776 0 0 0-1.98-.142c-2.977 1.71-6.122 2.578-9.35 2.578-10.37 0-18.807-8.437-18.807-18.808 0-3.242.869-6.383 2.582-9.336A1.775 1.775 0 0 0 17.738.073 24.833 24.833 0 0 0 5.04 8.7C1.743 12.976 0 18.096 0 23.508c0 13.503 10.985 24.489 24.488 24.489 5.412 0 10.533-1.742 14.81-5.04a24.817 24.817 0 0 0 8.632-12.69 1.774 1.774 0 0 0-.61-1.889ZM24.488 44.446c-11.545 0-20.937-9.393-20.937-20.938 0-7.788 4.457-14.876 11.23-18.438a21.423 21.423 0 0 0-1.149 6.936c0 12.329 10.03 22.36 22.358 22.36a21.49 21.49 0 0 0 6.948-1.154c-3.561 6.775-10.655 11.233-18.45 11.233Z"
                fill="#B49A18"
              ></path>
            </g>
            <defs>
              <clipPath id="a">
                <path d="M0 0h48v48H0z" fill="#fff"></path>
              </clipPath>
            </defs>
          </svg>
        </div>
        <p
          class="absolute left-1/2 top-1/2 h-fit w-full -translate-x-1/2 translate-y-[150%] text-center text-[1rem] font-bold duration-300 group-hover:-translate-y-1/2"
        >
          7.5 hrs
        </p>
      </div>
    </div>
  </div>
  <div
    class="flex h-[4.5rem] w-full flex-row items-center justify-center gap-[0.5rem]"
  >
    <div
      class="flex h-full w-[10rem] items-center justify-center rounded-[1.5rem] bg-[#FFF599] group relative overflow-hidden"
    >
      <div
        class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-300 group-hover:-translate-y-[300%]"
      >
        <svg
          viewBox="0 0 48 48"
          fill="none"
          height="48"
          width="48"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Z"
            stroke-width="3"
            stroke-linecap="round"
            stroke="#B49A18"
          ></path>
          <path
            d="M18.804 27a5.999 5.999 0 0 0 10.392 0"
            stroke-width="3"
            stroke-linecap="round"
            stroke="#B49A18"
          ></path>
          <path
            d="M18 15.75h-2a2.25 2.25 0 0 0 0 4.5h2a2.25 2.25 0 0 0 0-4.5Zm14 0h-2a2.25 2.25 0 0 0 0 4.5h2a2.25 2.25 0 0 0 0-4.5Z"
            stroke-width=".25"
            stroke-linecap="round"
            stroke="#B49A18"
            fill="#B49A18"
          ></path>
        </svg>
      </div>

      <p
        class="absolute left-1/2 top-1/2 h-fit w-fit -translate-x-1/2 translate-y-[150%] text-left text-[1rem] font-bold duration-300 group-hover:-translate-y-1/2"
      >
        Happy
      </p>
    </div>
    <div
      class="flex h-full w-[6.5rem] items-center justify-center rounded-[1.5rem] bg-[#FFF599] relative group overflow-hidden"
    >
      <div
        class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-300 group-hover:-translate-y-[250%]"
      >
        <svg
          viewBox="0 0 48 52"
          fill="none"
          height="52"
          width="48"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M32.87 18.07c0-2.808 3.734-3.553 4.725-.925 2.397 6.356 4.144 12.042 4.144 15.116 0 9.797-7.942 17.739-17.74 17.739-9.796 0-17.738-7.942-17.738-17.739 0-3.303 2.016-9.62 4.688-16.544 3.463-8.97 5.194-13.455 7.33-13.696a3.641 3.641 0 0 1 2.04.38c1.907.995 1.907 5.886 1.907 15.67a5.322 5.322 0 0 0 10.643 0Z"
            stroke-width="3"
            stroke="#B49A18"
          ></path>
          <path
            d="m20.452 50-.932-2.331a12.086 12.086 0 0 1 1.784-12.038 3.453 3.453 0 0 1 5.392 0 12.085 12.085 0 0 1 1.784 12.038l-.932 2.33"
            stroke-width="3"
            stroke="#B49A18"
          ></path>
        </svg>
      </div>

      <p
        class="absolute left-1/2 top-1/2 h-fit w-fit -translate-x-1/2 translate-y-[150%] text-left text-[1rem] font-bold duration-300 group-hover:-translate-y-1/2"
      >
        1240cal
      </p>
    </div>
  </div>
  <div
    class="group relative flex h-[5em] w-full items-center justify-center overflow-hidden rounded-[1.5rem] bg-[#FFF599]"
  >
    <p
      class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-500 group-hover:-translate-x-[250%]"
    >
      Today's Quote
    </p>
    <p
      class="absolute left-1/2 top-1/2 h-fit w-full -translate-y-1/2 translate-x-1/2 px-[1rem] text-left text-[0.75rem] font-bold duration-500 group-hover:-translate-x-1/2 text-center"
    >
      “The real workout starts when you want to stop.” – Ronnie Coleman
    </p>
  </div>
</div>


    

================================================
FILE: Cards/Uncannypotato69_tiny-squid-86.html
================================================
<!-- From Uiverse.io by Uncannypotato69  - Tags: card, checkbox, light, cool checkbox, cool card, card hover, tailwind, cute -->
<div
  class="card relative flex h-[10em] w-[15em] items-start justify-center overflow-clip rounded-[1.5em] bg-[#B7DFFB] px-[1em] py-[1.5em] shadow-[0px_2px_2px_0px_#1a4766,0px_2px_8px_0px_#3083bb]"
>
  <span
    class="max-w-[20ch] text-center font-Poppin text-[1em] font-bold text-[#085991]"
  >
    Do you agree with the terms and conditions of our website?
  </span>
  <div
    class="group absolute bottom-[-1em] left-[2.5em] flex max-h-[6em] w-[10em] items-center justify-center gap-[11rem]"
  >
    <label for="yes" class="yes peer relative cursor-pointer">
      <input type="checkbox" name="yes" id="yes" class="peer appearance-none" />
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="43"
        height="90"
        fill="none"
        viewBox="0 0 43 90"
        class="absolute bottom-0 left-1/2 h-[6rem] w-[6rem] origin-bottom -translate-x-1/2 rotate-[45deg] hover:rotate-[40deg] duration-300 peer-checked:rotate-[0deg]"
      >
        <path
          fill="#1269EF"
          d="M24.87 4.21a3.52 3.52 0 0 0-7.04 0v80.96a3.52 3.52 0 1 0 7.04 0V4.21Z"
        ></path>
        <path
          fill="#231F20"
          d="M21.35 89.34a4.17 4.17 0 0 1-4.17-4.17v-81a4.17 4.17 0 1 1 8.34 0v81a4.17 4.17 0 0 1-4.17 4.17Zm0-88a2.88 2.88 0 0 0-2.87 2.87v81a2.87 2.87 0 0 0 5.74 0v-81a2.88 2.88 0 0 0-2.87-2.87Z"
        ></path>
        <path
          fill="#000"
          d="M21.35 44.69c11.427 0 20.69-8.117 20.69-18.13 0-10.013-9.263-18.13-20.69-18.13C9.923 8.43.66 16.547.66 26.56c0 10.013 9.263 18.13 20.69 18.13Z"
        ></path>
        <path
          fill="#231F20"
          d="M21.35 45.34C9.58 45.34 0 36.92 0 26.56 0 16.2 9.58 7.78 21.35 7.78c11.77 0 21.34 8.42 21.34 18.78 0 10.36-9.57 18.78-21.34 18.78Zm0-36.26c-11 0-20 7.84-20 17.48s9 17.48 20 17.48 20-7.84 20-17.48-8.95-17.48-20-17.48Z"
        ></path>
        <path fill="#ED487E" d="M.66 26.56v-4.99h41.38v3.92L.66 26.56Z"></path>
        <path
          fill="#231F20"
          d="M0 27.23v-6.31h42.69v5.21L0 27.23Zm1.31-5v3.66l40.08-1v-2.67l-40.08.01Z"
        ></path>
        <path
          fill="#ED487E"
          d="M21.35 40.6c11.427 0 20.69-8.117 20.69-18.13 0-10.013-9.263-18.13-20.69-18.13C9.923 4.34.66 12.457.66 22.47c0 10.013 9.263 18.13 20.69 18.13Z"
        ></path>
        <path
          fill="#231F20"
          d="M21.35 41.26C9.58 41.26 0 32.83 0 22.47S9.58 3.69 21.35 3.69c11.77 0 21.34 8.43 21.34 18.78 0 10.35-9.57 18.79-21.34 18.79Zm0-36.26c-11 0-20 7.84-20 17.47 0 9.63 9 17.48 20 17.48s20-7.84 20-17.48S32.4 5 21.35 5Z"
        ></path>
        <path
          fill="#fff"
          d="M9.76 27.76v-4.28l-3.73-5.9h2.41l2.4 4 2.34-4h2.37l-3.74 5.91v4.27H9.76Zm7.59 0V17.58h7.55v1.72h-5.5v2.26h5.11v1.71H19.4v2.78h5.69v1.71h-7.74Zm9.941-3.31 2-.2a2.44 2.44 0 0 0 .73 1.44 2.21 2.21 0 0 0 1.49.48 2.28 2.28 0 0 0 1.5-.42 1.25 1.25 0 0 0 .51-1 .93.93 0 0 0-.17-.56 1.59 1.59 0 0 0-.74-.44c-.24-.09-.79-.23-1.64-.45a5.64 5.64 0 0 1-2.32-1 2.68 2.68 0 0 1-.5-3.51 2.79 2.79 0 0 1 1.27-1 5.061 5.061 0 0 1 2-.35 4.29 4.29 0 0 1 2.88.84 2.929 2.929 0 0 1 1 2.24l-2.06.09a1.72 1.72 0 0 0-.56-1.13 2.08 2.08 0 0 0-1.3-.34 2.34 2.34 0 0 0-1.41.37.71.71 0 0 0-.32.63.8.8 0 0 0 .3.62 5.679 5.679 0 0 0 1.89.68c.766.154 1.512.4 2.22.73a3 3 0 0 1 1.13 1 3.06 3.06 0 0 1-1.46 4.4 5.719 5.719 0 0 1-2.22.37 4.38 4.38 0 0 1-3-.89 3.89 3.89 0 0 1-1.22-2.6Z"
        ></path>
      </svg>
    </label>

    <label
      for="no"
      class="no relative cursor-pointer origin-bottom duration-300 peer-has-[:checked]:rotate-[-160deg]"
    >
      <input type="checkbox" name="no" id="no" class="peer appearance-none" />
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="42"
        height="89"
        fill="none"
        viewBox="0 0 42 89"
        class="absolute bottom-0 right-1/2 h-[6rem] w-[6rem] origin-bottom translate-x-1/2 rotate-[-45deg] duration-300 hover:rotate-[-40deg] peer-checked:rotate-0"
      >
        <path
          fill="#ED487E"
          d="M21.481.49h-.48a3.35 3.35 0 0 0-3.35 3.35V85.1c0 1.85 1.5 3.35 3.35 3.35h.48c1.85 0 3.35-1.5 3.35-3.35V3.84c0-1.85-1.5-3.35-3.35-3.35Z"
        ></path>
        <path
          fill="#FC932D"
          d="M23.131 45.03c10.118 0 18.32-8.202 18.32-18.32S33.25 8.39 23.132 8.39c-10.117 0-18.32 8.202-18.32 18.32s8.203 18.32 18.32 18.32Z"
        ></path>
        <path
          fill="#FDD259"
          d="M18.801 45.03c10.118 0 18.32-8.202 18.32-18.32S28.92 8.39 18.801 8.39C8.684 8.39.481 16.592.481 26.71s8.203 18.32 18.32 18.32Z"
        ></path>
        <path
          fill="#000"
          d="M16.431 33.05a1.4 1.4 0 0 1-1.1-.52l-4.34-5.29v4.38a1.44 1.44 0 0 1-2.87 0v-8.37a1.44 1.44 0 0 1 1-1.35 1.42 1.42 0 0 1 1.59.44l4.28 5.28v-4.66a1.44 1.44 0 1 1 2.87 0v8.66a1.44 1.44 0 0 1-1 1.35 1.62 1.62 0 0 1-.43.08Zm8.221-.39a5.3 5.3 0 1 1 5.3-5.3 5.31 5.31 0 0 1-5.3 5.3Zm0-7.73a2.43 2.43 0 1 0 .019 4.859 2.43 2.43 0 0 0-.02-4.859Z"
        ></path>
        <path
          fill="#231F20"
          d="M21.541 89h-.49a3.86 3.86 0 0 1-3.86-3.86v-40a.519.519 0 0 1 1 0v40a2.84 2.84 0 0 0 2.83 2.84h.49a2.84 2.84 0 0 0 2.83-2.84V45a.52.52 0 1 1 1 0v40.14a3.86 3.86 0 0 1-3.8 3.86Zm3.34-78.97a.51.51 0 0 1-.51-.51V3.87a.52.52 0 0 1 1 0v5.62a.51.51 0 0 1-.49.54Zm-7.18-1.21a.51.51 0 0 1-.51-.51V3.87a3.84 3.84 0 0 1 3.85-3.86h.5a.51.51 0 1 1 0 1h-.49a2.83 2.83 0 0 0-2 .84 2.78 2.78 0 0 0-.82 2v4.44a.511.511 0 0 1-.53.53Z"
        ></path>
        <path
          fill="#231F20"
          d="M23.171 45.59a.52.52 0 0 1 0-1 17.81 17.81 0 0 0 14.89-27.6.51.51 0 1 1 .85-.56 18.83 18.83 0 0 1-15.74 29.16Zm10.25-33.52a.52.52 0 0 1-.29-.09 17.64 17.64 0 0 0-9.93-3 .51.51 0 0 1-.51-.51.54.54 0 0 1 .54-.51 18.75 18.75 0 0 1 10.51 3.21.53.53 0 0 1 .14.72.541.541 0 0 1-.46.18Z"
        ></path>
        <path
          fill="#231F20"
          d="M18.861 45.61a18.84 18.84 0 0 1-16.87-27.27 18.85 18.85 0 0 1 31-4.09.51.51 0 0 1-.05.73.5.5 0 0 1-.72 0 17.82 17.82 0 1 0 3.57 6.18.526.526 0 1 1 1-.33 18.87 18.87 0 0 1-17.93 24.78Z"
        ></path>
        <path
          fill="#231F20"
          d="M16.48 32.17a.51.51 0 0 1-.39-.19l-6-7.26v6.94a.52.52 0 0 1-1 0v-8.37a.51.51 0 0 1 .34-.48.5.5 0 0 1 .57.15l6 7.27V23a.52.52 0 1 1 1 0v8.66a.52.52 0 0 1-.52.51Zm8.221-.39a4.38 4.38 0 1 1 4.38-4.38 4.39 4.39 0 0 1-4.38 4.38Zm0-7.73a3.35 3.35 0 1 0 .02 6.7 3.35 3.35 0 0 0-.02-6.7Z"
        ></path>
      </svg>
    </label>
  </div>
</div>


    

================================================
FILE: Cards/Uncannypotato69_warm-yak-96.html
================================================
<!-- From Uiverse.io by Uncannypotato69  - Tags: simple, pink, card, weather, hover effect, tailwind, tailwindcss, cute -->
<div
  class="weather flex min-h-[10em] min-w-[16em] flex-col items-center justify-center gap-[0.5em] rounded-[1.5em] bg-[#FFDAE9] px-[1em] py-[0.5em] font-nunito text-[#F471A6] shadow-[0px_4px_16px_0px_#222]"
>
  <div class="flex h-fit w-full items-center justify-center gap-[1em]">
    <svg
      viewBox="0 0 80 80"
      fill="none"
      height="80"
      width="80"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M77.39 46.522c0 1.478-.086 2.974-.26 4.435 0 .035-.017.035-.017.07L61.72 46.921c.018-.14.018-.261.018-.4 0-11.983-9.757-21.74-21.74-21.74-11.982 0-21.738 9.757-21.738 21.74v.33l-15.392 4.14v-.035a37.706 37.706 0 0 1-.26-4.435c0-20.609 16.765-37.392 37.39-37.392 20.627 0 37.392 16.783 37.392 37.392Z"
        fill="#F95428"
      ></path>
      <path
        d="M66.956 46.522c0 .452-.017.887-.034 1.322v.052L49.86 52.47a2.32 2.32 0 0 1 .243-.887c.8-1.583 1.2-3.288 1.2-5.061 0-6.227-5.078-11.305-11.305-11.305-6.226 0-11.304 5.078-11.304 11.305 0 1.773.4 3.478 1.2 5.06a2.4 2.4 0 0 1 .261 1.079l-17.043-4.574a1.026 1.026 0 0 1-.035-.244 31.56 31.56 0 0 1-.035-1.321c0-14.87 12.087-26.957 26.956-26.957 14.87 0 26.957 12.087 26.957 26.957Z"
        fill="#F5B420"
      ></path>
      <path
        d="M77.391 46.522c0 1.478-.087 2.974-.26 4.435 0 .035-.018.035-.018.07l-15.391-4.105c.017-.14.017-.261.017-.4 0-11.983-9.756-21.74-21.739-21.74V9.13c20.626 0 37.391 16.783 37.391 37.392Z"
        fill="#EA3B18"
      ></path>
      <path
        d="M66.957 46.522c0 .452-.017.887-.035 1.322v.052L49.861 52.47c.017-.296.105-.61.244-.887.8-1.583 1.2-3.288 1.2-5.061 0-6.227-5.079-11.305-11.305-11.305V19.565c14.87 0 26.957 12.087 26.957 26.957Z"
        fill="#F09C12"
      ></path>
      <path
        d="M74.541 53.265a2.608 2.608 0 0 1-2.594-2.917c.15-1.262.227-2.549.227-3.826C72.174 28.78 57.74 14.348 40 14.348c-17.742 0-32.174 14.432-32.174 32.174 0 1.277.076 2.564.226 3.826a2.608 2.608 0 0 1-2.283 2.898c-1.401.175-2.726-.85-2.897-2.281a37.624 37.624 0 0 1-.264-4.443C2.608 25.904 19.381 9.13 40 9.13c20.618 0 37.39 16.774 37.39 37.392 0 1.482-.087 2.977-.262 4.443a2.609 2.609 0 0 1-2.587 2.3Z"
        fill="#E6563A"
      ></path>
      <path
        d="M72.174 46.522c0 1.277-.077 2.564-.226 3.826a2.608 2.608 0 1 0 5.18.617 37.64 37.64 0 0 0 .263-4.443C77.391 25.904 60.618 9.13 40 9.13v5.218c17.741 0 32.174 14.432 32.174 32.174Z"
        fill="#D9472B"
      ></path>
      <path
        d="m64.32 50.339-.124-.003a2.608 2.608 0 0 1-2.483-2.727c.017-.361.025-.723.025-1.088 0-11.987-9.752-21.739-21.739-21.739S18.26 34.534 18.26 46.522c0 .364.009.726.026 1.087a2.608 2.608 0 0 1-2.483 2.727c-1.473.051-2.662-1.046-2.728-2.485a29.3 29.3 0 0 1-.032-1.33c0-14.864 12.092-26.956 26.956-26.956 14.865 0 26.957 12.092 26.957 26.957 0 .446-.012.889-.032 1.33a2.608 2.608 0 0 1-2.604 2.487Z"
        fill="#FFC033"
      ></path>
      <path
        d="M61.739 46.522c0 .364-.009.726-.025 1.087a2.608 2.608 0 1 0 5.21.243c.02-.44.033-.884.033-1.33 0-14.864-12.093-26.957-26.957-26.957v5.218c11.987 0 21.739 9.752 21.739 21.739Z"
        fill="#F9A926"
      ></path>
      <path
        d="M52.44 55.357a2.608 2.608 0 0 1-2.329-3.781 11.157 11.157 0 0 0 1.194-5.054c0-6.233-5.072-11.305-11.305-11.305S28.696 40.29 28.696 46.522c0 1.777.402 3.477 1.194 5.053a2.608 2.608 0 1 1-4.66 2.344 16.317 16.317 0 0 1-1.752-7.397C23.479 37.412 30.89 30 40 30s16.522 7.412 16.522 16.522c0 2.6-.59 5.087-1.751 7.397a2.608 2.608 0 0 1-2.332 1.438Z"
        fill="#3AACE6"
      ></path>
      <path
        d="M51.304 46.522c0 1.777-.402 3.477-1.194 5.053a2.608 2.608 0 1 0 4.66 2.344 16.316 16.316 0 0 0 1.752-7.397C56.522 37.412 49.11 30 40 30v5.217c6.233 0 11.304 5.072 11.304 11.305Z"
        fill="#2B9FD9"
      ></path>
      <path
        d="m69.543 50.322-.102-.001a2.609 2.609 0 0 1-2.506-2.708 30.4 30.4 0 0 0 .022-1.091c0-14.864-12.092-26.957-26.957-26.957-14.864 0-26.956 12.092-26.956 26.957 0 .365.008.73.022 1.09a2.61 2.61 0 0 1-2.507 2.709 2.6 2.6 0 0 1-2.707-2.506 32.62 32.62 0 0 1-.026-1.293C7.826 28.78 22.26 14.348 40 14.348S72.174 28.78 72.174 46.522c0 .433-.009.863-.026 1.293a2.609 2.609 0 0 1-2.605 2.508Z"
        fill="#FF9F19"
      ></path>
      <path
        d="M66.957 46.522c0 .365-.009.73-.022 1.091a2.61 2.61 0 0 0 5.213.202c.017-.43.026-.86.026-1.293C72.174 28.78 57.74 14.348 40 14.348v5.217c14.864 0 26.957 12.093 26.957 26.957Z"
        fill="#F28618"
      ></path>
      <path
        d="M57.765 56.23a2.609 2.609 0 0 1-2.42-3.581 16.371 16.371 0 0 0 1.177-6.127C56.522 37.412 49.11 30 40 30s-16.522 7.412-16.522 16.522c0 2.119.396 4.18 1.177 6.127a2.609 2.609 0 0 1-1.449 3.392 2.612 2.612 0 0 1-3.391-1.45 21.559 21.559 0 0 1-1.554-8.07c0-11.986 9.752-21.738 21.739-21.738s21.739 9.752 21.739 21.739c0 2.787-.523 5.503-1.554 8.07a2.607 2.607 0 0 1-2.42 1.638Z"
        fill="#88CC2A"
      ></path>
      <path
        d="M56.522 46.522c0 2.119-.396 4.18-1.177 6.127a2.609 2.609 0 0 0 4.84 1.943 21.559 21.559 0 0 0 1.554-8.07c0-11.987-9.752-21.74-21.739-21.74V30c9.11 0 16.522 7.412 16.522 16.522Z"
        fill="#7FB335"
      ></path>
      <path
        d="M66.957 44.782c-4.253 0-8.207 2.105-10.623 5.516-6.448-1.604-12.856 3.352-12.856 10.137 0 5.754 4.681 10.434 10.435 10.434h13.044C74.149 70.87 80 65.02 80 57.827c0-7.192-5.85-13.044-13.043-13.044Z"
        fill="#DAE1E6"
      ></path>
      <path
        d="M23.667 50.298c-2.417-3.411-6.37-5.516-10.624-5.516C5.851 44.782 0 50.633 0 57.826c0 7.192 5.85 13.043 13.043 13.043h13.044c5.754 0 10.435-4.68 10.435-10.434 0-6.774-6.397-11.744-12.855-10.137Z"
        fill="#EDF0F2"
      ></path>
    </svg>
    <span
      class="h-[4em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
    ></span>
    <div class="flex flex-col items-start justify-center">
      <p class="text-[0.75rem] font-light">Seasoning City, Dishland</p>
      <p class="text-[1.5em] font-semibold">28°C</p>
      <div class="flex items-center justify-center gap-[0.125em]">
        <svg
          viewBox="0 0 16 17"
          fill="none"
          height="17"
          width="16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M8 14.26A5.92 5.92 0 1 0 8 2.42a5.92 5.92 0 0 0 0 11.84Z"
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke="#F471A6"
          ></path>
          <path
            d="M8.595 5.716A.589.589 0 0 1 8 6.292a.576.576 0 1 1 .595-.576Zm-1.05 5.363V7.636a.448.448 0 0 1 .629-.425.441.441 0 0 1 .268.425v3.443a.449.449 0 0 1-.896 0Z"
            fill="#F471A6"
          ></path>
        </svg>
        <p class="text-[0.625rem] font-light">Don’t miss out the Rainbow</p>
      </div>
    </div>
  </div>
  <div class="h-[0.5px] w-full rounded-full bg-[hsla(336,86%,70%,0.5)]"></div>
  <div class="flex h-fit w-full items-center justify-between">
    <div
      class="flex h-fit w-full flex-col items-start justify-between text-[0.75em]"
    >
      <div
        class="flex flex-row items-center justify-center gap-[0.5em] p-[0.25em]"
      >
        <svg
          viewBox="0 0 16 16"
          fill="none"
          height="16"
          width="16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M10.51 4.667A2 2 0 1 1 12 8H2m3.673-4.889a1.333 1.333 0 1 1 .994 2.222H2m5.673 7.556a1.333 1.333 0 1 0 .994-2.222H2"
            stroke-width="1.5"
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke="#999"
          ></path>
        </svg>
        <span
          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
        ></span>
        <p>Wind Speed</p>
        <span
          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
        ></span>
        <p>11km/hr</p>
      </div>
      <div
        class="flex flex-row items-center justify-center gap-[0.5em] p-[0.25em]"
      >
        <svg
          viewBox="0 0 16 16"
          fill="none"
          height="16"
          width="16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clip-path="url(#a)">
            <path
              d="M12.606 7.393c.638.343 1.34.55 2.06.607v1.333a6.247 6.247 0 0 1-2.553-.666h-.053A5.227 5.227 0 0 0 10 8a4.1 4.1 0 0 0-1.867.593h-.04A5.693 5.693 0 0 1 6 9.333V8a5.06 5.06 0 0 0 1.533-.573h.04A5.24 5.24 0 0 1 10 6.667a6.247 6.247 0 0 1 2.553.7l.053.026Zm-.053 2.667A6.247 6.247 0 0 0 10 9.333a5.24 5.24 0 0 0-2.427.72h-.04A5.061 5.061 0 0 1 6 10.667V12a5.695 5.695 0 0 0 2.093-.707h.04A4.098 4.098 0 0 1 10 10.667a5.225 5.225 0 0 1 2.06.606h.053c.79.42 1.66.667 2.553.727v-1.333a5.228 5.228 0 0 1-2.06-.607h-.053Zm.113-5.307V2.667a1.333 1.333 0 0 0-1.333-1.334H4.666a1.333 1.333 0 0 0-1.333 1.334V4.78a6 6 0 0 0-2-.447v1.334a5.48 5.48 0 0 1 1.753.44h.067l.18.08v1.26a6 6 0 0 0-2-.447v1.333c.605.05 1.197.198 1.753.44h.067l.18.06v1.26a5.999 5.999 0 0 0-2-.446v1.333a5.506 5.506 0 0 1 1.753.44h.067l.18.06v1.853a1.333 1.333 0 0 0 1.333 1.334h6.667a1.333 1.333 0 0 0 1.333-1.334v-.46l-.553-.206h-.053c-.254-.114-.494-.22-.727-.307v.973H4.666V2.667h6.667V4.22A4.54 4.54 0 0 0 10 4a5.24 5.24 0 0 0-2.427.72h-.04A5.06 5.06 0 0 1 6 5.333v1.334a5.693 5.693 0 0 0 2.093-.707h.04A4.1 4.1 0 0 1 10 5.333a5.227 5.227 0 0 1 2.06.607h.053c.79.42 1.66.667 2.553.727V5.333c-.7-.053-1.38-.25-2-.58Z"
              fill="#33FF77"
            ></path>
          </g>
          <defs>
            <clipPath id="a">
              <path d="M0 0h16v16H0z" fill="#fff"></path>
            </clipPath>
          </defs>
        </svg>

        <span
          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
        ></span>
        <p>AQI</p>
        <span
          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
        ></span>
        <p>32</p>
      </div>
      <div
        class="flex flex-row items-center justify-center gap-[0.5em] p-[0.25em]"
      >
        <svg
          viewBox="0 0 16 16"
          fill="none"
          height="16"
          width="16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M8 14.667c1.719 0 2.666-.9 2.666-2.534 0-2.162-2.158-3.914-2.25-3.987a.667.667 0 0 0-.833 0c-.092.073-2.25 1.825-2.25 3.987 0 1.634.947 2.534 2.667 2.534Zm0-5.093a4.102 4.102 0 0 1 1.333 2.56c0 .74-.223 1.2-1.333 1.2-1.11 0-1.334-.46-1.334-1.2A4.102 4.102 0 0 1 8 9.573ZM4.416 1.479a.667.667 0 0 0-.833 0c-.092.074-2.25 1.826-2.25 3.988C1.333 7.1 2.28 8 4 8c1.719 0 2.666-.9 2.666-2.533 0-2.162-2.158-3.914-2.25-3.988ZM4 6.667c-1.11 0-1.334-.46-1.334-1.2A4.102 4.102 0 0 1 4 2.907a4.102 4.102 0 0 1 1.333 2.56c0 .74-.223 1.2-1.333 1.2Zm8.416-5.188a.667.667 0 0 0-.833 0c-.092.074-2.25 1.826-2.25 3.988C9.333 7.1 10.28 8 12 8c1.719 0 2.666-.9 2.666-2.533 0-2.162-2.158-3.914-2.25-3.988ZM12 6.667c-1.11 0-1.334-.46-1.334-1.2A4.102 4.102 0 0 1 12 2.907a4.102 4.102 0 0 1 1.333 2.56c0 .74-.223 1.2-1.333 1.2Z"
            fill="#00B9E8"
          ></path>
        </svg>

        <span
          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
        ></span>
        <p>Humidity</p>
        <span
          class="h-[0.5em] w-[1px] rounded-full bg-[hsla(336,86%,70%,0.5)]"
        ></span>
        <p>45%</p>
      </div>
    </div>
    <div
      class="flex h-full w-[6rem] flex-col items-center py-[0.25em] text-[0.625em]"
    >
      <div class="group relative z-0 h-[48px] w-[48px]">
        <svg
          class="duration-200 ease-linear group-hover:-translate-y-[8px]"
          viewBox="0 0 48 48"
          fill="none"
          height="48"
          width="48"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g>
            <path
              d="M20.199 25.307c-1.343-6.396-6.887-10.646-12.383-9.492-5.497 1.153-8.864 7.274-7.521 13.67.829 3.949 3.259 7.078 6.29 8.625H4.328a1.505 1.505 0 1 0-1.376 2.114l.04-.002.038.002h11.944c.474 0 6.36-9.501 5.224-14.917Z"
              fill="#6DC82A"
            ></path>
            <path
              d="M20.198 25.307c-1.342-6.396-6.886-10.646-12.382-9.492a8.827 8.827 0 0 0-1.7.54c.735 6.883 2.302 16.451 5.598 23.15l-.182.111c-.354.216-.7.43-.986.608h4.43c.473 0 6.36-9.501 5.222-14.917Z"
              fill="#5EAC24"
            ></path>
            <path
              d="M47.705 29.485c1.343-6.396-2.024-12.517-7.52-13.67-5.497-1.154-11.04 3.096-12.383 9.492-1.137 5.416 4.75 14.917 5.223 14.917h11.944l.04-.002.039.002a1.506 1.506 0 1 0-1.377-2.115h-2.255c3.03-1.546 5.46-4.676 6.29-8.624Z"
              fill="#6DC82A"
            ></path>
            <path
              d="M27.802 25.307c1.342-6.396 6.886-10.646 12.383-9.492.592.124 1.16.307 1.7.54-.736 6.883-2.303 16.451-5.599 23.15.06.035.12.073.182.111.354.216.7.43.986.608h-4.43c-.472 0-6.36-9.501-5.222-14.917Z"
              fill="#5EAC24"
            ></path>
            <path
              d="M35.813 17.311H13.348l2.944 22.913h16.25l3.271-22.913Z"
              fill="#4E901E"
            ></path>
            <path
              d="M33.648 40.267c6.508-11.695 6.905-32.555 6.905-32.555a6.09 6.09 0 0 0-12.17-.321h-8.766a6.09 6.09 0 0 0-12.17.321s.636 21.945 6.906 32.555c0-.12-3.453 2.05-3.453 2.05h3.935l-.723 2.532 3.255-1.446.603 2.17 2.452-4.051s.254-.41.26-.611c.004-.169-.126-.443-.126-.443-1.128-3.242-6.642-20.457 3.445-20.457 10.341 0 4.665 17.098 3.463 20.423 0 0-.146.366-.146.477 0 .206.261.612.261.612l2.451 4.05.603-2.17 3.256 1.447-.724-2.533H37.1s-3.452-2.17-3.452-2.05Z"
              fill="#91DC5A"
            ></path>
            <path
              d="M11.098 43.081a.804.804 0 1 0 0-1.607.804.804 0 0 0 0 1.607Zm3.054 2.492a.804.804 0 1 0 0-1.608.804.804 0 0 0 0 1.608Zm3.778.804a.804.804 0 1 0 0-1.608.804.804 0 0 0 0 1.608Zm12.063 0a.804.804 0 1 0 0-1.608.804.804 0 0 0 0 1.608Zm3.9-.804a.804.804 0 1 0 0-1.608.804.804 0 0 0 0 1.608Zm3.18-2.492a.804.804 0 1 0 0-1.607.804.804 0 0 0 0 1.607Z"
              fill="#5EAC24"
            ></path>
            <path
              d="M13.544 12.699a4.547 4.547 0 1 0 0-9.093 4.547 4.547 0 0 0 0 9.093Z"
              fill="#6DC82A"
            ></path>
            <path
              d="M13.544 11.717A3.57 3.57 0 0 1 9.98 8.152a3.57 3.57 0 0 1 3.565-3.566 3.57 3.57 0 0 1 3.566 3.566 3.57 3.57 0 0 1-3.566 3.565Z"
              fill="#5EAC24"
            ></path>
            <path
              d="M15.736 8.708h-4.384a.558.558 0 0 1-.556-.556c0-.306.25-.557.556-.557h4.384c.305 0 .556.25.556.557 0 .305-.25.556-.556.556Z"
              fill="#57565C"
            ></path>
            <path
              d="M34.449 12.699a4.547 4.547 0 1 0 0-9.094 4.547 4.547 0 0 0 0 9.094Z"
              fill="#6DC82A"
            ></path>
            <path
              d="M34.45 11.717a3.57 3.57 0 0 1-3.566-3.565 3.57 3.57 0 0 1 3.566-3.566 3.57 3.57 0 0 1 3.565 3.566 3.57 3.57 0 0 1-3.566 3.565Z"
              fill="#5EAC24"
            ></path>
            <path
              d="M36.64 8.708h-4.383a.558.558 0 0 1-.556-.556c0-.306.25-.557.556-.557h4.384a.558.558 0 0 1 0 1.112Z"
              fill="#57565C"
            ></path>
            <path
              d="M13.633 17.555c-.706-.008-2.058-.41-2.18-1.868a.736.736 0 0 1 1.467-.123c.038.456.557.512.724.518h20.713c.167-.006.686-.062.724-.518a.735.735 0 1 1 1.467.123c-.122 1.459-1.474 1.86-2.172 1.868H13.633Z"
              fill="#6DC82A"
            ></path>
            <path
              d="M42.449 34.38a.736.736 0 0 1-.546-1.23c.313-.346.604-.728.865-1.134a.736.736 0 1 1 1.239.796 10.29 10.29 0 0 1-1.011 1.326.734.734 0 0 1-.547.243Zm2.375-4.764a.736.736 0 0 1-.721-.887c.453-2.155.198-4.32-.716-6.096a.736.736 0 0 1 1.308-.674c1.07 2.075 1.37 4.587.849 7.072a.736.736 0 0 1-.72.585Z"
              fill="#5EAC24"
            ></path>
          </g>
        </svg>
        <span
          class="absolute bottom-[8px] left-1/2 z-[-1] h-[4px] w-[32px] -translate-x-1/2 bg-[#68082e] blur-[6px] duration-200 ease-linear group-hover:w-[16px] group-hover:blur-[4px]"
        ></span>
      </div>
      <p class="text-center font-light">Feels like 24°C</p>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/VD232004_orange-cougar-84.html
================================================
<div class="card">
  <div class="card-details">
    <p class="text-title">Card Title</p>
    <p class="text-body">Card Details</p>
  </div>
  <a class="card-button" href="#link">More info</a>
</div>
<style>
/* From Uiverse.io by VD232004 - Tags: profilecard, card template, product card */
.card {
  width: 190px;
  height: 254px;
  border-radius: 20px;
  background: #f5f5f5;
  position: relative;
  padding: 1.8rem;
  border: 2px solid #c3c6ce;
  -webkit-transition: 0.5s ease-out;
  transition: 0.5s ease-out;
  overflow: visible;
}

.card-details {
  color: rgb(162, 0, 255);
  height: 100%;
  gap: .5em;
  display: grid;
  place-content: center;
  font-family: 'Courier New', Courier, monospace;
}

.card-button {
  text-decoration: none;
  text-align: center;
  -webkit-transform: translate(-50%, 125%);
  -ms-transform: translate(-50%, 125%);
  transform: translate(-50%, 125%);
  width: 70%;
  border-radius: 1rem;
  border: none;
  background-color: #6c00f8;
  color: #fff;
  font-size: 1rem;
  padding: .5rem 1rem;
  position: absolute;
  left: 50%;
  bottom: 0;
  opacity: 0;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
}

.text-body {
  color: rgb(134, 134, 134);
}

/*Text*/
.text-title {
  font-size: 1.5em;
  font-weight: bold;
}

/*Hover*/
.card:hover {
  border-color: #6c00f8;
  -webkit-box-shadow: 10px 5px 18px 0 rgba(255, 255, 255, 0.877);
  box-shadow: 10px 5px 18px 0 rgba(255, 255, 255, 0.877);
}

.card:hover .card-button {
  -webkit-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
  opacity: 1;
}
</style>


================================================
FILE: Cards/VashonG_big-chipmunk-8.html
================================================
<!-- From Uiverse.io by VashonG  - Tags: card -->
<div
  class="max-w-sm w-full mx-auto p-8 rounded-xl border border-[rgba(255,255,255,0.10)] dark:bg-[rgba(40,40,40,0.70)] bg-gray-100 shadow-[2px_4px_16px_0px_rgba(248,248,248,0.06)_inset] group"
>
  <div
    class="h-[15rem] md:h-[20rem] rounded-xl z-40 bg-neutral-300 dark:bg-[rgba(40,40,40,0.70)] [mask-image:radial-gradient(50%_50%_at_50%_50%,white_0%,transparent_100%)]"
  >
    <div
      class="p-8 overflow-hidden h-full relative flex items-center justify-center"
    >
      <div
        class="flex flex-row flex-shrink-0 justify-center items-center gap-2"
      >
        <div
          id="style-ed6AE"
          class="rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] h-8 w-8 circle-1 style-ed6AE"
        >
          <svg
            class="h-4 w-4"
            viewBox="0 0 512 512"
            clip-rule="evenodd"
            fill-rule="evenodd"
            image-rendering="optimizeQuality"
            text-rendering="geometricPrecision"
            shape-rendering="geometricPrecision"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              ry="105.042"
              rx="104.187"
              height="512"
              width="512"
              fill="#CC9B7A"
            ></rect>
            <path
              d="M318.663 149.787h-43.368l78.952 212.423 43.368.004-78.952-212.427zm-125.326 0l-78.952 212.427h44.255l15.932-44.608 82.846-.004 16.107 44.612h44.255l-79.126-212.427h-45.317zm-4.251 128.341l26.91-74.701 27.083 74.701h-53.993z"
              fill-rule="nonzero"
              fill="#1F1F1E"
            ></path>
          </svg>
        </div>
        <div
          id="style-pvfli"
          class="rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] h-12 w-12 circle-2 style-pvfli"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            class="h-6 w-6 dark:text-white"
            viewBox="0 0 24 24"
            stroke-width="0"
            fill="currentColor"
            stroke="currentColor"
          >
            <path
              d="M9.75 14a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 .75-.75Zm4.5 0a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 .75-.75Z"
            ></path>
            <path
              d="M12 2c2.214 0 4.248.657 5.747 1.756.136.099.268.204.397.312.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086l.633 1.478.043.022A4.75 4.75 0 0 1 24 15.222v1.028c0 .529-.309.987-.565 1.293-.28.336-.636.653-.966.918a13.84 13.84 0 0 1-1.299.911l-.024.015-.006.004-.039.025c-.223.135-.45.264-.68.386-.46.245-1.122.571-1.941.895C16.845 21.344 14.561 22 12 22c-2.561 0-4.845-.656-6.479-1.303a19.046 19.046 0 0 1-1.942-.894 14.081 14.081 0 0 1-.535-.3l-.144-.087-.04-.025-.006-.004-.024-.015a13.16 13.16 0 0 1-1.299-.911 6.913 6.913 0 0 1-.967-.918C.31 17.237 0 16.779 0 16.25v-1.028a4.75 4.75 0 0 1 2.626-4.248l.043-.022.633-1.478a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.498 1.132-3.368.397-.406.89-.717 1.474-.952.129-.108.261-.213.397-.312C7.752 2.657 9.786 2 12 2Zm-8 9.654v6.669a17.59 17.59 0 0 0 2.073.98C7.595 19.906 9.686 20.5 12 20.5c2.314 0 4.405-.594 5.927-1.197a17.59 17.59 0 0 0 2.073-.98v-6.669l-.038-.09c-.046.061-.095.12-.145.177-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.544-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.344a4.323 4.323 0 0 1-.355.508C10.704 12.456 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a3.026 3.026 0 0 1-.145-.177Zm6.309-1.092c.445-.547.708-1.334.851-2.301.057-.357.087-.718.09-1.079v-.031c-.001-.762-.166-1.26-.43-1.568l-.008-.01c-.341-.391-1.046-.689-2.533-.529-1.505.163-2.347.537-2.824 1.024-.462.473-.705 1.18-.705 2.32 0 .605.044 1.087.135 1.472.092.384.231.672.423.89.365.413 1.084.75 2.657.75.91 0 1.527-.223 1.964-.564.14-.11.268-.235.38-.374Zm2.504-2.497c.136 1.057.403 1.913.878 2.497.442.545 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.151.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.318-.862-2.824-1.025-1.487-.161-2.192.139-2.533.529-.268.308-.437.808-.438 1.578v.02c.002.299.023.598.063.894Z"
            ></path>
          </svg>
        </div>
        <div
          id="style-co8vS"
          class="h-16 w-16 rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] circle-3 style-co8vS"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 28 28"
            width="28"
            class="h-8 w-8 dark:text-white"
          >
            <path
              fill="currentColor"
              d="M26.153 11.46a6.888 6.888 0 0 0-.608-5.73 7.117 7.117 0 0 0-3.29-2.93 7.238 7.238 0 0 0-4.41-.454 7.065 7.065 0 0 0-2.41-1.742A7.15 7.15 0 0 0 12.514 0a7.216 7.216 0 0 0-4.217 1.346 7.061 7.061 0 0 0-2.603 3.539 7.12 7.12 0 0 0-2.734 1.188A7.012 7.012 0 0 0 .966 8.268a6.979 6.979 0 0 0 .88 8.273 6.89 6.89 0 0 0 .607 5.729 7.117 7.117 0 0 0 3.29 2.93 7.238 7.238 0 0 0 4.41.454 7.061 7.061 0 0 0 2.409 1.742c.92.404 1.916.61 2.923.604a7.215 7.215 0 0 0 4.22-1.345 7.06 7.06 0 0 0 2.605-3.543 7.116 7.116 0 0 0 2.734-1.187 7.01 7.01 0 0 0 1.993-2.196 6.978 6.978 0 0 0-.884-8.27Zm-10.61 14.71c-1.412 0-2.505-.428-3.46-1.215.043-.023.119-.064.168-.094l5.65-3.22a.911.911 0 0 0 .464-.793v-7.86l2.389 1.36a.087.087 0 0 1 .046.065v6.508c0 2.952-2.491 5.248-5.257 5.248ZM4.062 21.354a5.17 5.17 0 0 1-.635-3.516c.042.025.115.07.168.1l5.65 3.22a.928.928 0 0 0 .928 0l6.898-3.93v2.72a.083.083 0 0 1-.034.072l-5.711 3.255a5.386 5.386 0 0 1-4.035.522 5.315 5.315 0 0 1-3.23-2.443ZM2.573 9.184a5.283 5.283 0 0 1 2.768-2.301V13.515a.895.895 0 0 0 .464.793l6.897 3.93-2.388 1.36a.087.087 0 0 1-.08.008L4.52 16.349a5.262 5.262 0 0 1-2.475-3.185 5.192 5.192 0 0 1 .527-3.98Zm19.623 4.506-6.898-3.93 2.388-1.36a.087.087 0 0 1 .08-.008l5.713 3.255a5.28 5.28 0 0 1 2.054 2.118 5.19 5.19 0 0 1-.488 5.608 5.314 5.314 0 0 1-2.39 1.742v-6.633a.896.896 0 0 0-.459-.792Zm2.377-3.533a7.973 7.973 0 0 0-.168-.099l-5.65-3.22a.93.93 0 0 0-.928 0l-6.898 3.93V8.046a.083.083 0 0 1 .034-.072l5.712-3.251a5.375 5.375 0 0 1 5.698.241 5.262 5.262 0 0 1 1.865 2.28c.39.92.506 1.93.335 2.913ZM9.631 15.009l-2.39-1.36a.083.083 0 0 1-.046-.065V7.075c.001-.997.29-1.973.832-2.814a5.297 5.297 0 0 1 2.231-1.935 5.382 5.382 0 0 1 5.659.72 4.89 4.89 0 0 0-.168.093l-5.65 3.22a.913.913 0 0 0-.465.793l-.003 7.857Zm1.297-2.76L14 10.5l3.072 1.75v3.5L14 17.499l-3.072-1.75v-3.5Z"
            ></path>
          </svg>
        </div>
        <div
          id="style-ce5cf"
          class="rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] h-12 w-12 circle-4 style-ce5cf"
        >
          <svg
            class="h-6 w-6"
            viewBox="0 0 287.56 191"
            xmlns="http://www.w3.org/2000/svg"
            data-name="Layer 1"
            id="Layer_1"
          >
            <defs>
              <linearGradient
                gradientUnits="userSpaceOnUse"
                gradientTransform="matrix(1, 0, 0, -1, 0, 192)"
                y2="91.45"
                x2="260.34"
                y1="101.45"
                x1="62.34"
                id="linear-gradient"
              >
                <stop stop-color="#0064e1" offset="0"></stop>
                <stop stop-color="#0064e1" offset="0.4"></stop>
                <stop stop-color="#0073ee" offset="0.83"></stop>
                <stop stop-color="#0082fb" offset="1"></stop>
              </linearGradient>
              <linearGradient
                gradientUnits="userSpaceOnUse"
                gradientTransform="matrix(1, 0, 0, -1, 0, 192)"
                y2="126"
                x2="41.42"
                y1="53"
                x1="41.42"
                id="linear-gradient-2"
              >
                <stop stop-color="#0082fb" offset="0"></stop>
                <stop stop-color="#0064e0" offset="1"></stop>
              </linearGradient>
            </defs>
            <path
              d="M31.06,126c0,11,2.41,19.41,5.56,24.51A19,19,0,0,0,53.19,160c8.1,0,15.51-2,29.79-21.76,11.44-15.83,24.92-38,34-52l15.36-23.6c10.67-16.39,23-34.61,37.18-47C181.07,5.6,193.54,0,206.09,0c21.07,0,41.14,12.21,56.5,35.11,16.81,25.08,25,56.67,25,89.27,0,19.38-3.82,33.62-10.32,44.87C271,180.13,258.72,191,238.13,191V160c17.63,0,22-16.2,22-34.74,0-26.42-6.16-55.74-19.73-76.69-9.63-14.86-22.11-23.94-35.84-23.94-14.85,0-26.8,11.2-40.23,31.17-7.14,10.61-14.47,23.54-22.7,38.13l-9.06,16c-18.2,32.27-22.81,39.62-31.91,51.75C84.74,183,71.12,191,53.19,191c-21.27,0-34.72-9.21-43-23.09C3.34,156.6,0,141.76,0,124.85Z"
              fill="#0081fb"
            ></path>
            <path
              d="M24.49,37.3C38.73,15.35,59.28,0,82.85,0c13.65,0,27.22,4,41.39,15.61,15.5,12.65,32,33.48,52.63,67.81l7.39,12.32c17.84,29.72,28,45,33.93,52.22,7.64,9.26,13,12,19.94,12,17.63,0,22-16.2,22-34.74l27.4-.86c0,19.38-3.82,33.62-10.32,44.87C271,180.13,258.72,191,238.13,191c-12.8,0-24.14-2.78-36.68-14.61-9.64-9.08-20.91-25.21-29.58-39.71L146.08,93.6c-12.94-21.62-24.81-37.74-31.68-45C107,40.71,97.51,31.23,82.35,31.23c-12.27,0-22.69,8.61-31.41,21.78Z"
              fill="url(#linear-gradient)"
            ></path>
            <path
              d="M82.35,31.23c-12.27,0-22.69,8.61-31.41,21.78C38.61,71.62,31.06,99.34,31.06,126c0,11,2.41,19.41,5.56,24.51L10.14,167.91C3.34,156.6,0,141.76,0,124.85,0,94.1,8.44,62.05,24.49,37.3,38.73,15.35,59.28,0,82.85,0Z"
              fill="url(#linear-gradient-2)"
            ></path>
          </svg>
        </div>
        <div
          id="style-cq179"
          class="rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] h-8 w-8 circle-5 style-cq179"
        >
          <svg
            class="h-4 w-4"
            viewBox="0 0 16 16"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
          >
            <path
              fill="url(#prefix__paint0_radial_980_20147)"
              d="M16 8.016A8.522 8.522 0 008.016 16h-.032A8.521 8.521 0 000 8.016v-.032A8.521 8.521 0 007.984 0h.032A8.522 8.522 0 0016 7.984v.032z"
            ></path>
            <defs>
              <radialGradient
                gradientTransform="matrix(16.1326 5.4553 -43.70045 129.2322 1.588 6.503)"
                gradientUnits="userSpaceOnUse"
                r="1"
                cy="0"
                cx="0"
                id="prefix__paint0_radial_980_20147"
              >
                <stop stop-color="#9168C0" offset=".067"></stop>
                <stop stop-color="#5684D1" offset=".343"></stop>
                <stop stop-color="#1BA1E3" offset=".672"></stop>
              </radialGradient>
            </defs>
          </svg>
        </div>
      </div>
      <div
        class="h-40 w-px absolute top-20 m-auto z-40 bg-gradient-to-b from-transparent via-cyan-500 to-transparent animate-move"
      >
        <div class="w-10 h-32 top-1/2 -translate-y-1/2 absolute -left-10">
          <div class="absolute inset-0">
            <span
              id="style-85zWm"
              class="inline-block bg-black dark:bg-white style-85zWm"
            ></span
            ><span
              id="style-LbmUy"
              class="inline-block bg-black dark:bg-white style-LbmUy"
            ></span
            ><span
              id="style-OTex5"
              class="inline-block bg-black dark:bg-white style-OTex5"
            ></span
            ><span
              id="style-oUEf7"
              class="inline-block bg-black dark:bg-white style-oUEf7"
            ></span
            ><span
              id="style-9lwEF"
              class="inline-block bg-black dark:bg-white style-9lwEF"
            ></span
            ><span
              id="style-VSPhh"
              class="inline-block bg-black dark:bg-white style-VSPhh"
            ></span
            ><span
              id="style-YKMZp"
              class="inline-block bg-black dark:bg-white style-YKMZp"
            ></span
            ><span
              id="style-D4K7j"
              class="inline-block bg-black dark:bg-white style-D4K7j"
            ></span
            ><span
              id="style-61SdM"
              class="inline-block bg-black dark:bg-white style-61SdM"
            ></span
            ><span
              id="style-xcj7O"
              class="inline-block bg-black dark:bg-white style-xcj7O"
            ></span
            ><span
              id="style-P6qK5"
              class="inline-block bg-black dark:bg-white style-P6qK5"
            ></span
            ><span
              id="style-XRDvo"
              class="inline-block bg-black dark:bg-white style-XRDvo"
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <p class="text-lg font-semibold text-gray-800 dark:text-white py-2">
    Damn good card
  </p>
  <p
    class="text-sm font-normal text-neutral-600 dark:text-neutral-400 max-w-sm"
  >
    A card that showcases a set of tools that you use to create your product.
  </p>
</div>


    

================================================
FILE: Cards/VashonG_chatty-bear-22.html
================================================
<div class="card">
  <div class="boxshadow"></div>
  <div class="main">
    <div class="top"></div>
    <div class="left side"></div>
    <div class="right side"></div>
    <div class="title">TITLE</div>
    <div class="button-container">
      <button class="button">
        <svg
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          fill="none"
          stroke="red"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
          class="svg"
        >
          <rect ry="5" rx="5" y="2" x="2" height="20" width="20"></rect>
          <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
          <line y2="6.5" y1="6.5" x2="17.51" x1="17.5"></line>
        </svg>
      </button>
      <button class="button">
        <svg
          viewBox="0 0 512 512"
          fill="red"
          width="24"
          height="24"
          xmlns="http://www.w3.org/2000/svg"
          class="svg twitter"
        >
          <path
            d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
          ></path>
        </svg>
      </button>
      <button class="button">
        <svg
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="red"
          fill="none"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
          class="svg"
        >
          <path
            d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
          ></path>
          <path d="M9 18c-4.51 2-5-2-7-2"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by VashonG  - Tags: animation, card, space, glow */
.card {
  position: relative;
  height: 300px;
  width: 230px;
}
.card:nth-child(2) {
  filter: hue-rotate(300deg) brightness(1.3);
}
.card:nth-child(3) {
  filter: hue-rotate(200deg) brightness(1.5);
}
.card:nth-child(4) {
  filter: hue-rotate(60deg) brightness(3);
}
.card .boxshadow {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 1px solid red;
  transform: scale(0.8);
  box-shadow: rgba(255, 0, 0, 1) 0px 30px 70px 0px;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.card .main {
  width: 230px;
  height: 300px;
  overflow: hidden;
  background: red;
  background: linear-gradient(
    0deg,
    #3e0000 0%,
    rgba(255, 0, 0, 1) 60%,
    #3e0000 100%
  );
  position: relative;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 40px,
    100% calc(100% - 40px),
    calc(100% - 40px) 100%,
    40px 100%,
    0 calc(100% - 40px)
  );
  box-shadow: rgba(255, 0, 0, 1) 0px 7px 29px 0px;
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.card .main .top {
  position: absolute;
  top: 0px;
  left: 0;
  width: 0px;
  height: 0px;
  z-index: 2;
  border-top: 115px solid black;
  border-left: 115px solid transparent;
  border-right: 115px solid transparent;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.card .main .side {
  position: absolute;
  width: 100%;
  top: 0;
  transform: translateX(-50%);
  height: 101%;
  background: black;
  clip-path: polygon(0% 0%, 50% 0, 95% 45%, 100% 100%, 0% 100%);
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s;
}
.card .main .left {
  left: 0;
}
.card .main .right {
  right: 0;
  transform: translateX(50%) scale(-1, 1);
}
.card .main .title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 90px;
  font-weight: bold;
  font-size: 25px;
  opacity: 0;
  z-index: -1;
  transition: all 0.2s ease-out 0s;
}
.card .main .button-container {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.card .main .button-container .button {
  position: absolute;
  transform: translateX(-50%);
  padding: 5px 10px;
  clip-path: polygon(0 0, 100% 0, 81% 100%, 21% 100%);
  background: black;
  border: none;
  color: white;
  display: grid;
  place-content: center;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.card .main .button-container .button .svg {
  width: 15px;
  transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.card .main .button-container .button:nth-child(1) {
  bottom: 300px;
  transition-delay: 0.4s;
}
.card .main .button-container .button:nth-child(2) {
  bottom: 300px;
  transition-delay: 0.6s;
}
.card .main .button-container .button:nth-child(3) {
  bottom: 300px;
  transition-delay: 0.8s;
}
.card .main .button-container .button:hover .svg {
  transform: scale(1.2);
}
.card .main .button-container .button:active .svg {
  transform: scale(0.7);
}
.card:hover .main {
  transform: scale(1.1);
}
.card:hover .main .top {
  top: -50px;
}
.card:hover .main .left {
  left: -50px;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;
}
.card:hover .main .right {
  right: -50px;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;
}
.card:hover .main .title {
  opacity: 1;
  transition: all 0.2s ease-out 1.3s;
}
.card:hover .main .button-container .button:nth-child(1) {
  bottom: 80px;
  transition-delay: 0.8s;
}
.card:hover .main .button-container .button:nth-child(2) {
  bottom: 40px;
  transition-delay: 0.6s;
}
.card:hover .main .button-container .button:nth-child(3) {
  bottom: 0;
  transition-delay: 0.4s;
}

</style>
    

================================================
FILE: Cards/VashonG_giant-mouse-17.html
================================================
<!-- From Uiverse.io by VashonG - Tags: card, line, line loader, fintech, loan, interest -->
<div class="CountersNumericV4WProgress w-96 h-44 relative">
  <div class="Bg w-96 h-44 left-0 top-0 absolute rounded-xl border border-neutral-300 border-opacity-70"></div>
  <div class="AmountR left-[332px] top-[110px] absolute text-right text-black text-sm font-bold leading-tight">379</div>
  <div class="AmountL left-[24px] top-[110px] absolute text-black text-sm font-bold leading-tight">20.06.2024</div>
  <div class="ElementProgressBarsMedium w-96 h-1 left-[24px] top-[86px] absolute">
    <div class="Bg w-80 h-1 left-0 top-0 static bg-white bg-opacity-90 rounded-sm"></div>
    <div class="Progress w-48 h-1 left-0 top-0 absolute bg-amber-300 rounded-sm"></div>
  </div>
  <div class="SubtitleR left-[307px] top-[133px] absolute text-right text-zinc-500 text-xs font-medium leading-none">Days left</div>
  <div class="SubtitleL left-[24px] top-[133px] absolute text-zinc-500 text-xs font-medium leading-none">Expiration date</div>
  <div class="Amount left-[24px] top-[41px] absolute text-black text-lg font-extrabold leading-normal">$6,900.00</div>
  <div class="Title left-[24px] top-[15px] absolute text-zinc-500 text-sm font-normal leading-tight">Accured interest</div>
</div>



================================================
FILE: Cards/VashonG_happy-insect-24.html
================================================
<div
  class="max-w-sm w-full mx-auto p-8 rounded-xl border border-[rgba(255,255,255,0.10)] dark:bg-[rgba(40,40,40,0.70)] bg-gray-100 shadow-[2px_4px_16px_0px_rgba(248,248,248,0.06)_inset] group"
>
  <div
    class="h-[15rem] md:h-[20rem] rounded-xl z-40 bg-neutral-300 dark:bg-[rgba(40,40,40,0.70)] [mask-image:radial-gradient(50%_50%_at_50%_50%,white_0%,transparent_100%)]"
  >
    <div
      class="p-8 overflow-hidden h-full relative flex items-center justify-center"
    >
      <div
        class="flex flex-row flex-shrink-0 justify-center items-center gap-2"
      >
        <div
          class="rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] h-8 w-8 circle-1 style-ed6AE"
          id="style-ed6AE"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            shape-rendering="geometricPrecision"
            text-rendering="geometricPrecision"
            image-rendering="optimizeQuality"
            fill-rule="evenodd"
            clip-rule="evenodd"
            viewBox="0 0 512 512"
            class="h-4 w-4"
          >
            <rect
              fill="#CC9B7A"
              width="512"
              height="512"
              rx="104.187"
              ry="105.042"
            ></rect>
            <path
              fill="#1F1F1E"
              fill-rule="nonzero"
              d="M318.663 149.787h-43.368l78.952 212.423 43.368.004-78.952-212.427zm-125.326 0l-78.952 212.427h44.255l15.932-44.608 82.846-.004 16.107 44.612h44.255l-79.126-212.427h-45.317zm-4.251 128.341l26.91-74.701 27.083 74.701h-53.993z"
            ></path>
          </svg>
        </div>
        <div
          class="rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] h-12 w-12 circle-2 style-pvfli"
          id="style-pvfli"
        >
          <svg
            stroke="currentColor"
            fill="currentColor"
            stroke-width="0"
            viewBox="0 0 24 24"
            class="h-6 w-6 dark:text-white"
            height="1em"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9.75 14a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 .75-.75Zm4.5 0a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 .75-.75Z"
            ></path>
            <path
              d="M12 2c2.214 0 4.248.657 5.747 1.756.136.099.268.204.397.312.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086l.633 1.478.043.022A4.75 4.75 0 0 1 24 15.222v1.028c0 .529-.309.987-.565 1.293-.28.336-.636.653-.966.918a13.84 13.84 0 0 1-1.299.911l-.024.015-.006.004-.039.025c-.223.135-.45.264-.68.386-.46.245-1.122.571-1.941.895C16.845 21.344 14.561 22 12 22c-2.561 0-4.845-.656-6.479-1.303a19.046 19.046 0 0 1-1.942-.894 14.081 14.081 0 0 1-.535-.3l-.144-.087-.04-.025-.006-.004-.024-.015a13.16 13.16 0 0 1-1.299-.911 6.913 6.913 0 0 1-.967-.918C.31 17.237 0 16.779 0 16.25v-1.028a4.75 4.75 0 0 1 2.626-4.248l.043-.022.633-1.478a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.498 1.132-3.368.397-.406.89-.717 1.474-.952.129-.108.261-.213.397-.312C7.752 2.657 9.786 2 12 2Zm-8 9.654v6.669a17.59 17.59 0 0 0 2.073.98C7.595 19.906 9.686 20.5 12 20.5c2.314 0 4.405-.594 5.927-1.197a17.59 17.59 0 0 0 2.073-.98v-6.669l-.038-.09c-.046.061-.095.12-.145.177-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.544-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.344a4.323 4.323 0 0 1-.355.508C10.704 12.456 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a3.026 3.026 0 0 1-.145-.177Zm6.309-1.092c.445-.547.708-1.334.851-2.301.057-.357.087-.718.09-1.079v-.031c-.001-.762-.166-1.26-.43-1.568l-.008-.01c-.341-.391-1.046-.689-2.533-.529-1.505.163-2.347.537-2.824 1.024-.462.473-.705 1.18-.705 2.32 0 .605.044 1.087.135 1.472.092.384.231.672.423.89.365.413 1.084.75 2.657.75.91 0 1.527-.223 1.964-.564.14-.11.268-.235.38-.374Zm2.504-2.497c.136 1.057.403 1.913.878 2.497.442.545 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.151.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.318-.862-2.824-1.025-1.487-.161-2.192.139-2.533.529-.268.308-.437.808-.438 1.578v.02c.002.299.023.598.063.894Z"
            ></path>
          </svg>
        </div>
        <div
          class="h-16 w-16 rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] circle-3 style-co8vS"
          id="style-co8vS"
        >
          <svg
            class="h-8 w-8 dark:text-white"
            width="28"
            viewBox="0 0 28 28"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M26.153 11.46a6.888 6.888 0 0 0-.608-5.73 7.117 7.117 0 0 0-3.29-2.93 7.238 7.238 0 0 0-4.41-.454 7.065 7.065 0 0 0-2.41-1.742A7.15 7.15 0 0 0 12.514 0a7.216 7.216 0 0 0-4.217 1.346 7.061 7.061 0 0 0-2.603 3.539 7.12 7.12 0 0 0-2.734 1.188A7.012 7.012 0 0 0 .966 8.268a6.979 6.979 0 0 0 .88 8.273 6.89 6.89 0 0 0 .607 5.729 7.117 7.117 0 0 0 3.29 2.93 7.238 7.238 0 0 0 4.41.454 7.061 7.061 0 0 0 2.409 1.742c.92.404 1.916.61 2.923.604a7.215 7.215 0 0 0 4.22-1.345 7.06 7.06 0 0 0 2.605-3.543 7.116 7.116 0 0 0 2.734-1.187 7.01 7.01 0 0 0 1.993-2.196 6.978 6.978 0 0 0-.884-8.27Zm-10.61 14.71c-1.412 0-2.505-.428-3.46-1.215.043-.023.119-.064.168-.094l5.65-3.22a.911.911 0 0 0 .464-.793v-7.86l2.389 1.36a.087.087 0 0 1 .046.065v6.508c0 2.952-2.491 5.248-5.257 5.248ZM4.062 21.354a5.17 5.17 0 0 1-.635-3.516c.042.025.115.07.168.1l5.65 3.22a.928.928 0 0 0 .928 0l6.898-3.93v2.72a.083.083 0 0 1-.034.072l-5.711 3.255a5.386 5.386 0 0 1-4.035.522 5.315 5.315 0 0 1-3.23-2.443ZM2.573 9.184a5.283 5.283 0 0 1 2.768-2.301V13.515a.895.895 0 0 0 .464.793l6.897 3.93-2.388 1.36a.087.087 0 0 1-.08.008L4.52 16.349a5.262 5.262 0 0 1-2.475-3.185 5.192 5.192 0 0 1 .527-3.98Zm19.623 4.506-6.898-3.93 2.388-1.36a.087.087 0 0 1 .08-.008l5.713 3.255a5.28 5.28 0 0 1 2.054 2.118 5.19 5.19 0 0 1-.488 5.608 5.314 5.314 0 0 1-2.39 1.742v-6.633a.896.896 0 0 0-.459-.792Zm2.377-3.533a7.973 7.973 0 0 0-.168-.099l-5.65-3.22a.93.93 0 0 0-.928 0l-6.898 3.93V8.046a.083.083 0 0 1 .034-.072l5.712-3.251a5.375 5.375 0 0 1 5.698.241 5.262 5.262 0 0 1 1.865 2.28c.39.92.506 1.93.335 2.913ZM9.631 15.009l-2.39-1.36a.083.083 0 0 1-.046-.065V7.075c.001-.997.29-1.973.832-2.814a5.297 5.297 0 0 1 2.231-1.935 5.382 5.382 0 0 1 5.659.72 4.89 4.89 0 0 0-.168.093l-5.65 3.22a.913.913 0 0 0-.465.793l-.003 7.857Zm1.297-2.76L14 10.5l3.072 1.75v3.5L14 17.499l-3.072-1.75v-3.5Z"
              fill="currentColor"
            ></path>
          </svg>
        </div>
        <div
          class="rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] h-12 w-12 circle-4 style-ce5cf"
          id="style-ce5cf"
        >
          <svg
            id="Layer_1"
            data-name="Layer 1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 287.56 191"
            class="h-6 w-6"
          >
            <defs>
              <linearGradient
                id="linear-gradient"
                x1="62.34"
                y1="101.45"
                x2="260.34"
                y2="91.45"
                gradientTransform="matrix(1, 0, 0, -1, 0, 192)"
                gradientUnits="userSpaceOnUse"
              >
                <stop offset="0" stop-color="#0064e1"></stop>
                <stop offset="0.4" stop-color="#0064e1"></stop>
                <stop offset="0.83" stop-color="#0073ee"></stop>
                <stop offset="1" stop-color="#0082fb"></stop>
              </linearGradient>
              <linearGradient
                id="linear-gradient-2"
                x1="41.42"
                y1="53"
                x2="41.42"
                y2="126"
                gradientTransform="matrix(1, 0, 0, -1, 0, 192)"
                gradientUnits="userSpaceOnUse"
              >
                <stop offset="0" stop-color="#0082fb"></stop>
                <stop offset="1" stop-color="#0064e0"></stop>
              </linearGradient>
            </defs>
            <path
              fill="#0081fb"
              d="M31.06,126c0,11,2.41,19.41,5.56,24.51A19,19,0,0,0,53.19,160c8.1,0,15.51-2,29.79-21.76,11.44-15.83,24.92-38,34-52l15.36-23.6c10.67-16.39,23-34.61,37.18-47C181.07,5.6,193.54,0,206.09,0c21.07,0,41.14,12.21,56.5,35.11,16.81,25.08,25,56.67,25,89.27,0,19.38-3.82,33.62-10.32,44.87C271,180.13,258.72,191,238.13,191V160c17.63,0,22-16.2,22-34.74,0-26.42-6.16-55.74-19.73-76.69-9.63-14.86-22.11-23.94-35.84-23.94-14.85,0-26.8,11.2-40.23,31.17-7.14,10.61-14.47,23.54-22.7,38.13l-9.06,16c-18.2,32.27-22.81,39.62-31.91,51.75C84.74,183,71.12,191,53.19,191c-21.27,0-34.72-9.21-43-23.09C3.34,156.6,0,141.76,0,124.85Z"
            ></path>
            <path
              fill="url(#linear-gradient)"
              d="M24.49,37.3C38.73,15.35,59.28,0,82.85,0c13.65,0,27.22,4,41.39,15.61,15.5,12.65,32,33.48,52.63,67.81l7.39,12.32c17.84,29.72,28,45,33.93,52.22,7.64,9.26,13,12,19.94,12,17.63,0,22-16.2,22-34.74l27.4-.86c0,19.38-3.82,33.62-10.32,44.87C271,180.13,258.72,191,238.13,191c-12.8,0-24.14-2.78-36.68-14.61-9.64-9.08-20.91-25.21-29.58-39.71L146.08,93.6c-12.94-21.62-24.81-37.74-31.68-45C107,40.71,97.51,31.23,82.35,31.23c-12.27,0-22.69,8.61-31.41,21.78Z"
            ></path>
            <path
              fill="url(#linear-gradient-2)"
              d="M82.35,31.23c-12.27,0-22.69,8.61-31.41,21.78C38.61,71.62,31.06,99.34,31.06,126c0,11,2.41,19.41,5.56,24.51L10.14,167.91C3.34,156.6,0,141.76,0,124.85,0,94.1,8.44,62.05,24.49,37.3,38.73,15.35,59.28,0,82.85,0Z"
            ></path>
          </svg>
        </div>
        <div
          class="rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] h-8 w-8 circle-5 style-cq179"
          id="style-cq179"
        >
          <svg
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            class="h-4 w-4"
          >
            <path
              d="M16 8.016A8.522 8.522 0 008.016 16h-.032A8.521 8.521 0 000 8.016v-.032A8.521 8.521 0 007.984 0h.032A8.522 8.522 0 0016 7.984v.032z"
              fill="url(#prefix__paint0_radial_980_20147)"
            ></path>
            <defs>
              <radialGradient
                id="prefix__paint0_radial_980_20147"
                cx="0"
                cy="0"
                r="1"
                gradientUnits="userSpaceOnUse"
                gradientTransform="matrix(16.1326 5.4553 -43.70045 129.2322 1.588 6.503)"
              >
                <stop offset=".067" stop-color="#9168C0"></stop>
                <stop offset=".343" stop-color="#5684D1"></stop>
                <stop offset=".672" stop-color="#1BA1E3"></stop>
              </radialGradient>
            </defs>
          </svg>
        </div>
      </div>
      <div
        class="h-40 w-px absolute top-20 m-auto z-40 bg-gradient-to-b from-transparent via-cyan-500 to-transparent animate-move"
      >
        <div class="w-10 h-32 top-1/2 -translate-y-1/2 absolute -left-10">
          <div class="absolute inset-0">
            <span
              class="inline-block bg-black dark:bg-white style-85zWm"
              id="style-85zWm"
            ></span
            ><span
              class="inline-block bg-black dark:bg-white style-LbmUy"
              id="style-LbmUy"
            ></span
            ><span
              class="inline-block bg-black dark:bg-white style-OTex5"
              id="style-OTex5"
            ></span
            ><span
              class="inline-block bg-black dark:bg-white style-oUEf7"
              id="style-oUEf7"
            ></span
            ><span
              class="inline-block bg-black dark:bg-white style-9lwEF"
              id="style-9lwEF"
            ></span
            ><span
              class="inline-block bg-black dark:bg-white style-VSPhh"
              id="style-VSPhh"
            ></span
            ><span
              class="inline-block bg-black dark:bg-white style-YKMZp"
              id="style-YKMZp"
            ></span
            ><span
              class="inline-block bg-black dark:bg-white style-D4K7j"
              id="style-D4K7j"
            ></span
            ><span
              class="inline-block bg-black dark:bg-white style-61SdM"
              id="style-61SdM"
            ></span
            ><span
              class="inline-block bg-black dark:bg-white style-xcj7O"
              id="style-xcj7O"
            ></span
            ><span
              class="inline-block bg-black dark:bg-white style-P6qK5"
              id="style-P6qK5"
            ></span
            ><span
              class="inline-block bg-black dark:bg-white style-XRDvo"
              id="style-XRDvo"
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <p class="text-lg font-semibold text-gray-800 dark:text-white py-2">
    Damn good card
  </p>
  <p
    class="text-sm font-normal text-neutral-600 dark:text-neutral-400 max-w-sm"
  >
    A card that showcases a set of tools that you use to create your product.
  </p>
</div>

<style>
/* From Uiverse.io by VashonG  - Tags: card */
.flex {
  display: flex;
}

.w-full {
  width: 100%;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

@media (min-width: 640px) {
  .sm\:p-10 {
    padding: 2.5rem;
  }
}

.relative {
  position: relative;
}

.border {
  border-width: 1px;
}

.overflow-hidden {
  overflow: hidden;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .md\:px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

:is(.dark .dark\:bg-brand) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: #000;
  }
}

.max-w-sm {
  max-width: 24rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.border-\[rgba\(255\,255\,255\,0\.10\)\] {
  border-color: hsla(0, 0%, 100%, 0.1);
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.p-8 {
  padding: 2rem;
}

.shadow-\[2px_4px_16px_0px_rgba\(248\,248\,248\,0\.06\)_inset\] {
  --tw-shadow: 2px 4px 16px 0px hsla(0, 0%, 97%, 0.06) inset;
  --tw-shadow-colored: inset 2px 4px 16px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

:is(.dark .dark\:bg-\[rgba\(40\,40\,40\,0\.70\)\]) {
  background-color: rgba(40, 40, 40, 0.7);
}

.z-40 {
  z-index: 40;
}

.bg-neutral-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 212 / var(--tw-bg-opacity));
}

.\[mask-image\:radial-gradient\(50\%_50\%_at_50\%_50\%\,white_0\%\,transparent_100\%\)\] {
  -webkit-mask-image: radial-gradient(
    50% 50% at 50% 50%,
    #000 0,
    transparent 100%
  );
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 0, transparent 100%);
}

@media (min-width: 768px) {
  .md\:h-\[20rem\] {
    height: 20rem;
  }
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.font-semibold {
  font-weight: 600;
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
}

:is(.dark .dark\:text-white) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.font-normal {
  font-weight: 400;
}

.text-neutral-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity));
}

:is(.dark .dark\:text-neutral-400) {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));
}

.h-full {
  height: 100%;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

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

.gap-2 {
  gap: 0.5rem;
}

.absolute {
  position: absolute;
}

.top-20 {
  top: 5rem;
}

.m-auto {
  margin: auto;
}

.h-40 {
  height: 10rem;
}

.w-px {
  width: 1px;
}

.animate-move {
  animation: move 5s linear infinite;
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-cyan-500 {
  --tw-gradient-to: rgba(6, 182, 212, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from),
    #06b6d4 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.h-8 {
  height: 2rem;
}

.w-8 {
  width: 2rem;
}

.rounded-full {
  border-radius: 9999px;
}

.h-12 {
  height: 3rem;
}

.w-12 {
  width: 3rem;
}

.h-16 {
  height: 4rem;
}

.w-16 {
  width: 4rem;
}

.-left-10 {
  left: -2.5rem;
}

.top-1\/2 {
  top: 50%;
}

.h-32 {
  height: 8rem;
}

.w-10 {
  width: 2.5rem;
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
}

.-translate-y-1\/2 {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.h-4 {
  height: 1rem;
}

.w-4 {
  width: 1rem;
}

.h-6 {
  height: 1.5rem;
}

.w-6 {
  width: 1.5rem;
}

.inset-0 {
  inset: 0;
}

.inline-block {
  display: inline-block;
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

:is(.dark .dark\:bg-white) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

@keyframes move {
  0% {
    transform: translateX(-200px);
    transform: translateX(-200px);
  }
  100% {
    transform: translateX(200px);
    transform: translateX(200px);
  }
}
#style-ed6AE.style-ed6AE {
  will-change: transform;
  transform: translateY(-0.05094px);
}
#style-pvfli.style-pvfli {
  will-change: transform;
  transform: translateY(0px);
}
#style-co8vS.style-co8vS {
  will-change: transform;
  transform: translateY(0px);
}
#style-ce5cf.style-ce5cf {
  will-change: transform;
  transform: translateY(0px);
}
#style-cq179.style-cq179 {
  will-change: transform;
  transform: translateY(0px);
}
#style-85zWm.style-85zWm {
  position: absolute;
  top: 94.7378px;
  left: 17.28px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  z-index: 1;
  will-change: opacity, transform;
  transform: scale(1.12334);
  opacity: 1;
}
#style-LbmUy.style-LbmUy {
  position: absolute;
  top: 23.6802px;
  left: 12.1047px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  z-index: 1;
  will-change: opacity, transform;
  transform: scale(0.395521);
  opacity: 1;
}
#style-OTex5.style-OTex5 {
  position: absolute;
  top: 35.4375px;
  left: 13.9731px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  z-index: 1;
  will-change: opacity, transform;
  transform: scale(1.13813);
  opacity: 1;
}
#style-oUEf7.style-oUEf7 {
  position: absolute;
  top: 42.0762px;
  left: 25.4587px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  z-index: 1;
  will-change: opacity, transform;
  transform: scale(0.225724);
  opacity: 1;
}
#style-9lwEF.style-9lwEF {
  position: absolute;
  top: 104.982px;
  left: 19.196px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  z-index: 1;
  will-change: opacity, transform;
  transform: scale(1.06254);
  opacity: 1;
}
#style-VSPhh.style-VSPhh {
  position: absolute;
  top: 18.6269px;
  left: 35.18px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  z-index: 1;
  will-change: opacity, transform;
  transform: scale(0.430767);
  opacity: 1;
}
#style-YKMZp.style-YKMZp {
  position: absolute;
  top: 25.504px;
  left: 19.6629px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  z-index: 1;
  will-change: opacity, transform;
  transform: scale(0.775868);
  opacity: 1;
}
#style-D4K7j.style-D4K7j {
  position: absolute;
  top: 61.3206px;
  left: 10.669px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  z-index: 1;
  will-change: opacity, transform;
  transform: scale(1.12492);
  opacity: 1;
}
#style-61SdM.style-61SdM {
  position: absolute;
  top: 65.412px;
  left: 26.2222px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  z-index: 1;
  will-change: opacity, transform;
  transform: scale(0.714952);
  opacity: 1;
}
#style-xcj7O.style-xcj7O {
  position: absolute;
  top: 76.026px;
  left: 35.6904px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  z-index: 1;
  will-change: opacity, transform;
  transform: scale(0.0932895);
  opacity: 1;
}
#style-P6qK5.style-P6qK5 {
  position: absolute;
  top: 51.8203px;
  left: 21.9557px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  z-index: 1;
  will-change: opacity, transform;
  transform: scale(0.648569);
  opacity: 1;
}
#style-XRDvo.style-XRDvo {
  position: absolute;
  top: 71.8022px;
  left: 30.554px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  z-index: 1;
  will-change: opacity, transform;
  transform: scale(1.14523);
  opacity: 1;
}

</style>
    

================================================
FILE: Cards/Vikikos_sweet-chipmunk-65.html
================================================
<div class="card">
<div></div>
</div>
<style>
/* From Uiverse.io by Vikikos - Tags: card */
.card {
 width: 190px;
 height: 254px;
 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.212);
 background: #fff;
 display: flex;
 border-radius: 20px;
 justify-content: center;
 position: relative;
 transition: all .4s;
}

.card::before {
 content: '---content---';
 letter-spacing: 0.2em;
 position: absolute;
 bottom: 8px;
 left: 20px;
 color: rgb(51, 51, 51);
 font-size: 0.8em;
 font-weight: 700;
}

.card div {
 width: 100%;
 height: 100%;
 border-radius: 20px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.212);
 cursor: pointer;
 z-index: 10;
 transition: all .4s;
 background-color: #fff;
}

.card:hover div {
 transform: translateY(-30px);
}
</style>


================================================
FILE: Cards/VinciiAtreus_purple-bird-79.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by VinciiAtreus - Tags: card */
@keyframes rainbow {
  0% {
    color: #ff0000;
  }

  14% {
    color: #ff7f00;
  }

  28% {
    color: #ffff00;
  }

  42% {
    color: #00ff00;
  }

  57% {
    color: #0000ff;
  }

  71% {
    color: #4b0082;
  }

  85% {
    color: #8f00ff;
  }

  100% {
    color: #ff0000;
  }
}

.card {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 400px;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
}

.heading {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.heading span {
  color: #8198b3;
  animation: rainbow 5s linear infinite;
}

.content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.item {
  display: flex;
  align-items: center;
  color: #999;
  cursor: pointer;
  transition: all 0.3s;
}

.item:hover {
  color: #9360e4;
}

.item svg {
  margin-right: 8px;
}

button {
  background-color: #9360e4;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  cursor: pointer;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s, transform 0.5s;
}

button:hover {
  background-color: rgb(181, 81, 221);
  transform: translateY(-3px);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.item:hover {
  color: #9360e4;
  transform: translateY(-5px);
}

.item svg {
  margin-right: 8px;
  transition: transform 0.3s;
}

.item:hover svg {
  transform: scale(1.1);
}
</style>


================================================
FILE: Cards/Web-Potato_quick-bird-33.html
================================================
<div class="card">
    <p class="text1">Come Deeper
    </p>
    <div class="one">
        <div class="two">
            <div class="three">
                <div class="four">
                    <div class="five">

                        <p class="text2">It's<br>Deep<br>In Here...
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by Web-Potato - Tags: card */
.card {
  width: 190px;
  height: 254px;
  background: #d3d3d3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.one {
  width: 90%;
  height: 95%;
  background-color: #c0c0c0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3%;
}

.two {
  width: 90%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  border-radius: 3%;
  background-color: #9c9c9c;
  transition: 1s;
  transition-delay: 0.2s;
}

.three {
  width: 90%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  border-radius: 3%;
  background-color: #797979;
  transition: 0.9s;
  transition-delay: 0.2s;
}

.four {
  width: 90%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ececec;
  opacity: 0;
  border-radius: 3%;
  background-color: #5a5a5a;
  transition: 0.8s;
  transition-delay: 0.2s;
}

.five {
  width: 90%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ececec;
  opacity: 0;
  border-radius: 3%;
  background-color: #424242;
  transition: 0.7s;
  transition-delay: 0.2s;
}

.six {
  width: 90%;
  height: 95%;
  color: #ececec;
  text-align: center;
  opacity: 0;
  border-radius: 3%;
  background-color: #302f2f;
  transition: 0.6s;
  transition-delay: 0.2s;
}

.text2 {
  padding-top: 50%;
  transform: translateY(-5em);
  transition: 0.2s;
  opacity: 0;
}

.card:hover .two {
  opacity: 1;
  transition: 0.4s;
}

.card:hover .three {
  opacity: 1;
  transition: 0.5s;
}

.card:hover .four {
  opacity: 1;
  transition: 0.6s;
}

.card:hover .five {
  opacity: 1;
  transition: 0.7s;
}

.card:hover .six {
  opacity: 1;
  transition: 0.8s;
}

.card:hover .text1 {
  opacity: 0;
}

.card:hover .text2 {
  transform: translateY(2em);
  transition-delay: 0.5s;
  opacity: 1;
}

.text1 {
  position: absolute;
  opacity: 1;
}

</style>


================================================
FILE: Cards/WittyHydra_fluffy-newt-18.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by WittyHydra - Tags:  */
@keyframes moveIn {
  0% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}

.card {
  background-color: #121212;
  box-shadow: 0px 0px 100px white;
 /* Dark mode background color /
color: #ffffff; / Dark mode text color */
/* Light mode styles /
@media (prefers-color-scheme: light) {
background-color: #ffffff; / Light mode background color /
color: #121212; / Light mode text color */
}

.card {
  position: relative;
  box-sizing: border-box;
  animation: gradient 9s ease-in-out infinite;
  background-size: 500% 500%;
  transition: all 0.5s;
  width: 240px;
  height: 290px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  padding: 30px;
  border-radius: 16px;
}

.card {
  transition: transform 0.2s ease-out;
}

.card:hover {
  transform: scale(1.1);
}

.item svg {
  transition: fill 0.2s ease-out;
}

.item:hover svg {
  fill: #4caf50;
}

button {
  width: 100%;
  height: 30px;
  background-color: transparent;
  border-color: white;
  border-radius: 10px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  box-shadow: 0px 0px 100px rgb(28, 27, 27);
  justify-content: center;
  background-color: rgb(0, 0, 0);
  transition-duration: .1s;
}

button:hover {
  font-weight: 800;
  box-shadow: 0px 0px 2px 1px #ffffff;
  transition-duration: 0.4s;
}

.card:before {
  position: absolute;
  font-size: 4em;
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: -14.2%;
  filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.445));
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
  background-color: white;
  color: black;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.item svg {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.item span {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}





</style>


================================================
FILE: Cards/WrongCodeU_fast-bulldog-65.html
================================================
<div class="card">
  <div>
    <p class="Name-9999">Abo</p>
    <p class="Price-9999">10$</p>
    <svg viewBox="0 0 20 20" class="svg-icon">
			<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z" fill="none"></path>
		</svg>
    <p class="YouGet-9999">lorem-impus</p>
    <svg viewBox="0 0 20 20" class="svg-icon2">
							<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z" fill="none"></path>
						</svg>
    <p class="Description-9999">lorem-ipsum</p>
  </div>
</div>
<style>
/* From Uiverse.io by WrongCodeU - Tags: subscription, blue, card, box-shadow */
.card {
  width: 12em;
  height: 15em;
  background: lightblue;
  border-radius: 1em;
  border-color: black;
  border-style: solid;
  border-width: 0.4em;
  box-shadow: 0.3em 0.3em black;
}

.svg-icon {
  margin-top: 0.3em;
  margin-left: 0.5em;
  width: 2em;
  height: 2.5em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: rgb(0, 110, 255);
}

.svg-icon circle {
  stroke: #000;
  stroke-width: 1;
}

.Name-9999 {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 2em;
  margin-left: 0.5em;
}

.Price-9999 {
  margin-bottom: 0.3em;
  margin-top: -0.3em;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 3em;
  margin-left: 0.3em;
}

.Description-9999 {
  font-size: 1.1em;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  position: relative;
  margin-left: 4em;
  margin-top: -2.4em;
}

.YouGet-9999 {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  position: relative;
  margin-left: 4em;
  margin-top: -2.4em;
  font-size: 1.1em;
}

.svg-icon2 {
  margin-top: 1em;
  margin-left: 0.5em;
  width: 2em;
  height: 2em;
}

.svg-icon2 path,
.svg-icon2 polygon,
.svg-icon2 rect {
  fill: rgb(0, 110, 255);
}

.svg-icon2 circle {
  stroke: #000;
  stroke-width: 1;
}

</style>


================================================
FILE: Cards/Yaseen549_chilly-dragon-64.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by Yaseen549 - Tags: card, neumorphism */
.card {
 width: 190px;
 height: 254px;
 border-radius: 30px;
 background: #212121;
 box-shadow: 15px 15px 30px rgb(25, 25, 25),
             -15px -15px 30px rgb(60, 60, 60);
}


</style>


================================================
FILE: Cards/Yaseen549_fat-octopus-26.html
================================================
<div class="card">
</div>
<style>
/* From Uiverse.io by Yaseen549 - Tags: card */
.card {
  width: 190px;
  height: 254px;
  background: transparent;
  border: 2px solid #07ff07;
  box-shadow: 2px 2px 15px #000000 inset;
  text-align: center;
  color: #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pacifico';
}

.card:hover {
  color: #07ff07;
  box-shadow: 2px 2px 15px #07ff07 inset;
}

</style>


================================================
FILE: Cards/Yaya12085_breezy-eagle-39.html
================================================
<div class="task" draggable="true">
  <div class="tags">
    <span class="tag">Draggable</span>
    <button class="options">
      <svg xml:space="preserve" viewBox="0 0 41.915 41.916" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1" fill="#000000"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M11.214,20.956c0,3.091-2.509,5.589-5.607,5.589C2.51,26.544,0,24.046,0,20.956c0-3.082,2.511-5.585,5.607-5.585 C8.705,15.371,11.214,17.874,11.214,20.956z"></path> <path d="M26.564,20.956c0,3.091-2.509,5.589-5.606,5.589c-3.097,0-5.607-2.498-5.607-5.589c0-3.082,2.511-5.585,5.607-5.585 C24.056,15.371,26.564,17.874,26.564,20.956z"></path> <path d="M41.915,20.956c0,3.091-2.509,5.589-5.607,5.589c-3.097,0-5.606-2.498-5.606-5.589c0-3.082,2.511-5.585,5.606-5.585 C39.406,15.371,41.915,17.874,41.915,20.956z"></path> </g> </g> </g></svg>
    </button>
  </div>
  <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown </p>
  <div class="stats">
    <div>
      <div><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linecap="round" stroke-width="2" d="M12 8V12L15 15"></path> <circle stroke-width="2" r="9" cy="12" cx="12"></circle> </g></svg>Feb 24</div>
      <div><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M16 10H16.01M12 10H12.01M8 10H8.01M3 10C3 4.64706 5.11765 3 12 3C18.8824 3 21 4.64706 21 10C21 15.3529 18.8824 17 12 17C11.6592 17 11.3301 16.996 11.0124 16.9876L7 21V16.4939C4.0328 15.6692 3 13.7383 3 10Z"></path> </g></svg>18</div>
      <div><svg fill="#000000" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-2.5 0 32 32"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g id="icomoon-ignore"> </g> <path fill="#000000" d="M0 10.284l0.505 0.36c0.089 0.064 0.92 0.621 2.604 0.621 0.27 0 0.55-0.015 0.836-0.044 3.752 4.346 6.411 7.472 7.060 8.299-1.227 2.735-1.42 5.808-0.537 8.686l0.256 0.834 7.63-7.631 8.309 8.309 0.742-0.742-8.309-8.309 7.631-7.631-0.834-0.255c-2.829-0.868-5.986-0.672-8.686 0.537-0.825-0.648-3.942-3.3-8.28-7.044 0.11-0.669 0.23-2.183-0.575-3.441l-0.352-0.549-8.001 8.001zM1.729 10.039l6.032-6.033c0.385 1.122 0.090 2.319 0.086 2.334l-0.080 0.314 0.245 0.214c7.409 6.398 8.631 7.39 8.992 7.546l-0.002 0.006 0.195 0.058 0.185-0.087c2.257-1.079 4.903-1.378 7.343-0.836l-13.482 13.481c-0.55-2.47-0.262-5.045 0.837-7.342l0.104-0.218-0.098-0.221-0.031 0.013c-0.322-0.632-1.831-2.38-7.498-8.944l-0.185-0.215-0.282 0.038c-0.338 0.045-0.668 0.069-0.981 0.069-0.595 0-1.053-0.083-1.38-0.176z"> </path> </g></svg>7</div>
    </div>
    <div class="viewer">
      <span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-width="2" stroke="#ffffff" d="M17 8C17 10.7614 14.7614 13 12 13C9.23858 13 7 10.7614 7 8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8Z"></path> <path stroke-linecap="round" stroke-width="2" stroke="#ffffff" d="M3 21C3.95728 17.9237 6.41998 17 12 17C17.58 17 20.0427 17.9237 21 21"></path> </g></svg></span>
      <span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-width="2" stroke="#ffffff" d="M17 8C17 10.7614 14.7614 13 12 13C9.23858 13 7 10.7614 7 8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8Z"></path> <path stroke-linecap="round" stroke-width="2" stroke="#ffffff" d="M3 21C3.95728 17.9237 6.41998 17 12 17C17.58 17 20.0427 17.9237 21 21"></path> </g></svg></span>
      <span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-width="2" stroke="#ffffff" d="M17 8C17 10.7614 14.7614 13 12 13C9.23858 13 7 10.7614 7 8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8Z"></path> <path stroke-linecap="round" stroke-width="2" stroke="#ffffff" d="M3 21C3.95728 17.9237 6.41998 17 12 17C17.58 17 20.0427 17.9237 21 21"></path> </g></svg></span>
      <span>+20</span>
  </div>
  </div>
  
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.task {
  position: relative;
  color: #2e2e2f;
  cursor: move;
  background-color: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
  margin-bottom: 1rem;
  border: 3px dashed transparent;
  max-width: 350px;
}

.task:hover {
  box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
  border-color: rgba(162, 179, 207, 0.2) !important;
}

.task p {
  font-size: 15px;
  margin: 1.2rem 0;
}

.tag {
  border-radius: 100px;
  padding: 4px 13px;
  font-size: 12px;
  color: #ffffff;
  background-color: #1389eb;
}

.tags {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.options {
  background: transparent;
  border: 0;
  color: #c4cad3;
  font-size: 17px;
}

.options svg {
  fill: #9fa4aa;
  width: 20px;
}

.stats {
  position: relative;
  width: 100%;
  color: #9fa4aa;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stats div {
  margin-right: 1rem;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.stats svg {
  margin-right: 5px;
  height: 100%;
  stroke: #9fa4aa;
}

.viewer span {
  height: 30px;
  width: 30px;
  background-color: rgb(28, 117, 219);
  margin-right: -10px;
  border-radius: 50%;
  border: 1px solid #fff;
  display: grid;
  align-items: center;
  text-align: center;
  font-weight: bold;
  color: #fff;
  padding: 2px;
}

.viewer span svg {
  stroke: #fff;
}



</style>


================================================
FILE: Cards/Yaya12085_chatty-eel-94.html
================================================
<div class="card">
        <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#ffffff" d="M20 14V17.5C20 20.5577 16 20.5 12 20.5C8 20.5 4 20.5577 4 17.5V14M12 15L12 3M12 15L8 11M12 15L16 11"></path> </g></svg>
        </div>
        <div class="content">
            <span class="title">Good news Mac users!</span>
            <div class="desc">This software is now available for download.</div> 
            <div class="actions">
                <div>
                    <a href="#" class="download">Try it free</a>
                </div>
                <div>
                    <a href="#" class="notnow">Not now</a> 
                </div>
            </div>    
        </div>
        <button type="button" class="close">
            <svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card, download */
.card {
  max-width: 320px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-radius: 0.5rem;
  background: #606c88;
  background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);
  background: linear-gradient(to right top, #3f4c6b, #606c88);
  padding: 1rem;
  color: rgb(107, 114, 128);
  box-shadow: 0px 87px 78px -39px rgba(0,0,0,0.4);
}

.icon {
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: #153586;
  color: rgb(59, 130, 246);
}

.icon svg {
  height: 1.25rem;
  width: 1.25rem;
}

.content {
  margin-left: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
}

.title {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: rgb(255, 255, 255);
}

.desc {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: rgb(202, 200, 200);
}

.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.download, .notnow {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.375rem 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgb(255, 255, 255);
  outline: 2px solid transparent;
  border: 1px solid rgba(253, 253, 253, 0.363);
}

.download {
  background-color: #284385;
  font-weight: 600;
}

.download:hover {
  background-color: #153586;
}

.notnow {
  background-color: #606c88;
  font-weight: 500;
}

.notnow:hover {
  background-color: #3f4c6b;
}

.close {
  margin: -0.375rem -0.375rem -0.375rem auto;
  height: 2rem;
  width: 2rem;
  display: inline-flex;
  border-radius: 0.5rem;
  background-color: #606c88;
  padding: 0.375rem;
  color: rgba(255, 255, 255, 1);
  border: none;
}

.close svg {
  height: 1.25rem;
  width: 1.25rem;
}

.close:hover {
  background-color: rgb(58, 69, 83);
}
</style>


================================================
FILE: Cards/Yaya12085_cold-elephant-65.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by Yaya12085  - Tags: animation, social, card, hover, social media, cool card */
.card {
  --color1: #af40ff;
  --color2: #5b42f3;
  --color3: #00ddeb;
  max-width: 350px;
  box-sizing: border-box;
  height: 270px;
  width: 450px;
  border-radius: 12px;
  padding: 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
  background: -webkit-radial-gradient(
      center,
      circle,
      rgba(255, 255, 255, 0.35),
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0) 21%
    ),
    -webkit-radial-gradient(center, circle, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)
          20%, rgba(0, 0, 0, 0) 21%),
    -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
  background: -moz-radial-gradient(
      center,
      circle,
      rgba(255, 255, 255, 0.35),
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0) 21%
    ),
    -webkit-radial-gradient(center, circle, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)
          20%, rgba(0, 0, 0, 0) 21%),
    -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
  background: -ms-radial-gradient(
      center,
      circle,
      rgba(255, 255, 255, 0.35),
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0) 21%
    ),
    -webkit-radial-gradient(center, circle, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)
          20%, rgba(0, 0, 0, 0) 21%),
    -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
  background: -o-radial-gradient(
      center,
      circle,
      rgba(255, 255, 255, 0.35),
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0) 21%
    ),
    -webkit-radial-gradient(center, circle, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)
          20%, rgba(0, 0, 0, 0) 21%),
    -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
  background: radial-gradient(
      center,
      circle,
      rgba(255, 255, 255, 0.35),
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0) 21%
    ),
    -webkit-radial-gradient(center, circle, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)
          20%, rgba(0, 0, 0, 0) 21%),
    -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
  background-size: 10px 10px, 10px 10px, 100% 100%;
  background-position: 1px 1px, 0px 0px, center center;
}
.card::before,
.card::after {
  position: absolute;
  content: "";
  bottom: 10px;
  width: 40%;
  height: 10px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
  z-index: -1;
  transition: all 0.3s ease;
}

.card::before {
  left: 15px;
  transform: skew(-5deg) rotate(-5deg);
}

.card::after {
  right: 15px;
  transform: skew(5deg) rotate(5deg);
}

.card:hover::before,
.card:hover::after {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.image {
  position: absolute;
  height: 100px;
  object-fit: cover;
  top: -20%;
  left: 50%;

  transform: translateX(-200%) rotate(45deg);
  transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
  transition-duration: 1s;
}
.heading {
  font-size: 30px;
  text-align: center;
  font-weight: 900;

  background: linear-gradient(
    144deg,
    var(--color1),
    var(--color2),
    var(--color3)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icons {
  display: flex;
  gap: 30px;
}
.icons a {
  padding: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: double 2px transparent;
  background-image: linear-gradient(white, white),
    linear-gradient(144deg, var(--color1), var(--color2), var(--color3));
  background-clip: padding-box, border-box;
  background-origin: border-box;
  transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
  transition-duration: 0.3s;
}
.icons a:hover {
  border-radius: 40px;
}
.instagram {
  color: var(--color1);
}
.x {
  color: var(--color2);
}
.discord {
  color: var(--color3);
}

.card:hover::before,
.card:hover::after {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.card:hover .image {
  animation: animate 2s linear infinite alternate;
}

@keyframes animate {
  0% {
    transform: translateX(-200%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(-45deg);
  }
}

</style>
    

================================================
FILE: Cards/Yaya12085_curvy-otter-58.html
================================================

<div class="card">
    <div class="card-1">
    </div>
    <div class="right">
            <div class="card-2">
            </div>
            <div class="card-3">
            </div>
            <div class="card-3">
            </div>
            <div class="card-3">
            </div>
            <div class="card-3">
        </div>
        <div class="bottom">
            <div class="card-4">
            </div>
            <div class="card-4">
            </div>
            <div class="card-4">
            </div>
        </div>
    </div>
</div>

<style>
/* From Uiverse.io by Yaya12085 - Tags: animation, loading, card, placeholder */
.card {
  --gray: rgba(229, 231, 235, 1);
  width: 350px;
  height: 13rem;
  display: flex;
  grid-gap: 1.25rem;
  gap: 1.25rem;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 1);
  padding: 1.5rem;
}

.card-1 {
  width: 40%;
  border-radius: 0.75rem;
  background-color: var(--gray);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) alternate-reverse infinite;
}

.right {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  grid-gap: 1.25rem;
  gap: 1.25rem;
}

.card-2 {
  height: 3.5rem;
  width: 100%;
  border-radius: 1rem;
  background-color: var(--gray);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) alternate-reverse infinite;
}

.card-3 {
  height: 0.75rem;
  width: 100%;
  border-radius: 1rem;
  background-color: var(--gray);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) alternate-reverse infinite;
}

.bottom {
  margin-top: auto;
  display: flex;
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.card-4 {
  height: 2rem;
  width: 33%;
  border-radius: 9999px;
  background-color: var(--gray);
  animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) alternate-reverse infinite;
}

@keyframes pulse {
  to {
    opacity: .2;
  }
}
</style>


================================================
FILE: Cards/Yaya12085_empty-horse-27.html
================================================
<div class="card">
      <div class="content">
        <div class="title">Personal edition</div>
        <div class="price">$39.99</div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at posuere eros. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>
      </div>
        <button>
          Buy now
        </button>
  </div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card, sub, plan */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 260px;
  padding: 20px 1px;
  margin: 10px 0;
  text-align: center;
  position: relative;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(33,150,243,.4),0 4px 6px -4px rgba(33,150,243,.4);
  border-radius: 10px;
  background-color: #6B6ECC;
  background: linear-gradient(45deg, #04051dea 0%, #2b566e 100%);
}

.content {
  padding: 20px;
}

.content .price {
  color: white;
  font-weight: 800;
  font-size: 50px;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.42);
}

.content .description {
  color: rgba(255, 255, 255, 0.6);
  margin-top: 10px;
  font-size: 14px;
}

.content .title {
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.64);
  margin-top: 10px;
  font-size: 25px;
  letter-spacing: 1px;
}

button {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: none;
  outline: none;
  color: rgb(255 255 255);
  text-transform: uppercase;
  font-weight: 700;
  font-size: .75rem;
  padding: 0.75rem 1.5rem;
  background-color: rgb(33 150 243);
  border-radius: 0.5rem;
  width: 90%;
  text-shadow: 0px 4px 18px #2c3442;
}


</style>


================================================
FILE: Cards/Yaya12085_giant-elephant-67.html
================================================
<div class="card">
  <div class="header">
    <div class="btn"></div>
    <div class="btn"></div>
    <div class="btn"></div>
    <div class="active">JS console...</div>
  </div>
  <div class="content">
  <div class="req">
     console.log(a<span>*</span>b);
  </div>
  <div class="res error">
    <span>ReferenceError</span>{" <span>a is not defined </span>"}
  </div>
   <div class="req">
     console.log(2<span>*</span>3);
  </div>
  <div class="res">
   6
  </div>
 
  </div>

</div>


<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 290px;
  height: 254px;
  background: #2b2b2b;
  margin: 0 2px;
}

.card .header {
  height: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: rgb(17, 17, 17);
  padding-left: 4px;
}

.card .header .btn {
  margin-left: 8px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  cursor: pointer;
}

.active {
  cursor: pointer;
  position: relative;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fefe;
  background-color: #2b2b2b;
  height: 100%;
  margin-left: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 12px;
}

.card .header div:nth-child(1) {
  background-color: rgb(255, 102, 0);
}

.card .header div:nth-child(2) {
  background-color: rgb(247, 202, 1);
}

.card .header div:nth-child(3) {
  background-color: rgb(10, 184, 10);
}

.card .content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
  line-height: 125%;
  color: #fff;
}

.card .content .req, .card .content .res {
  padding: .2em 1.6em;
  border-bottom: 1px solid rgba(102, 101, 101, 0.685);
  font-size: 12px;
}

.card .content .req {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  color: #fff;
}

.card .content .req::before {
  position: absolute;
  content: "";
  border-left: 1px solid rgb(177, 176, 176);
  border-bottom: 1px solid rgb(177, 176, 176);
  padding: 4px;
  left: 2px;
  height: 0;
  width: 0;
  background-color: transparent;
  transform: rotate(220deg);
}

.card .content .res {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  color: #fff;
}

.card .content .res span:nth-child(1) {
  color: rgb(230, 103, 103);
  font-style: italic;
  margin-right: 8px;
}

.card .content .res span:nth-child(2) {
  color: rgb(77, 245, 43);
}

.card .content .res.error {
  background-color: rgba(255, 0, 0, 0.05);
}

.card .content .res.error::before {
  position: absolute;
  content: "X";
  padding: 3px;
  left: 2px;
  height: 6px;
  width: 6px;
  background-color: rgba(255, 0, 0, 0.644);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
}
</style>


================================================
FILE: Cards/Yaya12085_grumpy-fox-39.html
================================================
<div class="card">
  <div class="header">
    <div class="image"><svg aria-hidden="true" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none">
                <path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" stroke-linejoin="round" stroke-linecap="round"></path>
              </svg></div>
    <div class="content">
       <span class="title">Desactivate account</span>
       <p class="message">Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.</p>
    </div>
     <div class="actions">
       <button class="desactivate" type="button">Desactivate</button>
       <button class="cancel" type="button">Cancel</button>
    </div>
  </div>
  </div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  overflow: hidden;
  position: relative;
  background-color: #ffffff;
  text-align: left;
  border-radius: 0.5rem;
  max-width: 290px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.header {
  padding: 1.25rem 1rem 1rem 1rem;
  background-color: #ffffff;
}

.image {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  background-color: #FEE2E2;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
}

.image svg {
  color: #DC2626;
  width: 1.5rem;
  height: 1.5rem;
}

.content {
  margin-top: 0.75rem;
  text-align: center;
}

.title {
  color: #111827;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.message {
  margin-top: 0.5rem;
  color: #6B7280;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.actions {
  margin: 0.75rem 1rem;
  background-color: #F9FAFB;
}

.desactivate {
  display: inline-flex;
  padding: 0.5rem 1rem;
  background-color: #DC2626;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  justify-content: center;
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: transparent;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.cancel {
  display: inline-flex;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  color: #374151;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  justify-content: center;
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid #D1D5DB;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
</style>


================================================
FILE: Cards/Yaya12085_hard-mole-83.html
================================================
<div class="card">
<div class="header"></div>
<div class="info">
  <p class="title">How to make this material card ?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi. </p>
</div>
<div class="footer">
  <p class="tag">#HTML #CSS </p>
  <button type="button" class="action">Get started </button>
</div>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 0.75rem;
  background-color: white;
  width: 300px;
  height: 370px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),
  0 2px 4px -2px rgba(0,0,0,.1);
}

.header {
  position: relative;
  background-clip: border-box;
  margin-top: 1.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
  border-radius: 0.75rem;
  background-color: rgb(33 150 243);
  box-shadow: 0 10px 15px -3px rgba(33,150,243,.4),0 4px 6px -4px rgba(33,150,243,.4);
  height: 14rem;
}

.info {
  border: none;
  padding: 1.5rem;
  text-align: center;
}

.title {
  color: rgb(38 50 56);
  letter-spacing: 0;
  line-height: 1.375;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.footer {
  padding: 0.75rem;
  border: 1px solid rgb(236 239 241);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0, 140, 255, 0.082);
}

.tag {
  font-weight: 300;
  font-size: .75rem;
  display: block;
}

.action {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: none;
  outline: none;
  box-shadow: 0 4px 6px -1px rgba(33,150,243,.4),0 2px 4px -2px rgba(33,150,243,.4);
  color: rgb(255 255 255);
  text-transform: uppercase;
  font-weight: 700;
  font-size: .75rem;
  padding: 0.75rem 1.5rem;
  background-color: rgb(33 150 243);
  border-radius: 0.5rem;
}


</style>


================================================
FILE: Cards/Yaya12085_heavy-gecko-88.html
================================================
<div class="card">
  <span class="small-text">Download Now!</span>
  <span class="title">Download our mobile application.</span>
  <span class="desc">Download Lorem mobile banking app for IOS &amp; Android to manage your online money.</span>
<div class="buttons">
  <a href="#" class="button">
    <span class="icon"><svg width="34" height="34" viewBox="0 0 34 34" fill="" xmlns="http://www.w3.org/2000/svg">
<path d="M4 28.9958V4.9125C4 4.07667 4.48167 3.34 5.19 3L19.1442 16.9542L5.19 30.9083C4.48167 30.5542 4 29.8317 4 28.9958ZM23.5642 21.3742L8.32083 30.1858L20.3483 18.1583L23.5642 21.3742ZM28.31 15.2683C28.7917 15.6508 29.1458 16.2458 29.1458 16.9542C29.1458 17.6625 28.8342 18.2292 28.3383 18.6258L25.0942 20.4958L21.5525 16.9542L25.0942 13.4125L28.31 15.2683ZM8.32083 3.7225L23.5642 12.5342L20.3483 15.75L8.32083 3.7225Z" fill="white"></path>
</svg></span>
    <div class="button-text google">
      <span>Get it on</span>
      <span>Google Play</span>
    </div>
  </a>
  <a href="#" class="button">
    <span class="icon"><svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.5058 27.625C25.33 29.3817 24.0833 31.0958 22.185 31.1242C20.2866 31.1667 19.6775 30.005 17.5241 30.005C15.3566 30.005 14.6908 31.0958 12.8916 31.1667C11.0358 31.2375 9.6333 29.2967 8.4433 27.5825C6.0208 24.0833 4.16497 17.6375 6.6583 13.3025C7.8908 11.1492 10.1008 9.78916 12.495 9.74666C14.3083 9.71833 16.0366 10.9792 17.1558 10.9792C18.2608 10.9792 20.3575 9.46333 22.5533 9.68999C23.4741 9.73249 26.0525 10.0583 27.71 12.495C27.5825 12.58 24.6358 14.3083 24.6641 17.8925C24.7066 22.1708 28.4183 23.6017 28.4608 23.6158C28.4183 23.715 27.8658 25.6558 26.5058 27.625ZM18.4166 4.95833C19.4508 3.78249 21.165 2.88999 22.5816 2.83333C22.7658 4.49083 22.1 6.16249 21.1083 7.35249C20.1308 8.55666 18.5158 9.49166 16.9291 9.36416C16.7166 7.73499 17.51 6.03499 18.4166 4.95833Z" fill=""></path>
</svg></span>
    <div class="button-text apple">
      <span>Download from</span>
      <span>App Store</span>
    </div>
  </a>
</div>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  max-width: 350px;
  background-color: rgb(7 16 45);
  background: linear-gradient(to top right, rgb(7 16 45), rgb(58 60 84));
  background: -webkit-linear-gradient(to top right, rgb(7 16 45), rgb(58 60 84));
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgb(84 90 106);
}

.small-text, .title,.desc {
  font-weight: 600;
}

.title,.desc {
  margin: 8px 0;
}

.small-text {
  color: #488aec;
  font-size: 14px;
}

.title {
  color: #fff;
  font-size: 26px;
  line-height: 26px;
}

.desc {
  color: rgb(151 153 167);
  font-size: 13px;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  padding: 6px;
  text-decoration: none;
}

.button:first-child {
  box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;
  background-color: #488aec;
}

.button:last-child {
  box-shadow: 0 4px 6px -1px #0b162531, 0 2px 4px -1px #0e192b17;
  background-color: #fff;
}

.icon {
  height: 25px;
  width: 25px;
}

.icon svg {
  width: 100%;
  height: 100%;
}

.icon svg:last-child {
  fill: #000
}

.button-text {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}

.button-text span:first-child {
  font-size: 12px;
  font-weight: 600;
}

.google span:first-child {
  color: rgb(219 206 253);
}

.apple span:first-child {
  color: rgb(81 87 108);
}

.google span:last-child {
  color: #fff;
  font-weight: 800;
}

.apple span:last-child {
  color: #000;
  font-weight: 800;
}
</style>


================================================
FILE: Cards/Yaya12085_hot-swan-8.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: green, card, animated, colorful */
.one-div {
  position: relative;
  width: 200px;
  height: 200px;
  background: repeating-radial-gradient(circle at 50%, rgba(10, 222, 61,.4), rgba(10, 222, 61,.4) 2px, #000  2px, #000 12px);
  border-radius: 50%;
  border: 1px dotted rgba(10, 222, 61,.4);
  overflow: hidden;
}

.one-div::before {
  position: absolute;
  content: "";
  top: calc(100% - 25%);
  left: 50%;
  transform-origin: 5px 0;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 50%;
  border-radius: 10px;
  filter: blur(3px);
  background-image: linear-gradient(to left, rgba(10, 222, 61, .3) 50% , rgb(10, 222, 61) 50%);
  opacity: .7;
  animation: radar-animation 2.5s infinite linear;
}

.one-div::after {
  content: "";
  position: absolute;
  bottom: 24%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(10, 222, 61,1);
  animation: dot-animation 2.5s infinite ease-in-out;
}

@keyframes radar-animation {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes dot-animation {
  50% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

</style>


================================================
FILE: Cards/Yaya12085_hungry-jellyfish-92.html
================================================
<div class="pack_card">
          <div class="banner">
            <span class="banner_tag">most popular</span>
          </div>
          <div class="pack_name">Team</div>

          <p class="description">Avanced feaures for Individuals and organizations</p>

          <div class="lists">
            <div class="list">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
              <span>Unlimited file storage</span>
            </div>
            <div class="list">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
              <span>10 GB bandwidth per month</span>
            </div>
            <div class="list">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>

              <span>10.000 tasks per month</span>
            </div>
            <div class="list">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>

              <span>Email support</span>
            </div>
            <div class="list">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>

              <span>100 Webhooks</span>
            </div>
            
        </div>
        <div class="bottom">
          <div class="price_container">
            <span class="devise">$</span>
            <span class="price">19</span>
            <span class="date">/month</span>
          </div>
          <a class="btn" href="#">Continue with Team</a>
        </div>
      </div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.pack_card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  border: 2px solid rgb(99 102 241);
  padding: 1.5rem 1rem 1rem 1rem;
  margin-top: 1rem;
  background-color: #fff;
  max-width: 300px;
}

.banner {
  position: absolute;
  left: 0px;
  right: 0px;
  top: -2rem;
  display: flex;
  justify-content: center;
}

.banner_tag {
  display: flex;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgb(99 102 241);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
}

.pack_name {
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: rgb(31 41 55 );
}

.description {
  margin: 0 auto 2rem auto;
  text-align: center;
  color: rgb(107 114 128 );
}

.lists > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.5rem;
}

.list {
  display: flex;
  gap: 0.5rem;
}

.list svg {
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  color: rgb(99 102 241 );
}

.list span {
  color: rgb( 75 85 99 );
}

.bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.price_container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.25rem;
}

.devise {
  align-self: flex-start;
  color: rgb( 75 85 99 );
}

.price {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  color: rgb(31 41 55 );
}

.date {
  color: rgb(107 114 128 );
}

.btn {
  display: block;
  border-radius: 0.5rem;
  background-color: rgb(99 102 241 );
  padding: 0.75rem 2rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #fff;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: all .1s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
  background-color: rgb(79 70 229 );
}

.btn:active {
  background-color: rgb(67 56 202 );
}
</style>


================================================
FILE: Cards/Yaya12085_jolly-bulldog-80.html
================================================
<div class="card">
  <div class="image"></div>
  <div class="content">
    <p class="text-1">
      Run with the pack
    </p>

    <div class="text-2">
      <span>
        Get 35% off
      </span>
      <span>On your next order over $100</span>
    </div>

    <a class="action" href="">
      Get Discount
    </a>

    <p class="date">
      Offer valid until 29th April, 2023 *
    </p>
  </div>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card, dark, product, colorful */
.card {
  overflow: hidden;
  border-radius: 0.5rem;
  max-width: 300px;
  background-color: #fff;
  color: #212121;
}

.image {
  height: 8rem;
  width: 100%;
  object-fit: cover;
  background-color: rgb(204, 0, 255);
  background-image: linear-gradient(to right, rgb(255, 174, 0), rgb(204, 0, 255));
}

.content {
  padding: 1rem;
  text-align: center;
}

.text-1 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.text-2 {
  margin-top: 1rem;
  font-weight: 900;
  text-transform: uppercase;
}

.text-2 span:first-child {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 900;
}

.text-2 span:last-child {
  margin-top: 0.5rem;
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.action {
  margin-top: 1rem;
  display: inline-block;
  width: 100%;
  background-color: rgb(0, 0, 0);
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

.date {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(156, 163, 175, 1);
}
</style>


================================================
FILE: Cards/Yaya12085_light-cheetah-20.html
================================================
<!-- From Uiverse.io by Yaya12085 - Source: https://www.material-tailwind.com/docs/html/card#card - Tags: card, box-shadow, tailwind -->
<div class="relative flex w-80 flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md">
  <div class="relative mx-4 -mt-6 h-40 overflow-hidden rounded-xl bg-blue-gray-500 bg-clip-border text-white shadow-lg shadow-blue-gray-500/40 bg-gradient-to-r from-blue-500 to-blue-600">
  </div>
  <div class="p-6">
    <h5 class="mb-2 block font-sans text-xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
     Tailwind card
    </h5>
    <p class="block font-sans text-base font-light leading-relaxed text-inherit antialiased">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis ligula. 
    </p>
  </div>
  <div class="p-6 pt-0">
    <button data-ripple-light="true" type="button" class="select-none rounded-lg bg-blue-500 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-blue-500/20 transition-all hover:shadow-lg hover:shadow-blue-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
      Read More
    </button>
  </div>
</div>



================================================
FILE: Cards/Yaya12085_light-liger-50.html
================================================

<div class="card">
    <div class="infos">
        <div class="image"></div>
        <div class="info">
            <div>
                <p class="name">
                    John Doe
                </p>
                <p class="function">
                    Front-end dev 
                </p>
            </div>
            <div class="stats">
                    <p class="flex flex-col">
                        Articles
                        <span class="state-value">
                            34
                        </span>
                    </p>
                    <p class="flex">
                        Followers
                        <span class="state-value">
                            455
                        </span>
                    </p>
                    
            </div>
        </div>
    </div>
    <button class="request" type="button">
            Add friend
        </button>
</div>

<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  max-width: 320px;
  border-radius: 1rem;
  background-color: rgba(31, 41, 55, 1);
  padding: 1rem;
}

.infos {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  grid-gap: 1rem;
  gap: 1rem;
}

.image {
  height: 7rem;
  width: 7rem;
  border-radius: 0.5rem;
  background-color: rgb(118, 36, 194);
  background: linear-gradient(to bottom right, rgb(118, 36, 194), rgb(185, 128, 240));
}

.info {
  height: 7rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.name {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

.function {
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgba(156, 163, 175, 1);
}

.stats {
  width: 100%;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 1);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgba(0, 0, 0, 1);
}

.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 4px;
}

.state-value {
  font-weight: 700;
  color: rgb(118, 36, 194);
}

.request {
  margin-top: 1.5rem;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  transition: all .3s ease;
}

.request:hover {
  background-color: rgb(118, 36, 194);
  color: #fff;
}

</style>


================================================
FILE: Cards/Yaya12085_little-puma-29.html
================================================
<div class="card">
 <div class="image"></div>
  <div class="content">
    <a href="#">
      <span class="title">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </span>
    </a>

    <p class="desc">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae
      dolores, possimus pariatur animi temporibus nesciunt praesentium 
    </p>

    <a class="action" href="#">
      Find out more
      <span aria-hidden="true">
        →
      </span>
    </a>
  </div>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  max-width: 300px;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid transparent;
}

.card a {
  text-decoration: none
}

.content {
  padding: 1.1rem;
}

.image {
  object-fit: cover;
  width: 100%;
  height: 150px;
  background-color: rgb(239, 205, 255);
}

.title {
  color: #111827;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.desc {
  margin-top: 0.5rem;
  color: #6B7280;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.action {
  display: inline-flex;
  margin-top: 1rem;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  align-items: center;
  gap: 0.25rem;
  background-color: #2563EB;
  padding: 4px 8px;
  border-radius: 4px;
}

.action span {
  transition: .3s ease;
}

.action:hover span {
  transform: translateX(4px);
}

</style>


================================================
FILE: Cards/Yaya12085_lovely-cobra-94.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  user-select: none;
  position: relative;
  width: 300px;
  background: #ffffff;
  background-image: linear-gradient(#ffffff 1.1rem, #ccc 1.2rem);
  background-size: 100% 1.2rem;
  color: #000;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 0.5rem 0.3rem 4rem;
  border-radius: 10px;
  font-family: cursive;
}

.card::before,
.card::after {
  position: absolute;
  content: "";
  bottom: 10px;
  width: 40%;
  height: 10px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
  z-index: -1;
  transition: all 0.3s ease;
}

.card::before {
  left: 15px;
  transform: skew(-5deg) rotate(-5deg);
}

.card::after {
  right: 15px;
  transform: skew(5deg) rotate(5deg);
}

.card:hover::before,
.card:hover::after {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.heading {
  color: red;
  font-size: 21px;
  line-height: 21px;
  text-align: center;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.content::before {
  position: absolute;
  content: "";
  border-left: 1px solid #d88;
  height: 100%;
  top: 0;
  left: 3.3rem;
}

.content .item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px;
  padding-left: 20px;
  color: #04176d;
  font-size: 15px;
}

.content .item::before {
  position: absolute;
  content: "";
  left: 0;
  width: 6px;
  height: 6px;
  background-color: #04176d;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.content .item:nth-child(2)::before {
  border-radius: 55% 45% 73% 27% / 80% 30% 70% 20%;
}

.content .item:nth-child(3)::before {
  border-radius: 28% 72% 18% 82% / 70% 30% 70% 30%;
}

.content .item::after {
  position: absolute;
  content: "";
  left: 0;
  width: 0;
  height: 1px;
  background-color: #04176d;
  transition: width .3s ease-in-out;
}

.content .item:hover::after {
  width: 100%;
}

.content .item svg {
  margin-right: 10px;
  width: 20px;
}

.card button {
  all: unset;
  position: relative;
  align-self: flex-end;
  padding-bottom: 8px;
  color: #04176d;
}

.card button::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  height: 7px;
  width: 100% !important;
  border: solid 4px #04176d;
  border-color: #04176d transparent transparent transparent;
  border-radius: 50%;
}
</style>


================================================
FILE: Cards/Yaya12085_massive-firefox-9.html
================================================
<div class="post-card">
  <div class="avatar"></div>
  <a href="#" class="title">7 Tools for Faster Development in React</a>
  <span class="datetime">3 min to read</span>
  <div class="image-preview"></div>
  <div class="comment-like">
    <span><svg fill="" xml:space="preserve" viewBox="0 0 32 32" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Uploaded to svgrepo.com" version="1.1"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path d="M21.081,6C23.752,6.031,26,8.766,26,12c0,5.106-6.47,10.969-10.001,13.593 C12.466,22.974,6,17.12,6,12c0-3.234,2.248-5.969,4.918-6C13.586,6.175,13.926,6.801,16,8.879C18.069,6.806,18.418,6.173,21.081,6 M20.911,4.006L20.912,4C18.993,4,17.259,4.785,16,6.048C14.741,4.785,13.007,4,11.088,4l0.001,0.006C7.044,3.936,4,7.719,4,12 c0,8,11.938,16,11.938,16h0.124C16.062,28,28,20,28,12C28,7.713,24.951,3.936,20.911,4.006z" class="bentblocks_een"></path> </g></svg>10</span>
    <span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path fill="" d="M4.49999 20.25C4.37892 20.2521 4.25915 20.2248 4.1509 20.1705C4.04266 20.1163 3.94916 20.0366 3.87841 19.9383C3.80766 19.8401 3.76175 19.7261 3.74461 19.6063C3.72747 19.4864 3.73961 19.3641 3.77999 19.25L5.37999 14C5.03175 13.0973 4.85539 12.1375 4.85999 11.17C4.8584 10.1057 5.06918 9.0518 5.47999 8.06999C5.88297 7.13047 6.45975 6.27549 7.17999 5.54999C7.90382 4.82306 8.76344 4.24545 9.70999 3.84999C10.6889 3.4344 11.7415 3.22021 12.805 3.22021C13.8685 3.22021 14.9211 3.4344 15.9 3.84999C17.3341 4.46429 18.5573 5.48452 19.4191 6.7851C20.2808 8.08568 20.7434 9.60985 20.75 11.17C20.7437 13.2771 19.9065 15.2966 18.42 16.79C17.6945 17.5102 16.8395 18.087 15.9 18.49C14.0091 19.2819 11.8865 19.3177 9.96999 18.59L4.71999 20.19C4.64977 20.22 4.57574 20.2402 4.49999 20.25ZM12.8 4.74999C11.5334 4.75547 10.2962 5.13143 9.24068 5.83153C8.18519 6.53164 7.35763 7.52528 6.85999 8.68999C6.19883 10.2911 6.19883 12.0889 6.85999 13.69C6.91957 13.8548 6.91957 14.0352 6.85999 14.2L5.62999 18.37L9.77999 17.11C9.94477 17.0504 10.1252 17.0504 10.29 17.11C11.0824 17.439 11.932 17.6083 12.79 17.6083C13.648 17.6083 14.4976 17.439 15.29 17.11C16.0708 16.7813 16.779 16.3018 17.3742 15.6989C17.9693 15.096 18.4397 14.3816 18.7583 13.5967C19.077 12.8118 19.2376 11.9717 19.231 11.1245C19.2244 10.2774 19.0508 9.4399 18.72 8.65999C18.2234 7.50094 17.398 6.51285 16.3459 5.81792C15.2937 5.123 14.0609 4.75171 12.8 4.74999Z"></path> </g></svg>4</span>
  </div>


</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.post-card {
  width: 320px;
  background: lightgrey;
  background-color: rgb(24 27 32);
  border: 1px solid rgb(84 90 106);
  border-radius: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
}

.avatar {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background-color: blueviolet;
  background-image: linear-gradient(to top left, blueviolet,rgb(73, 31, 112));
}

.title {
  font-size: 20px;
  line-height: 22px;
  font-weight: 600;
  margin-top: 10px;
  color: #fff;
  text-decoration: none;
  transition: all .35s ease-in;
}

.title:hover {
  text-decoration: underline blueviolet;
}

.datetime {
  font-size: 12px;
  color: rgb(168 179 207);
  margin: 10px 0;
}

.image-preview {
  flex: 1;
  min-height: 150px;
  width: 100%;
  border-radius: 20px;
  background-color: blueviolet;
  background-image: linear-gradient(to top left, blueviolet,rgb(73, 31, 112));
  margin-bottom: 4px;
}

.comment-like {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2px 0;
}

.comment-like span {
  cursor: pointer;
  height: 40px;
  width: 50px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  border-radius: 10px;
  background-color: transparent;
  transition: all .15s ease;
}

.comment-like span:hover {
  background-color: rgba(137, 43, 226, 0.096);
}

.comment-like span svg {
  fill: rgb(255, 255, 255);
  margin-right: 2px;
}
</style>


================================================
FILE: Cards/Yaya12085_mean-vampirebat-50.html
================================================
<div class="card">
<div class="header">
						<span class="title">Beginner</span>
						<span class="price">Free</span>
					</div>
					<p class="desc">Etiam ac convallis enim, eget euismod dolor.</p>
					<ul class="lists">
						<li class="list">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
								<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
							</svg>
							<span>Aenean quis</span>
						</li>
						<li class="list">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
								<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
							</svg>
							<span>Morbi semper</span>
						</li>
						<li class="list">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
								<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
							</svg>
							<span>Tristique enim nec</span>
						</li>
					</ul>
					<button type="button" class="action">Get Started</button>
				</div>
<style>
/* From Uiverse.io by Yaya12085 - Source: https://mambaui.com/components/pricing - Tags: pricing, card, dark, price */
.card {
  margin-left: -1rem;
  margin-right: -1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 2rem;
  width: 320px;
  display: flex;
  flex-direction: column;
  border-radius: 0.25rem;
  background-color: rgba(17, 24, 39, 1);
  padding: 1.5rem;
}

.header {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: #fff
}

.price {
  font-size: 3.75rem;
  line-height: 1;
  font-weight: 700;
  color: #fff
}

.desc {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.625;
  color: rgba(156, 163, 175, 1);
}

.lists {
  margin-bottom: 1.5rem;
  flex: 1 1 0%;
  color: rgba(156, 163, 175, 1);
}

.lists .list {
  margin-bottom: 0.5rem;
  display: flex;
  margin-left: 0.5rem
}

.lists .list svg {
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  margin-right: 0.5rem;
  color: rgba(167, 139, 250, 1);
}

.action {
  border: none;
  outline: none;
  display: inline-block;
  border-radius: 0.25rem;
  background-color: rgba(167, 139, 250, 1);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(17, 24, 39, 1);
}
</style>


================================================
FILE: Cards/Yaya12085_nasty-firefox-13.html
================================================
<div class="card"> 
  <button class="dismiss" type="button">×</button> 
  <div class="header"> 
    <div class="image">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M20 7L9.00004 18L3.99994 13" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
      </div> 
      <div class="content">
         <span class="title">Order validated</span> 
         <p class="message">Thank you for your purchase. you package will be delivered within 2 days of your purchase</p> 
         </div> 
         <div class="actions">
            <button class="history" type="button">History</button> 
            <button class="track" type="button">Track my package</button> 
            </div> 
            </div> 
            </div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  overflow: hidden;
  position: relative;
  text-align: left;
  border-radius: 0.5rem;
  max-width: 290px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  background-color: #fff;
}

.dismiss {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background-color: #fff;
  color: black;
  border: 2px solid #D1D5DB;
  font-size: 1rem;
  font-weight: 300;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  transition: .3s ease;
}

.dismiss:hover {
  background-color: #ee0d0d;
  border: 2px solid #ee0d0d;
  color: #fff;
}

.header {
  padding: 1.25rem 1rem 1rem 1rem;
}

.image {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  background-color: #e2feee;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  animation: animate .6s linear alternate-reverse infinite;
  transition: .6s ease;
}

.image svg {
  color: #0afa2a;
  width: 2rem;
  height: 2rem;
}

.content {
  margin-top: 0.75rem;
  text-align: center;
}

.title {
  color: #066e29;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.message {
  margin-top: 0.5rem;
  color: #595b5f;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.actions {
  margin: 0.75rem 1rem;
}

.history {
  display: inline-flex;
  padding: 0.5rem 1rem;
  background-color: #1aa06d;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  justify-content: center;
  width: 100%;
  border-radius: 0.375rem;
  border: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.track {
  display: inline-flex;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  color: #242525;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  justify-content: center;
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid #D1D5DB;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

@keyframes animate {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.09);
  }
}
</style>


================================================
FILE: Cards/Yaya12085_pink-mouse-40.html
================================================
<div class="card">
		<div class="header">
			<div class="image">
				<span class="tag">Art</span>
			</div>
			<div class="date">
				<span>6 min ago</span>
			</div>
		</div>
		<div class="info">
			<a rel="noopener noreferrer" href="#" class="block">
				<span class="title">Facere ipsa nulla corrupti praesentium </span>
			</a>
			<p class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat, excepturi. Lorem ipsum dolor sit ...</p>
		</div>
	</div>

<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  padding: 10px;
  max-width: 260px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  background-color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.content {
  margin-top: 1rem;
}

.content .header {
  margin-top: 0.5rem;
}

.image {
  width: 100%;
  height: 150px;
  border-radius: 4px;
  background-color: rgb(205, 235, 255);
  padding: 9px;
}

.tag {
  text-transform: capitalize;
  background-color: rgba(0, 0, 0, 0.425);
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
}

.date {
  display: flex;
  font-size: 0.75rem;
  line-height: 1rem;
  align-items: center;
  margin: 2px;
}

.title {
  display: block;
  font-size: 1.25rem;
  line-height: 1.35rem;
  font-weight: 600;
  padding-bottom: 5px;
  padding-top: 14px;
}

.description {
  line-height: 1.375;
}
</style>


================================================
FILE: Cards/Yaya12085_quiet-bear-76.html
================================================
<div class="card">
  <div class="date-time-container">
    <time class="date-time" datetime="2022-10-10">
      <span>2022</span>
      <span class="separator"></span>
      <span>Oct 10</span>
    </time>
  </div>
  <div class="content">
  
    <div class="infos">
      <a href="#">
        <span class="title">
         How to make this blog card ?
        </span>
      </a>

      <p class="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae
        dolores, possimus pariatur animi temporibus nesciunt praesentium dolore
        sed nulla ipsum eveniet corporis quidem, mollitia itaque minus soluta,
        voluptates neque explicabo tempora nisi culpa eius atque dignissimos.
        Molestias explicabo corporis voluptatem?
      </p>
    </div>

      <a class="action" href="#">
        Read Blog
      </a>
  </div>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  box-sizing: border-box;
  display: flex;
  max-width: 320px;
  background-color: rgba(255, 255, 255, 1);
  transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.081);
}

.date-time-container {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  padding: 0.5rem;
}

.date-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 1rem;
  gap: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 1);
}

.separator {
  width: 1px;
  flex: 1 1 0%;
  background-color: rgba(17, 24, 39, 0.1);
}

.content {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
}

.infos {
  border-left: 1px solid rgba(17, 24, 39, 0.1);
  padding: 1rem;
}

.title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18.72px;
  color: rgba(17, 24, 39, 1);
}

.description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(55, 65, 81, 1);
}

.action {
  display: block;
  background-color: rgba(253, 224, 71, 1);
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 1);
  transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.action:hover {
  background-color: rgba(250, 204, 21, 1);
}
</style>


================================================
FILE: Cards/Yaya12085_rotten-dolphin-86.html
================================================
<div class="card">
  <p class="price">
    $29
  </p>
  <a href="#" class="action">
    Get started
  </a>
  <ul class="lists">
    <li class="list">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" d="M21.5821 5.54289C21.9726 5.93342 21.9726 6.56658 21.5821 6.95711L10.2526 18.2867C9.86452 18.6747 9.23627 18.6775 8.84475 18.293L2.29929 11.8644C1.90527 11.4774 1.89956 10.8443 2.28655 10.4503C2.67354 10.0562 3.30668 10.0505 3.70071 10.4375L9.53911 16.1717L20.1679 5.54289C20.5584 5.15237 21.1916 5.15237 21.5821 5.54289Z" clip-rule="evenodd" fill-rule="evenodd"></path> </g></svg>
        <span> Connect 80 websites </span>
    </li>
    <li class="list">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" d="M21.5821 5.54289C21.9726 5.93342 21.9726 6.56658 21.5821 6.95711L10.2526 18.2867C9.86452 18.6747 9.23627 18.6775 8.84475 18.293L2.29929 11.8644C1.90527 11.4774 1.89956 10.8443 2.28655 10.4503C2.67354 10.0562 3.30668 10.0505 3.70071 10.4375L9.53911 16.1717L20.1679 5.54289C20.5584 5.15237 21.1916 5.15237 21.5821 5.54289Z" clip-rule="evenodd" fill-rule="evenodd"></path> </g></svg>
      <span> Connect up to 5 bank accounts </span>
    </li>
    <li class="list">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" d="M21.5821 5.54289C21.9726 5.93342 21.9726 6.56658 21.5821 6.95711L10.2526 18.2867C9.86452 18.6747 9.23627 18.6775 8.84475 18.293L2.29929 11.8644C1.90527 11.4774 1.89956 10.8443 2.28655 10.4503C2.67354 10.0562 3.30668 10.0505 3.70071 10.4375L9.53911 16.1717L20.1679 5.54289C20.5584 5.15237 21.1916 5.15237 21.5821 5.54289Z" clip-rule="evenodd" fill-rule="evenodd"></path> </g></svg>
      <span> Track up to 50 credit cards </span>
    </li>
    <li class="list">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" d="M21.5821 5.54289C21.9726 5.93342 21.9726 6.56658 21.5821 6.95711L10.2526 18.2867C9.86452 18.6747 9.23627 18.6775 8.84475 18.293L2.29929 11.8644C1.90527 11.4774 1.89956 10.8443 2.28655 10.4503C2.67354 10.0562 3.30668 10.0505 3.70071 10.4375L9.53911 16.1717L20.1679 5.54289C20.5584 5.15237 21.1916 5.15237 21.5821 5.54289Z" clip-rule="evenodd" fill-rule="evenodd"></path> </g></svg>
      <span> Analytics support </span>
    </li>
    <li class="list">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" d="M21.5821 5.54289C21.9726 5.93342 21.9726 6.56658 21.5821 6.95711L10.2526 18.2867C9.86452 18.6747 9.23627 18.6775 8.84475 18.293L2.29929 11.8644C1.90527 11.4774 1.89956 10.8443 2.28655 10.4503C2.67354 10.0562 3.30668 10.0505 3.70071 10.4375L9.53911 16.1717L20.1679 5.54289C20.5584 5.15237 21.1916 5.15237 21.5821 5.54289Z" clip-rule="evenodd" fill-rule="evenodd"></path> </g></svg>
      <span> Export up to 12 months data </span>
    </li>
    <li class="list">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" d="M21.5821 5.54289C21.9726 5.93342 21.9726 6.56658 21.5821 6.95711L10.2526 18.2867C9.86452 18.6747 9.23627 18.6775 8.84475 18.293L2.29929 11.8644C1.90527 11.4774 1.89956 10.8443 2.28655 10.4503C2.67354 10.0562 3.30668 10.0505 3.70071 10.4375L9.53911 16.1717L20.1679 5.54289C20.5584 5.15237 21.1916 5.15237 21.5821 5.54289Z" clip-rule="evenodd" fill-rule="evenodd"></path> </g></svg>
      <span> Cloud service 24/7 </span>
    </li>
  </ul>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: list, button, card, price, pack */
.card {
  max-width: 320px;
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem;
  background-color: rgba(0, 0, 0, 1);
  padding: 1.5rem;
}

.price {
  font-size: 3rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: rgba(255, 255, 255, 1);
}

.lists {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  grid-row-gap: 0.75rem;
  row-gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 1);
}

.list {
  display: flex;
  align-items: center;
}

.list svg {
  height: 1rem;
  width: 1rem;
}

.list span {
  margin-left: 1rem;
}

.action {
  margin-top: 2rem;
  width: 100%;
  border: 2px solid  rgba(255, 255, 255, 1);
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 1);
  padding: 0.625rem 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(0, 0, 0, 1);
  outline: none;
  transition: all .2s ease;
}

.action:hover {
  color: rgba(255, 255, 255, 1);
  background-color: transparent;
}
</style>


================================================
FILE: Cards/Yaya12085_serious-eagle-83.html
================================================
<div class="pack-container">
  <div class="header">
    <p class="title">
      Starter
    </p>
    <div class="price-container">
      <span>$</span>24
      <span>/mo</span>
    </div>
  </div>
  <div>
    <ul class="lists">
      <li class="list">
        <span>
          <svg aria-hidden="true" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.5 12.75l6 6 9-13.5" stroke-linejoin="round" stroke-linecap="round"></path>
          </svg>
        </span>
        <p>
          2 team members
        </p>
      </li>
      <li class="list">
        <span>
          <svg aria-hidden="true" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.5 12.75l6 6 9-13.5" stroke-linejoin="round" stroke-linecap="round"></path>
          </svg>
        </span>
        <p>
          100+ components
        </p>
      </li>
      <li class="list">
        <span>
          <svg aria-hidden="true" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.5 12.75l6 6 9-13.5" stroke-linejoin="round" stroke-linecap="round"></path>
          </svg>
        </span>
        <p>
          2 month free updates
        </p>
      </li>
      <li class="list">
        <span>
          <svg aria-hidden="true" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.5 12.75l6 6 9-13.5" stroke-linejoin="round" stroke-linecap="round"></path>
          </svg>
        </span>
        <p>
          Life time technical support
        </p>
      </li>
    </ul>
  </div>
  <div class="button-container">
    <button type="button">
      Buy Now
    </button>
  </div>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: subscription, card, price, plan */
.pack-container {
  position: relative;
  display: flex;
  max-width: 350px;
  flex-direction: column;
  border-radius: 12px;
  background-color: #212121;
  border: 1px solid #fff;
  padding: 1.6rem;
  color: #fff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.header {
  position: relative;
  margin: 0;
  margin-bottom: 2rem;
  overflow: hidden;
  border-radius: 0;
  border-bottom: 1px solid #fff;
  background: transparent;
  padding-bottom: 1rem;
  text-align: center;
}

.title {
  display: block;
  font-family: sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  color: #fff
}

.price-container {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  font-family: sans-serif;
  font-size: 4.5rem;
  line-height: 1;
}

.price-container span:first-child {
  margin-top: 10px;
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.price-container span:last-child {
  align-self: flex-end;
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.lists {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.list {
  display: flex;
  align-items: center;
  gap: 10px;
}

.list span {
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background-color: rgba(255, 255, 255, 0.185);
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list span svg {
  height: 12px;
  width: 12px;
}

.list p {
  display: block;
  font-family: sans-serif;
}

.button-container {
  margin-top: 20px;
  padding: 0;
}

.button-container button {
  display: block;
  width: 100%;
  background-color: #fff;
  padding: 10px 20px;
  text-transform: uppercase;
  color: #000;
  outline: 0;
  border: 0;
  border-radius: 10px;
}
</style>


================================================
FILE: Cards/Yaya12085_serious-falcon-89.html
================================================
<div class="page">
  <div class="margin"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mauris risus, lobortis a neque aliquet, ornare rutrum purus. Integer hendrerit ac est non cursus. Integer quis risus tincidunt nunc mattis ultricies. Proin sed enim tellus.</p>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card, paper, realistic */
.page {
  position: relative;
  box-sizing: border-box;
  max-width: 300px;
  font-family: cursive;
  font-size: 20px;
  border-radius: 10px;
  background: #fff;
  background-image: linear-gradient(#f5f5f0 1.1rem, #ccc 1.2rem);
  background-size: 100% 1.2rem;
  line-height: 1.2rem;
  padding: 1.4rem 0.5rem 0.3rem 4.5rem;
}

.page::before,
.page::after {
  position: absolute;
  content: "";
  bottom: 10px;
  width: 40%;
  height: 10px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
  z-index: -1;
  transition: all 0.3s ease;
}

.page::before {
  left: 15px;
  transform: skew(-5deg) rotate(-5deg);
}

.page::after {
  right: 15px;
  transform: skew(5deg) rotate(5deg);
}

.page:hover::before,
.page:hover::after {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.margin {
  position: absolute;
  border-left: 1px solid #d88;
  height: 100%;
  left: 3.3rem;
  top: 0;
}

.page p {
  margin: 0;
  text-indent: 1rem;
  padding-bottom: 1.2rem;
  color: black;
  line-height: 20px;
}
</style>


================================================
FILE: Cards/Yaya12085_silent-donkey-69.html
================================================
  <div class="stats shadow">
  
  <div class="stat">
    <div class="stat-title">Total Page Views</div>
    <div class="stat-value">89,400</div>
    <div class="stat-desc">21% more than last month</div>
  </div>
  
</div>
<style>
/* From Uiverse.io by Yaya12085 - Source: https://daisyui.com/components/stat/ - Tags: stats, card, dark */
.stats {
  display: inline-grid;
  background-color: #111111;
  color: #fff;
  border-radius: 1rem;
  border: 1px solid gray;
}

.shadow {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.stat {
  display: inline-grid;
  width: 100%;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.stat-title {
  grid-column-start: 1;
  white-space: nowrap;
  color: rgb(197, 194, 194);
}

.stat-value {
  grid-column-start: 1;
  white-space: nowrap;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 800;
}

.stat-desc {
  grid-column-start: 1;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgb(197, 194, 194);
}
</style>


================================================
FILE: Cards/Yaya12085_silly-skunk-16.html
================================================
<div class="cookie-card">
    <span class="title">🍪 Cookie Notice</span>
    <p class="description">We use cookies to ensure that we give you the best experience on our website. <a href="#">Read cookies policies</a>. </p>
    <div class="actions">
        <button class="pref">
            Manage your preferences
        </button>
        <button class="accept">
            Accept
        </button>
    </div>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card, cookies */
.cookie-card {
  max-width: 320px;
  padding: 1rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
}

.title {
  font-weight: 600;
  color: rgb(31 41 55);
}

.description {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(75 85 99);
}

.description a {
  --tw-text-opacity: 1;
  color: rgb(59 130 246);
}

.description a:hover {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}

.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  flex-shrink: 0;
}

.pref {
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgb(31 41 55 );
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  background-color: transparent;
}

.pref:hover {
  color: rgb(156 163 175);
}

.pref:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.accept {
  font-size: 0.75rem;
  line-height: 1rem;
  background-color: rgb(17 24 39);
  font-weight: 500;
  border-radius: 0.5rem;
  color: #fff;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  border: none;
  transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.accept:hover {
  background-color: rgb(55 65 81);
}

.accept:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
</style>


================================================
FILE: Cards/Yaya12085_slimy-badger-58.html
================================================
<div class="card">
        <div class="header">
          <div class="image"></div>
          <div>
            <div class="stars">
              <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
              </svg>
              <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
              </svg>
              <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
              </svg>
              <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
              </svg>
              <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
              </svg>
            </div>
            <p class="name">John Doe</p>
          </div>
        </div>

        <p class="message">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
          voluptatem alias ut provident sapiente repellendus.
        </p>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card, star, shadow, rate, testimonials */
.card {
  background-color: rgba(243, 244, 246, 1);
  padding: 2rem;
  max-width: 320px;
  border-radius: 10px;
  box-shadow: 0 20px 30px -20px rgba(5, 5, 5, 0.24);
}

.header {
  display: flex;
  align-items: center;
  grid-gap: 1rem;
  gap: 1rem;
}

.header .image {
  height: 4rem;
  width: 4rem;
  border-radius: 9999px;
  object-fit: cover;
  background-color: royalblue;
}

.stars {
  display: flex;
  justify-content: center;
  grid-gap: 0.125rem;
  gap: 0.125rem;
  color: rgba(34, 197, 94, 1);
}

.stars svg {
  height: 1rem;
  width: 1rem;
}

.name {
  margin-top: 0.25rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, 1);
}

.message {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-top: 1rem;
  color: rgba(107, 114, 128, 1);
}
</style>


================================================
FILE: Cards/Yaya12085_soft-jellyfish-99.html
================================================
<!-- From Uiverse.io by Yaya12085  - Website: https://v0.dev/t/xiSjIAI - Name: Shu Ding - Tags: card, colorful, terminal -->
<aside class="bg-black text-white p-6 rounded-lg w-full max-w-md font-mono">
  <div class="flex justify-between items-center">
    <div class="flex space-x-2 text-red-500">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <p class="text-sm">bash</p>
  </div>
  <div class="mt-4">
    <p class="text-green-400">$ npm install uiverse</p>
    <p class="text-white">+ uiverse@1.0.0</p>
    <p class="text-white">added 1 package, and audited 2 packages in 3s</p>
    <p class="text-green-400">$</p>
  </div>
</aside>


    

================================================
FILE: Cards/Yaya12085_splendid-firefox-37.html
================================================
<div class="plan">
		<div class="inner">
			<span class="pricing">
				<span>
					$49 <small>/ m</small>
				</span>
			</span>
			<p class="title">Professional</p>
			<p class="info">This plan is for those who have a team already and running a large business.</p>
			<ul class="features">
				<li>
					<span class="icon">
						<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path d="M0 0h24v24H0z" fill="none"></path>
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
						</svg>
					</span>
					<span><strong>20</strong> team members</span>
				</li>
				<li>
					<span class="icon">
						<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path d="M0 0h24v24H0z" fill="none"></path>
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
						</svg>
					</span>
					<span>Plan <strong>team meetings</strong></span>
				</li>
				<li>
					<span class="icon">
						<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path d="M0 0h24v24H0z" fill="none"></path>
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
						</svg>
					</span>
					<span>File sharing</span>
				</li>
			</ul>
			<div class="action">
			<a class="button" href="#">
				Choose plan
			</a>
			</div>
		</div>
	</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card, product, modern, pack, plan */
.plan {
  border-radius: 16px;
  box-shadow: 0 30px 30px -25px rgba(0, 38, 255, 0.205);
  padding: 10px;
  background-color: #fff;
  color: #697e91;
  max-width: 300px;
}

.plan strong {
  font-weight: 600;
  color: #425275;
}

.plan .inner {
  align-items: center;
  padding: 20px;
  padding-top: 40px;
  background-color: #ecf0ff;
  border-radius: 12px;
  position: relative;
}

.plan .pricing {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #bed6fb;
  border-radius: 99em 0 0 99em;
  display: flex;
  align-items: center;
  padding: 0.625em 0.75em;
  font-size: 1.25rem;
  font-weight: 600;
  color: #425475;
}

.plan .pricing small {
  color: #707a91;
  font-size: 0.75em;
  margin-left: 0.25em;
}

.plan .title {
  font-weight: 600;
  font-size: 1.25rem;
  color: #425675;
}

.plan .title + * {
  margin-top: 0.75rem;
}

.plan .info + * {
  margin-top: 1rem;
}

.plan .features {
  display: flex;
  flex-direction: column;
}

.plan .features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.plan .features li + * {
  margin-top: 0.75rem;
}

.plan .features .icon {
  background-color: #1FCAC5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.plan .features .icon svg {
  width: 14px;
  height: 14px;
}

.plan .features + * {
  margin-top: 1.25rem;
}

.plan .action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
}

.plan .button {
  background-color: #6558d3;
  border-radius: 6px;
  color: #fff;
  font-weight: 500;
  font-size: 1.125rem;
  text-align: center;
  border: 0;
  outline: 0;
  width: 100%;
  padding: 0.625em 0.75em;
  text-decoration: none;
}

.plan .button:hover, .plan .button:focus {
  background-color: #4133B7;
}
</style>


================================================
FILE: Cards/Yaya12085_tall-goose-27.html
================================================
<div class="card">
   
    <div class="body">
      <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In massa ipsum, laoreet quis mollis nec, feugiat in dui. Suspendisse et enim pretium, ullamcorper enim laoreet.</p><span class="username">from: @Yaya12085</span>
       <div class="footer">
    <div>
      <div><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M16 10H16.01M12 10H12.01M8 10H8.01M3 10C3 4.64706 5.11765 3 12 3C18.8824 3 21 4.64706 21 10C21 15.3529 18.8824 17 12 17C11.6592 17 11.3301 16.996 11.0124 16.9876L7 21V16.4939C4.0328 15.6692 3 13.7383 3 10Z"></path> </g></svg>18</div>
      <div><svg fill="#000000" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-2.5 0 32 32"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g id="icomoon-ignore"> </g> <path fill="#000000" d="M0 10.284l0.505 0.36c0.089 0.064 0.92 0.621 2.604 0.621 0.27 0 0.55-0.015 0.836-0.044 3.752 4.346 6.411 7.472 7.060 8.299-1.227 2.735-1.42 5.808-0.537 8.686l0.256 0.834 7.63-7.631 8.309 8.309 0.742-0.742-8.309-8.309 7.631-7.631-0.834-0.255c-2.829-0.868-5.986-0.672-8.686 0.537-0.825-0.648-3.942-3.3-8.28-7.044 0.11-0.669 0.23-2.183-0.575-3.441l-0.352-0.549-8.001 8.001zM1.729 10.039l6.032-6.033c0.385 1.122 0.090 2.319 0.086 2.334l-0.080 0.314 0.245 0.214c7.409 6.398 8.631 7.39 8.992 7.546l-0.002 0.006 0.195 0.058 0.185-0.087c2.257-1.079 4.903-1.378 7.343-0.836l-13.482 13.481c-0.55-2.47-0.262-5.045 0.837-7.342l0.104-0.218-0.098-0.221-0.031 0.013c-0.322-0.632-1.831-2.38-7.498-8.944l-0.185-0.215-0.282 0.038c-0.338 0.045-0.668 0.069-0.981 0.069-0.595 0-1.053-0.083-1.38-0.176z"> </path> </g></svg>7</div>
      <div><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.1" d="M21 6C21 7.65685 19.6569 9 18 9C16.3431 9 15 7.65685 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6Z" fill="#323232"></path> <path opacity="0.1" d="M21 18C21 19.6569 19.6569 21 18 21C16.3431 21 15 19.6569 15 18C15 16.3431 16.3431 15 18 15C19.6569 15 21 16.3431 21 18Z" fill="#323232"></path> <path opacity="0.1" d="M9 12C9 13.6569 7.65685 15 6 15C4.34315 15 3 13.6569 3 12C3 10.3431 4.34315 9 6 9C7.65685 9 9 10.3431 9 12Z" fill="#323232"></path> <path d="M21 6C21 7.65685 19.6569 9 18 9C16.3431 9 15 7.65685 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6Z" stroke-width="2"></path> <path d="M21 18C21 19.6569 19.6569 21 18 21C16.3431 21 15 19.6569 15 18C15 16.3431 16.3431 15 18 15C19.6569 15 21 16.3431 21 18Z" stroke-width="2"></path> <path d="M9 12C9 13.6569 7.65685 15 6 15C4.34315 15 3 13.6569 3 12C3 10.3431 4.34315 9 6 9C7.65685 9 9 10.3431 9 12Z" stroke-width="2"></path> <path d="M8.7207 10.6397L15.0001 7.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M8.70605 13.353L15 16.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>2</div>
    </div>
    
    <div class="viewer">
      <span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-width="2" stroke="#ffffff" d="M17 8C17 10.7614 14.7614 13 12 13C9.23858 13 7 10.7614 7 8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8Z"></path> <path stroke-linecap="round" stroke-width="2" stroke="#ffffff" d="M3 21C3.95728 17.9237 6.41998 17 12 17C17.58 17 20.0427 17.9237 21 21"></path> </g></svg></span>
      <span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-width="2" stroke="#ffffff" d="M17 8C17 10.7614 14.7614 13 12 13C9.23858 13 7 10.7614 7 8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8Z"></path> <path stroke-linecap="round" stroke-width="2" stroke="#ffffff" d="M3 21C3.95728 17.9237 6.41998 17 12 17C17.58 17 20.0427 17.9237 21 21"></path> </g></svg></span>
      <span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-width="2" stroke="#ffffff" d="M17 8C17 10.7614 14.7614 13 12 13C9.23858 13 7 10.7614 7 8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8Z"></path> <path stroke-linecap="round" stroke-width="2" stroke="#ffffff" d="M3 21C3.95728 17.9237 6.41998 17 12 17C17.58 17 20.0427 17.9237 21 21"></path> </g></svg></span>
      <span>+20</span>
  </div>
     </div>
  </div></div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  position: relative;
  background-color: #30344c;
  padding: 1em;
  z-index: 5;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  max-width: 300px;
  transition: 200ms ease-in-out;
}

.username {
  color: #C6E1ED;
  font-size: 0.85em;
  font-weight: 600;
}

.body {
  display: flex;
  flex-direction: column;
}

.body .text {
  margin: 0 10px 0 0;
  white-space: pre-line;
  color: #c0c3d7;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 4px;
}

.footer {
  position: relative;
  width: 100%;
  color: #9fa4aa;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  margin-top: 10px;
}

.footer div {
  margin-right: 1rem;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.footer svg {
  margin-right: 5px;
  height: 100%;
  stroke: #9fa4aa;
}

.viewer span {
  height: 20px;
  width: 20px;
  background-color: rgb(28, 117, 219);
  margin-right: -6px;
  border-radius: 50%;
  border: 1px solid #fff;
  display: grid;
  align-items: center;
  text-align: center;
  font-weight: bold;
  font-size: 8px;
  color: #fff;
  padding: 2px;
}

.viewer span svg {
  stroke: #fff;
}










</style>


================================================
FILE: Cards/Yaya12085_terrible-dodo-9.html
================================================
<div class="card">
  <div class="header">
    <div>
      <a class="title" href="#">
        Building a SaaS product as a software developer
      </a>
      <p class="name">By John Doe</p>
    </div>
      <span class="image"></span>
  </div>
    <p class="description">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum
      provident a, ipsa maiores deleniti consectetur nobis et eaque.
    </p>
  <dl class="post-info">
    <div class="cr">
      <dt class="dt">Published</dt>
      <dd class="dd">31st June, 2021</dd>
    </div>
    <div class="cr">
      <dt class="dt">Reading time</dt>
      <dd class="dd">3 minute</dd>
    </div>
  </dl>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  max-width: 320px;
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(243, 244, 246, );
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: #fff;
}

.header {
  display: flex;
  justify-content: space-between;
  grid-gap: 1rem;
  gap: 1rem;
}

.title {
  font-size: 1.125rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: rgba(17, 24, 39, 1);
  text-decoration: none;
}

.title:hover {
  text-decoration: underline royalblue;
}

.name {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: rgba(75, 85, 99, 1);
}

.image {
  display: block;
  flex-shrink: 0;
  height: 3rem;
  width: 3rem;
  border-radius: 0.5rem;
  object-fit: cover;
  background-color: royalblue;
}

.description {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(107, 114, 128, 1);
}

.post-info {
  margin-top: 1.5rem;
  display: flex;
  grid-gap: 1rem;
  gap: 1rem;
}

.cr {
  display: flex;
  flex-direction: column-reverse;
}

.dt {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: rgba(75, 85, 99, 1);
}

.dd {
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgba(107, 114, 128,1);
}
</style>


================================================
FILE: Cards/Yaya12085_terrible-otter-19.html
================================================
<div class="card">
  <div class="header">
    <span class="icon">
      <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path clip-rule="evenodd" d="M18 3a1 1 0 00-1.447-.894L8.763 6H5a3 3 0 000 6h.28l1.771 5.316A1 1 0 008 18h1a1 1 0 001-1v-4.382l6.553 3.276A1 1 0 0018 15V3z" fill-rule="evenodd"></path>
      </svg>
    </span>
    <p class="alert">New message!</p>
  </div>

  <p class="message">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ea quo unde
    vel adipisci blanditiis voluptates eum. Nam, cum minima?
  </p>

  <div class="actions">
    <a class="read" href="">
      Take a Look
    </a>

    <a class="mark-as-read" href="">
      Mark as Read
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by Yaya12085 - Tags: alert, notification, card */
.card {
  max-width: 320px;
  border-width: 1px;
  border-color: rgba(219, 234, 254, 1);
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 1);
  padding: 1rem;
}

.header {
  display: flex;
  align-items: center;
  grid-gap: 1rem;
  gap: 1rem;
}

.icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgba(96, 165, 250, 1);
  padding: 0.5rem;
  color: rgba(255, 255, 255, 1);
}

.icon svg {
  height: 1rem;
  width: 1rem;
}

.alert {
  font-weight: 600;
  color: rgba(107, 114, 128, 1);
}

.message {
  margin-top: 1rem;
  color: rgba(107, 114, 128, 1);
}

.actions {
  margin-top: 1.5rem;
}

.actions a {
  text-decoration: none;
}

.mark-as-read, .read {
  display: inline-block;
  border-radius: 0.5rem;
  width: 100%;
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.read {
  background-color: rgba(59, 130, 246, 1);
  color: rgba(255, 255, 255, 1);
}

.mark-as-read {
  margin-top: 0.5rem;
  background-color: rgba(249, 250, 251, 1);
  color: rgba(107, 114, 128, 1);
  transition: all .15s ease;
}

.mark-as-read:hover {
  background-color: rgb(230, 231, 233);
}
</style>


================================================
FILE: Cards/Yaya12085_tiny-emu-37.html
================================================

<div class="card">
    <div class="title">
        <span>
            <svg width="20" fill="currentColor" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                <path d="M1362 1185q0 153-99.5 263.5t-258.5 136.5v175q0 14-9 23t-23 9h-135q-13 0-22.5-9.5t-9.5-22.5v-175q-66-9-127.5-31t-101.5-44.5-74-48-46.5-37.5-17.5-18q-17-21-2-41l103-135q7-10 23-12 15-2 24 9l2 2q113 99 243 125 37 8 74 8 81 0 142.5-43t61.5-122q0-28-15-53t-33.5-42-58.5-37.5-66-32-80-32.5q-39-16-61.5-25t-61.5-26.5-62.5-31-56.5-35.5-53.5-42.5-43.5-49-35.5-58-21-66.5-8.5-78q0-138 98-242t255-134v-180q0-13 9.5-22.5t22.5-9.5h135q14 0 23 9t9 23v176q57 6 110.5 23t87 33.5 63.5 37.5 39 29 15 14q17 18 5 38l-81 146q-8 15-23 16-14 3-27-7-3-3-14.5-12t-39-26.5-58.5-32-74.5-26-85.5-11.5q-95 0-155 43t-60 111q0 26 8.5 48t29.5 41.5 39.5 33 56 31 60.5 27 70 27.5q53 20 81 31.5t76 35 75.5 42.5 62 50 53 63.5 31.5 76.5 13 94z">
                </path>
            </svg>
        </span>
        <p class="title-text">
            Sales
        </p>
        <p class="percent">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" fill="currentColor" height="20" width="20">
                <path d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z">
                </path>
            </svg> 20%
        </p>
    </div>
    <div class="data">
        <p>
            39,500 
        </p>
        
        <div class="range">
            <div class="fill">
            </div>
        </div>
    </div>
</div>

<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  max-width: 320px;
  border-radius: 20px;
}

.title {
  display: flex;
  align-items: center;
}

.title span {
  position: relative;
  padding: 0.5rem;
  background-color: #10B981;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
}

.title span svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  height: 1rem;
}

.title-text {
  margin-left: 0.5rem;
  color: #374151;
  font-size: 18px;
}

.percent {
  margin-left: 0.5rem;
  color: #02972f;
  font-weight: 600;
  display: flex;
}

.data {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.data p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #1F2937;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  text-align: left;
}

.data .range {
  position: relative;
  background-color: #E5E7EB;
  width: 100%;
  height: 0.5rem;
  border-radius: 0.25rem;
}

.data .range .fill {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #10B981;
  width: 76%;
  height: 100%;
  border-radius: 0.25rem;
}
</style>


================================================
FILE: Cards/Yaya12085_ugly-cat-20.html
================================================
<div class="card">
    <div class="stars">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="star">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
      </svg>

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="star">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
      </svg>

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="star">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
      </svg>

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="star">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
      </svg>

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="star">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
      </svg>
    </div>

    <div class="infos">
      <p class="date-time">
                      2 day ago
      </p>
      <p class="description">
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur.
      </p>
  </div>

  <div class="author">
    — John Doe
  </div>
 </div>

<style>
/* From Uiverse.io by Yaya12085 - Tags: testimonial, card, star, rate */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 1);
  padding: 20px;
  max-width: 320px;
}

.stars {
  display: flex;
  grid-gap: 0.125rem;
  gap: 0.125rem;
  color: rgb(238, 203, 8);
}

.star {
  height: 1.25rem;
  width: 1.25rem;
}

.infos {
  margin-top: 1rem;
}

.date-time {
  color: rgba(7, 63, 216, 1);
  font-size: 12px;
  font-weight: 600;
}

.description {
  margin-top: 0.4rem;
  line-height: 1.625;
  color: rgba(107, 114, 128, 1);
}

.author {
  margin-top: 1.3rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(107, 114, 128, 1);
}
</style>


================================================
FILE: Cards/Yaya12085_ugly-earwig-69.html
================================================
<div class="papper" draggable="true"></div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card, paper, realistic */
.papper {
  position: relative;
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  background: #ffffff;
  background-image: linear-gradient(#ffffff 1.1rem, #ccc 1.2rem);
  background-size: 100% 1.2rem;
  border-radius: 10px;
  cursor: move;
}

.papper::before,
.papper::after {
  position: absolute;
  content: "";
  bottom: 10px;
  width: 40%;
  height: 10px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
  z-index: -1;
  transition: all 0.3s ease;
}

.papper::before {
  left: 15px;
  transform: skew(-5deg) rotate(-5deg);
}

.papper::after {
  right: 15px;
  transform: skew(5deg) rotate(5deg);
}

.papper:hover::before,
.papper:hover::after {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
</style>


================================================
FILE: Cards/Yaya12085_ugly-mule-59.html
================================================
<div class="code-editor">
      <div class="header">
        <span class="title">CSS</span>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="icon"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linecap="round" stroke-width="2" stroke="#4C4F5A" d="M6 6L18 18"></path> <path stroke-linecap="round" stroke-width="2" stroke="#4C4F5A" d="M18 6L6 18"></path> </g></svg>
      </div>
      <div class="editor-content">
        <code class="code">
          <p><span class="color-0">.code-editor </span> <span>{</span></p>

          <p class="property">
            <span class="color-2">max-width</span><span>:</span>
            <span class="color-1">300px</span>;
          </p>
          <p class="property">
            <span class="color-2">background-color</span><span>:</span>
            <span class="color-preview-1"></span><span class="">#1d1e22</span>;
          </p>
          <p class="property">
            <span class="color-2"> box-shadow</span><span>:</span>
            <span class="color-1">0px 4px 30px  <span class="color-preview-2"></span><span class="color-3">rgba(</span>0, 0, 0, 0.5<span class="color-3">)</span></span>;
          </p>
          <p class="property">
            <span class="color-2">border-radius</span><span>:</span>
            <span class="color-1">8px</span>;
          </p>
          <span>}</span>
        </code>
      </div>
    </div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card, dark, editor, code */
.code-editor {
  max-width: 300px;
  background-color: #1d1e22;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 2px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px;
}

.title {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.57px;
  color: rgb(212 212 212);
}

.icon {
  width: 20px;
  transition: .2s ease;
}

.icon:hover {
  cursor: pointer;
  border-radius: 50px;
  background-color: #6e7281;
}

.editor-content {
  margin: 0 10px 10px;
  color: white;
}

.property {
  margin-left: 30px;
}

.property:hover {
  cursor: text;
}

.editor-content .color-0 {
  color: rgb(86 156 214);
}

.editor-content .color-1 {
  color: rgb(182 206 168);
}

.editor-content .color-2 {
  color: rgb(156 220 254);
}

.editor-content .color-3 {
  color: rgb(207 146 120);
}

.color-preview-1,.color-preview-2 {
  height: 8px;
  width: 8px;
  border: 1px solid #fff;
  display: inline-block;
  margin-right: 3px;
}

.color-preview-1 {
  background-color: #1d1e22;
}

.color-preview-1 {
  background-color: rgba(0, 0, 0, 0.5);
}
</style>


================================================
FILE: Cards/Ykingdev_tidy-seahorse-73.html
================================================
<!-- From Uiverse.io by Ykingdev  - Tags: simple, white, card, dark, light, card template, lig, tail -->
<div
  class="flex flex-col gap-2 dark:text-white max-w-md w-full bg-white dark:bg-neutral-900 p-5 rounded-md mt-8 shadow-md hover:scale-105 hover:duration-150 duration-150"
>
  <div class="flex flex-row justify-between w-full">
    <div class="flex flex-row justify-between w-full">
      <p class="text-xs">John Doe</p>
      <p class="text-xs">June 1, 2000</p>
    </div>
  </div>
  <div class="flex flex-row justify-between w-full">
    <h3 class="text-xl font-bold">Great Experience!</h3>

    <div class="text-xs">
      <div class="flex flex-row">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 text-yellow-400"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z"
          ></path>
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 text-yellow-400"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z"
          ></path>
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 text-yellow-400"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z"
          ></path>
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 text-yellow-400"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z"
          ></path>
        </svg>

        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 text-yellow-200"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z"
          ></path>
        </svg>
      </div>
    </div>
  </div>

  <div class="text-sm">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia
    odio vitae vestibulum. Donec in efficitur ipsum, sed dapibus eros.
  </div>
</div>


    

================================================
FILE: Cards/ZeroKaarma_angry-ladybug-41.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by ZeroKaarma - Tags: card */
.card {
  width: 190px;
  height: 254px;
  background: #8749D5;
  box-shadow: 7px 5px 10px rgba(0, 0, 0, 0.333);
  border-radius: 10px;
  background-image: linear-gradient(#8A65B9,#8957C7,#8749D5,#863BE3,#852DF1);
  animation: gradient 5s ease infinite;
}

.heading {
  padding-top: 6px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.heading span {
  font-size: 2em;
  font-weight: 800;
  text-decoration: underline;
  animation: light 2s infinite ease-out;
}

.item--create:hover {
  animation: rotate 1s;
}

.item--post:hover {
  animation: rotate 1s;
}

.item--inspire:hover {
  animation: rotate 1s;
}

@keyframes rotate {
  0% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.content {
  width: 189px;
  height: 130px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.content span {
  animation: light 2s infinite ease-out;
}

.item {
  padding-bottom: 6px;
}

@keyframes light {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }

  50% {
    opacity: .5;
    transform: translateY(-5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

button {
  margin-left: 5px;
  width: 13em1;
  height: 4.2em;
  background-image: linear-gradient(#8A65B9,#8957C7,#8749D5,#863BE3,#852DF1);
  border: 0.08em solid #852DF1;
  border-radius: 0.3em;
  font-size: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 15;
  width: 180px;
  height: 50px;
  border-radius: 0.2em;
  font-size: 15px;
  color: #fff;
  font-weight: bold;
  border: 0.08em solid #C4ACE2;
  box-shadow: 0 0.4em 0.2em 0.022em #B597DB;
}

button:hover {
  transition: all 0.5s;
  transform: translate(0, 0.4em);
  box-shadow: 0 0 0 0 #fff;
}

button:not(hover) {
  transition: all 1s;
}

@keyframes gradient {
  0% {
    background-position: 0 50%;
    box-shadow: 0px 0px 2px #C4ACE2,
      0px 0px 5px #B597DB,
      0px 0px 10px #8749D5,
      0px 0px 50px #852DF1;
  }

  50% {
    background-position: 100% 50%;
    box-shadow: 0px 0px 2px #C4ACE2,
      0px 0px 5px #B597DB,
      0px 0px 10px #8A65B9,
      0px 0px 50px #8957C7;
  }

  100% {
    background-position: 0 50%;
    box-shadow: 0px 0px 2px #ffffff,
          0px 0px 5px #B597DB,
          0px 0px 10px #8749D5,
          0px 0px 50px #852DF1;
  }
}


</style>


================================================
FILE: Cards/ZeroKaarma_wet-goat-13.html
================================================
 <div class="main">
             <div id="c2" class="card">
                <div class="card-info">
                    <div class="contact-title">Contact</div>
                        <div class="card-contact">
                            <li class="icon-contact">
                                <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M280 0C408.1 0 512 103.9 512 232c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-101.6-82.4-184-184-184c-13.3 0-24-10.7-24-24s10.7-24 24-24zm8 192a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm-32-72c0-13.3 10.7-24 24-24c75.1 0 136 60.9 136 136c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-48.6-39.4-88-88-88c-13.3 0-24-10.7-24-24zM117.5 1.4c19.4-5.3 39.7 4.6 47.4 23.2l40 96c6.8 16.3 2.1 35.2-11.6 46.3L144 207.3c33.3 70.4 90.3 127.4 160.7 160.7L345 318.7c11.2-13.7 30-18.4 46.3-11.6l96 40c18.6 7.7 28.5 28 23.2 47.4l-24 88C481.8 499.9 466 512 448 512C200.6 512 0 311.4 0 64C0 46 12.1 30.2 29.5 25.4l88-24z"></path>
                                </svg>
                                     Tel:(+00) 000 99999-0000
                            </li>
                            <li class="icon-contact">
                                <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path>
                                </svg>
                                    Email: contact@mail.com
                            </li>            
                        </div>
                    </div>
                </div>

            <div id="c3" class="card">
                <div class="card-info">
                    <li class="address-icon">
                        <svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
                            <path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"></path>
                        </svg>
                    </li>
                    <li class="address-title">Address:</li>
                    <li class="address">Champs Elysees, Paris.</li>
              </div>
            </div>

            <div id="c1" class="card">
                 <div class="card-info">
                    <div class="card-avatar">
                         <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                            <path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"></path>
                        </svg>
                    </div>
                    <div class="card-title">Main Title</div>
                    <div class="card-subtitle">Sub-title</div>
                    <div class="card-social">
                    <li id="cs1" class="card-social-icon">
                        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                            <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
                         </svg>
                         Twitter
                        </li>
                    <li id="cs2" class="card-social-icon">
                         <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                            <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path>
                        </svg>
                        LinkedIn
                    </li>
                    <li id="cs3" class="card-social-icon">
                        <svg viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg">
                            <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
                        </svg>
                        GitHub
                    </li>
                    </div>
                </div>
            </div>
        </div>
<style>
/* From Uiverse.io by ZeroKaarma - Tags: card, profilecard, project-card */
.main {
  display: grid;
  place-items: center;
  width: 190px;
  height: 254px;
}

.card {
  width: 190px;
  height: 254px;
  background: #FAF1F6;
  padding: 2rem 1.5rem;
  transition: box-shadow .3s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
  position: absolute;
}

.card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card-avatar {
  background: radial-gradient(#A8A6B6,#B3B1BF,#BDBBC7,#C5C4CE,#E2E2E7);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transition: transform .2s ease;
}

.card-avatar svg {
  padding-top: 5px;
  height: 80px;
  width: 100px;
  fill: #515F65;
}

.card-social {
  display: flex;
  justify-content: space-around;
  width: 190px;
  margin-top: 10%;
  text-align: center;
}

.card-social-icon {
  list-style: none;
  color: #515F65;
  font-size: 0.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-social-icon svg {
  display: block;
  height: 20px;
  width: 20px;
  fill: #515F65;
  cursor: pointer;
}

.card-title {
  color: #1b1b1b;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 2rem;
  margin-top: 5px;
}

.card-subtitle {
  color: #7e93a0;
  font-size: 1.0em;
}

.address-icon {
  fill: #515F65;
  height: 150px;
  width: 100px;
  list-style: none;
  justify-content: space-around;
}

.address-title {
  color: #333;
  font-size: 1.0em;
  font-weight: 600;
  list-style: none;
}

.address {
  color: #859ba8;
  font-size: 0.8em;
  list-style: none;
  padding-left: 20px;
  ;
}

.contact-title {
  color: #333;
  font-size: 1.5em;
  font-weight: 600;
  margin-top: 45%;
  padding-bottom: 5px;
}

.card-contact {
  color: #859ba8;
  font-size: 0.8em;
}

.icon-contact {
  list-style: none;
  display: flex;
  align-items: center;
}

.icon-contact svg {
  display: block;
  height: 18px;
  width: 18px;
  fill: #515F65;
  padding-right: 5px;
}

.card:hover {
  box-shadow: 0 10px 50px #23232333;
}

.card:hover .card-info {
  transform: translateY(-5%);
}

.card-avatar:hover {
  transform: scale(1.1);
}

#cs1:hover {
  transform: scale(2.0);
}

#cs2:hover {
  transform: scale(2.0);
}

#cs3:hover {
  transform: scale(2.0);
}

.main:hover #c1 {
  transform: translateX(0px);
}

.main:hover #c2 {
  transform: translateX(200px);
}

.main:hover #c3 {
  transform: translateX(-200px);
}
</style>


================================================
FILE: Cards/ZstarPanda0210_wise-monkey-27.html
================================================

<div class="card"> 
  <button type="button" class="dismiss">×</button> 
  <div class="header"> 
    <div class="image">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#000000" d="M20 7L9.00004 18L3.99994 13"></path> </g></svg>
      </div> 
      <div class="content">
         <span class="title">Order validated</span> 
         <p class="message">Thank you for your purchase. you package will be delivered within 2 days of your purchase</p> 
         </div> 
         <div class="actions">
            <button type="button" class="history">History</button> 
            <button type="button" class="track">Track my package</button> 
            </div> 
            </div> 
            </div>




<style>
/* From Uiverse.io by ZstarPanda0210 - Tags: order, card */
.card {
  overflow: hidden;
  position: relative;
  text-align: left;
  border-radius: 0.5rem;
  max-width: 290px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  background-color: #fff;
}

.dismiss {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background-color: #fff;
  color: black;
  border: 2px solid #D1D5DB;
  font-size: 1rem;
  font-weight: 300;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  transition: .3s ease;
}

.dismiss:hover {
  background-color: #ee0d0d;
  border: 2px solid #ee0d0d;
  color: #fff;
}

.header {
  padding: 1.25rem 1rem 1rem 1rem;
}

.image {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  background-color: #e2feee;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  animation: animate .6s linear alternate-reverse infinite;
  transition: .6s ease;
}

.image svg {
  color: #0afa2a;
  width: 2rem;
  height: 2rem;
}

.content {
  margin-top: 0.75rem;
  text-align: center;
}

.title {
  color: #066e29;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.message {
  margin-top: 0.5rem;
  color: #595b5f;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.actions {
  margin: 0.75rem 1rem;
}

.history {
  display: inline-flex;
  padding: 0.5rem 1rem;
  background-color: #1aa06d;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  justify-content: center;
  width: 100%;
  border-radius: 0.375rem;
  border: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.track {
  display: inline-flex;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  color: #242525;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  justify-content: center;
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid #D1D5DB;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

@keyframes animate {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.09);
  }
}
</style>


================================================
FILE: Cards/aadium_black-eel-56.html
================================================
<div class="card">
  <center>
  <div class="profileimage">
    <svg class="pfp" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 122.88"><g><path d="M61.44,0c8.32,0,16.25,1.66,23.5,4.66l0.11,0.05c7.47,3.11,14.2,7.66,19.83,13.3l0,0c5.66,5.65,10.22,12.42,13.34,19.95 c3.01,7.24,4.66,15.18,4.66,23.49c0,8.32-1.66,16.25-4.66,23.5l-0.05,0.11c-3.12,7.47-7.66,14.2-13.3,19.83l0,0 c-5.65,5.66-12.42,10.22-19.95,13.34c-7.24,3.01-15.18,4.66-23.49,4.66c-8.31,0-16.25-1.66-23.5-4.66l-0.11-0.05 c-7.47-3.11-14.2-7.66-19.83-13.29L18,104.87C12.34,99.21,7.78,92.45,4.66,84.94C1.66,77.69,0,69.76,0,61.44s1.66-16.25,4.66-23.5 l0.05-0.11c3.11-7.47,7.66-14.2,13.29-19.83L18.01,18c5.66-5.66,12.42-10.22,19.94-13.34C45.19,1.66,53.12,0,61.44,0L61.44,0z M16.99,94.47l0.24-0.14c5.9-3.29,21.26-4.38,27.64-8.83c0.47-0.7,0.97-1.72,1.46-2.83c0.73-1.67,1.4-3.5,1.82-4.74 c-1.78-2.1-3.31-4.47-4.77-6.8l-4.83-7.69c-1.76-2.64-2.68-5.04-2.74-7.02c-0.03-0.93,0.13-1.77,0.48-2.52 c0.36-0.78,0.91-1.43,1.66-1.93c0.35-0.24,0.74-0.44,1.17-0.59c-0.32-4.17-0.43-9.42-0.23-13.82c0.1-1.04,0.31-2.09,0.59-3.13 c1.24-4.41,4.33-7.96,8.16-10.4c2.11-1.35,4.43-2.36,6.84-3.04c1.54-0.44-1.31-5.34,0.28-5.51c7.67-0.79,20.08,6.22,25.44,12.01 c2.68,2.9,4.37,6.75,4.73,11.84l-0.3,12.54l0,0c1.34,0.41,2.2,1.26,2.54,2.63c0.39,1.53-0.03,3.67-1.33,6.6l0,0 c-0.02,0.05-0.05,0.11-0.08,0.16l-5.51,9.07c-2.02,3.33-4.08,6.68-6.75,9.31C73.75,80,74,80.35,74.24,80.7 c1.09,1.6,2.19,3.2,3.6,4.63c0.05,0.05,0.09,0.1,0.12,0.15c6.34,4.48,21.77,5.57,27.69,8.87l0.24,0.14 c6.87-9.22,10.93-20.65,10.93-33.03c0-15.29-6.2-29.14-16.22-39.15c-10-10.03-23.85-16.23-39.14-16.23 c-15.29,0-29.14,6.2-39.15,16.22C12.27,32.3,6.07,46.15,6.07,61.44C6.07,73.82,10.13,85.25,16.99,94.47L16.99,94.47L16.99,94.47z"></path></g></svg>
  </div>
  <div class="Name">
    <p>John Doe</p>
  </div>
  <div class="socialbar">
    <a id="github" href="#"><svg viewBox="0 0 16 16" class="bi bi-github" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg></a>
    &nbsp;
    &nbsp;
    &nbsp;
    <a id="instagram" href="#"><svg viewBox="0 0 16 16" class="bi bi-instagram" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
</svg></a>
    &nbsp;
    &nbsp;
    &nbsp;
    <a id="facebook" href="#"><svg viewBox="0 0 16 16" class="bi bi-facebook" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path>
</svg></a>
    &nbsp;
    &nbsp;
    &nbsp;
    <a id="twitter" href="#"><svg viewBox="0 0 16 16" class="bi bi-twitter" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg></a>
    </div></center>
  </div>

<style>
/* From Uiverse.io by aadium - Tags: neumorphism, profile, card */
.card {
  width: 230px;
  height: 280px;
  border-radius: 2em;
  padding: 10px;
  background-color: #191919;
  box-shadow: 5px 5px 30px rgb(4, 4, 4),
                   -5px -5px 30px rgb(57, 57, 57);
}

.profileimage {
  background-color: transparent;
  border: none;
  margin-top: 20px;
  border-radius: 5em;
  width: 100px;
  height: 100px;
}

.pfp {
  border-radius: 35em;
  fill: white;
}

.Name {
  color: white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  padding: 15px;
  font-size: 20px;
  margin-top: 10px;
}

.socialbar {
  background-color: #191919;
  border-radius: 3em;
  width: 90%;
  padding: 14px;
  margin-top: 15px;
  color: white;
  box-shadow: 3px 3px 15px rgb(0, 0, 0),
                   -3px -3px 15px rgb(58, 58, 58);
}

.card a {
  transition: 0.4s;
  color: white
}

#github:hover {
  color: #c9510c;
}

#instagram:hover {
  color: #d62976;
}

#facebook:hover {
  color: #3b5998;
}

#twitter:hover {
  color: #00acee;
}
</style>


================================================
FILE: Cards/aadium_fast-pig-0.html
================================================
<div class="card">
  <svg class="App-logo" viewBox="0 0 841.9 595.3" xmlns="http://www.w3.org/2000/svg"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"></path><circle r="45.7" cy="296.5" cx="420.9"></circle><path d="M520.5 78.1z"></path></g></svg>
  <div class="header">Welcome to React</div>
  <button class="App-button">Start learning now</button>
</div>
<style>
/* From Uiverse.io by aadium - Tags: card, dark, reactjs */
.card {
  background-color: #1e2127;
  border: 3px solid #61dafb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding: 30px 20px;
  color: #61dafb;
  border-radius: 45px;
}

.App-logo {
  pointer-events: none;
  margin-top: -10px
}

.App-button {
  padding: 10px 20px;
  background-color: transparent;
  color: #61dafb;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 15px;
  border: 3px solid #61dafb;
  border-radius: 5em;
  margin-top: 20px;
  transition: 0.2s;
}

.App-button:hover {
  color: #1e2127;
  background-color: #61dafb;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 5s linear;
  }
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: Cards/aadium_foolish-vampirebat-5.html
================================================
<div class="card">
  <div class="card__content">
    <div class="card-details">
      <p class="text-title">Savor the sunset</p>
      <p class="text-body">Enjoy life's little beauties</p>
    </div>
    <svg class="sunsetsvg" version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1312.000000 876.000000" preserveAspectRatio="xMidYMid meet">

      <defs>
        <linearGradient id="MyGradient" gradientTransform="rotate(90)">
          <stop offset="5%" stop-color="#ff632a"></stop>
          <stop offset="95%" stop-color="#ffd900"></stop>
        </linearGradient>

      </defs>
<g transform="translate(0.000000,876.000000) scale(0.100000,-0.100000)" stroke="none">
<path d="M12900 7865 c0 -12 19 -15 110 -15 91 0 110 3 110 15 0 12 -19 15
-110 15 -91 0 -110 -3 -110 -15z"></path>
<path d="M10710 7525 c-148 -33 -310 -142 -413 -277 -65 -86 -101 -154 -137
-261 l-27 -79 -6 76 c-9 101 -23 156 -62 242 -83 183 -220 240 -381 160 -74
-37 -149 -99 -140 -115 4 -5 22 -5 48 2 24 6 61 11 83 11 l40 1 3 -45 c6 -100
15 -107 79 -60 22 16 42 27 45 24 3 -3 3 -33 1 -67 l-5 -62 43 -15 c33 -11 50
-26 71 -60 26 -43 82 -214 75 -233 -1 -5 -20 16 -40 46 -21 31 -77 93 -125
139 -200 193 -380 279 -517 249 -130 -29 -289 -177 -370 -346 -41 -84 -82
-211 -72 -222 3 -2 27 32 53 77 50 84 169 210 198 210 21 0 20 -25 -4 -102
-22 -71 -25 -98 -9 -98 5 0 62 49 125 110 96 92 173 150 199 150 12 0 3 -30
-20 -64 -14 -20 -25 -40 -25 -44 0 -4 60 -7 133 -7 l133 0 74 -37 c71 -36 170
-109 125 -93 -154 57 -197 68 -281 72 -76 5 -102 2 -155 -16 -112 -37 -227
-131 -271 -220 -20 -40 -23 -65 -26 -186 -3 -125 8 -248 24 -264 10 -11 22 22
29 82 8 75 47 200 77 247 l22 35 7 -30 c4 -16 7 -53 8 -82 0 -28 5 -54 10 -57
14 -9 41 70 53 158 6 44 14 85 18 90 5 4 16 -8 25 -28 10 -20 23 -36 30 -36 7
0 23 21 35 46 14 27 43 62 73 86 51 40 69 39 47 -2 -6 -12 -10 -24 -7 -26 3
-3 32 2 65 10 34 9 97 16 143 15 l84 -1 -73 -13 c-106 -20 -174 -55 -246 -128
-93 -92 -138 -192 -155 -344 -9 -87 0 -220 20 -281 19 -59 56 -128 90 -167 33
-37 66 -48 54 -17 -18 48 -35 132 -35 178 0 98 19 108 76 39 20 -25 40 -42 44
-38 4 4 3 42 -3 83 -12 84 1 221 26 280 l14 35 8 -40 c13 -74 25 -110 47 -145
l22 -35 13 85 c13 84 39 178 53 193 4 4 10 -30 13 -76 6 -87 35 -190 67 -242
l19 -29 -1 119 c0 103 3 131 25 200 31 94 72 162 119 199 55 41 46 52 118
-147 78 -214 160 -553 199 -822 49 -335 55 -441 55 -880 0 -368 -3 -446 -23
-630 -20 -187 -86 -624 -96 -634 -2 -2 -37 5 -77 15 -107 28 -277 26 -340 -3
-76 -35 -113 -69 -177 -163 -57 -83 -97 -119 -148 -134 -19 -6 -23 -2 -27 26
-67 410 -120 611 -247 934 -88 224 -265 573 -373 737 -26 38 -6 34 52 -12 56
-44 122 -137 148 -208 29 -79 37 -75 32 12 -3 50 -15 108 -31 154 -15 41 -25
77 -23 79 6 5 97 -106 125 -152 44 -71 52 -9 16 134 -6 22 -1 20 33 -17 44
-48 92 -134 117 -211 10 -29 20 -50 24 -47 3 4 13 27 22 53 8 25 20 47 27 50
16 5 62 -91 76 -160 6 -32 16 -60 21 -61 33 -7 46 174 19 264 -24 82 -89 199
-143 260 -114 126 -287 179 -431 129 -53 -18 -54 -18 -32 0 27 23 124 60 155
60 12 0 29 4 37 10 12 7 11 12 -5 31 l-20 22 44 -7 c49 -7 96 -29 128 -59 25
-23 30 -17 35 43 l3 35 42 -61 c51 -74 106 -131 111 -115 2 6 -6 36 -19 66
-24 58 -22 73 8 57 26 -14 122 -119 160 -175 18 -26 37 -47 42 -47 22 0 -49
193 -102 276 -52 82 -119 123 -235 144 -141 25 -249 -16 -380 -143 l-85 -82
34 64 c56 107 141 177 257 212 23 7 41 16 40 20 -2 4 -18 18 -37 31 -83 56 4
55 178 -2 68 -22 127 -40 132 -40 20 0 6 25 -41 77 -60 65 -65 88 -17 80 55
-9 142 -46 207 -88 34 -22 65 -37 68 -34 4 3 -32 43 -78 88 -61 59 -106 93
-160 119 -149 74 -294 87 -384 34 -119 -70 -252 -308 -290 -521 l-13 -70 -14
60 c-7 33 -14 95 -14 137 0 71 2 79 29 107 l29 30 -27 45 c-14 24 -26 47 -26
51 0 3 22 3 49 -1 27 -3 51 -2 54 3 3 5 -3 28 -14 52 -10 24 -19 49 -19 56 0
14 39 29 103 41 83 14 -4 52 -123 53 -166 2 -258 -129 -230 -325 9 -68 37
-160 61 -206 7 -12 -27 14 -75 60 -141 132 -306 202 -481 202 -94 0 -157 -15
-240 -58 -68 -35 -133 -86 -123 -97 4 -4 44 2 90 14 102 26 232 38 242 23 4
-6 -16 -25 -46 -45 -61 -39 -89 -67 -67 -67 8 0 60 10 116 22 57 12 106 18
110 15 3 -4 -6 -20 -21 -36 l-28 -29 93 0 c114 1 195 -19 302 -74 84 -44 99
-61 24 -28 -96 43 -196 61 -327 62 -196 1 -340 -32 -453 -106 -60 -39 -122
-95 -114 -102 3 -3 28 3 56 12 27 10 53 15 57 11 4 -4 -15 -33 -43 -64 -61
-71 -81 -107 -93 -175 -11 -57 -4 -139 14 -164 11 -14 17 -3 44 68 35 93 82
151 116 146 15 -2 25 -16 37 -50 8 -26 18 -50 21 -54 4 -3 12 21 18 53 13 62
35 113 49 113 5 0 21 -16 35 -35 15 -19 30 -35 34 -35 4 0 24 26 44 58 27 42
50 66 87 85 65 36 189 67 265 67 l61 0 -57 -24 c-121 -50 -246 -164 -303 -276
-42 -83 -59 -158 -58 -265 0 -88 5 -113 37 -210 47 -138 93 -222 161 -288 53
-52 146 -112 166 -105 5 2 -8 28 -29 58 -49 68 -74 117 -70 135 2 10 16 8 62
-11 32 -14 67 -24 79 -22 18 3 13 12 -42 78 -83 98 -94 116 -87 136 5 14 16
16 64 11 32 -4 64 -2 72 4 12 8 9 14 -20 37 -77 60 -119 105 -146 157 -16 29
-26 56 -23 60 3 3 30 -5 60 -19 82 -36 99 -40 99 -23 0 8 -25 57 -55 108 -30
51 -55 97 -55 101 0 15 32 8 75 -18 43 -25 65 -25 65 -1 1 52 111 202 170 231
36 19 88 27 95 16 3 -6 2 -10 -4 -10 -6 0 -39 -27 -74 -60 -183 -171 -179
-476 9 -679 77 -84 232 -159 179 -88 -70 96 -108 177 -121 257 -8 48 1 50 51
10 71 -57 70 -41 -11 129 -76 160 -72 178 22 90 46 -45 54 -49 54 -30 0 12
-13 51 -30 88 -16 36 -30 67 -30 70 0 2 11 -4 25 -13 31 -20 32 -9 9 59 -8 25
-14 56 -12 69 4 28 94 -184 180 -422 154 -426 238 -834 238 -1156 l0 -121 -67
-22 c-95 -31 -167 -84 -247 -182 -97 -119 -97 -119 -241 -119 -151 -1 -250
-18 -351 -62 -43 -19 -104 -41 -134 -47 -30 -7 -95 -26 -145 -41 -49 -16 -119
-34 -155 -40 -79 -13 -130 -29 -130 -40 0 -4 19 -11 43 -14 80 -12 602 -26
967 -26 622 0 1380 -39 1380 -71 0 -5 -73 -9 -162 -9 -241 0 -336 -17 -478
-85 -127 -61 -149 -67 -330 -90 -165 -21 -227 -38 -335 -90 -62 -30 -118 -48
-178 -59 -52 -9 -125 -31 -180 -56 -104 -45 -135 -51 -392 -79 -723 -79 -1917
-102 -2627 -50 -182 13 -181 13 -279 151 -98 138 -124 153 -314 183 -127 19
-218 41 -256 60 -15 8 -44 34 -65 57 -109 121 -182 184 -249 215 -39 18 -87
35 -107 38 l-36 6 -7 76 c-21 221 31 638 126 1003 73 279 260 812 267 760 2
-13 -4 -50 -14 -82 -9 -32 -14 -61 -11 -64 4 -4 18 1 32 10 30 20 31 16 6 -32
-25 -50 -54 -142 -47 -149 3 -3 29 20 59 51 59 62 91 74 77 29 -4 -16 -31 -80
-59 -143 -47 -107 -60 -150 -45 -150 4 0 24 16 45 35 54 48 63 46 55 -16 -10
-75 -46 -166 -94 -236 -23 -34 -38 -64 -34 -67 20 -12 118 48 176 107 111 113
161 239 159 402 -1 185 -68 305 -223 402 l-35 22 39 1 c22 0 59 -9 82 -21 63
-30 147 -126 175 -198 27 -69 35 -72 94 -36 82 51 83 25 5 -114 -28 -48 -50
-90 -50 -94 0 -15 44 -5 100 23 33 17 62 30 65 30 3 0 5 -11 5 -23 0 -40 -73
-140 -139 -192 -34 -27 -60 -53 -58 -59 3 -7 32 -10 80 -8 75 4 77 3 77 -20 0
-15 -29 -60 -75 -117 -41 -52 -75 -98 -75 -102 0 -17 35 -9 98 21 35 17 66 30
68 30 20 0 -17 -84 -74 -168 -19 -28 -33 -55 -30 -58 9 -9 78 30 135 75 92 74
173 220 219 396 21 83 24 267 5 335 -23 84 -75 173 -144 246 -81 87 -157 139
-257 177 l-75 28 100 -6 c112 -5 229 -34 292 -71 26 -15 59 -48 84 -85 44 -66
54 -66 85 -7 8 15 20 28 27 28 19 0 43 -48 58 -113 7 -32 15 -60 19 -62 4 -2
14 23 24 55 14 52 19 60 41 60 38 0 89 -62 125 -151 18 -44 36 -82 40 -84 17
-11 33 69 27 136 -8 91 -33 145 -106 223 -81 87 -81 99 -1 71 72 -26 79 -18
25 31 -27 25 -86 63 -130 84 -111 54 -218 74 -390 74 -159 1 -239 -14 -375
-69 -91 -37 -82 -21 20 34 101 54 184 75 297 76 57 0 103 3 103 6 0 3 -14 15
-30 27 -62 46 -30 52 120 23 52 -11 99 -16 103 -11 9 8 -19 32 -87 73 -26 15
-44 32 -41 37 10 16 133 11 235 -10 52 -11 103 -20 114 -20 16 0 17 2 5 17
-26 31 -130 92 -197 115 -54 18 -88 23 -172 22 -130 0 -203 -18 -330 -81 -77
-39 -112 -64 -188 -138 -51 -50 -90 -83 -86 -75 48 125 65 232 53 335 -13 106
-62 176 -149 213 -45 18 -188 12 -244 -12 -49 -20 -40 -31 39 -45 85 -16 92
-26 64 -90 -13 -31 -18 -56 -13 -61 5 -5 30 -5 58 1 27 5 51 7 53 5 3 -2 -7
-22 -21 -45 -27 -41 -34 -81 -16 -81 6 0 19 -15 30 -32 24 -39 26 -135 7 -238
l-13 -65 -13 65 c-18 94 -83 253 -140 346 -108 174 -197 240 -326 238 -121 -2
-242 -48 -363 -139 -61 -46 -162 -155 -162 -175 0 -5 35 15 79 44 73 50 161
90 223 103 43 9 36 -16 -28 -94 -42 -51 -52 -69 -40 -71 9 -2 83 19 164 47
140 49 212 62 212 41 0 -5 -11 -17 -25 -27 -77 -54 -77 -49 0 -72 118 -35 207
-104 266 -206 16 -27 29 -53 29 -57 0 -4 -30 22 -66 56 -121 115 -212 158
-339 157 -147 0 -261 -52 -320 -146 -58 -92 -142 -325 -117 -325 5 0 34 38 66
85 32 46 80 105 108 130 73 66 82 61 48 -27 -26 -70 -26 -82 1 -68 11 6 46 50
77 98 56 86 56 86 63 55 13 -66 17 -69 47 -40 34 33 108 66 146 67 l29 0 -23
-24 -23 -25 24 -5 c13 -3 48 -10 77 -15 50 -10 158 -58 150 -66 -2 -2 -24 3
-48 12 -111 39 -269 9 -379 -72 -93 -69 -192 -223 -225 -352 -27 -103 -16
-264 20 -293 10 -9 14 -4 19 27 19 119 55 208 84 208 8 0 22 -22 31 -50 9 -27
20 -49 25 -48 5 1 16 26 25 55 30 97 123 258 149 258 5 0 3 -24 -5 -52 -16
-60 -18 -134 -5 -142 5 -3 21 14 35 39 28 47 126 169 131 163 2 -2 -10 -41
-26 -88 -22 -66 -29 -103 -29 -168 0 -53 4 -81 10 -77 6 3 10 14 10 24 0 9 17
53 38 97 41 83 118 176 173 208 l32 19 -42 -74 c-242 -428 -428 -908 -515
-1334 -15 -71 -29 -140 -32 -152 l-4 -23 -65 25 c-74 27 -119 58 -220 145 -38
33 -95 73 -125 88 -51 25 -63 27 -175 26 -72 -1 -162 -10 -225 -22 -58 -11
-106 -19 -108 -17 -5 4 -34 164 -57 320 -53 362 -75 689 -70 1080 8 599 86
1107 242 1577 l45 138 30 -18 c120 -69 205 -276 197 -476 -2 -47 -1 -86 2 -86
10 0 47 90 63 152 7 29 17 91 21 138 l8 85 20 -44 c10 -25 28 -88 39 -140 10
-53 20 -100 22 -106 7 -21 58 107 63 160 3 30 9 55 14 55 12 0 37 -89 49 -177
10 -73 8 -144 -6 -210 -7 -36 15 -27 58 22 22 25 46 45 53 45 29 0 34 -113 9
-221 -9 -39 -13 -73 -10 -77 12 -12 78 65 105 123 44 93 56 157 55 290 -2 205
-55 346 -172 462 -77 76 -160 118 -268 135 l-79 12 58 9 c42 6 81 4 141 -7
111 -21 109 -22 91 15 -21 41 -14 46 29 20 45 -28 105 -95 118 -132 14 -41 33
-36 58 16 12 25 23 45 25 45 1 0 10 -44 20 -97 18 -102 46 -183 64 -183 7 0
11 30 11 78 0 42 4 83 9 90 20 32 90 -133 116 -274 9 -49 21 -93 25 -98 17
-18 31 80 31 216 0 77 -3 156 -7 176 -12 68 -53 139 -109 191 -179 163 -379
183 -650 66 l-60 -25 45 39 c108 96 231 137 383 127 53 -3 97 -4 97 -2 0 2
-16 28 -36 57 -35 52 -35 54 -14 57 29 5 104 -47 219 -153 97 -89 128 -111
139 -101 3 4 -6 44 -21 89 -26 79 -34 127 -22 127 38 0 181 -143 241 -239 46
-77 56 -62 23 37 -58 176 -162 316 -312 421 -163 112 -320 93 -532 -66 -98
-74 -246 -226 -304 -313 -23 -36 -40 -56 -38 -45 3 11 15 61 27 110 30 128 63
184 123 213 l49 23 -7 72 -7 71 26 -17 c14 -9 37 -24 51 -33 41 -27 54 -13 57
63 4 80 7 82 110 63 38 -7 71 -10 76 -6 12 13 -76 84 -147 119 -55 27 -77 32
-136 32 -49 0 -82 -6 -110 -20 -119 -59 -200 -222 -220 -445 -4 -47 -10 -78
-13 -70 -101 321 -353 566 -634 616 -101 18 -224 8 -313 -26 -42 -16 -21 -27
85 -44 52 -9 120 -23 150 -32 70 -21 152 -62 146 -73 -3 -5 -32 -12 -63 -16
-112 -13 -162 -34 -115 -49 9 -3 64 -15 121 -26 58 -12 116 -27 130 -34 23
-13 24 -14 5 -24 -10 -5 -34 -13 -52 -17 -17 -3 -32 -10 -32 -14 0 -4 26 -15
58 -25 104 -32 181 -83 282 -185 131 -133 167 -198 44 -81 -106 102 -222 176
-360 230 -203 79 -359 103 -511 76 -147 -25 -223 -66 -124 -66 50 0 101 -10
101 -21 0 -4 -47 -30 -104 -58 -139 -67 -191 -126 -231 -264 -28 -98 -15 -101
73 -15 83 82 147 121 190 116 27 -3 27 -3 25 -83 l-1 -80 26 35 c49 63 121
132 134 128 7 -3 17 -28 23 -56 5 -28 13 -53 16 -56 3 -4 33 11 66 33 88 57
120 65 237 58 103 -6 187 -26 288 -68 l56 -24 -103 3 c-74 3 -126 -1 -180 -13
-96 -21 -253 -99 -323 -160 -158 -140 -242 -360 -242 -632 0 -148 18 -232 70
-330 43 -83 104 -162 115 -151 4 4 0 37 -8 75 -22 94 -30 185 -18 202 7 11 23
0 73 -52 97 -102 108 -88 59 67 -16 50 -32 110 -36 133 -9 60 10 65 91 25 66
-33 94 -39 94 -22 0 5 -20 48 -44 95 -54 105 -80 228 -56 265 8 12 21 2 71
-52 91 -101 102 -94 83 52 -26 194 -16 219 52 125 21 -30 45 -55 53 -55 8 0
40 24 71 54 31 29 74 63 95 74 53 26 141 52 180 52 l32 0 -54 -147 c-199 -543
-326 -1145 -373 -1765 -13 -177 -13 -690 0 -867 11 -143 47 -456 56 -480 7
-22 -15 -31 -76 -31 -59 0 -80 10 -220 107 -101 70 -185 68 -331 -5 -118 -59
-188 -110 -281 -203 l-88 -86 0 -807 0 -806 5030 0 5030 0 0 883 0 883 -97 22
c-92 21 -106 28 -231 111 -146 97 -177 112 -302 136 -47 9 -120 30 -164 47
l-79 30 6 52 c3 28 13 105 21 171 36 282 48 746 26 1045 -46 632 -190 1266
-414 1824 -31 76 -56 141 -56 144 0 3 28 2 62 -2 80 -8 174 -52 236 -110 27
-25 53 -46 58 -46 5 1 25 24 44 52 59 88 64 81 56 -80 -4 -86 -3 -143 3 -146
5 -3 36 24 69 60 35 40 64 64 71 60 28 -17 4 -147 -46 -254 -48 -104 -44 -110
45 -67 40 20 77 33 82 30 17 -10 11 -53 -21 -173 -19 -71 -27 -118 -21 -124 6
-6 34 18 75 63 53 56 68 68 73 55 6 -16 2 -97 -12 -216 l-6 -55 20 20 c34 32
89 132 114 204 20 58 23 84 22 216 -1 127 -5 165 -27 247 -37 138 -86 227
-177 318 -86 87 -196 148 -315 176 -71 16 -221 22 -266 10 -13 -4 -7 3 16 15
109 60 302 99 390 79 26 -6 71 -26 101 -45 30 -19 58 -35 63 -35 10 0 21 35
21 72 0 15 5 30 10 33 14 9 57 -20 89 -59 14 -16 36 -42 49 -56 l23 -25 -7 65
c-5 52 -3 69 9 79 35 28 134 -25 226 -123 19 -20 39 -36 44 -36 17 0 -1 81
-32 145 -37 75 -93 128 -170 162 -31 13 -74 32 -96 43 l-40 18 28 11 c16 6 46
11 67 11 21 0 42 5 45 10 16 26 -177 64 -285 56 -89 -7 -226 -43 -328 -85
-130 -54 -230 -120 -329 -217 -80 -79 -90 -86 -71 -51 34 59 151 180 219 226
33 22 87 50 120 62 32 12 59 25 59 29 0 5 -17 12 -37 17 -78 18 -39 42 130 78
42 10 80 21 83 26 8 13 -33 26 -109 34 -37 4 -67 11 -67 16 0 26 122 74 258
103 57 11 103 26 103 31 1 32 -210 53 -311 30z"></path>
<path d="M7336 5901 c-29 -20 -72 -78 -64 -87 3 -2 25 7 49 21 77 43 140 29
199 -45 17 -22 35 -40 39 -40 4 0 15 18 24 39 18 40 45 63 84 73 33 9 108 -11
149 -38 44 -30 52 -27 23 10 -28 36 -117 86 -153 86 -16 0 -54 -12 -86 -26
l-58 -26 -48 26 c-59 31 -117 34 -158 7z"></path>
<path d="M5816 5741 c-28 -19 -73 -78 -64 -86 2 -2 27 8 56 22 71 35 108 27
178 -39 30 -28 55 -49 57 -47 1 2 11 21 21 42 39 76 131 88 226 29 28 -17 50
-27 50 -23 0 5 -23 30 -51 55 -79 71 -135 78 -227 30 -36 -19 -44 -18 -98 11
-56 30 -108 32 -148 6z"></path>
<path d="M6808 5354 c-27 -14 -82 -84 -73 -92 2 -2 29 8 59 23 77 38 115 30
179 -36 26 -27 49 -49 52 -49 2 0 13 17 24 38 25 49 60 72 108 72 46 -1 107
-22 134 -46 10 -9 22 -14 26 -10 12 12 -59 74 -109 96 -55 24 -85 21 -155 -13
l-42 -21 -53 27 c-59 30 -109 34 -150 11z"></path>
<path d="M12543 4303 c48 -2 126 -2 175 0 48 1 8 3 -88 3 -96 0 -136 -2 -87
-3z"></path>
<path d="M12893 4303 c15 -2 39 -2 55 0 15 2 2 4 -28 4 -30 0 -43 -2 -27 -4z"></path>
<path d="M6370 3905 c-52 -7 -135 -25 -184 -40 -88 -25 -236 -83 -236 -91 0
-2 276 -4 613 -4 l612 1 -38 20 c-54 28 -229 85 -322 104 -111 23 -327 28
-445 10z" id="sun"></path>
<path d="M5813 3697 c-126 -85 -205 -77 746 -77 945 0 874 -7 750 75 l-68 45
-683 -1 -683 0 -62 -42z" id="sun"></path>
<path d="M5575 3500 l-39 -40 1024 0 1024 0 -39 40 -39 40 -946 0 -946 0 -39
-40z" id="sun"></path>
<path d="M5441 3338 c-17 -23 -31 -46 -31 -50 0 -4 518 -8 1150 -8 633 0 1150
4 1150 8 0 4 -14 27 -31 50 l-31 42 -1088 0 -1088 0 -31 -42z" id="sun"></path>
<path d="M5332 3155 c-7 -14 -12 -30 -12 -35 0 -6 461 -10 1240 -10 779 0
1240 4 1240 10 0 5 -5 21 -12 35 l-11 25 -1217 0 -1217 0 -11 -25z" id="sun"></path>
<path d="M5260 2984 c-6 -14 -10 -27 -10 -30 0 -2 590 -4 1310 -4 721 0 1310
2 1310 4 0 3 -4 16 -10 30 l-10 26 -1290 0 -1290 0 -10 -26z" id="sun"></path>
<path d="M5430 2889 c-17 -5 -3 -8 45 -9 39 -1 95 -5 125 -10 32 -4 -111 -8
-345 -9 -239 -2 -389 -6 -372 -11 16 -5 209 -12 430 -17 281 -5 372 -10 302
-14 -55 -4 -334 -4 -620 -2 -286 2 -572 0 -635 -4 l-115 -9 180 -8 c100 -5
484 -5 865 0 377 5 1101 9 1610 8 509 -1 887 2 840 6 -47 5 -206 9 -355 9
-178 1 -265 5 -255 11 9 6 329 10 850 11 459 0 844 4 855 8 40 16 -167 21
-930 22 -429 1 -754 5 -723 8 120 13 63 21 -149 21 -280 0 -514 -11 -458 -21
22 -5 70 -8 108 -8 37 -1 67 -5 67 -9 0 -11 -238 -22 -430 -21 -149 1 -144 6
25 25 l70 7 -50 8 c-68 10 -904 17 -935 8z" id="sun"></path>
<path d="M6108 2783 c-60 -2 -108 -7 -108 -11 0 -4 17 -15 38 -24 37 -18 36
-18 -108 -13 -80 3 -197 10 -260 15 -120 12 -1213 4 -1340 -9 -126 -13 203
-21 783 -20 306 1 560 -1 564 -4 11 -12 -2 -17 -68 -24 l-64 -7 50 -7 c50 -7
1795 8 1803 15 2 2 -49 7 -113 11 -64 4 -113 10 -110 13 3 4 272 10 598 14
326 4 610 12 632 16 l40 9 -47 7 c-47 8 -1513 0 -1718 -9 -120 -5 -122 0 -5
12 l80 8 -120 6 c-124 6 -340 7 -527 2z" id="sun"></path>
<path d="M5250 2643 c-154 -4 -168 -6 -150 -28 7 -8 11 -15 9 -16 -2 0 -167
-4 -366 -8 -234 -4 -366 -10 -373 -17 -13 -13 277 -24 644 -25 251 0 334 -11
176 -23 -144 -11 -262 -26 -279 -36 -10 -6 489 -9 1339 -7 1334 2 1437 4 1374
32 -11 5 -380 11 -821 15 -561 4 -806 9 -814 17 -13 13 202 20 866 28 615 8
1078 31 1139 55 12 5 -510 9 -1160 9 -649 1 -1241 3 -1315 5 -74 1 -195 1
-269 -1z" id="sun"></path>
<path d="M5150 2410 c-234 -4 -441 -11 -460 -15 -35 -8 -35 -8 -10 -18 16 -7
232 -12 595 -15 346 -3 556 -8 535 -14 -40 -9 -543 -27 -794 -28 -108 0 -167
-3 -160 -10 5 -5 246 -10 609 -12 471 -3 607 -6 633 -17 17 -7 32 -17 32 -22
0 -12 -353 -11 -684 2 -283 11 -326 9 -306 -16 18 -22 4 -33 -48 -41 -26 -4
-56 -10 -67 -14 -25 -9 7 -14 230 -35 270 -26 304 -37 203 -70 -29 -10 -57
-21 -61 -25 -12 -11 111 -20 272 -20 79 0 142 -3 139 -6 -3 -3 -85 -14 -183
-25 -194 -21 -237 -29 -242 -46 -6 -17 85 -41 202 -52 158 -16 484 -24 581
-15 l89 8 -65 7 c-36 4 -105 7 -155 8 -49 1 -128 4 -174 8 -206 16 13 24 853
33 858 9 1258 21 1396 40 36 5 69 10 74 10 6 0 6 4 0 10 -13 13 -182 26 -569
45 -428 21 -726 40 -1245 80 -245 19 -452 35 -459 35 -12 0 -12 3 -3 12 10 10
132 11 535 8 933 -9 2380 -5 2412 7 48 16 -155 21 -1265 33 -1106 11 -1347 17
-1331 33 7 7 342 13 988 19 1324 10 1747 24 1598 52 -20 4 -508 4 -1083 0
-1008 -7 -1219 -4 -1162 18 20 7 356 21 740 29 l75 2 -50 8 c-69 12 -1696 19
-2215 9z" id="sun"></path>
</g>
</svg>

  </div>
</div>
<style>
/* From Uiverse.io by aadium - Tags: card, sunset */
.card {
  width: 250px;
  height: 320px;
  padding: 5px;
  background-image: linear-gradient(#ca1eb3, #FD2E24, #FFD701 70%);
}

.card__content {
  background-color: #212121cf;
  backdrop-filter: blur(50px);
  width: 100%;
  height: 100%;
  padding: 15px;
}

.card-details {
  height: 100%;
  gap: .5em;
  display: grid;
  place-content: center;
}

.text-body {
  margin-top: -35px;
  color: #ff8d79;
  text-align: center;
}

.text-title {
  margin-top: -125px;
  color: #ff4d7d;
  font-size: 1.75em;
  font-weight: bold;
  text-align: center;
}

.sunsetsvg {
  width: 313px;
  margin-left: -51.9px;
  margin-top: -165px;
  fill: black;
}

#sun {
  fill: url(#MyGradient);
}
</style>


================================================
FILE: Cards/aadium_mighty-dog-12.html
================================================
<div class="card">
  <div class="titlebar">
    <span class="buttons">
    <button class="minimize">
			<svg x="0px" y="0px" viewBox="0 0 10.2 1"><rect x="0" y="50%" width="10.2" height="1"></rect></svg>
		</button>
    <button class="maximize">
			<svg viewBox="0 0 10 10"><path d="M0,0v10h10V0H0z M9,9H1V1h8V9z"></path></svg>
		</button>
    <button class="close">
			<svg viewBox="0 0 10 10"><polygon points="10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1"></polygon></svg>
		</button>
    </span>
  </div>
  <div class="cppcode">
    <pre id="pre"><code><span class="s1">#include</span> <span class="s2">&lt;iostream&gt;</span>
using<span class="s3"> namespace </span>std<span class="sc">;</span>

<span class="s3">int</span> <span class="s2">main()</span> <span class="curlies">{</span>

  <span class="s3">int</span> <span class="s4">a</span> <span class="operator">=</span> 12<span class="sc">;</span>
  <span class="s3">int</span> <span class="s4">b</span> <span class="operator">=</span> 5<span class="sc">;</span>

  <span class="s4">cout</span> <span class="s5">&lt;&lt;</span> <span class="s1">"Sum of the numbers
    is: "</span> <span class="s5">&lt;&lt;</span> <span class="rounds">(</span><span class="s4">a </span><span class="operator">+</span><span class="s4"> b</span><span class="rounds">)</span><span class="sc">;</span>

  <span class="s6">return</span> 0<span class="sc">;</span>

<span class="curlies">}</span>
    </code></pre>
  </div>
</div>

<style>
/* From Uiverse.io by aadium - Tags: card, code, syntax */
.card {
  width: 250px;
  height: 300px;
  background: #15001f;
  border: 1px solid #c042ff;
  font-size: 14px;
  font-family: monospace;
  overflow: auto;
}

.titlebar {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 21px;
  font-weight: 450;
  background-color: #2e0043;
  width: 100%;
  text-align: right;
}

.card button {
  width: 40px;
  height: 35px;
  margin-left: -5px;
  border: 0;
  outline: 0;
  background: transparent;
  transition: 0.2s;
}

button svg path, 
button svg rect, 
button svg polygon {
  fill: #ffffff;
}

button svg {
  width: 10px;
  height: 10px;
}

.close:hover {
  background-color: #e81123;
}

.maximize:hover {
  background-color: #c042ff2e;
}

.minimize:hover {
  background-color: #c042ff2e;
}

#pre {
  overflow: auto;
  width: 100%;
  padding: 10px;
  height: auto;
  color: #bafff8;
}

.curlies {
  color: #ff0000;
}

.sc {
  color: #e600ff;
}

.rounds {
  color: #ffffff;
}

.operator {
  color: #ffff00;
}

.s1 {
  color: #22ff00;
}

.s2 {
  color: #4281ff;
}

.s3 {
  color: #ff4284;
}

.s4 {
  color: #ffae00;
}

.s5 {
  color: #ffffff;
}

.s6 {
  color: #ffff00;
}
</style>


================================================
FILE: Cards/aadium_proud-swan-48.html
================================================
<div class="social-buttons">
  <a href="#" class="social-button github">
    <svg class="cf-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 0 19 19"><path d="M9.464 17.178a4.506 4.506 0 0 1-2.013.317 4.29 4.29 0 0 1-2.007-.317.746.746 0 0 1-.277-.587c0-.22-.008-.798-.012-1.567-2.564.557-3.105-1.236-3.105-1.236a2.44 2.44 0 0 0-1.024-1.348c-.836-.572.063-.56.063-.56a1.937 1.937 0 0 1 1.412.95 1.962 1.962 0 0 0 2.682.765 1.971 1.971 0 0 1 .586-1.233c-2.046-.232-4.198-1.023-4.198-4.554a3.566 3.566 0 0 1 .948-2.474 3.313 3.313 0 0 1 .091-2.438s.773-.248 2.534.945a8.727 8.727 0 0 1 4.615 0c1.76-1.193 2.532-.945 2.532-.945a3.31 3.31 0 0 1 .092 2.438 3.562 3.562 0 0 1 .947 2.474c0 3.54-2.155 4.32-4.208 4.548a2.195 2.195 0 0 1 .625 1.706c0 1.232-.011 2.227-.011 2.529a.694.694 0 0 1-.272.587z"></path></svg>
      </a>
      <a href="#" class="social-button linkedin">
        <svg viewBox="0 -2 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Icons" stroke="none" stroke-width="1">
            <g transform="translate(-702.000000, -265.000000)">
                <path d="M746,305 L736.2754,305 L736.2754,290.9384 C736.2754,287.257796 734.754233,284.74515 731.409219,284.74515 C728.850659,284.74515 727.427799,286.440738 726.765522,288.074854 C726.517168,288.661395 726.555974,289.478453 726.555974,290.295511 L726.555974,305 L716.921919,305 C716.921919,305 717.046096,280.091247 716.921919,277.827047 L726.555974,277.827047 L726.555974,282.091631 C727.125118,280.226996 730.203669,277.565794 735.116416,277.565794 C741.21143,277.565794 746,281.474355 746,289.890824 L746,305 L746,305 Z M707.17921,274.428187 L707.117121,274.428187 C704.0127,274.428187 702,272.350964 702,269.717936 C702,267.033681 704.072201,265 707.238711,265 C710.402634,265 712.348071,267.028559 712.41016,269.710252 C712.41016,272.34328 710.402634,274.428187 707.17921,274.428187 L707.17921,274.428187 L707.17921,274.428187 Z M703.109831,277.827047 L711.685795,277.827047 L711.685795,305 L703.109831,305 L703.109831,277.827047 L703.109831,277.827047 Z" id="LinkedIn">
    </path>
            </g>
        </g>
    </svg>
  </a>
  <a href="#" class="social-button facebook">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 310 310" xml:space="preserve">
<g id="XMLID_834_">
  <path id="XMLID_835_" d="M81.703,165.106h33.981V305c0,2.762,2.238,5,5,5h57.616c2.762,0,5-2.238,5-5V165.765h39.064
    c2.54,0,4.677-1.906,4.967-4.429l5.933-51.502c0.163-1.417-0.286-2.836-1.234-3.899c-0.949-1.064-2.307-1.673-3.732-1.673h-44.996
    V71.978c0-9.732,5.24-14.667,15.576-14.667c1.473,0,29.42,0,29.42,0c2.762,0,5-2.239,5-5V5.037c0-2.762-2.238-5-5-5h-40.545
    C187.467,0.023,186.832,0,185.896,0c-7.035,0-31.488,1.381-50.804,19.151c-21.402,19.692-18.427,43.27-17.716,47.358v37.752H81.703
    c-2.762,0-5,2.238-5,5v50.844C76.703,162.867,78.941,165.106,81.703,165.106z"></path>
</g>
</svg>
  </a>
  <a href="#" class="social-button instagram">
    <svg width="800px" height="800px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1">
        <g id="Dribbble-Light-Preview" transform="translate(-340.000000, -7439.000000)">
            <g id="icons" transform="translate(56.000000, 160.000000)">
                <path d="M289.869652,7279.12273 C288.241769,7279.19618 286.830805,7279.5942 285.691486,7280.72871 C284.548187,7281.86918 284.155147,7283.28558 284.081514,7284.89653 C284.035742,7285.90201 283.768077,7293.49818 284.544207,7295.49028 C285.067597,7296.83422 286.098457,7297.86749 287.454694,7298.39256 C288.087538,7298.63872 288.809936,7298.80547 289.869652,7298.85411 C298.730467,7299.25511 302.015089,7299.03674 303.400182,7295.49028 C303.645956,7294.859 303.815113,7294.1374 303.86188,7293.08031 C304.26686,7284.19677 303.796207,7282.27117 302.251908,7280.72871 C301.027016,7279.50685 299.5862,7278.67508 289.869652,7279.12273 M289.951245,7297.06748 C288.981083,7297.0238 288.454707,7296.86201 288.103459,7296.72603 C287.219865,7296.3826 286.556174,7295.72155 286.214876,7294.84312 C285.623823,7293.32944 285.819846,7286.14023 285.872583,7284.97693 C285.924325,7283.83745 286.155174,7282.79624 286.959165,7281.99226 C287.954203,7280.99968 289.239792,7280.51332 297.993144,7280.90837 C299.135448,7280.95998 300.179243,7281.19026 300.985224,7281.99226 C301.980262,7282.98483 302.473801,7284.28014 302.071806,7292.99991 C302.028024,7293.96767 301.865833,7294.49274 301.729513,7294.84312 C300.829003,7297.15085 298.757333,7297.47145 289.951245,7297.06748 M298.089663,7283.68956 C298.089663,7284.34665 298.623998,7284.88065 299.283709,7284.88065 C299.943419,7284.88065 300.47875,7284.34665 300.47875,7283.68956 C300.47875,7283.03248 299.943419,7282.49847 299.283709,7282.49847 C298.623998,7282.49847 298.089663,7283.03248 298.089663,7283.68956 M288.862673,7288.98792 C288.862673,7291.80286 291.150266,7294.08479 293.972194,7294.08479 C296.794123,7294.08479 299.081716,7291.80286 299.081716,7288.98792 C299.081716,7286.17298 296.794123,7283.89205 293.972194,7283.89205 C291.150266,7283.89205 288.862673,7286.17298 288.862673,7288.98792 M290.655732,7288.98792 C290.655732,7287.16159 292.140329,7285.67967 293.972194,7285.67967 C295.80406,7285.67967 297.288657,7287.16159 297.288657,7288.98792 C297.288657,7290.81525 295.80406,7292.29716 293.972194,7292.29716 C292.140329,7292.29716 290.655732,7290.81525 290.655732,7288.98792" id="instagram-[#167]">

</path>
            </g>
        </g>
    </g>
</svg>
  </a>
</div>
<style>
/* From Uiverse.io by aadium - Tags: material design, card, social media */
.social-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2f2f2;
  box-shadow: 0px 0px 15px #00000027;
  padding: 15px 10px;
  border-radius: 5em;
}

.social-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 10px;
  background-color: #fff;
  box-shadow: 0px 0px 4px #00000027;
  transition: 0.3s;
}

.social-button:hover {
  background-color: #f2f2f2;
  box-shadow: 0px 0px 6px 3px #00000027;
}

.social-buttons svg {
  transition: 0.3s;
  height: 20px;
}

.facebook {
  background-color: #3b5998;
}

.facebook svg {
  fill: #f2f2f2;
}

.facebook:hover svg {
  fill: #3b5998;
}

.github {
  background-color: #333;
}

.github svg {
  width: 25px;
  height: 25px;
  fill: #f2f2f2;
}

.github:hover svg {
  fill: #333;
}

.linkedin {
  background-color: #0077b5;
}

.linkedin svg {
  fill: #f2f2f2;
}

.linkedin:hover svg {
  fill: #0077b5;
}

.instagram {
  background-color: #c13584;
}

.instagram svg {
  fill: #f2f2f2;
}

.instagram:hover svg {
  fill: #c13584;
}

</style>


================================================
FILE: Cards/aadium_soft-firefox-58.html
================================================
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <div class="profile-image">
        <svg viewBox="0 0 122.88 122.88" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" class="pfp"><g><path d="M61.44,0c8.32,0,16.25,1.66,23.5,4.66l0.11,0.05c7.47,3.11,14.2,7.66,19.83,13.3l0,0c5.66,5.65,10.22,12.42,13.34,19.95 c3.01,7.24,4.66,15.18,4.66,23.49c0,8.32-1.66,16.25-4.66,23.5l-0.05,0.11c-3.12,7.47-7.66,14.2-13.3,19.83l0,0 c-5.65,5.66-12.42,10.22-19.95,13.34c-7.24,3.01-15.18,4.66-23.49,4.66c-8.31,0-16.25-1.66-23.5-4.66l-0.11-0.05 c-7.47-3.11-14.2-7.66-19.83-13.29L18,104.87C12.34,99.21,7.78,92.45,4.66,84.94C1.66,77.69,0,69.76,0,61.44s1.66-16.25,4.66-23.5 l0.05-0.11c3.11-7.47,7.66-14.2,13.29-19.83L18.01,18c5.66-5.66,12.42-10.22,19.94-13.34C45.19,1.66,53.12,0,61.44,0L61.44,0z M16.99,94.47l0.24-0.14c5.9-3.29,21.26-4.38,27.64-8.83c0.47-0.7,0.97-1.72,1.46-2.83c0.73-1.67,1.4-3.5,1.82-4.74 c-1.78-2.1-3.31-4.47-4.77-6.8l-4.83-7.69c-1.76-2.64-2.68-5.04-2.74-7.02c-0.03-0.93,0.13-1.77,0.48-2.52 c0.36-0.78,0.91-1.43,1.66-1.93c0.35-0.24,0.74-0.44,1.17-0.59c-0.32-4.17-0.43-9.42-0.23-13.82c0.1-1.04,0.31-2.09,0.59-3.13 c1.24-4.41,4.33-7.96,8.16-10.4c2.11-1.35,4.43-2.36,6.84-3.04c1.54-0.44-1.31-5.34,0.28-5.51c7.67-0.79,20.08,6.22,25.44,12.01 c2.68,2.9,4.37,6.75,4.73,11.84l-0.3,12.54l0,0c1.34,0.41,2.2,1.26,2.54,2.63c0.39,1.53-0.03,3.67-1.33,6.6l0,0 c-0.02,0.05-0.05,0.11-0.08,0.16l-5.51,9.07c-2.02,3.33-4.08,6.68-6.75,9.31C73.75,80,74,80.35,74.24,80.7 c1.09,1.6,2.19,3.2,3.6,4.63c0.05,0.05,0.09,0.1,0.12,0.15c6.34,4.48,21.77,5.57,27.69,8.87l0.24,0.14 c6.87-9.22,10.93-20.65,10.93-33.03c0-15.29-6.2-29.14-16.22-39.15c-10-10.03-23.85-16.23-39.14-16.23 c-15.29,0-29.14,6.2-39.15,16.22C12.27,32.3,6.07,46.15,6.07,61.44C6.07,73.82,10.13,85.25,16.99,94.47L16.99,94.47L16.99,94.47z"></path></g></svg>
        <div class="name">
          Ethan Johnson
        </div>
      </div>
    </div>
    <div class="flip-card-back">
      <div class="Description">
        <p class="description">
          Hello, I am a software engineer with over 5 years of experience in web development. I specialize in building scalable, high-performance web applications using modern web technologies such as React, Angular, and Node.js.
        </p>
        <div class="socialbar">
          <a id="github" href="#"><svg viewBox="0 0 16 16" class="bi bi-github" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
      </svg></a>

          <a id="instagram" href="#"><svg viewBox="0 0 16 16" class="bi bi-instagram" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
        <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
      </svg></a>

          <a id="facebook" href="#"><svg viewBox="0 0 16 16" class="bi bi-facebook" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
        <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path>
      </svg></a>

          <a id="twitter" href="#"><svg viewBox="0 0 16 16" class="bi bi-twitter" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
      </svg></a>
          </div>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by aadium - Tags: profile, card, flip, violet */
.flip-card {
  background-color: transparent;
  width: 245px;
  height: 270px;
  perspective: 1000px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 5px;
  border-radius: 2em;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #240d29;
  border: 4px solid #c143da;
}

.profile-image {
  background-color: transparent;
  border: none;
  margin-top: 15px;
  border-radius: 5em;
  width: 120px;
  height: 120px;
  margin-left: 50px;
}

.pfp {
  border-radius: 35em;
  fill: #c143da;
}

.name {
  margin-top: 15px;
  font-size: 27px;
  color: #c143da;
  font-weight: bold;
}

.flip-card-back {
  background-color: #240d29;
  border: 4px solid #c143da;
  transform: rotateY(180deg);
  padding: 11px;
}

.description {
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 1px;
  color: white
}

.socialbar {
  background-color: transparent;
  border-radius: 3em;
  width: 90%;
  padding: 14px;
  margin-top: 11px;
  margin-left: 10px;
  word-spacing: 24px;
  color: white;
}

.socialbar svg {
  transition: 0.4s;
  width: 20px;
  height: 20px;
  color: #c143da
}

.socialbar svg:hover {
  color: white;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

</style>


================================================
FILE: Cards/aadium_swift-rat-96.html
================================================
<div class="card">
  <div class="image">
		<svg xml:space="preserve" viewBox="0 0 456 456" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1">
		<g>
			<path d="M8,230.627v56h66.918C69.232,254.838,41.4,230.627,8,230.627z" style="fill:#ac646b;"></path>
			<path d="M83.044,286.627H448v-2.542c0-7.779-5.595-14.431-13.259-15.763L264,238.627l-15.181-15.181
				c-0.228,0.227-0.476,0.438-0.764,0.611l-24.061,14.437c0.001,0.045,0.007,0.089,0.007,0.134c0,4.418-3.582,8-8,8s-8-3.582-8-8
				s3.582-8,8-8c1.41,0,2.733,0.368,3.883,1.008l23.203-13.922l-10.336-10.336c-0.275,0.323-0.592,0.617-0.976,0.848l-23.78,14.269
				c0.001,0.045,0.007,0.088,0.007,0.134c0,4.418-3.582,8-8,8s-8-3.582-8-8s3.582-8,8-8c1.41,0,2.732,0.368,3.883,1.008l23.203-13.922
				l-10.231-10.231c-0.193,0.175-0.404,0.334-0.636,0.473l-24.226,14.538c0.001,0.045,0.007,0.089,0.007,0.134c0,4.418-3.582,8-8,8
				s-8-3.582-8-8s3.582-8,8-8c1.41,0,2.732,0.367,3.882,1.008l23.202-13.924l-10.334-10.334c-0.275,0.323-0.592,0.617-0.976,0.848
				l-23.78,14.269c0.001,0.045,0.007,0.088,0.007,0.134c0,4.418-3.582,8-8,8s-8-3.582-8-8s3.582-8,8-8c1.41,0,2.732,0.368,3.883,1.008
				l23.203-13.922L176,150.627l-19.314-19.314c-2.588-2.588-6.784-2.588-9.373,0c-6.248,6.248-6.248,16.379,0,22.627l2.84,2.84
				L20.294,187.7C13.087,189.416,8,195.856,8,203.265v19.362C45.823,222.627,77.272,250.404,83.044,286.627z" style="fill:#ac646b;"></path>
			<path d="M448,286.627H83.044c-5.772-36.224-37.221-64-75.044-64v8c33.4,0,61.232,24.21,66.918,56H8
				c-4.418,0-8,3.582-8,8v24c0,4.418,3.582,8,8,8h8h104h16c4.418,0,8-3.582,8-8c0-4.222,3.74-7.466,7.92-6.869l81.567,11.652
				c14.99,2.142,30.113,3.216,45.255,3.216H448c4.418,0,8-3.582,8-8v-24C456,290.209,452.418,286.627,448,286.627z" style="fill:#55323C;"></path>
			<path d="M168,194.627c-1.352,0-2.68-0.691-3.43-1.941c-1.141-1.895-0.523-4.352,1.375-5.488l5.937-3.563
				c-1.15-0.64-2.473-1.008-3.883-1.008c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8c0-0.045-0.006-0.089-0.007-0.134l-5.938,3.563
				C169.414,194.444,168.703,194.627,168,194.627z" style="fill:#7D5050;"></path>
			<path d="M184,210.627c-1.352,0-2.68-0.691-3.43-1.941c-1.141-1.895-0.523-4.352,1.375-5.488l5.937-3.563
				c-1.15-0.64-2.473-1.008-3.882-1.008c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8c0-0.045-0.006-0.089-0.007-0.134l-5.938,3.564
				C185.414,210.444,184.703,210.627,184,210.627z" style="fill:#7D5050;"></path>
			<path d="M200,226.627c-1.352,0-2.68-0.691-3.43-1.941c-1.141-1.895-0.523-4.352,1.375-5.488l5.937-3.563
				c-1.15-0.64-2.473-1.008-3.883-1.008c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8c0-0.045-0.006-0.089-0.007-0.134l-5.938,3.563
				C201.414,226.444,200.703,226.627,200,226.627z" style="fill:#7D5050;"></path>
			<path d="M216,242.627c-1.352,0-2.68-0.691-3.43-1.941c-1.141-1.895-0.523-4.352,1.375-5.488l5.938-3.563
				c-1.15-0.64-2.473-1.008-3.883-1.008c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8c0-0.045-0.006-0.089-0.007-0.134l-5.939,3.563
				C217.414,242.444,216.703,242.627,216,242.627z" style="fill:#7D5050;"></path>
			<path d="M171.883,183.635l-5.937,3.563c-1.898,1.137-2.516,3.594-1.375,5.488
				c0.75,1.25,2.078,1.941,3.43,1.941c0.703,0,1.414-0.184,2.055-0.57l5.938-3.563l23.78-14.269c0.384-0.23,0.701-0.525,0.976-0.848
				c1.085-1.271,1.308-3.13,0.399-4.641c-1.133-1.895-3.609-2.492-5.484-1.371l-0.579,0.347L171.883,183.635z" style="fill:#55323C;"></path>
			<path d="M187.882,199.635l-5.937,3.563c-1.898,1.137-2.516,3.594-1.375,5.488
				c0.75,1.25,2.078,1.941,3.43,1.941c0.703,0,1.414-0.184,2.055-0.57l5.938-3.564l24.226-14.538c0.232-0.139,0.443-0.299,0.636-0.473
				c1.385-1.256,1.74-3.352,0.739-5.015c-1.133-1.902-3.609-2.492-5.484-1.371l-1.025,0.615L187.882,199.635z" style="fill:#55323C;"></path>
			<path d="M203.883,215.635l-5.937,3.563c-1.898,1.137-2.516,3.594-1.375,5.488
				c0.75,1.25,2.078,1.941,3.43,1.941c0.703,0,1.414-0.184,2.055-0.57l5.938-3.563l23.78-14.269c0.384-0.23,0.701-0.525,0.976-0.848
				c1.085-1.271,1.308-3.13,0.399-4.641c-1.141-1.898-3.602-2.496-5.484-1.371l-0.579,0.347L203.883,215.635z" style="fill:#55323C;"></path>
			<path d="M219.883,231.635l-5.938,3.563c-1.898,1.137-2.516,3.594-1.375,5.488
				c0.75,1.25,2.078,1.941,3.43,1.941c0.703,0,1.414-0.184,2.055-0.57l5.939-3.563l24.061-14.437c0.288-0.173,0.537-0.384,0.764-0.611
				c1.271-1.267,1.578-3.271,0.611-4.877c-1.141-1.898-3.609-2.496-5.484-1.371l-0.859,0.516L219.883,231.635z" style="fill:#55323C;"></path>
		</g>
		</svg>
  </div>
	<div class="productTitle">
		Nimbus Formale
	</div>
	<div class="cost">
		$60.99
	</div>
	<div class="radio-inputs">
  <label class="radio">
    <input checked="" name="radio" type="radio">
    <span class="name">B</span>
  </label>
  <label class="radio">
    <input name="radio" type="radio">
    <span class="name">D</span>
  </label>
      
  <label class="radio">
    <input name="radio" type="radio">
    <span class="name">2E</span>
  </label>
  
  <label class="radio">
    <input name="radio" type="radio">
    <span class="name">4E</span>
  </label>
</div>
	<button class="addtocart">Add to Cart</button>
</div>
<style>
/* From Uiverse.io by aadium - Tags: card, shoe, ecommerce */
.card {
  width: 230px;
  height: 340px;
  background: #131313;
  border: 2px solid #bb6c74;
  border-radius: 40px;
}

.image {
  background-color: #1f1f1fa3;
  border-radius: 2.5em 2.5em 0em 0em;
  width: 100%;
  height: 37%;
  padding: 2px;
}

.image svg {
  width: 75%;
  margin-top: -25px;
  margin-left: 30px;
}

.productTitle {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: #bb6c74;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin-top: 10px;
}

.cost {
  text-align: center;
  margin-top: 10px;
  font-weight: bold;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.radio-inputs {
  position: relative;
  margin-top: 20px;
  margin-left: 13px;
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.5rem;
  background-color: #1c1c1c;
  box-sizing: border-box;
  box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
  padding: 0.25rem;
  width: 200px;
  font-size: 14px;
}

.radio-inputs .radio {
  flex: 1 1 auto;
  text-align: center;
}

.radio-inputs .radio input {
  display: none;
}

.radio-inputs .radio .name {
  display: flex;
  font-weight: 600;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: none;
  padding: .5rem 0;
  color: #bb6c74;
  transition: all .15s ease-in-out;
}

.radio-inputs .radio input:checked + .name {
  background-color: #000;
  color: #fff;
  font-weight: 600;
}

.addtocart {
  width: 100%;
  margin-top: 19px;
  padding: 15px;
  border: none;
  border-top: 2px solid #bb6c74;
  background-color: #131313;
  color: #bb6c74;
  font-weight: bold;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  border-radius: 0px 0px 38px 38px;
  transition: 0.2s;
}

.addtocart:hover {
  background-color: #bb6c74;
  border-top: 2px solid transparent;
  color: #111111;
}
</style>


================================================
FILE: Cards/aadium_unlucky-seahorse-76.html
================================================
<div class="card">
  <button class="button Explore"><svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" class="svg">
  <g id="Layer_2" data-name="Layer 2">
    <g id="invisible_box" data-name="invisible box">
      <rect width="48" height="48" fill="none"></rect>
    </g>
    <g id="icons_Q2" data-name="icons Q2">
      <path d="M24,2A22,22,0,1,0,46,24,21.9,21.9,0,0,0,24,2ZM34.7,14.7,28,28,14.7,34.7a1.1,1.1,0,0,1-1.4-1.4L20,20l13.3-6.7A1.1,1.1,0,0,1,34.7,14.7ZM24,22a2,2,0,1,0,2,2A2,2,0,0,0,24,22Z"></path>
      <path d="M24,22a2,2,0,1,0,2,2A2,2,0,0,0,24,22Zm0,0a2,2,0,1,0,2,2A2,2,0,0,0,24,22Z"></path>
    </g>
  </g>
</svg>Explore</button>

  <button class="button Post"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="svg">
<path clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7Z"></path>
</svg>Post</button>
  
  <button class="button Chat"><svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg">
        <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -999.000000)">
            <g id="icons" transform="translate(56.000000, 160.000000)">
                <path d="M97.1784026,840.884344 C92.8882915,837.134592 86.2359857,839.256228 84.7592414,844.817545 C84.139128,847.151543 84.7373784,848.235292 84.7373784,849.987037 C84.7373784,851.787636 84,854.395812 84,854.395812 C84,854.714855 84.2832249,855.025921 84.6320386,854.935194 C85.8792217,854.609172 87.8627895,853.964107 90.2349218,854.608175 C98.2119249,856.770688 103.330841,846.261214 97.1784026,840.884344 M103.447113,859 C103.395437,859 103.341773,858.993021 103.287115,858.979063 C96.9806421,857.395812 97.4039887,859.174477 93.8999507,858.237288 C92.8395967,857.954137 91.8746446,857.443669 91.0418642,856.781655 C97.4059763,857.561316 102.710728,852.016948 101.771614,845.487535 C102.732591,846.487535 103.438169,847.72582 103.7363,849.11266 C104.584981,853.048852 102.430484,852.38285 103.983749,858.364905 C104.075176,858.714855 103.765119,859 103.447113,859" id="messages_chat-[#1557]">

</path>
            </g>
        </g>
    
</svg>Chat</button>
</div>
<style>
/* From Uiverse.io by aadium - Tags: neumorphism, card */
.card {
  background-color: #e4e4e4;
  border-radius: 15px;
  box-shadow: 10px 10px 20px #c4c4c4,
              -10px -10px 20px #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 4px;
}

.button {
  background-color: #e4e4e4;
  border: none;
  border-radius: 10px;
  box-shadow: inset 5px 5px 5px #c4c4c4,
              inset -5px -5px 5px #ffffff;
  color: #333;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13px;
  font-weight: bold;
  margin: 3px;
  padding: 10px;
  text-transform: uppercase;
}

.button:hover {
  box-shadow: none;
}

.svg {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.card .Explore {
  color: #3035cb;
}

.card .Explore:hover {
  background-color: #3035cb;
  color: #e4e4e4;
}

.card .Explore svg {
  fill: #3035cb;
}

.card .Explore:hover svg {
  fill: #e4e4e4;
}

.card .Post {
  color: #333;
}

.card .Post:hover {
  background-color: #333;
  color: #e4e4e4;
}

.card .Post svg {
  fill: #333;
}

.card .Post:hover svg {
  fill: #e4e4e4;
}

.card .Chat {
  color: #b82323;
}

.card .Chat:hover {
  background-color: #b82323;
  color: #e4e4e4;
}

.card .Chat svg {
  fill: #b82323;
}

.card .Chat:hover svg {
  fill: #e4e4e4;
}

</style>


================================================
FILE: Cards/aadium_weak-goose-59.html
================================================
<div class="post-card">
  <textarea placeholder="What's on your mind?"></textarea>
  <hr>
  <div class="button-row" id="first">
    <button class="upload">
      Upload
    </button>
    <button class="live-video">
      Live Video
    </button>
    <button class="life-event">
      Life Event
    </button>
  </div>
  <div class="button-row" id="second">
    <button class="people">
      People
    </button>
    <button class="location">
      Location
    </button>
    <button class="feeling">
      Feeling
    </button>
  </div>
  <button class="post">Post</button>
</div>
<style>
/* From Uiverse.io by aadium - Tags: card */
.post-card {
  width: 260px;
  height: 340px;
  background: #1f1f1f;
  box-shadow: 10px 10px 20px #0c0c0c, 
              -10px -10px 20px #333333;
  padding: 10px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.post-card textarea {
  resize: none;
  width: 100%;
  height: 40%;
  padding: 5px;
  font-family: Sans-serif;
  font-size: 16px;
  background-color: transparent;
  border: none;
  color: #fff;
}

hr {
  border: 1px solid #464646;
  width: 100%;
  border-radius: 10em;
}

.button-row {
  margin-top: 7px;
  margin-bottom: 3px;
}

.button-row button {
  border-radius: 10px;
  border: none;
  width: 77px;
  height: 58px;
  font-family: Sans-serif;
  color: #fff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease-in-out;
}

.button-row button:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25);
}

.upload {
  font-size: 14px;
  background: linear-gradient(180deg, #cecb00 0%, #ef4949 100%);
}

.feeling {
  font-size: 14px;
  background: linear-gradient(180deg, #31c300 0%, #ab7811 100%);
}

.life-event {
  font-size: 13.7px;
  background: linear-gradient(180deg, #ff1024 0%, #ffb34a 100%);
}

.people {
  font-size: 13.5px;
  background: linear-gradient(180deg, #0095b7 0%, #5012ba 100%);
}

.location {
  font-size: 14px;
  background: linear-gradient(180deg, #c329c9 0%, #2b5dff 100%);
}

.live-video {
  font-size: 13.8px;
  background: linear-gradient(180deg, #c800ff 0%, #ff076a 51%, #ff6c6c 100%);
}

.post {
  width: 100%;
  padding: 10px;
  margin-top: 7px;
  border: none;
  border-radius: 11px;
  font-size: 18px;
  font-family: Sans-serif;
  color: #fff;
  background-size: 200% 100%;
  background-image: linear-gradient(145deg, #ff00e1, #0000ff, #00d9ff);
  transition: 0.3s ease-out;
}

.post:hover {
  background-position: 99%;
}
</style>


================================================
FILE: Cards/aadium_wet-bird-34.html
================================================
<div class="login-card">
  <button class="normal-signin">Sign in</button>
  <div class="instruction-text">Don't have an Account?</div>
  <button class="create-account">Create Account</button>
  <div class="instruction-text">Or sign in with</div>
  <div class="alternate-login">
    <button class="m-sign">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4H11.5V11.5H4V4ZM12.5 4H20V11.5H12.5V4ZM4 12.5H11.5V20H4V12.5ZM12.5 12.5H20V20H12.5V12.5Z"></path>
</svg>
    </button>
    <button class="g-sign">
      <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
        <g id="Dribbble-Light-Preview" transform="translate(-300.000000, -7399.000000)">
            <g id="icons" transform="translate(56.000000, 160.000000)">
                <path d="M263.821537,7247.00386 L254.211298,7247.00386 C254.211298,7248.0033 254.211298,7250.00218 254.205172,7251.00161 L259.774046,7251.00161 C259.560644,7252.00105 258.804036,7253.40026 257.734984,7254.10487 C257.733963,7254.10387 257.732942,7254.11086 257.7309,7254.10986 C256.309581,7255.04834 254.43389,7255.26122 253.041161,7254.98137 C250.85813,7254.54762 249.130492,7252.96451 248.429023,7250.95364 C248.433107,7250.95064 248.43617,7250.92266 248.439233,7250.92066 C248.000176,7249.67336 248.000176,7248.0033 248.439233,7247.00386 L248.438212,7247.00386 C249.003881,7245.1669 250.783592,7243.49084 252.969687,7243.0321 C254.727956,7242.65931 256.71188,7243.06308 258.170978,7244.42831 C258.36498,7244.23842 260.856372,7241.80579 261.043226,7241.6079 C256.0584,7237.09344 248.076756,7238.68155 245.090149,7244.51127 L245.089128,7244.51127 C245.089128,7244.51127 245.090149,7244.51127 245.084023,7244.52226 L245.084023,7244.52226 C243.606545,7247.38565 243.667809,7250.75975 245.094233,7253.48622 C245.090149,7253.48921 245.087086,7253.49121 245.084023,7253.49421 C246.376687,7256.0028 248.729215,7257.92672 251.563684,7258.6593 C254.574796,7259.44886 258.406843,7258.90916 260.973794,7256.58747 C260.974815,7256.58847 260.975836,7256.58947 260.976857,7256.59047 C263.15172,7254.63157 264.505648,7251.29445 263.821537,7247.00386" id="google-[#178]">

</path>
            </g>
        </g>
    </g>
</svg>
    </button>
    <button class="a-sign">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-145 129 220 256" xml:space="preserve">
<path d="M75,316.8c-6,13.3-8.9,19.3-16.6,31c-10.8,16.4-26,36.9-44.9,37.1c-16.8,0.2-21.1-10.9-43.8-10.8
	c-22.7,0.1-27.5,11-44.3,10.8c-18.9-0.2-33.3-18.7-44.1-35.1c-30.2-46-33.4-99.9-14.7-128.6c13.2-20.4,34.1-32.3,53.8-32.3
	c20,0,32.5,11,49.1,11c16,0,25.8-11,48.9-11c17.5,0,36,9.5,49.2,26C24.3,238.6,31.3,300.3,75,316.8L75,316.8z M0.8,170.6
	c8.4-10.8,14.8-26,12.5-41.6c-13.7,0.9-29.8,9.7-39.1,21.1c-8.5,10.3-15.5,25.6-12.8,40.5C-23.7,191.1-8.2,182.1,0.8,170.6
	L0.8,170.6z"></path>
</svg>
    </button>
  </div>
</div>
<style>
/* From Uiverse.io by aadium - Tags: material design, login, card */
.login-card {
  width: 250px;
  height: 240px;
  background-color: #f2f2f2;
  border-radius: 25px;
  box-shadow: 2px 2px 15px rgb(193, 193, 193);
}

.instruction-text {
  color: rgb(150, 150, 150);
  text-align: center;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: px;
}

.login-card button {
  cursor: pointer;
}

.normal-signin {
  padding: 10px;
  font-size: 17px;
  width: 70%;
  margin-top: 25px;
  margin-left: 37px;
  border: 2px solid transparent;
  border-radius: 5em;
  background-color: #1b77da;
  color: #f2f2f2;
  font-weight: bold;
  font-family: sans-serif;
  transition: 0.2s;
}

.normal-signin:hover {
  background-color: transparent;
  color: #1b77da;
  border: 2px solid #1b77da;
}

.create-account {
  padding: 10px;
  font-size: 17px;
  width: 70%;
  margin-top: 5px;
  margin-left: 37px;
  margin-bottom: 5px;
  border: 2px solid transparent;
  border-radius: 5em;
  background-color: #e8e8e8;
  color: #1b77da;
  font-weight: bold;
  font-family: sans-serif;
  transition: 0.2s;
}

.create-account:hover {
  background-color: transparent;
  color: #1b77da;
  border: 2px solid #1b77da;
}

.alternate-login {
  margin-left: 42px;
  margin-top: 5px;
  background-color: #f2f2f2;
  border-radius: 5em;
}

.m-sign {
  padding: 7px;
  font-size: 14px;
  height: 40px;
  width: 40px;
  border-radius: 5em;
  margin-top: 5px;
  background-color: #7FBA00;
  border: 2px solid transparent;
  transition: 0.2s;
}

.m-sign svg {
  width: 27px;
  height: 27px;
  margin-top: -2px;
  margin-left: -2px;
  fill: #f2f2f2;
}

.m-sign:hover {
  background-color: transparent;
  border: 2px solid #7FBA00;
}

.m-sign:hover svg {
  fill: #7FBA00;
}

.g-sign {
  padding: 7px;
  font-size: 14px;
  height: 40px;
  width: 40px;
  border-radius: 5em;
  margin-top: 5px;
  margin-left: 15px;
  background-color: #DB4437;
  border: 2px solid transparent;
  transition: 0.2s;
}

.g-sign svg {
  width: 23px;
  height: 25px;
  margin-top: -1.5px;
  fill: #f2f2f2;
}

.g-sign:hover {
  background-color: transparent;
  border: 2px solid #DB4437;
}

.g-sign:hover svg {
  fill: #DB4437;
}

.a-sign {
  padding: 7px;
  font-size: 14px;
  height: 40px;
  width: 40px;
  border-radius: 5em;
  margin-top: 5px;
  margin-left: 15px;
  background-color: #000000;
  border: 2px solid transparent;
  transition: 0.2s;
}

.a-sign svg {
  width: 25px;
  height: 25px;
  margin-top: -1px;
  margin-left: -1px;
  fill: #f2f2f2;
}

.a-sign:hover {
  background-color: transparent;
  border: 2px solid #000000;
}

.a-sign:hover svg {
  fill: #000000;
}
</style>


================================================
FILE: Cards/abdinejad_tall-stingray-83.html
================================================
<div class="card-container">
  <div class="card-box">
    <div class="card-head">
      <div class="card-chip">
        <svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M5.813 2C2.647 2 0 4.648 0 7.813v10.375C0 21.352 2.648 24 5.813 24h14.375C23.352 24 26 21.352 26 18.187V7.813C26 4.649 23.352 2 20.187 2H5.813zm0 2h14.375C22.223 4 24 5.777 24 7.813V9h-6c-.555 0-1-.445-1-1c0-.555.445-1 1-1a1 1 0 1 0 0-2c-1.645 0-3 1.355-3 3c0 1.292.844 2.394 2 2.813v4.968c-1.198.814-2 2.18-2 3.719c0 .923.293 1.781.781 2.5H10.22a4.439 4.439 0 0 0 .78-2.5c0-1.538-.802-2.905-2-3.719v-4.969c1.156-.418 2-1.52 2-2.812c0-1.645-1.355-3-3-3H6a1 1 0 0 0-.094 0a1.001 1.001 0 0 0-.093 0A1.004 1.004 0 0 0 6 7h2c.555 0 1 .445 1 1c0 .555-.445 1-1 1H2V7.812C2 5.777 3.777 4 5.813 4zM2 11h5v4H2v-4zm17 0h5v4h-5v-4zM2 17h4.5C7.839 17 9 18.161 9 19.5S7.839 22 6.5 22h-.688C3.777 22 2 20.223 2 18.187V17zm17.5 0H24v1.188C24 20.223 22.223 22 20.187 22H19.5c-1.339 0-2.5-1.161-2.5-2.5s1.161-2.5 2.5-2.5z"
            fill="currentcolor"
          ></path>
        </svg>
      </div>
      <div class="card-logo">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <g fill-rule="evenodd" fill="none">
            <circle r="7" fill="#ea001b" cy="12" cx="7"></circle>
            <circle
              r="7"
              fill-opacity=".8"
              fill="#ffa200"
              cy="12"
              cx="17"
            ></circle>
          </g>
        </svg>
      </div>
    </div>
    <div class="card-number-row">
      <span>6037 1234 4567 8910</span>
    </div>
    <div class="card-details">
      <div class="card-holder-col">
        <span class="card-holder-title">CARD HOLDER</span>
        <span class="card-holder-name">ALI ABDI</span>
      </div>
      <div class="card-date-col">
        <span class="card-date-title">VALID THRU</span>
        <span class="card-date-sub">06/26</span>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by abdinejad  - Tags: minimalist, card, box, hover effect, css */
.card-container,
.card-box,
.card-head,
.card-number-row,
.card-details,
.card-holder-col,
.card-date-col {
  display: flex;
}
.card-container {
  align-items: center;
  justify-content: center;
}
.card-box {
  width: 340px;
  min-height: 160px;
  background: #fff;
  box-shadow: 0px 0px 15px -2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  margin: 16px;
  padding: 1.5em;
  flex-direction: column;
  justify-content: space-around;
  gap: 1.2em;
}
.card-head {
  justify-content: space-between;
  align-items: center;
}
.card-chip svg {
  width: 32px;
  height: 32px;
}
.card-chip svg path {
  fill: #636363;
}
.card-logo svg {
  width: 48px;
  height: 48px;
}
.card-number-row {
  justify-content: center;
  word-spacing: 1em;
  font-size: 1.3em;
  font-weight: 600;
}
.card-box:hover .card-number-row {
  font-size: 1.32em;
}
.card-details {
  justify-content: space-between;
  text-transform: uppercase;
}
.card-holder-col {
  flex-direction: column;
  gap: 2px;
}
.card-holder-title,
.card-date-title {
  color: #bdbdbd;
  font-size: 0.7em;
}
.card-holder-name {
  font-size: 1.1em;
  font-weight: 600;
}
.card-date-col {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

</style>
    

================================================
FILE: Cards/abhishek-06-singh_horrible-tiger-98.html
================================================
<!-- From Uiverse.io by abhishek-06-singh  - Tags: card, like, light, github, image, shadow, theme-switch, about me -->
<div class="inset-0 z-10 w-screen overflow-y-auto">
  <div
    class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
  >
    <div
      class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
    >
      <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
        <div class="sm:flex sm:items-start">
          <div
            class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
          >
            <svg
              aria-hidden="true"
              stroke="currentColor"
              stroke-width="1.5"
              viewBox="0 0 24 24"
              fill="none"
              class="h-6 w-6 text-red-600"
            >
              <path
                d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
                stroke-linejoin="round"
                stroke-linecap="round"
              ></path>
            </svg>
          </div>
          <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
            <h3
              id="modal-title"
              class="text-base font-semibold leading-6 text-gray-900"
            >
              Deactivate account
            </h3>
            <div class="mt-2">
              <p class="text-sm text-gray-500">
                Are you sure you want to deactivate your account? All of your
                data will be permanently removed. This action cannot be undone.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
        <button
          class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
          type="button"
        >
          Deactivate
        </button>
        <button
          class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
          type="button"
        >
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/abhusha08_happy-cougar-51.html
================================================
<div class="card">
  <button class="red-btn">OPS TEAM</button>

  <button class="blue-btn">START-UP</button>
</div>

<style>
/* From Uiverse.io by abhusha08  - Tags: flashy, gradient, button, card, hover, hover effect, buttons */
.card {
  display: flex;
  flex-direction: column;
  background: lightgrey;
}

.red-btn {
  width: 300px;
  height: 150px;
  margin: 15px;
  background: rgb(255, 0, 0);
  background: rgb(131, 58, 180);
  background: linear-gradient(
    90deg,
    rgba(131, 58, 180, 1) 0%,
    rgba(253, 29, 29, 1) 50%,
    rgba(252, 176, 69, 1) 100%
  );
  color: white;
  border: none;
  border-radius: 0.625em;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.blue-btn {
  width: 300px;
  height: 150px;
  margin: 15px;
  background: rgb(0, 8, 144);
  background: linear-gradient(
    90deg,
    rgba(0, 8, 144, 1) 0%,
    rgba(16, 0, 255, 1) 22%,
    rgba(86, 255, 247, 1) 100%
  );
  color: white;
  border: none;
  border-radius: 0.625em;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

button:hover {
  color: rgb(0, 0, 0);
}

button:after {
  content: "";
  background: white;
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.5s;
}

button:hover:after {
  transform: skewX(-45deg) scale(1, 1);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

</style>
    

================================================
FILE: Cards/aboalsim114_quiet-hound-47.html
================================================
<div class="card">
  <div class="cardD"></div>

<svg version="1.1" viewBox="0 0 170.87 425.63" id="svg2" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  
  <g transform="translate(-253.99 -223.31)" id="layer1">
    <path d="m299.68 647.25c-5.4033-1.0324-11.766-2.79-14.14-3.9057-2.3735-1.1157-5.5417-2.3363-7.0404-2.7124-1.4986-0.37614-4.9233-2.9056-7.6103-5.6211-4.1017-4.1451-4.8855-5.539-4.8855-8.6885 0-3.9121 4.3285-17.568 6.3404-20.004 0.6378-0.77204 0.9995-1.447 0.8037-1.5-0.9111-0.24659 2.4186-9.7691 5.7903-16.559 3.9772-8.0095 5.7222-13.638 9.0833-29.295 1.152-5.3667 3.4177-13.874 5.0349-18.906 2.445-7.6071 2.776-9.7588 1.9649-12.771-1.9788-7.3486-3.902-19.927-5.0938-33.315-0.6732-7.5625-1.5819-13.75-2.0193-13.75s-0.7301-2.2352-0.6504-4.9672c0.08-2.732-0.1698-5.282-0.5545-5.6667-0.3847-0.38471-0.6995-2.3735-0.6995-4.4195s-1.1269-7.4835-2.5042-12.083c-1.3774-4.5998-3.221-11.063-4.0969-14.363-0.876-3.3-1.9991-6.4275-2.4958-6.95s-0.9031-3.5744-0.9031-6.7821-0.675-7.4476-1.5-9.4221-1.5-5.055-1.5-6.8454c0-1.7905-0.675-3.8156-1.5-4.5003-0.825-0.68469-1.5-2.2597-1.5-3.5s-0.7063-2.8413-1.5695-3.5577c-0.8633-0.71642-1.3554-2.1215-1.0936-3.1224 0.2617-1.0009 0.1745-1.8199-0.1939-1.8199-1.3812 0-3.3619-10.871-3.8718-21.25-0.2904-5.9125-0.9203-10.75-1.3997-10.75-0.4793 0-0.8715-0.67119-0.8715-1.4915 0-0.82034-0.9-2.0536-2-2.7405-1.1-0.68696-2-1.7676-2-2.4015 0-0.63385-0.675-1.4115-1.5-1.7281-2.0156-0.77345-2.0156-13.112 0-16.638 1.0908-1.9081 1.4375-6.8069 1.4646-20.691 0.02-10.094 0.4494-18.447 0.9654-18.766 0.5115-0.31613 1.219-3.1552 1.5721-6.309 1.1935-10.658 3.8493-17.363 11.333-28.61 6.9154-10.394 25.505-28.003 32.167-30.472 1.9238-0.71293 5.7478-2.1401 8.4978-3.1715 7.6838-2.8818 19.89-4.2119 35.137-3.8287 10.729 0.26969 14.542 0.73305 16.863 2.0497 1.65 0.9357 6.15 2.6608 10 3.8336 10.733 3.2695 12.446 4.2054 21.781 11.898 9.4288 7.7707 13.662 13.133 19.483 24.68 0.5232 1.0379 1.7514 3.4096 2.7294 5.2706 3.5072 6.6733 6.475 21.839 7.1843 36.713 0.4365 9.1532 0.1636 12.569-1.5579 19.5-2.2566 9.0852-4.9708 26.616-7.6876 49.653-0.3405 2.8875-0.9911 5.25-1.4458 5.25s-1.1394 1.4625-1.5216 3.25-1.0362 3.7-1.4533 4.25-1.0669 3.1321-1.444 5.738-1.3301 5.3825-2.1178 6.1702c-1.0681 1.068-1.4161 4.07-1.3688 11.808 0.057 9.3217-0.9871 14.942-3.1177 16.784-3.4755 3.0048-4.3218 8-1.3554 8 1.0869 0 1.3861 1.9226 1.3617 8.75-0.026 7.2324-0.4578 9.6172-2.4908 13.75-1.3528 2.75-2.4637 5.4742-2.4688 6.0537-0.011 1.3166-4.9803 11.358-6.6401 13.419-0.6766 0.84009-2.3999 2.9584-3.8295 4.7072l-2.5992 3.1798-0.4333 23.091c-0.319 17.001-0.8086 23.943-1.8563 26.32-0.7826 1.7758-2.423 6.0251-3.6453 9.4427-2.005 5.6066-2.1029 6.7305-1.0013 11.5 0.6716 2.9074 1.8453 6.2828 2.6084 7.501s1.4034 3.2432 1.4229 4.5c0.019 1.2568 0.6786 3.4102 1.4646 4.7852s1.4451 3.8936 1.4646 5.597c0.019 1.7033 0.9354 4.1347 2.0354 5.403s2 2.9035 2 3.6337 1.8088 5.1349 4.0196 9.7882 3.9303 8.8245 3.8211 9.2694c-0.1092 0.44484 1.4884 4.2885 3.5502 8.5414 2.0617 4.2529 3.4227 8.2599 3.0244 8.9045-0.4526 0.73232-0.2912 0.90428 0.4302 0.45841 0.6702-0.41421 1.1545-0.10442 1.1545 0.7385 0 1.5543-2.4106 2.9221-3.4022 1.9304-0.3288-0.32877-0.5978-1.5183-0.5978-2.6433 0-1.7416-0.4397-1.5311-2.9594 1.4167-1.6276 1.9042-2.9776 3.1462-3 2.76-0.022-0.38624-1.2781 0.44656-2.7906 1.8507-4.035 3.7458-6.5876 4.8169-18.616 7.8108l-10.865 2.7046-32.635-0.43793c-31.382-0.42111-41.134-1.3259-41.134-3.8161 0-0.46584-0.6422-0.60054-1.4271-0.29934-2.369 0.90906-9.9977-3.093-14.961-7.8484-5.6561-5.4195-6.7639-4.7819-2.0474 1.1783 1.8894 2.3876 3.4352 3.9976 3.4352 3.5779 0-0.41975 0.67-0.20709 1.489 0.47257 0.8189 0.67967 1.1994 1.7043 0.8455 2.277-0.3763 0.60888-0.1586 0.74153 0.5243 0.31946 0.6423-0.39695 3.5827 0.38385 6.5342 1.7351 2.9516 1.3513 7.6706 2.7737 10.487 3.1611 2.8162 0.38732 5.1203 1.0394 5.1203 1.4491 0 1.0287 8.8417 1.4131 34 1.4779 23.337 0.0601 35.183-0.48485 36.058-1.659 0.3069-0.41166 3.2069-1.2382 6.4445-1.8366 7.4086-1.3696 20.632-7.9445 22.881-11.377 0.9375-1.4308 2.1348-2.3356 2.6606-2.0106 1.4481 0.89496 1.144 2.4728-0.4765 2.4728-0.788 0-1.7134 0.8845-2.0565 1.9656-0.3819 1.2033-3.6076 3.3724-8.3174 5.5929-17.247 8.1316-21.007 8.7678-53.694 9.0847-23.008 0.22303-28.453-0.0158-36.824-1.6154zm66.219-7.4465c3.5171-0.89401 6.6256-1.3944 6.908-1.112 0.2824 0.28239 1.0049 0.13717 1.6055-0.32271 0.6006-0.45989 3.342-1.4315 6.092-2.1592 5.7414-1.5192 12.101-5.5358 15.885-10.033 3.0214-3.5907 3.2524-5.5995 1.0119-8.7982-1.4777-2.1098-1.7319-2.1625-3.25-0.67459-3.532 3.4621-14.024 9.4018-17.738 10.042-2.1496 0.37038-6.1381 1.3072-8.8632 2.0819-2.7304 0.7762-6.434 1.131-8.25 0.79033-2.0633-0.38708-3.2952-0.21715-3.2952 0.45456 0 1.404-44.982 1.3662-46.706-0.0392-0.6634-0.54072-1.6461-0.71123-2.1838-0.37891-1.4124 0.87287-19.993-3.3268-23.037-5.207-1.4153-0.87415-3.8107-2.7166-5.3232-4.0943s-2.7662-2.0833-2.786-1.5679c-0.02 0.5154-1.0961-0.35925-2.3918-1.9437l-2.3559-2.8808-0.6876 3.1308c-0.3782 1.7219-1.1019 3.1308-1.6082 3.1308-2.5294 0-0.3055 4.0613 4.9232 8.9908 6.5315 6.1576 10.562 7.6814 29.326 11.085 13.434 2.437 52.401 2.1297 62.725-0.49469zm-6.8945-12.16c5.225-0.86057 10.4-1.6479 11.5-1.7496s2.45-0.45778 3-0.7913 2.0125-0.51823 3.25-0.41047 2.25-0.17886 2.25-0.63695c0-0.45808 0.3594-0.72038 0.7987-0.58288 1.611 0.50427 12.087-7.5613 13.139-10.116 0.871-2.1151 0.6708-3.7185-1.0158-8.1343-1.1553-3.025-2.5859-6.9625-3.1791-8.75-1.068-3.2181-2.7191-4.4108-2.7688-2-0.04 1.9597-9.4397 7.8453-14.186 8.8828-2.3587 0.51561-5.8635 1.7092-7.7885 2.6524-7.0363 3.4475-64 2.6842-64-0.85762 0-0.41344-1.8089-1.0573-4.0198-1.4308-2.2109-0.37353-4.6859-1.3452-5.5-2.1593s-1.4802-1.1924-1.4802-0.84066c0 0.35173-1.3553-0.32553-3.0118-1.505-1.6564-1.1795-2.7549-2.5602-2.4409-3.0681 0.3139-0.50794 0.068-0.92353-0.5473-0.92353-0.6149 0-0.9137-0.3375-0.664-0.75s-0.1737-1.3302-0.941-2.0394c-1.1454-1.0587-1.395-1.0268-1.395 0.17857 0 0.8074-0.6911 2.1591-1.5357 3.0037-0.8447 0.84464-1.5015 1.8893-1.4596 2.3214 0.1122 1.159-3.1334 9.5913-4.2304 10.991-0.6386 0.81466-0.085 2.3317 1.7079 4.6827 4.9805 6.5298 13.728 11.732 20.518 12.202 1.925 0.13324 6.875 0.90644 11 1.7182 10.569 2.08 40.669 2.1445 53 0.11352zm2.3937-23.723c4.8916-0.90658 9.6166-2.2995 10.5-3.0953 0.8835-0.79586 2.7313-1.7297 4.1063-2.0752 4.9974-1.2558 7.3009-3.9367 7.4041-8.6173 0.076-3.4532-0.2798-4.4244-1.7285-4.7171-1.0034-0.20269-2.6666 0.39361-3.6959 1.3251-1.0292 0.93149-5.6083 2.76-10.176 4.0633-7.7664 2.2162-9.9923 2.3712-34.376 2.394-19.798 0.0185-27.137-0.31652-30.5-1.3922-2.4354-0.77915-5.5652-1.6625-6.9549-1.963-1.3898-0.30052-4.3794-2.1321-6.6436-4.0702l-4.1168-3.5238-1.6064 2.4517c-2.0943 3.1963-2.0304 4.1178 0.5349 7.7205 3.5851 5.0348 12.292 9.876 21.27 11.826 10.672 2.318 42.723 2.1313 55.983-0.32622zm-39.042-13.172c0.311-0.81046-0.1722-1.8863-1.0736-2.3908-1.5064-0.84301-1.5088-1.0475-0.03-2.5264 0.885-0.88505 2.0913-1.6092 2.6806-1.6092 1.3526 0 1.4072-2.6744 0.071-3.5-1.8059-1.1161-1.0457-3.3544 1.25-3.6804 1.5956-0.22662 2.294-1.0466 2.4014-2.8196 0.262-4.3247 0.3562-4.5358 1.3387-3 1.4223 2.2235 0.9166 9.0986-0.7153 9.7248-0.7644 0.29332-1.1421 1.1788-0.8394 1.9676 0.3027 0.78886-0.1214 2.7334-0.9425 4.3213-0.8211 1.5878-1.4929 3.3593-1.4929 3.9366 0 0.67509 4.3209 1.0497 12.108 1.0497h12.108l-0.6507-2.5927c-0.5298-2.1108 0.1673-3.5512 3.7507-7.75 2.4208-2.8365 5.8857-7.6323 7.6998-10.657 1.8141-3.025 4.7311-7.075 6.4821-9 3.2697-3.5945 5.8259-8.4094 7.0309-13.243 0.376-1.5087 1.0857-2.4946 1.5771-2.191 0.4913 0.30366 0.8933-0.37445 0.8933-1.5069 0-1.1325 0.3568-2.059 0.7929-2.059s1.6342-2.475 2.6624-5.5c1.0283-3.025 2.1339-5.501 2.4571-5.5021 0.8102-0.003 0.5921-33.112-0.2668-40.498-1.1128-9.568-2.829-15.871-4.8087-17.66-1.0103-0.91316-1.8369-2.1203-1.8369-2.6826 0-0.56228-0.9188-1.3139-2.0418-1.6704-1.4028-0.44524-1.8632-1.2107-1.4712-2.4459 0.3994-1.2584-1.0737-3.5368-4.9097-7.5933-3.0142-3.1875-5.2455-6.1753-4.9585-6.6397 0.5483-0.88724-3.4619-8.0674-4.8262-8.6412-0.4359-0.18334-0.7926-0.97084-0.7926-1.75 0-0.77917-0.45-1.4167-1-1.4167s-1-0.45965-1-1.0214c0-1.1608-4.9225-8.9618-6.6121-10.479-0.6127-0.55-1.8807-3.475-2.8178-6.5-0.9372-3.025-3.2098-8.65-5.0503-12.5-1.8406-3.85-4.6954-9.8096-6.3441-13.243-1.6488-3.4339-3.2977-8.0189-3.6643-10.189-0.4806-2.8447-1.0633-3.7931-2.089-3.3995-1.0205 0.39162-1.4224-0.24279-1.4224-2.2454 0-1.5352-0.8592-4.6208-1.9093-6.857-1.2747-2.7143-2.0494-7.0385-2.3309-13.009-0.2638-5.5961-0.8592-9.0895-1.5907-9.3333-1.4213-0.47377-1.5776-6.223-0.1691-6.223 0.55 0 1-0.92958 1-2.0657 0-1.1362 0.4938-2.9885 1.0974-4.1163 0.8747-1.6344 0.6385-2.9429-1.1644-6.4483-1.244-2.4188-2.8579-4.8924-3.5865-5.4971-1.6183-1.3431-8.3465-0.25972-8.3465 1.3439 0 0.61927-0.6918 1.8904-1.5374 2.8248-1.7753 1.9617-3.021 10.144-1.9354 12.714 1.471 3.4814 1.383 6.245-0.1988 6.245-1.3292 0-1.4592 1.6961-0.9684 12.639 0.5176 11.541 0.3964 12.856-1.3966 15.135-1.0799 1.3728-1.9634 3.3134-1.9634 4.3124 0 0.99899-0.7134 4.4258-1.5854 7.6151-2.0038 7.3295-4.0634 18.506-4.9695 26.967-0.5418 5.0589-0.3874 6.7674 0.6764 7.4852 1.0439 0.70433 0.893 0.85929-0.6215 0.6384-1.9017-0.27736-1.984 0.18751-1.6749 9.4583 0.2078 6.2317-0.046 9.75-0.7047 9.75-0.5664 0-1.3385-1.6458-1.7159-3.6572-0.827-4.4083 0.3373-25.733 1.4256-26.109 0.7511-0.26009 0.1107-8.7014-1.2695-16.733l-0.6873-4 2.0634 2.3608 2.0633 2.3608v-2.5584c0-3.1477-12.632-16.958-13.362-14.609-0.2474 0.7953-1.0015 4.2484-1.6757 7.6735-1.2372 6.2852-2.9621 7.6031-2.9621 2.2632 0-1.665 0.7422-3.3611 1.75-3.999 1.2532-0.79327 1.3951-1.2568 0.5-1.633-1.4622-0.61449-1.6571-3.5397-0.327-4.9086 0.5077-0.5225 1.1192-2.3 1.359-3.95 0.3985-2.7435 0.4991-2.8133 1.176-0.8169 0.4072 1.2007 2.2706 2.9093 4.1411 3.7969 3.5857 1.7015 4.6185 2.8687 1.6509 1.8657-0.9625-0.3253 0.019 1.0388 2.1816 3.0314 2.1625 1.9926 4.4875 3.6228 5.1667 3.6228 0.6793 0 1.4116 0.52967 1.6274 1.177 0.5573 1.672 2.7856 0.0435 2.7177-1.9861-0.055-1.6498-10.738-10.191-12.747-10.191-0.5557 0-2.9627-2.3625-5.349-5.25-2.3862-2.8875-4.9031-5.8446-5.5931-6.5714-0.69-0.72678-1.2545-2.1411-1.2545-3.143s-0.675-2.0806-1.5-2.3972c-0.8913-0.34201-1.5-1.8459-1.5-3.7059 0-1.7216-0.7271-4.6624-1.6157-6.535s-1.3807-4.3031-1.0936-5.4011c0.339-1.2963 0.029-1.9964-0.8843-1.9964-0.7735 0-1.4064-0.60615-1.4064-1.347 0-0.74084-0.8764-2.3574-1.9475-3.5925-1.0711-1.235-2.1619-2.7664-2.4239-3.403-1.1181-2.717-2.6961 2.1357-2.3336 7.1767 0.3152 4.384 0.8778 5.7284 3.1585 7.547 2.2414 1.7873 2.8377 3.165 3.1013 7.1657 1.1298 17.149 3.936 33.78 6.5283 38.689 0.5043 0.95504 0.9312 2.755 0.9487 4 0.017 1.245 0.6925 3.1371 1.5 4.2047s1.4682 3.2051 1.4682 4.75 0.3999 2.8089 0.8887 2.8089 1.2016 1.6875 1.584 3.75 1.5574 5.1531 2.6113 6.868c1.0538 1.7149 1.916 4.1545 1.916 5.4213s0.6218 3.0137 1.3817 3.882c1.9122 2.1848 3.0042 6.0787 1.7047 6.0787-0.5765 0-1.3307-1.125-1.6758-2.5s-0.9799-2.5-1.4106-2.5c-0.4308 0-1.0879-1.214-1.4603-2.6978-0.5192-2.0687-0.882-2.3664-1.5556-1.2764-0.4832 0.7818-0.502 1.6583-0.042 1.9478 0.4602 0.28951 1.4195 2.5514 2.1319 5.0264s1.8871 5.3876 2.6105 6.4725 1.3153 3.1958 1.3153 4.691 0.3893 2.9591 0.8651 3.2531c1.8281 1.1298 5.5536 32.43 5.2089 43.763-0.062 2.0236 0.3466 3.9626 0.9071 4.309 0.5604 0.34636 1.0189 1.9164 1.0189 3.4889 0 1.5726 0.3313 3.6835 0.7362 4.691 0.5768 1.4353 0.8546 1.0742 1.2836-1.6682l0.5475-3.5 1.8485 3.4559c1.0167 1.9008 1.4516 3.5956 0.9664 3.7663-3.7189 1.3082-3.8178 1.8702-1.9267 10.955 2.9779 14.305 3.0682 17.124 0.6537 20.389-1.1601 1.569-2.1092 3.9409-2.1092 5.2709 0 1.3299-0.6035 2.919-1.3412 3.5312-0.7377 0.61221-2.1105 5.5048-3.0508 10.872-1.6052 9.1635-3.1029 15.779-4.2471 18.761-1.2171 3.1717 8.6034 8.7214 19.639 11.098 8.779 1.8908 8.8193 1.8821 9.5597-2.0645 0.3575-1.9054 1.2778-3.9855 2.0453-4.6224 1.6733-1.3887 1.7773-0.26234 0.4882 5.2868-0.4728 2.035-0.6121 3.9475-0.3095 4.25 1.1017 1.1017 4.0172 0.51233 4.5682-0.92349zm20.418-20.091c-0.3332-0.33323-0.3902-1.795-0.1267-3.2483 0.8314-4.5847 2.0013-4.4853 2.5317 0.21507 0.3049 2.702-1.04 4.3982-2.405 3.0332zm2.4809-9.2156c-1.2375-0.19765-2.25-1.0031-2.25-1.7898 0-1.8106 1.0927-1.8144 3.5573-0.0122 2.2818 1.6685 1.8223 2.3019-1.3073 1.802zm4.5355-2.9703c-0.8385-0.9625-1.7727-2.425-2.0761-3.25-0.415-1.1288-0.571-1.0366-0.6305 0.37244-0.066 1.5611-0.332 1.6624-1.6007 0.60944-1.3479-1.1187-1.3055-1.4146 0.3713-2.589 1.5145-1.0608 2.4176-1.0827 4.5141-0.10944 3.018 1.401 3.4271 2.686 0.8864 2.7843-1.3933 0.0539-1.2914 0.28887 0.5 1.1528 1.2375 0.59683 2.25 1.4664 2.25 1.9323 0 1.4781-2.6315 0.91437-4.2145-0.90281zm4.632-2c-0.2859-0.9625-1.1913-3.058-2.012-4.6566-1.7899-3.4864-0.3502-5.9736 2.0553-3.5505 1.908 1.922 3.2279 9.9571 1.6356 9.9571-0.6375 0-1.3931-0.7875-1.6789-1.75zm4.5825-3.191c0-1.0675-0.3625-2.165-0.8055-2.4388-1.5497-0.95772-6.4036-11.585-6.5484-14.337-0.08-1.5273-0.9336-3.566-1.8961-4.5303-0.9625-0.96432-1.75-2.4174-1.75-3.2292 0-0.81171-0.8983-2.9492-1.9963-4.75-2.1876-3.588-2.6043-7.285-0.9372-8.3153 1.4178-0.87622 1.6892-0.49958 2.1911 3.0411 0.4422 3.1186 0.7781 4.1044 3.8772 11.377 1.0259 2.4074 1.8652 4.7406 1.8652 5.1849 0 0.44428 0.3961 1.8496 0.8802 3.1229s0.8216 2.5584 0.75 2.8558c-0.072 0.2974 1.288 1.8724 3.0214 3.5 3.5289 3.3134 5.4319 10.459 2.7855 10.459-0.7904 0-1.4371-0.87344-1.4371-1.941zm-32.658-2.8266c-0.637-0.40534-1.4746-2.4234-1.8613-4.4847-0.5761-3.0706-0.412-3.7477 0.9082-3.7477 0.8862 0 1.6423 0.7875 1.6802 1.75 0.038 0.9625 0.2322 2.9875 0.4318 4.5s0.2811 2.7431 0.1811 2.7347c-0.1-0.008-0.703-0.34696-1.34-0.75229zm35.634-2.4824c-0.025-3.279-2.8247-12.712-5.4169-18.25-2.2823-4.8757-3.0393-8.8269-1.5992-8.3469 0.6829 0.22762 2.4526 3.9988 3.9327 8.3804s3.3998 9.3165 4.2659 10.967c0.8661 1.65 1.8803 4.6875 2.2538 6.75 0.6033 3.3323 0.4511 3.75-1.3664 3.75-1.6358 0-2.0502-0.65068-2.0699-3.25zm-5.1593-7.1918c-0.9261-1.2425-2.4158-5.0836-3.3103-8.5359-0.8946-3.4523-2.2411-7.2321-2.9922-8.3996s-1.6808-3.8461-2.0659-5.9525-1.3184-4.067-2.074-4.357c-1.508-0.57868-1.9507-7.3132-0.4807-7.3132 1.2133 0 2.1624 2.692 1.5301 4.3398-0.2828 0.73688 0.1814 1.917 1.0314 2.6224 0.85 0.70546 1.5455 2.0324 1.5455 2.9488 0 0.91637 0.9 3.4314 2 5.589s2 4.8627 2 6.0114 0.4194 2.5161 0.9321 3.0386 1.0752 2.3 1.25 3.95 0.9293 3.4797 1.6766 4.0661c0.7473 0.58635 1.1973 1.7827 1 2.6586-0.2927 1.2996-0.6683 1.1771-2.0426-0.66652zm3.2152-11.808c-1.2835-3.9875-2.6518-7.7-3.0407-8.25-1.306-1.8468-3.8216-10.336-3.2363-10.921 0.3185-0.31847 0-0.57904-0.7042-0.57904-0.8296 0-1.1143-0.88385-0.8054-2.5 0.2629-1.375 0.1084-2.5-0.3432-2.5-0.4517 0-1.3314-1.9125-1.9551-4.25-1.3376-5.0139-4.3931-11.916-3.4307-7.75 0.3176 1.375 1.1656 4.6375 1.8844 7.25s1.0353 4.7431 0.7034 4.7347c-1.2546-0.0318-3.2006-1.7044-2.9975-2.5763 0.2042-0.87687-0.235-2.3235-2.1874-7.2054-1.3362-3.3412-1.1282-5.203 0.5814-5.203 1.854 0 1.8668-0.49629 0.099-3.8457-0.7704-1.4599-2.6654-6.8168-4.211-11.904-1.5457-5.0875-3.1653-9.25-3.5992-9.25-0.434 0-0.789-0.75555-0.789-1.679s-0.5363-3.1621-1.1918-4.9749c-0.6555-1.8127-0.8758-3.6118-0.4897-3.998 1.1498-1.1498 3.5145 2.8609 4.2167 7.1519 0.36 2.2 1.4181 5.35 2.3514 7 0.9332 1.65 3.1889 7.725 5.0126 13.5 1.8238 5.775 3.7778 11.625 4.3422 13 2.7163 6.6174 2.4334 5.755 5.9056 18 0.7018 2.475 1.2933 4.95 1.3145 5.5 0.021 0.55 0.601 1.3599 1.2885 1.7997 0.6875 0.43983 1.25 1.6773 1.25 2.75s0.5025 1.9503 1.1166 1.9503c0.651 0 0.9178 1.0397 0.6399 2.4936-0.2712 1.4187 0.1096 2.9802 0.8834 3.6224 1.4631 1.2143 1.8936 5.8839 0.5425 5.8839-0.4497 0-1.8677-3.2625-3.1511-7.25zm-60.39-0.95911c-0.3375-1.26-0.6198-4.1768-0.6274-6.4819-0.01-2.305-0.4333-4.4504-0.9462-4.7674-1.3814-0.85373-0.9697-6.5416 0.4735-6.5416 0.6801 0 1.5424 1.6304 1.9162 3.6231s1.2114 4.5265 1.8613 5.6306c0.9212 1.5651 0.9061 2.1073-0.068 2.4602-1.5235 0.55171-1.6736 3.286-0.1804 3.286 1.3938 0 0.7723 4.2309-0.6923 4.7126-0.6174 0.20307-1.3988-0.66168-1.7363-1.9217zm19.359 1.2091c0-0.55 0.45-1 1-1s1 0.45 1 1-0.45 1-1 1-1-0.45-1-1zm49-0.5c0-0.825 0.45-1.5 1-1.5s1 0.675 1 1.5-0.45 1.5-1 1.5-1-0.675-1-1.5zm-62.485-1.4751c-0.7006-1.1335 0.393-29.654 1.3591-35.446 0.3597-2.1568 1.2576-4.1226 1.9952-4.3685 1.0373-0.34576 1.1715 0.31633 0.5921 2.9214-0.4121 1.8527-0.6963 4.8826-0.6317 6.7331 0.065 1.8505-0.3218 4.1857-0.859 5.1893-0.6563 1.2265-0.6246 2.0422 0.097 2.488 0.6653 0.41115 0.8184 2.1722 0.4027 4.6323-0.3688 2.183-0.6703 5.6243-0.6699 7.6474 0.0003 2.0231-0.4205 4.4659-0.9352 5.4284s-0.5657 1.75-0.1134 1.75 0.8902 0.9 0.973 2c0.1574 2.0891-1.1711 2.7053-2.2096 1.0249zm46.98-8.6302c-0.3386-1.592-1.0077-3.6267-1.4869-4.5215-1.5697-2.9313-2.3192-8.8731-1.1193-8.8731 0.6112 0 1.1115 0.7875 1.1118 1.75s0.9237 4.179 2.0521 7.1479c1.3633 3.5869 1.7172 5.7323 1.0549 6.3946-0.6624 0.66235-1.2034 0.0256-1.6126-1.8979zm18.096 0.7054c-1.743-1.9261-1.3715-4.7008 0.4765-3.5586 0.957 0.59145 0.7459-4.3819-0.2583-6.0866-0.3094-0.52512-1.3455-4.5548-2.3025-8.9548-0.9571-4.4-2.1068-8.9-2.555-10s-1.0406-3.35-1.3163-5c-1.3306-7.9607-4.2162-20.415-4.8849-21.084-1.0787-1.0781-0.9258-5.4162 0.191-5.4162 1.4592 0 1.9875 1.3506 2.9945 7.6563 0.5133 3.214 1.6028 8.7558 2.4211 12.315s1.2713 6.8217 1.0066 7.25c-0.2647 0.42827-0.057 0.77867 0.4626 0.77867 0.519 0 1.253 2.475 1.6309 5.5 0.5657 4.5273 1.0282 5.5 2.6153 5.5 1.0604 0 1.928-0.48214 1.928-1.0714 0-0.58928 0.675-0.39643 1.5 0.42857 1.9632 1.9632 1.9109 3.0145-0.1113 2.2385-1.2352-0.47397-1.4433-0.20712-0.8916 1.143 0.3959 0.96874 1.1421 3.2238 1.6584 5.0113 0.5162 1.7875 1.3532 3.25 1.8601 3.25s0.6626 0.675 0.346 1.5c-0.886 2.3089-2.3079 1.7865-3.4022-1.25-0.5451-1.5125-1.4433-3.65-1.996-4.75-1.894-3.7692 0.036 3.6086 2.1686 8.2899 1.0923 2.3976 1.8417 5.108 1.6655 6.0232-0.466 2.4195-3.1435 2.567-5.207 0.28695zm-52.871 0.19588c-0.7946-1.2255-2.4827-15.341-2.487-20.796-0.001-1.65-0.099-13.575-0.2179-26.5-0.1186-12.925 0.063-30.25 0.403-38.5 0.3402-8.25 0.8083-19.5 1.0402-25 0.3567-8.4595 0.2638-9.3068-0.6029-5.5-0.5634 2.475-1.1617 6.075-1.3294 8-0.4665 5.3562-3.5112 22.021-5.7093 31.25-1.2596 5.2885-3.2578 4.9135-2.4001-0.45039 0.3695-2.3102 1.0431-4.6727 1.4971-5.25 0.4539-0.57728 1.0903-3.0746 1.4142-5.5496s1.5518-11.25 2.7287-19.5c2.3104-16.195 2.4007-16.906 4.107-32.285 1.2914-11.64 3.4659-15.639 2.5934-4.7693-0.5669 7.063 0.4788 12.957 2.533 14.277 1.5465 0.99342 7.4087 12.837 8.3045 16.778 0.375 1.65 1.177 3.6253 1.7822 4.3895 0.6052 0.76424 1.6859 3.4642 2.4015 6s1.8075 6.4105 2.4265 8.6105c0.6189 2.2 1.4363 4.225 1.8164 4.5 0.38 0.275 1.0137 2.2533 1.408 4.3962s1.3095 4.8429 2.0337 6c0.7243 1.1571 1.8672 4.5788 2.5399 7.6038s1.6706 6.625 2.2175 8c1.6474 4.1418 3.8626 13.251 3.3476 13.766-0.2648 0.26483-1.1288-1.0367-1.92-2.8923-1.8947-4.4437-7.6472-23.028-7.6472-24.705 0-0.97242-0.4066-0.90526-1.5714 0.25953-2.0814 2.0813-2.1308 2.0539-2.6482-1.4715-0.3297-2.246-0.097-2.909 0.8865-2.5314 0.8889 0.34112 1.3331-0.31092 1.3331-1.957 0-1.3577-0.45-2.4686-1-2.4686s-1-0.675-1-1.5-0.3678-1.5-0.8174-1.5c-0.9469 0-4.185-9.7566-4.1777-12.588 0.01-2.4171-3.2542-11.801-4.2549-12.245-0.4125-0.18334-0.75-1.1958-0.75-2.25s-0.3513-1.9167-0.7808-1.9167c-1.056 0-3.2906-6.0754-2.6286-7.1465 0.2901-0.4694 0.083-0.85346-0.4602-0.85346-0.5431 0-1.5996-0.61207-2.3477-1.3602-1.1469-1.1469-1.3705 0.93085-1.4261 13.25-0.036 8.0356-0.2571 31.035-0.4908 51.11s-0.046 40.842 0.4171 46.148c0.9328 10.688 0.6586 19.033-0.5635 17.148zm17.781-1.2959c-0.3399-0.55 0.083-1 0.941-1 0.8574 0 1.559 0.45 1.559 1s-0.4234 1-0.941 1c-0.5175 0-1.2191-0.45-1.559-1zm-0.9723-4.25c-0.6055-1.8478-2.6169-12.307-2.928-15.225-0.1483-1.3905-0.5689-2.8274-0.9346-3.1932-0.3658-0.36578-0.6651-2.1385-0.6651-3.9394s-0.3907-3.5158-0.8682-3.8109c-0.4775-0.29511-1.1655-2.7782-1.529-5.5179-0.3634-2.7397-1.0386-5.2148-1.5004-5.5002s-1.1607-3.7776-1.5532-7.7604c-0.3924-3.9828-1.1052-7.9732-1.5838-8.8676-1.3147-2.4565-1.6754-22.185-0.4135-22.613 0.6659-0.226 1.5183 4.856 2.3231 13.851 0.6991 7.8146 1.8953 15.415 2.6582 16.891 0.7629 1.4752 1.1664 2.9028 0.8967 3.1725-0.9041 0.90414 2.8538 21.244 4.2203 22.842 0.7424 0.86831 1.3498 3.0354 1.3498 4.8157 0 1.7804 0.3906 3.9949 0.868 4.9213 1.2754 2.4746 2.0368 11.184 0.9778 11.184-0.4997 0-1.0929-0.5625-1.3181-1.25zm31.472 0.28896c0-0.52858-0.8362-1.7661-1.8582-2.75-1.022-0.98393-2.1223-3.499-2.4452-5.589-0.5496-3.5574-0.447-3.757 1.6081-3.1258 1.2074 0.37083 2.2831 0.74361 2.3904 0.8284 0.1072 0.0848 0.3322 2.2785 0.5 4.875 0.1677 2.5964 0.6424 4.7212 1.0549 4.7216 0.4125 0.00044 0.75 0.4508 0.75 1.0008s-0.45 1-1 1-1-0.43247-1-0.96104zm2.2116-2.9382c-0.6664-1.8696-1.1714-4.7946-1.1222-6.5 0.077-2.6733 0.2829-2.4115 1.4931 1.8992 1.6621 5.9203 1.3739 9.4955-0.3709 4.6008zm-5.9616-9.8758c-1.6333-0.26431-2.25-1.0465-2.25-2.8536 0-1.405 0.4356-2.2202 1-1.8714 0.55 0.33992 1.0143 0.029 1.0318-0.69098 0.02-0.80736 0.5945-0.56511 1.5 0.63211 0.8075 1.0676 1.4682 1.399 1.4682 0.73643 0-1.6537-2.2294-5.5044-3.75-6.4772-0.6875-0.43983-1.2431-2.2398-1.2347-4 0.012-2.4341 0.2474-2.8412 0.9847-1.7003 0.6462 1 0.9745 1.0833 0.9847 0.25 0.01-0.6875 0.4653-1.25 1.0153-1.25s1 1.3796 1 3.0657c0 1.6862 0.3908 3.8237 0.8684 4.75 0.4776 0.92634 1.1632 3.3196 1.5235 5.3182 0.7085 3.9296-0.1148 4.7427-4.1419 4.091zm-3.0125-7.3875c-0.6806-0.68062-1.2375-2.6904-1.2375-4.4661s-0.675-3.9036-1.5-4.7286-1.5-3.0806-1.5-5.0124-0.45-3.7905-1-4.1304c-0.55-0.33992-1-1.6234-1-2.8522 0-2.5874-4.5874-19.353-5.9648-21.8-1.1884-2.1109-6.0352-18.779-6.0352-20.754 0-1.1386 0.2774-1.2159 1.1679-0.32535 1.7118 1.7118 3.9944 8.1417 4.5198 12.732 0.2518 2.2 1.1001 5.418 1.8851 7.1511s1.4419 3.7581 1.4598 4.5c0.044 1.8248 3.4917 11.707 4.4017 12.616 0.4005 0.40057 0.4143-0.5227 0.031-2.0517-0.3838-1.529-0.7579-3.5531-0.8313-4.498-0.073-0.94487-0.6961-2.3126-1.3836-3.0394-0.6875-0.72678-1.2483-2.3018-1.2462-3.5 0-1.8631 0.2971-1.6974 2.0299 1.1448 2.3829 3.9086 4.5768 3.6851 4.2039-0.42825-0.2266-2.4998-0.1119-2.6463 0.8402-1.0727 0.646 1.0676 0.7908 2.9314 0.3496 4.5-0.4143 1.4727-0.645 3.3526-0.5127 4.1776 0.1664 1.0378-0.2616 0.88374-1.3889-0.5-1.5907-1.9526-1.612-1.9408-0.897 0.5 0.4028 1.375 0.7626 3.7375 0.7996 5.25s0.3757 2.75 0.7526 2.75c1.0362 0 0.6664 6.41-0.4103 7.1108-0.5161 0.33596-0.2256 0.88433 0.6455 1.2186 1.0487 0.40242 1.6238 0.0271 1.7023-1.1108 0.1695-2.4602 0.1858-2.2473-0.5934-7.7186-0.9784-6.8693 0.6366-4.7977 2.1895 2.8086 0.8101 3.9681 0.9088 6.3111 0.2747 6.5247-0.5441 0.18334-0.9893 0.97084-0.9893 1.75 0 0.77917-0.765 1.4167-1.7 1.4167-1.3222 0-1.4333 0.26667-0.5 1.2 0.66 0.66 1.2 2.595 1.2 4.3s0.5007 3.6006 1.1125 4.2125c0.6119 0.61187 0.9438 1.6188 0.7375 2.2375-0.2676 0.80303-0.7291 0.77083-1.6125-0.1125zm11.413-0.30547c-0.6014-1.5671 0.6431-2.9049 1.7098-1.8382 0.953 0.95302 0.7726 3.3062-0.2535 3.3062-0.4912 0-1.1465-0.66059-1.4563-1.468zm-0.984-4.1987c-1.258-1.258-0.6666-4.3333 0.8333-4.3333 0.9333 0 1.5 0.94444 1.5 2.5 0 2.4279-0.9737 3.1929-2.3333 1.8333zm-21.685-6.0833c-0.01-0.9625-1.8103-6.9199-4-13.239-2.1898-6.3188-3.9814-12.986-3.9814-14.816 0-1.8299-0.4777-4.2197-1.0617-5.3107-0.5839-1.091-0.9173-3.199-0.741-4.6843 0.3057-2.575 0.8904-1.0503 7.8106 20.37 0.5456 1.689 0.9921 4.1866 0.9921 5.55s0.4064 2.9065 0.903 3.429c1.1285 1.1871 1.8856 10.45 0.8542 10.45-0.4165 0-0.7656-0.7875-0.7758-1.75zm19.15-4c-0.7179-2.6125-1.6801-5.875-2.1382-7.25-1.237-3.7132-1.918-11-1.0279-11 0.4262 0 1.2345 1.9125 1.7964 4.25 0.5618 2.3375 1.7453 7.2489 2.6299 10.914 1.8537 7.6802 1.8702 7.8359 0.8268 7.8359-0.4299 0-1.3691-2.1375-2.087-4.75zm-63.131 2.6424c0-0.42587 0.4619-1.0598 1.0265-1.4087 0.5646-0.34893 0.9613-1.163 0.8815-1.809-0.3839-3.11 0.074-3.9346 1.5185-2.7356 1.786 1.4822 0.253 6.7276-1.9662 6.7276-0.8032 0-1.4603-0.34845-1.4603-0.77432zm57-0.39235c0-0.825 0.1769-1.5 0.393-1.5 0.2162 0 0.652 0.675 0.9686 1.5s0.1397 1.5-0.393 1.5-0.9686-0.675-0.9686-1.5zm-67.312-1.1458c-1.5501-1.5501-0.2654-32.829 1.3084-31.857 0.3917 0.24205 0.9778-3.6608 1.3025-8.6731s1.0654-9.5882 1.646-10.169c0.5806-0.58057 1.0556-1.8656 1.0556-2.8556s0.4234-1.8 0.941-1.8c1.3843 0 2.2397 1.7703 1.1737 2.4291-0.5049 0.31201-1.2229 3.3806-1.5957 6.8191s-1.1376 8.0439-1.6995 10.234c-0.562 2.1904-1.1922 11.187-1.4004 19.993-0.3484 14.737-0.8657 17.744-2.7316 15.878zm12.746-12.687c-0.4779-1.2318-0.01-2.5351 1.4276-3.9722 2.5261-2.526 2.9013-0.69066 0.6759 3.3055-1.2626 2.2672-1.4585 2.3293-2.1035 0.66672zm1.0736-8.6553c-0.4086-0.66116-0.2806-2.1717 0.2844-3.3568s1.2899-2.9707 1.6109-3.968c0.3209-0.99736 1.076-1.5091 1.6778-1.1371 0.7879 0.48696 0.7899 0.98053 0.01 1.7634-0.598 0.59792-1.0941 2.0096-1.1025 3.1371-0.022 2.9508-1.5222 5.1073-2.4776 3.5614zm46.438-5.1136c-0.6188-1.1562-0.9277-2.857-0.6865-3.7795 0.2413-0.92251-0.1683-2.2442-0.9101-2.9372-1.2251-1.1445-1.9435-5.181-0.9219-5.181 0.9175 0 3.6425 6.5809 4.2198 10.191 0.6766 4.2312 0.01 4.9013-1.7013 1.7065zm-4.9384-7.8692c-0.656-2.7342-0.9934-5.5468-0.7498-6.25 0.2436-0.70324 0.9055 0.74638 1.4708 3.2214s1.356 5.2875 1.757 6.25c0.4128 0.99096 0.2922 1.75-0.2782 1.75-0.554 0-1.5439-2.2371-2.1998-4.9714zm-54.007-25.029c0-0.55 0.45-1 1-1s1 0.45 1 1-0.45 1-1 1-1-0.45-1-1zm-9.3333-11.667c-0.3667-0.36666-0.6667-1.4917-0.6667-2.5 0-2.25 2.5559-2.4329 3.3963-0.24309 0.972 2.5332-0.9789 4.4938-2.7296 2.7431zm-4.6315-9.2676c-1.5352-2.8685-1.2702-4.9592 0.3568-2.8157 0.7307 0.9625 1.8414 1.75 2.4682 1.75 0.6269 0 1.1398 0.675 1.1398 1.5 0 2.1515-2.7417 1.8512-3.9648-0.43426zm6.7148-1.0286c-1.9485-1.8983-2.243-3.0371-0.7852-3.0371 0.9671 0 3.4884 3.9203 2.8662 4.4566-0.1821 0.15694-1.1185-0.48185-2.081-1.4195zm26.976-42.333c-0.8272-1.2625-2.5055-5.425-3.7295-9.25s-2.5336-7.5868-2.9102-8.3598c-0.4107-0.84294 0.2778-2.3678 1.7206-3.8106 2.7398-2.7398 4.3874-2.2612 1.8537 0.53851-2.224 2.4575-2.1403 3.0622 1.3395 9.6774 1.65 3.1367 3 6.5308 3 7.5425s0.45 2.1176 1 2.4575c1.2363 0.76408 1.3262 3.5 0.115 3.5-0.4867 0-1.5618-1.033-2.3891-2.2955zm-1.4938-23.704c-0.7809-1.2503-0.8593-2-0.2092-2 0.5719 0 1.2979 0.67242 1.6133 1.4943 0.3153 0.82184 0.9762 1.2453 1.4686 0.94098 0.4923-0.3043 0.8952-0.0767 0.8952 0.50574 0 1.7863-2.4462 1.1754-3.7679-0.94098zm47.203 256.11c0.304-0.4919 2.2431-1.1307 4.309-1.4195 12.067-1.6869 13.809-3.3509 13.601-12.992-0.2031-9.4-1.2766-16.945-2.5887-18.194-0.7225-0.68788-0.853-0.44062-0.4183 0.79221 0.3476 0.98572 0.9276 6.6594 1.2889 12.608 0.6185 10.183 0.5317 10.941-1.4848 12.958-1.1779 1.178-3.1542 2.1101-4.3917 2.0714-1.8304-0.0572-1.9304-0.1971-0.5366-0.75023 1.2379-0.49128 1.4503-1.0961 0.7653-2.1797-1.5985-2.5287-1.1631-4.1931 0.9236-3.5308 1.6352 0.51899 1.9106 0.0721 1.9614-3.1826 0.033-2.0825 0.09-5.1364 0.1272-6.7864 0.1776-7.8163-0.1472-9.6151-1.5293-8.4682-0.7385 0.61291-1.0963 1.7565-0.7952 2.5413 0.3298 0.85941-0.072 1.4269-1.0097 1.4269-0.8565 0-1.9172 0.63504-2.357 1.4112s-2.1593 2.9137-3.821 4.75c-5.1962 5.7421-12.165 15.24-12.905 17.589-0.6633 2.1054-0.4192 2.25 3.7995 2.25 2.4796 0 4.7571-0.40247 5.0611-0.89437zm31.358-117.33c1.4888-3.1492 3.2106-5.7367 3.8262-5.75 0.6155-0.0133 1.3838-1.655 1.7072-3.6483 0.3235-1.9932 1.2624-4.3692 2.0866-5.2798 1.24-1.3702 1.3297-2.8477 0.52-8.5654-1.4354-10.136-2.0402-10.2-4.514-0.47697-0.9021 3.5454-2.4904 8.2183-3.5296 10.384-1.0392 2.1658-1.9044 4.6408-1.9227 5.5-0.018 0.85919-0.9362 2.6467-2.0399 3.9722-1.5019 1.8039-2.2934 2.1234-3.1465 1.2702-1.2262-1.2262-0.107-4.1448 3.5866-9.3535 1.2226-1.7241 1.7106-3.6409 1.3746-5.3989-0.7231-3.7826 3.4238-15.426 8.4666-23.772 4.5031-7.4528 5.5944-12.097 5.7189-24.334 0.047-4.5972 0.5572-7.6628 1.4195-8.5251 0.7406-0.74058 1.6713-3.1352 2.0683-5.3214s0.9728-5.0191 1.2796-6.2954c0.5455-2.2695 0.4133-2.314-6.0105-2.0255-3.6126 0.16224-6.9018-0.0385-7.3094-0.44617-1.5847-1.5847 1.8155-3.043 7.2828-3.1235 5.3775-0.0792 5.8426-0.28391 7.6435-3.3637 2.7586-4.7176 3.7848-24.034 1.3492-25.397-1.9796-1.1079-2.1767-2.824-0.3243-2.824 0.7291 0 2.3231-1.0617 3.5422-2.3594l2.2165-2.3594-2.7922-5.6304c-3.2941-6.6425-4.941-7.0424-10.16-2.4668-6.807 5.9676-9.132 9.6817-9.132 14.588 0 4.3195-0.3655 4.8732-9.25 14.015-14.17 14.58-16.317 16.354-25.978 21.463-10.927 5.7783-16.942 6.3835-22.361 2.25-7.2411-5.5231-6.8329-1.0821 0.7051 7.671 5.4209 6.2948 5.8593 7.3173 2.7929 6.5154-1.7952-0.46945-2.0055-0.20676-1.4874 1.8574 0.3318 1.3223 1.6685 3.9738 2.9703 5.8921 2.249 3.314 2.4477 3.3986 3.9875 1.6972 0.8913-0.98487 1.6205-2.266 1.6205-2.8469 0-0.58094 1.1393-1.8028 2.5319-2.7152 1.3925-0.91242 2.2659-2.0892 1.9409-2.615-0.3249-0.52584-0.1143-0.95607 0.4682-0.95607 0.5824 0 0.9465-0.50625 0.809-1.125s0.2-1.2188 0.75-1.3333c0.55-0.11459 0.6116-0.004 0.1368 0.24605-0.4747 0.24991-0.3722 0.75778 0.2278 1.1286 0.6868 0.42445-0.3827 2.4574-2.8869 5.4878-2.1877 2.6475-3.9727 5.3271-3.9666 5.9547 0.01 0.62762 1.1637-0.32138 2.5725-2.1089 2.539-3.2217 5.4164-4.3284 5.4164-2.0833 0 0.64166-0.2452 0.92147-0.5449 0.62179s-1.84 0.75032-3.4231 2.3333c-1.583 1.583-3.6403 2.8782-4.5717 2.8782-1.2974 0-1.5295 0.5263-0.9922 2.25 0.3857 1.2375 1.189 4.1625 1.7851 6.5 0.8645 3.3903 1.5306 4.25 3.2928 4.25 1.215 0 2.7693-0.675 3.454-1.5s2.0936-1.5 3.1309-1.5c1.578 0 1.6992 0.29917 0.742 1.8319-0.6293 1.0076-2.4395 2.3209-4.0228 2.9186l-2.8788 1.0866 1.9803 3.3564c4.0712 6.9 8.6739 9.9144 7.3379 4.8055-0.2922-1.1173-0.03-1.999 0.5939-1.999 0.6141 0 1.1451 0.5625 1.18 1.25 0.035 0.6875 0.4703 0.2375 0.9678-1 0.7392-1.8391 1.6814-2.25 5.1591-2.25 4.136 0 4.1927 0.0434 2.0322 1.5567-1.2224 0.85619-2.2225 2.3787-2.2225 3.3834s-0.8365 2.0454-1.8588 2.3128c-2.7102 0.70872-3.7082 5.6121-1.4747 7.2453 1.4766 1.0797 1.5475 1.5391 0.4428 2.8702-1.1276 1.3586-0.6941 2.2951 3.0377 6.5632 2.3942 2.7382 4.8512 4.9987 5.4601 5.0235 0.609 0.0248 3.4268-2.2746 6.2619-5.1097 2.8352-2.8351 5.4869-4.7985 5.8929-4.3631 0.406 0.43542 0.1756 0.99256-0.5119 1.2381-0.6875 0.24553-1.25 1.2931-1.25 2.3279s-1.0032 2.4184-2.2294 3.0746c-1.2261 0.65622-2.7931 1.7569-3.4821 2.4459-0.689 0.68903-1.8233 1.4592-2.5206 1.7114-1.0175 0.36807-1.0211 0.87668-0.018 2.5757 0.6875 1.1644 1.25 2.6053 1.25 3.2021 0 0.59675 0.675 1.76 1.5 2.585s1.5 2.3957 1.5 3.4905 0.783 3.0286 1.7401 4.2974l1.7401 2.3069 2.3029-3.1188c1.2665-1.7154 3.521-5.6954 5.0098-8.8446zm-22.619-15.089c-1.1959-1.273-2.1743-2.6572-2.1743-3.0761 0-0.9598 5.8695 3.6221 5.9447 4.6405 0.1065 1.4441-1.6151 0.72975-3.7704-1.5644zm5.2941 1.2634c-0.7854-1.2708 1.2971-3.9489 3.0707-3.9489 0.7118 0 1.5212-0.5625 1.7986-1.25 0.2984-0.73946 0.5366-0.7991 0.5833-0.14602 0.1258 1.7588-4.7282 6.517-5.4526 5.3449zm-26.419-38.699c0.027-0.4125 1.8209-2.55 3.9866-4.75 3.4416-3.4961 3.8812-3.704 3.4891-1.65-0.6567 3.441-7.6752 9.4495-7.4757 6.4zm35.518-46.5c0.7573-2.4266 2.195-3.7103 4.1826-3.7347 0.6875-0.008 1.2598-0.57781 1.2717-1.2653 0.012-0.6875 2.262-3.4843 5-6.2151 7.7123-7.6919 5.9612-3.0068-2.1529 5.7601-7.3441 7.9349-9.522 9.3661-8.3014 5.455zm22.433-1.75c0-0.55 0.675-1 1.5-1s1.5 0.45 1.5 1-0.675 1-1.5 1-1.5-0.45-1.5-1zm-9.6004-16.401c-0.3225-0.84034 0.3969-2.9088 1.5987-4.5965 1.2018-1.6878 2.3091-4.1987 2.4607-5.5798 0.25-2.2774 4.0625-7.4445 5.4653-7.4072 0.3166 0.008 1.2507 0.46174 2.0757 1.0074 1.2932 0.85526 1.2172 1.2323-0.5513 2.7347-2.6589 2.2588-7.4487 8.8023-7.4487 10.176 0 0.5867-0.4359 1.0667-0.9686 1.0667-0.5328 0-0.7271 0.62948-0.4318 1.3988 0.2952 0.76937 0.053 1.6979-0.5385 2.0634-0.5914 0.36549-1.3391-0.023-1.6615-0.86335zm7.6004-3.0989c0-0.825 0.45-1.5 1-1.5s1 0.675 1 1.5-0.45 1.5-1 1.5-1-0.675-1-1.5zm-52.55 32.383c0.5225-0.48549 2.3225-0.88568 4-0.8893 1.6775-0.004 4.4-0.90066 6.05-1.9934 1.65-1.0928 3.6276-1.9898 4.3948-1.9934 1.4143-0.007 3.5142-1.7782 9.3633-7.8992 1.783-1.8659 5.2683-5.4659 7.7449-8 7.1413-7.3067 8.4349-9.8302 8.9941-17.544 0.4675-6.4482 0.6191-6.8203 2.1514-5.2801 1.5337 1.5416 1.8643 1.4042 4.75-1.974 1.7058-1.9971 3.1015-4.2177 3.1015-4.9347 0-1.8143 2.9079-3.1827 7.5588-3.5569 3.7556-0.30219 4.0442-0.11291 6.1294 4.0193l2.1882 4.3364 1.1169-4.3364c0.6144-2.385 1.8272-6.5456 2.6951-9.2457 1.7077-5.3123 1.5288-9.6951-1.2282-30.091-2.3081-17.074-2.6365-18.924-3.566-20.087-0.4778-0.59793-2.6533-4.5565-4.8345-8.7967-2.1811-4.2403-5.4493-9.5878-7.2627-11.884-3.5871-4.5411-10.364-11.007-12.168-11.61-0.621-0.20751-2.1068-1.2659-3.3019-2.3519-2.1547-1.958-16.819-8.7708-18.879-8.7708-0.5898 0-2.8445-0.84029-5.0103-1.8673-6.7199-3.1866-22.029-4.6267-33.813-3.1808-10.573 1.2973-11.368 1.4953-21.125 5.2569-6.482 2.4991-19.5 10.414-19.5 11.855 0 0.48657-1.3327 1.5739-2.9616 2.4162-1.6289 0.84233-5.3414 4.5664-8.25 8.2757-6.9789 8.9001-8.3442 11.149-10.774 17.744-0.4053 1.1-1.4743 3.7028-2.3755 5.7839-0.9012 2.0812-1.6386 4.7935-1.6386 6.0275s-0.6042 3.1312-1.3427 4.2161c-3.9277 5.7703-4.7924 39.456-1.117 43.517 0.8028 0.8871 1.4597 2.0445 1.4597 2.5719 0 0.52747 1.3317 2.517 2.9594 4.4213 2.032 2.3773 2.972 4.5676 3 6.9897 0.022 1.9401 0.7444 4.5324 1.6047 5.7605 0.8966 1.2801 1.2946 3.082 0.9326 4.2225-0.3547 1.1174-0.1746 1.9895 0.4109 1.9895 0.5733 0 2.0011 2.1044 3.1728 4.6765 2.0648 4.5326 7.7997 10.812 12.92 14.147 1.375 0.89559 2.8599 2.2016 3.2997 2.9024 0.4398 0.70071 1.3044 1.274 1.9212 1.274 0.6169 0 1.8926 0.69773 2.8349 1.5505 1.574 1.4244 1.8001 1.3017 2.7802-1.51 0.5868-1.6833 1.3719-5.756 1.7446-9.0505 0.5768-5.0981 0.4404-5.99-0.9163-5.99-0.8766 0-2.0756-0.9-2.6643-2s-1.9545-2-3.0352-2c-1.0806 0-1.9648-0.62838-1.9648-1.3964s-1.6875-2.7791-3.75-4.4691c-6.6353-5.4368-8.0319-7.1585-8.7012-10.726-0.4385-2.3378-1.397-3.7807-2.8878-4.3475-1.9418-0.73827-2.2638-1.6686-2.481-7.1673-0.1372-3.4754-0.5714-6.5608-0.9648-6.8564-0.7469-0.56134-1.259-2.1633-1.7704-5.5375-0.1667-1.1-0.6287-3.575-1.0266-5.5-0.7171-3.469-0.7054-3.4839 1.3298-1.6849 1.3305 1.1761 2.2843 1.4416 2.7091 0.75426 0.3606-0.58349-0.4947-1.585-1.9007-2.2257-1.406-0.64062-2.5564-1.7362-2.5564-2.4347 0-0.69847-1.0125-1.4691-2.25-1.7125l-2.25-0.4426 2.25-0.74358c1.2375-0.40897 2.25-1.311 2.25-2.0045 0-0.69351 0.6218-1.777 1.3818-2.4077 1.9103-1.5854 1.3078-6.8564-0.9867-8.6318-1.7195-1.3304-1.7469-1.5822-0.2959-2.7163 0.8796-0.6875 1.5546-1.5197 1.5-1.8493-0.1348-0.81435 4.7131-5.8618 5.6508-5.8834 0.4125-0.01 0.75 0.68428 0.75 1.5417 0 0.85746-0.3463 1.345-0.7696 1.0834-0.4232-0.26159-1.7638 1.0411-2.979 2.8949-1.4737 2.2483-1.8462 3.595-1.1186 4.0447 0.5999 0.37079 1.378 0.21289 1.729-0.3509 0.9476-1.522 5.3884-1.9184 5.8645-0.52351 0.2267 0.66421-1.194 1.8788-3.1571 2.699-1.9631 0.82022-3.5692 2.1893-3.5692 3.0423 0 1.2517 0.386 1.1651 2-0.44897 2.2335-2.2335 4-2.6016 4-0.83333 0 0.64166-0.2918 0.87485-0.6485 0.51818-0.8745-0.87455-4.453 3.3419-3.7717 4.4442 0.296 0.479 0.062 0.87092-0.5208 0.87092-0.5824 0-1.0428 0.7875-1.023 1.75 0.028 1.3429 0.608 1.0521 2.495-1.25l2.4591-3v2.6151c0 1.4383-0.9277 3.8008-2.0676 5.25-2.8035 3.564-0.8928 3.339 3.0684-0.36132 1.7641-1.6479 3.6799-2.7042 4.2573-2.3474 0.6459 0.39922 0.3183 1.154-0.8517 1.9621-3.3058 2.2831-4.4015 3.427-4.4015 4.5952 0 0.62419 1.0415 0.15645 2.3144-1.0394 1.273-1.1959 2.848-2.1743 3.5-2.1743 1.9961 0 1.3195 2.7495-1.1556 4.6964-2.2135 1.7411-4.6588 5.3452-4.6588 6.8664 0 0.38189 1.7622-1.276 3.916-3.6843 3.154-3.5265 4.1659-4.1354 5.2-3.1286 0.7062 0.6875 2.2924 1.25 3.525 1.25 3.445 0 3.6999 1.6815 0.4716 3.1105-1.5958 0.70635-2.6845 1.8416-2.422 2.5256 0.2622 0.68336 0 2.0573-0.5765 3.0532-0.9442 1.6231-1.0564 1.6355-1.0837 0.11976-0.017-0.93004-0.5569-2.0164-1.2003-2.414-0.7956-0.49166-0.9576-0.1696-0.5063 1.0064 0.5395 1.4059 0.2672 1.6036-1.4553 1.0569-1.425-0.45227-1.8949-0.30993-1.4347 0.43461 0.3763 0.60892 1.4452 1.1214 2.3752 1.1389 1.4792 0.0278 1.4479 0.21566-0.2501 1.5-1.1717 0.8862-1.4228 1.4682-0.6335 1.4682 0.8557 0 1.1425 0.86419 0.8298 2.5-0.2628 1.375-0.1427 2.5 0.2669 2.5 1.3934 0 1.6309 4.6006 0.3016 5.8424-0.7281 0.68007-1.3034 2.2312-1.2786 3.4471 0.039 1.9312 0.2238 1.8314 1.4587-0.78943 1.3535-2.8723 1.4088-2.8936 1.2994-0.5-0.2675 5.8528 0.5819 6.9957 1.1149 1.5 0.3773-3.8905 0.1446-6.879-0.6619-8.5-1.7825-3.5825-1.5481-6.3056 0.7092-8.2383 2.709-2.3195 3.0655-1.1914 2.1959 6.9476-0.4138 3.8721-0.4264 7.8841-0.028 8.9154 0.3983 1.0314 0.969 3.0297 1.2682 4.4408 0.2993 1.4111 1.3994 3.5517 2.4447 4.7569s2.1878 3.9882 2.539 6.1844 1.0721 3.9931 1.602 3.9931c0.6148 0 0.6105-0.92812-0.012-2.5651-0.5364-1.4108-0.9753-3.6057-0.9753-4.8776s-0.675-2.8727-1.5-3.5574c-1.8498-1.5352-2.1244-14.976-0.3424-16.758 0.8768-0.87682 0.8423-1.5376-0.1425-2.7242-1.6692-2.0113-0.541-3.1995 1.4607-1.5383 1.7674 1.4668 2.1306 5.5129 0.3989 4.4426-0.7806-0.4824-0.9959 0.41391-0.7027 2.9252 0.2325 1.9914 0.1724 3.7403-0.1335 3.8865-0.306 0.14619-0.274 1.8408 0.071 3.7658l0.6272 3.5 0.1317-3.191c0.1975-4.7897 2.0161-5.0214 1.9502-0.24848-0.031 2.2558 0.3344 4.4929 0.8124 4.9712 0.4921 0.49252 0.7979-1.7477 0.7051-5.1649-0.093-3.4325 0.4726-7.5581 1.3122-9.5675 0.8118-1.9431 1.2228-4.1929 0.9132-4.9997-0.3451-0.89939-0.079-1.2962 0.6878-1.0258 0.6879 0.24253 2.3757-0.33493 3.7507-1.2833 2.9973-2.0672 5.8549-1.9709 9.3435 0.31493 1.4224 0.93196 3.0785 1.6945 3.6803 1.6945s0.8161 0.45 0.4762 1-0.2255 1 0.2543 1 1.4746 1.5347 2.2106 3.4105c0.9519 2.426 1.7996 3.2486 2.9366 2.8497 0.8792-0.30841 0.19 0.96938-1.5315 2.8395-4.1915 4.5534-5.449 7.1626-4.3155 8.9542 0.726 1.1476 0.918 1.0212 0.9302-0.61275 0.01-1.1324 0.6876-2.9324 1.5093-4 1.3771-1.7893 1.4631-1.5698 1.0995 2.8064-0.2214 2.6643 0.0007 4.5033 0.506 4.191 0.4953-0.30609 0.9005-2.5284 0.9005-4.9385s0.3838-4.6192 0.8529-4.9091c0.4692-0.28993 0.853 2.6085 0.853 6.441s-0.358 6.9681-0.7955 6.9681c-0.4376 0-0.6432 0.79101-0.4571 1.7578 0.1862 0.9668 0.021 4.8232-0.3665 8.5699-0.5091 4.9188-0.3501 7.279 0.5723 8.4922 0.7025 0.92406 1.2916 2.4641 1.3091 3.4224 0.03 1.6198 4.9143 6.8581 6.0318 6.4684 0.275-0.0959 1.5176 0.5384 2.7614 1.4096 2.3964 1.6785 11.802 1.5153 13.689-0.23759zm-7.45-1.8827c0-0.55 0.675-1 1.5-1s1.5 0.45 1.5 1-0.675 1-1.5 1-1.5-0.45-1.5-1zm-3.3913-0.72459c-0.3448-0.34487 0.3556-1.6729 1.5565-2.9512 2.9314-3.1204 0.831-2.9768-2.5707 0.17581-1.4837 1.375-3.0978 2.5-3.587 2.5-1.772 0-2.0994-2.051-0.5713-3.5791 0.8601-0.86007 1.5707-2.0941 1.5791-2.7423 0.01-0.73222 0.3554-0.64121 0.9134 0.24032 0.6338 1.0014 1.1078-0.0286 1.6108-3.5 0.392-2.7054 1.2185-5.5546 1.8366-6.3315 0.8779-1.1034 0.7963-1.3043-0.3725-0.91787-0.823 0.27211-1.7655 2.1503-2.0944 4.1737s-0.9444 4.0114-1.3678 4.4179c-0.4234 0.40643-0.4366-1.2758-0.029-3.7383 0.656-3.9666 0.5645-4.3312-0.8022-3.1969-1.2861 1.0674-1.6235 0.98039-2.0277-0.52275-0.2667-0.9917-0.4336-0.3406-0.3709 1.4469 0.063 1.7875 0.4983 3.25 0.9679 3.25 1.3252 0 0.3787 5.2939-1.0292 5.7562-0.6875 0.22575-1.2816-0.41454-1.3203-1.4229-0.064-1.6699-0.1517-1.655-0.9838 0.16667-0.8346 1.8271-0.9054 1.7839-0.819-0.5 0.1472-3.8934-0.1945-4.6773-1.0898-2.5-0.8089 1.9672-0.8353 1.9681-1.6114 0.0554-0.4392-1.0824-0.072-6.8381 0.828-12.981 1.1027-7.526 1.2856-11.241 0.5749-11.68-0.6281-0.38816-0.6686-0.8749-0.1021-1.225 0.517-0.31954 0.739-1.9508 0.4933-3.625-0.2811-1.9153-0.012-3.044 0.7257-3.044 0.6449 0 0.9137 0.41891 0.5972 0.9309-0.3164 0.512-0.07 1.2435 0.5487 1.6256 0.712 0.43999 0.8961 2.2069 0.5022 4.8191-0.4388 2.9097-0.3278 3.6826 0.3769 2.6244 0.5494-0.825 1.0058-2.9625 1.0142-4.75 0.01-1.7875 0.4653-3.25 1.0153-3.25 0.9796 0 1.4742 2.7004 1.1577 6.3207-0.088 1.0014 0.5927 2.5725 1.5116 3.4915 1.561 1.561 1.6328 1.4086 1.0924-2.3207-0.3182-2.1953-0.3562-3.4262-0.085-2.7352 0.2716 0.69093 0.8791 1.0181 1.35 0.72707s0.7699 1.1687 0.6645 3.2438c-0.1931 3.8024 1.678 5.495 1.9599 1.7729 0.083-1.1 0.1958-2.5625 0.25-3.25 0.054-0.6875 0.5539-1.25 1.1104-1.25 0.6066 0 0.8 1.7018 0.4829 4.25-0.4755 3.8203-0.3026 3.5929 1.7098-2.25 1.6283-4.7278 2.3355-5.8716 2.5938-4.195 0.1954 1.2678-0.1482 2.9115-0.7633 3.6528-0.8293 0.99925-0.8134 1.4494 0.062 1.7411 1.1586 0.38619 1.1104 0.63914-1.8665 9.8011-0.2681 0.825-0.6076 2.4-0.7545 3.5s-0.5311 3.8-0.8538 6c-0.633 4.3161-0.4158 3.699 4.048-11.5 0.8884-3.025 1.8498-6.175 2.1363-7 0.2866-0.825 0.5599-1.815 0.6074-2.2 0.1756-1.4232 2.4446-3.0056 3.4334-2.3945 1.6119 0.99618 0.166 7.6109-2.8623 13.095-1.5186 2.75-3.0876 6.125-3.4865 7.5l-0.7253 2.5 2.1645-2.263c1.1905-1.2446 1.8901-2.7071 1.5546-3.25-0.3356-0.5429-0.1336-0.98707 0.4489-0.98707 0.5824 0 0.9805-0.3375 0.8845-0.75-0.316-1.3579 2.4496-6.198 3.2565-5.6993 0.4343 0.26839-0.3527 2.9831-1.7488 6.0327-1.3962 3.0496-2.2799 5.8033-1.9638 6.1193 0.316 0.31606 0.9847-0.50026 1.4859-1.814 0.5012-1.3138 2.2773-5.2056 3.9468-8.6484 2.4275-5.0057 2.7854-6.51 1.7864-7.5089-0.6871-0.68707-1.0644-1.8037-0.8385-2.4814 0.3021-0.90631 0.823-0.81988 1.9697 0.32684 1.412 1.412 1.3849 2.0712-0.2875 6.9911-1.0155 2.9876-2.1104 5.4321-2.433 5.4321-0.3227 0-1.1833 2.6896-1.9126 5.9769-1.3017 5.8675-2.8731 8.3737-4.8957 7.8082-0.5607-0.1568-3.03 1.3805-5.4873 3.4161-2.4573 2.0357-4.75 3.419-5.0949 3.0742zm8.3913-1.3468c0-1.2109 1.7092-2.9367 4.4135-4.4564 1.006-0.56529 2.6296-3.6151 3.608-6.7773 0.9785-3.1622 2.329-6.4122 3.0012-7.2222 0.6722-0.80997 0.9756-1.4727 0.6743-1.4727-0.3014 0 0.3384-2.3625 1.4217-5.25s2.2272-6.0375 2.5421-7 0.9417-1.75 1.393-1.75c1.179 0-0.1044 7.1363-1.7036 9.4725-1.6449 2.403-1.7279 3.6114-0.2252 3.2775 0.6187-0.1375 1.3312 0.3125 1.5833 1s-0.015 1.25-0.5936 1.25-0.849 0.5625-0.6011 1.25c0.248 0.6875-0.4311 2.375-1.5091 3.75-1.5311 1.9529-1.9649 2.1299-1.9823 0.80902-0.012-0.93004 0.4278-1.9691 0.9778-2.309 0.55-0.33992 1-1.068 1-1.618 0-1.9803-2.0326 0.316-3.9157 4.4235-2.1277 4.6412-1.9011 6.088 0.4888 3.1215 1.1674-1.4489 1.6875-1.5993 2.0966-0.60618 0.3609 0.87594 1.0593 0.37072 2.0736-1.5 4.008-7.392 7.1741-14.334 7.6944-16.87 1.1224-5.4723 5.5623-12.789 5.5623-9.166 0 2.2223-3.5147 11.707-6.5645 17.716-1.5356 3.025-2.5992 5.5653-2.3637 5.645 0.2355 0.0798-0.429 1.0923-1.4768 2.25-1.9904 2.1994-1.8187 2.5118 0.8232 1.498 0.87-0.33384 1.5887-1.3463 1.5971-2.25 0.011-1.22 0.2233-1.3153 0.823-0.37035 0.5211 0.82098 1.2142-0.48844 1.9531-3.6894 0.63-2.7291 2.2846-7.3236 3.677-10.21 1.3924-2.8863 2.5316-5.8385 2.5316-6.5606 0-0.72207 0.6269-1.3128 1.393-1.3128 1.42 0 2.6142-1.9756 3.2771-5.4215 0.4278-2.2236 2.1907-4.5785 3.4276-4.5785 1.4126 0-6.5 18.102-8.224 18.815-0.4188 0.17303-0.5135 0.96053-0.2105 1.75 0.3029 0.78946 0.1276 1.4354-0.3895 1.4354-0.5172 0-0.9404 0.675-0.9404 1.5 0 2.246 1.5812 1.8074 2.7039-0.75 1.5495-3.5299 4.9978-9.1501 6.2889-10.25 0.6457-0.55 2.0739-2.7652 3.1739-4.9228 1.2169-2.3869 2.1178-3.3135 2.3009-2.3666 0.1654 0.85592-1.0948 4.1359-2.8006 7.2888-1.7058 3.153-2.9147 5.9195-2.6864 6.1478 0.428 0.42796 3.6613-3.9892 4.8658-6.6473 0.529-1.1673 0.6953-1.0719 0.75 0.43028 0.058 1.582-7.4781 14.57-8.4535 14.57-0.159 0-0.1012-1.0125 0.1283-2.25 0.3511-1.893 0.2132-1.8234-0.8686 0.43868-0.7073 1.4788-2.5097 4.1788-4.0054 6s-3.3827 4.2113-4.1932 5.3113c-0.9604 1.3034-1.4848 1.522-1.5055 0.62756-0.025-1.0879-0.3337-1.1219-1.488-0.16391-0.8009 0.66469-1.9592 0.89764-2.574 0.51767s-2.1426 0.27179-3.395 1.4484-3.9382 2.2883-5.9685 2.4705c-2.0303 0.18218-4.7138 1.2917-5.9633 2.4656-2.5101 2.3581-3.643 2.6886-3.643 1.0629zm-55-7.6786c0-0.77917 0.5344-1.2385 1.1875-1.0208 1.8131 0.60436 2.069 2.4375 0.3403 2.4375-0.8403 0-1.5278-0.6375-1.5278-1.4167zm0-3.231c0-0.53952-1.125-1.2633-2.5-1.6084s-2.5-0.95367-2.5-1.3524c0-1.726 1.4282-1.8217 4.6019-0.30828 3.4589 1.6494 4.6204 4.25 1.8981 4.25-0.825 0-1.5-0.44143-1.5-0.98095zm71-11.877c0-0.56337 0.45-1.3024 1-1.6424 0.55-0.33992 1-1.4824 1-2.5388s0.7356-3.7592 1.6347-6.0063c1.2335-3.0827 1.9085-3.7934 2.75-2.8952 0.8238 0.87915 0.7886 1.3101-0.1347 1.6486-0.6875 0.25209-1.25 1.2915-1.25 2.3099s-0.5248 3.1184-1.1662 4.6667-1.2039 3.2276-1.25 3.7318c-0.1175 1.2852-2.5838 1.9779-2.5838 0.72568zm-8.5326-2.4596c-0.4079-1.0113-0.238-2.3122 0.3831-2.9333 1.6463-1.6463 2.326-0.38692 1.2711 2.3554-0.8286 2.1543-0.995 2.2124-1.6542 0.57796zm5.3247-6.224c-0.7525-0.75244 1.4088-6.4587 2.4462-6.4587 0.8745 0-0.076 5.0313-1.1841 6.2667-0.3781 0.42166-0.9461 0.50809-1.2621 0.19206zm-67.56-6.4587c0-1.925 0.2058-2.7125 0.4573-1.75s0.2515 2.5375 0 3.5-0.4573 0.175-0.4573-1.75zm45.847 0.25c0.045-1.5674 0.3178-2.1049 0.6343-1.25 0.3054 0.825 1 2.0625 1.5435 2.75 0.7055 0.89241 0.5241 1.25-0.6343 1.25-1.1224 0-1.5981-0.84754-1.5435-2.75zm23.109-4.3125c0.2406-0.72187 1.0281-1.5094 1.75-1.75 0.75-0.25 1.125 0.125 0.875 0.875-0.2406 0.72187-1.0281 1.5094-1.75 1.75-0.75 0.25-1.125-0.125-0.875-0.875zm-69.496-0.6875c-0.2346-0.4125-0.456-2.2125-0.4921-4-0.044-2.1853 0.4038-3.25 1.3675-3.25 0.7882 0 1.4331 0.45 1.4331 1s-0.3721 1-0.8268 1c-0.4548 0-0.6287 1.35-0.3865 3 0.4131 2.8145-0.1345 3.9393-1.0952 2.25zm89.308-7.75c0-1.925 0.45-3.5 1-3.5s1 0.51289 1 1.1398c0 0.62686 0.7437 1.6836 1.6528 2.3483 1.9885 1.4541 0.9855 3.512-1.7118 3.512-1.5516 0-1.941-0.70214-1.941-3.5zm9.382-5.691c-0.4049-0.65504-0.2064-1.3675 0.4409-1.5833 0.6474-0.21579 1.1771-1.0298 1.1771-1.809 0-0.97866 1.1989-1.4167 3.8776-1.4167 2.2267 0 4.4075-0.63859 5.1224-1.5 0.6847-0.825 1.8686-1.5 2.6309-1.5 1.1436 0 1.1659 0.39358 0.1276 2.25-1.7521 3.1324-2.776 3.7171-6.5399 3.7347-1.9832 0.009-3.5091 0.60874-3.857 1.5153-0.6923 1.8041-1.9735 1.937-2.9796 0.30902zm-20.382-1.702c0-1.0832 2.4691-2.107 5.0818-2.107 2.3178 0 2.5356 1.5491 0.3364 2.393-2.3415 0.89853-5.4182 0.73612-5.4182-0.28602zm-36.5-1.3245c-1.1-0.63414-2.5946-1.7446-3.3214-2.4678-0.7268-0.72312-1.9643-1.3148-2.75-1.3148s-1.4286-0.43588-1.4286-0.96862c0-0.53273-0.5625-0.75276-1.25-0.48894-0.8841 0.33926-1.25-0.81727-1.25-3.9508 0-3.3127-0.6117-5.0816-2.4243-7.0111-1.3334-1.4193-2.8363-2.5806-3.3397-2.5806-2.1739 0-4.6708-4.6771-4.7027-8.809-0.018-2.37 0.3657-4.0624 0.8534-3.761 1.1586 0.71607 2.6817-1.2756 3.4532-4.5157 0.4429-1.8598-0.08-3.5286-1.8621-5.9443-1.3628-1.8472-2.4778-4.1711-2.4778-5.1642 0-0.99315-0.3375-1.8092-0.75-1.8135-1.2354-0.0128-3.1478-4.9373-2.1556-5.5505 0.4981-0.30783 0.9056-1.4194 0.9056-2.4703 0-1.0508 0.9066-3.5248 2.0147-5.4977 1.7997-3.2041 1.853-3.7488 0.5-5.1018-1.3955-1.3955-2.1173-4.3719-1.0602-4.3719 0.25 0 1.6 1.1454 3 2.5454 2.7883 2.7883 3.4 6.4546 1.0769 6.4546-0.8474 0-1.2416 0.59171-0.9318 1.3988 0.2952 0.76937 0.056 1.6959-0.5314 2.059-0.5875 0.36309-1.0682 1.5602-1.0682 2.6602s-0.45 1.7219-1 1.382c-0.55-0.33992-1 0.0835-1 0.94098 0 0.85746 0.366 1.559 0.8134 1.559 0.8437 0 6.1866 12.877 6.1866 14.91 0 0.63426-0.9117 3.8595-2.026 7.1672-1.8161 5.3912-1.8679 6.172-0.5 7.5399 0.8393 0.83927 1.526 1.9704 1.526 2.5135 0 0.54317 0.3811 0.75203 0.847 0.46412 1.1002-0.67995 6.3946 4.8305 5.5003 5.7248-0.3743 0.37437-0.1556 0.68067 0.486 0.68067 0.6417 0 1.1134 0.3375 1.0483 0.75-0.577 3.6544 0.5046 5.539 4.7095 8.2057 2.5252 1.6014 5.2708 2.6508 6.1015 2.3321 1.0633-0.40804 1.4062-0.043 1.1588 1.2335-0.4488 2.3155-1.8289 2.7155-4.3514 1.2613zm2.7049-5.5829c0.2377-1.2163 1.1247-1.6062 3.1189-1.3708 1.5327 0.18084 3.917-0.41177 5.2984-1.3169 1.6139-1.0575 2.9345-1.316 3.6947-0.72324 3.4614 2.6989 10.501 1.8385 14.691-1.7956 3.1206-2.7064 4.1824-2.505 2.7991 0.53096-1.0731 2.3553-2.6471 3.1892-7.3117 3.8738-1.0378 0.15232-2.0555 0.78255-2.2615 1.4005-0.4011 1.2032-5.9159 0.5567-7.8077-0.91523-0.6045-0.47038-1.5789-0.3304-2.2296 0.32033-0.6357 0.6357-3.2186 1.2773-5.7398 1.4258-3.8576 0.22724-4.5314 0.00069-4.2519-1.4296zm-24.205-3.6996c0-0.825 0.45-1.5 1-1.5s1 0.675 1 1.5-0.45 1.5-1 1.5-1-0.675-1-1.5zm-51.393-2.0818c-1.0834-2.8232-0.6878-6.6124 0.643-6.1586 0.6875 0.23446 1.116 1.3571 0.9521 2.4947-0.1638 1.1376 0.1811 2.3644 0.7664 2.7262 1.1354 0.70177 0.4713 2.5195-0.9205 2.5195-0.4587 0-1.1072-0.7118-1.441-1.5818zm34.393-1.8112c0-0.21616 0.675-0.65203 1.5-0.96862 0.825-0.31658 1.5-0.13972 1.5 0.39301 0 0.53274-0.675 0.96862-1.5 0.96862s-1.5-0.17686-1.5-0.39301zm71.564-1.9001c0.3755-0.98622 0.9347-1.5412 1.2426-1.2333 0.3079 0.30789 0.0006 1.1148-0.6828 1.7931-0.9876 0.98026-1.1025 0.8654-0.5598-0.5598zm30.785-7.7069c0.3427-1.375 0.6291-3.0625 0.6366-3.75 0.019-1.722 1.9512-1.5764 2.6322 0.19828 0.3057 0.79655-0.4449 2.484-1.668 3.75l-2.2237 2.3017 0.6229-2.5zm-103.85-3c0.3399-0.55 1.0415-1 1.559-1 0.5176 0 0.941 0.45 0.941 1s-0.7016 1-1.559 1c-0.8575 0-1.2809-0.45-0.941-1zm79.5-1.8776c0-0.48265 0.675-1.4378 1.5-2.1224 0.825-0.68469 1.5017-0.85229 1.5037-0.37245 0 0.47985 0.9499-0.67953 2.1063-2.5764 1.4751-2.4198 2.2035-5.5527 2.441-10.5 0.1862-3.8781 0.3634-7.3886 0.3938-7.8012 0.03-0.4125 0.4579-0.75 0.9502-0.75 1.576 0 1.7893 8.3196 0.359 14-0.8863 3.5197-2.422 6.4902-4.2653 8.25-2.8721 2.7422-4.9887 3.5367-4.9887 1.8724zm-83-17.745c0-1.3288 0.2715-1.3971 1.5-0.37755 0.825 0.68469 1.5 1.4148 1.5 1.6224 0 0.20766-0.675 0.37756-1.5 0.37756s-1.5-0.7301-1.5-1.6224zm83.105-24.438c-3.0044-1.2319-2.6457-1.5311 2.6454-2.2064 2.7389-0.34956 4.0278-0.18259 3.6248 0.46955-0.3958 0.64033 0.1985 0.75048 1.6181 0.29993 1.6505-0.52384 2.1257-0.3539 1.7979 0.64287-0.5445 1.6557-6.4119 2.1367-9.6862 0.7941zm-78.105-4.8211c0-0.55 0.45-1.2781 1-1.618 0.55-0.33992 1-0.16803 1 0.38197s-0.45 1.2781-1 1.618c-0.55 0.33992-1 0.16803-1-0.38197zm50.338-4.9206c-3.129-3.6298-3.183-3.6481-5.25-1.7775-1.6 1.448-2.0884 1.555-2.0884 0.45727 0-0.78801 0.883-2.1888 1.9622-3.1129 1.8701-1.6012 2.1435-1.506 5.8214 2.0278 2.2406 2.1528 4.6115 3.563 5.6529 3.3624 1.1483-0.22117 1.6342 0.1387 1.3503 1-0.8636 2.6202-4.2753 1.7238-7.4484-1.957zm20.398-0.56864c-4.2722-3.261-4.4567-3.3069-5.6459-1.4026-1.9837 3.1764-2.4588 1.2054-0.5062-2.1001 1.6787-2.8418 1.8682-2.9126 3.3474-1.2498 0.8624 0.9694 2.3555 2.0547 3.318 2.4118 0.9625 0.35706 1.75 1.1399 1.75 1.7396 0 0.59972 0.45 0.81229 1 0.47237s1-0.1556 1 0.4096 0.675 0.76861 1.5 0.45203c0.9498-0.36449 1.5 0.0138 1.5 1.0314 0 2.5051-2.4497 1.9101-7.2633-1.7642zm-34.549-4.6913c0.2406-0.72188 1.0281-1.5094 1.75-1.75 0.75-0.25 1.125 0.125 0.875 0.875-0.2406 0.72187-1.0281 1.5094-1.75 1.75-0.75 0.25-1.125-0.125-0.875-0.875z" style="fill:#000000" id="path2830"></path>
  </g>
  <metadata>
    
      
        image/svg+xml
        
        
        
          
            Openclipart
          
        
        World Cup
        2010-06-11T11:35:53
        
        https://openclipart.org/detail/65779/world-cup-by-clemzo
        
          
            Clemzo
          
        
        
          
            coupe
            cup
            foot-ball
            monde
            world
            worldcup
          
        
      
      
        
        
        
      
    
  </metadata>
</svg>

</div>
<style>
/* From Uiverse.io by aboalsim114 - Tags: card */
.card {
  position: relative;
  padding: 10px;
  font: 500 15px / 15px Almohtarif;
  vertical-align: baseline;
  box-sizing: border-box;
  background: #fff;
  border-radius: 8px;
  width: 200px;
  height: 250px;
  z-index: 1;
  transition: all 500ms ease-in-out;
}

.card::after {
  content: '2022';
  width: 200px;
  height: 35%;
  background-color: blue;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  display: flex;
  font-size: 30px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.card::before {
  content: 'france';
  color: #fff;
  text-transform: uppercase;
  width: 200px;
  height: 35%;
  background-color: red;
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.card:hover {
  transform: scale(1.1);
}

.card svg {
  width: 100px;
  align-items: center;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

</style>


================================================
FILE: Cards/abrahamcalsin_grumpy-ape-40.html
================================================
<div class="card-client">
    <div class="user-picture">
        <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
            <path d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"></path>
        </svg>
    </div>
    <p class="name-client"> Jhon Doe
        <span>CEO of WritBook
        </span>
    </p>
    <div class="social-media">
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
            </svg>
            <span class="tooltip-social">Twitter</span>
        </a>
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
            </svg>
            <span class="tooltip-social">Instagram</span>
        </a>
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path>
            </svg>
            <span class="tooltip-social">Facebook</span>
        </a>
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                <path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
            </svg>
            <span class="tooltip-social">LinkedIn</span>
        </a>
    </div>
</div>
<style>
/* From Uiverse.io by abrahamcalsin - Tags: card */
.card-client {
  background: #2cb5a0;
  width: 13rem;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 20px;
  padding-right: 20px;
  border: 4px solid #7cdacc;
  box-shadow: 0 6px 10px rgba(207, 212, 222, 1);
  border-radius: 10px;
  text-align: center;
  color: #fff;
  font-family: "Poppins", sans-serif;
  transition: all 0.3s ease;
}

.card-client:hover {
  transform: translateY(-10px);
}

.user-picture {
  overflow: hidden;
  object-fit: cover;
  width: 5rem;
  height: 5rem;
  border: 4px solid #7cdacc;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.user-picture svg {
  width: 2.5rem;
  fill: currentColor;
}

.name-client {
  margin: 0;
  margin-top: 20px;
  font-weight: 600;
  font-size: 18px;
}

.name-client span {
  display: block;
  font-weight: 200;
  font-size: 16px;
}

.social-media:before {
  content: " ";
  display: block;
  width: 100%;
  height: 2px;
  margin: 20px 0;
  background: #7cdacc;
}

.social-media a {
  position: relative;
  margin-right: 15px;
  text-decoration: none;
  color: inherit;
}

.social-media a:last-child {
  margin-right: 0;
}

.social-media a svg {
  width: 1.1rem;
  fill: currentColor;
}

/*-- Tooltip Social Media --*/
.tooltip-social {
  background: #262626;
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  padding: 0.5rem 0.4rem;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -90%);
  transition: all 0.2s ease;
  z-index: 1;
}

.tooltip-social:after {
  content: " ";
  position: absolute;
  bottom: 1px;
  left: 50%;
  border: solid;
  border-width: 10px 10px 0 10px;
  border-color: transparent;
  transform: translate(-50%, 100%);
}

.social-media a .tooltip-social:after {
  border-top-color: #262626;
}

.social-media a:hover .tooltip-social {
  opacity: 1;
  transform: translate(-50%, -130%);
}
</style>


================================================
FILE: Cards/abrahamcalsin_odd-zebra-96.html
================================================
<div class="plan-card">
    <h2>Business<span>For business services</span></h2>
    <div class="etiquet-price">
        <p>254.99</p>
        <div></div>
    </div>
    <div class="benefits-list">
        <ul>
            <li><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"></path>
                </svg><span>Analysis</span></li>
            <li><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"></path>
                </svg><span>Consulting</span></li>
            <li><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"></path>
                </svg><span>Facilitate</span></li>
        </ul>
    </div>
    <div class="button-get-plan">
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-rocket">
                <path d="M156.6 384.9L125.7 353.1C117.2 345.5 114.2 333.1 117.1 321.8C120.1 312.9 124.1 301.3 129.8 288H24C15.38 288 7.414 283.4 3.146 275.9C-1.123 268.4-1.042 259.2 3.357 251.8L55.83 163.3C68.79 141.4 92.33 127.1 117.8 127.1H200C202.4 124 204.8 120.3 207.2 116.7C289.1-4.07 411.1-8.142 483.9 5.275C495.6 7.414 504.6 16.43 506.7 28.06C520.1 100.9 516.1 222.9 395.3 304.8C391.8 307.2 387.1 309.6 384 311.1V394.2C384 419.7 370.6 443.2 348.7 456.2L260.2 508.6C252.8 513 243.6 513.1 236.1 508.9C228.6 504.6 224 496.6 224 488V380.8C209.9 385.6 197.6 389.7 188.3 392.7C177.1 396.3 164.9 393.2 156.6 384.9V384.9zM384 167.1C406.1 167.1 424 150.1 424 127.1C424 105.9 406.1 87.1 384 87.1C361.9 87.1 344 105.9 344 127.1C344 150.1 361.9 167.1 384 167.1z"></path>
            </svg>
            <span>START PROJECT</span>
        </a>
    </div>
</div>
<style>
/* From Uiverse.io by abrahamcalsin - Tags: card */
.plan-card {
  background: #fff;
  width: 15rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 10px;
  padding-bottom: 20px;
  border-radius: 10px;
  border-bottom: 4px solid #000446;
  box-shadow: 0 6px 30px rgba(207, 212, 222, 0.3);
  font-family: "Poppins", sans-serif;
}

.plan-card h2 {
  margin-bottom: 15px;
  font-size: 27px;
  font-weight: 600;
}

.plan-card h2 span {
  display: block;
  margin-top: -4px;
  color: #4d4d4d;
  font-size: 12px;
  font-weight: 400;
}

.etiquet-price {
  position: relative;
  background: #fdbd4a;
  width: 14.46rem;
  margin-left: -0.65rem;
  padding: .2rem 1.2rem;
  border-radius: 5px 0 0 5px;
}

.etiquet-price p {
  margin: 0;
  padding-top: .4rem;
  display: flex;
  font-size: 1.9rem;
  font-weight: 500;
}

.etiquet-price p:before {
  content: "$";
  margin-right: 5px;
  font-size: 15px;
  font-weight: 300;
}

.etiquet-price p:after {
  content: "/ handle";
  margin-left: 5px;
  font-size: 15px;
  font-weight: 300;
}

.etiquet-price div {
  position: absolute;
  bottom: -23px;
  right: 0px;
  width: 0;
  height: 0;
  border-top: 13px solid #c58102;
  border-bottom: 10px solid transparent;
  border-right: 13px solid transparent;
  z-index: -6;
}

.benefits-list {
  margin-top: 16px;
}

.benefits-list ul {
  padding: 0;
  font-size: 14px;
}

.benefits-list ul li {
  color: #4d4d4d;
  list-style: none;
  margin-bottom: .2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.benefits-list ul li svg {
  width: .9rem;
  fill: currentColor;
}

.benefits-list ul li span {
  font-weight: 300;
}

.button-get-plan {
  display: flex;
  justify-content: center;
  margin-top: 1.2rem;
}

.button-get-plan a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000446;
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  font-size: .8rem;
  letter-spacing: .05rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.button-get-plan a:hover {
  transform: translateY(-3%);
  box-shadow: 0 3px 10px rgba(207, 212, 222, 0.9);
}

.button-get-plan .svg-rocket {
  margin-right: 10px;
  width: .9rem;
  fill: currentColor;
}
</style>


================================================
FILE: Cards/absoluteSTrange_cowardly-sloth-96.html
================================================
<div class="card shadow">
</div>
<style>
/* From Uiverse.io by absoluteSTrange - Tags: card */
.card {
 width: 190px;
 height: 254px;
 background: white;
 border-radius: 10px;
 transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shadow {
 box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
}


</style>


================================================
FILE: Cards/adamgiebl_blue-mole-92.html
================================================
<div class="card">
<div class="card__content"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
</div>
<style>
/* From Uiverse.io by adamgiebl - Tags: gradient, card */
.card {
  position: relative;
  width: 190px;
  height: 254px;
  background: lightgrey;
  box-shadow: #d11bff42 0 15px 40px -5px;
  z-index: 1;
  border-radius: 21px;
  overflow: hidden;
}

.card__content {
  background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25));
  z-index: 1;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
}

.card .blob {
  position: absolute;
  z-index: -1;
  border-radius: 5em;
  width: 200px;
  height: 200px;
}

.card .blob:nth-child(2) {
  left: -50px;
  top: -90px;
  background: #ff930f;
}

.card .blob:nth-child(3) {
  left: 110px;
  top: -20px;
  z-index: -1;
  background: #bf0fff;
}

.card .blob:nth-child(4) {
  left: -40px;
  top: 100px;
  background: #ff1b6b;
}

.card .blob:nth-child(5) {
  left: 100px;
  top: 180px;
  background: #0061ff;
}
</style>


================================================
FILE: Cards/adamgiebl_horrible-rabbit-39.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by adamgiebl - Tags: skeuomorphism, glassmorphism, card, claymorphism */
.card {
  width: 190px;
  height: 254px;
  background: rgb(223, 225, 235);
  border-radius: 50px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
</style>


================================================
FILE: Cards/adamgiebl_new-crab-79.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by adamgiebl - Tags: card */
.card {
  width: 190px;
  height: 254px;
  background: rgb(236, 236, 236);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
</style>


================================================
FILE: Cards/adamgiebl_new-lionfish-4.html
================================================
<div class="card">
<div class="card__content">
</div></div>
<style>
/* From Uiverse.io by adamgiebl - Tags: card */
.card {
  width: 190px;
  height: 254px;
  border-radius: 20px;
  padding: 5px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
}

.card__content {
  background: rgb(5, 6, 45);
  border-radius: 17px;
  width: 100%;
  height: 100%;
}
</style>


================================================
FILE: Cards/adamgiebl_serious-penguin-95.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by adamgiebl - Tags: neumorphism, card */
.card {
  width: 190px;
  height: 254px;
  border-radius: 30px;
  background: lightgrey;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 50px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 26px -18px inset;
}
</style>


================================================
FILE: Cards/adamgiebl_stale-catfish-69.html
================================================
<div class="card">
  <div class="card-content">Test</div>
</div>

<style>
/* From Uiverse.io by adamgiebl  - Tags: form, card, hover */
.card {
  width: 190px;
  background: lightgrey;
}

</style>
    

================================================
FILE: Cards/adamgiebl_strong-zebra-87.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by adamgiebl - Tags: neumorphism, card */
.card {
  width: 190px;
  height: 254px;
  border-radius: 30px;
  background: #e0e0e0;
  box-shadow: 15px 15px 30px #bebebe,
             -15px -15px 30px #ffffff;
}
</style>


================================================
FILE: Cards/ahkamboh_quiet-rat-82.html
================================================
<!-- From Uiverse.io by ahkamboh - Tags: notification, card, Alerts -->

  <div role="alert" class="max-w-[300px] p-2 bg-indigo-800 rounded-full items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex">
    <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">New</span>
    <span class="font-semibold mr-2 text-left flex-auto">Get the coolest t-shirts</span>
    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="fill-current opacity-75 h-4 w-4"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"></path></svg>
  </div>




================================================
FILE: Cards/ahmed150up_afraid-octopus-75.html
================================================
<div class="card-container">
  <div class="card-header">
    <div class="img-avatar"></div>
    <div class="text-chat">Chat</div>
  </div>
  <div class="card-body">
    <div class="messages-container">
        <div class="message-box left">
            <p>Hello, How are you?</p>
        </div>
        <div class="message-box right">
            <p>I'm good, thanks for asking! How about you?</p>
        </div>
    </div>
    <div class="message-input">
      <form>
        <textarea placeholder="Type your message here" class="message-send"></textarea>
        <button type="submit" class="button-send">Send</button>
      </form>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by ahmed150up - Tags: card */
.card-container {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  width: 280px;
}

.card-header {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.card-header .img-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
  background-color: #333;
}

.card-header .text-chat {
  color: black;
  margin: 0;
  font-size: 20px;
}

.card-body {
  flex: 1;
  overflow-y: auto;
}

.messages-container {
  padding: 15px;
}

.message-box {
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 10px;
}

.message-box.left {
  background-color: #f1f1f1;
  color: black;
  font-size: 13px;
  left: 0;
}

.message-box.right {
  background-color: #333;
  color: #fff;
  font-size: 13px;
  right: 0;
}

.message-input {
  padding: 5px;
  border-top: 1px solid #ccc;
}

.message-input .message-send {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  resize: none;
}

.message-input .button-send {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  margin-left: 10px;
  border-radius: 10px;
  font-size: 13px;
}

.message-input .button-send:hover {
  background-color: #f1f1f1;
  color: #333;
}

</style>


================================================
FILE: Cards/ahmed150up_clever-fly-79.html
================================================
<div class="chat-card">
  <div class="chat-header">
   <div class="h2">ChatGPT</div>
  </div>
  <div class="chat-body">
    <div class="message incoming">
      <p>Hello, how can I assist you today?</p>
    </div>
    <div class="message outgoing">
      <p>I have a question about your services.</p>
    </div>
    <div class="message incoming">
      <p>Sure, I'm here to help. What would you like to know?</p>
    </div>
    
  </div>
  <div class="chat-footer">
    <input placeholder="Type your message" type="text">
    <button>Send</button>
  </div>
</div>

<style>
/* From Uiverse.io by ahmed150up - Tags: card, chat, chatgpt */
.chat-card {
  width: 300px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chat-header {
  padding: 10px;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
}

.chat-header .h2 {
  font-size: 16px;
  color: #333;
}

.chat-body {
  padding: 20px;
}

.message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}

.incoming {
  background-color: #e1e1e1;
}

.outgoing {
  background-color: #f2f2f2;
  text-align: right;
}

.message p {
  font-size: 14px;
  color: #333;
  margin: 0;
}

.chat-footer {
  padding: 10px;
  background-color: #f2f2f2;
  display: flex;
}

.chat-footer input[type="text"] {
  flex-grow: 1;
  padding: 5px;
  border: none;
  border-radius: 3px;
}

.chat-footer button {
  padding: 5px 10px;
  border: none;
  background-color: #4285f4;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.chat-footer button:hover {
  background-color: #0f9d58;
}

@keyframes chatAnimation {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-card .message {
  animation: chatAnimation 0.3s ease-in-out;
  animation-fill-mode: both;
  animation-delay: 0.1s;
}

.chat-card .message:nth-child(even) {
  animation-delay: 0.2s;
}

.chat-card .message:nth-child(odd) {
  animation-delay: 0.3s;
}

</style>


================================================
FILE: Cards/ahmed150up_clever-panda-88.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by ahmed150up - Tags: card */
.card {
  position: relative;
  width: 400px;
  height: 300px;
  background-color: rgb(0, 0, 0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  transition: transform 0.3s ease-in-out;
}

.card:hover {
  transform: scale(1.05);
}

.heading {
  padding: 20px;
  border-radius: 20px;
  background-color: rgb(22, 21, 21);
  color: #fff;
  font-size: 24px;
  font-weight: bold;
}

.heading span {
  color: rgba(157,71,255,1);
}

.content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: calc(78% - 80px);
  padding: 40px 20px;
  background-color: #000000;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.item:hover {
  transform: translateY(-10px);
}

.item svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  fill: #333;
  transition: all 0.3s;
  color: #333;
}

.item span {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #333;
}

.card .item:hover {
  background-color: #000000;
  cursor: pointer;
}

.card .item--create:hover span {
  color: rgb(51, 255, 0);
}

.card .item--create:hover svg {
  color: rgb(94, 255, 0);
}

.card .item--create:hover svg {
  transform: rotate(45deg);
}

.card .item--post:hover span {
  color: rgba(157,71,255,1);
}

.card .item--post:hover svg {
  color: rgba(157,71,255,1);
  transform: scale(1.2);
}

.card .item--inspire:hover svg {
  color: yellow;
  transform: scale(1.2);
}

.card .item--inspire:hover span {
  color: yellow;
  transform: scale(1.2);
}

button {
  background: rgba(157,71,255,1);
  width: 100%;
  padding: 12px 20px;
  border-radius: 0px 200px 0px 200px;
  -moz-border-radius: 0px 200px 0px 200px;
  -webkit-border-radius: 0px 200px 0px 200px;
  font-size: 18px;
  border: none;
  transition: transform 0.3s ease-in-out;
  font-weight: bold;
}

button:hover {
  background: rgba(145,71,255,1);
  color: #fff;
  transform: scale(1.01);
}
</style>


================================================
FILE: Cards/ahmed150up_dry-monkey-74.html
================================================
<div class="card-container">
    <div class="card-header">Voice Chat</div>
    <div class="card-body">
      <audio controls="">
        <source type="audio/mpeg" src="">
        Your browser does not support the audio element.
      </audio>
    </div>
    <div class="card-footer">
        <button class="mute-button">Mute</button>
        <button class="unmute-button">Unmute</button>
    </div>
</div>

<style>
/* From Uiverse.io by ahmed150up - Tags: card */
.card-container {
  width: 330px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: #333;
  color: #fff;
  padding: 10px;
  font-size: 20px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.card-body {
  padding: 10px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.mute-button, .unmute-button {
  background-color: #333;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
}

.mute-button:hover, .unmute-button:hover {
  background-color: rgb(247, 247, 247);
  color: rgb(0, 0, 0);
}

</style>


================================================
FILE: Cards/ahmed150up_fluffy-dragonfly-49.html
================================================
<div class="card">
  <a class="social-link1">
    <svg viewBox="0 0 16 16" class="bi bi-instagram" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: white"> <path fill="white" d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path> </svg>
  </a>
  <a class="social-link2">
    <svg viewBox="0 0 16 16" class="bi bi-twitter" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: white"> <path fill="white" d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path> </svg>              </a>
  <a class="social-link3">
    <svg viewBox="0 0 16 16" class="bi bi-discord" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: white"> <path fill="white" d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"></path> </svg>
  </a>
  <a class="social-link4">
    <svg viewBox="0 0 16 16" class="bi bi-whatsapp" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: white"> <path fill="white" d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"></path> </svg>
  </a>
</div>             
<style>
/* From Uiverse.io by ahmed150up - Tags: twitter, instagram, card, Discord, social media, whatsapp */
.card {
  display: flex;
  height: 70px;
  width: 270px;
}

.card svg {
  position: absolute;
  display: flex;
  width: 60%;
  height: 100%;
  font-size: 24px;
  font-weight: 700;
  opacity: 1;
  transition: opacity 0.25s;
  z-index: 2;
  cursor: pointer;
}

.card .social-link1,.card .social-link2,.card .social-link3,.card .social-link4 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25%;
  color: whitesmoke;
  font-size: 24px;
  text-decoration: none;
  transition: 0.25s;
  border-radius: 50px;
}

.card svg {
  transform: scale(1);
}

.card .social-link1:hover {
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  animation: bounce_613 0.4s linear;
}

.card .social-link2:hover {
  background-color: #00ccff;
  animation: bounce_613 0.4s linear;
}

.card .social-link3:hover {
  background-color: #5865f2;
  animation: bounce_613 0.4s linear;
}

.card .social-link4:hover {
  background-color: #12a50b;
  animation: bounce_613 0.4s linear;
}

@keyframes bounce_613 {
  40% {
    transform: scale(1.4);
  }

  60% {
    transform: scale(0.8);
  }

  80% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}
</style>


================================================
FILE: Cards/ahmed150up_funny-rabbit-10.html
================================================
<div class="voice-chat-card">
  <div class="voice-chat-card-header">
    <img class="avatar">
    <div class="username">User name</div>
    <div class="status"></div>
  </div>
  <div class="voice-chat-card-body">

    <div class="audio-container">
      <audio controls="">
        <source type="audio/mp3" src="">
        Your browser does not support the audio element.
      </audio>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by ahmed150up - Tags: card */
.voice-chat-card {
  width: 300px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 2px 2px 10px #ccc;
  padding: 10px;
  background-color: #e8e8e8;
}

.voice-chat-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  color: black;
  background-color: #333;
}

.username {
  margin: 0;
  font-size: 18px;
  color: black;
}

.status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: green;
  margin-left: 10px;
}

.voice-chat-card-body {
  padding: 10px;
}

.status-text {
  font-size: 14px;
  margin-bottom: 10px;
}

.audio-container {
  display: flex;
  align-items: center;
}

audio {
  width: 100%;
}

</style>


================================================
FILE: Cards/ahmed150up_fuzzy-bird-5.html
================================================
<div class="card">
  <div class="header">My Skills</div>
  <div class="body">
    <div class="skill">
      <div class="skill-name">HTML</div>
      <div class="skill-level">
        <div class="skill-percent" style="width: 90%"></div>
      </div>
      <div class="skill-percent-number">90%</div>
    </div>
    <div class="skill">
      <div class="skill-name">CSS</div>
      <div class="skill-level">
        <div class="skill-percent" style="width: 80%"></div>
      </div>
      <div class="skill-percent-number">80%</div>
    </div>
    <div class="skill">
      <div class="skill-name">JavaScript</div>
      <div class="skill-level">
        <div class="skill-percent" style="width: 75%"></div>
      </div>
      <div class="skill-percent-number">75%</div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by ahmed150up - Tags: card */
.card {
  width: 300px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 18px;
}

.body {
  padding: 20px;
}

.skill {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.skill-name {
  width: 120px;
  font-size: 16px;
}

.skill-level {
  width: 160px;
  height: 10px;
  background-color: #eee;
  border-radius: 10px;
  overflow: hidden;
  margin-left: 20px;
}

.skill-percent {
  background-color: #333;
  height: 100%;
}

.skill-percent-number {
  margin-left: 20px;
  font-size: 16px;
}

</style>


================================================
FILE: Cards/ahmedgamal-hub_popular-starfish-56.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by ahmedgamal-hub - Tags: card, about me, blur filter, animated, circle loader, border, advanced, box-shadow */
@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.one-div {
  position: relative;
  font-size: 20px;
  color: #fff;
  text-align: center;
  display: inline-block;
  width: 15rem;
  height: 15rem;
  vertical-align: text-center;
}

.one-div::after {
  content: '';
  position: absolute;
  left: 0;
  top: -10px;
  width: 100%;
  height: 100%;
  border: 0.25em solid currentColor;
  border-right-color: #2AE4FF;
  border-top-color: #2AE4FF;
  border-bottom-color: #2AE4FF;
  border-radius: 50%;
  box-shadow: 0 0 3px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0ba9ca,
  0 0 110px #ED306F, 0 0 80px #0ba9ca;
  -webkit-animation: spinner-border 7s linear infinite;
  animation: spinner-border 7s linear infinite;
}


</style>


================================================
FILE: Cards/ahmedyasserdev_cuddly-gecko-77.html
================================================
<div class="three-d-card">
  <div class="card-wrapper">
    <div class="card-face front">
      <div class="card-content">
        <div class="card-title">3D Card</div>
        <div class="card-description">Hover over me for a 3D effect!</div>
      </div>
    </div>
    <div class="card-face back">
      <div class="card-content">
        <div class="card-title">Back Side</div>
        <div class="card-description">This is the back of the 3D card.</div>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by ahmedyasserdev  - Tags: card, hover effect, cardhover , card hover, 3d card */
.three-d-card {
  position: relative;
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.card-wrapper {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.three-d-card:hover .card-wrapper {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #3498db;
  border-radius: 15px;
  background-color: #fff;
}

.card-face.front {
  transform: rotateY(0deg);
}

.card-face.back {
  transform: rotateY(180deg);
}

.card-content {
  text-align: center;
  color: #333;
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-description {
  font-size: 16px;
}

</style>
    

================================================
FILE: Cards/ahmedyasserdev_fat-warthog-51.html
================================================
<div class="unique-card">
  <div class="background-overlay"></div>
  <div class="card-content">
    <div class="card-title">Unique Card</div>
    <div class="card-description">Hover over me for a distinct effect!</div>
  </div>
</div>

<style>
/* From Uiverse.io by ahmedyasserdev  - Tags: card, cool card, card hover */
.unique-card {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, box-shadow 0.3s;
}

.unique-card:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.card-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #888;
  z-index: 2;
  transition: color 0.3s;
}

.unique-card:hover .card-content {
  color: #ff7e5f;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(52, 73, 94, 0.7);
  border-radius: 15px;
  opacity: 0;
  transition: opacity 0.3s;
}

.unique-card:hover .background-overlay {
  opacity: 1;
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-description {
  font-size: 16px;
}

</style>
    

================================================
FILE: Cards/ahmedyasserdev_lucky-jellyfish-37.html
================================================
<!-- From Uiverse.io by ahmedyasserdev  - Tags: minimalist, card, hover effect, card template, cool card, cardhover , card hover -->
<div
  class="max-w-xs overflow-hidden bg-white border border-gray-200 rounded-xl shadow-md transform transition-all duration-500 hover:shadow-lg hover:scale-105 relative group"
>
  <div
    class="absolute inset-0 bg-gradient-to-br from-gray-100 to-white opacity-0 transition-opacity duration-500 group-hover:opacity-30 blur-md"
  ></div>
  <div class="p-6 relative z-10">
    <p class="text-xl font-semibold text-gray-800">Classic Blue Jeans</p>
    <p class="mt-2 text-gray-600">
      Our classic blue jeans are a timeless addition to your wardrobe. Crafted
      from premium denim, they offer both style and comfort. Perfect for any
      casual occasion.
    </p>
    <div class="flex items-center mt-4 text-gray-600">
      <svg
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        class="w-6 h-6 fill-current text-yellow-500"
      >
        <path d="M0 0h24v24H0z" fill="none"></path>
        <path
          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
        ></path>
      </svg>
      <span class="ml-2">4.8 (24 reviews)</span>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/akshat-patel28_light-otter-66.html
================================================
<div class="card">
<p class="time-text"><span>11:11</span><span class="time-sub-text">PM</span></p>
<p class="day-text">Wednesday, June 15th</p>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" stroke-width="0" fill="currentColor" stroke="currentColor" class="moon"><path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"></path><path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"></path></svg>
</div>
<style>
/* From Uiverse.io by akshat-patel28 - Tags: card, box-shadow, widget */
.card {
  width: 280px;
  height: 150px;
  background: rgb(17, 4, 134);
  border-radius: 15px;
  box-shadow: rgb(0,0,0,0.7) 5px 10px 50px ,rgb(0,0,0,0.7) -5px 0px 250px;
  display: flex;
  color: white;
  justify-content: center;
  position: relative;
  flex-direction: column;
  background: linear-gradient(to right, rgb(20, 30, 48), rgb(36, 59, 85));
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.card:hover {
  box-shadow: rgb(0,0,0) 5px 10px 50px ,rgb(0,0,0) -5px 0px 250px;
}

.time-text {
  font-size: 50px;
  margin-top: 0px;
  margin-left: 15px;
  font-weight: 600;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.time-sub-text {
  font-size: 15px;
  margin-left: 5px;
}

.day-text {
  font-size: 18px;
  margin-top: 0px;
  margin-left: 15px;
  font-weight: 500;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.moon {
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 15px;
  transition: all 0.3s ease-in-out;
}

.card:hover > .moon {
  font-size: 23px;
}

</style>


================================================
FILE: Cards/akshat-patel28_quick-baboon-29.html
================================================
<div class="card">
  <svg class="wave" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M0,256L11.4,240C22.9,224,46,192,69,192C91.4,192,114,224,137,234.7C160,245,183,235,206,213.3C228.6,192,251,160,274,149.3C297.1,139,320,149,343,181.3C365.7,213,389,267,411,282.7C434.3,299,457,277,480,250.7C502.9,224,526,192,549,181.3C571.4,171,594,181,617,208C640,235,663,277,686,256C708.6,235,731,149,754,122.7C777.1,96,800,128,823,165.3C845.7,203,869,245,891,224C914.3,203,937,117,960,112C982.9,107,1006,181,1029,197.3C1051.4,213,1074,171,1097,144C1120,117,1143,107,1166,133.3C1188.6,160,1211,224,1234,218.7C1257.1,213,1280,139,1303,133.3C1325.7,128,1349,192,1371,192C1394.3,192,1417,128,1429,96L1440,64L1440,320L1428.6,320C1417.1,320,1394,320,1371,320C1348.6,320,1326,320,1303,320C1280,320,1257,320,1234,320C1211.4,320,1189,320,1166,320C1142.9,320,1120,320,1097,320C1074.3,320,1051,320,1029,320C1005.7,320,983,320,960,320C937.1,320,914,320,891,320C868.6,320,846,320,823,320C800,320,777,320,754,320C731.4,320,709,320,686,320C662.9,320,640,320,617,320C594.3,320,571,320,549,320C525.7,320,503,320,480,320C457.1,320,434,320,411,320C388.6,320,366,320,343,320C320,320,297,320,274,320C251.4,320,229,320,206,320C182.9,320,160,320,137,320C114.3,320,91,320,69,320C45.7,320,23,320,11,320L0,320Z"
      fill-opacity="1"
    ></path>
  </svg>

  <div class="icon-container">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
      stroke-width="0"
      fill="currentColor"
      stroke="currentColor"
      class="icon"
    >
      <path
        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"
      ></path>
    </svg>
  </div>
  <div class="message-text-container">
    <p class="message-text">Success message</p>
    <p class="sub-text">Everything seems great</p>
  </div>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 15 15"
    stroke-width="0"
    fill="none"
    stroke="currentColor"
    class="cross-icon"
  >
    <path
      fill="currentColor"
      d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
      clip-rule="evenodd"
      fill-rule="evenodd"
    ></path>
  </svg>
</div>

<style>
/* From Uiverse.io by akshat-patel28  - Tags: green, success, card, html, css, errocard, successcard */
.card {
  width: 330px;
  height: 80px;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 10px 15px;
  background-color: #ffffff;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 15px;
}
.wave {
  position: absolute;
  transform: rotate(90deg);
  left: -31px;
  top: 32px;
  width: 80px;
  fill: #04e4003a;
}
.icon-container {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #04e40048;
  border-radius: 50%;
  margin-left: 8px;
}
.icon {
  width: 17px;
  height: 17px;
  color: #269b24;
}
.message-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-grow: 1;
}
.message-text,
.sub-text {
  margin: 0;
  cursor: default;
}
.message-text {
  color: #269b24;
  font-size: 17px;
  font-weight: 700;
}
.sub-text {
  font-size: 14px;
  color: #555;
}
.cross-icon {
  width: 18px;
  height: 18px;
  color: #555;
  cursor: pointer;
}

</style>
    

================================================
FILE: Cards/akshat-patel28_smart-termite-33.html
================================================
  <div class="card">
      <div class="card-image-container">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" stroke-width="0" fill="currentColor" stroke="currentColor" class="video-icon">
          <path d="M464 384.39a32 32 0 01-13-2.77 15.77 15.77 0 01-2.71-1.54l-82.71-58.22A32 32 0 01352 295.7v-79.4a32 32 0 0113.58-26.16l82.71-58.22a15.77 15.77 0 012.71-1.54 32 32 0 0145 29.24v192.76a32 32 0 01-32 32zM268 400H84a68.07 68.07 0 01-68-68V180a68.07 68.07 0 0168-68h184.48A67.6 67.6 0 01336 179.52V332a68.07 68.07 0 01-68 68z"></path>
        </svg>
      </div>
      <p class="card-title">Card Title</p>
      <p class="card-des">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam
        inventore natus modi repellendus dolorem unde odio sequi! Porro, cum
        maiores tempore suscipit laudantium perspiciatis, illo sunt,
        reprehenderit quae est blanditiis.
      </p>
      <div class="card-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 384 512" stroke-width="0" fill="currentColor" stroke="currentColor">
          <path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"></path>
        </svg>
        <span class="card-btn-text">Watch Video</span>
      </div>
    </div>
<style>
/* From Uiverse.io by akshat-patel28 - Tags: card, video, html5, css3, button hover effect , card design */
.card {
  display: flex;
  flex-direction: column;
  width: 230px;
  height: 280px;
  max-height: 330px;
  background-color: var(--white);
  border-radius: 10px;
  box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.08),
          -4px -4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  box-sizing: border-box;
  padding: 10px;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1),
          -4px -4px 12px rgba(0, 0, 0, 0.08);
}

.card-image-container {
  width: 100%;
  height: 64%;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  background-color: rgb(165, 165, 165);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-icon {
  font-size: 40px;
}

.card-title {
  margin: 0;
  font-size: 17px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
          "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight: 600;
  color: #1797b8;
  cursor: default;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.card-des {
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  margin: 0;
  font-size: 13px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
          "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  color: #1797b8;
  cursor: default;
}

.card-btn {
  font-size: 15px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
          "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #12bde7;
  width: 25px;
  height: 25px;
  max-height: 25px;
  border-radius: 10px;
  overflow: hidden;
  transition: all ease-in-out 0.5s;
  gap: 1px;
  box-sizing: border-box;
  padding-left: 5px;
  margin-top: 8px;
}

.card-btn:hover {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.06);
  width: 100%;
  border-radius: 8px;
  height: 30px;
  gap: 10px;
  padding: 0;
}

.card-btn-text {
  opacity: 0;
  font-size: 1px;
  font-weight: 500;
  transition: all ease-in-out 0.5s;
}

.card-btn:hover > .card-btn-text {
  opacity: 1;
  font-size: 15px;
}
</style>


================================================
FILE: Cards/akshat-patel28_tame-termite-90.html
================================================
  <div class="card">
      <p class="card-title">Card Title</p>
      <p class="card-des">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis,
        deleniti officia. Aliquam repellendus illum pariatur nesciunt dolor et
        natus consectetur repudiandae suscipit autem distinctio commodi vel sed,
        id inventore modi.
      </p>
      <p class="card-text">
        <span>View More</span>
        <svg class="arrow-icon" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"></path>
        </svg>
      </p>
    </div>
<style>
/* From Uiverse.io by akshat-patel28 - Tags: card, html, css, card animation, simple cards */
.card {
  position: relative;
  width: 350px;
  height: 180px;
  box-sizing: border-box;
  background-color: #212121;
  border: 5px solid #222;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
          rgba(0, 0, 0, 0.23) 0px 6px 6px,
          inset rgba(0, 0, 0, 0.19) 0px 10px 20px,
          inset rgba(0, 0, 0, 0.23) 0px 6px 6px;
  transition: all ease-in-out 0.3s;
  overflow: hidden;
}

.card:hover {
  box-shadow: rgba(193, 44, 223, 0.19) 0px 10px 20px,
          rgba(193, 44, 223, 0.23) 0px 6px 6px,
          inset rgba(0, 0, 0, 0.19) 0px 10px 20px,
          inset rgba(0, 0, 0, 0.23) 0px 6px 6px;
  border: 5px solid #b671d6;
}

.card-title {
  margin: 0;
  font-size: 18px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
          "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight: 600;
  color: #fff;
  cursor: default;
}

.card-des {
  margin: 0;
  font-size: 15px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
          "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight: 600;
  color: #fff;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  cursor: default;
}

.card-text {
  position: absolute;
  margin: 0;
  font-size: 14px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
          "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight: 400;
  color: #fff;
  right: 20px;
  bottom: 5px;
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0;
  transition: all ease-in-out 0.3s;
  animation: textanimate 0.8s alternate infinite;
  cursor: pointer;
}

.card:hover > .card-text {
  opacity: 1;
}

@keyframes textanimate {
  0% {
    right: 20px;
  }

  100% {
    right: 10px;
  }
}

.arrow-icon {
  font-size: 15px;
  font-weight: 500;
}
</style>


================================================
FILE: Cards/alexmaracinaru_loud-goat-60.html
================================================
<div class="card">
  <span class="wls"> WORLD'S lightest SHOE </span>
  <svg
    viewBox="0 0 1672.93 1806.29"
    xmlns="http://www.w3.org/2000/svg"
    id="Layer_2"
    class="shoe"
  >
    <defs></defs>
    <g id="Layer_1-2">
      <g class="cls-1">
        <ellipse
          ry="253.69"
          rx="813.56"
          cy="1552.6"
          cx="813.56"
          class="cls-9"
        ></ellipse>
      </g>
      <path
        d="m284.46,799.69c192.28,118,310.15,322.79,412.45,545.7,153.27,243.52,407.68,370.8,762.15,346.56,73.49-5.02,140.37-46.55,174.95-111.61,22.02-41.41,30.29-89.72,16.32-136.88,31.54-98.59-16.16-193.11-118-284.89-123.12-132.19-199.27-291.13-227.77-477.21,7.86-189.8-44.99-340.83-228.23-408.5-49.49-36.77-88.79-77.69-119.59-122.09-83.12-124.69-233.26-184.87-353-94.9-111.26,88.99-210.87,196.74-295.64,328.23-6.59,10.16-13.06,20.45-19.44,30.91-130.61,115.96-152.65,259.28-4.21,384.67Z"
        class="cls-10"
      ></path>
      <g class="cls-4">
        <path
          d="m628.51,39.64c108.39-42.01,228.98,17.47,300.28,124.42,30.79,44.39,70.1,85.32,119.59,122.09,183.23,67.67,236.09,218.7,228.23,408.5,28.5,186.09,104.65,345.03,227.77,477.21,101.84,91.78,149.54,186.3,118,284.89,13.97,47.15,5.7,95.47-16.32,136.88-18.99,35.71-47.71,64.33-81.94,83.73,46.47-18.14,85.93-51.93,109.89-97.01,22.02-41.41,30.29-89.72,16.32-136.88,31.54-98.59-16.16-193.11-118-284.89-123.12-132.19-199.27-291.13-227.77-477.21,7.86-189.8-44.99-340.83-228.23-408.5-49.49-36.77-88.79-77.69-119.59-122.09-77.47-116.24-213.22-176.42-328.24-111.14Z"
          class="cls-11"
        ></path>
      </g>
      <g class="cls-4">
        <path
          d="m1137.95,1044.65c-191.83-24.72-245.33-242.3-209.48-447.66,4.17-80.74-8.64-157.56-78.98-204.8-92.09-39.65-155.03-103.04-176.41-189.86-13.86-27.7-3.67-114.76,61.88-89.86-62.92,18.03-38.34,136.24,32.4,189.66,0,0,49.32,42.16,110.75,77.03,61.42,34.87,79.41,130.02,79.41,130.02,0,0,6.2,100.15,4.25,183.03-1.96,82.87-25.89,211.89,176.19,352.45Z"
          class="cls-11"
        ></path>
      </g>
      <path
        d="m1125.42,1555.68c17.4-158.77-188.62-263.27-311.86-484.11,66.96,133.91,117.12,261.53,128.06,374.44,49.98,53.75,112.04,89.1,183.8,109.67Z"
        class="cls-6"
      ></path>
      <path
        d="m1127.47,1558.74l-2.71-.78c-74.45-21.35-136.66-58.47-184.88-110.34l-.55-.59-.08-.8c-9.68-99.84-50.29-218.56-127.82-373.61l4.2-2.22c50.2,89.96,114.51,160.93,171.25,223.55,84.54,93.3,151.3,166.99,140.9,261.98l-.31,2.8Zm-183.57-113.76c46.96,50.28,107.32,86.48,179.44,107.62,8.54-91.53-57.1-163.98-139.98-255.45-47.08-51.96-99.37-109.66-144.59-179.25,62.68,132.41,96.29,237.26,105.14,327.08Z"
        class="cls-9"
      ></path>
      <g class="cls-4">
        <path
          d="m813.55,1071.57c23.13,46.29,44.28,91.82,62.5,136.25,108.57,135.66,228.47,225.27,229.16,341.55,6.63,2.24,13.36,4.36,20.2,6.31,17.4-158.77-188.62-263.28-311.86-484.11Z"
          class="cls-11"
        ></path>
      </g>
      <path
        d="m660.9,968.95c29.62-245-384.31-487.51-221.27-757.81l-142.25,185.42c-43.51,131.53,23.58,231.32,157.63,311.92,95.53,51.11,162.25,140.46,205.88,260.48Z"
        class="cls-6"
      ></path>
      <path
        d="m662.06,979.1l-3.4-9.35c-44.81-123.27-113.71-210.47-204.78-259.19-147.59-88.74-199.49-191.67-158.76-314.76l.37-.7,142.25-185.42,3.92,2.67c-92.51,153.36,3.1,298.96,95.56,439.78,71.38,108.72,138.81,211.41,126.03,317.1l-1.19,9.87ZM299.51,397.68c-39.69,120.49,11.58,221.48,156.73,308.75,89.6,47.94,158,132.71,203.28,251.99,7.19-100.44-57.7-199.26-126.27-303.68-88.06-134.11-178.96-272.52-109.67-418.79l-124.07,161.72Z"
        class="cls-9"
      ></path>
      <g class="cls-4">
        <path
          d="m389.5,276.45c-73.15,200.86,145.37,387.08,221.23,571.47,5.14,12.44,9.6,24.92,13.3,37.35,13.78,25.93,26.03,53.83,36.87,83.67,1.13-9.21,1.61-18.4,1.5-27.59l-33.41-123.28c.5-1.07.98-2.15,1.44-3.2-3.94-8.63-8.15-17.28-12.61-25.94-95.48-185.44-301.32-373.7-178.21-577.79l-50.12,65.32Z"
          class="cls-11"
        ></path>
      </g>
      <path
        d="m941.36,1451.97c10.99-181.17-204.36-382.54-172.86-688.37l-196.34-500.95,6.62-186.32s-132.59,115.19-153.57,161.74c-58.91,154.26,23.61,329.76,168.8,514.66,0,0,91.81,122.06,61.76,200.8l50.79,179.16c45.59,130.1,126.43,234.67,234.81,319.28Z"
        class="cls-9"
      ></path>
      <path
        d="m943.46,1456.62l-3.56-2.78c-112.65-87.95-191.92-195.73-235.59-320.37l-51.04-180.06.28-.74c29.24-76.6-60.53-197.31-61.44-198.52-168.23-214.26-221.97-378.53-169.12-516.93,21.01-46.63,148.8-157.97,154.23-162.69l4.13-3.59-6.79,191.29,196.37,501.03-.06.58c-18.04,175.17,44.83,315.15,100.31,438.65,41.46,92.3,77.27,172.01,72.56,249.61l-.27,4.51Zm-285.2-502.99l50.57,178.41c42.86,122.29,120.37,228.37,230.38,315.22,3-75.03-31.99-152.91-72.37-242.82-55.66-123.91-118.74-264.35-100.76-440.51l-196.31-500.87.02-.49,6.42-180.82c-22.56,19.9-130.38,116.35-148.83,157.3-52.15,136.56,1.37,299.36,168.5,512.22,3.8,5.05,91.74,123.31,62.39,202.36Z"
        class="cls-8"
      ></path>
      <g class="cls-4">
        <path
          d="m557.11,95.62l-6.57,185.19,196.33,500.95c-29.43,285.64,156.49,480.17,172.16,652.16,7.31,6.13,14.74,12.13,22.33,18.04,10.99-181.16-204.34-382.53-172.84-688.36l-196.36-500.97,6.64-186.32s-8.55,7.44-21.69,19.3Z"
          class="cls-11"
        ></path>
      </g>
      <path
        d="m631.46,817.17c132.6-288.17-214.53-522.86-38.05-749.89-46.3,146.56,25.06,295.52,126.24,445.08,132.01,219.89-41.3,487.08,16.65,691.56"
        class="cls-12"
      ></path>
      <path
        d="m734.02,1204.57c-24.82-87.59-7.77-184.87,10.28-287.87,23.92-136.48,48.66-277.61-26.69-403.12-87.73-129.67-171.12-282.19-130.22-434.18-78.38,111.3-33.65,225.52,13.63,346.25,48.19,123.07,98.03,250.33,32.6,392.51l-4.32-1.98c64.58-140.36,15.12-266.66-32.71-388.8-49.29-125.87-95.85-244.76-5.06-361.56l8.13-10.46-3.99,12.64c-48.75,154.29,36.31,310.54,125.94,443.03,76.33,127.13,51.44,269.15,27.36,406.49-17.95,102.45-34.92,199.21-10.39,285.75l-4.57,1.3Z"
        class="cls-9"
      ></path>
      <g class="cls-4">
        <path
          d="m617.83,788.93c4.45,8.66,8.67,17.31,12.61,25.94,115.98-258.64-152.51-474.23-77.12-680,2.14-20.48,6.3-40.92,12.74-61.31-169.37,217.88,143.56,442.85,51.77,715.36Z"
          class="cls-11"
        ></path>
      </g>
      <path
        d="m284.46,799.69c192.28,118,310.15,322.79,412.45,545.7,153.27,243.52,407.68,370.8,762.15,346.56,64.81-4.42,124.49-37.25,161.4-89.6,4.95-6.98,9.47-14.34,13.55-22.01,22.02-41.41,30.29-89.72,16.32-136.88-38.67-103.88-244.04-30.88-342.82,91.43-18.79,23.25-46.66,37.24-76.55,37.79-194.37,3.57-444.35-213.21-513.36-414.69-49.41-205.79-119.07-386.58-278.09-456.9-121.33-89.89-200.79-188.27-131.41-317-6.59,10.16-13.06,20.45-19.44,30.91-5.82,5.16-11.42,10.39-16.81,15.68l-.04.09c-115.39,113.01-129.13,249.13,12.64,368.9Z"
        class="cls-7"
      ></path>
      <path
        d="m1375.52,1697.24c-140.08,0-265.57-25.47-373.99-76.01-125.66-58.57-228.82-150.95-306.63-274.58-97.07-211.47-214-423.63-411.68-544.94l-.29-.21c-66.29-56.01-101.1-117.07-103.47-181.49-2.37-64.38,28.91-130.3,90.44-190.67l.3-.33c5.35-5.26,10.95-10.48,16.63-15.53,6.27-10.29,12.76-20.61,19.29-30.67l4.08,2.42c-73.64,136.63,24.6,235.3,130.52,313.81,166.78,73.93,234.73,273.2,279.19,458.41,72.51,211.67,325.63,416.11,511.01,412.87,28.97-.54,56.22-13.99,74.75-36.91,72.08-89.24,201.51-153.44,282.71-140.25,31.87,5.2,54.07,22.3,64.18,49.48,13.26,44.73,7.4,93.98-16.45,138.82-4.12,7.75-8.74,15.25-13.71,22.27-37.42,53.06-96.89,86.08-163.18,90.59-28.44,1.95-56.35,2.92-83.7,2.92ZM285.85,797.76c198.67,121.99,316.01,334.81,413.21,546.64,156.74,248.99,419.53,368.46,759.83,345.18,64.85-4.42,123.03-36.71,159.62-88.59,4.86-6.87,9.37-14.18,13.39-21.76,23.26-43.74,28.99-91.72,16.14-135.09-9.57-25.69-29.92-41.32-60.44-46.29-79.63-13.01-207.11,50.46-278.25,138.54-19.41,24.02-47.97,38.12-78.35,38.67-91.11,1.71-202.59-46.06-305.25-130.99-98.46-81.45-177.11-188.1-210.41-285.3-44.28-184.38-111.74-382.5-276.8-455.5l-.45-.26c-70.45-52.2-114.28-98.2-137.92-144.77-23.82-46.92-26.73-94.09-8.66-143.33-.27.44-.55.89-.82,1.34l-.45.54c-5.62,4.98-11.16,10.14-16.46,15.34h0s-.31.35-.31.35c-60.72,59.47-91.6,124.26-89.28,187.35,2.31,62.98,36.52,122.85,101.66,177.92Z"
        class="cls-9"
      ></path>
      <path
        d="m1375.55,1707.63c-141.63,0-268.6-25.8-378.41-76.98-127.5-59.42-232.14-153.11-311.03-278.45-.3-.47-.57-.97-.8-1.47-96.23-209.7-212.19-420.28-407.53-540.18-.55-.34-1.06-.71-1.56-1.13-70.32-59.39-106.42-124.61-107.28-193.86-.89-71.56,37.07-143.73,109.81-208.83,85.35-139.42,192-260.82,317.02-360.84C646.86,7.5,705.95-7.17,767.02,3.27c76.56,13.08,149.58,64.26,200.34,140.42,30.34,43.72,69.12,83.43,115.15,117.86,88.74,33.18,152.99,88.36,191.01,164.04,33.7,67.07,48.04,150.52,43.85,255.07,28.04,181.53,103.38,339.24,223.94,468.8,111.61,100.72,151.67,196.99,122.35,294.16,12.55,46.22,6.08,96.74-18.38,142.73-35.97,67.64-106.99,112.98-185.36,118.34-28.66,1.96-56.8,2.94-84.38,2.94Zm-667.38-368.31c156.95,248.81,409.31,363.16,750.02,339.9,69.64-4.76,132.7-44.94,164.56-104.86,21.97-41.3,27.42-86.51,15.36-127.29-.72-2.46-.7-5.07.08-7.51,28.13-87.98-9.28-176.8-114.38-271.51-.28-.25-.54-.51-.8-.78-124.61-133.75-202.35-296.57-231.06-483.96-.13-.82-.17-1.64-.14-2.46,8.76-211.53-61.1-337.36-219.89-396.01-1.14-.42-2.21-1-3.19-1.73-48.9-36.34-90.11-78.42-122.49-125.08-47.02-70.54-113.86-117.71-183.53-129.61-53.96-9.23-106.27,3.79-151.3,37.64-122.87,98.31-227.9,218.03-311.87,355.59-.66,1.08-1.47,2.06-2.42,2.9-67.97,60.36-103.47,126.3-102.67,190.69.76,61.27,33.56,119.83,97.5,174.06,200.39,123.39,318.5,337.2,416.2,550.01ZM288.66,415.01h.05-.05Z"
        class="cls-9"
      ></path>
      <path
        d="m1226.05,1585.5c-208.48.03-454.31-230.06-520.51-423.36-.13-.38-.24-.76-.34-1.15-43.66-181.7-109.99-377.05-270.86-448.2-.86-.38-1.68-.86-2.44-1.42-113.05-83.76-228.48-200.75-116.73-363.24,4-5.81,11.95-7.27,17.75-3.29,5.81,3.99,7.28,11.94,3.29,17.75-43.24,62.87-52.27,121.1-27.6,178.03,20.62,47.6,64.28,95.09,137.37,149.4,169.92,76.02,238.9,277.28,283.91,464.41,32.53,94.52,109.33,198.39,205.53,277.97,99.91,82.65,207.48,129.24,295.31,127.52,25.9-.48,50.27-12.52,66.86-33.06,74.14-91.78,208-157.76,292.46-143.98,35.78,5.83,60.77,25.22,72.27,56.1,2.46,6.61-.9,13.96-7.51,16.42-6.59,2.47-13.96-.9-16.42-7.51-8.23-22.09-25.87-35.49-52.45-39.81-75.12-12.26-200.61,50.77-268.49,134.82-21.34,26.42-52.78,41.92-86.25,42.54-1.7.03-3.44.04-5.15.04Z"
        class="cls-9"
      ></path>
      <path
        d="m1243.53,591.99c-3-56.72-19.25-118.57-37.49-158.29-8.14-17.73-22.88-31.67-41.21-38.35-75.2-27.4-211.33-27.89-236.67,36.82,0,0,49.66,99.9,31.43,282.1-18.23,182.2,108.78,314.69,234.96,353.72,101.67,28.43,163.92,7.28,162.76-93.62-58.73-112.6-98.04-239.07-113.79-382.38Z"
        class="cls-12"
      ></path>
      <path
        d="m1266.86,1082.04c-20.68,0-44.92-3.92-72.94-11.76-131.3-40.61-254.72-176.01-236.69-356.25,17.93-179.3-30.7-279.81-31.19-280.81l-.47-.94.39-.98c25.86-66.04,161.38-66.71,239.69-38.18,18.6,6.78,34.12,21.21,42.55,39.59,20.1,43.76,34.89,106.2,37.7,159.08,15.14,137.73,53.34,266.08,113.52,381.48l.26.5v.57c.5,42.84-10.57,73.25-32.91,90.4-15.02,11.53-34.86,17.29-59.91,17.29Zm-336.1-649.94c5.01,10.88,48.33,111.09,31.2,282.41-17.78,177.7,103.91,311.2,233.31,351.22,59.54,16.66,102.83,15.06,128.62-4.74,20.99-16.11,31.44-45.05,31.06-86.01-60.32-115.82-98.6-244.58-113.78-382.72v-.13c-2.78-52.35-17.41-114.14-37.28-157.42-7.92-17.24-22.45-30.76-39.87-37.11-77.04-28.07-208.31-25.8-233.26,34.51Z"
        class="cls-9"
      ></path>
      <g class="cls-4">
        <path
          d="m928.16,432.16s3.88,7.79,9.1,22.99c30.15-59.7,161.16-58.56,234.41-31.86,18.34,6.67,33.07,20.63,41.2,38.33,7.55,16.4,14.74,36.62,20.79,58.66-7.03-32.77-16.99-63.43-27.6-86.57-8.16-17.71-22.89-31.67-41.23-38.34-75.21-27.4-211.33-27.89-236.67,36.8Z"
          class="cls-11"
        ></path>
      </g>
      <path
        d="m1261.79,1091.51c-46.11,0-100.35-16.34-150.76-47.58-123.04-76.27-182.99-212.42-160.44-364.28,6.05-82.67,6.77-175.84-33.3-240.78-12.96-21.06-29.29-37.93-49.9-51.57-60.45-30.62-110.14-70.65-147.72-118.99-.27-.34-.52-.7-.75-1.07-50.62-81.06-37.54-121.53-25.24-138.45,14.9-20.48,42.58-28,74.01-20.13,25.61,6.39,48.43,22.5,64.25,45.36,66.59,96,150.06,167.57,248.08,212.71,6.4,2.95,9.2,10.53,6.25,16.93-2.94,6.41-10.51,9.22-16.93,6.25-102.22-47.08-189.15-121.55-258.38-221.36-12.29-17.76-29.85-30.23-49.45-35.13-21.01-5.26-38.63-1.37-47.18,10.39-6.84,9.4-17.97,38.85,25.9,109.34,35.82,45.91,81.4,82.45,139.33,111.69.43.22.84.46,1.25.72,23.75,15.58,43.34,35.74,58.22,59.91,43.96,71.25,43.36,169.66,36.99,256.52-.02.32-.06.64-.11.96-21.19,141.64,34.35,268.47,148.57,339.28,73.06,45.29,156.36,57.04,198.07,27.91,21.66-15.12,29.15-39.74,22.26-73.18-1.43-6.9,3.02-13.65,9.93-15.07,6.9-1.44,13.65,3.02,15.07,9.93,8.88,43.11-2.71,78.36-32.65,99.26-19.7,13.75-45.88,20.44-75.38,20.44Z"
        class="cls-9"
      ></path>
      <path
        d="m1243.52,604.75c-6.74,0-12.38-5.28-12.74-12.09-2.7-51.14-16.96-111.45-36.34-153.63-6.76-14.73-19.15-26.28-33.98-31.68-71.89-26.2-198.94-25.35-220.41,29.48-2.57,6.56-9.97,9.81-16.54,7.23-6.57-2.57-9.8-9.98-7.23-16.54,30.67-78.33,180.95-70.38,252.92-44.16,21.2,7.72,38.85,24.13,48.44,45.01,20.61,44.88,35.77,108.84,38.63,162.94.37,7.04-5.03,13.05-12.08,13.42-.23,0-.46.01-.68.01Z"
        class="cls-9"
      ></path>
      <circle
        transform="translate(-47.42 58.16) rotate(-2.92)"
        r="29.69"
        cy="959.82"
        cx="1117.84"
        class="cls-9"
      ></circle>
      <path
        d="m1117.78,991.88c-4.57,0-9.21-.98-13.61-3.06-15.99-7.54-22.87-26.68-15.34-42.67h0c7.54-16,26.68-22.88,42.67-15.34,16,7.54,22.87,26.68,15.34,42.67-5.46,11.59-17.02,18.39-29.06,18.39Zm-24.65-43.71c-6.42,13.62-.56,29.93,13.07,36.35,13.6,6.42,29.93.56,36.35-13.06,6.42-13.62.56-29.93-13.06-36.35-13.61-6.42-29.93-.56-36.35,13.06h0Z"
        class="cls-9"
      ></path>
      <circle
        transform="translate(4.07 1692.84) rotate(-76.78)"
        r="29.69"
        cy="843.85"
        cx="1070.34"
        class="cls-9"
      ></circle>
      <path
        d="m1070.29,875.91c-4.58,0-9.21-.98-13.62-3.06-7.75-3.65-13.61-10.1-16.5-18.16-2.9-8.06-2.48-16.76,1.17-24.51,3.65-7.74,10.1-13.61,18.16-16.5,8.05-2.9,16.76-2.48,24.51,1.17,7.75,3.65,13.61,10.1,16.5,18.16,2.9,8.06,2.48,16.76-1.17,24.51-5.46,11.59-17.02,18.39-29.05,18.39Zm.07-59.38c-3.11,0-6.24.54-9.25,1.62-6.87,2.47-12.36,7.46-15.47,14.06h0c-6.42,13.62-.56,29.93,13.06,36.35,13.64,6.43,29.93.56,36.35-13.06,3.11-6.6,3.47-14.01,1-20.88-2.47-6.87-7.46-12.36-14.06-15.47-3.7-1.74-7.65-2.62-11.63-2.62Z"
        class="cls-9"
      ></path>
      <circle
        transform="translate(-203.41 494.66) rotate(-24.16)"
        r="29.69"
        cy="722.61"
        cx="1054.13"
        class="cls-9"
      ></circle>
      <path
        d="m1054.11,754.7c-4.66,0-9.31-1.04-13.65-3.08-7.74-3.65-13.61-10.1-16.5-18.16-2.9-8.06-2.48-16.76,1.17-24.51,3.65-7.74,10.1-13.6,18.16-16.5,8.06-2.9,16.76-2.48,24.51,1.17,7.74,3.65,13.6,10.1,16.5,18.16,2.9,8.06,2.48,16.76-1.17,24.51-3.65,7.74-10.1,13.61-18.16,16.5-3.54,1.27-7.21,1.91-10.86,1.91Zm.06-59.39c-10.25,0-20.09,5.8-24.75,15.67-3.11,6.6-3.47,14.01-1,20.87,2.47,6.87,7.46,12.36,14.06,15.47,6.61,3.11,14.02,3.46,20.88,1,6.87-2.47,12.36-7.46,15.47-14.06,3.11-6.6,3.47-14.01,1-20.88-2.47-6.87-7.46-12.36-14.05-15.47-3.75-1.77-7.71-2.61-11.61-2.61Z"
        class="cls-9"
      ></path>
      <circle
        transform="translate(-100.49 242.36) rotate(-12.52)"
        r="29.69"
        cy="579.18"
        cx="1054.35"
        class="cls-9"
      ></circle>
      <path
        d="m1054.3,611.24c-4.58,0-9.21-.98-13.61-3.06-7.75-3.65-13.61-10.1-16.5-18.16-2.9-8.06-2.48-16.76,1.17-24.51,3.65-7.74,10.1-13.61,18.16-16.5,8.05-2.88,16.76-2.48,24.51,1.17,7.75,3.65,13.61,10.1,16.51,18.16,2.9,8.06,2.48,16.76-1.17,24.51-5.46,11.58-17.02,18.39-29.06,18.39Zm.07-59.38c-3.12,0-6.24.54-9.25,1.62-6.87,2.47-12.36,7.46-15.47,14.06h0c-3.11,6.6-3.47,14.01-1,20.88,2.47,6.87,7.46,12.36,14.06,15.47,13.62,6.42,29.93.55,36.35-13.07,3.11-6.6,3.47-14.01,1-20.87-2.47-6.87-7.46-12.36-14.06-15.47-3.7-1.74-7.66-2.62-11.63-2.62Z"
        class="cls-9"
      ></path>
      <ellipse
        transform="translate(497.94 1925.1) rotate(-86.92)"
        ry="18.65"
        rx="26.65"
        cy="699.8"
        cx="1264.78"
        class="cls-9"
      ></ellipse>
      <path
        d="m1264.08,728.8c-.29,0-.57,0-.86-.02-5.77-.31-10.97-3.73-14.63-9.62-3.5-5.62-5.21-12.9-4.79-20.49.41-7.59,2.89-14.64,6.97-19.86,4.28-5.46,9.85-8.31,15.59-7.99,5.77.31,10.97,3.73,14.63,9.62,3.5,5.62,5.21,12.9,4.79,20.49-.41,7.59-2.89,14.64-6.97,19.86-4.07,5.19-9.27,8.01-14.73,8.01Zm1.43-53.25c-3.97,0-7.86,2.18-11,6.19-3.49,4.45-5.61,10.56-5.97,17.18h0c-.36,6.63,1.09,12.92,4.08,17.72,2.82,4.54,6.68,7.16,10.85,7.38,4.13.17,8.29-1.96,11.59-6.18,3.49-4.45,5.61-10.56,5.97-17.18.36-6.63-1.09-12.92-4.08-17.72-2.82-4.54-6.68-7.16-10.85-7.38-.2,0-.39-.01-.59-.01Z"
        class="cls-9"
      ></path>
      <ellipse
        transform="translate(564.87 1818.59) rotate(-86.92)"
        ry="22"
        rx="31.44"
        cy="611.23"
        cx="1242.05"
        class="cls-9"
      ></ellipse>
      <path
        d="m1241.18,645.03c-.32,0-.63,0-.95-.02-13.42-.72-23.53-16.46-22.52-35.08h0c1.01-18.62,12.5-33.15,26.16-32.46,13.42.72,23.52,16.46,22.52,35.08-.98,18.17-12.19,32.48-25.21,32.48Zm-18.73-34.85c-.86,16,7.23,29.5,18.03,30.08,10.76.71,20.3-11.96,21.16-27.96.86-16-7.23-29.5-18.03-30.08-10.94-.8-20.3,11.96-21.16,27.96h0Z"
        class="cls-9"
      ></path>
      <ellipse
        transform="translate(-128.38 257.3) rotate(-10.73)"
        ry="26.65"
        rx="18.65"
        cy="812.36"
        cx="1306.08"
        class="cls-9"
      ></ellipse>
      <path
        d="m1308.54,841.15c-4.73,0-9.45-2.11-13.56-6.12-4.75-4.63-8.13-11.29-9.55-18.75-2.98-15.72,3.86-30.27,15.25-32.43,11.42-2.13,23.08,8.88,26.06,24.6,1.42,7.47.69,14.91-2.03,20.95-2.85,6.33-7.55,10.41-13.23,11.48-.98.19-1.96.28-2.94.28Zm-4.92-52.83c-.68,0-1.37.06-2.06.19-8.81,1.67-13.96,13.73-11.46,26.88,1.24,6.52,4.15,12.29,8.2,16.24,3.83,3.73,8.23,5.37,12.3,4.58,4.11-.78,7.58-3.89,9.78-8.76,2.32-5.16,2.92-11.59,1.69-18.11-2.3-12.13-10.3-21.02-18.45-21.02Z"
        class="cls-9"
      ></path>
      <ellipse
        transform="translate(-252.46 618.15) rotate(-23.81)"
        ry="26.65"
        rx="18.65"
        cy="907.94"
        cx="1340.1"
        class="cls-9"
      ></ellipse>
      <path
        d="m1345.32,935.85c-3.55,0-7.28-1.11-10.91-3.32-5.66-3.43-10.48-9.15-13.54-16.1h0c-6.46-14.64-3.08-30.36,7.51-35.04,10.61-4.68,24.49,3.43,30.95,18.07,6.46,14.64,3.09,30.36-7.52,35.03-2.05.91-4.24,1.36-6.49,1.36Zm-20.11-21.34c2.68,6.07,6.82,11.03,11.66,13.96,4.57,2.76,9.2,3.36,13.02,1.67,8.21-3.62,10.49-16.53,5.09-28.77-5.41-12.24-16.47-19.26-24.69-15.64-8.2,3.62-10.48,16.53-5.09,28.78h0Z"
        class="cls-9"
      ></path>
      <circle
        transform="translate(-110.41 423.13) rotate(-19.76)"
        r="34.85"
        cy="528.46"
        cx="1159.25"
        class="cls-9"
      ></circle>
      <path
        d="m1159.19,565.68c-5.31,0-10.7-1.14-15.81-3.55-18.56-8.75-26.55-30.97-17.8-49.54h0c8.75-18.56,30.99-26.55,49.54-17.8,18.56,8.75,26.55,30.98,17.8,49.54-6.34,13.46-19.76,21.35-33.73,21.35Zm-29.32-51.07c-7.63,16.2-.66,35.59,15.53,43.22,7.85,3.7,16.66,4.12,24.83,1.19,8.16-2.93,14.69-8.87,18.39-16.71,7.63-16.2.66-35.59-15.53-43.22-16.19-7.63-35.59-.66-43.22,15.53h0Z"
        class="cls-9"
      ></path>
      <path
        d="m1117.84,970.98c-2.87,0-5.73-1.09-7.91-3.29-4.36-4.37-4.34-11.44.03-15.79,62.77-62.54,120.11-108.63,174.69-140.38-38.84-24.8-145.62-86.81-229.33-77.81-4.71.52-9.18-1.99-11.24-6.23-2.06-4.24-1.23-9.32,2.07-12.69,3.89-3.97,96.33-97.37,193.7-109.47,6.15-.74,11.7,3.58,12.46,9.71.76,6.12-3.58,11.7-9.71,12.46-63.38,7.88-126.99,55.69-159.09,83.3,105.75,5.64,223.61,88.59,229.04,92.46,3.15,2.24,4.92,5.95,4.67,9.81-.24,3.86-2.47,7.32-5.88,9.14-57.48,30.74-118.2,78.34-185.63,145.52-2.18,2.17-5.03,3.26-7.88,3.26Z"
        class="cls-9"
      ></path>
      <path
        d="m1340.09,919.11c-1.8,0-3.62-.43-5.31-1.35-1.53-.83-154.14-82.48-262.45-62.92-4.77.88-9.59-1.47-11.86-5.78-2.27-4.31-1.49-9.59,1.93-13.06,64.92-65.79,121.38-110.88,176.19-140.56-32.76-24.38-117.63-84.15-190.48-106.71-5.89-1.83-9.19-8.08-7.36-13.97,1.83-5.89,8.07-9.18,13.97-7.36,96.08,29.76,206.98,117.41,211.65,121.13,3,2.38,4.57,6.14,4.15,9.95-.41,3.81-2.75,7.14-6.19,8.82-51.25,25.12-103.77,64.29-163.72,122.29,110.46-3.34,238.87,65.32,244.8,68.54,5.42,2.93,7.44,9.71,4.51,15.14-2.02,3.73-5.87,5.85-9.83,5.85Z"
        class="cls-9"
      ></path>
      <path
        d="m924.25,716.3c-13.03,0-26.17-3.04-38.44-9.2-29.5-14.81-47.54-44.38-47.09-77.18h0c.84-61.74,40.5-117.54,103.5-145.61,74.99-33.42,160.98-19.72,224.38,35.75,3.52,3.08,4.75,8.03,3.08,12.4-1.66,4.33-5.81,7.17-10.43,7.17-.45,0-.93,0-1.39,0-52.66,0-85.15,43.24-119.54,89.01-19.2,25.55-39.06,51.97-62.85,70.2-15.09,11.56-33.05,17.47-51.22,17.47Zm-63.2-86.08c-.33,24.54,12.67,45.82,34.79,56.92,21.99,11.04,46.68,8.78,66.04-6.04,21.36-16.36,39.44-40.41,58.57-65.88,30.72-40.87,62.32-82.92,110.16-94.7-62.8-42.03-132.24-36.78-179.31-15.81-54.95,24.49-89.53,72.58-90.25,125.51h0Z"
        class="cls-9"
      ></path>
      <path
        d="m1381.42,794.74c-21.3,0-41.67-9.6-56.33-27.65-19.86-24.46-37.03-56.09-55.2-89.58-32.19-59.33-65.47-120.67-114.94-142.38-5.6-2.46-8.17-8.94-5.81-14.55-.03-.17-.06-.33-.08-.5-.83-6.11,3.45-11.74,9.57-12.57,134.53-18.27,275.42,77.98,295.57,201.98,5.49,33.77-11.02,64.59-42.06,78.52-10.1,4.53-20.52,6.73-30.72,6.73Zm-194.49-267.09c43.52,30.3,73.48,85.54,102.6,139.21,17.66,32.55,34.34,63.3,52.91,86.15,18.35,22.59,44.09,22,60.57,14.62,16.35-7.33,33.79-26.02,29.15-54.55-17.08-105.05-130.32-188.3-245.22-185.43Z"
        class="cls-9"
      ></path>
      <path
        d="m1064.26,675.1c-1.93,0-3.89-.5-5.67-1.55-5.31-3.14-7.08-9.99-3.94-15.3,64.28-108.86,94.22-132.81,95.46-133.78,4.87-3.78,11.89-2.9,15.67,1.96,3.76,4.84,2.91,11.81-1.88,15.62-.64.53-29.22,24.6-90.01,127.56-2.08,3.53-5.81,5.49-9.63,5.49Z"
        class="cls-9"
      ></path>
      <path
        d="m1199.42,629.98c-4.54,0-8.8-2.78-10.47-7.29l-33.76-90.94c-2.15-5.78.8-12.21,6.58-14.36,5.76-2.16,12.21.79,14.36,6.58l33.76,90.94c2.15,5.78-.8,12.21-6.58,14.36-1.28.48-2.59.7-3.89.7Z"
        class="cls-9"
      ></path>
      <path
        d="m1337.55,1051.28c-19.47-26.75-35.45-55.49-49.01-85.07-13.47-29.64-24.7-60.08-34.48-90.88-19.57-61.63-33.14-124.69-44.31-187.96-.46-2.6,1.28-5.09,3.88-5.55,2.55-.45,4.98,1.21,5.52,3.72v.04c13.21,62.56,28.77,124.69,50.05,184.68,10.62,29.97,22.62,59.41,36.63,87.71,14.1,28.23,30.39,55.25,49.48,79.76l.09.12c3.79,4.87,2.92,11.89-1.94,15.68-4.87,3.79-11.89,2.92-15.68-1.94-.06-.08-.16-.21-.22-.29Z"
        class="cls-9"
      ></path>
      <path
        d="m1143.45,1039.34c11.13-4.36,18.42-16.03,21.55-30.74,3.44-14.46,3.48-30.61,2.76-46.54-1.78-32.1-7.57-64.52-14.01-96.71-13.02-64.49-29.96-128.58-41.25-194.05-.45-2.61,1.3-5.08,3.9-5.53,2.55-.44,4.98,1.23,5.5,3.74v.04c13.26,64.45,32.19,127.77,47.43,192.39,7.54,32.34,14.54,64.98,17.53,98.84,1.26,16.95,1.98,34.24-1.58,52.16-1.61,8.89-4.65,18.09-9.99,26.65-5.24,8.56-13.53,16.14-23.2,20.35l-.1.05c-5.66,2.46-12.24-.13-14.7-5.78-2.46-5.66.13-12.24,5.78-14.7.11-.05.27-.11.38-.16Z"
        class="cls-9"
      ></path>
      <path
        d="m878.04,140.51c-12.77-8.7-27.22-15.94-41.82-21.28-14.66-5.38-29.94-8.67-45-9.16-15.05-.45-29.85,2.16-43,8.23-13.27,5.84-24.69,15.24-34.48,26.14l-.12.13c-4.72,5.25-12.8,5.68-18.04.97-5.25-4.72-5.68-12.8-.97-18.04.22-.25.47-.5.71-.73,12.8-12.15,27.93-22.6,44.94-28.48,16.88-6.14,35.07-7.68,52.25-5.72,17.24,2,33.66,7.09,48.88,14.13,15.27,7.11,29.39,15.65,42.58,26.31,2.05,1.66,2.37,4.67.71,6.73-1.57,1.95-4.36,2.34-6.4.96l-.25-.17Z"
        class="cls-9"
      ></path>
      <path
        d="m660.91,980.12c-.45,0-.9-.03-1.36-.08-6.12-.74-10.49-6.3-9.75-12.43,12.19-100.78-53.92-201.45-123.91-308.04-94.76-144.32-192.75-293.54-95.84-454.2,3.19-5.28,10.06-6.99,15.33-3.8,5.28,3.19,6.98,10.05,3.8,15.33-89.65,148.62,4.41,291.88,95.38,430.41,69.11,105.25,140.58,214.09,127.41,322.98-.68,5.67-5.5,9.83-11.07,9.83Z"
        class="cls-9"
      ></path>
      <path
        d="m736.3,1215.09c-4.87,0-9.35-3.21-10.74-8.12-25.37-89.52-8.15-187.77,10.08-291.78,23.63-134.8,48.07-274.18-25.41-396.81-78.85-116.6-154.1-251.45-140.84-388.83-38.66,92.5-1.79,186.67,39.81,292.91,46.59,118.97,99.39,253.81,32.4,399.4-2.58,5.61-9.2,8.06-14.81,5.48-5.61-2.58-8.06-9.21-5.48-14.81,63.02-136.96,14.25-261.48-32.91-381.91-50.23-128.27-97.67-249.42-3.81-370.16,3.33-4.27,9.23-5.54,14.01-3.03,4.79,2.51,7.09,8.1,5.46,13.25-47.62,150.72,36.39,304.7,124.84,435.45.11.17.22.34.32.51,77.95,129.83,52.77,273.49,28.42,412.42-17.78,101.43-34.57,197.23-10.59,281.83,1.68,5.94-1.77,12.11-7.7,13.79-1.02.29-2.05.42-3.05.42Z"
        class="cls-9"
      ></path>
      <path
        d="m941.37,1463.14c-.23,0-.45,0-.69-.02-6.16-.37-10.84-5.67-10.47-11.83,4.51-74.28-30.66-152.58-71.39-243.24-56.17-125.06-119.84-266.8-101.43-445.59.63-6.14,6.25-10.67,12.25-9.97,6.14.63,10.6,6.12,9.97,12.25-17.8,172.83,44.57,311.66,99.58,434.15,41.93,93.36,78.15,173.98,73.31,253.75-.36,5.92-5.28,10.49-11.14,10.49Z"
        class="cls-9"
      ></path>
      <path
        d="m1125.43,1566.85c-.41,0-.82-.02-1.23-.07-6.13-.67-10.56-6.19-9.89-12.32,9.75-88.94-55.22-160.63-137.47-251.41-57.23-63.15-122.08-134.74-173.04-226.04-3.01-5.39-1.08-12.19,4.31-15.2,5.39-3.01,12.2-1.08,15.2,4.31,49.72,89.08,113.67,159.66,170.09,221.93,82.62,91.17,153.96,169.92,143.12,268.84-.63,5.72-5.47,9.96-11.09,9.96Z"
        class="cls-9"
      ></path>
      <g class="cls-5">
        <path
          d="m1050.67,377.93s-121.48-83.01-169.66-141.86c-48.17-58.84-123.11-177.2-184.07-84.38,0,0-23.48,90.62,149.18,208.33,0,0,69.24,34.17,83.49,68.77,0,0,41.3-63.49,121.06-50.87Z"
          class="cls-9"
        ></path>
        <path
          d="m929.13,433.88l-1.72-4.18c-13.74-33.37-81.66-67.21-82.34-67.55-172.35-117.48-151.41-207.29-150.43-211.06l.31-.71c14.92-22.71,31.95-34.61,50.62-35.37.65-.03,1.3-.04,1.96-.04,41.76,0,83.78,53.87,117.66,97.29,6.24,7.99,12.12,15.53,17.66,22.3,47.41,57.9,167.95,140.57,169.17,141.4l8.72,5.96-10.43-1.65c-77.24-12.26-118.3,49.2-118.7,49.82l-2.47,3.78Zm-229.96-281.25c-1.26,6.25-15.3,93.89,148.29,205.43,2.48,1.2,65.2,32.45,82.6,66.09,9.64-12.5,47.68-55.24,111.39-49.75-27.77-19.53-121.56-87.09-162.28-136.83-5.58-6.82-11.48-14.38-17.73-22.39-33.73-43.24-75.72-97.08-115.67-95.42-16.96.69-32.63,11.75-46.6,32.87Z"
          class="cls-9"
        ></path>
      </g>
      <g class="cls-2">
        <path
          d="m284.46,799.69c192.28,118,310.15,322.79,412.45,545.7,153.27,243.52,407.68,370.8,762.15,346.56,64.81-4.42,124.49-37.25,161.4-89.6,3.01-7.36,5.43-14.52,7.26-21.38,47.2-180-240.65-55.81-287.45-1.42-46.8,54.39-119.78,47.02-119.78,47.02-225.98-19.48-380.13-181.5-447.72-265.11-67.59-83.61-197.09-372.76-197.09-372.76-48.54-132.24-108.69-178.72-145.2-195.06-36.16-16.18-69.31-38.48-96.49-67.3-159.01-168.56-66.36-290.28-62.16-295.56-115.39,113.01-129.13,249.13,12.64,368.9Z"
          class="cls-9"
        ></path>
        <path
          d="m1375.52,1697.24c-140.08,0-265.57-25.47-373.99-76.01-125.66-58.57-228.82-150.95-306.63-274.58-97.07-211.47-214-423.63-411.68-544.94l-.29-.21c-66.29-56.01-101.1-117.07-103.47-181.49-2.37-64.47,28.99-130.49,90.7-190.93l3.52,3.18c-3.99,5.02-95.97,124.96,62.03,292.45,25.92,27.48,58.13,49.93,95.74,66.76,40.59,18.16,98.95,66.98,146.46,196.41,1.23,2.74,130.08,289.67,196.71,372.09,89.51,110.72,239.56,246.43,446.08,264.23.75.07,72.36,6.57,117.77-46.2,34.45-40.04,202.54-119.48,268.97-84.61,26.66,13.99,34.25,43.67,22.58,88.19-1.87,7.03-4.35,14.32-7.36,21.68l-.25.47c-37.42,53.06-96.9,86.08-163.18,90.6-28.44,1.95-56.35,2.92-83.7,2.92ZM285.85,797.76c198.67,121.99,316.01,334.81,413.21,546.64,156.74,248.99,419.53,368.46,759.83,345.18,64.76-4.41,122.87-36.62,159.47-88.37,2.89-7.09,5.26-14.1,7.06-20.84,11.04-42.09,4.24-69.94-20.19-82.77-64.77-33.98-229.34,44.2-263.16,83.51-47.07,54.7-121.07,47.91-121.82,47.83-208.15-17.94-359.24-154.54-449.33-265.97-67.01-82.9-196.12-370.39-197.42-373.29-49.47-134.77-111.46-179.3-144-193.86-38.18-17.08-70.9-39.9-97.25-67.83-126.38-133.97-95.11-238.67-73.95-279.85-50.67,55.09-76.22,114.11-74.1,171.71,2.31,62.99,36.51,122.85,101.66,177.92Z"
          class="cls-9"
        ></path>
      </g>
      <g class="cls-2">
        <path
          d="m1551.16,1399.07c-127.64,40.66-260.67,60.6-376.95-23.22-40.08-28.89-69.41-70.19-85.56-116.88-26.88-77.68-89.65-222.13-196.14-266.77-148.14-62.11,35.8-437.26-54.56-515.02-90.35-77.75-281.84-250.32-182.53-441.06,0,0-54.6,3.9-68.1,53.28-13.5,49.37.18,149.32.18,149.32,0,0,39.37,114.8,106.44,234.55,67.07,119.75,75.33,202.85,75.33,202.85,0,0-4.53,169.4-2.17,194.13,2.36,24.73,39.58,223.2,101.89,297.56,62.31,74.35,160.5,177.42,160.5,177.42,0,0,110.5,124.06,95.25,205.07,0,0,107.52,65.67,184.04-19.97,76.53-85.64,242.37-131.24,242.37-131.24Z"
          class="cls-9"
        ></path>
        <path
          d="m1212.38,1576.49c-48.39,0-88.21-23.76-88.87-24.17l-1.4-.85.3-1.61c14.86-78.95-93.6-201.82-94.69-203.05-.93-.98-98.9-103.91-160.55-177.47-64.13-76.53-100.59-279.45-102.44-298.86-2.35-24.58,1.97-187.49,2.16-194.41-.07-.53-9.02-83.76-75.03-201.63-66.41-118.56-106.23-233.79-106.62-234.94-.67-4.55-13.7-101.45-.22-150.72,13.79-50.41,69.66-54.98,70.22-55.02l4.24-.3-1.96,3.77c-101.24,194.43,104.52,371.5,181.97,438.16,41.3,35.54,26.97,129.78,11.8,229.55-18.79,123.59-38.22,251.39,42.13,285.07,106.53,44.67,169.44,187.2,197.47,268.19,16.48,47.64,45.78,87.66,84.71,115.73,113.44,81.77,240.96,63.12,353.62,29.44,13-4.27,20.95-6.49,21.31-6.59l1.35,4.56c-7.07,2.25-14.19,4.46-21.38,6.61-47.19,15.49-160.99,57.99-219.94,123.95-30.59,34.24-66.25,44.59-98.18,44.59Zm-85-27.42c12.75,7.14,109.99,57.62,179.64-20.33,43.58-48.77,116.55-84.8,171.28-106.78-99.96,23.35-207.69,26.31-305.48-44.17-39.73-28.64-69.61-69.46-86.42-118.03-27.76-80.24-89.98-221.41-194.81-265.36-83.77-35.12-64.05-164.78-44.99-290.18,14.97-98.43,29.11-191.41-10.2-225.23-77.7-66.87-283.22-243.75-185.16-439.91-12.94,2.18-50.94,11.85-61.64,50.95-13.22,48.34.1,147.38.24,148.37.29.7,39.98,115.54,106.17,233.71,66.54,118.81,75.54,202.94,75.62,203.78-.03,1.99-4.49,169.83-2.17,194.14,1.84,19.26,37.95,220.6,101.35,296.25,61.55,73.44,159.41,176.27,160.4,177.3,4.57,5.13,109.71,124.29,96.17,205.49Z"
          class="cls-9"
        ></path>
      </g>
      <g class="cls-2">
        <path
          d="m533.86,126.66s-102.88,118.84-68.72,259.59c34.17,140.75,120.24,183.14,154.25,397.9-142.68-190.29-242.2-375.46-199.06-543.67,0,0,69.8-93.62,113.52-113.82Z"
          class="cls-9"
        ></path>
        <path
          d="m623.24,793.23l-5.74-7.66c-117.75-157.04-246.83-360.98-199.46-545.69l.4-.83c2.87-3.84,70.66-94.33,114.43-114.56l10-4.62-7.21,8.33c-1.02,1.18-101.67,119.58-68.2,257.48,14.22,58.59,37.59,100.22,62.32,144.29,33.81,60.23,72.13,128.51,91.97,253.8l1.49,9.46ZM422.52,241.52c-45.76,179.6,77.57,378.44,192.96,533.41-20.03-118.25-55.51-181.46-89.85-242.64-24.9-44.37-48.42-86.26-62.8-145.49-28.58-117.74,38.82-221.31,61.86-252.3-41.16,26.6-97.69,101.06-102.17,107.02Z"
          class="cls-9"
        ></path>
      </g>
      <g class="cls-3">
        <path
          d="m1526.63,1296.5c6.05,10.97,10.93,25.89,2.25,34.93-7.2,7.5-19.41,6.09-29.48,3.53-26.98-6.85-52.89-17.88-76.54-32.57-15.52-9.64-30.43-21.26-39.7-37.01-9.27-15.75-11.95-36.35-2.96-52.25,39.84-70.52,128.82,51.45,146.42,83.37Z"
          class="cls-11"
        ></path>
      </g>
      <g class="cls-3">
        <path
          d="m1383.84,1149.32c1.25,6.4.75,13.54-3.24,18.7-3.93,5.09-10.66,7.4-17.09,7.41-6.43.01-12.68-1.97-18.75-4.1-8.91-3.13-17.87-6.7-25.12-12.76-7.25-6.06-12.62-15.03-12.21-24.47.5-11.55,10.27-21.73,21.67-23.66,13.32-2.25,21.93,6.34,32.42,12.63,10.77,6.47,19.75,13.08,22.32,26.24Z"
          class="cls-11"
        ></path>
      </g>
    </g>
  </svg>
  <span class="ftt">For the tough.</span>
</div>

<style>
/* From Uiverse.io by alexmaracinaru - Tags: gradient, card, colorful, shoe, illustration */
.card {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 220px;
  height: 324px;
  padding: 30px;
  border-radius: 20px;
  background-color: #ffec99;
  background-image: radial-gradient(
      at 56% 46%,
      rgb(203, 151, 252) 0px,
      transparent 50%
    ),
    radial-gradient(at 33% 51%, rgb(85, 141, 246) 0px, transparent 50%),
    radial-gradient(at 95% 81%, rgb(197, 108, 239) 0px, transparent 50%),
    radial-gradient(at 4% 9%, rgb(231, 136, 72) 0px, transparent 50%),
    radial-gradient(at 32% 25%, rgb(235, 232, 88) 0px, transparent 50%),
    radial-gradient(at 25% 8%, rgb(235, 200, 85) 0px, transparent 50%),
    radial-gradient(at 71% 28%, hsla(23, 62%, 62%, 1) 0px, transparent 50%);
  box-shadow: rgba(26, 26, 56, 0.2) 0px 7px 29px 0px;
  border: 1px solid rgb(253, 235, 207);
}
.wls {
  color: rgb(248, 234, 209);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-weight: 900;
  font-size: 1.5em;
  line-height: 1.1;
}
.shoe {
  width: 140px;
  padding-left: 5px;
}
.ftt {
  color: rgb(68, 18, 68);
  font-weight: 800;
}
.cls-1 {
  opacity: 0.2;
}
.cls-2 {
  opacity: 0.3;
}
.cls-3 {
  opacity: 0.25;
}
.cls-4 {
  opacity: 0.6;
}
.cls-5 {
  opacity: 0.5;
}
.cls-6 {
  fill: #f46800;
}
.cls-6,
.cls-7,
.cls-8,
.cls-9,
.cls-10,
.cls-11,
.cls-12 {
  stroke-width: 0px;
}
.cls-7 {
  fill: #f2e7ed;
}
.cls-8 {
  fill: #82898e;
}
.cls-9 {
  fill: #371a45;
}
.cls-10 {
  fill: #8e99a0;
}
.cls-11 {
  fill: #fff;
}
.cls-12 {
  fill: #00b9f2;
}

</style>


================================================
FILE: Cards/alexmaracinaru_pink-tiger-66.html
================================================
<div class="card">
  <div class="item item--1">
    <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path fill="rgba(149,149,255,1)" d="M17 15.245v6.872a.5.5 0 0 1-.757.429L12 20l-4.243 2.546a.5.5 0 0 1-.757-.43v-6.87a8 8 0 1 1 10 0zm-8 1.173v3.05l3-1.8 3 1.8v-3.05A7.978 7.978 0 0 1 12 17a7.978 7.978 0 0 1-3-.582zM12 15a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"></path></svg>
    <span class="quantity"> 90+ </span>
    <span class="text text--1"> Icons </span>
  </div>
  <div class="item item--2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0L24 0 24 24 0 24z"></path><path d="M16 16c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3zM6 12c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4zm10 6c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1zM6 14c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zm8.5-12C17.538 2 20 4.462 20 7.5S17.538 13 14.5 13 9 10.538 9 7.5 11.462 2 14.5 2zm0 2C12.567 4 11 5.567 11 7.5s1.567 3.5 3.5 3.5S18 9.433 18 7.5 16.433 4 14.5 4z" fill="rgba(252,161,71,1)"></path></svg>    <span class="quantity"> 70+ </span>
    <span class="text text--2"> Illustrations </span>
  </div>
  <div class="item item--3">
    <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path fill="rgba(66,193,110,1)" d="M20.083 15.2l1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85zm0-4.7l1.202.721a.5.5 0 0 1 0 .858L12 17.65l-9.285-5.571a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85zm-7.569-9.191l8.771 5.262a.5.5 0 0 1 0 .858L12 13 2.715 7.429a.5.5 0 0 1 0-.858l8.77-5.262a1 1 0 0 1 1.03 0zM12 3.332L5.887 7 12 10.668 18.113 7 12 3.332z"></path></svg>
    <span class="quantity"> 150+ </span>
    <span class="text text--3"> Components </span>
  </div>
  <div class="item item--4">
    <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path fill="rgba(220,91,183,1)" d="M12 20h8v2h-8C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10a9.956 9.956 0 0 1-2 6h-2.708A8 8 0 1 0 12 20zm0-10a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-4 4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm8 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-4 4a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>
    <span class="quantity"> 30+ </span>
    <span class="text text--4"> Animations </span>
  </div>
</div>
<style>
/* From Uiverse.io by alexmaracinaru - Tags: card */
.card {
 width: 190px;
 height: 254px;
 color: white;
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr;
 gap: 5px;
 overflow: visible;
}

.card .item {
 border-radius: 10px;
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

.item:hover {
 transform: scale(0.95);
 transition: all 0.3s;
}

.item svg {
 width: 40px;
 height: 40px;
 margin-bottom: 7px;
}

.item--1 {
 background: #c7c7ff;
}

.item--2 {
 background: #ffd8be;
}

.item--3 {
 background: #a9ecbf;
}

.item--4 {
 background: #f3bbe1;
}

.quantity {
 font-size: 25px;
 font-weight: 600;
}

.text {
 font-size: 12px;
 font-family: inherit;
 font-weight: 600;
}

.text--1 {
 color: rgba(149,149,255,1);
}

.text--2 {
 color: rgba(252,161,71,1);
}

.text--3 {
 color: rgba(66,193,110,1);
}

.text--4 {
 color: rgba(220,91,183,1);
}
</style>


================================================
FILE: Cards/alexmaracinaru_purple-zebra-61.html
================================================
<div class="card">
    <div class="card-image"></div>
    <div class="category"> Illustration </div>
    <div class="heading"> A heading that must span over two lines
        <div class="author"> By <span class="name">Abi</span> 4 days ago</div>
    </div>
</div>
<style>
/* From Uiverse.io by alexmaracinaru - Tags: card */
.card {
  width: 190px;
  background: white;
  padding: .4em;
  border-radius: 6px;
}

.card-image {
  background-color: rgb(236, 236, 236);
  width: 100%;
  height: 130px;
  border-radius: 6px 6px 0 0;
}

.card-image:hover {
  transform: scale(0.98);
}

.category {
  text-transform: uppercase;
  font-size: 0.7em;
  font-weight: 600;
  color: rgb(63, 121, 230);
  padding: 10px 7px 0;
}

.category:hover {
  cursor: pointer;
}

.heading {
  font-weight: 600;
  color: rgb(88, 87, 87);
  padding: 7px;
}

.heading:hover {
  cursor: pointer;
}

.author {
  color: gray;
  font-weight: 400;
  font-size: 11px;
  padding-top: 20px;
}

.name {
  font-weight: 600;
}

.name:hover {
  cursor: pointer;
}
</style>


================================================
FILE: Cards/alexmaracinaru_tender-fly-40.html
================================================
<div class="card">
<div class="card-name">Quote of the month</div>
<div class="quote">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 330 307" height="80" width="80">
    <path fill="currentColor" d="M302.258 176.221C320.678 176.221 329.889 185.432 329.889 203.853V278.764C329.889 297.185 320.678 306.395 302.258 306.395H231.031C212.61 306.395 203.399 297.185 203.399 278.764V203.853C203.399 160.871 207.902 123.415 216.908 91.4858C226.323 59.1472 244.539 30.902 271.556 6.75027C280.562 -1.02739 288.135 -2.05076 294.275 3.68014L321.906 29.4692C328.047 35.2001 326.614 42.1591 317.608 50.3461C303.69 62.6266 292.228 80.4334 283.223 103.766C274.626 126.69 270.328 150.842 270.328 176.221H302.258ZM99.629 176.221C118.05 176.221 127.26 185.432 127.26 203.853V278.764C127.26 297.185 118.05 306.395 99.629 306.395H28.402C9.98126 306.395 0.770874 297.185 0.770874 278.764V203.853C0.770874 160.871 5.27373 123.415 14.2794 91.4858C23.6945 59.1472 41.9106 30.902 68.9277 6.75027C77.9335 -1.02739 85.5064 -2.05076 91.6467 3.68014L119.278 29.4692C125.418 35.2001 123.985 42.1591 114.98 50.3461C101.062 62.6266 89.6 80.4334 80.5942 103.766C71.9979 126.69 67.6997 150.842 67.6997 176.221H99.629Z"></path>
  </svg>
</div>
<div class="body-text">Fortune favors the bold.</div>
<div class="author">- by Virgil <br> <span>(Latin poet)</span>   <svg height="" width="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H24V24H0z" fill="none"></path><path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z"></path></svg>
</div>
</div>
<style>
/* From Uiverse.io by alexmaracinaru - Tags: simple, green, card, quote, monochromatic */
.card {
  width: 190px;
  height: 264px;
  background: rgb(183, 226, 25);
  font-family: inherit;
  position: relative;
  border-radius: 8px;
}

.quote {
  color: rgb(223, 248, 134);
  padding-left: 30px;
  position: relative;
}

.card-name {
  text-transform: uppercase;
  font-weight: 700;
  color: rgb(127, 155, 29);
  padding: 35px;
  line-height: 23px;
}

.body-text {
  font-size: 20px;
  font-weight: 900;
  padding: 60px 40px 0;
  color: #465512;
  position: absolute;
  top: 40px;
  left: 1px;
  line-height: 23px;
}

.author {
  margin-top: 5px;
  opacity: 0;
  transition: 0.5s;
}

.card:hover .author {
  opacity: 1;
}

.pic {
  width: 50px;
  height: 50px;
  background-color: rgb(158, 196, 21);
  border-radius: 50%;
}

.author-container {
  display: flex;
  align-items: center;
}

.author {
  font-weight: 700;
  color: rgb(127, 155, 29);
  padding-left: 30px;
}

.card .author svg {
  display: inline;
  font-size: 12px;
  color: rgba(128, 155, 29, 0.452);
}
</style>


================================================
FILE: Cards/alexmaracinaru_white-octopus-62.html
================================================
<div class="card">
  <div class="card-border-top">
  </div>
  <div class="img">
  </div>
  <span> Person</span>
  <p class="job"> Job Title</p>
  <button> Click
  </button>
</div>
<style>
/* From Uiverse.io by alexmaracinaru - Tags: card */
.card {
 width: 190px;
 height: 254px;
 background: #3405a3;
 border-radius: 15px;
 box-shadow: 1px 5px 60px 0px #100a886b;
}

.card .card-border-top {
 width: 60%;
 height: 3%;
 background: #6b64f3;
 margin: auto;
 border-radius: 0px 0px 15px 15px;
}

.card span {
 font-weight: 600;
 color: white;
 text-align: center;
 display: block;
 padding-top: 10px;
 font-size: 16px;
}

.card .job {
 font-weight: 400;
 color: white;
 display: block;
 text-align: center;
 padding-top: 3px;
 font-size: 12px;
}

.card .img {
 width: 70px;
 height: 80px;
 background: #6b64f3;
 border-radius: 15px;
 margin: auto;
 margin-top: 25px;
}

.card button {
 padding: 8px 25px;
 display: block;
 margin: auto;
 border-radius: 8px;
 border: none;
 margin-top: 30px;
 background: #6b64f3;
 color: white;
 font-weight: 600;
}

.card button:hover {
 background: #534bf3;
}
</style>


================================================
FILE: Cards/alexreyes091_ancient-chicken-80.html
================================================
<div class="card">
  <div class="card__content">
    <div class="card__date"> 01 . 05 . 2022
    </div>
    <div class="card__info">
      <h3>NOTE</h3>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by alexreyes091 - Tags: card */
.card {
 width: 254px;
 height: 190px;
 transform: rotate(90deg);
 background: #00BCD4;
 box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
 transition-duration: 1.5s;
 transition-property: width, height,transform;
}

.card:hover {
 width: 190px;
 height: 254px;
 transform: rotate(0deg);
  /* -ms-transform:rotate(90deg);
  -webkit-transform:rotate(90deg); */
}

.card__content {
 padding: 1rem;
 font-size: smaller;
}

.card__date {
 color: white;
 margin-bottom: .5rem;
 font-weight: 700;
}

.card__info {
 width: 100%;
 height: 200px;
 padding: .7rem;
 font-size: smaller;
 border-radius: 1rem;
 text-align: center;
 background-color: #fae4c3;
 color: #fae4c3;
 transition-duration: 1s;
 transition-property: color;
}

.card__info:hover {
 color: #212121;
}


</style>


================================================
FILE: Cards/alexreyes091_hard-firefox-84.html
================================================
<div class="card">
  <div class="card__content">
    <div class="card__content-heading">
      <h2>Title</h2>
      <br>
    </div>
    <div class="card__content-body">
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
    </div>
    <div class="card__content-footer">
      <button> Yes
      </button>
      <button> No
      </button>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by alexreyes091 - Tags: card */
.card {
 width: 190px;
 height: 254px;
 padding: 2%;
 background: rgb(255, 255, 255);
 border-bottom: 2px solid blueviolet;
 border-right: 2px solid blueviolet;
 border-top: 2px solid white;
 border-left: 2px solid white;
 transition-duration: 1s;
 transition-property: border-top, 
    border-left, 
    border-bottom,
    border-right,
    box-shadow;
}

.card:hover {
 border-top: 2px solid blueviolet;
 border-left: 2px solid blueviolet;
 border-bottom: 2px solid rgb(238, 103, 238);
 border-right: 2px solid rgb(238, 103, 238);
 box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
}

.card__content {
 font-size: small;
 text-align: center;
}

.card__content-heading {
 color: blueviolet;
}

.card__content-body p {
 color: rgb(118, 104, 128);
 padding-bottom: 1rem;
}

.card__content-footer button {
 background-color: rgb(255, 255, 255);
 color: grey;
 font-weight: 700;
 border-radius: .2rem;
 border: 1px solid grey;
 padding: .5rem;
 margin: 1rem;
 transition-duration: 1s;
 transition-property: background-color, color, border;
}

button:hover {
 color: white;
 background-color: rgb(238, 103, 238);
 border: 1px solid white;
 box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}



</style>


================================================
FILE: Cards/alexroumi_polite-dodo-16.html
================================================
<div class="card">
  <img
    class="image"
    alt=""
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a class="instagram" href="https://www.instagram.com/uiverse.io/">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 25"
        height="25"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
        ></path>
      </svg>
    </a>
    <a class="x" href="https://twitter.com/uiverse_io">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
        ></path>
      </svg>
    </a>
    <a class="discord" href="https://discord.gg/KD8ba2uUpT">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 25 25"
        height="25"
        width="25"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by alexroumi  - Tags: minimalist, social, card, social media, light&dark */
.card {
  background-color: #ffd093;
  background: radial-gradient(
    circle,
    rgba(147, 119, 91, 1) 0%,
    rgba(255, 208, 147, 1) 50%
  );
  aspect-ratio: 4/5;
  height: 27rem;
  border-radius: 25px;
  padding: 10px;
  outline: 5px solid #56300b;
  outline-offset: -15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.image {
  align-self: center;
}

.card::before {
  width: 10px;
  height: 10px;
  background-color: blue;
  position: absolute;
  top: 10px;
  left: 10px;
}

.image {
  filter: sepia(70%) saturate(100%) brightness(70%) hue-rotate(100deg)
    brightness(1.1);
  width: 230px;
}

.heading {
  text-align: center;
}

.icons {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 5px;
  padding-bottom: 10px;
}

.discord,
.x,
.instagram {
  color: #56300b;
}

</style>
    

================================================
FILE: Cards/alexruix_bright-grasshopper-50.html
================================================
          <div class="card">
          <div class="card-img"> </div>
          <ul class="social-media">
          <li><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
          <path d="M962.267429 233.179429q-38.253714 56.027429-92.598857 95.451429 0.585143 7.972571 0.585143 23.990857 0 74.313143-21.723429 148.260571t-65.974857 141.970286-105.398857 120.32-147.456 83.456-184.539429 31.158857q-154.843429 0-283.428571-82.870857 19.968 2.267429 44.544 2.267429 128.585143 0 229.156571-78.848-59.977143-1.170286-107.446857-36.864t-65.170286-91.136q18.870857 2.852571 34.889143 2.852571 24.576 0 48.566857-6.290286-64-13.165714-105.984-63.707429t-41.984-117.394286l0-2.267429q38.838857 21.723429 83.456 23.405714-37.741714-25.161143-59.977143-65.682286t-22.308571-87.990857q0-50.322286 25.161143-93.110857 69.12 85.138286 168.301714 136.265143t212.260571 56.832q-4.534857-21.723429-4.534857-42.276571 0-76.580571 53.979429-130.56t130.56-53.979429q80.018286 0 134.875429 58.294857 62.317714-11.995429 117.174857-44.544-21.138286 65.682286-81.115429 101.741714 53.174857-5.705143 106.276571-28.598857z"></path>
        </svg></li>
        <li><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
        <path d="M123.52064 667.99143l344.526782 229.708899 0-205.136409-190.802457-127.396658zM88.051421 585.717469l110.283674-73.717469-110.283674-73.717469 0 147.434938zM556.025711 897.627196l344.526782-229.708899-153.724325-102.824168-190.802457 127.396658 0 205.136409zM512 615.994287l155.406371-103.994287-155.406371-103.994287-155.406371 103.994287zM277.171833 458.832738l190.802457-127.396658 0-205.136409-344.526782 229.708899zM825.664905 512l110.283674 73.717469 0-147.434938zM746.828167 458.832738l153.724325-102.824168-344.526782-229.708899 0 205.136409zM1023.926868 356.00857l0 311.98286q0 23.402371-19.453221 36.566205l-467.901157 311.98286q-11.993715 7.459506-24.57249 7.459506t-24.57249-7.459506l-467.901157-311.98286q-19.453221-13.163834-19.453221-36.566205l0-311.98286q0-23.402371 19.453221-36.566205l467.901157-311.98286q11.993715-7.459506 24.57249-7.459506t24.57249 7.459506l467.901157 311.98286q19.453221 13.163834 19.453221 36.566205z"></path>
      </svg></li>
      <li><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
      <path d="M950.930286 512q0 143.433143-83.748571 257.974857t-216.283429 158.573714q-15.433143 2.852571-22.601143-4.022857t-7.168-17.115429l0-120.539429q0-55.442286-29.696-81.115429 32.548571-3.437714 58.587429-10.313143t53.686857-22.308571 46.299429-38.034286 30.281143-59.977143 11.702857-86.016q0-69.12-45.129143-117.686857 21.138286-52.004571-4.534857-116.589714-16.018286-5.12-46.299429 6.290286t-52.589714 25.161143l-21.723429 13.677714q-53.174857-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.689143-22.016-49.152-7.68q-25.161143 64.585143-4.022857 116.589714-45.129143 48.566857-45.129143 117.686857 0 48.566857 11.702857 85.723429t29.988571 59.977143 46.006857 38.253714 53.686857 22.308571 58.587429 10.313143q-22.820571 20.553143-28.013714 58.88-11.995429 5.705143-25.746286 8.557714t-32.548571 2.852571-37.449143-12.288-31.744-35.693714q-10.825143-18.285714-27.721143-29.696t-28.306286-13.677714l-11.410286-1.682286q-11.995429 0-16.603429 2.56t-2.852571 6.582857 5.12 7.972571 7.460571 6.875429l4.022857 2.852571q12.580571 5.705143 24.868571 21.723429t17.993143 29.110857l5.705143 13.165714q7.460571 21.723429 25.161143 35.108571t38.253714 17.115429 39.716571 4.022857 31.744-1.974857l13.165714-2.267429q0 21.723429 0.292571 50.834286t0.292571 30.866286q0 10.313143-7.460571 17.115429t-22.820571 4.022857q-132.534857-44.032-216.283429-158.573714t-83.748571-257.974857q0-119.442286 58.88-220.306286t159.744-159.744 220.306286-58.88 220.306286 58.88 159.744 159.744 58.88 220.306286z"></path>
    </svg></li>
  </ul>
  <div class="card-info">
    <p class="title">Name</p>
    <p class="subtitle">Web Dev</p>
  </div>
</div>
<style>
/* From Uiverse.io by alexruix - Tags: gradient, card, hover, image, shadow, about me, clean */
.card {
  width: 190px;
  height: 254px;
  position: relative;
  background: #f5f5f5;
  color: #252525;
  border-radius: 4px;
  overflow: hidden;
  line-height: 150%;
  box-shadow: 0px 10px 20px rgba(80, 80, 80, 0.2);
  transition: box-shadow .3s ease-in-out;
}

.card-info {
  position: absolute;
  bottom: 1em;
  width: 100%;
  text-align: center;
}

/* Image */
.card-img {
  background: #00ff88;
  background: linear-gradient(to top, #00ff88, #61efff);
  height: 100%;
  width: 100%;
  position: absolute;
  transition: transform .3s ease-in-out;
  z-index: 2;
}

/* Buttons */
.social-media {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 1rem;
  transform: translateY(-6em);
  z-index: 3;
}

.social-media li {
  background: #f5f5f5;
  display: inline-flex;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: all .3s ease-in;
}
/* Icons */
.social-media li svg {
  --size: 24px;
  width: var(--size);
  height: var(--size);
  fill: #252525;
}

/* Texts */
.title {
  font-size: 1.5em;
  font-weight: bold;
}

.subtitle {
  letter-spacing: 1px;
  font-size: 0.9em;
}


/* Hovers */
.card:hover {
  box-shadow: 0px 15px 30px rgba(80, 80, 80, 0.3);
}

.card:hover .card-img {
  transform: translateY(-5em);
}

.card:hover .social-media li {
  transform: translateY(-5%);
  opacity: 1;
}

.card:hover .social-media li:nth-child(1) {
  transition-delay: 0s;
}

.card:hover .social-media li:nth-child(2) {
  transition-delay: .1s;
}

.card:hover .social-media li:nth-child(3) {
  transition-delay: .2s;
}
</style>


================================================
FILE: Cards/alexruix_cold-cat-38.html
================================================
<div class="card">
</div>
<style>
/* From Uiverse.io by alexruix - Tags: card */
/*Rainbow card*/
.card {
 --background: #f5f5f5;
 --green: #1FC11B;
 --yellow: #FFD913;
 --orange: #FF9C55;
 --red: #FF5555;
 --violet: #555BFF;
 width: 190px;
 height: 254px;
 display: flex;
 flex-direction: column;
 gap: 1em;
 background: var(--background);
 padding: 1rem;
 border: 3px solid var(--violet);
 box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--green),
        20px -20px 0 -3px var(--background), 20px -20px var(--yellow), 
        30px -30px 0 -3px var(--background), 30px -30px var(--orange), 
        40px -40px 0 -3px var(--background), 40px -40px var(--red);
 transition: box-shadow 1s, top 1s, left 1s;
}


/*Hover*/
.card:hover {
 box-shadow: 0 0 0 -3px var(--background), 0 0 0 0 var(--green),
      0 0 0 -3px var(--background), 0 0 0 0  var(--yellow),
      0 0 0 -3px var(--background), 0 0 0 0  var(--orange),
      0 0 0 -3px  var(--background), 0 0 0 0  var(--red);
}
</style>


================================================
FILE: Cards/alexruix_cowardly-ape-35.html
================================================
<div class="card">
  <div class="card-details">
    <p class="text-title">Card title</p>
    <p class="text-body">Here are the details of the card</p>
  </div>
  <button class="card-button">More info</button>
</div>
<style>
/* From Uiverse.io by alexruix - Tags: card */
.card {
 width: 190px;
 height: 254px;
 border-radius: 20px;
 background: #f5f5f5;
 position: relative;
 padding: 1.8rem;
 border: 2px solid #c3c6ce;
 transition: 0.5s ease-out;
 overflow: visible;
}

.card-details {
 color: black;
 height: 100%;
 gap: .5em;
 display: grid;
 place-content: center;
}

.card-button {
 transform: translate(-50%, 125%);
 width: 60%;
 border-radius: 1rem;
 border: none;
 background-color: #008bf8;
 color: #fff;
 font-size: 1rem;
 padding: .5rem 1rem;
 position: absolute;
 left: 50%;
 bottom: 0;
 opacity: 0;
 transition: 0.3s ease-out;
}

.text-body {
 color: rgb(134, 134, 134);
}

/*Text*/
.text-title {
 font-size: 1.5em;
 font-weight: bold;
}

/*Hover*/
.card:hover {
 border-color: #008bf8;
 box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}

.card:hover .card-button {
 transform: translate(-50%, 50%);
 opacity: 1;
}
</style>


================================================
FILE: Cards/alexruix_gentle-crab-18.html
================================================
<div class="card">
<div class="card-img"></div>
  <div class="card-info">
    <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20 15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="currentColor"></path></svg>
    <p class="text-title">Card title</p>
    <p class="text-body">Lorem Ipsum dolor sit amet</p>
    <button class="card-button">Read More</button>
  </div>
</div>
<style>
/* From Uiverse.io by alexruix - Tags: card */
.card {
 width: 190px;
 height: 254px;
 border-radius: 1em;
 padding: 1.9rem;
 background: #f5f5f5;
 position: relative;
 display: flex;
 align-items: flex-end;
 transition: 0.4s ease-out;
 box-shadow: 0px 7px 20px rgba(43, 8, 37, 0.2);
}

.card:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
 background: rgba(238, 116, 116, 0.4);
 z-index: 2;
 transition: 0.5s;
}

.card-info {
 position: relative;
 z-index: 3;
 color: #f5f5f5;
 opacity: 0;
 transform: translateY(20%);
 transition: 0.5s;
}

/*Text*/
.text-title {
 font-size: 1.5rem;
 font-weight: 500;
}

.text-body {
 letter-spacing: 1px;
 font-size: 0.9rem;
 margin: 5px 0 15px 0;
}

/*Button*/
.card-button {
 padding: 0.6rem;
 outline: none;
 border: none;
 border-radius: 4px;
 background: #ee9ca7;
 color: white;
 font-weight: bold;
 transition: 0.4s ease;
}

/*Image*/
.card-img {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 background: #ee9ca7;
 background: linear-gradient(to bottom, #e7aeae, #ee9ca7);
}

/*Hover*/
.card:hover {
 transform: translateY(5%);
}

.card:hover:before {
 opacity: 1;
}

.card:hover .card-info {
 opacity: 1;
 transform: translateY(0);
}

.card-button:hover {
 background: rgba(218, 77, 77, 0.4);
 color: #f5f5f5;
}
</style>


================================================
FILE: Cards/alexruix_heavy-elephant-39.html
================================================
<div class="card">
  <div class="card-info">
    <p class="title">Magic Card</p>
  </div>
</div>
<style>
/* From Uiverse.io by alexruix - Tags: gradient, card */
.card {
 --background: linear-gradient(to left, #f7ba2b 0%, #ea5358 100%);
 width: 190px;
 height: 254px;
 padding: 5px;
 border-radius: 1rem;
 overflow: visible;
 background: #f7ba2b;
 background: var(--background);
 position: relative;
 z-index: 1;
}

.card::after {
 position: absolute;
 content: "";
 top: 30px;
 left: 0;
 right: 0;
 z-index: -1;
 height: 100%;
 width: 100%;
 transform: scale(0.8);
 filter: blur(25px);
 background: #f7ba2b;
 background: var(--background);
 transition: opacity .5s;
}

.card-info {
 --color: #181818;
 background: var(--color);
 color: var(--color);
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 100%;
 overflow: visible;
 border-radius: .7rem;
}

.card .title {
 font-weight: bold;
 letter-spacing: .1em;
}

/*Hover*/
.card:hover::after {
 opacity: 0;
}

.card:hover .card-info {
 color: #f7ba2b;
 transition: color 1s;
}

</style>


================================================
FILE: Cards/alexruix_horrible-skunk-73.html
================================================
<div class="card">
<div class="card-img"></div>
  <div class="card-info">
    <div class="card-text">
      <p class="text-title">This is a title</p>
      <p class="text-subtitle">This is a subtitle</p>
    </div>
    <div class="card-icon">
      <svg viewBox="0 0 28 25" class="icon">
        <path d="M13.145 2.13l1.94-1.867 12.178 12-12.178 12-1.94-1.867 8.931-8.8H.737V10.93h21.339z"></path>
      </svg>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by alexruix - Tags: minimalist, card, modern, animated */
.card {
  width: 190px;
  height: 254px;
  position: relative;
  border-radius: 16px;
  background: #f5f5f5;
  transition: box-shadow .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  cursor: pointer;
}

.card-img {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #6eee87;
}

.card-info {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.card-icon {
  opacity: 0;
  transform: translateX(-20%);
  width: 2em;
  height: 2em;
  transition: all .3s ease-in-out;
}

.icon {
  --size: 20px;
  width: var(--size);
  height: var(--size);
}

/*Text*/
.card-text p {
  line-height: 140%;
 /*Delete this line for multi-line text*/
  white-space: nowrap;
}

.text-title {
  font-weight: 900;
  font-size: 1.2rem;
  color: #222;
}

.text-subtitle {
  color: #333;
  font-weight: 500;
  font-size: 1rem;
}

/*Hover*/
.card:hover {
  box-shadow: 0 10px 20px 4px rgba(35, 35, 35, .1);
}

.card:hover .card-icon {
  opacity: 1;
  transform: translateX(20%);
}
</style>


================================================
FILE: Cards/alexruix_itchy-mole-56.html
================================================
<div class="card">
    <div class="imgbox">
        <div class="img"></div>
    </div>
    <div class="details">
        <h2 class="title">John Doe</h2>
        <span class="caption">Developer</span>
    </div>
</div>
<style>
/* From Uiverse.io by alexruix - Tags: profile, gradient, card */
.card {
  overflow: visible;
  position: relative;
  width: 190px;
  height: 254px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

.card:before,
.card:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: #fff;
  transition: 0.5s;
  z-index: -99;
}

.details {
  position: absolute;
  left: -10px;
  right: 0;
  bottom: 5px;
  height: 60px;
  text-align: center;
  text-transform: uppercase;
}

/*Image*/
.imgbox {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  background: #222;
  transition: 0.5s;
  z-index: 1;
}

.img {
  background: #4158D0;
  background-image: linear-gradient(45deg, #4158D0, #C850C0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*Text*/
.title {
  font-weight: 600;
  font-size: 20px;
  color: #777;
}

.caption {
  font-weight: 500;
  font-size: 16px;
  color: #4158D0;
  display: block;
  margin-top: 5px;
}

/*Hover*/
.card:hover .imgbox {
  bottom: 80px;
}

.card:hover:before {
  transform: rotate(20deg);
}

.card:hover:after {
  transform: rotate(10deg);
  box-shadow: 0 2px 20px rgba(0, 0, 0, .2);
}
</style>


================================================
FILE: Cards/alexruix_loud-baboon-79.html
================================================
<div class="card">
  <div class="pricing-block-content">
    <p class="pricing-plan">Starter</p>
      <div data-currency-simple="USD" data-currency="$ USD" class="price-value">
        <p class="price-number">$<span class="price-integer">0</span></p>
        <div id="priceDiscountCent">/mo</div>
      </div>
      <div class="pricing-note">free forever</div>
      <ul role="list" class="check-list">
        <li class="check-list-item"><svg style="color: rgb(102, 78, 255);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" zoomAndPan="magnify" viewBox="0 0 30 30.000001" height="16" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="id1"><path d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656" clip-rule="nonzero" fill="#664eff"></path></clipPath></defs><g clip-path="url(#id1)"><path fill="#664eff" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125" fill-opacity="1" fill-rule="nonzero"></path></g></svg>Lorem Ipsum</li>
        <li class="check-list-item"><svg style="color: rgb(102, 78, 255);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" zoomAndPan="magnify" viewBox="0 0 30 30.000001" height="16" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="id1"><path d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656" clip-rule="nonzero" fill="#664eff"></path></clipPath></defs><g clip-path="url(#id1)"><path fill="#664eff" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125" fill-opacity="1" fill-rule="nonzero"></path></g></svg>Lorem Ipsum</li>
        <li class="check-list-item"><svg style="color: rgb(102, 78, 255);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" zoomAndPan="magnify" viewBox="0 0 30 30.000001" height="16" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="id1"><path d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656" clip-rule="nonzero" fill="#664eff"></path></clipPath></defs><g clip-path="url(#id1)"><path fill="#664eff" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125" fill-opacity="1" fill-rule="nonzero"></path></g></svg>Lorem Ipsum</li>
        <li class="check-list-item"><svg style="color: rgb(102, 78, 255);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" zoomAndPan="magnify" viewBox="0 0 30 30.000001" height="16" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="id1"><path d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656" clip-rule="nonzero" fill="#664eff"></path></clipPath></defs><g clip-path="url(#id1)"><path fill="#664eff" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125" fill-opacity="1" fill-rule="nonzero"></path></g></svg>Lorem Ipsum</li>
      </ul>
  </div></div>
<style>
/* From Uiverse.io by alexruix - Tags: subscription, card, sub, plan */
/*Neo Brutalism pricing card*/
.card {
  width: 190px;
  height: 254px;
  background: #00FFA0;
  padding: 1rem;
  border-radius: 1rem;
  border: .5vmin solid #05060f;
  box-shadow: .4rem .4rem #05060f;
  overflow: hidden;
  color: black;
}

/*Card content*/
.pricing-block-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: .5rem;
}

.pricing-plan {
  color: #05060f;
  font-size: 1.3rem;
  line-height: 1.25;
  font-weight: 700;
}

.price-value {
  display: flex;
  color: #05060f;
  font-size: 1.8rem;
  line-height: 1.25;
  font-weight: 700;
}

.pricing-note {
  opacity: .8;
}

/*Checklist*/
.check-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .5rem;
}

.check-list-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>


================================================
FILE: Cards/alexruix_lucky-dingo-81.html
================================================
<div class="card">
<div class="card-image"></div>
  <div class="card-description">
    <p class="text-title"> Card Title</p>
    <p class="text-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
  </div>
</div>
<style>
/* From Uiverse.io by alexruix - Tags: gradient, card, modern, clean */
.card {
  height: 254px;
  width: 190px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 16px;
  box-shadow: 0 0 20px 8px #d0d0d0;
  overflow: hidden;
}

 /*Image*/
.card-image {
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  background: #0a3394;
  background: linear-gradient(to top, #0a3394, #4286f4);
}

/*Description */
.card-description {
  display: flex;
  position: absolute;
  gap: .5em;
  flex-direction: column;
  background-color: #f5f5f5;
  color: #212121;
  height: 70%;
  bottom: 0;
  border-radius: 16px;
  transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 1rem;
}

/*Text*/
.text-title {
  font-size: 1.3rem;
  font-weight: 700;
}

.text-body {
  font-size: 1rem;
  line-height: 130%;
}


/* Hover states */
.card:hover .card-description {
  transform: translateY(100%);
}


</style>


================================================
FILE: Cards/alexruix_moody-goose-93.html
================================================
  <div class="card">
  <div class="card-img"></div>
  <div class="card-info">
    <p class="text-title">Product title </p>
    <p class="text-body">Product description and details</p>
  </div>
  <div class="card-footer">
  <span class="text-title">$499.49</span>
  <div class="card-button">
    <svg class="svg-icon" viewBox="0 0 20 20">
      <path d="M17.72,5.011H8.026c-0.271,0-0.49,0.219-0.49,0.489c0,0.271,0.219,0.489,0.49,0.489h8.962l-1.979,4.773H6.763L4.935,5.343C4.926,5.316,4.897,5.309,4.884,5.286c-0.011-0.024,0-0.051-0.017-0.074C4.833,5.166,4.025,4.081,2.33,3.908C2.068,3.883,1.822,4.075,1.795,4.344C1.767,4.612,1.962,4.853,2.231,4.88c1.143,0.118,1.703,0.738,1.808,0.866l1.91,5.661c0.066,0.199,0.252,0.333,0.463,0.333h8.924c0.116,0,0.22-0.053,0.308-0.128c0.027-0.023,0.042-0.048,0.063-0.076c0.026-0.034,0.063-0.058,0.08-0.099l2.384-5.75c0.062-0.151,0.046-0.323-0.045-0.458C18.036,5.092,17.883,5.011,17.72,5.011z"></path>
      <path d="M8.251,12.386c-1.023,0-1.856,0.834-1.856,1.856s0.833,1.853,1.856,1.853c1.021,0,1.853-0.83,1.853-1.853S9.273,12.386,8.251,12.386z M8.251,15.116c-0.484,0-0.877-0.393-0.877-0.874c0-0.484,0.394-0.878,0.877-0.878c0.482,0,0.875,0.394,0.875,0.878C9.126,14.724,8.733,15.116,8.251,15.116z"></path>
      <path d="M13.972,12.386c-1.022,0-1.855,0.834-1.855,1.856s0.833,1.853,1.855,1.853s1.854-0.83,1.854-1.853S14.994,12.386,13.972,12.386z M13.972,15.116c-0.484,0-0.878-0.393-0.878-0.874c0-0.484,0.394-0.878,0.878-0.878c0.482,0,0.875,0.394,0.875,0.878C14.847,14.724,14.454,15.116,13.972,15.116z"></path>
    </svg>
  </div>
</div></div>
<style>
/* From Uiverse.io by alexruix - Tags: card, product */
.card {
 width: 190px;
 height: 254px;
 padding: .8em;
 background: #f5f5f5;
 position: relative;
 overflow: visible;
 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.card-img {
 background-color: #ffcaa6;
 height: 40%;
 width: 100%;
 border-radius: .5rem;
 transition: .3s ease;
}

.card-info {
 padding-top: 10%;
}

svg {
 width: 20px;
 height: 20px;
}

.card-footer {
 width: 100%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-top: 10px;
 border-top: 1px solid #ddd;
}

/*Text*/
.text-title {
 font-weight: 900;
 font-size: 1.2em;
 line-height: 1.5;
}

.text-body {
 font-size: .9em;
 padding-bottom: 10px;
}

/*Button*/
.card-button {
 border: 1px solid #252525;
 display: flex;
 padding: .3em;
 cursor: pointer;
 border-radius: 50px;
 transition: .3s ease-in-out;
}

/*Hover*/
.card-img:hover {
 transform: translateY(-25%);
 box-shadow: rgba(226, 196, 63, 0.25) 0px 13px 47px -5px, rgba(180, 71, 71, 0.3) 0px 8px 16px -8px;
}

.card-button:hover {
 border: 1px solid #ffcaa6;
 background-color: #ffcaa6;
}

</style>


================================================
FILE: Cards/alexruix_new-newt-64.html
================================================
<div class="card">
  <div class="card-front">
    <p class="title">John Doe</p>
    <p class="subtitle">Web Dev</p>
  </div>
  <div class="card-back">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>
<style>
/* From Uiverse.io by alexruix - Tags: simple, gradient, card, hover, smooth, dark, about me */
.card {
  color: #1b1b1b;
  width: 190px;
  height: 254px;
  position: relative;
  outline: 6px solid #f5f5f5;
  border-radius: 8px;
  line-height: 150%;
  padding: 16px;
  background: #ff930f;
  background-blend-mode: multiply;
  background: linear-gradient(to top, #ff930f, #ffcc33);
  transition: background-color 1s ease-in-out;
  overflow: hidden;
}

.card-front {
  bottom: 16px;
  left: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  transition: transform 1s cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

.card-back {
  transform: translateX(120%);
  transition: transform 1s cubic-bezier(0.785, 0.135, 0.150, 0.860);
}


/*Text*/
.title {
  font-size: 1.3rem;
  font-weight: bold;
}
/*Text divider*/
.title::after {
  content: "";
  display: block;
  width: 50%;
  border-radius: 50%;
  height: 2px;
  margin: 2px auto;
  background-color: #1b1b1b;
}


/*Hover*/
.card:hover {
  background-color: #1b1b1b25;
}

.card:hover .card-front {
  transform: translateX(-100%);
}

.card:hover .card-back {
  transform: translateX(0);
}



</style>


================================================
FILE: Cards/alexruix_silent-bulldog-61.html
================================================
  <div class="container">
      <div class="card">
          <p class="title">Card title</p>
          <div class="card-hidden">
              <p class="title-in">Card title</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci. Nam molestie pellentesque mi nec lacinia.</p>
              <a class="button">Button</a>
          </div>

      </div>
      <div class="card-border"></div>
  </div>
<style>
/* From Uiverse.io by alexruix - Tags: white, card, hover, clean */
.container {
  position: relative;
  width: 190px;
  height: 254px;
}

.card {
  position: relative;
  width: 190px;
  height: 254px;
  background: #f5f5f5;
  border-radius: 8px;
  color: #232323;
  padding: 16px;
  border: 1px solid #232323;
  transition: all .5s ease-in-out;
  overflow: hidden;
}

.card-hidden {
  display: flex;
  transform: translateY(200%);
  flex-direction: column;
  gap: .5rem;
  transition: transform .5s ease-in, opacity .3s ease-in;
  opacity: 0;
}

.card-border {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: 1px dashed #232323;
  border-radius: 8px;
  z-index: -1;
}

/*Hovers*/
.card:hover {
  transform: translate(-15px, -15px);
  border-color: #5bc0eb;
}

.card:hover .card-hidden {
  transform: translateY(0);
  opacity: 1;
}

.card:hover .title {
  transform: translateY(200%);
}

/*Text*/
.title {
  position: absolute;
  bottom: 1rem;
  font-weight: 700;
  font-size: 1.5rem;
  transition: transform .25s ease-out;
}

.title-in {
  font-weight: 700;
  font-size: 1.25rem;
}

/*Button*/
.button {
  display: inline-flex;
  justify-content: center;
  padding: 8px;
  border-radius: 24px;
  font-weight: 600;
  background-color: #5bc0eb;
  cursor: pointer;
  transition: background-color .3s ease-in-out;
}

.button:hover {
  background-color: #53aed4;
}






</style>


================================================
FILE: Cards/alexruix_tough-shrimp-75.html
================================================
<div class="card">
<div class="card-img"></div>
  <div class="card-info">
    <p class="text-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?</p>
    <p class="text-title">Autor</p>
  </div>
</div>
<style>
/* From Uiverse.io by alexruix - Tags: card */
/*Magic card*/
.card {
 width: 190px;
 height: 254px;
 background: #f5f5f5;
 overflow: visible;
 box-shadow: 0 5px 20px 2px rgba(0,0,0,0.1);
 display: flex;
 flex-direction: column;
 align-items: center;
}

.card-info {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 2em;
 padding: 0 1rem;
}

.card-img {
 --size: 100px;
 width: var(--size);
 height: var(--size);
 border-radius: 50%;
 transform: translateY(-50%);
 background: #42caff;
 background: linear-gradient(to bottom, #42caff 0%, #e81aff 100%);
 position: relative;
 transition: all .3s ease-in-out;
}

.card-img::before {
 content: "";
 border-radius: inherit;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 90%;
 height: 90%;
 transform: translate(-50%, -50%);
 border: 1rem solid #e8e8e8;
}

/*Text*/
.text-title {
 text-transform: uppercase;
 font-size: 0.75em;
 color: #42caff;
 letter-spacing: 0.05rem;
}

.text-body {
 font-size: .8em;
 text-align: center;
 color: #6f6d78;
 font-weight: 400;
 font-style: italic;
}

/*Hover*/
.card:hover .card-img {
 --size: 110px;
 width: var(--size);
 height: var(--size);
}
</style>


================================================
FILE: Cards/alexruix_weak-lionfish-37.html
================================================
        <div class="card">
        <div class="card-info">
        <div class="card-avatar"></div>
        <div class="card-title">Steve Jobs</div>
        <div class="card-subtitle">CEO &amp; Co-Founder</div>
        </div>
        <ul class="card-social">
        <li class="card-social__item">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M14 9h3l-.375 3H14v9h-3.89v-9H8V9h2.11V6.984c0-1.312.327-2.304.984-2.976C11.75 3.336 12.844 3 14.375 3H17v3h-1.594c-.594 0-.976.094-1.148.281-.172.188-.258.5-.258.938V9z"></path>
      </svg></li>
      <li class="card-social__item">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M20.875 7.5v.563c0 3.28-1.18 6.257-3.54 8.93C14.978 19.663 11.845 21 7.938 21c-2.5 0-4.812-.687-6.937-2.063.5.063.86.094 1.078.094 2.094 0 3.969-.656 5.625-1.968a4.563 4.563 0 0 1-2.625-.915 4.294 4.294 0 0 1-1.594-2.226c.375.062.657.094.844.094.313 0 .719-.063 1.219-.188-1.031-.219-1.899-.742-2.602-1.57a4.32 4.32 0 0 1-1.054-2.883c.687.328 1.375.516 2.062.516C2.61 9.016 1.938 7.75 1.938 6.094c0-.782.203-1.531.609-2.25 2.406 2.969 5.515 4.547 9.328 4.734-.063-.219-.094-.562-.094-1.031 0-1.281.438-2.36 1.313-3.234C13.969 3.437 15.047 3 16.328 3s2.375.484 3.281 1.453c.938-.156 1.907-.531 2.907-1.125-.313 1.094-.985 1.938-2.016 2.531.969-.093 1.844-.328 2.625-.703-.563.875-1.312 1.656-2.25 2.344z"></path>
    </svg></li>
    <li class="card-social__item">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M19.547 3c.406 0 .75.133 1.031.398.281.266.422.602.422 1.008v15.047c0 .406-.14.766-.422 1.078a1.335 1.335 0 0 1-1.031.469h-15c-.406 0-.766-.156-1.078-.469C3.156 20.22 3 19.86 3 19.453V4.406c0-.406.148-.742.445-1.008C3.742 3.133 4.11 3 4.547 3h15zM8.578 18V9.984H6V18h2.578zM7.36 8.766c.407 0 .743-.133 1.008-.399a1.31 1.31 0 0 0 .399-.96c0-.407-.125-.743-.375-1.009C8.14 6.133 7.813 6 7.406 6c-.406 0-.742.133-1.008.398C6.133 6.664 6 7 6 7.406c0 .375.125.696.375.961.25.266.578.399.984.399zM18 18v-4.688c0-1.156-.273-2.03-.82-2.624-.547-.594-1.258-.891-2.133-.891-.938 0-1.719.437-2.344 1.312V9.984h-2.578V18h2.578v-4.547c0-.312.031-.531.094-.656.25-.625.687-.938 1.312-.938.875 0 1.313.578 1.313 1.735V18H18z"></path>
      </svg>
    </li>
  </ul>
</div>
<style>
/* From Uiverse.io by alexruix - Tags: card */
.card {
 width: 190px;
 height: 254px;
 background: #f5f5f5;
 padding: 2rem 1.5rem;
 transition: box-shadow .3s ease, transform .2s ease;
}

.card-info {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 transition: transform .2s ease, opacity .2s ease;
}

/*Image*/
.card-avatar {
 --size: 60px;
 background: linear-gradient(to top, #f1e1c1 0%, #fcbc97 100%);
 width: var(--size);
 height: var(--size);
 border-radius: 50%;
 transition: transform .2s ease;
 margin-bottom: 1rem;
}


/*Card footer*/
.card-social {
 transform: translateY(200%);
 display: flex;
 justify-content: space-around;
 width: 100%;
 opacity: 0;
 transition: transform .2s ease, opacity .2s ease;
}

.card-social__item {
 list-style: none;
}

.card-social__item svg {
 display: block;
 height: 18px;
 width: 18px;
 fill: #515F65;
 cursor: pointer;
 transition: fill 0.2s ease ,transform 0.2s ease;
}

/*Text*/
.card-title {
 color: #333;
 font-size: 1.5em;
 font-weight: 600;
 line-height: 2rem;
}

.card-subtitle {
 color: #859ba8;
 font-size: 0.8em;
}

/*Hover*/
.card:hover {
 box-shadow: 0 8px 50px #23232333;
}

.card:hover .card-info {
 transform: translateY(-5%);
}

.card:hover .card-social {
 transform: translateY(100%);
 opacity: 1;
}

.card-social__item svg:hover {
 fill: #232323;
 transform: scale(1.1);
}

.card-avatar:hover {
 transform: scale(1.1);
}
</style>


================================================
FILE: Cards/amanrajnarayan_lucky-quail-98.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by amanrajnarayan - Tags: card */
.card {
  border: 1px solid white;
  border-radius: 10px;
  padding: 1em;
  display: flex;
  flex-direction: column;
  background: hsla(180, 68%, 54%, 1);
  background: linear-gradient(135deg, rgb(39, 160, 220) 0%, rgb(220, 17, 149) 100%);
  background: -moz-linear-gradient(135deg, rgb(44, 159, 208) 0%, rgb(222, 21, 151) 100%);
  background: -webkit-linear-gradient(135deg, rgb(58, 103, 217) 0%, rgb(251, 18, 169) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#3BD9D9", endColorstr="#FF0DAA", GradientType=1 );
  /* background: hsla(197, 100%, 63%, 1);
  background: linear-gradient(315deg, hsla(197, 100%, 63%, 1) 8%, hsla(294, 82%, 46%, 1) 100%);
  background: -moz-linear-gradient(315deg, hsla(197, 100%, 63%, 1) 8%, hsla(294, 82%, 46%, 1) 100%);
  background: -webkit-linear-gradient(315deg, hsla(197, 100%, 63%, 1) 8%, hsla(294, 82%, 46%, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#40c9ff", endColorstr="#C315D6", GradientType=1 ); */
}

.content {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-around;
  /* justify-content: center;  */
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px;
  border-radius: 7px;
  margin: 0.4em;
  padding: 0.7em;
  box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.565);
  transition: all 0.1s;
}

.item:hover {
  transform: translateY(-0.2em);
}

.item:nth-child(2) {
  border: none;
}

.heading {
  margin: 1em;
  margin-top: 0em;
  margin-bottom: 1.5em;
  padding: 2px 15px;
  border-radius: 10px;
  font-size: large;
  box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.565);
}

.heading span {
  color: #3bd9d9;
  font-weight: 500;
}

button {
  align-items: center;
  background: none;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.558);
  border-radius: 10px;
  margin-top: 1.25em;
  padding: 0.7em 0.7em;
  font-size: 1em;
  transition: all 0.2s;
}

button:hover {
  border-color: #a8ff5c;
  color: white;
  /* box-shadow: 0em 0.5em 0.5em -0.4em #f1ff5c; */
  box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.565);
  transform: translateY(-0.25em);
  cursor: pointer;
}
</style>


================================================
FILE: Cards/andrew-demchenk0_bad-squid-34.html
================================================

<div class="error">
    <div class="error__icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none"><path fill="#393a37" d="m13 13h-2v-6h2zm0 4h-2v-2h2zm-1-15c-1.3132 0-2.61358.25866-3.82683.7612-1.21326.50255-2.31565 1.23915-3.24424 2.16773-1.87536 1.87537-2.92893 4.41891-2.92893 7.07107 0 2.6522 1.05357 5.1957 2.92893 7.0711.92859.9286 2.03098 1.6651 3.24424 2.1677 1.21325.5025 2.51363.7612 3.82683.7612 2.6522 0 5.1957-1.0536 7.0711-2.9289 1.8753-1.8754 2.9289-4.4189 2.9289-7.0711 0-1.3132-.2587-2.61358-.7612-3.82683-.5026-1.21326-1.2391-2.31565-2.1677-3.24424-.9286-.92858-2.031-1.66518-3.2443-2.16773-1.2132-.50254-2.5136-.7612-3.8268-.7612z"></path></svg>
    </div>
    <div class="error__title">lorem ipsum dolor sit amet</div>
    <div class="error__close"><svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 20 20" height="20"><path fill="#393a37" d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"></path></svg></div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: alert, red, card, error, message, white and red, close, error message */
.error {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 320px;
  padding: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  background: #EF665B;
  border-radius: 8px;
  box-shadow: 0px 0px 5px -3px #111;
}

.error__icon {
  width: 20px;
  height: 20px;
  transform: translateY(-2px);
  margin-right: 8px;
}

.error__icon path {
  fill: #fff;
}

.error__title {
  font-weight: 500;
  font-size: 14px;
  color: #fff;
}

.error__close {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-left: auto;
}

.error__close path {
  fill: #fff;
}
</style>


================================================
FILE: Cards/andrew-demchenk0_chatty-hound-50.html
================================================
<div class="card">
    <div class="card__img"><svg xmlns="http://www.w3.org/2000/svg" width="100%"><rect fill="#ffffff" width="540" height="450"></rect><defs><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="0" x2="0" y1="0" y2="100%" gradientTransform="rotate(222,648,379)"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#FC726E"></stop></linearGradient><pattern patternUnits="userSpaceOnUse" id="b" width="300" height="250" x="0" y="0" viewBox="0 0 1080 900"><g fill-opacity="0.5"><polygon fill="#444" points="90 150 0 300 180 300"></polygon><polygon points="90 150 180 0 0 0"></polygon><polygon fill="#AAA" points="270 150 360 0 180 0"></polygon><polygon fill="#DDD" points="450 150 360 300 540 300"></polygon><polygon fill="#999" points="450 150 540 0 360 0"></polygon><polygon points="630 150 540 300 720 300"></polygon><polygon fill="#DDD" points="630 150 720 0 540 0"></polygon><polygon fill="#444" points="810 150 720 300 900 300"></polygon><polygon fill="#FFF" points="810 150 900 0 720 0"></polygon><polygon fill="#DDD" points="990 150 900 300 1080 300"></polygon><polygon fill="#444" points="990 150 1080 0 900 0"></polygon><polygon fill="#DDD" points="90 450 0 600 180 600"></polygon><polygon points="90 450 180 300 0 300"></polygon><polygon fill="#666" points="270 450 180 600 360 600"></polygon><polygon fill="#AAA" points="270 450 360 300 180 300"></polygon><polygon fill="#DDD" points="450 450 360 600 540 600"></polygon><polygon fill="#999" points="450 450 540 300 360 300"></polygon><polygon fill="#999" points="630 450 540 600 720 600"></polygon><polygon fill="#FFF" points="630 450 720 300 540 300"></polygon><polygon points="810 450 720 600 900 600"></polygon><polygon fill="#DDD" points="810 450 900 300 720 300"></polygon><polygon fill="#AAA" points="990 450 900 600 1080 600"></polygon><polygon fill="#444" points="990 450 1080 300 900 300"></polygon><polygon fill="#222" points="90 750 0 900 180 900"></polygon><polygon points="270 750 180 900 360 900"></polygon><polygon fill="#DDD" points="270 750 360 600 180 600"></polygon><polygon points="450 750 540 600 360 600"></polygon><polygon points="630 750 540 900 720 900"></polygon><polygon fill="#444" points="630 750 720 600 540 600"></polygon><polygon fill="#AAA" points="810 750 720 900 900 900"></polygon><polygon fill="#666" points="810 750 900 600 720 600"></polygon><polygon fill="#999" points="990 750 900 900 1080 900"></polygon><polygon fill="#999" points="180 0 90 150 270 150"></polygon><polygon fill="#444" points="360 0 270 150 450 150"></polygon><polygon fill="#FFF" points="540 0 450 150 630 150"></polygon><polygon points="900 0 810 150 990 150"></polygon><polygon fill="#222" points="0 300 -90 450 90 450"></polygon><polygon fill="#FFF" points="0 300 90 150 -90 150"></polygon><polygon fill="#FFF" points="180 300 90 450 270 450"></polygon><polygon fill="#666" points="180 300 270 150 90 150"></polygon><polygon fill="#222" points="360 300 270 450 450 450"></polygon><polygon fill="#FFF" points="360 300 450 150 270 150"></polygon><polygon fill="#444" points="540 300 450 450 630 450"></polygon><polygon fill="#222" points="540 300 630 150 450 150"></polygon><polygon fill="#AAA" points="720 300 630 450 810 450"></polygon><polygon fill="#666" points="720 300 810 150 630 150"></polygon><polygon fill="#FFF" points="900 300 810 450 990 450"></polygon><polygon fill="#999" points="900 300 990 150 810 150"></polygon><polygon points="0 600 -90 750 90 750"></polygon><polygon fill="#666" points="0 600 90 450 -90 450"></polygon><polygon fill="#AAA" points="180 600 90 750 270 750"></polygon><polygon fill="#444" points="180 600 270 450 90 450"></polygon><polygon fill="#444" points="360 600 270 750 450 750"></polygon><polygon fill="#999" points="360 600 450 450 270 450"></polygon><polygon fill="#666" points="540 600 630 450 450 450"></polygon><polygon fill="#222" points="720 600 630 750 810 750"></polygon><polygon fill="#FFF" points="900 600 810 750 990 750"></polygon><polygon fill="#222" points="900 600 990 450 810 450"></polygon><polygon fill="#DDD" points="0 900 90 750 -90 750"></polygon><polygon fill="#444" points="180 900 270 750 90 750"></polygon><polygon fill="#FFF" points="360 900 450 750 270 750"></polygon><polygon fill="#AAA" points="540 900 630 750 450 750"></polygon><polygon fill="#FFF" points="720 900 810 750 630 750"></polygon><polygon fill="#222" points="900 900 990 750 810 750"></polygon><polygon fill="#222" points="1080 300 990 450 1170 450"></polygon><polygon fill="#FFF" points="1080 300 1170 150 990 150"></polygon><polygon points="1080 600 990 750 1170 750"></polygon><polygon fill="#666" points="1080 600 1170 450 990 450"></polygon><polygon fill="#DDD" points="1080 900 1170 750 990 750"></polygon></g></pattern></defs><rect x="0" y="0" fill="url(#a)" width="100%" height="100%"></rect><rect x="0" y="0" fill="url(#b)" width="100%" height="100%"></rect></svg></div>
    <div class="card__avatar"><svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><circle cx="64" cy="64" fill="#ff8475" r="60"></circle><circle cx="64" cy="64" fill="#f85565" opacity=".4" r="48"></circle><path d="m64 14a32 32 0 0 1 32 32v41a6 6 0 0 1 -6 6h-52a6 6 0 0 1 -6-6v-41a32 32 0 0 1 32-32z" fill="#7f3838"></path><path d="m62.73 22h2.54a23.73 23.73 0 0 1 23.73 23.73v42.82a4.45 4.45 0 0 1 -4.45 4.45h-41.1a4.45 4.45 0 0 1 -4.45-4.45v-42.82a23.73 23.73 0 0 1 23.73-23.73z" fill="#393c54" opacity=".4"></path><circle cx="89" cy="65" fill="#fbc0aa" r="7"></circle><path d="m64 124a59.67 59.67 0 0 0 34.69-11.06l-3.32-9.3a10 10 0 0 0 -9.37-6.64h-43.95a10 10 0 0 0 -9.42 6.64l-3.32 9.3a59.67 59.67 0 0 0 34.69 11.06z" fill="#4bc190"></path><path d="m45 110 5.55 2.92-2.55 8.92a60.14 60.14 0 0 0 9 1.74v-27.08l-12.38 10.25a2 2 0 0 0 .38 3.25z" fill="#356cb6" opacity=".3"></path><path d="m71 96.5v27.09a60.14 60.14 0 0 0 9-1.74l-2.54-8.93 5.54-2.92a2 2 0 0 0 .41-3.25z" fill="#356cb6" opacity=".3"></path><path d="m57 123.68a58.54 58.54 0 0 0 14 0v-25.68h-14z" fill="#fff"></path><path d="m64 88.75v9.75" fill="none" stroke="#fbc0aa" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"></path><circle cx="39" cy="65" fill="#fbc0aa" r="7"></circle><path d="m64 91a25 25 0 0 1 -25-25v-16.48a25 25 0 1 1 50 0v16.48a25 25 0 0 1 -25 25z" fill="#ffd8c9"></path><path d="m91.49 51.12v-4.72c0-14.95-11.71-27.61-26.66-28a27.51 27.51 0 0 0 -28.32 27.42v5.33a2 2 0 0 0 2 2h6.81a8 8 0 0 0 6.5-3.33l4.94-6.88a18.45 18.45 0 0 1 1.37 1.63 22.84 22.84 0 0 0 17.87 8.58h13.45a2 2 0 0 0 2.04-2.03z" fill="#bc5b57"></path><path d="m62.76 36.94c4.24 8.74 10.71 10.21 16.09 10.21h5" style="fill:none;stroke-linecap:round;stroke:#fff;stroke-miterlimit:10;stroke-width:2;opacity:.1"></path><path d="m71 35c2.52 5.22 6.39 6.09 9.6 6.09h3" style="fill:none;stroke-linecap:round;stroke:#fff;stroke-miterlimit:10;stroke-width:2;opacity:.1"></path><circle cx="76" cy="62.28" fill="#515570" r="3"></circle><circle cx="52" cy="62.28" fill="#515570" r="3"></circle><ellipse cx="50.42" cy="69.67" fill="#f85565" opacity=".1" rx="4.58" ry="2.98"></ellipse><ellipse cx="77.58" cy="69.67" fill="#f85565" opacity=".1" rx="4.58" ry="2.98"></ellipse><g fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="m64 67v4" stroke="#fbc0aa" stroke-width="4"></path><path d="m55 56h-9.25" opacity=".2" stroke="#515570" stroke-width="2"></path><path d="m82 56h-9.25" opacity=".2" stroke="#515570" stroke-width="2"></path></g><path d="m64 84c5 0 7-3 7-3h-14s2 3 7 3z" fill="#f85565" opacity=".4"></path><path d="m65.07 78.93-.55.55a.73.73 0 0 1 -1 0l-.55-.55c-1.14-1.14-2.93-.93-4.27.47l-1.7 1.6h14l-1.66-1.6c-1.34-1.4-3.13-1.61-4.27-.47z" fill="#f85565"></path></svg></div>
    <div class="card__title">Cameron Williamson</div>
    <div class="card__subtitle">Web Development</div>
    <div class="card__wrapper">
        <button class="card__btn">Button</button>
        <button class="card__btn card__btn-solid">Button</button>
    </div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Source: Frank Esteban - Tags: card, profilecard, photo card, buttons, avatar, public profile */
.card {
  --main-color: #000;
  --submain-color: #78858F;
  --bg-color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: relative;
  width: 300px;
  height: 384px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  background: var(--bg-color);
}

.card__img {
  height: 192px;
  width: 100%;
}

.card__img svg {
  height: 100%;
  border-radius: 20px 20px 0 0;
}

.card__avatar {
  position: absolute;
  width: 114px;
  height: 114px;
  background: var(--bg-color);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: calc(50% - 57px);
}

.card__avatar svg {
  width: 100px;
  height: 100px;
}

.card__title {
  margin-top: 60px;
  font-weight: 500;
  font-size: 18px;
  color: var(--main-color);
}

.card__subtitle {
  margin-top: 10px;
  font-weight: 400;
  font-size: 15px;
  color: var(--submain-color);
}

.card__btn {
  margin-top: 15px;
  width: 76px;
  height: 31px;
  border: 2px solid var(--main-color);
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
  color: var(--main-color);
  background: var(--bg-color);
  text-transform: uppercase;
  transition: all 0.3s;
}

.card__btn-solid {
  background: var(--main-color);
  color: var(--bg-color);
}

.card__btn:hover {
  background: var(--main-color);
  color: var(--bg-color);
}

.card__btn-solid:hover {
  background: var(--bg-color);
  color: var(--main-color);
}
</style>


================================================
FILE: Cards/andrew-demchenk0_chilly-bird-79.html
================================================
<div class="card">
    <div class="card__wrapper">
        <div class="card___wrapper-acounts">
            <div class="card__score">+3</div>
            <div class="card__acounts"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><circle r="60" fill="#ffd8c9" cy="64" cx="64"></circle><circle r="48" opacity=".3" fill="#fff" cy="64" cx="64"></circle><path fill="#393c54" d="m64 14a31 31 0 0 1 31 31v41.07a9.93 9.93 0 0 1 -9.93 9.93h-42.14a9.93 9.93 0 0 1 -9.93-9.93v-41.07a31 31 0 0 1 31-31z"></path><circle r="7" fill="#fbc0aa" cy="60" cx="89"></circle><path fill="#00adfe" d="m64 124a59.7 59.7 0 0 0 34.7-11.07l-3.33-10.29a10 10 0 0 0 -9.37-6.64h-43.95a10 10 0 0 0 -9.42 6.64l-3.33 10.29a59.7 59.7 0 0 0 34.7 11.07z"></path><path fill="#ff8475" d="m46.54 121.45a59.93 59.93 0 0 0 34.92 0l-2.46-25.45h-30z"></path><path fill="#f85565" d="m48.13 105h31.74l-.39-4h-30.96z"></path><path fill="#ffd8c9" d="m76 96a12 12 0 0 1 -24 0z"></path><path stroke-width="14" stroke-linejoin="round" stroke-linecap="round" stroke="#fbc0aa" fill="none" d="m64 83v12"></path><circle r="7" fill="#fbc0aa" cy="60" cx="39"></circle><path fill="#ffd8c9" d="m64 90a25 25 0 0 1 -25-25v-16.48a25 25 0 1 1 50 0v16.48a25 25 0 0 1 -25 25z"></path><path stroke-width="5" stroke-linejoin="round" stroke-linecap="round" stroke="#fbc0aa" fill="none" d="m64 64.75v6.5"></path><path fill="#515570" d="m64.83 18.35a27.51 27.51 0 0 0 -28.32 27.47v4.76a2 2 0 0 0 2 2h.58a1 1 0 0 0 .86-.49l4.05-7.09 2.48 4.13a1 1 0 0 0 1.71 0l2.48-4.13 2.47 4.13a1 1 0 0 0 1.72 0l2.47-4.13 2.48 4.13a1 1 0 0 0 1.71 0l2.48-4.13 2.48 4.13a1 1 0 0 0 1.71 0l2.48-4.13 2.47 4.13a1 1 0 0 0 1.72 0l2.47-4.13 2.48 4.13a1 1 0 0 0 1.71 0l2.48-4.13 4 7.09a1 1 0 0 0 .86.49h.58a2 2 0 0 0 2-2v-4.18c.05-14.95-11.66-27.61-26.61-28.05z"></path><path fill="#f85565" d="m47.35 113h33.29l-.38-4h-32.52z"></path><path fill="#f85565" d="m46.58 121h34.84l-.39-4h-34.06z"></path><path opacity=".7" fill="#ff8475" d="m58.52 79.39c0-.84 11-.84 11 0 0 1.79-2.45 3.25-5.48 3.25s-5.52-1.46-5.52-3.25z"></path><path opacity=".7" fill="#f85565" d="m69.48 79.29c0 .78-11 .78-11 0 .04-1.79 2.52-3.29 5.52-3.29s5.48 1.5 5.48 3.29z"></path><circle r="3" fill="#515570" cy="58.75" cx="76.25"></circle><path stroke-linejoin="round" stroke-linecap="round" stroke="#515570" fill="none" d="m70.75 59.84a6.61 6.61 0 0 1 11.5-1.31"></path><path style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke:#515570;stroke-width:2;opacity:.2" d="m72.11 51.46 5.68-.4a4.62 4.62 0 0 1 4.21 2.1l.77 1.21"></path><circle r="3" fill="#515570" cy="58.75" cx="51.75"></circle><g stroke-linecap="round" fill="none"><path stroke-linejoin="round" stroke="#515570" d="m57.25 59.84a6.61 6.61 0 0 0 -11.5-1.31"></path><path stroke-width="2" stroke-linejoin="round" stroke="#515570" opacity=".2" d="m55.89 51.45-5.68-.39a4.59 4.59 0 0 0 -4.21 2.11l-.77 1.21"></path><path stroke-miterlimit="10" stroke="#f85565" d="m57.25 78.76a17.4 17.4 0 0 0 6.75 1.12 17.4 17.4 0 0 0 6.75-1.12"></path></g></svg></div>
            <div class="card__acounts"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><circle r="60" fill="#ff8475" cy="64" cx="64"></circle><circle r="48" opacity=".4" fill="#f85565" cy="64" cx="64"></circle><path fill="#7f3838" d="m64 14a32 32 0 0 1 32 32v41a6 6 0 0 1 -6 6h-52a6 6 0 0 1 -6-6v-41a32 32 0 0 1 32-32z"></path><path opacity=".4" fill="#393c54" d="m62.73 22h2.54a23.73 23.73 0 0 1 23.73 23.73v42.82a4.45 4.45 0 0 1 -4.45 4.45h-41.1a4.45 4.45 0 0 1 -4.45-4.45v-42.82a23.73 23.73 0 0 1 23.73-23.73z"></path><circle r="7" fill="#fbc0aa" cy="65" cx="89"></circle><path fill="#4bc190" d="m64 124a59.67 59.67 0 0 0 34.69-11.06l-3.32-9.3a10 10 0 0 0 -9.37-6.64h-43.95a10 10 0 0 0 -9.42 6.64l-3.32 9.3a59.67 59.67 0 0 0 34.69 11.06z"></path><path opacity=".3" fill="#356cb6" d="m45 110 5.55 2.92-2.55 8.92a60.14 60.14 0 0 0 9 1.74v-27.08l-12.38 10.25a2 2 0 0 0 .38 3.25z"></path><path opacity=".3" fill="#356cb6" d="m71 96.5v27.09a60.14 60.14 0 0 0 9-1.74l-2.54-8.93 5.54-2.92a2 2 0 0 0 .41-3.25z"></path><path fill="#fff" d="m57 123.68a58.54 58.54 0 0 0 14 0v-25.68h-14z"></path><path stroke-width="14" stroke-linejoin="round" stroke-linecap="round" stroke="#fbc0aa" fill="none" d="m64 88.75v9.75"></path><circle r="7" fill="#fbc0aa" cy="65" cx="39"></circle><path fill="#ffd8c9" d="m64 91a25 25 0 0 1 -25-25v-16.48a25 25 0 1 1 50 0v16.48a25 25 0 0 1 -25 25z"></path><path fill="#bc5b57" d="m91.49 51.12v-4.72c0-14.95-11.71-27.61-26.66-28a27.51 27.51 0 0 0 -28.32 27.42v5.33a2 2 0 0 0 2 2h6.81a8 8 0 0 0 6.5-3.33l4.94-6.88a18.45 18.45 0 0 1 1.37 1.63 22.84 22.84 0 0 0 17.87 8.58h13.45a2 2 0 0 0 2.04-2.03z"></path><path style="fill:none;stroke-linecap:round;stroke:#fff;stroke-miterlimit:10;stroke-width:2;opacity:.1" d="m62.76 36.94c4.24 8.74 10.71 10.21 16.09 10.21h5"></path><path style="fill:none;stroke-linecap:round;stroke:#fff;stroke-miterlimit:10;stroke-width:2;opacity:.1" d="m71 35c2.52 5.22 6.39 6.09 9.6 6.09h3"></path><circle r="3" fill="#515570" cy="62.28" cx="76"></circle><circle r="3" fill="#515570" cy="62.28" cx="52"></circle><ellipse ry="2.98" rx="4.58" opacity=".1" fill="#f85565" cy="69.67" cx="50.42"></ellipse><ellipse ry="2.98" rx="4.58" opacity=".1" fill="#f85565" cy="69.67" cx="77.58"></ellipse><g stroke-linejoin="round" stroke-linecap="round" fill="none"><path stroke-width="4" stroke="#fbc0aa" d="m64 67v4"></path><path stroke-width="2" stroke="#515570" opacity=".2" d="m55 56h-9.25"></path><path stroke-width="2" stroke="#515570" opacity=".2" d="m82 56h-9.25"></path></g><path opacity=".4" fill="#f85565" d="m64 84c5 0 7-3 7-3h-14s2 3 7 3z"></path><path fill="#f85565" d="m65.07 78.93-.55.55a.73.73 0 0 1 -1 0l-.55-.55c-1.14-1.14-2.93-.93-4.27.47l-1.7 1.6h14l-1.66-1.6c-1.34-1.4-3.13-1.61-4.27-.47z"></path></svg></div>
        </div>
        <div class="card__menu"><svg xmlns="http://www.w3.org/2000/svg" width="4" viewBox="0 0 4 20" height="20" fill="none"><g fill="#000"><path d="m2 4c1.10457 0 2-.89543 2-2s-.89543-2-2-2-2 .89543-2 2 .89543 2 2 2z"></path><path d="m2 12c1.10457 0 2-.8954 2-2 0-1.10457-.89543-2-2-2s-2 .89543-2 2c0 1.1046.89543 2 2 2z"></path><path d="m2 20c1.10457 0 2-.8954 2-2s-.89543-2-2-2-2 .8954-2 2 .89543 2 2 2z"></path></g></svg></div>
    </div>
    <div class="card__title">Web Design templates
        Selection</div>
    <div class="card__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elitsed do eiusmod.</div>
    <div class="card__indicator"><span class="card__indicator-amount">135</span> Works / <span class="card__indicator-percentage">45%</span></div>
    <div class="card__progress"><progress max="100" value="40"></progress></div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Source: Frank Esteban - Tags: progress bar, card, menu, title, subtitle, acounts */
.card {
  --main-color: #000;
  --bg-color: #EBD18D;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 300px;
  padding: 25px;
  background: var(--bg-color);
  border-radius: 20px;
}

.card__wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.card___wrapper-acounts {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 1;
  cursor: pointer;
}

.card___wrapper-acounts > div:nth-child(2) {
  position: absolute;
  left: 25px;
  z-index: -1;
}

.card___wrapper-acounts > div:nth-child(3) {
  position: absolute;
  left: 50px;
  z-index: -2;
}

.card__score {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: var(--main-color);
}

.card__acounts {
  width: 42px;
  height: 42px;
}

.card__acounts svg {
  width: 100%;
  height: 100%;
}

.card__menu {
  width: 40px;
  height: 40px;
  background: #F6DB96;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.card__title {
  margin-top: 50px;
  font-weight: 900;
  font-size: 25px;
  color: var(--main-color);
}

.card__subtitle {
  margin-top: 15px;
  font-weight: 400;
  font-size: 15px;
  color: var(--main-color);
}

.card__indicator {
  margin-top: 50px;
  font-weight: 500;
  font-size: 14px;
  color: var(--main-color);
}

.card__progress progress {
  width: 100%;
  height: 4px;
  border-radius: 100px;
}

.card__progress progress::-webkit-progress-bar {
  background-color: #00000030;
  border-radius: 100px;
}

.card__progress progress::-webkit-progress-value {
  background-color: var(--main-color);
  border-radius: 100px;
}


</style>


================================================
FILE: Cards/andrew-demchenk0_hard-cougar-86.html
================================================
<div class="card">
    <div class="card__img"><svg viewBox="0 0 128 128" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect class="st1" height="78.6" transform="matrix(0.9761 0.2175 -0.2175 0.9761 15.4391 -12.3278)" width="101.2" x="13.1" y="24.7"></rect><rect class="st53" height="78.6" transform="matrix(0.9761 0.2175 -0.2175 0.9761 15.4391 -12.3278)" width="101.2" x="13.1" y="24.7"></rect><polygon class="st16" points="116,62 116,35.4 38.1,18 22.1,18 5.8,91.3 76.2,107 106,107"></polygon><polygon class="st1" points="97.2,23 10,23 10,102 111,102 111,36.8"></polygon><polygon class="st53" points="97.2,23 10,23 10,102 111,102 111,36.8"></polygon><g><rect class="st7" height="58" width="80" x="20" y="34"></rect><g><polygon class="st9" points="100.2,92 73.1,44.2 51.2,75.5 40,58.7 20.2,92 39.7,92"></polygon><circle class="st18" cx="57" cy="52" r="11"></circle><polygon class="st1" points="40,58.5 31.6,72.6 34.6,78.2 37.9,75.2 43.5,79.9 47,78.2 51,75.2"></polygon><path class="st1" d="M57.7,66c0,0,4.1,7.2,4.3,6.6c0.2-0.6,6.1-5.6,6.1-5.6l6.9,3.6l1.5-10.3L88.9,72L73.1,44.1L57.7,66z"></path><polygon class="st15" points="73.1,44.2 83.6,92 100.2,92"></polygon><polyline class="st2" points="100.2,91.9 73.1,44.1 39.7,91.9"></polyline><polyline class="st2" points="51.2,75.4 40,58.5 20.2,91.9"></polyline><polygon class="st15" points="51.2,75.4 40,58.5 47,81.3"></polygon><polyline class="st2" points="51.5,91.9 67.1,70.5 80.4,91.9"></polyline><polygon class="st15" points="72.3,92 67.1,70.7 80.4,92"></polygon></g><rect class="st53" height="58" width="80" x="20" y="34"></rect></g><polygon class="st18" points="111,37 97,37 97,23"></polygon><polygon class="st53" points="111,37 97,37 97,23"></polygon></svg></div>
    <div class="card__subtitle">Type of work</div>
    <div class="card__wrapper">
        <div class="card__title">Project name</div>
        <div class="card__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" style="user-select: none; width: 100%; height: 100%; display: inline-block; fill: rgb(224, 223, 220); flex-shrink: 0; cursor: auto;" color="rgb(224, 223, 220)"><g color="rgb(224, 223, 220)"><circle cx="128" cy="128" r="96" opacity="0.2"></circle><circle cx="128" cy="128" r="96" fill="none" stroke="rgb(224, 223, 220)" stroke-miterlimit="10" stroke-width="16"></circle><polyline points="134.1 161.9 168 128 134.1 94.1" fill="none" stroke="rgb(224, 223, 220)" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline><line x1="88" y1="128" x2="168" y2="128" fill="none" stroke="rgb(224, 223, 220)" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></g></svg></div>

    </div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: animation, card, hover, light, product, project, hover effect */
.card {
  --main-color: #323232;
  --sub-color: #5b5b5b;
  --bg-color: #c7c7c7;
  --accent-color: #242C88;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 270px;
  padding: 25px;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-color: var(--bg-color);
  transition: all 0.2s;
  cursor: pointer;
  box-shadow: 0px 0px 5px -1.5px #000;
}

.card::before {
  content: '';
  width: 99%;
  height: 99%;
  background: var(--sub-color);
  position: absolute;
  z-index: -1;
  top: 1px;
  left: 1px;
  border-radius: 25px;
  transition: all 0.3s;
}

.card__wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.card__img {
  width: 100%;
}

.card__title {
  color: var(--main-color);
  font-weight: 900;
  font-size: 25px;
}

.card__subtitle {
  color: var(--sub-color);
  font-weight: 600;
  font-size: 20px;
}

.card__icon {
  width: 40px;
  height: 40px;
  transform: rotate(-45deg);
  transition: all 0.3s;
}

.card__icon svg {
  width: 100%;
  height: 100%;
}

.card__icon g {
  fill: var(--main-color);
}

.card__icon circle, polyline, line {
  stroke: var(--main-color);
}

.card:hover .card__icon {
  transform: rotate(0);
}

.card:hover .card__icon circle, .card:hover .card__icon polyline, .card:hover .card__icon line {
  stroke: var(--accent-color);
}

.card:hover .card__icon g {
  fill: var(--accent-color);
}

.card:hover {
  box-shadow: 0px 0px 20px -5px #000;
}

.card:hover::before {
  transform: rotate(10deg);
  box-shadow: 0px 0px 20px -5px #000;
}

/* remove svg from class ="card__img" and last styles below css code before use */
.st1 {
  fill: #fff
}

.st2 {
  fill: none;
  stroke: #242c88;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10
}

.st7 {
  fill: #589fff
}

.st9 {
  fill: #bc8d66
}

.st15,.st16 {
  opacity: .4;
  fill: #242c88
}

.st16 {
  opacity: .2
}

.st18 {
  fill: #ffc408
}

.st53 {
  fill: none;
  stroke: #242c88;
  stroke-width: 1.848;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10
}
</style>


================================================
FILE: Cards/andrew-demchenk0_heavy-mule-52.html
================================================
<div class="card">
    <button class="card__btn card__btn-menu">
        <svg fill="none" height="18" viewBox="0 0 24 18" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h24v3h-12-12zm0 7.5h24v3h-24zm0 7.5h24v3h-24z" fill="#fff"></path></svg>
    </button>
    <div class="card__img">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><circle r="60" fill="#ffd8c9" cy="64" cx="64"></circle><circle r="48" opacity=".3" fill="#fff" cy="64" cx="64"></circle><path fill="#393c54" d="m64 14a31 31 0 0 1 31 31v41.07a9.93 9.93 0 0 1 -9.93 9.93h-42.14a9.93 9.93 0 0 1 -9.93-9.93v-41.07a31 31 0 0 1 31-31z"></path><circle r="7" fill="#fbc0aa" cy="60" cx="89"></circle><path fill="#00adfe" d="m64 124a59.7 59.7 0 0 0 34.7-11.07l-3.33-10.29a10 10 0 0 0 -9.37-6.64h-43.95a10 10 0 0 0 -9.42 6.64l-3.33 10.29a59.7 59.7 0 0 0 34.7 11.07z"></path><path fill="#ff8475" d="m46.54 121.45a59.93 59.93 0 0 0 34.92 0l-2.46-25.45h-30z"></path><path fill="#f85565" d="m48.13 105h31.74l-.39-4h-30.96z"></path><path fill="#ffd8c9" d="m76 96a12 12 0 0 1 -24 0z"></path><path stroke-width="14" stroke-linejoin="round" stroke-linecap="round" stroke="#fbc0aa" fill="none" d="m64 83v12"></path><circle r="7" fill="#fbc0aa" cy="60" cx="39"></circle><path fill="#ffd8c9" d="m64 90a25 25 0 0 1 -25-25v-16.48a25 25 0 1 1 50 0v16.48a25 25 0 0 1 -25 25z"></path><path stroke-width="5" stroke-linejoin="round" stroke-linecap="round" stroke="#fbc0aa" fill="none" d="m64 64.75v6.5"></path><path fill="#515570" d="m64.83 18.35a27.51 27.51 0 0 0 -28.32 27.47v4.76a2 2 0 0 0 2 2h.58a1 1 0 0 0 .86-.49l4.05-7.09 2.48 4.13a1 1 0 0 0 1.71 0l2.48-4.13 2.47 4.13a1 1 0 0 0 1.72 0l2.47-4.13 2.48 4.13a1 1 0 0 0 1.71 0l2.48-4.13 2.48 4.13a1 1 0 0 0 1.71 0l2.48-4.13 2.47 4.13a1 1 0 0 0 1.72 0l2.47-4.13 2.48 4.13a1 1 0 0 0 1.71 0l2.48-4.13 4 7.09a1 1 0 0 0 .86.49h.58a2 2 0 0 0 2-2v-4.18c.05-14.95-11.66-27.61-26.61-28.05z"></path><path fill="#f85565" d="m47.35 113h33.29l-.38-4h-32.52z"></path><path fill="#f85565" d="m46.58 121h34.84l-.39-4h-34.06z"></path><path opacity=".7" fill="#ff8475" d="m58.52 79.39c0-.84 11-.84 11 0 0 1.79-2.45 3.25-5.48 3.25s-5.52-1.46-5.52-3.25z"></path><path opacity=".7" fill="#f85565" d="m69.48 79.29c0 .78-11 .78-11 0 .04-1.79 2.52-3.29 5.52-3.29s5.48 1.5 5.48 3.29z"></path><circle r="3" fill="#515570" cy="58.75" cx="76.25"></circle><path stroke-linejoin="round" stroke-linecap="round" stroke="#515570" fill="none" d="m70.75 59.84a6.61 6.61 0 0 1 11.5-1.31"></path><path style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke:#515570;stroke-width:2;opacity:.2" d="m72.11 51.46 5.68-.4a4.62 4.62 0 0 1 4.21 2.1l.77 1.21"></path><circle r="3" fill="#515570" cy="58.75" cx="51.75"></circle><g stroke-linecap="round" fill="none"><path stroke-linejoin="round" stroke="#515570" d="m57.25 59.84a6.61 6.61 0 0 0 -11.5-1.31"></path><path stroke-width="2" stroke-linejoin="round" stroke="#515570" opacity=".2" d="m55.89 51.45-5.68-.39a4.59 4.59 0 0 0 -4.21 2.11l-.77 1.21"></path><path stroke-miterlimit="10" stroke="#f85565" d="m57.25 78.76a17.4 17.4 0 0 0 6.75 1.12 17.4 17.4 0 0 0 6.75-1.12"></path></g></svg>
    </div>
    <div class="card__title">Runaway</div>
    <div class="card__subtitle">Smalltown Boy , Shane D</div>
    <div class="card__wrapper">
        <div class="card__time card__time-passed">03:34</div>
        <div class="card__timeline"><progress value="55" max="100"></progress></div>
        <div class="card__time card__time-left">02:04</div>
    </div>
    <div class="card__wrapper">
        <button class="card__btn"><svg fill="none" height="12" viewBox="0 0 20 12" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h20v12h-20z"></path></clipPath><g><path d="m17 1c0-.265216-.1054-.51957-.2929-.707107-.1875-.187536-.4419-.292893-.7071-.292893h-8v2h7v5h-3l3.969 5 4.031-5h-3zm-14 10c0 .2652.10536.5196.29289.7071.18754.1875.44189.2929.70711.2929h8v-2h-7v-5h3l-4-5-4 5h3z" fill="#fff"></path></g></svg></button>
        <button class="card__btn"><svg width="23" height="16" viewBox="0 0 23 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5 8V0L0 8L11.5 16V8ZM23 0L11.5 8L23 16V0Z" fill="#fff"></path></svg></button>
        <button class="card__btn card__btn-play"><svg fill="none" height="22" viewBox="0 0 18 22" width="18" xmlns="http://www.w3.org/2000/svg"><path d="m0 0v22l18-11z" fill="#000"></path></svg></button>
        <button class="card__btn"><svg width="23" height="16" viewBox="0 0 23 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5 8V0L23 8L11.5 16V8ZM0 0L11.5 8L0 16V0Z" fill="#fff"></path></svg></button>
        <button class="card__btn"><svg fill="#fff" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 .5h20v19h-20z"></path></clipPath><g fill="#fff"><path d="m15 14.5h-1.559l-9.7-10.673c-.09376-.10305-.20802-.18536-.33545-.24168-.12744-.05631-.26523-.08537-.40455-.08532h-3.001v2h2.559l4.09 4.5-4.09 4.501h-2.559v2h3.001c.13932 0 .27711-.029.40455-.0853.12743-.0563.24169-.1387.33545-.2417l4.259-4.687 4.259 4.686c.0938.103.208.1854.3355.2417.1274.0563.2652.0853.4045.0853h2.001v3l5-4-5-4z"></path><path d="m13.4406 5.5h1.559v3l5-3.938-5-4.062v3h-2.001c-.1393-.00005-.2771.02901-.4045.08532-.1275.05632-.2417.13863-.3355.24168l-3.36798 3.707 1.47998 1.346z"></path></g></svg></button>
    </div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Source: Frank Esteban - Tags: progress bar, card, menu, play, music */
.card {
  --main-color: #fff;
  --bg-color: #090909;
  --sub-main-color: #B9B9B9;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 360px;
  height: 478px;
  background: var(--bg-color);
  border-radius: 20px;
  padding: 30px;
}

.card__menu {
  cursor: pointer;
}

.card__img {
  height: 224px;
  width: 224px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  background: #131313;
  border-radius: 100%;
}

.card__img svg {
  width: 154px;
  height: 154px;
  border-radius: 100%;
}

.card__title {
  font-weight: 500;
  font-size: 28px;
  color: var(--main-color);
  text-align: center;
  margin-bottom: 10px;
}

.card__subtitle {
  font-weight: 400;
  font-size: 16px;
  color: var(--sub-main-color);
  text-align: center;
  cursor: pointer;
}

.card__wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.card__time {
  font-weight: 400;
  font-size: 12px;
  color: var(--main-color);
}

.card__timeline {
  width: 100%;
  height: 4px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.card__timeline progress {
  width: 100%;
  height: 100%;
  border-radius: 100px;
}

.card__timeline progress::-webkit-progress-bar {
  background-color: #424242;
  border-radius: 100px;
}

.card__timeline progress::-webkit-progress-value {
  background-color: #fff;
  border-radius: 100px;
}

.card__btn {
  border: none;
  background: transparent;
  cursor: pointer;
}

.card__btn path {
  fill: var(--main-color);
}

.card__btn-play {
  width: 60px;
  height: 60px;
  background: var(--main-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card__btn-play path {
  fill: var(--bg-color);
}
  
  
</style>


================================================
FILE: Cards/andrew-demchenk0_hungry-cobra-76.html
================================================
<div class="card">
	<div class="card-content-wrapper">
		<div class="card-title">Free plan</div>
		<div class="card-price">
			<span>$</span>
			0
			<span>/month</span>
		</div>
		<div class="card-subtitle">Benefits:</div>
		<ul class="card-benefits">
				<li>Lorem ipsum, dolor sit amet</li>
				<li>Lorem ipsum, dolor sit amet</li>
		</ul>
	</div>
	<button class="card-btn">More info</button>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: card, hover effect, hover button, more info, ul, li, free, benefits, free plan */
.card {
  --main-focus: #2d8cf0;
  --font-color: #323232;
  --font-color-sub: #666;
  --bg-color: #fff;
  --main-color: #323232;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 150px;
  height: 200px;
  background: var(--bg-color);
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
  border-radius: 5px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.card-content-wrapper {
  transform: translateY(10px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: all 0.7s;
}

.card-title {
  letter-spacing: 3px;
  font-size: 20px;
  font-weight: 700;
  color: var(--font-color);
}

.card-price {
  letter-spacing: 2px;
  font-size: 20px;
  color: var(--font-color);
  font-weight: 700;
}

.card-price span {
  font-size: 15px;
  color: var(--font-color-sub);
  font-weight: 500;
}

.card-subtitle {
  letter-spacing: 2px;
  font-size: 17px;
  color: var(--main-focus);
  font-weight: 500;
}

.card-benefits {
  font-size: 15px;
  padding-left: 20px;
  color: var(--font-color);
}

.card-btn {
  cursor: pointer;
  width: 100px;
  padding: 5px;
  background: var(--main-focus);
  border: none;
  border-radius: 5px;
  margin: 0 auto;
  transform: translateY(30px);
  color: var(--bg-color);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.7px;
  opacity: 0;
  transition: all 0.7s;
}

.card:hover > .card-btn {
  opacity: 1;
  transform: translateY(17px);
}

.card-btn:hover {
  font-weight: 700;
  letter-spacing: 1px;
}

.card:hover > .card-content-wrapper {
  transform: translateY(5px);
}
</style>


================================================
FILE: Cards/andrew-demchenk0_little-monkey-23.html
================================================
<div class="warning">
    <div class="warning__icon">
        <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m13 14h-2v-5h2zm0 4h-2v-2h2zm-12 3h22l-11-19z" fill="#393a37"></path></svg>
    </div>
        <div class="warning__title">lorem ipsum dolor sit amet</div>
    <div class="warning__close"><svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z" fill="#393a37"></path></svg></div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: alert, yellow, warning, card, message, close, warning message */
.warning {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 320px;
  padding: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  background: #F7C752;
  border-radius: 8px;
  box-shadow: 0px 0px 5px -3px #111;
}

.warning__icon {
  width: 20px;
  height: 20px;
  transform: translateY(-2px);
  margin-right: 8px;
}

.warning__icon path {
  fill: #393A37;
}

.warning__title {
  font-weight: 500;
  font-size: 14px;
  color: #393A37;
}

.warning__close {
  width: 20px;
  height: 20px;
  margin-left: auto;
  cursor: pointer;
}

.warning__close path {
  fill: #393A37;
}
</style>


================================================
FILE: Cards/andrew-demchenk0_nervous-bear-89.html
================================================

<div class="info">
    <div class="info__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none"><path fill="#393a37" d="m12 1.5c-5.79844 0-10.5 4.70156-10.5 10.5 0 5.7984 4.70156 10.5 10.5 10.5 5.7984 0 10.5-4.7016 10.5-10.5 0-5.79844-4.7016-10.5-10.5-10.5zm.75 15.5625c0 .1031-.0844.1875-.1875.1875h-1.125c-.1031 0-.1875-.0844-.1875-.1875v-6.375c0-.1031.0844-.1875.1875-.1875h1.125c.1031 0 .1875.0844.1875.1875zm-.75-8.0625c-.2944-.00601-.5747-.12718-.7808-.3375-.206-.21032-.3215-.49305-.3215-.7875s.1155-.57718.3215-.7875c.2061-.21032.4864-.33149.7808-.3375.2944.00601.5747.12718.7808.3375.206.21032.3215.49305.3215.7875s-.1155.57718-.3215.7875c-.2061.21032-.4864.33149-.7808.3375z"></path></svg>
    </div>
    <div class="info__title">lorem ipsum dolor sit amet</div>
    <div class="info__close"><svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z" fill="#393a37"></path></svg></div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: alert, blue, card, message, info, close, info message */
.info {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 320px;
  padding: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  background: #509AF8;
  border-radius: 8px;
  box-shadow: 0px 0px 5px -3px #111;
}

.info__icon {
  width: 20px;
  height: 20px;
  transform: translateY(-2px);
  margin-right: 8px;
}

.info__icon path {
  fill: #fff;
}

.info__title {
  font-weight: 500;
  font-size: 14px;
  color: #fff;
}

.info__close {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-left: auto;
}

.info__close path {
  fill: #fff;
}
</style>


================================================
FILE: Cards/andrew-demchenk0_perfect-crab-47.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: card */
.card {
  height: 300px;
  width: 220px;
  padding: 15px;
  position: relative;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.825), rgba(247, 28, 200, 0.13)),
  radial-gradient(circle at 0%, rgba(172, 56, 187, 0.329), rgba(121, 21, 179, 0.521) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(33, 10, 54, 0.236) 75%),
  radial-gradient(circle at 100%, rgba(171, 0, 238, 0.329), rgba(13, 115, 231, 0.514) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 100% 0%, rgba(5, 5, 5, 0.329), rgb(226, 226, 231) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.161) 75%),
  radial-gradient(circle at 0% 100%, rgba(45, 10, 173, 0.541), rgba(178, 22, 245, 0.805) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),
  linear-gradient(315deg, rgba(212, 212, 207, 0.74) 3%, rgb(11, 12, 12) 38%, rgba(16, 24, 23, 0.301) 68%, rgba(166, 168, 173, 0.942) 98%);
  background-size: 200% 200%;
  animation: cosmic 10s ease-in-out infinite;
  box-sizing: border-box;
  transform: skewY(-5deg);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 50px;
  align-items: center;
}

.card::before {
  content: '';
  width: 10px;
  height: 300px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.825), rgba(247, 28, 200, 0.13)),
  radial-gradient(circle at 0%, rgba(172, 56, 187, 0.329), rgba(121, 21, 179, 0.521) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(33, 10, 54, 0.236) 75%),
  radial-gradient(circle at 100%, rgba(171, 0, 238, 0.329), rgba(13, 115, 231, 0.514) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 100% 0%, rgba(5, 5, 5, 0.329), rgb(226, 226, 231) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.161) 75%),
  radial-gradient(circle at 0% 100%, rgba(45, 10, 173, 0.541), rgba(178, 22, 245, 0.805) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),
  linear-gradient(315deg, rgba(212, 212, 207, 0.74) 3%, rgb(11, 12, 12) 38%, rgba(16, 24, 23, 0.301) 68%, rgba(166, 168, 173, 0.942) 98%);
  background-size: 200% 200%;
  animation: cosmic 10s ease-in-out infinite;
  position: absolute;
  top: 0px;
  left: -9.5px;
  transform-origin: right;
  transform: skewY(45deg);
  border: none;
  transition: all 0.5s;
}

.card::after {
  content: '';
  height: 10px;
  width: 220px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.825), rgba(247, 28, 200, 0.13)),
  radial-gradient(circle at 0%, rgba(172, 56, 187, 0.329), rgba(121, 21, 179, 0.521) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(33, 10, 54, 0.236) 75%),
  radial-gradient(circle at 100%, rgba(171, 0, 238, 0.329), rgba(13, 115, 231, 0.514) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 100% 0%, rgba(5, 5, 5, 0.329), rgb(226, 226, 231) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.161) 75%),
  radial-gradient(circle at 0% 100%, rgba(45, 10, 173, 0.541), rgba(178, 22, 245, 0.805) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),
  linear-gradient(315deg, rgba(212, 212, 207, 0.74) 3%, rgb(11, 12, 12) 38%, rgba(16, 24, 23, 0.301) 68%, rgba(166, 168, 173, 0.942) 98%);
  background-size: 200% 200%;
  animation: cosmic 10s ease-in-out infinite;
  position: absolute;
  top: -9.5px;
  left: 0px;
  transform-origin: bottom;
  transform: skewX(45deg);
  transition: all 0.5s;
  box-shadow: -310px 315px 6px rgba(36, 4, 41, 0.5);
}

@keyframes cosmic {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

.card:hover {
  transform: skewY(0deg);
}

.card:hover::before {
  width: 0px;
  height: 300px;
  left: 0;
  top: 0.1px;
}

.card:hover::after {
  width: 220px;
  height: 0px;
  left: 0.1px;
  top: 0;
  border: none;
}

.card > *:not(.heading) {
  opacity: 0;
}

.card .heading {
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: 0.7s;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
}

.card .heading span {
  font-weight: 700;
  letter-spacing: 1.5px;
  animation: flickering 3s linear infinite;
}

.card .heading span::before {
  content: '☞';
  position: absolute;
  top: 40px;
  left: 40%;
  transform: rotate(-90deg);
  font-size: 30px;
  transition: all 0.5s;
}

.card:hover .heading span::before {
  transform: rotate(90deg);
  left: 45%;
}

@keyframes flickering {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  52% {
    opacity: 1;
  }

  54% {
    opacity: 0;
  }

  56% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  92% {
    opacity: 0;
  }

  94% {
    opacity: 1;
  }

  96% {
    opacity: 0;
  }

  98% {
    opacity: 1;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.card:hover .heading {
  top: 13%;
}

.card:hover > *:not(.heading) {
  animation: fadeIn 1s ease 0.5s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.card .content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
}

.card .content .item {
  border-radius: 0px 5px 0 5px;
  cursor: pointer;
  display: flex;
  gap: 15px;
  transition: all 0.5s;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 2px 30px;
  justify-content: start;
  align-items: center;
}

.card .content .item:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

.content .item--create:hover svg {
  animation: create 4s infinite;
  stroke: #DB0F5A;
}

@keyframes create {
  0% {
    transform: translateX(1px);
  }

  10% {
    transform: translateX(-1px);
  }

  20% {
    transform: translateX(1px);
  }

  30% {
    transform: translateX(-1px);
  }

  40% {
    transform: translateX(1px);
  }

  50% {
    transform: translateX(-1px);
  }

  60% {
    transform: translateX(1px);
  }

  70% {
    transform: translateX(-1px);
  }

  80% {
    transform: translateX(1px);
  }

  90% {
    transform: translateX(-1px);
  }

  100% {
    transform: translateX(1px);
  }
}

.content .item--post:hover svg {
  animation: rocket 1s infinite;
  stroke: #DB0F5A;
}

@keyframes rocket {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-2deg);
  }

  20% {
    transform: rotate(2deg);
  }

  30% {
    transform: rotate(-2deg);
  }

  40% {
    transform: rotate(2deg);
  }

  50% {
    transform: rotate(-2deg);
  }

  60% {
    transform: rotate(2deg);
  }

  70% {
    transform: rotate(-2deg);
  }

  80% {
    transform: rotate(2deg);
  }

  90% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(2deg);
  }
}

.content .item--inspire:hover svg {
  animation: inspire 2s infinite;
  stroke: #DB0F5A;
}

@keyframes inspire {
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(0.97);
  }

  20% {
    transform: scale(1.03);
  }

  30% {
    transform: scale(1);
  }

  40% {
    transform: scale(0.97);
  }

  50% {
    transform: scale(1.03);
  }

  60% {
    transform: scale(1);
  }

  70% {
    transform: scale(0.97);
  }

  80% {
    transform: scale(1.03);
  }

  90% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.97);
  }
}

button {
  cursor: pointer;
  border-radius: 0px 5px 0 5px;
  height: 30px;
  width: calc(100% + 50px);
  position: relative;
  border: none;
  transition: 0.2s;
  background-color: #CC014D;
  color: #fff;
  text-align: center;
  font-size: 17px;
  z-index: 0 !important;
}

.content::before {
  content: '';
  position: absolute;
  bottom: 5px;
  border: 15px solid #DB0F5A;
  right: -30px;
  border-right-color: transparent;
  pointer-events: none;
  z-index: -1;
}

.content::after {
  content: '';
  position: absolute;
  border-style: solid;
  bottom: 5px;
  right: -10px;
  border-width: 10px 10px 0 0;
  border-color: #6B043A transparent transparent transparent;
}

button:hover {
  letter-spacing: 1px;
}

button:active {
  transform: translateY(1px);
}
</style>


================================================
FILE: Cards/andrew-demchenk0_quick-impala-15.html
================================================
<div class="card">
  <div class="card__content">your content here ↓<div>
</div></div></div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: animation, 3d, card, border */
.card {
  width: 190px;
  height: 254px;
  background: lightgrey;
  position: relative;
  transform: skewY(-10deg);
  border: 5px solid #6d74e3;
  box-sizing: border-box;
  transition: all 0.3s;
}

.card::before {
  content: '';
  width: 10px;
  height: 254px;
  background: #6d74e3;
  position: absolute;
  top: -5px;
  left: -14.7px;
  transform-origin: right;
  transform: skewY(45deg);
  border: none;
  transition: all 0.5s;
}

.card::after {
  content: '';
  height: 10px;
  width: 190px;
  background: #6d74e3;
  position: absolute;
  top: -14.7px;
  left: -5px;
  transform-origin: bottom;
  transform: skewX(45deg);
  border: none;
  transition: all 0.5s;
}

.card:hover {
  transform: skewY(0deg);
}

.card:hover::before {
  width: 0px;
  height: 249px;
  left: 0;
  top: 0.1px;
}

.card:hover::after {
  width: 184px;
  height: 0px;
  left: 0.1px;
  top: 0;
}

.card__content {
  padding: 10px;
  color: #323232;
}
</style>


================================================
FILE: Cards/andrew-demchenk0_quick-seahorse-69.html
================================================
<div class="card">
    <div class="card-img"><div class="img"></div></div>
    <div class="card-title">Product title</div>
    <div class="card-subtitle">Product description. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <hr class="card-divider">
    <div class="card-footer">
        <div class="card-price"><span>$</span> 123.45</div>
        <button class="card-btn">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="m397.78 316h-205.13a15 15 0 0 1 -14.65-11.67l-34.54-150.48a15 15 0 0 1 14.62-18.36h274.27a15 15 0 0 1 14.65 18.36l-34.6 150.48a15 15 0 0 1 -14.62 11.67zm-193.19-30h181.25l27.67-120.48h-236.6z"></path><path d="m222 450a57.48 57.48 0 1 1 57.48-57.48 57.54 57.54 0 0 1 -57.48 57.48zm0-84.95a27.48 27.48 0 1 0 27.48 27.47 27.5 27.5 0 0 0 -27.48-27.47z"></path><path d="m368.42 450a57.48 57.48 0 1 1 57.48-57.48 57.54 57.54 0 0 1 -57.48 57.48zm0-84.95a27.48 27.48 0 1 0 27.48 27.47 27.5 27.5 0 0 0 -27.48-27.47z"></path><path d="m158.08 165.49a15 15 0 0 1 -14.23-10.26l-25.71-77.23h-47.44a15 15 0 1 1 0-30h58.3a15 15 0 0 1 14.23 10.26l29.13 87.49a15 15 0 0 1 -14.23 19.74z"></path></svg>
        </button>
    </div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: card, product, price, img, description, hover effect, buy now, title, product card */
/* before adding the img to the div with the 
"card-img" class, remove css styles 
.card-img .img::before and .card-img .img::after,
then set the desired styles for .card-img. */
.card {
  --font-color: #323232;
  --font-color-sub: #666;
  --bg-color: #fff;
  --main-color: #323232;
  --main-focus: #2d8cf0;
  width: 230px;
  height: 300px;
  background: var(--bg-color);
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
  gap: 10px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.card:last-child {
  justify-content: flex-end;
}

.card-img {
    /* clear and add new css */
  transition: all 0.5s;
  display: flex;
  justify-content: center;
}

.card-img .img {
 /* delete */
  transform: scale(1);
  position: relative;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-top-left-radius: 80px 50px;
  border-top-right-radius: 80px 50px;
  border: 2px solid black;
  background-color: #228b22;
  background-image: linear-gradient(to top,transparent 10px,rgba(0,0,0,0.3) 10px,rgba(0,0,0,0.3) 13px,transparent 13px);
}

.card-img .img::before {
 /* delete */
  content: '';
  position: absolute;
  width: 65px;
  height: 110px;
  margin-left: -32.5px;
  left: 50%;
  bottom: -4px;
  background-repeat: no-repeat;
  background-image: radial-gradient(ellipse at center,rgba(0,0,0,0.7) 30%,transparent 30%),linear-gradient(to top,transparent 17px,rgba(0,0,0,0.3) 17px,rgba(0,0,0,0.3) 20px,transparent 20px),linear-gradient(to right,black 2px,transparent 2px),linear-gradient(to left,black 2px,transparent 2px),linear-gradient(to top,black 2px,#228b22 2px);
  background-size: 60% 10%,100% 100%,100% 65%,100% 65%,100% 50%;
  background-position: center 3px,center bottom,center bottom,center bottom,center bottom;
  border-radius: 0 0 4px 4px;
  z-index: 2;
}

.card-img .img::after {
 /* delete */
  content: '';
  position: absolute;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  left: 50%;
  top: -13px;
  background-repeat: no-repeat;
  background-image: linear-gradient(80deg,#ffc0cb 45%,transparent 45%),linear-gradient(-175deg,#ffc0cb 45%,transparent 45%),linear-gradient(80deg,rgba(0,0,0,0.2) 51%,rgba(0,0,0,0) 51%),linear-gradient(-175deg,rgba(0,0,0,0.2) 51%,rgba(0,0,0,0) 51%),radial-gradient(circle at center,#ffa6b6 45%,rgba(0,0,0,0.2) 45%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(45deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(65deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(22deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 54%,rgba(0,0,0,0) 54%);
  background-size: 100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 75%,100% 95%,100% 60%;
  background-position: center center;
  border-top-left-radius: 120px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 70px;
  border-top: 2px solid black;
  border-left: 2px solid black;
  transform: rotate(45deg);
  z-index: 1;
}

.card-title {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  color: var(--font-color);
}

.card-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--font-color-sub);
}

.card-divider {
  width: 100%;
  border: 1px solid var(--main-color);
  border-radius: 50px;
}

.card-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.card-price {
  font-size: 20px;
  font-weight: 500;
  color: var(--font-color);
}

.card-price span {
  font-size: 20px;
  font-weight: 500;
  color: var(--font-color-sub);
}

.card-btn {
  height: 35px;
  background: var(--bg-color);
  border: 2px solid var(--main-color);
  border-radius: 5px;
  padding: 0 15px;
  transition: all 0.3s;
}

.card-btn svg {
  width: 100%;
  height: 100%;
  fill: var(--main-color);
  transition: all 0.3s;
}

.card-img:hover {
  transform: translateY(-3px);
}

.card-btn:hover {
  border: 2px solid var(--main-focus);
}

.card-btn:hover svg {
  fill: var(--main-focus);
}

.card-btn:active {
  transform: translateY(3px);
}

</style>


================================================
FILE: Cards/andrew-demchenk0_strange-frog-13.html
================================================
<div class="card">
    <div class="card__wrapper">
        <div class="card__back"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 24" height="24" width="14"><path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#000" d="M12 2L2 12L12 22"></path></svg></div>
        <div class="card__menu"><svg xmlns="http://www.w3.org/2000/svg" width="29" viewBox="0 0 29 14" height="14" fill="none"><path fill="#000" d="m16.5714 9.16667h10.3572c.5493 0 1.0762.22827 1.4647.6346s.6067.95743.6067 1.53203c0 .5747-.2182 1.1258-.6067 1.5321s-.9154.6346-1.4647.6346h-10.3572c-.5493 0-1.0762-.2283-1.4647-.6346s-.6067-.9574-.6067-1.5321c0-.5746.2182-1.1257.6067-1.53203s.9154-.6346 1.4647-.6346zm-14.49997-8.66667h24.85717c.5493 0 1.0762.228273 1.4647.6346.3885.40633.6067.95743.6067 1.53207 0 .57463-.2182 1.12573-.6067 1.53206s-.9154.6346-1.4647.6346h-24.85717c-.54938 0-1.076254-.22827-1.464722-.6346s-.606708-.95743-.606708-1.53206c0-.57464.21824-1.12574.606708-1.53207.388468-.406327.915342-.6346 1.464722-.6346z"></path></svg></div>
    </div>
    <div class="card__img"><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><linearGradient y2="14.26279" y1="7.881249" x2="18.333574" x1="4.648317" gradientUnits="userSpaceOnUse" id="a"><stop stop-opacity=".2" stop-color="#fff" offset="0"></stop><stop stop-opacity="0" stop-color="#fff" offset="1"></stop></linearGradient><path fill="#303c42" d="m23.8535156 1.6464844-1.5-1.5c-.1953125-.1953125-.5117188-.1953125-.7070312 0l-1.9173584 1.9173584c-.1885986-.098999-.4240723-.0759277-.5826416.0826416l-3.7880859 3.7880859c-1.9462891-.5317383-4.0078125.0078125-5.4482422 1.4477539l-9.0566406 9.0571289c-.5507813.5498047-.8535157 1.2817383-.8535157 2.0605469s.3027344 1.5107422.8535156 2.0605469l2.5859375 2.5859375c.5507813.5502929 1.2832031.8535156 2.0605469.8535156s1.5097656-.3032227 2.0605469-.8535156l9.0566406-9.0571289c1.4404297-1.4394531 1.9814453-3.5014648 1.4482422-5.4477539l3.7880859-3.7880859c.1585693-.1585693.1816406-.394043.0826416-.5826416l1.9173584-1.9173584c.1953125-.1953126.1953125-.5117188 0-.7070313z"></path><path transform="matrix(.7071068 -.7071068 .7071068 .7071068 -8.470512 10.550131)" fill="#9f614b" d="m4.757184 11.757184h7.485388v7.485388h-7.485388z"></path><path fill="#676f4b" d="m6.8535156 22.4394531c-.7246094.7226562-1.9824219.7226562-2.7070312 0l-2.5859375-2.5859375c-.3613281-.3613281-.5605469-.8417968-.5605469-1.3535156s.1992188-.9921875.5605469-1.3535156l.9394531-.9394532 5.2929688 5.2929688z"></path><path fill="#676f4b" d="m17.1464844 8.1464844c-.1337891.1337891-.1806641.3320312-.1210938.5117188.5576172 1.6699219.1298828 3.4799805-1.1152344 4.7241211l-1.4103394 1.4104614-5.2929687-5.2929688 1.4103394-1.4104614c.8837891-.8833008 2.0527344-1.3549805 3.2548828-1.3549805.4902344 0 .9863281.0786133 1.4697266.2397461.1806641.0615234.3779297.0131836.5117188-.1206055l3.6464843-3.6464844 1.2929688 1.2929688z"></path><path opacity=".1" d="m8.4998169 10.2068481-5.2928467 5.2930909.5092774.5092773 5.2767658-5.3091717z"></path><path opacity=".1" d="m2.0605469 17.6650391.9394531-.9580079-.5-.5-.9394531.9394531c-.3613281.3613282-.5605469.8417969-.5605469 1.3535157s.1992188.9921875.5605469 1.3535156l.4143677.4143677c-.3024903-.3477783-.4749146-.7832642-.4749146-1.2493286 0-.5117188.1992188-.9921875.5605469-1.3535156z"></path><path opacity=".1" d="m14.3720703 7.2529297c.4902344 0 .9863281.0786133 1.4697266.2397461.1806641.0615234.3779297.0131836.5117188-.1206055l3.6578121-3.6537108-.5113278-.5113283-3.6464844 3.6464844c-.1337891.1337891-.3310547.1821289-.5117188.1206055-.4833984-.1611328-.9794922-.2397461-1.4697266-.2397461-1.2021484 0-2.3710938.4716797-3.2548828 1.3549805l-1.4103393 1.4104614.5092773.5092773 1.401062-1.4011841c.8837892-.8833007 2.0527345-1.3549804 3.2548829-1.3549804z"></path><g fill="#fff"><path transform="matrix(.7025585 -.711626 .711626 .7025585 -9.489386 13.071864)" opacity=".2" d="m7.148615 17.527449h7.487697v.720234h-7.487697z"></path><path opacity=".2" d="m6.3550715 21.9159241c-.7246094.7226562-1.9824219.7226562-2.7070312 0l.5.5185547c.7246094.7226562 1.9824219.7226562 2.7070312 0l.9378973-.9344788-.5113282-.5113277z"></path><path opacity=".2" d="m17.1480408 8.14151 3.6464844-3.6464849-.5125713-.5060406-3.633913 3.6339703c-.1337891.1337891-.1806641.3320312-.1210938.5117192.5576172 1.6699219.1298828 3.4799805-1.1152344 4.7241211l-1.4258442 1.420042.5155048.5089741 1.4103394-1.4104614c1.2451172-1.2441406 1.6728516-3.0541992 1.1152344-4.7241211-.0595704-.1796874-.0126954-.3779296.1210937-.5117187z"></path></g><path transform="matrix(.7071068 -.7071068 .7071068 .7071068 4.654437 15.986806)" fill="#fed4a3" d="m20.533957 1.814287h2.182087v1.121427h-2.182087z"></path><path fill="url(#a)" d="m23.8535156 1.6464844-1.5-1.5c-.1953125-.1953125-.5117188-.1953125-.7070312 0l-1.9173584 1.9173584c-.1885986-.098999-.4240723-.0759277-.5826416.0826416l-3.7880859 3.7880859c-1.9462891-.5317383-4.0078125.0078125-5.4482422 1.4477539l-9.0566406 9.0571289c-.5507813.5498047-.8535157 1.2817383-.8535157 2.0605469s.3027344 1.5107422.8535156 2.0605469l2.5859375 2.5859375c.5507813.5502929 1.2832031.8535156 2.0605469.8535156s1.5097656-.3032227 2.0605469-.8535156l9.0566406-9.0571289c1.4404297-1.4394531 1.9814453-3.5014648 1.4482422-5.4477539l3.7880859-3.7880859c.1585693-.1585693.1816406-.394043.0826416-.5826416l1.9173584-1.9173584c.1953125-.1953126.1953125-.5117188 0-.7070313z"></path></svg></div>
    <div class="card__title">PINOT NOIR</div>
    <div class="card__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    <div class="card__wrapper">
        <div class="card__price">$16.95</div>
        <div class="card__counter">
            <button class="card__btn">-</button>
            <div class="card__counter-score">2</div>
            <button class="card__btn card__btn-plus">+</button>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Source: Frank Esteban - Tags: card, light, menu, price, title, subtitle, product card, wine, counter, back arrow */
.card {
  --main-color: #000;
  --bg-color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: relative;
  padding: 20px;
  width: 320px;
  background: var(--bg-color);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card__back svg, .card__menu svg {
  width: 20px;
  height: 20px;
}

.card__wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.card__img {
  width: 170px;
  height: 170px;
  background: linear-gradient(90deg, #FFF8F7, #F0F7DF);
  border-radius: 100%;
  margin-inline: auto;
}

.card__img svg {
  height: 150px;
  transform: rotate(-45deg) translate(15px, 0px);
}

.card__title {
  font-weight: 600;
  font-size: 25px;
  color: var(--main-color);
}

.card__subtitle {
  font-weight: 400;
  font-size: 15px;
  color: var(--main-color);
  letter-spacing: 0.5px;
}

.card__price {
  font-weight: 600;
  font-size: 22px;
  color: var(--main-color);
}

.card__counter {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  padding: 5px;
  background: #F7F7F7;
  border-radius: 50px;
}

.card__counter-score, .card__btn {
  font-weight: 700;
  font-size: 22px;
  color: var(--main-color);
}

.card__btn {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: none;
  background: transparent;
}

.card__btn-plus {
  background: var(--bg-color);
}
</style>


================================================
FILE: Cards/andrew-demchenk0_strange-goose-65.html
================================================
<div class="card">
    <div class="card-photo"></div>
    <div class="card-title">JOHN DOE <br>
        <span>Fullstack dev &amp; UX UI</span>
    </div>
    <div class="card-socials">
        <button class="card-socials-btn facebook">
            <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" id="Layer_21" height="24" data-name="Layer 21"><title></title><path d="M16.75,9H13.5V7a1,1,0,0,1,1-1h2V3H14a4,4,0,0,0-4,4V9H8v3h2v9h3.5V12H16Z"></path></svg>
        </button>
        <button class="card-socials-btn github">
            <svg viewBox="0 0 24 24" height="33" width="33" xmlns="http://www.w3.org/2000/svg"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg>
        </button>
        <button class="card-socials-btn linkedin">
            <svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m51.326 185.85h90.011v270.872h-90.011zm45.608-130.572c-30.807 0-50.934 20.225-50.934 46.771 0 26 19.538 46.813 49.756 46.813h.574c31.396 0 50.948-20.814 50.948-46.813-.589-26.546-19.551-46.771-50.344-46.771zm265.405 124.209c-47.779 0-69.184 26.28-81.125 44.71v-38.347h-90.038c1.192 25.411 0 270.872 0 270.872h90.038v-151.274c0-8.102.589-16.174 2.958-21.978 6.519-16.174 21.333-32.923 46.182-32.923 32.602 0 45.622 24.851 45.622 61.248v144.926h90.024v-155.323c0-83.199-44.402-121.911-103.661-121.911z"></path></svg>
        </button>
    </div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: animation, card, transition, photo, hover effect, transparent, social lincks, scale, title, subtitle */
/* before adding the photo to the div with the "card-photo" class, in the css clear the styles for .card-photo and remove .card-photo::before and .card-photo::after, then set the desired styles for .card- photo. */

.card {
  --font-color: #323232;
  --font-color-sub: #666;
  --bg-color: #fff;
  --main-color: #323232;
  width: 200px;
  height: 254px;
  background: var(--bg-color);
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card-photo {
/* clear and add new css */
  transform: scale(0.3) translate(220px, 230px);
  width: 250px;
  height: 250px;
  margin-left: -125px;
  margin-top: -125px;
  background: radial-gradient(circle,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0) 50.8%) 14% 30%/11% 11%,radial-gradient(circle,#ffdab9 50%,rgba(255,218,185,0) 50.8%) 10% 30%/16% 16%,radial-gradient(circle,#8b4513 50%,rgba(139,69,19,0) 50.8%) 7.5% 29%/20% 20%,radial-gradient(circle,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0) 50.8%) 86% 30%/11% 11%,radial-gradient(circle,#ffdab9 50%,rgba(255,218,185,0) 50.8%) 90% 30%/16% 16%,radial-gradient(circle,#8b4513 50%,rgba(139,69,19,0) 50.8%) 92.5% 29%/20% 20%,radial-gradient(circle at 50% 0,#ffdab9 29.5%,#8b4513 30%,#8b4513 35%,rgba(139,69,19,0) 35.5%) 50% 95%/40% 20%,radial-gradient(ellipse at 50% 100%,rgba(139,69,19,0) 49%,#8b4513 49.5%,#8b4513 52%,rgba(139,69,19,0) 52.5%) 50% 110%/120% 40%,radial-gradient(circle at 50% 0,rgba(255,255,255,0) 35%,white 35%,white 45%,rgba(255,255,255,0) 45.5%) 50% 89%/40% 13%,linear-gradient(#8b4513,#8b4513) 37% 100%/.25em 22%,linear-gradient(#8b4513,#8b4513) 63% 100%/.25em 22%,linear-gradient(80deg,rgba(0,0,0,0) 50%,#333 50.5%) 24% 100%/1em 18%,linear-gradient(-80deg,rgba(0,0,0,0) 50%,#333 50.5%) 76% 100%/1em 18%,linear-gradient(162deg,rgba(0,0,0,0) 10%,#333 10%) 30% 100%/1.5em 21%,linear-gradient(-162deg,rgba(0,0,0,0) 10%,#333 10%) 70% 100%/1.5em 21%,radial-gradient(ellipse at 100% 100%,#556b2f 50%,rgba(85,107,47,0) 50.5%) 0 100%/37% 29%,radial-gradient(ellipse at 0 100%,#556b2f 50%,rgba(85,107,47,0) 50.5%) 100% 100%/37% 29%,radial-gradient(ellipse at 50% 100%,#222 51%,rgba(0,0,0,0) 51.5%) 50% 110%/120% 40%,radial-gradient(circle at 50% 0,rgba(0,0,0,0.15) 40%,rgba(0,0,0,0) 40.5%) 50% 82%/20% 20%,linear-gradient(to right,#8b4513 4px,rgba(139,69,19,0) 4px) 50% 80%/20% 20%,linear-gradient(to left,#8b4513 4px,rgba(139,69,19,0) 4px) 50% 80%/20% 20%,linear-gradient(#ffdab9,#ffdab9) 50% 80%/20% 20%,linear-gradient(#48240a,#48240a) 50% 100%/65% 60%,radial-gradient(circle,white 30%,rgba(255,255,255,0) 62%) 50% 50%/100% 100%;
  background-color: #ccc;
  background-repeat: no-repeat;
  border-radius: 30%;
}

/* delete */
.card-photo::before {
  display: block;
  content: '';
  position: absolute;
  box-sizing: border-box;
  width: 160px;
  height: 200px;
  left: 50%;
  top: -10%;
  margin-left: -80px;
  background: radial-gradient(circle at 50% 0,#ffdab9 30%,#8b4513 30.5%,#8b4513 41%,rgba(139,69,19,0) 41.5%) 50% 76%/2em 2em,radial-gradient(ellipse,rgba(139,69,19,0) 25%,#5e2f0d 25.5%,#5e2f0d 40%,rgba(139,69,19,0) 40.5%) 50% 100%/100% 40%,radial-gradient(ellipse at 50% 0,#8b4513 40%,#ffdab9 40.5%,#ffdab9 58%,rgba(255,218,185,0) 59%) 50% 83%/3em 1em,linear-gradient(#5e2f0d,#5e2f0d) 50% 86%/1em 1em,radial-gradient(circle,#5e2f0d 40%,rgba(139,69,19,0) 40.5%) 26% 56%/1em 1em,radial-gradient(circle,#5e2f0d 40%,rgba(139,69,19,0) 40.5%) 74% 56%/1em 1em,radial-gradient(ellipse,rgba(139,69,19,0) 52%,#8b4513 52.5%,#8b4513 55%,rgba(139,69,19,0) 55.5%) 50% 100%/150% 80%,radial-gradient(ellipse,rgba(0,0,0,0) 46%,rgba(0,0,0,0.15) 46.5%,rgba(0,0,0,0.15) 53%,rgba(0,0,0,0) 53%) 50% 100%/150% 80%,radial-gradient(ellipse,#ffdab9 53%,rgba(255,218,185,0) 53.5%) 50% 100%/150% 80%,radial-gradient(ellipse at 50% 100%,rgba(139,69,19,0) 35.5%,#8b4513 36%,#8b4513 38%,white 38.5%) 50% -45%/110% 60%,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 30% 26%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 40% 25%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 50% 24.5%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 60% 25%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 70% 26%/1em 1em,radial-gradient(ellipse,#666 63%,#8b4513 63.5%,#8b4513 66%,rgba(139,69,19,0) 66.5%) 50% 100%/150% 80%,radial-gradient(ellipse,rgba(139,69,19,0) 40%,#5e2f0d 40.5%) 50% 0/150% 80%,linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0.15)) 50% 50%/100% 100%;
  background-repeat: no-repeat;
  background-color: #ffdab9;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  border: 4px solid #8b4513;
  box-shadow: inset 0 -.2em 0 .5em rgba(0,0,0,0.15),inset 0 -1.6em 0 #5e2f0d;
}

/* delete */
.card-photo::after {
  display: block;
  content: '';
  position: absolute;
  width: 2.5em;
  height: .8em;
  left: 28.5%;
  top: 26%;
  background-color: #5e2f0d;
  border-radius: .3em;
  box-shadow: 4.2em 0 0 #5e2f0d;
}

.card-title {
  text-align: center;
  color: var(--font-color);
  font-size: 20px;
  font-weight: 400;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.card-title span {
  font-size: 15px;
  color: var(--font-color-sub);
}

.card-socials {
  display: flex;
  height: 0;
  opacity: 0;
  margin-top: 20px;
  gap: 20px;
  transition: 0.5s;
}

.card-socials-btn {
  width: 25px;
  height: 25px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.card-socials-btn svg {
  width: 100%;
  height: 100%;
  fill: var(--main-color);
}

.card:hover > .card-socials {
  opacity: 1;
  height: 35px;
}

.card-socials-btn:hover {
  transform: translateY(-5px);
  transition: all 0.15s;
}

.card-photo:hover {
  transition: 0.3s;
  transform: scale(0.4) translate(160px, 150px);
}
</style>


================================================
FILE: Cards/andrew-demchenk0_stupid-liger-18.html
================================================
<div class="card">
  <div class="card__img"></div>
  <div class="card__descr-wrapper">
    <p class="card__title">
    Project
  </p>
  <p class="card__descr">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque blanditiis nemo fugit autem possimus, magnam consequatur sint esse.
  </p>
  <div class="card__links">
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg">&lt;<path d="M562.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L405.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C189.5 251.2 196 330 246 380c56.5 56.5 148 56.5 204.5 0L562.8 267.7zM43.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C57 372 57 321 88.5 289.5L200.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C416.5 260.8 410 182 360 132c-56.5-56.5-148-56.5-204.5 0L43.2 244.3z"></path></svg>
      <a class="link" href="#">Preview</a>
    </div>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
      <a class="link" href="#">Code</a>
    </div>
  </div>
  </div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: card, code, project, project-card, preview, img, links, description */
.card {
  --font-color: #323232;
  --bg-color: #e0e0e0;
  width: 250px;
  height: 350px;
  border-radius: 20px;
  background: var(--bg-color);
  box-shadow: -9px 9px 18px #5a5a5a,
              9px -9px 18px #ffffff;
  display: flex;
  flex-direction: column;
  transition: .4s;
  position: relative;
}

.card:hover {
  transform: scale(1.02);
  box-shadow: 0px 0px 10px 2px #5a5a5a;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  background-color: blueviolet;
}

.card__descr-wrapper {
  padding: 15px;
  display: grid;
}

.card__title {
  color: var(--font-color);
  text-align: center;
  margin-bottom: 15px;
  font-weight: 900;
  font-size: 16px;
}

.card__descr {
  color: var(--font-color);
}

.svg {
  width: 25px;
  height: 25px;
  transform: translateY(25%);
  fill: var(--font-color);
}

.card__links {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-self: flex-end;
}

.card__links .link {
  color: var(--font-color);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

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

</style>


================================================
FILE: Cards/andrew-demchenk0_sweet-eel-60.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: gradient, spinner, animated, uiverse, transition, spin, ui, points, creator points */
.one-div {
  cursor: help;
  position: relative;
  width: 185px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(120deg,
    #BF66FF 0%, 
    #6248FF 3%,
    #00DDEB 95%
    );
  animation: spin 4s linear infinite;
  transform: translateY(100px);
  box-shadow: 0px 10px 25px -10px #4E67FB;
  transform-style: preserve-3d;
  transition: all 0.4s;
}

.one-div::before {
  content: 'U';
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 900;
  font-size: 200px;
  display: inline-block;
  background-image: linear-gradient(140deg,
    #BF66FF 10%, 
    #6248FF 70%,
    #00DDEB 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: absolute;
  bottom: 10px;
  left: -10px;
}

.one-div::after {
  display: block;
  content: '';
  width: 35px;
  height: 147px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(140deg,
    #BF66FF -100%, 
    #6248FF 40%,
    #00DDEB 100%
    );
  position: absolute;
  bottom: 50px;
  right: 0;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg) translateY(100%);
  }

  100% {
    transform: rotateY(360deg) translateY(100%);
  }
}

@keyframes spin2 {
  0% {
    transform: translateY(-20%) rotateY(0);
  }

  100% {
    transform: translateY(-20%) rotateY(360deg);
  }
}

.one-div:active {
  cursor: wait;
  width: 100px;
  height: 100px;
  border-radius: 200px;
  animation: spin2 2.5s linear infinite;
  background: linear-gradient(145deg,
    #BF66FF 10%, 
    #6248FF 50%,
    #00DDEB 100%
  );
}

.one-div:active::before {
  font-size: 0px;
  left: 10px;
  top: 10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /* background: #e8e8e8; */
  background: #212121;
}

.one-div:active::after {
  width: 20px;
  height: 20px;
  background: transparent;
  transform: rotate(45deg);
  border: 10px solid;
  border-image: linear-gradient(85deg,
    #BF66FF -50%, 
    #6248FF 80%,
    #00DDEB 150%
    )1;
  border-radius: 0;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}
</style>


================================================
FILE: Cards/andrew-demchenk0_warm-gecko-73.html
================================================

<div class="success">
    <div class="success__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none"><path fill-rule="evenodd" fill="#393a37" d="m12 1c-6.075 0-11 4.925-11 11s4.925 11 11 11 11-4.925 11-11-4.925-11-11-11zm4.768 9.14c.0878-.1004.1546-.21726.1966-.34383.0419-.12657.0581-.26026.0477-.39319-.0105-.13293-.0475-.26242-.1087-.38085-.0613-.11844-.1456-.22342-.2481-.30879-.1024-.08536-.2209-.14938-.3484-.18828s-.2616-.0519-.3942-.03823c-.1327.01366-.2612.05372-.3782.1178-.1169.06409-.2198.15091-.3027.25537l-4.3 5.159-2.225-2.226c-.1886-.1822-.4412-.283-.7034-.2807s-.51301.1075-.69842.2929-.29058.4362-.29285.6984c-.00228.2622.09851.5148.28067.7034l3 3c.0983.0982.2159.1748.3454.2251.1295.0502.2681.0729.4069.0665.1387-.0063.2747-.0414.3991-.1032.1244-.0617.2347-.1487.3236-.2554z" clip-rule="evenodd"></path></svg>
    </div>
    <div class="success__title">lorem ipsum dolor sit amet</div>
    <div class="success__close"><svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 20 20" height="20"><path fill="#393a37" d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"></path></svg></div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: alert, green, success, card, close, alert message, success message */
.success {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 320px;
  padding: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  background: #84D65A;
  border-radius: 8px;
  box-shadow: 0px 0px 5px -3px #111;
}

.success__icon {
  width: 20px;
  height: 20px;
  transform: translateY(-2px);
  margin-right: 8px;
}

.success__icon path {
  fill: #393A37;
}

.success__title {
  font-weight: 500;
  font-size: 14px;
  color: #393A37;
}

.success__close {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-left: auto;
}

.success__close path {
  fill: #393A37;
}
</style>


================================================
FILE: Cards/anniekoop_good-wasp-72.html
================================================
<div class="card">
  <div class="container">
    <div class="left">
      <div class="status-ind"></div>
    </div>
    <div class="right">
      <div class="text-wrap">
        <p class="text-content">
          <a class="text-link" href="#">Jane Doe</a> invited you to edit the
          <a class="text-link" href="#">Web Design</a> file.
        </p>
        <p class="time">2 hours ago</p>
      </div>
      <div class="button-wrap">
        <button class="primary-cta">View file</button>
        <button class="secondary-cta">Mark as read</button>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by anniekoop  - Tags: simple, neumorphism, action, alert, minimalist, notification, card, light */
.card {
  width: fit-content;
  background-color: #f2f3f7;
  border-radius: 0.75em;
  cursor: pointer;
  transition: ease 0.2s;
  box-shadow: 1em 1em 1em #d8dae0b1, -0.75em -0.75em 1em #ffffff;
  border: 1.5px solid #f2f3f7;
}

.card:hover {
  background-color: #d3ddf1;
  border: 1.5px solid #1677ff;
}

.container {
  margin-top: 1.25em;
  margin-bottom: 1.375em;
  margin-left: 1.375em;
  margin-right: 2em;
  display: flex;
  flex-direction: row;
  gap: 0.75em;
}

.status-ind {
  width: 0.625em;
  height: 0.625em;
  background-color: #ff0000;
  margin: 0.375em 0;
  border-radius: 0.5em;
}

.text-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  color: #333;
}

.time {
  font-size: 0.875em;
  color: #777;
}

.text-link {
  font-weight: 500;
  text-decoration: none;
  color: black;
}

.button-wrap {
  display: flex;
  flex-direction: row;
  gap: 1em;
  align-items: center;
}

.secondary-cta {
  background-color: transparent;
  border: none;
  font-size: 15px;
  font-weight: 400;
  color: #666;
  cursor: pointer;
}

.primary-cta {
  font-size: 15px;
  background-color: transparent;
  font-weight: 600;
  color: #1677ff;
  border: none;
  border-radius: 1.5em;
  cursor: pointer;
}

button:hover {
  text-decoration: underline;
}

.right {
  display: flex;
  flex-direction: column;
  gap: 0.875em;
}

</style>
    

================================================
FILE: Cards/anthondevg_foolish-dog-65.html
================================================
<!-- From Uiverse.io by anthondevg - Tags: minimalist, card, tailwind -->
<div class="card h-72 relative border-2 border-blue-600 bg-gradient-to-b from-blue-600 from-[12%] via-[12%] via-white to-70% to-white shadow-lg shadow-lg rounded-xl w-72 flex justify-center items-center text-white">
  <span class="rounded-md bg-red-500 px-2 py-[.6em] absolute top-[2px] right-0 border border-white text-[.6em] mr-1 bg-gradient-to-b from-red-800 via-red-500 to-red-800 font-bold"> ╳ </span>
 <span class="rounded-md bg-red-500 px-2 py-[.6em] absolute top-[2px] right-7 border border-white text-[.6em] mr-2 bg-gradient-to-b from-blue-800 via-blue-500 to-blue-800"> ▣ </span>
 <span class="rounded-md bg-red-500 px-2 py-[.6em] absolute top-[2px] right-14 border border-white text-[.6em] mr-3 bg-gradient-to-b from-blue-800 via-blue-500 to-blue-800"> — </span>
 <p class="text-black">
  WINDOWS XP TIMES</p>
</div>



================================================
FILE: Cards/ardianhu_stale-lionfish-9.html
================================================
<!-- From Uiverse.io by ardianhu  - Tags: input, dark, minimal, colorful, terminal, login, prompt, command, authentication, shell, register -->
<div class="terminal p-5 rounded-lg font-mono min-w-[480px]">
  <div
    class="terminal-header bg-zinc-700 text-white p-2 rounded-t-lg flex items-center"
  >
    <span class="text-red-500 text-5xl leading-[0px] align-middle -mt-2"
      >•</span
    >
    <span class="text-yellow-500 text-5xl leading-[0px] align-middle -mt-2 ml-1"
      >•</span
    >
    <span class="text-green-500 text-5xl leading-[0px] align-middle -mt-2 ml-1"
      >•</span
    >
    <span class="ml-4 align-baseline">authentication --- bash - zsh </span>
  </div>
  <div class="pl-4 pt-2 bg-gray-900 max-h-[500px] overflow-auto" id="output">
    <p class="text-gray-500">You need to authenticate to continue!</p>
    <p class="text-sky-300">Enter 1 to login</p>
    <p class="text-sky-300">Enter 2 to register</p>
  </div>
  <div
    class="input flex pl-4 bg-gray-900 pb-4 rounded-b-lg items-center"
    id="terminal-input-container"
  >
    <span class="text-green-500">➝</span>
    <span class="text-sky-300 ml-2">~</span>
    <span class="ml-2 text-md text-gray-500" id="placeholder"></span>
    <input
      class="bg-transparent border-none outline-none ring-0 focus:ring-0 text-amber-400 w-full"
      id="terminal-input"
      type="text"
    />
  </div>
</div>


    

================================================
FILE: Cards/arshshaikh06_dull-newt-33.html
================================================
<div class="container">
  <div class="palette">
    <div id="color1" class="color">
      <span>#CECE5A</span>
    </div>
    <div id="color2" class="color">
      <span>#FFE17B</span>
    </div>
    <div id="color3" class="color">
      <span>#FD8D14</span>
    </div>
    <div id="color4" class="color">
      <span>#C51605</span>
    </div>
    <div id="color-code">
      <div id="color-code-bg"></div>
      <div id="color-code-text"></div>
    </div>
  </div>
<div id="footer">
<div id="bookmarks">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
    <span>53421</span>
    </div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="1"></circle>
  <circle cx="19" cy="12" r="1"></circle>
  <circle cx="5" cy="12" r="1"></circle>
</svg>
  </div>
</div>
<style>
/* From Uiverse.io by arshshaikh06 - Tags: card, fluid, animated, colorful, palette, card hover */
.container {
  width: 300px;
  height: 340px;
  border-radius: 1em;
  overflow: hidden;
  box-shadow: 0 10px 20px #dbdbdb;
  font-family: sans-serif;
  background: white;
  pointer-events: none;
}

.palette {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 1rem;
  overflow: hidden;
  pointer-events: auto;
}

.palette:hover > #color-code {
  opacity: 0;
}

.color {
  position: absolute;
  width: 300px;
  height: 300px;
  transform-origin: center;
  transition: 0.3s ease-in-out;
  box-sizing: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
}

.color span {
  color: white;
  font-weight: 600;
  letter-spacing: 1px;
}

#color1 {
  background: #CECE5A;
  rotate: 45deg;
  translate: 212.13px 0;
  outline: 0 solid #CECE5A;
  z-index: 9;
}

#color1:hover {
  translate: 0 0;
  rotate: 0deg;
  z-index: 99;
  outline: 20px solid #CECE5A;
}

#color2 {
  background: #FFE17B;
  rotate: 45deg;
  translate: 0 212.13px;
  outline: 0 solid #FFE17B;
  z-index: 9;
}

#color2:hover {
  translate: 0 0;
  rotate: 0deg;
  z-index: 99;
  outline: 20px solid #FFE17B;
}

#color2 span {
  color: #1A1A1A;
}

#color3 {
  background: #FD8D14;
  rotate: 45deg;
  translate: -212.13px 0;
  outline: 0 solid #FD8D14;
  z-index: 9;
}

#color3:hover {
  translate: 0 0;
  rotate: 0deg;
  z-index: 99;
  outline: 20px solid #FD8D14;
}

#color4 {
  background: #C51605;
  rotate: 45deg;
  translate: 0 -212.13px;
  outline: 0 solid #C51605;
  z-index: 9;
}

#color4:hover {
  translate: 0 0;
  rotate: 0deg;
  z-index: 99;
  outline: 20px solid #C51605;
}

#color-code {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  translate: 130px 130px;
  border-radius: 20px;
  overflow: hidden;
  z-index: 199;
  opacity: 1;
  transition: 0.3s ease-in-out;
}

#color-code-bg {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  filter: blur(10px);
}

#color-code-text {
  position: absolute;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#color-code-text::after {
  content: "v2";
  font-weight: 600;
  font-family: sans-serif;
  color: #1a1a1a;
}

#footer {
  height: 12%;
  width: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1em;
  box-sizing: border-box;
  color: #bebebe;
}

#footer svg {
  scale: 0.75;
}

#footer #bookmarks {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: smaller;
}
</style>


================================================
FILE: Cards/arshshaikh06_hard-cobra-69.html
================================================
<div class="container">
  <div class="palette">
    <div class="color"><span>264653</span></div>
    <div class="color"><span>2A9D8F</span></div>
    <div class="color"><span>E9C46A</span></div>
    <div class="color"><span>F4A261</span></div>
    <div class="color"><span>E76F51</span></div>
  </div>
  <div id="stats">
    <span>53421 saves</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
      <path d="M4 7.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5S5.5 9.83 5.5 9 4.83 7.5 4 7.5zm10 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-5 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S9.83 7.5 9 7.5z"></path>
    </svg>
  </div>
</div>
<style>
/* From Uiverse.io by arshshaikh06 - Source: https://codepen.io/arsh-shaikh/pen/ZELZwWq?editors=1100 - Tags: card, palette, ui, card hover */
.container {
  height: 200px;
  width: 350px;
  border-radius: 1em;
  overflow: hidden;
  box-shadow: 0 10px 20px #dbdbdb;
  font-family: sans-serif;
}

.palette {
  display: flex;
  height: 86%;
  width: 100%;
}

.color {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  letter-spacing: 1px;
  transition: flex 0.1s linear;
}

.color span {
  opacity: 0;
  transition: opacity 0.1s linear;
}

.color:nth-child(1) {
  background: #264653;
}

.color:nth-child(2) {
  background: #2a9d8f;
}

.color:nth-child(3) {
  background: #e9c46a;
}

.color:nth-child(4) {
  background: #f4a261;
}

.color:nth-child(5) {
  background: #e76f51;
}

.color:hover {
  flex: 2;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.color:hover span {
  opacity: 1;
}

#stats {
  height: 14%;
  width: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5em;
  box-sizing: border-box;
  color: #bebebe;
}

#stats svg {
  fill: #bebebe;
  transform: scale(1.2);
}
</style>


================================================
FILE: Cards/asgardOP_serious-warthog-58.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by asgardOP  - Tags: icon, action, alert, instagram, card, modern, social media, account */
.card {
  width: 340px;
  height: fit-content;
  background-color: rgb(32, 32, 32);
  display: flex;
  align-items: center;
  padding: 10px;
  position: relative;
  border-radius: 15px;
}

.card::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 190px;
  border-radius: 15px;
  padding: 4px;
  left: -4px;
  background: linear-gradient(90deg, rgb(156, 33, 194), rgb(59, 177, 255));
  z-index: -1;
}

.card .image {
  width: 170px;
  height: 170px;
  margin-right: 15px;
  animation: moving 5s infinite;
}

.heading {
  color: white;
  font-weight: 900;
  height: fit-content;
  width: 100%;
  position: relative;
  top: -50px;
  font-size: 20px;
}

.icons {
  position: absolute;
  display: flex;
  height: 50px;
  width: 42%;
  align-items: center;
  justify-content: center;
  bottom: 20px;
  right: 43px;
  background-color: rgb(43, 43, 43);
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
}

.icons a {
  padding: 10px;
  padding-top: 15px;
  position: relative;
  z-index: 4;
}

.icons a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 55px;
  z-index: -1;
  left: 0px;
  top: 0px;
  opacity: 0;
  transition: 0.1s;
}

.icons a:hover::before {
  opacity: 1;
}

.icons .instagram::before {
  background: linear-gradient(120deg, #833ab4, #fd1d1d, #fcb045);
}

.icons .x::before {
  background-color: black;
}

.icons .discord::before {
  background-color: rgb(0, 102, 255);
}

.icons svg {
  color: rgb(243, 243, 243);
  width: 27px;
  height: 27px;
  z-index: 99;
}

</style>
    

================================================
FILE: Cards/austintirrell_foolish-termite-80.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by austintirrell  - Tags: icon, animation, social, instagram, gradient, card, Discord, glow */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to right, rgb(183, 62, 238), rgb(156, 249, 247));
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  margin: 20px;
  padding: 20px;
  width: 300px;
}

@keyframes floatAnimation {
  0%,
  100% {
    transform: translateY(0);
    filter: drop-shadow(0px 5px 5px rgba(255, 255, 255, 0.5));
  }
  50% {
    transform: translateY(-10px);
    filter: drop-shadow(0px 20px 15px rgba(255, 255, 255, 0.5));
  }
}

.image {
  width: 200px;
  height: auto;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  animation: floatAnimation 3s ease-in-out infinite;
}

.heading {
  width: 100%;
  font-size: 22px;
  margin-bottom: 10px;
  text-align: center;
  color: #1b1b1b;
  font-weight: 600;
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

.icons {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 10px 0;
}

.icons a {
  color: inherit;
  text-decoration: none;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icons a:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease-in-out;
}

.icons svg {
  width: 50px;
  height: 50px;
  transition: transform 0.2s ease-in-out;
  color: #fff;
  border-radius: 50px;
  padding: 5px;
  filter: drop-shadow(0 0 10px rgb(255, 255, 255));
}

</style>
    

================================================
FILE: Cards/ayman-ashine_giant-newt-7.html
================================================
<div class="card">
  <img
    class="image"
    alt=""
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a class="instagram" href="https://www.instagram.com/uiverse.io/">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 25"
        height="25"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
        ></path>
      </svg>
    </a>
    <a class="x" href="https://twitter.com/uiverse_io">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
        ></path>
      </svg>
    </a>
    <a class="discord" href="https://discord.gg/KD8ba2uUpT">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 25 25"
        height="25"
        width="25"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by ayman-ashine  - Tags: card, hover, dark, image */
.card {
  --dark: #212121;
  --darker: #111111;
  --semidark: #2c2c2c;
  --lightgray: #e8e8e8;
  --unit: 10px;

  background-color: var(--darker);
  box-shadow: 0 0 var(--unit) var(--darker);
  border: calc(var(--unit) / 2) solid var(--darker);
  border-radius: var(--unit);
  position: relative;
  padding: var(--unit);
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  width: 120%;
  height: 20%;
  top: 40%;
  left: -10%;
  background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
  animation: keyframes-floating-light 2.5s infinite ease-in-out;
  filter: blur(20px);
}

@keyframes keyframes-floating-light {
  0% {
    transform: rotate(-5deg) translateY(-5%);
    opacity: 0.5;
  }

  50% {
    transform: rotate(5deg) translateY(5%);
    opacity: 1;
  }

  100% {
    transform: rotate(-5deg) translateY(-5%);
    opacity: 0.5;
  }
}

.card::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
  filter: blur(20px);
  pointer-events: none;
  animation: keyframes-intro 1s ease-in forwards;
}

@keyframes keyframes-intro {
  100% {
    ransform: translate(-100%);
    opacity: 0;
  }
}

.card .image {
  width: 200px;
  animation: keyframes-floating-img 10s ease-in-out infinite;
}

@keyframes keyframes-floating-img {
  0% {
    transform: translate(-2%, 2%) scaleY(0.95) rotate(-5deg);
  }

  50% {
    transform: translate(2%, -2%) scaleY(1) rotate(5deg);
  }

  100% {
    transform: translate(-2%, 2%) scaleY(0.95) rotate(-5deg);
  }
}

.card .heading {
  font-weight: 600;
  font-size: small;
  text-align: center;
  margin-top: calc(var(--unit) * -2);
  padding-block: var(--unit);
  color: var(--lightgray);
  animation: keyframes-flash-text 0.5s infinite;
}

@keyframes keyframes-flash-text {
  50% {
    opacity: 0.5;
  }
}

.card .icons {
  display: flex;
  gap: var(--unit);
}

.card .icons a {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  background-color: var(--dark);
  color: var(--lightgray);
  padding: calc(var(--unit) / 2);
  border-radius: calc(var(--unit) / 2);
}

.card .icons a:hover {
  transition: 0.2s;
  background-color: var(--semidark);
}

</style>
    

================================================
FILE: Cards/bahnisikhadhar_swift-rat-55.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by bahnisikhadhar - Tags: card */
.card {
  width: 310px;
  padding: 1.2rem;
  border-radius: 20px;
  text-align: center;
  transition: .5s;
  background: linear-gradient(45deg,rgb(102, 34, 102), rgb(24, 12, 77),rgba(255, 119, 0, 0.564));
  background-size: 200% 200%;
  animation: backgroundChange 6s ease-in-out infinite;
}

@keyframes backgroundChange {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.card:hover {
  box-shadow: 2px 2px 10px rgb(158, 158, 196);
  transform: scale(1.03);
  transition: .5s;
}

.heading {
  font-size: 1.3rem;
  font-weight: bold;
  color: white;
  padding: 1rem;
  animation: blink 1.8s linear infinite;
}

@keyframes blink {
  0% {
    opacity: 0;
  }

  50% {
    opacity: .5;
  }

  100% {
    opacity: 1;
  }
}

.heading span {
  background: linear-gradient(to right, rgb(212, 78, 212),orange,rgb(77, 77, 241));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.5rem;
}

.content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.item {
  position: relative;
  width: 150px;
  height: 60px;
  background: black;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s ease-in-out;
  display: flex;
  justify-content: center;
  gap: .3rem;
  align-items: center;
  box-shadow: 0px 0px 5px white;
}

.item:nth-child(1) {
  transform: translateX(-60px);
}

.item:nth-child(3) {
  transform: translateX(60px);
}

.content:hover .item:nth-child(1) {
  transform: translateX(0px);
}

.content:hover .item:nth-child(3) {
  transform: translateX(0px);
}

.item--create {
  color: steelblue;
}

.item--post {
  color: rgb(179, 35, 35);
}

.item--inspire {
  color: rgb(177, 59, 177);
}

.item--create:hover {
  color: white;
}

.item::before {
  content: "";
  position: absolute;
  left: 0;
  width: 10px;
  height: 100%;
  transition: 0.5s ease-in-out;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.item:hover::before {
  width: 100%;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.item--create::before {
  background-color: rgb(14, 45, 129);
}

.item--post::before {
  background-color: rgb(105, 2, 2);
}

.item--inspire::before {
  background-color: rgb(87, 9, 87);
}

.item:hover svg {
  color: white;
  transform: rotate(360deg);
  transition: all 2.0s;
  z-index: 1;
}

.item span {
  z-index: 1;
}

.item:hover span {
  color: white;
  transform: scale(1.2);
  transition: all 2.0s;
}

button {
  margin-top: 1rem;
  border: none;
  outline: none;
  width: 90%;
  padding: .7rem;
  border-radius: 10px;
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  background-image: linear-gradient(to right, #173380, rgb(192, 188, 188) ,#0d2f94 );
  background-size: 400% 100%;
  transition: all 0.5s ease-in-out;
}

button:hover {
  background-position: 100% 0;
}

</style>


================================================
FILE: Cards/benjimich_nervous-goose-2.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by benjimich - Tags: card */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #0f0e17;
  color: white;
  padding: 2em;
  border-radius: 8px;
  transition: all 1s ease;
}

.card:hover {
  box-shadow: 0 0 20px 8px rgb(218, 127, 242);
}

.heading {
  font-size: 28px;
  margin-bottom: 2em;
  text-align: center;
  color: #fffffe;
}

.heading span {
  color: rgb(218, 127, 242);
  font-weight: 700;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  width: 140px;
  padding: 10px;
  margin-bottom: 1em;
  background: linear-gradient(to top,rgb(218, 127, 242) 0%, rgb(218, 127, 242) 100%) no-repeat;
  background-size: 0 100%;
  transform: translateY(0);
  transition: all .3s ease;
}

.item:hover {
  transform: translateY(-4px);
  background-size: 100% 100%;
}

.item svg {
  margin-right: 1em;
}

button {
  cursor: pointer;
  border: none;
  margin-top: 2em;
  font-size: 18px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 8px;
  background: #e53170;
  color: #0f0e17;
  transition: all .2s ease;
}

button:hover {
  background: #fff;
  letter-spacing: .1em;
  box-shadow: 0 0 8px 4px #fff;
}
</style>


================================================
FILE: Cards/benjimich_shaggy-otter-87.html
================================================
<div class="card">
<div class="img"></div>
  <div class="info">
    <span>John Doe</span>
    <p>Web Dev</p>
  </div>
  <a href="#">Button</a>
</div>
<style>
/* From Uiverse.io by benjimich - Tags: neumorphism, card */
.card {
 width: 190px;
 height: 254px;
 display: flex;
 flex-direction: column;
 align-items: center;
 background: #f2f2f3;
 border-radius: 12px;
 box-shadow: inset 5px 5px 10px #a9a9aa77,
              inset -5px -5px 10px #ffffff7e;
}

.card .img {
 height: 100px;
 margin-top: 1.6em;
 aspect-ratio: 1;
 border-radius: 30%;
 background: #f2f2f3;
 margin-bottom: 0.4em;
 box-shadow: -5px -5px 8px #ffffff7a, 
              5px 5px 8px #a9a9aa7a;
}

.card .info {
 text-align: center;
 margin-top: 0.4em;
 background: linear-gradient(120deg, rgba(0,194,255,1) 0%, rgba(0,86,255,1) 100%);
 background-clip: border-box;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.card .info > span {
 font-weight: bold;
 font-size: 1.2em;
}

.card a {
 margin-top: 1em;
 color: #fff;
 text-decoration: none;
 background: linear-gradient(90deg, rgba(0,194,255,1) 0%, rgba(0,86,255,1) 100%);
 padding: .5em 2em;
 border-radius: 0.7em;
}

.card a:active {
 box-shadow: inset 3px 3px 3px #0056ff,
             inset -3px -3px 3px #00c2ff;
}
</style>


================================================
FILE: Cards/bhaveshxrawat_dangerous-quail-58.html
================================================
<div class="card">
    <h2>CARD</h2>
</div>
<style>
/* From Uiverse.io by bhaveshxrawat - Tags: card */
.card {
  width: 190px;
  height: 254px;
  background: #07182E;
  position: relative;
  display: flex;
  place-content: center;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
}

.card h2 {
  z-index: 1;
  color: white;
  font-size: 2em;
}

.card::before {
  content: '';
  position: absolute;
  width: 100px;
  background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
  height: 130%;
  animation: rotBGimg 3s linear infinite;
  transition: all 0.2s linear;
}

@keyframes rotBGimg {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.card::after {
  content: '';
  position: absolute;
  background: #07182E;
  ;
  inset: 5px;
  border-radius: 15px;
}  
/* .card:hover:before {
  background-image: linear-gradient(180deg, rgb(81, 255, 0), purple);
  animation: rotBGimg 3.5s linear infinite;
} */


</style>


================================================
FILE: Cards/bhaveshxrawat_happy-lizard-10.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by bhaveshxrawat - Tags: card */
.card {
 width: 190px;
 height: 254px;
 background: linear-gradient(145deg, #2B86C5 0%, #FF3CAC 100%);
 border-radius: 5px;
 box-shadow: 10px 10px 9px #c5c5c5,
             -10px -10px 9px #ffffff;
 transition: box-shadow 0.7s ease;
}

.card:hover {
 box-shadow: 10px 10px 15px #c5c5c5,
             -10px -10px 15px #ffffff;
}
</style>


================================================
FILE: Cards/bociKond_fluffy-zebra-10.html
================================================
<div class="card">
  <svg xml:space="preserve" style="enable-background: new 0 0 16 16" viewBox="0 0 16 16" y="0px" x="0px" id="Layer_1_1_" version="1.1" class="img">
    <path d="M12,9H8H4c-2.209,0-4,1.791-4,4v3h16v-3C16,10.791,14.209,9,12,9z"></path>
    <path d="M12,5V4c0-2.209-1.791-4-4-4S4,1.791,4,4v1c0,2.209,1.791,4,4,4S12,7.209,12,5z"></path>
  </svg>

  <div class="text">
    <span class="heading">Marco</span>
    <p class="info">CEO</p>
    <div class="country">
      <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#f2e5d7" fill="none" viewBox="0 0 24 24" class="svg-country">
        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path>
        <line y2="15" x2="4" y1="22" x1="4"></line>
      </svg>
      <span>Italy</span>
    </div>
  </div>
  <ul class="soc">
    <a href="#" class="li-soc">
      <li>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" height="32" width="32">
          <path fill="#f2e5d7" d="M24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0ZM26.5016 25.0542V38.1115H21.0991V25.0547H18.4V20.5551H21.0991V17.8536C21.0991 14.1828 22.6231 12 26.9532 12H30.5581V16.5001H28.3048C26.6192 16.5001 26.5077 17.1289 26.5077 18.3025L26.5016 20.5546H30.5836L30.1059 25.0542H26.5016Z" clip-rule="evenodd" fill-rule="evenodd"></path>
        </svg>
      </li>
    </a>
    <a href="#" class="li-soc">
      <li>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" height="32" width="32">
          <path fill="#f2e5d7" d="M24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0ZM23.3316 20.338L23.2812 19.5075C23.1301 17.3551 24.4563 15.3891 26.5548 14.6265C27.327 14.3553 28.6364 14.3214 29.4926 14.5587C29.8283 14.6604 30.4663 14.9993 30.9195 15.3044L31.7421 15.8637L32.6486 15.5756C33.1523 15.423 33.8238 15.1688 34.1259 14.9993C34.4113 14.8468 34.6631 14.762 34.6631 14.8129C34.6631 15.101 34.042 16.084 33.5216 16.6263C32.8165 17.389 33.018 17.4568 34.4449 16.9483C35.3011 16.6602 35.3178 16.6602 35.15 16.9822C35.0492 17.1517 34.5288 17.7449 33.9748 18.2872C33.0347 19.2194 32.9844 19.3211 32.9844 20.1007C32.9844 21.304 32.4136 23.8123 31.8428 25.1851C30.7852 27.7612 28.5189 30.422 26.2526 31.7609C23.063 33.6422 18.8157 34.1167 15.24 33.0151C14.0481 32.6422 12 31.6931 12 31.5237C12 31.4728 12.6211 31.405 13.3766 31.3881C14.9546 31.3542 16.5326 30.9135 17.8756 30.1339L18.7822 29.5916L17.7413 29.2357C16.264 28.7272 14.9378 27.5578 14.6021 26.4562C14.5013 26.1003 14.5349 26.0833 15.475 26.0833L16.4487 26.0664L15.6261 25.6766C14.6524 25.1851 13.7627 24.3546 13.3262 23.5072C13.0072 22.8971 12.6044 21.3548 12.7219 21.2362C12.7554 21.1854 13.108 21.287 13.5109 21.4226C14.6692 21.8463 14.8203 21.7446 14.1488 21.0328C12.8897 19.7448 12.5036 17.8296 13.108 16.0162L13.3934 15.2027L14.5013 16.3043C16.7677 18.5245 19.4369 19.8465 22.4922 20.2363L23.3316 20.338Z" clip-rule="evenodd" fill-rule="evenodd"></path>
        </svg>
      </li>
    </a>
    <a href="#" class="li-soc">
      <li>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" height="32" width="32">
          <path fill="#f2e5d7" d="M24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0ZM18.7233 11.2773C20.0886 11.2152 20.5249 11.2 24.0012 11.2H23.9972C27.4746 11.2 27.9092 11.2152 29.2746 11.2773C30.6373 11.3397 31.5679 11.5555 32.384 11.872C33.2266 12.1987 33.9386 12.636 34.6506 13.348C35.3627 14.0595 35.8 14.7736 36.128 15.6155C36.4427 16.4294 36.6587 17.3595 36.7227 18.7222C36.784 20.0876 36.8 20.5238 36.8 24.0001C36.8 27.4764 36.784 27.9116 36.7227 29.277C36.6587 30.6391 36.4427 31.5695 36.128 32.3837C35.8 33.2253 35.3627 33.9394 34.6506 34.6509C33.9394 35.3629 33.2264 35.8013 32.3848 36.1283C31.5703 36.4448 30.6391 36.6605 29.2765 36.7229C27.9111 36.7851 27.4762 36.8003 23.9996 36.8003C20.5236 36.8003 20.0876 36.7851 18.7222 36.7229C17.3598 36.6605 16.4294 36.4448 15.615 36.1283C14.7736 35.8013 14.0595 35.3629 13.3483 34.6509C12.6365 33.9394 12.1992 33.2253 11.872 32.3834C11.5557 31.5695 11.34 30.6394 11.2773 29.2767C11.2155 27.9114 11.2 27.4764 11.2 24.0001C11.2 20.5238 11.216 20.0873 11.2771 18.7219C11.3384 17.3598 11.5544 16.4294 11.8717 15.6152C12.1997 14.7736 12.6371 14.0595 13.3491 13.348C14.0606 12.6363 14.7747 12.1989 15.6166 11.872C16.4305 11.5555 17.3606 11.3397 18.7233 11.2773Z" clip-rule="evenodd" fill-rule="evenodd"></path>
          <path fill="#f2e5d7" d="M22.853 13.5067C23.0759 13.5064 23.3158 13.5065 23.5746 13.5066L24.0013 13.5067C27.4189 13.5067 27.824 13.519 29.1736 13.5803C30.4216 13.6374 31.0989 13.8459 31.5501 14.0211C32.1475 14.2531 32.5733 14.5305 33.0211 14.9785C33.4691 15.4265 33.7464 15.8532 33.979 16.4505C34.1542 16.9012 34.363 17.5785 34.4198 18.8265C34.4811 20.1759 34.4944 20.5812 34.4944 23.9972C34.4944 27.4133 34.4811 27.8186 34.4198 29.168C34.3627 30.416 34.1542 31.0933 33.979 31.544C33.747 32.1413 33.4691 32.5667 33.0211 33.0144C32.5731 33.4624 32.1477 33.7398 31.5501 33.9718C31.0995 34.1478 30.4216 34.3558 29.1736 34.4128C27.8242 34.4742 27.4189 34.4875 24.0013 34.4875C20.5834 34.4875 20.1783 34.4742 18.8289 34.4128C17.5809 34.3552 16.9036 34.1467 16.4521 33.9715C15.8548 33.7395 15.4281 33.4621 14.9801 33.0141C14.5321 32.5661 14.2548 32.1405 14.0222 31.5429C13.847 31.0923 13.6382 30.4149 13.5814 29.1669C13.5201 27.8176 13.5078 27.4122 13.5078 23.994C13.5078 20.5759 13.5201 20.1727 13.5814 18.8233C13.6385 17.5753 13.847 16.898 14.0222 16.4468C14.2542 15.8494 14.5321 15.4228 14.9801 14.9748C15.4281 14.5268 15.8548 14.2494 16.4521 14.0169C16.9033 13.8409 17.5809 13.6329 18.8289 13.5755C20.0097 13.5222 20.4674 13.5062 22.853 13.5035V13.5067ZM30.8339 15.6321C29.9859 15.6321 29.2978 16.3193 29.2978 17.1676C29.2978 18.0156 29.9859 18.7036 30.8339 18.7036C31.6819 18.7036 32.3699 18.0156 32.3699 17.1676C32.3699 16.3196 31.6819 15.6316 30.8339 15.6316V15.6321ZM17.4279 24.0002C17.4279 20.3701 20.3709 17.4269 24.001 17.4268C27.6312 17.4268 30.5736 20.37 30.5736 24.0002C30.5736 27.6304 27.6314 30.5723 24.0013 30.5723C20.3711 30.5723 17.4279 27.6304 17.4279 24.0002Z" clip-rule="evenodd" fill-rule="evenodd"></path>
          <path fill="#f2e5d7" d="M24.0012 19.7334C26.3575 19.7334 28.2679 21.6436 28.2679 24.0001C28.2679 26.3564 26.3575 28.2668 24.0012 28.2668C21.6447 28.2668 19.7345 26.3564 19.7345 24.0001C19.7345 21.6436 21.6447 19.7334 24.0012 19.7334Z"></path>
        </svg>
      </li>
    </a>
  </ul>
</div>
<style>
/* From Uiverse.io by bociKond - Tags: twitter, facebook, instagram, card, links, social lincks, avatar, ceo */
.card * {
  box-sizing: border-box;
}

.card {
  --bc: #c97d60;
  --bc1: #904c31;
  --bc-al: #c97d6050;
  --clr: #f2e5d7;
  background-color: var(--bc);
  color: var(--clr);
  padding: 2rem 2.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px -1px var(--bc-al);
  outline: 2px solid var(--bc);
  outline-offset: 4px;
  max-width: 300px;
  max-height: 300px;
  transition: 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  line-height: 1.3;
}

.card:hover {
  --bc: #904c31;
}

.img {
  max-width: 100%;
  width: 5rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  outline: 2px solid var(--clr);
  outline-offset: 4px;
  fill: var(--clr);
}

.text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.heading {
  font-size: 1.5rem;
  font-weight: 700;
}

.info {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.7;
}

.country {
  display: flex;
  align-items: center;
  font-size: 1rem;
  gap: .2rem;
}

.svg-country {
  width: 1rem;
  height: 1rem;
}

.soc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  margin-top: 0.5rem;
  padding-bottom: 0;
  margin-inline: auto;
}

.li-soc {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--clr);
  width: 0.5rem;
  height: 0.5rem;
  padding: 0.5rem;
}

.li-soc:hover {
  opacity: 0.7;
}
</style>


================================================
FILE: Cards/bociKond_perfect-bear-45.html
================================================
<div class="wrapper">
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="card">
  <section class="top">
    <span class="u-l">User list:</span>
  </section>
  <section class="bottom">
    <ul class="users">
      <li class="user">
        <span class="user-name">Olivia Anderson</span>
        <span class="user-occupation">Marketing Manager</span>
      </li>
      <li class="user">
        <span class="user-name">Ethan Murphy</span>
        <span class="user-occupation">Graphic Designer</span>
      </li>
      <li class="user">
        <span class="user-name">Ava Collins</span>
        <span class="user-occupation">Financial Analyst</span>
      </li>
      <li class="user">
        <span class="user-name">Noah Walker</span>
        <span class="user-occupation">Journalist</span>
      </li>
    </ul>
  </section>
</div>
</div>
<style>
/* From Uiverse.io by bociKond - Source: https://10015.io - Tags: glassmorphism, list, minimalist, card, blur filter, username, filter, blur, minimal, card template */
.wrapper {
  position: relative;
  --white: #e3e3e3;
  --bc: rgb(203,46,79);
  --bc-al: rgba(203,46,79,0.6);
}

.card {
  max-width: 340px;
  padding: 1rem 0;
  display: grid;
  grid-template-areas: "top" "bottom";
  grid-template-rows: 20% 1fr;
  border: 1px solid var(--bc-al);
  border-radius: .75rem;
  background: var(--bc-al);
  color: var(--white);
  backdrop-filter: blur(14px);
  box-shadow: 0 15px 30px -15px var(--bc-al);
  isolation: isolate;
}

.circle-1 {
  position: absolute;
  content: '';
  width: 5rem;
  height: 5rem;
  left: 1rem;
  top: 50%;
  transform: translate(-50%);
  background-color: var(--bc-al);
  border-radius: 50%;
  z-index: -10;
}

.circle-2 {
  position: absolute;
  content: '';
  width: 3rem;
  height: 3rem;
  right: -1rem;
  top: 3rem;
  background-color: var(--bc-al);
  border-radius: 50%;
  z-index: -10;
}

.top {
  padding: .5rem 4rem;
  z-index: 1;
}

.bottom {
  z-index: 2;
}

.users {
  display: flex;
  flex-direction: column;
  padding: .5rem 0;
}

.user {
  width: 100%;
  padding: .75rem 4rem;
  display: flex;
  gap: .1rem;
  flex-direction: column;
  align-items: flex;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--bc-al);
  position: relative;
}

.user:hover {
  background-color: var(--bc-al);
}

.user:nth-last-child(1) {
  border-bottom: none;
}

.user::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  left: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--white);
  border-radius: 50%;
}

.user-name {
  font-weight: 700;
  font-style: italic;
}

.user-occupation {
  opacity: .8;
}

.u-l {
  font-size: 1.1rem;
  font-weight: 700;
  font-style: italic;
}
</style>


================================================
FILE: Cards/bociKond_shaggy-pug-39.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by bociKond - Tags: animation, card, clock, pulse, box-shadow, AM/PM, wrist, watch */
.one-div {
  --white: rgb(200,200,200);
  --black: rgb(50,50,50);
  --clr: #7BF1A8;
  --clr1: #b4facf;
  --clr2: #3E363F;
  background-color: var(--clr2);
  width: 190px;
  height: 190px;
  border-radius: 50%;
  position: relative;
  transition: all 300ms;
  animation: shadow 1.5s infinite linear;
}

.one-div:hover {
  background-color: var(--clr);
  box-shadow: 0 0 100px var(--clr);
  border-radius: 1rem;
  border: 10px solid var(--clr1);
}

.one-div:hover::before {
  border-radius: 1rem;
  color: var(--clr2);
  font-weight: 900;
  clip-path: polygon(0% 0%, 100.1% 0%, 91% 50%, 100.1% 100.3%, 0% 100.3%);
}

.one-div:hover::after {
  animation-play-state: running;
}

.one-div::before {
  content: '14:30pm';
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  background-color: transparent;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  border: 10px solid var(--clr2);
  font-size: 2rem;
  color: var(--clr);
  transition: all 300ms;
}

.one-div::after {
  content: '';
  position: absolute;
  background-image: repeating-linear-gradient(0deg, var(--black), var(--black) 4px, transparent 4px, transparent);
  background-size: 16px 16px;
  background-position: center;
  background-color: var(--white);
  width: 140px;
  height: 450px;
  border-radius: 2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -2;
  border-left: 10px solid var(--clr2);
  border-right: 10px solid var(--clr2);
  transition: all 300ms;
  animation: height 1.5s infinite linear;
  animation-play-state: paused;
}

@keyframes height {
  from {
    height: 450px;
  }

  50% {
    height: 400px;
  }

  to {
    height: 450px;
  }
}

@keyframes shadow {
  from {
    box-shadow: 0 0 100px var(--clr);
  }

  50% {
    box-shadow: 0 0 100px 50px var(--clr);
  }

  to {
    box-shadow: 0 0 100px var(--clr);
  }
}
</style>


================================================
FILE: Cards/boryanakrasteva_rude-rabbit-66.html
================================================
<div class="card">
  <div class="circles"> 
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
  </div>

  <div class="browser">
    <div class="chevrons">
      <svg viewBox="0 0 20 20" height="16" width="16" xmlns="http://www.w3.org/2000/svg" data-name="20" id="_20">
        <path transform="translate(6.25 3.75)" d="M0,6.25,6.25,0l.875.875L1.75,6.25l5.375,5.375L6.25,12.5Z" id="Fill"></path>
      </svg>
      <svg viewBox="0 0 20 20" height="16" width="16" xmlns="http://www.w3.org/2000/svg" data-name="20" id="_20">
        <path transform="translate(6.625 3.75)" d="M7.125,6.25.875,12.5,0,11.625,5.375,6.25,0,.875.875,0Z" id="Fill"></path>
      </svg>
    </div>
    <div class="search-bar">
      <svg xmlns="http://www.w3.org/2000/svg" width="7.89" height="7.887" viewBox="0 0 16.89 16.887">
  <path id="Fill" d="M16.006,16.887h0l-4.743-4.718a6.875,6.875,0,1,1,.906-.906l4.719,4.744-.88.88ZM6.887,1.262a5.625,5.625,0,1,0,5.625,5.625A5.631,5.631,0,0,0,6.887,1.262Z" transform="translate(0.003 0)"></path>
</svg>

      uiverse.io
    <div>
  </div>

</div></div></div>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: card */
.card {
  width: 300px;
  height: 254px;
  background: lightgrey;
  overflow: hidden;
  display: flex;
}

.circles,
.browser {
  height: 30px;
  display: flex;
  align-items: center;
}

.circles {
  width: 20%;
  gap: 8px;
  padding: 10px;
}

.c {
  width: 09px;
  height: 9px;
  border-radius: 50%;
  box-shadow: inset 2px 2px 5px rgba(235, 235, 235, 0.356);
}

.c:first-child {
  background-color: red;
}

.c:nth-child(2) {
  background-color: rgb(204, 167, 4);
}

.c:last-child {
  background-color: green;
}

.browser {
  width: 80%;
  padding: 5px;
  display: flex;
  gap: 10px;
}

.chevrons {
  display: flex;
}

.search-bar {
  position: relative;
  border: 0.5px solid black;
  border-radius: 5px;
  padding: 5px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgb(88, 88, 88);
  box-shadow: inset 2px 2px 2px #05050525;
}

.search-bar svg {
  position: absolute;
  left: 10px;
}
</style>


================================================
FILE: Cards/boryanakrasteva_strong-cat-50.html
================================================
<div class="container">
  <div class="card">
    hover
  </div>
</div>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: glassmorphism, card */
.container {
  width: 190px;
  height: 254px;
  background: transparent;
  position: relative;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.438);
  overflow: hidden;
  border-radius: 10px;
}

.card {
  cursor: default;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #212121;
  background-color: rgba(255, 255, 255, 0.074);
  border: 1px solid rgba(255, 255, 255, 0.222);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 10px;
  transition: all ease .3s;
}

.container::after,
.container::before {
  width: 100px;
  height: 100px;
  content: '';
  position: absolute;
  border-radius: 50%;
  transition: .5s linear;
}

.container::after {
  top: -20px;
  left: -20px;
  background-color: rgba(125, 214, 66, 0.603);
  animation: animFirst 5s linear infinite;
}

.container::before {
  background-color: rgb(226, 223, 54);
  top: 70%;
  left: 70%;
  animation: animSecond 5s linear infinite;
  animation-delay: 3s;
}

.container:hover {
  box-shadow: 0px 0px 10px rgba(0, 77, 32, 0.432)
}

.container:hover::after {
  left: 80px;
  transform: scale(1.2);
}

.container:hover::before {
  left: -10px;
  transform: scale(1.2);
}
</style>


================================================
FILE: Cards/carlosepcc_dangerous-penguin-84.html
================================================
<!-- From Uiverse.io by carlosepcc - Tags: simple, card, dark, product, modern, price, liquid -->
 <div class="card m-auto text-gray-300 w-[clamp(260px,80%,300px)] hover:brightness-90 transition-all cursor-pointer group bg-gradient-to-tl from-gray-900 to-gray-950 hover:from-gray-800 hover:to-gray-950 border-r-2 border-t-2 border-gray-900 m-4 rounded-lg overflow-hidden relative">
      <div class="px-8 py-10">
        <div class="bg-orange-500 w-10 h-10 rounded-full rounded-tl-none mb-4 group-hover:-translate-y-1 group-hover:shadow-xl group-hover:shadow-red-900 transition-all"></div>
        <div class="uppercase font-bold text-xl">
          CHAMONILLE
        </div>
        <div class="text-gray-300 uppercase tracking-widest">
          NATURAL, OIL
        </div>
        <div class="text-gray-400 mt-8">
          <p class="font-bold">39.00 MLC</p>
          <p>Perfect everywhere</p>
        </div>
      </div>
      

      <div class="h-2 w-full bg-gradient-to-l via-yellow-500 group-hover:blur-xl blur-2xl m-auto rounded transition-all absolute bottom-0"></div>
      <div class="h-0.5 group-hover:w-full bg-gradient-to-l  via-yellow-950 group-hover:via-yellow-500 w-[70%] m-auto rounded transition-all"></div>
    </div>



================================================
FILE: Cards/catraco_bright-bird-12.html
================================================
<div class="card">
  <div class="card-title">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 36 36"
      height="20"
      width="20"
    >
      <path
        stroke-width="2"
        d="M34.4898 14.9959V23.1184C34.4898 31.2408 31.2408 34.4898 23.1184 34.4898H13.3714C5.24898 34.4898 2 31.2408 2 23.1184V13.3714C2 5.24898 5.24898 2 13.3714 2H21.4939"
      ></path>
      <path
        stroke-width="2"
        d="M34.4898 14.9959H27.9918C23.1184 14.9959 21.4939 13.3714 21.4939 8.49796V2L34.4898 14.9959Z"
      ></path>
      <path
        stroke-linejoin="round"
        stroke-width="2"
        d="M10.1224 19.8694H19.8694"
      ></path>
      <path
        stroke-linejoin="round"
        stroke-width="2"
        d="M10.1224 26.3673H16.6204"
      ></path>
    </svg>

    Caprese Salad
  </div>

  <div class="card-blocks">
    <div class="card-block">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 34 33"
        height="20"
        width="20"
      >
        <path
          d="M16.932 32.9048C7.97083 32.9048 0.687073 25.621 0.687073 16.6599C0.687073 7.69873 7.97083 0.41497 16.932 0.41497C25.8931 0.41497 33.1769 7.69873 33.1769 16.6599C33.1769 25.621 25.8931 32.9048 16.932 32.9048ZM16.932 2.6817C9.22509 2.6817 2.9538 8.95299 2.9538 16.6599C2.9538 24.3668 9.22509 30.638 16.932 30.638C24.6389 30.638 30.9101 24.3668 30.9101 16.6599C30.9101 8.95299 24.6389 2.6817 16.932 2.6817Z"
        ></path>
        <path
          d="M14.7854 22.0699C14.4832 22.0699 14.196 21.9491 13.9845 21.7375L9.70783 17.4609C9.2696 17.0227 9.2696 16.2973 9.70783 15.8591C10.1461 15.4209 10.8714 15.4209 11.3097 15.8591L14.7854 19.3348L22.5527 11.5674C22.9909 11.1292 23.7163 11.1292 24.1545 11.5674C24.5928 12.0057 24.5928 12.731 24.1545 13.1693L15.5863 21.7375C15.3747 21.9491 15.0876 22.0699 14.7854 22.0699Z"
        ></path>
      </svg>
      Fresh ripe tomatoes
    </div>
    <div class="card-block">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 34 33"
        height="20"
        width="20"
      >
        <path
          d="M16.932 32.9048C7.97083 32.9048 0.687073 25.621 0.687073 16.6599C0.687073 7.69873 7.97083 0.41497 16.932 0.41497C25.8931 0.41497 33.1769 7.69873 33.1769 16.6599C33.1769 25.621 25.8931 32.9048 16.932 32.9048ZM16.932 2.6817C9.22509 2.6817 2.9538 8.95299 2.9538 16.6599C2.9538 24.3668 9.22509 30.638 16.932 30.638C24.6389 30.638 30.9101 24.3668 30.9101 16.6599C30.9101 8.95299 24.6389 2.6817 16.932 2.6817Z"
        ></path>
        <path
          d="M14.7854 22.0699C14.4832 22.0699 14.196 21.9491 13.9845 21.7375L9.70783 17.4609C9.2696 17.0227 9.2696 16.2973 9.70783 15.8591C10.1461 15.4209 10.8714 15.4209 11.3097 15.8591L14.7854 19.3348L22.5527 11.5674C22.9909 11.1292 23.7163 11.1292 24.1545 11.5674C24.5928 12.0057 24.5928 12.731 24.1545 13.1693L15.5863 21.7375C15.3747 21.9491 15.0876 22.0699 14.7854 22.0699Z"
        ></path>
      </svg>
      Fresh mozzarella cheese
    </div>
    <div class="card-block">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 34 33"
        height="20"
        width="20"
      >
        <path
          d="M16.932 32.9048C7.97083 32.9048 0.687073 25.621 0.687073 16.6599C0.687073 7.69873 7.97083 0.41497 16.932 0.41497C25.8931 0.41497 33.1769 7.69873 33.1769 16.6599C33.1769 25.621 25.8931 32.9048 16.932 32.9048ZM16.932 2.6817C9.22509 2.6817 2.9538 8.95299 2.9538 16.6599C2.9538 24.3668 9.22509 30.638 16.932 30.638C24.6389 30.638 30.9101 24.3668 30.9101 16.6599C30.9101 8.95299 24.6389 2.6817 16.932 2.6817Z"
        ></path>
        <path
          d="M14.7854 22.0699C14.4832 22.0699 14.196 21.9491 13.9845 21.7375L9.70783 17.4609C9.2696 17.0227 9.2696 16.2973 9.70783 15.8591C10.1461 15.4209 10.8714 15.4209 11.3097 15.8591L14.7854 19.3348L22.5527 11.5674C22.9909 11.1292 23.7163 11.1292 24.1545 11.5674C24.5928 12.0057 24.5928 12.731 24.1545 13.1693L15.5863 21.7375C15.3747 21.9491 15.0876 22.0699 14.7854 22.0699Z"
        ></path>
      </svg>
      Fresh basil leaves
    </div>
    <div class="card-block">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 34 33"
        height="20"
        width="20"
      >
        <path
          d="M16.932 32.9048C7.97083 32.9048 0.687073 25.621 0.687073 16.6599C0.687073 7.69873 7.97083 0.41497 16.932 0.41497C25.8931 0.41497 33.1769 7.69873 33.1769 16.6599C33.1769 25.621 25.8931 32.9048 16.932 32.9048ZM16.932 2.6817C9.22509 2.6817 2.9538 8.95299 2.9538 16.6599C2.9538 24.3668 9.22509 30.638 16.932 30.638C24.6389 30.638 30.9101 24.3668 30.9101 16.6599C30.9101 8.95299 24.6389 2.6817 16.932 2.6817Z"
        ></path>
        <path
          d="M14.7854 22.0699C14.4832 22.0699 14.196 21.9491 13.9845 21.7375L9.70783 17.4609C9.2696 17.0227 9.2696 16.2973 9.70783 15.8591C10.1461 15.4209 10.8714 15.4209 11.3097 15.8591L14.7854 19.3348L22.5527 11.5674C22.9909 11.1292 23.7163 11.1292 24.1545 11.5674C24.5928 12.0057 24.5928 12.731 24.1545 13.1693L15.5863 21.7375C15.3747 21.9491 15.0876 22.0699 14.7854 22.0699Z"
        ></path>
      </svg>
      Extra virgin olive oil
    </div>
  </div>

  <div class="card-options">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 33 29"
      height="25"
      width="25"
    >
      <path
        d="M32.4898 3.52308V22.827C32.4898 24.4018 31.2072 25.8467 29.6324 26.0416L29.1291 26.1065C26.4665 26.4637 22.7161 27.5677 19.6963 28.8341C18.641 29.2724 17.4721 28.4769 17.4721 27.3242V4.74073C17.4721 4.14002 17.813 3.58802 18.3488 3.29578C21.3198 1.68848 25.8171 0.259766 28.8693 0H28.9667C30.915 0 32.4898 1.57483 32.4898 3.52308Z"
      ></path>
      <path
        d="M14.1573 3.29578C11.1862 1.68848 6.68898 0.259766 3.63673 0H3.52308C1.57483 0 0 1.57483 0 3.52308V22.827C0 24.4018 1.2826 25.8467 2.85743 26.0416L3.36072 26.1065C6.02333 26.4637 9.7737 27.5677 12.7935 28.8341C13.8488 29.2724 15.0178 28.4769 15.0178 27.3242V4.74073C15.0178 4.12379 14.6931 3.58802 14.1573 3.29578ZM4.88685 8.2151H8.53981C9.20546 8.2151 9.75747 8.76711 9.75747 9.43276C9.75747 10.1146 9.20546 10.6504 8.53981 10.6504H4.88685C4.2212 10.6504 3.6692 10.1146 3.6692 9.43276C3.6692 8.76711 4.2212 8.2151 4.88685 8.2151ZM9.75747 15.521H4.88685C4.2212 15.521 3.6692 14.9853 3.6692 14.3034C3.6692 13.6377 4.2212 13.0857 4.88685 13.0857H9.75747C10.4231 13.0857 10.9751 13.6377 10.9751 14.3034C10.9751 14.9853 10.4231 15.521 9.75747 15.521Z"
      ></path>
    </svg>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 33 33"
      height="25"
      width="25"
    >
      <path
        d="M17.6909 6.30132H5.05221C2.27431 6.30132 0 8.57563 0 11.3535V29.8079C0 32.1634 1.68949 33.1706 3.75261 32.0172L10.1369 28.4596C10.8192 28.0859 11.9239 28.0859 12.5899 28.4596L18.9742 32.0172C21.0536 33.1544 22.7431 32.1634 22.7431 29.8079V11.3535C22.7431 8.57563 20.4688 6.30132 17.6909 6.30132Z"
      ></path>
      <path
        d="M32.4898 5.05221V23.5066C32.4898 25.8621 30.8003 26.8531 28.7372 25.7159L25.6019 23.9615C25.342 23.8153 25.1795 23.5391 25.1795 23.2467V11.3553C25.1795 7.22905 21.8168 3.86632 17.6905 3.86632H11.0789C10.4778 3.86632 10.0554 3.23277 10.3316 2.71293C11.1763 1.10466 12.8658 0 14.7989 0H27.4376C30.2155 0 32.4898 2.27431 32.4898 5.05221Z"
      ></path>
    </svg>

    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 34 31"
      height="25"
      width="25"
    >
      <path
        d="M18.054 30.8433C17.476 31.0522 16.524 31.0522 15.946 30.8433C11.016 29.1191 0 21.9264 0 9.73538C0 4.35393 4.233 0 9.452 0C12.546 0 15.283 1.53258 17 3.90112C18.717 1.53258 21.471 0 24.548 0C29.767 0 34 4.35393 34 9.73538C34 21.9264 22.984 29.1191 18.054 30.8433Z"
      ></path>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by catraco - Tags: icon, 3d, gradient, card, card template, cool card, card animation, card hover */
.card {
  width: 280px;
  height: 200px;
  background-image: linear-gradient(45deg, #ffcdb2, #ffb4a2);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  border-radius: 1em;
  padding: 1em;
  position: relative;
  border-left: none;
  border-right: solid 6px #6d6875;
  border-bottom: solid 1px #6d6875;
  box-shadow: 5px 0px 10px #00000030;
  transition: 0.5s ease-in-out;
}

.card:hover {
  border-right: none;
  border-left: solid 6px #6d6875;
  box-shadow: -5px 0px 10px #00000030;
}

.card .card-title {
  font-size: 1em;
  font-weight: 600;
  color: #6d6875;
  stroke: #6d6875;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.card .card-block {
  font-size: 0.8em;
  font-weight: 300;
  color: #6d6875;
  fill: #6d6875;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0;
}

.card .card-options {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0%) rotate(5deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  fill: #ffcdb2;
  height: 80%;
  background-color: #6d6875;
  border-radius: 0 1em 1em 0;
  padding: 1em;
  gap: 1em;
  opacity: 0;
  transition: 0.5s;
}

.card:hover .card-options {
  opacity: 1;
  transform: translate(50%) rotate(0deg);
}

</style>


================================================
FILE: Cards/catraco_dry-bulldog-95.html
================================================
<!-- From Uiverse.io by catraco - Tags: form, card, light&dark, tailwind, feedback -->
<div class="bg-white border border-slate-200 grid grid-cols-6 gap-2 rounded-xl p-2 text-sm">
    <h1 class="text-center text-slate-200 text-xl font-bold col-span-6">Send Feedback</h1>
    <textarea placeholder="Your feedback..." class="bg-slate-100 text-slate-600 h-28 placeholder:text-slate-600 placeholder:opacity-50 border border-slate-200 col-span-6 resize-none outline-none rounded-lg p-2 duration-300 focus:border-slate-600"></textarea>
    <button class="fill-slate-600 col-span-1 flex justify-center items-center rounded-lg p-2 duration-300 bg-slate-100 hover:border-slate-600 focus:fill-blue-200 focus:bg-blue-400 border border-slate-200">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 512 512">
<path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm177.6 62.1C192.8 334.5 218.8 352 256 352s63.2-17.5 78.4-33.9c9-9.7 24.2-10.4 33.9-1.4s10.4 24.2 1.4 33.9c-22 23.8-60 49.4-113.6 49.4s-91.7-25.5-113.6-49.4c-9-9.7-8.4-24.9 1.4-33.9s24.9-8.4 33.9 1.4zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
</svg>
</button>
    <button class="fill-slate-600 col-span-1 flex justify-center items-center rounded-lg p-2 duration-300 bg-slate-100 hover:border-slate-600 focus:fill-blue-200 focus:bg-blue-400 border border-slate-200">
            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 512 512">
<path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM174.6 384.1c-4.5 12.5-18.2 18.9-30.7 14.4s-18.9-18.2-14.4-30.7C146.9 319.4 198.9 288 256 288s109.1 31.4 126.6 79.9c4.5 12.5-2 26.2-14.4 30.7s-26.2-2-30.7-14.4C328.2 358.5 297.2 336 256 336s-72.2 22.5-81.4 48.1zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path></svg>
        </button>
    <span class="col-span-2"></span>
    <button class="bg-slate-100 stroke-slate-600 border border-slate-200 col-span-2 flex justify-center rounded-lg p-2 duration-300 hover:border-slate-600 hover:text-white focus:stroke-blue-200 focus:bg-blue-400">
            <svg fill="none" viewBox="0 0 24 24" height="30px" width="30px" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M7.39999 6.32003L15.89 3.49003C19.7 2.22003 21.77 4.30003 20.51 8.11003L17.68 16.6C15.78 22.31 12.66 22.31 10.76 16.6L9.91999 14.08L7.39999 13.24C1.68999 11.34 1.68999 8.23003 7.39999 6.32003Z"></path>
                <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M10.11 13.6501L13.69 10.0601"></path>
            </svg>
        </button>

</div>



================================================
FILE: Cards/catraco_proud-otter-3.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by catraco - Tags: simple, card, light&dark */
.one-div {
  --dark: #3a7aba;
  --light: #50a5f5;
  --low-light: #50ccf5;
  background-color: var(--light);
  background: linear-gradient(-45deg, var(--light), var(--low-light));
  box-shadow: 5px 5px 0 white, 10px 10px 0 var(--dark);
  border-right: 5px solid var(--dark);
  border-bottom: 5px solid var(--dark);
  border-radius: .5rem 2rem .5rem .5rem;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}

.one-div::after {
  content: "NOTE BOOK";
  color: var(--dark);
  font-weight: 600;
  border-radius: .5rem;
  padding: .5rem 1rem;
  margin-top: 2rem;
  background-color: white;
  letter-spacing: 1px;
  z-index: 50;
}

.one-div::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  border-left: 2px solid white;
  height: 10%;
}
</style>


================================================
FILE: Cards/catraco_spotty-rattlesnake-5.html
================================================
<!-- From Uiverse.io by catraco - Tags: card, light, tailwind, tailwind css -->
<div class="w-60 bg-gradient-to-l from-slate-300 to-slate-100 text-slate-600 border border-slate-300 grid grid-col-2 justify-center p-4 gap-4 rounded-lg shadow-md">
  <div class="col-span-2 text-lg font-bold capitalize rounded-md">
    card title
  </div>
  <div class="col-span-2 rounded-md">
    Using Lorem ipsum to focus attention on graphic elements in a webpage design proposal · One of the earliest examples
    of the Lorem ipsum placeholder text on 1960s advertising...
  </div>
  <div class="col-span-1">
    <button class="rounded-md bg-slate-300 hover:bg-slate-600 hover:text-slate-200 duration-300 p-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
        <polyline points="15 3 21 3 21 9"></polyline>
        <line x1="10" y1="14" x2="21" y2="3"></line>
      </svg>
    </button>
  </div>
  

  </div>



================================================
FILE: Cards/catraco_unlucky-bat-4.html
================================================
<div class="card">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <div>
    <svg class="check" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
      
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path>
    </svg>
    <strong>Card Title</strong>
    <p>Using Lorem ipsum to focus attention on graphic elements in a webpage design proposal · </p>
    <hr>
    <button>
      Action
      <svg class="arrow" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
      <path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"></path>
      </svg>
      </button>
  </div>
</div>
<style>
/* From Uiverse.io by catraco - Tags: card, animated */
.card {
  --card-color: #0080ff;
  --blub-color: #52d4eb;
  position: relative;
  user-select: none;
}

@keyframes keyframes-rotate-blubs {
  0% {
    transform: translate(10px) rotate(360deg);
  }

  50% {
    transform: translate(-5px, 10px) rotate(180deg);
  }

  100% {
    transform: translate(10px) rotate(0deg);
  }
}

.card span {
  width: 100px;
  height: 100px;
  position: absolute;
  background: linear-gradient(0deg, transparent, var(--blub-color));
  border-radius: 100%;
  opacity: 0.5;
  animation: keyframes-rotate-blubs 4s infinite linear;
}

.card span:nth-child(1) {
  top: -5%;
  left: -5%;
  width: 60px;
  height: 60px;
  animation-delay: .1s;
  opacity: 0.3;
}

.card span:nth-child(2) {
  top: 60%;
  left: -20%;
  width: 80px;
  height: 80px;
  animation-delay: .2s;
  opacity: 0.3;
}

.card span:nth-child(3) {
  top: 10%;
  left: 60%;
  animation-delay: .3s;
  opacity: 0.6;
}

.card span:nth-child(4) {
  top: 70%;
  left: 50%;
  width: 90px;
  height: 90px;
  animation-delay: .4s;
  opacity: 0.4;
}

.card div {
  backdrop-filter: blur(15px);
  outline: 1px solid var(--card-color);
  color: var(--card-color);
  width: 180px;
  height: 250px;
  border-radius: 5%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card div .check {
  fill: var(--card-color);
  width: 25px;
  height: 25px;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

.card div strong {
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
}

.card div p {
  font-size: 0.8rem;
}

.card div hr {
  border: none;
  border-top: 1px solid var(--card-color);
  opacity: .5;
}

.card div button {
  background-color: transparent;
  color: var(--card-color);
  border: none;
  outline: 1px solid var(--card-color);
  border-radius: 1rem;
  padding: .5rem 1rem;
  font-size: 0.8rem;
  font-weight: 900;
  transition: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  gap: .2em;
}

.card div button .arrow {
  width: 0px;
  height: 20px;
  fill: var(--blub-color);
  transform: scale(0);
  transition: .3s;
}

.card div button:hover .arrow {
  width: 20px;
  margin-left: 1em;
  transform: scale(1);
}

.card div button:hover {
  background-color: var(--card-color);
  color: var(--blub-color);
  cursor: pointer;
}
</style>


================================================
FILE: Cards/chethan025_lovely-warthog-68.html
================================================
<div class="card">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 409 436" height="130" width="130">
<path fill="#C28F2B" d="M25.29 133.28C9.63001 161.66 0.720001 194.16 0.720001 228.72C0.720001 263.28 9.63001 295.81 25.29 324.19V133.28Z"></path>
<path fill="#C28F2B" d="M204.72 28.1802C188.17 28.1802 172.11 30.1802 156.7 33.8102V65.3702C171.96 61.0702 188.05 58.7102 204.72 58.7102C300.22 58.7102 377.65 134.59 377.65 228.21C377.65 270.37 361.9 308.93 335.91 338.59L330.98 355.89L320.07 394.18C373.61 358.04 408.75 297.43 408.75 228.77C408.72 117.96 317.39 28.1802 204.72 28.1802Z"></path>
<path fill="#C28F2B" d="M156.7 332.8H313.17H316.59C343.07 305.6 359.38 268.77 359.38 228.21C359.38 144.49 290.15 76.6401 204.73 76.6401C187.96 76.6401 171.84 79.3101 156.71 84.1201V332.8H156.7Z"></path>
<path fill="#C28F2B" d="M138.2 0.680176H21.8L43.78 45.5402V391.05L21.8 435.88H288.93L313.16 350.98H138.2V0.680176Z"></path>
</svg>
  <p class="text">League of legends
</p></div>

<style>
/* From Uiverse.io by chethan025 - Tags: white, card, hover effect */
.card {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  background: rgba(65, 21, 115, 1);
  box-shadow: 0px 145px 58px rgba(233, 182, 27, 0.01),
    0px 82px 49px rgba(233, 182, 27, 0.05), 
    0px 36px 36px rgba(233, 182, 27, 0.09), 
    0px 9px 20px rgba(233, 182, 27, 0.1), 
    0px 0px 0px rgba(233, 182, 27, 0.1);
  width: 254px;
  height: 254px;
  margin: 40px;
  border-radius: 28px;
  position: relative;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-size: 42px;
  line-height: 28px;
  color: #41157300;
  letter-spacing: 0.1em;
  transition: 300ms ease-in;
}

.card:hover {
  background: rgba(233, 182, 27, 1);
  box-shadow: 0px 112px 45px rgba(65, 21, 115, 0.01), 
    0px 63px 38px rgba(65, 21, 115, 0.05), 
    0px 28px 28px rgba(65, 21, 115, 0.09), 
    0px 7px 15px rgba(65, 21, 115, 0.1), 
    0px 0px 0px rgba(65, 21, 115, 0.1);
  color: #FFFFFF;
}

.svg {
  opacity: 80%;
}

.text {
  margin: auto;
  position: absolute;
}
</style>


================================================
FILE: Cards/codebykay101_red-fox-31.html
================================================
<div class="container">
  <div class="loader" style="--clr:#01e100;--i:1;"></div>
  <div class="loader" style="--clr:#f50076;--i:2;"></div>
  <div class="loader" style="--clr:#00e6fd;--i:3;"></div>
</div>

<style>
/* From Uiverse.io by codebykay101  - Tags: simple, card, neon, cool card, cardhover , card animation, card hover */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.loader {
  position: relative;
  width: 150px;
  height: 150px;
  background: rgba(45, 45, 45, 1);
  overflow: hidden;
  transform: rotate(calc(90deg * var(--i)));
}

.loader::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(var(--clr), transparent);
  animation: animate 1.5s linear infinite;
}

.loader::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: rgba(45, 45, 45, 0.9);
}

@keyframes animate {
  0% {
    transform: translate(-150px, -150px);
  }
  25% {
    transform: translate(0px, -150px);
  }
  50% {
    transform: translate(0px, 0px);
  }
  75% {
    transform: translate(-150px, 0px);
  }
  100% {
    transform: translate(-150px, -150px);
  }
}

</style>
    

================================================
FILE: Cards/codebykay101_ugly-lion-23.html
================================================
<div class="container">
  <div data-text="Github" style="--r:-15;" class="glass">
    <svg viewBox="0 0 496 512" height="1em" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
      ></path>
    </svg>
  </div>
  <div data-text="Code" style="--r:5;" class="glass">
    <svg viewBox="0 0 640 512" height="1em" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"
      ></path>
    </svg>
  </div>
  <div data-text="Earn" style="--r:25;" class="glass">
    <svg viewBox="0 0 576 512" height="1em" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm64 320H64V320c35.3 0 64 28.7 64 64zM64 192V128h64c0 35.3-28.7 64-64 64zM448 384c0-35.3 28.7-64 64-64v64H448zm64-192c-35.3 0-64-28.7-64-64h64v64zM288 160a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"
      ></path>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by codebykay101  - Tags: simple, card, hover, clean, card template, cool card, card hover */
.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .glass {
  position: relative;
  width: 180px;
  height: 200px;
  background: linear-gradient(#fff2, transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  border-radius: 10px;
  margin: 0 -45px;
  backdrop-filter: blur(10px);
  transform: rotate(calc(var(--r) * 1deg));
}

.container:hover .glass {
  transform: rotate(0deg);
  margin: 0 10px;
}

.container .glass::before {
  content: attr(data-text);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.container .glass svg {
  font-size: 2.5em;
  fill: #fff;
}

</style>
    

================================================
FILE: Cards/csemszepp_tiny-firefox-14.html
================================================
<div class="container">
  <div class="cube">
    <div style="--x:-1; --y:0;">
      <span style="--i:3;"></span>
      <span style="--i:2;"></span>
      <span style="--i:1;"></span>
    </div>
    <div style="--x:0; --y:0;">
      <span style="--i:3;"></span>
      <span style="--i:2;"></span>
      <span style="--i:1;"></span>
    </div>
    <div style="--x:1; --y:0;">
      <span style="--i:3;"></span>
      <span style="--i:2;"></span>
      <span style="--i:1;"></span>
    </div>
  </div>
  <div class="cube">
    <div style="--x:-1; --y:0;">
      <span style="--i:3;"></span>
      <span style="--i:2;"></span>
      <span style="--i:1;"></span>
    </div>
    <div style="--x:0; --y:0;">
      <span style="--i:3;"></span>
      <span style="--i:2;"></span>
      <span style="--i:1;"></span>
    </div>
    <div style="--x:1; --y:0;">
      <span style="--i:3;"></span>
      <span style="--i:2;"></span>
      <span style="--i:1;"></span>
    </div>
  </div>
  <div class="cube">
    <div style="--x:-1; --y:0;">
      <span style="--i:3;"></span>
      <span style="--i:2;"></span>
      <span style="--i:1;"></span>
    </div>
    <div style="--x:0; --y:0;">
      <span style="--i:3;"></span>
      <span style="--i:2;"></span>
      <span style="--i:1;"></span>
    </div>
    <div style="--x:1; --y:0;">
      <span style="--i:3;"></span>
      <span style="--i:2;"></span>
      <span style="--i:1;"></span>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by csemszepp  - Website: https://codepen.io/gvissing/pen/QWBrzdB - Name: Greg Vissing - Tags: 3d, cube, fun */
@keyframes animate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.container {
  position: relative;
  top: -80px;
  transform: skewY(-20deg);
  animation: animate 5s linear infinite;
  .cube {
    position: relative;
    z-index: 2;
    &:nth-child(2) {
      z-index: 1;
      translate: -60px -60px;
    }
    &:nth-child(3) {
      z-index: 3;
      translate: 60px 60px;
    }
    div {
      position: absolute;
      display: flex;
      flex-direction: column;
      gap: 30px;
      translate: calc(-70px * var(--x)) calc(-60px * var(--y));
      span {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 50px;
        background: #dcdcdc;
        z-index: calc(1 * var(--i));
        transition: 1.5s;
        &:hover {
          transition: 0s;
          background: #ef4149;
          filter: drop-shadow(0 0 30px #ef4149);
          &:before,
          &:after {
            transition: 0s;
            background: #ef4149;
          }
        }
        &:before {
          content: "";
          position: absolute;
          left: -40px;
          width: 40px;
          height: 100%;
          background: #fff;
          transform-origin: right;
          transform: skewY(45deg);
          transition: 1.5s;
        }
        &:after {
          content: "";
          position: absolute;
          top: -40px;
          left: 0px;
          width: 100%;
          height: 40px;
          background: #f2f2f2;
          transform-origin: bottom;
          transform: skewX(45deg);
          transition: 1.5s;
        }
      }
    }
  }
}

</style>
    

================================================
FILE: Cards/csozidev_bad-chipmunk-3.html
================================================
<div class="card"></div>
<style>
/* From Uiverse.io by csozidev - Tags: simple, card, hover, dark, glow, hover effect, advanced, hoverme */
/* glowing hover card made by: csozi | Website: english.csozi.hu*/

.card {
  position: relative;
  width: 190px;
  height: 254px;
  background: rgb(255, 0, 179);
  background: linear-gradient(137deg, rgb(255, 0, 179) 0%, rgba(0,212,255,1) 100%);
  transition: 0.3s ease;
  border-radius: 30px;
  filter: drop-shadow(0px 0px 30px rgba(209, 38, 197, 0.5));
}

.card::after {
  content: '';
  background-color: #181818;
  position: absolute;
  z-index: 1;
  transition: 0.3s ease;
  height: 98%;
  width: 98%;
  top: 1%;
  left: 1%;
  border-radius: 28px;
}

.card:hover {
  filter: drop-shadow(0px 0px 30px rgba(209, 38, 197, 1));
}
</style>


================================================
FILE: Cards/csozidev_neat-jellyfish-86.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by csozidev - Tags: card */
/* CSS Challange card made by: csozi | Website: www.csozi.hu*/

.card {
  background-color: #161617;
  height: 290px;
  width: 230px;
  position: relative;
  padding: 10px;
  padding-top: 10px;
  border-radius: 20px;
}

.card::before {
  content: '';
  background: linear-gradient(233deg, #091296, #580aab, #9e45af, #e54dd3);
  height: 298px;
  width: 238px;
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: -1;
  border-radius: 24px;
}

.heading {
  line-height: 10px;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  color: white;
}

.heading span {
  position: relative;
  top: 22px;
  font-size: 50px;
  font-weight: bolder;
  background: linear-gradient(233deg, #091296, #580aab, #9e45af, #e54dd3);
  background-size: 400% 400%;
  animation: galaxy_background 7s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 10;
}

.heading span::after {
  content: 'Galaxy';
  position: absolute;
  padding-top: 20px;
  translate: 0px -19px;
  left: 0;
  top: 25px;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffffff 1px, transparent 0);
  background-size: 15px 20px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: rgba(0, 0, 0, 0);
  animation: infinite galaxy_bg_dots 3s linear;
  pointer-events: none;
}

.item {
  color: white;
  font-weight: bold;
  width: fit-content;
  height: fit-content;
  position: absolute;
  transition: 0.2s;
  cursor: pointer;
}

.item--create:hover {
  color: #9e45af;
}

.item--post:hover {
  color: #580aab;
}

.item--inspire:hover {
  color: #e54dd3;
}

.item svg {
}

.item--create {
  top: 80px;
  left: 15px;
  rotate: -5deg;
}

.item--create::before {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  top: 25px;
  left: 80px;
  animation: infinite dots 3.5s;
  animation-delay: 0s;
  scale: 0;
  opacity: 0;
}

.item--create::after {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  top: 40px;
  left: 95px;
  animation: infinite dots 3.5s;
  animation-delay: 0.5s;
  scale: 0;
  opacity: 0;
}

.item--post {
  top: 130px;
  right: 20px;
  rotate: 6deg;
}

.item--post::before {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  bottom: 25px;
  right: 70px;
  animation: infinite dots 3.5s;
  animation-delay: 1s;
  scale: 0;
  opacity: 0;
}

.item--post::after {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  top: 30px;
  right: 55px;
  animation: infinite dots 3.5s;
  animation-delay: 1.5s;
  scale: 0;
  opacity: 0;
}

.item--inspire {
  top: 180px;
  left: 20px;
  rotate: -3deg;
}

.item--inspire::before {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  bottom: 27px;
  left: 110px;
  animation: infinite dots 3.5s;
  animation-delay: 2s;
  scale: 0;
  opacity: 0;
}

.item--inspire::after {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  bottom: 20px;
  left: 90px;
  animation: infinite dots 3.5s;
  animation-delay: 2.5s;
  scale: 0;
  opacity: 0;
}

.item span {
  position: relative;
  bottom: 5px;
}

.card button {
  position: absolute;
  bottom: 10px;
  width: calc(100% - 20px);
  height: 50px;
  border-radius: 10px;
  background-color: #323232;
  background-image: linear-gradient(27deg, #323232 40%, #091296 50%, #580aab 65%, #9e45af 80%, #e54dd3 100%);
  background-size: 400% 400%;
  background-position: 0%;
  transition: 0.3s ease-in-out;
  border: none;
  color: white;
  font-size: 22px;
  font-weight: bolder;
  cursor: pointer;
}

.card button:hover {
  background-position: 100% 100%;
  translate: 0px -2px;
}

@keyframes dots {
  0% {
    scale: 0;
    opacity: 0;
  }

  25% {
    scale: 1.4;
    opacity: 1;
  }

  90% {
    scale: 0;
    opacity: 0;
  }

  100% {
    scale: 0;
    opacity: 0;
  }
}

@keyframes galaxy_background {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@keyframes galaxy_bg_dots {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -100px 100px;
  }
}
</style>


================================================
FILE: Cards/csozidev_rare-quail-42.html
================================================
<div class="card">
  <div class="top">
  <div class="pfp">
    <div class="playing">
      <div class="greenline line-1"></div>
      <div class="greenline line-2"></div>
      <div class="greenline line-3"></div>
      <div class="greenline line-4"></div>
      <div class="greenline line-5"></div>
    </div>
  </div>
  <div class="texts">
  <p class="title-1">Soldiers Rage</p>
  <p class="title-2">Tha Mechanic</p>
  </div>
  </div>
  
  <div class="controls">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="20" width="24" class="volume_button">
  <path clip-rule="evenodd" d="M11.26 3.691A1.2 1.2 0 0 1 12 4.8v14.4a1.199 1.199 0 0 1-2.048.848L5.503 15.6H2.4a1.2 1.2 0 0 1-1.2-1.2V9.6a1.2 1.2 0 0 1 1.2-1.2h3.103l4.449-4.448a1.2 1.2 0 0 1 1.308-.26Zm6.328-.176a1.2 1.2 0 0 1 1.697 0A11.967 11.967 0 0 1 22.8 12a11.966 11.966 0 0 1-3.515 8.485 1.2 1.2 0 0 1-1.697-1.697A9.563 9.563 0 0 0 20.4 12a9.565 9.565 0 0 0-2.812-6.788 1.2 1.2 0 0 1 0-1.697Zm-3.394 3.393a1.2 1.2 0 0 1 1.698 0A7.178 7.178 0 0 1 18 12a7.18 7.18 0 0 1-2.108 5.092 1.2 1.2 0 1 1-1.698-1.698A4.782 4.782 0 0 0 15.6 12a4.78 4.78 0 0 0-1.406-3.394 1.2 1.2 0 0 1 0-1.698Z" fill-rule="evenodd"></path>
    </svg>
    <div class="volume">
      <div class="slider">
        <div class="green"></div>
      </div>
      <div class="circle"></div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="24" width="24">
  <path clip-rule="evenodd" d="M12 21.6a9.6 9.6 0 1 0 0-19.2 9.6 9.6 0 0 0 0 19.2Zm.848-12.352a1.2 1.2 0 0 0-1.696-1.696l-3.6 3.6a1.2 1.2 0 0 0 0 1.696l3.6 3.6a1.2 1.2 0 0 0 1.696-1.696L11.297 13.2H15.6a1.2 1.2 0 1 0 0-2.4h-4.303l1.551-1.552Z" fill-rule="evenodd"></path>
</svg>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="24" width="24">
  <path clip-rule="evenodd" d="M21.6 12a9.6 9.6 0 1 1-19.2 0 9.6 9.6 0 0 1 19.2 0ZM8.4 9.6a1.2 1.2 0 1 1 2.4 0v4.8a1.2 1.2 0 1 1-2.4 0V9.6Zm6-1.2a1.2 1.2 0 0 0-1.2 1.2v4.8a1.2 1.2 0 1 0 2.4 0V9.6a1.2 1.2 0 0 0-1.2-1.2Z" fill-rule="evenodd"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="24" width="24">
  <path clip-rule="evenodd" d="M12 21.6a9.6 9.6 0 1 0 0-19.2 9.6 9.6 0 0 0 0 19.2Zm4.448-10.448-3.6-3.6a1.2 1.2 0 0 0-1.696 1.696l1.551 1.552H8.4a1.2 1.2 0 1 0 0 2.4h4.303l-1.551 1.552a1.2 1.2 0 1 0 1.696 1.696l3.6-3.6a1.2 1.2 0 0 0 0-1.696Z" fill-rule="evenodd"></path>
</svg>
<div class="air"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none" height="20" width="24">
  <path d="M3.343 7.778a4.5 4.5 0 0 1 7.339-1.46L12 7.636l1.318-1.318a4.5 4.5 0 1 1 6.364 6.364L12 20.364l-7.682-7.682a4.501 4.501 0 0 1-.975-4.904Z"></path>
</svg>
  </div>
  <div class="time">
    <div class="elapsed"></div>
  </div>
  <p class="timetext time_now">1:31</p>
  <p class="timetext time_full">3:46</p>
</div>
<style>
/* From Uiverse.io by csozidev - Tags: simple, animation, card, hover, spotify, animated */
/* Spotify music card made by: csozi | Website: www.csozi.hu*/

.card {
  position: relative;
  width: 250px;
  height: 120px;
  background: #191414;
  border-radius: 10px;
  padding: 10px;
}

.top {
  position: relative;
  width: 100%;
  display: flex;
  gap: 10px;
}

.pfp {
  position: relative;
  top: 5px;
  left: 5px;
  height: 40px;
  width: 40px;
  background-color: #d2d2d2;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-1 {
  color: white;
  font-size: 25px;
  font-weight: bolder;
}

.title-2 {
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.time {
  width: 90%;
  background-color: #5e5e5e;
  height: 6px;
  border-radius: 3px;
  position: absolute;
  left: 5%;
  bottom: 22px;
}

.elapsed {
  width: 42%;
  background-color: #1db954;
  height: 100%;
  border-radius: 3px;
}

.controls {
  color: white;
  display: flex;
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  justify-content: center;
}

.volume {
  height: 100%;
  width: 48px;
}

.air {
  height: 100%;
  width: 48px;
}

.controls svg {
  cursor: pointer;
  transition: 0.1s;
}

.controls svg:hover {
  color: #1db954;
}

.volume {
  opacity: 0;
  position: relative;
  transition: 0.2s;
}

.volume .slider {
  height: 4px;
  background-color: #5e5e5e;
  width: 80%;
  border-radius: 2px;
  margin-top: 8px;
  margin-left: 10%;
}

.volume .slider .green {
  background-color: #1db954;
  height: 100%;
  width: 80%;
  border-radius: 3px;
}

.volume .circle {
  background-color: white;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  position: absolute;
  right: 20%;
  top: 60%;
}

.volume_button:hover ~ .volume {
  opacity: 1;
}

.timetext {
  color: white;
  font-size: 8px;
  position: absolute;
}

.time_now {
  bottom: 11px;
  left: 10px;
}

.time_full {
  bottom: 11px;
  right: 10px;
}

.playing {
  display: flex;
  position: relative;
  justify-content: center;
  gap: 1px;
  width: 30px;
  height: 20px;
}

.greenline {
  background-color: #1db954;
  height: 20px;
  width: 2px;
  position: relative;
  transform-origin: bottom;
}

.line-1 {
  animation: infinite playing 1s ease-in-out;
  animation-delay: 0.2s;
}

.line-2 {
  animation: infinite playing 1s ease-in-out;
  animation-delay: 0.5s;
}

.line-3 {
  animation: infinite playing 1s ease-in-out;
  animation-delay: 0.6s;
}

.line-4 {
  animation: infinite playing 1s ease-in-out;
  animation-delay: 0s;
}

.line-5 {
  animation: infinite playing 1s ease-in-out;
  animation-delay: 0.4s;
}

@keyframes playing {
  0% {
    transform: scaleY(0.1);
  }

  33% {
    transform: scaleY(0.6);
  }

  66% {
    transform: scaleY(0.9);
  }

  100% {
    transform: scaleY(0.1);
  }
}
</style>


================================================
FILE: Cards/csozidev_ugly-lionfish-97.html
================================================
<div class="card">
  <p class="title1">#49</p>
  <p class="title2">creator on</p>
  <p class="title2">uiverse.io</p>
<svg class="svg" xmlns="http://www.w3.org/2000/svg" width="94" height="94" viewBox="0 0 94 94" fill="none">
<path d="M38.0481 4.82927C38.0481 2.16214 40.018 0 42.4481 0H51.2391C53.6692 0 55.6391 2.16214 55.6391 4.82927V40.1401C55.6391 48.8912 53.2343 55.6657 48.4248 60.4636C43.6153 65.2277 36.7304 67.6098 27.7701 67.6098C18.8099 67.6098 11.925 65.2953 7.11548 60.6663C2.37183 56.0036 3.8147e-06 49.2967 3.8147e-06 40.5456V4.82927C3.8147e-06 2.16213 1.96995 0 4.4 0H13.2405C15.6705 0 17.6405 2.16214 17.6405 4.82927V39.1265C17.6405 43.7892 18.4805 47.2018 20.1605 49.3642C21.8735 51.5267 24.4759 52.6079 27.9678 52.6079C31.4596 52.6079 34.0127 51.5436 35.6268 49.4149C37.241 47.2863 38.0481 43.8399 38.0481 39.0758V4.82927Z" fill="url(#paint0_linear_501_142)"></path>
<path d="M86.9 61.8682C86.9 64.5353 84.9301 66.6975 82.5 66.6975H73.6595C71.2295 66.6975 69.2595 64.5353 69.2595 61.8682V4.82927C69.2595 2.16214 71.2295 0 73.6595 0H82.5C84.9301 0 86.9 2.16214 86.9 4.82927V61.8682Z" fill="url(#paint1_linear_501_142)"></path>
<path d="M2.86102e-06 83.2195C2.86102e-06 80.5524 1.96995 78.3902 4.4 78.3902H83.6C86.0301 78.3902 88 80.5524 88 83.2195V89.1707C88 91.8379 86.0301 94 83.6 94H4.4C1.96995 94 0 91.8379 0 89.1707L2.86102e-06 83.2195Z" fill="url(#paint2_linear_501_142)"></path>
<defs>
<linearGradient id="paint0_linear_501_142" x1="0" y1="0" x2="96.1684" y2="87.6201" gradientUnits="userSpaceOnUse">
<stop stop-color="#BF66FF"></stop>
<stop offset="0.510417" stop-color="#6248FF"></stop>
<stop offset="1" stop-color="#00DDEB"></stop>
</linearGradient>
<linearGradient id="paint1_linear_501_142" x1="0" y1="0" x2="96.1684" y2="87.6201" gradientUnits="userSpaceOnUse">
<stop stop-color="#BF66FF"></stop>
<stop offset="0.510417" stop-color="#6248FF"></stop>
<stop offset="1" stop-color="#00DDEB"></stop>
</linearGradient>
<linearGradient id="paint2_linear_501_142" x1="0" y1="0" x2="96.1684" y2="87.6201" gradientUnits="userSpaceOnUse">
<stop stop-color="#BF66FF"></stop>
<stop offset="0.510417" stop-color="#6248FF"></stop>
<stop offset="1" stop-color="#00DDEB"></stop>
</linearGradient>
</defs>
</svg>
</div>
<style>
/* From Uiverse.io by csozidev - Tags: simple, card, hover, uiverse */
/* UIverse rank card made by: csozi | Website: www.csozi.hu*/

.card {
  position: relative;
  width: 280px;
  height: 130px;
  background: rgb(23,23,23);
  border-radius: 20px;
  padding: 20px;
  padding-left: 130px;
  transition: 0.3s;
}

.card:hover {
  filter: drop-shadow(5px 5px 0px rgb(185,100,255))
  drop-shadow(5px 5px 0px rgb(103,74,255))
  drop-shadow(5px 5px 0px rgb(12,204,238));
  scale: 1.05;
}

.svg {
  position: absolute;
  top: 18px;
  left: 18px;
}

.title1 {
  color: white;
  font-weight: bolder;
  font-size: 50px;
  line-height: 40px;
}

.title2 {
  color: white;
  font-weight: bolder;
  font-size: 24px;
  line-height: 22px;
}
</style>


================================================
FILE: Cards/david-mohseni_black-bobcat-14.html
================================================
<div class="flip">
    <div class="content">
        <div class="front">
            <h2>Front</h2>
            <p>Front Description</p>
        </div>
        <div class="back">
            <h2>Back</h2>
            <p>Back Description</p>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by david-mohseni - Tags: card */
.flip {
  box-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
  padding: 1em;
  width: 190px;
  height: 254px;
  transform-style: preserve-3d;
  transition: 3s ease;
}

.flip:hover {
  transform: rotateY(180deg);
}
/* Content */
.flip .content {
  transform-style: preserve-3d;
}

.flip .back, .flip .front {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}

.flip .back {
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.flip h2,
.flip p {
  transform: translateZ(90px);
  text-shadow: 0 0 3px black;
  text-align: center;
}

.flip h2 {
  font-size: 3em;
  color: #fff;
  letter-spacing: 1px;
}

.flip p {
  font-size: 1em;
  color: #eee;
  line-height: 1.6em;
}

.flip::before,
.flip::after {
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-image: linear-gradient(purple, red);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: rotateY(180deg)translateZ(1px);
}

.flip::before {
  transform: none;
  background-image: linear-gradient(violet, orange);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>


================================================
FILE: Cards/david-mohseni_swift-penguin-38.html
================================================
<div class="card">
    <div class="icon">
    </div>

    <div class="content">
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur </p>
    </div>
</div>
<style>
/* From Uiverse.io by david-mohseni - Tags: neumorphism, card */
.card {
  width: 190px;
  height: 120px;
  background-color: #eee;
  text-align: center;
  border: 10px solid #eee;
  border-radius: 20px;
  box-shadow: inset 5px 5px 10px #bbb, inset -5px -5px 10px #fff;
  transition: 0.5s;
}

.card:hover {
  height: 254px;
}

.icon {
  width: 60px;
  height: 60px;
  color: red;
  font-size: 30px;
  background-color: #eee;
  margin: 20px auto;
  padding: 5px;
  border-radius: 50%;
  box-shadow: 8px 8px 10px #ddd, -8px -8px 10px #fff;
}

.content {
  color: #999;
  background-color: #eee;
  padding: 10px;
  margin: 5px 20px;
  border-radius: 8px;
  box-shadow: 8px 8px 10px #ddd, -8px -8px 10px #fff;
  transform: translateY(-80px) scale(0);
  transition: all 0.5s;
}

.card:hover .content {
  transform: translateY(0) scale(1)
}

.content h3 {
  text-shadow: 2px 2px 0px #fff;
}
</style>


================================================
FILE: Cards/david-mohseni_witty-kangaroo-75.html
================================================
<div class="container">
    <div class="card">
        <span>Hover me</span>
    </div>
    <div class="card">
        <span>Hover me</span>
    </div>
    <div class="card">
        <span>Hover me</span>
    </div>
</div>
<style>
/* From Uiverse.io by david-mohseni - Tags: card */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px;
}

.card {
  margin: 2%;
  background: #DBBDBD;
  width: 70px;
  height: 100px;
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  transition: .2s all;
  cursor: pointer;
  align-items: center;
  text-align: center;
  font-size: 13px;
  padding-top: 30px;
}

.card > span {
  display: block;
  margin: auto;
  max-width: 40px;
}

.container:hover .card {
  filter: blur(3px);
  opacity: .5;
  transform: scale(.98);
  box-shadow: none;
}

.container:hover .card:hover {
  transform: scale(1);
  filter: blur(0px);
  opacity: 1;
  box-shadow: 0 8px 20px 0px rgba(0, 0, 0, 0.125);
  background: #A82C2C;
  color: white;
}
</style>


================================================
FILE: Cards/david-mohseni_young-frog-89.html
================================================
<div class="face">
    <p class="v-index">II
    </p>
    <p class="h-index">II
    </p>
    <div class="hand">
        <div class="hand">
            <div class="hour"></div>
            <div class="minute"></div>
            <div class="second"></div>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by david-mohseni - Tags: skeuomorphism, card, realistic, clock */
.face {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  outline: 10px solid #333;
  background: repeating-radial-gradient(circle at 50% 50%, 
  rgba(200,200,200,.2) 0%, rgba(200,200,200,.2) 2%, 
  transparent 2%, transparent 3%, rgba(200,200,200,.2) 3%, 
  transparent 3%), conic-gradient(white 0%, silver 10%, 
  white 35%, silver 45%, white 60%, silver 70%, 
  white 80%, silver 95%, white 100%);
  box-shadow: inset 0 0 20px #0007;
}

.hour {
  position: absolute;
  width: 5px;
  height: 60px;
  background: #aaa;
  left: 87.5px;
  top: 43px;
  border-radius: 3px 3px 1px 1px;
  transform-origin: 2px 47px;
  box-shadow: 0 0 5px #0005,inset 1.5px 3px 0px #333, inset -1.5px -3px 0px #333;
  z-index: 1;
  animation: watch 43200s linear infinite;
}

.minute {
  position: absolute;
  width: 4px;
  height: 78px;
  background: #aaa;
  left: 88px;
  top: 25px;
  border-radius: 3px 3px 1px 1px;
  transform-origin: 2px 65px;
  box-shadow: 0 0 5px #0005, inset 1.5px 3px 0px #333, inset -1.5px -3px 0px #333;
  z-index: 2;
  animation: watch 3600s linear infinite;
}

.second {
  position: absolute;
  width: 10px;
  height: 10px;
  background: red;
  left: 85px;
  top: 85px;
  border-radius: 50%;
  border: 1px solid #eee;
  z-index: 3;
  animation: watch 60s steps(60, end) 0s infinite;
}

.second::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 85px;
  left: 3px;
  bottom: -10px;
  background: red;
  border-radius: 2px;
  box-shadow: 5px 0 2px rgba(128, 128, 128, 0.2);
}

.second::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  left: 2px;
  top: 2px;
  background: #555;
  border-radius: 50%;
}

.v-index {
  position: absolute;
  color: #333;
  font-size: 24px;
  left: 83.5px;
  top: -3px;
  text-shadow: 0 157px 0 #333;
  z-index: 1
}

.h-index {
  position: absolute;
  color: #333;
  font-size: 24px;
  top: 72px;
  left: 5px;
  transform: rotate(-90deg);
  text-shadow: 0 158px 0 #333;
  z-index: 1;
}

@keyframes watch {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

</style>


================================================
FILE: Cards/devkatyall_gentle-fly-78.html
================================================
<div class="card">
  <div class="emojis">
    <button>😄</button>
    <button>😁</button>
    <button>😆</button>
    <button>😂</button>
  </div>
  <div class="emojis">
    <button>😄</button>
    <button>😁</button>
    <button>😆</button>
    <button>😂</button>
  </div>
</div>

<style>
/* From Uiverse.io by devkatyall  - Tags: card */
.card {
  width: 354px;
  background: rgba(41, 41, 41, 0.07);
  white-space: nowrap;
  overflow: hidden;
  border-radius: 50px;
  -webkit-box-shadow: -10px 0px 13px -7px #0000003a,
    10px 0px 13px -7px #0000003a, 5px 5px 15px 5px rgba(0, 0, 0, 0);
  box-shadow: -10px 0px 33px -7px #0000003a, 10px 0px 33px -7px #0000003a,
    5px 5px 35px 5px rgba(0, 0, 0, 0);
}

button {
  font-size: 70px;
  margin: 0 5px;
  border: none;
  background-color: transparent;
  cursor: grab;
}
button:hover {
  transform: scale(1.1);
  transition: 0.5s ease;
}
.emojis {
  display: inline-block;
  animation: 5s sliding infinite linear;
}

/* to pause on hover  */
/* .card:hover .emojis{
  animation-play-state: paused;
} */

@keyframes sliding {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-101%);
  }
}

</style>
    

================================================
FILE: Cards/devkatyall_spicy-mule-43.html
================================================
<div class="shine">UIVERSE</div>

<style>
/* From Uiverse.io by devkatyall  - Tags: card, text animation, text, shining text */
.shine {
  font-size: 2em;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.3);
  background: #222 -webkit-gradient(
      linear,
      left top,
      right top,
      from(#222),
      to(#222),
      color-stop(0.5, #fff)
    ) 0 0 no-repeat;
  background-image: -webkit-linear-gradient(
    -40deg,
    transparent 0%,
    transparent 40%,
    #fff 50%,
    transparent 60%,
    transparent 100%
  );
  -webkit-background-clip: text;
  -webkit-background-size: 50px;
  -webkit-animation: zezzz;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes zezzz {
  0%,
  10% {
    background-position: -200px;
  }
  20% {
    background-position: top left;
  }
  100% {
    background-position: 200px;
  }
}

</style>
    

================================================
FILE: Cards/devkennyy_angry-panther-84.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by devkennyy - Tags: card */
.card {
  color: #fff;
  margin: 40px auto;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  width: 100%;
  border-radius: 15px;
  padding: 32px;
  backdrop-filter: blur(10px);
}

.heading {
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.heading span {
  display: inline-block;
  background-clip: text;
  color: #3498db;
}

.content {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px
}

.item {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  text-align: center;
  transition: 0.3s;
}

.item svg {
  height: 48px;
  margin-bottom: 5px;
  width: 48px;
}

.item--create,
.item--post,
.item--inspire {
  color: #5a5aeb !important;
}

.content .item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-transform: uppercase;
  font-weight: 700
}

.content .item span {
  margin-top: 8px;
  font-size: 14px;
  color: #f1f1f1;
  font-weight: 400;
  cursor: pointer
}

button {
  display: inline-block;
  padding: 24px 32px;
  border: 0;
  text-decoration: none;
  border-radius: 15px;
  background-color: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(30px);
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  text-transform: uppercase;
}

button:hover {
  background-color: rgba(255,255,255,0.2);
}
</style>


================================================
FILE: Cards/devsleonardo_white-fox-82.html
================================================
<div class="card">
  <img
    class="image"
    alt=""
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a class="instagram" href="https://www.instagram.com/uiverse.io/">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 25"
        height="25"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
        ></path>
      </svg>
    </a>
    <a class="x" href="https://twitter.com/uiverse_io">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
        ></path>
      </svg>
    </a>
    <a class="discord" href="https://discord.gg/KD8ba2uUpT">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 25 25"
        height="25"
        width="25"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by devsleonardo  - Tags: animation, card, uiverse, Social Banner, Uiverse.io */
body {
  background-color: #0e0b16;
  background-image: radial-gradient(circle at 50% 50%, #1f1b2e, #0e0b16);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden; /* Para evitar scroll */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

.card {
  background: linear-gradient(135deg, #2e2a4f, #403b69);
  border: 2px solid #9b5de5;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(155, 93, 229, 0.5);
  padding: 50px;
  text-align: center;
  max-width: 400px;
  color: #edf2f4;
  position: relative; /* Para ser referência de posicionamento do astronauta */
}

.card .image {
  width: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: -150px;
  animation: orbit 8s linear infinite;
  filter: drop-shadow(0 0 10px #9b5de5);
}

.card .heading {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #f72585;
  text-shadow: 0 4px 8px rgba(247, 37, 133, 0.5);
  position: relative;
  z-index: 1;
}

.card .icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.card .icons a {
  color: #edf2f4;
  transition: transform 0.3s, color 0.3s;
  text-shadow: 0 4px 8px rgba(58, 134, 255, 0.5);
}

.card .icons a:hover {
  transform: scale(1.2);
  color: #f72585;
}

/* Adicionando efeito neon aos ícones */
.card .icons a svg {
  filter: drop-shadow(0 0 10px #9b5de5);
}

</style>
    

================================================
FILE: Cards/dhruv465_spotty-cow-20.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by dhruv465 - Tags: animated, spin, loader circle */
.one-div {
  width: 40px;
  height: 40px;
  border: 8px solid #fff;
  border-top-color: #8c8eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: Cards/directhacker_rare-mayfly-46.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by directhacker  - Tags: animation, card, hover */
.card {
  position: relative;
  width: 350px;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(to bottom right, #2c2c2c, #1a1a1a);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 8px 40px rgba(0, 0, 0, 0.6);
  -webkit-perspective: 1000px;
  perspective: 1000px;
  overflow: hidden;
  transition: transform 0.6s ease-in-out, box-shadow 0.6s ease-in-out;
  text-align: center;
  color: #fff;
  cursor: pointer;
}

.card:hover {
  transform: scale(1.05) rotateX(-10deg) rotateY(-10deg);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8), 0 12px 60px rgba(0, 0, 0, 1);
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 16px;
  z-index: -1;
  transition: all 0.6s ease-in-out;
}

.card::before {
  background: linear-gradient(
    135deg,
    rgba(96, 139, 188, 0.15),
    rgba(70, 103, 152, 0.15)
  );
  transform: translateY(-10px) translateX(10px);
  box-shadow: 0 0 30px rgba(96, 139, 188, 0.2);
}

.card::after {
  border: 1px dashed rgba(71, 71, 71, 0.425);
  transform: translateY(20px) translateX(-20px);
}

.card:hover::before {
  transform: translateY(-20px) translateX(20px);
  box-shadow: 0 0 60px rgba(96, 139, 188, 0.4);
}

.card:hover::after {
  transform: translateY(40px) translateX(-40px);
  border: 1px dashed rgba(0, 140, 255, 0.5);
}

.card .image {
  width: 150px;
  margin: 0 auto;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.card .heading {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 1rem 0;
  color: #956afa;
  text-shadow: 0 0 10px rgba(149, 106, 250, 0.8);
  text-transform: uppercase;
}

.card .icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.card .icons a {
  color: #fff;
  transition: transform 0.3s ease, color 0.3s ease;
}

.card .icons a svg {
  width: 30px;
  height: 30px;
}

.card .icons a.instagram:hover {
  color: #e4405f;
  transform: scale(1.2);
}

.card .icons a.x:hover {
  color: #1da1f2;
  transform: scale(1.2);
}

.card .icons a.discord:hover {
  color: #7289da;
  transform: scale(1.2);
}

</style>
    

================================================
FILE: Cards/dldrs_cowardly-horse-9.html
================================================
<div class="card">
  <div class="card-wrapper">
    <div class="card-icon">
      <div class="icon-cart-box">
        <svg
          viewBox="0 0 576 512"
          width="20"
          height="20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"
            fill="#009688"
          ></path>
        </svg>
      </div>
    </div>

    <div class="card-content">
      <div class="card-title-wrapper">
        <span class="card-title">Added to cart!</span>
        <span class="card-action">
          <svg
            viewBox="0 0 384 512"
            width="15"
            height="15"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
            ></path>
          </svg>
        </span>
      </div>
      <div class="product-name">ASUS Vivobook Go 15 (E1504F)</div>
      <div class="product-price">$899.00</div>
      <button class="btn-view-cart" type="button">View Cart</button>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by dldrs  - Tags: simple, minimalist, notification, card, message */
.card {
  width: 400px;
  height: auto;
  background: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.1);
  margin: 20px;
  padding: 0 10px;
}

.card-wrapper {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
}

.card-icon {
  width: 20%;
}

.card-icon .icon-cart-box {
  background-color: #e0f2f1;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  text-align: center;
  padding: 15px 0px;
  margin: 0 auto;
}

.card-content {
  width: 80%;
}

.card-title-wrapper {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  width: 100%;
}

.card-title {
  width: 95%;
  font-size: 1em;
  font-weight: 600;
  color: #333;
  padding: 20px 0 0 10px;
}

.card-action {
  width: 5%;
  text-align: right;
  padding: 0 30px;
}

.card-action svg {
  cursor: pointer;
  fill: rgba(0, 0, 0, 0.2);
  transition: 0.3s ease-in-out;
}

.card-action svg:hover {
  fill: rgba(0, 0, 0, 0.6);
}

.product-name {
  font-size: 0.8em;
  color: #757575;
  padding: 10px 0 0 10px;
}

.product-name:hover {
  cursor: pointer;
  text-decoration: underline;
}

.product-price {
  font-size: 0.9em;
  font-weight: 600;
  color: #333;
  padding: 0 0 10px 10px;
}

.btn-view-cart {
  font-size: 0.7em;
  font-weight: 600;
  padding: 5px 10px;
  margin: 5px 10px 20px;
  border-radius: 15px;
  color: #009688;
  border: 1px solid #009688;
  background-color: #e0f2f1;
  box-shadow: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.4s ease-in-out;
}

.btn-view-cart:hover,
.btn-view-cart:active,
.btn-view-cart:focus {
  color: white;
  background-color: #009688;
  border: 1px solid #009688;
}

</style>
    

================================================
FILE: Cards/dylanharriscameron_stupid-mole-90.html
================================================
<div class="card">
  <div class="bg"></div>
  <div class="blob"></div>
</div>

<style>
/* From Uiverse.io by dylanharriscameron - Tags: neumorphism, glassmorphism, card, animated */
.card {
  position: relative;
  width: 200px;
  height: 250px;
  border-radius: 14px;
  z-index: 1111;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
  ;
}

.bg {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 190px;
  height: 240px;
  z-index: 2;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(24px);
  border-radius: 10px;
  overflow: hidden;
  outline: 2px solid white;
}

.blob {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #ff0000;
  opacity: 1;
  filter: blur(12px);
  animation: blob-bounce 5s infinite ease;
}

@keyframes blob-bounce {
  0% {
    transform: translate(-100%, -100%) translate3d(0, 0, 0);
  }

  25% {
    transform: translate(-100%, -100%) translate3d(100%, 0, 0);
  }

  50% {
    transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
  }

  75% {
    transform: translate(-100%, -100%) translate3d(0, 100%, 0);
  }

  100% {
    transform: translate(-100%, -100%) translate3d(0, 0, 0);
  }
}

</style>


================================================
FILE: Cards/dylanharriscameron_tiny-shrimp-95.html
================================================
<div class="container">
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <div class="card">
    <div class="card-header">
      Hover me
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by dylanharriscameron - Tags: card, card hover, pure css, parallax */
.container .card {
  background-color: white;
  border-radius: 10px;
  border: 1px solid black;
  position: relative;
  z-index: 0;
  transition: all 300ms ease-out;
  transform-origin: center center;
  width: 100%;
  height: 100%;
  box-shadow: 0px;
}

.card-header {
  padding: 10px;
  background-color: #000;
  color: white;
  font-size: 16px;
  border: 1px solid white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.container .card .border {
  transition: all 300ms ease-out;
  transform-origin: center center;
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border: 1px solid black;
  border-radius: 9px;
}

.container {
  perspective: 1000px;
  position: relative;
  /* you don't need width and height if your card already has a lot of content */
  width: 100%;
  max-width: 250px;
  height: 150px;
  border-radius: 10px;
}
.container a {
  opacity: 0;
  position: absolute;
  z-index: 1;
  width: 50%;
  height: 50%;
}
.container a:hover,
.container a:focus {
  transform: translateZ(50px);
}

.container a:hover ~ .card .card-header,
.container a:focus ~ .card .card-header {
  transform: translateZ(24px);
}

.container a:nth-child(1) {
  top: 0;
  left: 0;
}
.container a:nth-child(1):hover ~ .card,
.container a:nth-child(1):focus ~ .card {
  transform: rotateX(10deg) rotateY(-10deg) translateZ(0);
  transform-origin: right bottom;
  box-shadow: 10px 20px;
}
.container a:nth-child(2) {
  top: 0;
  right: 0;
}
.container a:nth-child(2):hover ~ .card,
.container a:nth-child(2):focus ~ .card {
  transform: rotateX(10deg) rotateY(10deg) translateZ(0);
  transform-origin: left bottom;
  box-shadow: -10px 20px;
}
.container a:nth-child(3) {
  bottom: 0;
  right: 0;
}
.container a:nth-child(3):hover ~ .card ,
.container a:nth-child(3):focus ~ .card {
  transform-origin: left top;
  transform: rotateX(-10deg) rotateY(10deg) translateZ(0);
  box-shadow: -10px -20px;
}
.container a:nth-child(4) {
  bottom: 0;
  left: 0;
}
.container a:nth-child(4):hover ~ .card,
.container a:nth-child(4):focus ~ .card {
  transform-origin: right top;
  transform: rotateX(-10deg) rotateY(-10deg) translateZ(0);
  box-shadow: 10px -20px;
}

</style>


================================================
FILE: Cards/dzoshi_bad-warthog-50.html
================================================
<div class="card">
  <img src="https://uiverse.io/logo-png.png" class="logoUI" alt="UI" />
</div>

<style>
/* From Uiverse.io by dzoshi  - Tags: dark, card, neon, futuristic, hover */
.card {
  width: 200px;
  height: 200px;
  color: #67676b05;

  background: linear-gradient(-45deg, #111111 0%, #080808 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 25px;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0px 20px 40px 0px #020202d8,
    0px 60px 80px 0px rgba(0, 0, 0, 0.678),
    0px 20px 95px 0px rgba(13, 33, 94, 0);
  border-top: 3px solid #a3a1a78f;
  outline: 3px solid #27127436;

  transition: all 0.6s ease-out;
}

.card:hover {
  color: #928b8b;
  background-color: 482fb8;
  box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.945),
    0px 10px 20px 0px rgba(29, 9, 143, 0.856), 0px 0px 180px 0px rgb(47, 4, 202);
  outline: 3px solid #500bf0;
  outline: 3px solid #5518e4;

  transform: scale(0.97);
  transition: transform 0.4s, box-shadow 0.6s outline 0.8s ease-in;
}

.logoUI {
  filter: grayscale(60%);
  margin-top: 20px;
  width: 60%;
  opacity: 10%;
  transition: all 0.6s ease-in-out;
  position: relative;
  z-index: 1;
}

.card:hover .logoUI {
  filter: contrast(180%);
  backdrop-filter: grayscale(0%);

  opacity: 100%;
  transition: all 1s ease-out;
}

</style>
    

================================================
FILE: Cards/e-coders_calm-stingray-80.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by e-coders - Tags: gradient, card */
.card {
 width: 190px;
 height: 254px;
 background: linear-gradient(135deg, #ff85ec 0%, #84ff98 100%);
 border-radius: 16px;
 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border: 1px solid rgba(255, 255, 255, 0.3);
}
</style>


================================================
FILE: Cards/e-coders_clever-walrus-99.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by e-coders - Tags: card */
.card {
 width: 190px;
 height: 254px;
 background: linear-gradient(135deg, #ebadb6 0%, #aceae1 100%);
 border-radius: 7px;
 box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}
</style>


================================================
FILE: Cards/eduardo-amaro-maciel_foolish-falcon-87.html
================================================
<div class="container scroll-1">
  <div class="card">
    <div class="card__image"></div>
    <div class="card__content">
        <span class="card__title">Hello</span>
        <p class="card__describe">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
    </div>
  </div>
  <div class="card">
    <div class="card__image"></div>
    <div class="card__content">
        <span class="card__title">Hello</span>
        <p class="card__describe">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
    </div>
  </div>
  <div class="card">
    <div class="card__image"></div>
    <div class="card__content">
        <span class="card__title">Hello</span>
        <p class="card__describe">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by eduardo-amaro-maciel - Tags: card, scroll snap, dynamic */
.scroll-1::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scroll-1::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: #888;
}

.container * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  color: #fff;
}

.container {
  display: flex;
  overflow-x: scroll;
  padding: 24px;
  width: 300px;
  scroll-snap-type: x mandatory;
  scroll-padding-top: 24px;
  border-radius: 8px;
  gap: 20px;
}

.container .card {
  flex: 0 0 100%;
  overflow: hidden;
  border-radius: 8px;
  background-color: #141414;
  scroll-snap-align: start;
}

.card .card__image {
  flex: 1;
  height: 140px;
}

.card:nth-child(1) .card__image {
  background-image: linear-gradient(
      to right top,
      #051937, 
      #004d7a, 
      #008793, 
      #00bf72, 
      #a8eb12
  );
}

.card:nth-child(2) .card__image {
  background-image: linear-gradient(
    to right top, 
    #dc09a5, 
    #ce00b4, 
    #ba00c5, 
    #9c00d8, 
    #6f12eb
  );
}

.card:nth-child(3) .card__image {
  background-image: linear-gradient(
    to right top, 
    #dc1009, 
    #e55f00, 
    #e49200, 
    #dac000, 
    #c7eb12
  );
}

.card .card__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.card .card__content .card__title {
  font-size: 32px;
  color: #fff;
  text-transform: capitalize;
}

.card .card__content .card__describe {
  color: #fff;
  font-size: 16px;
}
</style>


================================================
FILE: Cards/eduardo-amaro-maciel_witty-gecko-70.html
================================================
<div class="container">
  <div class="card">
    <div class="face back">
      <div class="content">
        <span class="stars"></span>
        <b class="desc">Hello</b>
        <p class="desc">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </p>
      </div>
    </div>
    <div class="face front">
      <b>Hover</b>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by eduardo-amaro-maciel - Tags: card, hover, rainbow */
.container {
  margin: 0 auto;
}

.card {
  position: relative;
  width: 200px;
  height: 300px;
  margin: 0 auto;
  background: #000;
  border-radius: 15px;
  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);
}

.face {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.face.back {
  box-sizing: border-box;
  padding: 20px;
}

.face.back b {
  margin: 0;
  padding: 0;
}

.face.back .desc {
  background-color: #eee;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.face.front {
  transition: 0.5s;
}

.face.front b {
  margin: 0;
  padding: 0;
  font-size: 5.1em;
  color: #fff;
  transition: 0.5s;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.card:hover .face.front {
  height: 60px;
}

.card:hover .face.front b {
  font-size: 2em;
}

.face.front {
  background-color: #0cbaba;
  border-radius: 15px;
}
</style>


================================================
FILE: Cards/elijahgummer_hot-fly-77.html
================================================
<div class="card">
  <div class="header">
    <div class="img"></div>
    <div class="details">
      <span class="name"></span>
      <span class="about"></span>
    </div>
  </div>
  <div class="description">
    <div class="line line-1"></div>
    <div class="line line-2"></div>
    <div class="line line-3"></div>
  </div>
  <div class="btns">
    <div class="btn btn-1"></div>
    <div class="btn btn-2"></div>
  </div>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, minimalist, gradient, loading, card */
.card {
  max-width: 250px;
  width: 100%;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  border: 1px solid #d9d9d9;
}
.card .header {
  display: flex;
  align-items: center;
}
.header .img {
  height: 45px;
  width: 45px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.header .details {
  margin-left: 20px;
}
.details span {
  display: block;
  background: #d9d9d9;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.details .name {
  height: 12px;
  width: 70px;
}
.details .about {
  height: 13px;
  width: 120px;
  margin-top: 10px;
}
.card .description {
  margin: 25px 0;
}
.description .line {
  background: #d9d9d9;
  border-radius: 10px;
  height: 11px;
  margin: 10px 0;
  overflow: hidden;
  position: relative;
}
.description .line-1 {
  width: calc(100% - 15%);
}
.description .line-3 {
  width: calc(100% - 40%);
}
.card .btns {
  display: flex;
}
.card .btns .btn {
  height: 25px;
  width: 100%;
  background: #d9d9d9;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
}
.btns .btn-1 {
  margin-right: 8px;
}
.btns .btn-2 {
  margin-left: 8px;
}
.header .img::before,
.details span::before,
.description .line::before,
.btns .btn::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-image: linear-gradient(
    to right,
    #d9d9d9 0%,
    rgba(0, 0, 0, 0.05) 20%,
    #d9d9d9 40%,
    #d9d9d9 100%
  );
  background-repeat: no-repeat;
  background-size: 450px 400px;
  animation: shimmer 1s linear infinite;
}
.header .img::before {
  background-size: 650px 600px;
}
.details span::before {
  animation-delay: 0.2s;
}
.btns .btn-2::before {
  animation-delay: 0.22s;
}
@keyframes shimmer {
  0% {
    background-position: -450px 0;
  }
  100% {
    background-position: 450px 0;
  }
}

</style>
    

================================================
FILE: Cards/elijahgummer_kind-pig-24.html
================================================
<div class="badge" href="#">
  v2.7
  <span></span>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: glassmorphism, animation, badge, card, glass, version, shiny */
.badge {
  position: relative;
  text-decoration: none;
  padding: 8px 16px;
  color: white;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);

  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  user-select: none;
}

.badge span {
  width: 25px;
  height: 25px;
  position: absolute;
  top: -12px;
  right: -2px;
  transform: rotate(-20deg);
  filter: blur(0.5px);
}

.badge span:before,
.badge span:after {
  content: "";
  position: absolute;
}

.badge span:before {
  width: 1px;
  height: 100%;
  left: 12px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.7),
    transparent
  );
}

.badge span:after {
  width: 100%;
  height: 1px;
  top: 12px;
  background: linear-gradient(
    to left,
    transparent,
    rgba(255, 255, 255, 0.7),
    transparent
  );
}

.badge:hover span:after {
  display: block;
  animation: rotate 3s ease-in-out; /* Adjust timing as needed */
}
.badge:hover span::before {
  display: block;
  animation: rotate 3s ease-in-out; /* Adjust timing as needed */
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.8);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.badge:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(105, 106, 111, 0.37);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  border-radius: 999px;
}

.inspired {
  position: absolute;
  bottom: 8%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.inspired:hover {
  color: rgba(255, 255, 255, 0.8);
}

</style>
    

================================================
FILE: Cards/elijahgummer_tasty-dodo-72.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: glassmorphism, flashy, animation, gradient, card, glow, blur filter, colorful */
/* Innovative Banner */
.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 400px;
  height: auto;
  transition: all ease-in-out 0.5s;
}
.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  z-index: -2;
}
.card::before {
  top: -25px;
  left: -25px;
  background: radial-gradient(circle, #875c98, #4a236a);
  filter: blur(20px);
  opacity: 0.8;
  animation: glowBall1 5s infinite ease-in-out;
}

.card::after {
  bottom: -25px;
  right: -25px;
  background: radial-gradient(circle, #4a236a, #875c98);
  filter: blur(20px);
  opacity: 0.8;
  animation: glowBall2 7s infinite ease-in-out;
}
.image {
  width: 70%;
  height: auto;
  border-radius: 20px 20px 0 0; /* Adjust rounded corners */
  transition: transform 0.3s ease;
  z-index: 9; /* Ensure the image is above the balls */
  display: block;
  margin: 0 auto; /* Center the image horizontally */
}
.image:hover {
  transform: scale(1.05);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
}
.heading {
  position: relative;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 10px;
  margin: 0;
  z-index: 6;
  transition: transform 0.3s ease;
  font-family: "Poppins", sans-serif;
}
.heading,
.icons {
  position: relative;
  transition: transform 0.5s ease-out;
}
.image:hover + .card .heading,
.image:hover + .card .icons {
  transform: translateY(-15px);
}
.icons a {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.icons a:hover {
  opacity: 1;
}
.heading:hover {
  animation: bounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}
.icons a svg {
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
.heading:hover {
  animation: glow 1s infinite alternate;
}
@keyframes glow {
  0% {
    text-shadow: 0 0 2px rgba(255, 20, 147, 0.5),
      0 0 4px rgba(255, 20, 147, 0.5), 0 0 6px rgba(255, 20, 147, 0.5),
      0 0 8px rgba(255, 20, 147, 0.5), 0 0 10px rgba(255, 20, 147, 0.5),
      0 0 12px rgba(255, 20, 147, 0.5), 0 0 14px rgba(255, 20, 147, 0.5),
      0 0 16px rgba(255, 20, 147, 0.5);
    color: #fff;
  }
  50% {
    text-shadow: 0 0 4px rgba(255, 165, 0, 0.5), 0 0 6px rgba(255, 255, 0, 0.5),
      0 0 8px rgba(0, 255, 0, 0.5), 0 0 10px rgba(0, 127, 255, 0.5),
      0 0 12px rgba(46, 43, 95, 0.5), 0 0 14px rgba(139, 0, 255, 0.5),
      0 0 16px rgba(255, 20, 147, 0.5), 0 0 18px rgba(255, 165, 0, 0.5);
    color: #fff;
  }
  100% {
    text-shadow: 0 0 2px rgba(255, 20, 147, 0.5),
      0 0 4px rgba(255, 20, 147, 0.5), 0 0 6px rgba(255, 20, 147, 0.5),
      0 0 8px rgba(255, 20, 147, 0.5), 0 0 10px rgba(255, 20, 147, 0.5),
      0 0 12px rgba(255, 20, 147, 0.5), 0 0 14px rgba(255, 20, 147, 0.5),
      0 0 16px rgba(255, 20, 147, 0.5);
    color: #fff;
  }
}
.heading:hover {
  transform: translateY(5px);
}
.card ::before {
  position: fixed;
  content: "";
  box-shadow: 0 0 100px 40px rgba(255, 255, 255, 0.031372549);
  top: -10%;
  left: -100%;
  transform: rotate(-45deg);
  height: 60rem;
  transition: 0.7s all;
}
.card:hover ::before {
  filter: brightness(0.3);
  top: -100%;
  left: 200%;
}
.card:hover {
  border: 1px solid rgba(255, 255, 255, 0.2666666667);
  box-shadow: 0 7px 50px 10px rgba(0, 0, 0, 0.6666666667);
  transform: scale(1.015);
  filter: brightness(1.3);
  transform: translateY(-5px) rotate(1deg);
}
.heading:hover .icons {
  transform: translateY(10px);
}
.icons {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  z-index: 2;
}
.icons a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 10px;
  transition: transform 0.3s ease;
}
.icons a svg {
  border: none;
}
.icons a svg path {
  stroke: rgb(192, 192, 192);
}
.icons a:hover svg {
  transform: scale(1.1);
}
/* Glowing balls animations */
@keyframes glowBall1 {
  0% {
    background: linear-gradient(to right, #800080, #0000ff);
    opacity: 0.4;
    width: 100px;
    height: 100px;
  }

  50% {
    background: linear-gradient(to right, #00bfff, #32cd32);
    opacity: 0.5;
    width: 120px;
    height: 120px;
  }

  100% {
    background: linear-gradient(to right, #ff1493, #800080);
    opacity: 0.6;
    width: 150px;
    height: 150px;
  }
}

@keyframes glowBall2 {
  0% {
    background: linear-gradient(to right, #8a2be2, #4b0082);
    opacity: 0.6;
    width: 120px;
    height: 120px;
  }

  50% {
    background: linear-gradient(to right, #ffd700, #ff8c00);
    opacity: 0.2;
    width: 90px;
    height: 90px;
  }

  100% {
    background: linear-gradient(to right, #ff1493, #4a236a);
    opacity: 0.8;
    width: 100px;
    height: 100px;
  }
}

</style>
    

================================================
FILE: Cards/elijahwgummer-poc_heavy-bear-0.html
================================================
<div class="card">
    <div class="card-content">
      <div class="card-title">Cool Card</div>
      <p class="card-description">This is a cool card design.</p>
      <button class="card-button">Click Me</button>
    </div>
  </div>
<style>
/* From Uiverse.io by elijahwgummer-poc - Tags: card, animated, cool card, keyframes, pure css */
.card {
  width: 300px;
  height: 400px;
  background-color: #F7F7F7;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

.card:before {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #FF5F6D, #FF9671);
  transform: rotate(-45deg);
  transition: all 0.3s ease;
  z-index: -1;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.card:hover:before {
  top: 0;
  left: 0;
}

.card-content {
  padding: 20px;
  text-align: center;
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.card-description {
  font-size: 16px;
  color: #777;
  margin-bottom: 20px;
}

.card-button {
  padding: 10px 20px;
  background-color: #FF5F6D;
  color: #FFF;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.card-button:hover {
  background-color: #FF3A4C;
}

</style>


================================================
FILE: Cards/emmanuelh-dev_ancient-pig-83.html
================================================
<!-- From Uiverse.io by emmanuelh-dev - Tags: card, fluid, premium -->
<div class="bg-white w-48 h-64 rounded-lg">
  <div class="flex p-2 gap-1">
    <div class="">
      <span class="bg-red-500 inline-block center w-3 h-3 rounded-full"></span>
    </div>
    <div class="circle">
      <span class="bg-yellow-500 inline-block center w-3 h-3 rounded-full"></span>
    </div>
    <div class="circle">
      <span class="bg-green-500 box inline-block center w-3 h-3 rounded-full"></span>
    </div>
  </div>
  <div class="card__content">
  </div>
</div>



================================================
FILE: Cards/emmanuelh-dev_curly-impala-37.html
================================================
<!-- From Uiverse.io by emmanuelh-dev - Tags: card, simple cards, card design -->
<div class="container mx-auto px-4 py-8 max-w-md">
    <div class="grid grid-cols-2 gap-6">
      
      <div class="bg-white rounded-lg p-6 shadow-md">
        <h2 class="text-xl font-semibold mb-2">Tarjeta 1</h2>
        <p class="text-gray-600">Contenido de la tarjeta 1...</p>
      </div>

      
      <div class="bg-white rounded-lg p-6 shadow-md">
        <h2 class="text-xl font-semibold mb-2">Tarjeta 2</h2>
        <p class="text-gray-600">Contenido de la tarjeta 2...</p>
      </div>

      
      <div class="bg-white rounded-lg p-6 shadow-md">
        <h2 class="text-xl font-semibold mb-2">Tarjeta 3</h2>
        <p class="text-gray-600">Contenido de la tarjeta 3...</p>
      </div>

      
      <div class="bg-white rounded-lg p-6 shadow-md">
        <h2 class="text-xl font-semibold mb-2">Tarjeta 4</h2>
        <p class="text-gray-600">Contenido de la tarjeta 4...</p>
      </div>
    </div>
  </div>



================================================
FILE: Cards/emmanuelh-dev_curvy-robin-66.html
================================================
<!-- From Uiverse.io by emmanuelh-dev - Tags: pricing, card, premium -->
        <div class="flex flex-col border-2 border-black overflow-hidden p-8 rounded-xl shadow-large bg-yellow-200 w-80">
          <div class="px-6 py-8 sm:p-10 sm:pb-6">
            <div class="items-center w-full justify-center grid grid-cols-1 text-left">
              <div>
                <h2 class="text-black font-bold text-lg lg:text-3xl">Corporate</h2>
                <p class="text-black tracking-tight xl:text-2xl mt-5">
                  For those that want to grow steadily and buy pizza and
                  burguers.
                </p>
              </div>
              <div class="mt-2">
                <p>
                  <span class="text-black tracking-tight xl:text-4xl">$35</span>
                  <span class="text-black font-medium text-base">/mo</span>
                </p>
              </div>
            </div>
          </div>
          <div class="flex flex-col flex-1 justify-between pb-8 px-6 sm:px-8 space-y-6">
            <div class="flex flex-col gap-3 sm:flex-row">
              <a class="text-black items-center inline-flex bg-white border-2 border-black duration-200 ease-in-out focus:outline-none hover:bg-black hover:shadow-none hover:text-white justify-center rounded-xl shadow-[5px_5px_black] text-center transform transition w-full lg:px-8 lg:py-4 lg:text-4xl px-4 py-2" href="#">
                Purchase
              </a>
            </div>
          </div>
        </div>



================================================
FILE: Cards/emmanuelh-dev_gentle-crab-69.html
================================================
<!-- From Uiverse.io by emmanuelh-dev - Tags: material design, card, box-shadow, gold -->
<aside class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono">
  <div class="flex justify-between items-center">
    <div class="flex space-x-2 text-red-500">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <p class="text-sm">bash</p>
  </div>
  <div class="mt-4">
    <p class="text-green-400">$ npm install next</p>
    <p class="text-white">+ next@10.2.3</p>
    <p class="text-white">added 1 package, and audited 2 packages in 3s</p>
    <p class="text-green-400">$</p>
  </div>
</aside>



================================================
FILE: Cards/emmanuelh-dev_jolly-duck-70.html
================================================
<div class="calculator">
  <div class="output">
    <span class="result"></span>
  </div>
  <div class="buttons">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>+</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>-</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>*</button>
    <button class="bg-red">C</button>
    <button>0</button>
    <button class="bg-green">=</button>
    <button>/</button>
  </div>
</div>

<style>
/* From Uiverse.io by emmanuelh-dev - Tags: card, calculator */
.calculator {
  border: 1px solid rgb(179, 179, 179);
  border-radius: 0.375rem;
  width: 190px;
  height: 254px;
  font-family: Arial, sans-serif;
  margin: 0 auto;
  padding: 10px;
}

.output {
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  height: 40px;
  margin-bottom: 10px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
}

.result {
  font-size: 20px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}

button {
  border: none;
  border-radius: 0.375rem;
  padding: 10px;
  background-color: #eee;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #ddd;
}

button:active {
  background-color: #ccc;
}

.bg-green {
  background-color: rgba(0, 177, 29, 0.651);
  color: white;
}

.bg-green:hover {
  background-color: rgba(0, 231, 39, 0.651);
  color: white;
}

.bg-red {
  background-color: rgba(223, 4, 4, 0.651);
  color: white;
}

.bg-red:hover {
  background-color: rgba(255, 1, 1, 0.651);
  color: white;
}
</style>


================================================
FILE: Cards/emmanuelh-dev_orange-cougar-98.html
================================================
<!-- From Uiverse.io by emmanuelh-dev - Tags: pricing, card, price -->
<div class="flex flex-col bg-white rounded-3xl">
                      <div class="px-6 py-8 sm:p-10 sm:pb-6">
                        <div class="grid items-center justify-center w-full grid-cols-1 text-left">
                          <div>
                            <h2 class="text-lg font-medium tracking-tighter text-gray-600 lg:text-3xl">
                              Starter
                            </h2>
                            <p class="mt-2 text-sm text-gray-500">
                              Suitable to grow steadily.
                            </p>
                          </div>
                          <div class="mt-6">
                            <p>
                              <span class="text-5xl font-light tracking-tight text-black">
                                $25
                              </span>
                              <span class="text-base font-medium text-gray-500"> /mo </span>
                            </p>
                          </div>
                        </div>
                      </div>
                      <div class="flex px-6 pb-8 sm:px-8">
                        <a aria-describedby="tier-company" class="items-center justify-center w-full px-6 py-2.5 text-center text-white duration-200 bg-black border-2 border-black rounded-full nline-flex hover:bg-transparent hover:border-black hover:text-black focus:outline-none focus-visible:outline-black text-sm focus-visible:ring-black" href="#">
                          Get started
                        </a>
                      </div>
                    </div>



================================================
FILE: Cards/emmanuelh-dev_ugly-fly-91.html
================================================
<!-- From Uiverse.io by emmanuelh-dev - Tags: instagram, card, tailwind -->
<div class="relative rounded-lg bg-slate-900 p-2">
  <div class="relative flex text-center">
    <div class="flex pl-3.5 pt-3"><svg viewBox="0 0 24 24" fill="currentColor" class="-ml-0.5 mr-1.5 h-3 w-3 text-red-500/20">
        <circle r="12" cy="12" cx="12"></circle>
      </svg><svg viewBox="0 0 24 24" fill="currentColor" class="-ml-0.75 mr-1.5 h-3 w-3 text-yellow-500/20">
        <circle r="12" cy="12" cx="12"></circle>
      </svg><svg viewBox="0 0 24 24" fill="currentColor" class="-ml-0.75 mr-1.5 h-3 w-3 text-green-500/20">
        <circle r="12" cy="12" cx="12"></circle>
      </svg></div><span class="absolute inset-x-0 top-2 text-xs text-slate-500">ProgressBar.tsx</span>
  </div>
  <div class="mt-5 space-y-1.5 px-5 pb-10">
    <p class="mt-4 font-mono text-xs font-normal tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;</span><span class="text-pink-400">Card</span><span class="text-slate-500">&gt;</span>
    </p>
    <p class="ml-3 font-mono text-xs font-normal tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;</span><span class="text-pink-400">Text</span><span class="text-slate-500">&gt;</span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">Ticket Sales</span></span><span class="text-slate-500">&lt;/</span><span class="text-pink-400">Text</span><span class="text-slate-500">&gt;</span>
    </p>
    <p class="ml-3 font-mono text-xs font-normal leading-4 tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;</span><span class="text-pink-400">Metric</span><span class="text-slate-500">&gt;</span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">$ 71,465</span></span><span class="text-slate-500">&lt;/</span><span class="text-pink-400">Metric</span><span class="text-slate-500">&gt;</span>
    </p>
    <p class="ml-3 font-mono text-xs font-normal tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;</span><span class="text-pink-400">Flex</span><span class="ml-2 text-violet-400">className<span class="text-slate-500">=</span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">"mt-3"</span></span></span><span class="text-slate-500">&gt;</span>
    </p>
    <p class="ml-6 font-mono text-xs font-normal tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;</span><span class="text-pink-400">Text</span><span class="text-slate-500">&gt;</span><span class="text-slate-500">&lt;</span><span class="text-pink-400">Bold</span><span class="text-slate-500">&gt;</span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">32%</span></span><span class="text-slate-500">&lt;/</span><span class="text-pink-400">Bold</span><span class="text-slate-500">&gt;</span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">of annual target</span></span><span class="text-slate-500">&lt;/</span><span class="text-pink-400">Text</span><span class="text-slate-500">&gt;</span>
    </p>
    <p class="ml-6 font-mono text-xs font-normal tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;</span><span class="text-pink-400">Text</span><span class="text-slate-500">&gt;</span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">$ 223,328</span></span><span class="text-slate-500">&lt;/</span><span class="text-pink-400">Text</span><span class="text-slate-500">&gt;</span>
    </p>
    <p class="ml-3 font-mono text-xs font-normal tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;/</span><span class="text-pink-400">Flex</span><span class="text-slate-500">&gt;</span>
    </p>
    <p class="ml-3 font-mono text-xs font-normal leading-4 tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;</span><span class="text-pink-400">ProgressBar</span><span class="ml-2 text-violet-400">value<span class="text-slate-500">=</span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">{ 32 }</span></span></span><span class="ml-2 text-violet-400">className<span class="text-slate-500">=</span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">"mt-3"</span></span></span><span class="text-slate-500">/&gt;</span>
    </p>
    <p class="font-mono text-xs font-normal tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;/</span><span class="text-pink-400">Card</span><span class="text-slate-500">&gt;</span>
    </p>
  </div>
</div>



================================================
FILE: Cards/emmanuelh-dev_yellow-grasshopper-99.html
================================================
<!-- From Uiverse.io by emmanuelh-dev - Tags: pricing, card, month -->
<div class="flex flex-col bg-black rounded-3xl">
                      <div class="px-6 py-8 sm:p-10 sm:pb-6">
                        <div class="grid items-center justify-center w-full grid-cols-1 text-left">
                          <div>
                            <h2 class="text-lg font-medium tracking-tighter text-white lg:text-3xl">
                              Corporate
                            </h2>
                            <p class="mt-2 text-sm text-gray-100">Grow steadily and pizza.</p>
                          </div>
                          <div class="mt-6">
                            <p>
                              <span class="text-5xl font-light tracking-tight text-white">
                                $35
                              </span>
                              <span class="text-base font-medium text-white"> /mo </span>
                            </p>
                          </div>
                        </div>
                      </div>
                      <div class="flex px-6 pb-8 sm:px-8">
                        <a aria-describedby="tier-starter" class="items-center justify-center w-full px-6 py-2.5 text-center text-black duration-200 bg-white border-2 border-white rounded-full nline-flex hover:bg-transparent hover:border-white hover:text-white focus:outline-none focus-visible:outline-white text-sm focus-visible:ring-white" href="#">
                          Get started
                        </a>
                      </div>
                    </div>



================================================
FILE: Cards/ercnersoy_serious-skunk-43.html
================================================
<div class="card">My Card</div>
<style>
/* From Uiverse.io by ercnersoy - Tags: card */
.card {
  width: 190px;
  height: 254px;
  background: lightgrey;
  border: 3px inset white;
  background: #e8e8e8;
  box-shadow: inset 20px 20px 60px #c5c5c5, inset -20px -20px 60px #ffffff;
  transition: all .5s ease-in-out;
  border-radius: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  color: #8a8989;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.card:hover {
  transform: translateY(-5px);
  transition: all .5s ease-in-out;
}
</style>


================================================
FILE: Cards/escannord_great-cheetah-66.html
================================================
<div class="card">
  <div class="numbers">
    <span class="number"></span>
    <span class="number"></span>
    <span class="number"></span>
    <span class="number"></span>
    <span class="number"></span>
    <span class="number"></span>
    <span class="number"></span>
    <span class="number"></span>
    <span class="number"></span>
    <span class="number"></span>
    <span class="number"></span>
    <span class="number"></span>
  </div>
  <div class="needles">
    <span class="h"></span>
    <span class="m"></span>
    <span class="s"></span>
    <span class="center"></span>
  </div>
  <div class="pie"></div>
</div>

<style>
/* From Uiverse.io by escannord  - Tags: neumorphism, card, realistic, clock */
.card {
  width: 200px;
  height: 200px;
  background: transparent;
  border-radius: 50%;
  border: 20px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 2px 2px 2px black, inset 2px 2px 2px black,
    -1px -1px 5px rgba(0, 0, 0, 0.473), inset -1px -1px 5px rgba(0, 0, 0, 0.473);
}

.numbers {
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 20px;
  background-color: rgb(234, 221, 247);
}

.number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 0.1rem;
  height: 0.9rem;
  background-color: rgb(12, 26, 109);
}
.number:nth-child(1) {
  transform: translate(-50%, -50%) rotateZ(calc(30deg)) translateY(-80px);
}

.number:nth-child(2) {
  transform: translate(-50%, -50%) rotateZ(calc(60deg)) translateY(-80px);
}

.number:nth-child(3) {
  transform: translate(-50%, -50%) rotateZ(calc(90deg)) translateY(-80px);
}

.number:nth-child(4) {
  transform: translate(-50%, -50%) rotateZ(calc(120deg)) translateY(-80px);
}

.number:nth-child(5) {
  transform: translate(-50%, -50%) rotateZ(calc(150deg)) translateY(-80px);
}

.number:nth-child(6) {
  transform: translate(-50%, -50%) rotateZ(calc(180deg)) translateY(-80px);
}

.number:nth-child(7) {
  transform: translate(-50%, -50%) rotateZ(calc(210deg)) translateY(-80px);
}

.number:nth-child(8) {
  transform: translate(-50%, -50%) rotateZ(calc(240deg)) translateY(-80px);
}

.number:nth-child(9) {
  transform: translate(-50%, -50%) rotateZ(calc(270deg)) translateY(-80px);
}

.number:nth-child(10) {
  transform: translate(-50%, -50%) rotateZ(calc(300deg)) translateY(-80px);
}

.number:nth-child(11) {
  transform: translate(-50%, -50%) rotateZ(calc(330deg)) translateY(-80px);
}

.number:nth-child(12) {
  transform: translate(-50%, -50%) rotateZ(calc(0deg)) translateY(-80px);
}

.number:nth-child(3),
.number:nth-child(6),
.number:nth-child(9),
.number:nth-child(12) {
  width: 0.3rem;
  height: 1.5rem;
}

.needles {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.h,
.m,
.s,
.center {
  display: inline-block;
  width: 7px;
  height: 20px;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50% 50% 0 0;
}

.s {
  transform: translate(-50%, -80%);
}

.h {
  background-color: black;
  transform-origin: 50% 100%;
  animation: rotate 43200s 60s infinite linear;
  transform: translate(-50%, -100%) rotateZ(5deg);
  height: 2.5rem;
  z-index: 1;
}

.m {
  background-color: rgb(176, 176, 185);
  z-index: 2;
  height: 4rem;
  width: 5px;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotateZ(60deg);
  animation: rotate 3600s 60s infinite steps(60, end);
}

.s {
  background-color: rgb(240, 31, 31);
  z-index: 3;
  height: 5rem;
  width: 3px;
  transform-origin: 50% 80%;
  animation: rotate 60s infinite steps(60, end);
}

.center {
  width: 15px;
  height: 15px;
  background-color: white;
  border: solid 4px red;
  z-index: 4;
  border-radius: 50%;
}

@keyframes rotate {
  100% {
    transform: translate(-50%, -80%) rotateZ(360deg);
  }
}

</style>
    

================================================
FILE: Cards/escannord_lazy-dingo-11.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by escannord - Tags: card */
.card {
  background-color: black;
  box-shadow: 5px 5px 2px rgb(43, 44, 44);
  position: relative;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.card button {
  width: 100%;
  background-color: blue;
  color: white;
  font-weight: bolder;
  padding: 10px;
  margin: 10px 0;
  border: 0;
  cursor: pointer;
  box-shadow: 5px 5px  lightblue;
  transition: box-shadow .5s;
}

.card * {
  position: relative;
  z-index: 2;
}

.card button:hover {
  box-shadow: 7px 7px  lightblue;
}

.card .heading {
  color: rgb(171, 171, 236);
  font-weight: bolder;
  text-transform: uppercase;
  font-size: 22px;
  animation: lim 5s infinite  alternate-reverse;
}

.card button:active {
  box-shadow: 1px 1px lightblue;
}

.card .item {
  background-color: rgba(23, 19, 26,.8);
  margin: 10px 0;
  padding: 5px 15px;
  position: relative;
}

.card .item::before {
  content: " ";
  position: absolute;
  display: inline-block;
  width: 0px;
  height: 30%;
  left: -10px;
  border: 10px solid rgb(84, 76, 90);
  top: -5px;
}

.card .item::after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent rgb(0, 0, 0) transparent;
  transform: rotate(-45deg);
  left: -5px;
  bottom: 3px;
}

.card .item:hover {
  transform: scale(1.01);
  background-color: grey;
}

.card .item svg {
  vertical-align: middle;
  margin-right: 10px;
}

.card:active:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: -1;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.1);
  animation: ripple 5s linear;
}

.card:hover {
  animation: shake 0.5s linear;
  box-shadow: 0px 0px 20px rgb(168, 168, 168);
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(10);
    opacity: 0;
  }
}

@keyframes shake {
  0% {
    transform: rotate(10deg) translate(20px);
  }

  25% {
    transform: rotate(-10deg) translate(-20px);
  }

  50% {
    transform: rotate(5deg) translate(20px);
  }

  75% {
    transform: rotate(-5deg) translate(-20px);
  }

  100% {
    transform: rotate(0deg) translate(0px);
  }
}

.card::after {
  content: " ";
  position: absolute;
  display: inline-block;
  width: 150%;
  height: 200%;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid rgb(187, 182, 182);
  background-image: linear-gradient(to top,rgba(0, 0, 0, 0.466) ,rgba(44, 38, 38, 0.342)),
  radial-gradient(circle at 0% , rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 100% , rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 100% 0%, rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 0% 100%, rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),
   linear-gradient(315deg, rgba(101, 0, 94, 0.308) 3%, rgba(60,132,206,1) 38%, rgba(48, 238, 225, 0.301) 68%, rgba(18, 21, 27, 0.37) 98%);
  background-size: 1% 1%;
  animation: wavy 20s linear infinite alternate-reverse;
}

@keyframes wavy {
  0% {
    background-position-x: 0;
    transform: translate(-50%,-50%) rotate(0deg);
  }

  50% {
    background-image: linear-gradient(to top,rgba(0, 0, 0, 0.466) ,rgba(44, 38, 38, 0.342)),
  radial-gradient(circle at 100% , rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 0% , rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 0% 100%, rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 100% 0%, rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),
   linear-gradient(315deg, rgba(101, 0, 94, 0.308) 3%, rgba(60,132,206,1) 38%, rgba(48, 238, 225, 0.301) 68%, rgba(18, 21, 27, 0.37) 98%);
  }

  75% {
  }

  100% {
    background-position-y: -100%;
    transform: translate(-50%,-50%) rotate(360deg);
  }
}

@keyframes lim {
  0% {
    text-shadow: 2px 2px 10px white;
  }

  25% {
    text-shadow: 2px 2px 15px white;
  }

  50% {
    text-shadow: 2px 2px 5px white;
  }

  75% {
    text-shadow: 2px 2px 20px white;
  }

  100% {
    text-shadow: 0px 0px 0px white;
  }
}


</style>


================================================
FILE: Cards/escannord_light-monkey-9.html
================================================
<div class="card">
  <img
    class="image"
    alt=""
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a class="instagram" href="https://www.instagram.com/uiverse.io/">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 25"
        height="25"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
        ></path>
      </svg>
    </a>
    <a class="x" href="https://twitter.com/uiverse_io">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
        ></path>
      </svg>
    </a>
    <a class="discord" href="https://discord.gg/KD8ba2uUpT">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 25 25"
        height="25"
        width="25"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by escannord  - Tags: tooltip, twitter, instagram, card, social media, discord */
.card {
  /* background-color: #171717; */
  perspective: 1000px;
  padding: 10px;
  border-radius: 5px;
  position: relative;
}
.heading {
  color: white;
  background-color: black;
  border-radius: 3px;
  padding: 5px;
  font-weight: bolder;
  animation: beat 1s infinite linear;
  position: absolute;
  top: 1px;
}
.icons {
  background-color: rgba(204, 0, 255, 0.185);
  transform: rotate(3deg);
  padding: 5px;
  border-radius: 10px;
  position: absolute;
  bottom: 16%;
  width: 90%;
  text-align: center;
  display: flex;
  justify-content: space-around;
  transition: all 0.3s;
}
.icons:hover {
  transform: rotate(3deg) rotateX(45deg);
  height: 90px;
}
.icons a {
  background-color: rgb(255, 255, 255);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  position: relative;
  transition: all 0.3s;
}

.icons .instagram:hover {
  box-shadow: 0 5px 0px 5px #e41d6dc4, 0 10px 0px 10px #e41d6d8c,
    0 15px 0px 15px #e41d6d49;
}

.icons .x:hover {
  box-shadow: 0 5px 0px 5px #000000c4, 0 10px 0px 10px #0000008c,
    0 15px 0px 15px #00000049;
}

.icons .discord:hover {
  box-shadow: 0 5px 0px 5px #5661eac4, 0 10px 0px 10px #5661ea8c,
    0 15px 0px 15px #5661ea49;
}

.icons a svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: transparent;
  border-color: rgb(176, 7, 255);
  color: rgb(209, 30, 99);
}

.icons a::before {
  display: none;
  position: absolute;
  content: "";
  border: solid 10px transparent;
  border-right-color: aliceblue;
  top: -120px;
  right: -200px;
  transition: all 0.3s;
}

.icons a::after {
  display: none;
  width: auto;
  background-color: transparent;
  color: white;
  padding: 10px;
  border-radius: 10px;
  position: absolute;
  top: -130px;
  right: -243px;
  transition: all 0.3s;
}
.icons .instagram {
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #e41d6d,
    #f80bad
  );
}

.icons .instagram svg {
  color: white;
}
.icons .x {
  background: black;
}

.icons .x svg {
  color: white;
}
.icons .discord {
  background: #5661ea;
}

.icons .discord svg {
  color: white;
}

.instagram::before {
  border-right-color: #e6683c !important;
  right: -142px !important;
}
.x::before {
  border-right-color: #000 !important;
  right: -87px !important;
}
.discord::before {
  border-right-color: #5661ea !important;
  right: -30px !important;
}
.instagram::after {
  content: "instagram";
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #e41d6d,
    #f80bad
  );
}
.x::after {
  content: "twitter";
  background-color: black !important;
  right: -160px !important;
}

.discord::after {
  content: "Discord";
  background-color: #5661ea !important;
  right: -110px !important;
}

.icons a:hover:after,
.icons a:hover:before {
  display: inline-block;
}

@keyframes beat {
  0% {
    transform: scale(1);
    box-shadow: 0px 0px 0px 0px black;
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.247),
      0px 0px 0px 5px rgba(0, 0, 0, 0.404),
      0px 0px 0px 10px rgba(0, 0, 0, 0.534);
  }
}

</style>
    

================================================
FILE: Cards/escannord_lovely-panther-66.html
================================================
<div class="card"></div>

<style>
/* From Uiverse.io by escannord  - Tags: simple, card, shadow, water */
.card {
  width: 200px;
  height: 200px;
  background-color: transparent;
  box-shadow: inset 10px 10px 10px 10px rgba(0, 0, 0, 0.158),
    10px 10px 20px rgba(0, 0, 0, 0.466),
    inset -10px -10px 10px 10px rgba(255, 255, 255, 0.897);
  border-radius: 51% 49% 62% 38% / 25% 57% 43% 75%;
  position: relative;
}

.card::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.842);
  border-radius: 80% 20% 91% 9% / 48% 67% 33% 52%;
  top: 40px;
  left: 40px;
}

.card::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.842);
  border-radius: 48% 52% 45% 55% / 48% 67% 33% 52%;
  top: 35px;
  left: 60px;
}

</style>
    

================================================
FILE: Cards/escannord_tender-deer-30.html
================================================
<div class="card">
  <div class="phone">
    <div class="face front">
      <div class="head">
        <div class="h-left">moov</div>
        <div class="h-right">
          <span class="wifi"
            ><svg
              stroke="#ffffff"
              xml:space="preserve"
              viewBox="0 0 365.892 365.892"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              xmlns="http://www.w3.org/2000/svg"
              id="Capa_1"
              version="1.1"
              width="200px"
              height="200px"
              fill="#ffffff"
              class="logo-head"
            >
              <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
              <g
                stroke-linejoin="round"
                stroke-linecap="round"
                id="SVGRepo_tracerCarrier"
              ></g>
              <g id="SVGRepo_iconCarrier">
                <g>
                  <circle r="41.494" cy="286.681" cx="182.945"></circle>
                  <path
                    d="M182.946,176.029c-35.658,0-69.337,17.345-90.09,46.398c-5.921,8.288-4.001,19.806,4.286,25.726 c3.249,2.321,6.994,3.438,10.704,3.438c5.754,0,11.423-2.686,15.021-7.724c13.846-19.383,36.305-30.954,60.078-30.954 c23.775,0,46.233,11.571,60.077,30.953c5.919,8.286,17.437,10.209,25.726,4.288c8.288-5.92,10.208-17.438,4.288-25.726 C252.285,193.373,218.606,176.029,182.946,176.029z"
                  ></path>
                  <path
                    d="M182.946,106.873c-50.938,0-99.694,21.749-133.77,59.67c-6.807,7.576-6.185,19.236,1.392,26.044 c3.523,3.166,7.929,4.725,12.32,4.725c5.051-0.001,10.082-2.063,13.723-6.116c27.091-30.148,65.849-47.439,106.336-47.439 s79.246,17.291,106.338,47.438c6.808,7.576,18.468,8.198,26.043,1.391c7.576-6.808,8.198-18.468,1.391-26.043 C282.641,128.621,233.883,106.873,182.946,106.873z"
                  ></path>
                  <path
                    d="M360.611,112.293c-47.209-48.092-110.305-74.577-177.665-74.577c-67.357,0-130.453,26.485-177.664,74.579 c-7.135,7.269-7.027,18.944,0.241,26.079c3.59,3.524,8.255,5.282,12.918,5.281c4.776,0,9.551-1.845,13.161-5.522 c40.22-40.971,93.968-63.534,151.344-63.534c57.379,0,111.127,22.563,151.343,63.532c7.136,7.269,18.812,7.376,26.08,0.242 C367.637,131.238,367.745,119.562,360.611,112.293z"
                  ></path>
                </g>
              </g></svg
          ></span>
          <span class="network"
            ><svg
              stroke-width="0.00016"
              stroke="#000000"
              fill="#000000"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16.00 16.00"
              class="logo-head"
            >
              <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
              <g
                stroke-width="0.032"
                stroke="#CCCCCC"
                stroke-linejoin="round"
                stroke-linecap="round"
                id="SVGRepo_tracerCarrier"
              ></g>
              <g id="SVGRepo_iconCarrier">
                <path
                  fill="#ffffff"
                  d="m 13 1 c -0.554688 0 -1 0.445312 -1 1 v 12 c 0 0.554688 0.445312 1 1 1 h 1 c 0.554688 0 1 -0.445312 1 -1 v -12 c 0 -0.554688 -0.445312 -1 -1 -1 z m -4 3 c -0.554688 0 -1 0.445312 -1 1 v 9 c 0 0.554688 0.445312 1 1 1 h 1 c 0.554688 0 1 -0.445312 1 -1 v -9 c 0 -0.554688 -0.445312 -1 -1 -1 z m -4 3 c -0.554688 0 -1 0.445312 -1 1 v 6 c 0 0.554688 0.445312 1 1 1 h 1 c 0.554688 0 1 -0.445312 1 -1 v -6 c 0 -0.554688 -0.445312 -1 -1 -1 z m -4 3 c -0.554688 0 -1 0.445312 -1 1 v 3 c 0 0.554688 0.445312 1 1 1 h 1 c 0.554688 0 1 -0.445312 1 -1 v -3 c 0 -0.554688 -0.445312 -1 -1 -1 z m 0 0"
                ></path>
              </g></svg
          ></span>
          <span class="battery"
            ><svg
              transform="matrix(-1, 0, 0, 1, 0, 0)"
              fill="#ffffff"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="1 10 20 5"
              class="logo-head"
            >
              <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
              <g
                stroke-linejoin="round"
                stroke-linecap="round"
                id="SVGRepo_tracerCarrier"
              ></g>
              <g id="SVGRepo_iconCarrier">
                <path fill="none" d="M24,0V24H0V0Z"></path>
                <path
                  fill-opacity="0.3"
                  d="M20,10V8.33A1.34,1.34,0,0,0,18.67,7H8V17H18.67A1.34,1.34,0,0,0,20,15.67V14h2V10Z"
                ></path>
                <path
                  d="M3.33,17H8V7H3.34A1.34,1.34,0,0,0,2,8.33v7.33A1.34,1.34,0,0,0,3.33,17Z"
                ></path>
              </g></svg
          ></span>
        </div>
      </div>
      <div class="search">
        <input placeholder="Search..." type="search" class="search-google" />
        <svg
          width="24"
          viewBox="0 0 24 24"
          height="24"
          xmlns="http://www.w3.org/2000/svg"
          class="logo-google"
        >
          <path
            fill="#4285F4"
            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
          ></path>
          <path
            fill="#34A853"
            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
          ></path>
          <path
            fill="#FBBC05"
            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
          ></path>
          <path
            fill="#EA4335"
            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
          ></path>
          <path fill="none" d="M1 1h22v22H1z"></path>
        </svg>
      </div>

      <div class="date">
        <span class="hour">10:50</span>
        <span class="period">PM</span><br />
        <span class="day">Sat, 04 Nov</span>
      </div>

      <div class="home">
        <span class="app">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 28.99 31.99"
            class="logo-app"
          >
            <g data-name="Capa 2">
              <g data-name="Capa 1">
                <path
                  style="fill:#ea4335"
                  d="M13.54 15.28.12 29.34a3.66 3.66 0 0 0 5.33 2.16l15.1-8.6Z"
                ></path>
                <path
                  style="fill:#fbbc04"
                  d="m27.11 12.89-6.53-3.74-7.35 6.45 7.38 7.28 6.48-3.7a3.54 3.54 0 0 0 1.5-4.79 3.62 3.62 0 0 0-1.5-1.5z"
                ></path>
                <path
                  style="fill:#4285f4"
                  d="M.12 2.66a3.57 3.57 0 0 0-.12.92v24.84a3.57 3.57 0 0 0 .12.92L14 15.64Z"
                ></path>
                <path
                  style="fill:#34a853"
                  d="m13.64 16 6.94-6.85L5.5.51A3.73 3.73 0 0 0 3.63 0 3.64 3.64 0 0 0 .12 2.65Z"
                ></path>
              </g>
            </g></svg
        ></span>
        <span class="app">
          <svg
            viewBox="52 42 88 66"
            xmlns="http://www.w3.org/2000/svg"
            class="logo-app"
          >
            <path
              d="M58 108h14V74L52 59v43c0 3.32 2.69 6 6 6"
              fill="#4285f4"
            ></path>
            <path
              d="M120 108h14c3.32 0 6-2.69 6-6V59l-20 15"
              fill="#34a853"
            ></path>
            <path
              d="M120 48v26l20-15v-8c0-7.42-8.47-11.65-14.4-7.2"
              fill="#fbbc04"
            ></path>
            <path d="M72 74V48l24 18 24-18v26L96 92" fill="#ea4335"></path>
            <path
              d="M52 51v8l20 15V48l-5.6-4.2c-5.94-4.45-14.4-.22-14.4 7.2"
              fill="#c5221f"
            ></path>
          </svg>
        </span>
        <span class="app full-logo">
          <svg
            class="logo-app"
            clip-rule="evenodd"
            fill-rule="evenodd"
            height="2500"
            image-rendering="optimizeQuality"
            shape-rendering="geometricPrecision"
            text-rendering="geometricPrecision"
            viewBox="0 0 13100.88 13100.899999999996"
            width="2500"
            xmlns="http://www.w3.org/2000/svg"
          >
            <linearGradient
              id="a"
              gradientUnits="userSpaceOnUse"
              x1="6550.42"
              x2="6550.42"
              y1="-12.51"
              y2="13100.61"
            >
              <stop offset="0" stop-color="#61fd7d"></stop>
              <stop offset="1" stop-color="#2bb826"></stop>
            </linearGradient>
            <path
              d="M13099.83 9776.31c0 71.72-2.2 227.29-6.5 347.45-10.55 294.01-33.85 673.42-69.1 846.29-52.97 259.78-132.95 504.98-237.21 709.07-123.36 241.43-280.72 457.68-467.71 644.33-186.58 186.27-402.63 343.01-643.7 465.88-205.15 104.54-451.88 184.56-713.14 237.31-171.15 34.56-547.71 57.41-839.85 67.8-120.29 4.3-275.88 6.46-347.34 6.46l-6450.71-1.04c-71.74 0-227.28-2.2-347.44-6.51-294.03-10.54-673.42-33.85-846.3-69.08-259.78-52.99-505-132.95-709.08-237.21-241.43-123.38-457.68-280.74-644.32-467.73-186.27-186.58-343.01-402.62-465.87-643.68-104.57-205.17-184.59-451.9-237.33-713.15-34.54-171.15-57.4-547.7-67.8-839.86C2.16 10002.37 0 9846.78 0 9775.33l1.02-6450.74c0-71.73 2.2-227.28 6.5-347.45 10.56-294.02 33.85-673.42 69.09-846.29 52.98-259.78 132.94-504.99 237.22-709.08 123.36-241.43 280.73-457.68 467.71-644.33 186.58-186.26 402.63-343.01 643.69-465.88C1630.4 207.01 1877.14 127 2138.4 74.25c171.13-34.56 547.7-57.42 839.85-67.8C3098.53 2.16 3254.14 0 3325.57 0L9776.3 1.04c71.74 0 227.28 2.19 347.44 6.49 294.03 10.56 673.41 33.85 846.31 69.1 259.76 52.97 504.98 132.94 709.07 237.21 241.42 123.36 457.67 280.73 644.31 467.72 186.26 186.57 343.01 402.61 465.87 643.69 104.57 205.17 184.59 451.89 237.33 713.15 34.54 171.14 57.39 547.7 67.8 839.86 4.29 120.28 6.45 275.88 6.45 347.34z"
              fill="url(#a)"
            ></path>
            <g fill="#fff">
              <path
                d="M10021.26 3099.41C9134.31 2211.72 7954.77 1722.6 6698.04 1722.1c-2589.39 0-4696.83 2106.65-4697.87 4696.06-.34 827.71 215.98 1635.68 627.09 2347.84l-666.48 2433.65 2490.4-653.05c686.18 374.12 1458.72 571.3 2244.99 571.63h1.94c2589.13 0 4696.77-2106.91 4697.82-4696.34.49-1254.86-487.7-2434.81-1374.67-3322.5v.01zM6698.1 10325.07h-1.6c-700.65-.27-1387.85-188.44-1987.37-544.09l-142.59-84.59-1477.84 387.55 394.46-1440.42-92.86-147.69c-390.86-621.48-597.3-1339.82-596.99-2077.36.85-2152.2 1752.49-3903.19 3906.3-3903.19 1042.91.4 2023.3 406.97 2760.52 1144.78 737.22 737.8 1142.98 1718.54 1142.59 2761.54-.84 2152.38-1752.47 3903.47-3904.62 3903.47z"
              ></path>
              <path
                d="M5122.98 8693.01c33.06 19.95 100.98 19.93 256.76 19.79 661.06-.58 1232.08-2.61 1638.23-2.61 1895.48 0 1845.67-1995.45 959.41-2244.41 129.8-229.98 721.23-661.97 355.45-1554.91-361.71-882.96-1917.18-682.59-2981.02-682.07-393.63.05-334.77 290.91-332.75 743.14 3.23 716.29.58 2655.15.1 3493.29-.1 169.9 51.17 196.01 103.82 227.78zm820.15-731.27c178.98 0 601.15 0 963.01-.57 409.8-.64 774.72-192.32 765.6-600.28-6.7-384.3-262.37-510.42-617.22-545.63-338 3.24-724.6 3.24-1111.4 3.24v1143.24zm0-1915.05c712.98-9.77 988.03 28.74 1377.3-68.76 267.46-151.82 384.31-714.9 1.5-906.15-265.94-132.87-1051.82-87.41-1378.8-73.79V6046.7z"
              ></path>
            </g>
          </svg>
        </span>
        <span class="app full-logo">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="2500"
            viewBox="126.445 2.281 589 589"
            height="2500"
            class="logo-app"
          >
            <circle r="294.5" fill="#3c5a9a" cy="296.781" cx="420.945"></circle>
            <path
              fill="#fff"
              d="m516.704 92.677h-65.239c-38.715 0-81.777 16.283-81.777 72.402.189 19.554 0 38.281 0 59.357h-44.788v71.271h46.174v205.177h84.847v-206.531h56.002l5.067-70.117h-62.531s.14-31.191 0-40.249c0-22.177 23.076-20.907 24.464-20.907 10.981 0 32.332.032 37.813 0v-70.403z"
            ></path></svg
        ></span>
        <span class="app"> </span>
        <span class="app"></span>
        <span class="app"></span>
        <span class="app"></span>
        <span class="app"></span>
        <span class="app"></span>
      </div>
      <div class="bullet"></div>
      <div class="home home2">
        <span class="app"></span>
        <span class="app logo-phone">
          <svg
            xml:space="preserve"
            style="enable-background:new 0 0 122.88 122.27"
            viewBox="0 0 122.88 122.27"
            y="0px"
            x="0px"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xmlns="http://www.w3.org/2000/svg"
            id="Layer_1"
            version="1.1"
            class="logo-app"
            fill="#ffffff"
          >
            <g>
              <path
                d="M33.84,50.25c4.13,7.45,8.89,14.6,15.07,21.12c6.2,6.56,13.91,12.53,23.89,17.63c0.74,0.36,1.44,0.36,2.07,0.11 c0.95-0.36,1.92-1.15,2.87-2.1c0.74-0.74,1.66-1.92,2.62-3.21c3.84-5.05,8.59-11.32,15.3-8.18c0.15,0.07,0.26,0.15,0.41,0.21 l22.38,12.87c0.07,0.04,0.15,0.11,0.21,0.15c2.95,2.03,4.17,5.16,4.2,8.71c0,3.61-1.33,7.67-3.28,11.1 c-2.58,4.53-6.38,7.53-10.76,9.51c-4.17,1.92-8.81,2.95-13.27,3.61c-7,1.03-13.56,0.37-20.27-1.69 c-6.56-2.03-13.17-5.38-20.39-9.84l-0.53-0.34c-3.31-2.07-6.89-4.28-10.4-6.89C31.12,93.32,18.03,79.31,9.5,63.89 C2.35,50.95-1.55,36.98,0.58,23.67c1.18-7.3,4.31-13.94,9.77-18.32c4.76-3.84,11.17-5.94,19.47-5.2c0.95,0.07,1.8,0.62,2.25,1.44 l14.35,24.26c2.1,2.72,2.36,5.42,1.21,8.12c-0.95,2.21-2.87,4.25-5.49,6.15c-0.77,0.66-1.69,1.33-2.66,2.03 c-3.21,2.33-6.86,5.02-5.61,8.18L33.84,50.25L33.84,50.25L33.84,50.25z"
              ></path>
            </g>
          </svg>
        </span>
        <span class="app menu"
          ><svg
            class="logo-menu"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 256 256"
            xml:space="preserve"
          >
            <g>
              <g>
                <g>
                  <path
                    fill="#ffffff"
                    d="M10,39.5V69h29.5H69V39.5V10H39.5H10V39.5z"
                  ></path>
                  <path
                    fill="#ffffff"
                    d="M98.5,39.5V69H128h29.5V39.5V10H128H98.5V39.5z"
                  ></path>
                  <path
                    fill="#ffffff"
                    d="M187,39.5V69h29.5H246V39.5V10h-29.5H187V39.5z"
                  ></path>
                  <path
                    fill="#ffffff"
                    d="M10,128v29.5h29.5H69V128V98.5H39.5H10V128z"
                  ></path>
                  <path
                    fill="#ffffff"
                    d="M98.5,128v29.5H128h29.5V128V98.5H128H98.5V128z"
                  ></path>
                  <path
                    fill="#ffffff"
                    d="M187,128v29.5h29.5H246V128V98.5h-29.5H187V128z"
                  ></path>
                  <path
                    fill="#ffffff"
                    d="M10,216.5V246h29.5H69v-29.5V187H39.5H10V216.5z"
                  ></path>
                  <path
                    fill="#ffffff"
                    d="M98.5,216.5V246H128h29.5v-29.5V187H128H98.5V216.5z"
                  ></path>
                  <path
                    fill="#ffffff"
                    d="M187,216.5V246h29.5H246v-29.5V187h-29.5H187V216.5z"
                  ></path>
                </g>
              </g>
            </g></svg
        ></span>
        <span class="app message"
          ><svg
            xml:space="preserve"
            style="enable-background:new 0 0 120.46 122.88"
            viewBox="0 0 120.46 122.88"
            y="0px"
            x="0px"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xmlns="http://www.w3.org/2000/svg"
            id="Layer_1"
            version="1.1"
            fill="blue"
            class="logo-app"
          >
            <g>
              <path
                d="M17.2,0h62.29c4.73,0,9.03,1.93,12.15,5.05c3.12,3.12,5.05,7.42,5.05,12.15v38.35c0,4.73-1.93,9.03-5.05,12.15 c-3.12,3.12-7.42,5.05-12.15,5.05H46.92L20.81,95.2c-1.21,1.04-3.04,0.9-4.08-0.32c-0.51-0.6-0.74-1.34-0.69-2.07l1.39-20.07H17.2 c-4.73,0-9.03-1.93-12.15-5.05C1.93,64.58,0,60.28,0,55.55V17.2c0-4.73,1.93-9.03,5.05-12.15C8.16,1.93,12.46,0,17.2,0L17.2,0 L17.2,0z M63.12,29.37c4.48,0,8.11,3.63,8.11,8.11c0,4.48-3.63,8.11-8.11,8.11c-4.48,0-8.11-3.63-8.11-8.11 C55.01,33,58.64,29.37,63.12,29.37L63.12,29.37z M33.69,29.37c4.48,0,8.11,3.63,8.11,8.11c0,4.48-3.63,8.11-8.11,8.11 s-8.11-3.63-8.11-8.11C25.58,33,29.21,29.37,33.69,29.37L33.69,29.37z M106.79,27.98c3.37,0.65,6.39,2.31,8.73,4.65 c3.05,3.05,4.95,7.26,4.95,11.9v38.35c0,4.64-1.89,8.85-4.95,11.9c-3.05,3.05-7.26,4.95-11.9,4.95h-0.61l1.42,20.44l0,0 c0.04,0.64-0.15,1.3-0.6,1.82c-0.91,1.07-2.52,1.19-3.58,0.28l-26.21-23.2H39.49l17.01-17.3h36.04c7.86,0,14.3-6.43,14.3-14.3 V29.11C106.83,28.73,106.82,28.35,106.79,27.98L106.79,27.98L106.79,27.98z M79.48,5.8H17.2c-3.13,0-5.98,1.28-8.05,3.35 C7.08,11.22,5.8,14.06,5.8,17.2v38.35c0,3.13,1.28,5.98,3.35,8.05c2.07,2.07,4.92,3.35,8.05,3.35h3.34v0.01l0.19,0.01 c1.59,0.11,2.8,1.49,2.69,3.08l-1.13,16.26l21.54-18.52c0.52-0.52,1.24-0.84,2.04-0.84h33.61c3.13,0,5.98-1.28,8.05-3.35 c2.07-2.07,3.35-4.92,3.35-8.05V17.2c0-3.13-1.28-5.98-3.35-8.05C85.46,7.08,82.61,5.8,79.48,5.8L79.48,5.8L79.48,5.8z"
                class="st0"
              ></path>
            </g></svg
        ></span>
        <span class="app"></span>
      </div>
      <div class="navigation">
        <span class="btn btn-task"></span>
        <span class="btn btn-home"></span>
        <span class="btn btn-back"></span>
      </div>
      <div class="front-camera"></div>
    </div>

    <div class="face back">back</div>
    <div class="face top"></div>
    <div class="face bottom">
      <div class="elements">
        <span class="headphone"></span>
        <span class="microphone"></span>
        <span class="charge"></span>
        <span class="speaker"></span>
      </div>
    </div>
    <div class="face left"></div>
    <div class="face right"></div>
  </div>
</div>

<style>
/* From Uiverse.io by escannord  - Tags: 3d, phone, card, realistic */
.card {
  perspective: 1000px;
  transform-style: preserve-3d;
  position: relative;
}

.phone {
  /* transform: rotateX(40deg); */
  position: relative;
  perspective: 1000px;
  width: 150px;
  height: 254px;
  transform-style: preserve-3d;
  transform: rotateX(80deg) rotateY(0deg) rotateZ(30deg);
  transition: all 1s;
  /* animation: rotate 5s linear infinite; */
}

.phone:hover {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.5);
}
.front {
  width: 100%;
  height: 100%;
  background: lightgrey;
  border: solid 5px rgb(0, 0, 0);
  border-radius: 10px;
  border-top: 15px solid;
  border-bottom: 15px solid;
  background: lightblue;
  padding: 0.5rem;
  text-align: center;
  transform: translateY(20px);
  background: radial-gradient(
      circle,
      rgb(170, 162, 162),
      rgb(44, 8, 102) 30%,
      rgba(26, 78, 189, 0.226) 0%
    ),
    radial-gradient(
      circle at 40px 40px,
      rgb(233, 228, 228),
      rgb(41, 35, 49) 30%,
      rgba(88, 84, 84, 0) 0%
    ),
    radial-gradient(
      circle at 600px 200px,
      rgb(233, 228, 228),
      rgb(27, 26, 26) 10%,
      rgba(88, 84, 84, 0) 0%
    ),
    radial-gradient(
      circle at 800px 100px,
      rgb(233, 228, 228),
      #333 10%,
      rgba(88, 84, 84, 0) 0%
    ),
    radial-gradient(
      circle at 700px 500px,
      rgb(233, 228, 228),
      #333 2%,
      rgba(88, 84, 84, 0.123) 0%
    ),
    radial-gradient(
      circle at 200px 400px,
      rgb(233, 228, 228),
      #333 1%,
      rgba(88, 84, 84, 0) 0%
    ),
    radial-gradient(
      circle at 300px 700px,
      rgb(233, 228, 228),
      #333 15%,
      rgba(88, 84, 84, 0) 0%
    ),
    radial-gradient(
      circle at 650px 400px,
      rgb(233, 228, 228),
      #333 10%,
      rgba(88, 84, 84, 0) 0%
    ),
    radial-gradient(
      circle at 600px 600px,
      rgb(233, 228, 228),
      #333 1%,
      rgba(88, 84, 84, 0.959) 0%
    );
  position: absolute;
  top: 0;
  left: 0;
  /* outline: 2px solid rgb(116, 115, 115); */
}
.front .home {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  grid-template-rows: repeat(2, 1fr);
}

.home2 {
  grid-template-rows: repeat(1, 1fr) !important;
  margin-bottom: 0.5rem;
}

.front .home .app {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: rgb(255, 255, 255);
  border-radius: 30%;
  text-align: center;
  position: relative;
}
.front .home .app .logo-app {
  width: 70%;
  height: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.full-logo {
  background-color: transparent !important;
}

.full-logo .logo-app {
  width: 100% !important;
  height: 100% !important;
}

.search {
  position: relative;
  margin-top: 0.2rem;
  margin-bottom: 1rem;
}

.logo-google {
  position: absolute;
  width: 10px;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}

.search-google {
  width: 100%;
  border-radius: 20px;
  padding: 0.3rem;
  padding-left: 1rem;
  font-size: 9px;
  height: 1.5rem;
  border: none;
  outline: none;
}

.date {
  color: white;
  position: relative;
  margin-bottom: 1rem;
  text-align: left;
}

.date .hour {
  font-size: large;
}

.date * {
  display: inline-block;
}

.date .period,
.date .day {
  font-size: 9px;
  line-height: 10px;
}

.bullet {
  display: inline-block;
  width: 30%;
  height: 0;
  border-bottom: 5px dotted rgba(255, 255, 255, 0.651);
}

.navigation {
  display: flex;
  justify-content: space-around;
}

.navigation .btn {
  display: inline-block;
  width: 10px;
  height: 10px;
}

.navigation .btn-home {
  border-radius: 50%;
  border: solid 1px white;
}

.navigation .btn-back {
  border-radius: 35%;
  border: solid 1px white;
  border-left: 1px solid transparent;
}

.navigation .btn-task {
  border-radius: 35%;
  border: solid 1px white;
}

.face {
  position: absolute;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  background-color: rgb(24, 23, 24);
  top: 50%;
  left: 50%;
}

.head {
  font-size: 6px;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 10px;
  display: flex;
  justify-content: space-between;
}

.head .h-left {
  color: white;
  margin: 0 2px;
}
.head .h-right span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 1px;
}

.logo-head {
  width: 100%;
  height: 100%;
}

.top,
.bottom {
  width: 150px;
  height: 10px;
}

.right,
.left {
  height: 254px;
  width: 10px;
}

.front {
  transform: translate(-50%, -50%) translateZ(5px);
}
.back {
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(5px);
}
.left {
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(75px);
}
.right {
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(75px);
}
.top {
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(127px);
}
.bottom {
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(127px);
}

.bottom .elements {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
}

.bottom .elements .headphone {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #333;
}

.bottom .elements .microphone {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #333;
}

.bottom .elements .charge {
  display: inline-block;
  width: 20px;
  height: 6px;
  position: relative;
  border-radius: 3px 3px 10px 10px;
  background-color: #333;
}

.charge::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  position: absolute;
  border-radius: 3px 3px 10px 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(26, 25, 25);
}

.bottom .elements .speaker {
  display: inline-block;
  width: 30px;
  height: 0;
  border-top: #333 dotted 5px;
}

.front-camera {
  width: 10px;
  height: 10px;
  background-color: rgb(26, 25, 25);
  border-radius: 50%;
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
}

.front-camera::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  display: inline-block;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at 6px 2px,
    rgba(255, 255, 255, 0.726),
    rgb(0, 0, 0)
  );
}

.front-camera::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  display: inline-block;
  top: 50%;
  left: 50%;
  width: 25%;
  height: 25%;
  z-index: 2;
  transform: translate(-50%, -50%);
  background-color: #212121;
}

.menu {
  background-color: transparent !important;
}

.logo-menu {
  width: 100%;
  height: 100%;
}

.logo-phone {
  background-color: #33ff77 !important;
}

.message {
  /* background-color: blue!important; */
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

</style>
    

================================================
FILE: Cards/eslam-hany_nasty-zebra-54.html
================================================
<div class="card">HOVER</div>
<style>
/* From Uiverse.io by eslam-hany - Tags: card */
.card {
  position: relative;
  width: 220px;
  height: 320px;
  background: mediumturquoise;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
}

.card::before,
.card::after {
  position: absolute;
  content: "";
  width: 20%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  background-color: lightblue;
  transition: all 0.5s;
}

.card::before {
  top: 0;
  right: 0;
  border-radius: 0 15px 0 100%;
}

.card::after {
  bottom: 0;
  left: 0;
  border-radius: 0 100%  0 15px;
}

.card:hover::before,
.card:hover:after {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  transition: all 0.5s;
}

.card:hover:after {
  content: "HELLO";
}
</style>


================================================
FILE: Cards/eslam-hany_selfish-bobcat-73.html
================================================
 <div class="book">
    <p>Hello</p>
    <div class="cover">
        <p>Hover Me</p>
    </div>
   </div>
<style>
/* From Uiverse.io by eslam-hany - Tags: card */
.book {
  position: relative;
  border-radius: 10px;
  width: 220px;
  height: 300px;
  background-color: whitesmoke;
  -webkit-box-shadow: 1px 1px 12px #000;
  box-shadow: 1px 1px 12px #000;
  -webkit-transform: preserve-3d;
  -ms-transform: preserve-3d;
  transform: preserve-3d;
  -webkit-perspective: 2000px;
  perspective: 2000px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #000;
}

.cover {
  top: 0;
  position: absolute;
  background-color: lightgray;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform-origin: 0;
  -ms-transform-origin: 0;
  transform-origin: 0;
  -webkit-box-shadow: 1px 1px 12px #000;
  box-shadow: 1px 1px 12px #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.book:hover .cover {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: rotatey(-80deg);
  -ms-transform: rotatey(-80deg);
  transform: rotatey(-80deg);
}

p {
  font-size: 20px;
  font-weight: bolder;
}
</style>


================================================
FILE: Cards/estefaniarizzo_tame-pug-97.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by estefaniarizzo  - Tags: material design, green, card, hover, modern, html, css, cool card */
.card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  position: relative;
  transition: transform 0.3s ease;
  padding: 10px 20px;
}

.card:hover {
  transform: translateY(-5px);
}

.image {
  display: block;
  width: 100%;
  max-width: 200px;
  margin: auto;
  border-bottom: 2px solid #f0f0f0;
}

.heading {
  font-size: 1.8em;
  font-weight: bold;
  margin-top: 20px;
  color: #333;
}

.sub-heading {
  font-size: 1.2em;
  color: #666;
  margin-top: 10px;
}

.icons {
  margin-top: 20px;
}

.icons a {
  display: inline-block;
  margin-right: 20px;
  transition: transform 0.3s ease;
}

.icons a:last-child {
  margin-right: 0;
}

.icons a:hover {
  transform: translateY(-3px);
}

.icons a svg {
  width: 40px;
  height: 40px;
  fill: #555;
  transition: fill 0.3s ease;
}

.icons a:hover svg {
  fill: #4078c0;
}

@keyframes borderAnimationTop {
  0%,
  100% {
    border-color: #ff3300;
  }
  20% {
    border-color: #c8ff00;
  }
  40% {
    border-color: #48ff00;
  }
  50% {
    border-color: #33ccff;
  }
  70% {
    border-color: #0004ff;
  }
  90% {
    border-color: #8400ff;
  }
}

@keyframes borderAnimationRight {
  0%,
  100% {
    border-color: #ff3300;
  }
  20% {
    border-color: #c8ff00;
  }
  40% {
    border-color: #48ff00;
  }
  50% {
    border-color: #33ccff;
  }
  70% {
    border-color: #0004ff;
  }
  90% {
    border-color: #8400ff;
  }
}

@keyframes borderAnimationBottom {
  0%,
  100% {
    border-color: #ff3300;
  }
  20% {
    border-color: #c8ff00;
  }
  40% {
    border-color: #48ff00;
  }
  50% {
    border-color: #33ccff;
  }
  70% {
    border-color: #0004ff;
  }
  90% {
    border-color: #8400ff;
  }
}

@keyframes borderAnimationLeft {
  0%,
  100% {
    border-color: #ff3300;
  }
  20% {
    border-color: #c8ff00;
  }
  40% {
    border-color: #48ff00;
  }
  50% {
    border-color: #33ccff;
  }
  70% {
    border-color: #0004ff;
  }
  90% {
    border-color: #8400ff;
  }
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border: 3px solid transparent;
  border-radius: 10px;
  animation: borderAnimationTop 3s infinite, borderAnimationRight 3s infinite,
    borderAnimationBottom 3s infinite, borderAnimationLeft 3s infinite;
}

</style>
    

================================================
FILE: Cards/fanishah_average-panther-44.html
================================================

<div class="card"></div>
<style>
/* From Uiverse.io by fanishah - Tags: card */
.card {
 width: 12.5rem;
 height: 17rem;
 background-color: #212121;
 border-radius: 1rem;
 border: #212121 0.2rem solid;
 transition: all 0.4s ease-in;
 box-shadow: 0.4rem 0.4rem 0.6rem #00000040;
}

.card:hover {
 transform: translateY(-1.5rem);
 border: #f2295bf0 0.2em solid;
 border-radius: 2.5rem 0 2.5rem 0;
}
</style>


================================================
FILE: Cards/floki1250_hot-chipmunk-40.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by floki1250  - Tags: animation, 3d, gradient, card, hover, image, html, css */
.card {
  background-color: blue;
  background: radial-gradient(
    ellipse at bottom,
    rgb(9, 76, 114) 0%,
    rgb(1, 41, 63) 100%
  );
  padding: 2rem;
  border-radius: 1rem;
  border: 2px solid white;
}
.image {
  animation: myAnim 50s linear 0s infinite normal forwards;
}
.heading {
  color: white;
  font-weight: 500;
}
.icons a {
  color: aliceblue;
}
.icons a svg {
  color: white;
  transition: all 0.5s ease-in-out;
}
.icons a svg:hover {
  color: #bf3dd2;
  scale: 1.25;
}
@keyframes myAnim {
  0%,
  100% {
    transform: translateY(0) rotate(0);
    transform-origin: 50% 50%;
  }

  15% {
    transform: translateY(-30px) rotate(-6deg);
  }

  30% {
    transform: translateY(15px) rotate(6deg);
  }

  45% {
    transform: translateY(-15px) rotate(-3.6deg);
  }

  60% {
    transform: translateY(9px) rotate(2.4deg);
  }

  75% {
    transform: translateY(-6px) rotate(-1.2deg);
  }
}

</style>
    

================================================
FILE: Cards/gagan-gv_afraid-otter-91.html
================================================
<div class="card">
  <div class="img">
    <svg height="30" width="30" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path fill="rgba(236,240,241,1)" d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20 15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>
  </div>
  <span class="heading">John Doe</span>
  <p>
    <svg height="30" width="30" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
      <path fill="white" d="M962.267429 233.179429q-38.253714 56.027429-92.598857 95.451429 0.585143 7.972571 0.585143 23.990857 0 74.313143-21.723429 148.260571t-65.974857 141.970286-105.398857 120.32-147.456 83.456-184.539429 31.158857q-154.843429 0-283.428571-82.870857 19.968 2.267429 44.544 2.267429 128.585143 0 229.156571-78.848-59.977143-1.170286-107.446857-36.864t-65.170286-91.136q18.870857 2.852571 34.889143 2.852571 24.576 0 48.566857-6.290286-64-13.165714-105.984-63.707429t-41.984-117.394286l0-2.267429q38.838857 21.723429 83.456 23.405714-37.741714-25.161143-59.977143-65.682286t-22.308571-87.990857q0-50.322286 25.161143-93.110857 69.12 85.138286 168.301714 136.265143t212.260571 56.832q-4.534857-21.723429-4.534857-42.276571 0-76.580571 53.979429-130.56t130.56-53.979429q80.018286 0 134.875429 58.294857 62.317714-11.995429 117.174857-44.544-21.138286 65.682286-81.115429 101.741714 53.174857-5.705143 106.276571-28.598857z"></path>
    </svg>
    <svg height="30" width="30" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
      <path fill="white" d="M123.52064 667.99143l344.526782 229.708899 0-205.136409-190.802457-127.396658zM88.051421 585.717469l110.283674-73.717469-110.283674-73.717469 0 147.434938zM556.025711 897.627196l344.526782-229.708899-153.724325-102.824168-190.802457 127.396658 0 205.136409zM512 615.994287l155.406371-103.994287-155.406371-103.994287-155.406371 103.994287zM277.171833 458.832738l190.802457-127.396658 0-205.136409-344.526782 229.708899zM825.664905 512l110.283674 73.717469 0-147.434938zM746.828167 458.832738l153.724325-102.824168-344.526782-229.708899 0 205.136409zM1023.926868 356.00857l0 311.98286q0 23.402371-19.453221 36.566205l-467.901157 311.98286q-11.993715 7.459506-24.57249 7.459506t-24.57249-7.459506l-467.901157-311.98286q-19.453221-13.163834-19.453221-36.566205l0-311.98286q0-23.402371 19.453221-36.566205l467.901157-311.98286q11.993715-7.459506 24.57249-7.459506t24.57249 7.459506l467.901157 311.98286q19.453221 13.163834 19.453221 36.566205z"></path>
    </svg>
    <svg height="30" width="30" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
      <path fill="white" d="M950.930286 512q0 143.433143-83.748571 257.974857t-216.283429 158.573714q-15.433143 2.852571-22.601143-4.022857t-7.168-17.115429l0-120.539429q0-55.442286-29.696-81.115429 32.548571-3.437714 58.587429-10.313143t53.686857-22.308571 46.299429-38.034286 30.281143-59.977143 11.702857-86.016q0-69.12-45.129143-117.686857 21.138286-52.004571-4.534857-116.589714-16.018286-5.12-46.299429 6.290286t-52.589714 25.161143l-21.723429 13.677714q-53.174857-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.689143-22.016-49.152-7.68q-25.161143 64.585143-4.022857 116.589714-45.129143 48.566857-45.129143 117.686857 0 48.566857 11.702857 85.723429t29.988571 59.977143 46.006857 38.253714 53.686857 22.308571 58.587429 10.313143q-22.820571 20.553143-28.013714 58.88-11.995429 5.705143-25.746286 8.557714t-32.548571 2.852571-37.449143-12.288-31.744-35.693714q-10.825143-18.285714-27.721143-29.696t-28.306286-13.677714l-11.410286-1.682286q-11.995429 0-16.603429 2.56t-2.852571 6.582857 5.12 7.972571 7.460571 6.875429l4.022857 2.852571q12.580571 5.705143 24.868571 21.723429t17.993143 29.110857l5.705143 13.165714q7.460571 21.723429 25.161143 35.108571t38.253714 17.115429 39.716571 4.022857 31.744-1.974857l13.165714-2.267429q0 21.723429 0.292571 50.834286t0.292571 30.866286q0 10.313143-7.460571 17.115429t-22.820571 4.022857q-132.534857-44.032-216.283429-158.573714t-83.748571-257.974857q0-119.442286 58.88-220.306286t159.744-159.744 220.306286-58.88 220.306286 58.88 159.744 159.744 58.88 220.306286z"></path>
    </svg>
  </p>
</div>
<style>
/* From Uiverse.io by gagan-gv - Tags: card, hover, smooth, about me */
.card {
  width: 200px;
  height: 250px;
  background: #07182E;
  border-radius: 5px;
  text-align: center;
  color: #f0f0f0;
  overflow: hidden;
  font-family: inherit;
  z-index: 1;
}

.img {
  display: flex;
  margin: 60px auto 10px auto;
  width: 75px;
  height: 75px;
  border: 1px solid #f0f0f0;
  border-radius: 50%;
  font-size: 11px;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
  z-index: 99;
  background-color: #152f50;
}

p {
  opacity: 0;
  transition: all 0.5s;
}

.heading {
  padding: 10px;
  font-weight: 500;
  font-size: 18px;
}

svg {
  padding: 0 5px;
  cursor: pointer;
}

.card:hover .img {
  transform: scale(1.1);
  border: 1px solid #f0f0f0;
}

.card:hover h1,
.card:hover p {
  opacity: 1;
}
</style>


================================================
FILE: Cards/gagan-gv_lovely-dragon-72.html
================================================
<div class="card">
<div class="blob"></div>
  <span class="img"></span>
  <h2>John<br><span>Doe</span></h2>
  <p>
    <svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
      <path d="M962.267429 233.179429q-38.253714 56.027429-92.598857 95.451429 0.585143 7.972571 0.585143 23.990857 0 74.313143-21.723429 148.260571t-65.974857 141.970286-105.398857 120.32-147.456 83.456-184.539429 31.158857q-154.843429 0-283.428571-82.870857 19.968 2.267429 44.544 2.267429 128.585143 0 229.156571-78.848-59.977143-1.170286-107.446857-36.864t-65.170286-91.136q18.870857 2.852571 34.889143 2.852571 24.576 0 48.566857-6.290286-64-13.165714-105.984-63.707429t-41.984-117.394286l0-2.267429q38.838857 21.723429 83.456 23.405714-37.741714-25.161143-59.977143-65.682286t-22.308571-87.990857q0-50.322286 25.161143-93.110857 69.12 85.138286 168.301714 136.265143t212.260571 56.832q-4.534857-21.723429-4.534857-42.276571 0-76.580571 53.979429-130.56t130.56-53.979429q80.018286 0 134.875429 58.294857 62.317714-11.995429 117.174857-44.544-21.138286 65.682286-81.115429 101.741714 53.174857-5.705143 106.276571-28.598857z" fill="#f0f0f0"></path>
    </svg>
    <svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
      <path d="M123.52064 667.99143l344.526782 229.708899 0-205.136409-190.802457-127.396658zM88.051421 585.717469l110.283674-73.717469-110.283674-73.717469 0 147.434938zM556.025711 897.627196l344.526782-229.708899-153.724325-102.824168-190.802457 127.396658 0 205.136409zM512 615.994287l155.406371-103.994287-155.406371-103.994287-155.406371 103.994287zM277.171833 458.832738l190.802457-127.396658 0-205.136409-344.526782 229.708899zM825.664905 512l110.283674 73.717469 0-147.434938zM746.828167 458.832738l153.724325-102.824168-344.526782-229.708899 0 205.136409zM1023.926868 356.00857l0 311.98286q0 23.402371-19.453221 36.566205l-467.901157 311.98286q-11.993715 7.459506-24.57249 7.459506t-24.57249-7.459506l-467.901157-311.98286q-19.453221-13.163834-19.453221-36.566205l0-311.98286q0-23.402371 19.453221-36.566205l467.901157-311.98286q11.993715-7.459506 24.57249-7.459506t24.57249 7.459506l467.901157 311.98286q19.453221 13.163834 19.453221 36.566205z" fill="#f0f0f0"></path>
    </svg>
    <svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
      <path d="M950.930286 512q0 143.433143-83.748571 257.974857t-216.283429 158.573714q-15.433143 2.852571-22.601143-4.022857t-7.168-17.115429l0-120.539429q0-55.442286-29.696-81.115429 32.548571-3.437714 58.587429-10.313143t53.686857-22.308571 46.299429-38.034286 30.281143-59.977143 11.702857-86.016q0-69.12-45.129143-117.686857 21.138286-52.004571-4.534857-116.589714-16.018286-5.12-46.299429 6.290286t-52.589714 25.161143l-21.723429 13.677714q-53.174857-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.689143-22.016-49.152-7.68q-25.161143 64.585143-4.022857 116.589714-45.129143 48.566857-45.129143 117.686857 0 48.566857 11.702857 85.723429t29.988571 59.977143 46.006857 38.253714 53.686857 22.308571 58.587429 10.313143q-22.820571 20.553143-28.013714 58.88-11.995429 5.705143-25.746286 8.557714t-32.548571 2.852571-37.449143-12.288-31.744-35.693714q-10.825143-18.285714-27.721143-29.696t-28.306286-13.677714l-11.410286-1.682286q-11.995429 0-16.603429 2.56t-2.852571 6.582857 5.12 7.972571 7.460571 6.875429l4.022857 2.852571q12.580571 5.705143 24.868571 21.723429t17.993143 29.110857l5.705143 13.165714q7.460571 21.723429 25.161143 35.108571t38.253714 17.115429 39.716571 4.022857 31.744-1.974857l13.165714-2.267429q0 21.723429 0.292571 50.834286t0.292571 30.866286q0 10.313143-7.460571 17.115429t-22.820571 4.022857q-132.534857-44.032-216.283429-158.573714t-83.748571-257.974857q0-119.442286 58.88-220.306286t159.744-159.744 220.306286-58.88 220.306286 58.88 159.744 159.744 58.88 220.306286z" fill="#f0f0f0"></path>
    </svg>
  </p>
</div>
<style>
/* From Uiverse.io by gagan-gv - Tags: card, hover, smooth, about me */
.card {
 width: 190px;
 height: 254px;
 background: #f0f0f0;
 border-radius: 10px;
 text-align: center;
 transition: all 0.5s;
}

.card:hover {
 box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.623);
 background-color: #4bb8ff;
}

.card .blob {
 height: 10px;
 width: 75%;
 border-radius: 0 0 30px 30px;
 margin: 0 auto;
 background-color: #4bb8ff;
 visibility: visible;
 transition: all 0.3s;
}

.card:hover .blob {
 height: 0;
}

.card .img {
 display: flex;
 margin: 30px auto 10px auto;
 width: 70px;
 height: 70px;
 background-color: #4bb8ff;
 border-radius: 50%;
 font-size: 11px;
 justify-content: center;
 align-items: center;
 transition: all 0.5s;
}

.card:hover .img {
 width: 100%;
 height: 70%;
 border-radius: 10px 0 0;
 margin: 0 auto;
 background-color: #f0f0f0;
 z-index: 99999;
}

.card h2 {
 padding: 15px 10px;
 font-size: 25px;
 transition: all 0.1s;
 z-index: -99;
 line-height: 17px;
}

.card span {
 font-size: 18px;
}

.card:hover h2 {
 opacity: 0;
 width: 100%;
 position: absolute;
 transition: all 0.5s;
}

.card>p {
 opacity: 0;
 transition: all 0.75s;
}

.card>p>svg {
 padding: 5px;
}

.card:hover>p {
 position: absolute;
 bottom: 15px;
 left: 35px;
 opacity: 1;
 transition: all 0.1s;
}
</style>


================================================
FILE: Cards/gagan-gv_tidy-elephant-18.html
================================================
<div class="card"></div>
<style>
/* From Uiverse.io by gagan-gv - Tags: card */
/*Retro Style Card*/

.card {
  width: 190px;
  height: 254px;
  background: #fff;
  border: 3px solid #000;
  border-radius: 0;
  box-shadow: 15px 15px 0 -2.5px #fff, 15px 15px 0 0 #000;
}
</style>


================================================
FILE: Cards/garerim_slippery-bear-89.html
================================================
<div class="card">
  <div class="img-card">
  </div>
  <div class="add-cart">Add to Cart</div>
  <div class="info-card">
    <p><strong>Lorem ipsum</strong></p>
    <p>Price : 15$</p>
  </div>
  
</div>
<style>
/* From Uiverse.io by garerim - Tags: card */
.card {
  position: relative;
  width: 190px;
  height: 254px;
  background: #fff;
  border: solid 4px #333;
  box-shadow: -5px 5px #333;
  transition: all .2s ease-in-out;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.card:hover {
  margin: 10px 10px 0 0;
  box-shadow: 0px 0px #333;
}

.card .img-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 50px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: filter .2s 1s ease-in-out;
}

.card:hover .img-card {
  filter: blur(1px);
}

.card .add-cart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 50px);
  background-color: rgba(0, 0, 0, 0.1);
  text-align: center;
  line-height: 250px;
  font-weight: bold;
  font-size: 19px;
  opacity: 0;
}

.card:hover .add-cart {
  opacity: 1;
  transition: opacity .3s 1s ease-in-out;
}

.card .info-card {
  position: absolute;
  height: 50px;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: solid 1px #333;
}

.card .info-card p {
  font-size: 14px;
  margin: 5px;
}


</style>


================================================
FILE: Cards/gharsh11032000_ancient-starfish-68.html
================================================
<div class="card">
  <div class="main-content">
    <div class="header">
  <span>Article on</span>
  <span>29-June-2023</span>
</div>
<p class="heading">Different ways to use CSS in React</p>
<div class="categories">
  <span>React</span>
  <span>Css</span>
</div>
  </div>
<div class="footer">
  by Harsh Gupta
</div>
</div>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: gradient, card, hover, hover effect */
.card {
  width: 320px;
  height: 350px;
  padding: 20px;
  color: white;
  background: linear-gradient(#212121, #212121) padding-box,
              linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box;
  border: 2px solid transparent;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transform-origin: right bottom;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.card .main-content {
  flex: 1;
}

.card .header span:first-child {
  font-weight: 600;
  color: #717171;
  margin-right: 4px;
}

.card .heading {
  font-size: 24px;
  margin: 24px 0 16px;
  font-weight: 600;
}

.card .categories {
  display: flex;
  gap: 8px;
}

.card .categories span {
  background-color: #e81cff;
  padding: 4px 8px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  border-radius: 50em;
}

.card .footer {
  font-weight: 600;
  color: #717171;
  margin-right: 4px;
}

.card:hover {
  rotate: 8deg;
}
</style>


================================================
FILE: Cards/gharsh11032000_curly-newt-100.html
================================================
<div class="card">
  <div class="content">
    <p class="heading">Card</p>
    <p class="para">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p class="para para-sm">Jan 1, 2024</p>
  </div>
</div>

<style>
/* From Uiverse.io by gharsh11032000  - Tags: card, hover, hover effect, card template, cool card, cardhover , card animation, card hover */
.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  border-radius: 24px;
  line-height: 1.6;
  transition: all 0.64s cubic-bezier(0.23, 1, 0.32, 1);
}
.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 36px;
  border-radius: 24px;
  background: transparent;
  color: #000000;
  z-index: 1;
  transition: all 0.64s cubic-bezier(0.23, 1, 0.32, 1);
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #0a3cff;
  border-radius: inherit;
  height: 100%;
  width: 100%;
  opacity: 0;
  transform: skew(-24deg);
  clip-path: circle(0% at 50% 50%);
  transition: all 0.64s cubic-bezier(0.23, 1, 0.32, 1);
}
.content .heading {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  z-index: 1;
}
.content .para {
  z-index: 1;
  opacity: 0.8;
  font-size: 18px;
}
.content .para-sm {
  font-size: 16px;
}
.card:hover::before {
  opacity: 1;
  transform: skew(0deg);
  clip-path: circle(140.9% at 0 0);
}
.card:hover .content {
  color: #ffffff;
}

</style>
    

================================================
FILE: Cards/gharsh11032000_evil-gecko-58.html
================================================
<div class="card-container">
  <div class="card">
  <div class="img-content">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-miterlimit="2" stroke-linejoin="round" fill-rule="evenodd" clip-rule="evenodd"><path fill-rule="nonzero" d="m2 19v-14c0-.552.447-1 1-1 .542 0 4.418 2.028 9 2.028 4.593 0 8.456-2.028 9-2.028.55 0 1 .447 1 1v14c0 .553-.45 1-1 1-.544 0-4.407-2.028-9-2.028-4.582 0-8.458 2.028-9 2.028-.553 0-1-.448-1-1zm1.5-.791 6.449-7.691c.289-.344.879-.338 1.16.012 0 0 1.954 2.434 1.954 2.434l1.704-1.283c.319-.24.816-.168 1.054.154l4.679 6.335v-12.44c-1.58.58-4.819 1.798-8.5 1.798-3.672 0-6.918-1.218-8.5-1.799zm2.657-.834c1.623-.471 3.657-.903 5.843-.903 2.309 0 4.444.479 6.105.98l-3.041-4.117-1.065.802.275.344c.259.323.206.796-.117 1.054-.323.259-.795.207-1.054-.117l-2.591-3.236zm.698-9.534c-1.051 0-1.905.854-1.905 1.905s.854 1.904 1.905 1.904 1.904-.853 1.904-1.904-.853-1.905-1.904-1.905zm0 1.3c.333 0 .604.271.604.605 0 .333-.271.604-.604.604-.334 0-.605-.271-.605-.604 0-.334.271-.605.605-.605z"></path></svg>
  </div>
  <div class="content">
    <p class="heading">Card Hover</p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipii
      voluptas ten mollitia pariatur odit, ab
      minus ratione adipisci accusamus vel est excepturi laboriosam magnam
      necessitatibus dignissimos molestias.
    </p>
  </div>
</div>
</div>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: gradient, card, image, hover effect */
.card-container {
  width: 300px;
  height: 300px;
  position: relative;
  border-radius: 10px;
}

.card-container::before {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

.card {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.card .img-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
  transition: scale 0.6s, rotate 0.6s, filter 1s;
}

.card .img-content svg {
  width: 50px;
  height: 50px;
  fill: #212121;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.card .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  color: #e8e8e8;
  padding: 20px 24px;
  line-height: 1.5;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(50px);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.card .content .heading {
  font-size: 32px;
  font-weight: 700;
}

.card:hover .content {
  opacity: 1;
  transform: translateY(0);
}

.card:hover .img-content {
  scale: 2.5;
  rotate: 30deg;
  filter: blur(7px);
}

.card:hover .img-content svg {
  fill: transparent;
}

</style>


================================================
FILE: Cards/gharsh11032000_fuzzy-robin-67.html
================================================
<div class="card">
  <div class="content">
    <svg
      fill="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M20 9V5H4V9H20ZM20 11H4V19H20V11ZM3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM5 12H8V17H5V12ZM5 6H7V8H5V6ZM9 6H11V8H9V6Z"
      ></path>
    </svg>
    <p class="para">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi laboriosam
      at voluptas minus culpa deserunt delectus sapiente inventore pariatur
    </p>
  </div>
</div>

<style>
/* From Uiverse.io by gharsh11032000  - Tags: card, hover, hover effect, card template, cool card, cardhover , card animation, card hover */
.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  border-radius: 24px;
  line-height: 1.6;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 36px;
  border-radius: 22px;
  color: #ffffff;
  overflow: hidden;
  background: #0a3cff;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content::before {
  position: absolute;
  content: "";
  top: -4%;
  left: 50%;
  width: 90%;
  height: 90%;
  transform: translate(-50%);
  background: #ced8ff;
  z-index: -1;
  transform-origin: bottom;

  border-radius: inherit;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content::after {
  position: absolute;
  content: "";
  top: -8%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%);
  background: #e7ecff;
  z-index: -2;
  transform-origin: bottom;
  border-radius: inherit;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content svg {
  width: 48px;
  height: 48px;
}

.content .para {
  z-index: 1;
  opacity: 1;
  font-size: 18px;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content .link {
  z-index: 1;
  color: #fea000;
  text-decoration: none;
  font-family: inherit;
  font-size: 16px;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

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

.card:hover {
  transform: translate(0px, -16px);
}

.card:hover .content::before {
  rotate: -8deg;
  top: 0;
  width: 100%;
  height: 100%;
}

.card:hover .content::after {
  rotate: 8deg;
  top: 0;
  width: 100%;
  height: 100%;
}

</style>
    

================================================
FILE: Cards/gharsh11032000_happy-hound-90.html
================================================
<div class="card">
  <div class="content">
    <p class="heading">Card Hover Effect
    </p><p class="para">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi
      laboriosam at voluptas minus culpa deserunt delectus sapiente
      inventore pariatur
    </p>
    <button class="btn">Read more</button>
  </div>
</div>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: card, shadow, hover effect */
.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  padding: 32px;
  overflow: hidden;
  border-radius: 10px;
  background: #212121;
  border: 2px solid #313131;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  color: #e8e8e8;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.content .heading {
  font-weight: 700;
  font-size: 32px;
}

.content .para {
  line-height: 1.5;
}

.content .btn {
  color: #e8e8e8;
  text-decoration: none;
  padding: 10px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: #0974f1;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.card:hover {
  box-shadow: 0 0 20px rgba(9, 117, 241, 0.8);
  border-color: #0974f1;
}

.content .btn:hover {
  outline: 2px solid #e8e8e8;
  background: transparent;
  color: #e8e8e8;
}

.content .btn:active {
  box-shadow: none;
}

</style>


================================================
FILE: Cards/gharsh11032000_heavy-dog-45.html
================================================
<div class="card">
  <p class="header">UI Blog's</p>
  <div class="main-content">
    <p class="heading">How to make a simple ui card?</p>
  </div>
  <div class="footer">by Harsh Gupta</div>
</div>

<style>
/* From Uiverse.io by gharsh11032000  - Tags: card, hover, hover effect, hoverme, cardhover , card hover */
.card {
  width: 320px;
  height: 350px;
  padding: 20px;
  color: white;
  background: transparent;
  border: 2px solid #ff6b00;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transform-origin: center center;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card .main-content {
  flex: 1;
}

.header {
  margin-bottom: 24px;
}

.card .heading {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}

.card .footer {
  font-weight: 400;
  margin-right: 4px;
}

.card:hover {
  border-radius: 12px;
  background-color: #ff6b00;
  scale: 0.95;
  rotate: 8deg;
  box-shadow: 0px 3px 187.5px 7.5px rgba(255, 107, 0, 0.4);
}

</style>
    

================================================
FILE: Cards/gharsh11032000_heavy-snake-69.html
================================================
<div class="card">
  <div class="content">
    <p class="heading">Card</p>
    <p class="para">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi laboriosam
      at voluptas minus culpa deserunt delectus sapiente inventore pariatur
    </p>
  </div>
</div>

<style>
/* From Uiverse.io by gharsh11032000  - Tags: animation, card, hover effect, css effect, cool card, cardhover , card animation, card hover */
.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  padding: 2px;
  border-radius: 24px;
  overflow: hidden;
  line-height: 1.6;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 34px;
  border-radius: 22px;
  color: #ffffff;
  overflow: hidden;
  background: #ffffff;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content .heading {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  z-index: 1;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content .para {
  z-index: 1;
  opacity: 0.8;
  font-size: 18px;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.card::before {
  content: "";
  position: absolute;
  height: 160%;
  width: 160%;
  border-radius: inherit;
  background: #0a3cff;
  background: linear-gradient(to right, #0a3cff, #0a3cff);
  transform-origin: center;
  animation: moving 4.8s linear infinite paused;
  transition: all 0.88s cubic-bezier(0.23, 1, 0.32, 1);
}

.card:hover::before {
  animation-play-state: running;
  z-index: -1;
  width: 20%;
}

.card:hover .content .heading,
.card:hover .content .para {
  color: #000000;
}

.card:hover {
  box-shadow: 0rem 6px 13px rgba(10, 60, 255, 0.1),
    0rem 24px 24px rgba(10, 60, 255, 0.09),
    0rem 55px 33px rgba(10, 60, 255, 0.05),
    0rem 97px 39px rgba(10, 60, 255, 0.01), 0rem 152px 43px rgba(10, 60, 255, 0);
  scale: 1.05;
  color: #000000;
}

@keyframes moving {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

</style>
    

================================================
FILE: Cards/gharsh11032000_horrible-donkey-50.html
================================================
<div class="card">
  <div class="content">
    <p class="heading">Card Hover Effect
    </p><p class="para">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi
      laboriosam at voluptas minus culpa deserunt delectus sapiente
      inventore pariatur
    </p>
    <button class="btn">Read more</button>
  </div>
</div>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: simple, gradient, card, hover effect */
.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  padding: 32px;
  overflow: hidden;
  border-radius: 10px;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  color: #e8e8e8;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.content .heading {
  font-weight: 700;
  font-size: 32px;
}

.content .para {
  line-height: 1.5;
}

.content .btn {
  color: #e8e8e8;
  text-decoration: none;
  padding: 10px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
  z-index: -1;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.card:hover::before {
  height: 100%;
}

.card:hover {
  box-shadow: none;
}

.card:hover .btn {
  color: #212121;
  background: #e8e8e8;
}

.content .btn:hover {
  outline: 2px solid #e8e8e8;
  background: transparent;
  color: #e8e8e8;
}

.content .btn:active {
  box-shadow: none;
}

</style>


================================================
FILE: Cards/gharsh11032000_perfect-ladybug-87.html
================================================
<div class="card">
  <p class="heading">Card Hover</p>
  <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
  </p><div class="overlay"></div>
  <button class="card-btn">Click</button>
</div>

<style>
/* From Uiverse.io by gharsh11032000 - Tags: card, hover effect, cardhover  */
.card {
  position: relative;
  width: 350px;
  height: 250px;
  background-image: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
  border-radius: 10px;
  display: flex;
  padding: 10px 30px;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.heading {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
}

.para {
  text-align: center;
  color: #ffffff;
  opacity: 0.7;
  line-height: 1.4;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.6);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.card:hover .overlay {
  opacity: 1;
  pointer-events: auto;
}

.card .card-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  font-weight: 600;
  padding: 10px 20px;
  font-size: 16px;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  border: none;
  opacity: 0;
  scale: 0;
  transform-origin: 0 0;
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.card:hover .card-btn {
  opacity: 1;
  scale: 1;
}

.card .card-btn:hover {
  box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.3);
}

.card .card-btn:active {
  scale: 0.95;
}

.overlay::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-45deg, #f89b2980 0%, #ff0f7b80 100% );
  transition: transform 0.5s ease;
}

.card:hover .overlay::after {
  transform: translate(-50%, -50%) scale(2);
}

</style>


================================================
FILE: Cards/gharsh11032000_rare-bobcat-17.html
================================================
<div class="card">
  <div class="card-content">
    <p class="card-title">hover effect
    </p><p class="card-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

<style>
/* From Uiverse.io by gharsh11032000 - Tags: gradient, card, hover, hover effect */
.card {
  width: 300px;
  height: 200px;
  background-color: #FF3CAC;
  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
  color: white;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  perspective: 1000px;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
  cursor: pointer;
}

.card-content {
  padding: 20px;
  position: relative;
  z-index: 1;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
  z-index: 1;
}

.card:hover:before {
  opacity: 1;
}

.card .card-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: capitalize;
}

.card .card-para {
  font-size: 16px;
  opacity: 0.8;
}

.card-content {
  transform: translateY(50%);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.card:hover .card-content {
  transform: translateY(0%);
}

</style>


================================================
FILE: Cards/gharsh11032000_red-hound-90.html
================================================
<div class="card">
  <div class="content">
    <p class="heading">Card</p>
    <p class="para">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi laboriosam
      at voluptas minus culpa deserunt delectus sapiente inventore pariatur.
    </p>
  </div>
</div>

<style>
/* From Uiverse.io by gharsh11032000  - Tags: card, hover, hover effect, cool card, cardhover , card animation, card hover */
.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  padding: 36px;
  border-radius: 24px;
  overflow: hidden;
  line-height: 1.6;
  border: 1px solid #999999;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  color: #000000;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content .heading {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  z-index: 1;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content .para {
  z-index: 1;
  opacity: 0.8;
  font-size: 18px;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.card::before {
  content: "";
  position: absolute;
  right: -5.2rem;
  top: -5.2rem;
  width: 10.4rem;
  height: 10.4rem;
  background: #0a3cff;
  z-index: 0;
  opacity: 0;
  border-radius: 50%;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.card::after {
  content: "";
  position: absolute;
  left: -5.2rem;
  bottom: -5.2rem;
  width: 10.4rem;
  height: 10.4rem;
  background: #0a3cff;
  z-index: 0;
  opacity: 0;
  border-radius: 50%;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.card:hover::before {
  scale: 7;
  opacity: 1;
}

.card:hover::after {
  scale: 7;
  opacity: 1;
}

.card:hover .content .heading {
  color: #ffffff;
}

.card:hover .content .para {
  color: #ffffff;
}

.card:hover {
  box-shadow: 0rem 6px 13px rgba(0, 0, 0, 0.1),
    0rem 24px 24px rgba(0, 0, 0, 0.09), 0rem 55px 33px rgba(0, 0, 0, 0.05),
    0rem 97px 39px rgba(0, 0, 0, 0.01), 0rem 152px 43px rgba(0, 0, 0, 0);
  border-color: #0a3cff;
  scale: 1.05;
}

</style>
    

================================================
FILE: Cards/gharsh11032000_selfish-owl-57.html
================================================
<div class="card">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"></path></svg>
  <div class="card__content">
    <p class="card__title">Card Title</p>
    <p class="card__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>

<style>
/* From Uiverse.io by gharsh11032000 - Tags: card, hover effect, cardhover  */
.card {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #f2f2f2;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1000px;
  box-shadow: 0 0 0 5px #ffffff80;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card svg {
  width: 48px;
  fill: #333;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
}

.card__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f2f2f2;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card:hover .card__content {
  transform: rotateX(0deg);
}

.card__title {
  margin: 0;
  font-size: 24px;
  color: #333;
  font-weight: 700;
}

.card:hover svg {
  scale: 0;
}

.card__description {
  margin: 10px 0 0;
  font-size: 14px;
  color: #777;
  line-height: 1.4;
}

</style>


================================================
FILE: Cards/gharsh11032000_shy-ape-17.html
================================================
<div class="card-container">
  <div class="card">
  <div class="front-content">
    <p>Hover me</p>
  </div>
  <div class="content">
    <p class="heading">Card Hover</p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipii
      voluptas ten mollitia pariatur odit, ab
      minus ratione adipisci accusamus vel est excepturi laboriosam magnam
      necessitatibus dignissimos molestias.
    </p>
  </div>
</div>
</div>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: card, hover effect, hoverme */
.card-container {
  width: 300px;
  height: 300px;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.card {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.card .front-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
}

.card .front-content p {
  font-size: 32px;
  font-weight: 700;
  opacity: 1;
  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
}

.card .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
  color: #e8e8e8;
  padding: 20px;
  line-height: 1.5;
  border-radius: 5px;
  pointer-events: none;
  transform: translateY(96%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.card .content .heading {
  font-size: 32px;
  font-weight: 700;
}

.card:hover .content {
  transform: translateY(0);
}

.card:hover .front-content {
  transform: translateY(-30%);
}

.card:hover .front-content p {
  opacity: 0;
}


</style>


================================================
FILE: Cards/gharsh11032000_slimy-wolverine-10.html
================================================
<div class="card">
  <div class="card-content">
    <p class="card-title">Card hover effect
    </p><p class="card-para">Lorem ipsum dolor sit 
      amet, consectetur adipiscing elit.</p>
  </div>
</div>

<style>
/* From Uiverse.io by gharsh11032000 - Tags: gradient, card, hover effect */
.card {
  width: 300px;
  height: 200px;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  border-radius: 8px;
  color: white;
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
  cursor: pointer;
}

.card-content {
  padding: 20px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: white;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.card-content .card-title {
  font-size: 24px;
  font-weight: 700;
  color: inherit;
  text-transform: uppercase;
}

.card-content .card-para {
  color: inherit;
  opacity: 0.8;
  font-size: 14px;
}

.card:hover {
  transform: rotateY(10deg) rotateX(10deg) scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
  z-index: 1;
}

.card:hover:before {
  transform: translateX(-100%);
}

.card:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
  z-index: 1;
}

.card:hover:after {
  transform: translateX(100%);
}






</style>


================================================
FILE: Cards/gharsh11032000_tasty-frog-49.html
================================================
<div class="card">
  <p class="heading">
    Popular this month
  </p>
  <p>
    Powered By
  </p>
  <p>Uiverse
</p></div>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: gradient, card, hover, hover effect */
.card {
  position: relative;
  width: 190px;
  height: 254px;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 12px;
  gap: 12px;
  border-radius: 8px;
  cursor: pointer;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  left: -5px;
  margin: auto;
  width: 200px;
  height: 264px;
  border-radius: 10px;
  background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );
  z-index: -10;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card::after {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

.heading {
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 700;
}

.card p:not(.heading) {
  font-size: 14px;
}

.card p:last-child {
  color: #e81cff;
  font-weight: 600;
}

.card:hover::after {
  filter: blur(30px);
}

.card:hover::before {
  transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);
}


</style>


================================================
FILE: Cards/gharsh11032000_tricky-cheetah-78.html
================================================
<div class="card">
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"></path></svg>
  <div class="card__content">
    <p class="card__title">Card Title
    </p><p class="card__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>

<style>
/* From Uiverse.io by gharsh11032000 - Tags: gradient, card, hover, hover effect, cardhover  */
.card {
  position: relative;
  width: 300px;
  height: 200px;
  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.card svg {
  width: 48px;
  fill: #333;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.card:hover {
  transform: rotate(-5deg) scale(1.1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.card:hover .card__content {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 1;
}

.card__title {
  margin: 0;
  font-size: 24px;
  color: #333;
  font-weight: 700;
}

.card__description {
  margin: 10px 0 0;
  font-size: 14px;
  color: #777;
  line-height: 1.4;
}

.card:hover svg {
  scale: 0;
  transform: rotate(-45deg);
}

</style>


================================================
FILE: Cards/github-bishwajeet_tricky-dolphin-77.html
================================================
<div class="card">
  <label class="avatar"></label>
  <label class="info">
    <span class="info-1"></span>
    <span class="info-2"></span>
  </label>
  <div class="content-1"></div>
  <div class="content-2"></div>
</div>
<style>
/* From Uiverse.io by github-bishwajeet - Tags: card */
.card {
  width: 190px;
  height: 190px;
  border-radius: 44px;
  background: lightgrey;
  background: linear-gradient(145deg, #ff6b6b, #d43636);
  box-shadow: 2px 3px 3px #ba2f2f,
             2px 3px 3px #ff4949;
}

.avatar {
  width: 45px;
  height: 45px;
  display: inline-block;
  background-color: rgba(255,255,255,0.9);
  margin: 30px 15px 20px 25px;
  border-radius: 14px;
}

.info {
  display: inline-block;
  vertical-align: top;
  margin-top: 33px;
  width: 85px;
}

.info-1, .info-2 {
  display: inline-block;
  height: 20px;
  width: 100%;
  border-radius: 6px;
  background: rgba(255,255,255,0.9);
}

.info-2 {
  height: 11px;
  width: 50%;
  border-radius: 3px;
}

.content-1 {
  width: 80%;
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  height: 40px;
  margin: auto;
}

.content-2 {
  width: 60%;
  border-radius: 6px;
  background: rgba(255,255,255,0.9);
  height: 18px;
  margin: 10px 0 0 20px;
}
</style>


================================================
FILE: Cards/hoshikawamaki_strange-firefox-50.html
================================================
<!-- From Uiverse.io by hoshikawamaki  - Tags: simple, material design, animation, purple, card, hover, hover effect, tailwindcss -->
<div
  class="relative overflow-hidden w-60 h-80 rounded-3xl cursor-pointer text-2xl font-bold bg-purple-400"
>
  <div class="z-10 absolute w-full h-full peer"></div>
  <div
    class="absolute peer-hover:-top-20 peer-hover:-left-16 peer-hover:w-[140%] peer-hover:h-[140%] -top-32 -left-16 w-32 h-44 rounded-full bg-purple-300 transition-all duration-500"
  ></div>
  <div
    class="absolute flex text-xl text-center items-end justify-end peer-hover:right-0 peer-hover:rounded-b-none peer-hover:bottom-0 peer-hover:items-center peer-hover:justify-center peer-hover:w-full peer-hover:h-full -bottom-32 -right-16 w-36 h-44 rounded-full bg-purple-300 transition-all duration-500"
  >
    Nice to meet u,<br />Uiverse
  </div>
  <div class="w-full h-full items-center justify-center flex uppercase">
    hover me
  </div>
</div>


    

================================================
FILE: Cards/howaboutsalman_calm-otter-73.html
================================================
<!-- From Uiverse.io by howaboutsalman  - Tags:  -->
<div class="max-w-[360px] w-full mx-auto bg-[#0d1b2a] rounded-lg shadow-md p-4">
  <form>
    <div class="mb-4">
      <label class="block mb-2 text-gray-50" for="name"> Name </label>
      <input
        placeholder="Your Name"
        class="w-full p-2 border-b-2 border-yellow-400 bg-transparent outline-none focus:border-b-2 focus:border-yellow-600"
        type="text"
      />
    </div>
    <div class="mb-4">
      <label class="block mb-2 text-gray-50" for="email"> Email </label>
      <input
        placeholder="Your Email"
        class="w-full p-2 border-b-2 border-yellow-400 bg-transparent outline-none focus:border-b-2 focus:border-yellow-600"
        name="email"
        id="email"
        type="email"
      />
    </div>
    <div class="mb-4">
      <label class="block mb-2 text-gray-50" for="message"> Message </label>
      <textarea
        placeholder="Your Message"
        class="w-full p-2 border-b-2 border-yellow-400 bg-transparent outline-none focus:border-b-2 focus:border-yellow-600"
        rows="4"
        name="message"
        id="message"
      ></textarea>
    </div>
    <div class="mb-4">
      <button
        class="w-full bg-[#F7AB0A] text-gray-700 font-semibold p-2 rounded transition-all hover:bg-[#FFC857]"
        type="submit"
      >
        Submit
      </button>
    </div>
  </form>
</div>


    

================================================
FILE: Cards/htwarriors108_brave-grasshopper-38.html
================================================
<div class="card">Hold Me</div>
<style>
/* From Uiverse.io by htwarriors108 - Source: htwarriors108 - Tags: gradient, card, hover, flip, neon, blur filter, animated, hover effect, card flip */
.card {
  background-color: #fff;
  width: 190px;
  height: 254px;
  box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  transition: 0.5s;
  cursor: pointer;
  transform: rotateX(-55deg) rotateY(15deg) rotateZ(60deg);
  font-size: 2.2em;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.card:active {
  scale: 1.1;
  rotate: 5deg;
}

@keyframes animate {
  0% {
    opacity: 0.3;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}

.card:hover {
  transform: rotate(0deg);
  opacity: 1;
}

.card, .card::before {
  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
}

.card::before {
  content: '';
  width: 120%;
  height: 110%;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 15px;
  transform: translate(-50%, -50%);
  filter: blur(30px);
  animation: animate 5s linear infinite;
}

</style>


================================================
FILE: Cards/htwarriors108_clever-swan-80.html
================================================
 <div class="card">
        <div class="txt">Hover Me :)</div>
        <div class="shadow"></div>
    </div>
<style>
/* From Uiverse.io by htwarriors108 - Tags: hover effect, hoverme, multicolor, blur, animation, gradient, card, shadow, blur filter, colorful */
.card {
  position: absolute;
  width: 190px;
  height: 254px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.5s;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card:hover {
  scale: 1.05;
  rotate: 3deg;
}

.card::after {
  content: '';
  width: 93%;
  height: 95%;
  position: absolute;
  border-radius: 0.7em;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: 0;
}

.shadow {
  width: 100%;
  height: 100%;
  background: linear-gradient(315deg, #03a9f4, #ff0058);
  z-index: -1;
  filter: blur(25px);
}

.txt {
  position: absolute;
  font-weight: 800;
  font-size: 1.6em;
  color: #fff;
}

.card:hover .shadow {
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  0% {
    rotate: 0deg;
    background: linear-gradient(315deg, #03a9f4, #ff0058);
  }

  50% {
    rotate: 180deg;
    background: linear-gradient(45deg, #ffbc00, #ff0058);
  }

  100% {
    rotate: 360deg;
    background: linear-gradient(315deg, #4dff03, #00d0ff);
  }
}
</style>


================================================
FILE: Cards/htwarriors108_funny-snail-57.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by htwarriors108 - Tags: gradient, card, hover, flip, neon, blur filter, animated, hover effect, card flip */
.one-div {
  background-color: #fff;
  width: 190px;
  height: 254px;
  box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  transition: 0.5s;
  cursor: pointer;
  transform: rotateX(-55deg) rotateY(15deg) rotateZ(60deg);
  color: #fff;
}

.one-div:active {
  scale: 1.1;
  rotate: 5deg;
}

@keyframes animate {
  0% {
    opacity: 0.3;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}

.one-div:hover {
  transform: rotate(0deg);
  opacity: 1;
}

.one-div, .one-div::before {
  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
}

.one-div::before {
  content: '';
  width: 120%;
  height: 110%;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 15px;
  transform: translate(-50%, -50%);
  filter: blur(30px);
  animation: animate 5s linear infinite;
}

.one-div::after {
  content: 'Hover Me';
  width: 100%;
  height: 100%;
  font-size: 2em;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>


================================================
FILE: Cards/htwarriors108_little-cat-84.html
================================================
 <div class="card">
   <span></span>
            <div class="content">Hover Me : )</div>
        </div>
<style>
/* From Uiverse.io by htwarriors108 - Tags: gradient, card, hover, glow, neon, colorful, hover effect, hoverme */
.card {
  position: relative;
  width: 190px;
  height: 254px;
  color: #fff;
  transition: 0.5s;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-20px);
}

.card::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, #ffbc00, #ff0058);
  border-radius: 1.2em;
}

.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ffbc00, #ff0058);
  filter: blur(30px);
}

.card span {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2;
  border-radius: 1em;
}

.card span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
}

.card .content {
  position: relative;
  padding: 10px;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5em;
}
</style>


================================================
FILE: Cards/htwarriors108_odd-turtle-69.html
================================================
<div class="card">
        <div class="imgBox">
            <svg viewBox="0 0 16 16" class="bi bi-person-circle" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
                <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" fill-rule="evenodd"></path>
            </svg>
        </div>
        <div class="name">
            <p class="p1">John Doe</p>
            <p class="p2">Incoming Call</p>
        </div>
        <div class="caller">
            <span id="pick" class="callerBtn">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"></path>
                </svg>
            </span>
            <span id="end" class="callerBtn">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"></path>
                </svg>
        </span></div>
    </div>

<style>
/* From Uiverse.io by htwarriors108 - Tags: card, hover, shadow, caller, hover effect, call reject, accept call, box-shadow, cardhover  */
.card {
  width: 190px;
  height: 254px;
  border-radius: 1em;
  flex-direction: column;
  justify-content: space-evenly;
  background-color: #080808;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition: 0.2s ease-in-out;
  padding: 5px;
  color: #fff;
}

.card:hover {
  rotate: 1deg;
  scale: 1.05;
}

.card, .imgBox, .caller {
  display: flex;
  align-items: center;
}

.imgBox {
  width: 6em;
  height: 6em;
  box-shadow: 0px 0.25em 1rem rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  justify-content: center;
}

.imgBox svg {
  width: 100%;
  height: 100%;
}

.name {
  width: 100%;
  text-align: center;
  font-weight: 900;
  transition: 1s ease-in-out;
}

.name .p1 {
  font-size: 1.2em;
}

.name .p2 {
  font-size: 0.8em;
  color: rgb(50, 146, 255);
}

.caller {
  width: 100%;
  flex-direction: row;
  justify-content: space-evenly;
}

.callerBtn {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  transition: 0.1s ease-in-out;
  animation: animate linear infinite 2s;
}

.callerBtn:hover {
  scale: 1.1;
}

#pick {
  background-color: #28ff28;
  box-shadow: 0px 3px 10px #28ff28;
}

#end {
  background-color: #ff2828;
  box-shadow: 0px 3px 10px #ff2828;
}

#end svg {
  rotate: 135deg;
}

@keyframes animate {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(3px) rotate(-10deg);
  }

  100% {
    transform: translateY(0px);
  }
}
</style>


================================================
FILE: Cards/htwarriors108_proud-fish-6.html
================================================
 <div class="card">
   <span></span>
   <div class="content">Hold Me : )</div>
   </div>
<style>
/* From Uiverse.io by htwarriors108 - Tags: gradient, card, hover, glow, neon, gradients, colorful, hover effect, press effect, multicolor */
.card {
  position: relative;
  width: 190px;
  height: 254px;
  color: #fff;
  transition: 0.5s;
  cursor: pointer;
  transform: rotateX(-55deg) rotateY(15deg) rotateZ(60deg);
}

.card:hover {
  transform: rotate(0);
}

.card:active {
  transform: translateY(-20px) rotate(-3deg);
  scale: 0.95;
}

.card::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(315deg, #03a9f4, #ff0058);
}

.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(315deg, #03a9f4, #ff0058);
  filter: blur(30px);
}

.card span {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.card span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
}

.card .content {
  position: relative;
  padding: 10px;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5em;
}
</style>


================================================
FILE: Cards/htwarriors108_tasty-stingray-56.html
================================================
 <div class="myCard">
        <div class="innerCard">
            <div class="frontSide">
                <p class="title">FRONT SIDE</p>
                <p>Hover Me</p>
            </div>
            <div class="backSide">
                <p class="title">BACK SIDE</p>
                <p>Leave Me</p>
            </div>
        </div>
    </div>
<style>
/* From Uiverse.io by htwarriors108 - Tags: 3d, purple, white, gradient, card, hover, flip, neon, blur filter, light&dark */
.myCard {
  background-color: transparent;
  width: 190px;
  height: 254px;
  perspective: 1000px;
}

.title {
  font-size: 1.5em;
  font-weight: 900;
  text-align: center;
  margin: 0;
}

.innerCard {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  cursor: pointer;
}

.myCard:hover .innerCard {
  transform: rotateY(180deg);
}

.frontSide,
.backSide {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 1rem;
  color: white;
  box-shadow: 0 0 0.3em rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

.frontSide,
.frontSide::before {
  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
}

.backSide,
.backSide::before {
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.backSide {
  transform: rotateY(180deg);
}

.frontSide::before,
.backSide::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  width: 110%;
  height: 110%;
  position: absolute;
  z-index: -1;
  border-radius: 1em;
  filter: blur(20px);
  animation: animate 5s linear infinite;
}

@keyframes animate {
  0% {
    opacity: 0.3;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}
</style>


================================================
FILE: Cards/iSweat-exe_tall-lizard-70.html
================================================

<div class="card">
    <div class="title">
        <span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" height="20" fill="currentColor" width="20">
                <path d="M1362 1185q0 153-99.5 263.5t-258.5 136.5v175q0 14-9 23t-23 9h-135q-13 0-22.5-9.5t-9.5-22.5v-175q-66-9-127.5-31t-101.5-44.5-74-48-46.5-37.5-17.5-18q-17-21-2-41l103-135q7-10 23-12 15-2 24 9l2 2q113 99 243 125 37 8 74 8 81 0 142.5-43t61.5-122q0-28-15-53t-33.5-42-58.5-37.5-66-32-80-32.5q-39-16-61.5-25t-61.5-26.5-62.5-31-56.5-35.5-53.5-42.5-43.5-49-35.5-58-21-66.5-8.5-78q0-138 98-242t255-134v-180q0-13 9.5-22.5t22.5-9.5h135q14 0 23 9t9 23v176q57 6 110.5 23t87 33.5 63.5 37.5 39 29 15 14q17 18 5 38l-81 146q-8 15-23 16-14 3-27-7-3-3-14.5-12t-39-26.5-58.5-32-74.5-26-85.5-11.5q-95 0-155 43t-60 111q0 26 8.5 48t29.5 41.5 39.5 33 56 31 60.5 27 70 27.5q53 20 81 31.5t76 35 75.5 42.5 62 50 53 63.5 31.5 76.5 13 94z">
                </path>
            </svg>
        </span>
        <p class="title-text">
            Sales
        </p>
        <p class="percent">
           <svg width="20" height="20" fill="#B9101E" viewBox="0 0 1792 1792" xmlns="[http://www.w3.org/2000/svg ↗](http://www.w3.org/2000/svg)"> <path d="M384 576q0-26 19-45t45-19h896q26 0 45 19t19 45-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45z"></path> </svg> 20%
        </p>
    </div>
    <div class="data">
        <p>
            1,500 €
        </p>
        
        <div class="range">
            <div class="fill">
            </div>
        </div>
    </div>
</div>

<style>
/* From Uiverse.io by iSweat-exe - Source: https://uiverse.io/Yaya12085/tiny-emu-37 - Tags: card, design, repost */
.card {
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  max-width: 320px;
  border-radius: 20px;
  width: 250px;
}

.title {
  display: flex;
  align-items: center;
}

.title span {
  position: relative;
  padding: 0.5rem;
  background-color: #B9101E;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
}

.title span svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  height: 1rem;
}

.title-text {
  margin-left: 0.5rem;
  color: #374151;
  font-size: 18px;
}

.percent {
  margin-left: 0.5rem;
  color: #B9101E;
  font-weight: 600;
  display: flex;
}

.data {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.data p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #1F2937;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  text-align: left;
}

.data .range {
  position: relative;
  background-color: #E5E7EB;
  width: 100%;
  height: 0.5rem;
  border-radius: 0.25rem;
}

.data .range .fill {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #B9101E;
  width: 36%;
  height: 100%;
  border-radius: 0.25rem;
  transition: .5s all;
}
</style>


================================================
FILE: Cards/i_vickykrishna_bitter-ladybug-48.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by i_vickykrishna  - Tags: material design, glassmorphism, card */
/* Card Styles */
.card {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  text-align: center;
  max-width: 25rem;
  width: 100%;
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    #ff9900,
    #e1306c,
    #7289da,
    #1da1f2,
    #ff9900
  );
  border-radius: 1rem;
  z-index: -1;
  filter: blur(10px);
  opacity: 0.5;
}

.image {
  width: 10rem;
  height: auto;
}

.heading {
  font-size: 1.5rem;
  margin-top: 1rem;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.icons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.icons a {
  margin: 0 0.5rem;
  transition: transform 0.3s ease-in-out;
}

.icons a:hover {
  transform: scale(1.2);
}

.instagram svg {
  fill: #e1306c;
  stroke: #e1306c;
}

.x svg {
  fill: #1da1f2;
  stroke: #1da1f2;
}

.discord svg {
  fill: #7289da;
  stroke: #7289da;
}

/* Animation */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.image {
  animation: pulse 2s infinite;
}

</style>
    

================================================
FILE: Cards/iconicchandu_slimy-pug-17.html
================================================
<div class="card">
  <div class="card__border"></div>
  <div class="card_title__container">
    <span class="card_title">Keys to Success</span>
    <p class="card_paragraph">Best way to be success in your life.</p>
  </div>
  <hr class="line" />
  <ul class="card__list">
    <li class="card__list_item">
      <span class="check">
        <svg
          class="check_svg"
          fill="currentColor"
          viewBox="0 0 16 16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            clip-rule="evenodd"
            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
            fill-rule="evenodd"
          ></path>
        </svg>
      </span>
      <span class="list_text">Set Clear Goals</span>
    </li>
    <li class="card__list_item">
      <span class="check">
        <svg
          class="check_svg"
          fill="currentColor"
          viewBox="0 0 16 16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            clip-rule="evenodd"
            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
            fill-rule="evenodd"
          ></path>
        </svg>
      </span>
      <span class="list_text">Stay Organized</span>
    </li>
    <li class="card__list_item">
      <span class="check">
        <svg
          class="check_svg"
          fill="currentColor"
          viewBox="0 0 16 16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            clip-rule="evenodd"
            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
            fill-rule="evenodd"
          ></path>
        </svg>
      </span>
      <span class="list_text">Continuous Learning</span>
    </li>
    <li class="card__list_item">
      <span class="check">
        <svg
          class="check_svg"
          fill="currentColor"
          viewBox="0 0 16 16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            clip-rule="evenodd"
            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
            fill-rule="evenodd"
          ></path>
        </svg>
      </span>
      <span class="list_text">Time Management</span>
    </li>
    <li class="card__list_item">
      <span class="check">
        <svg
          class="check_svg"
          fill="currentColor"
          viewBox="0 0 16 16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            clip-rule="evenodd"
            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
            fill-rule="evenodd"
          ></path>
        </svg>
      </span>
      <span class="list_text">Maintain a Positive Attitude</span>
    </li>
  </ul>
  <button class="button">Get Your Success</button>
</div>

<style>
/* From Uiverse.io by iconicchandu  - Tags: animation, 3d, card */
.card {
  --white: hsl(0, 0%, 100%);
  --black: hsl(240, 15%, 9%);
  --paragraph: hsl(0, 0%, 83%);
  --line: hsl(240, 9%, 17%);
  --primary: hsl(189, 92%, 58%);

  position: relative;

  display: flex;
  flex-direction: column;
  gap: 1rem;

  padding: 1rem;
  width: 19rem;
  background-color: hsla(240, 15%, 9%, 1);
  background-image: radial-gradient(
      at 88% 40%,
      hsla(240, 15%, 9%, 1) 0px,
      transparent 85%
    ),
    radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 0% 64%, hsl(189, 99%, 26%) 0px, transparent 85%),
    radial-gradient(at 41% 94%, hsl(189, 97%, 36%) 0px, transparent 85%),
    radial-gradient(at 100% 99%, hsl(188, 94%, 13%) 0px, transparent 85%);

  border-radius: 1rem;
  box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset;
}

.card .card__border {
  overflow: hidden;
  pointer-events: none;

  position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background-image: linear-gradient(
    0deg,
    hsl(0, 0%, 100%) -50%,
    hsl(0, 0%, 40%) 100%
  );

  border-radius: 1rem;
}

.card .card__border::before {
  content: "";
  pointer-events: none;

  position: fixed;
  z-index: 200;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%), rotate(0deg);
  transform-origin: left;

  width: 200%;
  height: 10rem;
  background-image: linear-gradient(
    0deg,
    hsla(0, 0%, 100%, 0) 0%,
    hsl(189, 100%, 50%) 40%,
    hsl(189, 100%, 50%) 60%,
    hsla(0, 0%, 40%, 0) 100%
  );

  animation: rotate 8s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.card .card_title__container .card_title {
  font-size: 1rem;
  color: var(--white);
}

.card .card_title__container .card_paragraph {
  margin-top: 0.25rem;
  width: 65%;

  font-size: 0.5rem;
  color: var(--paragraph);
}

.card .line {
  width: 100%;
  height: 0.1rem;
  background-color: var(--line);

  border: none;
}

.card .card__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card .card__list .card__list_item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card .card__list .card__list_item .check {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 1rem;
  height: 1rem;
  background-color: var(--primary);

  border-radius: 50%;
}

.card .card__list .card__list_item .check .check_svg {
  width: 0.75rem;
  height: 0.75rem;

  fill: var(--black);
}

.card .card__list .card__list_item .list_text {
  font-size: 0.75rem;
  color: var(--white);
}

.card .button {
  cursor: pointer;

  padding: 0.5rem;
  width: 100%;
  background-image: linear-gradient(
    0deg,
    hsl(189, 92%, 58%),
    hsl(189, 99%, 26%) 100%
  );

  font-size: 0.75rem;
  color: var(--white);

  border: 0;
  border-radius: 9999px;
  box-shadow: inset 0 -2px 25px -4px var(--white);
}

</style>
    

================================================
FILE: Cards/igoramos77_silly-fireant-70.html
================================================
<div class="container">
    <div class="card">
        <input accept="image/png, image/jpeg" name="avatar" type="file">
        <main>
            <a href="">
                <svg xml:space="preserve" style="enable-background:new 0 0 129.5 129.5;" viewBox="0 0 129.5 129.5" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Camada_1" version="1.1">
                    <style type="text/css">
                        .st0 {
                            fill: #BAC5E1;
                        }

                        .st1 {
                            fill: #FFFFFF;
                        }
                    </style>
                    <g>

                        <ellipse ry="64.8" rx="64.8" cy="64.8" cx="64.8" class="st0" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -26.8258 64.7633)"></ellipse>
                        <ellipse ry="32.6" rx="25.2" cy="54.2" cx="64.8" class="st1"></ellipse>
                        <path d="M64.8,89.1c-21.1,0-39.6,6.4-50.5,16.2c11.9,14.7,30.1,24.2,50.5,24.2c20.4,0,38.6-9.4,50.5-24.2
		C104.4,95.6,85.8,89.1,64.8,89.1z" class="st1"></path>
                        <path d="M67.6,105.9H62c-5.3,0-9.6-4.3-9.6-9.6V74.4c0-5.3,4.3-9.6,9.6-9.6h5.6c5.3,0,9.6,4.3,9.6,9.6v21.9
		C77.2,101.6,72.9,105.9,67.6,105.9z" class="st1"></path>
                        <path d="M43,55.7c1.5,4.2,0.9,8.3-1.3,9s-5.1-2.1-6.6-6.3c-1.5-4.2-0.9-8.3,1.3-9C38.6,48.6,41.6,51.4,43,55.7z" class="st1"></path>
                        <ellipse ry="4.2" rx="8.1" cy="57" cx="90.4" class="st1" transform="matrix(0.328 -0.9447 0.9447 0.328 6.8843 123.7582)"></ellipse>
                        <path d="M42.7,55.5c-3.3-6-6.6-12.3-6.5-19.1c0.2-6.8,5.3-14,12.1-13.7c1.2,0,2.4,0.3,3.5,0.1c2.3-0.3,4.1-2.3,6-3.7
		c4.3-3.2,10.3-3.9,15.2-1.9c3.1,1.2,5.7,3.4,8.6,4.8c5.6,2.6,12.4,2.4,17.8-0.7c-1.1,2.1-3,3.8-5.2,4.6c2,0.6,4.3,0.6,6.3-0.2
		c-1.2,2.2-3.2,3.9-5.5,4.8c1.7,0.1,3.4,0.2,5.2,0.4c-1.5,2.1-3.6,3.7-6,4.6c1.4,0,2.7,0.1,4.1,0.1c-1,3-3.6,5.4-6.7,6.1
		c0.9,0,1.7,0,2.6,0c-2.9,4.1-5.7,8.2-8.6,12.4c-0.8,1.2-1.7,2.4-2.9,3.2c-1,0.6-2.2,0.9-3.3,1.2c-8.5,1.9-17.2,2.5-25.8,1.7
		c-3-0.3-6-0.8-8.4-2.6c-2.3-1.8-3.6-5.4-2-7.8" class="st1"></path>
                        <path d="M48.5,95.3c0.2-3.4,0.6-6.8,1.3-10.2c1.7,1.9,4.6,2.2,7.1,2.3c3.9,0.2,7.8,0.3,11.6,0.5
		c0.5,2.6,0.8,5.8-1.1,7.6c-0.9,0.9-2.1,1.3-3.3,1.6c-2.6,0.7-5.3,1.1-8,1.1c-3.2,0-7.1-0.9-8.1-4c0.3-0.3,0.7-0.6,1-0.9" class="st1"></path>
                        <path d="M81,95.3c-0.2-3.4-0.6-6.8-1.3-10.2c-1.7,1.9-4.6,2.2-7.1,2.3c-3.9,0.2-7.8,0.3-11.6,0.5
		c-0.5,2.6-0.8,5.8,1.1,7.6c0.9,0.9,2.1,1.3,3.3,1.6c2.6,0.7,5.3,1.1,8,1.1c3.2,0,7.1-0.9,8.1-4c-0.3-0.3-0.7-0.6-1-0.9" class="st1"></path>
                    </g>
                </svg>
            </a>
        </main>
        <span>
            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="12" width="12" xmlns="http://www.w3.org/2000/svg">
                <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
            </svg>
        </span>
    </div>
    <div class="info">
        <h2>Igor Brown</h2>
        <p>Developer</p>
    </div>
</div>
<style>
/* From Uiverse.io by igoramos77 - Tags: card */
.container {
  position: relative;
  height: 300px;
  background: #6c23c0;
  padding: 2rem;
  border-radius: 8px;
  transition: all .25s ease-in-out;
}

.container:hover {
  box-shadow: 0 4px 50px #00000020;
}

.container:hover .card {
  transform: translateY(-5%);
}

.info {
  margin-top: 1rem;
}

.info h2, p {
  color: #fff;
  text-align: center;
}

.card {
  transition: all .25s ease-in-out;
}

.card input {
  display: none;
}

.card main {
  position: relative;
}

.card main a svg {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid rgb(108, 35, 192);
}

.card main a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background-image: linear-gradient(to right, rgb(23, 122, 250) 20%, rgb(3, 240, 209));
  border-radius: 50%;
  overflow: hidden;
}

.card main a:hover::after {
  opacity: 1;
}

.card main a::after {
  content: "Change";
  position: absolute;
  width: 100%;
  height: 35%;
  left: 0px;
  bottom: 0px;
  background-image: linear-gradient(transparent 0%, rgba(108, 35, 192, 0.584) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(255, 255, 255);
  opacity: 0;
  transition: all 0.2s ease-in-out 0s;
  padding-bottom: 1rem;
}

.card span {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgb(119, 255, 170);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid rgb(108, 35, 192);
  color: rgb(108, 35, 192);
}
</style>


================================================
FILE: Cards/ilkhoeri_smooth-quail-87.html
================================================
<div class="card">
  <div class="wrap">
    <div class="terminal">
      <hgroup class="head">
        <p class="title">
          <svg
            width="16px"
            height="16px"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="2"
            stroke="currentColor"
            fill="none"
          >
            <path
              d="M7 15L10 12L7 9M13 15H17M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"
            ></path>
          </svg>
          Terminal
        </p>

        <button class="copy_toggle" tabindex="-1" type="button">
          <svg
            width="16px"
            height="16px"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="2"
            stroke="currentColor"
            fill="none"
          >
            <path
              d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
            ></path>
            <path
              d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
            ></path>
          </svg>
        </button>
      </hgroup>

      <div class="body">
        <pre class="pre">          <code>-&nbsp;</code>
          <code>npx&nbsp;</code>
          <code class="cmd" data-cmd="create-react-app@latest"></code>
        </pre>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by ilkhoeri  - Tags: simple, action, card, text animation, text, click effect, terminal */
.card {
  padding: 1rem;
  overflow: hidden;
  border: 1px solid #c5c5c5;
  border-radius: 12px;
  background-color: #d9d9d92f;
  backdrop-filter: blur(8px);
  min-width: 344px;
}
.wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  z-index: 10;
  border: 0.5px solid #525252;
  border-radius: 8px;
  overflow: hidden;
}
.terminal {
  display: flex;
  flex-direction: column;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  min-height: 40px;
  padding-inline: 12px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: #202425;
}
.title {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 2.5rem;
  user-select: none;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8e8e8e;
}
.title > svg {
  height: 18px;
  width: 18px;
  margin-top: 2px;
  color: #006adc;
}
.copy_toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: 0.65px solid #c1c2c5;
  margin-left: auto;
  border-radius: 6px;
  background-color: #202425;
  color: #8e8e8e;
  cursor: pointer;
}
.copy_toggle > svg {
  width: 20px;
  height: 20px;
}
.copy_toggle:active > svg > path,
.copy_toggle:focus-within > svg > path {
  animation: clipboard-check 500ms linear forwards;
}
.body {
  display: flex;
  flex-direction: column;
  position: relative;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  overflow-x: auto;
  padding: 1rem;
  line-height: 19px;
  color: white;
  background-color: black;
  white-space: nowrap;
}
.pre {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-wrap: nowrap;
  white-space: pre;
  background-color: transparent;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 16px;
}
.pre code:nth-child(1) {
  color: #575757;
}
.pre code:nth-child(2) {
  color: #e34ba9;
}
.cmd {
  height: 19px;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
}
.cmd::before {
  content: attr(data-cmd);
  position: relative;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  background-color: transparent;
  animation: inputs 8s steps(22) infinite;
}
.cmd::after {
  content: "";
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
  border-right: 0.15em solid #e34ba9;
  animation: cursor 0.5s step-end infinite alternate, blinking 0.5s infinite;
}

@keyframes blinking {
  20%,
  80% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0);
  }
}
@keyframes cursor {
  50% {
    border-right-color: transparent;
  }
}
@keyframes inputs {
  0%,
  100% {
    width: 0;
  }
  10%,
  90% {
    width: 58px;
  }
  30%,
  70% {
    width: 215px;
    max-width: max-content;
  }
}
@keyframes clipboard-check {
  100% {
    color: #fff;
    d: path(
      "M 9 5 H 7 a 2 2 0 0 0 -2 2 v 12 a 2 2 0 0 0 2 2 h 10 a 2 2 0 0 0 2 -2 V 7 a 2 2 0 0 0 -2 -2 h -2 M 9 5 a 2 2 0 0 0 2 2 h 2 a 2 2 0 0 0 2 -2 M 9 5 a 2 2 0 0 1 2 -2 h 2 a 2 2 0 0 1 2 2 m -6 9 l 2 2 l 4 -4"
    );
  }
}

</style>
    

================================================
FILE: Cards/imPradhyumn_nice-rattlesnake-46.html
================================================
<div class="card">
  <div class="remove-when-use">
    <label>Hover over me to show details</label>
  </div>
  <div class="details">
    <label>Title</label>
    <p>
      A beautiful place at the shore of XYZ sea.
      <br>
      <i>California, USA</i>
    </p>
  </div>
</div>
<style>
/* From Uiverse.io by imPradhyumn - Tags: card, transition, hover slide, card hover, 3d card */
.card {
  width: 190px;
  height: 254px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  position: relative;
}

.remove-when-use {
  text-align: center;
  width: 100%;
  position: absolute;
  color: black;
  top: 85px;
  font-weight: bold;
}

.details > p {
  font-size: .8em;
  margin-top: .5em;
}

.details > label {
  font-weight: bold;
}

.details {
  color: white;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  bottom: 0;
  height: 2.6em;
  transition: height .5s ease-in-out;
  padding: 0.6em;
  overflow: hidden;
}

.card:hover > .details {
  height: 6.7em;
}


</style>


================================================
FILE: Cards/innocentpice_short-starfish-76.html
================================================
<!-- From Uiverse.io by innocentpice  - Tags: simple, nav, vertical -->
<div class="flex flex-col p-2 border-2 border-red-300 rounded">
  <button class="flex p-2 hover:bg-blue-300 rounded">
    <svg
      class="icon"
      stroke="currentColor"
      fill="currentColor"
      stroke-width="0"
      viewBox="0 0 1024 1024"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9 0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
      ></path>
    </svg>
  </button>
  <button class="flex p-2 hover:bg-blue-300 rounded">
    <svg
      class="icon"
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      aria-hidden="true"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
      ></path>
    </svg>
  </button>
  <button class="flex p-2 hover:bg-blue-300 rounded">
    <svg
      class="icon"
      stroke="currentColor"
      fill="currentColor"
      stroke-width="0"
      viewBox="0 0 24 24"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z"
      ></path>
    </svg>
  </button>

  <button class="flex p-2 hover:bg-blue-300 rounded">
    <svg
      class="icon"
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle cx="9" cy="21" r="1"></circle>
      <circle cx="20" cy="21" r="1"></circle>
      <path
        d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"
      ></path>
    </svg>
  </button>
</div>


    

================================================
FILE: Cards/jamik-dev_black-monkey-11.html
================================================
<!-- From Uiverse.io by jamik-dev  - Tags: green, card, rounded, smooth, light, hover effect, card hover -->
<div
  class="overflow-hidden before:ease-in-out after:ease-in-out bg-white group cursor-pointer relative flex flex-col gap-4 justify-between rounded-2xl border hover:after:w-full border-white-222 hover:border-[#11BE86] duration-300 p-4 md:p-6 px-8 before:h-full before:w-2 hover:before:w-full after:absolute after:top-0 after:left-0 after:h-full after:w-0 after:duration-300 after:opacity-5 after:bg-[url('https://s3-alpha-sig.figma.com/img/6956/4aec/59afa93303a34a23ecc13368dc4094db?Expires=1717977600&amp;Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&amp;Signature=PFrwNwC7QeqlIUsWFsC-jbQzlVTUSh7T5VfJ9vMNaAEsoOS92kRDH-OjWcAX~dmuZ77fPWjZJX0v1kXaZENeqa--USg1BcCN8z~Z1id5y5RQT1ZTU5OR4PRrLISHbowyTAu65h2jCKOSYXCrXN3F6fH8epD-Pm9TCGCYvD9svkhnbTSZxPKZhn8okHm7W~3wWyIhJBaZyQ30qWwD~JAh5r0BRE6XIfIpgTlUWeLq9wwCbwFZQR5RWInuHUfLrfhvAnxmzVVoTO1TxyjHOeXVb68Tc~nJuypwlDmcd0Sg02sJu3-uj7vFXRul6qw0LRfsQrWS5c5RJ~P-z5-eS~1jTA__')] before:duration-300 before:-z-1 before:bg-[#11BE86] before:absolute before:top-0 before:left-0"
>
  <h4
    class="font-medium text-lg duration-300 group-hover:text-white group-hover:z-[5]"
  >
    Hover me to get awesome result
  </h4>
  <a
    class="text-[#1D2825] group-hover:z-[5] font-medium duration-300 group-hover:text-white mt-auto flex items-center gap-2 text-sm xl:text-base"
  >
    More about
    <svg
      class="w-4 h-4"
      stroke="currentColor"
      stroke-width="1.5"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
  </a>
</div>


    

================================================
FILE: Cards/jamik-dev_chatty-walrus-78.html
================================================
<!-- From Uiverse.io by jamik-dev  - Tags: card, weather, theme-switch, transition, card template, tailwindcss, weather-icon -->
<div
  class="duration-300 font-mono text-white group cursor-pointer relative overflow-hidden bg-[#DCDFE4] w-28 h-48 dark:bg-[#22272B] rounded-3xl p-4 hover:w-56 hover:bg-blue-200 hover:dark:bg-[#0C66E4]"
>
  <h3 class="text-xl text-center">Today</h3>
  <div class="gap-4 relative">
    <svg
      viewBox="0 0 64 64"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      class="w-20 scale-[110%]"
    >
      <defs>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="28.33"
          y1="19.67"
          x2="21.5"
          x1="16.5"
          id="b"
        >
          <stop stop-color="#fbbf24" offset="0"></stop>
          <stop stop-color="#fbbf24" offset=".45"></stop>
          <stop stop-color="#f59e0b" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="50.8"
          y1="21.96"
          x2="39.2"
          x1="22.56"
          id="c"
        >
          <stop stop-color="#f3f7fe" offset="0"></stop>
          <stop stop-color="#f3f7fe" offset=".45"></stop>
          <stop stop-color="#deeafb" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="48.05"
          y1="42.95"
          x2="25.47"
          x1="22.53"
          id="a"
        >
          <stop stop-color="#4286ee" offset="0"></stop>
          <stop stop-color="#4286ee" offset=".45"></stop>
          <stop stop-color="#0950bc" offset="1"></stop>
        </linearGradient>
        <linearGradient
          xlink:href="#a"
          y2="48.05"
          y1="42.95"
          x2="32.47"
          x1="29.53"
          id="d"
        ></linearGradient>
        <linearGradient
          xlink:href="#a"
          y2="48.05"
          y1="42.95"
          x2="39.47"
          x1="36.53"
          id="e"
        ></linearGradient>
      </defs>
      <circle
        stroke-width=".5"
        stroke-miterlimit="10"
        stroke="#f8af18"
        fill="url(#b)"
        r="5"
        cy="24"
        cx="19"
      ></circle>
      <path
        d="M19 15.67V12.5m0 23v-3.17m5.89-14.22l2.24-2.24M10.87 32.13l2.24-2.24m0-11.78l-2.24-2.24m16.26 16.26l-2.24-2.24M7.5 24h3.17m19.83 0h-3.17"
        stroke-width="2"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke="#fbbf24"
        fill="none"
      >
        <animateTransform
          values="0 19 24; 360 19 24"
          type="rotate"
          repeatCount="indefinite"
          dur="45s"
          attributeName="transform"
        ></animateTransform>
      </path>
      <path
        d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"
        stroke-width=".5"
        stroke-miterlimit="10"
        stroke="#e6effc"
        fill="url(#c)"
      ></path>
      <path
        d="M24.39 43.03l-.78 4.94"
        stroke-width="2"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke="url(#a)"
        fill="none"
      >
        <animateTransform
          values="1 -5; -2 10"
          type="translate"
          repeatCount="indefinite"
          dur="0.7s"
          attributeName="transform"
        ></animateTransform>
      </path>
      <path
        d="M31.39 43.03l-.78 4.94"
        stroke-width="2"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke="url(#d)"
        fill="none"
      >
        <animateTransform
          values="1 -5; -2 10"
          type="translate"
          repeatCount="indefinite"
          dur="0.7s"
          begin="-0.4s"
          attributeName="transform"
        ></animateTransform>
      </path>
      <path
        d="M38.39 43.03l-.78 4.94"
        stroke-width="2"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke="url(#e)"
        fill="none"
      >
        <animateTransform
          values="1 -5; -2 10"
          type="translate"
          repeatCount="indefinite"
          dur="0.7s"
          begin="-0.2s"
          attributeName="transform"
        ></animateTransform>
      </path>
    </svg>
    <h4
      class="font-sans duration-300 absolute left-1/2 -translate-x-1/2 text-5xl text-center group-hover:translate-x-8 group-hover:-translate-y-16 group-hover:scale-150"
    >
      6°
    </h4>
  </div>
  <div class="absolute duration-300 -left-32 mt-2 group-hover:left-10">
    <p class="text-sm">light rain</p>
    <p class="text-sm">50% humidity</p>
  </div>
</div>


    

================================================
FILE: Cards/javadpg_odd-dragonfly-46.html
================================================
    <div class="card">
        <p class="card-p">Hover Me</p>
        <div class="card-countent">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque hic soluta amet, ipsum quia numquam excepturi veritatis deleniti similique ipsam obcaecati nulla dolor, sapiente earum blanditiis pariatur minima iure repudiandae.  
            </p>
        </div>
    </div>
<style>
/* From Uiverse.io by javadpg - Tags: card, hover, stitched, transition, css, card hover */
.card {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 350px;
  border-radius: 6px;
  transition: .3s;
  background-color: #000;
}

.card-p {
  position: absolute;
  text-align: center;
}

.card::after {
  content: "";
  position: absolute;
  z-index: -6;
  border-radius: 6px;
  width: 320px;
  height: 370px;
  background-color: #8EC5FC;
  transition: .7s;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}

.card-countent {
  padding: 20px;
  text-align: center;
  color: transparent;
  transition: all .7s;
  opacity: 0;
}

.card:hover {
  transition: .7s;
  transform: rotate(180deg);
}

.card:hover > .card-p {
  color: transparent;
}

.card:hover > .card-countent {
  opacity: 1;
  color: #000;
  transform: rotate(-180deg);
}
</style>


================================================
FILE: Cards/javadpg_strong-rabbit-3.html
================================================

    <div class="card1">
        
    </div>

<style>
/* From Uiverse.io by javadpg - Tags: card, hover, modern, neon, blur filter */
.card1 {
  background-color: black;
  width: 250px;
  height: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  box-shadow: 2px 2px 19px;
}

.card1::before {
  content: "";
  position: absolute;
  z-index: -19;
  width: 262px;
  height: 312px;
  margin: auto;
  background: rgb(4,0,255);
  background: linear-gradient(135deg, rgba(4,0,255,1) 0%, rgba(136,0,255,1) 35%, rgba(209,0,255,1) 100%);
  border-radius: 6px;
}

.card1::after {
  content: "";
  position: absolute;
  z-index: -19;
  width: 262px;
  height: 312px;
  margin: auto;
  background: rgb(4,0,255);
  background: linear-gradient(135deg, rgba(4,0,255,1) 0%, rgba(136,0,255,1) 35%, rgba(209,0,255,1) 100%);
  border-radius: 6px;
  filter: blur(20px);
  transition: 2s;
}

.card1:hover::after {
  animation: cardafter 2.5s infinite forwards;
}

@keyframes cardafter {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

</style>


================================================
FILE: Cards/javierBarroso_ordinary-frog-45.html
================================================
<div class="card">
  <div class="tools">
    <div class="circle">
      <span class="red box"></span>
    </div>
    <div class="circle">
      <span class="yellow box"></span>
    </div>
    <div class="circle">
      <span class="green box"></span>
    </div>
  </div>
  <div class="card__content">
    <p class="title">Title</p>
    <hr>
    <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus pariatur animi praesentium
    </p>
  </div>
</div>
<style>
/* From Uiverse.io by javierBarroso - Source: EmmaxPlay - Tags: card, radio, creative, cool card */
.card {
  width: 190px;
  height: 254px;
  margin: 0 auto;
  background-color: #f4f4f3;
  border-radius: 8px;
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.card::after {
  position: absolute;
  content: '';
  background-color: #454a50;
  width: 50px;
  height: 100px;
  z-index: -1;
  border-radius: 8px;
}

.tools {
  display: flex;
  align-items: center;
  padding: 9px;
  border-radius: 8px;
  background: #454a50;
  margin-top: -2px;
}

.circle {
  padding: 0 4px;
}

.card__content {
  height: 100%;
  margin: 0px;
  border-radius: 8px;
  background: #f4f4f3;
  padding: 10px;
}

.title {
  font-size: 20px;
}

.content {
  margin-top: 10px;
  font-size: 14px;
}

.box {
  display: inline-block;
  align-items: center;
  width: 10px;
  height: 10px;
  padding: 1px;
  border-radius: 50%;
}

.red {
  background-color: #ff605c;
}

.yellow {
  background-color: #ffbd44;
}

.green {
  background-color: #00ca4e;
}

</style>


================================================
FILE: Cards/javierBarroso_rare-deer-29.html
================================================
<div class="container">
  <div class="card">Good morning</div>
</div>
<style>
/* From Uiverse.io by javierBarroso - Source: pedertanberg - Tags: simple, animation, card, shadow, hover effect, css */
.card {
  width: 150px;
  height: 200px;
  background: #ffffff;
  transition: box-shadow .3s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 20px;
  padding: 10px;
  transform: rotateX(30deg) rotateY(-10deg) rotateZ(30deg);
  border-radius: 10px;
}

.card:hover {
  box-shadow: rgba(255,255,255,0.5) 5px 10px ,
  rgba(255,255,255,0.4) 10px 20px ,
  rgba(255,255,255,0.3) 15px 30px;
}

.container {
  transform-style: preserve-3d;
  perspective: 250px;
}
</style>


================================================
FILE: Cards/jeremy-deurvillier_great-treefrog-69.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by jeremy-deurvillier - Tags: card */
.card {
  text-align: center;
  color: #262626;
  background: linear-gradient(-45deg, #fbbf24, #fcd34d);
  border-radius: 4px;
  padding: 32px;
}

.heading {
  font-size: 1.2em;
  font-weight: bold;
  text-align: left;
  margin-bottom: 24px;
}

.heading > span {
  font-style: italic;
  color: #fcd34d;
  background: #262626;
  border-radius: 4px;
  display: inline-block;
  padding: 2px 6px 2px 4px;
}

.content {
  text-align: center;
  padding: 24px;
  margin-bottom: 24px;
}

.item {
  font-size: 1.05em;
  display: inline;
  margin: 10px;
}

.item:last-child {
  display: block;
}

.item > svg {
  transform: translateY(6px);
}

.item > span {
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
}

.card > button {
  font-size: 1.05em;
  font-weight: bold;
  text-transform: uppercase;
  color: #262626;
  background: transparent;
  border: 2px solid #262626;
  border-radius: 4px;
  padding: 14px 32px 14px 32px;
  cursor: pointer;
}

.card > button:hover {
  color: #fcd34d;
  background: #262626;
}

.card > button::before {
  content: "< ";
  display: none;
}

.card > button::after {
  content: " />";
  display: none;
}

.card > button:hover::before,
.card > button:hover::after {
  display: inline;
}
</style>


================================================
FILE: Cards/jeremyssocial_lucky-lionfish-47.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by jeremyssocial  - Tags: simple, card, light */
/* General styles */
.card {
  width: 22em;
  padding: 1.5em;
  background: #fff;
  transform: rotate(-1deg);
  font-family: "Shadows Into Light", cursive;
  box-shadow: 0.5em 0.5em 1em rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #f9f9f9, #e0e0e0 100%);
  border-radius: 2em;
  position: relative;
  overflow: hidden;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  background: conic-gradient(from 0deg, #ffeb3b, #ff9100, #e040fb, #ff1493);
  transform-origin: center;
  animation: rotate 8s linear infinite;
  z-index: -1;
  border-radius: 50%;
  filter: blur(20px);
}

.card::after {
  animation-direction: reverse;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.image {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 1em;
  margin-bottom: 1em;
  box-shadow: 0.2em 0.2em 0.4em rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image:hover {
  transform: scale(1.05);
  box-shadow: 0.4em 0.4em 0.8em rgba(0, 0, 0, 0.3);
}

.heading {
  font-size: 2em;
  color: #000;
  text-align: center;
  margin-bottom: 1.2em;
  text-shadow: 2px 2px 4px #888;
  position: relative;
  z-index: 1;
  background: linear-gradient(45deg, #f39c12, #e74c3c, #9b59b6, #3498db);
  -webkit-background-clip: text;
  color: transparent;
  animation: hueShift 2s linear infinite;
}

@keyframes hueShift {
  0% {
    filter: hue-rotate(0);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.heading::after {
  content: "";
  position: absolute;
  width: 110%;
  height: 0.2em;
  background: linear-gradient(90deg, #ff1493 0%, #ffe600 100%);
  bottom: -0.4em;
  left: -5%;
  transform: rotate(-2deg);
  box-shadow: 0 0 10px #ffe600;
}

.icons {
  display: flex;
  gap: 1em;
  padding: 0.75em;
  border-radius: 0.75em;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0.125em 0.125em 0 #ccc, 0 0 1em rgba(255, 255, 255, 0.5);
  border: 2px solid #e040fb;
  transform: skew(-3deg);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) skew(-3deg);
  }
  50% {
    transform: translateY(-0.5em) skew(-3deg);
  }
}

.icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  border: 2px dashed #000;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0.125em 0.125em 0 #ccc, 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.icons a:hover {
  background: linear-gradient(45deg, #ff1493, #e040fb);
  color: #fff;
  transform: scale(1.2) rotate(-5deg);
  box-shadow: 0 0 1em rgba(255, 105, 180, 0.5);
}

.icons a::before,
.icons a::after {
  content: "";
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  background-color: #ff1493;
  border-radius: 50%;
  animation: bounce 2s infinite alternate;
}

.icons a::before {
  top: -0.5em;
  right: 50%;
  transform: translateX(50%);
}

.icons a::after {
  bottom: -0.5em;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-0.3em);
  }
}

/* Additional styles for SVG icons */
.icons a svg {
  filter: drop-shadow(0 0 0.5em #e040fb);
}

</style>
    

================================================
FILE: Cards/jlutrezehue_light-stingray-80.html
================================================
<!-- From Uiverse.io by jlutrezehue  - Tags: simple, card, ios, modern, clean, card template, tailwind, tailwindcss -->
<div class="bg-gray-100 max-w-sm mx-auto rounded shadow-md">
  <div class="text-center p-6">
    <p class="text-lg font-bold mb-0">
      Allow this device to access photos and videos?
    </p>
    <p class="text-sm mb-0">
      This device will be able to access photos and videos while it is connected
      to your iPhone.
    </p>
  </div>
  <div class="border-t border-gray-300 flex justify-center p-0">
    <div class="flex-1 text-center">
      <button
        class="text-blue-600 hover:bg-white hover:rounded-bl-md w-full py-2"
        type="button"
      >
        Allow
      </button>
    </div>
    <div class="border-l border-gray-300"></div>
    <div class="flex-1 text-center">
      <button
        class="text-blue-600 font-bold hover:bg-white hover:rounded-br-md w-full py-2"
        type="button"
      >
        Don't Allow
      </button>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/joe-herbert_new-goose-94.html
================================================
<div class="card">
  <div class="child card-1">1</div>
  <div class="child card-2">2</div>
  <div class="child card-3">3</div>
</div>

<style>
/* From Uiverse.io by joe-herbert  - Tags: minimalist, card, hover, animated, curtains */
/*Card design*/
.card {
  width: 200px;
  height: 300px;
  background: lightgray;
  box-shadow: 0 4px 35px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.card > .child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: clip-path 0.6s;
  z-index: 1;
}

.card .card-1 {
  clip-path: polygon(0% 0%, 75% 0%, 0% 75%);
}

.card .card-1:hover {
  clip-path: polygon(0% 0%, 170% 0%, 0% 170%);
}

.card .card-1:has(~ .card-2:hover),
.card .card-1:has(~ .card-3:hover) {
  clip-path: polygon(0% 0%, 15% 0%, 0% 15%);
}

.card .card-2 {
  z-index: 0;
}

.card .card-3 {
  clip-path: polygon(25% 100%, 100% 25%, 100% 100%);
}

.card .card-3:hover {
  clip-path: polygon(-70% 100%, 100% -70%, 100% 100%);
}

.card .card-1:hover ~ .card-3,
.card .card-2:hover ~ .card-3 {
  clip-path: polygon(85% 100%, 100% 85%, 100% 100%);
}

/*Optional styles*/
.card {
  font: 30px Arial, Helvetica, sans-serif;
}

.card > .child {
  /*If using background image on card children*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.6s;
}

.card .card-1 {
  background-color: #23a;
  color: white;
  padding-top: 30%;
  padding-left: 20%;
}

.card .card-1:hover {
  padding-top: 65%;
  padding-left: 48%;
}

.card .card-2 {
  padding-top: 65%;
  padding-left: 48%;
  background-color: #f16;
}

.card .card-3 {
  padding-top: 100%;
  padding-left: 76%;
  background-color: #dd2;
}

.card .card-3:hover {
  padding-top: 65%;
  padding-left: 48%;
}

</style>
    

================================================
FILE: Cards/joe-herbert_young-insect-90.html
================================================
<div class="card">
  <img
    class="image"
    alt=""
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a class="instagram" href="https://www.instagram.com/uiverse.io/">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 25"
        height="25"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
        ></path>
      </svg>
    </a>
    <a class="x" href="https://twitter.com/uiverse_io">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
        ></path>
      </svg>
    </a>
    <a class="discord" href="https://discord.gg/KD8ba2uUpT">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 25 25"
        height="25"
        width="25"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by joe-herbert  - Tags: card, hover effect, card hover */
.card {
  background-color: #ccc;
  box-shadow: 0 0 10px -5px black;
  border-radius: 10px;
  width: 150px;
  height: 200px;
  transition: all 0.3s;
  position: absolute;
  transition-delay: 0.3s;
}

.card:hover {
  width: 500px;
  height: 250px;
  transition-delay: 0s;
}

.card::after {
  content: "\2193  Hover me \2193";
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  top: -30px;
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s, visibility 0.3s;
  transition-delay: 0.3s;
}

.card:hover::after {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s;
}

.image {
  width: 100%;
  float: left;
  transition: all 0.3s;
  margin: 0%;
  transition-delay: 0.3s;
}

.card:hover .image {
  transition-delay: 0s;
  width: 50%;
  margin: 0 15px 0 0;
  filter: drop-shadow(-5px 5px 4px #000000aa);
}

.heading,
.icons {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  transition-delay: 0s;
}

.heading {
  display: block;
  font-size: 30px;
  font-weight: bold;
  font-family: Montserrat, sans-serif;
  margin: 25px 20px;
  text-align: right;
  position: relative;
  z-index: 1;
  color: white;
  text-shadow: 1px 1px 3px #0004;
  user-select: none;
  background: linear-gradient(
    130deg,
    pink 20%,
    rgb(196, 91, 196) 50%,
    rgb(85, 183, 228) 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card:hover .heading {
  transition-delay: 0.3s;
  opacity: 1;
  visibility: visible;
}

.heading::after {
  content: "!";
}

.card:hover .icons {
  transition-delay: 0.3s;
  opacity: 1;
  visibility: visible;
}

.icons {
  text-align: center;
  transform: translateX(-10px);
}

.icons a {
  text-decoration: none;
}

.icons svg {
  width: 50px;
  height: 50px;
  margin: 10px;
  transition: transform 0.3s;
}

.icons svg:hover {
  transform: translateY(-5px);
  transform-origin: center -10px;
}

.icons svg:active {
  transform: scale(0.9);
}

.icons svg path {
  stroke: black;
  opacity: 0.6;
  transition: opacity 0.6s;
}

.icons svg:hover path {
  opacity: 1;
}

</style>
    

================================================
FILE: Cards/joe-watson-sbf_honest-bullfrog-6.html
================================================
<div class="container">
  <div class="box">
    <span class="title">GLASS EFFECT</span>
    <div>
      <strong>JOE WATSON SBF</strong>
      <p>0000 000 000 0000</p>
      <span>VALID</span> <span>01/28</span>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by joe-watson-sbf  - Tags: glassmorphism, animation, card, hover, card template, cardhover , card animation, card hover */
.container {
  color: white;
  position: relative;
  font-family: sans-serif;
}

.container::before,
.container::after {
  content: "";
  background-color: #fab5704c;
  position: absolute;
}

.container::before {
  border-radius: 50%;
  width: 6rem;
  height: 6rem;
  top: 30%;
  right: 7%;
}

.container::after {
  content: "";
  position: absolute;
  height: 3rem;
  top: 8%;
  right: 5%;
  border: 1px solid;
}

.container .box {
  width: 11.875em;
  height: 15.875em;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.074);
  border: 1px solid rgba(255, 255, 255, 0.222);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 0.7rem;
  transition: all ease 0.3s;
}

.container .box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container .box .title {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.container .box div strong {
  display: block;
  margin-bottom: 0.5rem;
}

.container .box div p {
  margin: 0;
  font-size: 0.9em;
  font-weight: 300;
  letter-spacing: 0.1em;
}

.container .box div span {
  font-size: 0.7rem;
  font-weight: 300;
}

.container .box div span:nth-child(3) {
  font-weight: 500;
  margin-right: 0.2rem;
}

.container .box:hover {
  box-shadow: 0px 0px 20px 1px #ffbb763f;
  border: 1px solid rgba(255, 255, 255, 0.454);
}

</style>
    

================================================
FILE: Cards/joe-watson-sbf_little-goat-24.html
================================================
<div class="flip-card">
    <div class="flip-card-inner">
        <div class="flip-card-front">
            <p class="title">FLIP CARD</p>
            <p>Hover Me</p>
        </div>
        <div class="flip-card-back">
            <p class="title">BACK</p>
            <p>Leave Me</p>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by joe-watson-sbf - Tags: card, flip */
.flip-card {
  background-color: transparent;
  width: 190px;
  height: 254px;
  perspective: 1000px;
  font-family: sans-serif;
}

.title {
  font-size: 1.5em;
  font-weight: 900;
  text-align: center;
  margin: 0;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid coral;
  border-radius: 1rem;
}

.flip-card-front {
  background: linear-gradient(120deg, bisque 60%, rgb(255, 231, 222) 88%,
     rgb(255, 211, 195) 40%, rgba(255, 127, 80, 0.603) 48%);
  color: coral;
}

.flip-card-back {
  background: linear-gradient(120deg, rgb(255, 174, 145) 30%, coral 88%,
     bisque 40%, rgb(255, 185, 160) 78%);
  color: white;
  transform: rotateY(180deg);
}
</style>


================================================
FILE: Cards/joe-watson-sbf_rude-shrimp-21.html
================================================
<div class="card">
    <p><span>HOVER ME</span></p>
    <p><span>HOVER ME</span></p>
    <p><span>HOVER ME</span></p>
</div>
<style>
/* From Uiverse.io by joe-watson-sbf - Tags: card, hover */
.card {
  width: 210px;
  height: 254px;
  border-radius: 4px;
  background: #212121;
  display: flex;
  gap: 5px;
  padding: .4em;
}

.card p {
  height: 100%;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 2px;
  transition: all .5s;
  background: #212121;
  border: 1px solid #ff5a91;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card p:hover {
  flex: 4;
}

.card p span {
  min-width: 14em;
  padding: .5em;
  text-align: center;
  transform: rotate(-90deg);
  transition: all .5s;
  text-transform: uppercase;
  color: #ff568e;
  letter-spacing: .1em;
}

.card p:hover span {
  transform: rotate(0);
}
</style>


================================================
FILE: Cards/joe-watson-sbf_swift-frog-15.html
================================================
<div class="container">
    <div class="item">SCROLL SNAP</div>
    <div class="item">SCROLL SNAP</div>
    <div class="item">SCROLL SNAP</div>
    <div class="item">SCROLL SNAP</div>
    <div class="item">SCROLL SNAP</div>
</div>
<style>
/* From Uiverse.io by joe-watson-sbf - Tags: card, scroll snap */
.container {
  display: flex;
  overflow: auto;
  scroll-snap-type: x mandatory;
  padding: 10px;
  gap: 10px;
  scroll-padding: 10px;
  width: 190px;
  height: 254px;
  background-color: white;
  border: 2px solid coral;
}

.container .item {
  scroll-snap-align: start;
  flex: 0 0 60%;
  background: linear-gradient(120deg, coral 30%, rgb(255, 187, 163) 88%, rgb(255, 185, 160) 
  40%, coral 48%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: bisque;
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.3em;
  font-weight: 400;
  font-family: sans-serif;
  border-radius: .2rem;
}
</style>


================================================
FILE: Cards/joe-watson-sbf_wise-quail-35.html
================================================
<div class="card">
    <div class="header">
        <div class="img-box">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path fill="none" d="M0 0h24v24H0z"></path>
                <path d="M20.083 15.2l1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85zm0-4.7l1.202.721a.5.5 0 0 1 0 .858L12 17.65l-9.285-5.571a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85zm-7.569-9.191l8.771 5.262a.5.5 0 0 1 0 .858L12 13 2.715 7.429a.5.5 0 0 1 0-.858l8.77-5.262a1 1 0 0 1 1.03 0zM12 3.332L5.887 7 12 10.668 18.113 7 12 3.332z" fill="rgba(66,193,110,1)"></path>
            </svg>
        </div>
        <span class="title">Features
    </span></div>

    <div class="content">
        <p>
            Lorem ipsum dolor sit tali amet, consectus uy
            adipiscing it amet it...
        </p>

        <a class="btn-link">Read More...</a>
    </div>
</div>
<style>
/* From Uiverse.io by joe-watson-sbf - Tags: summary, card, hover, card template, cardhover , card animation, card hover */
.card {
  width: 190px;
  height: 120px;
  transition: all .5s;
  box-shadow: 15px 15px 30px rgba(25, 25, 25, 0.11),
             -15px -15px 30px rgba(60, 60, 60, 0.082);
  text-align: center;
  overflow: hidden;
}

.card:hover {
  height: 260px;
  background: linear-gradient(360deg, #edededc5 60%, hsla(0, 0%, 13%, 1) 70%);
}

.card .header {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #212121;
  margin-bottom: 16px;
}

.card .header .img-box {
  width: 50px;
}

.card .header .title {
  font-size: 1em;
  letter-spacing: .1em;
  font-weight: 900;
  text-transform: uppercase;
  padding: 4px 0 14px 0;
  transition: all .5s;
  color: #edededc5;
}

.card:hover .header {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
}

.card:hover .card .header .title {
  padding: 0;
}

.card .content {
  display: block;
  text-align: left;
  color: #212121;
  margin: 0 18px;
}

.card .content p {
  transition: all .5s;
  font-size: .8em;
  margin-bottom: 8px;
}

.card .content a {
  color: #1d8122;
  cursor: pointer;
  transition: all .5s;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.card .content .btn-link:hover {
  border-bottom: 1px solid #1d8122;
}
</style>


================================================
FILE: Cards/jubayer-10_white-catfish-8.html
================================================
<!-- From Uiverse.io by jubayer-10  - Tags: card -->
<div
  class="w-64 bg-white shadow-[0px_0px_15px_rgba(0,0,0,0.09)] p-9 space-y-3 relative overflow-hidden"
>
  <div class="w-24 h-24 bg-violet-500 rounded-full absolute -right-5 -top-7">
    <p class="absolute bottom-6 left-7 text-white text-2xl">02</p>
  </div>
  <div class="fill-violet-500 w-12">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      id="Layer_1"
      data-name="Layer 1"
      viewBox="0 0 24 24"
    >
      <path
        d="m24,6.928v13.072h-11.5v3h5v1H6.5v-1h5v-3H0V4.5c0-1.379,1.122-2.5,2.5-2.5h12.98c-.253.295-.54.631-.856,1H2.5c-.827,0-1.5.673-1.5,1.5v14.5h22v-10.993l1-1.079Zm-12.749,3.094C19.058.891,19.093.855,19.11.838c1.118-1.115,2.936-1.113,4.052.002,1.114,1.117,1.114,2.936,0,4.052l-8.185,8.828c-.116,1.826-1.623,3.281-3.478,3.281h-5.59l.097-.582c.043-.257,1.086-6.16,5.244-6.396Zm2.749,3.478c0-1.379-1.122-2.5-2.5-2.5-2.834,0-4.018,3.569-4.378,5h4.378c1.378,0,2.5-1.121,2.5-2.5Zm.814-1.073l2.066-2.229c-.332-1.186-1.371-2.057-2.606-2.172-.641.749-1.261,1.475-1.817,2.125,1.117.321,1.998,1.176,2.357,2.277Zm.208-5.276c1.162.313,2.125,1.134,2.617,2.229l4.803-5.18c.737-.741.737-1.925.012-2.653-.724-.725-1.908-.727-2.637,0-.069.08-2.435,2.846-4.795,5.606Z"
      ></path>
    </svg>
  </div>
  <h1 class="font-bold text-xl">UI / UX Creative Desing</h1>
  <p class="text-sm text-zinc-500 leading-6">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse fuga
    adipisicing elit
  </p>
</div>


    

================================================
FILE: Cards/jvcrz_quiet-robin-20.html
================================================
<div class="card">
  <div class="gradient"></div>
  <p class="title">uiverse</p>
  <p class="label">
    ui/ux designer trying to be an fullstack devolper<br />
    mom i love u
  </p>
  <div class="ico">
    <svg
      height="24"
      width="24"
      viewBox="0 0 108 152.01"
      xmlns="http://www.w3.org/2000/svg"
    >
      <svg
        viewBox="0 0 108 152.01"
        xmlns="http://www.w3.org/2000/svg"
        data-name="Camada 2"
        id="Camada_2"
      >
        <defs></defs>
        <g data-name="Camada 2" id="Camada_2-2">
          <path
            d="M108,28.84v-.7c0-15.55-12.6-28.14-28.15-28.14H29.18c-.42,0-.84.01-1.26.03C12.43.69.08,13.4,0,29.03c.06,10.2,4.92,19.15,12.21,24.22-7.34,4.89-12.21,13.54-12.21,23.38,0,10.61,5.65,19.82,13.95,24.45C5.76,105.87.27,114.17.02,123.66H.02c.18,7.75,3.4,14.73,8.5,19.84.61.61,1.25,1.2,1.92,1.75.18.17.37.31.56.45,5.12,3.87,11.67,6.23,18.81,6.31,0,0,.01.01.02,0,.39,0,.78-.01,1.17-.01.01.01.02.01.03,0,.02.01.03.01.05,0,.04.01.07.01.11,0,.43-.01.86-.03,1.28-.06,15.65-1.05,27.98-12.99,27.98-27.57,0-9.89,0-18.15-.03-25.01,5.04,4.41,11.64,7.07,18.86,7.07,13.5,0,24.83-9.32,27.89-21.87h0c.41-2.82.67-5.68.77-8.58h0c-.57-9.6-5.85-17.93-13.57-22.71,8.18-5.05,13.63-14.11,13.63-24.43ZM47.47,123.51c0,8.53-6.92,15.45-15.45,15.45h-1.05c-9.11,0-16.5-7.39-16.5-16.5s7.39-16.5,16.5-16.5h16.5v17.55ZM47.47,92.47h-16.5c-9.11,0-16.5-7.39-16.5-16.5s7.39-16.5,16.5-16.5h16.5v33ZM47.47,45.97h-16.5c-9.11,0-16.5-7.39-16.5-16.5s7.39-16.5,16.5-16.5h16.5v33ZM77.02,92.51h0c-9.11,0-16.5-7.39-16.5-16.5s7.39-16.5,16.5-16.5h0c9.11,0,16.5,7.39,16.5,16.5s-7.39,16.5-16.5,16.5ZM77.02,45.97h-16.5V12.97h16.5c9.11,0,16.5,7.39,16.5,16.5s-7.39,16.5-16.5,16.5Z"
            class="cls-1"
          ></path>
        </g>
      </svg>
    </svg>
    <svg
      height="24"
      width="24"
      viewBox="0 0 139.79 159.78"
      xmlns="http://www.w3.org/2000/svg"
    >
      <svg
        viewBox="0 0 141.27 159.36"
        xmlns="http://www.w3.org/2000/svg"
        data-name="Camada 2"
        id="Camada_2"
      >
        <defs></defs>
        <g data-name="Camada 2" id="Camada_2-2">
          <path
            d="M0,0l2.3,27.43h108.91l-2.51,30.22H5.44l2.45,27.43h98.53l-3.04,36.56-33.07,9.24-32.29-9.02h0s-1.84-22.14-1.84-22.14H9.19l1.29,14.44,2.6,29.2,6.41,1.72-.13.04,50.95,14.24,50.94-14.24h-.02s5.82-1.63,5.82-1.63l1.25-.34,2.61-29.21,2.58-28.86,2.45-27.43,2.7-30.22h.12l2.51-27.43H0Z"
            class="cls-1"
          ></path>
        </g>
      </svg>
    </svg>
    <svg
      height="24"
      width="24"
      viewBox="0 0 141.27 159.36"
      xmlns="http://www.w3.org/2000/svg"
    >
      <svg
        viewBox="0 0 139.79 159.78"
        xmlns="http://www.w3.org/2000/svg"
        data-name="Camada 2"
        id="Camada_2"
      >
        <defs></defs>
        <g data-name="Camada 2" id="Camada_2-2">
          <path
            d="M136.99,0H2.8C1.16,0-.13,1.4,0,3.03l11.31,136.3c.23,2.72,2.11,5.02,4.73,5.78l47.73,13.8c4,1.16,8.25,1.17,12.27.05l47.29-13.28c2.64-.74,4.54-3.04,4.78-5.77L139.78,3.04c.14-1.63-1.15-3.04-2.79-3.04ZM112.56,43.8c-.17,1.82-1.69,3.21-3.51,3.22l-60.04.35c-2.15.01-3.79,1.91-3.5,4.04l1.56,11.32c.24,1.76,1.74,3.06,3.52,3.06h56.41c2.09,0,3.73,1.8,3.53,3.88l-4.32,46.79c-.13,1.43-1.11,2.64-2.48,3.06l-33.11,10.32c-.68.21-1.41.21-2.09,0l-32.64-9.94c-1.39-.42-2.38-1.64-2.5-3.09l-1.8-20.56c-.18-2.07,1.45-3.86,3.54-3.86h9.74c1.82,0,3.35,1.38,3.53,3.2l.81,8.08c.15,1.46,1.17,2.68,2.58,3.07l17.12,4.75c.64.18,1.32.17,1.96-.02l16.4-4.9c1.38-.41,2.38-1.62,2.52-3.05l1.73-17.6c.21-2.09-1.43-3.9-3.53-3.9h-53.92c-1.82,0-3.35-1.38-3.53-3.19l-4.56-44.55c-.21-2.09,1.43-3.91,3.53-3.91h80.41c2.09,0,3.73,1.8,3.53,3.88l-.9,9.55Z"
            class="cls-1"
          ></path>
        </g>
      </svg>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by jvcrz  - Tags: simple, material design, black, card, hover, dark, theme */
.card {
  font-family: "Poppins", sans-serif;
  width: 562px;
  height: 289px;
  border-radius: 8px;
  background-color: rgba(36, 36, 36, 0.05);
  padding: 16px 32px 16px 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}

.cls-1 {
  fill: #fff;
}

.title {
  font-size: 36px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
}

.label {
  font-size: 18px;
  color: #ffffff;
  opacity: 0.8;
  line-height: 1.4;
  font-weight: 300;
}

.ico {
  position: absolute;
  bottom: 16px;
  left: 92px;
  display: flex;
  gap: 32px;
  opacity: 0;
  transition: left 0.3s ease, opacity 0.3s ease;
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-image: linear-gradient(to bottom, #0085d7, #5cc9ff);
  border-radius: 8px 0 0 8px;
  transition: width 0.3s ease;
}

.card:hover::before {
  width: 10px;
}

.card:hover {
  border-left-width: 10px;
}

.title,
.label {
  transition: transform 0.3s ease;
}

.card:hover .title,
.card:hover .label {
  transform: translateX(20px);
}

.card:hover .ico {
  left: 52px;
  opacity: 0.3;
}

.gradient {
  position: absolute;
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: #ffffff;
  border-radius: 50%;
  filter: blur(200px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover .gradient {
  opacity: 0.04;
}

</style>
    

================================================
FILE: Cards/kalifpermadi_grumpy-treefrog-72.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by kalifpermadi - Tags: card */
.card {
  background-color: #191825;
  padding: 2em;
  border-radius: 2em;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.2s linear;
  color: #FFA3FD;
  font-weight: bold;
}

.card * {
  z-index: 1;
}

.card::before {
  content: '';
  background-color: #E384FF;
  position: absolute;
  width: 6em;
  height: 36em;
  animation: rotate 5s linear infinite;
}

.card::after {
  content: '';
  background-color: #191825;
  position: absolute;
  inset: .1em;
  border-radius: 2em;
}

.card:hover {
  scale: 1.1;
}

.heading {
  text-align: center;
  font-size: 1.33em;
  text-transform: uppercase;
  font-weight: bold;
}

.heading>span {
  font-size: 1.5em;
  color: #FFA3FD;
  text-shadow: 0 0 .5em #FFA3FD;
}

.content, button {
  margin-top: 2em;
}

.content {
  display: flex;
}

.item {
  border: 1px #FFA3FD solid;
  padding: 0.75em;
  border-radius: 0.75em;
  display: flex;
  align-items: center;
  transition: all 0.2s linear;
}

.item>span {
  margin-left: .33em;
}

.item + .item {
  margin-left: 1em;
}

.item:hover {
  background-color: #FFA3FD;
  box-shadow: 0 0 .5em .2em #FFA3FD;
  cursor: pointer;
}

button {
  padding: .75em 1.5em;
  border-radius: 1.5em;
  background-color: #FFA3FD;
  color: #191825;
  font-weight: bold;
  border: none;
  transition: all 0.2s linear;
}

button:hover {
  background-color: #191825;
  color: #FFA3FD;
  outline: none;
  scale: 1.1;
  border: #FFA3FD 1px solid;
  cursor: pointer;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: Cards/kamehame-ha_ancient-insect-32.html
================================================
<div class="scroll-snap-card">
    <div class="slide red">
        <p class="tip">Scroll On Me</p>
    </div>
    <div class="slide blue">
        <p class="tip">Scroll On Me</p>
    </div>
    <div class="slide green">
        <p class="tip">Scroll On Me</p>
    </div>
</div>
<style>
/* From Uiverse.io by kamehame-ha - Tags: simple, card, scroll snap, clean */
.red {
  background-color: #f43f5e;
}

.blue {
  background-color: #3b82f6;
}

.green {
  background-color: #22c55e;
}

.scroll-snap-card {
  height: 150px;
  width: 250px;
  scroll-snap-type: y mandatory;
  overflow: auto;
  border-radius: 10px;
}

.scroll-snap-card .slide {
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-snap-card .slide p {
  font-size: 1em;
  color: white;
  font-weight: 700;
}
</style>


================================================
FILE: Cards/kamehame-ha_chilly-snake-91.html
================================================
<div class="cards">
    <div class="card red">
        <p class="tip">Hover Me</p>
        <p class="second-text">Lorem Ipsum</p>
    </div>
    <div class="card blue">
        <p class="tip">Hover Me</p>
        <p class="second-text">Lorem Ipsum</p>
    </div>
    <div class="card green">
        <p class="tip">Hover Me</p>
        <p class="second-text">Lorem Ipsum</p>
    </div>
</div>
<style>
/* From Uiverse.io by kamehame-ha - Tags: simple, animated, clean, sample */
.cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cards .red {
  background-color: #f43f5e;
}

.cards .blue {
  background-color: #3b82f6;
}

.cards .green {
  background-color: #22c55e;
}

.cards .card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 100px;
  width: 250px;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  transition: 400ms;
}

.cards .card p.tip {
  font-size: 1em;
  font-weight: 700;
}

.cards .card p.second-text {
  font-size: .7em;
}

.cards .card:hover {
  transform: scale(1.1, 1.1);
}

.cards:hover > .card:not(:hover) {
  filter: blur(10px);
  transform: scale(0.9, 0.9);
}
</style>


================================================
FILE: Cards/kamehame-ha_dry-bat-57.html
================================================
<!-- From Uiverse.io by kamehame-ha  - Tags: simple, purple, minimalist, gradient, card, cookie -->
<div
  class="bg-gradient-to-r from-blue-400 to-indigo-500 rounded-lg overflow-hidden shadow-xl max-w-sm"
>
  <div class="p-4">
    <h2 class="text-lg font-semibold mb-2 text-white">Hello Traveler,</h2>
    <p class="text-sm mb-4 text-white">
      This website uses cookies to enhance user experience and to analyze
      performance and traffic on our website.
    </p>
    <div class="flex justify-end space-x-4">
      <button
        class="duration-300 bg-black/0 hover:bg-black/25 text-white font-bold py-2 px-4 rounded"
      >
        Accept
      </button>
      <button
        class="duration-300 bg-black/0 hover:bg-black/25 text-white font-bold py-2 px-4 rounded"
      >
        Decline
      </button>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/kennyotsu-monochromia_popular-dragonfly-22.html
================================================
<div class="card">
  <div class="title">
    <p class="heading">MONOCHROMIA</p>
    <p class="desc">palette reference</p>
  </div>
  <div class="wrapper">
    <div class="color black">
      black
      <span class="hex">#000000</span>
    </div>
    <div class="color eerie-black">
      eerie-black
      <span class="hex">#1b1b1b</span>
    </div>
    <div class="color chinese-black">
      chinese-black
      <span class="hex">#141414</span>
    </div>
     <div class="color night-rider">
      night rider
      <span class="hex">#2e2e2e</span>
    </div>
    <div class="color chinese-white">
      chinese-white
      <span class="hex">#e1e1e1</span>
    </div>
    <div class="color anti-flash-white">
      anti-flash-white
      <span class="hex">#f3f3f3</span>
    </div>
    <div class="color white">
      white
      <span class="hex">#ffffff</span>
    </div>
  <div class="border">common border radius <span>5px | 8px</span></div>
  </div>
</div>
<style>
/* From Uiverse.io by kennyotsu-monochromia - Tags: card, theme, monochromia, palette */
.card {
  width: 400px;
  height: 350px;
  --black: #000000;
  --ch-black: #141414;
  --eer-black: #1b1b1b;
  --night-rider: #2e2e2e;
  --white: #ffffff;
  --af-white: #f3f3f3;
  --ch-white: #e1e1e1;
  font-family: Helvetica, sans-serif;
}

.wrapper {
  margin: 2rem auto;
  width: 250px;
  font-size: small;
}

.title {
  text-align: center;
  color: #1b1b1b;
}

.heading {
  font-weight: bold;
  letter-spacing: 7px;
  font-size: 1.5rem;
  position: relative;
  margin-bottom: 6px;
}

.heading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #e8e8e8;
  z-index: -1;
  filter: blur(50px);
  height: 50px;
}

.color {
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.hex {
  text-align: end;
  font-family: monospace;
  text-transform: uppercase;
}

.black {
  background: var(--black);
  color: var(--ch-white);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.eerie-black {
  background: var(--ch-black);
  color: var(--ch-white);
}

.chinese-black {
  background: var(--eer-black);
  color: var(--ch-white);
}

.night-rider {
  background: var(--night-rider);
  color: var(--ch-white);
}

.chinese-white {
  background: var(--ch-white);
  color: var(--night-rider);
}

.anti-flash-white {
  background: var(--af-white);
  color: var(--night-rider);
}

.white {
  background: var(--white);
  color: var(--night-rider);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.border {
  color: var(--night-rider);
  padding: 10px 10px;
  text-align: center;
}

.border span {
  border-radius: 5px;
  color: var(--ch-white);
  padding: 2px 4px;
  background-color: var(--night-rider);
}
</style>


================================================
FILE: Cards/kennyotsu_fast-emu-70.html
================================================
<div class="notifications-container">
  <div class="alert">
    <div class="flex">
      <div class="flex-shrink-0">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 alert-svg">
          <path clip-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" fill-rule="evenodd"></path>
        </svg>
      </div>
      <div class="alert-prompt-wrap">
        <p class="text-sm text-yellow-700">
          Your trial 18 years of life has expired. Continue by working your sweat off or 
          <a class="alert-prompt-link" href="#">Upgrade To Premium</a>
        </p>
    </div>
  </div>
  </div>
</div>
<style>
/* From Uiverse.io by kennyotsu - Tags: simple, material design, alert, notification, warning, card */
.notifications-container {
  width: 320px;
  height: auto;
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flex {
  display: flex;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.alert {
  background-color: rgb(254 252 232);
  border-left-width: 4px;
  border-color: rgb(250 204 21);
  border-radius: 0.375rem;
  padding: 1rem;
}

.alert-svg {
  height: 1.25rem;
  width: 1.25rem;
  color: rgb(250 204 21);
}

.alert-prompt-wrap {
  margin-left: 0.75rem;
  color: rgb(202 138 4);
}

.alert-prompt-link {
  font-weight: 500;
  color: rgb(141, 56, 0);
  text-decoration: underline;
}

.alert-prompt-link:hover {
  color: rgb(202 138 4);
}
</style>


================================================
FILE: Cards/kennyotsu_proud-moth-58.html
================================================
<!-- From Uiverse.io by kennyotsu - Source: Super Petya https://www.producthunt.com/products/uiverse-io/reviews - Tags: card, product, Star rating, review -->
<div class="flex flex-col p-8 rounded-2xl bg-white">
      <div class="flex">
        <div class="flex gap-4">
          <svg id="uuid-07ad7dd7-fd17-4cee-b780-e58842132324" xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 cursor-pointer" viewBox="0 0 600 600"><path d="M600,300c0,1.18-.01,2.36-.02,3.54-.01,.63-.02,1.25-.03,1.87-.01,.78-.03,1.56-.05,2.33-.03,1.21-.07,2.42-.11,3.63-.04,.99-.08,1.98-.13,2.97-.03,.8-.08,1.61-.13,2.41-.05,1.07-.11,2.14-.19,3.21-.04,.71-.09,1.42-.14,2.13-.04,.55-.08,1.11-.13,1.67-.06,.8-.13,1.6-.2,2.4-.56,6.58-1.34,13.09-2.33,19.53-.19,1.24-.38,2.48-.59,3.71-.43,2.59-.89,5.17-1.39,7.73-.21,1.11-.43,2.22-.66,3.33-.24,1.2-.5,2.4-.76,3.6,0,.04-.01,.07-.02,.09-.18,.86-.37,1.72-.57,2.58-.13,.59-.27,1.18-.41,1.77-.23,1.02-.48,2.04-.73,3.05-.57,2.35-1.17,4.68-1.8,7.01-1.35,4.98-2.82,9.91-4.42,14.78-.28,.87-.57,1.73-.86,2.6-.07,.22-.14,.44-.22,.65-.29,.85-.58,1.7-.88,2.54-.29,.84-.58,1.67-.89,2.5-.28,.82-.58,1.63-.89,2.44-.3,.84-.62,1.68-.94,2.51-.41,1.08-.82,2.15-1.24,3.22-.56,1.44-1.14,2.87-1.73,4.29-.37,.9-.74,1.79-1.12,2.68-2,4.74-4.12,9.42-6.36,14.02-.4,.84-.81,1.67-1.23,2.51-.01,.02-.01,.04-.02,.05-.52,1.05-1.05,2.09-1.59,3.13-.59,1.18-1.2,2.34-1.82,3.5-.53,1.01-1.06,2.01-1.61,3.02-.58,1.06-1.16,2.12-1.75,3.17-.59,1.06-1.19,2.11-1.79,3.15-.03,.05-.05,.1-.08,.15-1.1,1.91-2.22,3.81-3.36,5.7-.09,.13-.16,.26-.24,.39-.63,1.03-1.26,2.06-1.9,3.08-.64,1.02-1.28,2.04-1.93,3.05-.58,.91-1.16,1.8-1.75,2.7-.14,.22-.28,.43-.42,.64-.6,.9-1.2,1.8-1.81,2.7-.67,1-1.35,1.99-2.04,2.98-.68,.99-1.37,1.97-2.07,2.95-.7,.98-1.4,1.96-2.11,2.93-.71,.97-1.42,1.94-2.14,2.9-2.15,2.89-4.36,5.74-6.63,8.54-.75,.94-1.51,1.87-2.28,2.8-.76,.92-1.53,1.84-2.31,2.76-.77,.92-1.55,1.83-2.34,2.74-.78,.91-1.57,1.81-2.37,2.7-.8,.9-1.6,1.79-2.41,2.68-.69,.77-1.4,1.53-2.1,2.29-1.8,1.95-3.62,3.86-5.47,5.75-.79,.8-1.57,1.59-2.36,2.38-.84,.85-1.7,1.7-2.56,2.53-.86,.84-1.72,1.67-2.59,2.5-.9,.87-1.82,1.73-2.74,2.58-.84,.78-1.68,1.55-2.53,2.32-.89,.81-1.78,1.61-2.68,2.41-.83,.73-1.66,1.46-2.49,2.19-.12,.11-.25,.22-.37,.32-.86,.74-1.72,1.47-2.58,2.2-.85,.72-1.7,1.43-2.55,2.14-.26,.22-.52,.43-.79,.65-2.59,2.13-5.21,4.21-7.88,6.25-.96,.73-1.91,1.46-2.88,2.18-.96,.72-1.93,1.43-2.9,2.14-.97,.71-1.95,1.41-2.93,2.11-.98,.7-1.96,1.39-2.95,2.07-.99,.69-1.98,1.37-2.98,2.04-.8,.54-1.6,1.08-2.4,1.61-.32,.21-.64,.42-.96,.63-.89,.58-1.78,1.16-2.68,1.74-1.01,.65-2.03,1.29-3.05,1.93-2.05,1.28-4.11,2.54-6.2,3.77-2.84,1.68-5.72,3.32-8.63,4.91-.35,.19-.7,.39-1.06,.58-.98,.53-1.97,1.05-2.95,1.57-1.01,.53-2.02,1.06-3.03,1.57-.12,.07-.25,.14-.38,.2-.9,.46-1.8,.92-2.7,1.37-.22,.11-.44,.22-.67,.33-.83,.41-1.67,.82-2.51,1.23-3.49,1.69-7.01,3.31-10.58,4.87-1.96,.85-3.93,1.69-5.91,2.5-1.6,.66-3.21,1.31-4.83,1.93-.86,.35-1.73,.68-2.61,1.01-1.05,.41-2.12,.8-3.18,1.2-.21,.07-.43,.15-.65,.23-.88,.32-1.77,.64-2.66,.96-.82,.29-1.65,.58-2.48,.86-.89,.31-1.79,.61-2.69,.91-.95,.32-1.91,.64-2.88,.95-5.61,1.81-11.3,3.45-17.07,4.93-1.16,.3-2.33,.6-3.5,.89-.97,.23-1.95,.47-2.94,.69-.61,.15-1.23,.29-1.84,.43-.86,.19-1.72,.39-2.58,.57-1.21,.27-2.43,.53-3.65,.77-1.11,.23-2.22,.45-3.34,.66-.17,.04-.35,.08-.53,.11-1.16,.22-2.32,.44-3.49,.64-1.23,.22-2.46,.44-3.7,.64-1.23,.21-2.47,.4-3.71,.59-2.4,.37-4.8,.71-7.22,1.01-.93,.12-1.86,.24-2.8,.34-3.42,.42-6.86,.76-10.32,1.05-.99,.09-1.97,.17-2.97,.24-.54,.04-1.08,.08-1.63,.11-.78,.06-1.57,.11-2.36,.15-.5,.04-.99,.06-1.49,.09-1.07,.06-2.14,.12-3.22,.16-.26,.02-.51,.03-.77,.03-1.09,.05-2.18,.09-3.27,.12-1.77,.06-3.54,.1-5.31,.13-1.44,.02-2.88,.03-4.33,.03C134.31,600,0,465.69,0,300c0-23.04,2.6-45.47,7.52-67.02,6.15-26.95,15.92-52.52,28.8-76.18,14.35-26.37,32.54-50.34,53.82-71.17l22.09,45.95,7.04,3.12,.29,.13,14.05,6.25,181.87,80.79,4.95,2.2,1.11-2.16,3.05-5.91,9.47-.64,11.48,5.3,.5,.23,2.23,1.03,2.46-1.82h.01l142.49-105.7,25.94-19.24c1.09,1.16,2.17,2.33,3.23,3.51,1.02,1.12,2.03,2.25,3.02,3.38,.09,.09,.17,.19,.25,.29,1.03,1.16,2.03,2.33,3.03,3.51,1.04,1.21,2.06,2.43,3.07,3.66,11.49,13.97,21.74,28.99,30.59,44.9,23.98,43.11,37.64,92.76,37.64,145.59Z" fill="#fbb03b"></path><path d="M600,300c0,1.18-.01,2.36-.02,3.54-.01,.63-.02,1.25-.03,1.87-.01,.78-.03,1.56-.05,2.33-.03,1.21-.07,2.42-.11,3.63-.04,.99-.08,1.98-.13,2.97-.03,.8-.08,1.61-.13,2.41-.05,1.07-.11,2.14-.19,3.21-.04,.71-.09,1.42-.14,2.13-.04,.55-.08,1.11-.13,1.67-.06,.8-.13,1.6-.2,2.4-.56,6.58-1.34,13.09-2.33,19.53-.19,1.24-.38,2.48-.59,3.71-.43,2.59-.89,5.17-1.39,7.73-.21,1.11-.43,2.22-.66,3.33-.24,1.2-.5,2.4-.76,3.6,0,.04-.01,.07-.02,.09-.18,.86-.37,1.72-.57,2.58-.13,.59-.27,1.18-.41,1.77-.23,1.02-.48,2.04-.73,3.05-.57,2.35-1.17,4.68-1.8,7.01-1.35,4.98-2.82,9.91-4.42,14.78-.28,.87-.57,1.73-.86,2.6-.07,.22-.14,.44-.22,.65-.29,.85-.58,1.7-.88,2.54-.29,.84-.58,1.67-.89,2.5-.28,.82-.58,1.63-.89,2.44-.3,.84-.62,1.68-.94,2.51-.41,1.08-.82,2.15-1.24,3.22-.56,1.44-1.14,2.87-1.73,4.29-.37,.9-.74,1.79-1.12,2.68-2,4.74-4.12,9.42-6.36,14.02-.4,.84-.81,1.67-1.23,2.51-.01,.02-.01,.04-.02,.05-.52,1.05-1.05,2.09-1.59,3.13-.59,1.18-1.2,2.34-1.82,3.5-.53,1.01-1.06,2.01-1.61,3.02-.58,1.06-1.16,2.12-1.75,3.17-.59,1.06-1.19,2.11-1.79,3.15-.03,.05-.05,.1-.08,.15-1.1,1.91-2.23,3.81-3.36,5.7-.09,.13-.16,.26-.24,.39-.63,1.03-1.26,2.06-1.9,3.08-.64,1.02-1.28,2.04-1.93,3.05-.58,.91-1.16,1.8-1.75,2.7-.14,.22-.28,.43-.42,.64-.6,.9-1.2,1.8-1.81,2.7-.67,1-1.35,1.99-2.04,2.98-.68,.99-1.37,1.97-2.07,2.95-.7,.98-1.4,1.96-2.11,2.93-.71,.97-1.42,1.94-2.14,2.9-2.16,2.89-4.37,5.74-6.63,8.54-.75,.94-1.51,1.87-2.28,2.8-.76,.92-1.53,1.84-2.31,2.76-.77,.92-1.55,1.83-2.34,2.74-.78,.9-1.57,1.81-2.37,2.7-.8,.9-1.6,1.79-2.41,2.68-.69,.77-1.4,1.53-2.1,2.29-1.8,1.95-3.62,3.86-5.47,5.75-.79,.8-1.57,1.59-2.36,2.38-.84,.85-1.7,1.7-2.56,2.53-.86,.84-1.72,1.67-2.59,2.5-.9,.87-1.82,1.73-2.74,2.58-.84,.78-1.68,1.55-2.53,2.32-.89,.81-1.78,1.61-2.68,2.41-.83,.73-1.66,1.46-2.49,2.19-.12,.11-.25,.22-.37,.32-.86,.74-1.72,1.47-2.58,2.2-.85,.72-1.7,1.43-2.55,2.14-.26,.22-.52,.43-.79,.65-2.59,2.13-5.22,4.21-7.88,6.25-.96,.73-1.91,1.46-2.88,2.18-.96,.72-1.93,1.43-2.9,2.14-.97,.71-1.95,1.41-2.93,2.11-.98,.7-1.96,1.39-2.95,2.07-.99,.69-1.98,1.37-2.98,2.04-.8,.54-1.6,1.08-2.4,1.61-.32,.21-.64,.42-.96,.63-.89,.58-1.78,1.16-2.68,1.74-1.01,.65-2.03,1.29-3.05,1.93-2.05,1.28-4.11,2.54-6.2,3.77-2.84,1.68-5.72,3.32-8.63,4.91-.35,.19-.7,.39-1.06,.58-.98,.53-1.97,1.05-2.95,1.57-1.01,.53-2.02,1.06-3.03,1.57-.12,.07-.25,.14-.38,.2-.9,.46-1.8,.92-2.7,1.37-.22,.11-.44,.22-.67,.33-.83,.41-1.67,.82-2.51,1.23-3.49,1.69-7.01,3.31-10.58,4.87-1.96,.85-3.93,1.69-5.91,2.5-1.6,.66-3.21,1.31-4.83,1.93-.86,.35-1.73,.68-2.61,1.01-1.05,.41-2.12,.8-3.18,1.2-.21,.07-.43,.15-.65,.23-.88,.32-1.77,.64-2.66,.96-.82,.29-1.65,.58-2.48,.86-.89,.31-1.79,.61-2.69,.91-.95,.32-1.91,.64-2.88,.95-5.61,1.81-11.3,3.45-17.07,4.93-1.16,.3-2.33,.6-3.5,.89-.97,.23-1.95,.47-2.94,.69-.61,.15-1.23,.29-1.84,.43-.86,.19-1.72,.39-2.58,.57-1.21,.27-2.43,.53-3.65,.77-1.11,.23-2.22,.45-3.34,.66-.17,.04-.35,.08-.53,.11-1.16,.22-2.32,.44-3.49,.64-1.23,.22-2.46,.44-3.7,.64-1.23,.21-2.47,.4-3.71,.59-2.4,.37-4.8,.71-7.22,1.01-.93,.12-1.86,.24-2.8,.34-3.42,.42-6.86,.76-10.32,1.05-.99,.09-1.97,.17-2.97,.24-.54,.04-1.08,.08-1.63,.11-.78,.06-1.57,.11-2.36,.15-.5,.04-.99,.06-1.49,.09-1.07,.06-2.14,.12-3.22,.16-.26,.02-.51,.03-.77,.03-1.09,.05-2.18,.09-3.27,.12-1.77,.06-3.54,.1-5.31,.13-1.44,.02-2.88,.03-4.33,.03C134.31,600,0,465.69,0,300c0-23.04,2.6-45.47,7.52-67.02,6.15-26.95,15.92-52.52,28.8-76.18,24.74-10.1,52.9-7.21,82.95-22.1,1.95-.96,3.91-2,5.87-3.12,2.74,3.24,5.57,6.4,8.47,9.5,45.64,48.72,110.15,79.53,181.87,80.79,1.53,.04,3.06,.05,4.6,.05,.49,0,.98,0,1.46-.01,8.1-.04,16.1-.46,24-1.25,1.73-.16,3.47-.35,5.19-.56h.01c67.68-8.1,127.23-42.65,168.01-93.03,15.15,8.2,29.71,17.34,43.61,27.34,23.98,43.11,37.64,92.76,37.64,145.59Z" fill="gray"></path><path d="M518.75,127.07c-40.78,50.38-100.34,84.94-168.02,93.03-1.54,.18-3.09,.36-4.64,.51-.19,.02-.37,.04-.55,.05-7.9,.79-15.9,1.21-24,1.25-.48,.01-.97,.01-1.46,.01h-.24c-1.46,0-2.91-.01-4.36-.05-71.72-1.26-136.23-32.07-181.87-80.79-2.9-3.1-5.73-6.26-8.47-9.5,29.73-16.99,61.81-30.33,95.64-39.4l104.59,122.3-.78,1.52,9.47-.64,56.27-131.89c36.12,5.76,70.64,16.29,102.9,30.93,8.67,3.92,17.18,8.15,25.52,12.67Z" fill="gray"></path><path d="M416.02,23.26l-25.69,60.21-56.27,131.89-9.47,.64,.78-1.52-104.59-122.3-52.75-61.67c.74-.36,1.48-.72,2.22-1.07,1.06-.51,2.12-1.02,3.19-1.51,1.01-.48,2.03-.94,3.05-1.4,3.78-1.72,7.61-3.35,11.48-4.91,.84-.34,1.68-.68,2.52-1,.85-.34,1.69-.66,2.54-.98,1.11-.43,2.22-.84,3.33-1.25,.93-.35,1.86-.68,2.79-1.02,1.08-.38,2.16-.76,3.24-1.13,1.35-.47,2.71-.93,4.08-1.37,.7-.23,1.41-.46,2.12-.69,1.8-.57,3.61-1.13,5.43-1.67,.67-.21,1.35-.41,2.02-.59,1.07-.32,2.14-.63,3.22-.93,1.23-.34,2.46-.68,3.7-1,2.73-.73,5.48-1.41,8.24-2.06,1.38-.32,2.76-.64,4.15-.94,1.39-.31,2.78-.61,4.18-.89,1.21-.25,2.42-.49,3.63-.72,1.59-.31,3.18-.6,4.78-.88,1.41-.25,2.82-.48,4.24-.71,1.18-.19,2.36-.37,3.55-.54,.6-.1,1.21-.18,1.82-.27,.94-.13,1.89-.26,2.84-.39,.27-.03,.55-.07,.82-.1,1.11-.15,2.23-.29,3.34-.41,.25-.04,.5-.07,.74-.09,1.14-.14,2.28-.26,3.42-.37,3.32-.35,6.66-.64,10.01-.88,1.13-.08,2.27-.15,3.41-.21,.31-.02,.62-.04,.94-.06,.97-.05,1.94-.1,2.91-.14,.53-.03,1.07-.06,1.61-.07,.98-.05,1.96-.08,2.94-.11,.3,0,.6-.02,.9-.03,1.17-.03,2.34-.06,3.52-.08,.27,0,.55-.01,.83-.01,1.4-.02,2.81-.03,4.22-.03s2.88,.01,4.31,.03c1.13,.02,2.26,.04,3.38,.07,1.1,.02,2.2,.06,3.3,.1,.87,.03,1.74,.06,2.61,.11,1.26,.05,2.53,.11,3.78,.19,1.13,.06,2.25,.13,3.37,.21,.49,.03,.98,.06,1.47,.1,1.14,.08,2.28,.17,3.41,.27,.14,.01,.29,.02,.43,.04,1.4,.12,2.8,.25,4.19,.39,1.32,.13,2.64,.27,3.96,.42,.88,.1,1.76,.2,2.64,.32,1.04,.12,2.07,.25,3.1,.39,.75,.1,1.5,.2,2.25,.31,.68,.09,1.37,.19,2.05,.3,.93,.13,1.85,.27,2.77,.42,.07,0,.14,.02,.21,.03,1.38,.21,2.75,.44,4.11,.68,1.05,.18,2.1,.36,3.15,.56,.48,.08,.96,.17,1.43,.26,1.25,.24,2.49,.48,3.72,.73,3.79,.76,7.55,1.6,11.28,2.51,1.07,.25,2.13,.52,3.19,.79,.2,.04,.4,.1,.6,.15,.91,.23,1.82,.47,2.72,.71,.37,.1,.74,.19,1.1,.3,.99,.26,1.98,.54,2.97,.82,.08,.01,.15,.03,.22,.06,1.13,.32,2.26,.64,3.39,.98,1.17,.34,2.34,.7,3.51,1.06,3.52,1.08,7.01,2.23,10.46,3.44,.82,.29,1.64,.58,2.45,.87,.42,.15,.83,.3,1.25,.45,1.04,.38,2.08,.76,3.11,1.16,.81,.3,1.62,.61,2.42,.93,.81,.3,1.62,.62,2.42,.95,.72,.27,1.43,.56,2.13,.85,1.06,.43,2.11,.86,3.16,1.3Z" fill="#a67c52"></path><path d="M168.03,30.51l52.75,61.67c-33.83,9.07-65.91,22.41-95.64,39.4-12.55-14.8-23.45-31.05-32.4-48.47,9.39-8.98,19.36-17.35,29.85-25.05,.63-.47,1.26-.93,1.9-1.38,.5-.37,1-.73,1.51-1.08,.75-.54,1.51-1.08,2.27-1.61,1.38-.97,2.77-1.92,4.17-2.87,1-.67,2-1.34,3.01-2,.69-.46,1.38-.91,2.08-1.36,2.61-1.69,5.26-3.34,7.94-4.95,1-.6,2.01-1.2,3.02-1.79,1.01-.59,2.02-1.18,3.04-1.76,.83-.48,1.67-.95,2.51-1.42,1.22-.68,2.45-1.36,3.69-2.03,1.02-.54,2.04-1.09,3.06-1.62,1.04-.55,2.09-1.09,3.13-1.62,.81-.41,1.61-.82,2.42-1.22,.56-.28,1.13-.56,1.69-.84Z" fill="gray"></path><path d="M222.96,9.99c2.73-.73,5.48-1.42,8.24-2.06-2.76,.65-5.51,1.33-8.24,2.06Z" fill="gray"></path><path d="M531.77,109.51c-4.09,6.04-8.44,11.9-13.02,17.56-8.34-4.52-16.85-8.75-25.52-12.67-32.26-14.64-66.78-25.17-102.9-30.93l25.69-60.21c6.65,2.79,13.19,5.82,19.58,9.07,.7,.35,1.4,.71,2.09,1.07,1.18,.61,2.36,1.23,3.52,1.85,2.34,1.25,4.66,2.53,6.96,3.84,5.79,3.29,11.45,6.77,16.99,10.43,1.06,.7,2.12,1.41,3.17,2.13,1.09,.74,2.18,1.49,3.26,2.24,1.08,.75,2.15,1.52,3.22,2.28,.86,.62,1.72,1.24,2.57,1.87,.76,.55,1.51,1.11,2.25,1.67,.74,.55,1.48,1.1,2.21,1.66,.43,.33,.86,.66,1.28,.99,.61,.47,1.23,.95,1.83,1.43,.92,.72,1.84,1.44,2.75,2.18,.67,.53,1.34,1.07,2,1.62,.44,.35,.88,.72,1.32,1.09,.73,.59,1.45,1.19,2.17,1.81,.17,.13,.33,.27,.49,.41,.69,.57,1.37,1.15,2.04,1.74,.7,.6,1.4,1.21,2.1,1.82,.09,.08,.18,.16,.26,.23,.78,.69,1.56,1.38,2.33,2.07,.36,.32,.71,.64,1.06,.96,.73,.66,1.45,1.32,2.16,1.98,.22,.2,.44,.41,.66,.61,.58,.54,1.16,1.08,1.73,1.63,.62,.58,1.24,1.17,1.85,1.76,1.24,1.19,2.47,2.39,3.68,3.6,.71,.7,1.41,1.41,2.11,2.12,.06,.06,.12,.12,.16,.17,.86,.86,1.7,1.73,2.54,2.6,.1,.1,.2,.21,.3,.32,.84,.88,1.68,1.76,2.51,2.65,1.09,1.16,2.17,2.33,3.23,3.51,1.02,1.12,2.03,2.25,3.02,3.38,.09,.09,.17,.19,.25,.29,1.03,1.16,2.03,2.33,3.03,3.51,1.04,1.21,2.06,2.43,3.07,3.66Z" fill="gray"></path><polygon points="361.43 593.41 367.74 515.71 353.06 406.41 349.15 260.24 321.95 260.24 328.58 417.25 334.97 518.31 334.97 598.41 361.43 593.41" fill="#999"></polygon><path d="M519.17,95.16l-25.94,19.24-142.5,105.7-2.46,1.82-2.23-1.03-.5-.23-11.48-5.3,56.27-131.89,25.69-60.21c6.65,2.79,13.19,5.82,19.58,9.07,.7,.35,1.4,.71,2.09,1.07,1.18,.61,2.36,1.23,3.52,1.85,2.34,1.25,4.66,2.53,6.96,3.84,5.79,3.29,11.45,6.77,16.99,10.43,1.06,.7,2.12,1.41,3.17,2.13,1.09,.74,2.18,1.49,3.26,2.24,1.08,.75,2.15,1.52,3.22,2.28,.86,.62,1.72,1.24,2.57,1.87,.76,.55,1.51,1.11,2.25,1.67,.74,.55,1.48,1.1,2.21,1.66,.43,.33,.86,.66,1.28,.99,.61,.47,1.23,.95,1.83,1.43,.92,.72,1.84,1.44,2.75,2.18,.67,.53,1.34,1.07,2,1.62,.44,.35,.88,.72,1.32,1.09,.73,.59,1.45,1.19,2.17,1.81,.17,.13,.33,.27,.49,.41,.69,.57,1.37,1.15,2.04,1.74,.7,.6,1.4,1.21,2.1,1.82,.09,.08,.18,.16,.26,.23,.78,.69,1.56,1.38,2.33,2.07,.36,.32,.71,.64,1.06,.96,.73,.66,1.45,1.32,2.16,1.98,.22,.2,.44,.41,.66,.61,.58,.54,1.16,1.08,1.73,1.63,.62,.58,1.24,1.17,1.85,1.76,1.24,1.19,2.47,2.39,3.68,3.6,.71,.7,1.41,1.41,2.11,2.12,.06,.06,.12,.12,.16,.17,.86,.86,1.7,1.73,2.54,2.6,.1,.1,.2,.21,.3,.32,.84,.88,1.68,1.76,2.51,2.65Z" fill="#42210b"></path><path d="M325.37,214.48l-.78,1.52-3.05,5.91-1.11,2.16-4.95-2.2-181.87-80.79-14.05-6.25-7.33-3.25-22.09-45.95c.86-.85,1.73-1.69,2.6-2.52,9.39-8.98,19.36-17.35,29.85-25.05,.63-.47,1.26-.93,1.9-1.38,.5-.37,1-.73,1.51-1.08,.75-.54,1.51-1.08,2.27-1.61,1.38-.97,2.77-1.92,4.17-2.87,1-.67,2-1.34,3.01-2,.69-.46,1.38-.91,2.08-1.36,2.61-1.69,5.26-3.34,7.94-4.95,1-.6,2.01-1.2,3.02-1.79,1.01-.59,2.02-1.18,3.04-1.76,.83-.48,1.67-.95,2.51-1.42,1.22-.68,2.45-1.36,3.69-2.03,1.02-.54,2.04-1.09,3.06-1.62,1.04-.55,2.09-1.09,3.13-1.62,.81-.41,1.61-.82,2.42-1.22,.56-.28,1.13-.56,1.69-.84l45.26,32.84,112.08,151.13Z" fill="#42210b"></path><polygon points="356.59 250.72 354.18 278.38 349.64 278.69 324.48 280.44 322.53 273.97 316.31 253.35 323.48 235.23 320.43 224.07 319.84 221.92 318.34 216.42 324.59 216 334.06 215.36 347.12 214.48 346.09 220.61 346.04 220.89 343.82 234.11 356.59 250.72" fill="#b7b7b7"></polygon></svg>
          <div class="flex flex-col gap-1">
            <div class="flex gap-3 items-center -mt-1">
              <p class="font-semibold cursor-pointer">Super Petya</p>
              <p class="text-sm text-[#ff6154] cursor-pointer">Follow</p>
            </div>
            <div class="font-light text-md text-[#4b587c]">Cool guy</div>
          </div>
        </div>
      </div>
      <div class="mt-4 text-[#005ef6] text-xl tracking-[2px]">
        ★★★★★
      </div>
      <div class="italic mt-2 text-[18px] text-[#4b587c] font-normal">
        Cucumba
      </div>
      <div class="flex gap-6 text-[#4b587c] text-[12px] mt-4">
        <span class="flex items-center gap-1 cursor-pointer"><span class="text-[8px]">▲</span>Helpful</span>
        <span class="cursor-pointer hover:text-[#ff6154]">Share</span>
        <span class="cursor-pointer">Feb 10</span>
        <span class="-mt-3 text-xl tracking-[1px]">...</span>
      </div>
     </div>



================================================
FILE: Cards/kennyotsu_short-ape-5.html
================================================
<div class="notifications-container">
  <div class="success">
    <div class="flex">
      <div class="flex-shrink-0">
        
        <svg class="succes-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="success-prompt-wrap">
        <p class="success-prompt-heading">Order completed
        </p><div class="success-prompt-prompt">
          <p>You're happy now? Does this impulsive action is really going to satisfy you? Don't answer me, answer yourself. Anyway, your party-size pizza combo is on it's way.</p>
        </div>
          <div class="success-button-container">
            <button type="button" class="success-button-main">View status</button>
            <button type="button" class="success-button-secondary">Dismiss</button>
          </div>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by kennyotsu - Tags: simple, material design, alert, notification, success, card */
.notifications-container {
  width: 320px;
  height: auto;
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flex {
  display: flex;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.success {
  padding: 1rem;
  border-radius: 0.375rem;
  background-color: rgb(240 253 244);
}

.succes-svg {
  color: rgb(74 222 128);
  width: 1.25rem;
  height: 1.25rem;
}

.success-prompt-wrap {
  margin-left: 0.75rem;
}

.success-prompt-heading {
  font-weight: bold;
  color: rgb(22 101 52);
}

.success-prompt-prompt {
  margin-top: 0.5rem;
  color: rgb(21 128 61);
}

.success-button-container {
  display: flex;
  margin-top: 0.875rem;
  margin-bottom: -0.375rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.success-button-main {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  background-color: #ECFDF5;
  color: rgb(22 101 52);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: bold;
  border-radius: 0.375rem;
  border: none
}

.success-button-main:hover {
  background-color: #D1FAE5;
}

.success-button-secondary {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-left: 0.75rem;
  background-color: #ECFDF5;
  color: #065F46;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0.375rem;
  border: none;
}

</style>


================================================
FILE: Cards/kennyotsu_stupid-sloth-94.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by kennyotsu - Tags: simple, 3d, card, isometric, technique */
.one-div {
  background: rgba(77, 77, 77, 0.39);
  width: 250px;
  height: 300px;
  border-radius: 1rem;
  position: relative;
  font-family: Montserrat;
  font-size: large;
  -webkit-perspective: 600px;
  perspective: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: rotateX(-15deg) 
    rotateY(-35deg);
  transform: rotateX(-15deg) 
    rotateY(-35deg);
  -webkit-box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 18px, 0rem 5rem 25px 10px rgba(0, 0, 0, 0.11);
  box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 18px, 0rem 5rem 25px 10px rgba(0, 0, 0, 0.11);
  border: dashed 2px rgba(71, 71, 71, 0.425);
  -webkit-transition: 0.6s ease-in-out;
  transition: 0.6s ease-in-out;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.one-div:hover {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  -webkit-transform: translateY(-15px) 
    translateX(15px) 
    rotateX(-15deg) 
    rotateY(-35deg);
  transform: translateY(-15px) 
    translateX(15px) 
    rotateX(-15deg) 
    rotateY(-35deg);
  background: repeating-linear-gradient(
  45deg,
  #608bbc10,
  #6097bc10 5px,
  #466c9810 5px,
  #46679810 15px
);
  border: dashed 2px rgba(0, 140, 255, 0.13);
  -webkit-box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 18px, -1rem 5rem 25px 20px rgba(0, 0, 0, 0.089);
  box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 18px, -1rem 5rem 25px 20px rgba(0, 0, 0, 0.089);
}

.one-div::before {
  pointer-events: none;
  /* no. */
  content: '\A      ⠑⠭⠏⠇⠕⠗⠑\A       E  X  P  L  O  R  E  \A \A \A\A    🔎︎ hover';
  white-space: pre-wrap;
  padding: 20px;
  background: rgba(58, 58, 58, 0.39);
  width: 210px;
  height: 260px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-items: center;
  font-weight: 100;
  border-radius: 1rem;
  position: absolute;
  text-align: center;
  color: #fff;
  text-shadow: rgba(255, 255, 255, 0.288) 0 0 2rem;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transition: 0.4s cubic-bezier(0.87, 0, 0.13, 1);
  transition: 0.4s cubic-bezier(0.87, 0, 0.13, 1);
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
  -webkit-transform: translateY(10px) translateX(-10px);
  -ms-transform: translateY(10px) translateX(-10px);
  transform: translateY(10px) translateX(-10px);
  -webkit-box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 12px;
  box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 12px;
  border: solid 1px rgba(71, 71, 71, 0.425);
}

.one-div::after {
  pointer-events: none;
  /* One day I'll face consequences for my actions */
  content: '                                        \A\A parent\A\A ::before \A\A ::after   ';
  white-space: pre-wrap;
  font-family: monospace;
  text-align: end;
  line-height: 1px;
  word-spacing: -2rem;
  
  background: rgba(68, 68, 68, 0.39);
  width: 250px;
  height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-items: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  border-radius: 1rem;
  position: absolute;
  color: rgba(0, 0, 0, 0);
  -webkit-box-shadow: rgba(255, 255, 255, 0) 4px -4px 0px;
          box-shadow: rgba(255, 255, 255, 0) 4px -4px 0px;
  border: solid 1px rgba(71, 71, 71, 0.425);
  z-index: 20;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transition: 0.4s cubic-bezier(0.87, 0, 0.13, 1);
  transition: 0.4s cubic-bezier(0.87, 0, 0.13, 1);
  -webkit-transition-delay: 0.08s;
          transition-delay: 0.08s;
  -webkit-transform: translateY(20px) translateX(-20px);
      -ms-transform: translateY(20px) translateX(-20px);
          transform: translateY(20px) translateX(-20px);
}

.one-div:hover::before {
  height: 200px;
  -webkit-transform: translateY(20px) translateX(-20px);
      -ms-transform: translateY(20px) translateX(-20px);
          transform: translateY(20px) translateX(-20px);
  background: rgba(95, 77, 75, 0.466); 
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  color: rgba(255, 255, 255, 0);
  -webkit-transition: 0.8s cubic-bezier(0.87, 0, 0.13, 1);
  transition: 0.8s cubic-bezier(0.87, 0, 0.13, 1);
  text-shadow: rgba(255, 255, 255, 0) 0 0 2rem;
  border: solid 1px rgba(95, 77, 75, 0.466);
}

.one-div:hover::after {  
  color: rgb(224, 224, 224);
  line-height:15px;
  word-spacing: 0rem;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  height: 180px;
  -webkit-transform: translateY(40px) translateX(-40px);
      -ms-transform: translateY(40px) translateX(-40px);
          transform: translateY(40px) translateX(-40px);
  background-color: rgba(95, 91, 75, 0.377);
  border: solid 1px rgba(95, 77, 75, 0.466);
  -webkit-transition: 0.8s cubic-bezier(0.87, 0, 0.13, 1);
  transition: 0.8s cubic-bezier(0.87, 0, 0.13, 1);
}

.one-div:active {
  cursor: wait;
  height: 250px;
  -webkit-transition: 0.6s ease-in-out;
  transition: 0.6s ease-in-out;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
   -webkit-box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 18px, -1rem 7rem 25px 40px rgba(0, 0, 0, 0.068);
           box-shadow: rgba(0, 0, 0, 0.103) 4px -4px 18px, -1rem 7rem 25px 40px rgba(0, 0, 0, 0.068);
  border: dashed 2px rgba(43, 170, 255, 0.507);
}
.one-div:active::before {
  height: 210px;
  -webkit-transform: translateY(60px) translateX(-60px);
      -ms-transform: translateY(60px) translateX(-60px);
          transform: translateY(60px) translateX(-60px);
          border: solid 1px rgba(255, 92, 70, 0.466);
          backdrop-filter: blur(2px);
}

.one-div:active::after {
  height: 250px;
  -webkit-transform: translateY(120px) translateX(-120px);
      -ms-transform: translateY(120px) translateX(-120px);
          transform: translateY(120px) translateX(-120px);
  border: solid 1px rgba(255, 187, 84, 0.432);
  letter-spacing: 0.8px;
  line-height:18px;
  font-size: 1.2rem;
  backdrop-filter: blur(2px);
  
}

/* the only time in my life when I did not overcomplicated the HTML markup YAY */
</style>


================================================
FILE: Cards/kennyotsu_tasty-falcon-38.html
================================================
<div class="card-id567">
  <svg shape-rendering="crispEdges" viewBox="0 -0.5 29 29" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h7M8 0h2M14 0h1M16 0h5M22 0h7M0 1h1M6 1h1M13 1h1M17 1h2M22 1h1M28 1h1M0 2h1M2 2h3M6 2h1M8 2h1M11 2h4M18 2h1M20 2h1M22 2h1M24 2h3M28 2h1M0 3h1M2 3h3M6 3h1M8 3h2M11 3h1M13 3h1M15 3h5M22 3h1M24 3h3M28 3h1M0 4h1M2 4h3M6 4h1M8 4h4M13 4h1M15 4h1M19 4h1M22 4h1M24 4h3M28 4h1M0 5h1M6 5h1M9 5h1M12 5h2M17 5h4M22 5h1M28 5h1M0 6h7M8 6h1M10 6h1M12 6h1M14 6h1M16 6h1M18 6h1M20 6h1M22 6h7M9 7h1M11 7h1M15 7h6M0 8h4M6 8h1M8 8h1M13 8h2M17 8h3M21 8h1M24 8h3M28 8h1M2 9h1M4 9h2M7 9h1M9 9h1M14 9h1M16 9h1M19 9h2M22 9h3M28 9h1M0 10h5M6 10h1M8 10h1M13 10h1M16 10h1M18 10h1M20 10h1M22 10h3M26 10h2M1 11h1M3 11h2M7 11h1M11 11h4M16 11h1M18 11h1M20 11h5M28 11h1M1 12h3M5 12h2M9 12h1M11 12h1M13 12h5M19 12h1M25 12h2M0 13h2M3 13h3M8 13h1M10 13h2M14 13h1M16 13h2M19 13h2M22 13h2M26 13h3M0 14h1M2 14h1M4 14h3M9 14h2M12 14h1M14 14h1M16 14h1M19 14h3M23 14h2M26 14h3M0 15h2M3 15h2M8 15h1M12 15h1M14 15h3M20 15h1M22 15h3M27 15h1M0 16h1M2 16h3M6 16h1M10 16h2M18 16h1M20 16h2M24 16h2M27 16h1M1 17h2M4 17h1M7 17h3M12 17h1M14 17h2M18 17h1M20 17h2M23 17h1M25 17h3M0 18h1M3 18h1M6 18h1M8 18h5M15 18h2M23 18h1M26 18h1M2 19h4M12 19h1M14 19h1M16 19h2M19 19h3M26 19h1M1 20h1M3 20h1M6 20h7M14 20h2M17 20h10M8 21h3M12 21h1M18 21h1M20 21h1M24 21h5M0 22h7M9 22h6M19 22h2M22 22h1M24 22h2M27 22h1M0 23h1M6 23h1M9 23h1M13 23h3M18 23h1M20 23h1M24 23h2M27 23h1M0 24h1M2 24h3M6 24h1M10 24h1M12 24h1M14 24h4M20 24h5M26 24h3M0 25h1M2 25h3M6 25h1M8 25h1M11 25h2M15 25h2M19 25h3M24 25h2M28 25h1M0 26h1M2 26h3M6 26h1M8 26h1M10 26h2M13 26h1M21 26h1M23 26h1M26 26h1M28 26h1M0 27h1M6 27h1M8 27h1M11 27h1M14 27h1M16 27h1M18 27h3M23 27h1M25 27h1M27 27h1M0 28h7M8 28h1M14 28h3M19 28h2M25 28h1M27 28h1" stroke="#000000"></path>
  </svg>
  
  <div class="prompt-id567">
    <div class="token-container">

    <svg viewBox="0 0 24 24" fill="none" class="creator-points" xmlns="http://www.w3.org/2000/svg"><path d="M19.4133 4.89862L14.5863 2.17544C12.9911 1.27485 11.0089 1.27485 9.41368 2.17544L4.58674 4.89862C2.99153 5.7992 2 7.47596 2 9.2763V14.7235C2 16.5238 2.99153 18.2014 4.58674 19.1012L9.41368 21.8252C10.2079 22.2734 11.105 22.5 12.0046 22.5C12.6952 22.5 13.3874 22.3657 14.0349 22.0954C14.2204 22.018 14.4059 21.9273 14.5872 21.8252L19.4141 19.1012C19.9765 18.7831 20.4655 18.3728 20.8651 17.8825C21.597 16.9894 22 15.8671 22 14.7243V9.27713C22 7.47678 21.0085 5.7992 19.4133 4.89862ZM4.10784 14.7235V9.2763C4.10784 8.20928 4.6955 7.21559 5.64066 6.68166L10.4676 3.95848C10.9398 3.69152 11.4701 3.55804 11.9996 3.55804C12.5291 3.55804 13.0594 3.69152 13.5324 3.95848L18.3593 6.68166C19.3045 7.21476 19.8922 8.20928 19.8922 9.2763V9.75997C19.1426 9.60836 18.377 9.53091 17.6022 9.53091C14.7929 9.53091 12.1041 10.5501 10.0309 12.3999C8.36735 13.8847 7.21142 15.8012 6.68783 17.9081L5.63981 17.3165C4.69466 16.7834 4.10699 15.7897 4.10699 14.7235H4.10784ZM10.4676 20.0413L8.60933 18.9924C8.94996 17.0479 9.94402 15.2665 11.4515 13.921C13.1353 12.4181 15.3198 11.5908 17.6022 11.5908C18.3804 11.5908 19.1477 11.6864 19.8922 11.8742V14.7235C19.8922 15.2278 19.7589 15.7254 19.5119 16.1662C18.7615 15.3596 17.6806 14.8528 16.4783 14.8528C14.2136 14.8528 12.3781 16.6466 12.3781 18.8598C12.3781 19.3937 12.4861 19.9021 12.68 20.3676C11.9347 20.5316 11.1396 20.4203 10.4684 20.0413H10.4676Z" fill="currentColor"></path></svg>
    </div>
    <div class="blurry-splash"></div>
    <p>Hover For Free*<br><span class="bold-567">Creator Points</span> </p>
    <p class="really-small-text">*at the expense of your sanity</p>
  </div>
</div>
<style>
/* From Uiverse.io by kennyotsu - Tags: subscription, action, alert, card */
.card-id567 {
  width: 190px;
  height: 190px;
  background: rgb(22, 22, 22);
  color: white;
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 300ms ease;
  animation: 8s thumb-thumb infinite;
}

.card-id567 svg path {
  transition: 300ms ease;
  opacity: 0;
}

.bold-567 {
  font-weight: bold;
}

.creator-points {
  width: 3.25rem;
  height: 3rem;
  color: rgb(167 139 250);
    /* w-5 h-5 mr-2 text-indigo-400 */
}

.blurry-splash {
  position: absolute;
  inset: 0;
  width: 60px;
  margin: 0 auto;
  height: 60px;
  border-radius: 1rem;
  z-index: -1;
  opacity: 70%;
  filter: blur(15px);
  background: linear-gradient(
      120deg, rgba(167, 139, 250, 0.24)
      , rgba(167, 139, 250, 0.384), rgba(167, 139, 250, 0.226));
}

.prompt-id567 {
  position: absolute;
  color: rgb(173, 173, 173);
  text-align: center;
}

.really-small-text {
  text-align: center;
  width: 100%;
  position: absolute;
  font-size: 8px;
  margin-top: 28px;
  opacity: 0.5;
}

.card-id567:hover {
  cursor: none;
  background-color: white;
}

.card-id567:hover .prompt-id567 {
  transition: 300ms ease;
  opacity: 0;
}

.token-container {
  animation: 2s spinny-token-yayyy infinite;
  margin-bottom: 10px;
}

.prompt-id567 svg path {
  stroke: none;
  opacity: 1;
}

.card-id567:hover svg path {
  opacity: 1;
}

@keyframes spinny-token-yayyy {
  0% {
    transform: perspective(200px) rotateY(0deg);
  }

  100% {
    transform: perspective(200px) rotateY(360deg);
  }
}

@keyframes thumb-thumb {
  0%, 10%, 100% {
    transform: scale(100%);
  }

  5% {
    transform: scale(103%);
  }

  7% {
    transform: scale(97%);
  }
}
</style>


================================================
FILE: Cards/kennyotsu_wise-rattlesnake-92.html
================================================
<div class="notifications-container">
  <div class="error-alert">
    <div class="flex">
      <div class="flex-shrink-0">
        
        <svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="error-svg">
          <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" fill-rule="evenodd"></path>
        </svg>
      </div>
      <div class="error-prompt-container">
        <p class="error-prompt-heading">Your password isn't strong enough
        </p><div class="error-prompt-wrap">
          <ul class="error-prompt-list" role="list">
            <li>Password must be at least !8 characters</li>
            <li>Password must include Elon's baby name</li>
          </ul>
      </div>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by kennyotsu - Tags: simple, material design, alert, notification, card */
.notifications-container {
  width: 320px;
  height: auto;
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flex {
  display: flex;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.error-alert {
  border-radius: 0.375rem;
  padding: 1rem;
  background-color: rgb(254 242 242);
}

.error-svg {
  color: #F87171;
  width: 1.25rem;
  height: 1.25rem;
}

.error-prompt-heading {
  color: #991B1B;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: bold;
}

.error-prompt-container {
  display: flex;
  flex-direction: column;
  margin-left: 1.25rem;
}

.error-prompt-wrap {
  margin-top: 0.5rem;
  color: #B91C1C;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.error-prompt-list {
  padding-left: 1.25rem;
  margin-top: 0.25rem;
  list-style-type: disc;
}
</style>


================================================
FILE: Cards/kennyotsu_witty-deer-12.html
================================================
<div class="container noselect">
  <div class="canvas">
    <div class="tracker tr-1"></div>
    <div class="tracker tr-2"></div>
    <div class="tracker tr-3"></div>
    <div class="tracker tr-4"></div>
    <div class="tracker tr-5"></div>
    <div class="tracker tr-6"></div>
    <div class="tracker tr-7"></div>
    <div class="tracker tr-8"></div>
    <div class="tracker tr-9"></div>
    <div class="tracker tr-10"></div>
    <div class="tracker tr-11"></div>
    <div class="tracker tr-12"></div>
    <div class="tracker tr-13"></div>
    <div class="tracker tr-14"></div>
    <div class="tracker tr-15"></div>
    <div class="tracker tr-16"></div>
    <div class="tracker tr-17"></div>
    <div class="tracker tr-18"></div>
    <div class="tracker tr-19"></div>
    <div class="tracker tr-20"></div>
    <div class="tracker tr-21"></div>
    <div class="tracker tr-22"></div>
    <div class="tracker tr-23"></div>
    <div class="tracker tr-24"></div>
    <div class="tracker tr-25"></div>
    <div id="card">
    <p id="prompt">HOVER OVER :D</p>
      <div class="title">look mom,<br>no JS</div>
      <div class="subtitle">
        mouse hover tracker
      </div>
      
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by kennyotsu - Tags: complex, 3d, card */
/*works janky on mobile :<*/
.container {
  position: relative;
  width: 190px;
  height: 254px;
  transition: 200ms;
}

.container:active {
  width: 180px;
  height: 245px;
}

#card {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  transition: 700ms;
  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
}

.subtitle {
  transform: translateY(160px);
  color: rgb(134, 110, 221);
  text-align: center;
  width: 100%;
}

.title {
  opacity: 0;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out-out;
  transition-delay: 100ms;
  position: absolute;
  font-size: x-large;
  font-weight: bold;
  color: white;
}

.tracker:hover ~ #card .title {
  opacity: 1;
}

#prompt {
  bottom: 8px;
  left: 12px;
  z-index: 20;
  font-size: 20px;
  font-weight: bold;
  transition: 300ms ease-in-out-out;
  position: absolute;
  max-width: 110px;
  color: rgb(255, 255, 255);
}

.tracker {
  position: absolute;
  z-index: 200;
  width: 100%;
  height: 100%;
}

.tracker:hover {
  cursor: pointer;
}

.tracker:hover ~ #card #prompt {
  opacity: 0;
}

.tracker:hover ~ #card {
  transition: 300ms;
  filter: brightness(1.1);
}

.container:hover #card::before {
  transition: 200ms;
  content: '';
  opacity: 80%;
}

.canvas {
  perspective: 800px;
  inset: 0;
  z-index: 200;
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas: "tr-1 tr-2 tr-3 tr-4 tr-5"
    "tr-6 tr-7 tr-8 tr-9 tr-10"
    "tr-11 tr-12 tr-13 tr-14 tr-15"
    "tr-16 tr-17 tr-18 tr-19 tr-20"
    "tr-21 tr-22 tr-23 tr-24 tr-25";
}

#card::before {
  content: '';
  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
  filter: blur(2rem);
  opacity: 30%;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transition: 200ms;
}

.tr-1 {
  grid-area: tr-1;
}

.tr-2 {
  grid-area: tr-2;
}

.tr-3 {
  grid-area: tr-3;
}

.tr-4 {
  grid-area: tr-4;
}

.tr-5 {
  grid-area: tr-5;
}

.tr-6 {
  grid-area: tr-6;
}

.tr-7 {
  grid-area: tr-7;
}

.tr-8 {
  grid-area: tr-8;
}

.tr-9 {
  grid-area: tr-9;
}

.tr-10 {
  grid-area: tr-10;
}

.tr-11 {
  grid-area: tr-11;
}

.tr-12 {
  grid-area: tr-12;
}

.tr-13 {
  grid-area: tr-13;
}

.tr-14 {
  grid-area: tr-14;
}

.tr-15 {
  grid-area: tr-15;
}

.tr-16 {
  grid-area: tr-16;
}

.tr-17 {
  grid-area: tr-17;
}

.tr-18 {
  grid-area: tr-18;
}

.tr-19 {
  grid-area: tr-19;
}

.tr-20 {
  grid-area: tr-20;
}

.tr-21 {
  grid-area: tr-21;
}

.tr-22 {
  grid-area: tr-22;
}

.tr-23 {
  grid-area: tr-23;
}

.tr-24 {
  grid-area: tr-24;
}

.tr-25 {
  grid-area: tr-25;
}

.tr-1:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-2:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-3:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-4:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-5:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg);
}

.tr-6:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-7:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-8:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-9:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-10:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);
}

.tr-11:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-12:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-13:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.tr-14:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}

.tr-15:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);
}

.tr-16:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-17:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-18:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-19:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-20:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
}

.tr-21:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-22:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-23:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-24:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-25:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg);
}

.noselect {
  -webkit-touch-callout: none;
   /* iOS Safari */
  -webkit-user-select: none;
   /* Safari */
   /* Konqueror HTML */
  -moz-user-select: none;
   /* Old versions of Firefox */
  -ms-user-select: none;
   /* Internet Explorer/Edge */
  user-select: none;
   /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
}
</style>


================================================
FILE: Cards/krokettenkoal_blue-wombat-33.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by krokettenkoal - Tags: card */
.card {
  --bg-col: #010101;
  --space-col: #2d093a;
  --galaxy-col: #460a42;
  --space-gradient: radial-gradient(ellipse at top, var(--bg-col), transparent),
                    radial-gradient(ellipse at bottom, var(--galaxy-col) 10%, transparent 60%),
                    radial-gradient(ellipse at bottom right, var(--space-col), transparent);
  --space-gradient-alt: radial-gradient(ellipse at top left, var(--space-col), transparent),
                    radial-gradient(ellipse at bottom, var(--galaxy-col) 10%, transparent 60%),
                    radial-gradient(ellipse at bottom right, var(--bg-col), transparent);
  --stars: radial-gradient(circle at 52% 54%, rgba(255, 255, 255, 0.582) 3px, transparent 4px),
            radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.582) 2px, transparent 3px),
            radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.582) 3px, transparent 8px),
            radial-gradient(circle at 18% 21%, rgba(255, 255, 255, 0.582) 4px, transparent 5px),
            radial-gradient(circle at 36% 9%, rgba(255, 255, 255, 0.582) 3px, transparent 5px),
            radial-gradient(circle at 28% 31%, rgba(255, 255, 255, 0.39) 2px, transparent 3px),
            radial-gradient(circle at 62% 61%, rgba(255, 255, 255, 0.532) 3px, transparent 4px),
            radial-gradient(circle at 57% 66%, rgba(255, 255, 255, 0.842) 6px, transparent 8px),
            radial-gradient(circle at 65% 71%, rgba(255, 255, 255, 0.534) 1px, transparent 3px),
            radial-gradient(circle at 67% 68%, rgba(255, 255, 255, 0.651) 3px, transparent 3px),
            radial-gradient(circle at 43% 44%, rgba(255, 255, 255, 0.74) 2px, transparent 6px),
            radial-gradient(circle at 40% 39%, rgba(183, 243, 255, 0.842) 4px, transparent 10px),
            radial-gradient(circle at 41% 40%, rgba(255, 255, 255, 0.699) 5px, transparent 6px),
            radial-gradient(circle at 38% 38%, rgba(255, 255, 255, 0.349) 2px, transparent 4px),
            radial-gradient(circle at 39% 42%, rgba(255, 255, 255, 0.747) 5px, transparent 7px),
            radial-gradient(circle at 80% 31%, rgba(255, 255, 255, 0.781) 4px, transparent 6px),
            radial-gradient(circle at 25% 64%, rgba(255, 255, 255, 0.425) 3px, transparent 4px),
            radial-gradient(circle at 41% 49%, rgba(255, 255, 255, 0.678) 3px, transparent 6px),
            radial-gradient(circle at 50% 37%, rgba(255, 255, 255, 0.336) 1px, transparent 3px),
            radial-gradient(circle at 4% 37%, rgba(255, 255, 255, 0.336) 1px, transparent 3px),
            radial-gradient(circle at 8% 60%, rgba(255, 255, 255, 0.336) 1px, transparent 4px),
            radial-gradient(circle at 12% 54%, rgba(255, 255, 255, 0.336) 1px, transparent 5px),
            radial-gradient(circle at 6% 59%, rgba(255, 255, 255, 0.336) 2px, transparent 10px),
            radial-gradient(circle at 9% 57%, rgba(255, 255, 255, 0.336) 1px, transparent 2px),
            radial-gradient(circle at 14% 61%, rgba(255, 255, 255, 0.336) 2px, transparent 6px);
  min-width: 30rem;
  padding: 2rem 4rem;
  border-radius: 2rem;
  background-color: #010101;
  background-image: var(--space-gradient), var(--stars);
  background-size: 175% 200%;
  background-repeat: no-repeat;
  box-shadow: 5px 7px 20px var(--bg-col);
  overflow: clip;
  animation: space-drift 180s ease-in-out infinite;
}

.heading {
  font-size: .9rem;
  text-align: center;
  color: rgb(189, 188, 141);
}

.heading span {
  font-size: 2.2rem;
  font-weight: bold;
  display: block;
  font-style: italic;
  margin-top: .25rem;
  background-image: linear-gradient(90deg, rgba(196, 157, 182, 0.21), rgb(134, 71, 141), rgb(170, 84, 161), rgba(163, 130, 192, 0.094));
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 15px 10px 55px plum;
  text-transform: uppercase;
  letter-spacing: 1rem;
  z-index: 99;
  animation: heading-stretch .7s forwards ease-out;
}

.heading span::before,
.heading span::after {
  content: '—';
}

.content {
  display: grid;
  place-items: center;
  padding: 2rem;
  z-index: 1;
}

.item {
  --item-duration: 8s;
  --idx: 0;
  display: flex;
  grid-area: 1 / 1;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  font-size: 1.1rem;
  text-transform: lowercase;
  font-style: italic;
  opacity: 0;
  animation: item-fade var(--item-duration) infinite ease-in-out;
  animation-delay: calc(var(--idx) * var(--item-duration) / 3);
}

.item svg {
  width: 3rem;
  height: 3rem;
}

.item--create {
  --idx: 0;
}

.item--post {
  --idx: 1;
}

.item--inspire {
  --idx: 2;
}

button {
  --flight-duration: 3s;
  position: relative;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  column-gap: 1ch;
  border: none;
  border-bottom: 2px solid rgb(189, 188, 141);
  border-top: 2px solid rgb(189, 188, 141);
  border-radius: .9rem;
  background-color: transparent;
  color: rgb(189, 188, 141);
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 200ms ease-out;
  backdrop-filter: blur(20px);
}

button::before,
button::after {
  offset-path: path('m 0 10 c 8 -25 0 -45 400 -400');
  position: absolute;
  left: -30px;
  opacity: 0;
}

button::before {
  content: '🚀';
  transform: rotate(60deg);
  z-index: 1;
}

button::after {
  content: '💨';
  z-index: 0;
  transform: scale(0) rotate(180deg);
}

button:hover {
  color: var(--space-col);
  border-color: transparent;
  background-color: rgba(229, 202, 69, 0.637);
}

button:hover::before {
  animation: rocket-flight var(--flight-duration) infinite ease-in-out;
}

button:hover::after {
  z-index: 0;
  transform: rotate(180deg);
  animation: rocket-start var(--flight-duration) infinite ease-in-out;
}


/*
    ANIMATION: HEADING
*/

@-webkit-keyframes heading-stretch {
  from {
    opacity: .8;
    transform: scale(.8);
    letter-spacing: normal;
    filter: blur(50px);
    text-shadow: none;
  }

  to {
    opacity: unset;
    transform: unset;
    letter-spacing: 1rem;
    filter: unset;
  }
}

@-moz-keyframes heading-stretch {
  from {
    opacity: .8;
    transform: scale(.8);
    letter-spacing: normal;
    filter: blur(50px);
    text-shadow: none;
  }

  to {
    opacity: unset;
    transform: unset;
    letter-spacing: 1rem;
    filter: unset;
  }
}

@keyframes heading-stretch {
  from {
    opacity: .8;
    transform: scale(.8);
    letter-spacing: normal;
    filter: blur(50px);
    text-shadow: none;
  }

  to {
    opacity: unset;
    transform: unset;
    letter-spacing: 1rem;
    filter: unset;
  }
}

/*
    ANIMATION: SPACE
*/

@-webkit-keyframes space-drift {
  0% {
    background-position: 0% 50%;
  }

  33% {
    background-position: 80% 0%;
  }

  67% {
    background-position: 80% 100%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes space-drift {
  0% {
    background-position: 0% 50%;
  }

  33% {
    background-position: 80% 0%;
  }

  67% {
    background-position: 80% 100%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes space-drift {
  0% {
    background-position: 0% 50%;
  }

  33% {
    background-position: 80% 0%;
  }

  67% {
    background-position: 80% 100%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/*
    ANIMATION: ROCKET FLIGHT
*/

@-webkit-keyframes rocket-flight {
  0% {
    opacity: 0;
    offset-distance: 0%;
  }

  10% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: .3;
    transform: scale(.3);
  }
}

@-moz-keyframes rocket-flight {
  0% {
    opacity: 0;
    offset-distance: 0%;
  }

  10% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: .3;
    transform: scale(.3);
  }
}

@keyframes rocket-flight {
  0% {
    opacity: 0;
    offset-distance: 0%;
  }

  10% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: .3;
    transform: scale(.3);
  }
}

/*
    ANIMATION: ITEM FADE
*/

@-webkit-keyframes item-fade {
  0%, 20% {
    opacity: 0;
    transform: translateX(10px);
    filter: blur(5px);
  }

  40%, 60% {
    opacity: 1;
    transform: unset;
    filter: unset;
  }

  70%, 100% {
    opacity: 0;
    transform: translateX(-10px);
    filter: blur(5px);
  }
}

@-moz-keyframes item-fade {
  0%, 20% {
    opacity: 0;
    transform: translateX(10px);
    filter: blur(5px);
  }

  40%, 60% {
    opacity: 1;
    transform: unset;
    filter: unset;
  }

  70%, 100% {
    opacity: 0;
    transform: translateX(-10px);
    filter: blur(5px);
  }
}

@keyframes item-fade {
  0%, 20% {
    opacity: 0;
    transform: translateX(10px);
    filter: blur(5px);
  }

  40%, 60% {
    opacity: 1;
    transform: unset;
    filter: unset;
  }

  70%, 100% {
    opacity: 0;
    transform: translateX(-10px);
    filter: blur(5px);
  }
}

/*
    ANIMATION: ROCKET START (SMOKE)
*/

@-webkit-keyframes rocket-start {
  0% {
    transform: scale(0) rotate(180deg) translateX(0);
  }

  20% {
    opacity: 1;
    transform: scale(1) rotate(180deg) translateX(12px);
  }

  100% {
    opacity: 0;
    transform: scale(0) rotate(180deg) translateX(20px);
  }
}

@-moz-keyframes rocket-start {
  0% {
    transform: scale(0) rotate(180deg) translateX(0);
  }

  20% {
    opacity: 1;
    transform: scale(1) rotate(180deg) translateX(12px);
  }

  100% {
    opacity: 0;
    transform: scale(0) rotate(180deg) translateX(20px);
  }
}

@keyframes rocket-start {
  0% {
    transform: scale(0) rotate(180deg) translateX(0);
  }

  20% {
    opacity: 1;
    transform: scale(1) rotate(180deg) translateX(12px);
  }

  100% {
    opacity: 0;
    transform: scale(0) rotate(180deg) translateX(20px);
  }
}
</style>


================================================
FILE: Cards/laminelawal_white-wombat-4.html
================================================
<div class="phoneContainer">
    <div class="screen">
        <div class="camera"></div>
        <div class="appsContainer">
            <div class="widgets">
                <div class="one"></div>
                <div class="two"></div>
            </div>
            <div class="apps">
                <div class="oneApp"></div>
                <div class="oneApp"></div>
                <div class="oneApp"></div>
                <div class="oneApp"></div>
                <div class="oneApp"></div>
                <div class="oneApp"></div>
                <div class="oneApp"></div>
                <div class="oneApp"></div>
                <div class="oneApp"></div>
                <div class="oneApp"></div>
                <div class="oneApp"></div>
                <div class="oneApp"></div>
            </div>

            <div class="menuBar">
                <div class="twoApp"></div>
                <div class="twoApp"></div>
                <div class="twoApp"></div>
                <div class="twoApp"></div>
            </div>
        </div>
    </div>
    </div>
<style>
/* From Uiverse.io by laminelawal - Tags: card, iphone, widget */
.phoneContainer {
  width: 185px;
  height: 350px;
  background-color: black;
  border-radius: 20px;
  position: relative;
}

.screen {
  width: 180px;
  height: 340px;
  background: rgb(255,196,196);
  background: linear-gradient(167deg, rgba(255,196,196,1) 10%, rgba(45,138,253,1) 20%, rgba(34,193,195,1) 48%, rgba(211,216,255,1) 69%, rgba(0,164,24,1) 88%);
  border-radius: 20px;
  position: absolute;
  top: 4px;
  bottom: 2px;
  right: 2px;
  left: 2px;
  box-sizing: border-box;
}

.camera {
  width: 80px;
  background-color: black;
  position: absolute;
  height: 20px;
  top: 4%;
  right: 50%;
  transform: translate(50%, -50%);
  border-radius: 25px;
  transition: 0.3s;
  animation-name: callTransition;
  animation-duration: 1.9s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes callTransition {
  15% {
    width: 40px;
  }

  95% {
    width: 95px;
    background-color: darkblue;
  }
}

.camera:before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: rgb(19, 19, 51);
  position: absolute;
  border-radius: 50%;
  left: 5px;
  top: 2px;
}

.camera:after {
  content: "";
  width: 5px;
  height: 5px;
  background-color: lightgreen;
  position: absolute;
  border-radius: 50%;
  right: 5px;
  top: 6px;
}

.appsContainer {
  margin-top: 10px;
  position: absolute;
  right: 50%;
  top: 40%;
  transform: translate(50%, -50%);
}

.widgets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  box-sizing: border-box;
}

.one, .two {
  height: 80px;
  width: 80px;
  background-color: blue;
  border-radius: 10px;
  cursor: pointer;
}

.two {
  background-color: lightblue;
}

.oneApp, .twoApp {
  width: 35px;
  height: 35px;
  background-color: white;
  border-radius: 5px;
  margin-top: 10px;
}

.apps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 15px;
  margin-left: 5px;
}

.menuBar {
  display: flex;
  border-radius: 20px;
  position: absolute;
  bottom: -70px;
}

.menuBar .twoApp:not(:last-child) {
  margin-right: 10px;
}

.menuBar::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 13px;
  background-color: lightgray;
  border: none;
  border-radius: 20px;
  top: -5px;
  right: 50%;
  transform: translate(50%, -50%);
}

.menuBar::before {
  content: "°°°°°°";
  position: absolute;
  display: flex;
  justify-content: center;
  font-size: 18px;
  font-weight: bolder;
  color: gray;
}
</style>


================================================
FILE: Cards/lonefox-xxx_horrible-snake-61.html
================================================
<div class="card">
  Click me
</div>
<style>
/* From Uiverse.io by lonefox-xxx - Tags: card */
.card {
  width: 210px;
  height: 235px;
  background: #212121;
  box-shadow: rgba(0, 0, 0, 0.4) 10px 20px 30px, rgba(0, 0, 0, 0.3) 10px 1px 53px 3px, rgba(1, 0, 0, 0.2) 0px -1px 3px inset;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  font-weight: bolder;
  color: #fff;
}

.card:hover {
  transform: scale(1.021);
}

.card:active {
  transform: scale(0.95) rotateZ(1.1deg);
}
</style>


================================================
FILE: Cards/mRcOol7_cowardly-chicken-17.html
================================================
<div class="card">
  <img
    class="image"
    alt=""
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a class="instagram" href="https://www.instagram.com/uiverse.io/">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 25"
        height="25"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
        ></path>
      </svg>
    </a>
    <a class="x" href="https://twitter.com/uiverse_io">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        height="24"
        width="24"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
        ></path>
      </svg>
    </a>
    <a class="discord" href="https://discord.gg/KD8ba2uUpT">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 25 25"
        height="25"
        width="25"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by mRcOol7  - Tags: simple, social, card */
.container {
  font-family: "Poppins", sans-serif;
  background-color: #0d0d0d;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
}
.card {
  background: linear-gradient(135deg, #4c59e6, #8e54e9);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  animation: float 3s infinite ease-in-out alternate;
}

.ribbon {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #ffd700;
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 0 24px;
  transform: rotate(45deg);
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.image {
  width: 120px;
  height: auto;
  margin-bottom: 24px;
}

.heading {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
}

.icons {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
}

.icons a {
  color: #ffffff;
  transition: color 0.3s ease-in-out;
  position: relative;
}

.icons a:hover {
  color: #ffd700;
}

.icons a:hover::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 215, 0, 0.3);
  border-radius: 50%;
  z-index: -1;
}

.icons svg {
  width: 24px;
  height: 24px;
}

@keyframes glow {
  0% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
      0 0 20px rgba(255, 255, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
      0 0 40px rgba(255, 255, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
      0 0 20px rgba(255, 255, 255, 0.6);
  }
}

.card:hover {
  animation: glow 1.5s infinite alternate;
}

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

</style>
    

================================================
FILE: Cards/martinval9_heavy-rat-60.html
================================================
<div class="card">
</div>
<style>
/* From Uiverse.io by martinval9 - Tags: card */
.card {
 width: 190px;
 height: 254px;
 background: rgb(40,40,55);
 background: linear-gradient(344deg, rgba(40,40,55,1) 0%, rgba(16,16,18,1) 50%);
 box-shadow: 4px 6px 14px #00000036;
 border-radius: 3px;
 color: #F9F9F9;
 padding: 16px;
 transition: all .3s;
}

.card:hover {
 margin-top: -30px;
}

</style>


================================================
FILE: Cards/marwam112010_jolly-lionfish-88.html
================================================
 <div class="pack-container">
    <div class="header">
      <p class="title">
        Starter
      </p>
      <div class="price-container">
        <span>$</span>27
        <span>/mo</span>
      </div>
    </div>
    <div>
      <ul class="lists">
        <li class="list">
          <span>
            <svg aria-hidden="true" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.5 12.75l6 6 9-13.5" stroke-linejoin="round" stroke-linecap="round"></path>
            </svg>
          </span>
          <p>
            2 team members
          </p>
        </li>
        <li class="list">
          <span>
            <svg aria-hidden="true" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.5 12.75l6 6 9-13.5" stroke-linejoin="round" stroke-linecap="round"></path>
            </svg>
          </span>
          <p>
            1000+ components
          </p>
        </li>
        <li class="list">
          <span>
            <svg aria-hidden="true" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.5 12.75l6 6 9-13.5" stroke-linejoin="round" stroke-linecap="round"></path>
            </svg>
          </span>
          <p>
           1 month free updates
          </p>
        </li>
        <li class="list">
          <span>
            <svg aria-hidden="true" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.5 12.75l6 6 9-13.5" stroke-linejoin="round" stroke-linecap="round"></path>
            </svg>
          </span>
          <p>
            Life time technical support
          </p>
        </li>
      </ul>
    </div>
    <div class="button-container">
      <button type="button">
        Buy Now
      </button>
    </div>
  </div>
<style>
/* From Uiverse.io by marwam112010 - Tags: card, price, plan, subscriptions card */
.pack-container {
  position: relative;
  display: flex;
  max-width: 350px;
  flex-direction: column;
  border-radius: 12px;
  background-color: #212121;
  border: 1px solid #fff;
  padding: 1.6rem;
  color: #fff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.header {
  position: relative;
  margin: 0;
  margin-bottom: 2rem;
  overflow: hidden;
  border-radius: 0;
  border-bottom: 1px solid #fff;
  background: transparent;
  padding-bottom: 1rem;
  text-align: center;
}

.title {
  display: block;
  font-family: sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  color: #fff
}

.price-container {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  font-family: sans-serif;
  font-size: 4.5rem;
  line-height: 1;
}

.price-container span:first-child {
  margin-top: 10px;
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.price-container span:last-child {
  align-self: flex-end;
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.lists {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.list {
  display: flex;
  align-items: center;
  gap: 10px;
}

.list span {
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background-color: rgba(255, 255, 255, 0.185);
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list span svg {
  height: 12px;
  width: 12px;
}

.list p {
  display: block;
  font-family: sans-serif;
}

.button-container {
  margin-top: 20px;
  padding: 0;
}

.button-container button {
  display: block;
  width: 100%;
  background-color: #fff;
  padding: 10px 20px;
  text-transform: uppercase;
  color: #000;
  outline: 0;
  border: 0;
  border-radius: 10px;
}
</style>


================================================
FILE: Cards/mi-series_splendid-eagle-61.html
================================================
<div class="container">
  <p class="title">GPT Plus</p>
  <p class="price">$20<span>/month</span></p>
  <p class="description">Access to GPT-4, our most capable model. Faster response speed.</p>
  <b class="offer">Act fast! Offer ends on October 25, 2023.</b>
  <a class="subscribe-button" href="#">Upgrade</a>
  <div class="ribbon-wrap">
    <div class="ribbon">Special Offer!</div>
  </div>
</div>
<style>
/* From Uiverse.io by mi-series - Tags: simple, material design, pricing, green, minimalist, card, chatgpt */
.container {
  width: 300px;
  padding: 15px;
  background: #ffffff;
  text-align: center;
  border: 1px solid #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  position: relative;
}

.container .title {
  font-size: 2rem;
  font-weight: 500;
  color: #333;
}

.container .price {
  color: #40B3A2;
  font-weight: 700;
  font-size: 2.2rem;
  margin: 10px 0;
}

.container span {
  font-size: 1.2rem;
}

.container .description {
  color: #3b3b3b;
  font-size: 1.1rem;
  margin: 10px 0 10px;
}

.container .offer {
  display: block;
  color: #555;
  font-size: 1rem;
  margin-top: 10px;
}

.subscribe-button {
  display: inline-block;
  padding: 5px 0;
  background-color: #40B3A2;
  color: #fff;
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 30px;
  font-size: 1.2rem;
  margin-top: 20px;
  width: 50%;
  font-weight: 500;
  transition: 0.2s ease;
}

.subscribe-button:hover {
  opacity: .85;
}

.ribbon-wrap {
  width: 80px;
  height: 80px;
  position: absolute;
  top: -20px;
  left: 50px;
  pointer-events: none;
}

.ribbon {
  width: 200px;
  font-size: 0.8rem;
  text-align: center;
  padding: 4px 0;
  border: 1px solid #000;
  background: #40B3A2;
  color: #fff;
  position: absolute;
  transform: rotate(-45deg);
  right: -10px;
  top: 55%;
}
</style>


================================================
FILE: Cards/milegelu_evil-panda-93.html
================================================
<div class="group">
  <div class="card-box">
    <div id="Hegel" class="card">
      <div class="content">
        <p class="some">
          A film – also called a movie, motion picture, moving picture, picture,
          photoplay or (slang) flick – is a work of visual art that simulates
          experiences and otherwise communicates ideas, stories, perceptions,
          feelings, beauty, or atmosphere through the use of moving images.
          These images are generally accompanied by sound and, more rarely,
          other sensory stimulations.[1] The word "cinema", short for
          cinematography, is often used to refer to filmmaking and the film
          industry, and the art form that is the result of it.
        </p>
      </div>
      <div class="thumb">
        <svg
          viewBox="0 0 16 16"
          class="bi bi-camera-reels"
          fill="currentColor"
          height="16"
          width="16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM1 3a2 2 0 1 0 4 0 2 2 0 0 0-4 0z"
          ></path>
          <path
            d="M9 6h.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 7.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 16H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h7zm6 8.73V7.27l-3.5 1.555v4.35l3.5 1.556zM1 8v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1z"
          ></path>
          <path
            d="M9 6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM7 3a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"
          ></path>
        </svg>
      </div>
      <div class="detial">
        <div class="title">
          <p class="name">Film</p>
          <div class="action">
            <svg
              class="mode hide"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              viewBox="0 0 16 16"
            >
              <path
                d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"
              ></path>
            </svg>
            <svg
              class="mode hide"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              viewBox="0 0 16 16"
            >
              <path
                d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"
              ></path>
            </svg>
            <svg
              class="mode"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              viewBox="0 0 16 16"
            >
              <path
                d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z"
              ></path>
            </svg>
            <svg
              viewBox="0 0 16 16"
              fill="currentColor"
              height="16"
              width="16"
              xmlns="http://www.w3.org/2000/svg"
              class="mode"
            >
              <path
                d="M8.864 15.674c-.956.24-1.843-.484-1.908-1.42-.072-1.05-.23-2.015-.428-2.59-.125-.36-.479-1.012-1.04-1.638-.557-.624-1.282-1.179-2.131-1.41C2.685 8.432 2 7.85 2 7V3c0-.845.682-1.464 1.448-1.546 1.07-.113 1.564-.415 2.068-.723l.048-.029c.272-.166.578-.349.97-.484C6.931.08 7.395 0 8 0h3.5c.937 0 1.599.478 1.934 1.064.164.287.254.607.254.913 0 .152-.023.312-.077.464.201.262.38.577.488.9.11.33.172.762.004 1.15.069.13.12.268.159.403.077.27.113.567.113.856 0 .289-.036.586-.113.856-.035.12-.08.244-.138.363.394.571.418 1.2.234 1.733-.206.592-.682 1.1-1.2 1.272-.847.283-1.803.276-2.516.211a9.877 9.877 0 0 1-.443-.05 9.364 9.364 0 0 1-.062 4.51c-.138.508-.55.848-1.012.964l-.261.065zM11.5 1H8c-.51 0-.863.068-1.14.163-.281.097-.506.229-.776.393l-.04.025c-.555.338-1.198.73-2.49.868-.333.035-.554.29-.554.55V7c0 .255.226.543.62.65 1.095.3 1.977.997 2.614 1.709.635.71 1.064 1.475 1.238 1.977.243.7.407 1.768.482 2.85.025.362.36.595.667.518l.262-.065c.16-.04.258-.144.288-.255a8.34 8.34 0 0 0-.145-4.726.5.5 0 0 1 .595-.643h.003l.014.004.058.013a8.912 8.912 0 0 0 1.036.157c.663.06 1.457.054 2.11-.163.175-.059.45-.301.57-.651.107-.308.087-.67-.266-1.021L12.793 7l.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581 0-.211-.027-.414-.075-.581-.05-.174-.111-.273-.154-.315l-.353-.354.353-.354c.047-.047.109-.176.005-.488a2.224 2.224 0 0 0-.505-.804l-.353-.354.353-.354c.006-.005.041-.05.041-.17a.866.866 0 0 0-.121-.415C12.4 1.272 12.063 1 11.5 1z"
              ></path>
            </svg>
          </div>
        </div>
        <div class="level">
          <svg
            viewBox="0 0 16 16"
            class="bi bi-star-fill"
            fill="currentColor"
            height="16"
            width="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
            ></path>
          </svg>
          <svg
            viewBox="0 0 16 16"
            class="bi bi-star-fill"
            fill="currentColor"
            height="16"
            width="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
            ></path>
          </svg>
          <svg
            viewBox="0 0 16 16"
            class="bi bi-star-fill"
            fill="currentColor"
            height="16"
            width="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
            ></path>
          </svg>
          <svg
            viewBox="0 0 16 16"
            class="bi bi-star-fill"
            fill="currentColor"
            height="16"
            width="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
            ></path>
          </svg>
          <svg
            viewBox="0 0 16 16"
            class="bi bi-star"
            fill="currentColor"
            height="16"
            width="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"
            ></path>
          </svg>
        </div>

        <div class="infomation">
          <p class="propertion">2024.1.11</p>
          <p class="propertion">xxx</p>
          <p class="propertion">type</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by milegelu  - Tags: card, modern, click, hover effect, click effect, card template, cardhover , card hover */
.card {
  --card-width: 20em;
  --primer-color: hsl(241, 100%, 70%);
  --text-color: hsl(0, 0%, 100%);
  --text-color-L2: hsl(0, 0%, 60%);
  --transition: all 0.2s cubic-bezier(0.13, 0.78, 0.3, 0.99);
  background: hsl(0, 0%, 10%);

  font-size: 12px;
  line-height: 2;

  border-radius: 1em;
  padding-bottom: 0.5em;
  z-index: 20;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  transition: all 0.2s ease-in;
}
.detial {
  width: var(--card-width);
  padding: 01em 1em;
  color: var(--text-color);
  transition: all 0.2s ease-in;

  z-index: 1;
}
.name {
  font-size: 2em;
  font-weight: bold;
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.5em 0;
}

.content {
  color: var(--text-color);
  width: var(--card-width);
  position: absolute;
  transform: rotate3D(0.4, 1, 0.4, 0deg) scale(0.4);
  padding: 2em;
  opacity: 0;
  height: 20em;
  overflow: hidden;
}

.thumb {
  width: var(--card-width);
  height: 20em;
  overflow: hidden;
  transition: var(--transition);

  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.thumb svg {
  transform: scale(7);
  color: hsla(0, 0%, 100%, 0.2);
}

.card:hover {
  background-color: hsl(0, 0%, 15%);
  box-shadow: 0px 20px 40px hsl(40, 60%, 0%, 0.4),
    inset 1px 2px 4px rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}
.card:hover .detial {
  padding: 1em 2em;
}

.card:hover .thumb {
  opacity: 0.2;
  filter: blur(20px);
  transform: scale(1.5);
}
.card:hover .content {
  transform: none;
  opacity: 1;
  transition: var(--transition);
}

.infomation {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.propertion {
  font-size: 0.8em;
  color: var(--text-color-L2);
}

.action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3em;
  padding: 0 0.5em;
  border-radius: 1em;
  border: 1px solid transparent;
  transition: var(--transition);
}
.action:hover {
  box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.6),
    inset 0.5px 1px 2px rgba(255, 255, 255, 0.1);
  background: hsla(0, 0%, 50%, 0.1);
}

.mode {
  color: var(--text-color-L2);
  padding: 0.4em;
  width: 2em;
  height: 2em;
  border-radius: 0.5em;
  transition: var(--transition);
}
.mode:hover {
  color: var(--text-color);
  background: hsla(0, 0%, 50%, 0.15);
  transform: scale(1.2);
  box-shadow: 2px 4px 16px hsla(0, 0%, 100%, 0.1);
}
.mode:active {
  background: hsla(0, 0%, 50%, 0.3);
  transform: scale(1);
}
.mode.hide {
  opacity: 0;
  transition: var(--transition);
}
.action:hover .mode.hide {
  opacity: 1;
}

.level {
  color: rgb(230, 204, 89);
}

</style>
    

================================================
FILE: Cards/mirbasit01_green-skunk-3.html
================================================
<div class="card">
  <div class="main-content">
    <div class="header">
      <span></span>
      <span>03/01/2024</span>
    </div>
    <p class="heading">
      Different ways to use HTML, CSS, JAVA SCRIPT, IN REACT
    </p>
    <div class="categories">
      <span>HTML</span>
      <span>CSS</span>
      <span>JAVA SCRIPT</span>
      <span>REACT </span>
    </div>
  </div>
  <div class="footer">By @iamabdulbasit___</div>
</div>

<style>
/* From Uiverse.io by mirbasit01  - Tags: 3d, card, hover, dark, code, html, css, css effect */
.card {
  width: 330px;
  height: 370px;
  padding: 20px;
  color: white;
  background: linear-gradient(#212121, #212121) padding-box,
    linear-gradient(145deg, transparent 35%, #0a89a8, #252e31) border-box;
  border: 2px solid transparent;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transform-origin: top bottom;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.card .main-content {
  flex: 1;
}

.card .header span:first-child {
  font-weight: 600;
  color: #717171;
  margin-right: 4px;
}

.card .heading {
  font-size: 24px;
  margin: 24px 0 16px;
  font-weight: 600;
}

.card .categories {
  display: flex;
  gap: 10px;
}

.card .categories span {
  background-color: #0a89a8;
  padding: 4px 8px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  border-radius: 50em;
}

.card .footer {
  font-weight: 600;
  color: #717171;
  margin-right: 4px;
}

.card:hover {
  rotate: -6deg;
}

</style>
    

================================================
FILE: Cards/mnikita7767_wicked-parrot-99.html
================================================
<div class="container">
  <div class="container-inner">
    <div class="content">
      <p>Do you want to Continue?</p>
    </div>
    <div class="buttons">
      <button class="confirm" type="button">Confirm</button>
      <button class="cancel" type="button">Cancel</button>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by mnikita7767  - Tags: card */
.container-inner {
  background: #a4363e;
  box-sizing: border-box;
  border-radius: 30px;
  box-shadow: 5px 6px 0px -2px #620d15, -6px 5px 0px -2px #620d15,
    0px -2px 0px 2px #ee9191, 0px 10px 0px 0px #610c14,
    0px -10px 0px 1px #e66565, 0px 0px 180px 90px #0d2f66;
  padding: 20px;
  width: 310px;
}
.container-inner .content {
  background: radial-gradient(#fffbf3, #ffe19e);
  border-radius: 20px 18px 20px 18px;
  box-shadow: 0px 0px 0px 6px #5e1e21, 0px 0px 8px 6px #84222b,
    inset 0px 0px 15px 0px #614506, 6px 6px 1px 1px #e66565,
    -6px 6px 1px 1px #e66565;
  font-family: "Skranji", cursive;
  padding: 25px;
}
.container-inner .content p {
  color: #461417;
  font-size: 30px;
  font-weight: 600;
  text-align: center;
}
.buttons {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 40px;
}
button {
  border-radius: 20px;
  border: 2px solid #49181e;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  padding-inline: 20px;
  padding-block: 15px;
  text-shadow: 1px 2px 3px #000000;
}
.confirm {
  background: linear-gradient(#ced869, #536d1b);
  box-shadow: 0px 0px 0px 4px #7e1522, 0px 2px 0px 3px #e66565;
}
.confirm:hover {
  box-shadow: 0px 0px 0px 4px #7e1522, 0px 2px 0px 3px #e66565,
    inset 2px 2px 10px 3px #4e6217;
}
.cancel {
  background: linear-gradient(#ea7079, #891a1a);
  box-shadow: 0px 0px 0px 4px #7e1522, 0px 2px 0px 3px #e66565;
}
.cancel:hover {
  box-shadow: 0px 0px 0px 4px #7e1522, 0px 2px 0px 3px #e66565,
    inset 2px 2px 10px 3px #822828;
}

</style>
    

================================================
FILE: Cards/mobinkakei_heavy-bulldog-78.html
================================================
<!-- From Uiverse.io by mobinkakei  - Tags: card, creative, card template -->
<div
  class="relative flex justify-center h-[300px] w-[160px] border border-4 border-black rounded-2xl bg-gray-50"
  style="box-shadow: 5px 5px 2.5px 6px rgb(209, 218, 218)"
>
  <span
    class="border border-black bg-black w-20 h-2 rounded-br-xl rounded-bl-xl"
  ></span>

  <span
    class="absolute -right-2 top-14 border border-4 border-black h-7 rounded-md"
  ></span>
  <span
    class="absolute -right-2 bottom-36 border border-4 border-black h-10 rounded-md"
  ></span>
</div>


    

================================================
FILE: Cards/mobinkakei_tough-seahorse-37.html
================================================
<!-- From Uiverse.io by mobinkakei  - Tags: card, card template, modal -->
<div
  class="w-[250px] flex flex-col p-4 relative items-center justify-center bg-gray-800 border border-gray-800 shadow-lg rounded-2xl"
>
  <div class="">
    <div class="text-center p-3 flex-auto justify-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-12 h-12 flex items-center text-gray-600 mx-auto"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
          clip-rule="evenodd"
        ></path>
      </svg>
      <h2 class="text-xl font-bold py-4 text-gray-200">Are you sure?</h2>
      <p class="text-sm text-gray-500 px-2">
        Do you really want to delete your account? This process cannot be undone
      </p>
    </div>
    <div class="p-2 mt-2 text-center space-x-1 md:block">
      <button
        class="mb-2 md:mb-0 bg-gray-700 px-5 py-2 text-sm shadow-sm font-medium tracking-wider border-2 border-gray-600 hover:border-gray-700 text-gray-300 rounded-full hover:shadow-lg hover:bg-gray-800 transition ease-in duration-300"
      >
        Cancel
      </button>
      <button
        class="bg-green-400 hover:bg-green-500 px-5 ml-4 py-2 text-sm shadow-sm hover:shadow-lg font-medium tracking-wider border-2 border-green-300 hover:border-green-500 text-white rounded-full transition ease-in duration-300"
      >
        Confirm
      </button>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/mohamedkhire_dull-octopus-41.html
================================================
<div class="cards">
  <div class="card red">
    <p class="tip">Hover Me</p>
  </div>
  <div class="card blue">
    <p class="tip">Hover Me</p>
  </div>
  <div class="card green">
    <p class="tip">Hover Me</p>
  </div>
</div>

<style>
/* From Uiverse.io by mohamedkhire  - Tags: glassmorphism, card, box, transition, card template, cool card */
.card::before {
  border-radius: 50%;
  width: 7rem;
  height: 7rem;
  top: 20%;
}

.card::before,
.card::after {
  content: "";
  background-color: #7090fa4b;
  position: absolute;
  filter: blur(10px);
}

.cards {
  display: flex;
  gap: 40px;
}

.cards .red,
.cards .blue,
.cards .green {
  width: 200px;
  height: 180px;
  font-family: "CustomFont", Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 600;
  backdrop-filter: blur(30px);
  background-color: rgba(65, 65, 65, 0.11);
  border: 1px solid rgba(144, 161, 255, 0.171);
}

.cards .card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 10px;
  color: rgb(0, 0, 0);
  cursor: pointer;
  transition: 400ms;
}

.cards .card p.tip {
  font-size: 1em;
  font-weight: 700;
}

.cards .card p.second-text {
  font-size: 0.7em;
}

.cards .card:hover {
  transform: scale(1.1, 1.1);
}

.cards:hover > .card:not(:hover) {
  filter: blur(5px);
  transform: scale(0.9, 0.9);
}

</style>
    

================================================
FILE: Cards/mohsinraza0007_lovely-husky-84.html
================================================
<!-- From Uiverse.io by mohsinraza0007  - Tags: simple, icon, alert, red, green, card, share -->
<div
  class="duration-300 font-mono text-white group cursor-pointer relative overflow-hidden bg-[#DCDFE4] w-28 h-48 dark:bg-[#22272B] rounded-3xl p-4 hover:w-56 hover:bg-blue-200 hover:dark:bg-[#0C66E4]"
>
  <h3 class="text-xl text-center">Today</h3>
  <div class="gap-4 relative">
    <svg
      viewBox="0 0 64 64"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      class="w-20 scale-[110%]"
    >
      <defs>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="28.33"
          y1="19.67"
          x2="21.5"
          x1="16.5"
          id="b"
        >
          <stop stop-color="#fbbf24" offset="0"></stop>
          <stop stop-color="#fbbf24" offset=".45"></stop>
          <stop stop-color="#f59e0b" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="50.8"
          y1="21.96"
          x2="39.2"
          x1="22.56"
          id="c"
        >
          <stop stop-color="#f3f7fe" offset="0"></stop>
          <stop stop-color="#f3f7fe" offset=".45"></stop>
          <stop stop-color="#deeafb" offset="1"></stop>
        </linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="48.05"
          y1="42.95"
          x2="25.47"
          x1="22.53"
          id="a"
        >
          <stop stop-color="#4286ee" offset="0"></stop>
          <stop stop-color="#4286ee" offset=".45"></stop>
          <stop stop-color="#0950bc" offset="1"></stop>
        </linearGradient>
        <linearGradient
          xlink:href="#a"
          y2="48.05"
          y1="42.95"
          x2="32.47"
          x1="29.53"
          id="d"
        ></linearGradient>
        <linearGradient
          xlink:href="#a"
          y2="48.05"
          y1="42.95"
          x2="39.47"
          x1="36.53"
          id="e"
        ></linearGradient>
      </defs>
      <circle
        stroke-width=".5"
        stroke-miterlimit="10"
        stroke="#f8af18"
        fill="url(#b)"
        r="5"
        cy="24"
        cx="19"
      ></circle>
      <path
        d="M19 15.67V12.5m0 23v-3.17m5.89-14.22l2.24-2.24M10.87 32.13l2.24-2.24m0-11.78l-2.24-2.24m16.26 16.26l-2.24-2.24M7.5 24h3.17m19.83 0h-3.17"
        stroke-width="2"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke="#fbbf24"
        fill="none"
      >
        <animateTransform
          values="0 19 24; 360 19 24"
          type="rotate"
          repeatCount="indefinite"
          dur="45s"
          attributeName="transform"
        ></animateTransform>
      </path>
      <path
        d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"
        stroke-width=".5"
        stroke-miterlimit="10"
        stroke="#e6effc"
        fill="url(#c)"
      ></path>
      <path
        d="M24.39 43.03l-.78 4.94"
        stroke-width="2"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke="url(#a)"
        fill="none"
      >
        <animateTransform
          values="1 -5; -2 10"
          type="translate"
          repeatCount="indefinite"
          dur="0.7s"
          attributeName="transform"
        ></animateTransform>
      </path>
      <path
        d="M31.39 43.03l-.78 4.94"
        stroke-width="2"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke="url(#d)"
        fill="none"
      >
        <animateTransform
          values="1 -5; -2 10"
          type="translate"
          repeatCount="indefinite"
          dur="0.7s"
          begin="-0.4s"
          attributeName="transform"
        ></animateTransform>
      </path>
      <path
        d="M38.39 43.03l-.78 4.94"
        stroke-width="2"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke="url(#e)"
        fill="none"
      >
        <animateTransform
          values="1 -5; -2 10"
          type="translate"
          repeatCount="indefinite"
          dur="0.7s"
          begin="-0.2s"
          attributeName="translate-x-8"
        ></animateTransform>
      </path>
    </svg>
    <h4
      class="font-sans duration-300 absolute left-1/2 -translate-x-1/2 text-5xl text-center group-hover:translate-x-8 group-hover:-translate-y-16 group-hover:scale-150"
    >
      6°
    </h4>
  </div>
  <div class="absolute duration-300 -left-32 mt-2 group-hover:left-10">
    <p class="text-sm">Heavy Raining</p>
    <p class="text-sm">50% humidity</p>
  </div>
</div>


    

================================================
FILE: Cards/mrhyddenn_massive-earwig-94.html
================================================
<div class="container">
    <div class="card_box">
        <span></span>
    </div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: card, sub, plan */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card_box {
  width: 200px;
  height: 250px;
  border-radius: 20px;
  background: linear-gradient(170deg, rgba(58, 56, 56, 0.623) 0%, rgb(31, 31, 31) 100%);
  position: relative;
  box-shadow: 0 25px 50px rgba(0,0,0,0.55);
  cursor: pointer;
  transition: all .3s;
}

.card_box:hover {
  transform: scale(0.9);
}

.card_box span {
  position: absolute;
  overflow: hidden;
  width: 150px;
  height: 150px;
  top: -10px;
  left: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card_box span::before {
  content: 'Premium';
  position: absolute;
  width: 150%;
  height: 40px;
  background-image: linear-gradient(45deg, #ff6547 0%, #ffb144  51%, #ff7053  100%);
  transform: rotate(-45deg) translateY(-20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 5px 10px rgba(0,0,0,0.23);
}

.card_box span::after {
  content: '';
  position: absolute;
  width: 10px;
  bottom: 0;
  left: 0;
  height: 10px;
  z-index: -1;
  box-shadow: 140px -140px #cc3f47;
  background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%);
}
</style>


================================================
FILE: Cards/mrhyddenn_tame-mouse-76.html
================================================
<div class="container">
    <div class="container_terminal"></div>
    <div class="terminal_toolbar">
        <div class="butt">
            <button class="btn btn-color"></button>
            <button class="btn"></button>
            <button class="btn"></button>
        </div>
        <p class="user">johndoe@admin: ~</p>
    </div>
    <div class="terminal_body">
        <div class="terminal_promt">
            <span class="terminal_user">johndoe@admin:</span>
            <span class="terminal_location">~</span>
            <span class="terminal_bling">$</span>
            <span class="terminal_cursor"></span>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: card, shell */
.container {
  width: 230px;
  height: 194px;
}

.terminal_toolbar {
  display: flex;
  height: 30px;
  align-items: center;
  padding: 0 8px;
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: linear-gradient(#504b45 0%, #3c3b37 100%);
}

.butt {
  display: flex;
  align-items: center;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin-right: 5px;
  font-size: 8px;
  height: 12px;
  width: 12px;
  box-sizing: border-box;
  border: none;
  border-radius: 100%;
  background: linear-gradient(#7d7871 0%, #595953 100%);
  text-shadow: 0px 1px 0px rgba(255,255,255,0.2);
  box-shadow: 0px 0px 1px 0px #41403A, 0px 1px 1px 0px #474642;
}

.btn-color {
  background: #ee411a;
}

.btn:hover {
  cursor: pointer;
}

.btn:focus {
  outline: none;
}

.butt--exit {
  background: linear-gradient(#f37458 0%, #de4c12 100%);
}

.user {
  color: #d5d0ce;
  margin-left: 6px;
  font-size: 14px;
  line-height: 15px;
}

.terminal_body {
  background: rgba(56, 4, 40, 0.9);
  height: calc(100% - 30px);
  padding-top: 2px;
  margin-top: -1px;
  font-size: 12px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.terminal_promt {
  display: flex;
}

.terminal_promt span {
  margin-left: 4px;
}

.terminal_user {
  color: #7eda28;
}

.terminal_location {
  color: #4878c0;
}

.terminal_bling {
  color: #dddddd;
}

.terminal_cursor {
  display: block;
  height: 14px;
  width: 5px;
  margin-left: 10px;
  animation: curbl 1200ms linear infinite;
}

@keyframes curbl {
  
  0% {
    background: #ffffff;
  }

  49% {
    background: #ffffff;
  }

  60% {
    background: transparent;
  }

  99% {
    background: transparent;
  }

  100% {
    background: #ffffff;
  }
} 
</style>


================================================
FILE: Cards/mrhyddenn_warm-wasp-21.html
================================================
<div class="card">
    <div class="card_load"></div>
    <div class="card_load_extreme_title"></div>
    <div class="card_load_extreme_descripion"></div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: card, placeholder */
.card {
  width: 190px;
  height: 90px;
  background: #ffff;
  box-shadow: 0 1px 25px rgba(0,0,0,0.2);
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 12px 10px;
}

.card_load {
  width: 70px;
  height: 70px;
  position: relative;
  float: left;
  background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 
  40%, #e5e5e5 48%);
  border-radius: 50%;
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: load89234 2s infinite;
}

.card_load_extreme_title {
  width: 90px;
  height: 10px;
  position: relative;
  float: right;
  border-radius: 5px;
  background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 
  40%, #e5e5e5 48%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: load89234 2s infinite;
}

.card_load_extreme_descripion {
  width: 90px;
  height: 47px;
  position: relative;
  float: right;
  border-radius: 5px;
  background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 
  40%, #e5e5e5 48%);
  margin-top: 10px;
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: load89234 2s infinite;
}

@keyframes load89234 {
  100% {
    background-position: -100% 0;
  }
}
</style>


================================================
FILE: Cards/mrpumps31232_wonderful-mouse-36.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by mrpumps31232 - Tags: card */
.card {
  background-color: rgb(86, 30, 124);
  border-radius: 8px;
  transform: scale(1.3);
  border: 13px solid rgb(86, 30, 124);
  height: 15rem;
  box-shadow: 0px 0px 15px rgb(221, 108, 255);
}

div.heading {
  font-size: large;
  font-weight: bold;
}

button {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: -9.5rem;
  right: 0;
  height: 30px;
  width: 120px;
  border: none;
  border-radius: 8px;
  background-color: purple;
  color: white;
  transition: 0.4s all;
  font-weight: bold;
  box-shadow: 0px 0px 12px rgb(221, 108, 255);
  background-image: linear-gradient(to bottom right, #ff69b4, #9b4fe5);
  background-size: 200% 200%;
  background-position: left bottom;
}

svg {
  margin-top: .3rem;
  background-color: ;
}

button:hover {
  cursor: pointer;
  transform: scale(1.2);
  background-position: right top;
}

div.item--inspire:hover {
  transition: 0.9s ease;
  transform: scale(1.1);
  background-color: rgb(221, 108, 255);
  border-radius: 10px;
  opacity: .8;
  cursor: pointer;
}

div.item--post:hover {
  transition: 0.9s ease;
  transform: scale(1.1);
  opacity: .8;
  cursor: pointer;
}

div.item--create:hover {
  transition: 0.9s ease;
  transform: scale(1.1);
  opacity: .8;
  cursor: pointer;
}

div.item {
  background-color: rgb(221, 108, 255);
  border-radius: 9px;
  margin-top: 0.4rem;
  transition: 0.4s all;
}

</style>


================================================
FILE: Cards/mvykool_honest-shrimp-87.html
================================================
<!-- From Uiverse.io by mvykool  - Tags: gradient, card, card hover -->
<div
  class="transform transition duration-300 hover:scale-110 rounded-lg shadow-lg h-52 w-56 hover:shadow-xl bg-white"
>
  <div
    class="bg-gradient-to-br from-rose-100 via-purple-200 to-purple-200 m-2 h-3/6 rounded-lg"
  ></div>

  <div class="px-5 pt-2 flex flex-col">
    <h2 class="font-semibold">Title</h2>

    <button
      class="bg-blue-500 cursor-pointer text-white px-2 py-1 mt-2 rounded-md transition duration-150 hover:bg-blue-700"
      type="button"
    >
      Button
    </button>
  </div>
</div>


    

================================================
FILE: Cards/mykill1_rude-dodo-56.html
================================================
<div class="card">
    <div class="content"></div>
</div>
<style>
/* From Uiverse.io by mykill1 - Tags: card */
.card {
  width: 190px;
  height: 254px;
  border-radius: 10px;
  background: #ae3737;
  overflow: hidden;
  box-shadow: inset 27px 27px 54px #7a2727, inset -27px -27px 54px #e24848;
}

.content {
  width: 160px;
  height: 220px;
  position: relative;
  margin-top: 16px;
  margin-left: 15px;
  border: none;
  border-radius: 10px;
  background: #ae3737;
  background: linear-gradient(45deg, #9d3232, #ba3b3b);
  box-shadow: 27px -27px 54px #7a2727,
             -27px 27px 54px #e24848;
}

content :hover {
  border: 1px solid #7a2727;
}

.card :hover {
  border: 1px solid #7a2727;
}

</style>


================================================
FILE: Cards/myshy13_tender-donkey-10.html
================================================
<div class="card"></div>

<style>
/* From Uiverse.io by myshy13  - Tags: card */
.card {
  font-family: monospace;
  scale: 1.2;
  height: 15em;
  width: 20em;
  border-radius: 0.8em;
  background: #222;
  overflow: hidden;
  color: #ccc;

  transition: 0.3s ease;
  &:before {
    content: "User - zsh";
    text-align: center;
    padding: 0.2em;
    display: block;
    background-color: #4e4e4e;
  }
  &:after {
    content: "User@device ~ $ ";
    margin: 0.2em;
  }
  &:hover {
    scale: 1.3;
  }
}

</style>
    

================================================
FILE: Cards/nanda248_average-goat-70.html
================================================
<div class="card">
  <div class="circle small top-left">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="circle">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="circle small bottom-right">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<style>
/* From Uiverse.io by nanda248 - Tags: card, playing card, uno */
.card {
  width: 11em;
  height: 14.8em;
  position: relative;
  background: #28282B;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 6px solid #F5F5DC;
  border-radius: 5px;
  transition: 0.5s;
  overflow: hidden;
}

.card .circle {
  width: 8em;
  height: 14em;
  border-radius: 50%;
  transform: skew(-25deg);
  border: 4px solid white;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.card .circle.small {
  position: absolute;
  width: 1.5em;
  height: 3em;
  border: 1px solid white;
}

.card .circle.top-left {
  top: 0.3em;
  left: 0.6em;
}

.card .circle.bottom-right {
  bottom: 0.3em;
  right: 0.6em;
}

.card:hover {
  cursor: pointer;
  transform: translate(0, -5px);
}

.card:hover:after, .card:hover:before {
  visibility: hidden;
}

.card .circle span:nth-child(1) {
  background-color: #FF2400;
  border-top-left-radius: 100%;
}

.card .circle span:nth-child(2) {
  background-color: #1F51FF;
  border-top-right-radius: 100%;
}

.card .circle span:nth-child(3) {
  background-color: #FFEA00;
  border-bottom-left-radius: 100%;
}

.card .circle span:nth-child(4) {
  background-color: #50C878;
  border-bottom-right-radius: 100%;
}

/* glider animation */
.card:before {
  content: '';
  position: absolute;
  height: 130%;
  width: 1em;
  background-color: aliceblue;
  opacity: 0.14;
  animation: glider 1.8s infinite linear;
  animation-delay: 0.05s;
}

.card:after {
  content: '';
  position: absolute;
  height: 120%;
  width: 0.8em;
  background-color: aliceblue;
  opacity: 0.1;
  animation: glider 1.8s infinite linear;
}

@keyframes glider {
  0% {
    transform: rotate(45deg) translate(-12em, 1.2em);
  }

  100% {
    transform: rotate(45deg) translate(18em, -2.8em);
  }
}
</style>


================================================
FILE: Cards/nanda248_neat-tiger-26.html
================================================
<div class="main">
  <div class="card">
    <div class="i1">
      <span class="corner-text">A</span>
      <svg viewBox="0 0 122.88 107.39">
        <defs></defs>
        <title>red-heart</title>
        <path
          d="M60.83,17.18c8-8.35,13.62-15.57,26-17C110-2.46,131.27,21.26,119.57,44.61c-3.33,6.65-10.11,14.56-17.61,22.32-8.23,8.52-17.34,16.87-23.72,23.2l-17.4,17.26L46.46,93.55C29.16,76.89,1,55.92,0,29.94-.63,11.74,13.73.08,30.25.29c14.76.2,21,7.54,30.58,16.89Z"
          class="heart-icon"
        ></path>
      </svg>
    </div>

    <div class="center-shape">
      <svg viewBox="0 0 122.88 107.39">
        <defs></defs>
        <title>red-heart</title>
        <path
          d="M60.83,17.18c8-8.35,13.62-15.57,26-17C110-2.46,131.27,21.26,119.57,44.61c-3.33,6.65-10.11,14.56-17.61,22.32-8.23,8.52-17.34,16.87-23.72,23.2l-17.4,17.26L46.46,93.55C29.16,76.89,1,55.92,0,29.94-.63,11.74,13.73.08,30.25.29c14.76.2,21,7.54,30.58,16.89Z"
          class="heart-icon"
        ></path>
      </svg>
    </div>

    <div class="i2">
      <span class="corner-text">A</span>
      <svg viewBox="0 0 122.88 107.39">
        <defs></defs>
        <title>red-heart</title>
        <path
          d="M60.83,17.18c8-8.35,13.62-15.57,26-17C110-2.46,131.27,21.26,119.57,44.61c-3.33,6.65-10.11,14.56-17.61,22.32-8.23,8.52-17.34,16.87-23.72,23.2l-17.4,17.26L46.46,93.55C29.16,76.89,1,55.92,0,29.94-.63,11.74,13.73.08,30.25.29c14.76.2,21,7.54,30.58,16.89Z"
          class="heart-icon"
        ></path>
      </svg>
    </div>
  </div>

  <div class="bg-card-1"></div>

  <div class="bg-card-2"></div>
</div>

<style>
/* From Uiverse.io by nanda248  - Tags: card, playing card, stack of cards, gold card */
.main {
  position: relative;
}

/* card styles */
.card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "i1 . ."
    ". center ."
    ". . i2";
  width: 12em;
  height: 18em;
  border-radius: 4px;
  background: #ffd700;
  transition: 0.5s;
  z-index: 20;
}

.bg-card-1 {
  background-color: #daa520;
  position: absolute;
  top: 0;
  width: 12em;
  height: 18em;
  border-radius: 4px;
  transition: 0.5s;
  z-index: 8;
}

.bg-card-2 {
  background-color: #b8860b;
  position: absolute;
  top: 0;
  width: 12em;
  height: 18em;
  border-radius: 4px;
  transition: 0.5s;
  z-index: 4;
}

/* glider animation */
.card:before {
  content: "";
  position: absolute;
  height: 130%;
  width: 0.6em;
  background-color: aliceblue;
  opacity: 0.3;
  animation: glider 1.8s infinite linear;
  animation-delay: 0.05s;
}

.card:after {
  content: "";
  position: absolute;
  height: 130%;
  width: 0.4em;
  background-color: aliceblue;
  opacity: 0.2;
  animation: glider 1.8s infinite linear;
}

@keyframes glider {
  0% {
    transform: rotate(45deg) translate(-140px, -140px);
  }

  100% {
    transform: rotate(45deg) translate(220px, -40px);
  }
}

/* icon styles */
.i1,
.i2 svg {
  width: 1.5em;
  fill: #ff3131;
}

.i1 {
  grid-area: i1;
  justify-self: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 0.2em 0.4em;
}

.i2 {
  grid-area: i2;
  justify-self: flex-end;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 0.2em 0.4em;
  transform: rotate(180deg);
}

.corner-text {
  color: #ff3131;
  font-weight: bold;
  font-size: 1.2em;
}

.center-shape {
  grid-area: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-shape svg {
  width: 4em;
  fill: #ff3131;
}

/* hover effects */
.card:hover {
  box-shadow: #ffd700 0px 7px 29px 0px;
  cursor: pointer;
}

.card:hover:after,
.card:hover:before {
  visibility: hidden;
}

.card:hover svg,
.card:hover span {
  animation: color-change 1s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes color-change {
  from {
    fill: #ff3131;
    color: #ff3131;
  }

  to {
    fill: #e34234;
    color: #e34234;
  }
}

/* hover fan out effects */
.card:active {
  transform: rotate(10deg);
  transform-origin: bottom left;
  box-shadow: none;
}

.card:active + .bg-card-1 {
  transform: rotate(5deg);
  transform-origin: bottom left;
}

</style>
    

================================================
FILE: Cards/omar-alghaish_polite-cat-34.html
================================================
<div class="card">
  <div class="card-info"><p>Hover</p></div>
</div>
<style>
/* From Uiverse.io by omar-alghaish - Tags: card */
.card {
  width: 200px;
  height: 270px;
  background: linear-gradient(45deg,#00cc0a 25%, #00cc0a 25%, #444 25%, #444 50%, #00cc0a 50%, #00cc0a 75%, #444 75%, #444 100%);
  animation: animate_6810 15s linear infinite;
  transition: .3s;
  background-size: 60px 60px;
  position: relative;
  overflow: visible;
  border-radius: 20px;
}

.card-info {
  position: absolute;
  width: 96%;
  height: 96%;
  left: 2%;
  top: 2%;
  background-color: rgb(24, 22, 22);
  border-radius: 20px;
  transition: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-info:hover {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.822);
  backdrop-filter: blur(12px);
  left: 20px;
  top: 20px;
}

.card-info p {
  color: white;
  font-weight: bold;
  font-size: 30px;
}

@keyframes animate_6810 {
  0% {
    background-position: 0px;
  }

  100% {
    background-position: 1000px;
  }
}
</style>


================================================
FILE: Cards/ozgeozkaraa01_happy-sloth-10.html
================================================
<!-- From Uiverse.io by ozgeozkaraa01 - Tags: card, cool card, card design -->
<div class="w-72 h-80 mx-auto bg-gray-100 rounded-xl shadow-2xl">
  <div class="flex items-center p-3">
    <div class="px-1">
      <span class="w-4 h-4 rounded-full inline-block bg-red-500 cursor-pointer"></span>
    </div>
    <div class="px-1">
      <span class="w-4 h-4 rounded-full inline-block bg-yellow-400 cursor-pointer"></span>
    </div>
    <div class="px-1">
      <span class="w-4 h-4 rounded-full inline-block bg-green-500 cursor-pointer"></span>
    </div>
  </div>
</div>




================================================
FILE: Cards/pamtbi_good-dodo-80.html
================================================
<div class="card">
         <div class="card__side card__side_front">
            <div class="flex__1">
               <p class="card__side__name-bank">monobank</p>
               <div class="card__side__chip"></div>
               <p class="card__side__name-person">PAVLO MATVIIENKO</p>
            </div>
         </div>
         <div class="card__side card__side_back">
            <div class="card__side__black"></div>
            <p class="card__side__number">XXXX XXXX XXXX XXXX</p>
            <div class="flex__2">
               <p class="card__side__other-numbers card__side__other-numbers_1">XX/XX</p>
               <p class="card__side__other-numbers card__side__other-numbers_2">XXX</p>
               <div class="card__side__photo">your-photo</div>
               <div class="card__side__debit">debit</div>
            </div>
            <p class="card__side__other-info">
               MONOBANK.UA | 0 800 205 205 | 
               АТ "УНІВЕРСАЛ БАНК". ЛІЦЕНЗІЯ 
               НБУ №92 ВІД 20.01.1994 | 
               PCE PC100650 WORLD DEBIT
            </p>
         </div>
      </div>
<style>
/* From Uiverse.io by pamtbi - Tags: card, card hover */
.flex__1 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.flex__2 {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: row;
}

.card {
  height: 50mm;
  width: 84mm;
  position: relative;
  perspective: 800px;
}

.card__side {
  width: 100%;
  height: 100%;
  border-radius: 3.18mm;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  transition: transform 0.7s ease-out;
  cursor: pointer;
  padding: 10px;
}

.card__side__photo {
  width: 1.4cm;
  height: 1.4cm;
  position: absolute;
  left: 12px;
  bottom: 15px;
  background: grey;
  border-radius: 8%;
}

.card__side_front {
  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, #242424 100%);
  transform: rotateY(0deg);
}

.card__side_back {
  background: linear-gradient(-90deg, rgb(0, 0, 0) 0%, #242424 100%);
  transform: rotateY(-180deg);
  color: #eeeeee;
}

.card__side__name-bank {
  font-family: Inter, sans-serif;
  font-weight: 500;
  position: relative;
  font-size: 22px;
  margin-left: 8px;
  color: white;
}

.card__side__name-bank::after {
  content: "Universal Bank";
  position: absolute;
  font-size: 6px;
  top: 105%;
  left: 21%;
  color: #635c77;
}

.card__side__name-bank::before {
  content: "₴";
  position: absolute;
  top: 0;
  right: 0;
  color: #635c77;
}

.card__side__chip {
  width: 1.3cm;
  height: 1cm;
  margin-left: 22px;
  margin-top: -35px;
  background: rgb(226, 175, 35);
  border-radius: 8px;
}

.card__side__chip:after {
  content: "";
  display: block;
  position: absolute;
  height: 24px;
  width: 24px;
  top: 80px;
  right: 15px;
  transform: scale(1.3);
}

.card__side__name-person {
  text-transform: uppercase;
  font-family: Roboto Mono, sans-serif;
  font-size: 14px;
  margin-bottom: 10px;
  margin-left: 20px;
  position: relative;
  display: block;
  color: white;
}

.card__side__name-person::before {
  content: "";
  display: block;
  position: absolute;
  width: 45px;
  aspect-ratio: 1 / 1;
  background: red;
  bottom: -10px;
  right: 0px;
  border-radius: 50%;
}

.card__side__name-person::after {
  content: "";
  display: block;
  position: absolute;
  width: 45px;
  aspect-ratio: 1 / 1;
  background: orange;
  bottom: -10px;
  right: 23px;
  border-radius: 50%;
}

.card__side__black {
  background: black;
  width: 100%;
  height: 50px;
  border-radius: 3.18mm 3.18mm 0 0;
  position: absolute;
  top: 0;
  right: 0;
}

.card__side__number {
  font-size: 18px;
  font-family: Roboto Mono, sans-serif;
  color: #eeeeee;
  margin: 45px 0px 15px 10px;
}

.card__side__other-numbers {
  font-family: Roboto Mono, sans-serif;
  color: #eeeeee;
  display: block;
  margin-left: 10px;
  font-size: 12px;
  backface-visibility: hidden;
  position: relative;
}

.card__side__other-numbers::after {
  color: #635c77;
  position: absolute;
  font-size: 8px;
  left: 0;
  bottom: 60px;
}

.card__side__other-numbers_1::after {
  content: "СТРОК";
}

.card__side__other-numbers_2::after {
  content: "КОД";
}

.card__side__other-info {
  color: #635c77;
  font-size: 4px;
  text-align: center;
  font-family: Roboto Mono, sans-serif;
  position: absolute;
  bottom: 10px;
  left: 38px;
  backface-visibility: hidden;
}

.card__side__debit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.8cm;
  height: 1cm;
  border-radius: 1cm;
  background: #c0c0c0;
  position: absolute;
  right: 12px;
  bottom: 25px;
  font-family: Inter;
  color: #666666;
}

.card__side__debit::after {
  content: "";
  display: block;
  position: absolute;
  background: rgba(166, 163, 163, 0.7);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  right: 0;
}

.card:hover .card__side_front {
  transform: rotateY(180deg);
}

.card:hover .card__side_back {
  transform: rotateY(0deg);
}
</style>


================================================
FILE: Cards/pathikcomp_brave-pig-89.html
================================================
<div class="card">
  <div class="social-icons">
    <p>@Youtube</p>
    <a>Follow</a>
    <svg
      version="1.1"
      id="Layer_1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 461.001 461.001"
      xml:space="preserve"
      fill="#000000"
    >
      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
      <g
        id="SVGRepo_tracerCarrier"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <g>
          <path
            style="fill:#F61C0D;"
            d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728 c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137 C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607 c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"
          ></path>
        </g>
      </g>
    </svg>
  </div>
  <div class="social-icons">
    <p>@Tik Tok</p>
    <a>Follow</a>
    <svg
      fill="#000000"
      viewBox="0 0 512 512"
      id="icons"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
      <g
        id="SVGRepo_tracerCarrier"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <path
          d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z"
        ></path>
      </g>
    </svg>
  </div>
  <div class="social-icons">
    <p>@Discord</p>
    <a>Follow</a>
    <svg
      viewBox="0 -28.5 256 256"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      preserveAspectRatio="xMidYMid"
      fill="#000000"
    >
      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
      <g
        id="SVGRepo_tracerCarrier"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <g>
          <path
            d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
            fill="#5865F2"
            fill-rule="nonzero"
          ></path>
        </g>
      </g>
    </svg>
  </div>
  <div class="social-icons">
    <p>@Codepen</p>
    <a>Follow</a>
    <svg
      fill="#000000"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      class="icon"
    >
      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
      <g
        id="SVGRepo_tracerCarrier"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <path
          d="M488.1 414.7V303.4L300.9 428l83.6 55.8zm254.1 137.7v-79.8l-59.8 39.9zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm278 533c0 1.1-.1 2.1-.2 3.1 0 .4-.1.7-.2 1a14.16 14.16 0 0 1-.8 3.2c-.2.6-.4 1.2-.6 1.7-.2.4-.4.8-.5 1.2-.3.5-.5 1.1-.8 1.6-.2.4-.4.7-.7 1.1-.3.5-.7 1-1 1.5-.3.4-.5.7-.8 1-.4.4-.8.9-1.2 1.3-.3.3-.6.6-1 .9-.4.4-.9.8-1.4 1.1-.4.3-.7.6-1.1.8-.1.1-.3.2-.4.3L525.2 786c-4 2.7-8.6 4-13.2 4-4.7 0-9.3-1.4-13.3-4L244.6 616.9c-.1-.1-.3-.2-.4-.3l-1.1-.8c-.5-.4-.9-.7-1.3-1.1-.3-.3-.6-.6-1-.9-.4-.4-.8-.8-1.2-1.3a7 7 0 0 1-.8-1c-.4-.5-.7-1-1-1.5-.2-.4-.5-.7-.7-1.1-.3-.5-.6-1.1-.8-1.6-.2-.4-.4-.8-.5-1.2-.2-.6-.4-1.2-.6-1.7-.1-.4-.3-.8-.4-1.2-.2-.7-.3-1.3-.4-2-.1-.3-.1-.7-.2-1-.1-1-.2-2.1-.2-3.1V427.9c0-1 .1-2.1.2-3.1.1-.3.1-.7.2-1a14.16 14.16 0 0 1 .8-3.2c.2-.6.4-1.2.6-1.7.2-.4.4-.8.5-1.2.2-.5.5-1.1.8-1.6.2-.4.4-.7.7-1.1.6-.9 1.2-1.7 1.8-2.5.4-.4.8-.9 1.2-1.3.3-.3.6-.6 1-.9.4-.4.9-.8 1.3-1.1.4-.3.7-.6 1.1-.8.1-.1.3-.2.4-.3L498.7 239c8-5.3 18.5-5.3 26.5 0l254.1 169.1c.1.1.3.2.4.3l1.1.8 1.4 1.1c.3.3.6.6 1 .9.4.4.8.8 1.2 1.3.7.8 1.3 1.6 1.8 2.5.2.4.5.7.7 1.1.3.5.6 1 .8 1.6.2.4.4.8.5 1.2.2.6.4 1.2.6 1.7.1.4.3.8.4 1.2.2.7.3 1.3.4 2 .1.3.1.7.2 1 .1 1 .2 2.1.2 3.1V597zm-254.1 13.3v111.3L723.1 597l-83.6-55.8zM281.8 472.6v79.8l59.8-39.9zM512 456.1l-84.5 56.4 84.5 56.4 84.5-56.4zM723.1 428L535.9 303.4v111.3l103.6 69.1zM384.5 541.2L300.9 597l187.2 124.6V610.3l-103.6-69.1z"
        ></path>
      </g>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by pathikcomp  - Tags: tooltip, icon, card, hover, Discord, modern, social media, cool card, modern, icon, card, tooltip, hover */
.card {
  display: flex;
  width: 250px;
  height: 50px;
  /* gap: 1.2rem; */
  background-color: whitesmoke;
  border-radius: 115px;
  padding-inline: 15px;
  position: relative;
  justify-content: space-around;
  /* align-items: center; */
}

.social-icons {
  cursor: pointer;
  display: flex;
  transition: all 0.5s;
  align-items: center;
  justify-content: center;
  position: relative;
  color: white;
  font-weight: bold;
  font-size: small;
}

.social-icons > p {
  --var: -0%;
  position: absolute;
  top: var(--var);
  transition: all 0.7s;
  background-color: dodgerblue;
  border-radius: 7px;
  opacity: 0;
  padding-inline: 7px;
  padding-block: 3px;
  width: max-content;
}
.social-icons > p::after {
  content: "";
  position: absolute;
  border-top: 10px solid dodgerblue;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  top: 100%;
  left: 50%;
  transform: translate(-50%);
}
.social-icons > a {
  --var: -0%;
  position: absolute;
  bottom: var(--var);
  width: max-content;
  transition: all 0.7s;
  opacity: 0;
  padding-inline: 7px;
  padding-block: 3px;
  background-color: crimson;
  border-radius: 7px;
}
.social-icons > a::after {
  content: "";
  position: absolute;
  border-bottom: 10px solid crimson;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%);
}

.social-icons:hover > a,
.social-icons:hover > p {
  --var: -65%;
  opacity: 1;
}

.social-icons:hover {
  z-index: 15;
}

.card:hover > .social-icons:not(:hover) {
  filter: blur(3px);
  transform: scale(0.8);
}

.card svg {
  height: 30px;
}

</style>
    

================================================
FILE: Cards/pedertanberg_dry-goose-81.html
================================================

<div class="card">Good morning</div>
<style>
/* From Uiverse.io by pedertanberg - Tags: card */
.card {
 width: 150px;
 height: 200px;
 background: #ffffff;
 transform: rotate(20deg) skew(-10deg, -5deg);
 transition: box_shadow .25s ease-in;
 display: flex;
 justify-content: center;
 text-align: center;
 font-size: 20px;
 line-height: 200px;
}

.card:hover {
 box-shadow: rgba(255,255,255,0.5) 5px 3px,
  rgba(255,255,255,0.4) 10px 6px,
  rgba(255,255,255,0.3) 15px 9px;
}
</style>


================================================
FILE: Cards/reshades_evil-robin-7.html
================================================
<div class="card">
  <div class="top">
    <p class="title">
      TITLE HERE
    </p>
  </div>
  <p class="desc">
    This is the description of this card.<br>You can enter anything here.
  </p>
</div>
<style>
/* From Uiverse.io by reshades - Tags: gradient, card, clean */
.card {
  width: 290px;
  height: 404px;
  background: linear-gradient(10deg, rgba(38,146,255,1) 0%, rgba(0,63,255,1) 100%);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10.5px);
  -webkit-backdrop-filter: blur(10.5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.top {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10.5px);
  -webkit-backdrop-filter: blur(10.5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 290px;
  height: 300px;
}

.top .title {
  color: #fff;
  font-weight: bolder;
  font-size: x-large;
  margin-left: 10px;
  margin-top: 90%
}

.card .desc {
  color: #fff;
  opacity: 75%;
  font-size: small;
  font-weight: lighter;
  margin-left: 10px;
  margin-top: 2%
}
</style>


================================================
FILE: Cards/reshades_rude-dingo-96.html
================================================
<div class="card">
  <div class="top">
    <p class="title">script.py</p>
    <span class="buttons">
    <button class="minimize">
			<svg viewBox="0 0 10.2 1" y="0px" x="0px"><rect height="1" width="10.2" y="50%" x="0"></rect></svg>
		</button>
    <button class="maximize">
			<svg viewBox="0 0 10 10"><path d="M0,0v10h10V0H0z M9,9H1V1h8V9z"></path></svg>
		</button>
    <button class="close">
			<svg viewBox="0 0 10 10"><polygon points="10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1"></polygon></svg>
		</button>
    </span>

  </div>
  <div class="topfix">
  </div>
<hr>
  <div class="content">
    <p>
      <code>
        <i class="c1">import</i> os, sys<br>
        <b class="c2">os</b>.system<b class="c3">(</b><b class="c4">"title test script"</b><b class="c3">)</b><br>
        <b class="c2">print</b><b class="c3">(</b><b class="c4">"Hello UIVERSE.io!"</b><b class="c3">)</b><br>
        <b class="c2">sys</b>.exit<b class="c3">(</b><b class="c3">)</b><br>
        <i class="comment">#this is a comment.</i>
      </code>
    </p>
  </div>
</div>
<style>
/* From Uiverse.io by reshades - Tags: card, editor, code, vscode */
.card {
  width: 250px;
  height: 254px;
  background: #121212;
  border-radius: 10px;
  border: 1px #212121 solid;
}

.card hr {
  color: #313131;
  margin-top: -3.5px
}

.content {
  color: #8e8e8e;
  margin-left: 0.3em;
}

.c1 {
  color: rgb(55, 91, 158)
}

.c2 {
  color: rgb(55, 158, 150)
}

.c3 {
  color: rgb(158, 151, 55)
}

.c4 {
  color: rgb(88, 158, 55)
}

.comment {
  opacity: 50%
}

.title {
  color: #e8e8e8;
  font-size: small;
  float: left;
  margin-left: 0.6em;
  margin-top: 0.6em;
}

.top {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 21px;
  font-weight: 450;
  background-color: #121212;
  width: 100%;
  text-align: right;
  border-radius: 10px
}

.topfix {
  background-color: #121212;
  width: 100%;
  height: 1em;
  margin-top: -1em;
}

button {
  width: 40px;
  height: 35px;
  margin-left: -5px;
  border: 0;
  outline: 0;
  background: transparent;
  transition: 0.2s;
}

button svg path, 
button svg rect, 
button svg polygon {
  fill: #ffffff;
}

button svg {
  width: 10px;
  height: 10px;
}

.close:hover {
  background-color: #ffffff10;
}

.maximize:hover {
  background-color: #ffffff10;
}

.minimize:hover {
  background-color: #ffffff10;
}
</style>


================================================
FILE: Cards/revanth-004_brown-pig-37.html
================================================
<div class="center">
  <div class="design">
    <div class="circle-1 center color-border">
      <div class="circle-2 center color-border">
        <div class="circle-3 center color-border">
          <div class="circle-4 center color-border">
            <div class="circle-5"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="mountain-1 shape shadow"></div>
    <div class="mountain-2 shape"></div>
    <div class="mountain-3 shape shadow"></div>
  </div>
</div>

<style>
/* From Uiverse.io by revanth-004  - Tags: sun, app, css, mountains, scenery, art */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.design {
  height: 200px;
  width: 200px;
  border-radius: 40px;
  background: rgb(255, 11, 0);
  background: linear-gradient(
    180deg,
    rgba(255, 11, 0, 1) 13%,
    rgba(255, 158, 0, 1) 100%
  );
  position: relative;
  overflow: hidden;
}

.color-border {
  border-radius: 50%;
  background-color: #ffffff20;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
}
.circle-1 {
  height: 220px;
  width: 220px;
  position: absolute;
  right: -50px;
  top: -50px;
}
.circle-2 {
  height: 180px;
  width: 180px;
}
.circle-3 {
  height: 140px;
  width: 140px;
}
.circle-4 {
  height: 105px;
  width: 105px;
}
.circle-5 {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background-color: #ffffff;
}

.shape {
  height: 200px;
  width: 200px;
  background-color: #484848;
  transform: rotate(45deg);
  position: absolute;
}
.shadow {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
}
.mountain-1 {
  z-index: 1;
  bottom: -100px;
  left: -100px;
}
.mountain-2 {
  bottom: -110px;
  left: -30px;
}
.mountain-3 {
  z-index: 2;
  bottom: -150px;
  left: 90px;
}

</style>
    

================================================
FILE: Cards/revanth-004_gentle-grasshopper-79.html
================================================
<div class="popup-container">
  <div class="popup success-popup">
    <div class="popup-icon success-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        class="success-svg"
      >
        <path
          fill-rule="evenodd"
          d="m12 1c-6.075 0-11 4.925-11 11s4.925 11 11 11 11-4.925 11-11-4.925-11-11-11zm4.768 9.14c.0878-.1004.1546-.21726.1966-.34383.0419-.12657.0581-.26026.0477-.39319-.0105-.13293-.0475-.26242-.1087-.38085-.0613-.11844-.1456-.22342-.2481-.30879-.1024-.08536-.2209-.14938-.3484-.18828s-.2616-.0519-.3942-.03823c-.1327.01366-.2612.05372-.3782.1178-.1169.06409-.2198.15091-.3027.25537l-4.3 5.159-2.225-2.226c-.1886-.1822-.4412-.283-.7034-.2807s-.51301.1075-.69842.2929-.29058.4362-.29285.6984c-.00228.2622.09851.5148.28067.7034l3 3c.0983.0982.2159.1748.3454.2251.1295.0502.2681.0729.4069.0665.1387-.0063.2747-.0414.3991-.1032.1244-.0617.2347-.1487.3236-.2554z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </div>
    <div class="success-message">lorem ipsum dolor sit amet</div>
    <div class="popup-icon close-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        aria-hidden="true"
        class="close-svg"
      >
        <path
          d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
          class="close-path"
        ></path>
      </svg>
    </div>
  </div>
  <div class="popup alert-popup">
    <div class="popup-icon alert-icon">
      <svg
        class="alert-svg"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </div>
    <div class="alert-message">lorem ipsum dolor sit amet</div>
    <div class="popup-icon close-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        class="close-svg"
      >
        <path
          d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
          class="close-path"
        ></path>
      </svg>
    </div>
  </div>
  <div class="popup error-popup">
    <div class="popup-icon error-icon">
      <svg
        class="error-svg"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </div>
    <div class="error-message">lorem ipsum dolor sit amet</div>
    <div class="popup-icon close-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        class="close-svg"
      >
        <path
          d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
          class="close-path"
        ></path>
      </svg>
    </div>
  </div>
  <div class="popup info-popup">
    <div class="popup-icon info-icon">
      <svg
        aria-hidden="true"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
        class="info-svg"
      >
        <path
          clip-rule="evenodd"
          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
          fill-rule="evenodd"
        ></path>
      </svg>
    </div>
    <div class="info-message">lorem ipsum dolor sit amet</div>
    <div class="popup-icon close-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        class="close-svg"
      >
        <path
          d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"
          class="close-path"
        ></path>
      </svg>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by revanth-004  - Tags: alert, minimalist, success, card, message, html, css, card template */
/* COMMON STYLES*/
.popup {
  margin: 10px;
  box-shadow: 4px 4px 10px -10px rgba(0, 0, 0, 1);
  width: 300px;
  justify-content: space-around;
  align-items: center;
  display: flex;
  border-radius: 4px;
  padding: 5px 0;
  font-weight: 300;
}
.popup svg {
  width: 1.25rem;
  height: 1.25rem;
}
.popup-icon svg {
  margin: 5px;
  display: flex;
  align-items: center;
}
.close-icon {
  margin-left: auto;
}
.close-svg {
  cursor: pointer;
}
.close-path {
  fill: grey;
}

/*SEPERATE STYLES*/

/* SUCCESS */
.success-popup {
  background-color: #edfbd8;
  border: solid 1px #84d65a;
}
.success-icon path {
  fill: #84d65a;
}
.success-message {
  color: #2b641e;
}

/* ALERT */
.alert-popup {
  background-color: #fefce8;
  border: solid 1px #facc15;
}
.alert-icon path {
  fill: #facc15;
}
.alert-message {
  color: #ca8a04;
}

/* ERROR */

.error-popup {
  background-color: #fef2f2;
  border: solid 1px #f87171;
}
.error-icon path {
  fill: #f87171;
}
.error-message {
  color: #991b1b;
}

/* INFO */

.info-popup {
  background-color: #eff6ff;
  border: solid 1px #1d4ed8;
}
.info-icon path {
  fill: #1d4ed8;
}
.info-message {
  color: #1d4ed8;
}

</style>
    

================================================
FILE: Cards/rmdhnkhsn_strong-quail-100.html
================================================
<a class="card" href="">
  <div class="containers">
    <div class="icon-circle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 28 29"
        height="29"
        width="28"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="1.5"
          stroke="#23C55E"
          d="M23.7222 9.04435V6.71102C23.7222 5.42235 22.6775 4.37769 21.3888 4.37769L6.61106 4.37769C5.32239 4.37769 4.27773 5.42235 4.27773 6.71102V9.04435C4.27773 10.333 5.32239 11.3777 6.61106 11.3777H21.3888C22.6775 11.3777 23.7222 10.333 23.7222 9.04435Z"
        ></path>
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="1.5"
          stroke="#23C55E"
          d="M23.7222 21.4888V19.1555C23.7222 17.8668 22.6775 16.8221 21.3888 16.8221H15.9444C14.6557 16.8221 13.6111 17.8668 13.6111 19.1555V21.4888C13.6111 22.7775 14.6557 23.8221 15.9444 23.8221H21.3888C22.6775 23.8221 23.7222 22.7775 23.7222 21.4888Z"
        ></path>
      </svg>
    </div>
    <div class="title mb-3">Easy For Everyoness</div>
    <div class="subtitle">
      Every year, we award travelers’ favorite destinations, hotels,
      restaurants, and things to do around the world.
    </div>
    <div class="btnRound btnService">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 19 18"
        height="18"
        width="19"
      >
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="1.5"
          stroke="#23C55E"
          d="M3.51141 2.78405L14.9344 6.95805C15.4154 7.13405 15.4014 7.81905 14.9134 7.97605L9.68541 9.64905L8.01241 14.8771C7.85641 15.3651 7.17041 15.3791 6.99441 14.8981L2.82141 3.47405C2.66441 3.04405 3.08141 2.62705 3.51141 2.78405Z"
        ></path>
      </svg>
    </div>
  </div>
</a>

<style>
/* From Uiverse.io by rmdhnkhsn  - Tags: simple, green, card, css effect, card template, cardhover , card animation, card hover */
.card {
  position: relative;
  display: flex;
  max-width: 500px;
  padding: 42px 32px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 30px;
  border: 2px solid #f8f9fd;
  background: #fff;
  transition: 1s all;
  text-decoration: none;
}
.title {
  color: #072713;
  text-align: center;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 35.196px;
  transition: 0.4s all;
}
.subtitle {
  color: #7e8882;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  transition: 0.4s all;
}
.icon-circle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e5f6eb;
}
.card:hover {
  background: #23c55e;
  transition: 0.4s all;
}
.card:hover .title,
.card:hover .subtitle {
  color: #fff;
  transition: 0.4s all;
}
.btnRound {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  padding: 6px 28px;
  border-radius: 100px;
  border: 1px solid #23c55e;
  background: #fff;
  transition: all 0.2s ease;
}
.btnRound:hover {
  box-shadow: 0px 6px 10px 0px rgba(35, 197, 94, 0.2);
  transition: all 0.2s ease;
}
.btnService {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
}

</style>
    

================================================
FILE: Cards/roroland_heavy-horse-27.html
================================================
<div class="card">
  <div class="card-title">Profile Card</div>
    <div class="card-info">
      <span>
        <svg class="avatar" viewBox="-5 -10 30 34" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.37164 12H3C1.34315 12 0 13.3431 0 15V21C0 22.6569 1.34315 24 3 24H17C18.6569 24 20 22.6569 20 21V15C20 13.3431 18.6569 12 17 12H14.6284C14.5071 12.1347 14.3785 12.2646 14.2426 12.3891C13.1174 13.4205 11.5913 14 10 14C8.4087 14 6.88258 13.4205 5.75736 12.3891C5.62152 12.2646 5.49286 12.1347 5.37164 12Z" fill="#D9D9D9"></path>
        <path d="M16 6.5C16 7.95869 15.3679 9.35764 14.2426 10.3891C13.1174 11.4205 11.5913 12 10 12C8.4087 12 6.88258 11.4205 5.75736 10.3891C4.63214 9.35764 4 7.95869 4 6.5L6.34017 6.5C6.34017 7.38976 6.72576 8.24308 7.41211 8.87223C8.09846 9.50139 9.02935 9.85485 10 9.85485C10.9706 9.85484 11.9015 9.50139 12.5879 8.87223C13.2742 8.24308 13.6598 7.38976 13.6598 6.5H16Z" fill="#D9D9D9"></path>
        <path d="M16 5.5C16 4.04131 15.3679 2.64236 14.2426 1.61091C13.1174 0.579463 11.5913 1.10128e-07 10 0C8.4087 -1.10128e-07 6.88258 0.579462 5.75736 1.61091C4.63214 2.64236 4 4.04131 4 5.5L4.85269 5.5C4.85269 4.24861 5.395 3.04848 6.3603 2.16361C7.32561 1.27875 8.63485 0.781634 10 0.781634C11.3652 0.781634 12.6744 1.27875 13.6397 2.16361C14.605 3.04848 15.1473 4.24861 15.1473 5.5H16Z" fill="#D9D9D9"></path>
        </svg>
      </span>
      <p>Bio description with some interesting data about yourself...</p>
      <label class="btn" for="toggle">
        Social networks
      </label>
      <input id="toggle" type="checkbox">
    </div>
    <ul class="card-links">
      <li>
        <a href="">LinkedIn</a>
      </li>
      <li>
        <a href="">Twitter</a>
      </li>
      <li>
        <a href="">Facebook</a>
      </li>
    </ul>
</div>
<style>
/* From Uiverse.io by roroland - Tags: card */
.card {
  --cardbg: 245, 245, 245;
  --cardBase: 235, 16, 206;
  --cardText: 100, 100, 100;
  --cardTextBtn: 106, 16, 88;
  --cardsquares: 156, 113, 227;
  display: flex;
  flex-flow: column nowrap;
  place-items: center;
  text-align: center;
  border: 1px solid #ccc;
  box-shadow: 0 0 3em rgba(var(--cardBase), .25),
  inset 0 -.25em 1px rgba(var(--cardBase), .125);
  border-radius: 4px;
  background: rgba(var(--cardbg), 1);
  position: relative;
  width: 220px;
  height: 310px;
  perspective: 1000px;
  z-index: 0;
  transition: all 1s ease-out;
}

.card:hover {
  filter: grayscale(0%);
  scale: 1.025;
  box-shadow: 0 0 5em rgba(var(--cardBase), .5);
}

.card::after,
.card::before {
  content: '';
  width: 200px;
  height: 50%;
  display: block;
  background-color: rgba(var(--cardsquares), .5);
  filter: blur(10px);
  position: absolute;
  transition: all 5s ease-out;
  opacity: .1;
  z-index: 0;
}

.card:hover::after,
.card:hover::before {
  opacity: .5;
  rotate: 60deg;
}

.card:hover::after {
  translate: 100% 0;
}

.card:hover::before {
  translate: -100% 0;
}

.card .card-title {
  color: rgba(var(--cardText), .75);
  font-size: 1.1em;
  font-weight: 600;
  margin: .5em;
  position: relative;
  transition: all .3s ease-out;
  z-index: 100;
  text-shadow: 0px 0px 0px rgba(var(--cardText), .25);
}

.card:hover h3 {
  color: rgba(var(--cardText), 1);
  text-shadow: 0px 8px 5px rgba(var(--cardText), .35);
}

.card:hover span {
  filter: grayscale(0%);
}

/* Inner card */
.card-info::after {
  left: -6rem;
  bottom: 0;
}

.card-info::before {
  right: -6rem;
  top: 1rem;
}

/* Avatar container */
.card-info span {
  color: rgba(var(--cardBase), 1);
  display: flex;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  background-color: rgba(var(--cardBase), .5);
  height: 80px;
  width: 50%;
  box-shadow: inset 0px 2px 4px rgba(var(--cardBase), .95),
  inset 0px 2px 40px rgba(var(--cardbg), .95);
  position: relative;
  transition: all .3s ease-out .1s;
  filter: grayscale(75%);
  z-index: 0;
}

.card-info span:hover .avatar {
  scale: 1.5;
}

.avatar {
  transition: all .3s ease-out;
  position: relative;
}

/* Inner card container and UI */
.card-info {
  --angle: 0deg;
  display: flex;
  flex-flow: column nowrap;
  place-items: center;
  padding: 1em;
  margin: 0 .75em;
  color: rgba(var(--cardText), 1);
  background-color: rgba(250, 246, 246, 1);
  transition: all .5s ease-out;
  animation: animateBorder 10s linear infinite reverse;
  border: .15em solid;
  position: relative;
  z-index: 10;
  border-image: linear-gradient(var(--angle), rgba(var(--cardbg), 1), rgba(var(--cardBase), .5), rgba(var(--cardbg), 1)) 1;
}

.card-info p {
  color: rgba(var(--cardText), 1);
  line-height: 1.25em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  font-size: 1em;
  margin: 1em 0;
  transition: all .3s ease-out .3s;
}

.card-info .btn {
  display: block;
  padding: 8px 16px;
  background-color: rgba(var(--cardBase), .35);
  color: rgba(var(--cardTextBtn), .75);
  text-decoration: none;
  border-radius: 4px;
  font-size: .85em;
  transition: all 0.3s ease-in-out;
}

.card-info .btn:hover {
  cursor: pointer;
  background-color: rgba(var(--cardsquares), .35);
}

.card-info .btn:active {
  box-shadow: inset 0px -2px 3px rgba(var(--cardBase), .25);
}

/* Card links container */
.card-links {
  transition: all .3s linear;
  opacity: 0;
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  position: relative;
  top: -2rem;
  list-style: none;
  color: rgba(var(--cardText), 1);
  font-size: .75em
}

.card-links a {
  transition: color .3s ease-out;
}

.card-links a:hover {
  color: rgba(var(--cardBase), .75);
}

/* Card chckbox active state */
.card input[type="checkbox"] {
  visibility: hidden;
}

.card:hover:has(#toggle:checked) .card-title {
  text-shadow: 0px 2px 5px rgba(var(--cardText), .35);
}

.card:has(#toggle:checked) {
  border-radius: 10px;
  height: 295px;
}

.card:has(#toggle:checked) .card-info > *:not(.btn):not(span) {
  opacity: 0;
}

.card:has(#toggle:checked) .card-info {
  translate: 0 -20%;
  border-width: 1px;
  border: none;
  box-shadow: inset 0 0 5px rgba(var(--cardBase), .5),
  inset 0px 0px 2px rgba(var(--cardText), .25),
  inset 0px 30px 40px rgba(var(--cardBase), .25);
  border-radius: 10px;
}

.card:has(#toggle:checked) .card-info span {
  translate: 0 75%;
}

.card:has(#toggle:checked) .card-info p {
  transition: all .1s ease-out;
}

.card:has(#toggle:checked) .card-links {
  opacity: 1;
  top: -2rem;
}

.card #toggle {
  visibility: hidden;
}

@keyframes animateBorder {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
</style>


================================================
FILE: Cards/roroland_shy-cat-11.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by roroland  - Tags: 3d, pink, button, card, animated */
.one-div {
  --color1: #db41a5;
  --color2: pink;
  --color3: #fff;
  --color4: #ffaae2;
  --time: 5;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: center;
  padding: 1em;
  width: auto;
  height: 100%;
  position: relative;
  transition: all 1s ease-out;
  transform: perspective(400px);
  transform-style: preserve-3d;
  z-index: 0;
}

.one-div:hover {
  cursor: pointer;
  filter: drop-shadow(0px 0px 100px var(--color2));
  scale: 1.2;
}

.one-div:hover::after {
  scale: 0;
  opacity: 0;
}

.one-div:hover::before {
  color: var(--color4);
  box-shadow: 0px 0px 20px 5px rgba(0,0,0, .5), 0px 3px 50px rgba(0,0,0, .15), inset 0 0 1px 1px #000;
  text-shadow: 0 1px 5px #000;
}

.one-div:active {
  transition: all .1s ease-out;
  scale: .99;
}

.one-div:active::before {
  transition: all .1s ease-out;
  color: white;
}

.one-div::after,
.one-div::before {
  padding: 1em;
  grid-column: 1/-1;
  grid-row: 1 / 1;
  position: relative;
  transition: all 1s ease-out .3s;
}

.one-div::before {
  animation: fade calc(var(--time) * 1s) ease-out infinite calc(var(--time) * .5s);
  content: 'Single div button';
  border-radius: 4px;
  background-image: linear-gradient(to bottom, var(--color1) 30%, var(--color2) 95%, var(--color3) 99%);
}

.one-div::after {
  animation: rotate calc(var(--time) * 1s) ease-out infinite;
  display: block;
  width: calc(100% - 2rem);
  outline-color: var(--color4);
  outline-width: .5em;
  outline-offset: .9em;
  outline-style: solid;
  content: '';
  z-index: -1;
}

@keyframes rotate {
  0% {
    rotate: x -90deg;
  }

  0%, 50% {
    filter: blur(0px) drop-shadow(0px 0px 60px var(--color3)) opacity(100%);
  }

  100% {
    rotate: x 90deg;
    filter: blur(4px) drop-shadow(0px 0px 30px var(--color2)) opacity(80%);
  }
}

@keyframes fade {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.9;
  }
}
</style>
    

================================================
FILE: Cards/sabbircoder07_quick-panther-36.html
================================================
   <div class="results-summary-container">
      <div class="confetti">
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
        <div class="confetti-piece"></div>
      </div>
      <div class="results-summary-container__result">
        <div class="heading-tertiary">Your Result</div>
        <div class="result-box">
          <div class="heading-primary">78</div>
          <p class="result">of 100</p>
        </div>
        <div class="result-text-box">
          <div class="heading-secondary">excellent</div>
          <p class="paragraph">
            You scored higher than 65% of the people who have taken these tests.
          </p>
        </div>
        <div class="summary__cta">
          <button class="btn btn__continue">Continue 
        </button>
        </div>
      </div>
    </div>
<style>
/* From Uiverse.io by sabbircoder07 - Tags: animated, card template, result card */
.results-summary-container {
  font-family: "Hanken Grotesk", sans-serif;
  display: flex;
  width: 320px;
  border-radius: 30px;
  box-shadow: 10px 20px 20px rgba(120, 87, 255, 0.3);
  backface-visibility: hidden;
}

.heading-primary,
.heading-secondary,
.heading-tertiary {
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.heading-primary {
  font-size: 36px;
  font-weight: 600;
  background-image: linear-gradient(to right, #f7bb97, #dd5e89);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(1.6);
}

.heading-secondary {
  font-size: 24px;
  font-weight: 600;
  margin-top: 20px;
  letter-spacing: 2px;
}

.heading-tertiary {
  font-size: 20px;
  font-weight: 500;
  color: hsl(221, 100%, 96%);
}

.paragraph {
  font-size: 17px;
  line-height: 1.4;
  color: hsl(221, 100%, 96%);
}

.paragraph-text-box {
  width: 100%;
}

.text-center {
  text-align: center;
}

.margin-1 {
  margin-bottom: 10px;
}

.results-summary-container__result {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 30px;
  background-image: linear-gradient(to bottom, #734b6d, #42275a);
  animation: gradient 9s infinite alternate linear;
  .result-box {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-image: linear-gradient(-45deg, #ef629f, #42275a);
  background-color: #56ab2f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: gradient 9s linear infinite;
}

.result {
  margin-top: -8px;
  font-size: 16px;
  font-weight: 400;
  color: hsl(241, 100%, 89%);
}
}

.btn {
  width: 240px;
  padding: 10px;
  color: #ffffff;
  background-image: linear-gradient(to right, #aa076b, #61045f);
  border: none;
  border-radius: 100px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 500;
  cursor: pointer;
  margin: 20px 0 2px 0;
  transition: all 0.3s;
}

.btn:hover {
  transform: translateY(5px);
  background-image: linear-gradient(to left, #aa076b, #61045f);
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
    background-image: linear-gradient(-45deg, #ef629f, #42275a);
  }

  50% {
    background-position: 100% 50%;
    background-image: linear-gradient(to bottom, #aa076b, #61045f);
  }

  100% {
    background-position: 0% 50%;
    background-image: linear-gradient(to top, #ef629f, #42275a);
  }
}

.confetti {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 300px;
  height: 60%;
  overflow: hidden;
  z-index: 1000;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 20px;
  background-color: hsl(39, 100%, 56%);
  top: 0;
  opacity: 0;
  animation: makeItRain 3000ms infinite linear;
}

.confetti-piece:nth-child(1) {
  left: 7%;
  transform: rotate(-10deg);
  animation-delay: 182ms;
  animation-duration: 2000ms;
}

.confetti-piece:nth-child(2) {
  left: 14%;
  transform: rotate(20deg);
  animation-delay: 161ms;
  animation-duration: 2076ms;
}

.confetti-piece:nth-child(3) {
  left: 21%;
  transform: rotate(-51deg);
  animation-delay: 481ms;
  animation-duration: 2103ms;
}

.confetti-piece:nth-child(4) {
  left: 28%;
  transform: rotate(61deg);
  animation-delay: 334ms;
  animation-duration: 1008ms;
}

.confetti-piece:nth-child(5) {
  left: 35%;
  transform: rotate(-52deg);
  animation-delay: 302ms;
  animation-duration: 1776ms;
}

.confetti-piece:nth-child(6) {
  left: 42%;
  transform: rotate(38deg);
  animation-delay: 180ms;
  animation-duration: 1168ms;
}

.confetti-piece:nth-child(7) {
  left: 49%;
  transform: rotate(11deg);
  animation-delay: 395ms;
  animation-duration: 1200ms;
}

.confetti-piece:nth-child(8) {
  left: 56%;
  transform: rotate(49deg);
  animation-delay: 14ms;
  animation-duration: 1887ms;
}

.confetti-piece:nth-child(9) {
  left: 63%;
  transform: rotate(-72deg);
  animation-delay: 149ms;
  animation-duration: 1805ms;
}

.confetti-piece:nth-child(10) {
  left: 70%;
  transform: rotate(10deg);
  animation-delay: 351ms;
  animation-duration: 2059ms;
}

.confetti-piece:nth-child(11) {
  left: 77%;
  transform: rotate(4deg);
  animation-delay: 307ms;
  animation-duration: 1132ms;
}

.confetti-piece:nth-child(12) {
  left: 84%;
  transform: rotate(42deg);
  animation-delay: 464ms;
  animation-duration: 1776ms;
}

.confetti-piece:nth-child(13) {
  left: 91%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 1818ms;
}

.confetti-piece:nth-child(14) {
  left: 94%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 818ms;
}

.confetti-piece:nth-child(15) {
  left: 96%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 2818ms;
}

.confetti-piece:nth-child(16) {
  left: 98%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 2818ms;
}

.confetti-piece:nth-child(17) {
  left: 50%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 2818ms;
}

.confetti-piece:nth-child(18) {
  left: 60%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 1818ms;
}

.confetti-piece:nth-child(odd) {
  background-color: hsl(0, 100%, 67%);
}

.confetti-piece:nth-child(even) {
  z-index: 1;
}

.confetti-piece:nth-child(4n) {
  width: 6px;
  height: 14px;
  animation-duration: 4000ms;
  background-color: #c33764;
}

.confetti-piece:nth-child(5n) {
  width: 3px;
  height: 10px;
  animation-duration: 4000ms;
  background-color: #b06ab3;
}

.confetti-piece:nth-child(3n) {
  width: 4px;
  height: 12px;
  animation-duration: 2500ms;
  animation-delay: 3000ms;
  background-color: #dd2476;
}

.confetti-piece:nth-child(3n-7) {
  background-color: hsl(166, 100%, 37%);
}

@keyframes makeItRain {
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  to {
    transform: translateY(250px);
  }
}

</style>


================================================
FILE: Cards/sabbircoder07_selfish-treefrog-55.html
================================================
<div class="advice-container">
      <p class="paragraph">A D V I S E # 140</p>
      <div class="advice-details">“If your hair is thinning, try dying your hair a similar tone to your scalp.”</div>
<div class="pattern-divider">
<svg width="295" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#4F5D74" d="M0 8h122v1H0zM173 8h122v1H173z"></path><g transform="translate(138)" fill="#CEE3E9"><rect width="6" height="16" rx="3"></rect><rect x="14" width="6" height="16" rx="3"></rect></g></g></svg>
</div>
<button>
        <svg class="icon-dice" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 0H4a4.005 4.005 0 0 0-4 4v16a4.005 4.005 0 0 0 4 4h16a4.005 4.005 0 0 0 4-4V4a4.005 4.005 0 0 0-4-4ZM7.5 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z" fill="#202733"></path></svg>
</button>
</div>
<style>
/* From Uiverse.io by sabbircoder07 - Tags: card, css effect, css3 */
.advice-container {
  font-family: "Manrope", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 320px;
  height: auto;
  background-color: hsl(217, 19%, 24%);
  border-radius: 10px;
  padding: 30px 16px 0 16px;
}

.paragraph {
  font-size: 17px;
  background-image: linear-gradient(to right, hsl(150, 100%, 66%),#C031B5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
  /*Reason: there are some contrast issues*/
}

.advice-details {
  color: hsl(193, 38%, 86%);
  font-size: 20px;
  font-weight: 500;
  margin: 30px 0;
  line-height: 25px;
  text-wrap: balance;
  letter-spacing: 1px;
}

.pattern-divider path {
  fill: hsl(217, 19%, 38%);
}

button {
  height: 55px;
  width: 55px;
  border-radius: 50%;
  border: none;
  background: #00e673;
  margin-top: 20px;
  margin-bottom: -25px;
  cursor: pointer;
  transition: 0.3s all
}

button:hover {
  box-shadow: 0rem 0rem 10px 10px rgba(82, 255, 168, 0.5);
}



</style>


================================================
FILE: Cards/sahilxkhadka_afraid-panther-70.html
================================================
<!-- From Uiverse.io by sahilxkhadka  - Tags: card, navbar, hover animation, focus styling, dashboard, sidebar -->
<div class="card w-72 bg-white p-5 shadow-md shadow-purple-200/50 rounded-md">
  <ul class="w-full flex flex-col gap-2">
    <li
      class="flex-center cursor-pointer p-16-semibold w-full whitespace-nowrap"
    >
      <button
        class="p-16-semibold flex size-full gap-4 p-4 group font-semibold rounded-full bg-cover hover:bg-purple-100 hover:shadow-inner focus:bg-gradient-to-r from-purple-400 to-purple-600 focus:text-white text-gray-700 transition-all ease-linear"
      >
        <svg
          stroke="#000000"
          class="icon glyph size-6 group-focus:fill-white group-focus:stroke-white"
          id="dashboard-alt"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="#000000"
        >
          <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
          <g
            stroke-linejoin="round"
            stroke-linecap="round"
            id="SVGRepo_tracerCarrier"
          ></g>
          <g id="SVGRepo_iconCarrier">
            <path d="M14,10V22H4a2,2,0,0,1-2-2V10Z"></path>
            <path d="M22,10V20a2,2,0,0,1-2,2H16V10Z"></path>
            <path d="M22,4V8H2V4A2,2,0,0,1,4,2H20A2,2,0,0,1,22,4Z"></path>
          </g>
        </svg>
        Dashboard
      </button>
    </li>
    <li
      class="flex-center cursor-pointer p-16-semibold w-full whitespace-nowrap"
    >
      <button
        class="p-16-semibold flex size-full gap-4 p-4 group font-semibold rounded-full bg-cover hover:bg-purple-100 hover:shadow-inner focus:bg-gradient-to-r from-purple-400 to-purple-600 focus:text-white text-gray-700 transition-all ease-linear"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          class="size-6"
        >
          <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
          <g
            stroke-linejoin="round"
            stroke-linecap="round"
            id="SVGRepo_tracerCarrier"
          ></g>
          <g id="SVGRepo_iconCarrier">
            <path
              class="group-focus:fill-white"
              fill="#000"
              d="M14.2788 2.15224C13.9085 2 13.439 2 12.5 2C11.561 2 11.0915 2 10.7212 2.15224C10.2274 2.35523 9.83509 2.74458 9.63056 3.23463C9.53719 3.45834 9.50065 3.7185 9.48635 4.09799C9.46534 4.65568 9.17716 5.17189 8.69017 5.45093C8.20318 5.72996 7.60864 5.71954 7.11149 5.45876C6.77318 5.2813 6.52789 5.18262 6.28599 5.15102C5.75609 5.08178 5.22018 5.22429 4.79616 5.5472C4.47814 5.78938 4.24339 6.1929 3.7739 6.99993C3.30441 7.80697 3.06967 8.21048 3.01735 8.60491C2.94758 9.1308 3.09118 9.66266 3.41655 10.0835C3.56506 10.2756 3.77377 10.437 4.0977 10.639C4.57391 10.936 4.88032 11.4419 4.88029 12C4.88026 12.5581 4.57386 13.0639 4.0977 13.3608C3.77372 13.5629 3.56497 13.7244 3.41645 13.9165C3.09108 14.3373 2.94749 14.8691 3.01725 15.395C3.06957 15.7894 3.30432 16.193 3.7738 17C4.24329 17.807 4.47804 18.2106 4.79606 18.4527C5.22008 18.7756 5.75599 18.9181 6.28589 18.8489C6.52778 18.8173 6.77305 18.7186 7.11133 18.5412C7.60852 18.2804 8.2031 18.27 8.69012 18.549C9.17714 18.8281 9.46533 19.3443 9.48635 19.9021C9.50065 20.2815 9.53719 20.5417 9.63056 20.7654C9.83509 21.2554 10.2274 21.6448 10.7212 21.8478C11.0915 22 11.561 22 12.5 22C13.439 22 13.9085 22 14.2788 21.8478C14.7726 21.6448 15.1649 21.2554 15.3694 20.7654C15.4628 20.5417 15.4994 20.2815 15.5137 19.902C15.5347 19.3443 15.8228 18.8281 16.3098 18.549C16.7968 18.2699 17.3914 18.2804 17.8886 18.5412C18.2269 18.7186 18.4721 18.8172 18.714 18.8488C19.2439 18.9181 19.7798 18.7756 20.2038 18.4527C20.5219 18.2105 20.7566 17.807 21.2261 16.9999C21.6956 16.1929 21.9303 15.7894 21.9827 15.395C22.0524 14.8691 21.9088 14.3372 21.5835 13.9164C21.4349 13.7243 21.2262 13.5628 20.9022 13.3608C20.4261 13.0639 20.1197 12.558 20.1197 11.9999C20.1197 11.4418 20.4261 10.9361 20.9022 10.6392C21.2263 10.4371 21.435 10.2757 21.5836 10.0835C21.9089 9.66273 22.0525 9.13087 21.9828 8.60497C21.9304 8.21055 21.6957 7.80703 21.2262 7C20.7567 6.19297 20.522 5.78945 20.2039 5.54727C19.7799 5.22436 19.244 5.08185 18.7141 5.15109C18.4722 5.18269 18.2269 5.28136 17.8887 5.4588C17.3915 5.71959 16.7969 5.73002 16.3099 5.45096C15.8229 5.17191 15.5347 4.65566 15.5136 4.09794C15.4993 3.71848 15.4628 3.45833 15.3694 3.23463C15.1649 2.74458 14.7726 2.35523 14.2788 2.15224ZM12.5 15C14.1695 15 15.5228 13.6569 15.5228 12C15.5228 10.3431 14.1695 9 12.5 9C10.8305 9 9.47716 10.3431 9.47716 12C9.47716 13.6569 10.8305 15 12.5 15Z"
              clip-rule="evenodd"
              fill-rule="evenodd"
            ></path>
          </g>
        </svg>
        Settings
      </button>
    </li>
    <li
      class="flex-center cursor-pointer p-16-semibold w-full whitespace-nowrap"
    >
      <button
        class="p-16-semibold flex size-full gap-4 p-4 group font-semibold rounded-full bg-cover hover:bg-purple-100 hover:shadow-inner focus:bg-gradient-to-r from-purple-400 to-purple-600 focus:text-white text-gray-700 transition-all ease-linear"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          class="size-6"
        >
          <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
          <g
            stroke-linejoin="round"
            stroke-linecap="round"
            id="SVGRepo_tracerCarrier"
          ></g>
          <g id="SVGRepo_iconCarrier">
            <path
              class="group-focus:fill-white"
              fill="#000000"
              d="M17.2929 14.2929C16.9024 14.6834 16.9024 15.3166 17.2929 15.7071C17.6834 16.0976 18.3166 16.0976 18.7071 15.7071L21.6201 12.7941C21.6351 12.7791 21.6497 12.7637 21.6637 12.748C21.87 12.5648 22 12.2976 22 12C22 11.7024 21.87 11.4352 21.6637 11.252C21.6497 11.2363 21.6351 11.2209 21.6201 11.2059L18.7071 8.29289C18.3166 7.90237 17.6834 7.90237 17.2929 8.29289C16.9024 8.68342 16.9024 9.31658 17.2929 9.70711L18.5858 11H13C12.4477 11 12 11.4477 12 12C12 12.5523 12.4477 13 13 13H18.5858L17.2929 14.2929Z"
            ></path>
            <path
              class="group-focus:fill-white"
              fill="#000"
              d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H14.5C15.8807 22 17 20.8807 17 19.5V16.7326C16.8519 16.647 16.7125 16.5409 16.5858 16.4142C15.9314 15.7598 15.8253 14.7649 16.2674 14H13C11.8954 14 11 13.1046 11 12C11 10.8954 11.8954 10 13 10H16.2674C15.8253 9.23514 15.9314 8.24015 16.5858 7.58579C16.7125 7.4591 16.8519 7.35296 17 7.26738V4.5C17 3.11929 15.8807 2 14.5 2H5Z"
            ></path>
          </g>
        </svg>
        Logout
      </button>
    </li>
  </ul>
</div>


    

================================================
FILE: Cards/sahilxkhadka_clever-catfish-31.html
================================================
<!-- From Uiverse.io by sahilxkhadka - Tags: card, creditcard, minimal, bankcard -->
<div class="card relative h-[260px] w-[400px] flex flex-col justify-end px-6 py-10 text-white rounded-3xl gap-8 bg-gradient-to-r from-purple-500 to-pink-500">
  <p class="text-2xl  font-medium">5430 4900 3232 9755</p>
  <div class="flex justify-between gap-10">
    <p class="text-lg font-medium">Elon Musk</p>
    <div class="flex-1 flex flex-col justify-end">
      <p class="self-end">Valid Date</p>
      <p class="self-end">2/14/2024</p>
    </div>
    <div class="self-center">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 58 36" height="36" width="58">
        <circle fill-opacity="0.62" fill="#F9CCD1" r="18" cy="18" cx="18"></circle>
        <circle fill="#424242" r="18" cy="18" cx="40" opacity="0.36"></circle>
      </svg>
    </div>
  </div>
</div>



================================================
FILE: Cards/sahilxkhadka_clever-goose-52.html
================================================
<!-- From Uiverse.io by sahilxkhadka - Tags: card, menu, navigation -->
<div class="flex flex-col">
  <div class="text-center mb-6 bg-gradient-to-r from-teal-500 via-purple-500 to-orange-500 bg-clip-text text-transparent text-3xl font-black">
    Hover Them
  </div>
  <div class="border border-gray-300 py-3 flex gap-1 shadow-xl rounded-md">
    <div class="group relative px-4 cursor-pointer">
      <div class="flex h-10 w-10 items-center justify-center rounded-full hover:text-blue-500">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="32" width="32">
          <path stroke="currentColor" d="M9 22V12H15V22M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z"></path>
        </svg>
      </div>
      <span class="absolute -top-8 left-[50%] -translate-x-[50%] z-20 origin-left scale-0 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium shadow-md transition-all duration-300 ease-in-out group-hover:scale-100">
    Home
  </span>
    </div>
    <div class="group relative px-4 cursor-pointer">
      <div class="flex h-10 w-10 items-center justify-center rounded-full hover:text-blue-500">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="24" width="24">
          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M21 11.5C21.0034 12.8199 20.6951 14.1219 20.1 15.3C19.3944 16.7118 18.3098 17.8992 16.9674 18.7293C15.6251 19.5594 14.0782 19.9994 12.5 20C11.1801 20.0035 9.87812 19.6951 8.7 19.1L3 21L4.9 15.3C4.30493 14.1219 3.99656 12.8199 4 11.5C4.00061 9.92179 4.44061 8.37488 5.27072 7.03258C6.10083 5.69028 7.28825 4.6056 8.7 3.90003C9.87812 3.30496 11.1801 2.99659 12.5 3.00003H13C15.0843 3.11502 17.053 3.99479 18.5291 5.47089C20.0052 6.94699 20.885 8.91568 21 11V11.5Z"></path>
        </svg>
      </div>
      <span class="absolute -top-8 left-[50%] -translate-x-[50%] z-20 origin-left scale-0 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium shadow-md transition-all duration-300 ease-in-out group-hover:scale-100">
    Messages
  </span>
</div>
<div class="group relative px-4 cursor-pointer">
  <div class="flex h-10 w-10 items-center justify-center rounded-full hover:text-blue-500"> 
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="24" width="24">
      <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13M16 3.13C16.8604 3.3503 17.623 3.8507 18.1676 4.55231C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89317 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88M13 7C13 9.20914 11.2091 11 9 11C6.79086 11 5 9.20914 5 7C5 4.79086 6.79086 3 9 3C11.2091 3 13 4.79086 13 7Z"></path>
    </svg>
  </div>
  <span class="absolute -top-8 left-[50%] -translate-x-[50%] z-20 origin-left scale-0 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium shadow-md transition-all duration-300 ease-in-out group-hover:scale-100">
    User
  </span>
    </div>
  <div class="group relative px-4 cursor-pointer">
  <div class="flex h-10 w-10 items-center justify-center rounded-full hover:text-blue-500"> 
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="24" width="24">
      <g>
        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"></path>
        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z"></path>
      </g>
      <defs>
        <clipPath id="clip0_1683_1163">
          <rect fill="white" height="24" width="24"></rect>
        </clipPath>
      </defs>
    </svg>
  </div>
  <span class="absolute -top-8 left-[50%] -translate-x-[50%] z-20 origin-left scale-0 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium shadow-md transition-all duration-300 ease-in-out group-hover:scale-100">
    Settings
  </span>
</div>
  </div>
</div>



================================================
FILE: Cards/sahilxkhadka_hot-octopus-44.html
================================================
<div class="card">
  <div class="heading">
    Frontend Developer
    <span>(HTML, CSS &amp; JS)</span>
  </div>
  <div class="code">
    <svg xml:space="preserve" viewBox="0 0 472.615 472.615" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" fill="#000000">
<g>
	<g>
		<polygon points="472.615,384 472.615,324.894 0,324.894 0,384 147.692,384 147.692,433.231 108.308,433.231 108.308,452.923 
			364.308,452.923 364.308,433.231 324.923,433.231 324.923,384"></polygon>
	</g>
</g>
<g>
	<g>
		<path d="M0,19.692v285.509h472.615V19.692H0z M226.462,49.201h49.231v19.692h-49.231V49.201z M216.615,98.432H256v19.692h-39.385
			V98.432z M187.077,167.355v-19.692h118.154v19.692H187.077z M285.538,196.894v19.692h-19.692v-19.692H285.538z M187.077,49.201
			h19.692v19.692h-19.692V49.201z M147.692,49.201h19.692v19.692h-19.692V49.201z M49.231,98.432h147.692v19.692H49.231V98.432z
			 M90.654,253.931l-13.923,13.923l-41.423-41.423l41.423-41.424l13.923,13.923l-27.5,27.5L90.654,253.931z M112.529,279.316
			l-18.288-7.307l39.385-98.462l18.288,7.307L112.529,279.316z M169.423,267.855L155.5,253.931L183,226.432l-27.499-27.5
			l13.922-13.923l41.424,41.424L169.423,267.855z M226.462,196.894h19.692v19.692h-19.692V196.894z M423.385,265.817H236.308
			v-19.692h187.077V265.817z M423.385,216.586H305.231v-19.692h118.154V216.586z M423.385,167.355h-98.462v-19.692h98.462V167.355z
			 M423.385,118.124H275.692V98.432h147.692V118.124z M423.385,68.894h-128V49.201h128V68.894z"></path>
	</g>
</g>
</svg>
  </div>
  <div class="icons-container">
  <div class="icons">
    <svg viewBox="0 0 512 512" height="1em" xmlns="http://www.w3.org/2000/svg">
      <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
    </svg>
  </div>
  <div class="icons">
    <svg viewBox="0 0 448 512" height="1em" xmlns="http://www.w3.org/2000/svg">
      <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
    </svg>
  </div>
  <div class="icons">
    <svg viewBox="0 0 496 512" height="1em" xmlns="http://www.w3.org/2000/svg">
      <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
    </svg>
  </div>
  </div>
</div>
<style>
/* From Uiverse.io by sahilxkhadka - Tags: card, claymorphism, social media, animated, design, info */
.card {
  padding: 2em 1em;
  width: 260px;
  background: #fff;
  border-radius: 12px;
  animation: shadow 1.8s infinite ease-in-out;
  transition: box-shadow 200ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.card .heading {
  color: royalblue;
  font-size: 1em;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.5em;
}

.card .heading span {
  display: inline-block;
  font-size: 0.8em;
  font-weight: 500;
}

.card .icons {
  display: inline-flex;
  width: 48px;
  height: 48px;
  box-shadow: 25px 25px 50px rgba(9, 148, 255, 0.25),
  -2px -2px 5px rgba(9, 148, 255, 0.25),
  inset -2px -2px 55px rgba(9, 148, 255, 0.5);
  justify-content: center;
  align-items: center;
  border-radius: 1em;
}

.card .icons-container {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.card .icons svg {
  fill: royalblue;
  height: 24px;
  width: 24px;
}

.card .code {
  width: fit-content;
  margin: 1.5em auto;
}

.card .code svg {
  fill: royalblue;
  width: 180px;
  aspect-ratio: 16/9;
}

@keyframes shadow {
  0% {
    box-shadow: 5px 5px 20px rgba(9, 148, 255, 0.15),
  -5px -5px 10px rgba(9, 148, 255, 0.1),
  inset -5px -5px 5px rgba(9, 148, 255, 0.5);
  }

  50% {
    box-shadow: 25px 25px 50px rgba(9, 148, 255, 0.25),
  -10px -10px 30px rgba(9, 148, 255, 0.1),
  inset -5px -5px 15px rgba(9, 148, 255, 0.5);
  }

  100% {
    box-shadow: 5px 5px 20px rgba(9, 148, 255, 0.15),
  -5px -5px 10px rgba(9, 148, 255, 0.1),
  inset -5px -5px 5px rgba(9, 148, 255, 0.5);
  }
}
</style>


================================================
FILE: Cards/sahilxkhadka_rotten-sloth-50.html
================================================
<div class="card">
  <svg fill="none" viewBox="0 0 342 175" height="175" width="342" xmlns="http://www.w3.org/2000/svg" class="background">
    <path fill="url(#paint0_linear_103_640)" d="M0 66.4396C0 31.6455 0 14.2484 11.326 5.24044C22.6519 -3.76754 39.6026 0.147978 73.5041 7.97901L307.903 62.1238C324.259 65.9018 332.436 67.7909 337.218 73.8031C342 79.8154 342 88.2086 342 104.995V131C342 151.742 342 162.113 335.556 168.556C329.113 175 318.742 175 298 175H44C23.2582 175 12.8873 175 6.44365 168.556C0 162.113 0 151.742 0 131V66.4396Z"></path>
    <defs>
      <linearGradient gradientUnits="userSpaceOnUse" y2="128" x2="354.142" y1="128" x1="0" id="paint0_linear_103_640">
        <stop stop-color="#5936B4"></stop>
        <stop stop-color="#362A84" offset="1"></stop>
      </linearGradient>
    </defs>
  </svg>
  <div class="cloud">
    <svg fill="#000000" preserveAspectRatio="xMidYMid meet" class="iconify iconify--emojione" role="img" aria-hidden="true" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g>
      <g id="SVGRepo_iconCarrier">
        <g fill="#75d6ff">
          <path d="M10.8 42.9c-.5 1.5-.1 3 1 3.4c1.1.4 2.4-.5 3-2c.6-1.8.7-4.1.2-6.9c-2.1 1.9-3.6 3.8-4.2 5.5"> </path>
          <path d="M13.2 57.4c.6-1.8.7-4.1.2-6.9c-2.1 1.8-3.6 3.7-4.2 5.5c-.5 1.5-.1 3 1 3.4c1.1.4 2.5-.5 3-2"> </path>
          <path d="M51.5 37.4c-2.1 1.8-3.6 3.7-4.2 5.5c-.5 1.5-.1 3 1 3.4c1.1.4 2.4-.5 3-2c.5-1.7.6-4.1.2-6.9"> </path>
          <path d="M38.2 55.9c-.5 1.5-.1 3 1 3.4s2.4-.5 3-2c.6-1.8.7-4.1.2-6.9c-2 1.9-3.5 3.8-4.2 5.5"> </path>
          <path d="M46.9 55.9c-.5 1.5-.1 3 1 3.4s2.4-.5 3-2c.6-1.8.7-4.1.2-6.9c-2.1 1.9-3.6 3.8-4.2 5.5"> </path>
          <path d="M18.6 55.9c-.5 1.5-.1 3 1 3.4s2.4-.5 3-2c.6-1.8.7-4.1.2-6.9c-2.1 1.9-3.6 3.8-4.2 5.5"> </path>
        </g>
        <path d="M24.5 31.9l-4.9 16.2h12.5L27.9 62l16.5-20.2H32.5l2.9-9.9z" fill="#ffce31"> </path>
        <path fill="#ffffff" d="M18.2 32.5c-.8 0-1.6-.1-2.4-.4c-3.1-1-5.3-3.9-5.3-7.2c0-2.2 1-4.3 2.6-5.7c.4-.4.9-.7 1.4-1l.5-1.8c1.3-4.4 5.4-7.5 10-7.5c.5 0 .9 0 1.5.1c.4.1.8.1 1.2.3l.2-.4c1.9-3.3 5.4-5.4 9.2-5.4C43 3.5 47.7 8.2 47.7 14v1c.4.2.9.4 1.3.6c2.8 1.6 4.5 4.6 4.5 7.8c0 4.2-2.9 7.8-7 8.8c-.7.2-1.4.2-2 .2H18.2z"> </path>
        <path fill="#b6c1d1" d="M37.1 5c5 0 9 4 9 8.9v.7c-2.1.2-4 1-5.4 2.3c1.1-.6 2.4-1 3.7-1c.5 0 1 .1 1.5.1c.8.2 1.6.5 2.3.9c2.3 1.3 3.8 3.7 3.8 6.5c0 3.6-2.5 6.5-5.8 7.3c-.7.2-1.2.3-1.8.3H18.2c-.7 0-1.3-.1-1.9-.3c-2.4-.8-4.2-3.1-4.2-5.8c0-1.8.8-3.5 2.1-4.6c.6-.5 1.3-.9 2-1.2c.6-.2 1.3-.3 2-.3c2 0 3.7.9 4.9 2.4h.1c-1.3-2.4-3.7-4.1-6.6-4.3c1.1-3.7 4.5-6.4 8.5-6.4c.4 0 .9 0 1.3.1c.8.1 1.6.3 2.3.7c2.7 1.2 4.7 3.7 5.1 6.8V18c0-3.4-1.8-6.5-4.5-8.3C30.8 6.9 33.8 5 37.1 5m0-3C33 2 29.2 4.1 27 7.6h-.3c-.6-.1-1.2-.1-1.7-.1c-5.3 0-10 3.5-11.4 8.6l-.3 1.2c-.4.2-.7.5-1.1.8c-2 1.7-3.1 4.2-3.1 6.9c0 4 2.5 7.4 6.3 8.7c.9.3 1.9.5 2.9.5h26.2c.8 0 1.6-.1 2.4-.3c4.8-1.1 8.2-5.3 8.2-10.3c0-3.8-2-7.3-5.3-9.1c-.2-.1-.3-.2-.5-.3v-.1C49.2 7.4 43.8 2 37.1 2z"> </path>
      </g>
    </svg>
  </div>
  <p class="main-text">24°</p>
  <div class="info">
    <div class="info-left">
      <p class="text-gray">H:32° L: 16°</p>
      <p>Kathmandu, Nepal</p>
    </div>
    <p class="info-right">Mid Rain</p>
  </div>
</div>
<style>
/* From Uiverse.io by sahilxkhadka - Tags: card, weather, widget */
.card {
  width: 342px;
  height: 184px;
  position: relative;
  padding: 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.background {
  fill: linear-gradient(90deg, #5936B4 0%, #362A84 100%);
  position: absolute;
  inset: 0;
  z-index: -1;
}

.cloud {
  position: absolute;
  right: 0;
  top: -12px;
}

.cloud svg {
  height: 120px;
}

.card .main-text {
  font-size: 48px;
  z-index: 2;
}

.card .info {
  display: flex;
  justify-content: space-between;
}

.card .info .text-gray {
  color: rgba(235, 235, 245, 0.60);
}

.card .info .info-right {
  align-self: flex-end;
}

</style>


================================================
FILE: Cards/saidbl1_helpless-cow-87.html
================================================

    <div class="frame">
      

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="8334.000000pt" height="8334.000000pt" viewBox="0 0 8334.000000 8334.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,8334.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M23445 69854 c-518 -53 -853 -176 -1145 -419 -119 -99 -289 -301
-394 -468 -274 -437 -515 -1178 -655 -2013 -98 -580 -149 -1091 -192 -1889
-29 -550 -21 -1607 16 -2350 112 -2194 472 -4483 936 -5947 l50 -158 -30 -58
c-146 -290 -463 -1043 -663 -1577 -336 -899 -741 -2195 -967 -3100 -135 -542
-408 -1891 -666 -3290 -291 -1585 -320 -1733 -384 -1985 -92 -361 -182 -638
-441 -1365 -314 -882 -360 -1044 -360 -1285 0 -130 31 -254 95 -385 129 -264
348 -403 687 -437 238 -24 569 28 941 149 60 19 110 33 112 31 2 -2 -48 -120
-112 -263 -197 -445 -288 -693 -335 -905 -19 -88 -22 -134 -22 -285 0 -166 2
-187 27 -268 48 -157 112 -261 228 -373 86 -82 162 -135 274 -191 281 -142
686 -211 1060 -181 88 7 205 13 260 13 99 0 101 0 195 -47 146 -73 340 -227
507 -402 49 -50 194 -222 323 -381 292 -359 446 -531 765 -854 1308 -1325
2673 -2206 4630 -2986 391 -156 777 -297 800 -291 14 4 580 -166 592 -177 1
-2 -43 -104 -98 -227 -1659 -3723 -3190 -7772 -4209 -11130 -51 -168 -95 -308
-99 -312 -3 -4 -62 -14 -131 -23 -659 -86 -1292 -320 -1830 -678 -41 -28 -134
-94 -207 -149 l-131 -99 -214 -3 c-563 -9 -1022 -165 -1406 -478 -187 -152
-413 -408 -564 -639 -64 -97 -75 -109 -101 -109 -98 0 -388 -83 -550 -158
-362 -168 -684 -465 -926 -854 -259 -415 -415 -899 -487 -1508 -21 -182 -30
-749 -15 -991 98 -1567 662 -3343 1457 -4591 283 -445 568 -803 909 -1143 436
-436 875 -752 1390 -1001 500 -241 1170 -411 1870 -474 220 -20 604 -28 861
-19 732 26 1192 107 2619 463 1081 269 1462 347 2145 440 1140 156 2262 244
3805 301 886 32 2311 45 5070 46 2433 0 4771 -13 5505 -31 1940 -47 3307 -145
4665 -336 643 -90 960 -156 2040 -424 1256 -312 1664 -395 2183 -445 398 -38
988 -45 1317 -15 895 80 1643 299 2246 658 834 496 1545 1246 2120 2239 378
652 737 1516 930 2238 194 728 313 1368 361 1945 14 174 17 764 5 940 -39 551
-186 1112 -403 1541 -108 214 -240 397 -423 591 l-91 96 110 147 c489 651 888
1422 1116 2155 181 581 267 1157 266 1785 -1 1361 -433 2758 -1370 4425 -364
649 -786 1308 -1613 2520 -622 911 -865 1282 -1114 1700 -466 782 -707 1357
-781 1860 -24 164 -15 442 19 641 108 614 339 1085 732 1488 217 223 438 382
730 526 450 222 892 316 1415 302 1064 -28 1971 -591 2430 -1508 168 -333 252
-626 321 -1107 90 -638 231 -1179 434 -1667 566 -1358 1552 -2179 2840 -2364
763 -110 1503 12 2095 344 245 137 443 288 656 500 624 620 1002 1515 1128
2668 51 463 55 1140 11 1677 -72 857 -223 1604 -475 2345 -609 1786 -1760
3252 -3370 4292 -1280 827 -2835 1357 -4465 1523 -169 17 -591 50 -647 50 -13
0 -34 53 -97 243 -177 538 -246 815 -356 1422 -201 1110 -396 2133 -610 3200
-187 934 -244 1189 -370 1651 -470 1718 -969 3131 -1519 4298 l-56 119 51 156
c458 1413 815 3715 929 5991 19 385 25 736 24 1435 0 696 -7 918 -45 1445
-118 1679 -412 2790 -919 3482 -108 147 -303 341 -420 418 -234 153 -525 253
-865 296 -144 18 -473 24 -650 11 -545 -39 -1240 -211 -1970 -487 -1757 -664
-3938 -1979 -5197 -3132 l-106 -98 -204 74 c-1005 363 -2148 649 -3418 855
-1666 271 -3739 453 -4793 420 -297 -9 -662 -25 -752 -34 -27 -2 -95 -7 -150
-10 -55 -4 -242 -17 -415 -31 -2493 -194 -4694 -609 -6298 -1190 -197 -72
-236 -83 -250 -72 -10 7 -57 49 -107 94 -856 770 -2001 1562 -3170 2193 -216
117 -821 417 -1030 511 -1110 500 -2013 788 -2774 886 -188 24 -563 40 -676
28z m635 -913 c352 -52 670 -131 1085 -268 602 -199 1112 -415 1835 -779 1551
-781 2805 -1647 3849 -2661 l165 -159 240 97 c1066 429 2243 743 3669 979 809
133 1954 270 2812 335 182 14 359 27 395 30 330 25 800 46 1115 48 246 2 725
-9 790 -18 17 -2 93 -7 170 -10 371 -15 1179 -80 1735 -140 2328 -252 4171
-666 5594 -1260 l158 -66 217 213 c811 798 1866 1554 3218 2306 1651 919 3069
1403 4009 1369 384 -14 573 -76 735 -240 431 -436 763 -1675 869 -3247 50
-750 58 -1730 20 -2557 -109 -2376 -494 -4785 -987 -6169 l-64 -182 87 -178
c623 -1281 1132 -2695 1624 -4514 125 -462 305 -1296 504 -2335 69 -363 84
-440 231 -1235 213 -1146 302 -1599 366 -1855 99 -396 237 -822 502 -1555 183
-505 226 -635 262 -784 36 -147 36 -146 -29 -146 -132 0 -339 37 -536 97 -167
50 -522 193 -771 309 -100 46 -156 66 -206 74 -190 27 -378 -70 -466 -238 -72
-139 -74 -244 -9 -467 95 -325 174 -528 427 -1095 88 -197 199 -473 228 -565
34 -106 46 -229 27 -265 -26 -48 -165 -100 -342 -126 -113 -16 -291 -16 -648
2 -135 7 -252 -13 -421 -72 -279 -97 -520 -257 -794 -529 -171 -169 -261 -272
-528 -604 -121 -151 -267 -326 -325 -390 -543 -597 -1182 -1170 -1828 -1641
-105 -76 -500 -337 -664 -437 -591 -364 -1402 -768 -2080 -1036 -235 -93
-1090 -383 -1470 -498 -91 -28 -214 -66 -275 -84 -226 -69 -1099 -316 -1340
-380 -544 -143 -1328 -333 -2125 -514 -392 -89 -566 -127 -2044 -452 -707
-155 -773 -171 -805 -197 -57 -46 -76 -87 -76 -164 0 -57 4 -72 30 -110 18
-25 49 -52 75 -65 54 -28 88 -28 410 -8 1136 72 2526 258 3670 490 511 104
1248 278 1695 400 407 112 395 109 401 102 8 -8 179 -391 396 -887 105 -239
203 -462 218 -495 15 -33 93 -213 173 -400 1190 -2787 2247 -5573 3075 -8110
224 -687 518 -1623 510 -1629 -1 -2 -64 7 -138 20 -418 72 -946 73 -1370 4
-814 -133 -1567 -494 -2225 -1067 -205 -178 -375 -356 -554 -580 -41 -51 -75
-93 -76 -93 -2 0 33 78 77 173 382 822 580 1578 639 2431 13 192 8 224 -44
283 -81 92 -216 95 -299 7 -27 -29 -115 -244 -258 -634 -98 -268 -173 -459
-303 -775 -291 -705 -507 -1122 -852 -1645 -877 -1328 -2002 -2158 -3386
-2499 -186 -46 -497 -106 -505 -98 -2 2 34 36 81 76 104 90 329 321 349 359
52 101 10 219 -97 274 -60 30 -143 22 -200 -20 -492 -364 -1014 -570 -1488
-589 l-135 -6 -120 48 c-281 111 -467 231 -764 494 -47 41 -89 78 -93 81 -4 4
34 22 85 40 493 171 994 496 1501 972 148 139 171 175 165 257 -6 76 -43 132
-111 166 -89 44 -134 33 -282 -72 -232 -164 -594 -360 -858 -467 -354 -143
-636 -207 -917 -210 l-145 -1 -47 93 c-164 330 -194 688 -89 1063 136 483 447
966 1187 1844 1124 1335 1534 1860 1969 2519 387 586 673 1120 885 1651 236
591 375 1145 435 1739 28 271 17 335 -69 422 -62 62 -121 84 -222 84 -137 0
-242 -81 -278 -214 -8 -28 -33 -132 -56 -231 -114 -486 -290 -1009 -505 -1500
-137 -313 -416 -834 -628 -1175 -404 -649 -793 -1152 -1807 -2340 -769 -900
-957 -1135 -1195 -1494 -733 -1106 -829 -2049 -298 -2938 228 -383 652 -854
1023 -1140 484 -372 1019 -586 1660 -665 206 -25 774 -25 1015 1 955 101 1820
423 2666 991 338 228 612 452 928 760 303 296 630 682 860 1017 30 43 55 78
57 78 2 0 -8 -26 -22 -57 -104 -234 -244 -668 -244 -754 1 -46 32 -113 71
-149 44 -39 115 -56 177 -40 82 20 104 46 192 219 176 348 380 655 637 959
714 841 1695 1412 2668 1551 550 79 1080 29 1590 -150 216 -76 223 -81 115
-94 -157 -18 -398 -82 -582 -156 -547 -218 -1092 -688 -1471 -1270 -492 -756
-784 -1733 -866 -2904 -18 -255 -25 -596 -12 -642 40 -146 238 -194 338 -80
40 46 44 57 118 357 267 1074 492 1744 778 2315 431 864 984 1386 1653 1559
392 102 840 19 1261 -232 153 -92 182 -103 274 -109 143 -10 252 33 382 153
147 137 272 210 466 274 374 124 844 94 1180 -75 262 -131 531 -417 733 -779
122 -218 251 -295 493 -296 90 0 228 -29 331 -69 416 -161 759 -622 904 -1215
95 -385 135 -864 111 -1313 -7 -123 -14 -233 -16 -245 -2 -13 -6 -54 -10 -93
-56 -636 -270 -1561 -522 -2260 -629 -1744 -1607 -2967 -2816 -3521 -374 -172
-899 -302 -1442 -359 -224 -24 -571 -33 -835 -24 -610 22 -1214 121 -1920 314
-601 165 -1068 275 -1665 391 -1497 290 -3195 457 -5235 514 -201 5 -439 12
-530 15 -257 9 -2966 24 -4255 25 -1618 0 -4993 -18 -5510 -29 -1466 -34
-2491 -91 -3575 -201 -1433 -146 -2773 -392 -3972 -730 -583 -165 -1214 -274
-1788 -311 -230 -15 -747 -6 -959 16 -671 68 -1313 256 -1748 510 -812 476
-1488 1220 -2026 2230 -495 930 -878 2181 -1006 3290 -38 326 -45 459 -45 780
0 446 35 738 125 1057 71 251 180 489 307 668 136 193 382 408 552 483 133 59
218 78 380 87 161 9 208 20 286 65 56 33 142 128 184 204 64 116 207 325 289
423 177 211 388 368 587 436 187 64 371 94 579 93 381 0 702 -118 947 -348
125 -117 212 -156 346 -155 104 2 159 21 294 101 333 199 620 280 953 268 277
-10 521 -83 781 -233 413 -238 822 -672 1117 -1187 328 -572 632 -1439 852
-2427 25 -113 54 -247 66 -298 23 -105 46 -139 112 -171 99 -48 233 -1 273 96
40 94 -19 868 -107 1403 -265 1615 -928 2751 -1942 3328 -235 134 -524 231
-827 279 -159 25 -518 25 -678 -1 -150 -23 -321 -66 -464 -115 -121 -42 -298
-117 -356 -152 -19 -10 -39 -16 -45 -12 -7 4 -34 23 -60 42 l-49 34 39 24 c74
45 289 152 408 201 270 113 536 184 850 229 181 25 633 25 820 0 765 -105
1461 -425 2130 -978 140 -116 512 -490 635 -639 250 -301 457 -607 644 -952
67 -123 103 -155 183 -165 122 -14 232 74 233 188 0 77 -105 452 -184 652 -19
48 -33 87 -32 87 1 0 24 -32 51 -71 399 -567 997 -1177 1540 -1570 731 -530
1508 -881 2318 -1048 348 -72 604 -101 963 -108 606 -13 1126 78 1594 279 302
129 525 274 810 524 730 643 1113 1249 1205 1909 21 148 16 487 -10 635 -106
623 -445 1260 -1115 2100 -176 220 -381 463 -804 950 -524 602 -756 883 -1030
1249 -956 1274 -1526 2437 -1810 3691 -49 215 -69 266 -128 316 -56 46 -113
66 -193 66 -122 0 -222 -59 -272 -160 -26 -52 -28 -66 -27 -162 2 -169 44
-491 100 -765 277 -1360 1016 -2714 2355 -4315 273 -327 470 -561 614 -730
496 -581 745 -899 970 -1240 284 -428 433 -742 492 -1035 24 -124 25 -405 0
-528 -25 -122 -69 -254 -129 -379 l-51 -108 -56 0 c-90 0 -296 28 -431 59
-437 101 -886 312 -1376 646 -109 75 -158 88 -229 61 -61 -24 -90 -49 -114
-99 -26 -53 -27 -119 -2 -172 42 -92 480 -472 792 -688 227 -157 532 -322 771
-416 l107 -43 -63 -58 c-305 -286 -518 -427 -821 -546 l-120 -47 -93 7 c-129
9 -337 49 -478 91 -328 99 -625 252 -947 487 -56 41 -61 43 -131 43 -82 0
-124 -21 -167 -83 -32 -47 -39 -144 -13 -198 20 -43 290 -319 394 -404 l65
-53 -65 7 c-423 47 -1008 214 -1479 423 -830 367 -1593 997 -2212 1825 -422
566 -774 1195 -1054 1883 -29 71 -84 207 -123 300 -38 94 -131 334 -207 535
-193 515 -244 645 -268 681 -44 65 -140 93 -224 65 -95 -32 -145 -116 -137
-232 39 -581 99 -948 229 -1420 104 -375 205 -647 419 -1129 l27 -60 -28 31
c-16 17 -64 73 -108 125 -480 564 -1241 1067 -1995 1319 -283 94 -534 149
-897 196 l-42 5 16 52 c47 162 343 1096 467 1477 741 2273 1676 4774 2709
7250 225 540 473 1123 541 1273 14 31 38 83 52 115 14 31 30 66 34 77 35 89
520 1187 529 1197 3 4 98 -18 211 -48 1673 -447 3480 -759 5265 -908 561 -47
575 -47 637 18 42 42 58 85 58 151 0 90 -46 159 -123 184 -18 6 -228 51 -467
100 -1966 405 -3263 696 -4138 930 -59 16 -170 45 -247 66 -409 108 -1111 311
-1550 446 -578 179 -1455 478 -1735 592 -1677 682 -3160 1679 -4279 2877 -228
244 -287 312 -472 545 -579 730 -909 1016 -1348 1169 -171 60 -285 79 -426 72
-324 -16 -508 -18 -602 -6 -195 24 -343 75 -386 132 -19 26 -20 33 -9 110 22
166 108 394 382 1013 127 288 169 392 231 575 77 226 121 403 121 485 -1 263
-234 479 -484 451 -76 -9 -98 -17 -258 -92 -512 -238 -1013 -394 -1265 -394
-79 0 -90 8 -82 56 12 76 151 505 284 879 366 1030 489 1425 577 1855 14 69
104 550 201 1070 329 1766 526 2766 695 3525 101 458 334 1278 582 2055 369
1158 800 2246 1209 3056 l56 111 -88 264 c-529 1593 -887 3920 -970 6318 -13
382 -7 1640 10 1926 45 760 93 1230 181 1756 72 428 174 849 270 1116 77 210
218 498 307 623 107 150 193 230 304 284 112 54 239 92 375 111 142 20 524 13
704 -14z m36150 -24102 c1682 -166 3268 -750 4515 -1662 1715 -1255 2760
-3090 3034 -5327 58 -473 75 -808 68 -1338 -5 -409 -13 -534 -52 -832 -82
-629 -267 -1177 -534 -1581 -118 -180 -193 -272 -330 -409 -343 -341 -758
-547 -1266 -626 -138 -21 -469 -29 -640 -15 -867 71 -1550 482 -2040 1225
-383 584 -618 1264 -750 2181 -77 534 -187 913 -380 1310 -411 843 -1118 1460
-2024 1764 -774 261 -1619 265 -2390 12 -600 -197 -1079 -496 -1502 -936 -448
-466 -757 -1086 -885 -1774 -65 -349 -78 -637 -44 -908 62 -478 195 -889 475
-1458 309 -627 653 -1179 1600 -2565 1015 -1486 1469 -2222 1894 -3070 520
-1040 794 -1922 887 -2860 22 -213 25 -748 6 -945 -73 -765 -269 -1411 -646
-2130 -183 -350 -479 -803 -699 -1069 l-24 -30 -94 27 c-52 14 -137 33 -189
43 -52 9 -104 18 -115 20 -12 2 -38 33 -62 72 -155 250 -423 548 -645 716
-135 103 -360 226 -518 284 -576 212 -1232 195 -1802 -45 l-107 -45 -79 71
c-107 98 -298 249 -409 324 -51 34 -92 65 -93 69 0 3 26 21 58 38 136 77 357
227 507 344 458 358 792 779 984 1239 136 327 190 598 198 987 4 214 1 288
-16 460 -134 1294 -597 2512 -1526 4010 -236 382 -336 535 -839 1290 -518 778
-670 1010 -851 1300 -688 1100 -1107 1975 -1386 2890 -59 193 -159 579 -159
614 0 17 7 27 23 31 44 14 627 306 817 410 1271 696 2326 1514 3250 2520 30
33 78 84 106 115 85 93 129 143 165 191 19 25 132 165 252 311 311 380 532
588 749 703 126 66 150 70 351 54 432 -34 799 6 1069 115 358 145 559 355 635
661 26 107 24 346 -5 493 -50 250 -135 494 -322 921 -61 139 -109 255 -107
258 2 2 46 -10 98 -27 545 -178 975 -192 1284 -40 215 105 345 260 407 486 29
105 31 353 5 489 -26 134 -82 331 -143 502 -30 83 -54 155 -54 160 0 10 19 9
290 -18z m-9591 -8766 c230 -922 626 -1856 1218 -2877 294 -506 562 -925 1284
-2006 418 -625 620 -936 825 -1271 840 -1371 1245 -2438 1364 -3593 49 -471 3
-802 -159 -1141 -231 -484 -647 -877 -1307 -1234 -82 -45 -152 -81 -156 -81
-3 0 -16 33 -28 73 -1040 3484 -2548 7513 -4257 11370 -102 230 -182 421 -179
425 16 15 460 151 466 142 5 -9 558 190 800 288 41 16 80 30 86 31 7 1 25 -55
43 -126z"></path>
<path d="M24161 67769 c-316 -37 -614 -227 -788 -503 -145 -229 -280 -689
-352 -1196 -172 -1215 -113 -3101 155 -4990 156 -1103 363 -2016 525 -2320 41
-77 122 -153 206 -193 64 -30 75 -32 179 -32 107 0 112 1 185 37 161 81 255
202 684 883 814 1291 1317 1936 2040 2618 463 437 776 696 1550 1287 398 303
506 393 622 513 122 127 178 226 192 342 19 157 -21 268 -151 417 -428 491
-1192 1111 -2173 1763 -998 662 -2058 1244 -2450 1344 -147 37 -279 47 -424
30z m319 -834 c131 -52 460 -212 670 -327 987 -539 2125 -1303 2855 -1917 155
-131 435 -389 435 -402 0 -5 -132 -109 -415 -324 -770 -587 -1162 -916 -1650
-1384 -757 -726 -1283 -1408 -2133 -2766 -24 -37 -25 -38 -33 -17 -14 38 -116
565 -158 822 -285 1720 -397 3552 -296 4855 45 573 139 1041 266 1316 84 182
240 231 459 144z"></path>
<path d="M54210 67774 c-14 -2 -59 -9 -100 -15 -157 -23 -346 -97 -710 -279
-1270 -633 -2963 -1792 -3745 -2566 -183 -180 -335 -351 -369 -414 -95 -174
-67 -376 76 -557 96 -121 231 -236 688 -583 844 -642 1188 -935 1805 -1535
158 -154 434 -463 624 -700 361 -449 679 -907 1176 -1695 376 -595 468 -721
598 -817 177 -130 443 -102 583 61 281 326 663 2448 788 4381 35 530 41 727
41 1355 0 640 -6 819 -41 1215 -69 788 -222 1382 -434 1689 -154 223 -412 391
-680 442 -77 15 -257 26 -300 18z m229 -829 c29 -16 64 -42 77 -59 81 -95 175
-383 239 -731 211 -1146 142 -3270 -171 -5285 -63 -409 -186 -1065 -202 -1082
-4 -4 -32 32 -61 80 -485 781 -944 1432 -1360 1927 -449 534 -1062 1118 -1761
1679 -239 192 -279 223 -550 430 -403 308 -479 367 -487 379 -11 18 254 264
547 508 915 761 2753 1910 3455 2161 106 38 195 36 274 -7z"></path>
<path d="M32345 56423 c-505 -44 -1020 -269 -1364 -598 -112 -107 -136 -154
-136 -265 0 -73 4 -93 28 -141 32 -66 99 -132 165 -162 35 -16 67 -22 122 -22
71 0 82 3 210 63 635 298 1130 385 1582 276 188 -45 358 -108 503 -186 39 -21
121 -64 182 -95 102 -51 120 -57 190 -61 63 -3 89 0 135 18 168 63 252 270
176 432 -30 65 -48 84 -203 222 -389 347 -884 531 -1410 524 -77 -1 -158 -3
-180 -5z"></path>
<path d="M45874 56415 c-395 -60 -731 -209 -1062 -472 -180 -142 -248 -229
-272 -345 -26 -131 50 -275 180 -341 37 -18 62 -22 136 -22 84 0 95 2 160 36
264 139 398 201 509 238 558 186 1130 124 1754 -189 144 -72 223 -95 296 -85
102 12 209 87 258 179 33 61 32 212 -2 279 -31 63 -129 159 -273 267 -307 232
-649 379 -1038 446 -132 22 -522 28 -646 9z"></path>
<path d="M32153 52279 c-471 -68 -933 -380 -1295 -875 -656 -900 -947 -2298
-757 -3644 117 -827 411 -1572 831 -2103 161 -203 409 -428 603 -547 154 -95
361 -178 537 -217 120 -26 467 -26 588 1 332 72 628 238 904 506 613 594 1004
1552 1108 2710 19 214 16 771 -5 990 -96 981 -394 1805 -873 2410 -90 113
-307 329 -418 415 -237 183 -511 306 -781 350 -98 16 -341 18 -442 4z m1082
-1664 c264 -69 465 -352 540 -762 20 -107 27 -366 14 -488 -50 -449 -265 -854
-540 -1018 -96 -57 -177 -79 -284 -79 -140 0 -247 45 -359 151 -318 303 -413
930 -226 1494 166 497 521 789 855 702z"></path>
<path d="M46083 52279 c-635 -97 -1212 -598 -1609 -1399 -668 -1347 -665
-3266 6 -4611 384 -769 910 -1242 1530 -1376 122 -26 459 -26 580 1 361 79
668 260 972 574 221 229 391 478 558 817 107 218 147 314 221 535 523 1550
294 3464 -551 4602 -339 457 -743 741 -1200 843 -89 20 -411 29 -507 14z
m-418 -1664 c117 -30 201 -81 311 -190 112 -111 162 -183 233 -330 204 -422
226 -964 56 -1367 -110 -261 -295 -429 -506 -459 -241 -35 -497 130 -675 433
-215 366 -279 898 -158 1317 109 374 344 607 614 610 36 1 93 -6 125 -14z"></path>
<path d="M39147 46745 c-1 -1 -74 -5 -162 -9 -88 -4 -180 -9 -205 -12 -511
-56 -788 -126 -987 -250 -77 -48 -112 -84 -145 -147 -18 -35 -20 -53 -15 -127
11 -193 139 -425 367 -663 303 -318 627 -505 1001 -579 l115 -23 -13 -80 c-50
-306 -177 -626 -328 -826 -84 -112 -216 -236 -318 -299 -93 -57 -248 -120
-387 -157 -134 -36 -325 -37 -455 -4 -109 27 -284 110 -382 179 -157 112 -340
309 -467 503 -98 150 -123 178 -171 200 -95 44 -216 4 -256 -85 -43 -95 -12
-220 120 -491 100 -204 174 -308 338 -473 l131 -133 22 -107 c103 -515 258
-1027 395 -1307 120 -247 256 -437 446 -626 560 -554 1389 -774 2164 -574 643
165 1164 590 1460 1190 130 264 287 777 391 1281 l37 181 101 105 c159 165
282 349 370 558 62 145 96 255 96 307 0 139 -156 233 -287 173 -36 -16 -54
-37 -119 -137 -291 -449 -620 -705 -977 -759 -165 -25 -307 -8 -507 61 -325
113 -545 314 -709 648 -90 182 -172 451 -197 644 -6 51 -6 52 22 58 89 20 264
82 361 129 499 241 962 786 963 1134 0 118 -72 204 -245 290 -257 129 -699
208 -1210 218 -137 2 -274 6 -303 8 -28 1 -53 2 -55 1z m438 -270 c167 -30
267 -70 326 -131 29 -30 34 -42 34 -84 0 -35 -5 -54 -19 -67 -10 -10 -15 -12
-11 -4 6 10 4 12 -4 7 -6 -4 -9 -11 -6 -15 9 -15 -111 -105 -127 -95 -4 3 -8
0 -8 -5 0 -14 -69 -43 -83 -34 -5 3 -7 2 -4 -3 8 -14 -156 -73 -249 -89 -83
-15 -206 -20 -217 -9 -4 4 -21 8 -39 9 -96 7 -273 68 -373 128 -137 82 -169
118 -163 184 2 25 8 37 16 35 8 -1 11 2 7 8 -9 14 13 50 31 50 9 0 12 -5 8
-12 -4 -7 -3 -8 4 -4 6 4 9 13 5 21 -4 11 13 23 60 45 35 16 75 30 88 32 13 2
29 6 34 10 11 6 177 36 240 42 83 8 364 -3 450 -19z m79 -4151 c283 -40 592
-164 819 -330 l48 -35 -23 -32 c-12 -18 -56 -66 -98 -108 -221 -223 -534 -372
-863 -408 -375 -42 -764 63 -1054 285 -40 31 -116 101 -169 157 -77 81 -93
102 -82 113 31 30 192 129 288 178 339 174 730 236 1134 180z"></path>
<path d="M39896 46318 c3 -5 10 -6 15 -3 13 9 11 12 -6 12 -8 0 -12 -4 -9 -9z"></path>
<path d="M38695 46210 c-4 -6 -11 -7 -17 -4 -7 4 -8 2 -4 -5 6 -9 11 -9 22 0
14 11 18 19 10 19 -3 0 -8 -5 -11 -10z"></path>
<path d="M63965 62759 c-1045 -42 -2046 -442 -2827 -1128 -144 -126 -381 -367
-489 -496 -630 -751 -1007 -1674 -1076 -2633 -15 -210 -7 -632 16 -831 111
-949 472 -1782 1076 -2486 l77 -89 -6 -76 c-3 -41 -8 -111 -11 -155 -19 -287
-88 -1351 -100 -1550 -8 -132 -17 -262 -19 -290 -3 -27 -8 -108 -12 -178 l-7
-128 54 24 c30 14 221 103 424 200 502 237 1404 662 1599 754 98 46 167 73
180 70 12 -3 82 -21 156 -41 255 -68 516 -112 815 -137 180 -15 664 -6 840 15
554 68 1046 211 1511 440 214 105 299 153 499 284 1161 759 1917 2000 2059
3382 106 1025 -151 2092 -711 2950 -551 844 -1347 1480 -2281 1824 -563 207
-1158 300 -1767 275z m443 -724 c364 -18 791 -114 1177 -266 160 -62 490 -232
639 -327 430 -276 799 -627 1095 -1041 354 -494 594 -1110 676 -1731 48 -369
40 -771 -25 -1152 -110 -642 -387 -1253 -806 -1778 -204 -255 -523 -553 -796
-743 -539 -376 -1155 -605 -1823 -679 -155 -17 -643 -17 -790 0 -278 32 -553
93 -824 181 l-155 50 -689 -325 c-379 -179 -692 -323 -695 -320 -3 3 11 268
32 588 20 321 39 619 42 663 2 44 7 108 10 143 l6 63 -109 115 c-301 321 -494
594 -675 950 -134 264 -233 529 -303 815 -381 1553 216 3154 1527 4093 578
414 1330 675 2028 703 85 3 157 7 158 9 4 3 71 0 300 -11z"></path>
<path d="M63226 59584 c-266 -59 -496 -254 -607 -515 -130 -306 -94 -642 99
-919 67 -97 1301 -1330 1366 -1367 66 -36 160 -39 221 -6 49 26 1348 1327
1395 1396 50 76 106 204 131 302 32 126 32 313 1 440 -47 191 -171 389 -317
504 -146 117 -290 170 -483 178 -191 9 -328 -20 -495 -103 -108 -54 -181 -106
-269 -192 l-67 -65 -74 70 c-93 88 -174 143 -292 199 -140 67 -224 86 -395 90
-106 3 -164 -1 -214 -12z"></path>
</g>
</svg>

    </div>
  
<style>
/* From Uiverse.io by saidbl1 - Tags: card, hover, scale */
.frame {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 230px;
  height: 300px;
  background-color: #f2b67b;
  border-radius: 5px;
}

.frame svg {
  border: 2px solid black;
  max-width: 100%;
  max-height: 100%;
  border-radius: 3px;
  scale: 0.87;
  transition: transform 0.3s;
  transition-timing-function: cubic-bezier(0.4, 1.55, 0.74, 0.55);
}

.frame:hover svg {
  transform: scale(1.11);
}
</style>


================================================
FILE: Cards/saidbl1_wet-warthog-77.html
================================================
<div class="frame">
      <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 8334.000000 8334.000000" height="8334.000000pt" width="8334.000000pt" xmlns="http://www.w3.org/2000/svg" version="1.0">

<g stroke="none" fill="#000000" transform="translate(0.000000,8334.000000) scale(0.100000,-0.100000)">
<path d="M23445 69854 c-518 -53 -853 -176 -1145 -419 -119 -99 -289 -301
-394 -468 -274 -437 -515 -1178 -655 -2013 -98 -580 -149 -1091 -192 -1889
-29 -550 -21 -1607 16 -2350 112 -2194 472 -4483 936 -5947 l50 -158 -30 -58
c-146 -290 -463 -1043 -663 -1577 -336 -899 -741 -2195 -967 -3100 -135 -542
-408 -1891 -666 -3290 -291 -1585 -320 -1733 -384 -1985 -92 -361 -182 -638
-441 -1365 -314 -882 -360 -1044 -360 -1285 0 -130 31 -254 95 -385 129 -264
348 -403 687 -437 238 -24 569 28 941 149 60 19 110 33 112 31 2 -2 -48 -120
-112 -263 -197 -445 -288 -693 -335 -905 -19 -88 -22 -134 -22 -285 0 -166 2
-187 27 -268 48 -157 112 -261 228 -373 86 -82 162 -135 274 -191 281 -142
686 -211 1060 -181 88 7 205 13 260 13 99 0 101 0 195 -47 146 -73 340 -227
507 -402 49 -50 194 -222 323 -381 292 -359 446 -531 765 -854 1308 -1325
2673 -2206 4630 -2986 391 -156 777 -297 800 -291 14 4 580 -166 592 -177 1
-2 -43 -104 -98 -227 -1659 -3723 -3190 -7772 -4209 -11130 -51 -168 -95 -308
-99 -312 -3 -4 -62 -14 -131 -23 -659 -86 -1292 -320 -1830 -678 -41 -28 -134
-94 -207 -149 l-131 -99 -214 -3 c-563 -9 -1022 -165 -1406 -478 -187 -152
-413 -408 -564 -639 -64 -97 -75 -109 -101 -109 -98 0 -388 -83 -550 -158
-362 -168 -684 -465 -926 -854 -259 -415 -415 -899 -487 -1508 -21 -182 -30
-749 -15 -991 98 -1567 662 -3343 1457 -4591 283 -445 568 -803 909 -1143 436
-436 875 -752 1390 -1001 500 -241 1170 -411 1870 -474 220 -20 604 -28 861
-19 732 26 1192 107 2619 463 1081 269 1462 347 2145 440 1140 156 2262 244
3805 301 886 32 2311 45 5070 46 2433 0 4771 -13 5505 -31 1940 -47 3307 -145
4665 -336 643 -90 960 -156 2040 -424 1256 -312 1664 -395 2183 -445 398 -38
988 -45 1317 -15 895 80 1643 299 2246 658 834 496 1545 1246 2120 2239 378
652 737 1516 930 2238 194 728 313 1368 361 1945 14 174 17 764 5 940 -39 551
-186 1112 -403 1541 -108 214 -240 397 -423 591 l-91 96 110 147 c489 651 888
1422 1116 2155 181 581 267 1157 266 1785 -1 1361 -433 2758 -1370 4425 -364
649 -786 1308 -1613 2520 -622 911 -865 1282 -1114 1700 -466 782 -707 1357
-781 1860 -24 164 -15 442 19 641 108 614 339 1085 732 1488 217 223 438 382
730 526 450 222 892 316 1415 302 1064 -28 1971 -591 2430 -1508 168 -333 252
-626 321 -1107 90 -638 231 -1179 434 -1667 566 -1358 1552 -2179 2840 -2364
763 -110 1503 12 2095 344 245 137 443 288 656 500 624 620 1002 1515 1128
2668 51 463 55 1140 11 1677 -72 857 -223 1604 -475 2345 -609 1786 -1760
3252 -3370 4292 -1280 827 -2835 1357 -4465 1523 -169 17 -591 50 -647 50 -13
0 -34 53 -97 243 -177 538 -246 815 -356 1422 -201 1110 -396 2133 -610 3200
-187 934 -244 1189 -370 1651 -470 1718 -969 3131 -1519 4298 l-56 119 51 156
c458 1413 815 3715 929 5991 19 385 25 736 24 1435 0 696 -7 918 -45 1445
-118 1679 -412 2790 -919 3482 -108 147 -303 341 -420 418 -234 153 -525 253
-865 296 -144 18 -473 24 -650 11 -545 -39 -1240 -211 -1970 -487 -1757 -664
-3938 -1979 -5197 -3132 l-106 -98 -204 74 c-1005 363 -2148 649 -3418 855
-1666 271 -3739 453 -4793 420 -297 -9 -662 -25 -752 -34 -27 -2 -95 -7 -150
-10 -55 -4 -242 -17 -415 -31 -2493 -194 -4694 -609 -6298 -1190 -197 -72
-236 -83 -250 -72 -10 7 -57 49 -107 94 -856 770 -2001 1562 -3170 2193 -216
117 -821 417 -1030 511 -1110 500 -2013 788 -2774 886 -188 24 -563 40 -676
28z m635 -913 c352 -52 670 -131 1085 -268 602 -199 1112 -415 1835 -779 1551
-781 2805 -1647 3849 -2661 l165 -159 240 97 c1066 429 2243 743 3669 979 809
133 1954 270 2812 335 182 14 359 27 395 30 330 25 800 46 1115 48 246 2 725
-9 790 -18 17 -2 93 -7 170 -10 371 -15 1179 -80 1735 -140 2328 -252 4171
-666 5594 -1260 l158 -66 217 213 c811 798 1866 1554 3218 2306 1651 919 3069
1403 4009 1369 384 -14 573 -76 735 -240 431 -436 763 -1675 869 -3247 50
-750 58 -1730 20 -2557 -109 -2376 -494 -4785 -987 -6169 l-64 -182 87 -178
c623 -1281 1132 -2695 1624 -4514 125 -462 305 -1296 504 -2335 69 -363 84
-440 231 -1235 213 -1146 302 -1599 366 -1855 99 -396 237 -822 502 -1555 183
-505 226 -635 262 -784 36 -147 36 -146 -29 -146 -132 0 -339 37 -536 97 -167
50 -522 193 -771 309 -100 46 -156 66 -206 74 -190 27 -378 -70 -466 -238 -72
-139 -74 -244 -9 -467 95 -325 174 -528 427 -1095 88 -197 199 -473 228 -565
34 -106 46 -229 27 -265 -26 -48 -165 -100 -342 -126 -113 -16 -291 -16 -648
2 -135 7 -252 -13 -421 -72 -279 -97 -520 -257 -794 -529 -171 -169 -261 -272
-528 -604 -121 -151 -267 -326 -325 -390 -543 -597 -1182 -1170 -1828 -1641
-105 -76 -500 -337 -664 -437 -591 -364 -1402 -768 -2080 -1036 -235 -93
-1090 -383 -1470 -498 -91 -28 -214 -66 -275 -84 -226 -69 -1099 -316 -1340
-380 -544 -143 -1328 -333 -2125 -514 -392 -89 -566 -127 -2044 -452 -707
-155 -773 -171 -805 -197 -57 -46 -76 -87 -76 -164 0 -57 4 -72 30 -110 18
-25 49 -52 75 -65 54 -28 88 -28 410 -8 1136 72 2526 258 3670 490 511 104
1248 278 1695 400 407 112 395 109 401 102 8 -8 179 -391 396 -887 105 -239
203 -462 218 -495 15 -33 93 -213 173 -400 1190 -2787 2247 -5573 3075 -8110
224 -687 518 -1623 510 -1629 -1 -2 -64 7 -138 20 -418 72 -946 73 -1370 4
-814 -133 -1567 -494 -2225 -1067 -205 -178 -375 -356 -554 -580 -41 -51 -75
-93 -76 -93 -2 0 33 78 77 173 382 822 580 1578 639 2431 13 192 8 224 -44
283 -81 92 -216 95 -299 7 -27 -29 -115 -244 -258 -634 -98 -268 -173 -459
-303 -775 -291 -705 -507 -1122 -852 -1645 -877 -1328 -2002 -2158 -3386
-2499 -186 -46 -497 -106 -505 -98 -2 2 34 36 81 76 104 90 329 321 349 359
52 101 10 219 -97 274 -60 30 -143 22 -200 -20 -492 -364 -1014 -570 -1488
-589 l-135 -6 -120 48 c-281 111 -467 231 -764 494 -47 41 -89 78 -93 81 -4 4
34 22 85 40 493 171 994 496 1501 972 148 139 171 175 165 257 -6 76 -43 132
-111 166 -89 44 -134 33 -282 -72 -232 -164 -594 -360 -858 -467 -354 -143
-636 -207 -917 -210 l-145 -1 -47 93 c-164 330 -194 688 -89 1063 136 483 447
966 1187 1844 1124 1335 1534 1860 1969 2519 387 586 673 1120 885 1651 236
591 375 1145 435 1739 28 271 17 335 -69 422 -62 62 -121 84 -222 84 -137 0
-242 -81 -278 -214 -8 -28 -33 -132 -56 -231 -114 -486 -290 -1009 -505 -1500
-137 -313 -416 -834 -628 -1175 -404 -649 -793 -1152 -1807 -2340 -769 -900
-957 -1135 -1195 -1494 -733 -1106 -829 -2049 -298 -2938 228 -383 652 -854
1023 -1140 484 -372 1019 -586 1660 -665 206 -25 774 -25 1015 1 955 101 1820
423 2666 991 338 228 612 452 928 760 303 296 630 682 860 1017 30 43 55 78
57 78 2 0 -8 -26 -22 -57 -104 -234 -244 -668 -244 -754 1 -46 32 -113 71
-149 44 -39 115 -56 177 -40 82 20 104 46 192 219 176 348 380 655 637 959
714 841 1695 1412 2668 1551 550 79 1080 29 1590 -150 216 -76 223 -81 115
-94 -157 -18 -398 -82 -582 -156 -547 -218 -1092 -688 -1471 -1270 -492 -756
-784 -1733 -866 -2904 -18 -255 -25 -596 -12 -642 40 -146 238 -194 338 -80
40 46 44 57 118 357 267 1074 492 1744 778 2315 431 864 984 1386 1653 1559
392 102 840 19 1261 -232 153 -92 182 -103 274 -109 143 -10 252 33 382 153
147 137 272 210 466 274 374 124 844 94 1180 -75 262 -131 531 -417 733 -779
122 -218 251 -295 493 -296 90 0 228 -29 331 -69 416 -161 759 -622 904 -1215
95 -385 135 -864 111 -1313 -7 -123 -14 -233 -16 -245 -2 -13 -6 -54 -10 -93
-56 -636 -270 -1561 -522 -2260 -629 -1744 -1607 -2967 -2816 -3521 -374 -172
-899 -302 -1442 -359 -224 -24 -571 -33 -835 -24 -610 22 -1214 121 -1920 314
-601 165 -1068 275 -1665 391 -1497 290 -3195 457 -5235 514 -201 5 -439 12
-530 15 -257 9 -2966 24 -4255 25 -1618 0 -4993 -18 -5510 -29 -1466 -34
-2491 -91 -3575 -201 -1433 -146 -2773 -392 -3972 -730 -583 -165 -1214 -274
-1788 -311 -230 -15 -747 -6 -959 16 -671 68 -1313 256 -1748 510 -812 476
-1488 1220 -2026 2230 -495 930 -878 2181 -1006 3290 -38 326 -45 459 -45 780
0 446 35 738 125 1057 71 251 180 489 307 668 136 193 382 408 552 483 133 59
218 78 380 87 161 9 208 20 286 65 56 33 142 128 184 204 64 116 207 325 289
423 177 211 388 368 587 436 187 64 371 94 579 93 381 0 702 -118 947 -348
125 -117 212 -156 346 -155 104 2 159 21 294 101 333 199 620 280 953 268 277
-10 521 -83 781 -233 413 -238 822 -672 1117 -1187 328 -572 632 -1439 852
-2427 25 -113 54 -247 66 -298 23 -105 46 -139 112 -171 99 -48 233 -1 273 96
40 94 -19 868 -107 1403 -265 1615 -928 2751 -1942 3328 -235 134 -524 231
-827 279 -159 25 -518 25 -678 -1 -150 -23 -321 -66 -464 -115 -121 -42 -298
-117 -356 -152 -19 -10 -39 -16 -45 -12 -7 4 -34 23 -60 42 l-49 34 39 24 c74
45 289 152 408 201 270 113 536 184 850 229 181 25 633 25 820 0 765 -105
1461 -425 2130 -978 140 -116 512 -490 635 -639 250 -301 457 -607 644 -952
67 -123 103 -155 183 -165 122 -14 232 74 233 188 0 77 -105 452 -184 652 -19
48 -33 87 -32 87 1 0 24 -32 51 -71 399 -567 997 -1177 1540 -1570 731 -530
1508 -881 2318 -1048 348 -72 604 -101 963 -108 606 -13 1126 78 1594 279 302
129 525 274 810 524 730 643 1113 1249 1205 1909 21 148 16 487 -10 635 -106
623 -445 1260 -1115 2100 -176 220 -381 463 -804 950 -524 602 -756 883 -1030
1249 -956 1274 -1526 2437 -1810 3691 -49 215 -69 266 -128 316 -56 46 -113
66 -193 66 -122 0 -222 -59 -272 -160 -26 -52 -28 -66 -27 -162 2 -169 44
-491 100 -765 277 -1360 1016 -2714 2355 -4315 273 -327 470 -561 614 -730
496 -581 745 -899 970 -1240 284 -428 433 -742 492 -1035 24 -124 25 -405 0
-528 -25 -122 -69 -254 -129 -379 l-51 -108 -56 0 c-90 0 -296 28 -431 59
-437 101 -886 312 -1376 646 -109 75 -158 88 -229 61 -61 -24 -90 -49 -114
-99 -26 -53 -27 -119 -2 -172 42 -92 480 -472 792 -688 227 -157 532 -322 771
-416 l107 -43 -63 -58 c-305 -286 -518 -427 -821 -546 l-120 -47 -93 7 c-129
9 -337 49 -478 91 -328 99 -625 252 -947 487 -56 41 -61 43 -131 43 -82 0
-124 -21 -167 -83 -32 -47 -39 -144 -13 -198 20 -43 290 -319 394 -404 l65
-53 -65 7 c-423 47 -1008 214 -1479 423 -830 367 -1593 997 -2212 1825 -422
566 -774 1195 -1054 1883 -29 71 -84 207 -123 300 -38 94 -131 334 -207 535
-193 515 -244 645 -268 681 -44 65 -140 93 -224 65 -95 -32 -145 -116 -137
-232 39 -581 99 -948 229 -1420 104 -375 205 -647 419 -1129 l27 -60 -28 31
c-16 17 -64 73 -108 125 -480 564 -1241 1067 -1995 1319 -283 94 -534 149
-897 196 l-42 5 16 52 c47 162 343 1096 467 1477 741 2273 1676 4774 2709
7250 225 540 473 1123 541 1273 14 31 38 83 52 115 14 31 30 66 34 77 35 89
520 1187 529 1197 3 4 98 -18 211 -48 1673 -447 3480 -759 5265 -908 561 -47
575 -47 637 18 42 42 58 85 58 151 0 90 -46 159 -123 184 -18 6 -228 51 -467
100 -1966 405 -3263 696 -4138 930 -59 16 -170 45 -247 66 -409 108 -1111 311
-1550 446 -578 179 -1455 478 -1735 592 -1677 682 -3160 1679 -4279 2877 -228
244 -287 312 -472 545 -579 730 -909 1016 -1348 1169 -171 60 -285 79 -426 72
-324 -16 -508 -18 -602 -6 -195 24 -343 75 -386 132 -19 26 -20 33 -9 110 22
166 108 394 382 1013 127 288 169 392 231 575 77 226 121 403 121 485 -1 263
-234 479 -484 451 -76 -9 -98 -17 -258 -92 -512 -238 -1013 -394 -1265 -394
-79 0 -90 8 -82 56 12 76 151 505 284 879 366 1030 489 1425 577 1855 14 69
104 550 201 1070 329 1766 526 2766 695 3525 101 458 334 1278 582 2055 369
1158 800 2246 1209 3056 l56 111 -88 264 c-529 1593 -887 3920 -970 6318 -13
382 -7 1640 10 1926 45 760 93 1230 181 1756 72 428 174 849 270 1116 77 210
218 498 307 623 107 150 193 230 304 284 112 54 239 92 375 111 142 20 524 13
704 -14z m36150 -24102 c1682 -166 3268 -750 4515 -1662 1715 -1255 2760
-3090 3034 -5327 58 -473 75 -808 68 -1338 -5 -409 -13 -534 -52 -832 -82
-629 -267 -1177 -534 -1581 -118 -180 -193 -272 -330 -409 -343 -341 -758
-547 -1266 -626 -138 -21 -469 -29 -640 -15 -867 71 -1550 482 -2040 1225
-383 584 -618 1264 -750 2181 -77 534 -187 913 -380 1310 -411 843 -1118 1460
-2024 1764 -774 261 -1619 265 -2390 12 -600 -197 -1079 -496 -1502 -936 -448
-466 -757 -1086 -885 -1774 -65 -349 -78 -637 -44 -908 62 -478 195 -889 475
-1458 309 -627 653 -1179 1600 -2565 1015 -1486 1469 -2222 1894 -3070 520
-1040 794 -1922 887 -2860 22 -213 25 -748 6 -945 -73 -765 -269 -1411 -646
-2130 -183 -350 -479 -803 -699 -1069 l-24 -30 -94 27 c-52 14 -137 33 -189
43 -52 9 -104 18 -115 20 -12 2 -38 33 -62 72 -155 250 -423 548 -645 716
-135 103 -360 226 -518 284 -576 212 -1232 195 -1802 -45 l-107 -45 -79 71
c-107 98 -298 249 -409 324 -51 34 -92 65 -93 69 0 3 26 21 58 38 136 77 357
227 507 344 458 358 792 779 984 1239 136 327 190 598 198 987 4 214 1 288
-16 460 -134 1294 -597 2512 -1526 4010 -236 382 -336 535 -839 1290 -518 778
-670 1010 -851 1300 -688 1100 -1107 1975 -1386 2890 -59 193 -159 579 -159
614 0 17 7 27 23 31 44 14 627 306 817 410 1271 696 2326 1514 3250 2520 30
33 78 84 106 115 85 93 129 143 165 191 19 25 132 165 252 311 311 380 532
588 749 703 126 66 150 70 351 54 432 -34 799 6 1069 115 358 145 559 355 635
661 26 107 24 346 -5 493 -50 250 -135 494 -322 921 -61 139 -109 255 -107
258 2 2 46 -10 98 -27 545 -178 975 -192 1284 -40 215 105 345 260 407 486 29
105 31 353 5 489 -26 134 -82 331 -143 502 -30 83 -54 155 -54 160 0 10 19 9
290 -18z m-9591 -8766 c230 -922 626 -1856 1218 -2877 294 -506 562 -925 1284
-2006 418 -625 620 -936 825 -1271 840 -1371 1245 -2438 1364 -3593 49 -471 3
-802 -159 -1141 -231 -484 -647 -877 -1307 -1234 -82 -45 -152 -81 -156 -81
-3 0 -16 33 -28 73 -1040 3484 -2548 7513 -4257 11370 -102 230 -182 421 -179
425 16 15 460 151 466 142 5 -9 558 190 800 288 41 16 80 30 86 31 7 1 25 -55
43 -126z"></path>
<path d="M24161 67769 c-316 -37 -614 -227 -788 -503 -145 -229 -280 -689
-352 -1196 -172 -1215 -113 -3101 155 -4990 156 -1103 363 -2016 525 -2320 41
-77 122 -153 206 -193 64 -30 75 -32 179 -32 107 0 112 1 185 37 161 81 255
202 684 883 814 1291 1317 1936 2040 2618 463 437 776 696 1550 1287 398 303
506 393 622 513 122 127 178 226 192 342 19 157 -21 268 -151 417 -428 491
-1192 1111 -2173 1763 -998 662 -2058 1244 -2450 1344 -147 37 -279 47 -424
30z m319 -834 c131 -52 460 -212 670 -327 987 -539 2125 -1303 2855 -1917 155
-131 435 -389 435 -402 0 -5 -132 -109 -415 -324 -770 -587 -1162 -916 -1650
-1384 -757 -726 -1283 -1408 -2133 -2766 -24 -37 -25 -38 -33 -17 -14 38 -116
565 -158 822 -285 1720 -397 3552 -296 4855 45 573 139 1041 266 1316 84 182
240 231 459 144z"></path>
<path d="M54210 67774 c-14 -2 -59 -9 -100 -15 -157 -23 -346 -97 -710 -279
-1270 -633 -2963 -1792 -3745 -2566 -183 -180 -335 -351 -369 -414 -95 -174
-67 -376 76 -557 96 -121 231 -236 688 -583 844 -642 1188 -935 1805 -1535
158 -154 434 -463 624 -700 361 -449 679 -907 1176 -1695 376 -595 468 -721
598 -817 177 -130 443 -102 583 61 281 326 663 2448 788 4381 35 530 41 727
41 1355 0 640 -6 819 -41 1215 -69 788 -222 1382 -434 1689 -154 223 -412 391
-680 442 -77 15 -257 26 -300 18z m229 -829 c29 -16 64 -42 77 -59 81 -95 175
-383 239 -731 211 -1146 142 -3270 -171 -5285 -63 -409 -186 -1065 -202 -1082
-4 -4 -32 32 -61 80 -485 781 -944 1432 -1360 1927 -449 534 -1062 1118 -1761
1679 -239 192 -279 223 -550 430 -403 308 -479 367 -487 379 -11 18 254 264
547 508 915 761 2753 1910 3455 2161 106 38 195 36 274 -7z"></path>
<path d="M32345 56423 c-505 -44 -1020 -269 -1364 -598 -112 -107 -136 -154
-136 -265 0 -73 4 -93 28 -141 32 -66 99 -132 165 -162 35 -16 67 -22 122 -22
71 0 82 3 210 63 635 298 1130 385 1582 276 188 -45 358 -108 503 -186 39 -21
121 -64 182 -95 102 -51 120 -57 190 -61 63 -3 89 0 135 18 168 63 252 270
176 432 -30 65 -48 84 -203 222 -389 347 -884 531 -1410 524 -77 -1 -158 -3
-180 -5z"></path>
<path d="M45874 56415 c-395 -60 -731 -209 -1062 -472 -180 -142 -248 -229
-272 -345 -26 -131 50 -275 180 -341 37 -18 62 -22 136 -22 84 0 95 2 160 36
264 139 398 201 509 238 558 186 1130 124 1754 -189 144 -72 223 -95 296 -85
102 12 209 87 258 179 33 61 32 212 -2 279 -31 63 -129 159 -273 267 -307 232
-649 379 -1038 446 -132 22 -522 28 -646 9z"></path>
<path d="M32153 52279 c-471 -68 -933 -380 -1295 -875 -656 -900 -947 -2298
-757 -3644 117 -827 411 -1572 831 -2103 161 -203 409 -428 603 -547 154 -95
361 -178 537 -217 120 -26 467 -26 588 1 332 72 628 238 904 506 613 594 1004
1552 1108 2710 19 214 16 771 -5 990 -96 981 -394 1805 -873 2410 -90 113
-307 329 -418 415 -237 183 -511 306 -781 350 -98 16 -341 18 -442 4z m1082
-1664 c264 -69 465 -352 540 -762 20 -107 27 -366 14 -488 -50 -449 -265 -854
-540 -1018 -96 -57 -177 -79 -284 -79 -140 0 -247 45 -359 151 -318 303 -413
930 -226 1494 166 497 521 789 855 702z"></path>
<path d="M46083 52279 c-635 -97 -1212 -598 -1609 -1399 -668 -1347 -665
-3266 6 -4611 384 -769 910 -1242 1530 -1376 122 -26 459 -26 580 1 361 79
668 260 972 574 221 229 391 478 558 817 107 218 147 314 221 535 523 1550
294 3464 -551 4602 -339 457 -743 741 -1200 843 -89 20 -411 29 -507 14z
m-418 -1664 c117 -30 201 -81 311 -190 112 -111 162 -183 233 -330 204 -422
226 -964 56 -1367 -110 -261 -295 -429 -506 -459 -241 -35 -497 130 -675 433
-215 366 -279 898 -158 1317 109 374 344 607 614 610 36 1 93 -6 125 -14z"></path>
<path d="M39147 46745 c-1 -1 -74 -5 -162 -9 -88 -4 -180 -9 -205 -12 -511
-56 -788 -126 -987 -250 -77 -48 -112 -84 -145 -147 -18 -35 -20 -53 -15 -127
11 -193 139 -425 367 -663 303 -318 627 -505 1001 -579 l115 -23 -13 -80 c-50
-306 -177 -626 -328 -826 -84 -112 -216 -236 -318 -299 -93 -57 -248 -120
-387 -157 -134 -36 -325 -37 -455 -4 -109 27 -284 110 -382 179 -157 112 -340
309 -467 503 -98 150 -123 178 -171 200 -95 44 -216 4 -256 -85 -43 -95 -12
-220 120 -491 100 -204 174 -308 338 -473 l131 -133 22 -107 c103 -515 258
-1027 395 -1307 120 -247 256 -437 446 -626 560 -554 1389 -774 2164 -574 643
165 1164 590 1460 1190 130 264 287 777 391 1281 l37 181 101 105 c159 165
282 349 370 558 62 145 96 255 96 307 0 139 -156 233 -287 173 -36 -16 -54
-37 -119 -137 -291 -449 -620 -705 -977 -759 -165 -25 -307 -8 -507 61 -325
113 -545 314 -709 648 -90 182 -172 451 -197 644 -6 51 -6 52 22 58 89 20 264
82 361 129 499 241 962 786 963 1134 0 118 -72 204 -245 290 -257 129 -699
208 -1210 218 -137 2 -274 6 -303 8 -28 1 -53 2 -55 1z m438 -270 c167 -30
267 -70 326 -131 29 -30 34 -42 34 -84 0 -35 -5 -54 -19 -67 -10 -10 -15 -12
-11 -4 6 10 4 12 -4 7 -6 -4 -9 -11 -6 -15 9 -15 -111 -105 -127 -95 -4 3 -8
0 -8 -5 0 -14 -69 -43 -83 -34 -5 3 -7 2 -4 -3 8 -14 -156 -73 -249 -89 -83
-15 -206 -20 -217 -9 -4 4 -21 8 -39 9 -96 7 -273 68 -373 128 -137 82 -169
118 -163 184 2 25 8 37 16 35 8 -1 11 2 7 8 -9 14 13 50 31 50 9 0 12 -5 8
-12 -4 -7 -3 -8 4 -4 6 4 9 13 5 21 -4 11 13 23 60 45 35 16 75 30 88 32 13 2
29 6 34 10 11 6 177 36 240 42 83 8 364 -3 450 -19z m79 -4151 c283 -40 592
-164 819 -330 l48 -35 -23 -32 c-12 -18 -56 -66 -98 -108 -221 -223 -534 -372
-863 -408 -375 -42 -764 63 -1054 285 -40 31 -116 101 -169 157 -77 81 -93
102 -82 113 31 30 192 129 288 178 339 174 730 236 1134 180z"></path>
<path d="M39896 46318 c3 -5 10 -6 15 -3 13 9 11 12 -6 12 -8 0 -12 -4 -9 -9z"></path>
<path d="M38695 46210 c-4 -6 -11 -7 -17 -4 -7 4 -8 2 -4 -5 6 -9 11 -9 22 0
14 11 18 19 10 19 -3 0 -8 -5 -11 -10z"></path>
<path d="M63965 62759 c-1045 -42 -2046 -442 -2827 -1128 -144 -126 -381 -367
-489 -496 -630 -751 -1007 -1674 -1076 -2633 -15 -210 -7 -632 16 -831 111
-949 472 -1782 1076 -2486 l77 -89 -6 -76 c-3 -41 -8 -111 -11 -155 -19 -287
-88 -1351 -100 -1550 -8 -132 -17 -262 -19 -290 -3 -27 -8 -108 -12 -178 l-7
-128 54 24 c30 14 221 103 424 200 502 237 1404 662 1599 754 98 46 167 73
180 70 12 -3 82 -21 156 -41 255 -68 516 -112 815 -137 180 -15 664 -6 840 15
554 68 1046 211 1511 440 214 105 299 153 499 284 1161 759 1917 2000 2059
3382 106 1025 -151 2092 -711 2950 -551 844 -1347 1480 -2281 1824 -563 207
-1158 300 -1767 275z m443 -724 c364 -18 791 -114 1177 -266 160 -62 490 -232
639 -327 430 -276 799 -627 1095 -1041 354 -494 594 -1110 676 -1731 48 -369
40 -771 -25 -1152 -110 -642 -387 -1253 -806 -1778 -204 -255 -523 -553 -796
-743 -539 -376 -1155 -605 -1823 -679 -155 -17 -643 -17 -790 0 -278 32 -553
93 -824 181 l-155 50 -689 -325 c-379 -179 -692 -323 -695 -320 -3 3 11 268
32 588 20 321 39 619 42 663 2 44 7 108 10 143 l6 63 -109 115 c-301 321 -494
594 -675 950 -134 264 -233 529 -303 815 -381 1553 216 3154 1527 4093 578
414 1330 675 2028 703 85 3 157 7 158 9 4 3 71 0 300 -11z"></path>
<path d="M63226 59584 c-266 -59 -496 -254 -607 -515 -130 -306 -94 -642 99
-919 67 -97 1301 -1330 1366 -1367 66 -36 160 -39 221 -6 49 26 1348 1327
1395 1396 50 76 106 204 131 302 32 126 32 313 1 440 -47 191 -171 389 -317
504 -146 117 -290 170 -483 178 -191 9 -328 -20 -495 -103 -108 -54 -181 -106
-269 -192 l-67 -65 -74 70 c-93 88 -174 143 -292 199 -140 67 -224 86 -395 90
-106 3 -164 -1 -214 -12z"></path>
</g>
</svg>
      <div class="border"></div>
    </div>
<style>
/* From Uiverse.io by saidbl1 - Tags: card, hover, border, hover effect */
.frame {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 220px;
  aspect-ratio: 3/4;
  background-color: #534d7e;
  border-radius: 12px;
}

.frame svg {
  max-width: 100%;
  max-height: 100%;
  border-radius: 3px;
  scale: 0.87;
  transition: transform 0.3s;
  transition-timing-function: cubic-bezier(0.4, 1.55, 0.74, 0.55);
}

.border {
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 19px solid #a89bff;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  transition-timing-function: cubic-bezier(0.4, 1.55, 0.74, 0.55);
}

.border:hover {
  border: 8px solid #a89bff;
}
</style>


================================================
FILE: Cards/sangmort_tidy-mole-17.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by sangmort - Tags: card */
.card {
  /* Stars */
  --stars-1: -0.2rem 3.96rem var(--color-stars-a),
    -0.12rem -3.32rem var(--color-stars-a),
    -0.12rem 2.41rem var(--color-stars-a),
    -0.13rem -0.33rem var(--color-stars-a),
    -0.13rem 1.12rem var(--color-stars-a), -0.22rem 3.79rem var(--color-stars-a),
    -0.23rem -0.74rem var(--color-stars-a), -0.23rem -2rem var(--color-stars-a),
    -0.26rem -0.72rem var(--color-stars-a),
    -0.29rem -0.94rem var(--color-stars-a),
    -0.39rem 0.13rem var(--color-stars-a),
    -0.33rem -2.43rem var(--color-stars-a), -0.33rem -2rem var(--color-stars-a),
    -0.48rem 0.77rem var(--color-stars-a),
    -0.46rem -0.73rem var(--color-stars-a),
    -0.47rem 1.46rem var(--color-stars-a), -0.61rem -2rem var(--color-stars-a),
    -0.3rem -0.7rem var(--color-stars-a), -0.38rem 0.41rem var(--color-stars-a),
    -0.3rem -4rem var(--color-stars-a), -0.61rem -3rem var(--color-stars-a),
    -0.63rem 2.44rem var(--color-stars-a), -0.63rem 3.44rem var(--color-stars-a),
    -0.72rem -0.69rem var(--color-stars-a),
    -0.82rem 3.13rem var(--color-stars-a), -0.82rem 6.13rem var(--color-stars-a),
    -0.86rem -3.33rem var(--color-stars-a),
    -0.87rem 2.84rem var(--color-stars-a), -0.89rem 1.33rem var(--color-stars-a),
    -0.99rem -2.22rem var(--color-stars-a),
    -0.98rem -0.69rem var(--color-stars-a),
    -0.98rem -1.69rem var(--color-stars-a), -0.9rem 3.38rem var(--color-stars-a),
    -1.11rem 1.83rem var(--color-stars-a),
    -1.13rem -1.73rem var(--color-stars-a), -1.23rem -3rem var(--color-stars-a),
    -1.26rem -1.72rem var(--color-stars-a), -1.33rem -3rem var(--color-stars-a),
    -1.29rem -1.94rem var(--color-stars-a),
    -1.39rem -0.87rem var(--color-stars-a),
    -1.46rem -0.74rem var(--color-stars-a),
    -1.39rem 0.22rem var(--color-stars-a), -1.47rem 0.46rem var(--color-stars-a),
    -1.48rem -0.23rem var(--color-stars-a), -1.3rem -1.7rem var(--color-stars-a),
    -1.36rem -1.11rem var(--color-stars-a),
    -1.37rem 1.71rem var(--color-stars-a),
    -1.38rem -0.39rem var(--color-stars-a),
    -1.39rem 4.32rem var(--color-stars-a), -1.61rem -4rem var(--color-stars-a),
    -1.63rem 1.44rem var(--color-stars-a),
    -1.64rem -0.78rem var(--color-stars-a),
    -1.78rem 3.79rem var(--color-stars-a), -1.82rem 4.13rem var(--color-stars-a),
    -1.86rem -4.33rem var(--color-stars-a),
    -1.87rem 1.84rem var(--color-stars-a), -1.89rem 0.33rem var(--color-stars-a),
    -1.91rem 1.32rem var(--color-stars-a),
    -1.98rem -2.69rem var(--color-stars-a), -1.9rem 2.38rem var(--color-stars-a),
    -1rem -1rem var(--color-stars-a), -1rem 1.71rem var(--color-stars-a),
    -1rem 7rem var(--color-stars-a), -2.11rem 0.83rem var(--color-stars-a),
    -2.13rem -2.73rem var(--color-stars-a),
    -2.11rem 1.83rem var(--color-stars-a),
    -2.13rem -2.33rem var(--color-stars-a),
    -2.13rem -0.88rem var(--color-stars-a),
    -2.22rem 3.79rem var(--color-stars-a),
    -2.23rem -1.74rem var(--color-stars-a),
    -2.23rem -2.74rem var(--color-stars-a),
    -2.29rem -2.94rem var(--color-stars-a), -2.23rem -4rem var(--color-stars-a),
    -2.33rem -4rem var(--color-stars-a), -2.29rem -2.94rem var(--color-stars-a),
    -2.39rem -0.78rem var(--color-stars-a),
    -2.39rem -1.87rem var(--color-stars-a),
    -2.46rem -2.73rem var(--color-stars-a),
    -2.47rem -0.34rem var(--color-stars-a),
    -2.47rem -0.34rem var(--color-stars-a), -2.3rem -2.7rem var(--color-stars-a),
    -2.48rem -0.21rem var(--color-stars-a),
    -2.72rem -2.69rem var(--color-stars-a),
    -2.36rem -1.11rem var(--color-stars-a),
    -2.36rem -2.11rem var(--color-stars-a),
    -2.37rem 0.71rem var(--color-stars-a), -2.39rem 3.32rem var(--color-stars-a),
    -2.61rem -4rem var(--color-stars-a), -2.61rem -3rem var(--color-stars-a),
    -2.63rem 0.44rem var(--color-stars-a), -2.63rem 1.44rem var(--color-stars-a),
    -2.72rem 2.28rem var(--color-stars-a), -2.78rem 2.79rem var(--color-stars-a),
    -2.86rem -3.33rem var(--color-stars-a),
    -2.98rem -2.69rem var(--color-stars-a),
    -2.87rem 0.84rem var(--color-stars-a), -2.91rem 0.32rem var(--color-stars-a),
    -2.94rem 4.33rem var(--color-stars-a), -2rem -2rem var(--color-stars-a),
    -2.98rem -3.69rem var(--color-stars-a), -2rem -0.29rem var(--color-stars-a),
    -2rem -1.17rem var(--color-stars-a), -2rem 0.96rem var(--color-stars-a),
    -2rem 3.97rem var(--color-stars-a), -2rem 6rem var(--color-stars-a),
    -3.2rem 1.96rem var(--color-stars-a), -3.11rem -0.13rem var(--color-stars-a),
    -3.13rem -3.44rem var(--color-stars-a),
    -3.13rem -3.73rem var(--color-stars-a),
    -3.23rem -2.74rem var(--color-stars-a),
    -3.29rem -3.94rem var(--color-stars-a),
    -3.39rem -2.87rem var(--color-stars-a),
    -3.39rem -1.78rem var(--color-stars-a),
    -3.46rem -2.74rem var(--color-stars-a),
    -3.46rem -2.74rem var(--color-stars-a),
    -3.47rem -1.34rem var(--color-stars-a), -3.61rem -6rem var(--color-stars-a),
    -3.48rem -1.21rem var(--color-stars-a),
    -3.36rem -3.11rem var(--color-stars-a),
    -3.39rem 2.32rem var(--color-stars-a),
    -3.71rem -3.46rem var(--color-stars-a),
    -3.63rem -0.36rem var(--color-stars-a),
    -3.72rem -3.69rem var(--color-stars-a),
    -3.91rem -0.68rem var(--color-stars-a),
    -3.86rem -6.33rem var(--color-stars-a),
    -3.91rem -0.68rem var(--color-stars-a),
    -3.94rem 3.33rem var(--color-stars-a),
    -3.98rem -4.69rem var(--color-stars-a), -3rem -0.4rem var(--color-stars-a),
    -3rem -3rem var(--color-stars-a), -3rem -0.29rem var(--color-stars-a),
    -3rem -2.17rem var(--color-stars-a), -4rem -1.29rem var(--color-stars-a),
    -3rem 2.97rem var(--color-stars-a), -3rem 3rem var(--color-stars-a),
    -4.2rem 0.96rem var(--color-stars-a), -4.13rem -4.44rem var(--color-stars-a),
    -4.29rem -4.94rem var(--color-stars-a),
    -4.48rem -2.21rem var(--color-stars-a),
    -4.46rem -3.74rem var(--color-stars-a),
    -4.72rem -4.69rem var(--color-stars-a),
    -4.91rem -1.68rem var(--color-stars-a), -4rem -2.29rem var(--color-stars-a),
    -4rem -1.4rem var(--color-stars-a), -4rem -4rem var(--color-stars-a),
    -4rem -3.17rem var(--color-stars-a), -4rem 1.97rem var(--color-stars-a),
    -4rem 4rem var(--color-stars-a), -3.48rem -3.21rem var(--color-stars-a),
    -3.72rem -3.69rem var(--color-stars-a),
    -3.91rem -2.68rem var(--color-stars-a), -3rem -2.29rem var(--color-stars-a),
    -3rem -4.17rem var(--color-stars-a), -6rem -3.29rem var(--color-stars-a),
    -6rem -3.17rem var(--color-stars-a), -0.11rem 3.83rem var(--color-stars-a),
    0.1rem -1.22rem var(--color-stars-a), 0.2rem 1.31rem var(--color-stars-a),
    0.11rem 2.33rem var(--color-stars-a), 0.14rem -2.33rem var(--color-stars-a),
    0.21rem 1.63rem var(--color-stars-a), 0.1rem 4.38rem var(--color-stars-a),
    0.21rem 0.63rem var(--color-stars-a), 0.22rem 2.33rem var(--color-stars-a),
    0.41rem 6.32rem var(--color-stars-a), 0.43rem 3.41rem var(--color-stars-a),
    0.42rem 1.41rem var(--color-stars-a), 0.32rem 1.77rem var(--color-stars-a),
    0.3rem -3rem var(--color-stars-a), 0.34rem 0.27rem var(--color-stars-a),
    0.62rem -1.39rem var(--color-stars-a), 0.73rem -1rem var(--color-stars-a),
    0.67rem -1.43rem var(--color-stars-a), 0.71rem -0.94rem var(--color-stars-a),
    0.73rem -3.17rem var(--color-stars-a), 0.74rem 0.28rem var(--color-stars-a),
    0.83rem 1.2rem var(--color-stars-a), 0.83rem 2.12rem var(--color-stars-a),
    1.18rem 7.13rem var(--color-stars-a), 0.88rem -2.32rem var(--color-stars-a),
    0.93rem 4.3rem var(--color-stars-a), 0.93rem 4rem var(--color-stars-a),
    1.1rem -0.22rem var(--color-stars-a), 1.2rem 0.73rem var(--color-stars-a),
    1.14rem -1.33rem var(--color-stars-a), 1.21rem 1.63rem var(--color-stars-a),
    1.23rem 4rem var(--color-stars-a), 1.21rem 2.63rem var(--color-stars-a),
    1.22rem 3.33rem var(--color-stars-a), 1.42rem 2.41rem var(--color-stars-a),
    1.27rem -2.4rem var(--color-stars-a), 1.39rem -0.17rem var(--color-stars-a),
    1.31rem 3.49rem var(--color-stars-a), 1.38rem -1.12rem var(--color-stars-a),
    1.3rem -2rem var(--color-stars-a), 1.73rem -2.17rem var(--color-stars-a),
    1.61rem 0.99rem var(--color-stars-a), 1.62rem -0.39rem var(--color-stars-a),
    1.76rem 2.13rem var(--color-stars-a), 1.83rem -1.7rem var(--color-stars-a),
    1.83rem 2.2rem var(--color-stars-a), 1.86rem -0.37rem var(--color-stars-a),
    1.88rem -1.32rem var(--color-stars-a), 1.93rem 3.3rem var(--color-stars-a),
    1.93rem 3rem var(--color-stars-a), 2.2rem 1.73rem var(--color-stars-a),
    2.3rem 0.43rem var(--color-stars-a), 2.3rem 1.74rem var(--color-stars-a),
    2.11rem 4.33rem var(--color-stars-a), 2.7rem -0.34rem var(--color-stars-a),
    2.19rem -2.14rem var(--color-stars-a), 2.21rem 2.63rem var(--color-stars-a),
    2.22rem 4.33rem var(--color-stars-a), 2.23rem 3rem var(--color-stars-a),
    2.27rem -1.4rem var(--color-stars-a), 2.2rem -4.4rem var(--color-stars-a),
    2.32rem -0.92rem var(--color-stars-a), 2.43rem -2.64rem var(--color-stars-a),
    2.48rem 2.17rem var(--color-stars-a), 2.31rem 4.49rem var(--color-stars-a),
    2.32rem 0.34rem var(--color-stars-a), 2.32rem 3.77rem var(--color-stars-a),
    2.34rem 0.34rem var(--color-stars-a), 2.37rem 1.48rem var(--color-stars-a),
    2.36rem 2.48rem var(--color-stars-a), 2.37rem -2.89rem var(--color-stars-a),
    2.38rem -0.12rem var(--color-stars-a), 2.61rem 1.99rem var(--color-stars-a),
    2.61rem 2.68rem var(--color-stars-a), 2.62rem 0.41rem var(--color-stars-a),
    2.62rem -4.28rem var(--color-stars-a), 2.62rem 3.41rem var(--color-stars-a),
    2.63rem -0.97rem var(--color-stars-a), 2.73rem -1.17rem var(--color-stars-a),
    2.83rem -0.7rem var(--color-stars-a), 2.76rem 3.13rem var(--color-stars-a),
    2.83rem 3.2rem var(--color-stars-a), 3.7rem 0.46rem var(--color-stars-a),
    2.83rem 4.12rem var(--color-stars-a), 2.86rem 0.63rem var(--color-stars-a),
    2.93rem -1.99rem var(--color-stars-a), 2.93rem 6rem var(--color-stars-a),
    3.1rem 0.78rem var(--color-stars-a), 3.2rem 2.73rem var(--color-stars-a),
    3.3rem -3.69rem var(--color-stars-a), 3.3rem 1.43rem var(--color-stars-a),
    3.3rem 2.74rem var(--color-stars-a), 3.19rem -1.14rem var(--color-stars-a),
    3.21rem 0.89rem var(--color-stars-a), 3.21rem 3.63rem var(--color-stars-a),
    3.32rem -0.8rem var(--color-stars-a), 3.23rem 6rem var(--color-stars-a),
    3.27rem -0.4rem var(--color-stars-a), 3.2rem -3.4rem var(--color-stars-a),
    3.32rem 2.38rem var(--color-stars-a), 3.36rem 1.8rem var(--color-stars-a),
    3.48rem 3.17rem var(--color-stars-a), 3.43rem -1.64rem var(--color-stars-a),
    3.43rem 0.39rem var(--color-stars-a), 3.31rem 3.49rem var(--color-stars-a),
    3.37rem 2.48rem var(--color-stars-a), 3.61rem -1.9rem var(--color-stars-a),
    3.3rem -0.32rem var(--color-stars-a), 3.61rem 3.68rem var(--color-stars-a),
    3.69rem -1.17rem var(--color-stars-a), 3.62rem -3.28rem var(--color-stars-a),
    3.63rem -0.6rem var(--color-stars-a), 3.73rem 0.83rem var(--color-stars-a),
    3.76rem 2.68rem var(--color-stars-a), 3.76rem 4.13rem var(--color-stars-a),
    3.83rem 0.93rem var(--color-stars-a), 3.93rem -0.99rem var(--color-stars-a),
    3.93rem 7.3rem var(--color-stars-a), 4.19rem -0.14rem var(--color-stars-a),
    4.3rem -2.69rem var(--color-stars-a), 4.3rem 2.43rem var(--color-stars-a),
    4.22rem 6.33rem var(--color-stars-a), 4.32rem 0.92rem var(--color-stars-a),
    4.32rem 3.38rem var(--color-stars-a), 4.43rem 1.39rem var(--color-stars-a),
    4.36rem 2.8rem var(--color-stars-a), 4.37rem 3.48rem var(--color-stars-a),
    4.38rem 1.88rem var(--color-stars-a), 4.61rem -0.9rem var(--color-stars-a),
    4.61rem 3.99rem var(--color-stars-a), 4.63rem -0.6rem var(--color-stars-a),
    4.61rem 4.68rem var(--color-stars-a), 4.69rem -0.17rem var(--color-stars-a),
    4.83rem 1.93rem var(--color-stars-a), 4.76rem 3.68rem var(--color-stars-a),
    4.86rem 2.63rem var(--color-stars-a), 4.93rem -0.99rem var(--color-stars-a),
    4rem -2.61rem var(--color-stars-a), 4rem 0.83rem var(--color-stars-a),
    4rem 2.22rem var(--color-stars-a), 3.3rem 4.33rem var(--color-stars-a),
    3.27rem 1.96rem var(--color-stars-a), 3.32rem 1.92rem var(--color-stars-a),
    3.32rem 4.38rem var(--color-stars-a), 3.36rem 3.8rem var(--color-stars-a),
    3.43rem 0.36rem var(--color-stars-a), 3.61rem 3.68rem var(--color-stars-a),
    3.43rem 2.39rem var(--color-stars-a), 3.62rem -1.28rem var(--color-stars-a),
    3.63rem 1.94rem var(--color-stars-a), 3.69rem 0.83rem var(--color-stars-a),
    3.76rem 4.68rem var(--color-stars-a), 3.93rem 1.1rem var(--color-stars-a),
    3rem -1.61rem var(--color-stars-a), 3rem 1.83rem var(--color-stars-a),
    3rem 3.22rem var(--color-stars-a), 6.3rem -0.99rem var(--color-stars-a),
    6.3rem 4.43rem var(--color-stars-a), 6.19rem -1.14rem var(--color-stars-a),
    6.32rem 3.38rem var(--color-stars-a), 6.36rem 4.8rem var(--color-stars-a),
    6.61rem 1.91rem var(--color-stars-a), 6.37rem 3.48rem var(--color-stars-a),
    7rem 3.83rem var(--color-stars-a), 6rem -0.61rem var(--color-stars-a),
    6rem 2.83rem var(--color-stars-a), 6rem 4.22rem var(--color-stars-a),
    7.43rem 4.39rem var(--color-stars-a), 7.69rem 2.83rem var(--color-stars-a),
    8rem 1.39rem var(--color-stars-a), 8rem 6.22rem var(--color-stars-a),
    -8.3rem 12.2rem var(--color-stars-a), 13.3rem 2.3rem var(--color-stars-a),
    -7.4rem 3.7rem var(--color-stars-a), -14.3rem 7.1rem var(--color-stars-a),
    0.9rem -1.3rem var(--color-stars-a), -13.6rem 7.8rem var(--color-stars-a),
    -12.4rem 8.2rem var(--color-stars-a), -7.1rem 14.7rem var(--color-stars-a),
    1.2rem -8.9rem var(--color-stars-a), -13.9rem 8.3rem var(--color-stars-a),
    8.8rem 14.3rem var(--color-stars-a), -2.2rem -14.9rem var(--color-stars-a),
    2.3rem -12.7rem var(--color-stars-a), 7.7rem 1.3rem var(--color-stars-a),
    8.9rem 1.1rem var(--color-stars-a), -3.2rem -8.6rem var(--color-stars-a),
    -7.6rem -6.9rem var(--color-stars-a), -11.4rem -3.4rem var(--color-stars-a),
    1.1rem 1.4rem var(--color-stars-a), -2.8rem 4.6rem var(--color-stars-a),
    -6.3rem -11.7rem var(--color-stars-a), -3.7rem -6.3rem var(--color-stars-a),
    -6.4rem 3.4rem var(--color-stars-a), 1.1rem -13.3rem var(--color-stars-a),
    -1.8rem -11.2rem var(--color-stars-a), -9.1rem -12.6rem var(--color-stars-a),
    2.6rem -3.7rem var(--color-stars-a), 1.7rem -1.3rem var(--color-stars-a),
    -3.1rem -1.2rem var(--color-stars-a), 3.8rem 8.6rem var(--color-stars-a),
    0.8rem 12.1rem var(--color-stars-a), 11.6rem -7.2rem var(--color-stars-a),
    13.8rem -4.1rem var(--color-stars-a), -1.3rem -7.3rem var(--color-stars-a),
    -7.9rem 8.2rem var(--color-stars-a), 1.6rem 1.2rem var(--color-stars-a),
    2.3rem 3.7rem var(--color-stars-a), 3.7rem 14.3rem var(--color-stars-a),
    14.3rem 9.1rem var(--color-stars-a), 7.9rem 0.3rem var(--color-stars-a),
    -3.3rem 11.3rem var(--color-stars-a), -1.3rem -14.6rem var(--color-stars-a),
    -9.6rem 12.1rem var(--color-stars-a), -1.3rem 1.4rem var(--color-stars-a),
    8.4rem 9.4rem var(--color-stars-a), 12.3rem -11.8rem var(--color-stars-a),
    4.6rem 12.1rem var(--color-stars-a), -8.2rem 8.7rem var(--color-stars-a),
    12.7rem 0.3rem var(--color-stars-a), 1.3rem 2.6rem var(--color-stars-a),
    -3.6rem -2.7rem var(--color-stars-a), -4.7rem -1.1rem var(--color-stars-a),
    -1.6rem 8.3rem var(--color-stars-a), -4.3rem 12.2rem var(--color-stars-a),
    -3.7rem -3.1rem var(--color-stars-a), -12.3rem 7.8rem var(--color-stars-a),
    -12.6rem 6.9rem var(--color-stars-a), -1.3rem -7.3rem var(--color-stars-a),
    7.8rem -3.2rem var(--color-stars-a), 0.7rem -2.1rem var(--color-stars-a),
    -3.9rem -14.6rem var(--color-stars-a), 1.1rem 6.2rem var(--color-stars-a),
    -3.4rem 12.9rem var(--color-stars-a), -4.2rem 8.4rem var(--color-stars-a),
    -13.7rem -9.4rem var(--color-stars-a), 3.3rem -1.8rem var(--color-stars-a),
    11.4rem -3.1rem var(--color-stars-a), 4.9rem 6.6rem var(--color-stars-a),
    -3.1rem 13.7rem var(--color-stars-a), 1.8rem 7.6rem var(--color-stars-a),
    14.2rem 14.3rem var(--color-stars-a);
  --stars-2: -0.02rem 3.96rem var(--color-stars-b),
    -0.12rem -3.32rem var(--color-stars-b),
    -0.12rem 2.41rem var(--color-stars-b),
    -0.15rem -0.53rem var(--color-stars-b),
    -0.15rem 1.12rem var(--color-stars-b), -0.22rem 5.79rem var(--color-stars-b),
    -0.23rem -0.74rem var(--color-stars-b), -0.25rem -2rem var(--color-stars-b),
    -0.26rem -0.72rem var(--color-stars-b),
    -0.29rem -0.94rem var(--color-stars-b),
    -0.39rem 0.13rem var(--color-stars-b),
    -0.33rem -2.43rem var(--color-stars-b), -0.35rem -2rem var(--color-stars-b),
    -0.48rem 0.77rem var(--color-stars-b),
    -0.46rem -0.73rem var(--color-stars-b),
    -0.47rem 1.46rem var(--color-stars-b), -0.61rem -2rem var(--color-stars-b),
    -0.55rem -0.07rem var(--color-stars-b),
    -0.58rem 0.41rem var(--color-stars-b), -0.5rem -4rem var(--color-stars-b),
    -0.61rem -3rem var(--color-stars-b), -0.65rem 2.44rem var(--color-stars-b),
    -0.65rem 3.44rem var(--color-stars-b),
    -0.72rem -0.69rem var(--color-stars-b),
    -0.82rem 5.15rem var(--color-stars-b), -0.82rem 6.15rem var(--color-stars-b),
    -0.86rem -3.35rem var(--color-stars-b),
    -0.87rem 2.84rem var(--color-stars-b), -0.89rem 1.35rem var(--color-stars-b),
    -0.99rem -2.22rem var(--color-stars-b),
    -0.98rem -0.69rem var(--color-stars-b),
    -0.98rem -1.69rem var(--color-stars-b), -0.9rem 3.38rem var(--color-stars-b),
    -1.11rem 1.85rem var(--color-stars-b),
    -1.15rem -1.73rem var(--color-stars-b), -1.25rem -3rem var(--color-stars-b),
    -1.26rem -1.72rem var(--color-stars-b), -1.35rem -3rem var(--color-stars-b),
    -1.29rem -1.94rem var(--color-stars-b),
    -1.39rem -0.87rem var(--color-stars-b),
    -1.46rem -0.74rem var(--color-stars-b),
    -1.39rem 0.22rem var(--color-stars-b), -1.47rem 0.46rem var(--color-stars-b),
    -1.48rem -0.23rem var(--color-stars-b),
    -1.55rem -1.07rem var(--color-stars-b),
    -1.56rem -1.11rem var(--color-stars-b),
    -1.57rem 1.71rem var(--color-stars-b),
    -1.58rem -0.59rem var(--color-stars-b),
    -1.59rem 4.32rem var(--color-stars-b), -1.61rem -4rem var(--color-stars-b),
    -1.65rem 1.44rem var(--color-stars-b),
    -1.64rem -0.78rem var(--color-stars-b),
    -1.78rem 3.79rem var(--color-stars-b), -1.82rem 4.15rem var(--color-stars-b),
    -1.86rem -4.35rem var(--color-stars-b),
    -1.87rem 1.84rem var(--color-stars-b), -1.89rem 0.35rem var(--color-stars-b),
    -1.91rem 1.32rem var(--color-stars-b),
    -1.98rem -2.69rem var(--color-stars-b), -1.9rem 2.38rem var(--color-stars-b),
    -1rem -1rem var(--color-stars-b), -1rem 1.71rem var(--color-stars-b),
    -1rem 7rem var(--color-stars-b), -2.11rem 0.85rem var(--color-stars-b),
    -2.15rem -2.73rem var(--color-stars-b),
    -2.11rem 1.85rem var(--color-stars-b),
    -2.15rem -2.53rem var(--color-stars-b),
    -2.15rem -0.88rem var(--color-stars-b),
    -2.22rem 3.79rem var(--color-stars-b),
    -2.23rem -1.74rem var(--color-stars-b),
    -2.23rem -2.74rem var(--color-stars-b),
    -2.29rem -2.94rem var(--color-stars-b), -2.25rem -4rem var(--color-stars-b),
    -2.35rem -4rem var(--color-stars-b), -2.29rem -2.94rem var(--color-stars-b),
    -2.39rem -0.78rem var(--color-stars-b),
    -2.39rem -1.87rem var(--color-stars-b),
    -2.46rem -2.73rem var(--color-stars-b),
    -2.47rem -0.54rem var(--color-stars-b),
    -2.47rem -0.54rem var(--color-stars-b),
    -2.55rem -2.07rem var(--color-stars-b),
    -2.48rem -0.21rem var(--color-stars-b),
    -2.72rem -2.69rem var(--color-stars-b),
    -2.56rem -1.11rem var(--color-stars-b),
    -2.56rem -2.11rem var(--color-stars-b),
    -2.57rem 0.71rem var(--color-stars-b), -2.59rem 3.32rem var(--color-stars-b),
    -2.61rem -4rem var(--color-stars-b), -2.61rem -5rem var(--color-stars-b),
    -2.65rem 0.44rem var(--color-stars-b), -2.65rem 1.44rem var(--color-stars-b),
    -2.72rem 2.28rem var(--color-stars-b), -2.78rem 2.79rem var(--color-stars-b),
    -2.86rem -5.35rem var(--color-stars-b),
    -2.98rem -2.69rem var(--color-stars-b),
    -2.87rem 0.84rem var(--color-stars-b), -2.91rem 0.32rem var(--color-stars-b),
    -2.94rem 4.33rem var(--color-stars-b), -2rem -2rem var(--color-stars-b),
    -2.98rem -3.69rem var(--color-stars-b), -2rem -0.29rem var(--color-stars-b),
    -2rem -1.17rem var(--color-stars-b), -2rem 0.96rem var(--color-stars-b),
    -2rem 3.97rem var(--color-stars-b), -2rem 6rem var(--color-stars-b),
    -3.02rem 1.96rem var(--color-stars-b),
    -3.11rem -0.15rem var(--color-stars-b),
    -3.13rem -3.44rem var(--color-stars-b),
    -3.15rem -3.73rem var(--color-stars-b),
    -3.23rem -2.74rem var(--color-stars-b),
    -3.29rem -3.94rem var(--color-stars-b),
    -3.39rem -2.87rem var(--color-stars-b),
    -3.39rem -1.78rem var(--color-stars-b),
    -3.46rem -2.74rem var(--color-stars-b),
    -3.46rem -2.74rem var(--color-stars-b),
    -3.47rem -1.54rem var(--color-stars-b), -3.61rem -6rem var(--color-stars-b),
    -3.48rem -1.21rem var(--color-stars-b),
    -3.56rem -3.11rem var(--color-stars-b),
    -3.59rem 2.32rem var(--color-stars-b),
    -3.71rem -3.46rem var(--color-stars-b),
    -3.65rem -0.56rem var(--color-stars-b),
    -3.72rem -3.69rem var(--color-stars-b),
    -3.91rem -0.68rem var(--color-stars-b),
    -3.86rem -6.35rem var(--color-stars-b),
    -3.91rem -0.68rem var(--color-stars-b),
    -3.94rem 3.33rem var(--color-stars-b),
    -3.98rem -4.69rem var(--color-stars-b), -3rem -0.04rem var(--color-stars-b),
    -3rem -3rem var(--color-stars-b), -3rem -0.29rem var(--color-stars-b),
    -3rem -2.17rem var(--color-stars-b), -4rem -1.29rem var(--color-stars-b),
    -3rem 2.97rem var(--color-stars-b), -3rem 5rem var(--color-stars-b),
    -4.02rem 0.96rem var(--color-stars-b),
    -4.13rem -4.44rem var(--color-stars-b),
    -4.29rem -4.94rem var(--color-stars-b),
    -4.48rem -2.21rem var(--color-stars-b),
    -4.46rem -3.74rem var(--color-stars-b),
    -4.72rem -4.69rem var(--color-stars-b),
    -4.91rem -1.68rem var(--color-stars-b), -4rem -2.29rem var(--color-stars-b),
    -4rem -1.04rem var(--color-stars-b), -4rem -4rem var(--color-stars-b),
    -4rem -3.17rem var(--color-stars-b), -4rem 1.97rem var(--color-stars-b),
    -4rem 4rem var(--color-stars-b), -5.48rem -3.21rem var(--color-stars-b),
    -5.72rem -5.69rem var(--color-stars-b),
    -5.91rem -2.68rem var(--color-stars-b), -5rem -2.29rem var(--color-stars-b),
    -5rem -4.17rem var(--color-stars-b), -6rem -3.29rem var(--color-stars-b),
    -6rem -5.17rem var(--color-stars-b), -0.11rem 3.85rem var(--color-stars-b),
    0.01rem -1.22rem var(--color-stars-b), 0.02rem 1.31rem var(--color-stars-b),
    0.11rem 2.35rem var(--color-stars-b), 0.14rem -2.35rem var(--color-stars-b),
    0.21rem 1.63rem var(--color-stars-b), 0.1rem 4.38rem var(--color-stars-b),
    0.21rem 0.63rem var(--color-stars-b), 0.22rem 2.33rem var(--color-stars-b),
    0.41rem 6.32rem var(--color-stars-b), 0.43rem 3.41rem var(--color-stars-b),
    0.42rem 1.41rem var(--color-stars-b), 0.52rem 1.77rem var(--color-stars-b),
    0.5rem -3rem var(--color-stars-b), 0.54rem 0.27rem var(--color-stars-b),
    0.62rem -1.59rem var(--color-stars-b), 0.75rem -1rem var(--color-stars-b),
    0.67rem -1.43rem var(--color-stars-b), 0.71rem -0.94rem var(--color-stars-b),
    0.73rem -3.17rem var(--color-stars-b), 0.74rem 0.28rem var(--color-stars-b),
    0.83rem 1.02rem var(--color-stars-b), 0.85rem 2.12rem var(--color-stars-b),
    1.18rem 7.15rem var(--color-stars-b), 0.88rem -2.32rem var(--color-stars-b),
    0.93rem 4.05rem var(--color-stars-b), 0.95rem 4rem var(--color-stars-b),
    1.01rem -0.22rem var(--color-stars-b), 1.02rem 0.73rem var(--color-stars-b),
    1.14rem -1.35rem var(--color-stars-b), 1.21rem 1.63rem var(--color-stars-b),
    1.23rem 4rem var(--color-stars-b), 1.21rem 2.63rem var(--color-stars-b),
    1.22rem 3.33rem var(--color-stars-b), 1.42rem 2.41rem var(--color-stars-b),
    1.27rem -2.04rem var(--color-stars-b), 1.39rem -0.17rem var(--color-stars-b),
    1.51rem 3.49rem var(--color-stars-b), 1.58rem -1.12rem var(--color-stars-b),
    1.5rem -2rem var(--color-stars-b), 1.73rem -2.17rem var(--color-stars-b),
    1.61rem 0.99rem var(--color-stars-b), 1.62rem -0.59rem var(--color-stars-b),
    1.76rem 2.15rem var(--color-stars-b), 1.83rem -1.07rem var(--color-stars-b),
    1.83rem 2.02rem var(--color-stars-b), 1.86rem -0.37rem var(--color-stars-b),
    1.88rem -1.32rem var(--color-stars-b), 1.93rem 5.05rem var(--color-stars-b),
    1.95rem 5rem var(--color-stars-b), 2.02rem 1.73rem var(--color-stars-b),
    2.05rem 0.45rem var(--color-stars-b), 2.05rem 1.74rem var(--color-stars-b),
    2.11rem 4.35rem var(--color-stars-b), 2.07rem -0.54rem var(--color-stars-b),
    2.19rem -2.14rem var(--color-stars-b), 2.21rem 2.63rem var(--color-stars-b),
    2.22rem 4.33rem var(--color-stars-b), 2.23rem 5rem var(--color-stars-b),
    2.27rem -1.04rem var(--color-stars-b), 2.2rem -4.4rem var(--color-stars-b),
    2.32rem -0.92rem var(--color-stars-b), 2.45rem -2.64rem var(--color-stars-b),
    2.48rem 2.17rem var(--color-stars-b), 2.51rem 4.49rem var(--color-stars-b),
    2.52rem 0.54rem var(--color-stars-b), 2.52rem 3.77rem var(--color-stars-b),
    2.54rem 0.54rem var(--color-stars-b), 2.57rem 1.48rem var(--color-stars-b),
    2.56rem 2.48rem var(--color-stars-b), 2.57rem -2.89rem var(--color-stars-b),
    2.58rem -0.12rem var(--color-stars-b), 2.61rem 1.99rem var(--color-stars-b),
    2.61rem 2.68rem var(--color-stars-b), 2.62rem 0.41rem var(--color-stars-b),
    2.62rem -4.28rem var(--color-stars-b), 2.62rem 3.41rem var(--color-stars-b),
    2.63rem -0.97rem var(--color-stars-b), 2.73rem -1.17rem var(--color-stars-b),
    2.83rem -0.07rem var(--color-stars-b), 2.76rem 3.15rem var(--color-stars-b),
    2.83rem 3.02rem var(--color-stars-b), 3.07rem 0.46rem var(--color-stars-b),
    2.85rem 4.12rem var(--color-stars-b), 2.86rem 0.63rem var(--color-stars-b),
    2.93rem -1.99rem var(--color-stars-b), 2.95rem 6rem var(--color-stars-b),
    3.01rem 0.78rem var(--color-stars-b), 3.02rem 2.73rem var(--color-stars-b),
    3.03rem -3.69rem var(--color-stars-b), 3.05rem 1.45rem var(--color-stars-b),
    3.05rem 2.74rem var(--color-stars-b), 3.19rem -1.14rem var(--color-stars-b),
    3.21rem 0.89rem var(--color-stars-b), 3.21rem 3.63rem var(--color-stars-b),
    3.32rem -0.08rem var(--color-stars-b), 3.23rem 6rem var(--color-stars-b),
    3.27rem -0.04rem var(--color-stars-b), 3.2rem -3.4rem var(--color-stars-b),
    3.32rem 2.38rem var(--color-stars-b), 3.36rem 1.8rem var(--color-stars-b),
    3.48rem 3.17rem var(--color-stars-b), 3.45rem -1.64rem var(--color-stars-b),
    3.45rem 0.39rem var(--color-stars-b), 3.51rem 5.49rem var(--color-stars-b),
    3.57rem 2.48rem var(--color-stars-b), 3.61rem -1.09rem var(--color-stars-b),
    3.5rem -0.32rem var(--color-stars-b), 3.61rem 3.68rem var(--color-stars-b),
    3.69rem -1.17rem var(--color-stars-b), 3.62rem -3.28rem var(--color-stars-b),
    3.63rem -0.06rem var(--color-stars-b), 3.73rem 0.83rem var(--color-stars-b),
    3.76rem 2.68rem var(--color-stars-b), 3.76rem 4.15rem var(--color-stars-b),
    3.83rem 0.93rem var(--color-stars-b), 3.93rem -0.99rem var(--color-stars-b),
    3.93rem 7.05rem var(--color-stars-b), 4.19rem -0.14rem var(--color-stars-b),
    4.03rem -2.69rem var(--color-stars-b), 4.05rem 2.45rem var(--color-stars-b),
    4.22rem 6.33rem var(--color-stars-b), 4.32rem 0.92rem var(--color-stars-b),
    4.32rem 3.38rem var(--color-stars-b), 4.45rem 1.39rem var(--color-stars-b),
    4.36rem 2.8rem var(--color-stars-b), 4.57rem 3.48rem var(--color-stars-b),
    4.58rem 1.88rem var(--color-stars-b), 4.61rem -0.09rem var(--color-stars-b),
    4.61rem 3.99rem var(--color-stars-b), 4.63rem -0.06rem var(--color-stars-b),
    4.61rem 4.68rem var(--color-stars-b), 4.69rem -0.17rem var(--color-stars-b),
    4.83rem 1.93rem var(--color-stars-b), 4.76rem 3.68rem var(--color-stars-b),
    4.86rem 2.63rem var(--color-stars-b), 4.93rem -0.99rem var(--color-stars-b),
    4rem -2.61rem var(--color-stars-b), 4rem 0.85rem var(--color-stars-b),
    4rem 2.22rem var(--color-stars-b), 5.05rem 4.33rem var(--color-stars-b),
    5.27rem 1.96rem var(--color-stars-b), 5.32rem 1.92rem var(--color-stars-b),
    5.32rem 4.38rem var(--color-stars-b), 5.36rem 3.8rem var(--color-stars-b),
    5.45rem 0.36rem var(--color-stars-b), 5.61rem 5.68rem var(--color-stars-b),
    5.45rem 2.39rem var(--color-stars-b), 5.62rem -1.28rem var(--color-stars-b),
    5.63rem 1.94rem var(--color-stars-b), 5.69rem 0.83rem var(--color-stars-b),
    5.76rem 4.68rem var(--color-stars-b), 5.93rem 1.01rem var(--color-stars-b),
    5rem -1.61rem var(--color-stars-b), 5rem 1.85rem var(--color-stars-b),
    5rem 3.22rem var(--color-stars-b), 6.03rem -0.99rem var(--color-stars-b),
    6.05rem 4.45rem var(--color-stars-b), 6.19rem -1.14rem var(--color-stars-b),
    6.32rem 5.38rem var(--color-stars-b), 6.36rem 4.8rem var(--color-stars-b),
    6.61rem 1.91rem var(--color-stars-b), 6.57rem 5.48rem var(--color-stars-b),
    7rem 3.85rem var(--color-stars-b), 6rem -0.61rem var(--color-stars-b),
    6rem 2.85rem var(--color-stars-b), 6rem 4.22rem var(--color-stars-b),
    7.45rem 4.39rem var(--color-stars-b), 7.69rem 2.83rem var(--color-stars-b),
    8rem 1.39rem var(--color-stars-b), 8rem 6.22rem var(--color-stars-b),
    -8.5rem 12.2rem var(--color-stars-b), 13.3rem 2.5rem var(--color-stars-b),
    -7.4rem 3.7rem var(--color-stars-b), -14.5rem 7.1rem var(--color-stars-b),
    0.9rem -1.3rem var(--color-stars-b), -13.6rem 7.8rem var(--color-stars-b),
    -12.4rem 8.2rem var(--color-stars-b), -7.1rem 14.7rem var(--color-stars-b),
    1.2rem -8.9rem var(--color-stars-b), -13.9rem 8.3rem var(--color-stars-b),
    8.8rem 14.3rem var(--color-stars-b), -2.2rem -14.9rem var(--color-stars-b),
    2.3rem -12.7rem var(--color-stars-b), 7.7rem 1.5rem var(--color-stars-b),
    8.9rem 1.1rem var(--color-stars-b), -5.2rem -8.6rem var(--color-stars-b),
    -7.6rem -6.9rem var(--color-stars-b), -11.4rem -3.4rem var(--color-stars-b),
    1.1rem 10.4rem var(--color-stars-b), -2.8rem 4.6rem var(--color-stars-b),
    -6.5rem -11.7rem var(--color-stars-b), -5.7rem -6.3rem var(--color-stars-b),
    -6.4rem 5.4rem var(--color-stars-b), 10.1rem -13.5rem var(--color-stars-b),
    -10.8rem -11.2rem var(--color-stars-b),
    -9.1rem -12.6rem var(--color-stars-b), 2.6rem -5.7rem var(--color-stars-b),
    10.7rem -10.3rem var(--color-stars-b), -5.1rem -1.2rem var(--color-stars-b),
    3.8rem 8.6rem var(--color-stars-b), 0.8rem 12.1rem var(--color-stars-b),
    11.6rem -7.2rem var(--color-stars-b), 13.8rem -4.1rem var(--color-stars-b),
    -10.3rem -7.5rem var(--color-stars-b), -7.9rem 8.2rem var(--color-stars-b),
    1.6rem 1.2rem var(--color-stars-b), 2.5rem 5.7rem var(--color-stars-b),
    3.7rem 14.5rem var(--color-stars-b), 14.3rem 9.1rem var(--color-stars-b),
    7.9rem 0.5rem var(--color-stars-b), -5.3rem 11.3rem var(--color-stars-b),
    -1.5rem -14.6rem var(--color-stars-b), -9.6rem 12.1rem var(--color-stars-b),
    -10.5rem 1.4rem var(--color-stars-b), 8.4rem 9.4rem var(--color-stars-b),
    12.5rem -11.8rem var(--color-stars-b), 4.6rem 12.1rem var(--color-stars-b),
    -8.2rem 8.7rem var(--color-stars-b), 12.7rem 0.3rem var(--color-stars-b),
    10.3rem 2.6rem var(--color-stars-b), -3.6rem -2.7rem var(--color-stars-b),
    -4.7rem -1.1rem var(--color-stars-b), -1.6rem 8.5rem var(--color-stars-b),
    -4.3rem 12.2rem var(--color-stars-b), -3.7rem -3.1rem var(--color-stars-b),
    -12.3rem 7.8rem var(--color-stars-b), -12.6rem 6.9rem var(--color-stars-b),
    -1.3rem -7.5rem var(--color-stars-b), 7.8rem -5.2rem var(--color-stars-b),
    0.7rem -2.1rem var(--color-stars-b), -5.9rem -14.6rem var(--color-stars-b),
    10.1rem 6.2rem var(--color-stars-b), -3.4rem 12.9rem var(--color-stars-b),
    -4.2rem 8.4rem var(--color-stars-b), -13.7rem -9.4rem var(--color-stars-b),
    3.5rem -10.8rem var(--color-stars-b), 11.4rem -3.1rem var(--color-stars-b),
    4.9rem 6.6rem var(--color-stars-b), -3.1rem 13.7rem var(--color-stars-b),
    1.8rem 7.6rem var(--color-stars-b), 14.2rem 14.5rem var(--color-stars-b);
  --stars-3: -0.02rem 3.96rem var(--color-stars-c),
    -0.12rem -3.32rem var(--color-stars-c),
    -0.12rem 2.41rem var(--color-stars-c),
    -0.15rem -0.53rem var(--color-stars-c),
    -0.15rem 1.12rem var(--color-stars-c), -0.22rem 5.79rem var(--color-stars-c),
    -0.23rem -0.74rem var(--color-stars-c), -0.25rem -2rem var(--color-stars-c),
    -0.26rem -0.72rem var(--color-stars-c),
    -0.29rem -0.94rem var(--color-stars-c),
    -0.39rem 0.13rem var(--color-stars-c),
    -0.33rem -2.43rem var(--color-stars-c), -0.35rem -2rem var(--color-stars-c),
    -0.48rem 0.77rem var(--color-stars-c),
    -0.46rem -0.73rem var(--color-stars-c),
    -0.47rem 1.46rem var(--color-stars-c), -0.61rem -2rem var(--color-stars-c),
    -0.55rem -0.07rem var(--color-stars-c),
    -0.58rem 0.41rem var(--color-stars-c), -0.5rem -4rem var(--color-stars-c),
    -0.61rem -3rem var(--color-stars-c), -0.65rem 2.44rem var(--color-stars-c),
    -0.65rem 3.44rem var(--color-stars-c),
    -0.72rem -0.69rem var(--color-stars-c),
    -0.82rem 5.15rem var(--color-stars-c), -0.82rem 6.15rem var(--color-stars-c),
    -0.86rem -3.35rem var(--color-stars-c),
    -0.87rem 2.84rem var(--color-stars-c), -0.89rem 1.35rem var(--color-stars-c),
    -0.99rem -2.22rem var(--color-stars-c),
    -0.98rem -0.69rem var(--color-stars-c),
    -0.98rem -1.69rem var(--color-stars-c), -0.9rem 3.38rem var(--color-stars-c),
    -1.11rem 1.85rem var(--color-stars-c),
    -1.15rem -1.73rem var(--color-stars-c), -1.25rem -3rem var(--color-stars-c),
    -1.26rem -1.72rem var(--color-stars-c), -1.35rem -3rem var(--color-stars-c),
    -1.29rem -1.94rem var(--color-stars-c),
    -1.39rem -0.87rem var(--color-stars-c),
    -1.46rem -0.74rem var(--color-stars-c),
    -1.39rem 0.22rem var(--color-stars-c), -1.47rem 0.46rem var(--color-stars-c),
    -1.48rem -0.23rem var(--color-stars-c),
    -1.55rem -1.07rem var(--color-stars-c),
    -1.56rem -1.11rem var(--color-stars-c),
    -1.57rem 1.71rem var(--color-stars-c),
    -1.58rem -0.59rem var(--color-stars-c),
    -1.59rem 4.32rem var(--color-stars-c), -1.61rem -4rem var(--color-stars-c),
    -1.65rem 1.44rem var(--color-stars-c),
    -1.64rem -0.78rem var(--color-stars-c),
    -1.78rem 3.79rem var(--color-stars-c), -1.82rem 4.15rem var(--color-stars-c),
    -1.86rem -4.35rem var(--color-stars-c),
    -1.87rem 1.84rem var(--color-stars-c), -1.89rem 0.35rem var(--color-stars-c),
    -1.91rem 1.32rem var(--color-stars-c),
    -1.98rem -2.69rem var(--color-stars-c), -1.9rem 2.38rem var(--color-stars-c),
    -1rem -1rem var(--color-stars-c), -1rem 1.71rem var(--color-stars-c),
    -1rem 7rem var(--color-stars-c), -2.11rem 0.85rem var(--color-stars-c),
    -2.15rem -2.73rem var(--color-stars-c),
    -2.11rem 1.85rem var(--color-stars-c),
    -2.15rem -2.53rem var(--color-stars-c),
    -2.15rem -0.88rem var(--color-stars-c),
    -2.22rem 3.79rem var(--color-stars-c),
    -2.23rem -1.74rem var(--color-stars-c),
    -2.23rem -2.74rem var(--color-stars-c),
    -2.29rem -2.94rem var(--color-stars-c), -2.25rem -4rem var(--color-stars-c),
    -2.35rem -4rem var(--color-stars-c), -2.29rem -2.94rem var(--color-stars-c),
    -2.39rem -0.78rem var(--color-stars-c),
    -2.39rem -1.87rem var(--color-stars-c),
    -2.46rem -2.73rem var(--color-stars-c),
    -2.47rem -0.54rem var(--color-stars-c),
    -2.47rem -0.54rem var(--color-stars-c),
    -2.55rem -2.07rem var(--color-stars-c),
    -2.48rem -0.21rem var(--color-stars-c),
    -2.72rem -2.69rem var(--color-stars-c),
    -2.56rem -1.11rem var(--color-stars-c),
    -2.56rem -2.11rem var(--color-stars-c),
    -2.57rem 0.71rem var(--color-stars-c), -2.59rem 3.32rem var(--color-stars-c),
    -2.61rem -4rem var(--color-stars-c), -2.61rem -5rem var(--color-stars-c),
    -2.65rem 0.44rem var(--color-stars-c), -2.65rem 1.44rem var(--color-stars-c),
    -2.72rem 2.28rem var(--color-stars-c), -2.78rem 2.79rem var(--color-stars-c),
    -2.86rem -5.35rem var(--color-stars-c),
    -2.98rem -2.69rem var(--color-stars-c),
    -2.87rem 0.84rem var(--color-stars-c), -2.91rem 0.32rem var(--color-stars-c),
    -2.94rem 4.33rem var(--color-stars-c), -2rem -2rem var(--color-stars-c),
    -2.98rem -3.69rem var(--color-stars-c), -2rem -0.29rem var(--color-stars-c),
    -2rem -1.17rem var(--color-stars-c), -2rem 0.96rem var(--color-stars-c),
    -2rem 3.97rem var(--color-stars-c), -2rem 6rem var(--color-stars-c),
    -3.02rem 1.96rem var(--color-stars-c),
    -3.11rem -0.15rem var(--color-stars-c),
    -3.13rem -3.44rem var(--color-stars-c),
    -3.15rem -3.73rem var(--color-stars-c),
    -3.23rem -2.74rem var(--color-stars-c),
    -3.29rem -3.94rem var(--color-stars-c),
    -3.39rem -2.87rem var(--color-stars-c),
    -3.39rem -1.78rem var(--color-stars-c),
    -3.46rem -2.74rem var(--color-stars-c),
    -3.46rem -2.74rem var(--color-stars-c),
    -3.47rem -1.54rem var(--color-stars-c), -3.61rem -6rem var(--color-stars-c),
    -3.48rem -1.21rem var(--color-stars-c),
    -3.56rem -3.11rem var(--color-stars-c),
    -3.59rem 2.32rem var(--color-stars-c),
    -3.71rem -3.46rem var(--color-stars-c),
    -3.65rem -0.56rem var(--color-stars-c),
    -3.72rem -3.69rem var(--color-stars-c),
    -3.91rem -0.68rem var(--color-stars-c),
    -3.86rem -6.35rem var(--color-stars-c),
    -3.91rem -0.68rem var(--color-stars-c),
    -3.94rem 3.33rem var(--color-stars-c),
    -3.98rem -4.69rem var(--color-stars-c), -3rem -0.04rem var(--color-stars-c),
    -3rem -3rem var(--color-stars-c), -3rem -0.29rem var(--color-stars-c),
    -3rem -2.17rem var(--color-stars-c), -4rem -1.29rem var(--color-stars-c),
    -3rem 2.97rem var(--color-stars-c), -3rem 5rem var(--color-stars-c),
    -4.02rem 0.96rem var(--color-stars-c),
    -4.13rem -4.44rem var(--color-stars-c),
    -4.29rem -4.94rem var(--color-stars-c),
    -4.48rem -2.21rem var(--color-stars-c),
    -4.46rem -3.74rem var(--color-stars-c),
    -4.72rem -4.69rem var(--color-stars-c),
    -4.91rem -1.68rem var(--color-stars-c), -4rem -2.29rem var(--color-stars-c),
    -4rem -1.04rem var(--color-stars-c), -4rem -4rem var(--color-stars-c),
    -4rem -3.17rem var(--color-stars-c), -4rem 1.97rem var(--color-stars-c),
    -4rem 4rem var(--color-stars-c), -5.48rem -3.21rem var(--color-stars-c),
    -5.72rem -5.69rem var(--color-stars-c),
    -5.91rem -2.68rem var(--color-stars-c), -5rem -2.29rem var(--color-stars-c),
    -5rem -4.17rem var(--color-stars-c), -6rem -3.29rem var(--color-stars-c),
    -6rem -5.17rem var(--color-stars-c), -0.11rem 3.85rem var(--color-stars-c),
    0.01rem -1.22rem var(--color-stars-c), 0.02rem 1.31rem var(--color-stars-c),
    0.11rem 2.35rem var(--color-stars-c), 0.14rem -2.35rem var(--color-stars-c),
    0.21rem 1.63rem var(--color-stars-c), 0.1rem 4.38rem var(--color-stars-c),
    0.21rem 0.63rem var(--color-stars-c), 0.22rem 2.33rem var(--color-stars-c),
    0.41rem 6.32rem var(--color-stars-c), 0.43rem 3.41rem var(--color-stars-c),
    0.42rem 1.41rem var(--color-stars-c), 0.52rem 1.77rem var(--color-stars-c),
    0.5rem -3rem var(--color-stars-c), 0.54rem 0.27rem var(--color-stars-c),
    0.62rem -1.59rem var(--color-stars-c), 0.75rem -1rem var(--color-stars-c),
    0.67rem -1.43rem var(--color-stars-c), 0.71rem -0.94rem var(--color-stars-c),
    0.73rem -3.17rem var(--color-stars-c), 0.74rem 0.28rem var(--color-stars-c),
    0.83rem 1.02rem var(--color-stars-c), 0.85rem 2.12rem var(--color-stars-c),
    1.18rem 7.15rem var(--color-stars-c), 0.88rem -2.32rem var(--color-stars-c),
    0.93rem 4.05rem var(--color-stars-c), 0.95rem 4rem var(--color-stars-c),
    1.01rem -0.22rem var(--color-stars-c), 1.02rem 0.73rem var(--color-stars-c),
    1.14rem -1.35rem var(--color-stars-c), 1.21rem 1.63rem var(--color-stars-c),
    1.23rem 4rem var(--color-stars-c), 1.21rem 2.63rem var(--color-stars-c),
    1.22rem 3.33rem var(--color-stars-c), 1.42rem 2.41rem var(--color-stars-c),
    1.27rem -2.04rem var(--color-stars-c), 1.39rem -0.17rem var(--color-stars-c),
    1.51rem 3.49rem var(--color-stars-c), 1.58rem -1.12rem var(--color-stars-c),
    1.5rem -2rem var(--color-stars-c), 1.73rem -2.17rem var(--color-stars-c),
    1.61rem 0.99rem var(--color-stars-c), 1.62rem -0.59rem var(--color-stars-c),
    1.76rem 2.15rem var(--color-stars-c), 1.83rem -1.07rem var(--color-stars-c),
    1.83rem 2.02rem var(--color-stars-c), 1.86rem -0.37rem var(--color-stars-c),
    1.88rem -1.32rem var(--color-stars-c), 1.93rem 5.05rem var(--color-stars-c),
    1.95rem 5rem var(--color-stars-c), 2.02rem 1.73rem var(--color-stars-c),
    2.05rem 0.45rem var(--color-stars-c), 2.05rem 1.74rem var(--color-stars-c),
    2.11rem 4.35rem var(--color-stars-c), 2.07rem -0.54rem var(--color-stars-c),
    2.19rem -2.14rem var(--color-stars-c), 2.21rem 2.63rem var(--color-stars-c),
    2.22rem 4.33rem var(--color-stars-c), 2.23rem 5rem var(--color-stars-c),
    2.27rem -1.04rem var(--color-stars-c), 2.2rem -4.4rem var(--color-stars-c),
    2.32rem -0.92rem var(--color-stars-c), 2.45rem -2.64rem var(--color-stars-c),
    2.48rem 2.17rem var(--color-stars-c), 2.51rem 4.49rem var(--color-stars-c),
    2.52rem 0.54rem var(--color-stars-c), 2.52rem 3.77rem var(--color-stars-c),
    2.54rem 0.54rem var(--color-stars-c), 2.57rem 1.48rem var(--color-stars-c),
    2.56rem 2.48rem var(--color-stars-c), 2.57rem -2.89rem var(--color-stars-c),
    2.58rem -0.12rem var(--color-stars-c), 2.61rem 1.99rem var(--color-stars-c),
    2.61rem 2.68rem var(--color-stars-c), 2.62rem 0.41rem var(--color-stars-c),
    2.62rem -4.28rem var(--color-stars-c), 2.62rem 3.41rem var(--color-stars-c),
    2.63rem -0.97rem var(--color-stars-c), 2.73rem -1.17rem var(--color-stars-c),
    2.83rem -0.07rem var(--color-stars-c), 2.76rem 3.15rem var(--color-stars-c),
    2.83rem 3.02rem var(--color-stars-c), 3.07rem 0.46rem var(--color-stars-c),
    2.85rem 4.12rem var(--color-stars-c), 2.86rem 0.63rem var(--color-stars-c),
    2.93rem -1.99rem var(--color-stars-c), 2.95rem 6rem var(--color-stars-c),
    3.01rem 0.78rem var(--color-stars-c), 3.02rem 2.73rem var(--color-stars-c),
    3.03rem -3.69rem var(--color-stars-c), 3.05rem 1.45rem var(--color-stars-c),
    3.05rem 2.74rem var(--color-stars-c), 3.19rem -1.14rem var(--color-stars-c),
    3.21rem 0.89rem var(--color-stars-c), 3.21rem 3.63rem var(--color-stars-c),
    3.32rem -0.08rem var(--color-stars-c), 3.23rem 6rem var(--color-stars-c),
    3.27rem -0.04rem var(--color-stars-c), 3.2rem -3.4rem var(--color-stars-c),
    3.32rem 2.38rem var(--color-stars-c), 3.36rem 1.8rem var(--color-stars-c),
    3.48rem 3.17rem var(--color-stars-c), 3.45rem -1.64rem var(--color-stars-c),
    3.45rem 0.39rem var(--color-stars-c), 3.51rem 5.49rem var(--color-stars-c),
    3.57rem 2.48rem var(--color-stars-c), 3.61rem -1.09rem var(--color-stars-c),
    3.5rem -0.32rem var(--color-stars-c), 3.61rem 3.68rem var(--color-stars-c),
    3.69rem -1.17rem var(--color-stars-c), 3.62rem -3.28rem var(--color-stars-c),
    3.63rem -0.06rem var(--color-stars-c), 3.73rem 0.83rem var(--color-stars-c),
    3.76rem 2.68rem var(--color-stars-c), 3.76rem 4.15rem var(--color-stars-c),
    3.83rem 0.93rem var(--color-stars-c), 3.93rem -0.99rem var(--color-stars-c),
    3.93rem 7.05rem var(--color-stars-c), 4.19rem -0.14rem var(--color-stars-c),
    4.03rem -2.69rem var(--color-stars-c), 4.05rem 2.45rem var(--color-stars-c),
    4.22rem 6.33rem var(--color-stars-c), 4.32rem 0.92rem var(--color-stars-c),
    4.32rem 3.38rem var(--color-stars-c), 4.45rem 1.39rem var(--color-stars-c),
    4.36rem 2.8rem var(--color-stars-c), 4.57rem 3.48rem var(--color-stars-c),
    4.58rem 1.88rem var(--color-stars-c), 4.61rem -0.09rem var(--color-stars-c),
    4.61rem 3.99rem var(--color-stars-c), 4.63rem -0.06rem var(--color-stars-c),
    4.61rem 4.68rem var(--color-stars-c), 4.69rem -0.17rem var(--color-stars-c),
    4.83rem 1.93rem var(--color-stars-c), 4.76rem 3.68rem var(--color-stars-c),
    4.86rem 2.63rem var(--color-stars-c), 4.93rem -0.99rem var(--color-stars-c),
    4rem -2.61rem var(--color-stars-c), 4rem 0.85rem var(--color-stars-c),
    4rem 2.22rem var(--color-stars-c), 5.05rem 4.33rem var(--color-stars-c),
    5.27rem 1.96rem var(--color-stars-c), 5.32rem 1.92rem var(--color-stars-c),
    5.32rem 4.38rem var(--color-stars-c), 5.36rem 3.8rem var(--color-stars-c),
    5.45rem 0.36rem var(--color-stars-c), 5.61rem 5.68rem var(--color-stars-c),
    5.45rem 2.39rem var(--color-stars-c), 5.62rem -1.28rem var(--color-stars-c),
    5.63rem 1.94rem var(--color-stars-c), 5.69rem 0.83rem var(--color-stars-c),
    5.76rem 4.68rem var(--color-stars-c), 5.93rem 1.01rem var(--color-stars-c),
    5rem -1.61rem var(--color-stars-c), 5rem 1.85rem var(--color-stars-c),
    5rem 3.22rem var(--color-stars-c), 6.03rem -0.99rem var(--color-stars-c),
    6.05rem 4.45rem var(--color-stars-c), 6.19rem -1.14rem var(--color-stars-c),
    6.32rem 5.38rem var(--color-stars-c), 6.36rem 4.8rem var(--color-stars-c),
    6.61rem 1.91rem var(--color-stars-c), 6.57rem 5.48rem var(--color-stars-c),
    7rem 3.85rem var(--color-stars-c), 6rem -0.61rem var(--color-stars-c),
    6rem 2.85rem var(--color-stars-c), 6rem 4.22rem var(--color-stars-c),
    7.45rem 4.39rem var(--color-stars-c), 7.69rem 2.83rem var(--color-stars-c),
    8rem 1.39rem var(--color-stars-c), 8rem 6.22rem var(--color-stars-c),
    -8.5rem 12.2rem var(--color-stars-c), 13.3rem 2.5rem var(--color-stars-c),
    -7.4rem 3.7rem var(--color-stars-c), -14.5rem 7.1rem var(--color-stars-c),
    0.9rem -1.3rem var(--color-stars-c), -13.6rem 7.8rem var(--color-stars-c),
    -12.4rem 8.2rem var(--color-stars-c), -7.1rem 14.7rem var(--color-stars-c),
    1.2rem -8.9rem var(--color-stars-c), -13.9rem 8.3rem var(--color-stars-c),
    8.8rem 14.3rem var(--color-stars-c), -2.2rem -14.9rem var(--color-stars-c),
    2.3rem -12.7rem var(--color-stars-c), 7.7rem 1.5rem var(--color-stars-c),
    8.9rem 1.1rem var(--color-stars-c), -5.2rem -8.6rem var(--color-stars-c),
    -7.6rem -6.9rem var(--color-stars-c), -11.4rem -3.4rem var(--color-stars-c),
    1.1rem 10.4rem var(--color-stars-c), -2.8rem 4.6rem var(--color-stars-c),
    -6.5rem -11.7rem var(--color-stars-c), -5.7rem -6.3rem var(--color-stars-c),
    -6.4rem 5.4rem var(--color-stars-c), 10.1rem -13.5rem var(--color-stars-c),
    -10.8rem -11.2rem var(--color-stars-c),
    -9.1rem -12.6rem var(--color-stars-c), 2.6rem -5.7rem var(--color-stars-c),
    10.7rem -10.3rem var(--color-stars-c), -5.1rem -1.2rem var(--color-stars-c),
    3.8rem 8.6rem var(--color-stars-c), 0.8rem 12.1rem var(--color-stars-c),
    11.6rem -7.2rem var(--color-stars-c), 13.8rem -4.1rem var(--color-stars-c),
    -10.3rem -7.5rem var(--color-stars-c), -7.9rem 8.2rem var(--color-stars-c),
    1.6rem 1.2rem var(--color-stars-c), 2.5rem 5.7rem var(--color-stars-c),
    3.7rem 14.5rem var(--color-stars-c), 14.3rem 9.1rem var(--color-stars-c),
    7.9rem 0.5rem var(--color-stars-c), -5.3rem 11.3rem var(--color-stars-c),
    -1.5rem -14.6rem var(--color-stars-c), -9.6rem 12.1rem var(--color-stars-c),
    -10.5rem 1.4rem var(--color-stars-c), 8.4rem 9.4rem var(--color-stars-c),
    12.5rem -11.8rem var(--color-stars-c), 4.6rem 12.1rem var(--color-stars-c),
    -8.2rem 8.7rem var(--color-stars-c), 12.7rem 0.3rem var(--color-stars-c),
    10.3rem 2.6rem var(--color-stars-c), -3.6rem -2.7rem var(--color-stars-c),
    -4.7rem -1.1rem var(--color-stars-c), -1.6rem 8.5rem var(--color-stars-c),
    -4.3rem 12.2rem var(--color-stars-c), -3.7rem -3.1rem var(--color-stars-c),
    -12.3rem 7.8rem var(--color-stars-c), -12.6rem 6.9rem var(--color-stars-c),
    -1.3rem -7.5rem var(--color-stars-c), 7.8rem -5.2rem var(--color-stars-c),
    0.7rem -2.1rem var(--color-stars-c), -5.9rem -14.6rem var(--color-stars-c),
    10.1rem 6.2rem var(--color-stars-c), -3.4rem 12.9rem var(--color-stars-c),
    -4.2rem 8.4rem var(--color-stars-c), -13.7rem -9.4rem var(--color-stars-c),
    3.5rem -10.8rem var(--color-stars-c), 11.4rem -3.1rem var(--color-stars-c),
    4.9rem 6.6rem var(--color-stars-c), -3.1rem 13.7rem var(--color-stars-c),
    1.8rem 7.6rem var(--color-stars-c), 14.2rem 14.5rem var(--color-stars-c);
  /* Color - Variables */
  --base-hue: 260deg;
  --distance: 20deg;
  --darkness: 10%;
  /* Colors - Vibrant */
  --color-a: hsl(var(--base-hue), 100%, 50%);
  --color-b: hsl(calc(var(--base-hue) + (var(--distance) * 2)), 100%, 50%);
  --color-c: hsl(calc(var(--base-hue) + (var(--distance) * 3)), 100%, 50%);
  --color-d: hsl(calc(var(--base-hue) + (var(--distance) * 4)), 100%, 50%);
  /* Colors - Dark */
  --color-a-dk: hsl(var(--base-hue), 100%, var(--darkness));
  --color-b-dk: hsl(
    calc(var(--base-hue) + (var(--distance) * 2)),
    100%,
    var(--darkness)
  );
  --color-c-dk: hsl(
    calc(var(--base-hue) + (var(--distance) * 3)),
    100%,
    var(--darkness)
  );
  --color-d-dk: hsl(
    calc(var(--base-hue) + (var(--distance) * 4)),
    100%,
    var(--darkness)
  );
  /* Colors - Neutral */
  --color-bright: hsl(calc(var(--base-hue) + (var(--distance) * 1)), 100%, 99%);
  --color-dark: hsl(calc(var(--base-hue) + (var(--distance) * 1)), 100%, 1%);
  /* Colors - Stars */
  --color-stars-a: hsl(
    calc(var(--base-hue) + (var(--distance) * 1)),
    70%,
    60%,
    100%
  );
  --color-stars-b: hsl(
    calc(var(--base-hue) + (var(--distance) * 2)),
    50%,
    80%,
    60%
  );
  --color-stars-c: hsl(
    calc(var(--base-hue) + (var(--distance) * 3)),
    10%,
    80%,
    20%
  );
  /* Card GradientBackground */
  --bg-space: radial-gradient(
    circle at 0% 100%,
    var(--color-dark),
    20%,
    var(--color-a-dk),
    var(--color-dark),
    var(--color-a-dk),
    var(--color-dark)
  );
  /* radial-gradient(
    circle farthest-corner at center center,
    var(--color-dark), 20%,
    var(--color-a-dk), 
    var(--color-dark), 60%, 
    var(--color-a-dk), 
    var(--color-dark)
  ); */
  /* Card Styles */
  font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: var(--bg-space);
  background-size: 300% 210%;
  box-shadow: var(--color-a) 0 3.4em 3.4em, var(--color-dark) 0 -0.8em 1.9em,
    var(--color-c) 0 0.3em 0.4em, var(--color-d) 0 0.8em 0.8em,
    var(--color-b) 0 -0.2em 0.3em;
  height: 400px;
  width: 280px;
  padding: 2rem;
  border-radius: 0.75rem;
  border: 0.05rem solid var(--color-c);
  animation: bg-gradient 15s linear infinite;
  position: relative;
  overflow: hidden;
}

/* Galaxy Stars - Smaller, Rotating */
.card::after {
  content: " ";
  position: absolute;
  top: 70%;
  left: 40%;
  width: 0.05rem;
  height: 0.05rem;
  border-radius: 1rem;
  background: transparent;
  background-size: 10% 10%;
  box-shadow: var(--stars-1);
  animation-name: space;
  animation-duration: 200s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  overflow: hidden;
}

/* Galaxy Stars - Larger, Rotating */
.card span::before {
  content: " ";
  position: absolute;
  top: 80%;
  left: 30%;
  width: 0.055rem;
  height: 0.055rem;
  transform: rotate(45deg);
  background: transparent;
  background-size: 10% 10%;
  box-shadow: var(--stars-2);
  animation-name: space2;
  animation-duration: 320s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  overflow: hidden;
}

/* Galaxy Stars - Flickering, Non-Rotating */
.content::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.06em;
  height: 0.06em;
  transform: rotate(45deg);
  background: transparent;
  background-size: 10% 10%;
  box-shadow: var(--stars-3);
  animation-name: space3;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  overflow: hidden;
}

.content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 1rem;
}

/* Header Text */
.heading {
  font-size: 1rem;
  letter-spacing: 0.05rem;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-bright);
  line-height: 2rem;
  z-index: 1;
  margin-top: .5rem;
  text-shadow: 2px 3px 5px var(--color-dark);
}

.heading span {
  display: block;
  text-align: justify;
  font-size: 3rem;
  color: var(--color-a);
  background-image: linear-gradient(
    45deg,
    var(--color-a),
    var(--color-b),
    var(--color-c),
    var(--color-d)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  animation-name: galaxy;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  text-shadow: none;
  overflow: hidden;
}

.item,
.item svg {
  display: flex;
  align-items: center;
  font-size: 2rem;
  text-transform: uppercase;
  margin: 0.25rem;
  text-shadow: 2px 3px 5px var(--color-dark);
}

.item svg {
  margin-right: .5rem;
  height: 2rem;
  width: 2rem;
  filter: drop-shadow(3px 5px 2px var(--color-dark));
}

.item--create svg {
  color: var(--color-a);
  z-index: 1;
}

.item--create svg:hover {
  color: var(--color-a);
  animation: space2 1s linear infinite;
  cursor: pointer;
  z-index: 1;
}

.item--create {
  color: var(--color-a);
  z-index: 1;
}

.item--post svg {
  color: var(--color-b);
  z-index: 1;
}

.item--post svg:hover {
  color: var(--color-b);
  animation: space2 1s linear infinite;
  cursor: pointer;
  z-index: 1;
}

.item--post {
  color: var(--color-b);
  z-index: 1;
}

.item--inspire svg {
  color: var(--color-c);
  z-index: 1;
}

.item--inspire svg:hover {
  color: var(--color-c);
  animation: space2 1s linear infinite;
  cursor: pointer;
  z-index: 1;
}

.item--inspire {
  color: var(--color-c);
}

/* Button */
button {
  display: flex;
  margin-bottom: 1.5rem;
  margin-top: .5rem;
  position: relative;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  padding: 1rem 2rem;
  display: inline-block;
  border-radius: 1.75rem;
  transition: all 0.2s;
  border: none;
  font-family: inherit;
  font-weight: 500;
  color: var(--color-dark);
  background-image: linear-gradient(
    45deg,
    var(--color-a),
    var(--color-b),
    var(--color-c),
    var(--color-d)
  );
  box-shadow: 0 1rem 1rem var(--color-dark);
  z-index: 1;
}

button:hover {
  transform: translateY(-3px);
  cursor: pointer;
  color: var(--color-bright);
  box-shadow: 0 10px 20px var(--color-a-dk);
}

button:active {
  transform: translateY(-1px);
  box-shadow: 0 1rem 1rem var(--color-dark);
}

button::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 1.75rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.4s;
}

button::after {
  background-color: var(--color-bright);
}

button:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

/*animations*/

/* Stars */
@keyframes space {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes space2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes space3 {
  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

/* Galaxy Span Text */
@keyframes galaxy {
  0%,
  50%,
  100% {
    background-position: 0% 100%;
  }

  10%,
  25%,
  75% {
    background-position: 100% 0%;
  }
}

/* Card Gradient Background */
@keyframes bg-gradient {
  0%,
  100% {
    background-position: 0% 100%;
  }

  25%,
  75% {
    background-position: 50% 50%;
  }

  50% {
    background-position: 100% 0%;
  }
}

</style>


================================================
FILE: Cards/satyamchaudharydev_brown-puma-94.html
================================================
  <div class="card work">
  <div class="img-section">
  <svg xmlns="http://www.w3.org/2000/svg" height="77" width="76"><path fill-rule="nonzero" fill="#3F9CBB" d="m60.91 71.846 12.314-19.892c3.317-5.36 3.78-13.818-2.31-19.908l-26.36-26.36c-4.457-4.457-12.586-6.843-19.908-2.31L4.753 15.69c-5.4 3.343-6.275 10.854-1.779 15.35a7.773 7.773 0 0 0 7.346 2.035l7.783-1.945a3.947 3.947 0 0 1 3.731 1.033l22.602 22.602c.97.97 1.367 2.4 1.033 3.732l-1.945 7.782a7.775 7.775 0 0 0 2.037 7.349c4.49 4.49 12.003 3.624 15.349-1.782Zm-24.227-46.12-1.891-1.892-1.892 1.892a2.342 2.342 0 0 1-3.312-3.312l1.892-1.892-1.892-1.891a2.342 2.342 0 0 1 3.312-3.312l1.892 1.891 1.891-1.891a2.342 2.342 0 0 1 3.312 3.312l-1.891 1.891 1.891 1.892a2.342 2.342 0 0 1-3.312 3.312Zm14.19 14.19a2.343 2.343 0 1 1 3.315-3.312 2.343 2.343 0 0 1-3.314 3.312Zm0 7.096a2.343 2.343 0 0 1 3.313-3.312 2.343 2.343 0 0 1-3.312 3.312Zm7.096-7.095a2.343 2.343 0 1 1 3.312 0 2.343 2.343 0 0 1-3.312 0Zm0 7.095a2.343 2.343 0 0 1 3.312-3.312 2.343 2.343 0 0 1-3.312 3.312Z"></path></svg>                </div>
  <div class="card-desc">
  <div class="card-header">
  <div class="card-title">Play</div>
  <div class="card-menu">
  <div class="dot"></div>
  <div class="dot"></div>
    <div class="dot"></div>
    </div>
  </div>
  <div class="card-time">32hrs</div>
  <p class="recent">Last Week-36hrs</p>
</div></div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: card */
.card {
 --primary-clr: #1C204B;
 --dot-clr: #BBC0FF;
 --play: hsl(195, 74%, 62%);
 width: 200px;
 height: 170px;
 border-radius: 10px;
}

.card {
 font-family: "Arial";
 color: #fff;
 display: grid;
 cursor: pointer;
 grid-template-rows: 50px 1fr;
}

.card:hover .img-section {
 transform: translateY(1em);
}

.card-desc {
 border-radius: 10px;
 padding: 15px;
 position: relative;
 top: -10px;
 display: grid;
 gap: 10px;
 background: var(--primary-clr);
}

.card-time {
 font-size: 1.7em;
 font-weight: 500;
}

.img-section {
 transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 background: hsl(195, 74%, 62%);
}

.card-header {
 display: flex;
 align-items: center;
 width: 100%;
}

.card-title {
 flex: 1;
 font-size: 0.9em;
 font-weight: 500;
}

.card-menu {
 display: flex;
 gap: 4px;
 margin-inline: auto;
}

.card svg {
 float: right;
 max-width: 100%;
 max-height: 100%;
}

.card .dot {
 width: 5px;
 height: 5px;
 border-radius: 50%;
 background: var(--dot-clr);
}

.card .recent {
 line-height: 0;
 font-size: 0.8em;
}
</style>


================================================
FILE: Cards/satyamchaudharydev_itchy-chipmunk-95.html
================================================
<div class="card">
    <h3 class="card__title">Title
    </h3>
    <p class="card__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
    <div class="card__date">
        April 15, 2022
    </div>
    <div class="card__arrow">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="15" width="15">
            <path fill="#fff" d="M13.4697 17.9697C13.1768 18.2626 13.1768 18.7374 13.4697 19.0303C13.7626 19.3232 14.2374 19.3232 14.5303 19.0303L20.3232 13.2374C21.0066 12.554 21.0066 11.446 20.3232 10.7626L14.5303 4.96967C14.2374 4.67678 13.7626 4.67678 13.4697 4.96967C13.1768 5.26256 13.1768 5.73744 13.4697 6.03033L18.6893 11.25H4C3.58579 11.25 3.25 11.5858 3.25 12C3.25 12.4142 3.58579 12.75 4 12.75H18.6893L13.4697 17.9697Z"></path>
        </svg>
    </div>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: card */
/* this card is inspired form this - https://georgefrancis.dev/ */

.card {
  --border-radius: 0.75rem;
  --primary-color: #7257fa;
  --secondary-color: #3c3852;
  width: 210px;
  font-family: "Arial";
  padding: 1rem;
  cursor: pointer;
  border-radius: var(--border-radius);
  background: #f1f1f3;
  box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 3%);
  position: relative;
}

.card > * + * {
  margin-top: 1.1em;
}

.card .card__content {
  color: var(--secondary-color);
  font-size: 0.86rem;
}

.card .card__title {
  padding: 0;
  font-size: 1.3rem;
  font-weight: bold;
}

.card .card__date {
  color: #6e6b80;
  font-size: 0.8rem;
}

.card .card__arrow {
  position: absolute;
  background: var(--primary-color);
  padding: 0.4rem;
  border-top-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  bottom: 0;
  right: 0;
  transition: 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card svg {
  transition: 0.2s;
}

/* hover */
.card:hover .card__title {
  color: var(--primary-color);
  text-decoration: underline;
}

.card:hover .card__arrow {
  background: #111;
}

.card:hover .card__arrow svg {
  transform: translateX(3px);
}
</style>


================================================
FILE: Cards/satyamchaudharydev_stupid-bulldog-53.html
================================================
<div class="card">
    <div class="card-top">
        <p class="card__title">Rick And Morty</p>
        <div class="rating">
            <svg width="17" height="17" viewBox="0 0 17 17" fill="none">
                <path d="M8.51948 1.625C9.1214 1.625 10.0427 4.16625 10.4636 5.43013C10.6014 5.8437 10.9837 6.13054 11.4192 6.14904C12.7373 6.20505 15.375 6.39722 15.375 7.0384C15.375 7.66696 13.5161 9.17543 12.5322 9.92976C12.1816 10.1986 12.0365 10.6604 12.1687 11.082C12.5631 12.34 13.2755 14.8755 12.7573 15.3009C12.2506 15.717 10.2147 14.2326 9.15246 13.4009C8.77021 13.1016 8.22949 13.1012 7.84719 13.4004C6.78473 14.2321 4.75246 15.717 4.28166 15.3009C3.79912 14.8745 4.47615 12.3275 4.84741 11.0727C4.97086 10.6555 4.82425 10.2029 4.47885 9.93826C3.49798 9.18681 1.625 7.66933 1.625 7.0384C1.625 6.3962 4.2711 6.20444 5.5871 6.14878C6.0197 6.13048 6.3998 5.84769 6.53973 5.43793C6.97041 4.17673 7.91633 1.625 8.51948 1.625Z" fill="#00B9AE" stroke="#00B9AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </div>
    </div>
    <div class="card__info">
        <p class="episode__num">46Ep</p>
        <p class="episode__type">Fantasy</p>
    </div>
    <div class="card__btns">
        <button class="add-btn">+</button>
        <button class="watch-btn">watch</button>
    </div>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: card */
.card {
  --width: 190px;
  --height: 210px;
  --primary: #00b9ae;
  --text: #f9f9f9b2;
  --secondary: #f9f9f933;
  --radius: 20px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: var(--width);
  height: var(--height);
  background: linear-gradient(
      180deg,
      rgba(22, 24, 30, 0) 0%,
      rgba(22, 24, 30, 0.7) 65.28%
    ),
    linear-gradient(0deg, rgba(22, 24, 30, 0.4), rgba(22, 24, 30, 0.4));
  background-size: cover;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1em;
  padding-top: 1.4em;
}


/*  */

.card .card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 0.2rem;
}

.rating {
  margin-top: 0.5em;
  width: 85px;
  height: 16px;
  background-image: url("data:image/svg+xml,%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20%20%20%20%20%20width%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20height%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20viewBox%3D%220%200%2017%2017%22%0A%20%20%20%20%20%20%20%20%20%20fill%3D%22none%22%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20%20%20%20d%3D%22M8.51948%201.625C9.1214%201.625%2010.0427%204.16625%2010.4636%205.43013C10.6014%205.8437%2010.9837%206.13054%2011.4192%206.14904C12.7373%206.20505%2015.375%206.39722%2015.375%207.0384C15.375%207.66696%2013.5161%209.17543%2012.5322%209.92976C12.1816%2010.1986%2012.0365%2010.6604%2012.1687%2011.082C12.5631%2012.34%2013.2755%2014.8755%2012.7573%2015.3009C12.2506%2015.717%2010.2147%2014.2326%209.15246%2013.4009C8.77021%2013.1016%208.22949%2013.1012%207.84719%2013.4004C6.78473%2014.2321%204.75246%2015.717%204.28166%2015.3009C3.79912%2014.8745%204.47615%2012.3275%204.84741%2011.0727C4.97086%2010.6555%204.82425%2010.2029%204.47885%209.93826C3.49798%209.18681%201.625%207.66933%201.625%207.0384C1.625%206.3962%204.2711%206.20444%205.5871%206.14878C6.0197%206.13048%206.3998%205.84769%206.53973%205.43793C6.97041%204.17673%207.91633%201.625%208.51948%201.625Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3D%222%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E");
  background-repeat: space;
}

.card .card__info {
  display: flex;
  margin-top: auto;
  font-size: 0.8rem;
  color: var(--text);
  font-weight: 400;
  justify-content: space-between;
}

.card .card__btns {
  display: flex;
  gap: 0.6rem;
}

.card button {
  border: none;
  background: none;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: bold;
  transition: 0.2s;
}

.card button:hover {
  opacity: 0.8;
  transform: scale(0.9);
}

.card .add-btn {
  color: #fff;
  padding: 0.5em 0.8em;
  background: rgba(249, 249, 249, 0.2);
  border-radius: 14px;
}

.card .watch-btn {
  flex: 1;
}

</style>


================================================
FILE: Cards/satyamchaudharydev_tender-robin-90.html
================================================
<div class="card">
    <div class="icon">
        <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.984 16.815c2.596 0 4.706-2.111 4.706-4.707 0-1.409-.623-2.674-1.606-3.538-.346-.303-.735-.556-1.158-.748-.593-.27-1.249-.421-1.941-.421s-1.349.151-1.941.421c-.424.194-.814.447-1.158.749-.985.864-1.608 2.129-1.608 3.538 0 2.595 2.112 4.706 4.706 4.706zm.016-8.184c1.921 0 3.479 1.557 3.479 3.478 0 1.921-1.558 3.479-3.479 3.479s-3.479-1.557-3.479-3.479c0-1.921 1.558-3.478 3.479-3.478zm5.223.369h6.777v10.278c0 2.608-2.114 4.722-4.722 4.722h-14.493c-2.608 0-4.785-2.114-4.785-4.722v-10.278h6.747c-.544.913-.872 1.969-.872 3.109 0 3.374 2.735 6.109 6.109 6.109s6.109-2.735 6.109-6.109c.001-1.14-.327-2.196-.87-3.109zm2.055-9h-12.278v5h-1v-5h-1v5h-1v-4.923c-.346.057-.682.143-1 .27v4.653h-1v-4.102c-1.202.857-2 2.246-2 3.824v3.278h7.473c1.167-1.282 2.798-2 4.511-2 1.722 0 3.351.725 4.511 2h7.505v-3.278c0-2.608-2.114-4.722-4.722-4.722zm2.722 5.265c0 .406-.333.735-.745.735h-2.511c-.411 0-.744-.329-.744-.735v-2.53c0-.406.333-.735.744-.735h2.511c.412 0 .745.329.745.735v2.53z"></path>
        </svg>
    </div>
    <strong> Instagram
    </strong>
    <div class="card__body">
        Get UI elements that help you stand out.
    </div>
    <span>Follow us</span>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: instagram, card, hover */
.card {
  --bg: #f7f7f8;
  --hover-bg: #FFE5F4;
  --hover-text: #E50087;
  max-width: 23ch;
  text-align: center;
  background: var(--bg);
  padding: 1.5em;
  padding-block: 1.8em;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  transition: .3s cubic-bezier(.6,.4,0,1),transform .15s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.card__body {
  color: #464853;
  line-height: 1.5em;
  font-size: 1em;
}

.card > :not(span) {
  transition: .3s cubic-bezier(.6,.4,0,1);
}

.card > strong {
  display: block;
  font-size: 1.4rem;
  letter-spacing: -.035em;
}

.card span {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--hover-text);
  border-radius: 5px;
  font-weight: bold;
  top: 100%;
  transition: all .3s cubic-bezier(.6,.4,0,1);
}

.card:hover span {
  top: 0;
  font-size: 1.2em;
}

.card:hover {
  background: var(--hover-bg);
}

.card:hover>div,.card:hover>strong {
  opacity: 0;
}
</style>


================================================
FILE: Cards/scob337_tricky-panda-21.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by scob337 - Tags: card */
.one-div {
  width: 300px;
  height: 300px;
  margin: auto;
  background-color: hsl(180, 5%, 17%);
  border-radius: 50%;
  position: relative;
}

.one-div::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: hsla(236, 93%, 43%, 0.897);
  top: 190px;
  left: 200px;
  border-radius: 50%;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.one-div::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: hsla(236, 93%, 43%, 0.897);
  top: 100px;
  left: 50px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
</style>


================================================
FILE: Cards/seyed-mohsen-mousavi_dull-fly-9.html
================================================
<!-- From Uiverse.io by seyed-mohsen-mousavi  - Tags: alert, notification, card, message -->
<div class="flex flex-col gap-2 w-60 sm:w-72 text-[10px] sm:text-xs z-50">
  <div
    class="info-alert cursor-default flex items-center justify-between w-full h-12 sm:h-14 rounded-lg bg-[#232531] px-[10px]"
  >
    <div class="flex gap-2">
      <div class="text-[#1c56be] bg-white/5 backdrop-blur-xl p-1 rounded-lg">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.8"
          stroke="currentColor"
          class="w-6 h-6 shadow-[#1c569e]"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 0 1-.923 1.785A5.969 5.969 0 0 0 6 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337Z"
          ></path>
        </svg>
      </div>
      <div>
        <p class="text-white">You have a message !</p>
        <p class="text-gray-500">Click To see the message ...</p>
      </div>
    </div>
    <button
      class="text-gray-600 hover:bg-white/10 p-1 rounded-md transition-colors ease-linear"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-6 h-6"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18 18 6M6 6l12 12"
        ></path>
      </svg>
    </button>
  </div>
</div>


    

================================================
FILE: Cards/seyed-mohsen-mousavi_heavy-cobra-18.html
================================================
<!-- From Uiverse.io by seyed-mohsen-mousavi  - Tags: alert, notification, card, message -->
<div class="flex flex-col gap-2 w-60 sm:w-72 text-[10px] sm:text-xs z-50">
  <div
    class="error-alert cursor-default flex items-center justify-between w-full h-12 sm:h-14 rounded-lg bg-[#232531] px-[10px]"
  >
    <div class="flex gap-2">
      <div class="text-[#d65563] bg-white/5 backdrop-blur-xl p-1 rounded-lg">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-6 h-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
          ></path>
        </svg>
      </div>
      <div>
        <p class="text-white">Please try again</p>
        <p class="text-gray-500">This is the description part</p>
      </div>
    </div>
    <button
      class="text-gray-600 hover:bg-white/10 p-1 rounded-md transition-colors ease-linear"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-6 h-6"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18 18 6M6 6l12 12"
        ></path>
      </svg>
    </button>
  </div>
</div>


    

================================================
FILE: Cards/seyed-mohsen-mousavi_hot-pig-83.html
================================================
<!-- From Uiverse.io by seyed-mohsen-mousavi  - Tags: button, card, svg, box, text -->
<div class="bg-white w-80 p-5 h-60 shadow-md relative rounded-md">
  <button
    class="bg-green-200 text-green-700 rounded-xl px-3 py-1 absolute right-2 text-sm"
  >
    4.5
  </button>
  <div class="py-3 px-1">
    <svg
      class="w-10 h-9"
      stroke="currentColor"
      stroke-width="1.5"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
  </div>
  <p class="text-lg font-bold font-sans">Chem</p>
  <div class="text-sm py-2 font-mono">
    branch of science that examines the compounds made of atoms, molecules, and
    the properties and behavior of materials and the effect of materials on each
    other....
  </div>
</div>


    

================================================
FILE: Cards/seyed-mohsen-mousavi_light-dingo-21.html
================================================
<!-- From Uiverse.io by seyed-mohsen-mousavi  - Tags: profile, card, cool card -->
<div
  class="relative rounded-xl overflow-hidden flex flex-col items-center shadow-lg bg-white font-Roboto-light"
>
  <div class="h-24 w-full bg-green-400"></div>
  <div class="top-16 z-10 flex items-center flex-col gap-4 px-5 py-5">
    <div class="-mt-20">
      <svg
        fill="#000000"
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        class="icon w-[4.7rem]"
        viewBox="0 0 1024 1024"
      >
        <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
        <g
          stroke-linejoin="round"
          stroke-linecap="round"
          id="SVGRepo_tracerCarrier"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <path
            fill="#9DC6AF"
            d="M947.8 554.1c0 242-196.2 438.2-438.2 438.2S71.4 796.1 71.4 554.1c0-134.6 60.7-255.1 156.3-335.5 76.2-64.1 174.5-102.7 281.9-102.7 242 0 438.2 196.2 438.2 438.2z"
          ></path>
          <path
            fill="#191919"
            d="M509.6 1005.2c-60.9 0-120-11.9-175.6-35.5-53.7-22.7-102-55.3-143.4-96.7-41.4-41.4-74-89.7-96.7-143.4C70.4 674 58.4 615 58.4 554.1c0-133.5 58.7-259.4 160.9-345.4 39.8-33.5 84.6-59.6 133.1-77.6 50.2-18.7 103.1-28.1 157.2-28.1 60.9 0 120 11.9 175.6 35.5 53.7 22.7 102 55.3 143.4 96.7 41.4 41.4 74 89.7 96.7 143.4 23.5 55.6 35.5 114.7 35.5 175.6s-11.9 120-35.5 175.6c-22.7 53.7-55.3 102-96.7 143.4-41.4 41.4-89.7 74-143.4 96.7-55.6 23.4-114.7 35.3-175.6 35.3z m0-876.3c-51 0-100.8 8.9-148.1 26.5-45.7 17-87.9 41.6-125.4 73.1-96.4 81.1-151.7 199.7-151.7 325.6 0 57.4 11.2 113.1 33.4 165.5 21.4 50.6 52.1 96.1 91.1 135.1s84.5 69.7 135.1 91.1c52.4 22.2 108.1 33.4 165.5 33.4 57.4 0 113.1-11.2 165.5-33.4 50.6-21.4 96.1-52.1 135.1-91.1s69.7-84.5 91.1-135.1c22.2-52.4 33.4-108.1 33.4-165.5 0-57.4-11.2-113.1-33.4-165.5-21.4-50.6-52.1-96.1-91.1-135.1s-84.5-69.7-135.1-91.1c-52.3-22.3-108-33.5-165.4-33.5z"
          ></path>
          <path
            fill="#66A37F"
            d="M158.2 290H861v26H158.2zM91.1 406.6h837v26h-837zM77.1 523.1h865v26h-865zM77.1 639.6h865v26h-865zM132.8 756.2h753.6v26H132.8z"
          ></path>
          <path
            fill="#D39E33"
            d="M535.5 362.5c-29.8 20.9-201.8-2.7-309.4-49.7-0.1 4.1-0.4 8.1-0.4 12.2v279c0 216.6 119.8 393.8 266.3 393.8S758.3 820.6 758.3 604V351.6L554.8 234.8l-19.3 127.7z"
          ></path>
          <path
            fill="#0C0C0C"
            d="M491.9 1010.7c-154 0-279.3-182.5-279.3-406.8v-279c0-2.7 0.1-5.2 0.2-7.6 0.1-1.7 0.2-3.3 0.2-4.8l0.4-19.4 17.8 7.8c48.1 21 115.7 39.5 180.6 49.4 62.2 9.5 98.5 7.7 111.8 3.5l21.2-139.7 226.4 130V604c0 224.2-125.3 406.7-279.3 406.7zM238.6 332v272c0 51.7 6.9 101.9 20.5 149.3 13.1 45.5 31.7 86.4 55.5 121.5 23.5 34.7 50.7 61.9 80.8 80.9 30.7 19.3 63.2 29.1 96.5 29.1s65.8-9.8 96.5-29.1c30.1-18.9 57.3-46.1 80.8-80.9 23.7-35.1 42.4-76 55.5-121.5 13.6-47.4 20.5-97.6 20.5-149.3V359.1L564.8 255.5l-17.4 114.4-4.6 3.2c-9.6 6.7-27 10-53.1 10h-0.1c-22.6 0-50.8-2.5-81.7-7.2-59.4-9-121.2-25.1-169.3-43.9z"
          ></path>
          <path
            fill="#FAFCFB"
            d="M559 800.6L516.9 812H475l-37.8-11.5v-23H435L290.7 952.3c58.7 28.9 126.6 45.4 199 45.4 77.2 0 149.2-18.7 210.5-51.2L559 777.6v23z"
          ></path>
          <path
            fill="#141414"
            d="M489.7 1010.7c-71.7 0-142.5-16.2-204.8-46.8-3.6-1.8-6.1-5-7-8.9-0.8-3.9 0.2-7.9 2.7-11L425 769.3c2.5-3 6.1-4.7 10-4.7h2.2c7.2 0 13 5.8 13 13v13.3l26.7 8.1h38.2l30.9-8.4v-13c0-5.5 3.4-10.4 8.6-12.2 5.1-1.9 10.9-0.3 14.4 3.9l141.2 168.9c2.5 3 3.5 7 2.8 10.8-0.8 3.8-3.2 7.2-6.7 9-65.1 34.5-140 52.7-216.6 52.7z m-178.3-63.1c55 24.3 116.2 37.1 178.3 37.1 66.8 0 132.1-14.6 190-42.4l-111.1-133c-1.6 1.8-3.7 3.1-6.2 3.8l-42.1 11.5c-1.1 0.3-2.3 0.5-3.4 0.5H475c-1.3 0-2.6-0.2-3.8-0.6L433.4 813c-2.8-0.9-5.2-2.6-6.8-4.9L311.4 947.6z"
          ></path>
          <path
            fill="#191919"
            d="M509.6 1005.2c-60.9 0-120-11.9-175.6-35.5-53.7-22.7-102-55.3-143.4-96.7-41.4-41.4-74-89.7-96.7-143.4C70.4 674 58.4 615 58.4 554.1c0-133.5 58.7-259.4 160.9-345.4 39.8-33.5 84.6-59.6 133.1-77.6 50.2-18.7 103.1-28.1 157.2-28.1 60.9 0 120 11.9 175.6 35.5 53.7 22.7 102 55.3 143.4 96.7 41.4 41.4 74 89.7 96.7 143.4 23.5 55.6 35.5 114.7 35.5 175.6s-11.9 120-35.5 175.6c-22.7 53.7-55.3 102-96.7 143.4-41.4 41.4-89.7 74-143.4 96.7-55.6 23.4-114.7 35.3-175.6 35.3z m0-876.3c-51 0-100.8 8.9-148.1 26.5-45.7 17-87.9 41.6-125.4 73.1-96.4 81.1-151.7 199.7-151.7 325.6 0 57.4 11.2 113.1 33.4 165.5 21.4 50.6 52.1 96.1 91.1 135.1s84.5 69.7 135.1 91.1c52.4 22.2 108.1 33.4 165.5 33.4 57.4 0 113.1-11.2 165.5-33.4 50.6-21.4 96.1-52.1 135.1-91.1s69.7-84.5 91.1-135.1c22.2-52.4 33.4-108.1 33.4-165.5 0-57.4-11.2-113.1-33.4-165.5-21.4-50.6-52.1-96.1-91.1-135.1s-84.5-69.7-135.1-91.1c-52.3-22.3-108-33.5-165.4-33.5z"
          ></path>
          <path
            fill="#FAFCFB"
            d="M562.5 799.9l-45.8 14.5H471l-41.1-14.5V651h132.6z"
          ></path>
          <path
            fill="#141414"
            d="M516.7 827.4H471c-1.5 0-2.9-0.3-4.3-0.7l-41.2-14.5c-5.2-1.8-8.7-6.7-8.7-12.3V651c0-7.2 5.8-13 13-13h132.7c7.2 0 13 5.8 13 13v148.9c0 5.7-3.7 10.7-9.1 12.4l-45.9 14.5c-1.2 0.4-2.5 0.6-3.8 0.6z m-43.4-26h41.4l34.9-11V664H442.9v126.7l30.4 10.7z"
          ></path>
          <path
            fill="#FAFCFB"
            d="M729.9 407.5a42.8 52.2 0 1 0 85.6 0 42.8 52.2 0 1 0-85.6 0Z"
          ></path>
          <path
            fill="#141414"
            d="M772.7 472.7c-30.8 0-55.8-29.3-55.8-65.2 0-36 25-65.2 55.8-65.2s55.8 29.3 55.8 65.2c0 35.9-25 65.2-55.8 65.2z m0-104.5c-16.4 0-29.8 17.6-29.8 39.2s13.4 39.2 29.8 39.2 29.8-17.6 29.8-39.2-13.4-39.2-29.8-39.2z"
          ></path>
          <path
            fill="#EEA7F9"
            d="M715.4 487.3a45.4 31.1 0 1 0 90.8 0 45.4 31.1 0 1 0-90.8 0Z"
          ></path>
          <path
            fill="#111111"
            d="M760.8 531.4c-32.7 0-58.4-19.4-58.4-44.1 0-24.7 25.6-44.1 58.4-44.1s58.4 19.4 58.4 44.1c-0.1 24.7-25.7 44.1-58.4 44.1z m0-62.2c-15.3 0-32.4 7.7-32.4 18.1 0 8.5 13.8 18.1 32.4 18.1 15.3 0 32.4-7.7 32.4-18.1-0.1-8.5-13.9-18.1-32.4-18.1z"
          ></path>
          <path
            fill="#EEA7F9"
            d="M180.4 487.3a45.4 31.1 0 1 0 90.8 0 45.4 31.1 0 1 0-90.8 0Z"
          ></path>
          <path
            fill="#111111"
            d="M225.8 531.4c-32.7 0-58.4-19.4-58.4-44.1 0-24.7 25.6-44.1 58.4-44.1s58.4 19.4 58.4 44.1c0 24.7-25.7 44.1-58.4 44.1z m0-62.2c-15.3 0-32.4 7.7-32.4 18.1 0 8.5 13.8 18.1 32.4 18.1 15.3 0 32.4-7.7 32.4-18.1 0-8.5-13.9-18.1-32.4-18.1z"
          ></path>
          <path
            fill="#FAFCFB"
            d="M168.3 407.5a42.8 52.2 0 1 0 85.6 0 42.8 52.2 0 1 0-85.6 0Z"
          ></path>
          <path
            fill="#141414"
            d="M211.1 472.7c-30.8 0-55.8-29.3-55.8-65.2 0-36 25-65.2 55.8-65.2s55.8 29.3 55.8 65.2c-0.1 35.9-25.1 65.2-55.8 65.2z m0-104.5c-16.4 0-29.8 17.6-29.8 39.2s13.4 39.2 29.8 39.2 29.8-17.6 29.8-39.2c-0.1-21.6-13.4-39.2-29.8-39.2z"
          ></path>
          <path
            fill="#FAFCFB"
            d="M535.5 321.1c-29.8 14.1-201.8-1.8-309.4-33.6-0.1 2.8-0.4 5.5-0.4 8.2v188.7c0 146.5 119.8 266.3 266.3 266.3s266.3-119.8 266.3-266.3V313.8l-203.3-79-19.5 86.3z"
          ></path>
          <path
            fill="#141414"
            d="M491.9 763.7c-74.3 0-144.4-29.1-197.3-82-52.9-52.9-82-123-82-197.3V295.7c0-2 0.1-4 0.3-5.6 0.1-1.1 0.1-2.1 0.2-3l0.5-16.8 16.2 4.8c48.4 14.3 116.2 26.8 181.5 33.6 58.8 6.1 97.6 5.6 113.2 2.4l21-93.8L771.2 305v179.6c0 74.3-29.1 144.4-82 197.3s-123 81.8-197.3 81.8zM238.6 304.5v179.9c0 67.4 26.4 130.9 74.4 178.9s111.5 74.4 178.9 74.4 130.9-26.4 178.9-74.4 74.4-111.5 74.4-178.9V322.7l-181-70.3-17.4 77.8-5.7 2.7c-23.8 11.3-100.6 4.9-132.4 1.6-59.9-6.2-122-17.2-170.1-30z"
          ></path>
          <path
            fill="#D39E33"
            d="M491.7 29.4c-143.7 0-261.4 115.4-265.9 258.1 107.6 31.8 279.6 47.7 309.4 33.6l19.4-86.3 203.3 79v-18C758 149.3 638.1 29.4 491.7 29.4z"
          ></path>
          <path
            fill="#0C0C0C"
            d="M489.2 339.3c-29.4 0-62.6-2.9-80.9-4.8-66.8-6.9-136.4-19.8-186.2-34.5l-9.6-2.8 0.3-10c2.2-72.5 32.3-140.5 84.6-191.4 52.5-51.1 121.5-79.2 194.2-79.2 74.3 0 144.4 29.1 197.3 82 52.9 52.9 82 123 82 197.3v37l-207-80.4-17.4 77.8-5.7 2.7c-10.1 4.7-29.8 6.3-51.6 6.3z m-249.9-61.5C286.8 291 350 302.3 411 308.6c58.8 6.1 97.6 5.6 113.2 2.4l21-93.8L745 294.8c-0.2-67-26.7-130.2-74.4-177.9-48-48-111.5-74.4-178.9-74.4-66 0-128.5 25.5-176.1 71.8-45.1 43.8-71.9 101.6-76.3 163.5z"
          ></path>
          <path
            fill="#0F0F0F"
            d="M374.6 432.9m-28.9 0a28.9 28.9 0 1 0 57.8 0 28.9 28.9 0 1 0-57.8 0Z"
          ></path>
          <path
            fill="#0F0F0F"
            d="M609.1 432.9m-28.9 0a28.9 28.9 0 1 0 57.8 0 28.9 28.9 0 1 0-57.8 0Z"
          ></path>
          <path
            fill="#FAFCFB"
            d="M559.1 508.5c0 37-30.3 67.2-67.2 67.2-37 0-67.2-30.3-67.2-67.2"
          ></path>
          <path
            fill="#141414"
            d="M491.9 588.7c-44.2 0-80.2-36-80.2-80.2 0-7.2 5.8-13 13-13s13 5.8 13 13c0 29.9 24.3 54.2 54.2 54.2 29.9 0 54.2-24.3 54.2-54.2 0-7.2 5.8-13 13-13s13 5.8 13 13c0 44.2-36 80.2-80.2 80.2z"
          ></path>
        </g>
      </svg>
    </div>

    <div class="flex items-center flex-col">
      <p title="name/نام" class="text-black font-Roboto-md">Parisa Tabrizi</p>
      <p title="bio/بیوگرافی" class="text-xs text-gray-500 font-medium">
        In the business of making things happen
      </p>
    </div>

    <div class="flex items-center gap-3">
      <button
        class="bg-green-400 transition-all gradient text-[15px] text-white px-3 py-[6px] rounded-full flex items-center gap-1"
      >
        Followed
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-4 h-4"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="m4.5 12.75 6 6 9-13.5"
          ></path>
        </svg>
      </button>
      <button
        class="bg-gray-200/65 hover:bg-gray-200 transition-colors p-2 rounded-full"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-5 h-5"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/seyed-mohsen-mousavi_orange-jellyfish-58.html
================================================
<!-- From Uiverse.io by seyed-mohsen-mousavi  - Tags: card, box, box-shadow, subscribe -->
<div
  class="w-72 bg-white rounded-b-lg border-t-8 border-green-400 px-4 py-5 flex flex-col justify-around shadow-md"
>
  <p class="text-lg font-bold font-sans">Premium</p>
  <div class="py-3">
    <p class="text-gray-400 text-sm">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus rerum
      deleniti eaque ...
    </p>
  </div>
  <div class="flex justify-between">
    <svg
      class="w-6 h-6"
      stroke="currentColor"
      stroke-width="1.5"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
    <div class="text-sm flex gap-2">
      <button
        class="bg-slate-200 px-2 rounded-xl hover:bg-slate-400 transition-colors ease-in-out"
      >
        glee
      </button>
      <button
        class="bg-slate-200 px-2 rounded-xl hover:bg-slate-400 transition-colors ease-in-out"
      >
        download
      </button>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/seyed-mohsen-mousavi_swift-sloth-95.html
================================================
<!-- From Uiverse.io by seyed-mohsen-mousavi  - Tags: subscription, green, card, subscribe -->
<div
  class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105"
>
  <div class="p-1 bg-green-200"></div>
  <div class="p-8">
    <h2 class="text-3xl font-bold text-gray-800 mb-4">Pro Plan</h2>
    <p class="text-gray-600 mb-6">Perfect for growing businesses</p>
    <p class="text-4xl font-bold text-gray-800 mb-6">$49.99</p>
    <ul class="text-sm text-gray-600 mb-6">
      <li class="mb-2 flex items-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          stroke="currentColor"
          fill="none"
          class="w-4 h-4 mr-2 text-green-500"
        >
          <path
            d="M5 13l4 4L19 7"
            stroke-width="2"
            stroke-linejoin="round"
            stroke-linecap="round"
          ></path>
        </svg>
        25 Users
      </li>
      <li class="mb-2 flex items-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          stroke="currentColor"
          fill="none"
          class="w-4 h-4 mr-2 text-green-500"
        >
          <path
            d="M5 13l4 4L19 7"
            stroke-width="2"
            stroke-linejoin="round"
            stroke-linecap="round"
          ></path>
        </svg>
        Advanced Features
      </li>
      <li class="flex items-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          stroke="currentColor"
          fill="none"
          class="w-4 h-4 mr-2 text-green-500"
        >
          <path
            d="M5 13l4 4L19 7"
            stroke-width="2"
            stroke-linejoin="round"
            stroke-linecap="round"
          ></path>
        </svg>
        24/7 Support
      </li>
    </ul>
  </div>
  <div class="p-4">
    <button
      class="w-full bg-green-500 text-white rounded-full px-4 py-2 hover:bg-green-700 focus:outline-none focus:shadow-outline-green active:bg-green-800"
    >
      Select Plan
    </button>
  </div>
</div>


    

================================================
FILE: Cards/seyed-mohsen-mousavi_wicked-chipmunk-81.html
================================================
<!-- From Uiverse.io by seyed-mohsen-mousavi  - Tags: alert, notification, card, message -->
<div class="flex flex-col gap-2 w-60 sm:w-72 text-[10px] sm:text-xs z-50">
  <div
    class="succsess-alert cursor-default flex items-center justify-between w-full h-12 sm:h-14 rounded-lg bg-[#232531] px-[10px]"
  >
    <div class="flex gap-2">
      <div class="text-[#2b9875] bg-white/5 backdrop-blur-xl p-1 rounded-lg">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-6 h-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="m4.5 12.75 6 6 9-13.5"
          ></path>
        </svg>
      </div>
      <div>
        <p class="text-white">done successfully :)</p>
        <p class="text-gray-500">This is the description section</p>
      </div>
    </div>
    <button
      class="text-gray-600 text-gray-600 hover:bg-white/5 p-1 rounded-md transition-colors ease-linear"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-6 h-6"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18 18 6M6 6l12 12"
        ></path>
      </svg>
    </button>
  </div>
</div>


    

================================================
FILE: Cards/shadowfax29_wicked-baboon-62.html
================================================
<div class="card">
<div class="cloud">
</div>
<div class="shadow"></div>
</div>
<style>
/* From Uiverse.io by shadowfax29 - Tags: card, cloud, hover effect */
.card {
  width: 190px;
  height: 254px;
  background-color: #66D0FF;
  padding: 20px;
  border-radius: 8px;
  transition: all .3s;
  border: 3px solid #66D0FF;
  box-shadow: 0 0 10px white;
}

.cloud {
  width: 150px;
  height: 70px;
  background: #ECEFF1;
  box-shadow: 10px 10px rgba(0,0,0,0.2);
  border-radius: 70px;
}

.cloud::after, .cloud::before {
  content: "";
  position: relative;
  display: inline-block;
  background: inherit;
  border-radius: inherit;
}

.cloud::after {
  width: 50px;
  height: 50px;
  top: -30px;
  left: -55px;
}

.cloud::before {
  width: 70px;
  height: 70px;
  top: -20px;
  left: 60px;
}

.cloud {
  animation: float 1.8s infinite alternate;
}

@keyframes float {
  0% {
    transform: translateY(15px);
  }

  100% {
    transform: translateY(0);
  }
}

.shadow {
  width: 150px;
  height: 24px;
  background-color: rgba(0,0,0,0.2);
  margin-top: 100px;
  border-radius: 50%;
  filter: blur(7px);
  animation: sha 1.8s infinite alternate;
}

@keyframes sha {
  0% {
    transform: scale(1,1);
  }

  100% {
    transform: scale(.85,.85);
  }
}

.card:hover {
  width: 200px;
  height: 264px;
  transform: scale(0.9);
  padding: 20px;
  border: 5px solid black;
}
</style>


================================================
FILE: Cards/shadowmurphy_horrible-rat-35.html
================================================
<div class="card">
  <div class="header">
    <button class="header-button">
      <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_91"><g><circle cx="256" cy="256" fill="#f1f6f9" r="256" style="fill: rgb(76, 194, 255);"></circle><g><path d="m388.378 263.726c-4.267 0-7.726-3.459-7.726-7.726 0-68.733-55.919-124.652-124.652-124.652-33.556 0-65.055 13.194-88.694 37.152-2.997 3.037-7.89 3.068-10.927.073-3.038-2.997-3.07-7.889-.073-10.927 26.566-26.924 61.971-41.752 99.694-41.752 77.254 0 140.105 62.851 140.105 140.105 0 4.269-3.46 7.727-7.727 7.727z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g><g><path d="m388.378 263.726c-1.977 0-3.955-.755-5.463-2.263l-40.173-40.174c-3.018-3.018-3.018-7.909 0-10.928 3.018-3.016 7.91-3.016 10.927 0l40.173 40.174c3.018 3.018 3.018 7.909 0 10.928-1.509 1.509-3.487 2.263-5.464 2.263z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g><g><g><path d="m388.378 263.726c-1.977 0-3.955-.755-5.463-2.263-3.018-3.018-3.018-7.909 0-10.928l40.173-40.174c3.017-3.016 7.909-3.016 10.927 0 3.018 3.018 3.018 7.909 0 10.928l-40.173 40.174c-1.509 1.509-3.486 2.263-5.464 2.263z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g></g><g><path d="m255.86 396.109c-34.613 0-67.589-12.646-93.566-36.036-27.841-25.067-44.25-59.424-46.206-96.739-.223-4.262 3.05-7.897 7.311-8.12 4.277-.236 7.897 3.05 8.12 7.311 1.739 33.194 16.341 63.759 41.114 86.064s56.695 33.616 89.891 31.893c33.51-1.757 64.275-16.582 86.628-41.744 2.834-3.189 7.716-3.478 10.907-.645 3.19 2.834 3.479 7.717.645 10.908-25.12 28.278-59.701 44.938-97.372 46.911-2.496.132-4.991.197-7.472.197z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g><g><path d="m166.021 308.67c-1.842 0-3.691-.655-5.168-1.985l-42.22-38.015c-3.171-2.855-3.427-7.74-.572-10.911 2.856-3.17 7.741-3.428 10.912-.571l42.22 38.015c3.171 2.855 3.427 7.74.572 10.911-1.525 1.694-3.63 2.556-5.744 2.556z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g><g><g><path d="m85.785 312.875c-1.842 0-3.691-.655-5.168-1.985-3.171-2.855-3.427-7.74-.572-10.911l38.016-42.22c2.856-3.17 7.741-3.428 10.912-.571 3.171 2.855 3.427 7.74.572 10.911l-38.016 42.22c-1.525 1.694-3.63 2.556-5.744 2.556z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g></g></g></g></svg>
      <a>The storage is full</a>
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path d="m9 20c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l6.3-6.3-6.3-6.3c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l7 7c.4.4.4 1 0 1.4l-7 7c-.2.2-.4.3-.7.3z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></g></svg>
    </button>
  </div>
  <div class="info">
    <div class="info-border">
      <a>John — Personal</a>
      <div class="progress-line"></div>
      <a>5.0 GB of 5 GB used (100%)</a>
      <a>You cannot transfer new files or send and receive email messages for this account.</a>
      <button class="update-button">Update</button>
    </div>
  </div>
  <div class="bottom">
    <div class="square">
      <svg viewBox="-31 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m418.804688 151h31.195312v-30h-35.730469l-30-60h-84.269531v-61h-150v61h-84.269531l-30 60h-35.730469v30h31.195312l30 361h327.609376zm-238.804688-121h90v31h-90zm-95.730469 61h281.460938l15 30h-311.460938zm4.535157 391-27.507813-331h327.40625l-27.507813 331zm0 0" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m150 316c0-36.1875 25.757812-66.46875 59.902344-73.472656l-11.980469 11.605468 20.875 21.546876 54.734375-53.027344-57.777344-49.3125-19.476562 22.820312 18.023437 15.378906c-52.890625 5.378907-94.300781 50.175782-94.300781 104.460938 0 31.808594 14.1875 61.554688 38.921875 81.601562l18.890625-23.304687c-17.675781-14.324219-27.8125-35.574219-27.8125-58.296875zm0 0" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m278.03125 262.96875c14.167969 14.164062 21.96875 32.996094 21.96875 53.03125 0 33.820312-22.503906 62.472656-53.324219 71.792969l12.667969-12.269531-20.875-21.546876-54.734375 53.023438 57.777344 49.316406 19.476562-22.820312-16.726562-14.273438c48.730469-9.074218 85.738281-51.90625 85.738281-103.222656 0-28.046875-10.921875-54.414062-30.753906-74.246094zm0 0" fill="#000000" style="fill: rgb(255, 255, 255);"></path></svg>
      <span class="tooltip">Bin</span>
    </div>
    <div class="square">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 339.033 339.033" style="enable-background:new 0 0 339.033 339.033;" xml:space="preserve"><g><g><path d="M169.516,0C76.044,0,0,76.045,0,169.517c0,93.471,76.044,169.516,169.516,169.516s169.516-76.044,169.516-169.516 S262.989,0,169.516,0z M143.367,17.224c-13.76,11.78-26.933,26.445-37.516,42.056c-4.766,7.031-9.051,14.291-12.856,21.737H42.93 C66.133,47.926,101.962,24.312,143.367,17.224z M162.016,244.596h-59.371c-8.934-19.363-15.104-41.7-16.14-66.79h75.511V244.596z M33.628,96.017h52.462c-8.754,21.293-13.708,43.833-14.594,66.79H15.156C16.19,138.717,22.756,116.037,33.628,96.017z M15.224,177.807H71.49c0.863,23.317,5.768,45.651,14.643,66.79H34.51C23.359,224.625,16.506,201.944,15.224,177.807z M44.05,259.596h49.157c3.749,7.149,7.968,14.15,12.671,20.988c12.478,18.143,25.89,31.638,37.218,41.179 C102.469,314.734,67.229,291.787,44.05,259.596z M162.016,317.587c-16.754-12.269-36.477-31.838-51.588-57.991h51.588V317.587z M162.016,162.807H86.505c0.934-23.32,6.239-45.666,15.834-66.79h59.678V162.807z M162.016,81.017H109.99 c2.556-4.502,5.31-8.944,8.276-13.32c15.442-22.78,32.369-37.697,43.75-46.15V81.017z M323.878,162.807h-56.341 c-0.886-22.957-5.84-45.497-14.594-66.79h52.461C316.276,116.037,322.844,138.717,323.878,162.807z M296.104,81.017h-50.064 c-3.805-7.446-8.091-14.706-12.856-21.737c-10.583-15.612-23.76-30.273-37.521-42.057 C237.068,24.311,272.898,47.925,296.104,81.017z M177.016,21.546c11.381,8.453,28.308,23.37,43.75,46.15 c2.966,4.376,5.72,8.818,8.276,13.32h-52.026V21.546z M177.016,96.017h59.678c9.595,21.124,14.9,43.47,15.834,66.79h-75.512 V96.017z M177.016,177.807L177.016,177.807h75.512c-1.035,25.09-7.206,47.427-16.14,66.79h-59.372V177.807z M177.016,259.596 h51.588c-15.111,26.152-34.834,45.722-51.588,57.991V259.596z M195.94,321.763c11.327-9.54,24.738-23.038,37.215-41.178 c4.703-6.838,8.922-13.839,12.671-20.988h49.157C271.805,291.786,236.566,314.733,195.94,321.763z M304.523,244.596h-51.622 c8.875-21.139,13.78-43.472,14.643-66.79h56.265C322.526,201.944,315.674,224.625,304.523,244.596z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></g></g></svg>
      <span class="tooltip">Search the Internet</span>
    </div>
    <div class="square">
      <svg id="Line" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path id="XMLID_1646_" d="m17.074 30h-2.148c-1.038 0-1.914-.811-1.994-1.846l-.125-1.635c-.687-.208-1.351-.484-1.985-.824l-1.246 1.067c-.788.677-1.98.631-2.715-.104l-1.52-1.52c-.734-.734-.78-1.927-.104-2.715l1.067-1.246c-.34-.635-.616-1.299-.824-1.985l-1.634-.125c-1.035-.079-1.846-.955-1.846-1.993v-2.148c0-1.038.811-1.914 1.846-1.994l1.635-.125c.208-.687.484-1.351.824-1.985l-1.068-1.247c-.676-.788-.631-1.98.104-2.715l1.52-1.52c.734-.734 1.927-.779 2.715-.104l1.246 1.067c.635-.34 1.299-.616 1.985-.824l.125-1.634c.08-1.034.956-1.845 1.994-1.845h2.148c1.038 0 1.914.811 1.994 1.846l.125 1.635c.687.208 1.351.484 1.985.824l1.246-1.067c.787-.676 1.98-.631 2.715.104l1.52 1.52c.734.734.78 1.927.104 2.715l-1.067 1.246c.34.635.616 1.299.824 1.985l1.634.125c1.035.079 1.846.955 1.846 1.993v2.148c0 1.038-.811 1.914-1.846 1.994l-1.635.125c-.208.687-.484 1.351-.824 1.985l1.067 1.246c.677.788.631 1.98-.104 2.715l-1.52 1.52c-.734.734-1.928.78-2.715.104l-1.246-1.067c-.635.34-1.299.616-1.985.824l-.125 1.634c-.079 1.035-.955 1.846-1.993 1.846zm-5.835-6.373c.848.53 1.768.912 2.734 1.135.426.099.739.462.772.898l.18 2.341 2.149-.001.18-2.34c.033-.437.347-.8.772-.898.967-.223 1.887-.604 2.734-1.135.371-.232.849-.197 1.181.089l1.784 1.529 1.52-1.52-1.529-1.784c-.285-.332-.321-.811-.089-1.181.53-.848.912-1.768 1.135-2.734.099-.426.462-.739.898-.772l2.341-.18h-.001v-2.148l-2.34-.18c-.437-.033-.8-.347-.898-.772-.223-.967-.604-1.887-1.135-2.734-.232-.37-.196-.849.089-1.181l1.529-1.784-1.52-1.52-1.784 1.529c-.332.286-.81.321-1.181.089-.848-.53-1.768-.912-2.734-1.135-.426-.099-.739-.462-.772-.898l-.18-2.341-2.148.001-.18 2.34c-.033.437-.347.8-.772.898-.967.223-1.887.604-2.734 1.135-.37.232-.849.197-1.181-.089l-1.785-1.529-1.52 1.52 1.529 1.784c.285.332.321.811.089 1.181-.53.848-.912 1.768-1.135 2.734-.099.426-.462.739-.898.772l-2.341.18.002 2.148 2.34.18c.437.033.8.347.898.772.223.967.604 1.887 1.135 2.734.232.37.196.849-.089 1.181l-1.529 1.784 1.52 1.52 1.784-1.529c.332-.287.813-.32 1.18-.089z" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path id="XMLID_1645_" d="m16 23c-3.859 0-7-3.141-7-7s3.141-7 7-7 7 3.141 7 7-3.141 7-7 7zm0-12c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></svg>
      <span class="tooltip">Settings</span>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by shadowmurphy - Tags: card, error, windows, update, storage, gb */
.card {
  width: 300px;
  height: 330px;
  background: #333333;
  border-radius: 6px;
  color: white;
}

.header,
.info,
.progress-line
.bottom {
  width: 100%;
}

.header {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #2E2E2E
}

.info {
  height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom {
  height: 50px;
  background-color: #2C2C2C;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  gap: 5px;
}

.header-button {
  width: 94%;
  height: 72%;
  border-radius: 6px;
  border: none;
  outline: none;
  background-color: #333333;
  color: white;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
  cursor: pointer;
}

.header-button:hover {
  background-color: #3F3F3F;
}

.header-button svg {
  width: 20px;
}

.header-button svg:first-child {
  position: relative;
  left: 5px;
}

.header-button svg:last-child {
  position: relative;
  right: 15px;
}

.header-button a {
  position: relative;
  right: 35px;
}

.info-border {
  width: 90%;
  height: 80%;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.info-border a:first-child {
  font-weight: 600;
}

.info-border a:nth-child(3) {
  font-size: 15px;
}

.info-border a:nth-child(4) {
  width: 200px;
  font-size: 13px;
  position: relative;
  top: 10px;
  align-self: center;
  text-align: center;
}

.progress-line {
  height: 4px;
  border-radius: 666px;
  background-color: #FF99A4;
}

.update-button {
  width: 120px;
  height: 35px;
  position: relative;
  top: 25px;
  align-self: center;
  outline: none;
  border: none;
  background-color: #4CC2FF;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #33333;
  transition: all 0.2s ease;
  cursor: pointer;
}

.update-button:hover {
  background-color: #49B3EA;
}

.square {
  width: 30px;
  height: 30px;
  right: 10px;
  position: relative;
  border-radius: 3px;
  transition: background-color 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.square:hover {
  background-color: #3A3A3A;
}

.tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #2E2E2E;
  color: #fff;
  padding: 5px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  transition-delay: 1.5s;
  white-space: nowrap;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #252525;
}

.square:hover .tooltip {
  opacity: 1;
}

.square:not(:hover) .tooltip {
  opacity: 0;
  transition-delay: 0s;
}

.square svg {
  width: 20px;
}
</style>


================================================
FILE: Cards/shadowmurphy_spicy-eel-22.html
================================================
<section class="card">
  <header>
    <p>Runtime</p>
    <a href="#">Details</a>
  </header>
  <main>
    <p>42 <a href="#">ms</a></p>
  </main>
  <footer>
    <a href="#">Beats 92.42%</a><p>of users with JavaScript</p>
  </footer>
</section>

<style>
/* From Uiverse.io by shadowmurphy - Tags: simple, material design, neumorphism, card */
.card {
  width: 350px;
  height: 150px;
  background: #262626;
  border-radius: 10px;
  border: 1px solid #3F3F40;
}

a {
  text-decoration: none;
}

header, footer, main {
  display: flex;
  align-items: center;
}

header {
  justify-content: space-between;
  margin: 20px;
  color: #BDBFB7;
}

header a {
  font-size: 15px;
  cursor: pointer;
  color: #BDBFB7
}

main {
  justify-content: flex-start;
  margin: 20px;
}

main p {
  color: white;
  font-weight: 600;
}

main a {
  color: #BDBFB7;
  font-weight: 100;
}

footer {
  margin: 20px;
  font-size: 15px;
  gap: 5px;
}

footer a {
  color: #2CAD3D;
  font-weight: 600;
}

footer p {
  color: white;
}
</style>


================================================
FILE: Cards/shahbaz4783_mean-cheetah-86.html
================================================
<article class="job-card">
  <div>
    <p class="text-title">Affiliate and Influencer Marketing</p>
    <p class="post-date">Posted on 23 Dec, 2023</p>
  </div>

  <div class="budget-exp">
    <div>
      <p class="value">$120</p>
      <p class="label">Budget</p>
    </div>
    <div>
      <p class="value">Intermediate</p>
      <p class="label">Experience</p>
    </div>
  </div>

  <p class="text-body">
    Are you a highly motivated and results-driven individual with a passion for
    affiliate and influencer marketing? Jaspr, a fast-growing company
    specializing in air quality products, is seeking a dedicated specialist to
    help us scale our affiliate and influencer marketing efforts, utilizing
    tools like Hype Auditor.
  </p>

  <div class="tags">
    <article>
      <p>marketing</p>
      <p>seo</p>
      <p>content writing</p>
    </article>
  </div>

  <div>
    <a href="/job/<%= job._id %>">
      <button class="card-btn">See More</button>
    </a>
  </div>
</article>

<style>
/* From Uiverse.io by shahbaz4783  - Tags: simple, material design, green, card, product, card template */
.job-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2em;
  box-shadow: #091e4240 0px 1px 1px, #091e4221 0px 0px 1px 1px;
  border-radius: 0.6em;
  padding: 1em;
  max-width: 30em;
}

.text-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.25em;
  font-weight: 600;
  font-family: "Noto Sans", sans-serif;
}

.text-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.4px;
}

.post-date {
  color: #598551;
}

.budget-exp {
  display: flex;
  gap: 5em;
}

.budget-exp .value {
  font-size: 1em;
  font-weight: 600;
}

.budget-exp .label {
  font-size: 1em;
  color: #598551;
}

.card-btn {
  border: none;
  font-size: 1rem;
  background-color: green;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 2em;
  padding: 0.6em 1em;
}

.card-btn:hover {
  background-color: #026602;
}

.tags article {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.tags p {
  border-radius: 1.2em;
  padding: 0.2em 0.5em;
  background-color: #f2f7f2;
  color: #598551;
}

</style>
    

================================================
FILE: Cards/shlomo20_wet-treefrog-28.html
================================================
<div class="cards">
  <div class="card one">
    <div class="cardDetails">
      <div class="cardDetailsHaeder">Card Header</div>
      <div class="cardDetailsButton">Click me</div>
    </div>
  </div>
  <div class="card two">
    <div class="cardDetails">
      <div class="cardDetailsHaeder">Card Header</div>
      <div class="cardDetailsButton">Click me</div>
    </div>
  </div>
  <div class="card three">
    <div class="cardDetails">
      <div class="cardDetailsHaeder">Card Header</div>
      <div class="cardDetailsButton">Click me</div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by shlomo20 - Tags: gradient, card, hover, gradients */
.cards {
  position: relative;
}

.card {
  z-index: 1;
  position: absolute;
  width: 254px;
  height: 190px;
  border-radius: 10px;
  transition: all .5s ease-out;
  overflow: hidden;
  transform: translateX(0px) translateY(0px) perspective(905px) rotateX(0deg) rotateY(0deg) rotateZ(-8deg);
}

.card.one {
  top: -120px;
  left: -150px;
  background: linear-gradient(180deg, #FF0055 0%, #000066 100%);
}

.card.two {
  top: -95px;
  left: -125px;
  background: linear-gradient(180deg, #fa00ff 0%, #01f998 99%);
}

.card.three {
  top: -70px;
  left: -100px;
  background: linear-gradient(180deg, #c0f901 0%, #fa00ff 100%);
}

.card:hover {
  z-index: 4;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
  transition: all .5s ease-out;
}

.cardDetails {
  width: 55%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  background: rgba(0,0,0,0.8);
  transition: .5s;
  transform-origin: left;
  transform: perspective(2000px) rotateY(-90deg);
}

.card:hover .cardDetails {
  transform: perspective(2000px) rotateY(0deg);
}

.cardDetailsHaeder {
  font-weight: 600;
  color: #edb899;
}

.cardDetailsButton {
  padding: 3px 6px;
  border-radius: 25px;
  background-color: #edb899;
  color: #000;
  font-weight: 600;
}
</style>


================================================
FILE: Cards/simontheonlyone_bitter-eel-31.html
================================================
<div class="card">
  <div class="dots">
    <p>..................</p>
  </div>
</div>
<style>
/* From Uiverse.io by simontheonlyone - Source: Apple - https://www.apple.com/ - Tags: card, note, inote */
.card {
  position: relative;
  width: 150px;
  height: 150px;
  background: linear-gradient(
    to bottom,
    rgb(253, 197, 107) 12%, rgb(255, 187, 78) 24%,
    rgba(0, 0, 0, .3) 25%, rgba(0, 0, 0, .1) 26% 26%,
    #eee 28% 49%,
    rgba(0, 0, 0, .3) 50%,
    #eee 51% 74%,
    rgba(0, 0, 0, .3) 75%,
    #eee 76%
  );
  border: none;
  border-radius: 35px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  overflow: hidden;
}

.dots {
  position: absolute;
  content: '';
  inset: 0 -3px;
  color: rgba(0, 0, 0, .3);
  font-size: 41px;
  user-select: none;
  -webkit-user-select: none;
}
</style>


================================================
FILE: Cards/sofiapetushok_brave-treefrog-56.html
================================================
<div class="card">
  <svg
    class="card-image"
    xmlns="http://www.w3.org/2000/svg"
    width="70"
    height="70"
    fill="currentColor"
    viewBox="0 0 16 16"
  >
    <path
      fill-rule="evenodd"
      d="M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.4 4.4 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.55.55 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563s-.561.994-.292 1.969.836 1.675 1.266 1.563m3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.4 4.4 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948m.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563s.561.994.292 1.969-.836 1.675-1.266 1.563"
    ></path>
  </svg>
  <div class="card-price-tag">
    <span class="price-value">$100</span>
  </div>
  <svg
    text-rendering="geometricPrecision"
    shape-rendering="geometricPrecision"
    height="50"
    width="50"
    viewBox="0 0 200 350"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns="http://www.w3.org/2000/svg"
    class="ring-1"
  >
    <defs>
      <radialGradient
        gradientTransform="matrix(1 0 0 0.860612 0.5 0.618787)"
        gradientUnits="objectBoundingBox"
        spreadMethod="pad"
        r="0.5"
        cy="0"
        cx="0"
        id="ebT4AgJ0WZ62-fill"
      >
        <stop
          stop-color="#313131"
          offset="48.4041%"
          id="ebT4AgJ0WZ62-fill-0"
        ></stop>
        <stop
          stop-color="#a5a5a5"
          offset="68.1857%"
          id="ebT4AgJ0WZ62-fill-1"
        ></stop>
        <stop
          stop-color="#282828"
          offset="84.0109%"
          id="ebT4AgJ0WZ62-fill-2"
        ></stop>
      </radialGradient>
      <radialGradient
        gradientTransform="matrix(0.999964 0.008506 -0.012489 1.468176 0.496001 0)"
        gradientUnits="objectBoundingBox"
        spreadMethod="pad"
        r="0.803687"
        cy="0"
        cx="0"
        id="ebT4AgJ0WZ63-fill"
      >
        <stop
          stop-color="#313131"
          offset="66.5167%"
          id="ebT4AgJ0WZ63-fill-0"
        ></stop>
        <stop
          stop-color="#929292"
          offset="79.3157%"
          id="ebT4AgJ0WZ63-fill-1"
        ></stop>
        <stop
          stop-color="#282828"
          offset="100%"
          id="ebT4AgJ0WZ63-fill-2"
        ></stop>
      </radialGradient>
    </defs>
    <path
      fill="url(#ebT4AgJ0WZ62-fill)"
      transform="translate(.79738 0.07381)"
      d="M52.80126,148.52946c0-54.09424,43.1045-97.44452,97.19874-97.44452c54.02838,0,97.83949,43.74533,97.9461,97.74875c0,4.48899-15.841036,8.59818-21.21294,3.870883-.611021-2.50634-.402559-3.828048,0-4.910803c7.308634-19.657872-34.28954-75.61349-76.73315-75.61349s-76.85095,34.40734-76.85095,76.85095s27.897301,76.44983,70.340911,76.44983c1.832594,0,10.881874-3.528414,14.410289,0c4.397368,5.041913,5.519605,8.849302,4.757083,12.041874-.919128,3.848258-1.140559,6.87447-4.632193,9.130546-2.6467.21463-5.32315.32404-8.02514.32404-54.09424,0-97.19874-44.35382-97.19874-98.44806h-.00001Z"
    ></path>
    <path
      fill="url(#ebT4AgJ0WZ63-fill)"
      transform="matrix(1 0 0-1-20.148641 311.37469)"
      d="M268.094741,163.50711c0,54.09424-43.068431,97.94629-97.162671,97.94629s-97.94629-43.85205-97.94629-97.94629m9.892327,0c0,42.44361,45.610353,76.85095,88.053963,76.85095s97.162671-34.40734,97.162671-76.85095"
    ></path>
  </svg>
  <svg
    text-rendering="geometricPrecision"
    shape-rendering="geometricPrecision"
    height="45"
    width="45"
    viewBox="0 0 200 350"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns="http://www.w3.org/2000/svg"
    class="ring-2"
  >
    <defs>
      <radialGradient
        gradientTransform="matrix(1 0 0 0.860612 0.5 0.618787)"
        gradientUnits="objectBoundingBox"
        spreadMethod="pad"
        r="0.5"
        cy="0"
        cx="0"
        id="ebT4AgJ0WZ62-fill"
      >
        <stop
          stop-color="#313131"
          offset="48.4041%"
          id="ebT4AgJ0WZ62-fill-0"
        ></stop>
        <stop
          stop-color="#a5a5a5"
          offset="68.1857%"
          id="ebT4AgJ0WZ62-fill-1"
        ></stop>
        <stop
          stop-color="#282828"
          offset="84.0109%"
          id="ebT4AgJ0WZ62-fill-2"
        ></stop>
      </radialGradient>
      <radialGradient
        gradientTransform="matrix(0.999964 0.008506 -0.012489 1.468176 0.496001 0)"
        gradientUnits="objectBoundingBox"
        spreadMethod="pad"
        r="0.803687"
        cy="0"
        cx="0"
        id="ebT4AgJ0WZ63-fill"
      >
        <stop
          stop-color="#313131"
          offset="66.5167%"
          id="ebT4AgJ0WZ63-fill-0"
        ></stop>
        <stop
          stop-color="#929292"
          offset="79.3157%"
          id="ebT4AgJ0WZ63-fill-1"
        ></stop>
        <stop
          stop-color="#282828"
          offset="100%"
          id="ebT4AgJ0WZ63-fill-2"
        ></stop>
      </radialGradient>
    </defs>
    <path
      fill="url(#ebT4AgJ0WZ62-fill)"
      transform="translate(.79738 0.07381)"
      d="M52.80126,148.52946c0-54.09424,43.1045-97.44452,97.19874-97.44452c54.02838,0,97.83949,43.74533,97.9461,97.74875c0,4.48899-15.841036,8.59818-21.21294,3.870883-.611021-2.50634-.402559-3.828048,0-4.910803c7.308634-19.657872-34.28954-75.61349-76.73315-75.61349s-76.85095,34.40734-76.85095,76.85095s27.897301,76.44983,70.340911,76.44983c1.832594,0,10.881874-3.528414,14.410289,0c4.397368,5.041913,5.519605,8.849302,4.757083,12.041874-.919128,3.848258-1.140559,6.87447-4.632193,9.130546-2.6467.21463-5.32315.32404-8.02514.32404-54.09424,0-97.19874-44.35382-97.19874-98.44806h-.00001Z"
    ></path>
    <path
      fill="url(#ebT4AgJ0WZ63-fill)"
      transform="matrix(1 0 0-1-20.148641 311.37469)"
      d="M268.094741,163.50711c0,54.09424-43.068431,97.94629-97.162671,97.94629s-97.94629-43.85205-97.94629-97.94629m9.892327,0c0,42.44361,45.610353,76.85095,88.053963,76.85095s97.162671-34.40734,97.162671-76.85095"
    ></path>
  </svg>
  <svg
    text-rendering="geometricPrecision"
    shape-rendering="geometricPrecision"
    height="50"
    width="50"
    viewBox="0 0 200 300"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns="http://www.w3.org/2000/svg"
    class="ring-3"
  >
    <defs>
      <radialGradient
        gradientTransform="matrix(1 0 0 0.860612 0.5 0.618787)"
        gradientUnits="objectBoundingBox"
        spreadMethod="pad"
        r="0.5"
        cy="0"
        cx="0"
        id="ebT4AgJ0WZ62-fill"
      >
        <stop
          stop-color="#313131"
          offset="48.4041%"
          id="ebT4AgJ0WZ62-fill-0"
        ></stop>
        <stop
          stop-color="#a5a5a5"
          offset="68.1857%"
          id="ebT4AgJ0WZ62-fill-1"
        ></stop>
        <stop
          stop-color="#282828"
          offset="84.0109%"
          id="ebT4AgJ0WZ62-fill-2"
        ></stop>
      </radialGradient>
      <radialGradient
        gradientTransform="matrix(0.999964 0.008506 -0.012489 1.468176 0.496001 0)"
        gradientUnits="objectBoundingBox"
        spreadMethod="pad"
        r="0.803687"
        cy="0"
        cx="0"
        id="ebT4AgJ0WZ63-fill"
      >
        <stop
          stop-color="#313131"
          offset="66.5167%"
          id="ebT4AgJ0WZ63-fill-0"
        ></stop>
        <stop
          stop-color="#929292"
          offset="79.3157%"
          id="ebT4AgJ0WZ63-fill-1"
        ></stop>
        <stop
          stop-color="#282828"
          offset="100%"
          id="ebT4AgJ0WZ63-fill-2"
        ></stop>
      </radialGradient>
    </defs>
    <path
      fill="url(#ebT4AgJ0WZ62-fill)"
      transform="translate(.79738 0.07381)"
      d="M52.80126,148.52946c0-54.09424,43.1045-97.44452,97.19874-97.44452c54.02838,0,97.83949,43.74533,97.9461,97.74875c0,4.48899-15.841036,8.59818-21.21294,3.870883-.611021-2.50634-.402559-3.828048,0-4.910803c7.308634-19.657872-34.28954-75.61349-76.73315-75.61349s-76.85095,34.40734-76.85095,76.85095s27.897301,76.44983,70.340911,76.44983c1.832594,0,10.881874-3.528414,14.410289,0c4.397368,5.041913,5.519605,8.849302,4.757083,12.041874-.919128,3.848258-1.140559,6.87447-4.632193,9.130546-2.6467.21463-5.32315.32404-8.02514.32404-54.09424,0-97.19874-44.35382-97.19874-98.44806h-.00001Z"
    ></path>
    <path
      fill="url(#ebT4AgJ0WZ63-fill)"
      transform="matrix(1 0 0-1-20.148641 311.37469)"
      d="M268.094741,163.50711c0,54.09424-43.068431,97.94629-97.162671,97.94629s-97.94629-43.85205-97.94629-97.94629m9.892327,0c0,42.44361,45.610353,76.85095,88.053963,76.85095s97.162671-34.40734,97.162671-76.85095"
    ></path>
  </svg>
  <div class="card-info">
    <div class="left-info">
      <span class="product-title"
        >PRODUCT NAME
        <p>Lorem ipsum dolor sit amet</p>

        <div class="star-rating">
          <span class="star">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="10"
              height="10"
              fill="currentColor"
              class="bi bi-star-fill"
              viewBox="0 0 16 16"
            >
              <path
                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
              ></path>
            </svg>
          </span>
          <span class="star">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="10"
              height="10"
              fill="currentColor"
              class="bi bi-star-fill"
              viewBox="0 0 16 16"
            >
              <path
                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
              ></path>
            </svg>
          </span>
          <span class="star">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="10"
              height="10"
              fill="currentColor"
              class="bi bi-star-fill"
              viewBox="0 0 16 16"
            >
              <path
                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
              ></path>
            </svg>
          </span>
          <span class="star">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="10"
              height="10"
              fill="currentColor"
              class="bi bi-star"
              viewBox="0 0 16 16"
            >
              <path
                d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"
              ></path>
            </svg>
          </span>
          <span class="star">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="10"
              height="10"
              fill="currentColor"
              class="bi bi-star"
              viewBox="0 0 16 16"
            >
              <path
                d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"
              ></path>
            </svg>
          </span>
        </div>
      </span>
    </div>
    <div class="right-info">
      <ul class="features-list">
        <li class="list-item">
          <p class="feature-sub-title">Your title</p>
          <span class="feature-desc">Lorem ipsum dolor sit amet</span>
        </li>
        <li class="list-item">
          <p class="feature-sub-title">Your title</p>
          <span class="feature-desc">Lorem ipsum dolor sit amet</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="add-to-cart-btn">
    <button>Add to cart</button>
  </div>
</div>

<style>
/* From Uiverse.io by sofiapetushok  - Website: https://www.freepik.com/free-vector/gradient-product-card-template_31222279.htm#fromView=keyword&page=1&position=2 - Name: Image by freepik - Tags: card */
ul {
  list-style: none;
  padding: 0;
}
.card {
  width: 250px;
  height: 354px;
  background: #1b1b1b;
  position: relative;
  border-radius: 12px;
  box-shadow: 0px 10px 10px 0 #1b1b1b;
}
.card .card-image {
  position: relative;
  height: 54%;
  width: 45%;
  display: block;
  margin: auto;
  color: #c8c8c8;
  filter: drop-shadow(0 0 5px #111111);
}

.card .card-info {
  height: 100%;
  border-radius: 12px 12px 0 0;
  width: 100%;
  color: #fff;
  display: flex;
  background: linear-gradient(#4f4f4f64, transparent);
}
.card .card-info {
  font-size: 0.8rem;
  max-height: 120px;
}
.card .card-info .left-info,
.card .card-info .right-info {
  flex: 1;
  padding: 16px;
}
.card .card-info .left-info .product-title {
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 0.4px;
  font-weight: bold;
  margin-bottom: 18px;
  display: block;
}
.card .card-info p {
  font-size: 10px;
  margin-top: 12px;
  line-height: 1.2;
  letter-spacing: 0.3px;
  font-weight: normal;
}
.card .card-info .left-info .star-rating {
  display: flex;
  margin-top: 20px;
}
.card .card-info .left-info .star-rating span {
  display: block;
  width: 16px;
  color: rgb(242, 99, 255);
}
.card .card-info .right-info {
  margin: 0;
  position: relative;
}
.card .card-info .right-info::before {
  position: absolute;
  content: "";
  width: 2px;
  height: calc(100% - 20px);
  background: #df29ff;
  left: -5px;
}

.card .card-info .right-info ul {
  margin: 0;
  list-style: none;
}
.card .card-info .right-info ul li {
  padding: 0;
  font-size: 10px;
  margin: 10px 0;
}
.card .card-info .right-info ul li:first-child {
  margin-top: 0;
}
.card .card-info .right-info ul li p.feature-sub-title {
  font-size: 8px;
  margin-bottom: 5px;
  letter-spacing: 0.3px;
  line-height: 0.9;
  color: #e96dff;
  font-weight: bold;
  text-transform: uppercase;
}
.card .card-info .right-info ul li .feature-sub-title:first-child {
  margin-top: 0;
}
.add-to-cart-btn {
  display: flex;
  position: absolute;
  bottom: 10px;
  margin-top: 20px;
  width: 100%;
  flex: 1;
  flex-basis: 200px;
  margin: auto;
  justify-content: center;
}
.add-to-cart-btn button {
  border: none;
  font-size: 7px;
  background: linear-gradient(
    45deg,
    transparent,
    #f532f1 40%,
    #f532f1,
    #a141fb 60%,
    transparent
  );
  padding: 6px 10px;
  color: #fff;
  font-weight: bold;
  background-size: 200%;
  background-position: 0% 0%;
  text-transform: uppercase;
  border-radius: 30px;
  transition: 0.4s ease-in-out;
}
.card .card-price-tag {
  position: absolute;
  right: 12px;
  top: 0;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(#df29ff, #dc0ba5);
}
.card svg {
  position: absolute;
}
.card::before {
  position: absolute;
  content: "";
  height: 90px;
  width: 90px;
  border-radius: 50%;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(245, 46, 255);
  filter: blur(25px);
  box-shadow: 0 0 70px 0 #f51cf1;
}
.card svg.ring-1 {
  top: 16px;
  left: 16px;
  rotate: 210deg;
  filter: blur(1px) brightness(0.7);
  transition: 1s ease-in-out;
}
.card svg.ring-2 {
  top: 40%;
  right: 0;
  rotate: 150deg;
  filter: brightness(0.5);
  transition: 0.8s ease-in-out;
}
.card svg.ring-3 {
  top: 40%;
  left: 5px;
  rotate: 270deg;
  filter: brightness(0.7);
  transition: 0.9s ease-in-out;
}

.card:hover svg.ring-1 {
  top: 6px;
  left: 20%;
  rotate: 230deg;
  scale: 1.25;
}
.card:hover svg.ring-2 {
  top: 45%;
  right: 15px;
  rotate: 210deg;
  filter: brightness(0.9);
  scale: 1.3;
}
.card:hover svg.ring-3 {
  top: 32%;
  left: 5%;
  rotate: 210deg;
  filter: brightness(1);
  scale: 1.3;
}

.card .add-to-cart-btn button:hover {
  background-position: 100% 100%;
}

</style>
    

================================================
FILE: Cards/sofiapetushok_jolly-snail-62.html
================================================
<div class="card">
  <div data-status="inprogress" class="teams">
    <span class="team-info team-home">
      <span class="team-info-container">
        <span class="team-name-info">Team 1</span>
      </span>
    </span>
    <span class="event-scoreboard">
      <span class="event-score-container">
        <span class="current-time-container">
          <span class="event-current-time">
            <span class="event-clock">85'</span>
            <span class="current-part">2H</span>
          </span>
          <span class="progress-dots" data-progress="1S">
            <span class="load"></span>
          </span>
        </span>
        <span class="score-container">
          <span class="score-home">2</span>
          <span class="custom-sep">-</span>
          <span class="score-away">4</span>
        </span>
      </span>
    </span>
    <span class="team-info team-away">
      <span class="team-info-container">
        <span class="team-icon-container"></span>
        <span class="team-name-info">Team 2</span>
      </span>
    </span>
  </div>
</div>

<style>
/* From Uiverse.io by sofiapetushok  - Tags: card */
.card * {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.card .teams {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, transparent, #111, transparent);
}
.card .teams > span {
  flex: 1;
  text-align: center;
  position: relative;
  font-size: 13px;
  text-wrap: nowrap;
}
.card .teams .team-name-info {
  text-wrap: nowrap;
  color: #ffffff;
  max-width: 210px;
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
  display: block;
}
.card .teams span.progress-dots {
  height: 3px;
  position: relative;
  width: 60px;
  display: block;
  overflow: hidden;
  margin: 0;
  border-radius: 10px;
}
.card .teams span.progress-dots .load {
  background: linear-gradient(90deg, #3a3dff, #ff2929);
  display: block;
  height: 1.5px;
  width: 3px;
  bottom: 0;
  position: absolute;
  transform: translateX(0px);
  animation: loading_dots 7.5s ease both infinite;
}
@keyframes loading_dots {
  0% {
    width: 3px;
    transform: translateX(0px);
  }
  40% {
    width: 3px;
    transform: translateX(57px);
  }

  75% {
    width: 100%;
    transform: translateX(0px);
  }
  100% {
    width: 3px;
    transform: translateX(0px);
  }
}
.card .teams .team-home,
.card .teams .team-away {
  padding: 15px 37px;
  position: relative;
  overflow: hidden;
}
.card .teams .team-away {
  transform: skew(-41deg, 0deg);
  border-radius: 10px 10px 30px 10px;
}
.card .teams .team-home {
  border-radius: 10px 10px 10px 30px;
  transform: skew(41deg, 0deg);
}
.card .teams .team-home::after {
  position: absolute;
  top: -3px;
  background: #00caff;
  content: "";
  height: 23px;
  border-radius: 27px;
  left: -20px;
  filter: blur(2px);
  transform: rotate(208deg);
  width: 20px;
  box-shadow: 0px 0px 32px #00ffed;
}
.card .teams .team-home::before {
  position: absolute;
  bottom: -15px;
  background: #0048ff;
  content: "";
  height: 17px;
  border-radius: 80px;
  right: 0;
  filter: blur(1px);
  transform: translate(-50%, 0%);
  width: 80%;
  box-shadow: 0px 0px 32px #0026ff;
}
.card .teams .team-away::after {
  position: absolute;
  top: -3px;
  background: #cc9d00;
  content: "";
  height: 23px;
  border-radius: 27px;
  right: -20px;
  filter: blur(2px);
  transform: rotate(208deg);
  width: 20px;
  box-shadow: 0px 0px 32px #cc3700;
}
.card .teams .team-away::before {
  position: absolute;
  bottom: -15px;
  background: #ff0000;
  content: "";
  height: 17px;
  border-radius: 80px;
  left: 0;
  filter: blur(1px);
  transform: translate(50%, 0%);
  width: 80%;
  box-shadow: 0px 0px 32px #d50000;
}

.card .teams .team-home .team-name-info {
  transform: skew(-41deg, 0);
}
.card .teams .team-away .team-name-info {
  transform: skew(41deg, 0);
}

.event-info-banner .info-heading {
  position: absolute;
  right: 12px;
  bottom: 5px;
  color: rgba(255, 255, 255, 0.2);
  margin: 0;
}
.card .event-scoreboard .event-score-container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 10px;
  width: fit-content;
  background: linear-gradient(#1e1e1e 0%, #0c0c0c8e 4%, #1a1419);
  box-shadow:
    inset 0 0 1px 0 #2c2c2c,
    0 0 20px 0 #1313139c;
  margin: 10px 0;
}
.card .event-scoreboard .event-score-container .score-container {
  font-size: 24px;
  background: linear-gradient(90deg, #3a3dff, #ff2929);
  -webkit-background-clip: text;
  width: 100%;
  -webkit-text-fill-color: transparent;
}
.card .event-scoreboard .event-score-container .current-time-container {
  font-size: 12px;
  margin-bottom: 8px;
  width: 100%;
  font-family: "SegoeUI";
  color: #a1a1a1;
  justify-content: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 5px;
}
.card
  .event-scoreboard
  .event-score-container
  .current-time-container
  .event-clock {
  font-weight: 500;
  color: #eee;
  margin-right: 10px;
}

</style>
    

================================================
FILE: Cards/sohoning_ugly-horse-87.html
================================================
<div class="cards">
  <div class="outlinePage">
    <svg
      class="icon trophy"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="160"
      height="160"
    >
      <path
        d="M469.333333 682.666667h85.333334v128h-85.333334zM435.2 810.666667h153.6c4.693333 0 8.533333 3.84 8.533333 8.533333v34.133333h-170.666666v-34.133333c0-4.693333 3.84-8.533333 8.533333-8.533333z"
        fill="#ea9518"
        data-spm-anchor-id="a313x.search_index.0.i10.40193a81WcxQiT"
        class=""
      ></path>
      <path
        d="M384 853.333333h256a42.666667 42.666667 0 0 1 42.666667 42.666667v42.666667H341.333333v-42.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z"
        fill="#6e4a32"
        data-spm-anchor-id="a313x.search_index.0.i1.40193a81WcxQiT"
        class=""
      ></path>
      <path
        d="M213.333333 256v85.333333a42.666667 42.666667 0 0 0 85.333334 0V256H213.333333zM170.666667 213.333333h170.666666v128a85.333333 85.333333 0 1 1-170.666666 0V213.333333zM725.333333 256v85.333333a42.666667 42.666667 0 0 0 85.333334 0V256h-85.333334z m-42.666666-42.666667h170.666666v128a85.333333 85.333333 0 1 1-170.666666 0V213.333333z"
        fill="#f4ea2a"
        data-spm-anchor-id="a313x.search_index.0.i9.40193a81WcxQiT"
        class=""
      ></path>
      <path
        d="M298.666667 85.333333h426.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v341.333333a256 256 0 1 1-512 0V128a42.666667 42.666667 0 0 1 42.666667-42.666667z"
        fill="#f2be45"
        data-spm-anchor-id="a313x.search_index.0.i5.40193a81WcxQiT"
        class=""
      ></path>
      <path
        d="M512 469.333333l-100.309333 52.736 19.157333-111.701333-81.152-79.104 112.128-16.298667L512 213.333333l50.176 101.632 112.128 16.298667-81.152 79.104 19.157333 111.701333z"
        fill="#FFF2A0"
      ></path>
    </svg>
    <p class="ranking_number">1<span class="ranking_word">st</span></p>
    <div class="splitLine"></div>
    <svg
      class="icon userAvatar"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="25"
      height="25"
    >
      <path
        d="M512 0C228.693 0 0 228.693 0 512s228.693 512 512 512 512-228.693 512-512S795.307 0 512 0z m0 69.973c244.053 0 442.027 197.973 442.027 442.027 0 87.04-25.6 168.96-69.973 237.227-73.387-78.507-170.667-133.12-281.6-151.893 69.973-34.133 119.467-105.813 119.467-187.733 0-116.053-93.867-209.92-209.92-209.92s-209.92 93.867-209.92 209.92c0 83.627 47.787 155.307 119.467 187.733-110.933 20.48-208.213 75.093-281.6 153.6-44.373-68.267-69.973-150.187-69.973-238.933 0-244.053 197.973-442.027 442.027-442.027z"
        fill="#8a8a8a"
      ></path>
    </svg>
    <p class="userName">Jessie Ben</p>
  </div>
  <div class="detailPage">
    <svg
      class="icon medals slide-in-top"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="80"
      height="80"
    >
      <path
        d="M896 42.666667h-128l-170.666667 213.333333h128z"
        fill="#FF4C4C"
      ></path>
      <path
        d="M768 42.666667h-128l-170.666667 213.333333h128z"
        fill="#3B8CFF"
      ></path>
      <path d="M640 42.666667h-128L341.333333 256h128z" fill="#F1F1F1"></path>
      <path
        d="M128 42.666667h128l170.666667 213.333333H298.666667z"
        fill="#FF4C4C"
      ></path>
      <path
        d="M256 42.666667h128l170.666667 213.333333h-128z"
        fill="#3B8CFF"
      ></path>
      <path
        d="M384 42.666667h128l170.666667 213.333333h-128z"
        fill="#FBFBFB"
      ></path>
      <path
        d="M298.666667 256h426.666666v213.333333H298.666667z"
        fill="#E3A815"
      ></path>
      <path
        d="M512 661.333333m-320 0a320 320 0 1 0 640 0 320 320 0 1 0-640 0Z"
        fill="#FDDC3A"
      ></path>
      <path
        d="M512 661.333333m-256 0a256 256 0 1 0 512 0 256 256 0 1 0-512 0Z"
        fill="#E3A815"
      ></path>
      <path
        d="M512 661.333333m-213.333333 0a213.333333 213.333333 0 1 0 426.666666 0 213.333333 213.333333 0 1 0-426.666666 0Z"
        fill="#F5CF41"
      ></path>
      <path
        d="M277.333333 256h469.333334a21.333333 21.333333 0 0 1 0 42.666667h-469.333334a21.333333 21.333333 0 0 1 0-42.666667z"
        fill="#D19A0E"
      ></path>
      <path
        d="M277.333333 264.533333a12.8 12.8 0 1 0 0 25.6h469.333334a12.8 12.8 0 1 0 0-25.6h-469.333334z m0-17.066666h469.333334a29.866667 29.866667 0 1 1 0 59.733333h-469.333334a29.866667 29.866667 0 1 1 0-59.733333z"
        fill="#F9D525"
      ></path>
      <path
        d="M512 746.666667l-100.309333 52.736 19.157333-111.701334-81.152-79.104 112.128-16.298666L512 490.666667l50.176 101.632 112.128 16.298666-81.152 79.104 19.157333 111.701334z"
        fill="#FFF2A0"
      ></path>
    </svg>
    <div class="gradesBox">
      <svg
        class="icon gradesIcon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        width="60"
        height="60"
      >
        <path
          d="M382.6 805H242.2c-6.7 0-12.2-5.5-12.2-12.2V434.3c0-6.7 5.5-12.2 12.2-12.2h140.4c6.7 0 12.2 5.5 12.2 12.2v358.6c0 6.6-5.4 12.1-12.2 12.1z"
          fill="#ea9518"
          data-spm-anchor-id="a313x.search_index.0.i36.40193a81WcxQiT"
          class=""
        ></path>
        <path
          d="M591.1 805H450.7c-6.7 0-12.2-5.5-12.2-12.2V254.9c0-6.7 5.5-12.2 12.2-12.2h140.4c6.7 0 12.2 5.5 12.2 12.2v537.9c0 6.7-5.5 12.2-12.2 12.2z"
          fill="#f2be45"
          data-spm-anchor-id="a313x.search_index.0.i35.40193a81WcxQiT"
          class=""
        ></path>
        <path
          d="M804.4 805H663.9c-6.7 0-12.2-5.5-12.2-12.2v-281c0-6.7 5.5-12.2 12.2-12.2h140.4c6.7 0 12.2 5.5 12.2 12.2v281c0.1 6.7-5.4 12.2-12.1 12.2z"
          fill="#ea9518"
          data-spm-anchor-id="a313x.search_index.0.i37.40193a81WcxQiT"
          class=""
        ></path>
      </svg>
      <p class="gradesBoxLabel">SCORE</p>
      <p class="gradesBoxNum">1105</p>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by sohoning  - Tags: card, hover, svg, hover effect, css */
.cards {
  position: relative;
  height: 150px;
  transition-duration: 0.5s;
  background: none;
  overflow: hidden;
}

.cards:hover {
  height: 270px;
}

.cards:hover .outlinePage {
  box-shadow: 0 10px 15px #b1985e;
}

.cards:hover .detailPage {
  display: flex;
}

.outlinePage {
  position: relative;
  background: linear-gradient(45deg, #fffbf0, #ffdd87);
  width: 300px;
  height: 150px;
  border-radius: 25px;
  transition-duration: 0.5s;
  z-index: 2;
}

.detailPage {
  position: relative;
  display: none;
  width: 300px;
  height: 120px;
  background: white;
  top: -20px;
  z-index: 1;
  transition-duration: 1s;
  border-radius: 0 0 25px 25px;
  overflow: hidden;
  align-items: center;
  justify-content: flex-start;
}

.splitLine {
  position: absolute;
  width: 200px;
  height: 10px;
  top: 100px;
  background-image: linear-gradient(
    to right,
    transparent 10%,
    #ffe8a0 20%,
    #f7b733 50%,
    #ffe8a0 70%,
    transparent 90%
  );
  z-index: 1;
}

.trophy {
  position: absolute;
  right: 0px;
  top: 4px;
  z-index: 2;
}

.ranking_number {
  position: relative;
  color: #ffc64b;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  font-size: 80px;
  left: 20px;
  padding: 0;
  margin: 0;
  top: -5px;
}

.ranking_word {
  position: relative;
  font-size: 40px;
  color: #424c50;
}

.userAvatar {
  position: absolute;
  bottom: 6px;
  left: 20px;
}

.userName {
  position: relative;
  font-weight: 600;
  color: #6b7578;
  left: 55px;
  font-size: 18px;
  top: -2px;
}

.medals {
  position: absolute;
  top: 15px;
  right: 5px;
}

.gradesBox {
  position: relative;
  height: 75px;
  top: 10px;
  margin-right: 10px;
  margin-left: 15px;
}

.gradesIcon {
  position: absolute;
  top: 10px;
}

.gradesBoxLabel {
  position: relative;
  display: block;
  margin-left: 60px;
  color: #424c50;
  letter-spacing: 6px;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 20px;
  font-weight: 800;
  font-size: 13px;
}

.gradesBoxNum {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  display: block;
  font-size: 25px;
  font-weight: 800;
  margin-left: 60px;
  color: #ea9518;
  top: -5px;
}

.timeNum {
  color: #6cabf6;
}

.slide-in-top {
  animation: slide-in-top 1s cubic-bezier(0.65, 0.05, 0.36, 1) both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

</style>
    

================================================
FILE: Cards/srinivasaiml_lucky-cat-7.html
================================================
<div class="ball1"></div>
<div class="card">
  <p>VISA</p>
  <div class="card-num">
    6216 1906 5218 1991
    <p>VALID : 15 - 04 - 2005</p>
  </div>
</div>
<div class="ball2"></div>

<style>
/* From Uiverse.io by srinivasaiml  - Tags: card */
.card {
  width: 330px;
  height: 200px;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  border: 2px solid white;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(10px);
}
.ball1 {
  z-index: -9;
  position: absolute;
  height: 150px;
  width: 150px;
  border: 0 solid;
  border-radius: 50%;
  top: 50px;
  margin-left: -350px;
  background: linear-gradient(
    45deg,
    rgb(239, 199, 199),
    rgb(239, 52, 192),
    rgb(232, 184, 95)
  );
}
.ball2 {
  position: absolute;
  height: 150px;
  width: 150px;
  border: 0 solid;
  border-radius: 50%;
  bottom: 50px;
  margin-right: -350px;
  z-index: -1;
  background: linear-gradient(
    45deg,
    rgb(239, 199, 199),
    rgb(239, 52, 192),
    rgb(232, 184, 95)
  );
}
.card p {
  font-size: 20px;
  text-align: right;
  padding: 10px;
  font-weight: 600;
  color: wheat;
}
.card-num {
  color: hsl(0, 100%, 100%);
  margin-left: 20px;
  margin-top: 30px;
  font-size: 20px;
  font-weight: 600;
}
.card-num p {
  color: white;
  font-size: 15px;
  text-align: start;
}

</style>
    

================================================
FILE: Cards/sssynk_proud-emu-10.html
================================================
<div class="card">
  <p class="title">Standard</p>
  <div class="pricecontainer">
    <p class="price">$2.99</p>
    <p class="pricedescriptor">/month</p>
  </div>
  <p class="includes">This Plan Includes:</p>
  <ul class="benefitlist">
    <li>Awesome Benefits</li>
    <li>10% Discount</li>
  </ul>
  <div class="btncontainer">
    <button>Select This Plan</button>
  </div>
</div>
<style>
/* From Uiverse.io by sssynk - Tags: card */
.card {
 width: 190px;
 height: 254px;
 background: rgb(45, 45, 45);
 box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
 transition-duration: 0.5s;
}

.title {
 text-align: center;
 margin-top: 0.5em;
 font-weight: bold;
 font-size: x-large;
 color: rgb(200,200,200);
}

.pricecontainer {
 width: 100%;
 margin-top: 0.7em;
 background-color: rgb(30,30,30);
 box-shadow: inset 0px 0px 2em rgba(0, 0, 0, 0.3);
}

.price {
 text-align: center;
 color: rgb(180,180,180);
 font-size: x-large;
 font-weight: bold;
 padding: 0.75em 0 0 0;
}

.pricedescriptor {
 text-align: center;
 color: rgb(118, 118, 118);
 font-size: medium;
 padding: 0 0 1em 0;
}

.includes {
 text-align: center;
 color: rgb(110, 110, 110);
 margin-top: 0.6em;
 font-size: small;
 font-weight: bold;
}

.benefitlist li {
 color: rgb(150,150,150);
 font-size: small;
 text-align: center;
}

.benefitlist li:nth-child(1) {
 margin-top: 0.4em;
}

.btncontainer {
 text-align: center;
}

.btncontainer button {
 margin-top: 1em;
 padding: 0.5em 0.8em 0.5em 0.8em;
 border-style: none;
 border-radius: 1000000px;
 color: rgb(239, 239, 239);
 font-weight: bold;
 background-image: linear-gradient(45deg, #fe4fe1 0%, #3f00fe 100%);
 transition: box-shadow 0.15s ease-in-out;
}

.btncontainer button:hover {
 box-shadow: inset 0px 0px 5px rgb(0,0,0);
 transition: box-shadow 0.15s ease-in-out;
}
</style>


================================================
FILE: Cards/suleymanlaarabidev_perfect-husky-88.html
================================================
<div class="card">
  <div class="first-content">
    <span>First</span>
  </div>
  <div class="second-content">
<span>Second</span>
  </div>


</div>
<style>
/* From Uiverse.io by suleymanlaarabidev - Tags: card */
.card {
  width: 190px;
  height: 254px;
  background: rgb(103, 225, 255);
  transition: all 0.4s;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 5px  rgba(0, 0, 0, 0.705);
  font-size: 30px;
  font-weight: 900;
}

.card:hover {
  border-radius: 15px;
  cursor: pointer;
  transform: scale(1.2);
  box-shadow: 0px 0px 10px 5px  rgba(0, 0, 0, 0.705);
  background: rgb(103, 151, 255);
}

.first-content {
  height: 100%;
  width: 100%;
  transition: all 0.4s;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  border-radius: 15px;
}

.card:hover .first-content {
  height: 0px;
  opacity: 0;
}

.second-content {
  height: 0%;
  width: 100%;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  transition: all 0.4s;
  font-size: 0px;
  transform: rotate(90deg) scale(-1);
}

.card:hover .second-content {
  opacity: 1;
  height: 100%;
  font-size: 1.8rem;
  transform: rotate(0deg);
}

</style>


================================================
FILE: Cards/sushma-godawari-college_tiny-pig-87.html
================================================
<!-- From Uiverse.io by sushma-godawari-college  - Tags: card -->
<a
  href="#"
  class="group relative block max-w-screen-sm mx-auto h-64 sm:h-80 lg:h-96"
>
  <span class="absolute inset-0 border-2 border-dashed border-black"></span>

  <div
    class="relative flex h-full w-60 transform items-end border-2 border-black bg-white transition-transform group-hover:scale-105"
  >
    <div
      class="p-4 !pt-0 transition-opacity group-hover:absolute group-hover:opacity-0 sm:p-6 lg:p-8"
    >
      <svg
        class="w-10"
        fill="#000000"
        version="1.1"
        id="Layer_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 512 512"
        xml:space="preserve"
      >
        <g>
          <g>
            <path
              d="M11.905,246.817H0.27v30.385h11.636v87.014H0.27v30.385h11.636v117.398h142.473V246.817H11.905z M73.56,453.134H43.175 v-30.051H73.56V453.134z M73.56,335.734H43.175v-30.051H73.56V335.734z M123.11,453.134H92.725v-30.051h30.385V453.134z M123.11,335.734H92.725v-30.051h30.385V335.734z"
            ></path>
          </g>
        </g>
        <g>
          <g>
            <path
              d="M357.621,172.23l-30.385-22.362l-56.043-41.246V84l98.467-36.386L240.806,0v108.623l-56.043,41.246l-30.385,22.362 l-13.786,10.146l13.786,18.204l4.559,6.019l25.826-18.904V512h6.178h130.116h6.178V187.696l25.826,18.903l4.559-6.019 l13.786-18.204L357.621,172.23z M246.417,453.134h-30.385v-30.051h30.385V453.134z M246.417,335.734h-30.385v-30.051h30.385 V335.734z M246.417,218.335h-30.385v-30.051h30.385V218.335z M295.967,453.134h-30.385v-30.051h30.385V453.134z M295.967,335.734 h-30.385v-30.051h30.385V335.734z M295.967,218.335h-30.385v-30.051h30.385V218.335z"
            ></path>
          </g>
        </g>
        <g>
          <g>
            <path
              d="M500.094,364.216v-87.014h11.635v-30.385h-11.637H357.621v265.182h142.473V394.601h11.636v-30.385H500.094z M419.274,453.134h-30.385v-30.051h30.385V453.134z M419.274,335.734h-30.385v-30.051h30.385V335.734z M468.824,453.134h-30.385 v-30.051h30.385V453.134z M468.824,335.734h-30.385v-30.051h30.385V335.734z"
            ></path>
          </g>
        </g>
      </svg>

      <h2 class="mt-4 text-xl font-medium sm:text-2xl">Sushma Godawari</h2>
    </div>

    <div
      class="absolute p-4 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 sm:p-6 lg:p-8"
    >
      <h3 class="mt-4 text-xl font-medium sm:text-2xl">Sushma Godawari</h3>

      <p class="mt-4 text-sm sm:text-base">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate,
        praesentium voluptatem omnis atque culpa repellendus.
      </p>

      <p class="mt-8 font-bold">Read more</p>
    </div>
  </div>
</a>


    

================================================
FILE: Cards/syahrulnaufal_plastic-puma-91.html
================================================
<div id="content">
  <div id="blurer"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div id="article"></div>
</div>
<style>
/* From Uiverse.io by syahrulnaufal - Tags: card, aesthetic */
#content {
  width: 250px;
  height: 400px;
  box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 1;
  display: flex;
  background-color: bisque;
  border-radius: 15px;
}

.blob {
  flex-shrink: 0;
  flex-basis: 1;
  width: 230px;
  height: 230px;
  position: relative;
  z-index: 2;
  border-radius: 50%;
}

.blob:nth-child(2) {
  top: -10px;
  left: -320px;
  background-color: #FFB84C;
  animation: wave 1.5s infinite alternate;
  animation-delay: 0s;
}

.blob:nth-child(3) {
  top: 0px;
  left: -360px;
  background-color: #F266AB;
  animation: wave 1.5s infinite alternate;
  animation-delay: 0.5s;
}

.blob:nth-child(4) {
  top: 180px;
  left: -750px;
  background-color: #A459D1;
  animation: wave 1.5s infinite alternate;
  animation-delay: 1s;
}

.blob:nth-child(5) {
  top: 230px;
  left: -820px;
  background-color: #2CD3E1;
  animation: wave 1.5s infinite alternate;
  animation-delay: 1.5s;
}

#blurer {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(40px);
  flex-shrink: 0;
  flex-basis: 1;
  border-radius: 15px;
}

#article {
  position: relative;
  width: 90%;
  height: 93%;
  flex-shrink: 0;
  flex-basis: 1;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 10;
  justify-self: center;
  align-self: center;
  border-radius: 15px;
  left: -1157px;
  display: flex;
  justify-content: center;
  align-items: start;
}

@keyframes wave {
  0% {
    transform: translateY(-30px);
  }

  50% {
    transform: translateY(30px);
  }

  100% {
    transform: translateY(-30px);
  }
}

#article h1 {
  padding: 20px 10px;
  color: #303030;
  font-size: 3em;
  font-family: 'Caveat', cursive;
}
</style>


================================================
FILE: Cards/themrsami_ancient-kangaroo-58.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: simple, card, dark, tailwindcss -->
<div class="max-w-xl w-full mx-auto bg-gray-800 rounded-xl overflow-hidden">
  <div class="max-w-sm mx-auto pt-12 pb-8 px-5 text-center">
    <div
      class="inline-flex items-center justify-center w-12 h-12 mb-5 bg-gray-600 rounded-full"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 21"
        height="21"
        width="24"
      >
        <path
          fill="#FF4842"
          d="M12.0005 15C11.8027 15 11.6093 15.0587 11.4449 15.1686C11.2804 15.2784 11.1523 15.4346 11.0766 15.6173C11.0009 15.8001 10.9811 16.0011 11.0197 16.1951C11.0583 16.3891 11.1535 16.5673 11.2933 16.7071C11.4332 16.847 11.6114 16.9422 11.8054 16.9808C11.9993 17.0194 12.2004 16.9996 12.3831 16.9239C12.5659 16.8482 12.722 16.72 12.8319 16.5556C12.9418 16.3911 13.0005 16.1978 13.0005 16C13.0005 15.7348 12.8951 15.4805 12.7076 15.2929C12.52 15.1054 12.2657 15 12.0005 15ZM22.6705 16.47L14.6205 2.47003C14.3603 2.00354 13.9802 1.61498 13.5196 1.3445C13.0591 1.07401 12.5346 0.931396 12.0005 0.931396C11.4663 0.931396 10.9419 1.07401 10.4813 1.3445C10.0207 1.61498 9.64065 2.00354 9.38046 2.47003L1.38046 16.47C1.11125 16.924 0.966598 17.441 0.9611 17.9688C0.955602 18.4966 1.08945 19.0166 1.34914 19.4761C1.60883 19.9356 1.98516 20.3185 2.44014 20.5861C2.89512 20.8536 3.41264 20.9964 3.94046 21H20.0605C20.5925 21.0053 21.1164 20.8689 21.5784 20.6049C22.0403 20.341 22.4238 19.9589 22.6894 19.4978C22.9551 19.0368 23.0933 18.5134 23.09 17.9814C23.0866 17.4493 22.9418 16.9277 22.6705 16.47ZM20.9405 18.47C20.8528 18.626 20.7249 18.7556 20.5701 18.8453C20.4154 18.935 20.2393 18.9815 20.0605 18.98H3.94046C3.76157 18.9815 3.58556 18.935 3.43077 18.8453C3.27599 18.7556 3.14811 18.626 3.06046 18.47C2.97269 18.318 2.92648 18.1456 2.92648 17.97C2.92648 17.7945 2.97269 17.622 3.06046 17.47L11.0605 3.47003C11.1444 3.30623 11.2719 3.16876 11.4289 3.07277C11.5859 2.97678 11.7664 2.92599 11.9505 2.92599C12.1345 2.92599 12.315 2.97678 12.472 3.07277C12.629 3.16876 12.7565 3.30623 12.8405 3.47003L20.8905 17.47C20.9897 17.6199 21.0467 17.7937 21.0555 17.9732C21.0643 18.1527 21.0245 18.3312 20.9405 18.49V18.47ZM12.0005 7.00003C11.7352 7.00003 11.4809 7.10538 11.2933 7.29292C11.1058 7.48046 11.0005 7.73481 11.0005 8.00003V12C11.0005 12.2652 11.1058 12.5196 11.2933 12.7071C11.4809 12.8947 11.7352 13 12.0005 13C12.2657 13 12.52 12.8947 12.7076 12.7071C12.8951 12.5196 13.0005 12.2652 13.0005 12V8.00003C13.0005 7.73481 12.8951 7.48046 12.7076 7.29292C12.52 7.10538 12.2657 7.00003 12.0005 7.00003Z"
        ></path>
      </svg>
    </div>
    <h4 class="text-xl text-gray-100 font-semibold mb-5">
      Deactivate/Delete account
    </h4>
    <p class="text-gray-300 font-medium">
      Are you sure? You want to Deactivate your account.
    </p>
  </div>
  <div class="pt-5 pb-6 px-6 text-right bg-gray-900 -mb-2">
    <a
      href="#"
      class="inline-block w-full sm:w-auto py-3 px-5 mb-2 mr-4 text-center font-semibold leading-6 text-gray-200 bg-gray-500 hover:bg-gray-400 rounded-lg transition duration-200"
      >Deactivate</a
    ><a
      href="#"
      class="inline-block w-full sm:w-auto py-3 px-5 mb-2 text-center font-semibold leading-6 text-blue-50 bg-red-500 hover:bg-red-600 rounded-lg transition duration-200"
      >Delete Permanently</a
    >
  </div>
</div>


    

================================================
FILE: Cards/themrsami_brown-bear-77.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: material design, green, card, neon, creative, box-shadow, 3d card, themrsami -->
<div class="flex items-center justify-center">
  <div
    class="flex flex-col justify-center items-center bg-gray-800 text-white rounded-lg shadow-lg p-6 w-80"
  >
    <h2 class="text-2xl font-bold mb-4 text-center">Welcome!</h2>
    <p class="mb-4 text-center">
      Thanks for visiting our website. Stay connected with us on social media.
    </p>
    <div class="flex space-x-4">
      <a
        class="text-blue-500 hover:text-blue-400 transition duration-200"
        href="#"
      >
        <svg
          viewBox="0 0 64 64"
          height="60"
          width="60"
          y="0px"
          x="0px"
          xmlns="http://www.w3.org/2000/svg"
        >
          <linearGradient
            spreadMethod="reflect"
            gradientUnits="userSpaceOnUse"
            y2="56.878"
            y1="14.5"
            x2="37.646"
            x1="37.646"
            id="JOZq0V4XPxMzNaLCE5XPGa_44003_gr1"
          >
            <stop stop-color="#6dc7ff" offset="0"></stop>
            <stop stop-color="#e6abff" offset="1"></stop>
          </linearGradient>
          <path
            d="M42,56V38h5.358l0.934-8H42v-4.457c0-2.097-0.131-3.527,2.877-3.527L48,22.014v-6.479 c-1-0.088-2.487-0.285-5.136-0.285c-5.531,0-8.864,3.376-8.864,9.576V30h-7v8h7v18H42z"
            fill="url(#JOZq0V4XPxMzNaLCE5XPGa_44003_gr1)"
          ></path>
          <linearGradient
            spreadMethod="reflect"
            gradientUnits="userSpaceOnUse"
            y2="58.017"
            y1="6.833"
            x2="32"
            x1="32"
            id="JOZq0V4XPxMzNaLCE5XPGb_44003_gr2"
          >
            <stop stop-color="#1a6dff" offset="0"></stop>
            <stop stop-color="#c822ff" offset="1"></stop>
          </linearGradient>
          <path
            d="M50,57H14c-3.859,0-7-3.141-7-7V14c0-3.859,3.141-7,7-7h36c3.859,0,7,3.141,7,7v36 C57,53.859,53.859,57,50,57z M14,9c-2.757,0-5,2.243-5,5v36c0,2.757,2.243,5,5,5h36c2.757,0,5-2.243,5-5V14c0-2.757-2.243-5-5-5H14z"
            fill="url(#JOZq0V4XPxMzNaLCE5XPGb_44003_gr2)"
          ></path>
        </svg>
      </a>
      <a
        class="text-blue-400 hover:text-blue-300 transition duration-200"
        href="#"
      >
        <svg
          viewBox="0 0 64 64"
          height="60"
          width="60"
          y="0px"
          x="0px"
          xmlns="http://www.w3.org/2000/svg"
        >
          <linearGradient
            gradientUnits="userSpaceOnUse"
            y2="52.195"
            y1="9.936"
            x2="32"
            x1="32"
            id="iS8U25XJCb2VBQOwbuAcra_bYzsf9Bmocst_gr1"
          >
            <stop stop-color="#1a6dff" offset="0"></stop>
            <stop stop-color="#c822ff" offset="1"></stop>
          </linearGradient>
          <path
            d="M57.595,16.086c-0.286-0.341-0.762-0.45-1.17-0.271c-0.614,0.271-1.245,0.512-1.891,0.719 c0.824-1.035,1.462-2.216,1.874-3.491c0.127-0.396-0.002-0.827-0.326-1.087c-0.324-0.261-0.774-0.295-1.131-0.083 c-1.777,1.041-3.672,1.788-5.641,2.223C47.244,12.122,44.449,11,41.555,11c-6.169,0-11.189,4.978-11.189,11.097 c0,0.404,0.022,0.81,0.067,1.214c-7.41-0.705-14.289-4.343-19.027-10.103c-0.207-0.252-0.518-0.385-0.85-0.362 c-0.325,0.025-0.618,0.207-0.784,0.488c-0.993,1.679-1.519,3.613-1.519,5.593c0,2.447,0.807,4.78,2.247,6.68 c-0.292-0.123-0.579-0.26-0.859-0.412c-0.311-0.167-0.686-0.161-0.988,0.021c-0.303,0.181-0.488,0.507-0.488,0.859v0.119 c0,3.708,1.868,7.073,4.786,9.104c-0.012-0.002-0.024-0.005-0.036-0.007c-0.35-0.065-0.699,0.062-0.93,0.327 c-0.231,0.265-0.306,0.631-0.198,0.966c1.182,3.648,4.149,6.371,7.769,7.332c-3.003,1.771-6.401,2.697-9.957,2.697 c-0.786,0-1.563-0.046-2.308-0.137c-0.467-0.059-0.906,0.218-1.063,0.657c-0.157,0.44,0.012,0.931,0.407,1.181 C11.478,51.38,17.064,53,22.79,53c18.772,0,29.989-15.119,29.989-29.736c0-0.271-0.005-0.541-0.014-0.81 c1.907-1.423,3.552-3.159,4.896-5.169C57.908,16.915,57.881,16.427,57.595,16.086z M51.167,21.143 c-0.279,0.197-0.438,0.523-0.422,0.865c0.02,0.415,0.034,0.834,0.034,1.256C50.779,36.897,40.31,51,22.79,51 c-3.982,0-7.894-0.84-11.499-2.452c4.226-0.321,8.198-1.85,11.575-4.468c0.335-0.26,0.47-0.702,0.336-1.104 s-0.506-0.677-0.93-0.686c-3.381-0.065-6.404-1.952-7.948-4.835c1.115,0.038,2.203-0.099,3.276-0.393 c0.447-0.123,0.751-0.537,0.735-1c-0.017-0.464-0.35-0.854-0.804-0.945c-3.773-0.752-6.632-3.773-7.244-7.449 c1.122,0.403,2.297,0.631,3.468,0.667c0.459,0.011,0.848-0.271,0.983-0.696c0.136-0.426-0.027-0.89-0.399-1.137 c-2.558-1.698-4.084-4.53-4.084-7.575c0-1.135,0.21-2.25,0.614-3.287c5.319,5.827,12.784,9.361,20.714,9.76 c0.328,0.022,0.617-0.116,0.817-0.357c0.202-0.241,0.278-0.563,0.207-0.868c-0.16-0.685-0.24-1.384-0.24-2.077 c0-5.016,4.122-9.097,9.189-9.097c2.537,0,4.979,1.047,6.7,2.871c0.235,0.248,0.581,0.359,0.917,0.296 c1.385-0.267,2.739-0.671,4.048-1.209c-0.729,1.007-1.665,1.865-2.759,2.514c-0.407,0.242-0.589,0.735-0.436,1.184 c0.153,0.447,0.597,0.73,1.068,0.669c0.952-0.117,1.886-0.292,2.797-0.525C53.06,19.666,52.15,20.449,51.167,21.143z"
            fill="url(#iS8U25XJCb2VBQOwbuAcra_bYzsf9Bmocst_gr1)"
          ></path>
          <linearGradient
            gradientUnits="userSpaceOnUse"
            y2="52.195"
            y1="9.936"
            x2="38.903"
            x1="38.903"
            id="iS8U25XJCb2VBQOwbuAcrb_bYzsf9Bmocst_gr2"
          >
            <stop stop-color="#1a6dff" offset="0"></stop>
            <stop stop-color="#c822ff" offset="1"></stop>
          </linearGradient>
          <path
            d="M30.772,45.786l0.621,1.9c7.123-2.326,12.824-7.914,15.642-15.33l-1.869-0.711 C43.636,35.671,39.733,42.859,30.772,45.786z"
            fill="url(#iS8U25XJCb2VBQOwbuAcrb_bYzsf9Bmocst_gr2)"
          ></path>
          <g>
            <linearGradient
              gradientUnits="userSpaceOnUse"
              y2="21.528"
              y1="17.979"
              x2="42"
              x1="42"
              id="iS8U25XJCb2VBQOwbuAcrc_bYzsf9Bmocst_gr3"
            >
              <stop stop-color="#6dc7ff" offset="0"></stop>
              <stop stop-color="#e6abff" offset="1"></stop>
            </linearGradient>
            <circle
              fill="url(#iS8U25XJCb2VBQOwbuAcrc_bYzsf9Bmocst_gr3)"
              r="2"
              cy="20"
              cx="42"
            ></circle>
          </g>
        </svg>
      </a>
      <a
        class="text-blue-400 hover:text-blue-300 transition duration-200"
        href="#"
      >
        <svg
          viewBox="0 0 64 64"
          height="60"
          width="60"
          y="0px"
          x="0px"
          xmlns="http://www.w3.org/2000/svg"
        >
          <linearGradient
            spreadMethod="reflect"
            gradientUnits="userSpaceOnUse"
            y2="54.751"
            y1="10"
            x2="32"
            x1="32"
            id="PMWUiMSnUf2R_PPJ6rqZea_44112_gr1"
          >
            <stop stop-color="#1a6dff" offset="0"></stop>
            <stop stop-color="#c822ff" offset="1"></stop>
          </linearGradient>
          <path
            d="M32,53.001c-6.358,0-12.716-0.195-19.299-0.584c-4.96-0.293-8.961-4.242-9.308-9.187 c-0.521-7.452-0.521-15.009-0.001-22.46c0.348-4.945,4.349-8.895,9.309-9.188c13.167-0.778,25.433-0.778,38.598,0 c4.96,0.293,8.961,4.242,9.308,9.187c0.521,7.452,0.521,15.009,0.001,22.46c-0.348,4.945-4.349,8.895-9.309,9.188l0,0 C44.716,52.806,38.358,53.001,32,53.001z M51.182,50.421l0.059,0.998L51.182,50.421c3.959-0.234,7.153-3.386,7.431-7.331 c0.515-7.358,0.515-14.821-0.001-22.181c-0.276-3.944-3.471-7.096-7.43-7.33c-13.088-0.773-25.275-0.773-38.363,0 c-3.959,0.234-7.153,3.386-7.431,7.331c-0.515,7.358-0.515,14.821,0.001,22.181c0.276,3.944,3.471,7.096,7.43,7.33 C25.906,51.194,38.094,51.194,51.182,50.421z"
            fill="url(#PMWUiMSnUf2R_PPJ6rqZea_44112_gr1)"
          ></path>
          <linearGradient
            spreadMethod="reflect"
            gradientUnits="userSpaceOnUse"
            y2="39.252"
            y1="24.25"
            x2="31.72"
            x1="31.72"
            id="PMWUiMSnUf2R_PPJ6rqZeb_44112_gr2"
          >
            <stop stop-color="#6dc7ff" offset="0"></stop>
            <stop stop-color="#e6abff" offset="1"></stop>
          </linearGradient>
          <path
            d="M25 39.84L25 24.16 38.44 32z"
            fill="url(#PMWUiMSnUf2R_PPJ6rqZeb_44112_gr2)"
          ></path>
          <linearGradient
            spreadMethod="reflect"
            gradientUnits="userSpaceOnUse"
            y2="54.751"
            y1="10"
            x2="32.212"
            x1="32.212"
            id="PMWUiMSnUf2R_PPJ6rqZec_44112_gr3"
          >
            <stop stop-color="#1a6dff" offset="0"></stop>
            <stop stop-color="#c822ff" offset="1"></stop>
          </linearGradient>
          <path
            d="M24,41.581V22.419L40.425,32L24,41.581z M26,25.901v12.197L36.456,32L26,25.901z"
            fill="url(#PMWUiMSnUf2R_PPJ6rqZec_44112_gr3)"
          ></path>
        </svg>
      </a>
    </div>

    <button
      class="bg-gradient-to-r mt-4 from-blue-500 to-pink-500 text-white font-bold py-2 px-4 rounded-full animate-pulse"
    >
      Close
    </button>
  </div>
</div>


    

================================================
FILE: Cards/themrsami_friendly-dodo-71.html
================================================
<!-- From Uiverse.io by themrsami - Tags: material design, black, card, smooth, dark, creative, cool card, tailwind -->
<div class="bg-gray-800 text-white max-w-md mx-auto rounded-xl shadow-md overflow-hidden md:max-w-2xl m-5 hover:shadow-2xl hover:bg-black transition-all duration-500 ease-in-out">
  <div class="md:flex">
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Hello!</div>
      <p class="block mt-1 text-lg leading-tight font-medium text-white">Hover Me (Love You Guys)</p>
      <p class="mt-2 text-gray-400">You're a monster. I can swallow a bottle of alcohol and I'll feel like Godzilla. Better hit the deck like the card dealer.</p>
    </div>
    <div class="flex items-center justify-between mt-4 space-x-4">
      <button style="margin-right: 20px" class="text-red-500 hover:text-white">
        <svg id="heart" viewBox="0 0 47.5 47.5" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="a"><path d="M0 38h38V0H0v38Z"></path></clipPath></defs><g transform="matrix(1.25 0 0 -1.25 0 47.5)" clip-path="url(#a)"><path d="M36.885 25.166c0 5.45-4.418 9.868-9.867 9.868-3.308 0-6.227-1.633-8.018-4.129-1.79 2.496-4.71 4.129-8.017 4.129-5.45 0-9.868-4.418-9.868-9.868 0-.772.098-1.52.266-2.241C2.752 14.413 12.216 5.431 19 2.965c6.783 2.466 16.249 11.448 17.617 19.96.17.721.268 1.469.268 2.241" fill="#be1931"></path></g></svg>
        Like
      </button>
    </div>
  </div>
</div>




================================================
FILE: Cards/themrsami_honest-impala-99.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: white, card, light, tailwindcss -->
<div class="container px-4 mx-auto">
  <div class="mx-auto p-6 pb-1 border bg-white rounded-md shadow-dashboard">
    <div class="flex flex-wrap items-center justify-between mb-1 -m-2">
      <div class="w-auto p-2">
        <h2 class="text-lg font-semibold text-coolGray-900">My Files</h2>
        <p class="text-xs text-coolGray-500 font-medium">Manage your files</p>
      </div>
      <div class="w-auto p-2">
        <a
          href="#"
          class="text-sm text-green-500 hover:text-green-600 font-semibold"
          >See all</a
        >
      </div>
    </div>
    <div class="flex flex-wrap">
      <div class="w-full border-b border-coolGray-100">
        <div class="flex flex-wrap items-center justify-between py-4 -m-2">
          <div class="w-auto p-2">
            <div class="flex flex-wrap items-center -m-2">
              <div class="w-auto p-2">
                <div
                  class="flex items-center justify-center w-12 h-12 bg-yellow-50 rounded-md"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    height="24"
                    width="24"
                  >
                    <path
                      fill="#F59E0B"
                      d="M19 4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V17C2 17.7956 2.31607 18.5587 2.87868 19.1213C3.44129 19.6839 4.20435 20 5 20H19C19.7956 20 20.5587 19.6839 21.1213 19.1213C21.6839 18.5587 22 17.7956 22 17V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4ZM5 18C4.73478 18 4.48043 17.8946 4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17V14.58L7.3 11.29C7.48693 11.1068 7.73825 11.0041 8 11.0041C8.26175 11.0041 8.51307 11.1068 8.7 11.29L15.41 18H5ZM20 17C20 17.2652 19.8946 17.5196 19.7071 17.7071C19.5196 17.8946 19.2652 18 19 18H18.23L14.42 14.17L15.3 13.29C15.4869 13.1068 15.7382 13.0041 16 13.0041C16.2618 13.0041 16.5131 13.1068 16.7 13.29L20 16.58V17ZM20 13.76L18.12 11.89C17.5501 11.3424 16.7904 11.0366 16 11.0366C15.2096 11.0366 14.4499 11.3424 13.88 11.89L13 12.77L10.12 9.89C9.55006 9.34243 8.79036 9.03663 8 9.03663C7.20964 9.03663 6.44994 9.34243 5.88 9.89L4 11.76V7C4 6.73478 4.10536 6.48043 4.29289 6.29289C4.48043 6.10536 4.73478 6 5 6H19C19.2652 6 19.5196 6.10536 19.7071 6.29289C19.8946 6.48043 20 6.73478 20 7V13.76Z"
                    ></path>
                  </svg>
                </div>
              </div>
              <div class="w-auto p-2">
                <h2 class="text-sm font-medium text-coolGray-900">Photos</h2>
                <h3 class="text-xs font-medium text-coolGray-400">44 photos</h3>
              </div>
            </div>
          </div>
          <div class="w-auto p-2">
            <p class="text-xs text-coolGray-500 font-medium">128 GB</p>
          </div>
        </div>
      </div>
      <div class="w-full border-b border-coolGray-100">
        <div class="flex flex-wrap items-center justify-between py-4 -m-2">
          <div class="w-auto p-2">
            <div class="flex flex-wrap items-center -m-2">
              <div class="w-auto p-2">
                <div
                  class="flex items-center justify-center w-12 h-12 bg-green-50 rounded-md"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    height="24"
                    width="24"
                  >
                    <path
                      fill="#2AD168"
                      d="M20 8.94C19.9896 8.84813 19.9695 8.75763 19.94 8.67V8.58C19.8919 8.47718 19.8278 8.38267 19.75 8.3L13.75 2.3C13.6673 2.22222 13.5728 2.15808 13.47 2.11H13.38C13.2784 2.05174 13.1662 2.01434 13.05 2H7C6.20435 2 5.44129 2.31607 4.87868 2.87868C4.31607 3.44129 4 4.20435 4 5V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V9C20 9 20 9 20 8.94ZM14 5.41L16.59 8H15C14.7348 8 14.4804 7.89464 14.2929 7.70711C14.1054 7.51957 14 7.26522 14 7V5.41ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V5C6 4.73478 6.10536 4.48043 6.29289 4.29289C6.48043 4.10536 6.73478 4 7 4H12V7C12 7.79565 12.3161 8.55871 12.8787 9.12132C13.4413 9.68393 14.2044 10 15 10H18V19Z"
                    ></path>
                  </svg>
                </div>
              </div>
              <div class="w-auto p-2">
                <h2 class="text-sm font-medium text-coolGray-900">Folders</h2>
                <h3 class="text-xs font-medium text-coolGray-400">
                  33 folders
                </h3>
              </div>
            </div>
          </div>
          <div class="w-auto p-2">
            <p class="text-xs text-coolGray-500 font-medium">256 GB</p>
          </div>
        </div>
      </div>
      <div class="w-full">
        <div class="flex flex-wrap items-center justify-between py-4 -m-2">
          <div class="w-auto p-2">
            <div class="flex flex-wrap items-center -m-2">
              <div class="w-auto p-2">
                <div
                  class="flex items-center justify-center w-12 h-12 bg-green-50 text-green-500 rounded-md"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    height="24"
                    width="24"
                  >
                    <path
                      fill="currentColor"
                      d="M21.53 7.15C21.378 7.06223 21.2055 7.01603 21.03 7.01603C20.8545 7.01603 20.682 7.06223 20.53 7.15L17 8.89C16.9715 8.11357 16.6429 7.37847 16.0834 6.83944C15.5238 6.3004 14.777 5.99948 14 6H5C4.20435 6 3.44129 6.31607 2.87868 6.87868C2.31607 7.44129 2 8.20435 2 9V15C2 15.7957 2.31607 16.5587 2.87868 17.1213C3.44129 17.6839 4.20435 18 5 18H14C14.777 18.0005 15.5238 17.6996 16.0834 17.1606C16.6429 16.6215 16.9715 15.8864 17 15.11L20.56 16.89C20.6963 16.9599 20.8468 16.9975 21 17C21.1872 17.0006 21.3709 16.9486 21.53 16.85C21.6741 16.7599 21.7929 16.6346 21.8751 16.4859C21.9574 16.3372 22.0003 16.1699 22 16V8C22.0003 7.83006 21.9574 7.66283 21.8751 7.51411C21.7929 7.36538 21.6741 7.24007 21.53 7.15ZM15 15C15 15.2652 14.8946 15.5196 14.7071 15.7071C14.5196 15.8946 14.2652 16 14 16H5C4.73478 16 4.48043 15.8946 4.29289 15.7071C4.10536 15.5196 4 15.2652 4 15V9C4 8.73478 4.10536 8.48043 4.29289 8.29289C4.48043 8.10536 4.73478 8 5 8H14C14.2652 8 14.5196 8.10536 14.7071 8.29289C14.8946 8.48043 15 8.73478 15 9V15ZM20 14.38L17 12.88V11.12L20 9.62V14.38Z"
                    ></path>
                  </svg>
                </div>
              </div>
              <div class="w-auto p-2">
                <h2 class="text-sm font-medium text-coolGray-900">Movies</h2>
                <h3 class="text-xs font-medium text-coolGray-400">3 videos</h3>
              </div>
            </div>
          </div>
          <div class="w-auto p-2">
            <p class="text-xs text-coolGray-500 font-medium">3 GB</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/themrsami_neat-turkey-97.html
================================================
<!-- From Uiverse.io by themrsami - Tags: simple, blue, card, tailwind, tailwindcss, themrsami -->
<div class="w-full max-w-[570px] rounded-[20px] bg-white py-12 px-8 text-center md:py-[60px] md:px-[70px]">
  <h3 class="text-gray-900 pb-2 text-xl font-bold sm:text-2xl">Your Message Sent Successfully</h3>
  <span class="bg-blue-500 mx-auto mb-6 inline-block h-1 w-[90px] rounded"></span>
  <p class="text-gray-500 mb-10 text-base leading-relaxed">Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  <div class="flex flex-wrap gap-4">
    <div class="flex-1">
      <button class="text-gray-900 block w-full rounded-lg border border-gray-200 p-3 text-center text-base font-medium transition hover:border-red-600 hover:bg-red-600 hover:text-white">Cancel</button>
    </div>
    <div class="flex-1">
      <button class="bg-blue-500 whitespace-nowrap border-blue-500 block w-full rounded-lg border p-3 text-center text-base font-medium text-white transition hover:bg-opacity-90">View Details</button>
    </div>
  </div>
</div>



================================================
FILE: Cards/themrsami_orange-husky-56.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: simple, card, dark, tailwindcss -->
<div class="max-w-[300px] w-full pt-10 px-10 pb-8 bg-gray-900 rounded-3xl">
  <div class="text-center mb-6">
    <h5 class="text-2xl font-semibold text-white mb-3">Deluxe</h5>
    <span class="block text-5xl font-bold text-white mb-3">$20</span>
    <span class="block text-gray-300 font-medium mb-6"
      >per user, per month</span
    >
    <a
      class="relative group inline-block w-full py-4 px-6 text-center text-gray-50 hover:text-gray-900 bg-yellow-600 font-semibold rounded-full overflow-hidden transition duration-200"
      href="#"
    >
      <div
        class="absolute top-0 right-full w-full h-full bg-white transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"
      ></div>
      <span class="relative">Start 7-days Trial</span>
    </a>
  </div>
  <ul>
    <li class="flex mb-4 items-center">
      <svg
        class="w-6 h-6 fill-current text-white"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z"
        ></path>
      </svg>
      <span class="ml-2 text-white">Unlimited Features</span>
    </li>
    <li class="flex mb-4 items-center">
      <svg
        class="w-6 h-6 fill-current text-white"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z"
        ></path>
      </svg>
      <span class="ml-2 text-white">Enhanced Security</span>
    </li>
    <li class="flex mb-4 items-center">
      <svg
        class="w-6 h-6 fill-current text-white"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z"
        ></path>
      </svg>
      <span class="ml-2 text-white">Priority Support</span>
    </li>
    <li class="flex mb-4 items-center">
      <svg
        class="w-6 h-6 fill-current text-white"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z"
        ></path>
      </svg>
      <span class="ml-2 text-white">Exclusive Access</span>
    </li>
    <li class="flex mb-4 items-center">
      <svg
        class="w-6 h-6 fill-current text-gray-500"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z"
        ></path>
      </svg>
      <span class="ml-2 text-gray-500 line-through">Ad-free Experience</span>
    </li>
    <li class="flex items-center">
      <svg
        class="w-6 h-6 fill-current text-white"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z"
        ></path>
      </svg>
      <span class="ml-2 text-white">Customization Options</span>
    </li>
  </ul>
</div>


    

================================================
FILE: Cards/themrsami_ordinary-firefox-60.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: simple, pricing, card, light, tailwindcss -->
<div class="flex flex-wrap max-w-[380px] w-full">
  <div class="w-full lg:w-1/2 xl:w-1/3 px-4 mb-8 lg:mb-0 mx-auto">
    <div
      class="max-w-sm lg:max-w-none mx-auto pt-10 px-10 pb-8 bg-gray-100 rounded-3xl"
    >
      <div class="text-center mb-6">
        <h5 class="text-2xl font-semibold text-gray-800 mb-3">Standard</h5>
        <span class="block text-5xl font-bold text-gray-800 mb-3">$15</span>
        <span class="block text-gray-600 font-medium mb-6"
          >per user, per month</span
        >
        <a
          class="relative group inline-block w-full py-4 px-6 text-center text-gray-800 hover:text-gray-50 bg-yellow-300 font-semibold rounded-full overflow-hidden transition duration-200"
          href="#"
        >
          <div
            class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"
          ></div>
          <span class="relative">Start 7-days Trial</span>
        </a>
      </div>
      <ul>
        <li class="flex mb-4 items-center">
          <svg
            class="w-6 h-6 fill-current text-gray-800"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z"
            ></path>
          </svg>
          <span class="ml-2 text-gray-800">Unlimited Features</span>
        </li>
        <li class="flex mb-4 items-center">
          <svg
            class="w-6 h-6 fill-current text-gray-800"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z"
            ></path>
          </svg>
          <span class="ml-2 text-gray-800">Enhanced Security</span>
        </li>
        <li class="flex mb-4 items-center">
          <svg
            class="w-6 h-6 fill-current text-gray-800"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z"
            ></path>
          </svg>
          <span class="ml-2 text-gray-800">Priority Support</span>
        </li>
        <li class="flex mb-4 items-center">
          <svg
            class="w-6 h-6 fill-current text-gray-800"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z"
            ></path>
          </svg>
          <span class="ml-2 text-gray-800">Exclusive Access</span>
        </li>
        <li class="flex mb-4 items-center">
          <svg
            class="w-6 h-6 fill-current text-gray-500"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z"
            ></path>
          </svg>
          <span class="ml-2 text-gray-500 line-through"
            >Ad-free Experience</span
          >
        </li>
        <li class="flex items-center">
          <svg
            class="w-6 h-6 fill-current text-gray-800"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z"
            ></path>
          </svg>
          <span class="ml-2 text-gray-800">Customization Options</span>
        </li>
      </ul>
    </div>
  </div>
</div>


    

================================================
FILE: Cards/themrsami_rude-cougar-5.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: card, dark, tailwindcss -->
<div class="max-w-xl w-full mx-auto bg-gray-900 rounded-xl overflow-hidden">
  <div class="max-w-md mx-auto pt-12 pb-14 px-5 text-center">
    <div
      class="inline-flex items-center justify-center w-12 h-12 mb-5 rounded-full"
    >
      <svg
        viewBox="0 0 48 48"
        height="100"
        width="100"
        y="0px"
        x="0px"
        xmlns="http://www.w3.org/2000/svg"
      >
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="37.081"
          y1="10.918"
          x2="10.918"
          x1="37.081"
          id="SVGID_1__8tZkVc2cOjdg_gr1"
        >
          <stop stop-color="#60fea4" offset="0"></stop>
          <stop stop-color="#6afeaa" offset=".033"></stop>
          <stop stop-color="#97fec4" offset=".197"></stop>
          <stop stop-color="#bdffd9" offset=".362"></stop>
          <stop stop-color="#daffea" offset=".525"></stop>
          <stop stop-color="#eefff5" offset=".687"></stop>
          <stop stop-color="#fbfffd" offset=".846"></stop>
          <stop stop-color="#fff" offset="1"></stop>
        </linearGradient>
        <circle
          fill="url(#SVGID_1__8tZkVc2cOjdg_gr1)"
          r="18.5"
          cy="24"
          cx="24"
        ></circle>
        <path
          d="M35.401,38.773C32.248,41.21,28.293,42.66,24,42.66C13.695,42.66,5.34,34.305,5.34,24	c0-2.648,0.551-5.167,1.546-7.448"
          stroke-width="3"
          stroke-miterlimit="10"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke="#10e36c"
          fill="none"
        ></path>
        <path
          d="M12.077,9.646C15.31,6.957,19.466,5.34,24,5.34c10.305,0,18.66,8.354,18.66,18.66	c0,2.309-0.419,4.52-1.186,6.561"
          stroke-width="3"
          stroke-miterlimit="10"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke="#10e36c"
          fill="none"
        ></path>
        <polyline
          points="16.5,23.5 21.5,28.5 32,18"
          stroke-width="3"
          stroke-miterlimit="10"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke="#10e36c"
          fill="none"
        ></polyline>
      </svg>
    </div>
    <h4 class="text-xl text-gray-100 font-semibold mb-5">
      Your account is activated!
    </h4>
    <p class="text-gray-300 font-medium">
      Account has been verified Successfully.
    </p>
  </div>
  <div class="pt-5 pb-6 px-6 text-right bg-gray-800 -mb-2">
    <a
      href="#"
      class="inline-block w-full sm:w-auto py-3 px-5 mb-2 mr-4 text-center font-semibold leading-6 text-gray-200 bg-gray-500 hover:bg-gray-400 rounded-lg transition duration-200"
      >Cancel</a
    ><a
      href="#"
      class="inline-block w-full sm:w-auto py-3 px-5 mb-2 text-center font-semibold leading-6 text-blue-50 bg-green-500 hover:bg-green-600 rounded-lg transition duration-200"
      >Confirm</a
    >
  </div>
</div>


    

================================================
FILE: Cards/themrsami_selfish-fox-70.html
================================================
<!-- From Uiverse.io by themrsami - Tags: card, tailwind, tailwindcss, themrsami, darkversion -->
<div class="w-full max-w-[570px] rounded-[20px] bg-gray-900 py-12 px-8 text-center md:py-[60px] md:px-[70px]">
  <h3 class="text-white pb-2 text-xl font-bold sm:text-2xl">Your Message Sent Successfully</h3>
  <span class="bg-indigo-500 mx-auto mb-6 inline-block h-1 w-[90px] rounded"></span>
  <p class="text-gray-400 mb-10 text-base leading-relaxed">Lorem Ipsum is simply dummy text of the printing and
  typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  <div class="flex flex-wrap gap-3">
      <button class="text-white block w-full rounded-lg border border-gray-700 p-3 text-center text-base font-medium transition hover:border-red-600 hover:bg-red-600 hover:text-white">Cancel</button>
      <button class="bg-indigo-500 border-indigo-500 block w-full rounded-lg border p-3 text-center text-base font-medium text-white transition hover:bg-opacity-90">View Details</button>
  </div>
</div>




================================================
FILE: Cards/tofe812_helpless-fly-63.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by tofe812 - Tags: card */
.card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid a2a2a2;
  color: black;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75),
              0px 0px 10px 0px rgba(255, 255, 255, 0.75),
              0px 0px 20px 0px rgba(156, 156, 156, 0.75);
  transform: rotateX(-25deg) rotateY(45deg) rotateZ(0deg) translateX(-40px) translateY(-40px);
  transition: all 0.3s ease-in-out;
  -webkit-user-select: none;
 /* Safari */
  user-select: none;
 /* Standard syntax */
}

.card:hover {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75),
              0px 0px 20px 0px rgba(255, 255, 255, 0.75),
              0px 0px 50px 0px rgba(156, 156, 156, 0.75);
  transform: scale(1.1);
}

.heading {
  font-size: 18px;
  margin-bottom: 10px;
  text-align: center;
}

.heading span {
  margin: 0;
  font-size: 38px;
  font-weight: bold;
  color: transparent;
  text-transform: uppercase;
  background-image: linear-gradient(to left, #2ecc71, #3498db, #9b59b6, #f39c12, #2ecc71, #3498db);
  background-clip: text;
  animation: spanAnimate 5s linear infinite;
  background-size: 500%;
}

.heading span::before {
  content: "\a";
  white-space: pre;
}

.item {
  display: flex;
  padding-block: 5px;
  padding-left: 10px;
}

.item--create {
  color: rgb(255, 165, 0);
  filter: drop-shadow(0 0 5px rgb(255 165 0 / 0.6));
}

.item--post {
  color: rgb(220, 20, 60);
  filter: drop-shadow(0 0 5px rgb(220 20 60 / 0.6));
}

.item--inspire {
  color: rgb(20, 213, 220);
  filter: drop-shadow(0 0 5px rgb(20 213 220 / 0.6));
}

.item svg {
  margin: 5px;
}

.item span {
  align-self: center;
}

button {
  margin: 5px;
  padding: 10px;
  background-color: rgb(100, 149, 237);
  /* color: white; */
  border: 1px solid cornflowerblue;
  border-radius: 10px;
  box-shadow: 0px 0px 20px 0px rgba(100, 149, 237, 0.75);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

button:hover {
  box-shadow: 0px 0px 5px 0px rgba(100, 149, 237, 0.75),
              0px 0px 20px 0px rgba(100, 149, 237, 0.75),
              0px 0px 50px 0px rgba(100, 149, 237, 0.75);
  transform: scale(1.1);
}

@keyframes spanAnimate {
  0% {
    background-position: 0 100%;
  }

  100% {
    background-position: 100% 0;
  }
}

@media (prefers-color-scheme: dark) {
  .card {
    color: white;
  }

  button {
    color: white;
  }
}
</style>


================================================
FILE: Cards/tsd29142_grumpy-chicken-19.html
================================================
<div class="container">
  <div class="card">
  
  </div>
    </div>
<style>
/* From Uiverse.io by tsd29142 - Tags: card, hover, box-shadow, aesthetic */
.card {
  height: 250px;
  width: 190px;
  background-image: linear-gradient(to top,   #210c93, #0d117a, #011160, #010e47, #07052e);
  box-shadow: rgba(0, 0, 0, 0.24) -20px 30px 10px;
  transform-style: preserve-3d;
  transform: perspective(400px)
  rotateX(60deg)
  rotateZ(-30deg);
  border-radius: 10px;
  transition: transform 2s;
}

.card:hover {
  transform: rotateY(19deg);
}
</style>


================================================
FILE: Cards/uctteam_rare-skunk-4.html
================================================
<!-- From Uiverse.io by uctteam  - Tags: animation, pink, card, css effect, hoverme, box-shadow, buttons, 3d button -->
<div class="grid grid-cols-2 w-[700px] gap-2 max-[500px]:grid-cols-1 px-3">
  <div
    class="group w-full rounded-lg bg-[#673ab7] p-5 transition relative duration-300 cursor-pointer hover:translate-y-[3px] hover:shadow-[0_-8px_0px_0px_#2196f3]"
  >
    <p class="text-white text-2xl">2000</p>
    <p class="text-white text-sm">lorem</p>
    <svg
      xml:space="preserve"
      style="enable-background:new 0 0 512 512"
      viewBox="0 0 512 512"
      y="0"
      x="0"
      height="36"
      width="36"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      class="group-hover:opacity-100 absolute right-[10%] top-[50%] translate-y-[-50%] opacity-20 transition group-hover:scale-110 duration-300"
    >
      <g>
        <path
          class=""
          data-original="#000000"
          opacity="1"
          fill="#ffffff"
          d="M135.169 91.902c16.83 0 30.474-13.649 30.474-30.485 0-11.22-13.533-36.418-22.563-51.981-3.524-6.075-12.297-6.075-15.822 0-9.029 15.563-22.563 40.761-22.563 51.981 0 16.836 13.644 30.485 30.474 30.485zM256 91.902c16.83 0 30.474-13.649 30.474-30.485 0-11.22-13.533-36.418-22.563-51.981-3.524-6.075-12.297-6.075-15.822 0-9.029 15.563-22.563 40.761-22.563 51.981 0 16.836 13.643 30.485 30.474 30.485zM376.83 91.902c16.83 0 30.474-13.649 30.474-30.485 0-11.22-13.533-36.418-22.563-51.981-3.525-6.075-12.297-6.075-15.822 0-9.029 15.563-22.563 40.761-22.563 51.981 0 16.836 13.644 30.485 30.474 30.485zM118.391 116.951c-7.454 0-13.497 6.045-13.497 13.502v108.924h60.55V130.454c0-7.457-6.042-13.502-13.497-13.502h-33.556zM239.221 116.951c-7.454 0-13.497 6.045-13.497 13.502v108.924h60.55V130.454c0-7.457-6.043-13.502-13.497-13.502h-33.556zM360.052 116.951c-7.454 0-13.497 6.045-13.497 13.502v108.924h60.55V130.454c0-7.457-6.043-13.502-13.497-13.502h-33.556zM66.25 356.095a26.11 26.11 0 0 0 7.425-1.08l37.866-11.209c12.377-3.664 25.284-5.496 38.19-5.496s25.813 1.832 38.19 5.496l29.888 8.848c12.377 3.664 25.284 5.496 38.19 5.496s25.813-1.832 38.19-5.496l29.888-8.848c12.377-3.664 25.284-5.496 38.19-5.496s25.813 1.832 38.19 5.496l37.866 11.209a26.146 26.146 0 0 0 7.425 1.08c12.118 0 22.787-8.481 22.787-19.746v-38.672c0-12.82-12.02-23.213-26.848-23.213H70.312c-14.828 0-26.848 10.393-26.848 23.213v38.672c0 11.265 10.67 19.746 22.786 19.746zM497 477.12h-40.946v-91.989a56.002 56.002 0 0 1-10.305.964 56.132 56.132 0 0 1-15.941-2.313l-37.866-11.209c-9.553-2.828-19.537-4.262-29.674-4.262s-20.121 1.434-29.674 4.262l-29.888 8.848c-15.086 4.466-30.799 6.73-46.705 6.73s-31.62-2.264-46.706-6.73l-29.888-8.848c-9.553-2.828-19.537-4.262-29.674-4.262s-20.121 1.434-29.674 4.262l-37.866 11.209a56.138 56.138 0 0 1-15.941 2.314c-3.487 0-6.935-.333-10.305-.964v91.989H15c-8.284 0-15 6.716-15 15s6.716 15 15 15h482c8.284 0 15-6.716 15-15s-6.716-15.001-15-15.001z"
        ></path>
      </g>
    </svg>
  </div>
  <div
    class="group w-full rounded-lg bg-[rgb(41,49,79)] p-5 transition relative duration-300 cursor-pointer hover:translate-y-[3px] hover:shadow-[0_-8px_0px_0px_rgb(244,67,54)]"
  >
    <p class="text-white text-2xl">1999</p>
    <p class="text-white text-sm">lorem</p>

    <svg
      class="group-hover:opacity-100 absolute right-[10%] top-[50%] translate-y-[-50%] opacity-20 transition group-hover:scale-110 duration-300"
      xml:space="preserve"
      style="enable-background:new 0 0 512 512"
      viewBox="0 0 405.333 405.333"
      y="0"
      x="0"
      height="36"
      width="36"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g>
        <path
          class=""
          data-original="#000000"
          opacity="1"
          fill="#ffffff"
          d="M202.667 0C117.333 0 32 10.667 32 85.333V288c0 41.173 33.493 74.667 74.667 74.667l-32 32v10.667h47.573l42.667-42.667h80.427L288 405.333h42.667v-10.667l-32-32c41.173 0 74.667-33.493 74.667-74.667V85.333C373.333 10.667 296.96 0 202.667 0zm-96 320c-17.707 0-32-14.293-32-32s14.293-32 32-32 32 14.293 32 32-14.294 32-32 32zm74.666-149.333H74.667V85.333h106.667v85.334zM298.667 320c-17.707 0-32-14.293-32-32s14.293-32 32-32 32 14.293 32 32-14.294 32-32 32zm32-149.333H224V85.333h106.667v85.334z"
        ></path>
      </g>
    </svg>
  </div>
</div>


    

================================================
FILE: Cards/vamsidevendrakumar_soft-shrimp-94.html
================================================
<div class="card">
  <div class="card-inner">
    <div class="card-front">
      <p>Front Side</p>
    </div>
    <div class="card-back">
      <p>Back Side</p>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by vamsidevendrakumar - Tags: animation, card, hover, animated, hover effect, card flip, hoverme, card template, hover slide */
.card {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.999s;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-front {
  background-color: #6A2C70;
  color: #fff;
  display: flex;
  align-items: center;
  border: 10px solid #6A2C70;
  border-radius: 10px;
  justify-content: center;
  font-size: 24px;
  transform: rotateY(0deg);
}

.card-back {
  background-color: #F08A5D;
  color: #fff;
  display: flex;
  align-items: center;
  border: 10px solid #F08A5D;
  border-radius: 10px;
  justify-content: center;
  font-size: 24px;
  transform: rotateY(180deg);
}

</style>


================================================
FILE: Cards/vikas7754_fat-monkey-43.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by vikas7754 - Tags: bubble, drop, water drop */
.one-div {
  position: relative;
  width: 150px;
  height: 150px;
  background: transparent;
  border-radius: 57% 43% 37% 63% / 45% 52% 48% 52%;
  box-shadow: inset 10px 10px 10px rgba(0, 0, 0, 0.05), 
                      15px 25px 10px rgba(0, 0, 0, 0.1), 
                      15px 20px 20px rgba(0, 0, 0, 0.05), 
                inset -10px -10px 15px rgba(237, 237, 237, 0.9);
  animation: anim 1s infinite alternate;
}

.one-div:before {
  content: '';
  position: absolute;
  left: 25px;
  top: 35px;
  width: 20px;
  height: 20px;
  border-radius: 42% 58% 37% 63% / 40% 43% 57% 60%;
  background: #FFF
}

.one-div:after {
  content: '';
  position: absolute;
  left: 60px;
  top: 25px;
  width: 10px;
  height: 10px;
  border-radius: 42% 58% 37% 63% / 40% 43% 57% 60%;
  background: #ffffff
}

@keyframes anim {
  0% {
    transform: translateY(0);
    height: 150px;
    width: 150px;
  }

  100% {
    transform: translateY(40px);
    height: 135px;
    width: 160px;
  }
}
</style>


================================================
FILE: Cards/vikas7754_wet-goose-61.html
================================================
<div class="truck">
  <div class="truck__body">
    <div class="truck__body truck__body--top">
      <div class="truck__window">
        <div class="truck__window-glass"></div>
      </div>
    </div>
    <div class="truck__body truck__body--mid">
      <div class="truck__mid-body"></div>
    </div>
    <div class="truck__body truck__body--bottom">
      <div class="truck__underpanel"></div>
      <div class="truck__rear-bumper"></div>
      <div class="truck__side-skirt"></div>
    </div>
  </div>
  <div class="truck__wheel truck__wheel--front">
    <div class="truck__wheel-arch"></div>
    <div class="truck__wheel-arch-trim truck__wheel-arch-trim--top"></div>
    <div class="truck__wheel-arch-trim truck__wheel-arch-trim--left"></div>
    <div class="truck__wheel-arch-trim truck__wheel-arch-trim--right"></div>
    <div class="truck-wheel">
      <div class="truck-wheel__rim">
        <div style="--index: 0;" class="truck-wheel__spoke"></div>
        <div style="--index: 1;" class="truck-wheel__spoke"></div>
        <div style="--index: 2;" class="truck-wheel__spoke"></div>
        <div style="--index: 3;" class="truck-wheel__spoke"></div>
        <div style="--index: 4;" class="truck-wheel__spoke"></div>
        <div style="--index: 5;" class="truck-wheel__spoke"></div>
        <div style="--index: 6;" class="truck-wheel__spoke"></div>
      </div>
    </div>
  </div>
  <div class="truck__wheel truck__wheel--rear">
    <div class="truck__wheel-arch"></div>
    <div class="truck__wheel-arch-trim truck__wheel-arch-trim--top"></div>
    <div class="truck__wheel-arch-trim truck__wheel-arch-trim--left"></div>
    <div class="truck__wheel-arch-trim truck__wheel-arch-trim--right"></div>
    <div class="truck-wheel">
      <div class="truck-wheel__rim">
        <div style="--index: 0;" class="truck-wheel__spoke"></div>
        <div style="--index: 1;" class="truck-wheel__spoke"></div>
        <div style="--index: 2;" class="truck-wheel__spoke"></div>
        <div style="--index: 3;" class="truck-wheel__spoke"></div>
        <div style="--index: 4;" class="truck-wheel__spoke"></div>
        <div style="--index: 5;" class="truck-wheel__spoke"></div>
        <div style="--index: 6;" class="truck-wheel__spoke"></div>
      </div>
    </div>
  </div>
  <div class="truck__headlight"></div>
  <div class="truck__taillight"></div>
  <div class="truck__indicator"></div>
  <div class="truck__foglight"></div>
</div>

<style>
/* From Uiverse.io by vikas7754  - Website: https://codepen.io/jh3y/pen/mddgjzM - Tags: card */
.truck {
  --width: 220;
}

.truck * {
  transition: all 0.25s ease;
}

.truck {
  position: relative;
  width: calc(var(--width) * 1px);
  height: calc(var(--width) * 0.33px);
}

.truck:after {
  content: "";
  height: 5%;
  width: 100%;
  background: #000;
  position: absolute;
  left: 0;
  bottom: 5%;
  border-radius: 100%;
  filter: blur(10px);
}

.truck__indicator {
  height: 2%;
  width: 3%;
  position: absolute;
  right: 1.5%;
  background: #915d08;
  top: 64%;
  opacity: 0.45;
  z-index: 10;
}

.truck__foglight {
  height: 2%;
  width: 1%;
  position: absolute;
  left: 2%;
  background: #911308;
  top: 58%;
  opacity: 0.45;
  z-index: 10;
}

.truck__taillight {
  height: 2%;
  width: 1%;
  background: radial-gradient(circle at center, #ffebeb, #f00), #f00;
  box-shadow: 0 0 30px 5px #f33;
  position: absolute;
  top: 25%;
  z-index: 10;
  left: 0;
}

.truck__taillight:after {
  content: "";
  height: 100%;
  width: 800%;
  background: #ff4d4d;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 25%;
  filter: blur(8px);
  box-shadow: 0 0 60px 5px #ff8080;
}

.truck__headlight {
  height: 5%;
  width: 4%;
  position: absolute;
  right: 0;
  border-radius: 25%;
  top: 42%;
  z-index: 10;
  transform: rotate(4deg);
  background: #fff;
  box-shadow: 0 0 40px 5px #9bf, 0 0 2px 2px #b3ccff inset;
}

.truck__wheel {
  position: absolute;
}

.truck__wheel--front {
  height: 57%;
  width: 21%;
  bottom: 0;
  left: 75%;
  z-index: 4;
  transform: rotate(2deg);
}

.truck__wheel--rear {
  height: 57%;
  width: 21%;
  bottom: 2%;
  left: 10%;
  z-index: 4;
  transform: rotate(2deg);
}

.truck-wheel {
  border-radius: 100%;
  height: calc(var(--width) * 0.15px);
  width: calc(var(--width) * 0.15px);
  background: #242424;
  border-top: 1px solid #ccc;
  position: absolute;
  bottom: 0;
  left: 52%;
  transform: translate(-50%, 0);
}

.truck-wheel__rim {
  height: 60%;
  width: 60%;
  background: radial-gradient(circle at center, transparent, #666), #0d0d0d;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  animation: spin 0.35s infinite linear;
}

.truck-wheel__rim:after {
  content: "";
  height: 35%;
  width: 35%;
  background: radial-gradient(
      circle at center,
      #0d0d0d,
      #0d0d0d 40%,
      transparent 40%
    ),
    radial-gradient(circle at center, #262626, #262626 40%, transparent),
    #8c8c8c;
  border: 1px solid #1a1a1a;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  z-index: 2;
}

@-moz-keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-o-keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.truck-wheel__spoke {
  position: absolute;
  height: 60%;
  width: 20%;
  background: linear-gradient(0deg, transparent, #1a1a1a 50%), #808080;
  border-left: 1px solid #4d4d4d;
  border-right: 1px solid #333;
  border-radius: 0 0 25% 25%;
  top: 50%;
  left: 50%;
  transform-origin: top center;
  transform: translate(-50%, 0) rotate(calc(360 / 7 * var(--index) * 1deg));
}

.truck__wheel-arch {
  background: #080808;
  position: absolute;
  top: 0;
  left: 0;
  right: 1%;
  height: 54%;
  -webkit-clip-path: polygon(0 100%, 23% 0, 81% 0%, 95% 60%, 95% 100%);
  clip-path: polygon(0 100%, 23% 0, 81% 0%, 95% 60%, 95% 100%);
}
.truck__wheel-arch-trim {
  position: absolute;
}
.truck__wheel-arch-trim--top {
  top: 0;
  left: 25%;
  background: #8c8c8c;
  height: 5%;
  width: 53%;
  z-index: 2;
}
.truck__wheel-arch-trim--left {
  top: 0;
  left: -20%;
  background: linear-gradient(160deg, transparent, #666), #333;
  height: 5%;
  width: 44%;
  transform-origin: top right;
  transform: rotate(-60deg);
}
.truck__wheel-arch-trim--right {
  top: 0;
  left: 79%;
  background: linear-gradient(-158deg, transparent, #666), #333;
  height: 5%;
  width: 35%;
  transform-origin: top left;
  transform: rotate(58deg);
}
.truck__body {
  position: absolute;
  height: 100%;
  width: 100%;
}
.truck__body--top {
  background: linear-gradient(90deg, #f4f1f1, #bfbfbf 50%), #e8e3e3;
  height: 33%;
  width: 100%;
  top: 0;
  transform: rotate(3deg);
  -webkit-clip-path: polygon(0 100%, 58% 0, 98% 100%);
  clip-path: polygon(0 100%, 58% 0, 98% 100%);
}
.truck__body--top:before {
  --groove: #999;
  content: "";
  background: linear-gradient(
      95deg,
      transparent,
      transparent 2%,
      var(--groove) 2%,
      var(--groove) 3%,
      transparent 3%
    ),
    linear-gradient(
      75deg,
      transparent,
      transparent 47%,
      var(--groove) 47%,
      var(--groove) 48%,
      transparent 48%
    ),
    linear-gradient(
      78deg,
      transparent,
      transparent 95%,
      var(--groove) 95%,
      var(--groove) 96%,
      transparent 96%
    );
  position: absolute;
  height: 55%;
  width: 40%;
  left: 36%;
  bottom: 0;
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 58%, 100% 100%);
  clip-path: polygon(0 100%, 0 0, 100% 58%, 100% 100%);
}
.truck__body--mid {
  position: absolute;
  width: 100%;
  height: 36%;
  top: 25%;
  transform: rotate(3deg);
  transform-origin: top left;
  z-index: 2;
}
.truck__body--mid:after {
  content: "";
  position: absolute;
  background: #1f1f1f;
  height: 20%;
  width: 5%;
  bottom: 20%;
  right: -0.25%;
  opacity: 1;
  border-left: 1px solid #1a1a1a;
}
.truck__body--mid:before {
  content: "";
  position: absolute;
  background: #0f0f0f;
  height: 20%;
  width: 5%;
  bottom: 5%;
  right: 0%;
  border-radius: 0 0 50% 25%;
  border-left: 1px solid #141414;
}
.truck__body--bottom {
  top: 50%;
  height: 32%;
}
.truck__rear-bumper {
  position: absolute;
  height: 1px;
  width: 9%;
  background: #808080;
  top: 38%;
  left: 2.5%;
  transform-origin: top left;
  transform: rotate(3deg);
}
.truck__side-skirt {
  height: 1px;
  width: 43%;
  position: absolute;
  bottom: 19%;
  left: 32%;
  transform-origin: top left;
  transform: rotate(1deg);
  background: #808080;
}
.truck__underpanel {
  background: #080808;
  height: 65%;
  width: 100%;
  position: absolute;
  bottom: 0;
  -webkit-clip-path: polygon(2% 0, 14% 100%, 88% 100%, 99% 60%, 99% 40%);
  clip-path: polygon(2% 0, 14% 100%, 88% 100%, 99% 60%, 99% 40%);
}
.truck__mid-body {
  --groove: #262626;
  height: 100%;
  width: 100%;
  background: linear-gradient(
      84deg,
      transparent,
      transparent 36.75%,
      var(--groove) 36.75%,
      var(--groove) 37.25%,
      transparent 37.25%
    ),
    linear-gradient(
      83deg,
      transparent,
      transparent 55.75%,
      var(--groove) 55.75%,
      var(--groove) 56.25%,
      transparent 56.25%
    ),
    linear-gradient(
      88deg,
      transparent,
      transparent 75%,
      var(--groove) 75%,
      var(--groove) 75.5%,
      transparent 75.5%
    ),
    linear-gradient(90deg, transparent, transparent 96%, #1f1f1f 96%),
    linear-gradient(90deg, transparent, #262626), #333;
  -webkit-clip-path: polygon(0 0, 3% 100%, 80% 84%, 99.5% 78%, 100% 10%, 98% 0);
  clip-path: polygon(0 0, 3% 100%, 80% 84%, 99.5% 78%, 100% 10%, 98% 0);
}
.truck__mid-body:after,
.truck__mid-body:before {
  content: "";
  position: absolute;
  width: 4%;
  height: 4%;
  left: 38%;
  top: 6%;
  border: 1px solid #4d4d4d;
  border-radius: 25%;
}
.truck__mid-body:before {
  left: 58%;
}
.truck__window {
  --window-black: rgba(0, 0, 0, 0.85);
  --window-white: rgba(255, 255, 255, 0.3);
  position: absolute;
  height: 80%;
  width: 60%;
  background: #000;
  left: 37%;
  transform: skew(-5deg);
  -webkit-clip-path: polygon(0 100%, 0 55%, 34.5% 11%, 85% 108%);
  clip-path: polygon(0 100%, 0 55%, 34.5% 11%, 85% 108%);
}
.truck__window-glass {
  background: linear-gradient(
      0deg,
      var(--window-black) 0,
      var(--window-black) 15%,
      transparent 15%
    ),
    linear-gradient(90deg, transparent, var(--window-black) 90%),
    linear-gradient(90deg, var(--window-white), transparent 80%),
    linear-gradient(
      68deg,
      transparent,
      transparent 30%,
      var(--window-black) 30%,
      var(--window-black) 31%,
      transparent 31%,
      transparent 55%,
      var(--window-black) 55%,
      var(--window-black) 56%,
      transparent 56%
    ),
    var(--window-white);
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 88%;
  width: 98%;
  -webkit-clip-path: polygon(0 100%, 0 55%, 34.5% 11%, 85% 105%);
  clip-path: polygon(0 100%, 0 55%, 34.5% 11%, 85% 105%);
}
.truck__window:before {
  content: "";
  background: #000;
  position: absolute;
  height: 10%;
  width: 100%;
  bottom: 0;
  transform: rotate(2deg);
  z-index: -1;
  -webkit-clip-path: polygon(40% 100%, 100% -100%, 100% 100%);
  clip-path: polygon(40% 100%, 100% -100%, 100% 100%);
}
@-moz-keyframes backdrop {
  from {
    transform: translate(calc(var(--distance) * 1em), 0);
  }
  to {
    transform: translate(calc(var(--distance) * -1em), 0);
  }
}
@-webkit-keyframes backdrop {
  from {
    transform: translate(calc(var(--distance) * 1em), 0);
  }
  to {
    transform: translate(calc(var(--distance) * -1em), 0);
  }
}
@-o-keyframes backdrop {
  from {
    transform: translate(calc(var(--distance) * 1em), 0);
  }
  to {
    transform: translate(calc(var(--distance) * -1em), 0);
  }
}
@keyframes backdrop {
  from {
    transform: translate(calc(var(--distance) * 1em), 0);
  }
  to {
    transform: translate(calc(var(--distance) * -1em), 0);
  }
}

</style>
    

================================================
FILE: Cards/vinodjangid07_bad-deer-17.html
================================================
<div class="notificationCard">
  <p class="notificationHeading">Push notifications</p>
  <svg class="bellIcon" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"></path></svg>
  <p class="notificationPara">Allow push notifications so you will get latest updates</p>
  <div class="buttonContainer">
    <button class="AllowBtn">Allow</button>
    <button class="NotnowBtn">Now now</button>
  </div>
</div>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: notification, card, popup */
.notificationCard {
  width: 220px;
  height: 280px;
  background: rgb(245, 245, 245);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 35px;
  gap: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.123);
  border-radius: 20px;
}

.bellIcon {
  width: 50px;
  margin: 20px 0px;
}

.bellIcon path {
  fill: rgb(168, 131, 255);
}

.notificationHeading {
  color: black;
  font-weight: 600;
  font-size: 0.8em;
}

.notificationPara {
  color: rgb(133, 133, 133);
  font-size: 0.6em;
  font-weight: 600;
  text-align: center;
}

.buttonContainer {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.AllowBtn {
  width: 120px;
  height: 25px;
  background-color: rgb(168, 131, 255);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.7em;
  font-weight: 600;
  cursor: pointer;
}

.NotnowBtn {
  width: 120px;
  height: 25px;
  color: rgb(168, 131, 255);
  border: none;
  background-color: transparent;
  font-weight: 600;
  font-size: 0.7em;
  cursor: pointer;
  border-radius: 20px;
}

.NotnowBtn:hover {
  background-color: rgb(239, 227, 255);
}

.AllowBtn:hover {
  background-color: rgb(153, 110, 255);
}

</style>


================================================
FILE: Cards/vinodjangid07_brave-elephant-94.html
================================================
<div class="card">
  <div class="card-content">
    <p class="card-heading">Delete file?</p>
    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adi</p>
  </div>
  <div class="card-button-wrapper">
    <button class="card-button secondary">Cancel</button>
    <button class="card-button primary">Delete</button>
  </div>
  <button class="exit-button">
    <svg height="20px" viewBox="0 0 384 512">
      <path
        d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
      ></path>
    </svg>
  </button>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: simple, card, delete, hover effect, buttons */
.card {
  width: 300px;
  height: fit-content;
  background: rgb(255, 255, 255);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 30px;
  position: relative;
  box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.068);
}
.card-content {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.card-heading {
  font-size: 20px;
  font-weight: 700;
  color: rgb(27, 27, 27);
}
.card-description {
  font-weight: 100;
  color: rgb(102, 102, 102);
}
.card-button-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.card-button {
  width: 50%;
  height: 35px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.primary {
  background-color: rgb(255, 114, 109);
  color: white;
}
.primary:hover {
  background-color: rgb(255, 73, 66);
}
.secondary {
  background-color: #ddd;
}
.secondary:hover {
  background-color: rgb(197, 197, 197);
}
.exit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.exit-button:hover svg {
  fill: black;
}
.exit-button svg {
  fill: rgb(175, 175, 175);
}

</style>
    

================================================
FILE: Cards/vinodjangid07_chilly-walrus-45.html
================================================
<div class="socials-container">
  <a href="#" class="social twitter">
    <svg height="1em" viewBox="0 0 512 512">
      <path
        d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
      ></path>
    </svg>
  </a>

  <a href="#" class="social facebook"
    ><svg height="1em" viewBox="0 0 320 512">
      <path
        d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
      ></path></svg
  ></a>

  <a href="#" class="social google-plus">
    <svg height="1em" viewBox="0 0 640 512">
      <path
        d="M386.061 228.496c1.834 9.692 3.143 19.384 3.143 31.956C389.204 370.205 315.599 448 204.8 448c-106.084 0-192-85.915-192-192s85.916-192 192-192c51.864 0 95.083 18.859 128.611 50.292l-52.126 50.03c-14.145-13.621-39.028-29.599-76.485-29.599-65.484 0-118.92 54.221-118.92 121.277 0 67.056 53.436 121.277 118.92 121.277 75.961 0 104.513-54.745 108.965-82.773H204.8v-66.009h181.261zm185.406 6.437V179.2h-56.001v55.733h-55.733v56.001h55.733v55.733h56.001v-55.733H627.2v-56.001h-55.733z"
      ></path>
    </svg>
  </a>

  <a href="#" class="social instagram"
    ><svg height="1em" viewBox="0 0 448 512">
      <path
        d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
      ></path></svg
  ></a>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: twitter, facebook, instagram, card, social media, hover effect, google plus */
.socials-container {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: 20px 40px;
  background-color: #333333;
}
.social {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgb(194, 194, 194);
}
.twitter:hover {
  background: linear-gradient(45deg, #66757f, #00acee, #36daff, #dbedff);
}
.facebook:hover {
  background: linear-gradient(45deg, #134ac0, #316ff6, #78a3ff);
}
.google-plus:hover {
  background: linear-gradient(45deg, #872419, #db4a39, #ff7061);
}
.instagram:hover {
  background: #f09433;
  background: -moz-linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  background: -webkit-linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}
.social svg {
  fill: white;
  height: 20px;
}

</style>
    

================================================
FILE: Cards/vinodjangid07_empty-rabbit-37.html
================================================
 <div class="cardContainer">
        <div class="profileDiv">Hover Me</div>
        <div class="infoDiv">
            <div class="nameDiv">
                <p class="name">Chris Stark</p>
                <p class="role">Frontend Developer</p>
            </div>
            <div class="socialDiv">
                <a href="#github"><svg viewBox="0 0 496 512" class="socials github"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a>
            
            
                <a href="#linkdin"><svg viewBox="0 0 448 512" class="socials linkdin"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg></a>

                <a href="#insta"><svg class="socials instagram" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a>
            
            </div>
        </div>
    </div>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: card */
.cardContainer {
  width: 200px;
  height: 250px;
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition-duration: .5s;
  cursor: pointer;
}

.profileDiv {
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(24, 24, 24);
  transition-duration: .5s;
  color: rgb(155, 155, 155);
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
}

.cardContainer:hover .profileDiv {
  transform: translateX(-25%) translateY(-20%);
  transition-duration: .5s;
}

.infoDiv {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: aliceblue;
  z-index: 1;
}

.nameDiv {
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background-color: aliceblue;
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  gap: 2px;
}

.name {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  color: black;
}

.role {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: rgb(48, 48, 48);
  margin-bottom: 5px;
}

.socialDiv {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgb(14, 14, 14);
  gap: 25px;
}

.infoDiv a {
  width: 50%;
}

.socials {
  width: 100%;
  fill: rgb(14, 14, 14);
}

</style>


================================================
FILE: Cards/vinodjangid07_fast-squid-10.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: card */
.card {
  position: relative;
  box-sizing: border-box;
  background: linear-gradient(-45deg,#6bc5f8, #cf59e6,#6bc5f8, #cf59e6);
  animation: gradient 5s ease infinite;
  background-size: 500% 500%;
  width: 230px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  padding: 20px;
  border-radius: 20px;
}

@keyframes gradient {
  0% {
    background-position: 0 50%;
    box-shadow: 0px 0px 2px #ffffff,
      0px 0px 5px #ffffff,
      0px 0px 10px #6bc5f8,
      0px 0px 50px #6bc5f8;
  }

  50% {
    background-position: 100% 50%;
    box-shadow: 0px 0px 2px #ffffff,
      0px 0px 5px #ffffff,
      0px 0px 10px #cf59e6,
      0px 0px 50px #cf59e6;
  }

  100% {
    background-position: 0 50%;
    box-shadow: 0px 0px 2px #ffffff,
          0px 0px 5px #ffffff,
          0px 0px 10px #6bc5f8,
          0px 0px 50px #6bc5f8;
  }
}

.heading {
  color: white;
  font-weight: 500;
  font-size: 0.8em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.heading span {
  font-size: 2em;
  font-weight: 800;
  filter: drop-shadow(0px 0px 10px rgb(255, 255, 255));
  animation: flickering 2s linear infinite both;
}

@keyframes flickering {
  0%,
  100% {
    opacity: 1;
  }

  41.99% {
    opacity: 1;
  }

  42% {
    opacity: 0;
  }

  43% {
    opacity: 0;
  }

  43.01% {
    opacity: 1;
  }

  47.99% {
    opacity: 1;
  }

  48% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  49.01% {
    opacity: 1;
  }
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: fit-content;
  gap: 10px;
}

.item {
  color: white;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: default;
}

.item svg {
  transition-duration: .3s;
}

.item:hover svg {
  filter: drop-shadow(0px 0px 10px white);
  transition-duration: .3s;
}

button {
  width: 100%;
  height: 30px;
  background-color: transparent;
  border: none;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 100px white;
  transition-duration: .3s;
}

button:hover {
  letter-spacing: 1.5px;
  transition-duration: .3s;
}

.card:before {
  content: "∞";
  position: absolute;
  font-size: 4em;
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: -14.2%;
  filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.445));
}
 
</style>


================================================
FILE: Cards/vinodjangid07_fat-puma-69.html
================================================
<div class="visa-card">
  <div class="logoContainer">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      x="0px"
      y="0px"
      width="23"
      height="23"
      viewBox="0 0 48 48"
      class="svgLogo"
    >
      <path
        fill="#ff9800"
        d="M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z"
      ></path>
      <path
        fill="#d50000"
        d="M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z"
      ></path>
      <path
        fill="#ff3d00"
        d="M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z"
      ></path>
    </svg>
  </div>
  <div class="number-container">
    <label class="input-label" for="cardNumber">CARD NUMBER</label>
    <input
      class="inputstyle"
      id="cardNumber"
      placeholder="XXXX XXXX XXXX XXXX"
      name="cardNumber"
      type="text"
    />
  </div>

  <div class="name-date-cvv-container">
    <div class="name-wrapper">
      <label class="input-label" for="holderName">CARD HOLDER</label>
      <input
        class="inputstyle"
        id="holderName"
        placeholder="NAME"
        type="text"
      />
    </div>

    <div class="expiry-wrapper">
      <label class="input-label" for="expiry">VALID THRU</label>
      <input class="inputstyle" id="expiry" placeholder="MM/YY" type="text" />
    </div>
    <div class="cvv-wrapper">
      <label class="input-label" for="cvv">CVV</label>
      <input
        class="inputstyle"
        placeholder="***"
        maxlength="3"
        id="cvv"
        type="password"
      />
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: material design, gradient, card, input, payment, mastercard, visa, credit card */
.visa-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 300px;
  height: 180px;
  background-image: radial-gradient(
    circle 897px at 9% 80.3%,
    rgba(55, 60, 245, 1) 0%,
    rgba(234, 161, 15, 0.9) 100.2%
  );
  border-radius: 10px;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  gap: 15px;
}
.logoContainer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: fit-content;
  position: absolute;
  top: 0;
  left: 0;
  padding: 18px;
}
.svgLogo {
  height: 40px;
  width: auto;
}
.inputstyle::placeholder {
  color: #ffffff;
}
.inputstyle {
  background-color: transparent;
  border: none;
  outline: none;
  color: white;
  caret-color: red;
  font-size: 13px;
  height: 25px;
  letter-spacing: 1.5px;
}
.number-container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
}
#cardNumber {
  width: 100%;
  height: 25px;
}
.name-date-cvv-container {
  width: 100%;
  height: 25px;
  display: flex;
  gap: 10px;
}
.name-wrapper {
  width: 60%;
  height: fit-content;
  display: flex;
  flex-direction: column;
}
.expiry-wrapper,
.cvv-wrapper {
  width: 30%;
  height: fit-content;
  display: flex;
  flex-direction: column;
}
.cvv-wrapper {
  width: 10%;
}
#expiry,
#cvv {
  width: 100%;
}
.input-label {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #e2e2e2;
  width: 100%;
}

</style>
    

================================================
FILE: Cards/vinodjangid07_foolish-rattlesnake-100.html
================================================
<div class="social-card">
  <button class="Btn github">
    <span class="svgContainer">
      <svg height="1.6em" viewBox="0 0 496 512" fill="white">
        <path
          d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
        ></path>
      </svg>
    </span>
    <span class="BG"></span>
  </button>

  <button class="Btn whatsapp">
    <span class="svgContainer">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="1.6em"
        fill="white"
        viewBox="0 0 448 512"
      >
        <path
          d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"
        ></path>
      </svg>
    </span>
    <span class="BG"></span>
  </button>

  <button class="Btn linkdin">
    <span class="svgContainer">
      <svg
        fill="white"
        class="svgIcon"
        xmlns="http://www.w3.org/2000/svg"
        height="1.6em"
        viewBox="0 0 448 512"
      >
        <path
          d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z"
        ></path>
      </svg>
    </span>
    <span class="BG"></span>
  </button>

  <button class="Btn discord">
    <span class="svgContainer">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="1.4em"
        fill="white"
        viewBox="0 0 640 512"
      >
        <path
          d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"
        ></path>
      </svg>
    </span>
    <span class="BG"></span>
  </button>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, social, card, hover, github, social media, linkdin, discord */
.social-card {
  height: fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgb(255, 255, 255);
  padding: 20px 25px;
  border-radius: 14px;
}
.Btn {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
}

.svgContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(0px);
  letter-spacing: 0.8px;
  border-radius: 10px;
  transition: all 0.3s;
  border: 1px solid rgba(156, 156, 156, 0.466);
  z-index: 2;
}

.BG {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #181818;
  z-index: 1;
  border-radius: 10px;
  pointer-events: none;
  transition: all 0.3s;
  font-size: 0px;
}
.github .BG {
  background: #181818;
}
.linkdin .BG {
  background: #0077b5;
}
.whatsapp .BG {
  background: #075e54;
}
.discord .BG {
  background: #7289da;
}
.Btn:hover .BG {
  transform: scale(1.5);
  /* transform-origin: bottom; */
  font-size: 20px;
  color: white;
}

.Btn:hover .svgContainer {
  border: 1px solid rgba(216, 216, 216, 0.466);
  background-color: rgba(209, 209, 209, 0.466);
  backdrop-filter: blur(4px);
}

</style>
    

================================================
FILE: Cards/vinodjangid07_grumpy-mule-23.html
================================================
<div class="cardContainer">
  <div class="card">
    <p class="city">PINK CITY</p>
    <p class="weather">PARTILY CLOUDY</p>
    <svg
      class="weather"
      version="1.1"
      id="Layer_1"
      x="0px"
      y="0px"
      width="50px"
      height="50px"
      viewBox="0 0 100 100"
      xml:space="preserve"
    >
      <image
        id="image0"
        width="100"
        height="100"
        x="0"
        y="0"
        href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAMg0lEQVR42u2de5AcVb3HP7/unZ19Tt4vQsgGwpIABoREEVJqlFyLwgclEsmliFZULIWgqFHxlZKioBRKIVzBRwEmKUFQsQollhCzAW9xrzxKi/IiybVAgVjktdlkd3Z3errPzz+6Z3d2d2a3Z7bnsaF/VVvdc/qc032+nz3nd87p7tMQW2yxxRZbbLHFFltsscVWXZNaX0Ap1ruLeQ1ZlqN0CsxXQ6vCdFHaMKBCnxp6BNKqvCHKXs/mpfYPcaDW1x7W6haIdtGQdVlllDUoa1RZJTANBRQ02A79ZuTvEXEMPcBzCrvF0NUyj+dkDW6ty1jI6gqIbsEafBdrxLAB5TJRUqq5g1AWjLz0eWHH1fBrhO1te9kj38bUuuw5qwsg+hRzHJdNKB9HWTRCVIgaxoi0anhNlPvV5q7UVRyutRY1BaK7mOfYfEaVG0RJjREVKgpjRJghrXCv7XBb6zW8XitNagJEn6bZyfB14EsoyYKiQvVg5MVTwyDCbak2bpV1DFRbm6oDyXbxflW2IiwpKFYNYeTSql9jXka4ftoneaya+lQNiHbRloUfAlcNFbpeYYw8vj2T5dp519F3wgAZfIozLcPDKGdNJRh+HEGVvWp03cxreaHSWlmVPkHmSa4Sw/NTFQYKAmdYIv/bcxdXTmkgThebMGwXpWmqwsi7tmaDPHB0K1+cckBUkcwebkHYKsE5pjgM1K8pAnL70Tvk5ikFxHmKmwVuHL/QUwvGiHjC1498X26qhHaRO3VnD58FfnDCwhiRVj8/8wvcWbdAMk9xJR4/O5GaKcZJq4pRox+dvZlf1h2QzB85C5dnBFreDDCG4hnSanTV7K/ytyh0jMSH6NM0i8sDbzoY/rFWRB7ev8Uve10AyTr8AFjxpoMRHBc4O9kkd0Sh5aSbrGwXFys88WaFkR+m6Hvn3Mjuyeg5qRqif6VRlbtiGP5WPLln350kawYke4gvIyyLYQyFd844xucno2nZTZZ2MduBf6C0xjCGf6vS2+hpx/Rv012OrmXXEEf5XAxjbLkF2rOWXF+urmXVEN1JKpPkHwIzYhhjy61Kt6S1Y85t9JaqbVk1JJPk0zGM4uVGmUkz15SjbVlARNkYwxi/3MbIxqoAcXbxNmBZDGP8cotw5sFv8NaKA1Hl6hjGBOXOlcnI1RUHAnw4hhG6TB+pKJDBx1mOclIMI2SZYNHBzZxeMSCW/9BzDKOEMhnhPRUD4ilrYhillQmVygEROD+GUUKZ/HKdV6LG4Ux3khy0SItixzDCwQjO7fUOamvnXWTC6NwQFoijdJ5oMFTBM+B54Hr+vprhtLZAgwV2sF8qDBREsdsaOQ14MVIgatOJOTFgeB44LgxmIeP6+9qQwmqbj900C+Nm8PqP4Pa8RkIMjTYkbWiyIWEFzUoIGENhhjOiB2KYV46g9QTDMzDoQH8W0hlILnonqbM/QvuSd5Gc2xlclw5tvUya/tefp+eF39L9wsMkeg/RloTWhF9jQsFQEJgbVudSgLTn/jOmIgzH9SEcH4TGJZfQsXYLLQvOGboW1WEQGgRKooXWJatp6VjN/Eu+xZFntnP4iVsY6DvK9GZIWhPDCPbbw+ocupclSttUhZFx4Wg/HDMzmHfZTzltwyM0LzgHo4qqjtkW+qOhiVnvuIZTv/Ac5tRLOdzn5xvG+YuR6IEQAJlqMJwARjpxMh0bdzFjxUd94U0g9qitMeNDsltnccqGHTRd9CUO94HjjQ8jKHcqrMyhmywUo8XazTqF4XpwbADS9nw6P9VFYtpCX9g8PzHcPdWiWw1OkL+d+76vcUDh2P/czsym4XMKY8utSg5bdEAM9MkUgqEK/Rk47jSyeMMOEqkARnAxhbfFAYzdwpz/+Ar/OriPA3sfxQQ90ITl+5akBQnbb4JENfSdw9BARINXuqYIjKwLvRmYtfortC6+EBNELARiuMYUBzC25vjnn3flPWj2+9CQxO09QLb7ddL7nuT4iztpOPQSqSQ0SfjX4cL3spTjBfvfdQgDhX4HnOYOFl/0uTE1I7/JogiQ8Zqw3LkVBSsByQZQsKctxE4tJNnxNli7md4Xf8/h391KqvulwciBAP+aKjA84481Zq3ehDQ0YcxE4g43QwVhjYgzftx88K3L19J8+rsZ+NvO5dz/mVAih+5l2creeobhGb+ZGggGfY7XxLS3rCvajQ3T1R2KU6RHpkaHemzFem5YDTSd+YFrX3719W+G0Tn85GIXDekjpEVprCcYWdcfffdmICPttHZ+kOZFF9A0/2yaTjo/lH8Y20wN/5cX9zfF8y1YA1XVGF1/+qmLH4oECED6F7wILK8HGCaYBunphwHTzIwLb2D2hdcjiZZI/MPE/mY434nzGwLWi5ddunTp0oPFNC7Fh4DyDLC8HmCkB/0xRiYxn1PWP0zTgnP9eKaYGCP9QRHBxvclBfxEuPyG8m1Xy/4msKmYxCXdoFKlq55g9GuKxR97jKYF54b3D6NH5CX4hxF+okyfZIxufG7//qIv95R2T92wu9Y+IxM47X4HTvrAVhpnLi3NQU8yzlDcMoCqGlBa2vozayMB0rKe1zDsqxUMx4WBjD+pl1ywkvbll1UIgCkap5S4RWuJmtWRAAn0e6hWXdusO3xDacbKT6CEEWxYuErVpJLzM7owMiCey3YTzM9VE4bjQtYDT8E1QvOpF088YztRsxJhU1YKJA9mRQZk+gb+LvCnasJQHb7vbTywk9OxW2aV1/bnb0MCndA/lArJmIi6vYEZ5SeWckG1YKgJaobn97KslplDhR5KN6o7Ot64YXR3tJrjkSDf/ZHVEIBUPzvU8M9qwEDB5Hd7Fbz+7iq1/aaE/Ezoc2JMV6RA5NNkVfleNWDkH/cMiII32EO2vyevWQknhhYQbtIOutQ4xhxvSdp7IgUCkGrlJ2p4o9IwCJosVR+GJYBR0v//xKiCTjzRN65/qBIko/xXZ2dn0YfmygYi6xhAubHSMPLDBB+IKvT+5YFoBZsAZGiHP845jZpD6iS/O56uk3pPPfUJtqHsqTSM3I2x3LNQtgX9r/yR/r//oTLNymRqSXGQrmKuWrnytGMVAyKCWobrVMlWtGYEWyuYm24Mnoc69OgNOMf2V6ftDw3JjG2mjDGq3qZVK1Y8MZGmk158pv0a/g/DTZV88NkK0iVsH07C8muL23uQAw9ciXPkleC/0JQgrikBgJkEJHNc4EOrzl3xwzB62pMFAnDr+fz3YJu8Q+C0qGHkjuWe6jDG723ZEozc092k//oIVnIaibnLQCw/fRnjkqFxwiTHGsFpXcXca3uJK1aed9bzYbWMbAGz3ruZ6yF/JvfKW0QwgnKSzT0UrdA76IMxxp/1NUG8humLaV52KY0dF2G3z8NumY0R8L99MFbkXN6BhAXEHT2QDOKavHwEYxpbe0VIo7IfNa8qPK6O9ejb3372G6XqGOkSf8fu5gJjZBf5S25EACP3e8AZfn0g7QSCBeFZb1Ra8tJSJH/GuYa8sBH7eWGiDExP6sXnPcTTUWkY+SKYPVu52CCP5e69RwUDBTe4bZsbJKYdv5YQNGWu58PyCog5ZmxDuOsqBEMBC7JtSb38/Af5TZT6VWSp8e47uRqVbYBEBSMXJzfri/pN1WBQO3Iv2pRUM8qEgcEkbd14zs/ZFrV2FVv7vfsO/lON/FQgERWMXNqs5985zD/uun4NMqPOUS6MgmH+L8dCP3Xug2yvhG4VXYz/6O28V0V+jdIeFYxcmAmew3K9AmmjgjEqrUAadN0ZO9hZKc0q/nWEQ7exSlR+JbAoKhij47jesIMvmv8kYajymuvp5ct+xrOV1Ksqn6s4dguzsrZsE7g0Shih0kYBw/Bby9OPn7yDI5XWqnofdFGk+ztsViM3wfBnjuocxqCqfmPR/Xwvbx7ixACSswO3sNRS2SrKJfUMw8BuT/S6JfdGs2J1WKvZV9oO3swVovJdlI56gqGGVxDdvOg+flULXWr72bwfkThygPXGyI3o8KJoOcGqDONlNfqdAwnuX/ljsrXSpD4+LLkF65ByOSobFdaKYlcDhiqeGB5X0ftOXsgj9fDFz7oAkm8Hv8YCI6wXI1eoslKgIUoYanBVeRb0F67Dg0u2UfIEYCWt7oDk2+EtpLL9vBOR9+B/nHgZyuxSYKjhELBX4FlFdycdnpxzX+nLt1bL6hpIIXv1BmY2QqdRTgZaBdpM8PluC/rU0Af0eR77Ncu+U+4tb4Xp2GKLLbbYYosttthiiy222GKLLbbYYottfPs3GPtpnh9ZV0oAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjMtMDItMTdUMDg6MDM6MDcrMDA6MDBPnKiVAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIzLTAyLTE3VDA4OjAzOjA3KzAwOjAwPsEQKQAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMy0wMi0xN1QwODowMzowNyswMDowMGnUMfYAAAAASUVORK5CYII="
      ></image>
    </svg>
    <p class="temp">32°</p>
    <div class="minmaxContainer">
      <div class="min">
        <p class="minHeading">Min</p>
        <p class="minTemp">30°</p>
      </div>
      <div class="max">
        <p class="maxHeading">Max</p>
        <p class="maxTemp">32°</p>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: glassmorphism, card, weather, hover effect */
.cardContainer {
  width: fit-content;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  position: relative;
  width: 220px;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 10px;
  border-radius: 10px;
  backdrop-filter: blur(30px);
  background-color: rgba(65, 65, 65, 0.308);
  border: 1px solid rgba(255, 255, 255, 0.089);
  cursor: pointer;
}

.city {
  font-weight: 700;
  font-size: 0.9em;
  letter-spacing: 1.2px;
  color: white;
}

.weather {
  font-weight: 500;
  font-size: 0.7em;
  letter-spacing: 1.2px;
  color: rgb(197, 197, 197);
}

.temp {
  font-size: 1.8em;
  color: white;
}

.minmaxContainer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.min,
.max {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 0px 20px;
  gap: 4px;
}

.max {
  align-items: flex-start;
  border-left: 2px solid white;
}

.maxHeading,
.minHeading {
  font-size: 0.7em;
  font-weight: 600;
  color: white;
}

.maxTemp,
.minTemp {
  font-size: 0.6em;
  font-weight: 500;
  color: rgb(197, 197, 197);
}

.cardContainer::before {
  width: 100px;
  height: 100px;
  content: "";
  position: absolute;
  background-color: rgb(144, 161, 255);
  z-index: -1;
  border-radius: 50%;
  left: 100px;
  top: 50px;
  transition: all 1s;
}

.cardContainer:hover::before {
  transform: translate(-50px, 50px);
}

</style>
    

================================================
FILE: Cards/vinodjangid07_horrible-eel-23.html
================================================
<div class="card">
  <a href="#" class="socialContainer containerOne">
    <svg class="socialSvg instagramSvg" viewBox="0 0 16 16"> <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path> </svg>
  </a>
  
  <a href="#" class="socialContainer containerTwo">
    <svg class="socialSvg twitterSvg" viewBox="0 0 16 16"> <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path> </svg>              </a>
    
  <a href="#" class="socialContainer containerThree">
    <svg class="socialSvg linkdinSvg" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg>
  </a>
  
  <a href="#" class="socialContainer containerFour">
    <svg class="socialSvg whatsappSvg" viewBox="0 0 16 16"> <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"></path> </svg>
  </a>
</div>             


<style>
/* From Uiverse.io by vinodjangid07 - Tags: twitter, instagram, card, social media, whatsapp, hover effect, click effect, linkdin */
.card {
  width: fit-content;
  height: fit-content;
  background-color: rgb(238, 238, 238);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 25px;
  gap: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);
}

/* for all social containers*/
.socialContainer {
  width: 52px;
  height: 52px;
  background-color: rgb(44, 44, 44);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: .3s;
}
/* instagram*/
.containerOne:hover {
  background-color: #d62976;
  transition-duration: .3s;
}
/* twitter*/
.containerTwo:hover {
  background-color: #00acee;
  transition-duration: .3s;
}
/* linkdin*/
.containerThree:hover {
  background-color: #0072b1;
  transition-duration: .3s;
}
/* Whatsapp*/
.containerFour:hover {
  background-color: #128C7E;
  transition-duration: .3s;
}

.socialContainer:active {
  transform: scale(0.9);
  transition-duration: .3s;
}

.socialSvg {
  width: 17px;
}

.socialSvg path {
  fill: rgb(255, 255, 255);
}

.socialContainer:hover .socialSvg {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


</style>


================================================
FILE: Cards/vinodjangid07_horrible-liger-62.html
================================================
<div class="card">
  <div class="profileImage">
    <svg viewBox="0 0 128 128"><circle r="60" fill="transparent" cy="64" cx="64"></circle><circle r="48" fill="transparent" cy="64" cx="64"></circle><path fill="#191919" d="m64 14a32 32 0 0 1 32 32v41a6 6 0 0 1 -6 6h-52a6 6 0 0 1 -6-6v-41a32 32 0 0 1 32-32z"></path><path opacity="1" fill="#191919" d="m62.73 22h2.54a23.73 23.73 0 0 1 23.73 23.73v42.82a4.45 4.45 0 0 1 -4.45 4.45h-41.1a4.45 4.45 0 0 1 -4.45-4.45v-42.82a23.73 23.73 0 0 1 23.73-23.73z"></path><circle r="7" fill="#fbc0aa" cy="65" cx="89"></circle><path fill="#4bc190" d="m64 124a59.67 59.67 0 0 0 34.69-11.06l-3.32-9.3a10 10 0 0 0 -9.37-6.64h-43.95a10 10 0 0 0 -9.42 6.64l-3.32 9.3a59.67 59.67 0 0 0 34.69 11.06z"></path><path opacity=".3" fill="#356cb6" d="m45 110 5.55 2.92-2.55 8.92a60.14 60.14 0 0 0 9 1.74v-27.08l-12.38 10.25a2 2 0 0 0 .38 3.25z"></path><path opacity=".3" fill="#356cb6" d="m71 96.5v27.09a60.14 60.14 0 0 0 9-1.74l-2.54-8.93 5.54-2.92a2 2 0 0 0 .41-3.25z"></path><path fill="#fff" d="m57 123.68a58.54 58.54 0 0 0 14 0v-25.68h-14z"></path><path stroke-width="14" stroke-linejoin="round" stroke-linecap="round" stroke="#fbc0aa" fill="none" d="m64 88.75v9.75"></path><circle r="7" fill="#fbc0aa" cy="65" cx="39"></circle><path fill="#ffd8ca" d="m64 91a25 25 0 0 1 -25-25v-16.48a25 25 0 1 1 50 0v16.48a25 25 0 0 1 -25 25z"></path><path fill="#191919" d="m91.49 51.12v-4.72c0-14.95-11.71-27.61-26.66-28a27.51 27.51 0 0 0 -28.32 27.42v5.33a2 2 0 0 0 2 2h6.81a8 8 0 0 0 6.5-3.33l4.94-6.88a18.45 18.45 0 0 1 1.37 1.63 22.84 22.84 0 0 0 17.87 8.58h13.45a2 2 0 0 0 2.04-2.03z"></path><path style="fill:none;stroke-linecap:round;stroke:#fff;stroke-miterlimit:10;stroke-width:2;opacity:.1" d="m62.76 36.94c4.24 8.74 10.71 10.21 16.09 10.21h5"></path><path style="fill:none;stroke-linecap:round;stroke:#fff;stroke-miterlimit:10;stroke-width:2;opacity:.1" d="m71 35c2.52 5.22 6.39 6.09 9.6 6.09h3"></path><circle r="3" fill="#515570" cy="62.28" cx="76"></circle><circle r="3" fill="#515570" cy="62.28" cx="52"></circle><ellipse ry="2.98" rx="4.58" opacity=".1" fill="#f85565" cy="69.67" cx="50.42"></ellipse><ellipse ry="2.98" rx="4.58" opacity=".1" fill="#f85565" cy="69.67" cx="77.58"></ellipse><g stroke-linejoin="round" stroke-linecap="round" fill="none"><path stroke-width="4" stroke="#fbc0aa" d="m64 67v4"></path><path stroke-width="2" stroke="#515570" opacity=".2" d="m55 56h-9.25"></path><path stroke-width="2" stroke="#515570" opacity=".2" d="m82 56h-9.25"></path></g><path opacity=".4" fill="#f85565" d="m64 84c5 0 7-3 7-3h-14s2 3 7 3z"></path><path fill="#f85565" d="m65.07 78.93-.55.55a.73.73 0 0 1 -1 0l-.55-.55c-1.14-1.14-2.93-.93-4.27.47l-1.7 1.6h14l-1.66-1.6c-1.34-1.4-3.13-1.61-4.27-.47z"></path></svg>

  </div>
  <div class="textContainer">
    <p class="name">Pepper Potts</p>
    <p class="profile">Profile</p>
  </div>
</div>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: profile, card, hover effect */
.card {
  width: 210px;
  height: 280px;
  background: rgb(39, 39, 39);
  border-radius: 12px;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.123);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transition-duration: .5s;
}

.profileImage {
  background: linear-gradient(to right,rgb(54, 54, 54),rgb(32, 32, 32));
  margin-top: 20px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.329);
}

.textContainer {
  width: 100%;
  text-align: left;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.name {
  font-size: 0.9em;
  font-weight: 600;
  color: white;
  letter-spacing: 0.5px;
}

.profile {
  font-size: 0.84em;
  color: rgb(194, 194, 194);
  letter-spacing: 0.2px;
}

.card:hover {
  background-color: rgb(43, 43, 43);
  transition-duration: .5s;
}
</style>


================================================
FILE: Cards/vinodjangid07_hot-firefox-91.html
================================================
<div class="cookieCard">
  <p class="cookieHeading">Cookies.</p>
  <p class="cookieDescription">By using this website you automatically accept that we use cookies. <a href="#">What for?</a></p>
  <button class="acceptButton">Understood</button>
</div>

<style>
/* From Uiverse.io by vinodjangid07 - Tags: card, cookies, cookie card */
.cookieCard {
  width: 300px;
  height: 200px;
  background: linear-gradient(to right,rgb(137, 104, 255),rgb(175, 152, 255));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.cookieCard::before {
  width: 150px;
  height: 150px;
  content: "";
  background: linear-gradient(to right,rgb(142, 110, 255),rgb(208, 195, 255));
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  right: -25%;
  top: -25%;
}

.cookieHeading {
  font-size: 1.5em;
  font-weight: 600;
  color: rgb(241, 241, 241);
  z-index: 2;
}

.cookieDescription {
  font-size: 0.9em;
  color: rgb(241, 241, 241);
  z-index: 2;
}

.cookieDescription a {
  color: rgb(241, 241, 241);
}

.acceptButton {
  padding: 11px 20px;
  background-color: #7b57ff;
  transition-duration: .2s;
  border: none;
  color: rgb(241, 241, 241);
  cursor: pointer;
  font-weight: 600;
  z-index: 2;
}

.acceptButton:hover {
  background-color: #714aff;
  transition-duration: .2s;
}
</style>


================================================
FILE: Cards/vinodjangid07_lazy-rattlesnake-93.html
================================================
<div class="card">
 <svg version="1.1" id="cookieSvg" x="0px" y="0px" viewBox="0 0 122.88 122.25" xml:space="preserve"><g><path d="M101.77,49.38c2.09,3.1,4.37,5.11,6.86,5.78c2.45,0.66,5.32,0.06,8.7-2.01c1.36-0.84,3.14-0.41,3.97,0.95 c0.28,0.46,0.42,0.96,0.43,1.47c0.13,1.4,0.21,2.82,0.24,4.26c0.03,1.46,0.02,2.91-0.05,4.35h0v0c0,0.13-0.01,0.26-0.03,0.38 c-0.91,16.72-8.47,31.51-20,41.93c-11.55,10.44-27.06,16.49-43.82,15.69v0.01h0c-0.13,0-0.26-0.01-0.38-0.03 c-16.72-0.91-31.51-8.47-41.93-20C5.31,90.61-0.73,75.1,0.07,58.34H0.07v0c0-0.13,0.01-0.26,0.03-0.38 C1,41.22,8.81,26.35,20.57,15.87C32.34,5.37,48.09-0.73,64.85,0.07V0.07h0c1.6,0,2.89,1.29,2.89,2.89c0,0.4-0.08,0.78-0.23,1.12 c-1.17,3.81-1.25,7.34-0.27,10.14c0.89,2.54,2.7,4.51,5.41,5.52c1.44,0.54,2.2,2.1,1.74,3.55l0.01,0 c-1.83,5.89-1.87,11.08-0.52,15.26c0.82,2.53,2.14,4.69,3.88,6.4c1.74,1.72,3.9,3,6.39,3.78c4.04,1.26,8.94,1.18,14.31-0.55 C99.73,47.78,101.08,48.3,101.77,49.38L101.77,49.38z M59.28,57.86c2.77,0,5.01,2.24,5.01,5.01c0,2.77-2.24,5.01-5.01,5.01 c-2.77,0-5.01-2.24-5.01-5.01C54.27,60.1,56.52,57.86,59.28,57.86L59.28,57.86z M37.56,78.49c3.37,0,6.11,2.73,6.11,6.11 s-2.73,6.11-6.11,6.11s-6.11-2.73-6.11-6.11S34.18,78.49,37.56,78.49L37.56,78.49z M50.72,31.75c2.65,0,4.79,2.14,4.79,4.79 c0,2.65-2.14,4.79-4.79,4.79c-2.65,0-4.79-2.14-4.79-4.79C45.93,33.89,48.08,31.75,50.72,31.75L50.72,31.75z M119.3,32.4 c1.98,0,3.58,1.6,3.58,3.58c0,1.98-1.6,3.58-3.58,3.58s-3.58-1.6-3.58-3.58C115.71,34.01,117.32,32.4,119.3,32.4L119.3,32.4z M93.62,22.91c2.98,0,5.39,2.41,5.39,5.39c0,2.98-2.41,5.39-5.39,5.39c-2.98,0-5.39-2.41-5.39-5.39 C88.23,25.33,90.64,22.91,93.62,22.91L93.62,22.91z M97.79,0.59c3.19,0,5.78,2.59,5.78,5.78c0,3.19-2.59,5.78-5.78,5.78 c-3.19,0-5.78-2.59-5.78-5.78C92.02,3.17,94.6,0.59,97.79,0.59L97.79,0.59z M76.73,80.63c4.43,0,8.03,3.59,8.03,8.03 c0,4.43-3.59,8.03-8.03,8.03s-8.03-3.59-8.03-8.03C68.7,84.22,72.29,80.63,76.73,80.63L76.73,80.63z M31.91,46.78 c4.8,0,8.69,3.89,8.69,8.69c0,4.8-3.89,8.69-8.69,8.69s-8.69-3.89-8.69-8.69C23.22,50.68,27.11,46.78,31.91,46.78L31.91,46.78z M107.13,60.74c-3.39-0.91-6.35-3.14-8.95-6.48c-5.78,1.52-11.16,1.41-15.76-0.02c-3.37-1.05-6.32-2.81-8.71-5.18 c-2.39-2.37-4.21-5.32-5.32-8.75c-1.51-4.66-1.69-10.2-0.18-16.32c-3.1-1.8-5.25-4.53-6.42-7.88c-1.06-3.05-1.28-6.59-0.61-10.35 C47.27,5.95,34.3,11.36,24.41,20.18C13.74,29.69,6.66,43.15,5.84,58.29l0,0.05v0h0l-0.01,0.13v0C5.07,73.72,10.55,87.82,20.02,98.3 c9.44,10.44,22.84,17.29,38,18.1l0.05,0h0v0l0.13,0.01h0c15.24,0.77,29.35-4.71,39.83-14.19c10.44-9.44,17.29-22.84,18.1-38l0-0.05 v0h0l0.01-0.13v0c0.07-1.34,0.09-2.64,0.06-3.91C112.98,61.34,109.96,61.51,107.13,60.74L107.13,60.74z M116.15,64.04L116.15,64.04 L116.15,64.04L116.15,64.04z M58.21,116.42L58.21,116.42L58.21,116.42L58.21,116.42z"></path></g></svg>
  <p class="cookieHeading">We use cookies.</p>
  <p class="cookieDescription">This website uses cookies to ensure you get the best experience on our site.</p>

  <div class="buttonContainer">
    <button class="acceptButton">Allow</button>
  <button class="declineButton">Decline</button>
  </div>
  

</div>


<style>
/* From Uiverse.io by vinodjangid07 - Tags: card, cookies, popup */
.card {
  width: 300px;
  height: 220px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  gap: 13px;
  position: relative;
  overflow: hidden;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.062);
}

#cookieSvg {
  width: 50px;
}

#cookieSvg g path {
  fill: rgb(97, 81, 81);
}

.cookieHeading {
  font-size: 1.2em;
  font-weight: 800;
  color: rgb(26, 26, 26);
}

.cookieDescription {
  text-align: center;
  font-size: 0.7em;
  font-weight: 600;
  color: rgb(99, 99, 99);
}

.buttonContainer {
  display: flex;
  gap: 20px;
  flex-direction: row;
}

.acceptButton {
  width: 80px;
  height: 30px;
  background-color: #7b57ff;
  transition-duration: .2s;
  border: none;
  color: rgb(241, 241, 241);
  cursor: pointer;
  font-weight: 600;
  border-radius: 20px;
}

.declineButton {
  width: 80px;
  height: 30px;
  background-color: rgb(218, 218, 218);
  transition-duration: .2s;
  color: rgb(46, 46, 46);
  border: none;
  cursor: pointer;
  font-weight: 600;
  border-radius: 20px;
}

.declineButton:hover {
  background-color: #ebebeb;
  transition-duration: .2s;
}

.acceptButton:hover {
  background-color: #9173ff;
  transition-duration: .2s;
}
</style>


================================================
FILE: Cards/vinodjangid07_ordinary-crab-91.html
================================================
<div class="gender-card">
  <div class="large-svg-container">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 50 90"
      class="largemalesvg"
      height="90"
      width="50"
    >
      <circle stroke-width="6" stroke="#76E3FE" r="22" cy="25" cx="25"></circle>
      <path
        stroke-linecap="round"
        stroke-width="6"
        stroke="#76E3FE"
        d="M25 47L25 87"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="6"
        stroke="#76E3FE"
        d="M25 86.6958L38.6958 73"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="6"
        stroke="#76E3FE"
        d="M11 73L24.6958 86.6958"
      ></path>
    </svg>

    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 50 90"
      class="largefemalesvg"
      height="90"
      width="50"
    >
      <circle stroke-width="6" stroke="#F57CB3" r="22" cy="25" cx="25"></circle>
      <path
        stroke-linecap="round"
        stroke-width="6"
        stroke="#F57CB3"
        d="M25 47L25 87"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="6"
        stroke="#F57CB3"
        d="M12 73H38"
      ></path>
    </svg>
  </div>
  <form action="#">
    <p class="heading">What's your gender?</p>
    <div class="radio-wrapper">
      <input
        class="gender-radio-buttons"
        id="male"
        value="male"
        name="gender"
        type="radio"
      />
      <label class="genderlabel malebutton" for="male">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 50 90"
          class="smallsvg malesmallsvg"
        >
          <circle
            stroke-width="6"
            stroke="#76E3FE"
            r="22"
            cy="25"
            cx="25"
          ></circle>
          <path
            stroke-linecap="round"
            stroke-width="6"
            stroke="#76E3FE"
            d="M25 47L25 87"
          ></path>
          <path
            stroke-linecap="round"
            stroke-width="6"
            stroke="#76E3FE"
            d="M25 86.6958L38.6958 73"
          ></path>
          <path
            stroke-linecap="round"
            stroke-width="6"
            stroke="#76E3FE"
            d="M11 73L24.6958 86.6958"
          ></path></svg
        >Male
      </label>

      <input
        class="gender-radio-buttons"
        id="female"
        value="female"
        name="gender"
        type="radio"
      />
      <label class="genderlabel femalebutton" for="female">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 50 90"
          class="smallsvg"
        >
          <circle
            stroke-width="6"
            stroke="#F57CB3"
            r="22"
            cy="25"
            cx="25"
          ></circle>
          <path
            stroke-linecap="round"
            stroke-width="6"
            stroke="#F57CB3"
            d="M25 47L25 87"
          ></path>
          <path
            stroke-linecap="round"
            stroke-width="6"
            stroke="#F57CB3"
            d="M12 73H38"
          ></path></svg
        >Female
      </label>

      <input
        class="gender-radio-buttons"
        id="other"
        value="other"
        name="gender"
        type="radio"
      />
      <label class="genderlabel otherbutton" for="other">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 78 75"
          class="smallsvg other-gender"
        >
          <path
            stroke-linecap="round"
            stroke-width="6"
            stroke="#9B4AED"
            d="M73.4657 16.6983L48.2159 16.6984L19.9816 58.0001L2.99911 58"
          ></path>
          <path
            stroke-linecap="round"
            stroke-width="6"
            stroke="#9B4AED"
            d="M73.1641 16.698L59.4705 2.99992"
          ></path>
          <path
            stroke-linecap="round"
            stroke-width="6"
            stroke="#9B4AED"
            d="M59.4648 30.696L73.1629 17.0024"
          ></path>
          <path
            stroke-linecap="round"
            stroke-width="6"
            stroke="#9B4AED"
            d="M74.022 57.8121L51.1697 57.8121L19.9997 16.9999L3 17"
          ></path>
          <path
            stroke-linecap="round"
            stroke-width="6"
            stroke="#9B4AED"
            d="M73.748 57.8123L61.3547 71.51"
          ></path>
          <path
            stroke-linecap="round"
            stroke-width="6"
            stroke="#9B4AED"
            d="M61.3496 43.8147L73.747 57.5079"
          ></path>
        </svg>

        Other
      </label>
    </div>
  </form>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Website: https://www.patreon.com/posts/animated-gender-78055964?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_fan&utm_content=join_link - Name: Online Tutorials - Tags: form, card, hover, radio, gender, buttons */
.gender-card {
  width: fit-content;
  height: fit-content;
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  padding: 30px;
  border-radius: 20px;
  font-family: Arial, Helvetica, sans-serif;
  gap: 25px;
}
.large-svg-container {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
}
.largemalesvg {
  transform: rotate(180deg);
}
.heading {
  color: #1d1d1d;
  font-weight: 600;
  font-size: 25px;
  text-align: center;
}
.gender-radio-buttons {
  display: none;
}
.smallsvg {
  width: 10px;
}
.other-gender {
  width: 15px;
}
.malesmallsvg {
  transform: rotate(225deg);
}
.genderlabel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: fit-content;
  background-color: rgb(46, 46, 46);
  border-radius: 5px;
  padding: 8px 16px;
  gap: 8px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.radio-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 25px;
}
.femalebutton:hover {
  background-color: rgb(245, 185, 195);
}
.malebutton:hover {
  background-color: #569fcf;
}
.otherbutton:hover {
  background-color: #4d227a;
}
#female:checked + .femalebutton {
  background-color: rgb(245, 185, 195);
  transform: scale(1.1);
}
#male:checked + .malebutton {
  background-color: #569fcf;
  transform: scale(1.1);
}
#other:checked + .otherbutton {
  background-color: #4d227a;
  transform: scale(1.2);
}

</style>
    

================================================
FILE: Cards/vinodjangid07_ordinary-newt-65.html
================================================
<div class="walletBalanceCard">
  <div class="svgwrapper">
    <svg viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect
        x="0.539915"
        y="6.28937"
        width="21"
        height="4"
        rx="1.5"
        transform="rotate(-4.77865 0.539915 6.28937)"
        fill="#7D6B9D"
        stroke="black"
      ></rect>
      <circle
        cx="11.5"
        cy="5.5"
        r="4.5"
        fill="#E7E037"
        stroke="#F9FD50"
        stroke-width="2"
      ></circle>
      <path
        d="M2.12011 6.64507C7.75028 6.98651 12.7643 6.94947 21.935 6.58499C22.789 6.55105 23.5 7.23329 23.5 8.08585V24C23.5 24.8284 22.8284 25.5 22 25.5H2C1.17157 25.5 0.5 24.8284 0.5 24V8.15475C0.5 7.2846 1.24157 6.59179 2.12011 6.64507Z"
        fill="#BF8AEB"
        stroke="black"
      ></path>
      <path
        d="M16 13.5H23.5V18.5H16C14.6193 18.5 13.5 17.3807 13.5 16C13.5 14.6193 14.6193 13.5 16 13.5Z"
        fill="#BF8AEB"
        stroke="black"
      ></path>
    </svg>
  </div>

  <div class="balancewrapper">
    <span class="balanceHeading">Wallet balance</span>
    <p class="balance"><span id="currency">₹</span>890.12</p>
  </div>

  <button class="addmoney"><span class="plussign">+</span>Add Money</button>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: card, add, balance, money */
.walletBalanceCard {
  width: fit-content;
  height: 55px;
  background-color: #1c1f2f;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0px 12px;
  font-family: Arial, Helvetica, sans-serif;
}
.svgwrapper {
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svgwrapper svg {
  width: 100%;
}
.balancewrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  width: 120px;
  gap: 0px;
}
.balanceHeading {
  font-size: 8px;
  color: rgb(214, 214, 214);
  font-weight: 100;
  letter-spacing: 0.6px;
}
.balance {
  font-size: 13.5px;
  color: white;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.addmoney {
  padding: 1px 15px;
  border-radius: 20px;
  background-color: #c083eb;
  color: white;
  border: none;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.addmoney:hover {
  background-color: whitesmoke;
  color: #9c59cc;
}
.plussign {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
    

================================================
FILE: Cards/vinodjangid07_rude-pig-44.html
================================================
<div class="navigation-card">
  <a href="#" class="tab">
    <svg
      class="svgIcon"
      viewBox="0 0 104 100"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M100.5 40.75V96.5H66V68.5V65H62.5H43H39.5V68.5V96.5H3.5V40.75L52 4.375L100.5 40.75Z"
        stroke="black"
        stroke-width="7"
      ></path>
    </svg>
  </a>

  <a href="#" class="tab">
    <svg
      width="104"
      height="100"
      viewBox="0 0 104 100"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        x="21.5"
        y="3.5"
        width="60"
        height="60"
        rx="30"
        stroke="black"
        stroke-width="7"
      ></rect>
      <g clip-path="url(#clip0_41_27)">
        <mask
          id="mask0_41_27"
          style="mask-type:luminance"
          maskUnits="userSpaceOnUse"
          x="0"
          y="61"
          width="104"
          height="52"
        >
          <path
            d="M0 113C0 84.2812 23.4071 61 52.1259 61C80.706 61 104 84.4199 104 113H0Z"
            fill="white"
          ></path>
        </mask>
        <g mask="url(#mask0_41_27)">
          <path
            d="M-7 113C-7 80.4152 19.4152 54 52 54H52.2512C84.6973 54 111 80.3027 111 112.749H97C97 88.0347 76.9653 68 52.2512 68H52C27.1472 68 7 88.1472 7 113H-7ZM-7 113C-7 80.4152 19.4152 54 52 54V68C27.1472 68 7 88.1472 7 113H-7ZM52.2512 54C84.6973 54 111 80.3027 111 112.749V113H97V112.749C97 88.0347 76.9653 68 52.2512 68V54Z"
            fill="black"
          ></path>
        </g>
      </g>
      <defs>
        <clipPath id="clip0_41_27">
          <rect
            width="104"
            height="39"
            fill="white"
            transform="translate(0 61)"
          ></rect>
        </clipPath>
      </defs>
    </svg>
  </a>

  <a href="#" class="tab">
    <svg
      width="101"
      height="114"
      viewBox="0 0 101 114"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle
        cx="46.1726"
        cy="46.1727"
        r="29.5497"
        transform="rotate(36.0692 46.1726 46.1727)"
        stroke="black"
        stroke-width="7"
      ></circle>
      <line
        x1="61.7089"
        y1="67.7837"
        x2="97.7088"
        y2="111.784"
        stroke="black"
        stroke-width="7"
      ></line>
    </svg>
  </a>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: icon, profile, card, hover, search, navigation, home */
.navigation-card {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  background-color: rgb(255, 255, 255);
  padding: 15px 20px;
  border-radius: 50px;
}
.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  overflow: hidden;
  background-color: rgb(252, 252, 252);
  padding: 15px;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;
}
.tab:hover {
  background-color: rgb(223, 223, 223);
}

</style>
    

================================================
FILE: Cards/vinodjangid07_silent-emu-97.html
================================================
<div class="rating-card">
  <div class="text-wrapper">
    <p class="text-primary">Please Rate Your Experience</p>
    <p class="text-secondary">to help us serve you better</p>
  </div>

  <div class="rating-stars-container">
    <input value="star-5" name="star" id="star-5" type="radio" />
    <label for="star-5" class="star-label">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
          pathLength="360"
        ></path>
      </svg>
    </label>
    <input value="star-4" name="star" id="star-4" type="radio" />
    <label for="star-4" class="star-label">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
          pathLength="360"
        ></path>
      </svg>
    </label>
    <input value="star-3" name="star" id="star-3" type="radio" />
    <label for="star-3" class="star-label">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
          pathLength="360"
        ></path>
      </svg>
    </label>
    <input value="star-2" name="star" id="star-2" type="radio" />
    <label for="star-2" class="star-label">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
          pathLength="360"
        ></path>
      </svg>
    </label>
    <input value="star-1" name="star" id="star-1" type="radio" />
    <label for="star-1" class="star-label">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
          pathLength="360"
        ></path>
      </svg>
    </label>
  </div>
  <div class="socials-container">
    <a class="social-button" href="#">
      <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
        ></path>
      </svg>
    </a>
    <a class="social-button" href="#">
      <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
        ></path>
      </svg>
    </a>
    <a class="social-button" href="#">
      <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: gradient, card, social media, radio, rate, rating, feedback, icons */
.rating-card {
  width: 280px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #0f0c29;
  background: linear-gradient(to right bottom, #443e89, #0f0c29);
  padding: 20px 20px;
  border-radius: 10px;
  gap: 10px;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.058);
}
.text-wrapper {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.text-primary {
  color: white;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.text-secondary {
  color: #cccccc;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.5px;
}
.rating-stars-container {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
}
.star-label svg {
  fill: rgb(210, 210, 210);
  width: 20px;
  height: auto;
}
.rating-stars-container input {
  appearance: unset;
}
.rating-stars-container input:hover ~ .star-label svg {
  fill: rgb(255, 204, 185);
}
.rating-stars-container input:checked ~ .star-label svg {
  fill: rgb(255, 102, 47);
  animation: slide-in-fwd-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-fwd-center {
  0% {
    transform: scale(1.6);
  }
  100% {
    transform: scale(1);
  }
}

.socials-container {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgb(150, 150, 150);
}
.social-button {
  text-decoration: none;
}
.social-button svg {
  width: 15px;
  fill: rgb(228, 228, 228);
}
.social-button:hover svg {
  fill: rgb(255, 102, 47);
}

</style>
    

================================================
FILE: Cards/vinodjangid07_silent-wasp-13.html
================================================
<div class="cookies-card">
  <p class="cookie-heading">Cookie Policy</p>
  <p class="cookie-para">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi
  </p>
  <div class="button-wrapper">
    <button class="accept cookie-button">Accept</button>
    <button class="reject cookie-button">Reject</button>
  </div>
  <button class="exit-button">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 162 162"
      class="svgIconCross"
    >
      <path
        stroke-linecap="round"
        stroke-width="17"
        stroke="black"
        d="M9.01074 8.98926L153.021 153"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="17"
        stroke="black"
        d="M9.01074 153L153.021 8.98926"
      ></path>
    </svg>
  </button>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: simple, card, cookies, accept, cookie card, policy */
.cookies-card {
  width: 280px;
  height: fit-content;
  background-color: rgb(255, 250, 250);
  border-radius: 10px;
  border: 1px solid rgb(206, 206, 206);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  gap: 15px;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.066);
}

.cookie-heading {
  color: rgb(34, 34, 34);
  font-weight: 800;
}
.cookie-para {
  font-size: 11px;
  font-weight: 400;
  color: rgb(51, 51, 51);
}
.button-wrapper {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.cookie-button {
  width: 50%;
  padding: 8px 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.accept {
  background-color: rgb(34, 34, 34);
  color: white;
}
.reject {
  background-color: #ececec;
  color: rgb(34, 34, 34);
}
.accept:hover {
  background-color: rgb(0, 0, 0);
}
.reject:hover {
  background-color: #ddd;
}
.exit-button {
  position: absolute;
  top: 17px;
  right: 17px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.exit-button:hover {
  background-color: #ddd;
  color: white;
}
.svgIconCross {
  height: 10px;
}

</style>
    

================================================
FILE: Cards/vishnu1100_grumpy-swan-28.html
================================================
<div class="letter-image">
  <div class="animated-mail">
    <div class="back-fold"></div>
    <div class="letter">
      <div class="letter-border"></div>
      <div class="letter-title"></div>
      <div class="letter-context"></div>
      <div class="letter-stamp">
        <div class="letter-stamp-inner"></div>
      </div>
    </div>
    <div class="top-fold"></div>
    <div class="body"></div>
    <div class="left-fold"></div>
  </div>
  <div class="shadow"></div>
</div>

<style>
/* From Uiverse.io by vishnu1100  - Tags: glassmorphism, card, checkbox, input, toggle switch, css effect, buttons, multicolor */
.letter-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.animated-mail {
  position: absolute;
  height: 150px;
  width: 200px;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  transition: 0.4s;

  .body {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 100px 200px;
    border-color: transparent transparent #e95f55 transparent;
    z-index: 2;
  }

  .top-fold {
    position: absolute;
    top: 50px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 100px 0 100px;
    -webkit-transform-origin: 50% 0%;
    -webkit-transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
    -moz-transform-origin: 50% 0%;
    -moz-transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
    transform-origin: 50% 0%;
    transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
    border-color: #cf4a43 transparent transparent transparent;
    z-index: 2;
  }

  .back-fold {
    position: absolute;
    bottom: 0;
    width: 200px;
    height: 100px;
    background: #cf4a43;
    z-index: 0;
  }

  .left-fold {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 0 50px 100px;
    border-color: transparent transparent transparent #e15349;
    z-index: 2;
  }

  .letter {
    left: 20px;
    bottom: 0px;
    position: absolute;
    width: 160px;
    height: 60px;
    background: white;
    z-index: 1;
    overflow: hidden;
    -webkit-transition: 0.4s 0.2s;
    -moz-transition: 0.4s 0.2s;
    transition: 0.4s 0.2s;

    .letter-border {
      height: 10px;
      width: 100%;
      background: repeating-linear-gradient(
        -45deg,
        #cb5a5e,
        #cb5a5e 8px,
        transparent 8px,
        transparent 18px
      );
    }

    .letter-title {
      margin-top: 10px;
      margin-left: 5px;
      height: 10px;
      width: 40%;
      background: #cb5a5e;
    }
    .letter-context {
      margin-top: 10px;
      margin-left: 5px;
      height: 10px;
      width: 20%;
      background: #cb5a5e;
    }

    .letter-stamp {
      margin-top: 30px;
      margin-left: 120px;
      border-radius: 100%;
      height: 30px;
      width: 30px;
      background: #cb5a5e;
      opacity: 0.3;
    }
  }
}

.shadow {
  position: absolute;
  top: 200px;
  left: 50%;
  width: 400px;
  height: 30px;
  transition: 0.4s;
  transform: translateX(-50%);
  -webkit-transition: 0.4s;
  -webkit-transform: translateX(-50%);
  -moz-transition: 0.4s;
  -moz-transform: translateX(-50%);

  border-radius: 100%;
  background: radial-gradient(
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0)
  );
}

.letter-image:hover {
  .animated-mail {
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
  }

  .animated-mail .top-fold {
    transition: transform 0.4s, z-index 0.2s;
    transform: rotateX(180deg);
    -webkit-transition: transform 0.4s, z-index 0.2s;
    -webkit-transform: rotateX(180deg);
    -moz-transition: transform 0.4s, z-index 0.2s;
    -moz-transform: rotateX(180deg);
    z-index: 0;
  }

  .animated-mail .letter {
    height: 180px;
  }

  .shadow {
    width: 250px;
  }
}

</style>
    

================================================
FILE: Cards/vk-uiux_nasty-chicken-72.html
================================================
<div class="card">
  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="38px" width="38px" version="1.1" id="heart" viewBox="0 0 471.701 471.701" xml:space="preserve">
      <linearGradient id="gradientColor">
        <stop offset="5%" stop-color="#7eaaff"></stop>
        <stop offset="95%" stop-color="#ff48fb"></stop>
      </linearGradient>
      <g>
        <path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1   c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3   l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4   C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3   s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4   c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3   C444.801,187.101,434.001,213.101,414.401,232.701z"></path>
      </g>
    </svg>
  </div>
  <p class="title">Favourites</p>
  <p class="text">Check all your favourites in one place.</p>
</div>
<style>
/* From Uiverse.io by vk-uiux - Tags: animation, gradient, card, hover, css, hover effect, css effect, hoverme */
.card {
  width: 100%;
  max-width: 300px;
  min-width: 200px;
  height: 250px;
  background-color: #292929;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);
  border: 2px solid rgba(7, 7, 7, 0.12);
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}

.icon {
  margin: 0 auto;
  width: 100%;
  height: 80px;
  max-width: 80px;
  background: linear-gradient(90deg, #7eaaff 0%, #ff48fb 40%, rgba(0, 0, 0, 0.28) 60%);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.8s ease;
  background-position: 0px;
  background-size: 200px;
}

.icon svg {
  fill: white;
}

.card .title {
  width: 100%;
  margin: 0;
  text-align: center;
  margin-top: 30px;
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.card .text {
  width: 80%;
  margin: 0 auto;
  font-size: 13px;
  text-align: center;
  margin-top: 20px;
  color: white;
  font-weight: 200;
  letter-spacing: 2px;
  opacity: 0;
  max-height: 0;
  transition: all 0.3s ease;
}

.card:hover {
  height: 270px;
}

.card:hover .text {
  transition: all 0.3s ease;
  opacity: 1;
  max-height: 40px;
}

.card:hover .icon {
  background-position: -120px;
  transition: all 0.3s ease;
}

.card:hover .icon svg path {
  fill: url('#gradientColor');
  transition: all 0.3s ease;
}
</style>


================================================
FILE: Cards/vk-uiux_rotten-mouse-64.html
================================================
<div class="one-div"></div>
<style>
/* From Uiverse.io by vk-uiux - Tags: card, unique, challenge, css, design, one-div, coffee mug */
.one-div {
  top: -30px;
  left: 0;
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #3f2616;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 10px #442918, 0 0 0 25px #3c2415, 0 0 0 44px #fe9407, 0 0 0 65px #ffae43, 0 115px 0 -20px #442918, 95px 70px 0 -25px #442918, 60px 115px 0 -10px #442918, 10px 170px 0 -35px #442918, 30px 200px 0 -42px #442918;
}

.one-div::before {
  content: "";
  position: absolute;
  width: 45px;
  height: 60px;
  background-color: #f79c25;
  top: -80px;
  right: -70px;
  transform: rotate(45deg);
}
</style>


================================================
FILE: Cards/vladaxinte_black-mouse-53.html
================================================
<div class="container">
  <div class="twitter">
    <div class="wing-bottom"></div>
    <div class="wing-top"></div>
    <div class="wing-middle"></div>
    <div class="beak beak-bottom"></div>
    <div class="beak beak-top"></div>
    <div class="torso"></div>
    <div class="tummy"></div>
    <div class="tail"></div>
    <div class="head"></div>
  </div>
</div>

<style>
/* From Uiverse.io by vladaxinte  - Tags: twitter, gradient, social media, logo, bird, css art */
.container {
  width: 300px;
  height: 340px;
}

.twitter {
  transform: translate(-15%, 20%);
}

.wing-bottom {
  background: radial-gradient(circle at -100% 90%, transparent 75%, #fff 10%);
  width: 120px;
  height: 120px;
  position: absolute;
  border-radius: 100%;
  left: 92px;
  top: 94px;
  transform: rotate(86deg);
  z-index: 90;
}

.wing-top {
  background: radial-gradient(circle at -100% 90%, transparent 70%, #fff 10%);
  width: 125px;
  height: 160px;
  position: absolute;
  z-index: 20;
  border-radius: 100%;
  left: 88px;
  top: 8px;
  transform: rotate(132deg);
}

.wing-middle {
  background: radial-gradient(circle at 50% -80%, transparent 80%, #fff 10%);
  width: 130px;
  height: 130px;
  position: absolute;
  z-index: 20;
  border-radius: 100%;
  left: 73px;
  top: 44px;
  transform: rotate(7deg);
}

.beak {
  background: radial-gradient(circle at 10% -30%, transparent 76%, #fff 30%);
  width: 112px;
  height: 112px;
  position: absolute;
  z-index: 20;
  border-radius: 100%;
}

.beak-bottom {
  left: 240px;
  top: -36px;
  width: 112px;
  height: 140px;
  transform: rotate(20deg);
}

.beak-top {
  left: 225px;
  top: -33px;
  transform: rotate(15deg);
}

.tummy {
  background: radial-gradient(circle at 0% -38%, transparent 80%, #fff 30%);
  width: 320px;
  height: 320px;
  position: absolute;
  z-index: 20;
  border-radius: 100%;
  left: -3px;
  top: -55px;
  z-index: -1;
}

.torso {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  position: absolute;
  left: 117px;
  top: 8px;
  transform: rotate(10deg);
  background: radial-gradient(circle at 0% -40%, transparent 60%, #fff 30%);
}

.tail {
  width: 228px;
  height: 150px;
  border-radius: 100%;
  position: absolute;
  left: 28px;
  top: 116px;
  background: radial-gradient(circle at 10% -42%, transparent 66%, #fff 30%);
  transform: rotate(5deg);
}

.head {
  background: #fff;
  width: 116px;
  height: 116px;
  border-radius: 100%;
  position: absolute;
  left: 200px;
  top: 34px;
}

</style>
    

================================================
FILE: Cards/willeumsk_selfish-hound-16.html
================================================
<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by willeumsk  - Tags: card, social media, gradients, html, multicolor, card animation, 3d card, williamsk */
.card {
  position: relative;
  width: 300px;
  padding: 20px;
  background: #010217;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: rotateY(10deg) rotateX(10deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
  transform: translateY(20px) scale(0.95);
}

.card:hover::before {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.image {
  width: 100%;
  max-width: 180px;
  display: block;
  margin: auto;
  border-radius: 10px;
  transition: transform 0.3s;
}

.card:hover .image {
  transform: scale(0.95);
  animation: pulse 4s infinite;
}

.heading {
  margin: 15px 0;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(90deg, #446c84, #aa628c, #5e0f9e);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.icons a {
  color: #33cbea;
  transition: color 0.3s;
}

.icons a:hover {
  color: #c163e1;
  box-shadow: 0 20px 40px rgba(195, 46, 245, 0.75);
  padding: 0 2px 0 2px;
  border-radius: 10px;
  opacity: 0.8;
  transition: opacity 0.3s, box-shadow 0.3s;
  width: 24px;
  height: 24px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

</style>
    

================================================
FILE: Cards/wizard503_quiet-wombat-54.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by wizard503 - Tags: card */
.card {
  overflow: hidden;
  background: #333;
  padding: 30px;
  color: white;
  box-shadow: 0px 60px 60px -60px rgba(0,30,255,0.5),-2px -2px 10px 4px rgba(0, 0, 0, 0.5);
}

.card:hover {
  transform: perspective(250px) rotateX(10deg);
}

.card::before {
  content: '';
  z-index: -1;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to bottom, transparent 10%,rgba(0,0,0,0.5) 50%,rgba(0,0,0) 90%);
  transition: all .3 ease;
  opacity: 0;
}

.card:hover::before {
  opacity: 1;
}

.card::after {
  content: "";
  position: absolute;
  left: -2em;
  width: 5em;
  height: 175%;
  top: -15em;
  rotate: 45deg;
  opacity: 0;
  z-index: 1;
  transform: perspective(250px);
  transition: transform .7s ease-in-out;
  background: linear-gradient(to right, transparent 1%, rgba(255, 255, 255, 0.1) 40%,rgba(255, 255, 255, 0.1) 60% , transparent 100%);
}

.card:hover::after {
  overflow: auto;
  opacity: 1;
  transform: translateX(35em);
}

.card button {
  --border-width: 4px;
  appearance: none;
  position: relative;
  margin-top: 10%;
  padding: 1em 2em;
  border: 1px;
  width: 96%;
  background-color: #212121;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  z-index: 2;
}

button::after {
  --m-i: linear-gradient(#000, #000);
  --m-o: content-box, padding-box;
  content: "";
  position: absolute;
  left: -0.2em;
  top: -0.2em;
  width: 99%;
  height: 95%;
  padding: var(--border-width);
  background-image: conic-gradient(
		#488cfb,
		#29dbbc,
		#ddf505,
		#ff9f0e,
		#e440bb,
		#655adc,
		#488cfb
	);
  mask-image: var(--m-i), var(--m-i);
  -webkit-mask-clip: var(--m-o);
  mask-composite: exclude;
  border-radius: 100px;
}

button:hover::after {
  opacity: 0;
}

.card button:hover {
  color: #fff;
  font-weight: 900;
  font-size: 1em;
  text-transform: uppercase;
  transform: perspective(50px) rotateX(-10deg);
  background-image: linear-gradient(to left bottom,
    #488dfbe1,
    #29dbbddc,
		#ddf505e1,
		#ff9f0edc,
		#e440bbd0,
		#488dfbd0);
}

.heading,.content .item {
  padding: 6px;
}

.heading {
  --text-stroke-color: rgb(255, 0, 98);
  text-decoration: none;
  -webkit-text-stroke: 1px var(--text-stroke-color);
}

.item--create:hover {
  color: #ffee00;
  font-weight: 800;
}

.item--post:hover {
  color: #00eeff;
  font-weight: 800;
}

.item--inspire:hover {
  color: #ff00b3;
  font-weight: 800;
}
</style>


================================================
FILE: Cards/wojtek221221_dry-parrot-61.html
================================================
<div class="cookie-card">
  <span class="cookie-title">🍪 COOKIES</span>
  <p class="cookie-description">We ensure to provide you with the 
    best experiences while using our website. 
    <a class="cookies-policy" href="#">Please review our cookies policy</a>.</p>
    <button class="accept-button">Accept</button>
</div>
<style>
/* From Uiverse.io by wojtek221221 - Source: wojtek221 - Tags: stats, cookies, cookie card, simple cards, Alerts, card design */
.cookie-card {
  border-radius: 15px;
  width: 320px;
  height: 200px;
  background-color: #fff;
}

.cookie-title {
  font-size: 20px;
  position: relative;
  left: 90px;
  top: 15px;
  font-weight: bold;
  color: rgb(31 41 55);
}

.cookie-description {
  position: relative;
  top: 25px;
  font-size: 15px;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: rgb(75 85 99);
}

.cookies-policy {
  color: rgb(31 41 55);
  text-decoration: underline;
}

.cookies-policy:hover {
  text-decoration: none;
}

.cookies-policy:active {
  color: rgba(31, 41, 55, 0.61);
  ;
}

.accept-button {
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
  width: 85px;
  height: 35px;
  background-color: rgba(255, 255, 255, 0);
  position: relative;
  left: 115px;
  top: 45px;
}

.accept-button:hover {
  background-color: rgb(31 41 55);
  color: #fff;
  border: rgb(31 41 55);
  ;
}

.accept-button:active {
  font-weight: 100;
}

</style>


================================================
FILE: Cards/wztd_tall-rattlesnake-53.html
================================================
<div class="card" style="--rating:90">
  <div class="icon">🫠</div>
  <div class="title">Easy Cheesy</div>
  <p class="description">This cheesy, juicy ultimate comforting lunch or quick and easy dinner recipe.</p>
  <div class="rating"></div>
  <a href="#" class="link">See the recipe</a>
</div>
<style>
/* From Uiverse.io by wztd - Tags: card */
.card {
  --background: #fff;
  --cardShadow: rgba(32,33,37,.1);
  --cardShadowHover: rgba(32,33,37,.06);
  --cardShadowActive: rgba(32,33,37,.55);
  --cardBorder: #dbdce0;
  --cardBorderActive: #1a73e8;
  --textColor: #202125;
  --linkColor: #1967d2;
  --ratingColor: #faab00;
}

@media (prefers-color-scheme: dark) {
  .card {
    --background: #3c4043;
    --cardShadow: rgba(0,0,0,.28);
    --cardShadowHover: rgba(0,0,0,.16);
    --cardShadowActive: rgba(0,0,0,.55);
    --cardBorder: #202125;
    --cardBorderActive: #8ab4f8;
    --textColor: #e9eaee;
    --linkColor: #8ab4f8;
  }
}

.card {
  width: 250px;
  height: 350px;
  aspect-ratio: 2/3;
  background: var(--background);
  color: var(--textColor);
  border: 1px solid var(--cardBorder);
  padding: 25px;
  box-shadow: 8px 8px 0 var(--cardShadow);
  transition: box-shadow .5s, transform .5s;
  border-radius: 8px;
  display: inline-block;
}

.card:hover {
  transform: translate(-2px, -4px);
  box-shadow: 16px 16px 0 var(--cardShadowHover);
}

.card:active {
  transform: translate(-2px, -4px);
  border: 2px solid var(--cardBorderActive);
  box-shadow: 4px 4px 0 var(--cardShadowActive);
}

.card > .icon,
.card > .title,
.card > .description {
  margin-bottom: 0.7em;
  cursor: default;
  user-select: none;
}

.card > .title {
  margin-top: 1.5em;
  font-weight: bold;
}

.card > .description {
  line-height: 1.5em;
  min-height: 6em;
}

.card > .icon {
  font-size: 3em;
  margin-bottom: .2em;
}

.card > .rating {
  font-size: 1.5em;
  margin-bottom: 0.8em;
  color: var(--ratingColor);
  font-weight: bold;
  position: relative;
  width: max-content;
}

.card > .rating:before {
  content: "☆☆☆☆☆";
}

.card > .rating:after {
  content: "★★★★★";
  position: absolute;
  left: 0;
  z-index: 0;
  width: calc(var(--rating) * 1%);
  overflow: hidden;
}

.card > .link {
  margin-bottom: 1rem;
  color: var(--linkColor);
  font-size: .8em;
  font-weight: 600;
}

/* Optional ~ Link the whole card */
.card > .link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card > .link:after {
  content: "↗";
  display: inline-block;
  margin-left: .3em;
  transition: transform .3s ease-in-out;
}

.card:hover > .link:after {
  transform: translate(.2em, -.2em);
}

</style>


================================================
FILE: Cards/xantha01_odd-eagle-16.html
================================================
<div class="container">

      <div class="card">
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7 14C7.33333 14.6667 8.6 16 11 16C13.4 16 14.6667 14.6667 15 14M7.31238 8.31247H7.68738M7.31238 8.68747H7.68738M14.3124 8.31247H14.6874M14.3124 8.68747H14.6874M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11ZM8 8.5C8 8.77614 7.77614 9 7.5 9C7.22386 9 7 8.77614 7 8.5C7 8.22386 7.22386 8 7.5 8C7.77614 8 8 8.22386 8 8.5ZM15 8.5C15 8.77614 14.7761 9 14.5 9C14.2239 9 14 8.77614 14 8.5C14 8.22386 14.2239 8 14.5 8C14.7761 8 15 8.22386 15 8.5Z" stroke="black" stroke-width="2" stroke-linecap="round"></path>
        </svg>          
        <br>Picture 1</div>

      <div class="card">
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 14H14M7.31238 8.31247H7.68738M7.31238 8.68747H7.68738M14.3124 8.31247H14.6874M14.3124 8.68747H14.6874M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11ZM8 8.5C8 8.77614 7.77614 9 7.5 9C7.22386 9 7 8.77614 7 8.5C7 8.22386 7.22386 8 7.5 8C7.77614 8 8 8.22386 8 8.5ZM15 8.5C15 8.77614 14.7761 9 14.5 9C14.2239 9 14 8.77614 14 8.5C14 8.22386 14.2239 8 14.5 8C14.7761 8 15 8.22386 15 8.5Z" stroke="black" stroke-width="2" stroke-linecap="round"></path>
        </svg>
        <br>Picture 2</div>

      <div class="card">
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.31238 8.31247H7.68738M7.31238 8.68747H7.68738M14.3124 8.31247H14.6874M14.3124 8.68747H14.6874M15 15C14.6667 14.3333 13.4 13 11 13C8.6 13 7.33333 14.3333 7 15M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11ZM8 8.5C8 8.77614 7.77614 9 7.5 9C7.22386 9 7 8.77614 7 8.5C7 8.22386 7.22386 8 7.5 8C7.77614 8 8 8.22386 8 8.5ZM15 8.5C15 8.77614 14.7761 9 14.5 9C14.2239 9 14 8.77614 14 8.5C14 8.22386 14.2239 8 14.5 8C14.7761 8 15 8.22386 15 8.5Z" stroke="black" stroke-width="2" stroke-linecap="round"></path>
        </svg>
        <br>Picture 3</div>

      <div class="card">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C7.69494 1 5.59227 1.86656 4 3.29168M3 1V4C3 4.55228 3.44772 5 4 5H7M13 8L9.35355 11.6464C9.15829 11.8417 8.84171 11.8417 8.64645 11.6464L7 10" stroke="black" stroke-width="2" stroke-linecap="round"></path>
        </svg>
        <br>Picture 4</div>
    </div>
<style>
/* From Uiverse.io by xantha01 - Tags: card, animated, card hover */
.container {
  position: relative;
  width: 225px;
  height: 325px;
  cursor: pointer;
}

.card {
  position: absolute;
  inset: 2.5px;
  border-radius: 10px;
  transform-origin: bottom left;
  transition: 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f1f4f7;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}

.container:hover .card:nth-child(1) {
  animation: cardAnimation1 4s 0.5s infinite ease;
}

.container:hover .card:nth-child(2) {
  animation: cardAnimation2 4s 1s infinite ease;
}

.container:hover .card:nth-child(3) {
  animation: cardAnimation3 4s 1.5s infinite ease;
}

.container:hover .card:nth-child(4) {
  animation: cardAnimation4 4s 2s infinite ease;
}

.card:nth-child(1) {
  background: linear-gradient(0deg, #4776e6 0%, #8e54e9 100%);
}

.card:nth-child(2) {
  background: linear-gradient(0deg, #b3ffab 0%, #12fff7 100%);
  opacity: 0;
}

.card:nth-child(3) {
  background: linear-gradient(178deg, #ffb99a 0%, #ffdbc5 100%);
  opacity: 0;
}

.card:nth-child(4) {
  background: linear-gradient(178deg, #606c88 0%, #3f4c6b 100%);
  opacity: 0;
}

@keyframes cardAnimation1 {
  0% {
    transform: rotateZ(0deg);
    opacity: 0;
    z-index: -1;
  }

  25% {
    transform: rotateZ(-20deg);
    opacity: 1;
    z-index: 0;
  }

  50% {
    transform: rotateZ(0deg);
    z-index: 1;
    opacity: 1;
  }

  75% {
    transform: rotateZ(20deg);
    z-index: 0;
    opacity: 1;
  }

  100% {
    transform: rotateZ(0deg);
    z-index: -1;
    opacity: 0;
  }
}

@keyframes cardAnimation2 {
  0% {
    transform: rotateZ(0deg);
    z-index: -1;
    opacity: 0;
  }

  45% {
    transform: rotateZ(-15deg);
    z-index: 0;
    opacity: 1;
  }

  60% {
    transform: rotateZ(0deg);
    z-index: 1;
    opacity: 1;
  }

  75% {
    transform: rotateZ(15deg);
    z-index: 0;
    opacity: 1;
  }

  100% {
    transform: rotateZ(0deg);
    z-index: -1;
    opacity: 0;
  }
}

@keyframes cardAnimation3 {
  0% {
    transform: rotateZ(0deg);
    z-index: -1;
    opacity: 0;
  }

  45% {
    transform: rotateZ(-20deg);
    z-index: 0;
    opacity: 0;
  }

  60% {
    transform: rotateZ(0deg);
    z-index: 1;
    opacity: 1;
  }

  75% {
    transform: rotateZ(20deg);
    z-index: 0;
    opacity: 1;
  }

  100% {
    transform: rotateZ(0deg);
    z-index: -1;
    opacity: 0;
  }
}

@keyframes cardAnimation4 {
  0% {
    transform: rotateZ(0deg);
    z-index: 0;
    opacity: 0;
  }

  35% {
    transform: rotateZ(-25deg);
    z-index: 0;
    opacity: 0.0;
  }

  75% {
    transform: rotateZ(0deg);
    z-index: 1;
    opacity: 1;
  }

  90% {
    transform: rotateZ(25deg);
    z-index: 0;
    opacity: 1;
  }

  100% {
    transform: rotateZ(0deg);
    z-index: 0;
    opacity: 0;
  }
}


</style>


================================================
FILE: Cards/xantha01_wise-crab-55.html
================================================
<div class="card">
  <div class="details">
    <div class="cardHeader">CSS Hover Animation</div>
    <div class="cardText">
      Welcome to this card where i have made use of the "Hover" effect to add
      some really cool interactions to it. Enjoy
    </div>
    <div class="button">Learn More</div>
  </div>
</div>

<style>
/* From Uiverse.io by xantha01  - Website: https://youtu.be/5DEq5cWNYt8 - Name: Kevin powell - Tags: card, hover, card hover, pattern */
.card {
  background: rgba(172, 7, 226, 0.5);
  position: relative;
  max-width: 250px;
  height: 350px;
  border-radius: 5px;
  padding: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7.5px;
  transition: 0.5s ease;
  color: white;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
        35.36% 35.36% at 100% 25%,
        #0000 66%,
        #c79013 68% 70%,
        #0000 72%
      )
      32px 32px / calc(2 * 32px) calc(2 * 32px),
    radial-gradient(
        35.36% 35.36% at 0 75%,
        #0000 66%,
        #c79013 68% 70%,
        #0000 72%
      )
      32px 32px / calc(2 * 32px) calc(2 * 32px),
    radial-gradient(
        35.36% 35.36% at 100% 25%,
        #0000 66%,
        #c79013 68% 70%,
        #0000 72%
      )
      0 0 / calc(2 * 32px) calc(2 * 32px),
    radial-gradient(
        35.36% 35.36% at 0 75%,
        #0000 66%,
        #c79013 68% 70%,
        #0000 72%
      )
      0 0 / calc(2 * 32px) calc(2 * 32px),
    repeating-conic-gradient(#295b3f 0 25%, #0000 0 50%) 0 0 / calc(2 * 32px)
      calc(2 * 32px),
    radial-gradient(#0000 66%, #c79013 68% 70%, #0000 72%) 0 calc(32px / 2) /
      32px 32px #295b3f;
  opacity: 0.5;
  transition: 0.3s ease;
}

.card:hover::after {
  opacity: 0.25;
}

.cardHeader {
  text-transform: uppercase;
  position: relative;
  width: max-content;
  font-weight: bold;
  transition: all 0.5s ease;
}
.cardHeader::after {
  content: "";
  width: calc(100% + 1rem);
  height: 2.5px;
  transform: translateX(calc(-100% - 1rem));
  background: aqua;
  bottom: -2px;
  left: 0;
  position: absolute;
  opacity: 0;
}

.details {
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transform: translateY(95%);
  transition: all 0.5s ease;
}

.button {
  background-color: aqua;
  color: black;
  padding: 2.5px 5px;
  width: max-content;
  border-radius: 2.5px;
}
.card:hover .details {
  transform: translateY(0%);
  transition-delay: 0.5s;
}
.card:hover .cardHeader::after {
  transform: translateX(-1rem);
  transition: 0.5s ease;
  opacity: 1;
}
.card:hover {
  transform: scale(1.1);
  border-radius: 15px;
}

</style>
    

================================================
FILE: Cards/xopc333_soft-shrimp-30.html
================================================
<div class="card">
  <svg height="100%" width="100%" class="border" xmlns="http://www.w3.org/2000/svg">
    <line y2="0" x2="600" y1="0" x1="0" class="top"></line>
    <line y2="-960" x2="0" y1="320" x1="0" class="left"></line>
    <line y2="320" x2="-600" y1="320" x1="200" class="bottom"></line>
    <line y2="960" x2="200" y1="0" x1="200" class="right"></line>
  </svg>
  <div class="logo">
    <svg class="logo-svg" viewBox="0 0 29.667 31.69" xmlns="http://www.w3.org/2000/svg">
      <path transform="translate(0 0)" d="M12.827,1.628A1.561,1.561,0,0,1,14.31,0h2.964a1.561,1.561,0,0,1,1.483,1.628v11.9a9.252,9.252,0,0,1-2.432,6.852q-2.432,2.409-6.963,2.409T2.4,20.452Q0,18.094,0,13.669V1.628A1.561,1.561,0,0,1,1.483,0h2.98A1.561,1.561,0,0,1,5.947,1.628V13.191a5.635,5.635,0,0,0,.85,3.451,3.153,3.153,0,0,0,2.632,1.094,3.032,3.032,0,0,0,2.582-1.076,5.836,5.836,0,0,0,.816-3.486Z"></path>
      <path transform="translate(-45.91 0)" d="M75.207,20.857a1.561,1.561,0,0,1-1.483,1.628h-2.98a1.561,1.561,0,0,1-1.483-1.628V1.628A1.561,1.561,0,0,1,70.743,0h2.98a1.561,1.561,0,0,1,1.483,1.628Z"></path>
      <path transform="translate(0 -51.963)" d="M0,80.018A1.561,1.561,0,0,1,1.483,78.39h26.7a1.561,1.561,0,0,1,1.483,1.628v2.006a1.561,1.561,0,0,1-1.483,1.628H1.483A1.561,1.561,0,0,1,0,82.025Z"></path>
    </svg>
  </div>  
</div>
<style>
/* From Uiverse.io by xopc333 - Tags: animation, minimalist, card, creative, border, hover effect, css effect, card template */
.card {
  position: relative;
  display: flex;
  width: 200px;
  height: 320px;
  background: #C6C6D0;
  color: #212121;
  box-shadow: inset 0 0 0 4px #212121;
  transition: .6s 0.4s;
  cursor: pointer;
}

.border {
  position: absolute;
  inset: 0;
}

.border line {
  stroke-width: 4px;
  stroke: #C6C6D0;
  fill: none;
  transition: .6s ease-in-out;
}

.border line.top,
.border line.bottom {
  stroke-dasharray: 200;
}

.border line.left,
.border line.right {
  stroke-dasharray: 320;
}

.logo {
  width: 50%;
  margin: auto;
  fill: #212121;
  transition: .6s;
  opacity: 0.9;
}

.card:hover {
  background-color: transparent;
  transition-delay: 0s;
}

.card:hover .border line {
  transition-delay: 0.1s;
}

.card:hover .border line.top {
  transform: translateX(-400px);
}

.card:hover .border line.bottom {
  transform: translateX(400px);
}

.card:hover .border line.left {
  transform: translateY(640px);
}

.card:hover .border line.right {
  transform: translateY(-640px);
}

.card:hover .logo {
  transition-delay: 0s;
  transform: scale(1.1);
  fill: #C6C6D0;
  filter: drop-shadow( 0 0 30px #C6C6D080);
  opacity: 0.9;
}
</style>


================================================
FILE: Cards/yariklnv_dangerous-donkey-85.html
================================================
    <div class="border"><div class="content"></div></div>
<style>
/* From Uiverse.io by yariklnv - Tags: card, box, div */
@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }

  to {
    transform: rotateZ(360deg);
  }
}

.border {
  background-image: linear-gradient(to left, red, blue);
  width: 100px;
  height: 100px;
  border-radius: 20px;
}

.border::before {
  background-image: linear-gradient(to left, red, blue);
  content: "";
  position: absolute;
  z-index: -1;
  height: 100px;
  width: 100px;
  scale: 1.1;
  filter: blur(25px);
  animation: rotate 4s linear infinite;
  border-radius: 100px;
}

.content {
  background-color: #111;
  width: 100px;
  height: 100px;
  border-radius: 19px;
  scale: 0.9;
}
</style>


================================================
FILE: Cards/yaroslavas2001_serious-lion-49.html
================================================
<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by yaroslavas2001 - Tags: card */
.card {
  padding: 20px 10px;
  border-radius: 10%;
  height: 280px;
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

.card::before,
.card::after {
  content: '';
  position: absolute;
  z-index: -1;
  filter: blur(29px);
  border-radius: 50%;
}

.card::before {
  border: 30px dashed #2061c2;
  width: 200px;
  height: 250px;
  bottom: 90px;
  animation: 11s linear 0s normal none infinite running borderBefore;
}

.card::after {
  border: 30px dashed #9238BD;
  width: 250px;
  height: 200px;
  animation: 9s linear 0s normal none infinite running borderAfter;
}

.heading {
  font-weight: bold;
  text-align: center;
  color: #F2F2F2;
}

.heading span {
  letter-spacing: 4px;
  line-height: 25px;
}

.content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  position: relative;
}

.content::before {
  content: '';
  font-size: 15px;
  position: absolute;
  filter: blur(19px);
  border-radius: 50%;
  border: 15px dashed #6f21a3;
  width: 100px;
  height: 150px;
  top: 0px;
  left: 50px;
  z-index: -1;
  animation: 11s linear 0s normal none infinite running borderAfter;
}

@keyframes borderBefore {
  0% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes borderAfter {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.item {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.item svg {
  margin-right: 10px;
}

.item {
  position: relative;
  transition: opacity .5s ease-out;
}

.item:hover {
  font-weight: bold;
}

.item::before,
.item::after {
  opacity: 0;
  width: 5px;
  height: 5px;
  border-radius: 20px;
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 10px 10px 17px 20px  rgba(255, 255, 255, 0.3);
  transition: opacity .5s ease-out;
  animation: 8s linear 0s normal none infinite running item;
}

@keyframes item {
  0% {
    transform: translateX(0px) translateY(0px);
  }

  25% {
    transform: translateX(5px) translateY(-10px);
  }

  50% {
    transform: translateX(10px) translateY(10px);
  }

  75% {
    transform: translateX(5px) translateY(-10px);
  }

  100% {
    transform: translateX(0px) translateY(0px);
  }
}

.item::before {
  left: 0px;
  top: 10px;
}

.item::after {
  right: 30px;
  top: 10px;
}

.item--create::before {
  content: '💻';
}

.item--create:hover::before {
  opacity: 1;
}

.item--create:after {
  content: '📈';
}

.item--create:hover:after {
  opacity: 1;
}

.item--post::before {
  content: '🌌';
}

.item--post:hover::before {
  opacity: 1;
}

.item--post:after {
  content: '🎆';
}

.item--post:hover:after {
  opacity: 1;
}

.item--inspire::before {
  content: '✨';
}

.item--inspire:hover::before {
  opacity: 1;
}

.item--inspire:after {
  content: '🌊';
}

.item--inspire:hover:after {
  opacity: 1;
}

button {
  background: transparent;
  border: 0px;
  border-radius: 20px;
  padding: 10px 30px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  animation: 0.9s linear 0s normal none infinite running button;
  transition: all .5s ease-out;
}

button:hover {
  letter-spacing: 1px;
}

@keyframes button {
  0% {
    border: 2px dotted rgba(73, 53, 247, 0.9);
  }

  100% {
    border: 2px dashed rgba(120, 12, 243,0.9);
  }
}


</style>


================================================
FILE: Cards/zakareaaljundi_great-snail-48.html
================================================
<div class="card">
  <div class="upper-part">
    <div class="upper-part-face">Hover Me</div>
    <div class="upper-part-back">Some Additional Information At The Back Side</div>
  </div>
  <div class="lower-part">
    <div class="lower-part-face">Face Side</div>
    <div class="lower-part-back">Back Side</div>
  </div>
</div>
<style>
/* From Uiverse.io by zakareaaljundi - Tags: card, flip */
.card {
  width: 190px;
  height: 254px;
  position: relative;
  border-radius: 40px;
  transition: all 0.8s;
  perspective: 600px;
  perspective-origin: center bottom;
}

.upper-part {
  width: 100%;
  height: 65%;
  border-radius: 40px 40px 0 0;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.9s;
}

.upper-part-face,
.upper-part-back {
  text-align: center;
  background-color: lightgray;
  color: purple;
  border: 3px solid purple;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 15px;
  border-radius: 40px 40px 0 0;
  font-weight: bold;
  z-index: 2;
  backface-visibility: hidden;
  transition: all 0.6s;
}

.upper-part-back {
  background-color: purple;
  color: lightgray;
  transform: rotatex(180deg);
}

.lower-part {
  width: 100%;
  height: 35%;
  border-radius: 0 0 40px 40px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center top;
  transition: all 0.9s;
}

.lower-part-face,
.lower-part-back {
  background-color: purple;
  width: 100%;
  height: 100%;
  color: lightgray;
  font-weight: bold;
  position: absolute;
  border-radius: 0 0 40px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(0, -0.8px);
  backface-visibility: hidden;
  z-index: 2;
}

.lower-part-back {
  backface-visibility: visible;
  border-radius: 40px;
  color: purple;
  background-color: lightgray;
  transform: rotateX(180deg);
  z-index: 1;
  transition: border-radius 0.6s;
}

.card:hover > .upper-part {
  transform: rotatex(-0.5turn);
}

.card:hover > .lower-part {
  transform: translateY(88.3px) rotateX(0.5turn);
}

.card:hover > .lower-part > .lower-part-back {
  border: 3px solid purple;
  border-radius: 0 0 40px 40px;
}
</style>


================================================
FILE: Cards/zanina-yassine_dangerous-pug-69.html
================================================
<div class="card">
  <span class="card_title">Loading users</span>
  <div class="loader"></div>
  <div class="card_content">
    <button class="load-more" name="load-more" type="button">Load more</button>
  </div>
</div>

<style>
/* From Uiverse.io by zanina-yassine  - Tags: blue, minimalist, loading, card, loader, gradients, multicolor, loading animation */
.card {
  width: 400px;
  max-width: 450px;
  height: fit-content;

  display: grid;
  grid-template-rows: auto 4px auto;

  padding-bottom: 20px;

  border-radius: 11px;

  background: #ffffff;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01),
    0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09),
    0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card_title {
  display: block;

  padding: 12px 15px;

  color: rgb(70, 70, 76);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}

.loader {
  height: 3px;
  width: 100%;

  position: relative;

  background-color: #e2e4e8;
  animation: retract 5s cubic-bezier(0.15, 0.83, 0.66, 1) 2s forwards infinite;
}

.card:has(.load-more:hover) .loader {
  height: 2px;
}

.loader::before {
  content: "";

  height: 100%;

  position: absolute;

  left: 0;

  background: linear-gradient(#4480ff 0%, #115dfc 50%, #0550ed 100%);
  animation: slide 5s cubic-bezier(0.15, 0.83, 0.66, 1) 2s forwards infinite;
}

.card_content {
  width: 100%;
  height: 150px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.load-more {
  width: fit-content;
  height: 36px;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;

  padding: 0 15px;

  border-radius: 5px;
  border: 0;

  background: linear-gradient(180deg, #4480ff 0%, #115dfc 50%, #0550ed 100%);
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;

  box-shadow: 0px 0.5px 0.5px #efefef, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
  cursor: pointer;
}

.load-more:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px 0#054eed6b;
}

@keyframes slide {
  0% {
    width: 0%;
  }
  30% {
    width: 20%;
  }
  50% {
    width: 30%;
  }
  70% {
    width: 80%;
  }
  90% {
    width: 100%;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes retract {
  0% {
    height: 3px;
  }
  95% {
    height: 3px;
  }
  100% {
    height: 1px;
  }
}

</style>
    

================================================
FILE: Cards/zanina-yassine_fast-bobcat-88.html
================================================
<div class="container">
  <div class="login-form">
    <div class="header">
    <label class="title">Create an Account</label>
    <p class="description">Create your account in no time and enjoy our best online courses for free.</p>
    </div>
    <div class="input_container">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path d="M7 8.5L9.94202 10.2394C11.6572 11.2535 12.3428 11.2535 14.058 10.2394L17 8.5" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      <path d="M2.01577 13.4756C2.08114 16.5412 2.11383 18.0739 3.24496 19.2094C4.37608 20.3448 5.95033 20.3843 9.09883 20.4634C11.0393 20.5122 12.9607 20.5122 14.9012 20.4634C18.0497 20.3843 19.6239 20.3448 20.7551 19.2094C21.8862 18.0739 21.9189 16.5412 21.9842 13.4756C22.0053 12.4899 22.0053 11.5101 21.9842 10.5244C21.9189 7.45886 21.8862 5.92609 20.7551 4.79066C19.6239 3.65523 18.0497 3.61568 14.9012 3.53657C12.9607 3.48781 11.0393 3.48781 9.09882 3.53656C5.95033 3.61566 4.37608 3.65521 3.24495 4.79065C2.11382 5.92608 2.08114 7.45885 2.01576 10.5244C1.99474 11.5101 1.99475 12.4899 2.01577 13.4756Z" stroke="#141B34" stroke-width="1.5" stroke-linejoin="round"></path>
    </svg>
    <input id="email_field" class="input_field" type="text" name="input-name" title="Inpit title" placeholder="name@mail.com">
  </div>
  <div class="input_container">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path d="M18 11.0041C17.4166 9.91704 16.273 9.15775 14.9519 9.0993C13.477 9.03404 11.9788 9 10.329 9C8.67911 9 7.18091 9.03404 5.70604 9.0993C3.95328 9.17685 2.51295 10.4881 2.27882 12.1618C2.12602 13.2541 2 14.3734 2 15.5134C2 16.6534 2.12602 17.7727 2.27882 18.865C2.51295 20.5387 3.95328 21.8499 5.70604 21.9275C6.42013 21.9591 7.26041 21.9834 8 22" stroke="#141B34" stroke-width="1.5" stroke-linecap="round"></path>
      <path d="M6 9V6.5C6 4.01472 8.01472 2 10.5 2C12.9853 2 15 4.01472 15 6.5V9" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      <path d="M21.2046 15.1045L20.6242 15.6956V15.6956L21.2046 15.1045ZM21.4196 16.4767C21.7461 16.7972 22.2706 16.7924 22.5911 16.466C22.9116 16.1395 22.9068 15.615 22.5804 15.2945L21.4196 16.4767ZM18.0228 15.1045L17.4424 14.5134V14.5134L18.0228 15.1045ZM18.2379 18.0387C18.5643 18.3593 19.0888 18.3545 19.4094 18.028C19.7299 17.7016 19.7251 17.1771 19.3987 16.8565L18.2379 18.0387ZM14.2603 20.7619C13.7039 21.3082 12.7957 21.3082 12.2394 20.7619L11.0786 21.9441C12.2794 23.1232 14.2202 23.1232 15.4211 21.9441L14.2603 20.7619ZM12.2394 20.7619C11.6914 20.2239 11.6914 19.358 12.2394 18.82L11.0786 17.6378C9.86927 18.8252 9.86927 20.7567 11.0786 21.9441L12.2394 20.7619ZM12.2394 18.82C12.7957 18.2737 13.7039 18.2737 14.2603 18.82L15.4211 17.6378C14.2202 16.4587 12.2794 16.4587 11.0786 17.6378L12.2394 18.82ZM14.2603 18.82C14.8082 19.358 14.8082 20.2239 14.2603 20.7619L15.4211 21.9441C16.6304 20.7567 16.6304 18.8252 15.4211 17.6378L14.2603 18.82ZM20.6242 15.6956L21.4196 16.4767L22.5804 15.2945L21.785 14.5134L20.6242 15.6956ZM15.4211 18.82L17.8078 16.4767L16.647 15.2944L14.2603 17.6377L15.4211 18.82ZM17.8078 16.4767L18.6032 15.6956L17.4424 14.5134L16.647 15.2945L17.8078 16.4767ZM16.647 16.4767L18.2379 18.0387L19.3987 16.8565L17.8078 15.2945L16.647 16.4767ZM21.785 14.5134C21.4266 14.1616 21.0998 13.8383 20.7993 13.6131C20.4791 13.3732 20.096 13.1716 19.6137 13.1716V14.8284C19.6145 14.8284 19.619 14.8273 19.6395 14.8357C19.6663 14.8466 19.7183 14.8735 19.806 14.9391C19.9969 15.0822 20.2326 15.3112 20.6242 15.6956L21.785 14.5134ZM18.6032 15.6956C18.9948 15.3112 19.2305 15.0822 19.4215 14.9391C19.5091 14.8735 19.5611 14.8466 19.5879 14.8357C19.6084 14.8273 19.6129 14.8284 19.6137 14.8284V13.1716C19.1314 13.1716 18.7483 13.3732 18.4281 13.6131C18.1276 13.8383 17.8008 14.1616 17.4424 14.5134L18.6032 15.6956Z" fill="#141B34"></path>
    </svg>
    <input id="password_field" class="input_field" type="password" name="input-name" title="Inpit title" placeholder="Password">
  </div>
  <button class="sign-in_btn" type="submit" title="Sign In">
    <span>Sign In</span>
  </button>
  </div>
  <div class="testimonial">
    <p>"I've been using this product for a few days now and I'm really impressed! The interface is intuitive and easy to use."</p>
    <div class="user-profile-picture"></div>
  <div class="user">
    <span class="username">Yassine Zanina</span>
    <span class="occupation">Creative Designer &amp; Developer</span>
  </div>
  </div>
</div>
<style>
/* From Uiverse.io by zanina-yassine - Tags: login, card, sign-up, testimonials, gradients */
.container {
  height: fit-content;
  display: flex;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 9px;
}

.login-form {
  width: 350px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  border-radius: 9px 0 0 9px;
  background-color: #fff;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px 0;
}

.title {
  font-weight: 700;
  font-size: 15px;
  line-height: 21px;
  text-align: center;
  color: #2B2B2F;
  margin-bottom: 10px;
}

.description {
  max-width: 80%;
  margin: auto;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: #5F5D6B;
}

.input_container {
  width: 100%;
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.icon {
  width: 20px;
  position: absolute;
  z-index: 99;
  left: 12px;
  bottom: 9px;
}

.input_field {
  width: auto;
  height: 40px;
  padding: 0 0 0 40px;
  border-radius: 7px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #115DFC;
  background-color: transparent;
}

.sign-in_btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 5px;
  border: 0;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.sign-in_btn:hover {
  transform: scale(1.01) translateY(-2px);
  box-shadow: 0 10px 20px 0#054eed6b;
}

.testimonial {
  width: 250px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  background: linear-gradient(358.31deg,#fff -24.13%,hsla(0,0%,100%,0) 338.58%),linear-gradient(89.84deg,rgba(230,36,174,.15) .34%,rgba(94,58,255,.15) 16.96%,rgba(10,136,255,.15) 34.66%,rgba(75,191,80,.15) 50.12%,rgba(137,206,0,.15) 66.22%,rgba(239,183,0,.15) 82%,rgba(246,73,0,.15) 99.9%);
  border-radius: 0 9px 9px 0;
}

.testimonial p {
  color: #4d4c6d;
  font-size: 11px;
  text-align: center;
  font-weight: 600;
}

.user-profile-picture {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #00000011;
}

.user {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.username {
  color: #4d4c6d;
  font-size: 11px;
  text-align: center;
  font-weight: 600;
}

.occupation {
  color: rgb(141, 140, 161);
  font-size: 10px;
  text-align: center;
  font-weight: 600;
}
</style>


================================================
FILE: Cards/zanina-yassine_neat-starfish-50.html
================================================
<div class="card">
  <div class="container">
    <div class="cloud front">
      <span class="left-front"></span>
      <span class="right-front"></span>
    </div>
    <span class="sun sunshine"></span>
    <span class="sun"></span>
    <div class="cloud back">
      <span class="left-back"></span>
      <span class="right-back"></span>
    </div>
  </div>

  <div class="card-header">
    <span>Messadine, Susah<br>Tunisia</span>
    <span>March 13</span>
  </div>

  <span class="temp">23°</span>

  <div class="temp-scale">
    <span>Celcius</span>
  </div>
</div>
<style>
/* From Uiverse.io by zanina-yassine - Tags: card, weather */
.card {
  width: 350px;
  height: 235px;
  position: relative;
  padding: 25px;
  background: radial-gradient(178.94% 106.41% at 26.42% 106.41%, #FFF7B1 0%, rgba(255, 255, 255, 0) 71.88%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #FFFFFF;
  box-shadow: 0px 155px 62px rgba(0, 0, 0, 0.01), 0px 87px 52px rgba(0, 0, 0, 0.05), 0px 39px 39px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 23px;
  transition: all 0.8s cubic-bezier(0.15, 0.83, 0.66, 1);
  cursor: pointer;
}

.card:hover {
  transform: scale(1.05);
}

.container {
  width: 250px;
  height: 250px;
  position: absolute;
  right: -35px;
  top: -50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.7);
}

.cloud {
  width: 250px;
}

.front {
  padding-top: 45px;
  margin-left: 25px;
  display: inline;
  position: absolute;
  z-index: 11;
  animation: clouds 8s infinite;
  animation-timing-function: ease-in-out;
}

.back {
  margin-top: -30px;
  margin-left: 150px;
  z-index: 12;
  animation: clouds 12s infinite;
  animation-timing-function: ease-in-out;
}

.right-front {
  width: 45px;
  height: 45px;
  border-radius: 50% 50% 50% 0%;
  background-color: #4c9beb;
  display: inline-block;
  margin-left: -25px;
  z-index: 5;
}

.left-front {
  width: 65px;
  height: 65px;
  border-radius: 50% 50% 0% 50%;
  background-color: #4c9beb;
  display: inline-block;
  z-index: 5;
}

.right-back {
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 50% 0%;
  background-color: #4c9beb;
  display: inline-block;
  margin-left: -20px;
  z-index: 5;
}

.left-back {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 0% 50%;
  background-color: #4c9beb;
  display: inline-block;
  z-index: 5;
}

.sun {
  width: 120px;
  height: 120px;
  background: -webkit-linear-gradient(to right, #fcbb04, #fffc00);
  background: linear-gradient(to right, #fcbb04, #fffc00);
  border-radius: 60px;
  display: inline;
  position: absolute;
}

.sunshine {
  animation: sunshines 2s infinite;
}

@keyframes sunshines {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes clouds {
  0% {
    transform: translateX(15px);
  }

  50% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(15px);
  }
}

.card-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-header span:first-child {
  word-break: break-all;
  font-weight: 800;
  font-size: 15px;
  line-height: 135%;
  color: rgba(87, 77, 51, 0.66);
}

.card-header span:last-child {
  font-weight: 700;
  font-size: 15px;
  line-height: 135%;
  color: rgba(87, 77, 51, 0.33);
}

.temp {
  position: absolute;
  left: 25px;
  bottom: 12px;
  font-weight: 700;
  font-size: 64px;
  line-height: 77px;
  color: rgba(87, 77, 51, 1);
}

.temp-scale {
  width: 80px;
  height: 36px;
  position: absolute;
  right: 25px;
  bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 9px;
}

.temp-scale span {
  font-weight: 700;
  font-size: 13px;
  line-height: 134.49%;
  color: rgba(87, 77, 51, 0.66);
}
</style>


================================================
FILE: Cards/zanina-yassine_serious-lizard-22.html
================================================
<div class="card">
  <div class="search-container">
    <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M17.5 17.5L22 22"></path>
      <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z"></path>
    </svg>
    <input placeholder="Search for a quick action" type="search">
  </div>

  <div class="categories">
    <button type="button">Note</button>
    <button type="button">File</button>
    <button type="button">Email</button>
    <button type="button">Others</button>
  </div>

  <div class="results">
    <p class="label">Best Results</p>

    <div class="results-list">
      <div class="entry">
        <div class="icon">
          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M13 2H13.2727C16.5339 2 18.1645 2 19.2969 2.79784C19.6214 3.02643 19.9094 3.29752 20.1523 3.60289C21 4.66867 21 6.20336 21 9.27273V11.8182C21 14.7814 21 16.2629 20.5311 17.4462C19.7772 19.3486 18.1829 20.8491 16.1616 21.5586C14.9044 22 13.3302 22 10.1818 22C8.38275 22 7.48322 22 6.76478 21.7478C5.60979 21.3424 4.69875 20.4849 4.26796 19.3979C4 18.7217 4 17.8751 4 16.1818V12"></path>
            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M21 12C21 13.8409 19.5076 15.3333 17.6667 15.3333C17.0009 15.3333 16.216 15.2167 15.5686 15.3901C14.9935 15.5442 14.5442 15.9935 14.3901 16.5686C14.2167 17.216 14.3333 18.0009 14.3333 18.6667C14.3333 20.5076 12.8409 22 11 22"></path>
            <path stroke-linecap="round" stroke-width="2" stroke="#171718" d="M11 6L3 6M7 2V10"></path>
          </svg>
        </div>
        <div class="desc">
          <label>Create a new File</label>
          <span>Add a new file to your library list</span>
          </div>
      </div>
      <div class="entry">
        <div class="icon">
          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M17.4776 9.01106C17.485 9.01102 17.4925 9.01101 17.5 9.01101C19.9853 9.01101 22 11.0294 22 13.5193C22 15.8398 20.25 17.7508 18 18M17.4776 9.01106C17.4924 8.84606 17.5 8.67896 17.5 8.51009C17.5 5.46695 15.0376 3 12 3C9.12324 3 6.76233 5.21267 6.52042 8.03192M17.4776 9.01106C17.3753 10.1476 16.9286 11.1846 16.2428 12.0165M6.52042 8.03192C3.98398 8.27373 2 10.4139 2 13.0183C2 15.4417 3.71776 17.4632 6 17.9273M6.52042 8.03192C6.67826 8.01687 6.83823 8.00917 7 8.00917C8.12582 8.00917 9.16474 8.38194 10.0005 9.01101"></path>
            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M12 13L12 21M12 13C11.2998 13 9.99153 14.9943 9.5 15.5M12 13C12.7002 13 14.0085 14.9943 14.5 15.5"></path>
          </svg>
        </div>
        <div class="desc">
          <label>Upload a file</label>
          <span>Use your one of your system files to save and edit</span>
          </div>
      </div>
    </div>

    <hr>

    <div class="results-list">
      <div class="entry">
        <div class="icon">
          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M5 16L10 13M14 11L19 8M12 5V10M12 14V19M5 8L10 11M14 13L19 16"></path>
            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M20.5 9.00001V14.5M13.5 20.5L19 17.5M4.5 17.5L10.5 20.5M3.5 15V9.00001M4.5 6.5L10.5 3.5M19.5 6.5L13.5 3.5"></path>
            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="3.5" cx="12"></circle>
            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="20.5" cx="12"></circle>
            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="7.5" cx="3.5"></circle>
            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="7.5" cx="20.5"></circle>
            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="16.5" cx="20.5"></circle>
            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="16.5" cx="3.5"></circle>
            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M12 9.75L14 10.875V13.125L12 14.25L10 13.125V10.875L12 9.75Z"></path>
          </svg>
        </div>
        <div class="desc">
          <label>Generate a new document with AI</label>
          <span>Use our ChatGPT plug-in to generate a new document</span>
        </div>
        <p class="badge">New
      </p></div>
      <div class="entry">
        <div class="icon">
          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M2 12.4C2 9.38301 2 7.87452 2.94627 6.93726C3.89254 6 5.41554 6 8.46154 6H9.53846C12.5845 6 14.1075 6 15.0537 6.93726C16 7.87452 16 9.38301 16 12.4V15.6C16 18.617 16 20.1255 15.0537 21.0627C14.1075 22 12.5845 22 9.53846 22H8.46154C5.41554 22 3.89254 22 2.94627 21.0627C2 20.1255 2 18.617 2 15.6V12.4Z"></path>
            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M15.5376 16H16.4608C19.072 16 20.3776 16 21.1888 15.1799C22 14.3598 22 13.0399 22 10.4V7.6C22 4.96013 22 3.6402 21.1888 2.8201C20.3776 2 19.072 2 16.4608 2H15.5376C12.9264 2 11.6208 2 10.8096 2.8201C10.1002 3.53726 10.0112 4.63664 10 6.66667"></path>
            <path stroke-linecap="round" stroke-width="2" stroke="#171718" d="M6 12H9M6 17H11"></path>
            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M10.5 3L14.5 6.5"></path>
          </svg>
        </div>
        <div class="desc">
          <label>Create from a template</label>
          <span>Use our free templates to quickly create a document</span>
</div>
      </div>
    </div>
  </div>

  <div class="card-footer">
    <div class="action">
      <button type="button">
        <svg fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M12 19V4"></path>
          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M7 15L11.2929 19.2929C11.6262 19.6262 11.7929 19.7929 12 19.7929C12.2071 19.7929 12.3738 19.6262 12.7071 19.2929L17 15"></path>
        </svg>
      </button>
      <button type="button">
        <svg fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M12 5L12 20"></path>
          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M7 9L11.2929 4.70711C11.6262 4.37377 11.7929 4.20711 12 4.20711C12.2071 4.20711 12.3738 4.37377 12.7071 4.70711L17 9"></path>
        </svg>
      </button>
      <p class="label">Navigate
    </p></div>
    <div class="action">
      <button type="button">
        <svg fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M20 3V5.07692C20 7.07786 20 8.07833 19.8547 8.91545C19.0547 13.5235 15.0934 17.1376 10.0426 17.8674C9.12509 18 7.19318 18 5 18"></path>
          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M7 21C6.39316 20.4102 4 18.8403 4 18C4 17.1597 6.39316 15.5898 7 15"></path>
        </svg>
      </button>
      <p class="label">Select
    </p></div>
    <div class="action">
      <button type="button">
        <svg fill="none" viewBox="0 0 14 14" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
          <path stroke-width="1.5" stroke="#5F6368" d="M13 2.875V2.875C13 1.83947 12.1605 1 11.125 1V1C10.0895 1 9.25 1.83947 9.25 2.875V11.125C9.25 12.1605 10.0895 13 11.125 13V13C12.1605 13 13 12.1605 13 11.125V11.125C13 10.0895 12.1605 9.25 11.125 9.25H2.875C1.83947 9.25 1 10.0895 1 11.125V11.125C1 12.1605 1.83947 13 2.875 13V13C3.91053 13 4.75 12.1605 4.75 11.125V2.875C4.75 1.83947 3.91053 1 2.875 1V1C1.83947 1 1 1.83947 1 2.875V2.875C1 3.91053 1.83947 4.75 2.875 4.75H11.125C12.1605 4.75 13 3.91053 13 2.875Z"></path>
        </svg>
</button>
      <p class="label">Quit
    </p></div>

    <p class="label edit-actions">Edit Actions
  </p></div>
</div>
<style>
/* From Uiverse.io by zanina-yassine - Tags: card */
.card {
  width: 450px;
  background: #FFFFFF;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 11px;
}

.search-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 20px;
}

.search-container input {
  width: 100%;
  height: 50px;
  border: 0;
  outline: none;
  font-size: 13px;
}

.categories {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 0px 20px 20px 20px;
}

.categories button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 15px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 20px;
  font-weight: 600;
  color: #171718;
  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.categories button:hover {
  transform: scale(1.05) translateY(-3px);
}

.results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.results hr {
  width: 100%;
  height: 1px;
  border: 0;
  background-color: #ECECEC;
}

.results p {
  padding: 0 20px;
}

p.label {
  font-weight: 600;
  font-size: 11px;
  line-height: 13px;
  color: #5F6368;
}

.results .entry {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  gap: 12px;
  padding: 5px 20px;
  transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.results .entry:hover {
  background-color: #F5F8FE;
}

.results .results-list .entry:hover .icon {
  background-color: #1763fa;
}

.results .results-list .entry:hover .icon svg path,
.results .results-list .entry:hover .icon svg circle {
  stroke: #ffffff;
}

.results .results-list .entry:hover label {
  color: #1763fa;
}

.results .results-list .entry:hover span {
  color: #7ba0eb;
}

.results .results-list {
  display: flex;
  flex-direction: column;
}

.results .entry .icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ECECEC;
  border-radius: 7px;
  transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.results .entry .desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.results .entry .desc label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #171718;
}

.results .entry .desc span {
  font-weight: 600;
  font-size: 10px;
  line-height: 12px;
  color: #72767c;
}

.results .entry .badge {
  width: 40px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  background: #DDFFDE;
  border: 1px solid #08581d0e;
  border-radius: 7px;
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;
  text-align: center;
  color: #08581D;
}

.card-footer {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 10px;
  padding: 0 7px;
  background: #F8F8F8;
}

.card .action {
  display: flex;
  align-items: center;
  gap: 5px;
}

.card .action p {
  padding-left: 5px;
}

.card-footer button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 0;
  background: #ECECEC;
  outline: none;
}

.edit-actions {
  width: 100%;
  text-align: right;
  padding-right: 10px;
  opacity: 0.6;
}
</style>


================================================
FILE: Cards/zebra76966_rude-lizard-24.html
================================================
<div class="card">

  <button>
    <svg fill="#000000" preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 -28.5 256 256"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g> <path fill-rule="nonzero" fill="#5865F2" d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"> </path> </g> </g></svg>
  </button>
  <button>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <circle fill="#3B5998" r="20" cy="24" cx="24"></circle> <path fill="white" d="M29.315 16.9578C28.6917 16.8331 27.8498 16.74 27.3204 16.74C25.8867 16.74 25.7936 17.3633 25.7936 18.3607V20.1361H29.3774L29.065 23.8137H25.7936V35H21.3063V23.8137H19V20.1361H21.3063V17.8613C21.3063 14.7453 22.7708 13 26.4477 13C27.7252 13 28.6602 13.187 29.8753 13.4363L29.315 16.9578Z" clip-rule="evenodd" fill-rule="evenodd"></path> </g></svg>
  </button>
  <button>
    <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <circle style="fill:#e4405f" r="512" cy="512" cx="512"></circle> <path style="fill:#fff" d="M512 256c-69.5 0-78.2.3-105.5 1.5-27.3 1.3-45.8 5.6-62.1 11.9-16.8 6.5-31.1 15.3-45.4 29.5s-23 28.5-29.5 45.4c-6.3 16.3-10.6 34.9-11.9 62.1-1.3 27.3-1.5 36-1.5 105.5s.3 78.2 1.5 105.5c1.3 27.2 5.6 45.8 11.9 62.1 6.5 16.8 15.3 31.1 29.5 45.4 14.2 14.2 28.5 23 45.4 29.5 16.3 6.3 34.9 10.6 62.1 11.9 27.3 1.3 36 1.5 105.5 1.5s78.2-.3 105.5-1.5c27.2-1.3 45.8-5.6 62.1-11.9 16.8-6.5 31.1-15.3 45.4-29.5 14.2-14.2 23-28.5 29.5-45.4 6.3-16.3 10.6-34.9 11.9-62.1 1.3-27.3 1.5-36 1.5-105.5s-.3-78.2-1.5-105.5c-1.3-27.2-5.6-45.8-11.9-62.1-6.5-16.8-15.3-31.1-29.5-45.4-14.2-14.2-28.5-23-45.4-29.5-16.3-6.3-34.9-10.6-62.1-11.9-27.3-1.2-36-1.5-105.5-1.5zm0 46.1c68.3 0 76.5.3 103.5 1.5 25 1.2 38.5 5.3 47.5 8.9 12 4.6 20.5 10.2 29.5 19.1 8.9 9 14.5 17.5 19.1 29.5 3.5 9 7.7 22.5 8.8 47.5 1.2 27 1.5 35.1 1.5 103.5s-.3 76.5-1.6 103.5c-1.3 25-5.5 38.5-9 47.5-4.8 12-10.2 20.5-19.2 29.5-8.9 8.9-17.6 14.5-29.4 19.1-9 3.5-22.7 7.7-47.7 8.8-27.2 1.2-35.2 1.5-103.7 1.5s-76.5-.3-103.7-1.6c-25-1.3-38.7-5.5-47.7-9-12.1-4.8-20.5-10.2-29.4-19.2-9-8.9-14.7-17.6-19.2-29.4-3.5-9-7.7-22.7-9-47.7-1-26.9-1.3-35.2-1.3-103.3 0-68.2.3-76.5 1.3-103.7 1.3-25 5.4-38.7 9-47.7 4.5-12.2 10.2-20.5 19.2-29.5 8.9-8.9 17.3-14.7 29.4-19.2 9-3.5 22.4-7.7 47.4-9 27.2-1 35.2-1.3 103.7-1.3l1 .7zm0 78.4c-72.6 0-131.5 58.9-131.5 131.5S439.4 643.5 512 643.5 643.5 584.6 643.5 512 584.6 380.5 512 380.5zm0 216.8c-47.1 0-85.3-38.2-85.3-85.3s38.2-85.3 85.3-85.3 85.3 38.2 85.3 85.3-38.2 85.3-85.3 85.3zm167.4-221.9c0 17-13.8 30.7-30.7 30.7-17 0-30.7-13.8-30.7-30.7s13.8-30.7 30.7-30.7c16.9-.1 30.7 13.7 30.7 30.7z"></path> </g></svg>      
  </button><button>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path fill="#47ACDF" d="M11.7887 28C8.55374 28 5.53817 27.0591 3 25.4356C5.15499 25.5751 8.95807 25.2411 11.3236 22.9848C7.76508 22.8215 6.16026 20.0923 5.95094 18.926C6.25329 19.0426 7.6953 19.1826 8.50934 18.856C4.4159 17.8296 3.78793 14.2373 3.92748 13.141C4.695 13.6775 5.99745 13.8641 6.50913 13.8174C2.69479 11.0882 4.06703 6.98276 4.74151 6.09635C7.47882 9.88867 11.5812 12.0186 16.6564 12.137C16.5607 11.7174 16.5102 11.2804 16.5102 10.8316C16.5102 7.61092 19.1134 5 22.3247 5C24.0025 5 25.5144 5.71275 26.5757 6.85284C27.6969 6.59011 29.3843 5.97507 30.2092 5.4432C29.7934 6.93611 28.4989 8.18149 27.7159 8.64308C27.7224 8.65878 27.7095 8.62731 27.7159 8.64308C28.4037 8.53904 30.2648 8.18137 31 7.68256C30.6364 8.52125 29.264 9.91573 28.1377 10.6964C28.3473 19.9381 21.2765 28 11.7887 28Z"></path> </g></svg>
  </button>


</div>

<style>
/* From Uiverse.io by zebra76966 - Tags: twitter, facebook, instagram, card, Discord, share, multicolor */
.card {
  width: 290px;
  height: 64px;
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 20px;
  position: relative;
  border: 2px solid transparent;
  transition: all 0.5s ease-in-out;
}

.card:focus-within {
  background-color: rgba(17, 17, 17, 0.5);
  backdrop-filter: blur(10px);
  border: 2px solid rgb(27, 27, 27);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.card button {
  font-size: 34px;
  background-color: transparent;
  width: 50px;
  padding: 7px;
  height: 50px;
  border-radius: 100%;
  transition: all 0.2s ease-in;
  border: 0;
  cursor: pointer;
}

.card button:focus {
  background-color: rgb(255, 255, 255);
  margin-bottom: 50%;
}

.card::hover {
}


</style>


================================================
FILE: Cards/zohayrslileh_spicy-parrot-94.html
================================================
<!-- From Uiverse.io by zohayrslileh  - Tags: pricing, card, plan, subscribe, package -->
<div style="scale: 1;" class="dark m-10 w-full md:w-1/2 lg:w-1/3 px-3">
  <div
    class="rounded-xl relative z-10 border border-primary border-opacity-20 shadow-pricing grid py-10 px-8 sm:p-12 lg:py-10 lg:px-6 xl:p-12"
  >
    <span
      style="color: rgb(255, 177, 44);"
      class="text-primary font-semibold text-lg block mb-4"
      >Business</span
    >
    <h2 class="font-bold text-dark mb-5 text-[42px]">
      $59<span class="text-base text-body-color font-medium">/ month</span>
    </h2>
    <p
      class="text-base text-body-color pb-8 border-b border-foreground border-opacity-20"
    >
      Perfect for business usage.
    </p>
    <ul role="list" class="my-7 space-y-5">
      <li class="flex items-center">
        <svg
          style="color: rgb(255, 177, 44);"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="flex-shrink-0 h-4 w-4"
          aria-hidden="true"
        >
          <path
            d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"
          ></path></svg
        ><span
          class="font-normal leading-tight ms-3 text-base text-gray-500 dark:text-gray-400"
          >Launch 2 Attack(s) same time</span
        >
      </li>
      <li class="flex items-center">
        <svg
          style="color: rgb(255, 177, 44);"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="flex-shrink-0 h-4 w-4"
          aria-hidden="true"
        >
          <path
            d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"
          ></path></svg
        ><span
          class="font-normal leading-tight ms-3 text-base text-gray-500 dark:text-gray-400"
          >Customize location</span
        >
      </li>
      <li class="flex items-center">
        <svg
          style="color: rgb(255, 177, 44);"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="flex-shrink-0 h-4 w-4"
          aria-hidden="true"
        >
          <path
            d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"
          ></path></svg
        ><span
          class="font-normal leading-tight ms-3 text-base text-gray-500 dark:text-gray-400"
          >Customize devices</span
        >
      </li>
      <li class="flex decoration-gray-500 line-through">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="flex-shrink-0 h-4 w-4 dark:text-gray-500 text-gray-400"
          aria-hidden="true"
        >
          <path
            d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"
          ></path></svg
        ><span class="font-normal leading-tight ms-3 text-base text-gray-500"
          >Enable proxies</span
        >
      </li>
    </ul>
    <button
      style="background-color: rgb(255, 177, 44);"
      type="button"
      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent data-[pressed=true]:scale-[0.97] outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-6 min-w-24 h-12 text-medium gap-3 rounded-large [&amp;>svg]:max-w-[theme(spacing.8)] transition-transform-colors-opacity motion-reduce:transition-none bg-primary data-[hover=true]:opacity-hover text-background"
    >
      Subscribe</button
    ><span class="absolute right-0 top-7 z-[-1]"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 77 172"
        height="172"
        width="77"
      >
        <circle fill="url(#paint0_linear)" r="86" cy="86" cx="86"></circle>
        <defs>
          <linearGradient
            gradientUnits="userSpaceOnUse"
            y2="172"
            x2="86"
            y1="0"
            x1="86"
            id="paint0_linear"
          >
            <stop stop-opacity="0.09" stop-color="#3056D3"></stop>
            <stop stop-opacity="0" stop-color="#C4C4C4" offset="1"></stop>
          </linearGradient>
        </defs></svg></span
    ><span class="absolute right-4 top-4 z-[-1]"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 41 89"
        height="89"
        width="41"
      >
        <circle
          fill="#3056D3"
          transform="rotate(180 38.9138 87.4849)"
          r="1.42021"
          cy="87.4849"
          cx="38.9138"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 38.9138 74.9871)"
          r="1.42021"
          cy="74.9871"
          cx="38.9138"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 38.9138 62.4892)"
          r="1.42021"
          cy="62.4892"
          cx="38.9138"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 38.9138 38.3457)"
          r="1.42021"
          cy="38.3457"
          cx="38.9138"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 38.9138 13.634)"
          r="1.42021"
          cy="13.634"
          cx="38.9138"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 38.9138 50.2754)"
          r="1.42021"
          cy="50.2754"
          cx="38.9138"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 38.9138 26.1319)"
          r="1.42021"
          cy="26.1319"
          cx="38.9138"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 38.9138 1.42021)"
          r="1.42021"
          cy="1.42021"
          cx="38.9138"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 26.4157 87.4849)"
          r="1.42021"
          cy="87.4849"
          cx="26.4157"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 26.4157 74.9871)"
          r="1.42021"
          cy="74.9871"
          cx="26.4157"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 26.4157 62.4892)"
          r="1.42021"
          cy="62.4892"
          cx="26.4157"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 26.4157 38.3457)"
          r="1.42021"
          cy="38.3457"
          cx="26.4157"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 26.4157 13.634)"
          r="1.42021"
          cy="13.634"
          cx="26.4157"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 26.4157 50.2754)"
          r="1.42021"
          cy="50.2754"
          cx="26.4157"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 26.4157 26.1319)"
          r="1.42021"
          cy="26.1319"
          cx="26.4157"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 26.4157 1.4202)"
          r="1.42021"
          cy="1.4202"
          cx="26.4157"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 13.9177 87.4849)"
          r="1.42021"
          cy="87.4849"
          cx="13.9177"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 13.9177 74.9871)"
          r="1.42021"
          cy="74.9871"
          cx="13.9177"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 13.9177 62.4892)"
          r="1.42021"
          cy="62.4892"
          cx="13.9177"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 13.9177 38.3457)"
          r="1.42021"
          cy="38.3457"
          cx="13.9177"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 13.9177 13.634)"
          r="1.42021"
          cy="13.634"
          cx="13.9177"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 13.9177 50.2754)"
          r="1.42021"
          cy="50.2754"
          cx="13.9177"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 13.9177 26.1319)"
          r="1.42021"
          cy="26.1319"
          cx="13.9177"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 13.9177 1.42019)"
          r="1.42021"
          cy="1.42019"
          cx="13.9177"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 1.41963 87.4849)"
          r="1.42021"
          cy="87.4849"
          cx="1.41963"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 1.41963 74.9871)"
          r="1.42021"
          cy="74.9871"
          cx="1.41963"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 1.41963 62.4892)"
          r="1.42021"
          cy="62.4892"
          cx="1.41963"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 1.41963 38.3457)"
          r="1.42021"
          cy="38.3457"
          cx="1.41963"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 1.41963 13.634)"
          r="1.42021"
          cy="13.634"
          cx="1.41963"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 1.41963 50.2754)"
          r="1.42021"
          cy="50.2754"
          cx="1.41963"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 1.41963 26.1319)"
          r="1.42021"
          cy="26.1319"
          cx="1.41963"
        ></circle>
        <circle
          fill="#3056D3"
          transform="rotate(180 1.41963 1.4202)"
          r="1.42021"
          cy="1.4202"
          cx="1.41963"
        ></circle></svg
    ></span>
  </div>
</div>


    

================================================
FILE: Checkboxes/010binary_empty-falcon-21.html
================================================
<div class="radio-input">
  <input checked="" value="color-1" name="color" id="color-1" type="radio" />
  <label for="color-1">
    <span>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
        <g
          stroke-linejoin="round"
          stroke-linecap="round"
          id="SVGRepo_tracerCarrier"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <g id="Interface / Check">
            <path
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke-width="2"
              stroke="#ffffff"
              d="M6 12L10.2426 16.2426L18.727 7.75732"
              id="Vector"
            ></path>
          </g>
        </g>
      </svg>
    </span>
  </label>

  <input value="color-2" name="color" id="color-2" type="radio" />
  <label for="color-2">
    <span>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
        <g
          stroke-linejoin="round"
          stroke-linecap="round"
          id="SVGRepo_tracerCarrier"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <g id="Interface / Check">
            <path
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke-width="2"
              stroke="#ffffff"
              d="M6 12L10.2426 16.2426L18.727 7.75732"
              id="Vector"
            ></path>
          </g>
        </g>
      </svg>
    </span>
  </label>

  <input value="color-3" name="color" id="color-3" type="radio" />
  <label for="color-3">
    <span>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
        <g
          stroke-linejoin="round"
          stroke-linecap="round"
          id="SVGRepo_tracerCarrier"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <g id="Interface / Check">
            <path
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke-width="2"
              stroke="#ffffff"
              d="M6 12L10.2426 16.2426L18.727 7.75732"
              id="Vector"
            ></path>
          </g>
        </g>
      </svg>
    </span>
  </label>
</div>

<style>
/* From Uiverse.io by 010binary  - Tags: simple, material design, icon, active, checkbox */
.radio-input {
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
  display: flex;
}

.radio-input input[type="radio"] {
  display: none;
}

.radio-input input[type="radio"] + label {
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.radio-input input[type="radio"] + label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  line-height: 44px;
  transition: background-color 0.3s ease;
}

.radio-input input[type="radio"] + label span svg {
  opacity: 0;
  transition: all 0.3s ease;
}

.radio-input input[type="radio"]#color-1 + label span {
  background-color: #b0b0b0;
}

.radio-input input[type="radio"]#color-2 + label span {
  background-color: #b0b0b0;
}

.radio-input input[type="radio"]#color-3 + label span {
  background-color: #b0b0b0;
}

.radio-input input[type="radio"]:checked + label span {
  background-color: #ff4500; /* Change to orange when checked */
}

.radio-input input[type="radio"]:checked + label span svg {
  opacity: 1;
}

.radio-input input[type="radio"]#color-1:checked ~ label[for="color-2"] span,
.radio-input input[type="radio"]#color-1:checked ~ label[for="color-3"] span {
  background-color: #b0b0b0; /* Gray color when not checked */
}

.radio-input input[type="radio"]#color-2:checked ~ label[for="color-1"] span,
.radio-input input[type="radio"]#color-2:checked ~ label[for="color-3"] span {
  background-color: #b0b0b0; /* Gray color when not checked */
}

.radio-input input[type="radio"]#color-3:checked ~ label[for="color-1"] span,
.radio-input input[type="radio"]#color-3:checked ~ label[for="color-2"] span {
  background-color: #b0b0b0; /* Gray color when not checked */
}

</style>
    

================================================
FILE: Checkboxes/3bdel3ziz-T_angry-grasshopper-50.html
================================================
<div class="burger-icon">
  <label class="burger" for="burger">
    <input class="line" type="checkbox" id="burger" />
  </label>
</div>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: material design, animation, checkbox, hamburger, menu, click effect, click animation, close */
.burger {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
  transition: 300ms;
  border-radius: 10px;
}
.burger input[type="checkbox"] {
  appearance: none;
  transition: 300ms;
}

.burger::before,
.burger::after {
  content: "";
  transition: 300ms;
  transform-origin: center center;
}

.burger::before {
  transform: translateY(8px);
}
.burger::after {
  transform: translateY(-8px);
}
.burger .line,
.burger::before,
.burger::after {
  width: 25px;
  height: 2.1px;
  display: block;
  background-color: black;
  border-radius: 5px;
  position: absolute;
}

.burger .line:checked {
  width: 0;
  transition-delay: 100ms;
}
.burger:has(.line:checked)::before {
  animation: animation1 400ms ease-out 0s 1 both;
}
.burger:has(.line:checked)::after {
  animation: animation2 400ms ease-out 0s 1 both;
}

.burger:hover {
  background: #aeaeae;
  border-radius: 50%;
}

.burger:hover .line,
.burger:hover::before,
.burger:hover::after {
  background: #e8e8e8;
}

.burger:active {
  scale: 0.95;
}
@keyframes animation1 {
  0% {
    transform: translateY(8px) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(45deg);
  }
}
@keyframes animation2 {
  0% {
    transform: translateY(-8px) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(-45deg);
  }
}

</style>
    

================================================
FILE: Checkboxes/AIVIIID_hungry-robin-21.html
================================================

	<label class="container">
		<input type="checkbox" checked="checked">
		<div class="checkmark"></div>
	</label>



<style>
/* From Uiverse.io by AIVIIID - Tags: checkbox */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 25px;
  user-select: none;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background: black;
  border-radius: 50px;
  transition: all 0.7s;
  --spread: 20px;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background: black;
  box-shadow: -10px -10px var(--spread) 0px #FFD700, 0 -10px var(--spread) 0px #FFD700, 10px -10px var(--spread) 0px #FFD700, 10px 0 var(--spread) 0px #FFD700, 10px 10px var(--spread) 0px #FFD700, 0 10px var(--spread) 0px #FFD700, -10px 10px var(--spread) 0px #FFD700;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
  animation: checkmark 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid #FFD700;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

/* Add animation for checkmark */
@keyframes checkmark {
  from {
    transform: rotate(-45deg) scale(0);
  }

  to {
    transform: rotate(45deg) scale(1);
  }
}

/* Style the label text */
.container span {
  margin-left: 2em;
  color: black;
  font-weight: bold;
}

</style>


================================================
FILE: Checkboxes/AKAspidey01_itchy-wombat-76.html
================================================
<input id="toggleChecker" type="checkbox">
<label id="togglerLable" for="toggleChecker">
  <div class="checkboxtoggler">
    <div class="line-1"></div>
    <div class="line-2"></div>
    <div class="line-3"></div>
  </div>
</label>
<style>
/* From Uiverse.io by AKAspidey01 - Tags: checkbox, toggle switch, menuicon */
.checkboxtoggler {
  width: 3em;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  cursor: pointer;
}

.line-1 {
  background: #df6447;
  height: 0.3em;
  border-radius: 10em;
  transition-duration: 500ms;
}

.line-2 {
  background: #df6447;
  height: 0.3em;
  border-radius: 10em;
  transition-duration: 500ms;
}

.line-3 {
  background: #df6447;
  height: 0.3em;
  border-radius: 10em;
  transition-duration: 500ms;
}

#toggleChecker {
  height: 3em;
  width: 100%;
  display: none;
}

#toggleChecker:checked + #togglerLable .checkboxtoggler .line-1 {
  -webkit-transform: rotate(45deg) translateY(0.7em) translateX(0.7em);
  -ms-transform: rotate(45deg) translateY(0.7em) translateX(0.7em);
  transform: rotate(45deg) translateY(0.7em) translateX(0.7em);
}

#toggleChecker:checked + #togglerLable .checkboxtoggler .line-2 {
  -webkit-transform: rotate(-45deg) translateY(0em) translateX(0.1em);
  -ms-transform: rotate(-45deg) translateY(0em) translateX(0.1em);
  transform: rotate(-45deg) translateY(0em) translateX(0.1em);
}

#toggleChecker:checked + #togglerLable .checkboxtoggler .line-3 {
  transform: scaleX(0);
  transform-origin: left;
}
</style>


================================================
FILE: Checkboxes/AbanoubMagdy1_ugly-dog-26.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="line"></div>
  <div class="line line-indicator"></div>
</label>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: checkbox */
/* Hide the default checkbox */
.container input {
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: rgba(216, 216, 216, 0.603);
}

.container:hover {
  background: rgba(197, 197, 197, 0.527);
}

.line {
  width: calc(100% - 8px);
  height: 3px;
  left: 4px;
  background: rgb(58, 58, 58);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: .7s transform cubic-bezier(0,1,.33,1.2), background .4s;
}

.line-indicator {
  transform: translateY(-50%) rotate(90deg);
}

.container input:checked ~ .line-indicator {
  transform: translateY(-50%);
}
</style>


================================================
FILE: Checkboxes/Alaner-xs_white-parrot-57.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by Alaner-xs - Tags: checkbox */
/* Hide the default checkbox */
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.container {
 display: block;
 position: relative;
 cursor: pointer;
 font-size: 20px;
 user-select: none;
}

/* Create a custom checkbox */
.checkmark {
 position: relative;
 top: 0;
 left: 0;
 height: 1.3em;
 width: 1.3em;
 background-color: #ccc;
 border-bottom-left-radius: 15px;
 border-top-right-radius: 15px;
 box-shadow: 0px 0px 17px #c7bbb8;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
 background-color: #f34b21;
 box-shadow: 0px 0px 17px #f34b21;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
 left: 0.45em;
 top: 0.25em;
 width: 0.25em;
 height: 0.5em;
 border: solid rgb(233, 222, 222);
 border-width: 0 0.15em 0.15em 0;
 transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/Ali-Tahmazi99_unlucky-termite-68.html
================================================
<label class="bar" for="check">
    <input type="checkbox" id="check">

    <span class="top"></span>
    <span class="middle"></span>
    <span class="bottom"></span>
</label>
<style>
/* From Uiverse.io by Ali-Tahmazi99 - Tags: hamburger */
input[type = "checkbox"] {
  -webkit-appearance: none;
  display: none;
  visibility: hidden;
}

.bar {
  display: block;
  position: relative;
  cursor: pointer;
  width: 50px;
  height: 40px;
}

.bar span {
  position: absolute;
  width: 45px;
  height: 7px;
  background: #f1faee;
  border-radius: 100px;
  display: inline-block;
  transition: 0.3s ease;
  left: 0;
}

.bar span.top {
  top: 0;
}

.bar span.middle {
  top: 17px;
}

.bar span.bottom {
  bottom: 0;
}

input[type]:checked ~ span.top {
  transform: rotate(45deg);
  transform-origin: top left;
  width: 48px;
  left: 5px;
}

input[type]:checked ~ span.bottom {
  transform: rotate(-45deg);
  transform-origin: top left;
  width: 48px;
  bottom: -1px;
  box-shadow: 0 0 10px #495057;
}

input[type]:checked ~ span.middle {
  transform: translateX(-20px);
  opacity: 0;
}
</style>


================================================
FILE: Checkboxes/AnthonyPreite_nasty-zebra-57.html
================================================
<div><input type="checkbox" id="ni">
<label for="ni" class="ni"></label></div>


<style>
/* From Uiverse.io by AnthonyPreite - Tags: red, green, minimalist, checkbox */
/* ni means name input*/

.ni {
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 8px 20px;
  border-radius: .8rem;
  min-width: 124px;
  text-align: center;
  background: rgba(78, 190, 150, 0.1);
  border: 0.5px solid rgba(22, 179, 124, 0.2);
  cursor: pointer;
}

.ni:before {
  content: "Check";
  color: #4EBE96;
}

.ni:active {
  transform: scale(0.94);
}

#ni {
  position: fixed;
  opacity: 0;
  visibility: hidden;
}

#ni:checked + .ni {
  background: rgba(216, 79, 104, 0.1);
  border-color: rgba(216, 79, 104, 0.2);
}

#ni:checked + .ni:before {
  content: "Uncheck";
  color: #D84F68;
}
</style>


================================================
FILE: Checkboxes/AyuuLima_helpless-vampirebat-96.html
================================================
<label class="container">
  <input checked="checked" type="checkbox" />
  <div class="checkmark"></div>
</label>

<style>
/* From Uiverse.io by AyuuLima  - Tags: checkbox, click effect, css effect */
/* Hide the default checkbox */
.container input {
  display: none;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 30px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: rgb(255, 255, 255);
  border-radius: 0.3em;
  transition: all 0.25s;
  --spread: 50px;
}

.container input:checked ~ .checkmark {
  background-color: #000000;
  box-shadow: -10px -10px var(--spread) 0px rgb(17, 0, 248),
    0 -10px var(--spread) 0px rgb(243, 11, 243),
    10px -10px var(--spread) 0px rgb(253, 228, 0),
    10px 0 var(--spread) 0px rgb(107, 255, 21),
    10px 10px var(--spread) 0px rgb(76, 0, 255),
    0 10px var(--spread) 0px rgb(255, 196, 0),
    -10px 10px var(--spread) 0px rgb(90, 105, 240);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  transform: rotate(0deg);
  border: 0.1em solid rgba(0, 0, 0, 0.863);
  left: 0;
  top: 0;
  width: 1.1em;
  height: 1.1em;
  border-radius: 0.25em;
  transition: all 0.25s, border-width 0.1s;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border-color: rgba(238, 238, 238, 0) white white #fff0;
  border-width: 0 0.15em 0.15em 0;
  border-radius: 0em;
  transform: rotate(45deg);
}

</style>
    

================================================
FILE: Checkboxes/Bodyhc_afraid-octopus-70.html
================================================
<div class="checkbox-wrapper-16">
  <label class="checkbox-wrapper">
    <input class="checkbox-input" type="checkbox">
    <span class="checkbox-tile">
      <span class="checkbox-icon">
        <svg viewBox="0 0 256 256" fill="currentColor" height="192" width="192" xmlns="http://www.w3.org/2000/svg">
          <rect fill="none" height="256" width="256"></rect>
          <polygon stroke-width="12" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none" points="72 40 184 40 240 104 128 224 16 104 72 40"></polygon>
          <polygon stroke-width="12" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none" points="177.091 104 128 224 78.909 104 128 40 177.091 104"></polygon>
          <line stroke-width="12" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none" y2="104" x2="240" y1="104" x1="16"></line>
        </svg>
      </span>
      <span class="checkbox-label">Sketch</span>
    </span>
  </label>
</div>

<style>
/* From Uiverse.io by Bodyhc - Tags: checkbox, cool checkbox, circle-checkbox */
.checkbox-wrapper-16 *,
  .checkbox-wrapper-16 *:after,
  .checkbox-wrapper-16 *:before {
  box-sizing: border-box;
}

.checkbox-wrapper-16 .checkbox-input {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile {
  border-color: #2260ff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #2260ff;
}

.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile:before {
  transform: scale(1);
  opacity: 1;
  background-color: #2260ff;
  border-color: #2260ff;
}

.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-icon,
  .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-label {
  color: #2260ff;
}

.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile {
  border-color: #2260ff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
}

.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile:before {
  transform: scale(1);
  opacity: 1;
}

.checkbox-wrapper-16 .checkbox-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 7rem;
  min-height: 7rem;
  border-radius: 0.5rem;
  border: 2px solid #b5bfd9;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transition: 0.15s ease;
  cursor: pointer;
  position: relative;
}

.checkbox-wrapper-16 .checkbox-tile:before {
  content: "";
  position: absolute;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #b5bfd9;
  background-color: #fff;
  border-radius: 50%;
  top: 0.25rem;
  left: 0.25rem;
  opacity: 0;
  transform: scale(0);
  transition: 0.25s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.checkbox-wrapper-16 .checkbox-tile:hover {
  border-color: #2260ff;
}

.checkbox-wrapper-16 .checkbox-tile:hover:before {
  transform: scale(1);
  opacity: 1;
}

.checkbox-wrapper-16 .checkbox-icon {
  transition: 0.375s ease;
  color: #494949;
}

.checkbox-wrapper-16 .checkbox-icon svg {
  width: 3rem;
  height: 3rem;
}

.checkbox-wrapper-16 .checkbox-label {
  color: #707070;
  transition: 0.375s ease;
  text-align: center;
}
</style>


================================================
FILE: Checkboxes/Cevorob_good-wolverine-51.html
================================================
<label class="burger" for="burger">
  <input type="checkbox" id="burger">
  <span></span>
  <span></span>
  <span></span>
</label>
<style>
/* From Uiverse.io by Cevorob - Tags: hamburger */
.burger {
  position: relative;
  width: 40px;
  height: 30px;
  background: transparent;
  cursor: pointer;
  display: block;
}

.burger input {
  display: none;
}

.burger span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: black;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.burger span:nth-of-type(1) {
  top: 0px;
  transform-origin: left center;
}

.burger span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
}

.burger span:nth-of-type(3) {
  top: 100%;
  transform-origin: left center;
  transform: translateY(-100%);
}

.burger input:checked ~ span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 0px;
  left: 5px;
}

.burger input:checked ~ span:nth-of-type(2) {
  width: 0%;
  opacity: 0;
}

.burger input:checked ~ span:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 28px;
  left: 5px;
}
</style>


================================================
FILE: Checkboxes/Cornerstone-04_terrible-kangaroo-96.html
================================================
<div class="check_container">
  <input id="checkbox" class="hidden" type="checkbox">
  <label class="checkbox" for="checkbox"></label>
</div>
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: checkbox, circle */
.check_container {
  position: relative;
}

.checkbox {
  position: relative;
  top: 1px;
  width: 30px;
  height: 30px;
  border: 2px solid #212fab;
  border-radius: 50px;
  cursor: pointer;
  display: block;
  transition: all 0.3s linear;
}

.checkbox::after {
  content: "";
  position: absolute;
  top: 25%;
  left: 20%;
  width: 6px;
  height: 12px;
  opacity: 0;
  transform: rotate(45deg) scale(0) translate(-50%, -50%);
  border-right: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  transition: all 0.3s linear;
}

#checkbox:checked ~ .checkbox::after {
  opacity: 1 !important;
  transform: rotate(50deg) scale(1) translate(20%, -25%) !important;
}

#checkbox:checked ~ .checkbox {
  background: #212fab;
  border: none;
}

.hidden {
  display: none !important;
}

</style>


================================================
FILE: Checkboxes/Custyyyy_slimy-impala-48.html
================================================
<input checked="" type="checkbox" id="_checkbox">
<label for="_checkbox">
  <div id="tick_mark"></div>
</label>
<style>
/* From Uiverse.io by Custyyyy - Tags: animation, checkbox */
#_checkbox {
 display: none;
}

label {
 position: absolute;
 top: 50%;
 right: 0;
 left: 0;
 width: 30px;
 height: 30px;
 margin: 0 auto;
 background-color: #f72414;
 transform: translateY(-50%);
 border-radius: 50%;
 cursor: pointer;
 transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow;
 overflow: hidden;
 z-index: 1;
}

label:before {
 content: "";
 position: absolute;
 top: 50%;
 right: 0;
 left: 0;
 width: 24px;
 height: 23px;
 margin: 0 auto;
 background-color: #fff;
 transform: translateY(-50%);
 border-radius: 50%;
 box-shadow: inset 0 7px 10px #ffbeb8;
 transition: 0.2s ease width, 0.2s ease height;
}

label:hover:before {
 transform: translateY(-50%) scale(1.1);
 box-shadow: inset 0 7px 10px #ff9d96;
}

label:active {
 transform: translateY(-50%) scale(0.9);
}

#tick_mark {
 position: absolute;
 top: 0px;
 right: 0;
 left: 0;
 width: 15px;
 height: 18px;
 margin: 0 auto;
 margin-left: 5px;
 transform: rotateZ(-40deg);
}

#tick_mark:before, #tick_mark:after {
 content: "";
 position: absolute;
 background-color: #fff;
 border-radius: 2px;
 opacity: 0;
 transition: 0.2s ease transform, 0.2s ease opacity;
}

#tick_mark:before {
 left: 0;
 bottom: 0;
 width: 4px;
 height: 10px;
 box-shadow: -2px 0 5px rgba(0,0,0,0.23);
 transform: translateY(-68px)
}

#tick_mark:after {
 left: 0;
 bottom: 0;
 width: 100%;
 height: 4px;
 box-shadow: 0 3px 5px rgba(0,0,0,0.23);
 transform: translateX(78px)
}

#_checkbox:checked + label {
 background-color: #07d410;
}

#_checkbox:checked + label:before {
 width: 0;
 height: 0;
}

#_checkbox:checked + label #tick_mark:before, #_checkbox:checked + label #tick_mark:after {
 transform: translate(0);
 opacity: 1;
}
</style>


================================================
FILE: Checkboxes/DaniloMGutavo_stupid-mouse-85.html
================================================
<label class="checkbox-container">
    <input class="custom-checkbox" checked="" type="checkbox">
    <span class="checkmark"></span>
</label>

<style>
/* From Uiverse.io by DaniloMGutavo - Tags: checkbox, cool checkbox, check */
.checkbox-container {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}

.custom-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 4px;
  transition: background-color 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.custom-checkbox:checked ~ .checkmark {
  background-color: #2196F3;
  box-shadow: 0 3px 7px rgba(33, 150, 243, 0.3);
}

.custom-checkbox:checked ~ .checkmark:after {
  display: block;
}

@keyframes checkAnim {
  0% {
    height: 0;
  }

  100% {
    height: 10px;
  }
}

.custom-checkbox:checked ~ .checkmark:after {
  animation: checkAnim 0.2s forwards;
}

</style>


================================================
FILE: Checkboxes/Dev-MdTuhin_grumpy-panda-46.html
================================================
<div class="checkbox-wrapper-10">
  <input checked="" type="checkbox" id="cb5" class="tgl tgl-flip">
  <label for="cb5" data-tg-on="Yeah!" data-tg-off="Nope" class="tgl-btn"></label>
</div>

<style>
/* From Uiverse.io by Dev-MdTuhin - Tags: checkbox */
.checkbox-wrapper-10 .tgl {
  display: none;
}

.checkbox-wrapper-10 .tgl,
  .checkbox-wrapper-10 .tgl:after,
  .checkbox-wrapper-10 .tgl:before,
  .checkbox-wrapper-10 .tgl *,
  .checkbox-wrapper-10 .tgl *:after,
  .checkbox-wrapper-10 .tgl *:before,
  .checkbox-wrapper-10 .tgl + .tgl-btn {
  box-sizing: border-box;
}

.checkbox-wrapper-10 .tgl::-moz-selection,
  .checkbox-wrapper-10 .tgl:after::-moz-selection,
  .checkbox-wrapper-10 .tgl:before::-moz-selection,
  .checkbox-wrapper-10 .tgl *::-moz-selection,
  .checkbox-wrapper-10 .tgl *:after::-moz-selection,
  .checkbox-wrapper-10 .tgl *:before::-moz-selection,
  .checkbox-wrapper-10 .tgl + .tgl-btn::-moz-selection,
  .checkbox-wrapper-10 .tgl::selection,
  .checkbox-wrapper-10 .tgl:after::selection,
  .checkbox-wrapper-10 .tgl:before::selection,
  .checkbox-wrapper-10 .tgl *::selection,
  .checkbox-wrapper-10 .tgl *:after::selection,
  .checkbox-wrapper-10 .tgl *:before::selection,
  .checkbox-wrapper-10 .tgl + .tgl-btn::selection {
  background: none;
}

.checkbox-wrapper-10 .tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:after,
  .checkbox-wrapper-10 .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:after {
  left: 0;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:before {
  display: none;
}

.checkbox-wrapper-10 .tgl:checked + .tgl-btn:after {
  left: 50%;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn {
  padding: 2px;
  transition: all 0.2s ease;
  font-family: sans-serif;
  perspective: 100px;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after,
  .checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
  display: inline-block;
  transition: all 0.4s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 4px;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after {
  content: attr(data-tg-on);
  background: #02C66F;
  transform: rotateY(-180deg);
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
  background: #FF3A19;
  content: attr(data-tg-off);
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:active:before {
  transform: rotateY(-20deg);
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:before {
  transform: rotateY(180deg);
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:after {
  transform: rotateY(0);
  left: 0;
  background: #7FC6A6;
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:active:after {
  transform: rotateY(20deg);
}
</style>


================================================
FILE: Checkboxes/EddyBel_smart-insect-43.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by EddyBel - Tags: gradient, checkbox */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

.container::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: blur(5px);
  background-color: #b899ff;
  background-image: radial-gradient(at 6% 13%, hsla(322,81%,60%,1) 0px, transparent 50%),
radial-gradient(at 9% 59%, hsla(209,65%,71%,1) 0px, transparent 50%),
radial-gradient(at 39% 16%, hsla(325,93%,79%,1) 0px, transparent 50%);
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 2em;
  width: 2em;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  height: 2em;
  width: 2em;
  border-radius: 50%;
  position: relative;
}

.container input:checked ~ .checkmark::before {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 65%;
  height: 65%;
  content: "";
  border-radius: 50%;
  background-color: #ff99f0;
  background-image: radial-gradient(at 86% 29%, hsla(277,65%,76%,1) 0px, transparent 50%),
  radial-gradient(at 13% 20%, hsla(54,73%,71%,1) 0px, transparent 50%),
  radial-gradient(at 76% 0%, hsla(145,64%,69%,1) 0px, transparent 50%);
  animation: animation__checked 600ms normal;
}

@keyframes animation__checked {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    opacity: 100;
    transform: scale(1);
  }
}
</style>


================================================
FILE: Checkboxes/G4b413l_smooth-duck-62.html
================================================
<label>
    <input checked="" type="checkbox">
    <span class="checkbox"></span>
</label>
<style>
/* From Uiverse.io by G4b413l - Tags: checkbox */
label {
  display: block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

input[type='checkbox'] {
  position: absolute;
  transform: scale(0);
}

input[type='checkbox']:checked ~ .checkbox {
  transform: rotate(45deg);
  width: 14px;
  margin-left: 5px;
  border-color: #24c78e;
  border-width: 5px;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0;
}

.checkbox {
  display: block;
  width: inherit;
  height: inherit;
  border: solid 3px #2a2a2ab7;
  border-radius: 6px;
  transition: all 0.375s;
}
</style>


================================================
FILE: Checkboxes/Galahhad_mighty-warthog-42.html
================================================
<label class="ui-bookmark">
    <input type="checkbox">
    <div class="bookmark">
      <svg viewBox="0 0 32 32">
        <g>
          <path d="M27 4v27a1 1 0 0 1-1.625.781L16 24.281l-9.375 7.5A1 1 0 0 1 5 31V4a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4z"></path>
        </g>
      </svg>
    </div>
  </label>
<style>
/* From Uiverse.io by Galahhad - Tags: checkbox, animated, bookmark */
.ui-bookmark {
  --icon-size: 24px;
  --icon-secondary-color: rgb(77, 77, 77);
  --icon-hover-color: rgb(97, 97, 97);
  --icon-primary-color: gold;
  --icon-circle-border: 1px solid var(--icon-primary-color);
  --icon-circle-size: 35px;
  --icon-anmt-duration: 0.3s;
}

.ui-bookmark input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
}

.ui-bookmark .bookmark {
  width: var(--icon-size);
  height: auto;
  fill: var(--icon-secondary-color);
  cursor: pointer;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
}

.bookmark::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  -webkit-box-shadow: 0 30px 0 -4px var(--icon-primary-color),
    30px 0 0 -4px var(--icon-primary-color),
    0 -30px 0 -4px var(--icon-primary-color),
    -30px 0 0 -4px var(--icon-primary-color),
    -22px 22px 0 -4px var(--icon-primary-color),
    -22px -22px 0 -4px var(--icon-primary-color),
    22px -22px 0 -4px var(--icon-primary-color),
    22px 22px 0 -4px var(--icon-primary-color);
  box-shadow: 0 30px 0 -4px var(--icon-primary-color),
    30px 0 0 -4px var(--icon-primary-color),
    0 -30px 0 -4px var(--icon-primary-color),
    -30px 0 0 -4px var(--icon-primary-color),
    -22px 22px 0 -4px var(--icon-primary-color),
    -22px -22px 0 -4px var(--icon-primary-color),
    22px -22px 0 -4px var(--icon-primary-color),
    22px 22px 0 -4px var(--icon-primary-color);
  border-radius: 50%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.bookmark::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: var(--icon-circle-border);
  opacity: 0;
}

/* actions */

.ui-bookmark:hover .bookmark {
  fill: var(--icon-hover-color);
}

.ui-bookmark input:checked + .bookmark::after {
  -webkit-animation: circles var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation: circles var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  -webkit-animation-delay: var(--icon-anmt-duration);
  animation-delay: var(--icon-anmt-duration);
}

.ui-bookmark input:checked + .bookmark {
  fill: var(--icon-primary-color);
  -webkit-animation: bookmark var(--icon-anmt-duration) forwards;
  animation: bookmark var(--icon-anmt-duration) forwards;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.ui-bookmark input:checked + .bookmark::before {
  -webkit-animation: circle var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation: circle var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  -webkit-animation-delay: var(--icon-anmt-duration);
  animation-delay: var(--icon-anmt-duration);
}

@-webkit-keyframes bookmark {
  50% {
    -webkit-transform: scaleY(0.6);
    transform: scaleY(0.6);
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@keyframes bookmark {
  50% {
    -webkit-transform: scaleY(0.6);
    transform: scaleY(0.6);
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@-webkit-keyframes circle {
  from {
    width: 0;
    height: 0;
    opacity: 0;
  }

  90% {
    width: var(--icon-circle-size);
    height: var(--icon-circle-size);
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes circle {
  from {
    width: 0;
    height: 0;
    opacity: 0;
  }

  90% {
    width: var(--icon-circle-size);
    height: var(--icon-circle-size);
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes circles {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes circles {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
}
</style>


================================================
FILE: Checkboxes/Galahhad_old-falcon-43.html
================================================
<label class="popup">
  <input type="checkbox">
  <div class="burger" tabindex="0">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <nav class="popup-window">
    <legend>Actions</legend>
    <ul>
      <li>
        <button>
          <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
            <circle r="4" cy="7" cx="9"></circle>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
          </svg>
          <span>Colloborators</span>
        </button>
      </li>
      <li>
        <button>
          <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
          </svg>
          <span>Magic Link</span>
        </button>
      </li>
      <hr>
      <li>
        <button>
          <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
            <rect ry="2" rx="2" height="13" width="13" y="9" x="9"></rect>
            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
          </svg>
          <span>Clone</span>
        </button>
      </li>
      <li>
        <button>
          <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
            <polygon points="16 3 21 8 8 21 3 21 3 16 16 3"></polygon>
          </svg>
          <span>Edit</span>
        </button>
      </li>
      <hr>
      <li>
        <button>
          <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
            <line y2="18" x2="6" y1="6" x1="18"></line>
            <line y2="18" x2="18" y1="6" x1="6"></line>
          </svg>
          <span>Delete</span>
        </button>
      </li>
    </ul>
  </nav>
</label>
<style>
/* From Uiverse.io by Galahhad - Source: https://mockapi.io/ - Tags: checkbox, dropdown */
/* The design is inspired from the mockapi.io */

.popup {
  --burger-line-width: 1.125em;
  --burger-line-height: 0.125em;
  --burger-offset: 0.625em;
  --burger-bg: rgba(0, 0, 0, .15);
  --burger-color: #333;
  --burger-line-border-radius: 0.1875em;
  --burger-diameter: 2.125em;
  --burger-btn-border-radius: calc(var(--burger-diameter) / 2);
  --burger-line-transition: .3s;
  --burger-transition: all .1s ease-in-out;
  --burger-hover-scale: 1.1;
  --burger-active-scale: .95;
  --burger-enable-outline-color: var(--burger-bg);
  --burger-enable-outline-width: 0.125em;
  --burger-enable-outline-offset: var(--burger-enable-outline-width);
  /* nav */
  --nav-padding-x: 0.25em;
  --nav-padding-y: 0.625em;
  --nav-border-radius: 0.375em;
  --nav-border-color: #ccc;
  --nav-border-width: 0.0625em;
  --nav-shadow-color: rgba(0, 0, 0, .2);
  --nav-shadow-width: 0 1px 5px;
  --nav-bg: #eee;
  --nav-font-family: Menlo, Roboto Mono, monospace;
  --nav-default-scale: .8;
  --nav-active-scale: 1;
  --nav-position-left: 0;
  --nav-position-right: unset;
  /* if you want to change sides just switch one property */
  /* from properties to "unset" and the other to 0 */
  /* title */
  --nav-title-size: 0.625em;
  --nav-title-color: #777;
  --nav-title-padding-x: 1rem;
  --nav-title-padding-y: 0.25em;
  /* nav button */
  --nav-button-padding-x: 1rem;
  --nav-button-padding-y: 0.375em;
  --nav-button-border-radius: 0.375em;
  --nav-button-font-size: 12px;
  --nav-button-hover-bg: #6495ed;
  --nav-button-hover-text-color: #fff;
  --nav-button-distance: 0.875em;
  /* underline */
  --underline-border-width: 0.0625em;
  --underline-border-color: #ccc;
  --underline-margin-y: 0.3125em;
}

/* popup settings 👆 */

.popup {
  display: inline-block;
  text-rendering: optimizeLegibility;
  position: relative;
}

.popup input {
  display: none;
}

.burger {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background: var(--burger-bg);
  width: var(--burger-diameter);
  height: var(--burger-diameter);
  border-radius: var(--burger-btn-border-radius);
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: var(--burger-transition);
  outline: var(--burger-enable-outline-width) solid transparent;
  outline-offset: 0;
}

.burger span {
  height: var(--burger-line-height);
  width: var(--burger-line-width);
  background: var(--burger-color);
  border-radius: var(--burger-line-border-radius);
  position: absolute;
  transition: var(--burger-line-transition);
}

.burger span:nth-child(1) {
  top: var(--burger-offset);
}

.burger span:nth-child(2) {
  bottom: var(--burger-offset);
}

.burger span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%);
}

.popup-window {
  transform: scale(var(--nav-default-scale));
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding: var(--nav-padding-y) var(--nav-padding-x);
  background: var(--nav-bg);
  font-family: var(--nav-font-family);
  color: var(--nav-text-color);
  border-radius: var(--nav-border-radius);
  box-shadow: var(--nav-shadow-width) var(--nav-shadow-color);
  border: var(--nav-border-width) solid var(--nav-border-color);
  top: calc(var(--burger-diameter) + var(--burger-enable-outline-width) + var(--burger-enable-outline-offset));
  left: var(--nav-position-left);
  right: var(--nav-position-right);
  transition: var(--burger-transition);
}

.popup-window legend {
  padding: var(--nav-title-padding-y) var(--nav-title-padding-x);
  margin: 0;
  color: var(--nav-title-color);
  font-size: var(--nav-title-size);
  text-transform: uppercase;
}

.popup-window ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.popup-window ul button {
  outline: none;
  width: 100%;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  color: var(--burger-color);
  font-size: var(--nav-button-font-size);
  padding: var(--nav-button-padding-y) var(--nav-button-padding-x);
  white-space: nowrap;
  border-radius: var(--nav-button-border-radius);
  cursor: pointer;
  column-gap: var(--nav-button-distance);
}

.popup-window ul li:nth-child(1) svg,
.popup-window ul li:nth-child(2) svg {
  color: cornflowerblue;
}

.popup-window ul li:nth-child(4) svg,
.popup-window ul li:nth-child(5) svg {
  color: rgb(153, 153, 153);
}

.popup-window ul li:nth-child(7) svg {
  color: red;
}

.popup-window hr {
  margin: var(--underline-margin-y) 0;
  border: none;
  border-bottom: var(--underline-border-width) solid var(--underline-border-color);
}

/* actions */

.popup-window ul button:hover,
.popup-window ul button:focus-visible,
.popup-window ul button:hover svg,
.popup-window ul button:focus-visible svg {
  color: var(--nav-button-hover-text-color);
  background: var(--nav-button-hover-bg);
}

.burger:hover {
  transform: scale(var(--burger-hover-scale));
}

.burger:active {
  transform: scale(var(--burger-active-scale));
}

.burger:focus:not(:hover) {
  outline-color: var(--burger-enable-outline-color);
  outline-offset: var(--burger-enable-outline-offset);
}

.popup input:checked+.burger span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.popup input:checked+.burger span:nth-child(2) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

.popup input:checked+.burger span:nth-child(3) {
  transform: translateX(calc(var(--burger-diameter) * -1 - var(--burger-line-width)));
}

.popup input:checked~nav {
  transform: scale(var(--nav-active-scale));
  visibility: visible;
  opacity: 1;
}
</style>


================================================
FILE: Checkboxes/Galahhad_sweet-ape-100.html
================================================
<input type="checkbox" class="ui-checkbox">
<style>
/* From Uiverse.io by Galahhad - Source: https://ant.design/components/checkbox - Tags: checkbox, click animation, antd */
/* checkbox settings 👇 */

.ui-checkbox {
  --primary-color: #1677ff;
  --secondary-color: #fff;
  --primary-hover-color: #4096ff;
  /* checkbox */
  --checkbox-diameter: 20px;
  --checkbox-border-radius: 5px;
  --checkbox-border-color: #d9d9d9;
  --checkbox-border-width: 1px;
  --checkbox-border-style: solid;
  /* checkmark */
  --checkmark-size: 1.2;
}

.ui-checkbox, 
.ui-checkbox *, 
.ui-checkbox *::before, 
.ui-checkbox *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ui-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--checkbox-diameter);
  height: var(--checkbox-diameter);
  border-radius: var(--checkbox-border-radius);
  background: var(--secondary-color);
  border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}

.ui-checkbox::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  border-radius: inherit;
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}

.ui-checkbox::before {
  top: 40%;
  left: 50%;
  content: "";
  position: absolute;
  width: 4px;
  height: 7px;
  border-right: 2px solid var(--secondary-color);
  border-bottom: 2px solid var(--secondary-color);
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
  -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
  -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
}

/* actions */

.ui-checkbox:hover {
  border-color: var(--primary-color);
}

.ui-checkbox:checked {
  background: var(--primary-color);
  border-color: transparent;
}

.ui-checkbox:checked::before {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

.ui-checkbox:active:not(:checked)::after {
  -webkit-transition: none;
  -o-transition: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  transition: none;
  opacity: 1;
}
</style>


================================================
FILE: Checkboxes/Gautammsharma_massive-rabbit-40.html
================================================
<label class="material-checkbox">
        <input type="checkbox">
        <span class="checkmark"></span>
        Checkbox Label
      </label>
<style>
/* From Uiverse.io by Gautammsharma - Tags: simple, material design, minimalist, checkbox, google, clean */
.material-checkbox {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #777777;
  cursor: pointer;
}

.material-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkmark {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  border: 2px solid #454B00;
  border-radius: 4px;
  transition: all 0.3s;
}

.material-checkbox input[type="checkbox"]:checked ~ .checkmark {
  background-color: #2F3300;
  border-color: #454B00;
}

.material-checkbox input[type="checkbox"]:checked ~ .checkmark:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 4px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.material-checkbox input[type="checkbox"]:focus ~ .checkmark {
  box-shadow: 0 0 0 2px #dfec5065;
}

.material-checkbox:hover input[type="checkbox"] ~ .checkmark {
  border-color: #C3CF34;
}

.material-checkbox input[type="checkbox"]:disabled ~ .checkmark {
  opacity: 0.5;
  cursor: not-allowed;
}

.material-checkbox input[type="checkbox"]:disabled ~ .checkmark:hover {
  border-color: #4d4d4d;
}

</style>


================================================
FILE: Checkboxes/IndexOC_moody-mouse-53.html
================================================
<label class="container">
  <input checked="checked" type="checkbox" />
  <div class="checkmark"></div>
</label>

<style>
/* From Uiverse.io by IndexOC  - Tags: minimalist, black, checkbox, box-shadow */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: #ccc;
  border-radius: 0.25em;
  box-shadow: 0.1em 0.1em 0.1em 0.1em rgb(41, 40, 40) inset;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: rgb(41, 40, 40);
  border-radius: 0.25em;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

</style>
    

================================================
FILE: Checkboxes/JOBOYA_mean-dolphin-53.html
================================================
<label class="checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
  <span class="text">Agree</span>
</label>

<style>
/* From Uiverse.io by JOBOYA - Tags: checkbox */
.checkbox {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
  user-select: none;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  border: 2px solid #666;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.checkbox:hover .checkmark {
  transform: translateX(-20px) translateY(-2px) rotate(10deg);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.checkbox input:checked ~ .checkmark {
  background-color: #666;
  border-color: #666;
}

.checkbox input:checked ~ .checkmark:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 14px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.text {
  margin-left: 40px;
  display: inline-block;
  transition: all 0.2s ease-in-out;
}

</style>


================================================
FILE: Checkboxes/Jack17432_shaggy-earwig-15.html
================================================
<label for="check" class="menuButton">
    <input id="check" type="checkbox">
    <span class="top"></span>
    <span class="mid"></span>
    <span class="bot"></span>
</label>
<style>
/* From Uiverse.io by Jack17432 - Tags: glassmorphism, checkbox, hamburger, shadow */
/* 
Button insperation by @ke1221
Menu icon transofmation insperation by @Ali-Tahmazi99
*/
.menuButton {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 13%;
  color: #090909;
  width: 3.5em;
  height: 3.5em;
  border-radius: 0.5em;
  background: #e8e8e8;
  border: 1px solid #e8e8e8;
  transition: all .3s;
  box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

.menuButton:hover {
  border: 1px solid white;
}

.menuButton:active {
  color: #666;
  box-shadow: inset 4px 4px 12px #c5c5c5,
             inset -4px -4px 12px #ffffff;
}

input[type = "checkbox"] {
  -webkit-appearance: none;
  display: none;
  visibility: hidden;
}

.menuButton span {
  width: 30px;
  height: 4px;
  background: #131313;
  border-radius: 100px;
  transition: 0.3s ease;
}

input[type]:checked ~ span.top {
  transform: translateY(290%)rotate(45deg);
  width: 40px;
}

input[type]:checked ~ span.bot {
  transform: translateY(-270%) rotate(-45deg);
  width: 40px;
  box-shadow: 0 0 10px #495057;
}

input[type]:checked ~ span.mid {
  transform: translateX(-20px);
  opacity: 0;
}
</style>


================================================
FILE: Checkboxes/Javierrocadev_foolish-wasp-20.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: simple, green, hover, checkbox, hover effect, tailwind -->
<input
  type="checkbox"
  id="react-option"
  value=""
  class="hidden peer"
  required=""
/>
<label
  for="react-option"
  class="flex items-center justify-center w-10 h-10 [box-shadow:1px_1px_0px_2px_#1e1e1e] duration-300 hover:[box-shadow:1px_1px_0px_1px_#000] hover:translate-y-0.5 hover:translate-x-0.5 bg-neutral-700 border-2 border-gray-800 rounded-full cursor-pointer text-neutral-50 peer-checked:[box-shadow:1px_1px_0px_2px_#28AB6B] peer-checked:border-none peer-checked:hover:[box-shadow:1px_1px_0px_1px_#28AB6B] peer-checked:bg-neutral-50 peer-checked:text-gray-800"
>
  <span class="text-lg font-semibold">5</span>
</label>


    

================================================
FILE: Checkboxes/Javierrocadev_itchy-shrimp-52.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: green, gradient, checkbox, rounded, blur filter, tailwind -->
<label class="cursor-pointer duration-300 relative overflow-hidden w-12 h-12 flex justify-center items-center border rounded-lg bg-gray-50 before:absolute before:w-8 before:h-8 before:content[''] before:right-0 before:bg-violet-500 before:rounded-full before:blur-sm  after:absolute after:z-10 after:w-4 after:h-4 after:content['']  after:bg-rose-300 after:left-1 after:bottom-1 after:rounded-full after:blur-sm">
  <input class="peer  hidden" type="checkbox">
  <div class="w-8 h-8  rounded-md opacity-0 peer-checked:opacity-100 bg-gradient-to-tr from-emerald-800 via-emerald-700 to-emerald-500 scale-0 transition-all z-20 duration-300  peer-checked:transition-all rounded-md top-2 left-2 peer-checked:scale-100 peer-checked:duration-300 peer-checked:bg-gradient-to-tr from-emerald-800 via-emerald-700 to-emerald-500"></div>
</label>




================================================
FILE: Checkboxes/Javierrocadev_selfish-mule-45.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: simple, icon, hover, checkbox, dark, light, light&dark, tailwind -->
<input
  type="checkbox"
  id="react-option"
  value=""
  class="hidden peer"
  required=""
/>

<label
  for="react-option"
  class="flex z-10 items-center peer relative justify-center w-14 h-14 shadow-lg duration-300 [box-shadow:1px_1px_0px_1px_#eab92d] border-2 border-gray-800 peer-checked:border-2 peer-checked:border-gray-800 rounded-lg cursor-pointer text-neutral-50 peer-checked:[box-shadow:1px_1px_0px_1px_#075985] peer-checked:hover:[box-shadow:1px_1px_0px_1px_#1e1e1e] hover:[box-shadow:1px_1px_0px_1px_#1e1e1e]"
>
</label>
<svg
  class="absolute stroke-sky-800 w-12 h-23 duration-300 peer-checked:opacity-100 opacity-0"
  height="100"
  preserveAspectRatio="xMidYMid meet"
  viewBox="0 0 100 100"
  width="100"
  x="0"
  xmlns="http://www.w3.org/2000/svg"
  y="0"
>
  <path
    class="svg-stroke-primary"
    d="M82.1,61.2a31.9,31.9,0,0,1-12.4,2.4A33.3,33.3,0,0,1,36.4,30.3a31.9,31.9,0,0,1,2.4-12.4A33.3,33.3,0,1,0,82.1,61.2Z"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="8"
  ></path>
</svg>
<svg
  class="absolute stroke-yellow-500 w-12 h-23 duration-300 peer-checked:opacity-0 opacity-100"
  height="100"
  preserveAspectRatio="xMidYMid meet"
  viewBox="0 0 100 100"
  width="100"
  x="0"
  xmlns="http://www.w3.org/2000/svg"
  y="0"
>
  <path
    class="svg-stroke-primary"
    d="M50,18v3.6m0,56.8V82M82,50H78.4M21.6,50H18M72.6,72.6l-2.5-2.5M29.9,29.9l-2.5-2.5m45.2,0-2.5,2.5M29.9,70.1l-2.5,2.5M64.2,50A14.2,14.2,0,1,1,50,35.8,14.3,14.3,0,0,1,64.2,50Z"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="8"
  ></path>
</svg>


    

================================================
FILE: Checkboxes/JaydipPrajapati1910_odd-rat-12.html
================================================
<label class="theme">
  <input class="input" checked="checked" type="checkbox">
 <svg fill="red" class="icon wifi-off" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path d="M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.448 8.448 0 0 1 3.51-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.462 8.462 0 0 0-1.98-.932zM8 10l.933-.933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 5.478 0 0 0 8 10zm4.905-4.905.747-.747c.59.3 1.153.645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07zM9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z"></path>
</svg>
<svg class="icon wifi-on" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
  <path d="M15.384 6.115a.485.485 0 0 0-.047-.736A12.444 12.444 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c2.507 0 4.827.802 6.716 2.164.205.148.49.13.668-.049z"></path>
  <path d="M13.229 8.271a.482.482 0 0 0-.063-.745A9.455 9.455 0 0 0 8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065A8.46 8.46 0 0 1 8 7a8.46 8.46 0 0 1 4.576 1.336c.206.132.48.108.653-.065zm-2.183 2.183c.226-.226.185-.605-.1-.75A6.473 6.473 0 0 0 8 9c-1.06 0-2.062.254-2.946.704-.285.145-.326.524-.1.75l.015.015c.16.16.407.19.611.09A5.478 5.478 0 0 1 8 10c.868 0 1.69.201 2.42.56.203.1.45.07.61-.091l.016-.015zM9.06 12.44c.196-.196.198-.52-.04-.66A1.99 1.99 0 0 0 8 11.5a1.99 1.99 0 0 0-1.02.28c-.238.14-.236.464-.04.66l.706.706a.5.5 0 0 0 .707 0l.707-.707z"></path>
</svg>
</label>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: checkbox, wifi, switcher, checkmark */
.theme {
  --bg-color: rgb(24, 19, 19);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: var(--bg-color);
  border-radius: 100%;
  box-shadow: 0px 0px 5px 7px rgba(0, 0, 0, 0.199);
  transition: all .6s ease;
}

.input {
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0;
}

.icon {
  position: absolute;
  top: calc(50% -13px);
  left: calc(50% -13px);
  width: 26px;
  height: 26px;
}

.wifi-on {
  fill: lightgreen;
}

.wifi-off {
  display: none;
}

.input:checked ~ .wifi-off {
  display: block;
}

.input:checked ~ .wifi-on {
  display: none;
}

.theme:active {
  border-radius: 100%;
  box-shadow: inset 0px 0px 10px 0px rgb(240, 237, 237);
  transform: translate(3px, 3px);
}
</style>


================================================
FILE: Checkboxes/JkHuger_horrible-lion-90.html
================================================
<input id="toggle-heart" type="checkbox"><label for="toggle-heart" aria-label="like">❤</label>
<style>
/* From Uiverse.io by JkHuger - Tags: checkbox */
[id='toggle-heart'] {
  display: none;
}

[id='toggle-heart']:checked + label {
  color: #e2264d;
  filter: none;
  will-change: font-size;
  animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}

[id='toggle-heart']:checked + label:before, [id='toggle-heart']:checked + label:after {
  animation: inherit;
  animation-timing-function: ease-out;
}

[id='toggle-heart']:checked + label:before {
  will-change: transform, border-width, border-color;
  animation-name: bubble;
}

[id='toggle-heart']:checked + label:after {
  will-change: opacity, box-shadow;
  animation-name: sparkles;
}

[id='toggle-heart']:focus + label {
  text-shadow: 0 0 3px white, 0 1px 1px white, 0 -1px 1px white, 1px 0 1px white, -1px 0 1px white;
}

[for='toggle-heart'] {
  align-self: center;
  position: relative;
  color: #888;
  font-size: 2em;
  filter: grayscale(1);
  user-select: none;
  cursor: pointer;
}

[for='toggle-heart']:before, [for='toggle-heart']:after {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  content: '';
}

[for='toggle-heart']:before {
  box-sizing: border-box;
  margin: -2.25rem;
  border: solid 2.25rem #e2264d;
  width: 4.5rem;
  height: 4.5rem;
  transform: scale(0);
}

[for='toggle-heart']:after {
  margin: -0.1875rem;
  width: 0.375rem;
  height: 0.375rem;
  box-shadow: 2.8125rem*cos(-90deg)0.375rem*cos(-30deg) 2.8125rem*sin(-90deg)0.375rem*sin(-30deg) 0 -0.1875rem #ff8080, 2.8125rem*cos(-90deg)0.375rem*cos(150deg) 2.8125rem*sin(-90deg)0.375rem*sin(150deg) 0 -0.1875rem #ffed80, 2.8125rem*cos(-38.5714285714deg)0.375rem*cos(21.4285714286deg) 2.8125rem*sin(-38.5714285714deg)0.375rem*sin(21.4285714286deg) 0 -0.1875rem #ffed80, 2.8125rem*cos(-38.5714285714deg)0.375rem*cos(201.4285714286deg) 2.8125rem*sin(-38.5714285714deg)0.375rem*sin(201.4285714286deg) 0 -0.1875rem #a4ff80, 2.8125rem*cos(12.8571428571deg)0.375rem*cos(72.8571428571deg) 2.8125rem*sin(12.8571428571deg)0.375rem*sin(72.8571428571deg) 0 -0.1875rem #a4ff80, 2.8125rem*cos(12.8571428571deg)0.375rem*cos(252.8571428571deg) 2.8125rem*sin(12.8571428571deg)0.375rem*sin(252.8571428571deg) 0 -0.1875rem #80ffc8, 2.8125rem*cos(64.2857142857deg)0.375rem*cos(124.2857142857deg) 2.8125rem*sin(64.2857142857deg)0.375rem*sin(124.2857142857deg) 0 -0.1875rem #80ffc8, 2.8125rem*cos(64.2857142857deg)0.375rem*cos(304.2857142857deg) 2.8125rem*sin(64.2857142857deg)0.375rem*sin(304.2857142857deg) 0 -0.1875rem #80c8ff, 2.8125rem*cos(115.7142857143deg)0.375rem*cos(175.7142857143deg) 2.8125rem*sin(115.7142857143deg)0.375rem*sin(175.7142857143deg) 0 -0.1875rem #80c8ff, 2.8125rem*cos(115.7142857143deg)0.375rem*cos(355.7142857143deg) 2.8125rem*sin(115.7142857143deg)0.375rem*sin(355.7142857143deg) 0 -0.1875rem #a480ff, 2.8125rem*cos(167.1428571429deg)0.375rem*cos(227.1428571429deg) 2.8125rem*sin(167.1428571429deg)0.375rem*sin(227.1428571429deg) 0 -0.1875rem #a480ff, 2.8125rem*cos(167.1428571429deg)0.375rem*cos(407.1428571429deg) 2.8125rem*sin(167.1428571429deg)0.375rem*sin(407.1428571429deg) 0 -0.1875rem #ff80ed, 2.8125rem*cos(218.5714285714deg)0.375rem*cos(278.5714285714deg) 2.8125rem*sin(218.5714285714deg)0.375rem*sin(278.5714285714deg) 0 -0.1875rem #ff80ed, 2.8125rem*cos(218.5714285714deg)0.375rem*cos(458.5714285714deg) 2.8125rem*sin(218.5714285714deg)0.375rem*sin(458.5714285714deg) 0 -0.1875rem #ff8080;
}

@keyframes heart {
  0%, 17.5% {
    font-size: 0;
  }
}

@keyframes bubble {
  15% {
    transform: scale(1);
    border-color: #cc8ef5;
    border-width: 2.25rem;
  }

  30%, 100% {
    transform: scale(1);
    border-color: #cc8ef5;
    border-width: 0;
  }
}

@keyframes sparkles {
  0%, 20% {
    opacity: 0;
  }

  25% {
    opacity: 1;
    box-shadow: 2.25rem*cos(-90deg)0.375rem*cos(-30deg) 2.25rem*sin(-90deg)0.375rem*sin(-30deg) 0 0rem #ff8080, 2.25rem*cos(-90deg)0.375rem*cos(150deg) 2.25rem*sin(-90deg)0.375rem*sin(150deg) 0 0rem #ffed80, 2.25rem*cos(-38.5714285714deg)0.375rem*cos(21.4285714286deg) 2.25rem*sin(-38.5714285714deg)0.375rem*sin(21.4285714286deg) 0 0rem #ffed80, 2.25rem*cos(-38.5714285714deg)0.375rem*cos(201.4285714286deg) 2.25rem*sin(-38.5714285714deg)0.375rem*sin(201.4285714286deg) 0 0rem #a4ff80, 2.25rem*cos(12.8571428571deg)0.375rem*cos(72.8571428571deg) 2.25rem*sin(12.8571428571deg)0.375rem*sin(72.8571428571deg) 0 0rem #a4ff80, 2.25rem*cos(12.8571428571deg)0.375rem*cos(252.8571428571deg) 2.25rem*sin(12.8571428571deg)0.375rem*sin(252.8571428571deg) 0 0rem #80ffc8, 2.25rem*cos(64.2857142857deg)0.375rem*cos(124.2857142857deg) 2.25rem*sin(64.2857142857deg)0.375rem*sin(124.2857142857deg) 0 0rem #80ffc8, 2.25rem*cos(64.2857142857deg)0.375rem*cos(304.2857142857deg) 2.25rem*sin(64.2857142857deg)0.375rem*sin(304.2857142857deg) 0 0rem #80c8ff, 2.25rem*cos(115.7142857143deg)0.375rem*cos(175.7142857143deg) 2.25rem*sin(115.7142857143deg)0.375rem*sin(175.7142857143deg) 0 0rem #80c8ff, 2.25rem*cos(115.7142857143deg)0.375rem*cos(355.7142857143deg) 2.25rem*sin(115.7142857143deg)0.375rem*sin(355.7142857143deg) 0 0rem #a480ff, 2.25rem*cos(167.1428571429deg)0.375rem*cos(227.1428571429deg) 2.25rem*sin(167.1428571429deg)0.375rem*sin(227.1428571429deg) 0 0rem #a480ff, 2.25rem*cos(167.1428571429deg)0.375rem*cos(407.1428571429deg) 2.25rem*sin(167.1428571429deg)0.375rem*sin(407.1428571429deg) 0 0rem #ff80ed, 2.25rem*cos(218.5714285714deg)0.375rem*cos(278.5714285714deg) 2.25rem*sin(218.5714285714deg)0.375rem*sin(278.5714285714deg) 0 0rem #ff80ed, 2.25rem*cos(218.5714285714deg)0.375rem*cos(458.5714285714deg) 2.25rem*sin(218.5714285714deg)0.375rem*sin(458.5714285714deg) 0 0rem #ff8080;
  }
}

</style>


================================================
FILE: Checkboxes/JkHuger_tidy-rat-84.html
================================================
<label class="checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<style>
/* From Uiverse.io by JkHuger - Tags: checkbox */
.checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.checkbox input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

.checkbox .checkmark {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.checkbox input[type="checkbox"]:checked + .checkmark {
  background-color: #0078d4;
  border-color: #0078d4;
}

.checkbox input[type="checkbox"]:checked + .checkmark:after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.2s ease;
  transform: scale(1);
}

.checkbox .checkmark:after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: transparent;
  transform: scale(0);
  transition: transform 0.2s ease;
}

</style>


================================================
FILE: Checkboxes/JkHuger_warm-goose-52.html
================================================
<div class="wrapper">
  <input class="hidden-trigger" id="toogle" type="checkbox">
  <label class="circle" for="toogle">
<svg viewBox="0 0 48 48" version="1.1" xml:space="preserve" height="48" width="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="svg">
    <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAbElEQVR4Ae3XwQnFQAiE4eVVsGAP1mkPFjwvQvYSWCQYCYGZv4Dv5MGB5ghcIiDQI+kCftCzNsAR8y5gYu2rwCBAgMBTgEC3rek2yQEtAZoDjso8AyaKexmIDJUZD40AAQIE0gwx449GgMC9/t0b7GTsa7J+AAAAAElFTkSuQmCC" height="48" width="48"></image>
  </svg>
  </label>
  
  <div class="subs">
    <button class="sub-circle">
      <input class="hidden-sub-trigger" id="sub1" type="radio" name="sub-circle" value="1">
      <label for="sub1"></label>
    </button>
    <button class="sub-circle">
      <input class="hidden-sub-trigger" id="sub2" type="radio" name="sub-circle" value="1">
      <label for="sub2"></label>
    </button>
    <button class="sub-circle">
      <input class="hidden-sub-trigger" id="sub3" type="radio" name="sub-circle" value="1">
      <label for="sub3"></label>
    </button>
    <button class="sub-circle">
      <input class="hidden-sub-trigger" id="sub4" type="radio" name="sub-circle" value="1">
      <label for="sub4"></label>
    </button>
    <button class="sub-circle">
      <input class="hidden-sub-trigger" id="sub5" type="radio" name="sub-circle" value="1">
      <label for="sub5"></label>
    </button>
    <button class="sub-circle">
      <input class="hidden-sub-trigger" id="sub6" type="radio" name="sub-circle" value="1">
      <label for="sub6"></label>
    </button>
    <button class="sub-circle">
      <input class="hidden-sub-trigger" id="sub7" type="radio" name="sub-circle" value="1">
      <label for="sub7"></label>
    </button>
    <button class="sub-circle">
      <input class="hidden-sub-trigger" id="sub8" type="radio" name="sub-circle" value="1">
      <label for="sub8"></label>
    </button>
   </div>
</div>
<style>
/* From Uiverse.io by JkHuger - Source: Denis Syroezhkin - https://codepen.io/kolpak/pen/XKWGzr - Tags: checkbox, select, menu */
footer .demo {
  position: absolute;
  bottom: 10px;
  width: 500px;
  margin: 0 auto;
}

footer .demo a {
  text-align: center;
  color: #000;
  text-decoration: none;
  font-weight: 100;
  border-bottom: 1px solid #000;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
}

.circle {
  display: block;
  position: relative;
  padding: 0;
  z-index: 98;
  margin: 0 auto;
  -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  height: 60px;
  width: 60px;
  background-color: #3F51B5;
  transition: 0.2s;
  text-align: center;
}

.circle:active {
  transform: scale(0.9);
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.3);
}

.circle:hover {
  cursor: pointer;
  background-color: #606fc7;
  box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.3);
}

.circle .svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15px;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  transition: 0.5s;
  transform: rotate(180deg);
}

.sub-circle {
  z-index: 0;
  position: absolute;
  height: 40px;
  width: 40px;
  overflow: hidden;
  border-radius: 50%;
  transition: 0.3s;
  transform: scale(0.5);
  opacity: 0;
  padding: 0;
  margin: 0;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
  border: none;
}

.sub-circle label {
  background-color: #F50057;
  display: block;
  color: white;
  width: 100%;
  height: 100%;
  line-height: 40px;
  transition: .5s;
}

.sub-circle label:hover {
  cursor: pointer;
  background-color: #606fc7;
}

.subs {
  left: -20px;
  top: -50px;
  width: 40px;
  height: 40px;
  text-align: center;
  z-index: 0;
  margin: 0 auto;
  position: relative;
}

.hidden-sub-trigger {
  display: none;
}

.hidden-sub-trigger:checked ~ label {
  background-color: #606fc7;
}

.hidden-trigger {
  display: none;
}

.hidden-trigger:checked ~ .circle {
  transform: scale(0.9);
  cursor: pointer;
  background-color: #606fc7;
  box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.1);
}

.hidden-trigger:checked ~ .circle .svg {
  transform: rotate(45deg);
}

.hidden-trigger:checked ~ .subs button:nth-of-type(1) {
  transform: translate(0px, -100px) scale(1);
  opacity: 1;
  transition: 0.1s;
}

.hidden-trigger:checked ~ .subs button:nth-of-type(2) {
  transform: translate(75px, -75px) scale(1);
  opacity: 1;
  transition: 0.2s;
}

.hidden-trigger:checked ~ .subs button:nth-of-type(3) {
  transform: translate(100px, 0px) scale(1);
  opacity: 1;
  transition: 0.3s;
}

.hidden-trigger:checked ~ .subs button:nth-of-type(4) {
  transform: translate(75px, 75px) scale(1);
  opacity: 1;
  transition: 0.4s;
}

.hidden-trigger:checked ~ .subs button:nth-of-type(5) {
  transform: translate(0px, 100px) scale(1);
  opacity: 1;
  transition: 0.5s;
}

.hidden-trigger:checked ~ .subs button:nth-of-type(6) {
  transform: translate(-75px, 75px) scale(1);
  opacity: 1;
  transition: 0.6s;
}

.hidden-trigger:checked ~ .subs button:nth-of-type(7) {
  transform: translate(-100px, 0px) scale(1);
  opacity: 1;
  transition: 0.7s;
}

.hidden-trigger:checked ~ .subs button:nth-of-type(8) {
  transform: translate(-75px, -75px) scale(1);
  opacity: 1;
  transition: 0.8s;
}

</style>


================================================
FILE: Checkboxes/JkHuger_warm-panther-74.html
================================================
<div id="checklist">
  <input checked="" value="1" name="r" type="checkbox" id="01">
  <label for="01">Bread</label>
  <input value="2" name="r" type="checkbox" id="02">
  <label for="02">Cheese</label>
  <input value="3" name="r" type="checkbox" id="03">
  <label for="03">Coffee</label>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: checkbox, todo */
#checklist {
  --background: #fff;
  --text: #414856;
  --check: #4f29f0;
  --disabled: #c3c8de;
  --width: 100px;
  --height: 180px;
  --border-radius: 10px;
  background: var(--background);
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  position: relative;
  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
  padding: 30px 85px;
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
  justify-content: center;
}

#checklist label {
  color: var(--text);
  position: relative;
  cursor: pointer;
  display: grid;
  align-items: center;
  width: fit-content;
  transition: color 0.3s ease;
  margin-right: 20px;
}

#checklist label::before, #checklist label::after {
  content: "";
  position: absolute;
}

#checklist label::before {
  height: 2px;
  width: 8px;
  left: -27px;
  background: var(--check);
  border-radius: 2px;
  transition: background 0.3s ease;
}

#checklist label:after {
  height: 4px;
  width: 4px;
  top: 8px;
  left: -25px;
  border-radius: 50%;
}

#checklist input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  height: 15px;
  width: 15px;
  outline: none;
  border: 0;
  margin: 0 15px 0 0;
  cursor: pointer;
  background: var(--background);
  display: grid;
  align-items: center;
  margin-right: 20px;
}

#checklist input[type="checkbox"]::before, #checklist input[type="checkbox"]::after {
  content: "";
  position: absolute;
  height: 2px;
  top: auto;
  background: var(--check);
  border-radius: 2px;
}

#checklist input[type="checkbox"]::before {
  width: 0px;
  right: 60%;
  transform-origin: right bottom;
}

#checklist input[type="checkbox"]::after {
  width: 0px;
  left: 40%;
  transform-origin: left bottom;
}

#checklist input[type="checkbox"]:checked::before {
  animation: check-01 0.4s ease forwards;
}

#checklist input[type="checkbox"]:checked::after {
  animation: check-02 0.4s ease forwards;
}

#checklist input[type="checkbox"]:checked + label {
  color: var(--disabled);
  animation: move 0.3s ease 0.1s forwards;
}

#checklist input[type="checkbox"]:checked + label::before {
  background: var(--disabled);
  animation: slice 0.4s ease forwards;
}

#checklist input[type="checkbox"]:checked + label::after {
  animation: firework 0.5s ease forwards 0.1s;
}

@keyframes move {
  50% {
    padding-left: 8px;
    padding-right: 0px;
  }

  100% {
    padding-right: 4px;
  }
}

@keyframes slice {
  60% {
    width: 100%;
    left: 4px;
  }

  100% {
    width: 100%;
    left: -2px;
    padding-left: 0;
  }
}

@keyframes check-01 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0px;
    top: 8px;
    transform: rotate(45deg);
  }

  100% {
    width: 5px;
    top: 8px;
    transform: rotate(45deg);
  }
}

@keyframes check-02 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0px;
    top: 8px;
    transform: rotate(-45deg);
  }

  100% {
    width: 10px;
    top: 8px;
    transform: rotate(-45deg);
  }
}

@keyframes firework {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0;
  }
}
</style>


================================================
FILE: Checkboxes/JulanDeAlb_tall-swan-6.html
================================================
<label class="hamburger">
  <input type="checkbox">
  <svg viewBox="0 0 32 32">
    <path class="line line-top-bottom" d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"></path>
    <path class="line" d="M7 16 27 16"></path>
  </svg>
</label>
<style>
/* From Uiverse.io by JulanDeAlb - Tags: checkbox, hamburger, toggle, menu, animated */
.hamburger {
  cursor: pointer;
}

.hamburger input {
  display: none;
}

.hamburger svg {
  /* The size of the SVG defines the overall size */
  height: 3em;
  /* Define the transition for transforming the SVG */
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  /* Define the transition for transforming the Stroke */
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
  stroke-dasharray: 12 63;
}

.hamburger input:checked + svg {
  transform: rotate(-45deg);
}

.hamburger input:checked + svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}

</style>


================================================
FILE: Checkboxes/KSAplay_silly-otter-89.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by KSAplay - Tags: checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  position: relative;
  cursor: pointer;
  font-size: 17px;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  user-select: none;
  border: 5px solid white;
  display: block;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.checkmark:after {
  content: '';
  position: absolute;
  top: 25%;
  left: 25%;
  background-color: white;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  transform: scale(0);
  transition: 100ms ease;
}

.container input:checked ~ .checkmark:after {
  transform: scale(1);
}
</style>


================================================
FILE: Checkboxes/KSAplay_smart-bobcat-50.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark">
    <svg viewBox="0 0 256 256">
    <rect fill="none" height="256" width="256"></rect>
    <path d="M224.6,51.9a59.5,59.5,0,0,0-43-19.9,60.5,60.5,0,0,0-44,17.6L128,59.1l-7.5-7.4C97.2,28.3,59.2,26.3,35.9,47.4a59.9,59.9,0,0,0-2.3,87l83.1,83.1a15.9,15.9,0,0,0,22.6,0l81-81C243.7,113.2,245.6,75.2,224.6,51.9Z" stroke-width="20px" stroke="#FFF" fill="none"></path></svg>
  </div>
</label>
<style>
/* From Uiverse.io by KSAplay - Tags: checkbox, like, heart */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  transition: 100ms;
}

.checkmark {
  top: 0;
  left: 0;
  height: 2em;
  width: 2em;
  transition: 100ms;
  animation: dislike_effect 400ms ease;
}

.container input:checked ~ .checkmark path {
  fill: #FF5353;
  stroke-width: 0;
}

.container input:checked ~ .checkmark {
  animation: like_effect 400ms ease;
}

.container:hover {
  transform: scale(1.1);
}

@keyframes like_effect {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes dislike_effect {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}
</style>


================================================
FILE: Checkboxes/KSAplay_tasty-tiger-23.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by KSAplay - Tags: checkbox, square */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  position: relative;
  cursor: pointer;
  font-size: 17px;
  width: 2em;
  height: 2em;
  user-select: none;
  border: 5px solid white;
  display: block;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.checkmark:after {
  content: '';
  position: absolute;
  top: 25%;
  left: 25%;
  background-color: white;
  width: 50%;
  height: 50%;
  transform: scale(0);
  transition: .1s ease;
}

.container input:checked ~ .checkmark:after {
  transform: scale(1);
}
</style>


================================================
FILE: Checkboxes/KSAplay_tough-pug-83.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark">
    <svg fill="none" viewBox="0 0 24 24">
    <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.3" stroke="#FFFFFF" d="M8 10V20M8 10L4 9.99998V20L8 20M8 10L13.1956 3.93847C13.6886 3.3633 14.4642 3.11604 15.1992 3.29977L15.2467 3.31166C16.5885 3.64711 17.1929 5.21057 16.4258 6.36135L14 9.99998H18.5604C19.8225 9.99998 20.7691 11.1546 20.5216 12.3922L19.3216 18.3922C19.1346 19.3271 18.3138 20 17.3604 20L8 20"></path>
    </svg>
  </div>
</label>
<style>
/* From Uiverse.io by KSAplay - Tags: checkbox, thumb, like */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 25px;
  user-select: none;
  transition: 100ms;
}

.checkmark {
  top: 0;
  left: 0;
  height: 2em;
  width: 2em;
  transition: 100ms;
  animation: dislike_401 400ms ease;
}

.container input:checked ~ .checkmark path {
  fill: #1C7DFF;
  stroke-width: 1.2;
  stroke: #212121;
 /*same background color*/
}

.container input:checked ~ .checkmark {
  animation: like_401 400ms ease;
}

.container:hover {
  transform: scale(1.1);
}

@keyframes like_401 {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes dislike_401 {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}
</style>


================================================
FILE: Checkboxes/KhaledMatalkah_tame-owl-66.html
================================================
<label class="custom-checkbox">
  <input name="dummy" type="checkbox">
  <span class="checkmark"></span>
</label>

<style>
/* From Uiverse.io by KhaledMatalkah - Tags: checkbox, flip, transition, cool checkbox */
.custom-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  color: #333;
  transition: color 0.3s;
}

.custom-checkbox input[type="checkbox"] {
  display: none;
}

.custom-checkbox .checkmark {
  width: 24px;
  height: 24px;
  border: 2px solid #333;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
  transform-style: preserve-3d;
}

.custom-checkbox .checkmark::before {
  content: "\2713";
  font-size: 16px;
  color: transparent;
  transition: color 0.3s, transform 0.3s;
}

.custom-checkbox input[type="checkbox"]:checked + .checkmark {
  background-color: #333;
  border-color: #333;
  transform: scale(1.1) rotateZ(360deg) rotateY(360deg);
}

.custom-checkbox input[type="checkbox"]:checked + .checkmark::before {
  color: #fff;
}

.custom-checkbox:hover {
  color: #666;
}

.custom-checkbox:hover .checkmark {
  border-color: #666;
  background-color: #f0f0f0;
  transform: scale(1.05);
}

.custom-checkbox input[type="checkbox"]:focus + .checkmark {
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2);
  outline: none;
}

.custom-checkbox .checkmark,
.custom-checkbox input[type="checkbox"]:checked + .checkmark {
  transition: background-color 1.3s, border-color 1.3s, color 1.3s, transform 0.3s;
}

</style>


================================================
FILE: Checkboxes/LeonKohli_average-impala-100.html
================================================
<div class="bookmark-checkbox">
  <input
    type="checkbox"
    id="bookmark-toggle"
    class="bookmark-checkbox__input"
  />
  <label for="bookmark-toggle" class="bookmark-checkbox__label">
    <svg class="bookmark-checkbox__icon" viewBox="0 0 24 24">
      <path
        class="bookmark-checkbox__icon-back"
        d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"
      ></path>
      <path class="bookmark-checkbox__icon-check" d="M8 11l3 3 5-5"></path>
    </svg>
  </label>
</div>

<style>
/* From Uiverse.io by LeonKohli  - Tags: icon, animation, active, checkbox, glow, svg, cool checkbox */
.bookmark-checkbox {
  display: inline-block;
}

.bookmark-checkbox__input {
  display: none;
}

.bookmark-checkbox__label {
  cursor: pointer;
}

.bookmark-checkbox__icon {
  width: 2em;
  height: 2em;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s, fill 0.3s;
}

.bookmark-checkbox__icon-back {
  stroke: #333;
  transition: transform 0.3s;
}

.bookmark-checkbox__icon-check {
  stroke: #fff;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: stroke-dashoffset 0.3s, transform 0.3s;
  transform: translateX(2px);
}

.bookmark-checkbox__input:checked
  + .bookmark-checkbox__label
  .bookmark-checkbox__icon {
  fill: #ff5a5f;
}

.bookmark-checkbox__input:checked
  + .bookmark-checkbox__label
  .bookmark-checkbox__icon-back {
  stroke: #ff5a5f;
  transform: scale(1.1);
  animation: bookmark-pop 0.4s ease;
}

.bookmark-checkbox__input:checked
  + .bookmark-checkbox__label
  .bookmark-checkbox__icon-check {
  stroke-dashoffset: 0;
  transition-delay: 0.2s;
}

@keyframes bookmark-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.1);
  }
}

</style>
    

================================================
FILE: Checkboxes/LeonKohli_wise-puma-87.html
================================================
<div class="uv-checkbox-wrapper">
  <input type="checkbox" id="uv-checkbox" class="uv-checkbox" />
  <label for="uv-checkbox" class="uv-checkbox-label">
    <div class="uv-checkbox-icon">
      <svg viewBox="0 0 24 24" class="uv-checkmark">
        <path d="M4.1,12.7 9,17.6 20.3,6.3" fill="none"></path>
      </svg>
    </div>
    <span class="uv-checkbox-text">Check me!</span>
  </label>
</div>

<style>
/* From Uiverse.io by LeonKohli  - Tags: icon, animation, minimalist, checkbox, rounded, smooth, light, clean */
.uv-checkbox-wrapper {
  display: inline-block;
}

.uv-checkbox {
  display: none;
}

.uv-checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.uv-checkbox-icon {
  position: relative;
  width: 2em;
  height: 2em;
  border: 2px solid #ccc;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transition: border-color 0.3s ease, border-radius 0.3s ease;
}

.uv-checkmark {
  position: absolute;
  top: 0.1em;
  left: 0.1em;
  width: 1.6em;
  height: 1.6em;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.uv-checkbox-text {
  margin-left: 0.5em;
  transition: color 0.3s ease;
}

.uv-checkbox:checked + .uv-checkbox-label .uv-checkbox-icon {
  border-color: #6c5ce7;
  border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
  background-color: #6c5ce7;
}

.uv-checkbox:checked + .uv-checkbox-label .uv-checkmark {
  stroke-dashoffset: 0;
}

.uv-checkbox:checked + .uv-checkbox-label .uv-checkbox-text {
  color: #6c5ce7;
}

</style>
    

================================================
FILE: Checkboxes/LeryLey_quick-eagle-99.html
================================================
<!-- From Uiverse.io by LeryLey  - Tags: checkbox, code, radio -->
<div class="space-y-2">
  <label
    class="has-[:checked]:bg-white/30 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-200 has-[:checked]:ring-2 cursor-pointer bg-white/40 hover:bg-white/20 w-72 p-4 rounded-md flex justify-between items-center shadow"
  >
    <div class="flex items-center space-x-5">
      <div class="flex items-center">
        <svg
          class="w-4 h-4 text-black"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            fill-rule="evenodd"
            d="M12.037 21.998a10.313 10.313 0 0 1-7.168-3.049 9.888 9.888 0 0 1-2.868-7.118 9.947 9.947 0 0 1 3.064-6.949A10.37 10.37 0 0 1 12.212 2h.176a9.935 9.935 0 0 1 6.614 2.564L16.457 6.88a6.187 6.187 0 0 0-4.131-1.566 6.9 6.9 0 0 0-4.794 1.913 6.618 6.618 0 0 0-2.045 4.657 6.608 6.608 0 0 0 1.882 4.723 6.891 6.891 0 0 0 4.725 2.07h.143c1.41.072 2.8-.354 3.917-1.2a5.77 5.77 0 0 0 2.172-3.41l.043-.117H12.22v-3.41h9.678c.075.617.109 1.238.1 1.859-.099 5.741-4.017 9.6-9.746 9.6l-.215-.002Z"
            clip-rule="evenodd"
          ></path>
        </svg>
        <span> Pay </span>
      </div>
      <h2 class="text-lg">Google Pay</h2>
    </div>
    <input
      type="radio"
      name="payment"
      class="checked:border-indigo-500 h-5 w-5"
    />
  </label>
  <label
    class="has-[:checked]:bg-white/30 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-200 has-[:checked]:ring-2 cursor-pointer bg-white/40 hover:bg-white/20 w-72 p-4 rounded-md flex justify-between items-center shadow"
  >
    <div class="flex items-center space-x-5">
      <div class="flex items-center">
        <svg
          class="w-4 h-4 text-black"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            d="M17.537 12.625a4.421 4.421 0 0 0 2.684 4.047 10.96 10.96 0 0 1-1.384 2.845c-.834 1.218-1.7 2.432-3.062 2.457-1.34.025-1.77-.794-3.3-.794-1.531 0-2.01.769-3.275.82-1.316.049-2.317-1.318-3.158-2.532-1.72-2.484-3.032-7.017-1.27-10.077A4.9 4.9 0 0 1 8.91 6.884c1.292-.025 2.51.869 3.3.869.789 0 2.27-1.075 3.828-.917a4.67 4.67 0 0 1 3.66 1.984 4.524 4.524 0 0 0-2.16 3.805m-2.52-7.432A4.4 4.4 0 0 0 16.06 2a4.482 4.482 0 0 0-2.945 1.516 4.185 4.185 0 0 0-1.061 3.093 3.708 3.708 0 0 0 2.967-1.416Z"
          ></path>
        </svg>
        <span> Pay </span>
      </div>
      <h2 class="text-lg">Apple Pay</h2>
    </div>
    <input
      type="radio"
      name="payment"
      class="checked:border-indigo-500 h-5 w-5"
    />
  </label>
</div>


    

================================================
FILE: Checkboxes/Lucaasbre_strong-stingray-2.html
================================================
<input type="checkbox" class="checkbox" />
<span class="button-menu"></span>
<button class="option-a option">A</button>
<button class="option-b option">B</button>
<button class="option-c option">C</button>

<style>
/* From Uiverse.io by Lucaasbre  - Tags: simple, button, checkbox, menu, light&dark */
.button-menu {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  background-color: #ffdd00;
  border: 2px solid #1e1e1e;
  color: #1e1e1e;
  font-size: 30px;
  font-weight: 700;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  -webkit-box-shadow: 0px 3px 10px 0px rgba(16, 16, 16, 0.5);
  -moz-box-shadow: 0px 3px 10px 0px rgba(16, 16, 16, 0.5);
  box-shadow: 0px 3px 10px 0px rgba(16, 16, 16, 0.5);
}

.checkbox {
  width: 60px;
  height: 60px;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
}

.option {
  position: absolute;
  background-color: #1e1e1e;
  border: 2px solid #ffdd00;
  color: #ffdd00;
  z-index: -1;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.3s;
  -webkit-box-shadow: 3px 3px 10px 0px rgba(16, 16, 16, 0.5);
  -moz-box-shadow: 3px 3px 10px 0px rgba(16, 16, 16, 0.5);
  box-shadow: 3px 3px 10px 0px rgba(16, 16, 16, 0.5);
}

.checkbox:hover ~ .button-menu,
.checkbox:checked ~ .button-menu {
  background-color: #eccd00;
  scale: 0.98;
  box-shadow: none;
}

.checkbox:not(:checked) ~ .button-menu::before {
  content: "+";
}

.checkbox:checked ~ .button-menu::after {
  content: "-";
  scale: 0.98;
  box-shadow: none;
}

.checkbox:not(:checked) ~ .option {
  box-shadow: none;
}

.option:hover,
.option:active,
.option:focus {
  box-shadow: none;
  scale: 0.98;
}

.checkbox:checked ~ .option-a {
  transition-delay: 0.1s;
  transform: translateY(-70px);
}

.checkbox:checked ~ .option-b {
  transition-delay: 0.2s;
  transform: translateY(-140px);
}

.checkbox:checked ~ .option-c {
  transition-delay: 0.3s;
  transform: translateY(-210px);
}

</style>
    

================================================
FILE: Checkboxes/Manish-Tamang_quick-bulldog-81.html
================================================
<!-- From Uiverse.io by Manish-Tamang  - Tags: checkbox, tailwind, tailwindcss -->
<fieldset>
  <legend class="sr-only">Checkboxes</legend>

  <div class="space-y-2">
    <label
      class="flex cursor-pointer items-start gap-4 rounded-lg border border-gray-200 p-4 transition hover:bg-gray-50 has-[:checked]:bg-blue-50"
      for="Option1"
    >
      <div class="flex items-center">
        ​
        <input
          id="Option1"
          class="size-4 rounded border-gray-300"
          type="checkbox"
        />
      </div>

      <div>
        <strong class="font-medium text-gray-900"> Manish Tamang</strong>

        <p class="mt-1 text-pretty text-sm text-gray-700">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </div>
    </label>

    <label
      class="flex cursor-pointer items-start gap-4 rounded-lg border border-gray-200 p-4 transition hover:bg-gray-50 has-[:checked]:bg-blue-50"
      for="Option2"
    >
      <div class="flex items-center">
        ​
        <input
          id="Option2"
          class="size-4 rounded border-gray-300"
          type="checkbox"
        />
      </div>

      <div>
        <strong class="font-medium text-gray-900"> Sajak Dhital </strong>

        <p class="mt-1 text-pretty text-sm text-gray-700">
          Lorem ipsum dolor sit amet consectetur.
        </p>
      </div>
    </label>

    <label
      class="flex cursor-pointer items-start gap-4 rounded-lg border border-gray-200 p-4 transition hover:bg-gray-50 has-[:checked]:bg-blue-50"
      for="Option3"
    >
      <div class="flex items-center">
        ​
        <input
          id="Option3"
          class="size-4 rounded border-gray-300"
          type="checkbox"
        />
      </div>

      <div>
        <strong class="text-pretty font-medium text-gray-900">
          Nishan Basnet</strong
        >

        <p class="mt-1 text-pretty text-sm text-gray-700">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </div>
    </label>
  </div>
</fieldset>


    

================================================
FILE: Checkboxes/MikeAndrewDesigner_jolly-gecko-33.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by MikeAndrewDesigner - Tags: checkbox, rounded, clean */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 30px;
  user-select: none;
}

.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.6em;
  width: 1.6em;
  border-radius: 50%;
  background: #ffeded38;
  transition: all 0.2s ease;
}

.checkmark {
  opacity: 0.4;
}

.container input:checked ~ .checkmark {
  background: linear-gradient(144deg,#af40ff,#5b42f3 50%,#00ddeb);
  opacity: 0.9;
  transition: all 0.2s ease;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  left: 0.61em;
  top: 0.43em;
  width: 0.25em;
  height: 0.5em;
  border: solid rgb(255, 255, 255);
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/NAKAMOZ_pretty-ladybug-100.html
================================================
<label class="container">
  <input type="checkbox">
  <div class="checkmark">
    <span></span>
    <span></span>
    <span></span>
  </div>
</label>
<style>
/* From Uiverse.io by NAKAMOZ - Tags: checkbox, hamburger */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
}

.checkmark span {
  width: 32px;
  height: 2px;
  background-color: white;
  position: absolute;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.checkmark span:nth-child(1) {
  top: 10%;
}

.checkmark span:nth-child(2) {
  top: 50%;
}

.checkmark span:nth-child(3) {
  top: 90%;
}

.container input:checked + .checkmark span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
  -moz-transform: translateY(-50%) rotate(45deg);
  -ms-transform: translateY(-50%) rotate(45deg);
  -o-transform: translateY(-50%) rotate(45deg);
}

.container input:checked + .checkmark span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  -webkit-transform: translateY(-50%) rotate(-45deg);
  -moz-transform: translateY(-50%) rotate(-45deg);
  -ms-transform: translateY(-50%) rotate(-45deg);
  -o-transform: translateY(-50%) rotate(-45deg);
}

.container input:checked + .checkmark span:nth-child(3) {
  transform: translateX(-50px);
  -webkit-transform: translateX(-50px);
  -moz-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  -o-transform: translateX(-50px);
  opacity: 0;
}
</style>


================================================
FILE: Checkboxes/Nawsome_heavy-cheetah-95.html
================================================
<div class="content">
  <label class="checkBox">
    <input id="ch1" type="checkbox">
    <div class="transition"></div>
  </label>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: checkbox */
.clear {
  clear: both;
}

.checkBox {
  display: block;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, 0);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 0px 0px 2px #fff;
}

.checkBox div {
  width: 60px;
  height: 60px;
  background-color: #fff;
  top: -52px;
  left: -52px;
  position: absolute;
  transform: rotateZ(45deg);
  z-index: 100;
}

.checkBox input[type=checkbox]:checked + div {
  left: -10px;
  top: -10px;
}

.checkBox input[type=checkbox] {
  position: absolute;
  left: 50px;
  visibility: hidden;
}

.transition {
  transition: 300ms ease;
}
</style>


================================================
FILE: Checkboxes/OptX71285225_little-lionfish-48.html
================================================
<label class="checkbox-container">
  <input type="checkbox" />
  <span class="checkmark"></span>
</label>

<style>
/* From Uiverse.io by OptX71285225  - Tags: simple, green, checkbox */
/* Hide the default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox container */
.checkbox-container {
  position: relative;
  display: inline-block;
  font-size: 18px; /* Make the checkbox slightly bigger */
  margin-bottom: 12px;
  cursor: pointer;
}

/* Style the checkmark */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px; /* Make the checkbox slightly bigger */
  width: 30px; /* Make the checkbox slightly bigger */
  border: 2px solid #ccc; /* Add border for 3D effect */
  border-radius: 6px; /* Round the corners */
  background-color: #fff; /* Default color */
  transition: all 0.3s ease; /* Add smooth transition */
}

/* Show the checkmark when checkbox is checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
  animation: checkboxExpand 0.3s ease forwards;
}

/* Style the checkmark/indicator */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%) rotate(45deg) scale(0); /* Center and hide initially, then scale to appear */
  width: 8px; /* Adjust size */
  height: 15px; /* Adjust size */
  border: solid #fff; /* Change color of the tick to white */
  border-width: 0 4px 4px 0; /* Adjust thickness and direction */
}

/* On hover, add a grey background color */
.checkbox-container:hover .checkmark {
  background-color: #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
  transform: scale(1.05); /* Scale up slightly */
}

/* When the checkbox is checked, add a green background */
.checkbox-container input:checked ~ .checkmark {
  background-color: #4caf50;
  border-color: #4caf50; /* Change border color */
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* Add shadow for 3D effect */
}

/* Keyframes for expanding animation */
@keyframes checkboxExpand {
  0% {
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
  }
}

</style>
    

================================================
FILE: Checkboxes/Praashoo7_cuddly-bat-26.html
================================================
<label class="theme-switch" for="checkbox" id="themeswitch">
      <input type="checkbox" id="checkbox">
      <div class="slider round"></div>
      <span class="name"></span>
      <div class="back"></div>
</label>
<style>
/* From Uiverse.io by Praashoo7 - Tags: checkbox, moon, sun, light&dark, box-shadow */
.theme-switch {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 9em;
  height: 2.5em;
  font-size: 20px;
  font-family: Montserrat;
  font-weight: 600;
  color: black;
  background-color: white;
  padding: 0.5em;
  border: 1px solid black;
  box-shadow: 6px 6px 0px black;
  transition: .4s;
  z-index: 1;
}

.name::before {
  color: black;
  content: "Dark Mode";
  margin-right: 2em;
  transition: .2s ease-in-out;
}

.name::after {
  color: black;
  content: "Light Mode";
  margin-right: 1.7em;
  transition: .2s ease-in-out;
  display: none;
}

.theme-switch .slider {
  position: absolute;
  background-color: #222;
  margin-left: 6.2em;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 4px solid #222;
  transform: rotate(-120deg);
  box-shadow: inset 0px 6px #999, inset 0px 6px 1px 1px #999;
  -moz-box-shadow: inset 0px 6px #999, inset 0px 6px 1px 1px #999;
}

.theme-switch:hover {
  color: white;
  cursor: pointer;
  box-shadow: none;
  transform: translateX(6px) translateY(6px);
  background-color: black;
  border: none;
}

.theme-switch:hover .name::before {
  color: white;
}

.theme-switch:hover .name::after {
  color: white;
}

.theme-switch input[type=checkbox]:checked + .slider {
  transform: rotate(360deg);
  box-shadow: none;
  border: 4px solid #F28C38;
  background-color: #F28C38;
}

.theme-switch input[type=checkbox]:checked ~ .name::before {
  display: none;
}

.theme-switch input[type=checkbox]:checked ~ .name::after {
  display: block;
}

.theme-switch input[type=checkbox] {
  position: absolute;
  visibility: hidden;
}

.slider {
  transition: 300ms ease;
}
</style>


================================================
FILE: Checkboxes/Praashoo7_moody-sloth-42.html
================================================
<label class="container">
  <input type="checkbox">
  <div class="checkmark">
    <svg viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" class="icon">
    <path d="M 24.10 6.29 Q 28.34 7.56 28.00 12.00 Q 27.56 15.10 27.13 18.19 A 0.45 0.45 4.5 0 0 27.57 18.70 Q 33.16 18.79 38.75 18.75 Q 42.13 18.97 43.23 21.45 Q 43.91 22.98 43.27 26.05 Q 40.33 40.08 40.19 40.44 Q 38.85 43.75 35.50 43.75 Q 21.75 43.75 7.29 43.75 A 1.03 1.02 0.0 0 1 6.26 42.73 L 6.42 19.43 A 0.54 0.51 -89.4 0 1 6.93 18.90 L 14.74 18.79 A 2.52 2.31 11.6 0 0 16.91 17.49 L 22.04 7.17 A 1.74 1.73 21.6 0 1 24.10 6.29 Z M 21.92 14.42 Q 20.76 16.58 19.74 18.79 Q 18.74 20.93 18.72 23.43 Q 18.65 31.75 18.92 40.06 A 0.52 0.52 88.9 0 0 19.44 40.56 L 35.51 40.50 A 1.87 1.83 5.9 0 0 37.33 39.05 L 40.51 23.94 Q 40.92 22.03 38.96 21.97 L 23.95 21.57 A 0.49 0.47 2.8 0 1 23.47 21.06 Q 23.76 17.64 25.00 12.00 Q 25.58 9.36 24.28 10.12 Q 23.80 10.40 23.50 11.09 Q 22.79 12.80 21.92 14.42 Z M 15.57 22.41 A 0.62 0.62 0 0 0 14.95 21.79 L 10.01 21.79 A 0.62 0.62 0 0 0 9.39 22.41 L 9.39 40.07 A 0.62 0.62 0 0 0 10.01 40.69 L 14.95 40.69 A 0.62 0.62 0 0 0 15.57 40.07 L 15.57 22.41 Z" fill-opacity="1.000"></path>
    <circle r="1.51" cy="37.50" cx="12.49" fill-opacity="1.000"></circle>
    </svg>
  </div>
  <p class="like">Liked!</p>
</label>
<style>
/* From Uiverse.io by Praashoo7 - Tags: checkbox, thumb, like */
/* Hide the default checkbox */
.container input {
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 3em;
  width: 3em;
  background-color: #171717;
  border-radius: 10px;
  transition: .2s ease-in-out;
  z-index: 2;
}

.like {
  position: relative;
  font-size: 0.8em;
  top: -3.5em;
  text-align: center;
  z-index: -1;
}

.icon {
  margin: 0.2em;
  fill: white;
  transition: .4s ease-in-out;
}

.checkmark:hover {
  background-color: white;
}

.checkmark:hover .icon {
  fill: black;
  transform: rotate(-8deg);
  transform-origin: bottom left;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: limegreen;
}

.container input:checked ~ .like {
  color: white;
  animation: 0.6s up_3951;
}

.container input:checked ~ .checkmark .icon {
  fill: white;
  transform: none;
  animation: 0.5s jump_3951;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

@keyframes up_3951 {
  100% {
    transform: translateY(-2em);
  }
}

@keyframes jump_3951 {
  50% {
    transform-origin: center;
    transform: translateY(-0.5em) rotate(-8deg);
  }

  100% {
    transform-origin: center;
    transform: translateY(0em);
  }
}
</style>


================================================
FILE: Checkboxes/Praashoo7_tough-skunk-14.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by Praashoo7 - Tags: checkbox */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.34em;
  width: 1.3em;
  background-color: #ccc;
  transition: .4s ease-in-out;
  border-radius: 50%;
}

.checkmark:hover {
  background-color: grey;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.25em;
  top: 0.29em;
  width: 0.50em;
  height: 0.50em;
  border: solid white;
  background-color: white;
  border-radius: 50%;
}
</style>


================================================
FILE: Checkboxes/Praashoo7_white-seahorse-98.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by Praashoo7 - Tags: neumorphism, checkbox */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 2.3em;
  width: 2.3em;
  background-color: #ccc;
  border-radius: 50%;
  transition: .4s;
}

.checkmark:hover {
  box-shadow: inset 17px 17px 16px #b3b3b3,
            inset -17px -17px 16px #ffffff;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  box-shadow: none;
  background-color: limegreen;
  transform: rotateX(360deg);
}

.container input:checked ~ .checkmark:hover {
  box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.96em;
  top: 0.7em;
  width: 0.25em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  box-shadow: 0.1em 0.1em 0em 0 rgba(0,0,0,0.3);
  transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/PriyanshuGupta28_big-bear-38.html
================================================
<div class="checkbox-wrapper-65">
  <label for="cbk1-65">
    <input id="cbk1-65" type="checkbox">
    <span class="cbx">
      <svg viewBox="0 0 12 11" height="11px" width="12px">
        <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
      </svg>
    </span>
    <span>Checkbox</span>
  </label>
</div>



<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: checkbox, cool checkbox, circle-checkbox */
.checkbox-wrapper-65 *,
  .checkbox-wrapper-65 ::after,
  .checkbox-wrapper-65 ::before {
  box-sizing: border-box;
}

.checkbox-wrapper-65 .cbx {
  position: relative;
  display: block;
  float: left;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background-color: #1c4780;
  background-image: linear-gradient(#0f698d, #1d3c6b);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.15);
  transition: all 0.15s ease;
}

.checkbox-wrapper-65 .cbx svg {
  position: absolute;
  top: 3px;
  left: 3px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
  transform: translate3d(0, 0, 0);
}

.checkbox-wrapper-65 .cbx + span {
  float: left;
  margin-left: 6px;
}

.checkbox-wrapper-65 {
  user-select: none;
}

.checkbox-wrapper-65 label {
  display: inline-block;
  cursor: pointer;
}

.checkbox-wrapper-65 input[type="checkbox"] {
  display: none;
  visibility: hidden;
}

.checkbox-wrapper-65 input[type="checkbox"]:checked + .cbx {
  background-color: #606062;
  background-image: linear-gradient(#2584d2, #1d52c1);
}

.checkbox-wrapper-65 input[type="checkbox"]:checked + .cbx svg {
  stroke-dashoffset: 0;
  transition: all 0.15s ease;
}
</style>


================================================
FILE: Checkboxes/PriyanshuGupta28_massive-ape-73.html
================================================
<div class="checkbox-wrapper">
  <input checked="" type="checkbox">
  <svg viewBox="0 0 35.6 35.6">
    <circle class="background" cx="17.8" cy="17.8" r="17.8"></circle>
    <circle class="stroke" cx="17.8" cy="17.8" r="14.37"></circle>
    <polyline class="check" points="11.78 18.12 15.55 22.23 25.17 12.87"></polyline>
  </svg>
</div>




<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: checkbox, docs checkbox, cool checkbox, circle-checkbox */
.checkbox-wrapper:hover .check {
  stroke-dashoffset: 0;
}

.checkbox-wrapper {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
}

.checkbox-wrapper .background {
  fill: rgb(75, 50, 121);
  transition: ease all 0.6s;
  -webkit-transition: ease all 0.6s;
}

.checkbox-wrapper .stroke {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 2px;
  stroke-dashoffset: 100;
  stroke-dasharray: 100;
  transition: ease all 0.6s;
  -webkit-transition: ease all 0.6s;
}

.checkbox-wrapper .check {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  stroke-dashoffset: 22;
  stroke-dasharray: 22;
  transition: ease all 0.6s;
  -webkit-transition: ease all 0.6s;
}

.checkbox-wrapper input[type=checkbox] {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  opacity: 0;
  -appearance: none;
  -webkit-appearance: none;
}

.checkbox-wrapper input[type=checkbox]:hover {
  cursor: pointer;
}

.checkbox-wrapper input[type=checkbox]:checked + svg .background {
  fill: #421c64;
}

.checkbox-wrapper input[type=checkbox]:checked + svg .stroke {
  stroke-dashoffset: 0;
}

.checkbox-wrapper input[type=checkbox]:checked + svg .check {
  stroke-dashoffset: 0;
}
</style>


================================================
FILE: Checkboxes/PriyanshuGupta28_plastic-panther-7.html
================================================
<div class="checkbox-wrapper">
  <input id="cbtest-19" type="checkbox">
  <label class="check-box" for="cbtest-19">
</label></div>


  


<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: checkbox, cool checkbox, checkmark, tick switchbox */
.checkbox-wrapper {
  box-sizing: border-box;
  --background-color: #fff;
  --checkbox-height: 25px;
}

.checkbox-wrapper input[type=checkbox] {
  display: none;
}

.checkbox-wrapper .check-box {
  height: var(--checkbox-height);
  width: var(--checkbox-height);
  background-color: transparent;
  border: calc(var(--checkbox-height) * .1) solid #000;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: border-color ease 0.2s;
  -o-transition: border-color ease 0.2s;
  -webkit-transition: border-color ease 0.2s;
  transition: border-color ease 0.2s;
  cursor: pointer;
}

.checkbox-wrapper .check-box::before,
  .checkbox-wrapper .check-box::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  height: 0;
  width: calc(var(--checkbox-height) * .2);
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  display: inline-block;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 5px;
  content: " ";
  -webkit-transition: opacity ease 0.5;
  -moz-transition: opacity ease 0.5;
  transition: opacity ease 0.5;
}

.checkbox-wrapper .check-box::before {
  top: calc(var(--checkbox-height) * .72);
  left: calc(var(--checkbox-height) * .41);
  box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.checkbox-wrapper .check-box::after {
  top: calc(var(--checkbox-height) * .37);
  left: calc(var(--checkbox-height) * .05);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.checkbox-wrapper input[type=checkbox]:checked + .check-box,
  .checkbox-wrapper .check-box.checked {
  border-color: #5900ff;
}

.checkbox-wrapper input[type=checkbox]:checked + .check-box::after,
  .checkbox-wrapper .check-box.checked::after {
  height: calc(var(--checkbox-height) / 2);
  -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  animation: dothabottomcheck-19 0.2s ease 0s forwards;
}

.checkbox-wrapper input[type=checkbox]:checked + .check-box::before,
  .checkbox-wrapper .check-box.checked::before {
  height: calc(var(--checkbox-height) * 1.2);
  -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
  animation: dothatopcheck-19 0.4s ease 0s forwards;
}
</style>


================================================
FILE: Checkboxes/PriyanshuGupta28_quick-wolverine-69.html
================================================
<div class="checkbox-wrapper">
  <label>
    <input type="checkbox">
    <span class="checkbox"></span>
  </label>
</div>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: checkbox, toggle switch, cool toggle */
.checkbox-wrapper *,
  .checkbox-wrapper *::before,
  .checkbox-wrapper *::after {
  box-sizing: border-box;
}

.checkbox-wrapper label {
  display: block;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

.checkbox-wrapper input {
  visibility: hidden;
  display: none;
}

.checkbox-wrapper input:checked ~ .checkbox {
  transform: rotate(45deg);
  width: 14px;
  margin-left: 12px;
  border-color: #000000;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0;
}

.checkbox-wrapper .checkbox {
  display: block;
  width: inherit;
  height: inherit;
  border: 3px solid #434343;
  border-radius: 6px;
  transition: all 0.375s;
}


</style>


================================================
FILE: Checkboxes/PriyanshuGupta28_silent-rabbit-98.html
================================================
<label>
    <input type="checkbox" class="input">
    <span class="custom-checkbox"></span>
  </label>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: checkbox, cool checkbox, checkmark */
.input[type="checkbox"] {
  display: none;
}


  /* Style for the custom checkbox */
.custom-checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}

  /* Style for the custom checkmark */
.custom-checkbox::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #333;
  border-radius: 2px;
  opacity: 0;
}

  /* Show the checkmark when checkbox is checked */
.input[type="checkbox"]:checked + .custom-checkbox::after {
  opacity: 1;
}
</style>


================================================
FILE: Checkboxes/PriyanshuGupta28_soft-goose-97.html
================================================
<div class="checkbox-wrapper">
  <label class="container">
    <input type="checkbox" checked="checked">
    <div class="checkmark"></div>
  </label>
</div>

  
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: checkbox, cool checkbox, tick checkbox */
.checkbox-wrapper *,
  .checkbox-wrapper ::after,
  .checkbox-wrapper ::before {
  box-sizing: border-box;
}

.checkbox-wrapper .container input {
  opacity: 1;
  -webkit-appearance: none;
  cursor: pointer;
  height: 50px;
  width: 50px;
  box-shadow: -10px -10px 15px rgba(255,255,255,0.5),
    10px 10px 15px rgba(0,0,70,0.12);
  border-radius: 50%;
  border: 8px solid #ececec;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .5s;
}

.checkbox-wrapper .container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkbox-wrapper .container input::after {
  transition: .5s;
  font-family: monospace;
  content: '';
  color: #7a7a7a;
  font-size: 25px;
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid #7a7a7a;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

.checkbox-wrapper .container input:checked {
  box-shadow: -10px -10px 15px rgba(255,255,255,0.5),
    10px 10px 15px rgba(70,70,70,0.12),
    inset -10px -10px 15px rgba(216, 212, 212, 0.5),
    inset 10px 10px 15px rgba(70,70,70,0.12);
  transition: .5s;
}

.checkbox-wrapper .container input:checked::after {
  transition: .5s;
  border: solid #15bae3;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

</style>


================================================
FILE: Checkboxes/PriyanshuGupta28_spicy-starfish-71.html
================================================
<div class="checkbox-wrapper">
  <input id="_checkbox-26" type="checkbox">
  <label for="_checkbox-26">
    <div class="tick_mark"></div>
  </label>
</div>


<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: checkbox, toggle switch, cool switch, tick mark swicth */
.checkbox-wrapper * {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.checkbox-wrapper input[type="checkbox"] {
  display: none;
}

.checkbox-wrapper label {
  --size: 50px;
  --shadow: calc(var(--size) * .07) calc(var(--size) * .1);
  position: relative;
  display: block;
  width: var(--size);
  height: var(--size);
  margin: 0 auto;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  border-radius: 50%;
  box-shadow: 0 var(--shadow) #ffbeb8;
  cursor: pointer;
  transition: 0.2s ease transform, 0.2s ease background-color,
      0.2s ease box-shadow;
  overflow: hidden;
  z-index: 1;
}

.checkbox-wrapper label:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: calc(var(--size) * .7);
  height: calc(var(--size) * .7);
  margin: 0 auto;
  background-color: #fff;
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: inset 0 var(--shadow) #ffbeb8;
  transition: 0.2s ease width, 0.2s ease height;
}

.checkbox-wrapper label:hover:before {
  width: calc(var(--size) * .55);
  height: calc(var(--size) * .55);
  box-shadow: inset 0 var(--shadow) #ff9d96;
}

.checkbox-wrapper label:active {
  transform: scale(0.9);
}

.checkbox-wrapper .tick_mark {
  position: absolute;
  top: -1px;
  right: 0;
  left: calc(var(--size) * -.05);
  width: calc(var(--size) * .6);
  height: calc(var(--size) * .6);
  margin: 0 auto;
  margin-left: calc(var(--size) * .14);
  transform: rotateZ(-40deg);
}

.checkbox-wrapper .tick_mark:before,
  .checkbox-wrapper .tick_mark:after {
  content: "";
  position: absolute;
  background-color: #fff;
  border-radius: 2px;
  opacity: 0;
  transition: 0.2s ease transform, 0.2s ease opacity;
}

.checkbox-wrapper .tick_mark:before {
  left: 0;
  bottom: 0;
  width: calc(var(--size) * .1);
  height: calc(var(--size) * .3);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
  transform: translateY(calc(var(--size) * -.68));
}

.checkbox-wrapper .tick_mark:after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--size) * .1);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
  transform: translateX(calc(var(--size) * .78));
}

.checkbox-wrapper input[type="checkbox"]:checked + label {
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.checkbox-wrapper input[type="checkbox"]:checked + label:before {
  width: 0;
  height: 0;
}

.checkbox-wrapper input[type="checkbox"]:checked + label .tick_mark:before,
  .checkbox-wrapper input[type="checkbox"]:checked + label .tick_mark:after {
  transform: translate(0);
  opacity: 1;
}
</style>


================================================
FILE: Checkboxes/PriyanshuGupta28_thin-hound-49.html
================================================
<div class="checkbox-wrapper">
  <input checked="" type="checkbox" class="check" id="check1-61">
  <label for="check1-61" class="label">
    <svg width="45" height="45" viewBox="0 0 95 95">
      <rect x="30" y="20" width="50" height="50" stroke="black" fill="none"></rect>
      <g transform="translate(0,-952.36222)">
        <path d="m 56,963 c -102,122 6,9 7,9 17,-5 -66,69 -38,52 122,-77 -7,14 18,4 29,-11 45,-43 23,-4" stroke="black" stroke-width="3" fill="none" class="path1"></path>
      </g>
    </svg>
    <span>Checkbox</span>
  </label>
</div>




<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: checkbox, docs checkbox, cool checkbox */
.checkbox-wrapper input[type="checkbox"] {
  visibility: hidden;
  display: none;
}

.checkbox-wrapper *,
  .checkbox-wrapper ::after,
  .checkbox-wrapper ::before {
  box-sizing: border-box;
  user-select: none;
}

.checkbox-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
}

.checkbox-wrapper .label {
  cursor: pointer;
}

.checkbox-wrapper .check {
  width: 50px;
  height: 50px;
  position: absolute;
  opacity: 0;
}

.checkbox-wrapper .label svg {
  vertical-align: middle;
}

.checkbox-wrapper .path1 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: .5s stroke-dashoffset;
  opacity: 0;
}

.checkbox-wrapper .check:checked + label svg g path {
  stroke-dashoffset: 0;
  opacity: 1;
}
</style>


================================================
FILE: Checkboxes/PriyanshuGupta28_tough-puma-94.html
================================================
<div class="checkbox-wrapper">
  <input id="terms-checkbox-37" name="checkbox" type="checkbox">
  <label class="terms-label" for="terms-checkbox-37">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" class="checkbox-svg">
      <mask fill="white" id="path-1-inside-1_476_5-37">
        <rect height="200" width="200"></rect>
      </mask>
      <rect mask="url(#path-1-inside-1_476_5-37)" stroke-width="40" class="checkbox-box" height="200" width="200"></rect>
      <path stroke-width="15" d="M52 111.018L76.9867 136L149 64" class="checkbox-tick"></path>
    </svg>
    <span class="label-text">Checkbox</span>
  </label>
</div>



<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: checkbox, docs checkbox, checkmark */
.checkbox-wrapper input[type="checkbox"] {
  display: none;
}

.checkbox-wrapper .terms-label {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.checkbox-wrapper .terms-label .label-text {
  margin-left: 10px;
}

.checkbox-wrapper .checkbox-svg {
  width: 30px;
  height: 30px;
}

.checkbox-wrapper .checkbox-box {
  fill: rgba(207, 205, 205, 0.425);
  stroke: #8c00ff;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  transition: stroke-dashoffset 0.6s ease-in;
}

.checkbox-wrapper .checkbox-tick {
  stroke: #8c00ff;
  stroke-dasharray: 172;
  stroke-dashoffset: 172;
  transition: stroke-dashoffset 0.6s ease-in;
}

.checkbox-wrapper input[type="checkbox"]:checked + .terms-label .checkbox-box,
  .checkbox-wrapper input[type="checkbox"]:checked + .terms-label .checkbox-tick {
  stroke-dashoffset: 0;
}

</style>


================================================
FILE: Checkboxes/SalladShooter_hot-rattlesnake-30.html
================================================
<div class="like-wrapper">
  <input class="check" type="checkbox" id="like-toggle" />
  <label class="container" for="like-toggle">
    <svg
      viewBox="0 0 512 512"
      xmlns="http://www.w3.org/2000/svg"
      class="icon inactive"
    >
      <path
        d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"
      ></path>
    </svg>
    <svg
      viewBox="0 0 512 512"
      xmlns="http://www.w3.org/2000/svg"
      class="icon active"
    >
      <path
        d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"
      ></path>
    </svg>
    <div class="checkmark"></div>
    <span class="like-text">Like</span>
  </label>
</div>

<style>
/* From Uiverse.io by SalladShooter  - Tags: icon, button, active, checkbox, like, heart, dark */
.like-wrapper {
  --gap: 0.5em;
  --radius: 0.35em;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  --dot-bg: #212121;
  --dot-color: #313131;
  --dot-size: 1px;
  --dot-space: 22px;
  background: linear-gradient(
        90deg,
        var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),
        transparent 1%
      )
      center / var(--dot-space) var(--dot-space),
    linear-gradient(
        var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),
        transparent 1%
      )
      center / var(--dot-space) var(--dot-space),
    var(--dot-color);
  border: 0.1em solid #313131;
  padding: 0.5em;
  border-radius: var(--radius);
  box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.check[type="checkbox"] {
  display: none;
}

.container {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-top: -0.25em;
  margin-bottom: -0.25em;
}

.icon {
  width: 1.5em;
  height: 1.5em;
  margin-left: 0.5em;
  fill: white;
  transition: opacity 0.3s ease-in-out;
}

.icon.active {
  display: none;
  fill: #f52121;
}

.check[type="checkbox"]:checked + .container .icon.active {
  display: inline-block;
  animation: wiggle 0.5s ease-in-out;
}

.check[type="checkbox"]:checked + .container .icon.inactive {
  display: none;
}

.like-text {
  margin-left: 0.5em;
  padding: 0.5em;
  color: white;
  font-family: Arial, sans-serif;
  font-weight: bolder;
}

@keyframes wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
}

</style>
    

================================================
FILE: Checkboxes/SelfMadeSystem_calm-cat-84.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: checkbox */
/* Hide the default checkbox */
.container input {
  display: none;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: #2196F300;
  border-radius: 0.25em;
  transition: all 0.25s;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  transform: rotate(0deg);
  border: 0.1em solid black;
  left: 0;
  top: 0;
  width: 1.05em;
  height: 1.05em;
  border-radius: 0.25em;
  transition: all 0.25s, border-width 0.1s;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border-color: #fff0 white white #fff0;
  border-width: 0 0.15em 0.15em 0;
  border-radius: 0em;
  transform: rotate(45deg);
}

</style>


================================================
FILE: Checkboxes/SelfMadeSystem_green-bobcat-29.html
================================================
<label class="container">
  <input type="checkbox">
  <svg viewBox="0 0 64 64" height="2em" width="2em">
    <path d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16" pathLength="575.0541381835938" class="path"></path>
  </svg>
</label>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: checkbox */
.container {
  cursor: pointer;
}

.container input {
  display: none;
}

.container svg {
  overflow: visible;
}

.path {
  fill: none;
  stroke: white;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
  stroke-dasharray: 241 9999999;
  stroke-dashoffset: 0;
}

.container input:checked ~ svg .path {
  stroke-dasharray: 70.5096664428711 9999999;
  stroke-dashoffset: -262.2723388671875;
}

</style>


================================================
FILE: Checkboxes/SharpTH_tricky-yak-97.html
================================================
<label for="cbx" class="cbx">
  <div class="checkmark">
  <input checked="" type="checkbox" id="cbx">
  <div class="flip">
    <div class="front"></div>
      <div class="back">
        <svg viewBox="0 0 16 14" height="14" width="16">
          <path d="M2 8.5L6 12.5L14 1.5"></path>
        </svg>
      </div>
    </div>
  </div>
</label>
<style>
/* From Uiverse.io by SharpTH - Tags: checkbox, flip */
.cbx {
  -webkit-perspective: 20;
  perspective: 20;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -12px;
  border: 2px solid #e8e8eb;
  background: #e8e8eb;
  border-radius: 4px;
  transform: translate3d(0, 0, 0);
  cursor: pointer;
  transition: all 0.3s ease;
}

.cbx:hover {
  border-color: #0b76ef;
}

.flip {
  display: block;
  transition: all 0.4s ease;
  transform-style: preserve-3d;
  position: relative;
  width: 20px;
  height: 20px;
}

#cbx {
  display: none;
}

#cbx:checked + .cbx {
  border-color: #0b76ef;
}

#cbx:checked + .flip {
  transform: rotateY(180deg);
}

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 2px;
}

.front {
  background: #fff;
  z-index: 1;
}

.back {
  transform: rotateY(180deg);
  background: #0b76ef;
  text-align: center;
  color: #fff;
  line-height: 20px;
  box-shadow: 0 0 0 1px #0b76ef;
}

.back svg {
  margin-top: 3px;
  fill: none;
}

.back svg path {
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}



</style>


================================================
FILE: Checkboxes/Shoh2008_bad-emu-73.html
================================================
<div class="checkbox-wrapper-4">
  <input class="inp-cbx" id="morning" type="checkbox">
  <label class="cbx" for="morning"><span>
  <svg width="12px" height="10px">
    
  </svg></span><span>Morning</span></label>
  <svg class="inline-svg">
    <symbol id="check-4" viewBox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </symbol>
  </svg>
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: checkbox */
.checkbox-wrapper-4 * {
  box-sizing: border-box;
  color: white;
}

.checkbox-wrapper-4 .cbx {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s ease;
  display: inline-block;
}

.checkbox-wrapper-4 .cbx:not(:last-child) {
  margin-right: 6px;
}

.checkbox-wrapper-4 .cbx:hover {
  background: rgba(0,119,255,0.06);
}

.checkbox-wrapper-4 .cbx span {
  float: left;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}

.checkbox-wrapper-4 .cbx span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  transform: scale(1);
  border: 1px solid #cccfdb;
  transition: all 0.2s ease;
  box-shadow: 0 1px 1px rgba(0,16,75,0.05);
}

.checkbox-wrapper-4 .cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}

.checkbox-wrapper-4 .cbx span:last-child {
  padding-left: 8px;
  line-height: 18px;
}

.checkbox-wrapper-4 .cbx:hover span:first-child {
  border-color: #07f;
}

.checkbox-wrapper-4 .inp-cbx {
  position: absolute;
  visibility: hidden;
}

.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child {
  background: #07f;
  border-color: #07f;
  animation: wave-4 0.4s ease;
}

.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}

.checkbox-wrapper-4 .inline-svg {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}

@media screen and (max-width: 640px) {
  .checkbox-wrapper-4 .cbx {
    width: 100%;
    display: inline-block;
  }
}

@-moz-keyframes wave-4 {
  50% {
    transform: scale(0.9);
  }
}

@-webkit-keyframes wave-4 {
  50% {
    transform: scale(0.9);
  }
}

@-o-keyframes wave-4 {
  50% {
    transform: scale(0.9);
  }
}

@keyframes wave-4 {
  50% {
    transform: scale(0.9);
  }
}
</style>


================================================
FILE: Checkboxes/Shoh2008_big-deer-80.html
================================================
<div class="checkbox-wrapper-12">
  <div class="cbx">
    <input checked="" type="checkbox" id="cbx-12">
    <label for="cbx-12"></label>
    <svg fill="none" viewBox="0 0 15 14" height="14" width="15">
      <path d="M2 8.36364L6.23077 12L13 2"></path>
    </svg>
  </div>
  
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <filter id="goo-12">
        <feGaussianBlur result="blur" stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
        <feColorMatrix result="goo-12" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -7" mode="matrix" in="blur"></feColorMatrix>
        <feBlend in2="goo-12" in="SourceGraphic"></feBlend>
      </filter>
    </defs>
  </svg>
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: checkbox */
.checkbox-wrapper-12 {
  position: relative;
}

.checkbox-wrapper-12 > svg {
  position: absolute;
  top: -130%;
  left: -170%;
  width: 110px;
  pointer-events: none;
}

.checkbox-wrapper-12 * {
  box-sizing: border-box;
}

.checkbox-wrapper-12 input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  margin: 0;
}

.checkbox-wrapper-12 input[type="checkbox"]:focus {
  outline: 0;
}

.checkbox-wrapper-12 .cbx {
  width: 24px;
  height: 24px;
  top: calc(100px - 12px);
  left: calc(100px - 12px);
}

.checkbox-wrapper-12 .cbx input {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #bfbfc0;
  border-radius: 50%;
}

.checkbox-wrapper-12 .cbx label {
  width: 24px;
  height: 24px;
  background: none;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: trasnlate3d(0, 0, 0);
  pointer-events: none;
}

.checkbox-wrapper-12 .cbx svg {
  position: absolute;
  top: 5px;
  left: 4px;
  z-index: 1;
  pointer-events: none;
}

.checkbox-wrapper-12 .cbx svg path {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 19;
  stroke-dashoffset: 19;
  transition: stroke-dashoffset 0.3s ease;
  transition-delay: 0.2s;
}

.checkbox-wrapper-12 .cbx input:checked + label {
  animation: splash-12 0.6s ease forwards;
}

.checkbox-wrapper-12 .cbx input:checked + label + svg path {
  stroke-dashoffset: 0;
}

@-moz-keyframes splash-12 {
  40% {
    background: #866efb;
    box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb;
  }

  100% {
    background: #866efb;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

@-webkit-keyframes splash-12 {
  40% {
    background: #866efb;
    box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb;
  }

  100% {
    background: #866efb;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

@-o-keyframes splash-12 {
  40% {
    background: #866efb;
    box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb;
  }

  100% {
    background: #866efb;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

@keyframes splash-12 {
  40% {
    background: #866efb;
    box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb;
  }

  100% {
    background: #866efb;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}
</style>


================================================
FILE: Checkboxes/Shoh2008_good-bat-75.html
================================================
<div class="checkbox-wrapper-19">
  <input id="cbtest-19" type="checkbox">
  <label class="check-box" for="cbtest-19">
</label></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: checkbox, about me, add */
.checkbox-wrapper-19 {
  box-sizing: border-box;
  --background-color: #fff;
  --checkbox-height: 25px;
}

@-moz-keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@-webkit-keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }

  50% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

@-webkit-keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }

  50% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

@-moz-keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }

  50% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

.checkbox-wrapper-19 input[type=checkbox] {
  display: none;
}

.checkbox-wrapper-19 .check-box {
  height: var(--checkbox-height);
  width: var(--checkbox-height);
  background-color: transparent;
  border: calc(var(--checkbox-height) * .1) solid #000;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: border-color ease 0.2s;
  -o-transition: border-color ease 0.2s;
  -webkit-transition: border-color ease 0.2s;
  transition: border-color ease 0.2s;
  cursor: pointer;
}

.checkbox-wrapper-19 .check-box::before,
  .checkbox-wrapper-19 .check-box::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  height: 0;
  width: calc(var(--checkbox-height) * .2);
  background-color: #34b93d;
  display: inline-block;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 5px;
  content: " ";
  -webkit-transition: opacity ease 0.5;
  -moz-transition: opacity ease 0.5;
  transition: opacity ease 0.5;
}

.checkbox-wrapper-19 .check-box::before {
  top: calc(var(--checkbox-height) * .72);
  left: calc(var(--checkbox-height) * .41);
  box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.checkbox-wrapper-19 .check-box::after {
  top: calc(var(--checkbox-height) * .37);
  left: calc(var(--checkbox-height) * .05);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
  .checkbox-wrapper-19 .check-box.checked {
  border-color: #34b93d;
}

.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
  .checkbox-wrapper-19 .check-box.checked::after {
  height: calc(var(--checkbox-height) / 2);
  -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  animation: dothabottomcheck-19 0.2s ease 0s forwards;
}

.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
  .checkbox-wrapper-19 .check-box.checked::before {
  height: calc(var(--checkbox-height) * 1.2);
  -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
  animation: dothatopcheck-19 0.4s ease 0s forwards;
}
</style>


================================================
FILE: Checkboxes/Shoh2008_hard-eel-52.html
================================================
<div class="checkbox-wrapper-44">
  <label class="toggleButton">
    <input type="checkbox">
    <div>
      <svg viewBox="0 0 44 44">
        <path transform="translate(-2.000000, -2.000000)" d="M14,24 L21,31 L39.7428882,11.5937758 C35.2809627,6.53125861 30.0333333,4 24,4 C12.95,4 4,12.95 4,24 C4,35.05 12.95,44 24,44 C35.05,44 44,35.05 44,24 C44,19.3 42.5809627,15.1645919 39.7428882,11.5937758"></path>
      </svg>
    </div>
  </label>
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: checkbox */
.checkbox-wrapper-44 input[type="checkbox"] {
  display: none;
  visibility: hidden;
}

.checkbox-wrapper-44 *,
  .checkbox-wrapper-44 *::before,
  .checkbox-wrapper-44 *::after {
  box-sizing: border-box;
}

.checkbox-wrapper-44 .toggleButton {
  cursor: pointer;
  display: block;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform 0.14s ease;
}

.checkbox-wrapper-44 .toggleButton:active {
  transform: rotateX(30deg);
}

.checkbox-wrapper-44 .toggleButton input + div {
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  position: relative;
  width: 44px;
  height: 44px;
}

.checkbox-wrapper-44 .toggleButton input + div svg {
  fill: none;
  stroke-width: 3.6;
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 44px;
  height: 44px;
  display: block;
  position: absolute;
  left: -3px;
  top: -3px;
  right: -3px;
  bottom: -3px;
  z-index: 1;
  stroke-dashoffset: 124.6;
  stroke-dasharray: 0 162.6 133 29.6;
  transition: all 0.4s ease 0s;
}

.checkbox-wrapper-44 .toggleButton input + div:before,
  .checkbox-wrapper-44 .toggleButton input + div:after {
  content: "";
  width: 3px;
  height: 16px;
  background: #000;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 5px;
}

.checkbox-wrapper-44 .toggleButton input + div:before {
  opacity: 0;
  transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  -webkit-animation: bounceInBefore-44 0.3s linear forwards 0.3s;
  animation: bounceInBefore-44 0.3s linear forwards 0.3s;
}

.checkbox-wrapper-44 .toggleButton input + div:after {
  opacity: 0;
  transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  -webkit-animation: bounceInAfter-44 0.3s linear forwards 0.3s;
  animation: bounceInAfter-44 0.3s linear forwards 0.3s;
}

.checkbox-wrapper-44 .toggleButton input:checked + div svg {
  stroke-dashoffset: 162.6;
  stroke-dasharray: 0 162.6 28 134.6;
  transition: all 0.4s ease 0.2s;
}

.checkbox-wrapper-44 .toggleButton input:checked + div:before {
  opacity: 0;
  transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  -webkit-animation: bounceInBeforeDont-44 0.3s linear forwards 0s;
  animation: bounceInBeforeDont-44 0.3s linear forwards 0s;
}

.checkbox-wrapper-44 .toggleButton input:checked + div:after {
  opacity: 0;
  transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  -webkit-animation: bounceInAfterDont-44 0.3s linear forwards 0s;
  animation: bounceInAfterDont-44 0.3s linear forwards 0s;
}

@-webkit-keyframes bounceInBefore-44 {
  0% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.1) translate(-50%, -50%) rotate(45deg);
  }

  80% {
    opacity: 1;
    transform: scale(0.89) translate(-50%, -50%) rotate(45deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(45deg);
  }
}

@keyframes bounceInBefore-44 {
  0% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.1) translate(-50%, -50%) rotate(45deg);
  }

  80% {
    opacity: 1;
    transform: scale(0.89) translate(-50%, -50%) rotate(45deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(45deg);
  }
}

@-webkit-keyframes bounceInAfter-44 {
  0% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.1) translate(-50%, -50%) rotate(-45deg);
  }

  80% {
    opacity: 1;
    transform: scale(0.89) translate(-50%, -50%) rotate(-45deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
  }
}

@keyframes bounceInAfter-44 {
  0% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.1) translate(-50%, -50%) rotate(-45deg);
  }

  80% {
    opacity: 1;
    transform: scale(0.89) translate(-50%, -50%) rotate(-45deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
  }
}

@-webkit-keyframes bounceInBeforeDont-44 {
  0% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  }
}

@keyframes bounceInBeforeDont-44 {
  0% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  }
}

@-webkit-keyframes bounceInAfterDont-44 {
  0% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  }
}

@keyframes bounceInAfterDont-44 {
  0% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  }
}
</style>


================================================
FILE: Checkboxes/Shoh2008_perfect-mouse-3.html
================================================
<div class="checkbox-wrapper-33">
  <label class="checkbox">
    <input type="checkbox" class="checkbox__trigger visuallyhidden">
    <span class="checkbox__symbol">
      <svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 28 28" height="28px" width="28px" class="icon-checkbox" aria-hidden="true">
        <path d="M4 14l8 7L24 7"></path>
      </svg>
    </span>
    <p class="checkbox__textwrapper">Checkbox</p>
  </label>
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: checkbox */
.checkbox-wrapper-33 {
  --s-xsmall: 0.625em;
  --s-small: 1.2em;
  --border-width: 1px;
  --c-primary: #5F11E8;
  --c-primary-20-percent-opacity: rgb(95 17 232 / 20%);
  --c-primary-10-percent-opacity: rgb(95 17 232 / 10%);
  --t-base: 0.4s;
  --t-fast: 0.2s;
  --e-in: ease-in;
  --e-out: cubic-bezier(.11,.29,.18,.98);
}

.checkbox-wrapper-33 .visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.checkbox-wrapper-33 .checkbox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.checkbox-wrapper-33 .checkbox + .checkbox {
  margin-top: var(--s-small);
}

.checkbox-wrapper-33 .checkbox__symbol {
  display: inline-block;
  display: flex;
  margin-right: calc(var(--s-small) * 0.7);
  border: var(--border-width) solid var(--c-primary);
  position: relative;
  border-radius: 0.1em;
  width: 1.5em;
  height: 1.5em;
  transition: box-shadow var(--t-base) var(--e-out), background-color var(--t-base);
  box-shadow: 0 0 0 0 var(--c-primary-10-percent-opacity);
}

.checkbox-wrapper-33 .checkbox__symbol:after {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  width: 0.25em;
  height: 0.25em;
  background-color: var(--c-primary-20-percent-opacity);
  opacity: 0;
  border-radius: 3em;
  transform: scale(1);
  transform-origin: 50% 50%;
}

.checkbox-wrapper-33 .checkbox .icon-checkbox {
  width: 1em;
  height: 1em;
  margin: auto;
  fill: none;
  stroke-width: 3;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  color: var(--c-primary);
  display: inline-block;
}

.checkbox-wrapper-33 .checkbox .icon-checkbox path {
  transition: stroke-dashoffset var(--t-fast) var(--e-in);
  stroke-dasharray: 30px, 31px;
  stroke-dashoffset: 31px;
}

.checkbox-wrapper-33 .checkbox__textwrapper {
  margin: 0;
}

.checkbox-wrapper-33 .checkbox__trigger:checked + .checkbox__symbol:after {
  -webkit-animation: ripple-33 1.5s var(--e-out);
  animation: ripple-33 1.5s var(--e-out);
}

.checkbox-wrapper-33 .checkbox__trigger:checked + .checkbox__symbol .icon-checkbox path {
  transition: stroke-dashoffset var(--t-base) var(--e-out);
  stroke-dashoffset: 0px;
}

.checkbox-wrapper-33 .checkbox__trigger:focus + .checkbox__symbol {
  box-shadow: 0 0 0 0.25em var(--c-primary-20-percent-opacity);
}

@-webkit-keyframes ripple-33 {
  from {
    transform: scale(0);
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: scale(20);
  }
}

@keyframes ripple-33 {
  from {
    transform: scale(0);
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: scale(20);
  }
}
</style>


================================================
FILE: Checkboxes/Shoh2008_proud-sloth-70.html
================================================
<div class="checkbox-wrapper-37">
  <input id="terms-checkbox-37" name="checkbox" type="checkbox">
  <label class="terms-label" for="terms-checkbox-37">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" class="checkbox-svg">
      <mask fill="white" id="path-1-inside-1_476_5-37">
        <rect height="200" width="200"></rect>
      </mask>
      <rect mask="url(#path-1-inside-1_476_5-37)" stroke-width="40" class="checkbox-box" height="200" width="200"></rect>
      <path stroke-width="15" d="M52 111.018L76.9867 136L149 64" class="checkbox-tick"></path>
    </svg>
    <span class="label-text">Checkbox</span>
  </label>
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: checkbox */
.checkbox-wrapper-37 input[type="checkbox"] {
  display: none;
}

.checkbox-wrapper-37 .terms-label {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.checkbox-wrapper-37 .terms-label .label-text {
  margin-left: 10px;
}

.checkbox-wrapper-37 .checkbox-svg {
  width: 30px;
  height: 30px;
}

.checkbox-wrapper-37 .checkbox-box {
  fill: #fff;
  stroke: #ff7a00;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  transition: stroke-dashoffset 0.6s ease-in;
}

.checkbox-wrapper-37 .checkbox-tick {
  stroke: #ff7a00;
  stroke-dasharray: 172;
  stroke-dashoffset: 172;
  transition: stroke-dashoffset 0.6s ease-in;
}

.checkbox-wrapper-37 input[type="checkbox"]:checked + .terms-label .checkbox-box,
  .checkbox-wrapper-37 input[type="checkbox"]:checked + .terms-label .checkbox-tick {
  stroke-dashoffset: 0;
}
</style>


================================================
FILE: Checkboxes/Shubh0408_angry-owl-36.html
================================================
<!-- From Uiverse.io by Shubh0408  - Tags: checkbox, menu, tailwindcss -->
<label class="flex flex-col gap-2 w-8">
  <input class="peer hidden" type="checkbox" />
  <div
    class="rounded-2xl h-[3px] w-1/2 bg-black duration-500 peer-checked:rotate-[225deg] origin-right peer-checked:-translate-x-[12px] peer-checked:-translate-y-[1px]"
  ></div>
  <div
    class="rounded-2xl h-[3px] w-full bg-black duration-500 peer-checked:-rotate-45"
  ></div>
  <div
    class="rounded-2xl h-[3px] w-1/2 bg-black duration-500 place-self-end peer-checked:rotate-[225deg] origin-left peer-checked:translate-x-[12px] peer-checked:translate-y-[1px]"
  ></div>
</label>


    

================================================
FILE: Checkboxes/Shubh0408_bad-vampirebat-82.html
================================================
<!-- From Uiverse.io by Shubh0408  - Tags: checkbox, toggle, play, tailwind, tailwindcss -->
<label
  class="w-9 h-10 cursor-pointer flex flex-col items-center justify-center"
>
  <input class="hidden peer" type="checkbox" />
  <div
    class="w-[50%] h-[2px] bg-white rounded-sm transition-all duration-300 origin-center rotate-90 -translate-x-[0.3rem] translate-y-[0.1rem] peer-checked:translate-y-[0.1rem]"
  ></div>
  <div
    class="w-[50%] h-[2px] bg-white rounded-md transition-all duration-300 origin-center rotate-90 translate-x-[0.3rem] -translate-y-[0.05rem] peer-checked:rotate-[-30deg] peer-checked:translate-y-[0.22rem] peer-checked:translate-x-[0.15rem]"
  ></div>
  <div
    class="w-[50%] h-[2px] bg-white rounded-md transition-all duration-300 origin-center rotate-90 translate-x-[0.3rem] -translate-y-[0.16rem] peer-checked:rotate-[30deg] peer-checked:translate-y-[-0.4rem] peer-checked:translate-x-[0.15rem]"
  ></div>
</label>


    

================================================
FILE: Checkboxes/Shubh0408_pink-cobra-51.html
================================================
<!-- From Uiverse.io by Shubh0408  - Tags: checkbox, hamburger, toggle, menu, close -->
<label>
  <div
    class="w-9 h-10 cursor-pointer flex flex-col items-center justify-center"
  >
    <input class="hidden peer" type="checkbox" />
    <div
      class="w-[50%] h-[2px] bg-black rounded-sm transition-all duration-300 origin-left translate-y-[0.45rem] peer-checked:rotate-[-45deg]"
    ></div>
    <div
      class="w-[50%] h-[2px] bg-black rounded-md transition-all duration-300 origin-center peer-checked:hidden"
    ></div>
    <div
      class="w-[50%] h-[2px] bg-black rounded-md transition-all duration-300 origin-left -translate-y-[0.45rem] peer-checked:rotate-[45deg]"
    ></div>
  </div>
</label>


    

================================================
FILE: Checkboxes/Shubh0408_silly-parrot-64.html
================================================
<!-- From Uiverse.io by Shubh0408  - Tags: checkbox, tailwind, tailwindcss -->
<div class="flex justify-center items-center">
  <label class="container">
    <input
      value="wedding-gift"
      class="peer cursor-pointer hidden after:opacity-100"
      checked="checked"
      type="checkbox"
    />
    <span
      class="inline-block w-5 h-5 border-2 relative cursor-pointer after:content-[''] after:absolute after:top-2/4 after:left-2/4 after:-translate-x-1/2 after:-translate-y-1/2 after:w-[10px] after:h-[10px] after:bg-[#333] after:rounded-[2px] after:opacity-0 peer-checked:after:opacity-100"
    ></span>
  </label>
</div>


    

================================================
FILE: Checkboxes/Smit-Prajapati_popular-wasp-54.html
================================================
<input type="checkbox" class="checkbox">

<style>
/* From Uiverse.io by Smit-Prajapati - Tags: checkbox, cool checkbox, checkmark */
.checkbox {
  appearance: none;
  overflow: hidden;
  min-width: 30px;
  aspect-ratio: 1/1;
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  border: 2px solid rgb(255, 102, 0);
  position: relative;
  transition: all 0.2s ease-in-out;
}

.checkbox::before {
  position: absolute;
  inset: 0;
  content: "";
  font-size: 35px;
  transition: all 0.2s ease-in-out;
}

.checkbox:checked {
  border: 2px solid rgb(255, 212, 59);
  background: linear-gradient(135deg, rgb(255, 212, 59) 0%, rgb(255, 102, 0) 100%);
  box-shadow: -5px -5px 30px rgba(255, 212, 59, 1), 5px 5px 30px rgba(255, 102, 0, 1);
}

.checkbox:checked::before {
  background: linear-gradient(135deg, rgb(255, 212, 59) 0%, rgb(255, 102, 0) 100%);
}
</style>


================================================
FILE: Checkboxes/Smit-Prajapati_white-monkey-91.html
================================================
<input class="checkbox" type="checkbox">

<style>
/* From Uiverse.io by Smit-Prajapati - Tags: checkbox, cool checkbox, check */
.checkbox {
  appearance: none;
  width: 30px;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px solid black;
  position: relative;
  transition: all 0.2s ease-in-out;
}

.checkbox::before {
  font-family: "Quicksand", sans-serif;
  position: absolute;
  bottom: -4px;
  left: 1px;
  content: "✔";
  font-size: 40px;
  color: rgb(255, 153, 0);
  transform: scale(0);
  transition: all 0.2s ease-in-out;
}

.checkbox:checked::before {
  animation: zoom 0.5s ease-in-out;
  transform: scale(1);
}

@keyframes zoom {
  0% {
    transform: scale(0);
  }

  20% {
    transform: scale(1.5);
  }

  40% {
    transform: scale(0.5);
  }

  50% {
    transform: scale(1);
  }

  70% {
    transform: scale(1.2);
  }

  90% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}
</style>


================================================
FILE: Checkboxes/TISEPSE_smooth-quail-14.html
================================================
<div>
  <label class="checkbox-label">
    <input type="checkbox" class="checkbox" />
    <div class="svg-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="1em"
        viewBox="0 0 448 512"
      >
        <path
          d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
        ></path>
      </svg>
    </div>
    <span class="container"></span>
    One</label
  >

  <label class="checkbox-label">
    <input type="checkbox" class="checkbox" />
    <div class="svg-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="1em"
        viewBox="0 0 448 512"
      >
        <path
          d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
        ></path>
      </svg>
    </div>
    <span class="container"></span>
    Two</label
  >

  <label class="checkbox-label">
    <input type="checkbox" class="checkbox" />
    <div class="svg-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="1em"
        viewBox="0 0 448 512"
      >
        <path
          d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
        ></path>
      </svg>
    </div>
    <span class="container"></span>
    Three</label
  >

  <label class="checkbox-label">
    <input type="checkbox" class="checkbox" />
    <div class="svg-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="1em"
        viewBox="0 0 448 512"
      >
        <path
          d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
        ></path>
      </svg>
    </div>
    <span class="container"></span>
    Four</label
  >
</div>

<style>
/* From Uiverse.io by TISEPSE  - Tags: animation, action, checkbox */
.checkbox-label {
  font-size: 22px;
  color: #fefefe;
  padding: 10px 50px 10px 5px;
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
  display: flex;
  position: relative;
  align-items: center;
  transition: all 0.3s;
}

.checkbox {
  width: 35px;
  height: 35px;
  cursor: pointer;
  margin-right: -22px;
  appearance: none;
  border-radius: 5px;
  background-color: #64ccc5;
  z-index: 2;
  transition: all 0.3s;
}

.container {
  width: 35px;
  height: 35px;
  position: relative;
  top: 4px;
  left: -8%;
  border-radius: 5px;
  background-color: #dafffb;
  transition: all 0.3s;
}

.checkbox::before {
  content: "";
  background-color: #ffc8c8;
  position: relative;
  display: flex;
  top: 45%;
  left: 50%;
  width: 55px;
  height: 3px;
  border-radius: 25px;
  transform: translate(100px, 0px) scale(0);
  transition: ease-out 0.15s;
}

.checkbox:checked::before {
  transform: translateX(2em);
  top: 12px;
  transition: ease-out 0.15s;
}

.checkbox:hover {
  transform: translate(4px, 4px);
  transition: ease-out 0.15s;
  background-color: #ffc8c8;
}

.checkbox:checked {
  transform: translate(4px, 4px);
  transition: ease-out 0.15s;
  background-color: #ffc8c8;
}

.svg-icon {
  position: absolute;
  width: 25px;
  height: 25px;
  display: flex;
  z-index: 3;
  top: 35%;
  left: 11%;
  color: #fefefe;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  transform: rotate(0deg) scale(0);
  transition: ease-in 0.2s;
}

.checkbox:checked ~ .svg-icon {
  transform: rotate(360deg) scale(1);
  transition: ease-in 0.2s;
}

</style>
    

================================================
FILE: Checkboxes/TechByElijah_stale-treefrog-11.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
  <div class="glass-effect"></div>
</label>
<style>
/* From Uiverse.io by TechByElijah - Tags: glassmorphism, blue, checkbox, pulse */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  width: 24px;
  height: 24px;
}

  /* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 0.3s ease;
  z-index: 1;
}

.glass-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  height: 14px;
  width: 14px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: transform 0.3s ease;
  z-index: 2;
}

  /* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

  /* Show the glass effect when checked */
.container input:checked ~ .glass-effect {
  transform: translate(-50%, -50%) scale(1);
}

  /* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

  /* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

  /* Style the checkmark/indicator */
.container .checkmark:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/Timbar09_popular-bulldog-40.html
================================================
<label class="checkbox__label" for="checkbox">
  <span class="checkbox__container">
    <input class="checkbox" id="checkbox" type="checkbox" />

    <span class="checkbox__label--text"> Check box. </span>
  </span>
</label>

<style>
/* From Uiverse.io by Timbar09  - Tags: checkbox */
.checkbox__container {
  --primary-clr-1: #2bbee7;
  --primary-clr-2: #0e728e;
  --text-clr-1: #8f8f8f;

  --checkbox-bg-clr: #33333367;
  --checkbox-border-clr: #55555575;

  color: var(--text-clr-1);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.checkbox {
  --dimension: 1.5em;
  --tick-dimension: 0.15em;

  appearance: none;
  margin: 0;
  position: relative;
  width: var(--dimension);
  height: var(--dimension);
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  rotate: 45deg;
}

.checkbox:checked {
  animation: shrink 0.5s ease forwards;
}

.checkbox:not(:checked) {
  animation: grow 0.5s 0.75s ease forwards;
}

@keyframes shrink {
  0% {
    scale: 1;
    background-color: var(--checkbox-bg-clr);
    border: solid 1px var(--checkbox-border-clr);
  }
  50% {
    scale: 0;
    background-color: var(--checkbox-bg-clr);
    border: solid 1px var(--checkbox-border-clr);
  }
  51% {
    scale: 0;
    background-color: transparent;
    border: solid 1px transparent;
  }
  100% {
    scale: 1;
    background-color: transparent;
    border: solid 1px transparent;
  }
}

@keyframes grow {
  0% {
    scale: 0;
    background-color: transparent;
    border: solid 1px transparent;
  }

  100% {
    scale: 1;
    background-color: var(--checkbox-bg-clr);
    border: solid 1px var(--checkbox-border-clr);
  }
}

.checkbox:before,
.checkbox:after {
  content: "";
  position: absolute;
  top: calc(50% - var(--tick-dimension) / 2);
  left: calc(50% - var(--tick-dimension) / 2);
  width: var(--tick-dimension);
  height: var(--tick-dimension);
  border-radius: 10rem;
}

.checkbox::before {
  background-color: transparent;
  top: calc(var(--dimension) * 0.65);
  left: 0;
  width: var(--tick-dimension);
}

.checkbox:not(:checked)::before {
  transition: background-color 0.3s 0.5s ease-in-out, width 0.5s ease-in-out;
}

.checkbox:checked::before {
  background-color: var(--primary-clr-1);
  top: calc(var(--dimension) * 0.65);
  left: 0;
  width: calc(var(--dimension) / 2);
  transition: background-color 0.3s 0.3s ease-in-out,
    width 0.5s 0.75s ease-in-out;
}

.checkbox::after {
  background-color: transparent;
  top: 0;
  left: calc((var(--dimension) * 0.5) - var(--tick-dimension));
  height: var(--tick-dimension);
}

.checkbox:not(:checked)::after {
  transition: background-color 0.3s 0.5s ease-in-out, height 0.5s ease-in-out;
}

.checkbox:checked::after {
  background-color: var(--primary-clr-2);
  top: 0;
  left: calc((var(--dimension) * 0.5) - var(--tick-dimension));
  height: calc(var(--dimension) * 0.75);
  transition: background-color 0.3s 0.3s ease-in-out, height 0.5s 1s ease-in-out;
}

.checkbox__label {
  --hover: #cdcdcd;
  --checked: #8f8f8f49;
  --stroke-dimension: 0.05em;

  cursor: pointer;
  user-select: none;
  scale: 1.5;
  transition: color 0.3s;
}

.checkbox__label:hover {
  color: var(--hover);
}

.checkbox:checked + .checkbox__label--text {
  color: var(--checked);
}

.checkbox__label--text {
  position: relative;
}

.checkbox__label--text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--stroke-dimension));
  width: var(--stroke-dimension);
  height: var(--stroke-dimension);
  margin-right: 0.5em;
  border-radius: 1em;
}

.checkbox__label--text::before {
  background-color: var(--primary-clr-1);
  width: 0;
  transition: width 0.5s, background-color 0.3s 0.5s;
}

.checkbox:checked + .checkbox__label--text::before {
  background-color: var(--checked);
  width: calc(100% + var(--stroke-dimension));
  transition: width 1.25s 0.75s, background-color 0.5s 2s;
}

</style>
    

================================================
FILE: Checkboxes/Tsiangana_hot-panther-73.html
================================================
<label class="ui-bookmark">
  <input type="checkbox" />
  <div class="bookmark">
    <svg
      viewBox="0 0 16 16"
      style="margin-top:4px"
      class="bi bi-heart-fill"
      height="25"
      width="25"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"
        fill-rule="evenodd"
      ></path>
    </svg>
  </div>
</label>

<style>
/* From Uiverse.io by Tsiangana  - Tags: simple, red, checkbox, heart, click effect */
.ui-bookmark {
  --icon-size: 24px;
  --icon-secondary-color: rgb(77, 77, 77);
  --icon-hover-color: rgb(97, 97, 97);
  --icon-primary-color: rgb(252, 54, 54);
  --icon-circle-border: 1px solid var(--icon-primary-color);
  --icon-circle-size: 35px;
  --icon-anmt-duration: 0.3s;
}

.ui-bookmark input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
}

.ui-bookmark .bookmark {
  width: var(--icon-size);
  height: auto;
  fill: var(--icon-secondary-color);
  cursor: pointer;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
}

.bookmark::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  -webkit-box-shadow: 0 30px 0 -4px var(--icon-primary-color),
    30px 0 0 -4px var(--icon-primary-color),
    0 -30px 0 -4px var(--icon-primary-color),
    -30px 0 0 -4px var(--icon-primary-color),
    -22px 22px 0 -4px var(--icon-primary-color),
    -22px -22px 0 -4px var(--icon-primary-color),
    22px -22px 0 -4px var(--icon-primary-color),
    22px 22px 0 -4px var(--icon-primary-color);
  box-shadow: 0 30px 0 -4px var(--icon-primary-color),
    30px 0 0 -4px var(--icon-primary-color),
    0 -30px 0 -4px var(--icon-primary-color),
    -30px 0 0 -4px var(--icon-primary-color),
    -22px 22px 0 -4px var(--icon-primary-color),
    -22px -22px 0 -4px var(--icon-primary-color),
    22px -22px 0 -4px var(--icon-primary-color),
    22px 22px 0 -4px var(--icon-primary-color);
  border-radius: 50%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  padding: 1px;
}

.bookmark::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: var(--icon-circle-border);
  opacity: 0;
}

/* actions */

.ui-bookmark:hover .bookmark {
  fill: var(--icon-hover-color);
}

.ui-bookmark input:checked + .bookmark::after {
  -webkit-animation: circles var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation: circles var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  -webkit-animation-delay: var(--icon-anmt-duration);
  animation-delay: var(--icon-anmt-duration);
}

.ui-bookmark input:checked + .bookmark {
  fill: var(--icon-primary-color);
  -webkit-animation: bookmark var(--icon-anmt-duration) forwards;
  animation: bookmark var(--icon-anmt-duration) forwards;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.ui-bookmark input:checked + .bookmark::before {
  -webkit-animation: circle var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation: circle var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  -webkit-animation-delay: var(--icon-anmt-duration);
  animation-delay: var(--icon-anmt-duration);
}

@-webkit-keyframes bookmark {
  50% {
    -webkit-transform: scaleY(0.6);
    transform: scaleY(0.6);
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@keyframes bookmark {
  50% {
    -webkit-transform: scaleY(0.6);
    transform: scaleY(0.6);
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@-webkit-keyframes circle {
  from {
    width: 0;
    height: 0;
    opacity: 0;
  }

  90% {
    width: var(--icon-circle-size);
    height: var(--icon-circle-size);
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes circle {
  from {
    width: 0;
    height: 0;
    opacity: 0;
  }

  90% {
    width: var(--icon-circle-size);
    height: var(--icon-circle-size);
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes circles {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes circles {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
}

</style>
    

================================================
FILE: Checkboxes/UmangLadha_big-sheep-9.html
================================================
<div class="checkbox-wrapper">
  <input style="display: none;" type="checkbox" id="cbx" class="inp-cbx" />
  <label for="cbx" class="cbx">
    <span>
      <svg viewBox="0 0 12 9" height="9px" width="12px">
        <polyline points="1 5 4 8 11 1"></polyline>
      </svg>
    </span>
    <span>To-do</span>
  </label>
</div>

<style>
/* From Uiverse.io by UmangLadha  - Tags: tooltip, action, checkbox, code, box, cool checkbox */
.checkbox-wrapper .cbx {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.checkbox-wrapper .cbx span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}
.checkbox-wrapper .cbx span:first-child {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: scale(1);
  vertical-align: middle;
  border: 1px solid #b9b8c3;
  transition: all 0.2s ease;
}
.checkbox-wrapper .cbx span:first-child svg {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 6px;
  fill: none;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}
.checkbox-wrapper .cbx span:first-child:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #506eec;
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
  transition-delay: 0.2s;
}
.checkbox-wrapper .cbx span:last-child {
  margin-left: 8px;
}
.checkbox-wrapper .cbx span:last-child:after {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  height: 1px;
  width: 100%;
  background: #b9b8c3;
  transform-origin: 0 0;
  transform: scaleX(0);
}
.checkbox-wrapper .cbx:hover span:first-child {
  border-color: #3c53c7;
}

.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child {
  border-color: #3c53c7;
  background: #3c53c7;
  animation: check-15 0.6s ease;
}
.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}
.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child:before {
  transform: scale(2.2);
  opacity: 0;
  transition: all 0.6s ease;
}
.checkbox-wrapper .inp-cbx:checked + .cbx span:last-child {
  color: #b9b8c3;
  transition: all 0.3s ease;
}
.checkbox-wrapper .inp-cbx:checked + .cbx span:last-child:after {
  transform: scaleX(1);
  transition: all 0.3s ease;
}

@keyframes check-15 {
  50% {
    transform: scale(1.2);
  }
}

</style>
    

================================================
FILE: Checkboxes/Uncannypotato69_afraid-turtle-19.html
================================================
<!-- From Uiverse.io by Uncannypotato69  - Tags: simple, skeuomorphism, checkbox, rounded, click, svg, clean, tailwindcss -->
<label
  for="checkbox"
  class="relative h-[3em] w-[3em] rounded-[1.2em] bg-[#b3fffa] shadow-[inset_-1px_1px_4px_0px_#f0fffe,inset_1px_-1px_4px_0px_#00bdb0,-1px_2px_4px_0px_#00bdb0]"
>
  <input
    type="checkbox"
    name="checkbox"
    id="checkbox"
    class="peer appearance-none"
  />
  <span
    class="absolute left-1/2 top-1/2 h-[2em] w-[2em] -translate-x-1/2 -translate-y-1/2 rounded-[0.8em] bg-[#ccfffc] shadow-[inset_-1px_1px_4px_0px_#f0fffe,inset_1px_-1px_4px_0px_#00bdb0,-1px_1px_2px_0px_#00bdb0] duration-[200ms] peer-checked:shadow-[inset_1px_-1px_4px_0px_#f0fffe,inset_-1px_1px_4px_0px_#00bdb0]"
  >
  </span>
  <svg
    fill="#00756d"
    viewBox="-3.2 -3.2 38.40 38.40"
    xmlns="http://www.w3.org/2000/svg"
    class="absolute left-1/2 top-1/2 h-[2em] w-[2em] -translate-x-1/2 -translate-y-1/2 peer-checked:opacity-0"
  >
    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
    <g
      id="SVGRepo_tracerCarrier"
      stroke-linecap="round"
      stroke-linejoin="round"
    ></g>
    <g id="SVGRepo_iconCarrier">
      <path
        d="M5 16.577l2.194-2.195 5.486 5.484L24.804 7.743 27 9.937l-14.32 14.32z"
      ></path>
    </g>
  </svg>
  <svg
    fill="#00756d"
    viewBox="0 0 1024 1024"
    xmlns="http://www.w3.org/2000/svg"
    class="absolute left-1/2 top-1/2 h-[2em] w-[2em] -translate-x-1/2 -translate-y-1/2 opacity-0 peer-checked:opacity-100"
  >
    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
    <g
      id="SVGRepo_tracerCarrier"
      stroke-linecap="round"
      stroke-linejoin="round"
    ></g>
    <g id="SVGRepo_iconCarrier">
      <path
        d="M697.4 759.2l61.8-61.8L573.8 512l185.4-185.4-61.8-61.8L512 450.2 326.6 264.8l-61.8 61.8L450.2 512 264.8 697.4l61.8 61.8L512 573.8z"
      ></path>
    </g>
  </svg>
</label>


    

================================================
FILE: Checkboxes/Uncannypotato69_tidy-vampirebat-71.html
================================================
<label class="checkboxLabel" for="checkbox">
  <input id="checkbox" name="checkbox" type="checkbox" />
  <span id="bar1" class="bar"></span>
  <span id="bar2" class="bar"></span>
  <span id="bar3" class="bar"></span>
  <span id="bar4" class="bar"></span>
  <span id="bar5" class="bar"></span>
  <span id="bar6" class="bar"></span>
  <span id="bar7" class="bar"></span>
  <span id="bar8" class="bar"></span>
  <span id="nut1" class="nut"></span>
  <span id="nut2" class="nut"></span>
  <span id="nut3" class="nut"></span>
  <span id="nut4" class="nut"></span>
  <span id="nut5" class="nut"></span>
  <span id="nut6" class="nut"></span>
  <span id="nut7" class="nut"></span>
  <span id="nut8" class="nut"></span>
  <span class="cover"></span>
  <span class="cover2">
    <div class="inCover2">
      <div class="rainbow">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </span>
  <svg
    class="lock"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
    <g
      stroke-linejoin="round"
      stroke-linecap="round"
      id="SVGRepo_tracerCarrier"
    ></g>
    <g id="SVGRepo_iconCarrier">
      <path
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="2"
        stroke="#2A3439"
        d="M7 10.0288C7.47142 10 8.05259 10 8.8 10H15.2C15.9474 10 16.5286 10 17 10.0288M7 10.0288C6.41168 10.0647 5.99429 10.1455 5.63803 10.327C5.07354 10.6146 4.6146 11.0735 4.32698 11.638C4 12.2798 4 13.1198 4 14.8V16.2C4 17.8802 4 18.7202 4.32698 19.362C4.6146 19.9265 5.07354 20.3854 5.63803 20.673C6.27976 21 7.11984 21 8.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V14.8C20 13.1198 20 12.2798 19.673 11.638C19.3854 11.0735 18.9265 10.6146 18.362 10.327C18.0057 10.1455 17.5883 10.0647 17 10.0288M7 10.0288V8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8V10.0288"
      ></path>
    </g>
  </svg>
</label>

<style>
/* From Uiverse.io by Uncannypotato69  - Tags: animation, checkbox, neon, rotate, css, cool checkbox, multicolor, pride-month-special */
.checkboxLabel {
  --rotate-offset: 45deg;
  --time-offset: 200ms;
  --translate-offset: 1rem;
  --delay: 250ms;
  --total-duration: calc(var(--time-offset) + var(--delay) * 7);

  position: relative;
  height: 3rem;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform var(--total-duration) ease-in-out;
}

.bar {
  position: absolute;
  height: 3rem;
  width: 0.25rem;
  border-radius: 0.125rem;
  background-color: white;
  top: -50%;
  transform-origin: bottom;
  z-index: 0;
}

#bar1 {
  rotate: calc(var(--rotate-offset));
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 0);
  transform: translateY(calc(var(--translate-offset) * -1));
}
#bar2 {
  rotate: calc(var(--rotate-offset) * 2);
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 1);
  transform: translateY(calc(var(--translate-offset) * -1));
}
#bar3 {
  rotate: calc(var(--rotate-offset) * 3);
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 2);
  transform: translateY(calc(var(--translate-offset) * -1));
}
#bar4 {
  rotate: calc(var(--rotate-offset) * 4);
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 3);
  transform: translateY(calc(var(--translate-offset) * -1));
}
#bar5 {
  rotate: calc(var(--rotate-offset) * 5);
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 4);
  transform: translateY(calc(var(--translate-offset) * -1));
}
#bar6 {
  rotate: calc(var(--rotate-offset) * 6);
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 5);
  transform: translateY(calc(var(--translate-offset) * -1));
}
#bar7 {
  rotate: calc(var(--rotate-offset) * 7);
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 6);
  transform: translateY(calc(var(--translate-offset) * -1));
}
#bar8 {
  rotate: calc(var(--rotate-offset) * 8);
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 7);
  transform: translateY(calc(var(--translate-offset) * -1));
}

#checkbox:checked ~ #bar1 {
  transform: translateY(0);
  background-color: #ffadad;
}
#checkbox:checked ~ #bar2 {
  transform: translateY(0);
  background-color: #ffd6a5;
}
#checkbox:checked ~ #bar3 {
  transform: translateY(0);
  background-color: #fdffb6;
}
#checkbox:checked ~ #bar4 {
  transform: translateY(0);
  background-color: #caffbf;
}
#checkbox:checked ~ #bar5 {
  transform: translateY(0);
  background-color: #9bf6ff;
}
#checkbox:checked ~ #bar6 {
  transform: translateY(0);
  background-color: #a0c4ff;
}
#checkbox:checked ~ #bar7 {
  transform: translateY(0);
  background-color: #bdb2ff;
}
#checkbox:checked ~ #bar8 {
  transform: translateY(0);
  background-color: #ffc6ff;
}

.cover {
  height: 4rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #2a3439;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.checkboxLabel:has(:checked) {
  transform: rotate(-360deg);
}

.cover2 {
  height: 2rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #91a3b0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  outline-width: 0.25rem;
  outline: solid;
  outline-color: #b2ffff;
}

.inCover2 {
  height: 100%;
  aspect-ratio: 1/1;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.inCover2 .rainbow {
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rainbow div {
  flex: 1;
  width: 100%;
}

.rainbow div:nth-child(1) {
  background-color: #ffadad;
}
.rainbow div:nth-child(2) {
  background-color: #ffd6a5;
}
.rainbow div:nth-child(3) {
  background-color: #fdffb6;
}
.rainbow div:nth-child(4) {
  background-color: #caffbf;
}
.rainbow div:nth-child(5) {
  background-color: #9bf6ff;
}
.rainbow div:nth-child(6) {
  background-color: #a0c4ff;
}
.rainbow div:nth-child(7) {
  background-color: #bdb2ff;
}

.nut {
  height: 0.3rem;
  aspect-ratio: 1/1;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  top: 0px;
  transform: translateY(-5px);
  transform-origin: 50% 500%;
}

#nut1 {
  rotate: calc(var(--rotate-offset));
}
#nut2 {
  rotate: calc(var(--rotate-offset) * 2);
}
#nut3 {
  rotate: calc(var(--rotate-offset) * 3);
}
#nut4 {
  rotate: calc(var(--rotate-offset) * 4);
}
#nut5 {
  rotate: calc(var(--rotate-offset) * 5);
}
#nut6 {
  rotate: calc(var(--rotate-offset) * 6);
}
#nut7 {
  rotate: calc(var(--rotate-offset) * 7);
}
#nut8 {
  rotate: calc(var(--rotate-offset) * 8);
}

.lock {
  position: absolute;
  height: 1.5rem;
  aspect-ratio: 1/1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 200ms ease-in;
  transition-delay: var(--total-duration);
}

#checkbox:checked ~ .lock {
  opacity: 1;
}

</style>
    

================================================
FILE: Checkboxes/Uncannypotato69_ugly-shrimp-58.html
================================================
<!-- From Uiverse.io by Uncannypotato69  - Website: https://uiverse.io/PriyanshuGupta28/thin-hound-49 - Name: Priyanshu Gupta - Tags: simple, minimalist, checkbox, cool checkbox, tailwind, tailwindcss -->
<label
  class="relative flex cursor-pointer items-center justify-center gap-[1em]"
  for="star"
>
  <input class="peer appearance-none" id="star" name="star" type="checkbox" />
  <span
    class="absolute left-0 top-1/2 h-[2em] w-[2em] -translate-x-full -translate-y-1/2 rounded-[0.25em] border-[1px] border-black"
  >
  </span>
  <svg
    class="absolute left-0 top-1/2 h-[2em] w-[2em] -translate-x-full -translate-y-1/2 duration-500 ease-out [stroke-dasharray:100] [stroke-dashoffset:100] peer-checked:[stroke-dashoffset:0]"
    viewBox="0 0 38 37"
    fill="none"
    height="37"
    width="38"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M6.617 36.785c-.676-5.093 4.49-10.776 6.318-14.952 1.887-4.31 4.315-10.701 6.055-15.506C20.343 2.59 20.456.693 20.57.789c3.262 2.744 1.697 10.518 2.106 14.675 1.926 19.575 4.62 12.875-7.635 4.43C12.194 17.933 2.911 12.1 1.351 8.82c-1.177-2.477 5.266 0 7.898 0 2.575 0 27.078-1.544 27.907-1.108.222.117-.312.422-.526.554-1.922 1.178-3.489 1.57-5.266 3.046-3.855 3.201-8.602 6.002-12.11 9.691-4.018 4.225-5.388 10.245-11.321 10.245"
      stroke-width="1.5px"
      pathLength="100"
      stroke="#000"
    ></path>
  </svg>
  <p class="text-[1em] font-semibold [user-select:none]">Make the project</p>
</label>


    

================================================
FILE: Checkboxes/WhiteNervosa_green-donkey-82.html
================================================
<div class="container">
    <input type="checkbox" id="cbx2" style="display: none;">
    <label for="cbx2" class="check">
        <svg width="18px" height="18px" viewBox="0 0 18 18">
            <path d="M 1 9 L 1 9 c 0 -5 3 -8 8 -8 L 9 1 C 14 1 17 5 17 9 L 17 9 c 0 4 -4 8 -8 8 L 9 17 C 5 17 1 14 1 9 L 1 9 Z"></path>
            <polyline points="1 9 7 14 15 4"></polyline>
        </svg>
    </label>
</div>
<style>
/* From Uiverse.io by WhiteNervosa - Tags: checkbox, radio */
/* Variation of work by @mrhyddenn for Radios */


.check {
  cursor: pointer;
  position: relative;
  margin: auto;
  width: 18px;
  height: 18px;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0, 0, 0);
}

.check:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(34, 50, 84, 0.03);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.check svg {
  position: relative;
  z-index: 1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #c8ccd4;
  stroke-width: 1.5;
  transform: translate3d(0, 0, 0);
  transition: all 0.2s ease;
}

.check svg path {
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
}

.check svg polyline {
  stroke-dasharray: 22;
  stroke-dashoffset: 66;
}

.check:hover:before {
  opacity: 1;
}

.check:hover svg {
  stroke: var(--accent-color, #a3e583);
}

#cbx2:checked + .check svg {
  stroke: var(--accent-color, #a3e583);
}

#cbx2:checked + .check svg path {
  stroke-dashoffset: 60;
  transition: all 0.3s linear;
}

#cbx2:checked + .check svg polyline {
  stroke-dashoffset: 42;
  transition: all 0.2s linear;
  transition-delay: 0.15s;
}
</style>


================================================
FILE: Checkboxes/WhiteNervosa_orange-chipmunk-72.html
================================================
<div class="customCheckBoxHolder">

    <input type="checkbox" id="cCB1" class="customCheckBoxInput">
    <label for="cCB1" class="customCheckBoxWrapper">
        <div class="customCheckBox">
            <div class="inner">Toggle Me</div>
        </div>
    </label>

</div>
<style>
/* From Uiverse.io by WhiteNervosa - Tags: neumorphism, checkbox, radio */
.customCheckBoxHolder {
  margin: 5px;
  display: flex;
}

.customCheckBox {
  width: fit-content;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  padding: 2px 8px;
  background-color: rgba(0, 0, 0, 0.16);
  border-radius: 0px;
  color: rgba(255, 255, 255, 0.7);
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 300ms;
  transition-property: color, background-color, box-shadow;
  display: flex;
  height: 32px;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px 1px 1px 0px;
  outline: none;
  justify-content: center;
  min-width: 55px;
}

.customCheckBox:hover {
  background-color: #2c2c2c;
  color: white;
  box-shadow: rgba(0, 0, 0, 0.23) 0px -4px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.17) 0px 2px 4px 1px;
}

.customCheckBox .inner {
  font-size: 18px;
  font-weight: 900;
  pointer-events: none;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 300ms;
  transition-property: transform;
  transform: translateY(0px);
}

.customCheckBox:hover .inner {
  transform: translateY(-2px);
}

/* Multiple Checkboxes can be chained together for a radio input */
.customCheckBoxWrapper:first-of-type .customCheckBox {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  border-right: 0px;
}

.customCheckBoxWrapper:last-of-type .customCheckBox {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  border-left: 0px;
}

.customCheckBoxInput {
  display: none;
}

.customCheckBoxInput:checked + .customCheckBoxWrapper .customCheckBox {
  background-color: #2d6737;
  color: white;
  box-shadow: rgba(0, 0, 0, 0.23) 0px -4px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.17) 0px 2px 4px 1px;
}

.customCheckBoxInput:checked + .customCheckBoxWrapper .customCheckBox .inner {
  transform: translateY(-2px);
}

.customCheckBoxInput:checked + .customCheckBoxWrapper .customCheckBox:hover {
  background-color: #34723f;
  box-shadow: rgba(0, 0, 0, 0.26) 0px -4px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.15) 0px 3px 6px 2px;
}

.customCheckBoxWrapper .customCheckBox:hover .inner {
  transform: translateY(-2px);
}
</style>


================================================
FILE: Checkboxes/WrongCodeU_fast-horse-55.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by WrongCodeU - Tags: green, checkbox, shadow */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: #ccc;
  border-radius: 0.2pc;
  box-shadow: 3px 3px grey;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #5ee429;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/aadium_nervous-baboon-15.html
================================================
<label class="container">
  <input type="checkbox">
  <div class="checkmark">
    <svg xml:space="preserve" viewBox="0 0 49.548 49.549" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1">
<g>
	<g>
		<g>
			<path d="M30.203,4.387v4.385c7.653,2.332,13.238,9.451,13.238,17.857c0,10.293-8.373,18.667-18.667,18.667
				S6.106,36.922,6.106,26.629c0-8.405,5.585-15.525,13.238-17.857V4.387C9.323,6.835,1.855,15.866,1.855,26.629
				c0,12.639,10.281,22.92,22.919,22.92s22.92-10.281,22.92-22.92C47.694,15.865,40.224,6.835,30.203,4.387z"></path>
		</g>
		<g>
			<path d="M24.776,27.225c-1.41,0-2.554-1.145-2.554-2.555V2.554c0-1.41,1.144-2.554,2.554-2.554c1.41,0,2.554,1.144,2.554,2.554
				V24.67C27.33,26.08,26.186,27.225,24.776,27.225z"></path>
		</g>
	</g>
</g>
</svg>
  </div>
</label>
<style>
/* From Uiverse.io by aadium - Tags: checkbox */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  height: 70px;
  width: 70px;
  border-radius: 10em;
  background-color: #212121;
  transition: 0.3s;
  box-shadow: 6px 6px 10px #000000,
  -6px -6px 10px #3c3c3c;
}

.checkmark svg {
  width: 45px;
  height: 45px;
  margin-top: 11px;
  margin-left: 12.5px;
  fill: #264d39;
  transition: 0.2s;
}

.checkmark:active {
  box-shadow: 2px 2px 3px #000000,
  -2px -2px 3px #3c3c3c;
}

/* When the checkbox is checked */
.container input:checked ~ .checkmark {
  box-shadow: 4px 4px 6px #000000,
  -4px -4px 6px #3c3c3c;
}

.container input:checked ~ .checkmark svg {
  fill: #00ff7b;
}

.container input:checked ~ .checkmark:active {
  box-shadow: 2px 2px 3px #000000,
  -2px -2px 3px #3c3c3c;
}
</style>


================================================
FILE: Checkboxes/aboalsim114_mean-vampirebat-54.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by aboalsim114 - Tags: red, checkbox */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: flex;
  gap: 10px;
}


/* Create a custom checkbox */
.checkmark {
  position: relative;
  box-shadow: rgb(255, 84, 0) 0px 0px 0px 2px;
  background-color: rgba(16, 16, 16, 0.5);
  height: 20px;
  width: 20px;
  margin-right: 10px;
  flex-shrink: 0;
  margin-top: -1px;
  transition: all 0.2s ease 0s;
  cursor: pointer;
  transform-origin: 0px 10px;
  border-radius: 4px;
  margin: -1px 10px 0px 0px;
  padding: 0px;
  box-sizing: border-box;
}

.container input:checked ~ .checkmark {
  box-shadow: rgb(255, 84, 0) 0px 0px 0px 2px;
  background-color: rgba(245, 24, 24, 0.5);
  height: 20px;
  width: 20px;
  margin-right: 10px;
  flex-shrink: 0;
  margin-top: -1px;
  transition: all 0.2s ease 0s;
  cursor: pointer;
  transform-origin: 0px 10px;
  border-radius: 4px;
  margin: -1px 10px 0px 0px;
  padding: 0px;
  box-sizing: border-box;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
  transition: all 500ms ease-in-out;
}
</style>


================================================
FILE: Checkboxes/adamgiebl_curly-lizard-40.html
================================================
<label class="cyberpunk-checkbox-label">
<input type="checkbox" class="cyberpunk-checkbox">
Check me</label>
<style>
/* From Uiverse.io by adamgiebl - Tags: checkbox */
.cyberpunk-checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #30cfd0;
  border-radius: 5px;
  background-color: transparent;
  display: inline-block;
  position: relative;
  margin-right: 10px;
  cursor: pointer;
}

.cyberpunk-checkbox:before {
  content: "";
  background-color: #30cfd0;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}

.cyberpunk-checkbox:checked:before {
  transform: translate(-50%, -50%) scale(1);
}

.cyberpunk-checkbox-label {
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
}
</style>


================================================
FILE: Checkboxes/adamgiebl_new-dingo-22.html
================================================
<label class="checkbox" for="checkbox1">
  <span class="label">Checkbox</span>
  <input checked="" id="checkbox1" type="checkbox">
  <span class="checkmark"></span>
</label>
<style>
/* From Uiverse.io by adamgiebl - Tags: neumorphism, skeuomorphism, checkbox */
.checkbox {
  display: flex;
  align-items: center;
  margin: 10px;
  font-family: Arial, sans-serif;
  color: black;
}

.checkbox input {
  display: none;
}

.checkbox .checkmark {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background-color: #ffffff2b;
  box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, rgba(0, 0, 0, 0.21) 0px 0px 0px 24px inset,
        #22cc3f 0px 0px 0px 0px inset, rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;
  cursor: pointer;
  position: relative;
}

.checkbox .checkmark::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background-color: #e3e3e3;
  box-shadow: transparent 0px 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 6px 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease-in-out;
}

.checkbox input:checked + .checkmark {
  background-color: #22cc3f;
  box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, #22cc3f 0px 0px 0px 2px inset, #22cc3f 0px 0px 0px 24px inset,
        rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;
}

.checkbox input:checked + .checkmark::after {
  background-color: white;
}

.checkbox .label {
  margin-right: 10px;
  user-select: none;
  font-weight: 700;
  cursor: pointer;
}
</style>


================================================
FILE: Checkboxes/adamgiebl_polite-tiger-12.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<style>
/* From Uiverse.io by adamgiebl - Tags: checkbox */
/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/adamgiebl_proud-donkey-24.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by adamgiebl - Tags: checkbox */
/* Hide the default checkbox */
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.container {
 display: block;
 position: relative;
 cursor: pointer;
 font-size: 20px;
 user-select: none;
}

/* Create a custom checkbox */
.checkmark {
 position: relative;
 top: 0;
 left: 0;
 height: 1.3em;
 width: 1.3em;
 background-color: #ccc;
 transition: all 0.3s;
 border-radius: 5px;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
 background-color: #47da99;
 animation: pop 0.5s;
 animation-direction: alternate;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
 left: 0.45em;
 top: 0.25em;
 width: 0.25em;
 height: 0.5em;
 border: solid white;
 border-width: 0 0.15em 0.15em 0;
 transform: rotate(45deg);
}

@keyframes pop {
 0% {
  transform: scale(1);
 }

 50% {
  transform: scale(0.9);
 }

 100% {
  transform: scale(1);
 }
}
</style>


================================================
FILE: Checkboxes/ahmed150up_dull-owl-87.html
================================================
<label class="lock-checkbox">
  <input id="lock" type="checkbox">
  <span class="lock-icon">
    <svg viewBox="0 0 24 24">
      <path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM8.9 6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2H8.9V6z"></path>
    </svg>
  </span>
</label>

<style>
/* From Uiverse.io by ahmed150up - Tags: checkbox, lock */
.lock-checkbox {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.lock-checkbox input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

.lock-icon {
  fill: #00ff40;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  transition: all 0.3s;
  cursor: pointer;
}

.lock-checkbox input[type="checkbox"]:checked + .lock-icon {
  fill: #ff0000;
}

</style>


================================================
FILE: Checkboxes/ahmed150up_strange-fox-68.html
================================================
<input type="checkbox" id="star">
<label for="star">
  <svg viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
  </svg>
</label>

<style>
/* From Uiverse.io by ahmed150up - Tags: checkbox, star */
input[type="checkbox"] {
  display: none;
}

label svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

input[type="checkbox"]:checked + label svg {
  fill: #FFC107;
  animation: pop_42 0.5s ease-out;
}

@keyframes pop_42 {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

</style>


================================================
FILE: Checkboxes/ahmedyasserdev_spicy-jellyfish-41.html
================================================
<input id="burger-checkbox" type="checkbox" />
<label class="burger" for="burger-checkbox">
  <span></span>
  <span></span>
  <span></span>
</label>

<style>
/* From Uiverse.io by ahmedyasserdev  - Tags: checkbox, hamburger, rotate, menu */
.burger {
  display: inline-block;
  cursor: pointer;
  z-index: 1000;
}

.burger span {
  display: block;
  width: 30px;
  height: 3px;
  background: #333;
  margin: 6px 0;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    opacity 0.3s ease;
}

#burger-checkbox {
  display: none;
}

#burger-checkbox:checked + .burger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

#burger-checkbox:checked + .burger span:nth-child(2) {
  opacity: 0;
  transform: translateX(-20px);
}

#burger-checkbox:checked + .burger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

</style>
    

================================================
FILE: Checkboxes/alexmaracinaru_shy-treefrog-42.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by alexmaracinaru - Tags: neumorphism, checkbox */
/* Hide the default checkbox */
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.container {
 border-radius: 9px;
 display: block;
 position: relative;
 cursor: pointer;
 font-size: 20px;
 user-select: none;
 box-shadow: rgba(139, 18, 113, 0.2) 0px 8px 24px;
 background-image: linear-gradient(45deg, #f3d5f7, #fbf6e7, #e6fcf5);
}

/* Create a custom checkbox */
.checkmark {
 border-radius: 9px;
 position: relative;
 top: 0;
 left: 0;
 height: 1.3em;
 width: 1.3em;
 background-color: linear-gradient(45deg, #f8e7fa, #fbf6e7, #e6fcf5);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
 left: 0.45em;
 top: 0.25em;
 width: 0.25em;
 height: 0.5em;
 border: solid rgb(233, 182, 182);
 border-width: 0 0.15em 0.15em 0;
 transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/andrew-demchenk0_bright-tiger-84.html
================================================
<label class="container">
  <input type="checkbox">
  <svg id="Glyph" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M29.845,17.099l-2.489,8.725C26.989,27.105,25.804,28,24.473,28H11c-0.553,0-1-0.448-1-1V13  c0-0.215,0.069-0.425,0.198-0.597l5.392-7.24C16.188,4.414,17.05,4,17.974,4C19.643,4,21,5.357,21,7.026V12h5.002  c1.265,0,2.427,0.579,3.188,1.589C29.954,14.601,30.192,15.88,29.845,17.099z" id="XMLID_254_"></path><path d="M7,12H3c-0.553,0-1,0.448-1,1v14c0,0.552,0.447,1,1,1h4c0.553,0,1-0.448,1-1V13C8,12.448,7.553,12,7,12z   M5,25.5c-0.828,0-1.5-0.672-1.5-1.5c0-0.828,0.672-1.5,1.5-1.5c0.828,0,1.5,0.672,1.5,1.5C6.5,24.828,5.828,25.5,5,25.5z" id="XMLID_256_"></path></svg>
</label>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: checkbox, thumb, like */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  user-select: none;
}

svg {
  position: relative;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  transition: all 0.3s;
  fill: #666;
}

svg:hover {
  transform: scale(1.1) rotate(-10deg);
}

.container input:checked ~ svg {
  fill: #2196F3;
}

</style>


================================================
FILE: Checkboxes/andrew-demchenk0_clever-cobra-93.html
================================================
<label class="container">
  <input type="checkbox">
  <svg id="Glyph" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M2.156,14.901l2.489-8.725C5.012,4.895,6.197,4,7.528,4h13.473C21.554,4,22,4.448,22,5v14  c0,0.215-0.068,0.425-0.197,0.597l-5.392,7.24C15.813,27.586,14.951,28,14.027,28c-1.669,0-3.026-1.357-3.026-3.026V20H5.999  c-1.265,0-2.427-0.579-3.188-1.589C2.047,17.399,1.809,16.12,2.156,14.901z" id="XMLID_259_"></path><path d="M25.001,20h4C29.554,20,30,19.552,30,19V5c0-0.552-0.446-1-0.999-1h-4c-0.553,0-1,0.448-1,1v14  C24.001,19.552,24.448,20,25.001,20z M27.001,6.5c0.828,0,1.5,0.672,1.5,1.5c0,0.828-0.672,1.5-1.5,1.5c-0.828,0-1.5-0.672-1.5-1.5  C25.501,7.172,26.173,6.5,27.001,6.5z" id="XMLID_260_"></path></svg>
</label>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: checkbox, thumb, dislike */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  user-select: none;
}

svg {
  position: relative;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  transition: all 0.3s;
  fill: #666;
}

svg:hover {
  transform: scale(1.1) rotate(-10deg);
}

.container input:checked ~ svg {
  fill: rgb(185, 51, 51);
}

</style>


================================================
FILE: Checkboxes/andrew-demchenk0_happy-vampirebat-41.html
================================================
<label class="container">
  <input type="checkbox">
  <svg id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M16.4,4C14.6,4,13,4.9,12,6.3C11,4.9,9.4,4,7.6,4C4.5,4,2,6.5,2,9.6C2,14,12,22,12,22s10-8,10-12.4C22,6.5,19.5,4,16.4,4z"></path></svg>
</label>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: red, checkbox, like, heart */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.container svg {
  position: relative;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  transition: all 0.3s;
  fill: #666;
}

.container svg:hover {
  transform: scale(1.1);
}

.container input:checked ~ svg {
  fill: #E3474F;
}

</style>


================================================
FILE: Checkboxes/andrew-demchenk0_light-lionfish-40.html
================================================
<label class="container">
  <input type="checkbox">
  <svg height="24px" id="Layer_1" version="1.2" viewBox="0 0 24 24" width="24px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><path d="M9.362,9.158c0,0-3.16,0.35-5.268,0.584c-0.19,0.023-0.358,0.15-0.421,0.343s0,0.394,0.14,0.521    c1.566,1.429,3.919,3.569,3.919,3.569c-0.002,0-0.646,3.113-1.074,5.19c-0.036,0.188,0.032,0.387,0.196,0.506    c0.163,0.119,0.373,0.121,0.538,0.028c1.844-1.048,4.606-2.624,4.606-2.624s2.763,1.576,4.604,2.625    c0.168,0.092,0.378,0.09,0.541-0.029c0.164-0.119,0.232-0.318,0.195-0.505c-0.428-2.078-1.071-5.191-1.071-5.191    s2.353-2.14,3.919-3.566c0.14-0.131,0.202-0.332,0.14-0.524s-0.23-0.319-0.42-0.341c-2.108-0.236-5.269-0.586-5.269-0.586    s-1.31-2.898-2.183-4.83c-0.082-0.173-0.254-0.294-0.456-0.294s-0.375,0.122-0.453,0.294C10.671,6.26,9.362,9.158,9.362,9.158z"></path></g></g></svg>
</label>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: yellow, checkbox, star */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.container svg {
  position: relative;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  transition: all 0.3s;
  fill: #666;
}

.container svg:hover {
  transform: scale(1.1);
}

.container input:checked ~ svg {
  fill: #ffeb49;
}

</style>


================================================
FILE: Checkboxes/andrew-demchenk0_nasty-frog-73.html
================================================
<label class="theme">
  <input class="input" checked="checked" type="checkbox">
  <svg width="24" viewBox="0 0 24 24" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" height="24" fill="none" class="icon icon-sun"><circle r="5" cy="12" cx="12"></circle><line y2="3" y1="1" x2="12" x1="12"></line><line y2="23" y1="21" x2="12" x1="12"></line><line y2="5.64" y1="4.22" x2="5.64" x1="4.22"></line><line y2="19.78" y1="18.36" x2="19.78" x1="18.36"></line><line y2="12" y1="12" x2="3" x1="1"></line><line y2="12" y1="12" x2="23" x1="21"></line><line y2="18.36" y1="19.78" x2="5.64" x1="4.22"></line><line y2="4.22" y1="5.64" x2="19.78" x1="18.36"></line></svg>
  <svg viewBox="0 0 24 24" class="icon icon-moon"><path d="m12.3 4.9c.4-.2.6-.7.5-1.1s-.6-.8-1.1-.8c-4.9.1-8.7 4.1-8.7 9 0 5 4 9 9 9 3.8 0 7.1-2.4 8.4-5.9.2-.4 0-.9-.4-1.2s-.9-.2-1.2.1c-1 .9-2.3 1.4-3.7 1.4-3.1 0-5.7-2.5-5.7-5.7 0-1.9 1.1-3.8 2.9-4.8zm2.8 12.5c.5 0 1 0 1.4-.1-1.2 1.1-2.8 1.7-4.5 1.7-3.9 0-7-3.1-7-7 0-2.5 1.4-4.8 3.5-6-.7 1.1-1 2.4-1 3.8-.1 4.2 3.4 7.6 7.6 7.6z"></path></svg>
</label>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: animation, switch, checkbox, moon, sun, theme-switch, switcher */
.theme {
  --bg-color: #fff;
  --main-color: #323232;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: var(--bg-color);
  border-radius: 100%;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
}

.input {
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0;
}

.icon {
  position: absolute;
  top: calc(50% -13px);
  left: calc(50% -13px);
  width: 26px;
  height: 26px;
}

.icon.icon-moon {
  fill: var(--main-color);
}

.icon.icon-sun {
  stroke: var(--main-color);
  display: none;
}

.input:checked ~ .icon.icon-sun {
  display: block;
}

.input:checked ~ .icon.icon-moon {
  display: none;
}

.theme:active {
  box-shadow: 0px 0px var(--main-color);
  transform: translate(3px, 3px);
}
</style>


================================================
FILE: Checkboxes/andrew-demchenk0_rotten-catfish-34.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: blue, checkbox, transition, checkmark, box-shadow */
.container {
  --input-focus: #2d8cf0;
  --input-out-of-focus: #ccc;
  --bg-color: #fff;
  --bg-color-alt: #666;
  --main-color: #323232;
  position: relative;
  cursor: pointer;
}

.container input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  width: 30px;
  height: 30px;
  position: relative;
  top: 0;
  left: 0;
  border: 2px solid var(--main-color);
  border-radius: 5px;
  box-shadow: 4px 4px var(--main-color);
  background-color: var(--input-out-of-focus);
  transition: all 0.3s;
}

.container input:checked ~ .checkmark {
  background-color: var(--input-focus);
}

.checkmark:after {
  content: "";
  width: 7px;
  height: 15px;
  position: absolute;
  top: 2px;
  left: 8px;
  display: none;
  border: solid var(--bg-color);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.container input:checked ~ .checkmark:after {
  display: block;
}

</style>


================================================
FILE: Checkboxes/barisdogansutcu_white-sloth-20.html
================================================
<div class="volume">
  <input type="checkbox" class="volume-input" />
  <div class="volume-icon">
    <svg
      viewBox="0 0 24 24"
      width="24"
      height="24"
      stroke="currentColor"
      stroke-width="2"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="volume-svg"
    >
      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
      <path
        d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"
      ></path>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by barisdogansutcu  - Tags: button, checkbox, volume */
.volume {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background-color: rgb(205, 191, 247);
  overflow: hidden;
  position: relative;
}
.volume-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
  overflow: hidden;
  position: relative;
}
.volume-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 999;
}
.volume-icon:before {
  content: "";
  display: flex;
  width: 0px;
  height: 0px;
  border-radius: 100%;
  transition: all 0.2s ease;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(32, 33, 36);
}
.volume-input:checked + .volume-icon:before {
  width: calc(100% + 4px);
  height: calc(100% + 4px);
}
.volume-svg {
  z-index: 2;
  color: rgb(32, 33, 36);
  height: 30px;
  width: 30px;
}
.volume-input:checked + .volume-icon svg {
  color: rgb(255, 255, 255);
}

</style>
    

================================================
FILE: Checkboxes/bimbx_spotty-swan-18.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by bimbx - Tags: checkbox */
/* Hide the default checkbox */
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.container {
 display: block;
 position: relative;
 cursor: pointer;
 font-size: 20px;
 user-select: none;
}

/* Create a custom checkbox */
.checkmark {
 position: relative;
 top: 0;
 left: 0;
 height: 1.3em;
 width: 1.3em;
 background: #606062;
 border-radius: 5px;
 box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.30), 0px 1px 1px rgba(0,5);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
 background-image: linear-gradient(#b9e9b3,#a8e4a0)
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
 left: 0.45em;
 top: 0.25em;
 width: 0.25em;
 height: 0.5em;
 border: solid white;
 border-width: 0 0.15em 0.15em 0;
 transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/bociKond_spotty-elephant-13.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by bociKond - Tags: checkbox, pulse, color */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 1.5rem;
  user-select: none;
}

/* Create a custom checkbox */
.checkmark {
  --clr: #0B6E4F;
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: #ccc;
  border-radius: 50%;
  transition: 300ms;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: var(--clr);
  border-radius: .5rem;
  animation: pulse 500ms ease-in-out;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid #E0E0E2;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 #0B6E4F90;
    rotate: 20deg;
  }

  50% {
    rotate: -20deg;
  }

  75% {
    box-shadow: 0 0 0 10px #0B6E4F60;
  }

  100% {
    box-shadow: 0 0 0 13px #0B6E4F30;
    rotate: 0;
  }
}
</style>


================================================
FILE: Checkboxes/boryanakrasteva_calm-lionfish-10.html
================================================
<label class="checkbox-btn">
    <label for="checkbox"></label>
    <input id="checkbox" type="checkbox">
    <span class="checkmark"></span>
</label>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: checkbox */
/* Customize the label (the checkbox-btn) */
.checkbox-btn {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-btn input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-btn label {
  cursor: pointer;
  font-size: 14px;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border: 2.5px solid #ffffff;
  transition: .2s linear;
}
.checkbox-btn input:checked ~ .checkmark {
  background-color: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  visibility: hidden;
  opacity: 0;
  left: 50%;
  top: 40%;
  width: 10px;
  height: 14px;
  border: 2px solid #0ea021;
  filter: drop-shadow(0px 0px 10px #0ea021);
  border-width: 0 2.5px 2.5px 0;
  transition: .2s linear;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.2);
}

/* Show the checkmark when checked */
.checkbox-btn input:checked ~ .checkmark:after {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  animation: pulse 1s ease-in;
}

.checkbox-btn input:checked ~ .checkmark {
  transform: rotate(45deg);
  border: none;
}

@keyframes pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1.6);
  }
}


</style>


================================================
FILE: Checkboxes/boryanakrasteva_wonderful-deer-76.html
================================================
<label class="checkbox-btn">
    <label for="checkbox"></label>
    <input id="checkbox" type="checkbox">
    <span class="checkmark"></span>
</label>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: checkbox */
/* Customize the label (the checkbox-btn) */
.checkbox-btn {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-btn input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-btn label {
  cursor: pointer;
  font-size: 14px;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  border-radius: 5px;
  border: 3px solid #1663a7;
}
.checkbox-btn input:checked ~ .checkmark {
  background-color: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  visibility: hidden;
  opacity: 0;
  left: 3.5px;
  top: 0.5px;
  width: 3.5px;
  height: 6px;
  border: 2.5px solid #1663a7;
  border-width: 0 2.5px 2.5px 0;
  transition: .3s ease-in-out;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Show the checkmark when checked */
.checkbox-btn input:checked ~ .checkmark:after {
  visibility: visible;
  opacity: 1;
}


</style>


================================================
FILE: Checkboxes/catraco_brown-dodo-68.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
    <svg class="bell-regular" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
      <path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path>
    </svg>
    <svg class="bell-solid" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
      <path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"></path>
    </svg></label>
<style>
/* From Uiverse.io by catraco - Tags: icon, notification, checkbox, animated, light&dark, variables */
/*------ Settings ------*/
.container {
  --color: #a5a5b0;
  --size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-size: var(--size);
  user-select: none;
  fill: var(--color);
}

.container .bell-regular {
  position: absolute;
  animation: keyframes-fill .5s;
}

.container .bell-solid {
  position: absolute;
  display: none;
  animation: keyframes-fill .5s;
}

/* ------ On check event ------ */
.container input:checked ~ .bell-regular {
  display: none;
}

.container input:checked ~ .bell-solid {
  display: block;
}

/* ------ Hide the default checkbox ------ */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* ------ Animation ------ */
@keyframes keyframes-fill {
  0% {
    opacity: 0;
  }

  25% {
    transform: rotate(25deg);
  }

  50% {
    transform: rotate(-20deg) scale(1.2);
  }

  75% {
    transform: rotate(15deg);
  }
}
</style>


================================================
FILE: Checkboxes/catraco_hungry-squid-59.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark"></div>
  <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" class="celebrate">
      <polygon points="0,0 10,10"></polygon>
      <polygon points="0,25 10,25"></polygon>
      <polygon points="0,50 10,40"></polygon>
      <polygon points="50,0 40,10"></polygon>
      <polygon points="50,25 40,25"></polygon>
      <polygon points="50,50 40,40"></polygon>
    </svg>
</label>
<style>
/* From Uiverse.io by catraco - Tags: checkbox, animated, click animation, cool checkbox, checkmark */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  border-radius: 50%;
  background-color: white;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  transition: .3s;
  transform: scale(0);
  border-radius: 50%;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #20c580;
  transform: scale(1);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

.container input:checked ~ .celebrate {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.30em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

.container .celebrate {
  position: absolute;
  transform-origin: center;
  animation: kfr-celebrate .4s;
  animation-fill-mode: forwards;
  display: none;
  stroke: #20c580;
}

@keyframes kfr-celebrate {
  0% {
    transform: scale(0);
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1.2);
    opacity: 0;
    display: none;
  }
}
</style>


================================================
FILE: Checkboxes/catraco_plastic-moth-91.html
================================================
<div class="heart-container" title="Like">
            <input type="checkbox" class="checkbox" id="Give-It-An-Id">
            <div class="svg-container">
                <svg viewBox="0 0 24 24" class="svg-outline" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z">
                    </path>
                </svg>
                <svg viewBox="0 0 24 24" class="svg-filled" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z">
                    </path>
                </svg>
                <svg class="svg-celebrate" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
                    <polygon points="10,10 20,20"></polygon>
                    <polygon points="10,50 20,50"></polygon>
                    <polygon points="20,80 30,70"></polygon>
                    <polygon points="90,10 80,20"></polygon>
                    <polygon points="90,50 80,50"></polygon>
                    <polygon points="80,80 70,70"></polygon>
                </svg>
            </div>
        </div>
<style>
/* From Uiverse.io by catraco - Tags: checkbox, like, heart, hover effect */
.heart-container {
  --heart-color: rgb(255, 91, 137);
  position: relative;
  width: 50px;
  height: 50px;
  transition: .3s;
}

.heart-container .checkbox {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 20;
  cursor: pointer;
}

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

.heart-container .svg-outline,
        .heart-container .svg-filled {
  fill: var(--heart-color);
  position: absolute;
}

.heart-container .svg-filled {
  animation: keyframes-svg-filled 1s;
  display: none;
}

.heart-container .svg-celebrate {
  position: absolute;
  animation: keyframes-svg-celebrate .5s;
  animation-fill-mode: forwards;
  display: none;
  stroke: var(--heart-color);
  fill: var(--heart-color);
  stroke-width: 2px;
}

.heart-container .checkbox:checked~.svg-container .svg-filled {
  display: block
}

.heart-container .checkbox:checked~.svg-container .svg-celebrate {
  display: block
}

@keyframes keyframes-svg-filled {
  0% {
    transform: scale(0);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1);
    filter: brightness(1.5);
  }
}

@keyframes keyframes-svg-celebrate {
  0% {
    transform: scale(0);
  }

  50% {
    opacity: 1;
    filter: brightness(1.5);
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
    display: none;
  }
}
</style>


================================================
FILE: Checkboxes/catraco_terrible-lion-20.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="50px" width="50px" class="like">
    <path d="M8 10V20M8 10L4 9.99998V20L8 20M8 10L13.1956 3.93847C13.6886 3.3633 14.4642 3.11604 15.1992 3.29977L15.2467 3.31166C16.5885 3.64711 17.1929 5.21057 16.4258 6.36135L14 9.99998H18.5604C19.8225 9.99998 20.7691 11.1546 20.5216 12.3922L19.3216 18.3922C19.1346 19.3271 18.3138 20 17.3604 20L8 20"></path>
  </svg>
  <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" class="celebrate">
      <polygon points="0,0 10,10"></polygon>
      <polygon points="0,25 10,25"></polygon>
      <polygon points="0,50 10,40"></polygon>
      <polygon points="50,0 40,10"></polygon>
      <polygon points="50,25 40,25"></polygon>
      <polygon points="50,50 40,40"></polygon>
    </svg>
</label>
<style>
/* From Uiverse.io by catraco - Tags: checkbox, like, svg */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.container input:checked ~ .like {
  animation: kfs-fill-like .5s forwards;
}

.container .like {
  fill: none;
  stroke: white;
}

.container input:checked ~ .celebrate {
  display: block;
}

.container .celebrate {
  position: absolute;
  animation: kfs-celebrate 1s;
  animation-fill-mode: forwards;
  display: none;
  stroke: white;
}

@keyframes kfs-celebrate {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1.5) rotate(180deg);
    opacity: 0;
    display: none;
  }
}

@keyframes kfs-fill-like {

  50% {
    fill: white;
    stroke: white;
    transform: scale(1.2);
  }

  100% {
    fill: white;
    stroke: white;
  }
}
</style>


================================================
FILE: Checkboxes/cbolson_calm-wasp-75.html
================================================
<form class="my-form">
  <div>
    <input id="check-1" type="checkbox" />
    <label for="check-1">Checkbox 1</label>
  </div>
  <div>
    <input checked="" id="check-2" type="checkbox" />
    <label for="check-2">Checkbox 2</label>
  </div>
  <div>
    <input id="check-3" type="checkbox" />
    <label for="check-3">Checkbox 3</label>
  </div>
  <div>
    <input id="check-4" type="checkbox" />
    <label for="check-4">Checkbox 4</label>
  </div>
</form>

<style>
/* From Uiverse.io by cbolson  - Tags: checkbox */
.my-form {
  --_clr-primary: #666;
  --_clr-hover: #f33195;
  --_clr-checked: #127acf;
}
.my-form > div {
  --_clr-current: var(--_clr-primary);

  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.my-form > div + div {
  margin-block-start: 0.5rem;
}
.my-form label {
  cursor: pointer;
  color: var(--_clr-current);
  transition: color 150ms ease-in-out;
}

/* styled checkbox */
.my-form input[type="checkbox"] {
  appearance: none;
  outline: none;
  width: 1.5rem;
  height: 1.5rem;
  aspect-ratio: 1;
  padding: 0.25rem;
  background: transparent;
  border: 1px solid var(--_clr-current);
  border-radius: 2px;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.my-form input[type="checkbox"]::after {
  content: "\2714";
  opacity: 0;
  transition: opacity 150ms ease-in-out;
  color: var(--_clr-checked);
  font-size: inherit;
  font-family: inherit;
}

.my-form label:hover,
.my-form input[type="checkbox"]:focus-visible,
.my-form input[type="checkbox"]:focus-visible + label,
.my-form input[type="checkbox"]:hover,
.my-form input[type="checkbox"]:hover + label {
  --_clr-current: var(--_clr-hover);
}
.my-form input[type="checkbox"]:focus-visible::after,
.my-form input[type="checkbox"]:hover::after {
  opacity: 0.5;
  color: var(--_clr-hover);
}

.my-form input[type="checkbox"]:checked + label:not(:hover),
.my-form input[type="checkbox"]:checked:not(:hover) {
  --_clr-current: var(--_clr-checked);
}
.my-form input[type="checkbox"]:checked::after {
  opacity: 1;
}

</style>
    

================================================
FILE: Checkboxes/csemszepp_calm-grasshopper-57.html
================================================
<div class="container">
      <label>
        <input class="play-btn" type="checkbox">
        <div class="play-icon"></div>
        <div class="pause-icon"></div>
      </label>
    </div>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/RitikaAgrawal08/pen/eYGXQLz - Tags: checkbox, play, music player */
.container {
  width: 120px;
  height: 120px;
  position: relative;
  border-radius: 50%;
}

.play-btn {
  position: absolute;
  appearance: none;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(#ff6347, #ff6347);
  cursor: pointer;
  outline: none;
}

.play-btn::before {
  content: "";
  position: absolute;
  width: 93%;
  height: 93%;
  background-color: #000;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.play-btn:checked {
  animation: borderAnimate 700ms ease-in-out 1;
  animation-fill-mode: forwards;
}

@keyframes borderAnimate {
  0% {
    transform: rotate(0);
    background: conic-gradient(#ff6347, transparent 20%);
  }

  80% {
    background: conic-gradient(#ff6347, transparent 90%);
  }

  100% {
    transform: rotate(360deg);
    background: conic-gradient(#ff6347, #ff6347);
  }
}

.play-icon {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 60%;
  top: 50%;
  background-color: #ff6347;
  transform: translate(-60%, -50%) rotate(90deg);
  clip-path: polygon(50% 15%, 0% 100%, 100% 100%);
  transition: all 400ms ease-in-out;
  cursor: pointer;
}

.play-btn:checked + .play-icon {
  clip-path: polygon(0 100%, 0% 100%, 100% 100%);
}

.pause-icon {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.pause-icon::before {
  content: "";
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #ff6347;
  left: 0;
}

.pause-icon::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  background-color: #ff6347;
  right: 0;
}

.play-btn:checked ~ .pause-icon::before {
  animation: reveal 300ms ease-in-out 350ms 1;
  animation-fill-mode: forwards;
}

.play-btn:checked ~ .pause-icon::after {
  animation: reveal 300ms ease-in-out 600ms 1;
  animation-fill-mode: forwards;
}

@keyframes reveal {
  0% {
    width: 0;
  }

  100% {
    width: 35%;
  }
}
</style>


================================================
FILE: Checkboxes/csemszepp_unlucky-mole-23.html
================================================
<label><input value="on" name="dummy" type="checkbox" class="bubble"></label>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/jkantner/pen/GRqrvJa - Tags: red, green, checkbox */
:root {
  --bubbleTiming: cubic-bezier(0.5,0.15,0.25,1.75);
  font-size: calc(40px + (60 - 40) * (100% - 320px) / (1280 - 320));
}

label, .bubble {
  display: block;
  -webkit-tap-highlight-color: transparent;
}

label {
  animation: float 4s ease-in-out infinite;
}

.bubble, .bubble:before, .bubble:after {
  transition-duration: 0.2s;
}

.bubble, .bubble:after {
  border-radius: 50%;
}

.bubble {
  background-image: radial-gradient(8% 8% at 22% 28%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 23% 27%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 24% 26%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 25% 25%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 26% 24%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 27% 23%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 28% 22%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%);
  box-shadow: 0 -0.06em 0.1em hsl(0,90%,100%) inset,
		0 -0.15em 0.4em hsl(0,90%,45%) inset,
		0 0.05em 0.05em hsl(0,90%,45%) inset,
		0.05em 0 0.1em hsl(0,90%,100%) inset,
		-0.05em 0 0.1em hsl(0,90%,100%) inset,
		0 0.1em 0.4em hsl(0,90%,60%) inset;
  cursor: pointer;
  position: relative;
  width: 3em;
  height: 3em;
  transform-style: preserve-3d;
  transition-property: box-shadow, transform, width, height;
  transition-timing-function: ease-in-out, ease-in-out, var(--bubbleTiming), var(--bubbleTiming);
  will-change: transform;
  -webkit-appearance: none;
  appearance: none;
  z-index: 0;
}

.bubble:before, .bubble:after {
  content: "";
  display: block;
  position: absolute;
  transition-timing-function: var(--bubbleTiming);
}

.bubble:before {
  border-radius: 0.75em;
  box-shadow: 0 0 0 0.5em hsl(0,0%,100%) inset;
  filter: drop-shadow(0.6em 0.6em 4px hsla(0,0%,0%,0.2));
  top: 50%;
  left: 50%;
  width: 1.5em;
  height: 1.5em;
  transform: translate3d(-50%,-50%,-1px);
  z-index: -1;
}

.bubble:after {
  background: radial-gradient(100% 100% at center,hsla(0,0%,0%,0) 35%,hsla(0,0%,0%,0.2) 48%,hsla(0,0%,0%,0) 50%);
  filter: blur(4px);
  top: 0.6em;
  left: 0.6em;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,-1px);
  z-index: -2;
}

.bubble:focus, .bubble:hover {
  transform: scale(1.1);
  outline: none;
}

.bubble:focus:active, .bubble:hover:active {
  width: 3.6em;
  height: 2.4em;
}

.bubble:focus:before, .bubble:hover:before {
  filter: drop-shadow(0.75em 0.75em 4px hsla(0,0%,0%,0.2));
}

.bubble:focus:after, .bubble:hover:after {
  transform: translate3d(0.15em,0.15em,-1px);
}

.bubble:checked {
  box-shadow: 0 -0.06em 0.1em hsl(120,90%,100%) inset,
		0 -0.15em 0.4em hsl(120,90%,45%) inset,
		0 0.05em 0.05em hsl(120,90%,45%) inset,
		0.05em 0 0.1em hsl(120,90%,100%) inset,
		-0.05em 0 0.1em hsl(120,90%,100%) inset,
		0 0.1em 0.4em hsl(120,90%,60%) inset;
}

.bubble:checked:before {
  border-radius: 0.25em;
  width: 0.5em;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  label {
    animation: none;
  }

  .bubble, .bubble:before, .bubble:after {
    transition-duration: 0s;
  }

  .bubble:focus, .bubble:hover {
    transform: scale(1);
  }

  .bubble:focus:active, .bubble:hover:active {
    width: 3em;
    height: 3em;
  }

  .bubble:focus:before, .bubble:hover:before {
    filter: drop-shadow(0.6em 0.6em 4px hsla(0,0%,0%,0.2));
  }

  .bubble:focus:after, .bubble:hover:after {
    transform: translate3d(0,0,-1px);
  }
}
/* Animations */
@keyframes float {
  from, to {
    transform: translate(0,3%);
  }

  25% {
    transform: translate(-3%,0);
  }

  50% {
    transform: translate(0,-3%);
  }

  75% {
    transform: translate(3%,0);
  }
}
</style>


================================================
FILE: Checkboxes/csozidev_shy-horse-87.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by csozidev - Tags: checkbox */
/* Green glow checkbox made by: csozi | Website: www.csozi.hu*/

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  background-color: #676767;
  padding: 4px;
  border-radius: 25px;
}

.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  border-radius: 1rem;
  background-color: #004000;
  transition: 0.1s;
}

.container input:checked ~ .checkmark {
  background-color: #00de00;
  box-shadow: 0 0 10px #00ff00;
}
</style>


================================================
FILE: Checkboxes/cssbuttons-io_short-shrimp-54.html
================================================
<div class="cntr">
  <input checked="" type="checkbox" id="cbx" class="hidden-xs-up">
  <label for="cbx" class="cbx"></label>
</div>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: checkbox, squishy */
.cbx {
 position: relative;
 top: 1px;
 width: 27px;
 height: 27px;
 border: 1px solid #c8ccd4;
 border-radius: 3px;
 vertical-align: middle;
 transition: background 0.1s ease;
 cursor: pointer;
 display: block;
}

.cbx:after {
 content: '';
 position: absolute;
 top: 2px;
 left: 8px;
 width: 7px;
 height: 14px;
 opacity: 0;
 transform: rotate(45deg) scale(0);
 border-right: 2px solid #fff;
 border-bottom: 2px solid #fff;
 transition: all 0.3s ease;
 transition-delay: 0.15s;
}

.lbl {
 margin-left: 5px;
 vertical-align: middle;
 cursor: pointer;
}

#cbx:checked ~ .cbx {
 border-color: transparent;
 background: #6871f1;
 animation: jelly 0.6s ease;
}

#cbx:checked ~ .cbx:after {
 opacity: 1;
 transform: rotate(45deg) scale(1);
}

.cntr {
 position: relative;
}

@keyframes jelly {
 from {
  transform: scale(1, 1);
 }

 30% {
  transform: scale(1.25, 0.75);
 }

 40% {
  transform: scale(0.75, 1.25);
 }

 50% {
  transform: scale(1.15, 0.85);
 }

 65% {
  transform: scale(0.95, 1.05);
 }

 75% {
  transform: scale(1.05, 0.95);
 }

 to {
  transform: scale(1, 1);
 }
}

.hidden-xs-up {
 display: none!important;
}

</style>


================================================
FILE: Checkboxes/david-mohseni_terrible-mayfly-58.html
================================================
<label for="menu-icon" class="menu-icon">
  <input id="menu-icon" type="checkbox" />
  <span></span>
  <span></span>
  <span></span>
</label>

<style>
/* From Uiverse.io by david-mohseni  - Tags: checkbox, hamburger, menu */
.menu-icon {
  position: relative;
  width: 60px;
  height: 50px;
  background: rgb(0, 0, 0);
  padding: 10px;
  cursor: pointer;
}
.menu-icon input {
  display: none;
}
.menu-icon span {
  display: block;
  position: relative;
  height: 3px;
  width: 100%;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  opacity: 1;
  left: 0;
  margin-bottom: 24%;
  transition: 0.3s ease-in-out;
}
.menu-icon span {
  transform-origin: left center;
}
.menu-icon input:checked ~ span {
  background: red;
  left: 5px;
  margin-bottom: 28%;
}
.menu-icon input:checked ~ span:nth-of-type(1) {
  transform: rotate(45deg);
}
.menu-icon input:checked ~ span:nth-of-type(2) {
  opacity: 0;
}
.menu-icon input:checked ~ span:nth-of-type(3) {
  transform: rotate(-45deg);
}

</style>
    

================================================
FILE: Checkboxes/elijahgummer_afraid-walrus-18.html
================================================
<input class="toggle-checkbox" id="toggle" type="checkbox" />
<label class="hamburger" for="toggle">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</label>

<style>
/* From Uiverse.io by elijahgummer  - Tags: animation, black, checkbox, hamburger, arrow */
.toggle-checkbox {
  display: none;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 35px;
  height: 24px;
  cursor: pointer;
}

.hamburger .bar {
  width: 100%;
  height: 4px;
  background-color: #333;
  border-radius: 10px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  position: relative;
}

.toggle-checkbox:checked + .hamburger .bar:nth-child(2) {
  transform: translate(0px, 10px);
  opacity: 0;
  transition-delay: 0.3s;
}

.toggle-checkbox:checked + .hamburger .bar:nth-child(3) {
  transform: translate(0px, -10px);
  transition-delay: 0s;
}

.toggle-checkbox:checked + .hamburger .bar:nth-child(1) {
  transform: rotate(-45deg) scale(0.7);
  transition-delay: 0.6s;
}
.toggle-checkbox:checked + .hamburger .bar:nth-child(3) {
  transform: rotate(45deg) scale(0.7);
  transition-delay: 0.6s;
}

</style>
    

================================================
FILE: Checkboxes/elijahgummer_foolish-bulldog-87.html
================================================
<label class="checkbox">
  <input class="checkbox-input" type="checkbox" />
  <svg class="checkbox-check" width="28" height="28">
    <polyline points="20 6 9 17 4 12"></polyline>
  </svg>
</label>

<style>
/* From Uiverse.io by elijahgummer  - Tags: checkbox */
.checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.checkbox:hover .checkbox-check {
  background: #ff475425;
}

.checkbox-input {
  width: 1px;
  height: 1px;
  opacity: 0;
}

.checkbox-input:checked + .checkbox-check {
  background: #dc143c;
  stroke-dashoffset: 0;
}

.checkbox-check {
  border: 0.2rem solid #dc143c;
  stroke: #f9f9f9;
  stroke-dasharray: 25;
  stroke-dashoffset: 25;
  stroke-linecap: round;
  stroke-width: 0.2rem;
  border-radius: 0.2rem;
  fill: none;
  transition:
    background 0.4s,
    stroke-dashoffset 0.6s;
}

</style>
    

================================================
FILE: Checkboxes/elijahgummer_friendly-wombat-2.html
================================================
<label class="container">
  <input type="checkbox" />
  <div class="checkmark"></div>
</label>

<style>
/* From Uiverse.io by elijahgummer  - Website: https://x.com/farrelput/status/1788771619344920729 - Name: Farrel Putra - Tags: simple, animation, green, checkbox */
/* Hide the default checkbox */
.container input {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  border: 3px solid #beddd0;
  border-radius: 10px;
  overflow: hidden;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: #2dc38c;
  border-bottom: 1.5px solid #2dc38c; /* Bottom stroke */
  box-shadow: 0 0 1px #cef1e4, inset 0 -2.5px 3px #62eab8,
    inset 0 3px 3px rgba(0, 0, 0, 0.34); /* Inner shadow */
  border-radius: 8px;
  transition: transform 0.3s ease-in-out; /* Transition for smooth animation */
}

/* When the checkbox is checked, modify the checkmark appearance */
.container input:checked ~ .checkmark {
  transform: translateY(40px); /* Move down */
  animation: wipeDown 0.6s ease-in-out forwards; /* Apply wipe animation */
}

/* When the checkbox is not checked, modify the checkmark appearance */
.container input:not(:checked) ~ .checkmark {
  transform: translateY(-40px); /* Move up */
  animation: wipeUp 0.6s ease-in-out forwards; /* Apply wipe animation */
}

/* Keyframes for wipe animations */
@keyframes wipeDown {
  0% {
    transform: translateY(0); /* Starting position */
  }
  100% {
    transform: translateY(40px); /* End position */
  }
}

@keyframes wipeUp {
  0% {
    transform: translateY(40); /* Starting position */
  }
  100% {
    transform: translateY(0px); /* End position */
  }
}

/* Create the checkmark/indicator */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.34); /* Icon drop shadow */
}

</style>
    

================================================
FILE: Checkboxes/elijahgummer_hard-liger-45.html
================================================
<input id="bookmark" type="checkbox" />
<label class="bookmark" for="bookmark">
  <svg
    id="Bookmark"
    viewBox="0 0 10 22"
    xmlns="http://www.w3.org/2000/svg"
    height="24px"
    width="24px"
    class="bookmark-icon"
  >
    <g fill-rule="evenodd" fill="none">
      <g
        class="color000000 svgShape"
        transform="translate(-265 -2679)"
        fill="#242424"
      >
        <g
          class="color000000 svgShape"
          fill="#242424"
          transform="translate(56 160)"
        >
          <path
            class="color000000 svgShape"
            fill="#242424"
            d="M219 2521v16.998c0 .891-1.077 1.337-1.707.707l-2.586-2.586a1 1 0 0 0-1.414 0l-2.586 2.586c-.63.63-1.707.184-1.707-.707V2521a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2"
          ></path>
        </g>
      </g>
    </g>
  </svg>
  <div class="shimmer"></div>
</label>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, hover, checkbox, modern, click, bookmark, shimmer */
#bookmark[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.bookmark {
  overflow: hidden;
  position: absolute;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bookmark:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  transform: scale(0.5);
  opacity: 0;
  transition: all 0.2s ease;
}
.bookmark:hover:before {
  transform: scale(1);
  opacity: 1;
}
.bookmark:active:before {
  transform: scale(0.8);
  transition: all 0.3s ease;
}
.bookmark .bookmark-icon {
  margin: 12px;
}
.bookmark .bookmark-icon path {
  stroke: black;
  fill: rgba(0, 0, 0, 0);
}

#bookmark:checked + .bookmark .bookmark-icon {
  animation: booking 0.3s linear forwards;
}
#bookmark:checked + .bookmark .bookmark-icon path {
  fill: black;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
}

.bookmark .shimmer {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: skew(-13deg) translateX(-110%);
  background: rgba(255, 255, 255, 0.3);
  z-index: 0;
  transition: transform 1s ease;
}
.bookmark:hover .shimmer {
  transform: skew(-13deg) translateX(110%);
}

@keyframes booking {
  0% {
    transform: rotateY(0) translateY(0) scale(1);
  }
  50% {
    transform: rotateY(90deg) translateY(-16px) scale(1.1);
  }
  100% {
    transform: rotateY(180deg) translateY(0) scale(1.2);
  }
}

</style>
    

================================================
FILE: Checkboxes/elijahgummer_stale-bobcat-64.html
================================================
<div class="checkbox">
  <input type="checkbox" id="cbx" />
  <label for="cbx" class="cbx">
    <div class="flip">
      <div class="front"></div>
      <div class="back">
        <svg viewBox="0 0 16 14" height="14" width="16">
          <path d="M2 8.5L6 12.5L14 1.5"></path>
        </svg>
      </div>
    </div>
  </label>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, blue, checkbox, modern, transition, click effect, click animation */
.checkbox {
  position: relative;
}

.checkbox input[type="checkbox"] {
  display: none;
  visibility: hidden;
}

.checkbox .cbx {
  -webkit-perspective: 20;
  perspective: 20;
  display: inline-block;
  border: 2px solid #e8e8eb;
  background: #e8e8eb;
  border-radius: 4px;
  transform: translate3d(0, 0, 0);
  cursor: pointer;
  transition: all 0.3s ease;
}

.checkbox .cbx:hover {
  border-color: #0b76ef;
}

.checkbox .flip {
  display: block;
  transition: all 0.4s ease;
  transform-style: preserve-3d;
  position: relative;
  width: 20px;
  height: 20px;
}

.checkbox input[type="checkbox"]:checked + .cbx {
  border-color: #0b76ef;
}

.checkbox input[type="checkbox"]:checked + .cbx .flip {
  transform: rotateY(180deg);
}

.checkbox .front,
.checkbox .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 2px;
}

.checkbox .front {
  background: #fff;
  z-index: 1;
}

.checkbox .back {
  transform: rotateY(180deg);
  background: #0b76ef;
  text-align: center;
  color: #fff;
  line-height: 20px;
  box-shadow: 0 0 0 1px #0b76ef;
}

.checkbox .back svg {
  margin-top: 3px;
  fill: none;
}

.checkbox .back svg path {
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

</style>
    

================================================
FILE: Checkboxes/ercnersoy_rare-robin-39.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by ercnersoy - Tags: checkbox */
/* Hide the default checkbox */
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.container {
 display: block;
 position: relative;
 cursor: pointer;
 font-size: 20px;
 user-select: none;
}

/* Create a custom checkbox */
.checkmark {
 position: relative;
 top: 0;
 left: 0;
 height: 1.4em;
 width: 1.4em;
 border: 2px solid #2196F3;
 border-radius: 1rem 0rem 1rem;
 transform: rotate(45deg);
 transition: all .5s ease-in-out;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
 box-shadow: 0px 0px 40px 5px #2196F3;
 border-radius: 1rem 0rem 1rem;
 background-color: #2195f31f;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
 left: 0.35em;
 top: 0.20em;
 width: 0.25em;
 height: 0.5em;
 border: solid #2196F3;
 border-width: 0 0.15em 0.15em 0;
 transform: rotate(-5deg);
 animation: upAnimate 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes upAnimate {
 from {
  transform: translate(-20px, -20px) rotate(-5deg);
  opacity: 0;
 }

 to {
  transform: translate(0, 0) rotate(-5deg);
  opacity: 1;
 }
}
</style>


================================================
FILE: Checkboxes/faxriddin20_wicked-bobcat-36.html
================================================
<label>
  <input class="input" type="checkbox" />
  <span class="custom-checkbox"></span>
</label>

<style>
/* From Uiverse.io by faxriddin20  - Tags: minimalist, checkbox, dark, cool checkbox, checkmark */
.input[type="checkbox"] {
  display: none;
}

/* Style for the custom checkbox */
.custom-checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid lime;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

/* Style for the custom checkmark */
.custom-checkbox::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: lime;
  border-radius: 50%;
  opacity: 0;
}

/* Show the checkmark when checkbox is checked */
.input[type="checkbox"]:checked + .custom-checkbox::after {
  opacity: 1;
}

</style>
    

================================================
FILE: Checkboxes/gagan-gv_average-warthog-41.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by gagan-gv - Tags: checkbox */
/* Hide the default checkbox */
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.container {
 display: block;
 position: relative;
 cursor: pointer;
 font-size: 20px;
 user-select: none;
}

/* Create a custom checkbox */
.checkmark {
 position: relative;
 top: 0;
 left: 0;
 height: 1.3em;
 width: 1.3em;
 background-color: #fff;
 transition: all 0.5s;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
 border: 2px solid #080;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
 left: 0.55em;
 top: -0.15em;
 width: 0.35em;
 height: 0.7em;
 border: solid #080;
 border-width: 0 0.25em 0.25em 0;
 transform: rotate(45deg);
 transition: all 0.5s;
}
</style>


================================================
FILE: Checkboxes/gagan-gv_unlucky-yak-4.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by gagan-gv - Tags: gradient, checkbox */
/* Hide the default checkbox */
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.container {
 display: block;
 position: relative;
 cursor: pointer;
 font-size: 25px;
 user-select: none;
}

/* Create a custom checkbox */
.checkmark {
 position: relative;
 top: 0;
 left: 0;
 height: 1.3em;
 width: 1.3em;
 background: black;
 border-radius: 50px;
 transition: all 0.7s;
 --spread: 20px;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
 background: black;
 box-shadow: -10px -10px var(--spread) 0px #5B51D8, 0 -10px var(--spread) 0px #833AB4, 10px -10px var(--spread) 0px #E1306C, 10px 0 var(--spread) 0px #FD1D1D, 10px 10px var(--spread) 0px #F77737, 0 10px var(--spread) 0px #FCAF45, -10px 10px var(--spread) 0px #FFDC80;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
 left: 0.45em;
 top: 0.25em;
 width: 0.25em;
 height: 0.5em;
 border: solid #f0f0f0;
 border-width: 0 0.15em 0.15em 0;
 transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/gagan-gv_wonderful-monkey-77.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by gagan-gv - Tags: checkbox */
/* Hide the default checkbox */
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.container {
 display: block;
 position: relative;
 cursor: pointer;
 font-size: 20px;
 user-select: none;
}

/* Create a custom checkbox */
.checkmark {
 position: relative;
 top: 0;
 left: 0;
 height: 1.3em;
 width: 1.3em;
 background-color: #343434;
 border-radius: 5px;
 transition: all 0.5s;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
 background-color: #f0f0f0;
 border: 2px solid #343434;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
 filter: drop-shadow(0 0 10px #888);
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
 left: 0.3em;
 top: 0.05em;
 width: 0.3em;
 height: 0.65em;
 border: solid #343434;
 border-width: 0 0.2em 0.2em 0;
 border-radius: 4px;
 transform: rotate(45deg);
 animation: bounceFadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes bounceFadeIn {
 from {
  transform: translate(0, -10px) rotate(45deg);
  opacity: 0;
 }

 to {
  transform: translate(0, 0) rotate(45deg);
  opacity: 1;
 }
}
</style>


================================================
FILE: Checkboxes/gamerlord295_shaggy-mule-36.html
================================================
<!-- From Uiverse.io by gamerlord295  - Tags: checkbox -->
<label
  for="hr"
  class="flex flex-row items-center gap-2.5 dark:text-white light:text-black"
>
  <input id="hr" type="checkbox" class="peer hidden" />
  <div
    for="hr"
    class="h-5 w-5 flex rounded-md border border-[#a2a1a833] light:bg-[#e8e8e8] dark:bg-[#212121] peer-checked:bg-[#7152f3] transition"
  >
    <svg
      fill="none"
      viewBox="0 0 24 24"
      class="w-5 h-5 light:stroke-[#e8e8e8] dark:stroke-[#212121]"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 12.6111L8.92308 17.5L20 6.5"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
    </svg>
  </div>
  Front-end
</label>


    

================================================
FILE: Checkboxes/gharsh11032000_breezy-falcon-75.html
================================================
<div class="checkbox">
  <input id="checkbox1" class="checkbox__input" type="checkbox">
  <label for="checkbox1" class="checkbox__label">
    <span class="checkbox__custom"></span>
    Uiverse
  </label>
</div>

<style>
/* From Uiverse.io by gharsh11032000 - Tags: gradient, hover, checkbox, click effect */
.checkbox {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox__label {
  display: inline-block;
  padding-left: 30px;
  margin-bottom: 10px;
  position: relative;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.checkbox__custom {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(#212121, #212121) padding-box,
              linear-gradient(145deg,#e81cff, #40c9ff) border-box;
  border: 2px solid transparent;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.checkbox__input:checked + .checkbox__label .checkbox__custom {
  background-image: linear-gradient(145deg,#e81cff, #40c9ff);
  transform: rotate(45deg) scale(0.8);
}

.checkbox__label:hover .checkbox__custom {
  transform: scale(1.2);
}


</style>


================================================
FILE: Checkboxes/gharsh11032000_good-wasp-26.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: checkbox, shadow, click effect */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  border: 2px solid #414141;
  border-radius: 5px;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.container input:hover ~ .checkmark {
  border: 2px solid #0974f1;
}

/* When the checkbox is checked */
.container input:checked ~ .checkmark {
  box-shadow: 0 0 20px rgba(9, 117, 241, 0.8);
  border: 2px solid #0974f1;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/gharsh11032000_nasty-panda-23.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: gradient, checkbox, toggle, click effect */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  overflow: hidden;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  border: 2px solid #414141;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

/* When the checkbox is checked */
.container input:checked ~ .checkmark {
  border-image: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
  border-image-slice: 1;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.45em;
  top: -2em;
  width: 0.25em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.container .checkmark::before {
  left: 0.45em;
  top: 2em;
  width: 0.25em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  top: 0.25em;
}

</style>


================================================
FILE: Checkboxes/gharsh11032000_young-baboon-42.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: checkbox, toggle, click effect */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  border: 2px solid #414141;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

/* When the checkbox is checked */
.container input:checked ~ .checkmark {
  background: #0974f1;
  border-color: #0974f1;
  filter: drop-shadow(5px 5px);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
}

.container .checkmark:after {
  inset: 0;
  margin: auto;
  width: 0.5em;
  height: 0.5em;
  background-color: #414141;
  border-width: 0 0.15em 0.15em 0;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  width: 0.25em;
  height: 0.5em;
  border: solid #414141;
  border-width: 0 0.15em 0.15em 0;
  border-color: white;
  background-color: transparent;
  transform: rotate(45deg);
}


</style>


================================================
FILE: Checkboxes/guilhermeyohan_chatty-lion-35.html
================================================
<div class="checkbox-wrapper-13">
  <input type="checkbox" id="c1-13"> 
</div>

<style>
/* From Uiverse.io by guilhermeyohan - Tags: checkbox */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .checkbox-wrapper-13 input[type=checkbox] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }

  .checkbox-wrapper-13 input[type=checkbox]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }

  .checkbox-wrapper-13 input[type=checkbox]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }

  .checkbox-wrapper-13 input[type=checkbox]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }

  .checkbox-wrapper-13 input[type=checkbox]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }

  .checkbox-wrapper-13 input[type=checkbox]:disabled + label {
    cursor: not-allowed;
  }

  .checkbox-wrapper-13 input[type=checkbox]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }

  .checkbox-wrapper-13 input[type=checkbox]:focus {
    box-shadow: 0 0 0 var(--focus);
  }

  .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
    width: 21px;
  }

  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
    opacity: var(--o, 0);
  }

  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
    --o: 1;
  }

  .checkbox-wrapper-13 input[type=checkbox] + label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 4px;
  }

  .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }

  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }

  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }
}

.checkbox-wrapper-13 * {
  box-sizing: inherit;
}

.checkbox-wrapper-13 *:before,
  .checkbox-wrapper-13 *:after {
  box-sizing: inherit;
}


</style>


================================================
FILE: Checkboxes/guilhermeyohan_white-cheetah-13.html
================================================
<div class="checkbox-wrapper-31">
  <input checked="" type="checkbox">
  <svg viewBox="0 0 35.6 35.6">
    <circle class="background" cx="17.8" cy="17.8" r="17.8"></circle>
    <circle class="stroke" cx="17.8" cy="17.8" r="14.37"></circle>
    <polyline class="check" points="11.78 18.12 15.55 22.23 25.17 12.87"></polyline>
  </svg>
</div>
<style>
/* From Uiverse.io by guilhermeyohan - Tags: animation, checkbox, circle */
.checkbox-wrapper-31:hover .check {
  stroke-dashoffset: 0;
}

.checkbox-wrapper-31 {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
}

.checkbox-wrapper-31 .background {
  fill: #ccc;
  transition: ease all 0.6s;
  -webkit-transition: ease all 0.6s;
}

.checkbox-wrapper-31 .stroke {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 2px;
  stroke-dashoffset: 100;
  stroke-dasharray: 100;
  transition: ease all 0.6s;
  -webkit-transition: ease all 0.6s;
}

.checkbox-wrapper-31 .check {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  stroke-dashoffset: 22;
  stroke-dasharray: 22;
  transition: ease all 0.6s;
  -webkit-transition: ease all 0.6s;
}

.checkbox-wrapper-31 input[type=checkbox] {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  opacity: 0;
  -appearance: none;
  -webkit-appearance: none;
}

.checkbox-wrapper-31 input[type=checkbox]:hover {
  cursor: pointer;
}

.checkbox-wrapper-31 input[type=checkbox]:checked + svg .background {
  fill: #6cbe45;
}

.checkbox-wrapper-31 input[type=checkbox]:checked + svg .stroke {
  stroke-dashoffset: 0;
}

.checkbox-wrapper-31 input[type=checkbox]:checked + svg .check {
  stroke-dashoffset: 0;
}

</style>


================================================
FILE: Checkboxes/hayyangovinda_dangerous-bird-41.html
================================================
<div class="days-btn-container">
  <input class="day-btn" id="monday" type="checkbox" checked="true" />
  <label class="day-label" for="monday">M</label>

  <input class="day-btn" id="tuesday" type="checkbox" checked="true" />
  <label class="day-label" for="tuesday">T</label>

  <input class="day-btn" id="wednesday" type="checkbox" checked="true" />
  <label class="day-label" for="wednesday">W</label>

  <input class="day-btn" id="thursday" type="checkbox" checked="true" />
  <label class="day-label" for="thursday">T</label>

  <input class="day-btn" id="friday" type="checkbox" checked="true" />
  <label class="day-label" for="friday">F</label>

  <input class="day-btn" id="saturday" type="checkbox" checked="true" />
  <label class="day-label" for="saturday">S</label>

  <input class="day-btn" id="sunday" type="checkbox" checked="true" />
  <label class="day-label" for="sunday">S</label>
</div>

<style>
/* From Uiverse.io by hayyangovinda  - Tags: flashy, checkbox, clock, days, alarm */
.days-btn-container {
  display: flex;
  width: 300px;
  align-items: center;
  justify-content: space-evenly;
  height: 34px;
}

.day-btn {
  display: none; /* Hide the original checkbox */
}

.day-label {
  background-color: transparent;
  font-size: 11px;
  font-weight: 600;
  color: #ff5b22;
  cursor: pointer;
  border: 2px solid #ff5b22;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
}

/* Apply styles for the selected state */
.day-btn:checked + .day-label {
  background-color: #ffe53b;
  background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
  border: none;
  color: white;
}

</style>
    

================================================
FILE: Checkboxes/hoshikawamaki_splendid-fish-36.html
================================================
<!-- From Uiverse.io by hoshikawamaki  - Tags: simple, button, checkbox, label, tailwindcss, rightbottom, peer -->
<label for="tool_button" class="relative w-8 h-20 py-2">
  <input type="checkbox" id="tool_button" class="hidden peer" />
  <div
    class="flex items-center h-full bg-purple-400 rounded-lg w-72 -right-64 peer-checked:right-3 p-0.5 shadow-[0_2px_10px_rgba(0,0,0,0.24)] absolute transition-all duration-300 cursor-pointer"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="28"
      height="28"
      viewBox="0 0 24 24"
      fill="#fff"
      stroke="#fff"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="ml-0.5 feather feather-more-vertical"
    >
      <circle cx="12" cy="12" r="1"></circle>
      <circle cx="12" cy="5" r="1"></circle>
      <circle cx="12" cy="19" r="1"></circle>
    </svg>
    <div
      class="flex flex-row items-center justify-center w-full h-full bg-purple-300 border border-purple-400 rounded-lg"
    >
      <div class="flex flex-col items-center justify-center flex-grow">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="#9370DB"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-twitter"
        >
          <path
            d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
          ></path>
        </svg>
        <p class="text-sm font-bold text-purple-800 uppercase text-nowrap">
          Twitter
        </p>
      </div>
      <div class="flex flex-col items-center justify-center flex-grow">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="#9370DB"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-twitch"
        >
          <path d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7"></path>
        </svg>
        <p class="text-sm font-bold text-purple-800 uppercase text-nowrap">
          Twitch
        </p>
      </div>
      <div class="flex flex-col items-center justify-center flex-grow">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="#9370DB"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-triangle"
        >
          <path
            d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
          ></path>
        </svg>
        <p class="text-sm font-bold text-purple-800 uppercase text-nowrap">
          Go top
        </p>
      </div>
    </div>
  </div>
</label>


    

================================================
FILE: Checkboxes/iArsene69_polite-moose-58.html
================================================
<label class="check-container" for="check-box">
  <input class="check" id="check-box" name="check-box" type="checkbox" />
  <span class="check-toggle"></span>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 180 161"
    height="93"
    width="72"
    class="check-svg"
  >
    <defs>
      <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="neonLife">
        <stop style="stop-color:#b3ffab;stop-opacity:1" offset="0%"></stop>
        <stop style="stop-color:#12fff7;stop-opacity:1" offset="100%"></stop>
      </linearGradient>
    </defs>
    <path
      stroke-linecap="round"
      stroke-width="5"
      pathLength="98"
      stroke="url(#neonLife)"
      d="M19.6498 44.725C22.7611 42.2105 21.2592 43.4425 25.498 39.887C27.4399 38.2582 29.3733 36.6193 31.3196 34.9958C33.2189 33.4116 35.0659 31.7608 37.0349 30.2641C37.9157 29.5946 38.7699 28.2817 39.8526 28.5097C40.296 28.603 32.2367 40.9382 31.8778 41.482C30.9129 42.9444 27.9937 46.8262 29.6449 46.2403C30.7482 45.8488 32.3434 44.4327 32.7816 46.0542C33.0806 47.1605 34.1022 46.2969 33.3133 48.0479C30.661 53.9347 26.0122 58.94 22.3613 64.1835C19.7684 67.9075 19.91 67.9632 23.6372 64.8215C26.2338 62.6328 28.7219 60.3185 31.2664 58.0695C34.2157 55.4628 37.116 52.7995 40.1184 50.2542C41.8317 48.8018 43.3453 46.9687 45.4084 46.0808C46.2059 45.7375 44.8192 47.7373 44.3185 48.4466C42.5755 50.9158 40.5345 53.1615 38.7096 55.5708C37.3792 57.3271 35.319 58.7865 34.8551 60.9404C34.5988 62.1304 37.0288 59.8042 37.9653 59.0265C38.3166 58.7348 53.2326 45.0539 54.7655 44.22C55.6812 43.7218 54.3415 46.3273 53.7287 47.1706C50.262 51.9422 46.3789 56.3978 42.6172 60.9404C38.0137 66.4998 33.2603 71.9337 28.6348 77.4748C24.8372 82.0241 16.614 91.3398 26.455 81.8344C31.2185 77.2333 35.8426 72.4901 40.5172 67.7987C45.7314 62.5659 50.9629 57.3498 56.1212 52.0618C58.7167 49.4011 61.8069 47.1062 63.777 43.9542C65.0596 41.902 60.0322 47.0245 58.2478 48.6593C51.2849 55.0385 28.5853 76.5513 22.2018 82.6318C5.56698 98.477 24.9566 80.3276 27.7841 77.6875C37.017 69.0664 46.233 60.4271 55.4566 51.796C65.2661 42.6167 75.023 33.3809 84.8835 24.2564C89.9806 19.5398 94.786 14.4588 100.328 10.274C102.433 8.68444 97.0891 14.446 95.3039 16.388C9.20893 110.046 144.837 -39.1865 43.3615 71.9456C35.559 80.4907 27.846 89.118 20.2081 97.8105C15.2893 103.408 0.666743 120.208 6.25221 115.275C18.5611 104.404 29.4632 92.0374 41.0223 80.3723C48.8415 72.4813 56.5722 64.5005 64.5213 56.7404C73.6647 47.8144 81.7534 39.8164 69.7315 55.2518C63.3997 63.3813 56.7431 71.2526 50.2198 79.2293C43.3809 87.592 36.3227 95.778 29.6449 104.27C26.9248 107.729 17.9266 113.505 22.0423 115.063C26.6629 116.811 29.8884 109.043 33.5791 105.759C38.9869 100.947 84.5509 58.4535 89.2963 54.0821C93.572 50.1433 112.817 31.8389 97.8559 47.7023C77.2695 69.5308 56.1052 90.7981 35.7855 112.883C33.3929 115.483 30.5553 117.772 28.7411 120.804C27.5307 122.828 32.2376 117.64 33.9247 115.993C39.6282 110.426 45.2396 104.766 50.911 99.1662C59.222 90.9605 67.5107 82.7318 75.872 74.5773C83.5273 67.1114 105.797 44.2482 99.5306 52.9125C90.9873 64.724 80.2965 74.8229 70.6087 85.7154C60.9287 96.5992 40.3613 118.723 72.9214 86.9382C82.6822 77.4098 92.3915 67.8286 102.056 58.2024C110.291 50.0002 118.588 41.8564 126.618 33.454C128.546 31.4371 134.341 25.6029 131.908 26.9679C127.376 29.5103 123.947 33.6517 120.079 37.1224C111.485 44.8341 97.2611 58.2607 88.2861 66.6291C82.1931 72.3103 83.6511 70.8222 91.0507 63.8645C95.2527 59.9135 99.4658 55.974 103.704 52.0618C106.838 49.1688 109.856 46.1379 113.167 43.4491C113.858 42.888 112.223 44.9695 111.626 45.6289C97.941 60.7254 83.2521 74.9501 69.891 90.3408C68.6147 91.811 64.6657 95.6467 66.5416 95.1257C70.1086 94.1348 72.6636 90.9571 75.6328 88.7458C81.8983 84.0797 88.0086 79.2083 94.2406 74.4976C101.206 69.2323 120.746 52.6852 116.118 60.0898C112.813 65.3778 108.027 69.5841 103.81 74.1786C96.9018 81.7069 63.5887 116.656 56.4402 124.579C53.7935 127.513 45.2693 135.112 48.997 133.803C54.8283 131.756 58.7066 126.149 63.4048 122.134C73.9496 113.121 84.2788 103.86 94.7191 94.7269C104.801 85.9078 114.803 76.9969 124.97 68.2772C142.784 53.0002 136.487 59.2455 123.641 71.9988C105.178 90.3284 86.3897 108.327 67.8707 126.599C64.3651 130.058 53.2122 139.581 57.4503 137.073C62.5337 134.064 66.161 129.092 70.4758 125.058C81.0209 115.198 91.5079 105.276 102.029 95.3915C112.597 85.4635 123.095 75.4608 133.742 65.619C144.071 56.0716 156.245 44.5276 140.654 61.6316C133.276 69.7254 125.688 77.6252 118.192 85.6091C107.833 96.6406 76.0274 129.003 87.0899 118.678C100.279 106.368 112.127 92.6949 124.678 79.7343C133.692 70.4252 142.732 61.1404 151.765 51.8492C159.589 43.8022 171.732 31.5395 159.527 43.6617C153.371 49.7771 147.232 55.9114 141.079 62.0303C134.544 68.5292 127.963 74.9832 121.461 81.5154C118.358 84.633 114.727 87.3346 112.264 90.9788C110.63 93.3945 116.745 87.2446 118.909 85.2901C121.736 82.7374 157.859 49.4491 160.059 47.4896C169.45 39.125 174.452 34.7311 163.993 47.0112C149.09 64.5099 132.208 80.6959 118.378 99.0865C113.417 105.683 131.391 88.9273 137.73 83.642C138.174 83.2713 154.991 68.0332 146.077 81.1432C142.713 86.0902 133.678 97.636 130.366 101.931C128.781 103.987 113.605 121.696 128.639 106.663C132.192 103.109 135.673 99.4836 139.272 95.9763C141.965 93.3509 144.481 90.494 147.512 88.2673C148.08 87.8501 147.389 89.7398 146.98 90.3142C137.833 103.171 127.037 115.185 116.623 127.025C104.71 140.569 162.679 71.5329 151.951 86.0344C144.657 95.8957 136.109 105.168 127.894 114.265C127.08 115.167 124.717 117.89 125.289 116.817C128.219 111.323 133.148 107.151 137.304 102.516C139.774 99.7614 142.251 97.0098 144.854 94.3813C145.889 93.3365 146.741 91.6605 148.203 91.5104C149.181 91.4101 147.456 93.3399 146.927 94.1687C145.323 96.6854 140.974 102.516 138.953 104.961C135.133 109.581 138.291 104.708 138.926 104.137C141.332 101.977 140.352 106.218 140.707 106.928"
    ></path>
  </svg>
  <p class="check-label">Do you love me?</p>
</label>

<style>
/* From Uiverse.io by iArsene69  - Website: https://uiverse.io/Uncannypotato69/honest-starfish-32 - Name: Uncannypotato69 - Tags: checkbox, neon, line */
.check-container {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: linear-gradient(90deg, #b3ffab 0%, #12fff7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.check {
  position: absolute;
  appearance: none;
}

.check-toggle {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1.5rem;
  width: 1.5rem;
  transform: translateX(-150%) translateY(-50%);
  border-radius: 0.25em;
  border: 2px solid #b3ffab;
}

.check-toggle + .check-svg {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2rem;
  width: 2rem;
  transform: translateX(-120%) translateY(-50%);
  transition: stroke-dashoffset 0.5s ease-out;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.check:checked + .check-toggle + .check-svg {
  stroke-dashoffset: 0;
}

.check-label {
  font-size: 1rem;
  user-select: none;
  font-weight: semi-bold;
}

</style>
    

================================================
FILE: Checkboxes/javierBarroso_light-pig-3.html
================================================
<label class="container">
  <input type="checkbox" checked="checked" id="checkbox" />
  <div class="checkmark">
    <span class="off"></span>
    <span class="on"></span>
  </div>
</label>
<label class="label" for="checkbox">CheckBox</label>

<style>
/* From Uiverse.io by javierBarroso  - Tags: checkbox, neon */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.label {
  color: #888;
  font-size: 1.3rem;
  margin-left: 10px;
  cursor: pointer;
}

.container {
  display: flex;
  position: relative;
  cursor: pointer;
  user-select: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #888;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #555;
  border-radius: 50px;
  transition-duration: 0.5s;
  overflow: hidden;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #49be5c;
  box-shadow: 0 0px 10px #49be5cdc;
}

.container .off {
  position: absolute;
  width: 25px;
  height: 25px;
  transition-duration: 0.5s;
}

.container .on {
  position: absolute;
  width: 25px;
  height: 25px;
  transform: translateY(25px);
  transition-duration: 0.5s;
}

.container .on::before {
  content: "";
  height: 16px;
  width: 16px;
  border-radius: 50px;
  background-color: transparent;
  border: #fff solid 2px;
  transition-duration: 0.2s;
  position: absolute;
  transform: translate(2.5px, 2.5px);
}

.container .off::before {
  content: "";
  height: 15px;
  width: 3px;
  background-color: #fff;
  transition-duration: 0.2s;
  position: absolute;
  transform: translate(-1.5px, -7.5px);
  left: 50%;
  top: 50%;
}

.container input:checked ~ .checkmark .on {
  transform: translateX(0%);
}

.container input:checked ~ .checkmark .off {
  transform: translateY(-100%);
}

</style>
    

================================================
FILE: Checkboxes/joe-watson-sbf_average-hound-77.html
================================================
<label class="container">
    <input checked="checked" type="checkbox">
    <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by joe-watson-sbf - Tags: checkbox */
.container {
  display: block;
  height: 1.5em;
  width: 1.5em;
  cursor: pointer;
  position: relative;
}

.container input {
  position: absolute;
  transform: scale(0);
}

.container input:checked ~ .checkmark {
  transform: rotate(45deg);
  height: 2em;
  width: .7em;
  border-color: #32cd32;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0;
}

.container .checkmark {
  display: block;
  width: inherit;
  height: inherit;
  border: 2px solid #32cd32;
  border-radius: 4px;
  transition: all .3s;
}




</style>


================================================
FILE: Checkboxes/ke1221_dangerous-puma-90.html
================================================

<input checked="" class="check" type="checkbox">
<style>
/* From Uiverse.io by ke1221 - Tags: checkbox */
.check {
 position: relative;
 width: 20px;
 height: 20px;
 border-radius: 2px;
 appearance: none;
 background-color: #bbb;
 transition: all .3s;
}

.check::before {
 content: '';
 position: absolute;
 border: solid #fff;
 display: block;
 width: .3em;
 height: .6em;
 border-width: 0 .2em .2em 0;
 z-index: 1;
 opacity: 0;
 right: calc(50% - .3em);
 top: calc(50% - .6em);
 transform: rotate(0deg);
 transition: all .3s;
 transform-origin: center center;
}

.check:checked {
 animation: a .3s ease-in forwards;
 background-color: rgb(120, 190, 120);
}

.check:checked::before {
 opacity: 1;
 transform: rotate(405deg);
}

@keyframes a {
 0% {
  opacity: 1;
  transform: scale(1) rotateY(0deg);
 }

 50% {
  opacity: 0;
  transform: scale(.8) rotateY(180deg);
 }

 100% {
  opacity: 1;
  transform: scale(1) rotateY(360deg);
 }
}
</style>


================================================
FILE: Checkboxes/krlozCJ_dull-bobcat-80.html
================================================
<label class="container">
    <input type="checkbox" checked="checked">
    <div class="checkmark">
        <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
            <title>Checkmark</title>
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"></path>
        </svg>
    </div>
</label>
<style>
/* From Uiverse.io by krlozCJ - Tags: checkbox */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  display: none;
  color: white;
}

.container {
  --size: 50px;
  width: var(--size);
  display: block;
  height: var(--size);
  background-color: #191A1E;
  border-radius: 100%;
  cursor: pointer;
  padding: 5px;
  color: white;
  box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;
}

.container .checkmark {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;
  transition: all ease 0.3s;
  padding: 8px;
}

.container .checkmark svg {
  opacity: 0;
  transition: all ease 0.3s;
}

.container input:checked + .checkmark {
  box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;
}

.container input:checked + .checkmark svg {
  opacity: 1;
}
</style>


================================================
FILE: Checkboxes/lenfear23_hot-badger-62.html
================================================
<label class="container">
    <input checked="checked" type="checkbox">
    <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by lenfear23 - Tags: neumorphism, checkbox */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 1;
  -webkit-appearance: none;
  cursor: pointer;
  height: 50px;
  width: 50px;
  box-shadow: -10px -10px 15px rgba(255,255,255,0.5),
  10px 10px 15px rgba(0,0,70,0.12);
  border-radius: 50%;
  border: 8px solid #ececec;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .5s;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container input::after {
  transition: .5s;
  font-family: monospace;
  content: '';
  color: #7a7a7a;
  font-size: 25px;
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid #7a7a7a;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

.container input:checked {
  box-shadow: -10px -10px 15px rgba(255,255,255,0.5),
  10px 10px 15px rgba(70,70,70,0.12),
  inset -10px -10px 15px rgba(255,255,255,0.5),
  inset 10px 10px 15px rgba(70,70,70,0.12);
  transition: .5s;
}

.container input:checked::after {
  transition: .5s;
  border: solid #15e38a;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

</style>


================================================
FILE: Checkboxes/lenin55_black-dragon-46.html
================================================
<label class="cl-checkbox">
  <input checked="" type="checkbox">
  <span></span>
</label>
<style>
/* From Uiverse.io by lenin55 - Tags: material design, checkbox */
.cl-checkbox {
 position: relative;
 display: inline-block;
}

/* Input */
.cl-checkbox > input {
 appearance: none;
 -moz-appearance: none;
 -webkit-appearance: none;
 z-index: -1;
 position: absolute;
 left: -10px;
 top: -8px;
 display: block;
 margin: 0;
 border-radius: 50%;
 width: 40px;
 height: 40px;
 background-color: rgba(0, 0, 0, 0.6);
 box-shadow: none;
 outline: none;
 opacity: 0;
 transform: scale(1);
 pointer-events: none;
 transition: opacity 0.3s, transform 0.2s;
}

/* Span */
.cl-checkbox > span {
 display: inline-block;
 width: 100%;
 cursor: pointer;
}

/* Box */
.cl-checkbox > span::before {
 content: "";
 display: inline-block;
 box-sizing: border-box;
 margin: 3px 11px 3px 1px;
 border: solid 2px;
 /* Safari */
 border-color: rgba(0, 0, 0, 0.6);
 border-radius: 2px;
 width: 18px;
 height: 18px;
 vertical-align: top;
 transition: border-color 0.2s, background-color 0.2s;
}

/* Checkmark */
.cl-checkbox > span::after {
 content: "";
 display: block;
 position: absolute;
 top: 3px;
 left: 1px;
 width: 10px;
 height: 5px;
 border: solid 2px transparent;
 border-right: none;
 border-top: none;
 transform: translate(3px, 4px) rotate(-45deg);
}

/* Checked, Indeterminate */
.cl-checkbox > input:checked,
.cl-checkbox > input:indeterminate {
 background-color: #018786;
}

.cl-checkbox > input:checked + span::before,
.cl-checkbox > input:indeterminate + span::before {
 border-color: #018786;
 background-color: #018786;
}

.cl-checkbox > input:checked + span::after,
.cl-checkbox > input:indeterminate + span::after {
 border-color: #fff;
}

.cl-checkbox > input:indeterminate + span::after {
 border-left: none;
 transform: translate(4px, 3px);
}

/* Hover, Focus */
.cl-checkbox:hover > input {
 opacity: 0.04;
}

.cl-checkbox > input:focus {
 opacity: 0.12;
}

.cl-checkbox:hover > input:focus {
 opacity: 0.16;
}

/* Active */
.cl-checkbox > input:active {
 opacity: 1;
 transform: scale(0);
 transition: transform 0s, opacity 0s;
}

.cl-checkbox > input:active + span::before {
 border-color: #85b8b7;
}

.cl-checkbox > input:checked:active + span::before {
 border-color: transparent;
 background-color: rgba(0, 0, 0, 0.6);
}

/* Disabled */
.cl-checkbox > input:disabled {
 opacity: 0;
}

.cl-checkbox > input:disabled + span {
 color: rgba(0, 0, 0, 0.38);
 cursor: initial;
}

.cl-checkbox > input:disabled + span::before {
 border-color: currentColor;
}

.cl-checkbox > input:checked:disabled + span::before,
.cl-checkbox > input:indeterminate:disabled + span::before {
 border-color: transparent;
 background-color: currentColor;
}

</style>


================================================
FILE: Checkboxes/m-muzammal_bitter-parrot-73.html
================================================
<div class="col-md-6 reject-checkbox">
  <div class="mb-2 text-center">
    <div class="checkbox-wrapper">
      <input
        name="ehs_approval"
        class="form-check-label custom-radio-label"
        id="Rejected"
        type="checkbox"
      />
      <label for="Rejected">
        <div class="tick_mark">
          <div class="cross"></div>
        </div>
      </label>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by m-muzammal  - Tags: material design, icon, animation, minimalist, button, checkbox, radio, click animation */
.reject-checkbox .checkbox-wrapper * {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.reject-checkbox .checkbox-wrapper input[type="checkbox"] {
  display: none;
}
.reject-checkbox .checkbox-wrapper label {
  --size: 50px;
  --shadow: calc(var(--size) * 0.07) calc(var(--size) * 0.1);
  position: relative;
  display: block;
  width: var(--size);
  height: var(--size);
  margin: 0 auto;
  background-color: #4158d0;
  background-image: linear-gradient(
    43deg,
    #4158d0 0%,
    #c850c0 46%,
    #ffcc70 100%
  );
  border-radius: 50%;
  box-shadow: 0 var(--shadow) #ffbeb8;
  cursor: pointer;
  transition: 0.2s ease transform, 0.2s ease background-color,
    0.2s ease box-shadow;
  overflow: hidden;
  z-index: 1;
}
.reject-checkbox .checkbox-wrapper label:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: calc(var(--size) * 0.7);
  height: calc(var(--size) * 0.7);
  margin: 0 auto;
  background-color: #fff;
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: inset 0 var(--shadow) #ffbeb8;
  transition: 0.2s ease width, 0.2s ease height;
}
.reject-checkbox .checkbox-wrapper label:hover:before {
  width: calc(var(--size) * 0.55);
  height: calc(var(--size) * 0.55);
  box-shadow: inset 0 var(--shadow) #ff9d96;
}
.reject-checkbox .checkbox-wrapper label:active {
  transform: scale(0.9);
}
.reject-checkbox .checkbox-wrapper .tick_mark {
  position: absolute;
  top: 9px;
  left: 2px;
  right: 0;
  width: calc(var(--size) * 0.6);
  height: calc(var(--size) * 0.6);
  margin: 0 auto;
  margin-left: calc(var(--size) * 0.14);
  transform: rotateZ(-92deg);
}
.reject-checkbox .checkbox-wrapper .tick_mark:before,
.reject-checkbox .checkbox-wrapper .tick_mark:after {
  content: "";
  position: absolute;
  background-color: #fff;
  border-radius: 2px;
  opacity: 0;
  transition: 0.2s ease transform, 0.2s ease opacity;
}
.reject-checkbox .checkbox-wrapper .tick_mark:before {
  left: 0;
  bottom: 0;
  width: calc(var(--size) * 0.1);
  height: calc(var(--size) * 0.3);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
  transform: translateY(calc(var(--size) * -0.68));
}
.reject-checkbox .checkbox-wrapper .tick_mark:after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--size) * 0.1);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
  transform: translateX(calc(var(--size) * 0.78));
}
.reject-checkbox .checkbox-wrapper input[type="checkbox"]:checked + label {
  background-color: #4158d0;
  background-image: linear-gradient(
    43deg,
    #f7805c 0%,
    #fb4545 46%,
    #e1236a 100%
  );
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.reject-checkbox
  .checkbox-wrapper
  input[type="checkbox"]:checked
  + label:before {
  width: 0;
  height: 0;
}

.reject-checkbox
  .checkbox-wrapper
  input[type="checkbox"]:checked
  + label
  .tick_mark:before,
.reject-checkbox
  .checkbox-wrapper
  input[type="checkbox"]:checked
  + label
  .tick_mark:after {
  background-color: #fff;
  width: calc(var(--size) * 0.4);
  height: calc(var(--size) * 0.1);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}
.reject-checkbox
  .checkbox-wrapper
  input[type="checkbox"]:checked
  + label
  .tick_mark:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.reject-checkbox
  .checkbox-wrapper
  input[type="checkbox"]:checked
  + label
  .tick_mark:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

</style>
    

================================================
FILE: Checkboxes/magbanum_friendly-treefrog-3.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<style>
/* From Uiverse.io by magbanum - Tags: checkbox */
/* Customize the label (the container) */
.container {
 display: block;
 position: relative;
 cursor: pointer;
 font-size: 22px;
 user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -12px;
  left: -12px;
  height: 25px;
  width: 25px;
  background-color: #ccc;
  border: solid gray 1px;
  border-radius: 4px;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #666666;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.4rem;
  top: 0.2rem;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/martinval9_wise-elephant-23.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by martinval9 - Tags: checkbox, circle */
/* Hide the default checkbox */
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.container {
 display: block;
 position: relative;
 cursor: pointer;
 font-size: 20px;
 user-select: none;
}

/* Create a custom checkbox */
.checkmark {
 position: relative;
 top: 0;
 left: 0;
 height: 1.3em;
 width: 1.3em;
 background-color: #ccc;
 border-radius: 25px;
 transition: 0.15s;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
 background-color: limegreen;
 border-radius: 25px;
 transition: 0.15s;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
 left: 0.45em;
 top: 0.25em;
 width: 0.25em;
 height: 0.5em;
 border: solid white;
 border-width: 0 0.15em 0.15em 0;
 transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/milegelu_grumpy-wombat-18.html
================================================
<label class="container">
  <input type="checkbox" />
  <div class="checkmark">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon No" viewBox="0 0 16 16">
      <path
        fill-rule="evenodd"
        d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8c4.408 0 8-3.584 8-8s-3.592-8-8-8zm5.284 3.688a6.802 6.802 0 0 1 1.545 4.251c-.226-.043-2.482-.503-4.755-.217-.052-.112-.096-.234-.148-.355-.139-.33-.295-.668-.451-.99 2.516-1.023 3.662-2.498 3.81-2.69zM8 1.18c1.735 0 3.323.65 4.53 1.718-.122.174-1.155 1.553-3.584 2.464-1.12-2.056-2.36-3.74-2.551-4A6.95 6.95 0 0 1 8 1.18zm-2.907.642A43.123 43.123 0 0 1 7.627 5.77c-3.193.85-6.013.833-6.317.833a6.865 6.865 0 0 1 3.783-4.78zM1.163 8.01V7.8c.295.01 3.61.053 7.02-.971.199.381.381.772.555 1.162l-.27.078c-3.522 1.137-5.396 4.243-5.553 4.504a6.817 6.817 0 0 1-1.752-4.564zM8 14.837a6.785 6.785 0 0 1-4.19-1.44c.12-.252 1.509-2.924 5.361-4.269.018-.009.026-.009.044-.017a28.246 28.246 0 0 1 1.457 5.18A6.722 6.722 0 0 1 8 14.837zm3.81-1.171c-.07-.417-.435-2.412-1.328-4.868 2.143-.338 4.017.217 4.251.295a6.774 6.774 0 0 1-2.924 4.573z"
      ></path>
    </svg>
    <p class="No name">ball</p>
    <svg
      viewBox="0 0 16 16"
      class="icon Yes"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M11.5 6.027a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm-6.5-3h1v1h1v1h-1v1h-1v-1h-1v-1h1v-1z"
      ></path>
      <path
        d="M3.051 3.26a.5.5 0 0 1 .354-.613l1.932-.518a.5.5 0 0 1 .62.39c.655-.079 1.35-.117 2.043-.117.72 0 1.443.041 2.12.126a.5.5 0 0 1 .622-.399l1.932.518a.5.5 0 0 1 .306.729c.14.09.266.19.373.297.408.408.78 1.05 1.095 1.772.32.733.599 1.591.805 2.466.206.875.34 1.78.364 2.606.024.816-.059 1.602-.328 2.21a1.42 1.42 0 0 1-1.445.83c-.636-.067-1.115-.394-1.513-.773-.245-.232-.496-.526-.739-.808-.126-.148-.25-.292-.368-.423-.728-.804-1.597-1.527-3.224-1.527-1.627 0-2.496.723-3.224 1.527-.119.131-.242.275-.368.423-.243.282-.494.575-.739.808-.398.38-.877.706-1.513.773a1.42 1.42 0 0 1-1.445-.83c-.27-.608-.352-1.395-.329-2.21.024-.826.16-1.73.365-2.606.206-.875.486-1.733.805-2.466.315-.722.687-1.364 1.094-1.772a2.34 2.34 0 0 1 .433-.335.504.504 0 0 1-.028-.079zm2.036.412c-.877.185-1.469.443-1.733.708-.276.276-.587.783-.885 1.465a13.748 13.748 0 0 0-.748 2.295 12.351 12.351 0 0 0-.339 2.406c-.022.755.062 1.368.243 1.776a.42.42 0 0 0 .426.24c.327-.034.61-.199.929-.502.212-.202.4-.423.615-.674.133-.156.276-.323.44-.504C4.861 9.969 5.978 9.027 8 9.027s3.139.942 3.965 1.855c.164.181.307.348.44.504.214.251.403.472.615.674.318.303.601.468.929.503a.42.42 0 0 0 .426-.241c.18-.408.265-1.02.243-1.776a12.354 12.354 0 0 0-.339-2.406 13.753 13.753 0 0 0-.748-2.295c-.298-.682-.61-1.19-.885-1.465-.264-.265-.856-.523-1.733-.708-.85-.179-1.877-.27-2.913-.27-1.036 0-2.063.091-2.913.27z"
      ></path>
    </svg>
    <p class="Yes name">Game</p>
  </div>
</label>

<style>
/* From Uiverse.io by milegelu  - Tags: blue, black, button, active, checkbox, modern, click animation */
.container {
  --UnChacked-color: hsl(0, 0%, 10%);
  --chacked-color: hsl(216, 100%, 60%);
  --font-color: white;
  --chacked-font-color: var(--font-color);
  --icon-size: 1.5em;
  --anim-time: 0.2s;
  --anim-scale: 0.1;
  --base-radius: 0.8em;
}

.container {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  fill: var(--font-color);
  color: var(--font-color);
}

/* Hide the default checkbox */
.container input {
  display: none;
}

/* Base custom checkbox */
.checkmark {
  background: var(--UnChacked-color);
  border-radius: var(--base-radius);

  display: flex;
  padding: 0.5em;
}
.icon {
  width: var(--icon-size);
  height: auto;
  filter: drop-shadow(0px 2px var(--base-radius) rgba(0, 0, 0, 0.25));
}
.name {
  margin: 0 0.25em;
}
.Yes {
  width: 0;
}
.name.Yes {
  display: none;
}

/* action custom checkbox */
.container:hover .checkmark,
.container:hover .icon,
.container:hover .name {
  transform: scale(calc(1 + var(--anim-scale)));
}

.container:active .checkmark,
.container:active .icon,
.container:active .name {
  transform: scale(calc(1 - var(--anim-scale) / 2));
  border-radius: calc(var(--base-radius) * 2);
}
.checkmark::before {
  content: "";
  opacity: 0.5;
  transform: scale(1);
  border-radius: var(--base-radius);
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.checkmark:hover:before {
  background-color: hsla(0, 0%, 50%, 0.2);
}
.container input:checked + .checkmark:before {
  animation: boon calc(var(--anim-time)) ease;
  animation-delay: calc(var(--anim-time) / 2);
}

/* When the checkbox is checked*/
.container input:checked + .checkmark {
  --UnChacked-color: var(--chacked-color);
  fill: var(--chacked-font-color);
  color: var(--chacked-font-color);
}

.container input:checked ~ .checkmark .No {
  width: 0;
}
.container input:checked ~ .checkmark .name.No {
  display: none;
}

.container input:checked ~ .checkmark .Yes {
  width: var(--icon-size);
}
.container input:checked ~ .checkmark .name.Yes {
  width: auto;
  display: unset;
}

/*Animation*/
.container,
.checkmark,
.checkmark:after,
.icon,
.checkmark .name {
  transition: all var(--anim-time);
}

/*Unuse*/
@keyframes icon-rot {
  50% {
    transform: rotateZ(180deg) scale(calc(1 - var(--anim-scale)));
    border-radius: 1em;
  }
  to {
    transform: rotate(360deg);
    border-radius: var(--base-radius);
  }
}
/*Unuse*/
@keyframes boo {
  80% {
    transform: scale(1.4);
  }
  99% {
    transform: scale(1.7);
    border: 2px solid var(--UnChacked-color);
  }
  to {
    transform: scale(0);
  }
}

</style>
    

================================================
FILE: Checkboxes/mnikita7767_purple-swan-7.html
================================================
<section class="container">
  <label>
    <input type="checkbox" name="check" />
    <span></span>
    <p>N</p>
  </label>
</section>

<style>
/* From Uiverse.io by mnikita7767  - Tags: checkbox */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container label {
  cursor: pointer;
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
label input {
  appearance: none;
}
label span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#555353, #363535, #303030);
  border: 2px solid #222;
  border-top-width: 4px;
  border-radius: 6px;
  box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.23), 0 5px 5px rgba(0, 0, 0, 0.5),
    0 15px 25px rgba(0, 0, 0, 0.35);
}
.container label span::before {
  content: "";
  position: absolute;
  border-top: 1px solid #fff;
  inset: 5px 3px;
  filter: blur(5px);
}
.container label input:checked ~ span {
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35),
    inset 0 5px 5px rgba(0, 0, 0, 0.5), inset 0 15px 25px rgba(0, 0, 0, 0.35);
}
label p {
  position: relative;
  z-index: 10;
  font-size: 3rem;
  color: #111;
}
.container label input:checked ~ p {
  color: #fff;
  text-shadow: 0 0 5px #219cf3, 0 0 8px #219cf3;
}

</style>
    

================================================
FILE: Checkboxes/mobinkakei_sour-lionfish-18.html
================================================
<label class="checkbox-wrapper">
<input checked="" type="checkbox" id="check" hidden="">
<label for="check" class="checkmark"></label>
</label>
<style>
/* From Uiverse.io by mobinkakei - Tags: checkbox */
.checkmark {
 display: block;
 width: 30px;
 height: 30px;
 background-color: #ddd;
 border-radius: 10px;
 position: relative;
 transition: background-color 0.4s;
 overflow: hidden;
 cursor: pointer;
}

#check:checked ~ .checkmark {
 background-color: #08bb68;
}

.checkmark::after {
 content: "";
 position: absolute;
 width: 5px;
 height: 10px;
 border-right: 3px solid #fff;
 border-bottom: 3px solid #fff;
 top: 44%;
 left: 50%;
 transform: translate(-50%, -50%) rotateZ(40deg) scale(10);
 opacity: 0;
 transition: all 0.4s;
}

#check:checked ~ .checkmark::after {
 opacity: 1;
 transform: translate(-50%, -50%) rotateZ(40deg) scale(1);
}
</style>


================================================
FILE: Checkboxes/mobinkakei_strange-frog-14.html
================================================
<input id="inpLock" type="checkbox">
<label class="btn-lock" for="inpLock">
    <svg width="36" height="40" viewBox="0 0 36 40">
        <path class="lockb" d="M27 27C27 34.1797 21.1797 40 14 40C6.8203 40 1 34.1797 1 27C1 19.8203 6.8203 14 14 14C21.1797 14 27 19.8203 27 27ZM15.6298 26.5191C16.4544 25.9845 17 25.056 17 24C17 22.3431 15.6569 21 14 21C12.3431 21 11 22.3431 11 24C11 25.056 11.5456 25.9845 12.3702 26.5191L11 32H17L15.6298 26.5191Z"></path>
        <path class="lock" d="M6 21V10C6 5.58172 9.58172 2 14 2V2C18.4183 2 22 5.58172 22 10V21"></path>
        <path class="bling" d="M29 20L31 22"></path>
        <path class="bling" d="M31.5 15H34.5"></path>
        <path class="bling" d="M29 10L31 8"></path>
    </svg>
</label>
<style>
/* From Uiverse.io by mobinkakei - Tags: checkbox, lock */
.btn-lock {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  display: inline-block;
  background: #ff5b5b;
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  padding: 12px 0 0 18px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-lock svg {
  fill: none;
  transform: translate3d(0, 0, 0);
}

.btn-lock svg .bling {
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 3;
  stroke-dashoffset: 15;
  transition: all 0.3s ease;
}

.btn-lock svg .lock {
  stroke: #fff;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 36;
  transition: all 0.4s ease;
}

.btn-lock svg .lockb {
  fill: #fff;
  fill-rule: evenodd;
  clip-rule: evenodd;
  transform: rotate(8deg);
  transform-origin: 14px 20px;
  transition: all 0.2s ease;
}

#inpLock {
  display: none;
}

#inpLock:checked + label {
  background: #20cca5;
}

#inpLock:checked + label svg {
  opacity: 1;
}

#inpLock:checked + label svg .bling {
  animation: bling6132 0.3s linear forwards;
  animation-delay: 0.2s;
}

#inpLock:checked + label svg .lock {
  stroke-dasharray: 48;
  animation: locked 0.3s linear forwards;
}

#inpLock:checked + label svg .lockb {
  transform: rotate(0);
  transform-origin: 14px 22px;
}

@keyframes bling6132 {
  50% {
    stroke-dasharray: 3;
    stroke-dashoffset: 12;
  }

  100% {
    stroke-dasharray: 3;
    stroke-dashoffset: 9;
  }
}

@keyframes locked {
  50% {
    transform: translateY(1px);
  }
}

</style>


================================================
FILE: Checkboxes/mobinkakei_tender-badger-3.html
================================================
<div class="container">
  <label>
    <input class="play-btn" type="checkbox" />
    <div class="play-icon"></div>
    <div class="pause-icon"></div>
  </label>
</div>

<style>
/* From Uiverse.io by mobinkakei  - Tags: switch, checkbox, input, off */
.container {
  width: 80px;
  height: 80px;
  position: relative;
  border-radius: 50%;
}

.play-btn {
  position: absolute;
  appearance: none;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(#ff6347, #ff6347);
  cursor: pointer;
  outline: none;
}

.play-btn::before {
  content: "";
  position: absolute;
  width: 93%;
  height: 93%;
  background-color: #000;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.play-btn:checked {
  animation: borderAnimate 700ms ease-in-out 1;
  animation-fill-mode: forwards;
}

@keyframes borderAnimate {
  0% {
    transform: rotate(0);
    background: conic-gradient(#ff6347, transparent 20%);
  }

  80% {
    background: conic-gradient(#ff6347, transparent 90%);
  }

  100% {
    transform: rotate(360deg);
    background: conic-gradient(#ff6347, #ff6347);
  }
}

.play-icon {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 60%;
  top: 50%;
  background-color: #ff6347;
  transform: translate(-60%, -50%) rotate(90deg);
  clip-path: polygon(50% 15%, 0% 100%, 100% 100%);
  transition: all 400ms ease-in-out;
  cursor: pointer;
}

.play-btn:checked + .play-icon {
  clip-path: polygon(0 100%, 0% 100%, 100% 100%);
}

.pause-icon {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.pause-icon::before {
  content: "";
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #ff6347;
  left: 0;
}

.pause-icon::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  background-color: #ff6347;
  right: 0;
}

.play-btn:checked ~ .pause-icon::before {
  animation: reveal 300ms ease-in-out 350ms 1;
  animation-fill-mode: forwards;
}

.play-btn:checked ~ .pause-icon::after {
  animation: reveal 300ms ease-in-out 600ms 1;
  animation-fill-mode: forwards;
}

@keyframes reveal {
  0% {
    width: 0;
  }

  100% {
    width: 35%;
  }
}

</style>
    

================================================
FILE: Checkboxes/mrhyddenn_slippery-bear-64.html
================================================
<div class="container">
    <input type="checkbox" id="cbx" style="display: none;">
    <label for="cbx" class="check">
        <svg width="18px" height="18px" viewBox="0 0 18 18">
            <path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
            <polyline points="1 9 7 14 15 4"></polyline>
        </svg>
    </label>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: checkbox */
.check {
  cursor: pointer;
  position: relative;
  margin: auto;
  width: 18px;
  height: 18px;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0, 0, 0);
}

.check:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(34,50,84,0.03);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.check svg {
  position: relative;
  z-index: 1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #c8ccd4;
  stroke-width: 1.5;
  transform: translate3d(0, 0, 0);
  transition: all 0.2s ease;
}

.check svg path {
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
}

.check svg polyline {
  stroke-dasharray: 22;
  stroke-dashoffset: 66;
}

.check:hover:before {
  opacity: 1;
}

.check:hover svg {
  stroke: #4285f4;
}

#cbx:checked + .check svg {
  stroke: #4285f4;
}

#cbx:checked + .check svg path {
  stroke-dashoffset: 60;
  transition: all 0.3s linear;
}

#cbx:checked + .check svg polyline {
  stroke-dashoffset: 42;
  transition: all 0.2s linear;
  transition-delay: 0.15s;
}

</style>


================================================
FILE: Checkboxes/mrhyddenn_slippery-pug-63.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by mrhyddenn - Tags: checkbox */
/* Hide the default checkbox */
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.container {
 display: block;
 position: relative;
 cursor: pointer;
 font-size: 20px;
 user-select: none;
}

/* Create a custom checkbox */
.checkmark {
 position: relative;
 top: 0;
 left: 0;
 height: 1.3em;
 width: 1.3em;
 background: #606062;
 border-radius: 7px;
 box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.30), 0px 1px 1px rgba(0,5);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
 background-image: linear-gradient(#255CD2,#1D52C1)
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
 left: 0.45em;
 top: 0.20em;
 width: 0.24em;
 height: 0.6em;
 border: solid white;
 border-width: 0 0.15em 0.15em 0;
 transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/mrhyddenn_yellow-donkey-63.html
================================================
<label class="container">
    <input checked="checked" type="checkbox">
    <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by mrhyddenn - Tags: checkbox, circle */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: #e5e5e5;
  border-radius: 50%;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: seagreen;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/mrpumps31232_heavy-bear-50.html
================================================
<label class="checkbox">
  <input type="checkbox">
  <div class="checkbox-circle">
    <svg viewBox="0 0 52 52" class="checkmark">
      <circle fill="none" r="25" cy="26" cx="26" class="checkmark-circle"></circle>
      <path d="M16 26l9.2 8.4 17.4-21.4" class="checkmark-kick"></path>
    </svg>
  </div>
</label>

<style>
/* From Uiverse.io by mrpumps31232 - Tags: green, minimalist, checkbox, circle, animated, clean */
.checkbox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
}

.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.checkbox-circle {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #aaa;
  transition: all 0.3s;
}

.checkbox input[type="checkbox"]:checked ~ .checkbox-circle {
  background: #4CAF50;
  border-color: #4CAF50;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: all 0.3s;
}

.checkbox input[type="checkbox"]:checked ~ .checkbox-circle .checkmark {
  opacity: 1;
}

.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  transition: stroke-dashoffset 0.3s;
}

.checkbox input[type="checkbox"]:checked ~ .checkbox-circle .checkmark-circle {
  stroke-dashoffset: 0;
}

.checkmark-kick {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  transition: stroke-dashoffset 0.3s;
}

.checkbox input[type="checkbox"]:checked ~ .checkbox-circle .checkmark-kick {
  stroke-dashoffset: 0;
}

</style>


================================================
FILE: Checkboxes/myshy13_blue-frog-13.html
================================================
<label class="container">
  <input type="checkbox" checked="checked" />
  <div class="checkmark"></div>
</label>

<style>
/* From Uiverse.io by myshy13  - Tags: checkbox */
.container input {
  opacity: 0;
  cursor: pointer;
  display: none;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

.checkmark {
  transition: 0.5s ease;
  border-radius: 0.2em;
}

.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: #ccc;
}
.container input:checked ~ .checkmark {
  background-color: #b30000;
  box-shadow: #ff2929 0px 0px 1em;
  outline: rgb(139, 0, 0) 3px solid;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .checkmark::after {
  display: block;
}

.container .checkmark::after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

</style>
    

================================================
FILE: Checkboxes/nanda248_wonderful-bear-26.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="circle">
    <div class="led"></div>
    <span class="engine-text">ENGINE</span>
    <span class="start-text">START</span>
    <span class="stop-text">STOP</span>
  </div>
</label>
<style>
/* From Uiverse.io by nanda248 - Tags: checkbox, engine, start/stop */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

/* Create a custom checkbox checkmark=outer-circle */
.circle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 6em;
  height: 6em;
  border-radius: 50%;
  border: 6px solid #838996;
  background-color: #282828;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.circle span {
  color: #e5e4e2;
  font-size: small;
}

.circle .led {
  width: 1em;
  height: 0.2em;
  background-color: #BBBBBB;
  border-radius: 5px;
  transition: 0.4s;
}

.engine-text {
  margin-top: 0.75em;
  font-weight: 500;
}

.start-text, .stop-text {
  font-weight: 600;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .circle .led {
  background-color: #FDDA16;
  box-shadow: #FDDA16 0px 1px 0px, #FDDA16 0px 0px 8px;
}

.container input:checked ~ .circle {
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
   rgba(14, 30, 37, 0.32) 0px 2px 16px 0px,
   inset 3px 3px 8px 1px #485871,
   inset -3px -3px 8px 1px #485871;
}
</style>


================================================
FILE: Checkboxes/neerajbaniwal_rotten-dingo-46.html
================================================
<label class="ui-bookmark">
  <input type="checkbox" />
  <div class="bookmark">
    <svg viewBox="0 0 32 32">
      <g>
        <path
          d="M27 4v27a1 1 0 0 1-1.625.781L16 24.281l-9.375 7.5A1 1 0 0 1 5 31V4a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4z"
        ></path>
      </g>
    </svg>
  </div>
</label>

<style>
/* From Uiverse.io by neerajbaniwal  - Tags: checkbox, click, animated */
.ui-bookmark {
  --icon-size: 24px;
  --icon-secondary-color: rgb(164, 164, 164);
  --icon-hover-color: rgb(165, 164, 164);
  --icon-primary-color: gold;
  --icon-circle-border: 1px solid var(--icon-primary-color);
  --icon-circle-size: 35px;
  --icon-anmt-duration: 0.3s;
}

.ui-bookmark input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
}

.ui-bookmark .bookmark {
  width: var(--icon-size);
  height: auto;
  fill: var(--icon-secondary-color);
  cursor: pointer;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
}

.bookmark::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  -webkit-box-shadow: 0 30px 0 -4px var(--icon-primary-color),
    30px 0 0 -4px var(--icon-primary-color),
    0 -30px 0 -4px var(--icon-primary-color),
    -30px 0 0 -4px var(--icon-primary-color),
    -22px 22px 0 -4px var(--icon-primary-color),
    -22px -22px 0 -4px var(--icon-primary-color),
    22px -22px 0 -4px var(--icon-primary-color),
    22px 22px 0 -4px var(--icon-primary-color);
  box-shadow: 0 30px 0 -4px var(--icon-primary-color),
    30px 0 0 -4px var(--icon-primary-color),
    0 -30px 0 -4px var(--icon-primary-color),
    -30px 0 0 -4px var(--icon-primary-color),
    -22px 22px 0 -4px var(--icon-primary-color),
    -22px -22px 0 -4px var(--icon-primary-color),
    22px -22px 0 -4px var(--icon-primary-color),
    22px 22px 0 -4px var(--icon-primary-color);
  border-radius: 50%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.bookmark::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: var(--icon-circle-border);
  opacity: 0;
}

/* actions */

.ui-bookmark:hover .bookmark {
  fill: var(--icon-hover-color);
}

.ui-bookmark input:checked + .bookmark::after {
  -webkit-animation: circles var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation: circles var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  -webkit-animation-delay: var(--icon-anmt-duration);
  animation-delay: var(--icon-anmt-duration);
}

.ui-bookmark input:checked + .bookmark {
  fill: var(--icon-primary-color);
  -webkit-animation: bookmark var(--icon-anmt-duration) forwards;
  animation: bookmark var(--icon-anmt-duration) forwards;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.ui-bookmark input:checked + .bookmark::before {
  -webkit-animation: circle var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation: circle var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  -webkit-animation-delay: var(--icon-anmt-duration);
  animation-delay: var(--icon-anmt-duration);
}

@-webkit-keyframes bookmark {
  50% {
    -webkit-transform: scaleY(0.6);
    transform: scaleY(0.6);
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@keyframes bookmark {
  50% {
    -webkit-transform: scaleY(0.6);
    transform: scaleY(0.6);
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@-webkit-keyframes circle {
  from {
    width: 0;
    height: 0;
    opacity: 0;
  }

  90% {
    width: var(--icon-circle-size);
    height: var(--icon-circle-size);
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes circle {
  from {
    width: 0;
    height: 0;
    opacity: 0;
  }

  90% {
    width: var(--icon-circle-size);
    height: var(--icon-circle-size);
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes circles {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes circles {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
}

</style>
    

================================================
FILE: Checkboxes/nikk7007_kind-jellyfish-57.html
================================================
<label class="cont">
  <input type="checkbox" checked="">
  <span></span>
</label>
<style>
/* From Uiverse.io by nikk7007 - Tags: checkbox */
.cont {
 display: flex;
 align-items: center;
 transform: scale(1);
}

input[type="checkbox"] {
 height: 1.7rem;
 width: 1.7rem;
 margin: 5px;
 display: inline-block;
 appearance: none;
 position: relative;
 background-color: #F2ECFF;
 border-radius: 15%;
 cursor: pointer;
 overflow: hidden;
}

input[type="checkbox"]::after {
 content: '';
 display: block;
 height: 0.9rem;
 width: .4rem;
 border-bottom: .31rem solid #a0ffe7;
 border-right: .31rem solid #a0ffe7;
 opacity: 0;
 transform: rotate(45deg) translate(-50%, -50%);
 position: absolute;
 top: 45%;
 left: 21%;
 transition: .25s ease;
}

input[type="checkbox"]::before {
 content: '';
 display: block;
 height: 0;
 width: 0;
 background-color: #00C896;
 border-radius: 50%;
 opacity: .5;
 transform: translate(-50%, -50%);
 position: absolute;
 top: 50%;
 left: 50%;
 transition: .3s ease;
}

input[type="checkbox"]:checked::before {
 height: 130%;
 width: 130%;
 opacity: 100%;
}

input[type="checkbox"]:checked::after {
 opacity: 100%;
}

span {
 font-size: 2rem;
}
</style>


================================================
FILE: Checkboxes/ozgeozkaraa01_curly-rabbit-54.html
================================================
<div class="cntr">
  <input class="hidden-xs-up" id="cbx" type="checkbox" checked="">
  <label class="cbx" for="cbx"></label>
</div>
<style>
/* From Uiverse.io by ozgeozkaraa01 - Tags: checkbox, click animation, cool checkbox */
.cbx {
  position: relative;
  top: 1px;
  width: 27px;
  height: 27px;
  border: 1px solid #475569;
  border-radius: 10px;
  transition: background 0.2s ease;
  cursor: pointer;
  display: block;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.cbx:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 8px;
  width: 7px;
  height: 14px;
  opacity: 0;
  transform: rotate(45deg) scale(0);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transition: all 0.3s ease;
  transition-delay: 0.15s;
}

#cbx:checked ~ .cbx {
  border-color: transparent;
  background: #ec4899;
  animation: jelly 0.4s ease;
}

#cbx:checked ~ .cbx:after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.cntr {
  position: relative;
}

@keyframes jelly {
  from {
    transform: scale(1, 1);
  }

  20% {
    transform: scale(1.3, 0.7);
  }

  40% {
    transform: scale(0.7, 1.3);
  }

  60% {
    transform: scale(1.1, 0.9);
  }

  80% {
    transform: scale(0.9, 1.1);
  }

  to {
    transform: scale(1, 1);
  }
}

.hidden-xs-up {
  display: none!important;
}

</style>


================================================
FILE: Checkboxes/reshades_average-horse-80.html
================================================
<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark">
    <div class="checkmark2"></div>
  </div>
</label>
<style>
/* From Uiverse.io by reshades - Tags: checkbox, clean */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: #ffffff00;
  border-radius: 5px;
  border: #fff 1px solid;
  transition: all 0.2s;
}

.checkmark2 {
  position: relative;
  top: 0.12em;
  left: 0.12em;
  height: 1.0em;
  width: 1.0em;
  background-color: #ffffff00;
  border-radius: 111px;
  border: #fff 1px solid;
  transition: all 0.2s;
}

.container input:checked ~ .checkmark {
  background-color: #4346ff;
  border: #4346ff 1px solid
}



</style>


================================================
FILE: Checkboxes/sans-script_modern-stingray-0.html
================================================
<div class="center">
		<input name="" type="checkbox">
</div>
<style>
/* From Uiverse.io by sans-script - Tags: checkbox, square */
.center {
  width: 100%;
  text-align: center;
}

input[type="checkbox"] {
  position: relative;
  top: 8px;
  width: 40px;
  height: 40px;
  -webkit-appearance: none;
  outline: none;
  transition: 0.5s;
}

input[type="checkbox"]:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 4px solid #262626;
  box-sizing: border-box;
  transition: 0.5s;
}

input:checked[type="checkbox"]:before {
  border-left: none;
  border-top: none;
  width: 20px;
  border-color: rgb(24, 196, 24);
  transform: rotate(45deg) translate(5px, -10px);
}
</style>


================================================
FILE: Checkboxes/shreyasm-dev_bright-rat-5.html
================================================
<label class="container">
    <input type="checkbox" checked="checked">
    <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by shreyasm-dev - Tags: neumorphism, checkbox */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: #ccc;
  border-radius: 100%;
  background: #e8e8e8;
  box-shadow: 3px 3px 5px #c5c5c5,
              -3px -3px 5px #ffffff;
  transition-duration: 0.5s;
}

.container input:checked ~ .checkmark {
  box-shadow: inset 3px 3px 5px #c5c5c5,
              inset -3px -3px 5px #ffffff;
}

.checkmark:after {
  content: "";
  position: absolute;
  opacity: 0;
}

.container input:checked ~ .checkmark:after {
  opacity: 1;
}

.container .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid darkgray;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/sssynk_tall-octopus-55.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by sssynk - Tags: checkbox */
/* Hide the default checkbox */
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
 border-radius: 5px;
}

.container {
 display: block;
 position: relative;
 cursor: pointer;
 font-size: 20px;
 user-select: none;
 border-radius: 5px;
 box-shadow: 2px 2px 0px rgb(183, 183, 183);
}

/* Create a custom checkbox */
.checkmark {
 position: relative;
 top: 0;
 left: 0;
 height: 1.3em;
 width: 1.3em;
 background-color: #ccc;
 border-radius: 5px;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
 box-shadow: 3px 3px 0px rgb(183, 183, 183);
 transition: all 0.2s;
 opacity: 1;
 background-image: linear-gradient(45deg, rgb(100, 61, 219) 0%, rgb(217, 21, 239) 100%);
}

.container input ~ .checkmark {
 transition: all 0.2s;
 opacity: 1;
 box-shadow: 1px 1px 0px rgb(183, 183, 183);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 opacity: 0;
 transition: all 0.2s;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
 opacity: 1;
 transition: all 0.2s;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
 left: 0.45em;
 top: 0.25em;
 width: 0.25em;
 height: 0.5em;
 border: solid white;
 border-width: 0 0.15em 0.15em 0;
 transform: rotate(45deg);
}
</style>


================================================
FILE: Checkboxes/sujeet-12_warm-dragonfly-92.html
================================================
<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by sujeet-12 - Tags: checkbox, fun-check, circle-checkbox */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  animation: jello-horizontal 0.9s both;
}

.checkmark:hover {
  animation: jello-horizontal 0.9s both;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  border-radius: 50%;
  background-color: #eee;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: royalblue;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


</style>


================================================
FILE: Checkboxes/talhaabu1_odd-cobra-97.html
================================================
<div class="checkbox-wrapper-23">
  <input type="checkbox" id="check-23">
  <label for="check-23" style="--size: 30px">
    <svg viewBox="0,0,50,50">
      <path d="M5 30 L 20 45 L 45 5"></path>
    </svg>
  </label>
</div>
<style>
/* From Uiverse.io by talhaabu1 - Tags: checkbox */
.checkbox-wrapper-23 *,
  .checkbox-wrapper-23 *:after,
  .checkbox-wrapper-23 *:before {
  box-sizing: border-box;
}

.checkbox-wrapper-23 input {
  position: absolute;
  opacity: 0;
}

.checkbox-wrapper-23 input:checked + label svg path {
  stroke-dashoffset: 0;
}

.checkbox-wrapper-23 input:focus + label {
  transform: scale(1.03);
}

.checkbox-wrapper-23 input + label {
  display: block;
  border: 2px solid rgb(253, 237, 237);
  width: var(--size);
  height: var(--size);
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s ease;
}

.checkbox-wrapper-23 input + label:active {
  transform: scale(1.05);
  border-radius: 12px;
}

.checkbox-wrapper-23 input + label svg {
  pointer-events: none;
  padding: 5%;
}

.checkbox-wrapper-23 input + label svg path {
  fill: none;
  stroke: rgb(247, 247, 247);
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 101;
  transition: all 250ms cubic-bezier(1,0,.37,.91);
}

</style>


================================================
FILE: Checkboxes/themrsami_ugly-panther-10.html
================================================
<!-- From Uiverse.io by themrsami - Tags: white, checkbox, tailwind, tailwindcss -->
<div class="dark:bg-black/10">
  <label class="text-white">
    <input class="dark:border-white-400/20 dark:scale-100 transition-all duration-500 ease-in-out dark:hover:scale-110 dark:checked:scale-100 w-10 h-10" type="checkbox">
  </label>
</div>




================================================
FILE: Checkboxes/vinodjangid07_sour-rabbit-84.html
================================================
<label class="container">
  <input type="checkbox" />
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 75 100"
    class="pin"
  >
    <line
      stroke-width="12"
      stroke="black"
      y2="100"
      x2="37"
      y1="64"
      x1="37"
    ></line>
    <path
      stroke-width="10"
      stroke="black"
      d="M16.5 36V4.5H58.5V36V53.75V54.9752L59.1862 55.9903L66.9674 67.5H8.03256L15.8138 55.9903L16.5 54.9752V53.75V36Z"
    ></path>
  </svg>
</label>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: hover, checkbox, toggle, save, hover effect, pin, bookmark */
.container input {
  display: none;
}
.pin {
  width: 15px;
  height: auto;
  transform: rotate(35deg);
}
.container {
  width: 45px;
  height: 45px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
}
.container input:checked ~ .pin {
  fill: rgb(179, 139, 255);
  stroke: white;
}
.container input:checked ~ .pin line {
  stroke: rgb(179, 139, 255);
}
.container input:checked ~ .pin path {
  stroke: rgb(179, 139, 255);
}
.container:hover {
  background-color: rgb(244, 238, 255);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.041);
}
.container:active {
  transform: scale(0.9);
}

</style>
    

================================================
FILE: Checkboxes/vinodjangid07_terrible-starfish-29.html
================================================
<input type="checkbox" id="checkboxInput">
    <label for="checkboxInput" class="bookmark">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512" class="svgIcon"><path d="M0 48V487.7C0 501.1 10.9 512 24.3 512c5 0 9.9-1.5 14-4.4L192 400 345.7 507.6c4.1 2.9 9 4.4 14 4.4c13.4 0 24.3-10.9 24.3-24.3V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48z"></path></svg>
    </label>





<style>
/* From Uiverse.io by vinodjangid07 - Tags: checkbox, save, click effect, bookmark */
.bookmark {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#checkboxInput {
  display: none;
}

.svgIcon {
  height: 30px;
}

.svgIcon path {
  fill: rgb(153, 153, 153);
}

.bookmark::before {
  content: "\002B";
  position: absolute;
  color: rgb(255, 255, 255);
  font-size: 1.2em;
  top: 1px;
}

#checkboxInput:checked + .bookmark::before {
  content: "\2713";
  font-size: 0.70em;
  top: 5px;
}

#checkboxInput:checked + .bookmark .svgIcon path {
  fill: rgb(121, 199, 3);
}

#checkboxInput:active + .bookmark .svgIcon path {
  fill: rgb(204, 204, 204);
}

.bookmark::after {
  content: "";
  background-color: rgba(56, 105, 0, 0.342);
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: -1;
}

#checkboxInput:checked + .bookmark::after {
  animation: puff-out-center .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}

@keyframes puff-out-center {
  0% {
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
  }

  100% {
    transform: scale(9);
    filter: blur(1px);
    opacity: 0;
  }
}

</style>


================================================
FILE: Checkboxes/vishnupprajapat_wicked-catfish-29.html
================================================
<div class="checkbox-wrapper-46">
  <input type="checkbox" id="cbx-46" class="inp-cbx" />
  <label for="cbx-46" class="cbx"
    ><span>
      <svg viewBox="0 0 12 10" height="10px" width="12px">
        <polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg></span
    ><span>Checkbox</span>
  </label>
</div>

<style>
/* From Uiverse.io by vishnupprajapat  - Tags: button, checkbox, switcher, click effect, cool checkbox */
.checkbox-wrapper-46 input[type="checkbox"] {
  display: none;
  visibility: hidden;
}

.checkbox-wrapper-46 .cbx {
  margin: auto;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.checkbox-wrapper-46 .cbx span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-46 .cbx span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  transform: scale(1);
  vertical-align: middle;
  border: 1px solid #9098a9;
  transition: all 0.2s ease;
}
.checkbox-wrapper-46 .cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-46 .cbx span:first-child:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #506eec;
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
}
.checkbox-wrapper-46 .cbx span:last-child {
  padding-left: 8px;
}
.checkbox-wrapper-46 .cbx:hover span:first-child {
  border-color: #506eec;
}

.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child {
  background: #506eec;
  border-color: #506eec;
  animation: wave-46 0.4s ease;
}
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child:before {
  transform: scale(3.5);
  opacity: 0;
  transition: all 0.6s ease;
}

@keyframes wave-46 {
  50% {
    transform: scale(0.9);
  }
}

</style>
    

================================================
FILE: Forms/3bdel3ziz-T_helpless-wasp-32.html
================================================
<section class="add-card page">
  <form class="form">
    <label for="name" class="label">
      <span class="title">Card holder full name</span>
      <input
        class="input-field"
        type="text"
        name="input-name"
        title="Input title"
        placeholder="Enter your full name"
      />
    </label>
    <label for="serialCardNumber" class="label">
      <span class="title">Card Number</span>
      <input
        id="serialCardNumber"
        class="input-field"
        type="number"
        name="input-name"
        title="Input title"
        placeholder="0000 0000 0000 0000"
      />
    </label>
    <div class="split">
      <label for="ExDate" class="label">
        <span class="title">Expiry Date</span>
        <input
          id="ExDate"
          class="input-field"
          type="text"
          name="input-name"
          title="Expiry Date"
          placeholder="01/23"
        />
      </label>
      <label for="cvv" class="label">
        <span class="title"> CVV</span>
        <input
          id="cvv"
          class="input-field"
          type="number"
          name="cvv"
          title="CVV"
          placeholder="CVV"
        />
      </label>
    </div>
    <input class="checkout-btn" type="button" value="Checkout" />
  </form>
</section>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: material design, tooltip, form, text animation, click animation, cool card, cardhover , card animation */
.form {
  background: #0c0f14;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01),
    0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09),
    0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  position: relative;
  border-radius: 25px;
}
.form .label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: -moz-fit-content;
  height: fit-content;
}
.form .label:has(input:focus) .title {
  top: 0;
  left: 0;
  color: #d17842;
}
.form .label .title {
  padding: 0 10px;
  transition: all 300ms;
  font-size: 12px;
  color: #8b8e98;
  font-weight: 600;
  width: -moz-fit-content;
  width: fit-content;
  top: 14px;
  position: relative;
  left: 15px;
  background: #0c0f14;
}
.form .input-field {
  width: auto;
  height: 50px;
  text-indent: 15px;
  border-radius: 15px;
  outline: none;
  background-color: transparent;
  border: 1px solid #21262e;
  transition: all 0.3s;
  caret-color: #d17842;
  color: #aeaeae;
}

.form .input-field:hover {
  border-color: rgba(209, 121, 66, 0.5);
}

.form .input-field:focus {
  border-color: #d17842;
}
.form .split {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  gap: 15px;
}
.form .split label {
  width: 130px;
}
.form .checkout-btn {
  margin-top: 20px;
  padding: 20px 0;
  border-radius: 25px;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  border: none;
  justify-content: center;
  fill: #fff;
  color: #fff;
  border: 2px solid transparent;
  background: #d17842;
  transition: all 200ms;
}
.form .checkout-btn:active {
  scale: 0.95;
}

.form .checkout-btn:hover {
  color: #d17842;
  border: 2px solid #d17842;
  background: transparent;
}

</style>
    

================================================
FILE: Forms/Admin12121_shy-gecko-42.html
================================================
<div class="container">
	
	<div class="modal">
		<div class="modal__header">
			<span class="modal__title">New project</span><button class="button button--icon"><svg width="24" viewBox="0 0 24 24" height="24" xmlns="http://www.w3.org/2000/svg">
					<path fill="none" d="M0 0h24v24H0V0z"></path>
					<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg></button>
		</div>
		<div class="modal__body">
			<div class="input">
				<label class="input__label">Project title</label>
				<input class="input__field" type="text"> 
				<p class="input__description">The title must contain a maximum of 32 characters</p>
			</div>
			<div class="input">
								<label class="input__label">Description</label>
				<textarea class="input__field input__field--textarea"></textarea>
					<p class="input__description">Give your project a good description so everyone know what's it for</p>
			</div>
		</div>
		<div class="modal__footer">
			<button class="button button--primary">Create project</button>
		</div>
	</div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: form, contacts form, coolform */
.button {
  appaerance: none;
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  background-color: #fff;
  box-shadow: 0 15px 30px 0 rgba(0, 125, 171, 0.15);
  border-radius: 10px;
}

.modal__header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal__body {
  padding: 1rem 1rem;
}

.modal__footer {
  padding: 0 1.5rem 1.5rem;
}

.modal__title {
  font-weight: 700;
  font-size: 1.25rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.15s ease;
}

.button--icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: transparent;
  border-radius: 0.25rem;
}

.button--icon:focus, .button--icon:hover {
  background-color: #ededed;
}

.button--primary {
  background-color: #007dab;
  color: #FFF;
  padding: 0.75rem 1.25rem;
  border-radius: 0.25rem;
  font-weight: 500;
  font-size: 0.875rem;
}

.button--primary:hover {
  background-color: #006489;
}

.input {
  display: flex;
  flex-direction: column;
}

.input + .input {
  margin-top: 1.75rem;
}

.input__label {
  font-weight: 700;
  font-size: 0.875rem;
}

.input__field {
  display: block;
  margin-top: 0.5rem;
  border: 1px solid #DDD;
  border-radius: 0.25rem;
  padding: 0.75rem 0.75rem;
  transition: 0.15s ease;
}

.input__field:focus {
  outline: none;
  border-color: #007dab;
  box-shadow: 0 0 0 1px #007dab, 0 0 0 4px rgba(0, 125, 171, 0.25);
}

.input__field--textarea {
  min-height: 100px;
  max-width: 100%;
}

.input__description {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  color: #8d8d8d;
}
</style>


================================================
FILE: Forms/AmIt-DasIT_stale-snail-53.html
================================================
<div class="container">
    <input type="checkbox" id="signup_toggle">
    <form class="form">
        <div class="form_front">
            <div class="form_details">Login</div>
            <input placeholder="Username" class="input" type="text">
            <input placeholder="Password" class="input" type="text">
            <button class="btn">Login</button>
            <span class="switch">Don't have an account? 
                <label class="signup_tog" for="signup_toggle">
                    Sign Up
                </label>
            </span>
        </div>
        <div class="form_back">
            <div class="form_details">SignUp</div>
            <input placeholder="Firstname" class="input" type="text">
            <input placeholder="Username" class="input" type="text">
            <input placeholder="Password" class="input" type="text">
            <input placeholder="Confirm Password" class="input" type="text">
            <button class="btn">Signup</button>
            <span class="switch">Already have an account? 
                <label class="signup_tog" for="signup_toggle">
                    Sign In
                </label>
            </span>
        </div>
    </form>
</div>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: form, 3d card, 3d cool effect */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transition: all 1s ease;
}

.form .form_front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  position: absolute;
  backface-visibility: hidden;
  padding: 65px 45px;
  border-radius: 15px;
  box-shadow: inset 2px 2px 10px rgba(0,0,0,1),
  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}

.form .form_back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  position: absolute;
  backface-visibility: hidden;
  transform: rotateY(-180deg);
  padding: 65px 45px;
  border-radius: 15px;
  box-shadow: inset 2px 2px 10px rgba(0,0,0,1),
  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}

.form_details {
  font-size: 25px;
  font-weight: 600;
  padding-bottom: 10px;
  color: white;
}

.input {
  width: 245px;
  min-height: 45px;
  color: #fff;
  outline: none;
  transition: 0.35s;
  padding: 0px 7px;
  background-color: #212121;
  border-radius: 6px;
  border: 2px solid #212121;
  box-shadow: 6px 6px 10px rgba(0,0,0,1),
  1px 1px 10px rgba(255, 255, 255, 0.6);
}

.input::placeholder {
  color: #999;
}

.input:focus.input::placeholder {
  transition: 0.3s;
  opacity: 0;
}

.input:focus {
  transform: scale(1.05);
  box-shadow: 6px 6px 10px rgba(0,0,0,1),
  1px 1px 10px rgba(255, 255, 255, 0.6),
  inset 2px 2px 10px rgba(0,0,0,1),
  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}

.btn {
  padding: 10px 35px;
  cursor: pointer;
  background-color: #212121;
  border-radius: 6px;
  border: 2px solid #212121;
  box-shadow: 6px 6px 10px rgba(0,0,0,1),
  1px 1px 10px rgba(255, 255, 255, 0.6);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  transition: 0.35s;
}

.btn:hover {
  transform: scale(1.05);
  box-shadow: 6px 6px 10px rgba(0,0,0,1),
  1px 1px 10px rgba(255, 255, 255, 0.6),
  inset 2px 2px 10px rgba(0,0,0,1),
  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}

.btn:focus {
  transform: scale(1.05);
  box-shadow: 6px 6px 10px rgba(0,0,0,1),
  1px 1px 10px rgba(255, 255, 255, 0.6),
  inset 2px 2px 10px rgba(0,0,0,1),
  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}

.form .switch {
  font-size: 13px;
  color: white;
}

.form .switch .signup_tog {
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.container #signup_toggle {
  display: none;
}

.container #signup_toggle:checked + .form {
  transform: rotateY(-180deg);
}
</style>


================================================
FILE: Forms/Ameth1208_massive-wombat-91.html
================================================
<!-- From Uiverse.io by Ameth1208  - Website: https://tailwindflex.com/@ameth1208/login - Name: Ameth1208 - Tags: login, form, input, sign-up -->
<div class="relative py-3 sm:max-w-xs sm:mx-auto">
  <div
    class="min-h-96 px-8 py-6 mt-4 text-left bg-white dark:bg-gray-900 rounded-xl shadow-lg"
  >
    <div class="flex flex-col justify-center items-center h-full select-none">
      <div class="flex flex-col items-center justify-center gap-2 mb-8">
        <div class="w-8 h-8 bg-gray-700" src=""></div>
        <p class="m-0 text-[16px] font-semibold dark:text-white">
          Login to your Account
        </p>
        <span class="m-0 text-xs max-w-[90%] text-center text-[#8B8E98]"
          >Get started with our app, just start section and enjoy experience.
        </span>
      </div>
      <div class="w-full flex flex-col gap-2">
        <label class="font-semibold text-xs text-gray-400">Username</label>
        <input
          placeholder="Username"
          class="border rounded-lg px-3 py-2 mb-5 text-sm w-full outline-none dark:border-gray-500 dark:bg-gray-900"
        />
      </div>
    </div>
    <div class="w-full flex flex-col gap-2">
      <label class="font-semibold text-xs text-gray-400">Password</label>
      <input
        placeholder="••••••••"
        class="border rounded-lg px-3 py-2 mb-5 text-sm w-full outline-none dark:border-gray-500 dark:bg-gray-900"
        type="password"
      />
    </div>
    <div>
      <button
        class="py-1 px-8 bg-blue-500 hover:bg-blue-800 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg cursor-pointer select-none"
      >
        Login
      </button>
    </div>
  </div>
</div>


    

================================================
FILE: Forms/AnthonyPreite_cowardly-cougar-44.html
================================================

  <div id="form-ui">
    <form action="" method="post" id="form">
      <div id="form-body">
        <div id="welcome-lines">
          <div id="welcome-line-1">Spotify</div>
          <div id="welcome-line-2">Welcome Back, Loyd</div>
        </div>
        <div id="input-area">
          <div class="form-inp">
            <input placeholder="Email Address" type="text">
          </div>
          <div class="form-inp">
            <input placeholder="Password" type="password">
          </div>
        </div>
        <div id="submit-button-cvr">
          <button id="submit-button" type="submit">Login</button>
        </div>
        <div id="forgot-pass">
          <a href="#">Forgot password?</a>
        </div>
        <div id="bar"></div>
      </div>
    </form>
    </div>
  

<style>
/* From Uiverse.io by AnthonyPreite - Tags: green, form, dark, Login, Spotify, duo-ton */
#form {
  display: grid;
  place-items: center;
  width: 300px;
  height: 472px;
  padding: 25px;
  background-color: #161616;
  box-shadow: 0px 15px 60px #00FF7F;
  outline: 1px solid #2b9962;
  border-radius: 10px;
}

#form-body {
  position: absolute;
  top: 50%;
  right: 25px;
  left: 25px;
  width: 230px;
  margin: -156px auto 0 auto;
}

#welcome-lines {
  text-align: center;
  line-height: 1;
}

#welcome-line-1 {
  color: #00FF7F;
  font-weight: 600;
  font-size: 40px;
}

#welcome-line-2 {
  color: #ffffff;
  font-size: 18px;
  margin-top: 17px;
}

#input-area {
  margin-top: 40px;
}

.form-inp {
  padding: 11px 25px;
  background: transparent;
  border: 1px solid #e3e3e3;
  line-height: 1;
  border-radius: 8px;
}

.form-inp:focus {
  border: 1px solid #00FF7F;
}

.form-inp:first-child {
  margin-bottom: 15px;
}

.form-inp input {
  width: 100%;
  background: none;
  font-size: 13.4px;
  color: #00FF7F;
  border: none;
  padding: 0;
  margin: 0;
}

.form-inp input:focus {
  outline: none;
}

#submit-button-cvr {
  margin-top: 20px;
}

#submit-button {
  display: block;
  width: 100%;
  color: #00FF7F;
  background-color: transparent;
  font-weight: 600;
  font-size: 14px;
  margin: 0;
  padding: 14px 13px 12px 13px;
  border: 0;
  outline: 1px solid #00FF7F;
  border-radius: 8px;
  line-height: 1;
  cursor: pointer;
  transition: all ease-in-out .3s;
}

#submit-button:hover {
  transition: all ease-in-out .3s;
  background-color: #00FF7F;
  color: #161616;
  cursor: pointer;
}

#forgot-pass {
  text-align: center;
  margin-top: 10px;
}

#forgot-pass a {
  color: #868686;
  font-size: 12px;
  text-decoration: none;
}

#bar {
  position: absolute;
  left: 50%;
  bottom: -50px;
  width: 28px;
  height: 8px;
  margin-left: -33px;
  background-color: #00FF7F;
  border-radius: 10px;
}

#bar:before,
#bar:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #ececec;
  border-radius: 50%;
}

#bar:before {
  right: -20px;
}

#bar:after {
  right: -38px;
}

    
</style>


================================================
FILE: Forms/Cksunandh_purple-zebra-43.html
================================================
<div class="file-upload-container">
  <div class="file-upload">
    <input multiple="" class="file-input" id="fileInput" type="file" />
    <label class="file-label" for="fileInput">
      <i class="upload-icon">📁</i>
      <p>Drag &amp; Drop your files here or click to upload</p>
    </label>
  </div>
</div>

<style>
/* From Uiverse.io by Cksunandh  - Tags: form */
.file-upload-container {
  width: 50%;
  max-width: 500px;
}

.file-upload {
  position: relative;
  border: 2px dashed #b8bcbf;
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  background-color: rgb(255, 255, 255);
  transition: background-color 0.3s ease-in-out;
}

.file-upload:hover {
  background-color: #e2e6ea;
}

.file-input {
  display: none;
}

.file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.upload-icon {
  font-size: 50px;
  color: #007bff;
  margin-bottom: 10px;
}

.file-upload p {
  margin: 0;
  font-size: 16px;
  color: #6c757d;
}

.file-upload.dragover {
  background-color: #007bff;
  color: white;
}

</style>
    

================================================
FILE: Forms/ClawHack1_fuzzy-lionfish-82.html
================================================
<div class="contact-form">
  <span class="heading">Contact Us</span>
  <form>
    <label for="name">Name:</label>
    <input type="text" required="">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required="">
    <label for="message">Message:</label>
    <textarea id="message" name="message" required=""></textarea>
    <button type="submit">Submit</button>
  </form>
</div>

<style>
/* From Uiverse.io by ClawHack1 - Tags: form */
.contact-form {
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 10px;
}

.contact-form label {
  color: black;
}

.contact-form .heading {
  font-size: 24px;
  color: black;
  ;
  margin-bottom: 12px;
  font-weight: bold;
  display: block;
}

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

.contact-form label {
  margin-bottom: 10px;
}

textarea {
  resize: none;
  height: 80px;
  width: 200px;
}

.contact-form input, .contact-form textarea {
  padding: 10px;
  border: none;
  border-radius: 5px;
  margin-bottom: 20px;
}

.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  box-shadow: 0 0 5px #ff6384;
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}

.contact-form button[type="submit"] {
  background-color: #ff6384;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.contact-form button[type="submit"]:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;
}

</style>


================================================
FILE: Forms/Cybercom682_rare-husky-48.html
================================================
<!-- From Uiverse.io by Cybercom682  - Tags: login, form, modern -->
<form
  class="bg-white dark:bg-zinc-900 shadow-2xl rounded-2xl overflow-hidden border-4 border-blue-400 dark:border-blue-800"
>
  <div class="px-8 py-10 md:px-10">
    <h2
      class="text-4xl font-extrabold text-center text-zinc-800 dark:text-white"
    >
      Welcome Back!
    </h2>
    <p class="text-center text-zinc-600 dark:text-zinc-400 mt-3">
      We missed you, sign in to continue.
    </p>
    <div class="mt-10">
      <div class="relative">
        <label
          class="block mb-3 text-sm font-medium text-zinc-600 dark:text-zinc-200"
          for="email"
          >Email</label
        >
        <input
          placeholder="you@example.com"
          class="block w-full px-4 py-3 mt-2 text-zinc-800 bg-white border-2 rounded-lg dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-opacity-50 focus:outline-none focus:ring focus:ring-blue-400"
          name="email"
          id="email"
          type="email"
        />
      </div>
      <div class="mt-6">
        <label
          class="block mb-3 text-sm font-medium text-zinc-600 dark:text-zinc-200"
          for="password"
          >Password</label
        >
        <input
          placeholder="••••••••"
          class="block w-full px-4 py-3 mt-2 text-zinc-800 bg-white border-2 rounded-lg dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-opacity-50 focus:outline-none focus:ring focus:ring-blue-400"
          name="password"
          id="password"
          type="password"
        />
      </div>
      <div class="mt-10">
        <button
          class="w-full px-4 py-3 tracking-wide text-white transition-colors duration-200 transform bg-gradient-to-r from-blue-600 to-cyan-600 rounded-lg hover:from-blue-700 hover:to-cyan-700 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-800"
          type="submit"
        >
          Let's Go
        </button>
      </div>
    </div>
  </div>
  <div class="px-8 py-4 bg-blue-200 dark:bg-zinc-800">
    <div class="text-sm text-blue-900 dark:text-blue-300 text-center">
      Don't have an account?
      <a class="font-medium underline" href="#">Sign up</a>
    </div>
  </div>
</form>


    

================================================
FILE: Forms/D3OXY_short-panther-37.html
================================================
<form action="" class="form">
    <p>
        Welcome,<span>sign in to continue</span>
    </p>
    <button class="oauthButton">
                    <svg class="icon" viewBox="0 0 24 24">
            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"></path>
            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"></path>
            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"></path>
            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"></path>
            <path d="M1 1h22v22H1z" fill="none"></path>
        </svg>
                    Continue with Google
                </button>
    <button class="oauthButton">
                    <svg class="icon" viewBox="0 0 24 24">
            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
        </svg>
                    Continue with Github
                </button>
    <div class="separator">
        <div></div>
        <span>OR</span>
        <div></div>
    </div>
    <input type="email" placeholder="Email" name="email">
    <button class="oauthButton">
                    Continue
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                </button>
</form>
<style>
/* From Uiverse.io by D3OXY - Source: https://uiverse.io/andrew-demchenk0/little-treefrog-9 - Tags: form, github, google, login form, sign up form, card animation, card hover, 3d card, email card, oauth */
/* DEOXY Was Here */
.form {
  --background: #d3d3d3;
  --input-focus: #2d8cf0;
  --font-color: #323232;
  --font-color-sub: #666;
  --bg-color: #fff;
  --main-color: #323232;
  padding: 20px;
  background: var(--background);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
}

.form > p {
  font-family: var(--font-DelaGothicOne);
  color: var(--font-color);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.form > p > span {
  font-family: var(--font-SpaceMono);
  color: var(--font-color-sub);
  font-weight: 600;
  font-size: 17px;
}

.separator {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.separator > div {
  width: 100px;
  height: 3px;
  border-radius: 5px;
  background-color: var(--font-color-sub);
}

.separator > span {
  color: var(--font-color);
  font-family: var(--font-SpaceMono);
  font-weight: 600;
}

.oauthButton {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
    /* margin: 50px auto 0 auto; */
  padding: auto 15px 15px auto;
  width: 250px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 16px;
  font-weight: 600;
  color: var(--font-color);
  cursor: pointer;
  transition: all 250ms;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.oauthButton::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: #212121;
  z-index: -1;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
  transition: all 250ms;
}

.oauthButton:hover {
  color: #e8e8e8;
}

.oauthButton:hover::before {
  width: 100%;
}

.form > input {
  width: 250px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 15px;
  font-weight: 600;
  color: var(--font-color);
  padding: 5px 10px;
  outline: none;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
}

</style>


================================================
FILE: Forms/DavidTM96_empty-skunk-88.html
================================================
<div class="form-card1">
  <div class="form-card2">
    <form class="form">
      <p class="form-heading">Get In Touch</p>

      <div class="form-field">
        <input required="" placeholder="Name" class="input-field" type="text" />
      </div>

      <div class="form-field">
        <input
          required=""
          placeholder="Email"
          class="input-field"
          type="email"
        />
      </div>

      <div class="form-field">
        <input
          required=""
          placeholder="Subject"
          class="input-field"
          type="text"
        />
      </div>

      <div class="form-field">
        <textarea
          required=""
          placeholder="Message"
          cols="30"
          rows="3"
          class="input-field"
        ></textarea>
      </div>

      <button class="sendMessage-btn">Send Message</button>
    </form>
  </div>
</div>

<style>
/* From Uiverse.io by DavidTM96  - Website: https://uiverse.io/Phelix652/selfish-pug-28 - Name: Phelix652 - Tags: material design, form, contact-form, contactform */
.form {
  display: flex;
  flex-direction: column;
  align-self: center;
  font-family: inherit;
  gap: 10px;
  padding-inline: 2em;
  padding-bottom: 0.4em;
  background-color: #171717;
  //background-color: #0a192f;
  border-radius: 20px;
}

.form-heading {
  text-align: center;
  margin: 2em;
  color: #64ffda;
  font-size: 1.2em;
  background-color: transparent;
  align-self: center;
}

.form-field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border-radius: 10px;
  padding: 0.6em;
  border: none;
  outline: none;
  color: white;
  background-color: #171717;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
}

.input-field {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  color: #ccd6f6;
  padding-inline: 1em;
}

.sendMessage-btn {
  cursor: pointer;
  margin-bottom: 3em;
  padding: 1em;
  border-radius: 10px;
  border: none;
  outline: none;
  background-color: transparent;
  color: #64ffda;
  font-weight: bold;
  outline: 1px solid #64ffda;
  transition: all ease-in-out 0.3s;
}

.sendMessage-btn:hover {
  transition: all ease-in-out 0.3s;
  background-color: #64ffda;
  color: #000;
  cursor: pointer;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
}

.form-card1 {
  background-image: linear-gradient(163deg, #64ffda 0%, #64ffda 100%);
  border-radius: 22px;
  transition: all 0.3s;
}

.form-card1:hover {
  box-shadow: 0px 0px 30px 1px rgba(100, 255, 218, 0.3);
}

.form-card2 {
  border-radius: 0;
  transition: all 0.2s;
}

.form-card2:hover {
  transform: scale(0.98);
  border-radius: 20px;
}

</style>
    

================================================
FILE: Forms/FahadArnob52539_bitter-goose-93.html
================================================
<div class="login">
  <div class="hader">
    <span>Join us today!</span>
    <p>Sing up now to become a member.</p>
  </div>
  <form action="#">
    <input type="text" placeholder="Enter Name" required="" />
    <input type="email" placeholder="Enter Emaill" required="" />
    <input type="password" placeholder="Choose A Password" required="" />
    <input type="password" placeholder="Re-Enter Password" required="" />
    <input type="button" value="Signup" />
    <span> Already a member? <a href="#">Login Here</a></span>
  </form>
</div>

<style>
/* From Uiverse.io by FahadArnob52539  - Tags: form, html, css */
.login {
  max-width: 280px;
  background-color: #ffffff;
  border-radius: 5px;
}
.hader {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}
.hader p {
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #706b6b;
}
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}
form input {
  height: 40px;
  outline: none;
  border: 1px solid #cccccc;
  padding: 10px;
  font-size: 15px;
  border-radius: 8px;
}
form input[type="button"] {
  background-color: rgba(17, 17, 226, 0.562);
  color: #ffffff;
  font-size: 17px;
}
form span {
  text-align: center;
  font-size: 16px;
  padding-top: 10px;
  color: #706b6b;
}
form span a {
  text-decoration: none;
  color: rgba(36, 36, 207, 0.671);
  font-weight: 500;
}

</style>
    

================================================
FILE: Forms/Galahhad_proud-fox-45.html
================================================
<div class="form-container" tabindex="0">
  <div class="form-container__block">
    <div class="form-container__header">
      <p>Sign in with existing account</p>
      <form class="form-container__form">
        <input placeholder="Email address or Username" type="email">
        <input placeholder="Password" type="password">
        <div class="form-container__register-buttons">
          <button class="form-container__sign">Sign In</button>
          <a class="form-container__sign forgot" href="#">Forgot password?</a>
        </div>
      </form>
    </div>
    <div class="form-container__footer">
      <p class="top-line">Or sign in with:</p>
      <div class="form-container__sign-app-buttons">
        <button class="google"><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="512" width="512" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path data-original="#167ee6" fill="#167ee6" d="m492.668 211.489-208.84-.01c-9.222 0-16.697 7.474-16.697 16.696v66.715c0 9.22 7.475 16.696 16.696 16.696h117.606c-12.878 33.421-36.914 61.41-67.58 79.194L384 477.589c80.442-46.523 128-128.152 128-219.53 0-13.011-.959-22.312-2.877-32.785-1.458-7.957-8.366-13.785-16.455-13.785z"></path>
              <path data-original="#12b347" fill="#12b347" d="M256 411.826c-57.554 0-107.798-31.446-134.783-77.979l-86.806 50.034C78.586 460.443 161.34 512 256 512c46.437 0 90.254-12.503 128-34.292v-.119l-50.147-86.81c-22.938 13.304-49.482 21.047-77.853 21.047z"></path>
              <path data-original="#0f993e" fill="#0f993e" d="M384 477.708v-.119l-50.147-86.81c-22.938 13.303-49.48 21.047-77.853 21.047V512c46.437 0 90.256-12.503 128-34.292z"></path>
              <path class="" data-original="#ffd500" fill="#ffd500" d="M100.174 256c0-28.369 7.742-54.91 21.043-77.847l-86.806-50.034C12.502 165.746 0 209.444 0 256s12.502 90.254 34.411 127.881l86.806-50.034c-13.301-22.937-21.043-49.478-21.043-77.847z"></path>
              <path class="" data-original="#ff4b26" fill="#ff4b26" d="M256 100.174c37.531 0 72.005 13.336 98.932 35.519 6.643 5.472 16.298 5.077 22.383-1.008l47.27-47.27c6.904-6.904 6.412-18.205-.963-24.603C378.507 23.673 319.807 0 256 0 161.34 0 78.586 51.557 34.411 128.119l86.806 50.034c26.985-46.533 77.229-77.979 134.783-77.979z"></path>
              <path data-original="#d93f21" fill="#d93f21" d="M354.932 135.693c6.643 5.472 16.299 5.077 22.383-1.008l47.27-47.27c6.903-6.904 6.411-18.205-.963-24.603C378.507 23.672 319.807 0 256 0v100.174c37.53 0 72.005 13.336 98.932 35.519z"></path>
            </g>
          </svg><span>Google</span></button>
        <button><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 24 24" y="0" x="0" height="512" width="512" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path class="" data-original="#000000" fill="#000000" d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z"></path>
            </g>
          </svg></button>
        <button><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="512" width="512" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path data-original="#ffa100" fill="#ffa100" d="M29.653 201.648.957 289.816c-2.599 8.006.208 16.843 7.07 21.834l247.972 180.183-79.366-155.859-146.98-134.326zM482.347 201.648l28.696 88.168c2.599 8.006-.208 16.843-7.07 21.834L256.001 491.832l87.212-184.854 139.134-105.33z"></path>
              <path class="" data-original="#ff6d18" fill="#ff6d18" d="m256 491.832-.001-178.6-94.302-111.585-65.97-32.822-66.074 32.822L256 491.832zM256 491.832l.001-189.402 94.302-100.783 71.367-32.822 60.677 32.822L256 491.832z"></path>
              <path class="" data-original="#fc3819" fill="#fc3819" d="m256 491.832 94.302-290.185H161.698L256 491.832z"></path>
              <path class="" data-original="#fc3819" fill="#fc3819" d="M29.654 201.65h132.148L104.929 26.874c-2.911-8.942-15.596-8.942-18.611 0L29.654 201.65zM482.346 201.65H350.198l56.769-174.776c2.911-8.942 15.596-8.942 18.611 0l56.768 174.776z"></path>
            </g>
          </svg></button>
        <button><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="512" width="512" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path class="" data-original="#2684ff" fill="#2684ff" d="M16.436 25.814c-10.23 0-17.903 9.378-16.198 18.756l69.056 422.86c1.705 11.085 11.083 18.756 22.166 18.756h334.196c7.674 0 14.494-5.967 16.198-13.641l69.907-427.123c1.707-10.231-5.967-18.756-16.196-18.756l-479.129-.852zm293.275 305.21H203.143l-28.134-150.899H336.14l-26.429 150.899z"></path>
              <linearGradient gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 -1 0 2434)" y2="2012.875" y1="2211.385" x2="270.312" x1="524.616" id="a">
                <stop style="stop-color:#0052CC" offset=".176"></stop>
                <stop style="stop-color:#2684FF" offset="1"></stop>
              </linearGradient>
              <path fill="" style="fill:url(#a);" d="M488.743 180.125H335.286L309.71 331.024H203.14L77.818 480.219s5.968 5.116 14.493 5.116h334.196c7.674 0 14.494-5.969 16.198-13.643l46.038-291.567z"></path>
            </g>
          </svg></button>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Galahhad - Tags: form */
.form-container__sign-app-buttons svg {
  width: 22px;
  height: auto;
}

.google svg {
  width: 18px;
  height: auto;
}

.form-container {
  min-width: 350px;
  box-sizing: border-box;
  font-family: sans-serif;
  color: #4b4b4b;
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
}

.form-container:focus-within:not(:focus) {
  box-shadow: 0 0 6px 3px #caedff;
  -webkit-box-shadow: 0 0 6px 3px #caedff;
  outline: 1px solid #97dbff;
}

.form-container p {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 14px;
}

.top-line {
  padding-top: 12px;
}

.form-container__form {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

.form-container__form input {
  height: 31px;
  border: 1px solid #d9d9d9;
  padding: 4px;
  font-size: 14px;
  line-height: 1.65;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-container__form input:focus {
  border-color: #00a6fd;
  outline: 0;
  box-shadow: none;
}

.form-container__register-buttons {
  display: flex;
  column-gap: 10px;
}

.form-container__sign {
  padding: 8px 20px;
  font-size: 14px;
  line-height: 1.65;
  border-radius: 20px;
  width: 110px;
  white-space: nowrap;
  background-color: #00a6fd;
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.form-container__sign:first-child:active,
.form-container__sign:first-child:hover {
  background-color: #0099e9;
}

.form-container__sign:focus {
  outline-offset: -2px;
  outline: none;
  -webkit-box-shadow: inset 0 0 3px 1px #97dbff;
  box-shadow: inset 0 0 3px 1px #97dbff;
}

.forgot {
  width: auto;
  padding: 8px 0;
  background: none;
  font-weight: 400;
  color: #428bca;
  text-decoration: none;
}

.forgot:hover {
  text-decoration: underline;
  color: #4c9dd0;
}

.form-container__header {
  padding-bottom: 16px;
}

.form-container__footer {
  padding-top: 12px;
  border-top: 1px solid #cacaca;
}

.form-container__sign-app-buttons {
  display: flex;
  column-gap: 24px;
}

.form-container__sign-app-buttons button:not(:first-child) {
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-container__sign-app-buttons button:not(:first-child)::before {
  position: absolute;
  content: '';
  width: 120%;
  height: 2px;
  background: rgb(187, 187, 187);
  bottom: 0;
  opacity: 0;
}

.form-container__sign-app-buttons button:not(:first-child):hover::before {
  opacity: 1;
  transition: 1s;
}

.form-container__sign-app-buttons button:not(:first-child):focus::before {
  opacity: 1;
  background-color: #4b4b4b;
}

.form-container__sign-app-buttons button:first-child {
  justify-content: center;
  min-width: 110px;
  height: 40px;
  border: none;
  background: white;
  border-radius: 2px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px #b7b7b7;
  display: flex;
  align-items: center;
  color: #4b4b4b;
  font-size: 13px;
  column-gap: 15px;
  cursor: pointer;
}

.form-container__sign-app-buttons button:first-child:active {
  background: #eeeeee;
}

.form-container__sign-app-buttons button:first-child:focus:not(:active) {
  outline: none;
  -webkit-box-shadow: inset 0 0 3px 1px #97dbff;
  box-shadow: inset 0 0 3px 1px #97dbff;
}
</style>


================================================
FILE: Forms/Galahhad_unlucky-rat-64.html
================================================
<div class="container">
    <div class="content">
      <i style="background-image: url(&quot;https://static.cdninstagram.com/rsrc.php/v3/yS/r/ajlEU-wEDyo.png&quot;); background-position: 0px -52px; background-size: auto; width: 175px; height: 51px; background-repeat: no-repeat; display: inline-block;" role="img" class="" aria-label="Instagram" data-visualcompletion="css-img"></i>
      <form class="content__form">
        <div class="content__inputs">
          <label>
            <input required="" type="text">
            <span>Phone number, username, or email</span>
          </label>
          <label>
            <input required="" type="password">
            <span>Password</span>
          </label>
        </div>
        <button>Log In</button>
      </form>
      <div class="content__or-text">
        <span></span>
        <span>OR</span>
        <span></span>
      </div>
      <div class="content__forgot-buttons">
        <button>
          <span>
            <svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 408.788 408.788" y="0" x="0" height="512" width="512" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <g>
                <path class="" data-original="#475993" fill="#475993" d="M353.701 0H55.087C24.665 0 .002 24.662.002 55.085v298.616c0 30.423 24.662 55.085 55.085 55.085h147.275l.251-146.078h-37.951a8.954 8.954 0 0 1-8.954-8.92l-.182-47.087a8.955 8.955 0 0 1 8.955-8.989h37.882v-45.498c0-52.8 32.247-81.55 79.348-81.55h38.65a8.955 8.955 0 0 1 8.955 8.955v39.704a8.955 8.955 0 0 1-8.95 8.955l-23.719.011c-25.615 0-30.575 12.172-30.575 30.035v39.389h56.285c5.363 0 9.524 4.683 8.892 10.009l-5.581 47.087a8.955 8.955 0 0 1-8.892 7.901h-50.453l-.251 146.078h87.631c30.422 0 55.084-24.662 55.084-55.084V55.085C408.786 24.662 384.124 0 353.701 0z"></path>
              </g>
            </svg>
          </span>
          <span>Log in with Facebook</span>
        </button>
        <button>Forgot password?</button>
      </div>
    </div>
  </div>
<style>
/* From Uiverse.io by Galahhad - Tags: form */
.content i {
  margin-bottom: 41px;
}

.container {
  border-radius: 1px;
  padding: 50px 40px 20px 40px;
  box-sizing: border-box;
  font-family: sans-serif;
  color: #737373;
  border: 1px solid rgb(219, 219, 219);
  text-align: center;
  background: white;
}

.container svg {
  width: 16px;
  height: auto;
}

.content__form {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
}

.content__inputs {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}

.content__form label {
  border: 1px solid rgb(219, 219, 219);
  display: flex;
  align-items: center;
  position: relative;
  min-width: 268px;
  height: 38px;
  background: rgb(250, 250, 250);
  border-radius: 3px;
}

.content__form span {
  position: absolute;
  text-overflow: ellipsis;
  transform-origin: left;
  font-size: 12px;
  left: 8px;
  pointer-events: none;
  transition: transform ease-out .1s
}

.content__form input {
  width: 100%;
  background: inherit;
  border: 0;
  outline: none;
  padding: 9px 8px 7px 8px;
  text-overflow: ellipsis;
  font-size: 16px;
  vertical-align: middle;
}

.content__form input:valid+span {
  transform: scale(calc(10 / 12)) translateY(-10px);
}

.content__form input:valid {
  padding: 14px 0 2px 8px;
  font-size: 12px;
}

.content__or-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  font-size: 13px;
  column-gap: 18px;
  margin-top: 18px;
}

.content__or-text span:nth-child(3),
.content__or-text span:nth-child(1) {
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgb(219, 219, 219);
}

.content__forgot-buttons {
  display: flex;
  flex-direction: column;
  margin-top: 28px;
  row-gap: 21px;
}

.content__forgot-buttons button {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: #00376b;
}

.content__forgot-buttons button:first-child {
  color: #385185;
  font-size: 14px;
  font-weight: 600;
}

.content__form button {
  background: rgb(0, 149, 246);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  padding: 7px 16px;
  cursor: pointer;
}

.content__form button:hover {
  background: rgb(24, 119, 242);
}

.content__form button:active:not(:hover) {
  background: rgb(0, 149, 246);
  opacity: .7;
}
</style>


================================================
FILE: Forms/Harsha2lucky_dangerous-mouse-44.html
================================================
     <div class="content">
         <div class="text">
            Login
         </div>
         <form action="#">
            <div class="field">
               <input required="" type="text" class="input">
               <span class="span"><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="20" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg"><g><path class="" data-original="#000000" fill="#595959" d="M256 0c-74.439 0-135 60.561-135 135s60.561 135 135 135 135-60.561 135-135S330.439 0 256 0zM423.966 358.195C387.006 320.667 338.009 300 286 300h-60c-52.008 0-101.006 20.667-137.966 58.195C51.255 395.539 31 444.833 31 497c0 8.284 6.716 15 15 15h420c8.284 0 15-6.716 15-15 0-52.167-20.255-101.461-57.034-138.805z"></path></g></svg></span>
               <label class="label">Email or Phone</label>
            </div>
            <div class="field">
               <input required="" type="password" class="input">
               <span class="span"><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="20" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg"><g><path class="" data-original="#000000" fill="#595959" d="M336 192h-16v-64C320 57.406 262.594 0 192 0S64 57.406 64 128v64H48c-26.453 0-48 21.523-48 48v224c0 26.477 21.547 48 48 48h288c26.453 0 48-21.523 48-48V240c0-26.477-21.547-48-48-48zm-229.332-64c0-47.063 38.27-85.332 85.332-85.332s85.332 38.27 85.332 85.332v64H106.668zm0 0"></path></g></svg></span>
               <label class="label">Password</label>
            </div>
            <div class="forgot-pass">
               <a href="#">Forgot Password?</a>
            </div>
            <button class="button">Sign in</button>
            <div class="sign-up">
               Not a member?
               <a href="#">signup now</a>
            </div>
         </form>
      </div>
<style>
/* From Uiverse.io by Harsha2lucky - Tags: flat design, neumorphism, sign-in, form, sign-up, light&dark */
.content {
  width: 330px;
  padding: 40px 30px;
  background: #dde1e7;
  border-radius: 10px;
  box-shadow: -3px -3px 7px #ffffff73,
               2px 2px 5px rgba(94,104,121,0.288);
}

.content .text {
  font-size: 33px;
  font-weight: 600;
  margin-bottom: 35px;
  color: #595959;
}

.field {
  height: 50px;
  width: 100%;
  display: flex;
  position: relative;
}

.field:nth-child(2) {
  margin-top: 20px;
}

.field .input {
  height: 100%;
  width: 100%;
  padding-left: 45px;
  outline: none;
  border: none;
  font-size: 18px;
  background: #dde1e7;
  color: #595959;
  border-radius: 25px;
  box-shadow: inset 2px 2px 5px #BABECC,
              inset -5px -5px 10px #ffffff73;
}

.field .input:focus {
  box-shadow: inset 1px 1px 2px #BABECC,
              inset -1px -1px 2px #ffffff73;
}

.field .span {
  position: absolute;
  color: #595959;
  width: 50px;
  line-height: 55px;
}

.field .label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 45px;
  pointer-events: none;
  color: #666666;
}

.field .input:valid ~ label {
  opacity: 0;
}

.forgot-pass {
  text-align: left;
  margin: 10px 0 10px 5px;
}

.forgot-pass a {
  font-size: 16px;
  color: #666666;
  text-decoration: none;
}

.forgot-pass:hover a {
  text-decoration: underline;
}

.button {
  margin: 15px 0;
  width: 100%;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  font-weight: 600;
  background: #dde1e7;
  border-radius: 25px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #595959;
  box-shadow: 2px 2px 5px #BABECC,
             -5px -5px 10px #ffffff73;
}

.button:focus {
  color: #3498db;
  box-shadow: inset 2px 2px 5px #BABECC,
             inset -5px -5px 10px #ffffff73;
}

.sign-up {
  margin: 10px 0;
  color: #595959;
  font-size: 16px;
}

.sign-up a {
  color: #3498db;
  text-decoration: none;
}

.sign-up a:hover {
  text-decoration: underline;
}
</style>


================================================
FILE: Forms/HoseinParvaresh_selfish-newt-61.html
================================================
<div class="container">
  <form class="form" action="">
    <p class="title">Login Form</p>
    <input placeholder="Username" class="username input" type="text" />
    <input placeholder="Password" class="password input" type="password" />
    <button class="btn" type="submit">Login</button>
  </form>
</div>

<style>
/* From Uiverse.io by HoseinParvaresh  - Tags: form, login , login form, dark, rounded, input, button, orange, gradient, minimalistic, password, form, username, centered, login */
::selection {
  background-color: gray;
}

.container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form {
  width: 400px;
  height: 400px;
  background-image: linear-gradient(to bottom, #424242, #212121);
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 0.5rem;
}

.title {
  color: wheat;
  margin: 3rem 0;
  font-size: 2rem;
}

.input {
  margin: 0.5rem 0;
  padding: 1rem 0.5rem;
  width: 20rem;
  background-color: inherit;
  color: wheat;
  border: none;
  outline: none;
  border-bottom: 1px solid wheat;
  transition: all 400ms;
}
.input:hover {
  background-color: #424242;
  border: none;
  border-radius: 0.5rem;
}
.btn {
  height: 3rem;
  width: 20rem;
  margin-top: 3rem;
  background-color: wheat;
  border-radius: 0.5rem;
  border: none;
  font-size: 1.2rem;
  transition: all 400ms;
  cursor: pointer;
  box-shadow:
    0 0 10px antiquewhite,
    0 0 10px antiquewhite;
}
.btn:hover {
  background-color: antiquewhite;
  box-shadow: none;
}

</style>
    

================================================
FILE: Forms/Itskrish01_purple-stingray-37.html
================================================
<!-- From Uiverse.io by Itskrish01  - Tags: form, payment -->
<div class="border border-zinc-800 p-8 rounded-xl w-[600px]">
  <div>
    <h3 class="text-white font-semibold text-[1.17rem]">Payment Method</h3>
    <p class="text-[#a1a1aa]">Add a new payment method to your account.</p>
  </div>
  <ul class="grid w-full gap-6 grid-cols-3 mt-6">
    <li>
      <input
        required=""
        class="hidden peer"
        value="card"
        name="pay"
        id="card"
        type="radio"
      />
      <label
        class="inline-flex items-center justify-center w-full px-14 py-5 text-gray-500 bg-transparent border-2 border-zinc-800 rounded-lg cursor-pointer peer-checked:border-white hover:bg-zinc-800"
        for="card"
      >
        <div class="flex flex-col items-center gap-2">
          <svg
            width="40px"
            height="40px"
            viewBox="0 0 24 24"
            fill="#fff"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 9H21M6.2 19H17.8C18.9201 19 19.4802 19 19.908 18.782C20.2843 18.5903 20.5903 18.2843 20.782 17.908C21 17.4802 21 16.9201 21 15.8V8.2C21 7.0799 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V15.8C3 16.9201 3 17.4802 3.21799 17.908C3.40973 18.2843 3.71569 18.5903 4.09202 18.782C4.51984 19 5.07989 19 6.2 19Z"
              stroke="#000000"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></path>
          </svg>

          <div class="w-full text-lg font-semibold text-white">Card</div>
        </div>
      </label>
    </li>
    <li>
      <input
        required=""
        class="hidden peer"
        value="apple"
        name="pay"
        id="apple"
        type="radio"
      />
      <label
        class="inline-flex items-center justify-center w-full px-14 py-5 text-gray-500 bg-transparent border-2 border-zinc-800 rounded-lg cursor-pointer peer-checked:border-white hover:bg-zinc-800"
        for="apple"
      >
        <div class="flex flex-col items-center gap-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            height="40px"
            width="40px"
            fill="#fff"
          >
            <path
              d="M19.665 16.811a10.316 10.316 0 0 1-1.021 1.837c-.537.767-.978 1.297-1.316 1.592-.525.482-1.089.73-1.692.744-.432 0-.954-.123-1.562-.373-.61-.249-1.17-.371-1.683-.371-.537 0-1.113.122-1.73.371-.616.25-1.114.381-1.495.393-.577.025-1.154-.229-1.729-.764-.367-.32-.826-.87-1.377-1.648-.59-.829-1.075-1.794-1.455-2.891-.407-1.187-.611-2.335-.611-3.447 0-1.273.275-2.372.826-3.292a4.857 4.857 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662c.46 0 1.063.142 1.81.422s1.227.422 1.436.422c.158 0 .689-.167 1.593-.498.853-.307 1.573-.434 2.163-.384 1.6.129 2.801.759 3.6 1.895-1.43.867-2.137 2.08-2.123 3.637.012 1.213.453 2.222 1.317 3.023a4.33 4.33 0 0 0 1.315.863c-.106.307-.218.6-.336.882zM15.998 2.38c0 .95-.348 1.838-1.039 2.659-.836.976-1.846 1.541-2.941 1.452a2.955 2.955 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688.352-.404.8-.741 1.343-1.009.542-.264 1.054-.41 1.536-.435.013.128.019.255.019.381z"
            ></path>
          </svg>

          <div class="w-full text-lg font-semibold text-white">Apple</div>
        </div>
      </label>
    </li>
    <li>
      <input
        required=""
        class="hidden peer"
        value="google"
        name="pay"
        id="google"
        type="radio"
      />
      <label
        class="inline-flex items-center justify-center w-full px-14 py-5 text-gray-500 bg-transparent border-2 border-zinc-800 rounded-lg cursor-pointer peer-checked:border-white hover:bg-zinc-800"
        for="google"
      >
        <div class="flex flex-col items-center gap-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            height="40px"
            width="40px"
            fill="#fff"
          >
            <path
              d="M21.35 11.1H12.18V13.83H18.69C18.36 17.64 15.19 19.27 12.19 19.27C8.36003 19.27 5.00003 16.25 5.00003 12C5.00003 7.9 8.20003 4.73 12.2 4.73C15.29 4.73 17.1 6.7 17.1 6.7L19 4.72C19 4.72 16.56 2 12.1 2C6.42003 2 2.03003 6.8 2.03003 12C2.03003 17.05 6.16003 22 12.25 22C17.6 22 21.5 18.33 21.5 12.91C21.5 11.76 21.35 11.1 21.35 11.1Z"
            ></path>
          </svg>

          <div class="w-full text-lg font-semibold text-white">Google</div>
        </div>
      </label>
    </li>
  </ul>
  <div class="mt-6 space-y-4">
    <div class="flex flex-col gap-1">
      <label class="text-white text-lg font-semibold">Name</label>
      <input
        placeholder="John Doe"
        class="rounded-lg bg-transparent border border-zinc-800 py-2 text-white px-4"
      />
    </div>
    <div class="flex flex-col gap-1">
      <label class="text-white text-lg font-semibold">Name</label>
      <input
        placeholder="Card No."
        class="rounded-lg bg-transparent border border-zinc-800 py-2 text-white px-4"
      />
    </div>
  </div>
  <div class="flex gap-4 mt-5">
    <div class="flex flex-col gap-1">
      <label class="text-white text-lg font-semibold">Expires</label>
      <input
        placeholder="Month"
        class="text-white flex w-full rounded-md border border-zinc-800 bg-transparent px-4 py-2"
      />
    </div>
    <div class="flex flex-col gap-1">
      <label class="text-white text-lg font-semibold">Year</label>
      <input
        placeholder="Year"
        class="text-white flex w-full rounded-md border border-zinc-800 bg-transparent px-4 py-2"
      />
    </div>
    <div class="flex flex-col gap-1">
      <label class="text-white text-lg font-semibold">CVV</label>
      <input
        placeholder="CVV"
        class="text-white flex w-full rounded-md border border-zinc-800 bg-transparent px-4 py-2"
      />
    </div>
  </div>
  <button class="mt-6 bg-white w-full py-1.5 rounded-lg text-lg font-semibold">
    Continue
  </button>
</div>


    

================================================
FILE: Forms/Javierrocadev_chatty-ladybug-95.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: blue, form, login form, tailwind -->
<div id="login" class="w-64 h-80 bg-indigo-50 rounded shadow flex flex-col justify-between p-3">       
    <form class="text-indigo-500" action="" method="post">
        <fieldset class="border-4 border-dotted border-indigo-500 p-5">
            <legend class="px-2 italic -mx-2">Welcome again!</legend>
             <label class="text-xs font-bold after:content-['*'] after:text-red-400" for="email">Mail </label>     
            <input class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-indigo-500" type="email" required="">   
            <label class="text-xs font-bold after:content-['*'] after:text-red-400" for="password">Password  </label>
            <input class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-indigo-500" type="password" required="">
            <a href="#" class="block text-right text-xs text-indigo-500 text-right mb-4">Forgot Password?</a>
            <button class="w-full rounded bg-indigo-500 text-indigo-50 p-2 text-center font-bold hover:bg-indigo-400">Log In</button>
        </fieldset>
         </form>
</div>



================================================
FILE: Forms/Javierrocadev_fresh-moth-39.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: simple, blue, facebook, form, input, input effect , tailwind -->
<div id="login" class="w-64 h-80 bg-sky-50 rounded shadow flex flex-col justify-between p-3">  
    <a href="#" class="border border-sky-500 bg-sky-50 hover:bg-sky-100 rounded text-sky-500 p-2 font-bold flex flex-row gap-3 justify-center">
        <span>Log in with</span>
        <svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="w-6 h-6 fill-current">
            <path d="M100,10.71V89.29A10.73,10.73,0,0,1,89.29,100H69.81V64.85H81.46L83.68,50.3H69.85V40.85c0-4,1.94-7.85,8.15-7.85h6.27V20.65a76.54,76.54,0,0,0-11.2-1c-11.42,0-18.88,7-18.88,19.57V50.3H41.49V64.85h12.7V100H10.71A10.73,10.73,0,0,1,0,89.29V10.71A10.73,10.73,0,0,1,10.71,0H89.29A10.73,10.73,0,0,1,100,10.71Z" class="">
            </path>
        </svg>    
    </a>   
    <span class="text-center text-sm font-bold  text-sky-500 opacity-50">or</span>        
    <form class="text-sky-500" action="" method="post">
        <label class="text-xs font-bold after:content-['*']" for="email">Mail </label>     
        <input class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-sky-500" type="email" required="">   
        <label class="text-xs font-bold after:content-['*']" for="password">Password  </label>
        <input class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-sky-500" type="password" required="">
        <a href="#" class="block text-right text-xs text-sky-500 text-right mb-4">Forgot Password?</a>
        <button class="w-full rounded bg-sky-500 text-sky-50 p-2 text-center font-bold hover:bg-sky-400">Log In</button>
    </form>
</div>



================================================
FILE: Forms/Javierrocadev_quick-horse-31.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: newsletter, form, light, blur filter, violet, rose -->
<form class="text-neutral-800 relative overflow-hidden flex flex-col justify-around w-96 h-44 border border-neutral-500 rounded-lg bg-neutral-50 p-3 px-6">
    <div class="before:absolute before:w-32 before:h-20 before:right-2 before:bg-rose-300 before:-z-10 before:rounded-full before:blur-xl before:-top-12   z-10 after:absolute after:w-24 after:h-24 after:bg-purple-300 after:-z-10 after:rounded-full after:blur after:-top-12 after:-right-6">
        <span class="font-extrabold text-2xl text-violet-600">Get more updates...</span>
        <p class="text-neutral-700">Sign up for our newsletter and you'll be the first to find out about new features</p>
    </div>
    <div class="flex gap-1">
        <div class="relative rounded-lg w-64 overflow-hidden  before:absolute before:w-12 before:h-12 before:content[''] before:right-0 before:bg-violet-500 before:rounded-full before:blur-lg  after:absolute after:z-10 after:w-20 after:h-20 after:content['']  after:bg-rose-300 after:right-12 after:top-3 after:rounded-full after:blur-lg">
        <input placeholder="Mail..." class="relative bg-transparent ring-0 outline-none border border-neutral-500 text-neutral-900 placeholder-violet-700 text-sm rounded-lg focus:ring-violet-500 placeholder-opacity-60 focus:border-violet-500 block w-full p-2.5 checked:bg-emerald-500" type="text">
        </div>
        <button class="bg-violet-500 text-neutral-50 p-2 rounded-lg hover:bg-violet-400">Subscribe</button>
    </div>
</form>



================================================
FILE: Forms/Javierrocadev_shy-elephant-25.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: simple, form, input, light, blur filter, light&dark, hover button, tailwind -->
<div
  class="max-w-md mx-auto relative overflow-hidden z-10 bg-white p-8 rounded-lg shadow-md before:w-24 before:h-24 before:absolute before:bg-purple-500 before:rounded-full before:-z-10 before:blur-2xl after:w-32 after:h-32 after:absolute after:bg-sky-400 after:rounded-full after:-z-10 after:blur-xl after:top-24 after:-right-12"
>
  <h2 class="text-2xl text-sky-900 font-bold mb-6">Update Your Profile</h2>

  <form method="post" action="#">
    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-600" for="name"
        >Full Name</label
      >
      <input class="mt-1 p-2 w-full border rounded-md" type="text" />
    </div>

    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-600" for="email"
        >Email Address</label
      >
      <input
        class="mt-1 p-2 w-full border rounded-md"
        name="email"
        id="email"
        type="email"
      />
    </div>

    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-600" for="bio"
        >Bio</label
      >
      <textarea
        class="mt-1 p-2 w-full border rounded-md"
        rows="3"
        name="bio"
        id="bio"
      ></textarea>
    </div>

    <div class="flex justify-end">
      <button
        class="[background:linear-gradient(144deg,#af40ff,#5b42f3_50%,#00ddeb)] text-white px-4 py-2 font-bold rounded-md hover:opacity-80"
        type="submit"
      >
        Update Profile
      </button>
    </div>
  </form>
</div>


    

================================================
FILE: Forms/Jerome-W-90_shy-jellyfish-2.html
================================================
<div class="modal">
  <div class="modal-header">
    <div class="modal-logo">
      <span class="logo-circle">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="25"
          height="25"
          viewBox="0 0 512 419.116"
        >
          <defs>
            <clipPath id="clip-folder-new">
              <rect width="512" height="419.116"></rect>
            </clipPath>
          </defs>
          <g id="folder-new" clip-path="url(#clip-folder-new)">
            <path
              id="Union_1"
              data-name="Union 1"
              d="M16.991,419.116A16.989,16.989,0,0,1,0,402.125V16.991A16.989,16.989,0,0,1,16.991,0H146.124a17,17,0,0,1,10.342,3.513L227.217,57.77H437.805A16.989,16.989,0,0,1,454.8,74.761v53.244h40.213A16.992,16.992,0,0,1,511.6,148.657L454.966,405.222a17,17,0,0,1-16.6,13.332H410.053v.562ZM63.06,384.573H424.722L473.86,161.988H112.2Z"
              fill="var(--c-action-primary)"
              stroke=""
              stroke-width="1"
            ></path>
          </g>
        </svg>
      </span>
    </div>
    <button class="btn-close">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path fill="none" d="M0 0h24v24H0V0z"></path>
        <path
          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
          fill="var(--c-text-secondary)"
        ></path>
      </svg>
    </button>
  </div>
  <div class="modal-body">
    <p class="modal-title">Upload a file</p>
    <p class="modal-description">Attach the file below</p>
    <button class="upload-area">
      <span class="upload-area-icon">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="35"
          height="35"
          viewBox="0 0 340.531 419.116"
        >
          <g id="files-new" clip-path="url(#clip-files-new)">
            <path
              id="Union_2"
              data-name="Union 2"
              d="M-2904.708-8.885A39.292,39.292,0,0,1-2944-48.177V-388.708A39.292,39.292,0,0,1-2904.708-428h209.558a13.1,13.1,0,0,1,9.3,3.8l78.584,78.584a13.1,13.1,0,0,1,3.8,9.3V-48.177a39.292,39.292,0,0,1-39.292,39.292Zm-13.1-379.823V-48.177a13.1,13.1,0,0,0,13.1,13.1h261.947a13.1,13.1,0,0,0,13.1-13.1V-323.221h-52.39a26.2,26.2,0,0,1-26.194-26.195v-52.39h-196.46A13.1,13.1,0,0,0-2917.805-388.708Zm146.5,241.621a14.269,14.269,0,0,1-7.883-12.758v-19.113h-68.841c-7.869,0-7.87-47.619,0-47.619h68.842v-18.8a14.271,14.271,0,0,1,7.882-12.758,14.239,14.239,0,0,1,14.925,1.354l57.019,42.764c.242.185.328.485.555.671a13.9,13.9,0,0,1,2.751,3.292,14.57,14.57,0,0,1,.984,1.454,14.114,14.114,0,0,1,1.411,5.987,14.006,14.006,0,0,1-1.411,5.973,14.653,14.653,0,0,1-.984,1.468,13.9,13.9,0,0,1-2.751,3.293c-.228.2-.313.485-.555.671l-57.019,42.764a14.26,14.26,0,0,1-8.558,2.847A14.326,14.326,0,0,1-2771.3-147.087Z"
              transform="translate(2944 428)"
              fill="var(--c-action-primary)"
            ></path>
          </g>
        </svg>
      </span>
      <span class="upload-area-title">Drag file(s) here to upload.</span>
      <span class="upload-area-description">
        Alternatively, you can select a file by <br /><strong
          >clicking here</strong
        >
      </span>
    </button>
  </div>
  <div class="modal-footer">
    <button class="btn-secondary">Cancel</button>
    <button class="btn-primary">Upload File</button>
  </div>
</div>

<style>
/* From Uiverse.io by Jerome-W-90  - Website: https://codepen.io/havardob/pen/mdPoYmY - Name: havardob - Tags: animation, action, form, image, transition */
.modal {
  width: 90%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem;
}

.logo-circle {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #e9e5ff;
  fill: #1cc972;
}

.btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.25rem;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.btn-close:hover,
.btn-close:focus {
  background-color: #e9e5ff;
}

.modal-body {
  padding: 1rem 1.5rem;
}

.modal-title {
  font-weight: 700;
}

.modal-description {
  color: #6a6b76;
}

.upload-area {
  margin-top: 1.25rem;
  background-color: transparent;
  padding: 3rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px dashed #6a6b76;
}

.upload-area:hover,
.upload-area:focus {
  cursor: pointer;
  border: 1px solid #6a6b76;
}

.upload-area:hover .upload-area-icon,
.upload-area:focus .upload-area-icon {
  transform: scale(1.3);
  transition-duration: 0.3s;
}

.upload-area-icon {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  fill: #1cc972;
}

.upload-area-title {
  margin-top: 1rem;
  display: block;
  font-weight: 700;
  color: #0d0f21;
}

.upload-area-description {
  display: block;
  color: #6a6b76;
}

.upload-area-description strong {
  color: #1cc972;
  font-weight: 700;
}

.modal-footer {
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  justify-content: flex-end;
}

.modal-footer [class*="btn-"] {
  margin-left: 0.75rem;
}

.btn-secondary,
.btn-primary {
  padding: 0.5rem 1rem;
  font-weight: 500;
  border: 2px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
}

.btn-primary {
  color: #fff;
  background-color: #1cc972;
  border-color: #1cc972;
  cursor: pointer;
}

</style>
    

================================================
FILE: Forms/JkHuger_afraid-frog-82.html
================================================
<div class="container">
        <div class="card">
            <a class="singup">Sign Up</a>
            <div class="inputBox1">
                <input type="text" required="required">
                <span class="user">Email</span>
            </div>

            <div class="inputBox">
                <input type="text" required="required">
                <span>Username</span>
            </div>

            <div class="inputBox">
                <input type="password" required="required">
                <span>Password</span>
            </div>

            <button class="enter">Enter</button>

        </div>
    </div>
<style>
/* From Uiverse.io by JkHuger - Tags: form, sign-up */
.singup {
  color: #000;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  font-weight: bold;
  font-size: x-large;
  margin-top: 1.5em;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 350px;
  width: 300px;
  flex-direction: column;
  gap: 35px;
  border-radius: 15px;
  background: #e3e3e3;
  box-shadow: 16px 16px 32px #c8c8c8,
        -16px -16px 32px #fefefe;
  border-radius: 8px;
}

.inputBox,
.inputBox1 {
  position: relative;
  width: 250px;
}

.inputBox input,
.inputBox1 input {
  width: 100%;
  padding: 10px;
  outline: none;
  border: none;
  color: #000;
  font-size: 1em;
  background: transparent;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transition: 0.1s;
  border-bottom-left-radius: 8px;
}

.inputBox span,
.inputBox1 span {
  margin-top: 5px;
  position: absolute;
  left: 0;
  transform: translateY(-4px);
  margin-left: 10px;
  padding: 10px;
  pointer-events: none;
  font-size: 12px;
  color: #000;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 3px;
  border-radius: 8px;
}

.inputBox input:valid~span,
.inputBox input:focus~span {
  transform: translateX(113px) translateY(-15px);
  font-size: 0.8em;
  padding: 5px 10px;
  background: #000;
  letter-spacing: 0.2em;
  color: #fff;
  border: 2px;
}

.inputBox1 input:valid~span,
.inputBox1 input:focus~span {
  transform: translateX(156px) translateY(-15px);
  font-size: 0.8em;
  padding: 5px 10px;
  background: #000;
  letter-spacing: 0.2em;
  color: #fff;
  border: 2px;
}

.inputBox input:valid,
.inputBox input:focus,
.inputBox1 input:valid,
.inputBox1 input:focus {
  border: 2px solid #000;
  border-radius: 8px;
}

.enter {
  height: 45px;
  width: 100px;
  border-radius: 5px;
  border: 2px solid #000;
  cursor: pointer;
  background-color: transparent;
  transition: 0.5s;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 3em;
}

.enter:hover {
  background-color: rgb(0, 0, 0);
  color: white;
}
</style>


================================================
FILE: Forms/JkHuger_sharp-panda-27.html
================================================
<div class="container">
        <div class="card">
            <a class="login">Log in</a>
            <div class="inputBox">
                <input type="text" required="required">
                <span class="user">Username</span>
            </div>

            <div class="inputBox">
                <input type="password" required="required">
                <span>Password</span>
            </div>

            <button class="enter">Enter</button>

        </div>
    </div>
<style>
/* From Uiverse.io by JkHuger - Tags: login, form */
.login {
  color: #000;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  font-weight: bold;
  font-size: x-large;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 350px;
  width: 300px;
  flex-direction: column;
  gap: 35px;
  background: #e3e3e3;
  box-shadow: 16px 16px 32px #c8c8c8,
        -16px -16px 32px #fefefe;
  border-radius: 8px;
}

.inputBox {
  position: relative;
  width: 250px;
}

.inputBox input {
  width: 100%;
  padding: 10px;
  outline: none;
  border: none;
  color: #000;
  font-size: 1em;
  background: transparent;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transition: 0.1s;
  border-bottom-left-radius: 8px;
}

.inputBox span {
  margin-top: 5px;
  position: absolute;
  left: 0;
  transform: translateY(-4px);
  margin-left: 10px;
  padding: 10px;
  pointer-events: none;
  font-size: 12px;
  color: #000;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 3px;
  border-radius: 8px;
}

.inputBox input:valid~span,
.inputBox input:focus~span {
  transform: translateX(113px) translateY(-15px);
  font-size: 0.8em;
  padding: 5px 10px;
  background: #000;
  letter-spacing: 0.2em;
  color: #fff;
  border: 2px;
}

.inputBox input:valid,
.inputBox input:focus {
  border: 2px solid #000;
  border-radius: 8px;
}

.enter {
  height: 45px;
  width: 100px;
  border-radius: 5px;
  border: 2px solid #000;
  cursor: pointer;
  background-color: transparent;
  transition: 0.5s;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 1em;
}

.enter:hover {
  background-color: rgb(0, 0, 0);
  color: white;
}


</style>


================================================
FILE: Forms/John-CFO_curly-seahorse-18.html
================================================
<form class="form">
  <span class="close">X</span>

  <div class="info">
  <span class="title">Two-Factor Verification</span>
<p class="description">Enter the two-factor authentication code provided by the authenticator app </p>
   </div>
    <div class="input-fields">
    <input placeholder="" type="tel" maxlength="1">
    <input placeholder="" type="tel" maxlength="1">
    <input placeholder="" type="tel" maxlength="1">
    <input placeholder="" type="tel" maxlength="1">
  </div>

      <div class="action-btns">
        <a class="verify" href="#">Verify</a>
        <a class="clear" href="#">Clear</a>
      </div>

</form>
<style>
/* From Uiverse.io by John-CFO - Source: Yaya12085 - Tags: form, verify, 2FA, Verification */
.form {
  --glow-color: rgb(176, 255, 251);
  --glow-spread-color: rgba(123, 246, 255, 0.781);
  --enhanced-glow-color: rgb(182, 71, 71);
  --btn-color: rgba(65, 65, 65, 0.508);
  border: 2px solid var(--glow-color);
  padding: 25px;
  display: flex;
  max-width: 420px;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  color: var(--glow-color);
  background-color: var(--btn-color);
  border-radius: 20px;
  position: relative;
}

/*----heading and description-----*/

.info {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.title {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 900;
}

.description {
  color: #fff;
  margin-top: 10px;
  font-size: 1rem;
}

/*----input-fields------*/

.form .input-fields {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.form .input-fields input {
  height: 2.5em;
  width: 2.5em;
  outline: none;
  text-align: center;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 1.5rem;
  color: #fff;
  border-radius: 12px;
  border: 2.5px solid rgba(253, 253, 253, 0.363);
  background-color: rgb(255 255 255 / 0.05);
}

.form .input-fields input:focus {
  border: 1px solid rgb(99, 236, 241);
  box-shadow: inset -1px -1px 5px rgba(255, 255, 255, .6),
        inset 10px 10px 10px rgba(0, 0, 0, .25);
  transform: scale(1.05);
  transition: 0.5s;
}

/*-----verify and clear buttons-----*/

.action-btns {
  display: flex;
  margin-top: 12px;
  gap: 0.5rem;
}

.verify {
  padding: 10px 20px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  color: #00f7ff;
  text-shadow: none;
  background: transparent;
  box-shadow: transparent;
  border: 1px solid #ffffff80;
  transition: 0.5s ease;
  user-select: none;
}

.verify:hover,:focus {
  color: #ffffff;
  background: #00eeff;
  border: 1px solid #00e1ff;
  text-shadow: 0 0 5px #ffffff,
              0 0 10px #ffffff,
              0 0 20px #ffffff;
  box-shadow: 0 0 5px #00e1ff,
              0 0 20px #00e1ff,
              0 0 50px #00e1ff,
              0 0 100px #00e1ff;
}

.clear {
  padding: 10px 20px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  color: #ff0000;
  text-shadow: none;
  background: transparent;
  box-shadow: transparent;
  border: 1px solid #ffffff80;
  transition: 0.5s ease;
  user-select: none;
}

.clear:hover,:focus {
  color: #ffffff;
  background: #ff0000;
  border: 1px solid #ff0000;
  text-shadow: 0 0 5px #ffffff,
              0 0 10px #ffffff,
              0 0 20px #ffffff;
  box-shadow: 0 0 5px #ff0000,
              0 0 20px #ff0000,
              0 0 50px #ff0000,
              0 0 100px #ff0000;
}

/*-----close button------*/

.close {
  position: absolute;
  right: 10px;
  top: 10px;
  background-color: #494949;
  color: #ff0000;
  height: 30px;
  width: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 600;
  transition: .5s ease;
}

.close:hover {
  background-color: rgba(255, 0, 0, 0.644);
  color: #fff;
}
</style>


================================================
FILE: Forms/John-CFO_spicy-horse-10.html
================================================

    <form class="form">
     <div class="form-title"><span>sign in to your</span></div>
      <div class="title-2"><span>SPACE</span></div>
      <div class="input-container">
        <input class="input-mail" type="email" placeholder="Enter email">
        <span> </span>
      </div>

      <section class="bg-stars">
        <span class="star"></span>
        <span class="star"></span>
        <span class="star"></span>
        <span class="star"></span>
      </section>

      <div class="input-container">
        <input class="input-pwd" type="password" placeholder="Enter password">
      </div>
      <button type="submit" class="submit">
        <span class="sign-text">Sign in</span>
      </button>

      <p class="signup-link">
        No account?
        <a href="" class="up">Sign up!</a>
      </p>
       
   </form>

<style>
/* From Uiverse.io by John-CFO - Tags: sign-in, form, sign-up, login , login form */
.form {
  position: relative;
  display: block;
  padding: 2.2rem;
  max-width: 350px;
  background: linear-gradient(14deg, rgba(2,0,36, 0.8) 0%, rgba(24, 24, 65, 0.7) 66%, 
            rgb(20, 76, 99) 100%), radial-gradient(circle, rgba(2,0,36, 0.5) 0%, 
            rgba(32, 15, 53, 0.2) 65%, rgba(14, 29, 28, 0.9) 100%);
  border: 2px solid #fff;
  -webkit-box-shadow: rgba(0,212,255) 0px 0px 50px -15px;
  box-shadow: rgba(0,212,255) 0px 0px 50px -15px;
  overflow: hidden;
  z-index: +1;
}

/*------input and submit section-------*/

.input-container {
  position: relative;
}

.input-container input, .form button {
  outline: none;
  border: 2px solid #ffffff;
  margin: 8px 0;
  font-family: monospace;
}

.input-container input {
  background-color: #fff;
  padding: 6px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: 250px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.input-mail:focus::placeholder {
  opacity: 0;
  transition: opacity .9s;
}

.input-pwd:focus::placeholder {
  opacity: 0;
  transition: opacity .9s;
}

.submit {
  position: relative;
  display: block;
  padding: 8px;
  background-color: #c0c0c0;
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  width: 100%;
  text-transform: uppercase;
  overflow: hidden;
}

.submit:hover {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  border-radius: 3.9px;
  box-shadow: 4px 5px 17px -4px #ffffff;
  cursor: pointer;
}

.submit:hover::before {
  -webkit-animation: sh02 0.5s 0s linear;
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 .5s 0s linear;
}

.submit::before {
  content: '';
  display: block;
  width: 0px;
  height: 85%;
  position: absolute;
  top: 50%;
  left: 0%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 50px 30px #fff;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

@keyframes sh02 {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
    left: 100%;
  }
}

/*--------signup section---------*/

.signup-link {
  color: #c0c0c0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
  font-family: monospace;
}

.signup-link a {
  color: #fff;
  text-decoration: none;
}

.up:hover {
  text-decoration: underline;
}


/*--------header section-----------*/

.form-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-family: monospace;
  font-weight: 600;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  animation-duration: 1.5s;
  overflow: hidden;
  transition: .12s;
}

.form-title span {
  animation: flickering 2s linear infinite both;
}

.title-2 {
  display: block;
  margin-top: -0.5rem;
  font-size: 2.1rem;
  font-weight: 800;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  -webkit-text-stroke: #fff 0.1rem;
  letter-spacing: 0.2rem;
  color: transparent;
  position: relative;
  text-shadow: 0px 0px 16px #CECECE;
}

.title-2 span::before,
.title-2 span::after {
  content: '—';
}

@keyframes flickering {
  0%,
  100% {
    opacity: 1;
  }

  41.99% {
    opacity: 1;
  }

  42% {
    opacity: 0;
  }

  43% {
    opacity: 0;
  }

  43.01% {
    opacity: 1;
  }

  47.99% {
    opacity: 1;
  }

  48% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  49.01% {
    opacity: 1;
  }
}

/*---------shooting stars-----------*/


.bg-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-size: cover;
  animation: animateBg 50s linear infinite;
}

@keyframes animateBg {
  0%,100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

.star {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.1),0 0 0 8px rgba(255,255,255,0.1),0 0 20px rgba(255,255,255,0.1);
  animation: animate 3s linear infinite;
}

.star::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 1px;
  background: linear-gradient(90deg,#fff,transparent);
}

@keyframes animate {
  0% {
    transform: rotate(315deg) translateX(0);
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: rotate(315deg) translateX(-1000px);
    opacity: 0;
  }
}

.star:nth-child(1) {
  top: 0;
  right: 0;
  left: initial;
  animation-delay: 0s;
  animation-duration: 1s;
}

.star:nth-child(2) {
  top: 0;
  right: 100px;
  left: initial;
  animation-delay: 0.2s;
  animation-duration: 3s;
}

.star:nth-child(3) {
  top: 0;
  right: 220px;
  left: initial;
  animation-delay: 2.75s;
  animation-duration: 2.75s;
}

.star:nth-child(4) {
  top: 0;
  right: -220px;
  left: initial;
  animation-delay: 1.6s;
  animation-duration: 1.6s;
}



















 




</style>


================================================
FILE: Forms/JohnnyCSilva_bad-cheetah-74.html
================================================
<form class="form">
    <div class="flex-column">
      <label>Email </label></div>
      <div class="inputForm">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 32 32" height="20"><g data-name="Layer 3" id="Layer_3"><path d="m30.853 13.87a15 15 0 0 0 -29.729 4.082 15.1 15.1 0 0 0 12.876 12.918 15.6 15.6 0 0 0 2.016.13 14.85 14.85 0 0 0 7.715-2.145 1 1 0 1 0 -1.031-1.711 13.007 13.007 0 1 1 5.458-6.529 2.149 2.149 0 0 1 -4.158-.759v-10.856a1 1 0 0 0 -2 0v1.726a8 8 0 1 0 .2 10.325 4.135 4.135 0 0 0 7.83.274 15.2 15.2 0 0 0 .823-7.455zm-14.853 8.13a6 6 0 1 1 6-6 6.006 6.006 0 0 1 -6 6z"></path></g></svg>
        <input placeholder="Enter your Email" class="input" type="text">
      </div>
    
    <div class="flex-column">
      <label>Password </label></div>
      <div class="inputForm">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-64 0 512 512" height="20"><path d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"></path><path d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0"></path></svg>        
        <input placeholder="Enter your Password" class="input" type="password">
      </div>
    
    <div class="flex-row">
      <div>
      <input type="radio">
      <label>Remember me </label>
      </div>
      <span class="span">Forgot password?</span>
    </div>
    <button class="button-submit">Sign In</button>
    <p class="p">Don't have an account? <span class="span">Sign Up</span>

    </p><p class="p line">Or With</p>

    <div class="flex-row">
      <button class="btn google">
        <svg xml:space="preserve" style="enable-background:new 0 0 512 512;" viewBox="0 0 512 512" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="20" version="1.1">
<path d="M113.47,309.408L95.648,375.94l-65.139,1.378C11.042,341.211,0,299.9,0,256
	c0-42.451,10.324-82.483,28.624-117.732h0.014l57.992,10.632l25.404,57.644c-5.317,15.501-8.215,32.141-8.215,49.456
	C103.821,274.792,107.225,292.797,113.47,309.408z" style="fill:#FBBB00;"></path>
<path d="M507.527,208.176C510.467,223.662,512,239.655,512,256c0,18.328-1.927,36.206-5.598,53.451
	c-12.462,58.683-45.025,109.925-90.134,146.187l-0.014-0.014l-73.044-3.727l-10.338-64.535
	c29.932-17.554,53.324-45.025,65.646-77.911h-136.89V208.176h138.887L507.527,208.176L507.527,208.176z" style="fill:#518EF8;"></path>
<path d="M416.253,455.624l0.014,0.014C372.396,490.901,316.666,512,256,512
	c-97.491,0-182.252-54.491-225.491-134.681l82.961-67.91c21.619,57.698,77.278,98.771,142.53,98.771
	c28.047,0,54.323-7.582,76.87-20.818L416.253,455.624z" style="fill:#28B446;"></path>
<path d="M419.404,58.936l-82.933,67.896c-23.335-14.586-50.919-23.012-80.471-23.012
	c-66.729,0-123.429,42.957-143.965,102.724l-83.397-68.276h-0.014C71.23,56.123,157.06,0,256,0
	C318.115,0,375.068,22.126,419.404,58.936z" style="fill:#F14336;"></path>

</svg>
   
        Google 
        
      </button><button class="btn apple">
<svg xml:space="preserve" style="enable-background:new 0 0 22.773 22.773;" viewBox="0 0 22.773 22.773" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" width="20" height="20" version="1.1"> <g> <g> <path d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573 c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z"></path> <path d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334 c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0 c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019 c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464 c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648 c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z"></path> </g></g></svg>

        Apple 
        
</button></div></form>
<style>
/* From Uiverse.io by JohnnyCSilva - Tags: login, login form, account */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #ffffff;
  padding: 30px;
  width: 450px;
  border-radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

::placeholder {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.form button {
  align-self: flex-end;
}

.flex-column > label {
  color: #151717;
  font-weight: 600;
}

.inputForm {
  border: 1.5px solid #ecedec;
  border-radius: 10px;
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  transition: 0.2s ease-in-out;
}

.input {
  margin-left: 10px;
  border-radius: 10px;
  border: none;
  width: 100%;
  height: 100%;
}

.input:focus {
  outline: none;
}

.inputForm:focus-within {
  border: 1.5px solid #2d79f3;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.flex-row > div > label {
  font-size: 14px;
  color: black;
  font-weight: 400;
}

.span {
  font-size: 14px;
  margin-left: 5px;
  color: #2d79f3;
  font-weight: 500;
  cursor: pointer;
}

.button-submit {
  margin: 20px 0 10px 0;
  background-color: #151717;
  border: none;
  color: white;
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px;
  height: 50px;
  width: 100%;
  cursor: pointer;
}

.p {
  text-align: center;
  color: black;
  font-size: 14px;
  margin: 5px 0;
}

.btn {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  gap: 10px;
  border: 1px solid #ededef;
  background-color: white;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.btn:hover {
  border: 1px solid #2d79f3;
  ;
}

    
</style>


================================================
FILE: Forms/KhelVers_honest-lionfish-67.html
================================================
<div id="Container">
  <form class="form">
    <div id="login-lable">Login</div>
    <input class="form-content" type="text" placeholder="UserName" />
    <input class="form-content" type="password" placeholder="PassWord" />
    <button>Continue</button>
  </form>

  <div id="rays">
    <svg
      fill="none"
      viewBox="0 0 299 152"
      height="9em"
      width="18em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill="url(#paint0_linear_8_3)"
        d="M149.5 152H133.42L9.53674e-07 4.70132e-06H149.5L299 4.70132e-06L165.58 152H149.5Z"
      ></path>
      <defs>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="12.1981"
          x2="150.12"
          y1="152"
          x1="149.5"
          id="paint0_linear_8_3"
        >
          <stop stop-color="#00E0FF"></stop>
          <stop stop-opacity="0" stop-color="#65EDFF" offset="1"></stop>
        </linearGradient>
      </defs>
    </svg>
  </div>

  <div id="emiter">
    <svg
      fill="none"
      viewBox="0 0 160 61"
      height="61"
      width="160"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g filter="url(#filter0_di_1_38)">
        <path
          fill="#2B2B2B"
          d="M80 27.9997C121.974 27.9997 156 22.4032 156 15.4996L156 40.4998C156 47.4034 121.974 52.9998 80 52.9998C38.0265 52.9998 4.00028 47.4034 4 40.4998V40.4998V15.51C4.0342 22.4089 38.0474 27.9997 80 27.9997Z"
          clip-rule="evenodd"
          fill-rule="evenodd"
        ></path>
      </g>
      <ellipse
        fill="url(#paint0_radial_1_38)"
        ry="4.80773"
        rx="28.3956"
        cy="17.4236"
        cx="80"
      ></ellipse>
      <g filter="url(#filter1_i_1_38)">
        <path
          fill="#323232"
          d="M80 28.0002C121.974 28.0002 156 22.4037 156 15.5001C156 8.59648 121.974 3 80 3C38.0264 3 4 8.59648 4 15.5001C4 22.4037 38.0264 28.0002 80 28.0002ZM80.0001 20.308C96.1438 20.308 109.231 18.1555 109.231 15.5002C109.231 12.845 96.1438 10.6925 80.0001 10.6925C63.8564 10.6925 50.7693 12.845 50.7693 15.5002C50.7693 18.1555 63.8564 20.308 80.0001 20.308Z"
          clip-rule="evenodd"
          fill-rule="evenodd"
        ></path>
      </g>
      <g filter="url(#filter2_di_1_38)">
        <path
          fill="#378BA6"
          d="M106.725 17.4505C108.336 16.8543 109.231 16.1943 109.231 15.4999C109.231 12.8446 96.1438 10.6921 80.0001 10.6921C63.8564 10.6921 50.7693 12.8446 50.7693 15.4999C50.7693 16.1943 51.6645 16.8543 53.2752 17.4504C53.275 17.4414 53.2748 17.4323 53.2748 17.4232C53.2748 14.768 65.2401 12.6155 80.0001 12.6155C94.7601 12.6155 106.725 14.768 106.725 17.4232C106.725 17.4323 106.725 17.4414 106.725 17.4505Z"
          clip-rule="evenodd"
          fill-rule="evenodd"
        ></path>
      </g>
      <defs>
        <filter
          color-interpolation-filters="sRGB"
          filterUnits="userSpaceOnUse"
          height="45.5002"
          width="160"
          y="15.4996"
          x="0"
          id="filter0_di_1_38"
        >
          <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
          <feColorMatrix
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            type="matrix"
            in="SourceAlpha"
          ></feColorMatrix>
          <feOffset dy="4"></feOffset>
          <feGaussianBlur stdDeviation="2"></feGaussianBlur>
          <feComposite operator="out" in2="hardAlpha"></feComposite>
          <feColorMatrix
            values="0 0 0 0 0.620833 0 0 0 0 0.620833 0 0 0 0 0.620833 0 0 0 0.25 0"
            type="matrix"
          ></feColorMatrix>
          <feBlend
            result="effect1_dropShadow_1_38"
            in2="BackgroundImageFix"
            mode="normal"
          ></feBlend>
          <feBlend
            result="shape"
            in2="effect1_dropShadow_1_38"
            in="SourceGraphic"
            mode="normal"
          ></feBlend>
          <feColorMatrix
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            type="matrix"
            in="SourceAlpha"
          ></feColorMatrix>
          <feOffset></feOffset>
          <feGaussianBlur stdDeviation="8"></feGaussianBlur>
          <feComposite
            k3="1"
            k2="-1"
            operator="arithmetic"
            in2="hardAlpha"
          ></feComposite>
          <feColorMatrix
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"
            type="matrix"
          ></feColorMatrix>
          <feBlend
            result="effect2_innerShadow_1_38"
            in2="shape"
            mode="normal"
          ></feBlend>
        </filter>
        <filter
          color-interpolation-filters="sRGB"
          filterUnits="userSpaceOnUse"
          height="25.0002"
          width="152"
          y="3"
          x="4"
          id="filter1_i_1_38"
        >
          <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
          <feBlend
            result="shape"
            in2="BackgroundImageFix"
            in="SourceGraphic"
            mode="normal"
          ></feBlend>
          <feColorMatrix
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            type="matrix"
            in="SourceAlpha"
          ></feColorMatrix>
          <feMorphology
            result="effect1_innerShadow_1_38"
            in="SourceAlpha"
            operator="erode"
            radius="3"
          ></feMorphology>
          <feOffset></feOffset>
          <feGaussianBlur stdDeviation="6.5"></feGaussianBlur>
          <feComposite
            k3="1"
            k2="-1"
            operator="arithmetic"
            in2="hardAlpha"
          ></feComposite>
          <feColorMatrix
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"
            type="matrix"
          ></feColorMatrix>
          <feBlend
            result="effect1_innerShadow_1_38"
            in2="shape"
            mode="normal"
          ></feBlend>
        </filter>
        <filter
          color-interpolation-filters="sRGB"
          filterUnits="userSpaceOnUse"
          height="26.7583"
          width="78.4615"
          y="0.692139"
          x="40.7693"
          id="filter2_di_1_38"
        >
          <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
          <feColorMatrix
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            type="matrix"
            in="SourceAlpha"
          ></feColorMatrix>
          <feMorphology
            result="effect1_dropShadow_1_38"
            in="SourceAlpha"
            operator="dilate"
            radius="2"
          ></feMorphology>
          <feOffset></feOffset>
          <feGaussianBlur stdDeviation="4"></feGaussianBlur>
          <feComposite operator="out" in2="hardAlpha"></feComposite>
          <feColorMatrix
            values="0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0"
            type="matrix"
          ></feColorMatrix>
          <feBlend
            result="effect1_dropShadow_1_38"
            in2="BackgroundImageFix"
            mode="color-dodge"
          ></feBlend>
          <feBlend
            result="shape"
            in2="effect1_dropShadow_1_38"
            in="SourceGraphic"
            mode="normal"
          ></feBlend>
          <feColorMatrix
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            type="matrix"
            in="SourceAlpha"
          ></feColorMatrix>
          <feMorphology
            result="effect2_innerShadow_1_38"
            in="SourceAlpha"
            operator="erode"
            radius="1"
          ></feMorphology>
          <feOffset></feOffset>
          <feGaussianBlur stdDeviation="2"></feGaussianBlur>
          <feComposite
            k3="1"
            k2="-1"
            operator="arithmetic"
            in2="hardAlpha"
          ></feComposite>
          <feColorMatrix
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.52 0"
            type="matrix"
          ></feColorMatrix>
          <feBlend
            result="effect2_innerShadow_1_38"
            in2="shape"
            mode="normal"
          ></feBlend>
        </filter>
        <radialGradient
          gradientTransform="translate(80 17.4236) rotate(90) scale(6.25004 36.9143)"
          gradientUnits="userSpaceOnUse"
          r="1"
          cy="0"
          cx="0"
          id="paint0_radial_1_38"
        >
          <stop stop-color="#00FFF0"></stop>
          <stop stop-color="#001AFF" offset="0.901042"></stop>
        </radialGradient>
      </defs>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by KhelVers  - Tags: form, input, login  */
#Container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

#rays {
  z-index: 2;
  position: relative;
  bottom: -1.5em;
  animation: rays 2s ease-in-out infinite;
}

.form {
  position: relative;
  top: 5em;
  padding: 4%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  border: 4px solid #fff;
  background: rgba(0, 255, 240, 0.52);
  box-shadow: 0px 0px 64px 0px #82e1ff inset, 0px 0px 16px #a8fffaa6;
  backdrop-filter: blur(3.5px);
  gap: 1em;
  animation: float 2s ease-in-out infinite;
}

#login-lable {
  text-align: center;
  color: white;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 8px;
  text-shadow: 0px 0px 16px rgb(243, 243, 243);
}

.form-content {
  height: 3em;
  padding: 1px 8px;
  color: white;
  text-decoration: none;
  letter-spacing: 1px;
  font-weight: bold;
  border-radius: 6px;
  border: 2px solid #fff;
  background: rgba(139, 255, 247, 0.486);
  box-shadow: 0px 0px 1px 3px #9ee5e3 inset, 0px 4px 4px 0px #181a6040;
  text-shadow: 0px 1px 4px rgb(243, 243, 243);
}

.form-content:focus-visible {
  outline: none;
  text-decoration: none;
  background: rgba(139, 189, 255, 0.59);
  box-shadow: 0px 0px 1px 4px #9ee5e3;
}

.form-content:hover {
  background: rgba(139, 189, 255, 0.59);
}

::placeholder {
  font-weight: 300;
  color: white;
  letter-spacing: 0.1rem;
  text-shadow: 0px 1px 5px rgb(66, 66, 66);
}

.form button {
  cursor: pointer;
  height: 3.5rem;
  padding: 0%;
  color: white;
  font-size: 1.5em;
  letter-spacing: 0.3rem;
  border: 2px solid white;
  background: linear-gradient(144deg, #9c11ffce, #2000eeb6 50%, #15efffbb);
}

.form button:hover {
  position: relative;
  bottom: 4px;
  background: linear-gradient(144deg, #9c11ff, #2000ee 50%, #15fff3);
  box-shadow: 0px 0px 2px 2px #ffffff;
}

@keyframes float {
  0% {
    position: relative;
  }

  50% {
    top: 50px;
  }

  100% {
    position: relative;
  }
}

@keyframes rays {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.6;
  }
}

</style>
    

================================================
FILE: Forms/KhelVers_hot-panther-2.html
================================================
 <div class="login-container">
    <div class="login-header">
      <div>Login</div>
    </div>
    <input type="text" class="login-input" placeholder="Username" id="username">
    <input type="password" class="login-input" placeholder="Password (Min-8, Max-15)" id="password" maxlength="15" minlength="8">
    <button class="login-button" id="login-button">Login</button>
  </div>
<style>
/* From Uiverse.io by KhelVers - Tags: form, login form, log in, 3d form , 3d login form, standard, luxary */
.login-container {
  width: 300px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px #3498db, inset 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.login-header {
  font-size: x-large;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}

.login-header h1 {
  color: #333;
  font-size: 24px;
}

.login-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: none;
  background: #f5f5f5;
  border-radius: 4px;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}

.login-button {
  width: 100%;
  padding: 10px;
  border: none;
  background: #3498db;
  color: #fff;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), inset 0px 1px 3px rgba(255, 255, 255, 0.5);
  transition: background 0.3s ease, transform 0.2s ease;
}

.login-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}
</style>


================================================
FILE: Forms/KhelVers_spicy-impala-38.html
================================================
<form class="form"> 
    <span id="login-lable">Login</span> 
    <input class="input" type="text" placeholder="UserName"> 
    <input class="input" type="text" placeholder="PassWord" minlength="8" maxlength="15">
    <button id="btn">Submit</button> 
</form>
<style>
/* From Uiverse.io by KhelVers - Tags: form, animated, submit, log in, 3d form , 3d cool effect, 3d login form */
.form {
  height: 18em;
  width: 16em;
  padding: 4%;
  border-radius: 16px;
  background: #e8e8e8;
  box-shadow: 12px 12px 18px #bababa,
              -12px -12px 18px #ffffff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-evenly;
}

#login-lable {
  height: 15%;
  text-align: center;
  font-size: 34px;
  letter-spacing: 3px;
  font-weight: 600;
  text-shadow: -2px -2px 3px #ffffff ,
              2px 2px 3px #bababa;
  position: relative;
  top: -14px;
}

.input {
  height: 16%;
  padding: 1px 8px;
  border: none;
  font-size: 1em;
  letter-spacing: 2px;
  border-radius: 8px;
  background: #f3f3f3;
  box-shadow: inset -2px -2px 4px #ffffff,
              inset 2px 2px 4px rgba(0, 0, 0, 0.356);
  text-decoration: none;
  background: linear-gradient(to right,white, #80808010, white);
  background-size: 200% 200%;
  animation: input 4s infinite;
}

.input:focus-visible {
  outline: none;
  background: rgb(241, 241, 241);
}

#btn {
  font-size: x-large;
  letter-spacing: 3px;
  color: white;
  font-weight: 700;
  height: 18%;
  background: linear-gradient(144deg,#af40ff,
              #5b42f3 50%,#00ddeb);
  border-radius: 8px;
  border: none;
  box-shadow: inset 1px 3px 3px #ffffffbd,
               inset -4px -4px 3px #00000046;
  background-size: 150% 150%;
  animation: input 5s infinite;
  transition: all 900ms ease-in;
}

#btn:hover {
  position: relative;
  bottom: 3px;
  background: linear-gradient(144deg,#9706ff,
              #2f0fff 50%,#18f0ff);
}

@keyframes input {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
    
</style>


================================================
FILE: Forms/LeryLey_lazy-chicken-4.html
================================================
<!-- From Uiverse.io by LeryLey  - Tags: simple, login, form -->
<div
  class="w-80 rounded-lg shadow h-auto p-6 bg-white relative overflow-hidden"
>
  <div class="flex flex-col justify-center items-center space-y-2">
    <h2 class="text-2xl font-medium text-slate-700">Login</h2>
    <p class="text-slate-500">Enter details below.</p>
  </div>
  <form class="w-full mt-4 space-y-3">
    <div>
      <input
        class="outline-none border-2 rounded-md px-2 py-1 text-slate-500 w-full focus:border-blue-300"
        placeholder="Username"
        id="username"
        name="username"
        type="text"
      />
    </div>
    <div>
      <input
        class="outline-none border-2 rounded-md px-2 py-1 text-slate-500 w-full focus:border-blue-300"
        placeholder="Password"
        id="password"
        name="password"
        type="password"
      />
    </div>
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <input
          class="mr-2 w-4 h-4"
          id="remember"
          name="remember"
          type="checkbox"
        />
        <span class="text-slate-500">Remember me </span>
      </div>
      <a class="text-blue-500 font-medium hover:underline" href="#"
        >Forgot Password</a
      >
    </div>
    <button
      class="w-full justify-center py-1 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 rounded-md text-white ring-2"
      id="login"
      name="login"
      type="submit"
    >
      login
    </button>
    <p class="flex justify-center space-x-1">
      <span class="text-slate-700"> Have an account? </span>
      <a class="text-blue-500 hover:underline" href="#">Sign Up</a>
    </p>
  </form>
</div>


    

================================================
FILE: Forms/LogariusIV_orange-cobra-86.html
================================================
<form action="" class="form">
        <div class="Group">
            <label for="Email">Email</label>
            <input placeholder="abc@email.com" id="Email" type="email">
        </div>
        <div class="Group">
            <label for="Password">Password</label>
            <input id="Password" type="password">
        </div>
        <div class="Group">
            <button class="btn">Log in</button>
        </div>
</form>
<style>
/* From Uiverse.io by LogariusIV - Tags: login, form */
.form {
  display: flex;
  flex-direction: column;
  width: 280px;
  height: 350px;
  background-color: #FFF;
  margin: 0;
  box-shadow: -1px 0px 25px 0px #21719369;
  padding: 2.25em;
  box-sizing: border-box;
  border: solid 1px #DDD;
  border-radius: 0.5em;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.form .Group {
  margin-bottom: 2em;
}

.form label {
  margin: 0 0 10px;
  display: block;
  font-size: 1.25em;
  color: #217093;
  font-weight: 600;
  font-family: inherit;
}

.form input {
  padding: 0.3em 0.5em 0.4em;
  background-color: #f3fafd;
  border: solid 2px #217093;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  font-size: 1.3em;
  color: #353538;
  font-weight: 600;
  font-family: inherit;
  transition: box-shadow 0.2s linear, border-color 0.25s ease-out;
}

.form input:focus {
  outline: none;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #edf8fc;
  border: solid 2px #4eb8dd;
}

.form input::placeholder {
  color: #21719383;
}

.form .btn {
  margin: 0;
  padding: 0.5em;
  background-color: #4eb8dd;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: none;
  width: 100%;
  height: 50px;
  font-size: 1.4em;
  color: #FFF;
  font-weight: 600;
  font-family: inherit;
  transition: transforme 0.1s ease-in-out, background-color 0.2s ease-out;
}

.form .btn:hover {
  cursor: pointer;
  background-color: #217093;
}

.form .btn:active {
  transform: scale(0.98);
}  
</style>


================================================
FILE: Forms/Manish-Tamang_perfect-husky-48.html
================================================
<!-- From Uiverse.io by Manish-Tamang  - Tags: login, form, hover, login form, tailwindcss -->
<div class="flex justify-center items-center min-h-screen">
  <div
    class="max-w-sm w-full rounded-lg shadow-lg bg-white p-6 space-y-6 border border-gray-200 dark:border-gray-700"
  >
    <div class="space-y-2 text-center">
      <h1 class="text-3xl font-bold">Login</h1>
      <p class="text-zinc-500 dark:text-zinc-400">
        By logging in, you accept our
        <a class="text-blue-500 hover:text-blue-700" href="#">terms</a>
        and
        <a class="text-blue-500 hover:text-blue-700" href="#">privacy policy</a
        >.
      </p>
    </div>
    <div class="space-y-4">
      <div class="space-y-2">
        <label
          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
          for="email"
          >Email</label
        >
        <input
          class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
          type="email"
          id="email"
          placeholder="manish@example.com"
          required=""
        />
      </div>
      <div class="flex items-center space-x-2">
        <hr class="flex-grow border-zinc-200 dark:border-zinc-700" />
        <span class="text-zinc-400 dark:text-zinc-300 text-sm">OR</span>
        <hr class="flex-grow border-zinc-200 dark:border-zinc-700" />
      </div>
      <button
        class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-full bg-[#4285F4] text-white"
      >
        <div class="flex items-center justify-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-5 h-5 mr-2"
          >
            <circle cx="12" cy="12" r="10"></circle>
            <circle cx="12" cy="12" r="4"></circle>
            <line x1="21.17" x2="12" y1="8" y2="8"></line>
            <line x1="3.95" x2="8.54" y1="6.06" y2="14"></line>
            <line x1="10.88" x2="15.46" y1="21.94" y2="14"></line>
          </svg>
          Login with Google
        </div>
      </button>
      <button
        class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-full bg-black text-white"
      >
        <div class="flex items-center justify-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-5 h-5 mr-2"
          >
            <path
              d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"
            ></path>
            <path d="M10 2c1 .5 2 2 2 5"></path>
          </svg>
          Login with Apple
        </div>
      </button>
    </div>
  </div>
</div>


    

================================================
FILE: Forms/MikeAndrewDesigner_pink-duck-8.html
================================================
<div class="login wrap">
  <div class="h1">Login</div>
  <input pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" placeholder="Email" id="email" name="email" type="text">
  <input placeholder="Password" id="password" name="password" type="password">
  <input value="Login" class="btn" type="submit">
</div>
<style>
/* From Uiverse.io by MikeAndrewDesigner - Tags: animation, form, login form, hover button */
.login {
  width: 340px;
  height: 400px;
  background: #2c2c2c;
  padding: 47px;
  padding-bottom: 57px;
  color: #fff;
  border-radius: 17px;
  padding-bottom: 50px;
  font-size: 1.3em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.login input[type="text"],
.login input[type="password"] {
  opacity: 1;
  display: block;
  border: none;
  outline: none;
  width: 100%;
  padding: 13px 18px;
  margin: 20px 0 0 0;
  font-size: 0.8em;
  border-radius: 100px;
  background: #3c3c3c;
  color: #fff;
}

.login input:focus {
  animation: bounce 1s;
  -webkit-appearance: none;
}

.login input[type=submit],
.login input[type=button],
.h1 {
  border: 0;
  outline: 0;
  width: 100%;
  padding: 13px;
  margin: 40px 0 0 0;
  border-radius: 500px;
  font-weight: 600;
  animation: bounce2 1.6s;
}

.h1 {
  padding: 0;
  position: relative;
  top: -35px;
  display: block;
  margin-bottom: -0px;
  font-size: 1.3em;
}

.btn {
  background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
  color: #fff;
  padding: 16px !important;
}

.btn:hover {
  background: linear-gradient(144deg, #1e1e1e , 20%,#1e1e1e 50%,#1e1e1e );
  color: rgb(255, 255, 255);
  padding: 16px !important;
  cursor: pointer;
  transition: all 0.4s ease;
}

.login input[type=text] {
  animation: bounce 1s;
  -webkit-appearance: none;
}

.login input[type=password] {
  animation: bounce1 1.3s;
}

.ui {
  font-weight: bolder;
  background: -webkit-linear-gradient(#B563FF, #535EFC, #0EC8EE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(0.25turn, #535EFC, #0EC8EE, #0EC8EE);
  border-image-slice: 1;
  display: inline;
}

@media only screen and (max-width: 600px) {
  .login {
    width: 70%;
    padding: 3em;
  }
}

@keyframes bounce {
  0% {
    transform: translateY(-250px);
    opacity: 0;
  }
}

@keyframes bounce1 {
  0% {
    opacity: 0;
  }

  40% {
    transform: translateY(-100px);
    opacity: 0;
  }
}

@keyframes bounce2 {
  0% {
    opacity: 0;
  }

  70% {
    transform: translateY(-20px);
    opacity: 0;
  }
}
</style>


================================================
FILE: Forms/Mr-Roy-alt_fat-kangaroo-51.html
================================================
<form class="form">
    <span class="signup">Sign Up</span>
    <input type="email" placeholder="Email address" class="form--input">
    <input type="password" placeholder="Password" class="form--input">
    <input type="password" placeholder="Confirm password" class="form--input">
    
    <div class="form--marketing">
        <input id="okayToEmail" type="checkbox">
        <label for="okayToEmail" class="checkbox">
          I want to join the newsletter
        </label>
    </div>
    <button class="form--submit">
        Sign up
    </button>
</form>
<style>
/* From Uiverse.io by Mr-Roy-alt - Tags: form, sign-up */
.form {
  background-color: white;
  padding: 3.125em;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.75);
}

.signup {
  color: rgb(77, 75, 75);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  font-weight: bold;
  font-size: x-large;
  margin-bottom: 0.5em;
}

.form--input {
  width: 100%;
  margin-bottom: 1.25em;
  height: 40px;
  border-radius: 5px;
  border: 1px solid gray;
  padding: 0.8em;
  font-family: 'Inter', sans-serif;
  outline: none;
}

.form--input:focus {
  border: 1px solid #639;
  outline: none;
}

.form--marketing {
  display: flex;
  margin-bottom: 1.25em;
  align-items: center;
}

.form--marketing > input {
  margin-right: 0.625em;
}

.form--marketing > label {
  color: grey;
}

.checkbox, input[type="checkbox"] {
  accent-color: #639;
}

.form--submit {
  width: 50%;
  padding: 0.625em;
  border-radius: 5px;
  color: white;
  background-color: #639;
  border: 1px dashed #639;
  cursor: pointer;
}

.form--submit:hover {
  color: #639;
  background-color: white;
  border: 1px dashed #639;
  cursor: pointer;
  transition: 0.5s;
}
</style>


================================================
FILE: Forms/Phelix652_selfish-pug-28.html
================================================
<div class="card">
  <div class="card2">
    <form class="form">
    <p id="heading">Login</p>
    <div class="field">
    <svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" class="input-icon">
    <path d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z"></path>
    </svg>
      <input type="text" class="input-field" placeholder="Username" autocomplete="off">
    </div>
    <div class="field">
    <svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" class="input-icon">
    <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"></path>
    </svg>
      <input type="password" class="input-field" placeholder="Password">
    </div>
    <div class="btn">
    <button class="button1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Login&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
    <button class="button2">Sign Up</button>
    </div>
    <button class="button3">Forgot Password</button>
</form>
  </div>
    </div>
<style>
/* From Uiverse.io by Phelix652 - Tags: form */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 0.4em;
  background-color: #171717;
  border-radius: 20px;
}

#heading {
  text-align: center;
  margin: 2em;
  color: rgb(0, 255, 200);
  font-size: 1.2em;
}

.field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border-radius: 25px;
  padding: 0.6em;
  border: none;
  outline: none;
  color: white;
  background-color: #171717;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
}

.input-icon {
  height: 1.3em;
  width: 1.3em;
  fill: rgb(0, 255, 200);
}

.input-field {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  color: rgb(0, 255, 200);
}

.form .btn {
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin-top: 2.5em;
}

.button1 {
  padding: 0.5em;
  padding-left: 1.1em;
  padding-right: 1.1em;
  border-radius: 5px;
  margin-right: 0.5em;
  border: none;
  outline: none;
  transition: .4s ease-in-out;
  background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
  color: rgb(0, 0, 0);
}

.button1:hover {
  background-image: linear-gradient(163deg, #00642f 0%, #13034b 100%);
  color: rgb(0, 255, 200);
}

.button2 {
  padding: 0.5em;
  padding-left: 2.3em;
  padding-right: 2.3em;
  border-radius: 5px;
  border: none;
  outline: none;
  transition: .4s ease-in-out;
  background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
  color: rgb(0, 0, 0);
}

.button2:hover {
  background-image: linear-gradient(163deg, #00642f 0%, #13034b 100%);
  color: rgb(0, 255, 200);
}

.button3 {
  margin-bottom: 3em;
  padding: 0.5em;
  border-radius: 5px;
  border: none;
  outline: none;
  transition: .4s ease-in-out;
  background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
  color: rgb(0, 0, 0);
}

.button3:hover {
  background-image: linear-gradient(163deg, #a00000fa 0%, #d10050 100%);
  color: rgb(255, 255, 255);
}

.card {
  background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
  border-radius: 22px;
  transition: all .3s;
}

.card2 {
  border-radius: 0;
  transition: all .2s;
}

.card2:hover {
  transform: scale(0.98);
  border-radius: 20px;
}

.card:hover {
  box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30);
}
</style>


================================================
FILE: Forms/Piyush831_rare-dragon-75.html
================================================
<form class="form">
    <div class="flex">
      <div class="login color">Login</div>
      <label class="color">Username :</label>
      <input type="text" class="input">
      <label class="color">Password :</label>
      <input type="password" class="input"> 
      <button class="">Log-in</button>
      <br>
      <div class="color align">Don't have account? <span class="span">Sign-Up</span></div>
    </div>
</form>
<style>
/* From Uiverse.io by Piyush831 - Tags: form, creative, box-shadow */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(to right ,grey,silver);
  padding: 40px;
  border-radius: 10px;
}

.login {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

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

.form button {
  margin-top: 25px;
  margin-bottom: 6px;
  border-radius: 10px;
  border: none;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 19px;
  font-weight: bold;
  color: grey;
}

.form label {
  margin-top: 20px;
  margin-bottom: 5px;
}

.form button:hover {
  box-shadow: 2px 2px 12px white;
}

.input {
  height: 30px;
  outline: none;
  padding: 15px;
  border-radius: 10px;
  border: none;
  font-weight: bold;
  font-size: 15px;
  box-shadow: 2px 2px 12px inset black;
}

.span:hover {
  font-weight: bold;
}

.color {
  color: white;
}

.align {
  text-align: center;
}

</style>


================================================
FILE: Forms/Praashoo7_bitter-pig-24.html
================================================
<form class="form">
    <p class="heading">LOGIN</p>
    <input placeholder="Username" class="input" type="text">
    <input placeholder="Password" class="input" type="password">
    <button class="btn">Submit</button>
</form>
<style>
/* From Uiverse.io by Praashoo7 - Tags: login, form, stitched */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 3em;
  padding-left: 2.8em;
  padding-right: 2.8em;
  padding-bottom: 2.1em;
  border: 2px dashed #DAA06D;
  border-radius: 15px;
  background-color: #EADDCA;
  box-shadow: 0 0 0 4px #EADDCA, 2px 2px 4px 2px rgba(0, 0, 0, 0.5);
  transition: .4s ease-in-out;
}

::placeholder {
  color: #DAA06D;
  text-align: center;
}

.form .heading {
  padding-left: 0.8em;
  color: #DAA06D;
  background-color: transparent;
  letter-spacing: .5em;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 3em;
  text-shadow: inset -1px -1px 1px #DAA06D;
}

.form .input {
  outline: none;
  padding: 0.5em;
  border: 1px solid #DAA06D;
  color: #DAA06D;
  width: 14em;
  height: 3em;
  border-radius: 10px;
  background-color: #EADDCA;
  text-align: center;
}

.form .btn {
  align-self: center;
  margin-top: 2em;
  border-radius: 10px;
  outline: none;
  border: none;
  color: white;
  background-color: #E5AA70;
  font-weight: bold;
  letter-spacing: 0.1em;
  transition: .4s ease-in-out opacity,.1s ease-in-out active;
  padding: 1em;
  box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
}

.form .btn:hover {
  opacity: 0.8;
}

.form .btn:active {
  transform: translateX(0.1em) translateY(0.1em);
  box-shadow: none;
}
</style>


================================================
FILE: Forms/Praashoo7_brave-moose-56.html
================================================
<form class="form">
    <p id="heading">Login</p>
    <div class="field">
    <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
    <path d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z"></path>
    </svg>
      <input autocomplete="off" placeholder="Username" class="input-field" type="text">
    </div>
    <div class="field">
    <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"></path>
    </svg>
      <input placeholder="Password" class="input-field" type="password">
    </div>
    <div class="btn">
    <button class="button1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Login&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
    <button class="button2">Sign Up</button>
    </div>
    <button class="button3">Forgot Password</button>
</form>
<style>
/* From Uiverse.io by Praashoo7 - Tags: neumorphism, login, form */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 0.4em;
  background-color: #171717;
  border-radius: 25px;
  transition: .4s ease-in-out;
}

.form:hover {
  transform: scale(1.05);
  border: 1px solid black;
}

#heading {
  text-align: center;
  margin: 2em;
  color: rgb(255, 255, 255);
  font-size: 1.2em;
}

.field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border-radius: 25px;
  padding: 0.6em;
  border: none;
  outline: none;
  color: white;
  background-color: #171717;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
}

.input-icon {
  height: 1.3em;
  width: 1.3em;
  fill: white;
}

.input-field {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  color: #d3d3d3;
}

.form .btn {
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin-top: 2.5em;
}

.button1 {
  padding: 0.5em;
  padding-left: 1.1em;
  padding-right: 1.1em;
  border-radius: 5px;
  margin-right: 0.5em;
  border: none;
  outline: none;
  transition: .4s ease-in-out;
  background-color: #252525;
  color: white;
}

.button1:hover {
  background-color: black;
  color: white;
}

.button2 {
  padding: 0.5em;
  padding-left: 2.3em;
  padding-right: 2.3em;
  border-radius: 5px;
  border: none;
  outline: none;
  transition: .4s ease-in-out;
  background-color: #252525;
  color: white;
}

.button2:hover {
  background-color: black;
  color: white;
}

.button3 {
  margin-bottom: 3em;
  padding: 0.5em;
  border-radius: 5px;
  border: none;
  outline: none;
  transition: .4s ease-in-out;
  background-color: #252525;
  color: white;
}

.button3:hover {
  background-color: red;
  color: white;
}
</style>


================================================
FILE: Forms/Praashoo7_short-horse-99.html
================================================
<form class="form">
    <p class="heading">Login</p>
    <input class="input" placeholder="Username" type="text">
    <input class="input" placeholder="Password" type="text"> 
    <button class="btn">Submit</button>
</form>
<style>
/* From Uiverse.io by Praashoo7 - Tags: neumorphism, login, form */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: white;
  padding: 2.5em;
  border-radius: 25px;
  transition: .4s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 2px;
}

.form:hover {
  transform: translateX(-0.5em) translateY(-0.5em);
  border: 1px solid #171717;
  box-shadow: 10px 10px 0px #666666;
}

.heading {
  color: black;
  padding-bottom: 2em;
  text-align: center;
  font-weight: bold;
}

.input {
  border-radius: 5px;
  border: 1px solid whitesmoke;
  background-color: whitesmoke;
  outline: none;
  padding: 0.7em;
  transition: .4s ease-in-out;
}

.input:hover {
  box-shadow: 6px 6px 0px #969696,
             -3px -3px 10px #ffffff;
}

.input:focus {
  background: #ffffff;
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
}

.form .btn {
  margin-top: 2em;
  align-self: center;
  padding: 0.7em;
  padding-left: 1em;
  padding-right: 1em;
  border-radius: 10px;
  border: none;
  color: black;
  transition: .4s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px;
}

.form .btn:hover {
  box-shadow: 6px 6px 0px #969696,
             -3px -3px 10px #ffffff;
  transform: translateX(-0.5em) translateY(-0.5em);
}

.form .btn:active {
  transition: .2s;
  transform: translateX(0em) translateY(0em);
  box-shadow: none;
}
</style>


================================================
FILE: Forms/Praashoo7_slippery-treefrog-69.html
================================================
<form class="form">
  <p class="heading">Verify</p>
  <svg class="check" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px" viewBox="0 0 60 60" xml:space="preserve">  <image id="image0" width="60" height="60" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAQAAACQ9RH5AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
cwAACxMAAAsTAQCanBgAAAAHdElNRQfnAg0NDzN/r+StAAACR0lEQVRYw+3Yy2sTURTH8W+bNgVf
aGhFaxNiAoJou3FVEUQE1yL031BEROjCnf4PLlxILZSGYncuiiC48AEKxghaNGiliAojiBWZNnNd
xDza3pl77jyCyPzO8ubcT85wmUkG0qT539In+MwgoxQoUqDAKDn2kSNLlp3AGi4uDt9xWOUTK3xg
hVU2wsIZSkxwnHHGKZOxHKfBe6rUqFGlTkPaVmKGn6iYao1ZyhK2zJfY0FZ9ldBzsbMKxZwZjn/e
5szGw6UsD5I0W6T+hBhjUjiF7bNInjz37Ruj3igGABjbtpIo3GIh30u4ww5wr3fwfJvNcFeznhBs
YgXw70TYX2bY/ulkZhWfzfBbTdtrzjPFsvFI+T/L35jhp5q2owDs51VIVvHYDM9sa/LY8XdtKy1l
FXfM8FVN2/X2ajctZxVXzPA5TZvHpfb6CFXxkerUWTOcY11LX9w0tc20inX2mmF4qG3upnNWrOKB
hIXLPu3dF1x+kRWq6ysHpkjDl+7eQjatYoOCDIZF3006U0unVSxIWTgTsI3HNP3soSJkFaflMDwL
3OoHrph9YsPCJJ5466DyOGUHY3Epg2rWloUxnMjsNw7aw3AhMjwVhgW4HYm9FZaFQZ/bp6QeMRQe
hhHehWKXGY7CAuSpW7MfKUZlAUqWdJ3DcbAAB3guZl9yKC4WYLfmT4muFtgVJwvQx7T2t0mnXK6J
XlGGyAQvfNkaJ5JBmxnipubJ5HKDbJJsM0eY38QucSx5tJWTVHBwqDDZOzRNmn87fwDoyM4J2hRz
NgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMy0wMi0xM1QxMzoxNTo1MCswMDowMKC8JaoAAAAldEVY
dGRhdGU6bW9kaWZ5ADIwMjMtMDItMTNUMTM6MTU6NTArMDA6MDDR4Z0WAAAAKHRFWHRkYXRlOnRp
bWVzdGFtcAAyMDIzLTAyLTEzVDEzOjE1OjUxKzAwOjAwIIO3fQAAAABJRU5ErkJggg=="></image>
</svg>
  <div class="box">
  <input class="input" type="password" maxlength="1">
  <input class="input" type="password" maxlength="1"> 
  <input class="input" type="password" maxlength="1">
  <input class="input" type="password" maxlength="1">
  </div>
  <button class="btn1">Submit</button>
  <button class="btn2">Back</button>
</form>
<style>
/* From Uiverse.io by Praashoo7 - Tags: neumorphism, OTP, form */
.form {
  width: 290px;
  height: 380px;
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  background-color: white;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: .4s ease-in-out;
}

.form:hover {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  scale: 0.99;
}

.heading {
  position: relative;
  text-align: center;
  color: black;
  top: 3em;
  font-weight: bold;
}

.check {
  position: relative;
  align-self: center;
  top: 4em;
}

.input {
  position: relative;
  width: 2.5em;
  height: 2.5em;
  margin: 1em;
  border-radius: 5px;
  border: none;
  outline: none;
  background-color: rgb(235, 235, 235);
  box-shadow: inset 3px 3px 6px #d1d1d1,
            inset -3px -3px 6px #ffffff;
  top: 6.5em;
  left: 1.5em;
  padding-left: 15px;
  transition: .4s ease-in-out;
}

.input:hover {
  box-shadow: inset 0px 0px 0px #d1d1d1,
            inset 0px 0px 0px #ffffff;
  background-color: lightgrey;
}

.input:focus {
  box-shadow: inset 0px 0px 0px #d1d1d1,
            inset 0px 0px 0px #ffffff;
  background-color: lightgrey;
}

.btn1 {
  position: relative;
  top: 8.5em;
  left: 2.4em;
  width: 17em;
  height: 3em;
  border-radius: 5px;
  border: none;
  outline: none;
  transition: .4s ease-in-out;
  box-shadow: 1px 1px 3px #b5b5b5,
             -1px -1px 3px #ffffff;
}

.btn1:active {
  box-shadow: inset 3px 3px 6px #b5b5b5,
            inset -3px -3px 6px #ffffff;
}

.btn2 {
  position: relative;
  top: 9.5em;
  left: 2.4em;
  width: 17em;
  height: 3em;
  border-radius: 5px;
  border: none;
  outline: none;
  transition: .4s ease-in-out;
  box-shadow: 1px 1px 3px #b5b5b5,
             -1px -1px 3px #ffffff;
}

.btn2:active {
  box-shadow: inset 3px 3px 6px #b5b5b5,
            inset -3px -3px 6px #ffffff;
}
</style>


================================================
FILE: Forms/PriyanshuGupta28_good-dodo-80.html
================================================
  <div class="newsletter-form">
    <p class="heading"> Subscribe to Our Newsletter</p>
    <form class="form">
      <label for="email">Email:</label>
      <input required="" placeholder="Enter your email address" name="email" id="email" type="email">
      <input value="Subscribe" type="submit">
    </form>
  </div>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: form, subscriptions card, email card */
/* Unique styles for the newsletter form */
.newsletter-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 2px solid #333;
  border-radius: 8px;
  background-color: #f7f7f7;
  font-family: Arial, sans-serif;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.heading {
  font-weight: bold;
  font-size: 20px;
}

.newsletter-form h2 {
  margin-top: 0;
  color: #333;
  font-size: 24px;
}

.newsletter-form label {
  display: block;
  font-weight: bold;
  color: #666;
  margin-bottom: 10px;
}

.newsletter-form input[type="email"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.newsletter-form input[type="submit"] {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: #ff6600;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.newsletter-form input[type="submit"]:hover {
  background-color: #ff8533;
}
</style>


================================================
FILE: Forms/RashadGhzi_fat-husky-58.html
================================================
<!-- From Uiverse.io by RashadGhzi  - Tags: simple, social, form, modern, tailwindcss -->
<form class="bg-white w-[90vw] md:w-[50vw] p-6 rounded-lg shadow-md">
  <div class="mb-4">
    <label for="title" class="block text-gray-700 text-sm font-bold mb-2">
      Title
    </label>
    <input
      placeholder="Enter title"
      type="text"
      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
    />
  </div>
  <div class="mb-4">
    <label for="content" class="block text-gray-700 text-sm font-bold mb-2">
      Content
    </label>
    <textarea
      rows="5"
      placeholder="Enter your content"
      id="content"
      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
    ></textarea>
  </div>
  <div class="flex items-center justify-between">
    <button
      type="submit"
      class="bg-blue-500 text-sm hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
    >
      Post
    </button>
    <div class="flex items-center">
      <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current text-gray-700 mr-2">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
          <g
            stroke-linejoin="round"
            stroke-linecap="round"
            id="SVGRepo_tracerCarrier"
          ></g>
          <g id="SVGRepo_iconCarrier">
            <path
              fill="#0F0F0F"
              d="M23 4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V4ZM21 4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4Z"
              clip-rule="evenodd"
              fill-rule="evenodd"
            ></path>
            <path
              fill="#0F0F0F"
              d="M4.80665 17.5211L9.1221 9.60947C9.50112 8.91461 10.4989 8.91461 10.8779 9.60947L14.0465 15.4186L15.1318 13.5194C15.5157 12.8476 16.4843 12.8476 16.8682 13.5194L19.1451 17.5039C19.526 18.1705 19.0446 19 18.2768 19H5.68454C4.92548 19 4.44317 18.1875 4.80665 17.5211Z"
            ></path>
            <path
              fill="#0F0F0F"
              d="M18 8C18 9.10457 17.1046 10 16 10C14.8954 10 14 9.10457 14 8C14 6.89543 14.8954 6 16 6C17.1046 6 18 6.89543 18 8Z"
            ></path>
          </g>
        </svg>
      </svg>
      <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current text-gray-700 mr-2">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
          <g
            stroke-linejoin="round"
            stroke-linecap="round"
            id="SVGRepo_tracerCarrier"
          ></g>
          <g id="SVGRepo_iconCarrier">
            <path
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke-width="2"
              stroke="#000000"
              d="M3 9H21M7 3V5M17 3V5M6 13H8M6 17H8M11 13H13M11 17H13M16 13H18M16 17H18M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z"
            ></path>
          </g>
        </svg>
      </svg>
      <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current text-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
          <g
            stroke-linejoin="round"
            stroke-linecap="round"
            id="SVGRepo_tracerCarrier"
          ></g>
          <g id="SVGRepo_iconCarrier">
            <path
              stroke-width="1.5"
              stroke="#1C274C"
              d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z"
            ></path>
            <path
              stroke-linecap="round"
              stroke-width="1.5"
              stroke="#1C274C"
              d="M15 12L12 12M12 12L9 12M12 12L12 9M12 12L12 15"
            ></path>
          </g>
        </svg>
      </svg>
    </div>
  </div>
</form>


    

================================================
FILE: Forms/RashadGhzi_wise-crab-44.html
================================================
<!-- From Uiverse.io by RashadGhzi  - Tags: simple, form, input, modern -->
<main class="p-6">
  <form class="bg-white p-6 rounded-md shadow-md">
    <div class="flex items-center border border-gray-300 rounded-md">
      <button class="p-2 hover:bg-gray-100 focus:outline-none" type="button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          class="h-6 w-6 text-gray-600"
          viewBox="0 0 24 24"
        >
          <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
          <g
            stroke-linejoin="round"
            stroke-linecap="round"
            id="SVGRepo_tracerCarrier"
          ></g>
          <g id="SVGRepo_iconCarrier">
            <path
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke-width="2"
              stroke="#000000"
              d="M8 16L12 12M12 12L16 16M12 12V21M20 16.7428C21.2215 15.734 22 14.2079 22 12.5C22 9.46243 19.5376 7 16.5 7C16.2815 7 16.0771 6.886 15.9661 6.69774C14.6621 4.48484 12.2544 3 9.5 3C5.35786 3 2 6.35786 2 10.5C2 12.5661 2.83545 14.4371 4.18695 15.7935"
            ></path>
          </g>
        </svg>
      </button>

      <input
        class="flex-grow p-2 border-none focus:ring-0 focus:outline-none"
        placeholder="Enter your prompt..."
        type="text"
      />

      <button class="p-2 hover:bg-gray-100 focus:outline-none" type="submit">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          class="h-6 w-6 text-gray-600"
          viewBox="0 -0.5 25 25"
        >
          <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
          <g
            stroke-linejoin="round"
            stroke-linecap="round"
            id="SVGRepo_tracerCarrier"
          ></g>
          <g id="SVGRepo_iconCarrier">
            <path
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke-width="1.5"
              stroke="#000000"
              d="M18.455 9.8834L7.063 4.1434C6.76535 3.96928 6.40109 3.95274 6.08888 4.09916C5.77667 4.24558 5.55647 4.53621 5.5 4.8764C5.5039 4.98942 5.53114 5.10041 5.58 5.2024L7.749 10.4424C7.85786 10.7903 7.91711 11.1519 7.925 11.5164C7.91714 11.8809 7.85789 12.2425 7.749 12.5904L5.58 17.8304C5.53114 17.9324 5.5039 18.0434 5.5 18.1564C5.55687 18.4961 5.77703 18.7862 6.0889 18.9323C6.40078 19.0785 6.76456 19.062 7.062 18.8884L18.455 13.1484C19.0903 12.8533 19.4967 12.2164 19.4967 11.5159C19.4967 10.8154 19.0903 10.1785 18.455 9.8834V9.8834Z"
              clip-rule="evenodd"
              fill-rule="evenodd"
            ></path>
          </g>
        </svg>
      </button>
    </div>
  </form>
</main>


    

================================================
FILE: Forms/SelfMadeSystem_pretty-snake-70.html
================================================
<div class="form-container">
  <input checked="" type="checkbox" id="switch" />
  <div class="sign-up-container">
    <span class="form-title">Sign Up</span>
    <label for="switch" class="switch-label">Already have an account?</label>
    <form class="sign-up-form">
      <label for="username-sign-up">Username</label>
      <input
        class="input"
        placeholder="Jonathon"
        id="username-sign-up"
        name="Username"
        type="text"
      />
      <label for="email-sign-up">Email</label>
      <input
        class="input"
        placeholder="jonny_doe@example.com"
        id="email-sign-up"
        name="Email"
        type="email"
      />
      <label for="pwd-sign-up">Password</label>
      <input
        class="input"
        placeholder="••••••••"
        id="pwd-sign-up"
        name="Password"
        type="password"
      />
      <label for="confirm-pwd-sign-up">Confirm Password</label>
      <input
        class="input"
        placeholder="••••••••"
        id="confirm-pwd-sign-up"
        name="Password"
        type="password"
      />
      <button>Sign Up</button>
    </form>
  </div>
  <div class="log-in-container">
    <span class="form-title">Login</span>
    <label for="switch" class="switch-label">Don't have an account?</label>
    <form class="log-in-form">
      <label for="email-log-in">Email</label>
      <input
        class="input"
        placeholder="jonny_doe@example.com"
        id="email-log-in"
        name="Email"
        type="email"
      />
      <label for="pwd-log-in">Password</label>
      <input
        class="input"
        placeholder="••••••••"
        id="pwd-log-in"
        name="Password"
        type="password"
      />
      <a class="forgot-pwd">Forgot password?</a>
      <button>Login</button>
      <div class="social-message">
        <div class="line"></div>
        <p class="message">Login with social accounts</p>
        <div class="line"></div>
      </div>
      <div class="social-icons">
        <button aria-label="Log in with Google" class="icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 32 32"
            class="w-5 h-5 fill-current"
          >
            <path
              d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"
            ></path>
          </svg>
        </button>
        <button aria-label="Log in with Twitter" class="icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 32 32"
            class="w-5 h-5 fill-current"
          >
            <path
              d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.891 3.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"
            ></path>
          </svg>
        </button>
        <button aria-label="Log in with GitHub" class="icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 32 32"
            class="w-5 h-5 fill-current"
          >
            <path
              d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"
            ></path>
          </svg>
        </button>
      </div>
    </form>
  </div>
</div>

<style>
/* From Uiverse.io by SelfMadeSystem  - Tags: simple, animation, login, purple, form, card, sign-up */
.form-container {
  position: relative;
  perspective: 50rem;
  width: 50rem;
  height: 50rem;
}

#switch {
  display: none;
}

.sign-up-form,
.log-in-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sign-up-container,
.log-in-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  inset: 0;
  margin: auto;
  width: 20rem;
  height: 20rem;
  background: #2c164f;
  color: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
}

.switch-label {
  font-size: x-small;
  text-decoration: underline;
  cursor: pointer;
}

.form-title {
  font-size: x-large;
  font-weight: bold;
}

:where(.sign-up-form, .log-in-form) label {
  font-size: x-small;
  padding-top: 0.5rem;
  padding-left: 0.25rem;
}

:where(.sign-up-form, .log-in-form) input {
  background-color: #fff2;
  box-sizing: border-box;
  color: white;
  border: 0;
  border-bottom: 2px solid #cfb2ff;
  padding: 0.25rem;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

:where(.sign-up-form, .log-in-form) input:focus-visible {
  outline: none;
  border: 1px solid white;
  border-bottom: 2px solid #cfb2ff;
}

:where(.sign-up-form, .log-in-form) button {
  margin-top: auto;
  background-color: #ffffff4b;
  color: white;
  border: 0;
  padding: 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.forgot-pwd {
  font-size: x-small;
  text-decoration: underline;
  margin-left: auto;
  cursor: pointer;
}

/* Social yoinked from uiverse.io/Yaya12085/short-panda-24 */

.social-message {
  display: flex;
  align-items: center;
  padding-top: 1rem;
}

.line {
  height: 1px;
  flex: 1 1 0%;
  background-color: #cfb2ff;
}

.social-message .message {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #fff;
}

.social-icons {
  display: flex;
  justify-content: center;
}

.social-icons .icon {
  border-radius: 0.125rem;
  padding: 0.75rem;
  padding-bottom: 0.25rem;
  border: none;
  background-color: transparent;
  margin-left: 8px;
  cursor: pointer;
}

.social-icons .icon svg {
  height: 1.25rem;
  width: 1.25rem;
  fill: #fff;
}

.sign-up-container {
  animation: hello 0.5s linear forwards;
}

.log-in-container {
  animation: unhello 0.5s linear forwards;
}

#switch:checked ~ .sign-up-container {
  animation: unhello 0.5s linear forwards;
}

#switch:checked ~ .log-in-container {
  animation: hello 0.5s linear forwards;
}

@keyframes hello {
  0% {
    transform: rotateY(-90deg);
    display: none;
  }
  50% {
    transform: rotateY(-90deg);
    display: flex;
  }
  100% {
    transform: rotateY(0deg);
    display: flex;
  }
}

@keyframes unhello {
  0% {
    transform: rotateY(0deg);
    display: flex;
  }
  50% {
    transform: rotateY(90deg);
    display: flex;
  }
  100% {
    transform: rotateY(90deg);
    display: none;
  }
}

</style>
    

================================================
FILE: Forms/Shamaun-Nabi_sour-fireant-94.html
================================================
<!-- From Uiverse.io by Shamaun-Nabi  - Website: https://www.devui.io/components/signin - Name: Dev ui - Tags: simple, form, light -->
<div class="">
  <section class="rounded-md p-2 bg-white">
    <div class="flex items-center justify-center my-3">
      <div class="xl:mx-auto shadow-md p-4 xl:w-full xl:max-w-sm 2xl:max-w-md">
        <div class="mb-2"></div>
        <h2 class="text-2xl font-bold leading-tight">
          Sign up to create account
        </h2>
        <p class="mt-2 text-base text-gray-600">
          Already have an account? Sign In
        </p>
        <form class="mt-5">
          <div class="space-y-4">
            <div>
              <label class="text-base font-medium text-gray-900">
                User Name
              </label>
              <div class="mt-2">
                <input
                  placeholder="Full Name"
                  type="text"
                  class="flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
                  name="user_name"
                />
              </div>
            </div>
            <div>
              <label class="text-base font-medium text-gray-900">
                Email address
              </label>
              <div class="mt-2">
                <input
                  placeholder="Email"
                  type="email"
                  class="flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
                  name="email"
                />
              </div>
            </div>
            <div>
              <div class="flex items-center justify-between">
                <label class="text-base font-medium text-gray-900">
                  Password
                </label>
              </div>
              <div class="mt-2">
                <input
                  placeholder="Password"
                  type="password"
                  class="flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
                  name="password"
                />
              </div>
              <div class="flex items-center justify-between mt-3">
                <label class="text-base font-medium text-gray-900">
                  Profile Picture
                </label>
              </div>
              <div class="mt-2">
                <input
                  class="file-input w-full max-w-xs"
                  type="file"
                  name="avatar"
                />
              </div>
            </div>
            <div>
              <button
                class="inline-flex w-full items-center justify-center rounded-md bg-black px-3.5 py-2.5 font-semibold leading-7 text-white hover:bg-black/80"
                type="button"
              >
                Create Account
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </section>
</div>


    

================================================
FILE: Forms/Shamaun-Nabi_stupid-elephant-53.html
================================================
<!-- From Uiverse.io by Shamaun-Nabi  - Tags: simple, login, form, sign-up, login , login form -->
<section>
  <div
    class="flex bg-white items-center justify-center px-4 py-10 sm:px-6 sm:py-16 lg:px-8 lg:py-8"
  >
    <div class="xl:mx-auto xl:w-full shadow-md p-4 xl:max-w-sm 2xl:max-w-md">
      <div class="mb-2 flex justify-center"></div>
      <h2 class="text-center text-2xl font-bold leading-tight text-black">
        Sign in to your account
      </h2>
      <p class="mt-2 text-center text-sm text-gray-600">
        Don't have an account? Create a free account
      </p>
      <form class="mt-8" method="POST" action="#">
        <div class="space-y-5">
          <div>
            <label class="text-base font-medium text-gray-900">
              Email address
            </label>
            <div class="mt-2">
              <input
                placeholder="Email"
                type="email"
                class="flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
              />
            </div>
          </div>
          <div>
            <div class="flex items-center justify-between">
              <label class="text-base font-medium text-gray-900">
                Password
              </label>
              <a
                class="text-sm font-semibold text-black hover:underline"
                title=""
                href="#"
              >
                Forgot password?
              </a>
            </div>
            <div class="mt-2">
              <input
                placeholder="Password"
                type="password"
                class="flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
              />
            </div>
          </div>
          <div>
            <button
              class="inline-flex w-full items-center justify-center rounded-md bg-black px-3.5 py-2.5 font-semibold leading-7 text-white hover:bg-black/80"
              type="button"
            >
              Get started
            </button>
          </div>
        </div>
      </form>
      <div class="mt-3 space-y-3">
        <button
          class="relative inline-flex w-full items-center justify-center rounded-md border border-gray-400 bg-white px-3.5 py-2.5 font-semibold text-gray-700 transition-all duration-200 hover:bg-gray-100 hover:text-black focus:bg-gray-100 focus:text-black focus:outline-none"
          type="button"
        >
          <span class="mr-2 inline-block">
            <svg
              fill="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6 text-rose-500"
            >
              <path
                d="M20.283 10.356h-8.327v3.451h4.792c-.446 2.193-2.313 3.453-4.792 3.453a5.27 5.27 0 0 1-5.279-5.28 5.27 5.27 0 0 1 5.279-5.279c1.259 0 2.397.447 3.29 1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233a8.908 8.908 0 0 0-8.934 8.934 8.907 8.907 0 0 0 8.934 8.934c4.467 0 8.529-3.249 8.529-8.934 0-.528-.081-1.097-.202-1.625z"
              ></path>
            </svg>
          </span>
          Sign in with Google
        </button>
      </div>
    </div>
  </div>
</section>


    

================================================
FILE: Forms/Shoh2008_gentle-goat-33.html
================================================
    <div class="form">
      <div class="subtitle">Let's create your account!</div>
      <div class="input-container ic1">
        <input id="firstname" class="input" type="text" placeholder="">
        <div class="cut"></div>
        <label for="firstname" class="placeholder">First name</label>
      </div>
      <div class="input-container ic2">
        <input id="lastname" class="input" type="text" placeholder="">
        <div class="cut"></div>
        <label for="lastname" class="placeholder">Last name</label>
      </div>
      <div class="input-container ic2">
        <input id="email" class="input" type="text" placeholder="">
        <div class="cut cut-short"></div>
        <label for="email" class="placeholder">Email
      </label></div>
      <button type="text" class="submit">submit</button>
    </div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: form */
.form {
  background-color: #15172b;
  border-radius: 20px;
  box-sizing: border-box;
  height: 350px;
  padding: 20px;
  width: 320px;
}

.title {
  color: #eee;
  font-family: sans-serif;
  font-size: 36px;
  font-weight: 600;
}

.subtitle {
  color: #eee;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.input-container {
  height: 40px;
  position: relative;
  width: 100%;
}

.ic1 {
  margin-top: 20px;
}

.ic2 {
  margin-top: 30px;
}

.input {
  background-color: #303245;
  border-radius: 12px;
  border: 0;
  box-sizing: border-box;
  color: #eee;
  font-size: 18px;
  height: 40px;
  outline: 0;
  padding: 4px 10px 0;
  width: 100%;
}

.cut {
  background-color: #15172b;
  border-radius: 10px;
  height: 10px;
  left: 20px;
  position: absolute;
  top: -20px;
  transform: translateY(0);
  transition: transform 200ms;
  width: 76px;
}

.cut-short {
  width: 30px;
}

.input:focus ~ .cut,
.input:not(:placeholder-shown) ~ .cut {
  transform: translateY(8px);
}

.placeholder {
  color: #65657b;
  font-family: sans-serif;
  left: 20px;
  line-height: 14px;
  pointer-events: none;
  position: absolute;
  transform-origin: 0 50%;
  transition: transform 200ms, color 200ms;
  top: 20px;
}

.input:focus ~ .placeholder,
.input:not(:placeholder-shown) ~ .placeholder {
  transform: translateY(-30px) translateX(10px) scale(0.75);
}

.input:not(:placeholder-shown) ~ .placeholder {
  color: #808097;
}

.input:focus ~ .placeholder {
  color: #dc2f55;
}

.submit {
  background-color: #08d;
  border-radius: 12px;
  border: 0;
  box-sizing: border-box;
  color: #eee;
  cursor: pointer;
  font-size: 18px;
  height: 50px;
  margin-top: 38px;
  text-align: center;
  width: 100%;
}

.submit:active {
  background-color: #06b;
}

</style>


================================================
FILE: Forms/Shoh2008_stale-wasp-53.html
================================================
<form class="form">
Sign Up
    <input type="text" class="input" placeholder="Name">
    <input type="text" class="input" placeholder="Password"> 
    <button>Submit</button>
</form>
<style>
/* From Uiverse.io by Shoh2008 - Tags: form, sign-up */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #1e1e1e;
  padding: 20px;
  border: 1px solid #3d3c3c;
  border-radius: 10px;
  color: white;
  text-align: center;
  font-size: 20px;
}

.form input {
  height: 35px;
  outline: none;
  border: 2px solid orange;
  background: transparent;
  padding: 20px 10px;
  border-radius: 5px;
  transition: .5s;
  color: white;
  font-size: 20px;
}

.form input:focus {
  background: orange;
}

.form button {
  width: 100%;
  color: white;
  transition: .5s;
  font-size: 20px;
  outline: none;
  border: none;
  height: 45px;
  border-radius: 5px;
  background: orange;
  align-self: flex-end;
}
    
</style>


================================================
FILE: Forms/Smit-Prajapati_black-cheetah-92.html
================================================

<div class="form-container">
    <div class="form">
        <span class="heading">Get in touch</span>
        <input placeholder="Name" type="text" class="input">
        <input placeholder="Email" id="mail" type="email" class="input">
        <textarea placeholder="Say Hello" rows="10" cols="30" id="message" name="message" class="textarea"></textarea>
        <div class="button-container">
        <div class="send-button">Send</div>
        <div class="reset-button-container">
            <div id="reset-btn" class="reset-button">Reset</div>
        </div>
    </div>
</div>
</div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: form, contacts form, coolform */
.orange {
  color: #ff7a01;
}

.form-container {
  max-width: 700px;
  margin: 30px;
  background-color: #001925;
  padding: 30px;
  border-left: 5px solid #ff7a01;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

.heading {
  display: block;
  color: white;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 20px;
}

.form-container .form .input {
  color: #87a4b6;
  width: 100%;
  background-color: #002733;
  border: none;
  outline: none;
  padding: 10px;
  margin-bottom: 20px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  border-left: 1px solid transparent;
}

.form-container .form .input:focus {
  border-left: 5px solid #ff7a01;
}

.form-container .form .textarea {
  width: 100%;
  padding: 10px;
  border: none;
  outline: none;
  background-color: #013747;
  color: #ff7a01;
  font-weight: bold;
  resize: none;
  max-height: 150px;
  margin-bottom: 20px;
  border-left: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}

.form-container .form .textarea:focus {
  border-left: 5px solid #ff7a01;
}

.form-container .form .button-container {
  display: flex;
  gap: 10px;
}

.form-container .form .button-container .send-button {
  flex-basis: 70%;
  background: #ff7a01;
  padding: 10px;
  color: #001925;
  text-align: center;
  font-weight: bold;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}

.form-container .form .button-container .send-button:hover {
  background: transparent;
  border: 1px solid #ff7a01;
  color: #ff7a01;
}

.form-container .form .button-container .reset-button-container {
  filter: drop-shadow(1px 1px 0px #ff7a01);
  flex-basis: 30%;
}

.form-container .form .button-container .reset-button-container .reset-button {
  position: relative;
  text-align: center;
  padding: 10px;
  color: #ff7a01;
  font-weight: bold;
  background: #001925;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: all 0.2s ease-in-out;
}

.form-container .form .button-container .reset-button-container .reset-button:hover {
  background: #ff7a01;
  color: #001925;
}
</style>


================================================
FILE: Forms/Smit-Prajapati_swift-liger-76.html
================================================
<div class="container">
    <div class="heading">Sign In</div>
    <form action="" class="form">
      <input required="" class="input" type="email" name="email" id="email" placeholder="E-mail">
      <input required="" class="input" type="password" name="password" id="password" placeholder="Password">
      <span class="forgot-password"><a href="#">Forgot Password ?</a></span>
      <input class="login-button" type="submit" value="Sign In">
      
    </form>
    <div class="social-account-container">
        <span class="title">Or Sign in with</span>
        <div class="social-accounts">
          <button class="social-button google">
            <svg class="svg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 488 512">
              <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"></path>
            </svg></button>
          <button class="social-button apple">
            <svg class="svg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512">
              <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"></path>
            </svg>
          </button>
          <button class="social-button twitter">
            <svg class="svg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
              <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
            </svg>
          </button>
        </div>
      </div>
      <span class="agreement"><a href="#">Learn user licence agreement</a></span>
  </div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: form, login form, simple form, loginform, coolform */
.container {
  max-width: 350px;
  background: #F8F9FD;
  background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(244, 247, 251) 100%);
  border-radius: 40px;
  padding: 25px 35px;
  border: 5px solid rgb(255, 255, 255);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;
  margin: 20px;
}

.heading {
  text-align: center;
  font-weight: 900;
  font-size: 30px;
  color: rgb(16, 137, 211);
}

.form {
  margin-top: 20px;
}

.form .input {
  width: 100%;
  background: white;
  border: none;
  padding: 15px 20px;
  border-radius: 20px;
  margin-top: 15px;
  box-shadow: #cff0ff 0px 10px 10px -5px;
  border-inline: 2px solid transparent;
}

.form .input::-moz-placeholder {
  color: rgb(170, 170, 170);
}

.form .input::placeholder {
  color: rgb(170, 170, 170);
}

.form .input:focus {
  outline: none;
  border-inline: 2px solid #12B1D1;
}

.form .forgot-password {
  display: block;
  margin-top: 10px;
  margin-left: 10px;
}

.form .forgot-password a {
  font-size: 11px;
  color: #0099ff;
  text-decoration: none;
}

.form .login-button {
  display: block;
  width: 100%;
  font-weight: bold;
  background: linear-gradient(45deg, rgb(16, 137, 211) 0%, rgb(18, 177, 209) 100%);
  color: white;
  padding-block: 15px;
  margin: 20px auto;
  border-radius: 20px;
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;
  border: none;
  transition: all 0.2s ease-in-out;
}

.form .login-button:hover {
  transform: scale(1.03);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px;
}

.form .login-button:active {
  transform: scale(0.95);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px;
}

.social-account-container {
  margin-top: 25px;
}

.social-account-container .title {
  display: block;
  text-align: center;
  font-size: 10px;
  color: rgb(170, 170, 170);
}

.social-account-container .social-accounts {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 5px;
}

.social-account-container .social-accounts .social-button {
  background: linear-gradient(45deg, rgb(0, 0, 0) 0%, rgb(112, 112, 112) 100%);
  border: 5px solid white;
  padding: 5px;
  border-radius: 50%;
  width: 40px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 12px 10px -8px;
  transition: all 0.2s ease-in-out;
}

.social-account-container .social-accounts .social-button .svg {
  fill: white;
  margin: auto;
}

.social-account-container .social-accounts .social-button:hover {
  transform: scale(1.2);
}

.social-account-container .social-accounts .social-button:active {
  transform: scale(0.9);
}

.agreement {
  display: block;
  text-align: center;
  margin-top: 15px;
}

.agreement a {
  text-decoration: none;
  color: #0099ff;
  font-size: 9px;
}
</style>


================================================
FILE: Forms/SmookyDev_curly-jellyfish-22.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: glassmorphism, flashy, animation, form, hover, login form, tailwind -->
<div
  class="form w-[300px] rounded-md shadow-xl overflow-hidden z-[100] relative cursor-pointer snap-start shrink-0 py-5 px-6 bg-[#DFA16A] r flex flex-col items-center justify-center gap-3 transition-all duration-300"
>
  <p
    class="text-[#A15A3E] translate-x-[46%] -rotate-90 tracking-[20px] transition-all hover:translate-x-[50%] -translate-y-1/2 font-semibold text-2xl absolute right-0"
  >
    Welcome
  </p>

  <div class="capitalize">
    <p class="text-2xl text-[#7F3D27] pb-5">Create Your Account</p>
    <form action="" class="flex flex-col gap-3">
      <div class="flex flex-col items-start w-full">
        <label for="name" class="text-sm text-[#7F3D27] font-semibold"
          >Name</label
        >
        <input
          type="text"
          placeholder="Enter Your Name"
          class="w-full py-px pl-0 bg-transparent outline-none focus:ring-0 border-0 border-b-2 border-[#7F3D27] placeholder:text-[#A15A3E] focus:outline-none text-[#7F3D27] placeholder:text-xs"
        />
      </div>

      <div class="flex flex-col items-start w-full">
        <label for="email" class="text-sm text-[#7F3D27] font-semibold"
          >Email</label
        >
        <input
          type="email"
          placeholder="Enter Your Email"
          class="w-full py-px pl-0 bg-transparent outline-none focus:ring-0 border-0 border-b-2 border-[#7F3D27] placeholder:text-[#A15A3E] focus:outline-none text-[#7F3D27] placeholder:text-xs"
        />
      </div>

      <div class="flex flex-col items-start w-full">
        <label for="password" class="text-sm text-[#7F3D27] font-semibold"
          >Password</label
        >
        <input
          type="password"
          placeholder="Enter Your Password"
          class="w-full py-px pl-0 bg-transparent outline-none focus:ring-0 border-0 border-b-2 border-[#7F3D27] placeholder:text-[#A15A3E] focus:outline-none text-[#7F3D27] placeholder:text-xs"
        />
      </div>

      <div class="inline-flex gap-2 items-center text-[#A15A3E]">
        <input
          type="checkbox"
          name=""
          id=""
          class="w-3 h-3 focus:border-0 focus:outline-none focus:accent-[#7F3D27] checked:accent-[#A15A3E] checked:text-[#A15A3E] px-1 py-1"
          checked=""
        />
        <p class="text-xs">
          By Signing Agree with
          <span class="font-semibold">Term &amp; Policy</span>
        </p>
      </div>

      <div class="inline-flex gap-5">
        <button
          class="px-6 focus:outline-none focus:scale-110 font-semibold text-xs py-2 rounded-[5px] hover:scale-110 transition-all hover:transiton text-[#D9D9D9] bg-[#7F3D27] shadow-[#7F3D27] shadow-lg"
        >
          Sign Up
        </button>
        <button
          class="px-6 focus:outline-none focus:scale-110 font-semibold text-xs py-2 rounded-[5px] hover:scale-110 transition-all hover:transiton text-[#7F3D27] bg-[#D9D9D9] shadow-[#7F3D27] shadow-lg"
        >
          Sign In
        </button>
      </div>
    </form>
  </div>
</div>


    

================================================
FILE: Forms/SmookyDev_witty-treefrog-29.html
================================================
<!-- From Uiverse.io by SmookyDev - Tags: icon, form, login form, tailwind -->
<div class="h-screen w-full">
  <div class="h-full w-full flex items-center justify-center">
    <div class="h-full w-full">
      <div
        class="flex flex-col hover:blur-0 h-full bg-center bg-cover items-center justify-center w-full gap-5 bg-gradient-to-tr from-violet-700 to-violet-500"
      >
        <h1 class="my-6">
          <svg
            viewBox="0 0 247 31"
            class="w-auto h-7 sm:h-8 inline-flex text-white"
          >
            <path
              fill="white"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M25.517 0C18.712 0 14.46 3.382 12.758 10.146c2.552-3.382 5.529-4.65 8.931-3.805 1.941.482 3.329 1.882 4.864 3.432 2.502 2.524 5.398 5.445 11.722 5.445 6.804 0 11.057-3.382 12.758-10.145-2.551 3.382-5.528 4.65-8.93 3.804-1.942-.482-3.33-1.882-4.865-3.431C34.736 2.92 31.841 0 25.517 0zM12.758 15.218C5.954 15.218 1.701 18.6 0 25.364c2.552-3.382 5.529-4.65 8.93-3.805 1.942.482 3.33 1.882 4.865 3.432 2.502 2.524 5.397 5.445 11.722 5.445 6.804 0 11.057-3.381 12.758-10.145-2.552 3.382-5.529 4.65-8.931 3.805-1.941-.483-3.329-1.883-4.864-3.432-2.502-2.524-5.398-5.446-11.722-5.446z"
            ></path>
            <path
              fill="white"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M76.546 12.825h-4.453v8.567c0 2.285 1.508 2.249 4.453 2.106v3.463c-5.962.714-8.332-.928-8.332-5.569v-8.567H64.91V9.112h3.304V4.318l3.879-1.143v5.937h4.453v3.713zM93.52 9.112h3.878v17.849h-3.878v-2.57c-1.365 1.891-3.484 3.034-6.285 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.285 2.999V9.112zm-5.674 14.636c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm16.016-17.313c-1.364 0-2.477-1.142-2.477-2.463a2.475 2.475 0 012.477-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.879v17.849h-3.879zm8.368 0V.9h3.878v26.06h-3.878zm29.053-17.849h4.094l-5.638 17.849h-3.807l-3.735-12.03-3.771 12.03h-3.806l-5.639-17.849h4.094l3.484 12.315 3.771-12.315h3.699l3.734 12.315 3.52-12.315zm8.906-2.677c-1.365 0-2.478-1.142-2.478-2.463a2.475 2.475 0 012.478-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.878v17.849h-3.878zm17.812-18.313c4.022 0 6.895 2.713 6.895 7.354V26.96h-3.878V16.394c0-2.713-1.58-4.14-4.022-4.14-2.55 0-4.561 1.499-4.561 5.14v9.567h-3.879V9.112h3.879v2.285c1.185-1.856 3.124-2.749 5.566-2.749zm25.282-6.675h3.879V26.96h-3.879v-2.57c-1.364 1.892-3.483 3.034-6.284 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.284 2.999V1.973zm-5.674 21.775c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm22.553 3.677c-5.423 0-9.481-4.105-9.481-9.389 0-5.318 4.058-9.388 9.481-9.388 3.519 0 6.572 1.82 8.008 4.605l-3.34 1.928c-.79-1.678-2.549-2.749-4.704-2.749-3.16 0-5.566 2.392-5.566 5.604 0 3.213 2.406 5.605 5.566 5.605 2.155 0 3.914-1.107 4.776-2.749l3.34 1.892c-1.508 2.82-4.561 4.64-8.08 4.64zm14.472-13.387c0 3.249 9.661 1.285 9.661 7.89 0 3.57-3.125 5.497-7.003 5.497-3.591 0-6.177-1.607-7.326-4.177l3.34-1.927c.574 1.606 2.011 2.57 3.986 2.57 1.724 0 3.052-.571 3.052-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.909-5.462 6.572-5.462 2.945 0 5.387 1.357 6.644 3.713l-3.268 1.82c-.647-1.392-1.904-2.035-3.376-2.035-1.401 0-2.622.607-2.622 1.892zm16.556 0c0 3.249 9.66 1.285 9.66 7.89 0 3.57-3.124 5.497-7.003 5.497-3.591 0-6.176-1.607-7.326-4.177l3.34-1.927c.575 1.606 2.011 2.57 3.986 2.57 1.724 0 3.053-.571 3.053-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.908-5.462 6.572-5.462 2.944 0 5.386 1.357 6.643 3.713l-3.268 1.82c-.646-1.392-1.903-2.035-3.375-2.035-1.401 0-2.622.607-2.622 1.892z"
            ></path>
          </svg>
        </h1>
        <ul class="inline-flex items-center text-xl gap-10">
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="p-3 border-white text-violet-500 rounded-full border hover:scale-110 transition-all hover:bg-vifrom-violet-700 hover:text-white"
              x="0px"
              y="0px"
              viewBox="0,0,256,256"
            >
              <g
                fill="white"
                fill-rule="nonzero"
                stroke="none"
                stroke-width="1"
                stroke-linecap="butt"
                stroke-linejoin="miter"
                stroke-miterlimit="10"
                stroke-dasharray=""
                stroke-dashoffset="0"
                font-family="none"
                font-weight="none"
                font-size="none"
                text-anchor="none"
                style="mix-blend-mode: normal"
              >
                <g transform="scale(8.53333,8.53333)">
                  <path
                    d="M15.00391,3c-6.629,0 -12.00391,5.373 -12.00391,12c0,6.627 5.37491,12 12.00391,12c10.01,0 12.26517,-9.293 11.32617,-14h-1.33008h-2.26758h-7.73242v4h7.73828c-0.88958,3.44825 -4.01233,6 -7.73828,6c-4.418,0 -8,-3.582 -8,-8c0,-4.418 3.582,-8 8,-8c2.009,0 3.83914,0.74575 5.24414,1.96875l2.8418,-2.83984c-2.134,-1.944 -4.96903,-3.12891 -8.08203,-3.12891z"
                  ></path>
                </g>
              </g>
            </svg>
          </li>
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="p-3 border-white text-violet-500 rounded-full border hover:scale-110 transition-all hover:bg-vifrom-violet-700 hover:text-white"
              x="0px"
              y="0px"
              viewBox="0,0,256,256"
            >
              <g
                fill="white"
                fill-rule="nonzero"
                stroke="none"
                stroke-width="1"
                stroke-linecap="butt"
                stroke-linejoin="miter"
                stroke-miterlimit="10"
                stroke-dasharray=""
                stroke-dashoffset="0"
                font-family="none"
                font-weight="none"
                font-size="none"
                text-anchor="none"
                style="mix-blend-mode: normal"
              >
                <g transform="scale(8.53333,8.53333)">
                  <path
                    d="M15,3c-6.627,0 -12,5.373 -12,12c0,6.016 4.432,10.984 10.206,11.852v-8.672h-2.969v-3.154h2.969v-2.099c0,-3.475 1.693,-5 4.581,-5c1.383,0 2.115,0.103 2.461,0.149v2.753h-1.97c-1.226,0 -1.654,1.163 -1.654,2.473v1.724h3.593l-0.487,3.154h-3.106v8.697c5.857,-0.794 10.376,-5.802 10.376,-11.877c0,-6.627 -5.373,-12 -12,-12z"
                  ></path>
                </g>
              </g>
            </svg>
          </li>
          <li>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="p-3 border-white text-violet-500 rounded-full border hover:scale-110 transition-all hover:bg-vifrom-violet-700 hover:text-white"
              x="0px"
              y="0px"
              viewBox="0,0,256,256"
            >
              <g
                fill="white"
                fill-rule="nonzero"
                stroke="none"
                stroke-width="1"
                stroke-linecap="butt"
                stroke-linejoin="miter"
                stroke-miterlimit="10"
                stroke-dasharray=""
                stroke-dashoffset="0"
                font-family="none"
                font-weight="none"
                font-size="none"
                text-anchor="none"
                style="mix-blend-mode: normal"
              >
                <g transform="scale(8.53333,8.53333)">
                  <path
                    d="M15,3c-6.627,0 -12,5.373 -12,12c0,5.623 3.872,10.328 9.092,11.63c-0.056,-0.162 -0.092,-0.35 -0.092,-0.583v-2.051c-0.487,0 -1.303,0 -1.508,0c-0.821,0 -1.551,-0.353 -1.905,-1.009c-0.393,-0.729 -0.461,-1.844 -1.435,-2.526c-0.289,-0.227 -0.069,-0.486 0.264,-0.451c0.615,0.174 1.125,0.596 1.605,1.222c0.478,0.627 0.703,0.769 1.596,0.769c0.433,0 1.081,-0.025 1.691,-0.121c0.328,-0.833 0.895,-1.6 1.588,-1.962c-3.996,-0.411 -5.903,-2.399 -5.903,-5.098c0,-1.162 0.495,-2.286 1.336,-3.233c-0.276,-0.94 -0.623,-2.857 0.106,-3.587c1.798,0 2.885,1.166 3.146,1.481c0.896,-0.307 1.88,-0.481 2.914,-0.481c1.036,0 2.024,0.174 2.922,0.483c0.258,-0.313 1.346,-1.483 3.148,-1.483c0.732,0.731 0.381,2.656 0.102,3.594c0.836,0.945 1.328,2.066 1.328,3.226c0,2.697 -1.904,4.684 -5.894,5.097c1.098,0.573 1.899,2.183 1.899,3.396v2.734c0,0.104 -0.023,0.179 -0.035,0.268c4.676,-1.639 8.035,-6.079 8.035,-11.315c0,-6.627 -5.373,-12 -12,-12z"
                  ></path>
                </g>
              </g>
            </svg>
          </li>
        </ul>
        <p class="text-white text-right">or use email your account</p>
        <input
          type="email"
          name=""
          id=""
          class="bg-white/50 hover:bg-white md:bg-white placeholder:text-violet-500 placeholder:text-sm text-violet-500 py-3 px-5 focus:text-violet-500 focus:outline focus:outline-offset-1 focus:outline-violet-500 rounded-md"
          placeholder="Enter Your Email Here!"
        />
        <input
          type="password"
          name=""
          id=""
          class="bg-white/50 hover:bg-white md:bg-white placeholder:text-violet-500 placeholder:text-sm text-violet-500 py-3 px-5 focus:text-violet-500 focus:outline focus:outline-offset-1 focus:outline-violet-500 rounded-md"
          placeholder="Enter Your Password Here!"
        />
        <div class="text-right">
          <a
            href=""
            class="italic text-white/50 text-sm underline decoration-violet-500 text-violet-500 hover:text-white hover:text-violet-700 transition"
            >Forget your Password?</a
          >
        </div>
        <button
          class="px-6 py-2 bg-violet-500 rounded hover:bg-white hover:text-violet-700 font-semibold transition-all text-white hover:scale-110"
        >
          Submit
        </button>
      </div>
    </div>
  </div>
</div>




================================================
FILE: Forms/Spacious74_selfish-dragon-64.html
================================================
<div class="container">
  <div class="heading">SignIn to your account</div>
  <form class="form" action="">
    <div class="input-field">
      <input
        required=""
        autocomplete="off"
        type="text"
        name="text"
        id="username"
      />
      <label for="username">Full Name</label>
    </div>
    <div class="input-field">
      <input
        required=""
        autocomplete="off"
        type="email"
        name="email"
        id="email"
      />
      <label for="email">Email</label>
    </div>
    <div class="input-field">
      <input
        required=""
        autocomplete="off"
        type="password"
        name="text"
        id="password"
      />
      <label for="username">Password</label>
    </div>

    <div class="btn-container">
      <button class="btn">Submit</button>
      <div class="acc-text">
        New here ?
        <span style="color : #0000ff; cursor : pointer;">Create Account</span>
      </div>
    </div>
  </form>
</div>

<style>
/* From Uiverse.io by Spacious74  - Tags: simple, login, subscription, email, minimalist, form, register, signin */
.container {
  border: solid 1px #8d8d8d;
  padding: 20px;
  border-radius: 20px;
  background-color: #fff;
}

.container .heading {
  font-size: 1.3rem;
  margin-bottom: 20px;
  font-weight: bolder;
}

.form {
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form .btn-container {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.form .btn {
  padding: 10px 20px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  border-radius: 10px;
  border: solid 1px #1034aa;
  border-bottom: solid 1px #90c2ff;
  background: linear-gradient(135deg, #0034de, #006eff);
  color: #fff;
  font-weight: bolder;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 3px #000d3848, inset 0px 4px 5px #0070f0,
    inset 0px -4px 5px #002cbb;
}

.form .btn:active {
  box-shadow: inset 0px 4px 5px #0070f0, inset 0px -4px 5px #002cbb;
  transform: scale(0.995);
}

.input-field {
  position: relative;
}

.input-field label {
  position: absolute;
  color: #8d8d8d;
  pointer-events: none;
  background-color: transparent;
  left: 15px;
  transform: translateY(0.6rem);
  transition: all 0.3s ease;
}

.input-field input {
  padding: 10px 15px;
  font-size: 1rem;
  border-radius: 8px;
  border: solid 1px #8d8d8d;
  letter-spacing: 1px;
  width: 100%;
}

.input-field input:focus,
.input-field input:valid {
  outline: none;
  border: solid 1px #0034de;
}

.input-field input:focus ~ label,
.input-field input:valid ~ label {
  transform: translateY(-51%) translateX(-10px) scale(0.8);
  background-color: #fff;
  padding: 0px 5px;
  color: #0034de;
  font-weight: bold;
  letter-spacing: 1px;
  border: none;
  border-radius: 100px;
}

.form .passicon {
  cursor: pointer;
  font-size: 1.3rem;
  position: absolute;
  top: 6px;
  right: 8px;
}

.form .close {
  display: none;
}

</style>
    

================================================
FILE: Forms/SteeveeG_neat-fly-82.html
================================================
<div class="container">
  <form class="SignInForms">
    <div class="font header">Sign in with existing account</div>
    <input type="email" class="Input" placeholder="Email address or Username" />
    <input type="password" class="Input" placeholder="Password" />
    <div class="Buttons">
      <button class="SignInUp">Sign in</button>
      <button class="ForgotPassword">Forgot password?</button>
    </div>
    <div class="font header OtherSignInLabel">Or sign in with:</div>

    <div class="SignInWith">
      <a href="#" class="SignInWithGoogle">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 533.5 544.3"
          class="GoogleLogo"
        >
          <path
            fill="#4285f4"
            d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z"
          ></path>
          <path
            fill="#34a853"
            d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z"
          ></path>
          <path
            fill="#fbbc04"
            d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z"
          ></path>
          <path
            fill="#ea4335"
            d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z"
          ></path>
        </svg>

        <div>Google</div>
      </a>

      <div class="SignInWithLogo">
        <a href="#">
          <svg
            viewBox="0 0 24 24"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
            ></path>
          </svg>
        </a>
        <div class="Bar"></div>
      </div>
      <div class="SignInWithLogo">
        <a href="#">
          <svg
            fill-rule="evenodd"
            viewBox="0 0 64 64"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path fill="#e24329" d="M32 61.477L43.784 25.2H20.216z"></path>
            <path fill="#fc6d26" d="M32 61.477L20.216 25.2H3.7z"></path>
            <path
              fill="#fca326"
              d="M3.7 25.2L.12 36.23a2.44 2.44 0 0 0 .886 2.728L32 61.477z"
            ></path>
            <path
              fill="#e24329"
              d="M3.7 25.2h16.515L13.118 3.366c-.365-1.124-1.955-1.124-2.32 0z"
            ></path>
            <path fill="#fc6d26" d="M32 61.477L43.784 25.2H60.3z"></path>
            <path
              fill="#fca326"
              d="M60.3 25.2l3.58 11.02a2.44 2.44 0 0 1-.886 2.728L32 61.477z"
            ></path>
            <path
              fill="#e24329"
              d="M60.3 25.2H43.784l7.098-21.844c.365-1.124 1.955-1.124 2.32 0z"
            ></path>
          </svg>
        </a>
        <div class="Bar"></div>
      </div>
      <div class="SignInWithLogo">
        <a href="#">
          <svg
            fill="none"
            viewBox="4 4 24 24"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill="#2684FF"
              d="M4.77044 5C4.29089 5 3.93123 5.43959 4.01115 5.87918L7.24814 25.7007C7.32806 26.2203 7.76766 26.5799 8.28717 26.5799H23.9526C24.3123 26.5799 24.632 26.3002 24.7119 25.9405L27.9888 5.91915C28.0688 5.43959 27.7091 5.03997 27.2296 5.03997L4.77044 5ZM18.5177 19.3067H13.5223L12.2035 12.2333H19.7565L18.5177 19.3067Z"
            ></path>
            <path
              fill="url(#paint0_linear)"
              d="M26.9098 12.2333H19.7165L18.5176 19.3067H13.5222L7.64771 26.3002C7.64771 26.3002 7.92744 26.54 8.32707 26.54H23.9925C24.3522 26.54 24.6719 26.2602 24.7518 25.9005L26.9098 12.2333Z"
            ></path>
            <defs>
              <linearGradient
                gradientUnits="userSpaceOnUse"
                y2="23.5316"
                x2="16.672"
                y1="14.2265"
                x1="28.5925"
                id="paint0_linear"
              >
                <stop stop-color="#0052CC" offset="0.176"></stop>
                <stop stop-color="#2684FF" offset="1"></stop>
              </linearGradient>
            </defs>
          </svg>
        </a>
        <div class="Bar"></div>
      </div>
    </div>
  </form>
  <div class="NoAcc">
    <form class="NoAccForms">
      <div class="font header">Not registerd yet?</div>
      <div class="font h3">Create JetBrains Account</div>
      <input type="email" class="Input" placeholder="Your email address" />
      <button class="SignInUp">Sign Up</button>
    </form>
  </div>
</div>

<style>
/* From Uiverse.io by SteeveeG  - Website: https://www.jetbrains.com/de-de/ - Name: Jetbrains - Tags: login, sign-up, login form, rounded, simple, blue, password, email, white, signin, create, username, signup, clear, Google, GitHub, GitLab, Bitbucket, JetBrains, hyperlink, existing */
.font {
  font-family:
    JetBrains Sans,
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Droid Sans,
    Helvetica Neue,
    Arial,
    sans-serif;
}
form {
  padding: 1.5em 1em;
}
.SignInForms {
  background-color: rgb(245, 245, 245);
  width: 22.375em;
  height: 20.313em;
}
.header {
  color: rgb(75, 75, 75);
  font-size: 0.938em;
  font-weight: 640;
  margin: 0 0 0.875em 0;
  display: block;
}

.Buttons {
  padding: 0 0 1em;
  border-bottom: solid #d2d0d0 0.063em;
  margin-bottom: 1.188em;
}

.SignInUp {
  cursor: pointer;
  color: #ffffff;
  background-color: #00a6fd;
  border: none;
  width: 6.875em;
  padding: 0.5em 1.25em;
  font-size: 0.875em;
  line-height: 1.65;
  border-radius: 1.25em;
  touch-action: manipulation;
  margin: 0 0.625em 0 0;
}

.ForgotPassword {
  cursor: pointer;
  color: #4c9dd0;
  padding: 0.5em 0;
  border: none;
  text-decoration: none;
  background-color: transparent;
  font-size: 0.875em;
}
.ForgotPassword:hover {
  text-decoration: underline;
  background-color: transparent;
}
.Input {
  padding: 0.25em;
  vertical-align: middle;
  width: 100%;
  margin: 0 0 1em 0;
  color: #4b4b4b;
  height: 2.5em;
  border: 1px solid #d9d9d9;
}
.Input:focus {
  outline: none;
  border-color: #00a6fd;
}

.SignInForms:focus-within,
.NoAcc:focus-within {
  -webkit-box-shadow: 0 0 6px 3px #caedff;
  box-shadow: 0 0 6px 3px #caedff;
  outline: 1px solid #97dbff;
}

.SignInUp:hover {
  background-color: #008bd4;
  border: #00a6fd;
}

.OtherSignInLabel {
  margin-bottom: 0.688em;
}

.SignInWith {
  display: flex;
  align-items: center;
}

.GoogleLogo {
  height: 1.25em;
  width: 1.25em;
  margin: 0 0.875em;
}

.SignInWithGoogle {
  min-width: 8.5em;
  height: 3em;
  text-decoration: none;
  color: #4b4b4b;
  display: flex;
  margin-right: 1.75em;
  align-items: center;
  position: relative;
  box-shadow:
    0 0 0.063em rgb(0 0 0 / 10%),
    0 0.063em 0.063em #b7b7b7;
  background: #ffffff;
  border-radius: 0.125em;
  user-select: none;
  font-size: 0.813em;
}

.SignInWithLogo {
  display: block;
  margin-right: 1.75em;
  position: relative;
}

.SignInWithLogo:hover .Bar {
  transition: ease-in-out 0.5s;
  opacity: 1;
}
.h3 {
  display: block;
  font-size: 1.17em;
  font-weight: 600;
  margin-bottom: 1em;
}
.Bar {
  background-color: #b7b6b6;
  bottom: -0.238em;
  left: -0.25em;
  position: relative;
  height: 0.094em;
  transition: ease-in-out 0.5s;
  opacity: 0;
  width: 2em;
  border-radius: 6.25em;
}

.NoAcc {
  top: 1em;
  width: 22.375em;
  height: 12.7em;
  padding: 1.188em;
  background-color: rgb(245, 245, 245);
  position: relative;
}
.NoAccForms {
  padding: 0;
}
.container {
  display: flex;

  flex-direction: column;
}

</style>
    

================================================
FILE: Forms/StefanR1901_ancient-cobra-42.html
================================================
<form class="colorful-form">
  <div class="form-group">
    <label class="form-label" for="name">Name:</label>
    <input required="" placeholder="Enter your name" class="form-input" type="text">
  </div>
  <div class="form-group">
    <label class="form-label" for="email">Email:</label>
    <input required="" placeholder="Enter your email" class="form-input" name="email" id="email" type="email">
  </div>
  <div class="form-group">
    <label class="form-label" for="message">Message:</label>
    <textarea required="" placeholder="Enter your message" class="form-input" name="message" id="message"></textarea>
  </div>
  <button class="form-button" type="submit">Submit</button>
</form>

<style>
/* From Uiverse.io by StefanR1901 - Tags: form, input, discount form */
.colorful-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: none;
  background-color: #fff;
  color: #333;
  border-radius: 5px;
}

textarea.form-input {
  height: 100px;
}

.form-button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #ff6f69;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form-button:hover {
  background-color: #ff5f59;
}

</style>


================================================
FILE: Forms/SyedShahzaib7_brave-dog-61.html
================================================
<div class="wrapper">
  <form action="">
    <p class="form-login">Login</p>
    <div class="input-box">
      <input required="" placeholder="Username" type="text" />
    </div>
    <div class="input-box">
      <input required="" placeholder="Password" type="password" />
    </div>
    <div class="remember-forgot">
      <label><input type="checkbox" />Remember Me</label>
      <a href="#">Forgot Password</a>
    </div>
    <button class="btn" type="submit">Login</button>
    <div class="register-link">
      <p>Dont have an account? <a href="#">Register</a></p>
    </div>
  </form>
</div>

<style>
/* From Uiverse.io by SyedShahzaib7  - Tags: simple, login, 3d, social, gradient, form, submit, login form */
.wrapper {
  width: 420px;
  background: rgb(2, 0, 36);
  background: linear-gradient(
    90deg,
    rgba(2, 0, 36, 1) 9%,
    rgba(9, 9, 121, 1) 68%,
    rgba(0, 91, 255, 1) 97%
  );
  backdrop-filter: blur(9px);
  color: #fff;
  border-radius: 12px;
  padding: 30px 40px;
}
.form-login {
  font-size: 36px;
  text-align: center;
}
.wrapper .input-box {
  position: relative;
  width: 100%;
  height: 50px;

  margin: 30px 0;
}
.input-box input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 40px;
  font-size: 16px;
  color: #fff;
  padding: 20px 45px 20px 20px;
}
.input-box input::placeholder {
  color: #fff;
}

.wrapper .remember-forgot {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  margin: -15px 0 15px;
}
.remember-forgot label input {
  accent-color: #fff;
  margin-right: 3px;
}
.remember-forgot a {
  color: #fff;
  text-decoration: none;
}
.remember-forgot a:hover {
  text-decoration: underline;
}
.wrapper .btn {
  width: 150px;
  height: 45px;
  background: #fff;
  border: none;
  outline: none;
  border-radius: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-size: 16px;
  color: #333;
  font-weight: 600;
  margin-left: 90px;
  margin-top: 10px;
}
.wrapper .register-link {
  font-size: 14.5px;
  text-align: center;
  margin: 20px 0 15px;
}
.register-link p a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.register-link p a:hover {
  text-decoration: underline;
}

</style>
    

================================================
FILE: Forms/TasneemHatem97_strange-deer-62.html
================================================
<div class="body">
        <div class="container">
            <form>
                <div class="head">
                    <span>Sign up</span>
                    <p>Create a free account with your email.</p>
                </div>
                <div class="inputs">
                    <input type="text" placeholder="Full Name">
                    <input type="email" placeholder="Email">
                    <input type="password" placeholder="Password">
                </div>
                <button>Sign up</button>
            </form>
            <div class="form-footer">
                <p>Have an account? <a href="#">Log in</a></p> 
            </div>
    
        </div>

    </div>
    
<style>
/* From Uiverse.io by TasneemHatem97 - Tags: form, password, login form */
.container {
  max-width: 300px;
  background-color: #F1F7FE;
  border-radius: 15px;
  overflow: hidden;
}

form {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 32px 24px 24px;
  gap: 16px;
  text-align: center;
}

form .head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

form .head span {
  font-size: 1.6rem;
  font-weight: bolder;
  color: black;
}

form .head p {
  font-size: 1.1rem;
  color: #7C6666;
}

form .inputs {
  overflow: hidden;
  background-color: #fff;
  width: 100%;
  margin: 1rem 0.5rem;
  border-radius: 8px;
  border-bottom: none;
  outline: 0;
}

form .inputs input {
  border: none;
  outline: none;
  padding: 8px 15px;
    /* علشان اقدر اخلي البلاس هولدر من اول الفورم بديله نفس الويدس */
  width: 100%;
  height: 40px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.299);
  font-weight: 200;
}

form button {
  background-color: #4287ef;
  color: white;
  width: 100%;
  height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  border: 0;
  overflow: hidden;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 1s ease-in-out;
}

form button:hover {
  background-color: #005ce6;
}

.form-footer {
  background-color: #e0ecfb;
  padding: 16px;
  font-size: 1rem;
  text-align: center;
}

.form-footer a {
  font-weight: bolder;
  color: #0066ff;
  transition: all 3s ease-in-out;
}

.form-footer a:hover {
  color: #005ce6;
}

</style>


================================================
FILE: Forms/VitorBaraoDias_splendid-catfish-27.html
================================================
<form class="form-control" action="">
  <p class="title">Login</p>
  <div class="input-field">
    <input required="" class="input" type="text" />
    <label class="label" for="input">Enter Email</label>
  </div>
  <div class="input-field">
    <input required="" class="input" type="password" />
    <label class="label" for="input">Enter Password</label>
  </div>
  <a>Forgot your password?</a>
  <button class="submit-btn">Sign In</button>
</form>

<style>
/* From Uiverse.io by VitorBaraoDias  - Tags: simple, animation, form, creative, login , login form, click effect, input effect  */
.form-control {
  margin: 20px;
  background-color: #ffffff;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
  width: 400px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 25px;
  border-radius: 8px;
}
.title {
  font-size: 28px;
  font-weight: 800;
}
.input-field {
  position: relative;
  width: 100%;
}

.input {
  margin-top: 15px;
  width: 100%;
  outline: none;
  border-radius: 8px;
  height: 45px;
  border: 1.5px solid #ecedec;
  background: transparent;
  padding-left: 10px;
}
.input:focus {
  border: 1.5px solid #2d79f3;
}
.input-field .label {
  position: absolute;
  top: 25px;
  left: 15px;
  color: #ccc;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
.input-field .input:focus ~ .label,
.input-field .input:valid ~ .label {
  top: 5px;
  left: 5px;
  font-size: 12px;
  color: #2d79f3;
  background-color: #ffffff;
  padding-left: 5px;
  padding-right: 5px;
}
.submit-btn {
  margin-top: 30px;
  height: 55px;
  background: #f2f2f2;
  border-radius: 11px;
  border: 0;
  outline: none;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(180deg, #363636 0%, #1b1b1b 50%, #000000 100%);
  box-shadow: 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #000000;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
  cursor: pointer;
}

.submit-btn:hover {
  box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #0000003a;
}

</style>
    

================================================
FILE: Forms/Yaya12085_dangerous-puma-90.html
================================================
<!-- From Uiverse.io by Yaya12085 - Tags: login, form, input, colorful, login form, cool input -->
<div class="max-w-md relative flex flex-col p-4 rounded-md text-black bg-white">
    <div class="text-2xl font-bold mb-2 text-[#1e0e4b] text-center">Welcome back to <span class="text-[#7747ff]">App</span></div>
    <div class="text-sm font-normal mb-4 text-center text-[#1e0e4b]">Log in to your account</div>
<form class="flex flex-col gap-3">
    <div class="block relative"> 
    <label for="email" class="block text-gray-600 cursor-text text-sm leading-[140%] font-normal mb-2">Email</label>
    <input type="text" id="email" class="rounded border border-gray-200 text-sm w-full font-normal leading-[18px] text-black tracking-[0px] appearance-none block h-11 m-0 p-[11px] focus:ring-2 ring-offset-2  ring-gray-900 outline-0">
    
    </div>
    <div class="block relative"> 
    <label for="password" class="block text-gray-600 cursor-text text-sm leading-[140%] font-normal mb-2">Password</label>
    <input type="text" id="password" class="rounded border border-gray-200 text-sm w-full font-normal leading-[18px] text-black tracking-[0px] appearance-none block h-11 m-0 p-[11px] focus:ring-2 ring-offset-2 ring-gray-900 outline-0">
    
    </div>
    <div>
    <a class="text-sm text-[#7747ff]" href="#">Forgot your password?
    </a></div>
    <button type="submit" class="bg-[#7747ff] w-max m-auto px-6 py-2 rounded text-white text-sm font-normal">Submit</button>

</form>
<div class="text-sm text-center mt-[1.6rem]">Don’t have an account yet? <a class="text-sm text-[#7747ff]" href="#">Sign up for free!</a></div>
</div>



================================================
FILE: Forms/Yaya12085_foolish-dog-36.html
================================================
<form class="modal">
  <span class="close">X</span>
      <div class="content">
        <span class="title">Upload a File</span>
        <p class="message">Select a file to upload from your computer or device.</p>
        
        <div class="actions">
          <label for="file" class="button upload-btn">Choose File
            <input hidden="" type="file" id="file">
          </label>
        </div>
        <div class="result">
           <div class="file-uploaded"><p>profile_pic.png</p></div>
        </div>
  </div>
</form>
<style>
/* From Uiverse.io by Yaya12085 - Tags: form */
.modal {
  background-color: rgb(255, 255, 255);
  border-radius: 1em;
  box-shadow: 0px 100px 48px -60px rgba(0,0,0,0.1);
  color: rgb(15, 14, 14);
  max-width: 330px;
  overflow: hidden;
  position: relative;
  transition: background-color 0.3s, color 0.3s;
}

.content > *, .modal > * {
  padding: 0.875em;
}

.title {
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.2;
  display: flex;
  justify-content: center;
}

.message {
  line-height: 1.2;
  text-align: center;
}

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.upload-btn {
  background-color: transparent;
  border: 0.125rem dashed hsla(223,10%,50%,0.4);
  flex: 1;
  padding: 0.375rem 2rem;
}

.upload-btn:hover {
  background-color: hsla(223,10%,60%,0.2);
}

.close {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(226, 94, 54);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  position: absolute;
  right: 10px;
  top: 10px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.result {
  margin-top: 4px;
  background-color: rgba(0, 140, 255, 0.062);
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 1em;
}

.file-uploaded {
  font-weight: 300;
}

.file-uploaded::before {
  position: absolute;
  content: "X";
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(26, 7, 1, 0.212);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  right: 10px;
  top: 10px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  cursor: pointer;
}

.file-uploaded:hover::before {
  background-color: rgba(233, 40, 6, 0.664);
}
</style>


================================================
FILE: Forms/Yaya12085_foolish-husky-65.html
================================================
<form class="plan-chooser">
  <div class="header">
  <span class="title">Choose your plan</span>
  <p class="desc">Amet minim mollit non deserunt ullamco est sit .</p>
  </div>
  <div class="plan-option">
      <input value="free" id="free" name="plan" type="radio">
    <label for="free">
      <div class="plan-info">
      <span class="plan-cost">$0</span>
      <span class="plan-name">Try Free</span>
      </div>
    </label>
  </div>
  <div class="plan-option">
      <input value="monthly" id="monthly" name="plan" type="radio">
    <label for="monthly">
      <div class="plan-info">
      <span class="plan-cost">$29/month</span>
      <span class="plan-name">Monthly plan</span>
      </div>
    </label>
  </div>
  <div class="plan-option">
      <input value="annual" id="annual" name="plan" type="radio">
    <label for="annual">
       <div class="plan-info">
      <span class="plan-cost">$19/month</span>
      <span class="plan-name">$228 billed in a year</span>
      </div>
      <span class="reduction"> Save 20% </span>
    </label>
  </div>
            <a href="#" title="" class="choose-btn"> Start </a>

</form>

<style>
/* From Uiverse.io by Yaya12085 - Tags: form */
.plan-chooser {
  background-color: rgba(255, 255, 255, 1);
  max-width: 320px;
  border-radius: 10px;
  padding: 20px;
  color: #000;
  box-shadow: 0px 87px 78px -39px rgba(0,0,0,0.4);
}

.header {
  text-align: center;
  margin-top: 0.75rem;
}

.plan-chooser .title {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  color: rgba(0, 0, 0, 1);
}

.plan-chooser .desc {
  margin-top: 0.4rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgba(75, 85, 99, 1);
}

.plan-option {
  margin-top: 1rem;
  margin-bottom: 15px;
}

.plan-option label {
  cursor: pointer;
  overflow: hidden;
  border: 2px solid rgba(229, 231, 235, 1);
  border-radius: 0.375rem;
  background-color: rgba(249, 250, 251, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem .4rem;
  margin: 10px 0;
  transform: all .15s ease;
}

.plan-option label .plan-info {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.plan-cost {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 1);
}

.plan-name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(75, 85, 99, 1);
}

.reduction {
  display: inline-block;
  border-radius: 9999px;
  border: 1px solid rgba(22, 163, 74, 1);
  background-color: rgba(220, 252, 231, 1);
  padding: 0.2rem .4rem;
  font-size: 0.675rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: rgba(22, 163, 74, 1);
}

.plan-option input:checked + label {
  border-color: rgba(37, 99, 235, 1);
}

.choose-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background-color: rgba(37, 99, 235, 1);
  padding: 1rem 3rem;
  font-weight: 600;
  color: #fff;
  transform: all .15s ease;
}

.choose-btn:hover {
  opacity: .9;
}

.plan-option input {
  display: none;
}
</style>


================================================
FILE: Forms/Yaya12085_friendly-emu-87.html
================================================
<div class="card">
  <span class="title">Leave a Comment</span>
  <form class="form">
    <div class="group">
    <input placeholder="‎" type="text" required="">
    <label for="name">Name</label>
    </div>
<div class="group">
    <input placeholder="‎" type="email" id="email" name="email" required="">
    <label for="email">Email</label>
    </div>
<div class="group">
    <textarea placeholder="‎" id="comment" name="comment" rows="5" required=""></textarea>
    <label for="comment">Comment</label>
</div>
    <button type="submit">Submit</button>
  </form>
</div>

<style>
/* From Uiverse.io by Yaya12085 - Tags: form, active, input, comment */
.card {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 350px;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}

.form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.group {
  position: relative;
}

.form .group label {
  font-size: 14px;
  color: rgb(99, 102, 102);
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: #fff;
  transition: all .3s ease;
}

.form .group input,
.form .group textarea {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  outline: 0;
  width: 100%;
  background-color: transparent;
}

.form .group input:placeholder-shown+ label, .form .group textarea:placeholder-shown +label {
  top: 10px;
  background-color: transparent;
}

.form .group input:focus,
.form .group textarea:focus {
  border-color: #3366cc;
}

.form .group input:focus+ label, .form .group textarea:focus +label {
  top: -10px;
  left: 10px;
  background-color: #fff;
  color: #3366cc;
  font-weight: 600;
  font-size: 14px;
}

.form .group textarea {
  resize: none;
  height: 100px;
}

.form button {
  background-color: #3366cc;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.form button:hover {
  background-color: #27408b;
}


</style>


================================================
FILE: Forms/Yaya12085_horrible-grasshopper-43.html
================================================
<form class="form">
    <span class="title">Register</span>
    <label for="username" class="label">Username</label>
    <input type="text" id="username" name="username" required="" class="input">
    <label for="email" class="label">Email</label>
    <input type="email" id="email" name="email" required="" class="input">
    <label for="password" class="label">Password</label>
    <input type="password" id="password" name="password" required="" class="input">
    <button type="submit" class="submit">Register</button>
  </form>
<style>
/* From Uiverse.io by Yaya12085 - Tags: form */
.form {
  max-width: 320px;
  width: 100%;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0px 0px 0px 4px rgba(52, 52, 53, 0.185);
  display: flex;
  flex-direction: column;
  border-radius: 10px;
}

.title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
  color: #1a202c;
}

.label {
  color: rgb(0, 0, 0);
  margin-bottom: 4px;
}

.input {
  padding: 10px;
  margin-bottom: 20px;
  width: 100%;
  font-size: 1rem;
  color: #4a5568;
  outline: none;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}

.input:focus {
  background-color: #fff;
  box-shadow: 0 0 0 2px #cbd5e0;
}

.input:valid {
  border: 1px solid green;
}

.input:invalid {
  border: 1px solid rgba(14, 14, 14, 0.205);
}

.submit {
  background-color: #1a202c;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
    
    
    
</style>


================================================
FILE: Forms/Yaya12085_kind-deer-40.html
================================================
<form class="form"> <div class="title">OTP</div> <div class="title">Verification Code</div> <p class="message">We have sent a verification code to your mobile number</p> <div class="inputs"> <input id="input1" type="text" maxlength="1"> <input id="input2" type="text" maxlength="1"> <input id="input3" type="text" maxlength="1"> <input id="input4" type="text" maxlength="1"> </div> <button class="action">verify me</button> </form>
<style>
/* From Uiverse.io by Yaya12085 - Tags: button, OTP, form, input */
.form {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  width: 300px;
  background-color: white;
  border-radius: 12px;
  padding: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: black
}

.message {
  color: #a3a3a3;
  font-size: 14px;
  margin-top: 4px;
  text-align: center
}

.inputs {
  margin-top: 10px
}

.inputs input {
  width: 32px;
  height: 32px;
  text-align: center;
  border: none;
  border-bottom: 1.5px solid #d2d2d2;
  margin: 0 10px;
}

.inputs input:focus {
  border-bottom: 1.5px solid royalblue;
  outline: none;
}

.action {
  margin-top: 24px;
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  background-color: royalblue;
  color: white;
  cursor: pointer;
  align-self: end;
}
</style>


================================================
FILE: Forms/Yaya12085_massive-warthog-99.html
================================================
<!-- From Uiverse.io by Yaya12085 - Tags: login, form, input, register, login , login form -->
<div class="w-80 rounded-2xl bg-slate-900">
  <div class="flex flex-col gap-2 p-8">
    <p class="text-center text-3xl text-gray-300 mb-4">Register</p>
    <input class="bg-slate-900 w-full rounded-lg border border-gray-300 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2 focus:ring-offset-gray-800" placeholder="Email">
    <input class="bg-slate-900 w-full rounded-lg border border-gray-300 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2 focus:ring-offset-gray-800" placeholder="Password">
    <input class="bg-slate-900 w-full rounded-lg border border-gray-300 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2 focus:ring-offset-gray-800" placeholder="Confirm password">
    <label class="flex cursor-pointer items-center justify-between p-1 text-slate-400">
      Accept terms of use
      <div class="relative inline-block">
        <input class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-gary-400 checked:border-green-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" type="checkbox">
        <span class="pointer-events-none absolute left-1 top-1 block h-4 w-4 rounded-full bg-slate-600 transition-all duration-200 peer-checked:left-7 peer-checked:bg-green-300"></span>
      </div>
    </label>
    <button class="inline-block cursor-pointer rounded-md bg-gray-700 px-4 py-3.5 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 focus-visible:ring-offset-2 active:scale-95">Register</button>
  </div>
</div>



================================================
FILE: Forms/Yaya12085_nasty-wolverine-41.html
================================================
<form class="form">
  <span class="form-title">Upload your file</span>
  <p class="form-paragraph">
      File should be an image
    </p>
   <label for="file-input" class="drop-container">
  <span class="drop-title">Drop files here</span>
  or
  <input type="file" accept="image/*" required="" id="file-input">
</label>
</form>
<style>
/* From Uiverse.io by Yaya12085 - Tags: form */
.form {
  background-color: #fff;
  box-shadow: 0 10px 60px rgb(218, 229, 255);
  border: 1px solid rgb(159, 159, 160);
  border-radius: 20px;
  padding: 2rem .7rem .7rem .7rem;
  text-align: center;
  font-size: 1.125rem;
  max-width: 320px;
}

.form-title {
  color: #000000;
  font-size: 1.8rem;
  font-weight: 500;
}

.form-paragraph {
  margin-top: 10px;
  font-size: 0.9375rem;
  color: rgb(105, 105, 105);
}

.drop-container {
  background-color: #fff;
  position: relative;
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-top: 2.1875rem;
  border-radius: 10px;
  border: 2px dashed rgb(171, 202, 255);
  color: #444;
  cursor: pointer;
  transition: background .2s ease-in-out, border .2s ease-in-out;
}

.drop-container:hover {
  background: rgba(0, 140, 255, 0.164);
  border-color: rgba(17, 17, 17, 0.616);
}

.drop-container:hover .drop-title {
  color: #222;
}

.drop-title {
  color: #444;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  transition: color .2s ease-in-out;
}

#file-input {
  width: 350px;
  max-width: 100%;
  color: #444;
  padding: 2px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(8, 8, 8, 0.288);
}

#file-input::file-selector-button {
  margin-right: 20px;
  border: none;
  background: #084cdf;
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

#file-input::file-selector-button:hover {
  background: #0d45a5;
}
</style>


================================================
FILE: Forms/Yaya12085_ordinary-octopus-24.html
================================================
<!-- From Uiverse.io by Yaya12085 - Source: https://daisyui.com/ - Tags: button, form, card, checkbox, input, switcher, cool checkbox -->
<div class="w-80 rounded-2xl bg-white">
  <div class="flex flex-col gap-2 p-8">
    <input placeholder="Email" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2 focus:ring-offset-gray-100">
    <label class="flex cursor-pointer items-center justify-between p-1">
      Accept terms of use
      <div class="relative inline-block">
        <input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2">
        <span class="pointer-events-none absolute left-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:left-7 peer-checked:bg-gray-900"></span>
      </div>
    </label>
    <label class="flex cursor-pointer items-center justify-between p-1">
      Submit to newsletter
      <div class="relative inline-block">
        <input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2">
        <span class="pointer-events-none absolute left-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:left-7 peer-checked:bg-gray-900"></span>
      </div>
    </label>
    <button class="inline-block cursor-pointer rounded-md bg-gray-700 px-4 py-3.5 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 focus-visible:ring-offset-2 active:scale-95">Save</button>
  </div>
</div>



================================================
FILE: Forms/Yaya12085_polite-goose-24.html
================================================
<!-- From Uiverse.io by Yaya12085 - Tags: login, form, register -->
<form>
      <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto lg:py-0">
        <div class="w-full bg-white rounded-lg shadow border md:mt-0 sm:max-w-md xl:p-0">
          <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
            <p class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl">
              Create an account
            
            
              </p><div>
                <label class="block mb-2 text-sm font-medium text-gray-900">
                  Your username
                </label>
                <input placeholder="JohnDoe" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5" id="username" type="text">
              </div>
              <div>
                <label class="block mb-2 text-sm font-medium text-gray-900">
                  Password
                </label>
                <input class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5" placeholder="••••••••" id="password" type="password">
              </div>
              <div>
                <label class="block mb-2 text-sm font-medium text-gray-900">
                  Confirm password
                </label>
                <input class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5" placeholder="••••••••" id="confirmPassword" type="password">
              </div>
              <div class="flex items-start">
                <div class="flex items-center h-5">
                  <input class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 bg-gray-700 border-gray-600 focus:ring-primary-600 ring-offset-gray-800" type="checkbox" aria-describedby="terms" id="terms">
                </div>
                <div class="ml-3 text-sm">
                  <label class="font-light text-gray-500 text-gray-300">
                    I accept the
                    <a href="#" class="font-medium text-primary-600 hover:underline text-primary-500">
                      Terms and Conditions
                    </a>
                  </label>
                </div>
              </div>

              <button class="w-full bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center  focus:ring-blue-800 text-white" type="submit">
                Create an account
              </button>
            
          </div>
        </div>
      </div></form>
    



================================================
FILE: Forms/Yaya12085_selfish-impala-100.html
================================================
<form class="form">
    <div class="header">Sign In</div>
    <div class="inputs">
        <input placeholder="Email" class="input" type="text">
        <input placeholder="Password" class="input" type="password">
    <div class="checkbox-container">
        <label class="checkbox">
        <input type="checkbox" id="checkbox">
        </label>
        <label for="checkbox" class="checkbox-text">Remember me</label>
    </div>
    <button class="sigin-btn">Submit</button>
    <a class="forget" href="#">Forget password ?</a>
    <p class="signup-link">Don't have an account? <a href="#">Sign up</a></p>
    </div>
</form>
<style>
/* From Uiverse.io by Yaya12085 - Tags: sign-in, form */
.form {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 0.75rem;
  background-color: #fff;
  color: rgb(97 97 97);
  box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
  width: 22rem;
  background-clip: border-box;
}

.header {
  position: relative;
  background-clip: border-box;
  background-color: #1e88e5;
  background-image: linear-gradient(to top right,#1e88e5,#42a5f5);
  margin: 10px;
  border-radius: 0.75rem;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,rgba(33,150,243,.4);
  height: 7rem;
  letter-spacing: 0;
  line-height: 1.375;
  font-weight: 600;
  font-size: 1.9rem;
  font-family: Roboto, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inputs {
  padding: 1.5rem;
  gap: 1rem;
  display: flex;
  flex-direction: column;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 200px;
  width: 100%;
  height: 2.75rem;
  position: relative;
}

.input {
  border: 1px solid rgba(128, 128, 128, 0.61);
  outline: 0;
  color: rgb(69 90 100);
  font-weight: 400;
  font-size: .9rem;
  line-height: 1.25rem;
  padding: 0.75rem;
  background-color: transparent;
  border-radius: .375rem;
  width: 100%;
  height: 100%;
}

.input:focus {
  border: 1px solid #1e88e5;
}

.checkbox-container {
  margin-left: -0.625rem;
  display: inline-flex;
  align-items: center;
}

.checkbox {
  position: relative;
  overflow: hidden;
  padding: .55rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.027);
  height: 35px;
  width: 35px;
}

.checkbox input {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.checkbox-text {
  cursor: pointer;
}

.sigin-btn {
  text-transform: uppercase;
  font-weight: 700;
  font-size: .75rem;
  line-height: 1rem;
  text-align: center;
  padding: .75rem 1.5rem;
  background-color: #1e88e5;
  background-image: linear-gradient(to top right,#1e88e5,#42a5f5);
  border-radius: .5rem;
  width: 100%;
  outline: 0;
  border: 0;
  color: #fff;
}

.signup-link {
  line-height: 1.5;
  font-weight: 300;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-link a, .forget {
  line-height: 1.5;
  font-weight: 700;
  font-size: .875rem;
  margin-left: .25rem;
  color: #1e88e5;
}

.forget {
  text-align: right;
  font-weight: 600;
}
</style>


================================================
FILE: Forms/Yaya12085_short-panda-24.html
================================================
<div class="form-container">
	<p class="title">Login</p>
	<form class="form">
		<div class="input-group">
			<label for="username">Username</label>
			<input type="text" name="username" id="username" placeholder="">
		</div>
		<div class="input-group">
			<label for="password">Password</label>
			<input type="password" name="password" id="password" placeholder="">
			<div class="forgot">
				<a rel="noopener noreferrer" href="#">Forgot Password ?</a>
			</div>
		</div>
		<button class="sign">Sign in</button>
	</form>
	<div class="social-message">
		<div class="line"></div>
		<p class="message">Login with social accounts</p>
		<div class="line"></div>
	</div>
	<div class="social-icons">
		<button aria-label="Log in with Google" class="icon">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
				<path d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"></path>
			</svg>
		</button>
		<button aria-label="Log in with Twitter" class="icon">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
				<path d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.891 3.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"></path>
			</svg>
		</button>
		<button aria-label="Log in with GitHub" class="icon">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
				<path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"></path>
			</svg>
		</button>
	</div>
	<p class="signup">Don't have an account?
		<a rel="noopener noreferrer" href="#" class="">Sign up</a>
	</p>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: form */
.form-container {
  width: 320px;
  border-radius: 0.75rem;
  background-color: rgba(17, 24, 39, 1);
  padding: 2rem;
  color: rgba(243, 244, 246, 1);
}

.title {
  text-align: center;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}

.form {
  margin-top: 1.5rem;
}

.input-group {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.input-group label {
  display: block;
  color: rgba(156, 163, 175, 1);
  margin-bottom: 4px;
}

.input-group input {
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid rgba(55, 65, 81, 1);
  outline: 0;
  background-color: rgba(17, 24, 39, 1);
  padding: 0.75rem 1rem;
  color: rgba(243, 244, 246, 1);
}

.input-group input:focus {
  border-color: rgba(167, 139, 250);
}

.forgot {
  display: flex;
  justify-content: flex-end;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgba(156, 163, 175,1);
  margin: 8px 0 14px 0;
}

.forgot a,.signup a {
  color: rgba(243, 244, 246, 1);
  text-decoration: none;
  font-size: 14px;
}

.forgot a:hover, .signup a:hover {
  text-decoration: underline rgba(167, 139, 250, 1);
}

.sign {
  display: block;
  width: 100%;
  background-color: rgba(167, 139, 250, 1);
  padding: 0.75rem;
  text-align: center;
  color: rgba(17, 24, 39, 1);
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
}

.social-message {
  display: flex;
  align-items: center;
  padding-top: 1rem;
}

.line {
  height: 1px;
  flex: 1 1 0%;
  background-color: rgba(55, 65, 81, 1);
}

.social-message .message {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(156, 163, 175, 1);
}

.social-icons {
  display: flex;
  justify-content: center;
}

.social-icons .icon {
  border-radius: 0.125rem;
  padding: 0.75rem;
  border: none;
  background-color: transparent;
  margin-left: 8px;
}

.social-icons .icon svg {
  height: 1.25rem;
  width: 1.25rem;
  fill: #fff;
}

.signup {
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgba(156, 163, 175, 1);
}

</style>


================================================
FILE: Forms/Yaya12085_short-turtle-53.html
================================================
<form class="form">
    <p class="title">Register </p>
    <p class="message">Signup now and get full access to our app. </p>
        <div class="flex">
        <label>
            <input required="" placeholder="" type="text" class="input">
            <span>Firstname</span>
        </label>

        <label>
            <input required="" placeholder="" type="text" class="input">
            <span>Lastname</span>
        </label>
    </div>  
            
    <label>
        <input required="" placeholder="" type="email" class="input">
        <span>Email</span>
    </label> 
        
    <label>
        <input required="" placeholder="" type="password" class="input">
        <span>Password</span>
    </label>
    <label>
        <input required="" placeholder="" type="password" class="input">
        <span>Confirm password</span>
    </label>
    <button class="submit">Submit</button>
    <p class="signin">Already have an acount ? <a href="#">Signin</a> </p>
</form>
<style>
/* From Uiverse.io by Yaya12085 - Tags: form, input, sign-up, register */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
  position: relative;
}

.title {
  font-size: 28px;
  color: royalblue;
  font-weight: 600;
  letter-spacing: -1px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 30px;
}

.title::before,.title::after {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  border-radius: 50%;
  left: 0px;
  background-color: royalblue;
}

.title::before {
  width: 18px;
  height: 18px;
  background-color: royalblue;
}

.title::after {
  width: 18px;
  height: 18px;
  animation: pulse 1s linear infinite;
}

.message, .signin {
  color: rgba(88, 87, 87, 0.822);
  font-size: 14px;
}

.signin {
  text-align: center;
}

.signin a {
  color: royalblue;
}

.signin a:hover {
  text-decoration: underline royalblue;
}

.flex {
  display: flex;
  width: 100%;
  gap: 6px;
}

.form label {
  position: relative;
}

.form label .input {
  width: 100%;
  padding: 10px 10px 20px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 10px;
}

.form label .input + span {
  position: absolute;
  left: 10px;
  top: 15px;
  color: grey;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
}

.form label .input:placeholder-shown + span {
  top: 15px;
  font-size: 0.9em;
}

.form label .input:focus + span,.form label .input:valid + span {
  top: 30px;
  font-size: 0.7em;
  font-weight: 600;
}

.form label .input:valid + span {
  color: green;
}

.submit {
  border: none;
  outline: none;
  background-color: royalblue;
  padding: 10px;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  transform: .3s ease;
}

.submit:hover {
  background-color: rgb(56, 90, 194);
}

@keyframes pulse {
  from {
    transform: scale(0.9);
    opacity: 1;
  }

  to {
    transform: scale(1.8);
    opacity: 0;
  }
}
</style>


================================================
FILE: Forms/Yaya12085_smart-seahorse-4.html
================================================
<form class="form">
  <span class="close">X</span>

  <div class="info">
  <span class="title">OTP Verification</span>
<p class="description">Please enter the code we have sent you. </p>
   </div>
    <div class="inputs">
    <input placeholder="" type="tel" maxlength="1">
    <input placeholder="" type="tel" maxlength="1">
    <input placeholder="" type="tel" maxlength="1">
    <input placeholder="" type="tel" maxlength="1">
  </div>
        <a class="validate" href="#">Verify</a>
<p class="resend">You don't receive the code ?<a class="resend-action">resend</a></p>

</form>
<style>
/* From Uiverse.io by Yaya12085 - Tags: OTP, form */
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 20px;
  background: #606c88;
  background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);
  background: linear-gradient(to right, #3f4c6b, #606c88);
  border-radius: 10px;
  box-shadow: 0px 87px 78px -39px rgba(0,0,0,0.4);
  max-width: 320px;
}

.info {
  margin-bottom: 10px;
}

.title {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.description {
  color: #fff;
  margin-top: 10px;
  font-size: 15px;
}

.form .inputs {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.form .inputs input {
  height: 2.5em;
  width: 2.5em;
  outline: none;
  text-align: center;
  font-size: 1.5em;
  color: #fff;
  border-radius: 0.3em;
  border: 1px solid rgba(253, 253, 253, 0.363);
  background-color: rgb(255 255 255 / 0.05);
}

.form .inputs input:focus {
  border: 1px solid rgb(99 102 241);
}

.resend {
  color: #fff;
  margin-top: 10px;
  font-size: 15px;
  text-align: center;
}

.resend-action {
  text-decoration: none;
  cursor: pointer;
  margin-left: 6px;
  color: rgb(255, 255, 255);
  font-weight: 600;
}

.resend-action:hover {
  text-decoration: underline #2b8af7;
}

.validate {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  text-decoration: none;
  background-color: #606c88;
  padding: 10px 20px;
  margin: 8px 0 0 0;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  transition: .3s ease;
}

.validate:hover {
  background-color: #3f4c6b;
}

.close {
  position: absolute;
  right: 10px;
  top: 10px;
  background-color: #3f4c6b;
  height: 30px;
  width: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 600;
  transition: .3s ease;
}

.close:hover {
  background-color: rgba(255, 0, 0, 0.603);
}
</style>


================================================
FILE: Forms/Yaya12085_spicy-panther-48.html
================================================
<form class="form">
  <span class="title">Subscribe to our newsletter.</span>
  <p class="description">Nostrud amet eu ullamco nisi aute in ad minim nostrud adipisicing velit quis. Duis tempor incididunt dolore.</p>
  <div>
    <input placeholder="Enter your email" type="email" name="email" id="email-address">
    <button type="submit">Subscribe</button>
  </div>
</form>
<style>
/* From Uiverse.io by Yaya12085 - Tags: subscription, form */
.form {
  display: flex;
  flex-direction: column;
  background: #606c88;
  background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);
  background: linear-gradient(to right, #3f4c6b, #606c88);
  padding: 20px;
  border-radius: 10px;
  max-width: 350px;
}

.title {
  font-size: 2rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
}

.description {
  line-height: 1.5rem;
  font-size: 1rem;
  margin-top: 1rem;
  color: rgb(209 213 219);
}

.form div {
  display: flex;
  max-width: 28rem;
  margin-top: 1rem;
  column-gap: 0.5rem;
}

.form div input {
  outline: none;
  line-height: 1.5rem;
  font-size: 0.875rem;
  color: rgb(255 255 255 );
  padding: 0.5rem 0.875rem;
  background-color: rgb(255 255 255 / 0.05);
  border: 1px solid rgba(253, 253, 253, 0.363);
  border-radius: 0.375rem;
  flex: 1 1 auto;
}

.form div input::placeholder {
  color: rgb(216, 212, 212);
}

.form div input:focus {
  border: 1px solid rgb(99 102 241);
}

.form div button {
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.625rem 0.875rem;
  background-color: rgb(99 102 241);
  border-radius: 0.375rem;
  border: none;
  outline: none;
}
</style>


================================================
FILE: Forms/Yaya12085_stupid-starfish-12.html
================================================

    <form class="form">
       <p class="form-title">Sign in to your account</p>
        <div class="input-container">
          <input placeholder="Enter email" type="email">
          <span>
            <svg stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
            </svg>
          </span>
      </div>
      <div class="input-container">
          <input placeholder="Enter password" type="password">

          <span>
            <svg stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
              <path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
            </svg>
          </span>
        </div>
         <button class="submit" type="submit">
        Sign in
      </button>

      <p class="signup-link">
        No account?
        <a href="">Sign up</a>
      </p>
   </form>

<style>
/* From Uiverse.io by Yaya12085 - Tags: sign-in, form */
.form {
  background-color: #fff;
  display: block;
  padding: 1rem;
  max-width: 350px;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.form-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  text-align: center;
  color: #000;
}

.input-container {
  position: relative;
}

.input-container input, .form button {
  outline: none;
  border: 1px solid #e5e7eb;
  margin: 8px 0;
}

.input-container input {
  background-color: #fff;
  padding: 1rem;
  padding-right: 3rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: 300px;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.input-container span {
  display: grid;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  place-content: center;
}

.input-container span svg {
  color: #9CA3AF;
  width: 1rem;
  height: 1rem;
}

.submit {
  display: block;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  background-color: #4F46E5;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  width: 100%;
  border-radius: 0.5rem;
  text-transform: uppercase;
}

.signup-link {
  color: #6B7280;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}

.signup-link a {
  text-decoration: underline;
}
</style>


================================================
FILE: Forms/Yaya12085_tender-moose-95.html
================================================
<label class="custum-file-upload" for="file">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path fill="" d="M10 1C9.73478 1 9.48043 1.10536 9.29289 1.29289L3.29289 7.29289C3.10536 7.48043 3 7.73478 3 8V20C3 21.6569 4.34315 23 6 23H7C7.55228 23 8 22.5523 8 22C8 21.4477 7.55228 21 7 21H6C5.44772 21 5 20.5523 5 20V9H10C10.5523 9 11 8.55228 11 8V3H18C18.5523 3 19 3.44772 19 4V9C19 9.55228 19.4477 10 20 10C20.5523 10 21 9.55228 21 9V4C21 2.34315 19.6569 1 18 1H10ZM9 7H6.41421L9 4.41421V7ZM14 15.5C14 14.1193 15.1193 13 16.5 13C17.8807 13 19 14.1193 19 15.5V16V17H20C21.1046 17 22 17.8954 22 19C22 20.1046 21.1046 21 20 21H13C11.8954 21 11 20.1046 11 19C11 17.8954 11.8954 17 13 17H14V16V15.5ZM16.5 11C14.142 11 12.2076 12.8136 12.0156 15.122C10.2825 15.5606 9 17.1305 9 19C9 21.2091 10.7909 23 13 23H20C22.2091 23 24 21.2091 24 19C24 17.1305 22.7175 15.5606 20.9844 15.122C20.7924 12.8136 18.858 11 16.5 11Z" clip-rule="evenodd" fill-rule="evenodd"></path> </g></svg>
</div>
<div class="text">
   <span>Click to upload image</span>
   </div>
   <input type="file" id="file">
</label>

<style>
/* From Uiverse.io by Yaya12085 - Tags: form, image, file upload */
.custum-file-upload {
  height: 200px;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: space-between;
  gap: 20px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border: 2px dashed #cacaca;
  background-color: rgba(255, 255, 255, 1);
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0px 48px 35px -48px rgba(0,0,0,0.1);
}

.custum-file-upload .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custum-file-upload .icon svg {
  height: 80px;
  fill: rgba(75, 85, 99, 1);
}

.custum-file-upload .text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custum-file-upload .text span {
  font-weight: 400;
  color: rgba(75, 85, 99, 1);
}

.custum-file-upload input {
  display: none;
}
</style>


================================================
FILE: Forms/Yaya12085_weak-dodo-82.html
================================================
<form class="form">
    <div class="title">Contact us</div>
    <input type="text" placeholder="Your email" class="input">
    <textarea placeholder="Your message"></textarea>
     
    <button>Submit</button>
</form>
<style>
/* From Uiverse.io by Yaya12085 - Tags: button, form, input, contact, text */
.form {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  width: 300px;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 30px 30px -30px rgba(27, 26, 26, 0.315);
}

.form .title {
  color: royalblue;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form input {
  outline: 0;
  border: 1px solid rgb(219, 213, 213);
  padding: 8px 14px;
  border-radius: 8px;
  width: 100%;
  height: 50px;
}

.form textarea {
  border-radius: 8px;
  height: 100px;
  width: 100%;
  resize: none;
  outline: 0;
  padding: 8px 14px;
  border: 1px solid rgb(219, 213, 213);
}

.form button {
  align-self: flex-end;
  padding: 8px;
  outline: 0;
  border: 0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  background-color: royalblue;
  color: #fff;
  cursor: pointer;
}
    
</style>


================================================
FILE: Forms/Yaya12085_white-treefrog-57.html
================================================
<form class="form">
  <span class="title">You really like the project</span>
  <span class="sub mb">Register to get full access now :)</span>
 <input id="file" type="file">
  <label class="avatar" for="file"><span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" d="M17.1813 16.3254L15.3771 14.5213C16.5036 13.5082 17.379 12.9869 18.2001 12.8846C19.0101 12.7837 19.8249 13.0848 20.8482 13.8687C20.8935 13.9034 20.947 13.9202 21 13.9202V15.024C21 19.9452 19.9452 21 15.024 21H8.976C4.05476 21 3 19.9452 3 15.024V13.7522C3.06398 13.7522 3.12796 13.7278 3.17678 13.679L4.45336 12.4024C5.31928 11.5365 6.04969 10.8993 6.71002 10.4791C7.3679 10.0605 7.94297 9.86572 8.50225 9.86572C9.06154 9.86572 9.6366 10.0605 10.2945 10.4791C10.9548 10.8993 11.6852 11.5365 12.5511 12.4024L16.8277 16.679C16.9254 16.7766 17.0836 16.7766 17.1813 16.679C17.2789 16.5813 17.2789 16.423 17.1813 16.3254Z" opacity="0.1"></path> <path stroke-width="2" stroke="#ffffff" d="M3 8.976C3 4.05476 4.05476 3 8.976 3H15.024C19.9452 3 21 4.05476 21 8.976V15.024C21 19.9452 19.9452 21 15.024 21H8.976C4.05476 21 3 19.9452 3 15.024V8.976Z"></path> <path stroke-linecap="round" stroke-width="2" stroke="#ffffff" d="M17.0045 16.5022L12.7279 12.2256C9.24808 8.74578 7.75642 8.74578 4.27658 12.2256L3 13.5022"></path> <path stroke-linecap="round" stroke-width="2" stroke="#ffffff" d="M21.0002 13.6702C18.907 12.0667 17.478 12.2919 15.1982 14.3459"></path> <path stroke-width="2" stroke="#ffffff" d="M17 8C17 8.55228 16.5523 9 16 9C15.4477 9 15 8.55228 15 8C15 7.44772 15.4477 7 16 7C16.5523 7 17 7.44772 17 8Z"></path> </g></svg></span></label>
    <input type="text" class="input" placeholder="username">
    <input type="email" class="input" placeholder="email">
    <input type="password" class="input" placeholder="password"> 
  <span class="sub">Already have an account ? <a href="#">Sign in</a></span>
    <button>Register</button>
</form>
<style>
/* From Uiverse.io by Yaya12085 - Tags: form */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 300px;
  background-color: #fff;
  border-radius: 20px;
  padding: 30px 20px;
  box-shadow: 100px 100px 80px rgba(0, 0, 0, 0.03)
}

.title {
  color: black;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
  margin-bottom: 4px;
}

.sub {
  text-align: center;
  color: black;
  font-size: 14px;
  width: 100%;
}

.sub.mb {
  margin-bottom: 1px;
}

.sub a {
  color: rgb(23, 111, 211);
}

.avatar {
  height: 50px;
  width: 50px;
  background-color: rgb(23, 111, 211);
  border-radius: 50%;
  align-self: center;
  padding: 6px;
  cursor: pointer;
  box-shadow: 12.5px 12.5px 10px rgba(0, 0, 0, 0.015),100px 100px 80px rgba(0, 0, 0, 0.03);
}

.form button {
  align-self: flex-end;
}

.input, button {
  border: none;
  outline: none;
  width: 100%;
  padding: 16px 10px;
  background-color: rgb(247, 243, 243);
  border-radius: 10px;
  box-shadow: 12.5px 12.5px 10px rgba(0, 0, 0, 0.015),100px 100px 80px rgba(0, 0, 0, 0.03);
}

button {
  margin-top: 12px;
  background-color: rgb(23, 111, 211);
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
}

.input:focus {
  border: 1px solid rgb(23, 111, 211);
}

#file {
  display: none;
}
</style>


================================================
FILE: Forms/Yaya12085_yellow-goat-62.html
================================================
<div class="container"> 
  <div class="header"> 
    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> 
      <path d="M7 10V9C7 6.23858 9.23858 4 12 4C14.7614 4 17 6.23858 17 9V10C19.2091 10 21 11.7909 21 14C21 15.4806 20.1956 16.8084 19 17.5M7 10C4.79086 10 3 11.7909 3 14C3 15.4806 3.8044 16.8084 5 17.5M7 10C7.43285 10 7.84965 10.0688 8.24006 10.1959M12 12V21M12 12L15 15M12 12L9 15" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg> <p>Browse File to upload!</p>
  </div> 
  <label for="file" class="footer"> 
    <svg fill="#000000" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M15.331 6H8.5v20h15V14.154h-8.169z"></path><path d="M18.153 6h-.009v5.342H23.5v-.002z"></path></g></svg> 
    <p>Not selected file</p> 
    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M5.16565 10.1534C5.07629 8.99181 5.99473 8 7.15975 8H16.8402C18.0053 8 18.9237 8.9918 18.8344 10.1534L18.142 19.1534C18.0619 20.1954 17.193 21 16.1479 21H7.85206C6.80699 21 5.93811 20.1954 5.85795 19.1534L5.16565 10.1534Z" stroke="#000000" stroke-width="2"></path> <path d="M19.5 5H4.5" stroke="#000000" stroke-width="2" stroke-linecap="round"></path> <path d="M10 3C10 2.44772 10.4477 2 11 2H13C13.5523 2 14 2.44772 14 3V5H10V3Z" stroke="#000000" stroke-width="2"></path> </g></svg>
  </label> 
  <input id="file" type="file"> 
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: form */
.container {
  height: 300px;
  width: 300px;
  border-radius: 10px;
  box-shadow: 4px 4px 30px rgba(0, 0, 0, .2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  gap: 5px;
  background-color: rgba(0, 110, 255, 0.041);
}

.header {
  flex: 1;
  width: 100%;
  border: 2px dashed royalblue;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.header svg {
  height: 100px;
}

.header p {
  text-align: center;
  color: black;
}

.footer {
  background-color: rgba(0, 110, 255, 0.075);
  width: 100%;
  height: 40px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: black;
  border: none;
}

.footer svg {
  height: 130%;
  fill: royalblue;
  background-color: rgba(70, 66, 66, 0.103);
  border-radius: 50%;
  padding: 2px;
  cursor: pointer;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.205);
}

.footer p {
  flex: 1;
  text-align: center;
}

#file {
  display: none;
}
</style>


================================================
FILE: Forms/aadium_tall-bear-23.html
================================================
<form class="form">
    <input class="input" type="text" placeholder="Name">
    <input class="input" type="text" placeholder="E-Mail I.D.">
    <textarea class="textarea" placeholder="Enter message"></textarea> 
    <center><button class="button">Submit</button></center>
</form>
<style>
/* From Uiverse.io by aadium - Tags: form, chat */
.form {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  background-image: linear-gradient(45deg, #330808, 
  #3a2c09);
  border-radius: 2.5em;
  padding: 30px;
  width: 300px;
  height: 350px;
}

.form::before {
  content: '';
  background-image: linear-gradient(45deg, #ff0000, 
  #ffb700);
  height: 358px;
  width: 309px;
  position: absolute;
  margin-top: -34px;
  margin-left: px;
  z-index: -1;
  border-radius: 2.7em;
}

.button {
  margin-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  background: #ff5900;
  color: black;
  padding: 0.7em 5.5em;
  display: flex;
  align-items: center;
  border: 2px solid #66da4300;
  border-radius: 5em;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
}

.button:hover {
  border: 2px solid #ff5900;
  background: #00000000;
  color: #ff5900;
}

.button:active {
  border: 2px solid #66da4300;
  background: #ff5900;
  color: black;
}

.input {
  width: calc(100% - 10px);
  padding: 8px;
  margin-bottom: 20px;
  border: 1px solid #66da4300;
  border-bottom: 1px solid #ff5900;
  outline: none;
  background-color: transparent;
  color: #ff5900;
  font-family: Arial, Helvetica, sans-serif;
  transition: 0.2s;
}

.input:focus {
  border: 1px solid #66da4300;
  border-bottom: 1px solid #ff5900;
  background-color: transparent;
  color: white;
}

.input::placeholder {
  color: #9b725b;
}

.textarea {
  font-family: Arial, Helvetica, sans-serif;
  width: calc(100% - 10px);
  padding: 8px;
  height: 100px;
  margin-bottom: 20px;
  border: 1px solid #66da4300;
  border-bottom: 1px solid #ff5900;
  outline: none;
  background-color: transparent;
  color: #ff5900;
}

.textarea::placeholder {
  color: #9b725b;
}

.textarea:focus {
  border: 1px solid #66da4300;
  border-bottom: 1px solid #ff5900;
  background-color: transparent;
  color: white;
}
</style>


================================================
FILE: Forms/aboalsim114_selfish-fly-63.html
================================================
<form class="form">
  <input placeholder="Enter your name" class="input" type="text">
  <input placeholder="Enter your email" class="input" type="text">
    <input placeholder="*********" class="input" type="password">

  <button>Submit</button>
</form>
<style>
/* From Uiverse.io by aboalsim114 - Tags: 3d, form */
.form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: linear-gradient(to bottom, #0077be, #3b8df2);
  border-radius: 10px;
  overflow: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
  transform: rotateX(-10deg);
  transition: all 0.3s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  animation: form-animation 0.5s ease-in-out;
}

@keyframes form-animation {
  from {
    transform: rotateX(-30deg);
    opacity: 0;
  }

  to {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

.input {
  padding: 10px;
  border-radius: 5px;
  background-color: transparent;
  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  color: rgb(255, 255, 255);
  border: 2px solid #3b8df2;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.input::placeholder {
  color: #fff;
}

.input:hover,
.input:focus {
  border-color: #3b8df2;
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05) rotateY(20deg);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  outline: none;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #3b8df2;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: rotateX(-10deg);
  transition: all 0.3s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

button:hover {
  background-color: #0077be;
  font-size: 17px;
  transform: scale(1.05) rotateY(20deg) rotateX(10deg);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

</style>


================================================
FILE: Forms/ahkamboh_dangerous-badger-27.html
================================================
<!-- From Uiverse.io by ahkamboh - Tags: form, contacts form, tailwind css -->

  <form class="px-7 h-screen grid justify-center items-center">
    <div class="grid gap-6" id="form">
      <div class="w-full flex gap-3">
        <input class="capitalize shadow-2xl p-3 ex w-full outline-none focus:border-solid focus:border-[1px] border-[#035ec5] placeholder:text-black" type="text" placeholder="First Name" id="First-Name" name="First-Name" required="">
        <input class="p-3 capitalize shadow-2xl  glass w-full placeholder:text-black outline-none focus:border-solid focus:border-[1px] border-[#035ec5]" type="text" placeholder="Last Name" id="Last-Name" name="Last-Name">
      </div>
      <div class="grid gap-6 w-full">
        <input class="p-3 shadow-2xl  glass w-full placeholder:text-black outline-none focus:border-solid border-[#035ec5] focus:border-[1px]" type="Email" placeholder="Email" id="Email" name="email">
        <input class="p-3 shadow-2xl   glass w-full text-black outline-none focus:border-solid focus:border-[1px]border-[#035ec5]" type="date" required="">
      </div>
      <div class="flex gap-3">
        <input class="p-3 glass shadow-2xl  w-full placeholder:text-black outline-none focus:border-solid focus:border-[1px] border-[#035ec5]" type="password" placeholder="Password" id="password" name="password" required="">
        <input class="p-3 glass shadow-2xl  w-full placeholder:text-black outline-none focus:border-solid focus:border-[1px] border-[#035ec5]" type="password" placeholder="Confirm password" required="">
      </div>
      <button class="outline-none glass shadow-2xl  w-full p-3  bg-[#ffffff42] hover:border-[#035ec5] hover:border-solid hover:border-[1px]  hover:text-[#035ec5] font-bold" type="submit">Submit</button>
    </div>
  </form>




================================================
FILE: Forms/ahmed150up_chilly-rattlesnake-8.html
================================================
  <div class="card">
    <div class="chat-header">Chat</div>
      <div class="chat-window">
        <ul class="message-list"></ul>
      </div>
      <div class="chat-input">
          <input type="text" class="message-input" placeholder="Type your message here">
          <button class="send-button">Send</button>
      </div>
    </div>
  
<style>
/* From Uiverse.io by ahmed150up - Tags: form, chat */
.card {
  width: 260px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.chat-header {
  background-color: #333;
  color: #fff;
  padding: 10px;
  font-size: 18px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.chat-window {
  height: 220px;
  overflow-y: scroll;
}

.message-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chat-input {
  display: flex;
  align-items: center;
  padding: 10px;
  border-top: 1px solid #ccc;
}

.message-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 5px;
  font-size: 14px;
}

.send-button {
  border: none;
  outline: none;
  background-color: #333;
  color: #fff;
  font-size: 14px;
  padding: 5px 10px;
  cursor: pointer;
}

.send-button:hover {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}
</style>


================================================
FILE: Forms/ahmed150up_fluffy-robin-81.html
================================================
<div class="audio-player">
  <div class="player-controls">
    <div class="song-info">
      <div class="song-title">Song Title</div>
      <p class="artist">Artist</p>
    </div>
    <div class="progress-bar">
      <div class="progress"></div>
    </div>
    <div class="buttons">
      <button class="skip-btn"><svg viewBox="0 0 16 16" class="bi bi-skip-backward-fill" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M.5 3.5A.5.5 0 0 0 0 4v8a.5.5 0 0 0 1 0V8.753l6.267 3.636c.54.313 1.233-.066 1.233-.697v-2.94l6.267 3.636c.54.314 1.233-.065 1.233-.696V4.308c0-.63-.693-1.01-1.233-.696L8.5 7.248v-2.94c0-.63-.692-1.01-1.233-.696L1 7.248V4a.5.5 0 0 0-.5-.5z"></path> </svg></button>
      <button class="play-btn"><svg viewBox="0 0 16 16" class="bi bi-play-fill" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path> </svg></button>
      <button class="pause-btn"><svg viewBox="0 0 16 16" class="bi bi-pause-fill" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: rgb(66, 66, 66);"> <path fill="#424242" d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"></path> </svg></button>
      <button class="volume-btn"><svg viewBox="0 0 16 16" class="bi bi-volume-up-fill" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: rgb(66, 66, 66);"> <path fill="#424242" d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"></path> <path fill="#424242" d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"></path> <path fill="#424242" d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"></path> </svg></button>
      <div class="volume-slider">
        <div class="volume-slider-bar"></div>
        <div class="volume-slider-handle"></div>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by ahmed150up - Tags: pause, play, music, soundCloud */
.audio-player {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 80px;
  background-color: #f3f3f3;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
}

.player-controls {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.song-info {
  margin-bottom: 4px;
}

.song-title {
  font-size: 16px;
  color: #333;
  margin: 0;
}

.artist {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background-color: #ddd;
  border-radius: 2px;
  overflow: hidden;
}

.progress {
  width: 0;
  height: 100%;
  background-color: #ff5500;
  animation: progress-animation 10s linear infinite;
}

.buttons {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

.play-btn,
.pause-btn,
.skip-btn,
.volume-btn {
  font-size: 16px;
  color: #666;
  margin-right: 8px;
  transition: transform 0.2s ease-in-out;
}

.play-btn:hover,
.pause-btn:hover,
.skip-btn:hover,
.volume-btn:hover {
  transform: scale(1.2);
}

.volume-slider {
  width: 100px;
  height: 5px;
  background-color: #ccc;
  position: relative;
  margin-left: 10px;
}

.volume-slider-bar {
  height: 100%;
  background-color: #666;
}

.volume-slider-handle {
  width: 16px;
  height: 16px;
  background-color: #666;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
}

@keyframes progress-animation {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

</style>


================================================
FILE: Forms/ahmed150up_fuzzy-mole-98.html
================================================
<div class="login-card">
  <div class="card-header">
    <div class="log">Login</div>
  </div>
  <form>
    <div class="form-group">
      <label for="username">Username:</label>
      <input required="" name="username" id="username" type="text">
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input required="" name="password" id="password" type="password">
    </div>
    <div class="form-group">
      <input value="Login" type="submit">
    </div>
  </form>
</div>

<style>
/* From Uiverse.io by ahmed150up - Tags: login, form */
.login-card {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #e8e8e8;
  box-shadow: 2px 2px 10px #ccc;
}

.card-header {
  text-align: center;
  margin-bottom: 20px
}

.card-header .log {
  margin: 0;
  font-size: 24px;
  color: black;
}

.form-group {
  margin-bottom: 15px;
}

label {
  font-size: 18px;
  margin-bottom: 5px;
}

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 12px 20px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  transition: 0.5s;
}

input[type="submit"] {
  width: 100%;
  background-color: #333;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #ccc;
  color: black;
}

</style>


================================================
FILE: Forms/ahmed150up_quiet-goat-67.html
================================================
<div class="audio-player">
  <div class="album-cover"></div>
  <div class="player-controls">
    <div class="song-info">
      <div class="song-title">Song Title</div>
      <p class="artist">Artist</p>
    </div>
    <div class="progress-bar">
      <div class="progress"></div>
    </div>
    <div class="buttons">
      <button class="play-btn"><svg viewBox="0 0 16 16" class="bi bi-play-fill" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: white"> <path fill="white" d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path> </svg></button>
      <button class="pause-btn"><svg viewBox="0 0 16 16" class="bi bi-pause-fill" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: white"> <path fill="white" d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"></path> </svg></button>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by ahmed150up - Tags: form, spotify, music */
.audio-player {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 80px;
  background-color: #282828;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
}

.album-cover {
  width: 64px;
  height: 64px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 12px;
}

.player-controls {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.song-info {
  margin-bottom: 4px;
}

.song-title {
  font-size: 16px;
  color: #fff;
  margin: 0;
}

.artist {
  font-size: 12px;
  color: #b3b3b3;
  margin: 0;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background-color: #4f4f4f;
  border-radius: 2px;
  overflow: hidden;
}

.progress {
  width: 50%;
  height: 100%;
  background-color: #1db954;
  transform-origin: left;
  animation: progress-animation 10s linear infinite;
}

.buttons {
  display: flex;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

.play-btn,
.pause-btn {
  font-size: 16px;
  color: #fff;
  margin-right: 8px;
  transition: transform 0.2s ease-in-out;
}

.play-btn:hover,
.pause-btn:hover {
  transform: scale(1.2);
}

@keyframes progress-animation {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

</style>


================================================
FILE: Forms/ahmed150up_tiny-yak-9.html
================================================
<div class="card">
  <div class="card-header">
    <div class="text-header">Register</div>
  </div>
  <div class="card-body">
    <form action="#">
      <div class="form-group">
        <label for="username">Username:</label>
        <input required="" class="form-control" name="username" id="username" type="text">
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input required="" class="form-control" name="email" id="email" type="email">
      </div>
      <div class="form-group">
        <label for="password">Password:</label>
        <input required="" class="form-control" name="password" id="password" type="password">
      </div>
      <div class="form-group">
        <label for="confirm-password">Confirm Password:</label>
        <input required="" class="form-control" name="confirm-password" id="confirm-password" type="password">
      </div>
     <input type="submit" class="btn" value="submit">    </form>
  </div>
</div>

<style>
/* From Uiverse.io by ahmed150up - Tags: form */
.card {
  width: 350px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  margin: 10px;
}

.card-header {
  background-color: #333;
  padding: 16px;
  text-align: center;
}

.card-header .text-header {
  margin: 0;
  font-size: 18px;
  color: rgb(255, 255, 255);
}

.card-body {
  padding: 16px;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  margin-bottom: 1px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn {
  padding: 12px 24px;
  margin-left: 13px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  text-transform: uppercase;
  transition: background-color 0.2s ease-in-out;
  cursor: pointer
}

.btn:hover {
  background-color: #ccc;
  color: #333;
}
</style>


================================================
FILE: Forms/akshat-patel28_empty-pug-43.html
================================================
<div class="form-container">
  <form class="form">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="lock-icon"
      width="1em"
      height="1em"
      viewBox="0 0 24 24"
      stroke-width="0"
      fill="currentColor"
      stroke="currentColor"
    >
      <path
        d="M12 2C9.243 2 7 4.243 7 7v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7c0-2.757-2.243-5-5-5zM9 7c0-1.654 1.346-3 3-3s3 1.346 3 3v3H9V7zm4 10.723V20h-2v-2.277a1.993 1.993 0 0 1 .567-3.677A2.001 2.001 0 0 1 14 16a1.99 1.99 0 0 1-1 1.723z"
      ></path>
    </svg>
    <input class="toggle-input" id="toggle-checkbox" type="checkbox" />
    <p class="form-title">Welcome back</p>
    <p class="form-sub-title">
      Glad to see you again Login to your account below.
    </p>
    <div class="login-card">
      <div class="field-container">
        <input placeholder="" class="input" type="email" />
        <span class="placeholder">Email</span>
      </div>
      <button class="btn" type="button">
        <label class="btn-label" for="toggle-checkbox">Continue</label>
      </button>
    </div>
    <div class="password-card">
      <div class="field-container">
        <input placeholder="" class="input" type="password" />
        <span class="placeholder">Password</span>
      </div>
      <button class="btn" type="button">
        <label class="btn-label" for="toggle-checkbox">Login</label>
      </button>
    </div>
  </form>
</div>

<style>
/* From Uiverse.io by akshat-patel28  - Tags: form, transition, login , html, css, login form, css effect, input effect  */
.form-container {
  width: 400px;
  height: 254px;
  background: #fff;
  border-radius: 8px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.lock-icon {
  font-size: 20px;
  color: #0e2954;
}
.form {
  width: 100%;
  height: 100%;
  padding: 20px 15px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  box-sizing: border-box;
  color: #0e2954;
  position: relative;
}
.toggle-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.form-title {
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 25px;
  font-weight: 700;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}
.form-sub-title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}
.login-card,
.password-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 25px;
  gap: 20px;
  align-items: flex-end;
  position: absolute;
  width: calc(100% - 30px);
  transition: all 0.3s ease-in-out;
  bottom: 20px;
}
.login-card {
  left: 15px;
}
.password-card {
  left: 100%;
}
.field-container {
  border: 1px solid #a7a7a7;
  border-radius: 8px;
  width: 100%;
  height: 45px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.input {
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: transparent;
  position: relative;
  z-index: 11;
}
.placeholder {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: #a7a7a7;
  transition: all 0.3s ease;
  font-size: 16px;
}
.input:focus ~ .placeholder,
.input:not(:placeholder-shown) ~ .placeholder {
  top: 5px;
  transform: none;
  font-size: 12px;
}
.input:focus,
.input:not(:placeholder-shown) {
  height: 68%;
}
.btn {
  width: 100px;
  height: 40px;
  border-radius: 8px;
  box-shadow: rgba(100, 100, 111, 0.5) 0px 7px 29px 0px;
  background: #0e2954;
  border: none;
  outline: none;
}
.btn:focus {
  box-shadow: none;
}

.btn-label {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.toggle-input:checked ~ .login-card {
  left: -100%;
}
.toggle-input:checked ~ .password-card {
  left: 15px;
}

</style>
    

================================================
FILE: Forms/akshat-patel28_rare-cobra-61.html
================================================
 <div class="form-container">
      <p class="title">Welcome back</p>
      <form class="form">
        <input type="email" class="input" placeholder="Email">
        <input type="password" class="input" placeholder="Password">
        <p class="page-link">
          <span class="page-link-label">Forgot Password?</span>
        </p>
        <button class="form-btn">Log in</button>
      </form>
      <p class="sign-up-label">
        Don't have an account?<span class="sign-up-link">Sign up</span>
      </p>
      <div class="buttons-container">
        <div class="apple-login-button">
          <svg stroke="currentColor" fill="currentColor" stroke-width="0" class="apple-icon" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
            <path d="M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7zm-105.1-305c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z"></path>
          </svg>
          <span>Log in with Apple</span>
        </div>
        <div class="google-login-button">
          <svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" x="0px" y="0px" class="google-icon" viewBox="0 0 48 48" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
            <path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12
	c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24
	c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path>
            <path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657
	C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path>
            <path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36
	c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path>
            <path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571
	c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path>
          </svg>
          <span>Log in with Google</span>
        </div>
      </div>
    </div>
<style>
/* From Uiverse.io by akshat-patel28 - Tags: login, button, form, input, login form, apple login, google login */
.form-container {
  width: 350px;
  height: 500px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px 30px;
}

.title {
  text-align: center;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  margin: 10px 0 30px 0;
  font-size: 28px;
  font-weight: 800;
}

.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 15px;
}

.input {
  border-radius: 20px;
  border: 1px solid #c0c0c0;
  outline: 0 !important;
  box-sizing: border-box;
  padding: 12px 15px;
}

.page-link {
  text-decoration: underline;
  margin: 0;
  text-align: end;
  color: #747474;
  text-decoration-color: #747474;
}

.page-link-label {
  cursor: pointer;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-size: 9px;
  font-weight: 700;
}

.page-link-label:hover {
  color: #000;
}

.form-btn {
  padding: 10px 15px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  border-radius: 20px;
  border: 0 !important;
  outline: 0 !important;
  background: teal;
  color: white;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.form-btn:active {
  box-shadow: none;
}

.sign-up-label {
  margin: 0;
  font-size: 10px;
  color: #747474;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.sign-up-link {
  margin-left: 1px;
  font-size: 11px;
  text-decoration: underline;
  text-decoration-color: teal;
  color: teal;
  cursor: pointer;
  font-weight: 800;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.buttons-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 20px;
  gap: 15px;
}

.apple-login-button,
    .google-login-button {
  border-radius: 20px;
  box-sizing: border-box;
  padding: 10px 15px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
        rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-size: 11px;
  gap: 5px;
}

.apple-login-button {
  background-color: #000;
  color: #fff;
  border: 2px solid #000;
}

.google-login-button {
  border: 2px solid #747474;
}

.apple-icon,
    .google-icon {
  font-size: 18px;
  margin-bottom: 1px;
}
</style>


================================================
FILE: Forms/alexmaracinaru_tall-owl-30.html
================================================
<form class="form card">
  <div class="card_header">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
      <path fill="none" d="M0 0h24v24H0z"></path>
      <path fill="currentColor" d="M4 15h2v5h12V4H6v5H4V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6zm6-4V8l5 4-5 4v-3H2v-2h8z"></path>
    </svg>
    <h1 class="form_heading">Sign in</h1>
  </div>
  <div class="field">
    <label for="username">Username</label>
    <input class="input" name="username" type="text" placeholder="Username" id="username">
  </div>
  <div class="field">
    <label for="password">Password</label>
    <input class="input" name="user_password" type="password" placeholder="Password" id="password">
  </div>
  <div class="field">
    <button class="button">Login</button>
  </div>
</form>
<style>
/* From Uiverse.io by alexmaracinaru - Tags: login, form */
.card {
  width: 190px;
  height: 254px;
  background: #F4F6FB;
  border: 1px solid white;
  box-shadow: 10px 10px 64px 0px rgba(180, 180, 207, 0.75);
  -webkit-box-shadow: 10px 10px 64px 0px rgba(186, 186, 202, 0.75);
  -moz-box-shadow: 10px 10px 64px 0px rgba(208, 208, 231, 0.75);
}

.form {
  padding: 25px;
}

.card_header {
  display: flex;
  align-items: center;
}

.card svg {
  color: #7878bd;
  margin-bottom: 20px;
  margin-right: 5px;
}

.form_heading {
  padding-bottom: 20px;
  font-size: 21px;
  color: #7878bd;
}

.field {
  padding-bottom: 10px;
}

.input {
  border-radius: 5px;
  background-color: #e9e9f7;
  padding: 5px;
  width: 100%;
  color: #7a7ab3;
  border: 1px solid #dadaf7
}

.input:focus-visible {
  outline: 1px solid #aeaed6;
}

.input::placeholder {
  color: #bcbcdf;
}

label {
  color: #B2BAC8;
  font-size: 14px;
  display: block;
  padding-bottom: 4px;
}

button {
  background-color: #7878bd;
  margin-top: 10px;
  font-size: 14px;
  padding: 7px 12px;
  height: auto;
  font-weight: 500;
  color: white;
  border: none;
}

button:hover {
  background-color: #5f5f9c;
}
</style>


================================================
FILE: Forms/alexruix_fat-cobra-72.html
================================================
<div class="card">
  <h4 class="title">Log In!</h4>
  <form>
    <div class="field">
      <svg class="input-icon" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
      <path d="M207.8 20.73c-93.45 18.32-168.7 93.66-187 187.1c-27.64 140.9 68.65 266.2 199.1 285.1c19.01 2.888 36.17-12.26 36.17-31.49l.0001-.6631c0-15.74-11.44-28.88-26.84-31.24c-84.35-12.98-149.2-86.13-149.2-174.2c0-102.9 88.61-185.5 193.4-175.4c91.54 8.869 158.6 91.25 158.6 183.2l0 16.16c0 22.09-17.94 40.05-40 40.05s-40.01-17.96-40.01-40.05v-120.1c0-8.847-7.161-16.02-16.01-16.02l-31.98 .0036c-7.299 0-13.2 4.992-15.12 11.68c-24.85-12.15-54.24-16.38-86.06-5.106c-38.75 13.73-68.12 48.91-73.72 89.64c-9.483 69.01 43.81 128 110.9 128c26.44 0 50.43-9.544 69.59-24.88c24 31.3 65.23 48.69 109.4 37.49C465.2 369.3 496 324.1 495.1 277.2V256.3C495.1 107.1 361.2-9.332 207.8 20.73zM239.1 304.3c-26.47 0-48-21.56-48-48.05s21.53-48.05 48-48.05s48 21.56 48 48.05S266.5 304.3 239.1 304.3z"></path></svg>
      <input autocomplete="off" id="logemail" placeholder="Email" class="input-field" name="logemail" type="email">
    </div>
    <div class="field">
      <svg class="input-icon" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
      <path d="M80 192V144C80 64.47 144.5 0 224 0C303.5 0 368 64.47 368 144V192H384C419.3 192 448 220.7 448 256V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V256C0 220.7 28.65 192 64 192H80zM144 192H304V144C304 99.82 268.2 64 224 64C179.8 64 144 99.82 144 144V192z"></path></svg>
      <input autocomplete="off" id="logpass" placeholder="Password" class="input-field" name="logpass" type="password">
    </div>
    <button class="btn" type="submit">Login</button>
    <a href="#" class="btn-link">Forgot your password?</a>
  </form>
</div>
<style>
/* From Uiverse.io by alexruix - Tags: login, form */
.card {
 width: 190px;
 padding: 1.9rem 1.2rem;
 text-align: center;
 background: #2a2b38;
}

/*Inputs*/
.field {
 margin-top: .5rem;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: .5em;
 background-color: #1f2029;
 border-radius: 4px;
 padding: .5em 1em;
}

.input-icon {
 height: 1em;
 width: 1em;
 fill: #ffeba7;
}

.input-field {
 background: none;
 border: none;
 outline: none;
 width: 100%;
 color: #d3d3d3;
}

/*Text*/
.title {
 margin-bottom: 1rem;
 font-size: 1.5em;
 font-weight: 500;
 color: #f5f5f5;
}

/*Buttons*/
.btn {
 margin: 1rem;
 border: none;
 border-radius: 4px;
 font-weight: bold;
 font-size: .8em;
 text-transform: uppercase;
 padding: 0.6em 1.2em;
 background-color: #ffeba7;
 color: #5e6681;
 box-shadow: 0 8px 24px 0 rgb(255 235 167 / 20%);
 transition: all .3s ease-in-out;
}

.btn-link {
 color: #f5f5f5;
 display: block;
 font-size: .75em;
 transition: color .3s ease-out;
}

/*Hover & focus*/
.field input:focus::placeholder {
 opacity: 0;
 transition: opacity .3s;
}

.btn:hover {
 background-color: #5e6681;
 color: #ffeba7;
 box-shadow: 0 8px 24px 0 rgb(16 39 112 / 20%);
}

.btn-link:hover {
 color: #ffeba7;
}

</style>


================================================
FILE: Forms/alexruix_pink-frog-31.html
================================================
<!-- From Uiverse.io by alexruix  - Tags: simple, email, purple, minimalist, form, tailwind, tailwindcss -->
<div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-lg text-center">
    <h1 class="text-2xl font-bold sm:text-3xl">Welcome Back!</h1>
    <p class="mt-4 text-gray-600">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Et libero nulla
      eaque error neque ipsa culpa autem, at itaque nostrum!
    </p>
  </div>

  <form class="mx-auto mb-0 mt-8 max-w-md space-y-4" action="#">
    <div>
      <label class="sr-only" for="email">Email</label>
      <div class="relative">
        <input
          placeholder="Enter your email"
          class="w-full rounded-lg border-gray-300 p-4 pe-12 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent"
          id="email"
          type="email"
        />
        <span class="absolute inset-y-0 end-0 grid place-content-center px-4">
          <svg
            stroke="currentColor"
            viewBox="0 0 24 24"
            fill="none"
            class="h-6 w-6 text-gray-400"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
              stroke-width="2"
              stroke-linejoin="round"
              stroke-linecap="round"
            ></path>
          </svg>
        </span>
      </div>
    </div>

    <div>
      <label class="sr-only" for="password">Password</label>
      <div class="relative">
        <input
          placeholder="Enter your password"
          class="w-full rounded-lg border-gray-300 p-4 pe-12 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent"
          id="password"
          type="password"
        />
        <span class="absolute inset-y-0 end-0 grid place-content-center px-4">
          <svg
            stroke="currentColor"
            viewBox="0 0 24 24"
            fill="none"
            class="h-6 w-6 text-gray-400"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
              stroke-width="2"
              stroke-linejoin="round"
              stroke-linecap="round"
            ></path>
            <path
              d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
              stroke-width="2"
              stroke-linejoin="round"
              stroke-linecap="round"
            ></path>
          </svg>
        </span>
      </div>
    </div>

    <div class="flex items-center justify-between">
      <p class="text-sm text-gray-600">
        No account yet?
        <a href="#" class="underline">Create one</a>
      </p>
      <button
        class="inline-block rounded-lg bg-purple-600 px-5 py-3 text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
        type="submit"
      >
        Sign In
      </button>
    </div>
  </form>
</div>


    

================================================
FILE: Forms/alexruix_stupid-lion-99.html
================================================
<div class="main">  	
		<input type="checkbox" id="chk" aria-hidden="true">

			<div class="login">
				<form class="form">
					<label for="chk" aria-hidden="true">Log in</label>
					<input class="input" type="email" name="email" placeholder="Email" required="">
					<input class="input" type="password" name="pswd" placeholder="Password" required="">
					<button>Log in</button>
				</form>
			</div>

      <div class="register">
				<form class="form">
					<label for="chk" aria-hidden="true">Register</label>
					<input class="input" type="text" name="txt" placeholder="Username" required="">
					<input class="input" type="email" name="email" placeholder="Email" required="">
					<input class="input" type="password" name="pswd" placeholder="Password" required="">
					<button>Register</button>
				</form>
			</div>
	</div>
<style>
/* From Uiverse.io by alexruix - Tags: login, form */
.main {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #240046;
  max-height: 420px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 7px 7px 10px 3px #24004628;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
}

/*checkbox to switch from sign up to login*/
#chk {
  display: none;
}

/*Login*/
.login {
  position: relative;
  width: 100%;
  height: 100%;
}

.login label {
  margin: 25% 0 5%;
}

label {
  color: #fff;
  font-size: 2rem;
  justify-content: center;
  display: flex;
  font-weight: bold;
  cursor: pointer;
  transition: .5s ease-in-out;
}

.input {
  width: 100%;
  height: 40px;
  background: #e0dede;
  padding: 10px;
  border: none;
  outline: none;
  border-radius: 4px;
}

/*Register*/
.register {
  background: #eee;
  border-radius: 60% / 10%;
  transform: translateY(5%);
  transition: .8s ease-in-out;
}

.register label {
  color: #573b8a;
  transform: scale(.6);
}

#chk:checked ~ .register {
  transform: translateY(-60%);
}

#chk:checked ~ .register label {
  transform: scale(1);
  margin: 10% 0 5%;
}

#chk:checked ~ .login label {
  transform: scale(.6);
  margin: 5% 0 5%;
}   
/*Button*/
.form button {
  width: 85%;
  height: 40px;
  margin: 12px auto 10%;
  color: #fff;
  background: #573b8a;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: .2s ease-in;
}

.form button:hover {
  background-color: #6d44b8;
}
</style>


================================================
FILE: Forms/alexruix_tender-badger-50.html
================================================
<div class="form-box">
<form class="form">
    <span class="title">Sign up</span>
    <span class="subtitle">Create a free account with your email.</span>
    <div class="form-container">
      <input type="text" class="input" placeholder="Full Name">
			<input type="email" class="input" placeholder="Email">
			<input type="password" class="input" placeholder="Password">
    </div>
    <button>Sign up</button>
</form>
<div class="form-section">
  <p>Have an account? <a href="">Log in</a> </p>
</div>
</div>
<style>
/* From Uiverse.io by alexruix - Tags: form, sign-up */
.form-box {
  max-width: 300px;
  background: #f1f7fe;
  overflow: hidden;
  border-radius: 16px;
  color: #010101;
}

.form {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 24px 24px;
  gap: 16px;
  text-align: center;
}

/*Form text*/
.title {
  font-weight: bold;
  font-size: 1.6rem;
}

.subtitle {
  font-size: 1rem;
  color: #666;
}

/*Inputs box*/
.form-container {
  overflow: hidden;
  border-radius: 8px;
  background-color: #fff;
  margin: 1rem 0 .5rem;
  width: 100%;
}

.input {
  background: none;
  border: 0;
  outline: 0;
  height: 40px;
  width: 100%;
  border-bottom: 1px solid #eee;
  font-size: .9rem;
  padding: 8px 15px;
}

.form-section {
  padding: 16px;
  font-size: .85rem;
  background-color: #e0ecfb;
  box-shadow: rgb(0 0 0 / 8%) 0 -1px;
}

.form-section a {
  font-weight: bold;
  color: #0066ff;
  transition: color .3s ease;
}

.form-section a:hover {
  color: #005ce6;
  text-decoration: underline;
}

/*Button*/
.form button {
  background-color: #0066ff;
  color: #fff;
  border: 0;
  border-radius: 24px;
  padding: 10px 16px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .3s ease;
}

.form button:hover {
  background-color: #005ce6;
}
</style>


================================================
FILE: Forms/ammarsaa_chatty-firefox-25.html
================================================
<form class="form">
    <p class="title">Register </p>
    <p class="message">Signup now and get full access to our app. </p>
        <div class="flex">
        <label>
            <input class="input" type="text" placeholder="" required="">
            <span>Firstname</span>
        </label>

        <label>
            <input class="input" type="text" placeholder="" required="">
            <span>Lastname</span>
        </label>
    </div>  
            
    <label>
        <input class="input" type="email" placeholder="" required="">
        <span>Email</span>
    </label> 
        
    <label>
        <input class="input" type="password" placeholder="" required="">
        <span>Password</span>
    </label>
    <label>
        <input class="input" type="password" placeholder="" required="">
        <span>Confirm password</span>
    </label>
    <button class="submit">Submit</button>
    <p class="signin">Already have an acount ? <a href="#">Signin</a> </p>
</form>
<style>
/* From Uiverse.io by ammarsaa - Source: https://uiverse.io/Yaya12085/short-turtle-53 AND https://uiverse.io/micaelgomestavares/purple-cow-92 - Tags: simple, blue, black, form, dark, sign-up */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
  padding: 20px;
  border-radius: 20px;
  position: relative;
  background-color: #1a1a1a;
  color: #fff;
  border: 1px solid #333;
}

.title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -1px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 30px;
  color: #00bfff;
}

.title::before {
  width: 18px;
  height: 18px;
}

.title::after {
  width: 18px;
  height: 18px;
  animation: pulse 1s linear infinite;
}

.title::before,
.title::after {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  border-radius: 50%;
  left: 0px;
  background-color: #00bfff;
}

.message, 
.signin {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.7);
}

.signin {
  text-align: center;
}

.signin a:hover {
  text-decoration: underline royalblue;
}

.signin a {
  color: #00bfff;
}

.flex {
  display: flex;
  width: 100%;
  gap: 6px;
}

.form label {
  position: relative;
}

.form label .input {
  background-color: #333;
  color: #fff;
  width: 100%;
  padding: 20px 05px 05px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 10px;
}

.form label .input + span {
  color: rgba(255, 255, 255, 0.5);
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
}

.form label .input:placeholder-shown + span {
  top: 12.5px;
  font-size: 0.9em;
}

.form label .input:focus + span,
.form label .input:valid + span {
  color: #00bfff;
  top: 0px;
  font-size: 0.7em;
  font-weight: 600;
}

.input {
  font-size: medium;
}

.submit {
  border: none;
  outline: none;
  padding: 10px;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  transform: .3s ease;
  background-color: #00bfff;
}

.submit:hover {
  background-color: #00bfff96;
}

@keyframes pulse {
  from {
    transform: scale(0.9);
    opacity: 1;
  }

  to {
    transform: scale(1.8);
    opacity: 0;
  }
}
</style>


================================================
FILE: Forms/andrew-demchenk0_afraid-cougar-9.html
================================================
<div class="wrapper">
        <div class="card-switch">
            <label class="switch">
               <input type="checkbox" class="toggle">
               <span class="slider"></span>
               <span class="card-side"></span>
               <div class="flip-card__inner">
                  <div class="flip-card__front">
                     <div class="title">Log in</div>
                     <form class="flip-card__form" action="">
                        <input class="flip-card__input" name="email" placeholder="Email" type="email">
                        <input class="flip-card__input" name="password" placeholder="Password" type="password">
                        <button class="flip-card__btn">Let`s go!</button>
                     </form>
                  </div>
                  <div class="flip-card__back">
                     <div class="title">Sign up</div>
                     <form class="flip-card__form" action="">
                        <input class="flip-card__input" placeholder="Name" type="name">
                        <input class="flip-card__input" name="email" placeholder="Email" type="email">
                        <input class="flip-card__input" name="password" placeholder="Password" type="password">
                        <button class="flip-card__btn">Confirm!</button>
                     </form>
                  </div>
               </div>
            </label>
        </div>   
   </div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: 3d, form, sign-up, toggle, animated, login form, toggle switch, log in, sign up form, click animation */
.wrapper {
  --input-focus: #2d8cf0;
  --font-color: #323232;
  --font-color-sub: #666;
  --bg-color: #fff;
  --bg-color-alt: #666;
  --main-color: #323232;
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
}
/* switch card */
.switch {
  transform: translateY(-200px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 50px;
  height: 20px;
}

.card-side::before {
  position: absolute;
  content: 'Log in';
  left: -70px;
  top: 0;
  width: 100px;
  text-decoration: underline;
  color: var(--font-color);
  font-weight: 600;
}

.card-side::after {
  position: absolute;
  content: 'Sign up';
  left: 70px;
  top: 0;
  width: 100px;
  text-decoration: none;
  color: var(--font-color);
  font-weight: 600;
}

.toggle {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-colorcolor);
  transition: 0.3s;
}

.slider:before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  border: 2px solid var(--main-color);
  border-radius: 5px;
  left: -2px;
  bottom: 2px;
  background-color: var(--bg-color);
  box-shadow: 0 3px 0 var(--main-color);
  transition: 0.3s;
}

.toggle:checked + .slider {
  background-color: var(--input-focus);
}

.toggle:checked + .slider:before {
  transform: translateX(30px);
}

.toggle:checked ~ .card-side:before {
  text-decoration: none;
}

.toggle:checked ~ .card-side:after {
  text-decoration: underline;
}

/* card */ 

.flip-card__inner {
  width: 300px;
  height: 350px;
  position: relative;
  background-color: transparent;
  perspective: 1000px;
    /* width: 100%;
    height: 100%; */
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.toggle:checked ~ .flip-card__inner {
  transform: rotateY(180deg);
}

.toggle:checked ~ .flip-card__front {
  box-shadow: none;
}

.flip-card__front, .flip-card__back {
  padding: 20px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: lightgrey;
  gap: 20px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
}

.flip-card__back {
  width: 100%;
  transform: rotateY(180deg);
}

.flip-card__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.title {
  margin: 20px 0 20px 0;
  font-size: 25px;
  font-weight: 900;
  text-align: center;
  color: var(--main-color);
}

.flip-card__input {
  width: 250px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 15px;
  font-weight: 600;
  color: var(--font-color);
  padding: 5px 10px;
  outline: none;
}

.flip-card__input::placeholder {
  color: var(--font-color-sub);
  opacity: 0.8;
}

.flip-card__input:focus {
  border: 2px solid var(--input-focus);
}

.flip-card__btn:active, .button-confirm:active {
  box-shadow: 0px 0px var(--main-color);
  transform: translate(3px, 3px);
}

.flip-card__btn {
  margin: 20px 0 20px 0;
  width: 120px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 17px;
  font-weight: 600;
  color: var(--font-color);
  cursor: pointer;
} 
</style>


================================================
FILE: Forms/andrew-demchenk0_little-treefrog-9.html
================================================
<form class="form">
  <div class="title">Welcome,<br><span>sign up to continue</span></div>
  <input type="email" placeholder="Email" name="email" class="input">
  <input type="password" placeholder="Password" name="password" class="input">
  <div class="login-with">
    <div class="button-log"></div>
    <div class="button-log">
      <svg class="icon" height="56.6934px" id="Layer_1" style="enable-background:new 0 0 56.6934 56.6934;" version="1.1" viewBox="0 0 56.6934 56.6934" width="56.6934px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M51.981,24.4812c-7.7173-0.0038-15.4346-0.0019-23.1518-0.001c0.001,3.2009-0.0038,6.4018,0.0019,9.6017  c4.4693-0.001,8.9386-0.0019,13.407,0c-0.5179,3.0673-2.3408,5.8723-4.9258,7.5991c-1.625,1.0926-3.492,1.8018-5.4168,2.139  c-1.9372,0.3306-3.9389,0.3729-5.8713-0.0183c-1.9651-0.3921-3.8409-1.2108-5.4773-2.3649  c-2.6166-1.8383-4.6135-4.5279-5.6388-7.5549c-1.0484-3.0788-1.0561-6.5046,0.0048-9.5805  c0.7361-2.1679,1.9613-4.1705,3.5708-5.8002c1.9853-2.0324,4.5664-3.4853,7.3473-4.0811c2.3812-0.5083,4.8921-0.4113,7.2234,0.294  c1.9815,0.6016,3.8082,1.6874,5.3044,3.1163c1.5125-1.5039,3.0173-3.0164,4.527-4.5231c0.7918-0.811,1.624-1.5865,2.3908-2.4196  c-2.2928-2.1218-4.9805-3.8274-7.9172-4.9056C32.0723,4.0363,26.1097,3.995,20.7871,5.8372  C14.7889,7.8907,9.6815,12.3763,6.8497,18.0459c-0.9859,1.9536-1.7057,4.0388-2.1381,6.1836  C3.6238,29.5732,4.382,35.2707,6.8468,40.1378c1.6019,3.1768,3.8985,6.001,6.6843,8.215c2.6282,2.0958,5.6916,3.6439,8.9396,4.5078  c4.0984,1.0993,8.461,1.0743,12.5864,0.1355c3.7284-0.8581,7.256-2.6397,10.0725-5.24c2.977-2.7358,5.1006-6.3403,6.2249-10.2138  C52.5807,33.3171,52.7498,28.8064,51.981,24.4812z"></path></svg>
    </div>
    <div class="button-log">
      <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="56.693px" viewBox="0 0 56.693 56.693" version="1.1" id="Layer_1" height="56.693px" class="icon"><path d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029  c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77  L40.43,21.739z"></path></svg>
    </div>
  </div>
  <button class="button-confirm">Let`s go →</button>
</form>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: login, email, social, form, submit, confirm, password, welcome */
.form {
  --input-focus: #2d8cf0;
  --font-color: #323232;
  --font-color-sub: #666;
  --bg-color: #fff;
  --main-color: #323232;
  padding: 20px;
  background: lightgrey;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
}

.title {
  color: var(--font-color);
  font-weight: 900;
  font-size: 20px;
  margin-bottom: 25px;
}

.title span {
  color: var(--font-color-sub);
  font-weight: 600;
  font-size: 17px;
}

.input {
  width: 250px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 15px;
  font-weight: 600;
  color: var(--font-color);
  padding: 5px 10px;
  outline: none;
}

.input::placeholder {
  color: var(--font-color-sub);
  opacity: 0.8;
}

.input:focus {
  border: 2px solid var(--input-focus);
}

.login-with {
  display: flex;
  gap: 20px;
}

.button-log {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  color: var(--font-color);
  font-size: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon {
  width: 24px;
  height: 24px;
  fill: var(--main-color);
}

.button-log:active, .button-confirm:active {
  box-shadow: 0px 0px var(--main-color);
  transform: translate(3px, 3px);
}

.button-confirm {
  margin: 50px auto 0 auto;
  width: 120px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 17px;
  font-weight: 600;
  color: var(--font-color);
  cursor: pointer;
}

</style>


================================================
FILE: Forms/andrew-demchenk0_ordinary-lizard-16.html
================================================
<form class="form">
  <ul class="wrapper">
    
    <li style="--i:4;"><input class="input" type="text" placeholder="Name" required=""></li>
    <li style="--i:3;"><input class="input" placeholder="Phone number" required="" name="phone"></li>
    <li style="--i:2;"><input class="input" type="email" placeholder="E-mail" required="" name="email"></li>
    <button style="--i:1;">Submit</button>
  </ul>
</form>

<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: form */
/* you can choose any color you want. don't be afraid to experiment  */

.input, button {
  width: 100%;
  height: 40px;
  position: relative;
  padding: 10px;
  border: 0.1px solid #575cb5;
}

button {
  background: #6d74e3;
  border: none;
}

.wrapper {
  position: relative;
  transform: skewY(-14deg);
}

.wrapper li, button {
  position: relative;
  list-style: none;
  width: 200px;
  z-index: var(--i);
  transition: 0.3s;
  color: white;
}

.wrapper li::before, button::before {
  position: absolute;
  content: '';
  background: #6d74e3;
  top: 0;
  left: -40px;
  width: 40px;
  height: 40px;
  transform-origin: right;
  transform: skewY(45deg);
  transition: 0.3s;
}

.wrapper li::after, button::after {
  position: absolute;
  content: '';
  background: #6d74e3;
  width: 200px;
  height: 40px;
  top: -40px;
  left: 0;
  transform-origin: bottom;
  transform: skewX(45deg);
  transition: 0.3s;
}

.wrapper li:nth-child(1)::after, .wrapper li:nth-child(1)::before {
  background-color: #d8daf7;
}

.wrapper li:nth-child(2)::after, .wrapper li:nth-child(2)::before {
  background-color: #c2c5f3;
}

.wrapper li:nth-child(3)::after, .wrapper li:nth-child(3)::before {
  background-color: #989deb;
}

li .input {
  outline: none;
  border: none;
  color: black;
}

li .input::placeholder {
  color: black;
}

li:nth-child(1) .input {
  background: #d8daf7;
}

li:nth-child(2) .input {
  background: #c2c5f3;
}

li:nth-child(3) .input {
  background: #989deb;
}


li:nth-child(1) .input:focus {
  outline: none;
  border: 3.5px solid #d8daf7;
}

li:nth-child(2) .input:focus {
  outline: none;
  border: 3.5px solid #c2c5f3;
}

li:nth-child(3) .input:focus {
  outline: none;
  border: 3.5px solid #989deb;
}

.wrapper li:hover, button:hover {
  transform: translateX(-20px);
}

button:hover, button:hover::before, button:hover::after {
  background: #575cb5;
}

button:active {
  transform: translateX(0px);
}


</style>


================================================
FILE: Forms/andrew-demchenk0_purple-bird-74.html
================================================

<section class="section_form">
  <form id="consultation-form" class="feed-form" action="#">
    <input required="" placeholder="Name" type="text">
    <input name="phone" required="" placeholder="Phone number">
    <input name="email" required="" placeholder="E-mail" type="email">
    <button class="button_submit">ORDER</button>
  </form>
</section>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: order, form */
.feed-form {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  width: 300px;
}

.feed-form input {
  height: 54px;
  border-radius: 5px;
  background: white;
  margin-bottom: 15px;
  border: none;
  padding: 0 20px;
  font-weight: 300;
  font-size: 14px;
  color: #4B4B4B;
}

.button_submit:hover, .feed-form input:hover {
  transform: scale(1.009);
  box-shadow: 0px 0px 3px 0px #212529;
}

.button_submit {
  width: 100%;
  height: 54px;
  font-size: 14px;
  color: white;
  background: red;
  border-radius: 5px;
  border: none;
  font-weight: 500;
  text-transform: uppercase;
}

</style>


================================================
FILE: Forms/andrew-demchenk0_yellow-cheetah-66.html
================================================
<form class="subscribe-form">
    <input type="email" placeholder="example@mail.com" class="subscribe-input">
    <button class="subscribe-btn">Submit</button>
</form>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: email, form, submit, outlined, subscribe */
.subscribe-form {
  --main-focus: #2d8cf0;
  --font-color: #323232;
  --font-color-sub: #666;
  --bg-color: #fff;
  --main-color: #323232;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  display: flex;
  flex-direction: row;
  width: 250px;
  height: 35px;
  border-radius: 5px;
  box-shadow: 4px 4px var(--main-color);
}

.subscribe-input {
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  border: 2px solid var(--main-color);
  border-right: 0;
  border-radius: 5px 0 0 5px;
  font-size: 15px;
  font-weight: 500;
  color: var(--font-color);
  background: var(--bg-color);
}

.subscribe-btn {
  width: 100px;
  height: 100%;
  border: 2px solid var(--main-focus);
  border-radius: 0 5px 5px 0;
  background-color: var(--main-focus);
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 500;
  color: var(--bg-color);
  cursor: pointer;
}

.subscribe-input:focus {
  outline: none;
  border: 2px solid var(--main-focus);
  border-right: 0;
}
    
</style>


================================================
FILE: Forms/bociKond_dull-mole-77.html
================================================
<form class="form">
  <span class="input-span">
  <label for="email" class="label">Email</label>
  <input type="email" name="email" id="email"></span>
  <span class="input-span">
  <label for="password" class="label">Password</label>
  <input type="password" name="password" id="password"></span>
  <span class="span"><a href="#">Forgot password?</a></span>
  <input class="submit" type="submit" value="Log in">
  <span class="span">Don't have an account? <a href="#">Sign up</a></span>
</form>
<style>
/* From Uiverse.io by bociKond - Source: https://dribbble.com/shots/21363706-Haze-Website-Log-in-Page - Tags: form, hover, focus, submit, label */
form {
  --bg-light: #efefef;
  --bg-dark: #707070;
  --clr: #58BC82;
  --clr-alpha: #9c9c9c60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.form .input-span {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

form input[type="email"],
form input[type="password"] {
  border-radius: 0.5rem;
  padding: 1rem 0.75rem;
  width: 100%;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--clr-alpha);
  outline: 2px solid var(--bg-dark);
}

form input[type="email"]:focus,
form input[type="password"]:focus {
  outline: 2px solid var(--clr);
}

.label {
  align-self: flex-start;
  color: var(--clr);
  font-weight: 600;
}

form .submit {
  padding: 1rem 0.75rem;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 3rem;
  background-color: var(--bg-dark);
  color: var(--bg-light);
  border: none;
  cursor: pointer;
  transition: all 300ms;
  font-weight: 600;
  font-size: .9rem;
}

form .submit:hover {
  background-color: var(--clr);
  color: var(--bg-dark);
}

.span {
  text-decoration: none;
  color: var(--bg-dark);
}

.span a {
  color: var(--clr);
}
</style>


================================================
FILE: Forms/boryanakrasteva_average-bear-68.html
================================================
<form class="form">
    <label class="label">username</label>
    <input class="input" type="text">
    <label class="label">password</label>
    <input class="input" type="text"> 
    <button>Submit</button>
</form>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: form */
.form {
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 10px;
  padding: 20px 40px;
  background-color: rgba(245, 245, 245, 0.034);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.192);
  transition: .2s linear;
}

.form button {
  align-self: flex-end;
}

.form:hover {
  transform: scale(1.1);
}

.label {
  font-size: 14px;
  margin-bottom: -10.6px;
}

.input {
  height: 25px;
  width: 100%;
  border: 0.5px solid white;
  background-color: transparent;
  color: white;
  padding: 5px;
  border-radius: 5px;
  transition: .2s linear;
  position: relative;
}

.input:focus {
  outline: none;
  background-color: rgba(173, 173, 173, 0.233);
  box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.137);
}

button {
  border: none;
  padding: 4px 10px;
  border-radius: 5px;
  transition: .2s linear;
}

button:hover {
  background-color: rgba(255, 255, 255, 0.74);
  box-shadow: 2px 2px 10px rgba(124, 124, 124, 0.192);
}

</style>


================================================
FILE: Forms/codebykay101_warm-pig-33.html
================================================
<div class="container">
    <form class="form">
      <div class="descr">Contact us</div>
      <div class="input">
          <input required="" autocomplete="off" type="text">
          <label for="name">Name</label>
      </div>

      <div class="input">
          <input required="" autocomplete="off" name="email" type="text">
          <label for="email">E-mail</label>
      </div>

      <div class="input">
          <textarea required="" cols="30" rows="1" id="message"></textarea>
          <label for="message">Message</label>
      </div>
      <button>Send message →</button>
    </form>
</div>

<style>
/* From Uiverse.io by codebykay101 - Tags: animation, form, contact, hover effect, css effect */
.container {
  width: 350px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 3px;
  border: 1px solid #396afc;
  background: linear-gradient(to right, #005c97, #363795);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.container form .descr {
  font-size: 20px;
  font-weight: 500;
  color: #e8e8e8;
  margin-bottom: 25px;
  margin-top: 25px;
  text-align: center;
}

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

.input, textarea {
  margin: 1em 0 1em 0;
  width: 300px;
  position: relative;
}

.input input, textarea {
  font-size: 100%;
  padding: 0.7em;
  outline: none;
  color: #e8e8e8;
  border: none;
  border-bottom: 2px solid #e8e8e8;
  background: transparent;
  border-radius: none;
  width: 100%;
  resize: none;
}

.input label {
  font-size: 100%;
  position: absolute;
  left: 0;
  color: #e8e8e8;
  padding: 0.7em;
  margin-left: 0.1em;
  pointer-events: none;
  transition: all 0.5s ease;
  text-transform: uppercase;
}

.input :is(input:focus, input:valid)~label {
  transform: translateY(-50%) scale(.9);
  margin: 0em;
  padding: 0.4em;
  background: transparent;
}

.input textarea:focus ~ label,
.input textarea:valid ~ label {
  transform: translateY(-50%) scale(.9);
  margin: 0em;
  padding: 0.4em;
  background: transparent;
}

.inputGroup :is(input:focus, input:valid) {
  border-color: rgb(37, 37, 211);
}

.form button {
  color: #e8e8e8;
  font-size: 15px;
  align-self: flex-start;
  padding: 0.6em;
  border: none;
  cursor: pointer;
  margin-bottom: 50px;
  background: transparent;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

.form button:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e8e8e8;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.form button:hover:before {
  opacity: 0.2;
}

.form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


</style>


================================================
FILE: Forms/csozidev_sour-rabbit-69.html
================================================
<form class="form">
  <svg viewBox="0 0 108 24" height="24" width="108" xmlns="http://www.w3.org/2000/svg"><title>assets</title><path fill="#737373" d="M44.836,4.6V18.4h-2.4V7.583H42.4L38.119,18.4H36.531L32.142,7.583h-.029V18.4H29.9V4.6h3.436L37.3,14.83h.058L41.545,4.6Zm2,1.049a1.268,1.268,0,0,1,.419-.967,1.413,1.413,0,0,1,1-.39,1.392,1.392,0,0,1,1.02.4,1.3,1.3,0,0,1,.4.958,1.248,1.248,0,0,1-.414.953,1.428,1.428,0,0,1-1.01.385A1.4,1.4,0,0,1,47.25,6.6a1.261,1.261,0,0,1-.409-.948M49.41,18.4H47.081V8.507H49.41Zm7.064-1.694a3.213,3.213,0,0,0,1.145-.241,4.811,4.811,0,0,0,1.155-.635V18a4.665,4.665,0,0,1-1.266.481,6.886,6.886,0,0,1-1.554.164,4.707,4.707,0,0,1-4.918-4.908,5.641,5.641,0,0,1,1.4-3.932,5.055,5.055,0,0,1,3.955-1.545,5.414,5.414,0,0,1,1.324.168,4.431,4.431,0,0,1,1.063.39v2.233a4.763,4.763,0,0,0-1.1-.611,3.184,3.184,0,0,0-1.15-.217,2.919,2.919,0,0,0-2.223.9,3.37,3.37,0,0,0-.847,2.416,3.216,3.216,0,0,0,.813,2.338,2.936,2.936,0,0,0,2.209.837M65.4,8.343a2.952,2.952,0,0,1,.5.039,2.1,2.1,0,0,1,.375.1v2.358a2.04,2.04,0,0,0-.534-.255,2.646,2.646,0,0,0-.852-.12,1.808,1.808,0,0,0-1.448.722,3.467,3.467,0,0,0-.592,2.223V18.4H60.525V8.507h2.329v1.559h.038A2.729,2.729,0,0,1,63.855,8.8,2.611,2.611,0,0,1,65.4,8.343m1,5.254A5.358,5.358,0,0,1,67.792,9.71a5.1,5.1,0,0,1,3.85-1.434,4.742,4.742,0,0,1,3.623,1.381,5.212,5.212,0,0,1,1.3,3.729,5.257,5.257,0,0,1-1.386,3.83,5.019,5.019,0,0,1-3.772,1.424,4.935,4.935,0,0,1-3.652-1.352A4.987,4.987,0,0,1,66.406,13.6m2.425-.077a3.535,3.535,0,0,0,.7,2.368,2.505,2.505,0,0,0,2.011.818,2.345,2.345,0,0,0,1.934-.818,3.783,3.783,0,0,0,.664-2.425,3.651,3.651,0,0,0-.688-2.411,2.389,2.389,0,0,0-1.929-.813,2.44,2.44,0,0,0-1.988.852,3.707,3.707,0,0,0-.707,2.43m11.2-2.416a1,1,0,0,0,.318.785,5.426,5.426,0,0,0,1.4.717,4.767,4.767,0,0,1,1.959,1.256,2.6,2.6,0,0,1,.563,1.689A2.715,2.715,0,0,1,83.2,17.794a4.558,4.558,0,0,1-2.9.847,6.978,6.978,0,0,1-1.362-.149,6.047,6.047,0,0,1-1.265-.38v-2.29a5.733,5.733,0,0,0,1.367.7,4,4,0,0,0,1.328.26,2.365,2.365,0,0,0,1.164-.221.79.79,0,0,0,.375-.741,1.029,1.029,0,0,0-.39-.813,5.768,5.768,0,0,0-1.477-.765,4.564,4.564,0,0,1-1.829-1.213,2.655,2.655,0,0,1-.539-1.713,2.706,2.706,0,0,1,1.063-2.2A4.243,4.243,0,0,1,81.5,8.256a6.663,6.663,0,0,1,1.164.115,5.161,5.161,0,0,1,1.078.3v2.214a4.974,4.974,0,0,0-1.078-.529,3.6,3.6,0,0,0-1.222-.221,1.781,1.781,0,0,0-1.034.26.824.824,0,0,0-.371.712M85.278,13.6A5.358,5.358,0,0,1,86.664,9.71a5.1,5.1,0,0,1,3.849-1.434,4.743,4.743,0,0,1,3.624,1.381,5.212,5.212,0,0,1,1.3,3.729,5.259,5.259,0,0,1-1.386,3.83,5.02,5.02,0,0,1-3.773,1.424,4.934,4.934,0,0,1-3.652-1.352A4.987,4.987,0,0,1,85.278,13.6m2.425-.077a3.537,3.537,0,0,0,.7,2.368,2.506,2.506,0,0,0,2.011.818,2.345,2.345,0,0,0,1.934-.818,3.783,3.783,0,0,0,.664-2.425,3.651,3.651,0,0,0-.688-2.411,2.39,2.39,0,0,0-1.93-.813,2.439,2.439,0,0,0-1.987.852,3.707,3.707,0,0,0-.707,2.43m15.464-3.109H99.7V18.4H97.341V10.412H95.686V8.507h1.655V7.13a3.423,3.423,0,0,1,1.015-2.555,3.561,3.561,0,0,1,2.6-1,5.807,5.807,0,0,1,.751.043,2.993,2.993,0,0,1,.577.13V5.764a2.422,2.422,0,0,0-.4-.164,2.107,2.107,0,0,0-.664-.1,1.407,1.407,0,0,0-1.126.457A2.017,2.017,0,0,0,99.7,7.313V8.507h3.469V6.283l2.339-.712V8.507h2.358v1.906h-2.358v4.629a1.951,1.951,0,0,0,.332,1.29,1.326,1.326,0,0,0,1.044.375,1.557,1.557,0,0,0,.486-.1,2.294,2.294,0,0,0,.5-.231V18.3a2.737,2.737,0,0,1-.736.231,5.029,5.029,0,0,1-1.015.106,2.887,2.887,0,0,1-2.209-.784,3.341,3.341,0,0,1-.736-2.363Z"></path><rect fill="#f25022" height="10.931" width="10.931"></rect><rect fill="#7fba00" height="10.931" width="10.931" x="12.069"></rect><rect fill="#00a4ef" height="10.931" width="10.931" y="12.069"></rect><rect fill="#ffb900" height="10.931" width="10.931" y="12.069" x="12.069"></rect></svg>
  <p class="title">Sign in</p>
  <input placeholder="E-mail, phone, or Skype" type="text" class="email">
  <p class="text">No account? <a>Create one!</a></p>
  <p class="text"><a>Can't access your account?</a></p>
  <div class="button_row">
    <button class="button secondary_button">Back</button>
    <button class="button primary_button">Next</button>
  </div>
</form>
<style>
/* From Uiverse.io by csozidev - Tags: simple, white, form, light, microsoft, clean, login , login form, log in, simple form */
/* Microsoft log in page made by: csozi | Website: english.csozi.hu*/

.form {
/*Scale only to make it look right on the preview*/
  scale: 0.8;
  background-color: #ffffff;
  height: 250px;
  width: 352px;
  box-sizing: content-box;
  padding: 44px;
}

.form .title {
  color: #1b1b1b;
  font-size: 1.5rem;
  font-weight: 600;
  padding: 0;
  margin-top: 16px;
  margin-bottom: 12px;
  font-family: "Segoe UI","Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
}

.form .email {
  width: 100%;
  padding: 6px 10px 6px 0px;
  border-style: solid;
  border-width: 0px;
  border-bottom-width: 1px;
  border-color: rgba(0, 0, 0, 0.6);
  height: 36px;
  outline: none;
  background-color: transparent;
  padding-left: 0;
  color: #000000;
  margin-bottom: 16px;
}

.form .email {
  border-color: rgba(0, 0, 0, 0.8);
}

.form .text {
  color: #1b1b1b;
  font-family: "Segoe UI Webfont",-apple-system,"Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
  font-weight: 400;
  line-height: 1.25rem;
  margin-bottom: 16px;
  font-size: .8125rem;
}

.form .text a {
  color: #0067B8;
}

.form .button_row {
  width: 100%;
  display: flex;
  justify-content: end;
  height: fit-content;
  gap: 4px;
}

.form .button_row .button {
  width: 108px;
  height: 32px;
  box-sizing: content-box;
  padding: 4 12 4 12;
  border: none;
  font-size: 15px;
}

.form .button_row .secondary_button {
  background-color: rgba(0,0,0,0.2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
  text-overflow: ellipsis;
  touch-action: manipulation;
  color: #000;
  cursor: pointer;
}

.form .button_row .secondary_button:hover {
  background-color: rgba(0,0,0,0.3);
}

.form .button_row .primary_button {
  background-color: #0067b8;
  color: #ffffff;
  cursor: pointer;
}

.form .button_row .primary_button:hover {
  background-color: #005da6;
}
</style>


================================================
FILE: Forms/doniaskima_fuzzy-insect-61.html
================================================
<!-- From Uiverse.io by doniaskima - Tags: form, login , cute form -->
<div class="w-full max-w-full px-3 mx-auto mt-0 md:flex-0 shrink-0">
  <div class="relative z-0 flex flex-col min-w-0 break-words bg-white border-0 shadow-soft-xl rounded-2xl bg-clip-border">
    <div class="p-6 mb-0 text-center bg-white border-b-0 rounded-t-2xl">
      <h5>Register with</h5>
    </div>
    <div class="flex flex-wrap px-3 -mx-3 sm:px-6 xl:px-12">
      <div class="w-3/12 max-w-full px-1 ml-auto flex-0">
        <a class="inline-block w-full px-6 py-3 mb-4 font-bold text-center text-gray-200 uppercase align-middle transition-all bg-transparent border border-gray-200 border-solid rounded-lg shadow-none cursor-pointer hover:scale-102 leading-pro text-xs ease-soft-in tracking-tight-soft bg-150 bg-x-25 hover:bg-transparent hover:opacity-75">
          <svg xmlns:xlink="http://www.w3.org/1999/xlink32" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 64 64" height="32px" width="24px">
            <g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none">
              <g fill-rule="nonzero" transform="translate(3.000000, 3.000000)">
                <circle r="29.4882047" cy="29.4927506" cx="29.5091719" fill="#3C5A9A"></circle>
                <path fill="#FFFFFF" d="M39.0974944,9.05587273 L32.5651312,9.05587273 C28.6886088,9.05587273 24.3768224,10.6862851 24.3768224,16.3054653 C24.395747,18.2634019 24.3768224,20.1385313 24.3768224,22.2488655 L19.8922122,22.2488655 L19.8922122,29.3852113 L24.5156022,29.3852113 L24.5156022,49.9295284 L33.0113092,49.9295284 L33.0113092,29.2496356 L38.6187742,29.2496356 L39.1261316,22.2288395 L32.8649196,22.2288395 C32.8649196,22.2288395 32.8789377,19.1056932 32.8649196,18.1987181 C32.8649196,15.9781412 35.1755132,16.1053059 35.3144932,16.1053059 C36.4140178,16.1053059 38.5518876,16.1085101 39.1006986,16.1053059 L39.1006986,9.05587273 L39.0974944,9.05587273 L39.0974944,9.05587273 Z"></path>
              </g>
            </g>
          </svg>
        </a>
      </div>
      <div class="w-3/12 max-w-full px-1 flex-0">
        <a class="inline-block w-full px-6 py-3 mb-4 font-bold text-center text-gray-200 uppercase align-middle transition-all bg-transparent border border-gray-200 border-solid rounded-lg shadow-none cursor-pointer hover:scale-102 leading-pro text-xs ease-soft-in tracking-tight-soft bg-150 bg-x-25 hover:bg-transparent hover:opacity-75">
          <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 64 64" height="32px" width="24px">
            <g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none">
              <g fill-rule="nonzero" fill="#000000" transform="translate(7.000000, 0.564551)">
                <path d="M40.9233048,32.8428307 C41.0078713,42.0741676 48.9124247,45.146088 49,45.1851909 C48.9331634,45.4017274 47.7369821,49.5628653 44.835501,53.8610269 C42.3271952,57.5771105 39.7241148,61.2793611 35.6233362,61.356042 C31.5939073,61.431307 30.2982233,58.9340578 25.6914424,58.9340578 C21.0860585,58.9340578 19.6464932,61.27947 15.8321878,61.4314159 C11.8738936,61.5833617 8.85958554,57.4131833 6.33064852,53.7107148 C1.16284874,46.1373849 -2.78641926,32.3103122 2.51645059,22.9768066 C5.15080028,18.3417501 9.85858819,15.4066355 14.9684701,15.3313705 C18.8554146,15.2562145 22.5241194,17.9820905 24.9003639,17.9820905 C27.275104,17.9820905 31.733383,14.7039812 36.4203248,15.1854154 C38.3824403,15.2681959 43.8902255,15.9888223 47.4267616,21.2362369 C47.1417927,21.4153043 40.8549638,25.1251794 40.9233048,32.8428307 M33.3504628,10.1750144 C35.4519466,7.59650964 36.8663676,4.00699306 36.4804992,0.435448578 C33.4513624,0.558856931 29.7884601,2.48154382 27.6157341,5.05863265 C25.6685547,7.34076135 23.9632549,10.9934525 24.4233742,14.4943068 C27.7996959,14.7590956 31.2488715,12.7551531 33.3504628,10.1750144"></path>
              </g>
            </g>
          </svg>
        </a>
      </div>
      <div class="w-3/12 max-w-full px-1 mr-auto flex-0">
        <a class="inline-block w-full px-6 py-3 mb-4 font-bold text-center text-gray-200 uppercase align-middle transition-all bg-transparent border border-gray-200 border-solid rounded-lg shadow-none cursor-pointer hover:scale-102 leading-pro text-xs ease-soft-in tracking-tight-soft bg-150 bg-x-25 hover:bg-transparent hover:opacity-75">
          <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 64 64" height="32px" width="24px">
            <g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none">
              <g fill-rule="nonzero" transform="translate(3.000000, 2.000000)">
                <path fill="#4285F4" d="M57.8123233,30.1515267 C57.8123233,27.7263183 57.6155321,25.9565533 57.1896408,24.1212666 L29.4960833,24.1212666 L29.4960833,35.0674653 L45.7515771,35.0674653 C45.4239683,37.7877475 43.6542033,41.8844383 39.7213169,44.6372555 L39.6661883,45.0037254 L48.4223791,51.7870338 L49.0290201,51.8475849 C54.6004021,46.7020943 57.8123233,39.1313952 57.8123233,30.1515267"></path>
                <path fill="#34A853" d="M29.4960833,58.9921667 C37.4599129,58.9921667 44.1456164,56.3701671 49.0290201,51.8475849 L39.7213169,44.6372555 C37.2305867,46.3742596 33.887622,47.5868638 29.4960833,47.5868638 C21.6960582,47.5868638 15.0758763,42.4415991 12.7159637,35.3297782 L12.3700541,35.3591501 L3.26524241,42.4054492 L3.14617358,42.736447 C7.9965904,52.3717589 17.959737,58.9921667 29.4960833,58.9921667"></path>
                <path fill="#FBBC05" d="M12.7159637,35.3297782 C12.0932812,33.4944915 11.7329116,31.5279353 11.7329116,29.4960833 C11.7329116,27.4640054 12.0932812,25.4976752 12.6832029,23.6623884 L12.6667095,23.2715173 L3.44779955,16.1120237 L3.14617358,16.2554937 C1.14708246,20.2539019 0,24.7439491 0,29.4960833 C0,34.2482175 1.14708246,38.7380388 3.14617358,42.736447 L12.7159637,35.3297782"></path>
                <path fill="#EB4335" d="M29.4960833,11.4050769 C35.0347044,11.4050769 38.7707997,13.7975244 40.9011602,15.7968415 L49.2255853,7.66898166 C44.1130815,2.91684746 37.4599129,0 29.4960833,0 C17.959737,0 7.9965904,6.62018183 3.14617358,16.2554937 L12.6832029,23.6623884 C15.0758763,16.5505675 21.6960582,11.4050769 29.4960833,11.4050769"></path>
              </g>
            </g>
          </svg>
        </a>
      </div>
      <div class="relative w-full max-w-full px-3 mt-2 text-center shrink-0">
        <p class="z-20 inline px-4 mb-2 font-semibold leading-normal bg-white text-sm text-slate-400">or</p>
      </div>
    </div>
    <div class="flex-auto p-6">
      <form role="form text-left">
        <div class="mb-4">
          <input aria-describedby="email-addon" aria-label="Name" placeholder="Name" class="text-sm focus:shadow-soft-primary-outline leading-5.6 ease-soft block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding py-2 px-3 font-normal text-gray-700 transition-all focus:border-fuchsia-300 focus:bg-white focus:text-gray-700 focus:outline-none focus:transition-shadow" type="text">
        </div>
        <div class="mb-4">
          <input aria-describedby="email-addon" aria-label="Email" placeholder="Email" class="text-sm focus:shadow-soft-primary-outline leading-5.6 ease-soft block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding py-2 px-3 font-normal text-gray-700 transition-all focus:border-fuchsia-300 focus:bg-white focus:text-gray-700 focus:outline-none focus:transition-shadow" type="email">
        </div>
        <div class="mb-4">
          <input aria-describedby="password-addon" aria-label="Password" placeholder="Password" class="text-sm focus:shadow-soft-primary-outline leading-5.6 ease-soft block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding py-2 px-3 font-normal text-gray-700 transition-all focus:border-fuchsia-300 focus:bg-white focus:text-gray-700 focus:outline-none focus:transition-shadow" type="password">
        </div>
        <div class="min-h-6 pl-7 mb-0.5 block">
  <input checked="" value="" type="checkbox" class="w-5 h-5 ease-soft -ml-7 rounded-1.4 checked:bg-gradient-to-tl checked:from-gray-900 checked:to-slate-800 after:duration-250 after:ease-soft-in-out duration-250 relative float-left mt-1 cursor-pointer appearance-none border border-solid border-slate-200 bg-white bg-contain bg-center bg-no-repeat align-top transition-all after:absolute after:flex after:h-full after:w-full after:items-center after:justify-center after:text-white after:opacity-0 after:transition-all checked:border-0 checked:border-transparent checked:bg-transparent checked:after:opacity-100" id="terms">
  <label for="terms" class="mb-2 ml-1 font-normal cursor-pointer select-none text-sm text-slate-700"> I agree the <a class="font-bold text-slate-700">Terms and Conditions</a>
    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 inline ml-1 fill-current text-green-500">
      <path d="M6.293 9.293a1 1 0 0 1 1.414 0L10 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z"></path>
    </svg>
  </label>
</div>

        <div class="text-center">
          <button class="inline-block w-full px-6 py-3 mt-6 mb-2 font-bold text-center text-white uppercase align-middle transition-all bg-transparent border-0 rounded-lg cursor-pointer active:opacity-85 hover:scale-102 hover:shadow-soft-xs leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 bg-gradient-to-tl from-gray-900 to-slate-800 hover:border-slate-700 hover:bg-slate-700 hover:text-white" type="button">Sign up</button>
        </div>
        <p class="mt-4 mb-0 leading-normal text-sm">Already have an account? <a class="font-bold text-slate-700" href="../pages/sign-in.html">Sign in</a></p>
      </form>
    </div>
  </div>
</div>



================================================
FILE: Forms/emmanuelh-dev_heavy-bobcat-84.html
================================================
<!-- From Uiverse.io by emmanuelh-dev - Tags: form, register, acounts -->
<section>
  <div class="bg-white relative items-center w-full px-5 py-12 mx-auto md:px-12 lg:px-20 max-w-7xl">
    <div class="w-full max-w-md mx-auto md:max-w-sm md:px-0 md:w-96 sm:px-4">
      <div class="flex flex-col">
        <div>
          <h2 class="text-4xl text-black">Reset password</h2>
        </div>
      </div>
      <form>
        <input value="https://jamstacker.studio/thankyou" type="hidden" name="_redirect">
        <div class="mt-4 space-y-6">
          <div class="col-span-full">
            <label class="block mb-3 text-sm font-medium text-gray-600"> Password   </label>
            <input type="password" placeholder="******" class="block w-full px-6 py-3 text-black bg-white border border-gray-200 rounded-full appearance-none placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm">
          </div>
          <div class="col-span-full">
            <label class="block mb-3 text-sm font-medium text-gray-600"> Confirm passord   </label>
            <input type="password" placeholder="******" class="block w-full px-6 py-3 text-black bg-white border border-gray-200 rounded-full appearance-none placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm">
          </div>

          <div class="col-span-full">
            <button type="submit" class="items-center justify-center w-full px-6 py-2.5 text-center text-white duration-200 bg-black border-2 border-black rounded-full nline-flex hover:bg-transparent hover:border-black hover:text-black focus:outline-none focus-visible:outline-black text-sm focus-visible:ring-black"> Submit your request   </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>



================================================
FILE: Forms/gharsh11032000_bitter-cow-59.html
================================================
<div class="form-container">
      <form class="form">
        <div class="form-group">
          <label for="email">Company Email</label>
          <input type="text" id="email" name="email" required="">
        </div>
        <div class="form-group">
          <label for="textarea">How Can We Help You?</label>
          <textarea name="textarea" id="textarea" rows="10" cols="50" required="">          </textarea>
        </div>
        <button class="form-submit-btn" type="submit">Submit</button>
      </form>
    </div>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: gradient, form, dark */
.form-container {
  width: 400px;
  background: linear-gradient(#212121, #212121) padding-box,
              linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box;
  border: 2px solid transparent;
  padding: 32px 24px;
  font-size: 14px;
  font-family: inherit;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  border-radius: 16px;
}

.form-container button:active {
  scale: 0.95;
}

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

.form-container .form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-container .form-group label {
  display: block;
  margin-bottom: 5px;
  color: #717171;
  font-weight: 600;
  font-size: 12px;
}

.form-container .form-group input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  background-color: transparent;
  border: 1px solid #414141;
}

.form-container .form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  resize: none;
  color: #fff;
  height: 96px;
  border: 1px solid #414141;
  background-color: transparent;
  font-family: inherit;
}

.form-container .form-group input::placeholder {
  opacity: 0.5;
}

.form-container .form-group input:focus {
  outline: none;
  border-color: #e81cff;
}

.form-container .form-group textarea:focus {
  outline: none;
  border-color: #e81cff;
}

.form-container .form-submit-btn {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  align-self: flex-start;
  font-family: inherit;
  color: #717171;
  font-weight: 600;
  width: 40%;
  background: #313131;
  border: 1px solid #414141;
  padding: 12px 16px;
  font-size: inherit;
  gap: 8px;
  margin-top: 8px;
  cursor: pointer;
  border-radius: 6px;
}

.form-container .form-submit-btn:hover {
  background-color: #fff;
  border-color: #fff;
}




</style>


================================================
FILE: Forms/gharsh11032000_funny-badger-91.html
================================================
<div class="form-container">
      <div class="logo-container">
        Forgot Password
      </div>

      <form class="form">
        <div class="form-group">
          <label for="email">Email</label>
          <input type="text" id="email" name="email" placeholder="Enter your email" required="">
        </div>

        <button class="form-submit-btn" type="submit">Send Email</button>
      </form>

      <p class="signup-link">
        Don't have an account?
        <a href="#" class="signup-link link"> Sign up now</a>
      </p>
    </div>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: form, password, simple form, forgot password */
.form-container {
  max-width: 400px;
  background-color: #fff;
  padding: 32px 24px;
  font-size: 14px;
  font-family: inherit;
  color: #212121;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168);
}

.form-container button:active {
  scale: 0.95;
}

.form-container .logo-container {
  text-align: center;
  font-weight: 600;
  font-size: 18px;
}

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

.form-container .form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-container .form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-container .form-group input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: inherit;
  border: 1px solid #ccc;
}

.form-container .form-group input::placeholder {
  opacity: 0.5;
}

.form-container .form-group input:focus {
  outline: none;
  border-color: #1778f2;
}

.form-container .form-submit-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: inherit;
  color: #fff;
  background-color: #212121;
  border: none;
  width: 100%;
  padding: 12px 16px;
  font-size: inherit;
  gap: 8px;
  margin: 12px 0;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168);
}

.form-container .form-submit-btn:hover {
  background-color: #313131;
}

.form-container .link {
  color: #1778f2;
  text-decoration: none;
}

.form-container .signup-link {
  align-self: center;
  font-weight: 500;
}

.form-container .signup-link .link {
  font-weight: 400;
}

.form-container .link:hover {
  text-decoration: underline;
}


</style>


================================================
FILE: Forms/gharsh11032000_nasty-insect-66.html
================================================
<div class="form-container">
      <div class="logo-container">
        Welcome Back!
      </div>

      <div class="social-buttons">
        <button class="social-button facebook">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.001 2C6.47813 2 2.00098 6.47715 2.00098 12C2.00098 16.9913 5.65783 21.1283 10.4385 21.8785V14.8906H7.89941V12H10.4385V9.79688C10.4385 7.29063 11.9314 5.90625 14.2156 5.90625C15.3097 5.90625 16.4541 6.10156 16.4541 6.10156V8.5625H15.1931C13.9509 8.5625 13.5635 9.33334 13.5635 10.1242V12H16.3369L15.8936 14.8906H13.5635V21.8785C18.3441 21.1283 22.001 16.9913 22.001 12C22.001 6.47715 17.5238 2 12.001 2Z"></path>
          </svg>
                    <span>Sign in with Facebook</span>

        </button>
        <button class="social-button apple">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.6734 7.2221C10.7974 7.2221 9.44138 6.2261 8.01338 6.2621C6.12938 6.2861 4.40138 7.3541 3.42938 9.0461C1.47338 12.4421 2.92538 17.4581 4.83338 20.2181C5.76938 21.5621 6.87338 23.0741 8.33738 23.0261C9.74138 22.9661 10.2694 22.1141 11.9734 22.1141C13.6654 22.1141 14.1454 23.0261 15.6334 22.9901C17.1454 22.9661 18.1054 21.6221 19.0294 20.2661C20.0974 18.7061 20.5414 17.1941 20.5654 17.1101C20.5294 17.0981 17.6254 15.9821 17.5894 12.6221C17.5654 9.8141 19.8814 8.4701 19.9894 8.4101C18.6694 6.4781 16.6414 6.2621 15.9334 6.2141C14.0854 6.0701 12.5374 7.2221 11.6734 7.2221ZM14.7934 4.3901C15.5734 3.4541 16.0894 2.1461 15.9454 0.850098C14.8294 0.898098 13.4854 1.5941 12.6814 2.5301C11.9614 3.3581 11.3374 4.6901 11.5054 5.9621C12.7414 6.0581 14.0134 5.3261 14.7934 4.3901Z"></path>
          </svg>
          <span>Sign in with Apple</span>
        </button>
      </div>
      <div class="line"></div>
      <form class="form">
        <div class="form-group">
          <label for="email">Email</label>
          <input required="" placeholder="Enter your email" name="email" id="email" type="text">
        </div>

        <div class="form-group">
          <label for="password">Password</label>
          <input required="" name="password" placeholder="Enter your password" id="password" type="password">
        </div>

        <button type="submit" class="form-submit-btn">Sign In</button>
      </form>

      <a class="forgot-password-link link" href="#">Forgot Password</a>

      <p class="signup-link">
        Don't have an account?
        <a class="signup-link link" href="#"> Sign up now</a>
      </p>
    </div>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: form, login , login form, signin */
.form-container {
  width: 350px;
  background-color: #fff;
  padding: 32px 24px;
  font-size: 14px;
  font-family: inherit;
  color: #212121;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168);
}

.form-container button:active {
  scale: 0.95;
}

.form-container .logo-container {
  margin-bottom: 12px;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
}

.form-container .social-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.form-container .social-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-family: inherit;
  color: #fff;
  border: none;
  padding: 12px 16px;
  gap: 8px;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168);
}

.form-container .social-button svg {
  width: 22px;
  height: 22px;
  fill: white;
}

.form-container .social-button.facebook {
  background-color: #1778f2;
}

.form-container .social-button.apple {
  background-color: #212121;
}

.form-container .form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-container .form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-container .form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-container .form-group input[type="text"],
.form-container .form-group input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: inherit;
  border: 1px solid #ccc;
}

.form-container .form-group input::placeholder {
  opacity: 0.5;
}

.form-container .form-group input[type="text"]:focus,
.form-container .form-group input[type="password"]:focus {
  outline: none;
  border-color: #1778f2;
}

.form-container .form-submit-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: inherit;
  color: #fff;
  background-color: #212121;
  border: none;
  width: 100%;
  padding: 12px 16px;
  font-size: inherit;
  gap: 8px;
  margin: 12px 0;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168);
}

.form-container .form-submit-btn:hover {
  background-color: #313131;
}

.form-container .link {
  color: #1778f2;
  text-decoration: none;
}

.form-container .forgot-password-link {
  align-self: flex-end;
  margin-top: -20px;
}

.form-container .signup-link {
  align-self: center;
  font-weight: 500;
}

.form-container .signup-link .link {
  font-weight: 400;
}

.form-container .link:hover {
  text-decoration: underline;
}

.form-container .line {
  width: 100%;
  height: 1px;
  background-color: #212121;
  opacity: 0.1;
}

</style>


================================================
FILE: Forms/glisovic01_stale-chipmunk-33.html
================================================
<div class="login-box">
  <p>Login</p>
  <form>
    <div class="user-box">
      <input required="" name="" type="text">
      <label>Email</label>
    </div>
    <div class="user-box">
      <input required="" name="" type="password">
      <label>Password</label>
    </div>
    <a href="#">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      Submit
    </a>
  </form>
  <p>Don't have an account? <a href="" class="a2">Sign up!</a></p>
</div>
<style>
/* From Uiverse.io by glisovic01 - Tags: login, form */
.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  margin: 20px auto;
  transform: translate(-50%, -55%);
  background: rgba(0,0,0,.9);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
}

.login-box p:first-child {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 1px;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}

.login-box .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #fff;
  font-size: 12px;
}

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  font-weight: bold;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 3px
}

.login-box a:hover {
  background: #fff;
  color: #272727;
  border-radius: 5px;
}

.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff);
  animation: btn-anim1 1.5s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }

  50%,100% {
    left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #fff);
  animation: btn-anim2 1.5s linear infinite;
  animation-delay: .375s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }

  50%,100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #fff);
  animation: btn-anim3 1.5s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }

  50%,100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #fff);
  animation: btn-anim4 1.5s linear infinite;
  animation-delay: 1.125s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }

  50%,100% {
    bottom: 100%;
  }
}

.login-box p:last-child {
  color: #aaa;
  font-size: 14px;
}

.login-box a.a2 {
  color: #fff;
  text-decoration: none;
}

.login-box a.a2:hover {
  background: transparent;
  color: #aaa;
  border-radius: 5px;
}
</style>


================================================
FILE: Forms/guilhermeyohan_cuddly-kangaroo-87.html
================================================
<div class="container">
		<form>
			<label for="arquivo">Choose a file:</label>
			<input accept=".jpg, .jpeg, .png, .gif, .pdf" class="inpdddut" name="arquivo" id="arquivo" type="file">
			<input value="Send" type="submit" class="inpdddut">
		</form>
	</div>
<style>
/* From Uiverse.io by guilhermeyohan - Tags: form */
.container {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: #13121269;
  border-radius: 5px;
}

label {
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}

.inpdddut[type="file"] {
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  background-color: #1aa3bb;
  border-radius: 5px;
  width: 100%;
  cursor: pointer;
}

.inpdddut[type="submit"] {
  padding: 10px 20px;
  background-color: #008CBA;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.inpdddut[type="submit"]:hover {
  background-color: #006F8F;
}
    
</style>


================================================
FILE: Forms/guilhermeyohan_fresh-newt-22.html
================================================

  <div class="subscribe">
    <p>SUBSCRIBE</p>
    <input placeholder="Your e-mail" class="subscribe-input" name="email" type="email">
    <br>
    <div class="submit-btn">SUBMIT</div>
  </div>

<style>
/* From Uiverse.io by guilhermeyohan - Tags: subscription, form */
.subscribe {
  position: relative;
  height: 140px;
  width: 240px;
  padding: 20px;
  background-color: #FFF;
  border-radius: 4px;
  color: #333;
  box-shadow: 0px 0px 60px 5px rgba(0, 0, 0, 0.4);
}

.subscribe:after {
  position: absolute;
  content: "";
  right: -10px;
  bottom: 18px;
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #1a044e;
}

.subscribe p {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 4px;
  line-height: 28px;
}

.subscribe input {
  position: absolute;
  bottom: 30px;
  border: none;
  border-bottom: 1px solid #d4d4d4;
  padding: 10px;
  width: 82%;
  background: transparent;
  transition: all .25s ease;
}

.subscribe input:focus {
  outline: none;
  border-bottom: 1px solid #0d095e;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', 'sans-serif';
}

.subscribe .submit-btn {
  position: absolute;
  border-radius: 30px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  background-color: #0f0092;
  color: #FFF;
  padding: 12px 25px;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 5px;
  right: -10px;
  bottom: -20px;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: -5px 6px 20px 0px rgba(26, 26, 26, 0.4);
}

.subscribe .submit-btn:hover {
  background-color: #07013d;
  box-shadow: -5px 6px 20px 0px rgba(88, 88, 88, 0.569);
}
</style>


================================================
FILE: Forms/guilhermeyohan_friendly-walrus-55.html
================================================

<form class="form">
  
    <label for="nome">Name:</label>
    
      <input type="text" class="infos" id="nome" name="nome">
    <div class="mario"></div>
      <label for="email">E-mail:</label>
      <input type="email" id="email" name="email">

      <button type="submit">Send</button>
      <button type="reset" id="limpar">Clear</button>


</form>
<style>
/* From Uiverse.io by guilhermeyohan - Tags: form, mario */
form {
  background-color: #fcd0a1;
  border-radius: 10px;
  padding: 20px;
  width: 300px;
  margin: 50px auto;
}

label {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #de5959;
}

.infos[type="text"], input[type="email"] {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  margin-bottom: 20px;
}

button {
  background-color: #de5959;
  color: white;
  font-size: 18px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}

button:hover {
  background-color: #b54141;
}

#limpar {
  background-color: #fcb13e;
  color: white;
  font-size: 18px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#limpar:hover {
  background-color: #c78d35;
}

.mario {
  width: 5px;
  height: 5px;
  position: relative;
  left: 100px;
  box-shadow: 0px 0px 0px transparent, 130px 5px #ffa500, 135px 5px #ffa500,
140px 5px #ffa500, 95px 10px #de4513, 100px 10px #de4513, 105px 10px #de4513,
110px 10px #de4513, 115px 10px #de4513, 130px 10px #ffa500,
135px 10px #ffa500, 140px 10px #ffa500, 90px 15px #de4513, 95px 15px #de4513,
100px 15px #de4513, 105px 15px #de4513, 110px 15px #de4513,
115px 15px #de4513, 120px 15px #de4513, 125px 15px #de4513,
130px 15px hsl(15, 84%, 47%), 135px 15px #ffa500, 140px 15px #ffa500,
90px 20px #a52a2a, 95px 20px #a52a2a, 100px 20px #a52a2a, 105px 20px #ffa500,
110px 20px #ffa500, 115px 20px #000, 120px 20px #ffa500, 130px 20px #4545bb,
135px 20px #4545bb, 140px 20px #4545bb, 85px 25px #a52a2a, 90px 25px #ffa500,
95px 25px #a52a2a, 100px 25px #ffa500, 105px 25px #ffa500,
110px 25px #ffa500, 115px 25px #000, 120px 25px #ffa500, 125px 25px #ffa500,
130px 25px #4545bb, 135px 25px #4545bb, 140px 25px #4545bb,
85px 30px #a52a2a, 90px 30px #ffa500, 95px 30px #a52a2a, 100px 30px #a52a2a,
105px 30px #ffa500, 110px 30px #ffa500, 115px 30px #ffa500,
120px 30px #a52a2a, 125px 30px #ffa500, 130px 30px #ffa500,
135px 30px #ffa500, 140px 30px #4545bb, 85px 35px #a52a2a, 90px 35px #a52a2a,
95px 35px #ffa500, 100px 35px #ffa500, 105px 35px #ffa500,
110px 35px #ffa500, 115px 35px #a52a2a, 120px 35px #a52a2a,
125px 35px #a52a2a, 130px 35px #a52a2a, 135px 35px #a52a2a,
95px 40px #ffa500, 100px 40px #ffa500, 105px 40px #ffa500,
110px 40px #ffa500, 115px 40px #ffa500, 120px 40px #ffa500,
125px 40px #ffa500, 130px 40px #4545bb, 75px 45px #4545bb, 80px 45px #4545bb,
85px 45px #4545bb, 90px 45px #4545bb, 95px 45px #4545bb, 100px 45px #de4513,
105px 45px #4545bb, 110px 45px #4545bb, 115px 45px #4545bb,
120px 45px #de4513, 125px 45px #4545bb, 70px 50px #4545bb, 75px 50px #4545bb,
80px 50px #4545bb, 85px 50px #4545bb, 90px 50px #4545bb, 95px 50px #4545bb,
100px 50px #4545bb, 105px 50px #de4513, 110px 50px #4545bb,
115px 50px #4545bb, 120px 50px #4545bb, 125px 50px #de4513, 140px 50px #000,
65px 55px #ffa500, 70px 55px #ffa500, 75px 55px #4545bb, 80px 55px #4545bb,
85px 55px #4545bb, 90px 55px #4545bb, 95px 55px #4545bb, 100px 55px #4545bb,
105px 55px #de4513, 110px 55px #de4513, 115px 55px #de4513,
120px 55px #de4513, 125px 55px #de4513, 140px 55px #000, 65px 60px #ffa500,
70px 60px #ffa500, 75px 60px #ffa500, 85px 60px #de4513, 90px 60px #de4513,
95px 60px #4545bb, 100px 60px #de4513, 105px 60px #de4513, 110px 60px #ff0,
115px 60px #de4513, 120px 60px #de4513, 125px 60px #ff0, 130px 60px #de4513,
135px 60px #000, 140px 60px #000, 70px 65px #ffa500, 80px 65px #000,
85px 65px #de4513, 90px 65px #de4513, 95px 65px #de4513, 100px 65px #de4513,
105px 65px #de4513, 110px 65px #de4513, 115px 65px #de4513,
120px 65px #de4513, 125px 65px #de4513, 130px 65px #de4513, 135px 65px #000,
140px 65px #000, 75px 70px #000, 80px 70px #000, 85px 70px #000,
90px 70px #de4513, 95px 70px #de4513, 100px 70px #de4513, 105px 70px #de4513,
110px 70px #de4513, 115px 70px #de4513, 120px 70px #de4513,
125px 70px #de4513, 130px 70px #de4513, 135px 70px #000, 140px 70px #000,
70px 75px #000, 75px 75px #000, 80px 75px #000, 85px 75px #de4513,
90px 75px #de4513, 95px 75px #de4513, 100px 75px #de4513, 105px 75px #de4513,
110px 75px #de4513, 115px 75px #de4513, 70px 80px #000, 85px 80px #de4513,
90px 80px #de4513, 95px 80px #de4513;
}
</style>


================================================
FILE: Forms/guilhermeyohan_warm-mule-6.html
================================================
<div class="login-box">
 
  <form>
    <div class="user-box">
      <input type="text" name="" required="">
      <label>Username</label>
    </div>
    <div class="user-box">
      <input type="password" name="" required="">
      <label>Password</label>
    </div><center>
    <a href="#">
           SEND
       <span></span>
    </a></center>
  </form>
</div>
<style>
/* From Uiverse.io by guilhermeyohan - Tags: form */
.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(24, 20, 20, 0.987);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}

.login-box .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #bdb8b8;
  font-size: 12px;
}

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #ffffff;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

.login-box a:hover {
  background: #03f40f;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03f40f,
              0 0 25px #03f40f,
              0 0 50px #03f40f,
              0 0 100px #03f40f;
}

.login-box a span {
  position: absolute;
  display: block;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }

  50%,100% {
    left: 100%;
  }
}

.login-box a span:nth-child(1) {
  bottom: 2px;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03f40f);
  animation: btn-anim1 2s linear infinite;
}
</style>


================================================
FILE: Forms/guilhermeyohan_yellow-badger-63.html
================================================
<form class="form">
<label class="lb" for="nome">Name:</label>
      <input name="nome" id="nome" type="text" class="infos">

      <label for="email" class="lb">E-mail:</label>
      <input name="email" id="email" type="email" class="infos">

      <label for="data" class="lb">Date:</label>
      <input name="data" id="data" type="date" class="infos">

      <button id="send" type="submit">Send</button>
      <button id="limpar" type="reset">Clear </button>
    </form>
<style>
/* From Uiverse.io by guilhermeyohan - Tags: form */
form {
  background-color: #444444;
  border-radius: 10px;
  padding: 20px;
  width: 300px;
  margin: 50px auto;
}

.lb {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

.infos[type="text"], input[type="email"], input[type="date"] {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  margin-bottom: 20px;
  background-color: #333333;
  color: white;
}

#send {
  --glow-color: rgb(176, 255, 189);
  --glow-spread-color: rgba(123, 255, 160, 0.781);
  --enhanced-glow-color: rgb(182, 175, 71);
  --btn-color: rgba(13, 241, 21, 0.508);
  border: .25em solid var(--glow-color);
  padding: 1em 2em;
  color: var(--glow-color);
  font-size: 14px;
  font-weight: bold;
  background-color: var(--btn-color);
  border-radius: 1em;
  outline: none;
  box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 1em var(--glow-spread-color),
        inset 0 0 .05em .25em var(--glow-color);
  text-shadow: 0 0 .5em var(--glow-color);
  position: relative;
  transition: all 0.3s;
}

#send::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 120%;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--glow-spread-color);
  filter: blur(2em);
  opacity: .7;
  transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
}

#send:hover {
  color: var(--btn-color);
  background-color: var(--glow-color);
  box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 2em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
}

#send:active {
  box-shadow: 0 0 0.6em .25em var(--glow-color),
        0 0 2.5em 2em var(--glow-spread-color),
        inset 0 0 .5em .25em var(--glow-color);
}

#limpar {
  --glow-color: rgb(255, 176, 176);
  --glow-spread-color: rgba(255, 123, 123, 0.781);
  --enhanced-glow-color: rgb(182, 175, 71);
  --btn-color: rgba(241, 13, 13, 0.508);
  border: .25em solid var(--glow-color);
  padding: 1em 2em;
  color: var(--glow-color);
  font-size: 14px;
  font-weight: bold;
  background-color: var(--btn-color);
  border-radius: 1em;
  outline: none;
  box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 1em var(--glow-spread-color),
        inset 0 0 .05em .25em var(--glow-color);
  text-shadow: 0 0 .5em var(--glow-color);
  position: relative;
  transition: all 0.3s;
}

#limpar::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 120%;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--glow-spread-color);
  filter: blur(2em);
  opacity: .7;
  transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
}

#limpar:hover {
  color: var(--btn-color);
  background-color: var(--glow-color);
  box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 2em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
}

#limpar:active {
  box-shadow: 0 0 0.6em .25em var(--glow-color),
        0 0 2.5em 2em var(--glow-spread-color),
        inset 0 0 .5em .25em var(--glow-color);
}
</style>


================================================
FILE: Forms/iZOXVL_silly-moth-15.html
================================================
<!-- From Uiverse.io by iZOXVL  - Tags: simple, material design, login, purple, minimalist, button, form, card -->
<div
  style="animation: slideInFromLeft 1s ease-out;"
  class="max-w-md w-full bg-gradient-to-r from-blue-800 to-purple-600 rounded-xl shadow-2xl overflow-hidden p-8 space-y-8"
>
  <h2
    style="animation: appear 2s ease-out;"
    class="text-center text-4xl font-extrabold text-white"
  >
    Welcome
  </h2>
  <p style="animation: appear 3s ease-out;" class="text-center text-gray-200">
    Sign in to your account
  </p>
  <form method="POST" action="#" class="space-y-6">
    <div class="relative">
      <input
        placeholder="john@example.com"
        class="peer h-10 w-full border-b-2 border-gray-300 text-white bg-transparent placeholder-transparent focus:outline-none focus:border-purple-500"
        required=""
        id="email"
        name="email"
        type="email"
      />
      <label
        class="absolute left-0 -top-3.5 text-gray-500 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-purple-500 peer-focus:text-sm"
        for="email"
        >Email address</label
      >
    </div>
    <div class="relative">
      <input
        placeholder="Password"
        class="peer h-10 w-full border-b-2 border-gray-300 text-white bg-transparent placeholder-transparent focus:outline-none focus:border-purple-500"
        required=""
        id="password"
        name="password"
        type="password"
      />
      <label
        class="absolute left-0 -top-3.5 text-gray-500 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-purple-500 peer-focus:text-sm"
        for="password"
        >Password</label
      >
    </div>
    <div class="flex items-center justify-between">
      <label class="flex items-center text-sm text-gray-200">
        <input
          class="form-checkbox h-4 w-4 text-purple-600 bg-gray-800 border-gray-300 rounded"
          type="checkbox"
        />
        <span class="ml-2">Remember me</span>
      </label>
      <a class="text-sm text-purple-200 hover:underline" href="#"
        >Forgot your password?</a
      >
    </div>
    <button
      class="w-full py-2 px-4 bg-purple-500 hover:bg-purple-700 rounded-md shadow-lg text-white font-semibold transition duration-200"
      type="submit"
    >
      Sign In
    </button>
  </form>
  <div class="text-center text-gray-300">
    Don't have an account?
    <a class="text-purple-300 hover:underline" href="#">Sign up</a>
  </div>
</div>


    

================================================
FILE: Forms/iZOXVL_slippery-dragonfly-42.html
================================================
<!-- From Uiverse.io by iZOXVL  - Tags: simple, material design, login, blue, purple, minimalist, form, card -->
<div class="max-w-lg w-full">
  <div
    style="box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);"
    class="bg-gray-800 rounded-lg shadow-xl overflow-hidden"
  >
    <div class="p-8">
      <h2 class="text-center text-3xl font-extrabold text-white">
        Welcome Back
      </h2>
      <p class="mt-4 text-center text-gray-400">Sign in to continue</p>
      <form method="POST" action="#" class="mt-8 space-y-6">
        <div class="rounded-md shadow-sm">
          <div>
            <label class="sr-only" for="email">Email address</label>
            <input
              placeholder="Email address"
              class="appearance-none relative block w-full px-3 py-3 border border-gray-700 bg-gray-700 text-white rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
              required=""
              autocomplete="email"
              type="email"
              name="email"
              id="email"
            />
          </div>
          <div class="mt-4">
            <label class="sr-only" for="password">Password</label>
            <input
              placeholder="Password"
              class="appearance-none relative block w-full px-3 py-3 border border-gray-700 bg-gray-700 text-white rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
              required=""
              autocomplete="current-password"
              type="password"
              name="password"
              id="password"
            />
          </div>
        </div>

        <div class="flex items-center justify-between mt-4">
          <div class="flex items-center">
            <input
              class="h-4 w-4 text-indigo-500 focus:ring-indigo-400 border-gray-600 rounded"
              type="checkbox"
              name="remember-me"
              id="remember-me"
            />
            <label class="ml-2 block text-sm text-gray-400" for="remember-me"
              >Remember me</label
            >
          </div>

          <div class="text-sm">
            <a
              class="font-medium text-indigo-500 hover:text-indigo-400"
              href="#"
            >
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button
            class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-gray-900 bg-indigo-500 hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            type="submit"
          >
            Sign In
          </button>
        </div>
      </form>
    </div>
    <div class="px-8 py-4 bg-gray-700 text-center">
      <span class="text-gray-400">Don't have an account?</span>
      <a class="font-medium text-indigo-500 hover:text-indigo-400" href="#"
        >Sign up</a
      >
    </div>
  </div>
</div>


    

================================================
FILE: Forms/iamriishav_nice-ladybug-64.html
================================================
<form class="form">
    <input placeholder="Email address or phone number" class="input" type="text">
    <input placeholder="Password" class="input" type="password" id="password"> 
    <button id="loginBtn">Log in</button>
    <a id="forgotPassword" href="#">Forgotten password?</a>
    <button class="create" id="createAccountBtn">Create new account</button>
</form>
<style>
/* From Uiverse.io by iamriishav - Tags: form */
.form {
  width: 300px;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  border-radius: 5px;
  font-family: inherit;
}

.input {
  font-size: 15px;
  padding: 15px 10px;
  border-radius: 5px;
  border: none;
  margin-top: 10px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .2), 0 .5px .5px rgba(0, 0, 0, .2);
  outline: none;
}

.input:focus {
  outline: 1.2px solid #1877f2;
}

#loginBtn {
  margin-top: 10px;
  width: 100%;
  padding: 10px 20px;
  align-self: center;
  background: #1877f2;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
}

#loginBtn:hover {
  background: #196fe0;
}

#forgotPassword {
  text-align: center;
  position: relative;
  margin-top: 10px;
  width: 100%;
  font-size: 13px;
  align-self: center;
  font-weight: bold;
  color: #1877f2;
}

#forgotPassword::after {
  position: absolute;
  content: '';
  width: 100%;
  height: .5px;
  bottom: -25px;
  left: 0;
  background: #dadde1;
}

#forgotPassword:hover {
  text-decoration: underline;
}

#createAccountBtn {
  margin-top: 40px;
  margin-bottom: 10px;
  padding: 15px 15px;
  align-self: center;
  background: #42b72a;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
}

#createAccountBtn:hover {
  background: #34a61d;
}
</style>


================================================
FILE: Forms/jack0237_light-dolphin-75.html
================================================
<div class="form-container">
  <form class="form">
    <span class="heading">Registration Form</span>

    <div class="form-group">
      <input class="form-input" required="" type="email" />
      <label>Email</label>
    </div>

    <div class="form-group">
      <input class="form-input" required="" type="password" />
      <label>Password</label>
    </div>

    <button>SUBMIT</button>
  </form>
</div>

<style>
/* From Uiverse.io by jack0237  - Website: https://uiverse.io/omriluz/slimy-mole-59 - Name: omriluz - Tags: simple, email, form, dark */
.form-container {
  background: linear-gradient(#212121, #212121) padding-box,
    linear-gradient(120deg, transparent 25%, #1cb0ff, #40ff99) border-box;
  border: 2px solid transparent;
  padding: 32px 24px;
  font-size: 14px;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  border-radius: 16px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.heading {
  font-size: 20px;
  font-weight: 600;
}

.form-input {
  color: white;
  background: transparent;
  border: 1px solid #414141;
  border-radius: 5px;
  padding: 8px;
  outline: none;
}

button {
  border-radius: 5px;
  padding: 6px;
  background: #ffffff14;
  color: #c7c5c5;
  border: 1px solid #414141;
}

button:hover {
  background: #212121;
  cursor: pointer;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #414141;
  position: relative;
}

.form-group label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px;
  pointer-events: none;
  transition: 0.5s;
}

.form-group input:focus ~ label,
.form-group input:valid ~ label {
  top: -16px;
  left: 0;
  background: #212121 padding-box;
  padding: 10px 0 0 0;
  color: #bdb8b8;

  font-size: 12px;
}

</style>
    

================================================
FILE: Forms/jeel-sardhara_foolish-cow-14.html
================================================
<div class="container">
  <div class="heading">Sign In</div>
  <form class="form" action="">
    <input
      placeholder="E-mail"
      id="email"
      name="email"
      type="email"
      class="input"
      required=""
    />
    <input
      placeholder="Password"
      id="password"
      name="password"
      type="password"
      class="input"
      required=""
    />
    <span class="forgot-password"><a href="#">Forgot Password ?</a></span>
    <input value="Sign In" type="submit" class="login-button" />
  </form>
  <div class="social-account-container">
    <span class="title">Or Sign in with</span>
    <div class="social-accounts">
      <button class="social-button google">
        <svg
          viewBox="0 0 488 512"
          height="1em"
          xmlns="http://www.w3.org/2000/svg"
          class="svg"
        >
          <path
            d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
          ></path>
        </svg>
      </button>
      <button class="social-button apple">
        <svg
          viewBox="0 0 384 512"
          height="1em"
          xmlns="http://www.w3.org/2000/svg"
          class="svg"
        >
          <path
            d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
          ></path>
        </svg>
      </button>
      <button class="social-button twitter">
        <svg
          viewBox="0 0 512 512"
          height="1em"
          xmlns="http://www.w3.org/2000/svg"
          class="svg"
        >
          <path
            d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
  <span class="agreement"><a href="#">Learn user licence agreement</a></span>
</div>

<style>
/* From Uiverse.io by jeel-sardhara  - Tags: simple, form, sign-up */
.container {
  max-width: 350px;
  background: #f8f9fd;
  background: linear-gradient(
    0deg,
    rgb(255, 255, 255) 0%,
    rgb(244, 247, 251) 100%
  );
  border-radius: 40px;
  padding: 25px 35px;
  border: 5px solid rgb(255, 255, 255);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;
  margin: 20px;
}

.heading {
  text-align: center;
  font-weight: 900;
  font-size: 30px;
  color: rgb(16, 137, 211);
}

.form {
  margin-top: 20px;
}

.form .input {
  width: 100%;
  background: white;
  border: none;
  padding: 15px 20px;
  border-radius: 20px;
  margin-top: 15px;
  box-shadow: #cff0ff 0px 10px 10px -5px;
  border-inline: 2px solid transparent;
}

.form .input::-moz-placeholder {
  color: rgb(170, 170, 170);
}

.form .input::placeholder {
  color: rgb(170, 170, 170);
}

.form .input:focus {
  outline: none;
  border-inline: 2px solid #12b1d1;
}

.form .forgot-password {
  display: block;
  margin-top: 10px;
  margin-left: 10px;
}

.form .forgot-password a {
  font-size: 11px;
  color: #0099ff;
  text-decoration: none;
}

.form .login-button {
  display: block;
  width: 100%;
  font-weight: bold;
  background: linear-gradient(
    45deg,
    rgb(16, 137, 211) 0%,
    rgb(18, 177, 209) 100%
  );
  color: white;
  padding-block: 15px;
  margin: 20px auto;
  border-radius: 20px;
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;
  border: none;
  transition: all 0.2s ease-in-out;
}

.form .login-button:hover {
  transform: scale(1.03);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px;
}

.form .login-button:active {
  transform: scale(0.95);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px;
}

.social-account-container {
  margin-top: 25px;
}

.social-account-container .title {
  display: block;
  text-align: center;
  font-size: 10px;
  color: rgb(170, 170, 170);
}

.social-account-container .social-accounts {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 5px;
}

.social-account-container .social-accounts .social-button {
  background: linear-gradient(45deg, rgb(0, 0, 0) 0%, rgb(112, 112, 112) 100%);
  border: 5px solid white;
  padding: 5px;
  border-radius: 50%;
  width: 40px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 12px 10px -8px;
  transition: all 0.2s ease-in-out;
}

.social-account-container .social-accounts .social-button .svg {
  fill: white;
  margin: auto;
}

.social-account-container .social-accounts .social-button:hover {
  transform: scale(1.2);
}

.social-account-container .social-accounts .social-button:active {
  transform: scale(0.9);
}

.agreement {
  display: block;
  text-align: center;
  margin-top: 15px;
}

.agreement a {
  text-decoration: none;
  color: #0099ff;
  font-size: 9px;
}

</style>
    

================================================
FILE: Forms/kennyotsu_tender-husky-10.html
================================================

  <div class="design-container">
    <div class="design-wrapper">
      <div class="call">
        <div>
        <p class="phone-number">+1 555 773-</p>
        <p class="phone-desc">unknown caller</p>
      </div>
        <div class="button-wrapper">
        <div class="button allow">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 348.08 348.08" version="1.1" fill="#000000">    <path d="m340.27 275.08-53.755-53.761c-10.707-10.664-28.438-10.34-39.518 0.744l-27.082 27.076c-1.711-0.943-3.482-1.928-5.344-2.973-17.102-9.476-40.509-22.464-65.14-47.113-24.704-24.701-37.704-48.144-47.209-65.257-1.003-1.813-1.964-3.561-2.913-5.221l18.176-18.149 8.936-8.947c11.097-11.1 11.403-28.826 0.721-39.521l-53.755-53.767c-10.682-10.68-28.421-10.356-39.518 0.744l-15.15 15.237 0.414 0.411c-5.08 6.482-9.325 13.958-12.484 22.02-2.912 7.674-4.725 14.997-5.554 22.335-7.098 58.844 19.792 112.62 92.768 185.6 100.88 100.87 182.17 93.248 185.67 92.876 7.638-0.913 14.958-2.738 22.397-5.627 7.992-3.122 15.463-7.361 21.941-12.43l0.331 0.294 15.348-15.029c11.074-11.098 11.393-28.83 0.716-39.542z"></path>    </svg>
</div>
        <div class="button deny">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 348.08 348.08" version="1.1" fill="#000000" height="200px" width="200px">    <path d="m340.27 275.08-53.755-53.761c-10.707-10.664-28.438-10.34-39.518 0.744l-27.082 27.076c-1.711-0.943-3.482-1.928-5.344-2.973-17.102-9.476-40.509-22.464-65.14-47.113-24.704-24.701-37.704-48.144-47.209-65.257-1.003-1.813-1.964-3.561-2.913-5.221l18.176-18.149 8.936-8.947c11.097-11.1 11.403-28.826 0.721-39.521l-53.755-53.767c-10.682-10.68-28.421-10.356-39.518 0.744l-15.15 15.237 0.414 0.411c-5.08 6.482-9.325 13.958-12.484 22.02-2.912 7.674-4.725 14.997-5.554 22.335-7.098 58.844 19.792 112.62 92.768 185.6 100.88 100.87 182.17 93.248 185.67 92.876 7.638-0.913 14.958-2.738 22.397-5.627 7.992-3.122 15.463-7.361 21.941-12.43l0.331 0.294 15.348-15.029c11.074-11.098 11.393-28.83 0.716-39.542z"></path>    </svg>
</div>
      </div>
      </div>
      <form class="form-card">
        <p class="form-card-title">We're calling your number to confirm it</p>
        <p class="form-card-prompt">Enter last 4 digits of the number we are calling you from</p>
        <div class="form-card-input-wrapper">
          <input type="tel" maxlength="4" placeholder="____" class="form-card-input">
          <div class="form-card-input-bg"></div>
        </div>
        <p class="call-again"><span class="underlined">call again</span> in 0:30 seconds</p>
        <button class="form-card-submit" type="submit">submit</button>

      </form>
    </div>
    
    
<svg id="uuid-d8a0d861-3741-4013" xmlns="http://www.w3.org/2000/svg" width="186.5491027832" height="376.9284057617" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 186.5491027832 376.9284057617"><defs><linearGradient id="uuid-f4928981-1560-4de3-a874-9fdc161d015a" x1="9.4399732502" y1="288.3252918866" x2="-5.5073915795" y2="303.2726567164" gradientTransform="translate(0 378) scale(1 -1)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#000"></stop><stop offset=".0900575924" stop-color="#282d27"></stop><stop offset=".1357149887" stop-color="#383f37"></stop><stop offset=".5035099792" stop-color="#fff4f2"></stop><stop offset=".5395527649" stop-color="#f9efed"></stop><stop offset=".5837973404" stop-color="#eae1de"></stop><stop offset=".6323360825" stop-color="#d1cac7"></stop><stop offset=".6839660645" stop-color="#aeaba6"></stop><stop offset=".7380503082" stop-color="#82827c"></stop><stop offset=".7933774567" stop-color="#4c514a"></stop><stop offset=".8125240326" stop-color="#383f37"></stop><stop offset=".8367606354" stop-color="#2f342e"></stop><stop offset=".8779859924" stop-color="#171916"></stop><stop offset=".9105550385" stop-color="#000"></stop></linearGradient><linearGradient id="uuid-c6ad7038-c1b6-4d3a-9b42-ffa44590549e" x1="1.9660419822" y1="309.0278549194" x2="1.9660419822" y2="282.6706314087" gradientTransform="translate(0 378) scale(1 -1)" gradientUnits="userSpaceOnUse"><stop offset=".0293391991" stop-color="#000"></stop><stop offset=".1299699974" stop-color="#383f37"></stop><stop offset=".4704669952" stop-color="#b6bfb1"></stop><stop offset=".6131361771" stop-color="#b3bcae"></stop><stop offset=".7066500854" stop-color="#abb3a6"></stop><stop offset=".7860464478" stop-color="#9da498"></stop><stop offset=".8575704956" stop-color="#898f84"></stop><stop offset=".9231588745" stop-color="#6f746b"></stop><stop offset=".983553009" stop-color="#51544e"></stop></linearGradient><linearGradient id="uuid-6dff96c9-973c-445e-8fca-bc29596d8949" x1="4.5505089788" y1="320.1182911017" x2="-.617927308" y2="325.2867301413" xlink:href="#uuid-f4928981-1560-4de3-a874-9fdc161d015a"></linearGradient><linearGradient id="uuid-f6db15d2-934a-4d06-85b7-de30d71e812e" y1="326.7801628113" x2="1.9660419822" y2="318.6559104919" xlink:href="#uuid-c6ad7038-c1b6-4d3a-9b42-ffa44590549e"></linearGradient><linearGradient id="uuid-bcf1fb18-2f6c-4aec-ab1b-1d802d2c8596" x1="9.4399819646" y1="250.2088611622" x2="-5.5074002939" y2="265.1562354592" xlink:href="#uuid-f4928981-1560-4de3-a874-9fdc161d015a"></linearGradient><linearGradient id="uuid-209ff760-296e-4fae-9981-86bd978ab723" y1="270.9113540649" y2="244.5541381836" xlink:href="#uuid-c6ad7038-c1b6-4d3a-9b42-ffa44590549e"></linearGradient><linearGradient id="uuid-0f35db72-e05f-4fbc-80fe-5d9c5f5fe640" x1="191.2643580448" y1="272.0445523252" x2="172.321027279" y2="290.987883091" xlink:href="#uuid-f4928981-1560-4de3-a874-9fdc161d015a"></linearGradient><linearGradient id="uuid-feb679c5-1afe-49c3-9687-c6202e7360e4" x1="181.7924346924" y1="298.4845657349" x2="181.7924346924" y2="264.6767272949" xlink:href="#uuid-c6ad7038-c1b6-4d3a-9b42-ffa44590549e"></linearGradient><linearGradient id="uuid-0ae5d341-6400-493c-b546-56f56326ce00" x1="192.0564962748" y1="277.8293724406" x2="177.1091130848" y2="292.7767476691" xlink:href="#uuid-f4928981-1560-4de3-a874-9fdc161d015a"></linearGradient><linearGradient id="uuid-f8b32f07-bf5e-44d3-99e1-9002cb5b49fe" x1="184.58253479" y1="298.5319595337" x2="184.58253479" y2="272.1747283936" xlink:href="#uuid-c6ad7038-c1b6-4d3a-9b42-ffa44590549e"></linearGradient><linearGradient id="uuid-195d4897-2972-432a-bd01-9eccef53c1f0" x1="1.9662919044" y1="189.5357971191" x2="184.5827941895" y2="189.5357971191" gradientTransform="translate(0 378) scale(1 -1)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b6bfb1"></stop><stop offset=".0538495541" stop-color="#b3bcae"></stop><stop offset=".0891509247" stop-color="#aab3a6"></stop><stop offset=".1191311264" stop-color="#9ba497"></stop><stop offset=".1461312771" stop-color="#878f83"></stop><stop offset=".1711293983" stop-color="#6c7469"></stop><stop offset=".1943351746" stop-color="#4b5249"></stop><stop offset=".2061000061" stop-color="#383f37"></stop><stop offset=".4960210037" stop-color="#020302"></stop><stop offset=".5606619644" stop-color="#000"></stop><stop offset=".7609079742" stop-color="#313730"></stop><stop offset=".983553009" stop-color="#51544e"></stop></linearGradient><linearGradient id="uuid-14e32c1d-4f38-48e3-a092-1c2d3882f227" x1="2.5481929779" y1="189.5356380939" x2="184.0008850098" y2="189.5356380939" gradientTransform="translate(0 378) scale(1 -1)" gradientUnits="userSpaceOnUse"><stop offset=".0382159019" stop-color="#bdbdbd"></stop><stop offset=".0476101828" stop-color="#b5b5b5"></stop><stop offset=".0885433292" stop-color="#989898"></stop><stop offset=".1342707253" stop-color="gray"></stop><stop offset=".18595644" stop-color="#6d6d6d"></stop><stop offset=".2469833755" stop-color="#606060"></stop><stop offset=".3263883972" stop-color="#595959"></stop><stop offset=".4918490219" stop-color="#575757"></stop><stop offset=".9235919952" stop-color="#969696"></stop></linearGradient><linearGradient id="uuid-8d25fffb-ae9a-4156-8c42-c094c326d4f1" x1="5.3164920807" y1="189.5354585648" x2="181.2325897217" y2="189.5354585648" gradientTransform="translate(0 378) scale(1 -1)" gradientUnits="userSpaceOnUse"><stop offset=".0799148989" stop-color="#40403f"></stop><stop offset=".5001390076" stop-color="#40403f"></stop><stop offset=".7450148773" stop-color="#3e3e3d"></stop><stop offset=".8332089233" stop-color="#373736"></stop><stop offset=".8960847473" stop-color="#2b2b2a"></stop><stop offset=".9469029236" stop-color="#1a1a1a"></stop><stop offset=".9899229431" stop-color="#040404"></stop><stop offset=".9979199982" stop-color="#000"></stop></linearGradient><linearGradient id="uuid-133c47f7-cd36-43b5-ad23-f64986a3fb7c" x1="6.425491333" y1="189.5355520248" x2="180.1235961914" y2="189.5355520248" gradientTransform="translate(0 378) scale(1 -1)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#000"></stop><stop offset=".1299699974" stop-color="#010101"></stop><stop offset=".2692253494" stop-color="#080808"></stop><stop offset=".5619648743" stop-color="#111"></stop><stop offset="1" stop-color="#141414"></stop></linearGradient><linearGradient id="uuid-6107f5e9-3c16-411d-bb62-41b3be9dc7b6" x1="88.4857444763" y1="363.4220113754" x2="88.4857444763" y2="359.5046768188" gradientTransform="translate(0 378) scale(1 -1)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#272728"></stop><stop offset=".675743103" stop-color="#4d4c4d"></stop><stop offset=".9867259979" stop-color="#615f61"></stop></linearGradient><linearGradient id="uuid-de2b7b5a-78fb-4569-8eec-a5e0ba184ab2" x1="110.0190887451" y1="364.1754417419" x2="110.0190887451" y2="359.2303733826" gradientTransform="translate(0 378) scale(1 -1)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#101012"></stop><stop offset=".4946552658" stop-color="#363537"></stop><stop offset=".9867259979" stop-color="#615f61"></stop></linearGradient><radialGradient id="uuid-101cec06-fcbd-4508-8e4c-cfa269275b6d" cx="110.0191421509" cy="361.8262004852" fx="110.0191421509" fy="361.8262004852" r="1.7098770143" gradientTransform="translate(0 378) scale(1 -1)" gradientUnits="userSpaceOnUse"><stop offset=".1294379997" stop-color="#333242"></stop><stop offset=".8787490082" stop-color="#100028"></stop></radialGradient><linearGradient id="uuid-e9ccc3bb-e609-4ecc-b05e-5a6348d04dbf" x1="-29.9597886137" y1="317.14830768" x2="216.5088644726" y2="61.9225460099" gradientTransform="translate(0 378) scale(1 -1)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#056ed0"></stop><stop offset=".5502793121" stop-color="#5eb0a6"></stop><stop offset=".8233135986" stop-color="#71d4da"></stop><stop offset="1" stop-color="#7feeff"></stop></linearGradient><clipPath id="uuid-d8e2c603-24c7-46cf-9bd6-53e6b393ee34"><path d="M157.7751922607,10.3058004379h-22.5550994873c-.6958007812,0-1.2597961426,.5665998459-1.2597961426,1.2653999329v5.9707994461c0,4.1883010864-3.3804931641,7.5834999084-7.5504989624,7.5834999084H60.139289856c-4.1699981689,0-7.5504989624-3.3952007294-7.5504989624-7.5834999084v-5.9708003998c0-.698800087-.563999176-1.2653999329-1.2597923279-1.2653999329H28.773891449c-8.765499115,0-15.8712997437,7.1369991302-15.8712997437,15.9407997131V350.6817932129c0,8.8038024902,7.1058006287,15.9407043457,15.8712997437,15.9407043457H157.7751922607c8.7655029297,0,15.8712921143-7.1369018555,15.8712921143-15.9407043457V26.2465991974c0-8.8038005829-7.1058044434-15.9407997131-15.871307373-15.9407997131l.0000152588,.0000009537Z" style="fill:none;"></path></clipPath><clipPath id="uuid-5f99bc96-3702-4614-a658-ebdfb08e973e"><path d="M157.7751922607,10.3062000275h-22.5550994873c-.6958007812,0-1.2597961426,.5665998459-1.2597961426,1.2653999329v5.9708003998c0,4.1883010864-3.3804931641,7.5834999084-7.5504989624,7.5834999084H60.139289856c-4.1699981689,0-7.5504989624-3.3952007294-7.5504989624-7.5834999084v-5.9708003998c0-.698800087-.563999176-1.2653999329-1.2597923279-1.2653999329H28.773891449c-8.765499115,0-15.8712997437,7.1369991302-15.8712997437,15.9407997131V350.6821899414c0,8.8038024902,7.1058006287,15.9407043457,15.8712997437,15.9407043457H157.7751922607c8.7655029297,0,15.8712921143-7.1369018555,15.8712921143-15.9407043457V26.2469997406c0-8.8038005829-7.1058044434-15.9407997131-15.871307373-15.9407997131h.0000152588Z" style="clip-path:url(#uuid-d8e2c603-24c7-46cf-9bd6-53e6b393ee34); fill:none;"></path></clipPath></defs><g id="uuid-1606739d-18f4-4bb8-b071-4252713b7141"><g id="uuid-d8a0d861-3741-4013-a831-116151f82d43"><g><g><g><path d="M1.9662919044,96.3373031616h0c-1.0814999342,0-1.9662919044-.8849029541-1.9662919044-1.9663009644v-24.3399963379c0-1.0813980103,.8847919703-1.9662017822,1.9661920071-1.9662017822h.0001000166c1.0814999342,0,1.9662998915,.884803772,1.9662998915,1.9662017822v24.3399963379c0,1.0813980103-.8847999573,1.9663009644-1.9663000107,1.9663009644Z" style="fill:url(#uuid-f4928981-1560-4de3-a874-9fdc161d015a);"></path><path d="M1.9660919905,95.9402999878c-.8702999353,0-1.5782999992-.7251968384-1.5782999992-1.6163024902v-24.2461013794c0-.8909988403,.7080000639-1.6162033081,1.5782999992-1.6162033081s1.5781999826,.7251968384,1.5781999826,1.6162033081v24.2461013794c0,.8910980225-.7079000473,1.6163024902-1.5781999826,1.6163024902Z" style="fill:url(#uuid-c6ad7038-c1b6-4d3a-9b42-ffa44590549e);"></path></g><g><path d="M1.9662919044,59.654800415h0c-1.0814999342,0-1.9662919044-.8847999573-1.9662919044-1.9663009644v-4.7821006775c0-1.081401825,.8847919703-1.9662017822,1.9661920071-1.9662017822h.0001000166c1.0814999342,0,1.9662998915,.8847999573,1.9662998915,1.9662017822v4.7821006775c0,1.0815010071-.8847999573,1.9663009644-1.9663000107,1.9663009644Z" style="fill:url(#uuid-6dff96c9-973c-445e-8fca-bc29596d8949);"></path><path d="M1.9660919905,59.5323982239c-.8702999353,0-1.5782999992-.2234992981-1.5782999992-.4981994629v-7.4734992981c0-.2747001648,.7080000639-.4981994629,1.5782999992-.4981994629s1.5781999826,.2234992981,1.5781999826,.4981994629v7.4734992981c0,.2747001648-.7079000473,.4981994629-1.5781999826,.4981994629Z" style="fill:url(#uuid-f6db15d2-934a-4d06-85b7-de30d71e812e);"></path></g><g><path d="M1.9662919044,134.453704834h0c-1.0814999342,0-1.9662919044-.8847961426-1.9662919044-1.966293335v-24.3399963379c0-1.0813980103,.8847919703-1.9662017822,1.9661920071-1.9662017822h.0001000166c1.0814999342,0,1.9662998915,.884803772,1.9662998915,1.9662017822v24.3399963379c0,1.0814971924-.8847999573,1.966293335-1.9663000107,1.966293335Z" style="fill:url(#uuid-bcf1fb18-2f6c-4aec-ab1b-1d802d2c8596);"></path><path d="M1.9660919905,134.0567932129c-.8702999353,0-1.5782999992-.7252960205-1.5782999992-1.6163024902v-24.2462005615c0-.8909988403,.7080000639-1.6160964966,1.5782999992-1.6160964966s1.5781999826,.7250976562,1.5781999826,1.6160964966v24.2462005615c0,.8910064697-.7079000473,1.6163024902-1.5781999826,1.6163024902Z" style="fill:url(#uuid-209ff760-296e-4fae-9981-86bd978ab723);"></path></g></g><g><path d="M181.7926940918,114.6159973145h0c-1.0814971924,0-1.966293335-.884803772-1.966293335-1.9662017822v-32.3320007324c0-1.0813980103,.8847961426-1.9662017822,1.9662017822-1.9662017822h.0001068115c1.0814971924,0,1.9663085938,.884803772,1.9663085938,1.9662017822v32.3320007324c0,1.0813980103-.8849182129,1.9662017822-1.9663085938,1.9662017822h-.0000152588Z" style="fill:url(#uuid-0f35db72-e05f-4fbc-80fe-5d9c5f5fe640);"></path><path d="M181.792388916,114.1069030762c-.8701934814,0-1.5782012939-.9301986694-1.5782012939-2.0731964111v-31.099899292c0-1.1428985596,.7079925537-2.073097229,1.5782012939-2.073097229,.870300293,0,1.5782928467,.9301986694,1.5782928467,2.073097229v31.099899292c0,1.1429977417-.7079925537,2.0731964111-1.5782928467,2.0731964111Z" style="fill:url(#uuid-feb679c5-1afe-49c3-9687-c6202e7360e4);"></path></g><g><path d="M184.5827941895,106.8331985474h0c-1.0814971924,0-1.966293335-.884803772-1.966293335-1.9663009644v-24.3399963379c0-1.0813980103,.8847961426-1.9662017822,1.966293335-1.9662017822h.0001068115c1.0814056396,0,1.9662017822,.884803772,1.9662017822,1.9662017822v24.3399963379c0,1.0814971924-.8847961426,1.9663009644-1.966293335,1.9663009644h-.0000152588Z" style="fill:url(#uuid-0ae5d341-6400-493c-b546-56f56326ce00);"></path><path d="M184.5825805664,106.4362030029c-.870300293,0-1.5782928467-.7251968384-1.5782928467-1.6162033081v-24.2462005615c0-.8909988403,.7079925537-1.6162033081,1.5782928467-1.6162033081s1.5782012939,.7251968384,1.5782012939,1.6162033081v24.2462005615c0,.8909988403-.707901001,1.6162033081-1.5782012939,1.6162033081Z" style="fill:url(#uuid-f8b32f07-bf5e-44d3-99e1-9002cb5b49fe);"></path></g><rect x="1.9662919044" width="182.616502285" height="376.9284057617" rx="25.9174990654" ry="25.9174990654" style="fill:url(#uuid-195d4897-2972-432a-bd01-9eccef53c1f0);"></rect><path d="M27.8837909698,.581799984H158.6650848389c13.983215332,0,25.3358001709,11.3525910378,25.3358001709,25.3358006477V351.0118103027c0,13.9828186035-11.3522796631,25.3351135254-25.3350982666,25.3351135254H27.8840923309c-13.9832639694,0-25.335899353-11.3526306152-25.335899353-25.3359069824V25.9173984528c-.0000009537-13.9830970764,11.3524999619-25.3355984688,25.3355979919-25.3355984688Z" style="fill:url(#uuid-14e32c1d-4f38-48e3-a092-1c2d3882f227);"></path><rect x="1.9662919044" y="29.4740009308" width="182.616502285" height="2.9481983185" style="fill:#aaabac;"></rect><rect x="5.3164920807" y="3.3505001068" width="175.916097641" height="370.2280826569" rx="22.5669994354" ry="22.5669994354" style="fill:url(#uuid-8d25fffb-ae9a-4156-8c42-c094c326d4f1);"></rect><path d="M27.8835906982,4.4591999054H158.6651916504c11.8432159424,0,21.458404541,9.6151866913,21.458404541,21.4584007263V351.0112915039c0,11.8432006836-9.6151885986,21.458404541-21.458404541,21.458404541H27.8841915131c-11.843378067,0-21.4587001801-9.6153259277-21.4587001801-21.4587097168V25.9172992706c.0000004768-11.843047142,9.6150531769-21.4580993652,21.4580993652-21.4580993652Z" style="fill:url(#uuid-133c47f7-cd36-43b5-ad23-f64986a3fb7c);"></path><path d="M102.1071929932,14.4639997482h-27.2429962158c-.9443969727,0-1.7098007202,.7653999329-1.7098007202,1.7097997665,0,.9444999695,.7654037476,1.7098999023,1.7098007202,1.7098999023h27.2429962158c.9443969727,0,1.7098999023-.7653999329,1.7098999023-1.7098999023,0-.9443998337-.7655029297-1.7097997665-1.7098999023-1.7097997665Z" style="fill:url(#uuid-6107f5e9-3c16-411d-bb62-41b3be9dc7b6);"></path><g><circle cx="110.0190887451" cy="16.1737995148" r="2.4395990372" style="fill:url(#uuid-de2b7b5a-78fb-4569-8eec-a5e0ba184ab2);"></circle><path d="M111.7289962769,16.1737995148c0,.9444007874-.7656097412,1.7098999023-1.7099075317,1.7098999023s-1.7098007202-.765499115-1.7098007202-1.7098999023,.7655029297-1.7098999023,1.7098007202-1.7098999023,1.7099075317,.7655000687,1.7099075317,1.7098999023Z" style="fill:url(#uuid-101cec06-fcbd-4508-8e4c-cfa269275b6d);"></path></g><g><path d="M157.7751922607,10.3062000275h-22.5550994873c-.6958007812,0-1.2597961426,.5665998459-1.2597961426,1.2653999329v5.9708003998c0,4.1883010864-3.3804931641,7.5834999084-7.5504989624,7.5834999084H60.139289856c-4.1699981689,0-7.5504989624-3.3952007294-7.5504989624-7.5834999084v-5.9708003998c0-.698800087-.563999176-1.2653999329-1.2597923279-1.2653999329H28.773891449c-8.765499115,0-15.8712997437,7.1369991302-15.8712997437,15.9407997131V350.6821899414c0,8.8038024902,7.1058006287,15.9407043457,15.8712997437,15.9407043457H157.7751922607c8.7655029297,0,15.8712921143-7.1369018555,15.8712921143-15.9407043457V26.2469997406c0-8.8038005829-7.1058044434-15.9407997131-15.871307373-15.9407997131h.0000152588Z" style="fill:url(#uuid-e9ccc3bb-e609-4ecc-b05e-5a6348d04dbf); isolation:isolate; opacity:.8600000143;"></path><g style="clip-path:url(#uuid-5f99bc96-3702-4614-a658-ebdfb08e973e);"><g><path d="M157.5450286865,19.6927871704c0-.2914924622,.236328125-.5278167725,.5278167725-.5278167725h7.2576904297c.2914886475,0,.5278015137,.2363243103,.5278015137,.5278167725v2.5072517395c0,.2914924622-.236328125,.5278167725-.5278015137,.5278167725h-7.2576904297c-.2914886475,0-.5278015137-.2363243103-.5278015137-.5278167725v-2.5072517395h-.0000152588Z" style="fill:#fff;"></path><path d="M158.0728302002,18.7690677643h7.2576904297c.5101013184,0,.9238739014,.4135665894,.9238739014,.9237194061v2.5072517395c0,.5101528168-.413772583,.9237194061-.9238739014,.9237194061h-7.2576904297c-.5101013184,0-.9234619141-.4135665894-.9234619141-.9237194061v-2.5072517395c0-.5101528168,.4133605957-.9237194061,.9234619141-.9237194061Zm-1.3195343018,.9237194061c0-.7287731171,.5908050537-1.3195819855,1.3195343018-1.3195819855h7.2576904297c.728729248,0,1.3195343018,.5908088684,1.3195343018,1.3195819855v2.5072517395c0,.7287731171-.5908050537,1.3195819855-1.3195343018,1.3195819855h-7.2576904297c-.728729248,0-1.3195343018-.5908088684-1.3195343018-1.3195819855v-2.5072517395Zm10.9528045654,1.2536258698c0,.4055786133-.2816009521,.7454071045-.6599731445,.8347892761v-1.6695785522c.3783721924,.0893821716,.6599731445,.4292106628,.6599731445,.8347892761Z" style="fill:#fff; fill-rule:evenodd; isolation:isolate; opacity:.400000006;"></path><path d="M143.9284362793,18.7849178314c-.2272644043,0-.4117126465,.1843242645-.4117126465,.4117126465v3.7054195404c0,.227388382,.1844482422,.4117126465,.4117126465,.4117126465h.5352172852c.2272644043,0,.4117126465-.1843242645,.4117126465-.4117126465v-3.7054195404c0-.227388382-.1844482422-.4117126465-.4117126465-.4117126465h-.5352172852Zm-2.4496917725,1.3174419403c0-.227388382,.1844482422-.4117126465,.4117126465-.4117126465h.5352325439c.2272644043,0,.4117126465,.1843242645,.4117126465,.4117126465v2.7996501923c0,.227388382-.1844482422,.4117126465-.4117126465,.4117126465h-.5352325439c-.2272644043,0-.4117126465-.1843242645-.4117126465-.4117126465v-2.7996501923Zm-1.6262664795,.494096756c-.2272644043,0-.4117126465,.1843643188-.4117126465,.4117126465v1.8938808441c0,.227388382,.1844482422,.4117126465,.4117126465,.4117126465h.5352172852c.2272644043,0,.4117126465-.1843242645,.4117126465-.4117126465v-1.8938808441c0-.2273483276-.1844482422-.4117126465-.4117126465-.4117126465h-.5352172852Zm-1.9968109131,2.7173080444c-.2503204346,0-.4528808594-.2027683258-.4528808594-.4528846741v-1.1322116852c0-.2501163483,.2025604248-.4528846741,.4528808594-.4528846741h.4528808594c.2503204346,0,.4528808594,.2027683258,.4528808594,.4528846741v1.1322116852c0,.2501163483-.202545166,.4528846741-.4528808594,.4528846741h-.4528808594Z" style="fill:#fff; fill-rule:evenodd;"></path><path d="M147.0249328613,23.3137645721h2.5695037842v-.6107349396h-1.8432312012v-3.4505271912h-.726272583v4.0612621307Z" style="fill:#fff;"></path><path d="M150.2630462646,23.3137645721h.7233886719v-3.4505271912h1.2129058838v-.6107349396h-3.1520843506v.6107349396h1.2157897949v3.4505271912Z" style="fill:#fff;"></path><path d="M152.4093170166,23.3137645721h2.6287994385v-.6107349396h-1.9025268555v-1.1567497253h1.7983551025v-.5882148743h-1.7983551025v-1.094827652h1.9025268555v-.6107349396h-2.6287994385v4.0612621307Z" style="fill:#fff;"></path><path d="M26.2402038574,15.0794992447h16.4685287476c2.5012130737,0,4.5288467407,2.0276327133,4.5288467407,4.528845787h0c0,2.5012130737-2.027633667,4.5288467407-4.5288467407,4.5288467407H26.2402038574c-2.5012130737,0-4.5288467407-2.027633667-4.5288467407-4.5288467407h0c0-2.5012130737,2.0276317596-4.528845787,4.5288467407-4.528845787Z" style="fill:#34c759;"></path><path d="M33.0917701721,20.8781509399c.8505973816,.8525753021,1.8856887817,1.5092582703,2.7305221558,1.5092582703,.3777084351,0,.7092590332-.1324901581,.9745254517-.4262886047,.155708313-.1727962494,.2508544922-.3715305328,.2508544922-.5702629089,0-.1526641846-.0605621338-.302444458-.2075881958-.4061145782l-.885181427-.6279029846c-.1413002014-.0979480743-.2566184998-.1440181732-.3604164124-.1440181732-.1354942322,0-.2566184998,.0748901367-.3892326355,.2073802948l-.2076263428,.2073783875c-.0345840454,.03166008-.0749320984,.0460700989-.1124382019,.0460700989-.0461120605,0-.0893821716-.0172920227-.1182022095-.0345420837-.1816482544-.097946167-.4930686951-.3629245758-.7813911438-.6509590149s-.5564727783-.5962028503-.6516189575-.7805271149c-.0172920227-.0317020416-.0317001343-.0720081329-.0317001343-.1181201935,0-.0345420837,.0115280151-.0748901367,.0432281494-.1094322205l.2076263428-.2102622986c.1297302246-.1353721619,.2075843811-.2534503937,.2075843811-.3888225555,0-.1065921783-.0461540222-.2217903137-.1441841125-.360042572l-.6256790161-.8755912781c-.1066741943-.1497821808-.2565803528-.2131443024-.4209365845-.2131443024-.196056366,0-.3921585083,.0864181519-.5622367859,.2505683899-.2883625031,.2707424164-.4152126312,.6077289581-.4152126312,.9793014526,0,.8439292908,.6487369537,1.8664188385,1.4993038177,2.7160739899Z" style="fill:#fff;"></path></g></g></g></g></g></g></svg></div>
<style>
/* From Uiverse.io by kennyotsu - Tags: login, OTP, confirmation, form, phone */
.design-container {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
}

.design-wrapper {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.8rem;
  height: 100%;
  width: 100%;
}

.call {
  width: 280px;
  height: 90px;
  border-radius: 1.2rem;
  background: rgba(19, 19, 19, 0.836);
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  padding: 1rem;
  color: #fff;
  font-size: large;
  font-weight: bold;
  -webkit-box-shadow: 0px 0.2rem 0.5rem rgba(20, 20, 20, 0.322);
  box-shadow: 0px 0.2rem 0.5rem rgba(20, 20, 20, 0.322);
  -webkit-perspective: 800px;
  perspective: 800px;
  -webkit-animation: scale-out 10s infinite;
  animation: scale-out 10s infinite;
  position: relative;
}

.call::before {
  content: '';
  background-color: #111111e3;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  inset: 0;
  position: absolute;
  z-index: -1;
  text-align: center;
}

.phone-number::after {
  content: "1234";
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, rgb(206, 206, 206)), color-stop(40%, rgb(255, 255, 255)), color-stop(60%, rgb(255, 255, 255)), color-stop(80%, rgb(206, 206, 206)));
  background: linear-gradient(to right, rgb(206, 206, 206) 20%, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgb(206, 206, 206) 80%);
  background-size: 200% auto;
  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: shine 1.5s linear infinite;
  animation: shine 1.5s linear infinite;
}

.phone-desc {
  font-weight: normal;
  font-size: 14px;
  color: #727272;
}

.button-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  gap: 0.5rem;
}

.button {
  height: 40px;
  width: 40px;
  max-width: 40px;
  max-height: 40px;
  position: relative;
  border-radius: 100%;
}

.button:hover {
  cursor: auto;
}

.button svg {
  height: 20px;
  width: 20px;
  margin: auto;
  transform: translateX(10px)translateY(10px);
  fill: #fff;
}

.deny {
  background-color: #ec5445;
}

.deny svg {
  -webkit-transform: translateX(7px)translateY(10px) rotate(136deg) translate(-10%, -15%);
  -ms-transform: translateX(7px)translateY(10px) rotate(136deg) translate(-10%, -15%);
  transform: translateX(7px)translateY(10px) rotate(136deg) translate(-10%, -15%);
}

.allow {
  background-color: #68cd66;
}

.form-card {
  width: 280px;
  height: 350px;
  border-radius: 1.2rem;
  background-color: #fff;
  padding: 1.3rem;
  color: #212121;
  text-align: center;
  position: relative;
}

.form-card-title {
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
  margin-top: 0.2rem;
}

.form-card-prompt {
  margin-bottom: 2rem;
  font-size: 14px;
}
/* hard reset */
.form-card-input {
  all: unset;
}

.form-card-input-wrapper {
  position: relative;
  width: 100%;
  height: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
}

.form-card-input {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 2rem;
  text-align: start;
  -webkit-transform: translateX(36px);
  -ms-transform: translateX(36px);
  transform: translateX(36px);
  position: absolute;
  z-index: 3;
  background-color: transparent;
}

.form-card-input-bg {
  content: '';
  width: 240px;
  height: 60px;
  margin: auto;
  inset: 0;
  bottom: 10px;
  position: absolute;
  z-index: 1;
  border-radius: 12px;
  background-color: rgba(206, 206, 206, 0.664);
}

.call-again {
  color: #5e5e5e;
  font-size: 14px;
}

.call-again:hover {
  cursor: pointer;
}

.underlined {
  text-decoration: underline;
}

.form-card-submit {
  position: absolute;
  width: 180px;
  margin: auto;
  color: white;
  border: none;
  background-color: #212121;
  font-size: 1.2rem;
  border-radius: 0.8rem;
  padding: 0.8rem 3.5rem;
  bottom: 2rem;
  left: 0;
  right: 0;
  -webkit-transition: 200ms ease-in-out;
  transition: 200ms ease-in-out;
}

.form-card-submit:hover {
  cursor: pointer;
  opacity: 0.8;
}

.form-card-submit:active {
  opacity: 0.9;
  -webkit-transform: scale(95%);
  -ms-transform: scale(95%);
  transform: scale(95%);
}

#uuid-d8a0d861-3741-4013 {
  width: auto;
  height: 500px;
}

@-webkit-keyframes scale-out {
  0%, 15%, 100% {
    color: #fff;
    -webkit-transform: scale(72%);
    transform: scale(72%);
  }

  16%, 98% {
    color: rgba(255, 255, 255, 0.295);
    -webkit-transform: scale(100%);
    transform: scale(100%);
  }
}

@keyframes scale-out {
  0%, 15%, 100% {
    color: #fff;
    -webkit-transform: scale(72%);
    transform: scale(72%);
  }

  16%, 98% {
    color: rgba(255, 255, 255, 0.295);
    -webkit-transform: scale(100%);
    transform: scale(100%);
  }
}

@-webkit-keyframes shine {
  to {
    background-position: 200% center;
  }
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}
</style>


================================================
FILE: Forms/krlozCJ_average-snake-9.html
================================================
<div class="container">
  <input id="register_toggle" type="checkbox">
  <div class="slider">
    <form class="form">
      <span class="title">Login</span>
      <div class="form_control">
        <input required="" class="input" type="text">
        <label class="label">Username</label>
      </div>
      <div class="form_control">
        <input required="" class="input" type="password">
        <label class="label">Password</label>
      </div>
      <button>Login</button>

      <span class="bottom_text">Don't have an account? <label class="swtich" for="register_toggle">Sign Up</label> </span>
    </form>
    <form class="form">
      <span class="title">Sign Up</span>
      <div class="form_control">
        <input required="" class="input" type="text">
        <label class="label">Username</label>
      </div>
      <div class="form_control">
        <input required="" class="input" type="email">
        <label class="label">Email</label>
      </div>
      <div class="form_control">
        <input required="" class="input" type="password">
        <label class="label">Password</label>
      </div>
      <button>Sign Up</button>

      <span class="bottom_text">Already have an account? <label class="swtich" for="register_toggle">Sign In</label> </span>
    </form>

    
    </div>
</div>
<style>
/* From Uiverse.io by krlozCJ - Tags: neumorphism, login, form */
.container {
  width: 300px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;
}

.container .slider {
  width: 200%;
  position: relative;
  transition: transform ease-out 0.3s;
  display: flex;
}

#register_toggle {
  display: none;
}

.container #register_toggle:checked + .slider {
  transform: translateX(-50%);
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 1.5em 3em;
  width: 50%;
}

.title {
  text-align: center;
  font-weight: 700;
  font-size: 2em;
}

form .form_control {
  width: 100%;
  position: relative;
  overflow: hidden;
}

form .form_control .label {
  position: absolute;
  top: 50%;
  left: 10px;
  transition: transform ease 0.2s;
  transform: translate(0%, -50%);
  font-size: 0.75em;
  user-select: none;
  pointer-events: none;
  color: #b0b0b0;
}

form .form_control .input {
  width: 100%;
  background-color: transparent;
  border: none;
  outline: none;
  color: #fff;
  padding: 0.5rem;
  font-size: 0.75rem;
  border-radius: 5px;
  transition: box-shadow ease 0.2s;
  box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;
}

form .form_control .input:focus,
form .form_control .input:valid {
  box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 3px 3px 4px #0e0e0e, inset -3px -3px 4px #5f5e5e;
}

form .form_control .input:focus + .label,
form .form_control .input:valid + .label {
  transform: translate(-150%, -50%);
}

form button {
  width: 100%;
  background-color: transparent;
  border: none;
  outline: none;
  color: #fff;
  padding: 0.5rem;
  font-size: 0.75rem;
  border-radius: 5px;
  transition: box-shadow ease 0.1s;
  box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;
}

form button:active {
  box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 3px 3px 4px #0e0e0e, inset -3px -3px 4px #5f5e5e;
}

.bottom_text {
  font-size: 0.65em;
}

.bottom_text .swtich {
  font-weight: 700;
  cursor: pointer;
}
</style>


================================================
FILE: Forms/mi-series_angry-lizard-63.html
================================================
<form class="forgot-password">
  <div class="header">
    <span class="title">Forgot Password</span>
    <p class="sub-title">Please Select Option To Reset Password</p>
  </div>
  <div class="reset-option">
    <input value="email" id="email" name="option" type="radio" checked="">
    <label for="email">
      <div class="reset-info">
        <span class="reset-title">Reset via Email</span>
        <span class="reset-sub-title">Reset link will be sent to your registered email address</span>
      </div>
    </label>
  </div>
  <div class="reset-option">
    <input value="sms" id="sms" name="option" type="radio">
    <label for="sms">
       <div class="reset-info">
        <span class="reset-title">Reset via SMS</span>
        <span class="reset-sub-title">Reset link will be sent to your registered number</span>
      </div>
    </label>
  </div>
    <a href="#" title="" class="send-btn">Send Link</a>
    <p class="sub-title">Didn't receive link? <span class="resend">Resend<span></span></span></p>
</form>
<style>
/* From Uiverse.io by mi-series - Tags: form, password, forgot password */
.forgot-password {
  background-color: #E8EAE3;
  max-width: 450px;
  border-radius: 10px;
  padding: 20px;
  color: #000;
  box-shadow: 0px 87px 78px -39px rgba(0,0,0,0.4);
}

.header {
  text-align: center;
  margin-top: 0.75rem;
}

.forgot-password .title {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  color: rgba(0, 0, 0, 1);
}

.forgot-password .sub-title {
  margin-top: 0.4rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

.reset-option {
  margin-top: 1rem;
  margin-bottom: 15px;
}

.reset-option label {
  cursor: pointer;
  overflow: hidden;
  border: 2px solid rgba(229, 231, 235, 1);
  border-radius: 0.375rem;
  background-color: #F7F7F7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem .4rem;
  margin: 10px 0;
  transform: all .15s ease;
}

.reset-option label .reset-info {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.reset-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 1);
}

.reset-sub-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.reset-option input:checked + label {
  border-color: #FA2742;
}

.send-btn {
  text-decoration: none;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background-color: #FA2742;
  padding: 1rem 3rem;
  font-weight: 600;
  color: #000;
  transform: all .15s ease;
}

.send-btn:hover {
  opacity: .9;
}

.reset-option input {
  display: none;
}

.resend {
  color: #FA2742;
  font-weight: 600;
}
</style>


================================================
FILE: Forms/mi-series_bad-jellyfish-23.html
================================================
<div class="testbox">
        <form action="/">
          <p id="h1">Feedback Form</p>
          <p id="h4">Name</p>
          <input placeholder="Enter your full name" type="text" class="input">
          <p id="h4">Email<span>*</span></p>
          <input placeholder="Enter your email" type="text" class="input">
          <p id="h4">What is your overall impression?<span>*</span></p>
          <table>
            <tbody><tr>
              <th class="first-col"></th>
              <th>Very Satisfied</th>
              <th>Satisfied</th>
              <th>Unsatisfied</th>
              <th>Very Unsatisfied</th>
            </tr>
            <tr>
              <td class="first-col">Professional</td>
              <td><input name="point#2" value="none" type="radio"></td>
              <td><input name="point#2" value="none" type="radio"></td>
              <td><input name="point#2" value="none" type="radio"></td>
              <td><input name="point#2" value="none" type="radio"></td>
            </tr>
          </tbody></table>
          <p id="h4">Feel free to add any other comments or suggestions:</p>
          <textarea rows="5"></textarea>
          <div class="btn-block">
            <button href="/" type="submit">Send Feedback</button>
          </div>
        </form>
      </div>
<style>
/* From Uiverse.io by mi-series - Tags: simple, form, survey form, feedback, survey */
form, p {
  padding: 0;
  margin: 0;
  outline: none;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  line-height: 13px;
  border-radius: 10px;
}

#h1 {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
}

#h4 {
  margin: 20px 0 2px;
  color: #000;
}

.testbox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
  padding: 80px;
}

form {
  width: 100%;
  padding: 20px;
  background: #EBEBE1;
  box-shadow: 0 2px 5px #ccc;
}

.input {
  width: calc(100% - 10px);
  padding: 5px;
  border: 1px solid #000;
  border-radius: 3px;
  vertical-align: middle;
  background-color: #F7F7F7;
}

.input:hover, textarea:hover {
  outline: none;
  border: 1px solid #000;
}

.first-name {
  margin-bottom: 5px;
}

th, td {
  width: 21%;
  padding: 15px 0;
  border-bottom: 1px solid #ccc;
  text-align: center;
  vertical-align: set;
  line-height: 18px;
  font-weight: 400;
  word-break: break-all;
}

.first-col {
  width: 16%;
  text-align: left;
}

table {
  width: 100%;
}

textarea {
  width: calc(100% - 6px);
  background: #F7F7F7;
  border-radius: 5px;
}

.btn-block {
  margin-top: 20px;
  text-align: center;
}

button {
  width: 150px;
  padding: 10px;
  border: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #F3D153;
  font-size: 16px;
  color: #000;
  cursor: pointer;
}

button:hover {
  opacity: .9;
}

@media (min-width: 568px) {
  th, td {
    word-break: keep-all;
  }
}
</style>


================================================
FILE: Forms/mi-series_blue-mule-76.html
================================================
<div class="container">
  <div class="card cart">
    <label class="title">CHECKOUT</label>
    <div class="steps">
      <div class="step">
        <div>
          <span>SHIPPING</span>
          <p>221B Baker Street, W1U 8ED</p>
          <p>London, United Kingdom</p>
        </div>
        <hr>
        <div>
          <span>PAYMENT METHOD</span>
          <p>Visa</p>
          <p>**** **** **** 4243</p>
        </div>
        <hr>
        <div class="promo">
          <span>HAVE A PROMO CODE?</span>
          <form class="form">
            <input class="input_field" placeholder="Enter a Promo Code" type="text">
            <button>Apply</button>
          </form>
        </div>
        <hr>
        <div class="payments">
          <span>PAYMENT</span>
          <div class="details">
            <span>Subtotal:</span>
            <span>$240.00</span>
            <span>Shipping:</span>
            <span>$10.00</span>
            <span>Tax:</span>
            <span>$30.40</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card checkout">
    <div class="footer">
      <label class="price">$280.40</label>
      <button class="checkout-btn">Checkout</button>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by mi-series - Tags: form, payment card, discount form, payement form, checkout */
/* Body */
.container {
  display: grid;
  grid-template-columns: auto;
  gap: 0px;
}

hr {
  height: 1px;
  background-color: #E5C7C5;
  border: none;
}

.card {
  width: 400px;
  background: #F4E2DE;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
}

.title {
  width: 100%;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-bottom: 1px solid #E5C7C5;
  font-weight: 700;
  font-size: 11px;
  color: #000000;
}

/* Cart */
.cart {
  border-radius: 19px 19px 0px 0px;
}

.cart .steps {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.cart .steps .step {
  display: grid;
  gap: 10px;
}

.cart .steps .step span {
  font-size: 13px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 8px;
  display: block;
}

.cart .steps .step p {
  font-size: 11px;
  font-weight: 600;
  color: #000000;
}

/* Promo */
.promo form {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 10px;
  padding: 0px;
}

.input_field {
  width: auto;
  height: 36px;
  padding: 0 0 0 12px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #E5C7C5;
  background-color: #F4E2DE;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #F3D2C9;
  background-color: #F4E2DE;
}

.promo form button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  gap: 10px;
  width: 100%;
  height: 36px;
  background: #F3D2C9;
  box-shadow: 0px 0.5px 0.5px #F3D2C9, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 5px;
  border: 0;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #000000;
}

/* Checkout */
.payments .details {
  display: grid;
  grid-template-columns: 10fr 1fr;
  padding: 0px;
  gap: 5px;
}

.payments .details span:nth-child(odd) {
  font-size: 12px;
  font-weight: 600;
  color: #000000;
  margin: auto auto auto 0;
}

.payments .details span:nth-child(even) {
  font-size: 13px;
  font-weight: 600;
  color: #000000;
  margin: auto 0 auto auto;
}

.checkout .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 20px;
  background-color: #ECC2C0;
}

.price {
  position: relative;
  font-size: 22px;
  color: #2B2B2F;
  font-weight: 900;
}

.checkout .checkout-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 36px;
  background: #F3D2C9;
  box-shadow: 0px 0.5px 0.5px #E5C7C5, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 7px;
  border: 1px solid #ECC2C0;
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}
</style>


================================================
FILE: Forms/mi-series_funny-husky-80.html
================================================
<div class="container">
      <p>Password Generator</p>
      <div class="wrapper">
        <div class="input-box">
          <input disabled="" type="text">
          <span>Copy</span>
        </div>
        <div class="pass-settings">
          <label class="title">Password Settings</label>
          <ul class="options">
            <li class="option">
              <input checked="" id="lowercase" type="checkbox">
              <label for="lowercase">Lowercase (a-z)</label>
            </li>
            <li class="option">
              <input id="uppercase" type="checkbox">
              <label for="uppercase">Uppercase (A-Z)</label>
            </li>
            <li class="option">
              <input id="numbers" type="checkbox">
              <label for="numbers">Numbers (0-9)</label>
            </li>
            <li class="option">
              <input id="symbols" type="checkbox">
              <label for="symbols">Symbols (!-$^+)</label>
            </li>
            <li class="option">
              <input id="exc-duplicate" type="checkbox">
              <label for="exc-duplicate">Exclude Duplicate</label>
            </li>
            <li class="option">
              <input id="spaces" type="checkbox">
              <label for="spaces">Include Spaces</label>
            </li>
          </ul>
        </div>
        <button class="generate-btn">Generate Password</button>
      </div>
</div>

<style>
/* From Uiverse.io by mi-series - Tags: material design, minimalist, form, checkbox, password, minimal, #button, password generator */
.container {
  width: 450px;
  background: #8C92BB;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.container p {
  font-weight: 600;
  font-size: 1.31rem;
  padding: 1rem 1.75rem;
  border-bottom: 1px solid #858BB2;
}

.wrapper {
  margin: 1.25rem 1.75rem;
}

.wrapper .input-box {
  position: relative;
}

.input-box input {
  width: 100%;
  height: 53px;
  color: #858BB2;
  background: #858BB2;
  font-size: 1.06rem;
  font-weight: 500;
  border-radius: 4px;
  letter-spacing: 1.4px;
  border: 1px solid #000;
  padding: 0 2.85rem 0 1rem;
}

.input-box span {
  position: absolute;
  right: 13px;
  cursor: pointer;
  line-height: 53px;
  color: #000;
}

.input-box span:hover {
  color: #46495E!important;
}

.wrapper .pass-settings {
  margin: 1.56rem 0 1.25rem;
}

.pass-settings .options {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.pass-settings .options .option {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  width: calc(100% / 2);
}

.options .option:first-child input {
  opacity: 0.7;
}

.options .option input {
  height: 16px;
  width: 16px;
  cursor: pointer;
}

.options .option label {
  cursor: pointer;
  color: #000;
  padding-left: 0.63rem;
}

.pass-settings input[type='checkbox'] {
  accent-color: #46496E;
}

.wrapper .generate-btn {
  width: 100%;
  color: #000;
  border: none;
  outline: none;
  cursor: pointer;
  background: #46496E;
  font-size: 1.06rem;
  padding: 0.94rem 0;
  border-radius: 5px;
  text-transform: uppercase;
  margin: 0.94rem 0 1.3rem;
}

.wrapper .generate-btn:hover {
  background: #46495E;
}
</style>


================================================
FILE: Forms/mi-series_good-walrus-42.html
================================================
<section class="container">
  <header>Registration Form</header>
  <form class="form" action="#">
      <div class="input-box">
          <label>Full Name</label>
          <input required="" placeholder="Enter full name" type="text">
      </div>
      <div class="column">
          <div class="input-box">
            <label>Phone Number</label>
            <input required="" placeholder="Enter phone number" type="telephone">
          </div>
          <div class="input-box">
            <label>Birth Date</label>
            <input required="" placeholder="Enter birth date" type="date">
          </div>
      </div>
      <div class="gender-box">
        <label>Gender</label>
        <div class="gender-option">
          <div class="gender">
            <input checked="" name="gender" id="check-male" type="radio">
            <label for="check-male">Male</label>
          </div>
          <div class="gender">
            <input name="gender" id="check-female" type="radio">
            <label for="check-female">Female</label>
          </div>
          <div class="gender">
            <input name="gender" id="check-other" type="radio">
            <label for="check-other">Prefer not to say</label>
          </div>
        </div>
      </div>
      <div class="input-box address">
        <label>Address</label>
        <input required="" placeholder="Enter street address" type="text">
        <div class="column">
          <div class="select-box">
            <select>
              <option hidden="">Country</option>
              <option>USA</option>
              <option>UK</option>
              <option>Germany</option>
              <option>Japan</option>
            </select>
          </div>
        <input required="" placeholder="Enter your city" type="text">
        </div>
      </div>
      <button>Submit</button>
  </form>
</section>
<style>
/* From Uiverse.io by mi-series - Tags: form, register, registration form, registration */
.container {
  position: relative;
  max-width: 500px;
  width: 100%;
  background: #FCEDDA;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.container header {
  font-size: 1.2rem;
  color: #000;
  font-weight: 600;
  text-align: center;
}

.container .form {
  margin-top: 15px;
}

.form .input-box {
  width: 100%;
  margin-top: 10px;
}

.input-box label {
  color: #000;
}

.form :where(.input-box input, .select-box) {
  position: relative;
  height: 35px;
  width: 100%;
  outline: none;
  font-size: 1rem;
  color: #808080;
  margin-top: 5px;
  border: 1px solid #EE4E34;
  border-radius: 6px;
  padding: 0 15px;
  background: #FCEDDA;
}

.input-box input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.form .column {
  display: flex;
  column-gap: 15px;
}

.form .gender-box {
  margin-top: 10px;
}

.form :where(.gender-option, .gender) {
  display: flex;
  align-items: center;
  column-gap: 50px;
  flex-wrap: wrap;
}

.form .gender {
  column-gap: 5px;
}

.gender input {
  accent-color: #EE4E34;
}

.form :where(.gender input, .gender label) {
  cursor: pointer;
}

.gender label {
  color: #000;
}

.address :where(input, .select-box) {
  margin-top: 10px;
}

.select-box select {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  color: #808080;
  font-size: 1rem;
  background: #FCEDDA;
}

.form button {
  height: 40px;
  width: 100%;
  color: #000;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #EE4E34;
}

.form button:hover {
  background: #EE3E34;
}
</style>


================================================
FILE: Forms/mi-series_spotty-goose-56.html
================================================
<div class="container">
    <div class="form_area">
        <p class="title">SIGN UP</p>
        <form action="">
            <div class="form_group">
                <label class="sub_title" for="name">Name</label>
                <input placeholder="Enter your full name" class="form_style" type="text">
            </div>
            <div class="form_group">
                <label class="sub_title" for="email">Email</label>
                <input placeholder="Enter your email" id="email" class="form_style" type="email">
            </div>
            <div class="form_group">
                <label class="sub_title" for="password">Password</label>
                <input placeholder="Enter your password" id="password" class="form_style" type="password">
            </div>
            <div>
                <button class="btn">SIGN UP</button>
                <p>Have an Account? <a class="link" href="">Login Here!</a></p><a class="link" href="">
            </a></div><a class="link" href="">
        
    </a></form></div><a class="link" href="">
</a></div>
<style>
/* From Uiverse.io by mi-series - Tags: simple, material design, neumorphism, purple, minimalist, form, brutalism */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.form_area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #EDDCD9;
  height: auto;
  width: auto;
  border: 2px solid #264143;
  border-radius: 20px;
  box-shadow: 3px 4px 0px 1px #E99F4C;
}

.title {
  color: #264143;
  font-weight: 900;
  font-size: 1.5em;
  margin-top: 20px;
}

.sub_title {
  font-weight: 600;
  margin: 5px 0;
}

.form_group {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  margin: 10px;
}

.form_style {
  outline: none;
  border: 2px solid #264143;
  box-shadow: 3px 4px 0px 1px #E99F4C;
  width: 290px;
  padding: 12px 10px;
  border-radius: 4px;
  font-size: 15px;
}

.form_style:focus, .btn:focus {
  transform: translateY(4px);
  box-shadow: 1px 2px 0px 0px #E99F4C;
}

.btn {
  padding: 15px;
  margin: 25px 0px;
  width: 290px;
  font-size: 15px;
  background: #DE5499;
  border-radius: 10px;
  font-weight: 800;
  box-shadow: 3px 3px 0px 0px #E99F4C;
}

.btn:hover {
  opacity: .9;
}

.link {
  font-weight: 800;
  color: #264143;
  padding: 5px;
}
</style>


================================================
FILE: Forms/mobinkakei_big-cougar-25.html
================================================
<!-- From Uiverse.io by mobinkakei  - Tags: form, login , login form -->
<div
  class="relative flex w-96 flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md"
>
  <div
    class="relative mx-4 -mt-6 mb-4 grid h-28 place-items-center overflow-hidden rounded-xl bg-gradient-to-tr from-cyan-600 to-cyan-400 bg-clip-border text-white shadow-lg shadow-cyan-500/40"
  >
    <h3
      class="block font-sans text-3xl font-semibold leading-snug tracking-normal text-white antialiased"
    >
      Sign In
    </h3>
  </div>
  <div class="flex flex-col gap-4 p-6">
    <div class="relative h-11 w-full min-w-[200px]">
      <input
        placeholder=""
        class="peer h-full w-full rounded-md border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-cyan-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
      />
      <label
        class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-cyan-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-cyan-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-cyan-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"
      >
        Email
      </label>
    </div>
    <div class="relative h-11 w-full min-w-[200px]">
      <input
        placeholder=""
        class="peer h-full w-full rounded-md border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-cyan-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
      />
      <label
        class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-cyan-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-cyan-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-cyan-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"
      >
        Password
      </label>
    </div>
    <div class="-ml-2.5">
      <div class="inline-flex items-center">
        <label
          data-ripple-dark="true"
          for="checkbox"
          class="relative flex cursor-pointer items-center rounded-full p-3"
        >
          <input
            id="checkbox"
            class="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-cyan-500 checked:bg-cyan-500 checked:before:bg-cyan-500 hover:before:opacity-10"
            type="checkbox"
          />
          <span
            class="pointer-events-none absolute top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100"
          >
            <svg
              stroke-width="1"
              stroke="currentColor"
              fill="currentColor"
              viewBox="0 0 20 20"
              class="h-3.5 w-3.5"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                fill-rule="evenodd"
              ></path>
            </svg>
          </span>
        </label>
        <label
          for="checkbox"
          class="mt-px cursor-pointer select-none font-light text-gray-700"
        >
          Remember Me
        </label>
      </div>
    </div>
  </div>
  <div class="p-6 pt-0">
    <button
      data-ripple-light="true"
      type="button"
      class="block w-full select-none rounded-lg bg-gradient-to-tr from-cyan-600 to-cyan-400 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-cyan-500/20 transition-all hover:shadow-lg hover:shadow-cyan-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
    >
      Sign In
    </button>
    <p
      class="mt-6 flex justify-center font-sans text-sm font-light leading-normal text-inherit antialiased"
    >
      Don't have an account?
      <a
        class="ml-1 block font-sans text-sm font-bold leading-normal text-cyan-500 antialiased"
        href="#signup"
      >
        Sign up
      </a>
    </p>
  </div>
</div>


    

================================================
FILE: Forms/nathann09_bad-hound-78.html
================================================

    <form class="form">
       <p class="form-title">Sign in to your account</p>
        <div class="input-container">
          <input type="email" placeholder="Enter email">
          <span>
          </span>
      </div>
      <div class="input-container">
          <input type="password" placeholder="Enter password">
        </div>
         <button type="submit" class="submit">
        Sign in
      </button>

      <p class="signup-link">
        No account?
        <a href="">Sign up</a>
      </p>
   </form>

<style>
/* From Uiverse.io by nathann09 - Tags:  */
.form {
  background-color: #fff;
  display: block;
  padding: 1rem;
  max-width: 350px;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.form-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  text-align: center;
  color: #000;
}

.input-container {
  position: relative;
}

.input-container input, .form button {
  outline: none;
  border: 1px solid #e5e7eb;
  margin: 8px 0;
}

.input-container input {
  background-color: #fff;
  padding: 1rem;
  padding-right: 3rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: 300px;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.submit {
  display: block;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  background-color: #4F46E5;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  width: 100%;
  border-radius: 0.5rem;
  text-transform: uppercase;
}

.signup-link {
  color: #6B7280;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}

.signup-link a {
  text-decoration: underline;
}
</style>


================================================
FILE: Forms/omar-alghaish_breezy-insect-15.html
================================================

  <form class="form">
      <p class="login">Log in to Twitter</p>
      <div class="inputContainer">
        <input type="button" value="next" class="submit">
        <input placeholder="phone or email or username" type="text" class="fInput email">
        <input placeholder="Enter your password" type="text" class="fInput pass">
      </div>
      <button class="forget">forget password?</button>
      <div class="con">
        <p>don't have account?&nbsp;</p>
        <a href="#"> sign in</a>
      </div>
    </form>

<style>
/* From Uiverse.io by omar-alghaish - Tags: login, twitter, form */
.form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  width: 400px;
  padding: 50px;
  height: 500px;
  background-color: rgb(0, 0, 0);
  border-radius: 10px;
}

.inputContainer {
  background-color: rgba(255, 0, 0, 0);
  position: relative;
  width: 100%;
  height: 50px;
}

.fInput {
  width: 100%;
  height: 50px;
  border-radius: 3px;
  border: 1px solid rgb(48, 45, 45);
  background-color: black;
  padding: 10px;
  color: white;
  transition: .1s;
  position: absolute;
}

.fInput:focus {
  border: 1px rgb(0, 136, 255) solid;
  outline: none;
}

.fInput:focus::placeholder {
  color: rgb(0, 136, 255);
}

.fInput.email {
  z-index: 1;
}

.fInput.pass:focus {
  z-index: 2;
}

.submit {
  width: 100%;
  top: 60px;
  padding: 7px 0;
  border-radius: 20px;
  cursor: pointer;
  transition: .3s;
  position: absolute;
}

.submit:focus + .email {
  display: none;
}

.login {
  width: 100%;
  color: white;
  font-family: sans-serif;
  font-weight: 700;
  font-size: 20px;
  padding: 30px 0;
  position: absolute;
  top: 90px;
  left: 55px
}

.submit:hover {
  opacity: .9;
}

.forget {
  width: 100%;
  background-color: transparent;
  color: white;
  border: 1PX solid rgba(255, 255, 255, 0.151);
  margin-top: 15px;
  padding: 7px 0;
  border-radius: 20px;
  cursor: pointer;
  transition: .3s;
  margin-top: 50px;
}

.forget:hover {
  background-color: rgba(255, 255, 255, 0.151);
}

.con {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin-top: 30px;
  color: rgb(111, 103, 103);
  font-size: 13px;
  font-family: sans-serif;
  background-color: rgba(255, 0, 0, 0);
}

.con a {
  color: rgb(0, 136, 255);
}
</style>


================================================
FILE: Forms/omar-alghaish_fluffy-cougar-42.html
================================================
<div class="form-container">
    <p>Login</p>
<form class="form">
    <label>Email</label>
    <input type="text" class="input" placeholder="Enter yout email">
    <label>Password</label>
    <input type="password" class="input" placeholder="Password"> 
    <button>Submit</button>
</form>
</div>
<style>
/* From Uiverse.io by omar-alghaish - Tags: login, form */
.form-container {
  width: 300px;
  background: linear-gradient(180deg,rgb(0, 183, 255) 25%,rgb(255, 255, 255) 20%);
  height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.form {
  width: 80%;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

.form-container p {
  position: absolute;
  top: 10%;
  left: 10%;
  font-size: 30px;
  font-weight: 900;
  color: rgb(255, 255, 255);
}

.form-container label {
  color: rgb(40, 42, 44);
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 15px;
}

.form-container .input {
  padding: 10px;
  height: 35px;
  border: none;
  background-color: rgb(224, 231, 236);
}

.form-container .input:focus {
  outline: none;
}

.form-container button {
  border: none;
  height: 35px;
  margin-top: 30px;
  background-color: rgb(0, 183, 255);
  color: white;
  font-size: 16px;
}

</style>


================================================
FILE: Forms/rahilansari261_odd-badger-94.html
================================================
<div class="form">
      <div class="title">Welcome</div>
      <div class="subtitle">Let's create your account!</div>

      <div class="input-container ic1">
        <input placeholder="" type="text" class="input" id="firstname">
        <div class="cut"></div>
        <label class="iLabel" for="firstname">First name</label>
      </div>

      <div class="input-container ic2">
        <input placeholder="" type="text" class="input" id="lastname">
        <div class="cut"></div>
        <label class="iLabel" for="lastname">Last name</label>
      </div>
      <div class="input-container ic2">
        <input placeholder="" type="text" class="input" id="email">
        <div class="cut cut-short"></div>
        <label class="iLabel" for="email">Email</label>
      </div>
      <button class="submit" type="text">submit</button>
    </div>
<style>
/* From Uiverse.io by rahilansari261 - Tags: form, register, loginform */
.form {
  background-color: #15172b;
  border-radius: 20px;
  box-sizing: border-box;
  height: 500px;
  padding: 20px;
  width: 320px;
}

.title {
  color: #eee;
  font-family: sans-serif;
  font-size: 36px;
  font-weight: 600;
  margin-top: 30px;
}

.subtitle {
  color: #eee;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin-top: 10px;
}

.input-container {
  height: 50px;
  position: relative;
  width: 100%;
}

.ic1 {
  margin-top: 40px;
}

.ic2 {
  margin-top: 30px;
}

.input {
  background-color: #303245;
  border-radius: 12px;
  border: 0;
  box-sizing: border-box;
  color: #eee;
  font-size: 18px;
  height: 100%;
  outline: 0;
  padding: 4px 20px 0;
  width: 100%;
}

.cut {
  background-color: #15172b;
  border-radius: 10px;
  height: 20px;
  left: 20px;
  position: absolute;
  top: -20px;
  transform: translateY(0);
  transition: transform 200ms;
  width: 76px;
}

.cut-short {
  width: 50px;
}

.iLabel {
  color: #65657b;
  font-family: sans-serif;
  left: 20px;
  line-height: 14px;
  pointer-events: none;
  position: absolute;
  transform-origin: 0 50%;
  transition: transform 200ms, color 200ms;
  top: 20px;
}

.input:focus ~ .cut {
  transform: translateY(8px);
}

.input:focus ~ .iLabel {
  transform: translateY(-30px) translateX(10px) scale(0.75);
}

.input:not(:focus) ~ .iLabel {
  color: #808097;
}

.input:focus ~ .iLabel {
  color: #dc2f55;
}

.submit {
  background-color: #08d;
  border-radius: 12px;
  border: 0;
  box-sizing: border-box;
  color: #eee;
  cursor: pointer;
  font-size: 18px;
  height: 50px;
  margin-top: 38px;
  text-align: center;
  width: 100%;
}

.submit:active {
  background-color: #06b;
}
</style>


================================================
FILE: Forms/reshades_pink-bobcat-64.html
================================================
<form class="form">
  <div class="content">
    <p align="center">OTP Verification</p>
    <div class="inp">
    <input placeholder="" type="text" class="input" maxlength="1">
    <input placeholder="" type="text" class="input" maxlength="1"> 
    <input placeholder="" type="text" class="input" maxlength="1"> 
    <input placeholder="" type="text" class="input" maxlength="1"> 
    </div>
    <button>Verify</button>
    <svg class="svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path fill="#4073ff" d="M56.8,-23.9C61.7,-3.2,45.7,18.8,26.5,31.7C7.2,44.6,-15.2,48.2,-35.5,36.5C-55.8,24.7,-73.9,-2.6,-67.6,-25.2C-61.3,-47.7,-30.6,-65.6,-2.4,-64.8C25.9,-64.1,51.8,-44.7,56.8,-23.9Z" transform="translate(100 100)" class="path"></path>
  </svg>
  </div>
  
</form>
<style>
/* From Uiverse.io by reshades - Tags: OTP, form, animated, clean, verify, Verification */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #00000000;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8.2px);
  -webkit-backdrop-filter: blur(8.2px);
  border: 1px solid #369eff66;
  width: 14em;
  height: 14em;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  margin-bottom: auto;
}

.form p {
  color: #fff;
  font-weight: bolder;
}

.path {
  fill: #369eff
}

.svg {
  filter: blur(20px);
  z-index: -1;
  position: absolute;
  opacity: 50%;
  animation: anim 3s infinite;
}

.inp {
  margin-left: auto;
  margin-right: auto;
  white-space: 4px;
}

.input + .input {
  margin-left: 0.3em
}

.input {
  color: #fff;
  height: 2em;
  width: 2em;
  float: left;
  text-align: center;
  background: #00000000;
  outline: none;
  border: 1px #369eff solid;
  border-radius: 10px;
  transition: all 0.6s ease;
}

.input:focus {
  outline: none;
  border: 1px #fff solid;
}

.input:not(:placeholder-shown) {
  opacity: 40%
}

.form button {
  margin-left: auto;
  margin-right: auto;
  background-color: #00000000;
  color: #fff;
  width: 8.5em;
  height: 2.3em;
  border: #369eff 0.2em solid;
  border-radius: 11px;
  transition: all 0.5s ease;
}

.form button:hover {
  background-color: #369eff;
}

@keyframes anim {
  0% {
    transform: translateY(-70px);
  }

  50% {
    transform: translateY(-19px);
  }

  100% {
    transform: translateY(-70px);
  }
}
</style>


================================================
FILE: Forms/reshades_tiny-monkey-43.html
================================================
<form class="form">
  <div class="content">
    <p align="center">Enter your OTP Code</p>
    <div class="inp">
    <input maxlength="1" class="input" type="text" placeholder="">
    <input maxlength="1" class="input" type="text" placeholder=""> 
    <input maxlength="1" class="input" type="text" placeholder=""> 
    <input maxlength="1" class="input" type="text" placeholder=""> 
    </div>
    <button>Verify</button>
  </div>
  
</form>
<style>
/* From Uiverse.io by reshades - Tags: OTP, form, verify, Verification */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #333333;
  border-radius: 5px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8.2px);
  -webkit-backdrop-filter: blur(8.2px);
  border: 1px solid #fff;
  width: 17em;
  height: 12em;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  margin-bottom: auto;
}

.form p {
  color: #fff;
  font-weight: bolder;
}

.inp {
  margin-left: auto;
  margin-right: auto;
  white-space: 4px;
}

.input + .input {
  margin-left: 0.5em
}

.input {
  color: #fff;
  height: 2em;
  width: 2em;
  float: left;
  text-align: center;
  background: #00000000;
  outline: none;
  border: 1px #fff solid;
  border-radius: 5px;
  transition: all 0.6s ease;
  font-size: larger;
}

.input:focus {
  outline: none;
  border: 1px #fff solid;
}

.input:not(:placeholder-shown) {
  background-color: #fff;
  width: 1em;
  height: 1em
}

.form button {
  margin-left: auto;
  margin-right: auto;
  background-color: #00000000;
  color: #fff;
  width: 8.5em;
  height: 2.3em;
  border: #fff 0.1em solid;
  border-radius: 5px;
  transition: all 0.5s ease;
}

.form button:hover {
  background-color: #fff;
  color: #000
}

</style>


================================================
FILE: Forms/roroland_brave-kangaroo-30.html
================================================
<form class="form">
  <header>
    Credit card information
  <span class="message">Fill the form to continue.</span>
  </header>
  <label>
    <span>Card Number</span>
    <input placeholder="Type your card number" class="input" type="number" required="">
  </label>
  <label>
    <span>Name on card</span>
    <input placeholder="Type your name as appear on card" class="input" type="text" required="">
  </label>
  <fieldset>
    <label class="sm">
    <span>Exp. Month</span>
    <div class="custom-select">
    <select class="input" type="select" required="">
      <option></option>
      <option>January</option>
      <option>February</option>
      <option>March</option>
      <option>April</option>
      <option>May</option>
      <option>June</option>
      <option>July</option>
      <option>August</option>
      <option>September</option>
      <option>October</option>
      <option>November</option>
      <option>Dicember</option>
    </select>
    </div>
  </label>
  <label class="sm">
    <span>Exp. Year </span>
    <div class="custom-select">
    <select class="input" type="select" required="">
      <option></option>
      <option>2023</option>
      <option>2024</option>
      <option>2025</option>
      <option>2026</option>

    </select>
    </div>
  </label>
    <label class="sm">
    <span>CW </span>   
    <input class="input" placeholder="1234" size="4" maxlength="4" type="text" required="">
  </label>
  </fieldset>
  <div class="submitCard">
    <button>Complete payment</button>
  </div>
</form>
<style>
/* From Uiverse.io by roroland - Tags: form */
/* Initial form state */
.form {
  --col1: #fff;
  --col2: #252325;
  --col3: rgba(232, 213, 196, 0.9);
  --col4: #ffffff;
  --col5: #683363;
  --sh: rgba(80, 80, 80, 0.35);
  --rad: 4px;
  --radBig: 10px;
  border-radius: 0 0 var(--radBig) var(--radBig);
  box-shadow: 0 0 20px var(--sh);
  display: flex;
  flex-direction: column;
  gap: 1.5em 1em;
  padding: 1em;
  position: relative;
  max-width: 75%;
  max-height: 90px;
  transition: background .3s ease-out, max-height .3s ease-out;
  overflow: hidden;
}

.form::before {
  content: 'Ready to purchase?';
  color: var(--col2);
  font-size: 1.2em;
  font-weight: 700;
  display: grid;
  width: calc(100% - 2em);
  height: 60%;
  position: absolute;
  place-items: center;
  z-index: 99999;
}

.form::after {
  content: '';
  backdrop-filter: blur(6px) grayscale(100%);
  background: linear-gradient(-180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.5) 70%, rgba(255, 255, 255, 0.3) 90%);
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  display: block;
  position: absolute;
  z-index: 999;
}

.form::after,
.form::before {
  border-radius: 0 0 var(--radBig) var(--radBig);
  pointer-events: none;
  transition: all .5s ease-out;
}

/* Form hover and focus */
.form:hover,
.form:focus-within {
  max-width: 100%;
  max-height: 380px;
}

.form:focus-within {
  overflow: initial;
}

.form:hover::before,
.form:hover::after {
  opacity: 0;
}

.form:hover::after {
  backdrop-filter: blur(0) grayscale(0%);
}

.form header {
  color: var(--col1);
  font-size: 1.25rem;
  font-weight: 600;
}
/* Labels and inputs UI */
:is(.form) label span, label input {
  flex: 1 100%;
  transition: all .3s ease-out;
}

:is(.form) input, select, button {
  appearance: none;
  border: 0;
  padding: .75em;
  border-radius: var(--rad);
  transition: all .3s ease-out;
}

.form label {
  display: flex;
  flex-flow: row wrap;
  color: var(--col4);
  gap: .5em;
}

.form input {
  box-shadow: inset 3px 3px 1px var(--sh);
}

.form fieldset {
  display: flex;
  backdrop-filter: blur(10px);
  flex-flow: row nowrap;
  gap: 1em;
  position: relative;
  transition: all .3s ease-out;
  padding: 1rem;
  z-index: 10;
  border: 3px double var(--col1);
  border-radius: var(--rad);
}

.form fieldset label {
  flex: 1;
  display: flex;
  flex-flow: row wrap;
  font-size: .75em;
}

.sm {
  justify-content: space-around;
}

.sm span {
  text-align: center;
}

.form select {
  box-shadow: inset 3px 3px 1px var(--sh);
  padding: .75em 1.75em .75em 0.5em;
  position: relative;
}

.custom-select {
  position: relative;
}

.custom-select::after {
  position: absolute;
  content: "";
  top: 45%;
  right: 5px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: var(--col5) transparent transparent transparent;
}

.form fieldset span {
  flex: 1 100%;
}

.form fieldset input {
  flex: 0 1 40px;
}

.form button {
  background-color: var(--col1);
  color: var(--col4);
  border: 2px solid var(--col4);
  font-size: 1em;
  font-weight: 700;
  align-self: center;
  padding: .5em 1.5em;
  appearance: none;
}

/* Form and UI valid and invalid states */
.form input:focus,
.form select:focus {
  outline: 3px solid var(--col3);
  outline-offset: 1px;
}

.form input:invalid:not(:focus),
.form select:invalid:not(:focus) {
  background-color: var(--col3);
  outline: 3px solid var(--col4);
  outline-offset: 1px;
}

.form input:valid:not(:focus),
.form select:valid:not(:focus) {
  outline: 3px solid var(--col1);
  outline-offset: 1px;
}

.form .message {
  display: block;
  opacity: 0;
  font-size: .75em;
  font-weight: 400;
  transition: all .3s ease-out;
  margin: -1rem 0 0;
}

.form:has(:invalid) .message {
  opacity: 1;
  margin: .25rem 0 0 0;
}

label:has(input:invalid),
label:has(select:invalid) {
  color: var(--col3);
  opacity: .8;
}

label:has(input:valid),
label:has(select:valid) {
  opacity: 1;
}

.form:hover:has(:focus, :active):valid .submitCard {
  max-height: 180px;
  opacity: 1;
  transition: opacity 1s ease-out .5s, translate 1.3s ease-out;
  translate: 0 100%;
}

.form:hover:invalid {
  transition: all .3s ease-out;
  background-color: var(--col5);
}

.form:hover:valid {
  transition: all .3s ease-out;
  background-color: var(--col1);
}

.form:hover:valid * {
  color: var(--col2);
}

.form:hover:valid input,
.form:hover:valid select {
  outline: 3px solid var(--col2);
}

.form:hover:invalid fieldset {
  border: 1px dashed var(--col3);
}

.form:hover:valid fieldset {
  border: 1px dashed var(--col2);
}

/* Submit block */
.form .submitCard {
  display: flex;
  justify-content: center;
  background-color: var(--col2);
  border-radius: 0 0 var(--rad) var(--rad);
  bottom: 0;
  padding: .5em;
  opacity: 0;
  max-height: 0;
  translate: 0 -100%;
  position: absolute;
  width: calc(100% - 2em);
  transition: all .5s ease-out .1s;
  z-index: -1;
}
</style>


================================================
FILE: Forms/sahilxkhadka_breezy-liger-0.html
================================================
<form>
  <p class="logo">Facebook</p>
  <input type="text" placeholder="Email" required="">
  <input type="password" placeholder="Password" required="">
  <button class="login">Log In</button>
  <a href="#">Forgot Password ?</a>
  <hr>
  <button class="create-account">Create New Account</button>
</form>
<style>
/* From Uiverse.io by sahilxkhadka - Tags: facebook, form, login , loginform */
.logo {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  text-align: center;
  color: #1877f2;
  font-weight: 700;
}

form {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 1.5rem 1rem;
  width: 300px;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
}

form input {
  outline: none;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

form input:focus {
  border: 1.8px solid #1877f2;
}

form .login {
  outline: none;
  border: none;
  background: #1877f2;
  padding: 0.8rem 1rem;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  color: #fff;
}

form .login:hover {
  background: #0f71f1;
  cursor: pointer;
}

form a {
  text-decoration: none;
  text-align: center;
  font-size: 0.9rem;
  padding-top: 0.8rem;
  color: #1877f2;
}

form hr {
  background: #f7f7f7;
  margin: 0.5rem;
}

form .create-account {
  outline: none;
  border: none;
  background: #06b909;
  padding: 0.8rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: #fff;
  width: 75%;
  margin: 0 auto;
}

form .create-account:hover {
  background: #03ad06;
  cursor: pointer;
}
</style>


================================================
FILE: Forms/sameer2malik_lucky-insect-98.html
================================================
<div class="container">

       
    <div class="hero">
       <form action="" class="form">
<div class="logo">Instagram</div>
        <input type="email" name="email" id="email" required="" class="input" placeholder="Phone, email address or username">
    <input type="password" name="password" id="password" required="" class="input" placeholder="Password">   
    <input type="submit" value="Log in" class="input submit">
    <p class="forgotten">Forgotten your login details ? <a href="#">Get help with signing in.</a></p>
    <div class="or">or</div>
<div class="input btn">Login with facebook </div>    
<p class="signup">Don't have an account ? <a href="#">SignUp</a></p>
</form>
    </div>
</div>
<style>
/* From Uiverse.io by sameer2malik - Tags: neumorphism, instagram, form */
.container {
  height: 100%;
  width: 100%;
}

.hero {
  padding: 60px 20px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f7f7;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.input {
  padding: 1rem 1.2rem;
  margin: 1rem;
  border-radius: 2rem;
  display: block;
  width: 80%;
  border: none;
  box-shadow: inset 6px 6px 8px rgba(97, 97, 97, 0.075),
    6px 6px 6px rgba(255, 255, 255, 0.781);
  outline: none;
  background-color: inherit;
  color: rgb(161, 161, 161);
  font-size: inherit;
}

.submit , .btn {
  margin-top: 20px;
  font-weight: bold;
  box-shadow: -3px -3px 5px white, 3px 3px 5px rgba(209, 209, 209, 0.705);
  color: rgb(112, 112, 112);
  cursor: pointer;
}

.btn {
  text-align: center;
  color: black;
}

.logo {
  font-size: 3rem;
  color: black;
  font-weight: 600;
  margin: 30px;
}

::placeholder {
  color: rgb(161, 161, 161);
}

.forgotten {
  text-align: center;
  font-size: .8rem;
  width: 80%;
  color: gray;
  margin: 15px 0;
}

a {
  color: inherit;
  font-weight: bold;
  text-decoration: none;
}

.or {
  position: relative;
  font-weight: bold;
  color: rgb(112, 112, 112);
}

.or::before , .or::after {
  position: absolute;
  content: '';
  width: 700%;
  height: 1px;
  top: 50%;
  margin: 0 6px;
  background-color: rgba(0, 0, 0, 0.479);
}

.or::before {
  right: 100%;
}

.or::after {
}

.signup {
  color: gray;
  margin-top: 15px;
  font-size: 1rem;
}
</style>


================================================
FILE: Forms/sameer2malik_serious-duck-16.html
================================================
  <div class="container">
        <div class="left">
            <form class="form">
                <div class="input-block">
                    <input class="input" type="text" id="email" required="">
                    <label for="email">Username</label>
                </div>
                <div class="input-block">
                    <input class="input" type="password" id="pass" required="">
                    <label for="pass">Password</label>
                </div>
                <div class="input-block">
<span class="forgot"><a href="#">Forgot Password?</a></span>
                <button>Submit</button>
            </div>
            </form>
        </div>
        <div class="right">
            <div class="img"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 731.67004 550.61784" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <path d="M0,334.13393c0,.66003,.53003,1.19,1.19006,1.19H730.48004c.65997,0,1.19-.52997,1.19-1.19,0-.65997-.53003-1.19-1.19-1.19H1.19006c-.66003,0-1.19006,.53003-1.19006,1.19Z" fill="#3f3d56"></path>
                    <polygon points="466.98463 81.60598 470.81118 130.55703 526.26809 107.39339 494.98463 57.60598 466.98463 81.60598" fill="#a0616a"></polygon>
                    <circle cx="465.32321" cy="55.18079" r="41.33858" fill="#a0616a"></circle>
                    <polygon points="387.98463 440.60598 394.98463 503.39339 345.98463 496.60598 361.98463 438.60598 387.98463 440.60598" fill="#a0616a"></polygon>
                    <polygon points="578.98463 449.60598 585.98463 512.39339 536.98463 505.60598 552.98463 447.60598 578.98463 449.60598" fill="#a0616a"></polygon>
                    <path d="M462.48463,260.10598c-.66897,0-54.14584,2.68515-89.47714,4.46286-16.72275,.84141-29.45202,15.31527-28.15459,32.00884l12.63173,162.5283,36,1,.87795-131,71.12205,4-3-73Z" fill="#2f2e41"></path>
                    <path d="M619.48463,259.10598s9,69,2,76c-7,7-226.5-5.5-226.5-5.5,0,0,48.15354-69.53704,56.82677-71.51852,8.67323-1.98148,146.67323-8.98148,146.67323-8.98148l21,10Z" fill="#2f2e41"></path>
                    <path id="uuid-91047c5b-47d7-4179-8a16-40bd6d529b28-203" d="M335.12666,172.23337c-8.35907-11.69074-9.10267-25.48009-1.66174-30.79863,7.44093-5.31854,20.24665-.15219,28.60713,11.54383,3.40375,4.62627,5.65012,10.00041,6.55111,15.67279l34.79215,49.9814-19.8001,13.70807-35.7745-48.83421c-5.07753-2.68845-9.43721-6.55406-12.71405-11.27326Z" fill="#a0616a"></path>
                    <path d="M464.98463,112.60598l51-21,96,148s-67,15-90,18c-23,3-49-9-49-9l-8-136Z" fill="#6c63ff">
                    </path>
                    <path d="M526.98463,137.60598l-18.5-57.70866,24,18.20866s68,45,68,64c0,19,21,77,21,77,0,0,23.5,19.5,15.5,37.5-8,18,10.5,15.5,12.5,28.5,2,13-28.5,30.5-28.5,30.5,0,0-7.5-73.5-31.5-73.5-24,0-62.5-124.5-62.5-124.5Z" fill="#3f3d56"></path>
                    <path d="M468.56831,111.13035l-25.08368,9.97563s4,70,8,76c4,6,18,38,18,38v10.42913s-28,8.57087-27,13.57087c1,5,66,19,66,19,0,0-13-40-21-53-8-13-18.91632-113.97563-18.91632-113.97563Z" fill="#3f3d56"></path>
                    <path d="M452.48463,121.10598s-29-4-34,30c-5,34-1.82283,38.5-1.82283,38.5l-8.17717,19.5-27-30-26,17s47,76,66,74c19-2,47-57,47-57l-16-92Z" fill="#3f3d56"></path>
                    <path d="M597.32321,270.14478l-14.83858,209.96121-38.5-1.5s-8.5-198.5-8.5-201.5c0-3,4-20,29-21,25-1,32.83858,14.03879,32.83858,14.03879Z" fill="#2f2e41"></path>
                    <path d="M541.48463,484.10598s20-6,23-2c3,4,20,6,20,6l5,49s-14,10-16,12-55,4-56-8c-1-12,14-27,14-27l10-30Z" fill="#2f2e41"></path>
                    <path d="M394.48463,470.10598s6-5,8,9c2,14,9,37-1,40-10,3-110,4-110-5v-9l9-7,18.00394-2.869s34.99606-32.131,38.99606-32.131c4,0,17,13,17,13l20-6Z" fill="#2f2e41"></path>
                    <path d="M505.98463,77.60598s-20-24-28-22-3,5-3,5l-20-22s-16-6-31,13c0,0-9-16,0-25,9-9,12-8,14-13,2-5,16-9,16-9,0,0-.80315-7.19685,3.59843-3.59843s15.3937,3.59843,15.3937,3.59843c0,0,.06299-4,4.53543,0,4.47244,4,9.47244,2,9.47244,2,0,0,0,6.92126,3.5,6.96063,3.5,.03937,9.5-4.96063,10.5-.96063,1,4,8,6,9,18,1,12-4,47-4,47Z" fill="#2f2e41"></path>
                    <g>
                        <path d="M342.99463,178.84874l-114.2362,78.82694c-3.94205,2.72015-9.36214,1.72624-12.08229-2.21581l-32.16176-46.60891c-2.72015-3.94205-1.7259-9.36208,2.21615-12.08223l114.2362-78.82694c3.94205-2.72015,9.36214-1.72624,12.08229,2.21581l32.16176,46.60891c2.72015,3.94205,1.7259,9.36208-2.21615,12.08223Z" fill="#fff"></path>
                        <path d="M312.83914,120.30274l32.16148,46.6085c2.64627,3.83499,1.68408,9.08121-2.15091,11.72749l-56.06388,38.68602c-14.78562-4.04015-28.2774-13.11486-37.66263-26.71596-6.14766-8.9092-9.85314-18.77211-11.26649-28.80885l63.25494-43.6481c3.83499-2.64627,9.08121-1.68408,11.72749,2.15091Z" fill="#e6e6e6"></path>
                        <path d="M223.84012,260.20913c-3.0791,0-6.10938-1.46094-7.9873-4.18066l-32.16211-46.60938c-1.4668-2.12695-2.01758-4.7002-1.5498-7.24805,.4668-2.54785,1.89551-4.75879,4.02246-6.22559l114.23535-78.82715c4.39746-3.03223,10.44043-1.92285,13.47363,2.4707l32.16211,46.60938c1.4668,2.12695,2.01758,4.7002,1.5498,7.24805-.4668,2.54688-1.89551,4.75879-4.02148,6.22559l-114.23633,78.82715c-1.67578,1.15527-3.59082,1.70996-5.48633,1.70996Zm82.04785-142.80176c-1.50391,0-3.02344,.44043-4.35254,1.35742l-114.23633,78.82715c-1.6875,1.16309-2.82031,2.91797-3.19141,4.94043-.37109,2.02148,.06543,4.06445,1.22949,5.75l32.16211,46.60938c2.40625,3.48633,7.20215,4.36816,10.69043,1.96094l114.2373-78.82715c1.68652-1.16309,2.81934-2.91797,3.19043-4.94043,.37109-2.02148-.06543-4.06445-1.22949-5.75l-32.16211-46.60938c-1.48926-2.1582-3.89453-3.31836-6.33789-3.31836Z" fill="#3f3d56"></path>
                        <path d="M224.6666,236.93718c-2.89521,1.9978-3.6253,5.97848-1.6275,8.87369,1.9978,2.89521,5.97848,3.6253,8.87369,1.6275l11.76134-8.11573c2.89521-1.9978,3.6253-5.97848,1.6275-8.87369-1.9978-2.89521-5.97848-3.6253-8.87369-1.6275l-11.76134,8.11573Z" fill="#6c63ff"></path>
                        <path d="M232.63862,171.91114c-4.56802,3.15209-5.71978,9.43286-2.56769,14.00088,3.15209,4.56802,9.43252,5.71972,14.00054,2.56763l18.29546-12.6245c4.56802-3.15209,5.72007-9.43245,2.56797-14.00047-3.15209-4.56802-9.4328-5.72013-14.00082-2.56804l-18.29546,12.6245Z" fill="#6c63ff"></path>
                    </g>
                    <g>
                        <path d="M340.25926,185.80874H201.4659c-4.78947,0-8.68608-3.89636-8.68608-8.68583v-56.62834c0-4.78947,3.89661-8.68583,8.68608-8.68583h138.79336c4.78947,0,8.68608,3.89636,8.68608,8.68583v56.62834c0,4.78947-3.89661,8.68583-8.68608,8.68583Z" fill="#fff"></path>
                        <path d="M348.69017,120.49482v56.62784c0,4.65939-3.77152,8.43091-8.43091,8.43091h-68.11583c-9.87497-11.72273-15.82567-26.8544-15.82567-43.37931,0-10.82439,2.55172-21.04674,7.08876-30.11034h76.85275c4.65939,0,8.43091,3.77152,8.43091,8.43091Z" fill="#e6e6e6"></path>
                        <path d="M340.25907,186.80874H201.4661c-5.34082,0-9.68652-4.34473-9.68652-9.68555v-56.62891c0-5.34082,4.3457-9.68555,9.68652-9.68555h138.79297c5.34082,0,9.68652,4.34473,9.68652,9.68555v56.62891c0,5.34082-4.3457,9.68555-9.68652,9.68555ZM201.4661,112.80874c-4.23828,0-7.68652,3.44727-7.68652,7.68555v56.62891c0,4.23828,3.44824,7.68555,7.68652,7.68555h138.79297c4.23828,0,7.68652-3.44727,7.68652-7.68555v-56.62891c0-4.23828-3.44824-7.68555-7.68652-7.68555H201.4661Z" fill="#3f3d56"></path>
                        <path d="M209.87637,166.41564c-3.51759,0-6.37931,2.86172-6.37931,6.37931s2.86172,6.37931,6.37931,6.37931h14.28966c3.51759,0,6.37931-2.86172,6.37931-6.37931s-2.86172-6.37931-6.37931-6.37931h-14.28966Z" fill="#6c63ff"></path>
                        <path d="M253.36907,117.42253c-5.55,0-10.06511,4.51536-10.06511,10.06536s4.51511,10.06486,10.06511,10.06486h22.22841c5.55,0,10.06511-4.51486,10.06511-10.06486s-4.51511-10.06536-10.06511-10.06536h-22.22841Z" fill="#6c63ff"></path>
                    </g>
                    <g>
                        <path d="M456.25926,381.80874h-138.79336c-4.78947,0-8.68608-3.89636-8.68608-8.68583v-56.62834c0-4.78947,3.89661-8.68583,8.68608-8.68583h138.79336c4.78947,0,8.68608,3.89636,8.68608,8.68583v56.62834c0,4.78947-3.89661,8.68583-8.68608,8.68583Z" fill="#fff"></path>
                        <path d="M464.69017,316.49482v56.62784c0,4.65939-3.77152,8.43091-8.43091,8.43091h-68.11583c-9.87497-11.72273-15.82567-26.8544-15.82567-43.37931,0-10.82439,2.55172-21.04674,7.08876-30.11034h76.85275c4.65939,0,8.43091,3.77152,8.43091,8.43091Z" fill="#e6e6e6"></path>
                        <path d="M456.25907,382.80874h-138.79297c-5.34082,0-9.68652-4.34473-9.68652-9.68555v-56.62891c0-5.34082,4.3457-9.68555,9.68652-9.68555h138.79297c5.34082,0,9.68652,4.34473,9.68652,9.68555v56.62891c0,5.34082-4.3457,9.68555-9.68652,9.68555Zm-138.79297-74c-4.23828,0-7.68652,3.44727-7.68652,7.68555v56.62891c0,4.23828,3.44824,7.68555,7.68652,7.68555h138.79297c4.23828,0,7.68652-3.44727,7.68652-7.68555v-56.62891c0-4.23828-3.44824-7.68555-7.68652-7.68555h-138.79297Z" fill="#3f3d56"></path>
                        <path d="M325.87637,362.41564c-3.51759,0-6.37931,2.86172-6.37931,6.37931s2.86172,6.37931,6.37931,6.37931h14.28966c3.51759,0,6.37931-2.86172,6.37931-6.37931s-2.86172-6.37931-6.37931-6.37931h-14.28966Z" fill="#6c63ff"></path>
                        <path d="M369.36907,313.42253c-5.55,0-10.06511,4.51536-10.06511,10.06536s4.51511,10.06486,10.06511,10.06486h22.22841c5.55,0,10.06511-4.51486,10.06511-10.06486s-4.51511-10.06536-10.06511-10.06536h-22.22841Z" fill="#6c63ff"></path>
                    </g>
                    <path id="uuid-c026fd96-7d81-4b34-bb39-0646c0e08e96-204" d="M465.67391,331.01678c-12.74718,6.63753-26.5046,5.44058-30.72743-2.67249-4.22283-8.11308,2.6878-20.06802,15.44041-26.70621,5.05777-2.72156,10.69376-4.19231,16.43644-4.28916l54.36547-27.44139,10.79681,21.52636-53.36733,28.57487c-3.37375,4.65048-7.81238,8.42516-12.94437,11.00803Z" fill="#a0616a"></path>
                    <path d="M527.48463,97.10598s56-3,68,27c12,30,22,128,22,128l-122,66.37402-21-32.37402,82-64-29-125Z" fill="#3f3d56"></path>
                </svg></div>

        </div>
    </div>
<style>
/* From Uiverse.io by sameer2malik - Tags: glassmorphism, blur filter, gradients */
.container {
  display: flex;
  width: 520px;
  height: 500px;
  max-width: 99%;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-color: #ffffff25;
  border-radius: 15px;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.03);
  border: 0.1px solid rgba(128, 128, 128, 0.178);
}

.left {
  width: 66%;
  height: 100%;
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
  left: 0;
  backdrop-filter: blur(20px);
  position: relative;
}

.form::before {
  position: absolute;
  content: "";
  width: 40%;
  height: 40%;
  right: 1%;
  z-index: -1;
  background: radial-gradient(
    circle,
    rgb(194, 13, 170) 20%,
    rgb(26, 186, 235) 60%,

    rgb(26, 186, 235) 100%
  );
  filter: blur(70px);
  border-radius: 50%;
}

.right {
  width: 34%;
  height: 100%;
}

.img {
  width: 100%;
  height: 100%;
}

.container::after {
  position: absolute;
  content: "";
  width: 80%;
  height: 80%;
  right: -40%;
  background: rgb(157, 173, 203);
  background: radial-gradient(
    circle,
    rgba(157, 173, 203, 1) 61%,
    rgba(99, 122, 159, 1) 100%
  );
  border-radius: 50%;
  z-index: -1;
}

.input,
button {
  background: rgba(253, 253, 253, 0);
  outline: none;
  border: 1px solid rgba(255, 0, 0, 0);
  border-radius: 0.5rem;
  padding: 10px;
  margin: 10px auto;
  width: 80%;
  display: block;
  color: #425981;
  font-weight: 500;
  font-size: 1.1em;
}

.input-block {
  position: relative;
}

label {
  position: absolute;
  left: 15%;
  top: 37%;
  pointer-events: none;
  color: gray;
}

.forgot {
  display: block;
  margin: 5px 0 10px 0;
  margin-left: 35px;
  color: #5e7eb6;
  font-size: 0.9em;
}

.input:focus + label,
.input:valid + label {
  transform: translateY(-120%) scale(0.9);
  transition: all 0.4s;
}

button {
  background-color: #5e7eb6;
  color: white;
  font-size: medium;
  box-shadow: 2px 4px 8px rgba(70, 70, 70, 0.178);
}

a {
  color: #5e7eb6;
}

.input {
  box-shadow: inset 4px 4px 4px rgba(165, 163, 163, 0.315),
    4px 4px 4px rgba(218, 218, 218, 0.13);
}

</style>


================================================
FILE: Forms/satyamchaudharydev_cold-lionfish-49.html
================================================
<div class="card">
    <span class="card__title">Subscribe</span>
    <p class="card__content">Get fresh web design resources delivered straight to your inbox every week.
    </p>
    <div class="card__form">
        <input placeholder="Your Email" type="text">
        <button class="sign-up"> Sign up</button>
    </div>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: subscription, form */
.card {
  width: 240px;
  height: 254px;
  padding: 0 15px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border-radius: 20px;
}

.card > * {
  margin: 0;
}

.card__title {
  font-size: 23px;
  font-weight: 900;
  color: #333;
}

.card__content {
  font-size: 13px;
  line-height: 18px;
  color: #333;
}

.card__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card__form input {
  margin-top: 10px;
  outline: 0;
  background: rgb(255, 255, 255);
  box-shadow: transparent 0px 0px 0px 1px inset;
  padding: 0.6em;
  border-radius: 14px;
  border: 1px solid #333;
  color: black;
}

.card__form button {
  border: 0;
  background: #111;
  color: #fff;
  padding: 0.68em;
  border-radius: 14px;
  font-weight: bold;
}

.sign-up:hover {
  opacity: 0.8;
} 

</style>


================================================
FILE: Forms/shadowmurphy_rotten-bullfrog-69.html
================================================
	<div class="container">
      <div class="nav-bar">
      	<a>Chat</a>
        <div class="close">
         	<div class="line one"></div>
         	<div class="line two"></div>
        </div>
      </div>
      <div class="messages-area">
        
        <div class="message one"></div>
        <div class="message two"></div>
        <div class="message three"></div>
        <div class="message four"></div>
        <div class="message five"></div>
        <div class="message six"></div>
      </div>
      <div class="sender-area">
        <div class="input-place">
        	<input placeholder="Send a message." class="send-input" type="text">
            <div class="send">
				<svg class="send-icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path fill="#6B6C7B" d="M481.508,210.336L68.414,38.926c-17.403-7.222-37.064-4.045-51.309,8.287C2.86,59.547-3.098,78.551,1.558,96.808 L38.327,241h180.026c8.284,0,15.001,6.716,15.001,15.001c0,8.284-6.716,15.001-15.001,15.001H38.327L1.558,415.193 c-4.656,18.258,1.301,37.262,15.547,49.595c14.274,12.357,33.937,15.495,51.31,8.287l413.094-171.409 C500.317,293.862,512,276.364,512,256.001C512,235.638,500.317,218.139,481.508,210.336z"></path></g></g></svg>
        	</div>
      	</div>
      </div>
    <div></div></div>
<style>
/* From Uiverse.io by shadowmurphy - Tags: form, message, arrow, chat, chatgpt, close, colors */
.container {
  width: 300px;
  height: 320px;
  background-color: #343541;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  width: 100%;
  height: 40px;
  background-color: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-bar a {
  color: #6B6C7B;
  white-space: nowrap;
  margin-left: 10px;
  user-select: none;
}

.close {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.line {
  position: absolute;
  width: 20px;
  height: 3px;
  background-color: #6B6C7B;
  border-radius: 30px;
}

.line.one {
  transform: rotate(45deg)
}

.line.two {
  transform: rotate(135deg)
}

.messages-area {
  background-color: green;
  width: 100%;
  height: 210px;
}

.sender-area {
  background-color: #343541;
  width: 100%;
  height: 70px;
  display: flex;
  border-radius: 8px;
}

.message {
  width: 100%;
  height: 40px;
}

.message.one,
.message.three,
.message.five {
  background-color: #2E2F3A;
}

.message.two,
.message.four,
.message.six {
  background-color: #343541;
}

.send-img {
  width: 30px;
}

.send-input {
  outline: none;
  display: flex;
  border: none;
  background: none;
  height: 40px;
  width: 230px;
  border-radius: 7px;
  background: none;
  color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 5px;
}

.send-input::placeholder {
  color: #828E9E;
}

.input-place {
  display: flex;
  flex-direction: row;
  margin-top: 15px;
  margin-left: 10px;
  align-items: center;
  background-color: #40414F;
  border-radius: 7px;
  height: 40px;
  width: 280px;
  gap: 5px;
  border: 1px solid #2E2F3A;
}

.send {
  width: 30px;
  height: 30px;
  background-color: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.send-icon {
  width: 17px;
}
</style>


================================================
FILE: Forms/somshri16_short-elephant-64.html
================================================
<form class="form">
    
    <div class="flex">
        <label>
            <input required="" placeholder="" type="text" class="input">
            <span>first name</span>
        </label>

        <label>
            <input required="" placeholder="" type="text" class="input">
            <span>last name</span>
        </label>
    </div>  
            
    <label>
        <input required="" placeholder="" type="email" class="input">
        <span>email</span>
    </label> 
        
    <label>
        <input required="" type="tel" placeholder="" class="input">
        <span>contact number</span>
    </label>
    <label>
        <textarea required="" rows="3" placeholder="" class="input01"></textarea>
        <span>message</span>
    </label>
    
    <button class="fancy" href="#">
      <span class="top-key"></span>
      <span class="text">submit</span>
      <span class="bottom-key-1"></span>
      <span class="bottom-key-2"></span>
    </button>
</form>
<style>
/* From Uiverse.io by somshri16 - Source: https://uiverse.io/cssbuttons-io/brown-otter-21 - Tags: form, contact, box */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  position: relative;
}

.message {
  color: rgba(88, 87, 87, 0.822);
  font-size: 14px;
}

.flex {
  display: flex;
  width: 100%;
  gap: 6px;
}

.form label {
  position: relative;
}

.form label .input {
  width: 100%;
  padding: 10px 10px 20px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 5px;
}

.form label .input + span {
  position: absolute;
  left: 10px;
  top: 15px;
  color: grey;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
}

.form label .input:placeholder-shown + span {
  top: 15px;
  font-size: 0.9em;
}

.form label .input:focus + span,.form label .input:valid + span {
  top: 30px;
  font-size: 0.7em;
  font-weight: 600;
}

.form label .input:valid + span {
  color: green;
}

.input01 {
  width: 100%;
  padding: 10px 10px 20px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 5px;
}

.form label .input01 + span {
  position: absolute;
  left: 10px;
  top: 50px;
  color: grey;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
}

.form label .input01:placeholder-shown + span {
  top: 40px;
  font-size: 0.9em;
}

.form label .input01:focus + span,.form label .input01:valid + span {
  top: 50px;
  font-size: 0.7em;
  font-weight: 600;
}

.form label .input01:valid + span {
  color: green;
}

.fancy {
  background-color: transparent;
  border: 2px solid #cacaca;
  border-radius: 0px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 390;
  letter-spacing: 2px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 8px 30px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: all 0.3s ease-in-out;
  user-select: none;
  font-size: 13px;
}

.fancy::before {
  content: " ";
  width: 1.7rem;
  height: 2px;
  background: #cacaca;
  top: 50%;
  left: 1.5em;
  position: absolute;
  transform: translateY(-50%);
  transform: translateX(230%);
  transform-origin: center;
  transition: background 0.3s linear, width 0.3s linear;
}

.fancy .text {
  font-size: 1.125em;
  line-height: 1.33333em;
  padding-left: 2em;
  display: block;
  text-align: left;
  transition: all 0.3s ease-in-out;
  text-transform: lowercase;
  text-decoration: none;
  color: #818181;
  transform: translateX(30%);
}

.fancy .top-key {
  height: 2px;
  width: 1.5625rem;
  top: -2px;
  left: 0.625rem;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, left 0.3s ease-out;
}

.fancy .bottom-key-1 {
  height: 2px;
  width: 1.5625rem;
  right: 1.875rem;
  bottom: -2px;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy .bottom-key-2 {
  height: 2px;
  width: 0.625rem;
  right: 0.625rem;
  bottom: -2px;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy:hover {
  color: white;
  background: #cacaca;
}

.fancy:hover::before {
  width: 1.5rem;
  background: white;
}

.fancy:hover .text {
  color: white;
  padding-left: 1.5em;
}

.fancy:hover .top-key {
  left: -2px;
  width: 0px;
}

.fancy:hover .bottom-key-1,
 .fancy:hover .bottom-key-2 {
  right: 0;
  width: 0;
}
</style>


================================================
FILE: Forms/sonex-ICB_curvy-yak-84.html
================================================
<div class="form">
  <input placeholder="Email Address" class="input" type="text" />
  <div class="btn">SUBSCRIBE</div>
</div>

<style>
/* From Uiverse.io by sonex-ICB  - Tags: simple, form, login form, subscribe */
.input,
.btn {
  border: 0;
  outline: 0;
  padding: 10px;
  text-align: center;
  font-weight: 700;
  color: gray;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  border-radius: 18px 18px 0px 0px;
}
.btn {
  border-radius: 0px 0px 18px 18px;
  background-color: #c6cf9b;
  color: #f6eca9;
  cursor: pointer;
  transition: 0.5s;
}
.form {
  padding: 4px;
  background-color: #f6eca9;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  box-shadow: 0px 0px 3px 1px #c6cf9b;
}
.form:hover {
  box-shadow: 0px 0px 3px 1px rgb(162, 157, 157);
}
.btn:hover {
  background-color: #f6eca9;
  color: #c6cf9b;
}

</style>
    

================================================
FILE: Forms/themrsami_blue-mouse-42.html
================================================
<!-- From Uiverse.io by themrsami - Tags: form, tailwind, tailwindcss, themrsami, subscribe to our newletter form -->
<div class="flex flex-col items-center justify-center h-screen light">
  <div class="w-full max-w-md bg-white rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">Subscribe to Our Newsletter</h2>

    <form class="flex flex-col">
      <input placeholder="Enter your email address" class="bg-gray-100 text-gray-800 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="email">

      <button class="bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-bold py-2 px-4 rounded-md mt-4 hover:bg-indigo-600 hover:to-blue-600 transition ease-in-out duration-150" type="submit">Subscribe</button>
    </form>

    <div class="flex justify-center mt-4">
      <a class="text-sm text-gray-600 hover:underline" href="#">Privacy Policy</a>
    </div>
  </div>
</div>




================================================
FILE: Forms/themrsami_brown-ladybug-94.html
================================================
<!-- From Uiverse.io by themrsami - Tags: simple, material design, form, dark, futuristic, advanced, tailwind, tailwindbutton -->
<div class="flex flex-col items-center justify-center h-screen dark">
  <div class="w-full max-w-md bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-200 mb-4">Sign Up</h2>
    <form class="flex flex-col">
      <div class="flex space-x-4 mb-4">
        <input
          placeholder="First Name"
          class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 w-1/2 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150"
          type="text"
        />
        <input
          placeholder="Last Name"
          class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 w-1/2 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150"
          type="text"
        />
      </div>
      <input
        placeholder="Email"
        class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150"
        type="email"
      />
      <input
        placeholder="Confirm Email"
        class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150"
        type="email"
      />
      <input
        placeholder="Password"
        class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150"
        type="password"
      />
      <input
        placeholder="Confirm Password"
        class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150"
        type="password"
      />
      <label class="text-sm mb-2 text-gray-200 cursor-pointer" for="gender">
        Gender
      </label>
      <select
        class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150"
        id="gender"
      >
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="other">Other</option>
      </select>
      <label class="text-sm mb-2 text-gray-200 cursor-pointer" for="age">
        Age
      </label>
      <input
        class="bg-gray-700 text-gray-200 border-0 rounded-md p-2"
        id="age"
        type="date"
      />
      <p class="text-white mt-4">
        Already have an account?
        <a class="text-sm text-blue-500 -200 hover:underline mt-4" href="#"
          >Login</a
        >
      </p>
      <button
        class="bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-bold py-2 px-4 rounded-md mt-4 hover:bg-indigo-600 hover:to-blue-600 transition ease-in-out duration-150"
        type="submit"
      >
        Sign Up
      </button>
    </form>
  </div>
</div>




================================================
FILE: Forms/themrsami_chatty-goat-55.html
================================================
<!-- From Uiverse.io by themrsami - Tags: form, tailwind, tailwindcss, job application form, themrsami -->
<div class="flex flex-col items-center justify-center h-screen">
  <div class="w-full max-w-md bg-white rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-900 mb-4">Job Application Form</h2>

    <form class="flex flex-col">
      <input type="text" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="Full Name">
      <input type="email" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="Email">
      <input type="text" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="Phone Number">
      <input type="text" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="LinkedIn Profile URL">
      <textarea name="cover_letter" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="Cover Letter"></textarea>
      <input type="file" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="Resume">

      <button type="submit" class="bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-bold py-2 px-4 rounded-md mt-4 hover:bg-indigo-600 hover:to-blue-600 transition ease-in-out duration-150">Apply</button>
    </form>
  </div>
</div>




================================================
FILE: Forms/themrsami_clever-badger-17.html
================================================
<!-- From Uiverse.io by themrsami - Tags: black, form, dark, product, tailwind, tailwindcss, feedback form, putple -->
<div class="flex flex-col items-center justify-center h-screen dark">
  <div class="w-full max-w-md bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-200 mb-4">Product Feedback Form</h2>

    <form class="flex flex-col">
      <input placeholder="Full Name" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="text">
      <input placeholder="Email" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="email">
      <select class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" id="product">
        <option value="product-1">Product 1</option>
        <option value="product-2">Product 2</option>
        <option value="product-3">Product 3</option>
      </select>
      <input placeholder="Rating (1-5)" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="number">
      <textarea placeholder="Feedback" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" name="feedback"></textarea>

      <button class="bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-bold py-2 px-4 rounded-md mt-4 hover:bg-indigo-600 hover:to-blue-600 transition ease-in-out duration-150" type="submit">Submit</button>
    </form>
  </div>
</div>




================================================
FILE: Forms/themrsami_cuddly-moth-67.html
================================================
<!-- From Uiverse.io by themrsami - Tags: form, css, tailwindcss, themrsami, signupform, ligherversion -->
<div class="flex flex-col items-center justify-center h-screen">
  <div class="w-full max-w-md bg-white rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-900 mb-4">Sign Up</h2>
    <form class="flex flex-col">
      <input placeholder="First Name" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="text">
      <input placeholder="Last Name" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="text">
      <input placeholder="Email" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="email">
      <input placeholder="Confirm Email" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="email">
      <input placeholder="Password" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="password">
      <input placeholder="Confirm Password" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="password">
      <label class="text-sm mb-2 text-gray-900 cursor-pointer" for="gender">
        Gender
      </label>
      <select class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" id="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="other">Other</option>
      </select>
      <label class="text-sm mb-2 text-gray-900 cursor-pointer" for="age">
        Age
      </label>
      <input class="bg-gray-100 text-gray-900 border-0 rounded-md p-2" id="age" type="date">
      <p class="text-gray-900 mt-4"> Already have an account? <a class="text-sm text-blue-500 -200 hover:underline mt-4" href="#">Login</a></p>
      <button class="bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-bold py-2 px-4 rounded-md mt-4 hover:bg-indigo-600 hover:to-blue-600 transition ease-in-out duration-150" type="submit">Sign Up</button>
    </form>
  </div>
</div>




================================================
FILE: Forms/themrsami_curly-cat-6.html
================================================
<!-- From Uiverse.io by themrsami - Tags: form, tailwind, tailwindcss, themrsami, darkversion, subscribe to our newsletter form -->
<div class="flex flex-col items-center justify-center h-screen dark">
  <div class="w-full max-w-md bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-200 mb-4">Subscribe to Our Newsletter</h2>

    <form class="flex flex-col">
      <input placeholder="Enter your email address" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="email">

      <button class="bg-gradient-to-r from-green-500 to-blue-500 text-white font-bold py-2 px-4 rounded-md mt-4 hover:bg-green-600 hover:to-blue-600 transition ease-in-out duration-150" type="submit">Subscribe</button>
    </form>

    <div class="flex justify-center mt-4">
      <a class="text-sm text-gray-400 hover:underline" href="#">Privacy Policy</a>
    </div>
  </div>
</div>




================================================
FILE: Forms/themrsami_fast-termite-60.html
================================================
<!-- From Uiverse.io by themrsami - Tags: form, sign-up, light&dark, creative, password, advanced, tailwind -->
<div class="flex flex-col justify-center py-12 sm:px-6 lg:px-8">

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
      <form method="POST" action="#">
        <div>
          <label class="block text-sm font-medium text-gray-700" for="username">
            Username
          </label>
          <div class="mt-1">
            <input class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required="" autocomplete="username" type="text" name="username" id="username">
          </div>
        </div>

        <div class="mt-6">
          <label class="block text-sm font-medium text-gray-700" for="email">
            Email address
          </label>
          <div class="mt-1">
            <input class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required="" autocomplete="email" type="email" name="email" id="email">
          </div>
        </div>

        <div class="mt-6">
          <label class="block text-sm font-medium text-gray-700" for="confirm-email">
            Confirm Email address
          </label>
          <div class="mt-1">
            <input class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required="" autocomplete="email" type="email" name="confirm-email" id="confirm-email">
          </div>
        </div>

        <div class="mt-6">
          <label class="block text-sm font-medium text-gray-700" for="password">
            Password
          </label>
          <div class="mt-1">
            <input class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required="" autocomplete="current-password" type="password" name="password" id="password">
          </div>
        </div>

        <div class="mt-6">
          <label class="block text-sm font-medium text-gray-700" for="confirm-password">
            Confirm Password
          </label>
          <div class="mt-1">
            <input class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required="" autocomplete="current-password" type="password" name="confirm-password" id="confirm-password">
          </div>
        </div>

        <div class="mt-6">
          <label class="block text-sm font-medium text-gray-700" for="dob">
            Date of Birth
          </label>
          <div class="mt-1">
            <input class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required="" type="date" name="dob" id="dob">
          </div>
        </div>
        
        <div class="flex items-center justify-center mt-6">
  <span class="mr-3 text-gray-700 font-medium">Gender:</span>
  <label class="inline-flex items-center">
    <input type="radio" class="form-radio h-5 w-5 text-pink-600" name="gender" value="Male">
    <span class="ml-2 text-gray-700">Male</span>
  </label>
  <label class="inline-flex items-center ml-6">
    <input type="radio" class="form-radio h-5 w-5 text-purple-600" name="gender" value="Female">
    <span class="ml-2 text-gray-700">Female</span>
  </label>
</div>



        <div class="mt-6 flex items-center justify-between">
          <div class="flex items-center">
            <input class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" type="checkbox" name="terms-and-condition" id="terms-and-condition">
            <label class="ml-2 block text-sm text-gray-900" for="terms-and-condition">
              I agree to the terms and conditions
            </label>
          </div>
        </div>

        <div class="mt-6">
          <button class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" type="submit">
            Sign up
          </button>
        </div>
      </form>
    </div>
  </div>
</div>




================================================
FILE: Forms/themrsami_friendly-firefox-52.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: form, dark, sign-up, tailwindcss -->
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
  <div
    class="relative px-4 py-10 bg-black mx-8 md:mx-0 shadow rounded-3xl sm:p-10"
  >
    <div class="max-w-md mx-auto text-white">
      <div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-5">
        <div>
          <label
            class="font-semibold text-sm text-gray-400 pb-1 block"
            for="fullname"
            >Full Name</label
          >
          <input
            class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full bg-gray-800 text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
            type="text"
            id="fullname"
          />
        </div>
        <div>
          <label
            class="font-semibold text-sm text-gray-400 pb-1 block"
            for="email"
            >Email</label
          >
          <input
            class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full bg-gray-800 text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
            type="email"
            id="email"
          />
        </div>
        <div>
          <label
            class="font-semibold text-sm text-gray-400 pb-1 block"
            for="username"
            >Username</label
          >
          <input
            class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full bg-gray-800 text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
            type="text"
            id="username"
          />
        </div>
        <div>
          <label
            class="font-semibold text-sm text-gray-400 pb-1 block"
            for="password"
            >Password</label
          >
          <input
            class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full bg-gray-800 text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
            type="password"
            id="password"
          />
        </div>
      </div>
      <div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-5">
        <div>
          <label
            class="font-semibold text-sm text-gray-400 pb-1 block"
            for="dob"
            >Date of Birth</label
          >
          <input
            class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full bg-gray-800 text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
            type="date"
            id="dob"
          />
        </div>
        <div>
          <label
            class="font-semibold text-sm text-gray-400 pb-1 block"
            for="gender"
            >Gender</label
          >
          <select
            class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full bg-gray-800 text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
            id="gender"
          >
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
          </select>
        </div>
      </div>
      <div class="flex justify-center items-center">
        <div>
          <button
            class="flex items-center justify-center py-2 px-20 bg-white hover:bg-gray-200 focus:ring-blue-500 focus:ring-offset-blue-200 text-gray-700 w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
          >
            <svg
              viewBox="0 0 24 24"
              height="25"
              width="25"
              y="0px"
              x="0px"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12,5c1.6167603,0,3.1012573,0.5535278,4.2863159,1.4740601l3.637146-3.4699707 C17.8087769,1.1399536,15.0406494,0,12,0C7.392395,0,3.3966675,2.5999146,1.3858032,6.4098511l4.0444336,3.1929321 C6.4099731,6.9193726,8.977478,5,12,5z"
                fill="#F44336"
              ></path>
              <path
                d="M23.8960571,13.5018311C23.9585571,13.0101929,24,12.508667,24,12 c0-0.8578491-0.093689-1.6931763-0.2647705-2.5H12v5h6.4862061c-0.5247192,1.3637695-1.4589844,2.5177612-2.6481934,3.319458 l4.0594482,3.204834C22.0493774,19.135437,23.5219727,16.4903564,23.8960571,13.5018311z"
                fill="#2196F3"
              ></path>
              <path
                d="M5,12c0-0.8434448,0.1568604-1.6483765,0.4302368-2.3972168L1.3858032,6.4098511 C0.5043335,8.0800171,0,9.9801636,0,12c0,1.9972534,0.4950562,3.8763428,1.3582153,5.532959l4.0495605-3.1970215 C5.1484375,13.6044312,5,12.8204346,5,12z"
                fill="#FFC107"
              ></path>
              <path
                d="M12,19c-3.0455322,0-5.6295776-1.9484863-6.5922241-4.6640625L1.3582153,17.532959 C3.3592529,21.3734741,7.369812,24,12,24c3.027771,0,5.7887573-1.1248169,7.8974609-2.975708l-4.0594482-3.204834 C14.7412109,18.5588989,13.4284058,19,12,19z"
                fill="#00B060"
              ></path>
              <path
                opacity=".1"
                d="M12,23.75c-3.5316772,0-6.7072754-1.4571533-8.9524536-3.7786865C5.2453613,22.4378052,8.4364624,24,12,24 c3.5305786,0,6.6952515-1.5313721,8.8881226-3.9592285C18.6495972,22.324646,15.4981079,23.75,12,23.75z"
              ></path>
              <polygon
                opacity=".1"
                points="12,14.25 12,14.5 18.4862061,14.5 18.587492,14.25"
              ></polygon>
              <path
                d="M23.9944458,12.1470337C23.9952393,12.0977783,24,12.0493774,24,12 c0-0.0139771-0.0021973-0.0274658-0.0022583-0.0414429C23.9970703,12.0215454,23.9938965,12.0838013,23.9944458,12.1470337z"
                fill="#E6E6E6"
              ></path>
              <path
                opacity=".2"
                d="M12,9.5v0.25h11.7855721c-0.0157471-0.0825195-0.0329475-0.1680908-0.0503426-0.25H12z"
                fill="#FFF"
              ></path>
              <linearGradient
                gradientUnits="userSpaceOnUse"
                y2="12"
                y1="12"
                x2="24"
                x1="0"
                id="LxT-gk5MfRc1Gl_4XsNKba_xoyhGXWmHnqX_gr1"
              >
                <stop stop-opacity=".2" stop-color="#fff" offset="0"></stop>
                <stop stop-opacity="0" stop-color="#fff" offset="1"></stop>
              </linearGradient>
              <path
                d="M23.7352295,9.5H12v5h6.4862061C17.4775391,17.121582,14.9771729,19,12,19 c-3.8659668,0-7-3.1340332-7-7c0-3.8660278,3.1340332-7,7-7c1.4018555,0,2.6939087,0.4306641,3.7885132,1.140686 c0.1675415,0.1088867,0.3403931,0.2111206,0.4978027,0.333374l3.637146-3.4699707L19.8414307,2.940979 C17.7369385,1.1170654,15.00354,0,12,0C5.3725586,0,0,5.3725586,0,12c0,6.6273804,5.3725586,12,12,12 c6.1176758,0,11.1554565-4.5812378,11.8960571-10.4981689C23.9585571,13.0101929,24,12.508667,24,12 C24,11.1421509,23.906311,10.3068237,23.7352295,9.5z"
                fill="url(#LxT-gk5MfRc1Gl_4XsNKba_xoyhGXWmHnqX_gr1)"
              ></path>
              <path
                opacity=".1"
                d="M15.7885132,5.890686C14.6939087,5.1806641,13.4018555,4.75,12,4.75c-3.8659668,0-7,3.1339722-7,7 c0,0.0421753,0.0005674,0.0751343,0.0012999,0.1171875C5.0687437,8.0595093,8.1762085,5,12,5 c1.4018555,0,2.6939087,0.4306641,3.7885132,1.140686c0.1675415,0.1088867,0.3403931,0.2111206,0.4978027,0.333374 l3.637146-3.4699707l-3.637146,3.2199707C16.1289062,6.1018066,15.9560547,5.9995728,15.7885132,5.890686z"
              ></path>
              <path
                opacity=".2"
                d="M12,0.25c2.9750366,0,5.6829224,1.0983887,7.7792969,2.8916016l0.144165-0.1375122 l-0.110014-0.0958166C17.7089558,1.0843592,15.00354,0,12,0C5.3725586,0,0,5.3725586,0,12 c0,0.0421753,0.0058594,0.0828857,0.0062866,0.125C0.0740356,5.5558472,5.4147339,0.25,12,0.25z"
                fill="#FFF"
              ></path>
            </svg>
            <span class="ml-2">Sign up with Google</span>
          </button>
          <button
            class="flex items-center justify-center py-2 px-20 bg-white hover:bg-gray-200 focus:ring-blue-500 focus:ring-offset-blue-200 text-gray-700 w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg mt-4"
          >
            <svg
              viewBox="0 0 30 30"
              height="30"
              width="30"
              y="0px"
              x="0px"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M25.565,9.785c-0.123,0.077-3.051,1.702-3.051,5.305c0.138,4.109,3.695,5.55,3.756,5.55 c-0.061,0.077-0.537,1.963-1.947,3.94C23.204,26.283,21.962,28,20.076,28c-1.794,0-2.438-1.135-4.508-1.135 c-2.223,0-2.852,1.135-4.554,1.135c-1.886,0-3.22-1.809-4.4-3.496c-1.533-2.208-2.836-5.673-2.882-9 c-0.031-1.763,0.307-3.496,1.165-4.968c1.211-2.055,3.373-3.45,5.734-3.496c1.809-0.061,3.419,1.242,4.523,1.242 c1.058,0,3.036-1.242,5.274-1.242C21.394,7.041,23.97,7.332,25.565,9.785z M15.001,6.688c-0.322-1.61,0.567-3.22,1.395-4.247 c1.058-1.242,2.729-2.085,4.17-2.085c0.092,1.61-0.491,3.189-1.533,4.339C18.098,5.937,16.488,6.872,15.001,6.688z"
              ></path>
            </svg>
            <span class="ml-2">Sign up with Apple</span>
          </button>
        </div>
      </div>
      <div class="mt-5">
        <button
          class="py-2 px-4 bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
          type="submit"
        >
          Sign up
        </button>
      </div>
      <div class="flex items-center justify-between mt-4">
        <span class="w-1/5 border-b dark:border-gray-600 md:w-1/4"></span>
        <a
          class="text-xs text-gray-500 uppercase dark:text-gray-400 hover:underline"
          href="#"
          >have an account? Log in</a
        >
        <span class="w-1/5 border-b dark:border-gray-600 md:w-1/4"></span>
      </div>
    </div>
  </div>
</div>


    

================================================
FILE: Forms/themrsami_green-lionfish-48.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: login, twitter, form, login form -->
<div class="flex items-center justify-center">
  <div
    class="bg-gray-900 border-[4px] border-blue-900 rounded-2xl hover:border-blue-500 transition-all duration-200"
  >
    <div
      class="mx-auto flex items-center space-y-4 py-16 px-12 font-semibold text-gray-500 flex-col"
    >
      <svg viewBox="0 0 24 24" class="h-12 w-12 text-white" fill="currentColor">
        <g>
          <path
            d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"
          ></path>
        </g>
      </svg>
      <h1 class="text-white text-2xl">Sign in to Twitter</h1>
      <input
        class="w-full p-2 bg-blue-900 rounded-md border border-gray-700 focus:border-blue-700 hover:border-blue-500 transition-all duration-200"
        placeholder="Email"
        type="email"
        name="email"
        id=""
      />
      <input
        class="w-full p-2 bg-blue-900 rounded-md border border-gray-700 focus:border-blue-700 hover:border-blue-500 transition-all duration-200"
        placeholder="Password"
        type="password"
        name="password"
        id=""
      />
      <input
        class="w-full p-2 bg-gray-50 rounded-full font-bold text-gray-900 border-[4px] border-gray-700 hover:border-blue-500 transition-all duration-200"
        type="submit"
        id=""
      />
      <p>
        Don't have an account?
        <a
          class="font-semibold text-white hover:text-blue-500 transition-all duration-200"
          href=""
          >Sign up</a
        >
      </p>
    </div>
  </div>
</div>


    

================================================
FILE: Forms/themrsami_happy-dingo-51.html
================================================
<!-- From Uiverse.io by themrsami - Tags: material design, purple, form, futuristic, tailwind -->
<div class="flex flex-col items-center justify-center h-screen dark">
  <div class="w-full max-w-md bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-200 mb-4">Login</h2>
    <form class="flex flex-col">
      <input placeholder="Email address" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="email">
      <input placeholder="Password" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="password">
      <div class="flex items-center justify-between flex-wrap">
        <label class="text-sm text-gray-200 cursor-pointer" for="remember-me">
          <input class="mr-2" id="remember-me" type="checkbox">
          Remember me
        </label>
        <a class="text-sm text-blue-500 hover:underline mb-0.5" href="#">Forgot password?</a>
        <p class="text-white mt-4"> Don't have an account? <a class="text-sm text-blue-500 -200 hover:underline mt-4" href="#">Signup</a></p>
      </div>
      <button class="bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-bold py-2 px-4 rounded-md mt-4 hover:bg-indigo-600 hover:to-blue-600 transition ease-in-out duration-150" type="submit">Login</button>
    </form>
  </div>
</div>




================================================
FILE: Forms/themrsami_hard-treefrog-45.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: form, tailwindcss, signup form, facebook clone signup -->
<div class="mx-auto max-w-[432px] bg-white rounded-md shadow-lg drop-shadow-md">
  <div class="px-4 py-3 flex justify-between">
    <div>
      <h2 class="font-bold" style="font-size: 32px">Sign Up</h2>
      <p class="text-gray-500" style="font-size: 15px">It's quick and easy.</p>
    </div>
    <div style="cursor: pointer" class="text-gray-600">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-7 w-7"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="3"
          d="M6 18L18 6M6 6l12 12"
        ></path>
      </svg>
    </div>
  </div>
  <hr class="bg-gray-600" />
  <div class="px-4 pt-3 pb-6 space-y-3">
    <div class="space-x-3 flex">
      <input
        type="text"
        placeholder="First name"
        class="flex-1 ring-1 ring-gray-400 rounded-md text-md px-2 py-2 outline-none bg-gray-100 focus:placeholder-gray-500"
      />
      <input
        type="text"
        placeholder="Surname"
        class="flex-1 ring-1 ring-gray-400 rounded-md text-md px-2 py-2 outline-none bg-gray-100 focus:placeholder-gray-500"
      />
    </div>
    <div>
      <input
        type="text"
        placeholder="Mobile number or email address"
        class="w-full ring-1 ring-gray-400 rounded-md text-md px-2 py-2 outline-none bg-gray-100 focus:placeholder-gray-500"
      />
    </div>
    <div>
      <input
        type="password"
        placeholder="New password"
        class="w-full ring-1 ring-gray-400 rounded-md text-md px-2 py-2 outline-none bg-gray-100 focus:placeholder-gray-500"
      />
    </div>
    <div>
      <div class="text-gray-500" style="font-size: 12px;">
        Date of birth <a href=""> (?) </a>
      </div>
      <div class="mt-1 flex space-x-3">
        <select
          name="day"
          class="text-md flex-1 px-1 py-1.5 ring-1 ring-gray-400 rounded-md outline-none"
        >
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>9</option>
          <option>10</option>
          <option>11</option>
          <option>12</option>
          <option>13</option>
          <option>14</option>
          <option>15</option>
          <option>16</option>
          <option>17</option>
          <option>18</option>
          <option>19</option>
          <option>20</option>
          <option>21</option>
          <option>22</option>
          <option>23</option>
          <option>24</option>
          <option>25</option>
          <option>26</option>
          <option>27</option>
          <option>28</option>
          <option>29</option>
          <option>30</option>
          <option>31</option>
        </select>
        <select
          name="month"
          class="text-md flex-1 px-1 py-1.5 ring-1 ring-gray-400 rounded-md outline-none"
        >
          <option>January</option>
          <option>February</option>
          <option>March</option>
          <option>April</option>
          <option>May</option>
          <option>June</option>
          <option>July</option>
          <option>August</option>
          <option>September</option>
          <option>October</option>
          <option>November</option>
          <option>December</option>
        </select>
        <select
          name="year"
          class="text-md flex-1 px-1 py-1.5 ring-1 ring-gray-400 rounded-md outline-none"
        >
          <option>1990</option>
          <option>1991</option>
          <option>1992</option>
          <option>1993</option>
          <option>1994</option>
          <option>1995</option>
          <option>1996</option>
          <option>1997</option>
          <option>1998</option>
          <option>1999</option>
          <option>2000</option>
          <option>2001</option>
          <option>2002</option>
          <option>2003</option>
          <option>2004</option>
          <option>2005</option>
          <option>2006</option>
          <option>2007</option>
          <option>2008</option>
          <option>2009</option>
          <option>2010</option>
          <option>2011</option>
          <option>2012</option>
          <option>2013</option>
          <option>2014</option>
          <option>2015</option>
          <option>2016</option>
          <option>2017</option>
          <option>2018</option>
          <option>2019</option>
          <option>2020</option>
          <option>2021</option>
          <option>2022</option>
          <option>2023</option>
        </select>
      </div>
    </div>
    <div>
      <div class="text-gray-500" style="font-size: 12px;">
        Gender <a href=""> (?) </a>
      </div>
      <div class="mt-1 flex space-x-3">
        <label
          for="female"
          class="flex-1 flex space-x-2 justify-between items-center rounded-md px-2 py-1 border border-gray-400"
        >
          <span>Female</span>
          <input type="radio" id="female" name="gender" />
        </label>
        <label
          for="male"
          class="flex-1 flex space-x-2 justify-between items-center rounded-md px-2 py-1 border border-gray-400"
        >
          <span>Male</span>
          <input type="radio" id="male" name="gender" />
        </label>
        <label
          for="other"
          class="flex-1 flex space-x-2 justify-between items-center rounded-md px-2 py-1 border border-gray-400"
        >
          <span>Custom</span>
          <input type="radio" id="other" name="gender" />
        </label>
      </div>
    </div>
    <div>
      <p class="text-gray-600" style="font-size: 11px">
        People who use our service may have uploaded your contact information to
        Facebook.
        <a href="" class="hover:text-blue-900 font-medium hover:underline"
          >Learn more</a
        >.
      </p>
      <p class="text-gray-600 mt-4" style="font-size: 11px">
        By clicking Sign Up, you agree to our
        <a href="" class="hover:text-blue-900 font-medium hover:underline"
          >Terms</a
        >,
        <a href="" class="hover:text-blue-900 font-medium hover:underline"
          >Privacy Policy</a
        >
        and
        <a href="" class="hover:text-blue-900 font-medium hover:underline"
          >Cookies Policy</a
        >. You may receive SMS notifications from us and can opt out at any
        time.
      </p>
    </div>
    <div class="text-center">
      <button
        class="text-white font-bold px-16 py-1 rounded-md"
        style="background-color: #00A400; font-size: 18px;"
      >
        Sign Up
      </button>
    </div>
  </div>
</div>


    

================================================
FILE: Forms/themrsami_light-starfish-59.html
================================================
<!-- From Uiverse.io by themrsami - Tags: form, loginform, tailwind, tailwindcss, themrsami, lightversion -->
<div class="flex flex-col items-center justify-center h-screen">
  <div class="w-full max-w-md bg-white rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-900 mb-4">Login</h2>
    <form class="flex flex-col">
      <input type="email" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="Email address">
      <input type="password" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="Password">
      <div class="flex items-center justify-between flex-wrap">
        <label for="remember-me" class="text-sm text-gray-900 cursor-pointer">
          <input type="checkbox" id="remember-me" class="mr-2">
          Remember me
        </label>
        <a href="#" class="text-sm text-blue-500 hover:underline mb-0.5">Forgot password?</a>
        <p class="text-gray-900 mt-4"> Don't have an account? <a href="#" class="text-sm text-blue-500 -200 hover:underline mt-4">Signup</a></p>
      </div>
      <button type="submit" class="bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-bold py-2 px-4 rounded-md mt-4 hover:bg-indigo-600 hover:to-blue-600 transition ease-in-out duration-150">Login</button>
    </form>
  </div>
</div>




================================================
FILE: Forms/themrsami_nasty-robin-70.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: form, sign-up, hover effect, tailwindcss -->
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
  <div
    class="relative px-4 py-10 bg-white mx-8 md:mx-0 shadow rounded-3xl sm:p-10"
  >
    <div class="max-w-md mx-auto">
      <div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-5">
        <div>
          <label
            class="font-semibold text-sm text-gray-600 pb-1 block"
            for="fullname"
            >Full Name</label
          >
          <input
            class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
            type="text"
            id="fullname"
          />
        </div>
        <div>
          <label
            class="font-semibold text-sm text-gray-600 pb-1 block"
            for="email"
            >Email</label
          >
          <input
            class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
            type="email"
            id="email"
          />
        </div>
        <div>
          <label
            class="font-semibold text-sm text-gray-600 pb-1 block"
            for="username"
            >Username</label
          >
          <input
            class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
            type="text"
            id="username"
          />
        </div>
        <div>
          <label
            class="font-semibold text-sm text-gray-600 pb-1 block"
            for="password"
            >Password</label
          >
          <input
            class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
            type="password"
            id="password"
          />
        </div>
      </div>
      <div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-5">
        <div>
          <label
            class="font-semibold text-sm text-gray-600 pb-1 block"
            for="dob"
            >Date of Birth</label
          >
          <input
            class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
            type="date"
            id="dob"
          />
        </div>
        <div>
          <label
            class="font-semibold text-sm text-gray-600 pb-1 block"
            for="gender"
            >Gender</label
          >
          <select
            class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
            id="gender"
          >
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
          </select>
        </div>
      </div>
      <div class="flex justify-center items-center">
        <div>
          <button
            class="flex items-center justify-center py-2 px-20 bg-white hover:bg-gray-200 focus:ring-blue-500 focus:ring-offset-blue-200 text-gray-700 w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
          >
            <svg
              viewBox="0 0 24 24"
              height="25"
              width="25"
              y="0px"
              x="0px"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12,5c1.6167603,0,3.1012573,0.5535278,4.2863159,1.4740601l3.637146-3.4699707 C17.8087769,1.1399536,15.0406494,0,12,0C7.392395,0,3.3966675,2.5999146,1.3858032,6.4098511l4.0444336,3.1929321 C6.4099731,6.9193726,8.977478,5,12,5z"
                fill="#F44336"
              ></path>
              <path
                d="M23.8960571,13.5018311C23.9585571,13.0101929,24,12.508667,24,12 c0-0.8578491-0.093689-1.6931763-0.2647705-2.5H12v5h6.4862061c-0.5247192,1.3637695-1.4589844,2.5177612-2.6481934,3.319458 l4.0594482,3.204834C22.0493774,19.135437,23.5219727,16.4903564,23.8960571,13.5018311z"
                fill="#2196F3"
              ></path>
              <path
                d="M5,12c0-0.8434448,0.1568604-1.6483765,0.4302368-2.3972168L1.3858032,6.4098511 C0.5043335,8.0800171,0,9.9801636,0,12c0,1.9972534,0.4950562,3.8763428,1.3582153,5.532959l4.0495605-3.1970215 C5.1484375,13.6044312,5,12.8204346,5,12z"
                fill="#FFC107"
              ></path>
              <path
                d="M12,19c-3.0455322,0-5.6295776-1.9484863-6.5922241-4.6640625L1.3582153,17.532959 C3.3592529,21.3734741,7.369812,24,12,24c3.027771,0,5.7887573-1.1248169,7.8974609-2.975708l-4.0594482-3.204834 C14.7412109,18.5588989,13.4284058,19,12,19z"
                fill="#00B060"
              ></path>
              <path
                opacity=".1"
                d="M12,23.75c-3.5316772,0-6.7072754-1.4571533-8.9524536-3.7786865C5.2453613,22.4378052,8.4364624,24,12,24 c3.5305786,0,6.6952515-1.5313721,8.8881226-3.9592285C18.6495972,22.324646,15.4981079,23.75,12,23.75z"
              ></path>
              <polygon
                opacity=".1"
                points="12,14.25 12,14.5 18.4862061,14.5 18.587492,14.25"
              ></polygon>
              <path
                d="M23.9944458,12.1470337C23.9952393,12.0977783,24,12.0493774,24,12 c0-0.0139771-0.0021973-0.0274658-0.0022583-0.0414429C23.9970703,12.0215454,23.9938965,12.0838013,23.9944458,12.1470337z"
                fill="#E6E6E6"
              ></path>
              <path
                opacity=".2"
                d="M12,9.5v0.25h11.7855721c-0.0157471-0.0825195-0.0329475-0.1680908-0.0503426-0.25H12z"
                fill="#FFF"
              ></path>
              <linearGradient
                gradientUnits="userSpaceOnUse"
                y2="12"
                y1="12"
                x2="24"
                x1="0"
                id="LxT-gk5MfRc1Gl_4XsNKba_xoyhGXWmHnqX_gr1"
              >
                <stop stop-opacity=".2" stop-color="#fff" offset="0"></stop>
                <stop stop-opacity="0" stop-color="#fff" offset="1"></stop>
              </linearGradient>
              <path
                d="M23.7352295,9.5H12v5h6.4862061C17.4775391,17.121582,14.9771729,19,12,19 c-3.8659668,0-7-3.1340332-7-7c0-3.8660278,3.1340332-7,7-7c1.4018555,0,2.6939087,0.4306641,3.7885132,1.140686 c0.1675415,0.1088867,0.3403931,0.2111206,0.4978027,0.333374l3.637146-3.4699707L19.8414307,2.940979 C17.7369385,1.1170654,15.00354,0,12,0C5.3725586,0,0,5.3725586,0,12c0,6.6273804,5.3725586,12,12,12 c6.1176758,0,11.1554565-4.5812378,11.8960571-10.4981689C23.9585571,13.0101929,24,12.508667,24,12 C24,11.1421509,23.906311,10.3068237,23.7352295,9.5z"
                fill="url(#LxT-gk5MfRc1Gl_4XsNKba_xoyhGXWmHnqX_gr1)"
              ></path>
              <path
                opacity=".1"
                d="M15.7885132,5.890686C14.6939087,5.1806641,13.4018555,4.75,12,4.75c-3.8659668,0-7,3.1339722-7,7 c0,0.0421753,0.0005674,0.0751343,0.0012999,0.1171875C5.0687437,8.0595093,8.1762085,5,12,5 c1.4018555,0,2.6939087,0.4306641,3.7885132,1.140686c0.1675415,0.1088867,0.3403931,0.2111206,0.4978027,0.333374 l3.637146-3.4699707l-3.637146,3.2199707C16.1289062,6.1018066,15.9560547,5.9995728,15.7885132,5.890686z"
              ></path>
              <path
                opacity=".2"
                d="M12,0.25c2.9750366,0,5.6829224,1.0983887,7.7792969,2.8916016l0.144165-0.1375122 l-0.110014-0.0958166C17.7089558,1.0843592,15.00354,0,12,0C5.3725586,0,0,5.3725586,0,12 c0,0.0421753,0.0058594,0.0828857,0.0062866,0.125C0.0740356,5.5558472,5.4147339,0.25,12,0.25z"
                fill="#FFF"
              ></path>
            </svg>
            <span class="ml-2">Sign up with Google</span>
          </button>
          <button
            class="flex items-center justify-center py-2 px-20 bg-white hover:bg-gray-200 focus:ring-blue-500 focus:ring-offset-blue-200 text-gray-700 w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg mt-4"
          >
            <svg
              viewBox="0 0 30 30"
              height="30"
              width="30"
              y="0px"
              x="0px"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M25.565,9.785c-0.123,0.077-3.051,1.702-3.051,5.305c0.138,4.109,3.695,5.55,3.756,5.55 c-0.061,0.077-0.537,1.963-1.947,3.94C23.204,26.283,21.962,28,20.076,28c-1.794,0-2.438-1.135-4.508-1.135 c-2.223,0-2.852,1.135-4.554,1.135c-1.886,0-3.22-1.809-4.4-3.496c-1.533-2.208-2.836-5.673-2.882-9 c-0.031-1.763,0.307-3.496,1.165-4.968c1.211-2.055,3.373-3.45,5.734-3.496c1.809-0.061,3.419,1.242,4.523,1.242 c1.058,0,3.036-1.242,5.274-1.242C21.394,7.041,23.97,7.332,25.565,9.785z M15.001,6.688c-0.322-1.61,0.567-3.22,1.395-4.247 c1.058-1.242,2.729-2.085,4.17-2.085c0.092,1.61-0.491,3.189-1.533,4.339C18.098,5.937,16.488,6.872,15.001,6.688z"
              ></path>
            </svg>
            <span class="ml-2">Sign up with Apple</span>
          </button>
        </div>
      </div>
      <div class="mt-5">
        <button
          class="py-2 px-4 bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
          type="submit"
        >
          Sign up
        </button>
      </div>
      <div class="flex items-center justify-between mt-4">
        <span class="w-1/5 border-b dark:border-gray-600 md:w-1/4"></span>
        <a
          class="text-xs text-gray-500 uppercase dark:text-gray-400 hover:underline"
          href="#"
          >have an account? Log in</a
        >
        <span class="w-1/5 border-b dark:border-gray-600 md:w-1/4"></span>
      </div>
    </div>
  </div>
</div>


    

================================================
FILE: Forms/themrsami_orange-cat-97.html
================================================
<!-- From Uiverse.io by themrsami - Tags: animation, login, form, modern, transition, click effect, input effect  -->
<div class="h-96 flex items-center justify-center bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
  <div class="relative">
    <div class="absolute -top-2 -left-2 -right-2 -bottom-2 rounded-lg bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 shadow-lg animate-pulse"></div>
    <div id="form-container" class="bg-white p-16 rounded-lg shadow-2xl w-80 relative z-10 transform transition duration-500 ease-in-out">
      <h2 id="form-title" class="text-center text-3xl font-bold mb-10 text-gray-800">Login</h2>
      <form class="space-y-5">
        <input class="w-full h-12 border border-gray-800 px-3 rounded-lg" placeholder="Email" id="" name="" type="text">
        <input class="w-full h-12 border border-gray-800 px-3 rounded-lg" placeholder="Password" id="" name="" type="password">
        <button class="w-full h-12 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Sign in</button>
        <a class="text-blue-500 hover:text-blue-800 text-sm" href="#">Forgot Password?</a>
      </form>
    </div>
  </div>
</div>




================================================
FILE: Forms/themrsami_orange-impala-97.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: form, tailwindcss, signup, beautiful -->
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
  <div
    class="relative px-4 py-10 bg-black mx-8 md:mx-0 shadow rounded-3xl sm:p-10"
  >
    <div class="max-w-md mx-auto text-white">
      <div class="flex items-center space-x-5 justify-center">
        <svg
          fill="none"
          viewBox="0 0 397 94"
          height="auto"
          width="150"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill="white"
            d="M128.72 39.9429L138.387 5.10122C139.027 2.79347 141.139 1.19507 143.547 1.19507H150.18C153.843 1.19507 156.423 4.76704 155.253 8.21447L136.91 62.2543C136.175 64.417 134.134 65.8735 131.837 65.8735H122.921C120.624 65.8735 118.583 64.417 117.848 62.2543L99.5067 8.21605C98.3361 4.76861 100.917 1.19664 104.579 1.19664H111.213C113.621 1.19664 115.734 2.79504 116.373 5.10279L126.039 39.9444C126.415 41.2969 128.344 41.2969 128.72 39.9444V39.9429Z"
          ></path>
          <path
            fill="white"
            d="M195.231 67.0714C185.686 67.0714 177.916 64.163 171.922 58.3432C165.926 52.525 162.93 44.7741 162.93 35.0891V33.4151C162.93 26.9206 164.194 21.1118 166.719 15.9903C169.246 10.8704 172.825 6.92483 177.456 4.15364C182.088 1.38402 187.372 0 193.307 0C202.209 0 209.217 2.79011 214.33 8.36875C219.442 13.949 221.999 21.859 221.999 32.1004V33.8344C221.999 36.7727 219.602 39.1545 216.645 39.1545H182.207C181.32 39.1545 180.659 39.9711 180.846 40.8317C181.596 44.2855 183.195 47.1134 185.636 49.3155C188.463 51.8661 192.042 53.1413 196.374 53.1413C201.178 53.1413 205.229 51.9007 208.527 49.418C210.773 47.7266 213.935 47.9788 215.813 50.0675L217.472 51.9133C219.399 54.0587 219.291 57.369 217.163 59.3174C215.131 61.1774 212.751 62.7349 210.029 63.9896C205.578 66.042 200.645 67.0682 195.231 67.0682V67.0714ZM193.245 13.9285C189.795 13.9285 186.999 15.0902 184.854 17.4122C182.708 19.7341 181.335 23.057 180.733 27.3793H204.915V25.9984C204.834 22.1553 203.792 19.184 201.787 17.0827C199.781 14.9815 196.933 13.93 193.245 13.93V13.9285Z"
          ></path>
          <path
            fill="white"
            d="M270.517 11.6886C270.472 14.6553 267.858 17.004 264.712 16.9284C264.412 16.9205 264.119 16.9173 263.833 16.9173C261.298 16.9173 259.082 17.2137 257.185 17.8048C252.99 19.1132 250.197 22.8585 250.197 27.0232V60.5565C250.197 63.4948 247.67 65.8766 244.552 65.8766H237.509C234.391 65.8766 231.864 63.4948 231.864 60.5565V5.20833C231.864 2.99201 233.771 1.19657 236.121 1.19657H245.178C247.427 1.19657 249.287 2.84541 249.428 4.96085L249.531 6.54664C249.58 7.27648 250.573 7.55076 251.027 6.95806C254.568 2.32049 259.217 0.00170898 264.972 0.00170898C265.003 0.00170898 265.033 0.00170898 265.064 0.00170898C268.175 0.0143196 270.656 2.46552 270.611 5.39907L270.515 11.6902L270.517 11.6886Z"
          ></path>
          <path
            fill="white"
            d="M312.047 48.0009C312.047 45.8886 310.994 44.2256 308.889 43.0102C306.784 41.7949 303.405 40.7088 298.753 39.7519C283.273 36.5236 275.534 29.9881 275.534 20.1455C275.534 14.4061 277.929 9.61563 282.723 5.76937C287.514 1.92312 293.78 0 301.521 0C309.782 0 316.388 1.93416 321.341 5.79775C324.15 7.99043 326.163 10.5567 327.379 13.4934C328.832 17.0039 326.256 20.8612 322.435 20.8612H315.617C313.449 20.8612 311.573 19.485 310.784 17.4768C310.383 16.4553 309.782 15.5411 308.981 14.734C307.377 13.1198 304.869 12.3127 301.462 12.3127C298.535 12.3127 296.269 12.9701 294.665 14.2847C293.061 15.601 292.259 17.2734 292.259 19.3069C292.259 21.219 293.171 22.7638 294.997 23.9398C296.821 25.1157 299.898 26.1324 304.23 26.9884C308.56 27.8459 312.209 28.8106 315.178 29.8873C324.359 33.2354 328.953 39.0331 328.953 47.2821C328.953 53.1807 326.405 57.9523 321.314 61.5983C316.22 65.2444 309.644 67.0682 301.583 67.0682C296.129 67.0682 291.286 66.1019 287.056 64.1693C282.824 62.2367 279.507 59.5869 277.101 56.2183C276.29 55.0849 275.618 53.92 275.08 52.7252C273.513 49.2383 276.157 45.3085 280.001 45.3085H285.671C287.871 45.3085 289.867 46.6389 290.65 48.6803C291.22 50.162 292.137 51.3884 293.403 52.361C295.528 53.9957 298.375 54.8122 301.944 54.8122C305.272 54.8122 307.788 54.1848 309.493 52.9301C311.197 51.6753 312.05 50.0312 312.05 47.9977L312.047 48.0009Z"
          ></path>
          <path
            fill="white"
            d="M370.097 67.0714C360.551 67.0714 352.782 64.163 346.787 58.3432C340.791 52.525 337.795 44.7741 337.795 35.0891V33.4151C337.795 26.9206 339.059 21.1118 341.584 15.9903C344.111 10.8704 347.69 6.92483 352.322 4.15364C356.953 1.38402 362.237 0 368.173 0C377.074 0 384.082 2.79011 389.195 8.36875C394.307 13.949 396.864 21.859 396.864 32.1004V33.8344C396.864 36.7727 394.467 39.1545 391.511 39.1545H357.072C356.186 39.1545 355.524 39.9711 355.711 40.8317C356.462 44.2855 358.06 47.1134 360.502 49.3155C363.328 51.8661 366.907 53.1413 371.239 53.1413C376.043 53.1413 380.095 51.9007 383.392 49.418C385.638 47.7266 388.8 47.9788 390.678 50.0675L392.337 51.9133C394.264 54.0587 394.156 57.369 392.028 59.3174C389.996 61.1774 387.616 62.7349 384.894 63.9896C380.444 66.042 375.51 67.0682 370.097 67.0682V67.0714ZM368.111 13.9285C364.661 13.9285 361.864 15.0902 359.72 17.4122C357.573 19.7341 356.2 23.057 355.599 27.3793H379.781V25.9984C379.7 22.1553 378.657 19.184 376.653 17.0827C374.646 14.9815 371.799 13.93 368.111 13.93V13.9285Z"
          ></path>
          <path
            fill="url(#paint0_linear_501_142)"
            d="M38.0481 4.82927C38.0481 2.16214 40.018 0 42.4481 0H51.2391C53.6692 0 55.6391 2.16214 55.6391 4.82927V40.1401C55.6391 48.8912 53.2343 55.6657 48.4248 60.4636C43.6153 65.2277 36.7304 67.6098 27.7701 67.6098C18.8099 67.6098 11.925 65.2953 7.11548 60.6663C2.37183 56.0036 3.8147e-06 49.2967 3.8147e-06 40.5456V4.82927C3.8147e-06 2.16213 1.96995 0 4.4 0H13.2405C15.6705 0 17.6405 2.16214 17.6405 4.82927V39.1265C17.6405 43.7892 18.4805 47.2018 20.1605 49.3642C21.8735 51.5267 24.4759 52.6079 27.9678 52.6079C31.4596 52.6079 34.0127 51.5436 35.6268 49.4149C37.241 47.2863 38.0481 43.8399 38.0481 39.0758V4.82927Z"
          ></path>
          <path
            fill="url(#paint1_linear_501_142)"
            d="M86.9 61.8682C86.9 64.5353 84.9301 66.6975 82.5 66.6975H73.6595C71.2295 66.6975 69.2595 64.5353 69.2595 61.8682V4.82927C69.2595 2.16214 71.2295 0 73.6595 0H82.5C84.9301 0 86.9 2.16214 86.9 4.82927V61.8682Z"
          ></path>
          <path
            fill="url(#paint2_linear_501_142)"
            d="M2.86102e-06 83.2195C2.86102e-06 80.5524 1.96995 78.3902 4.4 78.3902H83.6C86.0301 78.3902 88 80.5524 88 83.2195V89.1707C88 91.8379 86.0301 94 83.6 94H4.4C1.96995 94 0 91.8379 0 89.1707L2.86102e-06 83.2195Z"
          ></path>
          <defs>
            <linearGradient
              gradientUnits="userSpaceOnUse"
              y2="87.6201"
              x2="96.1684"
              y1="0"
              x1="0"
              id="paint0_linear_501_142"
            >
              <stop stop-color="#BF66FF"></stop>
              <stop stop-color="#6248FF" offset="0.510417"></stop>
              <stop stop-color="#00DDEB" offset="1"></stop>
            </linearGradient>
            <linearGradient
              gradientUnits="userSpaceOnUse"
              y2="87.6201"
              x2="96.1684"
              y1="0"
              x1="0"
              id="paint1_linear_501_142"
            >
              <stop stop-color="#BF66FF"></stop>
              <stop stop-color="#6248FF" offset="0.510417"></stop>
              <stop stop-color="#00DDEB" offset="1"></stop>
            </linearGradient>
            <linearGradient
              gradientUnits="userSpaceOnUse"
              y2="87.6201"
              x2="96.1684"
              y1="0"
              x1="0"
              id="paint2_linear_501_142"
            >
              <stop stop-color="#BF66FF"></stop>
              <stop stop-color="#6248FF" offset="0.510417"></stop>
              <stop stop-color="#00DDEB" offset="1"></stop>
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div class="mt-5">
        <label
          class="font-semibold text-sm text-gray-400 pb-1 block"
          for="login"
          >E-mail</label
        >
        <input
          class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full bg-gray-700 text-white focus:border-blue-500 focus:ring-4 focus:ring-blue-500"
          type="text"
          id="login"
        />
        <label
          class="font-semibold text-sm text-gray-400 pb-1 block"
          for="password"
          >Password</label
        >
        <input
          class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full bg-gray-700 text-white focus:border-blue-500 focus:ring-4 focus:ring-blue-500"
          type="password"
          id="password"
        />
      </div>
      <div class="text-right mb-4">
        <a
          class="text-xs font-display font-semibold text-gray-500 hover:text-gray-400 cursor-pointer"
          href="#"
        >
          Forgot Password?
        </a>
      </div>
      <div class="flex justify-center items-center">
        <div>
          <button
            class="flex items-center justify-center py-2 px-20 bg-white hover:bg-gray-200 focus:ring-blue-500 focus:ring-offset-blue-200 text-gray-700 w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              x="0px"
              y="0px"
              width="25"
              height="25"
              viewBox="0 0 24 24"
            >
              <path
                fill="#F44336"
                d="M12,5c1.6167603,0,3.1012573,0.5535278,4.2863159,1.4740601l3.637146-3.4699707 C17.8087769,1.1399536,15.0406494,0,12,0C7.392395,0,3.3966675,2.5999146,1.3858032,6.4098511l4.0444336,3.1929321 C6.4099731,6.9193726,8.977478,5,12,5z"
              ></path>
              <path
                fill="#2196F3"
                d="M23.8960571,13.5018311C23.9585571,13.0101929,24,12.508667,24,12 c0-0.8578491-0.093689-1.6931763-0.2647705-2.5H12v5h6.4862061c-0.5247192,1.3637695-1.4589844,2.5177612-2.6481934,3.319458 l4.0594482,3.204834C22.0493774,19.135437,23.5219727,16.4903564,23.8960571,13.5018311z"
              ></path>
              <path
                fill="#FFC107"
                d="M5,12c0-0.8434448,0.1568604-1.6483765,0.4302368-2.3972168L1.3858032,6.4098511 C0.5043335,8.0800171,0,9.9801636,0,12c0,1.9972534,0.4950562,3.8763428,1.3582153,5.532959l4.0495605-3.1970215 C5.1484375,13.6044312,5,12.8204346,5,12z"
              ></path>
              <path
                fill="#00B060"
                d="M12,19c-3.0455322,0-5.6295776-1.9484863-6.5922241-4.6640625L1.3582153,17.532959 C3.3592529,21.3734741,7.369812,24,12,24c3.027771,0,5.7887573-1.1248169,7.8974609-2.975708l-4.0594482-3.204834 C14.7412109,18.5588989,13.4284058,19,12,19z"
              ></path>
              <path
                d="M12,23.75c-3.5316772,0-6.7072754-1.4571533-8.9524536-3.7786865C5.2453613,22.4378052,8.4364624,24,12,24 c3.5305786,0,6.6952515-1.5313721,8.8881226-3.9592285C18.6495972,22.324646,15.4981079,23.75,12,23.75z"
                opacity=".1"
              ></path>
              <polygon
                points="12,14.25 12,14.5 18.4862061,14.5 18.587492,14.25"
                opacity=".1"
              ></polygon>
              <path
                fill="#E6E6E6"
                d="M23.9944458,12.1470337C23.9952393,12.0977783,24,12.0493774,24,12 c0-0.0139771-0.0021973-0.0274658-0.0022583-0.0414429C23.9970703,12.0215454,23.9938965,12.0838013,23.9944458,12.1470337z"
              ></path>
              <path
                fill="#FFF"
                d="M12,9.5v0.25h11.7855721c-0.0157471-0.0825195-0.0329475-0.1680908-0.0503426-0.25H12z"
                opacity=".2"
              ></path>
              <linearGradient
                id="LxT-gk5MfRc1Gl_4XsNKba_xoyhGXWmHnqX_gr1"
                x1="0"
                x2="24"
                y1="12"
                y2="12"
                gradientUnits="userSpaceOnUse"
              >
                <stop offset="0" stop-color="#fff" stop-opacity=".2"></stop>
                <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
              </linearGradient>
              <path
                fill="url(#LxT-gk5MfRc1Gl_4XsNKba_xoyhGXWmHnqX_gr1)"
                d="M23.7352295,9.5H12v5h6.4862061C17.4775391,17.121582,14.9771729,19,12,19 c-3.8659668,0-7-3.1340332-7-7c0-3.8660278,3.1340332-7,7-7c1.4018555,0,2.6939087,0.4306641,3.7885132,1.140686 c0.1675415,0.1088867,0.3403931,0.2111206,0.4978027,0.333374l3.637146-3.4699707L19.8414307,2.940979 C17.7369385,1.1170654,15.00354,0,12,0C5.3725586,0,0,5.3725586,0,12c0,6.6273804,5.3725586,12,12,12 c6.1176758,0,11.1554565-4.5812378,11.8960571-10.4981689C23.9585571,13.0101929,24,12.508667,24,12 C24,11.1421509,23.906311,10.3068237,23.7352295,9.5z"
              ></path>
              <path
                d="M15.7885132,5.890686C14.6939087,5.1806641,13.4018555,4.75,12,4.75c-3.8659668,0-7,3.1339722-7,7 c0,0.0421753,0.0005674,0.0751343,0.0012999,0.1171875C5.0687437,8.0595093,8.1762085,5,12,5 c1.4018555,0,2.6939087,0.4306641,3.7885132,1.140686c0.1675415,0.1088867,0.3403931,0.2111206,0.4978027,0.333374 l3.637146-3.4699707l-3.637146,3.2199707C16.1289062,6.1018066,15.9560547,5.9995728,15.7885132,5.890686z"
                opacity=".1"
              ></path>
              <path
                fill="#FFF"
                d="M12,0.25c2.9750366,0,5.6829224,1.0983887,7.7792969,2.8916016l0.144165-0.1375122 l-0.110014-0.0958166C17.7089558,1.0843592,15.00354,0,12,0C5.3725586,0,0,5.3725586,0,12 c0,0.0421753,0.0058594,0.0828857,0.0062866,0.125C0.0740356,5.5558472,5.4147339,0.25,12,0.25z"
                opacity=".2"
              ></path>
            </svg>
            <span class="ml-8">Sign in with Google</span>
          </button>
          <button
            class="flex items-center justify-center py-2 px-20 bg-white hover:bg-gray-200 focus:ring-blue-500 focus:ring-offset-blue-200 text-gray-700 w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg mt-4"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              x="0px"
              y="0px"
              width="30"
              height="30"
              viewBox="0 0 30 30"
            >
              <path
                d="M25.565,9.785c-0.123,0.077-3.051,1.702-3.051,5.305c0.138,4.109,3.695,5.55,3.756,5.55 c-0.061,0.077-0.537,1.963-1.947,3.94C23.204,26.283,21.962,28,20.076,28c-1.794,0-2.438-1.135-4.508-1.135 c-2.223,0-2.852,1.135-4.554,1.135c-1.886,0-3.22-1.809-4.4-3.496c-1.533-2.208-2.836-5.673-2.882-9 c-0.031-1.763,0.307-3.496,1.165-4.968c1.211-2.055,3.373-3.45,5.734-3.496c1.809-0.061,3.419,1.242,4.523,1.242 c1.058,0,3.036-1.242,5.274-1.242C21.394,7.041,23.97,7.332,25.565,9.785z M15.001,6.688c-0.322-1.61,0.567-3.22,1.395-4.247 c1.058-1.242,2.729-2.085,4.17-2.085c0.092,1.61-0.491,3.189-1.533,4.339C18.098,5.937,16.488,6.872,15.001,6.688z"
              ></path>
            </svg>
            <span class="ml-8">Sign in with Apple</span>
          </button>
        </div>
      </div>
      <div class="mt-5">
        <button
          class="py-2 px-4 bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
          type="submit"
        >
          Log in
        </button>
      </div>
      <div class="flex items-center justify-between mt-4">
        <span class="w-1/5 border-b dark:border-gray-600 md:w-1/4"></span>
        <a
          class="text-xs text-gray-500 uppercase dark:text-gray-400 hover:underline"
          href="#"
          >or sign up</a
        >
        <span class="w-1/5 border-b dark:border-gray-600 md:w-1/4"></span>
      </div>
    </div>
  </div>
</div>


    

================================================
FILE: Forms/themrsami_ordinary-shrimp-82.html
================================================
<!-- From Uiverse.io by themrsami - Tags: material design, purple, form, futuristic, input effect , tailwind, tailwindcss, job application form -->
<div class="flex flex-col items-center justify-center h-screen dark">
  <div class="w-full max-w-md bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-200 mb-4">Job Application Form</h2>

    <form class="flex flex-col">
      <input placeholder="Full Name" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="text">
      <input placeholder="Email" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="email">
      <input placeholder="Phone Number" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="text">
      <input placeholder="LinkedIn Profile URL" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="text">
      <textarea placeholder="Cover Letter" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" name="cover_letter"></textarea>
      <input placeholder="Resume" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="file">

      <button class="bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-bold py-2 px-4 rounded-md mt-4 hover:bg-indigo-600 hover:to-blue-600 transition ease-in-out duration-150" type="submit">Apply</button>
    </form>
  </div>
</div>




================================================
FILE: Forms/themrsami_pink-turtle-25.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: apple, form, google, uiverse, login , login form, tailwindcss -->
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
  <div
    class="relative px-4 py-10 bg-white mx-8 md:mx-0 shadow rounded-3xl sm:p-10"
  >
    <div class="max-w-md mx-auto">
      <div class="flex items-center space-x-5 justify-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="85"
          height="auto"
          viewBox="0 0 397 94"
          fill="none"
        >
          <path
            d="M128.72 39.9429L138.387 5.10122C139.027 2.79347 141.139 1.19507 143.547 1.19507H150.18C153.843 1.19507 156.423 4.76704 155.253 8.21447L136.91 62.2543C136.175 64.417 134.134 65.8735 131.837 65.8735H122.921C120.624 65.8735 118.583 64.417 117.848 62.2543L99.5067 8.21605C98.3361 4.76861 100.917 1.19664 104.579 1.19664H111.213C113.621 1.19664 115.734 2.79504 116.373 5.10279L126.039 39.9444C126.415 41.2969 128.344 41.2969 128.72 39.9444V39.9429Z"
            fill="grey"
          ></path>
          <path
            d="M195.231 67.0714C185.686 67.0714 177.916 64.163 171.922 58.3432C165.926 52.525 162.93 44.7741 162.93 35.0891V33.4151C162.93 26.9206 164.194 21.1118 166.719 15.9903C169.246 10.8704 172.825 6.92483 177.456 4.15364C182.088 1.38402 187.372 0 193.307 0C202.209 0 209.217 2.79011 214.33 8.36875C219.442 13.949 221.999 21.859 221.999 32.1004V33.8344C221.999 36.7727 219.602 39.1545 216.645 39.1545H182.207C181.32 39.1545 180.659 39.9711 180.846 40.8317C181.596 44.2855 183.195 47.1134 185.636 49.3155C188.463 51.8661 192.042 53.1413 196.374 53.1413C201.178 53.1413 205.229 51.9007 208.527 49.418C210.773 47.7266 213.935 47.9788 215.813 50.0675L217.472 51.9133C219.399 54.0587 219.291 57.369 217.163 59.3174C215.131 61.1774 212.751 62.7349 210.029 63.9896C205.578 66.042 200.645 67.0682 195.231 67.0682V67.0714ZM193.245 13.9285C189.795 13.9285 186.999 15.0902 184.854 17.4122C182.708 19.7341 181.335 23.057 180.733 27.3793H204.915V25.9984C204.834 22.1553 203.792 19.184 201.787 17.0827C199.781 14.9815 196.933 13.93 193.245 13.93V13.9285Z"
            fill="grey"
          ></path>
          <path
            d="M270.517 11.6886C270.472 14.6553 267.858 17.004 264.712 16.9284C264.412 16.9205 264.119 16.9173 263.833 16.9173C261.298 16.9173 259.082 17.2137 257.185 17.8048C252.99 19.1132 250.197 22.8585 250.197 27.0232V60.5565C250.197 63.4948 247.67 65.8766 244.552 65.8766H237.509C234.391 65.8766 231.864 63.4948 231.864 60.5565V5.20833C231.864 2.99201 233.771 1.19657 236.121 1.19657H245.178C247.427 1.19657 249.287 2.84541 249.428 4.96085L249.531 6.54664C249.58 7.27648 250.573 7.55076 251.027 6.95806C254.568 2.32049 259.217 0.00170898 264.972 0.00170898C265.003 0.00170898 265.033 0.00170898 265.064 0.00170898C268.175 0.0143196 270.656 2.46552 270.611 5.39907L270.515 11.6902L270.517 11.6886Z"
            fill="grey"
          ></path>
          <path
            d="M312.047 48.0009C312.047 45.8886 310.994 44.2256 308.889 43.0102C306.784 41.7949 303.405 40.7088 298.753 39.7519C283.273 36.5236 275.534 29.9881 275.534 20.1455C275.534 14.4061 277.929 9.61563 282.723 5.76937C287.514 1.92312 293.78 0 301.521 0C309.782 0 316.388 1.93416 321.341 5.79775C324.15 7.99043 326.163 10.5567 327.379 13.4934C328.832 17.0039 326.256 20.8612 322.435 20.8612H315.617C313.449 20.8612 311.573 19.485 310.784 17.4768C310.383 16.4553 309.782 15.5411 308.981 14.734C307.377 13.1198 304.869 12.3127 301.462 12.3127C298.535 12.3127 296.269 12.9701 294.665 14.2847C293.061 15.601 292.259 17.2734 292.259 19.3069C292.259 21.219 293.171 22.7638 294.997 23.9398C296.821 25.1157 299.898 26.1324 304.23 26.9884C308.56 27.8459 312.209 28.8106 315.178 29.8873C324.359 33.2354 328.953 39.0331 328.953 47.2821C328.953 53.1807 326.405 57.9523 321.314 61.5983C316.22 65.2444 309.644 67.0682 301.583 67.0682C296.129 67.0682 291.286 66.1019 287.056 64.1693C282.824 62.2367 279.507 59.5869 277.101 56.2183C276.29 55.0849 275.618 53.92 275.08 52.7252C273.513 49.2383 276.157 45.3085 280.001 45.3085H285.671C287.871 45.3085 289.867 46.6389 290.65 48.6803C291.22 50.162 292.137 51.3884 293.403 52.361C295.528 53.9957 298.375 54.8122 301.944 54.8122C305.272 54.8122 307.788 54.1848 309.493 52.9301C311.197 51.6753 312.05 50.0312 312.05 47.9977L312.047 48.0009Z"
            fill="grey"
          ></path>
          <path
            d="M370.097 67.0714C360.551 67.0714 352.782 64.163 346.787 58.3432C340.791 52.525 337.795 44.7741 337.795 35.0891V33.4151C337.795 26.9206 339.059 21.1118 341.584 15.9903C344.111 10.8704 347.69 6.92483 352.322 4.15364C356.953 1.38402 362.237 0 368.173 0C377.074 0 384.082 2.79011 389.195 8.36875C394.307 13.949 396.864 21.859 396.864 32.1004V33.8344C396.864 36.7727 394.467 39.1545 391.511 39.1545H357.072C356.186 39.1545 355.524 39.9711 355.711 40.8317C356.462 44.2855 358.06 47.1134 360.502 49.3155C363.328 51.8661 366.907 53.1413 371.239 53.1413C376.043 53.1413 380.095 51.9007 383.392 49.418C385.638 47.7266 388.8 47.9788 390.678 50.0675L392.337 51.9133C394.264 54.0587 394.156 57.369 392.028 59.3174C389.996 61.1774 387.616 62.7349 384.894 63.9896C380.444 66.042 375.51 67.0682 370.097 67.0682V67.0714ZM368.111 13.9285C364.661 13.9285 361.864 15.0902 359.72 17.4122C357.573 19.7341 356.2 23.057 355.599 27.3793H379.781V25.9984C379.7 22.1553 378.657 19.184 376.653 17.0827C374.646 14.9815 371.799 13.93 368.111 13.93V13.9285Z"
            fill="grey"
          ></path>
          <path
            d="M38.0481 4.82927C38.0481 2.16214 40.018 0 42.4481 0H51.2391C53.6692 0 55.6391 2.16214 55.6391 4.82927V40.1401C55.6391 48.8912 53.2343 55.6657 48.4248 60.4636C43.6153 65.2277 36.7304 67.6098 27.7701 67.6098C18.8099 67.6098 11.925 65.2953 7.11548 60.6663C2.37183 56.0036 3.8147e-06 49.2967 3.8147e-06 40.5456V4.82927C3.8147e-06 2.16213 1.96995 0 4.4 0H13.2405C15.6705 0 17.6405 2.16214 17.6405 4.82927V39.1265C17.6405 43.7892 18.4805 47.2018 20.1605 49.3642C21.8735 51.5267 24.4759 52.6079 27.9678 52.6079C31.4596 52.6079 34.0127 51.5436 35.6268 49.4149C37.241 47.2863 38.0481 43.8399 38.0481 39.0758V4.82927Z"
            fill="url(#paint0_linear_501_142)"
          ></path>
          <path
            d="M86.9 61.8682C86.9 64.5353 84.9301 66.6975 82.5 66.6975H73.6595C71.2295 66.6975 69.2595 64.5353 69.2595 61.8682V4.82927C69.2595 2.16214 71.2295 0 73.6595 0H82.5C84.9301 0 86.9 2.16214 86.9 4.82927V61.8682Z"
            fill="url(#paint1_linear_501_142)"
          ></path>
          <path
            d="M2.86102e-06 83.2195C2.86102e-06 80.5524 1.96995 78.3902 4.4 78.3902H83.6C86.0301 78.3902 88 80.5524 88 83.2195V89.1707C88 91.8379 86.0301 94 83.6 94H4.4C1.96995 94 0 91.8379 0 89.1707L2.86102e-06 83.2195Z"
            fill="url(#paint2_linear_501_142)"
          ></path>
          <defs>
            <linearGradient
              id="paint0_linear_501_142"
              x1="0"
              y1="0"
              x2="96.1684"
              y2="87.6201"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#BF66FF"></stop>
              <stop offset="0.510417" stop-color="#6248FF"></stop>
              <stop offset="1" stop-color="#00DDEB"></stop>
            </linearGradient>
            <linearGradient
              id="paint1_linear_501_142"
              x1="0"
              y1="0"
              x2="96.1684"
              y2="87.6201"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#BF66FF"></stop>
              <stop offset="0.510417" stop-color="#6248FF"></stop>
              <stop offset="1" stop-color="#00DDEB"></stop>
            </linearGradient>
            <linearGradient
              id="paint2_linear_501_142"
              x1="0"
              y1="0"
              x2="96.1684"
              y2="87.6201"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#BF66FF"></stop>
              <stop offset="0.510417" stop-color="#6248FF"></stop>
              <stop offset="1" stop-color="#00DDEB"></stop>
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div class="mt-5">
        <label
          for="login"
          class="font-semibold text-sm text-gray-600 pb-1 block"
          >E-mail</label
        >
        <input
          id="login"
          type="text"
          class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full"
        />
        <label
          for="password"
          class="font-semibold text-sm text-gray-600 pb-1 block"
          >Password</label
        >
        <input
          id="password"
          type="password"
          class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full"
        />
      </div>
      <div class="text-right mb-4">
        <a
          href="#"
          class="text-xs font-display font-semibold text-gray-500 hover:text-gray-600 cursor-pointer"
        >
          Forgot Password?
        </a>
      </div>
      <div class="flex justify-center w-full items-center">
        <div>
          <button
            class="flex items-center justify-center py-2 px-20 bg-white hover:bg-gray-200 focus:ring-blue-500 focus:ring-offset-blue-200 text-gray-700 w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              x="0px"
              y="0px"
              width="25"
              height="25"
              viewBox="0 0 24 24"
            >
              <path
                fill="#F44336"
                d="M12,5c1.6167603,0,3.1012573,0.5535278,4.2863159,1.4740601l3.637146-3.4699707 C17.8087769,1.1399536,15.0406494,0,12,0C7.392395,0,3.3966675,2.5999146,1.3858032,6.4098511l4.0444336,3.1929321 C6.4099731,6.9193726,8.977478,5,12,5z"
              ></path>
              <path
                fill="#2196F3"
                d="M23.8960571,13.5018311C23.9585571,13.0101929,24,12.508667,24,12 c0-0.8578491-0.093689-1.6931763-0.2647705-2.5H12v5h6.4862061c-0.5247192,1.3637695-1.4589844,2.5177612-2.6481934,3.319458 l4.0594482,3.204834C22.0493774,19.135437,23.5219727,16.4903564,23.8960571,13.5018311z"
              ></path>
              <path
                fill="#FFC107"
                d="M5,12c0-0.8434448,0.1568604-1.6483765,0.4302368-2.3972168L1.3858032,6.4098511 C0.5043335,8.0800171,0,9.9801636,0,12c0,1.9972534,0.4950562,3.8763428,1.3582153,5.532959l4.0495605-3.1970215 C5.1484375,13.6044312,5,12.8204346,5,12z"
              ></path>
              <path
                fill="#00B060"
                d="M12,19c-3.0455322,0-5.6295776-1.9484863-6.5922241-4.6640625L1.3582153,17.532959 C3.3592529,21.3734741,7.369812,24,12,24c3.027771,0,5.7887573-1.1248169,7.8974609-2.975708l-4.0594482-3.204834 C14.7412109,18.5588989,13.4284058,19,12,19z"
              ></path>
              <path
                d="M12,23.75c-3.5316772,0-6.7072754-1.4571533-8.9524536-3.7786865C5.2453613,22.4378052,8.4364624,24,12,24 c3.5305786,0,6.6952515-1.5313721,8.8881226-3.9592285C18.6495972,22.324646,15.4981079,23.75,12,23.75z"
                opacity=".1"
              ></path>
              <polygon
                points="12,14.25 12,14.5 18.4862061,14.5 18.587492,14.25"
                opacity=".1"
              ></polygon>
              <path
                fill="#E6E6E6"
                d="M23.9944458,12.1470337C23.9952393,12.0977783,24,12.0493774,24,12 c0-0.0139771-0.0021973-0.0274658-0.0022583-0.0414429C23.9970703,12.0215454,23.9938965,12.0838013,23.9944458,12.1470337z"
              ></path>
              <path
                fill="#FFF"
                d="M12,9.5v0.25h11.7855721c-0.0157471-0.0825195-0.0329475-0.1680908-0.0503426-0.25H12z"
                opacity=".2"
              ></path>
              <linearGradient
                id="LxT-gk5MfRc1Gl_4XsNKba_xoyhGXWmHnqX_gr1"
                x1="0"
                x2="24"
                y1="12"
                y2="12"
                gradientUnits="userSpaceOnUse"
              >
                <stop offset="0" stop-color="#fff" stop-opacity=".2"></stop>
                <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
              </linearGradient>
              <path
                fill="url(#LxT-gk5MfRc1Gl_4XsNKba_xoyhGXWmHnqX_gr1)"
                d="M23.7352295,9.5H12v5h6.4862061C17.4775391,17.121582,14.9771729,19,12,19 c-3.8659668,0-7-3.1340332-7-7c0-3.8660278,3.1340332-7,7-7c1.4018555,0,2.6939087,0.4306641,3.7885132,1.140686 c0.1675415,0.1088867,0.3403931,0.2111206,0.4978027,0.333374l3.637146-3.4699707L19.8414307,2.940979 C17.7369385,1.1170654,15.00354,0,12,0C5.3725586,0,0,5.3725586,0,12c0,6.6273804,5.3725586,12,12,12 c6.1176758,0,11.1554565-4.5812378,11.8960571-10.4981689C23.9585571,13.0101929,24,12.508667,24,12 C24,11.1421509,23.906311,10.3068237,23.7352295,9.5z"
              ></path>
              <path
                d="M15.7885132,5.890686C14.6939087,5.1806641,13.4018555,4.75,12,4.75c-3.8659668,0-7,3.1339722-7,7 c0,0.0421753,0.0005674,0.0751343,0.0012999,0.1171875C5.0687437,8.0595093,8.1762085,5,12,5 c1.4018555,0,2.6939087,0.4306641,3.7885132,1.140686c0.1675415,0.1088867,0.3403931,0.2111206,0.4978027,0.333374 l3.637146-3.4699707l-3.637146,3.2199707C16.1289062,6.1018066,15.9560547,5.9995728,15.7885132,5.890686z"
                opacity=".1"
              ></path>
              <path
                fill="#FFF"
                d="M12,0.25c2.9750366,0,5.6829224,1.0983887,7.7792969,2.8916016l0.144165-0.1375122 l-0.110014-0.0958166C17.7089558,1.0843592,15.00354,0,12,0C5.3725586,0,0,5.3725586,0,12 c0,0.0421753,0.0058594,0.0828857,0.0062866,0.125C0.0740356,5.5558472,5.4147339,0.25,12,0.25z"
                opacity=".2"
              ></path>
            </svg>
            <span class="ml-2">Sign in with Google</span>
          </button>
          <button
            class="flex items-center justify-center py-2 px-20 bg-white hover:bg-gray-200 focus:ring-blue-500 focus:ring-offset-blue-200 text-gray-700 w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg mt-4"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              x="0px"
              y="0px"
              width="30"
              height="30"
              viewBox="0 0 30 30"
            >
              <path
                d="M25.565,9.785c-0.123,0.077-3.051,1.702-3.051,5.305c0.138,4.109,3.695,5.55,3.756,5.55 c-0.061,0.077-0.537,1.963-1.947,3.94C23.204,26.283,21.962,28,20.076,28c-1.794,0-2.438-1.135-4.508-1.135 c-2.223,0-2.852,1.135-4.554,1.135c-1.886,0-3.22-1.809-4.4-3.496c-1.533-2.208-2.836-5.673-2.882-9 c-0.031-1.763,0.307-3.496,1.165-4.968c1.211-2.055,3.373-3.45,5.734-3.496c1.809-0.061,3.419,1.242,4.523,1.242 c1.058,0,3.036-1.242,5.274-1.242C21.394,7.041,23.97,7.332,25.565,9.785z M15.001,6.688c-0.322-1.61,0.567-3.22,1.395-4.247 c1.058-1.242,2.729-2.085,4.17-2.085c0.092,1.61-0.491,3.189-1.533,4.339C18.098,5.937,16.488,6.872,15.001,6.688z"
              ></path>
            </svg>
            <span class="ml-2">Sign in with Apple</span>
          </button>
        </div>
      </div>
      <div class="mt-5">
        <button
          type="submit"
          class="py-2 px-4 bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
        >
          Log in
        </button>
      </div>
      <div class="flex items-center justify-between mt-4">
        <span class="w-1/5 border-b dark:border-gray-600 md:w-1/4"></span>
        <a
          href="#"
          class="text-xs text-gray-500 uppercase dark:text-gray-400 hover:underline"
          >or sign up</a
        >
        <span class="w-1/5 border-b dark:border-gray-400 md:w-1/4"></span>
      </div>
    </div>
  </div>
</div>


    

================================================
FILE: Forms/themrsami_proud-fireant-91.html
================================================
<!-- From Uiverse.io by themrsami - Tags: simple, material design, black, form, dark, tailwind, tailwindbutton -->
<div class="flex flex-col items-center justify-center h-screen dark">
  <div class="w-full max-w-md bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-200 mb-4">Contact Form</h2>

    <form class="flex flex-wrap">
      <input
        type="text"
        class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150 w-full md:w-[48%] mr-[2%]"
        placeholder="Full Name"
      />
      <input
        type="email"
        class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150 w-full md:w-[48%] ml-[2%]"
        placeholder="Email"
      />
      <input
        type="number"
        class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150 w-full md:w-[48%] mr-[2%]"
        placeholder="Phone Number"
      />
      <input
        type="text"
        class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150 w-full md:w-[48%] ml-[2%]"
        placeholder="Company Name"
      />
      <input
        type="text"
        class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150 w-full md:w-[48%] mr-[2%]"
        placeholder="Job Title"
      />
      <input
        type="date"
        class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150 w-full md:w-[48%] ml-[2%]"
        placeholder="Date of Birth"
      />
      <textarea
        name="message"
        class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-auto md:mb-auto md:w-full md:h-auto md:min-h-[100px] md:max-h-[100px] md:flex-grow md:flex-shrink md:flex-auto focus:bg-gray-md:focus:outline-none:focus:ring-blue-md:focus:border-transparent transition ease-in-out duration-fastest"
        placeholder="Message"
      ></textarea>

      <button
        type="submit"
        class="bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-bold py-2 px-4 rounded-md mt-4 hover:bg-indigo-600 hover:to-blue-600 transition ease-in-out duration-150"
      >
        Submit
      </button>
    </form>
  </div>
</div>




================================================
FILE: Forms/themrsami_smart-wasp-13.html
================================================
<!-- From Uiverse.io by themrsami - Tags: purple, white, form, light, tailwind, tailwindcss, contact form -->

  <div class="w-full max-w-[300px] bg-white rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">Contact Form</h2>

    <form class="flex flex-col">
      <input type="text" class="bg-gray-100 text-gray-800 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="Full Name">
      <input type="email" class="bg-gray-100 text-gray-800 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="Email">
      <input type="number" class="bg-gray-100 text-gray-800 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="Phone Number">
      <input type="text" class="bg-gray-100 text-gray-800 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="Company Name">
      <input type="text" class="bg-gray-100 text-gray-800 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="Job Title">
      <input type="date" class="bg-gray-100 text-gray-800 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="Date of Birth">
      <textarea name="message" class="bg-gray-100 text-gray-800 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" placeholder="Message"></textarea>

      <button type="submit" class="bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-bold py-2 px-4 rounded-md mt-4 hover:bg-indigo-600 hover:to-blue-600 transition ease-in-out duration-150">Submit</button>
    </form>
  </div>




================================================
FILE: Forms/themrsami_strong-rat-23.html
================================================
<!-- From Uiverse.io by themrsami - Tags: form, tailwind, tailwindcss, themrsami, darkversion, dream form -->
<div class="mt-4 flex flex-col bg-gray-900 rounded-lg p-4">
  <h2 class="text-white font-bold text-2xl">AI Story Maker Dream Form</h2>

  <div class="mt-4">
    <label class="text-white" for="title">Title</label>
    <input placeholder="Enter a title for your dream" class="w-full bg-gray-800 rounded-md border-gray-700 text-white px-2 py-1" type="text">
  </div>

  <div class="mt-4">
    <label class="text-white" for="description">Description</label>
    <textarea placeholder="Describe your dream in detail" class="w-full bg-gray-800 rounded-md border-gray-700 text-white px-2 py-1" id="description"></textarea>
  </div>

  <div class="mt-4 flex flex-row space-x-2">
    <div class="flex-1">
      <label class="text-white" for="emotions">Emotions</label>
      <input placeholder="What emotions did you feel during your dream?" class="w-full bg-gray-800 rounded-md border-gray-700 text-white px-2 py-1" id="emotions" type="text">
    </div>

    <div class="flex-1">
      <label class="text-white" for="symbols">Symbols</label>
      <input placeholder="Did you see any symbols in your dream?" class="w-full bg-gray-800 rounded-md border-gray-700 text-white px-2 py-1" id="symbols" type="text">
    </div>
  </div>

  <div class="mt-4 flex flex-row space-x-2">
    <div class="flex-1">
      <label class="text-white" for="themes">Themes</label>
      <input placeholder="What themes do you think your dream might be about?" class="w-full bg-gray-800 rounded-md border-gray-700 text-white px-2 py-1" id="themes" type="text">
    </div>
  </div>

  <div class="mt-4 flex justify-end">
    <button class="bg-teal-500 text-white rounded-md px-4 py-1 hover:bg-teal-600 hover:text-white" id="generate-button" type="button">Generate</button>
  </div>

  <div class="mt-4">
    <textarea placeholder="Your AI-generated story will appear here" class="w-full bg-gray-800 rounded-md border-gray-700 text-white px-2 py-1 h-48" id="story-output"></textarea>
  </div>
</div>




================================================
FILE: Forms/themrsami_stupid-stingray-40.html
================================================
<!-- From Uiverse.io by themrsami - Tags: form, tailwind, tailwindcss, themrsami, shipping form, light version -->
<div class="mt-4 flex flex-col bg-gray-100 rounded-lg p-4 shadow-sm">
  <h2 class="text-black font-bold text-lg">Shipping Label Address Form</h2>

  <div class="mt-4">
    <label class="text-black" for="name">Name</label>
    <input placeholder="Your name" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" type="text">
  </div>

  <div class="mt-4">
    <label class="text-black" for="address">Address</label>
    <textarea placeholder="Your address" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="address"></textarea>
  </div>

  <div class="mt-4 flex flex-row space-x-2">
    <div class="flex-1">
      <label class="text-black" for="city">City</label>
      <input placeholder="Your city" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="city" type="text">
    </div>

    <div class="flex-1">
      <label class="text-black" for="state">State</label>
      <input placeholder="Your state" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="state" type="text">
    </div>
  </div>

  <div class="mt-4 flex flex-row space-x-2">
    <div class="flex-1">
      <label class="text-black" for="zip">ZIP</label>
      <input placeholder="Your ZIP code" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="zip" type="text">
    </div>

    <div class="flex-1">
      <label class="text-black" for="country">Country</label>
      <select class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="country">
        <option value="">Select a country</option>

        <optgroup label="Africa">
          <option value="AF">Afghanistan</option>
          <option value="DZ">Algeria</option>
          <option value="AO">Angola</option>
          ...
          <option value="ZW">Zimbabwe</option>
        </optgroup>

        <optgroup label="Asia">
          <option value="AM">Armenia</option>
          <option value="AZ">Azerbaijan</option>
          <option value="BH">Bahrain</option>
          ...
          <option value="YE">Yemen</option>
        </optgroup>

        <optgroup label="South America">
          <option value="AR">Argentina</option>
          <option value="BO">Bolivia</option>
          <option value="BR">Brazil</option>
          ...
          <option value="VE">Venezuela</option>
        </optgroup>

        ...
      </select>
    </div>
  </div>

  <div class="mt-4 flex justify-end">
    <button class="bg-white text-black rounded-md px-4 py-1 hover:bg-gray-200 hover:text-gray-900" type="submit">Submit</button>
  </div>
</div>




================================================
FILE: Forms/themrsami_tame-bear-4.html
================================================
<!-- From Uiverse.io by themrsami - Tags: form, tailwind, tailwindcss, themrsami, shipping form, address form -->
<div class="mt-4 flex flex-col bg-gray-900 rounded-lg p-4 shadow-sm">
    <h2 class="text-white font-bold text-lg">Shipping Label Address Form</h2>

    <div class="mt-4">
        <label class="text-white" for="name">Name</label>
        <input placeholder="Your name" class="w-full bg-gray-800 rounded-md border-gray-700 text-white px-2 py-1" type="text">
    </div>

    <div class="mt-4">
        <label class="text-white" for="address">Address</label>
        <textarea placeholder="Your address" class="w-full bg-gray-800 rounded-md border-gray-700 text-white px-2 py-1" id="address"></textarea>
    </div>

    <div class="mt-4 flex flex-row space-x-2">
        <div class="flex-1">
            <label class="text-white" for="city">City</label>
            <input placeholder="Your city" class="w-full bg-gray-800 rounded-md border-gray-700 text-white px-2 py-1" id="city" type="text">
        </div>

        <div class="flex-1">
            <label class="text-white" for="state">State</label>
            <input placeholder="Your state" class="w-full bg-gray-800 rounded-md border-gray-700 text-white px-2 py-1" id="state" type="text">
        </div>
    </div>

    <div class="mt-4 flex flex-row space-x-2">
        <div class="flex-1">
            <label class="text-white" for="zip">ZIP</label>
            <input placeholder="Your ZIP code" class="w-full bg-gray-800 rounded-md border-gray-700 text-white px-2 py-1" id="zip" type="text">
        </div>

        <div class="flex flex-row space-x-2">
            <div class="flex-1">
                <label class="text-white" for="country">Country</label>
                <select class="w-full bg-gray-800 rounded-md border-gray-700 text-white px-2 py-1" id="country">
            <option value="">Select a country</option>

            <optgroup label="Africa">
                <option value="AF">Afghanistan</option>
                <option value="DZ">Algeria</option>
                <option value="AO">Angola</option>
                ...
                <option value="ZW">Zimbabwe</option>
            </optgroup>

            <optgroup label="Asia">
                <option value="AM">Armenia</option>
                <option value="AZ">Azerbaijan</option>
                <option value="BH">Bahrain</option>
                ...
                <option value="YE">Yemen</option>
            </optgroup>

            <optgroup label="South America">
                <option value="AR">Argentina</option>
                <option value="BO">Bolivia</option>
                <option value="BR">Brazil</option>
                ...
                <option value="VE">Venezuela</option>
            </optgroup>

            ...
            </select>
            </div>
        </div>
    </div>
    <div class="mt-4 flex justify-end">
        <button class="bg-white text-black rounded-md px-4 py-1 hover:bg-blue-500 hover:text-white transition-all duration-200" type="submit">Submit</button>
    </div>
</div>



================================================
FILE: Forms/themrsami_tasty-bat-81.html
================================================
<!-- From Uiverse.io by themrsami - Tags: material design, form, tailwind, tailwindcss, themrsami, Dream form -->
<div class="mt-4 flex flex-col bg-gray-100 rounded-lg p-4 shadow-sm">
  <h2 class="ai-story-maker-dream-form text-black font-bold text-2xl">AI Story Maker Dream Form</h2>

  <div class="mt-4">
    <label class="text-black" for="title">Title</label>
    <input placeholder="Enter a title for your dream" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" type="text">
  </div>

  <div class="mt-4">
    <label class="text-black" for="description">Description</label>
    <textarea placeholder="Describe your dream in detail" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="description"></textarea>
  </div>

  <div class="mt-4 flex flex-row space-x-2">
    <div class="flex-1">
      <label class="text-black" for="emotions">Emotions</label>
      <input placeholder="What emotions did you feel during your dream?" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="emotions" type="text">
    </div>

    <div class="flex-1">
      <label class="text-black" for="symbols">Symbols</label>
      <input placeholder="Did you see any symbols in your dream?" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="symbols" type="text">
    </div>
  </div>

  <div class="mt-4 flex flex-row space-x-2">
    <div class="flex-1">
      <label class="text-black" for="themes">Themes</label>
      <input placeholder="What themes do you think your dream might be about?" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="themes" type="text">
    </div>
  </div>

  <div class="mt-4 flex justify-end">
    <button class="bg-white text-black rounded-md px-4 py-1 hover:bg-gray-200 hover:text-gray-900" id="generate-button" type="button">Generate</button>
  </div>

  <div class="mt-4">
    <textarea placeholder="Your AI-generated story will appear here" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1 h-48" id="story-output"></textarea>
  </div>
</div>




================================================
FILE: Forms/themrsami_terrible-yak-72.html
================================================
<!-- From Uiverse.io by themrsami - Tags: purple, white, form, light, tailwind, tailwindcss, feedback form, product feedback form -->
<div class="flex flex-col items-center justify-center h-screen light">
  <div class="w-full max-w-md bg-white rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">Product Feedback Form</h2>

    <form class="flex flex-col">
      <input placeholder="Full Name" class="bg-gray-100 text-gray-800 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="text">
      <input placeholder="Email" class="bg-gray-100 text-gray-800 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="email">
      <select class="bg-gray-100 text-gray-800 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" id="product">
        <option value="product-1">Product 1</option>
        <option value="product-2">Product 2</option>
        <option value="product-3">Product 3</option>
      </select>
      <input placeholder="Rating (1-5)" class="bg-gray-100 text-gray-800 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="number">
      <textarea placeholder="Feedback" class="bg-gray-100 text-gray-800 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" name="feedback"></textarea>

      <button class="bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-bold py-2 px-4 rounded-md mt-4 hover:bg-indigo-600 hover:to-blue-600 transition ease-in-out duration-150" type="submit">Submit</button>
    </form>
  </div>
</div>




================================================
FILE: Forms/themrsami_wicked-insect-95.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: yellow, form, light, tailwindcss, contactus -->
<div class="container px-4 mx-auto">
  <div class="mx-auto">
    <div class="max-w-md mx-auto px-8 py-6 bg-gray-100 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold text-gray-800 mb-4">Contact Us</h2>
      <form>
        <div class="mb-4">
          <label class="block text-gray-800 mb-1" for="name">Your Name</label>
          <input
            class="w-full px-4 py-2 bg-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
            placeholder="Enter your name"
            type="text"
          />
        </div>
        <div class="mb-4">
          <label class="block text-gray-800 mb-1" for="email">Your Email</label>
          <input
            class="w-full px-4 py-2 bg-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
            placeholder="Enter your email"
            name="email"
            id="email"
            type="email"
          />
        </div>
        <div class="mb-4">
          <label class="block text-gray-800 mb-1" for="message"
            >Your Message</label
          >
          <textarea
            class="w-full px-4 py-2 bg-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
            rows="4"
            placeholder="Enter your message"
            name="message"
            id="message"
          ></textarea>
        </div>
        <button
          class="w-full bg-yellow-300 text-gray-800 py-2 px-4 rounded-lg hover:bg-yellow-400 transition duration-300"
          type="submit"
        >
          Send Message
        </button>
      </form>
    </div>
  </div>
</div>


    

================================================
FILE: Forms/vinodjangid07_dull-dragonfly-5.html
================================================
<form class="file-upload-form">
  <label for="file" class="file-upload-label">
    <div class="file-upload-design">
      <svg viewBox="0 0 640 512" height="1em">
        <path
          d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z"
        ></path>
      </svg>
      <p>Drag and Drop</p>
      <p>or</p>
      <span class="browse-button">Browse file</span>
    </div>
    <input id="file" type="file" />
  </label>
</form>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: form, image, file upload, file, browse */
.file-upload-form {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-upload-label input {
  display: none;
}
.file-upload-label svg {
  height: 50px;
  fill: rgb(82, 82, 82);
  margin-bottom: 20px;
}
.file-upload-label {
  cursor: pointer;
  background-color: #ddd;
  padding: 30px 70px;
  border-radius: 40px;
  border: 2px dashed rgb(82, 82, 82);
  box-shadow: 0px 0px 200px -50px rgba(0, 0, 0, 0.719);
}
.file-upload-design {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.browse-button {
  background-color: rgb(82, 82, 82);
  padding: 5px 15px;
  border-radius: 10px;
  color: white;
  transition: all 0.3s;
}
.browse-button:hover {
  background-color: rgb(14, 14, 14);
}

</style>
    

================================================
FILE: Forms/vinodjangid07_horrible-warthog-14.html
================================================
<form action="" class="form_main">
    <p class="heading">Login</p>
    <div class="inputContainer">
        <svg class="inputIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#2e2e2e" viewBox="0 0 16 16">
        <path d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z"></path>
        </svg>
    <input type="text" class="inputField" id="username" placeholder="Username">
    </div>
    
<div class="inputContainer">
    <svg class="inputIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#2e2e2e" viewBox="0 0 16 16">
    <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"></path>
    </svg>
    <input type="password" class="inputField" id="password" placeholder="Password">
</div>
              
           
<button id="button">Submit</button>
    <a class="forgotLink" href="#">Forgot your password?</a>
</form>

<style>
/* From Uiverse.io by vinodjangid07 - Tags: purple, form, log in */
.form_main {
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  padding: 30px 30px 30px 30px;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.062);
  position: relative;
  overflow: hidden;
}

.form_main::before {
  position: absolute;
  content: "";
  width: 300px;
  height: 300px;
  background-color: rgb(209, 193, 255);
  transform: rotate(45deg);
  left: -180px;
  bottom: 30px;
  z-index: 1;
  border-radius: 30px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.082);
}

.heading {
  font-size: 2em;
  color: #2e2e2e;
  font-weight: 700;
  margin: 5px 0 10px 0;
  z-index: 2;
}

.inputContainer {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.inputIcon {
  position: absolute;
  left: 3px;
}

.inputField {
  width: 100%;
  height: 30px;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid rgb(173, 173, 173);
  margin: 10px 0;
  color: black;
  font-size: .8em;
  font-weight: 500;
  box-sizing: border-box;
  padding-left: 30px;
}

.inputField:focus {
  outline: none;
  border-bottom: 2px solid rgb(199, 114, 255);
}

.inputField::placeholder {
  color: rgb(80, 80, 80);
  font-size: 1em;
  font-weight: 500;
}

#button {
  z-index: 2;
  position: relative;
  width: 100%;
  border: none;
  background-color: rgb(162, 104, 255);
  height: 30px;
  color: white;
  font-size: .8em;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 10px;
  cursor: pointer;
}

#button:hover {
  background-color: rgb(126, 84, 255);
}

.forgotLink {
  z-index: 2;
  font-size: .7em;
  font-weight: 500;
  color: rgb(44, 24, 128);
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 20px;
}


</style>


================================================
FILE: Forms/vinodjangid07_lazy-lionfish-15.html
================================================
<form class="discountForm">
 
  <span class="DiscountHeading">TAKE 10% OFF.</span>
  <p class="DiscountSubheading">Here is your discount! The promo code will be sent to your email.</p>
  <div class="inputContainer">
    <input placeholder="Enter your email" type="email" name="email" id="email-address">
    <button type="submit" class="submitButton">Get it!</button>
  </div>
     <button class="exitBtn">×</button>
</form>



<style>
/* From Uiverse.io by vinodjangid07 - Tags: form, discount */
.discountForm {
  width: 250px;
  height: 300px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  gap: 20px;
  position: relative;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.082);
}

.DiscountHeading {
  font-size: 1.5em;
  color: rgb(15, 15, 15);
  font-weight: 700;
}

.DiscountSubheading {
  font-size: 0.8em;
  color: black;
  text-align: center;
}

.inputContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#email-address {
  height: 30px;
  width: 100%;
  border: 1px solid rgb(228, 228, 228);
  background-color: white;
  padding: 0px 10px;
  outline: none;
  text-align: center;
}

.submitButton {
  width: 100%;
  height: 30px;
  border: none;
  background-color: rgb(15, 15, 15);
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.submitButton:hover {
  background-color: rgb(36, 36, 36);
}

.exitBtn {
  position: absolute;
  top: 5px;
  right: 5px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.171);
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  border: none;
  color: black;
  font-size: 1.1em;
  cursor: pointer;
}
</style>


================================================
FILE: Forms/vinodjangid07_ordinary-stingray-51.html
================================================
<form class="otp-Form">
 
  <span class="mainHeading">Enter OTP</span>
  <p class="otpSubheading">We have sent a verification code to your mobile number</p>
  <div class="inputContainer">
   <input required="required" maxlength="1" type="text" class="otp-input" id="otp-input1">
   <input required="required" maxlength="1" type="text" class="otp-input" id="otp-input2">
   <input required="required" maxlength="1" type="text" class="otp-input" id="otp-input3">
   <input required="required" maxlength="1" type="text" class="otp-input" id="otp-input4"> 
   
  </div>
   <button class="verifyButton" type="submit">Verify</button>
     <button class="exitBtn">×</button>
     <p class="resendNote">Didn't receive the code? <button class="resendBtn">Resend Code</button></p>
     
</form>



<style>
/* From Uiverse.io by vinodjangid07 - Tags: button, OTP, form, input */
.otp-Form {
  width: 230px;
  height: 300px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  gap: 20px;
  position: relative;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.082);
  border-radius: 15px;
}

.mainHeading {
  font-size: 1.1em;
  color: rgb(15, 15, 15);
  font-weight: 700;
}

.otpSubheading {
  font-size: 0.7em;
  color: black;
  line-height: 17px;
  text-align: center;
}

.inputContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.otp-input {
  background-color: rgb(228, 228, 228);
  width: 30px;
  height: 30px;
  text-align: center;
  border: none;
  border-radius: 7px;
  caret-color: rgb(127, 129, 255);
  color: rgb(44, 44, 44);
  outline: none;
  font-weight: 600;
}

.otp-input:focus,
.otp-input:valid {
  background-color: rgba(127, 129, 255, 0.199);
  transition-duration: .3s;
}

.verifyButton {
  width: 100%;
  height: 30px;
  border: none;
  background-color: rgb(127, 129, 255);
  color: white;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  transition-duration: .2s;
}

.verifyButton:hover {
  background-color: rgb(144, 145, 255);
  transition-duration: .2s;
}

.exitBtn {
  position: absolute;
  top: 5px;
  right: 5px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.171);
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  border: none;
  color: black;
  font-size: 1.1em;
  cursor: pointer;
}

.resendNote {
  font-size: 0.7em;
  color: black;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.resendBtn {
  background-color: transparent;
  border: none;
  color: rgb(127, 129, 255);
  cursor: pointer;
  font-size: 1.1em;
  font-weight: 700;
}
</style>


================================================
FILE: Forms/vinodjangid07_splendid-bat-9.html
================================================
<form class="form_main" action="">
    <p class="heading">Login</p>
    <div class="inputContainer">
        <svg viewBox="0 0 16 16" fill="#2e2e2e" height="16" width="16" xmlns="http://www.w3.org/2000/svg" class="inputIcon">
        <path d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z"></path>
        </svg>
    <input placeholder="Username" id="username" class="inputField" type="text">
    </div>
    
<div class="inputContainer">
    <svg viewBox="0 0 16 16" fill="#2e2e2e" height="16" width="16" xmlns="http://www.w3.org/2000/svg" class="inputIcon">
    <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"></path>
    </svg>
    <input placeholder="Password" id="password" class="inputField" type="password">
</div>
              
           
<button id="button">Submit</button>
    <div class="signupContainer">
        <p>Don't have any account?</p>
        <a href="#">Sign up</a>
    </div>
</form>

<style>
/* From Uiverse.io by vinodjangid07 - Tags: purple, form, login , login form */
.form_main {
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  padding: 30px 30px 30px 30px;
  border-radius: 30px;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.062);
}

.heading {
  font-size: 2.5em;
  color: #2e2e2e;
  font-weight: 700;
  margin: 15px 0 30px 0;
}

.inputContainer {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inputIcon {
  position: absolute;
  left: 10px;
}

.inputField {
  width: 100%;
  height: 40px;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid rgb(173, 173, 173);
  border-radius: 30px;
  margin: 10px 0;
  color: black;
  font-size: .8em;
  font-weight: 500;
  box-sizing: border-box;
  padding-left: 30px;
}

.inputField:focus {
  outline: none;
  border-bottom: 2px solid rgb(199, 114, 255);
}

.inputField::placeholder {
  color: rgb(80, 80, 80);
  font-size: 1em;
  font-weight: 500;
}

#button {
  position: relative;
  width: 100%;
  border: 2px solid #8000ff;
  background-color: #8000ff;
  height: 40px;
  color: white;
  font-size: .8em;
  font-weight: 500;
  letter-spacing: 1px;
  border-radius: 30px;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
}

#button::after {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.253);
  height: 100%;
  width: 150px;
  top: 0;
  left: -200px;
  border-bottom-right-radius: 100px;
  border-top-left-radius: 100px;
  filter: blur(10px);
  transition-duration: .5s;
}

#button:hover::after {
  transform: translateX(600px);
  transition-duration: .5s;
}

.signupContainer {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.signupContainer p {
  font-size: .9em;
  font-weight: 500;
  color: black;
}

.signupContainer a {
  font-size: .7em;
  font-weight: 500;
  background-color: #2e2e2e;
  color: white;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 20px;
}


</style>


================================================
FILE: Forms/vishal2231179_sharp-penguin-54.html
================================================
<form class="form">
  <span class="heading">Sign In</span>

  <span class="Mail">E-Mail</span>
  <input placeholder="Enter E-Mail" type="text" class="input" />
  <span class="Password">Password</span>
  <input placeholder="Enter Password" type="text" class="input" />
  <span class="forgot"><a href="">forgot password?</a></span>
  <button>Submit</button>
</form>

<style>
/* From Uiverse.io by vishal2231179  - Tags:  */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: rgb(241, 241, 130);
  padding: 60px;
  padding-inline: 28px;
  border-radius: 20px;
  box-shadow: 4px 4px rgb(0, 2, 65);
  font-family: cursive;
}

.heading {
  font-size: 25px;
  text-align: center;
  font-weight: 600;
  font-family: cursive;
}

.form button {
  /* align-self: flex-end; */
  padding: 10px;
  border-radius: 10px;
  margin-top: 20px;
  background-color: rgb(241, 241, 130);
  box-shadow: 2px 3px rgb(0, 2, 65);

  color: rgb(0, 0, 0);
  font-size: medium;
  font-weight: 600;
  transition: 400ms;
  font-family: cursive;
}

.form button:hover {
  background-color: rgb(235, 255, 59);
  transition: 400ms;
  cursor: pointer;
}

.input {
  padding: 10px;
  width: 280px;
  border-radius: 10px;
  border-style: double;
  border-color: black;
  font-size: 15px;
  box-shadow: 2px 3px rgb(0, 2, 65);

  font-family: cursive;
}

.forgot,
a {
  padding-top: 10px;
  /* font-weight: 600; */
  color: rgba(0, 0, 0, 0.994);
  font-family: cursive;
  text-decoration: none;
  transition: 400ms;
}
.forgot,
a:hover {
  color: rgba(0, 0, 0, 0.703);
  transition: 400ms;
}

.Mail,
.Password {
  font-size: 16px;
  /* font-weight: 600; */
  font-family: cursive;
}

</style>
    

================================================
FILE: Forms/zanina-yassine_angry-shrimp-34.html
================================================
<div class="modal">
<form class="form">
  <div class="payment--options">
    <button name="paypal" type="button">
      <svg xml:space="preserve" viewBox="0 0 124 33" height="33px" width="124px" y="0px" x="0px" id="Layer_1" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<path d="M46.211,6.749h-6.839c-0.468,0-0.866,0.34-0.939,0.802l-2.766,17.537c-0.055,0.346,0.213,0.658,0.564,0.658  h3.265c0.468,0,0.866-0.34,0.939-0.803l0.746-4.73c0.072-0.463,0.471-0.803,0.938-0.803h2.165c4.505,0,7.105-2.18,7.784-6.5  c0.306-1.89,0.013-3.375-0.872-4.415C50.224,7.353,48.5,6.749,46.211,6.749z M47,13.154c-0.374,2.454-2.249,2.454-4.062,2.454  h-1.032l0.724-4.583c0.043-0.277,0.283-0.481,0.563-0.481h0.473c1.235,0,2.4,0,3.002,0.704C47.027,11.668,47.137,12.292,47,13.154z" fill="#253B80"></path>
<path d="M66.654,13.075h-3.275c-0.279,0-0.52,0.204-0.563,0.481l-0.145,0.916l-0.229-0.332  c-0.709-1.029-2.29-1.373-3.868-1.373c-3.619,0-6.71,2.741-7.312,6.586c-0.313,1.918,0.132,3.752,1.22,5.031  c0.998,1.176,2.426,1.666,4.125,1.666c2.916,0,4.533-1.875,4.533-1.875l-0.146,0.91c-0.055,0.348,0.213,0.66,0.562,0.66h2.95  c0.469,0,0.865-0.34,0.939-0.803l1.77-11.209C67.271,13.388,67.004,13.075,66.654,13.075z M62.089,19.449  c-0.316,1.871-1.801,3.127-3.695,3.127c-0.951,0-1.711-0.305-2.199-0.883c-0.484-0.574-0.668-1.391-0.514-2.301  c0.295-1.855,1.805-3.152,3.67-3.152c0.93,0,1.686,0.309,2.184,0.892C62.034,17.721,62.232,18.543,62.089,19.449z" fill="#253B80"></path>
<path d="M84.096,13.075h-3.291c-0.314,0-0.609,0.156-0.787,0.417l-4.539,6.686l-1.924-6.425  c-0.121-0.402-0.492-0.678-0.912-0.678h-3.234c-0.393,0-0.666,0.384-0.541,0.754l3.625,10.638l-3.408,4.811  c-0.268,0.379,0.002,0.9,0.465,0.9h3.287c0.312,0,0.604-0.152,0.781-0.408L84.564,13.97C84.826,13.592,84.557,13.075,84.096,13.075z" fill="#253B80"></path>
<path d="M94.992,6.749h-6.84c-0.467,0-0.865,0.34-0.938,0.802l-2.766,17.537c-0.055,0.346,0.213,0.658,0.562,0.658  h3.51c0.326,0,0.605-0.238,0.656-0.562l0.785-4.971c0.072-0.463,0.471-0.803,0.938-0.803h2.164c4.506,0,7.105-2.18,7.785-6.5  c0.307-1.89,0.012-3.375-0.873-4.415C99.004,7.353,97.281,6.749,94.992,6.749z M95.781,13.154c-0.373,2.454-2.248,2.454-4.062,2.454  h-1.031l0.725-4.583c0.043-0.277,0.281-0.481,0.562-0.481h0.473c1.234,0,2.4,0,3.002,0.704  C95.809,11.668,95.918,12.292,95.781,13.154z" fill="#179BD7"></path>
<path d="M115.434,13.075h-3.273c-0.281,0-0.52,0.204-0.562,0.481l-0.145,0.916l-0.23-0.332  c-0.709-1.029-2.289-1.373-3.867-1.373c-3.619,0-6.709,2.741-7.311,6.586c-0.312,1.918,0.131,3.752,1.219,5.031  c1,1.176,2.426,1.666,4.125,1.666c2.916,0,4.533-1.875,4.533-1.875l-0.146,0.91c-0.055,0.348,0.213,0.66,0.564,0.66h2.949  c0.467,0,0.865-0.34,0.938-0.803l1.771-11.209C116.053,13.388,115.785,13.075,115.434,13.075z M110.869,19.449  c-0.314,1.871-1.801,3.127-3.695,3.127c-0.949,0-1.711-0.305-2.199-0.883c-0.484-0.574-0.666-1.391-0.514-2.301  c0.297-1.855,1.805-3.152,3.67-3.152c0.93,0,1.686,0.309,2.184,0.892C110.816,17.721,111.014,18.543,110.869,19.449z" fill="#179BD7"></path>
<path d="M119.295,7.23l-2.807,17.858c-0.055,0.346,0.213,0.658,0.562,0.658h2.822c0.469,0,0.867-0.34,0.939-0.803  l2.768-17.536c0.055-0.346-0.213-0.659-0.562-0.659h-3.16C119.578,6.749,119.338,6.953,119.295,7.23z" fill="#179BD7"></path>
<path d="M7.266,29.154l0.523-3.322l-1.165-0.027H1.061L4.927,1.292C4.939,1.218,4.978,1.149,5.035,1.1  c0.057-0.049,0.13-0.076,0.206-0.076h9.38c3.114,0,5.263,0.648,6.385,1.927c0.526,0.6,0.861,1.227,1.023,1.917  c0.17,0.724,0.173,1.589,0.007,2.644l-0.012,0.077v0.676l0.526,0.298c0.443,0.235,0.795,0.504,1.065,0.812  c0.45,0.513,0.741,1.165,0.864,1.938c0.127,0.795,0.085,1.741-0.123,2.812c-0.24,1.232-0.628,2.305-1.152,3.183  c-0.482,0.809-1.096,1.48-1.825,2c-0.696,0.494-1.523,0.869-2.458,1.109c-0.906,0.236-1.939,0.355-3.072,0.355h-0.73  c-0.522,0-1.029,0.188-1.427,0.525c-0.399,0.344-0.663,0.814-0.744,1.328l-0.055,0.299l-0.924,5.855l-0.042,0.215  c-0.011,0.068-0.03,0.102-0.058,0.125c-0.025,0.021-0.061,0.035-0.096,0.035H7.266z" fill="#253B80"></path>
<path d="M23.048,7.667L23.048,7.667L23.048,7.667c-0.028,0.179-0.06,0.362-0.096,0.55  c-1.237,6.351-5.469,8.545-10.874,8.545H9.326c-0.661,0-1.218,0.48-1.321,1.132l0,0l0,0L6.596,26.83l-0.399,2.533  c-0.067,0.428,0.263,0.814,0.695,0.814h4.881c0.578,0,1.069-0.42,1.16-0.99l0.048-0.248l0.919-5.832l0.059-0.32  c0.09-0.572,0.582-0.992,1.16-0.992h0.73c4.729,0,8.431-1.92,9.513-7.476c0.452-2.321,0.218-4.259-0.978-5.622  C24.022,8.286,23.573,7.945,23.048,7.667z" fill="#179BD7"></path>
<path d="M21.754,7.151c-0.189-0.055-0.384-0.105-0.584-0.15c-0.201-0.044-0.407-0.083-0.619-0.117  c-0.742-0.12-1.555-0.177-2.426-0.177h-7.352c-0.181,0-0.353,0.041-0.507,0.115C9.927,6.985,9.675,7.306,9.614,7.699L8.05,17.605  l-0.045,0.289c0.103-0.652,0.66-1.132,1.321-1.132h2.752c5.405,0,9.637-2.195,10.874-8.545c0.037-0.188,0.068-0.371,0.096-0.55  c-0.313-0.166-0.652-0.308-1.017-0.429C21.941,7.208,21.848,7.179,21.754,7.151z" fill="#222D65"></path>
<path d="M9.614,7.699c0.061-0.393,0.313-0.714,0.652-0.876c0.155-0.074,0.326-0.115,0.507-0.115h7.352  c0.871,0,1.684,0.057,2.426,0.177c0.212,0.034,0.418,0.073,0.619,0.117c0.2,0.045,0.395,0.095,0.584,0.15  c0.094,0.028,0.187,0.057,0.278,0.086c0.365,0.121,0.704,0.264,1.017,0.429c0.368-2.347-0.003-3.945-1.272-5.392  C20.378,0.682,17.853,0,14.622,0h-9.38c-0.66,0-1.223,0.48-1.325,1.133L0.01,25.898c-0.077,0.49,0.301,0.932,0.795,0.932h5.791  l1.454-9.225L9.614,7.699z" fill="#253B80"></path>
      </svg>
    </button>
    <button name="apple-pay" type="button">
      <svg xml:space="preserve" viewBox="0 0 512 210.2" y="0px" x="0px" id="Layer_1" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<path d="M93.6,27.1C87.6,34.2,78,39.8,68.4,39c-1.2-9.6,3.5-19.8,9-26.1c6-7.3,16.5-12.5,25-12.9  C103.4,10,99.5,19.8,93.6,27.1 M102.3,40.9c-13.9-0.8-25.8,7.9-32.4,7.9c-6.7,0-16.8-7.5-27.8-7.3c-14.3,0.2-27.6,8.3-34.9,21.2  c-15,25.8-3.9,64,10.6,85c7.1,10.4,15.6,21.8,26.8,21.4c10.6-0.4,14.8-6.9,27.6-6.9c12.9,0,16.6,6.9,27.8,6.7  c11.6-0.2,18.9-10.4,26-20.8c8.1-11.8,11.4-23.3,11.6-23.9c-0.2-0.2-22.4-8.7-22.6-34.3c-0.2-21.4,17.5-31.6,18.3-32.2  C123.3,42.9,107.7,41.3,102.3,40.9 M182.6,11.9v155.9h24.2v-53.3h33.5c30.6,0,52.1-21,52.1-51.4c0-30.4-21.1-51.2-51.3-51.2H182.6z   M206.8,32.3h27.9c21,0,33,11.2,33,30.9c0,19.7-12,31-33.1,31h-27.8V32.3z M336.6,169c15.2,0,29.3-7.7,35.7-19.9h0.5v18.7h22.4V90.2  c0-22.5-18-37-45.7-37c-25.7,0-44.7,14.7-45.4,34.9h21.8c1.8-9.6,10.7-15.9,22.9-15.9c14.8,0,23.1,6.9,23.1,19.6v8.6l-30.2,1.8  c-28.1,1.7-43.3,13.2-43.3,33.2C298.4,155.6,314.1,169,336.6,169z M343.1,150.5c-12.9,0-21.1-6.2-21.1-15.7c0-9.8,7.9-15.5,23-16.4  l26.9-1.7v8.8C371.9,140.1,359.5,150.5,343.1,150.5z M425.1,210.2c23.6,0,34.7-9,44.4-36.3L512,54.7h-24.6l-28.5,92.1h-0.5  l-28.5-92.1h-25.3l41,113.5l-2.2,6.9c-3.7,11.7-9.7,16.2-20.4,16.2c-1.9,0-5.6-0.2-7.1-0.4v18.7C417.3,210,423.3,210.2,425.1,210.2z" id="XMLID_34_"></path>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
      </svg>
    </button>
    <button name="google-pay" type="button">
 <svg fill="none" viewBox="0 0 80 39" height="39" width="80" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_134_34)">
<path fill="#5F6368" d="M37.8 19.7V29H34.8V6H42.6C44.5 6 46.3001 6.7 47.7001 8C49.1001 9.2 49.8 11 49.8 12.9C49.8 14.8 49.1001 16.5 47.7001 17.8C46.3001 19.1 44.6 19.8 42.6 19.8L37.8 19.7ZM37.8 8.8V16.8H42.8C43.9 16.8 45.0001 16.4 45.7001 15.6C47.3001 14.1 47.3 11.6 45.8 10.1L45.7001 10C44.9001 9.2 43.9 8.7 42.8 8.8H37.8Z"></path>
<path fill="#5F6368" d="M56.7001 12.8C58.9001 12.8 60.6001 13.4 61.9001 14.6C63.2001 15.8 63.8 17.4 63.8 19.4V29H61V26.8H60.9001C59.7001 28.6 58 29.5 56 29.5C54.3 29.5 52.8 29 51.6 28C50.5 27 49.8 25.6 49.8 24.1C49.8 22.5 50.4 21.2 51.6 20.2C52.8 19.2 54.5 18.8 56.5 18.8C58.3 18.8 59.7 19.1 60.8 19.8V19.1C60.8 18.1 60.4 17.1 59.6 16.5C58.8 15.8 57.8001 15.4 56.7001 15.4C55.0001 15.4 53.7 16.1 52.8 17.5L50.2001 15.9C51.8001 13.8 53.9001 12.8 56.7001 12.8ZM52.9001 24.2C52.9001 25 53.3001 25.7 53.9001 26.1C54.6001 26.6 55.4001 26.9 56.2001 26.9C57.4001 26.9 58.6 26.4 59.5 25.5C60.5 24.6 61 23.5 61 22.3C60.1 21.6 58.8 21.2 57.1 21.2C55.9 21.2 54.9 21.5 54.1 22.1C53.3 22.6 52.9001 23.3 52.9001 24.2Z"></path>
<path fill="#5F6368" d="M80 13.3L70.1 36H67.1L70.8 28.1L64.3 13.4H67.5L72.2 24.7H72.3L76.9 13.4H80V13.3Z"></path>
<path fill="#4285F4" d="M25.9 17.7C25.9 16.8 25.8 15.9 25.7 15H13.2V20.1H20.3C20 21.7 19.1 23.2 17.7 24.1V27.4H22C24.5 25.1 25.9 21.7 25.9 17.7Z"></path>
<path fill="#34A853" d="M13.1999 30.5999C16.7999 30.5999 19.7999 29.3999 21.9999 27.3999L17.6999 24.0999C16.4999 24.8999 14.9999 25.3999 13.1999 25.3999C9.7999 25.3999 6.7999 23.0999 5.7999 19.8999H1.3999V23.2999C3.6999 27.7999 8.1999 30.5999 13.1999 30.5999Z"></path>
<path fill="#FBBC04" d="M5.8001 19.8999C5.2001 18.2999 5.2001 16.4999 5.8001 14.7999V11.3999H1.4001C-0.499902 15.0999 -0.499902 19.4999 1.4001 23.2999L5.8001 19.8999Z"></path>
<path fill="#EA4335" d="M13.2 9.39996C15.1 9.39996 16.9 10.1 18.3 11.4L22.1 7.59996C19.7 5.39996 16.5 4.09996 13.3 4.19996C8.3 4.19996 3.7 6.99996 1.5 11.5L5.9 14.9C6.8 11.7 9.8 9.39996 13.2 9.39996Z"></path>
</g>
<defs>
<clipPath id="clip0_134_34">
<rect fill="white" height="38.1" width="80"></rect>
</clipPath>
</defs>
</svg>
    </button>
  </div>
  <div class="separator">
    <hr class="line">
    <p>or pay using credit card</p>
    <hr class="line">
  </div>
  <div class="credit-card-info--form">
    <div class="input_container">
      <label for="password_field" class="input_label">Card holder full name</label>
      <input id="password_field" class="input_field" type="text" name="input-name" title="Inpit title" placeholder="Enter your full name">
    </div>
    <div class="input_container">
      <label for="password_field" class="input_label">Card Number</label>
      <input id="password_field" class="input_field" type="number" name="input-name" title="Inpit title" placeholder="0000 0000 0000 0000">
    </div>
    <div class="input_container">
      <label for="password_field" class="input_label">Expiry Date / CVV</label>
      <div class="split">
      <input id="password_field" class="input_field" type="text" name="input-name" title="Expiry Date" placeholder="01/23">
      <input id="password_field" class="input_field" type="number" name="cvv" title="CVV" placeholder="CVV">
    </div>
    </div>
  </div>
    <button class="purchase--btn">Checkout</button>
</form>
</div>
<style>
/* From Uiverse.io by zanina-yassine - Tags: form */
.modal {
  width: fit-content;
  height: fit-content;
  background: #FFFFFF;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 26px;
  max-width: 450px;
}

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

.payment--options {
  width: calc(100% - 40px);
  display: grid;
  grid-template-columns: 33% 34% 33%;
  gap: 20px;
  padding: 10px;
}

.payment--options button {
  height: 55px;
  background: #F2F2F2;
  border-radius: 11px;
  padding: 0;
  border: 0;
  outline: none;
}

.payment--options button svg {
  height: 18px;
}

.payment--options button:last-child svg {
  height: 22px;
}

.separator {
  width: calc(100% - 20px);
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
  color: #8B8E98;
  margin: 0 10px;
}

.separator > p {
  word-break: keep-all;
  display: block;
  text-align: center;
  font-weight: 600;
  font-size: 11px;
  margin: auto;
}

.separator .line {
  display: inline-block;
  width: 100%;
  height: 1px;
  border: 0;
  background-color: #e8e8e8;
  margin: auto;
}

.credit-card-info--form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.input_container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.split {
  display: grid;
  grid-template-columns: 4fr 2fr;
  gap: 15px;
}

.split input {
  width: 100%;
}

.input_label {
  font-size: 10px;
  color: #8B8E98;
  font-weight: 600;
}

.input_field {
  width: auto;
  height: 40px;
  padding: 0 0 0 16px;
  border-radius: 9px;
  outline: none;
  background-color: #F2F2F2;
  border: 1px solid #e5e5e500;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #242424;
  background-color: transparent;
}

.purchase--btn {
  height: 55px;
  background: #F2F2F2;
  border-radius: 11px;
  border: 0;
  outline: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(180deg, #363636 0%, #1B1B1B 50%, #000000 100%);
  box-shadow: 0px 0px 0px 0px #FFFFFF, 0px 0px 0px 0px #000000;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.purchase--btn:hover {
  box-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #0000003a;
}

/* Reset input number styles */
.input_field::-webkit-outer-spin-button,
.input_field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input_field[type=number] {
  -moz-appearance: textfield;
}
</style>


================================================
FILE: Forms/zanina-yassine_bad-cat-10.html
================================================
<div class="modal">
  <form class="form">
    <div class="banner"></div>
    <label class="title">Get New customers faster</label>
    <p class="description">Grow your customer base with our tools, you can reach a much bigger and better fan community. Go PRO now! </p>
    <div class="tab-container">
      <button class="tab tab--1">Monthly</button>
      <button class="tab tab--2">Annual</button>
      <div class="indicator"></div>
    </div>

    <div class="benefits">
      <span>What we offer</span>
      <ul>
        <li>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" height="16" width="16">
            <rect fill="black" rx="8" height="16" width="16"></rect>
            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="white" d="M5 8.5L7.5 10.5L11 6"></path>
          </svg>
          <span>Grow your customer with our social network tools</span>
        </li>
        <li>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" height="16" width="16">
            <rect fill="black" rx="8" height="16" width="16"></rect>
            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="white" d="M5 8.5L7.5 10.5L11 6"></path>
          </svg>
          <span>Use E-mail automations to promote your products.</span>
        </li>
      </ul>
    </div>

    <div class="modal--footer">
      <label class="price"><sup>$</sup>9<sub>/mo</sub></label>
      <button class="upgrade-btn">Upgrade to PRO</button>
    </div>
  </form>
</div>
<style>
/* From Uiverse.io by zanina-yassine - Tags: form */
.modal {
  width: 450px;
  background: linear-gradient(180deg, #DCF9E0 0%, #FFFFFF 30.21%);
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}

.banner {
  width: 100%;
  height: 30px;
  margin: 0;
  background-size: 100%;
  background-repeat: no-repeat;
}

.title {
  font-weight: 700;
  font-size: 17px;
  line-height: 21px;
  text-align: center;
  color: #2B2B2F;
  margin-bottom: 15px;
}

.description {
  max-width: 80%;
  margin: auto;
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  color: #5F5D6B;
}

.tab-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  padding: 2px;
  background-color: #ebebec;
  border-radius: 9px;
  margin: 10px 20px 0px 20px;
}

.indicator {
  content: "";
  width: 50%;
  height: 28px;
  background: #FFFFFF;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 9;
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
  border-radius: 7px;
  transition: all 0.2s ease-out;
}

.tab {
  width: 50%;
  height: 28px;
  position: relative;
  z-index: 99;
  background-color: transparent;
  border: 0;
  outline: none;
  flex: none;
  align-self: stretch;
  flex-grow: 1;
  cursor: pointer;
  font-weight: 500;
}

.tab--1:hover ~ .indicator {
  left: 2px;
}

.tab--2:hover ~ .indicator {
  left: calc(50% - 2px);
}

.benefits {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.benefits > span {
  font-size: 15px;
  color: #2B2B2F;
  font-weight: 700;
}

.benefits ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.benefits ul li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.benefits ul li span {
  font-weight: 600;
  font-size: 12px;
  color: #5F5D6B;
}

.modal--footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-top: 1px solid #ebebec;
}

.price {
  position: relative;
  font-size: 32px;
  color: #2B2B2F;
  font-weight: 900;
}

.price sup {
  font-size: 13px;
}

.price sub {
  width: fit-content;
  position: absolute;
  font-size: 11px;
  color: #5F5D6B;
  bottom: 5px;
  display: inline-block;
}

.upgrade-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 215px;
  height: 40px;
  background: #0bdd12;
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 7px;
  border: 0;
  outline: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.upgrade-btn:hover {
  background-color: #07b90d;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>


================================================
FILE: Forms/zanina-yassine_light-dragonfly-12.html
================================================
<form class="form_container">
  <div class="logo_container"></div>
  <div class="title_container">
    <p class="title">Login to your Account</p>
    <span class="subtitle">Get started with our app, just create an account and enjoy the experience.</span>
  </div>
  <br>
  <div class="input_container">
    <label class="input_label" for="email_field">Email</label>
    <svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="icon">
      <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#141B34" d="M7 8.5L9.94202 10.2394C11.6572 11.2535 12.3428 11.2535 14.058 10.2394L17 8.5"></path>
      <path stroke-linejoin="round" stroke-width="1.5" stroke="#141B34" d="M2.01577 13.4756C2.08114 16.5412 2.11383 18.0739 3.24496 19.2094C4.37608 20.3448 5.95033 20.3843 9.09883 20.4634C11.0393 20.5122 12.9607 20.5122 14.9012 20.4634C18.0497 20.3843 19.6239 20.3448 20.7551 19.2094C21.8862 18.0739 21.9189 16.5412 21.9842 13.4756C22.0053 12.4899 22.0053 11.5101 21.9842 10.5244C21.9189 7.45886 21.8862 5.92609 20.7551 4.79066C19.6239 3.65523 18.0497 3.61568 14.9012 3.53657C12.9607 3.48781 11.0393 3.48781 9.09882 3.53656C5.95033 3.61566 4.37608 3.65521 3.24495 4.79065C2.11382 5.92608 2.08114 7.45885 2.01576 10.5244C1.99474 11.5101 1.99475 12.4899 2.01577 13.4756Z"></path>
    </svg>
    <input placeholder="name@mail.com" title="Inpit title" name="input-name" type="text" class="input_field" id="email_field">
  </div>
  <div class="input_container">
    <label class="input_label" for="password_field">Password</label>
    <svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="icon">
      <path stroke-linecap="round" stroke-width="1.5" stroke="#141B34" d="M18 11.0041C17.4166 9.91704 16.273 9.15775 14.9519 9.0993C13.477 9.03404 11.9788 9 10.329 9C8.67911 9 7.18091 9.03404 5.70604 9.0993C3.95328 9.17685 2.51295 10.4881 2.27882 12.1618C2.12602 13.2541 2 14.3734 2 15.5134C2 16.6534 2.12602 17.7727 2.27882 18.865C2.51295 20.5387 3.95328 21.8499 5.70604 21.9275C6.42013 21.9591 7.26041 21.9834 8 22"></path>
      <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#141B34" d="M6 9V6.5C6 4.01472 8.01472 2 10.5 2C12.9853 2 15 4.01472 15 6.5V9"></path>
      <path fill="#141B34" d="M21.2046 15.1045L20.6242 15.6956V15.6956L21.2046 15.1045ZM21.4196 16.4767C21.7461 16.7972 22.2706 16.7924 22.5911 16.466C22.9116 16.1395 22.9068 15.615 22.5804 15.2945L21.4196 16.4767ZM18.0228 15.1045L17.4424 14.5134V14.5134L18.0228 15.1045ZM18.2379 18.0387C18.5643 18.3593 19.0888 18.3545 19.4094 18.028C19.7299 17.7016 19.7251 17.1771 19.3987 16.8565L18.2379 18.0387ZM14.2603 20.7619C13.7039 21.3082 12.7957 21.3082 12.2394 20.7619L11.0786 21.9441C12.2794 23.1232 14.2202 23.1232 15.4211 21.9441L14.2603 20.7619ZM12.2394 20.7619C11.6914 20.2239 11.6914 19.358 12.2394 18.82L11.0786 17.6378C9.86927 18.8252 9.86927 20.7567 11.0786 21.9441L12.2394 20.7619ZM12.2394 18.82C12.7957 18.2737 13.7039 18.2737 14.2603 18.82L15.4211 17.6378C14.2202 16.4587 12.2794 16.4587 11.0786 17.6378L12.2394 18.82ZM14.2603 18.82C14.8082 19.358 14.8082 20.2239 14.2603 20.7619L15.4211 21.9441C16.6304 20.7567 16.6304 18.8252 15.4211 17.6378L14.2603 18.82ZM20.6242 15.6956L21.4196 16.4767L22.5804 15.2945L21.785 14.5134L20.6242 15.6956ZM15.4211 18.82L17.8078 16.4767L16.647 15.2944L14.2603 17.6377L15.4211 18.82ZM17.8078 16.4767L18.6032 15.6956L17.4424 14.5134L16.647 15.2945L17.8078 16.4767ZM16.647 16.4767L18.2379 18.0387L19.3987 16.8565L17.8078 15.2945L16.647 16.4767ZM21.785 14.5134C21.4266 14.1616 21.0998 13.8383 20.7993 13.6131C20.4791 13.3732 20.096 13.1716 19.6137 13.1716V14.8284C19.6145 14.8284 19.619 14.8273 19.6395 14.8357C19.6663 14.8466 19.7183 14.8735 19.806 14.9391C19.9969 15.0822 20.2326 15.3112 20.6242 15.6956L21.785 14.5134ZM18.6032 15.6956C18.9948 15.3112 19.2305 15.0822 19.4215 14.9391C19.5091 14.8735 19.5611 14.8466 19.5879 14.8357C19.6084 14.8273 19.6129 14.8284 19.6137 14.8284V13.1716C19.1314 13.1716 18.7483 13.3732 18.4281 13.6131C18.1276 13.8383 17.8008 14.1616 17.4424 14.5134L18.6032 15.6956Z"></path>
    </svg>
    <input placeholder="Password" title="Inpit title" name="input-name" type="password" class="input_field" id="password_field">
  </div>
  <button title="Sign In" type="submit" class="sign-in_btn">
    <span>Sign In</span>
  </button>

  <div class="separator">
    <hr class="line">
    <span>Or</span>
    <hr class="line">
  </div>
  <button title="Sign In" type="submit" class="sign-in_ggl">
    <svg height="18" width="18" viewBox="0 0 32 32" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <path d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z" id="A"></path>
      </defs>
      <clipPath id="B">
        
      </clipPath>
      <g transform="matrix(.727273 0 0 .727273 -.954545 -1.45455)">
        <path fill="#fbbc05" clip-path="url(#B)" d="M0 37V11l17 13z"></path>
        <path fill="#ea4335" clip-path="url(#B)" d="M0 11l17 13 7-6.1L48 14V0H0z"></path>
        <path fill="#34a853" clip-path="url(#B)" d="M0 37l30-23 7.9 1L48 0v48H0z"></path>
        <path fill="#4285f4" clip-path="url(#B)" d="M48 48L17 24l-4-3 35-10z"></path>
      </g>
    </svg>
    <span>Sign In with Google</span>
  </button>
  <button title="Sign In" type="submit" class="sign-in_apl">
    <svg preserveAspectRatio="xMidYMid" version="1.1" viewBox="0 0 256 315" height="20px" width="16px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
      <g>
        <path fill="#ffffff" d="M213.803394,167.030943 C214.2452,214.609646 255.542482,230.442639 256,230.644727 C255.650812,231.761357 249.401383,253.208293 234.24263,275.361446 C221.138555,294.513969 207.538253,313.596333 186.113759,313.991545 C165.062051,314.379442 158.292752,301.507828 134.22469,301.507828 C110.163898,301.507828 102.642899,313.596301 82.7151126,314.379442 C62.0350407,315.16201 46.2873831,293.668525 33.0744079,274.586162 C6.07529317,235.552544 -14.5576169,164.286328 13.147166,116.18047 C26.9103111,92.2909053 51.5060917,77.1630356 78.2026125,76.7751096 C98.5099145,76.3877456 117.677594,90.4371851 130.091705,90.4371851 C142.497945,90.4371851 165.790755,73.5415029 190.277627,76.0228474 C200.528668,76.4495055 229.303509,80.1636878 247.780625,107.209389 C246.291825,108.132333 213.44635,127.253405 213.803394,167.030988 M174.239142,50.1987033 C185.218331,36.9088319 192.607958,18.4081019 190.591988,0 C174.766312,0.636050225 155.629514,10.5457909 144.278109,23.8283506 C134.10507,35.5906758 125.195775,54.4170275 127.599657,72.4607932 C145.239231,73.8255433 163.259413,63.4970262 174.239142,50.1987249"></path>
      </g>
    </svg>
    <span>Sign In with Apple</span>
  </button>
  <p class="note">Terms of use &amp; Conditions</p>
</form>
<style>
/* From Uiverse.io by zanina-yassine - Tags: login, sign-in, form */
.form_container {
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 50px 40px 20px 40px;
  background-color: #ffffff;
  box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01),
    0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09),
    0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 11px;
  font-family: "Inter", sans-serif;
}

.logo_container {
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  background: linear-gradient(180deg, rgba(248, 248, 248, 0) 50%, #F8F8F888 100%);
  border: 1px solid #F7F7F8;
  filter: drop-shadow(0px 0.5px 0.5px #EFEFEF) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  border-radius: 11px;
}

.title_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #212121;
}

.subtitle {
  font-size: 0.725rem;
  max-width: 80%;
  text-align: center;
  line-height: 1.1rem;
  color: #8B8E98
}

.input_container {
  width: 100%;
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.icon {
  width: 20px;
  position: absolute;
  z-index: 99;
  left: 12px;
  bottom: 9px;
}

.input_label {
  font-size: 0.75rem;
  color: #8B8E98;
  font-weight: 600;
}

.input_field {
  width: auto;
  height: 40px;
  padding: 0 0 0 40px;
  border-radius: 7px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #242424;
  background-color: transparent;
}

.sign-in_btn {
  width: 100%;
  height: 40px;
  border: 0;
  background: #115DFC;
  border-radius: 7px;
  outline: none;
  color: #ffffff;
  cursor: pointer;
}

.sign-in_ggl {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  border-radius: 7px;
  outline: none;
  color: #242424;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  cursor: pointer;
}

.sign-in_apl {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #212121;
  border-radius: 7px;
  outline: none;
  color: #ffffff;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  cursor: pointer;
}

.separator {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  color: #8B8E98;
}

.separator .line {
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  background-color: #e8e8e8;
}

.note {
  font-size: 0.75rem;
  color: #8B8E98;
  text-decoration: underline;
}
</style>


================================================
FILE: Forms/zanina-yassine_quiet-turkey-90.html
================================================
<div class="card">
  <span class="title">Comments</span>
  <div class="comments">
    <div class="comment-react">
      <button>
        <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
          <path fill="#707277" stroke-linecap="round" stroke-width="2" stroke="#707277" d="M19.4626 3.99415C16.7809 2.34923 14.4404 3.01211 13.0344 4.06801C12.4578 4.50096 12.1696 4.71743 12 4.71743C11.8304 4.71743 11.5422 4.50096 10.9656 4.06801C9.55962 3.01211 7.21909 2.34923 4.53744 3.99415C1.01807 6.15294 0.221721 13.2749 8.33953 19.2834C9.88572 20.4278 10.6588 21 12 21C13.3412 21 14.1143 20.4278 15.6605 19.2834C23.7783 13.2749 22.9819 6.15294 19.4626 3.99415Z"></path>
        </svg>
      </button>
      <hr>
      <span>14</span>
    </div>
    <div class="comment-container">
      <div class="user">
        <div class="user-pic">
          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linejoin="round" fill="#707277" stroke-linecap="round" stroke-width="2" stroke="#707277" d="M6.57757 15.4816C5.1628 16.324 1.45336 18.0441 3.71266 20.1966C4.81631 21.248 6.04549 22 7.59087 22H16.4091C17.9545 22 19.1837 21.248 20.2873 20.1966C22.5466 18.0441 18.8372 16.324 17.4224 15.4816C14.1048 13.5061 9.89519 13.5061 6.57757 15.4816Z"></path>
            <path stroke-width="2" fill="#707277" stroke="#707277" d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z"></path>
          </svg>
        </div>
        <div class="user-info">
          <span>Yassine Zanina</span>
          <p>Wednesday, March 13th at 2:45pm</p>
        </div>
      </div>
      <p class="comment-content">
        I've been using this product for a few days now and I'm really impressed! The interface is intuitive and easy to
        use, and the features are exactly what I need to streamline my workflow.
      </p>
    </div>
  </div>

  <div class="text-box">
    <div class="box-container">
      <textarea placeholder="Reply"></textarea>
      <div>
        <div class="formatting">
          <button type="button">
            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M5 6C5 4.58579 5 3.87868 5.43934 3.43934C5.87868 3 6.58579 3 8 3H12.5789C15.0206 3 17 5.01472 17 7.5C17 9.98528 15.0206 12 12.5789 12H5V6Z" clip-rule="evenodd" fill-rule="evenodd"></path>
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M12.4286 12H13.6667C16.0599 12 18 14.0147 18 16.5C18 18.9853 16.0599 21 13.6667 21H8C6.58579 21 5.87868 21 5.43934 20.5607C5 20.1213 5 19.4142 5 18V12"></path>
            </svg>
          </button>
          <button type="button">
            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M12 4H19"></path>
              <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M8 20L16 4"></path>
              <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M5 20H12"></path>
            </svg>
          </button>
          <button type="button">
            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M5.5 3V11.5C5.5 15.0899 8.41015 18 12 18C15.5899 18 18.5 15.0899 18.5 11.5V3"></path>
              <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M3 21H21"></path>
            </svg>
          </button>
          <button type="button">
            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M4 12H20"></path>
            <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M17.5 7.66667C17.5 5.08934 15.0376 3 12 3C8.96243 3 6.5 5.08934 6.5 7.66667C6.5 8.15279 6.55336 8.59783 6.6668 9M6 16.3333C6 18.9107 8.68629 21 12 21C15.3137 21 18 19.6667 18 16.3333C18 13.9404 16.9693 12.5782 14.9079 12"></path>
            </svg>
          </button>
          <button type="button">
            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<circle stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" r="10" cy="12" cx="12"></circle>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M8 15C8.91212 16.2144 10.3643 17 12 17C13.6357 17 15.0879 16.2144 16 15"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#707277" d="M8.00897 9L8 9M16 9L15.991 9"></path>
</svg>
          </button>
          <button type="submit" class="send" title="Send">
            <svg fill="none" viewBox="0 0 24 24" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#ffffff" d="M12 5L12 20"></path>
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#ffffff" d="M7 9L11.2929 4.70711C11.6262 4.37377 11.7929 4.20711 12 4.20711C12.2071 4.20711 12.3738 4.37377 12.7071 4.70711L17 9"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by zanina-yassine - Tags: form */
.card {
  width: 450px;
  height: fit-content;
  background-color: white;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 17px 17px 27px 27px;
}

.title {
  width: 100%;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-bottom: 1px solid #f1f1f1;
  font-weight: 700;
  font-size: 13px;
  color: #47484b;
}

.title::after {
  content: '';
  width: 8ch;
  height: 1px;
  position: absolute;
  bottom: -1px;
  background-color: #47484b;
}

.comments {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 20px;
  padding: 20px;
}

.comment-react {
  width: 35px;
  height: fit-content;
  display: grid;
  grid-template-columns: auto;
  margin: 0;
  background-color: #f1f1f1;
  border-radius: 5px;
}

.comment-react button {
  width: 35px;
  height: 35px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  outline: none;
}

.comment-react button:after {
  content: '';
  width: 40px;
  height: 40px;
  position: absolute;
  left: -2.5px;
  top: -2.5px;
  background-color: #f5356e;
  border-radius: 50%;
  z-index: 0;
  transform: scale(0);
}

.comment-react button svg {
  position: relative;
  z-index: 9;
}

.comment-react button:hover:after {
  animation: ripple 0.6s ease-in-out forwards;
}

.comment-react button:hover svg {
  fill: #f5356e;
}

.comment-react button:hover svg path {
  stroke: #f5356e;
  fill: #f5356e;
}

.comment-react hr {
  width: 80%;
  height: 1px;
  background-color: #dfe1e6;
  margin: auto;
  border: 0;
}

.comment-react span {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  font-size: 13px;
  font-weight: 600;
  color: #707277;
}

.comment-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0;
  margin: 0;
}

.comment-container .user {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
}

.comment-container .user .user-pic {
  width: 40px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
  border-radius: 50%;
}

.comment-container .user .user-pic:after {
  content: '';
  width: 9px;
  height: 9px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  border-radius: 50%;
  background-color: #0fc45a;
  border: 2px solid #ffffff;
}

.comment-container .user .user-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}

.comment-container .user .user-info span {
  font-weight: 700;
  font-size: 12px;
  color: #47484b;
}

.comment-container .user .user-info p {
  font-weight: 600;
  font-size: 10px;
  color: #acaeb4;
}

.comment-container .comment-content {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #5f6064;
}

.text-box {
  width: 100%;
  height: fit-content;
  background-color: #f1f1f1;
  padding: 8px;
}

.text-box .box-container {
  background-color: #ffffff;
  border-radius: 8px 8px 21px 21px;
  padding: 8px;
}

.text-box textarea {
  width: 100%;
  height: 40px;
  resize: none;
  border: 0;
  border-radius: 6px;
  padding: 12px 12px 10px 12px;
  font-size: 13px;
  outline: none;
  caret-color: #0a84ff;
}

.text-box .formatting {
  display: grid;
  grid-template-columns: auto auto auto auto auto 1fr;
}

.text-box .formatting button {
  width: 30px;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 50%;
  border: 0;
  outline: none;
}

.text-box .formatting button:hover {
  background-color: #f1f1f1;
}

.text-box .formatting .send {
  width: 30px;
  height: 30px;
  background-color: #0a84ff;
  margin: 0 0 0 auto;
}

.text-box .formatting .send:hover {
  background-color: #026eda;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}
</style>


================================================
FILE: Forms/zanina-yassine_warm-bulldog-97.html
================================================
<div class="master-container">
  <div class="card cart">
    <label class="title">Your cart</label>
    <div class="products">
      <div class="product">
        <svg fill="none" viewBox="0 0 60 60" height="60" width="60" xmlns="http://www.w3.org/2000/svg">
<rect fill="#FFF6EE" rx="8.25" height="60" width="60"></rect>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="#FF8413" fill="#FFB672" d="M34.2812 18H25.7189C21.9755 18 18.7931 20.5252 17.6294 24.0434C17.2463 25.2017 17.0547 25.7808 17.536 26.3904C18.0172 27 18.8007 27 20.3675 27H39.6325C41.1993 27 41.9827 27 42.4639 26.3904C42.9453 25.7808 42.7538 25.2017 42.3707 24.0434C41.207 20.5252 38.0246 18 34.2812 18Z"></path>
<path fill="#FFB672" d="M18 36H17.25C16.0074 36 15 34.9926 15 33.75C15 32.5074 16.0074 31.5 17.25 31.5H29.0916C29.6839 31.5 30.263 31.6754 30.7557 32.0039L33.668 33.9453C34.1718 34.2812 34.8282 34.2812 35.332 33.9453L38.2443 32.0039C38.7371 31.6754 39.3161 31.5 39.9084 31.5H42.75C43.9926 31.5 45 32.5074 45 33.75C45 34.9926 43.9926 36 42.75 36H42M18 36L18.6479 38.5914C19.1487 40.5947 20.9486 42 23.0135 42H36.9865C39.0514 42 40.8513 40.5947 41.3521 38.5914L42 36M18 36H28.5ZM42 36H39.75Z"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="#FF8413" d="M18 36H17.25C16.0074 36 15 34.9926 15 33.75C15 32.5074 16.0074 31.5 17.25 31.5H29.0916C29.6839 31.5 30.263 31.6754 30.7557 32.0039L33.668 33.9453C34.1718 34.2812 34.8282 34.2812 35.332 33.9453L38.2443 32.0039C38.7371 31.6754 39.3161 31.5 39.9084 31.5H42.75C43.9926 31.5 45 32.5074 45 33.75C45 34.9926 43.9926 36 42.75 36H42M18 36L18.6479 38.5914C19.1487 40.5947 20.9486 42 23.0135 42H36.9865C39.0514 42 40.8513 40.5947 41.3521 38.5914L42 36M18 36H28.5M42 36H39.75"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#FF8413" d="M34.512 22.5H34.4982"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="#FF8413" d="M27.75 21.75L26.25 23.25"></path>
</svg>
        <div>
          <span>Cheese Burger</span>
          <p>Extra Spicy</p>
          <p>No mayo</p>
        </div>
        <div class="quantity">
          <button>
            <svg fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#47484b" d="M20 12L4 12"></path>
            </svg>
          </button>
          <label>2</label>
          <button>
            <svg fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#47484b" d="M12 4V20M20 12H4"></path>
            </svg>
          </button>
        </div>
        <label class="price small">$23.99</label>
      </div>
    </div>
  </div>

  <div class="card coupons">
    <label class="title">Apply coupons</label>
    <form class="form">
        <input type="text" placeholder="Apply your coupons here" class="input_field">
        <button>Apply</button>
    </form>
  </div>

  <div class="card checkout">
    <label class="title">Checkout</label>
    <div class="details">
      <span>Your cart subtotal:</span>
      <span>47.99$</span>
      <span>Discount through applied coupons:</span>
      <span>3.99$</span>
      <span>Shipping fees:</span>
      <span>4.99$</span>
    </div>
    <div class="checkout--footer">
      <label class="price"><sup>$</sup>57.99</label>
      <button class="checkout-btn">Checkout</button>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by zanina-yassine - Tags: form */
.master-container {
  display: grid;
  grid-template-columns: auto;
  gap: 5px;
}

.card {
  width: 400px;
  background: #FFFFFF;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
}

.title {
  width: 100%;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-bottom: 1px solid #efeff3;
  font-weight: 700;
  font-size: 11px;
  color: #63656b;
}

/* cart */
.cart {
  border-radius: 19px 19px 7px 7px;
}

.cart .products {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.cart .products .product {
  display: grid;
  grid-template-columns: 60px 1fr 80px 1fr;
  gap: 10px;
}

.cart .products .product span {
  font-size: 13px;
  font-weight: 600;
  color: #47484b;
  margin-bottom: 8px;
  display: block;
}

.cart .products .product p {
  font-size: 11px;
  font-weight: 600;
  color: #7a7c81;
}

.cart .quantity {
  height: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: auto;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 7px;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
}

.cart .quantity label {
  width: 20px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
  font-size: 15px;
  font-weight: 700;
  color: #47484b;
}

.cart .quantity button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: none;
  background-color: transparent;
  padding-bottom: 2px;
}

.card .small {
  font-size: 15px;
  margin: 0 0 auto auto;
}

.card .small sup {
  font-size: px;
}

/* coupons */
.coupons {
  border-radius: 7px;
}

.coupons form {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 10px;
  padding: 10px;
}

.input_field {
  width: auto;
  height: 36px;
  padding: 0 0 0 12px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #242424;
  background-color: transparent;
}

.coupons form button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  gap: 10px;
  width: 100%;
  height: 36px;
  background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 5px;
  border: 0;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
}

/* Checkout */
.checkout {
  border-radius: 9px 9px 19px 19px;
}

.checkout .details {
  display: grid;
  grid-template-columns: 3fr 1fr;
  padding: 10px;
  gap: 5px;
}

.checkout .details span {
  font-size: 13px;
  font-weight: 600;
}

.checkout .details span:nth-child(odd) {
  font-size: 11px;
  font-weight: 700;
  color: #707175;
  margin: auto auto auto 0;
}

.checkout .details span:nth-child(even) {
  font-size: 13px;
  font-weight: 600;
  color: #47484b;
  margin: auto 0 auto auto;
}

.checkout .checkout--footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 20px;
  background-color: #efeff3;
}

.price {
  position: relative;
  font-size: 22px;
  color: #2B2B2F;
  font-weight: 900;
}

.price sup {
  font-size: 13px;
}

.price sub {
  width: fit-content;
  position: absolute;
  font-size: 11px;
  color: #5F5D6B;
  bottom: 5px;
  display: inline-block;
}

.checkout .checkout-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 36px;
  background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 7px;
  border: 0;
  outline: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}
</style>


================================================
FILE: Forms/zanina-yassine_yellow-jellyfish-91.html
================================================
<div class="popup">
  <form class="form">
    <div class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 34 34" height="34" width="34">
        <path stroke-linejoin="round" stroke-width="2.5" stroke="#115DFC" d="M7.08385 9.91666L5.3572 11.0677C4.11945 11.8929 3.50056 12.3055 3.16517 12.9347C2.82977 13.564 2.83226 14.3035 2.83722 15.7825C2.84322 17.5631 2.85976 19.3774 2.90559 21.2133C3.01431 25.569 3.06868 27.7468 4.67008 29.3482C6.27148 30.9498 8.47873 31.0049 12.8932 31.1152C15.6396 31.1838 18.3616 31.1838 21.1078 31.1152C25.5224 31.0049 27.7296 30.9498 29.331 29.3482C30.9324 27.7468 30.9868 25.569 31.0954 21.2133C31.1413 19.3774 31.1578 17.5631 31.1639 15.7825C31.1688 14.3035 31.1712 13.564 30.8359 12.9347C30.5004 12.3055 29.8816 11.8929 28.6437 11.0677L26.9171 9.91666"></path>
        <path stroke-linejoin="round" stroke-width="2.5" stroke="#115DFC" d="M2.83331 14.1667L12.6268 20.0427C14.7574 21.3211 15.8227 21.9603 17 21.9603C18.1772 21.9603 19.2426 21.3211 21.3732 20.0427L31.1666 14.1667"></path>
        <path stroke-width="2.5" stroke="#115DFC" d="M7.08331 17V8.50001C7.08331 5.82872 7.08331 4.49307 7.91318 3.66321C8.74304 2.83334 10.0787 2.83334 12.75 2.83334H21.25C23.9212 2.83334 25.2569 2.83334 26.0868 3.66321C26.9166 4.49307 26.9166 5.82872 26.9166 8.50001V17"></path>
        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#115DFC" d="M14.1667 14.1667H19.8334M14.1667 8.5H19.8334"></path>
      </svg>
    </div>
    <div class="note">
      <label class="title">Subscribe for updates</label>
      <span class="subtitle">Subscribe to this weekly news letter so you don’t miss out
on the new hot tech topics.</span>
    </div>
    <input placeholder="Enter your e-mail" title="Enter your e-mail" name="email" type="email" class="input_field">
    <button class="submit">Submit</button>
  </form>
</div>
<style>
/* From Uiverse.io by zanina-yassine - Tags: subscription, form */
.popup {
  position: relative;
  width: 320px;
  height: fit-content;
  background: #FFFFFF;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 13px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  gap: 20px;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #ECF1FD;
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 5px;
}

.note {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.title {
  font-style: normal;
  font-weight: 700;
  font-size: 17px;
  line-height: 24px;
  color: #2B2B2F;
}

.subtitle {
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  color: #5F5D6B;
}

.input_field {
  width: 100%;
  height: 42px;
  padding: 0 0 0 12px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 1px #2B2B2F;
  background-color: transparent;
}

.form button.submit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  gap: 10px;
  width: 100%;
  height: 42px;
  background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 5px;
  border: 0;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
}
    
</style>


================================================
FILE: Forms/zombie223_soft-rabbit-58.html
================================================
<form class="form">
  <p>Login</p>
  <div class="group">
    <input required="true" class="main-input" type="text">
    <span class="highlight-span"></span>
    <label class="lebal-email">Email</label>
  </div>
  <div class="container-1">
    <div class="group">
      <input required="true" class="main-input" type="text">
      <span class="highlight-span"></span>
      <label class="lebal-email">password</label>
    </div>
  </div>
  <button class="submit">submit</button>
</form>
<style>
/* From Uiverse.io by zombie223 - Tags: login, form */
.group {
  position: relative;
}

.form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border: 1px solid white;
  padding: 120px 40px;
  padding-top: 60px;
  padding-bottom: 90px;
  padding-right: 40px;
  padding-left: 40px;
  background-color: black;
  border-radius: 20px;
  position: relative;
}

.form p {
  padding-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: .5px;
  color: white;
}

.container-1 {
  padding-top: 30px;
}

.main-input {
  font-size: 16px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 185px;
  border: none;
  border-bottom: 1px solid #6c6c6c;
  background: transparent;
  color: #ffffff;
}

.main-input:focus {
  outline: none;
  border-bottom-color: #42ff1c;
}

.lebal-email {
  color: #999999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.main-input:focus ~ .lebal-email,
.main-input:valid ~ .lebal-email {
  top: -20px;
  font-size: 14px;
  color: #42ff1c;
}

.highlight-span {
  position: absolute;
  height: 60%;
  width: 0px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

.main-input:focus ~ .highlight-span {
  -webkit-animation: input-focus 0.3s ease;
  animation: input-focus 0.3s ease;
}

@keyframes input-focus {
  from {
    background: #42ff1c;
  }

  to {
    width: 185px;
  }
}

.submit {
  margin-top: 1.2rem;
  padding: 10px 20px;
  border-radius: 10px;
}
</style>


================================================
FILE: Inputs/0xnihilism_calm-baboon-55.html
================================================
<div class="brutalist-container">
  <input
    placeholder="TYPE HERE"
    class="brutalist-input smooth-type"
    type="text"
  />
  <label class="brutalist-label">SMOOTH BRUTALIST</label>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: simple, input, smooth, flip, hover button, brutalist */
.brutalist-container {
  position: relative;
  width: 250px;
  font-family: monospace;
}

.brutalist-input {
  width: 100%;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  background-color: #fff;
  border: 4px solid #000;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  outline: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 5px 5px 0 #000, 10px 10px 0 #4a90e2;
}

@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

.brutalist-input:focus {
  animation: focus-pulse 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite,
    glitch 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

.brutalist-input:focus::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: white;
  z-index: -1;
}

.brutalist-input:focus::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: -2;
  clip-path: inset(0 100% 0 0);
  animation: glitch-slice 4s steps(2, end) infinite;
}

@keyframes glitch-slice {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  10% {
    clip-path: inset(0 5% 0 0);
  }
  20% {
    clip-path: inset(0 80% 0 0);
  }
  30% {
    clip-path: inset(0 10% 0 0);
  }
  40% {
    clip-path: inset(0 50% 0 0);
  }
  50% {
    clip-path: inset(0 30% 0 0);
  }
  60% {
    clip-path: inset(0 70% 0 0);
  }
  70% {
    clip-path: inset(0 15% 0 0);
  }
  80% {
    clip-path: inset(0 90% 0 0);
  }
  90% {
    clip-path: inset(0 5% 0 0);
  }
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

.brutalist-label {
  position: absolute;
  left: -3px;
  top: -35px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background-color: #000;
  padding: 5px 10px;
  transform: rotate(-1deg);
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.brutalist-input:focus + .brutalist-label {
  transform: rotate(0deg) scale(1.05);
  background-color: #4a90e2;
}

.smooth-type {
  position: relative;
  overflow: hidden;
}

.smooth-type::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.smooth-type:focus::before {
  opacity: 1;
  animation: type-gradient 2s linear infinite;
}

@keyframes type-gradient {
  0% {
    background-position: 300px 0;
  }
  100% {
    background-position: 0 0;
  }
}

.brutalist-input::placeholder {
  color: #888;
  transition: color 0.3s ease;
}

.brutalist-input:focus::placeholder {
  color: transparent;
}

.brutalist-input:focus {
  animation: focus-pulse 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

@keyframes focus-pulse {
  0%,
  100% {
    border-color: #000;
  }
  50% {
    border-color: #4a90e2;
  }
}

</style>
    

================================================
FILE: Inputs/0xnihilism_silly-quail-9.html
================================================
<div class="input-container">
  <input
    class="input"
    name="text"
    type="text"
    placeholder="Search the internet..."
  />
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags:  */
.input {
  width: 100%;
  max-width: 270px;
  height: 60px;
  padding: 12px;
  font-size: 18px;
  font-family: "Courier New", monospace;
  color: #000;
  background-color: #fff;
  border: 4px solid #000;
  border-radius: 0;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 8px 8px 0 #000;
}

.input::placeholder {
  color: #888;
}

.input:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 #000;
}

.input:focus {
  background-color: #000;
  color: #fff;
  border-color: #ffffff;
}

.input:focus::placeholder {
  color: #fff;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

.input:focus::after {
  content: "|";
  position: absolute;
  right: 10px;
  animation: blink 0.7s step-end infinite;
}

.input:valid {
  animation: typing 2s steps(30, end);
}
.input-container {
  position: relative;
  width: 100%;
  max-width: 270px;
}

.input {
  width: 100%;
  height: 60px;
  padding: 12px;
  font-size: 18px;
  font-family: "Courier New", monospace;
  color: #000;
  background-color: #fff;
  border: 4px solid #000;
  border-radius: 0;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 8px 8px 0 #000;
}

.input::placeholder {
  color: #888;
}

.input:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 #000;
}

.input:focus {
  background-color: #010101;
  color: #fff;
  border-color: #d6d9dd;
}

.input:focus::placeholder {
  color: #fff;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px) rotate(-5deg);
  }
  50% {
    transform: translateX(5px) rotate(5deg);
  }
  75% {
    transform: translateX(-5px) rotate(-5deg);
  }
  100% {
    transform: translateX(0);
  }
}

.input:focus {
  animation: shake 0.5s ease-in-out;
}

@keyframes glitch {
  0% {
    transform: none;
    opacity: 1;
  }
  7% {
    transform: skew(-0.5deg, -0.9deg);
    opacity: 0.75;
  }
  10% {
    transform: none;
    opacity: 1;
  }
  27% {
    transform: none;
    opacity: 1;
  }
  30% {
    transform: skew(0.8deg, -0.1deg);
    opacity: 0.75;
  }
  35% {
    transform: none;
    opacity: 1;
  }
  52% {
    transform: none;
    opacity: 1;
  }
  55% {
    transform: skew(-1deg, 0.2deg);
    opacity: 0.75;
  }
  50% {
    transform: none;
    opacity: 1;
  }
  72% {
    transform: none;
    opacity: 1;
  }
  75% {
    transform: skew(0.4deg, 1deg);
    opacity: 0.75;
  }
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

.input:not(:placeholder-shown) {
  animation: glitch 1s linear infinite;
}

.input-container::after {
  content: "|";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  animation: blink 0.7s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.input:focus + .input-container::after {
  color: #fff;
}

.input:not(:placeholder-shown) {
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0px 0px 0 #000;
}

</style>
    

================================================
FILE: Inputs/0xnihilism_wise-lizard-57.html
================================================
<div class="input__container">
  <div class="shadow__input"></div>
  <button class="input__button__shadow">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="#000000"
      width="20px"
      height="20px"
    >
      <path d="M0 0h24v24H0z" fill="none"></path>
      <path
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
      ></path>
    </svg>
  </button>
  <input
    type="text"
    name="username"
    class="input__search"
    placeholder="Enter username"
  />
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: 3d, input, username, brutalism, raw */
.input__container {
  position: relative;
  background: #f0f0f0;
  padding: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  border: 4px solid #000;
  max-width: 350px;
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(-10deg);
  perspective: 1000px;
  box-shadow: 10px 10px 0 #000;
}

.input__container:hover {
  transform: rotateX(5deg) rotateY(1 deg) scale(1.05);
  box-shadow: 25px 25px 0 -5px #e9b50b, 25px 25px 0 0 #000;
}

.shadow__input {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
  transform: translateZ(-50px);
  background: linear-gradient(
    45deg,
    rgba(255, 107, 107, 0.4) 0%,
    rgba(255, 107, 107, 0.1) 100%
  );
  filter: blur(20px);
}

.input__button__shadow {
  cursor: pointer;
  border: 3px solid #000;
  background: #e9b50b;
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  transform: translateZ(20px);
  position: relative;
  z-index: 3;
  font-weight: bold;
  text-transform: uppercase;
}

.input__button__shadow:hover {
  background: #e9b50b;
  transform: translateZ(10px) translateX(-5px) translateY(-5px);
  box-shadow: 5px 5px 0 0 #000;
}

.input__button__shadow svg {
  fill: #000;
  width: 25px;
  height: 25px;
}

.input__search {
  width: 100%;
  outline: none;
  border: 3px solid #000;
  padding: 15px;
  font-size: 18px;
  background: #fff;
  color: #000;
  transform: translateZ(10px);
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  z-index: 3;
  font-family: "Roboto", Arial, sans-serif;
  letter-spacing: -0.5px;
}

.input__search::placeholder {
  color: #666;
  font-weight: bold;
  text-transform: uppercase;
}

.input__search:hover,
.input__search:focus {
  background: #f0f0f0;
  transform: translateZ(20px) translateX(-5px) translateY(-5px);
  box-shadow: 5px 5px 0 0 #000;
}

.input__container::before {
  content: "USERNAME";
  position: absolute;
  top: -15px;
  left: 20px;
  background: #e9b50b;
  color: #000;
  font-weight: bold;
  padding: 5px 10px;
  font-size: 14px;
  transform: translateZ(50px);
  z-index: 4;
  border: 2px solid #000;
}

</style>
    

================================================
FILE: Inputs/1osm_pretty-frog-15.html
================================================
<div class="Message">
  <input title="Write Message" tabindex="i" pattern="\d+" placeholder="Message.." class="MsgInput" type="text">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="30.000000pt" height="30.000000pt" viewBox="0 0 30.000000 30.000000" preserveAspectRatio="xMidYMid meet" class="SendSVG">
  <g transform="translate(0.000000,30.000000) scale(0.100000,-0.100000)" fill="#ffffff70" stroke="none">
  <path d="M44 256 c-3 -8 -4 -29 -2 -48 3 -31 5 -33 56 -42 28 -5 52 -13 52 -16 0 -3 -24 -11 -52 -16 -52 -9 -53 -9 -56 -48 -2 -21 1 -43 6 -48 10 -10 232 97 232 112 0 7 -211 120 -224 120 -4 0 -9 -6 -12 -14z"></path>
  </g>
</svg><span class="l"></span>
  
</div>
<style>
/* From Uiverse.io by 1osm - Tags: input, message, send */
.Message {
  width: 310px;
  height: 40px;
  border-radius: 10px;
  background-color: #40414f;
  transform: translate(0px,0px);
  box-shadow: 5px 5px #34343f;
}

.MsgInput {
  font-size: 18px;
  border-radius: 5px;
  background-color: #40414f;
  border: none;
  outline: none;
  width: 250px;
  height: 30px;
  transform: translate(5px,-3px);
  color: white;
  padding: 10px;
  font-weight: bold;
}

.SendSVG {
  width: 30px;
  height: 30px;
  border-width: 50px;
  transform: translate(20px,5px);
  background-size: 10px;
  border-radius: 10px;
  transition: 0.3s;
}

.SendSVG:hover {
  background-color: #2b2b35;
}

.l {
  position: absolute;
  width: 1%;
  height: 30px;
  background-color: #2e2f38;
  transform: translate(-20px,5px);
}

</style>


================================================
FILE: Inputs/AKAspidey01_fuzzy-liger-17.html
================================================
<!-- From Uiverse.io by AKAspidey01  - Tags: simple, flashy, animation, hover, input, smooth, hover effect, button hover effect  -->
<div class="relative rounded-full overflow-hidden bg-white shadow-xl w-3/4">
  <input
    type="text"
    name="text"
    placeholder="Hover on Submit"
    class="input bg-transparent outline-none border-none pl-6 pr-10 py-5 w-full font-sans text-lg font-semibold"
  />
  <div class="absolute right-2 top-[0.4em]">
    <button
      class="w-14 h-14 rounded-full bg-violet-500 group shadow-xl flex items-center justify-center relative overflow-hidden"
    >
      <svg
        width="50"
        height="50"
        viewBox="0 0 64 64"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        class="relative z-10"
      >
        <path
          d="M63.6689 29.0491L34.6198 63.6685L0.00043872 34.6194L29.0496 1.67708e-05L63.6689 29.0491Z"
          fill="white"
          fill-opacity="0.01"
        ></path>
        <path
          d="M42.8496 18.7067L21.0628 44.6712"
          stroke="white"
          stroke-width="3.76603"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
        <path
          d="M26.9329 20.0992L42.85 18.7067L44.2426 34.6238"
          stroke="white"
          stroke-width="3.76603"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
      <div
        class="w-full h-full rotate-45 absolute left-[32%] top-[32%] bg-black group-hover:-left-[100%] group-hover:-top-[100%] duration-1000"
      ></div>
      <div
        class="w-full h-full -rotate-45 absolute -left-[32%] -top-[32%] group-hover:left-[100%] group-hover:top-[100%] bg-black duration-1000"
      ></div>
    </button>
  </div>
</div>


    

================================================
FILE: Inputs/ARUSH221617_fresh-bear-10.html
================================================
<!-- From Uiverse.io by ARUSH221617  - Tags: input -->
<form class="flex items-center max-w-lg mx-auto">
  <label class="sr-only" for="voice-search">Search</label>
  <div class="relative w-full">
    <div
      class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
    >
      <svg
        viewBox="0 0 21 21"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        class="w-4 h-4 text-gray-500 dark:text-gray-400"
      >
        <path
          d="M11.15 5.6h.01m3.337 1.913h.01m-6.979 0h.01M5.541 11h.01M15 15h2.706a1.957 1.957 0 0 0 1.883-1.325A9 9 0 1 0 2.043 11.89 9.1 9.1 0 0 0 7.2 19.1a8.62 8.62 0 0 0 3.769.9A2.013 2.013 0 0 0 13 18v-.857A2.034 2.034 0 0 1 15 15Z"
          stroke-width="2"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke="currentColor"
        ></path>
      </svg>
    </div>
    <input
      required=""
      placeholder="Search..."
      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
      id="voice-search"
      type="text"
    />
    <button
      class="absolute inset-y-0 end-0 flex items-center pe-3"
      type="button"
    >
      <svg
        viewBox="0 0 16 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        class="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
      >
        <path
          d="M15 7v3a5.006 5.006 0 0 1-5 5H6a5.006 5.006 0 0 1-5-5V7m7 9v3m-3 0h6M7 1h2a3 3 0 0 1 3 3v5a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3Z"
          stroke-width="2"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke="currentColor"
        ></path>
      </svg>
    </button>
  </div>
  <button
    class="inline-flex items-center py-2.5 px-3 ms-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
    type="submit"
  >
    <svg
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      class="w-4 h-4 me-2"
    >
      <path
        d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke="currentColor"
      ></path></svg
    >Search
  </button>
</form>


    

================================================
FILE: Inputs/AbanoubMagdy1_afraid-yak-99.html
================================================
<div class="wave-group">
  <input required="" type="text" class="input">
  <span class="bar"></span>
  <label class="label">
    <span class="label-char" style="--index: 0">N</span>
    <span class="label-char" style="--index: 1">a</span>
    <span class="label-char" style="--index: 2">m</span>
    <span class="label-char" style="--index: 3">e</span>
  </label>
</div>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: input */
.wave-group {
  position: relative;
}

.wave-group .input {
  font-size: 16px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 200px;
  border: none;
  border-bottom: 1px solid #515151;
  background: transparent;
}

.wave-group .input:focus {
  outline: none;
}

.wave-group .label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  display: flex;
}

.wave-group .label-char {
  transition: 0.2s ease all;
  transition-delay: calc(var(--index) * .05s);
}

.wave-group .input:focus ~ label .label-char,
.wave-group .input:valid ~ label .label-char {
  transform: translateY(-20px);
  font-size: 14px;
  color: #5264AE;
}

.wave-group .bar {
  position: relative;
  display: block;
  width: 200px;
}

.wave-group .bar:before,.wave-group .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #5264AE;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.wave-group .bar:before {
  left: 50%;
}

.wave-group .bar:after {
  right: 50%;
}

.wave-group .input:focus ~ .bar:before,
.wave-group .input:focus ~ .bar:after {
  width: 50%;
}


</style>


================================================
FILE: Inputs/Adamsco51_moody-vampirebat-6.html
================================================
<div class="container">
  <span class="bg-color"></span>
  <input placeholder="Search..." class="input" name="text" type="text" />
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    class="search icon"
  >
    <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
    <g
      stroke-linejoin="round"
      stroke-linecap="round"
      id="SVGRepo_tracerCarrier"
    ></g>
    <g id="SVGRepo_iconCarrier">
      <path
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="2"
        stroke="#dedede"
        d="M14.9536 14.9458L21 21M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
      ></path>
    </g>
  </svg>
  <button>
    <svg
      stroke="#ffffff"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24.00 24.00"
      height="104px"
      width="104px"
      class="icon"
    >
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-width="0.144"
        stroke="#CCCCCC"
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="1"
          stroke="#dedede"
          d="M3 4.6C3 4.03995 3 3.75992 3.10899 3.54601C3.20487 3.35785 3.35785 3.20487 3.54601 3.10899C3.75992 3 4.03995 3 4.6 3H19.4C19.9601 3 20.2401 3 20.454 3.10899C20.6422 3.20487 20.7951 3.35785 20.891 3.54601C21 3.75992 21 4.03995 21 4.6V6.33726C21 6.58185 21 6.70414 20.9724 6.81923C20.9479 6.92127 20.9075 7.01881 20.8526 7.10828C20.7908 7.2092 20.7043 7.29568 20.5314 7.46863L14.4686 13.5314C14.2957 13.7043 14.2092 13.7908 14.1474 13.8917C14.0925 13.9812 14.0521 14.0787 14.0276 14.1808C14 14.2959 14 14.4182 14 14.6627V17L10 21V14.6627C10 14.4182 10 14.2959 9.97237 14.1808C9.94787 14.0787 9.90747 13.9812 9.85264 13.8917C9.7908 13.7908 9.70432 13.7043 9.53137 13.5314L3.46863 7.46863C3.29568 7.29568 3.2092 7.2092 3.14736 7.10828C3.09253 7.01881 3.05213 6.92127 3.02763 6.81923C3 6.70414 3 6.58185 3 6.33726V4.6Z"
        ></path>
      </g>
    </svg>
  </button>
</div>

<style>
/* From Uiverse.io by Adamsco51  - Tags: simple, input, click */
.container {
  width: 300px;
  height: 40px;
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 2px;
}

.input {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding-left: 55px;
  padding-right: 65px;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  font-size: 1.25rem;
  color: #dedede;
  font-weight: 500;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.search {
  position: absolute;
  left: 0;
  margin: 0 12px;
  z-index: 99;
  stroke: #fff;
}

.icon {
  width: 32px;
  height: 32px;
  color: #fff;
  cursor: pointer;
}

button {
  position: absolute;
  backdrop-filter: blur(8px);
  background: transparent;
  background-clip: border-box;
  border: 1px solid #fff;
  border-radius: 8px;
  padding: 2px;
  right: 0;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container::before {
  content: "";
  position: absolute;
  left: -25px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgb(202, 241, 61);
  z-index: -1;
  opacity: 0.1;
}

.container::after {
  content: "";
  position: absolute;
  right: -25px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgb(202, 241, 61);
  z-index: -1;
  opacity: 0.1;
}

</style>
    

================================================
FILE: Inputs/Admin12121_afraid-rattlesnake-2.html
================================================
<div class="div">
  <input type="checkbox" />
  <span>
    <svg
      class="svgi"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="#909090"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
      <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
    </svg>

    <svg
      class="svgii"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="#3fc079"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
      <path d="M7 11V7a5 5 0 0 1 9.9-1"></path>
    </svg>
  </span>
  <input type="text" placeholder="'Unlock' me by clicking the lock icon" />
</div>

<style>
/* From Uiverse.io by Admin12121  - Tags: input, toggle, futuristic, input effect  */
.div {
  --field-size: 50px;
  --field-border-color: #ccc;
  margin: 0 auto;
  font-size: 1rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  background: #ffffff;
  border-radius: 5px;
  position: relative;
  width: 300px;
  overflow: hidden;
  display: flex;
  background: white;
}

.div input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: var(--field-size);
  height: var(--field-size);
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.div input[type="checkbox"]:hover + span .svgi {
  display: none;
  /* Remove the background image */
}
.div input[type="checkbox"]:hover + span .svgii {
  display: block;
}

.div input[type="checkbox"]:checked + span .svgi {
  display: none; /* Remove the background image */
}

.div input[type="checkbox"]:checked + span .svgii {
  display: block;
}

.div input[type="checkbox"]:checked + span::before,
.div input[type="checkbox"]:checked + span::after {
  pointer-events: none;
}

.div input[type="checkbox"]:checked + span::after {
  transform: translateY(-100%);
}

.div input[type="checkbox"]:checked + span::before {
  transform: translateY(100%);
}
.div input[type="checkbox"] + span .svgii {
  display: none;
}
.div input[type="checkbox"] + span,
.svgi,
.svgii {
  width: var(--field-size);
  height: var(--field-size);
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-right: 1px solid var(--field-border-color);
  cursor: pointer;
}

.div input[type="checkbox"] + span::after,
.div input[type="checkbox"] + span::before {
  content: "";
  position: absolute;
  right: 0;
  height: 50%;
  left: var(--field-size);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  background: rgba(0, 0, 0, 0.075);
  z-index: 2;
  cursor: not-allowed;
}

.div input[type="checkbox"] + span::after {
  top: 0;
}

.div input[type="checkbox"] + span::before {
  bottom: 0;
}

.div input[type="text"] {
  padding: 1em;
  border: 0;
  flex: 1;
  font-size: 1rem;
  --placeholder-color: #ababab;
  font-family: inherit;
}

.div input[type="text"]::-webkit-input-placeholder {
  color: var(--placeholder-color);
}

.div input[type="text"]:-ms-input-placeholder {
  color: var(--placeholder-color);
}

.div input[type="text"]::-moz-placeholder {
  color: var(--placeholder-color);
}

.div input[type="text"]:-moz-placeholder {
  color: var(--placeholder-color);
}

</style>
    

================================================
FILE: Inputs/Akshdeep74644_dry-mouse-37.html
================================================
<section>
    <div class="input-group">
        <input class="input" autocomplete="off" name="text" type="text" required="">
        <label class="user-label">Full Name</label>
    </div>
</section>
<style>
/* From Uiverse.io by Akshdeep74644 - Tags: input */
.input-group {
  position: relative;
}

.input {
  border: 3px solid #000;
  background: none;
  padding: 1rem;
  font-size: 1rem;
  color: black;
}

.user-label {
  position: absolute;
  left: 15px;
  color: #000;
  pointer-events: none;
  transform: translateY(1rem);
  transition: 350ms;
}

.input:focus,
input:valid {
  outline: none;
  --angle: 0deg;
  border-bottom: 3px solid;
  border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
  animation: 3s rotate9234 linear infinite;
}

@keyframes rotate9234 {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.input:focus~label,
input:valid~label {
  transform: translateY(235%) scale(1);
  background-color: #e8e8e8;
  padding: 0 .2em;
  color: #2196f3;
}
</style>


================================================
FILE: Inputs/Akshdeep74644_itchy-turtle-76.html
================================================
 <div class="container">
        <input type="text" required="required">
        <label>You'r name</label>
        <i></i>
    </div>
<style>
/* From Uiverse.io by Akshdeep74644 - Tags: input */
.container {
  position: relative;
  width: 200px;
}

.container input {
  width: 100%;
  background: transparent;
  outline: none;
  border: none;
  color: #222;
  padding: 8px;
}

.container label {
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(105, 105, 105, 0.7);
  text-transform: uppercase;
  pointer-events: none;
  transition: .5s;
  font-weight: bold;
}

.container input:valid ~ label,
.container input:focus ~ label {
  color: rgb(10, 131, 212);
  transform: translateY(-15px);
  font-size: .6rem;
}

.container i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #222;
}

.container i:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff1b69, #ff0, #2196f3, #9c27b0, #ff1b69);
  animation: animate 3s linear infinite;
}
</style>


================================================
FILE: Inputs/Alanav29_tough-ape-65.html
================================================
<div class="input-container">
  <input type="text" name="email" class="text-input" />
  <label for="email">Email</label>
</div>

<style>
/* From Uiverse.io by Alanav29  - Tags: simple, email, minimalist, input, light, toggle, text animation, input effect  */
.input-container {
  width: auto;
  position: static;
  display: flex;
  flex-direction: column-reverse;
}

.input-container label {
  color: black;
  position: relative;
  top: 2px;
  border: solid white;
  border-top: none;
  border-right: none;
  border-left: none;
  width: fit-content;
  transition: transform 0.2s;
  margin: 0px 0px 0px 12px;
  padding: 0px 4px 0px 4px;
  font-size: 20px;
}

.input-container input:focus + label {
  color: rgb(161, 66, 249);
  transform: scale(1.2);
  transform: translateX(0.5rem);
}

.input-container input {
  border: 2px rgb(161, 66, 249) solid;
  padding: 8px;
}

.input-container input:focus {
  outline: none;
}

</style>
    

================================================
FILE: Inputs/Alaner-xs_chatty-snake-44.html
================================================

<input type="text" name="text" class="input" placeholder="Type your text">
<style>
/* From Uiverse.io by Alaner-xs - Tags: input */
.input {
 background-color: #383838;
 border: 1ex solid none;
 border-top-width: 1.7em;
 margin: 0;
 padding: 0;
 color: #383838;
 word-wrap: break-word;
 outline: 7px solid #383838;
 height: 30px;
 font-size: 17px;
 text-align: center;
 transition: all 1s;
 max-width: 190px;
 font-weight: bold;
 font-family: 'Courier New', Courier, monospace;
}

.input:hover {
 border-top-width: 0.2em;
 background-color: #f1e8e8;
}

.input:focus {
 border-top-width: 0.2em;
 background-color: #f1e8e8;
}
</style>


================================================
FILE: Inputs/Alaner-xs_red-tiger-4.html
================================================

<input type="text" name="text" class="input" placeholder="Type here...">
<style>
/* From Uiverse.io by Alaner-xs - Tags: input */
.input {
 border: 3px solid rgb(127, 170, 170);
 border-radius: 20px;
 background-image: linear-gradient(120deg,#3c3c3c,#585858);
 color: rgb(127, 170, 170);
 cursor: pointer;
 padding: 7px 12px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 17px;
 transition: all 1s;
 max-width: 170px;
}

.input:focus {
 outline-color: rgb(127, 170, 170);
}
</style>


================================================
FILE: Inputs/Alien14k_honest-goat-49.html
================================================
<div class="form__group">
    <input type="text" class="form__field w-100" placeholder="Input text">
    <label for="name" class="form__label"> Input text </label>
</div>
<style>
/* From Uiverse.io by Alien14k - Tags: input */
.form__group {
  position: relative;
}

.form__field {
  border: 1px solid silver !important;
  border-radius: 5px;
  box-sizing: border-box;
  color: #313a46;
  height: 40px;
  padding: 0rem 15px;
}

.form__field::placeholder {
  color: transparent;
}

.form__field:placeholder-shown ~ .form__label {
  top: 10px;
  border-right: none;
  border-left: none;
}

.form__label {
  background-color: white;
  border-left: 1px solid silver;
  border-right: 1px solid silver;
  color: #9b9b9b;
  display: block;
  font-size: .9em;
  margin-left: 10px;
  padding: 0 10px;
  pointer-events: none;
  position: absolute;
  top: -10px;
  transition: 0.2s;
}

.form__field:focus {
  border: 1px solid #B9192C !important;
  outline: none;
}

.form__field:focus ~ .form__label {
  background-color: white;
  border-right: 1px solid #B9192C;
  border-left: 1px solid #B9192C;
  color: #B9192C;
  font-size: .9em;
  margin-left: 10px;
  padding: 0 10px;
  position: absolute;
  top: -10px;
  transition: 0.2s;
}
</style>


================================================
FILE: Inputs/Allyhere_slippery-fly-8.html
================================================
<p class="input-container">
    <input type="text" placeholder="Enter your name" name="text" id="text" class="input-field" autocomplete="name">
    <label class="input-label" for="text">Name</label>
</p>
<style>
/* From Uiverse.io by Allyhere - Tags: input */
.input-container {
  --c-text: rgb(50, 50, 80);
  --c-bg: rgb(252, 252, 252);
  --c-outline: rgb(55, 45 , 190);
  display: grid;
  gap: 1ch;
  position: relative;
  max-width: 190px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: black;
}

.input-field {
  padding: 0.5em 0.75em;
  border-radius: 0.2em;
  border: 1px solid var(--c-border, currentColor);
  color: var(--c-text);
  font-size: 1rem;
  letter-spacing: 0.1ch;
  width: 100%;
}

.input-field:not(:placeholder-shown) + .input-label {
  transform: translateY(-220%);
  opacity: 1;
}

.input-field:invalid {
  --c-border: rgb(230, 85, 60);
  --c-text: rgb(230, 85, 60);
  --c-outline: rgb(230, 85, 60);
}

.input-field:is(:disabled, :read-only) {
  --c-border: rgb(150, 150, 150);
  --c-text: rgb(170, 170, 170);
}

.input-field:is(:focus, :focus-visible) {
  outline: 2px solid var(--c-outline);
  outline-offset: 2px;
}

.input-label {
  --timing: 200ms ease-in;
  position: absolute;
  left: 0;
  top: 50%;
  transition: transform var(--timing),
    opacity var(--timing);
  transform: translateY(-50%);
  opacity: 0;
  color: var(--c-text);
  font-weight: 500;
}

</style>


================================================
FILE: Inputs/AmIt-DasIT_weak-donkey-85.html
================================================
<div class="container">
  <input required="" type="text" name="text" class="input">
  <label class="label">Username</label>
</div>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: neumorphism, skeuomorphism, 3d, input */
.container {
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  color: white;
}

.container .label {
  font-size: 15px;
  padding-left: 10px;
  position: absolute;
  top: 13px;
  transition: 0.3s;
  pointer-events: none;
}

.input {
  width: 200px;
  height: 45px;
  border: none;
  outline: none;
  padding: 0px 7px;
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  background-color: transparent;
  box-shadow: 3px 3px 10px rgba(0,0,0,1),
  -1px -1px 6px rgba(255, 255, 255, 0.4);
}

.input:focus {
  border: 2px solid transparent;
  color: #fff;
  box-shadow: 3px 3px 10px rgba(0,0,0,1),
  -1px -1px 6px rgba(255, 255, 255, 0.4),
  inset 3px 3px 10px rgba(0,0,0,1),
  inset -1px -1px 6px rgba(255, 255, 255, 0.4);
}

.container .input:valid ~ .label,
.container .input:focus ~ .label {
  transition: 0.3s;
  padding-left: 2px;
  transform: translateY(-35px);
}

.container .input:valid,
.container .input:focus {
  box-shadow: 3px 3px 10px rgba(0,0,0,1),
  -1px -1px 6px rgba(255, 255, 255, 0.4),
  inset 3px 3px 10px rgba(0,0,0,1),
  inset -1px -1px 6px rgba(255, 255, 255, 0.4);
}
</style>


================================================
FILE: Inputs/Amine-maker_ordinary-wombat-53.html
================================================
<div class="relative">
  <input class="input-cal input-base" id="input" placeholder="" type="text">
  <label id="label-input">Name</label>
</div>
<style>
/* From Uiverse.io by Amine-maker - Tags: active, input, account */
#label-input {
  transition: all 0.1s ease-in-out;
  color: #2c2c54;
  position: absolute;
  top: 30%;
  left: 18px;
  transform: scale(0.95);
  opacity: 1;
  pointer-events: none;
}

.input-base {
  border-radius: 10px;
}

#input:focus ~ label#label-input,
#input:not(:placeholder-shown) ~ #label-input {
  top: -20% !important;
  left: 2px !important;
  transform: scale(0.8);
  background: white;
  color: black;
  padding: 0 6px;
  opacity: 1;
}

#input {
  transition: outline 0.2s ease;
  font-size: 1rem;
  outline-color: var(--button-text);
  outline: unset;
  border: 1px solid #bbbbbb;
  padding: 17px 10px 10px 17px;
  width: 100%;
}

#input:focus {
  box-shadow: 0 0 0 1px #e8e8e8, 0 0 0 3px rgb(92, 127, 202);
}

.relative {
  position: relative;
}

</style>


================================================
FILE: Inputs/AmruthLP12_splendid-zebra-21.html
================================================
<div class="search-bar-container">
  <div class="search-bar">
    <span class="search-icon">
      <svg
        height="20"
        width="20"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M21.53,20.47l-5-5a8,8,0,1,0-1.06,1.06l5,5a.75.75,0,0,0,1.06-1.06ZM4,10A6,6,0,1,1,10,16,6,6,0,0,1,4,10Z"
          fill="currentColor"
        ></path>
      </svg>
    </span>
    <input placeholder="Search..." type="text" />
    <button class="filter-button" type="button">
      <svg
        height="20"
        width="20"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M3,5V7H4L10,13.92V19A1,1,0,0,0,11,20h2a1,1,0,0,0,1-1V13.92L20,7h1V5ZM12,17H12V13a1,1,0,0,0-.29-.71L6.41,7h11.18l-5.29,5.29A1,1,0,0,0,12,13Z"
          fill="currentColor"
        ></path>
      </svg>
    </button>
  </div>
</div>

<style>
/* From Uiverse.io by AmruthLP12  - Tags: icon, purple, black, input, dark, theme, html, css */
.search-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-bar {
  display: flex;
  align-items: center;
  background: linear-gradient(
    135deg,
    #333,
    #111
  ); /* Dark gradient background */
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 20px #8839ff; /* Glowing effect */
  padding: 10px 15px;
}

.search-icon {
  color: #fff; /* White color for the search icon */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 10px;
}

.search-bar input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  padding: 5px 10px;
  flex: 1;
  min-width: 200px;
}

.search-bar input::placeholder {
  color: #bbb; /* Lighter placeholder text color */
}

.filter-button {
  background: transparent;
  border: none;
  outline: none;
  padding: 0 10px;
  cursor: pointer;
  color: #fff; /* White color for the filter icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
    

================================================
FILE: Inputs/Anas92876_terrible-owl-47.html
================================================
<input placeholder="Email" class="input" name="text" type="email">
<style>
/* From Uiverse.io by Anas92876 - Tags: input */
.input {
  max-width: 400px;
  padding: 1rem;
  border-radius: 1rem;
  border: none;
  box-shadow: 2px 2px 30px 2px lightgrey;
}

</style>


================================================
FILE: Inputs/AtharvaMistry_kind-treefrog-34.html
================================================
<!-- From Uiverse.io by AtharvaMistry  - Tags: simple, purple, input, search, tailwind, tailwindcss -->
<input
  class="rounded-full bg-violet-100 text-xl border-2 border-purple-500 p-4 placeholder-purple-400 focus:text-violet-950 focus:border-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500"
  placeholder="Enter anything..."
/>


    

================================================
FILE: Inputs/AtharvaMistry_lazy-mole-46.html
================================================
<!-- From Uiverse.io by AtharvaMistry  - Tags: simple, purple, input, tailwind, tailwindcss -->
<div class="mb-6 relative">
  <label for="input" class="block text-sm font-extrabold text-gray-700 mb-1"
    >Your Input Label</label
  >
  <div class="relative">
    <input
      type="text"
      id="input"
      name="input"
      class="mt-1 p-4 border-2 border-blue-500 rounded-md focus:outline-none focus:border-blue-700 w-full transition duration-300 ease-in-out placeholder-gray-500 bg-gray-100"
      placeholder="Type in ..."
    />
    <div
      class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
    >
      <svg
        class="h-6 w-6 text-gray-400"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
        ></path>
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M2 19l-2 2m0 0l2-2m-2 2h16a2 2 0 002-2V5a2 2 0 00-2-2H2a2 2 0 00-2 2v12a2 2 0 002 2z"
        ></path>
      </svg>
    </div>
  </div>
</div>


    

================================================
FILE: Inputs/BlackisPlay_black-tiger-82.html
================================================
<div id="dateDiv">
  <input
    type="text"
    id="dateInput"
    class="dateInput"
    placeholder="Date:  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MMYYYY"
  />
</div>

<style>
/* From Uiverse.io by BlackisPlay  - Tags: simple, animation, 3d, minimalist, white, active, input, shadow */
.dateInput {
  margin-left: auto;
  margin-right: auto;
  height: 2.5em;
  width: 12.5em;
  border-radius: 2.5em;
  border: none;
  background-color: rgb(255, 255, 255);
  -webkit-filter: drop-shadow(1px 1px 10px #000);
  filter: drop-shadow(7px 7px 10px #00000059);
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(77, 77, 77);
  text-align: center;
  font-size: 14px;
  outline: 2px solid rgba(0, 0, 0, 0);
  transition: outline-offset 0.5s ease, outline-color 0.5s ease,
    height 0.5s ease, width 0.5s ease, filter 0.5s ease;
}

.dateInput:focus {
  outline-offset: 0.5em;
  outline-color: rgba(0, 0, 0, 0.228);
  transition: 0.2s;
  height: 3em;
  width: 13em;
  -webkit-filter: drop-shadow(1px 1px 10px #000);
  filter: drop-shadow(-7px 7px 10px #00000059);
}

.dateInput::placeholder {
  padding-left: 0.8em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  letter-spacing: 1px;
  transform: translateX(-6px);
  transition: transform 0.5s ease;
}

.dateInput:focus::placeholder {
  transform: translateX(-85px);
  transition: 0.5s;
}

</style>
    

================================================
FILE: Inputs/Bodyhc_afraid-eel-42.html
================================================
    <div class="search">
        <input placeholder="Search..." type="text">
        <button type="submit">Go</button>
      </div>

<style>
/* From Uiverse.io by Bodyhc - Tags: input, search, input effect , search bar */
.search {
  display: inline-block;
  position: relative;
}

.search input[type="text"] {
  width: 200px;
  padding: 10px;
  border: none;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search button[type="submit"] {
  background-color: #4e99e9;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0;
  right: 0;
  transition: .9s ease;
}

.search button[type="submit"]:hover {
  transform: scale(1.1);
  color: rgb(255, 255, 255);
  background-color: blue;
}

</style>


================================================
FILE: Inputs/Bodyhc_plastic-dodo-97.html
================================================
    <input type="text" name="search" placeholder="Search For AnyThink.." class="input">

<style>
/* From Uiverse.io by Bodyhc - Tags: hover, hover effect, input effect  */
.input[type=text] {
  max-width: 180px;
  height: 20px;
  background-color: #fff;
  color: #242424;
  padding: .15rem .5rem;
  min-height: 40px;
  border-radius: 4px;
  outline: none;
  border: none;
  box-shadow: 0px 10px 20px -18px blue;
  border-bottom: 3px solid #0d14e9;
  transition: .10s ease;
}

.input[type=text]:hover {
  outline: 2px solid #0d14e9;
  max-width: 200px;
}

.input[type=text]:focus {
  border-bottom: 3px solid #0d14e9;
  border-radius: 5px 5px 2px 2px;
  transform: scale(1.1);
}

</style>


================================================
FILE: Inputs/BurgiSimon_rotten-dolphin-78.html
================================================
<input placeholder="NAME" type="text" name="text" class="custom-input" />

<style>
/* From Uiverse.io by BurgiSimon  - Tags: simple, black, input, dark, modern, border, hover effect, css */
.custom-input {
  max-width: 190px;
  background-color: #121212;
  border: 0px solid;
  box-shadow: 1px 1px 1px 1px rgb(131, 133, 129),
    -1px -1px 1px 1px rgb(100, 100, 100);
  border-radius: 4px;
  padding: 10px;
  color: whitesmoke;
  caret-color: white;
  outline: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.custom-input:focus {
  background-color: #222;
  border: 1.5px solid rgb(189, 189, 189);
}

.custom-input:hover {
  box-shadow: 1px 1px 1px 1px rgb(149, 151, 147),
    -1px -1px 1px 1px rgb(124, 124, 124);
}

.custom-input:hover::placeholder {
  color: #999999;
}

.custom-input::placeholder {
  color: #727272;
}

</style>
    

================================================
FILE: Inputs/Christardev_fat-donkey-71.html
================================================
<input placeholder="Enter  password..." name="text" type="password" class="password">
<style>
/* From Uiverse.io by Christardev - Tags: button, form, input, animated, border, card template */
.password {
  outline: none;
  max-width: 190px;
  padding: 8px;
  background-color: #d4cbcb;
  border-radius: 12px;
  border: 4px solid #000000;
  width: auto;
  font-weight: bold;
  font-style: italic;
}

.password:hover {
  background-color: #6ad5f0;
  outline: none;
  border: 4px solid #000000;
}
</style>


================================================
FILE: Inputs/Cksunandh_purple-moose-3.html
================================================
<input placeholder="Username" class="input" name="text" type="text" />

<style>
/* From Uiverse.io by Cksunandh  - Tags: input, rounded, dark, message, border, html, css */
.input {
  margin: 30px;
  background: none;
  border: 1px solid #353535;
  outline: none;
  max-width: 200px;
  padding: 11px 23px;
  font-size: 16px;
  border-radius: 50px;
  color: #979797;
  box-shadow: rgb(136 136 136 / 17%) 0px -23px 25px 0px inset,
    rgb(81 81 81 / 23%) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

</style>
    

================================================
FILE: Inputs/ClawHack1_honest-fox-62.html
================================================
<div class="input">
    <input type="text" required="" autocomplete="off">
    <label for="name">Username</label>
</div>
<style>
/* From Uiverse.io by ClawHack1 - Tags: input */
.input {
  font-family: 'Segoe UI', sans-serif;
  margin: 1em 0 1em 0;
  max-width: 190px;
  position: relative;
}

.input input {
  font-size: 100%;
  padding: 0.8em;
  outline: none;
  border: 2px solid rgb(141, 109, 255);
  background-color: transparent;
  border-radius: 20px;
  width: 100%;
}

.input label {
  font-size: 100%;
  position: absolute;
  left: 0;
  padding: 0.8em;
  margin-left: 0.5em;
  pointer-events: none;
  transition: all 0.3s ease;
  color: rgb(255, 255, 255);
}

.input :is(input:focus, input:valid)~label {
  transform: translateY(-50%) scale(.9);
  margin: 0em;
  margin-left: 1.3em;
  padding: 0.4em;
  background-color: #212121;
}

.inputGroup :is(input:focus, input:valid) {
  border-color: rgb(37, 37, 211);
}
</style>


================================================
FILE: Inputs/Cobp_lazy-frog-59.html
================================================
<div class="container">
  <div class="shadow-container"></div>
  <label class="search-bar" for="text">
    <i class="icon">
      <svg viewBox="0 0 512 512">
        <path
          d="M221.09 64a157.09 157.09 0 1 0 157.09 157.09A157.1 157.1 0 0 0 221.09 64Z"
          stroke-width="32"
          stroke-miterlimit="10"
          stroke="currentColor"
          fill="none"
        ></path>
        <path
          d="M338.29 338.29L448 448"
          stroke-width="32"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke="currentColor"
          fill="none"
        ></path>
      </svg>
    </i>
    <input
      placeholder="Search..."
      class="input"
      name="text"
      type="text"
      id="text"
    />
    <button class="icon filter" type="button">
      <svg viewBox="0 0 24 24">
        <path
          color="currentColor"
          d="M8.857 12.506C6.37 10.646 4.596 8.6 3.627 7.45c-.3-.356-.398-.617-.457-1.076c-.202-1.572-.303-2.358.158-2.866S4.604 3 6.234 3h11.532c1.63 0 2.445 0 2.906.507c.461.508.36 1.294.158 2.866c-.06.459-.158.72-.457 1.076c-.97 1.152-2.747 3.202-5.24 5.065a1.05 1.05 0 0 0-.402.747c-.247 2.731-.475 4.227-.617 4.983c-.229 1.222-1.96 1.957-2.888 2.612c-.552.39-1.222-.074-1.293-.678a196 196 0 0 1-.674-6.917a1.05 1.05 0 0 0-.402-.755"
          stroke-width="1.5"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke="currentColor"
          fill="none"
        ></path>
      </svg>
    </button>
  </label>
</div>

<style>
/* From Uiverse.io by Cobp  - Tags: material design, blue, pink, input, search, shadow, html, css */
.container {
  --foreground-color-1: rgba(225, 225, 225, 0.5);
  --foreground-color-3: rgba(98, 98, 98, 0.3);
  --foreground-color-2: #ffffff;
  --background-color-1: #070807;
  position: relative;
  padding: 2px;
  border-radius: 16px;
  background-image: linear-gradient(
    325deg,
    #4d3acd 0%,
    #4d3acd 10%,
    rgba(98, 98, 98, 0.3) 25%,
    rgba(98, 98, 98, 0.3) 50%,
    rgba(98, 98, 98, 0.3) 75%,
    #cd3aad 90%,
    #cd3aad 100%
  );
}
.container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffffff;
  width: 60px;
  height: 30px;
  border-radius: 14px 50% 0 10px;
  z-index: -1;
  box-shadow: 0 0 4px #ffffff, 0 0 50px 1px #ffffff, 0 0 50px 10px #cd3aad;
}
.container::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #ffffff;
  width: 60px;
  height: 30px;
  border-radius: 0 10px 14px 50%;
  z-index: -1;
  box-shadow: 0 0 4px #ffffff, 0 0 10px 1px #ffffff, 0 0 50px 10px #4d3acd;
}
.shadow-container {
  position: absolute;
  border-radius: 16px;
  background-image: linear-gradient(
    325deg,
    #3b82f6 0%,
    #3b82f6 20%,
    transparent 25%,
    transparent 50%,
    transparent 75%,
    #cd3aad 80%,
    #cd3aad 100%
  );
  filter: blur(40px);
  inset: 0;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}
.search-bar {
  padding: 8px;
  background-color: var(--background-color-1);
  color: var(--foreground-color-1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  cursor: text;
}
.icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon svg {
  padding: 4px;
}
.icon.filter {
  border: 2px solid transparent;
  background-image: linear-gradient(
    to top,
    #5b5b5b 0%,
    #070807 40%,
    #070807 60%,
    #5b5b5b 100%
  );
  border-radius: 8px;
  color: var(--foreground-color-2);
  cursor: pointer;
}
.icon.filter svg {
  border-radius: 6px;
  background-color: var(--background-color-1);
  box-shadow: inset 0 3px 3px -2px #424242, inset 0 -3px 3px -2px #424242;
  transition: all 0.3s ease;
}
.icon.filter:hover svg {
  scale: 1.1;
}
.input {
  margin-left: 5px;
  background-color: transparent;
  border: none;
  outline: none;
  caret-color: var(--foreground-color-2);
  color: var(--foreground-color-2);
  font-size: 14px;
}

</style>
    

================================================
FILE: Inputs/Codewithvinay_silent-earwig-98.html
================================================
<input type="text" autocomplete="off" placeholder="Type your text" name="text" class="input">
<style>
/* From Uiverse.io by Codewithvinay - Tags: input */
.input {
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);
 /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-repeat: no-repeat;
  border-radius: 89% 29% 90% 23% / 0% 100% 0% 100%;
  border-color: transparent;
  width: 200px;
  height: 50px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 500;
  font-family: inherit;
  box-shadow: 23px 23px 46px #bebebe,
             -23px -23px 46px #ffffff;
}

.input::placeholder {
  color: white;
}
</style>


================================================
FILE: Inputs/Cornerstone-04_itchy-elephant-39.html
================================================
<input placeholder="Type here" class="input" name="text" type="text">
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: input */
.input {
  max-width: 190px;
  height: 30px;
  border: 2px solid transparent;
  outline: none;
  border-bottom: 2px solid #3f3f3f;
  caret-color: #3f3f3f;
  background-color: #212121;
  padding: 5px;
  transition: .5s linear;
  font-family: monospace;
  letter-spacing: 1px;
}

.input:focus {
  border: 2px solid #fa4753;
  caret-color: #fa4753;
  color: #fa4753;
  box-shadow: 4px 4px 10px #070707;
}

.input:focus::placeholder {
  color: #fa4753;
}
</style>


================================================
FILE: Inputs/Cybercom682_witty-mouse-32.html
================================================
<div class="number-control">
  <div class="number-left"></div>
  <input type="number" name="number" class="number-quantity">
  <div class="number-right"></div>
</div>
<style>
/* From Uiverse.io by Cybercom682 - Tags: input, number, quantity */
.number-control {
  display: flex;
  align-items: center;
}

.number-left::before,
.number-right::after {
  content: attr(data-content);
  background-color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  width: 20px;
  color: white;
  transition: background-color 0.3s;
  cursor: pointer;
}

.number-left::before {
  content: "-";
}

.number-right::after {
  content: "+";
}

.number-quantity {
  padding: 0.25rem;
  border: 0;
  width: 50px;
  -moz-appearance: textfield;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.number-left:hover::before,
.number-right:hover::after {
  background-color: #666666;
}

</style>


================================================
FILE: Inputs/Darlley_hard-quail-33.html
================================================
<div class="audio green-audio-player">
  
  <div class="play-pause-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24">
      <path fill="#566574" fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-icon" id="playPause"></path>
    </svg>
  </div>

  <div class="controls">
    <span class="current-time">0:00</span>
    <div class="slider" data-direction="horizontal">
      <div class="progress">
        <div class="pin" id="progress-pin" data-method="rewind"></div>
      </div>
    </div>
    <span class="total-time">0:00</span>
  </div>

  <div class="volume">
    <div class="volume-btn">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path fill="#566574" fill-rule="evenodd" d="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z" id="speaker"></path>
      </svg>
    </div>
    <div class="volume-controls hidden">
      <div class="slider" data-direction="vertical">
        <div class="progress">
          <div class="pin" id="volume-pin" data-method="changeVolume"></div>
        </div>
      </div>
    </div>
  </div>

  <audio crossorigin=""></audio>
</div>
<style>
/* From Uiverse.io by Darlley - Tags: animation, media, input, audio */
.audio.green-audio-player {
  width: 400px;
  min-width: 300px;
  height: 56px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 24px;
  padding-right: 24px;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
  background-color: #fff;
}

.audio.green-audio-player .play-pause-btn {
  cursor: pointer;
}

.audio.green-audio-player .slider {
  flex-grow: 1;
  background-color: #d8d8d8;
  cursor: pointer;
  position: relative;
}

.audio.green-audio-player .slider .progress {
  background-color: #44bfa3;
  border-radius: inherit;
  position: absolute;
  pointer-events: none;
}

.audio.green-audio-player .slider .progress .pin {
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background-color: #44bfa3;
  position: absolute;
  pointer-events: all;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);
}

.audio.green-audio-player .controls {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 18px;
  color: #55606e;
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  margin-left: 24px;
  margin-right: 24px;
}

.audio.green-audio-player .controls .slider {
  margin-left: 16px;
  margin-right: 16px;
  border-radius: 2px;
  height: 4px;
}

.audio.green-audio-player .controls .slider .progress {
  width: 0;
  height: 100%;
}

.audio.green-audio-player .controls .slider .pin {
  right: -8px;
  top: -6px;
}

.audio.green-audio-player .controls span {
  cursor: default;
}

.audio.green-audio-player .volume {
  position: relative;
}

.audio.green-audio-player .volume .volume-btn {
  cursor: pointer;
}

.audio.green-audio-player .volume .volume-btn .open path {
  fill: #44bfa3;
}

.audio.green-audio-player .volume .volume-controls {
  width: 30px;
  height: 135px;
  background-color: rgba(0, 0, 0, 0.62);
  border-radius: 7px;
  position: absolute;
  left: -3px;
  bottom: 52px;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.audio.green-audio-player .volume .volume-controls.hidden {
  display: none;
}

.audio.green-audio-player .volume .volume-controls .slider {
  margin-top: 12px;
  margin-bottom: 12px;
  width: 6px;
  border-radius: 3px;
}

.audio.green-audio-player .volume .volume-controls .slider .progress {
  bottom: 0;
  height: 100%;
  width: 6px;
}

.audio.green-audio-player .volume .volume-controls .slider .progress .pin {
  left: -5px;
  top: -8px;
}

</style>


================================================
FILE: Inputs/Darlley_purple-badger-78.html
================================================
<div class="audio green-audio-player">
  <div class="play-pause-btn">
    <svg viewBox="0 0 18 24" height="24" width="18" xmlns="http://www.w3.org/2000/svg">
      <path id="playPause" class="play-pause-icon" d="M18 12L0 24V0" fill-rule="evenodd" fill="#566574"></path>
    </svg>
  </div>

  <div class="controls">
    <span class="current-time">0:00</span>
    <div data-direction="horizontal" class="slider">
      <div class="progress">
        <div data-method="rewind" id="progress-pin" class="pin"></div>
      </div>
    </div>
    <span class="total-time">0:00</span>
  </div>

  <div class="volume">
    <div class="volume-btn">
      <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
        <path id="speaker" d="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z" fill-rule="evenodd" fill="#566574"></path>
      </svg>
    </div>
    <div class="volume-controls hidden">
      <div data-direction="vertical" class="slider">
        <div class="progress">
          <div data-method="changeVolume" id="volume-pin" class="pin"></div>
        </div>
      </div>
    </div>
  </div>

  <audio crossorigin=""></audio>
</div>
<style>
/* From Uiverse.io by Darlley - Tags: media, button, input, audio */
.audio.green-audio-player {
  width: 400px;
  min-width: 300px;
  height: 56px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 24px;
  padding-right: 24px;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
  background-color: #fff;
}

.audio.green-audio-player .play-pause-btn {
  cursor: pointer;
}

.audio.green-audio-player .slider {
  flex-grow: 1;
  background-color: #d8d8d8;
  cursor: pointer;
  position: relative;
}

.audio.green-audio-player .slider .progress {
  background-color: #44bfa3;
  border-radius: inherit;
  position: absolute;
  pointer-events: none;
}

.audio.green-audio-player .slider .progress .pin {
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background-color: #44bfa3;
  position: absolute;
  pointer-events: all;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);
}

.audio.green-audio-player .controls {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 18px;
  color: #55606e;
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  margin-left: 24px;
  margin-right: 24px;
}

.audio.green-audio-player .controls .slider {
  margin-left: 16px;
  margin-right: 16px;
  border-radius: 2px;
  height: 4px;
}

.audio.green-audio-player .controls .slider .progress {
  width: 0;
  height: 100%;
}

.audio.green-audio-player .controls .slider .pin {
  right: -8px;
  top: -6px;
}

.audio.green-audio-player .controls span {
  cursor: default;
}

.audio.green-audio-player .volume {
  position: relative;
}

.audio.green-audio-player .volume .volume-btn {
  cursor: pointer;
}

.audio.green-audio-player .volume .volume-btn .open path {
  fill: #44bfa3;
}

.audio.green-audio-player .volume .volume-controls {
  width: 30px;
  height: 135px;
  background-color: rgba(0, 0, 0, 0.62);
  border-radius: 7px;
  position: absolute;
  left: -3px;
  bottom: 52px;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.audio.green-audio-player .volume .volume-controls.hidden {
  display: none;
}

.audio.green-audio-player .volume .volume-controls .slider {
  margin-top: 12px;
  margin-bottom: 12px;
  width: 6px;
  border-radius: 3px;
}

.audio.green-audio-player .volume .volume-controls .slider .progress {
  bottom: 0;
  height: 100%;
  width: 6px;
}

.audio.green-audio-player .volume .volume-controls .slider .progress .pin {
  left: -5px;
  top: -8px;
}

</style>


================================================
FILE: Inputs/DellBee_foolish-panda-69.html
================================================
<div class="input-container">
        <input required="" id="input" type="text">
        <label class="label" for="input">Enter Text</label>
        <div class="underline"></div>
        <div class="sideline"></div>
        <div class="upperline"></div>
        <div class="line"></div>
    </div>
<style>
/* From Uiverse.io by DellBee - Tags: input */
/* use it in dark theme */
.input-container {
  position: relative;
  margin: 50px auto;
  width: 190px;
}

.input-container input[type="text"] {
  font-size: 20px;
  color: rgb(255, 255, 255);
  border: none;
  border-bottom: 2px solid #a5a2a2;
  outline: none;
  width: 100%;
  background-color: transparent;
}

.label {
  transition: all 0.3s ease;
  color: #d3d2d2;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.input-container input[type="text"]:focus~.label,
        .input-container input[type="text"]:valid~.label {
  top: -20px;
  transition: 0.3s;
  color: rgb(172, 46, 172);
}

.input-container .underline {
  position: absolute;
  bottom: 4px;
  left: -7px;
  height: 2px;
  width: 110%;
  background-color: rgb(172, 46, 172);
  transform: scaleX(0);
}

.input-container .sideline {
  position: relative;
  bottom: 15px;
  right: 18px;
  height: 2px;
  width: 18%;
  background-color: rgb(172, 46, 172);
  transform: scaleX(0);
  rotate: 90deg;
}

.input-container .upperline {
  position: absolute;
  bottom: 30px;
  left: -8px;
  height: 2px;
  width: 110%;
  background-color: rgb(172, 46, 172);
  transform: scaleX(0);
}

.input-container .line {
  position: relative;
  bottom: 17px;
  left: 178px;
  height: 2px;
  width: 18%;
  background-color: rgb(172, 46, 172);
  transform: scaleX(0);
  rotate: 90deg;
}

.input-container input[type="text"]:focus~.underline,
        .input-container input[type="text"]:valid~.underline {
  transform: scaleX(1);
  transition: 1s;
}

.input-container input[type="text"]:focus~.sideline,
        .input-container input[type="text"]:valid~.sideline {
  transform: scaleX(1);
  transition: 1s;
}

.input-container input[type="text"]:focus~.upperline,
        .input-container input[type="text"]:valid~.upperline {
  transform: scaleX(1);
  transition: 1s;
}

.input-container input[type="text"]:focus~.line,
        .input-container input[type="text"]:valid~.line {
  transform: scaleX(1);
  transition: 1s;
}
</style>


================================================
FILE: Inputs/Denon761_young-ladybug-43.html
================================================
<!-- From Uiverse.io by Denon761  - Tags: input -->
<div class="flex items-center justify-center">
  <div class="relative w-80">
    <input
      class="w-full p-3 pl-10 pr-12 border-gray text-white bg-black rounded-2xl outline-none glowing-border"
      placeholder="Search..."
      type="text"
    />
    <button
      class="absolute right-1 top-1 p-2 bg-gray-800 rounded-xl filter-btn"
    >
      <svg
        stroke="currentColor"
        viewBox="0 0 24 24"
        fill="none"
        class="h-6 w-6 text-white"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707l-7.414 7.414A1 1 0 0013 15v5a1 1 0 01-1 1h-2a1 1 0 01-1-1v-5a1 1 0 00-.293-.707L3.293 6.707A1 1 0 013 6V4z"
          stroke-width="2"
          stroke-linejoin="round"
          stroke-linecap="round"
        ></path>
      </svg>
    </button>
    <svg
      stroke="currentColor"
      viewBox="0 0 24 24"
      fill="none"
      class="absolute left-3 top-3 h-6 w-6 text-white"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
  </div>
</div>


    

================================================
FILE: Inputs/Desarrollo3HQ5_yellow-goat-19.html
================================================
<!-- From Uiverse.io by Desarrollo3HQ5  - Tags: simple, login, form, input, account -->
<div class="flex flex-row gap-1 bg-white/80 rounded-md py-1 px-1">
  <svg viewBox="0 0 344 384" height="26.72093023255814" width="24">
    <path
      d="M170.5 192q-35.5 0-60.5-25t-25-60.5T110 46t60.5-25T231 46t25 60.5t-25 60.5t-60.5 25zm0 43q31.5 0 69.5 9t69.5 29.5T341 320v43H0v-43q0-26 31.5-46.5T101 244t69.5-9z"
      fill="#000000"
    ></path>
  </svg>
  <input id="" name="" type="text" class="bg-inherit focus:outline-none pl-1" />
</div>


    

================================================
FILE: Inputs/EcheverriaJesus_sour-quail-63.html
================================================
<!-- From Uiverse.io by EcheverriaJesus  - Tags: simple, input, text, tailwind -->
<div class="flex justify-center items-center bg-white w-full h-full">
  <div>
    <label class="block text-gray-800 font-semibold text-sm" for="inputname"
      >Input Name</label
    >
    <div class="mt-2">
      <input
        class="block w-56 rounded-md py-1.5 px-2 ring-1 ring-inset ring-gray-400 focus:text-gray-800"
        name="inputname"
        type="text"
      />
    </div>
    <label class="pt-1 block text-gray-500 text-sm">Some Description</label>
  </div>
</div>


    

================================================
FILE: Inputs/EddyBel_itchy-squid-77.html
================================================
<div class="input__container">
  <label class="input__label">Username</label>
  <input placeholder="Enter your username" class="input" name="text" type="text">
  <p class="input__description">What do you want to call yourself?</p>
</div>
<style>
/* From Uiverse.io by EddyBel - Tags: input */
.input__container {
  max-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.3);
  padding: 15px;
  border-radius: 20px;
  position: relative;
}

.input__container::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  filter: blur(25px);
  border-radius: 20px;
  background-color: #e499ff;
  background-image: radial-gradient(at 47% 69%, hsla(17,62%,65%,1) 0px, transparent 50%),
radial-gradient(at 9% 32%, hsla(222,75%,60%,1) 0px, transparent 50%);
}

.input__label {
  display: block;
  margin-left: 0.4em;
  color: #000;
  text-transform: uppercase;
  font-size: 0.9em;
  font-weight: bold;
}

.input__description {
  font-size: 0.6em;
  font-weight: bold;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
}

.input {
  border: none;
  outline: none;
  width: 100%;
  padding: 0.6em;
  padding-left: 0.9em;
  border-radius: 20px;
  background: #fff;
  transition: background 300ms, color 300ms;
}

.input:hover,.input:focus {
  background: rgb(0, 0, 0);
  color: #fff;
}
</style>


================================================
FILE: Inputs/EddyBel_rare-baboon-42.html
================================================
<div class="input__container">
  <div class="shadow__input"></div>
  <button class="input__button__shadow">
    <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20px" width="20px">
      <path d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z" fill-rule="evenodd" fill="#17202A"></path>
    </svg>
  </button>
  <input type="text" name="text" class="input__search" placeholder="What do you want to search?">
</div>
<style>
/* From Uiverse.io by EddyBel - Tags: input */
.input__container {
  position: relative;
  background: rgba(255, 255, 255, 0.664);
  padding: 10px 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 22px;
  max-width: 300px;
  transition: transform 400ms;
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(-20deg);
  perspective: 500px;
}

.shadow__input {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
  filter: blur(30px);
  border-radius: 20px;
  background-color: #999cff;
  background-image: radial-gradient(at 85% 51%, hsla(60,60%,61%,1) 0px, transparent 50%),
    radial-gradient(at 74% 68%, hsla(235,69%,77%,1) 0px, transparent 50%),
    radial-gradient(at 64% 79%, hsla(284,72%,73%,1) 0px, transparent 50%),
    radial-gradient(at 75% 16%, hsla(283,60%,72%,1) 0px, transparent 50%),
    radial-gradient(at 90% 65%, hsla(153,70%,64%,1) 0px, transparent 50%),
    radial-gradient(at 91% 83%, hsla(283,74%,69%,1) 0px, transparent 50%),
    radial-gradient(at 72% 91%, hsla(213,75%,75%,1) 0px, transparent 50%);
}

.input__button__shadow {
  cursor: pointer;
  border: none;
  background: none;
  transition: transform 400ms, background 400ms;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  padding: 5px;
}

.input__button__shadow:hover {
  background: rgba(255, 255, 255, 0.411);
}

.input__search {
  width: 100%;
  border-radius: 20px;
  outline: none;
  border: none;
  padding: 8px;
  position: relative;
}
</style>


================================================
FILE: Inputs/ErzenXz_curvy-fly-31.html
================================================
<input type="text" name="text" class="input" placeholder="Search the web...">
<style>
/* From Uiverse.io by ErzenXz - Tags: input, search */
.input {
  background-color: #F4F4F4;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  color: #333;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 16px;
  padding: 10px;
  width: 100%;
  max-width: 200px;
  height: 50px;
  line-height: 30px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: background-color 0.3s ease-in-out;
}

.input:focus {
  background-color: #EAEAEA;
}

.input:disabled {
  background-color: #DADADA;
  color: #A3A3A3;
}

.input:read-only {
  background-color: #F4F4F4;
  color: #A3A3A3;
  cursor: not-allowed;
}
</style>


================================================
FILE: Inputs/ErzenXz_horrible-rattlesnake-14.html
================================================
<input placeholder="Searth the internet..." type="text" name="text" class="input">
<style>
/* From Uiverse.io by ErzenXz - Tags: input, search */
.input {
  width: 100%;
  max-width: 220px;
  height: 45px;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px solid lightgrey;
  outline: none;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: 0px 0px 20px -18px;
}

.input:hover {
  border: 2px solid lightgrey;
  box-shadow: 0px 0px 20px -17px;
}

.input:active {
  transform: scale(0.95);
}

.input:focus {
  border: 2px solid grey;
}
</style>


================================================
FILE: Inputs/Fadhilmagass_proud-mule-71.html
================================================
<div id="container" class="custom-container">
  <div id="searchBar" class="custom-search-bar dark-mode">
    <svg
      height="24"
      width="24"
      stroke="currentColor"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="custom-search-icon dark-mode"
    >
      <path
        d="M11 19a8 8 0 100-16 8 8 0 000 16zm8-8l5 5"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
    <input
      placeholder="Search..."
      class="custom-search-input dark-mode"
      type="text"
    />
    <svg
      height="24"
      width="24"
      stroke="currentColor"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="custom-filter-icon dark-mode"
    >
      <path
        d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707l-6.414 6.414A2 2 0 0013 14.828V17.586a1 1 0 01-.293.707l-2 2A1 1 0 019 19.586V14.828a2 2 0 00-.293-1.414L2.293 6.707A1 1 0 012 6V4z"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
      ></path>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by Fadhilmagass  - Tags: minimalist, gradient, input, search, input, minimalist, gradient, search */
.custom-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 100%;
  padding: 20px;
  margin: 0;
  transition: background-color 0.3s;
}

.custom-container.dark-mode {
  background-color: black;
}

.custom-container.light-mode {
  background-color: white;
}

.custom-search-bar {
  width: 100%;
  max-width: 600px;
  border-radius: 50px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  border: 2px solid;
  animation: rgb-outline 5s linear infinite;
  transition: background 0.3s, box-shadow 0.3s;
}

@keyframes rgb-outline {
  0% {
    border-color: rgb(255, 0, 0);
  }

  33% {
    border-color: rgb(0, 255, 0);
  }

  66% {
    border-color: rgb(0, 0, 255);
  }

  100% {
    border-color: rgb(255, 0, 0);
  }
}

.custom-search-bar.dark-mode {
  background: linear-gradient(145deg, #333, #000);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.custom-search-bar.light-mode {
  background: linear-gradient(145deg, #ddd, #fff);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.custom-search-input {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  transition: color 0.3s;
}

.custom-search-input.dark-mode {
  color: white;
}

.custom-search-input.light-mode {
  color: black;
}

.custom-search-input::placeholder {
  transition: color 0.3s;
}

.custom-search-input::placeholder.dark-mode {
  color: #888;
}

.custom-search-input::placeholder.light-mode {
  color: #aaa;
}

.custom-search-icon,
.custom-filter-icon {
  margin: 0 10px;
  transition: color 0.3s;
}

.custom-search-icon.dark-mode,
.custom-filter-icon.dark-mode {
  color: white;
}

.custom-search-icon.light-mode,
.custom-filter-icon.light-mode {
  color: black;
}

.toggle-theme {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px;
  border: none;
  background-color: gray;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

</style>
    

================================================
FILE: Inputs/G4b413l_mean-stingray-9.html
================================================
<div class="group">
  <input required="" type="text" class="input">
  <span class="highlight"></span>
  <span class="bar"></span>
  <label>Name</label>
</div>
<style>
/* From Uiverse.io by G4b413l - Tags: input */
.group {
 position: relative;
}

.input {
 font-size: 16px;
 padding: 10px 10px 10px 5px;
 display: block;
 width: 200px;
 border: none;
 border-bottom: 1px solid #515151;
 background: transparent;
}

.input:focus {
 outline: none;
}

label {
 color: #999;
 font-size: 18px;
 font-weight: normal;
 position: absolute;
 pointer-events: none;
 left: 5px;
 top: 10px;
 transition: 0.2s ease all;
 -moz-transition: 0.2s ease all;
 -webkit-transition: 0.2s ease all;
}

.input:focus ~ label, .input:valid ~ label {
 top: -20px;
 font-size: 14px;
 color: #5264AE;
}

.bar {
 position: relative;
 display: block;
 width: 200px;
}

.bar:before, .bar:after {
 content: '';
 height: 2px;
 width: 0;
 bottom: 1px;
 position: absolute;
 background: #5264AE;
 transition: 0.2s ease all;
 -moz-transition: 0.2s ease all;
 -webkit-transition: 0.2s ease all;
}

.bar:before {
 left: 50%;
}

.bar:after {
 right: 50%;
}

.input:focus ~ .bar:before, .input:focus ~ .bar:after {
 width: 50%;
}

.highlight {
 position: absolute;
 height: 60%;
 width: 100px;
 top: 25%;
 left: 0;
 pointer-events: none;
 opacity: 0.5;
}

.input:focus ~ .highlight {
 animation: inputHighlighter 0.3s ease;
}

@keyframes inputHighlighter {
 from {
  background: #5264AE;
 }

 to {
  width: 0;
  background: transparent;
 }
}
</style>


================================================
FILE: Inputs/Galahhad_average-snail-50.html
================================================
<input type="password" name="text" class="input" pattern="\d+" placeholder="Numbers only or shake">
<style>
/* From Uiverse.io by Galahhad - Tags: input */
.input {
  max-width: 190px;
  padding: 12px;
  border: none;
  border-radius: 4px;
  box-shadow: 2px 2px 7px 0 rgb(0, 0, 0, 0.2);
  outline: none;
  color: dimgray;
}

.input:invalid {
  animation: justshake 0.3s forwards;
  color: red;
}

@keyframes justshake {
  25% {
    transform: translateX(5px);
  }

  50% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }

  100% {
    transform: translateX-(5px);
  }
}
</style>


================================================
FILE: Inputs/Galahhad_breezy-wolverine-23.html
================================================
<label class="search-label">
    <input type="text" name="text" class="input" required="" placeholder="Type here...">
    <kbd class="slash-icon">/</kbd>
    <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 512 512" xml:space="preserve">
      <g>
        <path d="M55.146 51.887 41.588 37.786A22.926 22.926 0 0 0 46.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 0 0 .083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z" fill="currentColor" data-original="#000000" class=""></path>
      </g>
    </svg>
  </label>
<style>
/* From Uiverse.io by Galahhad - Tags: input */
.search-label {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  border: 1px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: #3D3D3D;
  padding: 9px;
  cursor: text;
}

.search-label:hover {
  border-color: gray;
}

.search-label:focus-within {
  background: #464646;
  border-color: gray;
}

.search-label input {
  outline: none;
  width: 100%;
  border: none;
  background: none;
  color: rgb(162, 162, 162);
}

.search-label input:focus+.slash-icon,
.search-label input:valid+.slash-icon {
  display: none;
}

.search-label input:valid~.search-icon {
  display: block;
}

.search-label input:valid {
  width: calc(100% - 22px);
  transform: translateX(20px);
}

.search-label svg,
.slash-icon {
  position: absolute;
  color: #7e7e7e;
}

.search-icon {
  display: none;
  width: 12px;
  height: auto;
}

.slash-icon {
  right: 7px;
  border: 1px solid #393838;
  background: linear-gradient(-225deg, #343434, #6d6d6d);
  border-radius: 3px;
  text-align: center;
  box-shadow: inset 0 -2px 0 0 #3f3f3f, inset 0 0 1px 1px rgb(94, 93, 93), 0 1px 2px 1px rgba(28, 28, 29, 0.4);
  cursor: pointer;
  font-size: 12px;
  width: 15px;
}

.slash-icon:active {
  box-shadow: inset 0 1px 0 0 #3f3f3f, inset 0 0 1px 1px rgb(94, 93, 93), 0 1px 2px 0 rgba(28, 28, 29, 0.4);
  text-shadow: 0 1px 0 #7e7e7e;
  color: transparent;
}
</style>


================================================
FILE: Inputs/Galahhad_happy-dodo-17.html
================================================
<label class="slider">
      <input type="range" class="level">
      <svg class="volume" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
          <g>
              <path d="M18.36 19.36a1 1 0 0 1-.705-1.71C19.167 16.148 20 14.142 20 12s-.833-4.148-2.345-5.65a1 1 0 1 1 1.41-1.419C20.958 6.812 22 9.322 22 12s-1.042 5.188-2.935 7.069a.997.997 0 0 1-.705.291z" fill="currentColor" data-original="#000000"></path>
              <path d="M15.53 16.53a.999.999 0 0 1-.703-1.711C15.572 14.082 16 13.054 16 12s-.428-2.082-1.173-2.819a1 1 0 1 1 1.406-1.422A6 6 0 0 1 18 12a6 6 0 0 1-1.767 4.241.996.996 0 0 1-.703.289zM12 22a1 1 0 0 1-.707-.293L6.586 17H4c-1.103 0-2-.897-2-2V9c0-1.103.897-2 2-2h2.586l4.707-4.707A.998.998 0 0 1 13 3v18a1 1 0 0 1-1 1z" fill="currentColor" data-original="#000000"></path>
          </g>
      </svg>
  </label>
<style>
/* From Uiverse.io by Galahhad - Tags: input, range, volume */
/* level settings 👇 */

.slider {
  /* slider */
  --slider-width: 100%;
  --slider-height: 6px;
  --slider-bg: rgb(82, 82, 82);
  --slider-border-radius: 999px;
  /* level */
  --level-color: #fff;
  --level-transition-duration: .1s;
  /* icon */
  --icon-margin: 15px;
  --icon-color: var(--slider-bg);
  --icon-size: 25px;
}

.slider {
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.slider .volume {
  display: inline-block;
  vertical-align: top;
  margin-right: var(--icon-margin);
  color: var(--icon-color);
  width: var(--icon-size);
  height: auto;
}

.slider .level {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--slider-width);
  height: var(--slider-height);
  background: var(--slider-bg);
  overflow: hidden;
  border-radius: var(--slider-border-radius);
  -webkit-transition: height var(--level-transition-duration);
  -o-transition: height var(--level-transition-duration);
  transition: height var(--level-transition-duration);
  cursor: inherit;
}

.slider .level::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0;
  height: 0;
  -webkit-box-shadow: -200px 0 0 200px var(--level-color);
  box-shadow: -200px 0 0 200px var(--level-color);
}

.slider:hover .level {
  height: calc(var(--slider-height) * 2);
}
</style>


================================================
FILE: Inputs/Galahhad_lovely-termite-57.html
================================================
<label class="password-label">
    <input placeholder="Enter this 123456Qw" required="" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)[A-Za-z\d]{8,}$" class="input" type="password">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" height="20" width="20" class="close">
      <g clip-path="url(#clip0_4_24)">
        <path fill="#4EF54B" d="M17.1354 10.3645C16.8922 10.1214 16.5972 10 16.2498 10H6.66659V5.83341C6.66659 4.91312 6.99217 4.12763 7.64325 3.47655C8.29438 2.82561 9.07991 2.50007 10.0001 2.50007C10.9202 2.50007 11.7059 2.82556 12.3567 3.47655C13.0079 4.12763 13.3335 4.91316 13.3335 5.83341C13.3335 6.05903 13.4159 6.25431 13.5806 6.41923C13.7458 6.58419 13.9412 6.66669 14.1665 6.66669H15.0003C15.2258 6.66669 15.4211 6.58419 15.5862 6.41923C15.7507 6.25431 15.8334 6.05903 15.8334 5.83341C15.8334 4.22733 15.2627 2.85389 14.1213 1.71231C12.9798 0.570683 11.606 7.62939e-06 10.0001 7.62939e-06C8.39412 7.62939e-06 7.02045 0.570683 5.87883 1.71226C4.73738 2.8537 4.16666 4.22728 4.16666 5.83337V9.99999H3.75005C3.40293 9.99999 3.10772 10.1216 2.86464 10.3645C2.62156 10.6073 2.50006 10.9026 2.50006 11.2499V18.75C2.50006 19.0974 2.6216 19.3925 2.86464 19.6355C3.10772 19.8784 3.40293 20 3.75005 20H16.2498C16.5972 20 16.8925 19.8784 17.1354 19.6355C17.3782 19.3925 17.4999 19.0974 17.4999 18.75V11.2499C17.5001 10.9027 17.3785 10.6077 17.1354 10.3645Z"></path>
        <path fill="#4EF54B" d="M2.86464 10.3645C3.10777 10.1214 3.4028 10 3.75019 10H13.3334V5.83341C13.3334 4.91312 13.0078 4.12763 12.3567 3.47655C11.7056 2.82561 10.9201 2.50007 9.99989 2.50007C9.07978 2.50007 8.29411 2.82556 7.64326 3.47655C6.99213 4.12763 6.66655 4.91316 6.66655 5.83341C6.66655 6.05903 6.58413 6.25431 6.41936 6.41923C6.25422 6.58419 6.05884 6.66669 5.83345 6.66669H4.99972C4.77419 6.66669 4.5789 6.58419 4.41376 6.41923C4.24931 6.25431 4.16657 6.05903 4.16657 5.83341C4.16657 4.22733 4.73734 2.85389 5.87869 1.71231C7.02023 0.570683 8.39403 7.62939e-06 9.99989 7.62939e-06C11.6059 7.62939e-06 12.9795 0.570683 14.1212 1.71226C15.2626 2.8537 15.8333 4.22728 15.8333 5.83337V9.99999H16.25C16.5971 9.99999 16.8923 10.1216 17.1354 10.3645C17.3784 10.6073 17.4999 10.9026 17.4999 11.2499V18.75C17.4999 19.0974 17.3784 19.3925 17.1354 19.6355C16.8923 19.8784 16.5971 20 16.25 20H3.75019C3.4028 20 3.1075 19.8784 2.86464 19.6355C2.62179 19.3925 2.50006 19.0974 2.50006 18.75V11.2499C2.49988 10.9027 2.62147 10.6077 2.86464 10.3645Z"></path>
      </g>
      <defs>
        <clipPath id="clip0_4_24">
          <rect fill="white" height="20" width="20"></rect>
        </clipPath>
      </defs>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" height="20" width="20" class="open">
      <g clip-path="url(#clip0_4_24)">
        <path fill="currentColor" d="M17.1354 10.3645C16.8922 10.1214 16.5972 10 16.2498 10H6.66659V5.83341C6.66659 4.91312 6.99217 4.12763 7.64325 3.47655C8.29438 2.82561 9.07991 2.50007 10.0001 2.50007C10.9202 2.50007 11.7059 2.82556 12.3567 3.47655C13.0079 4.12763 13.3335 4.91316 13.3335 5.83341C13.3335 6.05903 13.4159 6.25431 13.5806 6.41923C13.7458 6.58419 13.9412 6.66669 14.1665 6.66669H15.0003C15.2258 6.66669 15.4211 6.58419 15.5862 6.41923C15.7507 6.25431 15.8334 6.05903 15.8334 5.83341C15.8334 4.22733 15.2627 2.85389 14.1213 1.71231C12.9798 0.570683 11.606 7.62939e-06 10.0001 7.62939e-06C8.39412 7.62939e-06 7.02045 0.570683 5.87883 1.71226C4.73738 2.8537 4.16666 4.22728 4.16666 5.83337V9.99999H3.75005C3.40293 9.99999 3.10772 10.1216 2.86464 10.3645C2.62156 10.6073 2.50006 10.9026 2.50006 11.2499V18.75C2.50006 19.0974 2.6216 19.3925 2.86464 19.6355C3.10772 19.8784 3.40293 20 3.75005 20H16.2498C16.5972 20 16.8925 19.8784 17.1354 19.6355C17.3782 19.3925 17.4999 19.0974 17.4999 18.75V11.2499C17.5001 10.9027 17.3785 10.6077 17.1354 10.3645Z"></path>
      </g>
      <defs>
        <clipPath>
          <rect fill="currentColor" height="20" width="20"></rect>
        </clipPath>
      </defs>
    </svg>
  </label>
<style>
/* From Uiverse.io by Galahhad - Tags: input */
.password-label {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
}

.password-label svg {
  width: 15px;
  height: auto;
  color: #7c7c7c;
}

.password-label input {
  width: 100%;
  outline: none;
  background: none;
  border: 1px solid transparent;
  color: #8b8b8b;
  background: #3D3D3D;
  border-radius: 12px;
  padding: 9px 30px 9px 9px;
  transition: .2s;
}

.password-label input:hover,
.password-label input:focus {
  border-color: #868686;
}

.password-label input:valid {
  background: #344b3a;
  border: 1px solid #00FF29;
  color: #00FF29;
}

.password-label input:valid~.open {
  display: none;
}

.password-label input:valid~.close {
  display: block;
}

.password-label svg {
  position: absolute;
  right: 9px;
}

.close {
  display: none;
}
</style>


================================================
FILE: Inputs/Galahhad_nasty-robin-22.html
================================================
<div class="ui-wrapper">
    <input checked="" id="Austria" name="flag" type="radio">
    <input id="Belgium" name="flag" type="radio">
    <input id="Bulgaria" name="flag" type="radio">
    <input id="Croatia" name="flag" type="radio">
    <input id="Cyprus" name="flag" type="radio">
    <input id="Czech" name="flag" type="radio">
    <input id="Denmark" name="flag" type="radio">
    <input id="Estonia" name="flag" type="radio">
    <input id="Finland" name="flag" type="radio">
    <input id="France" name="flag" type="radio">
    <input id="Germany" name="flag" type="radio">
    <input id="Greece" name="flag" type="radio">
    <input id="Hungary" name="flag" type="radio">
    <input id="Iceland" name="flag" type="radio">
    <input id="Ireland" name="flag" type="radio">
    <input id="Italy" name="flag" type="radio">
    <input id="Latvia" name="flag" type="radio">
    <input id="Liechtenstein" name="flag" type="radio">
    <input id="Lithuania" name="flag" type="radio">
    <input id="Luxembourg" name="flag" type="radio">
    <input id="Malta" name="flag" type="radio">
    <input id="Netherlands" name="flag" type="radio">
    <input id="Norway" name="flag" type="radio">
    <input id="Poland" name="flag" type="radio">
    <input id="Portugal" name="flag" type="radio">
    <input id="Romania" name="flag" type="radio">
    <input id="Slovakia" name="flag" type="radio">
    <input id="Slovenia" name="flag" type="radio">
    <input id="Spain" name="flag" type="radio">
    <input id="Sweden" name="flag" type="radio">
    <input class="dropdown-checkbox" name="dropdown" id="dropdown" type="checkbox">
    <label class="dropdown-container" for="dropdown"></label>
    <div class="input-wrapper">
        <legend>
          <label for="phonenumber">
            Phonenumber*
          </label>
        </legend>
        <div class="textfield">
            <input pattern="\d+" maxlength="11" id="phonenumber" type="text">
            <span class="invalid-msg">This is not a valid phone number</span>
        </div>
    </div>
    <div class="select-wrapper">
        <ul>
            <li class="Austria"><label for="Austria"><span>🇦🇹</span>Austria (+43)</label></li>
            <li class="Belgium"><label for="Belgium"><span>🇧🇪</span>Belgium (+32)</label></li>
            <li class="Bulgaria"><label for="Bulgaria"><span>🇧🇬</span>Bulgaria (+359)</label></li>
            <li class="Croatia"><label for="Croatia"><span>🇭🇷</span>Croatia (+385)</label></li>
            <li class="Cyprus"><label for="Cyprus"><span>🇨🇾</span>Cyprus (+357)</label></li>
            <li class="Czech"><label for="Czech"><span>🇨🇿</span>Czech Republic (+420)</label></li>
            <li class="Denmark"><label for="Denmark"><span>🇩🇰</span>Denmark (+45)</label></li>
            <li class="Estonia"><label for="Estonia"><span>🇪🇪</span>Estonia (+372)</label></li>
            <li class="Finland"><label for="Finland"><span>🇫🇮</span>Finland (+358)</label></li>
            <li class="France"><label for="France"><span>🇫🇷</span>France (+33)</label></li>
            <li class="Germany"><label for="Germany"><span>🇩🇪</span>Germany (+49)</label></li>
            <li class="Greece"><label for="Greece"><span>🇬🇷</span>Greece (+30)</label></li>
            <li class="Hungary"><label for="Hungary"><span>🇭🇺</span>Hungary (+36)</label></li>
            <li class="Iceland"><label for="Iceland"><span>🇮🇸</span>Iceland (+354)</label></li>
            <li class="Ireland"><label for="Ireland"><span>🇮🇪</span>Republic of Ireland (+353)</label></li>
            <li class="Italy"><label for="Italy"><span>🇮🇹</span>Italy (+39)</label></li>
            <li class="Latvia"><label for="Latvia"><span>🇱🇻</span>Latvia (+371)</label></li>
            <li class="Liechtenstein"><label for="Liechtenstein"><span>🇱🇮</span>Liechtenstein (+423)</label></li>
            <li class="Lithuania"><label for="Lithuania"><span>🇱🇹</span>Lithuania (+370)</label></li>
            <li class="Luxembourg"><label for="Luxembourg"><span>🇱🇺</span>Luxembourg (+352)</label></li>
            <li class="Malta"><label for="Malta"><span>🇲🇹</span>Malta (+356)</label></li>
            <li class="Netherlands"><label for="Netherlands"><span>🇳🇱</span>Netherlands (+31)</label></li>
            <li class="Norway"><label for="Norway"><span>🇳🇴</span>Norway (+47)</label></li>
            <li class="Poland"><label for="Poland"><span>🇵🇱</span>Poland (+48)</label></li>
            <li class="Portugal"><label for="Portugal"><span>🇵🇹</span>Portugal (+351)</label></li>
            <li class="Romania"><label for="Romania"><span>🇷🇴</span>Romania (+40)</label></li>
            <li class="Slovakia"><label for="Slovakia"><span>🇸🇰</span>Slovakia (+421)</label></li>
            <li class="Slovenia"><label for="Slovenia"><span>🇸🇮</span>Slovenia (+386)</label></li>
            <li class="Spain"><label for="Spain"><span>🇪🇸</span>Spain (+34)</label></li>
            <li class="Sweden"><label for="Sweden"><span>🇸🇪</span>Sweden (+46)</label></li>
        </ul>
    </div>
</div>
<style>
/* From Uiverse.io by Galahhad - Source: https://codepen.io/NielsVoogt/pen/eYvMvjN - Tags: input, validate, phone number */
.ui-wrapper {
  --width: 250px;
  --height: 50px;
  --background: #fff;
  --text-color: rgb(73, 73, 73);
  --border-color: rgb(185, 184, 184);
  --border-focus-color: rgb(0, 110, 255);
  --shadow-color: rgba(34, 60, 80, 0.2);
  --shadow-focus-color: rgba(0, 110, 255, 0.2);
  --dropdown-button-color: #e6e6e6;
  --dropdown-button-hover-color: #dad9d9;
}

.ui-wrapper *,
.ui-wrapper *::before,
.ui-wrapper *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: sans-serif;
  color: var(--text-color);
}

.ui-wrapper {
  width: var(--width);
  height: var(--height);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  border-radius: 10px;
  position: relative;
  border: 1px solid var(--border-color);
  background-color: var(--background);
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-right: 10px;
  -webkit-box-shadow: 0px 2px 5px 0px var(--shadow-color);
  box-shadow: 0px 2px 5px 0px var(--shadow-color);
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ui-wrapper>input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 9999px;
}

.dropdown-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
  border-radius: 9px 0 0 9px;
  background-color: var(--dropdown-button-color);
}

.dropdown-container::before {
  content: "🇦🇹";
  font-size: 20px;
  background: none !important;
}

.dropdown-container::after {
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNDk0OTQ5IiB3aWR0aD0iNzAwcHQiIGhlaWdodD0iNzAwcHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDcwMCA3MDAiCiAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxwYXRoCiAgICAgICAgZD0ibTM4MC4zOSA0ODQuNzkgMzA3LjA0LTMwNS45OWMxNi43NjYtMTcuODEyIDE2Ljc2Ni00NS4wNTkgMC02MS44MjgtMTYuNzY2LTE2Ljc2Ni00NS4wNTktMTYuNzY2LTYxLjgyOCAwbC0yNzUuNiAyNzUuNi0yNzUuNi0yNzUuNmMtMTcuODEyLTE2Ljc2Ni00NS4wNTktMTYuNzY2LTYxLjgyOCAwLTE2Ljc2NiAxNi43NjYtMTYuNzY2IDQ0LjAxMiAwIDYxLjgyOGwzMDUuOTkgMzA1Ljk5YzE3LjgxMiAxNi43NjYgNDUuMDU5IDE2Ljc2NiA2MS44MjggMHoiCiAgICAgICAgZmlsbC1ydWxlPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg==");
  width: 12px;
  height: 12px;
  background-position: center;
  background-size: cover;
  margin-left: 5px;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
}

.select-wrapper {
  width: var(--width);
  position: absolute;
  top: calc(var(--height) + 20px);
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
}

.select-wrapper ul {
  width: 100%;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  margin: 0;
  list-style: none;
  height: 300px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  white-space: nowrap;
}

.select-wrapper ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 5px;
  border-radius: 5px;
}

.select-wrapper ul li label {
  width: 100%;
}

.select-wrapper ul li,
.select-wrapper ul li * {
  cursor: pointer;
}

.select-wrapper ul li:hover {
  background: lightgray;
}

.select-wrapper ul li span {
  display: inline-block;
  margin-right: 15px;
}

.input-wrapper {
  width: 100%;
  padding-left: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  row-gap: 2px;
}

.input-wrapper legend {
  font-size: 11px;
}

.input-wrapper .textfield {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.input-wrapper .textfield::before {
  content: "+31";
  margin-right: 5px;
  white-space: nowrap;
}

.input-wrapper .textfield input {
  width: 100%;
  font-size: 16px;
  outline: none;
  border: none;
  background: none;
}

.invalid-msg {
  font-size: 12px;
  position: absolute;
  color: red;
  top: 115%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
}

/* actions */

#phonenumber:invalid+.invalid-msg {
  top: 110%;
  opacity: 1;
  visibility: visible;
}

.ui-wrapper:focus-within {
  border-color: var(--border-focus-color);
  -webkit-box-shadow: 0px 2px 5px 0px var(--shadow-focus-color);
  box-shadow: 0px 2px 5px 0px var(--shadow-focus-color);
}

.dropdown-container:hover {
  background-color: var(--dropdown-button-hover-color);
}

.dropdown-checkbox:checked~.select-wrapper {
  top: calc(var(--height) + 5px);
  opacity: 1;
  visibility: visible;
}

.dropdown-checkbox:checked+.dropdown-container::after {
  rotate: 180deg;
  translate: 0 -2px;
}

.ui-wrapper input#Austria:checked~.dropdown-container::before,
.ui-wrapper input#Austria:checked~.select-wrapper li.Austria {
  content: "🇦🇹";
  background-color: lightgray;
}

.ui-wrapper input#Belgium:checked~.dropdown-container::before,
.ui-wrapper input#Belgium:checked~.select-wrapper li.Belgium {
  content: "🇧🇪";
  background-color: lightgray;
}

.ui-wrapper input#Bulgaria:checked~.dropdown-container::before,
.ui-wrapper input#Bulgaria:checked~.select-wrapper li.Bulgaria {
  content: "🇧🇬";
  background-color: lightgray;
}

.ui-wrapper input#Croatia:checked~.dropdown-container::before,
.ui-wrapper input#Croatia:checked~.select-wrapper li.Croatia {
  content: "🇭🇷";
  background-color: lightgray;
}

.ui-wrapper input#Cyprus:checked~.dropdown-container::before,
.ui-wrapper input#Cyprus:checked~.select-wrapper li.Cyprus {
  content: "🇨🇾";
  background-color: lightgray;
}

.ui-wrapper input#Czech:checked~.dropdown-container::before,
.ui-wrapper input#Czech:checked~.select-wrapper li.Czech {
  content: "🇨🇿";
  background-color: lightgray;
}

.ui-wrapper input#Denmark:checked~.dropdown-container::before,
.ui-wrapper input#Denmark:checked~.select-wrapper li.Denmark {
  content: "🇩🇰";
  background-color: lightgray;
}

.ui-wrapper input#Estonia:checked~.dropdown-container::before,
.ui-wrapper input#Estonia:checked~.select-wrapper li.Estonia {
  content: "🇪🇪";
  background-color: lightgray;
}

.ui-wrapper input#Finland:checked~.dropdown-container::before,
.ui-wrapper input#Finland:checked~.select-wrapper li.Finland {
  content: "🇫🇮";
  background-color: lightgray;
}

.ui-wrapper input#France:checked~.dropdown-container::before,
.ui-wrapper input#France:checked~.select-wrapper li.France {
  content: "🇫🇷";
  background-color: lightgray;
}

.ui-wrapper input#Germany:checked~.dropdown-container::before,
.ui-wrapper input#Germany:checked~.select-wrapper li.Germany {
  content: "🇩🇪";
  background-color: lightgray;
}

.ui-wrapper input#Greece:checked~.dropdown-container::before,
.ui-wrapper input#Greece:checked~.select-wrapper li.Greece {
  content: "🇬🇷";
  background-color: lightgray;
}

.ui-wrapper input#Hungary:checked~.dropdown-container::before,
.ui-wrapper input#Hungary:checked~.select-wrapper li.Hungary {
  content: "🇭🇺";
  background-color: lightgray;
}

.ui-wrapper input#Iceland:checked~.dropdown-container::before,
.ui-wrapper input#Iceland:checked~.select-wrapper li.Iceland {
  content: "🇮🇸";
  background-color: lightgray;
}

.ui-wrapper input#Ireland:checked~.dropdown-container::before,
.ui-wrapper input#Ireland:checked~.select-wrapper li.Ireland {
  content: "🇮🇪";
  background-color: lightgray;
}

.ui-wrapper input#Italy:checked~.dropdown-container::before,
.ui-wrapper input#Italy:checked~.select-wrapper li.Italy {
  content: "🇮🇹";
  background-color: lightgray;
}

.ui-wrapper input#Latvia:checked~.dropdown-container::before,
.ui-wrapper input#Latvia:checked~.select-wrapper li.Latvia {
  content: "🇱🇻";
  background-color: lightgray;
}

.ui-wrapper input#Liechtenstein:checked~.dropdown-container::before,
.ui-wrapper input#Liechtenstein:checked~.select-wrapper li.Liechtenstein {
  content: "🇱🇮";
  background-color: lightgray;
}

.ui-wrapper input#Lithuania:checked~.dropdown-container::before,
.ui-wrapper input#Lithuania:checked~.select-wrapper li.Lithuania {
  content: "🇱🇹";
  background-color: lightgray;
}

.ui-wrapper input#Luxembourg:checked~.dropdown-container::before,
.ui-wrapper input#Luxembourg:checked~.select-wrapper li.Luxembourg {
  content: "🇱🇺";
  background-color: lightgray;
}

.ui-wrapper input#Malta:checked~.dropdown-container::before,
.ui-wrapper input#Malta:checked~.select-wrapper li.Malta {
  content: "🇲🇹";
  background-color: lightgray;
}

.ui-wrapper input#Netherlands:checked~.dropdown-container::before,
.ui-wrapper input#Netherlands:checked~.select-wrapper li.Netherlands {
  content: "🇳🇱";
  background-color: lightgray;
}

.ui-wrapper input#Norway:checked~.dropdown-container::before,
.ui-wrapper input#Norway:checked~.select-wrapper li.Norway {
  content: "🇳🇴";
  background-color: lightgray;
}

.ui-wrapper input#Poland:checked~.dropdown-container::before,
.ui-wrapper input#Poland:checked~.select-wrapper li.Poland {
  content: "🇵🇱";
  background-color: lightgray;
}

.ui-wrapper input#Portugal:checked~.dropdown-container::before,
.ui-wrapper input#Portugal:checked~.select-wrapper li.Portugal {
  content: "🇵🇹";
  background-color: lightgray;
}

.ui-wrapper input#Romania:checked~.dropdown-container::before,
.ui-wrapper input#Romania:checked~.select-wrapper li.Romania {
  content: "🇷🇴";
  background-color: lightgray;
}

.ui-wrapper input#Slovakia:checked~.dropdown-container::before,
.ui-wrapper input#Slovakia:checked~.select-wrapper li.Slovakia {
  content: "🇸🇰";
  background-color: lightgray;
}

.ui-wrapper input#Slovenia:checked~.dropdown-container::before,
.ui-wrapper input#Slovenia:checked~.select-wrapper li.Slovenia {
  content: "🇸🇮";
  background-color: lightgray;
}

.ui-wrapper input#Spain:checked~.dropdown-container::before,
.ui-wrapper input#Spain:checked~.select-wrapper li.Spain {
  content: "🇪🇸";
  background-color: lightgray;
}

.ui-wrapper input#Sweden:checked~.dropdown-container::before,
.ui-wrapper input#Sweden:checked~.select-wrapper li.Sweden {
  content: "🇸🇪";
  background-color: lightgray;
}

.ui-wrapper input#Austria:checked~.input-wrapper .textfield::before {
  content: "+43";
}

.ui-wrapper input#Belgium:checked~.input-wrapper .textfield::before {
  content: "+32";
}

.ui-wrapper input#Bulgaria:checked~.input-wrapper .textfield::before {
  content: "+359";
}

.ui-wrapper input#Croatia:checked~.input-wrapper .textfield::before {
  content: "+385";
}

.ui-wrapper input#Cyprus:checked~.input-wrapper .textfield::before {
  content: "+357";
}

.ui-wrapper input#Czech:checked~.input-wrapper .textfield::before {
  content: "+420";
}

.ui-wrapper input#Denmark:checked~.input-wrapper .textfield::before {
  content: "+45";
}

.ui-wrapper input#Estonia:checked~.input-wrapper .textfield::before {
  content: "+372";
}

.ui-wrapper input#Finland:checked~.input-wrapper .textfield::before {
  content: "+358";
}

.ui-wrapper input#France:checked~.input-wrapper .textfield::before {
  content: "+33";
}

.ui-wrapper input#Germany:checked~.input-wrapper .textfield::before {
  content: "+49";
}

.ui-wrapper input#Greece:checked~.input-wrapper .textfield::before {
  content: "+30";
}

.ui-wrapper input#Hungary:checked~.input-wrapper .textfield::before {
  content: "+36";
}

.ui-wrapper input#Iceland:checked~.input-wrapper .textfield::before {
  content: "+354";
}

.ui-wrapper input#Ireland:checked~.input-wrapper .textfield::before {
  content: "+353";
}

.ui-wrapper input#Italy:checked~.input-wrapper .textfield::before {
  content: "+39";
}

.ui-wrapper input#Latvia:checked~.input-wrapper .textfield::before {
  content: "+371";
}

.ui-wrapper input#Liechtenstein:checked~.input-wrapper .textfield::before {
  content: "+423";
}

.ui-wrapper input#Lithuania:checked~.input-wrapper .textfield::before {
  content: "+370";
}

.ui-wrapper input#Luxembourg:checked~.input-wrapper .textfield::before {
  content: "+352";
}

.ui-wrapper input#Malta:checked~.input-wrapper .textfield::before {
  content: "+356";
}

.ui-wrapper input#Netherlands:checked~.input-wrapper .textfield::before {
  content: "+31";
}

.ui-wrapper input#Norway:checked~.input-wrapper .textfield::before {
  content: "+47";
}

.ui-wrapper input#Poland:checked~.input-wrapper .textfield::before {
  content: "+48";
}

.ui-wrapper input#Portugal:checked~.input-wrapper .textfield::before {
  content: "+351";
}

.ui-wrapper input#Romania:checked~.input-wrapper .textfield::before {
  content: "+40";
}

.ui-wrapper input#Slovakia:checked~.input-wrapper .textfield::before {
  content: "+421";
}

.ui-wrapper input#Slovenia:checked~.input-wrapper .textfield::before {
  content: "+386";
}

.ui-wrapper input#Spain:checked~.input-wrapper .textfield::before {
  content: "+34";
}

.ui-wrapper input#Sweden:checked~.input-wrapper .textfield::before {
  content: "+46";
}
</style>


================================================
FILE: Inputs/Gautammsharma_shaggy-cheetah-41.html
================================================
<div class="input__container input__container--variant">
        <div class="shadow__input shadow__input--variant"></div>
        <input type="text" name="text" class="input__search input__search--variant" placeholder="Search...">
        <button class="input__button__shadow input__button__shadow--variant">
          <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="1.5em" width="13em">
            <path d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z" fill-rule="evenodd" fill="#FFF"></path>
          </svg>
        </button>
      </div>
<style>
/* From Uiverse.io by Gautammsharma - Tags: clean, material design, minimalist, input, search, glow */
.input__container--variant {
  background: linear-gradient(to bottom, #F3FFF9, #F3FFF9);
  border-radius: 30px;
  max-width: 13em;
  padding: 1em 1em;
}

.shadow__input--variant {
  filter: blur(25px);
  border-radius: 30px;
  background-color: #F3FFF9;
  opacity: 0.5;
}

.input__button__shadow--variant {
  border-radius: 15px;
  background-color: #07372C;
  padding: 10px;
  border: none;
}

.input__button__shadow--variant:hover {
  background-color: #3C6659;
}

.input__search--variant {
  width: 13em;
  align-items: center;
  border-radius: 13em;
  outline: none;
  border: none;
  padding: 0.8em;
  font-size: 1.2em;
  color: #002019;
  background-color: transparent;
}

.input__search--variant::placeholder {
  color: #002019;
  opacity: 0.7;
}

.input__container--variant {
  background: linear-gradient(to bottom, #F3FFF9, #F3FFF9);
  border-radius: 1.5em;
  max-width: 14em;
  padding: 1em;
  box-shadow: 0em 1em 3em #beecdc64;
}

</style>


================================================
FILE: Inputs/Harsha2lucky_lovely-firefox-67.html
================================================
<form>
	<label for="search">Search</label>
	<input required="" pattern=".*\S.*" type="search" class="input" id="search">
	<span class="caret"></span>
</form>
<style>
/* From Uiverse.io by Harsha2lucky - Tags: input */
.input {
  color: black;
  font: 1em/1.5 Hind, sans-serif;
}

form, .input, .caret {
  margin: auto;
}

form {
  position: relative;
  width: 100%;
  max-width: 17em;
}

.input, .caret {
  display: block;
  transition: all calc(1s * 0.5) linear;
}

.input {
  background: transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 0.25em inset;
  caret-color: #255ff4;
  width: 2em;
  height: 2em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.input:focus, .input:valid {
  background: powderblue;
  border-radius: 0.25em;
  box-shadow: none;
  padding: 0.75em 1em;
  transition-duration: calc(1s * 0.25);
  transition-delay: calc(1s * 0.25);
  width: 100%;
  height: 3em;
}

.input:focus {
  animation: showCaret 1s steps(1);
  outline: transparent;
}

.input:focus + .caret, .input:valid + .caret {
  animation: handleToCaret 1s linear;
  background: transparent;
  width: 1px;
  height: 1.5em;
  transform: translate(0,-1em) rotate(-180deg) translate(7.5em,-0.25em);
}

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

label {
  color: #e3e4e8;
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
}

.caret {
  background: black;
  border-radius: 0 0 0.125em 0.125em;
  margin-bottom: -0.6em;
  width: 0.25em;
  height: 1em;
  transform: translate(0,-1em) rotate(-45deg) translate(0,0.875em);
  transform-origin: 50% 0;
}

/* Animations */
@keyframes showCaret {
  from {
    caret-color: transparent;
  }

  to {
    caret-color: #255ff4;
  }
}

@keyframes handleToCaret {
  from {
    background: currentColor;
    width: 0.25em;
    height: 1em;
    transform: translate(0,-1em) rotate(-45deg) translate(0,0.875em);
  }

  25% {
    background: currentColor;
    width: 0.25em;
    height: 1em;
    transform: translate(0,-1em) rotate(-180deg) translate(0,0.875em);
  }

  50%, 62.5% {
    background: #255ff4;
    width: 1px;
    height: 1.5em;
    transform: translate(0,-1em) rotate(-180deg) translate(7.5em,2.5em);
  }

  75%, 99% {
    background: #255ff4;
    width: 1px;
    height: 1.5em;
    transform: translate(0,-1em) rotate(-180deg) translate(7.5em,-0.25em);
  }

  87.5% {
    background: #255ff4;
    width: 1px;
    height: 1.5em;
    transform: translate(0,-1em) rotate(-180deg) translate(7.5em,0.125em);
  }

  to {
    background: transparent;
    width: 1px;
    height: 1.5em;
    transform: translate(0,-1em) rotate(-180deg) translate(7.5em,-0.25em);
  }
}
</style>


================================================
FILE: Inputs/Itskrish01_bright-moose-63.html
================================================
<!-- From Uiverse.io by Itskrish01  - Tags: input, dark, realistic, tailwind, input -->
<div class="relative group">
  <div
    class="relative w-96 h-16 opacity-90 overflow-hidden rounded-2xl bg-black z-10"
  >
    <div
      class="absolute z-10 -translate-x-44 group-hover:translate-x-[30rem] ease-in transistion-all duration-500 h-full w-44 bg-gradient-to-r from-gray-500 to-white/10 opacity-30 -skew-x-12"
    ></div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="size-8 text-[#D3CCD4] absolute left-4 top-4 z-[2]"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
      ></path>
    </svg>
    <div
      class="absolute overflow-hidden top-[10px] right-3 rounded-xl bg-black p-[2px] z-20 opacity-90"
    >
      <div
        class="absolute group-hover:-left-24 transistion-all duration-300 ease-out w-32 h-5 bg-[#a8a0e0] rounded-full blur-[12px] -left-8 -top-6"
      ></div>
      <div
        class="absolute group-hover:-left-24 transistion-all duration-300 ease-out w-32 h-5 bg-[#a8a0e0] rounded-full blur-[12px] -left-8 -bottom-6"
      ></div>
      <div class="bg-black relative rounded-lg p-1.5">
        <div
          class="absolute group-hover:-left-16 transistion-all duration-300 ease-out w-32 h-5 bg-[#a8a0e0] rounded-full blur-[16px] -left-8 -top-8"
        ></div>
        <div
          class="absolute group-hover:-left-16 transistion-all duration-300 ease-out w-32 h-5 bg-[#a8a0e0] rounded-full blur-[16px] -left-8 -bottom-8"
        ></div>

        <svg
          class="size-7 text-white"
          stroke="currentColor"
          stroke-width="1.5"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"
            stroke-linejoin="round"
            stroke-linecap="round"
          ></path>
        </svg>
      </div>
    </div>
    <div
      class="absolute flex items-center justify-center text-white z-[1] opacity-90 rounded-2xl inset-0.5 bg-black"
    >
      <input
        type="text"
        name="text"
        placeholder="Search..."
        class="input placeholder:text-[#D3CCD4] focus:outline-none h-full opacity-90 w-full px-16 py-3 placeholder:text-xl rounded-2xl bg-black"
      />
    </div>
    <div
      class="absolute group-hover:-left-[5px] group-hover:-top-[170px] transistion-all duration-300 ease-out w-56 h-48 bg-[#e4a9dd] blur-[20px] -left-[150px] -top-[150px]"
    ></div>
    <div
      class="absolute group-hover:-right-[5px] group-hover:-bottom-[170px] transistion-all duration-300 ease-out w-56 h-48 bg-[#ADA2E8] blur-[20px] -right-[150px] -bottom-[150px]"
    ></div>
  </div>
  <div
    class="absolute w-32 rotate-6 h-10 bg-[#CE25A2] rounded-full blur-[8px] -left-0 top-1"
  ></div>
  <div
    class="absolute w-32 rotate-6 h-10 group-hover:w-44 transistion-all duration-300 ease-out bg-[#5241c9] rounded-2xl blur-[10px] -right-0 bottom-1"
  ></div>
  <div
    class="absolute w-32 h-14 group-hover:h-6 group-hover:blur-[40px] group-hover:w-56 transistion-all ease-out duration-300 bg-[#CE25A2] rounded-full blur-[50px] -left-5 -top-1"
  ></div>
  <div
    class="absolute w-32 h-14 group-hover:h-6 group-hover:blur-[40px] group-hover:w-56 transistion-all ease-out duration-300 bg-[#5241c9] rounded-full blur-[50px] -right-3 -bottom-2"
  ></div>
</div>


    

================================================
FILE: Inputs/Jaareet_serious-lionfish-75.html
================================================
<input type="text" name="text" class="input" placeholder="Write a message">
<style>
/* From Uiverse.io by Jaareet - Tags: input */
.input {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  font-weight: 500;
  font-size: .8vw;
  color: #fff;
  background-color: rgb(28,28,30);
  box-shadow: 0 0 .4vw rgba(0,0,0,0.5), 0 0 0 .15vw transparent;
  border-radius: 0.4vw;
  border: none;
  outline: none;
  padding: 0.4vw;
  max-width: 190px;
  transition: .4s;
}

.input:hover {
  box-shadow: 0 0 0 .15vw rgba(135, 207, 235, 0.186);
}

.input:focus {
  box-shadow: 0 0 0 .15vw skyblue;
}
</style>


================================================
FILE: Inputs/Javierrocadev_giant-goat-55.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: purple, input, blur filter, tailwind -->
<div class="relative rounded-lg w-64 overflow-hidden  before:absolute before:w-12 before:h-12 before:content[''] before:right-0 before:bg-violet-500 before:rounded-full before:blur-lg  after:absolute after:-z-10 after:w-20 after:h-20 after:content['']  after:bg-rose-300 after:right-12 after:top-3 after:rounded-full after:blur-lg">
 <input placeholder="Mail..." class="relative bg-transparent ring-0 outline-none border border-neutral-500 text-neutral-900 placeholder-violet-700 text-sm rounded-lg focus:ring-violet-500 placeholder-opacity-60 focus:border-violet-500 block w-full p-2.5 checked:bg-emerald-500" type="text">
</div>



================================================
FILE: Inputs/Javierrocadev_nasty-jellyfish-18.html
================================================
<!-- From Uiverse.io by Javierrocadev  - Tags: pink, hover, input, light, select -->
<div
  class="relative group rounded-lg w-64 bg-gray-50 overflow-hidden before:absolute before:w-12 before:h-12 before:content[''] before:right-0 before:bg-violet-500 before:rounded-full before:blur-lg before:[box-shadow:-60px_20px_10px_10px_#F9B0B9]"
>
  <svg
    y="0"
    xmlns="http://www.w3.org/2000/svg"
    x="0"
    width="100"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMidYMid meet"
    height="100"
    class="w-8 h-8 absolute right-0 -rotate-45 stroke-pink-300 top-1.5 group-hover:rotate-0 duration-300"
  >
    <path
      stroke-width="4"
      stroke-linejoin="round"
      stroke-linecap="round"
      fill="none"
      d="M60.7,53.6,50,64.3m0,0L39.3,53.6M50,64.3V35.7m0,46.4A32.1,32.1,0,1,1,82.1,50,32.1,32.1,0,0,1,50,82.1Z"
      class="svg-stroke-primary"
    ></path>
  </svg>
  <select
    class="appearance-none hover:placeholder-shown:bg-emerald-500 relative text-pink-400 bg-transparent ring-0 outline-none border border-neutral-500 text-neutral-900 placeholder-violet-700 text-sm font-bold rounded-lg focus:ring-violet-500 focus:border-violet-500 block w-full p-2.5"
  >
    <option>HTML</option>
    <option>React</option>
    <option>Vue</option>
    <option>Angular</option>
    <option>Svelte</option>
  </select>
</div>


    

================================================
FILE: Inputs/JayRamoliya_loud-rattlesnake-53.html
================================================
<input placeholder="Enter text here" class="input-style" type="text">

<style>
/* From Uiverse.io by JayRamoliya - Tags: input */
.input-style {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  color: #555;
  outline: none;
}

.input-style:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

</style>


================================================
FILE: Inputs/JaydipPrajapati1910_bitter-octopus-23.html
================================================
<input placeholder="Username" type="text" name="text" class="input">
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: neumorphism, input */
.input {
  max-width: 190px;
  border: none;
  outline: none;
  background: none;
  font-size: 18px;
  color: #555;
  padding: 15px 5px 10px 20px;
  box-shadow: inset 8px 8px 8px #cbced1,
              inset -8px -8px 8px #ffffff;
  border-radius: 25px;
}

.input::placeholder {
  color: #555;
  transition: all 0.3s ease;
}

.input:focus::placeholder {
  color: #999;
}
</style>


================================================
FILE: Inputs/JaydipPrajapati1910_black-impala-70.html
================================================
<input class="input" name="text" type="text" placeholder="Name">
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: animation, input, input effect  */
.input {
  max-width: 190px;
  border: none;
  outline: none;
  background: none;
  font-size: 18px;
  color: #fff;
  padding: 15px 5px 10px 20px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  background-position: bottom right, bottom right;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4),
    inset -4px -8px 0px rgba(0, 0, 0, 0.3),
    0px 2px 1px rgba(0, 0, 0, 0.3),
    0px 2px 1px rgba(255, 255, 255, 0.1);
  transform: perspective(70px) rotateX(5deg) rotateY(0deg);
  border-radius: 10px;
}

.input::before {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  background-position: bottom right, bottom right;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
  border-radius: 15px;
  transition: all .1s ease-in-out 0s;
}

.input:focus {
  border: 2px solid #c3c6ce;
}

.input::placeholder {
  color: #fff;
  transition: all 0.3s ease;
}

.input:focus::placeholder {
  color: #999;
}



</style>


================================================
FILE: Inputs/JaydipPrajapati1910_foolish-liger-62.html
================================================
<div class="group">
    <svg viewBox="0 0 24 24" aria-hidden="true" class="icon">
        <g>
            <path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path>
        </g>
    </svg>
    <input class="input" type="search" placeholder="Search">
</div>

<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: input, search, border, search bar */
.group {
  display: flex;
  line-height: 28px;
  align-items: center;
  position: relative;
  max-width: 190px;
}

.input {
  height: 40px;
  line-height: 28px;
  padding: 0 1rem;
  width: 100%;
  padding-left: 2.5rem;
  outline: none;
  background: linear-gradient(180deg,     rgb(56, 56, 56) 0%, rgb(36, 36, 36)   66%, rgb(41, 41, 41) 100%);
  color: #fff;
  transition: .3s ease;
  border: 2px solid;
  border-image: conic-gradient( #00F260, #0575E6,#64f38c) 1;
}

.input::placeholder {
  color: #fff;
}

.input:focus::placeholder {
  color: #999;
}

.icon {
  position: absolute;
  left: 1rem;
  fill: #fff;
  width: 1rem;
  height: 1rem;
}

</style>


================================================
FILE: Inputs/JaydipPrajapati1910_shaggy-wasp-51.html
================================================
<input type="text" name="text" class="input" placeholder="Username">
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: input, transparent, input effect , box-shadow */
.input {
  max-width: 190px;
  border: none;
  outline: none;
  background: none;
  font-size: 18px;
  color: #222;
  padding: 15px 5px 10px 20px;
  box-shadow: inset 4px 4px 4px rgba(15, 15, 15, 0.315),4px 4px 4px rgba(28, 28, 28, 0.13);
  border-radius: 25px;
  background-clip: padding-box;
}

.input:focus {
  padding-bottom: 10px;
}

.input::placeholder {
  color: #222;
  text-transform: uppercase;
  transition: all 0.3s ease;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .3px;
}

.input:focus::placeholder {
  color: #999;
}



</style>


================================================
FILE: Inputs/JaydipPrajapati1910_shy-turkey-95.html
================================================
<input class="input" name="text" type="text" placeholder="Name">
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: animation, input */
.input {
  max-width: 190px;
  border: none;
  outline: none;
  background: none;
  font-size: 18px;
  color: #222;
  padding: 15px 5px 10px 20px;
  box-shadow: Inset 0 1px 25px rgba(0, 0, 0, 0.55);
  border-radius: 25px;
}

.input:focus {
  border: 2px solid #c3c6ce;
}

.input::placeholder {
  color: #555;
  transition: all 0.3s ease;
}

.input:focus::placeholder {
  color: #999;
}

</style>


================================================
FILE: Inputs/Jules-gitclerc_fresh-emu-37.html
================================================
<!-- From Uiverse.io by Jules-gitclerc  - Tags: material design, input, creditcard, payment, mastercard -->
<div
  class="flex flex-col justify-around bg-gray-800 p-4 border border-white border-opacity-30 rounded-lg shadow-md max-w-xs mx-auto"
>
  <div class="flex flex-row items-center justify-between mb-3">
    <input
      class="w-full h-10 border-none outline-none text-sm bg-gray-800 text-white font-semibold caret-orange-500 pl-2 mb-3 flex-grow"
      type="text"
      name="cardName"
      id="cardName"
      placeholder="Full Name"
    />
    <div
      class="flex items-center justify-center relative w-14 h-9 bg-gray-800 border border-white border-opacity-20 rounded-md"
    >
      <svg
        class="text-white fill-current"
        xmlns="http://www.w3.org/2000/svg"
        width="30"
        height="30"
        viewBox="0 0 48 48"
      >
        <path
          fill="#ff9800"
          d="M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z"
        ></path>
        <path
          fill="#d50000"
          d="M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z"
        ></path>
        <path
          fill="#ff3d00"
          d="M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z"
        ></path>
      </svg>
    </div>
  </div>
  <div class="flex flex-col space-y-3">
    <input
      class="w-full h-10 border-none outline-none text-sm bg-gray-800 text-white font-semibold caret-orange-500 pl-2"
      type="text"
      name="cardNumber"
      id="cardNumber"
      placeholder="0000 0000 0000 0000"
    />
    <div class="flex flex-row justify-between">
      <input
        class="w-full h-10 border-none outline-none text-sm bg-gray-800 text-white font-semibold caret-orange-500 pl-2"
        type="text"
        name="expiryDate"
        id="expiryDate"
        placeholder="MM/AA"
      />
      <input
        class="w-full h-10 border-none outline-none text-sm bg-gray-800 text-white font-semibold caret-orange-500 pl-2"
        type="text"
        name="cvv"
        id="cvv"
        placeholder="CVV"
      />
    </div>
  </div>
</div>


    

================================================
FILE: Inputs/Jules-gitclerc_red-bear-19.html
================================================
<!-- From Uiverse.io by Jules-gitclerc  - Tags: material design, input, creditcard, payment, mastercard -->
<div
  class="flex items-center justify-center bg-gray-800 overflow-hidden p-1 border border-white border-opacity-30 rounded-lg shadow-md h-9"
>
  <input
    class="w-42 h-full border-none outline-none text-sm bg-gray-800 text-white font-semibold caret-orange-500 pl-2"
    type="text"
    name="text"
    id="input"
    placeholder="0000 0000 0000 0000"
  />
  <div
    class="flex items-center justify-center relative w-10 h-6 bg-gray-800 border border-white border-opacity-20 rounded-md"
  >
    <svg
      class="text-white fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="23"
      height="23"
      viewBox="0 0 48 48"
    >
      <path
        fill="#ff9800"
        d="M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z"
      ></path>
      <path
        fill="#d50000"
        d="M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z"
      ></path>
      <path
        fill="#ff3d00"
        d="M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z"
      ></path>
    </svg>
  </div>
</div>


    

================================================
FILE: Inputs/Lakshay-art_curvy-earwig-22.html
================================================
<div class="grid"></div>
<div id="poda">
  <div class="glow"></div>
  <div class="darkBorderBg"></div>
  <div class="darkBorderBg"></div>
  <div class="darkBorderBg"></div>

  <div class="white"></div>

  <div class="border"></div>

  <div id="main">
    <input placeholder="Search..." type="text" name="text" class="input" />
    <div id="input-mask"></div>
    <div id="pink-mask"></div>
    <div class="filterBorder"></div>
    <div id="filter-icon">
      <svg
        preserveAspectRatio="none"
        height="27"
        width="27"
        viewBox="4.8 4.56 14.832 15.408"
        fill="none"
      >
        <path
          d="M8.16 6.65002H15.83C16.47 6.65002 16.99 7.17002 16.99 7.81002V9.09002C16.99 9.56002 16.7 10.14 16.41 10.43L13.91 12.64C13.56 12.93 13.33 13.51 13.33 13.98V16.48C13.33 16.83 13.1 17.29 12.81 17.47L12 17.98C11.24 18.45 10.2 17.92 10.2 16.99V13.91C10.2 13.5 9.97 12.98 9.73 12.69L7.52 10.36C7.23 10.08 7 9.55002 7 9.20002V7.87002C7 7.17002 7.52 6.65002 8.16 6.65002Z"
          stroke="#d6d6e6"
          stroke-width="1"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </div>
    <div id="search-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        viewBox="0 0 24 24"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
        height="24"
        fill="none"
        class="feather feather-search"
      >
        <circle stroke="url(#search)" r="8" cy="11" cx="11"></circle>
        <line
          stroke="url(#searchl)"
          y2="16.65"
          y1="22"
          x2="16.65"
          x1="22"
        ></line>
        <defs>
          <linearGradient gradientTransform="rotate(50)" id="search">
            <stop stop-color="#f8e7f8" offset="0%"></stop>
            <stop stop-color="#b6a9b7" offset="50%"></stop>
          </linearGradient>
          <linearGradient id="searchl">
            <stop stop-color="#b6a9b7" offset="0%"></stop>
            <stop stop-color="#837484" offset="50%"></stop>
          </linearGradient>
        </defs>
      </svg>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Lakshay-art  - Tags: input */
.grid {
  height: 800px;
  width: 800px;
  background-image: linear-gradient(to right, #0f0f10 1px, transparent 1px),
    linear-gradient(to bottom, #0f0f10 1px, transparent 1px);
  background-size: 1rem 1rem;
  background-position: center center;
  position: absolute;
  z-index: -1;
  filter: blur(1px);
}
.white,
.border,
.darkBorderBg,
.glow {
  max-height: 70px;
  max-width: 314px;
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  /* Border Radius */
  border-radius: 12px;
  filter: blur(3px);
}
.input {
  background-color: #010201;
  border: none;
  /* padding:7px; */
  width: 301px;
  height: 56px;
  border-radius: 10px;
  color: white;
  padding-inline: 59px;
  font-size: 18px;
}
#poda {
  display: flex;
  align-items: center;
  justify-content: center;
}
.input::placeholder {
  color: #c0b9c0;
}

.input:focus {
  outline: none;
}

#main:focus-within > #input-mask {
  display: none;
}

#input-mask {
  pointer-events: none;
  width: 100px;
  height: 20px;
  position: absolute;
  background: linear-gradient(90deg, transparent, black);
  top: 18px;
  left: 70px;
}
#pink-mask {
  pointer-events: none;
  width: 30px;
  height: 20px;
  position: absolute;
  background: #cf30aa;
  top: 10px;
  left: 5px;
  filter: blur(20px);
  opacity: 0.8;
  //animation:leftright 4s ease-in infinite;
  transition: all 2s;
}
#main:hover > #pink-mask {
  //animation: rotate 4s linear infinite;
  opacity: 0;
}

.white {
  max-height: 63px;
  max-width: 307px;
  border-radius: 10px;
  filter: blur(2px);
}

.white::before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(83deg);
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: brightness(1.4);
  background-image: conic-gradient(
    rgba(0, 0, 0, 0) 0%,
    #a099d8,
    rgba(0, 0, 0, 0) 8%,
    rgba(0, 0, 0, 0) 50%,
    #dfa2da,
    rgba(0, 0, 0, 0) 58%
  );
  //  animation: rotate 4s linear infinite;
  transition: all 2s;
}
.border {
  max-height: 59px;
  max-width: 303px;
  border-radius: 11px;
  filter: blur(0.5px);
}
.border::before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(70deg);
  position: absolute;
  width: 600px;
  height: 600px;
  filter: brightness(1.3);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    #1c191c,
    #402fb5 5%,
    #1c191c 14%,
    #1c191c 50%,
    #cf30aa 60%,
    #1c191c 64%
  );
  // animation: rotate 4s 0.1s linear infinite;
  transition: all 2s;
}
.darkBorderBg {
  max-height: 65px;
  max-width: 312px;
}
.darkBorderBg::before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(82deg);
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    rgba(0, 0, 0, 0),
    #18116a,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0) 50%,
    #6e1b60,
    rgba(0, 0, 0, 0) 60%
  );
  transition: all 2s;
}
#poda:hover > .darkBorderBg::before {
  transform: translate(-50%, -50%) rotate(262deg);
}
#poda:hover > .glow::before {
  transform: translate(-50%, -50%) rotate(240deg);
}
#poda:hover > .white::before {
  transform: translate(-50%, -50%) rotate(263deg);
}
#poda:hover > .border::before {
  transform: translate(-50%, -50%) rotate(250deg);
}

#poda:hover > .darkBorderBg::before {
  transform: translate(-50%, -50%) rotate(-98deg);
}
#poda:hover > .glow::before {
  transform: translate(-50%, -50%) rotate(-120deg);
}
#poda:hover > .white::before {
  transform: translate(-50%, -50%) rotate(-97deg);
}
#poda:hover > .border::before {
  transform: translate(-50%, -50%) rotate(-110deg);
}

#poda:focus-within > .darkBorderBg::before {
  transform: translate(-50%, -50%) rotate(442deg);
  transition: all 4s;
}
#poda:focus-within > .glow::before {
  transform: translate(-50%, -50%) rotate(420deg);
  transition: all 4s;
}
#poda:focus-within > .white::before {
  transform: translate(-50%, -50%) rotate(443deg);
  transition: all 4s;
}
#poda:focus-within > .border::before {
  transform: translate(-50%, -50%) rotate(430deg);
  transition: all 4s;
}

.glow {
  overflow: hidden;
  filter: blur(30px);
  opacity: 0.4;
  max-height: 130px;
  max-width: 354px;
}
.glow:before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  position: absolute;
  width: 999px;
  height: 999px;
  background-repeat: no-repeat;
  background-position: 0 0;
  /*border color, change middle color*/
  background-image: conic-gradient(
    #000,
    #402fb5 5%,
    #000 38%,
    #000 50%,
    #cf30aa 60%,
    #000 87%
  );
  /* change speed here */
  //animation: rotate 4s 0.3s linear infinite;
  transition: all 2s;
}

@keyframes rotate {
  100% {
    transform: translate(-50%, -50%) rotate(450deg);
  }
}
@keyframes leftright {
  0% {
    transform: translate(0px, 0px);
    opacity: 1;
  }

  49% {
    transform: translate(250px, 0px);
    opacity: 0;
  }
  80% {
    transform: translate(-40px, 0px);
    opacity: 0;
  }

  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}

#filter-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  max-height: 40px;
  max-width: 38px;
  height: 100%;
  width: 100%;

  isolation: isolate;
  overflow: hidden;
  /* Border Radius */
  border-radius: 10px;
  background: linear-gradient(180deg, #161329, black, #1d1b4b);
  border: 1px solid transparent;
}
.filterBorder {
  height: 42px;
  width: 40px;
  position: absolute;
  overflow: hidden;
  top: 7px;
  right: 7px;
  border-radius: 10px;
}

.filterBorder::before {
  content: "";

  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: brightness(1.35);
  background-image: conic-gradient(
    rgba(0, 0, 0, 0),
    #3d3a4f,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0) 50%,
    #3d3a4f,
    rgba(0, 0, 0, 0) 100%
  );
  animation: rotate 4s linear infinite;
}
#main {
  position: relative;
}
#search-icon {
  position: absolute;
  left: 20px;
  top: 15px;
}

</style>
    

================================================
FILE: Inputs/LeonKohli_little-bulldog-27.html
================================================
<div class="ui-input-container">
  <input
    required=""
    placeholder="Type something..."
    class="ui-input"
    type="text"
  />
  <div class="ui-input-underline"></div>
  <div class="ui-input-highlight"></div>
  <div class="ui-input-icon">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <path
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="2"
        stroke="currentColor"
        d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
      ></path>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by LeonKohli  - Tags: simple, animation, form, active, input, search */
.ui-input-container {
  position: relative;
  width: 300px;
}

.ui-input {
  width: 100%;
  padding: 10px 10px 10px 40px;
  font-size: 1em;
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
  background-color: transparent;
  transition: border-color 0.3s;
}

.ui-input:focus {
  border-color: #6c63ff;
}

.ui-input-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #6c63ff;
  transform: scaleX(0);
  transition: transform 0.3s;
}

.ui-input:focus + .ui-input-underline {
  transform: scaleX(1);
}

.ui-input-highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: rgba(108, 99, 255, 0.1);
  transition: width 0.3s;
}

.ui-input:focus ~ .ui-input-highlight {
  width: 100%;
}

.ui-input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  transition: color 0.3s;
}

.ui-input:focus ~ .ui-input-icon {
  color: #6c63ff;
}

.ui-input-icon svg {
  width: 20px;
  height: 20px;
}

</style>
    

================================================
FILE: Inputs/LeonKohli_silly-dragonfly-82.html
================================================
<div class="neon-search-container">
  <div class="particle-container">
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
  </div>
  <div class="glow-container">
    <div class="glow-effect-left"></div>
    <div class="glow-effect-right"></div>
    <div class="search-bar">
      <div class="search-icon">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
          ></path>
        </svg>
      </div>
      <input type="text" class="search-input" placeholder="Search..." />
      <button class="filter-container">
        <div class="filter-icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
            ></path>
          </svg>
        </div>
      </button>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by LeonKohli  - Tags: input, modern, neon, search, neumorphism */
.neon-search-container {
  --background-color: rgb(1, 1, 1);
  --grid-color: rgb(20, 20, 20);
  --glow-color-1: rgba(227, 63, 183, 0.3);
  --glow-color-2: rgba(90, 73, 212, 0.3);
  --border-color-1: rgba(255, 100, 220, 1);
  --border-color-2: rgba(120, 100, 255, 1);
  --search-bar-gradient: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.541) 0%,
    rgba(0, 0, 0, 0.226) 100%
  );
  --filter-button-gradient: linear-gradient(
    135deg,
    rgba(120, 100, 255, 0.2) 0%,
    rgba(120, 100, 255, 0.1) 100%
  );

  width: 400px;
  height: 120px;
  position: relative;
  font-family: Arial, sans-serif;
}

.neon-search-container .glow-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.neon-search-container .glow-effect-left,
.neon-search-container .glow-effect-right {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  filter: blur(30px);
  transition: all 0.3s ease;
}

.neon-search-container .glow-effect-left {
  top: -40px;
  left: -30px;
  background: radial-gradient(circle, var(--glow-color-1) 0%, transparent 70%);
}

.neon-search-container .glow-effect-right {
  bottom: -40px;
  right: -30px;
  background: radial-gradient(circle, var(--glow-color-2) 0%, transparent 70%);
}

.neon-search-container .search-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  width: 350px;
  height: 60px;
  background: var(--search-bar-gradient);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: visible;
  transition: all 0.3s ease;
}

.neon-search-container .search-bar::before,
.neon-search-container .search-bar::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 60%;
  pointer-events: none;
  transition: all 0.3s ease;
}

.neon-search-container .search-bar::before {
  top: 0;
  left: 0;
  background: linear-gradient(to right, var(--border-color-1), transparent),
    linear-gradient(to bottom, var(--border-color-1), transparent);
  background-size: 100% 2px, 2px 100%;
  background-repeat: no-repeat;
  border-top-left-radius: 8px;
}

.neon-search-container .search-bar::after {
  bottom: 0;
  right: 0;
  background: linear-gradient(to left, var(--border-color-2), transparent),
    linear-gradient(to top, var(--border-color-2), transparent);
  background-size: 100% 2px, 2px 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
  border-bottom-right-radius: 8px;
}

.neon-search-container .search-input {
  flex-grow: 1;
  height: 100%;
  padding: 0 20px;
  border: none;
  background-color: transparent;
  color: white;
  font-size: 18px;
  outline: none;
  transition: all 0.3s ease;
}

.neon-search-container .search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.neon-search-container .search-icon,
.neon-search-container .filter-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.neon-search-container .search-icon {
  margin-left: 20px;
}

.neon-search-container .search-icon svg,
.neon-search-container .filter-icon svg {
  width: 100%;
  height: 100%;
  stroke: white;
  transition: all 0.3s ease;
}

.neon-search-container .filter-container {
  position: absolute;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: var(--filter-button-gradient);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Animations */
.neon-search-container .search-bar:focus-within {
  box-shadow: 0 0 15px rgba(255, 100, 220, 0.3),
    0 0 15px rgba(120, 100, 255, 0.3);
}

.neon-search-container .search-bar:focus-within::before,
.neon-search-container .search-bar:focus-within::after {
  width: 70%;
  height: 70%;
}

.neon-search-container .search-input:focus::placeholder {
  opacity: 0;
  transform: translateX(-10px);
}

.neon-search-container .search-icon svg {
  animation: pulse 2s infinite;
}

.neon-search-container .filter-container:hover {
  background: var(--filter-button-gradient);
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(120, 100, 255, 0.5);
}

.neon-search-container .filter-container:hover .filter-icon svg {
  transform: rotate(15deg);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.neon-search-container:hover .glow-effect-left {
  transform: translate(5px, 5px);
}

.neon-search-container:hover .glow-effect-right {
  transform: translate(-5px, -5px);
}

/* Particle effect */
/* Enhanced Particle effect */
.neon-search-container .particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.neon-search-container .particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: particleFloat 20s linear infinite;
}

.neon-search-container .particle:nth-child(1) {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}
.neon-search-container .particle:nth-child(2) {
  top: 40%;
  left: 10%;
  animation-delay: -2s;
}
.neon-search-container .particle:nth-child(3) {
  top: 10%;
  left: 50%;
  animation-delay: -4s;
}
.neon-search-container .particle:nth-child(4) {
  top: 30%;
  left: 30%;
  animation-delay: -6s;
}
.neon-search-container .particle:nth-child(5) {
  top: 5%;
  left: 70%;
  animation-delay: -8s;
}
.neon-search-container .particle:nth-child(6) {
  top: 60%;
  left: 80%;
  animation-delay: -10s;
}
.neon-search-container .particle:nth-child(7) {
  top: 70%;
  left: 5%;
  animation-delay: -12s;
}
.neon-search-container .particle:nth-child(8) {
  top: 80%;
  left: 60%;
  animation-delay: -14s;
}

@keyframes particleFloat {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(200px, 300px) scale(0.2);
    opacity: 0;
  }
}

</style>
    

================================================
FILE: Inputs/Li-Deheng_rotten-bullfrog-77.html
================================================
<div class="search">
  <div class="search-box">
    <div class="search-field">
      <input placeholder="Search..." class="input" type="text">
      <div class="search-box-icon">
        <button class="btn-icon-content">
          <i class="search-icon">
            <svg xmlns="://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" fill="#fff"></path></svg>
          </i>
        </button>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Li-Deheng - Tags: input, search */
.search {
  --input-line: #cccccc;
  --input-text-color: #808080;
  --input-text-hover-color: transparent;
  --input-border-color: #808080;
  --input-border-hover-color: #999999;
  --input-bg-color: #333333;
  --search-max-width: 250px;
  --search-min-width: 150px;
  --border-radius: 5px;
  --transition-cubic-bezier: 150ms cubic-bezier(0.4,0,0.2,1);
}

.search-box {
  max-width: var(--search-max-width);
  min-width: var(--search-min-width);
  height: 35px;
  border: 1px solid var(--input-border-color);
  border-radius: var(--border-radius);
  padding: 5px 15px;
  background: var(--input-bg-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  transition: var(--transition-cubic-bezier);
}

.search-box:hover {
  border-color: var(--input-border-hover-color);
}

/*Section input*/
.search-field {
  position: relative;
  width: 100%;
  height: 100%;
  left: -5px;
  border: 0;
}

.input {
  width: calc(100% - 29px);
  height: 100%;
  border: 0;
  border-color: transparent;
  font-size: 1rem;
  padding-right: 0px;
  color: var(--input-line);
  background: var(--input-bg-color);
  border-right: 2px solid var(--input-border-color);
  outline: none;
}

.input::-webkit-input-placeholder {
  color: var(--input-text-color);
}

.input::-moz-input-placeholder {
  color: var(--input-text-color);
}

.input::-ms-input-placeholder {
  color: var(--input-text-color);
}

.input:focus::-webkit-input-placeholder {
  color: var(--input-text-hover-color);
}

.input:focus::-moz-input-placeholder {
  color: var(--input-text-hover-color);
}

.input:focus::-ms-input-placeholder {
  color: var(--input-text-hover-color);
}

/*Search button*/
.search-box-icon {
  width: 52px;
  height: 35px;
  position: absolute;
  top: -6px;
  right: -21px;
  background: transparent;
  border-bottom-right-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  transition: var(--transition-cubic-bezier);
}

.search-box-icon:hover {
  background: var(--input-border-color);
}

.btn-icon-content {
  width: 52px;
  height: 35px;
  top: -6px;
  right: -21px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-bottom-right-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  transition: var(--transition-cubic-bezier);
  opacity: .4;
}

.btn-icon-content:hover {
  opacity: .8;
}

.search-icon {
  width: 21px;
  height: 21px;
  position: absolute;
  top: 7px;
  right: 15px;
}
</style>


================================================
FILE: Inputs/Li-Deheng_stupid-jellyfish-61.html
================================================
<div class="search-panels">
	<div class="search-group">
		<input required="" type="text" name="text" autocomplete="on" class="input">
		<label class="enter-label">Search</label>
		<div class="btn-box">
			<button class="btn-search">
				<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path><circle id="svg-circle" cx="208" cy="208" r="144"></circle></svg>
			</button>
		</div>
		<div class="btn-box-x">
			<button class="btn-cleare">
				<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" id="cleare-line"></path></svg>
			</button>
		</div>
	</div>
</div>
<style>
/* From Uiverse.io by Li-Deheng - Tags: animation, button, input, rounded, animated, click effect, input effect , hover button */
.search-panels {
  --default-color: #9e9e9e;
  --color-text: #ccc;
  --color-active: #1a73e8;
  --color-active-input: #f5f5f5;
  --transition: 150ms cubic-bezier(0.4,0,0.2,1);
  --width-input: 200px;
}

.search-group {
  position: relative;
}

.input {
  width: var(--width-input);
  border: solid 1.5px var(--default-color);
  border-radius: 80px;
  background: none;
  padding: 1rem;
  padding-right: 3rem;
  font-size: 1rem;
  color: var(--color-active-input);
  transition: border var(--transition);
}

.enter-label {
  position: absolute;
  left: 15px;
  color: var(--default-color);
  pointer-events: none;
  transform: translateY(1rem);
  transition: var(--transition);
}

.enter-label {
  color: var(--default-color);
  pointer-events: none;
}

.input:focus, input:valid {
  outline: none;
  border: 1.5px solid var(--color-active);
}

.input:focus ~ label, input:valid ~ label {
  transform: translateY(-50%) scale(0.8);
  background-color: var(--color-active);
  border-radius: 20px;
  padding: .2em .6em;
  color: var(--color-text);
}

.btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -1em;
  right: 80%;
  border-radius: 100%;
  transition: 300ms cubic-bezier(0.4,0,0.2,1);
  transition-delay: 100ms;
  opacity: 0;
}

.input:focus ~ .btn-box, input:valid ~ .btn-box {
  right: 10%;
  opacity: 1;
  transition-delay: 0s;
  transition: var(--transition);
}

.input:not(:focus) ~ .btn-box, input:not(:valid) ~ .btn-box {
  transition-property: right, opacity;
  transition-delay: 300ms;
}

.input:focus ~ .btn-box:hover, input:valid ~ .btn-box:hover {
  transform: scale(1.2);
}

.input:focus ~ .btn-box:hover:active, input:valid ~ .btn-box:hover:active {
  transform: scale(1);
}

.btn-search {
  position: relative;
  cursor: pointer;
  background-color: var(--color-active);
  width: 2em;
  height: 2em;
  top: 2.5px;
  border: none;
  border-radius: 100%;
  padding: 0;
  transition: var(--transition);
}

.btn-search:active {
  transform: scale(1);
}

.btn-search svg {
  position: absolute;
  top: 25%;
  left: 25%;
  fill: var(--color-text);
  width: 12px;
  height: 12px;
}

#svg-circle {
  fill: var(--color-text);
  transition: var(--transition);
}

.input:focus ~ .btn-box:hover #svg-circle, input:valid ~ .btn-box:hover #svg-circle {
  fill: transparent;
}

.btn-box-x {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 1em;
  right: 7%;
  opacity: 0;
  transform: rotate(-90deg) scale(.1);
  transition: var(--transition);
}

.input:focus ~ .btn-box-x, input:valid ~ .btn-box-x {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.btn-cleare {
  position: relative;
  cursor: pointer;
  background-color: transparent;
  width: 2em;
  height: 2em;
  border: none;
  border-radius: 100%;
  padding: 0;
  transition: var(--transition);
}

.btn-cleare svg {
  width: 15px;
  height: 15px;
}

#cleare-line {
  fill: var(--default-color);
}

.btn-box-x:hover #cleare-line {
  fill: var(--color-active);
}
</style>


================================================
FILE: Inputs/Li-Deheng_tiny-chicken-50.html
================================================
<div class="info-panels">
  <div class="input-color-group-one">
    <input class="input-color" autocomplete="on" name="text" type="text" required="" placeholder="255, 255, 255, 0.5">
		<label class="color-label">RGBA</label>
		<button class="btn-copy">
	  	<svg class="svgs" id="icon-btn-copy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.98,13.96h-4.74c-.13,0-.24-.11-.24-.24V7.07c0-.13,.11-.24,.24-.24h4.74c.13,0,.24,.11,.24,.24v6.64c0,.13-.11,.24-.24,.24Zm-6.77-7.72V14.55c0,.66,.53,1.19,1.19,1.19h6.41c.66,0,1.19-.53,1.19-1.19V6.24c0-.66-.53-1.19-1.19-1.19h-6.41c-.66,0-1.19,.53-1.19,1.19Z"></path><path d="M15.68,18.95H7.19c-.66,0-1.19-.53-1.19-1.19V7.37c0-.49,.4-.89,.89-.89s.89,.4,.89,.89v9.57c0,.13,.1,.23,.23,.23h7.67c.49,0,.89,.4,.89,.89s-.4,.89-.89,.89Z"></path></svg>		
		</button>
  </div>
</div>
<style>
/* From Uiverse.io by Li-Deheng - Tags: button, input, copy, color, line, hover effect, input effect , hover button */
.info-panels {
  --color-icon: #fff;
  --color-input: #ccc;
  --color-border: #9e9e9e;
  --color-border-hover: #1a73e8;
  --all-transition: all .2s ease-out;
  --input-focus-opacity: .3;
}

.input-color-group-one {
  position: relative;
}

.input-color {
  max-width: 230px;
  min-width: 150px;
  border: 1.5px solid var(--color-border);
  border-radius: 80px;
  background: none;
  padding: 16px;
  font-size: 16px;
  transition: var(--all-transition);
}

.input-color:focus {
  color: var(--color-input);
  outline: none;
  border: 1.5px solid var(--color-border-hover);
}

.input-color:valid {
  color: var(--color-input);
  outline: none;
}

.input-color::-webkit-input-placeholder {
  color: var(--color-input);
}

.input-color::-moz-input-placeholder {
  color: var(--color-input);
}

.input-color::-ms-input-placeholder {
  color: var(--color-input);
}

.input-color:focus::-webkit-input-placeholder, input-color:valid::-webkit-input-placeholder {
  opacity: var(--input-focus-opacity);
}

.input-color:focus::-moz-input-placeholder, input-color:valid::-moz-input-placeholder {
  opacity: var(--input-focus-opacity);
}

.input-color:focus::-ms-input-placeholder, input-color:valid::-ms-input-placeholder {
  opacity: var(--input-focus-opacity);
}

.color-label {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-border);
  font-weight: 600;
  padding: 0 5px;
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  top: -11.5px;
  left: 25px;
  background-color: transparent;
  cursor: default;
  backdrop-filter: blur(10px);
  transition: var(--all-transition);
}

.input-color:focus ~ .color-label, input-color:valid ~ .color-label {
  color: var(--color-border-hover);
  border: 1.5px solid var(--color-border-hover);
}

.btn-copy {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  top: -11.5px;
  right: 25px;
  background-color: transparent;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: var(--all-transition);
}

.btn-copy:hover {
  background-color: var(--color-border);
  transform: scale(1.2);
}

.btn-copy:active {
  transform: scale(1.1);
}

.input-color:focus ~ .btn-copy {
  border: 1.5px solid var(--color-border-hover);
}

.input-color:valid .input-color:focus ~ .btn-copy {
  border: 1.5px solid var(--color-border);
}

.input-color:focus ~ .btn-copy:hover {
  background-color: var(--color-border-hover);
}

#icon-btn-copy {
  fill: var(--color-border);
}

.btn-copy:hover #icon-btn-copy {
  fill: var(--color-icon);
}

.input-color:focus ~ .btn-copy #icon-btn-copy {
  fill: var(--color-border-hover);
}

.input-color:focus ~ .btn-copy:hover #icon-btn-copy, .input-color:valid ~ .btn-copy:hover #icon-btn-copy {
  fill: var(--color-icon);
}
</style>


================================================
FILE: Inputs/LightAndy1_spicy-gecko-96.html
================================================
<input class="input" placeholder="Email" type="email">
<style>
/* From Uiverse.io by LightAndy1 - Source: Cohen - https://uiverse.io/cohencoo/proud-husky-84 - Tags: simple, animation, login, email, input, dark */
.input {
  margin-top: 1rem;
  border-radius: 10px;
  outline: 2px solid #00a6fb;
  border: 0;
  font-family: "Montserrat", sans-serif;
  background-color: #d6f1ff;
  outline-offset: 3px;
  padding: 10px 12.5px;
  transition: all 0.2s ease;
  width: 250px;
}

.input:hover {
  background-color: #fff;
}

.input:focus {
  outline-offset: -6px;
  background-color: #d6f1ff;
}

</style>


================================================
FILE: Inputs/LightAndy1_tidy-pig-67.html
================================================
<div class="group">
  <svg viewBox="0 0 24 24" aria-hidden="true" class="search-icon">
    <g>
      <path
        d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"
      ></path>
    </g>
  </svg>

  <input
    id="query"
    class="input"
    type="search"
    placeholder="Search..."
    name="searchbar"
  />
</div>

<style>
/* From Uiverse.io by LightAndy1  - Tags: simple, icon, input, dark, search */
.group {
  display: flex;
  line-height: 28px;
  align-items: center;
  position: relative;
  max-width: 190px;
}

.input {
  font-family: "Montserrat", sans-serif;
  width: 100%;
  height: 45px;
  padding-left: 2.5rem;
  box-shadow: 0 0 0 1.5px #2b2c37, 0 0 25px -17px #000;
  border: 0;
  border-radius: 12px;
  background-color: #16171d;
  outline: none;
  color: #bdbecb;
  transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
  cursor: text;
  z-index: 0;
}

.input::placeholder {
  color: #bdbecb;
}

.input:hover {
  box-shadow: 0 0 0 2.5px #2f303d, 0px 0px 25px -15px #000;
}

.input:active {
  transform: scale(0.95);
}

.input:focus {
  box-shadow: 0 0 0 2.5px #2f303d;
}

.search-icon {
  position: absolute;
  left: 1rem;
  fill: #bdbecb;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  z-index: 1;
}

</style>
    

================================================
FILE: Inputs/Lucaasbre_blue-ape-11.html
================================================
<div class="input-group">
  <input
    class="input-text"
    name="text"
    type="text"
    placeholder="Type here"
    autocomplete="off"
  />
  <label class="input-text-label" for="text">Type here</label>
</div>

<style>
/* From Uiverse.io by Lucaasbre  - Tags: simple, red, minimalist, black, input, dark, login , input effect  */
.input-group {
  display: flex;
  gap: 10px;
  position: relative;
  padding: 7px 0 0;
  width: 80%;
  margin-bottom: 10px;
  margin-top: 2px;
}

.input-text {
  font-family: inherit;
  width: 100%;
  border: none;
  border-bottom: 2px solid #7f7f7f;
  border-radius: 0 !important;
  outline: 0;
  font-size: 17px;
  color: #7f7f7f;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}

.input-text::placeholder {
  color: transparent;
}

.input-text:placeholder-shown ~ .input-text-label {
  font-size: 17px;
  cursor: text;
}

.input-text-label {
  position: absolute;
  display: block;
  transition: 0.2s;
  font-size: 17px;
  color: #7f7f7f;
  pointer-events: none;
}

.input-text:focus {
  padding-bottom: 6px;
  border-width: 3px;
  border-image: linear-gradient(to right, #dd0033, #9f1026);
  border-image-slice: 1;
}

.input-text:focus ~ .input-text-label {
  color: #dd0033;
}

.input-text:not(:placeholder-shown) ~ .input-text-label,
.input-text:focus ~ .input-text-label {
  position: absolute;
  display: block;
  transition: 0.2s;
  font-size: 15px;
  font-weight: 700;
  top: -17px;
}

.input-text:required,
.input-text:invalid {
  box-shadow: none;
}

</style>
    

================================================
FILE: Inputs/Maximinodotpy_thin-sheep-13.html
================================================
<div class="inputGroup">
    <input type="text" required="" autocomplete="off">
    <label for="name">Name</label>
</div>
<style>
/* From Uiverse.io by Maximinodotpy - Tags: input */
.inputGroup {
  font-family: 'Segoe UI', sans-serif;
  margin: 1em 0 1em 0;
  max-width: 190px;
  position: relative;
}

.inputGroup input {
  font-size: 100%;
  padding: 0.8em;
  outline: none;
  border: 2px solid rgb(200, 200, 200);
  background-color: transparent;
  border-radius: 20px;
  width: 100%;
}

.inputGroup label {
  font-size: 100%;
  position: absolute;
  left: 0;
  padding: 0.8em;
  margin-left: 0.5em;
  pointer-events: none;
  transition: all 0.3s ease;
  color: rgb(100, 100, 100);
}

.inputGroup :is(input:focus, input:valid)~label {
  transform: translateY(-50%) scale(.9);
  margin: 0em;
  margin-left: 1.3em;
  padding: 0.4em;
  background-color: #e8e8e8;
}

.inputGroup :is(input:focus, input:valid) {
  border-color: rgb(150, 150, 200);
}
</style>


================================================
FILE: Inputs/Mhyar-nsi_selfish-parrot-52.html
================================================
<input placeholder="Type here..." class="input" name="text" type="text">
<style>
/* From Uiverse.io by Mhyar-nsi - Tags: input, ring */
.input {
  font-family: monospace;
  max-width: 190px;
  outline: none;
  border: 1px solid #dadada;
  padding: 10px;
  border-radius: 5px;
  background-color: #f3f7fe;
  transition: .3s;
  color: #3b82f6;
}

.input:focus {
  border: 1px solid #3b82f6;
  box-shadow: 0 0 0 4px #3b83f65f
}
</style>


================================================
FILE: Inputs/MijailVillegas_grumpy-horse-85.html
================================================
<form class="container" action="">
  <div class="input-container">
    <div class="input-content">
      <div class="input-dist">
        <div class="input-type">
          <input class="input-is" type="text" required="" placeholder="User" />
          <input
            class="input-is"
            type="password"
            required=""
            placeholder="Password"
          />
        </div>
      </div>
    </div>
  </div>
  <button class="submit-button">Log in</button>
</form>

<style>
/* From Uiverse.io by MijailVillegas  - Tags: cyberpunk, input, neon, futuristic */
/*The eye icon on the password can be stylize with any tool you want
to use (the only way i know to do this correctly is using JS)
this is meant to be wide supported and it really depends on you browsers
if i realize any way to stylize the eye it could be added in the future
in other input type*/

.container {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-style: italic;
  font-weight: bold;
  display: flex;
  margin: auto;
  aspect-ratio: 16/9;
  align-items: center;
  justify-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
  gap: 1em;
}

.input-container {
  filter: drop-shadow(46px 36px 24px #4090b5)
    drop-shadow(-55px -40px 25px #9e30a9);
  animation: blinkShadowsFilter 8s ease-in infinite;
}

.input-content {
  display: grid;
  align-content: center;
  justify-items: center;
  align-items: center;
  text-align: center;
  padding-inline: 1em;
}

.input-content::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  filter: blur(40px);
  -webkit-clip-path: polygon(
    26% 0,
    66% 0,
    92% 0,
    100% 8%,
    100% 89%,
    91% 100%,
    7% 100%,
    0 92%,
    0 0
  );
  clip-path: polygon(
    26% 0,
    66% 0,
    92% 0,
    100% 8%,
    100% 89%,
    91% 100%,
    7% 100%,
    0 92%,
    0 0
  );
  background: rgba(122, 251, 255, 0.5568627451);
  transition: all 1s ease-in-out;
}

.input-content::after {
  content: "";
  position: absolute;
  width: 98%;
  height: 98%;
  box-shadow: inset 0px 0px 20px 20px #212121;
  background: repeating-linear-gradient(
      to bottom,
      transparent 0%,
      rgba(64, 144, 181, 0.6) 1px,
      rgb(0, 0, 0) 3px,
      hsl(295, 60%, 12%) 5px,
      #153544 4px,
      transparent 0.5%
    ),
    repeating-linear-gradient(
      to left,
      hsl(295, 60%, 12%) 100%,
      hsla(295, 60%, 12%, 0.99) 100%
    );
  -webkit-clip-path: polygon(
    26% 0,
    31% 5%,
    61% 5%,
    66% 0,
    92% 0,
    100% 8%,
    100% 89%,
    91% 100%,
    7% 100%,
    0 92%,
    0 0
  );
  clip-path: polygon(
    26% 0,
    31% 5%,
    61% 5%,
    66% 0,
    92% 0,
    100% 8%,
    100% 89%,
    91% 100%,
    7% 100%,
    0 92%,
    0 0
  );
  animation: backglitch 50ms linear infinite;
}

.input-dist {
  z-index: 80;
  display: grid;
  align-items: center;
  text-align: center;
  width: 100%;
  padding-inline: 1em;
  padding-block: 1.2em;
  grid-template-columns: 1fr;
}

.input-type {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1em;
  font-size: 1.1rem;
  background-color: transparent;
  width: 100%;
  border: none;
}

.input-is {
  color: #fff;
  font-size: 0.9rem;
  background-color: transparent;
  width: 100%;
  box-sizing: border-box;
  padding-inline: 0.5em;
  padding-block: 0.7em;
  border: none;
  transition: all 1s ease-in-out;
  border-bottom: 1px solid hsl(221, 26%, 43%);
}

.input-is:hover {
  transition: all 1s ease-in-out;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(102, 224, 255, 0.2) 27%,
    rgba(102, 224, 255, 0.2) 63%,
    transparent 100%
  );
}

.input-content:focus-within::before {
  transition: all 1s ease-in-out;
  background: hsla(0, 0%, 100%, 0.814);
}

.input-is:focus {
  outline: none;
  border-bottom: 1px solid hsl(192, 100%, 100%);
  color: hsl(192, 100%, 88%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(102, 224, 255, 0.2) 27%,
    rgba(102, 224, 255, 0.2) 63%,
    transparent 100%
  );
}

.input-is::-moz-placeholder {
  color: hsla(192, 100%, 88%, 0.806);
}

.input-is::placeholder {
  color: hsla(192, 100%, 88%, 0.806);
}

.submit-button {
  width: 50%;
  border: none;
  color: hsla(192, 100%, 88%, 0.806);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(102, 224, 255, 0.2) 27%,
    rgba(102, 224, 255, 0.2) 63%,
    transparent 100%
  );
  clip-path: polygon(0 0, 85% 0%, 100% 0, 100% 15%, 100% 90%, 91% 100%, 0 100%);
  padding: 0.5em;
  animation: blinkShadowsFilter 0.5s ease-in infinite;
  transition: all 500ms;
}

.submit-button:hover {
  color: hsl(0, 0%, 100%);
  cursor: pointer;
  font-size: medium;
  font-weight: bold;
}

@keyframes backglitch {
  0% {
    box-shadow: inset 0px 20px 20px 30px #212121;
  }

  50% {
    box-shadow: inset 0px -20px 20px 30px hsl(297, 42%, 10%);
  }

  to {
    box-shadow: inset 0px 20px 20px 30px #212121;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) translate(-50%, 20%);
  }

  50% {
    transform: rotate(180deg) translate(40%, 10%);
  }

  to {
    transform: rotate(360deg) translate(-50%, 20%);
  }
}

@keyframes blinkShadowsFilter {
  0% {
    filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706))
      drop-shadow(-55px -40px 28px #9e30a9);
  }

  25% {
    filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157))
      drop-shadow(-55px 40px 24px #9e30a9);
  }

  50% {
    filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157))
      drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471));
  }

  75% {
    filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157))
      drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471));
  }

  to {
    filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706))
      drop-shadow(-55px -40px 28px #9e30a9);
  }
}

</style>
    

================================================
FILE: Inputs/MijailVillegas_shaggy-husky-62.html
================================================
<div class="card">
  <div class="border-light">
    <div class="input-content">
      <div class="light">
        <span class="clip-container"></span>
      </div>
      <div class="search-icon">
        <svg
          class="span svg"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" x2="16.65" y1="21" y2="16.65"></line>
        </svg>
        <svg
          class="span svg"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" x2="16.65" y1="21" y2="16.65"></line>
        </svg>
        <svg
          class="span svg"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" x2="16.65" y1="21" y2="16.65"></line>
        </svg>
        <svg
          class="svg"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" x2="16.65" y1="21" y2="16.65"></line>
        </svg>
      </div>
      <input type="text" name="text" class="input" placeholder="Search..." />
      <button href="" class="sort-btn">
        <span></span>
        <span></span>
        <svg
          class="svg"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M3 4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V6.58579C21 6.851 20.8946 7.10536 20.7071 7.29289L14.2929 13.7071C14.1054 13.8946 14 14.149 14 14.4142V17L10 21V14.4142C10 14.149 9.89464 13.8946 9.70711 13.7071L3.29289 7.29289C3.10536 7.10536 3 6.851 3 6.58579V4Z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by MijailVillegas  - Tags: input */
.card {
  scale: 1.5;
  font-family: sans-serif;
  width: 320px;
  height: 200px;
  border-radius: 80% 80%;
  padding: 1.5rem;
  display: flex;
  --color: rgba(67, 67, 67, 0.2);
  background-image: linear-gradient(to right, var(--color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color) 1px, transparent 1px);
  background-size: 0.5rem 0.5rem;
  box-shadow: inset 0 0 40px 20px rgb(0, 0, 0);
  flex-direction: column;
  align-content: center;
  justify-content: center;
  gap: 1rem;
}

.border-light {
  position: relative;
  display: flex;
  border-radius: 8px;
  background: transparent;
}

.border-light::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 20px;
  border-radius: 50%;
  top: 0%;
  left: 0%;
  box-shadow: 0px 0px 30px 5px hsl(310, 90%, 65%, 0.5),
    0px 0px 30px 30px hsla(310, 91%, 25%, 0.5);
  animation: border-light 16s linear infinite;
}

.border-light::after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 40px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0px 0px 30px 5px hsl(247, 90%, 65%, 0.5),
    0px 0px 30px 30px hsl(247, 90%, 25%, 0.5);
  animation: border-light 16s linear infinite -8s;
}

@keyframes border-light {
  0% {
    top: 0%;
    left: 0%;
    animation-timing-function: cubic-bezier(0.19, 0.64, 0.85, 0.36);
  }
  48% {
    top: 0%;
    left: 80%;
  }
  50% {
    top: 50%;
    left: 80%;
    animation-timing-function: cubic-bezier(0.19, 0.64, 0.85, 0.36);
  }
  98% {
    top: 50%;
    left: 0%;
  }
  100% {
    top: 0%;
    left: 0%;
  }
}

.input-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgb(0, 0, 0);
  padding: 5px 5px 5px 10px;
  align-items: center;
  justify-content: center;
  justify-items: center;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.input-content::before {
  content: "";
  position: absolute;
  height: 300px;
  aspect-ratio: 1/1;
  background-image: conic-gradient(
    from 90deg,
    hsl(310, 90%, 75%) 0%,
    hsl(310, 90%, 25%) 2%,
    var(--color) 5%,
    black 20%,
    black 30%,
    var(--color) 35%,
    var(--color) 95%,
    hsl(310, 90%, 25%) 98%,
    hsl(310, 90%, 75%) 100%
  );
  animation: rotate 16s linear infinite -8s;
}

.input-content::after {
  content: "";
  position: absolute;
  height: 300px;
  aspect-ratio: 1/1;
  background-image: conic-gradient(
    from 90deg,
    hsl(247, 90%, 75%) 0%,
    hsl(247, 90%, 25%) 2%,
    var(--color) 5%,
    rgb(19, 19, 19) 20%,
    rgb(19, 19, 19) 30%,
    var(--color) 35%,
    var(--color) 95%,
    hsl(247, 90%, 25%) 98%,
    hsl(247, 90%, 75%) 100%
  );
  animation: rotate 16s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.clip-container {
  width: 100%;
  height: 100%;
  clip-path: inset(0 round 7px 7px 7px 7px);
  overflow: hidden;
}

.light {
  display: flex;
  position: absolute;
  inset: 1px;
  background: rgb(0, 0, 0);
  clip-path: inset(0 round 7px 7px 7px 7px);
  z-index: 1;
}

.light::after {
  content: "";
  position: absolute;
  right: 0%;
  bottom: -50%;
  box-shadow: 0px 0px 30px 5px hsl(247, 90%, 25%),
    0px 0px 30px 20px hsl(247, 90%, 55%);
  animation: rotate-light 16s linear infinite -8s;
  z-index: 4;
}

.light::before {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 150%;
  box-shadow: 0px 0px 30px 5px hsl(310, 90%, 25%),
    0px 0px 30px 20px hsl(310, 90%, 55%);
  animation: rotate-light 16s linear infinite;
}

@keyframes rotate-light {
  0% {
    right: 100%;
    bottom: 150%;
    animation-timing-function: cubic-bezier(0.19, 0.64, 0.85, 0.36);
  }
  48% {
    right: 0%;
    bottom: 150%;
  }
  50% {
    right: 0%;
    bottom: -50%;
    animation-timing-function: cubic-bezier(0.19, 0.64, 0.85, 0.36);
  }
  98% {
    right: 100%;
    bottom: -50%;
  }
  100% {
    right: 100%;
    bottom: 150%;
  }
}
.input {
  all: unset;
  width: fit-content;
  background: none;
  border: none;
  padding: 5px 0px 5px 10px;
  color: rgb(67, 67, 67);
  background: linear-gradient(
    25deg,
    white,
    rgb(126, 126, 126) 20%,
    rgba(67, 67, 67, 0.143)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 2;
}

.search-icon {
  display: grid;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.search-icon .span {
  opacity: 0;
  position: absolute;
  transition: all 0.3s;
  z-index: 2;
}

.search-icon:hover .span:nth-child(1),
.input-content:focus-within .span:nth-child(1) {
  opacity: 0.6;
  transform: translate(5px, -2px);
  scale: 0.8;
  transition: all 0.1s;
}

.search-icon:hover .span:nth-child(2),
.input-content:focus-within .span:nth-child(2) {
  opacity: 0.4;
  transform: translate(20px, -10px);
  scale: 0.4;
  transition: all 0.2s;
}

.search-icon:hover .span:nth-child(3),
.input-content:focus-within .span:nth-child(3) {
  opacity: 0.2;
  transform: translate(40px, -20px);
  scale: 0.2;
}

.svg {
  width: 1.2rem;
  height: 1.2rem;
  color: rgba(255, 255, 255, 0.6);
}

.sort-btn {
  all: unset;
  display: grid;
  cursor: pointer;
  padding: 5px;
  background: linear-gradient(
    to bottom,
    rgba(67, 67, 67, 0.143),
    rgba(255, 255, 255, 0)
  );
  border-radius: 20% 20%;
  transition: all 0.3s;
  box-shadow: inset -1px 7px 5px -2px rgb(255, 255, 255, 0.1),
    inset 0px 9px 5px -2px rgb(255 255 255 / 5%),
    inset 0px -10px 5px -4px rgb(255, 255, 255, 0.05),
    inset 0 0 0px 1px rgb(255 255 255 / 5%),
    inset 0px -8px 5px -4px rgb(255, 255, 255, 0.1),
    inset 0 0 0px 1px rgb(255 247 247 / 5%);
  z-index: 2;
}

.sort-btn span {
  opacity: 0;
  width: 30px;
  height: 30px;
  position: absolute;
  transition: all 0.3s;
  border-radius: 50%;
  box-shadow: inset -1px 7px 5px -2px rgb(255, 255, 255, 0.5);
}

.sort-btn:hover {
  border-radius: 50%;
  scale: 1.1;
}

.sort-btn:active span:nth-child(1) {
  opacity: 0.2;
}

.sort-btn:active span:nth-child(2) {
  opacity: 0.4;
  transform: rotate(180deg);
}

</style>
    

================================================
FILE: Inputs/Minka1902_neat-bear-54.html
================================================
<div class="input-container">
  <input type="text" name="text" class="input">
  <label class="label">Input title</label>
  <div class="top-line"></div>
  <div class="under-line"></div>
</div>
<style>
/* From Uiverse.io by Minka1902 - Tags: input, code, click, border, html, css, css effect */
.input-container {
  position: relative;
  width: clamp(100px, 100%, 200px);
}

.input {
  padding: 10px;
  height: 40px;
  width: clamp(100px, 100%, 200px);
  border: 2px solid #0B2447;
  border-top: none;
  font-size: 16px;
  background: transparent;
  outline: none;
  box-shadow: 7px 7px 0px 0px #0B2447;
  transition: all 0.5s;
}

.input:focus {
  box-shadow: none;
  transition: all 0.5s;
}

.label {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #0B2447;
  transition: all 0.5s;
  transform: scale(0);
  z-index: -1;
}

.input-container .top-line {
  position: absolute;
  content: "";
  background-color: #0B2447;
  width: 100%;
  height: 2px;
  right: 0;
  top: 0;
  transition: all 0.5s;
}

.input-container input[type="text"]:focus~.top-line {
  width: 35%;
  transition: all 0.5s;
}

.input-container .under-line {
  position: absolute;
  content: "";
  background-color: #0B2447;
  width: 0%;
  height: 2px;
  right: 0;
  bottom: 0;
  transition: all 0.5s;
}

.input-container input[type="text"]:focus~.under-line {
  width: 100%;
  transition: all 0.5s;
}

.input-container input[type="text"]:focus~.label {
  top: -10px;
  transform: scale(1);
  transition: all 0.5s;
}
</style>


================================================
FILE: Inputs/Mythsoul_strange-insect-92.html
================================================
<div class="custom-search-container">
  <div class="custom-search-bar">
    <div class="custom-icon">
      <svg
        class="feather feather-search"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="2"
        stroke="currentColor"
        fill="none"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle r="8" cy="11" cx="11"></circle>
        <line y2="16.65" x2="16.65" y1="21" x1="21"></line>
      </svg>
    </div>
    <input placeholder="Search..." class="custom-search-input" type="text" />
    <div class="custom-icon">
      <svg
        class="feather feather-filter"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="2"
        stroke="currentColor"
        fill="none"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <polygon points="22 3 2 3 10 13 10 19 14 21 14 13 22 3"></polygon>
      </svg>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Mythsoul  - Tags:  */
.custom-search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #000;
  background-image: radial-gradient(
    circle,
    rgba(255, 0, 255, 0.1),
    rgba(0, 0, 255, 0.1)
  );
  background-size: cover, 10px 10px;
}

.custom-search-bar {
  display: flex;
  align-items: center;
  background-color: #111;
  padding: 10px;
  border-radius: 20px;
  position: relative;
  width: 80%;
  max-width: 400px;
  box-shadow: 0 0 15px rgba(255, 0, 150, 0.5), 0 0 15px rgba(0, 0, 255, 0.5);
  transition: width 0.3s;
}

.custom-icon {
  color: #fff;
  margin: 0 10px;
  display: flex;
  align-items: center;
}

.custom-search-input {
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 16px;
  width: 100%;
}

.custom-search-input::placeholder {
  color: #aaa;
}

.custom-search-bar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  background: linear-gradient(
    90deg,
    rgba(255, 0, 255, 0.5),
    rgba(0, 0, 255, 0.5)
  );
  z-index: -1;
  filter: blur(10px);
  animation: glow 4s infinite alternate;
}

@keyframes glow {
  0% {
    filter: blur(10px);
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    filter: blur(20px);
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    filter: blur(10px);
    opacity: 0.7;
    transform: scale(1);
  }
}

.custom-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  transition: color 0.3s, transform 0.3s;
}

.custom-icon:hover svg {
  color: #ff00ff;
  cursor: pointer;
  transform: scale(1.1);
}

/* Media queries for better responsiveness */
@media (max-width: 600px) {
  .custom-search-bar {
    width: 90%;
  }
}

@media (max-width: 400px) {
  .custom-search-bar {
    width: 100%;
  }

  .custom-search-input {
    font-size: 14px;
  }

  .custom-icon {
    margin: 0 5px;
  }

  .custom-icon svg {
    width: 20px;
    height: 20px;
  }
}

</style>
    

================================================
FILE: Inputs/Na3ar-17_calm-panda-30.html
================================================
<!-- From Uiverse.io by Na3ar-17  - Tags: simple, input, tailwind, tailwindcss -->
<input
  class="bg-[#222630] px-4 py-3 outline-none w-[280px] text-white rounded-lg border-2 transition-colors duration-100 border-solid focus:border-[#596A95] border-[#2B3040]"
  name="text"
  placeholder="Enter email or username"
  type="text"
/>


    

================================================
FILE: Inputs/Na3ar-17_selfish-dragon-54.html
================================================
<label class="label">
  <span class="icon">
    <svg
      class="w-6 h-6 text-gray-800 dark:text-white"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      width="30"
      height="30"
      fill="none"
      viewBox="0 0 24 24"
    >
      <path
        stroke="currentColor"
        stroke-width="1.25"
        d="M7 17v1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1a3 3 0 0 0-3-3h-4a3 3 0 0 0-3 3Zm8-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
      ></path>
    </svg>
  </span>
  <input
    type="text"
    class="input"
    placeholder="Enter name"
    autocomplete="off"
  />
</label>

<style>
/* From Uiverse.io by Na3ar-17  - Tags: simple, icon, input, dark */
.container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label {
  position: relative;
  display: block;
  width: 250px;
  display: flex;
  border-radius: 6px;
  border: 2px solid #373737;
  padding: 15px 8px 15px 10px;
  text-align: left;

  .icon {
    position: absolute;
    top: 53%;
    right: 0;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    color: #c5c5c5;
  }

  .input {
    background-color: transparent;
    outline: none;
    border: none;
    color: #c5c5c5;
    font-size: 16px;
  }
}

</style>
    

================================================
FILE: Inputs/OnCloud125252_chatty-cat-54.html
================================================
<div class="inputBox_container">
  <svg class="search_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="search icon">
    <path d="M46.599 46.599a4.498 4.498 0 0 1-6.363 0l-7.941-7.941C29.028 40.749 25.167 42 21 42 9.402 42 0 32.598 0 21S9.402 0 21 0s21 9.402 21 21c0 4.167-1.251 8.028-3.342 11.295l7.941 7.941a4.498 4.498 0 0 1 0 6.363zM21 6C12.717 6 6 12.714 6 21s6.717 15 15 15c8.286 0 15-6.714 15-15S29.286 6 21 6z">
    </path>
  </svg>
  <input class="inputBox" id="inputBox" type="text" placeholder="Search For Products">
</div>
<style>
/* From Uiverse.io by OnCloud125252 - Tags: input, dark, search */
.inputBox_container {
  display: flex;
  align-items: center;
  flex-direction: row;
  max-width: 14em;
  width: fit-content;
  height: fit-content;
  background-color: #5c6370;
  border-radius: 0.8em;
  overflow: hidden;
}

.search_icon {
  height: 1em;
  padding: 0 0.5em 0 0.8em;
  fill: #abb2bf;
}

.inputBox {
  background-color: transparent;
  color: #ffffff;
  outline: none;
  width: 100%;
  border: 0;
  padding: 0.5em 1.5em 0.5em 0;
  font-size: 1em;
}

::placeholder {
  color: #abb2bf;
}
</style>


================================================
FILE: Inputs/OnlyCodeChannel_ugly-penguin-43.html
================================================
<div class="searchBox">

            <input class="searchInput" type="text" name="" placeholder="Search something">
            <button class="searchButton" href="#">
                   
                  

                                <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
  <g clip-path="url(#clip0_2_17)">
    <g filter="url(#filter0_d_2_17)">
      <path d="M23.7953 23.9182L19.0585 19.1814M19.0585 19.1814C19.8188 18.4211 20.4219 17.5185 20.8333 16.5251C21.2448 15.5318 21.4566 14.4671 21.4566 13.3919C21.4566 12.3167 21.2448 11.252 20.8333 10.2587C20.4219 9.2653 19.8188 8.36271 19.0585 7.60242C18.2982 6.84214 17.3956 6.23905 16.4022 5.82759C15.4089 5.41612 14.3442 5.20435 13.269 5.20435C12.1938 5.20435 11.1291 5.41612 10.1358 5.82759C9.1424 6.23905 8.23981 6.84214 7.47953 7.60242C5.94407 9.13789 5.08145 11.2204 5.08145 13.3919C5.08145 15.5634 5.94407 17.6459 7.47953 19.1814C9.01499 20.7168 11.0975 21.5794 13.269 21.5794C15.4405 21.5794 17.523 20.7168 19.0585 19.1814Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" shape-rendering="crispEdges"></path>
    </g>
  </g>
  <defs>
    <filter id="filter0_d_2_17" x="-0.418549" y="3.70435" width="29.7139" height="29.7139" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
      <feOffset dy="4"></feOffset>
      <feGaussianBlur stdDeviation="2"></feGaussianBlur>
      <feComposite in2="hardAlpha" operator="out"></feComposite>
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix>
      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_17"></feBlend>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_17" result="shape"></feBlend>
    </filter>
    <clipPath id="clip0_2_17">
      <rect width="28.0702" height="28.0702" fill="white" transform="translate(0.403503 0.526367)"></rect>
    </clipPath>
  </defs>
</svg>
                     

            </button>
        </div>


        
<style>
/* From Uiverse.io by OnlyCodeChannel - Tags: input, search, search bar */
.searchBox {
  display: flex;
  max-width: 230px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #2f3640;
  border-radius: 50px;
  position: relative;
}

.searchButton {
  color: white;
  position: absolute;
  right: 8px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gradient-2, linear-gradient(90deg, #2AF598 0%, #009EFD 100%));
  border: 0;
  display: inline-block;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
}
/*hover effect*/
button:hover {
  color: #fff;
  background-color: #1A1A1A;
  box-shadow: rgba(0, 0, 0, 0.5) 0 10px 20px;
  transform: translateY(-3px);
}
/*button pressing effect*/
button:active {
  box-shadow: none;
  transform: translateY(0);
}

.searchInput {
  border: none;
  background: none;
  outline: none;
  color: white;
  font-size: 15px;
  padding: 24px 46px 24px 26px;
}


</style>


================================================
FILE: Inputs/PhanDangKhoa96_swift-warthog-78.html
================================================
<div class="container">
  <div class="wrapper">
    <div class="input-wrapper">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="white"
        class="search-icon"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
        ></path>
      </svg>
      <input type="text" placeholder="Search..." name="" id="" class="" />

      <button class="filter-btn">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="white"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"
          ></path>
        </svg>
      </button>

      <div class="pink-overlay"></div>

      <div class="blue-overlay"></div>

      <div class="gradient-box"></div>
    </div>

    <div class="grid-layout">
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
      <div class="aspect-square bg-black"></div>
    </div>
    <div class="oval-overlay">
      <div class="shadow"></div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by PhanDangKhoa96  - Tags: input */
.container {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background-color: #000000;
}

.wrapper {
  isolation: isolate;
  overflow: hidden;
  position: relative;
  padding-top: 6rem;
  padding-bottom: 6rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

.input-wrapper {
  isolation: isolate;
  position: relative;
  width: 100%;
  max-width: 340px;
}

.search-icon {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  opacity: 0.7;
  width: 32px;
  height: 32px;
  translate: 0 -50%;
}

.input-wrapper input {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 5rem;
  padding-left: 5rem;
  outline-style: none;
  width: 100%;
  font-size: 1.5rem;
  line-height: 2rem;
  background-color: #000000;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: white;
}

.filter-btn {
  aspect-ratio: 1/1;
  display: grid;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  place-items: center;
  border-radius: 0.75rem;
  border-style: solid;
  transition-property: background-color, border-color, color, fill, stroke,
    opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-duration: 300ms;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.1);
  width: 48px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.1);
  translate: 0 -50%;
}

.filter-btn svg {
  width: 32px;
  height: 32px;
  transition-property: background-color, border-color, color, fill, stroke,
    opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-duration: 300ms;
  opacity: 0.7;
}

.filter-btn:hover {
  background-color: white;
}

.filter-btn:hover svg {
  stroke: black;
}

.pink-overlay {
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 9999px;
  width: 5rem;
  height: 5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-duration: 500ms;
  opacity: 1;
  filter: blur(24px) drop-shadow(0 0 60px #b43598);
  background: #b43598;
  z-index: -10;
  translate: 0 -50%;
}

.blue-overlay {
  position: absolute;
  right: -1.25rem;
  top: 66.666667%;
  border-radius: 9999px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-duration: 500ms;
  opacity: 1;
  filter: blur(24px) drop-shadow(0 0 60px #120d57);
  height: 100px;
  width: 100px;
  z-index: -10;
  background: #120d57;
  translate: 0 -50%;
}

.gradient-box {
  --border-angle: 0turn;
  --main-bg: conic-gradient(
    from var(--border-angle),
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 100%
  );

  --gradient-border: conic-gradient(
    from var(--border-angle),
    transparent 25%,
    white 28%,
    transparent 30%,
    transparent 60%,
    transparent 73%,
    white 78%,
    transparent 80%
  );

  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-color: transparent;
  border-style: solid;
  height: calc(100% + 4px);
  width: calc(100% + 4px);
  border-width: 2px;
  filter: blur(2px);
  z-index: -10;
  border-radius: 20px;
  background: var(--main-bg) padding-box, var(--gradient-border) border-box,
    var(--main-bg) border-box;
  background-position: center center;
  animation: bg-spin 5s linear infinite forwards;
}

.input-wrapper:hover .pink-overlay {
  height: 100%;
  width: 100%;
  border-radius: 20px;
  filter: blur(1px) drop-shadow(0 0 0 #b43598);
}

.input-wrapper:hover .blue-overlay {
  top: 50%;
  right: 0;
  height: 100%;
  width: 100%;
  border-radius: 20px;
  filter: blur(1px) drop-shadow(0 0 0 #120d57);
}

.input-wrapper:hover .gradient-box {
  animation: bg-spin 5s linear infinite forwards;
}

@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

.grid-layout {
  display: grid;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  scale: 1.1;
  z-index: -10;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  translate: -50% -50%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  gap: 1px;
}

.grid-layout .aspect-square {
  aspect-ratio: 1/1;
  background: black;
}

.oval-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -10;
}

.oval-overlay .shadow {
  height: 100%;
  width: 100%;
  scale: 1.1;
  border-radius: 50%;
  box-shadow: 0 0 20px 20px #000 inset;
}

</style>
    

================================================
FILE: Inputs/Praashoo7_tame-sloth-39.html
================================================
<input type="text" autocomplete="off" name="text" class="input" placeholder="Username">
<style>
/* From Uiverse.io by Praashoo7 - Tags: neumorphism, input, smooth */
.input {
  border: none;
  outline: none;
  border-radius: 15px;
  padding: 1em;
  background-color: #ccc;
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
  transition: 300ms ease-in-out;
}

.input:focus {
  background-color: white;
  transform: scale(1.05);
  box-shadow: 13px 13px 100px #969696,
             -13px -13px 100px #ffffff;
}
</style>


================================================
FILE: Inputs/PriyanshuGupta28_bitter-bulldog-63.html
================================================
 <div class="input-container">
    <label for="name" class="name">Name:</label>
    <input placeholder="Enter your name" type="text" class="input">
    <div class="underline"></div>
  </div>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: input, input effect , css input, html input, cool input */
.input-container {
  position: relative;
  margin: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #333;
}

.input[type="text"] {
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
  color: #333;
  width: 200px;
  outline: none;
}

.underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  transition: width 0.3s;
}

.input[type="text"]:focus + .underline {
  width: 100%;
}

@keyframes floating-label {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-25px);
    opacity: 0;
  }
}

.input[type="text"]:placeholder-shown + label {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 14px;
  color: #777;
  pointer-events: none;
  transition: transform 0.3s, font-size 0.3s, color 0.3s;
}

.input[type="text"]:focus:not(:placeholder-shown) + label {
  transform: translateY(-25px);
  font-size: 12px;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  animation: floating-label 0.3s forwards;
}

</style>


================================================
FILE: Inputs/PriyanshuGupta28_bright-swan-54.html
================================================
<input id="myRange" class="slider" value="50" max="100" min="0" type="range">

<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: input, range, input effect  */
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #4c00ff;
  background-image: linear-gradient(160deg, #4900f5 0%, #80D0C7 100%);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #0093E9;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  cursor: pointer;
}

</style>


================================================
FILE: Inputs/PriyanshuGupta28_hungry-otter-56.html
================================================
<div class="rating">
  <input value="5" name="rating" id="star5" type="radio">
  <label for="star5"></label>
  <input value="4" name="rating" id="star4" type="radio">
  <label for="star4"></label>
  <input value="3" name="rating" id="star3" type="radio">
  <label for="star3"></label>
  <input value="2" name="rating" id="star2" type="radio">
  <label for="star2"></label>
  <input value="1" name="rating" id="star1" type="radio">
  <label for="star1"></label>
</div>

<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: input, rating, Rating Button, start rating */
.rating {
  display: flex;
  flex-direction: row-reverse;
 /* Reverse the order of the stars */
  font-size: 0;
 /* Remove the space between the elements */
}

.rating input[type="radio"] {
  display: none;
 /* Hide the radio buttons */
}

.rating label {
  font-size: 30px;
  color: rgba(187, 183, 183, 0.726);
 /* Empty star color */
  margin: 0 2px;
  cursor: pointer;
}

.rating label:before {
  content: "\2605";
 /* Unicode character for filled star */
}

.rating input[type="radio"]:checked ~ label:before {
  content: "\2606";
 /* Unicode character for empty star */
  color: #016bf5;
 /* Filled star color */
}

</style>


================================================
FILE: Inputs/PriyanshuGupta28_swift-chipmunk-76.html
================================================
<div class="rating">
  <input value="5" name="rating" id="star5" type="radio">
  <label for="star5"></label>
  <input value="4" name="rating" id="star4" type="radio">
  <label for="star4"></label>
  <input value="3" name="rating" id="star3" type="radio">
  <label for="star3"></label>
  <input value="2" name="rating" id="star2" type="radio">
  <label for="star2"></label>
  <input value="1" name="rating" id="star1" type="radio">
  <label for="star1"></label>
</div>

<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: input, stars, rating */
.rating {
  display: inline-block;
}

.rating input {
  display: none;
}

.rating label {
  float: right;
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s;
}

.rating label:before {
  content: '\2605';
  font-size: 30px;
}

.rating input:checked ~ label,
.rating label:hover,
.rating label:hover ~ label {
  color: #6f00ff;
  transition: color 0.3s;
}

</style>


================================================
FILE: Inputs/RashadGhzi_smooth-skunk-12.html
================================================
<!-- From Uiverse.io by RashadGhzi  - Tags: simple, form, input, hover effect, input effect , tailwind -->
<div class="w-full max-w-xs p-5 bg-white rounded-lg font-mono">
  <label class="block text-gray-700 text-sm font-bold mb-2" for="unique-input"
    >Your Label</label
  >
  <input
    class="text-sm custom-input w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm transition duration-300 ease-in-out transform focus:-translate-y-1 focus:outline-blue-300 hover:shadow-lg hover:border-blue-300 bg-gray-100"
    placeholder="Enter text here"
    type="text"
    id="unique-input"
  />
</div>


    

================================================
FILE: Inputs/RashadGhzi_stupid-firefox-88.html
================================================
<!-- From Uiverse.io by RashadGhzi  - Tags: simple, form, input, modern, tailwindcss -->
<div class="relative">
  <input
    type="text"
    placeholder="Username Here..."
    class="w-64 py-2 pl-8 pr-4 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
  />
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    class="absolute start-2 top-0 bottom-0 m-auto w-5 h-5 text-gray-500"
  >
    <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
    <g
      stroke-linejoin="round"
      stroke-linecap="round"
      id="SVGRepo_tracerCarrier"
    ></g>
    <g id="SVGRepo_iconCarrier">
      <circle stroke-width="1.5" stroke="#1C274C" r="4" cy="6" cx="10"></circle>
      <path
        stroke-linecap="round"
        stroke-width="1.5"
        stroke="#1C274C"
        d="M21 10H19M19 10H17M19 10L19 8M19 10L19 12"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="1.5"
        stroke="#1C274C"
        d="M17.9975 18C18 17.8358 18 17.669 18 17.5C18 15.0147 14.4183 13 10 13C5.58172 13 2 15.0147 2 17.5C2 19.9853 2 22 10 22C12.231 22 13.8398 21.8433 15 21.5634"
      ></path>
    </g>
  </svg>
</div>


    

================================================
FILE: Inputs/Rodrypaladin_bitter-cobra-27.html
================================================
<div class="box-input">
  <div class="border">
    <input type="text" name="text" class="input" placeholder="Name">
  </div>
</div>

<style>
/* From Uiverse.io by Rodrypaladin - Tags: animation, form, input, animated, colorful */
.box-input {
  position: relative;
}

.border {
  background-image: linear-gradient(to right bottom, #e300ff, #ff00aa, #ff5956, #ffb900, #fffe00);
  box-shadow: -25px -10px 30px -5px rgba(225, 0, 255, 0.5),
    25px -10px 30px -5px rgba(255, 0, 212, 0.5),
    25px 10px 30px -5px rgba(255, 174, 0, 0.5),
    -25px 10px 30px -5px rgba(255, 230, 0, 0.5);
  padding: 4px;
}

.input {
  background-color: #212121;
  max-width: 250px;
  height: 40px;
  padding: 0 19px 0 10px;
  font-size: 1.1em;
  position: relative;
  border: none;
  color: white;
  outline: 0;
  overflow: hidden;
}

.box-input::after,
.box-input::before {
  content: "";
  width: 130px;
  height: 30px;
  position: absolute;
  z-index: -1;
}

.box-input::after {
  bottom: 0;
  right: 0;
}

.box-input::before {
  top: 0;
  left: 0;
}

.input::placeholder {
  transition: all 0.5s ease-in, transform 0.2s ease-in 0.6s;
}

.input:focus::placeholder {
  padding-left: 165px;
  transform: translateY(-50px);
}

</style>


================================================
FILE: Inputs/SARAN2004_swift-chicken-44.html
================================================
<div class="inputs">
  <input type="text" name="text" class="input" placeholder="Enter Text" required="">
</div>
  

<style>
/* From Uiverse.io by SARAN2004 - Tags: active, input, click */
.input {
  max-width: 190px;
  height: 45px;
  width: 100%;
  outline: none;
  font-size: 16px;
  border-radius: 5px;
  padding-left: 15px;
  border: 1px solid #ccc;
  border-bottom-width: 2px;
  transition: all 0.3s ease;
  position: relative;
}

.input:valid {
  border-color: #00ff2a;
  color: #00ff2a;
  box-shadow: 2px 2px 8px 1px #00ff2a;
}

.input:invalid {
  border-color: #ff0000;
  color: #ff0000;
  box-shadow: 2px 2px 8px 1px #ff0000;
  /* translate: -8px 8px 0px 0px; */
}

.text {
  margin-top: 10px;
  color: black;
}

</style>


================================================
FILE: Inputs/Sahana-Lakshmipathy_hot-panther-0.html
================================================
<!-- From Uiverse.io by Sahana-Lakshmipathy  - Tags: input -->
<div
  class="relative flex items-center rounded-lg bg-gradient-to-r from-blue-900 to-gray-800 text-cyan-400 py-2 px-4 w-1/2 focus-within:ring-2 focus-within:ring-offset-1 focus-within:ring-blue-500 hover:shadow-md transition duration-300 ease-in-out w-75% sm:w-3/4 md:w-1/2 lg:w-1/3 xl:w-1/4"
>
  <svg
    stroke="currentColor"
    viewBox="0 0 24 24"
    fill="none"
    class="h-6 w-6 mr-2 text-blue-400"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z"
      stroke-width="2"
      stroke-linejoin="round"
      stroke-linecap="round"
    ></path>
  </svg>
  <input
    class="flex-grow bg-transparent focus:outline-none hover:border-solid hover:border-blue-500 transition duration-300 ease-in-out text-base md:text-lg lg:text-xl"
    placeholder="Type something..."
    name="text"
    type="text"
  />
</div>


    

================================================
FILE: Inputs/SanthoshSJ-Dev_mean-wolverine-8.html
================================================
<div class="input-wrapper">
  <input class="input-box" type="text" placeholder="Enter your text">
  <span class="underline"></span>
</div>

<style>
/* From Uiverse.io by SanthoshSJ-Dev - Tags: simple, material design, input, animated, line, text */
.input-wrapper {
  position: relative;
  width: 200px;
  margin: 50px auto;
}

.input-box {
  font-size: 16px;
  padding: 10px 0;
  border: none;
  border-bottom: 2px solid #ccc;
  color: #08AEEA;
  width: 100%;
  background-color: transparent;
  transition: border-color 0.3s ease-in-out;
}

.underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #08AEEA;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.input-box:focus {
  border-color: #08AEEA;
  outline: none;
}

.input-box:focus + .underline {
  transform: scaleX(1);
}

</style>


================================================
FILE: Inputs/Satwinder04_ancient-sloth-30.html
================================================
<div class="input-container">
  <input placeholder="Enter text" class="input-field" type="text">
  <label for="input-field" class="input-label">Enter text</label>
  <span class="input-highlight"></span>
</div>

<style>
/* From Uiverse.io by Satwinder04 - Tags: input */
/* Input container */
.input-container {
  position: relative;
  margin: 20px;
}

/* Input field */
.input-field {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
  background-color: transparent;
}

/* Input label */
.input-label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 16px;
  color: rgba(204, 204, 204, 0);
  pointer-events: none;
  transition: all 0.3s ease;
}

/* Input highlight */
.input-highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: #007bff;
  transition: all 0.3s ease;
}

/* Input field:focus styles */
.input-field:focus + .input-label {
  top: -20px;
  font-size: 12px;
  color: #007bff;
}

.input-field:focus + .input-label + .input-highlight {
  width: 100%;
}

</style>


================================================
FILE: Inputs/Satwinder04_pink-bat-77.html
================================================
<div class="input-container">
  <input type="text" id="input" required="">
  <label for="input" class="label">Enter Text</label>
  <div class="underline"></div>
</div>

<style>
/* From Uiverse.io by Satwinder04 - Tags: input */
.input-container {
  position: relative;
  margin: 50px auto;
  width: 200px;
}

.input-container input[type="text"] {
  font-size: 20px;
  width: 100%;
  border: none;
  border-bottom: 2px solid #ccc;
  padding: 5px 0;
  background-color: transparent;
  outline: none;
}

.input-container .label {
  position: absolute;
  top: 0;
  left: 0;
  color: #ccc;
  transition: all 0.3s ease;
  pointer-events: none;
}

.input-container input[type="text"]:focus ~ .label,
.input-container input[type="text"]:valid ~ .label {
  top: -20px;
  font-size: 16px;
  color: #333;
}

.input-container .underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #333;
  transform: scaleX(0);
  transition: all 0.3s ease;
}

.input-container input[type="text"]:focus ~ .underline,
.input-container input[type="text"]:valid ~ .underline {
  transform: scaleX(1);
}

</style>


================================================
FILE: Inputs/SelfMadeSystem_ancient-goat-9.html
================================================
<input type="checkbox" style="display: none;" id="searched" />
<div class="outer">
  <div class="tooltip">
    <div class="a"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="label">
      <div class="c"></div>
      <div class="c"></div>
      <span>Click Search</span>
    </div>
  </div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <label for="text-field" class="label">
    <div class="c"></div>
    <div class="c"></div>
    <label for="searched" class="searched-thing">
      <svg
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        class="search"
      >
        <defs>
          <radialGradient r="1" cy="0" cx="0" id="myGradient">
            <stop stop-color="white" offset="0%"></stop>
            <stop stop-color="#928293" offset="100%"></stop>
          </radialGradient>
        </defs>
        <path
          class="search-path"
          d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
        ></path>
        <path
          class="chevron-path"
          d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
        ></path>
      </svg>
    </label>
    <input
      placeholder="Search..."
      class="text-field"
      name="text"
      type="text"
      id="text-field"
    />
    <button class="filter">
      <div class="filter-outer"></div>
      <div class="filter-inner">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          class="filter-icon"
        >
          <defs>
            <radialGradient r="1.4" cy="1" cx="1" id="myOtherGradient">
              <stop stop-color="white" offset="0%"></stop>
              <stop stop-color="#928293" offset="100%"></stop>
            </radialGradient>
          </defs>
          <path
            d="M15,19.88C15.04,20.18 14.94,20.5 14.71,20.71C14.32,21.1 13.69,21.1 13.3,20.71L9.29,16.7C9.06,16.47 8.96,16.16 9,15.87V10.75L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L15,10.75V19.88M7.04,5L11,10.06V15.58L13,17.58V10.05L16.96,5H7.04Z"
          ></path>
        </svg>
      </div>
    </button>
    <div class="results">
      <div class="result">
        <a href="#" class="link">Cat - Wikipedia</a>
        <div class="description">
          The cat (Felis catus), commonly referred to as the domestic...
        </div>
      </div>
      <div class="result">
        <a href="#" class="link">Cat Definition &amp; Meaning</a>
        <div class="description">
          The meaning of CAT is a carnivorous mammal...
        </div>
      </div>
      <div class="result">
        <a href="#" class="link">CAT | English meaning</a>
        <div class="description">
          CAT definition: 1. a small animal with fur, four legs, a tail, and...
        </div>
      </div>
      <div class="dotdotdot"></div>
    </div>
  </label>
</div>

<style>
/* From Uiverse.io by SelfMadeSystem  - Tags:  */
.outer {
  position: relative;
  border-radius: 0.75rem;
  border: 2px solid #242325;
  width: 17rem;
  --angle: 155deg;
  animation: uwu 5s infinite linear paused;
  height: 3rem;
  transition: height 1s ease;
}

.a {
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    var(--angle),
    #d8b1d9,
    #ff00ff 20%,
    #ff00ff00 30%,
    #5b49d600 70%,
    #3863ff 80%,
    #c2baf8
  );
  border-radius: calc(0.75rem + 2px);
  filter: blur(2px);
}

.b {
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    var(--angle),
    #ff00ff,
    #ff00ff00,
    #5b49d600,
    #3863ff
  );
  border-radius: calc(0.75rem + 0px);
  filter: blur(10px);
  opacity: 0.3;
  transition: opacity 0.5s;
}

.outer:has(input:focus) :is(.b, .c) {
  opacity: 0.75;
}

.label {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #000;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  box-sizing: content-box;
  padding: 0.35rem;
  border-radius: 0.75rem;
}

.c {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  inset: -20px;
  background: linear-gradient(
    var(--angle),
    #ff00ff,
    #ff00ff00,
    #5b49d600,
    #3863ff
  );
  filter: blur(30px);
  opacity: 0.5;
  transition: opacity 0.5s;
}

.text-field {
  background-color: transparent;
  flex-grow: 1;
  border: none;
  outline: 0 !important;
  color: #fff;
  height: 2rem;
  margin: 0 0.5rem;
  min-width: 0;
}

.text-field::placeholder {
  color: #999999;
}

.search {
  fill: url(#myGradient);
}

.searched-thing {
  display: flex;
  align-items: center;
  z-index: 1;
  margin-left: 0.25rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

.searched-thing svg {
  width: 1.5rem;
  height: 1.5rem;
}

.filter {
  z-index: 1;
  background: linear-gradient(#100f1e, #413d54, #100f1e);
  position: relative;
  border: none;
  border-radius: 0.5rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  flex-shrink: 0;
}

.filter-outer {
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  background: linear-gradient(#413d54, #100f1e, #413d54);
  transition: all 0.5s;
}

.filter:active .filter-outer {
  opacity: 0;
}

.filter-inner {
  position: absolute;
  inset: 2px;
  background: linear-gradient(#1c1a3b, #0a071e, #1f1c4d);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(0.5rem - 2px);
  transition: all 0.5s;
}

.filter-icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: url(#myOtherGradient);
}

#searched:checked ~ .outer {
  height: 20rem;
}

:is(.search-path, .filter) {
  transition: opacity 1s;
}

#searched:checked ~ .outer :is(.search-path, .filter) {
  transition: opacity 0.5s;
  opacity: 0;
}

.chevron-path {
  opacity: 0;
  transition: opacity 0.5s;
  fill: #fdf;
}

#searched:checked ~ .outer .chevron-path {
  opacity: 1;
}

.text-field {
  transition: font-size 1s;
}

#searched:checked ~ .outer .text-field {
  transition: font-size 0.5s;
  font-size: large;
}

.results {
  position: absolute;
  opacity: 0;
  top: 3rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  padding: 1rem;
  transition: opacity 0.5s;
  overflow: hidden;
  background: #0004;
  z-index: 1;
  border-radius: 1rem;
}

#searched:checked ~ .outer .results {
  transition: opacity 1s;
  opacity: 1;
}

.link {
  color: #6882e3;
}

.description {
  color: #fffa;
  font-size: small;
}

.dotdotdot,
.dotdotdot::before,
.dotdotdot::after {
  content: "";
  width: 0.25rem;
  height: 0.25rem;
  background-color: #fffa;
  border-radius: 100%;
}

.dotdotdot {
  margin: 1.25rem auto 0 auto;
  left: 50%;
  bottom: 1.4rem;
  transform: translate(-50%, -50%);
}

.dotdotdot::before {
  position: absolute;
  transform: translateY(-200%);
}

.dotdotdot::after {
  position: absolute;
  transform: translateY(200%);
}

.tooltip {
  pointer-events: none;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  top: -6rem;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  opacity: 0;
  transition: top 0.3s ease-in, opacity 0.3s linear;
  background: linear-gradient(
    var(--angle),
    #ff00ff44,
    #ff00ff00,
    #5b49d600,
    #3863ff44
  );
  background-color: #000;
  border-radius: 0.5rem;
  padding: 0.5rem;
  width: 8rem;
  height: 2rem;
}

.tooltip .label {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tooltip .label span {
  transform: rotate(180deg);
}

.tooltip :is(.b, .c) {
  opacity: 0.5 !important;
}

#searched:not(:checked) ~ .outer:hover .tooltip {
  transition: top 0.75s ease, opacity 0.5s linear;
  top: -3.5rem;
  opacity: 1;
}

</style>
    

================================================
FILE: Inputs/Shoh2008_fluffy-vampirebat-90.html
================================================
<input type="text" name="text" class="input">
<input type="text" name="text" class="input">
<input type="text" name="text" class="input">
<style>
/* From Uiverse.io by Shoh2008 - Tags: input */
.input {
  max-width: 190px;
  width: 40px;
  height: 40px;
  outline: none;
  margin: 5px;
  transition: .5s;
  border: none;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: rotate(90deg);
}

input:focus {
  width: 150px;
  transform: rotate(0);
}
</style>


================================================
FILE: Inputs/Shubh0408_calm-shrimp-66.html
================================================
<!-- From Uiverse.io by Shubh0408  - Tags: input, text animation, animated, input effect , click animation -->
<div class="flex flex-col-reverse">
  <input
    placeholder="Enter detail"
    class="peer outline-none border pl-2 py-1 duration-500 border-black focus:border-dashed relative placeholder:duration-500 placeholder:absolute focus:placeholder:pt-10 focus:rounded-md"
    type="text"
  />
  <span
    class="pl-2 duration-500 opacity-0 peer-focus:opacity-100 -translate-y-5 peer-focus:translate-y-0"
    >Enter detail</span
  >
</div>


    

================================================
FILE: Inputs/Smit-Prajapati_brave-hound-66.html
================================================
<div class="container">
<div class="search-container">
  <input class="input" type="text">
  <svg viewBox="0 0 24 24" class="search__icon">
    <g>
      <path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z">
      </path>
    </g>
  </svg>
</div>
</div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: input, search, search bar, css input */
.container {
  position: relative;
  background: linear-gradient(135deg, rgb(179, 208, 253) 0%, rgb(164, 202, 248) 100%);
  border-radius: 1000px;
  padding: 10px;
  display: grid;
  place-content: center;
  z-index: 0;
  max-width: 300px;
  margin: 0 10px;
}

.search-container {
  position: relative;
  width: 100%;
  border-radius: 50px;
  background: linear-gradient(135deg, rgb(218, 232, 247) 0%, rgb(214, 229, 247) 100%);
  padding: 5px;
  display: flex;
  align-items: center;
}

.search-container::after, .search-container::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: absolute;
}

.search-container::before {
  top: -1px;
  left: -1px;
  background: linear-gradient(0deg, rgb(218, 232, 247) 0%, rgb(255, 255, 255) 100%);
  z-index: -1;
}

.search-container::after {
  bottom: -1px;
  right: -1px;
  background: linear-gradient(0deg, rgb(163, 206, 255) 0%, rgb(211, 232, 255) 100%);
  box-shadow: rgba(79, 156, 232, 0.7019607843) 3px 3px 5px 0px, rgba(79, 156, 232, 0.7019607843) 5px 5px 20px 0px;
  z-index: -2;
}

.input {
  padding: 10px;
  width: 100%;
  background: linear-gradient(135deg, rgb(218, 232, 247) 0%, rgb(214, 229, 247) 100%);
  border: none;
  color: #9EBCD9;
  font-size: 20px;
  border-radius: 50px;
}

.input:focus {
  outline: none;
  background: linear-gradient(135deg, rgb(239, 247, 255) 0%, rgb(214, 229, 247) 100%);
}

.search__icon {
  width: 50px;
  aspect-ratio: 1;
  border-left: 2px solid white;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: 50%;
  padding-left: 12px;
  margin-right: 10px;
}

.search__icon:hover {
  border-left: 3px solid white;
}

.search__icon path {
  fill: white;
}
</style>


================================================
FILE: Inputs/Smit-Prajapati_serious-goose-17.html
================================================
<div class="input-container">
  <input type="text" placeholder="Add Item">
  <button class="button">Add</button>
</div>

<style>
/* From Uiverse.io by Smit-Prajapati - Tags: input, input effect , cool input */
.input-container {
  display: flex;
  background: white;
  border-radius: 1rem;
  background: linear-gradient(135deg, #23272F 0%, #14161a 100%);
  box-shadow: 10px 10px 20px #0e1013, -10px -10px 40px #383e4b;
  padding: 0.3rem;
  gap: 0.3rem;
}

.input-container input {
  border-radius: 0.8rem 0 0 0.8rem;
  background: #23272F;
  box-shadow: inset 5px 5px 10px #0e1013, inset -5px -5px 10px #383e4b, 0px 0px 100px rgba(255, 212, 59, 0), 0px 0px 100px rgba(255, 102, 0, 0);
  width: 100%;
  flex-basis: 75%;
  padding: 1rem;
  border: none;
  border: 1px solid transparent;
  color: white;
  transition: all 0.2s ease-in-out;
}

.input-container input:focus {
  border: 1px solid #FFD43B;
  outline: none;
  box-shadow: inset 0px 0px 10px rgba(255, 102, 0, 0.5), inset 0px 0px 10px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 102, 0, 0.5);
}

.input-container button {
  flex-basis: 25%;
  padding: 1rem;
  background: linear-gradient(135deg, rgb(255, 212, 59) 0%, rgb(255, 102, 0) 100%);
  box-shadow: 0px 0px 1px rgba(255, 212, 59, 0.5), 0px 0px 1px rgba(255, 102, 0, 0.5);
  font-weight: 900;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  color: #23272F;
  border: none;
  width: 100%;
  border-radius: 0 1rem 1rem 0;
  transition: all 0.2s ease-in-out;
}

.input-container button:hover {
  background: linear-gradient(135deg, rgb(255, 212, 59) 50%, rgb(255, 102, 0) 100%);
  box-shadow: 0px 0px 100px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 102, 0, 0.5);
}

@media (max-width: 500px) {
  .input-container {
    flex-direction: column;
  }

  .input-container input {
    border-radius: 0.8rem;
  }

  .input-container button {
    padding: 1rem;
    border-radius: 0.8rem;
  }
}
</style>


================================================
FILE: Inputs/SouravBandyopadhyay_modern-rabbit-52.html
================================================
<div class="inp-border a1">
      <input placeholder="Your Name" name="name1" type="text" class="input">
  </div>
    
<style>
/* From Uiverse.io by SouravBandyopadhyay - Tags: input, light, transition */
.inp-border {
  padding: 5px;
  margin: 2em 1em;
  border-radius: 50px;
  max-width: 300px;
}

.input {
  text-align: center;
  padding: 15px;
  outline: none;
  border: double 0;
  background: #252525;
  border-radius: 50px;
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 100%;
  font-size: 1.5rem;
}

.a1 {
  background: linear-gradient(
    330.28deg,
    #ff6e1d 100%,
    #ff6e1d 100%,
    #ff6e1d 100%
  );
}

.a1 > input {
  color: #caab98;
}

.a1 > input::placeholder {
  color: #ff6e1d;
  opacity: 0.6;
}

.inp-border:focus-within {
  background: linear-gradient(
    330.28deg,
    #2cfff2 0%,
    #1e78ff 30.73%,
    #ff54a6 55.73%,
    #ff6e1d 79.17%,
    #ff3e3e 100%
  );
}

.inp-border:hover {
  background: linear-gradient(
    330.28deg,
    #2cfff2 0%,
    #1e78ff 30.73%,
    #ff54a6 55.73%,
    #ff6e1d 79.17%,
    #ff3e3e 100%
  );
}

</style>


================================================
FILE: Inputs/Spacious74_cold-goose-63.html
================================================
<div class="container">
  <div class="radial-cont">
    <div class="outer">
      <div class="inner-cont">
        <div class="main-block">
          <div class="elements-cont">
            <svg
              class="svg"
              xmlns="http://www.w3.org/2000/svg"
              width="1em"
              height="1em"
              viewBox="0 0 48 48"
            >
              <path
                fill="currentColor"
                d="M20.5 6C12.492 6 6 12.492 6 20.5S12.492 35 20.5 35a14.44 14.44 0 0 0 9.138-3.241l9.801 9.801a1.5 1.5 0 1 0 2.121-2.121l-9.8-9.801A14.44 14.44 0 0 0 35 20.5C35 12.492 28.508 6 20.5 6M9 20.5C9 14.149 14.149 9 20.5 9S32 14.149 32 20.5S26.851 32 20.5 32S9 26.851 9 20.5"
              ></path>
            </svg>
            <input
              class="input"
              type="text"
              name="search"
              placeholder="Search..."
            />
            <div class="filter">
              <svg
                class="funnel"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                width="1em"
                height="1em"
                color="#000000"
                fill="none"
              >
                <path
                  d="M8.85746 12.5061C6.36901 10.6456 4.59564 8.59915 3.62734 7.44867C3.3276 7.09253 3.22938 6.8319 3.17033 6.3728C2.96811 4.8008 2.86701 4.0148 3.32795 3.5074C3.7889 3 4.60404 3 6.23433 3H17.7657C19.396 3 20.2111 3 20.672 3.5074C21.133 4.0148 21.0319 4.8008 20.8297 6.37281C20.7706 6.83191 20.6724 7.09254 20.3726 7.44867C19.403 8.60062 17.6261 10.6507 15.1326 12.5135C14.907 12.6821 14.7583 12.9567 14.7307 13.2614C14.4837 15.992 14.2559 17.4876 14.1141 18.2442C13.8853 19.4657 12.1532 20.2006 11.226 20.8563C10.6741 21.2466 10.0043 20.782 9.93278 20.1778C9.79643 19.0261 9.53961 16.6864 9.25927 13.2614C9.23409 12.9539 9.08486 12.6761 8.85746 12.5061Z"
                  stroke="currentColor"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="pink blob"></div>
      <div class="blue blob"></div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Spacious74  - Tags: animation, gradient, input, search, neon, filter */
.container {
  width: 100%;
  height: 100%;
  background-size: 16px 16px;
  background-image: linear-gradient(to right, #0d0d0c 2px, transparent 1px),
    linear-gradient(to bottom, #0d0d0c 2px, transparent 1px);
  background-color: #000000;
}
.radial-cont {
  width: 100%;
  height: 100%;
  background-image: radial-gradient(ellipse, transparent, #000);
  display: flex;
  align-items: center;
  justify-content: center;
}
.input {
  background-color: transparent;
  border: none;
  font-size: 1.4rem;
  width: 265px;
  outline: none;
  color: #d6d6d6;
  letter-spacing: 1px;
  z-index: 10;
}
.outer {
  position: relative;
}
.blob {
  position: absolute;
  width: 130px;
  height: 70px;
  animation: blob 5s ease-in-out infinite alternate;
}
@keyframes blob {
  0% {
    width: 130px;
  }
  100% {
    width: 100.2%;
  }
}
.pink {
  background-color: #ff98e4;
  left: -1px;
  top: 0px;
  border-radius: 16px;
  transform: rotate(1deg);
  box-shadow: -2px -2px 3px #ff9affc9, -5px -5px 10px #6d0a6dc7,
    -10px -10px 70px #e240e29c;
  filter: blur(1px);
}
.blue {
  background-color: #ffbfee;
  right: -1px;
  bottom: -1px;
  border-radius: 16px;
  transform: rotate(0deg);
  box-shadow: 2px 2px 3px #6c19d8a6, 5px 5px 10px #350a6dc7,
    20px 10px 90px 10px #220af7b0;
  filter: blur(3px);
}

.inner-cont {
  width: 430px;
  height: 75px;
  background-color: #202121;
  position: relative;
  padding: 2px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.inner-cont::before,
.inner-cont::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 75px;
  border-radius: 16px;
}
.inner-cont::before {
  left: 0;
  background-image: radial-gradient(
    circle 150px at 10% -60%,
    #e240b6,
    transparent
  );
}
.inner-cont::after {
  right: 0;
  background-image: radial-gradient(
    circle 150px at 100% 160%,
    #533cde,
    transparent
  );
}

.main-block {
  background-color: #000000;
  border-radius: 16px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 20px;
  padding-right: 10px;
  position: relative;
  z-index: 2;
}
.elements-cont {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.main-block::before,
.main-block::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 71px;
  border-radius: 18px;
}
.main-block::before {
  left: 0px;
  background-image: radial-gradient(
    circle 150px at 0 -10%,
    #f701f33d,
    transparent
  );
}
.main-block::after {
  right: 0px;
  background-image: radial-gradient(
    circle 150px at 100% 150%,
    #1100ac7e,
    transparent
  );
}

.svg {
  color: #fff;
  font-size: 2.3rem;
}
.funnel {
  font-size: 2.3rem;
  color: #fff;
  width: 55px;
  height: 55px;
  padding: 8px;
  border-radius: 10px;
  margin-top: 7px;
  border: solid 2px #494949;
  position: relative;
  background: radial-gradient(circle 50px at 50% -60%, #6b698f, transparent);
}

</style>
    

================================================
FILE: Inputs/TamaniPhiri_black-ape-85.html
================================================
<!-- From Uiverse.io by TamaniPhiri  - Tags: simple, email, input, login , login form, input -->
<div
  class="shadow-lg flex gap-2 items-center bg-white p-2 hover:shadow-xl duration-300 hover:border-2 border-gray-400 group delay-200 rounded-md"
>
  <svg
    class="group-hover:rotate-[360deg] duration-300"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24"
    height="1em"
    width="1em"
  >
    <path
      d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
    ></path>
    <path d="M22 6l-10 7L2 6"></path>
  </svg>
  <input
    type="email"
    name="text"
    class="flex-1 focus:outline-none"
    placeholder="Email"
  />
</div>


    

================================================
FILE: Inputs/TaniaDou_friendly-badger-72.html
================================================
<div class="input-box">
    <input required="" type="text" class="input">
    <label class="label text--flicking">Name<sup>*</sup></label>
</div>

<style>
/* From Uiverse.io by TaniaDou - Tags: input, remove, placeholder, cool input */
.input-box {
  position: relative;
  max-width: 190px;
}

.input {
  position: relative;
  width: 100%;
  padding: 1.5rem;
  background: none;
  border: solid 1.5px #9e9e9e;
  border-radius: .6rem;
  color: #9e9e9e;
  font-size: 1rem;
}

.label {
  position: absolute;
  pointer-events: none;
  left: 1rem;
  top: .875rem;
  white-space: nowrap;
  overflow: hidden;
  line-height: 2rem;
  padding-left: 1rem;
  font-size: 1rem;
  color: #9e9e9e;
  transition: 500ms cubic-bezier(0.4,0,0.2,1);
}

.input:focus~.label, input:valid ~ label {
  top: -6px;
  left: -5px;
  font-size: .875rem;
  color: #9e9e9e;
}
</style>


================================================
FILE: Inputs/TechByElijah_fluffy-dolphin-33.html
================================================
<div class="input-container">
  <input type="text" name="text" class="input" placeholder="Enter text">
  <div class="highlight"></div>
</div>

<style>
/* From Uiverse.io by TechByElijah - Tags: simple, input, animated */
.input-container {
  position: relative;
}

.input {
  font-size: 1em;
  padding: 0.6em 1em;
  border: none;
  border-radius: 6px;
  background-color: #f8f8f8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  max-width: 200px;
  color: #333;
}

.input:hover {
  background-color: #f2f2f2;
}

.input:focus {
  outline: none;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.input::placeholder {
  color: #999;
}

.highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #6c63ff;
  transition: width 0.3s ease;
}

.input:focus + .highlight {
  width: 100%;
}

/* Optional: Animation on focus */
@keyframes input-focus {
  from {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  }

  to {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

.input:focus {
  animation: input-focus 0.3s ease;
}

</style>


================================================
FILE: Inputs/TemRevil_wise-treefrog-32.html
================================================
<div class="input-wrapper">
  <input placeholder="Search..." type="text" class="input" />
  <svg
    stroke-width="2"
    stroke="currentColor"
    fill="none"
    viewBox="0 0 24 24"
    height="24"
    width="24"
    class="search-icon"
  >
    <circle r="8" cy="11" cx="11"></circle>
    <line y2="16.65" x2="16.65" y1="21" x1="21"></line>
  </svg>
  <svg
    stroke-width="2"
    stroke="currentColor"
    fill="none"
    viewBox="0 0 1792 1792"
    height="24"
    width="24"
    class="filter-icon"
  >
    <path
      d="M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45v-486l-493-493q-31-29-14-70 17-39 59-39h1280q42 0 59 39z"
    ></path>
  </svg>
</div>

<style>
/* From Uiverse.io by TemRevil  - Tags:  */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input {
  min-width: 300px;
  padding: 20px 40px 20px 60px;
  background: #14213d;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  outline: none;
  border: none;
  border-radius: 8px;
  box-shadow: 60px 40px 80px 0px #2d00f75b, -100px -40px 100px #db00b65b,
    inset -40px -20px 1000px -150px #db00b65b,
    inset 40px 20px 1000px -160px #2d00f7;
  transition: 0.2s 0s ease-in-out;
}

.input::placeholder {
  color: #f0f8ff9c;
  font-size: 20px;
}

.input:hover,
.input:focus {
  background: #dfe7fd;
  box-shadow: -100px -40px 100px 30px #2d00f75b, 60px 40px 100px 5px #db00b65b,
    inset 40px 20px 1000px -150px #f20089,
    inset -40px -20px 1000px -160px #2d00f7;
}

.search-icon {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  fill: #fff;
  stroke: #fff;
}

.filter-icon {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  fill: #fff;
  stroke: #fff;
  cursor: pointer;
  transition: 0.15s 0s ease-in-out;
}
.filter-icon:active {
  scale: 0.9;
}

.input:hover.search-icon,
.input:focus.search-icon,
.input:hover.filter-icon,
.input:focus.filter-icon {
  fill: #14213d;
  stroke: #14213d;
}

</style>
    

================================================
FILE: Inputs/TimTrayler_orange-bat-25.html
================================================
<div class="searchbar">
    <div class="searchbar-wrapper">
        <div class="searchbar-left">
            <div class="search-icon-wrapper">
                <span class="search-icon searchbar-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
                        </path>
                    </svg>
                </span>
            </div>
        </div>

        <div class="searchbar-center">
            <div class="searchbar-input-spacer"></div>

            <input type="text" class="searchbar-input" maxlength="2048" name="q" autocapitalize="off" autocomplete="off" title="Search" role="combobox" placeholder="Search Google">
        </div>

        <div class="searchbar-right">
            <svg class="voice-search" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path fill="#4285f4" d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z">
                </path>
                <path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
                <path fill="#fbbc05" d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z">
                </path>
                <path fill="#ea4335" d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z">
                </path>
            </svg>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by TimTrayler - Tags: input, search */
.searchbar {
  font-size: 14px;
  font-family: arial, sans-serif;
  color: #202124;
  display: flex;
  z-index: 3;
  height: 44px;
  background: white;
  border: 1px solid #dfe1e5;
  box-shadow: none;
  border-radius: 24px;
  margin: 0 auto;
  width: auto;
  max-width: 224px;
}

.searchbar:hover {
  box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
  border-color: rgba(223,225,229,0);
}

.searchbar-wrapper {
  flex: 1;
  display: flex;
  padding: 5px 8px 0 14px;
}

.searchbar-left {
  font-size: 14px;
  font-family: arial, sans-serif;
  color: #202124;
  display: flex;
  align-items: center;
  padding-right: 13px;
  margin-top: -5px;
}

.search-icon-wrapper {
  margin: auto;
}

.search-icon {
  margin-top: 3px;
  color: #9aa0a6;
  height: 20px;
  line-height: 20px;
  width: 20px;
}

.searchbar-icon {
  display: inline-block;
  fill: currentColor;
  height: 24px;
  line-height: 24px;
  position: relative;
  width: 24px;
}

.searchbar-center {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}

.searchbar-input-spacer {
  color: transparent;
  flex: 100%;
  white-space: pre;
  height: 34px;
  font-size: 16px;
}

.searchbar-input {
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, .87);
  word-wrap: break-word;
  outline: none;
  display: flex;
  flex: 100%;
  margin-top: -37px;
  height: 34px;
  font-size: 16px;
  max-width: 100%;
  width: 100%;
}

.searchbar-right {
  display: flex;
  flex: 0 0 auto;
  margin-top: -5px;
  align-items: stretch;
  flex-direction: row
}

.searchbar-clear-icon {
  margin-right: 12px
}

.voice-search {
  flex: 1 0 auto;
  display: flex;
  cursor: pointer;
  align-items: center;
  border: 0;
  background: transparent;
  outline: none;
  padding: 0 8px;
  width: 2.8em;
}
</style>


================================================
FILE: Inputs/VijinV_mean-goose-92.html
================================================
<div class="inputbox">
    <input required="required" type="text">
    <span>Username</span>
    <i></i>
</div>
<style>
/* From Uiverse.io by VijinV - Tags: input, animated */
.inputbox {
  position: relative;
  width: 196px;
}

.inputbox input {
  position: relative;
  width: 100%;
  padding: 20px 10px 10px;
  background: transparent;
  outline: none;
  box-shadow: none;
  border: none;
  color: #23242a;
  font-size: 1em;
  letter-spacing: 0.05em;
  transition: 0.5s;
  z-index: 10;
}

.inputbox span {
  position: absolute;
  left: 0;
  padding: 20px 10px 10px;
  font-size: 1em;
  color: #8f8f8f;
  letter-spacing: 00.05em;
  transition: 0.5s;
  pointer-events: none;
}

.inputbox input:valid ~span,
.inputbox input:focus ~span {
  color: #45f3ff;
  transform: translateX(-10px) translateY(-34px);
  font-size: 0,75em;
}

.inputbox i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #45f3ff;
  border-radius: 4px;
  transition: 0.5s;
  pointer-events: none;
  z-index: 9;
}

.inputbox input:valid ~i,
.inputbox input:focus ~i {
  height: 44px;
}
</style>


================================================
FILE: Inputs/WhiteNervosa_bad-mole-33.html
================================================
<div class="textInputWrapper">
    <input placeholder="Type Here" type="text" class="textInput">
</div>
<style>
/* From Uiverse.io by WhiteNervosa - Tags: input */
.textInputWrapper {
  position: relative;
  width: 180px;
  margin: 12px 5px;
  --accent-color: #a3e583;
}

.textInputWrapper:before {
  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
}

.textInputWrapper:before,
.textInputWrapper:after {
  content: "";
  left: 0;
  right: 0;
  position: absolute;
  pointer-events: none;
  bottom: -1px;
  z-index: 4;
  width: 100%;
}

.textInputWrapper:focus-within:before {
  border-bottom: 1px solid var(--accent-color);
}

.textInputWrapper:before {
  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
}

.textInputWrapper:focus-within:before {
  border-bottom: 1px solid var(--accent-color);
  transform: scaleX(1);
}

.textInputWrapper:focus-within:after {
  border-bottom: 2px solid var(--accent-color);
  transform: scaleX(1);
}

.textInputWrapper:after {
  content: "";
  transform: scaleX(0);
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  will-change: transform;
  border-bottom: 2px solid var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.textInput::placeholder {
  transition: opacity 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  opacity: 1;
  user-select: none;
  color: rgba(255, 255, 255, 0.582);
}

.textInputWrapper .textInput {
  border-radius: 5px 5px 0px 0px;
  box-shadow: 0px 2px 5px rgb(35 35 35 / 30%);
  max-height: 36px;
  background-color: #252525;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 200ms;
  transition-property: background-color;
  color: #e8e8e8;
  font-size: 14px;
  font-weight: 500;
  padding: 12px;
  width: 100%;
  border-left: none;
  border-bottom: none;
  border-right: none;
}

.textInputWrapper .textInput:focus,
.textInputWrapper .textInput:active {
  outline: none;
}

.textInputWrapper:focus-within .textInput,
.textInputWrapper .textInput:focus,
.textInputWrapper .textInput:active {
  background-color: #353535;
}

.textInputWrapper:focus-within .textInput::placeholder {
  opacity: 0;
}

</style>


================================================
FILE: Inputs/Yaseen549_average-firefox-86.html
================================================
<input placeholder="Enter your text..." class="input" name="text" type="text">
<style>
/* From Uiverse.io by Yaseen549 - Tags: input */
.input {
  background-color: #212121;
  max-width: 190px;
  height: 40px;
  padding: 10px;
  /* text-align: center; */
  border: 2px solid white;
  border-radius: 5px;
  /* box-shadow: 3px 3px 2px rgb(249, 255, 85); */
}

.input:focus {
  color: rgb(0, 255, 255);
  background-color: #212121;
  outline-color: rgb(0, 255, 255);
  box-shadow: -3px -3px 15px rgb(0, 255, 255);
  transition: .1s;
  transition-property: box-shadow;
}
</style>


================================================
FILE: Inputs/Yaseen549_cowardly-emu-68.html
================================================

<input type="text" name="text" class="input" placeholder="Type something here....">
<style>
/* From Uiverse.io by Yaseen549 - Tags: input */
.input {
 color: #8707ff;
 border: 2px solid #8707ff;
 border-radius: 10px;
 padding: 10px 25px;
 background: transparent;
 max-width: 190px;
}

.input:active {
 box-shadow: 2px 2px 15px #8707ff inset;
}

</style>


================================================
FILE: Inputs/Yaseen549_popular-snake-7.html
================================================

<input type="password" name="text" class="input" placeholder="Enter your password!">
<style>
/* From Uiverse.io by Yaseen549 - Tags: input */
.input {
 border: 2px solid #e8e8e8;
 padding: 15px;
 border-radius: 10px;
 background-color: #212121;
 font-size: small;
 font-weight: bold;
 text-align: center;
}

.input:focus {
 outline-color: white;
 background-color: #212121;
 color: #e8e8e8;
 box-shadow: 5px 5px #888888;
}
</style>


================================================
FILE: Inputs/Yaseen549_stale-frog-25.html
================================================

<input type="text" name="text" class="input" placeholder="Type here!">
<style>
/* From Uiverse.io by Yaseen549 - Tags: neumorphism, input */
.input {
 border: none;
 border-radius: 15px;
 padding: 15px;
 background-color: #e8e8e8;
 box-shadow: 6px 6px 12px #ffffff,
             -6px -6px 12px #c5c5c5;
 font-size: medium;
 font-weight: bold;
 max-width: 200px;
}

.input:focus {
 outline-color: white;
 place-content: "Enter your message!";
}
</style>


================================================
FILE: Inputs/Yaya12085_brown-wolverine-18.html
================================================
<!-- From Uiverse.io by Yaya12085  - Tags: icon, form, input -->
<div class="relative mt-6">
  <input
    type="email"
    placeholder="Email address"
    autocomplete="email"
    aria-label="Email address"
    class="block w-full rounded-2xl border border-neutral-300 bg-transparent py-4 pl-6 pr-20 text-base/6 text-neutral-950 ring-4 ring-transparent transition placeholder:text-neutral-500 focus:border-neutral-950 focus:outline-none focus:ring-neutral-950/5"
  />
  <div class="absolute inset-y-1 right-1 flex justify-end">
    <button
      type="submit"
      aria-label="Submit"
      class="flex aspect-square h-full items-center justify-center rounded-xl bg-neutral-950 text-white transition hover:bg-neutral-800"
    >
      <svg viewBox="0 0 16 6" aria-hidden="true" class="w-4">
        <path
          fill="currentColor"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M16 3 10 .5v2H0v1h10v2L16 3Z"
        ></path>
      </svg>
    </button>
  </div>
</div>


    

================================================
FILE: Inputs/Yaya12085_cowardly-jellyfish-9.html
================================================
<!-- From Uiverse.io by Yaya12085 - Tags: form, input, file upload, tailwind, file, tailwind file -->
<div class="grid w-full max-w-xs items-center gap-1.5">
      <label class="text-sm text-gray-400 font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Picture</label>
      <input id="picture" type="file" class="flex h-10 w-full rounded-md border border-input bg-white px-3 py-2 text-sm text-gray-400 file:border-0 file:bg-transparent file:text-gray-600 file:text-sm file:font-medium">
</div>



================================================
FILE: Inputs/Yaya12085_evil-chipmunk-15.html
================================================
<div class="input-container">
  <input required="" placeholder="Email Address" type="email">
  <button class="invite-btn" type="button">
    Invite
  </button>
 
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: email, input */
.input-container {
  position: relative;
  display: flex;
  height: 2.8rem;
  width: 100%;
  min-width: 200px;
  max-width: 250px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
}

.input-container input {
  height: 100%;
  width: 100%;
  border-radius: 8px;
  border: 1px solid  rgb(176 190 197);
  background-color: transparent;
  padding: 0.625rem 70px 0.625rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: rgb(69 90 100);
  outline: none;
  transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-container input:focus {
  border: 1px solid rgb(236 72 153 );
}

.invite-btn {
  position: absolute;
  width: 65px;
  right: 4px;
  top: 4px;
  bottom: 4px;
  z-index: 10;
  border-radius: 4px;
  background-color: rgb(236 72 153 );
  color: #fff;
  padding-top: .25rem;
  padding-bottom: .25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border: none;
  transition: .6s ease;
}

.invite-btn:hover {
  right: 2px;
  top: 2px;
  bottom: 2px;
  border-radius: 8px;
}

.input-container input:placeholder-shown ~ .invite-btn {
  pointer-events: none;
  background-color: gray;
  opacity: 0.5;
}
</style>


================================================
FILE: Inputs/Yaya12085_hungry-goat-59.html
================================================
<!-- From Uiverse.io by Yaya12085 - Tags: form, input, phone number -->
<div class="bg-white p-4 rounded-lg max-w-[350px]">
            <label class="text-gray-600 text-sm">
                Phone number
            </label>
            <div class="relative mt-2 max-w-xs text-gray-500">
                <div class="absolute inset-y-0 left-3 my-auto h-6 flex items-center border-r pr-2">
                    <select class="text-sm outline-none rounded-lg h-full">
                        <option>US</option>
                        <option>ES</option>
                        <option>MR</option>
                    </select>
                </div>
                <input type="number" placeholder="+1 (555) 000-000" class="w-full pl-[4.5rem] pr-3 py-2 appearance-none bg-transparent outline-none border focus:border-slate-600 shadow-sm rounded-lg">
            </div>
        </div>



================================================
FILE: Inputs/Yaya12085_new-rabbit-37.html
================================================
<div class="wrapper">
  <span class="search">
    <svg
      fill="none"
      color="#000000"
      height="24"
      width="24"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="1.5"
        stroke="currentColor"
        d="M17.5 17.5L22 22"
      ></path>
      <path
        stroke-linejoin="round"
        stroke-width="1.5"
        stroke="currentColor"
        d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z"
      ></path></svg
  ></span>

  <input type="text" name="text" class="input" placeholder="Search..." />
  <div class="coloredborder"></div>

  <button class="filter">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="24"
      height="24"
      color="#000000"
      fill="none"
    >
      <path
        d="M8.85746 12.5061C6.36901 10.6456 4.59564 8.59915 3.62734 7.44867C3.3276 7.09253 3.22938 6.8319 3.17033 6.3728C2.96811 4.8008 2.86701 4.0148 3.32795 3.5074C3.7889 3 4.60404 3 6.23433 3H17.7657C19.396 3 20.2111 3 20.672 3.5074C21.133 4.0148 21.0319 4.8008 20.8297 6.37281C20.7706 6.83191 20.6724 7.09254 20.3726 7.44867C19.403 8.60062 17.6261 10.6507 15.1326 12.5135C14.907 12.6821 14.7583 12.9567 14.7307 13.2614C14.4837 15.992 14.2559 17.4876 14.1141 18.2442C13.8853 19.4657 12.1532 20.2006 11.226 20.8563C10.6741 21.2466 10.0043 20.782 9.93278 20.1778C9.79643 19.0261 9.53961 16.6864 9.25927 13.2614C9.23409 12.9539 9.08486 12.6761 8.85746 12.5061Z"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
    </svg>
  </button>
</div>

<style>
/* From Uiverse.io by Yaya12085  - Tags: animation, gradient, button, input, focus, challenge, input effect , input */
.wrapper {
  --color1: #cc279a;
  --color2: #4d38de;
  --color3: #010101;
  --white: #fff;
  --radius: 10px;
  --size: 280px;
  --icon: 35px;
  --border-color: rgba(255, 255, 255, 0.3);
  --line: rgba(114, 114, 114, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius);
  background-color: var(--color3);
  max-width: var(--size);
  width: 100%;
  padding: 2px 8px;
  position: relative;
  border: 1px solid var(--border-color);
  transition: 0.2s 0s linear;
}
.wrapper:focus-within {
  box-shadow: -100px 0px 80px -20px var(--color1),
    100px 0 80px -20px var(--color2), 0px 0px 80px -0px var(--color3);
}
.wrapper::after {
  position: absolute;
  content: "";
  inset: -50px;
  border-radius: var(--radius);
  z-index: -2;
  background-color: var(--color3);
  background-image: linear-gradient(
      0deg,
      transparent 24%,
      var(--line) 25%,
      var(--line) 26%,
      transparent 27%,
      transparent 74%,
      var(--line) 75%,
      var(--line) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      var(--line) 25%,
      var(--line) 26%,
      transparent 27%,
      transparent 74%,
      var(--line) 75%,
      var(--line) 76%,
      transparent 77%,
      transparent
    );
  background-size: 30px 30px;
  border: 10px solid rgba(0, 0, 0, 0.6);
}
.input {
  flex: 1;
  height: 100%;
  padding: 16px 6px 16px calc(var(--icon) + 6px);
  outline: none;
  border: none;
  background-color: transparent;
  color: var(--white);
  font-weight: 400;
}

.input::placeholder {
  color: var(--white);
  font-weight: 400;
}

.search,
.filter {
  width: var(--icon);
  height: var(--icon);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}

.search svg,
.filter svg {
  color: var(--white);
}
.search {
  position: absolute;
  pointer-events: none;
}
.filter {
  border: none;
  background-color: transparent;
  outline: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.coloredborder {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--radius);
  overflow: hidden;
  background-repeat: no-repeat;
}
.coloredborder::after {
  position: absolute;
  content: "";
  inset: -10px;
  overflow: hidden;
  border-radius: inherit;
  background-size: 100%;
  background-image: transparent;
  z-index: -1;
  filter: blur(10px);
}

.input:focus + .coloredborder::after {
  background-color: var(--color3);
  background-repeat: no-repeat;
  background-image: linear-gradient(60deg, var(--color2), var(--color1));
  animation: border-animate 3s linear infinite alternate;
}

@keyframes border-animate {
  0% {
    background-position: calc(var(--size) * -1) calc(var(--size) / 6 * -1);
  }

  100% {
    background-position: var(--size) calc(var(--size) / 6);
  }
}

</style>
    

================================================
FILE: Inputs/Yaya12085_red-parrot-45.html
================================================
<div class="input-container">
    <input placeholder="email" type="text" class="input">
    <span>@gmail.com</span>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: email, input */
.input-container {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 290px;
}

.input-container > span,
.input-container .input {
  white-space: nowrap;
  display: block;
}

.input-container > span,
.input-container .input:first-child {
  border-radius: 6px 0 0 6px;
}

.input-container > span,
.input-container .input {
  border-radius: 0 6px 6px 0;
}

.input-container > span,
.input-container .input {
  margin-left: -1px;
}

.input-container .input {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 1%;
  margin-top: 0;
  margin-bottom: 0;
}

.input-container span {
  text-align: center;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 25px;
  color: #6b7385;
  background: #d4def5;
  border: 1px solid #CDD9ED;
  font-weight: bold;
  transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
}

.input-container:focus-within > span {
  color: #fff;
  background-color: #148cd1;
  border-color: #148cd1;
}

.input {
  display: block;
  width: 100%;
  padding: 8px 16px;
  line-height: 25px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 6px;
  -webkit-appearance: none;
  color: #99A3BA;
  border: 1px solid  #CDD9ED;
  background: #fff;
  transition: border 0.3s ease;
}

.input::placeholder {
  color: #CBD1DC;
}

.input:focus {
  outline: none;
  border-color: #148cd1;
}
</style>


================================================
FILE: Inputs/Yaya12085_tidy-warthog-91.html
================================================
  <div class="input-container">
    <input placeholder="Search something..." class="input" name="text" type="text">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <rect fill="white"></rect> <path d="M7.25007 2.38782C8.54878 2.0992 10.1243 2 12 2C13.8757 2 15.4512 2.0992 16.7499 2.38782C18.06 2.67897 19.1488 3.176 19.9864 4.01358C20.824 4.85116 21.321 5.94002 21.6122 7.25007C21.9008 8.54878 22 10.1243 22 12C22 13.8757 21.9008 15.4512 21.6122 16.7499C21.321 18.06 20.824 19.1488 19.9864 19.9864C19.1488 20.824 18.06 21.321 16.7499 21.6122C15.4512 21.9008 13.8757 22 12 22C10.1243 22 8.54878 21.9008 7.25007 21.6122C5.94002 21.321 4.85116 20.824 4.01358 19.9864C3.176 19.1488 2.67897 18.06 2.38782 16.7499C2.0992 15.4512 2 13.8757 2 12C2 10.1243 2.0992 8.54878 2.38782 7.25007C2.67897 5.94002 3.176 4.85116 4.01358 4.01358C4.85116 3.176 5.94002 2.67897 7.25007 2.38782ZM9 11.5C9 10.1193 10.1193 9 11.5 9C12.8807 9 14 10.1193 14 11.5C14 12.8807 12.8807 14 11.5 14C10.1193 14 9 12.8807 9 11.5ZM11.5 7C9.01472 7 7 9.01472 7 11.5C7 13.9853 9.01472 16 11.5 16C12.3805 16 13.202 15.7471 13.8957 15.31L15.2929 16.7071C15.6834 17.0976 16.3166 17.0976 16.7071 16.7071C17.0976 16.3166 17.0976 15.6834 16.7071 15.2929L15.31 13.8957C15.7471 13.202 16 12.3805 16 11.5C16 9.01472 13.9853 7 11.5 7Z" clip-rule="evenodd" fill-rule="evenodd"></path> </g></svg>
  </div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: input, search */
.input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.input {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  outline: none;
  padding: 18px 16px;
  background-color: transparent;
  cursor: pointer;
  transition: all .5s ease-in-out;
}

.input::placeholder {
  color: transparent;
}

.input:focus::placeholder {
  color: rgb(131, 128, 128);
}

.input:focus,.input:not(:placeholder-shown) {
  background-color: #fff;
  border: 1px solid rgb(98, 0, 255);
  width: 290px;
  cursor: none;
  padding: 18px 16px 18px 40px;
}

.icon {
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  width: 40px;
  background-color: #fff;
  border-radius: 10px;
  z-index: -1;
  fill: rgb(98, 0, 255);
  border: 1px solid rgb(98, 0, 255);
}

.input:hover + .icon {
  transform: rotate(360deg);
  transition: .2s ease-in-out;
}

.input:focus + .icon,.input:not(:placeholder-shown) + .icon {
  z-index: 0;
  background-color: transparent;
  border: none;
}

</style>


================================================
FILE: Inputs/absoluteSTrange_smart-turtle-82.html
================================================
<input placeholder="Search The Matrix">
<style>
/* From Uiverse.io by absoluteSTrange - Tags: input, search */
input {
  display: inline-block;
  max-width: 196px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 10px 20px;
  border: 5px solid #1fbc00;
  -webkit-border-radius: 11px;
  border-radius: 11px;
  font: normal 19px/normal "Courier New", Courier, monospace;
  color: rgba(42,255,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgba(45,45,45,1);
  box-shadow: 0 0 9px 4px rgba(0,0,0,0.15) , -1px 4px 8px -1px rgba(0,0,0,0.49) inset;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.66);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transform: rotateX(-16.62deg) rotateY(-28.64788975654116deg);
  transform: rotateX(-16.62deg) rotateY(-28.64788975654116deg);
}

input:hover {
  -webkit-transform: rotateX(-15.62deg) rotateY(-23.65deg);
  transform: rotateX(-15.62deg) rotateY(-23.65deg);
}

.search__icon {
  height: 1.3em;
  width: 1.3em;
  fill: #b4b4b4;
}

input:focus {
  outline: none;
}
</style>


================================================
FILE: Inputs/adamgiebl_hot-cat-14.html
================================================
<div class="form-control">
  <input class="input input-alt" placeholder="Type something intelligent" required="" type="text">
  <span class="input-border input-border-alt"></span>
</div>

<style>
/* From Uiverse.io by adamgiebl - Tags: gradient, input, modern, animated */
.input {
  color: #fff;
  font-size: 0.9rem;
  background-color: transparent;
  width: 100%;
  box-sizing: border-box;
  padding-inline: 0.5em;
  padding-block: 0.7em;
  border: none;
  border-bottom: var(--border-height) solid var(--border-before-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.input-border {
  position: absolute;
  background: var(--border-after-color);
  width: 0%;
  height: 2px;
  bottom: 0;
  left: 0;
  transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.input:focus {
  outline: none;
}

.input:focus + .input-border {
  width: 100%;
}

.form-control {
  position: relative;
  --width-of-input: 300px;
}

.input-alt {
  font-size: 1.2rem;
  padding-inline: 1em;
  padding-block: 0.8em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.input-border-alt {
  height: 3px;
  background: linear-gradient(90deg, #FF6464 0%, #FFBF59 50%, #47C9FF 100%);
  transition: width 0.4s cubic-bezier(0.42, 0, 0.58, 1.00);
}

.input-alt:focus + .input-border-alt {
  width: 100%;
}
</style>


================================================
FILE: Inputs/adamgiebl_ordinary-impala-4.html
================================================
<div class="input-wrapper">
  <input type="text" placeholder="Type here..." name="text" class="input">
</div>
<style>
/* From Uiverse.io by adamgiebl - Tags: input */
.input-wrapper input {
  background-color: #eee;
  border: none;
  padding: 1rem;
  font-size: 1rem;
  width: 13em;
  border-radius: 1rem;
  color: lightcoral;
  box-shadow: 0 0.4rem #dfd9d9;
  cursor: pointer;
}

.input-wrapper input:focus {
  outline-color: lightcoral;
}
</style>


================================================
FILE: Inputs/ahmedyasserdev_funny-treefrog-48.html
================================================
<!-- From Uiverse.io by ahmedyasserdev  - Tags: input, search, input effect  -->
<form class="form relative">
  <button class="absolute left-2 -translate-y-1/2 top-1/2 p-1">
    <svg
      width="17"
      height="16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      aria-labelledby="search"
      class="w-5 h-5 text-gray-700"
    >
      <path
        d="M7.667 12.667A5.333 5.333 0 107.667 2a5.333 5.333 0 000 10.667zM14.334 14l-2.9-2.9"
        stroke="currentColor"
        stroke-width="1.333"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
    </svg>
  </button>
  <input
    class="input rounded-full px-8 py-3 border-2 border-transparent focus:outline-none focus:border-blue-500 placeholder-gray-400 transition-all duration-300 shadow-md"
    placeholder="Search..."
    required=""
    type="text"
  />
  <button type="reset" class="absolute right-3 -translate-y-1/2 top-1/2 p-1">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="w-5 h-5 text-gray-700"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M6 18L18 6M6 6l12 12"
      ></path>
    </svg>
  </button>
</form>


    

================================================
FILE: Inputs/ainasoa_pretty-donkey-11.html
================================================
<input placeholder="Name" type="text" name="text" class="input">
<style>
/* From Uiverse.io by ainasoa - Tags: input */
.input {
  max-width: 210px;
  height: 50px;
  border-radius: 7px;
  border: 0;
  outline: auto grey;
  padding-inline: 15px;
  font-size: 16px;
  transform: all 200ms;
}

.input:focus {
  text-decoration: underline 6px;
  box-shadow: 0 0 50px rgb(255, 255, 255);
  border: 1px solid grey;
}

</style>


================================================
FILE: Inputs/akshat-patel28_tender-dolphin-38.html
================================================
<div class="input-div">
  <input class="input" name="file" type="file">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke="currentColor" class="icon"><polyline points="16 16 12 12 8 16"></polyline><line y2="21" x2="12" y1="12" x1="12"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
</div>
<style>
/* From Uiverse.io by akshat-patel28 - Tags: input, neon, fillup, box-shadow, file upload */
.input-div {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid rgb(1, 235, 252);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);
  animation: flicker 2s linear infinite;
}

.icon {
  color: rgb(1, 235, 252);
  font-size: 2rem;
  cursor: pointer;
  animation: iconflicker 2s linear infinite;
}

.input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer !important;
}

@keyframes flicker {
  0% {
    border: 2px solid rgb(1, 235, 252);
    box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);
  }

  5% {
    border: none;
    box-shadow: none;
  }

  10% {
    border: 2px solid rgb(1, 235, 252);
    box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);
  }

  25% {
    border: none;
    box-shadow: none;
  }

  30% {
    border: 2px solid rgb(1, 235, 252);
    box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);
  }

  100% {
    border: 2px solid rgb(1, 235, 252);
    box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);
  }
}

@keyframes iconflicker {
  0% {
    opacity: 1;
  }

  5% {
    opacity: 0.2;
  }

  10% {
    opacity: 1;
  }

  25% {
    opacity: 0.2;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}
</style>


================================================
FILE: Inputs/alexruix_evil-parrot-25.html
================================================
<input class="input" name="text" placeholder="Search..." type="search">
<style>
/* From Uiverse.io by alexruix - Tags: input, search */
.input {
  max-width: 190px;
  background-color: #f5f5f5;
  color: #242424;
  padding: .15rem .5rem;
  min-height: 40px;
  border-radius: 4px;
  outline: none;
  border: none;
  line-height: 1.15;
  box-shadow: 0px 10px 20px -18px;
}

input:focus {
  border-bottom: 2px solid #5b5fc7;
  border-radius: 4px 4px 2px 2px;
}

input:hover {
  outline: 1px solid lightgrey;
}
</style>


================================================
FILE: Inputs/alexruix_evil-parrot-59.html
================================================
<div class="input-group">
    <input type="email" class="input" id="Email" name="Email" placeholder="uiverse@verse.io" autocomplete="off">
    <input class="button--submit" value="Subscribe" type="submit">
</div>
<style>
/* From Uiverse.io by alexruix - Tags: subscription, input */
.input-group {
  display: flex;
  align-items: center;
}

.input {
  min-height: 50px;
  max-width: 150px;
  padding: 0 1rem;
  color: #fff;
  font-size: 15px;
  border: 1px solid #5e4dcd;
  border-radius: 6px 0 0 6px;
  background-color: transparent;
}

.button--submit {
  min-height: 50px;
  padding: .5em 1em;
  border: none;
  border-radius: 0 6px 6px 0;
  background-color: #5e4dcd;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background-color .3s ease-in-out;
}

.button--submit:hover {
  background-color: #5e5dcd;
}

.input:focus, .input:focus-visible {
  border-color: #3898EC;
  outline: none;
}

</style>


================================================
FILE: Inputs/alexruix_fat-vampirebat-55.html
================================================

<input placeholder="Username" type="text" class="input" required="">
<style>
/* From Uiverse.io by alexruix - Tags: input */
/* From uiverse.io by @alexruix */
.input {
 line-height: 28px;
 border: 2px solid transparent;
 border-bottom-color: #777;
 padding: .2rem 0;
 outline: none;
 background-color: transparent;
 color: #0d0c22;
 transition: .3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.input:focus, input:hover {
 outline: none;
 padding: .2rem 1rem;
 border-radius: 1rem;
 border-color: #7a9cc6;
}

.input::placeholder {
 color: #777;
}

.input:focus::placeholder {
 opacity: 0;
 transition: opacity .3s;
}







</style>


================================================
FILE: Inputs/alexruix_jolly-emu-80.html
================================================
<div class="input-group">
    <label class="label">Email address</label>
    <input autocomplete="off" name="Email" id="Email" class="input" type="email">
    <div></div></div>
<style>
/* From Uiverse.io by alexruix - Tags: email, input */
.input {
  max-width: 190px;
  height: 44px;
  background-color: #05060f0a;
  border-radius: .5rem;
  padding: 0 1rem;
  border: 2px solid transparent;
  font-size: 1rem;
  transition: border-color .3s cubic-bezier(.25,.01,.25,1) 0s, color .3s cubic-bezier(.25,.01,.25,1) 0s,background .2s cubic-bezier(.25,.01,.25,1) 0s;
}

.label {
  display: block;
  margin-bottom: .3rem;
  font-size: .9rem;
  font-weight: bold;
  color: #05060f99;
  transition: color .3s cubic-bezier(.25,.01,.25,1) 0s;
}

.input:hover, .input:focus, .input-group:hover .input {
  outline: none;
  border-color: #05060f;
}

.input-group:hover .label, .input:focus {
  color: #05060fc2;
}
</style>


================================================
FILE: Inputs/alexruix_plastic-shrimp-54.html
================================================
<div class="group">
    <svg class="icon" aria-hidden="true" viewBox="0 0 24 24">
        <g>
            <path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path>
        </g>
    </svg>
    <input placeholder="Search" type="search" class="input">
</div>
<style>
/* From Uiverse.io by alexruix - Tags: input, search */
.group {
  display: flex;
  line-height: 28px;
  align-items: center;
  position: relative;
  max-width: 190px;
}

.input {
  height: 40px;
  line-height: 28px;
  padding: 0 1rem;
  width: 100%;
  padding-left: 2.5rem;
  border: 2px solid transparent;
  border-radius: 8px;
  outline: none;
  background-color: #D9E8D8;
  color: #0d0c22;
  box-shadow: 0 0 5px #C1D9BF, 0 0 0 10px #f5f5f5eb;
  transition: .3s ease;
}

.input::placeholder {
  color: #777;
}

.icon {
  position: absolute;
  left: 1rem;
  fill: #777;
  width: 1rem;
  height: 1rem;
}






</style>


================================================
FILE: Inputs/alexruix_slippery-frog-10.html
================================================
<div class="group">
  <svg class="icon" aria-hidden="true" viewBox="0 0 24 24"><g><path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path></g></svg>
  <input placeholder="Search" type="search" class="input">
</div>
<style>
/* From Uiverse.io by alexruix - Tags: input, search */
.group {
 display: flex;
 line-height: 28px;
 align-items: center;
 position: relative;
 max-width: 190px;
}

.input {
 width: 100%;
 height: 40px;
 line-height: 28px;
 padding: 0 1rem;
 padding-left: 2.5rem;
 border: 2px solid transparent;
 border-radius: 8px;
 outline: none;
 background-color: #f3f3f4;
 color: #0d0c22;
 transition: .3s ease;
}

.input::placeholder {
 color: #9e9ea7;
}

.input:focus, input:hover {
 outline: none;
 border-color: rgba(234,76,137,0.4);
 background-color: #fff;
 box-shadow: 0 0 0 4px rgb(234 76 137 / 10%);
}

.icon {
 position: absolute;
 left: 1rem;
 fill: #9e9ea7;
 width: 1rem;
 height: 1rem;
}






</style>


================================================
FILE: Inputs/alexruix_slippery-snail-18.html
================================================
<div class="input-group">
  <input required="" type="text" name="text" autocomplete="off" class="input">
  <label class="user-label">First Name</label>
</div>
<style>
/* From Uiverse.io by alexruix - Tags: material design, input */
.input-group {
 position: relative;
}

.input {
 border: solid 1.5px #9e9e9e;
 border-radius: 1rem;
 background: none;
 padding: 1rem;
 font-size: 1rem;
 color: #f5f5f5;
 transition: border 150ms cubic-bezier(0.4,0,0.2,1);
}

.user-label {
 position: absolute;
 left: 15px;
 color: #e8e8e8;
 pointer-events: none;
 transform: translateY(1rem);
 transition: 150ms cubic-bezier(0.4,0,0.2,1);
}

.input:focus, input:valid {
 outline: none;
 border: 1.5px solid #1a73e8;
}

.input:focus ~ label, input:valid ~ label {
 transform: translateY(-50%) scale(0.8);
 background-color: #212121;
 padding: 0 .2em;
 color: #2196f3;
}
</style>


================================================
FILE: Inputs/andrew-demchenk0_green-deer-16.html
================================================
<label class="wrapper">
  <input type="text" placeholder="Input label" name="text" class="input">
  <span class="placeholder">Input label</span>
</label>


<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: input */
.wrapper {
  position: relative;
}

.input {
  width: 190px;
  height: 35px;
  border-radius: 5px;
  border: 2px #323232 solid;
  padding: 5px 15px;
  background-color: #e8e8e8;
  font-size: 15;
  font-weight: 500;
}

.placeholder {
  width: 65%;
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  color: blueviolet;
  background-color: #e8e8e8;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1.5px;
  transition: all 0.3s;
  opacity: 0;
}

.input::placeholder {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
}

.input:focus + .placeholder {
  opacity: 1;
}

.input:focus {
  outline: 2px solid blueviolet;
  border: none;
  color: blueviolet;
}

.input:focus::placeholder {
  opacity: 0;
}

</style>


================================================
FILE: Inputs/andrew-demchenk0_polite-stingray-67.html
================================================
<input type="password" placeholder="Password" name="text" class="input">
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: input, shadow, password */
.input {
  --input-focus: #2d8cf0;
  --font-color: #323232;
  --font-color-sub: #666;
  --bg-color: #fff;
  --main-color: #323232;
  width: 200px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 15px;
  font-weight: 600;
  color: var(--font-color);
  padding: 5px 10px;
  outline: none;
}

.input::placeholder {
  color: var(--font-color-sub);
  opacity: 0.8;
}

.input:focus {
  border: 2px solid var(--input-focus);
}
</style>


================================================
FILE: Inputs/anniekoop_nasty-impala-89.html
================================================
<input placeholder="Email address" class="input" name="text" type="email" />

<style>
/* From Uiverse.io by anniekoop  - Tags: login, email, 3d, action, form, active, input, box-shadow */
.input {
  font-family: "SF Pro";
  max-width: 190px;
  padding: 0.875rem;
  font-size: 1rem;
  border: 1.5px solid #000;
  border-radius: 0.5rem;
  box-shadow: 2.5px 3px 0 #000;
  outline: none;
  transition: ease 0.25s;
}

.input:focus {
  box-shadow: 5.5px 7px 0 black;
}

</style>
    

================================================
FILE: Inputs/ayman-ashine_plastic-parrot-88.html
================================================
<!-- From Uiverse.io by ayman-ashine  - Tags: input, tailwind, tailwindcss -->
<input
  class="bg-zinc-200 text-zinc-600 font-mono ring-1 ring-zinc-400 focus:ring-2 focus:ring-rose-400 outline-none duration-300 placeholder:text-zinc-600 placeholder:opacity-50 rounded-full px-4 py-1 shadow-md focus:shadow-lg focus:shadow-rose-400"
  autocomplete="off"
  placeholder="TailwindCSS..."
  name="text"
  type="text"
/>


    

================================================
FILE: Inputs/barisdogansutcu_gentle-pig-32.html
================================================
<div class="password">
  <input maxlength="1" value="5" class="input" name="text" type="text" />
  <input maxlength="1" value="7" class="input" name="text" type="text" />
  <input maxlength="1" value="1" class="input" name="text" type="text" />
  <input maxlength="1" value="6" class="input" name="text" type="text" />
  <input maxlength="1" value="3" class="input" name="text" type="text" />
  <input maxlength="1" value="2" class="input" name="text" type="text" />
</div>

<style>
/* From Uiverse.io by barisdogansutcu  - Tags: input, password, key */
.password {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.password input {
  width: 30px;
  height: 40px;
  text-align: center;
  background-color: transparent;
  border: none;
  border-bottom: solid 2px rgb(20, 181, 230);
  font-size: 20px;
  color: white;
  outline: none;
}

</style>
    

================================================
FILE: Inputs/bedirhan-arslan_stale-fly-98.html
================================================
<form class="formField">
  <input required="" type="text" />
  <span>Placeholder</span>
</form>

<style>
/* From Uiverse.io by bedirhan-arslan  - Tags: simple, form, hover, active, input, rounded, smooth */
.formField {
  margin: 10px;
  position: relative;
}

.formField input {
  padding: 10px 15px;
  outline: none;
  border: none;
  border-radius: 5px;
  background-color: #f1f1f1;
  color: #333;
  font-size: 16px;
  font-weight: 550;
  transition: 0.3s ease-in-out;
  box-shadow: 0 0 0 5px transparent;
}

.formField input:hover,
.formField input:focus {
  box-shadow: 0 0 0 2px #333;
}

.formField span {
  position: absolute;
  left: 0;
  top: 0;
  padding: 8px 15px;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s ease-in-out;
  pointer-events: none;
}

.formField input:focus + span,
.formField input:valid + span {
  transform: translateY(-32px) translateX(-5px) scale(0.95);
  transition: 0.3s ease-in-out;
}

</style>
    

================================================
FILE: Inputs/benjimich_lucky-baboon-4.html
================================================
<div class="container">
  <input type="text" name="text" class="input" placeholder="Dark Twitch Search">
  <button class="search__btn">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">
      <path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z" fill="#efeff1"></path>
    </svg>
  </button>
</div>
<style>
/* From Uiverse.io by benjimich - Tags: input */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
}

.input {
  max-width: 190px;
  height: 100%;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  background-color: #53535f;
  caret-color: #f7f7f8;
  color: #fff;
  padding: 7px 10px;
  border: 2px solid transparent;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  margin-right: 1px;
  transition: all .2s ease;
}

.input:hover {
  border: 2px solid rgba(255, 255, 255, 0.16);
}

.input:focus {
  border: 2px solid #a970ff;
  background-color: #0e0e10;
}

.search__btn {
  border: none;
  cursor: pointer;
  background-color: rgba(42, 42, 45, 1);
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  height: 100%;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search__btn:hover {
  background-color: rgba(54, 54, 56, 1);
}
</style>


================================================
FILE: Inputs/boryanakrasteva_hard-pig-16.html
================================================
<div class="input-container">
  <input type="text" name="text" class="input" placeholder="search...">
  <span class="icon"> 
    <svg width="19px" height="19px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="1" d="M14 5H20" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="1" d="M14 8H17" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="1" d="M22 22L20 20" stroke="#000" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
  </span>
</div>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: input, search */
.input-container {
  width: 220px;
  position: relative;
}

.icon {
  position: absolute;
  right: 10px;
  top: calc(50% + 5px);
  transform: translateY(calc(-50% - 5px));
}

.input {
  width: 100%;
  height: 40px;
  padding: 10px;
  transition: .2s linear;
  border: 2.5px solid black;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.input:focus {
  outline: none;
  border: 0.5px solid black;
  box-shadow: -5px -5px 0px black;
}

.input-container:hover > .icon {
  animation: anim 1s linear infinite;
}

@keyframes anim {
  0%,
  100% {
    transform: translateY(calc(-50% - 5px)) scale(1);
  }

  50% {
    transform: translateY(calc(-50% - 5px)) scale(1.1);
  }
}
</style>


================================================
FILE: Inputs/boryanakrasteva_perfect-lizard-67.html
================================================
<div class="input-wrapper">
  <button class="icon"> 
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="25px" width="25px">
      <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#fff" d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"></path>
      <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#fff" d="M22 22L20 20"></path>
    </svg>
  </button>
  <input placeholder="search.." class="input" name="text" type="text">
</div>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: input, search */
.input-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: relative;
}

.input {
  border-style: none;
  height: 50px;
  width: 50px;
  padding: 10px;
  outline: none;
  border-radius: 50%;
  transition: .5s ease-in-out;
  background-color: #7e4fd4;
  box-shadow: 0px 0px 3px #f3f3f3;
  padding-right: 40px;
  color: #fff;
}

.input::placeholder,
.input {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 17px;
}

.input::placeholder {
  color: #8f8f8f;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  outline: none;
  border-style: none;
  border-radius: 50%;
  pointer-events: painted;
  background-color: transparent;
  transition: .2s linear;
}

.icon:focus ~ .input,
.input:focus {
  box-shadow: none;
  width: 250px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom: 3px solid #7e4fd4;
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}



</style>


================================================
FILE: Inputs/catraco_wet-quail-86.html
================================================
<div class="container">

  <div class="title">Title</div>
  <input class="input" name="text" type="text">
  
</div>
<style>
/* From Uiverse.io by catraco - Tags: input, dark, advanced, input effect  */
.container {
  --light: rgb(255, 255, 255);
  --dark: rgb(50, 50, 50);
  --br: 8px;
}

.container:hover .title {
  opacity: 1;
}

.input {
  background-color: transparent;
  border: 2px solid white;
  color: var(--light);
  max-width: 200px;
  padding: .5rem;
  border-radius: var(--br);
  outline: none;
  opacity: .8;
  transition: .2s ease-in-out;
}

.input:focus {
  opacity: 1;
}

.title {
  border-radius: var(--br);
  transform: translate(-50%, -150%);
  background-color: var(--light);
  transition: .2s ease-in-out;
  opacity: 0;
  color: var(--dark);
  position: absolute;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  padding: .5rem;
  left: 50%;
}

.title::before {
  transform: translate(-50%, 50%) rotate(45deg);
  background-color: var(--light);
  position: absolute;
  z-index: -1;
  content: '';
  width: 10px;
  height: 10px;
  bottom: 0;
  left: 50%;
}
</style>


================================================
FILE: Inputs/chethan025_tasty-gecko-98.html
================================================
<input type="text" name="text" placeholder="Search 'UIverse'" class="input">
<style>
/* From Uiverse.io by chethan025 - Tags: input, search, hover effect */
.input[type = "text"] {
  display: block;
  color: rgb(34, 34, 34);
  background: linear-gradient(142.99deg, rgba(217, 217, 217, 0.63) 15.53%, rgba(243, 243, 243, 0.63) 88.19%);
  box-shadow: 0px 12px 24px -1px rgba(0, 0, 0,0.18);
  border-color: rgba(7, 4, 14, 0);
  border-radius: 50px;
  block-size: 20px;
  margin: 7px auto;
  padding: 18px 15px;
  outline: none;
  text-align: center;
  width: 200px;
  transition: 0.5s;
}

.input[type = "text"]:hover {
  width: 240px;
}

.input[type = "text"]:focus {
  width: 280px;
}
</style>


================================================
FILE: Inputs/cohencoo_proud-husky-84.html
================================================
<input type="text" placeholder="Write here..." name="text" class="input">
<style>
/* From Uiverse.io by cohencoo - Tags: input */
.input {
  border-radius: 10px;
  outline: 2px solid #FEBF00;
  border: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #e2e2e2;
  outline-offset: 3px;
  padding: 10px 1rem;
  transition: 0.25s;
}

.input:focus {
  outline-offset: 5px;
  background-color: #fff
}
</style>


================================================
FILE: Inputs/danilppzz_tiny-robin-35.html
================================================
<input placeholder="Enter your name" class="input" type="text" />

<style>
/* From Uiverse.io by danilppzz  - Tags: black, input, dark */
.input {
  background-color: #292929;
  border: 1px solid #3e3e3e;
  border-radius: 8px;
  color: #fff;
  padding: 14px 24px;
  text-decoration: none;
  font-size: 16px;
  margin: 12px 14px;
  cursor: pointer;
}

.input:hover {
  border: 1px solid #fff;
}

</style>
    

================================================
FILE: Inputs/deepak16375_neat-impala-82.html
================================================
<input placeholder="Enter your email" class="input" name="email" type="email">
   <button class="button">Subscribe</button> 
<style>
/* From Uiverse.io by deepak16375 - Tags: subscription, email, input */
.input {
  max-width: 190px;
  padding: 15px;
  font-size: 17px;
  color: black;
  border-top-left-radius: .5em;
  border-bottom-left-radius: .5em;
  border: 2px solid #fff;
  margin-right: -10px;
}

.button {
  border: none;
  background-color: #1363DF;
  text-decoration: none;
  padding: 15px;
  padding-bottom: 17px;
  font-size: 17px;
  color: #fff;
  border-top-right-radius: .5em;
  border-bottom-right-radius: .5em;
  cursor: pointer;
}
</style>


================================================
FILE: Inputs/denswastaken_stupid-jellyfish-26.html
================================================
	<div class="input-group">
		<input placeholder="Enter new item here" type="text" id="input-field">
		<button class="submit-button"><span>ADD</span></button>
	</div>
<style>
/* From Uiverse.io by denswastaken - Tags: input, add */
.input-group {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  justify-content: center;
  max-width: 160px;
}

.submit-button {
  font-size: 17px;
  padding: 0.5em 2em;
  border: transparent;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24);
  background: #2E2E2E;
  border-radius: 0 10px 10px 0;
  transition: 0.3s;
}

.submit-button:hover {
  transition: 0.3s;
  background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
  cursor: pointer;
}

.submit-button:active {
  transform: translate(0em, 0.2em);
}

.submit-button span {
  font-weight: 800;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.3s;
}

.submit-button:hover span {
  background: #2E2E2E;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.3s;
}

#input-field {
  background-color: #2E2E2E;
  border-radius: 10px 0 0 10px;
  border: none;
  width: 300px;
  padding-left: 8px;
  color: white;
  font-size: 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

::placeholder {
  color: rgb(184, 184, 184);
}
</style>


================================================
FILE: Inputs/devestter_fuzzy-panda-69.html
================================================
<form class="container" action="#">
<input placeholder="im an input!" class="input" name="text" type="text">
<button class="button" type="submit">submit</button>
</form>
<style>
/* From Uiverse.io by devestter - Tags: input, about me, clean, btn */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 500px;
  user-select: none;
}

.text {
  font-size: 0.8rem;
  text-align: left;
  width: 100%;
  color: black;
  font-weight: bold;
  margin-bottom: 3px;
}

.input {
  border-radius: 8px;
  padding: 7px 16px;
  box-shadow: rgba(77, 79, 82, 0.2) 0px 8px 24px;
  border: 2px solid rgb(184, 180, 180);
  font-size: 0.8rem;
  outline: none;
  transition: 0.5s ease;
}

.input:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  border-color: rgb(138, 175, 255);
}

.input:focus {
  border: 2px solid rgb(57, 120, 255);
  box-shadow: rgba(133, 130, 130, 0.1) 0px 4px 12px;
  transform: scale(0.99);
}

.input::placeholder {
  font-size: 13px;
  font-weight: 600;
}

.button {
  padding: 6px 15px;
  text-align: center;
  color: rgb(95, 87, 87);
  cursor: pointer;
  background-color: white;
  border-radius: 6px;
  border: none;
  transition: 0.5s;
  width: 100%;
  margin-top: 7px;
  font-size: 13px;
  box-shadow: rgba(104, 100, 100, 0.1) 0px 4px 6px -1px, rgba(49, 42, 42, 0.06) 0px 2px 4px -1px;
}

.button:hover {
  border-radius: 7px;
  background-color: rgb(243, 242, 242);
  border-color: rgb(236, 232, 232);
}



</style>


================================================
FILE: Inputs/devkatyall_smart-lionfish-91.html
================================================
<div class="input">
  <input
    class="to-do-input"
    placeholder="Your Tasks Go Here..."
    name="text"
    type="text"
  />
  <div class="todo-line">&nbsp;</div>
</div>
<button class="input button">Add</button>

<style>
/* From Uiverse.io by devkatyall  - Tags: input, submit, close */
.input {
  display: block;
}
.to-do-input {
  color: rgb(133, 198, 255);
  display: block;
  max-width: 190px;
  height: 2.7em;
  padding: 1em 1em;
  font-family: "Instrument Sans", sans-serif;
  border: none;
  border-radius: 4px;
  background-color: black;
}
.to-do-input:focus {
  outline: none;
}
.todo-line {
  z-index: 2;
  position: absolute;
  margin-top: -2px;
  width: 216px;
  height: 2px;
  border-radius: 4px;
  background-color: black;
}
.to-do-input:focus ~ .todo-line {
  animation: draw 0.3s ease-in;
  background: rgb(49, 228, 255);
}
@keyframes draw {
  0% {
    opacity: 0;
    width: 0px;
    filter: hue-rotate(0deg);
  }
  100% {
    opacity: 1;
    width: 200px;
    filter: hue-rotate(360deg);
  }
}
.input.button {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  display: flex;
  height: 2.7em;
  padding: 1em 1em;
  align-items: center;
  background-color: black;
  border: none;
  color: white;
  transform: translateX(-4px);
  cursor: pointer;
  transition: 0.5s all;
}
.input.button:active {
  background-color: rgb(49, 228, 255);
  transition: 0.5s all;
}

</style>
    

================================================
FILE: Inputs/doniaskima_bright-goat-87.html
================================================
<div class="inputContainer">
  <input required="" class="customInput" type="text">
  <label class="inputLabel">Your Name</label>
  <div class="inputUnderline"></div>
</div>

<style>
/* From Uiverse.io by doniaskima - Tags: input, css input, cool input */
.inputContainer {
  position: relative;
  margin-bottom: 20px;
}

.customInput {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #007bff;
  outline: none;
  transition: border-color 0.3s ease;
  color: #007bff;
}

.customInput:focus,
.customInput:not(:placeholder-shown) {
  border-color: #0056b3;
}

.inputLabel {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  padding: 5px;
  font-size: 16px;
  color: #007bff;
  transition: transform 0.3s ease, color 0.3s ease;
}

.customInput:focus + .inputLabel,
.customInput:not(:placeholder-shown) + .inputLabel {
  transform: translateY(-100%) translateX(-5px) scale(0.8);
}

.inputUnderline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #007bff;
}

</style>


================================================
FILE: Inputs/elijahgummer_nice-otter-15.html
================================================
<input placeholder="Type something..." class="input" name="text" type="text" />

<style>
/* From Uiverse.io by elijahgummer  - Tags: animation, blue, input, glow, transition, hover effect, box-shadow */
.input {
  width: 200px;
  padding: 12px;
  border: 2px solid #3498db;
  border-radius: 8px;
  outline: none;
  font-size: 18px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  background-color: #fff;
  color: #333;
  box-sizing: border-box;
}

.input:focus {
  border-color: #2980b9;
  box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);
  transform: scale(1.02);
}

/* Placeholder Styling */
.input::placeholder {
  color: #aaa;
  font-style: italic;
}

/* Hover Effect */
.input:hover {
  background-color: #f0f8ff;
}

</style>
    

================================================
FILE: Inputs/elijahgummer_short-baboon-22.html
================================================
<div class="input-field">
  <input required="" name="text" type="text" />
  <label>Enter your email</label>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: animation, white, black, input, dark, text animation, transition, click effect */
.input-field {
  position: relative;
  border-bottom: 2px solid #f0f424;
  margin: 15px 0;
}

.input-field label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #fff;
  font-size: 16px;
  pointer-events: none;
  transition: 0.15s ease;
}

.input-field input {
  width: 100%;
  height: 40px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: #fff;
}

.input-field input:focus ~ label,
.input-field input:valid ~ label {
  font-size: 0.8rem;
  top: 10px;
  transform: translateY(-120%);
}

</style>
    

================================================
FILE: Inputs/emmanuelh-dev_plastic-rattlesnake-49.html
================================================
<!-- From Uiverse.io by emmanuelh-dev - Tags: search, search bar, cool input -->
<div class="flex items-center justify-center p-5">
  <div class="rounded-lg bg-gray-200 p-5">
    <div class="flex">
      <div class="flex w-10 items-center justify-center rounded-tl-lg rounded-bl-lg border-r border-gray-200 bg-white p-5">
        <svg viewBox="0 0 20 20" aria-hidden="true" class="pointer-events-none absolute w-5 fill-gray-500 transition">
          <path d="M16.72 17.78a.75.75 0 1 0 1.06-1.06l-1.06 1.06ZM9 14.5A5.5 5.5 0 0 1 3.5 9H2a7 7 0 0 0 7 7v-1.5ZM3.5 9A5.5 5.5 0 0 1 9 3.5V2a7 7 0 0 0-7 7h1.5ZM9 3.5A5.5 5.5 0 0 1 14.5 9H16a7 7 0 0 0-7-7v1.5Zm3.89 10.45 3.83 3.83 1.06-1.06-3.83-3.83-1.06 1.06ZM14.5 9a5.48 5.48 0 0 1-1.61 3.89l1.06 1.06A6.98 6.98 0 0 0 16 9h-1.5Zm-1.61 3.89A5.48 5.48 0 0 1 9 14.5V16a6.98 6.98 0 0 0 4.95-2.05l-1.06-1.06Z"></path>
        </svg>
      </div>
      <input type="text" class="w-full max-w-[160px] bg-white pl-2 text-base font-semibold outline-0" placeholder="" id="">
      <input type="button" value="Search" class="bg-blue-500 p-2 rounded-tr-lg rounded-br-lg text-white font-semibold hover:bg-blue-800 transition-colors">
    </div>
  </div>
</div>



================================================
FILE: Inputs/emmanuelh-dev_rotten-eagle-16.html
================================================
<!-- From Uiverse.io by emmanuelh-dev - Tags: input, tailwind, cool input -->
<input class="block w-full px-6 py-3 text-black bg-white border border-gray-200 rounded-full appearance-none placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm max-w-[220px]" placeholder="******" type="password">




================================================
FILE: Inputs/ercnersoy_dangerous-cat-78.html
================================================

<input type="text" name="text" class="input" placeholder="Type here...">
<style>
/* From Uiverse.io by ercnersoy - Tags: neumorphism, input */
.input {
 border: none;
 padding: 1rem;
 border-radius: 1rem;
 background: #e8e8e8;
 box-shadow: 20px 20px 60px #c5c5c5,
		-20px -20px 60px #ffffff;
 transition: 0.3s;
}

.input:focus {
 outline-color: #e8e8e8;
 background: #e8e8e8;
 box-shadow: inset 20px 20px 60px #c5c5c5,
		inset -20px -20px 60px #ffffff;
 transition: 0.3s;
}
</style>


================================================
FILE: Inputs/escannord_good-insect-28.html
================================================
<label for="file" class="labelFile"
  ><span
    ><svg
      xml:space="preserve"
      viewBox="0 0 184.69 184.69"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      id="Capa_1"
      version="1.1"
      width="60px"
      height="60px"
    >
      <g>
        <g>
          <g>
            <path
              d="M149.968,50.186c-8.017-14.308-23.796-22.515-40.717-19.813
				C102.609,16.43,88.713,7.576,73.087,7.576c-22.117,0-40.112,17.994-40.112,40.115c0,0.913,0.036,1.854,0.118,2.834
				C14.004,54.875,0,72.11,0,91.959c0,23.456,19.082,42.535,42.538,42.535h33.623v-7.025H42.538
				c-19.583,0-35.509-15.929-35.509-35.509c0-17.526,13.084-32.621,30.442-35.105c0.931-0.132,1.768-0.633,2.326-1.392
				c0.555-0.755,0.795-1.704,0.644-2.63c-0.297-1.904-0.447-3.582-0.447-5.139c0-18.249,14.852-33.094,33.094-33.094
				c13.703,0,25.789,8.26,30.803,21.04c0.63,1.621,2.351,2.534,4.058,2.14c15.425-3.568,29.919,3.883,36.604,17.168
				c0.508,1.027,1.503,1.736,2.641,1.897c17.368,2.473,30.481,17.569,30.481,35.112c0,19.58-15.937,35.509-35.52,35.509H97.391
				v7.025h44.761c23.459,0,42.538-19.079,42.538-42.535C184.69,71.545,169.884,53.901,149.968,50.186z"
              style="fill:#010002;"
            ></path>
          </g>
          <g>
            <path
              d="M108.586,90.201c1.406-1.403,1.406-3.672,0-5.075L88.541,65.078
				c-0.701-0.698-1.614-1.045-2.534-1.045l-0.064,0.011c-0.018,0-0.036-0.011-0.054-0.011c-0.931,0-1.85,0.361-2.534,1.045
				L63.31,85.127c-1.403,1.403-1.403,3.672,0,5.075c1.403,1.406,3.672,1.406,5.075,0L82.296,76.29v97.227
				c0,1.99,1.603,3.597,3.593,3.597c1.979,0,3.59-1.607,3.59-3.597V76.165l14.033,14.036
				C104.91,91.608,107.183,91.608,108.586,90.201z"
              style="fill:#010002;"
            ></path>
          </g>
        </g>
      </g></svg
  ></span>
  <p>drag and drop your file here or click to select a file!</p></label
>
<input class="input" name="text" id="file" type="file" />

<style>
/* From Uiverse.io by escannord  - Tags: input, upload, drop, file, drag, dropzone */
.input {
  max-width: 190px;
  display: none;
}

.labelFile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 250px;
  height: 190px;
  border: 2px dashed #ccc;
  align-items: center;
  text-align: center;
  padding: 5px;
  color: #404040;
  cursor: pointer;
}

</style>
    

================================================
FILE: Inputs/escannord_hot-yak-44.html
================================================
<div class="custom_input">
  <svg
    viewBox="0 0 16 16"
    class="svg_icon bi-search"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
    ></path>
  </svg>
  <input placeholder="Placeholder Text" type="text" class="input" />
</div>

<style>
/* From Uiverse.io by escannord  - Tags: input, light, search */
.input {
  max-width: 190px;
}

.custom_input {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 100%;
}

.input {
  font-size: 18px;
  padding: 5px 10px;
  width: 100%;
  padding-left: 35px;
  outline: none;
  background: #ffffff;
  color: #000000;
  border: 1px solid #c4d1eb;
  border-radius: 5px;
  box-shadow: 3px 3px 2px 0px #e2e2e2;
  transition: 0.3s ease;
}

.input:focus {
  background: #f2f2f2;
  border: 1px solid #5a7ec7;
  border-radius: 10px;
}

.input::placeholder {
  color: #dddddd;
}

.svg_icon {
  position: absolute;
  left: 10px;
  fill: #4660dc;
  width: 18px;
  height: 18px;
}

</style>
    

================================================
FILE: Inputs/escannord_weak-wombat-42.html
================================================
<input class="input" placeholder="typed here..." name="text" type="text" />

<style>
/* From Uiverse.io by escannord  - Tags: simple, 3d, input */
.input {
  max-width: 190px;
  height: 2rem;
  background-color: transparent;
  border: 2px solid transparent;
  color: white;
  padding: 1rem;
  box-shadow: 2px 2px 5px black, inset 2px 2px 5px rgb(53, 51, 51),
    -1px -1px 20px rgba(59, 56, 56, 0.781);
  outline: none;
  border-radius: 10px;
  font-size: medium;
}

.input:focus {
  box-shadow: 2px 2px 5px black, inset 2px 2px 5px black,
    -1px -1px 5px rgba(68, 67, 67, 0.781),
    inset -1px -1px 5px rgba(66, 65, 65, 0.822);
}

</style>
    

================================================
FILE: Inputs/eslam-hany_strange-goose-48.html
================================================
<div class="input-container">
<input class="input" name="text" type="text">
<label class="label" for="input">Enter Your Name</label>
<div class="topline"></div>
<div class="underline"></div>
</div>
<style>
/* From Uiverse.io by eslam-hany - Tags: input */
.input-container {
  position: relative;
}

.input {
  padding: 10px;
  height: 40px;
  border: 2px solid #0B2447;
  border-top: none;
  border-bottom: none;
  font-size: 16px;
  background: transparent;
  outline: none;
  box-shadow: 7px 7px 0px 0px #0B2447;
  transition: all 0.5s;
}

.input:focus {
  box-shadow: none;
  transition: all 0.5s;
}

.label {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #0B2447;
  transition: all 0.5s;
  transform: scale(0);
  z-index: -1;
}

.input-container .topline {
  position: absolute;
  content: "";
  background-color: #0B2447;
  width: 0%;
  height: 2px;
  right: 0;
  top: 0;
  transition: all 0.5s;
}

.input-container input[type="text"]:focus ~ .topline {
  width: 35%;
  transition: all 0.5s;
}

.input-container .underline {
  position: absolute;
  content: "";
  background-color: #0B2447;
  width: 0%;
  height: 2px;
  right: 0;
  bottom: 0;
  transition: all 0.5s;
}

.input-container input[type="text"]:focus ~ .underline {
  width: 100%;
  transition: all 0.5s;
}

.input-container input[type="text"]:focus ~ .label {
  top: -10px;
  transform: scale(1);
  transition: all 0.5s;
}
</style>


================================================
FILE: Inputs/fanishah_fat-pig-29.html
================================================
<form class="search-bar" action="">
    <input class="search-input" required="" name="search" type="search" autocomplete="off">
    <button type="submit" class="search-btn">
        <span>Search</span>
    </button>
</form>
<style>
/* From Uiverse.io by fanishah - Tags: input */
.search-bar {
  display: flex;
}

.search-bar input,
.search-btn, 
.search-btn:before, 
.search-btn:after {
  transition: all 0.25s ease-out;
}

.search-bar input,
.search-btn {
  width: 3em;
  height: 3em;
}

.search-bar input:invalid:not(:focus),
.search-btn {
  cursor: pointer;
}

.search-bar,
.search-bar input:focus,
.search-bar input:valid {
  width: 100%;
}

.search-bar input:focus,
.search-bar input:not(:focus) + .search-btn:focus {
  outline: transparent;
}

.search-bar {
  margin: auto;
  padding: 1.5em;
  justify-content: center;
  max-width: 30em;
}

.search-bar input {
  background: transparent;
  border-radius: 1.5em;
  box-shadow: 0 0 0 0.4em #171717 inset;
  padding: 0.75em;
  transform: translate(0.5em,0.5em) scale(0.5);
  transform-origin: 100% 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.search-bar input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.search-bar input:focus,
.search-bar input:valid {
  background: #fff;
  border-radius: 0.375em 0 0 0.375em;
  box-shadow: 0 0 0 0.1em #d9d9d9 inset;
  transform: scale(1);
}

.search-btn {
  background: #171717;
  border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0;
  padding: 0.75em;
  position: relative;
  transform: translate(0.25em,0.25em) rotate(45deg) scale(0.25,0.125);
  transform-origin: 0 50%;
}

.search-btn:before, 
.search-btn:after {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
}

.search-btn:before {
  border-radius: 50%;
  box-shadow: 0 0 0 0.2em #f1f1f1 inset;
  top: 0.75em;
  left: 0.75em;
  width: 1.2em;
  height: 1.2em;
}

.search-btn:after {
  background: #f1f1f1;
  border-radius: 0 0.25em 0.25em 0;
  top: 51%;
  left: 51%;
  width: 0.75em;
  height: 0.25em;
  transform: translate(0.2em,0) rotate(45deg);
  transform-origin: 0 50%;
}

.search-btn span {
  display: inline-block;
  overflow: hidden;
  width: 1px;
  height: 1px;
}

/* Active state */
.search-bar input:focus + .search-btn,
.search-bar input:valid + .search-btn {
  background: #2762f3;
  border-radius: 0 0.375em 0.375em 0;
  transform: scale(1);
}

.search-bar input:focus + .search-btn:before, 
.search-bar input:focus + .search-btn:after,
.search-bar input:valid + .search-btn:before, 
.search-bar input:valid + .search-btn:after {
  opacity: 1;
}

.search-bar input:focus + .search-btn:hover,
.search-bar input:valid + .search-btn:hover,
.search-bar input:valid:not(:focus) + .search-btn:focus {
  background: #0c48db;
}

.search-bar input:focus + .search-btn:active,
.search-bar input:valid + .search-btn:active {
  transform: translateY(1px);
}

@media screen and (prefers-color-scheme: dark) {
  body, input {
    color: #f1f1f1;
  }

  .search-bar input {
    box-shadow: 0 0 0 0.4em #f1f1f1 inset;
  }

  .search-bar input:focus,
	.search-bar input:valid {
    background: #3d3d3d;
    box-shadow: 0 0 0 0.1em #3d3d3d inset;
  }

  .search-btn {
    background: #f1f1f1;
  }
}
</style>


================================================
FILE: Inputs/fbernack_honest-bat-69.html
================================================
<div class="mat-input">
  <label for="food">Favorite food</label>
  <input id="food" type="text" placeholder="Ex. Pizza" />
</div>

<style>
/* From Uiverse.io by fbernack  - Tags: input */
.mat-input {
  position: relative;
  font-size: inherit;
}

.mat-input input {
  border-width: 0 0 1px;
  outline: none;
  background-color: #0000000a;
  border-radius: 4px 4px 0 0;
  padding: 1.8em 0.75em 0.75em;
  border-color: #8c8c8c;
  border-style: solid;
  font-size: inherit;
  transition: 0.1s;
}

.mat-input input:hover,
.mat-input input:focus {
  border-bottom-width: 2px;
  padding-bottom: calc(0.75em - 1px);
}

.mat-input input:hover {
  border-color: #121212;
}

.mat-input input:focus {
  border-color: #2196f3;
}

.mat-input label {
  position: absolute;
  top: 1.4em;
  left: 1em;
  pointer-events: none;
  transition: 0.2s;
  color: #0009;
}

.mat-input:has(input:focus) label {
  color: #2196f3;
}

.mat-input:has(input:focus) label,
.mat-input:not(:has(input:placeholder-shown)) label {
  top: 0.75em;
  font-size: 0.8em;
}

.mat-input input::placeholder {
  opacity: 0;
  transition: 0.2s;
  color: #aaa;
}

.mat-input input:focus::placeholder {
  opacity: 1;
}

</style>
    

================================================
FILE: Inputs/gaeliam100_hot-rabbit-16.html
================================================
<!-- From Uiverse.io by gaeliam100  - Website: https://www.youtube.com/watch?v=ZROj1Wt45yc - Name:  Laratips - Tags: simple, input, clean -->
<div class="flex items-center justify-center min-h-screen">
  <div class="relative">
    <input
      class="border-b border-gray-300 py-1 focus:border-b-2 focus:border-blue-700 transition-colors focus:outline-none peer bg-inherit"
      type="text"
      name="username"
      id="username"
    />
    <label
      class="absolute left-0 top-1 cursor-text peer-focus:text-xs peer-focus:-top-4 transition-all peer-focus:text-blue-700"
      for="username"
      >Name</label
    >
  </div>
</div>


    

================================================
FILE: Inputs/garerim_bitter-donkey-79.html
================================================
<input placeholder="Username" class="input" name="text" type="text">
<style>
/* From Uiverse.io by garerim - Tags: neumorphism, input */
.input {
  margin: 30px;
  background: none;
  border: none;
  outline: none;
  max-width: 190px;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 9999px;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
  color: #fff;
}
</style>


================================================
FILE: Inputs/garerim_rare-moth-56.html
================================================
<div class="container-input">
  <input type="text" placeholder="Search" name="text" class="input">
  <svg fill="#000000" width="20px" height="20px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
    <path d="M790.588 1468.235c-373.722 0-677.647-303.924-677.647-677.647 0-373.722 303.925-677.647 677.647-677.647 373.723 0 677.647 303.925 677.647 677.647 0 373.723-303.924 677.647-677.647 677.647Zm596.781-160.715c120.396-138.692 193.807-319.285 193.807-516.932C1581.176 354.748 1226.428 0 790.588 0S0 354.748 0 790.588s354.748 790.588 790.588 790.588c197.647 0 378.24-73.411 516.932-193.807l516.028 516.142 79.963-79.963-516.142-516.028Z" fill-rule="evenodd"></path>
</svg>
</div>

<style>
/* From Uiverse.io by garerim - Tags: input, search */
.container-input {
  position: relative;
}

.input {
  width: 150px;
  padding: 10px 0px 10px 40px;
  border-radius: 9999px;
  border: solid 1px #333;
  transition: all .2s ease-in-out;
  outline: none;
  opacity: 0.8;
}

.container-input svg {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translate(0, -50%);
}

.input:focus {
  opacity: 1;
  width: 250px;
}
</style>


================================================
FILE: Inputs/guilhermeyohan_hot-termite-89.html
================================================
<div class="input-form">
    <input class="input" name="text" type="text" required="">
    <label class="textUser">Click Here</label>
  </div>
<style>
/* From Uiverse.io by guilhermeyohan - Tags: input */
.input-form {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
}

.input {
  border: solid 1.9px #9e9e9e;
  border-radius: 1.3rem;
  background: none;
  padding: 1rem;
  font-size: 1rem;
  color: #000000;
  transition: border 150ms cubic-bezier(0.4,0,0.2,1);
}

.textUser {
  position: absolute;
  left: 15px;
  color: #666666;
  pointer-events: none;
  transform: translateY(1rem);
  transition: 150ms cubic-bezier(0.4,0,0.2,1);
}

.input:focus, input:valid {
  outline: none;
  box-shadow: 1px 2px 5px rgba(133, 133, 133, 0.523);
  background-image: linear-gradient(to top, rgba(182, 182, 182, 0.199), rgba(252, 252, 252, 0));
  transition: background 4s ease-in-out;
}

.input:focus ~ label, input:valid ~ label {
  transform: translateY(-95%) scale(0.9);
  padding: 0 .2em;
  color: #000000be;
  left: 80px;
}

.input:hover {
  border: solid 1.9px #000002;
  transform: scale(1.03);
  box-shadow: 1px 1px 5px rgba(133, 133, 133, 0.523);
  transition: border-color 1s ease-in-out;
}
</style>


================================================
FILE: Inputs/jamaldine-hub_cowardly-jellyfish-52.html
================================================
<div class="container">
  <input required="required" class="inp" />
  <span class="content">Content</span>
</div>

<style>
/* From Uiverse.io by jamaldine-hub  - Tags: animation, active, input, dark, light, modern */
.container {
  position: relative;
  width: 250px;
}
.container .inp {
  width: 100%;
  padding: 10px;
  border: 1.5px solid rgba(0, 167, 161, 0.272);
  outline: none;
  margin-top: 20px;
  border-radius: 5px;
  color: rgba(0, 167, 181, 0.62);
  background: rgba(41, 41, 41);
  font-size: 1em;
}
.container .content {
  position: absolute;
  left: 0;
  margin-top: 20px;
  padding: 10px;
  text-transform: uppercase;
  font-size: 1em;
  pointer-events: none;
  color: rgba(0, 167, 161, 0.272);
  transition: 0.5s;
}
.container input:valid ~ span,
.container input:focus ~ span {
  color: rgb(10, 164, 159);
  transform: translateX(10px) translateY(-7px);
  font-size: 0.9em;
  padding: 0 10px;
  background: rgb(41, 41, 41);
  border-left: 2px solid rgba(0, 167, 161, 0.272);
  border-right: 2px solid rgba(0, 167, 161, 0.272);
}

</style>
    

================================================
FILE: Inputs/jamik-dev_shaggy-cheetah-22.html
================================================
<!-- From Uiverse.io by jamik-dev  - Tags: tooltip, animation, input, smooth, focus, recent search, input, tooltip -->
<div class="relative w-2/3 -mt-20">
  <input
    class="w-full peer z-[21] px-6 py-4 rounded-xl outline-none duration-200 ring-2 ring-[transparent] focus:ring-[#11BE86]"
    color="white"
    size="xl"
    placeholder="Focus me"
  />
  <div
    class="opacity-0 -translate-y-2 peer-focus:translate-y-0 pointer-events-none peer-focus:pointer-events-auto duration-200 peer-focus:opacity-100 absolute top-16 w-full z-[500] left-0 rounded-xl border border-white-222 p-4 bg-white shadow-lg"
  >
    <p class="font-semibold text-xs text-[#5D5D5F]">LAST SEARCHES</p>
    <ul class="flex gap-2 flex-col mt-2">
      <li
        class="px-2 cursor-pointer text-sm hover:bg-green-100 py-2 rounded-lg"
      >
        Something you've searched before
      </li>
      <li
        class="px-2 cursor-pointer text-sm hover:bg-green-100 py-2 rounded-lg"
      >
        Something you've searched before
      </li>
    </ul>

    <p class="font-semibold text-xs text-[#5D5D5F] mt-4">EXTENDED SEARCHES</p>
    <ul class="flex gap-2 mt-4">
      <li
        class="grid grid-cols-10 cursor-pointer border border-[#E7EDFB] rounded-xl overflow-hidden group"
      >
        <div class="col-span-3 overflow-hidden">
          <p class="text-green-300 mt-10 ml-2">YOUR IMAGE HERE</p>
        </div>
        <div class="col-span-7 p-3 flex flex-col justify-between">
          <h4
            class="text-base duration-200 group-hover:text-[#11BE86] font-medium text-black line-clamp-2"
          >
            Your text here
          </h4>
          <div class="flex justify-between items-center mt-4">
            <p class="flex text-sm gap-2 text-[#9A999B] items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-4 h-4"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
                ></path>
              </svg>
              18.04.2024
            </p>
            <p class="flex text-sm gap-1 text-[#9A999B] items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-4 h-4"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
                ></path>
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
                ></path>
              </svg>
              806
            </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>


    

================================================
FILE: Inputs/jamik-dev_unlucky-panda-29.html
================================================
<!-- From Uiverse.io by jamik-dev  - Website: https://flowbite.com/docs/forms/search-input/#search-bar-example - Name: Flowbite - Tags: icon, black, button, form, input, tailwind, tailwindbutton, tailwindcss -->
<form class="px-4 w-full max-w-[330px]">
  <label
    class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
    for="default-search"
    >Search</label
  >
  <div class="relative">
    <div
      class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
    >
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        class="w-4 h-4 text-gray-500 dark:text-gray-400"
      >
        <path
          d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
          stroke-width="2"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke="currentColor"
        ></path>
      </svg>
    </div>
    <input
      required=""
      placeholder="Search"
      class="block w-full p-4 py-5 ps-10 text-lg text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 outline-none focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
      id="default-search"
      type="search"
    />
    <button
      class="absolute end-2.5 bottom-1/2 translate-y-1/2 p-4 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
    >
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        class="w-4 h-4"
      >
        <path
          d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
          stroke-width="2"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke="currentColor"
        ></path>
      </svg>
      <span class="sr-only">Search</span>
    </button>
  </div>
</form>


    

================================================
FILE: Inputs/javierBarroso_breezy-fireant-74.html
================================================
<div class="page">
  <div class="search">
    <input type="text" name="text" class="input" />
    <div class="icon">
      <svg
        version="1.1"
        id="Capa_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 488.4 488.4"
        xml:space="preserve"
      >
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g
          id="SVGRepo_tracerCarrier"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <g>
            <g>
              <path
                d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6 s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2 S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7 S381.9,104.65,381.9,203.25z"
              ></path>
            </g>
          </g>
        </g>
      </svg>
    </div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <span></span>
  </div>
</div>

<style>
/* From Uiverse.io by javierBarroso  - Tags: blue, purple, input, dark, search, modern, neon, transition */
.input {
  min-width: 50px;
  width: 50px;
  transition-duration: 0.8s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: 50px;
  border-radius: 50px;
  border: none;
  padding: 20px;
  font-size: 18px;
  font-weight: 200;
  color: transparent;
  font-family: "Courier New", Courier, monospace;
  background: rgba(1, 1, 1, 0.9);
  box-shadow: 0 2px 5px rgba(20, 20, 20, 0);
  background: linear-gradient(0deg, #141414ec, #00000cea, #00000cea, #141414ec);
}

.page {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #111;
  z-index: -5;
  opacity: 1;
  background-image: linear-gradient(#18305527 1px, transparent 1px),
    linear-gradient(to right, #18305527 1px, #00000c 1px);
  background-size: 10px 10px;
}

.input:focus {
  color: #999;
  width: 300px;
  outline-style: none;
}

.search {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
  position: relative;
}

.search .i {
  position: absolute;
  inset: -1px;
  display: block;
  border-radius: 50px;
  pointer-events: none;
  z-index: -1;
  transition-duration: 0.8s;
  background: linear-gradient(
    -35deg,
    #f7f7f721 10%,
    transparent,
    rgba(243, 238, 243, 0.349) 80%
  );
}

.search .span {
  width: 100%;
  height: 100%;
  background-color: #222;
  position: absolute;
  pointer-events: none;
  border-radius: 50px;
}

.search .i:nth-child(3) {
  filter: blur(10px);
  background: linear-gradient(
    -35deg,
    #118cff 0%,
    transparent,
    transparent,
    #f1e 99%
  );
  inset: -2px;
}

.search .i:nth-child(5) {
  background: linear-gradient(
    -35deg,
    #118cff 0%,
    transparent,
    transparent,
    #f1e 99%
  );
  z-index: -1;
}

.search .icon {
  position: absolute;
  pointer-events: none;
  transition-duration: 0.8s;
  right: 0;
  width: 50px;
  height: 50px;
  margin: 0px;
  padding: 15px;
  border-radius: 50px;
  fill: #aaa;
}

</style>
    

================================================
FILE: Inputs/joe-watson-sbf_shy-snake-4.html
================================================
<div class="search">
    <input type="text" class="search__input" placeholder="Type your text">
    <button class="search__button">
        <svg class="search__icon" aria-hidden="true" viewBox="0 0 24 24">
            <g>
                <path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path>
            </g>
        </svg>
    </button>
</div>
<style>
/* From Uiverse.io by joe-watson-sbf - Tags: input, search */
.search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.search__input {
  font-family: inherit;
  font-size: inherit;
  background-color: #f4f2f2;
  border: none;
  color: #646464;
  padding: 0.7rem 1rem;
  border-radius: 30px;
  width: 12em;
  transition: all ease-in-out .5s;
  margin-right: -2rem;
}

.search__input:hover, .search__input:focus {
  box-shadow: 0 0 1em #00000013;
}

.search__input:focus {
  outline: none;
  background-color: #f0eeee;
}

.search__input::-webkit-input-placeholder {
  font-weight: 100;
  color: #ccc;
}

.search__input:focus + .search__button {
  background-color: #f0eeee;
}

.search__button {
  border: none;
  background-color: #f4f2f2;
  margin-top: .1em;
}

.search__button:hover {
  cursor: pointer;
}

.search__icon {
  height: 1.3em;
  width: 1.3em;
  fill: #b4b4b4;
}
</style>


================================================
FILE: Inputs/jubayer-10_cowardly-sloth-72.html
================================================
<!-- From Uiverse.io by jubayer-10  - Tags: input -->
<div
  class="w-64 h-14 relative flex items-center shadow-[0px_5px_15px_rgba(0,0,0,0.03)]"
>
  <input
    required=""
    class="peer w-full h-full bg-white text-lg font-light placeholder-slate-400 contrast-more:placeholder-slate-500 border border-slate-200 outline-none rounded-lg focus:border-indigo-400 valid:border-indigo-400 focus:ring-indigo-400 valid:ring-indigo-400 focus:ring-1 valid:ring-1 px-3"
    placeholder="Enter your password"
    type="text"
  />
  <div
    class="w-5 absolute block peer-valid:hidden right-3 opacity-20 peer-focus:opacity-70 peer-valid:opacity-70 peer-valid:fill-indigo-500"
  >
    <svg viewBox="0 0 24 24" id="Outline" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M23.271,9.419A15.866,15.866,0,0,0,19.9,5.51l2.8-2.8a1,1,0,0,0-1.414-1.414L18.241,4.345A12.054,12.054,0,0,0,12,2.655C5.809,2.655,2.281,6.893.729,9.419a4.908,4.908,0,0,0,0,5.162A15.866,15.866,0,0,0,4.1,18.49l-2.8,2.8a1,1,0,1,0,1.414,1.414l3.052-3.052A12.054,12.054,0,0,0,12,21.345c6.191,0,9.719-4.238,11.271-6.764A4.908,4.908,0,0,0,23.271,9.419ZM2.433,13.534a2.918,2.918,0,0,1,0-3.068C3.767,8.3,6.782,4.655,12,4.655A10.1,10.1,0,0,1,16.766,5.82L14.753,7.833a4.992,4.992,0,0,0-6.92,6.92l-2.31,2.31A13.723,13.723,0,0,1,2.433,13.534ZM15,12a3,3,0,0,1-3,3,2.951,2.951,0,0,1-1.285-.3L14.7,10.715A2.951,2.951,0,0,1,15,12ZM9,12a3,3,0,0,1,3-3,2.951,2.951,0,0,1,1.285.3L9.3,13.285A2.951,2.951,0,0,1,9,12Zm12.567,1.534C20.233,15.7,17.218,19.345,12,19.345A10.1,10.1,0,0,1,7.234,18.18l2.013-2.013a4.992,4.992,0,0,0,6.92-6.92l2.31-2.31a13.723,13.723,0,0,1,3.09,3.529A2.918,2.918,0,0,1,21.567,13.534Z"
      ></path>
    </svg>
  </div>
  <div
    class="w-5 absolute hidden peer-valid:block right-3 opacity-20 peer-focus:opacity-70 peer-valid:opacity-70 peer-valid:fill-indigo-500"
  >
    <svg viewBox="0 0 24 24" id="Outline" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M23.271,9.419C21.72,6.893,18.192,2.655,12,2.655S2.28,6.893.729,9.419a4.908,4.908,0,0,0,0,5.162C2.28,17.107,5.808,21.345,12,21.345s9.72-4.238,11.271-6.764A4.908,4.908,0,0,0,23.271,9.419Zm-1.705,4.115C20.234,15.7,17.219,19.345,12,19.345S3.766,15.7,2.434,13.534a2.918,2.918,0,0,1,0-3.068C3.766,8.3,6.781,4.655,12,4.655s8.234,3.641,9.566,5.811A2.918,2.918,0,0,1,21.566,13.534Z"
      ></path>
      <path
        d="M12,7a5,5,0,1,0,5,5A5.006,5.006,0,0,0,12,7Zm0,8a3,3,0,1,1,3-3A3,3,0,0,1,12,15Z"
      ></path>
    </svg>
  </div>
</div>


    

================================================
FILE: Inputs/jubayer-10_pretty-wolverine-81.html
================================================
<!-- From Uiverse.io by jubayer-10  - Tags: simple, input, search, submit, input effect , hover button, tailwindcss -->
<div
  class="p-5 overflow-hidden w-[60px] h-[60px] hover:w-[270px] bg-[#4070f4] shadow-[2px_2px_20px_rgba(0,0,0,0.08)] rounded-full flex group items-center hover:duration-300 duration-300"
>
  <div class="flex items-center justify-center fill-white">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      id="Isolation_Mode"
      data-name="Isolation Mode"
      viewBox="0 0 24 24"
      width="22"
      height="22"
    >
      <path
        d="M18.9,16.776A10.539,10.539,0,1,0,16.776,18.9l5.1,5.1L24,21.88ZM10.5,18A7.5,7.5,0,1,1,18,10.5,7.507,7.507,0,0,1,10.5,18Z"
      ></path>
    </svg>
  </div>
  <input
    type="text"
    class="outline-none text-[20px] bg-transparent w-full text-white font-normal px-4"
  />
</div>


    

================================================
FILE: Inputs/jubayer-10_selfish-fly-10.html
================================================
<!-- From Uiverse.io by jubayer-10  - Tags: input -->
<div class="p-4 flex flex-col w-72 bg-white">
  <label
    class="block mb-0.5 font-medium relative text-slate-700 after:absolute after:content-['*'] after:text-red-500 after:pl-0.5"
    for="email"
    >Email</label
  >
  <input
    required=""
    type="email"
    value="example$gmail.com"
    class="peer w-full h-10 px-3 border outline-none font-semibold shadow-[0px_0px_15px_rgba(0,0,0,0.05)]"
    id="email"
  />
  <div class="hidden peer-invalid:block">
    <div class="mt-2 flex items-center gap-1">
      <div class="w-4 fill-rose-500">
        <svg
          viewBox="0 0 24 24"
          data-name="Layer 1"
          id="Layer_1"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M24,12A12,12,0,1,1,12,0,12.013,12.013,0,0,1,24,12ZM13,5H11V15h2Zm0,12H11v2h2Z"
          ></path>
        </svg>
      </div>
      <p class="Capitalize font-medium text-rose-500">Invalid email address</p>
    </div>
  </div>
  <div class="block peer-invalid:hidden">
    <div class="mt-2 flex items-center gap-1">
      <div class="w-4 fill-green-500">
        <svg
          viewBox="0 0 24 24"
          data-name="Layer 1"
          id="Layer_1"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m12,0C5.383,0,0,5.383,0,12s5.383,12,12,12,12-5.383,12-12S18.617,0,12,0Zm-.091,15.419c-.387.387-.896.58-1.407.58s-1.025-.195-1.416-.585l-2.782-2.696,1.393-1.437,2.793,2.707,5.809-5.701,1.404,1.425-5.793,5.707Z"
          ></path>
        </svg>
      </div>
      <p class="Capitalize font-medium text-green-500">Valid Email Address</p>
    </div>
  </div>
</div>


    

================================================
FILE: Inputs/jubayer-10_sharp-otter-56.html
================================================
<!-- From Uiverse.io by jubayer-10  - Tags: simple, tooltip, hover, input, light, search, creative, tailwindcss -->
<form action="#">
  <div class="w-60 h-12 relative flex rounded-xl">
    <input
      required=""
      class="peer w-full bg-transparent outline-none px-4 text-base rounded-xl bg-white border border-[#4070f4] focus:shadow-md"
      id="address"
      type="text"
    />
    <label
      class="absolute top-1/2 translate-y-[-50%] bg-white left-4 px-2 peer-focus:top-0 peer-focus:left-3 font-light text-base peer-focus:text-sm peer-focus:text-[#4070f4] peer-valid:-top-0 peer-valid:left-3 peer-valid:text-sm peer-valid:text-[#4070f4] duration-150"
      for="address"
    >
      Email Address</label
    >
  </div>
</form>


    

================================================
FILE: Inputs/kamehame-ha_lovely-fly-87.html
================================================
<div class="coolinput">
    <label for="input" class="text">Name:</label>
    <input type="text" placeholder="Write here..." name="input" class="input">
</div>
<style>
/* From Uiverse.io by kamehame-ha - Tags: input, modern, clean */
.coolinput {
  display: flex;
  flex-direction: column;
  width: fit-content;
  position: static;
  max-width: 240px;
}

.coolinput label.text {
  font-size: 0.75rem;
  color: #818CF8;
  font-weight: 700;
  position: relative;
  top: 0.5rem;
  margin: 0 0 0 7px;
  padding: 0 3px;
  background: #e8e8e8;
  width: fit-content;
}

.coolinput input[type=text].input {
  padding: 11px 10px;
  font-size: 0.75rem;
  border: 2px #818CF8 solid;
  border-radius: 5px;
  background: #e8e8e8;
}

.coolinput input[type=text].input:focus {
  outline: none;
}
</style>


================================================
FILE: Inputs/kamehame-ha_purple-bullfrog-33.html
================================================
<!-- From Uiverse.io by kamehame-ha  - Tags: simple, login, input, tailwind, tailwindcss -->
<div class="input flex flex-col w-fit static">
  <label
    for="input"
    class="text-blue-500 text-xs font-semibold relative top-2 ml-[7px] px-[3px] bg-[#e8e8e8] w-fit"
    >Password:</label
  >
  <input
    id="password"
    type="password"
    placeholder="Write here..."
    name="input"
    class="border-blue-500 input px-[10px] py-[11px] text-xs bg-[#e8e8e8] border-2 rounded-[5px] w-[210px] focus:outline-none placeholder:text-black/25"
  />
</div>


    

================================================
FILE: Inputs/kamehame-ha_silent-dodo-36.html
================================================
<div class="input-container">
  <p class="bash-text">
    <span class="user">user</span><span class="vm">@ui-verse</span>:<span class="char">~</span>$
  </p>
  <input class="input" placeholder="sudo rm -rf css/" type="text">
</div>
<style>
/* From Uiverse.io by kamehame-ha - Tags: input, clean, bash, cmd, linux */
.input-container {
  display: flex;
  align-items: center;
  background-color: #0F172A;
  padding: 10px 15px;
  gap: 5px;
  border-radius: 20px;
}

.input-container .bash-text {
  font-size: .8rem;
  color: white;
}

.input-container .bash-text .user {
  color: #E879F9;
}

.input-container .bash-text .vm {
  color: #2DD4BF;
}

.input-container .bash-text .char {
  color: #A78BFA;
}

.input-container input[type=text].input {
  background-color: transparent;
  border: none;
  outline: none;
  color: white;
}
</style>


================================================
FILE: Inputs/krlozCJ_splendid-starfish-73.html
================================================
<div class="container">
    <input type="text" name="text" class="input" required="" placeholder="Type to search...">
    <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
            <title>Search</title>
            <path d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path>
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M338.29 338.29L448 448"></path>
        </svg>
    </div>
</div>
<style>
/* From Uiverse.io by krlozCJ - Tags: input, search */
.container {
  position: relative;
  --size-button: 40px;
  color: white;
}

.input {
  padding-left: var(--size-button);
  height: var(--size-button);
  font-size: 15px;
  border: none;
  color: #fff;
  outline: none;
  width: var(--size-button);
  transition: all ease 0.3s;
  background-color: #191A1E;
  box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;
  border-radius: 50px;
  cursor: pointer;
}

.input:focus,
.input:not(:invalid) {
  width: 200px;
  cursor: text;
  box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;
}

.input:focus + .icon,
.input:not(:invalid) + .icon {
  pointer-events: all;
  cursor: pointer;
}

.container .icon {
  position: absolute;
  width: var(--size-button);
  height: var(--size-button);
  top: 0;
  left: 0;
  padding: 8px;
  pointer-events: none;
}

.container .icon svg {
  width: 100%;
  height: 100%;
}
</style>


================================================
FILE: Inputs/laminelawal_helpless-bulldog-88.html
================================================
<input placeholder="Search..." class="input" name="text" type="text">
<style>
/* From Uiverse.io by laminelawal - Tags: input, html */
.input {
  padding: 10px;
  width: 120px;
  border: none;
  outline: none;
  border-radius: 5px;
  box-shadow: 0 1px  gray;
  font-size: 18px;
  transition: width 0.3s;
  font-family: Consolas,monaco,monospace;
}

.input:focus {
  outline: 1px solid blue;
  box-shadow: none;
  width: 230px;
}

.input::placeholder {
  color: blue;
}
</style>


================================================
FILE: Inputs/lenfear23_helpless-swan-97.html
================================================
<input placeholder="First name" class="input" name="firstName" type="text">
<style>
/* From Uiverse.io by lenfear23 - Tags: neumorphism, input */
.input {
  max-width: 200px;
  min-height: 40px;
  padding: 10px;
  font-family: 'Courier New', Courier, monospace;
  outline: none;
  background: #e8e8e8;
  box-shadow: 5px 5px 17px #c8c8c8,
             -5px -5px 17px #ffffff;
  border: none;
  border-radius: 10px;
  transition: all .5s;
}

.input:focus {
  background: #e8e8e8;
  box-shadow: inset 5px 5px 17px #c8c8c8,
            inset -5px -5px 17px #ffffff;
}
</style>


================================================
FILE: Inputs/liyaxu123_warm-eel-62.html
================================================
<div class="form-control">
    <input type="value" required="">
    <label>
        <span style="transition-delay:0ms">U</span><span style="transition-delay:50ms">s</span><span style="transition-delay:100ms">e</span><span style="transition-delay:150ms">r</span><span style="transition-delay:200ms">n</span><span style="transition-delay:250ms">a</span><span style="transition-delay:300ms">m</span><span style="transition-delay:350ms">e</span>
    </label>
</div>
<style>
/* From Uiverse.io by liyaxu123 - Tags: input, animated */
.form-control {
  position: relative;
  margin: 20px 0 40px;
  width: 190px;
}

.form-control input {
  background-color: transparent;
  border: 0;
  border-bottom: 2px #fff solid;
  display: block;
  width: 100%;
  padding: 15px 0;
  font-size: 18px;
  color: #fff;
}

.form-control input:focus,
.form-control input:valid {
  outline: 0;
  border-bottom-color: lightblue;
}

.form-control label {
  position: absolute;
  top: 15px;
  left: 0;
  pointer-events: none;
}

.form-control label span {
  display: inline-block;
  font-size: 18px;
  min-width: 5px;
  color: #fff;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.form-control input:focus+label span,
.form-control input:valid+label span {
  color: lightblue;
  transform: translateY(-30px);
}
</style>


================================================
FILE: Inputs/mRcOol7_white-wombat-51.html
================================================
<input type="text" class="search-input" placeholder="Search..." />

<style>
/* From Uiverse.io by mRcOol7  - Tags: flashy, minimalist, gradient, input, search, glow, border, hover effect */
.search-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to right, #5c5c5c, #f5f5f5);
  padding: 30px;
  border-radius: 15px;
  transition: background 0.3s ease;
  perspective: 1000px;
}

.label {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  transition: transform 0.3s ease, font-size 0.3s ease, color 0.3s ease,
    text-shadow 0.3s ease;
}

.search-input {
  position: relative;
  width: 230px;
  height: 40px;
  padding: 12px;
  border: 2px solid #ccc;
  border-radius: 8px;
  background: linear-gradient(to right, #d9d9d9, #f8f8f8);
  font-size: 16px;
  color: #555;
  outline: none;
  transition: box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, transform 0.3s ease;
  transform-style: preserve-3d;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.2) inset; /* Improved box-shadow for a realistic feel */
}

.search-input:focus,
.search-input:not(:placeholder-shown) {
  border-color: #4caf50;
  background: linear-gradient(to right, #c2f0c2, #f0f0f0);
  transform: rotateX(20deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.2) inset; /* Improved box-shadow on focus */
}

.search-input:focus + .label,
.search-input:not(:placeholder-shown) + .label {
  transform: translateY(-120%) scale(0.8);
  font-size: 12px;
  color: #4caf50;
  text-shadow: 0 0 5px rgba(76, 175, 80, 0.6);
}

.search-input:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.2) inset; /* Improved box-shadow on hover */
  background: linear-gradient(to right, #e6e6e6, #f9f9f9);
  border-color: #999;
}

.clear-button {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: #999;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.clear-button:hover {
  color: #4caf50;
  transform: scale(1.1);
}

.search-input:not(:focus):not(:placeholder-shown) + .clear-button {
  opacity: 1;
}

.shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.search-input:focus + .shine {
  opacity: 1;
}

.search-icon {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: #999;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease, filter 0.3s ease;
  border-radius: 50%;
}

.search-input:focus + .search-icon {
  color: #4caf50;
  transform: translateY(-50%) scale(1.1);
  filter: drop-shadow(0 0 5px rgba(76, 175, 80, 0.6));
}

@keyframes inputPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.search-input:focus {
  animation: inputPulse 0.5s ease;
}

</style>
    

================================================
FILE: Inputs/marcelodolza_grumpy-eel-20.html
================================================
<div class="container">
  <div class="bg"></div>
  <div class="input-wrapper">
    <div class="input">
      <div class="glow left"></div>
      <div class="glow right"></div>

      <input type="text" name="text" placeholder="Search..." />

      <div class="reflection"></div>

      <div class="icon">
        <svg
          stroke="#fff"
          viewBox="0 0 38 38"
          height="1em"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
          class="loading"
        >
          <g fill-rule="evenodd" fill="none">
            <g stroke-width="3" transform="translate(1 1)">
              <circle r="18" cy="18" cx="18" stroke-opacity=".2"></circle>
              <path d="M36 18c0-9.94-8.06-18-18-18"></path>
            </g>
          </g>
        </svg>

        <svg
          viewBox="0 0 490.4 490.4"
          version="1.1"
          width="1em"
          height="1em"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
          class="magnifier"
        >
          <path
            d="M484.1,454.796l-110.5-110.6c29.8-36.3,47.6-82.8,47.6-133.4c0-116.3-94.3-210.6-210.6-210.6S0,94.496,0,210.796   s94.3,210.6,210.6,210.6c50.8,0,97.4-18,133.8-48l110.5,110.5c12.9,11.8,25,4.2,29.2,0C492.5,475.596,492.5,463.096,484.1,454.796z    M41.1,210.796c0-93.6,75.9-169.5,169.5-169.5s169.6,75.9,169.6,169.5s-75.9,169.5-169.5,169.5S41.1,304.396,41.1,210.796z"
          ></path>
        </svg>
      </div>

      <button class="filter">
        <span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            viewBox="0 0 24 24"
            stroke-width="2"
            fill="none"
            stroke="currentColor"
          >
            <path
              d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
              stroke-linejoin="round"
              stroke-linecap="round"
            ></path>
          </svg>
        </span>
      </button>

      <div class="result">
        <header class="result-header">
          <div style="--i:1">
            <input type="radio" id="all" name="tab" checked="" />
            <label for="all" data-label="All">
              <span>All</span>
            </label>
          </div>
          <div style="--i:2">
            <input type="radio" id="buttons" name="tab" />
            <label for="buttons" data-label="Buttons">
              <span>Buttons</span>
            </label>
          </div>
          <div style="--i:3">
            <input type="radio" id="cards" name="tab" />
            <label for="cards" data-label="Cards">
              <span>Cards</span>
            </label>
          </div>
          <div style="--i:4">
            <input type="radio" id="inputs" name="tab" />
            <label for="inputs" data-label="Inputs">
              <span>Inputs</span>
            </label>
          </div>
        </header>

        <div class="result-content-header">
          <div style="--i:1">Name <span>↓</span></div>
          <div style="--i:2">Date</div>
          <div style="--i:3">Rating</div>
        </div>

        <div class="result-content">
          <a style="--i:1">
            <div>Item I</div>
            <div>11th July</div>
            <div>★★★★★</div>
          </a>
          <a style="--i:2">
            <div>Item II</div>
            <div>09th June</div>
            <div>★★★★</div>
          </a>
          <a style="--i:3">
            <div>Item III</div>
            <div>07th May</div>
            <div>★★★</div>
          </a>
          <div class="lava"></div>
        </div>
      </div>
    </div>
    <div class="glow-outline"></div>
    <div class="glow-layer-bg"></div>
    <div class="glow-layer-1"></div>
    <div class="glow-layer-2"></div>
    <div class="glow-layer-3"></div>
    <div class="glow left"></div>
    <div class="glow right"></div>
  </div>
</div>

<style>
/* From Uiverse.io by marcelodolza  - Tags: animation, gradient, input, dark, search, glow, modern, neon, input */
.container {
  --ease-elastic: cubic-bezier(0.7, -0.5, 0.3, 1.5);
  --icon-color: #bcacbd;
  --glow-l-color: #8422b1;
  --glow-r-color: #0d00ff;
  --input-radius: 14px;
  --result-item-h: 33.5px;

  background-color: #010001;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fadeIn 1.4s ease forwards 0.2s;
}
.container .bg {
  position: absolute;
  inset: 0;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 40%,
    black 60%,
    transparent 100%
  );
}
.container .bg::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 400px;
  background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 12px 12px;
  mask-image: linear-gradient(
    transparent 0%,
    black 40%,
    black 60%,
    transparent 100%
  );
}

.input-wrapper {
  position: relative;
  z-index: 1;
}

.input {
  background-color: #010201;
  border-radius: var(--input-radius);
  position: relative;
  z-index: 10;
}
.input::before {
  pointer-events: none;
  content: "type to interact";
  position: absolute;
  left: 0;
  right: 0;
  top: 95px;
  font-size: 18px;
  margin: auto;
  text-align: center;
  font-weight: lighter;
  opacity: 0.4;
  color: white;
  mask-image: linear-gradient(to top, rgba(255, 255, 255, 0.1) 0%, white 100%);
}

.reflection {
  position: absolute;
  inset: 0;
  z-index: 9;
  border-radius: var(--input-radius);
  pointer-events: none;
  overflow: hidden;
}
.reflection:before {
  content: "";
  position: absolute;
  width: 500px;
  background-color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(
    to right,
    rgba(244, 221, 255, 0.1) 10%,
    rgba(244, 221, 255, 0.5) 60%,
    rgba(244, 221, 255, 0.3) 60%,
    rgba(244, 221, 255, 0.1) 90%
  );
  top: 0;
  bottom: 0;
  opacity: 0.3;
  transform: translateX(-540px) skew(-40deg);
}
.reflection::after {
  content: "";
  position: absolute;
  left: 68px;
  right: 50%;
  top: 10px;
  bottom: 10px;
  z-index: -1;
  background: linear-gradient(to right, transparent, rgba(2, 2, 2, 0.6));
}
.input:focus-within .reflection:before {
  transition: all 1.2s cubic-bezier(0.5, 0, 0.3, 1);
  transform: translate(440px, 0) skew(40deg) scaleX(0.5);
}

.input input {
  max-width: 100%;
  width: 310px;
  height: 60px;
  padding: 0 67px;
  font-size: 20px;
  background: none;
  border: none;
  color: white;
  position: relative;
  transition: all 0.5s var(--ease-elastic);
  outline: none;
  border-radius: var(--input-radius);
  z-index: 2;
}

.input input::placeholder {
  color: #d6d0d6;
}

.icon {
  display: grid;
  place-items: center;
  position: absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: 42px;
  font-size: 24px;
  color: var(--icon-color);
  z-index: 3;
  pointer-events: none;
}
.icon svg {
  grid-area: 1 / 1;
  transition: opacity 0.5s linear, transform 0.2s ease;
  overflow: visible;
}
.icon svg.loading > g {
  transform-origin: center;
  animation: spinner 1s linear infinite;
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.filter {
  z-index: 3;
  background: none;
  font-size: 27px;
  position: absolute;
  right: 7px;
  top: 7px;
  bottom: 7px;
  width: 46px;
  cursor: pointer;
  color: var(--icon-color);
  border: none;
  overflow: hidden;
  border-radius: calc(var(--input-radius) * 0.9);
}
.filter:before {
  content: "";
  position: absolute;
  width: 200px;
  background-color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(
    to right,
    rgba(244, 221, 255, 0.1) 10%,
    rgba(244, 221, 255, 0.5) 60%,
    rgba(244, 221, 255, 0.3) 60%,
    rgba(244, 221, 255, 0.1) 90%
  );
  top: -40%;
  bottom: -40%;
  left: -220px;
  z-index: 1;
  opacity: 0.3;
  transform: translateX(0) skew(-30deg);
}
.filter:hover:before {
  transition: all 0.8s cubic-bezier(0.5, 0, 0.3, 1);
  transform: translate(320px, 0) skew(30deg);
}
.filter span {
  inset: 0;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: linear-gradient(to bottom, #171725 0%, #0c0a2a 70%, #1b1856 100%);
  background-clip: padding-box;
  border: solid 2px transparent;
  box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, 0.5);
}
.filter,
.filter svg {
  transition: all 0.2s ease;
}
.filter span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: -2px;
  border-radius: inherit;
  background: linear-gradient(to bottom, #333161 0%, #0c0a2a 50%, #3d3a75 100%);
}
.filter:hover {
  filter: brightness(1.3);
}
.filter:hover svg {
  transform: scale(1.07);
}
.filter:focus svg {
  animation: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* Result */

.result {
  position: absolute;
  left: 11px;
  right: 11px;
  top: 100%;
  border-radius: 0 0 var(--input-radius) var(--input-radius);
  transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
  transition-delay: 0.2s;
  background: black;
  background-clip: padding-box;
  border: solid 2px transparent;
  border-top: 0;
  height: 0;
  pointer-events: none;
}
.result::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0 -2px -2px -2px;
  border-radius: inherit;
  background: linear-gradient(105deg, #53285c, rgba(40, 40, 40, 0.2) 5%),
    linear-gradient(260deg, #a38aec, rgba(40, 40, 40, 0.2) 5%);
  transition: opacity 0.4s linear;
  transition-delay: 0.2s;
  opacity: 0;
}
.result-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  gap: 16px;
}
.result-header::before,
.result-header::after {
  content: "";
  position: absolute;
  margin: auto;
  z-index: 1;
}
.result-header::before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    #361f3b 0%,
    #1d1721 10%,
    #1a1722 88%,
    #504474 100%
  );
  transition: all 0.2s ease;
  width: 0%;
}
.result-header::after {
  right: -59px;
  bottom: 69px;
  box-shadow: 0 0 40px 30px var(--glow-r-color);
  background-color: var(--glow-r-color);
  width: 20%;
  height: 25%;
  filter: blur(40px);
  border-radius: 50%;
  transition: all 0.5s linear;
  transition-delay: 0.3s;
  opacity: 0;
}
.result-header > div {
  border-radius: 6px;
  border: 0;
  color: #5e5669;
  background-color: transparent;
  font-size: 13px;
  animation: slideUp 0.4s ease forwards calc(var(--i) * 0.05s);
}
.result-header label {
  padding: 10px 10px 15px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}
.result-header label:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
  height: 10px;
  width: 100%;
  margin: auto;
  border-radius: 7px 7px 0 0;
  background: #37333d;
  transition: transform 0.3s var(--ease-elastic), background 0.3s linear;
}
.result-header label::after {
  content: attr(data-label);
  position: absolute;
  margin: auto;
  text-align: center;
  font-weight: 600;
  opacity: 0;
  color: white;
  filter: blur(6px);
  transform: translateY(-80%);
}
.result-header label span {
  display: block;
}
.result-header label span,
.result-header label::after {
  transition: all 0.4s ease;
}
[type="radio"]:checked ~ label::after {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}
[type="radio"]:checked ~ label span {
  transform: translateY(80%);
  opacity: 0;
  color: white;
  filter: blur(6px);
}
.result-header > div:hover label span {
  color: white;
}
.result [type="radio"] {
  display: none;
}
.result label:hover::before,
.result [type="radio"]:checked ~ label::before {
  transform: translateY(-10px);
}
.result [type="radio"]:checked ~ label::before {
  background: #fff;
  transition: all 0.5s ease;
}

.result-content-header {
  display: flex;
  text-align: center;
  color: white;
  background: linear-gradient(to bottom, #16131a 0%, transparent);
  padding: 12px 6px 7px 6px;
  font-size: 12px;
  animation: slideUp 0.5s ease forwards;
}
.result-content-header > div {
  width: 100%;
  font-weight: 600;
  animation: slideUp 0.4s ease forwards calc(var(--i) * 0.05s);
}
.result-content-header > div span {
  padding-left: 5px;
}

.result-content {
  position: relative;
  opacity: 0;
  display: flex;
  flex-direction: column;
}
.result-content .lava {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: var(--result-item-h);
  border-radius: 8px;
  background-color: rgb(18, 16, 20);
  transition: all 0.3s ease;
  transform: scaleY(0);
  opacity: 0;
  pointer-events: none;
}
.result-content a {
  font-size: 13px;
  display: flex;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 4px 5px;
  margin: 0;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.result-content a > div:last-child {
  color: rgb(255 255 124 / 60%);
}
.result-content a div {
  padding: 3px 5px;
  width: 100%;
  filter: grayscale(1);
}
.result-content a:hover {
  color: white;
}
.result-content a:hover div {
  filter: grayscale(0);
}
.result-content a:hover ~ .lava {
  opacity: 1;
}
.result-content a:nth-child(1):hover ~ .lava {
  transform: translateY(0);
}
.result-content a:nth-child(2):hover ~ .lava {
  transform: translateY(var(--result-item-h));
}
.result-content a:nth-child(3):hover ~ .lava {
  transform: translateY(calc(var(--result-item-h) * 2));
}
.result-content a {
  animation: slideUp 0.4s ease forwards calc(var(--i) * 0.05s);
}

@keyframes slideUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(20px);
    opacity: 0;
    filter: blur(4px);
  }
}
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(5px);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
    filter: blur(0);
  }
  50% {
    opacity: 1;
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Lights */

.glow {
  width: 20%;
  height: 25%;
  border-radius: 50%;
  opacity: 0.7;
  filter: blur(40px);
  position: absolute;
  margin: auto;
  z-index: -1;
  animation: glow 2s cubic-bezier(0.6, 0, 0.6, 1) infinite;
}
@keyframes glow {
  50% {
    width: 30%;
    filter: blur(50px);
  }
}
.input .glow {
  width: 10%;
  height: 0px;
  filter: blur(10px);
  opacity: 0.3;
  animation: none;
}
.glow.left {
  box-shadow: 0 0 40px 30px var(--glow-l-color);
  background-color: var(--glow-l-color);
  left: 0;
  top: 25%;
}
.glow.right {
  box-shadow: 0 0 40px 30px var(--glow-r-color);
  background-color: var(--glow-r-color);
  right: 0;
  bottom: 25%;
}
.glow-layer-bg,
.glow-outline {
  position: absolute;
  border-radius: var(--input-radius);
  overflow: hidden;
}
.glow-layer-bg {
  z-index: -1;
  inset: -2px;
  background: rgb(27, 27, 27);
}
.glow-outline {
  z-index: 9;
  inset: -1px;
  transition: all 0.3s linear;
  opacity: 0;
}
.glow-outline::before {
  position: absolute;
  inset: 0;
  content: "";
  width: 110px;
  height: 420px;
  margin: auto;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(197, 134, 203, 0.5),
    transparent
  );
  animation: spin 3s linear infinite;
  animation-play-state: paused;
}
.input-wrapper:hover .glow-outline::before {
  animation-play-state: running;
}
.input-wrapper:hover .glow-outline {
  opacity: 1;
}
.input-wrapper:focus-within .glow-outline {
  transition-duration: 0.2s;
  opacity: 0;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.glow-layer-1 {
  content: "";
  inset: -2px;
  filter: blur(10px);
  position: absolute;
  border-radius: calc(var(--input-radius) * 1.1);
  background: linear-gradient(152deg, rgb(226 0 255 / 20%), rgb(0 0 0 / 0%) 40%),
    linear-gradient(330deg, rgba(65, 66, 82, 0.9), rgb(0 0 0 / 0%) 40%),
    linear-gradient(40deg, rgba(180, 93, 184, 0.3), rgb(0 0 0 / 0%) 40%),
    linear-gradient(220deg, rgb(81 52 157 / 80%), rgb(0 0 0 / 0%) 40%);
}
.glow-layer-1::before,
.glow-layer-1::after {
  content: "";
  position: absolute;
  width: 30%;
  height: 75%;
  border-radius: 20%;
  box-shadow: 0 0 50px currentColor;
  transition: all 0.5s cubic-bezier(0.6, 0, 0.6, 1);
}
.input-wrapper:focus-within .glow-layer-1::before,
.input-wrapper:focus-within .glow-layer-1::after {
  width: 70%;
  height: 95%;
}
.glow-layer-1::before {
  left: 0;
  top: 0;
  background: linear-gradient(to right, #c44e93 40%, transparent 100%);
}
.glow-layer-1::after {
  right: 0;
  bottom: 0;
  background: linear-gradient(to left, #584ec4 40%, transparent 100%);
}
.glow-layer-2::before,
.glow-layer-2::after,
.glow-layer-3::before,
.glow-layer-3::after {
  content: "";
  position: absolute;
  width: 20%;
  height: 70%;
}
.glow-layer-2::before,
.glow-layer-3::before {
  width: 70%;
  height: 80%;
  border-radius: calc(var(--input-radius) * 1.2) 100% 0 20%;
}
.glow-layer-2::after,
.glow-layer-3::after {
  width: 70%;
  height: 100%;
  border-radius: 0 50% calc(var(--input-radius) * 1.2) 100%;
}
.glow-layer-2 {
  inset: -5px;
  position: absolute;
  filter: blur(3px);
  z-index: 2;
}
.glow-layer-2::before {
  left: 0;
  top: 0;
  background: radial-gradient(at left top, #ff07b0, transparent 70%);
}
.glow-layer-2::after {
  right: 0;
  bottom: 0;
  background: radial-gradient(at right bottom, #7b0ac7, transparent 70%);
}
.glow-layer-3 {
  inset: -3px;
  position: absolute;
  z-index: 2;
}
.glow-layer-3::before,
.glow-layer-3::after {
  filter: blur(1.5px);
}
.glow-layer-3::before {
  left: 0;
  top: 0;
  background: radial-gradient(at left top, white, transparent 70%);
}
.glow-layer-3::after {
  right: 0;
  bottom: 0;
  background: radial-gradient(at right bottom, white, transparent 70%);
}

/* States */

.input input:not(:placeholder-shown),
.input input:focus {
  width: 360px;
}

.input input:not(:placeholder-shown) ~ .reflection::after {
  display: none;
}

.input input:focus:not(:placeholder-shown) ~ .icon .magnifier,
.icon .loading {
  opacity: 0;
}

.input input:focus:not(:placeholder-shown) ~ .icon .loading,
.icon .magnifier {
  opacity: 1;
  transition-delay: 0.3s;
  filter: blur(0px);
  transform: scale(1) translate(none);
}

.input input:focus:not(:placeholder-shown) ~ .icon .magnifier {
  transform: scale(1.2) translate(1.7px, 1.7px);
}

.input input:not(:placeholder-shown) ~ .result {
  height: 193px;
  transition-delay: 0.8s;
  pointer-events: all;
}

.input input:not(:placeholder-shown) ~ .result .result-header::before {
  width: 100%;
  transition-delay: 1.1s;
}

.input input:not(:placeholder-shown) ~ .result .result-header::after {
  opacity: 0.7;
  transition-delay: 0.9s;
}

.input input:not(:placeholder-shown) ~ .result .result-header > div {
  opacity: 0;
  animation: slideDown 1.4s ease forwards calc(1s + var(--i) * 0.05s);
}

.input input:not(:placeholder-shown) ~ .result .result-content-header div {
  opacity: 0;
  animation: slideDown 1.4s ease forwards calc(1.3s + var(--i) * 0.04s);
}

.input input:not(:placeholder-shown) ~ .result .result-content a {
  opacity: 0;
  animation: slideDown 1.4s ease forwards calc(1.4s + var(--i) * 0.1s);
}

.input input:not(:placeholder-shown) ~ .result .result-content-header {
  opacity: 0;
  animation: fadeIn 1.4s ease forwards 1s;
}

.input input:not(:placeholder-shown) ~ .result::before {
  transition-delay: 0.8s;
  opacity: 1;
}

.input input:not(:placeholder-shown) ~ .result .result-content {
  animation: visibility 1.4s ease forwards;
}

@keyframes visibility {
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

</style>
    

================================================
FILE: Inputs/marcos700x_hot-dragonfly-100.html
================================================
<div class="containerInput">
    <input placeholder="Type for validate" type="text">
</div>
<style>
/* From Uiverse.io by marcos700x - Tags: input */
.containerInput {
  background-color: #000;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0 0 4px 0;
  z-index: 1;
  font-size: 15px;
}

.containerInput::before {
  content: '';
  width: 110%;
  aspect-ratio: 1;
  position: absolute;
  inset: 0 0 0 0;
  margin: auto;
  animation: rotate6234 2.5s ease-in-out infinite;
  z-index: -1;
  background-image: conic-gradient(from 0deg at 50% 50%, #073AFF00 0%, #FF0000FF 25%, #073AFF00 25%);
}

.containerInput > input {
  width: 210px;
  height: 50px;
  font-size: inherit;
  color: #fff;
  border: none;
  padding: 12px;
  background-color: #0a0a0a;
  outline: 5px solid #0a0a0a;
}

.containerInput > input:focus {
  outline: none;
}

.containerInput > input:not(:placeholder-shown) {
  outline: none;
}

.containerInput > input:not(:placeholder-shown):valid {
  outline: 4px solid rgb(0, 255, 183);
  border-radius: 0;
}

@keyframes rotate6234 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: Inputs/mowalee_wet-bobcat-17.html
================================================
<!-- From Uiverse.io by mowalee  - Tags: simple, input, tailwind, tailwindcss -->
<div class="flex min-h-screen min-w-full justify-center items-center">
  <div class="w-[250px] relative">
    <input
      class="peer w-full p-4 pt-6 pl-10 pr-4 bg-inherit border-2 rounded-md outline-none transition disabled:opacity-70 disabled:cursor-not-allowed border-gray-500 focus:border-purple-500"
      type="text"
      placeholder=""
      name="username"
      id="username"
    />
    <label
      class="absolute text-gray-500 text-base duration-150 transform -translate-y-3 top-5 z-10 origin-[0] left-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 peer-focus:text-purple-500"
      for="username"
    >
      Name
    </label>
    <svg
      class="absolute top-6 left-4"
      fill=""
      width="18"
      height="18"
      viewBox="0 0 344 384"
    >
      <path
        d="M170.5 192q-35.5 0-60.5-25t-25-60.5T110 46t60.5-25T231 46t25 60.5t-25 60.5t-60.5 25zm0 43q31.5 0 69.5 9t69.5 29.5T341 320v43H0v-43q0-26 31.5-46.5T101 244t69.5-9z"
        fill="#6b7280"
      ></path>
    </svg>
    <label class="pt-1 block text-gray-500 text-sm"> Text helper </label>
  </div>
</div>


    

================================================
FILE: Inputs/mrhyddenn_fluffy-bird-66.html
================================================
<div class="form__group field">
    <input type="input" class="form__field" placeholder="Name" required="">
    <label for="name" class="form__label">Name</label>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: material design, input */
.form__group {
  position: relative;
  padding: 20px 0 0;
  width: 100%;
  max-width: 180px;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: none;
  border-bottom: 2px solid #9b9b9b;
  outline: 0;
  font-size: 17px;
  color: #fff;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}

.form__field::placeholder {
  color: transparent;
}

.form__field:placeholder-shown ~ .form__label {
  font-size: 17px;
  cursor: text;
  top: 20px;
}

.form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 17px;
  color: #9b9b9b;
  pointer-events: none;
}

.form__field:focus {
  padding-bottom: 6px;
  font-weight: 700;
  border-width: 3px;
  border-image: linear-gradient(to right, #116399, #38caef);
  border-image-slice: 1;
}

.form__field:focus ~ .form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 17px;
  color: #38caef;
  font-weight: 700;
}

/* reset input */
.form__field:required, .form__field:invalid {
  box-shadow: none;
}
</style>


================================================
FILE: Inputs/naelawadallah_angry-dolphin-56.html
================================================
<div class="search-header">
  <input placeholder="Search" class="search-header__input" type="text" />
  <button class="search-header__button">
    <svg
      fill="none"
      viewBox="0 0 18 18"
      height="18"
      width="18"
      class="search-header__icon"
    >
      <path
        fill="#3A3A3A"
        d="M7.132 0C3.197 0 0 3.124 0 6.97c0 3.844 3.197 6.969 7.132 6.969 1.557 0 2.995-.49 4.169-1.32L16.82 18 18 16.847l-5.454-5.342a6.846 6.846 0 0 0 1.718-4.536C14.264 3.124 11.067 0 7.132 0zm0 .82c3.48 0 6.293 2.748 6.293 6.15 0 3.4-2.813 6.149-6.293 6.149S.839 10.37.839 6.969C.839 3.568 3.651.82 7.132.82z"
      ></path>
    </svg>
  </button>
</div>

<style>
/* From Uiverse.io by naelawadallah  - Tags: input, dark, search */
.search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.search-header__input {
  font-family: inherit;
  font-size: 16px;
  background-color: #0a0a0a;
  border: solid 0.5px #525252;
  color: #646464;
  padding: 0.7rem 1rem;
  border-radius: 25px;
  width: 240px;
  height: 48px;
  transition: all ease-in-out 0.5s;
  margin-right: -2rem;
  opacity: 1;
  text-align: center;
}

.search-header__input:hover,
.search-header__input:focus {
  box-shadow: 0 0 1em #00000013;
}

.search-header__input:focus {
  outline: none;
  background-color: #0a0a0aad;
}

.search-header__input::-webkit-input-placeholder {
  font-weight: 100;
  color: #3a3a3a;
}

.search-header__input:focus + .search-header__button {
  background-color: transparent;
}

.search-header__button {
  border: none;
  background-color: transparent;
  margin-top: 0.1em;
}

.search-header__button:hover {
  cursor: pointer;
}

.search-header__icon {
  height: 1.3em;
  width: 1.3em;
  fill: #3a3a3a;
}

</style>
    

================================================
FILE: Inputs/omar49511_dangerous-newt-42.html
================================================
<button class="container-btn-file">
  <svg
    fill="#fff"
    xmlns="http://www.w3.org/2000/svg"
    width="20"
    height="20"
    viewBox="0 0 50 50"
  >
    <path
      d="M28.8125 .03125L.8125 5.34375C.339844 
    5.433594 0 5.863281 0 6.34375L0 43.65625C0 
    44.136719 .339844 44.566406 .8125 44.65625L28.8125 
    49.96875C28.875 49.980469 28.9375 50 29 50C29.230469 
    50 29.445313 49.929688 29.625 49.78125C29.855469 49.589844 
    30 49.296875 30 49L30 1C30 .703125 29.855469 .410156 29.625 
    .21875C29.394531 .0273438 29.105469 -.0234375 28.8125 .03125ZM32 
    6L32 13L34 13L34 15L32 15L32 20L34 20L34 22L32 22L32 27L34 27L34 
    29L32 29L32 35L34 35L34 37L32 37L32 44L47 44C48.101563 44 49 
    43.101563 49 42L49 8C49 6.898438 48.101563 6 47 6ZM36 13L44 
    13L44 15L36 15ZM6.6875 15.6875L11.8125 15.6875L14.5 21.28125C14.710938 
    21.722656 14.898438 22.265625 15.0625 22.875L15.09375 22.875C15.199219 
    22.511719 15.402344 21.941406 15.6875 21.21875L18.65625 15.6875L23.34375 
    15.6875L17.75 24.9375L23.5 34.375L18.53125 34.375L15.28125 
    28.28125C15.160156 28.054688 15.035156 27.636719 14.90625 
    27.03125L14.875 27.03125C14.8125 27.316406 14.664063 27.761719 
    14.4375 28.34375L11.1875 34.375L6.1875 34.375L12.15625 25.03125ZM36 
    20L44 20L44 22L36 22ZM36 27L44 27L44 29L36 29ZM36 35L44 35L44 37L36 37Z"
    ></path>
  </svg>
  Upload File
  <input class="file" name="text" type="file" />
</button>

<style>
/* From Uiverse.io by omar49511  - Tags: hover, input, upload, excel */
.container-btn-file {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  background-color: #307750;
  color: #fff;
  border-style: none;
  padding: 1em 2em;
  border-radius: 0.5em;
  overflow: hidden;
  z-index: 1;
  box-shadow: 4px 8px 10px -3px rgba(0, 0, 0, 0.356);
  transition: all 250ms;
}
.container-btn-file input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.container-btn-file > svg {
  margin-right: 1em;
}
.container-btn-file::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0;
  border-radius: 0.5em;
  background-color: #469b61;
  z-index: -1;
  transition: all 350ms;
}
.container-btn-file:hover::before {
  width: 100%;
}

</style>
    

================================================
FILE: Inputs/omriluz_good-parrot-26.html
================================================
<!-- From Uiverse.io by omriluz  - Tags: simple, action, input, copy -->
<div class="flex shadow-sm">
  <input
    value="Copy Me"
    readonly=""
    class="py-1 indent-2 rounded-s-lg focus:outline-none"
    name="text"
    type="text"
  />
  <button
    class="py-1 rounded-e-lg text-white bg-green-300 flex justify-center items-center w-10 h-10"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      class="pointer-events-none"
    >
      <rect width="24" height="24"></rect>
      <rect
        x="4"
        y="8"
        width="12"
        height="12"
        rx="1"
        stroke="#000000"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></rect>
      <path
        d="M8 6V5C8 4.44772 8.44772 4 9 4H19C19.5523 4 20 4.44772 20 5V15C20 15.5523 19.5523 16 19 16H18"
        stroke="#000000"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-dasharray="2 2"
      ></path>
    </svg>
  </button>
</div>


    

================================================
FILE: Inputs/ozgeozkaraa01_big-sloth-59.html
================================================
<input type="text" name="text" class="input" placeholder="Type...">
<style>
/* From Uiverse.io by ozgeozkaraa01 - Tags: input */
.input {
  font-weight: 500;
  font-size: 14px;
  height: 40px;
  border-radius: 10px;
  padding-left: 10px;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  outline: none;
}

.input:focus {
  border-bottom: 1px solid #6941c6;
  -webkit-transition: 0.1s;
  transition: 0.5s;
}
</style>


================================================
FILE: Inputs/ozgeozkaraa01_sharp-rattlesnake-74.html
================================================
<div class="group">
  <svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon">
  <path d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
<input class="input" type="password" placeholder="password">
</div>
<style>
/* From Uiverse.io by ozgeozkaraa01 - Tags: input, input effect , hover input  */
.group {
  display: flex;
  line-height: 30px;
  align-items: center;
  position: relative;
  max-width: 200px;
}

.input {
  width: 100%;
  height: 45px;
  line-height: 30px;
  padding: 0 5rem;
  padding-left: 3rem;
  border: 2px solid transparent;
  border-radius: 10px;
  outline: none;
  background-color: #f8fafc;
  color: #0d0c22;
  transition: .5s ease;
}

.input::placeholder {
  color: #94a3b8;
}

.input:focus, input:hover {
  outline: none;
  border-color: rgba(129, 140, 248);
  background-color: #fff;
  box-shadow: 0 0 0 5px rgb(129 140 248 / 30%);
}

.icon {
  position: absolute;
  left: 1rem;
  fill: none;
  width: 1rem;
  height: 1rem;
}
</style>


================================================
FILE: Inputs/pablofernz_yellow-fox-100.html
================================================
<div class="formContainer">
  <input placeholder="example@email.com" type="text" />
  <label>Email</label>
</div>

<style>
/* From Uiverse.io by pablofernz  - Tags: email, form, input, dark, darkmode, dark mode, example */
.formContainer {
  height: 100%;
  /* change the width here if you want */
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  /* explanation: Reverse make the label appear visually above the input, when in the HTML it is below so that the "+" selector can work  */
  gap: 10px;
  position: relative;
}

/* This selects the label inside "formContainer*/
.formContainer > label {
  font-family: Basier Square;
  font-weight: 900;
  font-size: 15px;
  color: rgb(99, 99, 99);
  text-align: start;
  align-self: flex-start;
  transition: all 0.3s ease;
}

/* This selects the input inside "formContainer*/
.formContainer > input {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  font-weight: 900px;
  background-color: transparent;
  color: rgb(99, 99, 99);
  border: 2px solid rgb(85, 85, 85);
  font-size: 15px;
  font-family: Basier Square;
  padding-left: 10px;
  transition: all 0.3s ease;
  z-index: 5;
}

/* If you give the input a class, this would be equal to: 
.input:focus */
.formContainer > input:focus {
  color: rgb(197, 197, 197);
  outline: none;
  border: 2px solid rgb(255, 255, 255);
  box-shadow:
    0px 0px 10px rgba(255, 255, 255, 0.145),
    0px 0px 5px rgba(255, 255, 255, 0.145) inset;
}

/* This would be equal to: .input:focus+.label */
.formContainer > input:focus + label {
  color: rgb(197, 197, 197);
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.145);
}

/* This would be equal to: .input::placeholder */
.formContainer > input::placeholder {
  color: rgb(85, 85, 85);
  transition: all 0.5s ease;
}

/* This would be equal to: .input:focus::placeholder */
.formContainer > input:focus::placeholder {
  color: rgb(150, 150, 150);
}

/* <thx/> */

</style>
    

================================================
FILE: Inputs/roroland_stale-bobcat-33.html
================================================
<label for="myInput" class="label">
  <span class="label-title">My nice input</span>
  <input id="myInput" class="input" name="text" placeholder="Type something..." type="text">
</label>
<style>
/* From Uiverse.io by roroland - Tags: form, input, rounded, fluid, animated */
.label {
  --border: rgba(66, 66, 66, 0.733);
  --bgLabel: rgba(120,120,120,1);
  --bgInput: rgba(255,255,255,1);
  --color-light: rgb(98, 0, 255);
  --color-light-a: rgb(133, 123, 150);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content min-content;
  background: var(--bgLabel);
  position: relative;
  font-size: .65rem;
  transition: all .3s ease-out;
}

.label > .label-title {
  border: 1px solid var(--color-light);
  color: var(--color-light);
  box-shadow: 0 2px 2px rgba(120,120,120,.25);
  padding: .25em .5em;
  background-color: var(--bgInput);
  grid-column: 1/span 1;
  grid-row: 1/span 1;
  position: relative;
  border-radius: 4px;
  translate: 10px -10px;
  transition: all .5s ease-out .5s;
  z-index: 10;
}

.label:focus .input,
.label:focus-within .input {
  background-color: var(--bgInput);
  padding: 1em;
  color: var(--color-light);
  border: 2px solid var(--color-light);
  outline: 2px solid var(--color-light);
  outline-offset: -2px;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(98, 0, 255, .25), 0 -5px 20px rgba(98, 0, 255,.1);
  scale: 1.15;
  transition: all .5s cubic-bezier(0,1.46,1,1.62) .3s;
}

.label:focus,
.label:focus-within .label-title {
  translate: 10px -20px;
  border-radius: 4px 4px 0 0;
  z-index: 0;
  transition: all .3s cubic-bezier(0,1.46,1,1.62);
}

.input {
  appearance: none;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid var(--color-light);
  border-left: 2px solid transparent;
  background-color: var(--bgInput);
  caret-color: var(--color-light);
  min-width: 200px;
  padding: 1.25em 1em .25em;
  outline: 0px solid var(--color-light);
  grid-column: 1/-1;
  grid-row: 1 / -1;
  position: relative;
  transition: all .3s cubic-bezier(.5,.6,.5,.62);
  z-index: 0;
}

.input, 
.input::placeholder {
  color: var(--color-light-a);
}
</style>


================================================
FILE: Inputs/rricol_moody-cow-18.html
================================================
<div class="input-box">
  <label class="input-label">Email</label>
  <input placeholder="user@mail.com" class="input" name="email" type="email">
  <span class="input-helper">enter a valid email</span>
</div>
<style>
/* From Uiverse.io by rricol - Tags: email, input */
.input {
  position: relative;
  max-width: 190px;
  border: none;
  box-shadow: 0px 1.5px 0px 0px #858585;
  padding: .5rem;
  transition: all 200ms ease-in-out;
  opacity: .8;
}

.input-box {
  display: flex;
  flex-direction: column;
}

.input-label {
  font-size: .625rem;
  font-weight: bold;
  color: #858585;
  margin-bottom: 4px;
  margin-left: 1px;
}

.input-helper {
  color: #858585;
  font-size: .5rem;
  margin-top: 6px;
  margin-left: 1px;
  visibility: hidden;
  transform: translateY(-.5rem);
  transition: all 100ms linear;
  z-index: -1;
}

.input::placeholder {
  color: rgb(145, 145, 145);
  font-size: .75rem;
}

.input::after {
  content: attr(placeholder);
  position: absolute;
  color: #161616;
  top: 0;
  left: 0;
}

.input:focus {
  border: none;
  box-shadow: 0px 1.5px 0px 0px #72E985;
  outline: none;
}

.input:focus + .input-helper {
  visibility: visible;
  transform: translateY(0rem);
}

.input:focus::placeholder {
  visibility: hidden;
}
</style>


================================================
FILE: Inputs/sabbircoder07_gentle-yak-43.html
================================================
<form action="#" class="search">
      <button class="search__button">
        <div class="search__icon">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
            <title>magnifying-glass</title>
            <path d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
          </svg>
        </div>
      </button>
      <input type="text" class="search__input" placeholder="Search...">
      <button class="mic__button">
        <div class="mic__icon">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 83.44 122.88" style="enable-background: new 0 0 83.44 122.88" xml:space="preserve">
            <g>
              <path d="M45.04,95.45v24.11c0,1.83-1.49,3.32-3.32,3.32c-1.83,0-3.32-1.49-3.32-3.32V95.45c-10.16-0.81-19.32-5.3-26.14-12.12 C4.69,75.77,0,65.34,0,53.87c0-1.83,1.49-3.32,3.32-3.32s3.32,1.49,3.32,3.32c0,9.64,3.95,18.41,10.31,24.77 c6.36,6.36,15.13,10.31,24.77,10.31h0c9.64,0,18.41-3.95,24.77-10.31c6.36-6.36,10.31-15.13,10.31-24.77 c0-1.83,1.49-3.32,3.32-3.32s3.32,1.49,3.32,3.32c0,11.48-4.69,21.91-12.25,29.47C64.36,90.16,55.2,94.64,45.04,95.45L45.04,95.45z M41.94,0c6.38,0,12.18,2.61,16.38,6.81c4.2,4.2,6.81,10,6.81,16.38v30c0,6.38-2.61,12.18-6.81,16.38c-4.2,4.2-10,6.81-16.38,6.81 s-12.18-2.61-16.38-6.81c-4.2-4.2-6.81-10-6.81-16.38v-30c0-6.38,2.61-12.18,6.81-16.38C29.76,2.61,35.56,0,41.94,0L41.94,0z M53.62,11.51c-3-3-7.14-4.86-11.68-4.86c-4.55,0-8.68,1.86-11.68,4.86c-3,3-4.86,7.14-4.86,11.68v30c0,4.55,1.86,8.68,4.86,11.68 c3,3,7.14,4.86,11.68,4.86c4.55,0,8.68-1.86,11.68-4.86c3-3,4.86-7.14,4.86-11.68v-30C58.49,18.64,56.62,14.51,53.62,11.51 L53.62,11.51z"></path>
            </g>
          </svg>
        </div>
      </button>
      <button class="picture__button">
        <div class="picture__icon">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 101.28" style="enable-background: new 0 0 122.88 101.28" xml:space="preserve">
            <g>
              <path d="M28.94,12.53V4.77c0-1.31,0.54-2.51,1.4-3.37C31.2,0.54,32.39,0,33.7,0h55.47c1.31,0,2.51,0.54,3.37,1.4 c0.86,0.86,1.4,2.06,1.4,3.37v7.77h25.23c1.02,0,1.95,0.42,2.62,1.09c0.67,0.67,1.09,1.6,1.09,2.62v15.73v50.94v14.67 c0,1.02-0.42,1.95-1.09,2.62c-0.67,0.67-1.6,1.09-2.62,1.09H3.7c-1.02,0-1.95-0.42-2.62-1.09C0.42,99.52,0,98.6,0,97.58V82.91 V31.97V16.24c0-1.02,0.42-1.95,1.09-2.62c0.67-0.67,1.6-1.09,2.62-1.09H28.94L28.94,12.53z M61.9,32.86 c12.98,0,23.5,10.52,23.5,23.5c0,1.82-0.21,3.59-0.6,5.29c-0.95,4.68-3.26,8.86-6.51,12.11c-4.31,4.31-10.27,6.98-16.85,6.98 c-6.58,0-12.54-2.67-16.85-6.98c-4.31-4.31-6.98-10.27-6.98-16.85c0-6.58,2.67-12.54,6.98-16.85c2.37-2.37,5.24-4.24,8.43-5.45 C55.76,33.48,58.76,32.86,61.9,32.86L61.9,32.86z M31.54,4.77v7.77h59.8V4.77c0-0.59-0.24-1.14-0.64-1.53 c-0.39-0.39-0.93-0.64-1.53-0.64H33.7c-0.59,0-1.14,0.24-1.53,0.64C31.78,3.63,31.54,4.17,31.54,4.77L31.54,4.77z M2.6,81.61h36.3 c-0.38-0.34-0.75-0.7-1.11-1.06C31.75,74.5,28,66.14,28,56.91c0-9.23,3.74-17.58,9.79-23.63H2.6V81.61L2.6,81.61z M42.14,84.21H2.6 v13.37c0,0.3,0.12,0.58,0.32,0.77c0.2,0.2,0.47,0.32,0.78,0.32h115.48c0.3,0,0.58-0.12,0.77-0.32c0.2-0.2,0.32-0.47,0.32-0.77 V84.21H80.74c-5.45,3.86-12.11,6.13-19.3,6.13C54.25,90.34,47.59,88.07,42.14,84.21L42.14,84.21z M43.26,81.81 c0.04,0.03,0.08,0.05,0.12,0.08c5.08,3.68,11.32,5.84,18.06,5.84s12.99-2.17,18.06-5.84c0.04-0.03,0.08-0.06,0.12-0.08 c1.29-0.94,2.5-1.98,3.62-3.1c5.58-5.58,9.03-13.29,9.03-21.8c0-8.51-3.45-16.22-9.03-21.8c-0.73-0.73-1.5-1.43-2.31-2.09 c-0.03-0.02-0.06-0.05-0.09-0.07c-5.3-4.3-12.05-6.87-19.4-6.87c-7.35,0-14.1,2.57-19.4,6.87c-0.03,0.03-0.06,0.05-0.09,0.07 c-0.8,0.66-1.58,1.35-2.31,2.09c-5.58,5.58-9.03,13.29-9.03,21.8c0,8.51,3.45,16.22,9.03,21.8C40.76,79.83,41.97,80.87,43.26,81.81 L43.26,81.81z M83.98,81.61h36.3V33.27H85.09c6.05,6.05,9.79,14.41,9.79,23.63c0,9.23-3.74,17.59-9.8,23.64 C84.72,80.91,84.35,81.26,83.98,81.61L83.98,81.61z M2.6,30.67h38.11c5.7-4.51,12.9-7.2,20.73-7.2s15.03,2.69,20.73,7.2h38.11 V16.24c0-0.3-0.12-0.58-0.32-0.77c-0.2-0.2-0.47-0.32-0.77-0.32H3.7c-0.3,0-0.58,0.12-0.78,0.32c-0.2,0.2-0.32,0.47-0.32,0.77 V30.67L2.6,30.67z"></path>
            </g>
          </svg>
        </div>
      </button>
    </form>
<style>
/* From Uiverse.io by sabbircoder07  - Tags: input, search bar, css3 */
.search {
  flex: 0 0 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search__input {
  font-family: "Open Sans", sans-serif;
  font-size: 17px;
  color: #333333;
  background-color: #f4f2f2;
  border: none;
  padding: 14px 72px 14px 42px;
  border-radius: 1000px;
  width: 94%;
  margin-left: -34px;
  margin-right: -66px;
  transition: all 0.2s;
}

.search__input:focus {
  outline: none;
  width: 100%;
  background-color: #f0eeee;
}

.search__input::-webkit-input-placeholder {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 500;
  color: #999999;
}

.search__button {
  border: none;
  background-color: transparent;
  z-index: 999;
  cursor: pointer;
}

.search__button:focus {
  outline: none;
}

.search__button:active {
  transform: translateY(2px);
}

.search__icon {
  height: 20px;
  width: 20px;
  fill: #999999;
}

.mic__button {
  border: none;
  background-color: transparent;
  margin-right: 10px;
  cursor: pointer;
}

.mic__button:focus {
  outline: none;
}

.mic__button:active {
  transform: translateY(2px);
}

.mic__icon {
  height: 28px;
  width: 20px;
  fill: #999999;
}

.mic__icon:hover {
  fill: #dd5e89;
}

.picture__button {
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.picture__button:focus {
  outline: none;
}

.picture__button:active {
  transform: translateY(2px);
}

.picture__icon {
  height: 16px;
  width: 20px;
  fill: #999999;
}

.picture__icon:hover {
  fill: #dd5e89;
}

</style>
    

================================================
FILE: Inputs/sabbircoder07_tough-cat-68.html
================================================
<input type="text" id="email-id" name="text" class="input__email" placeholder="Email Address">
<style>
/* From Uiverse.io by sabbircoder07 - Tags: email, input, box-shadow */
.input__email {
  width: 100%;
  padding: 10px 18px;
  font-size: 14px;
  font-family: inherit;
  box-shadow: 0 0 0 1px #ffe3e3;
  border: none;
  border-radius: 20px;
  background-color: #fff5f5;
}

.input__email::placeholder {
  color: #ce9797;
  font-size: 12px;
}

.input__email:focus {
  outline: none;
  box-shadow: 0 0 0 1px #ffe3e3;
  border: none;
}

</style>


================================================
FILE: Inputs/saidbl1_gentle-dragon-92.html
================================================
<div class="inputBox">
  <input required="" type="text">
  <span>First name</span>
</div>
<style>
/* From Uiverse.io by saidbl1 - Tags: input, focus, floating */
.inputBox {
  position: relative;
}

.inputBox input {
  padding: 15px 20px;
  outline: none;
  background: transparent;
  border-radius: 5px;
  color: #fff;
  border: 1px solid#ee8456;
  font-size: 1em;
}

.inputBox span {
  position: absolute;
  left: 0;
  padding: 15px 20px;
  pointer-events: none;
  font-size: 1em;
  transition: 0.4s cubic-bezier(0.05, 0.81, 0, 0.93);
  color: #ee8456;
  letter-spacing: 0.1em;
}

.inputBox input:focus ~ span,
.inputBox input:valid ~ span {
  font-size: 0.7em;
  transform: translateX(14px) translateY(-7.5px);
  padding: 0 5px;
  border-radius: 2px;
  background: #212121;
  letter-spacing: 0em;
  border: 1px solid #ee8456;
}


</style>


================================================
FILE: Inputs/saidbl1_little-eagle-84.html
================================================
<input class="input" name="text" type="text" placeholder="Full Name">
<style>
/* From Uiverse.io by saidbl1 - Tags: input, modern, animated, clean */
.input {
  height: 40px;
  border-radius: 8px;
  border: 2px solid hsl(236, 92%, 66%);
  outline: none;
  transition: 200ms ease-in;
  padding-left: 1rem;
}

.input:focus {
  border-bottom: 4px solid hsl(236, 92%, 66%);
  padding-top: 2px;
}

.input::placeholder {
  color: hsl(236, 92%, 66%);
  opacity: 0.5;
}
</style>


================================================
FILE: Inputs/saidbl1_polite-dingo-63.html
================================================
<div class="inputBox">
  <input placeholder="Write here..." type="text" required="">
  <span>First name :</span>
</div>
<style>
/* From Uiverse.io by saidbl1 - Tags: input, clean, nice */
.inputBox {
  position: relative;
}

.inputBox input {
  padding: 15px 20px;
  outline: none;
  background: transparent;
  border-radius: 5px;
  color: #212121;
  border: 1px solid#212121;
  font-size: 1em;
}

.inputBox span {
  position: absolute;
  left: 0;
  font-size: 0.7em;
  transform: translateX(14px) translateY(-7.5px);
  padding: 0 6px 1px 5px;
  border-radius: 2px;
  background: #e8e8e8;
  letter-spacing: 1px;
  border: 1px solid #212121;
  color: #212121;
}
</style>


================================================
FILE: Inputs/satisshTechie_sharp-hound-14.html
================================================
<div class="PB-range-slider-div">
<input type="range" min="0" max="100" value="50" class="PB-range-slider" id="myRange">
<p class="PB-range-slidervalue">50px</p>
</div>
<style>
/* From Uiverse.io by satisshTechie - Tags: slider, progress bar, input, range */
.PB-range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 5px;
  background: #D5DBE1;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.PB-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #000000;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.PB-range-slider::-webkit-slider-thumb:hover {
  box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.16);
  transition: 0.3s ease-in-out;
}

.PB-range-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #000000;
  cursor: pointer;
}

.PB-range-slider-div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #C6CACE;
  box-shadow: 0px 1px 2px 0px #1F1E241F;
}

.PB-range-slidervalue {
  font-weight: 600;
}
</style>


================================================
FILE: Inputs/satyamchaudharydev_fast-dodo-69.html
================================================
<div class="form">
  <input class="input" placeholder="Type your text" required="" type="text">
  <span class="input-border"></span>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: input */
.form {
 --width-of-input: 200px;
 --border-height: 1px;
 --border-before-color: rgba(221, 221, 221, 0.39);
 --border-after-color: #5891ff;
 --input-hovered-color: #4985e01f;
 position: relative;
 width: var(--width-of-input);
}
/* styling of Input */
.input {
 color: #fff;
 font-size: 0.9rem;
 background-color: transparent;
 width: 100%;
 box-sizing: border-box;
 padding-inline: 0.5em;
 padding-block: 0.7em;
 border: none;
 border-bottom: var(--border-height) solid var(--border-before-color);
}
/* styling of animated border */
.input-border {
 position: absolute;
 background: var(--border-after-color);
 width: 0%;
 height: 2px;
 bottom: 0;
 left: 0;
 transition: 0.3s;
}
/* Hover on Input */
input:hover {
 background: var(--input-hovered-color);
}

input:focus {
 outline: none;
}
/* here is code of animated border */
input:focus ~ .input-border {
 width: 100%;
}
/* === if you want to do animated border on typing === */
/* remove input:focus code and uncomment below code */
/* input:valid ~ .input-border{
  width: 100%;
} */
</style>


================================================
FILE: Inputs/satyamchaudharydev_plastic-bobcat-37.html
================================================
  <form class="form">
      <button>
          <svg width="17" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="search">
              <path d="M7.667 12.667A5.333 5.333 0 107.667 2a5.333 5.333 0 000 10.667zM14.334 14l-2.9-2.9" stroke="currentColor" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
      </button>
      <input class="input" placeholder="Type your text" required="" type="text">
      <button class="reset" type="reset">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
      </button>
  </form>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: input */
/* From uiverse.io by @satyamchaudharydev */
/* removing default style of button */

.form button {
  border: none;
  background: none;
  color: #8b8ba7;
}
/* styling of whole input container */
.form {
  --timing: 0.3s;
  --width-of-input: 200px;
  --height-of-input: 40px;
  --border-height: 2px;
  --input-bg: #fff;
  --border-color: #2f2ee9;
  --border-radius: 30px;
  --after-border-radius: 1px;
  position: relative;
  width: var(--width-of-input);
  height: var(--height-of-input);
  display: flex;
  align-items: center;
  padding-inline: 0.8em;
  border-radius: var(--border-radius);
  transition: border-radius 0.5s ease;
  background: var(--input-bg,#fff);
}
/* styling of Input */
.input {
  font-size: 0.9rem;
  background-color: transparent;
  width: 100%;
  height: 100%;
  padding-inline: 0.5em;
  padding-block: 0.7em;
  border: none;
}
/* styling of animated border */
.form:before {
  content: "";
  position: absolute;
  background: var(--border-color);
  transform: scaleX(0);
  transform-origin: center;
  width: 100%;
  height: var(--border-height);
  left: 0;
  bottom: 0;
  border-radius: 1px;
  transition: transform var(--timing) ease;
}
/* Hover on Input */
.form:focus-within {
  border-radius: var(--after-border-radius);
}

input:focus {
  outline: none;
}
/* here is code of animated border */
.form:focus-within:before {
  transform: scale(1);
}
/* styling of close button */
/* == you can click the close button to remove text == */
.reset {
  border: none;
  background: none;
  opacity: 0;
  visibility: hidden;
}
/* close button shown when typing */
input:not(:placeholder-shown) ~ .reset {
  opacity: 1;
  visibility: visible;
}
/* sizing svg icons */
.form svg {
  width: 17px;
  margin-top: 3px;
}
</style>


================================================
FILE: Inputs/satyamchaudharydev_slippery-parrot-22.html
================================================
<form class="form">
    <label for="search">
        <input required="" autocomplete="off" placeholder="search your chats" id="search" type="text">
        <div class="icon">
            <svg stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="swap-on">
                <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linejoin="round" stroke-linecap="round"></path>
            </svg>
            <svg stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="swap-off">
                <path d="M10 19l-7-7m0 0l7-7m-7 7h18" stroke-linejoin="round" stroke-linecap="round"></path>
            </svg>
        </div>
        <button type="reset" class="close-btn">
            <svg viewBox="0 0 20 20" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg">
                <path clip-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" fill-rule="evenodd"></path>
            </svg>
        </button>
    </label>
</form>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: input, search */
/* From uiverse.io by @satyamchaudharydev */
/* this button is inspired by -- whatsapp input */
/* == type to see fully interactive and click the close buttom to remove the text  == */

.form {
  --input-bg: #FFf;
 /*  background of input */
  --padding: 1.5em;
  --rotate: 80deg;
 /*  rotation degree of input*/
  --gap: 2em;
  /*  gap of items in input */
  --icon-change-color: #15A986;
 /*  when rotating changed icon color */
  --height: 40px;
 /*  height */
  width: 200px;
  padding-inline-end: 1em;
 /*  change this for padding in the end of input */
  background: var(--input-bg);
  position: relative;
  border-radius: 4px;
}

.form label {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--height);
}

.form input {
  width: 100%;
  padding-inline-start: calc(var(--padding) + var(--gap));
  outline: none;
  background: none;
  border: 0;
}
/* style for both icons -- search,close */
.form svg {
  /* display: block; */
  color: #111;
  transition: 0.3s cubic-bezier(.4,0,.2,1);
  position: absolute;
  height: 15px;
}
/* search icon */
.icon {
  position: absolute;
  left: var(--padding);
  transition: 0.3s cubic-bezier(.4,0,.2,1);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* arrow-icon*/
.swap-off {
  transform: rotate(-80deg);
  opacity: 0;
  visibility: hidden;
}
/* close button */
.close-btn {
  /* removing default bg of button */
  background: none;
  border: none;
  right: calc(var(--padding) - var(--gap));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  padding: 0.1em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: 0.3s;
  opacity: 0;
  transform: scale(0);
  visibility: hidden;
}

.form input:focus ~ .icon {
  transform: rotate(var(--rotate)) scale(1.3);
}

.form input:focus ~ .icon .swap-off {
  opacity: 1;
  transform: rotate(-80deg);
  visibility: visible;
  color: var(--icon-change-color);
}

.form input:focus ~ .icon .swap-on {
  opacity: 0;
  visibility: visible;
}

.form input:valid ~ .icon {
  transform: scale(1.3) rotate(var(--rotate))
}

.form input:valid ~ .icon .swap-off {
  opacity: 1;
  visibility: visible;
  color: var(--icon-change-color);
}

.form input:valid ~ .icon .swap-on {
  opacity: 0;
  visibility: visible;
}

.form input:valid ~ .close-btn {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: 0s;
}

</style>


================================================
FILE: Inputs/satyamchaudharydev_tasty-dingo-5.html
================================================
<form class="form">
    <label for="search">
        <input class="input" type="text" required="" placeholder="Search twitter" id="search">
        <div class="fancy-bg"></div>
        <div class="search">
            <svg viewBox="0 0 24 24" aria-hidden="true" class="r-14j79pv r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-4wgw6l r-f727ji r-bnwqim r-1plcrui r-lrvibr">
                <g>
                    <path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path>
                </g>
            </svg>
        </div>
        <button class="close-btn" type="reset">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
        </button>
    </label>
</form>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: input, search */
/* this is a recreation of twitter search in css */
.form {
  --input-text-color: #fff;
  --input-bg-color: #283542;
  --focus-input-bg-color: transparent;
  --text-color: #949faa;
  --active-color: #1b9bee;
  --width-of-input: 200px;
  --inline-padding-of-input: 1.2em;
  --gap: 0.9rem;
}
/* form style */
.form {
  font-size: 0.9rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: var(--width-of-input);
  position: relative;
  isolation: isolate;
}
/* a fancy bg for showing background and border when focus. */
.fancy-bg {
  position: absolute;
  width: 100%;
  inset: 0;
  background: var(--input-bg-color);
  border-radius: 30px;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
/* label styling */
label {
  width: 100%;
  padding: 0.8em;
  height: 40px;
  padding-inline: var(--inline-padding-of-input);
  display: flex;
  align-items: center;
}

.search,.close-btn {
  position: absolute;
}
/* styling search-icon */
.search {
  fill: var(--text-color);
  left: var(--inline-padding-of-input);
}
/* svg -- size */
svg {
  width: 17px;
  display: block;
}
/* styling of close button */
.close-btn {
  border: none;
  right: var(--inline-padding-of-input);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0.1em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--active-color);
  opacity: 0;
  visibility: hidden;
}
/* styling of input */
.input {
  color: var(--input-text-color);
  width: 100%;
  margin-inline: min(2em,calc(var(--inline-padding-of-input) + var(--gap)));
  background: none;
  border: none;
}

.input:focus {
  outline: none;
}

.input::placeholder {
  color: var(--text-color)
}
/* input background change in focus */
.input:focus ~ .fancy-bg {
  border: 1px solid var(--active-color);
  background: var(--focus-input-bg-color);
}
/* search icon color change in focus */
.input:focus ~ .search {
  fill: var(--active-color);
}
/* showing close button when typing */
.input:valid ~ .close-btn {
  opacity: 1;
  visibility: visible;
}
/* this is for the default background in input,when selecting autofill options -- you can remove this code if you do not want to override the browser style.  */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
  -webkit-transition-delay: 9999s;
}
</style>


================================================
FILE: Inputs/seyed-mohsen-mousavi_average-elephant-52.html
================================================
<div class="search-bar">
  <div class="blob"></div>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    stroke-width="1.5"
    stroke="currentColor"
    class="icon"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
    ></path>
  </svg>
  <input type="text" id="ser" class="inner" placeholder="Search ..." />
</div>

<style>
/* From Uiverse.io by seyed-mohsen-mousavi  - Tags: input, shadow, gradient */
/* Main style for the search bar */
.search-bar {
  cursor: text;
  font-size: 1.6rem;
  border-radius: 16px;
  border: none;
  padding: 2px;
  background: -webkit-radial-gradient(circle 80px at 80% -10%, #fff, #181b1b);
  background: -moz-radial-gradient(circle 80px at 80% -10%, #fff, #181b1b);
  background: radial-gradient(circle 80px at 80% -10%, #fff, #181b1b);
  position: relative;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.66);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.66);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.66);
  overflow: hidden;
}

/* Style for the ::after pseudo-element of the search bar */
.search-bar::after {
  cursor: text;
  content: "";
  position: absolute;
  width: 65%;
  height: 60%;
  border-radius: 120px;
  top: 0;
  right: 0;
  -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.22);
  -moz-box-shadow: 0 0 20px rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.22);
  z-index: -1;
}

/* Style for the decorative blob */
.blob {
  position: absolute;
  width: 70px;
  height: 100%;
  border-radius: 16px;
  bottom: 0;
  left: 0;
  background: -webkit-radial-gradient(
    circle 60px at 0% 100%,
    #ff3fcb,
    rgba(255, 0, 216, 0.5),
    transparent
  );
  background: -moz-radial-gradient(
    circle 60px at 0% 100%,
    #ff3fcb,
    rgba(255, 0, 216, 0.5),
    transparent
  );
  background: radial-gradient(
    circle 60px at 0% 100%,
    #ff3fcb,
    rgba(255, 0, 216, 0.5),
    transparent
  );
  -webkit-box-shadow: -10px 10px 30px rgba(255, 0, 229, 0.18);
  -moz-box-shadow: -10px 10px 30px rgba(255, 0, 229, 0.18);
  box-shadow: -10px 10px 30px rgba(255, 0, 229, 0.18);
}

/* Style for the inner content */
.inner {
  padding: 14px 25px;
  border-radius: 14px;
  color: #fff;
  z-index: 3;
  position: relative;
  background: -webkit-radial-gradient(circle 80px at 80% -50%, #777, #0f1111);
  background: -moz-radial-gradient(circle 80px at 80% -50%, #777, #0f1111);
  background: radial-gradient(circle 80px at 80% -50%, #777, #0f1111);
  outline: none;
  margin: 3px;
  padding-left: 40px;
  font-weight: 600;
  caret-color: gray;
  text-shadow: 0 0 0 gray;
  -webkit-text-fill-color: transparent;
  font-size: 17px;
  font-family: system-ui, sans-serif;
  width: 98%;
}

/* Style for placeholder text */
.inner::placeholder {
  font-weight: 100;
  padding-left: 2px;
}

/* Style for the icon */
.icon {
  width: 1.5rem;
  position: absolute;
  color: gray;
  z-index: 4;
  top: 20.5px;
  left: 15px;
}

/* Style when the search bar is focused */
.search-bar:focus-within {
  background-position: 290px;
  -webkit-transform: skew(10deg, 0deg);
  -moz-transform: skew(10deg, 0deg);
  transform: skew(10deg, 0deg);
  -webkit-box-shadow: -13px 20px 20px rgba(0, 0, 0, 0.66);
  -moz-box-shadow: -13px 20px 20px rgba(0, 0, 0, 0.66);
  box-shadow: -13px 20px 20px rgba(0, 0, 0, 0.66);
}

</style>
    

================================================
FILE: Inputs/seyed-mohsen-mousavi_blue-impala-67.html
================================================
<!-- From Uiverse.io by seyed-mohsen-mousavi  - Tags: simple, input, search -->
<div class="relative">
  <input
    placeholder="Search..."
    class="input shadow-lg focus:border-2 border-gray-300 px-5 py-3 rounded-xl w-56 transition-all focus:w-64 outline-none"
    name="search"
    type="search"
  />
  <svg
    class="size-6 absolute top-3 right-3 text-gray-500"
    stroke="currentColor"
    stroke-width="1.5"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
      stroke-linejoin="round"
      stroke-linecap="round"
    ></path>
  </svg>
</div>


    

================================================
FILE: Inputs/seyed-mohsen-mousavi_chatty-frog-63.html
================================================
<label class="slider">
  <input type="range" class="level" />
  <svg
    class="volume"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="512"
    height="512"
    x="0"
    y="0"
    viewBox="0 0 24 24"
    style="enable-background:new 0 0 512 512"
    xml:space="preserve"
  >
    <g>
      <path
        d="M18.36 19.36a1 1 0 0 1-.705-1.71C19.167 16.148 20 14.142 20 12s-.833-4.148-2.345-5.65a1 1 0 1 1 1.41-1.419C20.958 6.812 22 9.322 22 12s-1.042 5.188-2.935 7.069a.997.997 0 0 1-.705.291z"
        fill="currentColor"
        data-original="#000000"
      ></path>
      <path
        d="M15.53 16.53a.999.999 0 0 1-.703-1.711C15.572 14.082 16 13.054 16 12s-.428-2.082-1.173-2.819a1 1 0 1 1 1.406-1.422A6 6 0 0 1 18 12a6 6 0 0 1-1.767 4.241.996.996 0 0 1-.703.289zM12 22a1 1 0 0 1-.707-.293L6.586 17H4c-1.103 0-2-.897-2-2V9c0-1.103.897-2 2-2h2.586l4.707-4.707A.998.998 0 0 1 13 3v18a1 1 0 0 1-1 1z"
        fill="currentColor"
        data-original="#000000"
      ></path>
    </g>
  </svg>
</label>

<style>
/* From Uiverse.io by seyed-mohsen-mousavi  - Tags: input, sound, level */
/* level settings 👇 */

.slider {
  /* slider */
  --slider-width: 100%;
  --slider-height: 50px;
  --slider-bg: rgb(82, 82, 82);
  --slider-border-radius: 9px;
  /* level */
  --level-color: #fff;
  --level-transition-duration: 0.1s;
  /* icon */
  --icon-margin: 15px;
  --icon-color: var(--slider-bg);
  --icon-size: 25px;
}

.slider {
  position: relative;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.slider .volume {
  display: inline-block;
  vertical-align: top;
  margin-right: var(--icon-margin);
  color: var(--icon-color);
  width: var(--icon-size);
  height: auto;
  position: absolute;
  left: 0;
  pointer-events: none;
}

.slider .level {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--slider-width);
  height: var(--slider-height);
  background: var(--slider-bg);
  overflow: hidden;
  border-radius: var(--slider-border-radius);
  -webkit-transition: height var(--level-transition-duration);
  -o-transition: height var(--level-transition-duration);
  transition: height var(--level-transition-duration);
  cursor: inherit;
  transform: rotate(270deg);
}

.slider .level::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0;
  height: 0;
  -webkit-box-shadow: -200px 0 0 200px var(--level-color);
  box-shadow: -200px 0 0 200px var(--level-color);
}
.slider .level::-moz-range-thumb {
  width: 0;
  height: 0;
  border-radius: 0;
  border: none;
  box-shadow: -200px 0 0 200px var(--level-color);
}

</style>
    

================================================
FILE: Inputs/shadowmurphy_hard-warthog-73.html
================================================
<input class="input" placeholder="text">
<style>
/* From Uiverse.io by shadowmurphy - Tags: blue, input, search */
.input {
  border: 2px solid transparent;
  width: 15em;
  height: 2.5em;
  padding-left: 0.8em;
  outline: none;
  overflow: hidden;
  background-color: #F3F3F3;
  border-radius: 10px;
  transition: all 0.5s;
}

.input:hover,
.input:focus {
  border: 2px solid #4A9DEC;
  box-shadow: 0px 0px 0px 7px rgb(74, 157, 236, 20%);
  background-color: white;
}

</style>


================================================
FILE: Inputs/shadowmurphy_selfish-bulldog-79.html
================================================
<input
  type="text"
  name="text"
  class="search-bar"
  placeholder="Type something"
/>

<style>
/* From Uiverse.io by shadowmurphy  - Tags: simple, material design, neumorphism, skeuomorphism, input */
.search-bar {
  width: 200px;
  height: 35px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #303030;
  border-bottom: 2px solid #9a9a9a;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #2d2d2d;
  color: white;
  transition: all 0.3s ease;
}

.search-bar::placeholder {
  color: #9a9a9a;
}

.search-bar:hover {
  background-color: #313131;
}

.search-bar:active,
.search-bar:focus {
  background-color: #1e1f20;
  border: 1px solid #2d2d2d;
  border-bottom: 2px solid #4cc2ff;
}

</style>
    

================================================
FILE: Inputs/siraj-ha_serious-moose-70.html
================================================
<div class="search-bar-container">
  <form action="">
    <div class="search-container">
      <span class="search-icon">
        <svg
          height="24"
          width="24"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
            fill="currentColor"
          ></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
        </svg>
      </span>

      <input type="search" class="search-input" placeholder="Search..." />
      <span class="filter-icon">
        <span class="filter-icon">
          <svg
            height="24"
            width="24"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 4.6C3 4.03995 3 3.75992 3.10899 3.54601C3.20487 3.35785 3.35785 3.20487 3.54601 3.10899C3.75992 3 4.03995 3 4.6 3H19.4C19.9601 3 20.2401 3 20.454 3.10899C20.6422 3.20487 20.7951 3.35785 20.891 3.54601C21 3.75992 21 4.03995 21 4.6V6.33726C21 6.58185 21 6.70414 20.9724 6.81923C20.9479 6.92127 20.9075 7.01881 20.8526 7.10828C20.7908 7.2092 20.7043 7.29568 20.5314 7.46863L14.4686 13.5314C14.2957 13.7043 14.2092 13.7908 14.1474 13.8917C14.0925 13.9812 14.0521 14.0787 14.0276 14.1808C14 14.2959 14 14.4182 14 14.6627V17L10 21V14.6627C10 14.4182 10 14.2959 9.97237 14.1808C9.94787 14.0787 9.90747 13.9812 9.85264 13.8917C9.7908 13.7908 9.70432 13.7043 9.53137 13.5314L3.46863 7.46863C3.29568 7.29568 3.2092 7.2092 3.14736 7.10828C3.09253 7.01881 3.05213 6.92127 3.02763 6.81923C3 6.70414 3 6.58185 3 6.33726V4.6Z"
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke-width="2"
              stroke="#ffffff"
              fill="#000000"
            ></path>
          </svg>
        </span>
      </span>
    </div>
  </form>
</div>

<style>
/* From Uiverse.io by siraj-ha  - Tags: input */
.search-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-container {
  border-radius: 15px;
  max-width: max-content;
  margin: 100px auto;
  position: relative;
  display: flex;
  align-items: center;
  background: #000;
  box-shadow: 5px 5px 10px rgba(108, 110, 255, 0.8),
    -5px -5px 10px rgba(255, 89, 233, 0.8);
}

.search-input {
  flex: 1;
  margin: 10px 0;
  padding: 10px 20px;
  border-radius: 30px;
  border: none;
  outline: none;
  background-color: #000000;
  color: white;
  font-size: 16px;
}

.search-input::placeholder {
  color: #888;
}

.material-symbols-outlined {
  color: white;
  cursor: pointer;
}

.search-icon,
.filter-icon {
  margin: 0 10px;
}

.search-icon {
  color: white;
  padding: 0 0 0 10px;
}

.filter-icon {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  border-radius: 10px;
  margin-left: 10px;
  box-sizing: border-box;
  font-size: 24px;
  line-height: 1;
  box-shadow: inset 0 0 10px rgba(158, 202, 237, 0.5);
  padding: 5px;
}

.search-container:hover {
  box-shadow: 10px 10px 20px rgba(108, 110, 255, 0.8),
    -10px -10px 20px rgba(255, 89, 233, 0.8);
  animation: rotateGlow 1.5s infinite alternate;
}

@keyframes rotateGlow {
  0% {
    box-shadow: 10px 10px 20px rgba(108, 110, 255, 0.8),
      -10px -10px 20px rgba(255, 89, 233, 0.8);
  }
  50% {
    box-shadow: -10px -10px 20px rgba(255, 89, 233, 0.8),
      10px 10px 20px rgba(108, 110, 255, 0.8);
  }
  100% {
    box-shadow: 10px 10px 20px rgba(108, 110, 255, 0.8),
      -10px -10px 20px rgba(255, 89, 233, 0.8);
  }
}

</style>
    

================================================
FILE: Inputs/sonusng_lovely-bulldog-50.html
================================================
<input required="" type="text" placeholder="Your Name">
<style>
/* From Uiverse.io by sonusng - Tags: input */
input {
  width: 210px;
  height: 50px;
  padding: 0 16px;
  background: transparent;
  border-radius: 4px;
  border: 1px solid #fe4567;
  color: #f9f9f9;
  animation: shake_541 0.14s 3;
}

input:valid {
  border-color: #45feaf;
  animation: none;
}

@keyframes shake_541 {
  0%, 100% {
    translate: 0;
  }

  25% {
    translate: 8px 0;
  }

  75% {
    translate: -8px 0;
  }
}
</style>


================================================
FILE: Inputs/themrsami_calm-eel-15.html
================================================
<div class="search-container">
  <div class="search-bar">
    <input type="text" class="search-input" placeholder="Search..." />
    <div class="search-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="24"
        viewBox="0 0 24 24"
        width="24"
      >
        <path d="M0 0h24v24H0z" fill="none"></path>
        <path
          d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
        ></path>
      </svg>
    </div>
  </div>
  <div class="glow"></div>
</div>

<style>
/* From Uiverse.io by themrsami  - Tags: input */
.search-container {
  position: relative;
  width: 290px;
}

.search-bar {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #1e1e1e;
  border-radius: 8px;
  padding: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.search-input {
  width: 100%;
  border: none;
  background: none;
  color: #fff;
  font-size: 16px;
  padding: 10px;
  outline: none;
}

.search-input::placeholder {
  color: #aaa;
}

.search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: #333;
  border-radius: 50%;
  margin-left: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-icon svg {
  fill: #fff;
}

.search-icon:hover {
  background-color: #555;
}

.search-bar:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.search-bar:focus-within {
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
}

.glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 200%;
  border-radius: 100px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
  transition: all 0.5s ease;
  transform: translate(-50%, -50%) scale(0);
  z-index: -1;
}

.search-bar:hover + .glow {
  transform: translate(-50%, -50%) scale(1);
}

.search-bar:focus-within + .glow {
  transform: translate(-50%, -50%) scale(1.2);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
}

</style>
    

================================================
FILE: Inputs/tiagoadag1203_fat-parrot-54.html
================================================
<input placeholder="type it" class="input" name="text" type="text" />

<style>
/* From Uiverse.io by tiagoadag1203  - Tags: animation, blue, purple, input, shadow */
.input {
  max-width: 190px;
  background-color: #1a1a1a;
  border: none;
  padding: 10px;
  border-radius: 10px;
  outline: none;
  color: white;
}

.input:focus {
  animation: rotateShadow 2s infinite linear;
}

@keyframes rotateShadow {
  0% {
    box-shadow: -2px -2px 8px 1px #aa00ff, 2px 2px 8px 1px #3700ff;
  }
  25% {
    box-shadow: -2px 2px 8px 1px #aa00ff, 2px -2px 8px 1px #3700ff;
  }
  50% {
    box-shadow: 2px 2px 8px 1px #aa00ff, -2px -2px 8px 1px #3700ff;
  }
  75% {
    box-shadow: 2px -2px 8px 1px #aa00ff, -2px 2px 8px 1px #3700ff;
  }
  100% {
    box-shadow: -2px -2px 8px 1px #aa00ff, 2px 2px 8px 1px #3700ff;
  }
}

</style>
    

================================================
FILE: Inputs/vikas7754_yellow-stingray-17.html
================================================
<div class="circle-left"></div>
<div class="card">
  <div class="search-icon">
    <svg
      stroke-width="24.9084"
      stroke="#ffffff"
      xml:space="preserve"
      viewBox="-48.84 -48.84 586.08 586.08"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      id="Capa_1"
      version="1.1"
      width="20px"
      height="20px"
      fill="#d0d0d0"
    >
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <g>
          <g>
            <path
              d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6 s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2 S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7 S381.9,104.65,381.9,203.25z"
            ></path>
          </g>
        </g>
      </g>
    </svg>
  </div>
  <input
    autocomplete="off"
    class="input"
    placeholder="Search..."
    name="text"
    type="text"
  />
  <div class="filter-icon">
    <a href="https://freecodez.com">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="-1.5 -1.5 28.00 28.00"
        fill="#d0d0d0"
        width="30px"
        height="30px"
      >
        <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
        <g
          stroke-linejoin="round"
          stroke-linecap="round"
          id="SVGRepo_tracerCarrier"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <path
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="0.17500000000000002"
            stroke="#ffffff"
            d="M22 3.58002H2C1.99912 5.28492 2.43416 6.96173 3.26376 8.45117C4.09337 9.94062 5.29 11.1932 6.73999 12.09C7.44033 12.5379 8.01525 13.1565 8.41062 13.8877C8.80598 14.6189 9.00879 15.4388 9 16.27V21.54L15 20.54V16.25C14.9912 15.4188 15.194 14.599 15.5894 13.8677C15.9847 13.1365 16.5597 12.5178 17.26 12.07C18.7071 11.175 19.9019 9.92554 20.7314 8.43988C21.5608 6.95422 21.9975 5.28153 22 3.58002Z"
          ></path>
        </g>
      </svg>
    </a>
  </div>
</div>
<div class="circle-right"></div>

<style>
/* From Uiverse.io by vikas7754  - Tags: input */
.input {
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  outline: none;
  z-index: 1;
  background: transparent;
  padding: 10px;
  padding-left: 35px;
  padding-right: 40px;
  font-size: 16px;
  border-radius: 16px;
  color: #fff;
}

.input:focus {
  border: 1px solid rgb(242, 0, 255);
  background: #191919;
}

.search-icon,
.filter-icon {
  position: absolute;
  left: 10px;
  top: 55%;
  transform: translateY(-50%);
  z-index: 2;
}

.filter-icon {
  left: unset;
  right: 10px;
}

.circle-left,
.circle-right {
  position: absolute;
  left: 25%;
  top: 40%;
  background: linear-gradient(rgb(255, 0, 242), rgb(255, 0, 195));
  width: 70px;
  height: 70px;
  border-radius: 50%;
  filter: blur(50px);
  z-index: -1;
}

.circle-right {
  left: unset;
  right: 26%;
  top: 47%;
  background: linear-gradient(blue, rgb(255, 0, 230));
}

.card {
  position: relative;
  height: 60px;
  width: 100%;
  max-width: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 16px;
}

.card::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 600%;
  background: linear-gradient(#ff00e6, #ffffff33, #295bff);
  animation: animate 4s linear infinite;
}

.card::after {
  content: "";
  inset: 1.5px;
  position: absolute;
  background: #0000002b;
  border-radius: 15px;
  backdrop-filter: blur(30px);
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

</style>
    

================================================
FILE: Inputs/vikramsinghnegi_selfish-octopus-83.html
================================================
<input placeholder="Type here..." class="styled-input" type="text" />

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: simple, material design, flashy, alert, input, modern */
.styled-input {
  position: relative;
  cursor: text;
  font-size: 14px;
  line-height: 20px;
  padding: 0 16px;
  height: 48px;
  background-color: #fff;
  border: 1px solid #d6d6e7;
  border-radius: 3px;
  color: rgb(35, 38, 59);
  box-shadow: inset 0 1px 4px 0 rgb(119 122 175 / 30%);
  overflow: hidden;
  transition: all 100ms ease-in-out;
}

.styled-input:focus {
  border-color: #3c4fe0;
  box-shadow: 0 1px 0 0 rgb(35 38 59 / 5%);
}

</style>
    

================================================
FILE: Inputs/vinodjangid07_cuddly-deer-66.html
================================================
<label for="usernameField" class="usernamelabel label">Username</label>
    <input type="text" placeholder="@" id="usernameField" required="required">
<style>
/* From Uiverse.io by vinodjangid07 - Tags: input */
.usernamelabel {
  display: block;
  color: white;
  font-size: 14px;
  padding: 5px 5px;
}

#usernameField {
  display: block;
  width: 200px;
  height: 40px;
  background-color: #292929;
  border-radius: 30px;
  border: 2px solid #292929;
  padding: 0px 12px;
  outline: none;
  caret-color: rgb(152, 88, 255);
  color: rgb(212, 212, 212);
  font-size: 12px;
  transition-duration: .2s;
}

#usernameField:focus,
#usernameField:valid {
  border: 2px solid rgb(152, 88, 255);
  transition-duration: .2s;
}


</style>


================================================
FILE: Inputs/vinodjangid07_good-donkey-28.html
================================================
<div class="messageBox">
  <div class="fileUploadWrapper">
    <label for="file">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 337 337">
        <circle
          stroke-width="20"
          stroke="#6c6c6c"
          fill="none"
          r="158.5"
          cy="168.5"
          cx="168.5"
        ></circle>
        <path
          stroke-linecap="round"
          stroke-width="25"
          stroke="#6c6c6c"
          d="M167.759 79V259"
        ></path>
        <path
          stroke-linecap="round"
          stroke-width="25"
          stroke="#6c6c6c"
          d="M79 167.138H259"
        ></path>
      </svg>
      <span class="tooltip">Add an image</span>
    </label>
    <input type="file" id="file" name="file" />
  </div>
  <input required="" placeholder="Message..." type="text" id="messageInput" />
  <button id="sendButton">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 664 663">
      <path
        fill="none"
        d="M646.293 331.888L17.7538 17.6187L155.245 331.888M646.293 331.888L17.753 646.157L155.245 331.888M646.293 331.888L318.735 330.228L155.245 331.888"
      ></path>
      <path
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="33.67"
        stroke="#6c6c6c"
        d="M646.293 331.888L17.7538 17.6187L155.245 331.888M646.293 331.888L17.753 646.157L155.245 331.888M646.293 331.888L318.735 330.228L155.245 331.888"
      ></path>
    </svg>
  </button>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: input, message, send, image, upload, file */
.messageBox {
  width: fit-content;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2d2d2d;
  padding: 0 15px;
  border-radius: 10px;
  border: 1px solid rgb(63, 63, 63);
}
.messageBox:focus-within {
  border: 1px solid rgb(110, 110, 110);
}
.fileUploadWrapper {
  width: fit-content;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
}

#file {
  display: none;
}
.fileUploadWrapper label {
  cursor: pointer;
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fileUploadWrapper label svg {
  height: 18px;
}
.fileUploadWrapper label svg path {
  transition: all 0.3s;
}
.fileUploadWrapper label svg circle {
  transition: all 0.3s;
}
.fileUploadWrapper label:hover svg path {
  stroke: #fff;
}
.fileUploadWrapper label:hover svg circle {
  stroke: #fff;
  fill: #3c3c3c;
}
.fileUploadWrapper label:hover .tooltip {
  display: block;
  opacity: 1;
}
.tooltip {
  position: absolute;
  top: -40px;
  display: none;
  opacity: 0;
  color: white;
  font-size: 10px;
  text-wrap: nowrap;
  background-color: #000;
  padding: 6px 10px;
  border: 1px solid #3c3c3c;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.596);
  transition: all 0.3s;
}
#messageInput {
  width: 200px;
  height: 100%;
  background-color: transparent;
  outline: none;
  border: none;
  padding-left: 10px;
  color: white;
}
#messageInput:focus ~ #sendButton svg path,
#messageInput:valid ~ #sendButton svg path {
  fill: #3c3c3c;
  stroke: white;
}

#sendButton {
  width: fit-content;
  height: 100%;
  background-color: transparent;
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}
#sendButton svg {
  height: 18px;
  transition: all 0.3s;
}
#sendButton svg path {
  transition: all 0.3s;
}
#sendButton:hover svg path {
  fill: #3c3c3c;
  stroke: white;
}

</style>
    

================================================
FILE: Inputs/vinodjangid07_good-grasshopper-52.html
================================================
<div class="InputContainer">
  <input type="text" name="text" class="input" id="input" placeholder="Search">
  
  <label for="input" class="labelforsearch">
<svg viewBox="0 0 512 512" class="searchIcon"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg>
</label>
<div class="border"></div>

<button class="micButton"><svg viewBox="0 0 384 512" class="micIcon"><path d="M192 0C139 0 96 43 96 96V256c0 53 43 96 96 96s96-43 96-96V96c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24v40c0 89.1 66.2 162.7 152 174.4V464H120c-13.3 0-24 10.7-24 24s10.7 24 24 24h72 72c13.3 0 24-10.7 24-24s-10.7-24-24-24H216V430.4c85.8-11.7 152-85.3 152-174.4V216c0-13.3-10.7-24-24-24s-24 10.7-24 24v40c0 70.7-57.3 128-128 128s-128-57.3-128-128V216z"></path></svg>
</button>

</div>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: input, Microphone, search, search bar */
.InputContainer {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  padding-left: 15px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
}

.input {
  width: 170px;
  height: 100%;
  border: none;
  outline: none;
  font-size: 0.9em;
  caret-color: rgb(255, 81, 0);
}

.labelforsearch {
  cursor: text;
  padding: 0px 12px;
}

.searchIcon {
  width: 13px;
}

.border {
  height: 40%;
  width: 1.3px;
  background-color: rgb(223, 223, 223);
}

.micIcon {
  width: 12px;
}

.micButton {
  padding: 0px 15px 0px 12px;
  border: none;
  background-color: transparent;
  height: 40px;
  cursor: pointer;
  transition-duration: .3s;
}

.searchIcon path {
  fill: rgb(114, 114, 114);
}

.micIcon path {
  fill: rgb(255, 81, 0);
}

.micButton:hover {
  background-color: rgb(255, 230, 230);
  transition-duration: .3s;
}
</style>


================================================
FILE: Inputs/vinodjangid07_hot-warthog-7.html
================================================
<div class="inputContainer">
        <input required="required" id="inputField" placeholder="Username" type="text">
        <label class="usernameLabel" for="inputField">Username</label>
        <svg viewBox="0 0 448 512" class="userIcon"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"></path></svg>
    </div>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: input */
.inputContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#inputField {
  border: 2px solid white;
  background-color: transparent;
  border-radius: 10px;
  padding: 12px 15px;
  color: black;
  font-weight: 500;
  outline: none;
  caret-color: rgb(155, 78, 255);
  transition-duration: .3s;
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.userIcon {
  position: absolute;
  fill: rgb(155, 78, 255);
  width: 12px;
  top: -23px;
  left: -15px;
  opacity: 0;
  transition: .2s linear;
}

.usernameLabel {
  position: absolute;
  top: -25px;
  left: 5px;
  color: white;
  font-size: 14px;
  font-weight: 400;
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  transition: .2s linear;
  opacity: 0;
}

#inputField:focus ~ .usernameLabel,
#inputField:valid ~ .usernameLabel {
  transform: translateX(20px);
  opacity: 1;
}

#inputField:focus ~ .userIcon,
#inputField:valid ~ .userIcon {
  transform: translateX(20px);
  opacity: 1;
}

#inputField:focus,
#inputField:valid {
  background-color: #ddd;
  transition-duration: .3s;
}

</style>


================================================
FILE: Inputs/vinodjangid07_modern-tiger-48.html
================================================
<div class="InputContainer">
  <input placeholder="Search.." id="input" class="input" name="text" type="text">
  
</div>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: gradient, input, search */
.InputContainer {
  width: 210px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom,rgb(227, 213, 255),rgb(255, 231, 231));
  border-radius: 30px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
}

.input {
  width: 200px;
  height: 40px;
  border: none;
  outline: none;
  caret-color: rgb(255, 81, 0);
  background-color: rgb(255, 255, 255);
  border-radius: 30px;
  padding-left: 15px;
  letter-spacing: 0.8px;
  color: rgb(19, 19, 19);
  font-size: 13.4px;
}

</style>


================================================
FILE: Inputs/vinodjangid07_weak-fish-12.html
================================================
<div class="InputContainer">
  <input placeholder="0000 0000 0000 0000" id="input" class="input" name="text" type="text">
<div class="visaCard">
  <svg viewBox="0 0 48 48" height="23" width="23" y="0px" x="0px" xmlns="http://www.w3.org/2000/svg" class="logo">
            <path d="M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z" fill="#ff9800"></path><path d="M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z" fill="#d50000"></path><path d="M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z" fill="#ff3d00"></path>
            </svg>
</div>

</div>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: input, creditcard, card number */
.InputContainer {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(8, 8, 8);
  overflow: hidden;
  padding: 0px 5px 0px 15px;
  border: 1px solid rgba(255, 255, 255, 0.322);
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
}

.input {
  width: 170px;
  height: 100%;
  border: none;
  outline: none;
  font-size: 0.9em;
  caret-color: rgb(255, 81, 0);
  background-color: rgb(8, 8, 8);
  font-weight: 600;
  color: white;
}

.visaCard {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 25px;
  background-color: rgb(8, 8, 8);
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.068);
  border-radius: 7px;
}

</style>


================================================
FILE: Inputs/vnuny_moody-swan-60.html
================================================
<div class="container">
        <input checked="" class="checkbox" type="checkbox"> 
        <div class="mainbox">
            <div class="iconContainer">
                <svg viewBox="0 0 512 512" height="1em" xmlns="http://www.w3.org/2000/svg" class="search_icon"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg>
            </div>
         <input class="search_input" placeholder="search" type="text">
        </div>
    </div>
<style>
/* From Uiverse.io by vnuny - Tags: input, search, animated */
.container {
  position: relative;
  box-sizing: border-box;
  width: fit-content;
}

.mainbox {
  box-sizing: border-box;
  position: relative;
  width: 230px;
  height: 50px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  border-radius: 160px;
  background-color: rgb(0, 0, 0);
  transition: all 0.3s ease;
}

.checkbox:focus {
  border: none;
  outline: none;
}

.checkbox:checked {
  right: 10px;
}

.checkbox:checked ~ .mainbox {
  width: 50px;
}

.checkbox:checked ~ .mainbox .search_input {
  width: 0;
  height: 0px;
}

.checkbox:checked ~ .mainbox .iconContainer {
  padding-right: 8px;
}

.checkbox {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 17px;
  top: 10px;
  z-index: 9;
  cursor: pointer;
  appearance: none;
}

.search_input {
  box-sizing: border-box;
  height: 100%;
  width: 170px;
  background-color: transparent;
  border: none;
  outline: none;
  padding-bottom: 4px;
  padding-left: 10px;
  font-size: 1em;
  color: white;
  transition: all 0.3s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.search_input::placeholder {
  color: rgba(255, 255, 255, 0.776);
}

.iconContainer {
  box-sizing: border-box;
  padding-top: 5px;
  width: fit-content;
  transition: all 0.3s ease;
}

.search_icon {
  box-sizing: border-box;
  fill: white;
  font-size: 1.3em;
}
</style>


================================================
FILE: Inputs/xetrov47_quick-fireant-96.html
================================================
<div class="search">
  <input placeholder="Search" class="search__input" type="text" />
  <button class="search__button">
    <svg
      viewBox="0 0 16 16"
      class="bi bi-search"
      fill="currentColor"
      height="16"
      width="16"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"
      ></path>
    </svg>
  </button>
</div>

<style>
/* From Uiverse.io by xetrov47  - Tags: simple, input, search */
.search {
  display: flex;
  align-items: center;
  text-align: center;
}

.search__input {
  font-family: inherit;
  font-size: inherit;
  border: 1px solid #767676;
  color: #767676;
  padding: 5px 10px;
  border-radius: 4px;
  margin-right: -1.5rem;
  height: 30px;
  width: 15rem;
}

.search__input::-webkit-input-placeholder {
  font-weight: 400;
  color: #767676;
  font-size: 14px;
}

.search__button {
  border: none;
  background-color: #fff;
  margin-top: 0.1em;
}

.search__button:hover {
  cursor: pointer;
}

.search input:focus {
  outline: none;
}

</style>
    

================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2023 Uiverse.io

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: Notifications/ActiveIceDigital_fuzzy-fly-47.html
================================================
<div class="notification">
  <span>Congratulatioins Champion!</span>
  <div id="level">
    <div class="one">↑</div>
    <div id="lvl">Level 10</div>
    <div class="one">↑</div>
  </div>
</div>
<style>
/* From Uiverse.io by ActiveIceDigital - Tags: notification */
@keyframes ud {
  0% {
    transform: translateY(-1px);
    opacity: 0;
  }

  50% {
    transform: translateY(-5px);
    opacity: 1;
  }

  100% {
    transform: translateY(-1px);
    opacity: 0;
  }
}

.notification {
  width: 250px;
  height: 60px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 14px;
  padding: 5px 15px;
  text-align: center;
  box-shadow: 2px 2px 0px 1px rgba(255, 0, 0, 0.5) inset, 
  -2px -2px 0px 1px rgba(255, 0, 0, 0.8) inset,
  0px 2px 5px 0px rgba(0, 0, 0, .25);
}

#lvl {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 20px;
}

.notification > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#level {
  display: flex;
  justify-content: center;
  margin-top: 5px;
  gap: 5px;
}

.one {
  display: inline-block;
  font-size: 25px;
  line-height: 25px;
  animation: ud 1s ease-in-out infinite;
  color: rgba(255, 0, 0, 0.95);
}
</style>


================================================
FILE: Notifications/Fujitawa_slimy-vampirebat-16.html
================================================
<div class="notification"> <div class="txt"> Mission passed! <div class="lvl"> 10</div> </div> <button class="ff3"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M15.4695 11.2929C15.0789 10.9024 14.4458 10.9024 14.0553 11.2929C13.6647 11.6834 13.6647 12.3166 14.0553 12.7071C14.4458 13.0976 15.0789 13.0976 15.4695 12.7071C15.86 12.3166 15.86 11.6834 15.4695 11.2929Z" fill="currentColor"></path>
  <path d="M16.1766 9.17156C16.5671 8.78103 17.2003 8.78103 17.5908 9.17156C17.9813 9.56208 17.9813 10.1952 17.5908 10.5858C17.2003 10.9763 16.5671 10.9763 16.1766 10.5858C15.7861 10.1952 15.7861 9.56208 16.1766 9.17156Z" fill="currentColor"></path>
  <path d="M19.7121 11.2929C19.3216 10.9024 18.6885 10.9024 18.2979 11.2929C17.9074 11.6834 17.9074 12.3166 18.2979 12.7071C18.6885 13.0976 19.3216 13.0976 19.7121 12.7071C20.1027 12.3166 20.1027 11.6834 19.7121 11.2929Z" fill="currentColor"></path>
  <path d="M16.1766 13.4142C16.5671 13.0237 17.2003 13.0237 17.5908 13.4142C17.9813 13.8048 17.9813 14.4379 17.5908 14.8284C17.2003 15.219 16.5671 15.219 16.1766 14.8284C15.7861 14.4379 15.7861 13.8048 16.1766 13.4142Z" fill="currentColor"></path>
  <path d="M6 13H4V11H6V9H8V11H10V13H8V15H6V13Z" fill="currentColor"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C3.13401 5 0 8.13401 0 12C0 15.866 3.13401 19 7 19H17C20.866 19 24 15.866 24 12C24 8.13401 20.866 5 17 5H7ZM17 7H7C4.23858 7 2 9.23858 2 12C2 14.7614 4.23858 17 7 17H17C19.7614 17 22 14.7614 22 12C22 9.23858 19.7614 7 17 7Z" fill="currentColor"></path>
</svg> Next </button> </div>
<style>
/* From Uiverse.io by Fujitawa - Tags: notification */
.notification {
  width: 250px;
  height: 60px;
  color: black;
  background: white;
  border-radius: 3px;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-items: center;
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  border: 3px solid #ece0b4;
}

.notification:hover  button.ff3 {
  background-color: #f4e0a6;
}

.notification:hover {
  border-color: #f4e0a6;
}

.notification:hover .lvl {
  border-color: #f4e0a6;
}

button.ff3 {
  background-color: #ece0b4;
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  border: 0;
  transition: .5s;
  font-weight: bold;
}

.lvl {
  background: white;
  padding: 6px;
  border-radius: 100px;
  border: 3px solid #ece0b4;
  position: absolute;
  left: -10px;
  transform: scale(.8);
  top: -10px;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
} 

</style>


================================================
FILE: Notifications/Gianluks90_funny-impala-78.html
================================================
<div class="notification gradient-border">
  <div class="icon">
    ❤️
  </div>
  <div class="message-container">
    <div class="title">Congratulations!</div>
    <div class="message">You've reached a new level
!</div>
  </div>

</div>
<style>
/* From Uiverse.io by Gianluks90 - Tags: notification */
.notification {
  width: 255px;
  height: 60px;
  background: white;
  border-radius: 25px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.icon {
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background-color: rgb(236, 236, 236);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2px;
}

.message-container {
  display: flex;
  flex-direction: column;
}

.title {
  padding: 2px;
  text-transform: uppercase;
  color: black;
  font-weight: 600;
}

.message {
  padding: 2px;
  color: black;
  font-size: small;
}

.gradient-border {
  --borderSize: 3px;
  position: relative;
  border-radius: var(--borderSize);
}

.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderSize));
  left: calc(-1 * var(--borderSize));
  height: calc(100% + var(--borderSize) * 2);
  width: calc(100% + var(--borderSize) * 2);
  background: linear-gradient(75deg, #E50000, #FF8D00, #FFEE00, #008121, #004CFF, #760188);
  border-radius: calc(2 * var(--borderSize));
  z-index: -1;
  animation: gradientAnimation 4s ease alternate infinite;
  background-size: 300% 300%;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
</style>


================================================
FILE: Notifications/JkHuger_tasty-ape-73.html
================================================
<div class="level-up-notification">
  <div class="confetti"></div>
  <div class="level-up-text">Level Up!</div>
</div>

<div class="confetti-container">
  <div class="confetti">
    <i class="square" style="--speed: 10; --bg: yellow"></i>
    <i class="pentagram" style="--speed: 18; --bg: white"></i>
    <i class="rectangle" style="--speed: 29; --bg: green"></i>
    <i class="hexagram" style="--speed: 17; --bg: blue"></i>
    <i class="pentagram" style="--speed: 33; --bg: red"></i>
    <i class="dodecagram" style="--speed: 26; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 24; --bg: pink"> </i>
    <i class="wavy-line" style="--speed: 5; --bg: blue"></i>
    <i class="square" style="--speed: 40; --bg: white"></i>
    <i class="rectangle" style="--speed: 17; --bg: green"></i>
    <i class="square" style="--speed: 25; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="wavy-line" style="--speed: 15; --bg: yellow"> </i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 25; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 23; --bg: pink"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 37; --bg: pink"></i>
    <i class="hexagram" style="--speed: 36; --bg: white"></i>
    <i class="wavy-line" style="--speed: 32; --bg: green"></i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 29; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 23; --bg: pink"> </i>
    <i class="rectangle" style="--speed: 30; --bg: pink"></i>
    <i class="square" style="--speed: 30; --bg: red"></i>
    <i class="pentagram" style="--speed: 18; --bg: red"></i>
    <i class="rectangle" style="--speed: 19; --bg: green"></i>
    <i class="hexagram" style="--speed: 16; --bg: blue"></i>
    <i class="pentagram" style="--speed: 23; --bg: red"></i>
    <i class="dodecagram" style="--speed: 34; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 39; --bg: pink"></i>
    <i class="square" style="--speed: 40; --bg: purple"></i>
    <i class="rectangle" style="--speed: 21; --bg: green"></i>
    <i class="square" style="--speed: 14; --bg: white"></i>
    <i class="rectangle" style="--speed: 38; --bg: green"></i>
    <i class="dodecagram" style="--speed: 19; --bg: red"></i>
    <i class="wavy-line" style="--speed: 29; --bg: pink"> </i>
    <i class="hexagram" style="--speed: 21; --bg: white"></i>
    <i class="wavy-line" style="--speed: 17; --bg: purple"></i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 23; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 48; --bg: pink"> </i>
    <i class="rectangle" style="--speed: 38; --bg: pink"></i>
    <i class="pentagram" style="--speed: 13; --bg: red"></i>
    <i class="dodecagram" style="--speed: 49; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 19; --bg: cyan"></i>
    <i class="square" style="--speed: 15; --bg: steelblue"></i>
    <i class="square" style="--speed: 10; --bg: yellow"></i>
    <i class="pentagram" style="--speed: 18; --bg: white"></i>
    <i class="rectangle" style="--speed: 29; --bg: green"></i>
    <i class="hexagram" style="--speed: 17; --bg: blue"></i>
    <i class="pentagram" style="--speed: 33; --bg: red"></i>
    <i class="dodecagram" style="--speed: 26; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 24; --bg: pink"> </i>
    <i class="wavy-line" style="--speed: 5; --bg: white"></i>
    <i class="square" style="--speed: 40; --bg: purple"></i>
    <i class="rectangle" style="--speed: 17; --bg: green"></i>
    <i class="square" style="--speed: 25; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="wavy-line" style="--speed: 15; --bg: cyan"> </i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 45; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 23; --bg: pink"> </i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 37; --bg: pink"> </i>
    <i class="hexagram" style="--speed: 26; --bg: white"></i>
    <i class="wavy-line" style="--speed: 32; --bg: cyan"></i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 45; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 23; --bg: pink"> </i>
    <i class="rectangle" style="--speed: 50; --bg: pink"></i>
    <i class="square" style="--speed: 30; --bg: red"></i>
    <i class="pentagram" style="--speed: 18; --bg: red"></i>
    <i class="rectangle" style="--speed: 19; --bg: green"></i>
    <i class="hexagram" style="--speed: 16; --bg: blue"></i>
    <i class="pentagram" style="--speed: 23; --bg: red"></i>
    <i class="dodecagram" style="--speed: 33; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 39; --bg: white"></i>
    <i class="square" style="--speed: 40; --bg: orange"></i>
    <i class="rectangle" style="--speed: 21; --bg: green"></i>
    <i class="square" style="--speed: 14; --bg: white"></i>
    <i class="rectangle" style="--speed: 38; --bg: green"></i>
    <i class="dodecagram" style="--speed: 19; --bg: red"></i>
    <i class="wavy-line" style="--speed: 29; --bg: pink"> </i>
    <i class="hexagram" style="--speed: 34; --bg: white"></i>
    <i class="wavy-line" style="--speed: 17; --bg: indigo"></i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 23; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 48; --bg: pink"> </i>
    <i class="rectangle" style="--speed: 38; --bg: pink"></i>
    <i class="pentagram" style="--speed: 13; --bg: red"></i>
    <i class="dodecagram" style="--speed: 49; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 19; --bg: purple"></i>
    <i class="square" style="--speed: 15; --bg: cyan"></i>
  </div>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: notification */
.level-up-notification {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #FDD835;
  border-radius: 10px;
  font-weight: bold;
  font-family: "Courier New", monospace;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: scale-up 1.5s ease-in-out forwards, fade-out 0.5s ease-in-out forwards 21.5s;
}

.level-up-text {
  text-align: center;
  color: #fff;
  font-size: 30px;
  padding: 12px 20px;
  font-weight: bold;
  text-shadow: 2px 2px #000;
}

@keyframes confetti {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(100%);
  }
}

@keyframes scale-up {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.level-up-notification:hover {
  animation: none;
}

.level-up-notification:hover .confetti {
  animation: confetti 0.5s ease-in-out forwards;
}

/* asd */

.confetti-container {
  user-select: none;
  z-index: 10;
}

.confetti {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  /* width: 600px; */
  /* height: 600px; */
  /* overflow: hidden; */
}

.confetti .square {
  width: 1rem;
  height: 1rem;
  background-color: var(--bg);
  transform: rotate(-140deg);
}

.confetti .rectangle {
  width: 1rem;
  height: 0.5rem;
  background-color: var(--bg);
}

.confetti .hexagram {
  width: 0;
  height: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-bottom: 1rem solid var(--bg);
  position: relative;
}

.confetti .hexagram:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 1rem solid var(--bg);
  position: absolute;
  top: 0.33rem;
  left: -0.5rem;
}

.confetti .pentagram {
  width: 0rem;
  height: 0rem;
  display: block;
  margin: 0.5rem 0;
  border-right: 1rem solid transparent;
  border-bottom: 0.7rem solid var(--bg);
  border-left: 1rem solid transparent;
  transform: rotate(35deg);
  position: relative;
}

.confetti .pentagram:before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-bottom: 0.8rem solid var(--bg);
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  transform: rotate(-35deg);
  position: absolute;
  top: -0.45rem;
  left: -0.65rem;
}

.confetti .pentagram:after {
  content: "";
  width: 0rem;
  height: 0rem;
  display: block;
  border-right: 1rem solid transparent;
  border-bottom: 0.7rem solid var(--bg);
  border-left: 1rem solid transparent;
  transform: rotate(-70deg);
  position: absolute;
  top: 0.03rem;
  left: -1.05rem;
}

.confetti .dodecagram {
  background: var(--bg);
  width: 0.8rem;
  height: 0.8rem;
  position: relative;
}

.confetti .dodecagram:before {
  content: "";
  height: 0.8rem;
  width: 0.8rem;
  background: var(--bg);
  transform: rotate(30deg);
  position: absolute;
  top: 0;
  left: 0;
}

.confetti .dodecagram:after {
  content: "";
  height: 0.8rem;
  width: 0.8rem;
  background: var(--bg);
  transform: rotate(60deg);
  position: absolute;
  top: 0;
  left: 0;
}

.confetti .wavy-line {
  position: relative;
}

.confetti .wavy-line::after,
.confetti .wavy-line::before {
  content: "";
  height: 1rem;
  width: 8rem;
  background-size: 2rem 1rem;
  position: absolute;
  left: -9rem;
  transform: rotate(90deg);
}

.confetti .wavy-line::before {
  background-image: linear-gradient(
    45deg,
    transparent,
    transparent 50%,
    var(--bg) 50%,
    transparent 60%
  );
  top: 1rem;
}

.confetti .wavy-line::after {
  background-image: linear-gradient(
    -45deg,
    transparent,
    transparent 50%,
    var(--bg) 50%,
    transparent 60%
  );
}

.confetti i {
  width: 3rem;
  height: 3rem;
  margin: 0 0.2rem;
  animation-name: confetti;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: calc(70s / var(--speed));
}

.confetti i:nth-child(even) {
  transform: rotate(90deg);
}

@keyframes confetti {
  0% {
    transform: translateY(-500px);
  }

  100% {
    transform: translateY(500px);
  }
}

</style>


================================================
FILE: Notifications/John-CFO_quiet-puma-22.html
================================================
<div class="card">
      <svg height="180px" width="200px" version="1.1" id="Layer_1" viewBox="0 0 512 512" xml:space="preserve" class="metal">
        <path style="fill: #ffc61b" d="M256,512c-76.231,0-138.249-62.018-138.249-138.249c0-76.232,62.018-138.25,138.249-138.25
	c23.8,0,47.273,6.151,67.886,17.79c7.033,3.971,9.515,12.892,5.544,19.927c-3.971,7.033-12.896,9.515-19.927,5.544
	c-16.232-9.166-34.733-14.009-53.503-14.009c-60.102,0-108.999,48.898-108.999,109S195.899,482.751,256,482.751
	s108.999-48.896,108.999-108.999c0-8.077,6.549-14.625,14.625-14.625c8.076,0,14.625,6.548,14.625,14.625
	C394.249,449.982,332.231,512,256,512z"></path>
        <path style="fill: #fee187" d="M256,424.249c-27.845,0-50.498-22.653-50.498-50.498s22.653-50.499,50.498-50.499
	s50.498,22.654,50.498,50.499C306.498,401.596,283.845,424.249,256,424.249z"></path>
        <g>
          <path style="fill: #ffc61b" d="M256,438.874c-35.909,0-65.123-29.214-65.123-65.123s29.215-65.125,65.123-65.125
		s65.123,29.215,65.123,65.124S291.908,438.874,256,438.874z M256,337.877c-19.781,0-35.873,16.092-35.873,35.874
		c0,19.781,16.092,35.873,35.873,35.873s35.873-16.092,35.873-35.873C291.873,353.969,275.781,337.877,256,337.877z"></path>
          <path style="fill: #ffc61b" d="M316.661,280.679c-2.437,0-4.905-0.61-7.178-1.893c-16.262-9.182-34.757-14.036-53.483-14.036
		s-37.221,4.853-53.483,14.036c-6.986,3.943-15.846,1.525-19.857-5.423l-58.24-100.876c-4.039-6.995-1.642-15.94,5.353-19.978
		c6.995-4.038,15.94-1.642,19.978,5.353l51.383,88.997c17.255-7.462,35.969-11.359,54.868-11.359s37.613,3.899,54.868,11.359
		l49.423-85.604V29.25h-25.8c-8.076,0-14.625-6.548-14.625-14.625S326.416,0,334.492,0h40.426c8.076,0,14.625,6.548,14.625,14.625
		v150.55c0,2.567-0.676,5.09-1.96,7.313l-58.24,100.876C326.632,278.053,321.717,280.679,316.661,280.679z"></path>
        </g>
        <path style="fill: #fee187" d="M256,250.126c0.41,0,0.812,0.026,1.22,0.031V14.625H137.084v150.55l58.242,100.876
	C213.253,255.929,233.942,250.126,256,250.126z"></path>
        <path style="fill: #ffc61b" d="M195.338,280.679c-5.057,0-9.971-2.625-12.679-7.314l-58.24-100.876
	c-1.284-2.223-1.96-4.746-1.96-7.313V14.625C122.459,6.548,129.008,0,137.084,0H257.22c8.076,0,14.625,6.548,14.625,14.625v235.531
	c0,3.905-1.562,7.648-4.338,10.396c-2.776,2.747-6.511,4.291-10.441,4.23c-0.309-0.003-0.616-0.013-0.923-0.023l-0.211-0.007
	c-18.662,0-37.155,4.854-53.417,14.037C200.243,280.069,197.774,280.679,195.338,280.679z M151.709,161.256l49.423,85.604
	c13.161-5.691,27.171-9.309,41.462-10.706V29.25h-90.885V161.256L151.709,161.256z"></path>
      </svg>
      <span class="text-1">Congratulations</span>
      <span class="text-2">you've leveled up</span>
    </div>



<style>
/* From Uiverse.io by John-CFO - Tags: notification */
.card {
  color: #090909;
  height: 12rem;
  width: 20rem;
  border-radius: 1rem;
  background: rgb(63, 94, 251);
  background: radial-gradient(
    circle,
    rgba(63, 94, 251, 1) 0%,
    rgba(252, 70, 223, 1) 100%
  );
  border: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.text-1 {
  margin: 0;
  font-family: fantasy;
  font-size: 35px;
  padding-bottom: 5px;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}

.text-2 {
  margin: 0;
  padding-bottom: 2rem;
  font-family: fantasy;
  font-size: 25px;
  color: #fff;
}

.text-1,
.text-2 {
  animation: scaling 5s infinite;
}

@keyframes scaling {
  0% {
    transform: scale(1);
    opacity: 1.8;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.metal {
  margin-top: 10px;
  width: 60px;
  animation: spin 5.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(1800deg);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
}
</style>


================================================
FILE: Notifications/M4NT_tiny-mayfly-20.html
================================================
<div class="notification">
  	<div id="goku">
      <div class="head"></div>
      <div class="body"></div>
      <div class="leg"></div>
      <div class="shadow"></div>
	  </div>

  <span class="dirt">
  
  <div class="text">
    <span class="font hover">Level up!</span>
    <span class="font-text hover">Your power:</span>
    <span class="font-power hover">+8000!</span>
  </div>
  <div class="parchment">
  </div>
</span></div>
  

<style>
/* From Uiverse.io by M4NT - Tags: notification */
.notification {
  width: 250px;
  height: 60px;
  background: #18532c;
  border-radius: 14px;
  margin-top: 250px;
  user-select: none;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
  transition: 0.5s;
}

.notification:hover {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  -o-transform: translateY(-8px);
  transform: translateY(-8px);
}

@-webkit-keyframes head {
  0% {
    top: 0px;
  }

  50% {
    top: 6px;
  }

  100% {
    top: 0px;
  }
}

@-webkit-keyframes body {
  0% {
    top: 220px;
  }

  50% {
    top: 223px;
  }

  100% {
    top: 220px;
  }
}

@-webkit-keyframes leg {
  0% {
    top: 300px;
  }

  50% {
    top: 300px;
  }

  100% {
    top: 300px;
  }
}

@keyframes head {
  0% {
    top: 0px;
  }

  50% {
    top: 6px;
  }

  100% {
    top: 0px;
  }
}

@keyframes body {
  0% {
    top: 220px;
  }

  50% {
    top: 223px;
  }

  100% {
    top: 220px;
  }
}

@keyframes leg {
  0% {
    top: 300px;
  }

  50% {
    top: 300px;
  }

  100% {
    top: 300px;
  }
}

#goku {
  margin-top: -220px;
  margin-left: -50px;
  background: #fff;
  position: relative;
  -ms-transform: scale(0.5);
  /* IE 9 */
  -webkit-transform: scale(0.5);
  /* Chrome, Safari, Opera */
  transform: scale(0.5);
  z-index: 999999;
}

.shadow {
  position: absolute;
  top: 450px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #005e2f;
  box-shadow: -120px -10px #176d42, -110px -10px #005e2f, -100px -10px #005e2f, -90px -10px #005e2f, -80px -10px #005e2f, -70px -10px #005e2f, -60px -10px #005e2f, -50px -10px #005e2f, -40px -10px #005e2f, -30px -10px #005e2f, -20px -10px #005e2f, -10px -10px #005e2f, 0px -10px #005e2f, 10px -10px #005e2f, 20px -10px #005e2f, 30px -10px #005e2f, 40px -10px #005e2f, 50px -10px #005e2f, 60px -10px #005e2f, -130px 0px #176d42, -120px 0px #005e2f, -110px 0px #005e2f, -100px 0px #005e2f, -90px 0px #005e2f, -80px 0px #005e2f, -70px 0px #005e2f, -60px 0px #005e2f, -50px 0px #005e2f, -40px 0px #005e2f, -30px 0px #005e2f, -20px 0px #005e2f, -10px 0px #005e2f, 0px 0px #005e2f, 10px 0px #005e2f, 20px 0px #005e2f, 30px 0px #005e2f, 40px 0px #005e2f, 50px 0px #005e2f, 60px 0px #005e2f, -130px 10px #176d42, -120px 10px #005e2f, -110px 10px #005e2f, -100px 10px #005e2f, -90px 10px #005e2f, -80px 10px #005e2f, -70px 10px #005e2f, -60px 10px #005e2f, -50px 10px #005e2f, -40px 10px #005e2f, -30px 10px #005e2f, -20px 10px #005e2f, -10px 10px #005e2f, 0px 10px #005e2f, 10px 10px #005e2f, 20px 10px #005e2f, 30px 10px #005e2f, 40px 10px #005e2f, 50px 10px #005e2f, 60px 10px #005e2f, -130px 20px #176d42, -120px 20px #005e2f, -110px 20px #005e2f, -100px 20px #005e2f, -90px 20px #005e2f, -80px 20px #005e2f, -70px 20px #005e2f, -60px 20px #005e2f, -50px 20px #005e2f, -40px 20px #005e2f, -30px 20px #005e2f, -10px 20px #005e2f, 0px 20px #005e2f, 10px 20px #005e2f, 20px 20px #005e2f, 30px 20px #005e2f, 40px 20px #005e2f, 50px 20px #005e2f, 60px 20px #005e2f, 70px 20px #005e2f, -120px 30px #005e2f, -110px 30px #005e2f, -100px 30px #005e2f, -90px 30px #005e2f, -80px 30px #005e2f, -70px 30px #005e2f, -60px 30px #005e2f, -50px 30px #005e2f, -10px 0px transparent;
}

.leg {
  -webkit-animation: leg 1s infinite;
  -webkit-animation-timing-function: linear;
  animation: leg 1s infinite;
  animation-timing-function: linear;
  position: absolute;
  z-index: 20;
  top: 300px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #000;
  box-shadow: -50px 0px #000, -40px 0px #000, -30px 0px #000, -20px 0px #000, -10px 0px #000, 10px 0px #000, 20px 0px #000, 30px 0px #000, -50px 10px #000, -40px 10px #001e3d, -30px 10px #0055aa, -20px 10px #0080ff, -10px 10px #000, 0px 10px #0080ff, 10px 10px #000, 20px 10px #0055aa, 30px 10px #000, -50px 20px #000, -40px 20px #000, -30px 20px #000, -20px 20px #000, -10px 20px #0055aa, 0px 20px #000, 10px 20px #001e3d, 20px 20px #000, 30px 20px #000, 40px 20px #000, -70px 30px #000, -60px 30px #000, -50px 30px #3d1e00, -40px 30px #aa5500, -30px 30px #aa5500, -20px 30px #000, -10px 30px #0080ff, 0px 30px #001e3d, 10px 30px #0055aa, 20px 30px #000, 30px 30px #3d1e00, 40px 30px #000, -70px 40px #000, -60px 40px #000, -50px 40px #aa5500, -40px 40px #ff7700, -30px 40px #ff7700, -20px 40px #000, -10px 40px #0080ff, 0px 40px #001e3d, 10px 40px #0080ff, 20px 40px #000, 30px 40px #3d1e00, 40px 40px #000, -80px 50px #000, -70px 50px #000, -60px 50px #000, -50px 50px #ff7700, -40px 50px #ff7700, -30px 50px #ff7700, -20px 50px #000, -10px 50px #0080ff, 0px 50px #001e3d, 10px 50px #0080ff, 20px 50px #000, 30px 50px #aa5500, 40px 50px #000, 50px 50px #000, -80px 60px #000, -70px 60px #aa5500, -60px 60px #aa5500, -50px 60px #ff7700, -40px 60px #ff7700, -30px 60px #ff7700, -20px 60px #000, -10px 60px #0055aa, 0px 60px #001e3d, 10px 60px #0080ff, 20px 60px #000, 30px 60px #aa5500, 40px 60px #3d1e00, 50px 60px #000, -80px 70px #000, -70px 70px #aa5500, -60px 70px #ff7700, -50px 70px #ff7700, -40px 70px #ff7700, -30px 70px #ff7700, -20px 70px #000, -10px 70px #001e3d, 0px 70px #001e3d, 10px 70px #0080ff, 20px 70px #000, 30px 70px #aa5500, 40px 70px #aa5500, 50px 70px #000, -80px 80px #000, -70px 80px #3d1e00, -60px 80px #aa5500, -50px 80px #ff7700, -40px 80px #ff7700, -30px 80px #aa5500, -20px 80px #000, -10px 80px #000, 0px 80px #3d1e00, 10px 80px #000, 20px 80px #aa5500, 30px 80px #aa5500, 40px 80px #aa5500, 50px 80px #000, -90px 90px #000, -80px 90px #aa5500, -70px 90px #3d1e00, -60px 90px #3d1e00, -50px 90px #aa5500, -40px 90px #aa5500, -30px 90px #000, -20px 90px #000, -10px 90px #000, 0px 90px #3d1e00, 10px 90px #3d1e00, 20px 90px #3d1e00, 30px 90px #aa5500, 40px 90px #aa5500, 50px 90px #000, -90px 100px #000, -80px 100px #ff7700, -70px 100px #aa5500, -60px 100px #aa5500, -50px 100px #aa5500, -40px 100px #3d1e00, -30px 100px #000, -10px 100px #000, 0px 100px #000, 10px 100px #3d1e00, 20px 100px #aa5500, 30px 100px #aa5500, 40px 100px #3d1e00, 50px 100px #000, -100px 110px #000, -90px 110px #000, -80px 110px #000, -70px 110px #ff7700, -60px 110px #ff7700, -50px 110px #ff7700, -40px 110px #000, -10px 110px #000, 0px 110px #000, 10px 110px #000, 20px 110px #3d1e00, 30px 110px #3d1e00, 40px 110px #000, -100px 120px #000, -90px 120px #001e3d, -80px 120px #0080ff, -70px 120px #ffbb00, -60px 120px #0080ff, -50px 120px #000, -40px 120px #000, -10px 120px #000, 0px 120px #001e3d, 10px 120px #001e3d, 20px 120px #0080ff, 30px 120px #ffbb00, 40px 120px #000, -100px 130px #000, -90px 130px #0055aa, -80px 130px #ffff00, -70px 130px #ffbb00, -60px 130px #0055aa, -50px 130px #000, -10px 130px #000, 0px 130px #000, 10px 130px #001e3d, 20px 130px #000, 30px 130px #ff0000, 40px 130px #000, -110px 140px #000, -100px 140px #0055aa, -90px 140px #ff0000, -80px 140px #ff0000, -70px 140px #001e3d, -60px 140px #001e3d, -50px 140px #000, -10px 140px #000, 0px 140px #3d1e00, 10px 140px #ff0000, 20px 140px #0055aa, 30px 140px #0055aa, 40px 140px #ffbb00, 50px 140px #000, -110px 150px #000, -100px 150px #0055aa, -90px 150px #ffbb00, -80px 150px #0080ff, -70px 150px #ff0000, -60px 150px #000, 0px 150px #000, 10px 150px #001e3d, 20px 150px #0055aa, 30px 150px #0055aa, 40px 150px #0055aa, 50px 150px #ffbb00, 60px 150px #000, -110px 160px #000, -100px 160px #001e3d, -90px 160px #aa5500, -80px 160px #0080ff, -70px 160px #0080ff, -60px 160px #000, 0px 160px #000, 10px 160px #000, 20px 160px #000, 30px 160px #000, 40px 160px #000, 50px 160px #000, 60px 160px #000, -110px 170px #000, -100px 170px #000, -90px 170px #000, -80px 170px #000, -70px 170px #000, -60px 170px #000;
}

.body {
  -webkit-animation: body 1s infinite;
  -webkit-animation-timing-function: linear;
  animation: body 1s infinite;
  animation-timing-function: linear;
  position: absolute;
  top: 220px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: transparent;
  box-shadow: -90px 0px #000, -80px 0px #3d1e00, -70px 0px #3d1e00, -60px 0px #aa5500, -50px 0px #aa5500, 40px 0px #000, -100px 10px #000, -90px 10px #001e3d, -80px 10px #0080ff, -70px 10px #0080ff, -60px 10px #3d1e00, -50px 10px #ff7700, -40px 10px #aa5500, 30px 10px #aa5500, 40px 10px #000, -100px 20px #000, -90px 20px #000, -80px 20px #0055aa, -70px 20px #0055aa, -60px 20px #0080ff, -50px 20px #ff7700, -40px 20px #ff7700, -30px 20px #000, -20px 20px #c66b49, -10px 20px #ffbb80, 0px 20px #c66b49, 10px 20px #ffbb80, 20px 20px #000, 30px 20px #ff7700, 40px 20px #000, -110px 30px #000, -100px 30px #3d1e00, -90px 30px #c66b49, -80px 30px #000, -70px 30px #0055aa, -60px 30px #0055aa, -50px 30px #aa5500, -40px 30px #ff7700, -30px 30px #aa5500, -20px 30px #0055aa, -10px 30px #0080ff, 0px 30px #0080ff, 10px 30px #0080ff, 20px 30px #000, 30px 30px #ff7700, 40px 30px #000, -110px 40px #000, -100px 40px #c66b49, -90px 40px #c66b49, -80px 40px #c66b49, -70px 40px #000, -60px 40px #000, -50px 40px #000, -40px 40px #ff7700, -30px 40px #ff7700, -20px 40px #000, -10px 40px #0055aa, 0px 40px #0055aa, 10px 40px #0080ff, 20px 40px #000, 30px 40px #808080, 40px 40px #000, -110px 50px #000, -100px 50px #c66b49, -90px 50px #ffbb80, -80px 50px #ffbb80, -70px 50px #000, -60px 50px #000, -50px 50px #3d1e00, -40px 50px #aa5500, -30px 50px #ff7700, -20px 50px #ff7700, -10px 50px #000, 0px 50px #0080ff, 10px 50px #000, 20px 50px #808080, 30px 50px #aa5500, 40px 50px #000, 50px 50px #000, -120px 60px #000, -110px 60px #c66b49, -100px 60px #3d1e00, -90px 60px #ffbb80, -80px 60px #3d1e00, -70px 60px #000, -60px 60px #000, -50px 60px #c66b49, -40px 60px #000, -30px 60px #aa5500, -20px 60px #ff7700, -10px 60px #ff7700, 0px 60px #000, 10px 60px #ff7700, 20px 60px #808080, 30px 60px #000, 40px 60px #c66b49, 50px 60px #000, -120px 70px #000, -110px 70px #0055aa, -100px 70px #c66b49, -90px 70px #c66b49, -80px 70px #3d1e00, -70px 70px #c66b49, -60px 70px #c66b49, -50px 70px #000, -40px 70px #3d1e00, -30px 70px #3d1e00, -20px 70px #aa5500, -10px 70px #ff7700, 0px 70px #ff7700, 10px 70px #ff7700, 20px 70px #aa5500, 30px 70px #000, 40px 70px #ffbb80, 50px 70px #000, -120px 80px #000, -110px 80px #0055aa, -100px 80px #0080ff, -90px 80px #0055aa, -80px 80px #000, 40px 80px #0080ff, 50px 80px #000, -120px 90px #000, -110px 90px #0055aa, -100px 90px #0080ff, -90px 90px #001e3d, 40px 90px #0055aa, 50px 90px #0080ff, 60px 90px #000, -130px 100px #000, -120px 100px #c66b49, -110px 100px #c66b49, -100px 100px #ffbb80, -90px 100px #c66b49, -80px 100px #3d1e00, 50px 100px #ffbb80, 60px 100px #000, -130px 110px #000, -120px 110px #c66b49, -110px 110px #ffbb80, -100px 110px #ffbb80, -90px 110px #ffbb80, -80px 110px #ffbb80, 50px 110px #ffbb80, 60px 110px #000, -130px 120px #000, -120px 120px #c66b49, -110px 120px #ffbb80, -100px 120px #ffbb80, -90px 120px #000, -80px 120px #c66b49, 50px 120px #c66b49, 60px 120px #000, -130px 130px #000, -120px 130px #c66b49, -110px 130px #000, -100px 130px #ffbb80, -90px 130px #000, -120px 140px #000, -110px 140px #000, -100px 140px #c66b49, -90px 140px #000, -100px 150px #000, -90px 150px #c66b49, -90px 160px #000;
}

.head {
  -webkit-animation: head 1s infinite;
  -webkit-animation-timing-function: linear;
  animation: head 1s infinite;
  animation-timing-function: linear;
  position: absolute;
  z-index: 999;
  top: 0px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #000;
  box-shadow: 10px 0px #000, 20px 0px #000, 30px 0px #000, 40px 0px #000, 50px 0px #000, -20px 10px #000, -10px 10px #000, 0px 10px #000, 10px 10px #000, 20px 10px #000, 30px 10px #000, -30px 20px #000, -20px 20px #000, -10px 20px #000, 0px 20px #000, 10px 20px #000, 20px 20px #000, -40px 30px #000, -30px 30px #000, -20px 30px #000, -10px 30px #000, 0px 30px #000, 10px 30px #000, 20px 30px #000, -40px 40px #000, -30px 40px #000, -20px 40px #000, -10px 40px #000, 0px 40px #000, 10px 40px #000, 40px 40px #000, 50px 40px #000, 60px 40px #000, 70px 40px #000, -50px 50px #000, -40px 50px #000, -30px 50px #000, -20px 50px #000, -10px 50px #000, 0px 50px #000, 10px 50px #000, 30px 50px #000, 40px 50px #000, 50px 50px #000, 60px 50px #000, 70px 50px #000, 80px 50px #000, 90px 50px #000, -50px 60px #000, -40px 60px #000, -30px 60px #000, -20px 60px #000, -10px 60px #000, 0px 60px #000, 10px 60px #000, 20px 60px #000, 30px 60px #000, 40px 60px #000, 50px 60px #000, 60px 60px #000, 70px 60px #000, 80px 60px #000, 90px 60px #000, 100px 60px #000, -50px 70px #000, -40px 70px #000, -30px 70px #000, -20px 70px #000, -10px 70px #000, 0px 70px #000, 10px 70px #000, 20px 70px #000, 30px 70px #000, 40px 70px #000, 50px 70px #000, 60px 70px #000, 70px 70px #000, 80px 70px #000, 90px 70px #000, 100px 70px #000, 110px 70px #000, -50px 80px #000, -40px 80px #000, -30px 80px #000, -20px 80px #000, -10px 80px #000, 0px 80px #000, 10px 80px #000, 20px 80px #000, 30px 80px #000, 40px 80px #000, 50px 80px #000, 60px 80px #000, 70px 80px #000, 80px 80px #000, 90px 80px #000, 100px 80px #000, 110px 80px #000, 120px 80px #000, -70px 90px #000, -60px 90px #000, -50px 90px #000, -40px 90px #000, -30px 90px #000, -20px 90px #000, -10px 90px #000, 0px 90px #000, 10px 90px #000, 20px 90px #000, 30px 90px #000, 40px 90px #000, 50px 90px #000, 60px 90px #000, 70px 90px #000, 80px 90px #000, 90px 90px #000, 100px 90px #000, 110px 90px #000, 120px 90px #000, -80px 100px #000, -70px 100px #000, -60px 100px #000, -50px 100px #000, -40px 100px #000, -30px 100px #000, -20px 100px #000, -10px 100px #000, 0px 100px #000, 10px 100px #000, 20px 100px #000, 30px 100px #000, 40px 100px #000, 50px 100px #000, 60px 100px #000, 70px 100px #000, 80px 100px #000, 90px 100px #000, -90px 110px #000, -80px 110px #000, -70px 110px #000, -60px 110px #000, -50px 110px #000, -40px 110px #000, -30px 110px #000, -20px 110px #000, -10px 110px #000, 0px 110px #000, 10px 110px #000, 20px 110px #000, 30px 110px #000, 40px 110px #000, 50px 110px #000, 60px 110px #000, 70px 110px #000, -90px 120px #000, -80px 120px #000, -70px 120px #000, -60px 120px #000, -50px 120px #000, -40px 120px #000, -30px 120px #000, -20px 120px #000, -10px 120px #000, 0px 120px #000, 10px 120px #000, 20px 120px #000, 30px 120px #000, 40px 120px #000, 50px 120px #000, 60px 120px #000, -130px 130px #000, -120px 130px #000, -110px 130px #000, -100px 130px #000, -90px 130px #000, -80px 130px #000, -70px 130px #000, -60px 130px #000, -50px 130px #000, -40px 130px #000, -30px 130px #000, -20px 130px #000, -10px 130px #000, 0px 130px #000, 10px 130px #000, 20px 130px #000, 30px 130px #000, 40px 130px #000, 50px 130px #000, 60px 130px #000, 70px 130px #000, 80px 130px #000, -110px 140px #000, -100px 140px #000, -90px 140px #000, -80px 140px #000, -70px 140px #000, -60px 140px #000, -50px 140px #000, -40px 140px #000, -30px 140px #000, -20px 140px #000, -10px 140px #000, 0px 140px #c66b49, 10px 140px #000, 20px 140px #000, 30px 140px #000, 40px 140px #000, 50px 140px #000, 60px 140px #000, 70px 140px #000, 80px 140px #000, 90px 140px #000, 100px 140px #000, -130px 150px #000, -120px 150px #000, -110px 150px #000, -100px 150px #000, -90px 150px #000, -80px 150px #000, -70px 150px #000, -60px 150px #000, -50px 150px #000, -40px 150px #c66b49, -30px 150px #000, -20px 150px #000, -10px 150px #000, 0px 150px #c66b49, 10px 150px #c66b49, 20px 150px #c66b49, 30px 150px #000, 40px 150px #000, 50px 150px #000, 60px 150px #000, 70px 150px #000, 80px 150px #000, 90px 150px #000, 100px 150px #000, 110px 150px #000, -150px 160px #000, -140px 160px #000, -130px 160px #000, -120px 160px #000, -110px 160px #000, -100px 160px #000, -90px 160px #000, -80px 160px #000, -70px 160px #000, -60px 160px #000, -50px 160px #000, -40px 160px #c66b49, -30px 160px #c66b49, -20px 160px #000, -10px 160px #000, 0px 160px #c66b49, 10px 160px #ffbb80, 20px 160px #ffbb80, 30px 160px #c66b49, 40px 160px #000, 50px 160px #000, 60px 160px #000, 70px 160px #000, 80px 160px #000, -140px 170px #000, -130px 170px #000, -120px 170px #000, -110px 170px #000, -100px 170px #000, -90px 170px #000, -80px 170px #000, -70px 170px #ffbb80, -60px 170px #000, -50px 170px #000, -40px 170px #000, -30px 170px #000, -20px 170px #000, -10px 170px #000, 0px 170px #ffbb80, 10px 170px #ffbb80, 20px 170px #ffbb80, 30px 170px #ffbb80, 40px 170px #c66b49, 50px 170px #000, 60px 170px #000, -120px 180px #000, -110px 180px #000, -100px 180px #000, -90px 180px #000, -80px 180px #000, -70px 180px #ffbb80, -60px 180px #000, -50px 180px #47261a, -40px 180px #000, -30px 180px #bbb, -20px 180px #bbb, -10px 180px #000, 0px 180px #000, 10px 180px #ffbb80, 20px 180px #ffbb80, 30px 180px #000, 40px 180px #000, 50px 180px #000, 60px 180px #000, -130px 190px #000, -120px 190px #000, -110px 190px #000, -100px 190px #000, -90px 190px #000, -80px 190px #000, -70px 190px #c66b49, -60px 190px #000, -50px 190px #47261a, -40px 190px #c66b49, -30px 190px #bbb, -20px 190px #fff, -10px 190px #555555, 0px 190px #c66b49, 10px 190px #ffbb80, 20px 190px #ffbb80, 30px 190px #c66b49, 40px 190px #000, -100px 200px #000, -90px 200px #000, -80px 200px #000, -70px 200px #000, -60px 200px #000, -50px 200px #47261a, -40px 200px #c66b49, -30px 200px #c66b49, -20px 200px #ffbb80, -10px 200px #ffbb80, 0px 200px #ffbb80, 10px 200px #ffbb80, 20px 200px #ffbb80, 30px 200px #c66b49, 40px 200px #000, -110px 210px #000, -100px 210px #bba578, -90px 210px #000, -80px 210px #000, -70px 210px #000, -60px 210px #000, -50px 210px #000, -40px 210px #47261a, -30px 210px #c66b49, -20px 210px #ffbb80, -10px 210px #ffbb80, 0px 210px #ffbb80, 10px 210px #ffbb80, 20px 210px #c66b49, 30px 210px #000, -40px 220px #000, -30px 220px #000, -20px 220px #c66b49, -10px 220px #ffbb80, 0px 220px #ffbb80, 10px 220px #c66b49, 20px 220px #000, 30px 220px #000, -30px 230px #000, -20px 230px #000, -10px 230px #000, 0px 230px #000, 10px 230px #000, 20px 230px #000;
}

.font {
  font-size: 16px;
  font-family: 'VT323', monospace;
  margin-bottom: 25px;
  z-index: 999999;
}

.font-text {
  font-size: 10px;
  font-family: 'VT323', monospace;
}

.font-power {
  font-family: 'VT323', monospace;
  font-weight: 900;
  z-index: 999999;
}

.text {
  font-size: 22px;
  color: #000;
  margin-top: 90px;
  display: flex;
  flex-direction: column;
  margin-left: 160px;
  text-align: center;
  z-index: 999999;
}

.parchment {
  background: #FFFCD3;
  border: 1px dashed #E99C54;
  width: 100px;
  height: 100px;
  margin-left: 155px;
  margin-top: -90px;
  border-radius: 5px;
}

.parchment {
  /* -xpedu-transform: scale(1.3); */
  /* -ms-transform: scale(1.3); */
  /* transform: scale(1.05); */
  z-index: -999 !important;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
  transition: 0.5s;
}

.parchment:hover {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  -o-transform: translateY(-8px);
  transform: translateY(-8px);
}

.font-text {
  -xpedu-transform: scale(1.1);
  -ms-transform: scale(1.3);
  transform: scale(1.1);
  z-index: 99999;
}

.hover {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
  transition: 0.5s;
}

.hover:hover {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  -o-transform: translateY(-8px);
  transform: translateY(-8px);
}

.font-power:hover {
  color: #ff7700;
  text-decoration: wavy;
}

.font:hover {
  color: #ffbb00;
}
</style>


================================================
FILE: Notifications/MazontheMoon_curvy-mole-83.html
================================================
<div class="notification"><span class="star">★</span> <span class="text">New level</span> <span class="star">★</span></div>
<style>
/* From Uiverse.io by MazontheMoon - Tags: notification */
.notification {
  position: relative;
  width: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: Verdana;
  color: white;
  font-size: 16px;
  border-radius: 1rem;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 1.5;
  padding: 0.5rem;
  overflow: hidden;
  background-color: #840f00;
  -webkit-box-shadow: inset 0 1px 0 hsl(6, 100%, 25%), 0 2px 0 hsl(6, 100%, 22%),
    0 3px 0 hsl(6, 100%, 18%), 0 4px 0 hsl(6, 100%, 16%),
    0 5px 0 hsl(6, 100%, 12%), 0 6px 0 hsl(6, 100%, 10%),
    0 7px 0 hsl(6, 100%, 8%), 0 9px 0 hsl(6, 100%, 6%);
  box-shadow: inset 0 1px 0 hsl(6, 100%, 25%), 0 2px 0 hsl(6, 100%, 22%),
    0 3px 0 hsl(6, 100%, 18%), 0 4px 0 hsl(6, 100%, 16%),
    0 5px 0 hsl(6, 100%, 12%), 0 6px 0 hsl(6, 100%, 10%),
    0 7px 0 hsl(6, 100%, 8%), 0 9px 0 hsl(6, 100%, 6%);
}

.notification:hover {
  top: 2px;
  background: radial-gradient(hsl(6, 100%, 18%), hsl(6, 100%, 16%));
  -webkit-box-shadow: inset 0 1px 0 hsl(6, 100%, 25%), 0 2px 0 hsl(6, 100%, 22%),
    0 3px 0 hsl(6, 100%, 18%), 0 4px 0 hsl(6, 100%, 16%),
    0 5px 0 hsl(6, 100%, 12%), 0 6px 0 hsl(6, 100%, 10%);
  box-shadow: inset 0 1px 0 hsl(6, 100%, 25%), 0 2px 0 hsl(6, 100%, 22%),
    0 3px 0 hsl(6, 100%, 18%), 0 4px 0 hsl(6, 100%, 16%),
    0 5px 0 hsl(6, 100%, 12%), 0 6px 0 hsl(6, 100%, 10%);
}

.star {
  padding: 0.5rem;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-animation: fade 2s ease-in 1s infinite;
  animation: fade 2s ease-in 1s infinite;
}

@-webkit-keyframes fade {
  0% {
    color: rgba(0, 0, 0, 0.9);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }

  50% {
    color: rgba(0, 0, 0, 0.1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    color: rgba(0, 0, 0, 0.9);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}

@keyframes fade {
  0% {
    color: rgba(0, 0, 0, 0.9);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }

  50% {
    color: rgba(0, 0, 0, 0.1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    color: rgba(0, 0, 0, 0.9);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}


</style>


================================================
FILE: Notifications/MijailVillegas_swift-fireant-79.html
================================================
<div class="level-up-content">
    <div class="level-up-content">
        <div class="level-up">
            <span class="leyend">Level Up!</span>
        </div>
        <div class="progress-bar">
            <div class="progress"></div>
        </div>
        <span class="world">world 1-1</span>

        
        <div class="suggestion">
            <span>Reload or click ↓</span>
        </div>
        
    </div>
</div>

<style>
/* From Uiverse.io by MijailVillegas - Tags: notification */
/*Mijail Villegas - Bear
Me gusta  la estética retro de los level ups*/

.level-up-content {
  display: grid;
  width: 200px;
  height: 70px;
  padding: 10px;
  align-items: center;
  justify-items: center;
  align-content: center;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
  margin: auto;
}

.progress-bar {
  background-color: #ddd;
  height: 20px;
  margin: 10px 0;
  overflow: hidden;
  width: 100%;
  display: flex;
  text-align: center;
  font-size: 1em;
}

.progress {
  animation: progress-animation 2s ease-out forwards;
  background-color: #000000;
  height: 100%;
  width: 0%;
  z-index: 1;
}

.progress::before {
  content: "";
  display: block;
  color: #ddd;
  padding-top: 3px;
  height: 20px;
  animation: progress-xp 2.1s ease-out forwards;
}

.progress::after {
  content: "+220xp";
  display: block;
  color: rgb(0, 255, 0);
  position: absolute;
  padding-top: 3px;
  z-index: 999;
  opacity: 0;
  animation: add-xp 2s cubic-bezier(0, 0.92, 0.05, 1.07) forwards;
}

.span-content::before {
  display: block;
  color: #ddd;
  margin-left: auto;
  height: 20px;
}

.level-up {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.level-up .leyend {
  font-size: 1.2em;
  animation: level-up-animation 1s cubic-bezier(0, 0.62, 0, 0.97) forwards 2s;
  opacity: 0;
  transform: translateY(100%);
  filter: drop-shadow(4px 4px 0px black);
}

.level-up-content:hover {
  cursor: pointer;
}

.level-up-content:hover .leyend {
  opacity: 1;
  transform: translateY(100%);
  background: #a11a1a;
  animation: grow-up 1s ease-in-out forwards infinite;
}

.leyend::before {
  content: "lvl 5";
  display: block;
  color: #ddd;
  padding-top: 3px;
  font-size: 0.5em;
  height: 10px;
}

.level-up-content .world {
  font-weight: 900;
  animation: blink 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

@keyframes add-xp {
  0% {
    opacity: 0;
    transform: translateY(-20%);
  }

  60% {
    opacity: 1;
  }

  to {
    transform: translateY(-230%);
    opacity: 0;
  }
}

@keyframes blink {
  0% {
    color: black;
  }

  to {
    color: white;
  }
}

@keyframes progress-animation {
  0% {
    width: 0%;
  }

  65% {
    width: 100%;
  }

  100% {
    width: 100%;
  }
}

@keyframes progress-xp {
  0% {
    content: "0xp";
  }

  5% {
    content: "+5xp";
  }

  10% {
    content: "+10xp";
  }

  15% {
    content: "+35xp";
  }

  22% {
    content: "+52xp";
  }

  25% {
    content: "+75xp";
  }

  30% {
    content: "+90xp";
  }

  38% {
    content: "+118xp";
  }

  40% {
    content: "+162xp";
  }

  45% {
    content: "+195xp";
  }

  50% {
    content: "+200xp";
  }

  65% {
    content: "+220xp";
  }

  80% {
    content: "+220xp";
  }

  100% {
    content: "NEW LEVEL!";
  }
}

@keyframes level-up-animation {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0%);
    background: #a11a1a;
  }
}

@keyframes grow-up {
  0% {
    transform: scale(110%);
  }

  12% {
    transform: scale(90%);
  }

  25% {
    transform: scale(100%);
  }

  37% {
    transform: scale(115%);
  }

  50% {
    transform: scale(110%);
  }

  75% {
    transform: scale(130%);
  }

  to {
    transform: scale(115%);
  }
}

/* you can delete this part */
.suggestion {
  font-size: 0.7em;
  position: absolute;
  color: #9b9b9b;
  display: block;
  top: 80%;
  left: 60%;
}
/**/
</style>


================================================
FILE: Notifications/Praashoo7_ugly-walrus-48.html
================================================
<div class="main">  
  <div class="mario_bin"></div>
  <div class="mario_run">
    <div class="mario_run1"></div>
  </div>
  <div class="walls">
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
  </div>
  <div class="text"></div> 
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: animation, notification, pixelart, mario */
.main {
  width: 40em;
  height: 25.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mario_run {
  position: relative;
  left: -28em;
  top: -1em;
  width: 5px;
  height: 5px;
  animation: 2s move infinite linear;
}

.mario_run1 {
  box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(225,31,3,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(250,184,2,1), 25px 65px 0 0 rgba(250,184,2,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(225,31,3,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(132,122,0,1), 80px 65px 0 0 rgba(250,184,2,1), 85px 65px 0 0 rgba(250,184,2,1), 90px 65px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(250,184,2,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(132,122,0,1), 80px 70px 0 0 rgba(132,122,0,1), 85px 70px 0 0 rgba(250,184,2,1), 90px 70px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(132,122,0,1), 85px 80px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(225,31,3,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(132,122,0,1), 85px 85px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(225,31,3,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 75px 90px 0 0 rgba(225,31,3,1), 80px 90px 0 0 rgba(132,122,0,1), 85px 90px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 30px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(132,122,0,1), 25px 100px 0 0 rgba(132,122,0,1), 30px 100px 0 0 rgba(132,122,0,1), 35px 100px 0 0 rgba(132,122,0,1), 40px 100px 0 0 rgba(132,122,0,1);
  height: 5px;
  width: 5px;
  position: relative;
  animation: 2s run infinite step-end;
}

.mario_bin {
  box-shadow: 10px 40px 0 0 rgba(0, 0, 0, 1), 15px 40px 0 0 rgba(0, 0, 0, 1), 20px 40px 0 0 rgba(0, 0, 0, 1), 25px 40px 0 0 rgba(0, 0, 0, 1), 30px 40px 0 0 rgba(0, 0, 0, 1), 35px 40px 0 0 rgba(0, 0, 0, 1), 40px 40px 0 0 rgba(0, 0, 0, 1), 45px 40px 0 0 rgba(0, 0, 0, 1), 50px 40px 0 0 rgba(0, 0, 0, 1), 55px 40px 0 0 rgba(0, 0, 0, 1), 60px 40px 0 0 rgba(0, 0, 0, 1), 65px 40px 0 0 rgba(0, 0, 0, 1), 70px 40px 0 0 rgba(0, 0, 0, 1), 75px 40px 0 0 rgba(0, 0, 0, 1), 80px 40px 0 0 rgba(0, 0, 0, 1), 85px 40px 0 0 rgba(0, 0, 0, 1), 90px 40px 0 0 rgba(0, 0, 0, 1), 95px 40px 0 0 rgba(0, 0, 0, 1), 10px 45px 0 0 rgba(0, 0, 0, 1), 15px 45px 0 0 rgba(146,202,65,1), 20px 45px 0 0 rgba(146,202,65,1), 25px 45px 0 0 rgba(146,202,65,1), 30px 45px 0 0 rgba(146,202,65,1), 35px 45px 0 0 rgba(146,202,65,1), 40px 45px 0 0 rgba(146,202,65,1), 45px 45px 0 0 rgba(146,202,65,1), 50px 45px 0 0 rgba(146,202,65,1), 55px 45px 0 0 rgba(146,202,65,1), 60px 45px 0 0 rgba(146,202,65,1), 65px 45px 0 0 rgba(146,202,65,1), 70px 45px 0 0 rgba(146,202,65,1), 75px 45px 0 0 rgba(146,202,65,1), 80px 45px 0 0 rgba(146,202,65,1), 85px 45px 0 0 rgba(146,202,65,1), 90px 45px 0 0 rgba(146,202,65,1), 95px 45px 0 0 rgba(0, 0, 0, 1), 10px 50px 0 0 rgba(0, 0, 0, 1), 15px 50px 0 0 rgba(76,165,47,1), 20px 50px 0 0 rgba(76,165,47,1), 25px 50px 0 0 rgba(76,165,47,1), 30px 50px 0 0 rgba(76,165,47,1), 35px 50px 0 0 rgba(76,165,47,1), 40px 50px 0 0 rgba(146,202,65,1), 45px 50px 0 0 rgba(146,202,65,1), 50px 50px 0 0 rgba(146,202,65,1), 55px 50px 0 0 rgba(146,202,65,1), 60px 50px 0 0 rgba(76,165,47,1), 65px 50px 0 0 rgba(76,165,47,1), 70px 50px 0 0 rgba(76,165,47,1), 75px 50px 0 0 rgba(76,165,47,1), 80px 50px 0 0 rgba(76,165,47,1), 85px 50px 0 0 rgba(76,165,47,1), 90px 50px 0 0 rgba(76,165,47,1), 95px 50px 0 0 rgba(0, 0, 0, 1), 10px 55px 0 0 rgba(0, 0, 0, 1), 15px 55px 0 0 rgba(146,202,65,1), 20px 55px 0 0 rgba(146,202,65,1), 25px 55px 0 0 rgba(146,202,65,1), 30px 55px 0 0 rgba(146,202,65,1), 35px 55px 0 0 rgba(76,165,47,1), 40px 55px 0 0 rgba(146,202,65,1), 45px 55px 0 0 rgba(146,202,65,1), 50px 55px 0 0 rgba(146,202,65,1), 55px 55px 0 0 rgba(146,202,65,1), 60px 55px 0 0 rgba(76,165,47,1), 65px 55px 0 0 rgba(146,202,65,1), 70px 55px 0 0 rgba(76,165,47,1), 75px 55px 0 0 rgba(76,165,47,1), 80px 55px 0 0 rgba(146,202,65,1), 85px 55px 0 0 rgba(146,202,65,1), 90px 55px 0 0 rgba(146,202,65,1), 95px 55px 0 0 rgba(0, 0, 0, 1), 10px 60px 0 0 rgba(0, 0, 0, 1), 15px 60px 0 0 rgba(0, 0, 0, 1), 20px 60px 0 0 rgba(0, 0, 0, 1), 25px 60px 0 0 rgba(0, 0, 0, 1), 30px 60px 0 0 rgba(0, 0, 0, 1), 35px 60px 0 0 rgba(0, 0, 0, 1), 40px 60px 0 0 rgba(0, 0, 0, 1), 45px 60px 0 0 rgba(0, 0, 0, 1), 50px 60px 0 0 rgba(0, 0, 0, 1), 55px 60px 0 0 rgba(0, 0, 0, 1), 60px 60px 0 0 rgba(0, 0, 0, 1), 65px 60px 0 0 rgba(0, 0, 0, 1), 70px 60px 0 0 rgba(0, 0, 0, 1), 75px 60px 0 0 rgba(0, 0, 0, 1), 80px 60px 0 0 rgba(0, 0, 0, 1), 85px 60px 0 0 rgba(0, 0, 0, 1), 90px 60px 0 0 rgba(0, 0, 0, 1), 95px 60px 0 0 rgba(0, 0, 0, 1), 15px 65px 0 0 rgba(0, 0, 0, 1), 20px 65px 0 0 rgba(146,202,65,1), 25px 65px 0 0 rgba(146,202,65,1), 30px 65px 0 0 rgba(146,202,65,1), 35px 65px 0 0 rgba(146,202,65,1), 40px 65px 0 0 rgba(76,165,47,1), 45px 65px 0 0 rgba(146,202,65,1), 50px 65px 0 0 rgba(146,202,65,1), 55px 65px 0 0 rgba(146,202,65,1), 60px 65px 0 0 rgba(146,202,65,1), 65px 65px 0 0 rgba(76,165,47,1), 70px 65px 0 0 rgba(146,202,65,1), 75px 65px 0 0 rgba(76,165,47,1), 80px 65px 0 0 rgba(76,165,47,1), 85px 65px 0 0 rgba(146,202,65,1), 90px 65px 0 0 rgba(0, 0, 0, 1), 15px 70px 0 0 rgba(0, 0, 0, 1), 20px 70px 0 0 rgba(146,202,65,1), 25px 70px 0 0 rgba(146,202,65,1), 30px 70px 0 0 rgba(146,202,65,1), 35px 70px 0 0 rgba(146,202,65,1), 40px 70px 0 0 rgba(76,165,47,1), 45px 70px 0 0 rgba(146,202,65,1), 50px 70px 0 0 rgba(146,202,65,1), 55px 70px 0 0 rgba(146,202,65,1), 60px 70px 0 0 rgba(146,202,65,1), 65px 70px 0 0 rgba(76,165,47,1), 70px 70px 0 0 rgba(146,202,65,1), 75px 70px 0 0 rgba(76,165,47,1), 80px 70px 0 0 rgba(76,165,47,1), 85px 70px 0 0 rgba(146,202,65,1), 90px 70px 0 0 rgba(0, 0, 0, 1), 15px 75px 0 0 rgba(0, 0, 0, 1), 20px 75px 0 0 rgba(146,202,65,1), 25px 75px 0 0 rgba(146,202,65,1), 30px 75px 0 0 rgba(146,202,65,1), 35px 75px 0 0 rgba(146,202,65,1), 40px 75px 0 0 rgba(76,165,47,1), 45px 75px 0 0 rgba(146,202,65,1), 50px 75px 0 0 rgba(146,202,65,1), 55px 75px 0 0 rgba(146,202,65,1), 60px 75px 0 0 rgba(146,202,65,1), 65px 75px 0 0 rgba(76,165,47,1), 70px 75px 0 0 rgba(146,202,65,1), 75px 75px 0 0 rgba(76,165,47,1), 80px 75px 0 0 rgba(76,165,47,1), 85px 75px 0 0 rgba(146,202,65,1), 90px 75px 0 0 rgba(0, 0, 0, 1), 15px 80px 0 0 rgba(0, 0, 0, 1), 20px 80px 0 0 rgba(146,202,65,1), 25px 80px 0 0 rgba(146,202,65,1), 30px 80px 0 0 rgba(146,202,65,1), 35px 80px 0 0 rgba(146,202,65,1), 40px 80px 0 0 rgba(76,165,47,1), 45px 80px 0 0 rgba(146,202,65,1), 50px 80px 0 0 rgba(146,202,65,1), 55px 80px 0 0 rgba(146,202,65,1), 60px 80px 0 0 rgba(146,202,65,1), 65px 80px 0 0 rgba(76,165,47,1), 70px 80px 0 0 rgba(146,202,65,1), 75px 80px 0 0 rgba(76,165,47,1), 80px 80px 0 0 rgba(76,165,47,1), 85px 80px 0 0 rgba(146,202,65,1), 90px 80px 0 0 rgba(0, 0, 0, 1), 15px 85px 0 0 rgba(0, 0, 0, 1), 20px 85px 0 0 rgba(146,202,65,1), 25px 85px 0 0 rgba(146,202,65,1), 30px 85px 0 0 rgba(146,202,65,1), 35px 85px 0 0 rgba(146,202,65,1), 40px 85px 0 0 rgba(76,165,47,1), 45px 85px 0 0 rgba(146,202,65,1), 50px 85px 0 0 rgba(146,202,65,1), 55px 85px 0 0 rgba(146,202,65,1), 60px 85px 0 0 rgba(146,202,65,1), 65px 85px 0 0 rgba(76,165,47,1), 70px 85px 0 0 rgba(146,202,65,1), 75px 85px 0 0 rgba(76,165,47,1), 80px 85px 0 0 rgba(76,165,47,1), 85px 85px 0 0 rgba(146,202,65,1), 90px 85px 0 0 rgba(0, 0, 0, 1), 15px 90px 0 0 rgba(0, 0, 0, 1), 20px 90px 0 0 rgba(146,202,65,1), 25px 90px 0 0 rgba(146,202,65,1), 30px 90px 0 0 rgba(146,202,65,1), 35px 90px 0 0 rgba(146,202,65,1), 40px 90px 0 0 rgba(76,165,47,1), 45px 90px 0 0 rgba(146,202,65,1), 50px 90px 0 0 rgba(146,202,65,1), 55px 90px 0 0 rgba(146,202,65,1), 60px 90px 0 0 rgba(146,202,65,1), 65px 90px 0 0 rgba(76,165,47,1), 70px 90px 0 0 rgba(146,202,65,1), 75px 90px 0 0 rgba(76,165,47,1), 80px 90px 0 0 rgba(76,165,47,1), 85px 90px 0 0 rgba(146,202,65,1), 90px 90px 0 0 rgba(0, 0, 0, 1), 15px 95px 0 0 rgba(0, 0, 0, 1), 20px 95px 0 0 rgba(146,202,65,1), 25px 95px 0 0 rgba(146,202,65,1), 30px 95px 0 0 rgba(146,202,65,1), 35px 95px 0 0 rgba(146,202,65,1), 40px 95px 0 0 rgba(76,165,47,1), 45px 95px 0 0 rgba(146,202,65,1), 50px 95px 0 0 rgba(146,202,65,1), 55px 95px 0 0 rgba(146,202,65,1), 60px 95px 0 0 rgba(146,202,65,1), 65px 95px 0 0 rgba(76,165,47,1), 70px 95px 0 0 rgba(146,202,65,1), 75px 95px 0 0 rgba(76,165,47,1), 80px 95px 0 0 rgba(76,165,47,1), 85px 95px 0 0 rgba(146,202,65,1), 90px 95px 0 0 rgba(0, 0, 0, 1), 15px 100px 0 0 rgba(0, 0, 0, 1), 20px 100px 0 0 rgba(146,202,65,1), 25px 100px 0 0 rgba(146,202,65,1), 30px 100px 0 0 rgba(146,202,65,1), 35px 100px 0 0 rgba(146,202,65,1), 40px 100px 0 0 rgba(76,165,47,1), 45px 100px 0 0 rgba(146,202,65,1), 50px 100px 0 0 rgba(146,202,65,1), 55px 100px 0 0 rgba(146,202,65,1), 60px 100px 0 0 rgba(146,202,65,1), 65px 100px 0 0 rgba(76,165,47,1), 70px 100px 0 0 rgba(146,202,65,1), 75px 100px 0 0 rgba(76,165,47,1), 80px 100px 0 0 rgba(76,165,47,1), 85px 100px 0 0 rgba(146,202,65,1), 90px 100px 0 0 rgba(0, 0, 0, 1);
  height: 5px;
  width: 5px;
  position: relative;
  top: -1.45em;
  z-index: 2;
}

.walls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.wall {
  position: relative;
  box-shadow: 10px 80px 0 0 rgba(0, 0, 0, 1), 20px 80px 0 0 rgba(0, 0, 0, 1), 30px 80px 0 0 rgba(0, 0, 0, 1), 40px 80px 0 0 rgba(0, 0, 0, 1), 50px 80px 0 0 rgba(0, 0, 0, 1), 60px 80px 0 0 rgba(0, 0, 0, 1), 70px 80px 0 0 rgba(0, 0, 0, 1), 80px 80px 0 0 rgba(0, 0, 0, 1), 90px 80px 0 0 rgba(0, 0, 0, 1), 100px 80px 0 0 rgba(0, 0, 0, 1), 110px 80px 0 0 rgba(0, 0, 0, 1), 120px 80px 0 0 rgba(0, 0, 0, 1), 130px 80px 0 0 rgba(0, 0, 0, 1), 140px 80px 0 0 rgba(0, 0, 0, 1), 150px 80px 0 0 rgba(0, 0, 0, 1), 160px 80px 0 0 rgba(0, 0, 0, 1), 170px 80px 0 0 rgba(0, 0, 0, 1), 180px 80px 0 0 rgba(0, 0, 0, 1), 190px 80px 0 0 rgba(0, 0, 0, 1), 200px 80px 0 0 rgba(0, 0, 0, 1), 10px 90px 0 0 rgba(212,75,3,1), 20px 90px 0 0 rgba(212,75,3,1), 30px 90px 0 0 rgba(212,75,3,1), 40px 90px 0 0 rgba(212,75,3,1), 50px 90px 0 0 rgba(0, 0, 0, 1), 60px 90px 0 0 rgba(212,75,3,1), 70px 90px 0 0 rgba(212,75,3,1), 80px 90px 0 0 rgba(212,75,3,1), 90px 90px 0 0 rgba(0, 0, 0, 1), 100px 90px 0 0 rgba(212,75,3,1), 110px 90px 0 0 rgba(212,75,3,1), 120px 90px 0 0 rgba(212,75,3,1), 130px 90px 0 0 rgba(212,75,3,1), 140px 90px 0 0 rgba(0, 0, 0, 1), 150px 90px 0 0 rgba(212,75,3,1), 160px 90px 0 0 rgba(212,75,3,1), 170px 90px 0 0 rgba(212,75,3,1), 180px 90px 0 0 rgba(0, 0, 0, 1), 190px 90px 0 0 rgba(212,75,3,1), 200px 90px 0 0 rgba(212,75,3,1), 10px 100px 0 0 rgba(0, 0, 0, 1), 20px 100px 0 0 rgba(0, 0, 0, 1), 30px 100px 0 0 rgba(0, 0, 0, 1), 40px 100px 0 0 rgba(0, 0, 0, 1), 50px 100px 0 0 rgba(0, 0, 0, 1), 60px 100px 0 0 rgba(0, 0, 0, 1), 70px 100px 0 0 rgba(0, 0, 0, 1), 80px 100px 0 0 rgba(0, 0, 0, 1), 90px 100px 0 0 rgba(0, 0, 0, 1), 100px 100px 0 0 rgba(0, 0, 0, 1), 110px 100px 0 0 rgba(0, 0, 0, 1), 120px 100px 0 0 rgba(0, 0, 0, 1), 130px 100px 0 0 rgba(0, 0, 0, 1), 140px 100px 0 0 rgba(0, 0, 0, 1), 150px 100px 0 0 rgba(0, 0, 0, 1), 160px 100px 0 0 rgba(0, 0, 0, 1), 170px 100px 0 0 rgba(0, 0, 0, 1), 180px 100px 0 0 rgba(0, 0, 0, 1), 190px 100px 0 0 rgba(0, 0, 0, 1), 200px 100px 0 0 rgba(0, 0, 0, 1), 10px 110px 0 0 rgba(212,75,3,1), 20px 110px 0 0 rgba(212,75,3,1), 30px 110px 0 0 rgba(0, 0, 0, 1), 40px 110px 0 0 rgba(212,75,3,1), 50px 110px 0 0 rgba(212,75,3,1), 60px 110px 0 0 rgba(212,75,3,1), 70px 110px 0 0 rgba(0, 0, 0, 1), 80px 110px 0 0 rgba(212,75,3,1), 90px 110px 0 0 rgba(212,75,3,1), 100px 110px 0 0 rgba(212,75,3,1), 110px 110px 0 0 rgba(0, 0, 0, 1), 120px 110px 0 0 rgba(212,75,3,1), 130px 110px 0 0 rgba(0, 0, 0, 1), 140px 110px 0 0 rgba(212,75,3,1), 150px 110px 0 0 rgba(212,75,3,1), 160px 110px 0 0 rgba(0, 0, 0, 1), 170px 110px 0 0 rgba(212,75,3,1), 180px 110px 0 0 rgba(212,75,3,1), 190px 110px 0 0 rgba(0, 0, 0, 1), 200px 110px 0 0 rgba(212,75,3,1), 10px 120px 0 0 rgba(0, 0, 0, 1), 20px 120px 0 0 rgba(0, 0, 0, 1), 30px 120px 0 0 rgba(0, 0, 0, 1), 40px 120px 0 0 rgba(0, 0, 0, 1), 50px 120px 0 0 rgba(0, 0, 0, 1), 60px 120px 0 0 rgba(0, 0, 0, 1), 70px 120px 0 0 rgba(0, 0, 0, 1), 80px 120px 0 0 rgba(0, 0, 0, 1), 90px 120px 0 0 rgba(0, 0, 0, 1), 100px 120px 0 0 rgba(0, 0, 0, 1), 110px 120px 0 0 rgba(0, 0, 0, 1), 120px 120px 0 0 rgba(0, 0, 0, 1), 130px 120px 0 0 rgba(0, 0, 0, 1), 140px 120px 0 0 rgba(0, 0, 0, 1), 150px 120px 0 0 rgba(0, 0, 0, 1), 160px 120px 0 0 rgba(0, 0, 0, 1), 170px 120px 0 0 rgba(0, 0, 0, 1), 180px 120px 0 0 rgba(0, 0, 0, 1), 190px 120px 0 0 rgba(0, 0, 0, 1), 200px 120px 0 0 rgba(0, 0, 0, 1), 10px 130px 0 0 rgba(212,75,3,1), 20px 130px 0 0 rgba(212,75,3,1), 30px 130px 0 0 rgba(212,75,3,1), 40px 130px 0 0 rgba(0, 0, 0, 1), 50px 130px 0 0 rgba(212,75,3,1), 60px 130px 0 0 rgba(212,75,3,1), 70px 130px 0 0 rgba(212,75,3,1), 80px 130px 0 0 rgba(212,75,3,1), 90px 130px 0 0 rgba(0, 0, 0, 1), 100px 130px 0 0 rgba(212,75,3,1), 110px 130px 0 0 rgba(212,75,3,1), 120px 130px 0 0 rgba(212,75,3,1), 130px 130px 0 0 rgba(212,75,3,1), 140px 130px 0 0 rgba(0, 0, 0, 1), 150px 130px 0 0 rgba(212,75,3,1), 160px 130px 0 0 rgba(212,75,3,1), 170px 130px 0 0 rgba(212,75,3,1), 180px 130px 0 0 rgba(0, 0, 0, 1), 190px 130px 0 0 rgba(212,75,3,1), 200px 130px 0 0 rgba(212,75,3,1), 10px 140px 0 0 rgba(0, 0, 0, 1), 20px 140px 0 0 rgba(0, 0, 0, 1), 30px 140px 0 0 rgba(0, 0, 0, 1), 40px 140px 0 0 rgba(0, 0, 0, 1), 50px 140px 0 0 rgba(0, 0, 0, 1), 60px 140px 0 0 rgba(0, 0, 0, 1), 70px 140px 0 0 rgba(0, 0, 0, 1), 80px 140px 0 0 rgba(0, 0, 0, 1), 90px 140px 0 0 rgba(0, 0, 0, 1), 100px 140px 0 0 rgba(0, 0, 0, 1), 110px 140px 0 0 rgba(0, 0, 0, 1), 120px 140px 0 0 rgba(0, 0, 0, 1), 130px 140px 0 0 rgba(0, 0, 0, 1), 140px 140px 0 0 rgba(0, 0, 0, 1), 150px 140px 0 0 rgba(0, 0, 0, 1), 160px 140px 0 0 rgba(0, 0, 0, 1), 170px 140px 0 0 rgba(0, 0, 0, 1), 180px 140px 0 0 rgba(0, 0, 0, 1), 190px 140px 0 0 rgba(0, 0, 0, 1), 200px 140px 0 0 rgba(0, 0, 0, 1);
  height: 10px;
  width: 10px;
  left: -30em;
}

.wall:nth-child(1) {
  left: -12.5em;
}

.wall:nth-child(2) {
  left: -0.8em;
}

.wall:nth-child(3) {
  left: 2.2em;
}

.wall:nth-child(4) {
  left: 14em;
}

.wall:nth-child(5) {
  top: 3.7em;
  left: -27em;
}

.wall:nth-child(6) {
  top: 3.72em;
  left: -15.2em;
}

.wall:nth-child(7) {
  top: 3.72em;
  left: -3.5em;
}

.wall:nth-child(8) {
  top: 3.72em;
  left: 8em;
}

.wall:nth-child(9) {
  top: 3.72em;
  left: 12em;
}

.text {
  box-shadow: 15px 25px 0 0 rgba(255, 255, 255, 1), 20px 25px 0 0 rgba(255, 255, 255, 1), 25px 25px 0 0 rgba(255, 255, 255, 1), 30px 25px 0 0 rgba(255, 255, 255, 1), 40px 25px 0 0 rgba(255, 255, 255, 1), 45px 25px 0 0 rgba(255, 255, 255, 1), 50px 25px 0 0 rgba(255, 255, 255, 1), 60px 25px 0 0 rgba(255, 255, 255, 1), 65px 25px 0 0 rgba(255, 255, 255, 1), 70px 25px 0 0 rgba(255, 255, 255, 1), 85px 25px 0 0 rgba(255, 255, 255, 1), 90px 25px 0 0 rgba(255, 255, 255, 1), 95px 25px 0 0 rgba(255, 255, 255, 1), 100px 25px 0 0 rgba(255, 255, 255, 1), 105px 25px 0 0 rgba(255, 255, 255, 1), 115px 25px 0 0 rgba(255, 255, 255, 1), 120px 25px 0 0 rgba(255, 255, 255, 1), 125px 25px 0 0 rgba(255, 255, 255, 1), 130px 25px 0 0 rgba(255, 255, 255, 1), 15px 30px 0 0 rgba(255, 255, 255, 1), 30px 30px 0 0 rgba(255, 255, 255, 1), 40px 30px 0 0 rgba(255, 255, 255, 1), 60px 30px 0 0 rgba(255, 255, 255, 1), 95px 30px 0 0 rgba(255, 255, 255, 1), 115px 30px 0 0 rgba(255, 255, 255, 1), 130px 30px 0 0 rgba(255, 255, 255, 1), 15px 35px 0 0 rgba(255, 255, 255, 1), 30px 35px 0 0 rgba(255, 255, 255, 1), 40px 35px 0 0 rgba(255, 255, 255, 1), 45px 35px 0 0 rgba(255, 255, 255, 1), 50px 35px 0 0 rgba(255, 255, 255, 1), 60px 35px 0 0 rgba(255, 255, 255, 1), 65px 35px 0 0 rgba(255, 255, 255, 1), 70px 35px 0 0 rgba(255, 255, 255, 1), 95px 35px 0 0 rgba(255, 255, 255, 1), 115px 35px 0 0 rgba(255, 255, 255, 1), 130px 35px 0 0 rgba(255, 255, 255, 1), 15px 40px 0 0 rgba(255, 255, 255, 1), 30px 40px 0 0 rgba(255, 255, 255, 1), 40px 40px 0 0 rgba(255, 255, 255, 1), 60px 40px 0 0 rgba(255, 255, 255, 1), 95px 40px 0 0 rgba(255, 255, 255, 1), 115px 40px 0 0 rgba(255, 255, 255, 1), 130px 40px 0 0 rgba(255, 255, 255, 1), 15px 45px 0 0 rgba(255, 255, 255, 1), 20px 45px 0 0 rgba(255, 255, 255, 1), 25px 45px 0 0 rgba(255, 255, 255, 1), 30px 45px 0 0 rgba(255, 255, 255, 1), 40px 45px 0 0 rgba(255, 255, 255, 1), 60px 45px 0 0 rgba(255, 255, 255, 1), 95px 45px 0 0 rgba(255, 255, 255, 1), 115px 45px 0 0 rgba(255, 255, 255, 1), 120px 45px 0 0 rgba(255, 255, 255, 1), 125px 45px 0 0 rgba(255, 255, 255, 1), 130px 45px 0 0 rgba(255, 255, 255, 1), 20px 55px 0 0 rgba(255, 255, 255, 1), 40px 55px 0 0 rgba(255, 255, 255, 1), 50px 55px 0 0 rgba(255, 255, 255, 1), 55px 55px 0 0 rgba(255, 255, 255, 1), 60px 55px 0 0 rgba(255, 255, 255, 1), 65px 55px 0 0 rgba(255, 255, 255, 1), 75px 55px 0 0 rgba(255, 255, 255, 1), 95px 55px 0 0 rgba(255, 255, 255, 1), 105px 55px 0 0 rgba(255, 255, 255, 1), 110px 55px 0 0 rgba(255, 255, 255, 1), 115px 55px 0 0 rgba(255, 255, 255, 1), 120px 55px 0 0 rgba(255, 255, 255, 1), 125px 55px 0 0 rgba(255, 255, 255, 1), 20px 60px 0 0 rgba(255, 255, 255, 1), 25px 60px 0 0 rgba(255, 255, 255, 1), 40px 60px 0 0 rgba(255, 255, 255, 1), 50px 60px 0 0 rgba(255, 255, 255, 1), 80px 60px 0 0 rgba(255, 255, 255, 1), 90px 60px 0 0 rgba(255, 255, 255, 1), 115px 60px 0 0 rgba(255, 255, 255, 1), 20px 65px 0 0 rgba(255, 255, 255, 1), 30px 65px 0 0 rgba(255, 255, 255, 1), 40px 65px 0 0 rgba(255, 255, 255, 1), 50px 65px 0 0 rgba(255, 255, 255, 1), 55px 65px 0 0 rgba(255, 255, 255, 1), 60px 65px 0 0 rgba(255, 255, 255, 1), 85px 65px 0 0 rgba(255, 255, 255, 1), 115px 65px 0 0 rgba(255, 255, 255, 1), 20px 70px 0 0 rgba(255, 255, 255, 1), 35px 70px 0 0 rgba(255, 255, 255, 1), 40px 70px 0 0 rgba(255, 255, 255, 1), 50px 70px 0 0 rgba(255, 255, 255, 1), 80px 70px 0 0 rgba(255, 255, 255, 1), 90px 70px 0 0 rgba(255, 255, 255, 1), 115px 70px 0 0 rgba(255, 255, 255, 1), 20px 75px 0 0 rgba(255, 255, 255, 1), 40px 75px 0 0 rgba(255, 255, 255, 1), 50px 75px 0 0 rgba(255, 255, 255, 1), 55px 75px 0 0 rgba(255, 255, 255, 1), 60px 75px 0 0 rgba(255, 255, 255, 1), 65px 75px 0 0 rgba(255, 255, 255, 1), 75px 75px 0 0 rgba(255, 255, 255, 1), 95px 75px 0 0 rgba(255, 255, 255, 1), 115px 75px 0 0 rgba(255, 255, 255, 1), 15px 90px 0 0 rgba(255, 255, 255, 1), 40px 90px 0 0 rgba(255, 255, 255, 1), 45px 90px 0 0 rgba(255, 255, 255, 1), 50px 90px 0 0 rgba(255, 255, 255, 1), 55px 90px 0 0 rgba(255, 255, 255, 1), 65px 90px 0 0 rgba(255, 255, 255, 1), 80px 90px 0 0 rgba(255, 255, 255, 1), 90px 90px 0 0 rgba(255, 255, 255, 1), 95px 90px 0 0 rgba(255, 255, 255, 1), 100px 90px 0 0 rgba(255, 255, 255, 1), 105px 90px 0 0 rgba(255, 255, 255, 1), 115px 90px 0 0 rgba(255, 255, 255, 1), 15px 95px 0 0 rgba(255, 255, 255, 1), 40px 95px 0 0 rgba(255, 255, 255, 1), 65px 95px 0 0 rgba(255, 255, 255, 1), 80px 95px 0 0 rgba(255, 255, 255, 1), 90px 95px 0 0 rgba(255, 255, 255, 1), 115px 95px 0 0 rgba(255, 255, 255, 1), 15px 100px 0 0 rgba(255, 255, 255, 1), 40px 100px 0 0 rgba(255, 255, 255, 1), 45px 100px 0 0 rgba(255, 255, 255, 1), 50px 100px 0 0 rgba(255, 255, 255, 1), 65px 100px 0 0 rgba(255, 255, 255, 1), 80px 100px 0 0 rgba(255, 255, 255, 1), 90px 100px 0 0 rgba(255, 255, 255, 1), 95px 100px 0 0 rgba(255, 255, 255, 1), 100px 100px 0 0 rgba(255, 255, 255, 1), 115px 100px 0 0 rgba(255, 255, 255, 1), 15px 105px 0 0 rgba(255, 255, 255, 1), 40px 105px 0 0 rgba(255, 255, 255, 1), 65px 105px 0 0 rgba(255, 255, 255, 1), 80px 105px 0 0 rgba(255, 255, 255, 1), 90px 105px 0 0 rgba(255, 255, 255, 1), 115px 105px 0 0 rgba(255, 255, 255, 1), 15px 110px 0 0 rgba(255, 255, 255, 1), 20px 110px 0 0 rgba(255, 255, 255, 1), 25px 110px 0 0 rgba(255, 255, 255, 1), 30px 110px 0 0 rgba(255, 255, 255, 1), 40px 110px 0 0 rgba(255, 255, 255, 1), 45px 110px 0 0 rgba(255, 255, 255, 1), 50px 110px 0 0 rgba(255, 255, 255, 1), 55px 110px 0 0 rgba(255, 255, 255, 1), 70px 110px 0 0 rgba(255, 255, 255, 1), 75px 110px 0 0 rgba(255, 255, 255, 1), 90px 110px 0 0 rgba(255, 255, 255, 1), 95px 110px 0 0 rgba(255, 255, 255, 1), 100px 110px 0 0 rgba(255, 255, 255, 1), 105px 110px 0 0 rgba(255, 255, 255, 1), 115px 110px 0 0 rgba(255, 255, 255, 1), 120px 110px 0 0 rgba(255, 255, 255, 1), 125px 110px 0 0 rgba(255, 255, 255, 1), 130px 110px 0 0 rgba(255, 255, 255, 1);
  height: 5px;
  width: 5px;
  opacity: 1;
  position: relative;
  top: -8em;
  left: -8em;
  z-index: -2;
}

@keyframes move {
  20% {
    top: -1.25em;
    left: -12em;
    opacity: 1;
  }

  30% {
    top: -1.25em;
  }

  40% {
    top: -5.5em;
    opacity: 1;
  }

  50% {
    top: -6em;
    left: -1em;
    opacity: 1;
  }

  60% {
    top: -6em;
    left: 4em;
    opacity: 1;
  }

  70% {
    top: -1.25em;
  }

  80% {
    top: -1.25em;
    left: 12em;
    opacity: 1;
  }

  90% {
    top: -1.25em;
    left: 25em;
    opacity: 1;
  }

  100% {
    left: 28em;
    opacity: 0;
  }
}

@keyframes run {
  5% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(225,31,3,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(250,184,2,1), 25px 65px 0 0 rgba(250,184,2,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(225,31,3,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(132,122,0,1), 80px 65px 0 0 rgba(250,184,2,1), 85px 65px 0 0 rgba(250,184,2,1), 90px 65px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(250,184,2,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(132,122,0,1), 80px 70px 0 0 rgba(132,122,0,1), 85px 70px 0 0 rgba(250,184,2,1), 90px 70px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(132,122,0,1), 85px 80px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(225,31,3,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(132,122,0,1), 85px 85px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(225,31,3,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 75px 90px 0 0 rgba(225,31,3,1), 80px 90px 0 0 rgba(132,122,0,1), 85px 90px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 30px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(132,122,0,1), 25px 100px 0 0 rgba(132,122,0,1), 30px 100px 0 0 rgba(132,122,0,1), 35px 100px 0 0 rgba(132,122,0,1), 40px 100px 0 0 rgba(132,122,0,1);
  }

  10% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(225,31,3,1), 60px 70px 0 0 rgba(250,184,2,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 35px 75px 0 0 rgba(132,122,0,1), 40px 75px 0 0 rgba(132,122,0,1), 45px 75px 0 0 rgba(132,122,0,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(132,122,0,1), 45px 80px 0 0 rgba(132,122,0,1), 50px 80px 0 0 rgba(250,184,2,1), 55px 80px 0 0 rgba(250,184,2,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(132,122,0,1), 50px 85px 0 0 rgba(250,184,2,1), 55px 85px 0 0 rgba(250,184,2,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(132,122,0,1), 65px 90px 0 0 rgba(132,122,0,1), 70px 90px 0 0 rgba(132,122,0,1), 75px 90px 0 0 rgba(132,122,0,1), 45px 95px 0 0 rgba(132,122,0,1), 50px 95px 0 0 rgba(132,122,0,1), 55px 95px 0 0 rgba(132,122,0,1), 60px 95px 0 0 rgba(132,122,0,1);
  }

  15% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(132,122,0,1), 60px 60px 0 0 rgba(225,31,3,1), 65px 60px 0 0 rgba(132,122,0,1), 75px 60px 0 0 rgba(250,184,2,1), 35px 65px 0 0 rgba(250,184,2,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(132,122,0,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(250,184,2,1), 75px 65px 0 0 rgba(250,184,2,1), 80px 65px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 35px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(225,31,3,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(132,122,0,1), 65px 70px 0 0 rgba(132,122,0,1), 70px 70px 0 0 rgba(250,184,2,1), 75px 70px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(132,122,0,1), 35px 75px 0 0 rgba(132,122,0,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 25px 90px 0 0 rgba(132,122,0,1), 50px 90px 0 0 rgba(132,122,0,1), 55px 90px 0 0 rgba(132,122,0,1), 60px 90px 0 0 rgba(132,122,0,1), 50px 95px 0 0 rgba(132,122,0,1), 55px 95px 0 0 rgba(132,122,0,1), 60px 95px 0 0 rgba(132,122,0,1), 65px 95px 0 0 rgba(132,122,0,1);
  }

  20% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(225,31,3,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(250,184,2,1), 25px 65px 0 0 rgba(250,184,2,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(225,31,3,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(132,122,0,1), 80px 65px 0 0 rgba(250,184,2,1), 85px 65px 0 0 rgba(250,184,2,1), 90px 65px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(250,184,2,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(132,122,0,1), 80px 70px 0 0 rgba(132,122,0,1), 85px 70px 0 0 rgba(250,184,2,1), 90px 70px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(132,122,0,1), 85px 80px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(225,31,3,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(132,122,0,1), 85px 85px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(225,31,3,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 75px 90px 0 0 rgba(225,31,3,1), 80px 90px 0 0 rgba(132,122,0,1), 85px 90px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 30px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(132,122,0,1), 25px 100px 0 0 rgba(132,122,0,1), 30px 100px 0 0 rgba(132,122,0,1), 35px 100px 0 0 rgba(132,122,0,1), 40px 100px 0 0 rgba(132,122,0,1);
  }

  25% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(225,31,3,1), 60px 70px 0 0 rgba(250,184,2,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 35px 75px 0 0 rgba(132,122,0,1), 40px 75px 0 0 rgba(132,122,0,1), 45px 75px 0 0 rgba(132,122,0,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(132,122,0,1), 45px 80px 0 0 rgba(132,122,0,1), 50px 80px 0 0 rgba(250,184,2,1), 55px 80px 0 0 rgba(250,184,2,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(132,122,0,1), 50px 85px 0 0 rgba(250,184,2,1), 55px 85px 0 0 rgba(250,184,2,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(132,122,0,1), 65px 90px 0 0 rgba(132,122,0,1), 70px 90px 0 0 rgba(132,122,0,1), 75px 90px 0 0 rgba(132,122,0,1), 45px 95px 0 0 rgba(132,122,0,1), 50px 95px 0 0 rgba(132,122,0,1), 55px 95px 0 0 rgba(132,122,0,1), 60px 95px 0 0 rgba(132,122,0,1);
  }

  30% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  35% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  40% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  45% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  50% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  55% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  60% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  65% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  70% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(225,31,3,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(250,184,2,1), 25px 65px 0 0 rgba(250,184,2,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(225,31,3,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(132,122,0,1), 80px 65px 0 0 rgba(250,184,2,1), 85px 65px 0 0 rgba(250,184,2,1), 90px 65px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(250,184,2,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(132,122,0,1), 80px 70px 0 0 rgba(132,122,0,1), 85px 70px 0 0 rgba(250,184,2,1), 90px 70px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(132,122,0,1), 85px 80px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(225,31,3,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(132,122,0,1), 85px 85px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(225,31,3,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 75px 90px 0 0 rgba(225,31,3,1), 80px 90px 0 0 rgba(132,122,0,1), 85px 90px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 30px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(132,122,0,1), 25px 100px 0 0 rgba(132,122,0,1), 30px 100px 0 0 rgba(132,122,0,1), 35px 100px 0 0 rgba(132,122,0,1), 40px 100px 0 0 rgba(132,122,0,1);
  }

  75% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(225,31,3,1), 60px 70px 0 0 rgba(250,184,2,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 35px 75px 0 0 rgba(132,122,0,1), 40px 75px 0 0 rgba(132,122,0,1), 45px 75px 0 0 rgba(132,122,0,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(132,122,0,1), 45px 80px 0 0 rgba(132,122,0,1), 50px 80px 0 0 rgba(250,184,2,1), 55px 80px 0 0 rgba(250,184,2,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(132,122,0,1), 50px 85px 0 0 rgba(250,184,2,1), 55px 85px 0 0 rgba(250,184,2,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(132,122,0,1), 65px 90px 0 0 rgba(132,122,0,1), 70px 90px 0 0 rgba(132,122,0,1), 75px 90px 0 0 rgba(132,122,0,1), 45px 95px 0 0 rgba(132,122,0,1), 50px 95px 0 0 rgba(132,122,0,1), 55px 95px 0 0 rgba(132,122,0,1), 60px 95px 0 0 rgba(132,122,0,1);
  }

  80% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(132,122,0,1), 60px 60px 0 0 rgba(225,31,3,1), 65px 60px 0 0 rgba(132,122,0,1), 75px 60px 0 0 rgba(250,184,2,1), 35px 65px 0 0 rgba(250,184,2,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(132,122,0,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(250,184,2,1), 75px 65px 0 0 rgba(250,184,2,1), 80px 65px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 35px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(225,31,3,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(132,122,0,1), 65px 70px 0 0 rgba(132,122,0,1), 70px 70px 0 0 rgba(250,184,2,1), 75px 70px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(132,122,0,1), 35px 75px 0 0 rgba(132,122,0,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 25px 90px 0 0 rgba(132,122,0,1), 50px 90px 0 0 rgba(132,122,0,1), 55px 90px 0 0 rgba(132,122,0,1), 60px 90px 0 0 rgba(132,122,0,1), 50px 95px 0 0 rgba(132,122,0,1), 55px 95px 0 0 rgba(132,122,0,1), 60px 95px 0 0 rgba(132,122,0,1), 65px 95px 0 0 rgba(132,122,0,1);
  }

  85% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(225,31,3,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(250,184,2,1), 25px 65px 0 0 rgba(250,184,2,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(225,31,3,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(132,122,0,1), 80px 65px 0 0 rgba(250,184,2,1), 85px 65px 0 0 rgba(250,184,2,1), 90px 65px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(250,184,2,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(132,122,0,1), 80px 70px 0 0 rgba(132,122,0,1), 85px 70px 0 0 rgba(250,184,2,1), 90px 70px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(132,122,0,1), 85px 80px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(225,31,3,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(132,122,0,1), 85px 85px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(225,31,3,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 75px 90px 0 0 rgba(225,31,3,1), 80px 90px 0 0 rgba(132,122,0,1), 85px 90px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 30px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(132,122,0,1), 25px 100px 0 0 rgba(132,122,0,1), 30px 100px 0 0 rgba(132,122,0,1), 35px 100px 0 0 rgba(132,122,0,1), 40px 100px 0 0 rgba(132,122,0,1);
  }

  90% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(225,31,3,1), 60px 70px 0 0 rgba(250,184,2,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 35px 75px 0 0 rgba(132,122,0,1), 40px 75px 0 0 rgba(132,122,0,1), 45px 75px 0 0 rgba(132,122,0,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(132,122,0,1), 45px 80px 0 0 rgba(132,122,0,1), 50px 80px 0 0 rgba(250,184,2,1), 55px 80px 0 0 rgba(250,184,2,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(132,122,0,1), 50px 85px 0 0 rgba(250,184,2,1), 55px 85px 0 0 rgba(250,184,2,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(132,122,0,1), 65px 90px 0 0 rgba(132,122,0,1), 70px 90px 0 0 rgba(132,122,0,1), 75px 90px 0 0 rgba(132,122,0,1), 45px 95px 0 0 rgba(132,122,0,1), 50px 95px 0 0 rgba(132,122,0,1), 55px 95px 0 0 rgba(132,122,0,1), 60px 95px 0 0 rgba(132,122,0,1);
  }

  95% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(132,122,0,1), 60px 60px 0 0 rgba(225,31,3,1), 65px 60px 0 0 rgba(132,122,0,1), 75px 60px 0 0 rgba(250,184,2,1), 35px 65px 0 0 rgba(250,184,2,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(132,122,0,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(250,184,2,1), 75px 65px 0 0 rgba(250,184,2,1), 80px 65px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 35px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(225,31,3,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(132,122,0,1), 65px 70px 0 0 rgba(132,122,0,1), 70px 70px 0 0 rgba(250,184,2,1), 75px 70px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(132,122,0,1), 35px 75px 0 0 rgba(132,122,0,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 25px 90px 0 0 rgba(132,122,0,1), 50px 90px 0 0 rgba(132,122,0,1), 55px 90px 0 0 rgba(132,122,0,1), 60px 90px 0 0 rgba(132,122,0,1), 50px 95px 0 0 rgba(132,122,0,1), 55px 95px 0 0 rgba(132,122,0,1), 60px 95px 0 0 rgba(132,122,0,1), 65px 95px 0 0 rgba(132,122,0,1);
  }

  100% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(225,31,3,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(250,184,2,1), 25px 65px 0 0 rgba(250,184,2,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(225,31,3,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(132,122,0,1), 80px 65px 0 0 rgba(250,184,2,1), 85px 65px 0 0 rgba(250,184,2,1), 90px 65px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(250,184,2,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(132,122,0,1), 80px 70px 0 0 rgba(132,122,0,1), 85px 70px 0 0 rgba(250,184,2,1), 90px 70px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(132,122,0,1), 85px 80px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(225,31,3,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(132,122,0,1), 85px 85px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(225,31,3,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 75px 90px 0 0 rgba(225,31,3,1), 80px 90px 0 0 rgba(132,122,0,1), 85px 90px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 30px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(132,122,0,1), 25px 100px 0 0 rgba(132,122,0,1), 30px 100px 0 0 rgba(132,122,0,1), 35px 100px 0 0 rgba(132,122,0,1), 40px 100px 0 0 rgba(132,122,0,1);
  }
}
</style>


================================================
FILE: Notifications/Sameer2244_white-eagle-79.html
================================================
<div class="notification">
  <div class="shinner">
    <div class="mover"></div>
    <div class="mover2"></div>
  </div>
  <svg version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="121.46" width="122.88" class="wing">
 <g>
  <g id="svg_1">
   <path class="st0" d="m12.35,121.46c-8.01,-9.72 -11.92,-19.29 -12.31,-28.71c-0.82,-19.74 10.88,-34.47 28.26,-45.08c18.28,-11.16 37.08,-13.93 55.36,-22.25c9.13,-4.15 20.02,-10.95 38.14,-25.42c5.92,15.69 -12.92,40.9 -43.52,54.23c9.48,0.37 19.69,-2.54 30.85,-9.74c-0.76,19.94 -16.46,32.21 -51.3,36.95c7.33,2.45 16.09,2.58 27.27,-0.58c-10.77,35.95 -55.2,10.2 -72.75,40.6l0,0z" fill-rule="evenodd" clip-rule="evenodd" id="svg_2" fill="#fff"></path>
  </g>
 </g>
</svg>

<svg version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="121.46" width="122.88" class="wing1">
 <g>
  <g id="svg_1">
   <path class="st0" d="m12.35,121.46c-8.01,-9.72 -11.92,-19.29 -12.31,-28.71c-0.82,-19.74 10.88,-34.47 28.26,-45.08c18.28,-11.16 37.08,-13.93 55.36,-22.25c9.13,-4.15 20.02,-10.95 38.14,-25.42c5.92,15.69 -12.92,40.9 -43.52,54.23c9.48,0.37 19.69,-2.54 30.85,-9.74c-0.76,19.94 -16.46,32.21 -51.3,36.95c7.33,2.45 16.09,2.58 27.27,-0.58c-10.77,35.95 -55.2,10.2 -72.75,40.6l0,0z" fill-rule="evenodd" clip-rule="evenodd" id="svg_2" fill="#fff"></path>
  </g>
 </g>
</svg>
  <div></div>
  <p class="levelup">LEVEL UP!</p>
  <p class="congrats">Congratulations!</p>
  <div class="bg"></div>
    
</div>
<style>
/* From Uiverse.io by Sameer2244 - Tags: notification */
.notification {
  width: 250px;
  height: 60px;
  background: rgb(255, 255, 255);
  border-radius: 14px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.377);
}

.shinner {
  position: absolute;
  width: 250px;
  height: 60px;
  overflow: hidden;
  top: 0;
  left: 0;
  border-radius: 0.5rem;
}

.mover {
  position: absolute;
  border-top: 60px solid rgba(255, 255, 255, 0.4);
  border-right: 30px solid transparent;
  left: 50px;
  filter: blur( 4px );
  animation: shine 2s infinite ease-in-out;
}

.mover2 {
  content: "";
  position: absolute;
  border-top: 60px solid rgba(255, 255, 255, 0.4);
  border-left: 30px solid transparent;
  transform: scaleY(-1);
  left: 20px;
  filter: blur( 4px );
  animation: shine2 2s infinite ease-in-out;
}

.levelup {
  color: rgb(18, 175, 4);
  text-align: center;
  padding-top: 0.6rem;
  font-weight: bolder;
  font-size: 1.8rem;
  z-index: 3;
}

.congrats {
  font-family: cursive;
  font-size: 1.5rem;
  color: rgb(240, 240, 240);
  text-align: center;
  padding-top: 1rem;
  text-shadow: 1px 4px 7px rgb(7, 7, 7);
}

.wing {
  transform: translate(150px,-100px);
  position: absolute;
  z-index: -1;
  animation: winganime 2s ease-in-out infinite;
}

.wing1 {
  transform: translate(-30px,-100px) scaleX(-1);
  position: absolute;
  z-index: -1;
  animation: winganime2 2s ease-in-out infinite;
}

.bg {
  background: rgb(223, 223, 105);
  width: 130px;
  height: 130px;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%,-50%);
  z-index: -2;
  border-radius: 50%;
  box-shadow: rgb(252, 255, 54,0.7) 0px 4px 105px, rgb(252, 255, 54,0.7) 0px -24px 130px, rgb(252, 255, 54,0.7) 0px 4px 446px, rgb(252, 255, 54,0.7) 0px 12px 13px, rgb(252, 255, 54,0.7) 0px -3px 5px;
  animation: rot 2.5s infinite ease-in-out;
  transform-origin: center;
}

@keyframes rot {
  0% {
    transform: translate(50%,-50%) rotate(0deg);
  }

  100% {
    transform: translate(50%,-50%) rotate(360deg);
  }
}

@keyframes winganime {
  0% {
    transform: translate(150px,-100px) rotateY(0deg);
  }

  50% {
    transform: translate(150px,-95px) rotateY(25deg);
  }

  100% {
    transform: translate(150px,-100px) rotateY(0deg);
  }
}

@keyframes winganime2 {
  0% {
    transform: translate(-30px,-100px) rotateY(0deg) scaleX(-1);
  }

  50% {
    transform: translate(-30px,-95px) rotateY(-25deg) scaleX(-1);
  }

  100% {
    transform: translate(-30px,-100px) rotateY(0deg) scaleX(-1);
  }
}

@keyframes shine {
  0% {
    left: -50px;
  }

  100% {
    left: 300px;
  }
}

@keyframes shine2 {
  0% {
    left: -20px;
  }

  100% {
    left: 270px;
  }
}
</style>


================================================
FILE: Notifications/Santaval_massive-dingo-46.html
================================================
<div class="bannerContainer">
      
      <div class="banner">
        
        <div class="loader loader1"></div>
        <div class="loader loader2"></div>
        <div class="loader loader3"></div>
        

        
        <div class="loader mainCard">
          <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
            <path fill="#393E41" d="M192 64C86 64 0 150 0 256S86 448 192 448H448c106 0 192-86 192-192s-86-192-192-192H192zM496 248c-22.1 0-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40s-17.9 40-40 40zm-24 56c0 22.1-17.9 40-40 40s-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24v32h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H216v32c0 13.3-10.7 24-24 24s-24-10.7-24-24V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h32V200z"></path>
          </svg>
          <span>Well done</span>
          <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
            <path fill="#393E41" d="M192 64C86 64 0 150 0 256S86 448 192 448H448c106 0 192-86 192-192s-86-192-192-192H192zM496 248c-22.1 0-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40s-17.9 40-40 40zm-24 56c0 22.1-17.9 40-40 40s-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24v32h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H216v32c0 13.3-10.7 24-24 24s-24-10.7-24-24V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h32V200z"></path>
          </svg>

          
          <div class="loader secondCard">

            <span>Next Level</span>

          </div>
          
        </div>
      </div>
      
    </div>
    
<style>
/* From Uiverse.io by Santaval - Tags: notification */
/*Container*/

.bannerContainer {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  width: fit-content;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*Banner */

.bannerContainer .banner {
  background-color: #e7e5df;
  height: 70px;
  width: 250px;
  border-radius: 10px;
  position: relative;
  overflow-y: hidden;
}

/*Loaders */

.bannerContainer .banner .loader {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  position: absolute;
}

.bannerContainer .banner .loader1 {
  background-color: #393e41;
  animation: loader 0.5s linear 0s;
}

.bannerContainer .banner .loader2 {
  background-color: #44bba4;
  animation: loader 0.5s linear 0.2s;
}

.bannerContainer .banner .loader3 {
  background-color: #e7bb41;
  animation: loader 0.5s linear 0.3s;
}

/*Main card*/

.bannerContainer .banner .mainCard {
  width: 100%;
  background-color: #e7e5df;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #393e41;
  font-weight: bolder;
  animation: loader 0.5s linear 0.4s;
  border-radius: 10px;
}

.bannerContainer .banner span {
  font-size: 29px;
  font-weight: 900;
  transform: translateY(-120px);
  animation: appear 0.1s ease-in 0.9s forwards;
}

.bannerContainer .banner svg {
  width: 30px;
  transform: translateY(-100px);
  animation: appear 0.1s ease-in 0.9s forwards;
}

.bannerContainer .banner .mainCard:hover > .secondCard {
  height: 100%;
  color: #e7e5df;
}

/* Second card */

.bannerContainer .banner .secondCard {
  background-color: #393e41;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: transparent;
  height: 0px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

/* Animations */

@keyframes loader {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes appear {
  from {
    transform: translateY(-100px);
  }

  to {
    transform: translateY(0px);
  }
}

</style>


================================================
FILE: Notifications/StealthWorm_weak-rattlesnake-4.html
================================================
<div class="notification">
  <div class="text">
    <strong>LEVEL UP !!!</strong>
    <strong>CONGRATULATIONS !!!</strong>
  </div>

  <div class="crystal-border">
    <div class="crystal">
    </div>
  </div>

  <div class="progress-ring-m7">
  </div>
  <div class="progress-ring-m7-inner">
  </div>

  <svg height="100" width="100" class="progress-ring">
    <circle cy="50" cx="50" r="38" fill="transparent" stroke-width="7"></circle>
  </svg>

  <svg height="100" width="104" class="progress-ring-two">
    <circle cy="50" cx="50" r="45" fill="transparent" stroke-width="13"></circle>
  </svg>
  <svg height="100" width="100" class="progress-ring-two">
    <circle cy="50" cx="50" r="37" fill="transparent" stroke-width="10"></circle>
  </svg>

  <div class="wings">
  </div>

  <div class="shield">
    <div class="shield-up">
      <div class="shield-top-right">
        <div class="shield-top-right-inside">
        </div>
      </div>
      <div class="shield-top-left">
        <div class="shield-top-left-inside">
        </div>
      </div>
    </div>

    <div class="shield-down">
      <div class="shield-bottom-right">
        <div class="shield-bottom-right-inside">
        </div>
      </div>
      <div class="shield-bottom-left">
        <div class="shield-bottom-left-inside">
        </div>
      </div>
    </div>
  </div>

  <div class="line-center-border">
    <div class="line-center"></div>
  </div>
</div>


<style>
/* From Uiverse.io by StealthWorm - Tags: notification */
.notification {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 300px;
  height: 200px;
  border-radius: 0.3rem;
  justify-content: center;
  align-items: center;
  background: rgb(0, 0, 0);
  transition: all 3s ease;
}

.text {
  opacity: 0;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 300px;
  height: 200px;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  top: 1.5rem;
}

strong {
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.438);
  animation: gradient 5s ease infinite;
}

.notification:hover .text {
  opacity: 1;
  transition: 1s;
  transition-delay: 3s;
  transform: translateY(-1.5rem);
}

.notification:hover .crystal {
  animation: pulse_crystal 1s ease;
  transition: 1s;
  transform: scale(1.3);
  box-shadow: 0 0 5px rgb(255, 255, 255);
  background: conic-gradient(#3fb2ff 0%, #261caf 45%, #44d2eb 50%, #fdfdfd 100%);
  clip-path: polygon(50% 0, 84% 30%, 84% 70%, 50% 100%, 15% 70%, 15% 30%);
}

.notification:hover .crystal-border {
  transition: 1s;
  clip-path: polygon(50% 0, 90% 30%, 90% 70%, 50% 100%, 10% 70%, 10% 30%);
}

.crystal-border {
  z-index: 3;
  display: flex;
  position: absolute;
  width: 45px;
  height: 45px;
  background: #000000;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.crystal {
  inset: 12px;
  position: absolute;
  width: 20px;
  height: 20px;
  background: conic-gradient(#ca22b9 0%, #792e83 45%, #ff26e9 50%, #ffffff 100%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: all 1s ease;
}

.line-center-border {
  z-index: 2;
  display: flex;
  position: absolute;
  width: 10rem;
  height: 10rem;
  align-items: center;
  justify-content: center;
  background: #000000;
  clip-path: polygon(50% 20%, 60% 18%, 60% 80%, 50% 90%, 40% 80%, 40% 18%);
}

.line-center {
  display: flex;
  position: absolute;
  margin: 4px;
  width: 3rem;
  top: 1.8rem;
  height: 7.7rem;
  transition: 2s;
  opacity: 0;
  background: linear-gradient(90deg, #796f1c 50%, #c7b82f 50%);
  clip-path: polygon(50% 5%, 60% 8%, 60% 87%, 50% 90%, 40% 87%, 40% 8%);
}

.notification:hover .line-center {
  z-index: 1;
  opacity: 1;
}

.progress-ring {
  z-index: 2;
  position: absolute;
  top: 22%;
  stroke-dasharray: 135 120%;
  stroke: #113736;
  border-radius: 50%;
  transform: rotate(-12deg);
  transition: all 4s ease;
}

.notification:hover .progress-ring__blue {
  transition: all 2s ease;
  stroke-dasharray: 13 5;
}

.progress-ring-m7 {
  z-index: 1;
  visibility: hidden;
  width: 7rem;
  height: 5.5rem;
  top: 28%;
  background: transparent;
  position: absolute;
  border-radius: 50%;
  border-style: double;
  border: 8px solid #b9a80f;
  border-bottom-color: transparent;
  border-top-color: transparent;
}

.progress-ring-m7-inner {
  z-index: 1;
  visibility: hidden;
  display: flex;
  box-sizing: content-box;
  width: 6rem;
  height: 4.5rem;
  background: transparent;
  position: absolute;
  border-radius: 50%;
  border-style: dashed;
  border: 6px dashed #113736;
  border-bottom-color: transparent;
  border-top-color: transparent;
}

.notification:hover .progress-ring-m7 {
  visibility: visible;
  animation: pulse_m7 1.5s ease-in-out;
}

.notification:hover .progress-ring-m7-inner {
  visibility: visible;
  transition: all 3s ease;
  animation: pulse_m7 1.5s ease-in-out;
}

.progress-ring-two:nth-of-type(2) {
  z-index: 1;
  position: absolute;
  top: 20%;
  stroke-dasharray: 140 100;
  stroke: #b9a80f;
  border-radius: 50%;
  transform: rotate(27deg);
}

.progress-ring-two:nth-of-type(3) {
  z-index: 1;
  position: absolute;
  top: 22%;
  stroke-dasharray: 140 100;
  stroke: #b9a80f;
  border-radius: 50%;
  transform: rotate(-20deg);
}

.notification:hover svg {
  animation: pulse_svg 3s ease;
}

.wings {
  z-index: 1;
  position: absolute;
  top: 20%;
  width: 10rem;
  height: 8rem;
  clip-path: polygon(
  0% 0%, 28% 27%, 32% 31%, 27% 40%, 25% 50%, 
  30% 60%, 47% 67%, 45% 67%, 57% 66%, 64% 64%, 
  70% 59%, 70% 46%, 70% 46%, 75% 40%, 

  70% 26%, 100% 0%, 100% 10%, 95% 14%,

  95% 19%, 90% 23%, 90% 29%, 69% 50%, 
  72% 56%, 69.38% 62%, 65% 65%, 57.5% 66%, 50% 67%, 41% 67%, 
  32% 64%, 
  
  28% 49%, 10% 30%, 10% 22%, 5% 18%, 5% 13%, 0% 9%
  );
  background-color: #b9a80f;
  transition: all px2s ease;
}

.notification:hover .wings {
  transform: scale(1.2);
  animation: pulse_wing 3s ease;
}

.notification:hover .shield {
  animation: pulse 2s ease;
}

.notification:hover .shield-bottom-left {
  left: 3.5rem;
}

.notification:hover .shield-bottom-right {
  left: 6.2rem;
}

.shield {
  z-index: 4;
  display: flex;
  position: absolute;
  width: fit-content;
  top: 19%;
  left: 17%;
  flex-direction: column;
  gap: 3rem;
  transition: all 2s ease;
}

.shield-up, 
.shield-down {
  display: flex;
  position: relative;
}

.shield-bottom-left {
  z-index: 1;
  display: flex;
  position: absolute;
  width: 3.4rem;
  height: 5rem;
  left: 4rem;
  clip-path: polygon(22% 12%, 60% 36%, 60% 90%, 22% 64%);
  background-color: #696115;
}

.shield-bottom-right {
  z-index: 1;
  display: flex;
  position: absolute;
  width: 3.4rem;
  height: 5rem;
  left: 5.7rem;
  clip-path: polygon(62% 12%, 20% 36%, 20% 90%, 62% 64%);
  background-color: #696115;
}

.shield-bottom-right-inside {
  clip-path: polygon(62% 12%, 20% 36%, 20% 90%, 62% 64%);
}

.shield-bottom-left-inside {
  clip-path: polygon(22% 12%, 60% 36%, 60% 90%, 22% 64%);
}

.shield-bottom-left-inside,
.shield-bottom-right-inside {
  position: absolute;
  background-color: #b9a80f;
  inset: 5px;
}

.shield-top-left {
  display: flex;
  position: absolute;
  width: 3.4rem;
  height: 4rem;
  left: 4rem;
  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 72%, 40% 86%, 18% 70%, 18% 74%, 22% 65%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
  background-color: #696115;
}

.shield-top-right {
  display: flex;
  position: absolute;
  width: 3.4rem;
  height: 4rem;
  left: 5rem;
  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 60% 85%, 80% 70%, 76% 60%, 75% 55%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
  background-color: #696115;
}

.notification:hover .shield-top-left {
  left: 3.6rem;
  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 70%, 45% 78% , 45% 95%, 15% 70%, 15% 68%, 22% 66%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
}

.notification:hover .shield-top-right {
  left: 5.4rem;
  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 55% 78%, 55% 95%, 84% 75%, 78% 68%, 79% 69%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
}

.notification:hover .shield-top-right-inside {
  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 55% 78%, 55% 95%, 84% 75%, 78% 68%, 79% 69%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
}

.notification:hover .shield-top-left-inside {
  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 70%, 45% 78% , 45% 95%, 15% 70%, 15% 68%, 22% 66%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
}

.shield-top-right-inside {
  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 60% 85%, 80% 70%, 76% 60%, 75% 55%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
}

.shield-top-left-inside {
  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 72%, 40% 86%, 18% 70%, 18% 74%, 22% 65%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
}

.shield-top-left-inside,
.shield-top-right-inside {
  position: absolute;
  background-color: #b9a80f;
  inset: 4px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  70% {
    transform: scale(1.3);
    left: 7%;
    filter: brightness(150%);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pulse_wing {
  0% {
    transform: scale(1);
  }

  70% {
    transform: scale(1.3);
    filter: brightness(150%);
  }

  100% {
    transform: scale(1.2);
    filter: brightness(100%);
  }
}

@keyframes pulse_svg {
  0% {
    filter: brightness(100%);
  }

  70% {
    filter: brightness(150%);
  }

  100% {
    filter: brightness(100%);
  }
}

@keyframes pulse_m7 {
  0% {
    filter: brightness(100%);
    visibility: hidden;
    transform: scale(1);
  }

  70% {
    filter: brightness(150%);
    visibility: visible;
    transform: scale(1.3);
  }

  100% {
    filter: brightness(100%);
    visibility: visible;
    transform: scale(1);
  }
}

@keyframes pulse_crystal {
  0% {
    transform: scale(1);
    transform: rotateY(3rad);
  }

  70% {
    transform: scale(1.5);
    filter: brightness(180%);
    transform: rotateY(10rad);
  }

  100% {
    transform: scale(1.3);
    filter: brightness(100%);
    transform: rotateY(80rad);
  }
}

@keyframes show {
  0% {
    visibility: hidden;
    transform: translateY(0);
  }

  100% {
    visibility: visible;
    transform: translateY(5rem);
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

</style>


================================================
FILE: Notifications/WittyHydra_nervous-zebra-0.html
================================================
<div class="notification">
  <div class="notification-top">
    <span class="level-up">Level Up!</span>
  </div>
  <div class="notification-bottom">
    <span class="level">Level 5</span>
    <button class="next-level-button">Next Level</button>
  </div>
</div>
<style>
/* From Uiverse.io by WittyHydra - Tags: notification */
.notification {
  --bg-color: #fff;
  --text-color: #1c1f2b;
  --highlight-color: #fc9a32;
  --button-color: #3d3f4e;
  --button-color-hover: #27282f;
  position: relative;
  width: 300px;
  height: 100px;
  background-color: var(--bg-color);
  border-radius: 10px;
  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .notification {
    --bg-color: #1c1f2b;
    --text-color: #fff;
    --highlight-color: #fc9a32;
    --button-color: #3d3f4e;
    --button-color-hover: #27282f;
  }
}

.notification-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: var(--highlight-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-animation: slide-down 1s ease-out forwards;
  animation: slide-down 1s ease-out forwards;
}

.notification-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: var(--bg-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 20px;
}

.level-up {
  color: var(--text-color);
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  -webkit-animation: rotate-text 1s ease-in-out;
  animation: rotate-text 1s ease-in-out;
}

.level {
  color: var(--text-color);
  font-size: 20px;
  font-weight: bold;
  margin-right: 10px;
}

.next-level-button {
  background-color: var(--button-color);
  color: var(--text-color);
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease-out;
  transition: background-color 0.3s ease-out;
}

.next-level-button {
  background-color: #efefef;
  color: #000;
  font-weight: 600;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0px 0px 10px #888888;
  box-shadow: 0px 0px 10px #888888;
}

@-webkit-keyframes slide-down {
  from {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes rotate-text {
  0% {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
  }
}

@keyframes rotate-text {
  0% {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
  }
}

.next-level-button:hover {
  background-color: aqua;
  color: #000;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-box-shadow: 0px 0px 15px #888888;
  box-shadow: 0px 0px 15px #888888;
}

.notification {
  background-color: #1e2b3c;
  color: #c3daf6;
}

.notification:hover {
  background-color: #c3daf6;
  color: #1e2b3c;
}

.next-level-button:hover {
  background-color: #1e2b3c;
  color: #c3daf6;
}

/* Light Mode */
.notification {
  background-color: #c3daf6;
  color: #1e2b3c;
}

.notification:hover {
  background-color: #1e2b3c;
  color: #c3daf6;
}

.next-level-button:hover {
  background-color: #c3daf6;
  color: #1e2b3c;
}
</style>


================================================
FILE: Notifications/Yaya12085_smooth-seahorse-63.html
================================================
<div class="notification">
  <div class="icon">
    <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon" viewBox="0 0 1024 1024"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"><path fill="#E9E8FF" d="M512 512m-480 0a480 480 0 1 0 960 0 480 480 0 1 0-960 0Z"></path><path fill="#8880FE" d="M723.2 704c-25.6 0-51.2-12.8-70.4-32L582.4 582.4H435.2l-38.4 64c-19.2 32-51.2 57.6-89.6 57.6-57.6 0-102.4-44.8-102.4-102.4v-12.8V576l25.6-166.4c6.4-70.4 57.6-121.6 128-121.6 32 0 70.4 12.8 89.6 38.4 25.6 0 89.6-6.4 128 0 25.6-25.6 57.6-32 89.6-32 51.2 0 96 32 115.2 83.2v12.8l38.4 179.2c0 6.4 6.4 19.2 6.4 32 0 51.2-44.8 102.4-102.4 102.4z"></path><path fill="#FFFFFF" d="M716.8 460.8c-12.8 0-19.2-12.8-19.2-19.2s6.4-19.2 19.2-19.2c12.8 0 19.2 12.8 19.2 19.2s-6.4 19.2-19.2 19.2z m-108.8 0c-12.8 0-19.2-12.8-19.2-19.2s6.4-19.2 19.2-19.2c12.8 0 19.2 12.8 19.2 19.2s-6.4 19.2-19.2 19.2z m51.2 57.6c-6.4 0-19.2-6.4-19.2-19.2s6.4-19.2 19.2-19.2 19.2 12.8 19.2 19.2-6.4 19.2-19.2 19.2z m0-115.2c-6.4 0-19.2-6.4-19.2-19.2s6.4-19.2 19.2-19.2 19.2 12.8 19.2 19.2-6.4 19.2-19.2 19.2zM345.6 416h-51.2V448h51.2v51.2h32V448h51.2v-32h-51.2v-51.2h-32z"></path></g></svg>
  </div>
  <div class="messages">
    <span class="title">Well done!</span>
    <span class="description">New level reached.</span>
    <span class="level">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#fff" d="M15 16L12.1937 13.1937V13.1937C12.0867 13.0867 11.9133 13.0867 11.8063 13.1937V13.1937L9 16"></path> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#fff" d="M15 11L12.1505 8.15049V8.15049C12.0674 8.06738 11.9326 8.06738 11.8495 8.15049V8.15049L9 11"></path> </g></svg>
      lvl. 8
      </span>
      
  </div>
  <div class="action">
    <button>Next</button>
  </div>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: notification */
.notification {
  width: 300px;
  height: 70px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #212121;
  box-shadow: 0px 42px 53px 13px rgba(0,0,0,0.1);
  padding: 2px;
  position: relative;
  animation: appear .6s linear alternate-reverse infinite;
  transition: all .6s ease;
}

.icon {
  height: 100%;
  transition: transform .6s ease;
}

.messages {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 4px;
}

.title {
  font-size: 0.95rem;
  line-height: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: #494949;
}

.description {
  font-size: 13px;
  margin-bottom: 4px;
}

.level {
  color: #7d5cf5;
  font-weight: 600;
  background-color: #7d5cf53f;
  display: flex;
  align-items: center;
  flex: 1;
  height: 0;
  width: max-content;
  padding: 4px;
  border-radius: 10px;
}

.level svg {
  height: 140%;
  background-color: #7d5cf5;
  border-radius: 6px;
  margin-right: 4px;
}

.action {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action button {
  padding: 0.5rem  1rem;
  background-color: #7d5cf5;
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 10px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: none;
  height: 40px;
  transition: all .6s ease;
  margin-right: 6px;
}

.notification:hover .icon {
  transform: rotate(45deg);
}

.action button:hover {
  height: 100%;
  margin-right: 0;
}

.action button:active {
  background-color: #4dec48;
}

@keyframes appear {
  from {
    transform: scale(0.98);
  }

  to {
    transform: scale(1);
  }
}
</style>


================================================
FILE: Notifications/ahmed150up_terrible-shrimp-45.html
================================================
<div class="notification">
  <svg viewBox="0 0 200 200">
    <path id="star" d="M100,25 L129,79 L186,79 L139,119 L158,173 L100,137 L42,173 L61,119 L14,79 L71,79 z"></path>
    <text x="50%" y="50%" text-anchor="middle" alignment-baseline="central">Level Up!</text>
  </svg>
</div>

<style>
/* From Uiverse.io by ahmed150up - Tags: notification */
.notification {
  background-color: #FFF;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.notification svg {
  width: 140px;
  height: 140px;
  fill: #FFD700;
  animation: rotate 3s ease-in-out infinite;
}

.notification #star {
  animation: fill 3s ease-in-out infinite;
  transform-origin: center;
}

.notification text {
  font-size: 30px;
  font-weight: bold;
  fill: #000;
}

@keyframes fill {
  0% {
    fill: transparent;
    transform: scale(1);
  }

  50% {
    fill: #FFD700;
    transform: scale(1.2);
  }

  100% {
    fill: transparent;
    transform: scale(1);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


</style>


================================================
FILE: Notifications/alexruix_gentle-octopus-87.html
================================================
<div class="box-avatar">
  <div class="avatar">
      <svg class="avatar-icon" viewBox="0 0 17 15">
        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"></path>
      </svg>
    </div>
</div>
  <div class="notification">    
    <div class="notification-info">
      <p class="notification-text"> <span class="highlight">Player</span> reached <b>level 15!</b> </p>
    </div>
  </div>
<style>
/* From Uiverse.io by alexruix - Tags: notification */
.notification {
  display: flex;
  width: 0;
  background: #ddd;
  border-radius: 10px;
  animation: slideIn 1s ease-in-out 1.25s forwards;
}

.notification-info {
  display: inline-flex;
  overflow: hidden;
  background-color: #181818;
  color: #fff;
  width: 100%;
  border-radius: 12px 8px 8px 12px;
  padding-left: 16px;
  align-items: center;
}

.notification-text {
  opacity: 0;
  padding: 10px 8px;
  white-space: nowrap;
  animation: textInfo 1s ease-in-out 1.5s forwards;
}

.highlight {
  color: #ffc300;
}

.box-avatar {
  background-color: #181818;
  padding: 6px;
  width: 4.5em;
  height: 4.5em;
  border-radius: 50%;
  margin-right: -20px;
  box-shadow: 6.2px 3.1px 38.2px -6px rgba(0, 0, 0, 0.2), 63px 32px 176px -6px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.avatar {
  background-color: #FDA203;
  padding: .6em;
  border-radius: 50%;
}

.avatar-icon {
  width: 100%;
  height: 100%;
  fill: white;
  animation: grow 2s ease-in-out 3;
}

/*Animations*/
@keyframes slideIn {
  0% {
    width: 0;
    padding: 2px;
  }

  100% {
    width: 250px;
    padding: 2px;
  }
}

@keyframes textInfo {
  0% {
    opacity: 0%;
    margin-left: -20em;
  }

  100% {
    opacity: 100%;
    margin-left: 0;
  }
}

@keyframes grow {
  0% {
    transform: scale(100%) translateY(0%);
  }

  50% {
    transform: scale(100%) translateY(-10%);
  }

  100% {
    transform: scale(100%) translateY(0%);
  }
}
</style>


================================================
FILE: Notifications/andrew-demchenk0_quiet-liger-31.html
================================================
<div class="notification">
  <span class="star star1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ffa710" d="m22 9.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path><path fill="#fdd921" d="m22 8.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path></svg></span>    
  <span class="star star2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ffa710" d="m22 9.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path><path fill="#fdd921" d="m22 8.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path></svg></span>
  <span class="star star3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ffa710" d="m22 9.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path><path fill="#fdd921" d="m22 8.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path></svg></span>   
  <div class="ribbon">
  <div class="ribbon-content">Level up!</div>
  <div class="start"> press start</div>
</div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: notification */
.notification {
  position: relative;
  font-family: "Lucida Console", "Courier New", monospace;
  font-weight: 900;
  letter-spacing: 5px;
  text-transform: uppercase;
}

.start {
  font-size: 20px;
  letter-spacing: 3px;
  text-shadow: 1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
  animation: animate4 5s forwards infinite ease-in-out;
}

.ribbon-content {
  font-size: 35px;
  text-shadow: 1.5px 1.5px 0 #680638,
    -1.5px -1.5px 0 #680638,
    1.5px -1.5px 0 #680638,
    -1.5px 1.5px 0 #680638;
}

.ribbon {
  position: relative;
  width: 300px;
  height: 50px;
  line-height: 50px;
  background-color: #CC014D;
  color: #fff;
  text-align: center;
  font-size: 20px;
}

.ribbon::before, .ribbon::after {
  content: '';
  position: absolute;
  top: 20px;
  border: 25px solid #DB0F5A;
  z-index: -1;
}

.ribbon::before {
  left: -30px;
  border-left-color: transparent;
}

.ribbon::after {
  right: -30px;
  border-right-color: transparent;
}

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
  content: '';
  position: absolute;
  border-style: solid;
  bottom: -20px;
}

.ribbon .ribbon-content:before {
  left: 0;
  border-width: 0 20px 20px 0;
  border-color: transparent #6B043A transparent transparent;
}

.ribbon .ribbon-content:after {
  right: 0;
  border-width: 20px 20px 0 0;
  border-color: #6B043A transparent transparent transparent;
}

.star svg {
  width: 100px;
  height: 100px;
}

.star {
  position: absolute;
}

.star1 {
  top: -85px;
  left: 0;
  transform: rotate(-15deg);
  animation: animate1 5s forwards infinite ease-in-out;
}

.star2 {
  top: -100px;
  left: 50%;
  transform: translate(-50%);
  animation: animate2 5s forwards infinite ease-in-out;
}

.star3 {
  top: -85px;
  left: 100%;
  transform: translateX(-100%) rotate(15deg);
  animation: animate3 5s forwards infinite ease-in-out;
}

@keyframes animate1 {
  0% {
    transform: rotate(-15deg) translateY(0);
  }

  25% {
    transform: rotate(-15deg) translateY(10px);
  }

  50% {
    transform: rotate(-15deg) translateY(0px);
  }

  75% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(-15deg);
  }
}

@keyframes animate3 {
  0% {
    transform: translateX(-100%) translateY(0) rotate(15deg);
  }

  25% {
    transform: translateX(-100%) translateY(10px) rotate(15deg);
  }

  50% {
    transform: translateX(-100%) translateY(0) rotate(15deg);
  }

  75% {
    transform: translateX(-100%) rotate(5deg);
  }

  100% {
    transform: translateX(-100%) rotate(15deg);
  }
}

@keyframes animate2 {
  0% {
    transform: translate(-50%) translateY(0);
  }

  25% {
    transform: translate(-50%) translateY(10px);
  }

  50% {
    transform: translate(-50%) translateY(0px) scale(1);
  }

  75% {
    transform: translate(-50%) scale(1.1);
  }

  100% {
    transform: translate(-50%) scale(1);
  }
}

@keyframes animate4 {
  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}
</style>


================================================
FILE: Notifications/devsleonardo_red-goat-27.html
================================================
<div class="notification">
  <svg viewBox="0 0 100 100" class="trophy">
    <g>
      <path d="M10,50 L40,50 L30,10 L20,10 Z"></path>
      <path d="M60,50 L90,50 L80,10 L70,10 Z"></path>
      <path d="M20,10 L80,10 L70,30 L30,30 Z"></path>
      <path d="M30,30 L70,30 L60,50 L40,50 Z"></path>
      <path d="M25,75 L75,75 L85,90 L15,90 Z"></path>
      <path d="M40,50 L60,50 L55,70 L45,70 Z"></path>
    </g>
  </svg>
  <p>Congratulations!
  </p><p>You reached level 10!</p>
</div>

<style>
/* From Uiverse.io by devsleonardo - Tags: notification */
.notification {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 50px;
  color: white;
}

.trophy {
  fill: gold;
  width: 80px;
  height: 80px;
  animation: bounce 0.5s ease-in-out 1;
}

.trophy:hover {
  animation: spin 1s ease-in-out 1;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-20px);
  }

  50% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

</style>


================================================
FILE: Notifications/guilhermeyohan_white-cat-52.html
================================================
<div class="level-up-notification">
  <p class="kdkkkd">Congratulations! You have reached level 10!</p>
</div>

<style>
/* From Uiverse.io by guilhermeyohan - Tags: notification */
.level-up-notification {
  width: 330px;
  margin: auto;
  background-color: #2ed603a1;
  border-radius: 10px;
  padding: 20px;
  animation: pulse 2s ease infinite, slide-in 1.5s ease;
}

.level-up-notification p.kdkkkd {
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 2px rgba(60, 59, 59, 0.754);
}

@keyframes slide-in {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

</style>


================================================
FILE: Notifications/jyefu013_unlucky-bird-53.html
================================================
<button class="btn">
  <span class="default-text">New Level Unlocked!</span>
  <span class="hover-text">Congrats!</span>
</button>

<style>
/* From Uiverse.io by jyefu013 - Tags: notification */
.btn {
  padding: 10px;
  border-radius: 5px;
  font-size: 15px;
  background-color: black;
  color: rgb(238, 255, 0);
  position: relative;
  overflow: hidden;
}

.default-text {
  z-index: 1;
}

.hover-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.btn:hover .default-text {
  opacity: 0;
}

.btn:hover .hover-text {
  opacity: 1;
  animation: bounce 0.5s ease-in-out;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.2);
  }

  75% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.btn:hover::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: fireworks 1s linear forwards;
}

@keyframes fireworks {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(4);
    opacity: 0;
  }
}

</style>


================================================
FILE: Notifications/newbiners_warm-deer-90.html
================================================
<div class="notification">
  <span>L</span>
  <span>E</span>
  <span>V</span>
  <span>E</span>
  <span>L</span>
  <span>U</span>
  <span>P</span>
  <span>!</span>
</div>
<style>
/* From Uiverse.io by newbiners - Tags: notification */
.notification {
  width: 250px;
  height: 60px;
  background: rgb(146, 146, 146);
  border-radius: 14px;
  font-size: 2.3em;
  font-weight: 700;
  color: black;
  text-shadow: 2px 2px yellow;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
}

.notification span {
  -webkit-animation: levelup 2s ease infinite;
  animation: levelup 2s ease infinite;
}

.notification span:nth-child(2) {
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

.notification span:nth-child(3) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.notification span:nth-child(4) {
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
}

.notification span:nth-child(5) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.notification span:nth-child(6) {
  -webkit-animation-delay: 1.25s;
  animation-delay: 1.25s;
}

.notification span:nth-child(7) {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.notification span:nth-child(8) {
  -webkit-animation-delay: 1.75s;
  animation-delay: 1.75s;
}

@-webkit-keyframes levelup {
  0%, 100% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

@keyframes levelup {
  0%, 100% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

</style>


================================================
FILE: Notifications/tursynbek_gentle-kangaroo-69.html
================================================
<div class="level-up">
  <span class="text">LEVEL UP!</span>
</div>

<style>
/* From Uiverse.io by tursynbek - Tags: notification */
.level-up {
  font-family: 'Montserrat', sans-serif;
  font-size: 25px;
  font-weight: bold;
  color: #ffffff;
  background-color: #ff5733;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
  text-align: center;
  transition: all 0.3s ease;
}

.text {
  position: relative;
  display: inline-block;
  animation: bounce 1s infinite;
}

.level-up:hover {
  background-color: #ffffff;
  color: #ff5733;
  transform: scale(1.1);
}

.level-up:hover .text {
  animation: none;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.level-up:hover::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: #ff5733;
  border-radius: 50%;
  position: absolute;
  top: -20px;
  left: calc(50% - 5px);
  animation: bounce 0.5s infinite;
}

</style>


================================================
FILE: Notifications/yaroslavas2001_stupid-shrimp-89.html
================================================
<div class="notification">
  <div class="mirrow">
    <svg class="fragment fragment1" viewBox="0 0 137 108" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 0H95L137 107.5L0 78V0Z"></path>
    </svg>
    <svg class="fragment fragment2" width="137" height="107" viewBox="0 0 137 107" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 0L136.5 27.5L91 107H0V0Z"></path>
    </svg>
    <svg class="fragment fragment3" width="108" height="103" viewBox="0 0 108 103" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 0H108L96 52L37.5 103L0 0Z"></path>
    </svg>
    <svg class="fragment fragment4" width="140" height="110" viewBox="0 0 140 110" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M69 0H140V99L0 110L60.5 52L69 0Z"></path>
    </svg>
    <svg class="fragment fragment5" width="184" height="86" viewBox="0 0 184 86" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M38 10L184 0V86H0L38 10Z"></path>
    </svg>
    <div class="level">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star1">
        <path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star2">
        <path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star3">
        <path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star4">
        <path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star5">
        <path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star6">
        <path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star7">
        <path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
      </svg>
      <p class="level_text">Level Up!</p>
      <p class="level_sub_text">7 lvl.</p>
      <div class="btn_block">
        <button class="btn">Menu</button>
        <button class="btn">Next Level</button>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by yaroslavas2001 - Tags: notification */
.notification {
  height: 12em;
  width: 19em;
}

.mirrow {
  height: 12em;
  width: 19em;
  position: relative;
  background: linear-gradient(45deg, #6720D9, #0062FF, #0085FF, #009CFF, #00AED3, #00BD9B);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.fragment {
  position: absolute;
  filter: blur(5px);
  fill: rgba(252, 252, 252, 0.7);
  transition: all 2s ease-in-out;
}

.mirrow:hover .fragment {
  height: 0em;
  width: 0em;
  filter: blur(10px);
}

.fragment1 {
  width: 9.5em;
  height: 7.5em;
}

.mirrow:hover .fragment1 {
  transform: translate(-15px, -15px);
}

.fragment2 {
  width: 8em;
  height: 6.5em;
  bottom: 0px;
  left: 0px;
}

.mirrow:hover .fragment2 {
  transform: translate(-15px, 15px);
}

.fragment3 {
  width: 7em;
  height: 7em;
  top: 0px;
  right: 25%;
  left: 40%;
}

.mirrow:hover .fragment3 {
  transform: translate(0px, -15px);
}

.fragment4 {
  width: 8em;
  height: 7em;
  top: 0px;
  right: 0px
}

.mirrow:hover .fragment4 {
  transform: translate(15px, -15px);
}

.fragment5 {
  width: 12em;
  height: 6em;
  bottom: 0px;
  right: 0px;
}

.mirrow:hover .fragment5 {
  transform: translate(15px, 15px);
}

.level {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.btn_block {
  display: flex;
}

.level_text {
  font-weight: bold;
  font-size: 22px;
  color: #fff;
  margin: 0px 0px 5px 0px;
}

.level_sub_text {
  font-size: 13px;
  color: #fff;
  margin: 0px 0px 10px 0px;
}

.btn {
  background: transparent;
  border: 1px solid #fff;
  border-radius: 14px;
  cursor: pointer;
  margin: 0px 2px;
  color: #fff;
  font-size: 12px;
  transition: all 1s ease-in-out;
  padding: 2px 6px;
}

.btn:hover {
  background: #fff;
  color: #000;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.star {
  position: absolute;
  height: 28px;
  width: 28px;
  fill: yellow;
}

.star1 {
  animation: Orbita1 15s linear infinite;
}

@keyframes Orbita1 {
  from {
    transform: rotate(0deg) translateX(80px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(80px) rotate(-360deg);
  }
}

.star2 {
  animation: Orbita2 15s linear infinite;
}

@keyframes Orbita2 {
  from {
    transform: rotate(50deg) translateX(80px) rotate(50deg);
  }

  to {
    transform: rotate(410deg) translateX(80px) rotate(-410deg);
  }
}

.star3 {
  animation: Orbita3 15s linear infinite;
}

@keyframes Orbita3 {
  from {
    transform: rotate(100deg) translateX(80px) rotate(100deg);
  }

  to {
    transform: rotate(460deg) translateX(80px) rotate(-460deg);
  }
}

.star4 {
  animation: Orbita4 15s linear infinite;
}

@keyframes Orbita4 {
  from {
    transform: rotate(150deg) translateX(80px) rotate(150deg);
  }

  to {
    transform: rotate(510deg) translateX(80px) rotate(-510deg);
  }
}

.star5 {
  animation: Orbita5 15s linear infinite;
}

@keyframes Orbita5 {
  from {
    transform: rotate(200deg) translateX(80px) rotate(200deg);
  }

  to {
    transform: rotate(560deg) translateX(80px) rotate(-560deg);
  }
}

.star6 {
  animation: Orbita6 15s linear infinite;
}

@keyframes Orbita6 {
  from {
    transform: rotate(250deg) translateX(80px) rotate(250deg);
  }

  to {
    transform: rotate(610deg) translateX(80px) rotate(-610deg);
  }
}

.star7 {
  animation: Orbita7 15s linear infinite;
}

@keyframes Orbita7 {
  from {
    transform: rotate(310deg) translateX(80px) rotate(310deg);
  }

  to {
    transform: rotate(670deg) translateX(80px) rotate(-670deg);
  }
}
</style>


================================================
FILE: Patterns/16alves02_curly-robin-90.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by 16alves02 - Tags: simple, green, blue, pattern */
.container {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #3498db, #3498db 30px, #2ecc71 30px, #2ecc71 60px),
    repeating-linear-gradient(135deg, #e74c3c, #e74c3c 30px, #f1c40f 30px, #f1c40f 60px);
}

</style>


================================================
FILE: Patterns/16alves02_tender-cougar-31.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by 16alves02  - Tags: red, green, css, pattern */
.container {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    #289a6a 0%,
    #289a6a 30%,
    #ffcd00 30%,
    #ffcd00 70%,
    #ef3340 70%,
    #ef3340 100%
  );
  background-size: 120px 100%;
  background-repeat: repeat;
}

</style>
    

================================================
FILE: Patterns/AmruthGowda91200_rotten-catfish-64.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by AmruthGowda91200  - Tags: simple, blue, minimalist, html, css, pattern */
.container {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
      -45deg,
      #ff7e5f,
      #ff7e5f 10px,
      #3f51b5 10px,
      #3f51b5 20px
    ),
    repeating-linear-gradient(
      45deg,
      #3f51b5,
      #3f51b5 10px,
      #ff7e5f 10px,
      #ff7e5f 20px
    ),
    repeating-linear-gradient(
      -30deg,
      #3f51b5,
      #3f51b5 10px,
      #ff7e5f 10px,
      #ff7e5f 20px
    ),
    repeating-linear-gradient(
      30deg,
      #ff7e5f,
      #ff7e5f 10px,
      #3f51b5 10px,
      #3f51b5 20px
    );
}

</style>
    

================================================
FILE: Patterns/ArnavK-09_selfish-moose-79.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by ArnavK-09  - Tags: simple, white, black, css, pattern, notebook, lines */
.container {
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    0deg,
    black,
    1px,
    white 1px,
    white
  );
  background-size: 100% 30px;
  background-color: white;
}

</style>
    

================================================
FILE: Patterns/AspenBranch_slippery-sheep-50.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by AspenBranch - Tags: simple, light, pattern */
.container {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #92c9b1, #92c9b1 20px, #b3e0d2 20px, #b3e0d2 40px);
}
</style>


================================================
FILE: Patterns/AspenBranch_thin-bulldog-22.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by AspenBranch  - Tags: simple, white, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-color: white;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

</style>
    

================================================
FILE: Patterns/BadlyWrittenStylesheet_bad-baboon-47.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by BadlyWrittenStylesheet  - Tags: gradient, dark, colorful, rainbow, multicolor, pattern, background */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  /* background-color: lightblue; */
  background-image: radial-gradient(black 55%, #0000),
    /* radial-gradient(black 55%, #0000), */
      linear-gradient(
        135deg,
        red,
        orange,
        yellow,
        lime,
        cyan,
        blue,
        indigo,
        deeppink
      );
  background-size: 100% 0.5%, contain;
  /* background-blend-mode: hard-light; */
  /* background-position: 0 0, 1em 1em, 0 0; */
}

</style>
    

================================================
FILE: Patterns/BadlyWrittenStylesheet_fluffy-bear-71.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by BadlyWrittenStylesheet  - Tags: simple, gradient, modern, light&dark, clean, pattern */
.container {
  --bg: radial-gradient(#000 5%, #0000 6%);
  --size: 3rem;
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  /* background-color: lightblue; */
  background-image: radial-gradient(#000 5%, #0000 6%),
    radial-gradient(#000 5%, #0000 6%);
  background-position: 0 0, calc(var(--size) / 2) calc(var(--size) / 2);
  background-size: var(--size) var(--size);
}

</style>
    

================================================
FILE: Patterns/Cybercom682_smooth-parrot-55.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by Cybercom682  - Tags: simple, green, retro, pattern, analog */
.container {
  width: 100%;
  height: 100%;
  --color: rgba(0, 115, 19, 0.3);
  background-color: #191a1a;
  background-image: linear-gradient(
      180deg,
      transparent 24%,
      var(--color) 25%,
      var(--color) 26%,
      transparent 27%,
      transparent 74%,
      var(--color) 75%,
      var(--color) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      45deg,
      transparent 24%,
      var(--color) 35%,
      var(--color) 26%,
      transparent 17%,
      transparent 74%,
      var(--color) 75%,
      var(--color) 76%,
      transparent 77%,
      transparent
    );
  background-size: 55px 55px;
}

</style>
    

================================================
FILE: Patterns/Deri-Kurniawan_spicy-ladybug-25.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by Deri-Kurniawan  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 10% 10%, #3e73f0 5%, transparent 5%),
    radial-gradient(circle at 90% 10%, #3e73f0 5%, transparent 5%),
    radial-gradient(circle at 90% 90%, #3e73f0 5%, transparent 5%),
    radial-gradient(circle at 10% 90%, #3e73f0 5%, transparent 5%);
  background-size: 20px 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

</style>
    

================================================
FILE: Patterns/Efrain2112_modern-skunk-55.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by Efrain2112  - Tags: simple, white, pattern */
.container {
  width: 100%;
  height: 100%;
  --size: 150px; /* control the size */
  --color: #d1bdbd;

  background: radial-gradient(
      circle at 15% 30%,
      transparent 40%,
      var(--color) 41%
    ),
    radial-gradient(circle at 85% 30%, transparent 40%, var(--color) 41%),
    radial-gradient(circle at 50% 70%, transparent 40%, var(--color) 41%),
    radial-gradient(circle at 15% 70%, transparent 40%, var(--color) 41%),
    radial-gradient(circle at 85% 70%, transparent 40%, var(--color) 41%),
    linear-gradient(
      45deg,
      var(--color) 25%,
      rgba(0, 0, 0, 0.067) 0,
      rgba(0, 0, 0, 0.067) 50%,
      var(--color) 0,
      var(--color) 75%,
      #1111 0,
      #1111 100%,
      var(--color) 0
    );
  background-size: var(--size) var(--size);
}

</style>
    

================================================
FILE: Patterns/Efrain2112_nice-mole-58.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by Efrain2112  - Tags: simple, blue, white, pattern */
.container {
  width: 100%;
  height: 100%;
  --size: 80px; /* control the size */
  --color: #add8e6;

  background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 40%,
      #add8e6 41%,
      #add8e6 60%,
      transparent 61%,
      transparent 100%
    ),
    linear-gradient(
      45deg,
      #add8e6 25%,
      transparent 25%,
      transparent 50%,
      #add8e6 50%,
      #add8e6 75%,
      transparent 75%,
      transparent
    );
  background-size: var(--size) var(--size);
}

</style>
    

================================================
FILE: Patterns/Efrain2112_purple-mole-50.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by Efrain2112  - Tags: circle, css, multicolor, pattern */
.container {
  width: 100%;
  height: 100%;
  --size: 80px; /* control the size */
  --color1: #f29c9c;
  --color2: #ffd700;
  --color3: #7ec8e3;
  --cone: #8b4513;

  background: radial-gradient(
      circle at 50% 30%,
      transparent 30%,
      var(--color1) 31%
    ),
    radial-gradient(circle at 30% 70%, transparent 30%, var(--color2) 31%),
    radial-gradient(circle at 70% 70%, transparent 30%, var(--color3) 31%),
    linear-gradient(to bottom, var(--cone) 50%, transparent 50%);
  background-size: var(--size) var(--size);
}

</style>
    

================================================
FILE: Patterns/HarryHeywood04_ugly-squid-22.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by HarryHeywood04  - Tags: simple, dark, pattern, tile */
.container {
  width: 100%;
  height: 100%;
  background-color: #111111;
  background-image: linear-gradient(
    32deg,
    rgba(8, 8, 8, 0.74) 30px,
    transparent
  );
  background-size: 60px 60px;
  background-position: -5px -5px;
}

</style>
    

================================================
FILE: Patterns/Javierrocadev_cowardly-rat-28.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: black, gradient, dark, pattern, radial, radial-gradient */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-image: repeating-radial-gradient(  #0c0a0a 80%,#2f312f 90%,#3f4549 90%);
  background-size: 65px 65px;
}
</style>


================================================
FILE: Patterns/Javierrocadev_polite-fox-37.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: blue, gradient, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-image: repeating-radial-gradient(  #f8f1f1ee 87%,#3fa7b4 90%);
  background-size: 50px 50px;
}
</style>


================================================
FILE: Patterns/Javierrocadev_thin-moth-33.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: orange, gradient, gradients, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-image: repeating-radial-gradient(  #e2d1d1 50%, #e7d2d2ee 70%,#f5c7a1 95%);
  background-size: 50px 50px;
}
</style>


================================================
FILE: Patterns/Javierrocadev_wicked-bullfrog-50.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: blue, gradient, diamond, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-image: radial-gradient( #173d49 85%, #36a6f1 90%,#0d1725 20%);
  background-size: 50px 50px;
}
</style>


================================================
FILE: Patterns/Juanes200122_foolish-swan-57.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by Juanes200122  - Tags: simple, html, css, pattern */
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  background: linear-gradient(45deg, #000000 25%, transparent 25%),
    linear-gradient(
      -135deg,
      #000000 25%,
      transparent 25%,
      transparent 75%,
      #000000 75%,
      #000000
    );
  background-size: 50px 50px;
}

</style>
    

================================================
FILE: Patterns/Juanes200122_tame-wasp-3.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by Juanes200122  - Tags: simple, blue, pattern */
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  background: linear-gradient(45deg, #3498db 25%, transparent 25%),
    linear-gradient(
      -45deg,
      #3498db 25%,
      transparent 25%,
      transparent 75%,
      #3498db 75%,
      #3498db
    );
  background-size: 50px 50px;
}

</style>
    

================================================
FILE: Patterns/MikeAndrewDesigner_fuzzy-duck-40.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by MikeAndrewDesigner  - Tags: wave, css, css effect, pattern, bg */
.container {
  width: 100%;
  height: 100%;
  --s: 60px;
  --c1: #180a22;
  --c2: #5b42f3;
  --_g: radial-gradient(
    25% 25% at 25% 25%,
    var(--c1) 99%,
    rgba(0, 0, 0, 0) 101%
  );
  background: var(--_g) var(--s) var(--s) / calc(2 * var(--s))
      calc(2 * var(--s)),
    var(--_g) 0 0 / calc(2 * var(--s)) calc(2 * var(--s)),
    radial-gradient(50% 50%, var(--c2) 98%, rgba(0, 0, 0, 0)) 0 0 / var(--s)
      var(--s),
    repeating-conic-gradient(var(--c2) 0 50%, var(--c1) 0 100%)
      calc(0.5 * var(--s)) 0 / calc(2 * var(--s)) var(--s);
}

</style>
    

================================================
FILE: Patterns/PriyanshuGupta28_rare-cow-19.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by PriyanshuGupta28  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
      45deg,
      #e74c3c,
      #e74c3c 10px,
      transparent 10px,
      transparent 20px
    ),
    repeating-linear-gradient(
      -45deg,
      #f39c12,
      #f39c12 10px,
      transparent 10px,
      transparent 20px
    );
  background-size: 100% 100%, 100% 100%, 10px 10px, 10px 10px;
  background-position: center center, center center, center center,
    center center;
}

</style>
    

================================================
FILE: Patterns/Ratinax_cuddly-shrimp-75.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by Ratinax - Tags: simple, circle, pattern */
.container {
  width: 100%;
  height: 100%;
  background: repeating-radial-gradient(circle at 50%, black, grey 1em, white 1em, white 2em);
}
</style>


================================================
FILE: Patterns/Ratinax_moody-eel-40.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by Ratinax - Tags: red, circle, pattern */
.container {
  width: 200%;
  height: 200%;
  /* Add your background pattern here */
  background: #ff7e86;
  background-image: linear-gradient(45deg, #fc5762, transparent 90%),
    radial-gradient(#ff1122 68%, transparent 5%);
  background-size: 4em 4em;
}

</style>


================================================
FILE: Patterns/Ratinax_nervous-mouse-8.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by Ratinax - Tags: simple, square, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background: linear-gradient(45deg,black, white);
  background-size: 1em 1em;
}
</style>


================================================
FILE: Patterns/Ratinax_new-fish-98.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by Ratinax - Tags: circle, multicolor, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-image: radial-gradient(black 75%, transparent 90%),
  linear-gradient(45deg, red, green, yellow);
  background-size: 3em 3em;
  /* background: lightblue; */
}
</style>


================================================
FILE: Patterns/Ratinax_weak-yak-80.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by Ratinax - Tags: simple, green, pattern */
.container {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(220deg, lime 1%, transparent),
                    linear-gradient(220deg, yellow 50%, transparent);
  background-size: 4em 4em;
}

</style>


================================================
FILE: Patterns/Ratinax_wicked-dodo-27.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by Ratinax - Tags: simple, red, pattern */
.container {
  width: 100%;
  height: 100%;
  background: repeating-radial-gradient(red 55%, white 56%);
  animation: rotate 2s linear infinite;
}
</style>


================================================
FILE: Patterns/SmookyDev_dry-frog-14.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by SmookyDev  - Tags: cube, creative, css, premium, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background: linear-gradient(
      45deg,
      #0000 calc(25% / 3),
      #ffffff 0 calc(50% / 3),
      #0000 0 calc(250% / 3),
      #ffffff 0 calc(275% / 3),
      #0000 0
    ),
    linear-gradient(
      45deg,
      #ffffff calc(25% / 3),
      #0000 0 calc(50% / 3),
      #ffffff 0 25%,
      #0000 0 75%,
      #ffffff 0 calc(250% / 3),
      #0000 0 calc(275% / 3),
      #ffffff 0
    ),
    linear-gradient(
      -45deg,
      #0000 calc(25% / 3),
      #ffffff 0 calc(50% / 3),
      #0000 0 calc(250% / 3),
      #ffffff 0 calc(275% / 3),
      #0000 0
    ),
    linear-gradient(
        -45deg,
        #ffffff calc(25% / 3),
        #0000 0 calc(50% / 3),
        #ffffff 0 25%,
        #0000 0 75%,
        #ffffff 0 calc(250% / 3),
        #0000 0 calc(275% / 3),
        #ffffff 0
      )
      #c77979;
  background-size: 106px 106px;
  background-position: 0 0, 53px 53px;
}

</style>
    

================================================
FILE: Patterns/SmookyDev_fresh-cow-100.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by SmookyDev  - Tags: glassmorphism, animation, transition, css, css effect, pattern */
.container {
  width: 100%;
  height: 100%;
  background: linear-gradient(
      45deg,
      white 12%,
      transparent 0,
      transparent 88%,
      wheat 0
    ),
    linear-gradient(135deg, transparent 37%, #753 0, #753 63%, transparent 0),
    linear-gradient(45deg, transparent 37%, white 0, white 63%, transparent 0)
      wheat;
  background-size: 80px 80px;
  animation: ani 10s linear infinite;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

</style>
    

================================================
FILE: Patterns/SouravBandyopadhyay_dangerous-walrus-7.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by SouravBandyopadhyay  - Tags: alert, minimalist, theme-switch, pattern */
.container {
  width: 100%;
  height: 100%;
  background: linear-gradient(
      45deg,
      transparent 33.33%,
      rgba(57, 144, 179, 0.1) 33.33%,
      rgba(0, 0, 0, 0.1) 66.66%,
      transparent 66.66%
    ),
    lightblue;
  background-size: 20px 20px;
}

</style>
    

================================================
FILE: Patterns/SouravBandyopadhyay_foolish-mole-21.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by SouravBandyopadhyay - Tags: simple, material design, blue, smooth, share, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background: linear-gradient(45deg, #bcdbef 25%, transparent 25%, transparent 50%, #bcdbef 50%, #8ea2ae 75%, transparent 75%, transparent);
  background-size: 20px 20px;
}
</style>


================================================
FILE: Patterns/Yaya12085_kind-snake-27.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: line, pattern, papper */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-image: linear-gradient(#ffffff 1.1rem, #ccc 1.2rem);
  background-size: 100% 1.2rem;
}
</style>


================================================
FILE: Patterns/Yaya12085_perfect-skunk-19.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: black, pattern, hexagonal */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background: repeating-radial-gradient(circle, #000, #000 5px, transparent 6px);
  background-size: 30px 30px;
}
</style>


================================================
FILE: Patterns/aadium_fluffy-dolphin-60.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by aadium - Tags: gradients, pattern, six, hexagons */
.container {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(60deg, transparent 30px, rgba(255, 0, 0, 0.2) 10px,rgba(255, 238, 0, 0.2) 90px),
    repeating-linear-gradient(120deg, transparent 30px, rgba(255, 0, 0, 0.2) 10px,rgba(255, 238, 0, 0.2)90px),
    repeating-linear-gradient(180deg, transparent 30px, rgba(255, 0, 0, 0.2) 10px, rgba(255, 238, 0, 0.2) 90px);
}

</style>


================================================
FILE: Patterns/aadium_hard-swan-77.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by aadium - Tags: blue, pattern, duotone */
.container {
  --color1: rgb(179, 255, 226);
  --color2: rgb(39, 0, 148);
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, var(--color1) 25%, transparent 25%, transparent 75%, var(--color1) 75%, var(--color1)),
                    linear-gradient(45deg, var(--color2) 25%, var(--color1) 25%, var(--color1) 75%, var(--color2) 75%, var(--color2));
  background-size: 95px 15px;
  background-position: 0 0, 135px 135px;
}

</style>


================================================
FILE: Patterns/aadium_mighty-rattlesnake-30.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by aadium - Tags: soft, gradients, pattern */
.container {
  width: 100%;
  height: 100%;
  position: relative;
  background: repeating-linear-gradient(to bottom, rgb(255, 145, 0, 0.5), rgb(255, 0, 0, 0.5), rgb(255, 0, 140, 0.5), rgb(255, 0, 0, 0.5), rgb(255, 145, 0, 0.5) 50px),
              repeating-linear-gradient(to left, rgb(255, 145, 0, 0.5), rgb(255, 0, 0, 0.5), rgb(255, 0, 140, 0.5), rgb(255, 0, 0, 0.5), rgb(255, 145, 0, 0.5) 50px),
              rgba(193, 193, 193, 0.673);
}
</style>


================================================
FILE: Patterns/aadium_soft-panda-93.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by aadium - Tags: dual-tone, pattern, mosaic */
.container {
  --color1: rgb(0, 3, 49);
  --color2: rgb(248, 255, 182);
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, var(--color2) 25%, transparent 25%, transparent 75%, var(--color2) 75%, var(--color2)), 
                    linear-gradient(135deg, var(--color2) 25%, var(--color1) 25%, var(--color1) 75%, var(--color2) 75%, var(--color2));
  background-size: 90px 90px;
  background-position: 0 0, 135px 135px;
}
</style>


================================================
FILE: Patterns/adamgiebl_curvy-earwig-79.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by adamgiebl - Tags: grid, pattern, checkered, chess */
.container {
  width: 100%;
  height: 100%;
  --color: rgba(114, 114, 114, 0.3);
  background-color: #191a1a;
  background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
      linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
  background-size: 50px 50px;
}
</style>


================================================
FILE: Patterns/adilsarfraz02_sweet-termite-95.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by adilsarfraz02  - Tags: simple, realistic, modern, premium, pattern */
.container {
  background-color: transparent;
  background-image: radial-gradient(#000000 1px, #e5e5f7 1px);
  background-size: 30px 30px;
  width: 100%;
  height: 100vh;
}

</style>
    

================================================
FILE: Patterns/alexruix_blue-kangaroo-55.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by alexruix  - Tags: simple, green, arrow, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  --size: 80px; /* control the size */
  --color: #fefae0;

  --l: var(--color) 20%, #0000 0;
  --bg: 35%, #606c38 0 45%, var(--color) 0;
  background: linear-gradient(45deg, var(--l) 45%, var(--color) 0 70%, #0000 0),
    linear-gradient(-45deg, var(--l) var(--bg) 70%, #0000 0),
    linear-gradient(45deg, var(--color) var(--bg));
  background-size: var(--size) var(--size);
}

</style>
    

================================================
FILE: Patterns/artvelog_splendid-quail-83.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by artvelog  - Tags: paper, light, modern, pattern */
.container {
  width: 100%;
  height: 100%;
  background: #f1f1f1;
  background-image: linear-gradient(
      90deg,
      transparent 50px,
      #ffb4b8 50px,
      #ffb4b8 52px,
      transparent 52px
    ),
    linear-gradient(#e1e1e1 0.1em, transparent 0.1em);
  background-size: 100% 30px;
}

</style>
    

================================================
FILE: Patterns/ayman-ashine_wicked-tiger-22.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by ayman-ashine  - Tags: 3d, creative, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  --color: rgb(255, 50, 50, 0.8);
  background-color: rgb(0, 0, 0);
  background-size: 40px 40px;
  background-image: linear-gradient(45deg, var(--color), transparent 40%),
    linear-gradient(-90deg, var(--color), transparent 20%);
}

</style>
    

================================================
FILE: Patterns/bociKond_strong-mayfly-90.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by bociKond  - Website: https://10015.io/tools/css-background-pattern-generator - Tags: simple, pink, white, pattern */
.container {
  width: 100%;
  height: 100%;
  background: radial-gradient(
      50% 50% at 100% 0,
      #ca3f3f 0% 5%,
      #ffffff 6% 15%,
      #ca3f3f 16% 25%,
      #ffffff 26% 35%,
      #ca3f3f 36% 45%,
      #ffffff 46% 55%,
      #ca3f3f 56% 65%,
      #ffffff 66% 75%,
      #ca3f3f 76% 85%,
      #ffffff 86% 95%,
      #0000 96%
    ),
    radial-gradient(
      50% 50% at 0 100%,
      #ca3f3f 0% 5%,
      #ffffff 6% 15%,
      #ca3f3f 16% 25%,
      #ffffff 26% 35%,
      #ca3f3f 36% 45%,
      #ffffff 46% 55%,
      #ca3f3f 56% 65%,
      #ffffff 66% 75%,
      #ca3f3f 76% 85%,
      #ffffff 86% 95%,
      #0000 96%
    ),
    radial-gradient(
      50% 50%,
      #ca3f3f 0% 5%,
      #ffffff 6% 15%,
      #ca3f3f 16% 25%,
      #ffffff 26% 35%,
      #ca3f3f 36% 45%,
      #ffffff 46% 55%,
      #ca3f3f 56% 65%,
      #ffffff 66% 75%,
      #ca3f3f 76% 85%,
      #ffffff 86% 95%,
      #0000 96%
    ),
    radial-gradient(
        50% 50%,
        #ca3f3f 0% 5%,
        #ffffff 6% 15%,
        #ca3f3f 16% 25%,
        #ffffff 26% 35%,
        #ca3f3f 36% 45%,
        #ffffff 46% 55%,
        #ca3f3f 56% 65%,
        #ffffff 66% 75%,
        #ca3f3f 76% 85%,
        #ffffff 86% 95%,
        #0000 96%
      )
      38px 38px;
  background-size: 76px 76px;
  background-color: #ca3f3f;
}

</style>
    

================================================
FILE: Patterns/catraco_strange-firefox-86.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by catraco  - Tags: simple, orange, smooth, pattern, background */
.container {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    5deg,
    orange 50%,
    orangered 60%,
    orange 50%
  );
  background-color: orange;
  background-size: 1em 1em;
  background-repeat: space;
}

</style>
    

================================================
FILE: Patterns/csemszepp_average-rat-98.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://github.com/Afif13 - Website: https://github.com/Afif13  - Name: Afif13  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 150px; /* control the size */
  --c1: #ff847c;
  --c2: #e84a5f;
  --c3: #fecea8;
  --c4: #99b898;

  background: conic-gradient(
      from 45deg at 75% 75%,
      var(--c3) 90deg,
      var(--c1) 0 180deg,
      #0000 0
    ),
    conic-gradient(from -45deg at 25% 25%, var(--c3) 90deg, #0000 0),
    conic-gradient(from -45deg at 50% 100%, #0000 180deg, var(--c3) 0),
    conic-gradient(
      from -45deg,
      var(--c1) 90deg,
      var(--c2) 0 225deg,
      var(--c4) 0
    );
  background-size: var(--s) var(--s);
}

</style>
    

================================================
FILE: Patterns/csemszepp_brown-bulldog-93.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://github.com/Afif13 - Website: https://github.com/Afif13  - Name: Afif13  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 20px; /* size of the lines */
  --g: 15px; /* gap between lines */

  --c1: #c02942;
  --c2: #53777a;

  background: conic-gradient(
        at var(--s) calc(100% - var(--s)),
        #0000 270deg,
        var(--c1) 0
      )
      calc(var(--s) + var(--g)) 0,
    linear-gradient(var(--c2) var(--s), #0000 0) 0 var(--g),
    conic-gradient(
      at var(--s) calc(100% - var(--s)),
      #0000 90deg,
      var(--c2) 0 180deg,
      var(--c1) 0
    ),
    #ecd078;
  background-size: calc(2 * (var(--s) + var(--g)))
    calc(2 * (var(--s) + var(--g)));
}

</style>
    

================================================
FILE: Patterns/csemszepp_evil-catfish-13.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://github.com/Afif13 - Website: https://github.com/Afif13  - Name: Afif13  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 125px; /* control the size */
  --c1: #f8ca00;
  --c2: #bd1550;

  --_g: var(--c1) 90deg, var(--c2) 0 135deg, #0000 0;
  background: conic-gradient(
      from -45deg at calc(100% / 3) calc(100% / 3),
      var(--c1) 90deg,
      #0000 0
    ),
    conic-gradient(from -135deg at calc(100% / 3) calc(2 * 100% / 3), var(--_g)),
    conic-gradient(
      from 135deg at calc(2 * 100% / 3) calc(2 * 100% / 3),
      var(--_g)
    ),
    conic-gradient(
      from 45deg at calc(2 * 100% / 3) calc(100% / 3),
      var(--_g),
      var(--c1) 0 225deg,
      var(--c2) 0
    );
  background-size: var(--s) var(--s);
}

</style>
    

================================================
FILE: Patterns/csemszepp_fat-panther-54.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp  - Tags: simple, minimalist, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 37px; /* control the size */

  --c: #0000, #2fb8ac 0.5deg 119.5deg, #0000 120deg;
  --g1: conic-gradient(from 60deg at 56.25% calc(425% / 6), var(--c));
  --g2: conic-gradient(from 180deg at 43.75% calc(425% / 6), var(--c));
  --g3: conic-gradient(from -60deg at 50% calc(175% / 12), var(--c));
  background: var(--g1), var(--g1) var(--s) calc(1.73 * var(--s)), var(--g2),
    var(--g2) var(--s) calc(1.73 * var(--s)), var(--g3) var(--s) 0,
    var(--g3) 0 calc(1.73 * var(--s)) #ecbe13;
  background-size: calc(2 * var(--s)) calc(3.46 * var(--s));
}

</style>
    

================================================
FILE: Patterns/csemszepp_fresh-bobcat-35.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://github.com/Afif13 - Website: https://github.com/Afif13  - Name: Afif13   - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 82px;
  --c1: #b2b2b2;
  --c2: #ffffff;
  --c3: #d9d9d9;

  --_g: var(--c3) 0 120deg, #0000 0;
  background: conic-gradient(from -60deg at 50% calc(100% / 3), var(--_g)),
    conic-gradient(from 120deg at 50% calc(200% / 3), var(--_g)),
    conic-gradient(
      from 60deg at calc(200% / 3),
      var(--c3) 60deg,
      var(--c2) 0 120deg,
      #0000 0
    ),
    conic-gradient(from 180deg at calc(100% / 3), var(--c1) 60deg, var(--_g)),
    linear-gradient(
      90deg,
      var(--c1) calc(100% / 6),
      var(--c2) 0 50%,
      var(--c1) 0 calc(500% / 6),
      var(--c2) 0
    );
  background-size: calc(1.732 * var(--s)) var(--s);
}

</style>
    

================================================
FILE: Patterns/csemszepp_fuzzy-eel-41.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://github.com/Afif13 - Website: https://github.com/Afif13  - Name: Afif13  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 140px; /* control the size */
  --c1: #ab3e5b;
  --c2: #ffbe40;

  --_g: #0000 25%, #0008 47%, var(--c1) 53% 147%, var(--c2) 153% 247%,
    var(--c1) 253% 347%, var(--c2) 353% 447%, var(--c1) 453% 547%, #0008 553%,
    #0000 575%;
  --_s: calc(25% / 3) calc(25% / 4) at 50%;
  background: radial-gradient(var(--_s) 100%, var(--_g)),
    radial-gradient(var(--_s) 100%, var(--_g)) calc(var(--s) / 2)
      calc(3 * var(--s) / 4),
    radial-gradient(var(--_s) 0, var(--_g)) calc(var(--s) / 2) 0,
    radial-gradient(var(--_s) 0, var(--_g)) 0 calc(3 * var(--s) / 4),
    repeating-linear-gradient(
      90deg,
      #accec0 calc(25% / -6) calc(25% / 6),
      #61a6ab 0 calc(25% / 2)
    );
  background-size: var(--s) calc(3 * var(--s) / 2);
}

</style>
    

================================================
FILE: Patterns/csemszepp_happy-rattlesnake-25.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://github.com/Afif13 - Website: https://github.com/Afif13  - Name: Afif13  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 65px; /* control the size */
  --c1: #dadee1;
  --c2: #4a99b4;
  --c3: #9cceb5;

  --_c: 75%, var(--c3) 52.72deg, #0000 0;
  --_g1: conic-gradient(from -116.36deg at 25% var(--_c));
  --_g2: conic-gradient(from 63.43deg at 75% var(--_c));
  background: var(--_g1), var(--_g1) calc(3 * var(--s)) calc(var(--s) / 2),
    var(--_g2), var(--_g2) calc(3 * var(--s)) calc(var(--s) / 2),
    conic-gradient(
      var(--c2) 63.43deg,
      var(--c1) 0 116.36deg,
      var(--c2) 0 180deg,
      var(--c1) 0 243.43deg,
      var(--c2) 0 296.15deg,
      var(--c1) 0
    );
  background-size: calc(2 * var(--s)) var(--s);
}

</style>
    

================================================
FILE: Patterns/csemszepp_kind-frog-70.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://github.com/Afif13 - Website: https://github.com/Afif13  - Name: Afif13  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 84px;
  --c1: #f2f2f2;
  --c2: #cdcbcc;
  --c3: #999999;

  --_g: 0 120deg, #0000 0;
  background: conic-gradient(
      from 0deg at calc(500% / 6) calc(100% / 3),
      var(--c3) var(--_g)
    ),
    conic-gradient(
      from -120deg at calc(100% / 6) calc(100% / 3),
      var(--c2) var(--_g)
    ),
    conic-gradient(
      from 120deg at calc(100% / 3) calc(500% / 6),
      var(--c1) var(--_g)
    ),
    conic-gradient(
      from 120deg at calc(200% / 3) calc(500% / 6),
      var(--c1) var(--_g)
    ),
    conic-gradient(
      from -180deg at calc(100% / 3) 50%,
      var(--c2) 60deg,
      var(--c1) var(--_g)
    ),
    conic-gradient(
      from 60deg at calc(200% / 3) 50%,
      var(--c1) 60deg,
      var(--c3) var(--_g)
    ),
    conic-gradient(
      from -60deg at 50% calc(100% / 3),
      var(--c1) 120deg,
      var(--c2) 0 240deg,
      var(--c3) 0
    );
  background-size: calc(var(--s) * 1.732) var(--s);
}

</style>
    

================================================
FILE: Patterns/csemszepp_lovely-monkey-46.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: http://twitter.com/okke29 - Website: https://twitter.com/okke29 - Name: okke29  - Tags: simple, animation, pattern */
.container {
  width: 100%;
  height: 100%;
  background: radial-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.15) 30%,
        rgba(255, 255, 255, 0.3) 32%,
        rgba(255, 255, 255, 0) 33%
      )
      0 0,
    radial-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.1) 11%,
        rgba(255, 255, 255, 0.3) 13%,
        rgba(255, 255, 255, 0) 14%
      )
      0 0,
    radial-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.2) 17%,
        rgba(255, 255, 255, 0.43) 19%,
        rgba(255, 255, 255, 0) 20%
      )
      0 110px,
    radial-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.2) 11%,
        rgba(255, 255, 255, 0.4) 13%,
        rgba(255, 255, 255, 0) 14%
      ) -130px -170px,
    radial-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.2) 11%,
        rgba(255, 255, 255, 0.4) 13%,
        rgba(255, 255, 255, 0) 14%
      )
      130px 370px,
    radial-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.1) 11%,
        rgba(255, 255, 255, 0.2) 13%,
        rgba(255, 255, 255, 0) 14%
      )
      0 0,
    linear-gradient(
      45deg,
      #343702 0%,
      #184500 20%,
      #187546 30%,
      #006782 40%,
      #0b1284 50%,
      #760ea1 60%,
      #83096e 70%,
      #840b2a 80%,
      #b13e12 90%,
      #e27412 100%
    );
  background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px,
    530px 530px, 730px 730px, 100% 100%;
  background-color: #840b2a;
}

</style>
    

================================================
FILE: Patterns/csemszepp_modern-zebra-66.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://github.com/Afif13 - Website: https://github.com/Afif13  - Name: Afif13  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 200px; /* control the size */
  --c1: #1d1d1d;
  --c2: #4e4f51;
  --c3: #3c3c3c;

  background: repeating-conic-gradient(
        from 30deg,
        #0000 0 120deg,
        var(--c3) 0 180deg
      )
      calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
    repeating-conic-gradient(
      from 30deg,
      var(--c1) 0 60deg,
      var(--c2) 0 120deg,
      var(--c3) 0 180deg
    );
  background-size: var(--s) calc(var(--s) * 0.577);
}

</style>
    

================================================
FILE: Patterns/csemszepp_nasty-snake-68.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp  - Tags: simple, pattern, Christmas */
.container {
  width: 100%;
  height: 100%;
  --s: 75px; /* control the size */

  --_c: #0000, #fff 1deg 79deg, #0000 81deg;
  --g0: conic-gradient(from 140deg at 50% 87.5%, var(--_c));
  --g1: conic-gradient(from 140deg at 50% 81.25%, var(--_c));
  --g2: conic-gradient(from 140deg at 50% 75%, var(--_c));
  --g3: conic-gradient(at 10% 20%, #0000 75%, #fff 0);
  background: var(--g0) 0 calc(var(--s) / -4),
    var(--g0) var(--s) calc(3 * var(--s) / 4), var(--g1),
    var(--g1) var(--s) var(--s), var(--g2) 0 calc(var(--s) / 4),
    var(--g2) var(--s) calc(5 * var(--s) / 4),
    var(--g3) calc(var(--s) / -10) var(--s),
    var(--g3) calc(9 * var(--s) / 10) calc(2 * var(--s)),
    repeating-conic-gradient(from 45deg, #a31e39 0 25%, #31570e 0 50%);
  background-size: calc(2 * var(--s)) calc(2 * var(--s));
}

</style>
    

================================================
FILE: Patterns/csemszepp_neat-parrot-45.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://github.com/Afif13 - Website: https://css-pattern.com/ - Name: Temani Afif - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 100px; /* control the size */
  --c1: #f8b195;
  --c2: #355c7d;

  --_g: var(--c2) 6% 14%, var(--c1) 16% 24%, var(--c2) 26% 34%,
    var(--c1) 36% 44%, var(--c2) 46% 54%, var(--c1) 56% 64%, var(--c2) 66% 74%,
    var(--c1) 76% 84%, var(--c2) 86% 94%;
  background: radial-gradient(
      100% 100% at 100% 0,
      var(--c1) 4%,
      var(--_g),
      #0008 96%,
      #0000
    ),
    radial-gradient(
        100% 100% at 0 100%,
        #0000,
        #0008 4%,
        var(--_g),
        var(--c1) 96%
      )
      var(--c1);
  background-size: var(--s) var(--s);
}

</style>
    

================================================
FILE: Patterns/csemszepp_old-hound-37.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp  - Tags: simple, minimalist, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 200px; /* control the size */

  --_g: #dc9d37 25%, #fed450 0 50%, #0000 0;
  --_l1: #fff 0 1px, #0000 0 calc(25% - 1px), #fff 0 25%;
  --_l2: #fff 0 1px, #0000 0 calc(50% - 1px), #fff 0 50%;
  background: repeating-linear-gradient(45deg, var(--_l1)),
    repeating-linear-gradient(-45deg, var(--_l1)),
    repeating-linear-gradient(0deg, var(--_l2)),
    repeating-linear-gradient(90deg, var(--_l2)),
    conic-gradient(from 135deg at 25% 75%, var(--_g)),
    conic-gradient(from 225deg at 25% 25%, var(--_g)),
    conic-gradient(from 45deg at 75% 75%, var(--_g)),
    conic-gradient(from -45deg at 75% 25%, var(--_g)),
    repeating-conic-gradient(#125c65 0 45deg, #bc4a33 0 90deg);
  background-size: var(--s) var(--s);
}

</style>
    

================================================
FILE: Patterns/csemszepp_orange-bird-11.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp  - Website: https://github.com/Afif13  - Name: Afif13  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 50px; /* control the size */
  --t: 6px; /* control the thickness */
  --c1: #084c7f;
  --c2: #fef5e9;

  --_c: #0000 calc(98% - var(--t)), var(--c1) calc(100% - var(--t)) 98%, #0000;
  --_s: calc(2 * var(--s)) calc(5 * var(--s) / 2);
  --_r0: /var(--_s) radial-gradient(calc(var(--s) / 2) at 0 20%, var(--_c));
  --_r1: /var(--_s) radial-gradient(calc(var(--s) / 2) at 100% 20%, var(--_c));
  background: 0 0 var(--_r0),
    calc(-1 * var(--s)) calc(5 * var(--s) / 4) var(--_r0), var(--s) 0 var(--_r1),
    0 calc(5 * var(--s) / 4) var(--_r1),
    conic-gradient(at var(--t) calc(20% + 2 * var(--t)), #0000 75%, var(--c1) 0)
      calc(var(--t) / -2) calc(var(--s) - var(--t)) / var(--s)
      calc(5 * var(--s) / 4),
    repeating-conic-gradient(var(--c2) 0 25%, #0000 0 50%) var(--s)
      calc(var(--s) / -8) / var(--_s),
    conic-gradient(from 90deg at var(--t) var(--t), var(--c2) 25%, var(--c1) 0)
      calc((var(--s) - var(--t)) / 2) calc((var(--s) - var(--t)) / 2) / var(--s)
      calc(5 * var(--s) / 4);
}

</style>
    

================================================
FILE: Patterns/csemszepp_pink-puma-38.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://github.com/Afif13 - Website: https://github.com/Afif13  - Name: Afif13  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 105px; /* control the size */
  --c1: #b9b9b9;
  --c2: #dcdcdc;
  --c3: #fafafa;

  background: conic-gradient(
        from 75deg,
        var(--c1) 15deg,
        var(--c2) 0 30deg,
        #0000 0 180deg,
        var(--c2) 0 195deg,
        var(--c1) 0 210deg,
        #0000 0
      )
      calc(0.5 * var(--s)) calc(0.5 * var(--s) / 0.577),
    conic-gradient(
      var(--c1) 30deg,
      var(--c3) 0 75deg,
      var(--c1) 0 90deg,
      var(--c2) 0 105deg,
      var(--c3) 0 150deg,
      var(--c2) 0 180deg,
      var(--c3) 0 210deg,
      var(--c1) 0 256deg,
      var(--c2) 0 270deg,
      var(--c1) 0 286deg,
      var(--c2) 0 331deg,
      var(--c3) 0
    );
  background-size: var(--s) calc(var(--s) / 0.577);
  /* 0.577=tan(30deg)*/
}

</style>
    

================================================
FILE: Patterns/csemszepp_serious-cobra-89.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp  - Tags: simple, minimalist, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 100px; /* control the size */

  --_g: #0000 90deg, #366 0;
  background: conic-gradient(from 90deg at 2px 2px, var(--_g)),
    conic-gradient(from 90deg at 1px 1px, var(--_g));
  background-size: var(--s) var(--s), calc(var(--s) / 5) calc(var(--s) / 5);
}

</style>
    

================================================
FILE: Patterns/csemszepp_silent-cow-55.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://github.com/Afif13 - Website: https://github.com/Afif13  - Name: Afif13  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 194px; /* control the size */
  --c1: #f6edb3;
  --c2: #acc4a3;

  --_l: #0000 calc(25% / 3), var(--c1) 0 25%, #0000 0;
  --_g: conic-gradient(from 120deg at 50% 87.5%, var(--c1) 120deg, #0000 0);

  background: var(--_g), var(--_g) 0 calc(var(--s) / 2),
    conic-gradient(from 180deg at 75%, var(--c2) 60deg, #0000 0),
    conic-gradient(from 60deg at 75% 75%, var(--c1) 0 60deg, #0000 0),
    linear-gradient(150deg, var(--_l)) 0 calc(var(--s) / 2),
    conic-gradient(
      at 25% 25%,
      #0000 50%,
      var(--c2) 0 240deg,
      var(--c1) 0 300deg,
      var(--c2) 0
    ),
    linear-gradient(-150deg, var(--_l)) #55897c /* third color here */;
  background-size: calc(0.866 * var(--s)) var(--s);
}

</style>
    

================================================
FILE: Patterns/csemszepp_slimy-dragonfly-4.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://github.com/Afif13 - Website: https://github.com/Afif13  - Name: Afif13  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 140px; /* control the size */

  --_g: #0000 52%, #170409 /* first color */ 54% 57%, #0000 59%;
  background: radial-gradient(farthest-side at -33.33% 50%, var(--_g)) 0
      calc(var(--s) / 2),
    radial-gradient(farthest-side at 50% 133.33%, var(--_g)) calc(var(--s) / 2)
      0,
    radial-gradient(farthest-side at 133.33% 50%, var(--_g)),
    radial-gradient(farthest-side at 50% -33.33%, var(--_g)), #67917a; /* second color */
  background-size: calc(var(--s) / 4.667) var(--s),
    var(--s) calc(var(--s) / 4.667);
}

</style>
    

================================================
FILE: Patterns/csemszepp_smart-ladybug-43.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp  - Tags: simple, material design, pattern, honeycomb */
.container {
  width: 100%;
  height: 100%;
  background: radial-gradient(
        circle farthest-side at 0% 50%,
        #fb1 23.5%,
        rgba(240, 166, 17, 0) 0
      )
      21px 30px,
    radial-gradient(
        circle farthest-side at 0% 50%,
        #b71 24%,
        rgba(240, 166, 17, 0) 0
      )
      19px 30px,
    linear-gradient(
        #fb1 14%,
        rgba(240, 166, 17, 0) 0,
        rgba(240, 166, 17, 0) 85%,
        #fb1 0
      )
      0 0,
    linear-gradient(
        150deg,
        #fb1 24%,
        #b71 0,
        #b71 26%,
        rgba(240, 166, 17, 0) 0,
        rgba(240, 166, 17, 0) 74%,
        #b71 0,
        #b71 76%,
        #fb1 0
      )
      0 0,
    linear-gradient(
        30deg,
        #fb1 24%,
        #b71 0,
        #b71 26%,
        rgba(240, 166, 17, 0) 0,
        rgba(240, 166, 17, 0) 74%,
        #b71 0,
        #b71 76%,
        #fb1 0
      )
      0 0,
    linear-gradient(90deg, #b71 2%, #fb1 0, #fb1 98%, #b71 0%) 0 0 #fb1;
  background-size: 40px 60px;
}

</style>
    

================================================
FILE: Patterns/csemszepp_sour-crab-65.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://github.com/Afif13 - Website: https://github.com/Afif13  - Name: Afif13  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 222px;
  --c1: #7f727b;
  --c2: #d6b4c2;
  --c3: #baa0ab;

  --_g: var(--c1) 10%, var(--c2) 10.5% 19%, #0000 19.5% 80.5%,
    var(--c2) 81% 89.5%, var(--c3) 90%;
  --_c: from -90deg at 37.5% 50%, #0000 75%;
  --_l1: linear-gradient(145deg, var(--_g));
  --_l2: linear-gradient(35deg, var(--_g));
  background: var(--_l1), var(--_l1) calc(var(--s) / 2) var(--s), var(--_l2),
    var(--_l2) calc(var(--s) / 2) var(--s),
    conic-gradient(var(--_c), var(--c1) 0) calc(var(--s) / 8) 0,
    conic-gradient(var(--_c), var(--c3) 0) calc(var(--s) / 2) 0,
    linear-gradient(
      90deg,
      var(--c3) 38%,
      var(--c1) 0 50%,
      var(--c3) 0 62%,
      var(--c1) 0
    );
  background-size: var(--s) calc(2 * var(--s) / 3);
}

</style>
    

================================================
FILE: Patterns/csemszepp_stupid-insect-76.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://github.com/Afif13 - Website: https://github.com/Afif13  - Name: Afif13  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 150px; /* control the size */
  --c1: #f7d2a1;
  --c2: #05057e;

  --_g: var(--c1) 0% 5%, var(--c2) 6% 15%, var(--c1) 16% 25%, var(--c2) 26% 35%,
    var(--c1) 36% 45%, var(--c2) 46% 55%, var(--c1) 56% 65%, var(--c2) 66% 75%,
    var(--c1) 76% 85%, var(--c2) 86% 95%, #0000 96%;
  background: radial-gradient(50% 50% at 100% 0, var(--_g)),
    radial-gradient(50% 50% at 0 100%, var(--_g)),
    radial-gradient(50% 50%, var(--_g)),
    radial-gradient(50% 50%, var(--_g)) calc(var(--s) / 2) calc(var(--s) / 2)
      var(--c1);
  background-size: var(--s) var(--s);
}

</style>
    

================================================
FILE: Patterns/csemszepp_ugly-bear-28.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by csemszepp - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;
  filter: contrast(7);
  --mask: linear-gradient(red, rgba(0, 0, 0, 0.45));
}

.container::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(#000, transparent) 0 0/1em 1em space;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  content: "";
}

</style>


================================================
FILE: Patterns/elijahgummer_brown-cheetah-84.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, blue, modern, pattern */
.container {
  width: 100%;
  height: 100%;
  position: relative;
  background: #f0f0f0;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      45deg,
      #3498db 25%,
      transparent 25%,
      transparent 50%,
      #3498db 50%,
      #3498db 75%,
      transparent 75%,
      transparent
    ),
    linear-gradient(
      -45deg,
      #3498db 25%,
      transparent 25%,
      transparent 50%,
      #3498db 50%,
      #3498db 75%,
      transparent 75%,
      transparent
    );
  background-size: 20px 20px;
  opacity: 0.8;
}

</style>
    

================================================
FILE: Patterns/elijahgummer_hungry-bullfrog-10.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, material design, green, blue, minimalist, gradient, pattern */
.container {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    #3498db,
    #2ecc71
  ); /* Gradient background */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for depth */
  border-radius: 10px; /* Rounded corners */
  position: relative;
  overflow: hidden;
}

.container::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px
    ),
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none; /* Allow clicking through the pattern layer */
}

</style>
    

================================================
FILE: Patterns/elijahgummer_mean-emu-70.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, blue, gradient, circle, transition, pattern */
.container {
  width: 100%;
  height: 100%;
  background: lightblue;
  position: relative;
  overflow: hidden;
}

.container::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, #3498db 10%, transparent 20%),
    radial-gradient(circle, transparent 10%, #3498db 20%);
  background-size: 30px 30px; /* Adjust the size of the pattern */
  animation: moveBackground 8s linear infinite; /* Adjust the animation duration and timing function */
}

@keyframes moveBackground {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(20%, 20%);
  }
}

</style>
    

================================================
FILE: Patterns/escannord_big-shrimp-86.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by escannord  - Tags: simple, white, pattern, notebook */
.container {
  width: 100%;
  height: 100%;
  background: linear-gradient(#3f87a6 10%, #ebf8e1a2 10%),
    linear-gradient(to right, #ebf8e100 10%, #c73030 10% 10.2%, #ebf8e100 10.5%);
  background-size: 100% 25px, 100% 100%;
  background-repeat: repeat, no-repeat;
  /* Add your background pattern here */
}

</style>
    

================================================
FILE: Patterns/escannord_hard-rabbit-4.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by escannord  - Tags: simple, black, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background: rgba(29, 31, 32, 0.904)
    radial-gradient(rgba(255, 255, 255, 0.712) 10%, transparent 1%);

  background-size: 11px 11px;
}

</style>
    

================================================
FILE: Patterns/escannord_heavy-fish-82.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by escannord  - Tags: simple, gradients, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background: repeating-conic-gradient(
      rgba(195, 195, 197, 0.1) 0%,
      rgb(7, 7, 7) 10%,
      rgba(195, 195, 197, 0.3) 20%
    ),
    radial-gradient(rgba(7, 112, 94, 0.3), rgba(61, 26, 189, 0.3)),
    linear-gradient(rgba(155, 0, 0, 0.3), rgba(13, 13, 117, 0.2)),
    radial-gradient(
      circle,
      rgb(255, 252, 252),
      rgb(10, 10, 10) 30%,
      rgba(84, 84, 88, 0.562) 0%
    );
  background-size: 10px 10px;
}

</style>
    

================================================
FILE: Patterns/escannord_little-parrot-76.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by escannord  - Tags: 3d, black, pattern, sphere */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background: lightblue;
  background: radial-gradient(
      circle,
      rgb(170, 162, 162),
      #333 30%,
      rgba(88, 84, 84, 0.226) 0%
    ),
    radial-gradient(
      circle at 40px 40px,
      rgb(233, 228, 228),
      #333 30%,
      rgba(88, 84, 84, 0) 0%
    ),
    radial-gradient(
      circle at 600px 200px,
      rgb(233, 228, 228),
      #333 10%,
      rgba(88, 84, 84, 0) 0%
    ),
    radial-gradient(
      circle at 800px 100px,
      rgb(233, 228, 228),
      #333 10%,
      rgba(88, 84, 84, 0) 0%
    ),
    radial-gradient(
      circle at 700px 500px,
      rgb(233, 228, 228),
      #333 2%,
      rgba(88, 84, 84, 0.123) 0%
    ),
    radial-gradient(
      circle at 200px 400px,
      rgb(233, 228, 228),
      #333 1%,
      rgba(88, 84, 84, 0) 0%
    ),
    radial-gradient(
      circle at 300px 700px,
      rgb(233, 228, 228),
      #333 15%,
      rgba(88, 84, 84, 0) 0%
    ),
    radial-gradient(
      circle at 900px 500px,
      rgb(233, 228, 228),
      #333 20%,
      rgba(88, 84, 84, 0) 0%
    ),
    radial-gradient(
      circle at 650px 400px,
      rgb(233, 228, 228),
      #333 10%,
      rgba(88, 84, 84, 0) 0%
    ),
    radial-gradient(
      circle at 600px 600px,
      rgb(233, 228, 228),
      #333 1%,
      rgba(88, 84, 84, 0.959) 0%
    );
}

</style>
    

================================================
FILE: Patterns/escannord_pretty-eagle-45.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by escannord  - Tags: 3d, white, black, gradient, pattern */
.container {
  width: 100%;
  height: 100%;
  --bg: linear-gradient(
      45deg,
      rgb(0, 0, 0) 25%,
      transparent 25%,
      transparent 75%,
      rgb(0, 0, 0) 75%,
      rgb(0, 0, 0)
    ),
    linear-gradient(
      45deg,
      rgb(0, 0, 0) 25%,
      white 25%,
      white 75%,
      rgb(0, 0, 0) 75%,
      rgb(0, 0, 0)
    );
  --bgsize: 60px 60px;
  --bgposition: 0 0, 30px 30px;
  background-color: white;
  background-image: var(--bg);
  background-size: var(--bgsize);
  background-position: var(--bgposition);
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  overflow: hidden;
  box-shadow: inset 0px 0px 500px rgb(15, 15, 15);
}

.container::before {
  content: "";
  width: 100%;
  height: 150%;
  box-shadow: 0px -100px 500px black, inset 0px 100px 500px rgb(15, 15, 15);
  position: absolute;
  top: 55%;
  background-image: var(--bg);
  background-size: var(--bgsize);
  background-position: var(--bgposition);
  transform-origin: top;
  transform: rotateX(80deg);
}

</style>
    

================================================
FILE: Patterns/escannord_tricky-moth-87.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by escannord  - Tags: simple, blue, plus, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background: rgb(57, 59, 59);
  background: radial-gradient(
    circle at 50%,
    rgb(41, 39, 39),
    #333 50%,
    transparent 51%,
    #eee 10%,
    rgb(0, 0, 0) 55% 72%,
    rgb(15, 96, 189) 50%
  );
  background-size: 10px 10px;
}

</style>
    

================================================
FILE: Patterns/iSweat-exe_ancient-bulldog-55.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by iSweat-exe  - Tags: material design, glassmorphism, success, pattern, background, 3D */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background: conic-gradient(at 50% 25%, #0000 75%, #47d3ff 0),
    conic-gradient(at 50% 25%, #0000 75%, #47d3ff 0) 60px 60px,
    conic-gradient(at 50% 25%, #0000 75%, #47d3ff 0) calc(2 * 60px)
      calc(2 * 60px),
    conic-gradient(at 50% 25%, #0000 75%, #47d3ff 0) calc(3 * 60px)
      calc(3 * 60px),
    repeating-linear-gradient(135deg, #adafff 0 12.5%, #474bff 0 25%);
  background-size: calc(4 * 60px) calc(4 * 60px);
}

</style>
    

================================================
FILE: Patterns/jeremyssocial_afraid-sheep-52.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by jeremyssocial  - Tags: dark, animated, pattern */
.container {
  /* Basic dimensions and centering */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Dark mode colors and gradient */
  background: #121212; /* Fallback for browsers that don't support gradients */
  background: linear-gradient(
    135deg,
    #121212 25%,
    #1a1a1a 25%,
    #1a1a1a 50%,
    #121212 50%,
    #121212 75%,
    #1a1a1a 75%,
    #1a1a1a
  );
  background-size: 40px 40px;

  /* Animation */
  animation: move 4s linear infinite;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 40px;
  }
}

</style>
    

================================================
FILE: Patterns/kennyotsu_short-warthog-33.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by kennyotsu - Tags: pattern, figma, dot */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-color: #313131;
  background-image: radial-gradient(rgba(255, 255, 255, 0.171) 2px, transparent 0);
  background-size: 30px 30px;
  background-position: -5px -5px
}
</style>


================================================
FILE: Patterns/kennyotsu_terrible-sloth-75.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by kennyotsu  - Tags: simple, pink, pattern, dog bone */
.container {
  --color: #c09bd8;
  background-color: #9f84bd;
  width: 100%;
  height: 100%;
  position: relative;
}
.container::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.8;
  background: radial-gradient(circle, var(--color) 15%, transparent 15%),
    radial-gradient(circle, var(--color) 15%, transparent 15%) 6px -6px,
    radial-gradient(circle, var(--color) 15%, transparent 15%) 6px -1px,
    radial-gradient(circle, var(--color) 15%, transparent 15%) 10px 2px,
    radial-gradient(circle, var(--color) 15%, transparent 15%) 14px 5px,
    radial-gradient(circle, var(--color) 15%, transparent 15%) 18px 8px,
    radial-gradient(circle, var(--color) 15%, transparent 15%) 18px 12px,
    radial-gradient(circle, var(--color) 15%, transparent 15%) 23px 6px;
  background-size: 50px 50px;
}

</style>
    

================================================
FILE: Patterns/lautyYT_spotty-shrimp-35.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by lautyYT - Tags: simple, blue, pattern */
.container {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #0050fc,#0050fc 20px, #0684fade 20px,#0684fade 40px);
}

</style>


================================================
FILE: Patterns/liuyingmei_rude-cobra-0.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by liuyingmei  - Tags: simple, green, blue, pattern */
.container {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -135deg,
    yellow,
    pink 10px,
    green 10px,
    skyblue 20px
  );
}

</style>
    

================================================
FILE: Patterns/mRcOol7_grumpy-lizard-36.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by mRcOol7  - Tags: pink, black, pattern */
.container {
  width: 100%;
  height: 100%;
  --s: 150px;
  --c1: #282c34;
  --c2: #3e4149;
  --c3: #525762;
  --c4: #ff6384;
  --c5: #36a2eb;
  --c6: #4bc0c0;
  --c7: #ffcc29;
  --c8: #8e8f91;
  --c9: #626262;

  background: repeating-conic-gradient(
        from 30deg,
        #0000 0 120deg,
        var(--c3) 0 180deg
      )
      calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
    repeating-conic-gradient(
      from 30deg,
      var(--c1) 0 45deg,
      var(--c2) 0 90deg,
      var(--c3) 0 135deg,
      var(--c4) 0 180deg,
      var(--c5) 0 225deg,
      var(--c6) 0 270deg,
      var(--c7) 0 315deg,
      var(--c8) 0 360deg,
      var(--c9) 0 405deg
    );
  background-size: var(--s) calc(var(--s) * 0.577);
}

</style>
    

================================================
FILE: Patterns/milegelu_perfect-fox-0.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by milegelu  - Tags: simple, black, clean */
.container {
  width: 100%;
  height: 100%;

  background: #000000;
  --gap: 5em;
  --line: 1px;
  --color: rgba(255, 255, 255, 0.2);

  background-image: linear-gradient(
      -90deg,
      transparent calc(var(--gap) - var(--line)),
      var(--color) calc(var(--gap) - var(--line) + 1px),
      var(--color) var(--gap)
    ),
    linear-gradient(
      0deg,
      transparent calc(var(--gap) - var(--line)),
      var(--color) calc(var(--gap) - var(--line) + 1px),
      var(--color) var(--gap)
    );
  background-size: var(--gap) var(--gap);
}

</style>
    

================================================
FILE: Patterns/mobinkakei_grumpy-baboon-32.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by mobinkakei  - Tags: simple, blue, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  --s: 25px; /* control the size */
  --c1: #1eaaee;
  --c2: #171717;

  --c: #0000 71%, var(--c1) 0 79%, #0000 0;
  --_s: calc(var(--s) / 2) / calc(2 * var(--s)) calc(2 * var(--s));
  background: linear-gradient(45deg, var(--c)) calc(var(--s) / -2) var(--_s),
    linear-gradient(135deg, var(--c)) calc(var(--s) / 2) var(--_s),
    radial-gradient(var(--c1) 35%, var(--c2) 37%) 0 0 / var(--s) var(--s);
}

</style>
    

================================================
FILE: Patterns/mobinkakei_loud-parrot-63.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by mobinkakei  - Tags: simple, white, pattern */
.container {
  width: 100%;
  height: 100%;
  /* control ize */
  --u: 5px;
  --c1: #ededee;
  --c2: #000000;
  --c3: #1e1e1e;
  --gp: 50% / calc(var(--u) * 16.9) calc(var(--u) * 12.8);
  background: conic-gradient(
        from 122deg at 50% 85.15%,
        var(--c2) 0 58deg,
        var(--c3) 0 116deg,
        #fff0 0 100%
      )
      var(--gp),
    conic-gradient(from 122deg at 50% 72.5%, var(--c1) 0 116deg, #fff0 0 100%)
      var(--gp),
    conic-gradient(from 58deg at 82.85% 50%, var(--c3) 0 64deg, #fff0 0 100%)
      var(--gp),
    conic-gradient(
        from 58deg at 66.87% 50%,
        var(--c1) 0 64deg,
        var(--c2) 0 130deg,
        #fff0 0 100%
      )
      var(--gp),
    conic-gradient(from 238deg at 17.15% 50%, var(--c2) 0 64deg, #fff0 0 100%)
      var(--gp),
    conic-gradient(
        from 172deg at 33.13% 50%,
        var(--c3) 0 66deg,
        var(--c1) 0 130deg,
        #fff0 0 100%
      )
      var(--gp),
    linear-gradient(98deg, var(--c3) 0 15%, #fff0 calc(15% + 1px) 100%)
      var(--gp),
    linear-gradient(-98deg, var(--c2) 0 15%, #fff0 calc(15% + 1px) 100%)
      var(--gp),
    conic-gradient(
        from -58deg at 50.25% 14.85%,
        var(--c3) 0 58deg,
        var(--c2) 0 116deg,
        #fff0 0 100%
      )
      var(--gp),
    conic-gradient(from -58deg at 50% 28.125%, var(--c1) 0 116deg, #fff0 0 100%)
      var(--gp),
    linear-gradient(90deg, var(--c2) 0 50%, var(--c3) 0 100%) var(--gp);
}

</style>
    

================================================
FILE: Patterns/mobinkakei_tidy-cheetah-71.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by mobinkakei  - Tags: simple, blue, black, pattern */
.container {
  width: 100%;
  height: 100%;
  --sz: 4px; /*** size ***/
  --sp: 5s; /*** speed ***/
  --b1: #211e1e; /*** color ***/
  --b2: #1c1b18; /*** color ***/
  --b3: #0c0b0a; /*** color ***/
  --b4: #0c0b0ae0; /*** color ***/
  --c1: #ffffff; /*** color ***/
  --ts: 50% / calc(var(--sz) * 17.5) calc(var(--sz) * 29.5);
  background:
		/* black shadows */ radial-gradient(
        circle at 50% 50%,
        var(--b4) calc(var(--sz) * 1),
        #fff0 calc(var(--sz) * 8)
      )
      var(--ts),
    radial-gradient(
        circle at 0% 0%,
        var(--b4) calc(var(--sz) * 1),
        #fff0 calc(var(--sz) * 8)
      )
      var(--ts),
    radial-gradient(
        circle at 0% 100%,
        var(--b4) calc(var(--sz) * 1),
        #fff0 calc(var(--sz) * 8)
      )
      var(--ts),
    radial-gradient(
        circle at 100% 0%,
        var(--b4) calc(var(--sz) * 1),
        #fff0 calc(var(--sz) * 8)
      )
      var(--ts),
    radial-gradient(
        circle at 100% 100%,
        var(--b4) calc(var(--sz) * 1),
        #fff0 calc(var(--sz) * 8)
      )
      var(--ts),
    /* border bottom */
      conic-gradient(
        from 90deg at 97.5% 67%,
        var(--c1) 0 87.5deg,
        #fff0 88deg 100%
      )
      var(--ts),
    /*repeated*/
      conic-gradient(
        from 90deg at 97.5% 67%,
        var(--c1) 0 87.5deg,
        #fff0 88deg 100%
      )
      var(--ts),
    conic-gradient(
        from 182.5deg at 2.5% 67%,
        #fff0 0 0deg,
        var(--c1) 0.5deg 90deg,
        #fff0 0 100%
      )
      var(--ts),
    /*repeated*/
      conic-gradient(
        from 182.5deg at 2.5% 67%,
        #fff0 0 0deg,
        var(--c1) 0.5deg 90deg,
        #fff0 0 100%
      )
      var(--ts),
    /* border top */
      conic-gradient(
        from 270deg at 2.5% 33%,
        var(--c1) 0 87.5deg,
        #fff0 88deg 100%
      )
      var(--ts),
    /*repeated*/
      conic-gradient(
        from 270deg at 2.5% 33%,
        var(--c1) 0 87.5deg,
        #fff0 88deg 100%
      )
      var(--ts),
    conic-gradient(
        from 2.5deg at 97.5% 33%,
        #fff0 0 0deg,
        var(--c1) 0.5deg 90deg,
        #fff0 0 100%
      )
      var(--ts),
    /*repeated*/
      conic-gradient(
        from 2.5deg at 97.5% 33%,
        #fff0 0 0deg,
        var(--c1) 0.5deg 90deg,
        #fff0 0 100%
      )
      var(--ts),
    /* bottom */
      conic-gradient(
        from 116.5deg at 50% 85.5%,
        var(--b1) 0 127deg,
        #fff0 0 100%
      )
      var(--ts),
    /*repeated*/
      conic-gradient(
        from 116.5deg at 50% 85.5%,
        var(--b1) 0 127deg,
        #fff0 0 100%
      )
      var(--ts),
    /*repeated*/
      conic-gradient(
        from 116.5deg at 50% 85.5%,
        var(--b1) 0 127deg,
        #fff0 0 100%
      )
      var(--ts),
    conic-gradient(from 120deg at 50% 83%, var(--c1) 0 120deg, #fff0 0 100%)
      var(--ts),
    /* top */
      conic-gradient(
        from -63.5deg at 50% 14.5%,
        var(--b1) 0 127deg,
        #fff0 0 100%
      )
      var(--ts),
    /*repeated*/
      conic-gradient(
        from -63.5deg at 50% 14.5%,
        var(--b1) 0 127deg,
        #fff0 0 100%
      )
      var(--ts),
    /*repeated*/
      conic-gradient(
        from -63.5deg at 50% 14.5%,
        var(--b1) 0 127deg,
        #fff0 0 100%
      )
      var(--ts),
    conic-gradient(from -60deg at 50% 17%, var(--c1) 0 120deg, #fff0 0 100%)
      var(--ts),
    /* central gradient */
      conic-gradient(
        from 0deg at 50% 50%,
        #fff0 0 2deg,
        var(--b2) 2.5deg 57.5deg,
        #fff0 58deg 62.5deg,
        var(--b1) 63deg 117.5deg,
        #fff0 118deg 122.5deg,
        var(--b3) 123deg 177.5deg,
        #fff0 178deg 182deg,
        var(--b2) 182.5deg 237.5deg,
        #fff0 0 242.5deg,
        var(--b1) 243deg 297.5deg,
        #fff0 298deg 302.5deg,
        var(--b3) 303deg 357.5deg,
        #fff0 358deg 360deg
      )
      var(--ts),
    /* bg */ var(--c1);
  animation: colors var(--sp) linear 0s infinite;
}

@keyframes colors {
  100% {
    filter: hue-rotate(360deg);
  }
}

</style>
    

================================================
FILE: Patterns/themrsami_black-emu-83.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by themrsami - Tags: material design, red, pink, themrsami, pattern */
.container {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, transparent 20%, darkred 21% 28%, transparent 29%);
  background-color: lightred;
  background-size: 60px 60px;
}

</style>


================================================
FILE: Patterns/themrsami_curly-robin-70.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by themrsami - Tags: green, pattern, thmrsami */
.container {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, green 25%, transparent 25%, transparent 75%, green 75%, green),
    linear-gradient(45deg, yellow, yellow);
  background-size: 100px 100px;
  background-position: 0, 50px 50px;
}

</style>


================================================
FILE: Patterns/themrsami_dull-moose-46.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by themrsami - Tags: material design, green, themrsami, pattern */
.container {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 0% 50%, transparent 20%, darkgreen 21% 28%, transparent 29%),
    radial-gradient(circle at 50% 50%, transparent 20%, darkgreen 21% 28%, transparent 29%),
    radial-gradient(circle at 100% 50%, transparent 20%, darkgreen 21% 28%, transparent 29%);
  background-color: lightgreen;
  background-size: 60px 70px;
}

</style>


================================================
FILE: Patterns/themrsami_honest-chicken-11.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by themrsami - Tags: red, blue, pattern, thmrsami */
.container {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, #3cb371 25%, transparent 25%),
    linear-gradient(-45deg, #3cb371 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #7cfc00 75%),
    linear-gradient(-45deg, transparent 75%, #7cfc00 75%);
  background-size: 100px 100px;
  background-position: 0 0, 50px 0, 50px -50px, 0px 50px;
}

</style>


================================================
FILE: Patterns/themrsami_hot-fly-3.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by themrsami - Tags: material design, black, themrsami, pattern */
.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, black 10%, transparent 10%);
  background-size: 30px 30px;
}

</style>


================================================
FILE: Patterns/themrsami_odd-liger-51.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by themrsami - Tags: simple, themrsami, pattern */
.container {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #008080,
    #008080 10px,
    #20b2aa 10px,
    #20b2aa 20px
  );
}

</style>


================================================
FILE: Patterns/themrsami_old-snail-13.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by themrsami - Tags: simple, purple, creative, themrsami, pattern */
.container {
  width: 100%;
  height: 100%;
  background-color: purple;
  background-image: linear-gradient(45deg, transparent 33.3%, orange 33.3%, orange 66.6%, transparent 66.6%),
    linear-gradient(-45deg, transparent 33.3%, orange 33.3%, orange 66.6%, transparent 66.6%);
  background-size: 60px 60px;
}

</style>


================================================
FILE: Patterns/themrsami_yellow-grasshopper-97.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by themrsami - Tags: simple, material design, purple, themrsami, pattern, cream */
.container {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 58.8%, transparent 20%, darkblue 21% 28%, transparent 29%),
    radial-gradient(circle at 50% 0%, transparent 20%, darkblue 21% 28%, transparent 29%),
    radial-gradient(circle at 50% 41.2%, transparent 10%, darkblue 11% 18%, transparent 19%),
    radial-gradient(circle at 50% 100%, transparent 10%, darkblue 11% 18%, transparent 19%),
    radial-gradient(circle at 50% 70.7%, transparent 10%, darkblue 11% 18%, transparent 19%),
    radial-gradient(circle at 50% -20.7%, transparent 10%, darkblue 11% 18%, transparent 19%);
  background-color: lightyellow;
  background-size: 100px 100px;
}

</style>


================================================
FILE: Patterns/uiverse-astronaut_jolly-parrot-30.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by uiverse-astronaut - Tags: purple, diamond, pattern */
.container {
  width: 100%;
  height: 100%;
  --color: #a748f5;
  background: linear-gradient(95deg, var(--color) 25%, transparent 25%) -50px 0,
        linear-gradient(-15deg, var(--color) 25%, transparent 25%) -50px 0,
        linear-gradient(25deg, transparent 75%, var(--color) 75%) -50px 0,
        linear-gradient(-45deg, transparent 75%, var(--color) 75%) -50px 0,
        linear-gradient(-15deg, transparent 75%, var(--color) 75%) -50px 0;
  background-color: #b669fd;
  background-size: 40px 40px;
}
</style>


================================================
FILE: Patterns/uiverse-astronaut_mean-eel-73.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by uiverse-astronaut - Tags: pattern, stripes, diagonal */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background: repeating-linear-gradient(
    45deg,
    #e5e5f7,
    #e5e5f7 10px,
    #444cf7 10px,
    #444cf7 20px
    );
}
</style>


================================================
FILE: Patterns/uiverse-astronaut_soft-fox-100.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by uiverse-astronaut - Tags: dots, pattern, polka dots */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-color: #e5e5f7;
  background-image: radial-gradient(#444cf7 10%, transparent 10%),
                      radial-gradient(#444cf7 10%, transparent 10%);
  background-size: 100px 100px;
  background-position: 0 0, 50px 50px;
}
</style>


================================================
FILE: Patterns/uiverse-astronaut_splendid-goat-87.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by uiverse-astronaut - Tags: gray, pattern, chess, checked, squares */
.container {
  width: 100%;
  height: 100%;
  background-color: white;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), 
                    linear-gradient(45deg, #ccc 25%, white 25%, white 75%, #ccc 75%, #ccc);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}
</style>


================================================
FILE: Patterns/uiverse-astronaut_stale-chicken-35.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by uiverse-astronaut - Tags: pink, pattern, stripes */
.container {
  width: 100%;
  height: 100%;
  --color: #faa7d8;
  background: linear-gradient(45deg, var(--color) 25%, transparent 25%) -50px 0,
        linear-gradient(-45deg, var(--color) 25%, transparent 25%) -50px 0,
        linear-gradient(45deg, transparent 75%, var(--color) 75%) -50px 0,
        linear-gradient(-45deg, transparent 75%, var(--color) 75%) -50px 0;
  background-color: #e5e5f7;
  background-size: 10px 40px;
}
</style>


================================================
FILE: Patterns/uiverse-astronaut_tall-vampirebat-56.html
================================================
<div class="container"></div>
<style>
/* From Uiverse.io by uiverse-astronaut - Tags: colorful, grid, pattern, checkered, boxes */
.container {
  width: 100%;
  height: 100%;
  --color1: rgb(108, 231, 221);
  --color2: rgb(250, 255, 178);
  background-color: var(--color1);
  background-image: linear-gradient(45deg, var(--color2) 25%, transparent 25%, transparent 75%, var(--color2) 75%, var(--color2)), 
                    linear-gradient(45deg, var(--color2) 25%, var(--color1) 25%, var(--color1) 75%, var(--color2) 75%, var(--color2));
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}
</style>


================================================
FILE: Patterns/vikas7754_grumpy-owl-55.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by vikas7754  - Tags: simple, clean, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  --sz: 15px;
  --c0: #000;
  --c1: #c71175;
  --ts: 50% / calc(var(--sz) * 8) calc(var(--sz) * 16);
  margin: 0;
  padding: 0;
  overflow: hidden;
  --dot: var(--c1) 0 calc(var(--sz) * 0.78),
    #fff0 calc(calc(var(--sz) * 0.78) + 1px) 100%;
  --dot2: radial-gradient(circle at 90% 0%, var(--dot)) var(--ts),
    radial-gradient(circle at 65% 0%, var(--dot)) var(--ts),
    radial-gradient(circle at 40% 0%, var(--dot)) var(--ts),
    radial-gradient(circle at 15% 0%, var(--dot)) var(--ts);
  --cg1: conic-gradient(from -90deg at 5% 51%, var(--c0) 0 90deg, #fff0 0 100%)
    var(--ts);
  --cg2: conic-gradient(from -90deg at 25% 50%, var(--c1) 0 90deg, #fff0 0 100%)
    var(--ts);
  --cg3: conic-gradient(
      from -90deg at 30% 38.5%,
      var(--c0) 0 90deg,
      #fff0 0 100%
    )
    var(--ts);
  --cg4: conic-gradient(
      from -90deg at 50% 37.5%,
      var(--c1) 0 90deg,
      #fff0 0 100%
    )
    var(--ts);
  --cg5: conic-gradient(from -90deg at 55% 26%, var(--c0) 0 90deg, #fff0 0 100%)
    var(--ts);
  --cg6: conic-gradient(from -90deg at 75% 25%, var(--c1) 0 90deg, #fff0 0 100%)
    var(--ts);
  --cg7: conic-gradient(
      from -90deg at 80% 13.5%,
      var(--c0) 0 90deg,
      #fff0 0 100%
    )
    var(--ts);
  --cg8: conic-gradient(
      from -90deg at 100% 12.5%,
      var(--c1) 0 90deg,
      #fff0 0 100%
    )
    var(--ts);

  background: var(--dot2), var(--dot2),
    radial-gradient(circle at 90% 100%, var(--dot)) var(--ts),
    radial-gradient(circle at 65% 100%, var(--dot)) var(--ts),
    radial-gradient(circle at 40% 100%, var(--dot)) var(--ts),
    radial-gradient(circle at 15% 100%, var(--dot)) var(--ts),
    radial-gradient(circle at 90% 12.5%, var(--dot)) var(--ts),
    radial-gradient(circle at 65% 25%, var(--dot)) var(--ts),
    radial-gradient(circle at 40% 37.5%, var(--dot)) var(--ts),
    radial-gradient(circle at 15% 50%, var(--dot)) var(--ts), var(--cg1),
    var(--cg1), var(--cg2), var(--cg2), var(--cg3), var(--cg3), var(--cg4),
    var(--cg4), var(--cg5), var(--cg5), var(--cg6), var(--cg6), var(--cg7),
    var(--cg7), var(--cg8), var(--cg8),
    linear-gradient(-45deg, #fff0 0 32.25%, #0002 50%, #000 77.5%) var(--ts),
    linear-gradient(-45deg, #fff0 0 32.25%, #000 60%) var(--ts),
    repeating-linear-gradient(90deg, var(--c0) 0 5%, var(--c1) 0 25%) var(--ts);
}

</style>
    

================================================
FILE: Patterns/vnuny_tough-dog-52.html
================================================
<div class="container"></div>

<style>
/* From Uiverse.io by vnuny - Tags: simple, pink, circle, pattern */
.container {
  background-color: #e5e5f7;
  opacity: 1;
  width: 100%;
  height: 100%;
  background-image: repeating-radial-gradient(
      circle at 0 0,
      transparent 0,
      #e5e5f7 30px
    ),
    repeating-linear-gradient(#ffb5b58a, #ffb8b8);
}

</style>


================================================
FILE: README.md
================================================
![screenshot](https://raw.githubusercontent.com/uiverse-io/.github/main/cover.png)

# Galaxy

Welcome to the `galaxy`, a collection of over 3000 unique UI elements from [Uiverse.io](https://uiverse.io/).

Every single UI element you find in here is sourced from our main platform, [Uiverse.io](http://uiverse.io/). As designers and enthusiasts share their creations on our website, we automatically curate and upload them here for ease of access and implementation.

## Browsing the Collection

While this repository provides an archive of all the UI elements, the best way to browse is on [Uiverse.io](https://uiverse.io/). There, you can search and interact with all the elements while having a visual overview.

## Contribution

Interested in growing this universe of UI components? Contribution is simple:

1. **Create & Submit**: Craft your unique UI element and submit it to [Uiverse.io](https://uiverse.io/).
2. **Approval**: Once your submission is reviewed and approved on our platform, it will automatically be uploaded to this repo.

**Please note**: Direct contributions or pull requests to this repository will be ignored. The `galaxy` is exclusively managed through the [Uiverse.io](http://uiverse.io/) platform to ensure consistency and quality.

## Licensing and Attribution

All UI elements in this repository are available under the **MIT License**, granting you the freedom to use, modify, and distribute them as you please. However, while not mandatory, we deeply value and appreciate attribution.

When implementing a UI element from this collection, kindly consider giving credit to both the original creator and [Uiverse.io](https://uiverse.io/). This simple act promotes the ethos of sharing, acknowledges the designer's effort, and celebrates the community spirit.


================================================
FILE: Radio-buttons/3bdel3ziz-T_curly-duck-62.html
================================================
<!-- From Uiverse.io by 3bdel3ziz-T  - Tags: simple, material design, icon, animation, radio, light&dark, creative, tailwindcss -->
<div
  class="flex flex-col justify-center items-center relative transition-all duration-[450ms] ease-in-out w-16"
>
  <article
    class="border border-solid border-gray-700 w-full ease-in-out duration-500 left-0 rounded-2xl inline-block shadow-lg shadow-black/15 bg-white"
  >
    <label
      for="dashboard"
      class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl"
    >
      <input
        class="hidden peer/expand"
        type="radio"
        name="path"
        id="dashboard"
      />
      <svg
        class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path
          d="M4 13h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1zm-1 7a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v4zm10 0a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v7zm1-10h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1z"
        ></path>
      </svg>
    </label>
    <label
      for="profile"
      class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl"
    >
      <input class="hidden peer/expand" type="radio" name="path" id="profile" />
      <svg
        class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path
          d="M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z"
        ></path>
      </svg>
    </label>
    <label
      for="messages"
      class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl"
    >
      <input
        class="hidden peer/expand"
        type="radio"
        name="path"
        id="messages"
      />
      <svg
        class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path
          d="M5 18v3.766l1.515-.909L11.277 18H16c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h1zM4 8h12v8h-5.277L7 18.234V16H4V8z"
        ></path>
        <path
          d="M20 2H8c-1.103 0-2 .897-2 2h12c1.103 0 2 .897 2 2v8c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2z"
        ></path>
      </svg>
    </label>
    <label
      for="help"
      class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl"
    >
      <input class="hidden peer/expand" type="radio" name="path" id="help" />
      <svg
        class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path
          d="M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM12 20c-4.411 0-8-3.589-8-8s3.567-8 7.953-8C16.391 4 20 7.589 20 12s-3.589 8-8 8z"
        ></path>
        <path d="M11 7h2v7h-2zm0 8h2v2h-2z"></path>
      </svg>
    </label>
    <label
      for="settings"
      class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl"
    >
      <input
        class="hidden peer/expand"
        type="radio"
        name="path"
        id="settings"
      />
      <svg
        class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path
          d="M12 16c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.084 0 2 .916 2 2s-.916 2-2 2-2-.916-2-2 .916-2 2-2z"
        ></path>
        <path
          d="m2.845 16.136 1 1.73c.531.917 1.809 1.261 2.73.73l.529-.306A8.1 8.1 0 0 0 9 19.402V20c0 1.103.897 2 2 2h2c1.103 0 2-.897 2-2v-.598a8.132 8.132 0 0 0 1.896-1.111l.529.306c.923.53 2.198.188 2.731-.731l.999-1.729a2.001 2.001 0 0 0-.731-2.732l-.505-.292a7.718 7.718 0 0 0 0-2.224l.505-.292a2.002 2.002 0 0 0 .731-2.732l-.999-1.729c-.531-.92-1.808-1.265-2.731-.732l-.529.306A8.1 8.1 0 0 0 15 4.598V4c0-1.103-.897-2-2-2h-2c-1.103 0-2 .897-2 2v.598a8.132 8.132 0 0 0-1.896 1.111l-.529-.306c-.924-.531-2.2-.187-2.731.732l-.999 1.729a2.001 2.001 0 0 0 .731 2.732l.505.292a7.683 7.683 0 0 0 0 2.223l-.505.292a2.003 2.003 0 0 0-.731 2.733zm3.326-2.758A5.703 5.703 0 0 1 6 12c0-.462.058-.926.17-1.378a.999.999 0 0 0-.47-1.108l-1.123-.65.998-1.729 1.145.662a.997.997 0 0 0 1.188-.142 6.071 6.071 0 0 1 2.384-1.399A1 1 0 0 0 11 5.3V4h2v1.3a1 1 0 0 0 .708.956 6.083 6.083 0 0 1 2.384 1.399.999.999 0 0 0 1.188.142l1.144-.661 1 1.729-1.124.649a1 1 0 0 0-.47 1.108c.112.452.17.916.17 1.378 0 .461-.058.925-.171 1.378a1 1 0 0 0 .471 1.108l1.123.649-.998 1.729-1.145-.661a.996.996 0 0 0-1.188.142 6.071 6.071 0 0 1-2.384 1.399A1 1 0 0 0 13 18.7l.002 1.3H11v-1.3a1 1 0 0 0-.708-.956 6.083 6.083 0 0 1-2.384-1.399.992.992 0 0 0-1.188-.141l-1.144.662-1-1.729 1.124-.651a1 1 0 0 0 .471-1.108z"
        ></path>
      </svg>
    </label>
  </article>
</div>


    

================================================
FILE: Radio-buttons/3bdel3ziz-T_gentle-vampirebat-46.html
================================================
<div class="select">
  <div
    class="selected"
    data-default="All"
    data-one="option-1"
    data-two="option-2"
    data-three="option-3"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="1em"
      viewBox="0 0 512 512"
      class="arrow"
    >
      <path
        d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
      ></path>
    </svg>
  </div>
  <div class="options">
    <div title="all">
      <input id="all" name="option" type="radio" checked="" />
      <label class="option" for="all" data-txt="All"></label>
    </div>
    <div title="option-1">
      <input id="option-1" name="option" type="radio" />
      <label class="option" for="option-1" data-txt="option-1"></label>
    </div>
    <div title="option-2">
      <input id="option-2" name="option" type="radio" />
      <label class="option" for="option-2" data-txt="option-2"></label>
    </div>
    <div title="option-3">
      <input id="option-3" name="option" type="radio" />
      <label class="option" for="option-3" data-txt="option-3"></label>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: simple, minimalist, input, dark, light, radio, custom, css */
.select {
  width: fit-content;
  cursor: pointer;
  position: relative;
  transition: 300ms;
  color: white;
  overflow: hidden;
}

.selected {
  background-color: #2a2f3b;
  padding: 5px;
  margin-bottom: 3px;
  border-radius: 5px;
  position: relative;
  z-index: 100000;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.arrow {
  position: relative;
  right: 0px;
  height: 10px;
  transform: rotate(-90deg);
  width: 25px;
  fill: white;
  z-index: 100000;
  transition: 300ms;
}

.options {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  padding: 5px;
  background-color: #2a2f3b;
  position: relative;
  top: -100px;
  opacity: 0;
  transition: 300ms;
}

.select:hover > .options {
  opacity: 1;
  top: 0;
}

.select:hover > .selected .arrow {
  transform: rotate(0deg);
}

.option {
  border-radius: 5px;
  padding: 5px;
  transition: 300ms;
  background-color: #2a2f3b;
  width: 150px;
  font-size: 15px;
}
.option:hover {
  background-color: #323741;
}

.options input[type="radio"] {
  display: none;
}

.options label {
  display: inline-block;
}
.options label::before {
  content: attr(data-txt);
}

.options input[type="radio"]:checked + label {
  display: none;
}

.options input[type="radio"]#all:checked + label {
  display: none;
}

.select:has(.options input[type="radio"]#all:checked) .selected::before {
  content: attr(data-default);
}
.select:has(.options input[type="radio"]#option-1:checked) .selected::before {
  content: attr(data-one);
}
.select:has(.options input[type="radio"]#option-2:checked) .selected::before {
  content: attr(data-two);
}
.select:has(.options input[type="radio"]#option-3:checked) .selected::before {
  content: attr(data-three);
}

</style>
    

================================================
FILE: Radio-buttons/3bdel3ziz-T_lucky-bullfrog-15.html
================================================
<section>
  <label title="home" for="home" class="label">
    <input id="home" name="page" type="radio" checked="" />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 21 20"
      height="20"
      width="21"
      class="icon home"
    >
      <path
        fill="inherit"
        d="M18.9999 6.01002L12.4499 0.770018C11.1699 -0.249982 9.16988 -0.259982 7.89988 0.760018L1.34988 6.01002C0.409885 6.76002 -0.160115 8.26002 0.0398848 9.44002L1.29988 16.98C1.58988 18.67 3.15988 20 4.86988 20H15.4699C17.1599 20 18.7599 18.64 19.0499 16.97L20.3099 9.43002C20.4899 8.26002 19.9199 6.76002 18.9999 6.01002ZM10.9199 16C10.9199 16.41 10.5799 16.75 10.1699 16.75C9.75988 16.75 9.41988 16.41 9.41988 16V13C9.41988 12.59 9.75988 12.25 10.1699 12.25C10.5799 12.25 10.9199 12.59 10.9199 13V16Z"
      ></path>
    </svg>
  </label>
  <label title="cart" for="cart" class="label">
    <input id="cart" name="page" type="radio" />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="inherit"
      viewBox="0 0 18 20"
      height="20"
      width="18"
      class="icon cart"
    >
      <path
        fill="inherit"
        d="M16.8035 6.96427C16.1335 6.22427 15.1235 5.79427 13.7235 5.64427V4.88427C13.7235 3.51427 13.1435 2.19427 12.1235 1.27427C11.6202 0.812823 11.025 0.462927 10.3771 0.247511C9.72909 0.032095 9.04292 -0.0439787 8.3635 0.0242742C5.9735 0.254274 3.9635 2.56427 3.9635 5.06427V5.64427C2.5635 5.79427 1.5535 6.22427 0.883496 6.96427C-0.0865043 8.04427 -0.0565042 9.48427 0.0534958 10.4843L0.753496 16.0543C0.963496 18.0043 1.7535 20.0043 6.0535 20.0043H11.6335C15.9335 20.0043 16.7235 18.0043 16.9335 16.0643L17.6335 10.4743C17.7435 9.48427 17.7635 8.04427 16.8035 6.96427ZM8.5035 1.41427C8.98813 1.36559 9.47758 1.41913 9.94023 1.57143C10.4029 1.72372 10.8284 1.97138 11.1894 2.29841C11.5503 2.62544 11.8387 3.02456 12.0357 3.46998C12.2328 3.91539 12.3343 4.39721 12.3335 4.88427V5.58427H5.3535V5.06427C5.3535 3.28427 6.8235 1.57427 8.5035 1.41427ZM5.2635 11.1543H5.2535C4.7035 11.1543 4.2535 10.7043 4.2535 10.1543C4.2535 9.60427 4.7035 9.15427 5.2535 9.15427C5.8135 9.15427 6.2635 9.60427 6.2635 10.1543C6.2635 10.7043 5.8135 11.1543 5.2635 11.1543ZM12.2635 11.1543H12.2535C11.7035 11.1543 11.2535 10.7043 11.2535 10.1543C11.2535 9.60427 11.7035 9.15427 12.2535 9.15427C12.8135 9.15427 13.2635 9.60427 13.2635 10.1543C13.2635 10.7043 12.8135 11.1543 12.2635 11.1543Z"
      ></path>
    </svg>
  </label>
  <label title="favorite" for="favorite" class="label">
    <input id="favorite" name="page" type="radio" />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="inherit"
      viewBox="0 0 20 18"
      height="18"
      width="20"
      class="icon favorite"
    >
      <path
        fill="inherit"
        d="M14.44 0C12.63 0 11.01 0.88 10 2.23C9.48413 1.53881 8.81426 0.977391 8.04353 0.590295C7.27281 0.203198 6.42247 0.00108555 5.56 0C2.49 0 0 2.5 0 5.59C0 6.78 0.19 7.88 0.52 8.9C2.1 13.9 6.97 16.89 9.38 17.71C9.72 17.83 10.28 17.83 10.62 17.71C13.03 16.89 17.9 13.9 19.48 8.9C19.81 7.88 20 6.78 20 5.59C20 2.5 17.51 0 14.44 0Z"
      ></path>
    </svg>
  </label>
  <label title="notifications" for="notifications" class="label">
    <input id="notifications" name="page" type="radio" />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="inherit"
      viewBox="0 0 16 20"
      height="20"
      width="16"
      class="icon history"
    >
      <path
        fill="inherit"
        d="M15.0294 12.4902L14.0294 10.8302C13.8194 10.4602 13.6294 9.76016 13.6294 9.35016V6.82016C13.6282 5.70419 13.3111 4.61137 12.7147 3.66813C12.1183 2.72489 11.267 1.96978 10.2594 1.49016C10.0022 1.0335 9.62709 0.654303 9.17324 0.392195C8.71939 0.130087 8.20347 -0.00530784 7.6794 0.000159243C6.5894 0.000159243 5.6094 0.590159 5.0894 1.52016C3.1394 2.49016 1.7894 4.50016 1.7894 6.82016V9.35016C1.7894 9.76016 1.5994 10.4602 1.3894 10.8202L0.379396 12.4902C-0.0206039 13.1602 -0.110604 13.9002 0.139396 14.5802C0.379396 15.2502 0.949396 15.7702 1.6894 16.0202C3.6294 16.6802 5.6694 17.0002 7.7094 17.0002C9.7494 17.0002 11.7894 16.6802 13.7294 16.0302C14.4294 15.8002 14.9694 15.2702 15.2294 14.5802C15.4894 13.8902 15.4194 13.1302 15.0294 12.4902ZM10.5194 18.0102C10.3091 18.5923 9.92467 19.0956 9.41835 19.4516C8.91203 19.8077 8.30837 19.9992 7.6894 20.0002C6.8994 20.0002 6.1194 19.6802 5.5694 19.1102C5.2494 18.8102 5.0094 18.4102 4.8694 18.0002C4.9994 18.0202 5.1294 18.0302 5.2694 18.0502C5.4994 18.0802 5.7394 18.1102 5.9794 18.1302C6.5494 18.1802 7.1294 18.2102 7.7094 18.2102C8.2794 18.2102 8.8494 18.1802 9.4094 18.1302C9.6194 18.1102 9.8294 18.1002 10.0294 18.0702L10.5194 18.0102Z"
      ></path>
    </svg>
  </label>
</section>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: hover, switch, radio, svg, custom, creative, transition, hover effect */
section {
  --col-orange: #d17842;
  --col-dark: #0c0f14;
  --col-darkGray: #52555a;
  --col-gray: #aeaeae;

  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: var(--col-dark);
  border-radius: 30px;
}
.label {
  padding: 8px 18px;
  transition: all 200ms;
  display: inline-block;
}

.label input[type="radio"] {
  display: none;
}
.label > svg {
  transition: all 200ms;
  fill: var(--col-gray);
  width: 14px;
}
.label:hover:not(:has(input:checked)) > svg {
  fill: #d17842;
  opacity: 0.6;
}
.label::before {
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  border-radius: 5px;
  position: relative;
  left: 50%;
  top: 20px;
  background: var(--col-orange);
  transition: all 200ms;
}
.label > svg {
  transition: 300ms;
  fill: var(--col-darkGray);
  margin-top: 0;
}
.label:has(input:checked) > svg {
  fill: var(--col-orange);
  scale: 1.2;
  margin-top: -5px;
}

.label:has(input:checked)::before {
  width: 100%;
  left: 0;
  top: 25px;
}

</style>
    

================================================
FILE: Radio-buttons/3bdel3ziz-T_tough-deer-65.html
================================================
<div class="container">
  <label for="dislike">
    <input type="radio" name="evaluation" id="dislike" />
    <svg
      class="icon dislike"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path
        d="M20 3H6.693A2.01 2.01 0 0 0 4.82 4.298l-2.757 7.351A1 1 0 0 0 2 12v2c0 1.103.897 2 2 2h5.612L8.49 19.367a2.004 2.004 0 0 0 .274 1.802c.376.52.982.831 1.624.831H12c.297 0 .578-.132.769-.36l4.7-5.64H20c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm-8.469 17h-1.145l1.562-4.684A1 1 0 0 0 11 14H4v-1.819L6.693 5H16v9.638L11.531 20zM18 14V5h2l.001 9H18z"
      ></path>
    </svg>
  </label>
  <div class="count">
    <div class="number">
      <span>0</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
    </div>
    <div class="number">
      <span>0</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
    </div>
    <div class="number">
      <span>0</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
    </div>
  </div>
  <label for="like">
    <input type="radio" name="evaluation" id="like" checked="" />
    <svg
      class="icon like"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path
        d="M20 8h-5.612l1.123-3.367c.202-.608.1-1.282-.275-1.802S14.253 2 13.612 2H12c-.297 0-.578.132-.769.36L6.531 8H4c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2h13.307a2.01 2.01 0 0 0 1.873-1.298l2.757-7.351A1 1 0 0 0 22 12v-2c0-1.103-.897-2-2-2zM4 10h2v9H4v-9zm16 1.819L17.307 19H8V9.362L12.468 4h1.146l-1.562 4.683A.998.998 0 0 0 13 10h7v1.819z"
      ></path>
    </svg>
  </label>
</div>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: red, blue, social, smooth, radio, custom, click effect, click animation */
.container {
  --col-gray: #3f3f3f;
  --col-white: #fff;
  --col-like: #2196f3;
  --col-dislike: #ff3232;
  --transition: 350ms;
  background-color: var(--col-gray);
  width: 130px;
  border-radius: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px;
  user-select: none;
  /*you can easlly change the number by using this variabels*/
  --zero: translateY(calc(50% - 11px));
  --one: translateY(calc(40% - 11px));
  --two: translateY(calc(30% - 11px));
  --three: translateY(calc(20% - 11px));
  --four: translateY(calc(10% - 11px));
  --five: translateY(calc(0% - 11px));
  --six: translateY(calc(-10% - 11px));
  --seven: translateY(calc(-20% - 11px));
  --eight: translateY(calc(-30% - 11px));
  --nine: translateY(calc(-40% - 11px));
  --ten: translateY(calc(-50% - 11px));
}
.container:has(#like:checked) .count {
  border-left-color: var(--col-like);
  border-right-color: transparent;
}
.container:has(#like:checked) .count .number:first-child {
  /*change first number from here*/
  /*when click on like*/
  transform: var(--nine);
}
.container:has(#like:checked) .count .number:nth-child(2) {
  /*change second number from here*/
  /*when click on like*/
  transform: var(--five);
}
.container:has(#like:checked) .count .number:last-child {
  /*change third number from here*/
  /*when click on like*/
  transform: var(--three);
}
.container:has(#dislike:checked) > .count {
  border-right-color: var(--col-dislike);
  border-left-color: transparent;
}
.container:has(#dislike:checked) > .count .number:first-child {
  /*change first number from here*/
  /*when click on dislike*/
  transform: var(--zero);
}
.container:has(#dislike:checked) > .count .number:nth-child(2) {
  /*change second number from here*/
  /*when click on dislike*/
  transform: var(--zero);
}
.container:has(#dislike:checked) > .count .number:last-child {
  /*change third number from here*/
  /*when click on dislike*/
  transform: var(--nine);
}
.container label input {
  display: none;
}
.container #like:checked + svg {
  animation: evaluation-animation var(--transition) ease-in-out 0s 1 normal both;
  fill: var(--col-like);
}
.container #dislike:checked + svg {
  animation: evaluation-animation var(--transition) ease-in-out 0s 1 normal both;
  fill: var(--col-dislike);
}
.container .icon {
  cursor: pointer;
  fill: var(--col-white);
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .icon.like {
  margin-left: 9px;
}
.container .icon.dislike {
  margin-right: 9px;
}
.container .count {
  transition: var(--transition);
  flex: 1;
  border-left: 1px solid var(--col-white);
  border-right: 1px solid var(--col-white);
  position: relative;
  height: 24px;
  overflow: hidden;
  margin: auto;
  color: white;
  font-size: 16px;
  font-family: sans-serif;
  display: flex;
  align-items: center;

  justify-content: center;
  gap: 0.5px;
  flex-direction: row;
}
.container .count .number {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(50% - 8px));
  transition: 1000ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.container .count .number:first-child {
  transition-delay: 200ms;
}
.container .count .number:nth-child(2) {
  transition-delay: 150ms;
}
.container .count .number:last-child {
  transition-delay: 50ms;
}

@keyframes evaluation-animation {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(-10deg);
  }
}

</style>
    

================================================
FILE: Radio-buttons/Admin12121_cold-bobcat-20.html
================================================
<div class="body">
  <div class="tabs">
    <input
      checked=""
      value="HTML"
      name="fav_language"
      id="html"
      type="radio"
      class="input"
    />
    <label for="html" class="label">HTML</label>
    <input
      value="CSS"
      name="fav_language"
      id="css"
      type="radio"
      class="input"
    />
    <label for="css" class="label">CSS</label>
    <input
      value="JavaScript"
      name="fav_language"
      id="javascript"
      type="radio"
      class="input"
    />
    <label for="javascript" class="label">JavaScript</label>
  </div>
</div>

<style>
/* From Uiverse.io by Admin12121  - Tags: simple, material design, checkbox, radio */
.body {
  --radius: 8px;
  --border: 4px;
  --height: 48px;
  --speed: 0.25s;
  display: grid;
  place-items: center;
  align-content: center;
  font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue",
    Helvetica, Arial, sans-serif, system-ui;
}

.tabs {
  height: var(--height);
  display: grid;
  grid-auto-flow: column;
  background: hsl(0 0% 0%);
  border-radius: var(--radius);
  grid-auto-columns: 1fr;
  position: relative;
  border: var(--border) solid hsl(0 0% 0%);
}

.tabs {
  --ease: linear(
    0,
    0.1641 3.52%,
    0.311 7.18%,
    0.4413 10.99%,
    0.5553 14.96%,
    0.6539 19.12%,
    0.738 23.5%,
    0.8086 28.15%,
    0.8662 33.12%,
    0.9078 37.92%,
    0.9405 43.12%,
    0.965 48.84%,
    0.9821 55.28%,
    0.992 61.97%,
    0.9976 70.09%,
    1
  );
}

.tabs > .input,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.tabs:has(:checked:nth-of-type(1)) {
  --active: 0;
}
.tabs:has(:checked:nth-of-type(2)) {
  --active: 1;
}
.tabs:has(:checked:nth-of-type(3)) {
  --active: 2;
}
.tabs:has(:checked:nth-of-type(4)) {
  --active: 3;
}

.tabs :checked + .label {
  --highlight: 1;
}

.tabs:has(.input:nth-of-type(2)) {
  --count: 2;
}
.tabs:has(.input:nth-of-type(3)) {
  --count: 3;
}
.tabs:has(.input:nth-of-type(4)) {
  --count: 4;
}

.tabs .label {
  padding: 0 clamp(10px, 10px + 10px, 20px);
  cursor: pointer;
  text-align: center;
  height: 100%;
  display: grid;
  border-radius: calc(var(--radius) - var(--border));
  place-items: center;
  color: hsl(0 0% 100% / calc(0.5 + var(--highlight, 0)));
  transition: background, color;
  transition-duration: 0.25s;
  transition-timing-function: var(--ease, ease);
}

.input:not(:checked) + .label:hover {
  --highlight: 0.35;
  background: hsl(0 0% 20%);
}

.tabs::after {
  pointer-events: none;
  content: "";
  width: calc(100% / var(--count));
  height: 100%;
  background: hsl(0 0% 100%);
  position: absolute;
  border-radius: calc(var(--radius) - var(--border));
  mix-blend-mode: difference;
  translate: calc(var(--active, 0) * 100%) 0;
  transition: translate, outline-color;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease, ease);
  outline: 2px solid transparent;
}

.tabs:has(:focus-visible)::after {
  outline-color: red;
}

</style>
    

================================================
FILE: Radio-buttons/AmIt-DasIT_neat-turkey-32.html
================================================
<div class="radio-input">
  <label class="label">
    <input type="radio" name="radio" checked="">
    <span class="check"></span>
  </label>
  <label class="label">
    <input type="radio" name="radio">
    <span class="check"></span>
  </label>
      
  <label class="label">
    <input type="radio" name="radio">
    <span class="check"></span>
  </label>
</div>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: dark, shadow, radio, neumorphism */
.radio-input .label input {
  display: none;
}

.radio-input {
  display: flex;
  gap: 20px;
}

.radio-input .label {
  display: flex;
}

.radio-input .label .check {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
  border: 3px solid transparent;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5),
   -1px -1px 4px rgba(255, 255, 255, 0.5);
}

.radio-input .label input:checked + .check {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5),
   -1px -1px 4px rgba(255, 255, 255, 0.5),
   inset 3px 3px 6px rgba(0, 0, 0, 0.5),
   inset -1px -1px 4px rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}
</style>


================================================
FILE: Radio-buttons/Arqui9897_stupid-kangaroo-64.html
================================================

  <label>
    <input checked="" name="example" class="option-input radio circlegg" type="radio">
  </label>
  <label>
    <input name="example" class="option-input radio circlegg" type="radio">
  </label>
  <label>
    <input name="example" class="option-input radio circlegg" type="radio">
  </label>

<style>
/* From Uiverse.io by Arqui9897 - Tags: radio */
.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 13.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 40px;
  transition: all 0.15s ease-out 0s;
  border: none;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  z-index: 1000;
}

.option-input:hover {
  background: #fa9115;
}

.option-input:checked {
  background: #faa91b;
}

.option-input:checked::before {
  width: 80px;
  height: 80px;
  display: flex;
  font-weight: bold;
  position: absolute;
  align-items: center;
  justify-content: center;
}

.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}

.option-input.radio {
  border-radius: 50%;
}

.option-input.radio::after {
  border-radius: 50%;
}

@keyframes click-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }

  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}

.circlegg {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(45deg, transparent, transparent 40%, yellow),
    linear-gradient(#040404, #0b0707);
  animation: rotate 1.5s linear infinite;
}

.circlegg:before,
.circlegg:after {
  content: " ";
  position: absolute;
  inset: 4px;
  background: linear-gradient(#181818, #1f1c1c);
  border-radius: inherit;
}

.circlegg:before {
  background: linear-gradient(45deg, transparent, transparent 40%, rgb(206, 91, 49));
  filter: blur(25px);
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

</style>


================================================
FILE: Radio-buttons/ChristosMourgelas_polite-rattlesnake-85.html
================================================
<div class="radio-input">
  <input class="value-radio" name="value-radio" id="option-1" type="radio">
  <label class="value-radio-label" for="option-1">Option A</label>

  <input class="value-radio" name="value-radio" id="option-2" type="radio">
  <label class="value-radio-label" for="option-2">Option B</label>
  
  <input class="value-radio" name="value-radio" id="option-3" type="radio">
  <label class="value-radio-label" for="option-3">Option C</label>

</div>
<style>
/* From Uiverse.io by ChristosMourgelas - Tags: radio */
.radio-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.value-radio {
  display: none;
}

.value-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 2px solid #4d4d4d;
  border-radius: 20px;
  color: #ccc;
  background-color: #333;
  cursor: pointer;
  transition: all 0.3s;
}

.value-radio:checked + .value-radio-label {
  border-color: #00b4ff;
  background-color: #00b4ff;
  color: #fff;
}

.value-radio-label::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #4d4d4d;
  transition: all 1s;
}

.value-radio:checked + .value-radio-label::before {
  border-color: #0175a6;
  background-color: #ffffff;
}
</style>


================================================
FILE: Radio-buttons/Cybercom682_jolly-liger-24.html
================================================
<!-- From Uiverse.io by Cybercom682  - Tags: shadow, radio, futuristic -->
<div class="flex flex-col space-y-4 p-5">
  <label class="relative flex items-center cursor-pointer">
    <input
      checked=""
      class="sr-only peer"
      name="futuristic-radio"
      type="radio"
    />
    <div
      class="w-6 h-6 bg-transparent border-2 border-red-500 rounded-full peer-checked:bg-red-500 peer-checked:border-red-500 peer-hover:shadow-lg peer-hover:shadow-red-500/50 peer-checked:shadow-lg peer-checked:shadow-red-500/50 transition duration-300 ease-in-out"
    ></div>
    <span class="ml-2 text-white">Hard</span>
  </label>
  <label class="relative flex items-center cursor-pointer">
    <input class="sr-only peer" name="futuristic-radio" type="radio" />
    <div
      class="w-6 h-6 bg-transparent border-2 border-yellow-500 rounded-full peer-checked:bg-yellow-500 peer-checked:border-yellow-500 peer-hover:shadow-lg peer-hover:shadow-yellow-500/50 peer-checked:shadow-lg peer-checked:shadow-yellow-500/50 transition duration-300 ease-in-out"
    ></div>
    <span class="ml-2 text-white">Normal</span>
  </label>
  <label class="relative flex items-center cursor-pointer">
    <input class="sr-only peer" name="futuristic-radio" type="radio" />
    <div
      class="w-6 h-6 bg-transparent border-2 border-green-500 rounded-full peer-checked:bg-green-500 peer-checked:border-green-500 peer-hover:shadow-lg peer-hover:shadow-green-500/50 peer-checked:shadow-lg peer-checked:shadow-green-500/50 transition duration-300 ease-in-out"
    ></div>
    <span class="ml-2 text-white">Easy</span>
  </label>
</div>


    

================================================
FILE: Radio-buttons/Galahhad_perfect-cheetah-72.html
================================================
<div class="theme-popup">
    <input type="radio" name="theme" id="default" checked="">
    <input type="radio" name="theme" id="light">
    <input type="radio" name="theme" id="dark">
    <input type="checkbox" id="checkbox">
  <label for="checkbox" class="theme-popup__button">
    <span class="theme-popup__icons">
      <svg class="default" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 2.52267C6.13332 2.64713 4.86254 3.27802 3.9372 4.29146C3.01186 5.3049 2.49882 6.62766 2.49882 8C2.49882 9.37234 3.01186 10.6951 3.9372 11.7085C4.86254 12.722 6.13332 13.3529 7.5 13.4773V2.52267ZM1.5 8C1.5 4.41 4.41 1.5 8 1.5C11.59 1.5 14.5 4.41 14.5 8C14.5 11.59 11.59 14.5 8 14.5C4.41 14.5 1.5 11.59 1.5 8Z" fill="currentColor"></path>
      </svg>
      <svg class="sun" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_78_63)">
          <path d="M7.99998 3.99256C5.79024 3.99256 3.99254 5.79061 3.99254 8.00035C3.99254 10.2101 5.79024 12.0081 7.99998 12.0081C10.2094 12.0081 12.0074 10.2105 12.0074 8.00035C12.0074 5.79026 10.2094 3.99256 7.99998 3.99256ZM7.99998 2.81453C7.79266 2.81453 7.59383 2.73219 7.4472 2.58563C7.30057 2.43907 7.21814 2.24027 7.21805 2.03295V0.781931C7.21805 0.57455 7.30043 0.375663 7.44707 0.229022C7.59371 0.0823818 7.7926 0 7.99998 0C8.20736 0 8.40625 0.0823818 8.55289 0.229022C8.69953 0.375663 8.78191 0.57455 8.78191 0.781931V2.03295C8.78182 2.24027 8.6994 2.43907 8.55276 2.58563C8.40613 2.73219 8.2073 2.81453 7.99998 2.81453ZM7.99998 13.1851C7.8973 13.1851 7.79562 13.2053 7.70075 13.2446C7.60588 13.2839 7.51968 13.3415 7.44707 13.4141C7.37446 13.4868 7.31687 13.573 7.27757 13.6678C7.23828 13.7627 7.21805 13.8644 7.21805 13.9671V15.2177C7.21805 15.4251 7.30043 15.624 7.44707 15.7706C7.59371 15.9173 7.7926 15.9996 7.99998 15.9996C8.20736 15.9996 8.40625 15.9173 8.55289 15.7706C8.69953 15.624 8.78191 15.4251 8.78191 15.2177V13.9671C8.78182 13.7597 8.69941 13.5609 8.55279 13.4142C8.40617 13.2676 8.20733 13.1852 7.99998 13.1851ZM11.6662 4.33339C11.5197 4.18671 11.4374 3.98785 11.4374 3.78051C11.4374 3.57318 11.5197 3.37432 11.6662 3.22764L12.5509 2.34296C12.6232 2.26911 12.7095 2.21033 12.8047 2.17003C12.8999 2.12972 13.0021 2.1087 13.1055 2.10816C13.2088 2.10762 13.3113 2.12758 13.4069 2.16689C13.5025 2.2062 13.5894 2.26408 13.6625 2.33717C13.7356 2.41026 13.7934 2.49712 13.8327 2.59273C13.872 2.68833 13.892 2.79078 13.8915 2.89415C13.8909 2.99752 13.8699 3.09976 13.8296 3.19494C13.7893 3.29013 13.7305 3.37639 13.6567 3.44872L12.772 4.33339C12.6254 4.48001 12.4265 4.56238 12.2191 4.56238C12.0117 4.56238 11.8129 4.48001 11.6662 4.33339ZM4.33337 11.667C4.26081 11.5943 4.17463 11.5366 4.07976 11.4973C3.98489 11.4579 3.8832 11.4377 3.78049 11.4377C3.67779 11.4377 3.5761 11.4579 3.48123 11.4973C3.38636 11.5366 3.30018 11.5943 3.22762 11.667L2.34294 12.5513C2.19882 12.6984 2.11858 12.8965 2.11966 13.1025C2.12073 13.3084 2.20303 13.5057 2.34867 13.6513C2.49431 13.797 2.69154 13.8793 2.8975 13.8803C3.10347 13.8814 3.30154 13.8012 3.4487 13.657L4.33337 12.772C4.40599 12.6995 4.46361 12.6134 4.50291 12.5186C4.54222 12.4237 4.56245 12.3221 4.56245 12.2195C4.56245 12.1169 4.54222 12.0152 4.50291 11.9204C4.46361 11.8256 4.40599 11.7395 4.33337 11.667ZM13.1851 8C13.1851 7.56811 13.5351 7.21807 13.967 7.21807H15.218C15.3221 7.21585 15.4256 7.23444 15.5224 7.27273C15.6191 7.31102 15.7073 7.36825 15.7817 7.44106C15.8561 7.51387 15.9152 7.6008 15.9555 7.69675C15.9958 7.7927 16.0166 7.89574 16.0166 7.99982C16.0166 8.10391 15.9958 8.20695 15.9555 8.3029C15.9152 8.39884 15.8561 8.48577 15.7817 8.55859C15.7073 8.6314 15.6191 8.68863 15.5224 8.72692C15.4256 8.76521 15.3221 8.78379 15.218 8.78158H13.967C13.8644 8.78162 13.7627 8.76144 13.6678 8.72218C13.573 8.68293 13.4868 8.62536 13.4141 8.55278C13.3415 8.4802 13.2839 8.39403 13.2446 8.29918C13.2053 8.20433 13.1851 8.10267 13.1851 8ZM2.81451 8C2.81451 7.89732 2.79428 7.79564 2.75499 7.70077C2.71569 7.6059 2.65809 7.5197 2.58548 7.44709C2.51288 7.37448 2.42668 7.31689 2.33181 7.27759C2.23694 7.23829 2.13526 7.21807 2.03258 7.21807H0.781912C0.67785 7.21585 0.574393 7.23444 0.477607 7.27273C0.380821 7.31102 0.292654 7.36825 0.218276 7.44106C0.143897 7.51387 0.0848039 7.6008 0.044461 7.69675C0.00411808 7.7927 -0.0166626 7.89574 -0.0166626 7.99982C-0.0166626 8.10391 0.00411808 8.20695 0.044461 8.3029C0.0848039 8.39884 0.143897 8.48577 0.218276 8.55859C0.292654 8.6314 0.380821 8.68863 0.477607 8.72692C0.574393 8.76521 0.67785 8.78379 0.781912 8.78158H2.03293C2.24022 8.78158 2.43901 8.69923 2.58559 8.55266C2.73216 8.40608 2.81451 8.20729 2.81451 8ZM11.6662 11.667C11.8129 11.5204 12.0118 11.4381 12.2191 11.4381C12.4264 11.4381 12.6253 11.5204 12.772 11.667L13.6567 12.5516C13.8033 12.6983 13.8856 12.8971 13.8856 13.1045C13.8855 13.3118 13.8031 13.5106 13.6565 13.6572C13.5839 13.7298 13.4977 13.7874 13.4028 13.8266C13.308 13.8659 13.2063 13.8861 13.1037 13.8861C12.8963 13.8861 12.6975 13.8037 12.5509 13.657L11.6662 12.7724C11.5936 12.6998 11.536 12.6137 11.4967 12.5188C11.4574 12.424 11.4371 12.3223 11.4371 12.2197C11.4371 12.117 11.4574 12.0153 11.4967 11.9205C11.536 11.8257 11.5936 11.7395 11.6662 11.667ZM4.33337 4.33339C4.48 4.18675 4.56237 3.98788 4.56237 3.78051C4.56237 3.57315 4.48 3.37427 4.33337 3.22764L3.4487 2.34331C3.3011 2.20166 3.10386 2.12349 2.89929 2.12558C2.69473 2.12766 2.49913 2.20983 2.35445 2.35447C2.20976 2.4991 2.12753 2.69468 2.12538 2.89924C2.12323 3.10381 2.20133 3.30107 2.34294 3.44872L3.22762 4.33339C3.30018 4.40608 3.38636 4.46374 3.48123 4.50308C3.5761 4.54243 3.67779 4.56268 3.78049 4.56268C3.8832 4.56268 3.98489 4.54243 4.07976 4.50308C4.17463 4.46374 4.26081 4.40608 4.33337 4.33339Z" fill="currentColor"></path>
        </g>
        <defs>
          <clipPath>
            <rect width="16" height="16" fill="currentColor"></rect>
          </clipPath>
        </defs>
      </svg>
      <svg class="moon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_78_60)">
          <path d="M7.24135 14C10.1123 13.9981 12.6803 12.2445 13.7367 9.59537C13.7953 9.44832 13.727 9.39266 13.5866 9.46575C12.7818 9.88471 11.888 10.1036 10.9806 10.104C7.86082 10.1042 5.33169 7.57506 5.33188 4.45524C5.3323 3.64636 5.50645 2.84701 5.84254 2.11127C6.17863 1.37552 6.66883 0.720544 7.27996 0.190644C7.42672 0.0486062 7.38444 -0.0171645 7.09498 0.00382823C3.42058 0.029058 0.24231 3.13569 0.24231 7.00113C0.24231 10.8666 3.3758 14.0002 7.24135 14Z" fill="currentColor"></path>
        </g>
        <defs>
          <clipPath>
            <rect width="14" height="14" fill="currentColor"></rect>
          </clipPath>
        </defs>
      </svg>
    </span>
    Theme
  </label>
  <div class="theme-popup__list-container">
    <ul class="theme-popup__list">
      <li>
        <label for="default">
          <span class="theme-popup__icons">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 2.52267C6.13332 2.64713 4.86254 3.27802 3.9372 4.29146C3.01186 5.3049 2.49882 6.62766 2.49882 8C2.49882 9.37234 3.01186 10.6951 3.9372 11.7085C4.86254 12.722 6.13332 13.3529 7.5 13.4773V2.52267ZM1.5 8C1.5 4.41 4.41 1.5 8 1.5C11.59 1.5 14.5 4.41 14.5 8C14.5 11.59 11.59 14.5 8 14.5C4.41 14.5 1.5 11.59 1.5 8Z" fill="currentColor"></path>
            </svg>
          </span>
          <span>
            OS Default
          </span>
        </label>
      </li>
      <li>
        <label for="light">
          <span class="theme-popup__icons">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_78_63)">
                <path d="M7.99998 3.99256C5.79024 3.99256 3.99254 5.79061 3.99254 8.00035C3.99254 10.2101 5.79024 12.0081 7.99998 12.0081C10.2094 12.0081 12.0074 10.2105 12.0074 8.00035C12.0074 5.79026 10.2094 3.99256 7.99998 3.99256ZM7.99998 2.81453C7.79266 2.81453 7.59383 2.73219 7.4472 2.58563C7.30057 2.43907 7.21814 2.24027 7.21805 2.03295V0.781931C7.21805 0.57455 7.30043 0.375663 7.44707 0.229022C7.59371 0.0823818 7.7926 0 7.99998 0C8.20736 0 8.40625 0.0823818 8.55289 0.229022C8.69953 0.375663 8.78191 0.57455 8.78191 0.781931V2.03295C8.78182 2.24027 8.6994 2.43907 8.55276 2.58563C8.40613 2.73219 8.2073 2.81453 7.99998 2.81453ZM7.99998 13.1851C7.8973 13.1851 7.79562 13.2053 7.70075 13.2446C7.60588 13.2839 7.51968 13.3415 7.44707 13.4141C7.37446 13.4868 7.31687 13.573 7.27757 13.6678C7.23828 13.7627 7.21805 13.8644 7.21805 13.9671V15.2177C7.21805 15.4251 7.30043 15.624 7.44707 15.7706C7.59371 15.9173 7.7926 15.9996 7.99998 15.9996C8.20736 15.9996 8.40625 15.9173 8.55289 15.7706C8.69953 15.624 8.78191 15.4251 8.78191 15.2177V13.9671C8.78182 13.7597 8.69941 13.5609 8.55279 13.4142C8.40617 13.2676 8.20733 13.1852 7.99998 13.1851ZM11.6662 4.33339C11.5197 4.18671 11.4374 3.98785 11.4374 3.78051C11.4374 3.57318 11.5197 3.37432 11.6662 3.22764L12.5509 2.34296C12.6232 2.26911 12.7095 2.21033 12.8047 2.17003C12.8999 2.12972 13.0021 2.1087 13.1055 2.10816C13.2088 2.10762 13.3113 2.12758 13.4069 2.16689C13.5025 2.2062 13.5894 2.26408 13.6625 2.33717C13.7356 2.41026 13.7934 2.49712 13.8327 2.59273C13.872 2.68833 13.892 2.79078 13.8915 2.89415C13.8909 2.99752 13.8699 3.09976 13.8296 3.19494C13.7893 3.29013 13.7305 3.37639 13.6567 3.44872L12.772 4.33339C12.6254 4.48001 12.4265 4.56238 12.2191 4.56238C12.0117 4.56238 11.8129 4.48001 11.6662 4.33339ZM4.33337 11.667C4.26081 11.5943 4.17463 11.5366 4.07976 11.4973C3.98489 11.4579 3.8832 11.4377 3.78049 11.4377C3.67779 11.4377 3.5761 11.4579 3.48123 11.4973C3.38636 11.5366 3.30018 11.5943 3.22762 11.667L2.34294 12.5513C2.19882 12.6984 2.11858 12.8965 2.11966 13.1025C2.12073 13.3084 2.20303 13.5057 2.34867 13.6513C2.49431 13.797 2.69154 13.8793 2.8975 13.8803C3.10347 13.8814 3.30154 13.8012 3.4487 13.657L4.33337 12.772C4.40599 12.6995 4.46361 12.6134 4.50291 12.5186C4.54222 12.4237 4.56245 12.3221 4.56245 12.2195C4.56245 12.1169 4.54222 12.0152 4.50291 11.9204C4.46361 11.8256 4.40599 11.7395 4.33337 11.667ZM13.1851 8C13.1851 7.56811 13.5351 7.21807 13.967 7.21807H15.218C15.3221 7.21585 15.4256 7.23444 15.5224 7.27273C15.6191 7.31102 15.7073 7.36825 15.7817 7.44106C15.8561 7.51387 15.9152 7.6008 15.9555 7.69675C15.9958 7.7927 16.0166 7.89574 16.0166 7.99982C16.0166 8.10391 15.9958 8.20695 15.9555 8.3029C15.9152 8.39884 15.8561 8.48577 15.7817 8.55859C15.7073 8.6314 15.6191 8.68863 15.5224 8.72692C15.4256 8.76521 15.3221 8.78379 15.218 8.78158H13.967C13.8644 8.78162 13.7627 8.76144 13.6678 8.72218C13.573 8.68293 13.4868 8.62536 13.4141 8.55278C13.3415 8.4802 13.2839 8.39403 13.2446 8.29918C13.2053 8.20433 13.1851 8.10267 13.1851 8ZM2.81451 8C2.81451 7.89732 2.79428 7.79564 2.75499 7.70077C2.71569 7.6059 2.65809 7.5197 2.58548 7.44709C2.51288 7.37448 2.42668 7.31689 2.33181 7.27759C2.23694 7.23829 2.13526 7.21807 2.03258 7.21807H0.781912C0.67785 7.21585 0.574393 7.23444 0.477607 7.27273C0.380821 7.31102 0.292654 7.36825 0.218276 7.44106C0.143897 7.51387 0.0848039 7.6008 0.044461 7.69675C0.00411808 7.7927 -0.0166626 7.89574 -0.0166626 7.99982C-0.0166626 8.10391 0.00411808 8.20695 0.044461 8.3029C0.0848039 8.39884 0.143897 8.48577 0.218276 8.55859C0.292654 8.6314 0.380821 8.68863 0.477607 8.72692C0.574393 8.76521 0.67785 8.78379 0.781912 8.78158H2.03293C2.24022 8.78158 2.43901 8.69923 2.58559 8.55266C2.73216 8.40608 2.81451 8.20729 2.81451 8ZM11.6662 11.667C11.8129 11.5204 12.0118 11.4381 12.2191 11.4381C12.4264 11.4381 12.6253 11.5204 12.772 11.667L13.6567 12.5516C13.8033 12.6983 13.8856 12.8971 13.8856 13.1045C13.8855 13.3118 13.8031 13.5106 13.6565 13.6572C13.5839 13.7298 13.4977 13.7874 13.4028 13.8266C13.308 13.8659 13.2063 13.8861 13.1037 13.8861C12.8963 13.8861 12.6975 13.8037 12.5509 13.657L11.6662 12.7724C11.5936 12.6998 11.536 12.6137 11.4967 12.5188C11.4574 12.424 11.4371 12.3223 11.4371 12.2197C11.4371 12.117 11.4574 12.0153 11.4967 11.9205C11.536 11.8257 11.5936 11.7395 11.6662 11.667ZM4.33337 4.33339C4.48 4.18675 4.56237 3.98788 4.56237 3.78051C4.56237 3.57315 4.48 3.37427 4.33337 3.22764L3.4487 2.34331C3.3011 2.20166 3.10386 2.12349 2.89929 2.12558C2.69473 2.12766 2.49913 2.20983 2.35445 2.35447C2.20976 2.4991 2.12753 2.69468 2.12538 2.89924C2.12323 3.10381 2.20133 3.30107 2.34294 3.44872L3.22762 4.33339C3.30018 4.40608 3.38636 4.46374 3.48123 4.50308C3.5761 4.54243 3.67779 4.56268 3.78049 4.56268C3.8832 4.56268 3.98489 4.54243 4.07976 4.50308C4.17463 4.46374 4.26081 4.40608 4.33337 4.33339Z" fill="currentColor"></path>
              </g>
              <defs>
                <clipPath>
                  <rect width="16" height="16" fill="currentColor"></rect>
                </clipPath>
              </defs>
            </svg>
          </span>
          <span>
            Light
          </span>
        </label>
      </li>
      <li>
        <label for="dark">
          <span class="theme-popup__icons">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_78_60)">
                <path d="M7.24135 14C10.1123 13.9981 12.6803 12.2445 13.7367 9.59537C13.7953 9.44832 13.727 9.39266 13.5866 9.46575C12.7818 9.88471 11.888 10.1036 10.9806 10.104C7.86082 10.1042 5.33169 7.57506 5.33188 4.45524C5.3323 3.64636 5.50645 2.84701 5.84254 2.11127C6.17863 1.37552 6.66883 0.720544 7.27996 0.190644C7.42672 0.0486062 7.38444 -0.0171645 7.09498 0.00382823C3.42058 0.029058 0.24231 3.13569 0.24231 7.00113C0.24231 10.8666 3.3758 14.0002 7.24135 14Z" fill="currentColor"></path>
              </g>
              <defs>
                <clipPath>
                  <rect width="14" height="14" fill="currentColor"></rect>
                </clipPath>
              </defs>
            </svg>
          </span>
          <span>
            Night
          </span>
        </label>
      </li>
    </ul>
  </div>
</div>
<style>
/* From Uiverse.io by Galahhad - Tags: theme, theme-switch, radio, dropdown */
/* radio settings 👇 */

.theme-popup {
  /* total */
  --total_text_color: #e0e0e0;
  --total_font_family: Menlo, Roboto Mono, monospace;
  /* button */
  --btn_bg: #3A3A3A;
  --btn_padding: 0.5em;
  --btn_height: 2em;
  --btn_border_radius: 0.3125em;
  --btn_outline_width: 0.0625em;
  --btn_outline_color: #A0A0A0;
  --btn_outline_offset: 0.0625em;
  --btn_gap: 0.3125em;
  /* list */
  --list_padding: 0.5em;
  --list_bg: var(--btn_bg);
  --list_border_radius: var(--btn_border_radius);
  --list_gap: 0.1875em;
  --list_btn_hover_bg: #5A5656;
  --list_btn_active: #b9b9b970;
  --list_btn_border_radius: 0.25em;
  --list_btn_padding: 0.35em 1em;
  --list_btn_gap: 0.4375em;
  --list_btn_outline_width: 0.0625em;
  --list_btn_outline_color: rgb(212, 210, 210);
  --list_offset: 0.35em;
  --list_btn_font_size: 14px;
  --list_position_left: 0;
  --list_position_right: unset;
  /* 👆 if you want to change sides just switch one property */
  /* from properties to "unset" and the other to 0 */
}

.theme-popup__button .theme-popup__icons svg,
#light,
#dark, 
#default, 
#checkbox,
.theme-popup__list-container {
  display: none;
}

.theme-popup {
  color: var(--total_text_color);
  font-family: var(--total_font_family);
  position: relative;
  user-select: none;
}

.theme-popup__list-container {
  position: absolute;
  left: var(--list_position_left);
  right: var(--list_position_right);
  top: calc(var(--btn_height) + var(--list_offset));
}

.theme-popup__icons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.theme-popup__button {
  line-height: var(--btn_height);
  background-color: var(--btn_bg);
  padding: 0 var(--btn_padding);
  display: inline-flex;
  align-items: center;
  column-gap: var(--btn_gap);
  border-radius: var(--btn_border_radius);
  border: none;
  color: inherit;
  font-family: inherit;
  outline: none;
  font-weight: bold;
}

.theme-popup__list {
  margin: 0;
  list-style-type: none;
  padding: var(--list_padding);
  border-radius: var(--list_border_radius);
  background-color: var(--list_bg);
  display: flex;
  flex-direction: column;
  row-gap: var(--list_gap);
}

.theme-popup__list label {
  display: flex;
  align-items: center;
  justify-content: start;
  column-gap: var(--list_btn_gap);
  padding: var(--list_btn_padding);
  border-radius: var(--list_btn_border_radius);
  white-space: nowrap;
}

.theme-popup__list label span {
  font-size: var(--list_btn_font_size);
}

/* actions */

#checkbox:checked~.theme-popup__button {
  outline: var(--btn_outline_width) solid var(--btn_outline_color);
  outline-offset: var(--btn_outline_offset);
}

#checkbox:checked~.theme-popup__list-container {
  display: block;
}

.theme-popup__list label:hover,
.theme-popup__button:hover,
#checkbox:checked~.theme-popup__button {
  background-color: var(--list_btn_hover_bg);
}

#default:checked~.theme-popup__list-container label[for="default"],
#light:checked~.theme-popup__list-container label[for="light"],
#dark:checked~.theme-popup__list-container label[for="dark"] {
  background-color: var(--list_btn_active);
  outline: var(--list_btn_outline_width) solid var(--list_btn_outline_color);
}

#default:checked~label svg.default,
#light:checked~label svg.sun,
#dark:checked~label svg.moon {
  display: block;
}
</style>


================================================
FILE: Radio-buttons/JaydipPrajapati1910_foolish-donkey-86.html
================================================
<div class="radio-input">
 <input type="radio" id="value-1" name="value-radio" value="value-1">
  <div class="circle">
   </div> 
 <input checked="" type="radio" id="value-2" name="value-radio" value="value-2">
  <div class="circle">
  </div> 
 <input type="radio" id="value-3" name="value-radio" value="value-3">
  <div class="circle">
  </div>
</div>  




<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: yellow, radio, radio-buttons */
.radio-input {
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-input input {
  appearance: none;
  width: 2em;
  height: 2em;
  background-color: #171717;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
  border-radius: 50%;
  transition: .4s ease-in-out;
}

.radio-input input:hover {
  scale: 1.2;
  cursor: pointer;
  box-shadow: none;
}

.radio-input .circle {
  position: relative;
  top: 0.01em;
  left: -1.1em;
  width: 0.6em;
  height: 0.6em;
  background-color: yellow;
  scale: 0;
  border-radius: 10px;
  transition: .4s ease-in-out;
}

.radio-input input:checked {
  box-shadow: none;
  border: 1px solid yellow;
}

.radio-input input:checked + .circle {
  transform: rotate(360deg);
  scale: 1;
}


</style>


================================================
FILE: Radio-buttons/JkHuger_dull-lizard-58.html
================================================
<div class="radio-container">
  <div class="radio-wrapper">
    <label class="radio-button">
      <input id="option1" name="radio-group" type="radio">
      <span class="radio-checkmark"></span>
      <span class="radio-label">Male</span>
    </label>
  </div>

  <div class="radio-wrapper">
    <label class="radio-button">
      <input id="option2" name="radio-group" type="radio">
      <span class="radio-checkmark"></span>
      <span class="radio-label">Female</span>
    </label>
  </div>

  <div class="radio-wrapper">
    <label class="radio-button">
      <input id="option3" name="radio-group" type="radio">
      <span class="radio-checkmark"></span>
      <span class="radio-label">Other</span>
    </label>
  </div>
</div>

<style>
/* From Uiverse.io by JkHuger - Tags: radio, male, female, non binary */
.radio-container {
  margin: 0 auto;
  max-width: 300px;
  color: white;
}

.radio-wrapper {
  margin-bottom: 20px;
}

.radio-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.radio-button:hover {
  transform: translateY(-2px);
}

.radio-button input[type="radio"] {
  display: none;
}

.radio-checkmark {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border: 2px solid #333;
  border-radius: 50%;
}

.radio-checkmark:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #333;
  transition: all 0.2s ease-in-out;
}

.radio-button input[type="radio"]:checked ~ .radio-checkmark:before {
  transform: translate(-50%, -50%) scale(1);
}

.radio-label {
  font-size: 16px;
  font-weight: 600;
}

</style>


================================================
FILE: Radio-buttons/JkHuger_silly-insect-34.html
================================================
<div class="rating">
  <form class="rating-form">
    <label for="super-happy" class="lb">
	<input type="radio" name="rating" class="super-happy" id="super-happy" value="super-happy">
	<svg class="svg" viewBox="0 0 24 24"><path d="M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>
	</label>
    <label for="neutral" class="lb">
	<input type="radio" name="rating" class="neutral" id="neutral" value="neutral">
	<svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 24 24"><path d="M8.5,11A1.5,1.5 0 0,1 7,9.5A1.5,1.5 0 0,1 8.5,8A1.5,1.5 0 0,1 10,9.5A1.5,1.5 0 0,1 8.5,11M15.5,11A1.5,1.5 0 0,1 14,9.5A1.5,1.5 0 0,1 15.5,8A1.5,1.5 0 0,1 17,9.5A1.5,1.5 0 0,1 15.5,11M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M9,14H15A1,1 0 0,1 16,15A1,1 0 0,1 15,16H9A1,1 0 0,1 8,15A1,1 0 0,1 9,14Z"></path></svg>
	</label>
    <label for="super-sad" class="lb">
	<input type="radio" name="rating" class="super-sad" id="super-sad" value="super-sad">
	<svg class="svg" viewBox="0 0 24 24"><path d="M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M16.18,7.76L15.12,8.82L14.06,7.76L13,8.82L14.06,9.88L13,10.94L14.06,12L15.12,10.94L16.18,12L17.24,10.94L16.18,9.88L17.24,8.82L16.18,7.76M7.82,12L8.88,10.94L9.94,12L11,10.94L9.94,9.88L11,8.82L9.94,7.76L8.88,8.82L7.82,7.76L6.76,8.82L7.82,9.88L6.76,10.94L7.82,12M12,14C9.67,14 7.69,15.46 6.89,17.5H17.11C16.31,15.46 14.33,14 12,14Z"></path></svg>
	</label></form></div>
<style>
/* From Uiverse.io by JkHuger - Tags: select, option, emotion */
.rating {
  cursor: pointer;
}

.card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);
  background-color: rgb(255, 255, 255);
  padding: 0.8rem;
  width: 33rem;
}

.rating-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.4rem 0.8rem;
  width: 100%;
}

.rating {
  background-color: rgba(0, 0, 16, 0.8);
  padding: 0.4rem 0.4rem 0.1rem 0.4rem;
  border-radius: 2.2rem;
}

.rating-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.svg {
  fill: rgb(242, 242, 242);
  height: 3.6rem;
  width: 3.6rem;
  margin: 0.2rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.rating-form-2 svg {
  height: 3rem;
  width: 3rem;
  margin: 0.5rem;
}

#radios label {
  position: relative;
}

.super-happy, [type="radio"] {
  position: absolute;
  opacity: 0;
}

.input ,[type="radio"] + svg {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.super-happy[class="super-happy"]:hover + svg,
.super-happy[class="super-happy"]:checked + svg,
.super-happy[class="super-happy"]:focus + svg {
  fill: rgb(0, 204, 79);
  transition: 1.5s;
}

.neutral[class="neutral"]:hover + svg,
.neutral[class="neutral"]:checked + svg,
.neutral[class="neutral"]:focus + svg {
  fill: rgb(232, 214, 0);
  transition: 1.5s;
}

.super-sad[class="super-sad"]:hover + svg,
.super-sad[class="super-sad"]:checked + svg,
.super-sad[class="super-sad"]:focus + svg {
  fill: rgb(239, 42, 16);
  transition: 1.5s;
}



</style>


================================================
FILE: Radio-buttons/LilaRest_giant-jellyfish-3.html
================================================
<div class="radio-input">
  <div class="glass">
    <div class="glass-inner">
    </div>
  </div>
  <div class="selector">
    <div class="choice">
      <div>
        <input class="choice-circle" checked="true" value="one" name="number-selector" id="one" type="radio">
        <div class="ball"></div>
      </div>
      <label for="one" class="choice-name">1</label>
    </div>
    <div class="choice">
      <div>
        <input class="choice-circle" value="two" name="number-selector" id="two" type="radio">
        <div class="ball"></div>
      </div>
      <label class="choice-name">2</label>
    </div>
    <div class="choice">
      <div>
        <input class="choice-circle" value="three" name="number-selector" id="three" type="radio">
        <div class="ball"></div>
      </div>
      <label for="three" class="choice-name">3</label>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by LilaRest - Tags:  */
.radio-input {
  display: flex;
  height: 210px;
  align-items: center;
}

.glass {
  z-index: 2;
  height: 110%;
  width: 95px;
  margin-right: 25px;
  padding: 8px;
  background-color: rgba(190, 189, 189, 0.5);
  border-radius: 35px;
  box-shadow: rgba(50, 50, 93, 0.2) 0px 25px 50px -10px,
   rgba(0, 0, 0, 0.25) 0px 10px 30px -15px,
    rgba(10, 37, 64, 0.26) 0px -2px 6px 0px inset;
  backdrop-filter: blur(8px);
}

.glass-inner {
  width: 100%;
  height: 100%;
  border-color: rgba(245, 245, 245, 0.45);
  border-width: 9px;
  border-style: solid;
  border-radius: 30px
}

.selector {
  display: flex;
  flex-direction: column;
}

.choice {
  margin: 10px 0 10px 0;
  display: flex;
  align-items: center;
}

.choice > div {
  position: relative;
  width: 41px;
  height: 41px;
  margin-right: 15px;
  z-index: 0;
}

.choice-circle {
  appearance: none;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  border-width: 9px;
  border-style: solid;
  border-color: rgba(245, 245, 245, 0.45);
  cursor: pointer;
  box-shadow: 0px 0px 20px -13px gray,
  0px 0px 20px -14px gray inset;
}

.ball {
  z-index: 1;
  position: absolute;
  inset: 0px;
  transform: translateX(-95px);
  box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,
   rgba(0, 0, 0, 0.15) 0px -15px 15px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -40px 20px 0px inset,
     rgba(0, 0, 0, 0.06) 0px 2px 1px, 
     rgba(0, 0, 0, 0.09) 0px 4px 2px, 
     rgba(0, 0, 0, 0.09) 0px 8px 4px, 
     rgba(0, 0, 0, 0.09) 0px 16px 8px,
      rgba(0, 0, 0, 0.09) 0px 32px 16px,
       0px -1px 15px -8px rgba(0, 0, 0, 0.09);
  border-radius: 100%;
  transition: transform 800ms cubic-bezier(1,-0.4,0,1.4);
  background-color: rgb(232, 232, 232, 1);
}

.choice-circle:checked + .ball {
  transform: translateX(0px);
}

.choice-name {
  color: rgb(177, 176, 176);
  font-size: 35px;
  font-weight: 900;
  font-family: monospace;
  cursor: pointer;
}
</style>


================================================
FILE: Radio-buttons/LilaRest_soft-baboon-75.html
================================================
<div class="radio-input">
  <div class="glass">
    <div class="glass-inner">
    </div>
  </div>
  <div class="selector">
    <div class="choice">
      <div>
        <input type="radio" id="one" name="number-selector" value="one" checked="true" class="choice-circle">
        <div class="ball"></div>
      </div>
      <label class="choice-name" for="one">1</label>
    </div>
    <div class="choice">
      <div>
        <input type="radio" id="two" name="number-selector" value="two" class="choice-circle">
        <div class="ball"></div>
      </div>
      <label class="choice-name">2</label>
    </div>
    <div class="choice">
      <div>
        <input type="radio" id="three" name="number-selector" value="three" class="choice-circle">
        <div class="ball"></div>
      </div>
      <label class="choice-name" for="three">3</label>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by LilaRest - Tags: neumorphism, skeuomorphism, glassmorphism, animation, minimalist, ball, radio, futuristic */
.radio-input {
  display: flex;
  height: 210px;
  align-items: center;
}

.glass {
  z-index: 2;
  height: 110%;
  width: 95px;
  margin-right: 25px;
  padding: 8px;
  background-color: rgba(190, 189, 189, 0.5);
  border-radius: 35px;
  box-shadow: rgba(50, 50, 93, 0.2) 0px 25px 50px -10px,
   rgba(0, 0, 0, 0.25) 0px 10px 30px -15px,
    rgba(10, 37, 64, 0.26) 0px -2px 6px 0px inset;
  backdrop-filter: blur(8px);
}

.glass-inner {
  width: 100%;
  height: 100%;
  border-color: rgba(245, 245, 245, 0.45);
  border-width: 9px;
  border-style: solid;
  border-radius: 30px
}

.selector {
  display: flex;
  flex-direction: column;
}

.choice {
  margin: 10px 0 10px 0;
  display: flex;
  align-items: center;
}

.choice > div {
  position: relative;
  width: 41px;
  height: 41px;
  margin-right: 15px;
  z-index: 0;
}

.choice-circle {
  appearance: none;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  border-width: 9px;
  border-style: solid;
  border-color: rgba(245, 245, 245, 0.45);
  cursor: pointer;
  box-shadow: 0px 0px 20px -13px gray,
  0px 0px 20px -14px gray inset;
}

.ball {
  z-index: 1;
  position: absolute;
  inset: 0px;
  transform: translateX(-95px);
  box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,
   rgba(0, 0, 0, 0.15) 0px -15px 15px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -40px 20px 0px inset,
     rgba(0, 0, 0, 0.06) 0px 2px 1px, 
     rgba(0, 0, 0, 0.09) 0px 4px 2px, 
     rgba(0, 0, 0, 0.09) 0px 8px 4px, 
     rgba(0, 0, 0, 0.09) 0px 16px 8px,
      rgba(0, 0, 0, 0.09) 0px 32px 16px,
       0px -1px 15px -8px rgba(0, 0, 0, 0.09);
  border-radius: 100%;
  transition: transform 800ms cubic-bezier(1,-0.4,0,1.4);
  background-color: rgb(232, 232, 232, 1);
}

.choice-circle:checked + .ball {
  transform: translateX(0px);
}

.choice-name {
  color: rgb(177, 176, 176);
  font-size: 35px;
  font-weight: 900;
  font-family: monospace;
  cursor: pointer;
}
</style>


================================================
FILE: Radio-buttons/MijailVillegas_friendly-panther-39.html
================================================
 <form action="" class="container">
        <input class="input-btn" type="radio" id="valueIs-1" name="valueIs-radio" checked="" value="valueIs-1">
        <label class="neon-btn" for="valueIs-1">
            <span class="span"></span>
            <span class="txt">OPTION 1</span>
        </label>

        <input class="input-btn" type="radio" id="valueIs-2" name="valueIs-radio" value="valueIs-2">
        <label class="neon-btn" for="valueIs-2">
            <span class="span"></span>
            <span class="txt">OPTION 2</span>
        </label>
    </form>
<style>
/* From Uiverse.io by MijailVillegas - Tags: cyberpunk, neon, radio, futuristic, animated */
.container {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-style: italic;
  font-weight: bold;
  font-size: 1.2em;
  display: grid;
  gap: 2em;
  place-content: center;
  width: 400px;
}

.container input[type=radio] {
  display: none;
}

.input-btn:is(:checked) + .neon-btn .span {
  inset: 2px;
  background-color: #4090b5;
  background: repeating-linear-gradient(to bottom, transparent 0%, #4090b5 1px, #4090b5 3px, #4090b5 5px, #4090b5 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsl(295, 60%, 12%) 100%);
  box-shadow: inset 0 40px 20px hsl(296, 59%, 10%);
}

.input-btn:is(:checked) + .neon-btn .txt {
  text-shadow: 2px 4px 1px #9e30a9, 2px 2px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);
  color: rgb(255, 255, 255);
  animation: colorchange 0.3s ease;
}

.input-btn:is(:checked) + .neon-btn::before {
  animation-duration: 0.6s;
}

.input-btn:is(:checked) + .neon-btn::after {
  animation-duration: 0.6s;
}

.neon-btn {
  width: 300px;
  height: 60px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5em 5em;
  text-align: right;
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: all 2s ease-in-out;
  -webkit-clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
  clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
}

.neon-btn .span {
  display: flex;
  -webkit-clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
  clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
  position: absolute;
  inset: 1px;
  background-color: #212121;
  z-index: 1;
}

.neon-btn .txt {
  text-align: right;
  position: relative;
  z-index: 2;
  color: aliceblue;
  font-size: 1em;
  transition: all ease-in-out 2s linear;
  text-shadow: 0px 0px 1px #4090b5, 0px 0px 1px #9e30a9, 0 0 1px white;
}

.neon-btn::before {
  content: "";
  position: absolute;
  height: 300px;
  aspect-ratio: 1.5/1;
  box-shadow: -17px -19px 20px #9e30a9;
  background-image: conic-gradient(#9e30a9, transparent, transparent, transparent, transparent, transparent, transparent, #9e30a9);
  animation: rotate 4s linear infinite -2s;
}

.neon-btn::after {
  content: "";
  position: absolute;
  height: 300px;
  aspect-ratio: 1.5/1;
  box-shadow: -17px -19px 10px #4090b5;
  background-image: conic-gradient(#4090b5, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #4090b5);
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes colorchange {
  0% {
    text-shadow: 0px 0px 0px #9e30a9, 0px 0px 0px #4090b5, 0 0 0px rgba(255, 255, 255, 0.616);
  }

  50% {
    text-shadow: -6px 5px 1px #9e30a9, 5px 11px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);
  }

  to {
    text-shadow: 2px 4px 1px #9e30a9, 2px 2px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);
  }
}

@keyframes backgroundchange {
  0% {
    background-color: transparent;
  }

  50% {
    background-color: #4090b5;
  }

  to {
    background-color: transparent;
  }
}
</style>


================================================
FILE: Radio-buttons/Na3ar-17_fast-turtle-85.html
================================================
<div class="radio-input">
  <label class="label">
    <input
      type="radio"
      id="value-1"
      checked=""
      name="value-radio"
      value="value-1"
    />
    <p class="text">Designer</p>
  </label>
  <label class="label">
    <input type="radio" id="value-2" name="value-radio" value="value-2" />
    <p class="text">Student</p>
  </label>
  <label class="label">
    <input type="radio" id="value-3" name="value-radio" value="value-3" />
    <p class="text">Teacher</p>
  </label>
</div>

<style>
/* From Uiverse.io by Na3ar-17  - Tags: simple, black, hover, input, radio */
.radio-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-input * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.radio-input label {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0px 20px;
  width: 220px;
  cursor: pointer;
  height: 50px;
  position: relative;
}

.radio-input label::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 45px;
  z-index: -1;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-radius: 10px;
  border: 2px solid transparent;
}
.radio-input label:hover::before {
  transition: all 0.2s ease;
  background-color: #2a2e3c;
}

.radio-input .label:has(input:checked)::before {
  background-color: #2d3750;
  border-color: #435dd8;
  height: 50px;
}
.radio-input .label .text {
  color: #fff;
}

.radio-input .label input[type="radio"] {
  background-color: #202030;
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.radio-input .label input[type="radio"]:checked {
  background-color: #435dd8;
  -webkit-animation: puls 0.7s forwards;
  animation: pulse 0.7s forwards;
}

.radio-input .label input[type="radio"]:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
  background-color: #fff;
  transform: scale(0);
}

.radio-input .label input[type="radio"]:checked::before {
  transform: scale(1);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

</style>
    

================================================
FILE: Radio-buttons/Navarog21_good-newt-78.html
================================================
<div class="radioContainer">

    <input class="radioButton" type="radio" id="value-1" name="value-radio" value="value-1" checked="">
    <label class="container" for="value-1">
      <div class="border"></div>
      <div class="border2"></div>
      <div class="circle"></div>
    </label>

    <input class="radioButton" type="radio" id="value-2" name="value-radio" value="value-2">
    <label class="container" for="value-2">
      <div class="border"></div>
      <div class="border2"></div>
      <div class="circle"></div>
    </label>

    <input class="radioButton" type="radio" id="value-3" name="value-radio" value="value-3">
    <label class="container" for="value-3">
      <div class="border"></div>
      <div class="border2"></div>
      <div class="circle"></div>
    </label>


</div>
<style>
/* From Uiverse.io by Navarog21 - Tags:  */
.radioContainer {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 220px;
}

.radioButton {
  display: none;
}

.radioContainer .container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: 0.8s;
  cursor: pointer;
  width: 65px;
  height: 65px;
  background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 5px inset white;
}

.border {
  position: absolute;
  background-color: #212121;
  width: 100%;
  height: 100%;
  transform: scale(0.7) rotate(30deg);
  transition: 0.3s;
  clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
}

.border2 {
  position: absolute;
  background-color: #212121;
  width: 100%;
  height: 100%;
  transform: scale(0.45);
  transition: 0.2s;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.radioContainer input[type="radio"]:checked + .container {
  filter: hue-rotate(330deg);
  animation: 2s linear checked;
}

.radioContainer input[type="radio"]:checked + .container .circle {
  transform: scale(0.8);
}

.radioContainer input[type="radio"]:checked + .container .border {
  animation: 4s linear infinite reverse rotateBorder;
}

.radioContainer input[type="radio"]:checked + .container .border2 {
  animation: 2s linear reverse rotateBorder2;
}

.circle {
  background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
  border-radius: 100%;
  width: 22%;
  height: 22%;
  transition: 0.25s;
  z-index: 2;
  transform: scale(0);
}

.radioContainer .container:hover .circle {
  transform: scale(0.8);
  box-shadow: 0 20px 20px #00c6fb;
}

@keyframes checked {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(0deg) scale(1.07);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes rotateBorder {
  0% {
    transform: scale(0.7) rotate(0deg);
  }

  50% {
    transform: scale(0.7) rotate(0deg);
  }

  100% {
    transform: scale(0.7)rotate(360deg);
  }
}

@keyframes rotateBorder2 {
  0% {
    transform: scale(0.51) rotate(30deg);
  }

  50% {
    transform: scale(0.51) rotate(0deg);
  }

  100% {
    transform: scale(0.51) rotate(360deg);
  }
}

</style>


================================================
FILE: Radio-buttons/NlghtM4re_mighty-wasp-74.html
================================================
<div class="radio-buttons">
  <label>
    <input type="radio" name="option" value="1" checked="">
    <span class="option">Option 1</span>
  </label>
  <label>
    <input type="radio" name="option" value="2">
    <span class="option">Option 2</span>
  </label>
  <label>
    <input type="radio" name="option" value="3">
    <span class="option">Option 3</span>
  </label>
</div>

<style>
/* From Uiverse.io by NlghtM4re - Tags: radio */
.radio-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(164, 215, 246);
  border-radius: 15px;
  box-shadow: rgb(71, 175, 239) 0px 5px 29px 5px;
}

.radio-buttons label {
  position: relative;
  cursor: pointer;
}

.radio-buttons input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.option {
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  border: none;
  color: black;
  border-radius: 14px;
  padding: 10px;
}

.option:hover {
  background-color: rgb(137, 207, 251);
}

.radio-buttons input[type="radio"]:checked + .option {
  background-color: rgb(71, 175, 239);
  box-shadow: rgb(11, 70, 107) 0px 5px 29px 5px;
}
</style>


================================================
FILE: Radio-buttons/Peary74_quiet-pug-68.html
================================================
<div class="radio-input">
    <label class="radio-component">
        <input value="value-1" name="RadioV" class="radiostyle" id="value-1" type="radio">
      
      <span class="RadioBtn">
        <div class="radioTxt1"> Sun &nbsp; </div>
         <span class="crater Krt2"></span>
              
    </span></label>
    <label class="radio-component">
        <input value="value-2" name="RadioV" class="radiostyle" id="value-2" type="radio">
          
      
        <span class="RadioBtn2">
          <div class="radioTxt2">Moon</div>
              <span class="crater Krt1"></span>
              <span class="crater Krt2"></span>
              <span class="crater Krt3"></span>
          </span>
      
    </label>
    <label class="radio-component">
        <input value="value-3" name="RadioV" class="radiostyle" id="value-3" type="radio">
      
          <span class="RadioBtn3">
            <div class="radioTxt3">Dark</div>
             
              <span class="crater Krt3"></span>
          </span>
            
    </label>
  </div>
<style>
/* From Uiverse.io by Peary74 - Tags: radio */
.radio-component {
  display: flex;
  padding: 15px;
  cursor: pointer;
  transition: 0.3s;
}

.radiostyle {
  display: none;
}

.radioTxt1 {
  padding: 10px 40px;
  color: #fd9800;
  font-size: 20px;
  text-transform: uppercase;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.radioTxt2 {
  padding: 10px 40px;
  color: #7e7e7e;
  font-size: 20px;
  text-transform: uppercase;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.radioTxt3 {
  padding: 10px 40px;
  color: #181818;
  font-size: 20px;
  text-transform: uppercase;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.radio-component .RadioBtn:hover {
  background: #ffdf6a;
  border-radius: 100px;
}

.radio-component .RadioBtn2:hover {
  background: #cacaca;
  border-radius: 100px;
}

.radio-component .RadioBtn3:hover {
  background: #313239;
  border-radius: 100px;
}

.radiostyle:checked~ .RadioBtn {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 30px;
  width: 44px;
  height: 44px;
  background-color: #ffd401;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg);
}

.radiostyle:checked~ .RadioBtn2 {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 30px;
  width: 44px;
  height: 44px;
  background-color: #e8e8e8;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg);
}

.radiostyle:checked~ .RadioBtn3 {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 30px;
  width: 44px;
  height: 44px;
  background-color: #000;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(255, 255, 255, .3);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg);
}

.RadioBtn .crater {
  position: absolute;
  background-color: #ffbb00;
  opacity: 1;
  transition: opacity 200ms ease-in-out;
  border-radius: 100%;
}

.RadioBtn2 .crater {
  position: absolute;
  background-color: #b4b4b4;
  opacity: 1;
  transition: opacity 200ms ease-in-out;
  border-radius: 100%;
}

.RadioBtn3 .crater {
  position: absolute;
  background-color: #2e2f33;
  opacity: 1;
  transition: opacity 200ms ease-in-out;
  border-radius: 100%;
}

.radio-component .Krt1 {
  top: 18px;
  left: 10px;
  width: 4px;
  height: 4px;
}

.radio-component .Krt2 {
  top: 28px;
  left: 22px;
  width: 6px;
  height: 6px;
}

.radio-component .Krt3 {
  top: 10px;
  left: 25px;
  width: 8px;
  height: 8px;
}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
   
</style>


================================================
FILE: Radio-buttons/Praashoo7_cold-mayfly-100.html
================================================
<div class="radio-input">
  <input value="value-1" name="value-radio" id="value-1" type="radio">
  <div class="plus1">
    <div class="plus2"></div>
  </div>
  <input value="value-2" name="value-radio" id="value-2" type="radio" checked="">
  <div class="plus1">
    <div class="plus2"></div>
  </div>
  <input value="value-3" name="value-radio" id="value-3" type="radio">
  <div class="plus1">
    <div class="plus2"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: neumorphism, red, realistic, radio, cross */
.radio-input {
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-input input {
  appearance: none;
  width: 2em;
  height: 2em;
  background-color: #171717;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
  border-radius: 5px;
  transition: .4s ease-in-out;
}

.radio-input input:hover {
  scale: 1.2;
  cursor: pointer;
  box-shadow: none;
}

.radio-input .plus1 {
  position: relative;
  top: 0.01em;
  left: -1.45em;
  width: 1.3em;
  height: 0.2em;
  background-color: red;
  rotate: 45deg;
  scale: 0;
  border-radius: 5px;
  transition: .4s ease-in-out;
}

.radio-input .plus2 {
  position: relative;
  width: 1.3em;
  height: 0.2em;
  background-color: red;
  transform: rotate(90deg);
  border-radius: 5px;
  transition: .4s ease-in-out;
}

.radio-input input:checked {
  box-shadow: none;
}

.radio-input input:checked + .plus1 {
  transform: rotate(180deg);
  scale: 1;
}
</style>


================================================
FILE: Radio-buttons/Praashoo7_mean-dodo-99.html
================================================
<div class="main">
<label class="switch">
  <input type="radio" name="value-radio">
  <div class="button">
    <div class="light"></div>
    <div class="dots"></div>
  </div>
</label>
<label class="switch1">
  <input type="radio" checked="" name="value-radio">
  <div class="button">
    <div class="light"></div>
    <div class="dots"></div>
  </div>
</label>
<label class="switch2">
  <input type="radio" name="value-radio">
  <div class="button">
    <div class="light"></div>
    <div class="dots"></div>
  </div>
</label>
<div class="back"></div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: realistic, radio, traffic-lights */
/*Design Inspired by @ykadosh on Codepen*/

.back {
  position: absolute;
  width: 16.6em;
  height: 6.5em;
  margin-top: -0.8em;
  margin-left: -0.77em;
  border-radius: 70px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  background-color: #171717;
  z-index: -1;
}

.main {
  display: flex;
}

.switch {
  display: block;
  position: relative;
  background-color: black;
  width: 70px;
  height: 70px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;
  border-radius: 50%;
  padding: 20px;
  margin: 5px;
}

.switch input {
  display: none;
}

.switch input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.switch input:checked + .button .shine {
  opacity: 1;
}

.switch input:checked + .button .shadow {
  opacity: 0;
}

.switch .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  background-color: #9b0621;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: relative;
  left: -0.75em;
  top: -0.75em;
  cursor: pointer;
}

.switch .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}

.switch .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
  border-radius: 50%;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }
}

.switch1 {
  display: block;
  position: relative;
  background-color: black;
  width: 70px;
  height: 70px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;
  border-radius: 50%;
  padding: 20px;
  margin: 5px;
}

.switch1 input {
  display: none;
}

.switch1 input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.switch1 input:checked + .button .shine {
  opacity: 1;
}

.switch1 input:checked + .button .shadow {
  opacity: 0;
}

.switch1 .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  background-color: #949207;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: relative;
  left: -0.75em;
  top: -0.785em;
  cursor: pointer;
}

.switch1 .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#f6ff7e, #eeff00 40%, transparent 70%);
}

.switch1 .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(91, 101, 0, 0.7) 70%);
  background-size: 10px 10px;
  border-radius: 50%;
}

.switch2 {
  display: block;
  position: relative;
  background-color: black;
  width: 70px;
  height: 70px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;
  border-radius: 50%;
  padding: 20px;
  margin: 5px;
}

.switch2 input {
  display: none;
}

.switch2 input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.switch2 input:checked + .button .shine {
  opacity: 1;
}

.switch2 input:checked + .button .shadow {
  opacity: 0;
}

.switch2 .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  background-color: #2f9407;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: relative;
  left: -0.75em;
  top: -0.79em;
  cursor: pointer;
}

.switch2 .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#f6ff7e, #00ff00 40%, transparent 70%);
}

.switch2 .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(0, 101, 13, 0.7) 70%);
  background-size: 10px 10px;
  border-radius: 50%;
}
</style>


================================================
FILE: Radio-buttons/Pradeepsaranbishnoi_big-swan-35.html
================================================
<div class="cont">
  <input name="radio" type="radio" id="r1">
  <label for="r1"></label>
  <input name="radio" type="radio" id="r2">
  <label for="r2"></label>
  <input checked="true" name="radio" type="radio" id="r3">
  <label for="r3"></label>
  <div class="slider">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="dot2"></div>
    <div class="dot"></div>
  </div>
</div>
<div class="cont">
  <input name="radio2" type="radio" id="r4">
  <label for="r4"></label>
  <input name="radio2" type="radio" id="r5">
  <label for="r5"></label>
  <input checked="true" name="radio2" type="radio" id="r6">
  <label for="r6"></label>
  <div class="slider">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="dot2"></div>
    <div class="dot"></div>
  </div>
</div>

<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: radio */
.cont input[type="radio"] {
  display: none;
}

.cont {
  width: 140px;
  position: absolute;
  transform: translateX(-50%);
}

.cont label:before {
  cursor: pointer;
  content: '';
  display: block;
  height: 20px;
  width: 20px;
  border: 2px solid #111;
  border-radius: 50%;
  float: left;
  margin: 0 10px;
}

.cont .slider > .dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  position: relative;
  top: 5px;
  left: 15px;
  opacity: 0;
  background-color: #111;
  transition: all 0.3s;
}

.cont input[type="radio"]:checked ~ .slider > .dot {
  opacity: 1;
}

.cont .line1 {
  height: 65px;
  width: 2px;
  background-color: #111;
  position: absolute;
  transform-origin: bottom;
  transform: translateX(65px) translateY(20px);
  transition: all 0.3s;
}

.cont .line2 {
  position: absolute;
  height: 150px;
  width: 2px;
  background-color: #111;
  transform: translateX(65px) translateY(80px);
}

.cont .dot2 {
  position: absolute;
  height: 6.66667px;
  width: 6.66667px;
  background-color: #111;
  border-radius: 50%;
  transform: translateX(62.66667px) translateY(76.66667px);
}

.cont #r1:checked ~ .slider > .dot, .cont #r4:checked ~ .slider > .dot {
  transform: translateX(2px) translateY(2px);
}

.cont #r1:checked ~ .slider > .line1, .cont #r4:checked ~ .slider > .line1 {
  transform: translateX(63px) translateY(13px) rotate(-32deg) scaleY(1.2)
}

.cont #r2:checked ~ .slider > .dot, .cont #r5:checked ~ .slider > .dot {
  transform: translateX(46px) translateY(2px);
}

.cont #r2:checked ~ .slider > .line1, .cont #r5:checked ~ .slider > .line1 {
  transform: translateX(65px) translateY(15px);
}

.cont #r3:checked ~ .slider > .dot, .cont #r6:checked ~ .slider > .dot {
  transform: translateX(90px) translateY(2px);
}

.cont #r3:checked ~ .slider > .line1, .cont #r6:checked ~ .slider > .line1 {
  transform: translateX(66px) translateY(16px) rotate(32deg) scaleY(1.3)
}

.cont:nth-of-type(2) {
  transform: translateX(-50%) scaleY(-1) translateY(37px);
}

.zapp, .zapp:after, .zapp:before {
  content: '';
  position: absolute;
  height: 40px;
  width: 4px;
  margin-left: -2px;
  background-color: #f00;
}

.zapp {
  transform: translateY(-40px);
}

.zapp:after {
  transform: translateX(42px);
}

.zapp:before {
  transform: translateX(-38px);
}

#c1:checked ~ #c4:checked ~ .zapp {
  display: none;
}

</style>


================================================
FILE: Radio-buttons/Pradeepsaranbishnoi_bitter-rabbit-96.html
================================================
<div class="container">
  <div class="radio-tile-group">
    <div class="input-container">
      <input id="walk" class="radio-button" type="radio" name="radio">
      <div class="radio-tile">
        <div class="icon walk-icon">
          <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0h24v24H0z" fill="none"></path>
            <path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7"></path>
          </svg>
        </div>
        <label for="walk" class="radio-tile-label">Walk</label>
      </div>
    </div>

    <div class="input-container">
      <input id="bike" class="radio-button" type="radio" name="radio">
      <div class="radio-tile">
        <div class="icon bike-icon">
          <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0h24v24H0z" fill="none"></path>
            <path d="M15.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM5 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5zm5.8-10l2.4-2.4.8.8c1.3 1.3 3 2.1 5.1 2.1V9c-1.5 0-2.7-.6-3.6-1.5l-1.9-1.9c-.5-.4-1-.6-1.6-.6s-1.1.2-1.4.6L7.8 8.4c-.4.4-.6.9-.6 1.4 0 .6.2 1.1.6 1.4L11 14v5h2v-6.2l-2.2-2.3zM19 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"></path>
          </svg>
        </div>
        <label for="bike" class="radio-tile-label">Bike</label>
      </div>
    </div>

    <div class="input-container">
      <input id="drive" class="radio-button" type="radio" name="radio">
      <div class="radio-tile">
        <div class="icon car-icon">
          <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"></path>
            <path d="M0 0h24v24H0z" fill="none"></path>
          </svg>
        </div>
        <label for="drive" class="radio-tile-label">Drive</label>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: radio */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.radio-tile-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.radio-tile-group .input-container {
  position: relative;
  height: 80px;
  width: 80px;
  margin: 0.5rem;
}

.radio-tile-group .input-container .radio-button {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  cursor: pointer;
}

.radio-tile-group .input-container .radio-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 2px solid #079ad9;
  border-radius: 5px;
  padding: 1rem;
  transition: transform 300ms ease;
}

.radio-tile-group .input-container .icon svg {
  fill: #079ad9;
  width: 2rem;
  height: 2rem;
}

.radio-tile-group .input-container .radio-tile-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #079ad9;
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile {
  background-color: #079ad9;
  border: 2px solid #079ad9;
  color: white;
  transform: scale(1.1, 1.1);
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile .icon svg {
  fill: white;
  background-color: #079ad9;
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {
  color: white;
  background-color: #079ad9;
}

</style>


================================================
FILE: Radio-buttons/Pradeepsaranbishnoi_black-husky-57.html
================================================
<form class="form">
    <label for="01">One</label>
    <input id="01" type="radio" name="r" value="1" checked="">
    <label for="02">Two</label>
    <input id="02" type="radio" name="r" value="2">
    <label for="03">Three</label>
    <input id="03" type="radio" name="r" value="3">
</form>

<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: radio */
.form {
  --background: #ffffff;
  --text: #414856;
  --radio: #7C96B2;
  --radio-checked: #4F29F0;
  --radio-size: 20px;
  --width: 150px;
  --height: 140px;
  --border-radius: 10px;
  background: var(--background);
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  color: var(--text);
  position: relative;
  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
  padding: 30px 20px;
  display: grid;
  grid-template-columns: auto var(--radio-size);
  align-items: center;
}

.form label {
  cursor: pointer;
}

.form input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  height: var(--radio-size);
  width: var(--radio-size);
  outline: none;
  margin: 0;
  cursor: pointer;
  border: 2px solid var(--radio);
  background: transparent;
  border-radius: 50%;
  display: grid;
  justify-self: end;
  justify-items: center;
  align-items: center;
  overflow: hidden;
  transition: border .5s ease;
}

.form input[type="radio"]::before, .form input[type="radio"]::after {
  content: "";
  display: flex;
  justify-self: center;
  border-radius: 50%;
}

.form input[type="radio"]::before {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--background);
  z-index: 1;
  opacity: var(--opacity, 1);
}

.form input[type="radio"]::after {
  position: relative;
  width: calc(100% /2);
  height: calc(100% /2);
  background: var(--radio-checked);
  top: var(--y, 100%);
  transition: top 0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63);
}

.form input[type="radio"]:checked {
  --radio: var(--radio-checked);
}

.form input[type="radio"]:checked::after {
  --y: 0%;
  animation: stretch-animate .3s ease-out .17s;
}

.form input[type="radio"]:checked::before {
  --opacity: 0;
}

.form input[type="radio"]:checked ~ input[type="radio"]::after {
  --y: -100%;
}

.form input[type="radio"]:not(:checked)::before {
  --opacity: 1;
  transition: opacity 0s linear .5s;
}

@keyframes stretch-animate {
  0% {
    transform: scale(1, 1);
  }

  28% {
    transform: scale(1.15, 0.85);
  }

  50% {
    transform: scale(0.9, 1.1);
  }

  100% {
    transform: scale(1, 1);
  }
}

.socials {
  position: fixed;
  display: block;
  left: 20px;
  bottom: 20px;
}

.socials > a {
  display: block;
  width: 30px;
  opacity: .2;
  transform: scale(var(--scale, 0.8));
  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
}

.socials > a:hover {
  --scale: 1;
}

</style>


================================================
FILE: Radio-buttons/Pradeepsaranbishnoi_cuddly-sheep-92.html
================================================
<form class="form">
	<label class="label"><input checked="" value="am" name="band" type="radio" class="input"><span class="span">AM</span></label>
	<label class="label"><input value="fm" name="band" type="radio" class="input"><span class="span">FM</span></label>
	<label class="label"><input value="sw" name="band" type="radio" class="input"><span class="span">SW</span></label>
	<label class="label"><input value="mw" name="band" type="radio" class="input"><span class="span">MW</span></label>
	<label class="label"><input value="mw" name="band" type="radio" class="input"><span class="span">LW</span></label>
</form>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: radio */
.form {
  display: flex;
}

.input {
  color: var(--fg);
  font: 1em/1.5 Helvetica, sans-serif;
}

.form, .label {
  width: 100%;
}

.form {
  margin: auto;
  max-width: 24em;
  padding: 0 1.5em;
}

.label {
  display: block;
  text-align: center;
  color: rgb(132, 248, 0);
  -webkit-tap-highlight-color: transparent;
}

.label:first-child .input {
  border-radius: 0.5em 0 0 0.5em;
  box-shadow: 0.1em 0 0 #2726267f inset,
		-0.1em 0 0 #27262600 inset,
		0 0.1em 0 #afa490 inset,
		0 -0.1em 0 #ffffff3f,
		0 0.2em 0.5em #0000007f,
		0 -0.1em 0 #926086 inset,
		-0.1em -0.2em 0 #ffffff7f inset,
		0.2em 0 0 #ffffff7f inset;
}

.label:last-child .input {
  border-radius: 0 0.5em 0.5em 0;
  box-shadow: 0 -0.1em 0 #926086 inset,
		0.1em 0 0 #2726267f inset,
		-0.1em 0 0 #2726267f inset,
		0 0.1em 0 #afa490 inset,
		-0.1em 0 0 #afa490 inset,
		0 -0.1em 0 #ffffff3f,
		0 0.2em 0.5em #0000007f,
		-0.1em -0.1em 0 0.1em #ffffff7f inset;
}

.label:first-child .input:checked {
  box-shadow: 0.1em 0 0 #272626af inset,
		-0.1em 0 0 #272626 inset,
		0 0.1em 0 #847a62 inset,
		0 -0.1em 0 #ffffff3f,
		0 0.1em 0 #ffffff7f,
		0 -0.1em 0 #722257 inset,
		-0.1em -0.2em 0 #ffffff7f inset,
		0.2em 0 0 #ffffff7f inset;
}

.label:last-child .input:checked {
  box-shadow: 0.1em 0 0 #272626af inset,
		-0.1em 0 0 #272626 inset,
		0 -0.1em 0 #722257 inset,
		0 0.1em 0 #847a62 inset,
		-0.1em 0 0 #847a62 inset,
		0 -0.1em 0 #ffffff3f,
		0 0.1em 0 #ffffff7f,
		-0.1em -0.1em 0 0.1em #ffffff7f inset;
}

.input {
  background-image: linear-gradient(#ffffff 33%,#414751 58%,#837b52,#c5baa1,#c3adaa);
  border-radius: 0;
  box-shadow: 0.1em 0 0 #2726267f inset,
		-0.1em 0 0 #27262600 inset,
		0 0.1em 0 #afa490 inset,
		0 -0.1em 0 #ffffff3f,
		0 0.2em 0.5em #0000007f,
		0 -0.1em 0 #926086 inset,
		-0.1em -0.2em 0 #ffffff7f inset;
  cursor: pointer;
  display: block;
  margin-bottom: 0.5em;
  width: 100%;
  height: 1em;
  transition: box-shadow var(--transDur) ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.input:checked {
  background-image: linear-gradient(#ffffff 33%,#414751 58%,#827a7b,#c0b6ac,#c3adaa);
  box-shadow: 0.1em 0 0 #272626af inset,
		-0.1em 0 0 #272626 inset,
		0 0.1em 0 #847a62 inset,
		0 -0.1em 0 #ffffff3f,
		0 0.1em 0 #ffffff7f,
		0 -0.1em 0 #722257 inset,
		-0.1em -0.2em 0 #ffffff7f inset;
}

.input:checked + .span {
  opacity: 1;
  color: red
}

.input:focus {
  outline: transparent;
}

.input + .span {
  opacity: 0.65;
  transition: opacity var(--transDur) ease-in-out;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #5c6270;
    --fg: #e3e4e8;
  }

  .label:first-child .input {
    box-shadow: 0.1em 0 0 #2726267f inset,
			-0.1em 0 0 #27262600 inset,
			0 0.1em 0 #afa490 inset,
			0 -0.1em 0 #0000001f,
			0 0.2em 0.5em #0000007f,
			0 -0.1em 0 #926086 inset,
			-0.1em -0.2em 0 #ffffff7f inset,
			0.2em 0 0 #ffffff7f inset;
  }

  .label:last-child .input {
    box-shadow: 0 -0.1em 0 #926086 inset,
			0.1em 0 0 #2726267f inset,
			-0.1em 0 0 #2726267f inset,
			0 0.1em 0 #afa490 inset,
			-0.1em 0 0 #afa490 inset,
			0 -0.1em 0 #0000001f,
			0 0.2em 0.5em #0000007f,
			-0.1em -0.1em 0 0.1em #ffffff7f inset;
  }

  .label:first-child .input:checked {
    box-shadow: 0.1em 0 0 #272626af inset,
			-0.1em 0 0 #272626 inset,
			0 0.1em 0 #847a62 inset,
			0 -0.1em 0 #0000007f,
			0 0.1em 0 #0000007f,
			0 -0.1em 0 #722257 inset,
			-0.1em -0.2em 0 #ffffff7f inset,
			0.2em 0 0 #ffffff7f inset
  }

  .label:last-child .input:checked {
    box-shadow: 0.1em 0 0 #272626af inset,
			-0.1em 0 0 #272626 inset,
			0 -0.1em 0 #722257 inset,
			0 0.1em 0 #847a62 inset,
			-0.1em 0 0 #847a62 inset,
			0 -0.1em 0 #0000001f,
			0 0.1em 0 #0000007f,
			-0.1em -0.1em 0 0.1em #ffffff7f inset;
  }

  .input {
    box-shadow: 0.1em 0 0 #2726267f inset,
			-0.1em 0 0 #27262600 inset,
			0 0.1em 0 #afa490 inset,
			0 -0.1em 0 #0000001f,
			0 0.2em 0.5em #0000007f,
			0 -0.1em 0 #926086 inset,
			-0.1em -0.2em 0 #ffffff7f inset;
  }

  .input:checked {
    box-shadow: 0.1em 0 0 #272626af inset,
			-0.1em 0 0 #272626af inset,
			0 0.1em 0 #847a62 inset,
			0 -0.1em 0 #0000007f,
			0 0.1em 0 #0000007f,
			0 -0.1em 0 #722257 inset,
			-0.1em -0.2em 0 #ffffff7f inset;
  }
}
</style>


================================================
FILE: Radio-buttons/Pradeepsaranbishnoi_heavy-dragonfly-92.html
================================================
<div class="container">
	<div class="tabs">
		<input type="radio" id="radio-1" name="tabs" checked="">
		<label class="tab" for="radio-1">Hello<span class="notification">2</span></label>
		<input type="radio" id="radio-2" name="tabs">
		<label class="tab" for="radio-2">UI</label>
		<input type="radio" id="radio-3" name="tabs">
		<label class="tab" for="radio-3">World</label>
		<span class="glider"></span>
	</div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: radio */
.tabs {
  display: flex;
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
  padding: 0.75rem;
  border-radius: 99px;
}

.tabs * {
  z-index: 2;
}

.container input[type="radio"] {
  display: none;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 50px;
  font-size: .8rem;
  color: black;
  font-weight: 500;
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.15s ease-in;
}

.notification {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .8rem;
  height: .8rem;
  position: absolute;
  top: 10px;
  left: 30%;
  font-size: 10px;
  margin-left: 0.75rem;
  border-radius: 50%;
  margin: 0px;
  background-color: #e6eef9;
  transition: 0.15s ease-in;
}

.container input[type="radio"]:checked + label {
  color: #185ee0;
}

.container input[type="radio"]:checked + label > .notification {
  background-color: #185ee0;
  color: #fff;
  margin: 0px;
}

.container input[id="radio-1"]:checked ~ .glider {
  transform: translateX(0);
}

.container input[id="radio-2"]:checked ~ .glider {
  transform: translateX(100%);
}

.container input[id="radio-3"]:checked ~ .glider {
  transform: translateX(200%);
}

.glider {
  position: absolute;
  display: flex;
  height: 30px;
  width: 50px;
  background-color: #e6eef9;
  z-index: 1;
  border-radius: 99px;
  transition: 0.25s ease-out;
}

@media (max-width: 700px) {
 
  .tabs {
    transform: scale(0.6);
  }
}

</style>


================================================
FILE: Radio-buttons/Pradeepsaranbishnoi_hungry-bat-66.html
================================================

<div class="container">

    
    <div class="de">

        
        <div class="den">

            
            <hr class="line">
            <hr class="line">
            <hr class="line">

            
            <div class="switch">

                
                <label for="switch_off"><span>OFF</span></label>
                <label for="switch_1"><span>1</span></label>
                <label for="switch_2"><span>2</span></label>
                <label for="switch_3"><span>3</span></label>
                <label for="switch_4"><span>4</span></label>
                <label for="switch_5"><span>5</span></label>

                
                <input type="radio" checked="" name="switch" id="switch_off">
                <input type="radio" name="switch" id="switch_1">
                <input type="radio" name="switch" id="switch_2">
                <input type="radio" name="switch" id="switch_3">
                <input type="radio" name="switch" id="switch_4">
                <input type="radio" name="switch" id="switch_5">

                
                <div class="light"><span></span></div>

                
                <div class="dot"><span></span></div>

                
                <div class="dene">
                    <div class="denem">
                        <div class="deneme">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: switch */
/* SWITCH
--------------------------------------------- */

.container .origin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 111;
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  background-color: #f50;
}

.de {
  user-select: none;
  position: relative;
  width: 230px;
  height: 230px;
  border-radius: 100%;
  box-shadow: 0 0 25px rgba(0, 0, 0, .1);
  background-color: transparent;
}

.de .den, .de .dene, .de .denem, .de .deneme, .de .light, .de .dot {
  position: absolute;
  left: 50%;
  top: 50%;
}

.den {
  position: relative;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 100%;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .6), 0 2px 20px rgba(255, 255, 255, 1);
  background: #888888;
  background: -moz-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #888888), color-stop(100%, #333333));
  background: -webkit-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);
  background: -o-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);
}

.dene {
  z-index: 4;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  border-radius: 100%;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
  background: #f2f6f5;
  background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
  background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
  background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
}

.denem {
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 100%;
  background: #cbd5d6;
  background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));
  background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
  background: -o-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
}

.deneme {
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 100%;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .6), 0 8px 20px rgba(0, 0, 0, .9);
  background: #eef7f6;
  background: -moz-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eef7f6), color-stop(100%, #8d989a));
  background: -webkit-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
  background: -o-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
}

.den .switch {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.den .switch label {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 70px;
  margin-top: -35px;
  transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
}

.den .switch label:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 1px;
  width: 100%;
  height: 30px;
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
}

.den .switch label:before {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 1px;
  width: 100%;
  height: 30px;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}

.den .switch label span {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  font-weight: bold;
  font-size: 15px;
  line-height: 70px;
  text-align: center;
  color: #eee;
  text-shadow: 0 1px 0 #444;
}

.den .switch label:nth-child(1) {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.den .switch label:nth-child(1) span {
  right: 2px;
  font-size: 13px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.den .switch label:nth-child(2) {
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
}

.den .switch label:nth-child(2) span {
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}

.den .switch label:nth-child(3) {
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}

.den .switch label:nth-child(3) span {
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
}

.den .switch label:nth-child(4) {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.den .switch label:nth-child(4) span {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.den .switch label:nth-child(5) {
  transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  -o-transform: rotate(150deg);
}

.den .switch label:nth-child(5) span {
  transform: rotate(-150deg);
  -webkit-transform: rotate(-150deg);
  -o-transform: rotate(-150deg);
}

.den .switch label:nth-child(6) {
  transform: rotate(210deg);
  -webkit-transform: rotate(210deg);
  -o-transform: rotate(210deg);
}

.den .switch label:nth-child(6) span {
  transform: rotate(-210deg);
  -webkit-transform: rotate(-210deg);
  -o-transform: rotate(-210deg);
}

.den .switch input {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

/* SWITCH LIGHT */

.den .light {
  z-index: 1;
  width: 50%;
  height: 100px;
  margin-top: -50px;
  transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transition: all .5s;
  transition: all .5s;
  -o-transition: all .5s;
}

.den .light span {
  opacity: .4;
  position: absolute;
  top: 0;
  left: 15px;
  width: 100px;
  height: 100px;
  background: -moz-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(184, 163, 204, 1)), color-stop(42%, rgba(159, 197, 224, 0.42)), color-stop(72%, rgba(111, 113, 179, 0)), color-stop(100%, rgba(67, 34, 137, 0)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);
}

/* SWITCH LIGHT POSITION */

.den #switch_off:checked ~ .light {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.den #switch_1:checked ~ .light {
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
}

.den #switch_2:checked ~ .light {
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}

.den #switch_3:checked ~ .light {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.den #switch_4:checked ~ .light {
  transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  -o-transform: rotate(150deg);
}

.den #switch_5:checked ~ .light {
  transform: rotate(210deg);
  -webkit-transform: rotate(210deg);
  -o-transform: rotate(210deg);
}

/* SWITCH LIGHT */

.den .dot {
  z-index: 6;
  width: 50%;
  height: 12px;
  margin-top: -6px;
  transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
}

.den .dot span {
  position: absolute;
  top: 0;
  left: 30px;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #dae2e4;
  background: -moz-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dae2e4), color-stop(100%, #ecf5f4));
  background: -webkit-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
  background: -o-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
}

/* SWITCH LIGHT POSITION */

.den #switch_off:checked ~ .dot {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.den #switch_off:checked ~ .dot span {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.den #switch_1:checked ~ .dot {
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
}

.den #switch_1:checked ~ .dot span {
  opacity: .9;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}

.den #switch_2:checked ~ .dot {
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}

.den #switch_2:checked ~ .dot span {
  opacity: .5;
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
}

.den #switch_3:checked ~ .dot {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.den #switch_3:checked ~ .dot span {
  opacity: .4;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.den #switch_4:checked ~ .dot {
  transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  -o-transform: rotate(150deg);
}

.den #switch_4:checked ~ .dot span {
  opacity: .5;
  transform: rotate(-150deg);
  -webkit-transform: rotate(-150deg);
  -o-transform: rotate(-150deg);
}

.den #switch_5:checked ~ .dot {
  transform: rotate(210deg);
  -webkit-transform: rotate(210deg);
  -o-transform: rotate(210deg);
}

.den #switch_5:checked ~ .dot span {
  opacity: .9;
  transform: rotate(-210deg);
  -webkit-transform: rotate(-210deg);
  -o-transform: rotate(-210deg);
}

/* LINE */

.den hr.line {
  z-index: 1;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 0;
  margin-top: -1px;
  border-width: 1px 0;
  border-style: solid;
  border-top-color: #3c3d3f;
  border-bottom-color: #666769;
}

.den hr.line:nth-child(1) {
  transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
}

.den hr.line:nth-child(2) {
  transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  -o-transform: rotate(60deg);
}
</style>


================================================
FILE: Radio-buttons/Pradeepsaranbishnoi_moody-starfish-95.html
================================================
<div class="radio">
  <input
    checked=""
    value="male"
    name="gender"
    id="male"
    type="radio"
    label="Yes"
  />
  <input value="female" name="gender" id="female" type="radio" label="No" />
  <input
    value="other"
    name="gender"
    id="other"
    type="radio"
    label="Keep Smile 😊"
  />
</div>

<style>
/* From Uiverse.io by Pradeepsaranbishnoi  - Website: https://codepen.io/scottyzen/pen/ZEWYdZm - Name: Scott - Tags: simple, button, radio */
.radio {
  background: #454857;
  padding: 4px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px rgba(35, 33, 45, 0.3),
    0 0 0 3px rgba(185, 185, 185, 0.3);
  position: relative;
}

.radio input {
  width: auto;
  height: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  border-radius: 2px;
  padding: 4px 8px;
  background: #454857;
  color: #bdbdbdbd;
  font-size: 14px;
  font-family: 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";
  transition: all 100ms linear;
}

.radio input:checked {
  background-image: linear-gradient(180deg, #95d891, #74bbad);
  color: #fff;
  box-shadow: 0 1px 1px #0000002e;
  text-shadow: 0 1px 0px #79485f7a;
}

.radio input:before {
  content: attr(label);
  display: inline-block;
  text-align: center;
  width: 100%;
}

</style>
    

================================================
FILE: Radio-buttons/Pradeepsaranbishnoi_selfish-ladybug-61.html
================================================
<div class="container">
	<form>
		<label>
			<input type="radio" name="radio" checked="">
			<span>HTML</span>
		</label>
		<label>
			<input type="radio" name="radio">
			<span>CSS</span>
		</label>
		<label>
			<input type="radio" name="radio">
			<span>Javascript</span>
		</label>
	</form>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: radio */
.container form {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.container label {
  display: flex;
  cursor: pointer;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  margin-bottom: 0.375em;
}

.container  label input {
  position: absolute;
  left: -9999px;
}

.container label input:checked + span {
  background-color: #414181;
  color: white;
}

.container label input:checked + span:before {
  box-shadow: inset 0 0 0 0.4375em #00005c;
}

.container label span {
  display: flex;
  align-items: center;
  padding: 0.375em 0.75em 0.375em 0.375em;
  border-radius: 99em;
  transition: 0.25s ease;
  color: #414181;
}

.container label span:hover {
  background-color: #d6d6e5;
}

.container label span:before {
  display: flex;
  flex-shrink: 0;
  content: "";
  background-color: #fff;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  margin-right: 0.375em;
  transition: 0.25s ease;
  box-shadow: inset 0 0 0 0.125em #00005c;
}

</style>


================================================
FILE: Radio-buttons/Pradeepsaranbishnoi_slimy-warthog-37.html
================================================
<div class="mydict">
	<div>
		<label>
			<input type="radio" name="radio" checked="">
			<span>Women</span>
		</label>
		<label>
			<input type="radio" name="radio">
			<span>Men</span>
		</label>
		<label>
			<input type="radio" name="radio">
			<span>Divided</span>
		</label>
		
	</div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: radio */
:focus {
  outline: 0;
  border-color: #2260ff;
  box-shadow: 0 0 0 4px #b5c9fc;
}

.mydict div {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  justify-content: center;
}

.mydict input[type="radio"] {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.mydict input[type="radio"]:checked + span {
  box-shadow: 0 0 0 0.0625em #0043ed;
  background-color: #dee7ff;
  z-index: 1;
  color: #0043ed;
}

label span {
  display: block;
  cursor: pointer;
  background-color: #fff;
  padding: 0.375em .75em;
  position: relative;
  margin-left: .0625em;
  box-shadow: 0 0 0 0.0625em #b5bfd9;
  letter-spacing: .05em;
  color: #3e4963;
  text-align: center;
  transition: background-color .5s ease;
}

label:first-child span {
  border-radius: .375em 0 0 .375em;
}

label:last-child span {
  border-radius: 0 .375em .375em 0;
}

</style>


================================================
FILE: Radio-buttons/Pradeepsaranbishnoi_tiny-tiger-4.html
================================================
<div>
  <div class="Radio">
    <input checked="" value="radio1" type="radio" name="radio" id="Radio1" />
    <label for="Radio1">Bubble 1</label>
  </div>
  <div class="Radio">
    <input value="radio2" type="radio" name="radio" id="Radio2" />
    <label for="Radio2">Bubble 2</label>
  </div>
</div>

<style>
/* From Uiverse.io by Pradeepsaranbishnoi  - Website: https://codepen.io/DeyJordan/pen/poQvgaz - Name: Jordan - Tags: flashy, green, bubble, radio, click */
.Radio input[type="radio"] {
  position: absolute;
  left: -100px;
}
.Radio input[type="radio"] + label {
  position: relative;
  display: block;
  line-height: 3rem;
  cursor: pointer;
  white-space: nowrap;
  color: #61cea5;
}

.Radio input[type="radio"] + label::before,
.Radio input[type="radio"] + label::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: 0.5s;
}

.Radio input[type="radio"] + label {
  padding-left: 3rem;
}

.Radio input[type="radio"] + label::before {
  width: 2rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #61cea5;
}

.Radio input[type="radio"] + label::after {
  left: 0.2rem;
  width: 1.4rem;
  transform: translateY(-50%) scale(0);
}

.Radio input[type="radio"]:not(:checked) + label::after {
  animation: radio 0.5s linear;
}

.Radio input[type="radio"]:checked + label::after {
  transform: translateY(-50%) scale(1);
}

.Radio input[type="radio"] + label::after {
  aspect-ratio: 1 / 1;
  border: 0.1rem solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 30%, #fff, rgba(0, 0, 0, 0) 25%),
    radial-gradient(
      circle at 60% 55%,
      rgba(0, 0, 0, 0) 60%,
      rgba(255, 0, 255, 0.8) 100%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 255, 255, 0.2) 60%,
      rgba(0, 0, 0, 0) 68%
    ),
    radial-gradient(
      circle at 50% 55%,
      rgba(0, 0, 0, 0) 35%,
      rgba(255, 255, 0, 0.2) 45%,
      rgba(0, 0, 0, 0) 55%
    );
}

@keyframes radio {
  0% {
    transform: translateY(-50%) scale(1);
  }
  100% {
    transform: translateY(-50%) scale(1.7);
  }
}

</style>
    

================================================
FILE: Radio-buttons/Pradeepsaranbishnoi_wet-dragonfly-79.html
================================================
<label class="radio-button">
  <input type="radio" name="example-radio" value="option1">
  <span class="radio"></span>
  Option 1
</label>

<label class="radio-button">
  <input type="radio" name="example-radio" value="option2">
  <span class="radio"></span>
  Option 2
</label>

<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: radio */
.radio-button {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 10px;
  position: relative;
  align-items: center;
  color: white;
}

.radio-button input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.radio {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ccc;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  transform: translateZ(-25px);
  transition: all 0.3s ease-in-out;
}

.radio::before {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  top: 5px;
  left: 5px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.radio-button input[type="radio"]:checked + .radio {
  border-color: #5cb85c;
  transform: translateZ(0px);
  background-color: #fff;
}

.radio-button input[type="radio"]:checked + .radio::before {
  opacity: 1;
}

</style>


================================================
FILE: Radio-buttons/Pradeepsaranbishnoi_wise-snake-15.html
================================================
<div class="container">
  <label><input name="e" type="radio" /> Click</label>
  <label><input name="e" type="radio" /> Me</label>
  <label><input name="e" type="radio" /> to</label>
  <label><input disabled="" name="e" type="radio" /> And so on ..</label>
</div>

<style>
/* From Uiverse.io by Pradeepsaranbishnoi  - Website: https://codepen.io/t_afif/pen/abaYxQj - Name: Temani - Tags: simple, animation, radio, advanced */
.container {
  --s: 1em; /* control the size */
  --g: 10px; /* the gap */
  --c: #009688; /* the active color */

  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--g);
  position: relative;
}
.container:before {
  content: "";
  position: absolute;
  height: calc(var(--s) / 2);
  left: calc(var(--s) / 4 + var(--_x, 0px));
  top: calc(var(--s) / 4);
  background: var(--c);
  border-radius: 50%;
  aspect-ratio: 1;
  transition: 0.4s, left cubic-bezier(0.1, -2000, 0.7, -2000) 0.4s;
}
.container label {
  display: inline-flex;
  line-height: var(--s);
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.container input {
  height: var(--s);
  aspect-ratio: 1;
  border: calc(var(--s) / 8) solid var(--_c, #939393);
  border-radius: 50%;
  outline-offset: calc(var(--s) / 10);
  padding: calc(var(--s) / 8);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  font-size: inherit;
  margin: 0;
  transition: 0.3s;
}
.container input:checked {
  --_c: var(--c);
}
.container:not(:has(input:checked)):before {
  --_i: -1;
  opacity: 0;
}
.container:has(input:checked):before {
  opacity: 1;
  transform: translateY(calc(var(--_i) * (var(--s) + var(--g))));
}
.container:has(label:nth-child(1) input:checked):before {
  --_i: 0;
  --_x: 0.02px;
}
.container:has(label:nth-child(2) input:checked):before {
  --_i: 1;
  --_x: 0.04px;
}
.container:has(label:nth-child(3) input:checked):before {
  --_i: 2;
  --_x: 0.06px;
}
.container:has(label:nth-child(4) input:checked):before {
  --_i: 3;
  --_x: 0.08px;
}
.container:has(label:nth-child(5) input:checked):before {
  --_i: 4;
  --_x: 0.1px;
}
/* and so on ..*/

.container input:disabled {
  background: linear-gradient(#939393 0 0) 50%/100% 20% no-repeat content-box;
  opacity: 0.5;
  cursor: not-allowed;
}
@media print {
  input[type="radio"] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    background: none;
  }
}
@supports not selector(:has(*)) {
  .container:before {
    display: none;
  }
  .container input:checked {
    --_c: var(--c);
    background: var(--c) content-box;
  }
}

</style>
    

================================================
FILE: Radio-buttons/Ratinax_cold-rabbit-43.html
================================================
<div class="radio-input">
  <input
    value="value-1"
    name="value-radio"
    id="value-1"
    type="radio"
    class="star s1"
  />
  <input
    value="value-2"
    name="value-radio"
    id="value-2"
    type="radio"
    class="star s2"
  />
  <input
    value="value-3"
    name="value-radio"
    id="value-3"
    type="radio"
    class="star s3"
  />
  <input
    value="value-4"
    name="value-radio"
    id="value-4"
    type="radio"
    class="star s4"
  />
  <input
    value="value-5"
    name="value-radio"
    id="value-5"
    type="radio"
    class="star s5"
  />
</div>

<style>
/* From Uiverse.io by Ratinax  - Tags:  */
.radio-input {
  display: flex;
  scale: 0.15;
  transform: rotate(180deg);
}

.star {
  margin: 1em;
  appearance: none;
  --color: white;
  border-left: 6.4721359549996em solid transparent;
  border-right: 6.4721359549996em solid transparent;
  border-bottom: 4em solid var(--color);
  transform: rotate(0deg);
  cursor: pointer;
}

.star:before {
  content: "";
  border-left: 6.4721359549996em solid transparent;
  border-right: 6.4721359549996em solid transparent;
  border-top: 4em solid var(--color);
  position: absolute;
  left: -6.4721359549996em;
  transform: rotate(108deg);
}

.star:after {
  content: "";
  border-left: 6.4721359549996em solid transparent;
  border-right: 6.4721359549996em solid transparent;
  border-top: 4em solid var(--color);
  position: absolute;
  left: -6.4721359549996em;
  transform: rotate(253deg);
}

.radio-input > .star:hover ~ .star,
.radio-input > .star:hover,
.radio-input > .star:checked ~ .star,
.radio-input > .star:checked {
  --color: yellow;
}

.radio-input > .star:checked ~ .star,
.radio-input > .star:checked {
  animation: rotate 0.5s linear forwards;
  transform: rotate(360deg);
  transition: transform 0.3s;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    scale: 1.5;
  }
  100% {
    transform: rotate(360deg);
  }
}

</style>
    

================================================
FILE: Radio-buttons/Ratinax_itchy-mouse-15.html
================================================
<div class="container">
    <div class="fire">
        <label class="label red">
            <input type="radio" checked="checked" name="radio" class="input">
        </label>
        <label class="label orange">
            <input type="radio" name="radio" class="input">
        </label>
        <label class="label green">
            <input type="radio" name="radio" class="input">
        </label>
        <span class="selection"></span>
    </div>
</div>
<style>
/* From Uiverse.io by Ratinax - Tags: radio, buttons, traffic light, traffic-light */
.container {
  scale: 0.7;
}

.fire {
  width: 2em;
  height: 6.5em;
  background-color: black;
  border-radius: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.label {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  margin-top: .25em;
  margin-bottom: .25em;
  border-top: .2em solid black;
  cursor: pointer;
}

.input {
  display: none;
}

.label.red {
  background-color: #990000;
  box-shadow: 0 0 2em #990000;
}

.label.orange {
  background-color: #999900;
  box-shadow: 0 0 2em #999900;
}

.label.green {
  background-color: #009900;
  box-shadow: 0 0 2em #009900;
}

.label.red:hover {
  background-color: red;
}

.label.orange:hover {
  background-color: orange;
}

.label.green:hover {
  background-color: lime;
}

.label.red:has(input:checked) {
  background-color: red;
  box-shadow: 0 0 2em red;
}

.label.orange:has(input:checked) {
  background-color: orange;
  box-shadow: 0 0 2em orange;
}

.label.green:has(input:checked) {
  background-color: lime;
  box-shadow: 0 0 2em lime;
}
</style>


================================================
FILE: Radio-buttons/Safvan-tsy_rare-eagle-99.html
================================================
<!-- From Uiverse.io by Safvan-tsy  - Tags: radio -->
<div class="flex gap-2 p-2">
  <div>
    <input
      class="peer sr-only"
      value="male"
      name="gender"
      id="male"
      type="radio"
    />
    <div
      class="flex h-16 w-24 cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-gray-300 bg-gray-50 p-1 transition-transform duration-150 hover:border-blue-400 active:scale-95 peer-checked:border-blue-500 peer-checked:shadow-md peer-checked:shadow-blue-400"
    >
      <label
        class="flex cursor-pointer items-center justify-center text-sm uppercase text-gray-500 peer-checked:text-blue-500"
        for="male"
      >
        <svg
          viewBox="0 0 100000 100000"
          text-rendering="geometricPrecision"
          shape-rendering="geometricPrecision"
          image-rendering="optimizeQuality"
          clip-rule="evenodd"
          fill-rule="evenodd"
          class="h-8 w-8 fill-current peer-checked:fill-blue-500"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M35927 32903c412,2646 927,5119 1312,6767 -1320,-1159 -6849,-6682 -6569,-1799 342,5954 5284,6851 5297,6853l826 176 0 841c0,18 -115,6164 5054,8983 2585,1411 5371,2117 8155,2117 2783,0 5567,-706 8152,-2117 5169,-2819 5054,-8965 5054,-8983l0 -841 826 -176c13,-2 4955,-899 5297,-6853 273,-4760 -5035,428 -6400,1585 466,-2425 1265,-6640 1627,-10534 -707,-1139 -1761,-2058 -3310,-2445 -5841,-1459 -12802,2359 -14487,-898 -1685,-3256 -4043,-5728 -4043,-5728 0,0 -1461,5389 -4266,7749 -1302,1095 -2073,3278 -2525,5303zm7891 26143c0,0 -2213,3386 -2734,5600 -521,2213 -16015,783 -16407,9375 -392,8593 -391,16666 -391,16666l51429 0c0,0 1,-8073 -391,-16666 -392,-8592 -15886,-7162 -16407,-9375 -520,-2214 -2734,-5600 -2734,-5600 89,59 -103,-469 -339,-1065 1123,-370 2228,-847 3303,-1433 5035,-2746 5946,-8013 6109,-10011 1747,-593 5810,-2604 6152,-8552 329,-5738 -2626,-5167 -4942,-3884 588,-3342 1229,-9312 59,-16047 -1797,-10330 -8310,-7860 -13363,-8645 -5054,-786 -11791,3480 -11791,3480 0,0 -6064,-785 -8872,4717 -1830,3589 -79,10904 1361,15557l178 1232c-2363,-1457 -5799,-2573 -5444,3590 341,5948 4404,7959 6151,8552 163,1998 1075,7265 6110,10011 1074,586 2179,1063 3302,1433 -236,596 -428,1124 -339,1065zm11413 -875c37,1566 129,3813 367,5042 391,2019 -326,4297 -326,4297l-5271 5389 -5272 -5389c0,0 -717,-2278 -326,-4297 238,-1229 330,-3475 367,-5042 1719,502 3476,753 5232,753 1755,0 3511,-251 5229,-753z"
          ></path>
        </svg>
        male
      </label>
    </div>
  </div>
  <div>
    <input
      class="peer sr-only"
      value="female"
      name="gender"
      id="female"
      type="radio"
    />
    <div
      class="flex h-16 w-24 cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-gray-300 bg-gray-50 p-1 transition-transform duration-150 hover:border-blue-400 active:scale-95 peer-checked:border-blue-500 peer-checked:shadow-md peer-checked:shadow-blue-400"
    >
      <label
        class="flex cursor-pointer items-center justify-center text-sm uppercase text-gray-500 peer-checked:text-blue-500"
        for="female"
      >
        <svg
          id="female"
          viewBox="0 0 128 128"
          class="h-7 w-6 fill-gray-100"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M64,72.7c0,0,0-0.1,0-0.1c0,0,0,0,0,0V72.7z"
            fill="#000"
          ></path>
          <path
            d="M54.6 49.2c.7 0 1.4-.3 1.9-.8.5-.5.8-1.2.8-1.9s-.3-1.4-.8-1.9c-.5-.5-1.2-.8-1.9-.8-.7 0-1.4.3-1.9.8-.5.5-.8 1.2-.8 1.9 0 .7.3 1.4.8 1.9C53.2 48.9 53.9 49.2 54.6 49.2zM73.8 49.2c.7 0 1.4-.3 1.9-.8.5-.5.8-1.2.8-1.9s-.3-1.4-.8-1.9c-.5-.5-1.2-.8-1.9-.8s-1.4.3-1.9.8c-.5.5-.8 1.2-.8 1.9s.3 1.4.8 1.9C72.5 48.9 73.1 49.2 73.8 49.2z"
            fill="#000"
          ></path>
          <path
            d="M40.6 78.1h10.7V67.1c3.7 2.4 8.1 3.7 12.5 3.7v0c0 0 .1 0 .1 0 0 0 .1 0 .1 0v0c4.4 0 8.8-1.3 12.5-3.7v11.1h10.7c.2 0 .4 0 .6 0h8.3V34.4c0-17.8-14.4-32.2-32.1-32.3v0c0 0-.1 0-.1 0 0 0-.1 0-.1 0v0C46.2 2.2 31.8 16.7 31.8 34.4v43.7H40C40.2 78.1 40.4 78.1 40.6 78.1zM44 38.1c0-3.2 2.6-5.8 5.8-5.8h14.1.2 14.1c3.2 0 5.8 2.6 5.8 5.8v9.1c0 4.5-1.5 8.6-4 12-1 1.3-2.2 2.6-3.4 3.6-3.4 2.8-7.8 4.5-12.6 4.5-4.8 0-9.2-1.7-12.6-4.5-1.3-1.1-2.5-2.3-3.4-3.6-2.5-3.4-4-7.5-4-12V38.1zM116.8 123.3c-.9-5.2-3-16.3-3.5-17.8-2.3-7-8.2-10.4-14.5-13-.8-.3-1.6-.7-2.4-1-5.5-2.1-11-4.3-16.5-6.4-2.6 6.2-8.8 10.5-15.9 10.5s-13.3-4.3-15.9-10.5c-5.5 2.1-11 4.3-16.5 6.4-.8.3-1.6.6-2.4 1-6.3 2.6-12.1 6-14.5 13-.5 1.4-2.5 12.6-3.5 17.8-.2 1 .3 1.9 1.1 2.3.3.2.7.3 1.1.3h101.1c.4 0 .8-.1 1.1-.3C116.5 125.1 116.9 124.2 116.8 123.3z"
            class="fill-current"
          ></path>
        </svg>
        female
      </label>
    </div>
  </div>

  <div>
    <input
      class="peer sr-only"
      value="other"
      name="gender"
      id="other"
      type="radio"
    />
    <div
      class="flex h-16 w-24 cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-gray-300 bg-gray-50 p-1 transition-transform duration-150 hover:border-blue-400 active:scale-95 peer-checked:border-blue-500 peer-checked:shadow-md peer-checked:shadow-blue-400"
    >
      <label
        class="flex cursor-pointer items-center justify-center text-sm uppercase text-gray-500 peer-checked:text-blue-500"
        for="other"
      >
        <svg
          id="menu-dots-circle"
          viewBox="0 0 24 24"
          class="h-7 w-6 fill-current"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9 12C9 12.5523 8.55228 13 8 13 7.44772 13 7 12.5523 7 12 7 11.4477 7.44772 11 8 11 8.55228 11 9 11.4477 9 12zM13 12C13 12.5523 12.5523 13 12 13 11.4477 13 11 12.5523 11 12 11 11.4477 11.4477 11 12 11 12.5523 11 13 11.4477 13 12zM17 12C17 12.5523 16.5523 13 16 13 15.4477 13 15 12.5523 15 12 15 11.4477 15.4477 11 16 11 16.5523 11 17 11.4477 17 12z"
            class="fill-current"
          ></path>
          <path
            clip-rule="evenodd"
            d="M12 2.75C10.3139 2.75 8.73533 3.20043 7.37554 3.98703C7.017 4.19443 6.5582 4.07191 6.3508 3.71337C6.14339 3.35482 6.26591 2.89602 6.62446 2.68862C8.2064 1.77351 10.0432 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12C1.25 10.0432 1.77351 8.2064 2.68862 6.62446C2.89602 6.26591 3.35482 6.14339 3.71337 6.3508C4.07191 6.5582 4.19443 7.017 3.98703 7.37554C3.20043 8.73533 2.75 10.3139 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75Z"
            fill-rule="evenodd"
            class="fill-current"
          ></path>
        </svg>
        Other
      </label>
    </div>
  </div>
</div>


    

================================================
FILE: Radio-buttons/Saiyed-Tanvir_stale-parrot-18.html
================================================
<div class="container">
    <div class="pane">
        <label class="label">
            <span>Yes</span>
            <input id="left" class="input" name="radio" type="radio">
        </label>
        <label class="label">
            <span>No</span>
            <input id="middle" class="input" checked="checked" name="radio" type="radio">
        </label>
        <label class="label">
            <span>Idk</span>
            <input id="right" class="input" name="radio" type="radio">
        </label>
        <span class="selection"></span>
    </div>
</div>
<style>
/* From Uiverse.io by Saiyed-Tanvir - Tags: hover, glow, radio, animated, futuristic-radio-buttons, custom */
.container {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.pane {
  outline: 2px solid #00ff6a;
  box-shadow: 0 0 10px #00ff6a77, inset 0 0 10px #00ff6a77;
  height: 1cm;
  width: 4.5cm;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  transition: 0.7s ease;
}

.input {
  display: none;
}

.label {
  height: 1cm;
  width: 1.5cm;
  float: left;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 14px;
  padding: 0px;
  position: relative;
  z-index: 1;
  color: #00ff6a;
  text-align: center;
  padding-top: 10px;
}

.selection {
  display: none;
  position: absolute;
  height: 1cm;
  width: calc(4.5cm / 3);
  z-index: 0;
  left: 0;
  top: 0;
  box-shadow: 0 0 10px #00ff6a77;
  transition: .15s ease;
}

.label:has(input:checked) {
  color: #212121;
}

.pane:has(.label:nth-child(1):hover) {
  transform: rotateY(-30deg);
}

.pane:has(.label:nth-child(3):hover) {
  transform: rotateY(35deg);
}

.label:has(input:checked) ~ .selection {
  background-color: #00ff6a;
  display: inline-block;
}

.label:nth-child(1):has(input:checked) ~ .selection {
  transform: translateX(calc(4.5cm * 0/3));
}

.label:nth-child(2):has(input:checked) ~ .selection {
  transform: translateX(calc(4.5cm * 1/3));
}

.label:nth-child(3):has(input:checked) ~ .selection {
  transform: translateX(calc(4.5cm * 2/3));
}
</style>


================================================
FILE: Radio-buttons/SanjanaSogimatt_short-chipmunk-97.html
================================================
<div class="radio-input">
        <input value="value-1" name="value-radio" id="value-1" type="radio">
        <label for="value-1" class="label">BASIC</label>
        <input value="value-2" name="value-radio" id="value-2" type="radio">
        <label for="value-2" class="label">STANDARD</label>
        <input value="value-3" name="value-radio" id="value-3" type="radio">
        <label for="value-3" class="label">PREMIUM</label>
</div>
<style>
/* From Uiverse.io by SanjanaSogimatt - Tags: neumorphism, skeuomorphism, minimalist, gradient, button, hover, glow, radio, animated, futuristic-radio-buttons */
.radio-input {
  box-shadow: -10px -15px 15px rgba(255, 255, 255, 0.5),
    10px 10px 25px rgba(70, 70, 70, 0.5);
  margin: auto;
  height: 80px;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  border-radius: 50px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
}

.radio-input input[type="radio"] {
  display: none;
}

.label {
  font-size: .9rem;
  font-weight: 600;
  font-family: 'poppins',sans-serif;
  padding: 18px 15px;
  border-radius: 35px;
  transition: 0.5s;
  cursor: pointer;
  color: black;
}

.radio-input input[type="radio"]:checked + label {
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.151),
    10px 10px 15px rgba(0, 0, 0, 0.218);
  background: linear-gradient(45deg,#cf6efb,#4f29cd);
  color: white;
  transform: translateY(-4px);
}

.radio-input input[type="radio"]:hover:not(:checked)+ label {
  box-shadow: inset 10px 10px 15px rgba(0, 0, 0, 0.151),
    inset 10px 10px 15px rgba(0, 0, 0, 0.218);
}

</style>


================================================
FILE: Radio-buttons/SelfMadeSystem_fat-bullfrog-40.html
================================================
<div class="radio-input">
  <label class="container">
    <svg>
      <rect class="hi" pathLength="800"></rect>
    </svg>
    <input type="radio" id="value-1" name="value-radio" checked="" value="value-1">
  </label>
  <label class="container">
    <svg>
      <rect class="hi" pathLength="600"></rect>
    </svg>
    <input type="radio" id="value-2" name="value-radio" value="value-2">
  </label>
  <label class="container">
    <svg>
      <rect class="hi" pathLength="700"></rect>
    </svg>
    <input type="radio" id="value-3" name="value-radio" value="value-3">
  </label>
</div>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: radio */
.radio-input {
  --c: rgb(74, 156, 233);
}

.radio-input label {
  position: relative;
  display: inline-block;
  border-radius: 99999px;
  appearance: unset;
  margin: 8px;
  width: 3em;
  height: 3em;
}

.radio-input input {
  position: absolute;
  border-radius: 99999px;
  appearance: unset;
  inset: 0.75em;
  margin: 0;
  transition: background-color 0.5s;
}

.radio-input input:checked {
  background-color: var(--c);
  filter: drop-shadow(0 0 10px var(--c));
}

.radio-input svg {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 0 4px var(--c));
}

.radio-input svg .hi {
  width: 3em;
  height: 3em;
  rx: 1.5em;
  fill: transparent;
  stroke: var(--c);
  stroke-width: 0.25em;
  stroke-dasharray: 70 30;
  animation: strokeWee 32s linear infinite;
}

@keyframes strokeWee {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 1000;
  }
}
</style>


================================================
FILE: Radio-buttons/SelfMadeSystem_selfish-starfish-40.html
================================================
<div class="rating">
  <input type="radio" id="star-1" name="star-radio" value="star-1">
  <label for="star-1">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
  </label>
  <input type="radio" id="star-2" name="star-radio" value="star-1">
  <label for="star-2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
  </label>
  <input type="radio" id="star-3" name="star-radio" value="star-1">
  <label for="star-3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
  </label>
  <input type="radio" id="star-4" name="star-radio" value="star-1">
  <label for="star-4">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
  </label>
  <input type="radio" id="star-5" name="star-radio" value="star-1">
  <label for="star-5">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
  </label>
</div>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: star, radio, animated, rate, stars, rating */
.rating {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.3rem;
  --stroke: #666;
  --fill: #ffc73a;
}

.rating input {
  appearance: unset;
}

.rating label {
  cursor: pointer;
}

.rating svg {
  width: 2rem;
  height: 2rem;
  overflow: visible;
  fill: transparent;
  stroke: var(--stroke);
  stroke-linejoin: bevel;
  stroke-dasharray: 12;
  animation: idle 4s linear infinite;
  transition: stroke 0.2s, fill 0.5s;
}

@keyframes idle {
  from {
    stroke-dashoffset: 24;
  }
}

.rating label:hover svg {
  stroke: var(--fill);
}

.rating input:checked ~ label svg {
  transition: 0s;
  animation: idle 4s linear infinite, yippee 0.75s backwards;
  fill: var(--fill);
  stroke: var(--fill);
  stroke-opacity: 0;
  stroke-dasharray: 0;
  stroke-linejoin: miter;
  stroke-width: 8px;
}

@keyframes yippee {
  0% {
    transform: scale(1);
    fill: var(--fill);
    fill-opacity: 0;
    stroke-opacity: 1;
    stroke: var(--stroke);
    stroke-dasharray: 10;
    stroke-width: 1px;
    stroke-linejoin: bevel;
  }

  30% {
    transform: scale(0);
    fill: var(--fill);
    fill-opacity: 0;
    stroke-opacity: 1;
    stroke: var(--stroke);
    stroke-dasharray: 10;
    stroke-width: 1px;
    stroke-linejoin: bevel;
  }

  30.1% {
    stroke: var(--fill);
    stroke-dasharray: 0;
    stroke-linejoin: miter;
    stroke-width: 8px;
  }

  60% {
    transform: scale(1.2);
    fill: var(--fill);
  }
}

</style>


================================================
FILE: Radio-buttons/Shoh2008_bad-starfish-74.html
================================================
<div class="radio-input">
  <input name="radio" type="radio" class="input" checked="">
  <input name="radio" type="radio" class="input">
  <input name="radio" type="radio" class="input">
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: radio */
.input {
  -webkit-appearance: none;
 /* remove default */
  display: block;
  margin: 10px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: hsla(0,0%,100%,.15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px;
  background-color: hsla(0,0%,0%,.2);
  background-image: -webkit-radial-gradient( hsla(200,100%,90%,1) 0%, hsla(200,100%,70%,1) 15%, hsla(200,100%,60%,.3) 28%, hsla(200,100%,30%,0) 70% );
  background-repeat: no-repeat;
  -webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1),
    -webkit-transform .25s cubic-bezier(.8, 0, 1, 1);
  outline: none;
}

.input:checked {
  -webkit-transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1),
    -webkit-transform .25s cubic-bezier(0, 0, .2, 1);
}

.input:active {
  -webkit-transform: scale(1.5);
  -webkit-transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);
}



/* The up/down direction logic */

.input,
.input:active {
  background-position: 0 24px;
}

.input:checked {
  background-position: 0 0;
}

.input:checked ~ .input,
.input:checked ~ .input:active {
  background-position: 0 -24px;
}
</style>


================================================
FILE: Radio-buttons/Shoh2008_popular-octopus-59.html
================================================
<div class="radio">
	<input checked="" value="male" name="gender" id="male" type="radio" label="Yes">
	<input value="female" name="gender" id="female" type="radio" label="No">
	<input value="other" name="gender" id="other" type="radio" label="I hate making decisions 🤷🏻‍♂️">
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: radio */
.radio {
  background: #454857;
  padding: 4px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px rgba(35, 33, 45, 0.3),
		0 0 0 3px rgba(185, 185, 185, 0.3);
  position: relative;
}

.radio input {
  width: auto;
  height: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  border-radius: 2px;
  padding: 4px 8px;
  background: #454857;
  color: #bdbdbdbd;
  font-size: 14px;
  font-family: 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";
  transition: all 100ms linear;
}

.radio input:checked {
  background-image: linear-gradient(180deg, #95d891, #74bbad);
  color: #fff;
  box-shadow: 0 1px 1px #0000002e;
  text-shadow: 0 1px 0px #79485f7a;
}

.radio input:before {
  content: attr(label);
  display: inline-block;
  text-align: center;
  width: 100%;
}

</style>


================================================
FILE: Radio-buttons/SlowLess0_helpless-termite-82.html
================================================
<div>

  <label class="rad-label">
    <input type="radio" class="rad-input" name="rad">
    <div class="rad-design"></div>
    <div class="rad-text">Air</div>
  </label>

  <label class="rad-label">
    <input type="radio" class="rad-input" name="rad">
    <div class="rad-design"></div>
    <div class="rad-text">Earth</div>
  </label>

  <label class="rad-label">
    <input type="radio" class="rad-input" name="rad">
    <div class="rad-design"></div>
    <div class="rad-text">Water</div>
  </label>

</div>
<style>
/* From Uiverse.io by SlowLess0 - Tags: radio */
.rad-label {
  display: flex;
  padding: 14px 16px;
  margin: 10px 0;
  border-radius: 100px;
  cursor: pointer;
  transition: 0.3s;
}

.rad-label:hover, .rad-label:focus-within {
  background: hsla(0, 0%, 40%, .14);
}

.rad-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  z-index: -1;
}

.rad-design {
  width: 22px;
  height: 22px;
  border-radius: 100px;
  background: linear-gradient(to right bottom, hsl(172, 97%, 62%), hsl(251, 97%, 62%));
  position: relative;
}

.rad-design::before {
  content: '';
  display: inline-block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: hsl(0, 0%, 80%);
  transform: scale(1.1);
  transition: .3s;
}

.rad-input:checked+.rad-design::before {
  transform: scale(0);
}

.rad-text {
  color: hsl(0, 0%, 60%);
  margin-left: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 900;
  transition: .3s;
}

.rad-input:checked~.rad-text {
  color: hsl(0, 0%, 40%);
}
</style>


================================================
FILE: Radio-buttons/SmookyDev_green-lizard-94.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: radio, clean, transition, css effect, click animation, tailwind, tailwindcss -->
<div
  class="w-[300px] p-2 aspect-square rounded-lg shadow flex flex-col items-center justify-center gap-2 bg-slate-50"
>
  <p class="capitalize font-semibold self-start">Payment method</p>
  <p class="text-[10px] self-start text-wrap text-gray-500 pb-1">
    This component is made by using
    <span class="font-bold underline">`:has() pseudo-class`</span>
  </p>
  <label
    class="inline-flex justify-between w-full items-center z-10 rounded-lg p-2 border border-transparent has-[:checked]:border-indigo-500 has-[:checked]:text-indigo-900 has-[:checked]:bg-indigo-50 has-[:checked]:font-bold hover:bg-slate-200 transition-all cursor-pointer has-[:checked]:transition-all has-[:checked]:duration-500 duration-500 relative [&amp;_p]:has-[:checked]:translate-y-0 [&amp;_p]:has-[:checked]:transition-transform [&amp;_p]:has-[:checked]:duration-500 [&amp;_p]:has-[:checked]:opacity-100 overflow-hidden"
  >
    <div class="inline-flex items-center justify-center gap-2 relative z-10">
      <svg
        fill="currentColor"
        viewBox="0 0 32 32"
        height="32"
        width="32"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M32 13.333l-4.177 9.333h-1.292l1.552-3.266-2.75-6.068h1.359l1.99 4.651h0.026l1.927-4.651zM14.646 16.219v3.781h-1.313v-9.333h3.474c0.828-0.021 1.63 0.266 2.25 0.807 0.615 0.505 0.953 1.219 0.943 1.974 0.010 0.766-0.339 1.5-0.943 1.979-0.604 0.531-1.354 0.792-2.25 0.792zM14.641 11.818v3.255h2.198c0.484 0.016 0.958-0.161 1.297-0.479 0.339-0.302 0.526-0.714 0.526-1.141 0-0.432-0.188-0.844-0.526-1.141-0.349-0.333-0.818-0.51-1.297-0.495zM22.63 13.333c0.833 0 1.495 0.234 1.979 0.698s0.724 1.099 0.724 1.906v3.859h-1.083v-0.87h-0.047c-0.469 0.714-1.089 1.073-1.865 1.073-0.667 0-1.219-0.203-1.667-0.615-0.438-0.385-0.682-0.948-0.672-1.531 0-0.646 0.234-1.161 0.708-1.547 0.469-0.38 1.099-0.573 1.885-0.573 0.672 0 1.224 0.13 1.656 0.385v-0.271c0.005-0.396-0.167-0.776-0.464-1.042-0.297-0.276-0.688-0.432-1.094-0.427-0.63 0-1.13 0.276-1.5 0.828l-0.995-0.646c0.547-0.818 1.359-1.229 2.432-1.229zM21.167 17.88c-0.005 0.302 0.135 0.583 0.375 0.766 0.25 0.203 0.563 0.313 0.88 0.307 0.474 0 0.932-0.198 1.271-0.547 0.359-0.333 0.563-0.802 0.563-1.292-0.354-0.292-0.844-0.438-1.474-0.438-0.464 0-0.844 0.115-1.151 0.344-0.307 0.234-0.464 0.516-0.464 0.859zM5.443 10.667c1.344-0.016 2.646 0.479 3.641 1.391l-1.552 1.521c-0.568-0.526-1.318-0.813-2.089-0.797-1.385 0.005-2.609 0.891-3.057 2.198-0.229 0.661-0.229 1.38 0 2.042 0.448 1.307 1.672 2.193 3.057 2.198 0.734 0 1.365-0.182 1.854-0.505 0.568-0.375 0.964-0.958 1.083-1.625h-2.938v-2.052h5.13c0.063 0.359 0.094 0.719 0.094 1.083 0 1.625-0.594 3-1.62 3.927-0.901 0.813-2.135 1.286-3.604 1.286-2.047 0.010-3.922-1.125-4.865-2.938-0.771-1.505-0.771-3.286 0-4.792 0.943-1.813 2.818-2.948 4.859-2.938z"
        ></path>
      </svg>
      <p
        class="font-semibold absolute inset-0 w-full whitespace-nowrap translate-y-[110%] translate-x-full top-1 left-2 transition-all duration-700 opacity-0"
      >
        Google Pay
      </p>
    </div>
    <input
      class="checked:text-indigo-500 checked:ring-0 checked:ring-current focus:ring-0 focus:ring-current"
      value="google"
      name="payment"
      type="radio"
    />
  </label>
  <label
    class="inline-flex justify-between w-full items-center rounded-lg p-2 border border-transparent has-[:checked]:border-indigo-500 has-[:checked]:text-indigo-900 has-[:checked]:bg-indigo-50 has-[:checked]:font-bold hover:bg-slate-200 transition-all cursor-pointer has-[:checked]:transition-all has-[:checked]:duration-500 duration-500 relative [&amp;_p]:has-[:checked]:translate-y-0 [&amp;_p]:has-[:checked]:transition-transform [&amp;_p]:has-[:checked]:duration-500 [&amp;_p]:has-[:checked]:opacity-100 overflow-hidden"
  >
    <div class="inline-flex items-center justify-center gap-2 relative">
      <svg
        fill="currentColor"
        viewBox="0 0 640 512"
        height="32"
        width="32"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M116.9 158.5c-7.5 8.9-19.5 15.9-31.5 14.9-1.5-12 4.4-24.8 11.3-32.6 7.5-9.1 20.6-15.6 31.3-16.1 1.2 12.4-3.7 24.7-11.1 33.8m10.9 17.2c-17.4-1-32.3 9.9-40.5 9.9-8.4 0-21-9.4-34.8-9.1-17.9.3-34.5 10.4-43.6 26.5-18.8 32.3-4.9 80 13.3 106.3 8.9 13 19.5 27.3 33.5 26.8 13.3-.5 18.5-8.6 34.5-8.6 16.1 0 20.8 8.6 34.8 8.4 14.5-.3 23.6-13 32.5-26 10.1-14.8 14.3-29.1 14.5-29.9-.3-.3-28-10.9-28.3-42.9-.3-26.8 21.9-39.5 22.9-40.3-12.5-18.6-32-20.6-38.8-21.1m100.4-36.2v194.9h30.3v-66.6h41.9c38.3 0 65.1-26.3 65.1-64.3s-26.4-64-64.1-64h-73.2zm30.3 25.5h34.9c26.3 0 41.3 14 41.3 38.6s-15 38.8-41.4 38.8h-34.8V165zm162.2 170.9c19 0 36.6-9.6 44.6-24.9h.6v23.4h28v-97c0-28.1-22.5-46.3-57.1-46.3-32.1 0-55.9 18.4-56.8 43.6h27.3c2.3-12 13.4-19.9 28.6-19.9 18.5 0 28.9 8.6 28.9 24.5v10.8l-37.8 2.3c-35.1 2.1-54.1 16.5-54.1 41.5.1 25.2 19.7 42 47.8 42zm8.2-23.1c-16.1 0-26.4-7.8-26.4-19.6 0-12.3 9.9-19.4 28.8-20.5l33.6-2.1v11c0 18.2-15.5 31.2-36 31.2zm102.5 74.6c29.5 0 43.4-11.3 55.5-45.4L640 193h-30.8l-35.6 115.1h-.6L537.4 193h-31.6L557 334.9l-2.8 8.6c-4.6 14.6-12.1 20.3-25.5 20.3-2.4 0-7-.3-8.9-.5v23.4c1.8.4 9.3.7 11.6.7z"
        ></path>
      </svg>
      <p
        class="font-semibold absolute inset-0 w-full whitespace-nowrap -translate-y-[110%] translate-x-full top-1 left-2 transition-all duration-700 opacity-0"
      >
        Apple Pay
      </p>
    </div>
    <input
      class="checked:text-indigo-500 checked:ring-0 checked:ring-current focus:ring-0 focus:ring-current"
      value="apple"
      name="payment"
      type="radio"
    />
  </label>
  <label
    class="inline-flex justify-between w-full items-center rounded-lg p-2 border border-transparent has-[:checked]:border-indigo-500 has-[:checked]:text-indigo-900 has-[:checked]:bg-indigo-50 has-[:checked]:font-bold hover:bg-slate-200 transition-all cursor-pointer has-[:checked]:transition-all has-[:checked]:duration-500 duration-500 relative [&amp;_p]:has-[:checked]:translate-y-0 [&amp;_p]:has-[:checked]:transition-transform [&amp;_p]:has-[:checked]:duration-500 [&amp;_p]:has-[:checked]:opacity-100 overflow-hidden"
  >
    <div class="inline-flex items-center justify-center gap-2 relative">
      <svg
        fill="currentColor"
        height="32"
        width="32"
        viewBox="0 0 576 512"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M186.3 258.2c0 12.2-9.7 21.5-22 21.5-9.2 0-16-5.2-16-15 0-12.2 9.5-22 21.7-22 9.3 0 16.3 5.7 16.3 15.5zM80.5 209.7h-4.7c-1.5 0-3 1-3.2 2.7l-4.3 26.7 8.2-.3c11 0 19.5-1.5 21.5-14.2 2.3-13.4-6.2-14.9-17.5-14.9zm284 0H360c-1.8 0-3 1-3.2 2.7l-4.2 26.7 8-.3c13 0 22-3 22-18-.1-10.6-9.6-11.1-18.1-11.1zM576 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48zM128.3 215.4c0-21-16.2-28-34.7-28h-40c-2.5 0-5 2-5.2 4.7L32 294.2c-.3 2 1.2 4 3.2 4h19c2.7 0 5.2-2.9 5.5-5.7l4.5-26.6c1-7.2 13.2-4.7 18-4.7 28.6 0 46.1-17 46.1-45.8zm84.2 8.8h-19c-3.8 0-4 5.5-4.2 8.2-5.8-8.5-14.2-10-23.7-10-24.5 0-43.2 21.5-43.2 45.2 0 19.5 12.2 32.2 31.7 32.2 9 0 20.2-4.9 26.5-11.9-.5 1.5-1 4.7-1 6.2 0 2.3 1 4 3.2 4H200c2.7 0 5-2.9 5.5-5.7l10.2-64.3c.3-1.9-1.2-3.9-3.2-3.9zm40.5 97.9l63.7-92.6c.5-.5.5-1 .5-1.7 0-1.7-1.5-3.5-3.2-3.5h-19.2c-1.7 0-3.5 1-4.5 2.5l-26.5 39-11-37.5c-.8-2.2-3-4-5.5-4h-18.7c-1.7 0-3.2 1.8-3.2 3.5 0 1.2 19.5 56.8 21.2 62.1-2.7 3.8-20.5 28.6-20.5 31.6 0 1.8 1.5 3.2 3.2 3.2h19.2c1.8-.1 3.5-1.1 4.5-2.6zm159.3-106.7c0-21-16.2-28-34.7-28h-39.7c-2.7 0-5.2 2-5.5 4.7l-16.2 102c-.2 2 1.3 4 3.2 4h20.5c2 0 3.5-1.5 4-3.2l4.5-29c1-7.2 13.2-4.7 18-4.7 28.4 0 45.9-17 45.9-45.8zm84.2 8.8h-19c-3.8 0-4 5.5-4.3 8.2-5.5-8.5-14-10-23.7-10-24.5 0-43.2 21.5-43.2 45.2 0 19.5 12.2 32.2 31.7 32.2 9.3 0 20.5-4.9 26.5-11.9-.3 1.5-1 4.7-1 6.2 0 2.3 1 4 3.2 4H484c2.7 0 5-2.9 5.5-5.7l10.2-64.3c.3-1.9-1.2-3.9-3.2-3.9zm47.5-33.3c0-2-1.5-3.5-3.2-3.5h-18.5c-1.5 0-3 1.2-3.2 2.7l-16.2 104-.3.5c0 1.8 1.5 3.5 3.5 3.5h16.5c2.5 0 5-2.9 5.2-5.7L544 191.2v-.3zm-90 51.8c-12.2 0-21.7 9.7-21.7 22 0 9.7 7 15 16.2 15 12 0 21.7-9.2 21.7-21.5.1-9.8-6.9-15.5-16.2-15.5z"
        ></path>
      </svg>
      <p
        class="font-semibold absolute inset-0 w-full whitespace-nowrap -translate-y-[110%] translate-x-full top-1 left-2 transition-all duration-700 opacity-0"
      >
        Paypal
      </p>
    </div>
    <input
      class="checked:text-indigo-500 checked:ring-0 checked:ring-current focus:ring-0 focus:ring-current"
      value="paypal"
      name="payment"
      type="radio"
    />
  </label>
  <label
    class="inline-flex justify-between w-full items-center rounded-lg p-2 border border-transparent has-[:checked]:border-indigo-500 has-[:checked]:text-indigo-900 has-[:checked]:bg-indigo-50 has-[:checked]:font-bold hover:bg-slate-200 transition-all cursor-pointer has-[:checked]:transition-all has-[:checked]:duration-500 duration-500 relative [&amp;_p]:has-[:checked]:translate-y-0 [&amp;_p]:has-[:checked]:transition-transform [&amp;_p]:has-[:checked]:duration-500 [&amp;_p]:has-[:checked]:opacity-100 overflow-hidden"
  >
    <div class="inline-flex items-center justify-center gap-2 relative">
      <svg
        fill="currentColor"
        height="32"
        width="32"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g>
          <path d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M22.222 15.768l-.225-1.125h-2.514l-.4 1.117-2.015.004a4199.19 4199.19 0 0 1 2.884-6.918c.164-.391.455-.59.884-.588.328.003.863.003 1.606.001L24 15.765l-1.778.003zm-2.173-2.666h1.62l-.605-2.82-1.015 2.82zM7.06 8.257l2.026.002-3.132 7.51-2.051-.002a950.849 950.849 0 0 1-1.528-5.956c-.1-.396-.298-.673-.679-.804C1.357 8.89.792 8.71 0 8.465V8.26h3.237c.56 0 .887.271.992.827.106.557.372 1.975.8 4.254L7.06 8.257zm4.81.002l-1.602 7.508-1.928-.002L9.94 8.257l1.93.002zm3.91-.139c.577 0 1.304.18 1.722.345l-.338 1.557c-.378-.152-1-.357-1.523-.35-.76.013-1.23.332-1.23.638 0 .498.816.749 1.656 1.293.959.62 1.085 1.177 1.073 1.782-.013 1.256-1.073 2.495-3.309 2.495-1.02-.015-1.388-.101-2.22-.396l.352-1.625c.847.355 1.206.468 1.93.468.663 0 1.232-.268 1.237-.735.004-.332-.2-.497-.944-.907-.744-.411-1.788-.98-1.774-2.122.017-1.462 1.402-2.443 3.369-2.443z"
          ></path>
        </g>
      </svg>
      <p
        class="font-semibold absolute inset-0 w-full whitespace-nowrap translate-y-[110%] translate-x-full top-1 left-2 transition-all duration-700 opacity-0"
      >
        Credit Card
      </p>
    </div>
    <input
      class="checked:text-indigo-500 checked:ring-0 checked:ring-current focus:ring-0 focus:ring-current"
      value="visa"
      name="payment"
      type="radio"
    />
  </label>
</div>


    

================================================
FILE: Radio-buttons/Spacious74_lovely-goose-53.html
================================================
<div class="radio-inputs">
  <label class="radio">
    <input type="radio" name="radio" checked="" />
    <span class="name">HTML</span>
  </label>
  <label class="radio">
    <input type="radio" name="radio" />
    <span class="name">React</span>
  </label>

  <label class="radio">
    <input type="radio" name="radio" />
    <span class="name">Vue</span>
  </label>
</div>

<style>
/* From Uiverse.io by Spacious74  - Tags: active, radio, menu */
.radio-inputs {
  position: relative;
  display: flex;
  border-radius: 0.5rem;
  background-color: #70c489;
  box-sizing: border-box;
  font-size: 14px;
  width: 90%;
  padding: 1rem 1rem 0 1rem;
}

.radio-inputs .radio input {
  display: none;
}

.radio-inputs .radio .name {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border: none;
  padding: 0.5rem 0.8rem;
  color: ;
  transition: all 0.15s ease-in-out;
  position: relative;
}

.radio-inputs .radio input:checked + .name {
  background-color: #e8e8e8;
  font-weight: 600;
}
.radio-inputs .radio input + .name:hover {
  color: #fff;
}
.radio-inputs .radio input:checked + .name:hover {
  color: #1d1d29;
}

.radio-inputs .radio input:checked + .name::after,
.radio-inputs .radio input:checked + .name::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #70c489;
  bottom: 0;
}

.radio-inputs .radio input:checked + .name::after {
  right: -10px;
  border-bottom-left-radius: 300px;
  box-shadow: -3px 3px 0px 3px #e8e8e8;
}
.radio-inputs .radio input:checked + .name::before {
  left: -10px;
  border-bottom-right-radius: 300px;
  box-shadow: 3px 3px 0px 3px #e8e8e8;
}

</style>
    

================================================
FILE: Radio-buttons/Subaashbala_silly-sheep-7.html
================================================
<div class="radio-input">
  <div class="radio-input-path">
    <div class="radioContainer1 radioContainer">
      <label class="label1" for="value-1">1</label>
      <input
        class="radio1"
        value="value-1"
        name="value-radio"
        id="value-1"
        type="radio"
      />
    </div>
    <div class="radioContainer radioContainer2">
      <label class="label2" for="value-2">2</label>
      <input
        class="radio2"
        value="value-2"
        name="value-radio"
        id="value-2"
        type="radio"
      />
    </div>
    <div class="radioContainer radioContainer3">
      <label class="label3" for="value-3">3</label>
      <input
        class="radio3"
        value="value-3"
        name="value-radio"
        id="value-3"
        type="radio"
      />
    </div>
    <div class="radioContainer radioContainer4">
      <label class="label4" for="value-4">4</label>
      <input
        class="radio4"
        value="value-4"
        name="value-radio"
        id="value-4"
        type="radio"
      />
    </div>
    <div class="radioContainer radioContainer5">
      <label class="label5" for="value-5">5</label>
      <input
        class="radio5"
        value="value-5"
        name="value-radio"
        id="value-5"
        type="radio"
      />
    </div>
  </div>
  <div class="knob">
    <div class="center"></div>
  </div>
</div>

<style>
/* From Uiverse.io by Subaashbala  - Tags: skeuomorphism, realistic, radio, rotate, click effect */
.radio-input {
  position: relative;
}
.radio-input-path {
  position: relative;
  width: 20em; /* width of the container holding the radiobutton and the label */
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
}
.radioContainer {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 1em;
}
.radioContainer label {
  font-size: 0.85em;
  font-weight: 900;
  cursor: pointer;
}
.radio-input-path input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #000;
  transform-origin: bottom center;
  outline: none;
}
.radioContainer1 {
  left: 0;
  top: 25%;
  transform: rotateZ(-45deg);
}
.radioContainer5 {
  right: 0;
  top: 25%;
  transform: rotateZ(45deg);
}
.radioContainer2 {
  left: 15%;
  top: 5%;
  transform: rotateZ(-25deg);
}
.radioContainer4 {
  right: 15%;
  top: 5%;
  transform: rotateZ(25deg);
}
.radioContainer3 {
  left: 44%;
  top: -5%;
  transform: rotateZ(0deg);
}

/* The circular thing that rotates */
.knob {
  width: 13em;
  aspect-ratio: 1;
  border-radius: 50%;
  top: 25%;
  left: 50%;
  position: absolute;
  border: 3px solid black;
  outline: 3px solid gray;
  background: #cfc9bd;
  overflow: hidden;
  transform: translateX(-50%);
  transform-origin: center center;
  transition: transform 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.center {
  height: 100%;
  width: 2.25em;
  position: relative;
  left: 50%;
  top: 50%;
  background-color: #cfc9bd;
  border-radius: 7px;
  outline: 1px solid rgba(255, 255, 255, 0.377);
  transform: translate(-50%, -50%);
  box-shadow: 15px 0px 35px rgba(255, 255, 255, 0.474),
    -15px 0px 40px 5px rgba(128, 128, 128, 0.563),
    inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226);
  transition: box-shadow 100ms linear;
}
.center::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 25px;
  background-color: black;
  left: 50%;
  top: 1%;
  transform: translateX(-50%);
}

/* Adjust rotateZ if the knob rotation is away from the label */
.radio-input-path:has(.radio1:checked) ~ .knob {
  transform: translateX(-50%) rotateZ(-60deg);
}
.radio-input-path:has(.radio2:checked) ~ .knob {
  transform: translateX(-50%) rotateZ(-35deg);
}
.radio-input-path:has(.radio3:checked) ~ .knob {
  transform: translateX(-50%) rotateZ(0deg);
}
.radio-input-path:has(.radio4:checked) ~ .knob {
  transform: translateX(-50%) rotateZ(35deg);
}
.radio-input-path:has(.radio5:checked) ~ .knob {
  transform: translateX(-50%) rotateZ(60deg);
}

/* Dynamic shadow adustment based on the knob position */
.radio-input-path:has(.radio1:checked) ~ .knob > .center {
  box-shadow: 15px 0px 35px rgba(255, 255, 255, 0.74),
    -15px 0px 40px 5px rgb(128, 128, 128),
    inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226);
}
.radio-input-path:has(.radio2:checked) ~ .knob > .center {
  box-shadow: 15px 0px 35px rgba(255, 255, 255, 0.74),
    -15px 0px 40px 5px rgb(128, 128, 128, 0.574),
    inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226);
}
.radio-input-path:has(.radio4:checked) ~ .knob > .center {
  box-shadow: 15px 0px 35px rgba(128, 128, 128, 0.63),
    -15px 0px 40px 5px rgba(255, 255, 255, 0.574),
    inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226);
}
.radio-input-path:has(.radio5:checked) ~ .knob > .center {
  box-shadow: 15px 0px 35px rgb(128, 128, 128),
    -15px 0px 40px 5px rgba(255, 255, 255, 0.74),
    inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226);
}

</style>
    

================================================
FILE: Radio-buttons/Tsiangana_clever-cheetah-40.html
================================================
<div class="radio-input">
  <div class="container">
    <label>
      <input value="value-1" name="value-radio" checked="" id="value-1" type="radio">
      <div class="loader"></div>
    </label>
    <label>
      <input value="value-2" name="value-radio" id="value-2" type="radio">
      <div class="loader"></div>
    </label>
    <label>
      <input value="value-3" name="value-radio" id="value-3" type="radio">
      <div class="loader"></div>
    </label>
 </div>
</div>

<style>
/* From Uiverse.io by Tsiangana - Tags: futuristic, animated, futuristic-radio-buttons */
.radio-input label {
  position: relative;
  display: flex;
  border-radius: 99999px;
  margin: 8px;
  width: 3em;
  height: 3em;
  margin-top: -35px;
}

.radio-input input {
  position: absolute;
  border-radius: 50%;
  appearance: unset;
  inset: 0.95em;
  margin: 0;
  cursor: pointer;
  background-color: rgb(74, 156, 233);
  filter: drop-shadow(0 0 10px rgb(74, 156, 233));
}

.radio-input input:checked {
  transition: .9s linear;
  background-color: #fff;
  z-index: 500;
}

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

.radio-input .container .loader {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 1px solid;
  position: absolute;
  bottom: -25px;
  left: 10.5px;
  transform-origin: 50% 60%;
  transform: perspective(200px) rotateX(66deg);
  z-index: -1;
  background: linear-gradient(315deg, #cacaca, #f0f0f0);
  box-shadow: -6px -6px 11px #c1c1c1,
             6px 6px 11px #ffffff;
}

#value-1[type='radio']:checked:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  top: 23px;
  animation: 2.2s  lua infinite ease-in-out;
  animation-timing-function: linear;
}

#value-2[type='radio']:checked:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(19, 219, 226, 0.719);
  border-radius: 50%;
  top: 23px;
  animation: 2.2s  lua infinite ease-in-out;
  animation-timing-function: linear;
}

#value-3[type='radio']:checked:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(29, 29, 23, 0.979);
  border-radius: 50%;
  top: 23px;
  animation: 2.2s lua  infinite ease-in-out;
  animation-timing-function: linear;
}

@keyframes lua {
  0% {
    z-index: 5;
  }

  50% {
    transform: translateX(1.5em) translateY(-2.5em);
  }

  100% {
    z-index: -5;
    background: none;
  }
}
</style>


================================================
FILE: Radio-buttons/Tsiangana_nasty-lizard-71.html
================================================
<div class="radio-inputs">
  <label>
    <input class="radio-input instagram" type="radio" name="engine" />
    <span class="radio-tile instagram">
      <span class="radio-icon">
        <svg
          class="instagram"
          fill-rule="nonzero"
          height="30px"
          width="30px"
          viewBox="0,0,256,256"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g
            style="mix-blend-mode: normal"
            text-anchor="none"
            font-size="none"
            font-weight="none"
            font-family="none"
            stroke-dashoffset="0"
            stroke-dasharray=""
            stroke-miterlimit="10"
            stroke-linejoin="miter"
            stroke-linecap="butt"
            stroke-width="1"
            stroke="none"
            fill-rule="nonzero"
          >
            <g transform="scale(8,8)">
              <path
                d="M11.46875,5c-3.55078,0 -6.46875,2.91406 -6.46875,6.46875v9.0625c0,3.55078 2.91406,6.46875 6.46875,6.46875h9.0625c3.55078,0 6.46875,-2.91406 6.46875,-6.46875v-9.0625c0,-3.55078 -2.91406,-6.46875 -6.46875,-6.46875zM11.46875,7h9.0625c2.47266,0 4.46875,1.99609 4.46875,4.46875v9.0625c0,2.47266 -1.99609,4.46875 -4.46875,4.46875h-9.0625c-2.47266,0 -4.46875,-1.99609 -4.46875,-4.46875v-9.0625c0,-2.47266 1.99609,-4.46875 4.46875,-4.46875zM21.90625,9.1875c-0.50391,0 -0.90625,0.40234 -0.90625,0.90625c0,0.50391 0.40234,0.90625 0.90625,0.90625c0.50391,0 0.90625,-0.40234 0.90625,-0.90625c0,-0.50391 -0.40234,-0.90625 -0.90625,-0.90625zM16,10c-3.30078,0 -6,2.69922 -6,6c0,3.30078 2.69922,6 6,6c3.30078,0 6,-2.69922 6,-6c0,-3.30078 -2.69922,-6 -6,-6zM16,12c2.22266,0 4,1.77734 4,4c0,2.22266 -1.77734,4 -4,4c-2.22266,0 -4,-1.77734 -4,-4c0,-2.22266 1.77734,-4 4,-4z"
              ></path>
            </g>
          </g>
        </svg>
      </span>
    </span>
  </label>

  <label>
    <input class="radio-input twitter" type="radio" name="engine" />
    <span class="radio-tile twitter">
      <span class="radio-icon">
        <svg
          class="twitter"
          height="30px"
          width="30px"
          viewBox="0 0 48 48"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"
          ></path>
        </svg>
      </span>
    </span>
  </label>

  <label>
    <input class="radio-input discord" type="radio" name="engine" />
    <span class="radio-tile discord">
      <span class="radio-icon">
        <svg
          class="discord"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 48 48"
          width="30px"
          height="30px"
        >
          <path
            d="M40,12c0,0-4.585-3.588-10-4l-0.488,0.976C34.408,10.174,36.654,11.891,39,14c-4.045-2.065-8.039-4-15-4s-10.955,1.935-15,4c2.346-2.109,5.018-4.015,9.488-5.024L18,8c-5.681,0.537-10,4-10,4s-5.121,7.425-6,22c5.162,5.953,13,6,13,6l1.639-2.185C13.857,36.848,10.715,35.121,8,32c3.238,2.45,8.125,5,16,5s12.762-2.55,16-5c-2.715,3.121-5.857,4.848-8.639,5.815L33,40c0,0,7.838-0.047,13-6C45.121,19.425,40,12,40,12z M17.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C21,28.209,19.433,30,17.5,30z M30.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C34,28.209,32.433,30,30.5,30z"
          ></path>
        </svg>
      </span>
    </span>
  </label>
</div>

<style>
/* From Uiverse.io by Tsiangana  - Tags: twitter, instagram, modern, radio, creative */
.radio-inputs {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 350px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-inputs > * {
  margin: 6px;
}

.instagram:checked + .radio-tile {
  border-color: #cc39a4;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #cc39a4;
}

.instagram:checked + .radio-tile:before {
  transform: scale(1);
  opacity: 1;
  background-color: #cc39a4;
  border-color: #cc39a4;
}

.instagram:checked + .radio-tile .radio-icon svg {
  fill: #fff;
}

.instagram:checked + .radio-tile .radio-label {
  color: #cc39a4;
}

.instagram:focus + .radio-tile {
  background-color: #cc39a4;
  border-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
}
.instagram:checked + .radio-tile {
  background-color: #cc39a4;
  border-color: #fff;
}

.instagram:focus + .radio-tile:before {
  transform: scale(1);
  opacity: 1;
}

/*  Twitter */
.twitter:checked + .radio-tile {
  border-color: #03a9f4;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #03a9f4;
}

.twitter:checked + .radio-tile:before {
  transform: scale(1);
  opacity: 1;
  background-color: #03a9f4;
  border-color: #03a9f4;
}

.twitter:checked + .radio-tile .radio-icon svg {
  fill: #fff;
}

.twitter:checked + .radio-tile .radio-label {
  color: #03a9f4;
}

.twitter:focus + .radio-tile {
  background-color: #03a9f4;
  border-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
}
.twitter:checked + .radio-tile {
  background-color: #03a9f4;
  border-color: #fff;
}

.twitter:focus + .radio-tile:before {
  transform: scale(1);
  opacity: 1;
}
/* discord */
.discord:checked + .radio-tile {
  border-color: #8c9eff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #8c9eff;
}

.discord:checked + .radio-tile:before {
  transform: scale(1);
  opacity: 1;
  background-color: #8c9eff;
  border-color: #8c9eff;
}

.discord:checked + .radio-tile .radio-icon svg {
  fill: #fff;
}

.discord:checked + .radio-tile .radio-label {
  color: #8c9eff;
}

.discord:focus + .radio-tile {
  background-color: #8c9eff;
  border-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
}
.discord:checked + .radio-tile {
  background-color: #8c9eff;
  border-color: #fff;
}

.discord:focus + .radio-tile:before {
  transform: scale(1);
  opacity: 1;
}

.radio-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  min-height: 80px;
  border-radius: 0.5rem;
  border: 2px solid #b5bfd9;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transition: 0.15s ease;
  cursor: pointer;
  position: relative;
}

.instagram:hover {
  border-color: #cc39a4;
}
.twitter:hover {
  border-color: #03a9f4;
}
.discord:hover {
  border-color: #8c9eff;
}

.radio-tile:hover:before {
  transform: scale(1);
  opacity: 1;
}

.radio-icon svg {
  width: 2rem;
  height: 2rem;
}
.instagram {
  fill: #cc39a4;
}
.twitter {
  fill: #03a9f4;
}
.discord {
  fill: #8c9eff;
}

.radio-label {
  color: #707070;
  transition: 0.375s ease;
  text-align: center;
  font-size: 13px;
}

.radio-input {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

</style>
    

================================================
FILE: Radio-buttons/WerlynRodriguez_fuzzy-yak-55.html
================================================
<div class="radio">
      <label>
        <input checked="" value="1" name="radio" type="radio">
        <span>Cyber Punk</span>
        <div class="rotor">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </label>
      <label>
        <input value="2" name="radio" type="radio">
        <span>Solar Punk</span>
        <div class="rotor">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </label>
      <label>
        <input value="3" name="radio" type="radio">
        <span>Steam Punk</span>
        <div class="rotor">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </label>
    </div>
<style>
/* From Uiverse.io by WerlynRodriguez - Tags: radio */
.radio {
  --input_size: 1.8em;
  --rotor_size: calc(var(--input_size) + 0.5em);
    /* 2em = 0.5em, 4em = 1em, 6em = 1.5em, 8em = 2em*/
  --rotor_border_size: 0.3em;
  --theme_color: #000;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

@media(prefers-color-scheme: dark) {
  .radio {
    --theme_color: #fff;
  }
}

.radio label {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 5px 0;
  font-size: calc(var(--input_size) * 0.8);
}

.radio label span {
  font-family: monospace;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: normal;
  word-spacing: 0.1em;
  color: var(--theme_color);
}

.radio input {
  z-index: 1;
  width: var(--input_size);
  height: var(--input_size);
  cursor: pointer;
  transition: all 0.3s ease-out;
}

/* The rotor is all the circles rotating at the input */
.radio .rotor {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--rotor_size);
  height: var(--rotor_size);
  margin: 0 -14px;
  transform: scale(0.3) rotate(-180deg);
  opacity: 0;
  transition: all 0.6s ease-out;
}

.radio input:checked ~ .rotor {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.radio label input ~ span {
  position: relative;
  top: 10px;
  padding: 0.5em 1em;
  border: calc(var(--rotor_border_size) / 2) solid transparent;
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  transition: all 0.3s ease-out;
}

.radio input:checked ~ span {
  border: calc(var(--rotor_border_size) / 2) solid var(--theme_color);
  background-size: cover;
  background-blend-mode: difference;
  font-style: italic;
  filter: drop-shadow(0px 0px 0.2em #fdfdfd);
}

.radio .rotor span:first-child {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: var(--rotor_border_size) dashed var(--theme_color);
  animation: rotate 2s linear infinite;
  filter: drop-shadow(0px 0px 0.2em #fdfdfd);
}

.radio .rotor span:nth-child(2) {
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  border: var(--rotor_border_size) dashed #7d008b;
  border-top: var(--rotor_border_size) solid #7d008b;
  border-bottom: var(--rotor_border_size) solid #7d008b;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.31, 1.84, 0.67, -0.44);
  animation-duration: 2.35s;
}

.radio .rotor span:last-child {
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  border: var(--rotor_border_size) dashed #d303ea;
  border-top: var(--rotor_border_size) solid #d303ea;
  border-bottom: var(--rotor_border_size) solid #d303ea;
  filter: drop-shadow(0px 0px 0.2em #e600ff);
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.22, 0.94, 0.44, -0.33);
  animation-duration: 1.35s;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: Radio-buttons/WhiteNervosa_shy-walrus-83.html
================================================
<div class="customCheckBoxHolder">

    <input class="customCheckBoxInput" id="cCB1" type="checkbox">
    <label class="customCheckBoxWrapper" for="cCB1">
        <div class="customCheckBox">
            <div class="inner">Option</div>
        </div>
    </label>

    <input class="customCheckBoxInput" id="cCB2" type="checkbox">
    <label class="customCheckBoxWrapper" for="cCB2">
        <div class="customCheckBox">
            <div class="inner">Option</div>
        </div>
    </label>

    <input class="customCheckBoxInput" id="cCB3" type="checkbox">
    <label class="customCheckBoxWrapper" for="cCB3">
        <div class="customCheckBox">
            <div class="inner">Option</div>
        </div>
    </label>

</div>
<style>
/* From Uiverse.io by WhiteNervosa - Tags: checkbox, radio, multiple option */
.customCheckBoxHolder {
  margin: 5px;
  display: flex;
}

.customCheckBox {
  width: fit-content;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  padding: 2px 8px;
  background-color: rgba(0, 0, 0, 0.16);
  border-radius: 0px;
  color: rgba(255, 255, 255, 0.7);
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 300ms;
  transition-property: color, background-color, box-shadow;
  display: flex;
  height: 32px;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px 1px 1px 0px;
  outline: none;
  justify-content: center;
  min-width: 55px;
}

.customCheckBox:hover {
  background-color: #2c2c2c;
  color: white;
  box-shadow: rgba(0, 0, 0, 0.23) 0px -4px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.17) 0px 2px 4px 1px;
}

.customCheckBox .inner {
  font-size: 18px;
  font-weight: 900;
  pointer-events: none;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 300ms;
  transition-property: transform;
  transform: translateY(0px);
}

.customCheckBox:hover .inner {
  transform: translateY(-2px);
}

.customCheckBoxWrapper:first-of-type .customCheckBox {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  border-right: 0px;
}

.customCheckBoxWrapper:last-of-type .customCheckBox {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  border-left: 0px;
}

.customCheckBoxInput {
  display: none;
}

.customCheckBoxInput:checked + .customCheckBoxWrapper .customCheckBox {
  background-color: #2d6737;
  color: white;
  box-shadow: rgba(0, 0, 0, 0.23) 0px -4px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.17) 0px 2px 4px 1px;
}

.customCheckBoxInput:checked + .customCheckBoxWrapper .customCheckBox .inner {
  transform: translateY(-2px);
}

.customCheckBoxInput:checked + .customCheckBoxWrapper .customCheckBox:hover {
  background-color: #34723f;
  box-shadow: rgba(0, 0, 0, 0.26) 0px -4px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.15) 0px 3px 6px 2px;
}

.customCheckBoxWrapper .customCheckBox:hover .inner {
  transform: translateY(-2px);
}
</style>


================================================
FILE: Radio-buttons/WhiteNervosa_wicked-deer-90.html
================================================
<div class="customCheckBoxHolder">

    <input class="customCheckBoxInput" id="cCB1" type="checkbox">
    <label class="customCheckBoxWrapper" for="cCB1">
        <div class="customCheckBox">
            <div class="inner">Option</div>
        </div>
    </label>

    <input class="customCheckBoxInput" id="cCB2" type="checkbox">
    <label class="customCheckBoxWrapper" for="cCB2">
        <div class="customCheckBox">
            <div class="inner">Option</div>
        </div>
    </label>

    <input class="customCheckBoxInput" id="cCB3" type="checkbox">
    <label class="customCheckBoxWrapper" for="cCB3">
        <div class="customCheckBox">
            <div class="inner">Option</div>
        </div>
    </label>

</div>
<style>
/* From Uiverse.io by WhiteNervosa - Tags: radio */
.customCheckBoxHolder {
  margin: 5px;
  display: flex;
}

.customCheckBox {
  width: fit-content;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  padding: 2px 8px;
  background-color: rgba(0, 0, 0, 0.16);
  border-radius: 0px;
  color: rgba(255, 255, 255, 0.7);
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 300ms;
  transition-property: color, background-color, box-shadow;
  display: flex;
  height: 32px;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px 1px 1px 0px;
  outline: none;
  justify-content: center;
  min-width: 55px;
}

.customCheckBox:hover {
  background-color: #2c2c2c;
  color: white;
  box-shadow: rgba(0, 0, 0, 0.23) 0px -4px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.17) 0px 2px 4px 1px;
}

.customCheckBox .inner {
  font-size: 18px;
  font-weight: 900;
  pointer-events: none;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 300ms;
  transition-property: transform;
  transform: translateY(0px);
}

.customCheckBox:hover .inner {
  transform: translateY(-2px);
}

.customCheckBoxWrapper:first-of-type .customCheckBox {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  border-right: 0px;
}

.customCheckBoxWrapper:last-of-type .customCheckBox {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  border-left: 0px;
}

.customCheckBoxInput {
  display: none;
}

.customCheckBoxInput:checked + .customCheckBoxWrapper .customCheckBox {
  background-color: #2d6737;
  color: white;
  box-shadow: rgba(0, 0, 0, 0.23) 0px -4px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.17) 0px 2px 4px 1px;
}

.customCheckBoxInput:checked + .customCheckBoxWrapper .customCheckBox .inner {
  transform: translateY(-2px);
}

.customCheckBoxInput:checked + .customCheckBoxWrapper .customCheckBox:hover {
  background-color: #34723f;
  box-shadow: rgba(0, 0, 0, 0.26) 0px -4px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.15) 0px 3px 6px 2px;
}

.customCheckBoxWrapper .customCheckBox:hover .inner {
  transform: translateY(-2px);
}
</style>


================================================
FILE: Radio-buttons/XuYeean_angry-donkey-87.html
================================================
<div class="radio-input">
      <div class="radio">
        <input checked="" value="value-1" name="future" id="value-1" type="radio" class="input">
        <label for="value-1">
          <div class="center">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </label>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="block"></div>
      </div>
      <div class="radio">
        <input value="value-2" name="future" id="value-2" type="radio" class="input">
        <label for="value-2">
          <div class="center">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </label>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="block"></div>
      </div>
      <div class="radio">
        <input value="value-3" name="future" id="value-3" type="radio" class="input">
        <label for="value-3">
          <div class="center">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </label>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="block"></div>
      </div>
    </div>
<style>
/* From Uiverse.io by XuYeean - Tags: radio */
.radio-input {
  display: flex;
  max-width: 300px;
  justify-content: space-around;
  align-items: center;
  flex: 1;
}

.radio-input > .radio {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
}

.input {
  z-index: 1;
  appearance: none;
  width: 28px;
  height: 28px;
  border: 2px solid #48e9ff88;
  transform-origin: center;
  transform: rotateX(120deg) rotateZ(45deg);
  transition: all 0.4s ease-in-out;
}

.input:hover:not(.input:checked) {
  animation: light 8s ease-in-out forwards infinite alternate;
}

.input:checked {
  animation: Scale 2.8s ease-in-out forwards infinite alternate;
  box-shadow: 0 0 40px #48e9ff, inset 0 0 4px #48e9ff;
}

@keyframes light {
  50% {
    box-shadow: 0 0 40px #48e9ff, inset 0 0 8px #48e9ff;
  }
}

label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  margin: auto;
  transition: all 0.4s ease-in-out;
  transform: rotateX(120deg) rotateZ(0deg);
  opacity: 0;
  cursor: pointer;
}

label .center > div {
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 0;
}

.input:checked + label .center > div {
  opacity: 1;
}

label .center > div:nth-child(1) {
  bottom: 0;
  right: 0;
  border-right: 1px solid #48e9ff;
  border-bottom: 1px solid #48e9ff;
}

label .center > div:nth-child(2) {
  right: 0;
  border-right: 1px solid #48e9ff;
  border-top: 1px solid #48e9ff;
}

label .center > div:nth-child(3) {
  bottom: 0;
  border-left: 1px solid #48e9ff;
  border-bottom: 1px solid #48e9ff;
}

label .center > div:nth-child(4) {
  left: 0;
  border-left: 1px solid #48e9ff;
  border-top: 1px solid #48e9ff;
}

.input:checked + label {
  opacity: 1;
  width: 40px;
  height: 40px;
  transform: rotateX(120deg) rotateZ(45deg);
}

.input:checked ~ .top {
  transform: rotateX(120deg) rotateZ(45deg) translateZ(12px) !important;
}

.top,
.bottom {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: rotateX(120deg) rotateZ(45deg) translateZ(0px);
}

.input:checked ~ .top,
.input:checked ~ .bottom {
  background: #48e9ff;
  transition: all 0.4s ease-in-out;
  opacity: 1;
}

.input:checked ~ .bottom {
  transform: rotateX(120deg) rotateZ(45deg) translateZ(-24px);
  z-index: -1;
}

</style>


================================================
FILE: Radio-buttons/Yaya12085_empty-badger-73.html
================================================
<div class="radio-input">
  <div class="info">
  <span class="question">What does CSS stand for?</span>
  <span class="steps">3/10</span>
   </div>
  <input type="radio" id="value-1" name="value-radio" value="value-1">
  <label for="value-1">Computer Style Sheets</label>
  <input type="radio" id="value-2" name="value-radio" value="value-2">
  <label for="value-2">Cascading Style Sheets</label>
  <input type="radio" id="value-3" name="value-radio" value="value-3">
  <label for="value-3">Creative Style Sheets</label>
   <span class="result success">Congratulations!</span>
   <span class="result error">Bad answer</span>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: progress, card, shadow, radio, quizz, select */
.radio-input input {
  display: none;
}

.radio-input {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: #fff;
  color: #000;
  border-radius: 10px;
  box-shadow: 0px 87px 78px -39px rgba(0,0,0,0.4);
  width: 320px;
}

.info {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.question {
  color: rgb(49, 49, 49);
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 800;
}

.steps {
  background-color: rgb(0, 0, 0);
  padding: 4px;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  line-height: 12px;
  font-weight: 600;
}

.radio-input  label {
  display: flex;
  background-color: #fff;
  padding: 14px;
  margin: 8px 0 0 0;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(187, 187, 187, 0.164);
  color: #000;
  transition: .3s ease;
}

.radio-input  label:hover {
  background-color: rgba(24, 24, 24, 0.13);
  border: 1px solid #bbb;
}

.result {
  margin-top: 10px;
  font-weight: 600;
  font-size: 12px;
  display: none;
  transition: display .4s ease;
}

.result.success {
  color: green;
}

.result.error {
  color: red;
}

.radio-input input:checked + label {
  border-color: red;
  color: red;
}

.radio-input input[value="value-2"]:checked + label {
  border-color: rgb(22, 245, 22);
  color: rgb(16, 184, 16);
}

.radio-input:has(input[value="value-2"]:checked) .result.success {
  display: flex;
}

.radio-input:has(input:not([value="value-2"]):checked ) .result.error {
  display: flex;
}
</style>


================================================
FILE: Radio-buttons/Yaya12085_green-wasp-49.html
================================================
<div class="radio-input">
  <label>
    <input
      value="value-1"
      checked=""
      name="value-radio"
      id="value-1"
      type="radio"
    />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="xMidYMid"
      viewBox="0 0 256 256"
    >
      <defs>
        <linearGradient x1="37%" y1="51%" x2="178.1%" y2="41.9%" id="a">
          <stop stop-color="#FC801D" offset="9%"></stop>
          <stop stop-color="#B07F61" offset="23%"></stop>
          <stop stop-color="#577DB3" offset="41%"></stop>
          <stop stop-color="#1E7CE6" offset="53%"></stop>
          <stop stop-color="#087CFA" offset="59%"></stop>
        </linearGradient>
        <linearGradient x1="73.6%" y1="114.8%" x2="35.6%" y2="1.1%" id="b">
          <stop stop-color="#FE2857" offset="0%"></stop>
          <stop stop-color="#CB3979" offset="8%"></stop>
          <stop stop-color="#9E4997" offset="16%"></stop>
          <stop stop-color="#7557B2" offset="25%"></stop>
          <stop stop-color="#5362C8" offset="34%"></stop>
          <stop stop-color="#386CDA" offset="44%"></stop>
          <stop stop-color="#2373E8" offset="54%"></stop>
          <stop stop-color="#1478F2" offset="66%"></stop>
          <stop stop-color="#0B7BF8" offset="79%"></stop>
          <stop stop-color="#087CFA" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="28.6%" y1="23.6%" x2="81.8%" y2="129.8%" id="c">
          <stop stop-color="#FE2857" offset="0%"></stop>
          <stop stop-color="#FE295F" offset="8%"></stop>
          <stop stop-color="#FF2D76" offset="21%"></stop>
          <stop stop-color="#FF318C" offset="30%"></stop>
          <stop stop-color="#EA3896" offset="38%"></stop>
          <stop stop-color="#B248AE" offset="55%"></stop>
          <stop stop-color="#5A63D6" offset="79%"></stop>
          <stop stop-color="#087CFA" offset="100%"></stop>
        </linearGradient>
      </defs>
      <path fill="url(#a)" d="M40.5 180.6 2.9 150.8l22.1-41 33.3 11.1z"></path>
      <path fill="#087CFA" d="m256 68.2-4.6 148.3-98.6 39.5-53.7-34.7z"></path>
      <path fill="url(#b)" d="m256 68.2-48.8 47.6L144.5 39l31-34.8z"></path>
      <path
        fill="url(#c)"
        d="m99.1 221.3-78.5 28.4 16.5-57.5 21.2-71.3L0 101.4 37.1 0l83.8 9.9 86.3 105.9z"
      ></path>
      <path d="M49.1 48h160v160h-160z"></path>
      <path
        d="M69 177.8h60v10H69v-10ZM99 79V68H69.2v11h8.4v37.7h-8.4v11H99v-11h-8.3V79H99Zm28.5 49.4.2.1c-4.1.2-8.1-.8-11.8-2.6a27 27 0 0 1-7.7-6.3l8.2-9.2c1.5 1.7 3.2 3.1 5.2 4.3 1.7 1.1 3.7 1.7 5.7 1.6 2.2.2 4.3-.7 5.8-2.3a11 11 0 0 0 2.2-7.5V68h13.3v39a27 27 0 0 1-1.5 9.4c-1.7 5-5.7 9-10.8 10.6-2.8 1-5.8 1.5-8.8 1.4Z"
        fill="#FFF"
      ></path>
    </svg>

    <span>IntelliJ IDE</span>
  </label>
  <label>
    <input value="value-2" name="value-radio" id="value-2" type="radio" />
    <svg
      viewBox="0 0 256 254"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="256"
      height="254"
      preserveAspectRatio="xMidYMid"
    >
      <defs>
        <linearGradient id="c" x1="50%" x2="50%" y1="0%" y2="100%">
          <stop offset="0%" stop-color="#FFF"></stop>
          <stop offset="100%" stop-color="#FFF" stop-opacity="0"></stop>
        </linearGradient>
        <path
          id="a"
          d="M180.828 252.605a15.872 15.872 0 0 0 12.65-.486l52.501-25.262a15.94 15.94 0 0 0 9.025-14.364V41.197a15.939 15.939 0 0 0-9.025-14.363l-52.5-25.263a15.877 15.877 0 0 0-18.115 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233 100.507 91.695a15.853 15.853 0 0 0 5.464 3.571Zm10.464-183.649-76.262 57.889 76.262 57.888V68.956Z"
        ></path>
      </defs>
      <mask id="b" fill="#fff"></mask>
      <path
        fill="#0065A9"
        d="M246.135 26.873 193.593 1.575a15.885 15.885 0 0 0-18.123 3.08L3.466 161.482c-4.626 4.219-4.62 11.502.012 15.714l14.05 12.772a10.625 10.625 0 0 0 13.569.604L238.229 33.436c6.949-5.271 16.93-.315 16.93 8.407v-.61a15.938 15.938 0 0 0-9.024-14.36Z"
      ></path>
      <path
        fill="#007ACC"
        d="m246.135 226.816-52.542 25.298a15.887 15.887 0 0 1-18.123-3.08L3.466 92.207c-4.626-4.218-4.62-11.502.012-15.713l14.05-12.773a10.625 10.625 0 0 1 13.569-.603l207.132 157.135c6.949 5.271 16.93.315 16.93-8.408v.611a15.939 15.939 0 0 1-9.024 14.36Z"
      ></path>
      <path
        fill="#1F9CF0"
        d="M193.428 252.134a15.892 15.892 0 0 1-18.125-3.083c5.881 5.88 15.938 1.715 15.938-6.603V11.273c0-8.318-10.057-12.483-15.938-6.602a15.892 15.892 0 0 1 18.125-3.084l52.533 25.263a15.937 15.937 0 0 1 9.03 14.363V212.51c0 6.125-3.51 11.709-9.03 14.363l-52.533 25.262Z"
      ></path>
      <path
        fill="url(#c)"
        fill-opacity="0"
        d="M180.828 252.605a15.874 15.874 0 0 0 12.65-.486l52.5-25.263a15.938 15.938 0 0 0 9.026-14.363V41.197a15.939 15.939 0 0 0-9.025-14.363L193.477 1.57a15.877 15.877 0 0 0-18.114 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233 100.506 91.695a15.857 15.857 0 0 0 5.465 3.571Zm10.464-183.65-76.262 57.89 76.262 57.888V68.956Z"
      ></path>
    </svg>

    <span>Vs Code</span>
  </label>
  <label>
    <input value="value-3" name="value-radio" id="value-3" type="radio" />
    <svg
      preserveAspectRatio="xMidYMid"
      xmlns="http://www.w3.org/2000/svg"
      height="332"
      width="256"
      viewBox="0 0 256 332"
    >
      <defs>
        <linearGradient
          id="a"
          y2="39.597%"
          x2="63.68%"
          y1="58.68%"
          x1="55.117%"
        >
          <stop offset="0%" stop-color="#FF9700"></stop>
          <stop offset="53%" stop-color="#F48E00"></stop>
          <stop offset="100%" stop-color="#D06F00"></stop>
        </linearGradient>
      </defs>
      <path
        fill="url(#a)"
        d="M255.288 166.795c0-3.887-2.872-6.128-6.397-5.015L6.397 238.675C2.865 239.796 0 243.86 0 247.74v78.59c0 3.887 2.865 6.135 6.397 5.015l242.494-76.888c3.525-1.12 6.397-5.185 6.397-9.071v-78.59Z"
      ></path>
      <path
        fill="#FF9800"
        d="M0 164.291c0 3.887 2.865 7.95 6.397 9.071l242.53 76.902c3.531 1.12 6.397-1.127 6.397-5.007V166.66c0-3.88-2.866-7.944-6.397-9.064L6.397 80.694C2.865 79.574 0 81.814 0 85.7v78.59Z"
      ></path>
      <path
        fill="#FF9800"
        d="M255.288 5.302c0-3.886-2.872-6.135-6.397-5.014L6.397 77.176C2.865 78.296 0 82.36 0 86.247v78.59c0 3.887 2.865 6.128 6.397 5.014l242.494-76.895c3.525-1.12 6.397-5.184 6.397-9.064V5.302Z"
      ></path>
    </svg>
    <span>Sublime Text</span>
  </label>
  <span class="selection"></span>
</div>

<style>
/* From Uiverse.io by Yaya12085  - Tags: radio, select, animated, click animation */
.radio-input input {
  display: none;
}

.radio-input {
  --container_height: 300px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  padding: 10px;
  gap: var(--padding);
  background-color: #fff;
  color: #000000;
  height: var(--container_height);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
}

.radio-input label {
  width: 100%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  z-index: 1;
  font-weight: 600;
  font-size: 14px;
  height: 100%;
}
.radio-input label svg {
  width: 30px;
  height: 30px;
}

.selection {
  display: none;
  position: absolute;
  height: calc(var(--container_height) / 3 - 12px);
  z-index: 0;
  inset: 6px;
  border-radius: 10px;
  transition: 0.15s ease;
}

.radio-input label:has(input:checked) {
  color: #fff;
}

.radio-input label:has(input:checked) ~ .selection {
  display: inline-block;
}
.radio-input label:has(input:checked) svg {
  stroke: white;
  stroke-width: 10px;
}

.radio-input label:nth-child(1):has(input:checked) ~ .selection {
  transform: translateY(calc(var(--container_height) * 0 / 3));
  background-color: #000000;
}

.radio-input label:nth-child(2):has(input:checked) ~ .selection {
  transform: translateY(calc(var(--container_height) * 1 / 3));
  background-color: #1f9cf1;
}

.radio-input label:nth-child(3):has(input:checked) ~ .selection {
  transform: translateY(calc(var(--container_height) * 2 / 3));
  background-color: #ff9801;
}

</style>
    

================================================
FILE: Radio-buttons/Yaya12085_orange-eagle-19.html
================================================
<div class="radio-input">
  <label>
  <input type="radio" id="value-1" name="value-radio" value="value-1">
  <span>Option 1</span>
  </label>
  <label>
    <input type="radio" id="value-2" name="value-radio" value="value-2">
  <span>Option 2</span>
  </label>
  <label>
    <input type="radio" id="value-3" name="value-radio" value="value-3">
  <span>Option 3</span>
  </label>
  <span class="selection"></span>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: radio */
.radio-input input {
  display: none;
}

.radio-input {
  --container_width: 300px;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 10px;
  background-color: #fff;
  color: #000000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
}

.radio-input label {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 14px;
}

.selection {
  display: none;
  position: absolute;
  height: 100%;
  width: calc(var(--container_width) / 3);
  z-index: 0;
  left: 0;
  top: 0;
  transition: .15s ease;
}

.radio-input label:has(input:checked) {
  color: #fff;
}

.radio-input label:has(input:checked) ~ .selection {
  background-color: rgb(11 117 223);
  display: inline-block;
}

.radio-input label:nth-child(1):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 0/3));
}

.radio-input label:nth-child(2):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 1/3));
}

.radio-input label:nth-child(3):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 2/3));
}
</style>


================================================
FILE: Radio-buttons/Yaya12085_rude-mouse-79.html
================================================
<div class="radio-inputs">
  <label class="radio">
    <input type="radio" name="radio" checked="">
    <span class="name">HTML</span>
  </label>
  <label class="radio">
    <input type="radio" name="radio">
    <span class="name">React</span>
  </label>
      
  <label class="radio">
    <input type="radio" name="radio">
    <span class="name">Vue</span>
  </label>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: radio, select, tab */
.radio-inputs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.5rem;
  background-color: #EEE;
  box-sizing: border-box;
  box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
  padding: 0.25rem;
  width: 300px;
  font-size: 14px;
}

.radio-inputs .radio {
  flex: 1 1 auto;
  text-align: center;
}

.radio-inputs .radio input {
  display: none;
}

.radio-inputs .radio .name {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: none;
  padding: .5rem 0;
  color: rgba(51, 65, 85, 1);
  transition: all .15s ease-in-out;
}

.radio-inputs .radio input:checked + .name {
  background-color: #fff;
  font-weight: 600;
}
</style>


================================================
FILE: Radio-buttons/Yaya12085_silent-liger-85.html
================================================
<div class="radio-inputs">
		<label>
			<input class="radio-input" type="radio" name="engine">
				<span class="radio-tile">
					<span class="radio-icon">
						<svg stroke="currentColor" xml:space="preserve" viewBox="0 0 493.407 493.407" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1" width="200px" height="200px" fill="none"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path d="M488.474,270.899c-12.647-37.192-47.527-62.182-86.791-62.182c-5.892,0-11.728,0.749-17.499,1.879l-34.324-100.94 c-1.71-5.014-6.417-8.392-11.721-8.392H315.02c-6.836,0-12.382,5.547-12.382,12.382c0,6.836,5.545,12.381,12.382,12.381h14.252 l12.462,36.645H206.069v-21.998l21.732-2.821c3.353-0.434,6.135-3.079,6.585-6.585c0.54-4.183-2.402-8.013-6.585-8.553l-68.929-8.94 c-1.362-0.168-2.853-0.185-4.281,0c-9.116,1.186-15.55,9.537-14.373,18.653c1.185,9.118,9.537,15.55,18.653,14.364l22.434-2.909 v26.004l-41.255,52.798c-14.059-8.771-30.592-13.93-48.349-13.93C41.135,208.757,0,249.885,0,300.443 c0,50.565,41.135,91.7,91.701,91.7c44.882,0,82.261-32.437,90.113-75.095h33.605v12.647h-5.909c-4.563,0-8.254,3.693-8.254,8.254 c0,4.563,3.691,8.254,8.254,8.254h36.58c4.563,0,8.254-3.691,8.254-8.254c0-4.561-3.691-8.254-8.254-8.254h-5.908v-12.647h5.545 c3.814,0,7.409-1.756,9.755-4.756l95.546-122.267l9.776,28.729c-17.854,8.892-32.444,22.965-41.409,41.168 c-10.825,21.973-12.438,46.842-4.553,70.034c12.662,37.201,47.55,62.189,86.815,62.189c10.021,0,19.951-1.645,29.519-4.9 c23.191-7.885,41.926-24.329,52.744-46.302C494.746,318.966,496.367,294.09,488.474,270.899z M143.46,258.542 c7.698,9.488,12.776,21.014,14.349,33.742h-40.717L143.46,258.542z M91.701,367.379c-36.912,0-66.938-30.026-66.938-66.936 c0-36.904,30.026-66.923,66.938-66.923c12.002,0,23.11,3.427,32.864,8.981l-42.619,54.54c-2.917,3.732-3.448,8.794-1.378,13.05 c2.08,4.256,6.4,6.957,11.134,6.957h64.592C148.861,345.906,122.84,367.379,91.701,367.379z M239.69,292.284h-56.707 c-1.839-20.667-10.586-39.329-23.868-53.782l22.191-28.398v32.47c0,6.836,5.545,12.381,12.381,12.381 c6.836,0,12.382-5.545,12.382-12.381v-55.138h115.553L239.69,292.284z M383.546,285.618l6.384,18.79 c1.75,5.151,6.562,8.392,11.721,8.392c1.321,0,2.667-0.21,3.99-0.661c6.471-2.201,9.93-9.23,7.729-15.711l-6.336-18.637 c7.731,1.838,14.221,7.312,16.855,15.083c2.024,5.94,1.613,12.309-1.161,17.935c-2.773,5.626-7.569,9.835-13.509,11.858 c-12.068,4.078-25.716-2.717-29.785-14.671C376.735,300.055,378.597,291.689,383.546,285.618z M461.712,329.994 c-7.908,16.042-21.579,28.044-38.507,33.808c-6.997,2.378-14.244,3.578-21.547,3.578c-28.664,0-54.129-18.249-63.374-45.399 c-5.757-16.926-4.571-35.081,3.328-51.112c6.047-12.27,15.494-22.112,27.165-28.666l8.981,26.416 c-13.414,10.108-19.644,27.931-13.954,44.691c5.522,16.227,20.732,27.124,37.853,27.124c4.378,0,8.707-0.725,12.882-2.145 c10.108-3.434,18.282-10.607,22.999-20.184c4.723-9.585,5.425-20.435,1.982-30.551c-5.545-16.299-21.57-26.787-38.289-26.818 l-8.997-26.472c3.128-0.453,6.28-0.783,9.448-0.783c28.658,0,54.112,18.242,63.351,45.399 C470.788,295.799,469.613,313.96,461.712,329.994z"></path> </g></svg>
					</span>
					<span class="radio-label">Bicycle</span>
				</span>
		</label>
		<label>
			<input checked="" class="radio-input" type="radio" name="engine">
			<span class="radio-tile">
				<span class="radio-icon">
   				<svg stroke="currentColor" xml:space="preserve" viewBox="0 0 467.168 467.168" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1" fill="none"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M76.849,210.531C34.406,210.531,0,244.937,0,287.388c0,42.438,34.406,76.847,76.849,76.847 c30.989,0,57.635-18.387,69.789-44.819l18.258,14.078c0,0,134.168,0.958,141.538-3.206c0,0-16.65-45.469,4.484-64.688 c2.225-2.024,5.021-4.332,8.096-6.777c-3.543,8.829-5.534,18.45-5.534,28.558c0,42.446,34.403,76.846,76.846,76.846 c42.443,0,76.843-34.415,76.843-76.846c0-42.451-34.408-76.849-76.843-76.849c-0.697,0-1.362,0.088-2.056,0.102 c5.551-3.603,9.093-5.865,9.093-5.865l-5.763-5.127c0,0,16.651-3.837,12.816-12.167c-3.848-8.33-44.19-58.28-44.19-58.28 s7.146-15.373-7.634-26.261l-7.098,15.371c0,0-18.093-12.489-25.295-10.084c-7.205,2.398-18.005,3.603-21.379,8.884l-3.358,3.124 c0,0-0.95,5.528,4.561,13.693c0,0,55.482,17.05,58.119,29.537c0,0,3.848,7.933-12.728,9.844l-3.354,4.328l-8.896,0.479 l-16.082-36.748c0,0-15.381,4.082-23.299,10.323l1.201,6.24c0,0-64.599-43.943-125.362,21.137c0,0-44.909,12.966-76.37-26.897 c0,0-0.479-12.968-76.367-10.565l5.286,5.524c0,0-5.286,0.479-7.444,3.841c-2.158,3.358,1.2,6.961,18.494,6.961 c0,0,39.153,44.668,69.17,42.032l42.743,20.656l18.975,32.42c0,0,0.034,2.785,0.23,7.045c-4.404,0.938-9.341,1.979-14.579,3.09 C139.605,232.602,110.832,210.531,76.849,210.531z M390.325,234.081c29.395,0,53.299,23.912,53.299,53.299 c0,29.39-23.912,53.294-53.299,53.294c-29.394,0-53.294-23.912-53.294-53.294C337.031,257.993,360.932,234.081,390.325,234.081z M76.849,340.683c-29.387,0-53.299-23.913-53.299-53.295c0-29.395,23.912-53.299,53.299-53.299 c22.592,0,41.896,14.154,49.636,34.039c-28.26,6.011-56.31,11.99-56.31,11.99l3.619,19.933l55.339-2.444 C124.365,322.116,102.745,340.683,76.849,340.683z M169.152,295.835c1.571,5.334,3.619,9.574,6.312,11.394l-24.696,0.966 c1.058-3.783,1.857-7.666,2.338-11.662L169.152,295.835z"></path> </g> </g> </g></svg>
				</span>
				<span class="radio-label">Motorbike</span>
			</span>
		</label>
		<label>
			<input class="radio-input" type="radio" name="engine">
			<span class="radio-tile">
				<span class="radio-icon">
    			<svg stroke="currentColor" xml:space="preserve" viewBox="0 0 324.018 324.017" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1" fill="none"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M317.833,197.111c3.346-11.148,2.455-20.541-2.65-27.945c-9.715-14.064-31.308-15.864-35.43-16.076l-8.077-4.352 l-0.528-0.217c-8.969-2.561-42.745-3.591-47.805-3.733c-7.979-3.936-14.607-7.62-20.475-10.879 c-20.536-11.413-34.107-18.958-72.959-18.958c-47.049,0-85.447,20.395-90.597,23.25c-2.812,0.212-5.297,0.404-7.646,0.59 l-6.455-8.733l7.34,0.774c2.91,0.306,4.267-1.243,3.031-3.459c-1.24-2.216-4.603-4.262-7.519-4.57l-23.951-2.524 c-2.91-0.305-4.267,1.243-3.026,3.459c1.24,2.216,4.603,4.262,7.519,4.57l3.679,0.386l8.166,11.05 c-13.823,1.315-13.823,2.139-13.823,4.371c0,18.331-2.343,22.556-2.832,23.369L0,164.443v19.019l2.248,2.89 c-0.088,2.775,0.823,5.323,2.674,7.431c5.981,6.804,19.713,7.001,21.256,7.001c4.634,0,14.211-2.366,20.78-4.153 c-0.456-0.781-0.927-1.553-1.3-2.392c-0.36-0.809-0.603-1.668-0.885-2.517c-0.811-2.485-1.362-5.096-1.362-7.845 c0-14.074,11.449-25.516,25.515-25.516s25.52,11.446,25.52,25.521c0,6.068-2.221,11.578-5.773,15.964 c-0.753,0.927-1.527,1.828-2.397,2.641c-1.022,0.958-2.089,1.859-3.254,2.641c29.332,0.109,112.164,0.514,168.708,1.771 c-0.828-0.823-1.533-1.771-2.237-2.703c-0.652-0.854-1.222-1.75-1.761-2.688c-2.164-3.744-3.5-8.025-3.5-12.655 c0-14.069,11.454-25.513,25.518-25.513c14.064,0,25.518,11.449,25.518,25.513c0,5.126-1.553,9.875-4.152,13.878 c-0.605,0.922-1.326,1.755-2.04,2.594c-0.782,0.922-1.616,1.781-2.527,2.584c5.209,0.155,9.699,0.232,13.546,0.232 c19.563,0,23.385-1.688,23.861-5.018C324.114,202.108,324.472,199.602,317.833,197.111z"></path> <path d="M52.17,195.175c3.638,5.379,9.794,8.922,16.756,8.922c0.228,0,0.44-0.062,0.663-0.073c2.576-0.083,5.043-0.61,7.291-1.574 c1.574-0.678,2.996-1.6,4.332-2.636c4.782-3.702,7.927-9.429,7.927-15.933c0-11.144-9.066-20.216-20.212-20.216 s-20.213,9.072-20.213,20.216c0,2.263,0.461,4.411,1.149,6.446c0.288,0.85,0.616,1.673,1.015,2.471 C51.279,193.606,51.667,194.434,52.17,195.175z"></path> <path d="M269.755,209.068c2.656,0,5.173-0.549,7.503-1.481c1.589-0.642,3.06-1.491,4.422-2.495 c1.035-0.767,1.988-1.616,2.863-2.559c3.34-3.604,5.432-8.389,5.432-13.681c0-11.144-9.071-20.21-20.215-20.21 s-20.216,9.066-20.216,20.21c0,4.878,1.812,9.3,4.702,12.801c0.818,0.989,1.719,1.89,2.708,2.713 c1.311,1.088,2.729,2.024,4.293,2.755C263.836,208.333,266.704,209.068,269.755,209.068z"></path> </g> </g> </g></svg>
				</span>
				<span class="radio-label">Car</span>
			</span>
		</label>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: icon, radio, svg, vehicle */
.radio-inputs {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 350px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-inputs > * {
  margin: 6px;
}

.radio-input:checked + .radio-tile {
  border-color: #2260ff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #2260ff;
}

.radio-input:checked + .radio-tile:before {
  transform: scale(1);
  opacity: 1;
  background-color: #2260ff;
  border-color: #2260ff;
}

.radio-input:checked + .radio-tile .radio-icon svg {
  fill: #2260ff;
}

.radio-input:checked + .radio-tile .radio-label {
  color: #2260ff;
}

.radio-input:focus + .radio-tile {
  border-color: #2260ff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
}

.radio-input:focus + .radio-tile:before {
  transform: scale(1);
  opacity: 1;
}

.radio-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  min-height: 80px;
  border-radius: 0.5rem;
  border: 2px solid #b5bfd9;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transition: 0.15s ease;
  cursor: pointer;
  position: relative;
}

.radio-tile:before {
  content: "";
  position: absolute;
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid #b5bfd9;
  background-color: #fff;
  border-radius: 50%;
  top: 0.25rem;
  left: 0.25rem;
  opacity: 0;
  transform: scale(0);
  transition: 0.25s ease;
}

.radio-tile:hover {
  border-color: #2260ff;
}

.radio-tile:hover:before {
  transform: scale(1);
  opacity: 1;
}

.radio-icon svg {
  width: 2rem;
  height: 2rem;
  fill: #494949;
}

.radio-label {
  color: #707070;
  transition: 0.375s ease;
  text-align: center;
  font-size: 13px;
}

.radio-input {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
</style>


================================================
FILE: Radio-buttons/Yaya12085_spicy-dingo-98.html
================================================
<div class="radio-input">
  <input value="1" name="value-radio" id="val1" type="radio">
  <label for="val1">
    <svg stroke="#ffffff" xml:space="preserve" viewBox="0 0 493.407 493.407" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1" width="200px" height="200px" fill="#ffffff"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path d="M488.474,270.899c-12.647-37.192-47.527-62.182-86.791-62.182c-5.892,0-11.728,0.749-17.499,1.879l-34.324-100.94 c-1.71-5.014-6.417-8.392-11.721-8.392H315.02c-6.836,0-12.382,5.547-12.382,12.382c0,6.836,5.545,12.381,12.382,12.381h14.252 l12.462,36.645H206.069v-21.998l21.732-2.821c3.353-0.434,6.135-3.079,6.585-6.585c0.54-4.183-2.402-8.013-6.585-8.553l-68.929-8.94 c-1.362-0.168-2.853-0.185-4.281,0c-9.116,1.186-15.55,9.537-14.373,18.653c1.185,9.118,9.537,15.55,18.653,14.364l22.434-2.909 v26.004l-41.255,52.798c-14.059-8.771-30.592-13.93-48.349-13.93C41.135,208.757,0,249.885,0,300.443 c0,50.565,41.135,91.7,91.701,91.7c44.882,0,82.261-32.437,90.113-75.095h33.605v12.647h-5.909c-4.563,0-8.254,3.693-8.254,8.254 c0,4.563,3.691,8.254,8.254,8.254h36.58c4.563,0,8.254-3.691,8.254-8.254c0-4.561-3.691-8.254-8.254-8.254h-5.908v-12.647h5.545 c3.814,0,7.409-1.756,9.755-4.756l95.546-122.267l9.776,28.729c-17.854,8.892-32.444,22.965-41.409,41.168 c-10.825,21.973-12.438,46.842-4.553,70.034c12.662,37.201,47.55,62.189,86.815,62.189c10.021,0,19.951-1.645,29.519-4.9 c23.191-7.885,41.926-24.329,52.744-46.302C494.746,318.966,496.367,294.09,488.474,270.899z M143.46,258.542 c7.698,9.488,12.776,21.014,14.349,33.742h-40.717L143.46,258.542z M91.701,367.379c-36.912,0-66.938-30.026-66.938-66.936 c0-36.904,30.026-66.923,66.938-66.923c12.002,0,23.11,3.427,32.864,8.981l-42.619,54.54c-2.917,3.732-3.448,8.794-1.378,13.05 c2.08,4.256,6.4,6.957,11.134,6.957h64.592C148.861,345.906,122.84,367.379,91.701,367.379z M239.69,292.284h-56.707 c-1.839-20.667-10.586-39.329-23.868-53.782l22.191-28.398v32.47c0,6.836,5.545,12.381,12.381,12.381 c6.836,0,12.382-5.545,12.382-12.381v-55.138h115.553L239.69,292.284z M383.546,285.618l6.384,18.79 c1.75,5.151,6.562,8.392,11.721,8.392c1.321,0,2.667-0.21,3.99-0.661c6.471-2.201,9.93-9.23,7.729-15.711l-6.336-18.637 c7.731,1.838,14.221,7.312,16.855,15.083c2.024,5.94,1.613,12.309-1.161,17.935c-2.773,5.626-7.569,9.835-13.509,11.858 c-12.068,4.078-25.716-2.717-29.785-14.671C376.735,300.055,378.597,291.689,383.546,285.618z M461.712,329.994 c-7.908,16.042-21.579,28.044-38.507,33.808c-6.997,2.378-14.244,3.578-21.547,3.578c-28.664,0-54.129-18.249-63.374-45.399 c-5.757-16.926-4.571-35.081,3.328-51.112c6.047-12.27,15.494-22.112,27.165-28.666l8.981,26.416 c-13.414,10.108-19.644,27.931-13.954,44.691c5.522,16.227,20.732,27.124,37.853,27.124c4.378,0,8.707-0.725,12.882-2.145 c10.108-3.434,18.282-10.607,22.999-20.184c4.723-9.585,5.425-20.435,1.982-30.551c-5.545-16.299-21.57-26.787-38.289-26.818 l-8.997-26.472c3.128-0.453,6.28-0.783,9.448-0.783c28.658,0,54.112,18.242,63.351,45.399 C470.788,295.799,469.613,313.96,461.712,329.994z"></path> </g></svg>
    </label>
  <input value="2" name="value-radio" id="val2" type="radio">
  <label for="val2">
   <svg stroke="#ffffff" xml:space="preserve" viewBox="0 0 467.168 467.168" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1" fill="#ffffff"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M76.849,210.531C34.406,210.531,0,244.937,0,287.388c0,42.438,34.406,76.847,76.849,76.847 c30.989,0,57.635-18.387,69.789-44.819l18.258,14.078c0,0,134.168,0.958,141.538-3.206c0,0-16.65-45.469,4.484-64.688 c2.225-2.024,5.021-4.332,8.096-6.777c-3.543,8.829-5.534,18.45-5.534,28.558c0,42.446,34.403,76.846,76.846,76.846 c42.443,0,76.843-34.415,76.843-76.846c0-42.451-34.408-76.849-76.843-76.849c-0.697,0-1.362,0.088-2.056,0.102 c5.551-3.603,9.093-5.865,9.093-5.865l-5.763-5.127c0,0,16.651-3.837,12.816-12.167c-3.848-8.33-44.19-58.28-44.19-58.28 s7.146-15.373-7.634-26.261l-7.098,15.371c0,0-18.093-12.489-25.295-10.084c-7.205,2.398-18.005,3.603-21.379,8.884l-3.358,3.124 c0,0-0.95,5.528,4.561,13.693c0,0,55.482,17.05,58.119,29.537c0,0,3.848,7.933-12.728,9.844l-3.354,4.328l-8.896,0.479 l-16.082-36.748c0,0-15.381,4.082-23.299,10.323l1.201,6.24c0,0-64.599-43.943-125.362,21.137c0,0-44.909,12.966-76.37-26.897 c0,0-0.479-12.968-76.367-10.565l5.286,5.524c0,0-5.286,0.479-7.444,3.841c-2.158,3.358,1.2,6.961,18.494,6.961 c0,0,39.153,44.668,69.17,42.032l42.743,20.656l18.975,32.42c0,0,0.034,2.785,0.23,7.045c-4.404,0.938-9.341,1.979-14.579,3.09 C139.605,232.602,110.832,210.531,76.849,210.531z M390.325,234.081c29.395,0,53.299,23.912,53.299,53.299 c0,29.39-23.912,53.294-53.299,53.294c-29.394,0-53.294-23.912-53.294-53.294C337.031,257.993,360.932,234.081,390.325,234.081z M76.849,340.683c-29.387,0-53.299-23.913-53.299-53.295c0-29.395,23.912-53.299,53.299-53.299 c22.592,0,41.896,14.154,49.636,34.039c-28.26,6.011-56.31,11.99-56.31,11.99l3.619,19.933l55.339-2.444 C124.365,322.116,102.745,340.683,76.849,340.683z M169.152,295.835c1.571,5.334,3.619,9.574,6.312,11.394l-24.696,0.966 c1.058-3.783,1.857-7.666,2.338-11.662L169.152,295.835z"></path> </g> </g> </g></svg>
  </label>
  <input value="val3" name="value-radio" id="val3" type="radio">
  <label for="val3">
    <svg stroke="#ffffff" xml:space="preserve" viewBox="0 0 324.018 324.017" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1" fill="#ffffff"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M317.833,197.111c3.346-11.148,2.455-20.541-2.65-27.945c-9.715-14.064-31.308-15.864-35.43-16.076l-8.077-4.352 l-0.528-0.217c-8.969-2.561-42.745-3.591-47.805-3.733c-7.979-3.936-14.607-7.62-20.475-10.879 c-20.536-11.413-34.107-18.958-72.959-18.958c-47.049,0-85.447,20.395-90.597,23.25c-2.812,0.212-5.297,0.404-7.646,0.59 l-6.455-8.733l7.34,0.774c2.91,0.306,4.267-1.243,3.031-3.459c-1.24-2.216-4.603-4.262-7.519-4.57l-23.951-2.524 c-2.91-0.305-4.267,1.243-3.026,3.459c1.24,2.216,4.603,4.262,7.519,4.57l3.679,0.386l8.166,11.05 c-13.823,1.315-13.823,2.139-13.823,4.371c0,18.331-2.343,22.556-2.832,23.369L0,164.443v19.019l2.248,2.89 c-0.088,2.775,0.823,5.323,2.674,7.431c5.981,6.804,19.713,7.001,21.256,7.001c4.634,0,14.211-2.366,20.78-4.153 c-0.456-0.781-0.927-1.553-1.3-2.392c-0.36-0.809-0.603-1.668-0.885-2.517c-0.811-2.485-1.362-5.096-1.362-7.845 c0-14.074,11.449-25.516,25.515-25.516s25.52,11.446,25.52,25.521c0,6.068-2.221,11.578-5.773,15.964 c-0.753,0.927-1.527,1.828-2.397,2.641c-1.022,0.958-2.089,1.859-3.254,2.641c29.332,0.109,112.164,0.514,168.708,1.771 c-0.828-0.823-1.533-1.771-2.237-2.703c-0.652-0.854-1.222-1.75-1.761-2.688c-2.164-3.744-3.5-8.025-3.5-12.655 c0-14.069,11.454-25.513,25.518-25.513c14.064,0,25.518,11.449,25.518,25.513c0,5.126-1.553,9.875-4.152,13.878 c-0.605,0.922-1.326,1.755-2.04,2.594c-0.782,0.922-1.616,1.781-2.527,2.584c5.209,0.155,9.699,0.232,13.546,0.232 c19.563,0,23.385-1.688,23.861-5.018C324.114,202.108,324.472,199.602,317.833,197.111z"></path> <path d="M52.17,195.175c3.638,5.379,9.794,8.922,16.756,8.922c0.228,0,0.44-0.062,0.663-0.073c2.576-0.083,5.043-0.61,7.291-1.574 c1.574-0.678,2.996-1.6,4.332-2.636c4.782-3.702,7.927-9.429,7.927-15.933c0-11.144-9.066-20.216-20.212-20.216 s-20.213,9.072-20.213,20.216c0,2.263,0.461,4.411,1.149,6.446c0.288,0.85,0.616,1.673,1.015,2.471 C51.279,193.606,51.667,194.434,52.17,195.175z"></path> <path d="M269.755,209.068c2.656,0,5.173-0.549,7.503-1.481c1.589-0.642,3.06-1.491,4.422-2.495 c1.035-0.767,1.988-1.616,2.863-2.559c3.34-3.604,5.432-8.389,5.432-13.681c0-11.144-9.071-20.21-20.215-20.21 s-20.216,9.066-20.216,20.21c0,4.878,1.812,9.3,4.702,12.801c0.818,0.989,1.719,1.89,2.708,2.713 c1.311,1.088,2.729,2.024,4.293,2.755C263.836,208.333,266.704,209.068,269.755,209.068z"></path> </g> </g> </g></svg>
    </label>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: button, hover, radio, futuristic */
.radio-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.radio-input input {
  display: none;
}

.radio-input input + label {
  position: relative;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  text-shadow: 0 1px #bbb,
                0 2px #bbb,
                0 3px #bbb;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  background-color: #444;
  border-radius: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  padding: 4px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.radio-input label:hover {
  background-color: #FBB03B;
}

.radio-input input + label::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background-color: transparent;
  border: 2px solid #fff;
  border-bottom: 2px dashed #fff;
  border-radius: 30px;
  transition: border-color 0.3s ease;
}

.radio-input input:checked + label {
  background-color: #D4145A;
  background-image: linear-gradient(to top left, #D4145A, #FBB03B);
  color: #000;
  transform: scale(1.2);
  z-index: 1;
}

.radio-input input:checked + label::before {
  border-color: #D4145A;
  transform: rotate(90deg);
  transition: transform .15s ease;
  animation: pulse-border 1s ease infinite alternate-reverse;
}

@keyframes pulse-border {
  0% {
    border-color: #D4145A;
  }

  50% {
    border-color: #D4145A;
  }

  100% {
    transform: scale(1.08);
    border-color: #D4145A;
  }
}


</style>


================================================
FILE: Radio-buttons/Yaya12085_tough-rat-92.html
================================================
<div class="radio-input">
    <input checked="" value="color-1" name="color" id="color-1" type="radio">
    <label for="color-1">
      <span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g id="Interface / Check"> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#ffffff" d="M6 12L10.2426 16.2426L18.727 7.75732" id="Vector"></path> </g> </g></svg>
      </span>
    </label>
  
    <input value="color-2" name="color" id="color-2" type="radio">
    <label for="color-2">
      <span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g id="Interface / Check"> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#ffffff" d="M6 12L10.2426 16.2426L18.727 7.75732" id="Vector"></path> </g> </g></svg>
      </span>
    </label>
  
    <input value="color-3" name="color" id="color-3" type="radio">
    <label for="color-3">
      <span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g id="Interface / Check"> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#ffffff" d="M6 12L10.2426 16.2426L18.727 7.75732" id="Vector"></path> </g> </g></svg>
      </span>
    </label>

</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: radio */
.radio-input {
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
  display: flex;
}

.radio-input input[type=radio] {
  display: none;
}

.radio-input input[type=radio] + label {
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.radio-input input[type=radio] + label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  line-height: 44px;
}

.radio-input input[type=radio] + label span svg {
  opacity: 0;
  transition: all 0.3s ease;
}

.radio-input input[type=radio]#color-1 + label span {
  background-color: #2ecc71;
}

.radio-input input[type=radio]#color-2 + label span {
  background-color: #3498db;
}

.radio-input input[type=radio]#color-3 + label span {
  background-color: #f1c40f;
}

.radio-input input[type=radio]:checked + label span svg {
  opacity: 1;
}

.radio-input:has(input[type=radio]#color-1:checked) {
  background-color: #2ecc71;
}

.radio-input:has(input[type=radio]#color-2:checked) {
  background-color: #3498db;
}

.radio-input:has(input[type=radio]#color-3:checked) {
  background-color: #f1c40f;
}

</style>


================================================
FILE: Radio-buttons/Yaya12085_wonderful-owl-52.html
================================================
<div class="radio-input">
  <input value="value-1" name="value-radio" id="value-1" type="radio">
  <label for="value-1">Value 1</label>
  <input value="value-2" name="value-radio" id="value-2" type="radio">
  <label for="value-2">Value 2</label>
  <input value="value-3" name="value-radio" id="value-3" type="radio">
  <label for="value-3">Value 3</label>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: button, input, radio, select, animated, design */
.radio-input {
  display: flex;
  flex-direction: row;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.radio-input input[type="radio"] {
  display: none;
}

.radio-input label {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #212121;
  border-radius: 5px;
  margin-right: 12px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.radio-input label:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #ccc;
  transition: all 0.3s ease-in-out;
}

.radio-input input[type="radio"]:checked + label:before {
  background-color: green;
  top: 0;
}

.radio-input input[type="radio"]:checked + label {
  background-color: royalblue;
  color: #fff;
  border-color: rgb(129, 235, 129);
  animation: radio-translate 0.5s ease-in-out;
}

@keyframes radio-translate {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateX(0);
  }
}

</style>


================================================
FILE: Radio-buttons/aadium_massive-turtle-43.html
================================================
<label class="container" id="left">
  <input type="radio" name="my-radio-button">
  <div class="selected" id="leftradio"></div>
</label>
<label class="container" id="middle">
  <input type="radio" name="my-radio-button">
  <div class="selected" id="middleradio"></div>
</label>
<label class="container" id="right">
  <input type="radio" name="my-radio-button">
  <div class="selected" id="rightradio"></div>
</label>
<style>
/* From Uiverse.io by aadium - Tags: cyberpunk, radio, futuristic */
.container input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: 17px;
  width: 5em;
  height: 2.5em;
  user-select: none;
  border: none;
}

.selected {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#leftradio {
  border-bottom-left-radius: 2.5em;
  border-top-left-radius: 2.5em;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border: 3px solid #78cce2;
  background-color: transparent;
  transition: 0.2s ease-in;
}

#rightradio {
  border-bottom-right-radius: 2.5em;
  border-top-right-radius: 2.5em;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border: 3px solid #defe47;
  background-color: transparent;
  transition: 0.2s linear;
}

#middleradio {
  border: 3px solid #f887ff;
  background-color: transparent;
  transition: 0.2s linear;
}

.selected:after {
  content: '';
  position: absolute;
  background-color: 78cce2;
  width: 100%;
  height: 90%;
  transform: scale(0);
  transition: 0.2s ease-out;
}

#leftradio:hover {
  border-bottom-left-radius: 2.5em;
  border-top-left-radius: 2.5em;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border: 3px solid #78cce2;
  background-color: #78cce2;
}

#leftradio::after {
  top: 0%;
  height: 100%;
  border-bottom-left-radius: 2.5em;
  border-top-left-radius: 2.5em;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border: none;
  background-color: #78cce2;
  box-shadow: 0em 0em 4em 0.1em #78cce2;
}

#rightradio:hover {
  border-bottom-right-radius: 2.5em;
  border-top-right-radius: 2.5em;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border: 3px solid #defe47;
  background-color: #defe47;
}

#rightradio::after {
  left: -3%;
  top: -1%;
  border-bottom-right-radius: 2.5em;
  border-top-right-radius: 2.5em;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border: 3px solid #defe47;
  background-color: #defe47;
  box-shadow: 0em 0em 4em 0.1em #defe47;
}

#middleradio:hover {
  border: 3px solid #f887ff;
  background-color: #f887ff;
}

#middleradio::after {
  left: -3%;
  top: -3%;
  border: 3px solid #f887ff;
  background-color: #f887ff;
  box-shadow: 0em 0em 4em 0.1em #f887ff;
}

.container input[type="radio"]:checked ~ .selected:after {
  transform: scale(1);
}

</style>


================================================
FILE: Radio-buttons/aadium_silly-bulldog-25.html
================================================
<label id="topleft" class="container">
  <input name="my-radio-button" type="radio">
  <label id="tl">Top <br>Left</label>
  <div class="selected"></div>
</label>
&nbsp;
<label id="topright" class="container">
  <input name="my-radio-button" type="radio">
  <label id="tr">Top<br>Right</label>
  <div class="selected"></div>
</label>
<br>
<br>
<label id="bottomleft" class="container">
  <input name="my-radio-button" type="radio">
  <label id="bl">Bottom <br>Left</label>
  <div class="selected"></div>
</label>
&nbsp;
<label id="bottomright" class="container">
  <input name="my-radio-button" type="radio">
  <label id="br">Bottom <br>Right</label>
  <div class="selected"></div>
</label>
<style>
/* From Uiverse.io by aadium - Tags: radio, futuristic, futuristic-radio-buttons */
.container input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: 17px;
  width: 4em;
  height: 4em;
  user-select: none;
  border: 4px solid;
  border-image-slice: 1;
  background-color: #212121;
}

label {
  font-size: 12px;
  margin-top: -6px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: center;
  visibility: visible;
}

#topleft {
  border-image-source: linear-gradient(-45deg, #743ad5, #d53a9d);
  color: white
}

#topright {
  border-image-source: linear-gradient(45deg, #743ad5, #d53a9d);
  color: white
}

#bottomleft {
  border-image-source: linear-gradient(-135deg, #743ad5, #d53a9d);
  color: white
}

#bottomright {
  border-image-source: linear-gradient(135deg, #743ad5, #d53a9d);
  color: white
}

.selected {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#topleft:hover {
  border-image-source: linear-gradient(-45deg, #743ad5, #d53a9d);
  background-image: linear-gradient(-45deg, #743ad5, #d53a9d);
}

#topright:hover {
  border-image-source: linear-gradient(45deg, #743ad5, #d53a9d);
  background-image: linear-gradient(45deg, #743ad5, #d53a9d);
}

#bottomleft:hover {
  border-image-source: linear-gradient(-135deg, #743ad5, #d53a9d);
  background-image: linear-gradient(-135deg, #743ad5, #d53a9d);
}

#bottomright:hover {
  border-image-source: linear-gradient(135deg, #743ad5, #d53a9d);
  background-image: linear-gradient(135deg, #743ad5, #d53a9d);
}

#topleft input[type="radio"]:checked ~ .selected {
  box-shadow: 5px 5px 25px #743ad5,
                -5px -5px 25px #d53a9d;
  border-image-slice: 1;
}

#topright input[type="radio"]:checked ~ .selected {
  box-shadow: -5px 5px 25px #743ad5,
                5px -5px 25px #d53a9d;
  border-image-slice: 1;
}

#bottomleft input[type="radio"]:checked ~ .selected {
  box-shadow: -5px 5px 25px #d53a9d,
                5px -5px 25px #743ad5;
  border-image-slice: 1;
}

#bottomright input[type="radio"]:checked ~ .selected {
  box-shadow: -5px -5px 25px #743ad5,
                5px 5px 25px #d53a9d;
  border-image-slice: 1;
}

</style>


================================================
FILE: Radio-buttons/aboalsim114_fat-termite-40.html
================================================
<div class="container">
  <div class="line"></div>
  <label class="label" for="alien">
    <input id="alien" type="radio" name="future-is-here" checked="">
    <div class="button">
      <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front text">
  </span>
    </div>
  </label>
  <label class="label" for="bear">
    <input id="bear" type="radio" name="future-is-here">
    <div class="button">
      <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front text">
  </span>
    </div>
  </label>
  <label class="label" for="mickey">
    <input id="mickey" type="radio" name="future-is-here">
    <div class="button">
      <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front text">
  </span>
    </div>
  </label>
</div>
<style>
/* From Uiverse.io by aboalsim114 - Tags: radio */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.label {
  position: relative;
  margin: 0 10px;
  cursor: pointer;
}

.button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.button::before,
.button::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.button::before {
  background-color: rgba(255, 255, 255, 0.15);
  transform: scale(0.9);
  opacity: 0;
}

.button::after {
  background-color: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
  opacity: 0;
}

.label input {
  display: none;
}

.label input:checked + .button {
  background: linear-gradient(135deg, #FF5722 0%, #FF7043 100%);
  box-shadow: 0 10px 20px rgba(255, 87, 34, 0.4);
}

.label input:checked + .button::before {
  transform: scale(1.2);
  opacity: 1;
}

.label input:checked + .button::after {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1.1);
    opacity: 1;
  }

  50% {
    transform: scale(1.5);
    opacity: 0;
  }

  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

.shadow {
  position: absolute;
  bottom: 5px;
  width: 100%;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}

.front {
  position: relative;
  z-index: 1;
}

</style>


================================================
FILE: Radio-buttons/adamgiebl_hard-vampirebat-36.html
================================================
<div class="container">
  <div class="line"></div>
  <label for="alien" class="label">
    <input checked="" name="future-is-here" type="radio" id="alien">
    <div class="button">
      <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front text">
    <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2a8.5 8.5 0 0 1 8.5 8.5c0 6.5-5.5 12-8.5 12s-8.5-5.5-8.5-12A8.5 8.5 0 0 1 12 2zm0 2a6.5 6.5 0 0 0-6.5 6.5c0 4.794 4.165 10 6.5 10s6.5-5.206 6.5-10A6.5 6.5 0 0 0 12 4zm5.5 7c.16 0 .319.008.475.025a4.5 4.5 0 0 1-4.95 4.95A4.5 4.5 0 0 1 17.5 11zm-11 0a4.5 4.5 0 0 1 4.475 4.975 4.5 4.5 0 0 1-4.95-4.95C6.18 11.008 6.34 11 6.5 11z" fill="currentColor"></path></svg>
  </span>
  <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="pop"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2a8.5 8.5 0 0 1 8.5 8.5c0 6.5-5.5 12-8.5 12s-8.5-5.5-8.5-12A8.5 8.5 0 0 1 12 2zm0 2a6.5 6.5 0 0 0-6.5 6.5c0 4.794 4.165 10 6.5 10s6.5-5.206 6.5-10A6.5 6.5 0 0 0 12 4zm5.5 7c.16 0 .319.008.475.025a4.5 4.5 0 0 1-4.95 4.95A4.5 4.5 0 0 1 17.5 11zm-11 0a4.5 4.5 0 0 1 4.475 4.975 4.5 4.5 0 0 1-4.95-4.95C6.18 11.008 6.34 11 6.5 11z" fill="currentColor"></path></svg>
    </div>
  </label>
  <label for="bear" class="label">
    <input name="future-is-here" type="radio" id="bear">
    <div class="button">
      <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front text">
    <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M17.5 2a4.5 4.5 0 0 1 2.951 7.897c.355.967.549 2.013.549 3.103A9 9 0 1 1 3.55 9.897a4.5 4.5 0 1 1 6.791-5.744 9.05 9.05 0 0 1 3.32 0A4.494 4.494 0 0 1 17.5 2zm0 2c-.823 0-1.575.4-2.038 1.052l-.095.144-.718 1.176-1.355-.253a7.05 7.05 0 0 0-2.267-.052l-.316.052-1.356.255-.72-1.176A2.5 2.5 0 1 0 4.73 8.265l.131.123 1.041.904-.475 1.295A7 7 0 1 0 19 13c0-.716-.107-1.416-.314-2.083l-.112-.33-.475-1.295 1.04-.904A2.5 2.5 0 0 0 17.5 4zM10 13a2 2 0 1 0 4 0h2a4 4 0 1 1-8 0h2z" fill="currentColor"></path></svg>
  </span>
  <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="pop"><path d="M0 0h24v24H0z" fill="none"></path><path d="M17.5 2a4.5 4.5 0 0 1 2.951 7.897c.355.967.549 2.013.549 3.103A9 9 0 1 1 3.55 9.897a4.5 4.5 0 1 1 6.791-5.744 9.05 9.05 0 0 1 3.32 0A4.494 4.494 0 0 1 17.5 2zm0 2c-.823 0-1.575.4-2.038 1.052l-.095.144-.718 1.176-1.355-.253a7.05 7.05 0 0 0-2.267-.052l-.316.052-1.356.255-.72-1.176A2.5 2.5 0 1 0 4.73 8.265l.131.123 1.041.904-.475 1.295A7 7 0 1 0 19 13c0-.716-.107-1.416-.314-2.083l-.112-.33-.475-1.295 1.04-.904A2.5 2.5 0 0 0 17.5 4zM10 13a2 2 0 1 0 4 0h2a4 4 0 1 1-8 0h2z" fill="currentColor"></path></svg>
    </div>
  </label>
  <label for="mickey" class="label">
    <input name="future-is-here" type="radio" id="mickey">
    <div class="button">
      <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front text">
    <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M18.5 2a4.5 4.5 0 0 1 .883 8.913l.011.027a8 8 0 0 1-7.145 11.056L12 22a8 8 0 0 1-7.382-11.088A4.499 4.499 0 0 1 5.5 2a4.5 4.5 0 0 1 4.493 4.254l.073-.019A8.018 8.018 0 0 1 12 6l.25.004a8 8 0 0 1 1.756.25A4.5 4.5 0 0 1 18.5 2zM12 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM5.5 4a2.5 2.5 0 0 0 0 5l.164-.005.103-.01A8.044 8.044 0 0 1 7.594 7.32l.33-.206A2.5 2.5 0 0 0 5.5 4zm13 0a2.5 2.5 0 0 0-2.466 2.916l.043.2.028.016a8.04 8.04 0 0 1 2.128 1.852A2.5 2.5 0 1 0 18.5 4z" fill="currentColor"></path></svg>
  </span>
  <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="pop"><path d="M0 0h24v24H0z" fill="none"></path><path d="M18.5 2a4.5 4.5 0 0 1 .883 8.913l.011.027a8 8 0 0 1-7.145 11.056L12 22a8 8 0 0 1-7.382-11.088A4.499 4.499 0 0 1 5.5 2a4.5 4.5 0 0 1 4.493 4.254l.073-.019A8.018 8.018 0 0 1 12 6l.25.004a8 8 0 0 1 1.756.25A4.5 4.5 0 0 1 18.5 2zM12 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM5.5 4a2.5 2.5 0 0 0 0 5l.164-.005.103-.01A8.044 8.044 0 0 1 7.594 7.32l.33-.206A2.5 2.5 0 0 0 5.5 4zm13 0a2.5 2.5 0 0 0-2.466 2.916l.043.2.028.016a8.04 8.04 0 0 1 2.128 1.852A2.5 2.5 0 1 0 18.5 4z" fill="currentColor"></path></svg>
    </div>
  </label>
</div>
<style>
/* From Uiverse.io by adamgiebl - Tags: skeuomorphism, realistic, neon, radio */
.container {
  display: flex;
  position: relative;
  gap: 4px;
  color: white;
}

.container input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container input[type="radio"]:checked + .button {
  opacity: 1;
}

.container input[type="radio"]:checked + .button .pop {
  animation: fly-up 0.5s ease-in-out;
}

.button {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  touch-action: manipulation;
  width: 50px;
  border-radius: 30px;
  height: 50px;
  opacity: 0.4;
  box-shadow: 0px 0px 40px -5px hsl(170deg 100% 40%);
}

.button .pop {
  width: 22px;
  height: 22px;
  position: absolute;
  display: block;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, 0);
  top: 0;
  opacity: 0.3;
}

@keyframes fly-up {
  0% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, -40px);
  }

  100% {
    transform: translate(-50%, 0);
  }
}

.button .shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition: all
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

.button .edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(
    to left,
    hsl(170deg 100% 16%) 0%,
    hsl(170deg 100% 32%) 8%,
    hsl(170deg 100% 32%) 92%,
    hsl(170deg 100% 16%) 100%
  );
}

.button .front {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  font-size: 1.1rem;
  color: white;
  background: hsl(170deg 100% 50%);
  will-change: transform;
  transform: translateY(-4px);
  box-shadow: inset 4px 4px 8px hsl(170deg 100% 30%), inset -4px -4px 8px hsl(170deg 100% 80%);
  transition: all
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

.button .front svg {
  display: block;
  color: hsl(170deg 100% 30%);
  margin-right: 0;
}

.button:hover .front {
  transform: translateY(-6px);
  transition: transform
  
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

.button:active .front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.button:hover .shadow {
  transform: translateY(4px);
  transition: transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

.button:active .shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}
</style>


================================================
FILE: Radio-buttons/aguerquin_unlucky-yak-48.html
================================================
<div class="rating">
  <input type="radio" id="star5" name="rate" value="5" />
  <label title="Excellent!" for="star5">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">
      <path
        d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
      ></path>
    </svg>
  </label>
  <input value="4" name="rate" id="star4" type="radio" />
  <label title="Great!" for="star4">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">
      <path
        d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
      ></path>
    </svg>
  </label>
  <input value="3" name="rate" id="star3" type="radio" />
  <label title="Good" for="star3">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">
      <path
        d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
      ></path>
    </svg>
  </label>
  <input value="2" name="rate" id="star2" type="radio" />
  <label title="Okay" for="star2">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">
      <path
        d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
      ></path>
    </svg>
  </label>
  <input value="1" name="rate" id="star1" type="radio" />
  <label title="Bad" for="star1">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">
      <path
        d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
      ></path>
    </svg>
  </label>
</div>

<style>
/* From Uiverse.io by aguerquin  - Tags: hover, radio, stars, rating */
.rating > label {
  margin-right: 4px;
}

.rating:not(:checked) > input {
  display: none;
}

.rating:not(:checked) > label {
  float: right;
  cursor: pointer;
  font-size: 30px;
}

.rating:not(:checked) > label > svg {
  fill: #666;
  transition: fill 0.3s ease;
}

.rating > input:checked ~ label > svg {
  fill: #ffa723;
}

.rating:not(:checked) > label:hover ~ label > svg,
.rating:not(:checked) > label:hover > svg {
  fill: #ff9e0b;
}

#star1:hover ~ label > svg,
#star1:hover > svg {
  fill: #a23c3c !important;
}

#star2:hover ~ label > svg,
#star2:hover > svg {
  fill: #99542d !important;
}

#star3:hover ~ label > svg,
#star3:hover > svg {
  fill: #9f7e18 !important;
}

#star4:hover ~ label > svg,
#star4:hover > svg {
  fill: #22885e !important;
}

#star5:hover ~ label > svg,
#star5:hover > svg {
  fill: #7951ac !important;
}

#star1:checked ~ label > svg {
  fill: #ef4444;
}

#star2:checked ~ label > svg {
  fill: #e06c2b;
}

#star3:checked ~ label > svg {
  fill: #eab308;
}

#star4:checked ~ label > svg {
  fill: #19c37d;
}

#star5:checked ~ label > svg {
  fill: #ab68ff;
}

</style>
    

================================================
FILE: Radio-buttons/ahmed150up_warm-zebra-29.html
================================================
<div class="radio-group">
  <label class="radio-button">
    <input type="radio" name="radio" value="option1">
    <svg class="radio-icon" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="8"></circle>
      <circle cx="12" cy="12" r="5"></circle>
    </svg>
    <div class="radio-text">Option 1</div>
  </label>
  <label class="radio-button">
    <input type="radio" name="radio" value="option2">
    <svg class="radio-icon" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="8"></circle>
      <circle cx="12" cy="12" r="5"></circle>
    </svg>
    <div class="radio-text">Option 2</div>
  </label>
  <label class="radio-button">
    <input type="radio" name="radio" value="option3">
    <svg class="radio-icon" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="8"></circle>
      <circle cx="12" cy="12" r="5"></circle>
    </svg>
    <div class="radio-text">Option 3</div>
  </label>
</div>

<style>
/* From Uiverse.io by ahmed150up - Tags: radio */
.radio-group {
  display: flex;
  flex-direction: column;
}

.radio-button {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  cursor: pointer;
}

.radio-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  fill: #fff;
  transition: all 0.3s ease-in-out;
}

.radio-button:hover .radio-icon {
  transform: scale(1.2);
  fill: #2ed573;
}

.radio-button input[type="radio"] {
  opacity: 0;
  position: absolute;
}

.radio-text {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}

.radio-button::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-right: 10px;
  transition: all 0.3s ease-in-out;
}

.radio-button:hover .radio-text {
  font-size: 18px;
  color: #2ed573;
  font-weight: bold;
}

.radio-button:hover::before {
  border: 2px solid #2ed573;
}

.radio-button input[type="radio"]:checked + .radio-icon {
  fill: #2ed573;
}

.radio-button input[type="radio"]:checked + .radio-icon circle:last-child {
  opacity: 1;
}

</style>


================================================
FILE: Radio-buttons/andretellao_nasty-horse-50.html
================================================
<div class="radio-input">
  <input value="value-1" name="value-radio" id="value-1" type="radio">
  <input value="value-2" name="value-radio" id="value-2" type="radio">
  <input value="value-3" name="value-radio" id="value-3" type="radio">
</div>
<style>
/* From Uiverse.io by andretellao - Tags: radio */
.radio-input input {
  appearance: none;
  background-color: transparent;
  margin: 15px;
  font: inherit;
  color: currentColor;
  width: 1.5em;
  height: 1.5em;
  border: 0.2em solid #33f8ff;
  border-radius: 50%;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

.radio-input input::before {
  content: "";
  width: 1.65em;
  height: 1.65em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  background-color: #dd33ff;
  box-shadow: 0 0 20px #dd33ff;
}

.radio-input input:checked::before {
  transform: scale(1.02);
}
</style>


================================================
FILE: Radio-buttons/andrew-demchenk0_clever-elephant-35.html
================================================
<div class="rating">
  <input value="5" name="rate" id="star5" type="radio">
  <label title="text" for="star5"></label>
  <input value="4" name="rate" id="star4" type="radio">
  <label title="text" for="star4"></label>
  <input value="3" name="rate" id="star3" type="radio" checked="">
  <label title="text" for="star3"></label>
  <input value="2" name="rate" id="star2" type="radio">
  <label title="text" for="star2"></label>
  <input value="1" name="rate" id="star1" type="radio">
  <label title="text" for="star1"></label>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: radio, stars, rating */
.rating:not(:checked) > input {
  position: absolute;
  appearance: none;
}

.rating:not(:checked) > label {
  float: right;
  cursor: pointer;
  font-size: 30px;
  color: #666;
}

.rating:not(:checked) > label:before {
  content: '★';
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
  color: #e58e09;
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: #ff9e0b;
}

.rating > input:checked ~ label {
  color: #ffa723;
}




</style>


================================================
FILE: Radio-buttons/andrew-demchenk0_dry-elephant-32.html
================================================
<div class="wrapper">
  <div class="card">
    <input class="input" type="radio" name="card" value="basic">
    <span class="check"></span>
    <label class="label">
      <div class="title">BASIC</div>
      <div class="price">
        <span class="span">$</span>
        15
        <span class="span">/month</span>
      </div>
    </label>
  </div>
  <div class="card">
    <input class="input" type="radio" name="card" value="standart">
    <span class="check"></span>
    <label class="label">
      <div class="title">STANDART</div>
      <div class="price">
        <span class="span">$</span>
        30
        <span class="span">/month</span>
      </div>
    </label>
  </div>
  <div class="card">
    <input class="input" type="radio" name="card" value="premium">
    <span class="check"></span>
    <label class="label">
      <div class="title">PREMIUM</div>
      <div class="price">
        <span class="span">$</span>
        60
        <span class="span">/month</span>
      </div>
    </label>
  </div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: radio */
.wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.card {
  position: relative;
  width: 150px;
  height: 100px;
  background: #fff;
  border-radius: 10px;
  transition: all 0.3s;
}

.card:hover {
  transform: scale(1.05);
}

.input {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  appearance: none;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  z-index: 10;
  box-shadow: 1px 1px 10px #aaaaaa,
              -1px -1px 10px #ffffff;
}

.input + .check::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 15px;
  width: 16px;
  height: 16px;
  border: 2px solid #d0d0d0;
  border-radius: 50%;
  background-color: #E8E8E8;
}

.input:checked + .check::after {
  content: '';
  position: absolute;
  top: 19px;
  right: 19px;
  width: 12px;
  height: 12px;
  background-color: rgba(255,0,0,0.7);
  border-radius: 50%;
}

.input[value="standart"]:checked + .check::after {
  background-color: rgba(255,165,0,0.7);
}

.input[value="premium"]:checked + .check::after {
  background-color: rgba(0,128,0,0.7);
}

.input[value="basic"]:checked {
  border: 1.5px solid rgba(255,0,0,0.7);
}

.input[value="standart"]:checked {
  border: 1.5px solid rgba(255,165,0,0.7);
}

.input[value="premium"]:checked {
  border: 1.5px solid rgba(0,128,0,0.7);
}

.label {
  color: #323232;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.label .title {
  margin: 15px 0 0 15px;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 1.5px;
}

.label .price {
  margin: 20px 0 0 15px;
  font-size: 20px;
  font-weight: 900;
}

.label .span {
  color: gray;
  font-weight: 700;
  font-size: 15px;
}

</style>


================================================
FILE: Radio-buttons/andrew-demchenk0_hot-bird-10.html
================================================
<div role="radiogroup" class="theme-switcher">
  <button
    type="button"
    role="radio"
    data-theme-switcher="true"
    data-active="false"
    class="theme-switcher_switch"
    aria-label="Switch to light theme"
    aria-checked="false"
  >
    <svg
      style="color: currentcolor; width: 16px; height: 16px;"
      width="24"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke="currentColor"
      shape-rendering="geometricPrecision"
      height="24"
      fill="none"
      data-testid="geist-icon"
      class="icon"
    >
      <circle r="5" cy="12" cx="12"></circle>
      <path d="M12 1v2"></path>
      <path d="M12 21v2"></path>
      <path d="M4.22 4.22l1.42 1.42"></path>
      <path d="M18.36 18.36l1.42 1.42"></path>
      <path d="M1 12h2"></path>
      <path d="M21 12h2"></path>
      <path d="M4.22 19.78l1.42-1.42"></path>
      <path d="M18.36 5.64l1.42-1.42"></path>
    </svg>
  </button>
  <button
    type="button"
    role="radio"
    data-theme-switcher="true"
    data-active="false"
    class="theme-switcher_switch"
    aria-label="Switch to system theme"
    aria-checked="false"
  >
    <svg
      style="color: currentcolor; width: 16px; height: 16px;"
      width="24"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke="currentColor"
      shape-rendering="geometricPrecision"
      height="24"
      fill="none"
      data-testid="geist-icon"
      class="icon"
    >
      <rect ry="2" rx="2" height="14" width="20" y="3" x="2"></rect>
      <path d="M8 21h8"></path>
      <path d="M12 17v4"></path>
    </svg>
  </button>
  <button
    type="button"
    role="radio"
    data-theme-switcher="true"
    data-active="true"
    class="theme-switcher_switch"
    aria-label="Switch to dark theme"
    aria-checked="true"
  >
    <svg
      style="color: currentcolor; width: 16px; height: 16px;"
      width="24"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke="currentColor"
      shape-rendering="geometricPrecision"
      height="24"
      fill="none"
      data-testid="geist-icon"
      class="icon"
    >
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
    </svg>
  </button>
</div>

<style>
/* From Uiverse.io by andrew-demchenk0  - Website: https://nextjs.org/learn?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=home - Tags: simple, theme-switch, radio, buttons, template, for js, component */
.theme-switcher {
  padding: 3px;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  border-radius: 9999px;
  border: 1px solid grey;
}

.theme-switcher_switch {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

.theme-switcher_switch:hover > .icon {
  stroke: #323232;
}

.theme-switcher_switch:active {
  background-color: rgba(128, 128, 128, 0.35);
}

.theme-switcher_switch:active > .icon {
  stroke: white;
}

</style>
    

================================================
FILE: Radio-buttons/andrew-demchenk0_lucky-bobcat-25.html
================================================
<div class="container">
  <div class="radio-wrapper">
    <input class="input" name="btn" id="value-1" type="radio">
    <div class="btn">
      <span aria-hidden="">_</span>Cyber
      <span class="btn__glitch" aria-hidden="">_Cyber🦾</span>
      <label class="number">r1</label>
    </div>
  </div>
  <div class="radio-wrapper">
    <input class="input" name="btn" id="value-2" checked="true" type="radio">
    <div class="btn">
      _Radio<span aria-hidden="">_</span>
      <span class="btn__glitch" aria-hidden="">_R_a_d_i_o_</span>
      <label class="number">r2</label>
    </div>
  </div>
  <div class="radio-wrapper">
    <input class="input" name="btn" id="value-3" type="radio">
    <div class="btn">
      Buttons<span aria-hidden=""></span>
      <span class="btn__glitch" aria-hidden="">Buttons_</span>
      <label class="number">r3</label>
    </div> 
  </div>
</div>


<style>
/* From Uiverse.io by andrew-demchenk0  - Tags: cyberpunk, neon, radio, radio, neon */
.container {
  display: flex;
  flex-direction: row;
}

.radio-wrapper {
  position: relative;
  height: 38px;
  width: 84px;
  margin: 3px;
}

.radio-wrapper .input {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
}

.btn {
  --primary: #ff184c;
  --shadow-primary: #fded00;
  --color: white;
  --font-size: 9px;
  --shadow-primary-hue: 180;
  --shadow-secondary-hue: 60;
  --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
  --clip: polygon(11% 0, 95% 0, 100% 25%, 90% 90%, 95% 90%, 85% 90%, 85% 100%, 7% 100%, 0 80%);
  --border: 5px;
  --shimmy-distance: 5;
  --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
  --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
  --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
  --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
  --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
  color: var(--color);
  text-transform: uppercase;
  font-size: var(--font-size);
  letter-spacing: 3px;
  position: relative;
  font-weight: 900;
  width: 100%;
  height: 100%;
  line-height: 38px;
  text-align: center;
  transition: background 0.2s, 0.3s;
}

.input:checked + .btn {
  --primary: #8B00FF;
  --shadow-primary: #00e572;
}

.input:hover + .btn {
  --primary: #cc133c;
  --font-size: 11px;
}

.btn:after, .btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: var(--clip);
  z-index: -1;
}

.btn:before {
  background: var(--shadow-primary);
  transform: translate(var(--border), 0);
}

.btn:after {
  background: var(--primary);
}

.btn__tag {
  position: absolute;
  padding: 1px 4px;
  letter-spacing: 1px;
  line-height: 1;
  bottom: -5%;
  right: 5%;
  font-weight: normal;
  color: hsl(0, 0%, 0%);
  font-size: var(--label-size);
}

.btn__glitch {
  position: absolute;
  top: calc(var(--border) * -1);
  left: calc(var(--border) * -1);
  right: calc(var(--border) * -1);
  bottom: calc(var(--border) * -1);
  background: var(--shadow-primary);
  text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
  clip-path: var(--clip);
  animation: glitch 2s infinite;
  display: none;
}

.input:hover + .btn .btn__glitch {
  display: block;
}

.input:checked + .btn .btn__glitch {
  display: block;
  animation: glitch 5s infinite;
}

.btn__glitch:before {
  content: '';
  position: absolute;
  top: calc(var(--border) * 1);
  right: calc(var(--border) * 1);
  bottom: calc(var(--border) * 1);
  left: calc(var(--border) * 1);
  clip-path: var(--clip);
  background: var(--primary);
  z-index: -1;
}

@keyframes glitch {
  0% {
    clip-path: var(--clip-one);
  }

  2%, 8% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }

  6% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  9% {
    clip-path: var(--clip-two);
    transform: translate(0, 0);
  }

  10% {
    clip-path: var(--clip-three);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  13% {
    clip-path: var(--clip-three);
    transform: translate(0, 0);
  }

  14%, 21% {
    clip-path: var(--clip-four);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  25% {
    clip-path: var(--clip-five);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  30% {
    clip-path: var(--clip-five);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }

  35%, 45% {
    clip-path: var(--clip-six);
    transform: translate(calc(var(--shimmy-distance) * -1%));
  }

  40% {
    clip-path: var(--clip-six);
    transform: translate(calc(var(--shimmy-distance) * 1%));
  }

  50% {
    clip-path: var(--clip-six);
    transform: translate(0, 0);
  }

  55% {
    clip-path: var(--clip-seven);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  60% {
    clip-path: var(--clip-seven);
    transform: translate(0, 0);
  }

  31%, 61%, 100% {
    clip-path: var(--clip-four);
  }
}

.number {
  background: var(--shadow-primary);
  color: #323232;
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 1px;
  position: absolute;
  width: 15px;
  height: 6px;
  top: 0;
  left: 81%;
  line-height: 6.2px;
}

</style>
    

================================================
FILE: Radio-buttons/andrew-demchenk0_pink-dragon-17.html
================================================
<div class="container">
  <div class="radio-wrapper">
    <input type="radio" id="value-1" name="btn" class="input">
    <div class="btn">
      <span aria-hidden="">_</span>Cyber
      <span aria-hidden="" class="btn__glitch">_Cyber🦾</span>
      <label class="number">r1</label>
    </div>
  </div>
  <div class="radio-wrapper">
    <input type="radio" checked="true" id="value-2" name="btn" class="input">
    <div class="btn">
      _Radio<span aria-hidden="">_</span>
      <span aria-hidden="" class="btn__glitch">_R_a_d_i_o_</span>
      <label class="number">r2</label>
    </div>
  </div>
  <div class="radio-wrapper">
    <input type="radio" id="value-3" name="btn" class="input">
    <div class="btn">
      Buttons<span aria-hidden=""></span>
      <span aria-hidden="" class="btn__glitch">Buttons_</span>
      <label class="number">r3</label>
    </div> 
  </div>
</div>


<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: glitch, radio */
.container {
  display: flex;
  flex-direction: row;
}

.radio-wrapper {
  position: relative;
  height: 38px;
  width: 84px;
  margin: 3px;
}

.radio-wrapper .input {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
}

.btn {
  --primary: #ff184c;
  --shadow-primary: #fded00;
  --color: white;
  --font-size: 9px;
  --shadow-primary-hue: 180;
  --shadow-secondary-hue: 60;
  --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
  --clip: polygon(11% 0, 95% 0, 100% 25%, 90% 90%, 95% 90%, 85% 90%, 85% 100%, 7% 100%, 0 80%);
  --border: 5px;
  --shimmy-distance: 5;
  --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
  --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
  --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
  --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
  --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
  color: var(--color);
  text-transform: uppercase;
  font-size: var(--font-size);
  letter-spacing: 3px;
  position: relative;
  font-weight: 900;
  width: 100%;
  height: 100%;
  line-height: 38px;
  text-align: center;
  transition: background 0.2s, 0.3s;
}

.input:checked + .btn {
  --primary: #8B00FF;
  --shadow-primary: #00e572;
}

.input:hover + .btn {
  --primary: #cc133c;
  --font-size: 11px;
}

.btn:after, .btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: var(--clip);
  z-index: -1;
}

.btn:before {
  background: var(--shadow-primary);
  transform: translate(var(--border), 0);
}

.btn:after {
  background: var(--primary);
}

.btn__tag {
  position: absolute;
  padding: 1px 4px;
  letter-spacing: 1px;
  line-height: 1;
  bottom: -5%;
  right: 5%;
  font-weight: normal;
  color: hsl(0, 0%, 0%);
  font-size: var(--label-size);
}

.btn__glitch {
  position: absolute;
  top: calc(var(--border) * -1);
  left: calc(var(--border) * -1);
  right: calc(var(--border) * -1);
  bottom: calc(var(--border) * -1);
  background: var(--shadow-primary);
  text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
  clip-path: var(--clip);
  animation: glitch 2s infinite;
  display: none;
}

.input:hover + .btn .btn__glitch {
  display: block;
}

.input:checked + .btn .btn__glitch {
  display: block;
  animation: glitch 5s infinite;
}

.btn__glitch:before {
  content: '';
  position: absolute;
  top: calc(var(--border) * 1);
  right: calc(var(--border) * 1);
  bottom: calc(var(--border) * 1);
  left: calc(var(--border) * 1);
  clip-path: var(--clip);
  background: var(--primary);
  z-index: -1;
}

@keyframes glitch {
  0% {
    clip-path: var(--clip-one);
  }

  2%, 8% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }

  6% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  9% {
    clip-path: var(--clip-two);
    transform: translate(0, 0);
  }

  10% {
    clip-path: var(--clip-three);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  13% {
    clip-path: var(--clip-three);
    transform: translate(0, 0);
  }

  14%, 21% {
    clip-path: var(--clip-four);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  25% {
    clip-path: var(--clip-five);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  30% {
    clip-path: var(--clip-five);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }

  35%, 45% {
    clip-path: var(--clip-six);
    transform: translate(calc(var(--shimmy-distance) * -1%));
  }

  40% {
    clip-path: var(--clip-six);
    transform: translate(calc(var(--shimmy-distance) * 1%));
  }

  50% {
    clip-path: var(--clip-six);
    transform: translate(0, 0);
  }

  55% {
    clip-path: var(--clip-seven);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  60% {
    clip-path: var(--clip-seven);
    transform: translate(0, 0);
  }

  31%, 61%, 100% {
    clip-path: var(--clip-four);
  }
}

.number {
  background: var(--shadow-primary);
  color: #323232;
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 1px;
  position: absolute;
  width: 15px;
  height: 6px;
  top: 0;
  left: 81%;
  line-height: 6.2px;
}

</style>


================================================
FILE: Radio-buttons/andrew-demchenk0_spicy-fish-10.html
================================================
<div class="radio-input">
  <input name="btn" type="radio" class="input">
  <span class="span"></span>
</div>
<div class="radio-input">
  <input checked="" name="btn" type="radio" class="input">
  <span class="span"></span>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: neumorphism, realistic, radio */
.radio-input {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 10px;
  width: 150px;
  height: 50px;
  cursor: pointer;
}

.radio-input .input {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
}

.radio-input .span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: #323232;
  border-radius: 10px;
}

.radio-input .span::before {
  content: 'Inactive';
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 8px;
  background: #666666;
  box-shadow: inset -6px -6px 12px #2c2c2c,
              inset 6px 6px 12px #a0a0a0;
  color: #323232;
  font-weight: 700;
  font-size: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input:checked ~ .span::before {
  content: 'Active';
  color: #ccc;
  text-shadow: 1px 1px 0.5px rgba(0,255,0,0.3);
  ;
  border-radius: 8px;
  background: #666666;
  box-shadow: inset 6px 6px 12px #2c2c2c,
              inset -6px -6px 12px #a0a0a0;
}

.radio-input .span::after {
  content: '';
  height: 6px;
  width: 6px;
  border-radius: 100%;
  background-color: red;
  position: absolute;
  top: calc(50% - 3px);
  right: 20px;
  box-shadow: 1px 1px 3px #9c0000,
              -1px -1px 3px #ff0000;
}

.input:checked ~ .span::after {
  background: #00ff00;
  box-shadow: 1px 1px 3px #009c00,
              -1px -1px 3px #00ff00;
}
</style>


================================================
FILE: Radio-buttons/andrew-demchenk0_stupid-seahorse-9.html
================================================
<div class="wrapper">
  <div class="option">
    <input class="input" type="radio" name="btn" value="option1" checked="">
    <div class="btn">
      <span class="span">Option</span>
    </div>
  </div>
  <div class="option">
    <input class="input" type="radio" name="btn" value="option2">
    <div class="btn">
      <span class="span">Option</span>
    </div>  </div>
  <div class="option">
    <input class="input" type="radio" name="btn" value="option3">
    <div class="btn">
      <span class="span">Option</span>
    </div>  
  </div>
</div>

<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: radio, select, radio-buttons, options  */
.wrapper {
  --font-color-dark: #323232;
  --font-color-light: #FFF;
  --bg-color: #fff;
  --main-color: #323232;
  position: relative;
  width: 250px;
  height: 36px;
  background-color: var(--bg-color);
  border: 2px solid var(--main-color);
  border-radius: 34px;
  display: flex;
  flex-direction: row;
  box-shadow: 4px 4px var(--main-color);
}

.option {
  width: 80.5px;
  height: 28px;
  position: relative;
  top: 2px;
  left: 2px;
}

.input {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  appearance: none;
  cursor: pointer;
}

.btn {
  width: 100%;
  height: 100%;
  background-color: var(--bg-color);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.span {
  color: var(--font-color-dark);
}

.input:checked + .btn {
  background-color: var(--main-color);
}

.input:checked + .btn .span {
  color: var(--font-color-light);
}
</style>


================================================
FILE: Radio-buttons/asgardOP_great-badger-21.html
================================================
<div id="navbody">
  <form action="#">
    <ul class="ul">
      <input checked="" name="rad" class="radio" id="choose1" type="radio" />
      <label for="choose1">
        <li class="li">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            class="svg w-6 h-6 text-gray-800 dark:text-white"
          >
            <path
              d="m4 12 8-8 8 8M6 10.5V19a1 1 0 0 0 1 1h3v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h3a1 1 0 0 0 1-1v-8.5"
              stroke-width="2"
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke="currentColor"
            ></path>
          </svg>
        </li>
      </label>
      <input class="radio" name="rad" id="choose2" type="radio" />
      <label for="choose2">
        <li class="li">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            class="svg w-6 h-6 text-gray-800 dark:text-white"
          >
            <path
              d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"
              stroke-width="2"
              stroke-linecap="round"
              stroke="currentColor"
            ></path>
          </svg>
        </li>
      </label>
      <input class="radio" name="rad" id="choose3" type="radio" />
      <label for="choose3">
        <li class="li">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            class="svg w-6 h-6 text-gray-800 dark:text-white"
          >
            <path
              d="m17 21-5-4-5 4V3.889a.92.92 0 0 1 .244-.629.808.808 0 0 1 .59-.26h8.333a.81.81 0 0 1 .589.26.92.92 0 0 1 .244.63V21Z"
              stroke-width="2"
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke="currentColor"
            ></path>
          </svg>
        </li>
      </label>
      <input class="radio" name="rad" id="choose4" type="radio" />
      <label for="choose4">
        <li class="li">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            class="svg w-6 h-6 text-gray-800 dark:text-white"
          >
            <path
              d="M10 19H5a1 1 0 0 1-1-1v-1a3 3 0 0 1 3-3h2m10 1a3 3 0 0 1-3 3m3-3a3 3 0 0 0-3-3m3 3h1m-4 3a3 3 0 0 1-3-3m3 3v1m-3-4a3 3 0 0 1 3-3m-3 3h-1m4-3v-1m-2.121 1.879-.707-.707m5.656 5.656-.707-.707m-4.242 0-.707.707m5.656-5.656-.707.707M12 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
              stroke-width="2"
              stroke-linejoin="round"
              stroke-linecap="square"
              stroke="currentColor"
            ></path>
          </svg>
        </li>
      </label>
    </ul>
  </form>
</div>

<style>
/* From Uiverse.io by asgardOP  - Tags: button, smooth, radio, menu, hover effect, css effect, buttons */
#navbody {
  width: 300px;
  height: 60px;
  background-color: rgb(255, 255, 255);
  border-radius: 40px;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.041);
  align-items: center;
  justify-content: center;
  display: flex;
}

.ul {
  list-style: none;
  width: 100%;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.ul .li {
  display: inline-block;
}

.radio {
  display: none;
}

.svg {
  width: 70px;
  height: 70px;
  opacity: 80%;
  cursor: pointer;
  padding: 13px 20px;
  transition: 0.2s;
}

.ul .li .svg:hover {
  transition: 0.1s;
  color: rgb(235, 40, 176);
  position: relative;
  margin-top: -4px;
  opacity: 100%;
}

.radio:checked + label .li .svg {
  color: rgb(235, 40, 176);
  fill-rule: evenodd;
}

</style>
    

================================================
FILE: Radio-buttons/ayman-ashine_wicked-liger-39.html
================================================
<!-- From Uiverse.io by ayman-ashine  - Tags: animation, form, radio, gender, multicolor, tailwind, selectgender -->
<div
  class="flex flex-col items-start gap-4 overflow-hidden rounded-md p-6 shadow-sm shadow-[#00000050]"
>
  <span
    class="text-center font-mono text-base font-black uppercase text-neutral-600"
    >Please select your gender</span
  >
  <div class="flex items-center gap-4">
    <div class="relative flex h-[50px] w-[50px] items-center justify-center">
      <input
        type="radio"
        id="radio"
        name="gender"
        value="male"
        class="peer z-10 h-full w-full cursor-pointer opacity-0"
      />
      <div
        class="absolute h-full w-full rounded-full bg-blue-100 p-4 shadow-sm shadow-[#00000050] ring-blue-400 duration-300 peer-checked:scale-110 peer-checked:ring-2"
      ></div>
      <div
        class="absolute -z-10 h-full w-full scale-0 rounded-full bg-blue-200 duration-500 peer-checked:scale-[500%]"
      ></div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="50px"
        height="50px"
        viewBox="0 0 24 24"
        fill="none"
        class="absolute stroke-blue-400"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M15.5631 16.1199C14.871 16.81 13.9885 17.2774 13.0288 17.462C12.0617 17.6492 11.0607 17.5459 10.1523 17.165C8.29113 16.3858 7.07347 14.5723 7.05656 12.5547C7.04683 11.0715 7.70821 9.66348 8.8559 8.72397C10.0036 7.78445 11.5145 7.4142 12.9666 7.71668C13.9237 7.9338 14.7953 8.42902 15.4718 9.14008C16.4206 10.0503 16.9696 11.2996 16.9985 12.6141C17.008 13.9276 16.491 15.1903 15.5631 16.1199Z"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
        <path
          d="M14.9415 8.60977C14.6486 8.90266 14.6486 9.37754 14.9415 9.67043C15.2344 9.96332 15.7093 9.96332 16.0022 9.67043L14.9415 8.60977ZM18.9635 6.70907C19.2564 6.41617 19.2564 5.9413 18.9635 5.64841C18.6706 5.35551 18.1958 5.35551 17.9029 5.64841L18.9635 6.70907ZM16.0944 5.41461C15.6802 5.41211 15.3424 5.74586 15.3399 6.16007C15.3374 6.57428 15.6711 6.91208 16.0853 6.91458L16.0944 5.41461ZM18.4287 6.92872C18.8429 6.93122 19.1807 6.59747 19.1832 6.18326C19.1857 5.76906 18.8519 5.43125 18.4377 5.42875L18.4287 6.92872ZM19.1832 6.17421C19.1807 5.76001 18.8429 5.42625 18.4287 5.42875C18.0145 5.43125 17.6807 5.76906 17.6832 6.18326L19.1832 6.17421ZM17.6973 8.52662C17.6998 8.94082 18.0377 9.27458 18.4519 9.27208C18.8661 9.26958 19.1998 8.93177 19.1973 8.51756L17.6973 8.52662ZM16.0022 9.67043L18.9635 6.70907L17.9029 5.64841L14.9415 8.60977L16.0022 9.67043ZM16.0853 6.91458L18.4287 6.92872L18.4377 5.42875L16.0944 5.41461L16.0853 6.91458ZM17.6832 6.18326L17.6973 8.52662L19.1973 8.51756L19.1832 6.17421L17.6832 6.18326Z"
        ></path>
      </svg>
    </div>
    <div class="relative flex h-[50px] w-[50px] items-center justify-center">
      <input
        type="radio"
        id="radio"
        name="gender"
        value="female"
        class="peer z-10 h-full w-full cursor-pointer opacity-0"
      />
      <div
        class="absolute h-full w-full rounded-full bg-pink-100 p-2 shadow-sm shadow-[#00000050] ring-pink-400 duration-300 peer-checked:scale-110 peer-checked:ring-2"
      ></div>
      <div
        class="absolute -z-10 h-full w-full scale-0 rounded-full bg-pink-200 duration-500 peer-checked:scale-[500%]"
      ></div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="35px"
        height="35px"
        viewBox="0 0 24 24"
        fill="none"
        class="absolute fill-pink-400"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M20 9C20 13.0803 16.9453 16.4471 12.9981 16.9383C12.9994 16.9587 13 16.9793 13 17V19H14C14.5523 19 15 19.4477 15 20C15 20.5523 14.5523 21 14 21H13V22C13 22.5523 12.5523 23 12 23C11.4477 23 11 22.5523 11 22V21H10C9.44772 21 9 20.5523 9 20C9 19.4477 9.44772 19 10 19H11V17C11 16.9793 11.0006 16.9587 11.0019 16.9383C7.05466 16.4471 4 13.0803 4 9C4 4.58172 7.58172 1 12 1C16.4183 1 20 4.58172 20 9ZM6.00365 9C6.00365 12.3117 8.68831 14.9963 12 14.9963C15.3117 14.9963 17.9963 12.3117 17.9963 9C17.9963 5.68831 15.3117 3.00365 12 3.00365C8.68831 3.00365 6.00365 5.68831 6.00365 9Z"
        ></path>
      </svg>
    </div>
    <div class="relative flex h-[50px] w-[50px] items-center justify-center">
      <input
        type="radio"
        name="gender"
        value="none-binary"
        class="peer z-10 h-full w-full cursor-pointer opacity-0"
      />
      <div
        class="absolute h-full w-full rounded-full bg-purple-100 p-2 shadow-sm shadow-[#00000050] ring-purple-400 duration-300 peer-checked:scale-110 peer-checked:ring-2"
      ></div>
      <div
        class="absolute -z-10 h-full w-full scale-0 rounded-full bg-purple-200 duration-500 peer-checked:scale-[500%]"
      ></div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="40px"
        height="40px"
        viewBox="0 0 512 512"
        version="1.1"
        class="absolute fill-purple-400"
      >
        <g id="drop" transform="translate(42.666667, 70.248389)">
          <path
            d="M226.597,200.834611 L296.853333,271.084945 L353.819,271.084 L326.248389,243.503223 L356.418278,213.333333 L435.503223,292.418278 L356.418278,371.503223 L326.248389,341.333333 L353.82,313.751 L279.163435,313.751611 L196.418,231.011611 L226.597,200.834611 Z M356.418278,1.42108547e-14 L435.503223,79.0849447 L356.418278,158.169889 L326.248389,128 L353.82,100.418 L296.853333,100.418278 L83.503232,313.751611 L-1.0658141e-13,313.751611 L-1.03968831e-13,271.084945 L65.8133333,271.084945 L279.163435,57.7516113 L353.82,57.751 L326.248389,30.1698893 L356.418278,1.42108547e-14 Z M83.503232,57.7516113 L166.248,140.490611 L136.069,170.667611 L65.8133333,100.418278 L-1.0658141e-13,100.418278 L-1.0658141e-13,57.7516113 L83.503232,57.7516113 Z"
          ></path>
        </g>
      </svg>
    </div>
    <div class="relative flex h-[50px] w-[50px] items-center justify-center">
      <input
        type="radio"
        name="gender"
        value="none"
        class="peer z-10 h-full w-full cursor-pointer opacity-0"
      />
      <div
        class="absolute h-full w-full rounded-full bg-neutral-100 p-2 shadow-sm shadow-[#00000050] ring-neutral-400 duration-300 peer-checked:scale-110 peer-checked:ring-2"
      ></div>
      <div
        class="absolute -z-10 h-full w-full scale-0 rounded-full bg-neutral-200 duration-500 peer-checked:scale-[500%]"
      ></div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="50px"
        height="50px"
        viewBox="0 0 24 24"
        fill="none"
        class="absolute stroke-neutral-400"
      >
        <path
          id="Vector"
          d="M8.19531 8.76498C8.42304 8.06326 8.84053 7.43829 9.40137 6.95899C9.96221 6.47968 10.6444 6.16501 11.373 6.0494C12.1017 5.9338 12.8486 6.02202 13.5303 6.3042C14.2119 6.58637 14.8016 7.05166 15.2354 7.64844C15.6691 8.24521 15.9295 8.95008 15.9875 9.68554C16.0455 10.421 15.8985 11.1581 15.5636 11.8154C15.2287 12.4728 14.7192 13.0251 14.0901 13.4106C13.4611 13.7961 12.7377 14.0002 12 14.0002V14.9998M12.0498 19V19.1L11.9502 19.1002V19H12.0498Z"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </div>
  </div>
</div>


    

================================================
FILE: Radio-buttons/cbolson_ugly-yak-75.html
================================================
<form class="my-form">
  <div>
    <input id="radio-1" type="radio" name="option" />
    <label for="radio-1">Radio 1</label>
  </div>
  <div>
    <input checked="" id="radio-2" type="radio" name="option" />
    <label for="radio-2">Radio 2</label>
  </div>
  <div>
    <input id="radio-3" type="radio" name="option" />
    <label for="radio-3">Radio 3</label>
  </div>
  <div>
    <input id="radio-4" type="radio" name="option" />
    <label for="radio-4">Radio 4</label>
  </div>
</form>

<style>
/* From Uiverse.io by cbolson  - Tags: radio */
/* From Uiverse.io by cbolson */
.my-form {
  --_clr-primary: #666;
  --_clr-hover: #f33195;
  --_clr-checked: #127acf;
}
.my-form > div {
  --_clr-current: var(--_clr-primary);

  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.my-form > div + div {
  margin-block-start: 0.5rem;
}
.my-form label {
  cursor: pointer;
  color: var(--_clr-current);
  transition: color 150ms ease-in-out;
}
/* styled radio */
.my-form input[type="radio"] {
  appearance: none;
  outline: none;
  width: 1.5rem;
  height: 1.5rem;
  aspect-ratio: 1;
  padding: 0.25rem;
  background: transparent;
  border: 1px solid var(--_clr-current);
  border-radius: 50%;
  display: grid;
  place-content: center;
  cursor: pointer;
  position: relative;
}
.my-form input[type="radio"]::after {
  content: "";
  position: absolute;
  inset: 0.25rem;
  opacity: 0;
  scale: 0;
  transition:
    opacity 150ms ease-in-out,
    scale 150ms ease-in-out;
  background-color: var(--_clr-checked);
  border-radius: inherit;
}

.my-form label:hover,
.my-form input[type="radio"]:focus-visible,
.my-form input[type="radio"]:focus-visible + label,
.my-form input[type="radio"]:hover,
.my-form input[type="radio"]:hover + label {
  --_clr-current: var(--_clr-hover);
}
.my-form input[type="radio"]:focus-visible::after,
.my-form input[type="radio"]:hover::after {
  opacity: 0.5;
  scale: 1;
  background-color: var(--_clr-hover);
}

.my-form input[type="radio"]:checked + label:not(:hover),
.my-form input[type="radio"]:checked:not(:hover) {
  --_clr-current: var(--_clr-checked);
}
.my-form input[type="radio"]:checked::after {
  opacity: 1;
  scale: 1;
}

</style>
    

================================================
FILE: Radio-buttons/coding-masala_pink-ape-66.html
================================================
<div class="radio-buttons">
  <label class="radio-button">
    <input type="radio" name="option" value="option1">
    <div class="radio-circle"></div>
    <span class="radio-label">Option 1</span>
  </label>
  <label class="radio-button">
    <input type="radio" name="option" value="option2">
    <div class="radio-circle"></div>
    <span class="radio-label">Option 2</span>
  </label>
  <label class="radio-button">
    <input type="radio" name="option" value="option3">
    <div class="radio-circle"></div>
    <span class="radio-label">Option 3</span>
  </label>
</div>

<style>
/* From Uiverse.io by coding-masala - Tags: radio */
.radio-buttons {
  display: flex;
  flex-direction: column;
  color: white;
}

.radio-button {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}

.radio-button input[type="radio"] {
  display: none;
}

.radio-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #aaa;
  position: relative;
  margin-right: 10px;
}

.radio-circle::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ddd;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.2s ease-in-out;
}

.radio-button input[type="radio"]:checked + .radio-circle::before {
  transform: translate(-50%, -50%) scale(1);
}

.radio-button:nth-of-type(1) input[type="radio"]:checked + .radio-circle::before {
  background-color: #ff6600;
}

.radio-button:nth-of-type(2) input[type="radio"]:checked + .radio-circle::before {
  background-color: #ffffff;
}

.radio-button:nth-of-type(3) input[type="radio"]:checked + .radio-circle::before {
  background-color: #26be00;
}

.radio-label {
  font-size: 16px;
  font-weight: bold;
}

.radio-button:hover .radio-circle {
  border-color: #555;
}

.radio-button:hover input[type="radio"]:checked + .radio-circle::before {
  background-color: #555;
}

</style>


================================================
FILE: Radio-buttons/coding-masala_polite-monkey-88.html
================================================

  <div class="radio-group">
    <input class="radio-input" name="radio-group" id="radio1" type="radio">
    <label class="radio-label" for="radio1">
      <span class="radio-inner-circle"></span>
      Option 1
    </label>
    
    <input class="radio-input" name="radio-group" id="radio2" type="radio">
    <label class="radio-label" for="radio2">
      <span class="radio-inner-circle"></span>
      Option 2
    </label>
    
    <input class="radio-input" name="radio-group" id="radio3" type="radio">
    <label class="radio-label" for="radio3">
      <span class="radio-inner-circle"></span>
      Option 3
    </label>
  </div>



<style>
/* From Uiverse.io by coding-masala - Tags: radio, advanced */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f1f1f1;
  padding: 20px;
}

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

.radio-label {
  display: flex;
  align-items: center;
  padding: 0.5em;
  margin-bottom: 0.5em;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: background-color 0.2s, border-color 0.2s;
}

.radio-label:hover {
  background-color: #e6e6e6;
}

.radio-input {
  position: absolute;
  opacity: 0;
}

.radio-input:checked + .radio-label {
  background-color: #ffc3c3;
  border-color: #ff1111;
}

.radio-input:focus + .radio-label {
  outline: 2px solid #ff1111;
}

.radio-inner-circle {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid #888;
  border-radius: 50%;
  margin-right: 0.5em;
  transition: border-color 0.2s;
  position: relative;
}

.radio-label:hover .radio-inner-circle {
  border-color: #555;
}

.radio-input:checked + .radio-label .radio-inner-circle {
  border-color: #ff1111;
}

.radio-input:checked + .radio-label .radio-inner-circle::after {
  content: '';
  display: block;
  width: 0.5em;
  height: 0.5em;
  background-color: #ff1111;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    
</style>


================================================
FILE: Radio-buttons/csozidev_ordinary-stingray-85.html
================================================
<div class="radio-input">
  <input value="value-1" name="value-radio" id="value-1" type="radio" class="input i_female">
  <input value="value-2" name="value-radio" id="value-2" type="radio" class="input i_no-gender">
  <input value="value-3" name="value-radio" id="value-3" type="radio" class="input i_male">
  <div class="card female">
    <svg class="logo" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path d="M12 15.75A7.125 7.125 0 1 0 12 1.5a7.125 7.125 0 0 0 0 14.25Z"></path>
     <path d="M12 15.75v6.75"></path>
     <path d="M14.719 19.5H9.28"></path>
    </svg>
    <div class="title">Female</div>
  </div>
  <div class="card no-gender">
    <svg class="logo" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path d="M10.125 15.75a6.375 6.375 0 1 0 0-12.75 6.375 6.375 0 0 0 0 12.75Z"></path>
     <path d="M10.125 16.5v6"></path>
     <path d="M12.75 19.5H7.5"></path>
     <path d="M20.25 5.25V1.5H16.5"></path>
     <path d="M15.717 6.034 20.25 1.5"></path>
    </svg>
    <div class="title">N/A</div>
  </div>
  <div class="card male">
    <svg class="logo" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path d="M10.125 21a7.125 7.125 0 1 0 0-14.25 7.125 7.125 0 0 0 0 14.25Z"></path>
     <path d="M21 7.5V3h-4.5"></path>
     <path d="M15.188 8.813 21 3"></path>
    </svg>
    <div class="title">Male</div>
  </div>

</div>
<style>
/* From Uiverse.io by csozidev - Tags: simple, button, hover, input, radio, gender, colorful */
/* Gender selector made by: csozi | Website: www.csozi.hu*/

.radio-input {
  display: flex;
  flex-wrap: wrap;
  width: 320px;
  height: fit-content;
  gap: 10px;
  scale: 0.7;
}

.radio-input input {
  height: 100px;
  width: 100px;
  translate: 0px 55px;
  opacity: 0;
  z-index: 10;
}

.card {
  height: 100px;
  width: 100px;
  border: solid darkgray;
  background-color: lightgray;
  border-radius: 10px;
  translate: 0px -55px;
  position: relative;
  z-index: 9;
  transition: 0.2s;
  color: darkgray;
}

.logo {
  position: absolute;
  top: 10px;
  left: 50%;
  translate: -50% 0px;
}

.card .title {
  width: 100%;
  position: absolute;
  text-align: center;
  font-size: 23px;
  bottom: 0px;
  font-weight: bold;
}

.i_female:hover ~ .female {
  filter: brightness(1.1);
}

.i_male:hover ~ .male {
  filter: brightness(1.1);
}

.i_no-gender:hover ~ .no-gender {
  filter: brightness(1.1);
}

.i_female:checked ~ .female {
  border: solid #ff87bf;
  color: #ff87bf;
  background-color: #ffb8d9;
}

.i_male:checked ~ .male {
  border: solid #3d44ff;
  color: #3d44ff;
  background-color: #85a5ff;
}

.i_no-gender:checked ~ .no-gender {
  border: solid #c9c600;
  color: #c9c600;
  background-color: #fffd82;
}
</style>


================================================
FILE: Radio-buttons/elijahgummer_soft-firefox-40.html
================================================
<div class="btn-group">
  <button class="btn left" type="button">Left</button>
  <button class="btn middle" type="button">Middle</button>
  <button class="btn right" type="button">Right</button>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, jelly, shadow, modern, radio, stretch, alignment */
.btn {
  font: inherit;
  background-color: #f0f0f0;
  border: 0;
  color: #242424;
  font-size: 1.15rem;
  padding: 0.375em 1em;
  text-shadow: 0 0.0625em 0 #fff;
  box-shadow: inset 0 0.0625em 0 0 #f4f4f4, 0 0.0625em 0 0 #efefef,
    0 0.125em 0 0 #ececec, 0 0.25em 0 0 #e0e0e0, 0 0.3125em 0 0 #dedede,
    0 0.375em 0 0 #dcdcdc, 0 0.425em 0 0 #cacaca, 0 0.425em 0.5em 0 #cecece;
  transition: 0.23s ease;
  cursor: pointer;
  font-weight: bold;
  margin: -1px;
}
.middle {
  border-radius: 0px;
}
.right {
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}
.left {
  border-top-left-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
}
.btn:active {
  translate: 0 0.225em;
  box-shadow: inset 0 0.03em 0 0 #f4f4f4, 0 0.03em 0 0 #efefef,
    0 0.0625em 0 0 #ececec, 0 0.125em 0 0 #e0e0e0, 0 0.125em 0 0 #dedede,
    0 0.2em 0 0 #dcdcdc, 0 0.225em 0 0 #cacaca, 0 0.225em 0.375em 0 #cecece;
  letter-spacing: 0.1em;
  color: skyblue;
}
.btn:focus {
  color: skyblue;
}

</style>
    

================================================
FILE: Radio-buttons/escannord_purple-gecko-48.html
================================================
<div class="radio-input">
  <input value="value-1" name="value-radio" id="value-1" type="radio" />
  <label for="value-1">
    <div class="text">
      <span class="circle"></span>
      Monthly
    </div>
    <div class="price">
      <span>$30/mo</span>
      <span class="small">$30 billed every month</span>
    </div> </label
  ><input value="value-2" name="value-radio" id="value-2" type="radio" />
  <label for="value-2">
    <div class="text">
      <span class="circle"></span>
      Annualy
    </div>
    <div class="price">
      <span>$15/mo</span>
      <span class="small">$180 billed once a year</span>
    </div>
    <span class="info">save up to 50%</span>
  </label>
</div>

<style>
/* From Uiverse.io by escannord  - Tags: simple, material design, radio, payment */
.radio-input input {
  display: none;
}

.radio-input label {
  --border-color: #a1b0d8;

  border: 1px solid var(--border-color);
  border-radius: 6px;
  min-width: 5rem;
  margin: 1rem;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  position: relative;
  align-items: center;
}

.radio-input input:checked + label {
  --border-color: #2f64d8;
  border-color: var(--border-color);
  border-width: 2px;
}
.radio-input label:hover {
  --border-color: #2f64d8;
  border-color: var(--border-color);
}

.radio-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(189, 187, 207);
  margin-right: 0.5rem;
  position: relative;
}

.radio-input input:checked + label span.circle::before {
  content: "";
  display: inline;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #2f64d8;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.text {
  display: flex;
  align-items: center;
}

.price {
  display: flex;
  flex-direction: column;
  text-align: right;
  font-weight: bold;
}

.small {
  font-size: 10px;
  color: rgb(136, 138, 139);
  font-weight: 100;
}

.info {
  position: absolute;
  display: inline-block;
  font-size: 11px;
  background-color: rgb(31, 236, 123);
  border-radius: 20px;
  padding: 1px 9px;
  top: 0;
  transform: translateY(-50%);
  right: 5px;
}

</style>
    

================================================
FILE: Radio-buttons/gharsh11032000_curvy-vampirebat-60.html
================================================
<div class="radio-buttons-container">
<div class="radio-button">
  <input name="radio-group" id="radio2" class="radio-button__input" type="radio">
  <label for="radio2" class="radio-button__label">
    <span class="radio-button__custom"></span>
        
        Next
  </label>
</div>
<div class="radio-button">
  <input name="radio-group" id="radio1" class="radio-button__input" type="radio">
  <label for="radio1" class="radio-button__label">
    <span class="radio-button__custom"></span>
    
    Svelte
  </label>
</div>
<div class="radio-button">
  <input name="radio-group" id="radio3" class="radio-button__input" type="radio">
  <label for="radio3" class="radio-button__label">
    <span class="radio-button__custom"></span>
        
        Remix
  </label>
</div>
</div>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: radio, radio-buttons, hover effect, click effect */
.radio-buttons-container {
  display: flex;
  align-items: center;
  gap: 24px;
}

.radio-button {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.radio-button__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-button__label {
  display: inline-block;
  padding-left: 30px;
  margin-bottom: 10px;
  position: relative;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.radio-button__custom {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #555;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.radio-button__input:checked + .radio-button__label .radio-button__custom {
  transform: translateY(-50%) scale(0.9);
  border: 5px solid #4c8bf5;
  color: #4c8bf5;
}

.radio-button__input:checked + .radio-button__label {
  color: #4c8bf5;
}

.radio-button__label:hover .radio-button__custom {
  transform: translateY(-50%) scale(1.2);
  border-color: #4c8bf5;
  box-shadow: 0 0 10px #4c8bf580;
}


</style>


================================================
FILE: Radio-buttons/gharsh11032000_moody-dog-23.html
================================================
<div class="radio-button-container">
  <div class="radio-button">
  <input type="radio" class="radio-button__input" id="radio1" name="radio-group">
  <label class="radio-button__label" for="radio1">
    <span class="radio-button__custom"></span>
    React
  </label>
</div>
<div class="radio-button">
  <input type="radio" class="radio-button__input" id="radio2" name="radio-group">
  <label class="radio-button__label" for="radio2">
    <span class="radio-button__custom"></span>
    Angular
  </label>
</div>
<div class="radio-button">
  <input type="radio" class="radio-button__input" id="radio3" name="radio-group">
  <label class="radio-button__label" for="radio3">
    <span class="radio-button__custom"></span>
    Vue
  </label>
</div>
</div>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: radio, radio-buttons, click effect */
.radio-button-container {
  display: flex;
  align-items: center;
  gap: 24px;
}

.radio-button {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.radio-button__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-button__label {
  display: inline-block;
  padding-left: 30px;
  margin-bottom: 10px;
  position: relative;
  font-size: 15px;
  color: #f2f2f2;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.radio-button__custom {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #555;
  transition: all 0.3s ease;
}

.radio-button__input:checked + .radio-button__label .radio-button__custom {
  background-color: #4c8bf5;
  border-color: transparent;
  transform: scale(0.8);
  box-shadow: 0 0 20px #4c8bf580;
}

.radio-button__input:checked + .radio-button__label {
  color: #4c8bf5;
}

.radio-button__label:hover .radio-button__custom {
  transform: scale(1.2);
  border-color: #4c8bf5;
  box-shadow: 0 0 20px #4c8bf580;
}






</style>


================================================
FILE: Radio-buttons/hoshikawamaki_green-chicken-4.html
================================================
<!-- From Uiverse.io by hoshikawamaki  - Tags: simple, purple, button, radio, colorful, border, tailwindcss -->
<div
  class="flex space-x-2 border-[3px] border-purple-400 rounded-xl select-none"
>
  <label
    class="radio flex flex-grow items-center justify-center rounded-lg p-1 cursor-pointer"
  >
    <input
      type="radio"
      name="radio"
      value="html"
      class="peer hidden"
      checked=""
    />
    <span
      class="tracking-widest peer-checked:bg-gradient-to-r peer-checked:from-[blueviolet] peer-checked:to-[violet] peer-checked:text-white text-gray-700 p-2 rounded-lg transition duration-150 ease-in-out"
      >HTML</span
    >
  </label>

  <label
    class="radio flex flex-grow items-center justify-center rounded-lg p-1 cursor-pointer"
  >
    <input type="radio" name="radio" value="react" class="peer hidden" />
    <span
      class="tracking-widest peer-checked:bg-gradient-to-r peer-checked:from-[blueviolet] peer-checked:to-[violet] peer-checked:text-white text-gray-700 p-2 rounded-lg transition duration-150 ease-in-out"
      >React</span
    >
  </label>

  <label
    class="radio flex flex-grow items-center justify-center rounded-lg p-1 cursor-pointer"
  >
    <input type="radio" name="radio" value="vue" class="peer hidden" />
    <span
      class="tracking-widest peer-checked:bg-gradient-to-r peer-checked:from-[blueviolet] peer-checked:to-[violet] peer-checked:text-white text-gray-700 p-2 rounded-lg transition duration-150 ease-in-out"
      >Vue</span
    >
  </label>
</div>


    

================================================
FILE: Radio-buttons/javierBarroso_average-quail-26.html
================================================
<div class="container">
  <label>
    <input name="list" type="radio" />
    <span>
      <p class="a">Yes</p>
      <p class="b">No</p>
    </span>
    Easy
  </label>
  <label>
    <input checked="" name="list" type="radio" />
    <span>
      <p class="a">Yes</p>
      <p class="b">No</p>
    </span>
    Normal
  </label>
  <label>
    <input name="list" type="radio" />
    <span>
      <p class="a">Yes</p>
      <p class="b">No</p>
    </span>
    Hard
  </label>
</div>

<style>
/* From Uiverse.io by javierBarroso  - Tags: animation, 3d, button, modern, radio, toggle */
.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.container label {
  transform-style: preserve-3d;
  perspective: 100px;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 18px;
  cursor: pointer;
}
.container label span {
  position: relative;
  margin-right: 0px;
  width: 60px;
  height: 40px;
  transform: rotateY(180deg);
  transition-duration: 0.6s;
  margin: 0 10px 0 10px;
  transform-style: preserve-3d;
  perspective: 100px;
  padding: 0px;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  background: #111;
  border-radius: 50px;
  cursor: pointer;
  box-shadow:
    inset 2px 2px 2px #fff9,
    5px 5px 5px #2225;
}
.container label span p {
  position: absolute;
  transform-origin: 50% 50%;
  left: 0%;
  right: 0%;
  transform: translateX(50px) translateY(50px);
  font-weight: 600;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  font-size: 12px;
  text-shadow: 0 0 2px;
}
.container label span .a {
  backface-visibility: visible;
  color: green;
  transform: translateX(0%) translateY(0%) translateZ(10px) rotateY(0deg);
}
.container label span .b {
  backface-visibility: visible;
  color: red;
  transform: translateX(0%) translateY(0%) translateZ(-10px) rotateY(180deg);
}

.container label input[type="radio"] {
  appearance: none;
}

.container label input[type="radio"]:checked ~ span {
  box-shadow:
    inset -2px 2px 2px #fff9,
    -5px 5px 5px #2225;
  transform: rotateY(0deg);
}

</style>
    

================================================
FILE: Radio-buttons/kyle1dev_smart-fox-51.html
================================================
<div class="custom-radio-group">
  <label class="custom-radio-container">
    <input type="radio" name="custom-radio" value="option1" />
    <span class="custom-radio-checkmark"></span>
    Option 1
  </label>
  <label class="custom-radio-container">
    <input type="radio" name="custom-radio" value="option2" />
    <span class="custom-radio-checkmark"></span>
    Option 2
  </label>
  <label class="custom-radio-container">
    <input type="radio" name="custom-radio" value="option3" />
    <span class="custom-radio-checkmark"></span>
    Option 3
  </label>
</div>

<style>
/* From Uiverse.io by kyle1dev  - Tags: radio */
.custom-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 320px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  padding: 16px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.custom-radio-container {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.2);
  transition:
    background-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
  font-size: 16px;
  color: #333333;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.custom-radio-container:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
.custom-radio-container input[type="radio"] {
  opacity: 0;
  position: absolute;
}
.custom-radio-checkmark {
  position: relative;
  height: 24px;
  width: 24px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  transition:
    background-color 0.4s ease,
    transform 0.4s ease;
  margin-right: 12px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.custom-radio-container input[type="radio"]:checked + .custom-radio-checkmark {
  background-color: #ffffff;
  border-color: #007bff;
  box-shadow: 0 0 0 8px rgba(0, 123, 255, 0.2);
  transform: scale(1.2);
  animation: pulse 0.6s forwards;
}
.custom-radio-checkmark::after {
  content: "";
  position: absolute;
  display: none;
}
.custom-radio-container
  input[type="radio"]:checked
  + .custom-radio-checkmark::after {
  display: block;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #007bff;
  transform: translate(-50%, -50%);
}
@keyframes pulse {
  0% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1.2);
  }
}

</style>
    

================================================
FILE: Radio-buttons/neerajbaniwal_serious-sheep-31.html
================================================
<div class="radiogroup">
  <div class="wrapper">
    <input value="a" id="a" name="app" type="radio" class="state" />
    <label for="a" class="label">
      <div class="indicator"></div>
      <span class="text">a) close</span>
    </label>
  </div>
  <div class="wrapper">
    <input value="b" id="b" name="app" type="radio" class="state" />
    <label for="b" class="label">
      <div class="indicator"></div>
      <span class="text">b) remove</span>
    </label>
  </div>
  <div class="wrapper">
    <input value="c" id="c" name="app" type="radio" class="state" />
    <label for="c" class="label">
      <div class="indicator"></div>
      <span class="text">c) delete</span>
    </label>
  </div>
  <div class="wrapper">
    <input value="d" id="d" name="app" type="radio" class="state" />
    <label for="d" class="label">
      <div class="indicator"></div>
      <span class="text">d) all of the above</span>
    </label>
  </div>
</div>

<style>
/* From Uiverse.io by neerajbaniwal  - Tags: radio, submit, switcher, html, css, 3d button */
.radiogroup {
  padding: 48px 64px;
  border-radius: 16px;
  background: #ecf0f3;
  box-shadow: 4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #ffffff inset;
}

.wrapper {
  margin: 8px 0;
}

.state {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 1e-5;
  pointer-events: none;
}

.label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #394a56;
}

.text {
  margin-left: 16px;
  opacity: 0.6;
  transition: opacity 0.2s linear, transform 0.2s ease-out;
}

.indicator {
  position: relative;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;
  overflow: hidden;
}

.indicator::before,
.indicator::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 10%;
  height: 80%;
  width: 80%;
  border-radius: 50%;
}

.indicator::before {
  box-shadow: -4px -2px 4px 0px #d1d9e6, 4px 2px 8px 0px #fff;
}

.indicator::after {
  background-color: #ecf0f3;
  box-shadow: -4px -2px 4px 0px #fff, 4px 2px 8px 0px #d1d9e6;
  transform: scale3d(1, 1, 1);
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.state:checked ~ .label .indicator::after {
  transform: scale3d(0.975, 0.975, 1) translate3d(0, 10%, 0);
  opacity: 0;
}

.state:focus ~ .label .text {
  transform: translate3d(8px, 0, 0);
  opacity: 1;
}

.label:hover .text {
  opacity: 1;
}

</style>
    

================================================
FILE: Radio-buttons/ozgeozkaraa01_wet-emu-59.html
================================================
<div class="container">
  <div class="custom-radio">
    <input type="radio" id="radio-1" name="tabs" checked="">
    <label class="radio-label" for="radio-1">
      <div class="radio-circle"></div>
      <span class="radio-text">Option 1</span>
    </label>
    <input type="radio" id="radio-2" name="tabs">
    <label class="radio-label" for="radio-2">
      <div class="radio-circle"></div>
      <span class="radio-text">Option 2</span>
    </label>
    <input type="radio" id="radio-3" name="tabs">
    <label class="radio-label" for="radio-3">
      <div class="radio-circle"></div>
      <span class="radio-text">Option 3</span>
    </label>
  </div>
</div>


<style>
/* From Uiverse.io by ozgeozkaraa01 - Tags: button, radio, hover button */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2f2f2;
}

.custom-radio {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.custom-radio input[type="radio"] {
  display: none;
}

.radio-label {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.radio-circle {
  width: 20px;
  height: 20px;
  border: 2px solid #ffcc00;
  border-radius: 50%;
  margin-right: 10px;
  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.radio-text {
  font-size: 1rem;
  color: #333;
  transition: color 0.3s ease-in-out;
}

.custom-radio input[type="radio"]:checked + .radio-label {
  background-color: #ffcc00;
}

.custom-radio input[type="radio"]:checked + .radio-label .radio-circle {
  border-color: #fff;
  background-color: #ffcc00;
}

.custom-radio input[type="radio"]:checked + .radio-label .radio-text {
  color: #64748b;
}

</style>


================================================
FILE: Radio-buttons/radwakhalil22_good-quail-97.html
================================================
<div class="radio-input">
  <input type="radio" id="neonShadow" name="value-radio"><span class="span"></span>
  <input type="radio" id="neonShadow" name="value-radio"><span class="span"></span>
  <input type="radio" id="neonShadow" name="value-radio"><span class="span"></span>
</div>


<style>
/* From Uiverse.io by radwakhalil22 - Tags:  */
.radio-input #neonShadow {
  height: 30px;
  width: 30px;
  border: none;
  border-radius: 50px;
  background-color: rgba(5, 19, 16, 0.3);
  animation: glow 1s infinite;
  transition: 0.5s;
  accent-color: black;
  appearance: none;
  background-size: contain;
}

#neonShadow[type='radio']:after {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  position: relative;
  content: '';
  display: inline-block;
  visibility: visible;
}

#neonShadow[type='radio']:checked:after {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background-color: white;
  content: '';
  display: inline-block;
  visibility: visible;
}

.span {
  display: block;
  width: 100%;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  padding-top: 15%;
  padding-right: 2.5%;
  margin-right: 0px;
  font-size: 1.2rem;
  transition: 0.3s;
  opacity: 0;
}

.span:hover {
  transition: 0.3s;
  opacity: 1;
  font-weight: 700;
}

#neonShadow:hover {
  transform: scale(0.9);
  background-color: #c3bacc;
  transition: 0.5s;
}

@keyframes glow {
  0% {
    box-shadow: 5px 5px 20px rgb(93, 52, 168),-5px -5px 20px rgb(93, 52, 168);
  }

  50% {
    box-shadow: 5px 5px 20px rgb(81, 224, 210),-5px -5px 20px rgb(81, 224, 210)
  }

  100% {
    box-shadow: 5px 5px 20px rgb(93, 52, 168),-5px -5px 20px rgb(93, 52, 168)
  }
}


</style>


================================================
FILE: Radio-buttons/roroland_unlucky-goose-22.html
================================================
<div class="radio-input">
  <div>
    <label for="circrad1">
    <input value="circvalue-1" id="circrad1" name="namcircle" type="radio" checked="">
    </label>
    <label for="circrad2">
    <input value="circvalue-2" id="circrad2" name="namcircle" type="radio">
    </label>
    <label for="circrad3">
    <input value="circvalue-3" id="circrad3" name="namcircle" type="radio">
    </label>
  </div>
  <div class="circ-container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  </div>
</div>
<style>
/* From Uiverse.io by roroland - Tags: radio */
.radio-input {
  --base: rgb(119, 119, 119);
  --ring: rgb(187, 176, 19);
  --center: rgb(192, 165, 14);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
  place-items: center;
  place-content: center;
  aspect-ratio: 1;
  position: relative;
  width: 50%;
  height: 50%;
}

.radio-input > div {
  display: flex;
  flex-flow: row nowrap;
  gap: 2rem;
  position: relative;
  z-index: 0;
  grid-column: 1/-1;
  grid-row: 1/-1;
}

.radio-input input[type="radio"] {
  appearance: none;
  outline: 2px solid var(--base);
  box-shadow: 0 0 1.5em white;
  padding: .5em;
  border-radius: 50%;
  width: .35rem;
  height: .35rem;
  cursor: pointer;
  position: relative;
  transition: all 1s ease-out;
  z-index: 10;
}

.radio-input input[type="radio"]:hover {
  scale: 1.25;
}

.radio-input input[type="radio"]:checked {
  scale: 2;
  outline: 2px solid var(--ring);
  box-shadow: 0 0 1.5em white,  inset 0 0 .75em var(--center);
  filter: blur(2px);
}

.radio-input div {
  position: relative;
}

.radio-input .circ-container > * {
  animation: spin 2.5s linear infinite;
  background-color: rgb(255, 255, 255);
  transition: all .3s ease-out;
}

.radio-input:has(input[type="radio"]:checked) div .circle {
  --size: .3rem;
  --offset: 6rem;
  --toCheck: '';
  --circWidth: 2.185rem;
  --items: 8;
  width: var(--size);
  pointer-events: none;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--ring);
  position: absolute;
  left: var(--toCheck);
  top: calc(var(--size) * -.5);
  transform: translate(
    calc(cos(var(--angle)) * var(--offset)),
    calc(sin(var(--angle)) * var(--offset))
  );
}

.circle:nth-of-type(1) {
  --angle: calc(1 * (360deg / var(--items)));
}

.circle:nth-of-type(2) {
  --angle: calc(2 * (360deg / var(--items)));
}

.circle:nth-of-type(3) {
  --angle: calc(3 * (360deg / var(--items)));
}

.circle:nth-of-type(4) {
  --angle: calc(4 * (360deg / var(--items)));
}

.circle:nth-of-type(5) {
  --angle: calc(5 * (360deg / var(--items)));
}

.circle:nth-of-type(6) {
  --angle: calc(6 * (360deg / var(--items)));
}

.circle:nth-of-type(7) {
  --angle: calc(7 * (360deg / var(--items)));
}

.circle:nth-of-type(8) {
  --angle: calc(8 * (360deg / var(--items)));
}

.radio-input div:has(label:nth-of-type(1) input[type="radio"]:checked) ~ div .circle {
  --toCheck: calc(var(--circWidth) * -1.525 + var(--size));
}

.radio-input  div:has(label:nth-of-type(2) input[type="radio"]:checked) ~ div .circle {
  --toCheck: calc(var(--size) * -.5);
}

.radio-input div:has(label:nth-of-type(3) input[type="radio"]:checked) ~ div .circle {
  --toCheck: calc(var(--circWidth) * 1.5 - var(--size) * 2);
}

@keyframes spin {
  0% {
    rotate: 360deg;
    scale: .5;
    background-color: white;
  }

  50% {
    scale: 1;
    background-color: white;
  }

  60% {
    scale: .25;
    background-color: var(--center);
  }

  100% {
    rotate: -360deg;
    scale: .5;
    background-color: var(--ring);
    ;
  }
}

</style>


================================================
FILE: Radio-buttons/sandeepgopan_fluffy-catfish-36.html
================================================
<div class="radio-input">
  <label class="radio-compont">
      <input type="radio" id="value-1" class="radiostyle" name="value-radio" value="value-1">
          <div class="radio-text">Option 1</div>
  </label>
  <label class="radio-compont">
      <input type="radio" id="value-2" class="radiostyle" name="value-radio" value="value-2">
        <div class="radio-text">Option 2</div>
  </label>
  <label class="radio-compont">
      <input type="radio" id="value-3" class="radiostyle" name="value-radio" value="value-3">
        <div class="radio-text">Option 3</div>
  </label>
</div>
<style>
/* From Uiverse.io by sandeepgopan - Tags: hover, input, theme-switch, radio, futuristic-radio-buttons */
.radio-compont {
  display: flex;
  font-family: 'Courier New', Courier, monospace;
  padding: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.radio-text {
  padding: 0px 10px;
  color: hsl(0, 0%, 50%);
  font-size: 20px;
  text-transform: uppercase;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.radio-compont:hover {
  box-shadow: inset 4px 4px 12px #afaeae,inset -4px -4px 12px #ffffffc9;
  border-radius: 100px;
}

.radiostyle:checked~.radio-text {
  color: #E41C23;
}

.radiostyle {
  width: 20px;
  height: 20px;
}
 
</style>


================================================
FILE: Radio-buttons/shadowfax29_nasty-octopus-47.html
================================================
<div class="radio-inputs">
  <div class="radio1" id="one">
    <input type="radio" name="radio">
    <div class="obj1"></div>
    <span class="name">EARTH</span>
  </div>
  <div class="radio2" id="two">
    <input type="radio" name="radio">
    <div class="obj2"></div>
    <span class="name">MARS</span>
  </div>
      
  <div class="radio3" id="three">
    <input type="radio" name="radio">
    <div class="obj3"></div>
    <span class="name">MOON</span>
  </div>
</div>
<style>
/* From Uiverse.io by shadowfax29 - Tags: radio, planet, simple radio */
.radio-inputs {
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.074);
  box-sizing: border-box;
  box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
  padding: 0.25rem;
  width: 210px;
  height: 40px;
  font-size: 14px;
  box-size: border-box;
}

.obj1 {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  filter: blur(4px);
  z-index: -5;
  background: linear-gradient(blue,rgb(224, 107, 224));
  border-radius: 50%;
  overflow: hidden;
} /* adjust position accordingly */

.obj2 {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  filter: blur(4px);
  z-index: -5;
  background: linear-gradient(red,orange);
  border-radius: 50%;
} /* adjust position accordingly */

.obj3 {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  filter: blur(4px);
  z-index: -5;
  background-color: grey;
  border-radius: 50%;
} /* adjust position accordingly */

.radio1 , .radio2 , .radio3 {
  flex: 1;
  width: 70px;
  height: 30px;
}

.radio1 input ,
.radio2 input ,
.radio3 input {
  width: 30px;
  height: 30px;
  appearance: none;
  z-index: 2;
  cursor: pointer;
  margin-left: 22px;
}

.radio1 .name ,

.radio2 .name ,

.radio3 .name {
  display: flex;
  position: relative;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: none;
  bottom: 2.6em;
  padding: .5rem 0;
  color: rgba(51, 65, 85, 1);
  transition: all .15s ease-in-out;
  font-weight: 200;
  height: 40px;
  z-index: -2;
}

.radio1  input:checked ~ .name {
  color: white;
  background: linear-gradient(blue,green);
  font-weight: 600;
}

.radio2  input:checked ~ .name {
  color: white;
  background: linear-gradient(red,orange);
  font-weight: 600;
}

.radio3  input:checked ~ .name {
  color: white;
  background-color: grey;
  font-weight: 600;
}

#one input:checked ~ .obj1,
#two input:checked ~ .obj2 ,
#three input:checked ~ .obj3 {
  animation: shake 1s;
  animation-fill-mode: forwards;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(-5px) rotate(-5deg);
  }

  20% {
    transform: translateX(5px) rotate(5deg);
  }

  30% {
    transform: translateX(-5px) rotate(-5deg);
  }

  40% {
    transform: translateX(5px) rotate(5deg);
  }

  50% {
    transform: translateX(-5px) rotate(-5deg);
  }

  60% {
    transform: translateX(5px) rotate(5deg);
  }

  70% {
    transform: translateX(-5px) rotate(-5deg);
  }

  80% {
    transform: translateX(5px) rotate(5deg);
  }

  90% {
    transform: translateX(-5px) rotate(-5deg);
  }

  100% {
    transform: translateX(0) rotate(0);
  }
}

</style>


================================================
FILE: Radio-buttons/shadowmurphy_red-mayfly-78.html
================================================
<div class="input">
  <button class="value">
    <svg data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.5 13v1a.5.5 0 0 0 .3379.4731 18.9718 18.9718 0 0 0 6.1621 1.0269 18.9629 18.9629 0 0 0 6.1621-1.0269.5.5 0 0 0 .3379-.4731v-1a6.5083 6.5083 0 0 0 -4.461-6.1676 3.5 3.5 0 1 0 -4.078 0 6.5083 6.5083 0 0 0 -4.461 6.1676zm4-9a2.5 2.5 0 1 1 2.5 2.5 2.5026 2.5026 0 0 1 -2.5-2.5zm2.5 3.5a5.5066 5.5066 0 0 1 5.5 5.5v.6392a18.08 18.08 0 0 1 -11 0v-.6392a5.5066 5.5066 0 0 1 5.5-5.5z" fill="#7D8590"></path></svg>
    Public profile
  </button>
  <button class="value">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="Line"><path d="m17.074 30h-2.148c-1.038 0-1.914-.811-1.994-1.846l-.125-1.635c-.687-.208-1.351-.484-1.985-.824l-1.246 1.067c-.788.677-1.98.631-2.715-.104l-1.52-1.52c-.734-.734-.78-1.927-.104-2.715l1.067-1.246c-.34-.635-.616-1.299-.824-1.985l-1.634-.125c-1.035-.079-1.846-.955-1.846-1.993v-2.148c0-1.038.811-1.914 1.846-1.994l1.635-.125c.208-.687.484-1.351.824-1.985l-1.068-1.247c-.676-.788-.631-1.98.104-2.715l1.52-1.52c.734-.734 1.927-.779 2.715-.104l1.246 1.067c.635-.34 1.299-.616 1.985-.824l.125-1.634c.08-1.034.956-1.845 1.994-1.845h2.148c1.038 0 1.914.811 1.994 1.846l.125 1.635c.687.208 1.351.484 1.985.824l1.246-1.067c.787-.676 1.98-.631 2.715.104l1.52 1.52c.734.734.78 1.927.104 2.715l-1.067 1.246c.34.635.616 1.299.824 1.985l1.634.125c1.035.079 1.846.955 1.846 1.993v2.148c0 1.038-.811 1.914-1.846 1.994l-1.635.125c-.208.687-.484 1.351-.824 1.985l1.067 1.246c.677.788.631 1.98-.104 2.715l-1.52 1.52c-.734.734-1.928.78-2.715.104l-1.246-1.067c-.635.34-1.299.616-1.985.824l-.125 1.634c-.079 1.035-.955 1.846-1.993 1.846zm-5.835-6.373c.848.53 1.768.912 2.734 1.135.426.099.739.462.772.898l.18 2.341 2.149-.001.18-2.34c.033-.437.347-.8.772-.898.967-.223 1.887-.604 2.734-1.135.371-.232.849-.197 1.181.089l1.784 1.529 1.52-1.52-1.529-1.784c-.285-.332-.321-.811-.089-1.181.53-.848.912-1.768 1.135-2.734.099-.426.462-.739.898-.772l2.341-.18h-.001v-2.148l-2.34-.18c-.437-.033-.8-.347-.898-.772-.223-.967-.604-1.887-1.135-2.734-.232-.37-.196-.849.089-1.181l1.529-1.784-1.52-1.52-1.784 1.529c-.332.286-.81.321-1.181.089-.848-.53-1.768-.912-2.734-1.135-.426-.099-.739-.462-.772-.898l-.18-2.341-2.148.001-.18 2.34c-.033.437-.347.8-.772.898-.967.223-1.887.604-2.734 1.135-.37.232-.849.197-1.181-.089l-1.785-1.529-1.52 1.52 1.529 1.784c.285.332.321.811.089 1.181-.53.848-.912 1.768-1.135 2.734-.099.426-.462.739-.898.772l-2.341.18.002 2.148 2.34.18c.437.033.8.347.898.772.223.967.604 1.887 1.135 2.734.232.37.196.849-.089 1.181l-1.529 1.784 1.52 1.52 1.784-1.529c.332-.287.813-.32 1.18-.089z" id="XMLID_1646_" fill="#7D8590"></path><path d="m16 23c-3.859 0-7-3.141-7-7s3.141-7 7-7 7 3.141 7 7-3.141 7-7 7zm0-12c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" fill="#7D8590" id="XMLID_1645_"></path></svg>
    Account
  </button>
  <button class="value">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="m109.9 20.63a6.232 6.232 0 0 0 -8.588-.22l-57.463 51.843c-.012.011-.02.024-.031.035s-.023.017-.034.027l-4.721 4.722a1.749 1.749 0 0 0 0 2.475l.341.342-3.16 3.16a8 8 0 0 0 -1.424 1.967 11.382 11.382 0 0 0 -12.055 10.609c-.006.036-.011.074-.015.111a5.763 5.763 0 0 1 -4.928 5.41 1.75 1.75 0 0 0 -.844 3.14c4.844 3.619 9.4 4.915 13.338 4.915a17.14 17.14 0 0 0 11.738-4.545l.182-.167a11.354 11.354 0 0 0 3.348-8.081c0-.225-.02-.445-.032-.667a8.041 8.041 0 0 0 1.962-1.421l3.16-3.161.342.342a1.749 1.749 0 0 0 2.475 0l4.722-4.722c.011-.011.018-.025.029-.036s.023-.018.033-.029l51.844-57.46a6.236 6.236 0 0 0 -.219-8.589zm-70.1 81.311-.122.111c-.808.787-7.667 6.974-17.826 1.221a9.166 9.166 0 0 0 4.36-7.036 1.758 1.758 0 0 0 .036-.273 7.892 7.892 0 0 1 9.122-7.414c.017.005.031.014.048.019a1.717 1.717 0 0 0 .379.055 7.918 7.918 0 0 1 4 13.317zm5.239-10.131c-.093.093-.194.176-.293.26a11.459 11.459 0 0 0 -6.289-6.286c.084-.1.167-.2.261-.3l3.161-3.161 6.321 6.326zm7.214-4.057-9.479-9.479 2.247-2.247 9.479 9.479zm55.267-60.879-50.61 56.092-9.348-9.348 56.092-50.61a2.737 2.737 0 0 1 3.866 3.866z" fill="#7D8590"></path></svg>
    Appearance
  </button>
  <button class="value">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="svg8"><g transform="translate(-33.022 -30.617)" id="layer1"><path d="m49.021 31.617c-2.673 0-4.861 2.188-4.861 4.861 0 1.606.798 3.081 1.873 3.834h-7.896c-1.7 0-3.098 1.401-3.098 3.1s1.399 3.098 3.098 3.098h4.377l.223 2.641s-1.764 8.565-1.764 8.566c-.438 1.642.55 3.355 2.191 3.795s3.327-.494 3.799-2.191l2.059-5.189 2.059 5.189c.44 1.643 2.157 2.631 3.799 2.191s2.63-2.153 2.191-3.795l-1.764-8.566.223-2.641h4.377c1.699 0 3.098-1.399 3.098-3.098s-1.397-3.1-3.098-3.1h-7.928c1.102-.771 1.904-2.228 1.904-3.834 0-2.672-2.189-4.861-4.862-4.861zm0 2c1.592 0 2.861 1.27 2.861 2.861 0 1.169-.705 2.214-1.789 2.652-.501.203-.75.767-.563 1.273l.463 1.254c.145.393.519.654.938.654h8.975c.626 0 1.098.473 1.098 1.1s-.471 1.098-1.098 1.098h-5.297c-.52 0-.952.398-.996.916l-.311 3.701c-.008.096-.002.191.018.285 0 0 1.813 8.802 1.816 8.82.162.604-.173 1.186-.777 1.348s-1.184-.173-1.346-.777c-.01-.037-3.063-7.76-3.063-7.76-.334-.842-1.525-.842-1.859 0 0 0-3.052 7.723-3.063 7.76-.162.604-.741.939-1.346.777s-.939-.743-.777-1.348c.004-.019 1.816-8.82 1.816-8.82.02-.094.025-.189.018-.285l-.311-3.701c-.044-.518-.477-.916-.996-.916h-5.297c-.627 0-1.098-.471-1.098-1.098s.472-1.1 1.098-1.1h8.975c.419 0 .793-.262.938-.654l.463-1.254c.188-.507-.062-1.07-.563-1.273-1.084-.438-1.789-1.483-1.789-2.652.001-1.591 1.271-2.861 2.862-2.861z" id="path26276" fill="#7D8590"></path></g></svg>
    Accessibility
  </button>
  <button class="value">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 25" fill="none"><path fill-rule="evenodd" fill="#7D8590" d="m11.9572 4.31201c-3.35401 0-6.00906 2.59741-6.00906 5.67742v3.29037c0 .1986-.05916.3927-.16992.5576l-1.62529 2.4193-.01077.0157c-.18701.2673-.16653.5113-.07001.6868.10031.1825.31959.3528.67282.3528h14.52603c.2546 0 .5013-.1515.6391-.3968.1315-.2343.1117-.4475-.0118-.6093-.0065-.0085-.0129-.0171-.0191-.0258l-1.7269-2.4194c-.121-.1695-.186-.3726-.186-.5809v-3.29037c0-1.54561-.6851-3.023-1.7072-4.00431-1.1617-1.01594-2.6545-1.67311-4.3019-1.67311zm-8.00906 5.67742c0-4.27483 3.64294-7.67742 8.00906-7.67742 2.2055 0 4.1606.88547 5.6378 2.18455.01.00877.0198.01774.0294.02691 1.408 1.34136 2.3419 3.34131 2.3419 5.46596v2.97007l1.5325 2.1471c.6775.8999.6054 1.9859.1552 2.7877-.4464.795-1.3171 1.4177-2.383 1.4177h-14.52603c-2.16218 0-3.55087-2.302-2.24739-4.1777l1.45056-2.1593zm4.05187 11.32257c0-.5523.44772-1 1-1h5.99999c.5523 0 1 .4477 1 1s-.4477 1-1 1h-5.99999c-.55228 0-1-.4477-1-1z" clip-rule="evenodd"></path></svg>
    Notifications
  </button>
</div>
<style>
/* From Uiverse.io by shadowmurphy - Tags: profile, notification, github, radio, svg, git, account, public profile, appearance, accessibility */
.input {
  display: flex;
  flex-direction: column;
  width: 200px;
  background-color: #0D1117;
  justify-content: center;
  border-radius: 5px
}

.value {
  background-color: transparent;
  border: none;
  padding: 10px;
  color: white;
  display: flex;
  position: relative;
  gap: 5px;
  cursor: pointer;
  border-radius: 4px;
}

.value:not(:active):hover,
.value:focus {
  background-color: #21262C;
}

.value:focus,
.value:active {
  background-color: #1A1F24;
  outline: none;
}

.value::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -10px;
  width: 5px;
  height: 80%;
  background-color: #2F81F7;
  border-radius: 5px;
  opacity: 0;
}

.value:focus::before,
.value:active::before {
  opacity: 1;
}

.value svg {
  width: 15px
}
</style>


================================================
FILE: Radio-buttons/shadowmurphy_slippery-chicken-56.html
================================================
<form class="radio-form">
  <input checked="" value="a" name="hopping" type="radio" id="a">
  <label for="a"><span></span>A</label>
  <input value="b" name="hopping" type="radio" id="b">
  <label for="b"><span></span>B</label>
  <input value="c" name="hopping" type="radio" id="c">
  <label for="c"><span></span>C</label>
  <div class="worm">
    <div class="worm__segment"></div>
  </div>
</form>

<style>
/* From Uiverse.io by shadowmurphy - Tags: circle, radio, radio-buttons, variations */
.radio-form {
  display: block;
  margin: auto;
  max-width: 10em;
  position: relative;
}

.radio-form input {
  position: fixed;
  top: -1.5em;
  left: -1.5em;
}

.radio-form label {
  cursor: pointer;
  display: block;
  font-weight: bold;
  text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.2);
  transition: color 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.radio-form label:not(:last-of-type) {
  margin-bottom: 1.5em;
}

.radio-form label span {
  box-shadow: 0 0 0 0.2em currentColor inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.2), 0 0.3em 0.2em rgba(0, 0, 0, 0.2) inset;
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: bottom;
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  transition: transform 0.2s cubic-bezier(0.5, 0, 0.5, 2), box-shadow 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95), color 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.radio-form input:checked + label,
.radio-form input:checked + label span {
  color: #255ff4;
}

.radio-form input:checked + label,
.radio-form input:checked + label span {
  transition-delay: 0.4s;
}

.radio-form label span {
  transform: scale(1.2);
}

.radio-form .worm {
  top: 0.375em;
  left: 0.375em;
  position: absolute;
}

.radio-form .worm__segment {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.radio-form .worm__segment:before {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  background: currentColor;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.radio-form .worm__segment:first-child:before,
.radio-form .worm__segment:last-child:before {
  box-shadow: 0 0 1em 0 currentColor;
}

@keyframes hop1 {
  from,
  to {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-1.5em);
  }
}

@keyframes hop2 {
  from,
  to {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-1.5em);
  }
}

@keyframes hop3 {
  from,
  to {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-1.5em);
  }
}

.radio-form input:nth-of-type(1):checked ~ .worm .worm__segment {
  transform: translateY(0);
}

.radio-form input:nth-of-type(1):checked ~ .worm .worm__segment:before {
  animation-name: hop1;
}

.radio-form input:nth-of-type(2):checked ~ .worm .worm__segment {
  transform: translateY(3em);
}

.radio-form input:nth-of-type(2):checked ~ .worm .worm__segment:before {
  animation-name: hop2;
}

.radio-form input:nth-of-type(3):checked ~ .worm .worm__segment {
  transform: translateY(6em);
}

.radio-form input:nth-of-type(3):checked ~ .worm .worm__segment:before {
  animation-name: hop3;
}

@media screen and (prefers-color-scheme: dark) {
  body {
    background: #17181c;
    color: #e3e4e8;
  }

  .radio-form input:checked + label,
  .radio-form input:checked + label span,
  .radio-form .worm__segment:before {
    color: #5583f6;
  }
}

</style>


================================================
FILE: Radio-buttons/shlomo20_tough-parrot-85.html
================================================
<div class="radio-input">
  
  <input value="value-1" name="value-radio" id="value-1" type="radio">
  <input value="value-2" name="value-radio" id="value-2" type="radio">
  <input value="value-3" name="value-radio" id="value-3" type="radio">
</div>
<style>
/* From Uiverse.io by shlomo20 - Tags: radio */
.radio-input {
  display: flex;
  box-shadow: inset 0px 0px 10px 1px #ffffff;
  border-radius: 25px;
  border: 5px solid#000000;
  overflow: hidden;
}

.radio-input:has(input:nth-child(1):checked) {
  background: conic-gradient(from 300deg at 18% 50%, #e5719e, #7af4ec, #1a3271, #101a2e, #a859a0);
}

.radio-input:has(input:nth-child(2):checked) {
  background: conic-gradient(from 300deg at 51% 50%, #e5719e, #7af4ec, #1a3271, #101a2e, #a859a0);
}

.radio-input:has(input:nth-child(3):checked) {
  background: conic-gradient(from 300deg at 84% 50%, #e5719e, #7af4ec, #1a3271, #101a2e, #a859a0);
}

.radio-input input[type="radio"] {
  appearance: none;
  backdrop-filter: blur(16px);
  background-color: transparent;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  margin: 10px;
}

.radio-input input[type="radio"]::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  /* transform: scale(0); */
  transition: 120ms transform ease-in-out;
  background-color: transparent;
  box-shadow: 0px 0px 10px 1px #ffffff;
  border: 1px solid #0000005d;
}

.radio-input input[type="radio"]:hover::before {
  background-color: #7af4ec;
  box-shadow: 0px 0px 10px 1px #7af4ec;
}

.radio-input input[type="radio"]:checked {
  background: conic-gradient(from 300deg at 50% 50%, #e5719e, #7af4ec, #1a3271, #101a2e, #a859a0);
}

.radio-input input[type="radio"]:checked::before {
  /* transform: scale(1); */
  width: 1em;
  height: 1em;
  background-color: #1e4ada94;
  box-shadow: 0px 0px 30px 20px #a35a99;
}  
</style>


================================================
FILE: Radio-buttons/spj2401Dev_lucky-moth-60.html
================================================
<fieldset>
  <legend>Frameworks</legend>

  <div class="button-group">
    <input type="radio" id="svelt" name="frameworks" checked="" />
    <label for="svelt">Svelt</label>
  </div>

  <div class="button-group">
    <input type="radio" id="react" name="frameworks" />
    <label for="react">React</label>
  </div>

  <div class="button-group">
    <input type="radio" id="vue" name="frameworks" />
    <label for="vue">Vue</label>
  </div>
</fieldset>

<style>
/* From Uiverse.io by spj2401Dev  - Tags:  */
.button-group {
  flex-grow: 1;
  margin: auto;
}

.button-group input[type="radio"] {
  display: none;
}

.button-group label {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #2b426d;
  background-color: #385c7e;
  color: white;
  border-radius: 15px;
  transition: all ease 0.2s;
  text-align: center;
  flex-grow: 1;
  flex-basis: 0;
  width: 90px;
  font-size: 13px;
  margin: 5px;
  box-shadow: 0px 0px 50px -15px #000000;
}

.button-group input[type="radio"]:checked + label {
  background-color: white;
  color: #02375a;
  border: 1px solid #2b426d;
}

fieldset {
  border: 0;
  display: flex;
}

</style>
    

================================================
FILE: Radio-buttons/vk-uiux_sour-stingray-86.html
================================================
<div class="radio-input-wrapper">
  <label class="label">
    <input value="value-2" name="value-radio" id="value-2" class="radio-input" type="radio">
    <div class="radio-design"></div>
    <div class="label-text">Clouds</div>
  </label>
  <label class="label">
    <input value="value-3" name="value-radio" id="value-3" class="radio-input" type="radio">
    <div class="radio-design"></div>
    <div class="label-text">Earth</div>
  </label>
  <label class="label">
    <input value="value-4" name="value-radio" id="value-4" class="radio-input" type="radio">
    <div class="radio-design"></div>
    <div class="label-text">Water</div>
  </label>
</div>
<style>
/* From Uiverse.io by vk-uiux - Source: https://codepen.io/AbubakerSaeed/pen/MWaEqJP - Tags: list, gradient, card, radio, animated, radio-buttons, html, css, hover effect, css effect */
/* MAIN */
/* =============================================== */
.label {
  display: flex;
  align-items: center;
  border-radius: 100px;
  padding: 14px 16px;
  margin: 5px 0;
  cursor: pointer;
  transition: .3s;
}

.label:hover,
.label:focus-within,
.label:active {
  background: hsla(0, 0%, 80%, .14);
}

.radio-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  z-index: -1;
}

.radio-design {
  width: 22px;
  height: 22px;
  border-radius: 100px;
  background: linear-gradient(to right bottom, hsl(154, 97%, 62%), hsl(225, 97%, 62%));
  position: relative;
}

.radio-design::before {
  content: '';
  display: inline-block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: hsl(0, 0%, 90%);
  transform: scale(1.1);
  transition: .3s;
}

.radio-input:checked+.radio-design::before {
  transform: scale(0);
}

.label-text {
  color: hsl(0, 0%, 60%);
  margin-left: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 900;
  transition: .3s;
}

.radio-input:checked~.label-text {
  color: hsl(0, 0%, 40%);
}
</style>


================================================
FILE: Radio-buttons/watchakorn-18k_slimy-eel-61.html
================================================
<div class="radio-input">
  <input value="value-1" name="value-radio" id="value-1" type="radio">
  <label for="value-1"></label>
  <input value="value-2" name="value-radio" id="value-2" type="radio">
  <label for="value-2"></label>
  <input value="value-3" name="value-radio" id="value-3" type="radio">
  <label for="value-3"></label>
</div>
<style>
/* From Uiverse.io by watchakorn-18k - Tags: radio */
.radio-input {
  scale: 2;
}

.radio-input input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-input label {
  position: relative;
  display: inline-block;
  margin: 5px;
  cursor: pointer;
}

.radio-input label::before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border-radius: 50%;
  border: 1px solid #f35;
  box-shadow: 0px 0px 5px -1px rgb(255, 51, 85) inset,0px 0px 5px -1px rgb(255, 51, 85);
}

.radio-input input[type="radio"]:checked + label::before {
  background-color: #f35;
}

.radio-input ::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 60%;
  left: 60%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-image: radial-gradient(
    farthest-corner at 40px 40px,
    rgb(134, 14, 34) 80%,
    rgb(20, 11, 116) 100%);
  box-shadow: 0px 0px 5px -1px #f35 inset,0px 0px 5px -1px #f35;
  scale: 1.2;
  transition: transform 0.25s ease-in-out;
}

.radio-input label:hover::before {
  background-image: radial-gradient(
    farthest-corner at 40px 40px,
    #f35 50%,
    #43e 100%);
  border: 0px;
  box-shadow: 0px 0px 5px -1px #43e inset,0px 0px 5px -1px #43e;
}

.radio-input label:hover::after {
  transform: translate(-50%, -50%) scale(1.5);
}




</style>


================================================
FILE: Radio-buttons/wizard503_serious-monkey-58.html
================================================
<div class="box">
  <div class="radio-input">
    <input name="challenge" value="Option 1" type="radio" id="1id">
    <label for="1id">Never</label><br>
    <input name="challenge" value="Option 2" type="radio" id="2id">
    <label for="2id">Stop</label><br>
    <input name="challenge" value="Option 3" type="radio" id="3id">
    <label for="3id">Dreaming </label><br>
  </div>
</div>
<style>
/* From Uiverse.io by wizard503 - Tags: radio */
.box {
  position: relative;
  width: 300px;
  height: 150px;
  background: tra;
  border-radius: 8px;
  overflow: hidden;
}

.box::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 400px;
  height: 450px;
  background: linear-gradient(0deg,transparent,transparent,#2df4e9,#2df4e9,#48fb00);
  z-index: 1;
  transform-origin: bottom right;
  animation: animate 5s linear infinite;
}

.box::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 400px;
  height: 450px;
  background: linear-gradient(0deg,transparent,transparent,#f07f90,#f07f90,#c70000);
  z-index: 1;
  transform-origin: bottom right;
  animation: animate 5s linear infinite;
  animation-delay: -2.5s;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.box .radio-input {
  position: absolute;
  inset: 4px;
  background-color: #161616;
  background-image: radial-gradient(ellipse at center, #eb3be3 0%, #231f55 70%);
  background-size: 100% 100%;
  animation: noise 1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  border-radius: 10px;
  padding: 50px 0px;
  z-index: 2;
  display: flex;
}

@keyframes noise {
  0%, 20%, 40%, 60%, 80%, 100% {
    background-position: 0 0;
  }

  10% {
    background-position: -5px -5px;
  }

  30% {
    background-position: 5px -5px;
  }

  50% {
    background-position: -5px 5px;
  }

  70% {
    background-position: 5px 5px;
  }
}

.radio-input input {
  appearance: none;
  width: 1.3em;
  height: 1.3em;
  margin: 12px;
  font-size: inherit;
  color: currentColor;
  border: 0.2em solid #33f8ff;
  box-shadow: 2px 2px 1px 0px rgb(7, 15, 63),4px 4px 5px 1px #690253 inset;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  outline: none;
  transition: all 0.2s ease-in-out;
}

.radio-input input:checked {
  width: 1.2em;
  height: 1.2em;
  appearance: none;
  border-radius: 0%;
  rotate: 45deg;
  border: 0.2em solid #ff0;
  -webkit-appearance: none;
  -moz-appearance: none;
  transform: scale(1.4);
  transition: 120ms transform ease-in-out;
  box-shadow: 9px 9px 10px 1px #5f0875 inset,12px -12px 10px 1px #2df4e9 inset,0 0 20px #ff0,0 0 20px #ff0;
}

label {
  cursor: pointer;
  padding-top: 5%;
  font-size: 15px;
  font-weight: bold;
  text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.2);
  transition: color 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
</style>


================================================
FILE: Radio-buttons/yaroslavas2001_white-ape-33.html
================================================
<div class="radio-input">
  <svg class="top_hand" width="60" height="29" viewBox="0 0 137 64" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.809473 14.0106C0.932949 14.8606 1.71126 16.7901 2.43332 18.0113C4.22178 21.0082 7.38337 24.6271 10.7735 27.5176C16.1188 32.0703 24.3802 37.5687 29.6583 40.0845C30.5268 40.494 31.1664 40.9069 31.5241 41.2887C32.527 42.3438 34.6516 44.1531 35.766 44.8951C39.744 47.5533 43.742 48.2385 48.5595 47.1041C50.5552 46.6327 51.7022 46.482 52.5699 46.6117C53.9507 46.8006 56.6314 48.0174 60.2095 50.055C66.6117 53.7191 68.4207 54.6602 70.9203 55.6544C72.5949 56.3124 74.8008 56.8376 76.0316 56.8845C78.8436 56.9853 80.9446 55.6606 82.0853 53.0743C82.2485 52.6812 82.3455 52.3437 82.285 52.297C82.2195 52.2699 82.3099 51.8373 82.4907 51.3349C83.1969 49.3516 83.21 48.4539 82.569 47.1188C82.0646 46.0986 81.2338 45.1394 79.5862 43.6909C78.0597 42.3355 76.0996 41.0553 72.9307 39.3195C69.3327 37.3596 68.0467 36.8015 66.2001 36.41C65.2768 36.2143 64.5334 36.044 64.5311 36.0124C64.5483 35.9857 66.0455 35.4796 67.8741 34.8928C71.4802 33.7165 71.8754 33.5488 72.2467 32.9502C72.4581 32.6109 72.5192 32.5748 72.5986 32.7092C72.7502 32.9656 72.535 33.5214 72.1259 33.9446C71.8173 34.2589 71.2978 34.4672 69.2277 35.1473C67.8354 35.6079 66.6552 36.009 66.5942 36.0451C66.5331 36.0813 67.2471 36.2854 68.1777 36.4933C69.5479 36.8038 70.2469 37.0663 71.9177 37.9408C73.0476 38.5417 74.689 39.4501 75.5713 39.9667C77.8473 41.3074 78.9672 41.5847 81.4477 41.4036C82.8522 41.2983 83.912 41.0837 86.0059 40.4719C88.8482 39.6484 90.6774 39.3414 92.5312 39.3826L93.1175 39.3985L92.3168 39.0479C84.6062 35.6795 84.2542 35.558 83.0744 35.5139C82.4881 35.4979 81.2317 35.2684 80.2651 34.9994C79.3107 34.7232 78.0059 34.4399 77.3713 34.3701C75.1711 34.1053 73.7853 33.5733 72.9323 32.6602C72.6929 32.4227 72.4591 32.083 72.4213 31.9075C72.3546 31.6833 72.4734 31.7449 72.9355 32.1639C73.9272 33.0608 75.4808 33.6255 77.8559 33.9353C78.3372 33.9967 78.9374 34.1198 79.1728 34.2114C80.2916 34.6541 82.4781 35.1743 83.3708 35.2068C84.5067 35.2603 85.259 35.5572 91.5349 38.4224C93.7232 39.4195 95.6077 40.3489 95.731 40.4738C95.8348 40.5937 96.4718 41.4201 97.1377 42.2955C99.4103 45.3028 102.052 48.4877 103.222 49.6582C104.658 51.0836 105.473 52.5462 106.774 56.1118C107.833 58.9629 108.898 60.5415 110.786 62.0622C113.125 63.9264 116.207 64.428 117.818 63.1951C118.62 62.5725 119.199 61.7685 119.178 61.2866C119.168 61.0456 118.795 60.2768 118.136 59.1339C117.171 57.4464 117.085 57.2171 116.424 54.8723C115.508 51.6231 114.555 48.561 114.234 47.7949C114.095 47.4485 107.6 38.0601 107.579 37.9408C107.513 37.6338 114.925 47.3201 115.823 48.1409C117.373 49.5645 118.116 50.5425 120.286 53.9896C122.67 57.7714 122.934 58.0772 124.862 59.3597C126.41 60.3891 128.008 60.9444 129.649 61.045C131.182 61.1279 132.302 60.8772 133.131 60.2719C133.869 59.7365 134.747 58.657 134.932 58.0207C135.106 57.4233 134.812 56.8715 133.597 55.5961C132.993 54.9644 132.464 54.2384 131.822 53.1515L125.082 44.1252L119.178 37.2685L124.126 42.2172L129.386 48.7511L131.537 50.6875C132.398 51.0102 133.908 51.0336 134.932 50.6875C135.367 50.2815 136.36 48.8694 136.434 48.3808C136.47 48.162 136.368 47.9911 136.011 47.6092C135.75 47.335 135.131 46.679 134.643 46.16C133.991 45.4746 133.224 44.4283 131.869 42.3611C128.817 37.6724 127.371 35.9234 123.898 32.6699C122.795 31.6409 120.06 29.0223 117.828 26.8644C113.781 22.9454 112.83 22.0901 111.744 21.397C110.201 20.4309 108.323 20.3214 102.186 20.8683L99.7658 21.096L97.9885 20.5152C94.9292 19.5222 93.1102 18.62 89.0707 16.0806C86.216 14.2909 84.2393 13.3171 82.5487 12.8829C80.229 12.2767 78.75 12.2282 75.0954 12.6256C71.8328 12.989 69.8519 13.0395 65.3055 12.8764C63.3108 12.8197 60.4033 12.8083 58.8749 12.8714C55.4434 13.005 54.609 12.9875 52.3727 12.6616C46.1717 11.7628 40.0645 8.76483 31.9895 2.66172L29.6384 0.887458L27.3346 1.59036C19.2897 4.03973 11.8701 7.24008 4.10989 11.5647L0.732716 13.4627L0.809473 14.0106ZM16.3102 27.2929C21.7758 33.1919 25.6752 36.7206 28.0205 37.872L28.7457 38.2343L27.9395 37.9858C26.8468 37.643 24.809 36.3428 23.1925 34.9747C20.5598 32.7242 18.148 30.1782 14.616 25.9049C11.376 21.9862 11.531 22.1089 16.3102 27.2929ZM134.815 47.7889C135.786 48.2039 135.812 48.2211 135.098 48.017C134.676 47.8877 134.113 47.6602 133.861 47.5126C133.23 47.1436 133.529 47.2307 134.815 47.7889Z" fill="url(#paint0_linear_16_22)">
    </path>
    <defs>
      <linearGradient id="paint0_linear_16_22" x1="116.5" y1="66.5" x2="18.5" y2="-19.5" gradientUnits="userSpaceOnUse">
        <stop stop-color="white"></stop>
        <stop offset="1" stop-color="#212121" stop-opacity="0.3"></stop>
      </linearGradient>
    </defs>
  </svg>

  <div class="radio_item">
    <input type="radio" id="value-1" name="value-radio" value="Earth" class="radio">
    <div class="sphere_lines  earth_input"></div>
    <div class="sphere_lines_back  earth_input"></div>
    <svg class="sphere earth_input_planet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50" viewBox="-1.2 -1.2 2.2 2.2">
      <g stroke-width="0.009">
        <circle r="1"></circle>
        <g id="grid">
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-0.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-1.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-1.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-2.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-2.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-3.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-3.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-4.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-4.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-5.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-5.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-6.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-6.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-7.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-7.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-8.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-8.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-9.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-9.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
        </g>

      </g>
    </svg>
    <label for="value-1" class="pointer">Earth</label>
  </div>


  <div class="radio_item">
    <input type="radio" id="value-2" name="value-radio" value="Moon" class="radio">
    <svg class="sphere moon_input_planet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25" viewBox="-1.2 -1.2 2.2 2.2">
      <g stroke="rgba(0, 0, 0, 0.2)" stroke-width="0.009">
        <circle r="1"></circle>
        <g id="grid">
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-0.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-1.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-1.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-2.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-2.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-3.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-3.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-4.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-4.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-5.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-5.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-6.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-6.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-7.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-7.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-8.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-8.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-9.0s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-9.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
        </g>

      </g>
    </svg>
    <div class="sphere_lines  moon_input"></div>
    <div class="sphere_lines_back  moon_input"></div>
    <label for="value-2" class="pointer">Moon</label>
  </div>



  <div class="radio_item">
    <input type="radio" id="value-3" name="value-radio" value="Mars" class="radio">
    <svg class="sphere mars_input_planet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35" viewBox="-1.2 -1.2 2.2 2.2">
      <g stroke-width="0.009">
        <circle r="1"></circle>

        <g id="grid">
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-0.5s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-1.0s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-1.5s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-2.0s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-2.5s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-3.0s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-3.5s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-4.0s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-4.5s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-5.0s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-5.5s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-6.0s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-6.5s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-7.0s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-7.5s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-8.0s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-8.5s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-9.0s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
          <path d="M0 1A1 1 0 0 1 0-1">
            <animateTransform attributeName="transform" type="scale" begin="-9.5s" dur="11s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
          </path>
        </g>

      </g>
    </svg>
    <div class="sphere_lines  mars_input"></div>
    <div class="sphere_lines_back  mars_input"></div>
    <label for="value-3" class="pointer">Mars</label>
  </div>
  <svg class="bottom_hand" width="60" height="30" viewBox="0 0 135 66" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M134.909 53.0073C134.809 52.1543 134.083 50.2045 133.394 48.9643C131.686 45.9204 128.623 42.2177 125.312 39.2371C120.091 34.5423 111.981 28.8235 106.772 26.1666C105.915 25.7339 105.287 25.304 104.94 24.9126C103.966 23.8309 101.89 21.9651 100.796 21.1934C96.8913 18.4291 92.9132 17.6367 88.0669 18.641C86.0592 19.0585 84.9087 19.1783 84.0447 19.0253C82.6695 18.7993 80.0225 17.5108 76.5005 15.3777C70.1993 11.5426 68.4162 10.5532 65.9442 9.49207C64.288 8.78926 62.097 8.20494 60.8679 8.12498C58.0597 7.94851 55.9238 9.21615 54.7139 11.7708C54.5402 12.1594 54.4341 12.4942 54.4934 12.5425C54.5581 12.5714 54.4561 13.0013 54.2618 13.4988C53.5025 15.4623 53.4653 16.3594 54.0702 17.7112C54.5469 18.7446 55.3516 19.7258 56.9596 21.2181C58.4491 22.614 60.3741 23.9466 63.4951 25.767C67.0391 27.823 68.3096 28.4155 70.145 28.8566C71.0627 29.0771 71.8012 29.2672 71.8026 29.2989C71.7847 29.3251 70.2745 29.7908 68.4307 30.3281C64.7943 31.407 64.3947 31.564 64.0075 32.1524C63.787 32.4859 63.725 32.5203 63.6492 32.3839C63.5045 32.1235 63.7346 31.5737 64.1549 31.1617C64.4719 30.8558 64.9969 30.6615 67.0845 30.0374C68.4886 29.6144 69.6792 29.2451 69.7412 29.2107C69.8032 29.1762 69.095 28.953 68.1704 28.7201C66.809 28.3728 66.1172 28.0917 64.4706 27.1725C63.3573 26.5414 61.741 25.5892 60.8729 25.049C58.6337 23.6475 57.5217 23.3402 55.0373 23.4545C53.6304 23.522 52.5652 23.7079 50.4556 24.2632C47.5922 25.0099 45.7554 25.2676 43.9034 25.1766L43.3178 25.1448L44.1087 25.5169C51.7259 29.0916 52.0745 29.2225 53.2527 29.2983C53.8383 29.33 55.0881 29.5933 56.0471 29.8882C56.9938 30.19 58.2904 30.5083 58.9229 30.5952C61.1152 30.919 62.4862 31.4882 63.3143 32.4238C63.5472 32.6677 63.7718 33.0136 63.8049 33.19C63.8655 33.416 63.7484 33.3512 63.2978 32.9199C62.3305 31.9966 60.7927 31.3903 58.4268 31.0168C57.9473 30.9424 57.3506 30.8032 57.1178 30.7053C56.0113 30.2327 53.8397 29.6538 52.9481 29.5973C51.8141 29.5132 51.07 29.1963 44.8734 26.1632C42.7128 25.1076 40.854 24.1278 40.7342 23.9997C40.6336 23.877 40.019 23.0337 39.3769 22.1408C37.1861 19.0734 34.6315 15.8186 33.4933 14.617C32.0961 13.1535 31.3204 11.6695 30.1162 8.07021C29.1338 5.19164 28.1114 3.58492 26.265 2.014C23.9777 0.0875452 20.9104 -0.49681 19.2665 0.692307C18.4479 1.29307 17.8471 2.08124 17.8554 2.56352C17.8595 2.80466 18.2108 3.58321 18.8392 4.74347C19.7582 6.45629 19.8381 6.68779 20.4361 9.04961C21.2641 12.3223 22.1349 15.4089 22.4352 16.1833C22.5647 16.5333 28.8043 26.0931 28.8222 26.213C28.8801 26.5216 21.7311 16.6394 20.8561 15.7947C19.3445 14.3299 18.628 13.3322 16.5516 9.82803C14.2698 5.98347 14.0149 5.67067 12.1217 4.33675C10.6018 3.26603 9.01995 2.66795 7.38157 2.52321C5.85205 2.39914 4.72488 2.61958 3.88017 3.20242C3.1278 3.71775 2.22107 4.77323 2.01987 5.40432C1.82969 5.99684 2.10803 6.55629 3.28889 7.864C3.87587 8.51166 4.3843 9.25164 4.99745 10.3554L11.4916 19.5599L17.2091 26.5729L12.3964 21.4929L7.31448 14.8198L5.21578 12.8262C4.36414 12.4805 2.85457 12.4164 1.82255 12.7349C1.37609 13.129 0.345356 14.5139 0.258529 15.0003C0.217183 15.218 0.313634 15.3917 0.660864 15.783C0.914398 16.0641 1.51516 16.7366 1.98916 17.2685C2.62299 17.9713 3.36153 19.0378 4.65949 21.1406C7.58472 25.9098 8.98329 27.697 12.3674 31.0428C13.4422 32.1011 16.1057 34.7923 18.2786 37.0095C22.2194 41.036 23.1468 41.9166 24.2133 42.6387C25.7304 43.646 27.6044 43.8059 33.7542 43.4244L36.1794 43.2619L37.9404 43.8903C40.9718 44.9652 42.7659 45.916 46.7357 48.5632C49.5411 50.4291 51.4909 51.4557 53.1692 51.9353C55.4718 52.6037 56.9489 52.6919 60.6129 52.393C63.8842 52.1175 65.8657 52.1203 70.406 52.4057C72.3985 52.516 75.3046 52.6057 76.8341 52.5837C80.268 52.5425 81.1016 52.5825 83.3284 52.9684C89.503 54.0337 95.5272 57.195 103.435 63.5131L105.738 65.35L108.059 64.7093C116.167 62.4773 123.67 59.4778 131.544 55.3635L134.971 53.5571L134.909 53.0073ZM119.772 39.3127C114.467 33.2688 110.664 29.6364 108.35 28.4224L107.635 28.0407L108.434 28.3108C109.517 28.6829 111.519 30.0375 113.098 31.4485C115.67 33.7691 118.012 36.379 121.428 40.7458C124.561 44.7503 124.41 44.6235 119.772 39.3127ZM1.86107 15.6356C0.902028 15.1946 0.875851 15.1767 1.58411 15.4C2.003 15.5405 2.55968 15.7831 2.80771 15.9374C3.42777 16.3232 3.13152 16.2282 1.86107 15.6356Z" fill="url(#paint0_linear_16_27)">
    </path>
    <defs>
      <linearGradient id="paint0_linear_16_27" x1="40.2231" y1="-13.6579" x2="116.323" y2="86.0298" gradientUnits="userSpaceOnUse">
        <stop stop-color="white"></stop>
        <stop offset="0.999442" stop-color="#212121" stop-opacity="0.3"></stop>
      </linearGradient>
    </defs>
  </svg>
</div>
<style>
/* From Uiverse.io by yaroslavas2001 - Tags: radio */
.radio-input {
  display: flex;
  flex-direction: column;
}

.radio_item {
  display: flex;
  align-items: center;
  margin: 3px;
}

.radio {
  height: 50px;
  width: 50px;
  opacity: 0;
  margin: 0px;
  margin-right: 1.5em;
  cursor: pointer;
}

.pointer {
  cursor: pointer;
}

.sphere {
  position: absolute;
  max-height: 50px;
  max-width: 50px;
  border-radius: 50%;
  z-index: -1;
}
/* hand */
.top_hand {
  animation: hand 6.66s linear infinite;
}

.bottom_hand {
  animation: hand 6.66s linear infinite;
}

@keyframes hand {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  90% {
    transform: rotate3d(0, 0, 1, -3deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

/* pick option - change image */
.radio:checked ~ .earth_input {
  display: none;
}

.earth_input_planet {
  display: none;
}

.radio:checked ~ .earth_input_planet {
  display: block;
  transform: rotateZ(23.4deg);
  fill: rgba(56, 192, 56, 0.148);
  stroke: rgba(0, 104, 241, 0.788);
}

.radio:checked ~ .moon_input {
  display: none;
}

.moon_input_planet {
  display: none;
}

.radio:checked ~ .moon_input_planet {
  display: block;
  fill: rgba(237, 234, 234, 0.224);
  stroke: rgba(174, 171, 171, 0.1);
  margin-left: 13px;
  transform: rotateZ(-23.4deg);
}

.radio:checked ~ .mars_input {
  display: none;
}

.mars_input_planet {
  display: none;
}

.radio:checked ~ .mars_input_planet {
  display: block;
  fill: rgba(192, 54, 0, 0.114);
  stroke: rgba(255, 254, 254, 0.162);
  margin-left: 8px;
  transform: rotateZ(43.9deg);
}

.radio:checked ~ label {
  font-weight: bold;
}
/* sphere_lines */
.sphere_lines, .sphere_lines_back {
  border: 1px dotted #fff;
  border-radius: 50%;
  height: 50px;
  transform-style: preserve-3d;
  width: 50px;
  position: absolute;
  z-index: -1;
  transition: all 0.5s ease-in-out;
}

.sphere_lines {
  animation: spin 6.66s linear infinite;
}

.sphere_lines_back {
  animation: spin_back 6.66s linear infinite;
}

.sphere_lines_back::before,
 .sphere_lines_back::after,.sphere_lines::before,
 .sphere_lines::after {
  border: 1px dotted #fff;
  border-radius: 50%;
  content: '';
  height: 50px;
  left: 0;
  position: absolute;
  top: 0;
  width: 50px;
  transition: all 0.5s ease-in-out;
}

.sphere_lines_back::before , .sphere_lines::before {
  transform: rotateX(-66.6deg);
}

.sphere_lines_back::after,.sphere_lines::after {
  transform: rotateX(66.6deg);
}

.radio:hover ~ .sphere_lines,
 .radio:hover ~.sphere_lines_back,
 .radio:hover ~ .sphere_lines_back::before,
 .radio:hover ~ .sphere_lines_back::after,
 .radio:hover ~ .sphere_lines::before,
 .radio:hover ~ .sphere_lines::after {
  border: 1.6px dotted #fff;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg) rotateX(10deg) rotateZ(0deg);
  }

  100% {
    transform: rotateY(360deg) rotateX(10deg) rotateZ(0deg);
  }
}

@keyframes spin_back {
  0% {
    transform: rotateY(70deg) rotateX(0deg) rotateZ(0deg);
  }

  100% {
    transform: rotateY(70deg) rotateX(0deg) rotateZ(360deg);
  }
}



</style>


================================================
FILE: Toggle-switches/3bdel3ziz-T_honest-deer-30.html
================================================
<div>
  <label class="switch" for="switch">
    <input id="switch" type="checkbox" class="circle" />
    <svg
      viewBox="0 0 384 512"
      xmlns="http://www.w3.org/2000/svg"
      class="moon svg"
    >
      !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License
      - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.
      <path
        d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
      ></path>
    </svg>
    <div class="sun svg">
      <span class="dot"></span>
    </div>
  </label>
</div>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: material design, icon, theme-switch, svg, hover effect, click animation, cool checkbox */
/* The switch container */
.switch {
  --transition: 300ms;
  --transition500: 500ms;
  --color-dark: #0c0f14;
  --color-darkGray: #21262e;
  --color-gray: #52555a;
  --color-offwhite: #cecece;
  --shadow-color: var(--color-dark);
  position: relative;
  display: flex;
  align-items: center;
  width: 60px;
  height: fit-content;
  background-color: var(--color-dark);
  border-radius: 30px;
  padding: 4px;
  transition: var(--transition500);
  user-select: none;
  cursor: pointer;
  overflow: hidden;
}

/* Svg styles */
.switch .svg {
  transition: var(--transition);
  position: absolute;
  left: 5px;
}
.switch .moon {
  width: 18px;
  fill: var(--color-gray);
  opacity: 1;
}

.switch .sun {
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  left: calc(100% - 21.5px);
  top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  scale: 0.8;
  opacity: 0;
}

.switch .sun .dot {
  positon: relative;
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-dark);
  background: white;
  z-index: 1;
  box-shadow: 11px 0px 0px var(--shadow-color),
    10.3px 0px 0px var(--shadow-color), -11px 0px 0px var(--shadow-color),
    -10.3px 0px 0px var(--shadow-color), 0px -11px 0px var(--shadow-color),
    0px -10.3px 0px var(--shadow-color), 0px 11px 0px var(--shadow-color),
    0px 10.3px 0px var(--shadow-color), 8px 8px 0px var(--shadow-color),
    7.3px 7.3px 0px var(--shadow-color), 8px -8px 0px var(--shadow-color),
    7.3px -7.3px 0px var(--shadow-color), -8px -8px 0px var(--shadow-color),
    -7.3px -7.3px 0px var(--shadow-color), -8px 8px 0px var(--shadow-color),
    -7.3px 7.3px 0px var(--shadow-color);
}

.switch .sun .dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--color-dark);
}

/*checkbox styles */
.switch .circle {
  appearance: none;
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  left: 0;
  background-color: var(--color-darkGray);
  border: 1px solid var(--color-darkGray);
  transition: var(--transition500);
  box-shadow: 1px 1px 20px 3px var(--color-darkGray);
}

.switch:has(.circle:checked) {
  background: var(--color-offwhite);
}

.switch .circle:hover {
  margin-left: 3px;
}
.switch .circle:checked:hover {
  margin-left: -3px;
}

.switch .circle:checked {
  left: calc(100% - 24px);
  background: white;
  border-color: white;
  box-shadow: 1px 1px 30px 12px white;
}

.switch:has(.circle:checked) > .sun {
  opacity: 1;
}

.switch:has(.circle:checked) > .moon {
  opacity: 0;
}

</style>
    

================================================
FILE: Toggle-switches/AIVIIID_spicy-horse-27.html
================================================
<div class="toggle-switch">
  <input id="toggle-switch" class="toggle-switch-checkbox" type="checkbox">
  <label for="toggle-switch" class="toggle-switch-label">
    <span class="toggle-switch-inner"></span>
    <span class="toggle-switch-switch"></span>
  </label>
  <span class="toggle-switch-text"></span>
</div>

<style>
/* From Uiverse.io by AIVIIID - Tags: switch */
.toggle-switch {
  position: relative;
  width: 90px;
  height: 34px;
  margin: 20px;
}

.toggle-switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ddd;
  border-radius: 34px;
  cursor: pointer;
  transition: all 0.4s ease;
}

.toggle-switch-label:before,
.toggle-switch-label:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.toggle-switch-label:before {
  left: 10px;
  width: 26px;
  height: 26px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.toggle-switch-label:after {
  left: 0;
  width: 46px;
  height: 34px;
  background-color: #fff;
  border-radius: 34px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
}

.toggle-switch-checkbox:checked + .toggle-switch-label:before {
  transform: translateX(46px);
}

.toggle-switch-checkbox:checked + .toggle-switch-label {
  background-color: #000000;
}

.toggle-switch-checkbox:checked + .toggle-switch-label:after {
  transform: scale(0);
}

.toggle-switch-text {
  position: absolute;
  top: 5px;
  left: 110px;
  font-size: 16px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 2px rgba(253, 251, 251, 0.2);
  transition: all 0.4s ease;
}

.toggle-switch-checkbox:checked + .toggle-switch-label + .toggle-switch-text {
  color: rgb(255, 255, 255);
}

</style>


================================================
FILE: Toggle-switches/AbanoubMagdy1_fluffy-octopus-90.html
================================================
<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
  <div class="slider-card">
    <div class="slider-card-face slider-card-front"></div>
    <div class="slider-card-face slider-card-back"></div>
  </div>
</label>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: switch, flip */
.switch {
  --circle-dim: 1.4em;
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5aeae;
  transition: .4s;
  border-radius: 30px;
}

.slider-card {
  position: absolute;
  content: "";
  height: var(--circle-dim);
  width: var(--circle-dim);
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  transition: .4s;
  pointer-events: none;
}

.slider-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  perspective: 1000px;
  border-radius: 50%;
  transition: .4s transform;
}

.slider-card-front {
  background-color: #DC3535;
}

.slider-card-back {
  background-color: #379237;
  transform: rotateY(180deg);
}

input:checked ~ .slider-card .slider-card-back {
  transform: rotateY(0);
}

input:checked ~ .slider-card .slider-card-front {
  transform: rotateY(-180deg);
}

input:checked ~ .slider-card {
  transform: translateX(1.5em);
}

input:checked ~ .slider {
  background-color: #9ed99c;
}
</style>


================================================
FILE: Toggle-switches/AbanoubMagdy1_pink-panda-32.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition: .3s cubic-bezier(0,2.18,.64,.69);
}

input:checked + .slider {
  background-color: #3bd826;
}

input:focus + .slider {
  box-shadow: 0 0 1px #3bd826;
}

input:checked + .slider:before {
  transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/AbanoubMagdy1_ugly-dodo-38.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
  <span class="text on">On</span>
  <span class="text off">Off</span>
</label>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 5.2em;
  height: 2em;
  overflow: hidden;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eee;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  border: 1px solid #333;
  left: 0.4em;
  bottom: 0.2em;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(3em);
}

.switch .text {
  position: absolute;
  top: 50%;
  pointer-events: none;
  text-transform: uppercase;
  transform: translateY(-50%);
  transition: .4s;
}

.switch .text.on {
  left: .8rem;
  transform: translateX(-3rem) translateY(-50%);
}

.switch .text.off {
  color: #999;
  right: .8rem;
}

input:checked ~ .text.off {
  transform: translateX(3rem) translateY(-50%);
}

input:checked ~ .text.on {
  transform: translateX(0) translateY(-50%);
}
</style>


================================================
FILE: Toggle-switches/Adir-SL_warm-falcon-58.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Adir-SL - Tags: switch */
/* The switch - the box around the slider */
.switch {
  --sizeVar: 2em;
  --color-primary: #dedede;
  --color-secondary: #aaaaaa;
  --color-primary-on: #1d9bf0;
  --color-secondary-on: #ffffff;
  position: absolute;
  width: calc(var(--sizeVar) * 2);
  height: var(--sizeVar);
  background-color: var(--color-primary);
  border-radius: var(--sizeVar);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background-color 150ms ease-out;
}

.switch::after {
  content: "";
  position: absolute;
  margin: calc(var(--sizeVar) / 10);
  height: calc(var(--sizeVar) - calc(var(--sizeVar) / 5));
  width: calc(var(--sizeVar) - calc(var(--sizeVar) / 5));
  background-color: var(--color-secondary);
  border-radius: var(--sizeVar);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset, 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 150ms ease-out, background-color 150ms ease-out;
}

.switch:has(input:checked)::after {
  transform: translateX(var(--sizeVar));
  background-color: var(--color-secondary-on);
}

.switch:has(input:checked) {
  background-color: var(--color-primary-on);
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
</style>


================================================
FILE: Toggle-switches/Admin12121_massive-dodo-67.html
================================================
<label class="switch-button" for="switch">
  <div class="switch-outer">
    <input id="switch" type="checkbox">
    <div class="button">
      <span class="button-toggle"></span>
      <span class="button-indicator"></span>
    </div>
  </div>
</label>
<style>
/* From Uiverse.io by Admin12121 - Tags: switch, animated, click effect */
.switch-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  justify-content: center;
  margin: auto;
  height: 55px;
}

.switch-button .switch-outer {
  height: 100%;
  background: #252532;
  width: 115px;
  border-radius: 165px;
  -webkit-box-shadow: inset 0px 5px 10px 0px #16151c, 0px 3px 6px -2px #403f4e;
  box-shadow: inset 0px 5px 10px 0px #16151c, 0px 3px 6px -2px #403f4e;
  border: 1px solid #32303e;
  padding: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.switch-button .switch-outer input[type="checkbox"] {
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
}

.switch-button .switch-outer .button-toggle {
  height: 42px;
  width: 42px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#3b3a4e),
    to(#272733)
  );
  background: -o-linear-gradient(#3b3a4e, #272733);
  background: linear-gradient(#3b3a4e, #272733);
  border-radius: 100%;
  -webkit-box-shadow: inset 0px 5px 4px 0px #424151, 0px 4px 15px 0px #0f0e17;
  box-shadow: inset 0px 5px 4px 0px #424151, 0px 4px 15px 0px #0f0e17;
  position: relative;
  z-index: 2;
  -webkit-transition: left 0.3s ease-in;
  -o-transition: left 0.3s ease-in;
  transition: left 0.3s ease-in;
  left: 0;
}

.switch-button
  .switch-outer
  input[type="checkbox"]:checked
  + .button
  .button-toggle {
  left: 58%;
}

.switch-button
  .switch-outer
  input[type="checkbox"]:checked
  + .button
  .button-indicator {
  -webkit-animation: indicator 1s forwards;
  animation: indicator 1s forwards;
}

.switch-button .switch-outer .button {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.switch-button .switch-outer .button-indicator {
  height: 25px;
  width: 25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  border: 3px solid #ef565f;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  right: 10px;
  position: relative;
}

@-webkit-keyframes indicator {
  30% {
    opacity: 0;
  }

  0% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    border: 3px solid #60d480;
    left: -68%;
  }
}

@keyframes indicator {
  30% {
    opacity: 0;
  }

  0% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    border: 3px solid #60d480;
    left: -68%;
  }
}
</style>


================================================
FILE: Toggle-switches/Admin12121_strong-penguin-65.html
================================================
<label class="switch">
  <input role="switch" type="checkbox" class="switch__input" />
  <span class="switch__bg"></span>
  <span class="switch__label">Power</span>
</label>

<style>
/* From Uiverse.io by Admin12121  - Tags: switch, toggle, toggle switch, 3d button */
.switch,
.switch__input {
  --hue: 223;
  --bg: hsl(var(--hue), 90%, 60%);
  --fg: hsl(var(--hue), 90%, 10%);
  --primary: hsl(var(--hue), 90%, 50%);
  --trans-dur: 0.3s;
  --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
  font-size: calc(40px + (80 - 40) * (100px - 320px) / (2560 - 320));
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.switch {
  display: block;
  filter: grayscale(0.9);
  margin: auto;
  transition: filter var(--trans-dur) var(--trans-timing);
  width: 6em;
  height: 2.75em;
}
.switch:has(:checked) {
  filter: grayscale(0);
}
.switch__input {
  cursor: pointer;
  outline: transparent;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  z-index: 2;
}
.switch__bg {
  background: radial-gradient(
    7.75em 7.75em at 50% 4.0625em,
    hsla(var(--hue), 90%, 90%, 0) 29.9%,
    hsl(var(--hue), 90%, 90%) 30.1% 31.9%,
    hsl(0, 0%, 100%) 32.1% 35.2%,
    hsl(var(--hue), 50%, 80%) 35.4% 36%,
    hsl(var(--hue), 90%, 70%) 36.2% 41.8%,
    hsl(var(--hue), 90%, 65%) 42% 43.6%,
    hsl(var(--hue), 50%, 80%) 43.8% 44.4%,
    hsl(0, 0%, 100%) 44.6% 46.6%,
    hsl(var(--hue), 90%, 90%) 46.8% 49.3%,
    hsl(var(--hue), 90%, 98%) 49.5% 49.8%,
    hsla(var(--hue), 90%, 98%, 0) 49.9%
  );
  clip-path: polygon(0 0, 100% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.switch:before,
.switch:after,
.switch__input:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.switch:before,
.switch:after {
  background: radial-gradient(
      60% 60% at 50% 50%,
      hsla(var(--hue), 50%, 80%, 0) 34%,
      hsl(var(--hue), 50%, 80%) 35% 40.5%,
      hsl(0, 0%, 100%) 41.5% 49%,
      hsla(0, 0%, 100%, 0) 50%
    ),
    linear-gradient(
        hsla(var(--hue), 90%, 65%, 0) 30%,
        hsl(var(--hue), 90%, 65%) 30% 40%,
        hsla(var(--hue), 90%, 65%, 0) 40%
      )
      50% 0 / 40% 100% no-repeat,
    radial-gradient(
      50% 50% at 50% 50%,
      hsl(var(--hue), 90%, 70%) 41%,
      hsla(var(--hue), 90%, 70%, 0) 42%
    ),
    radial-gradient(
      75% 75% at 50% 52.5%,
      hsl(0, 0%, 100%) 49.8%,
      hsla(0, 0%, 100%, 0) 50%
    ),
    radial-gradient(
      112% 112% at 50% 55%,
      hsl(var(--hue), 90%, 98%, 0) 46.8%,
      hsl(var(--hue), 90%, 98%) 47% 49.8%,
      hsla(var(--hue), 90%, 98%, 0) 50%
    ),
    radial-gradient(
      100% 100% at 50% 50%,
      hsl(var(--hue), 90%, 90%) 49.8%,
      hsla(var(--hue), 90%, 90%, 0) 50%
    );
  border-radius: 50%;
  top: auto;
  bottom: 0.0625em;
  width: 1.5625em;
  height: 1.5625em;
}
.switch:before {
  transform: rotate(-45deg);
}
.switch:after {
  right: 0;
  left: auto;
  transform: rotate(45deg);
}
.switch__input:before {
  background-color: hsl(0, 0%, 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 0.5em hsla(var(--hue), 90%, 40%, 0),
    0 0.25em 0.5em 0.125em hsl(var(--hue), 90%, 50%);
  top: 3.5em;
  left: calc(50% - 0.625em);
  width: 1.25em;
  height: 1.25em;
  transform: rotate(-45deg) translateY(-3.125em) rotate(45deg);
  transition: background-color var(--trans-dur) var(--trans-timing),
    box-shadow 0.15s var(--trans-timing),
    transform var(--trans-dur) var(--trans-timing);
}
.switch__input:checked:before {
  background-color: hsl(var(--hue), 90%, 70%);
  transform: rotate(45deg) translateY(-3.125em) rotate(-45deg);
}
.switch__input:focus-visible:before {
  box-shadow: 0 0 0 0.5em hsla(var(--hue), 90%, 40%, 0.5),
    0 0.25em 0.5em 0.125em hsl(var(--hue), 90%, 50%);
}
.switch__label {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
}

</style>
    

================================================
FILE: Toggle-switches/Alaner-xs_terrible-snail-51.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Alaner-xs - Tags: switch */
/* The switch - the box around the slider */
.switch {
 font-size: 15px;
 position: relative;
 display: inline-block;
 width: 4.5em;
 height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
 background-color: transparent;
 opacity: 0;
 width: 0;
 height: 0;
}

/* The slider */
.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-image: linear-gradient(120deg,#234567,#781223);
 transition: .4s;
 border-top-left-radius: 13px;
 border-bottom-right-radius: 13px;
}

.slider:before {
 position: absolute;
 content: "";
 height: 1.4em;
 width: 1.4em;
 border-top-left-radius: 11px;
 border-bottom-right-radius: 11px;
 left: 0.3em;
 bottom: 0.3em;
 background-color: #dde4eb;
 transition: .4s;
}

input:checked + .slider {
 background-color: transparent;
}

input:checked + .slider:before {
 transform: translateX(2.5em);
}
</style>


================================================
FILE: Toggle-switches/Ali-Tahmazi99_fresh-moth-58.html
================================================
<label class="container">

    <input id="check" type="checkbox">
    <span></span>

    <label for="check" class="shadow"></label>
</label>
<style>
/* From Uiverse.io by Ali-Tahmazi99 - Tags: checkbox */
input[type = "checkbox"] {
  visibility: hidden;
  display: none;
  appearance: none;
  -webkit-appearance: none;
}

label.container {
  display: block;
  width: 60px;
  height: 30px;
  background: #d3d3d3;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  box-shadow: 9px 9px 29px #969696,
             -9px -9px 29px #ffffff;
}

label.shadow {
  width: 50px;
  height: 20px;
  position: absolute;
  border-radius: 50px;
  left: 5px;
  top: 5px;
  box-shadow: inset 3px 3px 10px #969696,
              inset -3px -3px 5px #ffffffbd;
  cursor: pointer;
}

.container span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #ffaa00;
  margin: 5px;
  border-radius: 50px;
  font-size: 20px;
  transition: all 0.3s ease-in;
  position: relative;
  left: 0;
  z-index: 1;
}

.container span::after {
  position: absolute;
  top: 6px;
  left: 4px;
  transition-delay: 5s;
}

input[type = "checkbox"]:checked ~ span {
  left: 29px;
  transition: 0.3s ease-in;
  background: #0a100d;
  transform: rotate(220deg);
}
</style>


================================================
FILE: Toggle-switches/AmIt-DasIT_average-robin-42.html
================================================
  <input id="checkbox_toggle" type="checkbox" class="check">
<div class="checkbox">
  <label class="slide" for="checkbox_toggle">
    <label class="toggle" for="checkbox_toggle"></label>
    <label class="text" for="checkbox_toggle">Day</label>
    <label class="text" for="checkbox_toggle">Night</label>
  </label>
</div>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: switch, animated */
.checkbox {
  width: 223px;
  height: 60px;
  background-color: #d0d0d0;
  border-radius: 30px;
  position: relative;
  color: black;
  overflow: hidden;
}

#checkbox_toggle {
  display: none;
}

.checkbox .toggle {
  width: 100px;
  height: 50px;
  position: absolute;
  border-radius: 30px;
  left: 5px;
  cursor: pointer;
  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
  transition: 0.4s;
  box-shadow: 0px 0px 3px rgb(255, 255, 20), 0px 0px 5px rgb(255, 255, 20);
}

.checkbox .slide {
  width: 230px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
}

.checkbox .slide .text {
  font-size: 16px;
  font-weight: 700;
  z-index: 100;
  cursor: pointer;
}

.check:checked + .checkbox .slide .toggle {
  transform: translateX(113px);
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
  box-shadow: -0px -0px 10px #8983F7, -0px -0px 3px #8983F7;
}

.check:checked + .checkbox .slide {
  background-color: #0a1929;
  color: #fff;
}
</style>


================================================
FILE: Toggle-switches/AmIt-DasIT_rotten-rat-40.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #223243;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: #223243;
  box-shadow: inset 2px -2px 0 1.8px #fff;
  transition: .4s;
  animation: anima1 0.3s linear;
}

@keyframes anima1 {
  0% {
    transform: translateX(1.5em);
  }

  80% {
    transform: translateX(-0.3em);
  }

  100% {
    transform: translateX(0em);
  }
}

.switch input:checked + .slider:before {
  background-color: yellow;
  box-shadow: none;
  transform: translateX(1.5em);
  animation: anima 0.3s linear;
}

@keyframes anima {
  0% {
    transform: translateX(0px)
  }

  80% {
    transform: translateX(1.6em)
  }

  100% {
    transform: translateX(1.4em)
  }
}
</style>


================================================
FILE: Toggle-switches/AnthonyPreite_neat-bat-64.html
================================================
<label class="switch">
  <input class="checkbox" type="checkbox" />
  <span class="slider round"></span>
</label>

<style>
/* From Uiverse.io by AnthonyPreite  - Tags: minimalist, switch, theme-switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch .checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  box-shadow: 1px 1px 5px 0 #d84f68 inset;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #d84f68;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  box-shadow: inset 1px 1px 2px 0px #ff7ca7;
}

.checkbox:checked + .slider {
  box-shadow: 1px 1px 5px 0 #2a9d8f inset;
}

.checkbox:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-color: #2a9d8f;
  box-shadow: inset -1px 1px 2px 0px #a3fff4;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

</style>
    

================================================
FILE: Toggle-switches/BernardoCuevas_old-grasshopper-54.html
================================================
<label class="switch">
  <input type="checkbox" class="cb">
  <span class="toggle">
    <span class="left">OFF</span>  
    <span class="right">ON</span>  
  </span>
</label>
<style>
/* From Uiverse.io by BernardoCuevas - Source: Ricardo Tsang - Tags: 3d switch, damper, on&off */
.switch {
  font-size: 20px;
  position: relative;
  display: inline-block;
  width: 6em;
  height: 3em;
}

.switch .cb {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  background-color: #3d3d3d;
  border-radius: .1em;
  transition: 10s;
  font-weight: 700;
  overflow: hidden;
  box-shadow: -.3em 0 0 0 #3d3d3d,-.3em .3em 0 0 #3d3d3d,.3em 0 0 0 #3d3d3d,.3em .3em 0 0 #3d3d3d,0 .3em 0 0 #3d3d3d;
}

.toggle > .left {
  position: absolute;
  display: flex;
  width: 50%;
  height: 88%;
  background-color: #ffffffcc;
  color: #ff0000da;
  left: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  transform-origin: right;
  transform: rotateX(10deg);
  transform-style: preserve-3d;
  transition: all 150ms;
}

.left::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(112, 112, 112);
  transform-origin: center left;
  transform: rotateY(90deg);
}

.left::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(112, 112, 112);
  transform-origin: center bottom;
  transform: rotateX(90deg);
}

.toggle > .right {
  position: absolute;
  display: flex;
  width: 50%;
  height: 88%;
  background-color: rgba(255, 255, 255, 0.8);
  color: rgb(206, 206, 206);
  right: 1px;
  bottom: 0;
  align-items: center;
  justify-content: center;
  transform-origin: left;
  transform: rotateX(10deg) rotateY(-30deg);
  transform-style: preserve-3d;
  transition: all 150ms;
}

.right::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(112, 112, 112);
  transform-origin: center right;
  transform: rotateY(-90deg);
}

.right::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(112, 112, 112);
  transform-origin: center bottom;
  transform: rotateX(90deg);
}

.switch input:checked + .toggle > .left {
  transform: rotateX(10deg) rotateY(30deg);
  color: rgb(206, 206, 206);
}

.switch input:checked + .toggle > .right {
  transform: rotateX(10deg) rotateY(0deg);
  color: #33b833;
}
</style>


================================================
FILE: Toggle-switches/Bodyhc_loud-badger-7.html
================================================
<div class="flipswitch">
    <input checked="" id="fs" class="flipswitch-cb" name="flipswitch" type="checkbox">
    <label for="fs" class="flipswitch-label">
        <div class="flipswitch-inner"></div>
        <div class="flipswitch-switch"></div>
    </label>
</div>

<style>
/* From Uiverse.io by Bodyhc - Tags: switch, light switch, swith */
.flipswitch {
  position: relative;
  width: 80px;
}

.flipswitch input[type=checkbox] {
  display: none;
}

.flipswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #260999;
  border-radius: 41px;
}

.flipswitch-inner {
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.flipswitch-inner:before, .flipswitch-inner:after {
  float: left;
  width: 50%;
  height: 38px;
  padding: 0;
  line-height: 38px;
  font-size: 25px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.flipswitch-inner:before {
  content: "✔";
  padding-left: 20px;
  background-color: #15009C;
  color: #FFFFFF;
}

.flipswitch-inner:after {
  content: "X";
  padding-right: 20px;
  background-color: #EBEBEB;
  color: #15009C;
  text-align: right;
}

.flipswitch-switch {
  width: 25px;
  margin: 6.5px;
  background: #FFFFFF;
  border: 1px solid #260999;
  border-radius: 41px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 41px;
  transition: all 0.3s ease-in 0s;
}

.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
  margin-left: 0;
}

.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
  right: 0;
}

</style>


================================================
FILE: Toggle-switches/Bodyhc_red-lionfish-43.html
================================================
<div class="checkbox-wrapper-35">
  <input value="private" name="switch" id="switch" type="checkbox" class="switch">
  <label for="switch">
    <span class="switch-x-text">This is </span>
    <span class="switch-x-toggletext">
      <span class="switch-x-unchecked"><span class="switch-x-hiddenlabel">Unchecked: </span>Off</span>
      <span class="switch-x-checked"><span class="switch-x-hiddenlabel">Checked: </span>On</span>
    </span>
  </label>
</div>

<style>
/* From Uiverse.io by Bodyhc - Tags: switch, switcher, light switch, vertical-switch, swith */
.checkbox-wrapper-35 .switch {
  display: none;
}

.checkbox-wrapper-35 .switch + label {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: #78768d;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 15px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-wrapper-35 .switch + label::before,
  .checkbox-wrapper-35 .switch + label::after {
  content: '';
  display: block;
}

.checkbox-wrapper-35 .switch + label::before {
  background-color: #05012c;
  border-radius: 500px;
  height: 15px;
  margin-right: 8px;
  -webkit-transition: background-color 0.125s ease-out;
  transition: background-color 0.125s ease-out;
  width: 25px;
}

.checkbox-wrapper-35 .switch + label::after {
  background-color: #fff;
  border-radius: 13px;
  box-shadow: 0 3px 1px 0 rgba(37, 34, 71, 0.05), 0 2px 2px 0 rgba(37, 34, 71, 0.1), 0 3px 3px 0 rgba(37, 34, 71, 0.05);
  height: 13px;
  left: 1px;
  position: absolute;
  top: 1px;
  -webkit-transition: -webkit-transform 0.125s ease-out;
  transition: -webkit-transform 0.125s ease-out;
  transition: transform 0.125s ease-out;
  transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out;
  width: 13px;
}

.checkbox-wrapper-35 .switch + label .switch-x-text {
  display: block;
  margin-right: .3em;
}

.checkbox-wrapper-35 .switch + label .switch-x-toggletext {
  display: block;
  font-weight: bold;
  height: 15px;
  overflow: hidden;
  position: relative;
  width: 25px;
}

.checkbox-wrapper-35 .switch + label .switch-x-unchecked,
  .checkbox-wrapper-35 .switch + label .switch-x-checked {
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
  transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
  transition: transform 0.125s ease-out, opacity 0.125s ease-out;
  transition: transform 0.125s ease-out, opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
}

.checkbox-wrapper-35 .switch + label .switch-x-unchecked {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

.checkbox-wrapper-35 .switch + label .switch-x-checked {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.checkbox-wrapper-35 .switch + label .switch-x-hiddenlabel {
  position: absolute;
  visibility: hidden;
}

.checkbox-wrapper-35 .switch:checked + label::before {
  background-color: #ffb500;
}

.checkbox-wrapper-35 .switch:checked + label::after {
  -webkit-transform: translate3d(10px, 0, 0);
  transform: translate3d(10px, 0, 0);
}

.checkbox-wrapper-35 .switch:checked + label .switch-x-unchecked {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

.checkbox-wrapper-35 .switch:checked + label .switch-x-checked {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

</style>


================================================
FILE: Toggle-switches/Bodyhc_wet-squid-26.html
================================================
<div class="flipswitch">
    <input checked="" id="fs" class="flipswitch-cb" name="flipswitch" type="checkbox">
    <label for="fs" class="flipswitch-label">
        <div class="flipswitch-inner"></div>
        <div class="flipswitch-switch"></div>
    </label>
</div>

<style>
/* From Uiverse.io by Bodyhc - Tags: switch, click, buttons */
.flipswitch {
  position: relative;
  width: 100px;
}

.flipswitch input[type=checkbox] {
  display: none;
}

.flipswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #999999;
  border-radius: 50px;
}

.flipswitch-inner {
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.flipswitch-inner:before, .flipswitch-inner:after {
  float: left;
  width: 50%;
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 20px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.flipswitch-inner:before {
  content: "ON";
  padding-left: 18px;
  background-color: #437A99;
  color: #FFFFFF;
}

.flipswitch-inner:after {
  content: "OFF";
  padding-right: 18px;
  background-color: #FFFFFF;
  color: #437A99;
  text-align: right;
}

.flipswitch-switch {
  width: 35px;
  margin: -2.5px;
  background: #FFFFFF;
  border: 1px solid #999999;
  border-radius: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 67px;
  transition: all 0.3s ease-in 0s;
}

.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
  margin-left: 0;
}

.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
  right: 0;
}

</style>


================================================
FILE: Toggle-switches/BurgiSimon_breezy-donkey-2.html
================================================
<label class="switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by BurgiSimon  - Tags: simple, animation, red, green, switch, animated, css, toggle switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 4.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff3636;
  transition: 0.1s;
  transition-delay: 0.2s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition-delay: 0.2s;
  transition: 0.1s;
}

.switch input:checked + .slider {
  transition-delay: 0.2s;
  background-color: #00c763;
}

.switch input:focus + .slider {
  transition-delay: 0.2s;
  box-shadow: 0 0 1px #00c763;
}

.switch input:checked + .slider:before {
  transform: translateX(2.5em);
  transition-delay: 0.2s;
  transition-duration: 0.1s;
}

/* Animation Right */
@keyframes slideRight {
  0% {
    transform: translateX(0) translateY(0);
  }
  20% {
    transform: translateX(0.5em) translateY(-1.5em);
  }
  40% {
    transform: translateX(1em) translateY(-1.75em); /* Highest Point */
  }
  60% {
    transform: translateX(1.5em) translateY(-1.5em);
  }
  80% {
    transform: translateX(2em) translateY(-1.25em);
  }
  100% {
    transform: translateX(2.5em) translateY(0);
  }
}

/* Slide Animation Left */
@keyframes slideLeft {
  0% {
    transform: translateX(2.5em) translateY(0);
  }
  20% {
    transform: translateX(2em) translateY(-0.25em);
  }
  40% {
    transform: translateX(1.5em) translateY(-0.5em); /* Highest Point */
  }
  60% {
    transform: translateX(1em) translateY(-0.75em);
  }
  80% {
    transform: translateX(0.5em) translateY(-0.5em);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

.switch input:checked + .slider:before {
  animation: slideRight 0.15s forwards;
}

.switch input:not(:checked) + .slider:before {
  animation: slideLeft 0.15s forwards;
}

</style>
    

================================================
FILE: Toggle-switches/Charly-T_wise-bobcat-72.html
================================================
<div class="switch">
    <input type="checkbox">
    <div class="left"></div>
    <div class="right"></div>
    <div class="switcher"></div>
</div>
<style>
/* From Uiverse.io by Charly-T - Tags: switch */
.switch {
  --switch-width: 3.5em;
  --switch-height: calc(var(--switch-width) / 2);
  --left-ball-color: black;
  --right-ball-color: white;
  width: var(--switch-width);
  height: var(--switch-height);
  border-radius: calc(var(--switch-height) / 2);
  background-color: var(--left-ball-color);
  position: relative;
  overflow: hidden;
}

.switch input[type="checkbox"] {
  width: 100%;
  position: absolute;
  height: 100%;
  margin: 0;
  opacity: 0;
}

.switch .left {
  position: absolute;
  width: calc(var(--switch-width) / 3);
  height: calc(var(--switch-height) / 1.5);
  background-color: var(--left-ball-color);
  border-radius: 50%;
  left: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
  top: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
  z-index: 2;
  pointer-events: none;
}

.switch .right {
  position: absolute;
  width: calc(var(--switch-width) / 3);
  height: calc(var(--switch-height) / 1.5);
  background-color: var(--right-ball-color);
  border-radius: 50%;
  right: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
  top: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
  z-index: 2;
  pointer-events: none;
}

.switch .switcher {
  position: absolute;
  width: calc(100% + var(--switch-width) / 3);
  height: 100%;
  background-color: var(--right-ball-color);
  z-index: 1;
  left: calc(-50% + var(--switch-width) / (3 * 2));
  pointer-events: none;
  transition: left 500ms ease;
  border-top-left-radius: calc(var(--switch-width) / 3);
  border-bottom-left-radius: calc(var(--switch-width) / 3);
}

.switch .switcher:before {
  position: absolute;
  content: '';
  width: calc(var(--switch-width) / 3);
  height: 100%;
  background-color: var(--left-ball-color);
  display: block;
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  z-index: 2;
}

.switch .switcher:after {
  position: absolute;
  content: '';
  width: calc(var(--switch-width) / 3);
  height: 100%;
  background-color: var(--right-ball-color);
  display: block;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
}

.switch input:checked ~ .switcher {
  left: 100%;
}

.switch input:checked ~ .switcher:before {
  display: none;
}
</style>


================================================
FILE: Toggle-switches/Cksunandh_massive-firefox-41.html
================================================
<div>
  <label class="switch">
    <input type="checkbox" />
    <span>
      <em></em>
      <strong></strong>
    </span>
  </label>
</div>

<style>
/* From Uiverse.io by Cksunandh  - Tags: switch */
.switch {
  height: 24px;
  display: block;
  position: relative;
  cursor: pointer;
}
.switch input {
  display: none;
}
.switch input + span {
  padding-left: 50px;
  min-height: 24px;
  line-height: 24px;
  display: block;
  color: #99a3ba;
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.switch input + span:before,
.switch input + span:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 12px;
}
.switch input + span:before {
  top: 0;
  left: 0;
  width: 42px;
  height: 24px;
  background: #e4ecfa;
  transition: all 0.3s ease;
}
.switch input + span:after {
  width: 18px;
  height: 18px;
  background: #fff;
  top: 3px;
  left: 3px;
  box-shadow: 0 1px 3px rgba(18, 22, 33, 0.1);
  transition: all 0.45s ease;
}
.switch input + span em {
  width: 8px;
  height: 7px;
  background: #99a3ba;
  position: absolute;
  left: 8px;
  bottom: 7px;
  border-radius: 2px;
  display: block;
  z-index: 1;
  transition: all 0.45s ease;
}
.switch input + span em:before {
  content: "";
  width: 2px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  margin: -1px 0 0 -1px;
}
.switch input + span em:after {
  content: "";
  display: block;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 1px solid #99a3ba;
  border-bottom: 0;
  width: 6px;
  height: 4px;
  left: 1px;
  bottom: 6px;
  position: absolute;
  z-index: 1;
  transform-origin: 0 100%;
  transition: all 0.45s ease;
  transform: rotate(-35deg) translate(0, 1px);
}
.switch input + span strong {
  font-weight: normal;
  position: relative;
  display: block;
  top: 1px;
}
.switch input + span strong:before,
.switch input + span strong:after {
  font-size: 14px;
  font-weight: 500;
  display: block;
  font-family: "Mukta Malar", Arial;
  -webkit-backface-visibility: hidden;
}
.switch input + span strong:before {
  content: "Unlocked";
  transition: all 0.3s ease 0.2s;
}
.switch input + span strong:after {
  content: "Locked";
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  color: #02923c;
  transition: all 0.3s ease;
  transform: translate(2px, 0);
}
.switch input:checked + span:before {
  background: #eae7e7;
}
.switch input:checked + span:after {
  background: #fff;
  transform: translate(18px, 0);
}
.switch input:checked + span em {
  transform: translate(18px, 0);
  background: #02923c;
}
.switch input:checked + span em:after {
  border-color: #02923c;
  transform: rotate(0deg) translate(0, 0);
}
.switch input:checked + span strong:before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  transform: translate(-2px, 0);
}
.switch input:checked + span strong:after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
  transition: all 0.3s ease 0.2s;
}

.switch :before,
:after {
  box-sizing: border-box;
}

</style>
    

================================================
FILE: Toggle-switches/Cksunandh_slimy-treefrog-92.html
================================================
<label class="toggle-switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by Cksunandh  - Tags: switch */
.toggle-switch {
  position: relative;
  width: 60px;
  height: 30px;
  border-radius: 15px;
  background-color: #ffffff;
  box-shadow:
    inset 5px 5px 10px #c1c1c1,
    inset -5px -5px 10px #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch .slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow:
    2px 2px 5px #c1c1c1,
    -2px -2px 5px #ffffff;
  transition: transform 0.3s ease;
}

.toggle-switch input:checked + .slider {
  transform: translateX(30px);
}

.toggle-switch input:checked {
  background-color: #ffffff;
}

</style>
    

================================================
FILE: Toggle-switches/ClawHack1_itchy-bobcat-18.html
================================================
<div class="toggle-switch">
  <input class="toggle-input" id="toggle" type="checkbox">
  <label class="toggle-label" for="toggle"></label>
</div>

<style>
/* From Uiverse.io by ClawHack1 - Tags: apple, switch */
/* Genel stil */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  margin: 10px;
}

/* Giriş stil */
.toggle-switch .toggle-input {
  display: none;
}

/* Anahtarın stilinin etrafındaki etiketin stil */
.toggle-switch .toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 24px;
  background-color: #2196F3;
  border-radius: 34px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Anahtarın yuvarlak kısmının stil */
.toggle-switch .toggle-label::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  background-color: #fff;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
}

/* Anahtarın etkin hale gelmesindeki stil değişiklikleri */
.toggle-switch .toggle-input:checked + .toggle-label {
  background-color: #4CAF50;
}

.toggle-switch .toggle-input:checked + .toggle-label::before {
  transform: translateX(16px);
}

/* Light tema */
.toggle-switch.light .toggle-label {
  background-color: #BEBEBE;
}

.toggle-switch.light .toggle-input:checked + .toggle-label {
  background-color: #9B9B9B;
}

.toggle-switch.light .toggle-input:checked + .toggle-label::before {
  transform: translateX(6px);
}

/* Dark tema */
.toggle-switch.dark .toggle-label {
  background-color: #4B4B4B;
}

.toggle-switch.dark .toggle-input:checked + .toggle-label {
  background-color: #717171;
}

.toggle-switch.dark .toggle-input:checked + .toggle-label::before {
  transform: translateX(16px);
}

</style>


================================================
FILE: Toggle-switches/Creatlydev_massive-quail-70.html
================================================
<div class="container">
        <label class="toggle" for="switch">
            <input id="switch" class="input" type="checkbox">
            <div class="icon icon--moon">
                <svg height="32" width="32" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path clip-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" fill-rule="evenodd"></path>
                </svg>
            </div>
        
            <div class="icon icon--sun">
                <svg height="32" width="32" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"></path>
                </svg>
            </div>
        </label>
    </div>
<style>
/* From Uiverse.io by Creatlydev - Tags: switch, light&dark, toggle switch */
.toggle {
  background-color: #fff;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 0 50px 20px rgba(0, 0, 0, .1);
  line-height: 1;
}

.input {
  display: none;
}

.icon {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  transition: transform 500ms;
}

.icon--moon {
  transition-delay: 200ms;
}

.icon--sun {
  transform: scale(0);
}

#switch:checked + .icon--moon {
  transform: rotate(360deg) scale(0);
}

#switch:checked ~ .icon--sun {
  transition-delay: 200ms;
  transform: scale(1) rotate(360deg);
}
</style>


================================================
FILE: Toggle-switches/Creatlydev_terrible-zebra-56.html
================================================
<div class="container">
        <input hidden="" id="check" name="check" type="checkbox">
        <label class="toggle" for="check">
            <div class="toggle__circle"></div>
        </label>
        <div class="toggle-text">
            <span>N</span>
            <span>F</span>
        </div>
    </div>
<style>
/* From Uiverse.io by Creatlydev - Tags: switch, creative, toggle switch */
.container {
  margin: auto;
  color: hsl(0, 0%, 30%);
  font-weight: 900;
  font-size: 6rem;
  display: flex;
}

.toggle {
  width: 60px;
  height: 155px;
  background-color: hsl(0, 0%, 80%);
  border-radius: 1.7rem;
  padding: .25rem 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  transition: background-color 300ms 300ms;
}

.toggle__circle {
  width: 50px;
  height: 50px;
  background-color: hsl(0, 0%, 95%);
  border-radius: 50%;
  margin-top: calc(155px - (.25rem * 2) - 50px);
  transition: margin 500ms ease-in-out;
}

.toggle-text {
  display: flex;
  flex-direction: column;
  line-height: .8;
}

#check:checked + .toggle > .toggle__circle {
  margin-top: 0;
}

#check:checked + .toggle {
  background-color: #41a63c;
}
</style>


================================================
FILE: Toggle-switches/Creatlydev_white-vampirebat-27.html
================================================
<input type="checkbox" name="check-toggle" id="checkbox" hidden="">
        <label for="checkbox" class="toggle">
            <div class="toggle__circle"></div>
        </label>
<style>
/* From Uiverse.io by Creatlydev - Tags: switch, creative, toggle switch */
.toggle {
  --bg-toggle: hsl(0, 0%, 96%);
  --bg-circle: hsl(96, 85%, 34%);
  width: 120px;
  height: 60px;
  background-color: var(--bg-toggle);
  box-shadow: 0 .3rem 5rem 0 rgba(125, 125, 125, 0.25);
  border-radius: 4rem;
  display: flex;
  align-items: center;
  padding: 0 .3rem;
  transition: background-color 400ms;
}

.toggle__circle {
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-color: var(--bg-circle);
  border-radius: 50%;
  position: relative;
  transition: margin 400ms ease-in-out, background-color 1000ms;
}

.toggle__circle::after,
.toggle__circle::before {
  content: '';
  position: absolute;
  background-color: var(--bg-toggle);
  bottom: 118%;
  transform-origin: bottom left;
}

.toggle__circle::before {
  width: 15px;
  height: 25px;
  left: 32%;
  border-radius: 0% 100% 0% 100% / 0% 27% 73% 100%;
  transform: translateX(-70%) rotate(-2deg);
}

.toggle__circle::after {
  width: 25px;
  height: 30px;
  left: 48%;
  border-radius: 100% 0% 100% 0% / 100% 0% 100% 0%;
  transform: rotate(-20deg);
}

#checkbox:checked + .toggle > .toggle__circle {
  margin-left: calc(120px - (.3rem * 2) - 50px);
}

#checkbox:checked + .toggle {
  --bg-toggle: hsl(96, 85%, 34%);
  --bg-circle: hsl(0, 0%, 96%);
}
</style>


================================================
FILE: Toggle-switches/Creatlydev_wicked-bear-73.html
================================================
<input type="checkbox" name="check-toggle" id="checkbox" hidden="">
<label for="checkbox" class="toggle">
  G
  <div class="toggle__switch">
      <div class="toggle__circle"></div>
  </div>
  D
</label>
<style>
/* From Uiverse.io by Creatlydev - Tags: switch, toggle, creative, html, css, toggle switch */
.toggle {
  display: flex;
  align-items: center;
  gap: .2rem;
  font-weight: 900;
  font-size: 4rem;
  color: hsl(119, 84%, 10%);
  text-shadow: 0 0 2px #e8e8e8;
}

.toggle__switch {
  --bg-toggle: hsl(0, 0%, 100%);
  --bg-circle: hsl(119, 84%, 10%);
  --w-toggle-switch: 150px;
  --w-h-toggle-circle: 35px;
  --pd-toggle-switch: .5rem;
  height: 55px;
  width: var(--w-toggle-switch);
  background-color: var(--bg-toggle);
  border-radius: 4rem;
  display: flex;
  align-items: center;
  padding: 0 var(--pd-toggle-switch);
  cursor: pointer;
  transition: background-color 500ms;
}

.toggle__circle {
  width: var(--w-h-toggle-circle);
  height: var(--w-h-toggle-circle);
  background-color: var(--bg-circle);
  border-radius: 50%;
  transition: margin 400ms ease-in-out, background-color 1000ms;
}

#checkbox:checked + .toggle .toggle__circle {
  margin-left: calc(var(--w-toggle-switch) - (var(--pd-toggle-switch) * 2) - var(--w-h-toggle-circle));
}

#checkbox:checked + .toggle > .toggle__switch {
  --bg-toggle: hsl(119, 84%, 10%);
  --bg-circle: hsl(0, 0%, 96%);
  box-shadow: 0 .3rem 5rem 0 hsla(96, 85%, 34%, 30%);
}
</style>


================================================
FILE: Toggle-switches/Custyyyy_strange-zebra-89.html
================================================
<div class="check">
  <input id="check" type="checkbox">
  <label for="check"></label>
</div>
<style>
/* From Uiverse.io by Custyyyy - Tags: switch */
.check {
 position: relative;
 background: linear-gradient(90deg, #f19af3, #f099b5);
 line-height: 0;
 font-size: 25px;
}

.check input[type="checkbox"],
.check label,
.check label::before,
.check label::after {
 appearance: none;
 display: inline-block;
 font-size: inherit;
 border-radius: 1em;
 border: 0;
 transition: .35s ease-in-out;
 box-sizing: border-box;
 cursor: pointer;
}

.check {
 appearance: none;
 display: inline-block;
 border-radius: 1em;
 border: 0;
 transition: .35s ease-in-out;
 box-sizing: border-box;
 cursor: pointer;
}

.check label {
 width: 2.2em;
 height: 1em;
 background: #d7d7d7;
 overflow: hidden;
}

.check input[type="checkbox"] {
 position: absolute;
 z-index: 1;
 width: .8em;
 height: .8em;
 top: .1em;
 left: .1em;
 background: linear-gradient(45deg, #dedede, #ffffff);
 box-shadow: 0 6px 7px rgba(0,0,0,0.3);
 outline: none;
}

.check input[type="checkbox"]:checked {
 left: 1.3em;
}

.check input[type="checkbox"]:checked + label {
 background: transparent;
}

.check label::before,
.check label::after {
 content: "· ·";
 position: absolute;
 overflow: hidden;
 left: .50em;
 top: .5em;
 height: 1em;
 letter-spacing: -.04em;
 color: #9b9b9b;
 font-family: "Times New Roman", serif;
 z-index: 2;
 font-size: .6em;
 border-radius: 0;
 transform-origin: 0 0 -.5em;
 backface-visibility: hidden;
}

.check label::after {
 content: "?";
 top: .65em;
 left: .6em;
 height: .1em;
 width: .35em;
 font-size: .2em;
 transform-origin: 0 0 -.4em;
}

.check input[type="checkbox"]:checked + label::before,
.check input[type="checkbox"]:checked + label::after {
 left: 2.55em;
 top: .4em;
 line-height: .1em;
 transform: rotateY(360deg);
}

.check input[type="checkbox"]:checked + label::after {
 height: .16em;
 top: .55em;
 left: 2.6em;
 font-size: .6em;
 line-height: 0;
}

</style>


================================================
FILE: Toggle-switches/Darlley_jolly-yak-41.html
================================================
<!-- From Uiverse.io by Darlley - Tags: switch, checkbox, tailwind -->
<div class="flex flex-wrap justify-center items-center w-11/12 mx-auto select-none gap-2 max-w-[500px]">
  <label class="text-slate-400">
    <input type="checkbox" class="h-[1px] opacity-0 overflow-hidden absolute whitespace-nowrap w-[1px] peer">
    <span class="peer-checked:border-blue-500 peer-checked:shadow-blue-500/10 peer-checked:text-blue-500 peer-checked:before:border-blue-500 peer-checked:before:bg-blue-500 peer-checked:before:opacity-100 peer-checked:before:scale-100 peer-checked:before:content-['✓'] flex flex-col items-center justify-center w-28 min-h-[7rem] rounded-lg shadow-lg transition-all duration-200 cursor-pointer relative border-slate-300 border-[3px] bg-white before:absolute before:block before:w-5 before:h-5 before:border-[3px]  before:rounded-full before:top-1 before:left-1 before:opacity-0 before:transition-transform before:scale-0 before:text-white before:text-xs before:flex before:items-center before:justify-center hover:border-blue-500 hover:before:scale-100 hover:before:opacity-100">
      <span class="transition-all duration-100">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12" fill="currentColor" viewBox="0 0 256 256">
          <rect width="256" height="256" fill="none"></rect>
          <circle cx="162" cy="128" r="34" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle>
          <path d="M128,94V26.00089H94a34,34,0,0,0,0,68Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
          <path d="M128,161.99911V94H94a34,34,0,0,0,0,68Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
          <path d="M128,94V26.00089h34a34,34,0,0,1,0,68Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
          <path d="M128,161.99911v34.00044A34,34,0,1,1,94,162Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path>
        </svg>
      </span>
      <span class="transition-all duration-300 text-center">Figma</span>
    </span>
  </label>

</div>



================================================
FILE: Toggle-switches/DawidMazurek4_tough-monkey-56.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by DawidMazurek4 - Tags: switch, theme-switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(0, 0, 0);
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: rgb(219, 198, 2);
  transition: .4s;
}

input:checked + .slider {
  background-color: #000000;
}

input:focus + .slider {
  box-shadow: 0 0 1px #000000;
}

input:checked + .slider:before {
  transform: translateX(1.5em);
}

.slider::after {
  width: 20px;
  height: 20px;
  left: 20%;
  top: 10%;
  border-radius: 50%;
  position: absolute;
  content: "";
  background-color: rgb(0, 0, 0);
  transition: ease 0.4s;
}

input:checked + .slider::after {
  left: 80%;
  width: 0px;
  height: 0px;
}
</style>


================================================
FILE: Toggle-switches/EddyBel_slimy-penguin-36.html
================================================
<label class="switch">
  <input type="checkbox" class="input__check">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by EddyBel - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
  transform-style: preserve-3d;
  perspective: 500px;
  animation: toggle__animation 3s infinite;
}

.switch::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  filter: blur(20px);
  z-index: -1;
  border-radius: 50px;
  background-color: #d8ff99;
  background-image: radial-gradient(at 21% 46%, hsla(183,65%,60%,1) 0px, transparent 50%),
radial-gradient(at 23% 25%, hsla(359,74%,70%,1) 0px, transparent 50%),
radial-gradient(at 20% 1%, hsla(267,83%,75%,1) 0px, transparent 50%),
radial-gradient(at 86% 87%, hsla(204,69%,68%,1) 0px, transparent 50%),
radial-gradient(at 99% 41%, hsla(171,72%,77%,1) 0px, transparent 50%),
radial-gradient(at 55% 24%, hsla(138,60%,62%,1) 0px, transparent 50%);
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fdfefedc;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  left: 0.3em;
  bottom: 0.35em;
  transition: .4s;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,
     rgba(0, 0, 0, 0.09) 0px -1px 15px -8px;
  background-color: #ff99fd;
  background-image: radial-gradient(at 81% 39%, hsla(327,79%,79%,1) 0px, transparent 50%),
  radial-gradient(at 11% 72%, hsla(264,64%,79%,1) 0px, transparent 50%),
  radial-gradient(at 23% 20%, hsla(75,98%,71%,1) 0px, transparent 50%);
}

.input__check:checked + .slider {
  background-color: #17202A;
}

.input__check:checked + .slider:before {
  transform: translateX(1.5em);
}

@keyframes toggle__animation {
  0%, 100% {
    transform: translateY(-10px) rotateX(15deg) rotateY(-20deg);
  }

  50% {
    transform: translateY(0px) rotateX(15deg) rotateY(-20deg);
  }
}
</style>


================================================
FILE: Toggle-switches/ErzenXz_weak-falcon-28.html
================================================
<label class="toggle-switch">
  <input type="checkbox">
  <div class="toggle-switch-background">
    <div class="toggle-switch-handle"></div>
  </div>
</label>

<style>
/* From Uiverse.io by ErzenXz - Tags: switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 40px;
  cursor: pointer;
}

.toggle-switch input[type="checkbox"] {
  display: none;
}

.toggle-switch-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ddd;
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px #ccc;
  transition: background-color 0.3s ease-in-out;
}

.toggle-switch-handle {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}

.toggle-switch::before {
  content: "";
  position: absolute;
  top: -25px;
  right: -35px;
  font-size: 12px;
  font-weight: bold;
  color: #aaa;
  text-shadow: 1px 1px #fff;
  transition: color 0.3s ease-in-out;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch-handle {
  transform: translateX(45px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 3px #05c46b;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch-background {
  background-color: #05c46b;
  box-shadow: inset 0 0 0 2px #04b360;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch:before {
  content: "On";
  color: #05c46b;
  right: -15px;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch-background .toggle-switch-handle {
  transform: translateX(40px);
}

</style>


================================================
FILE: Toggle-switches/ForzDz_kind-mule-56.html
================================================
<div class="rating">
  <input type="radio" id="star5" name="rating" value="5">
  <label for="star5"></label>
  <input type="radio" id="star4" name="rating" value="4">
  <label for="star4"></label>
  <input type="radio" id="star3" name="rating" value="3">
  <label for="star3"></label>
  <input type="radio" id="star2" name="rating" value="2">
  <label for="star2"></label>
  <input type="radio" id="star1" name="rating" value="1">
  <label for="star1"></label>
</div>

<style>
/* From Uiverse.io by ForzDz - Tags: switch, starrating, 3d cool effect */
.rating {
  display: inline-block;
  opacity: 1;
}

.rating input {
  display: none;
  opacity: 1;
}

.rating label {
  float: right;
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.rating label:before {
  content: '\2605';
  font-size: 30px;
  transition: color 0.3s;
}

.rating input:checked ~ label,
.rating label:hover,
.rating label:hover ~ label {
  color: #ffc300;
  transform: scale(1.2);
  transition: color 0.3s, transform 0.3s, box-shadow 0.3s;
  animation: bounce 0.5s ease-in-out alternate;
}

@keyframes bounce {
  to {
    transform: scale(1.3);
  }
}
</style>


================================================
FILE: Toggle-switches/G4b413l_bitter-hound-66.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by G4b413l - Tags: minimalist, switch */
.switch {
 position: relative;
 width: 55px;
 height: 15px;
}

.switch input {
 opacity: 0;
 width: 0;
 height: 0;
}

.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 border-radius: 34px;
 background-color: #ccc;
 -webkit-transition: .4s;
 transition: .4s;
}

.slider:before {
 position: absolute;
 content: "";
 height: 26px;
 width: 26px;
 left: 0px;
 bottom: -5px;
 background-color: red;
 -webkit-transition: .4s;
 transition: .4s;
 box-sizing: border-box;
 border: 10px solid white;
 border-radius: 50%;
}

input:checked + .slider {
 background-color: #06a606;
}

input:checked + .slider:before {
 -webkit-transform: translateX(26px);
 -ms-transform: translateX(26px);
 transform: translateX(30px);
 background: limegreen;
 box-sizing: border-box;
 border: 10px solid white;
}
</style>


================================================
FILE: Toggle-switches/G4b413l_giant-panther-83.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by G4b413l - Tags: switch */
.switch input {
 display: none;
}

.switch {
 width: 60px;
 height: 30px;
 position: relative;
}

.slider {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 border-radius: 30px;
 box-shadow: 0 0 0 2px #777, 0 0 4px #777;
 cursor: pointer;
 border: 4px solid transparent;
 overflow: hidden;
 transition: 0.2s;
}

.slider:before {
 position: absolute;
 content: "";
 width: 100%;
 height: 100%;
 background-color: #777;
 border-radius: 30px;
 transform: translateX(-30px);
 /*translateX(-(w-h))*/
 transition: 0.2s;
}

input:checked + .slider:before {
 transform: translateX(30px);
 /*translateX(w-h)*/
 background-color: limeGreen;
}

input:checked + .slider {
 box-shadow: 0 0 0 2px limeGreen, 0 0 8px limeGreen;
}

.switch200 .slider:before {
 width: 200%;
 transform: translateX(-82px);
 /*translateX(-(w-h))*/
}

.switch200 input:checked + .slider:before {
 background-color: red;
}

.switch200 input:checked + .slider {
 box-shadow: 0 0 0 2px red, 0 0 8px red;
}
</style>


================================================
FILE: Toggle-switches/Galahhad_happy-warthog-87.html
================================================
<label class="switch">
    <input type="checkbox" class="checkbox">
    <div class="slider"></div>
</label>
<style>
/* From Uiverse.io by Galahhad - Tags: active, switch */
.checkbox {
  display: none;
}

.slider {
  width: 60px;
  height: 30px;
  background-color: lightgray;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 4px solid transparent;
  transition: .3s;
  box-shadow: 0 0 10px 0 rgb(0, 0, 0, 0.25) inset;
  cursor: pointer;
}

.slider::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(-30px);
  border-radius: 20px;
  transition: .3s;
  box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);
}

.checkbox:checked ~ .slider::before {
  transform: translateX(30px);
  box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);
}

.checkbox:checked ~ .slider {
  background-color: #2196F3;
}

.checkbox:active ~ .slider::before {
  transform: translate(0);
}
</style>


================================================
FILE: Toggle-switches/Galahhad_heavy-dog-14.html
================================================
<label class="ui-switch">
  <input type="checkbox">
  <div class="slider">
    <div class="circle"></div>
  </div>
</label>

<style>
/* From Uiverse.io by Galahhad - Source: https://mui.com/material-ui/react-switch/ - Tags: material design, switch, light&dark */
/* switch settings 👇 */

.ui-switch {
  /* switch */
  --switch-bg: rgb(135, 150, 165);
  --switch-width: 48px;
  --switch-height: 20px;
  /* circle */
  --circle-diameter: 32px;
  --circle-bg: rgb(0, 56, 146);
  --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);
}

.ui-switch input {
  display: none;
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
}

.slider .circle {
  top: calc(var(--circle-inset) * -1);
  left: 0;
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  position: absolute;
  background: var(--circle-bg);
  border-radius: inherit;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  -o-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
  ;
}

.slider .circle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  border-radius: inherit;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  opacity: 0;
}

/* actions */

.ui-switch input:checked+.slider .circle {
  left: calc(100% - var(--circle-diameter));
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=");
}

.ui-switch input:active+.slider .circle::before {
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
  opacity: 1;
  width: 0;
  height: 0;
}
</style>


================================================
FILE: Toggle-switches/Galahhad_modern-quail-75.html
================================================
<label class="switch">
    <input checked="" type="checkbox">
    <div class="slider">
        <div class="circle">
            <svg class="cross" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 365.696 365.696" y="0" x="0" height="6" width="6" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <g>
                    <path data-original="#000000" fill="currentColor" d="M243.188 182.86 356.32 69.726c12.5-12.5 12.5-32.766 0-45.247L341.238 9.398c-12.504-12.503-32.77-12.503-45.25 0L182.86 122.528 69.727 9.374c-12.5-12.5-32.766-12.5-45.247 0L9.375 24.457c-12.5 12.504-12.5 32.77 0 45.25l113.152 113.152L9.398 295.99c-12.503 12.503-12.503 32.769 0 45.25L24.48 356.32c12.5 12.5 32.766 12.5 45.247 0l113.132-113.132L295.99 356.32c12.503 12.5 32.769 12.5 45.25 0l15.081-15.082c12.5-12.504 12.5-32.77 0-45.25zm0 0"></path>
                </g>
            </svg>
            <svg class="checkmark" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 24 24" y="0" x="0" height="10" width="10" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <g>
                    <path class="" data-original="#000000" fill="currentColor" d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"></path>
                </g>
            </svg>
        </div>
    </div>
</label>
<style>
/* From Uiverse.io by Galahhad - Tags: switch, checkbox, bubble */
.switch {
  /* switch */
  --switch-width: 46px;
  --switch-height: 24px;
  --switch-bg: rgb(131, 131, 131);
  --switch-checked-bg: rgb(0, 218, 80);
  --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
  --switch-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  /* circle */
  --circle-diameter: 18px;
  --circle-bg: #fff;
  --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
  --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
  --circle-transition: var(--switch-transition);
  /* icon */
  --icon-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  --icon-cross-color: var(--switch-bg);
  --icon-cross-size: 6px;
  --icon-checkmark-color: var(--switch-checked-bg);
  --icon-checkmark-size: 10px;
  /* effect line */
  --effect-width: calc(var(--circle-diameter) / 2);
  --effect-height: calc(var(--effect-width) / 2 - 1px);
  --effect-bg: var(--circle-bg);
  --effect-border-radius: 1px;
  --effect-transition: all .2s ease-in-out;
}

.switch input {
  display: none;
}

.switch {
  display: inline-block;
}

.switch svg {
  -webkit-transition: var(--icon-transition);
  -o-transition: var(--icon-transition);
  transition: var(--icon-transition);
  position: absolute;
  height: auto;
}

.switch .checkmark {
  width: var(--icon-checkmark-size);
  color: var(--icon-checkmark-color);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.switch .cross {
  width: var(--icon-cross-size);
  color: var(--icon-cross-color);
}

.slider {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-transition: var(--switch-transition);
  -o-transition: var(--switch-transition);
  transition: var(--switch-transition);
  cursor: pointer;
}

.circle {
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  background: var(--circle-bg);
  border-radius: inherit;
  -webkit-box-shadow: var(--circle-shadow);
  box-shadow: var(--circle-shadow);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  z-index: 1;
  position: absolute;
  left: var(--switch-offset);
}

.slider::before {
  content: "";
  position: absolute;
  width: var(--effect-width);
  height: var(--effect-height);
  left: calc(var(--switch-offset) + (var(--effect-width) / 2));
  background: var(--effect-bg);
  border-radius: var(--effect-border-radius);
  -webkit-transition: var(--effect-transition);
  -o-transition: var(--effect-transition);
  transition: var(--effect-transition);
}

/* actions */

.switch input:checked+.slider {
  background: var(--switch-checked-bg);
}

.switch input:checked+.slider .checkmark {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.switch input:checked+.slider .cross {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.switch input:checked+.slider::before {
  left: calc(100% - var(--effect-width) - (var(--effect-width) / 2) - var(--switch-offset));
}

.switch input:checked+.slider .circle {
  left: calc(100% - var(--circle-diameter) - var(--switch-offset));
  -webkit-box-shadow: var(--circle-checked-shadow);
  box-shadow: var(--circle-checked-shadow);
}
</style>


================================================
FILE: Toggle-switches/Galahhad_silent-robin-40.html
================================================
<label class="bb8-toggle">
      <input class="bb8-toggle__checkbox" type="checkbox">
      <div class="bb8-toggle__container">
        <div class="bb8-toggle__scenery">
          <div class="bb8-toggle__star"></div>
          <div class="bb8-toggle__star"></div>
          <div class="bb8-toggle__star"></div>
          <div class="bb8-toggle__star"></div>
          <div class="bb8-toggle__star"></div>
          <div class="bb8-toggle__star"></div>
          <div class="bb8-toggle__star"></div>
          <div class="tatto-1"></div>
          <div class="tatto-2"></div>
          <div class="gomrassen"></div>
          <div class="hermes"></div>
          <div class="chenini"></div>
          <div class="bb8-toggle__cloud"></div>
          <div class="bb8-toggle__cloud"></div>
          <div class="bb8-toggle__cloud"></div>
        </div>
        <div class="bb8">
          <div class="bb8__head-container">
            <div class="bb8__antenna"></div>
            <div class="bb8__antenna"></div>
            <div class="bb8__head"></div>
          </div>
          <div class="bb8__body"></div>
        </div>
        <div class="artificial__hidden">
          <div class="bb8__shadow"></div>
        </div>
      </div>
    </label>
<style>
/* From Uiverse.io by Galahhad - Source: https://codepen.io/bullerb/pen/gMpxNZ - Tags: switch, star wars, droid */
/* REMASTERED */
/* RTX-ON */
/* completely redone toggle and droid */

.bb8-toggle {
  --toggle-size: 16px;
  /* finally I removed the scale now everything depends on the font-size */
  /* --margin-top-for-head: 1.75em; */
  /* it's just in case 👆 */
  --toggle-width: 10.625em;
  --toggle-height: 5.625em;
  --toggle-offset: calc((var(--toggle-height) - var(--bb8-diameter)) / 2);
  --toggle-bg: linear-gradient(#2c4770, #070e2b 35%, #628cac 50% 70%, #a6c5d4)
    no-repeat;
  --bb8-diameter: 4.375em;
  --radius: 99em;
  --transition: 0.4s;
  --accent: #de7d2f;
  --bb8-bg: #fff;
}

.bb8-toggle,
.bb8-toggle *,
.bb8-toggle *::before,
.bb8-toggle *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.bb8-toggle {
  cursor: pointer;
  margin-top: var(--margin-top-for-head);
  font-size: var(--toggle-size);
}

.bb8-toggle__checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
}

.bb8-toggle__container {
  width: var(--toggle-width);
  height: var(--toggle-height);
  background: var(--toggle-bg);
  background-size: 100% 11.25em;
  background-position-y: -5.625em;
  border-radius: var(--radius);
  position: relative;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: calc(var(--toggle-offset) - 1.688em + 0.188em);
  left: var(--toggle-offset);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 2;
}

.bb8__head-container {
  position: relative;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 2;
  -webkit-transform-origin: 1.25em 3.75em;
  -ms-transform-origin: 1.25em 3.75em;
  transform-origin: 1.25em 3.75em;
}

.bb8__head {
  overflow: hidden;
  margin-bottom: -0.188em;
  width: 2.5em;
  height: 1.688em;
  background: -o-linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  background: -o-linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  background: -o-linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  background: -o-linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  background: linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    linear-gradient(
      45deg,
      transparent 0.188em,
      var(--bb8-bg) 0.188em 1.25em,
      transparent 1.25em
    ),
    linear-gradient(
      -45deg,
      transparent 0.188em,
      var(--bb8-bg) 0.188em 1.25em,
      transparent 1.25em
    ),
    linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
  z-index: 1;
  -webkit-filter: drop-shadow(0 0.063em 0.125em gray);
  filter: drop-shadow(0 0.063em 0.125em gray);
}

.bb8__head::before {
  content: "";
  position: absolute;
  width: 0.563em;
  height: 0.563em;
  background: -o-radial-gradient(
      0.25em 0.375em,
      0.125em circle,
      red,
      transparent
    ),
    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
          100%),
    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  background: -o-radial-gradient(
      0.25em 0.375em,
      0.125em circle,
      red,
      transparent
    ),
    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
          100%),
    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  background: -o-radial-gradient(
      0.25em 0.375em,
      0.125em circle,
      red,
      transparent
    ),
    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
          100%),
    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  background: -o-radial-gradient(
      0.25em 0.375em,
      0.125em circle,
      red,
      transparent
    ),
    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
          100%),
    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  background: radial-gradient(
      0.125em circle at 0.25em 0.375em,
      red,
      transparent
    ),
    radial-gradient(
      0.063em circle at 0.375em 0.188em,
      var(--bb8-bg) 50%,
      transparent 100%
    ),
    linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  border-radius: var(--radius);
  top: 0.413em;
  left: 50%;
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  transform: translate(-50%);
  -webkit-box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
  box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
  z-index: 1;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__head::after {
  content: "";
  position: absolute;
  bottom: 0.375em;
  left: 0;
  width: 100%;
  height: 0.188em;
  background: -o-linear-gradient(
    left,
    var(--accent) 0.125em,
    transparent 0.125em 0.188em,
    var(--accent) 0.188em 0.313em,
    transparent 0.313em 0.375em,
    var(--accent) 0.375em 0.938em,
    transparent 0.938em 1em,
    var(--accent) 1em 1.125em,
    transparent 1.125em 1.875em,
    var(--accent) 1.875em 2em,
    transparent 2em 2.063em,
    var(--accent) 2.063em 2.25em,
    transparent 2.25em 2.313em,
    var(--accent) 2.313em 2.375em,
    transparent 2.375em 2.438em,
    var(--accent) 2.438em
  );
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.125em, var(--accent)),
    color-stop(0.125em, transparent),
    color-stop(0.188em, var(--accent)),
    color-stop(0.313em, transparent),
    color-stop(0.375em, var(--accent)),
    color-stop(0.938em, transparent),
    color-stop(1em, var(--accent)),
    color-stop(1.125em, transparent),
    color-stop(1.875em, var(--accent)),
    color-stop(2em, transparent),
    color-stop(2.063em, var(--accent)),
    color-stop(2.25em, transparent),
    color-stop(2.313em, var(--accent)),
    color-stop(2.375em, transparent),
    color-stop(2.438em, var(--accent))
  );
  background: linear-gradient(
    to right,
    var(--accent) 0.125em,
    transparent 0.125em 0.188em,
    var(--accent) 0.188em 0.313em,
    transparent 0.313em 0.375em,
    var(--accent) 0.375em 0.938em,
    transparent 0.938em 1em,
    var(--accent) 1em 1.125em,
    transparent 1.125em 1.875em,
    var(--accent) 1.875em 2em,
    transparent 2em 2.063em,
    var(--accent) 2.063em 2.25em,
    transparent 2.25em 2.313em,
    var(--accent) 2.313em 2.375em,
    transparent 2.375em 2.438em,
    var(--accent) 2.438em
  );
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__antenna {
  position: absolute;
  -webkit-transform: translateY(-90%);
  -ms-transform: translateY(-90%);
  transform: translateY(-90%);
  width: 0.059em;
  border-radius: var(--radius) var(--radius) 0 0;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__antenna:nth-child(1) {
  height: 0.938em;
  right: 0.938em;
  background: -o-linear-gradient(#000 0.188em, silver 0.188em);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.188em, #000),
    color-stop(0.188em, silver)
  );
  background: linear-gradient(#000 0.188em, silver 0.188em);
}

.bb8__antenna:nth-child(2) {
  height: 0.375em;
  left: 50%;
  -webkit-transform: translate(-50%, -90%);
  -ms-transform: translate(-50%, -90%);
  transform: translate(-50%, -90%);
  background: silver;
}

.bb8__body {
  width: 4.375em;
  height: 4.375em;
  background: var(--bb8-bg);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 1;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: -webkit-gradient(
      linear,
      right top,
      left top,
      color-stop(4%, var(--bb8-bg)),
      color-stop(4%, var(--accent)),
      color-stop(10%, transparent),
      color-stop(90%, var(--accent)),
      color-stop(96%, var(--bb8-bg))
    ),
    -webkit-gradient(linear, left top, left bottom, color-stop(4%, var(--bb8-bg)), color-stop(4%, var(--accent)), color-stop(10%, transparent), color-stop(90%, var(--accent)), color-stop(96%, var(--bb8-bg))),
    -webkit-gradient(linear, left top, right top, color-stop(2.156em, transparent), color-stop(2.156em, silver), color-stop(2.188em, transparent)),
    -webkit-gradient(linear, left top, left bottom, color-stop(2.156em, transparent), color-stop(2.156em, silver), color-stop(2.188em, transparent));
  background: -o-linear-gradient(
      right,
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    -o-linear-gradient(var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10%
          90%, var(--accent) 90% 96%, var(--bb8-bg) 96%),
    -o-linear-gradient(left, transparent 2.156em, silver 2.156em 2.219em, transparent
          2.188em),
    -o-linear-gradient(transparent 2.156em, silver 2.156em 2.219em, transparent
          2.188em);
  background: linear-gradient(
      -90deg,
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    linear-gradient(
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    linear-gradient(
      to right,
      transparent 2.156em,
      silver 2.156em 2.219em,
      transparent 2.188em
    ),
    linear-gradient(
      transparent 2.156em,
      silver 2.156em 2.219em,
      transparent 2.188em
    );
  background-color: var(--bb8-bg);
}

.bb8__body::after {
  content: "";
  bottom: 1.5em;
  left: 0.563em;
  position: absolute;
  width: 0.188em;
  height: 0.188em;
  background: rgb(236, 236, 236);
  color: rgb(236, 236, 236);
  border-radius: 50%;
  -webkit-box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em,
    2.125em -2.125em, 3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
  box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em, 2.125em -2.125em,
    3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
}

.bb8__body::before {
  content: "";
  width: 2.625em;
  height: 2.625em;
  position: absolute;
  border-radius: 50%;
  z-index: 0.1;
  overflow: hidden;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 0.313em solid var(--accent);
  background: -o-radial-gradient(
      center,
      1em circle,
      rgb(236, 236, 236) 50%,
      transparent 51%
    ),
    -o-radial-gradient(center, 1.25em circle, var(--bb8-bg) 50%, transparent 51%),
    -o-linear-gradient(right, transparent 42%, var(--accent) 42% 58%, transparent
          58%),
    -o-linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg)
          58%);
  background: -o-radial-gradient(
      center,
      1em circle,
      rgb(236, 236, 236) 50%,
      transparent 51%
    ),
    -o-radial-gradient(center, 1.25em circle, var(--bb8-bg) 50%, transparent 51%),
    -o-linear-gradient(right, transparent 42%, var(--accent) 42% 58%, transparent
          58%),
    -o-linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg)
          58%);
  background: radial-gradient(
      1em circle at center,
      rgb(236, 236, 236) 50%,
      transparent 51%
    ),
    radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
    -webkit-gradient(linear, right top, left top, color-stop(42%, transparent), color-stop(42%, var(--accent)), color-stop(58%, transparent)),
    -webkit-gradient(linear, left top, left bottom, color-stop(42%, var(--bb8-bg)), color-stop(42%, var(--accent)), color-stop(58%, var(--bb8-bg)));
  background: radial-gradient(
      1em circle at center,
      rgb(236, 236, 236) 50%,
      transparent 51%
    ),
    radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
    linear-gradient(
      -90deg,
      transparent 42%,
      var(--accent) 42% 58%,
      transparent 58%
    ),
    linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 58%);
}

.artificial__hidden {
  position: absolute;
  border-radius: inherit;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bb8__shadow {
  content: "";
  width: var(--bb8-diameter);
  height: 20%;
  border-radius: 50%;
  background: #3a271c;
  -webkit-box-shadow: 0.313em 0 3.125em #3a271c;
  box-shadow: 0.313em 0 3.125em #3a271c;
  opacity: 0.25;
  position: absolute;
  bottom: 0;
  left: calc(var(--toggle-offset) - 0.938em);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: skew(-70deg);
  -ms-transform: skew(-70deg);
  transform: skew(-70deg);
  z-index: 1;
}

.bb8-toggle__scenery {
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  position: relative;
  border-radius: inherit;
}

.bb8-toggle__scenery::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: 0;
  background: #b18d71;
  z-index: 1;
}

.bb8-toggle__cloud {
  z-index: 1;
  position: absolute;
  border-radius: 50%;
}

.bb8-toggle__cloud:nth-last-child(1) {
  width: 0.875em;
  height: 0.625em;
  -webkit-filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)
    drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
  filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)
    drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
  right: 1.875em;
  top: 2.813em;
  background: -o-linear-gradient(bottom left, #ffffffae, #ffffffae);
  background: -webkit-gradient(
    linear,
    left bottom,
    right top,
    from(#ffffffae),
    to(#ffffffae)
  );
  background: linear-gradient(to top right, #ffffffae, #ffffffae);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8-toggle__cloud:nth-last-child(2) {
  top: 0.625em;
  right: 4.375em;
  width: 0.875em;
  height: 0.375em;
  background: #dfdedeae;
  -webkit-filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)
    drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
  filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)
    drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.bb8-toggle__cloud:nth-last-child(3) {
  top: 1.25em;
  right: 0.938em;
  width: 0.875em;
  height: 0.375em;
  background: #ffffffae;
  -webkit-filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)
    drop-shadow(-0.625em 0.313em #ffffffae);
  filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)
    drop-shadow(-0.625em 0.313em #ffffffae);
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

.gomrassen,
.hermes,
.chenini {
  position: absolute;
  border-radius: var(--radius);
  background: -o-linear-gradient(#fff, #6e8ea2);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fff),
    to(#6e8ea2)
  );
  background: linear-gradient(#fff, #6e8ea2);
  top: 100%;
}

.gomrassen {
  left: 0.938em;
  width: 1.875em;
  height: 1.875em;
  -webkit-box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
  box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.gomrassen::before,
.gomrassen::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  -webkit-box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
  box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
  background: rgb(184, 196, 200);
}

.gomrassen::before {
  left: 0.313em;
  top: 0.313em;
  width: 0.438em;
  height: 0.438em;
}

.gomrassen::after {
  width: 0.25em;
  height: 0.25em;
  left: 1.25em;
  top: 0.75em;
}

.hermes {
  left: 3.438em;
  width: 0.625em;
  height: 0.625em;
  -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.chenini {
  left: 4.375em;
  width: 0.5em;
  height: 0.5em;
  -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

.tatto-1,
.tatto-2 {
  position: absolute;
  width: 1.25em;
  height: 1.25em;
  border-radius: var(--radius);
}

.tatto-1 {
  background: #fefefe;
  right: 3.125em;
  top: 0.625em;
  -webkit-box-shadow: 0 0 0.438em #fdf4e1;
  box-shadow: 0 0 0.438em #fdf4e1;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.tatto-2 {
  background: -o-linear-gradient(#e6ac5c, #d75449);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#e6ac5c),
    to(#d75449)
  );
  background: linear-gradient(#e6ac5c, #d75449);
  right: 1.25em;
  top: 2.188em;
  -webkit-box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
  box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
  -webkit-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}

.bb8-toggle__star {
  position: absolute;
  width: 0.063em;
  height: 0.063em;
  background: #fff;
  border-radius: var(--radius);
  -webkit-filter: drop-shadow(0 0 0.063em #fff);
  filter: drop-shadow(0 0 0.063em #fff);
  color: #fff;
  top: 100%;
}

.bb8-toggle__star:nth-child(1) {
  left: 3.75em;
  -webkit-box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,
    -3.125em 1.875em, 1.25em 2.813em;
  box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,
    -3.125em 1.875em, 1.25em 2.813em;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.bb8-toggle__star:nth-child(2) {
  left: 4.688em;
  -webkit-box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,
    -3.125em 1.25em, 1.25em -1.563em;
  box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,
    -3.125em 1.25em, 1.25em -1.563em;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.bb8-toggle__star:nth-child(3) {
  left: 5.313em;
  -webkit-box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0,
    -3.75em -0.625em, -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
  box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0, -3.75em -0.625em,
    -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8-toggle__star:nth-child(4) {
  left: 1.875em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.bb8-toggle__star:nth-child(5) {
  left: 5em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.bb8-toggle__star:nth-child(6) {
  left: 2.5em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}

.bb8-toggle__star:nth-child(7) {
  left: 3.438em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

/* actions */

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(1) {
  top: 0.625em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(2) {
  top: 1.875em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(3) {
  top: 1.25em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(4) {
  top: 3.438em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(5) {
  top: 3.438em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(6) {
  top: 0.313em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(7) {
  top: 1.875em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__cloud {
  right: -100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .gomrassen {
  top: 0.938em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .hermes {
  top: 2.5em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .chenini {
  top: 2.75em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container {
  background-position-y: 0;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-1 {
  top: 100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-2 {
  top: 100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8 {
  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset));
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__shadow {
  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset) + 0.938em);
  -webkit-transform: skew(70deg);
  -ms-transform: skew(70deg);
  transform: skew(70deg);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__body {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(225deg);
}

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::before {
  left: 100%;
}

.bb8-toggle__checkbox:not(:checked):hover
  + .bb8-toggle__container
  .bb8__antenna:nth-child(1) {
  right: 1.5em;
}

.bb8-toggle__checkbox:hover
  + .bb8-toggle__container
  .bb8__antenna:nth-child(2) {
  left: 0.938em;
}

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::after {
  background-position: 1.375em 0;
}

.bb8-toggle__checkbox:checked:hover
  + .bb8-toggle__container
  .bb8__head::before {
  left: 0;
}

.bb8-toggle__checkbox:checked:hover
  + .bb8-toggle__container
  .bb8__antenna:nth-child(2) {
  left: calc(100% - 0.938em);
}

.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::after {
  background-position: -1.375em 0;
}

.bb8-toggle__checkbox:active + .bb8-toggle__container .bb8__head-container {
  -webkit-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  transform: rotate(25deg);
}

.bb8-toggle__checkbox:checked:active
  + .bb8-toggle__container
  .bb8__head-container {
  -webkit-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

.bb8:hover .bb8__head::before,
.bb8:hover .bb8__antenna:nth-child(2) {
  left: 50% !important;
}

.bb8:hover .bb8__antenna:nth-child(1) {
  right: 0.938em !important;
}

.bb8:hover .bb8__head::after {
  background-position: 0 0 !important;
}
</style>


================================================
FILE: Toggle-switches/Galahhad_strong-squid-82.html
================================================
<label class="theme-switch">
  <input type="checkbox" class="theme-switch__checkbox">
  <div class="theme-switch__container">
    <div class="theme-switch__clouds"></div>
    <div class="theme-switch__stars-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 55" fill="none">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M135.831 3.00688C135.055 3.85027 134.111 4.29946 133 4.35447C134.111 4.40947 135.055 4.85867 135.831 5.71123C136.607 6.55462 136.996 7.56303 136.996 8.72727C136.996 7.95722 137.172 7.25134 137.525 6.59129C137.886 5.93124 138.372 5.39954 138.98 5.00535C139.598 4.60199 140.268 4.39114 141 4.35447C139.88 4.2903 138.936 3.85027 138.16 3.00688C137.384 2.16348 136.996 1.16425 136.996 0C136.996 1.16425 136.607 2.16348 135.831 3.00688ZM31 23.3545C32.1114 23.2995 33.0551 22.8503 33.8313 22.0069C34.6075 21.1635 34.9956 20.1642 34.9956 19C34.9956 20.1642 35.3837 21.1635 36.1599 22.0069C36.9361 22.8503 37.8798 23.2903 39 23.3545C38.2679 23.3911 37.5976 23.602 36.9802 24.0053C36.3716 24.3995 35.8864 24.9312 35.5248 25.5913C35.172 26.2513 34.9956 26.9572 34.9956 27.7273C34.9956 26.563 34.6075 25.5546 33.8313 24.7112C33.0551 23.8587 32.1114 23.4095 31 23.3545ZM0 36.3545C1.11136 36.2995 2.05513 35.8503 2.83131 35.0069C3.6075 34.1635 3.99559 33.1642 3.99559 32C3.99559 33.1642 4.38368 34.1635 5.15987 35.0069C5.93605 35.8503 6.87982 36.2903 8 36.3545C7.26792 36.3911 6.59757 36.602 5.98015 37.0053C5.37155 37.3995 4.88644 37.9312 4.52481 38.5913C4.172 39.2513 3.99559 39.9572 3.99559 40.7273C3.99559 39.563 3.6075 38.5546 2.83131 37.7112C2.05513 36.8587 1.11136 36.4095 0 36.3545ZM56.8313 24.0069C56.0551 24.8503 55.1114 25.2995 54 25.3545C55.1114 25.4095 56.0551 25.8587 56.8313 26.7112C57.6075 27.5546 57.9956 28.563 57.9956 29.7273C57.9956 28.9572 58.172 28.2513 58.5248 27.5913C58.8864 26.9312 59.3716 26.3995 59.9802 26.0053C60.5976 25.602 61.2679 25.3911 62 25.3545C60.8798 25.2903 59.9361 24.8503 59.1599 24.0069C58.3837 23.1635 57.9956 22.1642 57.9956 21C57.9956 22.1642 57.6075 23.1635 56.8313 24.0069ZM81 25.3545C82.1114 25.2995 83.0551 24.8503 83.8313 24.0069C84.6075 23.1635 84.9956 22.1642 84.9956 21C84.9956 22.1642 85.3837 23.1635 86.1599 24.0069C86.9361 24.8503 87.8798 25.2903 89 25.3545C88.2679 25.3911 87.5976 25.602 86.9802 26.0053C86.3716 26.3995 85.8864 26.9312 85.5248 27.5913C85.172 28.2513 84.9956 28.9572 84.9956 29.7273C84.9956 28.563 84.6075 27.5546 83.8313 26.7112C83.0551 25.8587 82.1114 25.4095 81 25.3545ZM136 36.3545C137.111 36.2995 138.055 35.8503 138.831 35.0069C139.607 34.1635 139.996 33.1642 139.996 32C139.996 33.1642 140.384 34.1635 141.16 35.0069C141.936 35.8503 142.88 36.2903 144 36.3545C143.268 36.3911 142.598 36.602 141.98 37.0053C141.372 37.3995 140.886 37.9312 140.525 38.5913C140.172 39.2513 139.996 39.9572 139.996 40.7273C139.996 39.563 139.607 38.5546 138.831 37.7112C138.055 36.8587 137.111 36.4095 136 36.3545ZM101.831 49.0069C101.055 49.8503 100.111 50.2995 99 50.3545C100.111 50.4095 101.055 50.8587 101.831 51.7112C102.607 52.5546 102.996 53.563 102.996 54.7273C102.996 53.9572 103.172 53.2513 103.525 52.5913C103.886 51.9312 104.372 51.3995 104.98 51.0053C105.598 50.602 106.268 50.3911 107 50.3545C105.88 50.2903 104.936 49.8503 104.16 49.0069C103.384 48.1635 102.996 47.1642 102.996 46C102.996 47.1642 102.607 48.1635 101.831 49.0069Z" fill="currentColor"></path>
      </svg>
    </div>
    <div class="theme-switch__circle-container">
      <div class="theme-switch__sun-moon-container">
        <div class="theme-switch__moon">
          <div class="theme-switch__spot"></div>
          <div class="theme-switch__spot"></div>
          <div class="theme-switch__spot"></div>
        </div>
      </div>
    </div>
  </div>
</label>
<style>
/* From Uiverse.io by Galahhad - Source: https://youtu.be/S6T6hrc8cQo - Tags: switch, light&dark, bounce animation */
.theme-switch {
  --toggle-size: 30px;
  /* the size is adjusted using font-size,
     this is not transform scale,
     so you can choose any size */
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  /* radius 0 - minecraft mode :) */
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #F3FDFF;
  --back-clouds-color: #AACADF;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius)
}

.theme-switch__checkbox {
  display: none;
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  pointer-events: none;
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.theme-switch__moon {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  -webkit-box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

/* actions */

.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)
}

.theme-switch__circle-container:hover {
  left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
  bottom: -4.062em;
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
</style>


================================================
FILE: Toggle-switches/Galahhad_tame-moth-5.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider">
    <span class="circle">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22" x="0" y="0" viewBox="0 0 32 32" style="enable-background:new 0 0 512 512" xml:space="preserve" class="sun">
          <g>
            <circle cx="16" cy="16" r="8.312" fill="currentColor" data-original="#000000"></circle>
            <path d="M31.72 16.706a1.03 1.03 0 0 0 0-1.413l-2.816-3.023a1.037 1.037 0 0 1-.28-.831l.509-4.104c.072-.54-.291-1.05-.832-1.153l-4.062-.78a1.035 1.035 0 0 1-.707-.519l-1.994-3.616a1.037 1.037 0 0 0-1.35-.436l-3.751 1.756c-.27.125-.603.125-.873-.01L11.814.83a1.037 1.037 0 0 0-1.351.436L8.468 4.883c-.146.27-.406.457-.707.52L3.7 6.182c-.54.104-.904.613-.831 1.153l.509 4.104c.03.301-.063.602-.28.831L.28 15.293a1.03 1.03 0 0 0 0 1.413l2.815 3.024c.218.228.312.53.28.831l-.508 4.104c-.073.54.29 1.05.83 1.153l4.063.78c.301.062.561.249.707.519l1.994 3.615c.27.478.863.676 1.351.437l3.75-1.756c.27-.125.603-.125.873.01l3.751 1.746c.488.239 1.08.041 1.35-.437l1.995-3.615c.146-.27.406-.457.707-.52l4.062-.779c.54-.104.904-.613.832-1.153l-.51-4.104a1.037 1.037 0 0 1 .28-.831l2.816-3.023zM16 26.39c-5.725 0-10.39-4.665-10.39-10.39S10.275 5.61 16 5.61 26.39 10.275 26.39 16 21.725 26.39 16 26.39z" fill="currentColor" data-original="#000000"></path>
          </g>
        </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512" height="22" width="22" class="moon">
        <g clip-path="url(#clip0_68_17)">
          <path fill="currentColor" d="M355.2 142.08C355.2 162.133 338.773 178.56 318.72 178.56C298.667 178.56 282.453 162.133 282.453 142.08C282.453 122.027 298.667 105.813 318.72 105.813C338.773 105.813 355.2 122.027 355.2 142.08Z"></path>
          <path fill="currentColor" d="M151.253 283.52C142.72 283.52 135.893 290.347 135.893 298.88C135.893 307.413 142.72 314.453 151.253 314.453C159.787 314.453 166.613 307.413 166.613 298.88C166.613 290.347 159.787 283.52 151.253 283.52ZM151.253 283.52C142.72 283.52 135.893 290.347 135.893 298.88C135.893 307.413 142.72 314.453 151.253 314.453C159.787 314.453 166.613 307.413 166.613 298.88C166.613 290.347 159.787 283.52 151.253 283.52ZM501.12 271.147C495.573 268.8 491.947 263.253 491.947 257.067C491.947 250.88 495.573 245.333 501.12 242.987C507.947 240.213 511.787 233.387 510.933 226.347C495.573 97.4933 385.92 0.213318 256 0.213318C197.547 0.213318 142.72 19.4133 97.2799 55.4667C91.7333 59.9467 89.8133 67.6267 92.5866 74.4533C93.2266 75.52 93.4399 77.0133 93.4399 79.1467C93.4399 87.4667 86.3999 94.5066 78.0799 94.5066C75.9466 94.5066 74.4533 94.2933 73.3866 93.6533C70.1379 92.2903 66.5363 92.0107 63.1161 92.8562C59.696 93.7016 56.6395 95.627 54.3999 98.3467C18.1333 143.787 -0.853394 198.613 -0.853394 257.067C-0.853394 398.72 114.347 513.92 256 513.92C385.92 513.92 495.573 416.64 510.933 287.787C511.367 284.318 510.64 280.804 508.864 277.793C507.089 274.782 504.365 272.445 501.12 271.147ZM151.253 346.453C125.227 346.453 103.893 325.12 103.893 298.88C103.893 272.853 125.227 251.52 151.253 251.52C177.493 251.52 198.613 272.853 198.613 298.88C198.613 325.12 177.493 346.453 151.253 346.453ZM318.72 430.08C292.693 430.08 271.36 408.96 271.36 382.72C271.36 356.48 292.693 335.36 318.72 335.36C344.96 335.36 366.293 356.48 366.293 382.72C366.293 408.96 344.96 430.08 318.72 430.08ZM318.72 210.56C281.173 210.56 250.453 179.84 250.453 142.08C250.453 104.533 281.173 73.8133 318.72 73.8133C356.48 73.8133 387.2 104.533 387.2 142.08C387.2 179.84 356.48 210.56 318.72 210.56ZM318.72 367.36C310.4 367.36 303.36 374.187 303.36 382.72C303.36 391.253 310.4 398.08 318.72 398.08C327.253 398.08 334.293 391.253 334.293 382.72C334.293 374.187 327.253 367.36 318.72 367.36ZM151.253 283.52C142.72 283.52 135.893 290.347 135.893 298.88C135.893 307.413 142.72 314.453 151.253 314.453C159.787 314.453 166.613 307.413 166.613 298.88C166.613 290.347 159.787 283.52 151.253 283.52Z"></path>
        </g>
        <defs>
          <clipPath id="clip0_68_17">
            <rect fill="currentColor" height="512" width="512"></rect>
          </clipPath>
        </defs>
      </svg>
    </span>
  </span>
</label>
<style>
/* From Uiverse.io by Galahhad - Tags: gradient, switch */
/* checkbox settings 👇 */

.switch {
  /* global */
  --total_transition_duration: .3s;
  /* switch */
  --slider_width: 2.875em;
  --slider_height: 1.5em;
  --slider_light_bg: linear-gradient(90deg, #f32a85 0%, #f19d36 100%);
  --slider_night_bg: linear-gradient(90deg, #1701a1 0%, #af0693 75%);
  --slider_offset: calc((var(--slider_height) - var(--circle_diameter)) / 2);
  --slider_radius: calc(var(--slider_height) / 2);
  /* circle */
  --circle_diameter: 1.125em;
  --circle_rotation: 360deg;
  /* svg */
  --svg_width: var(--circle_diameter);
  --sun-color: #fff;
  --moon-color: #fff;
}

.switch input {
  display: none;
}

.slider svg {
  position: absolute;
  height: auto;
  color: var(--svg-color);
  transition: var(--total_transition_duration) ease;
  width: 100%;
}

.circle svg.sun {
  transform: scale(1);
  color: var(--sun-color);
}

.circle svg.moon {
  transform: scale(0);
  color: var(--moon-color);
  width: calc(100% - 2px);
}

.slider {
  display: inline-block;
  width: var(--slider_width);
  height: var(--slider_height);
  border-radius: var(--slider_radius);
  position: relative;
  cursor: pointer;
  transition: var(--total_transition_duration) ease;
  overflow: hidden;
}

.slider::before,
.slider::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: var(--total_transition_duration) ease;
}

/* ::before and ::after backgrounds are needed for smooth 
transition of gradients otherwise there is no way :\ */
.slider::before {
  opacity: 0;
  background: var(--slider_night_bg);
}

.slider::after {
  opacity: 1;
  background: var(--slider_light_bg);
}

/* ------------ */

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--circle_diameter);
  height: var(--circle_diameter);
  position: absolute;
  top: var(--slider_offset);
  left: var(--slider_offset);
  transition: var(--total_transition_duration) ease;
  z-index: 10;
}

/* actions */

.switch input:checked+.slider::before {
  opacity: 1;
}

.switch input:checked+.slider::after {
  opacity: 0;
}

.switch input:active+.slider .circle {
  transform: scale(0.9);
}

.switch input:checked+.slider .circle {
  left: calc(100% - var(--circle_diameter) - var(--slider_offset));
}

.switch input:checked+.slider .sun {
  transform: scale(0) rotate(var(--circle_rotation));
}

.switch input:checked+.slider .moon {
  transform: scale(1) rotate(var(--circle_rotation));
}
</style>


================================================
FILE: Toggle-switches/Gianluks90_ordinary-goat-76.html
================================================
<label class="switch">
  <input type="checkbox" class="slider-input">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Gianluks90 - Tags: switch */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
  margin-right: 12px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  box-shadow: inset 2px 2px 12px -5px gray;
}

.slider:before {
  position: absolute;
  content: "";
  height: 2em;
  width: 1.75em;
  left: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider-input:checked + .slider {
  background-color: #90EE90;
  box-shadow: inset 2px 2px 9px -5px gray;
}

.slider-input:focus + .slider {
  box-shadow: 0 0 1px #90EE90;
}

.slider-input:checked + .slider:before {
  -webkit-transform: translateX(1.75em);
  -ms-transform: translateX(1.75em);
  transform: translateX(1.75em);
}
</style>


================================================
FILE: Toggle-switches/ICe1BotMaker_quick-goat-3.html
================================================
<label for="check">
  <input checked="" id="check" type="checkbox">
  <div class="check-bg">
    <span class="check-span"></span>
  </div>
</label>
<style>
/* From Uiverse.io by ICe1BotMaker - Tags: switch, modern, toggle switch */
label[for="check"] input {
  display: none;
}

label[for="check"] .check-bg {
  width: 50px;
  padding: 2.5px;
  background: whitesmoke;
  border-radius: 100px;
  border: 1px solid rgb(228, 228, 228);
  transition: background .1s, border .1s;
}

label[for="check"] .check-span {
  display: block;
  background: rgb(219, 219, 219);
  width: 25px;
  height: 25px;
  border-radius: 100%;
  transition: background .1s, border .1s, margin-left .325s;
}

label[for="check"] input:checked ~ .check-bg {
  background: rgb(81, 107, 255);
  border: 1px solid rgb(68, 90, 216);
}

label[for="check"] input:checked ~ .check-bg .check-span {
  background: white;
  border: 0;
  margin-left: 18px;
}
</style>


================================================
FILE: Toggle-switches/Javierrocadev_bright-catfish-97.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: simple, red, green, switch, tailwind -->
<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" value="" class="sr-only peer">
  <div class="group peer ring-0 bg-rose-400  rounded-full outline-none duration-300 after:duration-300 w-24 h-12  shadow-md peer-checked:bg-emerald-500  peer-focus:outline-none  after:content-[''] after:rounded-full after:absolute after:bg-gray-50 after:outline-none after:h-10 after:w-10 after:top-1 after:left-1 after:flex after:justify-center after:items-center peer-checked:after:translate-x-12 peer-hover:after:scale-95">
    <svg class="absolute  top-1 left-12 stroke-gray-900 w-10 h-10" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
 <path class="svg-fill-primary" d="M50,18A19.9,19.9,0,0,0,30,38v8a8,8,0,0,0-8,8V74a8,8,0,0,0,8,8H70a8,8,0,0,0,8-8V54a8,8,0,0,0-8-8H38V38a12,12,0,0,1,23.6-3,4,4,0,1,0,7.8-2A20.1,20.1,0,0,0,50,18Z">
 </path>
</svg>
    <svg class="absolute top-1 left-1 stroke-gray-900  w-10 h-10" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
 <path d="M30,46V38a20,20,0,0,1,40,0v8a8,8,0,0,1,8,8V74a8,8,0,0,1-8,8H30a8,8,0,0,1-8-8V54A8,8,0,0,1,30,46Zm32-8v8H38V38a12,12,0,0,1,24,0Z" fill-rule="evenodd">
 </path>
</svg>
  </div>
</label>





================================================
FILE: Toggle-switches/Javierrocadev_chilly-zebra-32.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: red, gradient, switch, box-shadow, tailwind -->
<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" value="" class="sr-only peer">
  <div class="group peer ring-0 [box-shadow:1px_3px_0px_0px_#000]  bg-gradient-to-r from-rose-400 to-red-900  rounded-full outline-none duration-1000 after:duration-300 w-24 h-12  shadow-md  peer-focus:outline-none  after:content-[''] after:rounded-full after:absolute after:[background:#0D2B39]   peer-checked:after:rotate-180 after:[background:conic-gradient(from_135deg,_#b2a9a9,_#b2a8a8,_#ffffff,_#d7dbd9_,_#ffffff,_#b2a8a8)]  after:outline-none  after:h-10 after:w-10 after:top-1 after:left-1 peer-checked:after:translate-x-12 peer-hover:after:scale-95 peer-checked:bg-gradient-to-r peer-checked:from-emerald-500 peer-checked:to-emerald-900">
  </div>
</label>



================================================
FILE: Toggle-switches/Javierrocadev_proud-goat-59.html
================================================
<!-- From Uiverse.io by Javierrocadev - Source: Javierrocadev - Tags: simple, white, gradient, switch, tailwind -->
<label class="relative inline-flex items-center cursor-pointer">
  <input class="sr-only peer" value="" type="checkbox">
    <div class="peer ring-2 ring-gray-900 bg-gradient-to-r from-rose-400 to-red-900 rounded-full outline-none duration-300 after:duration-500 w-20 h-8  shadow-inner peer-checked:bg-gradient-to-r peer-checked:from-emerald-500 peer-checked:to-emerald-900 shadow-gray-900 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-gray-900  after:content-[''] after:rounded-full after:absolute after:outline-none after:h-12 after:w-12 after:bg-gray-50 after:-top-2 after:-left-2 after:flex after:justify-center after:items-center after:border-4 after:border-gray-900  peer-checked:after:translate-x-14">
  </div>
</label>



================================================
FILE: Toggle-switches/Javierrocadev_soft-tiger-98.html
================================================
<!-- From Uiverse.io by Javierrocadev - Source: Javierrocadev - Tags: red, green, hover, switch, rotate, hover effect, scale, tailwind -->
<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" value="" class="sr-only peer">
  <div class="peer ring-0 bg-rose-400  rounded-full outline-none duration-300 after:duration-500 w-12 h-12  shadow-md peer-checked:bg-emerald-500  peer-focus:outline-none  after:content-['✖️'] after:rounded-full after:absolute after:outline-none after:h-10 after:w-10 after:bg-gray-50 after:top-1 after:left-1 after:flex after:justify-center after:items-center  peer-hover:after:scale-75 peer-checked:after:content-['✔️'] after:-rotate-180 peer-checked:after:rotate-0">
  </div>
</label>



================================================
FILE: Toggle-switches/Javierrocadev_splendid-insect-57.html
================================================
<!-- From Uiverse.io by Javierrocadev - Source: Javierrocadev - Tags: simple, blue, switch, yes, no, tailwind -->
<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" value="" class="sr-only peer">
    <div class="peer outline-none duration-100 after:duration-500 w-28 h-14 bg-blue-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-500  after:content-['No'] after:absolute after:outline-none after:h-12 after:w-12 after:bg-white after:top-1 after:left-1 after:flex after:justify-center after:items-center  after:text-sky-800 after:font-bold peer-checked:after:translate-x-14 peer-checked:after:content-['Yes'] peer-checked:after:border-white">
  </div>
</label>



================================================
FILE: Toggle-switches/Javierrocadev_strange-otter-53.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: red, green, gradient, switch, light, tailwind -->
<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" value="" class="sr-only peer">
  <div class="group peer ring-0 bg-gradient-to-tr from-rose-100 via-rose-400 to-rose-500  rounded-full outline-none duration-300 after:duration-300 w-24 h-12  shadow-md peer-checked:bg-emerald-500  peer-focus:outline-none  after:content-['✖️']  after:rounded-full after:absolute after:bg-gray-50 after:outline-none after:h-10 after:w-10 after:top-1 after:left-1 after:-rotate-180 after:flex after:justify-center after:items-center peer-checked:after:translate-x-12 peer-checked:after:content-['✔️'] peer-hover:after:scale-95 peer-checked:after:rotate-0 peer-checked:bg-gradient-to-tr peer-checked:from-green-100 peer-checked:via-lime-400 peer-checked:to-lime-500">
  </div>
</label>



================================================
FILE: Toggle-switches/Jay-9527_weak-dingo-78.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Jay-9527 - Tags: switch */
/* The switch - the box around the slider */
.switch {
 font-size: 17px;
 position: relative;
 display: inline-block;
 width: 3.5em;
 height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
 opacity: 0;
 width: 0;
 height: 0;
}

/* The slider */
.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #ccc;
 transition: .4s;
 border-radius: 30px;
}

.slider:before {
 position: absolute;
 content: "";
 height: 1.4em;
 width: 1.4em;
 border-radius: 20px;
 left: 0.3em;
 bottom: 0.3em;
 background-color: white;
 transition: .4s;
}

input:checked + .slider {
 background-color: rgb(0,221,80);
}

input:focus + .slider {
 box-shadow: 0 0 1px rgb(0,221,80);
}

input:checked + .slider:before {
 transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/JaydipPrajapati1910_average-shrimp-57.html
================================================
<div class="fx-block">
	<div class="toggle">
		<div>
			<input type="checkbox" id="toggles">
			<div data-unchecked="On" data-checked="Off">
			</div>
		</div>
	</div>
</div>


<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: switch, toggle switch, light switch */
.toggle > div {
  position: relative;
  padding: 10px;
  width: 150px;
  height: 75px;
  border-radius: 50px;
  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, .5), 0px 1px 1px 0 rgba(255, 255, 255, 1);
  background: rgb(189, 191, 193);
  background: linear-gradient(to bottom, rgba(189, 191, 193, 1) 0%, rgba(249, 251, 254, 1) 100%);
}

.toggle > div > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  top: -3px;
  left: 17px;
  width: 130px;
  height: 55px;
  z-index: 5;
}

.toggle > div > input[type=checkbox] ~ div {
  width: 130px;
  height: 55px;
  border-radius: 50px;
  border: 1px solid #979797;
  box-shadow: inset 5px 0 0 0 rgba(0, 0, 0, .1), inset -5px 0 0 0 rgba(0, 0, 0, .1), inset -6px 0 0 0 rgba(255, 255, 255, .5), inset -4px 6px 11px -5px rgba(0, 0, 0, .2), inset 1px 1px 0 0 rgba(255, 255, 255, 1), -6px 4px 11px -7px rgba(0, 0, 0, .5);
  background: rgb(253, 252, 251);
  background: linear-gradient(to right, rgba(253, 252, 251, 1) 37%, rgba(229, 229, 229, 1) 61%);
}

.toggle > div > input[type=checkbox]:checked ~ div {
  box-shadow: inset -5px 0 0 0 rgba(0, 0, 0, .1), inset 5px 0 0 0 rgba(0, 0, 0, .1), inset 6px 0 0 0 rgba(255, 255, 255, .5), inset -4px 6px 11px -5px rgba(0, 0, 0, .2), inset 1px 1px 0 0 rgba(255, 255, 255, 1), -6px 4px 11px -7px rgba(0, 0, 0, .5);
  background: rgb(229, 229, 229);
  background: linear-gradient(to right, rgba(229, 229, 229, 1) 39%, rgba(253, 252, 251, 1) 63%);
}

.toggle > div > input[type=checkbox] ~ div:before {
  content: attr(data-unchecked);
  display: block;
  position: absolute;
  border-radius: 10px;
  top: 27px;
  left: 30px;
}

.toggle > div > input[type=checkbox] ~ div:after {
  content: attr(data-checked);
  color: #df0000;
  text-shadow: 0 1px 0 #fff, 0px 0 7px #df0000;
  filter: dropshadow(color=#df0000, offx=0, offy=0);
  display: block;
  position: absolute;
  border-radius: 10px;
  top: 27px;
  left: 100px;
}

.toggle > div > input[type=checkbox]:checked ~ div:before {
  color: #119400;
  text-shadow: 0 1px 0 #fff, 0px 0 7px #007a08;
  filter: dropshadow(color=#007a08, offx=0, offy=0);
}

.toggle > div > input[type=checkbox]:checked ~ div:after {
  color: #000;
  text-shadow: none;
  filter: dropshadow(none);
}





































</style>


================================================
FILE: Toggle-switches/JaydipPrajapati1910_blue-goat-28.html
================================================
<input type="checkbox" id="toggle_checkbox">
<label for="toggle_checkbox">
  <div class="star">
 🔅
  </div>
  <div class="moon">🌙</div>
</label>

<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: switch, moon, sun, toggle switch */
#toggle_checkbox {
  display: none;
}

label {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: 116px;
  height: 56px;
  margin: 0 auto;
  background-color: rgb(7, 189, 128);
  border: 4px solid rgb(75, 114, 94);
  border-radius: 56px;
  transform: translateY(-50%);
  cursor: pointer;
  transition: 0.3s ease background-color;
  overflow: hidden;
  user-select: none;
}

.star {
  position: absolute;
  top: 5px;
  left: 13px;
  width: 30px;
  height: 30px;
  font-size: 25px;
  transform: scale(1);
  border-radius: 50%;
  transition: 0.3s ease top, 0.3s ease left, 0.3s ease transform, 0.3s ease background-color;
  z-index: 1;
  background-color: none;
}

.moon {
  position: absolute;
  bottom: -52px;
  right: 15px;
  width: 30px;
  height: 30px;
  font-size: 30px;
  transition: 0.3s ease bottom;
}

.moon:before {
  content: "";
  position: absolute;
  top: -12px;
  left: -17px;
  background-color: none;
  width: 30px;
  height: 30px;
  font-size: 30px;
  transition: 0.2s ease background-color;
}

#toggle_checkbox:checked + label {
  background-color: rgb(75, 114, 94);
  border: 4px solid  rgb(7, 189, 128);
}

#toggle_checkbox:checked + label .star {
  top: 2px;
  left: 64px;
  transform: scale(0.6);
}

#toggle_checkbox:checked + label .moon {
  bottom: 14px;
}


</style>


================================================
FILE: Toggle-switches/JaydipPrajapati1910_brave-rattlesnake-29.html
================================================
<div class="toggle-button-cover">
        <div id="button-3" class="button r">
          <input class="checkbox" type="checkbox">
          <div class="knobs"></div>
          <div class="layer"></div>
        </div>
      </div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: animation, action, switch, theme-switch, yes, no, text animation, animated, toggle switch */
.toggle-button-cover {
  display: table-cell;
  position: relative;
  width: 200px;
  height: 140px;
  box-sizing: border-box;
}

.button-cover {
  height: 100px;
  margin: 20px;
  background-color: #fff;
  box-shadow: 0 10px 20px -8px #c5d6d6;
  border-radius: 4px;
}

.button-cover:before {
  counter-increment: button-counter;
  content: counter(button-counter);
  position: absolute;
  right: 0;
  bottom: 0;
  color: #d7e3e3;
  font-size: 12px;
  line-height: 1;
  padding: 5px;
}

.button-cover,
.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  position: relative;
  top: 50%;
  width: 74px;
  height: 36px;
  margin: -20px auto 0 auto;
  overflow: hidden;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: #ebf7fc;
  transition: 0.3s ease all;
  z-index: 1;
}

.button.r,
.button.r .layer {
  border-radius: 100px;
}

#button-3 .knobs:before {
  content: "YES";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03a9f4;
  border-radius: 50%;
  transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}

#button-3 .checkbox:active + .knobs:before {
  width: 46px;
  border-radius: 100px;
}

#button-3 .checkbox:checked:active + .knobs:before {
  margin-left: -26px;
}

#button-3 .checkbox:checked + .knobs:before {
  content: "NO";
  left: 42px;
  background-color: #f44336;
}

#button-3 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
</style>


================================================
FILE: Toggle-switches/JaydipPrajapati1910_neat-newt-18.html
================================================
<div class="btn-container">
	
			<label class="switch btn-color-mode-switch">
		        <input value="1" id="color_mode" name="color_mode" type="checkbox">
		        <label class="btn-color-mode-switch-inner" data-off="AM" data-on="PM" for="color_mode"></label>
		    </label>
        
	</div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: switch, toggle switch, AM/PM */
.btn-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.btn-color-mode-switch {
  display: inline-block;
  margin: 0px;
  position: relative;
}

.btn-color-mode-switch > label.btn-color-mode-switch-inner {
  margin: 0px;
  width: 140px;
  height: 40px;
  background-color: #fcce8a;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
    /*box-shadow: 0px 0px 8px 0px rgba(17, 17, 17, 0.34) inset;*/
  display: block;
}

.btn-color-mode-switch > label.btn-color-mode-switch-inner:before {
  content: attr(data-on);
  position: absolute;
  font-size: 20px;
  font-weight: 600;
  top: 7px;
  right: 20px;
  color: #222;
}

.btn-color-mode-switch > label.btn-color-mode-switch-inner:after {
  content: attr(data-off);
  width: 70px;
  height: 25px;
  background: #fff;
  border-radius: 26px;
  position: absolute;
  font-size: 20px;
  display: flex;
  justify-content: center;
  left: 2px;
  top: 2px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0px 0px 6px -2px #111;
  padding: 5px 0px;
  color: #222;
  font-weight: 600;
}

.btn-color-mode-switch input[type="checkbox"] {
  cursor: pointer;
  width: 50px;
  height: 25px;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: 1;
  margin: 0px;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner {
  background-color: #fcce8a;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after {
  content: attr(data-on);
  left: 68px;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before {
  content: attr(data-off);
  right: auto;
  left: 20px;
}


</style>


================================================
FILE: Toggle-switches/JaydipPrajapati1910_spicy-kangaroo-63.html
================================================
<div class="switch">
	<input class="switch-check" id="switch1" type="checkbox">
	<label class="switch-label" for="switch1">
		Check
		<span></span>
	</label>
</div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: switch, toggle, toggle switch */
.switch {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  border: 4px solid rgba(58, 58, 58, 0.1);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) inset;
  height: 48px;
  margin: 2px;
  position: relative;
  width: 120px;
  display: inline-block;
  user-select: none;
}

.switch-check {
  position: absolute;
  visibility: hidden;
  user-select: none;
}

.switch-label {
  cursor: pointer;
  display: block;
  height: 42px;
  text-indent: -9999px;
  width: 115px;
  user-select: none;
}

.switch-label:before {
  background: #fff;
  background: -webkit-radial-gradient(45%, circle, rgb(255, 58, 58) 0%, rgb(255, 113, 113) 100%);
  border-radius: 10px;
  border: 1px solid #742323;
  box-shadow: 0 2px 5px rgba(255, 67, 48, 0.6), 0 0 5px rgba(255, 159, 109, 0.5) inset;
  content: "";
  display: block;
  height: 10px;
  left: -20%;
  position: absolute;
  top: 16px;
  transition: all 0.2s;
  width: 10px;
  z-index: 12;
  user-select: none;
}

.switch-label:after {
  background: #fff;
  background: -moz-radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
  border-radius: 10px;
  border: 1px solid #111;
  box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
  content: "";
  display: block;
  height: 10px;
  right: -20%;
  position: absolute;
  top: 16px;
  transition: all 0.2s;
  width: 10px;
  z-index: 12;
  user-select: none;
}

.switch-label span {
  background: linear-gradient(#4f4f4f, #2b2b2b);
  border-radius: 30px;
  border: 1px solid #1a1a1a;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 0 rgba(0, 0, 0, 0.2) inset;
  display: block;
  height: 38px;
  left: 1px;
  position: absolute;
  top: 1px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  width: 53px;
  user-select: none;
}

.switch-label span:before {
  background: #fff;
  background: -webkit-linear-gradient(left, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
  background: linear-gradient(left, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
  border-radius: 30px 10px 10px 30px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2) inset;
  content: "";
  display: block;
  height: 33px;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 21px;
  user-select: none;
}

.switch-label span:after {
  background: #fff;
  background: -webkit-linear-gradient(right, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
  border-radius: 10px 30px 30px 10px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2) inset;
  content: "";
  display: block;
  height: 33px;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 21px;
  user-select: none;
}

.switch-check:checked + .switch-label span {
  left: 59px;
}

.switch-check:checked + .switch-label:before {
  background: -webkit-radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
  border: 1px solid #111;
  box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
  user-select: none;
}

.switch-check:checked + .switch-label:after {
  background: -webkit-radial-gradient(45%, circle, lightgreen  0%, lightgreen 100%);
  border: 1px solid #004562;
  box-shadow: 0 2px 5px green, 0 0 5px green inset;
  user-select: none;
}
</style>


================================================
FILE: Toggle-switches/JaydipPrajapati1910_splendid-panda-57.html
================================================
<div class="btn-container">
	<svg viewBox="0 0 16 16" class="bi bi-sun-fill" fill="currentColor" width="23" xmlns="http://www.w3.org/2000/svg">
  <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" color="red"></path>
</svg>
			<label class="switch btn-color-mode-switch">
		        <input value="1" id="color_mode" name="color_mode" type="checkbox">
		        <label class="btn-color-mode-switch-inner" data-off="Light" data-on="Dark" for="color_mode"></label>
		    </label>
        <svg viewBox="0 0 16 16" class="bi bi-moon-stars-fill" fill="currentColor" width="23" xmlns="http://www.w3.org/2000/svg">
  <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" color="orange"></path>
  <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z" color="black"></path>
</svg>
	</div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: switch, moon, sun, theme-switch, light&dark, sunset, switcher, toggle switch */
.btn-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.btn-container i {
  display: inline-block;
  position: relative;
  top: -9px;
}

label {
  font-size: 13px;
  color: #424242;
  font-weight: 500;
}

.btn-color-mode-switch {
  display: inline-block;
  margin: 0px;
  position: relative;
}

.btn-color-mode-switch > label.btn-color-mode-switch-inner {
  margin: 0px;
  width: 140px;
  height: 30px;
  background: #E0E0E0;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
    /*box-shadow: 0px 0px 8px 0px rgba(17, 17, 17, 0.34) inset;*/
  display: block;
}

.btn-color-mode-switch > label.btn-color-mode-switch-inner:before {
  content: attr(data-on);
  position: absolute;
  font-size: 12px;
  font-weight: 500;
  top: 7px;
  right: 20px;
}

.btn-color-mode-switch > label.btn-color-mode-switch-inner:after {
  content: attr(data-off);
  width: 70px;
  height: 16px;
  background: #fff;
  border-radius: 26px;
  position: absolute;
  left: 2px;
  top: 2px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0px 0px 6px -2px #111;
  padding: 5px 0px;
}

.btn-color-mode-switch > .alert {
  display: none;
  background: #FF9800;
  border: none;
  color: #fff;
}

.btn-color-mode-switch input[type="checkbox"] {
  cursor: pointer;
  width: 50px;
  height: 25px;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: 1;
  margin: 0px;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner {
  background: #151515;
  color: #fff;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after {
  content: attr(data-on);
  left: 68px;
  background: #3c3c3c;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before {
  content: attr(data-off);
  right: auto;
  left: 20px;
}

.btn-color-mode-switch input[type="checkbox"]:checked ~ .alert {
  display: block;
}

.dark-preview {
  background: #0d0d0d;
}

.white-preview {
  background: #fff;
}


</style>


================================================
FILE: Toggle-switches/JkHuger_curvy-liger-67.html
================================================
<div class="container">  
  <input class="label-check" id="label-check" type="checkbox">
    <label for="label-check" class="hamburger-label">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    <label></label></label></div>
<style>
/* From Uiverse.io by JkHuger - Tags: switch */
.label-check {
  display: none;
}

.hamburger-label {
  width: 70px;
  height: 58px;
  display: block;
  cursor: pointer;
}

.hamburger-label div {
  width: 70px;
  height: 6px;
  background-color: #fff;
  position: absolute;
}

.line1 {
  transition: all .3s;
}

.line2 {
  margin: 18px 0 0 0;
  transition: 0.3s;
}

.line3 {
  margin: 36px 0 0 0;
  transition: 0.3s;
}

#label-check:checked + .hamburger-label .line1 {
  transform: rotate(35deg) scaleX(.55) translate(39px, -4.5px);
  border-radius: 50px 50px 50px 0;
}

#label-check:checked + .hamburger-label .line3 {
  transform: rotate(-35deg) scaleX(.55) translate(39px, 4.5px);
  border-radius: 0 50px 50px 50px;
}

#label-check:checked + .hamburger-label .line2 {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  width: 45px;
}
</style>


================================================
FILE: Toggle-switches/JkHuger_itchy-turtle-45.html
================================================
<div class="wrapper">
<input type="checkbox" name="checkbox" class="switch">
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: switch, dark, theme, light, moon, sun, theme-switch */
.switch {
  position: relative;
  width: 130px;
  height: 50px;
  margin: 0px;
  appearance: none;
  -webkit-appearance: none;
  background-color: rgb(4,52,73);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 25px;
  transition: background-image .7s ease-in-out;
  outline: none;
  cursor: pointer;
  overflow: hidden;
}

.switch:checked {
  background-color: rgb(0, 195, 255);
  background-size: cover;
  transition: background-image 1s ease-in-out;
}

.switch:after {
  content: '';
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  left: 2px;
  top: 2px;
  transform: translateX(0px);
  animation: off .7s forwards cubic-bezier(.8, .5, .2, 1.4);
  box-shadow: inset 5px -5px 4px rgba(53, 53, 53, 0.3);
}

@keyframes off {
  0% {
    transform: translateX(80px);
    width: 46px;
  }

  50% {
    width: 75px;
    border-radius: 25px;
  }

  100% {
    transform: translateX(0px);
    width: 46px;
  }
}

.switch:checked:after {
  animation: on .7s forwards cubic-bezier(.8, .5, .2, 1.4);
  box-shadow: inset -5px -5px 4px rgba(53, 53, 53, 0.3);
}

@keyframes on {
  0% {
    transform: translateX(0px);
    width: 46px;
  }

  50% {
    width: 75px;
    border-radius: 25px;
  }

  100% {
    transform: translateX(80px);
    width: 46px;
  }
}

.switch:checked:before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  left: 15px;
  top: 5px;
  transform-origin: 53px 10px;
  background-color: transparent;
  box-shadow: 5px -1px 0px #fff;
  filter: blur(0px);
  animation: sun .7s forwards ease;
}

@keyframes sun {
  0% {
    transform: rotate(170deg);
    background-color: transparent;
    box-shadow: 5px -1px 0px #fff;
    filter: blur(0px);
  }

  50% {
    background-color: transparent;
    box-shadow: 5px -1px 0px #fff;
    filter: blur(0px);
  }

  90% {
    background-color: #f5daaa;
    box-shadow: 0px 0px 10px #f5deb4,
    0px 0px 20px #f5deb4,
    0px 0px 30px #f5deb4,
     inset 0px 0px 2px #efd3a3;
    filter: blur(1px);
  }

  100% {
    transform: rotate(0deg);
    background-color: #f5daaa;
    box-shadow: 0px 0px 10px #f5deb4,
    0px 0px 20px #f5deb4,
    0px 0px 30px #f5deb4,
     inset 0px 0px 2px #efd3a3;
    filter: blur(1px);
  }
}

.switch:before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  left: 15px;
  top: 5px;
  filter: blur(1px);
  background-color: #f5daaa;
  box-shadow: 0px 0px 10px #f5deb4,
0px 0px 20px #f5deb4,
0px 0px 30px #f5deb4,
 inset 0px 0px 2px #efd3a3;
  transform-origin: 53px 10px;
  animation: moon .7s forwards ease;
}

@keyframes moon {
  0% {
    transform: rotate(0deg);
    filter: blur(1px);
  }

  50% {
    filter: blur(1px);
  }

  90% {
    background-color: transparent;
    box-shadow: 5px -1px 0px #fff;
    filter: blur(0px);
  }

  100% {
    transform: rotate(170deg);
    background-color: transparent;
    box-shadow: 5px -1px 0px #fff;
    filter: blur(0px);
  }
}

</style>


================================================
FILE: Toggle-switches/JkHuger_old-falcon-20.html
================================================
<label for="theme" class="theme">
	<span class="theme__toggle-wrap">
		<input id="theme" class="theme__toggle" type="checkbox" role="switch" name="theme" value="dark">
		<span class="theme__fill"></span>
		<span class="theme__icon">
			<span class="theme__icon-part"></span>
			<span class="theme__icon-part"></span>
			<span class="theme__icon-part"></span>
			<span class="theme__icon-part"></span>
			<span class="theme__icon-part"></span>
			<span class="theme__icon-part"></span>
			<span class="theme__icon-part"></span>
			<span class="theme__icon-part"></span>
			<span class="theme__icon-part"></span>
		</span>
	</span>
</label>
<style>
/* From Uiverse.io by JkHuger - Tags: switch, dark, theme, light, theme-switch */
/* Default */
.theme {
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}

.theme__fill,
.theme__icon {
  transition: 0.3s;
}

.theme__fill {
  background-color: var(--bg);
  display: block;
  mix-blend-mode: difference;
  position: fixed;
  inset: 0;
  height: 100%;
  transform: translateX(-100%);
}

.theme__icon,
.theme__toggle {
  z-index: 1;
}

.theme__icon,
.theme__icon-part {
  position: absolute;
}

.theme__icon {
  display: block;
  top: 0.5em;
  left: 0.5em;
  width: 1.5em;
  height: 1.5em;
}

.theme__icon-part {
  border-radius: 50%;
  box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset;
  top: calc(50% - 0.5em);
  left: calc(50% - 0.5em);
  width: 1em;
  height: 1em;
  transition: box-shadow var(--transDur) ease-in-out,
		opacity var(--transDur) ease-in-out,
		transform var(--transDur) ease-in-out;
  transform: scale(0.5);
}

.theme__icon-part ~ .theme__icon-part {
  background-color: hsl(0,0%,100%);
  border-radius: 0.05em;
  top: 50%;
  left: calc(50% - 0.05em);
  transform: rotate(0deg) translateY(0.5em);
  transform-origin: 50% 0;
  width: 0.1em;
  height: 0.2em;
}

.theme__icon-part:nth-child(3) {
  transform: rotate(45deg) translateY(0.45em);
}

.theme__icon-part:nth-child(4) {
  transform: rotate(90deg) translateY(0.45em);
}

.theme__icon-part:nth-child(5) {
  transform: rotate(135deg) translateY(0.45em);
}

.theme__icon-part:nth-child(6) {
  transform: rotate(180deg) translateY(0.45em);
}

.theme__icon-part:nth-child(7) {
  transform: rotate(225deg) translateY(0.45em);
}

.theme__icon-part:nth-child(8) {
  transform: rotate(270deg) translateY(0.5em);
}

.theme__icon-part:nth-child(9) {
  transform: rotate(315deg) translateY(0.5em);
}

.theme__label,
.theme__toggle,
.theme__toggle-wrap {
  position: relative;
}

.theme__toggle,
.theme__toggle:before {
  display: block;
}

.theme__toggle {
  background-color: hsl(48,90%,85%);
  border-radius: 25% / 50%;
  box-shadow: 0 0 0 0.125em var(--primaryT);
  padding: 0.25em;
  width: 6em;
  height: 3em;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--transDur) ease-in-out,
		box-shadow 0.15s ease-in-out,
		transform var(--transDur) ease-in-out;
}

.theme__toggle:before {
  background-color: hsl(48,90%,55%);
  border-radius: 50%;
  content: "";
  width: 2.5em;
  height: 2.5em;
  transition: 0.3s;
}

.theme__toggle:focus {
  box-shadow: 0 0 0 0.125em var(--primary);
  outline: transparent;
}

/* Checked */
.theme__toggle:checked {
  background-color: hsl(198,90%,15%);
}

.theme__toggle:checked:before,
.theme__toggle:checked ~ .theme__icon {
  transform: translateX(3em);
}

.theme__toggle:checked:before {
  background-color: hsl(198,90%,55%);
}

.theme__toggle:checked ~ .theme__fill {
  transform: translateX(0);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(1) {
  box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset;
  transform: scale(1);
  top: 0.2em;
  left: -0.2em;
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part ~ .theme__icon-part {
  opacity: 0;
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(2) {
  transform: rotate(45deg) translateY(0.8em);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(3) {
  transform: rotate(90deg) translateY(0.8em);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(4) {
  transform: rotate(135deg) translateY(0.8em);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(5) {
  transform: rotate(180deg) translateY(0.8em);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(6) {
  transform: rotate(225deg) translateY(0.8em);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(7) {
  transform: rotate(270deg) translateY(0.8em);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(8) {
  transform: rotate(315deg) translateY(0.8em);
}

.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(9) {
  transform: rotate(360deg) translateY(0.8em);
}

.theme__toggle-wrap {
  margin: 0 0.75em;
}

@supports selector(:focus-visible) {
  .theme__toggle:focus {
    box-shadow: 0 0 0 0.125em var(--primaryT);
  }

  .theme__toggle:focus-visible {
    box-shadow: 0 0 0 0.125em var(--primary);
  }
}
</style>


================================================
FILE: Toggle-switches/JkHuger_selfish-mule-85.html
================================================
<input value="is_hot" name="temperature" type="checkbox" class="ch">

<style>
/* From Uiverse.io by JkHuger - Tags: switch */
.ch, .ch:before, .ch:after {
  transition: all 0.3s ease-in-out;
}

.ch {
  background-color: rgb(27,123,145);
  border-radius: 0.2em;
  box-shadow: 0 0.05em 0 0.05em rgba(0,0,0,0.3) inset;
  font-size: 20px;
  overflow: hidden;
  position: relative;
  width: 3em;
  height: 1.5em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  z-index: 0;
}

.ch:before, .ch:after {
  content: "";
  display: block;
  position: absolute;
}

.ch:before {
  background-color: currentColor;
  border-radius: 0.125em;
  box-shadow: 0 0 0 0.05em inset,
		-0.12em -0.12em 0 rgb(109,148,184) inset,
		-0.4em -0.3em 0 0.05em inset,
		0.12em 0.12em 0 rgb(255,255,255) inset;
  color: rgb(149,188,224);
  opacity: 0.9;
  bottom: 0;
  left: 0.125em;
  width: 1.25em;
  height: 1.25em;
  z-index: 2;
}

.ch:after {
  background-image: /* white */radial-gradient(0.2em 0.5em at 38% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),
		radial-gradient(0.3em 0.8em at 52% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),
		radial-gradient(0.25em 0.4em at 67% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),
		/* yellow */
		radial-gradient(0.25em 0.7em at 36% 95%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),
		radial-gradient(0.4em 1.2em at 52% 95%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),
		radial-gradient(0.25em 0.6em at 70% 93%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),
		/* orange */
		radial-gradient(0.3em 0.8em at 32% 81%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),
		radial-gradient(0.5em 1.6em at 52% 95%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),
		radial-gradient(0.3em 0.9em at 74% 86%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),
		/* red-orange */
		radial-gradient(0.4em 1em at 25% 70%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%),
		radial-gradient(0.7em 2.75em at 52% 100%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%),
		radial-gradient(0.4em 1.2em at 79% 75%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%);
  background-position: 100% 1.5em;
  background-size: 1.5em 1.5em;
  background-repeat: no-repeat;
  border-radius: 0 0 0 0.1em / 0 0 0 0;
  box-shadow: 0 0 0 0 rgb(169,208,244) inset;
  bottom: 0;
  left: 0;
  width: 1.5em;
  height: 1.5em;
  z-index: 1;
}
/* Checked */
.ch:checked {
  background-color: rgb(92,8,8);
}

.ch:checked:before {
  border-radius: 50%;
  transform: translate(1.5em,1.5em) rotate(45deg) scale(0.5);
}

.ch:checked:after {
  background-position: 100% 0;
  box-shadow: 0 -0.15em 0 0 rgb(169,208,244) inset;
  width: 3em;
}

/* Other States */
.ch:focus {
	/* Usually an anti-A11Y practice but set to remove an annoyance just for this demo */
  outline: 0;
}
</style>


================================================
FILE: Toggle-switches/JkHuger_short-lizard-27.html
================================================
<input id="toggle_checkbox" type="checkbox">
<label for="toggle_checkbox"></label>
<style>
/* From Uiverse.io by JkHuger - Tags: switch */
#toggle_checkbox {
  display: none;
}

label {
  position: absolute;
  top: 50%;
  right: 0px;
  left: 0;
  display: block;
  width: 70px;
  height: 35px;
  margin: 0 auto;
  transform: translateY(-50%);
  cursor: pointer;
}

label:before {
  top: 4px;
  left: 4px;
  width: 27px;
  height: 27px;
  border: 2px solid red;
}

label:after {
  top: 0;
  right: 0;
  width: 70px;
  height: 35px;
  border: 2px solid #143240;
}

label:before,
label:after {
  content: "";
  position: absolute;
  border-radius: 50px;
  box-sizing: border-box;
  transition: 0.5s ease top, 0.5s ease left, 0.5s ease right, 0.5s ease width,
    0.5s ease height, 0.5s ease border-color;
}

#toggle_checkbox:checked + label:before {
  top: 0;
  left: 0;
  width: 70px;
  height: 35px;
  border-color: #143240;
  border: 2px solid #143240
}

#toggle_checkbox:checked + label:after {
  top: 4px;
  right: 4px;
  width: 27px;
  height: 27px;
  border-color: red;
  border: 2px solid red;
}

</style>


================================================
FILE: Toggle-switches/JkHuger_smooth-frog-53.html
================================================
<label>
  <input class="toggle-checkbox" type="checkbox">
  <div class="toggle-slot">
    <div class="sun-icon-wrapper">
      <div class="iconify sun-icon" data-icon="feather-sun" data-inline="false"></div>
    </div>
    <div class="toggle-button"></div>
    <div class="moon-icon-wrapper">
      <div class="iconify moon-icon" data-icon="feather-moon" data-inline="false"></div>
    </div>
  </div>
</label>

<style>
/* From Uiverse.io by JkHuger - Tags: switch */
.toggle-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.toggle-slot {
  font-size: 10px;
  position: relative;
  height: 3.5em;
  width: 7em;
  border: 0px solid transparent;
  border-radius: 10em;
  background-color: white;
  transition: background-color 250ms;
}

.toggle-checkbox:checked ~ .toggle-slot {
  background-color: #374151;
}

.toggle-button {
  transform: translate(0.3em, 0.25em);
  position: absolute;
  height: 3em;
  width: 3em;
  border-radius: 50%;
  background-color: #ffeccf;
  box-shadow: inset 0px 0px 0px 0.75em #ffbb52;
  transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}

.toggle-checkbox:checked ~ .toggle-slot .toggle-button {
  background-color: #485367;
  box-shadow: inset 0px 0px 0px 0.75em white;
  transform: translate(3.65em, 0.25em);
}

.sun-icon {
  position: absolute;
  height: 6em;
  width: 6em;
  color: #ffbb52;
}

.sun-icon-wrapper {
  position: absolute;
  height: 6em;
  width: 6em;
  opacity: 1;
  transform: translate(2em, 2em) rotate(15deg);
  transform-origin: 50% 50%;
  transition: opacity 150ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}

.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
  opacity: 0;
  transform: translate(3em, 2em) rotate(0deg);
}

.moon-icon {
  position: absolute;
  height: 6em;
  width: 6em;
  color: white;
}

.moon-icon-wrapper {
  position: absolute;
  height: 6em;
  width: 6em;
  opacity: 0;
  transform: translate(11em, 2em) rotate(0deg);
  transform-origin: 50% 50%;
  transition: opacity 150ms, transform 500ms cubic-bezier(.26,2.5,.46,.71);
}

.toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
  opacity: 1;
  transform: translate(2em, 2em) rotate(-15deg);
}
</style>


================================================
FILE: Toggle-switches/JkHuger_warm-panther-53.html
================================================
<input type="checkbox" class="l">
<style>
/* From Uiverse.io by JkHuger - Tags: switch */
.l {
  display: block;
  margin-bottom: 1.5em;
  font-size: 1em;
}

.l {
  background-color: rgba(0,0,0,0.7);
  border-radius: 0.75em;
  box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.3) inset;
  color: #fdea7b;
  display: inline-flex;
  align-items: center;
  margin: auto;
  padding: 0.15em;
  width: 3em;
  height: 1.5em;
  transition: background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.l:before, .l:after {
  content: "";
  display: block;
}

.l:before {
  background-color: #d7d7d7;
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  transition: background-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
  z-index: 1;
}

.l:after {
  background: linear-gradient(transparent 50%, rgba(0,0,0,0.15) 0) 0 50% / 50% 100%,
		repeating-linear-gradient(90deg,#bbb 0,#bbb,#bbb 20%,#999 20%,#999 40%) 0 50% / 50% 100%,
		radial-gradient(circle at 50% 50%,#888 25%, transparent 26%);
  background-repeat: no-repeat;
  border: 0.25em solid transparent;
  border-left: 0.4em solid #d8d8d8;
  border-right: 0 solid transparent;
  transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
  transform: translateX(-22.5%);
  transform-origin: 25% 50%;
  width: 1.2em;
  height: 1em;
  box-sizing: border-box;
}
/* Checked */
.l:checked {
  background-color: rgba(0,0,0,0.45);
  box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.1) inset;
}

.l:checked:before {
  background-color: currentColor;
  transform: translateX(125%)
}

.l:checked:after {
  border-left-color: currentColor;
  transform: translateX(-2.5%) rotateY(180deg);
}
/* Other States */
.l:focus {
	/* Usually an anti-A11Y practice but set to remove an annoyance just for this demo */
  outline: 0;
}
</style>


================================================
FILE: Toggle-switches/JulioCodesSM_pretty-dingo-70.html
================================================
<label for="toggle" class="button">
  <input type="checkbox" id="toggle">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by JulioCodesSM - Tags: switch */
.button {
  display: inline-block;
  width: 50px;
  height: 20px;
  background-color: #fff;
  border-radius: 30px;
  cursor: pointer;
  padding: 0;
  color: white;
}

#toggle {
  display: none;
}

.slider {
  display: block;
  font-size: 10px;
  position: relative;
}

.slider::after {
  content: 'OFF';
  width: 25px;
  height: 25px;
  background-color: #e03c3c;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, .25);
  position: absolute;
  top: -5px;
  left: 0;
  display: grid;
  place-content: center;
  line-height: 0;
  transition: background-color .25s, transform .25s ease-in;
}

#toggle:checked + .slider::after {
  content: 'ON';
  background-color: #05ae3e;
  transform: translateX(25px) rotate(360deg);
}
</style>


================================================
FILE: Toggle-switches/KINGFRESS_gentle-chicken-96.html
================================================
<label class="switch">
    <input type="checkbox">
    <span class="slider">
        <span class="circle"></span>
    </span>
</label>
<style>
/* From Uiverse.io by KINGFRESS - Tags: switch */
/* Dark Mode Only ;) */

/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: .5em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #5B5B5B;
  transition: .4s;
  border-radius: 30px;
  display: flex;
  align-items: center;
}

.slider .circle {
  background-color: #212121;
  height: 3em;
  width: 3em;
  border-radius: 50%;
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  transition: .4s;
}

.slider .circle::before {
  position: absolute;
  content: "";
  height: 2.3em;
  width: 2.3em;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(182, 182, 182);
  transition: .4s;
}

.slider .circle::after {
  content: '';
  background-color: #212121;
  height: 1.7em;
  width: 1.7em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: .4s;
}

input:checked + .slider .circle {
  transform: translateX(2em);
  transition: .4s;
}

input:checked + .slider .circle::before {
  background-color: #e1e1e1;
  transition: .4s;
}

input:checked + .slider .circle::after {
  width: 0;
  height: 0;
  transition: .4s;
}
</style>


================================================
FILE: Toggle-switches/KareemTolan_tasty-snail-21.html
================================================
<label class="toggle-switch">
  <input type="checkbox">
  <span class="toggle-switch__slider"></span>
</label>
<style>
/* From Uiverse.io by KareemTolan - Tags: switch */
/* Toggle switch styles */
.toggle-switch {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 34px;
}

.toggle-switch input {
  display: none;
}

.toggle-switch__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: background-color 0.2s ease-in-out;
}

.toggle-switch__slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease-in-out;
}

.toggle-switch input:checked + .toggle-switch__slider {
  background-color: #2196f3;
  /* Neon effect */
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #2196f3, 0 0 40px #2196f3, 0 0 50px #2196f3, 0 0 60px #2196f3, 0 0 70px #2196f3;
}

.toggle-switch input:checked + .toggle-switch__slider:before {
  transform: translateX(26px);
}

/* Shake animation */
.toggle-switch input:checked + .toggle-switch__slider:before:hover {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-5px);
  }

  100% {
    transform: translateX(0);
  }
}

/* Accessibility styles */
.toggle-switch input:focus + .toggle-switch__slider {
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.5);
}

.toggle-switch input:focus:not(:checked) + .toggle-switch__slider:before,
.toggle-switch input:focus:checked + .toggle-switch__slider:before {
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.5);
}

.toggle-switch input:not(:checked):disabled + .toggle-switch__slider,
.toggle-switch input:checked:disabled + .toggle-switch__slider {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>


================================================
FILE: Toggle-switches/KshitijAdhikaree_spotty-insect-89.html
================================================
<label class="switch-container">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by KshitijAdhikaree - Tags: switch, moon, sun, toggle switch */
/* The switch - the box around the slider */
.switch-container {
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch-container input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.switch-container .slider {
  --background: linear-gradient(to right, #090613ef, #18151f);
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--background);
  transition: background-color 0.5s;
  border-radius: 30px;
}

.switch-container .slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 50%;
  left: 10%;
  bottom: 15%;
  box-shadow: inset 15px -4px 0px 15px #f8ea27;
  background: var(--background);
  transition: transform 0.5s, box-shadow 0.5s;
}

.switch-container input:checked + .slider {
  background-color: #000;
}

.switch-container input:checked + .slider:before {
  transform: translateX(100%);
  box-shadow: inset 8px -4px 0px 0px #f8f8f4;
}

</style>


================================================
FILE: Toggle-switches/Lmickk2_selfish-cougar-98.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Lmickk2 - Tags: switch, light, toggle */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 4.5em;
  height: 2em;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 1px 2px 5px 1px rgba(0, 0, 0, 0.329);
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: rgb(255, 255, 255);
  transition: .4s;
}

.switch input:checked + .slider {
  background-color: #59c76b;
}

.switch input:focus + .slider {
  box-shadow: inset 3px 2px 4px rgba(22, 22, 22, 0.253);
}

.switch input:checked + .slider:before {
  transform: translateX(2.5em);
}
</style>


================================================
FILE: Toggle-switches/MRez321_strong-skunk-73.html
================================================
<div class="theme-switch">
  <input type="checkbox" id="theme-checkbox" />
  <label for="theme-checkbox">
    <div></div>
    <span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="w-6 h-6"
      >
        <path
          fill-rule="evenodd"
          d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </span>
    <span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="w-6 h-6"
      >
        <path
          d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
        ></path>
      </svg>
    </span>
  </label>
</div>

<style>
/* From Uiverse.io by MRez321  - Tags: button, switch, checkbox, theme-switch, toggle switch */
.theme-switch {
  position: relative;
  display: flex;
  justify-content: center;
  direction: rtl;
}

#theme-checkbox {
  display: none;
}

#theme-checkbox + label {
  /* change the font-size below to change the size of the switch button*/
  font-size: 2rem;
  height: 1em;
  width: 2.5em;
  border-radius: 0.25em;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  background-color: #cecece;
  position: relative;
}

#theme-checkbox:checked + label {
  background-color: #3a3a3a;
}

#theme-checkbox + label:active {
  transform: scale(0.85);
  transition: transform 0.2s;
}

#theme-checkbox + label div {
  width: 0.8em;
  height: 0.8em;
  border-radius: inherit;
  position: absolute;
  top: 0.1em;
  left: 0.1em;
  z-index: 10;
  transition: 0.5s cubic-bezier(1, 0.33, 0.11, 1.34);
  background-color: #f2f2f2;
}

#theme-checkbox:checked + label div {
  /* left: calc(2.5em - .8em - .1em); */
  left: 1.6em;
  background-color: #212121;
}

#theme-checkbox + label span {
  display: flex;
}

#theme-checkbox + label svg {
  display: inline-block;
  height: 1em;
  width: 1em;
  padding: 0.15em;
  box-sizing: border-box;
}

#theme-checkbox + label span:first-of-type {
  color: #3a3a3a;
}

#theme-checkbox + label span:last-of-type {
  color: #cecece;
}

</style>
    

================================================
FILE: Toggle-switches/Madflows_fresh-fireant-15.html
================================================
<div class="toggle-switch">
  <label class="switch-label">
    <input type="checkbox" class="checkbox">
    <span class="slider"></span>
  </label>
</div>  
<style>
/* From Uiverse.io by Madflows - Tags: switch */
.toggle-switch {
  position: relative;
  width: 100px;
  height: 50px;
  --light: #d8dbe0;
  --dark: #28292c;
  --link: rgb(27, 129, 112);
  --link-hover: rgb(24, 94, 82);
}

.switch-label {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: var(--dark);
  border-radius: 25px;
  cursor: pointer;
  border: 3px solid var(--dark);
}

.checkbox {
  position: absolute;
  display: none;
}

.slider {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.checkbox:checked ~ .slider {
  background-color: var(--light);
}

.slider::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  -webkit-box-shadow: inset 12px -4px 0px 0px var(--light);
  box-shadow: inset 12px -4px 0px 0px var(--light);
  background-color: var(--dark);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.checkbox:checked ~ .slider::before {
  -webkit-transform: translateX(50px);
  -ms-transform: translateX(50px);
  transform: translateX(50px);
  background-color: var(--dark);
  -webkit-box-shadow: none;
  box-shadow: none;
}

</style>


================================================
FILE: Toggle-switches/MetaBlue2000_curly-firefox-62.html
================================================
<label class="switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by MetaBlue2000  - Tags: red, green, minimalist, switch, click animation */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 01em;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff6a59;
  transition: 0.4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "✕";
  display: grid;
  text-align: center;
  vertical-align: middle;
  place-items: center;
  font-size: 1em;
  font-weight: 900;
  width: 2em;
  aspect-ratio: 1;
  border-radius: 50%;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  color: white;
  background-color: #ff3c00;
  border: 1px solid #ba0300;
  transition: 0.4s;
}

.switch input:checked + .slider {
  background-color: teal;
}

.switch input:checked + .slider:before {
  content: "\002713";
  color: teal;
  background: paleturquoise;
  border: 1px solid rgba(0, 128, 128, 0.514);
  transform: translate(1.75em, -50%) rotateZ(360deg);
}

</style>
    

================================================
FILE: Toggle-switches/Mohammad-Rahme-576_weak-deer-13.html
================================================
<label aria-checked="false" role="switch" class="switch">
  <input type="checkbox" />
  <span class="slider">
    <span class="slider-inner"></span>
  </span>
</label>

<style>
/* From Uiverse.io by Mohammad-Rahme-576  - Tags: switch */
/* Base Styles */
.switch {
  display: inline-block;
  width: 6em;
  height: 3em;
  position: relative;
  font-size: 18px;
  user-select: none;
  margin: 20px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* Slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #87ceeb, #e0f6ff);
  border-radius: 50px;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 -5px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Inner slider for additional styling */
.slider-inner {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  height: 2.4em;
  width: 2.4em;
  border-radius: 50%;
  background-color: #ffd700;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}

/* Checked state */
.switch input:checked + .slider {
  background: linear-gradient(to right, #1a237e, #3949ab);
}

.switch input:checked + .slider .slider-inner {
  transform: translateX(3em);
  background-color: #ffffff;
}

/* Focus state */
.switch input:focus + .slider {
  outline: none;
  box-shadow: 0 0 0.4em rgba(25, 118, 210, 0.5);
}

/* Hover and active states */
.switch:hover .slider {
  background: linear-gradient(to right, #64b5f6, #e3f2fd);
}

.switch input:checked:hover + .slider {
  background: linear-gradient(to right, #283593, #5c6bc0);
}

/* Animation for slider inner */
@keyframes sunPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(255, 215, 0, 0.7),
      0 0 0 0 rgba(255, 215, 0, 0.4);
  }
  50% {
    box-shadow:
      0 0 20px 10px rgba(255, 215, 0, 0.7),
      0 0 40px 20px rgba(255, 215, 0, 0.4);
  }
}

@keyframes moonPhase {
  0%,
  100% {
    box-shadow:
      inset -10px -5px 0 0 #ddd,
      0 0 20px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow:
      inset 0 0 0 0 #ddd,
      0 0 20px rgba(255, 255, 255, 0.5);
  }
}

.switch input:not(:checked) + .slider .slider-inner {
  animation: sunPulse 3s infinite;
}

.switch input:checked + .slider .slider-inner {
  animation: moonPhase 5s infinite;
}

/* Stars effect */
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

.slider::before,
.slider::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: all 0.6s ease;
  opacity: 0;
}

.slider::before {
  top: 20%;
  left: 30%;
}

.slider::after {
  bottom: 25%;
  right: 25%;
}

.switch input:checked + .slider::before,
.switch input:checked + .slider::after {
  opacity: 1;
  animation: twinkle 2s infinite;
}

.switch input:checked + .slider::before {
  animation-delay: 0.5s;
}

/* 3D effect */
.slider {
  transform-style: preserve-3d;
  perspective: 500px;
}

.slider-inner {
  transform: translateZ(5px);
}

.switch input:checked + .slider .slider-inner {
  transform: translateX(3em) translateZ(5px) rotateY(180deg);
}

/* Cloud effect for day mode */
.slider-inner::before,
.slider-inner::after {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transition: all 0.6s ease;
}

.slider-inner::before {
  width: 1em;
  height: 1em;
  top: -0.5em;
  left: -0.2em;
}

.slider-inner::after {
  width: 1.2em;
  height: 1.2em;
  bottom: -0.6em;
  right: -0.3em;
}

.switch input:checked + .slider .slider-inner::before,
.switch input:checked + .slider .slider-inner::after {
  opacity: 0;
}

/* Crater effect for night mode */
.switch input:checked + .slider .slider-inner::before {
  width: 0.6em;
  height: 0.6em;
  background-color: rgba(0, 0, 0, 0.2);
  top: 0.3em;
  left: 0.3em;
  opacity: 1;
}

.switch input:checked + .slider .slider-inner::after {
  width: 0.4em;
  height: 0.4em;
  background-color: rgba(0, 0, 0, 0.15);
  bottom: 0.5em;
  right: 0.5em;
  opacity: 1;
}

/* Accessibility improvements */
.switch input:focus + .slider {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .switch {
    width: 5em;
    height: 2.5em;
  }

  .slider-inner {
    height: 2em;
    width: 2em;
  }

  .switch input:checked + .slider .slider-inner {
    transform: translateX(2.5em) translateZ(5px) rotateY(180deg);
  }
}

@media (max-width: 480px) {
  .switch {
    width: 4em;
    height: 2em;
  }

  .slider-inner {
    height: 1.6em;
    width: 1.6em;
  }

  .switch input:checked + .slider .slider-inner {
    transform: translateX(2em) translateZ(5px) rotateY(180deg);
  }
}

/* High contrast mode */
@media (forced-colors: active) {
  .slider {
    background: Canvas;
    border: 2px solid ButtonText;
  }

  .switch input:checked + .slider {
    background: Highlight;
  }

  .slider-inner {
    background-color: ButtonFace;
  }

  .switch::before,
  .switch::after {
    color: ButtonText;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .switch,
  .slider,
  .slider-inner {
    transition: none;
  }

  .switch input:checked + .slider .slider-inner,
  .switch input:not(:checked) + .slider .slider-inner,
  .switch input:checked + .slider::before,
  .switch input:checked + .slider::after {
    animation: none;
  }
}

</style>
    

================================================
FILE: Toggle-switches/Mohsinech_good-duck-38.html
================================================
  <div class="container">
    <div class="toggle">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
<style>
/* From Uiverse.io by Mohsinech - Tags: simple, blue, switch, menu, burger */
.toggle {
  position: relative;
  width: 70px;
  height: 70px;
  background-color: rgb(1, 103, 255);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
}

.toggle span {
  position: absolute;
  height: 2px;
  width: 40px;
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  cursor: pointer;
  transition: 0.5s;
}

.toggle span:nth-child(1) {
  transform: translateY(-15px);
  width: 25px;
  left: 15px;
}

.toggle.toggle:hover span:nth-child(1) {
  width: 40px;
  transform: translateY(0px) rotate(45deg);
  transition-delay: 0.125s;
}

.toggle span:nth-child(2) {
  transform: translateY(15px);
  width: 15px;
  left: 15px;
}

.toggle.toggle:hover span:nth-child(2) {
  width: 40px;
  transform: translateY(0px) rotate(315deg);
  transition-delay: 0.125s;
}

.toggle:hover span:nth-child(3) {
  transform: translateX(60px);
}

</style>


================================================
FILE: Toggle-switches/Muaz-Aldalil_tasty-fish-22.html
================================================
<label>
  <input type="checkbox" class="toggle-checkbox">
  <div class="toggle-switch"></div>
</label>
<style>
/* From Uiverse.io by Muaz-Aldalil - Tags: switch, radio-buttons, toggle switch */
.toggle-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
}

.toggle-switch {
  background-color: gray;
  width: 78px;
  height: 32px;
  border-radius: 16px;
  position: relative;
  transition: 0.3s;
  cursor: pointer;
}

.toggle-switch::before {
  content: "";
  font-weight: 900;
  background-color: white;
  width: 24px;
  height: 24px;
  position: absolute;
  border-radius: 50%;
  top: 4px;
  left: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ddd;
  transition: 0.3s;
}

.toggle-checkbox:checked+.toggle-switch {
  background-color: #0075ff;
}

.toggle-checkbox:checked+.toggle-switch::before {
  content: "";
  left: 50px;
  color: #0075ff;
}
</style>


================================================
FILE: Toggle-switches/MuhammadHasann_nasty-moth-15.html
================================================
<div class="toggle-cont">
  <input class="toggle-input" id="toggle" name="toggle" type="checkbox" />
  <label class="toggle-label" for="toggle">
    <div class="cont-icon">
      <span
        style="--width: 2; --deg: 25; --duration: 11"
        class="sparkle"
      ></span>
      <span
        style="--width: 1; --deg: 100; --duration: 18"
        class="sparkle"
      ></span>
      <span
        style="--width: 1; --deg: 280; --duration: 5"
        class="sparkle"
      ></span>
      <span
        style="--width: 2; --deg: 200; --duration: 3"
        class="sparkle"
      ></span>
      <span
        style="--width: 2; --deg: 30; --duration: 20"
        class="sparkle"
      ></span>
      <span
        style="--width: 2; --deg: 300; --duration: 9"
        class="sparkle"
      ></span>
      <span
        style="--width: 1; --deg: 250; --duration: 4"
        class="sparkle"
      ></span>
      <span
        style="--width: 2; --deg: 210; --duration: 8"
        class="sparkle"
      ></span>
      <span
        style="--width: 2; --deg: 100; --duration: 9"
        class="sparkle"
      ></span>
      <span
        style="--width: 1; --deg: 15; --duration: 13"
        class="sparkle"
      ></span>
      <span
        style="--width: 1; --deg: 75; --duration: 18"
        class="sparkle"
      ></span>
      <span style="--width: 2; --deg: 65; --duration: 6" class="sparkle"></span>
      <span style="--width: 2; --deg: 50; --duration: 7" class="sparkle"></span>
      <span
        style="--width: 1; --deg: 320; --duration: 5"
        class="sparkle"
      ></span>
      <span
        style="--width: 1; --deg: 220; --duration: 5"
        class="sparkle"
      ></span>
      <span
        style="--width: 1; --deg: 215; --duration: 2"
        class="sparkle"
      ></span>
      <span
        style="--width: 2; --deg: 135; --duration: 9"
        class="sparkle"
      ></span>
      <span style="--width: 2; --deg: 45; --duration: 4" class="sparkle"></span>
      <span
        style="--width: 1; --deg: 78; --duration: 16"
        class="sparkle"
      ></span>
      <span
        style="--width: 1; --deg: 89; --duration: 19"
        class="sparkle"
      ></span>
      <span
        style="--width: 2; --deg: 65; --duration: 14"
        class="sparkle"
      ></span>
      <span style="--width: 2; --deg: 97; --duration: 1" class="sparkle"></span>
      <span
        style="--width: 1; --deg: 174; --duration: 10"
        class="sparkle"
      ></span>
      <span
        style="--width: 1; --deg: 236; --duration: 5"
        class="sparkle"
      ></span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 30 30"
        class="icon"
      >
        <path
          d="M0.96233 28.61C1.36043 29.0081 1.96007 29.1255 2.47555 28.8971L10.4256 25.3552C13.2236 24.11 16.4254 24.1425 19.2107 25.4401L27.4152 29.2747C27.476 29.3044 27.5418 29.3023 27.6047 29.32C27.6563 29.3348 27.7079 29.3497 27.761 29.3574C27.843 29.3687 27.9194 29.3758 28 29.3688C28.1273 29.3617 28.2531 29.3405 28.3726 29.2945C28.4447 29.262 28.5162 29.2287 28.5749 29.1842C28.6399 29.1446 28.6993 29.0994 28.7509 29.0477L28.9008 28.8582C28.9468 28.7995 28.9793 28.7274 29.0112 28.656C29.0599 28.5322 29.0811 28.4036 29.0882 28.2734C29.0939 28.1957 29.0868 28.1207 29.0769 28.0415C29.0705 27.9955 29.0585 27.9524 29.0472 27.9072C29.0295 27.8343 29.0302 27.7601 28.9984 27.6901L25.1638 19.4855C23.8592 16.7073 23.8273 13.5048 25.0726 10.7068L28.6145 2.75679C28.8429 2.24131 28.7318 1.63531 28.3337 1.2372C27.9165 0.820011 27.271 0.721743 26.7491 0.9961L19.8357 4.59596C16.8418 6.15442 13.2879 6.18696 10.2615 4.70062L1.80308 0.520214C1.7055 0.474959 1.60722 0.441742 1.50964 0.421943C1.44459 0.409215 1.37882 0.395769 1.3074 0.402133C1.14406 0.395769 0.981436 0.428275 0.818095 0.499692C0.77284 0.519491 0.719805 0.545671 0.67455 0.578198C0.596061 0.617088 0.524653 0.675786 0.4596 0.74084C0.394546 0.805894 0.335843 0.877306 0.296245 0.956502C0.263718 1.00176 0.237561 1.05477 0.217762 1.10003C0.152708 1.24286 0.126545 1.40058 0.120181 1.54978C0.120181 1.61483 0.126527 1.6735 0.132891 1.73219C0.15269 1.85664 0.178881 1.97332 0.237571 2.08434L4.41798 10.5427C5.91139 13.5621 5.8725 17.1238 4.3204 20.1099L0.720514 27.0233C0.440499 27.5536 0.545137 28.1928 0.96233 28.61Z"
        ></path>
      </svg>
    </div>
  </label>
</div>

<style>
/* From Uiverse.io by MuhammadHasann  - Tags: animation, minimalist, switch */
.toggle-cont {
  --primary: #54a8fc;
  --light: #d9d9d9;
  --dark: #121212;
  --gray: #414344;

  position: relative;
  z-index: 10;

  width: fit-content;
  height: 50px;

  border-radius: 9999px;
}

.toggle-cont .toggle-input {
  display: none;
}

.toggle-cont .toggle-label {
  --gap: 5px;
  --width: 50px;

  cursor: pointer;

  position: relative;
  display: inline-block;

  padding: 0.5rem;
  width: calc((var(--width) + var(--gap)) * 2);
  height: 100%;
  background-color: var(--dark);

  border: 1px solid #777777;
  border-bottom: 0;

  border-radius: 9999px;
  box-sizing: content-box;
  transition: all 0.3s ease-in-out;
}
.toggle-label::before {
  content: "";

  position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: calc(100% + 1.5rem);
  height: calc(100% + 1.5rem);
  background-color: var(--gray);

  border: 1px solid #777777;
  border-bottom: 0;
  border-radius: 9999px;

  transition: all 0.3s ease-in-out;
}
.toggle-label::after {
  content: "";

  position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    circle at 50% -100%,
    rgb(58, 155, 252) 0%,
    rgba(12, 12, 12, 1) 80%
  );

  border-radius: 9999px;
}

.toggle-cont .toggle-label .cont-icon {
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
  width: var(--width);
  height: 50px;
  background-image: radial-gradient(
    circle at 50% 0%,
    #666666 0%,
    var(--gray) 100%
  );

  border: 1px solid #aaaaaa;
  border-bottom: 0;
  border-radius: 9999px;
  box-shadow: inset 0 -0.15rem 0.15rem var(--primary),
    inset 0 0 0.5rem 0.75rem var(--second);

  transition: transform 0.3s ease-in-out;
}

.cont-icon {
  overflow: clip;
  position: relative;
}

.cont-icon .sparkle {
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;

  width: calc(var(--width) * 1px);
  aspect-ratio: 1;
  background-color: var(--light);

  border-radius: 50%;
  transform-origin: 50% 50%;
  rotate: calc(1deg * var(--deg));
  transform: translate(-50%, -50%);
  animation: sparkle calc(100s / var(--duration)) linear
    calc(0s / var(--duration)) infinite;
}

@keyframes sparkle {
  to {
    width: calc(var(--width) * 0.5px);
    transform: translate(2000%, -50%);
  }
}

.cont-icon .icon {
  width: 1.1rem;
  fill: var(--light);
}

.toggle-cont:has(.toggle-input:checked) {
  --checked: true;
}

@container style(--checked: true) {
  .toggle-cont .toggle-label {
    background-color: #41434400;

    border: 1px solid #3d6970;
    border-bottom: 0;
  }

  .toggle-cont .toggle-label::before {
    box-shadow: 0 1rem 2.5rem -2rem #0080ff;
  }

  .toggle-cont .toggle-label .cont-icon {
    overflow: visible;

    background-image: radial-gradient(
      circle at 50% 0%,
      #045ab1 0%,
      var(--primary) 100%
    );

    border: 1px solid var(--primary);
    border-bottom: 0;

    transform: translateX(calc((var(--gap) * 2) + 100%)) rotate(-225deg);
  }

  .toggle-cont .toggle-label .cont-icon .sparkle {
    z-index: -10;

    width: calc(var(--width) * 1.5px);
    background-color: #acacac;

    animation: sparkle calc(100s / var(--duration)) linear
      calc(10s / var(--duration)) infinite;
  }

  @keyframes sparkle {
    to {
      width: calc(var(--width) * 1px);
      transform: translate(5000%, -50%);
    }
  }
}

</style>
    

================================================
FILE: Toggle-switches/MuhammadHasann_popular-seahorse-73.html
================================================
<div class="toggle-cont">
  <input class="toggle-input" id="toggle" name="toggle" type="checkbox" />
  <label class="toggle-label" for="toggle">
    <div class="cont-label-play">
      <span class="label-play"></span>
    </div>
  </label>
</div>

<style>
/* From Uiverse.io by MuhammadHasann  - Tags: neumorphism, switch, checkbox, smooth, on, off, toggle */
.toggle-cont {
  width: 100px;
  height: 50px;
  border-radius: 9999px;
}

.toggle-cont .toggle-input {
  display: none;
}

.toggle-cont .toggle-label {
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 6px;
  width: 100%;
  height: 100%;
  background: #272727;
  border-radius: 9999px;
  box-sizing: content-box;
  box-shadow: 0px 0px 16px -8px #fefefe;
}

.toggle-cont .toggle-label .cont-label-play {
  position: relative;
  width: 50px;
  aspect-ratio: 1 / 1;
  background: #5e5e5e;
  border-radius: 9999px;
  transition: all 0.5s cubic-bezier(1, 0, 0, 1);
}

.toggle-cont .toggle-input:checked + .toggle-label .cont-label-play {
  background: #f43f5e;
  transform: translateX(50px);
}

.toggle-cont .toggle-label .label-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 24px;
  aspect-ratio: 1 / 1;
  background: #fefefe;
  border-radius: 4px;
  clip-path: polygon(25% 0, 75% 50%, 25% 100%, 25% 51%);
  transition: all 0.5s cubic-bezier(1, 0, 0, 1);
}

.toggle-cont .toggle-input:checked + .toggle-label .label-play {
  width: 20px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

</style>
    

================================================
FILE: Toggle-switches/Na3ar-17_evil-dragon-24.html
================================================
<div class="container">
  <label class="label">
    <input class="input" type="checkbox" />
    <span class="circle"
      ><svg
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        class="icon"
      >
        <path
          d="M12 19V5m0 14-4-4m4 4 4-4"
          stroke-width="1.5"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke="currentColor"
        ></path>
      </svg>
      <div class="square"></div>
    </span>
    <p class="title">Download</p>
    <p class="title">Open</p>
  </label>
</div>

<style>
/* From Uiverse.io by Na3ar-17  - Tags: action, switch, download */
.container {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label {
  background-color: transparent;
  border: 2px solid rgb(91, 91, 240);
  display: flex;
  align-items: center;
  border-radius: 50px;
  width: 150px;
  cursor: pointer;
  transition: all 0.4s ease;
  padding: 5px;
  position: relative;
}

.label::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  width: 8px;
  height: 8px;
  transition: all 0.4s ease;
  border-radius: 100%;
  margin: auto;
  opacity: 0;
  visibility: hidden;
}

.label .input {
  display: none;
}

.label .title {
  font-size: 17px;
  color: #fff;
  transition: all 0.4s ease;
  position: absolute;
  right: 15px;
  bottom: 14px;
  text-align: center;
}

.label .title:last-child {
  opacity: 0;
  visibility: hidden;
}

.label .circle {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  background-color: rgb(91, 91, 240);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease;
  position: relative;
  box-shadow: 0 0 0 0 rgb(255, 255, 255);
  overflow: hidden;
}

.label .circle .icon {
  color: #fff;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}

.label .circle .square {
  aspect-ratio: 1;
  width: 15px;
  border-radius: 2px;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}

.label .circle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-color: #3333a8;
  width: 100%;
  height: 0;
  transition: all 0.4s ease;
}

.label:has(.input:checked) {
  width: 57px;
  animation: installed 0.4s ease 3.5s forwards;
}

.label:has(.input:checked)::before {
  animation: rotate 3s ease-in-out 0.4s forwards;
}

.label .input:checked + .circle {
  animation: pulse 1s forwards, circleDelete 0.2s ease 3.5s forwards;
  rotate: 180deg;
}

.label .input:checked + .circle::before {
  animation: installing 3s ease-in-out forwards;
}

.label .input:checked + .circle .icon {
  opacity: 0;
  visibility: hidden;
}

.label .input:checked ~ .circle .square {
  opacity: 1;
  visibility: visible;
}

.label .input:checked ~ .title {
  opacity: 0;
  visibility: hidden;
}

.label .input:checked ~ .title:last-child {
  animation: showInstalledMessage 0.4s ease 3.5s forwards;
}

@keyframes pulse {
  0% {
    scale: 0.95;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    scale: 1;
    box-shadow: 0 0 0 16px rgba(255, 255, 255, 0);
  }
  100% {
    scale: 0.95;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes installing {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(-90deg) translate(27px) rotate(0);
    opacity: 1;
    visibility: visible;
  }
  99% {
    transform: rotate(270deg) translate(27px) rotate(270deg);
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes installed {
  100% {
    width: 150px;
    border-color: rgb(35, 174, 35);
  }
}

@keyframes circleDelete {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes showInstalledMessage {
  100% {
    opacity: 1;
    visibility: visible;
    right: 56px;
  }
}

</style>
    

================================================
FILE: Toggle-switches/Na3ar-17_fast-fireant-25.html
================================================
<label class="switch">
  <input type="checkbox" />
  <span class="slider">
    <span class="yolk"> </span>
    <span class="back"> </span>
  </span>
</label>

<style>
/* From Uiverse.io by Na3ar-17  - Tags: simple, animation, action, switch, dark, modern, click, toggle switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 95px;
  height: 50px;
  background-color: #2a2a2a;
  border-radius: 30px;
  cursor: pointer;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  top: 50%;
  left: 26%;
  transform: translate(-50%, -50%);
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: white;
  transition: 0.3s cubic-bezier(0.68, -0.25, 0.265, 1.1);
  overflow: hidden;
}

.slider .yolk {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  aspect-ratio: 1/1;
  background-color: #f2a828;
  border-radius: 50%;
  -webkit-box-shadow: inset -2px -2px 43px -35px rgba(255, 255, 255, 1);
  -moz-box-shadow: inset -2px -2px 43px -35px rgba(255, 255, 255, 1);
  box-shadow: inset -2px -2px 43px -35px rgba(255, 255, 255, 1);
}

.slider .yolk::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -22px;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background-color: #cabea8;
  border-radius: 50%;
}

.slider .yolk::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 16px;
  height: 16px;
  background-color: transparent;
  border-left: 6px solid #fff;
  clip-path: circle(50% at 50% 50%);
}

.slider .back {
  position: absolute;
  top: 50%;
  left: -50%;
  transform: translate(-50%, -50%);
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: #cabea8;
  transition: 0.3s cubic-bezier(0, 0, 0.265, 1.1);
  overflow: hidden;
}

.slider .back::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  aspect-ratio: 1/1;
  background-color: #eec076;
  border-radius: 50%;
}

.switch input:checked + .slider {
  left: 74%;
}

.switch input:checked + .slider .back {
  left: 50%;
}

</style>
    

================================================
FILE: Toggle-switches/Na3ar-17_warm-turtle-37.html
================================================
<div class="container">
  <label class="switch">
    <input type="checkbox" />
    <span class="slider">
      <span class="title">Play</span>
      <span class="ball">
        <span class="icon">
          <svg
            class="w-6 h-6 text-gray-800 dark:text-white"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            width="25"
            height="25"
            fill="none"
            viewBox="0 0 24 24"
          >
            <path
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M8 18V6l8 6-8 6Z"
            ></path>
          </svg>
        </span>
      </span>
    </span>
  </label>
</div>

<style>
/* From Uiverse.io by Na3ar-17  - Tags: simple, material design, switch */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
}

.switch {
  font-size: 0.875rem;
  position: relative;
  display: inline-block;
  width: 9em;
  height: 2.6em;
}

.switch input {
  display: none;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch input:checked + .slider .ball {
  box-shadow: 10px 10px 100px #7f8996;
}

.switch input:checked + .slider .title {
  left: 40%;
}

.switch input:checked + .slider {
  background-color: #8a5cd4;
}

.switch input:focus + .slider {
  box-shadow: 10px 10px 100px #7f8996;
}

.switch input:checked + .slider .ball {
  left: 72%;
  transform: rotate(360deg);
  box-shadow: none;
  outline: 6px solid rgba(255, 255, 255, 0.278);
}

.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #313033;
  transition: all 0.4s;
  border-radius: 30px;
}

.switch .slider .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  transition: all 0.4s;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.switch .slider .ball {
  background-color: #fff;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  position: absolute;
  left: -1px;
  transition: 0.4s;
}

.switch .slider .ball .icon {
  position: absolute;
  top: 58%;
  left: 53%;
  transform: translate(-50%, -50%);
  color: #313033;
  font-size: 12px;
}

</style>
    

================================================
FILE: Toggle-switches/Nawsome_dry-treefrog-99.html
================================================
<input type="checkbox" class="plus-minus">
<style>
/* From Uiverse.io by Nawsome - Tags: switch */
.plus-minus {
  --primary: #1E2235;
  --secondary: #FAFBFF;
  --duration: .5s;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  outline: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 240px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  border: 4px solid var(--primary);
  background-size: 300% 300%;
  transition: transform 0.3s;
  transform: scale(var(--scale, 1)) translateZ(0);
  -webkit-animation: var(--name, unchecked) var(--duration) ease forwards;
  animation: var(--name, unchecked) var(--duration) ease forwards;
}

.plus-minus:before, .plus-minus:after {
  content: "";
  position: absolute;
  width: 16px;
  height: var(--height, 16px);
  left: 6px;
  top: var(--top, 6px);
  background: var(--background, var(--primary));
  -webkit-animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards;
  animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards;
}

.plus-minus:before {
  -webkit-clip-path: polygon(0 6px, 6px 6px, 6px 0, 10px 0, 10px 6px, 16px 6px, 16px 10px, 10px 10px, 10px 16px, 6px 16px, 6px 10px, 0 10px);
  clip-path: polygon(0 6px, 6px 6px, 6px 0, 10px 0, 10px 6px, 16px 6px, 16px 10px, 10px 10px, 10px 16px, 6px 16px, 6px 10px, 0 10px);
}

.plus-minus:after {
  --height: 4px;
  --top: 12px;
  --background: var(--secondary);
  --name-icon-b: var(--name-icon-a, checked-icon);
}

.plus-minus:active {
  --scale: .95;
}

.plus-minus:checked {
  --name: checked;
  --name-icon-b: checked-icon;
  --name-icon-a: unchecked-icon;
}

@keyframes checked-icon {
  from {
    transform: translateZ(12px);
  }

  to {
    transform: translateX(16px) rotateY(90deg) translateZ(12px);
  }
}

@keyframes unchecked-icon {
  from {
    transform: translateX(-16px) rotateY(-90deg) translateZ(12px);
  }

  to {
    transform: translateZ(12px);
  }
}

@keyframes checked {
  from {
    background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
    background-position: 100% 50%;
  }

  to {
    background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
    background-position: 50% 50%;
  }
}

@keyframes unchecked {
  from {
    background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
    background-position: 100% 50%;
  }

  to {
    background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
    background-position: 50% 50%;
  }
}
</style>


================================================
FILE: Toggle-switches/Nawsome_empty-snail-69.html
================================================
<label class="switch">
  <input type="checkbox" checked="checked">
  <div class="button">
    <div class="light"></div>
    <div class="dots"></div>
    <div class="characters"></div>
    <div class="shine"></div>
    <div class="shadow"></div>
  </div>
</label>

<style>
/* From Uiverse.io by Nawsome - Tags: skeuomorphism, switch */
.switch {
  display: block;
  background-color: black;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

.switch input {
  display: none;
}

.switch input:checked + .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}

.switch input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.switch input:checked + .button .shine {
  opacity: 1;
}

.switch input:checked + .button .shadow {
  opacity: 0;
}

.switch .button {
  display: block;
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}

.switch .button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}

.switch .button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}

.switch .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}

.switch .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
}

.switch .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}

.switch .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}

.switch .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }
}
</style>


================================================
FILE: Toggle-switches/Nawsome_good-dragon-17.html
================================================
<svg xml:space="preserve" viewBox="0 0 500 300" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="svg-switch-container" version="1.1">
  <defs>
     <linearGradient y2="331.0775" x2="360" y1="149.0088" x1="360" gradientUnits="userSpaceOnUse" id="SVGID_1_">
		<stop style="stop-color:#636F7C" offset="0"></stop>
		<stop style="stop-color:#5A6571" offset="1"></stop>
	</linearGradient>
    
    <filter height="160%" width="200%" y="-30%" x="-50%" id="inset-shadow-big-bottom">
        <feOffset dy="2" dx="0"></feOffset>                                                         
        <feGaussianBlur result="offset-blur" stdDeviation="1"></feGaussianBlur>                           
        <feComposite result="inverse" in2="offset-blur" in="SourceGraphic" operator="out"></feComposite> 
        <feFlood result="color" flood-opacity="1" flood-color="#FFF"></feFlood>                     
        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
        <feComponentTransfer result="shadow" in="shadow">                                   
            <feFuncA type="linear"></feFuncA>
        </feComponentTransfer>
        <feComposite result="final-shadow-1" in2="SourceGraphic" in="shadow" operator="over"></feComposite>                    
      
        <feOffset dy="-4" dx="0"></feOffset>                                                         
        <feGaussianBlur result="offset-blur" stdDeviation="2"></feGaussianBlur>                           
        <feComposite result="inverse" in2="offset-blur" in="final-shadow-1" operator="out"></feComposite> 
        <feFlood result="color" flood-opacity="1" flood-color="#999"></feFlood>                     
        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
        <feComponentTransfer result="shadow" in="shadow">                                   
            <feFuncA type="linear"></feFuncA> 
        </feComponentTransfer>
        <feComposite result="final-shadow-2" in2="final-shadow-1" in="shadow" operator="over"></feComposite>                    
      
      
      <feGaussianBlur result="blur" stdDeviation="4" in="SourceAlpha"></feGaussianBlur> 
      <feOffset result="offsetblur" dy="3" dx="0"></feOffset>

      <feComponentTransfer in="offsetblur" result="shadow1">
        <feFuncA type="linear"></feFuncA>
      </feComponentTransfer>
      
      <feMerge> 
        <feMergeNode in="shadow1"></feMergeNode>
        <feMergeNode in="final-shadow-2"></feMergeNode> 
      </feMerge>
      
      
    </filter>
    
     <filter id="inset-shadow-container">
        <feOffset dy="2" dx="0"></feOffset>                                                         
        <feGaussianBlur result="offset-blur" stdDeviation="2"></feGaussianBlur>                           
        <feComposite result="inverse" in2="offset-blur" in="SourceGraphic" operator="out"></feComposite> 
        <feFlood result="color" flood-opacity="1" flood-color="#555"></feFlood>                     
        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
        <feComponentTransfer result="shadow" in="shadow">                                   
            <feFuncA type="linear"></feFuncA>
        </feComponentTransfer>
        <feComposite in2="SourceGraphic" in="shadow" operator="over"></feComposite>                    
    </filter>
    
    <filter id="inset-shadow-container-big">
        <feOffset dy="0" dx="0"></feOffset>                                                         
        <feGaussianBlur result="offset-blur" stdDeviation="5"></feGaussianBlur>                           
        <feComposite result="inverse" in2="offset-blur" in="SourceGraphic" operator="out"></feComposite> 
        <feFlood result="color" flood-opacity="1" flood-color="#555"></feFlood>                     
        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
        <feComponentTransfer result="shadow" in="shadow">                                   
            <feFuncA type="linear"></feFuncA>
        </feComponentTransfer>
        <feComposite in2="SourceGraphic" in="shadow" operator="over"></feComposite>                    
    </filter>
    
    <filter height="150%" width="150%" y="-20%" x="-50%" id="big-gaussian-blur">
      <feGaussianBlur result="base-blur" stdDeviation="25"></feGaussianBlur>
    </filter>
    

    
    <filter height="120%" width="150%" y="0" x="-10%" id="drop-shadow">
      <feOffset dy="14" dx="0" in="SourceGraphic" result="offOut"></feOffset>
      <feColorMatrix values="0.2 0 0 
              0 0 0 0.2 
              0 0 0 0 0 
              0.2 0 0 0 
              0 0 0.5 0" type="matrix" in="offOut" result="matrixOut"></feColorMatrix>
      <feGaussianBlur stdDeviation="6" in="matrixOut" result="blurOut"></feGaussianBlur>
      <feBlend mode="normal" in2="blurOut" in="SourceGraphic"></feBlend>
    </filter>
    
        
    <filter height="120%" width="120%" y="0" x="-10%" id="drop-shadow-checkbox">
      <feOffset dy="10" dx="0" in="SourceGraphic" result="offOut"></feOffset>
      <feColorMatrix values="0.0 0 0 
              0 0 0 0.0 
              0 0 0 0 0 
              0.0 0 0 0 
              0 0 0.35 0" type="matrix" in="offOut" result="matrixOut"></feColorMatrix>
      <feGaussianBlur stdDeviation="10" in="matrixOut" result="blurOut"></feGaussianBlur>
      <feBlend mode="normal" in2="blurOut" in="SourceGraphic"></feBlend>
    </filter>

    
  </defs>
<g transform="translate(-130 -110)" class="svg-switch">
	<g filter="url(#big-gaussian-blur)" opacity="1" style="fill:#F4847D;" id="mild-glow">
			<path d="M254.949,330.381l-79.336-79.336c-6.1-6.1-6.1-15.991,0-22.091l79.336-79.336c6.1-6.1,15.991-6.1,22.091,0l79.336,79.336
				c6.1,6.1,6.1,15.991,0,22.091l-79.336,79.336C270.939,336.481,261.049,336.481,254.949,330.381z"></path>
	</g>
	<path d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37
		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z" style="fill:#F3F3F0;" filter="url(#drop-shadow)" id="base-outline"></path>

	<path d="M538.979,229.371l-76.344-76.344c-2.935-2.935-6.782-4.403-10.629-4.403H266.328v0.101
		c-3.274,0.363-6.452,1.791-8.962,4.301l-76.344,76.344c-5.87,5.87-5.87,15.388,0,21.258l76.344,76.344
		c2.51,2.51,5.689,3.938,8.962,4.301v0.101h185.678c3.847,0,7.694-1.468,10.629-4.403l76.344-76.344
		C544.849,244.759,544.849,235.241,538.979,229.371z" filter="url(#inset-shadow-container-big)" style="fill:url(#SVGID_1_);" id="base-container"></path>
	

   <path d="M257.071,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846
		l64.09-64.09c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
		C269.989,317.94,261.999,317.94,257.071,313.013z" filter="url(#inset-shadow-container)" class="position-container" style="fill:#525C6B;" id="start_container"></path> 
  
    <path d="M445.083,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846
		l64.09-64.09c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
		C458.001,317.94,450.011,317.94,445.083,313.013z" filter="url(#inset-shadow-container)" style="fill:#525C6B;" class="position-container" id="end_container"></path>
	
  
   <text y="255" x="225" class="text-label noselect">OFF</text>
   <text y="255" x="430" class="text-label noselect">ON</text>  
  
  <g transform="translate(0)" id="checkbox-off"> 
		<path d="M257.071,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846l64.09-64.09
			c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
			C269.989,317.94,261.999,317.94,257.071,313.013z" filter="url(#drop-shadow-checkbox)" style="fill:#F5F3EE;" id="off-bot-cap"></path>
		<path d="M257.942,305.884l-57.832-57.832c-4.447-4.447-4.447-11.656,0-16.103l57.832-57.832
			c4.447-4.447,11.656-4.447,16.103,0l57.832,57.832c4.447,4.447,4.447,11.656,0,16.103l-57.832,57.832
			C269.599,310.331,262.389,310.331,257.942,305.884z" style="fill:#F4847D;" id="off-color"></path>
		<path d="M259.757,291.032l-44.795-44.795c-3.444-3.444-3.444-9.029,0-12.473
			l44.795-44.795c3.444-3.444,9.029-3.444,12.473,0l44.795,44.795c3.444,3.444,3.444,9.029,0,12.473l-44.795,44.795
			C268.786,294.477,263.202,294.477,259.757,291.032z" filter="url(#inset-shadow-big-bottom)" style="fill:#FFFFFF;" id="off-top-cap"></path>
	</g>
  
  <g id="control-group">
    	<path d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37 
		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z" style="fill:transparent" id="controlon" class="control-element"></path>
    
        	<path d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37 
		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z" style="fill:transparent" transform="translate(0 300)" class="control-element" id="controloff"></path>
  </g>
  
   <animateTransform values="0 0 ; 0 300" fill="freeze" dur="0.01s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controlon"></animateTransform>
  
    <animateTransform values="0 300 ; 0 0" fill="freeze" dur="0.01s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controloff"></animateTransform>
  
  <animateTransform values="0 300 ; 0 0" fill="freeze" dur="0.01s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controlon"></animateTransform>
  
    <animateTransform values="0 0 ; 0 300" fill="freeze" dur="0.01s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controloff"></animateTransform>  
  
  
  
    <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="0;-5;200;180;188;" fill="freeze" dur="0.3s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#checkbox-off"></animateTransform>
  
   <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="188;193;-12; 8; 0" fill="freeze" dur="0.3s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#checkbox-off"></animateTransform>
  
    <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="188;193;-12; 8; 0" fill="freeze" dur="0.3s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#mild-glow"></animateTransform>
  
      <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="0;-5;200;180;188;" fill="freeze" dur="0.3s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#mild-glow"></animateTransform>
  
  
  ?&gt;
  
  
  
    
  
   
  
     
  
   
  
  


</g>
</svg>
<style>
/* From Uiverse.io by Nawsome - Tags: skeuomorphism, switch, on, off */
body {
  font-size: 20px;
  background-color: #d5d9e0;
  padding: 40px;
}

#checkbox-on {
  display: none;
}

.control-element {
  cursor: pointer;
}

.text-label {
  font-size: 1.8em;
  font-family: sans-serif;
  fill: #6D7788;
  text-shadow: 0 0.02em 0.1em rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.position-container {
  cursor: pointer;
}

.svg-switch-container {
  width: 10em;
}

</style>


================================================
FILE: Toggle-switches/Nawsome_green-turkey-32.html
================================================
<div id="app">
  <label class="checker">
    <input type="checkbox" class="checkbox">
    <div class="check-bg"></div>
    <div class="checkmark">
      <svg viewBox="0 0 100 100">
        <path stroke-linejoin="round" stroke-linecap="round" stroke-width="15" stroke="#FFF" fill="none" d="M20,55 L40,75 L77,27"></path>
      </svg>
    </div>
  </label>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: switch */
.checker {
  display: block;
  font-size: 25px;
  height: 1em;
  width: 2.5em;
  box-sizing: content-box;
  padding: 0.15em;
  border-radius: 0.25em;
  cursor: pointer;
}

.checkmark {
  width: 1em;
  height: 1em;
  transform: translateX(-0.4em);
  z-index: 5;
}

.checkmark svg {
  display: block;
  background: #e5e5e5;
  transform: translateX(0.4em);
  border-radius: 0.15em;
  transition: background-color var(--duration) ease, transform calc(var(--duration) * 1.5) ease;
}

.checkmark svg path {
  stroke-dasharray: 90 90;
  stroke-dashoffset: 90;
  transition: stroke-dashoffset calc(var(--duration) / 3) linear calc(var(--duration) / 3);
}

.checkbox {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.4;
  visibility: hidden;
}

.checkbox:checked ~ .checkmark {
  transform: translate(1.9em);
}

.checkbox:checked ~ .checkmark svg {
  background: #77c44c;
  transform: translate(-0.4em);
}

.checkbox:checked ~ .checkmark svg path {
  stroke-dashoffset: 0;
}

.check-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: white;
  z-index: 2;
}

.check-bg:before, .check-bg:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
}

.check-bg:after {
  background: white;
}

.check-bg:before {
  transform: translateY(30%);
  transform-origin: bottom center;
  background: black;
  filter: blur(0.25em);
  opacity: 0.2;
  z-index: -1;
}

.checker.checker:active {
  transform: scale(0.85);
  transition-duration: calc(var(--duration) / 2);
}

.checker.checker:active .check-bg::before {
  transform: translateY(0) scale(0.8);
  opacity: 0.2;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  position: relative;
}

html {
  height: 100%;
}

body {
  background-color: #f2f2f2;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>


================================================
FILE: Toggle-switches/Nawsome_short-dolphin-98.html
================================================
<label><input value="on" name="dummy" type="checkbox" class="bubble"></label>
<style>
/* From Uiverse.io by Nawsome - Tags: skeuomorphism, checkbox, squishy, bubble */
label, .bubble {
  display: block;
  -webkit-tap-highlight-color: transparent;
}

label {
  animation: float74 4s ease-in-out infinite;
}

.bubble, .bubble:before, .bubble:after {
  transition-duration: 0.2s;
}

.bubble, .bubble:after {
  border-radius: 50%;
}

.bubble {
  background-image: radial-gradient(8% 8% at 22% 28%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 23% 27%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 24% 26%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 25% 25%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 26% 24%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 27% 23%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
		radial-gradient(8% 8% at 28% 22%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%);
  box-shadow: 0 -0.06em 0.1em hsl(0,90%,100%) inset,
		0 -0.15em 0.4em hsl(0,90%,45%) inset,
		0 0.05em 0.05em hsl(0,90%,45%) inset,
		0.05em 0 0.1em hsl(0,90%,100%) inset,
		-0.05em 0 0.1em hsl(0,90%,100%) inset,
		0 0.1em 0.4em hsl(0,90%,60%) inset;
  cursor: pointer;
  position: relative;
  width: 3em;
  height: 3em;
  transform-style: preserve-3d;
  transition-property: box-shadow, transform, width, height;
  transition-timing-function: ease-in-out, ease-in-out, var(--bubbleTiming), var(--bubbleTiming);
  will-change: transform;
  -webkit-appearance: none;
  appearance: none;
  z-index: 0;
}

.bubble:before, .bubble:after {
  content: "";
  display: block;
  position: absolute;
  transition-timing-function: var(--bubbleTiming);
}

.bubble:before {
  border-radius: 0.75em;
  box-shadow: 0 0 0 0.5em hsl(0,0%,100%) inset;
  filter: drop-shadow(0.6em 0.6em 4px hsla(0,0%,0%,0.2));
  top: 50%;
  left: 50%;
  width: 1.5em;
  height: 1.5em;
  transform: translate3d(-50%,-50%,-1px);
  z-index: -1;
}

.bubble:after {
  background: radial-gradient(100% 100% at center,hsla(0,0%,0%,0) 35%,hsla(0,0%,0%,0.2) 48%,hsla(0,0%,0%,0) 50%);
  filter: blur(4px);
  top: 0.6em;
  left: 0.6em;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,-1px);
  z-index: -2;
}

.bubble:focus, .bubble:hover {
  transform: scale(1.1);
  outline: none;
}

.bubble:focus:active, .bubble:hover:active {
  width: 3.6em;
  height: 2.4em;
}

.bubble:focus:before, .bubble:hover:before {
  filter: drop-shadow(0.75em 0.75em 4px hsla(0,0%,0%,0.2));
}

.bubble:focus:after, .bubble:hover:after {
  transform: translate3d(0.15em,0.15em,-1px);
}

.bubble:checked {
  box-shadow: 0 -0.06em 0.1em hsl(120,90%,100%) inset,
		0 -0.15em 0.4em hsl(120,90%,45%) inset,
		0 0.05em 0.05em hsl(120,90%,45%) inset,
		0.05em 0 0.1em hsl(120,90%,100%) inset,
		-0.05em 0 0.1em hsl(120,90%,100%) inset,
		0 0.1em 0.4em hsl(120,90%,60%) inset;
}

.bubble:checked:before {
  border-radius: 0.25em;
  width: 0.5em;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  label {
    animation: none;
  }

  .bubble, .bubble:before, .bubble:after {
    transition-duration: 0s;
  }

  .bubble:focus, .bubble:hover {
    transform: scale(1);
  }

  .bubble:focus:active, .bubble:hover:active {
    width: 3em;
    height: 3em;
  }

  .bubble:focus:before, .bubble:hover:before {
    filter: drop-shadow(0.6em 0.6em 4px hsla(0,0%,0%,0.2));
  }

  .bubble:focus:after, .bubble:hover:after {
    transform: translate3d(0,0,-1px);
  }
}
/* Animations */
@keyframes float74 {
  from, to {
    transform: translate(0,3%);
  }

  25% {
    transform: translate(-3%,0);
  }

  50% {
    transform: translate(0,-3%);
  }

  75% {
    transform: translate(3%,0);
  }
}
</style>


================================================
FILE: Toggle-switches/Nawsome_silent-owl-45.html
================================================
<label class="plane-switch">
    <input type="checkbox">
    <div>
        <div>
            <svg viewBox="0 0 13 13">
                <path d="M1.55989957,5.41666667 L5.51582215,5.41666667 L4.47015462,0.108333333 L4.47015462,0.108333333 C4.47015462,0.0634601974 4.49708054,0.0249592654 4.5354546,0.00851337035 L4.57707145,0 L5.36229752,0 C5.43359776,0 5.50087375,0.028779451 5.55026392,0.0782711996 L5.59317877,0.134368264 L7.13659662,2.81558333 L8.29565964,2.81666667 C8.53185377,2.81666667 8.72332694,3.01067661 8.72332694,3.25 C8.72332694,3.48932339 8.53185377,3.68333333 8.29565964,3.68333333 L7.63589819,3.68225 L8.63450135,5.41666667 L11.9308317,5.41666667 C12.5213171,5.41666667 13,5.90169152 13,6.5 C13,7.09830848 12.5213171,7.58333333 11.9308317,7.58333333 L8.63450135,7.58333333 L7.63589819,9.31666667 L8.29565964,9.31666667 C8.53185377,9.31666667 8.72332694,9.51067661 8.72332694,9.75 C8.72332694,9.98932339 8.53185377,10.1833333 8.29565964,10.1833333 L7.13659662,10.1833333 L5.59317877,12.8656317 C5.55725264,12.9280353 5.49882018,12.9724157 5.43174295,12.9907056 L5.36229752,13 L4.57707145,13 L4.55610333,12.9978962 C4.51267695,12.9890959 4.48069792,12.9547924 4.47230803,12.9134397 L4.47223088,12.8704208 L5.51582215,7.58333333 L1.55989957,7.58333333 L0.891288881,8.55114605 C0.853775374,8.60544678 0.798421006,8.64327676 0.73629202,8.65879796 L0.672314689,8.66666667 L0.106844414,8.66666667 L0.0715243949,8.66058466 L0.0715243949,8.66058466 C0.0297243066,8.6457608 0.00275502199,8.60729104 0,8.5651586 L0.00593007386,8.52254537 L0.580855011,6.85813984 C0.64492547,6.67265611 0.6577034,6.47392717 0.619193545,6.28316421 L0.580694768,6.14191703 L0.00601851064,4.48064746 C0.00203480725,4.4691314 0,4.45701613 0,4.44481314 C0,4.39994001 0.0269259152,4.36143908 0.0652999725,4.34499318 L0.106916826,4.33647981 L0.672546853,4.33647981 C0.737865848,4.33647981 0.80011301,4.36066329 0.848265401,4.40322477 L0.89131128,4.45169723 L1.55989957,5.41666667 Z" fill="currentColor"></path>
            </svg>
        </div>
        <span class="street-middle"></span>
        <span class="cloud"></span>
        <span class="cloud two"></span>
    </div>
</label>
<style>
/* From Uiverse.io by Nawsome - Tags: switch, plane */
.plane-switch {
  --dot: #fff;
  --street: #6B6D76;
  --street-line: #A8AAB4;
  --street-line-mid: #C0C2C8;
  --sky-1: #60A7FA;
  --sky-2: #2F8EFC;
  --light-1: rgba(255, 233, 0, 1);
  --light-2: rgba(255, 233, 0, .3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.plane-switch input {
  display: none;
}

.plane-switch input + div {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 25px;
  padding: 1px;
  border-radius: 13px;
  background: linear-gradient(90deg, var(--street) 0%, var(--street) 25%, var(--sky-1) 75%, var(--sky-2) 100%) left var(--p, 0%) top 0;
  background-position-x: var(--p, 0%);
  background-size: 400% auto;
  transition: background-position 0.6s;
}

.plane-switch input + div:before, .plane-switch input + div:after {
  content: "";
  display: block;
  position: absolute;
  transform: translateX(var(--s, 0));
  transition: transform 0.3s;
}

.plane-switch input + div:before {
  width: 42px;
  right: 2px;
  top: 4px;
  height: 1px;
  background: var(--street-line);
  box-shadow: 0 16px 0 0 var(--street-line);
}

.plane-switch input + div:after {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  left: 23px;
  top: 1px;
  -webkit-animation: lights2 2s linear infinite;
  animation: lights2 2s linear infinite;
  box-shadow: inset 0 0 0 2px var(--light-1), 0 21px 0 var(--light-1), 8px 0 0 var(--light-2), 8px 21px 0 var(--light-2), 16px 0 0 var(--light-2), 16px 21px 0 var(--light-2);
}

.plane-switch input + div span {
  display: block;
  position: absolute;
}

.plane-switch input + div span.street-middle {
  top: 12px;
  left: 21px;
  width: 3px;
  height: 1px;
  transform: translateX(var(--s, 0));
  background: var(--street-line-mid);
  box-shadow: 5px 0 0 var(--street-line-mid), 10px 0 0 var(--street-line-mid), 15px 0 0 var(--street-line-mid), 20px 0 0 var(--street-line-mid), 25px 0 0 var(--street-line-mid);
  transition: transform 0.3s;
}

.plane-switch input + div span.cloud {
  width: 12px;
  height: 4px;
  border-radius: 2px;
  background: #fff;
  position: absolute;
  top: var(--ct, 8px);
  left: 100%;
  opacity: var(--co, 0);
  transition: opacity 0.3s;
  -webkit-animation: clouds2 2s linear infinite var(--cd, 0s);
  animation: clouds2 2s linear infinite var(--cd, 0s);
}

.plane-switch input + div span.cloud:before, .plane-switch input + div span.cloud:after {
  content: "";
  position: absolute;
  transform: translateX(var(--cx, 0));
  border-radius: 50%;
  width: var(--cs, 5px);
  height: var(--cs, 5px);
  background: #fff;
  bottom: 1px;
  left: 1px;
}

.plane-switch input + div span.cloud:after {
  --cs: 6px;
  --cx: 4px;
}

.plane-switch input + div span.cloud.two {
  --ct: 20px;
  --cd: 1s;
  opacity: var(--co-2, 0);
}

.plane-switch input + div div {
  display: table;
  position: relative;
  z-index: 1;
  padding: 5px;
  border-radius: 50%;
  background: var(--dot);
  transform: translateX(var(--x, 0));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.35, 1.2);
}

.plane-switch input + div div svg {
  width: 13px;
  height: 13px;
  display: block;
  color: var(--c, var(--street));
  transition: color 0.6s;
}

.plane-switch input:checked + div {
  --p: 100%;
  --x: 25px;
  --s: -50px;
  --c: var(--sky-2);
  --co: .8;
  --co-2: .6;
}

@keyframes lights2 {
  20%, 30% {
    box-shadow: inset 0 0 0 2px var(--light-2), 0 21px 0 var(--light-2), 8px 0 0 var(--light-1), 8px 21px 0 var(--light-1), 16px 0 0 var(--light-2), 16px 21px 0 var(--light-2);
  }

  55%, 65% {
    box-shadow: inset 0 0 0 2px var(--light-2), 0 21px 0 var(--light-2), 8px 0 0 var(--light-2), 8px 21px 0 var(--light-2), 16px 0 0 var(--light-1), 16px 21px 0 var(--light-1);
  }

  90%, 100% {
    box-shadow: inset 0 0 0 2px var(--light-1), 0 21px 0 var(--light-1), 8px 0 0 var(--light-2), 8px 21px 0 var(--light-2), 16px 0 0 var(--light-2), 16px 21px 0 var(--light-2);
  }
}

@keyframes clouds2 {
  97% {
    transform: translateX(-72px);
    visibility: visible;
  }

  98%, 100% {
    visibility: hidden;
  }

  99% {
    transform: translateX(-72px);
  }

  100% {
    transform: translateX(0);
  }
}
</style>


================================================
FILE: Toggle-switches/Nawsome_witty-emu-55.html
================================================
<label class="checkbox">
    <input type="checkbox">
    <svg viewBox="0 0 21 18">
        <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 18" id="tick-path">
            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" fill="none" d="M5.22003 7.26C5.72003 7.76 7.57 9.7 8.67 11.45C12.2 6.05 15.65 3.5 19.19 1.69"></path>
        </symbol>
        <defs>
            <mask id="tick">
                
            </mask>
        </defs>
        
        <path d="M18 9C18 10.4464 17.9036 11.8929 17.7589 13.1464C17.5179 15.6054 15.6054 17.5179 13.1625 17.7589C11.8929 17.9036 10.4464 18 9 18C7.55357 18 6.10714 17.9036 4.85357 17.7589C2.39464 17.5179 0.498214 15.6054 0.241071 13.1464C0.0964286 11.8929 0 10.4464 0 9C0 7.55357 0.0964286 6.10714 0.241071 4.8375C0.498214 2.39464 2.39464 0.482143 4.85357 0.241071C6.10714 0.0964286 7.55357 0 9 0C10.4464 0 11.8929 0.0964286 13.1625 0.241071C15.6054 0.482143 17.5179 2.39464 17.7589 4.8375C17.9036 6.10714 18 7.55357 18 9Z" mask="url(#tick)" fill="white"></path>
    </svg>
    <svg viewBox="0 0 11 11" class="lines">
        <path d="M5.88086 5.89441L9.53504 4.26746"></path>
        <path d="M5.5274 8.78838L9.45391 9.55161"></path>
        <path d="M3.49371 4.22065L5.55387 0.79198"></path>
    </svg>
</label>
<style>
/* From Uiverse.io by Nawsome - Tags: switch */
.checkbox {
  --border-default: #bbbbc1;
  --border-hover: #9898a3;
  --active: #6E7BF2;
  --active-tick: #ffffff;
  display: block;
  width: 18px;
  height: 18px;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.checkbox svg {
  display: block;
  position: absolute;
}

.checkbox input {
  display: block;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 36%/36%;
  box-shadow: inset 0 0 0 1.5px var(--border, var(--border-default));
  background: var(--background, transparent);
  transition: background 0.25s linear, box-shadow 0.25s linear;
}

.checkbox input + svg {
  width: 21px;
  height: 18px;
  left: 0;
  top: 0;
  color: var(--active);
}

.checkbox input + svg .tick {
  stroke-dasharray: 20;
  stroke-dashoffset: var(--stroke-dashoffset, 20);
  transition: stroke-dashoffset 0.2s;
}

.checkbox input + svg .tick.mask {
  stroke: var(--active-tick);
}

.checkbox input + svg + svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: var(--active);
  stroke-width: 1.25;
  stroke-linecap: round;
  top: -6px;
  right: -10px;
  stroke-dasharray: 4.5px;
  stroke-dashoffset: 13.5px;
  pointer-events: none;
  -webkit-animation: var(--animation, none) 0.2s ease 0.175s;
  animation: var(--animation, none) 0.2s ease 0.175s;
}

.checkbox input:checked {
  --background: var(--active);
  --border: var(--active);
}

.checkbox input:checked + svg {
  --stroke-dashoffset: 0;
}

.checkbox input:checked + svg + svg {
  --animation: check95;
}

.checkbox:hover input:not(:checked) {
  --border: var(--border-hover);
}

@keyframes check95 {
  100% {
    stroke-dashoffset: 4.5px;
  }
}
</style>


================================================
FILE: Toggle-switches/NomNomcats_calm-pug-88.html
================================================
<label class="switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by NomNomcats  - Tags: simple, material design, blue, switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 4em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 30px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.6em;
  width: 1.6em;
  border-radius: 20px;
  left: 0.2em;
  bottom: 0.2em;
  background-color: white;
  transition: 0.4s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.switch input:checked + .slider {
  background-color: #4cc9f0;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #4cc9f0;
}

.switch input:checked + .slider:before {
  transform: translateX(2em);
  background-color: #4cc9f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Add some cool effects */
.slider:after {
  content: "OFF";
  color: white;
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  transition: opacity 0.4s;
  opacity: 1;
}

.switch input:checked + .slider:after {
  content: "ON";
  left: 0.5em;
  opacity: 1;
  right: auto;
}

</style>
    

================================================
FILE: Toggle-switches/Praashoo7_angry-starfish-78.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Praashoo7 - Tags: neumorphism, switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
  transition: .4s;
  border-radius: 5px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 0.1em;
  border-radius: 0px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #171717;
  box-shadow: inset 2px 5px 10px rgb(0, 0, 0);
}

input:checked + .slider:before {
  transform: translateX(2.8em) rotate(360deg);
}
</style>


================================================
FILE: Toggle-switches/Praashoo7_cuddly-moose-15.html
================================================
<label class="switch">
  <input class="chk" type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Praashoo7 - Tags: switch, rounded, smooth */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch .chk {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 50%;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 2.5px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition: .4s;
  scale: 0;
}

.chk:checked + .slider {
  background-color: limegreen;
  transform: scale(0.7);
  border-radius: 50%;
}

.chk:checked + .slider:before {
  transform: rotateZ(360deg);
  scale: 1;
  border-radius: 50%;
}
</style>


================================================
FILE: Toggle-switches/Praashoo7_nasty-seahorse-26.html
================================================
<label class="switch">
  <input class="chk_85" type="checkbox">
  <span class="slider">
    <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" class="torch">
    <path d="M 63.85,54.65 Q 62.77,54.13 61.88,53.31 Q 54.13,46.12 46.31,37.69 Q 43.88,35.06 44.29,31.53 Q 44.51,29.56 46.54,25.87 Q 56.15,8.39 59.06,3.56 Q 60.59,1.03 63.83,2.41 Q 67.73,4.07 71.11,6.55 Q 72.85,7.82 77.51,11.86 Q 89.11,21.92 96.94,34.06 Q 100.09,38.95 95.24,41.73 Q 83.77,48.31 72.16,54.64 Q 68.24,56.77 63.85,54.65 Z" fill="#ffffff"></path>
    <path d="M 14.03,66.29 Q 27.40,51.66 40.57,37.33 A 0.54,0.54 52.1 0 1 41.44,37.44 Q 43.25,40.72 45.58,43.04 Q 47.66,45.11 47.71,45.17 Q 54.67,52.58 62.60,58.93 A 0.44,0.43 43.0 0 1 62.63,59.59 Q 42.87,77.87 22.77,95.78 Q 20.75,97.58 19.20,97.93 Q 16.72,98.49 14.81,96.94 Q 6.88,90.47 2.81,84.94 Q 1.47,83.11 2.03,80.84 Q 2.37,79.43 4.04,77.51 Q 8.97,71.84 14.03,66.29 ZM 42.9269,57.1766 A 3.76 3.76 0.0 0 0 37.6102,57.0930 L 33.1721,61.3938 A 3.76 3.76 0.0 0 0 33.0886,66.7106 L 33.3531,66.9834 A 3.76 3.76 0.0 0 0 38.6698,67.0670 L 43.1079,62.7662 A 3.76 3.76 0.0 0 0 43.1914,57.4494 L 42.9269,57.1766 Z" fill="#ffffff"></path>
    </svg>
    <svg class="b" width="100%" height="50%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M29 20L31 22" class="bling_85"></path>
    <path d="M31.5 15H34.5" class="bling_85"></path>
    <path d="M29 10L31 8" class="bling_85"></path>
    </svg>
  </span>
</label>
<style>
/* From Uiverse.io by Praashoo7 - Tags: switch, torch, flashlight */
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.8em;
  height: 3.8em;
}

.torch {
  margin-top: 0.9em;
  margin-left: 0.95em;
  width: 30px;
  height: 30px;
  transform: rotate(-45deg);
}

.slider .b {
  position: relative;
  top: -3.3em;
  transform: rotate(270deg);
}

.slider .bling_85 {
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 3;
  stroke-dashoffset: 15;
  transition: all 0.3s ease;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: .4s;
  border-radius: 50%;
  background-color: rgba(116, 115, 115, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.chk_85:checked + .slider {
  animation: tap 0.3s linear forwards;
}

.chk_85:checked + .slider .bling_85 {
  animation: bling_8561328 0.3s linear forwards;
  animation-delay: 0.2s;
}

.chk_85:checked + .slider {
  background-color: #FFA133;
}

.chk_85:focus + .slider {
  box-shadow: 0 0 1px #FFA133;
}

@keyframes bling_8561328 {
  50% {
    stroke-dasharray: 3;
    stroke-dashoffset: 12;
  }

  100% {
    stroke-dasharray: 3;
    stroke-dashoffset: 9;
  }
}

@keyframes tap {
  50% {
    scale: 0.9;
  }

  100% {
    scale: 1;
  }
}
</style>


================================================
FILE: Toggle-switches/Praashoo7_stupid-termite-0.html
================================================
<label class="switch">
  <input class="chk" type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Praashoo7 - Tags: switch, on, off */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 4em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch .chk {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(255, 255, 255);
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "OFF";
  display: grid;
  place-content: center;
  height: 1.6em;
  width: 3.6em;
  border-radius: 20px;
  left: 0.17em;
  bottom: 0.22em;
  background-color: rgb(255, 0, 0);
  box-shadow: 0px 0px 3.7px black;
  transition: .4s ease-in-out;
}

.chk:checked + .slider:before {
  content: "ON";
  background-color: limegreen;
  box-shadow: inset 0px 0px 5px black;
}
</style>


================================================
FILE: Toggle-switches/Praashoo7_tough-firefox-72.html
================================================
<label class="container">
  <input type="checkbox">
  <div class="checkmark">
    <div class="switch"></div>
  </div>
</label>
<style>
/* From Uiverse.io by Praashoo7 - Tags: switch, on, off, light, realistic */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 6em;
  width: 3em;
  background-color: #ccc;
}

.switch {
  position: relative;
  height: 5.4em;
  width: 2.4em;
  top: .3em;
  left: .3em;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 2px, rgba(0, 0, 0, 0.3) 0px 0px 0px -3px, rgba(0, 0, 0, 0.2) 0px -8px 0px inset;
}

.container input:checked ~ .checkmark .switch {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 0px 0px -3px, rgba(0, 0, 0, 0.2) 0px -6px 0px inset;
  transform: rotateX(180deg);
}
</style>


================================================
FILE: Toggle-switches/Praashoo7_tricky-turkey-18.html
================================================
<label class="switch">
  <input type="checkbox" class="chk1">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Praashoo7 - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 4em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch .chk1 {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 5px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 2.5px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition: 0.4s;
  box-shadow: 0 6px 7px rgba(0,0,0,0.3);
}

.slider:after {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 2.5px;
  left: 2.3em;
  bottom: 0.3em;
  background-color: #ccc;
  transition: 0.4s;
  box-shadow: 0 0px 0px rgba(0,0,0,0.3);
}

.chk1:checked + .slider:before {
  background-color: #ccc;
  box-shadow: 0 0px 0px rgba(0,0,0,0.3);
}

.chk1:checked + .slider:after {
  background-color: rgb(0, 182, 45);
  box-shadow: 0 6px 7px rgba(0,0,0,0.3);
}
</style>


================================================
FILE: Toggle-switches/Praashoo7_witty-dodo-51.html
================================================
<label class="switch">
  <input type="checkbox" class="chk">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Praashoo7 - Tags: switch, on, off, realistic, lever */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 1.2em;
  height: 3.3em;
}

/* Hide default HTML checkbox */
.switch .chk {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 5px;
}

.slider:before {
  position: absolute;
  content: "";
  height: .5em;
  width: 2.4em;
  border-radius: 5px;
  left: -0.6em;
  top: 0.2em;
  background-color: white;
  box-shadow: 0 6px 7px rgba(0,0,0,0.3);
  transition: .4s;
}

.slider:before, .slider:after {
  content: "";
  display: block;
}

.slider:after {
  background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.15) 0) 0 50% / 50% 100%,
		repeating-linear-gradient(90deg,rgb(255, 255, 255) 0,rgb(255, 255, 255),rgb(255, 255, 255) 20%,rgb(255, 255, 255) 20%,rgb(255, 255, 255) 40%) 0 50% / 50% 100%,
		radial-gradient(circle at 50% 50%,rgb(255, 255, 255) 25%, transparent 26%);
  background-repeat: no-repeat;
  border: 0.25em solid transparent;
  border-left: 0.4em solid #ffffff;
  border-right: 0 solid transparent;
  transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
  transform: translateX(-22.5%) rotate(90deg);
  transform-origin: 25% 50%;
  position: relative;
  top: 0.5em;
  left: 0.55em;
  width: 2em;
  height: 1em;
  box-sizing: border-box;
}

.chk:checked + .slider {
  background-color: limegreen;
}

.chk:focus + .slider {
  box-shadow: 0 0 1px limegreen;
}

.chk:checked + .slider:before {
  transform: translateY(2.3em);
}

.chk:checked + .slider:after {
  transform: rotateZ(90deg) rotateY(180deg) translateY(0.45em) translateX(-1.4em);
}
</style>


================================================
FILE: Toggle-switches/Pradeepsaranbishnoi_cold-gecko-57.html
================================================
<div class="bauble_box">
	<input class="bauble_input" id="bauble_check" name="bauble" type="checkbox">
	<label class="bauble_label" for="bauble_check">Toggle</label>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: switch */
.bauble_box .bauble_label {
  background: #2c2;
  background-position: 62px 5px;
  background-repeat: no-repeat;
  background-size: auto 5px;
  border: 0;
  border-radius: 50px;
  box-shadow: inset 0 10px 20px rgba(0,0,0,.4), 0 -1px 0px rgba(0,0,0,.2), inset 0 -1px 0px #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 0;
  height: 40px;
  position: relative;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  width: 90px;
}

.bauble_box .bauble_label:before {
  background-color: rgba(255,255,255,.2);
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 30% auto;
  border-radius: 50%;
  box-shadow: inset 0 -5px 25px #050, 0 10px 20px rgba(0,0,0,.4);
  content: '';
  display: block;
  height: 30px;
  left: 5px;
  position: absolute;
  top: 6px;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  width: 30px;
  z-index: 2;
}

.bauble_box input.bauble_input {
  opacity: 0;
  z-index: 0;
}

/* Checked */
.bauble_box input.bauble_input:checked + .bauble_label {
  background-color: #c22;
}

.bauble_box input.bauble_input:checked + .bauble_label:before {
  background-position: 150% 0;
  box-shadow: inset 0 -5px 25px #500, 0 10px 20px rgba(0,0,0,.4);
  left: calc( 100% - 35px );
}

</style>


================================================
FILE: Toggle-switches/Pradeepsaranbishnoi_honest-penguin-58.html
================================================

  <input name="switch" id="switch" type="checkbox">
  <label class="switch" for="switch"></label>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: skeuomorphism, switch, realistic */
#switch {
  visibility: hidden;
  clip: rect(0 0 0 0);
  position: absolute;
  left: 9999px;
}

.switch {
  display: block;
  width: 130px;
  height: 60px;
  margin: 70px auto;
  position: relative;
  background: #ced8da;
  background: linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 );
  transition: all 0.2s ease-out;
  cursor: pointer;
  border-radius: 0.35em;
  box-shadow: 0 0 1px 2px rgba(0,0,0,0.7),
    inset 0 2px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 1px rgba(0,0,0,0.3),
    0 8px 10px rgba(0,0,0,0.15);
}

.switch:before {
  display: block;
  position: absolute;
  left: -35px;
  right: -35px;
  top: -25px;
  bottom: -25px;
  z-index: -2;
  content: "";
  border-radius: 0.4em;
  background: #d5dde0;
  background: linear-gradient(#d7dfe2, #bcc7cd);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6),
    inset 0 -1px 1px 1px rgba(0,0,0,0.3),
    0 0 8px 2px rgba(0,0,0,0.2),
    0 2px 4px 2px rgba(0,0,0,0.1);
  pointer-events: none;
  transition: all 0.2s ease-out;
}

.switch:after {
  content: "";
  position: absolute;
  right: -25px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #788b91;
  margin-top: -8px;
  z-index: -1;
  box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),
    inset 0 -2px 2px rgba(0,0,0,0.2),
    0 1px 0 white,
    0 -1px 0 rgba(0,0,0,0.5),
    -47px 32px 15px 13px rgba(0,0,0,0.25);
}

#switch:checked ~ .switch {
  background: #b7bfc2;
  background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 );
}

#switch:checked ~ .switch:after {
  background: #b1ffff;
  box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),
    inset 0 -2px 2px rgba(0,0,0,0.2),
    0 1px 0 white,
    0 -1px 0 rgba(0,0,0,0.5),
    -110px 32px 15px 13px rgba(0,0,0,0.25);
}
</style>


================================================
FILE: Toggle-switches/PriyanshuGupta28_itchy-bat-11.html
================================================
<div class="flipswitch">
    <input checked="" id="fs" class="flipswitch-cb" name="flipswitch" type="checkbox">
    <label for="fs" class="flipswitch-label">
        <div class="flipswitch-inner"></div>
        <div class="flipswitch-switch"></div>
    </label>
</div>

<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: switch, 3d switch, cool switch, creative switch */
.flipswitch {
  position: relative;
  width: 86px;
}

.flipswitch input[type=checkbox] {
  display: none;
}

.flipswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #999999;
  border-radius: 8px;
}

.flipswitch-inner {
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.flipswitch-inner:before, .flipswitch-inner:after {
  float: left;
  width: 50%;
  height: 24px;
  padding: 0;
  line-height: 24px;
  font-size: 18px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.flipswitch-inner:before {
  content: "ON";
  padding-left: 12px;
  background-color: #256799;
  color: #FFFFFF;
}

.flipswitch-inner:after {
  content: "OFF";
  padding-right: 12px;
  background-color: #EBEBEB;
  color: #888888;
  text-align: right;
}

.flipswitch-switch {
  width: 31px;
  margin: -3.5px;
  background: #FFFFFF;
  border: 1px solid #999999;
  border-radius: 8px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 59px;
  transition: all 0.3s ease-in 0s;
}

.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
  margin-left: 0;
}

.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
  right: 0;
}

</style>


================================================
FILE: Toggle-switches/PriyanshuGupta28_little-grasshopper-46.html
================================================
<div class="checkbox-wrapper">
  <label class="toggleButton">
    <input type="checkbox">
    <div>
      <svg viewBox="0 0 44 44">
        <path transform="translate(-2.000000, -2.000000)" d="M14,24 L21,31 L39.7428882,11.5937758 C35.2809627,6.53125861 30.0333333,4 24,4 C12.95,4 4,12.95 4,24 C4,35.05 12.95,44 24,44 C35.05,44 44,35.05 44,24 C44,19.3 42.5809627,15.1645919 39.7428882,11.5937758"></path>
      </svg>
    </div>
  </label>
</div>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: switch, toggle switch, cool switch */
.checkbox-wrapper input[type="checkbox"] {
  display: none;
  visibility: hidden;
}

.checkbox-wrapper *,
  .checkbox-wrapper *::before,
  .checkbox-wrapper *::after {
  box-sizing: border-box;
}

.checkbox-wrapper .toggleButton {
  cursor: pointer;
  display: block;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform 0.14s ease;
}

.checkbox-wrapper .toggleButton:active {
  transform: rotateX(30deg);
}

.checkbox-wrapper .toggleButton input + div {
  border: 3px solid rgba(0, 89, 255, 0.288);
  border-radius: 50%;
  position: relative;
  width: 44px;
  height: 44px;
}

.checkbox-wrapper .toggleButton input + div svg {
  fill: none;
  stroke-width: 3.6;
  stroke: rgb(0, 0, 0);
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 44px;
  height: 44px;
  display: block;
  position: absolute;
  left: -3px;
  top: -3px;
  right: -3px;
  bottom: -3px;
  z-index: 1;
  stroke-dashoffset: 124.6;
  stroke-dasharray: 0 162.6 133 29.6;
  transition: all 0.4s ease 0s;
}

.checkbox-wrapper .toggleButton input + div:before,
  .checkbox-wrapper .toggleButton input + div:after {
  content: "";
  width: 3px;
  height: 16px;
  background: #000;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 5px;
}

.checkbox-wrapper .toggleButton input + div:before {
  opacity: 0;
  transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  -webkit-animation: bounceInBefore-44 0.3s linear forwards 0.3s;
  animation: bounceInBefore-44 0.3s linear forwards 0.3s;
}

.checkbox-wrapper .toggleButton input + div:after {
  opacity: 0;
  transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  -webkit-animation: bounceInAfter-44 0.3s linear forwards 0.3s;
  animation: bounceInAfter-44 0.3s linear forwards 0.3s;
}

.checkbox-wrapper .toggleButton input:checked + div svg {
  stroke-dashoffset: 162.6;
  stroke-dasharray: 0 162.6 28 134.6;
  transition: all 0.4s ease 0.2s;
}

.checkbox-wrapper .toggleButton input:checked + div:before {
  opacity: 0;
  transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  -webkit-animation: bounceInBeforeDont-44 0.3s linear forwards 0s;
  animation: bounceInBeforeDont-44 0.3s linear forwards 0s;
}

.checkbox-wrapper .toggleButton input:checked + div:after {
  opacity: 0;
  transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  -webkit-animation: bounceInAfterDont-44 0.3s linear forwards 0s;
  animation: bounceInAfterDont-44 0.3s linear forwards 0s;
}

@-webkit-keyframes bounceInBefore-44 {
  0% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.1) translate(-50%, -50%) rotate(45deg);
  }

  80% {
    opacity: 1;
    transform: scale(0.89) translate(-50%, -50%) rotate(45deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(45deg);
  }
}

@keyframes bounceInBefore-44 {
  0% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.1) translate(-50%, -50%) rotate(45deg);
  }

  80% {
    opacity: 1;
    transform: scale(0.89) translate(-50%, -50%) rotate(45deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(45deg);
  }
}

@-webkit-keyframes bounceInAfter-44 {
  0% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.1) translate(-50%, -50%) rotate(-45deg);
  }

  80% {
    opacity: 1;
    transform: scale(0.89) translate(-50%, -50%) rotate(-45deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
  }
}

@keyframes bounceInAfter-44 {
  0% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.1) translate(-50%, -50%) rotate(-45deg);
  }

  80% {
    opacity: 1;
    transform: scale(0.89) translate(-50%, -50%) rotate(-45deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
  }
}

@-webkit-keyframes bounceInBeforeDont-44 {
  0% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  }
}

@keyframes bounceInBeforeDont-44 {
  0% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  }
}

@-webkit-keyframes bounceInAfterDont-44 {
  0% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  }
}

@keyframes bounceInAfterDont-44 {
  0% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  }
}

</style>


================================================
FILE: Toggle-switches/PriyanshuGupta28_new-dog-15.html
================================================
<div class="toggle">
  <input id="toggle-switch" type="checkbox">
  <label for="toggle-switch"></label>
</div>

<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: switch, theme-switch, advanced */
.toggle {
  position: relative;
  width: 60px;
  height: 34px;
}

.toggle input[type="checkbox"] {
  display: none;
}

.toggle label {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 34px;
  background-color: #ccc;
  border-radius: 17px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.toggle label::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.toggle input:checked + label {
  background-color: #6000df;
}

.toggle input:checked + label::before {
  transform: translateX(26px);
}

.toggle label:hover {
  background-color: #999;
}

.toggle input:checked + label:hover {
  background-color: rgb(99, 33, 138);
}

.toggle input:active + label {
  background-color: #6f4ea3;
}

.toggle input:checked:active + label {
  background-color: #009b93;
}

.toggle input:focus + label {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}

</style>


================================================
FILE: Toggle-switches/PriyanshuGupta28_old-fly-17.html
================================================
<label class="toggle">
  <input class="input" type="checkbox">
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: switch, light, 3d switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  transition: transform 0.2s ease-in-out;
}

.slider {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #FF3CAC;
  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
  transition: 0.2 ease-in-out;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  transition: transform 0.3s ease-in-out;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.input:checked + .slider {
  background-color: #8BC6EC;
  background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}

.input:checked + .slider:before {
  transform: translateX(26px);
}

</style>


================================================
FILE: Toggle-switches/PriyanshuGupta28_ordinary-ape-65.html
================================================
<div class="checkbox-wrapper-51">
  <input id="cbx-51" type="checkbox">
  <label class="toggle" for="cbx-51">
    <span>
      <svg viewBox="0 0 10 10" height="10px" width="10px">
        <path d="M5,1 L5,1 C2.790861,1 1,2.790861 1,5 L1,5 C1,7.209139 2.790861,9 5,9 L5,9 C7.209139,9 9,7.209139 9,5 L9,5 C9,2.790861 7.209139,1 5,1 L5,9 L5,1 Z"></path>
      </svg>
    </span>
  </label>
</div>



<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: switch, light switch, 3d switch, cool switch */
.checkbox-wrapper-51 input[type="checkbox"] {
  visibility: hidden;
  display: none;
}

.checkbox-wrapper-51 .toggle {
  position: relative;
  display: block;
  width: 42px;
  height: 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0, 0, 0);
}

.checkbox-wrapper-51 .toggle:before {
  content: "";
  position: relative;
  top: 1px;
  left: 1px;
  width: 40px;
  height: 22px;
  display: block;
  background: #c8ccd4;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.checkbox-wrapper-51 .toggle span {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  display: block;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(154,153,153,0.75);
  transition: all 0.2s ease;
}

.checkbox-wrapper-51 .toggle span svg {
  margin: 7px;
  fill: none;
}

.checkbox-wrapper-51 .toggle span svg path {
  stroke: #c8ccd4;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
  transition: all 0.5s linear;
}

.checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle:before {
  background: #1175c7;
}

.checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle span {
  transform: translateX(18px);
}

.checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle span path {
  stroke: #000000;
  stroke-dasharray: 25;
  stroke-dashoffset: 25;
}
</style>


================================================
FILE: Toggle-switches/PriyanshuGupta28_quiet-elephant-56.html
================================================
<div class="checkbox-wrapper-10">
  <input checked="" type="checkbox" id="cb5" class="tgl tgl-flip">
  <label for="cb5" data-tg-on="On" data-tg-off="Off" class="tgl-btn"></label>
</div>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: switch, theme-switch, light switch, 3d button */
.checkbox-wrapper-10 .tgl {
  display: none;
}

.checkbox-wrapper-10 .tgl,
  .checkbox-wrapper-10 .tgl:after,
  .checkbox-wrapper-10 .tgl:before,
  .checkbox-wrapper-10 .tgl *,
  .checkbox-wrapper-10 .tgl *:after,
  .checkbox-wrapper-10 .tgl *:before,
  .checkbox-wrapper-10 .tgl + .tgl-btn {
  box-sizing: border-box;
}

.checkbox-wrapper-10 .tgl::-moz-selection,
  .checkbox-wrapper-10 .tgl:after::-moz-selection,
  .checkbox-wrapper-10 .tgl:before::-moz-selection,
  .checkbox-wrapper-10 .tgl *::-moz-selection,
  .checkbox-wrapper-10 .tgl *:after::-moz-selection,
  .checkbox-wrapper-10 .tgl *:before::-moz-selection,
  .checkbox-wrapper-10 .tgl + .tgl-btn::-moz-selection,
  .checkbox-wrapper-10 .tgl::selection,
  .checkbox-wrapper-10 .tgl:after::selection,
  .checkbox-wrapper-10 .tgl:before::selection,
  .checkbox-wrapper-10 .tgl *::selection,
  .checkbox-wrapper-10 .tgl *:after::selection,
  .checkbox-wrapper-10 .tgl *:before::selection,
  .checkbox-wrapper-10 .tgl + .tgl-btn::selection {
  background: none;
}

.checkbox-wrapper-10 .tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:after,
  .checkbox-wrapper-10 .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:after {
  left: 0;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:before {
  display: none;
}

.checkbox-wrapper-10 .tgl:checked + .tgl-btn:after {
  left: 50%;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn {
  padding: 2px;
  transition: all 0.2s ease;
  font-family: sans-serif;
  perspective: 100px;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after,
  .checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
  display: inline-block;
  transition: all 0.4s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 4px;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after {
  content: attr(data-tg-on);
  background: #7802c6;
  transform: rotateY(-180deg);
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
  background: #197dff;
  content: attr(data-tg-off);
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:active:before {
  transform: rotateY(-20deg);
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:before {
  transform: rotateY(180deg);
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:after {
  transform: rotateY(0);
  left: 0;
  background: #7e09eb;
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:active:after {
  transform: rotateY(20deg);
}


</style>


================================================
FILE: Toggle-switches/RaspberryBee_calm-deer-81.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by RaspberryBee - Tags: active, switch, on/off */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(182, 182, 182);
  transition: .4s;
  border-radius: 10px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 8px;
  left: 0.3em;
  bottom: 0.3em;
  transform: rotate(270deg);
  background-color: rgb(255, 255, 255);
  transition: .4s;
}

.switch input:checked + .slider {
  background-color: #21cc4c;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

.switch input:checked + .slider:before {
  transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/Ratinax_lucky-puma-4.html
================================================
<label class="switch">
  <input type="checkbox" class="input">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Ratinax - Source: Voxybuns - Tags: minimalist, switch, color */
/* The switch - the box around the slider */
.switch {
  /* Variables */
  --switch_width: 2em;
  --switch_height: 1em;
  --thumb_color: green;
  --track_color: #e8e8e8;
  --track_active_color: #888;
  --outline_color: #000;
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: var(--switch_width);
  height: var(--switch_height);
}

/* Hide default HTML checkbox */
.switch .input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  box-sizing: border-box;
  border: 2px solid var(--outline_color);
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: .15s;
  border-radius: var(--switch_height);
}

.slider:before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  height: var(--switch_height);
  width: var(--switch_height);
  border: 2px solid var(--outline_color);
  border-radius: 100%;
  left: -2px;
  bottom: -2px;
  background-color: var(--thumb_color);
  transform: translateY(-0.2em);
  box-shadow: 0 0.2em 0 var(--outline_color);
  transition: .15s;
}

.input:checked + .slider {
  background-color: var(--track_active_color);
}

.input:focus-visible + .slider {
  box-shadow: 0 0 0 2px var(--track_active_color);
}

/* Raise thumb when hovered */
.input:hover + .slider:before {
  transform: translateY(-0.3em);
  box-shadow: 0 0.3em 0 var(--outline_color);
}

.input:checked + .slider:before {
  transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.2em);
  background-color: red;
}

/* Raise thumb when hovered & checked */
.input:hover:checked + .slider:before {
  transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.3em);
  box-shadow: 0 0.3em 0 var(--outline_color);
}
</style>


================================================
FILE: Toggle-switches/Saiyed-Tanvir_pretty-moose-9.html
================================================
<label class="tgl">
    <input type="checkbox">
    <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Saiyed-Tanvir - Tags: switch, animated, lever */
.tgl {
  position: relative;
  display: inline-block;
  width: 5em;
  height: 1em;
}

.tgl input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 3.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: -1.3em;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px #0009;
  transition: 1s cubic-bezier(0.49, -1.3, 0.45, 2.44);
}

.tgl input:checked + .slider {
  background-color: #2196F3;
}

.tgl input:checked + .slider:before {
  transform: translateX(2.5em) rotateZ(-180deg);
}
</style>


================================================
FILE: Toggle-switches/Shoh2008_average-duck-41.html
================================================
<div class="checkbox-wrapper-8">
  <input type="checkbox" id="cb3-8" class="tgl tgl-skewed">
  <label for="cb3-8" data-tg-on="ON" data-tg-off="OFF" class="tgl-btn"></label>
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: switch */
.checkbox-wrapper-8 .tgl {
  display: none;
}

.checkbox-wrapper-8 .tgl,
  .checkbox-wrapper-8 .tgl:after,
  .checkbox-wrapper-8 .tgl:before,
  .checkbox-wrapper-8 .tgl *,
  .checkbox-wrapper-8 .tgl *:after,
  .checkbox-wrapper-8 .tgl *:before,
  .checkbox-wrapper-8 .tgl + .tgl-btn {
  box-sizing: border-box;
}

.checkbox-wrapper-8 .tgl::-moz-selection,
  .checkbox-wrapper-8 .tgl:after::-moz-selection,
  .checkbox-wrapper-8 .tgl:before::-moz-selection,
  .checkbox-wrapper-8 .tgl *::-moz-selection,
  .checkbox-wrapper-8 .tgl *:after::-moz-selection,
  .checkbox-wrapper-8 .tgl *:before::-moz-selection,
  .checkbox-wrapper-8 .tgl + .tgl-btn::-moz-selection,
  .checkbox-wrapper-8 .tgl::selection,
  .checkbox-wrapper-8 .tgl:after::selection,
  .checkbox-wrapper-8 .tgl:before::selection,
  .checkbox-wrapper-8 .tgl *::selection,
  .checkbox-wrapper-8 .tgl *:after::selection,
  .checkbox-wrapper-8 .tgl *:before::selection,
  .checkbox-wrapper-8 .tgl + .tgl-btn::selection {
  background: none;
}

.checkbox-wrapper-8 .tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-wrapper-8 .tgl + .tgl-btn:after,
  .checkbox-wrapper-8 .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}

.checkbox-wrapper-8 .tgl + .tgl-btn:after {
  left: 0;
}

.checkbox-wrapper-8 .tgl + .tgl-btn:before {
  display: none;
}

.checkbox-wrapper-8 .tgl:checked + .tgl-btn:after {
  left: 50%;
}

.checkbox-wrapper-8 .tgl-skewed + .tgl-btn {
  overflow: hidden;
  transform: skew(-10deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.2s ease;
  font-family: sans-serif;
  background: #888;
}

.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after,
  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
  transform: skew(10deg);
  display: inline-block;
  transition: all 0.2s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after {
  left: 100%;
  content: attr(data-tg-on);
}

.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
  left: 0;
  content: attr(data-tg-off);
}

.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active {
  background: #888;
}

.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active:before {
  left: -10%;
}

.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn {
  background: #86d993;
}

.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:before {
  left: -100%;
}

.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:after {
  left: 0;
}

.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:active:after {
  left: 10%;
}
</style>


================================================
FILE: Toggle-switches/Shoh2008_average-monkey-56.html
================================================
<div class="checkbox-wrapper-5">
  <div class="check">
    <input checked="" id="check-5" type="checkbox">
    <label for="check-5"></label>
  </div>
</div>

<style>
/* From Uiverse.io by Shoh2008 - Tags: switch */
.checkbox-wrapper-5 .check {
  --size: 40px;
  position: relative;
  background: linear-gradient(90deg, #f19af3, #f099b5);
  line-height: 0;
  perspective: 400px;
  font-size: var(--size);
}

.checkbox-wrapper-5 .check input[type="checkbox"],
  .checkbox-wrapper-5 .check label,
  .checkbox-wrapper-5 .check label::before,
  .checkbox-wrapper-5 .check label::after,
  .checkbox-wrapper-5 .check {
  appearance: none;
  display: inline-block;
  border-radius: var(--size);
  border: 0;
  transition: .35s ease-in-out;
  box-sizing: border-box;
  cursor: pointer;
}

.checkbox-wrapper-5 .check label {
  width: calc(2.2 * var(--size));
  height: var(--size);
  background: #d7d7d7;
  overflow: hidden;
}

.checkbox-wrapper-5 .check input[type="checkbox"] {
  position: absolute;
  z-index: 1;
  width: calc(.8 * var(--size));
  height: calc(.8 * var(--size));
  top: calc(.1 * var(--size));
  left: calc(.1 * var(--size));
  background: linear-gradient(45deg, #dedede, #ffffff);
  box-shadow: 0 6px 7px rgba(0,0,0,0.3);
  outline: none;
  margin: 0;
}

.checkbox-wrapper-5 .check input[type="checkbox"]:checked {
  left: calc(1.3 * var(--size));
}

.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label {
  background: transparent;
}

.checkbox-wrapper-5 .check label::before,
  .checkbox-wrapper-5 .check label::after {
  content: "· ·";
  position: absolute;
  overflow: hidden;
  left: calc(.15 * var(--size));
  top: calc(.5 * var(--size));
  height: var(--size);
  letter-spacing: calc(-0.04 * var(--size));
  color: #9b9b9b;
  font-family: "Times New Roman", serif;
  z-index: 2;
  font-size: calc(.6 * var(--size));
  border-radius: 0;
  transform-origin: 0 0 calc(-0.5 * var(--size));
  backface-visibility: hidden;
}

.checkbox-wrapper-5 .check label::after {
  content: "●";
  top: calc(.65 * var(--size));
  left: calc(.2 * var(--size));
  height: calc(.1 * var(--size));
  width: calc(.35 * var(--size));
  font-size: calc(.2 * var(--size));
  transform-origin: 0 0 calc(-0.4 * var(--size));
}

.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::before,
  .checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::after {
  left: calc(1.55 * var(--size));
  top: calc(.4 * var(--size));
  line-height: calc(.1 * var(--size));
  transform: rotateY(360deg);
}

.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label::after {
  height: calc(.16 * var(--size));
  top: calc(.55 * var(--size));
  left: calc(1.6 * var(--size));
  font-size: calc(.6 * var(--size));
  line-height: 0;
}

</style>


================================================
FILE: Toggle-switches/Shoh2008_brown-bulldog-12.html
================================================
<div class="checkbox-wrapper-41">
  <input type="checkbox">
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: switch */
.checkbox-wrapper-41 {
  --size: 100px;
}

.checkbox-wrapper-41 input[type="checkbox"] {
  -webkit-appearance: none;
  width: var(--size);
  height: calc(var(--size) / 2);
  background-color: #fff;
  border: 3px solid #222;
  border-radius: 30px 100px 100px 100px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  outline: none;
  cursor: pointer;
  position: relative;
  transition: all 0.5s;
}

.checkbox-wrapper-41 input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: calc(var(--size) / 2);
  height: calc(var(--size) / 2);
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0.7);
  border: 3px solid #222;
  border-radius: 30px 100px 100px 100px;
  background-color: #fde881;
  box-sizing: border-box;
  transition: all 0.5s;
}

.checkbox-wrapper-41 input[type="checkbox"]:checked {
  background-color: #fde881;
  border-radius: 100px 100px 30px 100px;
}

.checkbox-wrapper-41 input[type="checkbox"]:checked::before {
  left: 50%;
  background-color: #fff;
  border-radius: 100px 100px 30px 100px;
}
</style>


================================================
FILE: Toggle-switches/Shoh2008_cowardly-catfish-27.html
================================================
<div class="checkbox-wrapper-25">
  <input type="checkbox">
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: switch */
.checkbox-wrapper-25 input[type="checkbox"] {
  background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),
                      -webkit-linear-gradient(left, #f66 50%, #6cf 50%);
  background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 15px 0;
  border-radius: 25px;
  box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
                inset 0 0 10px hsla(0,0%,0%,.5),
                0 0 0 1px hsla(0,0%,0%,.1),
                0 -1px 2px 2px hsla(0,0%,0%,.25),
                0 2px 2px 2px hsla(0,0%,100%,.75);
  cursor: pointer;
  height: 25px;
  padding-right: 25px;
  width: 75px;
  -webkit-appearance: none;
  -webkit-transition: .25s;
}

.checkbox-wrapper-25 input[type="checkbox"]:after {
  background-color: #eee;
  background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
  border-radius: 25px;
  box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1),
                inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
                0 1px 3px 1px hsla(0,0%,0%,.5),
                0 0 2px hsla(0,0%,0%,.25);
  content: '';
  display: block;
  height: 25px;
  width: 50px;
}

.checkbox-wrapper-25 input[type="checkbox"]:checked {
  background-position: 0 0, 35px 0;
  padding-left: 25px;
  padding-right: 0;
}
</style>


================================================
FILE: Toggle-switches/Shoh2008_gentle-firefox-59.html
================================================
<div class="checkbox-wrapper-11">
  <input value="2" name="r" type="checkbox" id="02-11">
  <label for="02-11">To-do</label>
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: switch */
.checkbox-wrapper-11 {
  --text: #414856;
  --check: #4F29F0;
  --disabled: #C3C8DE;
  --border-radius: 10px;
  border-radius: var(--border-radius);
  position: relative;
  padding: 5px;
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
}

.checkbox-wrapper-11 label {
  color: var(--text);
  position: relative;
  cursor: pointer;
  display: grid;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  transition: color 0.3s ease;
}

.checkbox-wrapper-11 label::before,
  .checkbox-wrapper-11 label::after {
  content: "";
  position: absolute;
}

.checkbox-wrapper-11 label::before {
  height: 2px;
  width: 8px;
  left: -27px;
  background: var(--check);
  border-radius: 2px;
  transition: background 0.3s ease;
}

.checkbox-wrapper-11 label:after {
  height: 4px;
  width: 4px;
  top: 8px;
  left: -25px;
  border-radius: 50%;
}

.checkbox-wrapper-11 input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  height: 15px;
  width: 15px;
  outline: none;
  border: 0;
  margin: 0 15px 0 0;
  cursor: pointer;
  background: var(--background);
  display: grid;
  align-items: center;
}

.checkbox-wrapper-11 input[type=checkbox]::before, .checkbox-wrapper-11 input[type=checkbox]::after {
  content: "";
  position: absolute;
  height: 2px;
  top: auto;
  background: var(--check);
  border-radius: 2px;
}

.checkbox-wrapper-11 input[type=checkbox]::before {
  width: 0px;
  right: 60%;
  transform-origin: right bottom;
}

.checkbox-wrapper-11 input[type=checkbox]::after {
  width: 0px;
  left: 40%;
  transform-origin: left bottom;
}

.checkbox-wrapper-11 input[type=checkbox]:checked::before {
  -webkit-animation: check-01-11 0.4s ease forwards;
  animation: check-01-11 0.4s ease forwards;
}

.checkbox-wrapper-11 input[type=checkbox]:checked::after {
  -webkit-animation: check-02-11 0.4s ease forwards;
  animation: check-02-11 0.4s ease forwards;
}

.checkbox-wrapper-11 input[type=checkbox]:checked + label {
  color: var(--disabled);
  -webkit-animation: move-11 0.3s ease 0.1s forwards;
  animation: move-11 0.3s ease 0.1s forwards;
}

.checkbox-wrapper-11 input[type=checkbox]:checked + label::before {
  background: var(--disabled);
  -webkit-animation: slice-11 0.4s ease forwards;
  animation: slice-11 0.4s ease forwards;
}

.checkbox-wrapper-11 input[type=checkbox]:checked + label::after {
  -webkit-animation: firework-11 0.5s ease forwards 0.1s;
  animation: firework-11 0.5s ease forwards 0.1s;
}

@-webkit-keyframes move-11 {
  50% {
    padding-left: 8px;
    padding-right: 0px;
  }

  100% {
    padding-right: 4px;
  }
}

@keyframes move-11 {
  50% {
    padding-left: 8px;
    padding-right: 0px;
  }

  100% {
    padding-right: 4px;
  }
}

@-webkit-keyframes slice-11 {
  60% {
    width: 100%;
    left: 4px;
  }

  100% {
    width: 100%;
    left: -2px;
    padding-left: 0;
  }
}

@keyframes slice-11 {
  60% {
    width: 100%;
    left: 4px;
  }

  100% {
    width: 100%;
    left: -2px;
    padding-left: 0;
  }
}

@-webkit-keyframes check-01-11 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0px;
    top: 8px;
    transform: rotate(45deg);
  }

  100% {
    width: 5px;
    top: 8px;
    transform: rotate(45deg);
  }
}

@keyframes check-01-11 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0px;
    top: 8px;
    transform: rotate(45deg);
  }

  100% {
    width: 5px;
    top: 8px;
    transform: rotate(45deg);
  }
}

@-webkit-keyframes check-02-11 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0px;
    top: 8px;
    transform: rotate(-45deg);
  }

  100% {
    width: 10px;
    top: 8px;
    transform: rotate(-45deg);
  }
}

@keyframes check-02-11 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0px;
    top: 8px;
    transform: rotate(-45deg);
  }

  100% {
    width: 10px;
    top: 8px;
    transform: rotate(-45deg);
  }
}

@-webkit-keyframes firework-11 {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
  }
}

@keyframes firework-11 {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
  }
}
</style>


================================================
FILE: Toggle-switches/Shoh2008_light-shrimp-88.html
================================================
<div class="checkbox-wrapper-9">
  <input type="checkbox" id="cb4-9" class="tgl tgl-flat">
  <label for="cb4-9" class="tgl-btn"></label>
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: switch */
.checkbox-wrapper-9 .tgl {
  display: none;
}

.checkbox-wrapper-9 .tgl,
  .checkbox-wrapper-9 .tgl:after,
  .checkbox-wrapper-9 .tgl:before,
  .checkbox-wrapper-9 .tgl *,
  .checkbox-wrapper-9 .tgl *:after,
  .checkbox-wrapper-9 .tgl *:before,
  .checkbox-wrapper-9 .tgl + .tgl-btn {
  box-sizing: border-box;
}

.checkbox-wrapper-9 .tgl::-moz-selection,
  .checkbox-wrapper-9 .tgl:after::-moz-selection,
  .checkbox-wrapper-9 .tgl:before::-moz-selection,
  .checkbox-wrapper-9 .tgl *::-moz-selection,
  .checkbox-wrapper-9 .tgl *:after::-moz-selection,
  .checkbox-wrapper-9 .tgl *:before::-moz-selection,
  .checkbox-wrapper-9 .tgl + .tgl-btn::-moz-selection,
  .checkbox-wrapper-9 .tgl::selection,
  .checkbox-wrapper-9 .tgl:after::selection,
  .checkbox-wrapper-9 .tgl:before::selection,
  .checkbox-wrapper-9 .tgl *::selection,
  .checkbox-wrapper-9 .tgl *:after::selection,
  .checkbox-wrapper-9 .tgl *:before::selection,
  .checkbox-wrapper-9 .tgl + .tgl-btn::selection {
  background: none;
}

.checkbox-wrapper-9 .tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-wrapper-9 .tgl + .tgl-btn:after,
  .checkbox-wrapper-9 .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}

.checkbox-wrapper-9 .tgl + .tgl-btn:after {
  left: 0;
}

.checkbox-wrapper-9 .tgl + .tgl-btn:before {
  display: none;
}

.checkbox-wrapper-9 .tgl:checked + .tgl-btn:after {
  left: 50%;
}

.checkbox-wrapper-9 .tgl-flat + .tgl-btn {
  padding: 2px;
  transition: all 0.2s ease;
  background: #fff;
  border: 4px solid #f2f2f2;
  border-radius: 2em;
}

.checkbox-wrapper-9 .tgl-flat + .tgl-btn:after {
  transition: all 0.2s ease;
  background: #f2f2f2;
  content: "";
  border-radius: 1em;
}

.checkbox-wrapper-9 .tgl-flat:checked + .tgl-btn {
  border: 4px solid #7FC6A6;
}

.checkbox-wrapper-9 .tgl-flat:checked + .tgl-btn:after {
  left: 50%;
  background: #7FC6A6;
}
</style>


================================================
FILE: Toggle-switches/Shoh2008_quiet-donkey-16.html
================================================
<div class="checkbox-wrapper-35">
  <input value="private" name="switch" id="switch" type="checkbox" class="switch">
  <label for="switch">
    <span class="switch-x-text">This is </span>
    <span class="switch-x-toggletext">
      <span class="switch-x-unchecked"><span class="switch-x-hiddenlabel">Unchecked: </span>Off</span>
      <span class="switch-x-checked"><span class="switch-x-hiddenlabel">Checked: </span>On</span>
    </span>
  </label>
</div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: switch */
.checkbox-wrapper-35 .switch {
  display: none;
}

.checkbox-wrapper-35 .switch + label {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: #78768d;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 15px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-wrapper-35 .switch + label::before,
  .checkbox-wrapper-35 .switch + label::after {
  content: '';
  display: block;
}

.checkbox-wrapper-35 .switch + label::before {
  background-color: #05012c;
  border-radius: 500px;
  height: 15px;
  margin-right: 8px;
  -webkit-transition: background-color 0.125s ease-out;
  transition: background-color 0.125s ease-out;
  width: 25px;
}

.checkbox-wrapper-35 .switch + label::after {
  background-color: #fff;
  border-radius: 13px;
  box-shadow: 0 3px 1px 0 rgba(37, 34, 71, 0.05), 0 2px 2px 0 rgba(37, 34, 71, 0.1), 0 3px 3px 0 rgba(37, 34, 71, 0.05);
  height: 13px;
  left: 1px;
  position: absolute;
  top: 1px;
  -webkit-transition: -webkit-transform 0.125s ease-out;
  transition: -webkit-transform 0.125s ease-out;
  transition: transform 0.125s ease-out;
  transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out;
  width: 13px;
}

.checkbox-wrapper-35 .switch + label .switch-x-text {
  display: block;
  margin-right: .3em;
}

.checkbox-wrapper-35 .switch + label .switch-x-toggletext {
  display: block;
  font-weight: bold;
  height: 15px;
  overflow: hidden;
  position: relative;
  width: 25px;
}

.checkbox-wrapper-35 .switch + label .switch-x-unchecked,
  .checkbox-wrapper-35 .switch + label .switch-x-checked {
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
  transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
  transition: transform 0.125s ease-out, opacity 0.125s ease-out;
  transition: transform 0.125s ease-out, opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
}

.checkbox-wrapper-35 .switch + label .switch-x-unchecked {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

.checkbox-wrapper-35 .switch + label .switch-x-checked {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.checkbox-wrapper-35 .switch + label .switch-x-hiddenlabel {
  position: absolute;
  visibility: hidden;
}

.checkbox-wrapper-35 .switch:checked + label::before {
  background-color: #ffb500;
}

.checkbox-wrapper-35 .switch:checked + label::after {
  -webkit-transform: translate3d(10px, 0, 0);
  transform: translate3d(10px, 0, 0);
}

.checkbox-wrapper-35 .switch:checked + label .switch-x-unchecked {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

.checkbox-wrapper-35 .switch:checked + label .switch-x-checked {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}
</style>


================================================
FILE: Toggle-switches/Shoh2008_splendid-rat-98.html
================================================
<label class="switch">
  <input type="checkbox" class="input">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Shoh2008 - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch .input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2e2e2e;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: #4e4;
  transition: .4s;
}

.input:checked + .slider {
  background-color: #000;
}

.input:focus + .slider {
  box-shadow: 0 0 1px #000;
}

.input:checked + .slider:before {
  transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/Shubh0408_afraid-octopus-54.html
================================================
<!-- From Uiverse.io by Shubh0408  - Tags: switch -->
<label
  class="switch cursor-pointer relative flex w-[6.7rem] scale-75 overflow-hidden p-2"
>
  <input type="checkbox" name="" class="peer hidden" />
  <div
    class="absolute -right-[6.5rem] z-[1] flex h-12 w-24 skew-x-12 items-center justify-center text-lg duration-500 peer-checked:right-1"
  >
    <span class="-skew-x-12">ON</span>
  </div>
  <div
    class="z-0 h-12 w-24 -skew-x-12 border border-black duration-500 peer-checked:skew-x-12 peer-checked:bg-green-500"
  ></div>
  <div
    class="absolute left-[0.3rem] flex h-12 w-24 -skew-x-12 items-center justify-center text-lg duration-500 peer-checked:-left-[6.5rem]"
  >
    <span class="skew-x-12">OFF</span>
  </div>
</label>


    

================================================
FILE: Toggle-switches/Shubh0408_chilly-cobra-48.html
================================================
<!-- From Uiverse.io by Shubh0408  - Tags: switch, toggle switch, tailwindcss -->
<label
  class="relative inline-block h-8 w-14 cursor-pointer rounded-full bg-gray-300 transition [-webkit-tap-highlight-color:_transparent] has-[:checked]:bg-gray-900"
>
  <input class="peer sr-only" id="AcceptConditions" type="checkbox" />
  <span
    class="absolute inset-y-0 start-0 m-1 size-6 rounded-full bg-gray-300 ring-[6px] ring-inset ring-white transition-all peer-checked:start-8 peer-checked:w-2 peer-checked:bg-white peer-checked:ring-transparent"
  ></span>
</label>


    

================================================
FILE: Toggle-switches/Shubh0408_giant-swan-43.html
================================================
<!-- From Uiverse.io by Shubh0408  - Tags: switch -->
<label class="switch">
  <input class="peer hidden" type="checkbox" />
  <span
    class="slider absolute h-5 w-5 translate-x-0.5 translate-y-0.5 rounded-md border-2 border-black bg-blue-500 shadow-[inset_2px_3px_2px] duration-700 peer-checked:translate-x-[1.6rem] peer-checked:border-gray-200 peer-checked:bg-white peer-checked:shadow-[inset_-2px_-2px_3px]"
  ></span>
  <div
    class="h-6 w-12 rounded-lg border-2 border-black shadow-[2px_3px_2px] duration-700 peer-checked:bg-blue-500"
  ></div>
</label>


    

================================================
FILE: Toggle-switches/SmookyDev_tricky-husky-54.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: glassmorphism, 3d, switch, smooth, radio, light&dark, click effect, tailwind -->
<label class="relative inline-flex items-center cursor-pointer">
  <input class="sr-only peer" value="" type="checkbox" />
  <div
    class="w-24 h-12 rounded-full ring-0 peer duration-500 outline-none bg-gray-200 overflow-hidden before:flex before:items-center before:justify-center after:flex after:items-center after:justify-center before:content-['☀️'] before:absolute before:h-10 before:w-10 before:top-1/2 before:bg-white before:rounded-full before:left-1 before:-translate-y-1/2 before:transition-all before:duration-700 peer-checked:before:opacity-0 peer-checked:before:rotate-90 peer-checked:before:-translate-y-full shadow-lg shadow-gray-400 peer-checked:shadow-lg peer-checked:shadow-gray-700 peer-checked:bg-[#383838] after:content-['🌑'] after:absolute after:bg-[#1d1d1d] after:rounded-full after:top-[4px] after:right-1 after:translate-y-full after:w-10 after:h-10 after:opacity-0 after:transition-all after:duration-700 peer-checked:after:opacity-100 peer-checked:after:rotate-180 peer-checked:after:translate-y-0"
  ></div>
</label>


    

================================================
FILE: Toggle-switches/SouravBandyopadhyay_empty-grasshopper-29.html
================================================
    <label class="toggle-button-cover">
      <div id="button-2" class="button r">
        <input class="checkbox" type="checkbox">
        <div class="knobs"></div>
        <div class="layer"></div>
      </div>
    </label>
<style>
/* From Uiverse.io by SouravBandyopadhyay - Tags: simple, 3d, action, red, button, switch, input, toggle switch */
.toggle-button-cover {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 140px;
  box-sizing: border-box;
}

.button-cover:before {
  counter-increment: button-counter;
  content: counter(button-counter);
  position: absolute;
  right: 0;
  bottom: 0;
  color: #d7e3e3;
  font-size: 12px;
  line-height: 1;
  padding: 5px;
}

.button-cover,
.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  position: relative;
  top: 50%;
  width: 74px;
  height: 36px;
  margin: -20px auto 0 auto;
  overflow: hidden;
}

.button.r,
.button.r .layer {
  border-radius: 100px;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: #ebf7fc;
  transition: 0.3s ease all;
  z-index: 1;
}

#button-2 .knobs:before,
#button-2 .knobs:after {
  content: 'YES';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03f480;
  border-radius: 50%;
  transition: 0.3s ease all;
}

#button-2 .knobs:before {
  content: 'YES';
}

#button-2 .knobs:after {
  content: 'NO';
}

#button-2 .knobs:after {
  right: -28px;
  left: auto;
  background-color: #f44336;
}

#button-2 .checkbox:checked + .knobs:before {
  left: -28px;
}

#button-2 .checkbox:checked + .knobs:after {
  right: 4px;
}

#button-2 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}

</style>


================================================
FILE: Toggle-switches/Subaashbala_big-cougar-5.html
================================================
<label class="switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by Subaashbala  - Tags: skeuomorphism, switch, on, off, click animation */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 5em;
  height: 2.25em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e7eff9;
  outline: 1px solid #f3f8fe;
  box-shadow: 0 4px 5px #f3f8fe inset, 0 4px 5px #c8d5e6;
  transition: 0.4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "off";
  font-size: 0.85em;
  color: #d2d6d8;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2em;
  min-width: 2em;
  border-radius: 20px;
  left: 0.35em;
  bottom: 0.3em;
  background-color: transparent;
  outline: 2px solid #d2d6d8;
  transition: 0.4s;
}

.switch input:checked + .slider:before {
  content: "on";
  background-color: #d2d6d8;
  color: white;
  transform: translateX(3.1em);
}

</style>
    

================================================
FILE: Toggle-switches/Subaashbala_hard-monkey-38.html
================================================
<label class="switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by Subaashbala  - Tags: switch */
/* The switch - the box around the slider */
.switch {
  --INITIAL-SWITCH-TRACK-COLOR: #ffdd95;
  --INITIAL-THUMB-COLOR: #ff9843;
  --OVERALL-TRANSITION-DURATION: 500ms; /* Overall transition speed */
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.75em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--INITIAL-SWITCH-TRACK-COLOR);
  transition: var(--OVERALL-TRANSITION-DURATION);
  border-radius: 30px;
  overflow: hidden;
}

/* Thumb */
.slider:before {
  position: absolute;
  content: "";
  height: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
  left: 0;
  bottom: 0;
  background-color: var(--INITIAL-THUMB-COLOR);
  transition: var(--OVERALL-TRANSITION-DURATION);
}

/* Actions to be performed when the switch is TOGGLED ON */
.switch input:checked + .slider::before {
  transform-origin: left;
  animation: wobble var(--OVERALL-TRANSITION-DURATION);
  transform: scale(1, 1) translateX(2rem);
}

/* Actions to be performed when the switch is TOGGLED OFF */
.switch input:not(:checked) + .slider::before {
  transform-origin: right;
  animation: reverse-wobble var(--OVERALL-TRANSITION-DURATION);
}

@keyframes wobble {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(3, 1);
  }
  100% {
    transform: scale(1, 1) translateX(2rem);
  }
}

@keyframes reverse-wobble {
  0% {
    transform: scale(1, 1) translateX(2rem);
  }
  50% {
    transform: scale(3, 1);
  }
  100% {
    transform: scale(1, 1) translateX(0);
  }
}

</style>
    

================================================
FILE: Toggle-switches/Subaashbala_quiet-ape-66.html
================================================
<label class="switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by Subaashbala  - Tags: switch */
/* The switch - the box around the slider */
.switch {
  --INITIAL-SWITCH-TRACK-COLOR: #fffbeb;
  --INITIAL-THUMB-COLOR: #ff5722;
  --OVERALL-TRANSITION-DURATION: 500ms; /* Overall transition speed */
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.75em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--INITIAL-SWITCH-TRACK-COLOR);
  transition: var(--OVERALL-TRANSITION-DURATION);
  border-radius: 30px;
  overflow: hidden;
}

/* Thumb */
.slider:before {
  position: absolute;
  content: "";
  height: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
  left: 0;
  bottom: 0;
  background-color: var(--INITIAL-THUMB-COLOR);
  transition: var(--OVERALL-TRANSITION-DURATION);
}

.switch input:checked + .slider {
  background-color: var(--INITIAL-THUMB-COLOR);
}

/* Actions to be performed when the switch is TOGGLED ON */
.switch input:checked + .slider::before {
  transform-origin: left;
  background-color: var(--INITIAL-SWITCH-TRACK-COLOR);
  animation: wobble var(--OVERALL-TRANSITION-DURATION)
    cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: scale(1, 1) translateX(2rem);
}

/* Actions to be performed when the switch is TOGGLED OFF */
.switch input:not(:checked) + .slider::before {
  transform-origin: right;
  animation: reverse-wobble var(--OVERALL-TRANSITION-DURATION)
    cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes wobble {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(3, 1);
  }
  100% {
    transform: scale(1, 1) translateX(2rem);
  }
}

@keyframes reverse-wobble {
  0% {
    transform: scale(1, 1) translateX(2rem);
  }
  50% {
    transform: scale(3, 1);
  }
  100% {
    transform: scale(1, 1) translateX(0);
  }
}

</style>
    

================================================
FILE: Toggle-switches/Subaashbala_unlucky-turkey-88.html
================================================
<label class="switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by Subaashbala  - Tags: skeuomorphism, minimalist, switch, click animation */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 0.25em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: hotpink;
  transition: 0.4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "O";
  display: grid;
  text-align: center;
  vertical-align: middle;
  place-items: center;
  font-size: 1em;
  font-weight: 900;
  width: 2em;
  aspect-ratio: 1;
  border-radius: 50%;
  bottom: 0.3em;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  color: hotpink;
  background-color: pink;
  border: 1px solid rgba(255, 105, 180, 0.507);
  transition: 0.4s;
}

.switch input:checked + .slider {
  background-color: teal;
}

.switch input:checked + .slider:before {
  content: "|";
  color: teal;
  background: paleturquoise;
  border: 1px solid rgba(0, 128, 128, 0.514);
  transform: translate(1.75em, -50%) rotateZ(360deg);
}

</style>
    

================================================
FILE: Toggle-switches/SujitAdroja_nice-otter-97.html
================================================
<label class="switch">
  <input class="inpt" type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by SujitAdroja - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch .inpt {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #9dc4e6;
  transition: .4s;
  border-radius: 30px;
  box-shadow: inset 3px 3px 5px rgba(0,0,0);
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 50px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition: .4s;
}

.inpt:checked + .slider {
  background-color: #2196F3;
}

.inpt:checked + .slider:before {
  transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/TahaShameli_nice-starfish-82.html
================================================
<label class="switch">
  <input type="checkbox" />
  <span class="slider">
    <span class="circle">
      <span class="shine shine-1"></span>
      <span class="shine shine-2"></span>
      <span class="shine shine-3"></span>
      <span class="shine shine-4"></span>
      <span class="shine shine-5"></span>
      <span class="shine shine-6"></span>
      <span class="shine shine-7"></span>
      <span class="shine shine-8"></span>
      <span class="moon"></span>
    </span>
  </span>
</label>

<style>
/* From Uiverse.io by TahaShameli  - Tags:  */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  transition: 0.4s;
  border-radius: 30px;
  overflow: hidden;
}

.circle {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: #fff000;
  transform: rotate(360deg) translateX(0);
  transition: 0.4s;
}

.switch input:checked + .slider .circle {
  transform: rotate(0deg) translateX(1.5em) !important;
}

.switch input:checked + .slider .circle .shine {
  transform: translate(0%, 0%) !important;
}

.switch input:checked + .slider .circle .moon {
  left: -10%;
  opacity: 1;
  transform: translateY(-60%);
}

.moon {
  position: absolute;
  left: -100%;
  top: 50%;
  opacity: 0;
  background-color: #333;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 99999px;
  transform: translateY(-50%);
  transition: all 0.4s;
}

.shine {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.25rem;
  height: 0.25rem;
  background-color: #fff000;
  border-radius: 1rem;
  transition: all 0.4s;
}

.shine-1 {
  transform: translate(-50%, -375%);
}
.shine-2 {
  transform: translate(175%, -275%);
}
.shine-3 {
  transform: translate(275%, -50%);
}
.shine-4 {
  transform: translate(175%, 175%);
}
.shine-5 {
  transform: translate(-50%, 275%);
}
.shine-6 {
  transform: translate(-275%, 175%);
}
.shine-7 {
  transform: translate(-375%, -50%);
}
.shine-8 {
  transform: translate(-275%, -275%);
}

</style>
    

================================================
FILE: Toggle-switches/The-Best-Codes_bright-rabbit-33.html
================================================
<div class="toggle-switch">
  <input class="toggle-input" id="toggle" type="checkbox" />
  <label class="toggle-label" for="toggle"></label>
</div>

<style>
/* From Uiverse.io by The-Best-Codes  - Tags: material design, animation, green, switch, checkbox, modern, css, css effect */
.toggle-switch {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 34px;
}

.toggle-input {
  display: none;
}

.toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 34px;
  background-color: #ccc;
  border-radius: 34px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-label:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}

.toggle-input:checked + .toggle-label {
  background-color: #4fbf26;
}

.toggle-input:checked + .toggle-label:before {
  transform: translateX(26px);
}

</style>
    

================================================
FILE: Toggle-switches/TimTrayler_quiet-swan-35.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by TimTrayler - Tags: green, switch */
.switch {
 --secondary-container: #3a4b39;
 --primary: #84da89;
 font-size: 17px;
 position: relative;
 display: inline-block;
 width: 3.7em;
 height: 1.8em;
}

.switch input {
 display: none;
 opacity: 0;
 width: 0;
 height: 0;
}

.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #313033;
 transition: .2s;
 border-radius: 30px;
}

.slider:before {
 position: absolute;
 content: "";
 height: 1.4em;
 width: 1.4em;
 border-radius: 20px;
 left: 0.2em;
 bottom: 0.2em;
 background-color: #aeaaae;
 transition: .4s;
}

input:checked + .slider::before {
 background-color: var(--primary);
}

input:checked + .slider {
 background-color: var(--secondary-container);
}

input:focus + .slider {
 box-shadow: 0 0 1px var(--secondary-container);
}

input:checked + .slider:before {
 transform: translateX(1.9em);
}
</style>


================================================
FILE: Toggle-switches/TroyRandall_curvy-eagle-61.html
================================================
<div class="comment-react">
  <button>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="22"
      height="22"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M19.4626 3.99415C16.7809 2.34923 14.4404 3.01211 13.0344 4.06801C12.4578 4.50096 12.1696 4.71743 12 4.71743C11.8304 4.71743 11.5422 4.50096 10.9656 4.06801C9.55962 3.01211 7.21909 2.34923 4.53744 3.99415C1.01807 6.15294 0.221721 13.2749 8.33953 19.2834C9.88572 20.4278 10.6588 21 12 21C13.3412 21 14.1143 20.4278 15.6605 19.2834C23.7783 13.2749 22.9819 6.15294 19.4626 3.99415Z"
        stroke="#707277"
        stroke-width="2"
        stroke-linecap="round"
        fill="#707277"
      ></path>
    </svg>
  </button>

  <span>14</span>
</div>

<style>
/* From Uiverse.io by TroyRandall  - Tags: icon, button, switch, like, heart */
/* The switch - the box around the slider */
.comment-react {
  margin: 0;
  display: flex;
  justify-content: center;
  padding: 5px;
  background-color: #f1f1f1;
  border-radius: 5px;
  scale: 1.5;
  width: 100px;
}

.comment-react button {
  width: 35px;
  height: 35px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  outline: none;
}

.comment-react button:after {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  left: -3px;
  top: -3px;
  background-color: #f5356e;
  border-radius: 50%;
  z-index: 0;
  transform: scale(0);
}

.comment-react button svg {
  position: relative;
  z-index: 9;
}

.comment-react button:hover:after {
  animation: ripple 0.6s ease-in-out forwards;
}

.comment-react button:hover svg {
  fill: #f5356e;
}

.comment-react button:hover svg path {
  stroke: #f5356e;
  fill: #f5356e;
}

.comment-react hr {
  width: 80%;
  height: 1px;
  background-color: #dfe1e6;
  margin: auto;
  border: 0;
}

.comment-react span {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  font-size: 20px;
  font-weight: 600;
  color: #707277;
  padding-right: 10px;
  text-align: center;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

</style>
    

================================================
FILE: Toggle-switches/Tsiangana_massive-snail-12.html
================================================
<label class="switch">
  <input type="checkbox" />
  <span class="slider">
    <div class="fug">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="18"
        height="18"
        fill="currentColor"
        class="nav bi bi-rocket-takeoff-fill"
        viewBox="0 0 16 16"
      >
        <path
          d="M12.17 9.53c2.307-2.592 3.278-4.684 3.641-6.218.21-.887.214-1.58.16-2.065a3.578 3.578 0 0 0-.108-.563 2.22 2.22 0 0 0-.078-.23V.453c-.073-.164-.168-.234-.352-.295a2.35 2.35 0 0 0-.16-.045 3.797 3.797 0 0 0-.57-.093c-.49-.044-1.19-.03-2.08.188-1.536.374-3.618 1.343-6.161 3.604l-2.4.238h-.006a2.552 2.552 0 0 0-1.524.734L.15 7.17a.512.512 0 0 0 .433.868l1.896-.271c.28-.04.592.013.955.132.232.076.437.16.655.248l.203.083c.196.816.66 1.58 1.275 2.195.613.614 1.376 1.08 2.191 1.277l.082.202c.089.218.173.424.249.657.118.363.172.676.132.956l-.271 1.9a.512.512 0 0 0 .867.433l2.382-2.386c.41-.41.668-.949.732-1.526l.24-2.408Zm.11-3.699c-.797.8-1.93.961-2.528.362-.598-.6-.436-1.733.361-2.532.798-.799 1.93-.96 2.528-.361.599.599.437 1.732-.36 2.531Z"
        ></path>
        <path
          d="M5.205 10.787a7.632 7.632 0 0 0 1.804 1.352c-1.118 1.007-4.929 2.028-5.054 1.903-.126-.127.737-4.189 1.839-5.18.346.69.837 1.35 1.411 1.925Z"
        ></path>
      </svg>
    </div>

    <div class="stars">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="4"
        height="4"
        fill="#fff"
        class="star bi bi-star-fill"
        viewBox="0 0 16 16"
      >
        <path
          d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
        ></path>
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="4"
        height="4"
        fill="#fff"
        class="star bi bi-star-fill"
        viewBox="0 0 16 16"
      >
        <path
          d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
        ></path>
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="4"
        height="4"
        fill="#fff"
        class="star bi bi-star-fill"
        viewBox="0 0 16 16"
      >
        <path
          d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
        ></path>
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="4"
        height="4"
        fill="#fff"
        class="star bi bi-star-fill"
        viewBox="0 0 16 16"
      >
        <path
          d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
        ></path>
      </svg>
    </div>
  </span>
</label>

<style>
/* From Uiverse.io by Tsiangana  - Tags: switch, space, futuristic, animated */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 5px;
  background-color: rgb(199, 219, 215);
  transition: 0.4s;
  border-radius: 30px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  border: 1px solid #fff;
}

.slider .fug .nav {
  position: absolute;
  height: 1.4em;
  width: 1.5em;
  left: 0.3em;
  bottom: 0.3em;
  transition: 0.4s;
  z-index: 10;
  transform: rotate(45deg);
  fill: #fff;
}

.switch input:checked + .slider {
  background-color: #2b4360;
}

.switch input:focus + .slider {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.switch input:checked + .slider .fug .nav {
  transition: 0.4s;
  transform: translateX(1.3em) rotate(45deg);
  padding: 3px;
  animation: 4s nav linear infinite;
}

@keyframes nav {
  0% {
    transform: translateX(1.3em) rotate(45deg);
  }
  10% {
    transform: translateX(1.1em) rotate(45deg);
  }
  30% {
    transform: translateX(1.2em) rotate(45deg);
  }
  50% {
    transform: translateX(1em) rotate(45deg);
  }
  70% {
    transform: translateX(1.2em) rotate(45deg);
  }
  80% {
    transform: translateX(1em) rotate(45deg);
  }
  90% {
    transform: translateX(1.2em) rotate(45deg);
  }
  100% {
    transform: translateX(1.3em) rotate(45deg);
  }
}

.star {
  opacity: 0;
  transition: 0.2s linear;
}

.switch input:checked + .slider .star {
  opacity: 1;
  transition: 0.2s linear;
  animation: 2s piscar linear infinite;
}

.star:nth-last-child(1) {
  position: absolute;
  top: 7px;
  left: 13px;
}
.star:nth-last-child(2) {
  position: absolute;
  top: 14px;
  left: 19px;
}
.star:nth-last-child(3) {
  position: absolute;
  top: 18px;
  left: 9px;
}
.star:nth-last-child(4) {
  position: absolute;
  top: 23px;
  left: 24px;
}

@keyframes piscar {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

</style>
    

================================================
FILE: Toggle-switches/Type-Delta_happy-mule-45.html
================================================
<label
  for="themeToggle"
  class="themeToggle st-sunMoonThemeToggleBtn"
  type="checkbox"
>
  <input type="checkbox" id="themeToggle" class="themeToggleInput" />
  <svg
    width="18"
    height="18"
    viewBox="0 0 20 20"
    fill="currentColor"
    stroke="none"
  >
    <mask id="moon-mask">
      <rect x="0" y="0" width="20" height="20" fill="white"></rect>
      <circle cx="11" cy="3" r="8" fill="black"></circle>
    </mask>
    <circle
      class="sunMoon"
      cx="10"
      cy="10"
      r="8"
      mask="url(#moon-mask)"
    ></circle>
    <g>
      <circle class="sunRay sunRay1" cx="18" cy="10" r="1.5"></circle>
      <circle class="sunRay sunRay2" cx="14" cy="16.928" r="1.5"></circle>
      <circle class="sunRay sunRay3" cx="6" cy="16.928" r="1.5"></circle>
      <circle class="sunRay sunRay4" cx="2" cy="10" r="1.5"></circle>
      <circle class="sunRay sunRay5" cx="6" cy="3.1718" r="1.5"></circle>
      <circle class="sunRay sunRay6" cx="14" cy="3.1718" r="1.5"></circle>
    </g>
  </svg>
</label>

<style>
/* From Uiverse.io by Type-Delta  - Tags: animation, minimalist, theme-switch, light&dark, toggle switch */
/* a clone from joshwcomeau.com 
 * but this version runs on pure CSS
 */

.themeToggle {
  color: #bbb;
  width: 3em;
}

.st-sunMoonThemeToggleBtn {
  position: relative;
  cursor: pointer;
}

.st-sunMoonThemeToggleBtn .themeToggleInput {
  opacity: 0;
  width: 100%;
  aspect-ratio: 1;
}

.st-sunMoonThemeToggleBtn svg {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
  transform: rotate(40deg);
}

.st-sunMoonThemeToggleBtn svg .sunMoon {
  transform-origin: center center;
  transition: inherit;
  transform: scale(1);
}

.st-sunMoonThemeToggleBtn svg .sunRay {
  transform-origin: center center;
  transform: scale(0);
}

.st-sunMoonThemeToggleBtn svg mask > circle {
  transition: transform 0.64s cubic-bezier(0.41, 0.64, 0.32, 1.575);
  transform: translate(0px, 0px);
}

.st-sunMoonThemeToggleBtn svg .sunRay2 {
  animation-delay: 0.05s !important;
}
.st-sunMoonThemeToggleBtn svg .sunRay3 {
  animation-delay: 0.1s !important;
}
.st-sunMoonThemeToggleBtn svg .sunRay4 {
  animation-delay: 0.17s !important;
}
.st-sunMoonThemeToggleBtn svg .sunRay5 {
  animation-delay: 0.25s !important;
}
.st-sunMoonThemeToggleBtn svg .sunRay5 {
  animation-delay: 0.29s !important;
}

.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg {
  transform: rotate(90deg);
}
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg mask > circle {
  transform: translate(16px, -3px);
}
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunMoon {
  transform: scale(0.55);
}
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunRay {
  animation: showRay1832 0.4s ease 0s 1 forwards;
}

@keyframes showRay1832 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

</style>
    

================================================
FILE: Toggle-switches/Type-Delta_smart-fox-47.html
================================================
<label
  type="checkbox"
  class="reduceMotionToggle st-reduceMotionToggleBtn"
  for="reduceMotionToggle"
>
  <input
    class="reduceMotionToggleInput"
    id="reduceMotionToggle"
    type="checkbox"
  />
  <svg
    stroke-width="0"
    stroke="currentColor"
    fill="currentColor"
    viewBox="0 0 18 18"
    height="18"
    width="18"
  >
    <mask id="lineMask">
      <rect fill="white" height="18" width="18"></rect>
      <rect
        fill="black"
        style="rotate: 30deg;"
        height="16"
        width="4.1"
        y="-5"
        x="9.807"
        class="line"
      ></rect>
    </mask>
    <rect
      style="rotate: 30deg;"
      height="13"
      width="1.3"
      y="-3.3"
      x="11.3"
      class="line"
    ></rect>
    <g mask="url(#lineMask)">
      <circle
        style="--_toCenterXOffset: 5.76px;--_appearOffset: -.1s;"
        fill="none"
        stroke-width=".1"
        r="2.95"
        cy="9"
        cx="3.24"
        class="ballTrace"
      ></circle>
      <circle
        style="--_toCenterXOffset: 3px;--_appearOffset: .02s;"
        fill="none"
        stroke-width=".2"
        r="2.9"
        cy="9"
        cx="6"
        class="ballTrace"
      ></circle>
      <circle
        style="--_toCenterXOffset: 0px;--_appearOffset: .07s;"
        fill="none"
        stroke-width=".3"
        r="2.8"
        cy="9"
        cx="9"
        class="ballTrace"
      ></circle>
      <circle
        style="--_toCenterXOffset: -2.75px;--_appearOffset: .13s;"
        fill="none"
        stroke-width=".4"
        r="2.75"
        cy="9"
        cx="11.75"
        class="ballTrace"
      ></circle>
      <circle
        style="--_toCenterXOffset: -5.7px;"
        r="3"
        cy="9"
        cx="14.7"
        class="ball"
      ></circle>
    </g>
  </svg>
</label>

<style>
/* From Uiverse.io by Type-Delta  - Tags: animation, minimalist, switch, toggle switch */
/* design inspired by icon from thenounproject.com */

.reduceMotionToggle {
  width: 4em;
  height: auto;
  color: #bbb;
}

.st-reduceMotionToggleBtn {
  position: relative;
  cursor: pointer;
}

.st-reduceMotionToggleBtn .reduceMotionToggleInput {
  opacity: 0;
  width: inherit;
  aspect-ratio: 1;
}

.st-reduceMotionToggleBtn svg {
  position: absolute;
  left: 0;
  width: inherit;
  height: inherit;
}
.st-reduceMotionToggleBtn svg .line {
  transform: scaleX(0);
}

.st-reduceMotionToggleBtn
  .reduceMotionToggleInput:not(:checked)
  + svg
  .ballTrace {
  animation: ballTrace_toggleMotionOff9371A 0.3s ease 0s 1 forwards,
    ballTrace_toggleMotionOff9371B 0.1s steps(2, end)
      calc(0.32s + var(--_appearOffset)) 1 forwards;
}
.st-reduceMotionToggleBtn .reduceMotionToggleInput:not(:checked) + svg .ball {
  animation: ball_toggleMotionOn9371A 0.3s ease 0s 1 forwards,
    ball_toggleMotionOn9371B 0.4s cubic-bezier(0.165, 0.84, 0.45, 1.11) 0.3s 1
      forwards;
}

.st-reduceMotionToggleBtn .reduceMotionToggleInput:checked + svg circle {
  animation: ball_toggleMotionOff9371 0.9s linear 0s 1 forwards;
}

.st-reduceMotionToggleBtn .reduceMotionToggleInput:checked + svg .line {
  animation: line_toggleMotionOff9371 0.32s cubic-bezier(0.075, 0.82, 0.165, 1)
    0.47s 1 forwards;
}

@keyframes ball_toggleMotionOff9371 {
  0% {
    transform: translateX(0px);
  }
  6.66% {
    transform: translateX(calc(var(--_toCenterXOffset) * 0.45));
  }
  13.33% {
    transform: translateX(calc(var(--_toCenterXOffset) * 0.77));
  }
  20% {
    transform: translateX(calc(var(--_toCenterXOffset) * 0.9));
  }
  26.66% {
    transform: translateX(calc(var(--_toCenterXOffset) * 0.94));
  }
  33.33% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.965 + 1px), 2px);
  }
  35% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.988), 1px);
  }
  37% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.991 + 1px), -1px);
  }
  39% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.995 - 1px), -2px);
  }
  41% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.999 + 1px), -1px);
  }
  43% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.75), 1px);
  }
  45% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);
  }
  100% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);
  }
}

@keyframes line_toggleMotionOff9371 {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes ball_toggleMotionOn9371A {
  0% {
    transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);
  }
  100% {
    transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);
  }
}

@keyframes ball_toggleMotionOn9371B {
  0% {
    transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes ballTrace_toggleMotionOff9371A {
  0% {
    opacity: 1;
    transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);
  }
  99.9% {
    opacity: 1;
    transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);
  }
}
@keyframes ballTrace_toggleMotionOff9371B {
  0% {
    opacity: 0;
    transform: translate(0px, 0px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}

</style>
    

================================================
FILE: Toggle-switches/Uncannypotato69_unlucky-sheep-74.html
================================================
<!-- From Uiverse.io by Uncannypotato69  - Tags: neumorphism, black, switch, toggle, toggle switch, tailwindcss, FDMM, FoundDesignMadeMine -->
<label
  class="relative h-[3em] w-[6em] rounded-full bg-[hsl(0,0%,7%)] shadow-[0px_2px_4px_0px_rgb(18,18,18,0.25),0px_4px_8px_0px_rgb(18,18,18,0.35)]"
>
  <span
    class="absolute inset-[0.1em] rounded-full border-[1px] border-[hsl(0,0%,25%)]"
  ></span>
  <div
    class="absolute left-[0.5em] top-1/2 flex h-[2em] w-[2em] -translate-y-1/2 items-center justify-center rounded-full bg-white shadow-[inset_0px_2px_2px_0px_hsl(0,0%,85%)]"
  >
    <div
      class="h-[1.5em] w-[1.5em] rounded-full bg-[hsl(0,0%,7%)] shadow-[0px_2px_2px_0px_hsl(0,0%,85%)]"
    ></div>
  </div>
  <div
    class="absolute right-[0.5em] top-1/2 h-[0.25em] w-[1.5em] -translate-y-1/2 rounded-full bg-[hsl(0,0%,50%)] shadow-[inset_0px_2px_1px_0px_hsl(0,0%,40%)]"
  ></div>
  <input type="checkbox" name="" id="" class="peer h-[1em] w-[1em] opacity-0" />
  <span
    class="absolute left-[0.25em] top-1/2 flex h-[2.5em] w-[2.5em] -translate-y-1/2 items-center justify-center rounded-full bg-[rgb(26,26,26)] shadow-[inset_4px_4px_4px_0px_rgba(64,64,64,0.25),inset_-4px_-4px_4px_0px_rgba(16,16,16,0.5)] duration-300 peer-checked:left-[calc(100%-2.75em)]"
  >
    <span class="relative h-full w-full rounded-full">
      <span
        class="absolute inset-[0.1em] rounded-full border-[1px] border-[hsl(0,0%,50%)]"
      ></span>
    </span>
  </span>
</label>


    

================================================
FILE: Toggle-switches/Voxybuns_horrible-shrimp-47.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Voxybuns - Tags: minimalist, switch */
/* The switch - the box around the slider */
.switch {
  /* Variables */
 --switch_width: 2em;
 --switch_height: 1em;
 --thumb_color: #e8e8e8;
 --track_color: #e8e8e8;
 --track_active_color: #888;
 --outline_color: #000;
 font-size: 17px;
 position: relative;
 display: inline-block;
 width: var(--switch_width);
 height: var(--switch_height);
}

/* Hide default HTML checkbox */
.switch input {
 opacity: 0;
 width: 0;
 height: 0;
}

/* The slider */
.slider {
 box-sizing: border-box;
 border: 2px solid var(--outline_color);
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: var(--track_color);
 transition: .15s;
 border-radius: var(--switch_height);
}

.slider:before {
 box-sizing: border-box;
 position: absolute;
 content: "";
 height: var(--switch_height);
 width: var(--switch_height);
 border: 2px solid var(--outline_color);
 border-radius: 100%;
 left: -2px;
 bottom: -2px;
 background-color: var(--thumb_color);
 transform: translateY(-0.2em);
 box-shadow: 0 0.2em 0 var(--outline_color);
 transition: .15s;
}

input:checked + .slider {
 background-color: var(--track_active_color);
}

input:focus-visible + .slider {
 box-shadow: 0 0 0 2px var(--track_active_color);
}

/* Raise thumb when hovered */
input:hover + .slider:before {
 transform: translateY(-0.3em);
 box-shadow: 0 0.3em 0 var(--outline_color);
}

input:checked + .slider:before {
 transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.2em);
}

/* Raise thumb when hovered & checked */
input:hover:checked + .slider:before {
 transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.3em);
 box-shadow: 0 0.3em 0 var(--outline_color);
}
</style>


================================================
FILE: Toggle-switches/WhiteNervosa_ancient-bullfrog-71.html
================================================
<label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by WhiteNervosa - Tags: switch */
.slider {
  background-color: #ffffff2b;
  border-radius: 100px;
  padding: 1px;
  margin: 10px;
  cursor: pointer;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  align-items: center;
  position: relative;
  display: block;
  width: 51px;
  height: 29px;
  box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, rgba(0, 0, 0, 0.21) 0px 0px 0px 24px inset,
        #22cc3f 0px 0px 0px 0px inset, rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;
}

.slider::after {
  content: "";
  display: flex;
  top: 2.3px;
  left: 2px;
  width: 26px;
  height: 26px;
  background-color: #e3e3e3;
  border-radius: 200px;
  position: absolute;
  box-shadow: transparent 0px 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 6px 6px;
  transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
  will-change: left, background-color;
}

.switch input[type="checkbox"]:checked + .slider {
  box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, #22cc3f 0px 0px 0px 2px inset, #22cc3f 0px 0px 0px 24px inset,
        rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;
}

.switch input[type="checkbox"]:checked + .slider::after {
  left: 24px;
}

.switch input[type="checkbox"] {
  display: none;
}
</style>


================================================
FILE: Toggle-switches/WriestTavo_cowardly-eel-69.html
================================================
<label class="switch modern-switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

<style>
/* From Uiverse.io by WriestTavo - Tags: switch, 3d switch, cool switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  transition: 0.4s;
}

.slider.round {
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
  transition: 0.4s;
}

.switch input:checked + .slider:before {
  transform: translateX(26px);
  background-color: #81da8f;
}

.switch input:checked + .slider {
  background-color: #86d993;
}

.switch input:not(:checked) + .slider:before {
  background-color: #e66a6a;
}

.switch input:not(:checked) + .slider {
  background-color: #e57373;
}

/* WriestTavo */
</style>


================================================
FILE: Toggle-switches/WrongCodeU_brave-mule-53.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by WrongCodeU - Tags: simple, green, black, switch, dark */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 30px;
  box-shadow: 0.2em 0.2em black;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition: .4s;
}

.switch input:checked + .slider {
  background-color: #09ff00b0;
}

.switch input:focus + .slider {
  box-shadow: 0.2em 0.2em black;
}

.switch input:checked + .slider:before {
  transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/YaroslavFilipenko_red-turtle-90.html
================================================
<div class="theme_switcher">
  <label id="switch" class="switch">
    <input type="checkbox"><span class="slider round"></span>
  </label>
</div>
<style>
/* From Uiverse.io by YaroslavFilipenko - Tags: slider, input, toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #b1b9c3;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: '';
  height: 30px;
  width: 30px;
  bottom: -5px;
  background: #18333E;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

input:checked+.slider {
  background-color: #b1b9c3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(35px);
  -ms-transform: translateX(35px);
  transform: translateX(35px);
  background: #F2F8FD;
}
</style>


================================================
FILE: Toggle-switches/Yaya12085_bright-dolphin-91.html
================================================
<div class="container">
  <input id="checkbox" name="checkbox" type="checkbox">
  <label class="label" for="checkbox">
            </label>

</div>


<style>
/* From Uiverse.io by Yaya12085 - Tags: 3d, switch */
.container {
}

.label {
  height: 60px;
  width: 120px;
  background-color: #ffffff;
  border-radius: 30px;
  -webkit-box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
    inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
    inset 0 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
    inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
    inset 0 0 0 3px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
}

.label:hover {
  -webkit-transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
  transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
}

#checkbox:checked ~ .label:hover {
  -webkit-transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
  transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
}

#checkbox {
  display: none;
}

#checkbox:checked ~ .label::before {
  left: 70px;
  background-color: #000000;
  background-image: linear-gradient(315deg, #000000 0%, #414141 70%);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.label::before {
  position: absolute;
  content: "";
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: #000000;
  background-image: linear-gradient(
    130deg,
    #757272 10%,
    #ffffff 11%,
    #726f6f 62%
  );
  left: 10px;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

</style>


================================================
FILE: Toggle-switches/Yaya12085_cold-insect-20.html
================================================
<label class="switch">
  <input type="checkbox">
  <div class="button">
    <span class="icon">
      <svg xml:space="preserve" viewBox="0 0 463 463" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1" fill="#000000"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M259.476,280.364V247.5c0-12.958-10.542-23.5-23.5-23.5s-23.5,10.542-23.5,23.5v29.672 c0,35.757-13.173,70.087-37.094,96.665l-32.981,36.646c-2.771,3.079-2.521,7.821,0.558,10.593c3.078,2.771,7.82,2.521,10.592-0.558 l32.981-36.646c26.403-29.338,40.944-67.231,40.944-106.7V247.5c0-4.687,3.813-8.5,8.5-8.5s8.5,3.813,8.5,8.5v32.864 c0,44.003-16.301,86.167-45.901,118.727l-32.149,35.364c-2.786,3.064-2.56,7.809,0.505,10.595c1.437,1.307,3.242,1.95,5.042,1.95 c2.04,0,4.072-0.827,5.552-2.455l32.148-35.364C241.789,373.854,259.476,328.106,259.476,280.364z"></path> <path d="M291.476,247.5c0-30.603-24.897-55.5-55.5-55.5s-55.5,24.897-55.5,55.5v29.672c0,27.839-10.256,54.566-28.879,75.258 l-23.447,26.053c-2.771,3.079-2.521,7.821,0.558,10.593c3.079,2.771,7.82,2.519,10.592-0.558l23.447-26.053 c21.106-23.451,32.73-53.742,32.73-85.293V247.5c0-22.332,18.168-40.5,40.5-40.5c22.332,0,40.5,18.168,40.5,40.5v32.864 c0,51.979-19.256,101.789-54.223,140.252l-27.125,29.839c-2.787,3.064-2.561,7.809,0.504,10.595c1.437,1.307,3.242,1.95,5.042,1.95 c2.04,0,4.072-0.827,5.552-2.455l27.126-29.839c37.481-41.23,58.123-94.622,58.123-150.342V247.5z"></path> <path d="M323.476,247.5c0-48.248-39.252-87.5-87.5-87.5s-87.5,39.252-87.5,87.5v29.672c0,19.92-7.339,39.045-20.665,53.851 l-21.112,23.458c-2.771,3.079-2.521,7.821,0.558,10.593c3.078,2.771,7.821,2.519,10.592-0.558l21.112-23.458 c15.809-17.565,24.515-40.254,24.515-63.886V247.5c0-39.977,32.523-72.5,72.5-72.5s72.5,32.523,72.5,72.5v32.864 c0,59.958-22.212,117.412-62.545,161.777l-7.507,8.258c-2.786,3.065-2.56,7.809,0.505,10.595c1.437,1.306,3.243,1.95,5.042,1.95 c2.04,0,4.072-0.827,5.552-2.455l7.506-8.258c42.848-47.133,66.446-108.169,66.446-171.867V247.5z"></path> <path d="M116.476,247.5c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5c0-25.255,9.169-49.651,25.819-68.695 c16.495-18.867,39.134-31.205,63.746-34.741c4.1-0.589,6.946-4.391,6.357-8.49c-0.589-4.1-4.394-6.942-8.49-6.357 c-28.16,4.046-54.052,18.15-72.906,39.716C126.962,190.71,116.476,218.613,116.476,247.5z"></path> <path d="M131.476,277.172c0-4.143-3.358-7.5-7.5-7.5s-7.5,3.357-7.5,7.5c0,12.002-4.421,23.523-12.449,32.443l-18.779,20.867 c-2.771,3.078-2.521,7.82,0.558,10.592c1.434,1.29,3.227,1.925,5.015,1.925c2.052,0,4.097-0.838,5.577-2.483l18.779-20.866 C125.687,307.971,131.476,292.886,131.476,277.172z"></path> <path d="M340.755,344.123c-4.009-1.044-8.105,1.351-9.155,5.357c-2.769,10.579-6.213,21.096-10.24,31.258 c-1.526,3.851,0.359,8.21,4.21,9.735c0.907,0.359,1.841,0.529,2.761,0.529c2.985,0,5.808-1.795,6.975-4.739 c4.249-10.725,7.884-21.822,10.806-32.986C347.16,349.271,344.761,345.172,340.755,344.123z"></path> <path d="M315.791,158.632c-3.081-2.771-7.823-2.517-10.592,0.563s-2.517,7.822,0.563,10.591 c22.061,19.832,34.713,48.157,34.713,77.714v32.864c0,12.473-0.86,25.042-2.557,37.359c-0.565,4.104,2.303,7.888,6.406,8.453 c0.347,0.048,0.692,0.071,1.033,0.071c3.688,0,6.903-2.722,7.42-6.478c1.79-12.993,2.698-26.251,2.698-39.406V247.5 C355.476,213.695,341.011,181.304,315.791,158.632z"></path> <path d="M280.729,153.076c1.041,0.496,2.138,0.73,3.219,0.73c2.803,0,5.492-1.579,6.777-4.278c1.781-3.739,0.192-8.215-3.547-9.995 c-10.806-5.145-22.291-8.616-34.136-10.317c-4.106-0.585-7.901,2.258-8.49,6.357s2.257,7.901,6.357,8.49 C261.257,145.55,271.289,148.582,280.729,153.076z"></path> <path d="M235.976,96c-2.806,0-5.644,0.078-8.437,0.232c-4.136,0.228-7.304,3.766-7.076,7.901c0.229,4.136,3.763,7.321,7.902,7.075 c2.519-0.139,5.079-0.209,7.61-0.209c75.266,0,136.5,61.233,136.5,136.5v32.864c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5V247.5 C387.476,163.963,319.513,96,235.976,96z"></path> <path d="M153.972,136.693c1.477,0,2.97-0.436,4.275-1.343c12.478-8.677,26.182-15.155,40.733-19.258 c3.987-1.124,6.308-5.268,5.184-9.254s-5.269-6.304-9.254-5.184c-16.16,4.556-31.376,11.749-45.226,21.379 c-3.401,2.365-4.241,7.039-1.876,10.439C149.265,135.57,151.599,136.693,153.972,136.693z"></path> <path d="M99.476,277.172V247.5c0-34.89,13.213-68.118,37.205-93.565c2.841-3.014,2.702-7.76-0.312-10.602 s-7.761-2.701-10.602,0.312C99.14,171.886,84.476,208.77,84.476,247.5v29.672c0,4.083-1.504,8.002-4.234,11.035l-9.248,10.275 c-2.771,3.079-2.521,7.821,0.558,10.592c1.433,1.291,3.227,1.926,5.015,1.926c2.052,0,4.096-0.837,5.577-2.482l9.248-10.275 C96.605,292.449,99.476,284.966,99.476,277.172z"></path> <path d="M409.951,189.104c-8.226-24.446-21.299-46.531-38.856-65.642c-2.803-3.05-7.547-3.252-10.597-0.449 c-3.05,2.803-3.251,7.547-0.449,10.598c16.127,17.554,28.134,37.834,35.686,60.276c1.054,3.133,3.976,5.11,7.107,5.11 c0.793,0,1.6-0.127,2.393-0.394C409.16,197.282,411.272,193.029,409.951,189.104z"></path> <path d="M295.247,73.822c-3.917-1.341-8.183,0.748-9.524,4.668c-1.341,3.919,0.749,8.183,4.668,9.523 c16.538,5.659,32.065,13.857,46.15,24.369c1.347,1.005,2.92,1.489,4.48,1.489c2.286,0,4.544-1.041,6.017-3.015 c2.478-3.319,1.794-8.019-1.525-10.496C330.176,88.916,313.264,79.986,295.247,73.822z"></path> <path d="M119.442,125.908C150.991,95.659,192.377,79,235.976,79c8.096,0,16.237,0.583,24.196,1.731 c4.103,0.598,7.903-2.252,8.495-6.352c0.592-4.1-2.251-7.902-6.351-8.494C253.648,64.635,244.786,64,235.976,64 c-47.487,0-92.56,18.141-126.915,51.081c-34.248,32.838-54.277,76.905-56.397,124.084c-0.186,4.138,3.018,7.644,7.155,7.829 c0.115,0.006,0.229,0.008,0.343,0.008c3.987,0,7.306-3.14,7.487-7.163C69.594,196.527,87.988,156.066,119.442,125.908z"></path> <path d="M235.976,32c-16.772,0-33.485,1.944-49.674,5.778c-4.031,0.954-6.524,4.996-5.57,9.026c0.955,4.03,4.997,6.524,9.027,5.569 C204.817,48.809,220.366,47,235.976,47c54.996,0,106.332,21.911,144.55,61.695c1.473,1.533,3.439,2.305,5.41,2.305 c1.869,0,3.741-0.694,5.195-2.091c2.987-2.87,3.083-7.618,0.213-10.604c-19.913-20.729-43.304-37.036-69.522-48.465 C294.666,38.002,265.783,32,235.976,32z"></path> <path d="M67.507,125.404c1.372,1.074,3.001,1.595,4.619,1.595c2.227,0,4.431-0.987,5.91-2.876 c21.375-27.302,49.515-48.717,81.377-61.932c3.826-1.587,5.642-5.975,4.055-9.801s-5.977-5.644-9.801-4.055 c-34.241,14.201-64.478,37.21-87.441,66.539C63.672,118.137,64.246,122.851,67.507,125.404z"></path> <path d="M131.983,38.725c1.094,0,2.205-0.24,3.255-0.748C166.816,22.73,200.709,15,235.976,15c18.378,0,36.682,2.162,54.401,6.426 c4.025,0.966,8.077-1.51,9.046-5.537c0.969-4.027-1.51-8.078-5.538-9.047C275.019,2.302,255.535,0,235.976,0 c-37.544,0-73.631,8.232-107.259,24.469c-3.73,1.801-5.294,6.285-3.493,10.015C126.517,37.163,129.195,38.725,131.983,38.725z"></path> <path d="M321.724,31.383c7.732,3.079,15.385,6.619,22.746,10.52c1.119,0.594,2.321,0.875,3.505,0.875 c2.688,0,5.287-1.449,6.633-3.99c1.939-3.66,0.545-8.199-3.115-10.139c-7.837-4.153-15.986-7.922-24.22-11.201 c-3.849-1.533-8.21,0.345-9.743,4.192C315.998,25.488,317.876,29.851,321.724,31.383z"></path> </g> </g></svg>
    </span>
  </div>
</label>
<style>
/* From Uiverse.io by Yaya12085 - Source: https://uiverse.io/Pradeepsaranbishnoi/cuddly-sheep-92 - Tags: animation, 3d, switch, light, svg, fingerprint */
.switch input {
  display: none;
}

.button {
  position: relative;
  background-image: linear-gradient(#ffffff 33%,#414751 58%,#837b52,#c5baa1,#c3adaa);
  border-radius: 50px;
  padding: 6px;
  border: none;
  outline: none;
  box-shadow: 0.1em 0 0 #2726267f inset, -0.1em 0 0 #27262600 inset, 0 0.1em 0 #afa490 inset, 0 -0.1em 0 #ffffff3f, 0 0.2em 0.5em #0000007f, 0 -0.1em 0 #151616 inset, -0.1em -0.2em 0 #ffffff7f inset;
  cursor: pointer;
  width: 4rem;
  height: 4rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s ease-in-out;
}

.button::before {
  position: absolute;
  content: "";
  width: 4.1rem;
  height: 4.1rem;
  border-radius: inherit;
  background-color: #606060;
  z-index: -1;
  transition: background-image .3s ease-in-out;
}

.button .icon {
  width: 4rem;
  height: 4rem;
  display: inline-block;
}

.button .icon svg {
  height: 100%;
  width: 100%;
  fill: #000000;
  transition: fill;
}

.switch input:checked + .button::before {
  background-image: rgb(77, 124, 255);
  animation: anime1 .3s linear alternate-reverse infinite;
}

.switch input:checked + .button {
  box-shadow: none;
}

.switch input:checked + .button .icon svg {
  fill: rgb(77, 124, 255);
  animation: anime2 .3s linear alternate-reverse infinite;
}

@keyframes anime1 {
  to {
    background-color: rgb(77, 124, 255);
  }
}

@keyframes anime2 {
  to {
    fill: rgba(77, 124, 255, 0.642);
  }
}
</style>


================================================
FILE: Toggle-switches/Yaya12085_curvy-frog-97.html
================================================
  <input class="switch" type="checkbox" checked="true">
<style>
/* From Uiverse.io by Yaya12085 - Source: https://www.material-tailwind.com/docs/react/switch - Tags: switch, input, toggle, colorful, variations */
.switch {
  position: relative;
  height: 1.5rem;
  width: 3rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 9999px;
  background-color: rgba(100, 116, 139, 0.377);
  transition: all .3s ease;
}

.switch:checked {
  background-color: rgba(236, 72, 153, 1);
}

.switch::before {
  position: absolute;
  content: "";
  left: calc(1.5rem - 1.6rem);
  top: calc(1.5rem - 1.6rem);
  display: block;
  height: 1.6rem;
  width: 1.6rem;
  cursor: pointer;
  border: 1px solid rgba(100, 116, 139, 0.527);
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 3px 10px rgba(100, 116, 139, 0.327);
  transition: all .3s ease;
}

.switch:hover::before {
  box-shadow: 0 0 0px 8px rgba(0, 0, 0, .15)
}

.switch:checked:hover::before {
  box-shadow: 0 0 0px 8px rgba(236, 72, 153, .15)
}

.switch:checked:before {
  transform: translateX(100%);
  border-color: rgba(236, 72, 153, 1);
}
</style>


================================================
FILE: Toggle-switches/Yaya12085_fuzzy-dog-3.html
================================================
<label class="switch">
  <input type="checkbox">
  <div class="slider">
    <span>On</span>
    <span>Off</span>
  </div>
</label>
<style>
/* From Uiverse.io by Yaya12085 - Tags: skeuomorphism, 3d, green, switch, on, off */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 100px;
  height: 2em;
}


/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  color: #000;
  font-weight: 600;
  border-radius: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "On";
  height: 90%;
  width: 48%;
  left: 2%;
  border-radius: 20px;
  background-color: white;
  color: green;
  display: grid;
  align-content: center;
  justify-content: center;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0 -1.31em 1.31em -1.31em rgba(0, 0, 0, 0.3) inset, 0 0 1px 0 rgba(0, 0, 0, 0.1);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
  transition: .4s;
}

.slider:after {
  content: "";
  position: absolute;
  top: -7px;
  left: -7px;
  right: -7px;
  bottom: -7px;
  border-radius: 1.71em;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.1));
  z-index: -1;
}

.switch input:checked + .slider {
  background-color: #21f3a3;
  color: #fff;
}

.switch input:checked + .slider:before {
  content: "Off";
  transform: translateX(100%);
  color: red;
}

.switch input {
  display: none;
}
</style>


================================================
FILE: Toggle-switches/Yaya12085_lovely-firefox-94.html
================================================
<div class="container">
  <input id="checkbox" type="checkbox">
   <label class="button" for="checkbox">
    <span class="icon">
     <svg viewBox="0 0 24 24" fill="" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M17.35 12.7901C17.1686 12.7907 16.9935 12.7229 16.86 12.6001C15.5322 11.411 13.8124 10.7534 12.03 10.7534C10.2476 10.7534 8.52779 11.411 7.19999 12.6001C7.12649 12.6658 7.04075 12.7164 6.94767 12.749C6.85459 12.7816 6.756 12.7955 6.65755 12.7899C6.55909 12.7843 6.4627 12.7594 6.37389 12.7165C6.28508 12.6736 6.2056 12.6137 6.13999 12.5401C6.0109 12.3892 5.94595 12.1939 5.95904 11.9958C5.97212 11.7977 6.06219 11.6126 6.20999 11.4801C7.80752 10.0423 9.88072 9.2467 12.03 9.2467C14.1793 9.2467 16.2525 10.0423 17.85 11.4801C17.9978 11.6126 18.0879 11.7977 18.1009 11.9958C18.114 12.1939 18.0491 12.3892 17.92 12.5401C17.8469 12.6181 17.7586 12.6806 17.6606 12.7236C17.5627 12.7665 17.457 12.7892 17.35 12.7901Z" fill=""></path> <path d="M20 10C19.811 9.99907 19.6292 9.92777 19.49 9.80002C17.4685 7.87306 14.7828 6.79812 11.99 6.79812C9.19719 6.79812 6.51153 7.87306 4.48999 9.80002C4.42116 9.88186 4.33563 9.94804 4.23912 9.99411C4.14262 10.0402 4.03738 10.0651 3.93046 10.0672C3.82354 10.0692 3.71742 10.0484 3.61921 10.0061C3.521 9.96375 3.43298 9.90092 3.36105 9.82179C3.28911 9.74267 3.23493 9.64907 3.20214 9.54729C3.16934 9.4455 3.15869 9.33788 3.17091 9.23164C3.18312 9.1254 3.21791 9.023 3.27294 8.93131C3.32798 8.83962 3.40198 8.76076 3.48999 8.70002C5.78577 6.52533 8.82774 5.31329 11.99 5.31329C15.1522 5.31329 18.1942 6.52533 20.49 8.70002C20.5994 8.80134 20.6761 8.93298 20.7103 9.07811C20.7446 9.22324 20.7348 9.37527 20.6822 9.5148C20.6296 9.65433 20.5366 9.77502 20.4151 9.86145C20.2936 9.94787 20.1491 9.99612 20 10Z" fill=""></path> <path d="M9.38 15.64C9.26356 15.64 9.14873 15.6129 9.04459 15.5608C8.94044 15.5088 8.84986 15.4332 8.78 15.34C8.7196 15.2617 8.67551 15.1721 8.65032 15.0765C8.62513 14.9809 8.61936 14.8812 8.63334 14.7834C8.64732 14.6855 8.68078 14.5914 8.73173 14.5067C8.78268 14.4219 8.8501 14.3483 8.93 14.29C9.81277 13.6145 10.8934 13.2485 12.005 13.2485C13.1166 13.2485 14.1972 13.6145 15.08 14.29C15.1588 14.3491 15.2252 14.4232 15.2754 14.5079C15.3255 14.5926 15.3585 14.6865 15.3725 14.784C15.3864 14.8815 15.381 14.9807 15.3565 15.0762C15.3321 15.1716 15.2891 15.2612 15.23 15.34C15.1091 15.497 14.9316 15.6005 14.7355 15.6285C14.5394 15.6565 14.34 15.6068 14.18 15.49C13.5548 15.014 12.7908 14.7561 12.005 14.7561C11.2192 14.7561 10.4551 15.014 9.83 15.49C9.69921 15.5855 9.54193 15.6379 9.38 15.64Z" fill=""></path> <path d="M12 18.75C11.8011 18.75 11.6103 18.671 11.4697 18.5303C11.329 18.3897 11.25 18.1989 11.25 18C11.25 17.8011 11.329 17.6103 11.4697 17.4697C11.6103 17.329 11.8011 17.25 12 17.25C12.1989 17.25 12.3897 17.329 12.5303 17.4697C12.671 17.6103 12.75 17.8011 12.75 18C12.75 18.1989 12.671 18.3897 12.5303 18.5303C12.3897 18.671 12.1989 18.75 12 18.75Z" fill=""></path> </g></svg> 
   </span> 
   </label> 
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: neumorphism, skeuomorphism, icon, 3d, button, switch, realistic, toggle */
.container {
  width: 7em;
  height: 7em;
  position: relative;
}

.button {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #090909;
  background-color: transparent;
  background-image: linear-gradient(145deg, #171717, #444245);
  box-sizing: border-box;
  box-shadow: inset 2px 2px 0 #7d7c7e, inset -2px -2px 0px #1c1c1c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container input {
  display: none;
}

.button::before {
  position: absolute;
  content: "";
  width: 7.25em;
  height: 7.25em;
  border-radius: inherit;
  background-color: transparent;
  background-image: linear-gradient(145deg, #262626, #606060);
  z-index: -1;
  box-shadow: 11px 11px 22px #141414, -11px -11px 22px #525252;
}

.button .icon {
  width: 60px;
  height: 60px;
  display: inline-block;
}

.button .icon svg {
  height: 100%;
  width: 100%;
  fill: #a5a5a5;
}

.container  input:checked + .button {
  box-shadow: inset -2px -2px 0 #5e5e5e,inset 2px 2px 0 #1c1c1c;
  border: 4px solid rgba(77, 124, 255, 0.281);
  animation: animeBorder .3s linear alternate-reverse infinite;
}

.container input:checked + .button .icon svg {
  fill: rgb(77, 124, 255);
  animation: animeFill .3s linear alternate-reverse infinite;
}

@keyframes animeFill {
  to {
    fill: rgba(77, 124, 255, 0.642);
  }
}

@keyframes animeBorder {
  to {
    border-color: rgba(77, 124, 255, 0.137);
  }
}
</style>


================================================
FILE: Toggle-switches/aasisodiya_sour-horse-29.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by aasisodiya - Tags: minimalist, switch */
/* The switch - the box around the slider */
.switch {
 font-size: 1rem;
 position: relative;
 display: inline-block;
 width: 4em;
 height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
 opacity: 0;
 width: 0;
 height: 0;
}

/* The slider */
.slider {
 position: absolute;
 cursor: pointer;
 inset: 0;
 background-color: #eee;
 transition: 0.4s;
 border-radius: 0.5em;
 box-shadow: 0 0.2em #dfd9d9;
}

.slider:before {
 position: absolute;
 content: "";
 height: 1.5em;
 width: 1.4em;
 border-radius: 0.3em;
 left: 0.3em;
 bottom: 0.7em;
 background-color: lightsalmon;
 transition: 0.4s;
 box-shadow: 0 0.4em #bcb4b4;
}

.slider:hover::before {
 box-shadow: 0 0.2em #bcb4b4;
 bottom: 0.5em;
}

input:checked+.slider:before {
 transform: translateX(2em);
 background: lightgreen;
}
</style>


================================================
FILE: Toggle-switches/aboalsim114_clever-chipmunk-18.html
================================================
<label class="toggle-switch" for="toggle-switch">
  <input type="checkbox" id="toggle-switch">
  <div class="slider"></div>
</label>

<style>
/* From Uiverse.io by aboalsim114 - Tags: switch */
/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 5em;
  height: 2.5em;
  font-size: 1em;
  border-radius: 3em;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.toggle-switch input[type="checkbox"] {
  display: none;
}

.toggle-switch label {
  display: block;
  width: 100%;
  height: 100%;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-radius: 3em;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.slider::before {
  position: absolute;
  content: "";
  width: 2em;
  height: 2em;
  left: 0.25em;
  bottom: 0.25em;
  background-color: #38b8a7;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), background-color 0.3s ease;
  transform: perspective(800px) rotateY(0deg) rotateX(0deg);
}

.slider::after {
  position: absolute;
  content: "";
  width: 0.8em;
  height: 0.8em;
  left: 50%;
  bottom: 0.5em;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.3);
  transform: translate(-50%, 50%) scale(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

.toggle-switch input[type="checkbox"]:checked + .slider {
  background-color: #f2f2f2;
  box-shadow: 0 0.3em 0.3em rgba(244, 68, 68, 0.2);
}

.toggle-switch input[type="checkbox"]:checked + .slider::before {
  transform: translateX(2.5em) perspective(800px) rotateY(180deg) rotateX(360deg);
  background-color: #f44;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.toggle-switch input[type="checkbox"]:checked + .slider::after {
  transform: translate(-50%, 50%) scale(1);
}


</style>


================================================
FILE: Toggle-switches/adamgiebl_grumpy-moth-36.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by adamgiebl - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/ajithrthampi_kind-skunk-95.html
================================================
<!-- From Uiverse.io by ajithrthampi  - Tags: animation, hover, shadow, toggle, hover effect, close, tailwind, tailwindcss -->
<div
  class="flex cursor-pointer items-center justify-center text-3xl text-white caret-transparent"
>
  <div
    class="group relative inline-flex h-24 w-24 items-center justify-center overflow-hidden rounded-full border-2 font-medium shadow-md md:h-20 md:w-20"
  >
    <span
      class="ease absolute z-10 flex h-full w-full translate-y-full items-center justify-center rounded-full bg-[#d1b98a] text-white duration-300 group-hover:translate-y-0"
    ></span>
    <div
      class="absolute z-50 flex h-full w-full items-center justify-center text-[#f6f2f2] group-hover:text-white"
    >
      <svg
        height="40px"
        width="40px"
        viewBox="0 0 72 72"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill="white"
          d="M 19 15 C 17.977 15 16.951875 15.390875 16.171875 16.171875 C 14.609875 17.733875 14.609875 20.266125 16.171875 21.828125 L 30.34375 36 L 16.171875 50.171875 C 14.609875 51.733875 14.609875 54.266125 16.171875 55.828125 C 16.951875 56.608125 17.977 57 19 57 C 20.023 57 21.048125 56.609125 21.828125 55.828125 L 36 41.65625 L 50.171875 55.828125 C 51.731875 57.390125 54.267125 57.390125 55.828125 55.828125 C 57.391125 54.265125 57.391125 51.734875 55.828125 50.171875 L 41.65625 36 L 55.828125 21.828125 C 57.390125 20.266125 57.390125 17.733875 55.828125 16.171875 C 54.268125 14.610875 51.731875 14.609875 50.171875 16.171875 L 36 30.34375 L 21.828125 16.171875 C 21.048125 15.391875 20.023 15 19 15 z"
        ></path>
      </svg>
    </div>
  </div>
</div>


    

================================================
FILE: Toggle-switches/alexruix_lazy-dragon-53.html
================================================
<label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by alexruix - Tags: red, switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  box-shadow: 0 0 0 2px #f32f2150;
  border: 4px solid transparent;
  overflow: hidden;
  transition: .4s;
  background: transparent;
}

.slider:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background-color: #f32f21;
  transform: translateX(-50%);
  transition: .4s;
}

input:checked + .slider {
  background-color: #f7b48e;
}

input:focus:checked + .slider {
  box-shadow: 0 0 0 2px #f32f21, 0 0 4px #777;
}

input:checked + .slider:before {
  transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/alexruix_silent-otter-72.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider">
   <svg class="slider-icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation"><path fill="none" d="m4 16.5 8 8 16-16"></path></svg> 
  </span>
</label>
<style>
/* From Uiverse.io by alexruix - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #B0B0B0;
  border: 1px solid #B0B0B0;
  transition: .4s;
  border-radius: 32px;
  outline: none;
}

.slider:before {
  position: absolute;
  content: "";
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  outline: 2px solid #B0B0B0;
  left: -1px;
  bottom: -1px;
  background-color: #fff;
  transition: transform .25s ease-in-out 0s;
}

.slider-icon {
  opacity: 0;
  height: 12px;
  width: 12px;
  stroke-width: 8;
  position: absolute;
  z-index: 999;
  stroke: #222222;
  right: 60%;
  top: 30%;
  transition: right ease-in-out .3s, opacity ease-in-out .15s;
}

input:checked + .slider {
  background-color: #222222;
}

input:checked + .slider .slider-icon {
  opacity: 1;
  right: 20%;
}

input:checked + .slider:before {
  transform: translateX(1.5em);
  outline-color: #181818;
}
</style>


================================================
FILE: Toggle-switches/alexruix_splendid-liger-23.html
================================================
<label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by alexruix - Tags: switch, dark, light, theme-switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  --background: #28096b;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background);
  transition: .5s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 50%;
  left: 10%;
  bottom: 15%;
  box-shadow: inset 8px -4px 0px 0px #fff000;
  background: var(--background);
  transition: .5s;
}

input:checked + .slider {
  background-color: #522ba7;
}

input:checked + .slider:before {
  transform: translateX(100%);
  box-shadow: inset 15px -4px 0px 15px #fff000;
}
</style>


================================================
FILE: Toggle-switches/alexruix_unlucky-pug-99.html
================================================
<!-- From Uiverse.io by alexruix  - Website: https://www.hyperui.dev/components/application-ui/toggles - Name: GlintonLiao - Tags: simple, material design, switch, theme-switch, toggle, toggle switch, grey -->
<label
  class="relative h-8 w-12 cursor-pointer [-webkit-tap-highlight-color:_transparent]"
  for="switch"
>
  <input class="peer sr-only" id="switch" type="checkbox" />

  <span class="absolute inset-0 m-auto h-2 rounded-full bg-stone-400"></span>

  <span
    class="absolute inset-y-0 start-0 m-auto size-6 rounded-full bg-stone-600 transition-all peer-checked:start-6 peer-checked:[&amp;_>_*]:scale-0"
  >
    <span
      class="absolute inset-0 m-auto size-4 rounded-full bg-stone-300 transition"
    >
    </span>
  </span>
</label>


    

================================================
FILE: Toggle-switches/alfoly1988_curly-pug-70.html
================================================
<label class="switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by alfoly1988 - Tags: simple, black, switch, toggle switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(75, 73, 74);
  transition: 0.4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: black;
  box-shadow: inset 8px -4px 0 0 white;
  transition: 0.4s;
}

.switch input:checked + .slider {
  background-color: #2196f3;
}

.switch input:checked + .slider:before {
  transform: translateX(1.5em);
  background-color: yellow;
  box-shadow: none;
}

</style>


================================================
FILE: Toggle-switches/ami-hp_heavy-horse-9.html
================================================
<div class="my-body">
  <div class="darkThemeBtn">
    <input id="darkmode-toggle" type="checkbox">
    <label for="darkmode-toggle">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="sun">
        <g transform="translate(0 512) scale(.1 -.1)"><path d="m2513 5105c-59-25-63-46-63-320 0-266 4-288 54-315 33-17 79-17 112 0 50 27 54 49 54 315 0 275-4 295-65 321-42 17-51 17-92-1z"></path><path d="m754 4366c-28-28-34-41-34-77 0-42 3-45 188-231l187-188h47c39 0 52 5 77 31 26 25 31 38 31 77v47l-188 187c-186 185-189 188-231 188-36 0-49-6-77-34z"></path><path d="m4058 4212-188-187v-47c0-39 5-52 31-77 25-26 38-31 77-31h46l188 188c186 186 188 188 188 231 0 36-6 49-34 77s-41 34-77 34c-42 0-45-3-231-188z"></path><path d="m2440 4224c-453-50-760-192-1056-488-264-264-419-570-475-936-17-109-17-371 0-480 56-366 211-672 475-936s570-419 936-475c109-17 371-17 480 0 366 56 672 211 936 475 225 225 358 455 438 758 38 143 50 249 50 418 0 219-30 388-104 590-137 372-450 719-813 901-143 72-315 128-474 154-89 15-329 26-393 19zm335-235c305-46 582-186 805-409 567-567 567-1473 0-2040s-1473-567-2040 0-567 1473 0 2040c328 328 777 476 1235 409z"></path><path d="m54 2651c-20-12-37-34-44-55-16-49 2-101 44-127 28-17 52-19 279-19 268 0 289 4 317 54 17 33 17 79 0 112-28 50-49 54-317 54-227 0-251-2-279-19z"></path><path d="m4512 2657c-73-41-73-155 0-193 21-11 81-14 275-14 227 0 251 2 279 19 42 26 60 78 44 127-7 21-24 43-44 55-28 17-52 19-281 19-181-1-256-4-273-13z"></path><path d="m908 1062c-185-186-188-189-188-231 0-36 6-49 34-77s41-34 77-34c43 0 45 2 231 188l188 188v46c0 39-5 52-31 77-25 26-38 31-77 31h-47l-187-188z"></path><path d="m3901 1219c-26-25-31-38-31-77v-47l188-187c186-185 189-188 231-188 36 0 49 6 77 34s34 41 34 77c0 43-2 45-188 231l-188 188h-46c-39 0-52-5-77-31z"></path><path d="m2540 663c-87-28-90-37-90-330 0-227 2-251 19-279 40-66 142-66 182 0 17 28 19 52 19 279 0 266-4 291-52 314-32 16-60 22-78 16z"></path></g>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="moon">
        <g transform="translate(0 512) scale(.1 -.1)">
          <path d="m2090 5105c-248-51-443-118-659-226-514-256-909-652-1161-1163-94-191-139-311-185-490-127-500-110-999 51-1468 133-389 331-706 624-998 403-404 875-642 1460-736 147-24 529-24 693 0 539 78 981 283 1390 644 362 319 647 793 766 1270 46 186 56 256 42 299-22 71-80 116-151 117-73 1-104-19-181-116-307-390-733-627-1233-689-119-14-385-7-501 15-582 106-1066 469-1321 991-120 246-171 452-181 731-21 586 230 1126 695 1493 96 75 117 107 117 177 0 85-67 155-153 160-26 1-76-3-112-11zm110-149c0-2-26-23-57-47-81-60-254-230-325-318-213-264-353-573-415-916-22-126-25-508-5-625 62-346 195-651 395-910 72-93 228-250 327-329 266-213 571-349 930-413 117-20 499-17 625 5 343 62 652 202 916 415 88 71 258 244 318 325 24 32 46 56 48 54s-8-60-23-128c-127-606-501-1155-1027-1505-780-521-1798-535-2602-36-295 183-594 482-777 777-335 539-445 1180-308 1795 138 621 515 1158 1060 1511 136 88 374 201 530 253 148 49 390 106 390 92z"></path>
        </g>
      </svg>
    </label>
    <span class="fake-body"></span>
  </div>
</div>
<style>
/* From Uiverse.io by ami-hp - Tags: minimalist, switch, toggle, svg, light&dark, switcher, toggle switch */
.darkThemeBtn * {
  transition: all 0.3s;
}

.darkThemeBtn input {
  width: 0;
  height: 0;
  visibility: hidden;
}

.darkThemeBtn label {
  border: 1px solid #efefef;
  background: rgba(239, 239, 239, 0.5);
  border-radius: 10px;
  height: 46px;
  width: 46px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.darkThemeBtn label:active {
  border-radius: 5px;
}

.darkThemeBtn label svg {
  position: absolute;
  width: 16px;
  transition: 0.3s;
  z-index: 1;
  fill: #000;
}

.darkThemeBtn label svg.sun {
  width: 20px;
  opacity: 0;
  fill: #fff;
}

.darkThemeBtn label svg.moon {
  opacity: 1;
}

.darkThemeBtn input:checked + label {
  background: #4a6cf7;
}

.darkThemeBtn input:checked + label svg.sun {
  opacity: 1;
}

.darkThemeBtn input:checked + label svg.moon {
  opacity: 0;
}

.darkThemeBtn input:checked ~ span {
  background-color: #16174b;
}
</style>


================================================
FILE: Toggle-switches/andrew-demchenk0_empty-penguin-100.html
================================================
<label class="switch">
  <input checked="" type="checkbox" class="toggle">
  <span class="slider"></span>
  <span class="card-side"></span>
</label>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: blue, switch, on, off, toggle, text animation, switcher, color, text, toggle switch */
.switch {
  --input-focus: #2d8cf0;
  --bg-color: #fff;
  --bg-color-alt: #666;
  --main-color: #323232;
  --input-out-of-focus: #ccc;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 70px;
  height: 36px;
  transform: translateX(calc(50% - 10px));
}

.toggle {
  opacity: 0;
}

.slider {
  box-sizing: border-box;
  border-radius: 100px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--input-out-of-focus);
  transition: 0.3s;
}

.slider:before {
  content: "off";
  box-sizing: border-box;
  height: 30px;
  width: 30px;
  position: absolute;
  left: 2px;
  bottom: 1px;
  border: 2px solid var(--main-color);
  border-radius: 100px;
  background-color: var(--bg-color);
  color: var(--main-color);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 25px;
  transition: 0.3s;
}

.toggle:checked + .slider {
  background-color: var(--input-focus);
  transform: translateX(-32px);
}

.toggle:checked + .slider:before {
  content: "on";
  transform: translateX(32px);
}
</style>


================================================
FILE: Toggle-switches/andrew-demchenk0_honest-stingray-90.html
================================================
<label class="switch">
  <span class="sun"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="#ffd43b"><circle r="5" cy="12" cx="12"></circle><path d="m21 13h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm-17 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm13.66-5.66a1 1 0 0 1 -.66-.29 1 1 0 0 1 0-1.41l.71-.71a1 1 0 1 1 1.41 1.41l-.71.71a1 1 0 0 1 -.75.29zm-12.02 12.02a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l.71-.66a1 1 0 0 1 1.41 1.41l-.71.71a1 1 0 0 1 -.7.24zm6.36-14.36a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm0 17a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm-5.66-14.66a1 1 0 0 1 -.7-.29l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.29zm12.02 12.02a1 1 0 0 1 -.7-.29l-.66-.71a1 1 0 0 1 1.36-1.36l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.24z"></path></g></svg></span>
  <span class="moon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="m223.5 32c-123.5 0-223.5 100.3-223.5 224s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"></path></svg></span>   
  <input type="checkbox" class="input">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: switch, dark, light, theme-switch */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 64px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #73C0FC;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  border-radius: 20px;
  left: 2px;
  bottom: 2px;
  z-index: 2;
  background-color: #e8e8e8;
  transition: .4s;
}

.sun svg {
  position: absolute;
  top: 6px;
  left: 36px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

.moon svg {
  fill: #73C0FC;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

/* .switch:hover */.sun svg {
  animation: rotate 15s linear infinite;
}

@keyframes rotate {
 
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* .switch:hover */.moon svg {
  animation: tilt 5s linear infinite;
}

@keyframes tilt {
 
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.input:checked + .slider {
  background-color: #183153;
}

.input:focus + .slider {
  box-shadow: 0 0 1px #183153;
}

.input:checked + .slider:before {
  transform: translateX(30px);
}
</style>


================================================
FILE: Toggle-switches/andrew-demchenk0_light-dragonfly-53.html
================================================
<label class="switch">
  <input class="input" type="checkbox">
  <span class="slider">
    <span class="iron-man"><svg xmlns="http://www.w3.org/2000/svg" width="50" viewBox="0 0 48 48" height="50"><path fill="#d03827" d="m19.479 46.479c-.595.059-1.166-.238-1.441-.77-.415-.803-1.062-1.334-1.595-2.023-1.281-1.657-2.266-3.435-3.411-5.189-.196-.3-.395-.608-.481-.955-.089-.359-.053-.736-.02-1.104.058-.64-.058-1.274-.217-1.897-.384-1.51-2.376-2.642-3.273-3.916-1.248-1.774-1.382-4.075-1.473-6.242-.07-1.661.002-3.513-.032-5.223-.008-.422.162-.816.472-1.103.859-.794 1.844-2.056 2.009-3.191.332-2.29.469-4.653 1.376-6.782 1.679-3.937 5.84-6.913 10.083-7.475 5.19-.687 10.929 1.721 14.485 5.564.586.633 1.124 1.315 1.544 2.069.75 1.344 1.104 2.871 1.337 4.392.201 1.309.03 2.697.055 4.029.009.458.371.863.743 1.131.483.348.784.975.878 1.581.125.809-.061 1.629-.201 2.436-.25 1.443-.352 2.912-.303 4.377.05 1.499.199 3.184-.791 4.312-.511.582-1.458.982-1.927 1.599-1.072 1.409-.446 3.435-.987 5.121-.22.687-.665 1.276-1.102 1.85-1.579 2.075-2.924 4.202-4.503 6.277-.359.472-.878 1.082-1.471 1.066-3.125-.156-6.582-.247-9.754.066z"></path><path fill="#010101" d="m19.328 46.987c-.731 0-1.398-.396-1.734-1.048-.239-.464-.577-.837-.934-1.232-.209-.23-.418-.463-.612-.715-.888-1.147-1.645-2.367-2.377-3.547-.346-.558-.693-1.117-1.058-1.675-.206-.316-.439-.675-.548-1.107-.107-.436-.068-.869-.034-1.252.057-.622-.07-1.23-.201-1.747-.201-.789-.998-1.528-1.77-2.243-.519-.48-1.054-.978-1.428-1.508-1.373-1.95-1.479-4.478-1.564-6.509-.04-.965-.033-2.004-.026-3.009.005-.751.01-1.501-.005-2.226-.012-.558.219-1.098.632-1.479.765-.706 1.708-1.888 1.854-2.896.067-.463.127-.929.186-1.396.234-1.844.476-3.75 1.226-5.51 1.727-4.05 5.938-7.174 10.478-7.775 5.132-.677 11.124 1.619 14.918 5.72.688.743 1.216 1.451 1.613 2.165.851 1.523 1.192 3.237 1.396 4.56.138.902.109 1.829.081 2.726-.015.46-.029.918-.021 1.369.004.218.21.5.536.736.552.398.956 1.112 1.079 1.91.123.789-.015 1.556-.148 2.297l-.054.3c-.243 1.408-.343 2.847-.295 4.275l.013.345c.055 1.463.118 3.122-.928 4.313-.28.319-.648.574-1.004.821-.36.25-.7.486-.9.75-.541.71-.575 1.665-.612 2.676-.027.759-.057 1.544-.297 2.295-.25.776-.744 1.427-1.18 2-.785 1.031-1.526 2.097-2.244 3.127-.72 1.035-1.465 2.106-2.259 3.15-.477.626-1.066 1.263-1.842 1.263-.014 0-.028 0-.042 0-2.81-.14-6.438-.256-9.694.066-.068.006-.134.01-.201.01zm.151-.508h.01zm3.775-45.485c-.579 0-1.15.037-1.711.111-4.137.547-8.12 3.498-9.688 7.176-.695 1.631-.928 3.468-1.153 5.243-.06.473-.12.944-.188 1.413-.185 1.267-1.239 2.632-2.166 3.487-.206.19-.316.448-.311.725.014.734.01 1.493.005 2.252-.007.993-.014 2.021.026 2.962.079 1.899.179 4.264 1.383 5.974.313.445.787.885 1.29 1.351.877.813 1.784 1.655 2.058 2.73.152.598.298 1.311.23 2.064-.032.353-.061.668.007.939.067.269.244.54.415.803.368.563.72 1.129 1.069 1.693.752 1.211 1.463 2.355 2.318 3.463.179.231.372.444.563.656.384.425.781.864 1.08 1.443.178.344.547.552.948.501 3.302-.325 6.824-.218 9.831-.069h.01c.378 0 .874-.653 1.038-.869.781-1.027 1.521-2.089 2.235-3.116.723-1.039 1.471-2.113 2.269-3.161.406-.534.826-1.087 1.023-1.7.198-.619.224-1.303.25-2.026.041-1.122.083-2.282.815-3.244.296-.39.718-.683 1.126-.966.32-.223.623-.433.822-.66.783-.892.73-2.276.68-3.616l-.013-.349c-.05-1.497.055-3.004.311-4.479l.054-.308c.125-.689.242-1.342.145-1.966-.082-.531-.341-1.011-.676-1.253-.35-.253-.937-.786-.951-1.527-.009-.469.006-.943.021-1.42.027-.851.055-1.731-.069-2.543-.19-1.239-.508-2.84-1.28-4.224-.358-.644-.841-1.289-1.475-1.973-3.166-3.421-7.946-5.517-12.341-5.517z"></path><path fill="#febf10" d="m38.104 25.557c-1.123-4.605-1.65-9.529-1.541-14.268-1.207-1.917-2.861-3.551-4.866-4.604-.818-.43-1.954-.717-2.562-.021-.271.31-.351.738-.425 1.143-.326 1.761-.748 3.504-1.265 5.219-.234.776-.545 1.618-1.256 2.006-.435.237-.95.261-1.445.28-.754.029-1.509.057-2.263.086-.168.006-.348.009-.488-.084-.156-.104-.219-.299-.272-.479-.802-2.73-1.692-5.435-2.667-8.108-.086-.237-.215-.509-.464-.549-.148-.024-.294.046-.427.115-2.115 1.1-4.093 2.729-5.751 4.442.34 4.626-.564 9.83-2.475 14.057.237.218.46.466.687.707 3.687 5.347 5.26 11.33 7.888 17.277.163.369.428.763.828.711 3.361-.115 6.812-.309 10.173-.424 2.076-4.558 4.648-9.484 6.647-14.077l-.004-.001c.771-1.072 1.426-2.227 1.948-3.428z"></path><path fill="#16b7b8" d="m13.826 23.27c-.366 1.118-.367 2.353-.002 3.471 1.598.602 3.318.88 5.024.813.38-.015.775-.051 1.105-.241.465-.267.825-1.07.994-1.578"></path><path fill="#16b7b8" d="m27.207 25.601c.225.589.613.676.968 1.198.078.114.161.229.278.303.104.066.227.095.347.12 1.607.34 3.291.314 4.887-.075.245-.06.51-.143.648-.355.083-.128.107-.285.127-.437.171-1.292-.037-2.164-.038-3.467"></path><path fill="#010101" d="m38.589 25.438c-1.106-4.538-1.634-9.428-1.526-14.138.002-.099-.024-.195-.077-.278-1.308-2.077-3.057-3.729-5.057-4.779-1.323-.695-2.511-.662-3.171.093-.361.414-.461.95-.54 1.381-.32 1.732-.741 3.471-1.252 5.166-.201.669-.463 1.409-1.017 1.71-.343.187-.812.204-1.304.223l-2.183.083c-.051.002-.17.006-.182.01-.028-.033-.067-.165-.082-.214-.801-2.728-1.701-5.466-2.677-8.137-.069-.193-.282-.781-.852-.873-.324-.054-.594.089-.738.165-1.961 1.02-3.994 2.588-5.88 4.537-.099.103-.149.242-.14.385.334 4.544-.575 9.708-2.432 13.813-.086.196-.039.428.121.574.219.201.425.433.635.656 2.488 3.617 3.983 7.485 5.561 11.578.705 1.827 1.434 3.717 2.259 5.584.377.856.89 1.016 1.192 1.016.041 0 .077-.003.109-.007 1.684-.058 3.389-.135 5.095-.213 1.7-.077 3.4-.154 5.078-.211.19-.007.359-.12.438-.293.9-1.977 1.915-4.065 2.896-6.085 1.281-2.637 2.604-5.363 3.734-7.955.763-1.069 1.427-2.234 1.964-3.472.044-.102.054-.213.028-.319zm-20.194-18.702c.022-.012.084-.044.079-.069.02.025.058.088.109.232.969 2.652 1.862 5.37 2.657 8.076.06.203.159.544.476.755.277.185.592.171.784.168l2.262-.086c.498-.019 1.117-.042 1.666-.341.845-.46 1.218-1.378 1.495-2.301.521-1.73.951-3.504 1.277-5.272.064-.343.13-.697.312-.904.392-.452 1.296-.209 1.952.134 1.531.804 2.889 2.013 4.006 3.497-.748.863-1.13 1.896-1.198 3.33-.034.689-.099 1.419-.165 2.166-.188 2.116-.382 4.306.029 6.246.031.147.056.299.032.396-.039.104-.306.257-.831.469-6.237 2.525-13.53 2.362-19.149-.398 1.635-4.348.39-8.57-.941-12.214 1.674-1.653 3.441-2.996 5.148-3.884zm15.585 17.484c.05.7.09 1.3-.02 2.07 0 .06-.02.19-.04.23-.02.03-.1.08-.35.14-1.52.37-3.14.4-4.67.07-.05-.01-.15-.03-.18-.05-.04-.02-.1-.12-.13-.16-.18-.27-.37-.44-.52-.58-.084-.075-.15-.139-.211-.207 2.008-.295 3.995-.822 5.891-1.589.067-.027.145-.062.219-.094.004.055.008.116.011.17zm-19.802-.295c1.934.894 4.041 1.501 6.23 1.819-.205.55-.482 1.008-.704 1.135-.241.139-.578.163-.875.175-1.544.068-3.133-.18-4.598-.697-.217-.791-.227-1.63-.053-2.432zm2.551 13.108c-.654-1.697-1.297-3.354-1.999-4.976.132.177.254.359.401.526.34.39.724.749 1.094 1.097.822.772 1.599 1.501 1.855 2.469l.049.188c.171.662.396 1.511.954 2.056 0 .013-.006.025-.006.038.048.963-.065 1.921-.337 2.848l-.038.128c-.03.099-.06.206-.089.313-.668-1.569-1.29-3.149-1.884-4.687zm7.676 5.74c-1.609.074-3.222.145-4.853.204-.003-.05-.006-.1-.024-.148-.116-.306.005-.708.132-1.135l.039-.133c.258-.877.379-1.779.38-2.689 1.283.275 2.588.388 3.872.388 1.422 0 2.809-.128 4.11-.288.002.044.002.087.016.131.361 1.139.661 2.308.91 3.478-1.516.055-3.048.123-4.582.192zm7.56-6.027c-.747 1.539-1.502 3.108-2.225 4.649-.21-.873-.44-1.743-.71-2.596l-.046-.103c-.008-.013-.02-.021-.029-.033.031-.049.073-.09.086-.149.135-.608.352-1.072.582-1.563.173-.37.353-.752.515-1.225.131-.38.267-.746.486-1.032.266-.348.669-.598 1.098-.863l.171-.106c.858-.538 1.666-1.181 2.426-1.896-.765 1.638-1.565 3.293-2.354 4.917zm-.603-3.868-.167.104c-.485.301-.988.612-1.364 1.105-.311.404-.485.871-.638 1.314-.146.422-.313.779-.475 1.126-.203.432-.411.876-.566 1.427-2.56.324-5.5.535-8.176-.115-.478-.201-.71-1.098-.879-1.753l-.051-.193c-.33-1.244-1.249-2.107-2.138-2.941-.369-.347-.718-.674-1.026-1.026-.488-.559-.879-1.19-1.292-1.86-.126-.205-.253-.41-.382-.613-.901-1.41-1.971-2.962-3.188-4.264-.013-.019-.024-.038-.037-.057-.039-.055-.087-.1-.141-.134-.103-.106-.199-.225-.305-.327 1.537-3.535 2.401-7.778 2.435-11.769.982 3.109 1.563 6.542.119 9.977-.091.216-.012.457.172.591-.292 1.122-.276 2.323.084 3.426.047.145.157.259.3.313 1.492.563 3.112.855 4.714.855.169 0 .338-.004.507-.01.446-.019.917-.068 1.333-.308.673-.386 1.077-1.426 1.22-1.854.002-.006 0-.012.002-.017.867.09 1.743.139 2.624.139.909 0 1.822-.053 2.733-.148.169.391.405.618.609.804.13.12.26.24.37.41.1.15.23.32.43.45.17.1.35.15.51.18.78.17 1.58.25 2.38.25.92 0 1.84-.11 2.72-.33.23-.05.69-.17.95-.57.15-.23.19-.48.21-.64.11-.87.07-1.55.02-2.27-.015-.238-.029-.499-.038-.761.087-.113.16-.237.196-.383.073-.296.032-.58-.023-.845-.381-1.795-.193-3.908-.012-5.952.067-.761.134-1.504.167-2.205.053-1.076.31-1.864.79-2.514-.088 4.675.436 9.513 1.519 14.02-1.383 3.108-3.586 5.72-6.216 7.368z"></path></svg></span>
    <span class="commutator"><svg fill="#303c42" height="55" stroke="#303c42" stroke-width="1.444" viewBox="0 0 76 76" width="55" xmlns="http://www.w3.org/2000/svg"><g fill="#2196F3" stroke-linejoin="round"><path d="m38 29c4.9706 0 9 4.0294 9 9s-4.0294 9-9 9-9-4.0294-9-9 4.0294-9 9-9zm0-10c1.8461 0 3.6307.2633 5.3183.7544l-2.321 4.5672c-.9657-.2106-1.9685-.3216-2.9973-.3216-.7922 0-1.569.0658-2.3252.1922l-2.0953-4.6753c1.4185-.338 2.8986-.5169 4.4205-.5169zm0 38c-1.8461 0-3.6307-.2633-5.3184-.7544l2.3211-4.5672c.9656.2106 1.9685.3216 2.9973.3216.7921 0 1.5689-.0658 2.3252-.1922l2.0952 4.6753c-1.4184.338-2.8985.5169-4.4204.5169zm7.288-36.552c3.0672 1.275 5.7284 3.3306 7.7355 5.9189l-4.5613 2.3301c-1.1837-1.3302-2.6173-2.4332-4.2272-3.2353zm8.9232 7.6374c1.6744 2.7319 2.6776 5.9196 2.7801 9.3337l-5.0581-.7957c-.1783-1.8263-.7075-3.5498-1.5193-5.1021zm-1.7744 22.2674c-2.1253 2.4815-4.8792 4.4086-8.0149 5.5345l-.8067-5.0589c1.6508-.7236 3.1353-1.7566 4.38-3.0255zm4.5042-10.8449c-.2661 3.3899-1.4219 6.5297-3.2341 9.1861l-3.6247-3.617c.8892-1.5149 1.5017-3.2119 1.768-5.0215zm-26.229 16.0441c-3.0673-1.275-5.7284-3.3306-7.7355-5.9189l4.5612-2.3301c1.1837 1.3303 2.6174 2.4333 4.2272 3.2354zm-8.9232-7.6374c-1.6744-2.7319-2.6776-5.9196-2.7801-9.3337l5.0581.7957c.1782 1.8263.7074 3.5498 1.5192 5.1021zm-2.7298-11.4225c.2661-3.3898 1.4219-6.5297 3.2341-9.1861l3.6247 3.6171c-.8893 1.5149-1.5017 3.2118-1.768 5.0214zm4.5042-10.8449c2.1252-2.4814 4.8791-4.4085 8.0149-5.5345l.8067 5.0589c-1.6509.7236-3.1353 1.7566-4.38 3.0255z" stroke="#ccc" stroke-linecap="round" stroke-width="2.432"></path><path d="m38 29c4.9706 0 9 4.0294 9 9s-4.0294 9-9 9-9-4.0294-9-9 4.0294-9 9-9zm0-10c1.8461 0 3.6307.2633 5.3183.7544l-2.321 4.5672c-.9657-.2106-1.9685-.3216-2.9973-.3216-.7922 0-1.569.0658-2.3252.1922l-2.0953-4.6753c1.4185-.338 2.8986-.5169 4.4205-.5169zm0 38c-1.8461 0-3.6307-.2633-5.3184-.7544l2.3211-4.5672c.9656.2106 1.9685.3216 2.9973.3216.7921 0 1.5689-.0658 2.3252-.1922l2.0952 4.6753c-1.4184.338-2.8985.5169-4.4204.5169zm7.288-36.552c3.0672 1.275 5.7284 3.3306 7.7355 5.9189l-4.5613 2.3301c-1.1837-1.3302-2.6173-2.4332-4.2272-3.2353zm8.9232 7.6374c1.6744 2.7319 2.6776 5.9196 2.7801 9.3337l-5.0581-.7957c-.1783-1.8263-.7075-3.5498-1.5193-5.1021zm-1.7744 22.2674c-2.1253 2.4815-4.8792 4.4086-8.0149 5.5345l-.8067-5.0589c1.6508-.7236 3.1353-1.7566 4.38-3.0255zm4.5042-10.8449c-.2661 3.3899-1.4219 6.5297-3.2341 9.1861l-3.6247-3.617c.8892-1.5149 1.5017-3.2119 1.768-5.0215zm-26.229 16.0441c-3.0673-1.275-5.7284-3.3306-7.7355-5.9189l4.5612-2.3301c1.1837 1.3303 2.6174 2.4333 4.2272 3.2354zm-8.9232-7.6374c-1.6744-2.7319-2.6776-5.9196-2.7801-9.3337l5.0581.7957c.1782 1.8263.7074 3.5498 1.5192 5.1021zm-2.7298-11.4225c.2661-3.3898 1.4219-6.5297 3.2341-9.1861l3.6247 3.6171c-.8893 1.5149-1.5017 3.2118-1.768 5.0214zm4.5042-10.8449c2.1252-2.4814 4.8791-4.4085 8.0149-5.5345l.8067 5.0589c-1.6509.7236-3.1353 1.7566-4.38 3.0255z"></path></g></svg></span>
  </span>
</label>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: switch */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 70px;
  height: 34.5px;
  overflow: hidden;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 30px;
}

.commutator {
  cursor: pointer;
  position: absolute;
  top: -29%;
  left: -14%;
  transition: .4s;
}

.iron-man {
  position: absolute;
  top: -27%;
  left: -100%;
  transform: rotate(90deg);
}

.input:checked + .slider {
  background-color: #2196F3;
}

.input:checked + .slider .commutator {
  transform: translateX(34.5px);
  opacity: 0;
}

.input:checked + .slider .iron-man {
  animation: show_5911 1.3s ease-in-out forwards;
}

@keyframes show_5911 {
  0% {
    transform: translateX(0px) rotate(90deg);
  }

  50% {
    transform: translateX(75px) rotate(90deg);
  }

  100% {
    transform: translateX(79px) rotate(0deg);
  }
}
</style>


================================================
FILE: Toggle-switches/andrew-demchenk0_tiny-fish-66.html
================================================
<label class="switch">
  <input class="toggle" type="checkbox">
  <span class="slider"></span>
  <span class="card-side"></span>
</label>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: blue, switch, toggle, animated, toggle switch */
.switch {
  --input-focus: #2d8cf0;
  --font-color: #323232;
  --font-color-sub: #666;
  --bg-color: #fff;
  --bg-color-alt: #666;
  --main-color: #323232;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 50px;
  height: 20px;
}

.toggle {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-colorcolor);
  transition: 0.3s;
}

.slider:before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  border: 2px solid var(--main-color);
  border-radius: 5px;
  left: -2px;
  bottom: 2px;
  background-color: var(--bg-color);
  box-shadow: 0 3px 0 var(--main-color);
  transition: 0.3s;
}

.toggle:checked + .slider {
  background-color: var(--input-focus);
}

.toggle:checked + .slider:before {
  transform: translateX(30px);
}
</style>


================================================
FILE: Toggle-switches/anonithrax_brown-dragon-59.html
================================================
<div class="switch">
  <input type="checkbox" id="toggle-checkbox">
  <label for="toggle-checkbox"></label>
</div>

<style>
/* From Uiverse.io by anonithrax - Tags: switch, theme-switch, toggle switch */
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  display: none;
}

/* The slider */
.switch label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
}

.switch label::before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .3s;
}

.switch input:checked + label {
  background-color: #4c71f2;
}

.switch input:checked + label::before {
  transform: translateX(26px);
}

</style>


================================================
FILE: Toggle-switches/arghyaBiswasDev_shaggy-ape-11.html
================================================
<label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by arghyaBiswasDev - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border: 1px solid #adb5bd;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.27em;
  bottom: 0.25em;
  background-color: #adb5bd;
  transition: .4s;
}

input:checked + .slider {
  background-color: #007bff;
  border: 1px solid #007bff;
}

input:focus + .slider {
  box-shadow: 0 0 1px #007bff;
}

input:checked + .slider:before {
  transform: translateX(1.4em);
  background-color: #fff;
}
</style>


================================================
FILE: Toggle-switches/aymenthedeveloper_polite-elephant-80.html
================================================
<button class="toggle-btn">
  <div class="sun-rays"></div>
  <div class="main-circle"></div>
</button>

<style>
/* From Uiverse.io by aymenthedeveloper  - Tags: icon, animation, button, toggle, light&dark, toggle switch */
.toggle-btn {
  --bg: #e8e8e8;
  --fg: #212121;
  background-color: var(--bg);
  border-radius: 10px;
  --dimensions: 50px;
  width: var(--dimensions);
  height: var(--dimensions);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.toggle-btn .main-circle {
  --dimensions: 20px;
  width: var(--dimensions);
  height: var(--dimensions);
  background-color: var(--fg);
  border-radius: 50%;
  position: absolute;
  transition: transform 0.4s ease 0.2s;
}

.toggle-btn .main-circle::after {
  content: "";
  background-color: var(--bg);
  border-radius: 50%;
  --dimensions: 15px;
  width: var(--dimensions);
  height: var(--dimensions);
  position: absolute;
  top: 1px;
  right: -1px;
  transform-origin: right top;
  transform: scale(0);
  transition: transform 0.4s ease 0.2s;
}

.toggle-btn .sun-rays {
  display: grid;
  place-items: center;
  transition: transform 0.4s ease 0.2s;
}

.toggle-btn .sun-rays,
.toggle-btn .sun-rays::after,
.toggle-btn .sun-rays::before {
  --width: 3px;
  --height: 6px;
  width: var(--width);
  height: var(--height);
  background-color: var(--fg);
  position: absolute;
  box-shadow: 0 16px 0 var(--fg), 0 -16px 0 var(--fg);
}

.toggle-btn .sun-rays::after {
  content: "";
  transform: rotate(120deg);
}

.toggle-btn .sun-rays::before {
  content: "";
  transform: rotate(240deg);
}

.toggle-btn:focus .main-circle {
  transform: scale(1.2);
}

.toggle-btn:focus .main-circle::after {
  transform: scale(1);
}

.toggle-btn:focus .sun-rays {
  transition: transform 0.4s;
  transform: scale(0);
}

@media (prefers-color-scheme: dark) {
  .toggle-btn {
    --bg: #212121;
    --fg: #e8e8e8;
  }
}

</style>
    

================================================
FILE: Toggle-switches/bandirevanth_wonderful-dog-56.html
================================================
<label class="rocker rocker-small">
    <input type="checkbox">
    <span class="switch-left">Yes</span>
    <span class="switch-right">No</span>
</label>
<style>
/* From Uiverse.io by bandirevanth - Tags: switch */
/* Switch starts here */
.rocker {
  display: inline-block;
  position: relative;
  /*
  SIZE OF SWITCH
  ==============
  All sizes are in em - therefore
  changing the font-size here
  will change the size of the switch.
  See .rocker-small below as example.
  */
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: #888;
  width: 7em;
  height: 4em;
  overflow: hidden;
  border-bottom: 0.5em solid #eee;
}

.rocker-small {
  font-size: 0.75em;
 /* Sizes the switch */
  margin: 1em;
}

.rocker::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #999;
  border: 0.5em solid #eee;
  border-bottom: 0;
}

.rocker input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-left,
.switch-right {
  cursor: pointer;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5em;
  width: 3em;
  transition: 0.2s;
  user-select: none;
}

.switch-left {
  height: 2.4em;
  width: 2.75em;
  left: 0.85em;
  bottom: 0.4em;
  background-color: #ddd;
  transform: rotate(15deg) skewX(15deg);
}

.switch-right {
  right: 0.5em;
  bottom: 0;
  background-color: #bd5757;
  color: #fff;
}

.switch-left::before,
.switch-right::before {
  content: "";
  position: absolute;
  width: 0.4em;
  height: 2.45em;
  bottom: -0.45em;
  background-color: #ccc;
  transform: skewY(-65deg);
}

.switch-left::before {
  left: -0.4em;
}

.switch-right::before {
  right: -0.375em;
  background-color: transparent;
  transform: skewY(65deg);
}

input:checked + .switch-left {
  background-color: #0084d0;
  color: #fff;
  bottom: 0px;
  left: 0.5em;
  height: 2.5em;
  width: 3em;
  transform: rotate(0deg) skewX(0deg);
}

input:checked + .switch-left::before {
  background-color: transparent;
  width: 3.0833em;
}

input:checked + .switch-left + .switch-right {
  background-color: #ddd;
  color: #888;
  bottom: 0.4em;
  right: 0.8em;
  height: 2.4em;
  width: 2.75em;
  transform: rotate(-15deg) skewX(-15deg);
}

input:checked + .switch-left + .switch-right::before {
  background-color: #ccc;
}

/* Keyboard Users */
input:focus + .switch-left {
  color: #333;
}

input:checked:focus + .switch-left {
  color: #fff;
}

input:focus + .switch-left + .switch-right {
  color: #fff;
}

input:checked:focus + .switch-left + .switch-right {
  color: #333;
}
</style>


================================================
FILE: Toggle-switches/barisdogansutcu_smart-panda-14.html
================================================
<input type="checkbox" checked="checked" id="favorite" name="favorite-checkbox" value="favorite-button">
<label for="favorite" class="container">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
  <div class="action">
    <span class="option-1">Add to Favorites</span>
    <span class="option-2">Added to Favorites</span>
  </div>
</label>
<style>
/* From Uiverse.io by barisdogansutcu - Tags: switch */
label {
 background-color: white;
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 10px 15px 10px 10px;
 cursor: pointer;
 user-select: none;
 border-radius: 10px;
 box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 color: black;
}

input {
 display: none;
}

input:checked + label svg {
 fill: hsl(0deg 100% 50%);
 stroke: hsl(0deg 100% 50%);
 animation: heartButton 1s;
}

@keyframes heartButton {
 0% {
  transform: scale(1);
 }

 25% {
  transform: scale(1.3);
 }

 50% {
  transform: scale(1);
 }

 75% {
  transform: scale(1.3);
 }

 100% {
  transform: scale(1);
 }
}

input + label .action {
 position: relative;
 overflow: hidden;
 display: grid;
}

input + label .action span {
 grid-column-start: 1;
 grid-column-end: 1;
 grid-row-start: 1;
 grid-row-end: 1;
 transition: all .5s;
}

input + label .action span.option-1 {
 transform: translate(0px,0%);
 opacity: 1;
}

input:checked + label .action span.option-1 {
 transform: translate(0px,-100%);
 opacity: 0;
}

input + label .action span.option-2 {
 transform: translate(0px,100%);
 opacity: 0;
}

input:checked + label .action span.option-2 {
 transform: translate(0px,0%);
 opacity: 1;
}

</style>


================================================
FILE: Toggle-switches/barisdogansutcu_tender-dingo-64.html
================================================
<div class="love">
  <input id="switch" type="checkbox">
  <label class="love-heart" for="switch">
    <i class="left"></i>
    <i class="right"></i>
    <i class="bottom"></i>
    <div class="round"></div>
  </label>
</div>
<style>
/* From Uiverse.io by barisdogansutcu - Tags: complex, switch, heart */
.love-heart:before,#switch {
 display: none;
}

.love-heart, .love-heart::after {
 border-color: hsl(231deg 28% 86%);
 border: 1px solid;
 border-top-left-radius: 100px;
 border-top-right-radius: 100px;
 width: 10px;
 height: 8px;
 border-bottom: 0
}

.round {
 position: absolute;
 z-index: 1;
 width: 8px;
 height: 8px;
 background: hsl(0deg 0% 100%);
 box-shadow: rgb(0 0 0 / 24%) 0px 0px 4px 0px;
 border-radius: 100%;
 left: 0px;
 bottom: -1px;
 transition: all .5s ease;
 animation: check-animation2 .5s forwards;
}

input:checked + label .round {
 transform: translate(0px, 0px);
 animation: check-animation .5s forwards;
 background-color: hsl(0deg 0% 100%);
}

@keyframes check-animation {
 0% {
  transform: translate(0px, 0px);
 }

 50% {
  transform: translate(0px, 7px);
 }

 100% {
  transform: translate(7px, 7px);
 }
}

@keyframes check-animation2 {
 0% {
  transform: translate(7px, 7px);
 }

 50% {
  transform: translate(0px, 7px);
 }

 100% {
  transform: translate(0px, 0px);
 }
}

.love-heart {
 box-sizing: border-box;
 position: relative;
 transform: rotate(-45deg) translate(-50%, -33px) scale(4);
 display: block;
 border-color: hsl(231deg 28% 86%);
 cursor: pointer;
 top: 0;
}

input:checked + .love-heart, input:checked + .love-heart::after, input:checked + .love-heart .bottom {
 border-color: hsl(347deg 81% 61%);
 box-shadow: inset 6px -5px 0px 2px hsl(347deg 99% 72%);
}

.love-heart::after, .love-heart .bottom {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 border-color: hsl(231deg 28% 86%);
}

.love-heart::after {
 right: -9px;
 transform: rotate(90deg);
 top: 7px;
}

.love-heart .bottom {
 width: 11px;
 height: 11px;
 border-left: 1px solid;
 border-bottom: 1px solid;
 border-color: hsl(231deg 28% 86%);
 left: -1px;
 top: 5px;
 border-radius: 0px 0px 0px 5px;
}

</style>


================================================
FILE: Toggle-switches/catraco_brown-termite-67.html
================================================
<label class="switch-name">
  <input type="checkbox" class="checkbox">
  <div class="back"></div>
  <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
  <path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"></path>
  </svg>
  <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"></path>
  </svg>
</label>
<style>
/* From Uiverse.io by catraco - Tags: switch, dark, light, toggle, animated, light&dark, slide */
.switch-name {
  --dark-sky: #5050e5;
  --moon: #ffd365;
  --light-sky: #35d5e5;
  --sun: #ffed89;
  display: inline-block;
  position: relative;
  border-radius: 5em;
  cursor: pointer;
  width: 80px;
  height: 40px;
  overflow: hidden;
  transition: all .5s;
}

.switch-name .back {
  background-color: var(--dark-sky);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: .5s ease-in-out;
}

.switch-name .checkbox {
  opacity: 0;
}

.switch-name .checkbox:checked ~ .back {
  background-color: var(--light-sky);
}

.switch-name .checkbox:checked ~ .moon {
  transform: translate(100%) rotate(180deg);
  opacity: 0;
}

.switch-name .checkbox:checked ~ .sun {
  transform: translate(100%) rotate(180deg);
  opacity: 1;
}

.switch-name .moon {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  padding: .4em;
  fill: var(--moon);
  transition: .5s;
}

.switch-name .sun {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  padding: .4em;
  fill: var(--sun);
  transition: .5s;
  opacity: 0;
}
</style>


================================================
FILE: Toggle-switches/catraco_soft-falcon-9.html
================================================
<label class="switch">
  <input class="checkbox" type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by catraco - Tags: simple, small, switcher */
/* Switch - Container */
.switch {
  --primary: #50F080;
  --secondary: #F05050;
  --dark: #505050;
  --light: #D0D0D0;
  background-color: var(--dark);
  position: relative;
  display: inline-block;
  border-radius: 1rem;
  cursor: pointer;
  width: 50px;
  height: 25px;
}

/* Hide default HTML checkbox */
.checkbox {
  opacity: 0
}

/* The slider */
.slider {
  position: absolute;
  left: 0;
  top: 50%;
  width: 50%;
  height: 100%;
  transition: .4s;
  border-radius: 100%;
  transform: translateY(-50%);
  border: 4px solid var(--dark);
  background-color: var(--secondary);
}

.checkbox:checked + .slider {
  background-color: var(--primary);
  transform: translate(100%, -50%);
}
</style>


================================================
FILE: Toggle-switches/cbolson_slippery-treefrog-30.html
================================================
<label for="filter" class="switch" aria-label="Toggle Filter">
  <input type="checkbox" id="filter" />
  <span>Latest</span>
  <span>Popular</span>
</label>

<style>
/* From Uiverse.io by cbolson  - Tags: switch */
.switch {
  --_switch-bg-clr: #70a9c5;
  --_switch-padding: 4px; /* padding around button*/
  --_slider-bg-clr: rgba(12, 74, 110, 0.65); /* slider color unchecked */
  --_slider-bg-clr-on: rgba(12, 74, 110, 1); /* slider color checked */
  --_slider-txt-clr: #ffffff;
  --_label-padding: 1rem 2rem; /* padding around the labels -  this gives the switch it's global width and height */
  --_switch-easing: cubic-bezier(
    0.47,
    1.64,
    0.41,
    0.8
  ); /* easing on toggle switch */
  color: white;
  width: fit-content;
  display: flex;
  justify-content: center;
  position: relative;
  border-radius: 9999px;
  cursor: pointer;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
  isolation: isolate;
}

.switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.switch > span {
  display: grid;
  place-content: center;
  transition: opacity 300ms ease-in-out 150ms;
  padding: var(--_label-padding);
}
.switch::before,
.switch::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  transition: inset 150ms ease-in-out;
}
/* switch slider */
.switch::before {
  background-color: var(--_slider-bg-clr);
  inset: var(--_switch-padding) 50% var(--_switch-padding)
    var(--_switch-padding);
  transition:
    inset 500ms var(--_switch-easing),
    background-color 500ms ease-in-out;
  z-index: -1;
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.3),
    0 1px rgba(255, 255, 255, 0.3);
}
/* switch bg color */
.switch::after {
  background-color: var(--_switch-bg-clr);
  inset: 0;
  z-index: -2;
}
/* switch hover & focus */
.switch:focus-within::after {
  inset: -0.25rem;
}
.switch:has(input:checked):hover > span:first-of-type,
.switch:has(input:not(:checked)):hover > span:last-of-type {
  opacity: 1;
  transition-delay: 0ms;
  transition-duration: 100ms;
}
/* switch hover */
.switch:has(input:checked):hover::before {
  inset: var(--_switch-padding) var(--_switch-padding) var(--_switch-padding)
    45%;
}
.switch:has(input:not(:checked)):hover::before {
  inset: var(--_switch-padding) 45% var(--_switch-padding)
    var(--_switch-padding);
}
/* checked - move slider to right */
.switch:has(input:checked)::before {
  background-color: var(--_slider-bg-clr-on);
  inset: var(--_switch-padding) var(--_switch-padding) var(--_switch-padding)
    50%;
}
/* checked - set opacity */
.switch > span:last-of-type,
.switch > input:checked + span:first-of-type {
  opacity: 0.75;
}
.switch > input:checked ~ span:last-of-type {
  opacity: 1;
}

</style>
    

================================================
FILE: Toggle-switches/coding-masala_slimy-cow-34.html
================================================
<div class="toggle-switcher">
  <input type="checkbox" id="toggle-switch" class="toggle-input">
  <label for="toggle-switch" class="toggle-label"></label>
</div>

<style>
/* From Uiverse.io by coding-masala - Tags: switch */
.toggle-switcher {
  width: 50px;
  height: 25px;
  position: relative;
  margin: 20px auto;
  background: #000;
  border-radius: 50px;
}

.toggle-input {
  display: none;
}

.toggle-label {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 0 0 0 #ff0000;
}

.toggle-label::before {
  content: "";
  width: 25px;
  height: 25px;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.toggle-input:checked + .toggle-label {
  animation: shadow-animation_5020 10s linear infinite;
}

.toggle-input:checked + .toggle-label::before {
  transform: translateX(25px);
}

@keyframes shadow-animation_5020 {
  0% {
    box-shadow: 0 0 0 0 #ff0000;
  }

  50% {
    box-shadow: 0 0 25px 25px #ffa500;
  }

  100% {
    box-shadow: 0 0 0 0 #ff0000;
  }
}

</style>


================================================
FILE: Toggle-switches/cosnametv_polite-turtle-80.html
================================================
<label class="switch">
  <div class="toggle-switch">
    <input id="switch" type="checkbox" />
    <label for="switch"></label>
  </div>
</label>

<style>
/* From Uiverse.io by cosnametv  - Tags: material design, notification, switch, checkbox, download, circle, light&dark, creative */
.toggle-switch {
  position: relative;
  width: 80px;
  height: 40px;
}

.toggle-switch input {
  display: none;
}

.toggle-switch label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #2e2e2e, #4a4a4a);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.3s;
}

.toggle-switch input:checked + label {
  background: linear-gradient(to right, #66bb6a, #43a047);
}

.toggle-switch label:before {
  content: "";
  position: absolute;
  height: 36px;
  width: 36px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, background 0.3s;
}

.toggle-switch input:checked + label:before {
  transform: translateX(40px);
  background-color: #66bb6a;
}

</style>
    

================================================
FILE: Toggle-switches/csemszepp_curly-parrot-90.html
================================================
<div class="container">
<label class="switch">
	<input role="switch" type="checkbox" class="switch__input">
	<svg aria-hidden="true" height="12px" width="12px" viewBox="0 0 12 12" class="switch__icon switch__icon--light">
		<g stroke-linecap="round" stroke-width="1" stroke="#fff" fill="none">
			<circle r="2" cy="6" cx="6"></circle>
			<g stroke-dasharray="1.5 1.5">
				<polyline transform="rotate(0,6,6)" points="6 10,6 11.5"></polyline>
				<polyline transform="rotate(45,6,6)" points="6 10,6 11.5"></polyline>
				<polyline transform="rotate(90,6,6)" points="6 10,6 11.5"></polyline>
				<polyline transform="rotate(135,6,6)" points="6 10,6 11.5"></polyline>
				<polyline transform="rotate(180,6,6)" points="6 10,6 11.5"></polyline>
				<polyline transform="rotate(225,6,6)" points="6 10,6 11.5"></polyline>
				<polyline transform="rotate(270,6,6)" points="6 10,6 11.5"></polyline>
				<polyline transform="rotate(315,6,6)" points="6 10,6 11.5"></polyline>
			</g>
		</g>
	</svg>
	<svg aria-hidden="true" height="12px" width="12px" viewBox="0 0 12 12" class="switch__icon switch__icon--dark">
		<g transform="rotate(-45,6,6)" stroke-linejoin="round" stroke-width="1" stroke="#fff" fill="none">
			<path d="m9,10c-2.209,0-4-1.791-4-4s1.791-4,4-4c.304,0,.598.041.883.105-.995-.992-2.367-1.605-3.883-1.605C2.962.5.5,2.962.5,6s2.462,5.5,5.5,5.5c1.516,0,2.888-.613,3.883-1.605-.285.064-.578.105-.883.105Z"></path>
		</g>	
	</svg>
	<span class="switch__sr">Dark Mode</span>
</label>
<div></div></div>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/jkantner/pen/eYPYppR - Tags: switch, toggle switch */
:root {
  --hue: 223;
  --bg: hsl(var(--hue),10%,90%);
  --fg: hsl(var(--hue),10%,10%);
  --primary: hsl(var(--hue),90%,50%);
  --trans-dur: 0.3s;
  --trans-timing: cubic-bezier(0.76,0.05,0.24,0.95);
  --trans-timing-in: cubic-bezier(0.76,0.05,0.86,0.06);
  --trans-timing-out: cubic-bezier(0.05,0.76,0.06,0.86);
  font-size: calc(40px + (80 - 40) * (100px - 320px) / (2560 - 320));
}

.container,
.switch__input {
  color: var(--fg);
  font: 1em/1.5 sans-serif;
}

.container {
  background-color: var(--bg);
  display: flex;
  height: 100%;
  transition: background-color var(--trans-dur),
		color var(--trans-dur);
}

.container:has(.switch__input:checked) {
  background-color: var(--fg);
  color: var(--bg);
}

.switch {
  margin: auto;
  position: relative;
}

.switch__icon,
.switch__input {
  display: block;
}

.switch__icon {
  position: absolute;
  top: 0.375em;
  right: 0.375em;
  width: 0.75em;
  height: 0.75em;
  transition: opacity calc(var(--trans-dur) / 2),
		transform calc(var(--trans-dur) / 2);
}

.switch__icon polyline {
  transition: stroke-dashoffset calc(var(--trans-dur) / 2);
}

.switch__icon--light,
.switch__icon--light polyline {
  transition-delay: calc(var(--trans-dur) / 2);
  transition-timing-function: var(--trans-timing-out);
}

.switch__icon--dark {
  opacity: 0;
  transform: translateX(-0.75em) rotate(30deg) scale(0.75);
  transition-timing-function: var(--trans-timing-in);
}

.switch__input {
  background-color: hsl(210,90%,70%);
  border-radius: 0.75em;
  box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,0),
		0.125em 0.125em 0.25em hsla(var(--hue),90%,10%,0.2);
  outline: transparent;
  position: relative;
  width: 3em;
  height: 1.5em;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--trans-dur) var(--trans-timing),
		box-shadow 0.15s linear;
}

.switch__input:focus-visible {
  box-shadow: 0 0 0 0.125em hsl(var(--hue),90%,50%),
		0.125em 0.125em 0.25em hsla(var(--hue),90%,10%,0.2);
}

.switch__input:before,
.switch__input:after {
  content: "";
  display: block;
  position: absolute;
}

.switch__input:before {
  background-color: hsl(50,90%,50%);
  border-radius: inherit;
  mask-image: linear-gradient(120deg,hsl(0,0%,0%) 20%,hsla(0,0%,0%,0) 80%);
  -webkit-mask-image: linear-gradient(120deg,hsl(0,0%,0%) 20%,hsla(0,0%,0%,0) 80%);
  inset: 0;
  transition: background-color var(--trans-dur) var(--trans-timing);
}

.switch__input:after {
  background-color: hsl(0,0%,100%);
  border-radius: 50%;
  box-shadow: 0.05em 0.05em 0.05em hsla(var(--hue),90%,10%,0.1);
  top: 0.125em;
  left: 0.125em;
  width: 1.25em;
  height: 1.25em;
  transition: background-color var(--trans-dur) var(--trans-timing),
		transform var(--trans-dur) var(--trans-timing);
  z-index: 1;
}

.switch__input:checked {
  background-color: hsl(290,90%,40%);
}

.switch__input:checked:before {
  background-color: hsl(220,90%,40%);
}

.switch__input:checked:after {
  background-color: hsl(0,0%,0%);
  transform: translateX(1.5em);
}

.switch__input:checked ~ .switch__icon--light,
.switch__input:checked ~ .switch__icon--light polyline {
  transition-delay: 0s;
  transition-timing-function: var(--trans-timing-in);
}

.switch__input:checked ~ .switch__icon--light {
  opacity: 0;
  transform: translateX(-0.75em) rotate(-30deg) scale(0.75);
}

.switch__input:checked ~ .switch__icon--light polyline {
  stroke-dashoffset: 1.5;
}

.switch__input:checked ~ .switch__icon--dark {
  opacity: 1;
  transform: translateX(-1.5em);
  transition-delay: calc(var(--trans-dur) / 2);
  transition-timing-function: var(--trans-timing-out);
}

.switch__sr {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
}

</style>


================================================
FILE: Toggle-switches/csemszepp_empty-chipmunk-58.html
================================================

    <div class="switch">
        <label for="toggle">
            <div class="background"></div>
            <input checked="" type="checkbox" class="toggle-switch" id="toggle">
            <div class="cookie">
                <span class="cookie-part-1"></span>
                <span class="cookie-part-2"></span>
                <span class="cookie-part-3"></span>
                <span class="cookie-part-4"></span>
                <span class="chocolate-chips-1a"></span>
                <span class="chocolate-chips-1b"></span>
                <span class="chocolate-chips-1c"></span>
                <span class="chocolate-chips-1d"></span>
                <span class="chocolate-chips-2a"></span>
                <span class="chocolate-chips-2b"></span>
                <span class="chocolate-chips-2c"></span>
                <span class="chocolate-chips-2d"></span>
                <span class="chocolate-chips-2e"></span>
                <span class="chocolate-chips-3a"></span>
                <span class="chocolate-chips-3b"></span>
                <span class="chocolate-chips-3c"></span>
                <span class="chocolate-chips-4a"></span>
                <span class="chocolate-chips-4b"></span>
                <span class="chocolate-chips-4c"></span>
            </div>
        </label>
    </div>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/agalliat/pen/RwrEqOG - Tags: switch, toggle switch */
.container {
  height: 100%;
  background: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.title {
  height: 25%;
  font-family: Cookie;
  font-size: 48pt;
  text-align: center;
}

.switch {
  --cookie-size: 3em;
  --outer-border: 0.5em;
  --inner-border: 0.5em;
  --border-color: #d8a04d;
  --height: calc(var(--cookie-size) + (2 * (var(--outer-border) + var(--inner-border))));
  --width: calc(var(--height) * 2);
  position: relative;
  width: var(--width);
  height: var(--height);
}

.switch input {
  display: none;
}

.switch label {
  cursor: pointer;
}

.switch input:checked ~ .cookie {
  transform: translateX(calc(var(--width) / 2)) rotate(360deg);
  color: #d8a04d;
  background-color: currentColor;
}

.switch input:checked ~ .cookie span[class^="cookie-part-"],
.switch input:checked ~ .cookie span[class^="chocolate-chips-"] {
  transform: translate(0px, 0px);
}

.background {
  height: 100%;
  border-radius: calc(var(--width) / 4);
  border: var(--outer-border) solid var(--border-color);
  background: linear-gradient(to right, #484848 0%,#202020 100%);
}

.cookie {
  --chip-size: calc(var(--cookie-size) / 8);
  --split-offset: calc(var(--cookie-size) / 24);
  position: absolute;
  top: calc(var(--outer-border) + var(--inner-border));
  left: calc(var(--outer-border) + var(--inner-border));
  ;
    width: var(--cookie-size);
  height: var(--cookie-size);
  border-radius: 50%;
  transition: transform 1s linear;
}

.cookie span[class^="cookie-part-"] {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: #d8a04d;
  background-color: currentColor;
}

.cookie-part-1 {
  clip-path: polygon(0% 0%, 55% 0%, 52% 8%, 55% 10%, 55% 16%, 52% 19%, 52% 24%, 47% 26%, 45% 30%, 50% 33%, 47% 37%, 47% 42%, 51% 47%, 47% 49%, 40% 50%, 34% 50%, 30% 53%, 25% 53%, 20% 56%, 16% 56%, 14% 61%, 0% 60%);
  transform: translate(calc(var(--split-offset) * -1), calc(var(--split-offset) * -1));
}

.cookie-part-2 {
  clip-path: polygon(55% 0%, 100% 0%, 100% 72%, 88% 68%, 84% 61%, 78% 60%, 77% 56%, 75% 53%, 71% 55%, 66% 50%, 63% 47%, 58% 49%, 56% 44%, 51% 47%, 47% 42%, 47% 37%, 50% 33%, 45% 30%, 47% 26%, 52% 24%, 52% 19%, 55% 16%, 55% 10%, 52% 8%);
  transform: translate(calc(var(--split-offset) * 1), calc(var(--split-offset) * -1));
}

.cookie-part-3 {
  clip-path: polygon(0% 60%, 14% 61%, 16% 56%, 20% 56%, 25% 53%, 30% 53%, 34% 50%, 40% 50%, 47% 49%, 51% 47%, 55% 53%, 60% 56%, 56% 62%, 53% 67%, 57% 72%, 57% 81%, 57% 87%, 63% 92%, 60% 100%, 0% 100%);
  transform: translate(calc(var(--split-offset) * -1), calc(var(--split-offset) * 1));
}

.cookie-part-4 {
  clip-path: polygon(100% 100%, 100% 72%, 88% 68%, 84% 61%, 78% 60%, 77% 56%, 75% 53%, 71% 55%, 66% 50%, 63% 47%, 58% 49%, 56% 44%, 51% 47%, 55% 53%, 60% 56%, 56% 62%, 53% 67%, 57% 72%, 57% 81%, 57% 87%, 63% 92%, 60% 100%);
  transform: translate(calc(var(--split-offset) * 1), calc(var(--split-offset) * 1));
}

.cookie span[class^="chocolate-chips-"] {
  position: absolute;
  color: #754e27;
  background-color: #865729;
  height: var(--chip-size);
  width: var(--chip-size);
  border-radius: 50%;
  box-shadow: inset -0.35em 0;
}

.cookie .chocolate-chips-1a {
  top: 41%;
  left: 5%;
}

.cookie .chocolate-chips-1b {
  top: 20%;
  left: 18%;
}

.cookie .chocolate-chips-1c {
  top: 35%;
  left: 33%;
}

.cookie .chocolate-chips-1d {
  top: 6%;
  left: 39%;
}

.cookie .chocolate-chips-2a {
  --chip-size: calc(var(--cookie-size) / 10);
  top: 24%;
  right: 35%;
}

.cookie .chocolate-chips-2b {
  top: 36%;
  right: 23%;
}

.cookie .chocolate-chips-2c {
  top: 7%;
  right: 29%;
}

.cookie .chocolate-chips-2d {
  top: 42%;
  right: 7%;
}

.cookie .chocolate-chips-2e {
  top: 19%;
  right: 12%;
}

.cookie .chocolate-chips-3a {
  --chip-size: calc(var(--cookie-size) / 6);
  bottom: 24%;
  left: 18%;
}

.cookie .chocolate-chips-3b {
  bottom: 34%;
  left: 42%;
}

.cookie .chocolate-chips-3c {
  bottom: 9%;
  left: 39%;
}

.cookie .chocolate-chips-4a {
  bottom: 27%;
  right: 29%;
}

.cookie .chocolate-chips-4b {
  bottom: 12%;
  right: 23%;
}

.cookie .chocolate-chips-4c {
  --chip-size: calc(var(--cookie-size) / 12);
  bottom: 28%;
  right: 17%;
}

.cookie span[class^="chocolate-chips-1"] {
  transform: translate(calc(var(--split-offset) * -1), calc(var(--split-offset) * -1));
}

.cookie span[class^="chocolate-chips-2"] {
  transform: translate(calc(var(--split-offset) * 1), calc(var(--split-offset) * -1));
}

.cookie span[class^="chocolate-chips-3"] {
  transform: translate(calc(var(--split-offset) * -1), calc(var(--split-offset) * 1));
}

.cookie span[class^="chocolate-chips-4"] {
  transform: translate(calc(var(--split-offset) * 1), calc(var(--split-offset) * 1));
}

</style>


================================================
FILE: Toggle-switches/csemszepp_horrible-mouse-59.html
================================================
<input class="togglesw" type="checkbox">
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/t_afif/pen/PoEebrz - Tags: switch, toggle, toggle switch */
.togglesw {
  --s: 50px;
 /* adjust this to control the size*/
  height: calc(var(--s) + var(--s)/5);
  width: auto;
 /* some browsers need this */
  aspect-ratio: 2.25;
  border-radius: var(--s);
  margin: calc(var(--s)/2);
  display: grid;
  cursor: pointer;
  background-color: #ff7a7a;
  box-sizing: content-box;
  overflow: hidden;
  transition: .3s .1s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.togglesw:before {
  content: "";
  padding: calc(var(--s)/10);
  --_g: radial-gradient(circle closest-side at calc(100% - var(--s)/2) 50%,#000 96%,#0000);
  background: var(--_g) 0 /var(--_p,var(--s)) 100% no-repeat content-box,
    var(--_g) var(--_p,0)/var(--s)  100% no-repeat content-box,
    #fff;
  mix-blend-mode: darken;
  filter: blur(calc(var(--s)/12)) contrast(11);
  transition: .4s, background-position .4s .1s,
    padding cubic-bezier(0,calc(var(--_i,-1)*200),1,calc(var(--_i,-1)*200)) .25s .1s;
}

.togglesw:checked {
  background-color: #85ff7a;
}

.togglesw:checked:before {
  padding: calc(var(--s)/10 + .05px) calc(var(--s)/10);
  --_p: 100%;
  --_i: 1;
}
</style>


================================================
FILE: Toggle-switches/csemszepp_rude-dolphin-85.html
================================================
<label class="switch">
	<input type="checkbox" class="chbox">
	<div class="slider slider--0">ON</div>
	<div class="slider slider--1">
		<div></div>
		<div></div>
	</div>
	<div class="slider slider--2"></div>
	<div class="slider slider--3">OFF</div>
</label>
<style>
/* From Uiverse.io by csemszepp - Source: codepen.io/narohan/pen/dyNwjJL - Tags: switch, checkbox, cool checkbox */
.switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 80px;
  border: 2px solid #dcdcdc;
  background: #e0e0e0;
  box-shadow: 7px 7px 23px #bebebe, -7px -7px 23px #ffffff;
  overflow: hidden;
  border-radius: 60px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.chbox:checked + .slider:before {
  background: white;
  box-shadow: none;
}

.chbox:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

.slider {
  color: #9a9a9a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: sans-serif;
}

.slider--0 {
  color: white;
  font-weight: 600;
  background-color: #49d84e;
}

.slider--1 div {
  transition: 0.5s;
}

.slider--1 div {
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
}

.chbox:checked ~ .slider--1 div:first-child {
  transform: translateY(-100%);
  transition-delay: 1s;
}

.chbox:checked ~ .slider--1 div:last-child {
  transform: translateY(100%);
  transition-delay: 1s;
}

.chbox:checked ~ .slider--2 {
  transform: translateX(100%);
  transition-delay: 0.5s;
}

.chbox:checked ~ .slider--3 {
  transform: translateX(-100%);
  transition-delay: 0s;
}

.slider--1 div:first-child {
  transform: translateY(0);
  top: 0;
  background-color: #f3f3f3;
  transition-delay: 0s;
}

.slider--1 div:last-child {
  transform: translateY(0);
  bottom: 0;
  background-color: #f3f3f3;
  border-top: 1px solid #e0e0e0;
  transition-delay: 0s;
}

.slider--2 {
  background-color: #e6e6e6;
  transition-delay: 0.5s;
  transform: translateX(0);
  border-left: 1px solid #d2d2d2;
}

.slider--3 {
  background-color: #d2d2d2;
  transition-delay: 1s;
  transform: translatex(0);
  border-right: 1px solid #d2d2d2;
}

</style>


================================================
FILE: Toggle-switches/csemszepp_soft-pug-40.html
================================================
<span class="switch">
	<span class="switch-border1">
		<span class="switch-border2">
			<input checked="" type="checkbox" id="switch1">
			<label for="switch1"></label>
			<span class="switch-top"></span>
			<span class="switch-shadow"></span>
			<span class="switch-handle"></span>
			<span class="switch-handle-left"></span>
			<span class="switch-handle-right"></span>
			<span class="switch-handle-top"></span>
			<span class="switch-handle-bottom"></span>
			<span class="switch-handle-base"></span>
			<span class="switch-led switch-led-green">
				<span class="switch-led-border">
					<span class="switch-led-light">
						<span class="switch-led-glow"></span>
					</span>
				</span>
			</span>
			<span class="switch-led switch-led-red">
				<span class="switch-led-border">
					<span class="switch-led-light">
						<span class="switch-led-glow"></span>
					</span>
				</span>
			</span>
		</span>
	</span>
</span>

<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/bhargavmdubal/pen/wvQBMqQ - Tags: skeuomorphism, switch, theme-switch, toggle switch */
.switch {
  display: inline-block;
  margin: 10em 2em;
  position: relative;
  border-radius: 3.5em;
  -webkit-box-shadow: 0 0 0.5em rgba(2,255,255,0.2);
  -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
  box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
}

.switch label {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.switch input {
  display: none;
}

.switch span {
  display: block;
  -webkit-transition: top 0.2s;
  -moz-transition: top 0.2s;
  -ms-transition: top 0.2s;
  -o-transition: top 0.2s;
  transition: top 0.2s;
}

.switch-border1 {
  border: 0.1em solid #000;
  border-radius: 3.5em;
  -webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
  -moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
  box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
}

.switch-border2 {
  width: 6.6em;
  height: 12.6em;
  position: relative;
  border: 0.1em solid #323232;
  background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
  background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
  border-radius: 3.4em;
}

.switch-border2:before,
.switch-border2:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: .3;
  border-radius: 3.4em;
}

.switch-border2:before {
  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0)));
  background: -webkit-linear-gradient(#000, rgba(0,0,0,0));
  background: -moz-linear-gradient(#000, rgba(0,0,0,0));
  background: -ms-linear-gradient(#000, rgba(0,0,0,0));
  background: -o-linear-gradient(#000, rgba(0,0,0,0));
  background: linear-gradient(#000, rgba(0,0,0,0));
}

.switch-border2:after {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));
  background: -webkit-linear-gradient(rgba(0,0,0,0), #000);
  background: -moz-linear-gradient(rgba(0,0,0,0), #000);
  background: -ms-linear-gradient(rgba(0,0,0,0), #000);
  background: -o-linear-gradient(rgba(0,0,0,0), #000);
  background: linear-gradient(rgba(0,0,0,0), #000);
}

.switch-top {
  width: 100%;
  height: 84%;
  position: absolute;
  top: 8%;
  left: 0;
  z-index: 1;
  background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
  background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
  border-radius: 3.4em;
}

.switch-shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border-radius: 3.4em;
  -webkit-box-shadow: 0 0 2em black inset;
  -moz-box-shadow: 0 0 2em black inset;
  box-shadow: 0 0 2em black inset;
}

.switch-handle-left,
.switch-handle-right {
  content: '';
  display: block;
  width: 3.6em;
  height: 0;
  position: absolute;
  top: 6.6em;
  z-index: 2;
  border-bottom: 4.5em solid #111;
  border-left: 0.7em solid transparent;
  border-right: 0.7em solid transparent;
  border-radius: 0;
}

.switch-handle-left {
  left: 0.8em;
}

.switch-handle-right {
  right: 0.8em;
}

.switch-handle {
  width: 3.6em;
  height: 4.5em;
  position: absolute;
  top: 6.6em;
  left: 1.5em;
  z-index: 3;
  background: #333;
  background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
  background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
  border-radius: 0;
}

.switch-handle-top {
  width: 5em;
  height: 5em;
  position: absolute;
  top: 8.5em;
  left: 0.8em;
  z-index: 4;
  background-color: #555;
  background-image: -webkit-gradient(linear, left top, right top, from(#5F5F5F), to(#878787));
  background-image: -webkit-linear-gradient(left, #5F5F5F, #878787);
  background-image: -moz-linear-gradient(left, #5F5F5F, #878787);
  background-image: -ms-linear-gradient(left, #5F5F5F, #878787);
  background-image: -o-linear-gradient(left, #5F5F5F, #878787);
  background-image: linear-gradient(to right, #5F5F5F, #878787);
  border-top: 0.2em solid #AEB2B3;
  border-radius: 2.5em;
}

.switch-handle-bottom {
  width: 3.6em;
  height: 3.6em;
  position: absolute;
  top: 4.7em;
  left: 1.5em;
  z-index: 3;
  background: #333;
  background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
  background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
  border-top: 0.2em solid #141414;
  border-radius: 1.8em;
}

.switch-handle-base {
  width: 4.2em;
  height: 4.2em;
  position: absolute;
  top: 3.8em;
  left: 1.2em;
  z-index: 2;
  border-top: 0.2em solid rgba(255,255,255,0.35);
  border-radius: 2.1em;
  -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
  -moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
  box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
}

.switch-led {
  position: absolute;
  left: 2em;
  border-radius: 1.4em;
}

.switch-led-border {
  border: 0.2em solid black;
  border-radius: 1.3em;
}

.switch-led-light {
  border-radius: 1.1em;
  -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
  -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
  box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
}

.switch-led-glow {
  width: 2em;
  height: 2em;
  position: relative;
  border-radius: 1em;
}

.switch-led-glow:before {
  content: '';
  display: block;
  width: 0.6em;
  height: 0.6em;
  position: absolute;
  top: 0.3em;
  left: 0.7em;
  background: rgba(255,255,255,0.2);
  border-radius: 0.3em;
  -webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75);
  -moz-box-shadow: 0 0 1em rgba(255,255,255,0.75);
  box-shadow: 0 0 1em rgba(255,255,255,0.75);
}

.switch-led-glow:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.2;
  filter: alpha(opacity=20);
  border: 1em solid #fff;
  border-color: transparent #fff transparent #fff;
  border-radius: 1em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.switch-led:after {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  color: #666;
  font-family: arial, verdana, sans-serif;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0.1em rgba(0,0,0,0.7);
}

.switch-led-green:after {
  content: 'ON';
  top: -1.8em;
}

.switch-led-red:after {
  content: 'OFF';
  bottom: -1.8em;
}

.switch-led-green {
  top: -5em;
  border-top: 0.1em solid rgba(0,161,75,0.5);
  border-bottom: 0.1em solid rgba(255,255,255,0.25);
}

.switch-led-green .switch-led-light {
  background: rgb(0,161,75);
  border: 0.1em solid rgb(0,104,56);
}

.switch-led-red {
  bottom: -5em;
  border-top: 0.1em solid rgba(237,28,36,0.2);
  border-bottom: 0.1em solid rgba(255,255,255,0.25);
  -webkit-box-shadow: 0 0 3em rgb(237,28,36);
  -moz-box-shadow: 0 0 3em rgb(237,28,36);
  box-shadow: 0 0 3em rgb(237,28,36);
}

.switch-led-red .switch-led-light {
  background: rgb(237,28,36);
  border: 0.1em solid rgb(161,30,45);
}

.switch-led-red .switch-led-glow {
  background: #fff;
  background: rgba(255, 255, 255, 0.3);
  filter: alpha(opacity=30);
}

/* Switch on */

.switch input:checked~.switch-handle-left, .switch input:checked~.switch-handle-right {
  top: 1.5em;
  border-bottom: 0;
  border-top: 4.5em solid #111;
}

.switch input:checked~.switch-handle {
  top: 1.5em;
}

.switch input:checked~.switch-handle-top {
  top: -1em;
  border-top: 0;
  border-bottom: 0.2em solid #AEB2B3;
}

.switch input:checked~.switch-handle-bottom {
  top: 4.2em;
  border-top: 0;
  border-bottom: 0.2em solid #141414;
}

.switch input:checked~.switch-handle-base {
  top: 4.5em;
  border-top: 0;
  border-bottom: 0.2em solid rgba(255,255,255,0.35);
}

.switch input:checked~.switch-led-green {
  -webkit-box-shadow: 0 0 3em rgb(0,161,75);
  -moz-box-shadow: 0 0 3em rgb(0,161,75);
  box-shadow: 0 0 3em rgb(0,161,75);
}

.switch input:checked~.switch-led-green .switch-led-glow {
  background: #fff;
  background: rgba(255, 255, 255, 0.4);
  filter: alpha(opacity=40);
}

.switch input:checked~.switch-led-red {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.switch input:checked~.switch-led-red .switch-led-glow {
  background: rgba(255, 255, 255, 0);
  filter: alpha(opacity=0);
}

#switchwhite {
  visibility: hidden;
  clip: rect(0 0 0 0);
  position: absolute;
  left: 9999px;
}

.switchwhite {
  display: block;
  width: 130px;
  height: 60px;
  margin: 70px auto;
  position: relative;
  background: #ced8da;
 /* Old browsers */
  background: -moz-linear-gradient(left,  #ced8da 0%, #d8e0e3 29%, #ccd4d7 34%, #d4dcdf 62%, #fff9f4 68%, #e1e9ec 74%, #b7bfc2 100%);
 /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ced8da), color-stop(29%,#d8e0e3), color-stop(34%,#ccd4d7), color-stop(62%,#d4dcdf), color-stop(68%,#fff9f4), color-stop(74%,#e1e9ec), color-stop(100%,#b7bfc2));
 /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
 /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
 /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
 /* IE10+ */
  background: linear-gradient(to right,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
 /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 );
 /* IE6-9 */
  transition: all 0.2s ease-out;
  cursor: pointer;
  border-radius: 0.35em;
  box-shadow: 0 0 1px 2px rgba(0,0,0,0.7),
    inset 0 2px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 1px rgba(0,0,0,0.3),
    0 8px 10px rgba(0,0,0,0.15);
}

.switchwhite:before {
  display: block;
  position: absolute;
  left: -35px;
  right: -35px;
  top: -25px;
  bottom: -25px;
  z-index: -2;
  content: "";
  border-radius: 0.4em;
  background: #d5dde0;
  background: linear-gradient(#d7dfe2, #bcc7cd);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6),
    inset 0 -1px 1px 1px rgba(0,0,0,0.3),
    0 0 8px 2px rgba(0,0,0,0.2),
    0 2px 4px 2px rgba(0,0,0,0.1);
  pointer-events: none;
  transition: all 0.2s ease-out;
}

.switchwhite:after {
  content: "";
  position: absolute;
  right: -25px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #788b91;
  margin-top: -8px;
  z-index: -1;
  box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),
    inset 0 -2px 2px rgba(0,0,0,0.2),
    0 1px 0 white,
    0 -1px 0 rgba(0,0,0,0.5),
    -47px 32px 15px 13px rgba(0,0,0,0.25);
}

#switchwhite:checked ~ .switchwhite {
  background: #b7bfc2;
 /* Old browsers */
  background: -moz-linear-gradient(left, #b7bfc2 0%, #e1e9ec 26%, #fff9f4 32%, #d4dcdf 38%, #ccd4d7 66%, #d8e0e3 71%, #ced8da 100%);
 /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b7bfc2), color-stop(26%,#e1e9ec), color-stop(32%,#fff9f4), color-stop(38%,#d4dcdf), color-stop(66%,#ccd4d7), color-stop(71%,#d8e0e3), color-stop(100%,#ced8da));
 /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
 /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
 /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
 /* IE10+ */
  background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
 /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 );
 /* IE6-9 */
}

#switchwhite:checked ~ .switchwhite:after {
  background: #b1ffff;
  box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),
    inset 0 -2px 2px rgba(0,0,0,0.2),
    0 1px 0 white,
    0 -1px 0 rgba(0,0,0,0.5),
    -110px 32px 15px 13px rgba(0,0,0,0.25);
}
</style>


================================================
FILE: Toggle-switches/csemszepp_terrible-frog-94.html
================================================
<div class="form">
<input type="checkbox" id="bubble">
<label class="bubble" for="bubble"></label>
</div>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/onediv/pen/pjgNqJ - Tags: switch, toggle switch */
.form {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100px;
  padding: 10px 0;
  width: 260px;
  transform: translate3d(-50%,-50%,0);
}

.form:before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  height: 100%;
  width: 120px;
  background-color: #243548;
  border-radius: 50%;
  box-shadow: 75px 0 0 #243548, 150px 0 0 #243548;
}

.form:after {
  content: '';
  position: absolute;
  top: -94px;
  left: 70px;
  height: 100%;
  width: 120px;
  border-radius: 50%;
}

.form input {
  position: absolute;
  left: -9999px;
}

.bubble {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  top: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  transform: translate3d(-75%,-50%,0);
  margin-left: -50px;
  background: #BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  border-right: 0px solid #BBBBBB;
  border-left: 0px solid #BBBBBB;
  animation: toggle-reverse 2s 1;
}

#bubble:checked + .bubble {
  animation: toggle 2s 1;
  transform: translate3d(75%,-50%,0);
  background: #3CCC97;
}

.bubble:after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -15px;
  margin-left: -2px;
  height: 30px;
  width: 4px;
  background: #fff;
  left: 50%;
  transform: rotate(45deg);
  border-radius: 2px;
  transition: 500ms ease all 1.25s;
}

.bubble:before {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -15px;
  margin-left: -2px;
  height: 30px;
  width: 4px;
  background: #fff;
  left: 50%;
  transform: rotate(-45deg);
  border-radius: 2px;
  transition: 500ms ease all 1.25s;
}

#bubble:checked + .bubble:after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -15px;
  margin-left: 5px;
  height: 30px;
  width: 4px;
  background: #fff;
  left: 50%;
  transform: rotate(225deg);
  border-radius: 2px;
}

#bubble:checked + .bubble:before {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -7px;
  margin-left: -10px;
  height: 20px;
  width: 4px;
  background: #fff;
  left: 50%;
  transform: rotate(-215deg);
  border-radius: 2px;
}

@keyframes toggle {
  0% {
    transform: translate3d(-75%,-50%,0);
    border-right: 0 solid #BBBBBB;
    border-left: 0 solid #BBBBBB;
    background: #BBBBBB;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    height: 100px;
  }

  20% {
    border-right: 0 solid #BBBBBB;
    border-left: 0 solid #BBBBBB;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    transform: translate3d(-75%,-50%,0);
    height: 100px;
  }

  40% {
    border-left: 0 solid #BBBBBB;
    border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%;
    height: 90px;
  }

  50% {
    transform: translate3d(0%,-50%,0);
    border-right: 25px solid #BBBBBB;
    border-left: 0 solid #BBBBBB;
    background: #BBBBBB;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    height: 90px;
  }

  75% {
    border-left: 25px solid #3CCC97;
    border-color: #3CCC97;
    background: #3CCC97;
    border-radius: 65% 35% 35% 65% / 50% 50% 50% 50%;
    height: 90px;
  }

  100% {
    border-right: 0 solid #3CCC97;
    border-left: 0 solid #3CCC97;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    transform: translate3d(75%,-50%,0);
    height: 100px;
    width: 100px
  }
}

@keyframes toggle-reverse {
  0% {
    transform: translate3d(75%,-50%,0);
    background: #3CCC97;
    border-right: 0 solid #3CCC97;
    border-left: 0 solid #3CCC97;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    height: 100px;
  }

  20% {
    border-right: 0 solid #3CCC97;
    border-left: 0 solid #3CCC97;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    transform: translate3d(75%,-50%,0);
    height: 100px;
  }

  40% {
    border-right: 0 solid #3CCC97;
    border-radius: 65% 35% 35% 65% / 50% 50% 50% 50%;
    height: 90px;
  }

  50% {
    transform: translate3d(0%,-50%,0);
    border-left: 25px solid #3CCC97;
    border-right: 0 solid #3CCC97;
    background: #3CCC97;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    height: 90px;
  }

  75% {
    border-right: 25px solid #BBBBBB;
    border-color: #BBBBBB;
    background: #BBBBBB;
    border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%;
    height: 90px;
  }

  100% {
    border-right: 0 solid #BBBBBB;
    border-left: 0 solid #BBBBBB;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    transform: translate3d(-75%,-50%,0);
    height: 100px;
    width: 100px
  }
}
</style>


================================================
FILE: Toggle-switches/csemszepp_tiny-emu-73.html
================================================
<div class="content">
  <label class="switch">
    <input type="checkbox" class="input">
    <span class="slider round"></span>
  </label>
</div>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/GemmaCroad/pen/NWxjrVG - Tags: switch, toggle, toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #6E6E6E;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

.input:checked + .slider {
  background-color: #1849AB;
}

.input:focus + .slider {
  box-shadow: 0 0 0 4px rgba(21, 156, 228, 0.7);
  outline: none;
}

.input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>


================================================
FILE: Toggle-switches/csemszepp_witty-fly-56.html
================================================
<div class="container">
<label class="switch">
  <input class="togglesw" type="checkbox" checked="">
  <div class="indicator left"></div>
  <div class="indicator right"></div>
  <div class="button"></div>
</label>
</div>
<style>
/* From Uiverse.io by csemszepp - Source: codepen.io/ykadosh/pen/jOwjmJe - Tags: neumorphism, skeuomorphism, switch, toggle switch */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  --hue: 220deg;
  --width: 15rem;
  --accent-hue: 22deg;
  --duration: 0.6s;
  --easing: cubic-bezier(1, 0, 1, 1);
}

.togglesw {
  display: none;
}

.switch {
  --shadow-offset: calc(var(--width) / 20);
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: var(--width);
  height: calc(var(--width) / 2.5);
  border-radius: var(--width);
  box-shadow: inset 10px 10px 10px hsl(var(--hue) 20% 80%),
    inset -10px -10px 10px hsl(var(--hue) 20% 93%);
}

.indicator {
  content: '';
  position: absolute;
  width: 40%;
  height: 60%;
  transition: all var(--duration) var(--easing);
  box-shadow: inset 0 0 2px hsl(var(--hue) 20% 15% / 60%),
    inset 0 0 3px 2px hsl(var(--hue) 20% 15% / 60%),
    inset 0 0 5px 2px hsl(var(--hue) 20% 45% / 60%);
}

.indicator.left {
  --hue: var(--accent-hue);
  overflow: hidden;
  left: 10%;
  border-radius: 100px 0 0 100px;
  background: linear-gradient(180deg, hsl(calc(var(--accent-hue) + 20deg) 95% 80%) 10%, hsl(calc(var(--accent-hue) + 20deg) 100% 60%) 30%, hsl(var(--accent-hue) 90% 50%) 60%, hsl(var(--accent-hue) 90% 60%) 75%, hsl(var(--accent-hue) 90% 50%));
}

.indicator.left::after {
  content: '';
  position: absolute;
  opacity: 0.6;
  width: 100%;
  height: 100%;
}

.indicator.right {
  right: 10%;
  border-radius: 0 100px 100px 0;
  background-image: linear-gradient(180deg, hsl(var(--hue) 20% 95%), hsl(var(--hue) 20% 65%) 60%, hsl(var(--hue) 20% 70%) 70%, hsl(var(--hue) 20% 65%));
}

.button {
  position: absolute;
  z-index: 1;
  width: 55%;
  height: 80%;
  left: 5%;
  border-radius: 100px;
  background-image: linear-gradient(160deg, hsl(var(--hue) 20% 95%) 40%, hsl(var(--hue) 20% 65%) 70%);
  transition: all var(--duration) var(--easing);
  box-shadow: 2px 2px 3px hsl(var(--hue) 18% 50% / 80%),
    2px 2px 6px hsl(var(--hue) 18% 50% / 40%),
    10px 20px 10px hsl(var(--hue) 18% 50% / 40%),
    20px 30px 30px hsl(var(--hue) 18% 50% / 60%);
}

.button::before, 
.button::after {
  content: '';
  position: absolute;
  top: 10%;
  width: 41%;
  height: 80%;
  border-radius: 100%;
}

.button::before {
  left: 5%;
  box-shadow: inset 1px 1px 2px hsl(var(--hue) 20% 85%);
  background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 85%) 80%);
}

.button::after {
  right: 5%;
  box-shadow: inset 1px 1px 3px hsl(var(--hue) 20% 70%);
  background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 75%) 80%);
}

.togglesw:checked ~ .button {
  left: 40%;
}

.togglesw:not(:checked) ~ .indicator.left,
.togglesw:checked ~ .indicator.right {
  box-shadow: inset 0 0 5px hsl(var(--hue) 20% 15% / 100%),
    inset 20px 20px 10px hsl(var(--hue) 20% 15% / 100%),
    inset 20px 20px 15px hsl(var(--hue) 20% 45% / 100%);
}
</style>


================================================
FILE: Toggle-switches/csozidev_weak-cheetah-44.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
  <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAQABADASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIG/8QAIxAAAgIABQQDAAAAAAAAAAAAAQMCBAAREiExBUFRcROBsf/EABQBAQAAAAAAAAAAAAAAAAAAAAX/xAAWEQADAAAAAAAAAAAAAAAAAAAAEiL/2gAMAwEAAhEDEQA/AMBTp03dNglMVuttjqnKQ2UPOfntkOThbqVVUJ12BKnogZQZpy+Ucc8knwePWJrWqyqEHVmrTahEBqpbBoAH1n635wt3a9mjN1p8X2pw0qVEbKB/CO/c4OphSVP/2Q==" class="off">
  <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAQABADASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAQIEBf/EACMQAAEDAwQDAQEAAAAAAAAAAAQBAgUDESEAEjFBBlFhMkL/xAAUAQEAAAAAAAAAAAAAAAAAAAAF/8QAGBEAAwEBAAAAAAAAAAAAAAAAABIiMUH/2gAMAwEAAhEDEQA/AM+Bg4mS8coRccMOdNG01qVyH/kRvHPKKmMdr8uujPwUTG+NkRpw1AKWCbvHKa2zTGphc9u9p0q+rLqeMl4kSCGkYgtoE0HTahIz3bWGNanPrdyqWzn7p5ibh5CArnyZNMyVLpK0QSkt2BNXtVX+7ol1wuLJiyaHt+6Kyp//2Q==" class="on">
</label>
<style>
/* From Uiverse.io by csozidev - Tags: minimalist, switch, click, click effect, interactive, minecraft */
/* Minecraft switch made by: csozi | Website: english.csozi.hu*/

/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 4em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 1;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.off {
  position: absolute;
  content: "";
  height: 2em;
  width: 2em;
  background-color: white;
  transition: .4s;
  image-rendering: pixelated;
  opacity: 1;
}

.on {
  position: absolute;
  content: "";
  height: 2em;
  width: 2em;
  background-color: white;
  transition: .4s;
  image-rendering: pixelated;
  opacity: 0;
}

.switch input:checked + .slider {
  background-color: #ccc;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #ccc;
}

.switch input:checked ~ .off {
  transform: translateX(2em);
}

.switch input:checked ~ .on {
  transform: translateX(2em);
  opacity: 1;
}
</style>


================================================
FILE: Toggle-switches/cssbuttons-io_mean-dolphin-24.html
================================================
<div class="toggle-border">
  <input id="one" type="checkbox">
  <label for="one">
    <div class="handle"></div>
  </label>
</div>
<style>
/* From Uiverse.io by cssbuttons-io - Tags: skeuomorphism, switch, realistic */
.toggle-border {
 border: 2px solid #f0ebeb;
 border-radius: 130px;
 margin-bottom: 45px;
 padding: 1px 2px;
 background: linear-gradient(to bottom right, white, rgba(220,220,220,.5)), white;
 box-shadow: 0 0 0 2px #fbfbfb;
 cursor: pointer;
 display: flex;
 align-items: center;
}

.toggle-border:last-child {
 margin-bottom: 0;
}

.toggle-border input[type="checkbox"] {
 display: none;
}

.toggle-border label {
 position: relative;
 display: inline-block;
 width: 65px;
 height: 20px;
 background: #d13613;
 border-radius: 80px;
 cursor: pointer;
 box-shadow: inset 0 0 16px rgba(0,0,0,.3);
 transition: background .5s;
}

.toggle-border input[type="checkbox"]:checked + label {
 background: #13d162;
}

.handle {
 position: absolute;
 top: -8px;
 left: -10px;
 width: 35px;
 height: 35px;
 border: 1px solid #e5e5e5;
 background: repeating-radial-gradient(circle at 50% 50%, rgba(200,200,200,.2) 0%, rgba(200,200,200,.2) 2%, transparent 2%, transparent 3%, rgba(200,200,200,.2) 3%, transparent 3%), conic-gradient(white 0%, silver 10%, white 35%, silver 45%, white 60%, silver 70%, white 80%, silver 95%, white 100%);
 border-radius: 50%;
 box-shadow: 3px 5px 10px 0 rgba(0,0,0,.4);
 transition: left .4s;
}

.toggle-border input[type="checkbox"]:checked + label > .handle {
 left: calc(100% - 35px + 10px);
}
</style>


================================================
FILE: Toggle-switches/cuzpq_gentle-goat-72.html
================================================
<input type="checkbox" class="theme-checkbox">
<style>
/* From Uiverse.io by cuzpq - Tags: switch, theme, light&dark */
.theme-checkbox {
  --toggle-size: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 6.25em;
  height: 3.125em;
  background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2a2a2a)) no-repeat;
  background: -o-linear-gradient(left, #efefef 50%, #2a2a2a 50%) no-repeat;
  background: linear-gradient(to right, #efefef 50%, #2a2a2a 50%) no-repeat;
  background-size: 205%;
  background-position: 0;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  border-radius: 99em;
  position: relative;
  cursor: pointer;
  font-size: var(--toggle-size);
}

.theme-checkbox::before {
  content: "";
  width: 2.25em;
  height: 2.25em;
  position: absolute;
  top: 0.438em;
  left: 0.438em;
  background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2a2a2a)) no-repeat;
  background: -o-linear-gradient(left, #efefef 50%, #2a2a2a 50%) no-repeat;
  background: linear-gradient(to right, #efefef 50%, #2a2a2a 50%) no-repeat;
  background-size: 205%;
  background-position: 100%;
  border-radius: 50%;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

.theme-checkbox:checked::before {
  left: calc(100% - 2.25em - 0.438em);
  background-position: 0;
}

.theme-checkbox:checked {
  background-position: 100%;
}
</style>


================================================
FILE: Toggle-switches/elijahgummer_light-jellyfish-4.html
================================================
<div class="switch">
  <input id="toggle" type="checkbox" />
  <label class="toggle" for="toggle">
    <i></i>
  </label>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, black, switch, dark, light, realistic, glow, modern */
.switch {
  position: relative;
  width: 210px;
  height: 50px;
  box-sizing: border-box;
  padding: 3px;
  background: #0d0d0d;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 1px 1px rgba(0, 0, 0, 0.5),
    0 1px 0 0 rgba(255, 255, 255, 0.1);
}
.switch input[type="checkbox"] {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.switch input[type="checkbox"] + label {
  position: relative;
  display: block;
  left: 0;
  width: 50%;
  height: 100%;
  background: #1b1c1c;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  transition: all 0.5s ease-in-out;
}
.switch input[type="checkbox"] + label:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 10px;
  background: #fff;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow:
    0 0 5px 2px rgba(165, 15, 15, 0.9),
    0 0 3px 1px rgba(165, 15, 15, 0.9);
  transition: all 0.5s ease-in-out;
}
.switch input[type="checkbox"] + label:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.switch input[type="checkbox"] + label i {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 24px;
  margin-top: -12px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #0d0d0d;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"] + label i:before,
.switch input[type="checkbox"] + label i:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: #0d0d0d;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"] + label i:before {
  left: -7px;
}
.switch input[type="checkbox"] + label i:after {
  left: 7px;
}
.switch input[type="checkbox"]:checked + label {
  left: 50%;
}
.switch input[type="checkbox"]:checked + label:before {
  box-shadow:
    0 0 5px 2px rgba(15, 165, 70, 0.9),
    0 0 3px 1px rgba(15, 165, 70, 0.9);
}

</style>
    

================================================
FILE: Toggle-switches/elijahgummer_lovely-hound-41.html
================================================
<div class="checkbox">
  <input class="tgl" id="toggle" type="checkbox" />
  <label class="tgl-btn" for="toggle"></label>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, blue, switch, transition, click effect, click animation */
.checkbox {
  --blue: #0d7eff;
  --g08: #e1e5eb;
  --g04: #848ea1;
  text-align: center;
}

.checkbox .tgl {
  display: none;
}
.checkbox .tgl,
.checkbox .tgl:after,
.checkbox .tgl:before,
.checkbox .tgl *,
.checkbox .tgl *:after,
.checkbox .tgl *:before,
.checkbox .tgl + .tgl-btn {
  box-sizing: border-box;
}
.checkbox .tgl::selection,
.checkbox .tgl:after::selection,
.checkbox .tgl:before::selection,
.checkbox .tgl *::selection,
.checkbox .tgl *:after::selection,
.checkbox .tgl *:before::selection,
.checkbox .tgl + .tgl-btn::selection {
  background: none;
}
.checkbox .tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 57px;
  height: 27px;
  position: relative;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
}
.checkbox .tgl + .tgl-btn:after,
.checkbox .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 44%;
  height: 100%;
}
.checkbox .tgl + .tgl-btn:after {
  left: 0;
}
.checkbox .tgl + .tgl-btn:before {
  display: inline;
  position: absolute;
  top: 7px;
}
.checkbox .tgl:checked + .tgl-btn:after {
  left: 56.5%;
}

.checkbox .tgl + .tgl-btn {
  background: var(--g08);
  border-radius: 20rem;
  padding: 2px;
  transition: all 0.4s ease;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.checkbox .tgl + .tgl-btn:after {
  border-radius: 2em;
  background: #fff;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
.checkbox .tgl + .tgl-btn:before {
  content: "No";
  left: 28px;
  color: var(--g04);
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.checkbox .tgl + .tgl-btn:active {
  box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
}
.checkbox .tgl + .tgl-btn:active:after {
  padding-right: 0.4em;
}
.checkbox .tgl:checked + .tgl-btn {
  background: var(--blue);
}
.checkbox .tgl:checked + .tgl-btn:active {
  box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
}
.checkbox .tgl:checked + .tgl-btn:active:after {
  margin-left: -0.4em;
}
.checkbox .tgl:checked + .tgl-btn:before {
  content: "Yes";
  left: 4px;
  color: #fff;
}

</style>
    

================================================
FILE: Toggle-switches/elijahgummer_sharp-ape-65.html
================================================
<div class="checkbox">
  <input id="cbx" type="checkbox" />
  <label class="toggle" for="cbx"><span></span></label>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, blue, switch, modern, transition, click effect, css effect */
.checkbox input[type="checkbox"] {
  visibility: hidden;
  display: none;
}

.checkbox .toggle {
  position: relative;
  display: block;
  width: 40px;
  height: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0, 0, 0);
}
.checkbox .toggle:before {
  content: "";
  position: relative;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 14px;
  display: block;
  background: #9a9999;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.checkbox .toggle span {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  display: block;
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5);
  transition: all 0.2s ease;
}
.checkbox .toggle span:before {
  content: "";
  position: absolute;
  display: block;
  margin: -18px;
  width: 56px;
  height: 56px;
  background: rgba(79, 46, 220, 0.5);
  border-radius: 50%;
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
}

.checkbox #cbx:checked + .toggle:before {
  background: #947ada;
}
.checkbox #cbx:checked + .toggle span {
  background: #4f2edc;
  transform: translateX(20px);
  transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
  box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2);
}
.checkbox #cbx:checked + .toggle span:before {
  transform: scale(1);
  opacity: 0;
  transition: all 0.4s ease;
}

</style>
    

================================================
FILE: Toggle-switches/elijahgummer_shy-fireant-5.html
================================================
<a href="#" class="square">
  <div class="burgerwrap">
    <span></span>
    <span></span>
    <span></span>
  </div>
</a>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, gradient, switch, glow, modern, hover effect */
.square {
  border: 1px solid #5e42a6;
  height: 26px;
  width: 26px;
  display: block;
  margin: 40px auto;
  transform: rotate(45deg);
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  /* custom */
}

.square .burgerwrap {
  height: 18px;
  width: 21px;
  transform: rotate(-45deg);
  padding-left: 2px;
  padding-top: 8px;
  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  /* custom */
}

.square:hover {
  transform: rotate(135deg);
  border: 1px solid #fff;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5), 0 0 5px rgba(255, 255, 255, 0.5),
    0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5),
    0 0 40px rgba(255, 255, 255, 0.5), 0 0 50px rgba(255, 255, 255, 0.5),
    0 0 60px rgba(255, 255, 255, 0.5);
}

.square:hover .burgerwrap {
  transform: rotate(-135deg);
}

.square span {
  height: 2px;
  width: 14px;
  background: linear-gradient(145deg, #5e42a6, #b46be4);
  display: block;
  margin-bottom: 2px;
  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  /* custom */
}

.square span:after {
  content: "";
  height: 2px;
  width: 14px;
  position: absolute;
  background: #fff;
  left: -22px;
  margin-top: -4px;
  -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  /* custom */
}

.square:hover span {
  margin-left: 26px;
}

.square:hover span:after {
  left: 0.2px;
}

.square span:nth-of-type(1),
.square span:nth-of-type(1):after {
  transition-delay: 0.1s;
}

.square span:nth-of-type(2),
.square span:nth-of-type(2):after {
  transition-delay: 0.2s;
}

.square span:nth-of-type(3),
.square span:nth-of-type(3):after {
  transition-delay: 0.3s;
}

</style>
    

================================================
FILE: Toggle-switches/elijahgummer_silly-starfish-49.html
================================================
<label>
  <input type="checkbox" class="inp" />
  <span class="check"></span>
</label>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, green, switch, modern, transition */
.inp {
  appearance: none;
}

.check {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background: #111;
  border-radius: 40px;
}

.check:before {
  content: "";
  position: absolute;
  top: 8px;
  left: 4px;
  width: 3px;
  height: 3px;
  border-radius: 90px;
  transition: transform 0.5s;
  box-shadow: 7.9px 0 0 5px #14f960; /* Change the color here */
}

.inp:checked ~ .check:before {
  transform: translateX(13px);
}

.check:after {
  content: "N";
  position: absolute;
  right: -16px;
  top: -5px;
  font-size: 20px;
  color: #111;
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
  transform: translateX(20px);
}

.inp:checked ~ .check:after {
  opacity: 1;
  transform: translateX(0px);
}

</style>
    

================================================
FILE: Toggle-switches/elijahgummer_tender-horse-32.html
================================================
<label class="switch">
  <input type="checkbox" class="input" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, switch, modern, toggle, stretch, squish */
/* Switch container styling */
.switch {
  position: relative;
  display: inline-block;
  width: 3.5em; /* Width of the toggle switch */
  height: 1.5em; /* Height of the toggle switch */
}

/* Hide default checkbox appearance */
.switch .input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider styling */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f0f0f0;
  border-radius: 0.5em; /* Rounded corners for the slider */
  box-shadow: inset 0 0.0625em 0 0 #f4f4f4, 0 0.0625em 0 0 #efefef,
    0 0.125em 0 0 #ececec, 0 0.25em 0 0 #e0e0e0, 0 0.3125em 0 0 #dedede,
    0 0.375em 0 0 #dcdcdc, 0 0.425em 0 0 #cacaca, 0 0.425em 0.5em 0 #cecece;
  transition: 0.23s ease;
}

/* Slider knob styling */
.slider:before {
  content: "";
  position: absolute;
  height: 1.1em;
  width: 1.1em;
  border-radius: 50%;
  background-color: #d3d3d3;
  left: 0.2em;
  bottom: 0.2em;
  transition: 0.23s ease;
}

/* Change slider background color when checked */
.input:checked + .slider {
  translate: 0 0.225em;
  box-shadow: inset 0 0.03em 0 0 #f4f4f4, 0 0.03em 0 0 #efefef,
    0 0.0625em 0 0 #ececec, 0 0.125em 0 0 #e0e0e0, 0 0.125em 0 0 #dedede,
    0 0.2em 0 0 #dcdcdc, 0 0.225em 0 0 #cacaca, 0 0.225em 0.375em 0 #cecece;
  transform: scale(1.2);
}

/* Move the knob when checked */
.input:checked + .slider:before {
  transform: translateX(2em); /* Move knob to the right */
  background-color: #87ceeb;
}

</style>
    

================================================
FILE: Toggle-switches/elijahwgummer-poc_giant-panda-93.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
  <span class="knob"></span>
</label>

<style>
/* From Uiverse.io by elijahwgummer-poc - Tags: simple, switch, yes, no, animated, start/stop, wobble  */
.switch {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background-color: #ff6b6b;
  border-radius: 34px;
  transition: background-color 0.3s ease;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.switch input:checked + .slider {
  background-color: #66bb6a;
}

.switch input:checked + .slider:before {
  transform: translateX(26px);
}

.slider:before {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.knob {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.switch input:checked ~ .knob {
  transform: translateX(27px) translateY(-50%);
}

</style>


================================================
FILE: Toggle-switches/ercnersoy_evil-eel-92.html
================================================
<label class="switch">
  <input class="ch" type="checkbox" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by ercnersoy  - Tags: simple, switch, creative */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 1.5em;
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 1rem 0rem 1rem;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.5em;
  width: 1.4em;
  left: 0em;
  bottom: 0em;
  background-color: white;
  transition: 0.4s;
  border-radius: 1rem 0rem 1rem;
  border: 3px solid white;
}

.ch:checked + .slider {
  background-color: #72eb67;
}

.ch:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

.ch:checked + .slider:before {
  transform: translateX(2.2em);
  background-color: green;
  box-shadow: 0px 0px 40px 5px #72eb67;
  border: 3px solid white;
}

.ch:checked + .slider::after {
  content: "|";
  color: white;
  position: absolute;
  right: 0.3rem;
  top: -3.3px;
  transform: rotate(45deg);
}

</style>
    

================================================
FILE: Toggle-switches/gharsh11032000_brave-pug-20.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: switch, checkbox, toggle, toggle switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  border: 2px solid #414141;
  border-radius: 50px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  left: 0.2em;
  bottom: 0.2em;
  background-color: white;
  border-radius: inherit;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.switch input:checked + .slider {
  box-shadow: 0 0 20px rgba(9, 117, 241, 0.8);
  border: 2px solid #0974f1;
}

.switch input:checked + .slider:before {
  transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/gharsh11032000_green-liger-89.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: apple, switch, checkbox, toggle, toggle switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #9fccfa;
  border-radius: 50px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slider:before {
  position: absolute;
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2em;
  width: 2em;
  inset: 0;
  background-color: white;
  border-radius: 50px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.4);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.switch input:checked + .slider {
  background: #0974f1;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #0974f1;
}

.switch input:checked + .slider:before {
  transform: translateX(1.6em);
}
</style>


================================================
FILE: Toggle-switches/gharsh11032000_old-horse-22.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: switch, checkbox, toggle, toggle switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: white;
  border-radius: 50px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  right: 0.3em;
  bottom: 0.3em;
  transform: translateX(150%);
  background-color: #59d102;
  border-radius: inherit;
  transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.slider:after {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  left: 0.3em;
  bottom: 0.3em;
  background-color: #cccccc;
  border-radius: inherit;
  transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #59d102;
}

.switch input:checked + .slider:before {
  transform: translateY(0);
}

.switch input:checked + .slider::after {
  transform: translateX(-150%);
}

</style>


================================================
FILE: Toggle-switches/gharsh11032000_sour-vampirebat-66.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #d4acfb;
  border-radius: 50px;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  border-radius: 50px;
  box-shadow: 0 0px 20px rgba(0,0,0,0.4);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.switch input:checked + .slider {
  background: #b84fce;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #b84fce;
}

.switch input:checked + .slider:before {
  transform: translateX(1.6em);
  width: 2em;
  height: 2em;
  bottom: 0;
}
</style>


================================================
FILE: Toggle-switches/gharsh11032000_warm-elephant-21.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: switch, checkbox, click effect, toggle switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #9fccfa;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.switch input:checked + .slider {
  background: #0974f1;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #0974f1;
}

.switch input:checked + .slider:before {
  transform: translateX(1.5em) rotate(90deg);
}
</style>


================================================
FILE: Toggle-switches/guilhermeyohan_great-snake-42.html
================================================
<div class="checkbox-apple">
  <input class="yep" id="check-apple" type="checkbox">
  <label for="check-apple"></label>
</div>
<style>
/* From Uiverse.io by guilhermeyohan - Tags: checkbox */
.checkbox-apple {
  position: relative;
  width: 50px;
  height: 25px;
  margin: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-apple label {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 25px;
  border-radius: 50px;
  background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
  cursor: pointer;
  transition: all 0.3s ease;
}

.checkbox-apple label:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.checkbox-apple input[type="checkbox"]:checked + label {
  background: linear-gradient(to bottom, #4cd964, #5de24e);
}

.checkbox-apple input[type="checkbox"]:checked + label:after {
  transform: translateX(25px);
}

.checkbox-apple label:hover {
  background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
}

.checkbox-apple label:hover:after {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.yep {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 25px;
}
</style>


================================================
FILE: Toggle-switches/guilhermeyohan_nervous-wasp-81.html
================================================
<input id="toggle_checkbox" type="checkbox">
  <label for="toggle_checkbox"></label>
<style>
/* From Uiverse.io by guilhermeyohan - Tags: switch */
#toggle_checkbox {
  display: none;
}

label {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  display: block;
  width: 70px;
  height: 30px;
  margin: 0 auto;
  transform: translateY(-50%);
  cursor: pointer;
}

label:before {
  top: 2px;
  left: 3px;
  width: 26px;
  height: 26px;
  border: 3px solid rgb(2, 169, 38);
}

label:after {
  top: 0;
  right: 0;
  width: 70px;
  height: 30px;
  border: 3px solid #103445;
}

label:before, label:after {
  content: "";
  position: absolute;
  border-radius: 50px;
  box-sizing: border-box;
  transition: 0.5s ease top, 0.5s ease left, 0.5s ease right, 0.5s ease width, 0.5s ease height, 0.5s ease border-color;
}

#toggle_checkbox:checked + label:before {
  top: 0;
  left: 0;
  width: 70px;
  height: 30px;
  border-color: #143240;
}

#toggle_checkbox:checked + label:after {
  top: 2px;
  right: 3px;
  width: 26px;
  height: 26px;
  border-color: red;
}
</style>


================================================
FILE: Toggle-switches/hoshikawamaki_cowardly-cougar-86.html
================================================
<!-- From Uiverse.io by hoshikawamaki  - Tags: simple, icon, animation, switch, toggle, animated, toggle switch, click animation -->
<label
  for="nav_bar_icon"
  class="w-9 h-10 cursor-pointer flex flex-col items-center justify-center space-y-1.5"
>
  <input id="nav_bar_icon" type="checkbox" class="hidden peer" />
  <div
    class="w-2/3 h-1.5 bg-purple-400 rounded-lg transition-all duration-300 origin-right peer-checked:w-full peer-checked:rotate-[-30deg] peer-checked:translate-y-[-5px]"
  ></div>
  <div
    class="w-full h-1.5 bg-purple-400 rounded-lg transition-all duration-300 origin-center peer-checked:rotate-90 peer-checked:translate-x-4"
  ></div>
  <div
    class="w-2/3 h-1.5 bg-purple-400 rounded-lg transition-all duration-300 origin-right peer-checked:w-full peer-checked:rotate-[30deg] peer-checked:translate-y-[5px]"
  ></div>
</label>


    

================================================
FILE: Toggle-switches/iSweat-exe_unlucky-wasp-16.html
================================================
<label class="switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by iSweat-exe  - Tags: simple, animation, minimalist, switch, on/off */
/* The switch - the box around the slider */
.switch {
  font-size: 20px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 10px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 5px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition: 0.4s;
}

.switch input:checked + .slider {
  background-color: green;
}

.switch input:checked + .slider:before {
  transform: translateX(1.5em);
}

</style>
    

================================================
FILE: Toggle-switches/ilkhoeri_blue-zebra-2.html
================================================
<div class="switch-wrap">
  <input
    class="switch-input"
    aria-label="switch"
    name="switch"
    id="switch"
    type="checkbox"
    hidden=""
  />
  <label class="switch-label" for="switch"></label>
  <span class="switch-marbles"></span>
</div>

<style>
/* From Uiverse.io by ilkhoeri  - Tags: switch */
.switch-wrap {
  z-index: 20;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  width: calc(var(--w-switch) + calc(var(--p) * 2));
  height: calc(var(--h-switch) + calc(var(--p) * 2));
  box-shadow: hsla(var(--pure-black), 0.25) 2px -5px 4px inset,
    hsla(var(--pure-black), 0.25) 0px 2px 5px -1px,
    hsla(var(--pure-black), 0.3) 0 1px 3px -1px,
    0 70px 40px -20px hsla(var(--pure-black), 0.2),
    hsla(var(--pure-black), 0.2) 0 0 0 1px inset;
  --round: 4rem;
  --pure-black: 0, 0%, 0%;
  --pure-white: 0, 0%, 100%;
  --scale-x: calc(1.35 * var(--round));
  --p: calc(calc(6.25 / 100) * var(--round));
  --checked: calc(100% - calc(var(--round) + var(--p)));
  --sz-marbles: calc(var(--w-switch) + calc(var(--p) * 2));
  --h-switch: calc(var(--round) + calc(var(--p) * 2));
  --w-switch: calc(calc(var(--round) * 2) + calc(var(--p) * 2));
  --bg-switch: var(--pure-black);
  --box: var(--pure-white);
}

.switch-wrap .switch-input {
  display: none;
  background: transparent none;
  visibility: hidden;
}

.switch-label {
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 20;
  width: var(--w-switch);
  height: var(--h-switch);
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  background-color: hsl(var(--pure-white));
  border-radius: 9999px;
  border-width: 0px;
  transition: all linear 300ms;
  box-shadow: var(--shadow);
  --shadow: hsla(var(--pure-black), 0.4) 0 2px 4px,
    hsla(var(--pure-black), 0.3) 0 7px 13px -3px,
    hsla(var(--pure-black), 0.25) -2px -5px 4px inset,
    hsla(var(--pure-black), 0.2) 0 0 0 1px inset;
}

.switch-label::after {
  position: absolute;
  display: block;
  content: "";
  width: var(--round);
  height: var(--round);
  left: var(--p);
  border-radius: 9999px;
  background-color: hsl(0, 0%, 100%);
  will-change: left, width, margin, padding;
  box-shadow: var(--shadow);
  transition: left 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
    width 300ms ease, padding 300ms ease, margin 300ms ease,
    background-color 300ms ease, box-shadow 300ms linear;
}

.switch-input + .switch-label:active::after {
  width: var(--scale-x);
  --shadow: hsla(var(--pure-black), 0.4) 0 2px 4px,
    hsla(var(--pure-black), 0.3) 0 7px 13px -3px,
    hsla(var(--pure-black), 0.25) 0px -2px 8px 6px inset,
    hsla(var(--pure-black), 0.25) 0 0 0 1px inset;
}

.switch-input:checked + .switch-label {
  --shadow: hsla(var(--pure-black), 0.4) 0 2px 4px,
    hsla(var(--pure-black), 0.3) 0 7px 13px -3px,
    hsla(var(--pure-black), 0.25) 2px -5px 4px inset,
    hsla(var(--pure-black), 0.2) 0 0 0 1px inset;
  --bg-switch: var(--pure-white);
  --box: var(--pure-black);
}

.switch-input:checked + .switch-label::after {
  background: white linear-gradient(-45deg, #f8acff 0%, #696eff 100%);
  left: var(--checked);
}

.switch-input:checked + .switch-label:active::after {
  margin-left: calc(calc(var(--checked) - var(--scale-x)) - var(--p));
}

.switch-marbles {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9999px;
}

.switch-marbles::after {
  height: var(--sz-marbles);
  width: var(--sz-marbles);
  z-index: 0;
  content: "";
  position: absolute;
  border-radius: 9999px;
}

.switch-marbles::before {
  content: "";
  height: var(--sz-marbles);
  width: var(--sz-marbles);
  position: absolute;
  border-radius: 9999px;
  z-index: -1;
  background-image: linear-gradient(-45deg, #f8acff 0%, #696eff);
  filter: blur(20px);
  opacity: var(0.7);
  animation: rotate 4000ms linear running infinite;
}

@keyframes rotate {
  to {
    rotate: 360deg;
  }
}

</style>
    

================================================
FILE: Toggle-switches/javierBarroso_sharp-shrimp-7.html
================================================

<div class="container">
  <label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
  </label>
</div>
<style>
/* From Uiverse.io by javierBarroso - Tags: animation, switch, toggle */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 80px;
  box-shadow: 0px 5px 20px #11111166;
  background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 30px;
  transform: rotate(-90deg);
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition: .4s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: .2s;
}

.switch input:checked + .slider {
  background-color: #2196F3;
  transform: rotate(90deg);
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

.switch input:checked + .slider:before {
  transition-delay: .2s;
  transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/jubayer-10_lovely-treefrog-86.html
================================================
<!-- From Uiverse.io by jubayer-10  - Tags: switch, checkbox, toggle, click, toggle switch, input effect , tailwind, tailwindcss -->
<label class="inline-flex items-center relative">
  <input class="peer hidden" id="toggle" type="checkbox" />
  <div
    class="relative w-[110px] h-[50px] bg-white peer-checked:bg-zinc-500 rounded-full after:absolute after:content-[''] after:w-[40px] after:h-[40px] after:bg-gradient-to-r from-orange-500 to-yellow-400 peer-checked:after:from-zinc-900 peer-checked:after:to-zinc-900 after:rounded-full after:top-[5px] after:left-[5px] active:after:w-[50px] peer-checked:after:left-[105px] peer-checked:after:translate-x-[-100%] shadow-sm duration-300 after:duration-300 after:shadow-md"
  ></div>
  <svg
    height="0"
    width="100"
    viewBox="0 0 24 24"
    data-name="Layer 1"
    id="Layer_1"
    xmlns="http://www.w3.org/2000/svg"
    class="fill-white peer-checked:opacity-60 absolute w-6 h-6 left-[13px]"
  >
    <path
      d="M12,17c-2.76,0-5-2.24-5-5s2.24-5,5-5,5,2.24,5,5-2.24,5-5,5ZM13,0h-2V5h2V0Zm0,19h-2v5h2v-5ZM5,11H0v2H5v-2Zm19,0h-5v2h5v-2Zm-2.81-6.78l-1.41-1.41-3.54,3.54,1.41,1.41,3.54-3.54ZM7.76,17.66l-1.41-1.41-3.54,3.54,1.41,1.41,3.54-3.54Zm0-11.31l-3.54-3.54-1.41,1.41,3.54,3.54,1.41-1.41Zm13.44,13.44l-3.54-3.54-1.41,1.41,3.54,3.54,1.41-1.41Z"
    ></path>
  </svg>
  <svg
    height="512"
    width="512"
    viewBox="0 0 24 24"
    data-name="Layer 1"
    id="Layer_1"
    xmlns="http://www.w3.org/2000/svg"
    class="fill-black opacity-60 peer-checked:opacity-70 peer-checked:fill-white absolute w-6 h-6 right-[13px]"
  >
    <path
      d="M12.009,24A12.067,12.067,0,0,1,.075,10.725,12.121,12.121,0,0,1,10.1.152a13,13,0,0,1,5.03.206,2.5,2.5,0,0,1,1.8,1.8,2.47,2.47,0,0,1-.7,2.425c-4.559,4.168-4.165,10.645.807,14.412h0a2.5,2.5,0,0,1-.7,4.319A13.875,13.875,0,0,1,12.009,24Zm.074-22a10.776,10.776,0,0,0-1.675.127,10.1,10.1,0,0,0-8.344,8.8A9.928,9.928,0,0,0,4.581,18.7a10.473,10.473,0,0,0,11.093,2.734.5.5,0,0,0,.138-.856h0C9.883,16.1,9.417,8.087,14.865,3.124a.459.459,0,0,0,.127-.465.491.491,0,0,0-.356-.362A10.68,10.68,0,0,0,12.083,2ZM20.5,12a1,1,0,0,1-.97-.757l-.358-1.43L17.74,9.428a1,1,0,0,1,.035-1.94l1.4-.325.351-1.406a1,1,0,0,1,1.94,0l.355,1.418,1.418.355a1,1,0,0,1,0,1.94l-1.418.355-.355,1.418A1,1,0,0,1,20.5,12ZM16,14a1,1,0,0,0,2,0A1,1,0,0,0,16,14Zm6,4a1,1,0,0,0,2,0A1,1,0,0,0,22,18Z"
    ></path>
  </svg>
</label>


    

================================================
FILE: Toggle-switches/kamehame-ha_rare-fox-50.html
================================================
<label class="gravity-switch">
    <input type="checkbox">
    <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by kamehame-ha - Tags: switch, click effect, gravity, fancy */
.gravity-switch {
  width: 4em;
  height: 2em;
  border-radius: 22px;
  position: relative;
  display: inline-block;
}

.gravity-switch input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;
}

.gravity-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition-delay: .4s;
  transition: .4s;
  border-radius: 30px;
}

.gravity-switch .slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition-delay: .4s;
  transition: .4s;
}

.gravity-switch input:checked + .slider {
  transform: rotate(90deg);
  transform-origin: 25% 50%;
  background-color: #22c55e;
}

.gravity-switch input:checked+.slider:before {
  transition-delay: 400ms;
  transform: translateX(2em)
}
</style>


================================================
FILE: Toggle-switches/lenin55_fast-chicken-43.html
================================================
<div class="cl-toggle-switch">
  <label class="cl-switch">
    <input type="checkbox">
    <span></span>
  </label>
</div>
<style>
/* From Uiverse.io by lenin55 - Tags: material design, switch */
.cl-toggle-switch {
 position: relative;
}

.cl-switch {
 position: relative;
 display: inline-block;
}
/* Input */
.cl-switch > input {
 appearance: none;
 -moz-appearance: none;
 -webkit-appearance: none;
 z-index: -1;
 position: absolute;
 right: 6px;
 top: -8px;
 display: block;
 margin: 0;
 border-radius: 50%;
 width: 40px;
 height: 40px;
 background-color: rgb(0, 0, 0, 0.38);
 outline: none;
 opacity: 0;
 transform: scale(1);
 pointer-events: none;
 transition: opacity 0.3s 0.1s, transform 0.2s 0.1s;
}
/* Track */
.cl-switch > span::before {
 content: "";
 float: right;
 display: inline-block;
 margin: 5px 0 5px 10px;
 border-radius: 7px;
 width: 36px;
 height: 14px;
 background-color: rgb(0, 0, 0, 0.38);
 vertical-align: top;
 transition: background-color 0.2s, opacity 0.2s;
}
/* Thumb */
.cl-switch > span::after {
 content: "";
 position: absolute;
 top: 2px;
 right: 16px;
 border-radius: 50%;
 width: 20px;
 height: 20px;
 background-color: #fff;
 box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 transition: background-color 0.2s, transform 0.2s;
}
/* Checked */
.cl-switch > input:checked {
 right: -10px;
 background-color: #85b8b7;
}

.cl-switch > input:checked + span::before {
 background-color: #85b8b7;
}

.cl-switch > input:checked + span::after {
 background-color: #018786;
 transform: translateX(16px);
}
/* Hover, Focus */
.cl-switch:hover > input {
 opacity: 0.04;
}

.cl-switch > input:focus {
 opacity: 0.12;
}

.cl-switch:hover > input:focus {
 opacity: 0.16;
}
/* Active */
.cl-switch > input:active {
 opacity: 1;
 transform: scale(0);
 transition: transform 0s, opacity 0s;
}

.cl-switch > input:active + span::before {
 background-color: #8f8f8f;
}

.cl-switch > input:checked:active + span::before {
 background-color: #85b8b7;
}
/* Disabled */
.cl-switch > input:disabled {
 opacity: 0;
}

.cl-switch > input:disabled + span::before {
 background-color: #ddd;
}

.cl-switch > input:checked:disabled + span::before {
 background-color: #bfdbda;
}

.cl-switch > input:checked:disabled + span::after {
 background-color: #61b5b4;
}
</style>


================================================
FILE: Toggle-switches/martinval9_white-lionfish-18.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by martinval9 - Tags: switch */
/* The switch - the box around the slider */
.switch {
 font-size: 11px;
 position: relative;
 display: inline-block;
 width: 3.5em;
 height: 1em;
}

/* Hide default HTML checkbox */
.switch input {
 opacity: 0;
 width: 0;
 height: 0;
}

/* The slider */
.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #ccc;
 border: 2px solid #000;
 transition: .4s;
 border-radius: 1px;
}

.slider:before {
 position: absolute;
 content: "";
 height: 1.3em;
 width: 1.2em;
 border-radius: 2px;
 left: 0.2em;
 bottom: 0.3em;
 background-color: #fff;
 border: 2px solid #000;
 transition: 0.1s;
}

input:checked + .slider {
 background-color: #000;
}

input:focus + .slider {
 box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
 transform: translateX(1.3em);
}
</style>


================================================
FILE: Toggle-switches/misaraadel_tough-termite-75.html
================================================
<label class="switch" for="">
  <input type="checkbox">

  <span class="check"></span>
</label>
<style>
/* From Uiverse.io by misaraadel - Tags: switch, theme-switch, toggle switch, on/off, 3d switch, cool switch, creative switch */
.switch {
  position: relative;
  cursor: pointer;
}

.switch input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  opacity: 0;
  position: relative;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  cursor: pointer;
}

.switch input:checked ~ .check {
  background-color: #549b60;
}

.switch input:checked ~ .check::after {
  transform: translateX(0px);
}

.switch input:checked ~ .check::before {
  transform: translateX(50px) !important;
}

.switch .check {
  width: 51px;
  height: 30px;
  position: relative;
  display: block;
  background-color: #E92E2E;
  cursor: pointer;
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.5s ease-in;
}

.switch .check::after,
.switch .check::before {
  content: "";
  position: absolute;
  top: 0;
  width: 30px;
  height: 30px;
  transition: all 0.5s ease-in;
  border-radius: 50%;
}

.switch .check::before {
  background-color: #fff;
  right: 0px;
}

.switch .check::after {
  transform: translateX(-60px);
  background-color: #fff;
  left: 0;
}
</style>


================================================
FILE: Toggle-switches/mobinkakei_great-skunk-8.html
================================================
<label class="label">
    <div class="toggle">
        <input class="toggle-state" type="checkbox" name="check" value="check">
        <div class="indicator"></div>
    </div>
</label>
<style>
/* From Uiverse.io by mobinkakei - Tags: neumorphism, switch */
.label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #394a56;
}

.label-text {
  margin-left: 16px;
}

.toggle {
  isolation: isolate;
  position: relative;
  height: 30px;
  width: 60px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #d1d9e6,
    4px 4px 4px 0px #d1d9e6 inset,
    -4px -4px 4px 0px #ffffff inset;
}

.toggle-state {
  display: none;
}

.indicator {
  height: 100%;
  width: 200%;
  background: #ecf0f3;
  border-radius: 15px;
  transform: translate3d(-75%, 0, 0);
  transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
  box-shadow: -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #d1d9e6;
}

.toggle-state:checked ~ .indicator {
  transform: translate3d(25%, 0, 0);
}
</style>


================================================
FILE: Toggle-switches/mobinkakei_plastic-snail-19.html
================================================
<div class="switch-holder">
    <div class="switch-label">
        <i class="fa fa-bluetooth-b"></i><span>Bluetooth</span>
    </div>
    <div class="switch-toggle">
        <input type="checkbox" id="bluetooth">
        <label for="bluetooth"></label>
    </div>
</div>
<style>
/* From Uiverse.io by mobinkakei - Tags: neumorphism, switch, on, off, bluetooth */
.switch-holder {
  display: flex;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: -8px -8px 15px rgba(255, 255, 255, .7),
        10px 10px 10px rgba(0, 0, 0, .2),
        inset 8px 8px 15px rgba(255, 255, 255, .7),
        inset 10px 10px 10px rgba(0, 0, 0, .2);
  justify-content: space-between;
  align-items: center;
}

.switch-label {
  padding: 0 20px 0 10px
}

.switch-label i {
  margin-right: 5px;
}

.switch-toggle {
  height: 40px;
}

.switch-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -2;
}

.switch-toggle input[type="checkbox"]+label {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 40px;
  border-radius: 20px;
  margin: 0;
  cursor: pointer;
  box-shadow: inset -8px -8px 15px rgba(255, 255, 255, .6),
        inset 10px 10px 10px rgba(0, 0, 0, .25);
}

.switch-toggle input[type="checkbox"]+label::before {
  position: absolute;
  content: 'OFF';
  font-size: 13px;
  text-align: center;
  line-height: 25px;
  top: 8px;
  left: 8px;
  width: 45px;
  height: 25px;
  border-radius: 20px;
  background-color: #eeeeee;
  box-shadow: -3px -3px 5px rgba(255, 255, 255, .5),
        3px 3px 5px rgba(0, 0, 0, .25);
  transition: .3s ease-in-out;
}

.switch-toggle input[type="checkbox"]:checked+label::before {
  left: 50%;
  content: 'ON';
  color: #fff;
  background-color: #00b33c;
  box-shadow: -3px -3px 5px rgba(255, 255, 255, .5),
        3px 3px 5px #00b33c;
}
</style>


================================================
FILE: Toggle-switches/mobinkakei_spicy-moose-47.html
================================================
<div class="toggler">
    <input id="toggler-1" name="toggler-1" type="checkbox" value="1">
    <label for="toggler-1">
        <svg class="toggler-on" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
            <polyline class="path check" points="100.2,40.2 51.5,88.8 29.8,67.5"></polyline>
        </svg>
        <svg class="toggler-off" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
            <line class="path line" x1="34.4" y1="34.4" x2="95.8" y2="95.8"></line>
            <line class="path line" x1="95.8" y1="34.4" x2="34.4" y2="95.8"></line>
        </svg>
    </label>
</div>
<style>
/* From Uiverse.io by mobinkakei - Tags: checkbox */
.toggler {
  width: 72px;
  margin: 40px auto;
}

.toggler input {
  display: none;
}

.toggler label {
  display: block;
  position: relative;
  width: 72px;
  height: 36px;
  border: 1px solid #d6d6d6;
  border-radius: 36px;
  background: #e4e8e8;
  cursor: pointer;
}

.toggler label::after {
  display: block;
  border-radius: 100%;
  background-color: #d7062a;
  content: '';
  animation-name: toggler-size;
  animation-duration: 0.15s;
  animation-timing-function: ease-out;
  animation-direction: forwards;
  animation-iteration-count: 1;
  animation-play-state: running;
}

.toggler label::after, .toggler label .toggler-on, .toggler label .toggler-off {
  position: absolute;
  top: 50%;
  left: 25%;
  width: 26px;
  height: 26px;
  transform: translateY(-50%) translateX(-50%);
  transition: left 0.15s ease-in-out, background-color 0.2s ease-out, width 0.15s ease-in-out, height 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.toggler input:checked + label::after, .toggler input:checked + label .toggler-on, .toggler input:checked + label .toggler-off {
  left: 75%;
}

.toggler input:checked + label::after {
  background-color: #50ac5d;
  animation-name: toggler-size2;
}

.toggler .toggler-on, .toggler .toggler-off {
  opacity: 1;
  z-index: 2;
}

.toggler input:checked + label .toggler-off, .toggler input:not(:checked) + label .toggler-on {
  width: 0;
  height: 0;
  opacity: 0;
}

.toggler .path {
  fill: none;
  stroke: #fefefe;
  stroke-width: 7px;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

@keyframes toggler-size {
  0%, 100% {
    width: 26px;
    height: 26px;
  }

  50% {
    width: 20px;
    height: 20px;
  }
}

@keyframes toggler-size2 {
  0%, 100% {
    width: 26px;
    height: 26px;
  }

  50% {
    width: 20px;
    height: 20px;
  }
}
 
</style>


================================================
FILE: Toggle-switches/mobinkakei_strong-lizard-79.html
================================================
<div class="toggleWrapper">
    <input type="checkbox" class="dn" id="dn">
    <label for="dn" class="toggle">
        <span class="toggle__handler">
            <span class="crater crater--1"></span>
            <span class="crater crater--2"></span>
            <span class="crater crater--3"></span>
        </span>
        <span class="star star--1"></span>
        <span class="star star--2"></span>
        <span class="star star--3"></span>
        <span class="star star--4"></span>
        <span class="star star--5"></span>
        <span class="star star--6"></span>
    </label>
</div>
<style>
/* From Uiverse.io by mobinkakei - Tags: switch, dark, theme, light */
.toggleWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  padding: 0 200px;
  transform: translate3d(-50%, -50%, 0);
  color: white;
}

.toggleWrapper input {
  position: absolute;
  left: -99em;
}

.toggle {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 90px;
  height: 50px;
  background-color: #83d8ff;
  border-radius: 84px;
  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.toggle:before {
  content: 'AM';
  position: absolute;
  left: -50px;
  top: 15px;
  font-size: 18px;
}

.toggle:after {
  content: 'PM';
  position: absolute;
  right: -48px;
  top: 15px;
  font-size: 18px;
  color: #749ed7;
}

.toggle__handler {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 44px;
  height: 44px;
  background-color: #ffcf96;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg);
}

.toggle__handler .crater {
  position: absolute;
  background-color: #e8cda5;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  border-radius: 100%;
}

.toggle__handler .crater--1 {
  top: 18px;
  left: 10px;
  width: 4px;
  height: 4px;
}

.toggle__handler .crater--2 {
  top: 28px;
  left: 22px;
  width: 6px;
  height: 6px;
}

.toggle__handler .crater--3 {
  top: 10px;
  left: 25px;
  width: 8px;
  height: 8px;
}

.star {
  position: absolute;
  background-color: #fff;
  transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  border-radius: 50%;
}

.star--1 {
  top: 10px;
  left: 35px;
  z-index: 0;
  width: 30px;
  height: 3px;
}

.star--2 {
  top: 18px;
  left: 28px;
  z-index: 1;
  width: 30px;
  height: 3px;
}

.star--3 {
  top: 27px;
  left: 40px;
  z-index: 0;
  width: 30px;
  height: 3px;
}

.star--4, .star--5, .star--6 {
  opacity: 0;
  transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.star--4 {
  top: 16px;
  left: 11px;
  z-index: 0;
  width: 2px;
  height: 2px;
  transform: translate3d(3px, 0, 0);
}

.star--5 {
  top: 32px;
  left: 17px;
  z-index: 0;
  width: 3px;
  height: 3px;
  transform: translate3d(3px, 0, 0);
}

.star--6 {
  top: 36px;
  left: 28px;
  z-index: 0;
  width: 2px;
  height: 2px;
  transform: translate3d(3px, 0, 0);
}

input:checked + .toggle {
  background-color: #749dd6;
}

input:checked + .toggle:before {
  color: #749ed7;
}

input:checked + .toggle:after {
  color: #fff;
}

input:checked + .toggle .toggle__handler {
  background-color: #ffe5b5;
  transform: translate3d(40px, 0, 0) rotate(0);
}

input:checked + .toggle .toggle__handler .crater {
  opacity: 1;
}

input:checked + .toggle .star--1 {
  width: 2px;
  height: 2px;
}

input:checked + .toggle .star--2 {
  width: 4px;
  height: 4px;
  transform: translate3d(-5px, 0, 0);
}

input:checked + .toggle .star--3 {
  width: 2px;
  height: 2px;
  transform: translate3d(-7px, 0, 0);
}

input:checked + .toggle .star--4, input:checked + .toggle .star--5, input:checked + .toggle .star--6 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

input:checked + .toggle .star--4 {
  transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

input:checked + .toggle .star--5 {
  transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

input:checked + .toggle .star--6 {
  transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
 
</style>


================================================
FILE: Toggle-switches/mrhyddenn_old-fish-66.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by mrhyddenn - Tags: switch */
/* The switch - the box around the slider */
.switch {
 font-size: 17px;
 position: relative;
 display: inline-block;
 width: 62px;
 height: 35px;
}

/* Hide default HTML checkbox */
.switch input {
 opacity: 1;
 width: 0;
 height: 0;
}

/* The slider */
.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0px;
 background: #fff;
 transition: .4s;
 border-radius: 30px;
 border: 1px solid #ccc;
}

.slider:before {
 position: absolute;
 content: "";
 height: 1.9em;
 width: 1.9em;
 border-radius: 16px;
 left: 1.2px;
 top: 0;
 bottom: 0;
 background-color: white;
 box-shadow: 0 2px 5px #999999;
 transition: .4s;
}

input:checked + .slider {
 background-color: #5fdd54;
 border: 1px solid transparent;
}

input:checked + .slider:before {
 transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/mrhyddenn_short-treefrog-23.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by mrhyddenn - Tags: switch */
/* The switch - the box around the slider */
.switch {
 font-size: 17px;
 position: relative;
 display: inline-block;
 width: 3.5em;
 height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
 opacity: 0;
 width: 0;
 height: 0;
}

/* The slider */
.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #fff;
 border: 1px solid #99999;
 transition: .4s;
}

.slider:before {
 position: absolute;
 content: "";
 height: 1.5em;
 width: 1.5em;
 left: 0.20em;
 bottom: 0.25em;
 background-color: white;
 transition: .4s;
 box-shadow: 0 0 2px 0px #999999;
}

input:checked + .slider {
 background-color: #2da54f;
}

input:focus + .slider {
 box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
 transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/mrhyddenn_silly-starfish-53.html
================================================
<label class="switch">
    <div class="round"><input name="onoff" id="onoff" type="checkbox">
        <div class="back"><label for="onoff" class="but"><span class="on">0</span><span class="off">I</span></label></div>
    </div>
</label>
<style>
/* From Uiverse.io by mrhyddenn - Tags: skeuomorphism, switch */
input {
  display: none
}

.on,.off {
  position: absolute;
  text-align: center;
  text-shadow: inset 1px 1px 1px black;
  width: 100%;
}

.on {
  color: #fff;
  top: 10px;
  transition: all 0.1s;
  font-family: sans-serif
}

.off {
  color: #636161;
  bottom: 5px;
  transition: all 0.1s;
  transform: scaleY(0.85);
}

.but {
  background-color: #000;
  border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px;
  border-bottom-width: 0px;
  box-shadow: inset 8px 6px 5px -7px rgba(0,0,0,1)
    ,inset -8px 6px 5px -7px rgba(0,0,0,1)
    ,inset 0 -3px 2px -2px rgba(200,200,200,.5)
    ,0 3px 3px -2px rgba(0,0,0,1)
    ,inset 0 -230px 60px -200px rgba(255,255,255,.2)
    ,inset 0 220px 40px -200px rgba(0,0,0,.3);
  display: block;
  font-size: 17px;
  height: 60px;
  position: relative;
  transition: all 0.2s;
  width: 40px;
}

.back {
  background-color: #000;
  background-image: -webkit-linear-gradient(0deg, transparent 30%, transparent 65%)
    ,-webkit-linear-gradient(0deg, rgba(245, 245, 245, 0) 30%, rgba(150,150,150,.1) 50%, rgba(150,150,150,0) 70%);
  border-radius: 115px;
  box-sizing: border-box;
  height: 85px;
  padding: 4px 4px;
  transition: all 0.2s;
  width: 50px;
}

input:checked + .back .on,input:checked + .back .off {
  text-shadow: inset 1px 1px 1px black;
}

input:checked + .back .on {
  color: rgb(141, 141, 141);
  top: 10px;
  transform: scaleY(0.85);
}

input:checked + .back .off {
  color: #fff;
  bottom: 5px;
  transform: scaleY(1);
}

input:checked + .back .but {
  background: #232323;
  background-image: -webkit-radial-gradient(55% 18%,circle closest-corner,rgba(0,0,0,.3) ,rgba(0,0,0,0));
  border-radius: 410px 410px 410px 410px / 310px 310px 410px 410px;
  box-shadow: inset 8px -4px 5px -7px rgba(0,0,0,1)
    ,inset -8px -4px 5px -7px rgba(0,0,0,1)
    , 0 -3px 8px -4px rgba(250,250,250,.4)
    ,inset 0 3px 4px -2px rgba(10,10,10,1)
    ,inset 0 280px 40px -200px rgba(0,0,0,.2)
    ,inset 0 -200px 40px -200px rgba(180,180,180,.2);
  margin-top: 20px;
}

input:checked + .back {
  background-image: -webkit-linear-gradient(90deg, black 30%, transparent 65%)
    ,-webkit-linear-gradient(180deg, rgba(250,250,250,0) 0%, rgba(250,250,250,.4) 50%, rgba(150,150,150,0) 100%);
  box-shadow: 28px 28px 28px -28px rgba(0,0,0,.1)
    ,-28px 28px 28px -22px rgba(0,0,0,.1)
    ,0 30px 30px 0px rgba(0,0,0,.2)
    ,inset 0 1px 2px 0 rgba(0,0,0,.6);
  padding: 2px 4px;
}

.l,.r {
  margin: 0 auto;
  text-align: center;
}

.round,#onoff,.back,.but,.on,.off {
  user-select: none;
}
</style>


================================================
FILE: Toggle-switches/namecho_quiet-panther-93.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by namecho - Tags: active, switch */
.switch {
 --button-width: 3.5em;
 --button-height: 2em;
 --toggle-diameter: 1.5em;
 --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
 --toggle-shadow-offset: 10px;
 --toggle-wider: 3em;
 --color-grey: #cccccc;
 --color-green: #4296f4;
}

.slider {
 display: inline-block;
 width: var(--button-width);
 height: var(--button-height);
 background-color: var(--color-grey);
 border-radius: calc(var(--button-height) / 2);
 position: relative;
 transition: 0.3s all ease-in-out;
}

.slider::after {
 content: "";
 display: inline-block;
 width: var(--toggle-diameter);
 height: var(--toggle-diameter);
 background-color: #fff;
 border-radius: calc(var(--toggle-diameter) / 2);
 position: absolute;
 top: var(--button-toggle-offset);
 transform: translateX(var(--button-toggle-offset));
 box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
 transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked + .slider {
 background-color: var(--color-green);
}

.switch input[type="checkbox"]:checked + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
 box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
 display: none;
}

.switch input[type="checkbox"]:active + .slider::after {
 width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

</style>


================================================
FILE: Toggle-switches/nanda248_helpless-bird-25.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider">
    <div class="circle">
      <div class="divider"></div>
    </div>
  </span>
</label>
<style>
/* From Uiverse.io by nanda248 - Tags: switch, light&dark, AM/PM */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 4em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #585F60;
  transition: .5s;
  border-radius: 1em;
  z-index: 1;
}

.slider .circle {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 50%;
  left: 0.3em;
  bottom: 0.3em;
  background-color: #F1EEF5;
  transition: .5s;
  z-index: 5;
}

.divider {
  position: absolute;
  left: 0.65em;
  width: 0.8em;
  height: 1.4em;
  background-color: #eed202;
  z-index: 10;
  border-radius: 0 2em 2em 0;
  transition: .4s;
}

.switch input:checked + .slider {
  background-color: #eed202;
  z-index: 1;
}

.switch input:focus + .slider {
  box-shadow: 0 0 4px #191A28;
}

.switch input:checked + .slider .circle {
  transform: translateX(2em);
}

.switch input:checked + .slider .circle .divider {
  left: 0;
  width: 0.8em;
  border-radius: 2em 0 0 2em;
  background-color: #585F60;
  z-index: 10;
}
</style>


================================================
FILE: Toggle-switches/neitt0_odd-hound-66.html
================================================
<label class="switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by neitt0  - Tags:  */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 8em;
  height: 4em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 4em;
  width: 4em;
  background-color: white;
  transition: 0.2s;
  transition-timing-function: cubic-bezier(0.75, 0.02, 0.86, 1.31);
  transform-origin: bottom right;
}

.switch input:checked + .slider {
  background-color: #2196f3;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

.switch input:checked + .slider:before {
  transform: translateX(0em) rotate(90deg);
}

</style>
    

================================================
FILE: Toggle-switches/nhfiz_old-lion-54.html
================================================
<fieldset id="switch" class="radio">
	<input name="switch" id="on" type="radio">
	<label for="on">ON</label>
	<input name="switch" id="off" type="radio">
	<label for="off">OFF</label>
	<input checked="" name="switch" id="auto" type="radio">
	<label for="auto">AUTO</label>
</fieldset>
<style>
/* From Uiverse.io by nhfiz - Tags: switch */
/* Multiple Toggle Switch by Abu Shafiyya */

fieldset {
  border: 0;
}

/* Hide default radio */
.radio input[type="radio"] {
  position: absolute;
  visibility: hidden;
  display: none;
  opacity: 0;
  z-index: -1;
}

/* Customizing label */
.radio label {
  position: relative;
  padding: 10px 20px 10px 25px;
  cursor: pointer;
  border-radius: 20px;
  color: #2196F3;
  margin: 0px 5px;
  font-weight: 600;
  text-transform: uppercase;
}

.radio label, .radio label::before {
  -webkit-transition: .25s all ease;
  transition: .25s all ease;
}

.radio label::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  content: " ";
  position: absolute;
  top: 30%;
  left: 0;
  width: 1em;
  height: 1em;
  border: 2px solid #2196F3;
}

.radio input[type="radio"] + label::before {
  border-radius: 1em;
}


/* Checked toggle */
.radio input[type="radio"]:checked + label {
  color: #fff;
  background: #2196F3;
  z-index: 1;
}

.radio input[type="radio"]:checked + label {
  padding: 10px 20px 10px 20px;
}

.radio input[type="radio"]:checked + label::before {
  top: 4px;
  width: 100%;
  height: 2em;
  z-index: -1;
}

.radio:hover input[type="radio"]:checked + label {
  -webkit-box-shadow: #2195f338 0px 0px 0px 25px;
  box-shadow: #2195f338 0px 0px 0px 25px;
}
</style>


================================================
FILE: Toggle-switches/nikk7007_smooth-fox-6.html
================================================
<label class="switch">
  <input type="checkbox" checked="">
</label>
<style>
/* From Uiverse.io by nikk7007 - Tags: switch */
.switch {
 --false: #E81B1B;
 --true: #009068;
}

input[type=checkbox] {
 appearance: none;
 height: 2rem;
 width: 3.5rem;
 background-color: #fff;
 position: relative;
 border-radius: .2em;
 cursor: pointer;
}

input[type=checkbox]::before {
 content: '';
 display: block;
 height: 1.9em;
 width: 1.9em;
 transform: translate(-50%, -50%);
 position: absolute;
 top: 50%;
 left: calc(1.9em/2 + .3em);
 background-color: var(--false);
 border-radius: .2em;
 transition: .3s ease;
}

input[type=checkbox]:checked::before {
 background-color: var(--true);
 left: calc(100% - (1.9em/2 + .3em));
}
</style>


================================================
FILE: Toggle-switches/njesenberger_brave-firefox-90.html
================================================
<div class="toggle-container">
  <input class="toggle-input" type="checkbox">
  <div class="toggle-handle-wrapper">
    <div class="toggle-handle">
      <div class="toggle-handle-knob"></div>
      <div class="toggle-handle-bar-wrapper">
        <div class="toggle-handle-bar"></div>
      </div>
    </div>
  </div>
  <div class="toggle-base">
    <div class="toggle-base-inside"></div>
  </div>
</div>
<style>
/* From Uiverse.io by njesenberger - Tags: skeuomorphism, switch, realistic, toggle, toggle switch */
.toggle-container {
  --knob-size: 1.75em;
  display: flex;
  justify-content: center;
  position: relative;
}

.toggle-input {
  position: absolute;
  z-index: 2;
  bottom: 132.5%;
  border-radius: 50%;
  transform: rotate(-25deg);
  transform-origin: 50% 4.75em;
  width: var(--knob-size);
  height: var(--knob-size);
  opacity: 0;
  /* fix em sizing */
  font: inherit;
  transition: transform .24s cubic-bezier(.65, 1.35, .5, 1);
  cursor: pointer;
}

.toggle-input:checked {
  transform: rotate(25deg);
}

.toggle-handle-wrapper {
  position: absolute;
  z-index: 1;
  bottom: -135%;
  -webkit-mask-image: linear-gradient(to bottom, #000 62.125%, transparent 50%);
  mask-image: linear-gradient(to bottom, #000 62.125%, transparent 50%);
  width: 200%;
  overflow: hidden;
}

.toggle-handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotate(-25deg);
  transform-origin: bottom center;
  transition: transform .24s cubic-bezier(.65, 1.35, .5, 1);
}

.toggle-input:checked + .toggle-handle-wrapper > .toggle-handle {
  transform: rotate(25deg);
}

.toggle-handle-knob {
  position: relative;
  z-index: 1;
  border-radius: 50%;
  width: var(--knob-size);
  height: var(--knob-size);
  background-image: radial-gradient(farthest-corner at 70% 30%, #fedee2 4%, #d63534 12% 24%, #a81a1a 50% 65%, #d63534 75%);
  transition: transform .24s cubic-bezier(.65, 1.35, .5, 1);
}

.toggle-input:checked + .toggle-handle-wrapper .toggle-handle-knob {
  transform: rotate(-90deg);
}

/* toggle handle knob hover inner shadow */
.toggle-handle-knob::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 8px 2px rgb(255 255 255 / .4);
  opacity: 0;
  transition: opacity .2s;
}

@media (hover: hover) {
  .toggle-input:hover + .toggle-handle-wrapper .toggle-handle-knob::after,
  .toggle-input:focus-visible + .toggle-handle-wrapper .toggle-handle-knob::after {
    opacity: 1;
  }
}

.toggle-handle-bar-wrapper {
  position: relative;
  width: .5em;
  height: 3em;
}

.toggle-handle-bar {
  position: absolute;
  top: calc(var(--knob-size) / 2 * -1);
  left: 0;
  width: 100%;
  height: calc(100% + var(--knob-size) / 2);
  background-image: linear-gradient(to right, #777475, #a4a4a4, #fff 45% 55%, #a4a4a4, #777475);
  background-position-x: .06125em;
  transition: background-position-x .24s cubic-bezier(.65, 1.35, .5, 1);
  box-shadow: inset 0 1em .25em rgb(0 0 0 / .4);
}

.toggle-input:checked + .toggle-handle-wrapper .toggle-handle-bar {
  background-position-x: -.06125em;
}

.toggle-base {
  position: relative;
  border-radius: 3.125em;
  padding: .25em;
  width: 3.5em;
  height: 1.125em;
  background-color: #fff;
  background-image: linear-gradient(to bottom, #fff, #d7d7d7);
  box-shadow: 0 -.25em .5em #fff, 0 .25em .5em #d7d7d7;
}

.toggle-base-inside {
  position: relative;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #a6a6a6, #7d7d7d);
  box-shadow: inset 0 .0625em rgb(255 255 255 / .2), inset 0 -.03125em rgb(255 255 255 / 1), inset 0 -.0625em .25em rgb(0 0 0 / .1);
}

/* toggle base inside active */
.toggle-base-inside::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #5ab054, #438c3c);
  box-shadow: inherit;
  opacity: 0;
  transition: opacity .24s cubic-bezier(.65, 1.35, .5, 1);
}

.toggle-input:checked ~ .toggle-base .toggle-base-inside::after {
  opacity: 1;
}
</style>


================================================
FILE: Toggle-switches/njesenberger_friendly-otter-40.html
================================================
<div class="toggle-container">
  <input type="checkbox" class="toggle-input">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292 142" class="toggle">
    <path d="M71 142C31.7878 142 0 110.212 0 71C0 31.7878 31.7878 0 71 0C110.212 0 119 30 146 30C173 30 182 0 221 0C260 0 292 31.7878 292 71C292 110.212 260.212 142 221 142C181.788 142 173 112 146 112C119 112 110.212 142 71 142Z" class="toggle-background"></path>
    <rect rx="6" height="64" width="12" y="39" x="64" class="toggle-icon on"></rect>
    <path d="M221 91C232.046 91 241 82.0457 241 71C241 59.9543 232.046 51 221 51C209.954 51 201 59.9543 201 71C201 82.0457 209.954 91 221 91ZM221 103C238.673 103 253 88.6731 253 71C253 53.3269 238.673 39 221 39C203.327 39 189 53.3269 189 71C189 88.6731 203.327 103 221 103Z" fill-rule="evenodd" class="toggle-icon off"></path>
    <g filter="url('#goo')">
      <rect fill="#fff" rx="29" height="58" width="116" y="42" x="13" class="toggle-circle-center"></rect>
      <rect fill="#fff" rx="58" height="114" width="114" y="14" x="14" class="toggle-circle left"></rect>
      <rect fill="#fff" rx="58" height="114" width="114" y="14" x="164" class="toggle-circle right"></rect>
    </g>
    <filter id="goo">
      <feGaussianBlur stdDeviation="10" result="blur" in="SourceGraphic"></feGaussianBlur>
      <feColorMatrix result="goo" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" mode="matrix" in="blur"></feColorMatrix>
    </filter>
  </svg>
</div>
<style>
/* From Uiverse.io by njesenberger - Tags: switch, squishy, toggle, liquid, toggle switch, on off toggle switch */
.toggle-container {
  --active-color: #1868e3;
  --inactive-color: #d3d3d6;
  position: relative;
  aspect-ratio: 292 / 142;
  height: 1.875em;
}

.toggle-input {
  appearance: none;
  margin: 0;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.toggle {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.toggle-background {
  fill: var(--inactive-color);
  transition: fill .4s;
}

.toggle-input:checked + .toggle .toggle-background {
  fill: var(--active-color);
}

.toggle-circle-center {
  transform-origin: center;
  transition: transform .6s;
}

.toggle-input:checked + .toggle .toggle-circle-center {
  transform: translateX(150px);
}

.toggle-circle {
  transform-origin: center;
  transition: transform .45s;
  backface-visibility: hidden;
}

.toggle-circle.left {
  transform: scale(1);
}

.toggle-input:checked + .toggle .toggle-circle.left {
  transform: scale(0);
}

.toggle-circle.right {
  transform: scale(0);
}

.toggle-input:checked + .toggle .toggle-circle.right {
  transform: scale(1);
}

.toggle-icon {
  transition: fill .4s;
}

.toggle-icon.on {
  fill: var(--inactive-color);
}

.toggle-input:checked + .toggle .toggle-icon.on {
  fill: #fff;
}

.toggle-icon.off {
  fill: #eaeaec;
}

.toggle-input:checked + .toggle .toggle-icon.off {
  fill: var(--active-color);
}
</style>


================================================
FILE: Toggle-switches/njesenberger_rude-stingray-22.html
================================================
<div class="toggle-wrapper">
  <input class="toggle-checkbox" type="checkbox">
  <div class="toggle-container">  
    <div class="toggle-button">
      <div class="toggle-button-circles-container">
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by njesenberger - Tags: skeuomorphism, switch, toggle, toggle switch */
.toggle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: .5em;
  padding: .125em;
  background-image: linear-gradient(to bottom, #d5d5d5, #e8e8e8);
  box-shadow: 0 1px 1px rgb(255 255 255 / .6);
  /* resize for demo */
  font-size: 1.5em;
}

.toggle-checkbox {
  appearance: none;
  position: absolute;
  z-index: 1;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  /* fix em sizing */
  font: inherit;
  opacity: 0;
  cursor: pointer;
}

.toggle-container {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: .375em;
  width: 3em;
  height: 1.5em;
  background-color: #e8e8e8;
  box-shadow: inset 0 0 .0625em .125em rgb(255 255 255 / .2), inset 0 .0625em .125em rgb(0 0 0 / .4);
  transition: background-color .4s linear;
}

.toggle-checkbox:checked + .toggle-container {
  background-color: #f3b519;
}

.toggle-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: .0625em;
  border-radius: .3125em;
  width: 1.375em;
  height: 1.375em;
  background-color: #e8e8e8;
  box-shadow: inset 0 -.0625em .0625em .125em rgb(0 0 0 / .1), inset 0 -.125em .0625em rgb(0 0 0 / .2), inset 0 .1875em .0625em rgb(255 255 255 / .3), 0 .125em .125em rgb(0 0 0 / .5);
  transition: left .4s;
}

.toggle-checkbox:checked + .toggle-container > .toggle-button {
  left: 1.5625em;
}

.toggle-button-circles-container {
  display: grid;
  grid-template-columns: repeat(3, min-content);
  gap: .125em;
  position: absolute;
  margin: 0 auto;
}

.toggle-button-circle {
  border-radius: 50%;
  width: .125em;
  height: .125em;
  background-image: radial-gradient(circle at 50% 0, #f5f5f5, #c4c4c4);
}
</style>


================================================
FILE: Toggle-switches/omar-alghaish_smooth-chipmunk-60.html
================================================
<div class="switch">
    <input type="checkbox">
    <div>
        <span class="line-1"></span>
        <span class="line-2"></span>
        <span class="line-3"></span>
    </div>
</div>
<style>
/* From Uiverse.io by omar-alghaish - Tags: switch */
.switch {
  position: relative;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg,
            rgb(183, 0, 255) 20%,
            rgb(255, 0, 170) 100%);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.363);
  border-radius: 5px;
}

.switch input {
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
  position: absolute;
}

.switch div {
  width: 80%;
  height: 80%;
  margin: 10%;
  position: absolute;
}

.switch span {
  background: #fff;
  width: 100%;
  height: 2px;
  border-radius: 5px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.5s, width 0.5s;
}

.switch .line-1 {
  width: 50%;
  transform: translate(-100%, -10px);
  transform-origin: 0 0;
}

.switch .line-3 {
  width: 50%;
  left: auto;
  right: 0;
  transform: translate(0, 10px);
  transform-origin: 100% 0;
}

input:checked + div span.line-1 {
  transform: translate(0, 0) rotate(-45deg);
}

input:checked +  div span.line-3 {
  transform: translate(-100%, 0) rotate(-45deg);
}

input:checked + div span.line-2 {
  transform: translate(-50%, -50%) rotate(45deg);
}
</style>


================================================
FILE: Toggle-switches/omriluz_cuddly-yak-64.html
================================================
<!-- From Uiverse.io by omriluz - Tags: animation, red, green, gradient, switch, toggle, gradients, tailwind -->
<label class="relative block aspect-[2/0.75] cursor-pointer w-20 rounded-full  bg-gradient-to-r from-red-600 to-green-600 bg-[length:100%_100%] shadow-2xl shadow-purple-300 transition-all duration-500 [&amp;:has(input:checked)]:rotate-180  hover:bg-[length:100%_500%] focus:bg-[length:100%_500%]">
  <input type="checkbox" class="peer/input hidden">
  <div class="absolute left-[3%] top-1/2 aspect-square h-[90%] -translate-y-1/2 rotate-180 rounded-full bg-white transition-all duration-500 peer-checked/input:left-[63%] peer-checked/input:-rotate-6"></div>
</label>




================================================
FILE: Toggle-switches/omriluz_tough-crab-66.html
================================================
<!-- From Uiverse.io by omriluz - Tags: switch, tailwind, tailwindbutton -->
<label class="relative block aspect-[2/0.75] w-20 rounded-full bg-gradient-to-br from-purple-100 via-violet-600 shadow-2xl shadow-purple-300 transition-all duration-300 hover:bg-[length:100%_500%] focus:bg-[length:100%_500%] bg-[length:100%_100%]">
  <input class="peer/input hidden" type="checkbox">
  <div class="absolute left-[3%] top-1/2 aspect-square h-[90%] -translate-y-1/2 rotate-180 rounded-full bg-white bg-gradient-to-t transition-all duration-500 peer-checked/input:left-[63%] peer-checked/input:-rotate-6"></div>
</label>




================================================
FILE: Toggle-switches/ozgeozkaraa01_evil-cheetah-7.html
================================================
<div class="toggle-switch">
  <input class="toggle-input" id="toggle" type="checkbox">
  <label class="toggle-label" for="toggle"></label>
</div>
<style>
/* From Uiverse.io by ozgeozkaraa01 - Tags: switch, toggle switch, 3d switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggle-input {
  display: none;
}

.toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 34px;
  border-radius: 17px;
  background-color: #ccc;
  cursor: pointer;
  transition: background-color 0.4s ease;
}

.toggle-label:before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease;
}

.toggle-input:checked + .toggle-label {
  background-color: #86d993;
}

.toggle-input:checked + .toggle-label:before {
  transform: translateX(26px);
}
</style>


================================================
FILE: Toggle-switches/pandey_saurav__friendly-insect-59.html
================================================
<div>
  <input id="checkbox-input" type="checkbox" />
  <label class="switch" for="checkbox-input">
    <svg
      xml:space="preserve"
      style="enable-background:new 0 0 128 128"
      viewBox="0 0 128 128"
      height="3em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M77.547 120.684h-5.765l-1.698 3.012a7.477 7.477 0 0 1-6.513 3.804h-.003a7.479 7.479 0 0 1-6.513-3.804l-1.698-3.012h-5.765v-4.06h27.956v4.06z"
        style="fill:#51514c"
      ></path>
      <path
        d="M77.547 113.65H49.591v-4.279h27.956v4.279zm0-11.711H49.591v4.279h27.956v-4.279zm38.587-32.576-12.209-3.271.92-3.434 12.209 3.271-.92 3.434zm-104.268 0-.92-3.434 12.209-3.271.92 3.434-12.209 3.271zm92.979-24.913-.92-3.434 12.209-3.272.92 3.434-12.209 3.272zm-81.69 0-12.209-3.272.92-3.434 12.209 3.272-.92 3.434zM94.82 25.247l-2.514-2.514 8.938-8.938 2.514 2.514-8.938 8.938zm-61.64 0-8.937-8.938 2.514-2.514 8.937 8.938-2.514 2.514zm43.358-11.618-3.434-.92L76.376.5l3.434.92-3.272 12.209zm-25.076 0L48.191 1.42 51.625.5l3.272 12.209-3.435.92z"
        style="fill:#a7a79b"
      ></path>
      <path
        d="M59.802 64.141h7.535v34.934h-7.535V64.141zm3.767-44.754c-18.485-.53-33.631 14.817-33.631 33.824 0 9.781 4.016 18.581 10.431 24.753 5.637 5.423 9.222 13.147 9.222 21.111h7.84V64.141H51.75c-4.44 0-8.051-3.612-8.051-8.051s3.612-8.051 8.051-8.051 8.052 3.612 8.052 8.051v5.681h7.535V56.09c0-4.44 3.612-8.051 8.052-8.051 4.44 0 8.051 3.612 8.051 8.051s-3.612 8.051-8.051 8.051h-5.682v34.934h7.84c0-7.964 3.584-15.688 9.222-21.111C93.184 71.792 97.2 62.992 97.2 53.211c0-19.008-15.146-34.355-33.631-33.824zM51.75 50.408a5.687 5.687 0 0 0-5.681 5.681 5.687 5.687 0 0 0 5.681 5.681h5.682v-5.681a5.688 5.688 0 0 0-5.682-5.681zM75.389 61.77h-5.682v-5.681a5.688 5.688 0 0 1 5.682-5.681 5.687 5.687 0 0 1 5.681 5.681 5.687 5.687 0 0 1-5.681 5.681z"
        style="fill:#ffffff"
      ></path>
    </svg>
  </label>
</div>

<style>
/* From Uiverse.io by pandey_saurav_  - Tags: simple, animation, switch, checkbox, input, on, off, toggle */
#checkbox-input {
  display: none;
}

.switch {
  width: fit-content;
  padding: 10px;
  background-color: rgb(46, 46, 46);
  border-radius: 50px;
  z-index: 1;
  cursor: pointer;
  display: flex;
  transition: all 0.7s;
}

#checkbox-input:checked + .switch {
  background-color: rgb(161, 91, 0);
  box-shadow: 0px 0px 100px rgb(255, 196, 0);
}

</style>
    

================================================
FILE: Toggle-switches/r7chardgh_cold-ape-34.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="toggle">
  </span>
</label>
<style>
/* From Uiverse.io by r7chardgh - Tags: switch, lever, mincraft */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle {
  position: relative;
  display: flex;
  width: 2.8em;
  height: 1em;
  background-color: rgb(165, 165, 165);
  justify-content: center;
}

.toggle::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: .8em;
  height: 2em;
  margin-bottom: .5em;
  bottom: 0;
  background-color: rgb(153, 104, 39);
  box-shadow: 0 -1em 0 0 rgb(165, 165, 165);
  transform-origin: bottom;
  transform: rotateZ(-30deg);
  transition: transform 150ms;
}

.switch input:checked + .toggle::before {
  transform: rotateZ(30deg);
}

.switch input:checked + .toggle {
  box-shadow: 0 -1em 2em 0 rgb(230, 111, 111);
}     

</style>


================================================
FILE: Toggle-switches/r7chardgh_dry-rabbit-69.html
================================================
<label class="switch">
  <input type="checkbox" class="cb">
  <span class="toggle">
    <span class="left">off</span>  
    <span class="right">on</span>  
  </span>
</label>
<style>
/* From Uiverse.io by r7chardgh - Tags: switch, toggle switch, on/off */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 5em;
  height: 2.5em;
}

/* Hide default HTML checkbox */
.switch .cb {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.toggle {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  background-color: #373737;
  border-radius: .1em;
  transition: .4s;
  text-transform: uppercase;
  font-weight: 700;
  overflow: hidden;
  box-shadow: -.3em 0 0 0 #373737,-.3em .3em 0 0 #373737,.3em 0 0 0 #373737,.3em .3em 0 0 #373737,0 .3em 0 0 #373737;
}

.toggle > .left {
  position: absolute;
  display: flex;
  width: 50%;
  height: 88%;
  background-color: #f3f3f3;
  color: #373737;
  left: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  transform-origin: right;
  transform: rotateX(10deg);
  transform-style: preserve-3d;
  transition: all 150ms;
}

.left::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(206, 206, 206);
  transform-origin: center left;
  transform: rotateY(90deg);
}

.left::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(112, 112, 112);
  transform-origin: center bottom;
  transform: rotateX(90deg);
}

.toggle > .right {
  position: absolute;
  display: flex;
  width: 50%;
  height: 88%;
  background-color: #f3f3f3;
  color: rgb(206, 206, 206);
  right: 1px;
  bottom: 0;
  align-items: center;
  justify-content: center;
  transform-origin: left;
  transform: rotateX(10deg) rotateY(-45deg);
  transform-style: preserve-3d;
  transition: all 150ms;
}

.right::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(206, 206, 206);
  transform-origin: center right;
  transform: rotateY(-90deg);
}

.right::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(112, 112, 112);
  transform-origin: center bottom;
  transform: rotateX(90deg);
}

.switch input:checked + .toggle > .left {
  transform: rotateX(10deg) rotateY(45deg);
  color: rgb(206, 206, 206);
}

.switch input:checked + .toggle > .right {
  transform: rotateX(10deg) rotateY(0deg);
  color: #487bdb;
}
</style>


================================================
FILE: Toggle-switches/radwakhalil22_afraid-donkey-40.html
================================================
<label class="switch">
  <input class="checkbox" type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by radwakhalil22 - Tags: gradient, switch, checkbox, glow, animated */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch .checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 30px;
  box-shadow: 2px 2px 2px 2px #222831, -2px -2px 2px 2px #393E46, -2px 2px 2px 2px #00ADB5, 2px -2px 2px 2px #EEEEEE;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition: .4s;
}

.checkbox:checked + .slider:before {
  box-shadow: 2px 2px 2px 2px #222831, -2px -2px 2px 2px #393E46, -2px 2px 2px 2px #00ADB5, 2px -2px 2px 2px #EEEEEE;
}

.checkbox:checked + .slider {
  background-color: #afa2a2;
  box-shadow: 2px 2px 2px 2px #222831, -2px -2px 2px 2px #393E46, -2px 2px 2px 2px #00ADB5, 2px -2px 2px 2px #EEEEEE;
}

.checkbox:checked + .slider:before {
  transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/rishichawda_fluffy-robin-48.html
================================================
<label id="theme-toggle-button">
  <input type="checkbox" id="toggle">
  <svg viewBox="0 0 69.667 44" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(3.5 3.5)" data-name="Component 15 – 1" id="Component_15_1">
      
      
      <g filter="url(#container)" transform="matrix(1, 0, 0, 1, -3.5, -3.5)">
        <rect fill="#83cbd8" transform="translate(3.5 3.5)" rx="17.5" height="35" width="60.667" data-name="container" id="container"></rect>
      </g>
      
      <g transform="translate(2.333 2.333)" id="button">
        
        <g data-name="sun" id="sun">
          <g filter="url(#sun-outer)" transform="matrix(1, 0, 0, 1, -5.83, -5.83)">
            <circle fill="#f8e664" transform="translate(5.83 5.83)" r="15.167" cy="15.167" cx="15.167" data-name="sun-outer" id="sun-outer-2"></circle>
          </g>
          <g filter="url(#sun)" transform="matrix(1, 0, 0, 1, -5.83, -5.83)">
            <path fill="rgba(246,254,247,0.29)" transform="translate(9.33 9.33)" d="M11.667,0A11.667,11.667,0,1,1,0,11.667,11.667,11.667,0,0,1,11.667,0Z" data-name="sun" id="sun-3"></path>
          </g>
          <circle fill="#fcf4b9" transform="translate(8.167 8.167)" r="7" cy="7" cx="7" id="sun-inner"></circle>
        </g>
        
          
        <g data-name="moon" id="moon">
          <g filter="url(#moon)" transform="matrix(1, 0, 0, 1, -31.5, -5.83)">
            <circle fill="#cce6ee" transform="translate(31.5 5.83)" r="15.167" cy="15.167" cx="15.167" data-name="moon" id="moon-3"></circle>
          </g>
          <g fill="#a6cad0" transform="translate(-24.415 -1.009)" id="patches">
            <circle transform="translate(43.009 4.496)" r="2" cy="2" cx="2"></circle>
            <circle transform="translate(39.366 17.952)" r="2" cy="2" cx="2" data-name="patch"></circle>
            <circle transform="translate(33.016 8.044)" r="1" cy="1" cx="1" data-name="patch"></circle>
            <circle transform="translate(51.081 18.888)" r="1" cy="1" cx="1" data-name="patch"></circle>
            <circle transform="translate(33.016 22.503)" r="1" cy="1" cx="1" data-name="patch"></circle>
            <circle transform="translate(50.081 10.53)" r="1.5" cy="1.5" cx="1.5" data-name="patch"></circle>
          </g>
        </g>
      </g>
      
      
      <g filter="url(#cloud)" transform="matrix(1, 0, 0, 1, -3.5, -3.5)">
        <path fill="#fff" transform="translate(-3466.47 -160.94)" d="M3512.81,173.815a4.463,4.463,0,0,1,2.243.62.95.95,0,0,1,.72-1.281,4.852,4.852,0,0,1,2.623.519c.034.02-.5-1.968.281-2.716a2.117,2.117,0,0,1,2.829-.274,1.821,1.821,0,0,1,.854,1.858c.063.037,2.594-.049,3.285,1.273s-.865,2.544-.807,2.626a12.192,12.192,0,0,1,2.278.892c.553.448,1.106,1.992-1.62,2.927a7.742,7.742,0,0,1-3.762-.3c-1.28-.49-1.181-2.65-1.137-2.624s-1.417,2.2-2.623,2.2a4.172,4.172,0,0,1-2.394-1.206,3.825,3.825,0,0,1-2.771.774c-3.429-.46-2.333-3.267-2.2-3.55A3.721,3.721,0,0,1,3512.81,173.815Z" data-name="cloud" id="cloud"></path>
      </g>

      
      <g fill="#def8ff" transform="translate(3.585 1.325)" id="stars">
        <path transform="matrix(-1, 0.017, -0.017, -1, 24.231, 3.055)" d="M.774,0,.566.559,0,.539.458.933.25,1.492l.485-.361.458.394L1.024.953,1.509.592.943.572Z"></path>
        <path transform="matrix(-0.777, 0.629, -0.629, -0.777, 23.185, 12.358)" d="M1.341.529.836.472.736,0,.505.46,0,.4.4.729l-.231.46L.605.932l.4.326L.9.786Z" data-name="star"></path>
        <path transform="matrix(0.438, 0.899, -0.899, 0.438, 23.177, 29.735)" d="M.015,1.065.475.9l.285.365L.766.772l.46-.164L.745.494.751,0,.481.407,0,.293.285.658Z" data-name="star"></path>
        <path transform="translate(12.677 0.388) rotate(104)" d="M1.161,1.6,1.059,1,1.574.722.962.607.86,0,.613.572,0,.457.446.881.2,1.454l.516-.274Z" data-name="star"></path>
        <path transform="matrix(-0.07, 0.998, -0.998, -0.07, 11.066, 15.457)" d="M.873,1.648l.114-.62L1.579.945,1.03.62,1.144,0,.706.464.157.139.438.7,0,1.167l.592-.083Z" data-name="star"></path>
        <path transform="translate(8.326 28.061) rotate(11)" d="M.593,0,.638.724,0,.982l.7.211.045.724.36-.64.7.211L1.342.935,1.7.294,1.063.552Z" data-name="star"></path>
        <path transform="translate(5.012 5.962) rotate(172)" d="M.816,0,.5.455,0,.311.323.767l-.312.455.516-.215.323.456L.827.911,1.343.7.839.552Z" data-name="star"></path>
        <path transform="translate(2.218 14.616) rotate(169)" d="M1.261,0,.774.571.114.3.487.967,0,1.538.728,1.32l.372.662.047-.749.728-.218L1.215.749Z" data-name="star"></path>
      </g>
    </g>
  </svg>
</label>
<style>
/* From Uiverse.io by rishichawda - Source: I had seen the design concept somewhere and Implemented it on my website (converted the image to svg, added transitions). this was a couple of years ago so i'm not able to find the dribbble or figma link (or wherever i found it).  - Tags: switch, theme-switch */
/* The switch - the box around the slider */
#theme-toggle-button {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 7em;
  cursor: pointer;
}

/* Hide default HTML checkbox */
#toggle {
  opacity: 0;
  width: 0;
  height: 0;
}

#container,
#patches,
#stars,
#button,
#sun,
#moon,
#cloud {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.25s;
}

/* night sky background */
#toggle:checked + svg #container {
  fill: #2b4360;
}

/* move button to right when checked */
#toggle:checked + svg #button {
  transform: translate(28px, 2.333px);
}

/* show/hide sun and moon based on checkbox state */
#sun {
  opacity: 1;
}

#toggle:checked + svg #sun {
  opacity: 0;
}

#moon {
  opacity: 0;
}

#toggle:checked + svg #moon {
  opacity: 1;
}

/* show or hide background items on checkbox state */
#cloud {
  opacity: 1;
}

#toggle:checked + svg #cloud {
  opacity: 0;
}

#stars {
  opacity: 0;
}

#toggle:checked + svg #stars {
  opacity: 1;
}

</style>


================================================
FILE: Toggle-switches/sabin-koju_spicy-robin-42.html
================================================
<div class="switch">
  <input role="switch" type="checkbox" class="switch-input" id="switchId">
  <label class="switch-input-label"></label>
</div>
<style>
/* From Uiverse.io by sabin-koju - Tags: switch, toggle, toggle switch */
.switch {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
}

.switch .switch-label {
  cursor: pointer;
}

.switch .switch-input {
  appearance: none;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  box-shadow: inset 0 0 0 1px #c9c9c9;
  background-color: #dadada;
  width: 3rem;
  min-width: 3rem;
  padding: 0.125rem;
  border-radius: 3rem;
  cursor: pointer;
  transition: background-color 0.75s ease, box-shadow 0.35s ease-in;
}

.switch .switch-input:before {
  position: relative;
  content: "";
  display: inline-block;
  border-radius: 1rem;
  height: 1.5rem;
  width: 1.5rem;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.32);
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0);
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.175);
}

.switch .switch-input:active:not(:disabled):before {
  width: 1.75rem;
}

.switch .switch-input:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1rem #c9c9c9;
}

.switch .switch-input:focus, .switch .switch-input:focus-within {
  box-shadow: 0 0 0 0.125rem #4caf30;
  outline: none;
}

.switch .switch-input:focus:before, .switch .switch-input:focus-within:before {
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4);
}

.switch .switch-input:checked {
  background-color: #5dca3e;
  box-shadow: inset 0 0 0 1px #5dca3e;
}

.switch .switch-input:checked:before {
  transform: translate3d(calc(100% - 0.5rem), 0, 0);
}

.switch .switch-input:checked:active:not(:disabled):before {
  margin-left: -0.5rem;
}

.switch .switch-input:checked:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1rem #459f2c;
}

.switch .switch-input:checked:focus, .switch .switch-input:checked:focus-within {
  box-shadow: 0 0 0 0.125rem #4caf30;
}

.switch .switch-input:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
  user-select: none;
}

.switch .switch-input:disabled:before {
  background-color: #f8f8f8;
}
</style>


================================================
FILE: Toggle-switches/sahilxkhadka_fast-insect-8.html
================================================
<input type="checkbox" id="checkbox">
<label class="switch" for="checkbox">
  <div class="mic-on">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-mic-fill" viewBox="0 0 16 16"> <path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z"></path> <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"></path> </svg>
  </div>
  <div class="mic-off">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-mic-mute-fill" viewBox="0 0 16 16"> <path d="M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4.02 4.02 0 0 0 12 8V7a.5.5 0 0 1 1 0v1zm-5 4c.818 0 1.578-.245 2.212-.667l.718.719a4.973 4.973 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a4 4 0 0 0 4 4zm3-9v4.879L5.158 2.037A3.001 3.001 0 0 1 11 3z"></path> <path d="M9.486 10.607 5 6.12V8a3 3 0 0 0 4.486 2.607zm-7.84-9.253 12 12 .708-.708-12-12-.708.708z"></path> </svg>
  </div>
</label>
<style>
/* From Uiverse.io by sahilxkhadka - Tags: toggle, dynamic, mute */
.switch {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(60,64,67);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mic-on, .mic-off {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .3s ease-in-out;
}

.mic-on {
  z-index: 4;
}

.mic-off {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
}

.switch:hover {
  background-color: rgba(60,64,67, 0.8);
}

#checkbox {
  display: none;
}

#checkbox:checked + .switch {
  background-color: red
}

#checkbox:checked + .switch .mic-off {
  opacity: 1;
}

#checkbox:active + .switch {
  scale: 1.2;
}
</style>


================================================
FILE: Toggle-switches/satyamchaudharydev_shy-earwig-18.html
================================================
<label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: switch, dark, theme, light, theme-switch */
/* The switch - the box around the slider */
.switch {
  display: block;
  --width-of-switch: 3.5em;
  --height-of-switch: 2em;
  /* size of sliding icon -- sun and moon */
  --size-of-icon: 1.4em;
  /* it is like a inline-padding of switch */
  --slider-offset: 0.3em;
  position: relative;
  width: var(--width-of-switch);
  height: var(--height-of-switch);
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f4f4f5;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: var(--size-of-icon,1.4em);
  width: var(--size-of-icon,1.4em);
  border-radius: 20px;
  left: var(--slider-offset,0.3em);
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(40deg,#ff0080,#ff8c00 70%);
  ;
 transition: .4s;
}

input:checked + .slider {
  background-color: #303136;
}

input:checked + .slider:before {
  left: calc(100% - (var(--size-of-icon,1.4em) + var(--slider-offset,0.3em)));
  background: #303136;
  /* change the value of second inset in box-shadow to change the angle and direction of the moon  */
  box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}
</style>


================================================
FILE: Toggle-switches/shadowfax29_dull-deer-65.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>

</label>
<style>
/* From Uiverse.io by shadowfax29 - Tags: switch, moon, sun */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2196F3;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: yellow;
  transition: .4s;
}

.switch input:checked + .slider:before {
  background-color: black;
  border-radius: 50px;
  box-shadow: inset 9px 0px 1px 0px white;
}

.switch input:checked + .slider {
  background-color: black;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

.switch input:checked + .slider:before {
  transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/shadowfax29_sweet-warthog-93.html
================================================
<label class="switch">
  <input type="checkbox">
   <span class="slider">
     <svg class="seed" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.004 512.004" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path style="fill:#e5c11f;" d="M370.114,157.811C351.523,65.174,307.456,0,256,0c-51.447,0-95.514,65.174-114.114,157.811 c41.057,46.036,72.854,122.827,92.328,199.477C251.065,406.528,256,461.356,256,512c0-50.644,4.935-105.472,21.786-154.712 C297.269,280.638,329.057,203.847,370.114,157.811"></path> <path style="fill:#AF6D2D;" d="M256.002,512.004c0-138.664-77.241-397.241-194.207-397.241 C-19.966,351.668,96.373,512.004,256.002,512.004"></path> <path style="fill:#864D18;" d="M185.347,471.952c-1.121,0-2.26-0.221-3.363-0.671c-31.603-13.065-58.033-34.278-78.539-63.047 c-41.393-58.068-52.515-141.047-31.329-233.657c1.086-4.758,5.826-7.733,10.575-6.63c4.749,1.086,7.724,5.817,6.638,10.567 c-20.047,87.623-9.931,165.57,28.495,219.471c18.556,26.033,42.408,45.197,70.894,56.973c4.511,1.863,6.656,7.027,4.793,11.529 C192.1,469.895,188.816,471.952,185.347,471.952"></path> <path style="fill:#AF6D2D;" d="M256.002,512.004c0-138.664,77.241-397.241,194.207-397.241 C531.97,351.668,415.631,512.004,256.002,512.004"></path> <path style="fill:#B49377;" d="M184.403,141.249c-0.83,0-1.66-0.124-2.498-0.362c-4.67-1.377-7.353-6.285-5.976-10.964 c11.714-39.812,28.637-71.318,47.634-88.691c3.593-3.302,9.181-3.046,12.473,0.556c3.293,3.593,3.037,9.181-0.556,12.473 c-16.419,15.007-31.947,44.403-42.611,80.649C191.739,138.751,188.216,141.249,184.403,141.249"></path> </g> </g></svg>
     <svg class="plant" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.002 512.002" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path style="fill:#8B4513;" d="M252.899,512.002c-4.504,0-8.313-3.471-8.643-8.036c-7.706-104.222,3.662-160.516,11.186-197.762 c8.669-42.947,12.635-62.551-18.276-109.698c-2.629-4.009-1.51-9.39,2.499-12.019c4.009-2.629,9.39-1.519,12.019,2.499 c34.816,53.118,29.826,77.815,20.766,122.654c-7.775,38.487-18.415,91.205-10.891,193.041c0.356,4.782-3.237,8.947-8.01,9.294 C253.333,511.994,253.116,512.002,252.899,512.002"></path> <g> <path style="fill:#91CF96;" d="M252.908,512.002c0-81.651-45.481-234.305-114.35-234.305 C90.422,417.187,158.917,512.002,252.908,512.002"></path> <path style="fill:#91CF96;" d="M252.908,512.002c0-81.651,45.481-234.305,114.35-234.305 C415.394,417.187,346.899,512.002,252.908,512.002"></path> <path style="fill:#91CF96;" d="M270.264,277.697c-1.927,0-3.81-0.642-5.346-1.84c-2.013-1.579-3.237-3.966-3.332-6.517 c-2.994-81.868,59.184-115.538,118.376-119.747c2.3-0.148,4.565,0.599,6.3,2.1c1.736,1.51,2.803,3.645,2.968,5.944 c0.876,12.314-16.419,98.807-117.187,119.877C271.453,277.636,270.854,277.697,270.264,277.697"></path> <path style="fill:#91CF96;" d="M244.332,200.401c-0.963,0-1.927-0.165-2.846-0.495c-65.38-23.535-89.183-69.068-97.644-103.12 c-10.865-43.728-0.946-85.001,7.194-93.948c2.291-2.517,5.84-3.463,9.068-2.421c18.701,6.014,115.252,67.098,92.898,192.738 c-0.061,0.347-0.148,0.694-0.252,1.033c-0.694,2.265-2.308,4.209-4.434,5.268C247.074,200.071,245.703,200.401,244.332,200.401"></path> </g> <g> <path style="fill:#5ABA63;" d="M270.264,277.697c-2.187,0-4.382-0.824-6.075-2.482c-3.419-3.35-3.48-8.843-0.121-12.271 l53.404-54.524c3.358-3.428,8.852-3.48,12.271-0.13c3.428,3.35,3.489,8.843,0.13,12.271l-53.413,54.532 C274.768,276.829,272.512,277.697,270.264,277.697"></path> <path style="fill:#5ABA63;" d="M244.467,200.311c-3.15,0-6.187-1.718-7.732-4.712l-39.224-76.436 c-2.196-4.261-0.503-9.494,3.758-11.681c4.261-2.204,9.494-0.503,11.681,3.758l39.233,76.427c2.187,4.27,0.503,9.502-3.758,11.689 C247.157,200.008,245.795,200.311,244.467,200.311"></path> </g> </g> </g></svg>
 </span>
</label>
<style>
/* From Uiverse.io by shadowfax29 - Tags: switch, toggle switch, plant , seed */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
  --mud: #8B4513;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom,skyblue 70%,var(--mud));
  transition: .4s;
  border-radius: 30px;
  border: 2px solid black;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  transition: .4s;
}

.plant {
  position: absolute;
  bottom: 3px;
  right: -30px;
  z-index: 3;
  opacity: 0;
}

.seed {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  transition: .4s;
}

.switch input:checked + .slider {
  background-color: #156829;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #156829;
}

.switch input:checked + .slider:before,
.switch input:checked + .slider .seed {
  transform: translateX(1.5em);
}

.switch input:checked + .slider .seed {
  opacity: 0;
}

.switch input:checked + .slider .plant {
  animation: zoomIn 0.5s forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>


================================================
FILE: Toggle-switches/simontheonlyone_bad-mole-99.html
================================================
<label class="switch">
  <input type="checkbox" />
  <span class="slider"></span>
  <div class="battery"></div>
</label>

<style>
/* From Uiverse.io by simontheonlyone  - Website: https://www.apple.com - Name: Apple - Tags: apple, minimalist, switch, dark, light&dark, battery */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 6em;
  height: 6em;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  inset: 0;
  background-color: #333;
  border-radius: 30px;
}

.slider:before {
  height: 0.8em;
  width: 1.1em;
  inset: 44px 28px;
  background: #eee;
  border-radius: 4px;
}

.battery {
  height: 1.4em;
  width: 2.9em;
  inset: 39px 23px;
  border: 2px solid #eee;
  border-radius: 8px;
}

.battery:before {
  height: 0.4em;
  width: 0.1em;
  inset: 0.4em 50px;
  border: none;
  border-radius: 0% 100% 100% 0% / 0% 50% 50% 0%;
  background: #eee;
}

.switch input:checked + .slider {
  background-color: #eee;
  box-shadow: 0 0 1px #eee;
}

.switch input:checked ~ .battery {
  border: 2px solid #111;
}

.switch input:checked ~ .battery:before {
  background: #111;
}

.switch input:checked + .slider:before {
  background: rgb(255, 176, 85);
  animation: lowbattery 1.6s linear;
}

@keyframes lowbattery {
  0% {
    width: 1.1em;
  }
  40% {
    width: 2.3em;
  }
  70% {
    width: 2.3em;
  }
  100% {
    width: 1.1em;
  }
}

.slider,
.battery,
.slider:before,
.battery:before {
  position: absolute;
  content: "";
  transition: 0.5s;
}

</style>
    

================================================
FILE: Toggle-switches/solanodz_chatty-kangaroo-46.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by solanodz - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(255, 255, 255);
  transition: .5s;
  border-radius: 0px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 0px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: rgb(0, 0, 0);
  transition: .5s;
}

.switch input:checked + .slider {
  background-color: #06c235;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #000000;
}

.switch input:checked + .slider:before {
  transform: translateX(1.5em);
}
</style>


================================================
FILE: Toggle-switches/tarantino421_evil-squid-86.html
================================================
<label class="buttons__burger" for="burger">
    <input type="checkbox" id="burger">
    <span></span>
    <span></span>
    <span></span>
</label>

<style>
/* From Uiverse.io by tarantino421 - Tags: switch, hamburger, arrow, burger, switch menu */
.buttons__burger {
  --size: 3rem;
  --clr: #000;
  width: var(--size);
  height: calc(0.7 * var(--size));
  cursor: pointer;
  position: relative;
  display: block;
}

.buttons__burger #burger {
  display: none;
  width: 100%;
  height: 100%;
}

.buttons__burger span {
  display: block;
  position: absolute;
  width: 100%;
  border-radius: 0.5rem;
  border: 3px solid var(--clr);
  background-color: var(--clr);
  transition: 0.15s ease-in-out;
}

.buttons__burger span:nth-of-type(1) {
  top: 0;
  right: 0;
  transform-origin: right center;
}

.buttons__burger span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}

.buttons__burger span:nth-of-type(3) {
  top: 100%;
  right: 0;
  transform-origin: right center;
  transform: translateY(-100%);
}

.buttons__burger #burger:checked ~ span:nth-of-type(1) {
  transform: translateY(-30%) rotate(40deg);
  width: 50%;
  top: 50%;
}

.buttons__burger #burger:checked ~ span:nth-of-type(3) {
  transform: translateY(-70%) rotate(-40deg);
  width: 50%;
  top: 50%;
}
</style>


================================================
FILE: Toggle-switches/varoonrao_spicy-hound-14.html
================================================
<div class="checkbox-con">
  <input id="checkbox" type="checkbox">
</div>
<style>
/* From Uiverse.io by varoonrao - Tags: switch */
.checkbox-con {
 margin: 10px;
 display: flex;
 align-items: center;
 color: white;
}

.checkbox-con input[type="checkbox"] {
 appearance: none;
 width: 48px;
 height: 27px;
 border: 2px solid #ff0000;
 border-radius: 20px;
 background: #f1e1e1;
 position: relative;
 box-sizing: border-box;
}

.checkbox-con input[type="checkbox"]::before {
 content: "";
 width: 14px;
 height: 14px;
 background: rgba(234, 7, 7, 0.5);
 border: 2px solid #ea0707;
 border-radius: 50%;
 position: absolute;
 top: 0;
 left: 0;
 transform: translate(13%, 15%);
 transition: all 0.3s ease-in-out;
}

.checkbox-con input[type="checkbox"]::after {
 content: url("data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.55021 5.84315L17.1568 16.4498L16.4497 17.1569L5.84311 6.55026L6.55021 5.84315Z' fill='%23EA0707' fill-opacity='0.89'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.1567 6.55021L6.55012 17.1568L5.84302 16.4497L16.4496 5.84311L17.1567 6.55021Z' fill='%23EA0707' fill-opacity='0.89'/%3E%3C/svg%3E");
 position: absolute;
 top: 0;
 left: 20px;
}

.checkbox-con input[type="checkbox"]:checked {
 border: 2px solid #02c202;
 background: #e2f1e1;
}

.checkbox-con input[type="checkbox"]:checked::before {
 background: rgba(2, 194, 2, 0.5);
 border: 2px solid #02c202;
 transform: translate(133%, 13%);
 transition: all 0.3s ease-in-out;
}

.checkbox-con input[type="checkbox"]:checked::after {
 content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.8185 0.114533C15.0314 0.290403 15.0614 0.605559 14.8855 0.818454L5.00187 12.5L0.113036 6.81663C-0.0618274 6.60291 -0.0303263 6.2879 0.183396 6.11304C0.397119 5.93817 0.71213 5.96967 0.886994 6.18339L5.00187 11L14.1145 0.181573C14.2904 -0.0313222 14.6056 -0.0613371 14.8185 0.114533Z' fill='%2302C202' fill-opacity='0.9'/%3E%3C/svg%3E");
 position: absolute;
 top: 5px;
 left: 5px;
}

.checkbox-con label {
 margin-left: 10px;
 cursor: pointer;
 user-select: none;
}

</style>


================================================
FILE: Toggle-switches/victoryamaykin_funny-rabbit-33.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by victoryamaykin - Tags: switch */
.switch {
 position: relative;
 display: inline-block;
 width: 120px;
 height: 34px;
}

.switch input {
 display: none;
}

.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #3C3C3C;
 -webkit-transition: .4s;
 transition: .4s;
 border-radius: 34px;
}

.slider:before {
 position: absolute;
 content: "";
 height: 26px;
 width: 26px;
 left: 4px;
 bottom: 4px;
 background-color: white;
 -webkit-transition: .4s;
 transition: .4s;
 border-radius: 50%;
}

input:checked + .slider {
 background-color: #0E6EB8;
}

input:focus + .slider {
 box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
 -webkit-transform: translateX(26px);
 -ms-transform: translateX(26px);
 transform: translateX(85px);
}

/*------ ADDED CSS ---------*/
.slider:after {
 content: 'DISABLED';
 color: white;
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 font-size: 10px;
 font-family: Verdana, sans-serif;
}

input:checked + .slider:after {
 content: 'ENABLED';
}

/*--------- END --------*/
</style>


================================================
FILE: Toggle-switches/vikramsinghnegi_evil-lion-15.html
================================================
<div>
  <div class="switch">
    <input type="checkbox" id="switch1" class="switch-check" />
    <label for="switch1" class="switch-label">
      Check
      <span></span>
    </label>
  </div>
</div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: simple, neumorphism, glassmorphism */
.switch {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50px;
  border: 4px solid rgba(209, 92, 92, 0.1);
  box-shadow: 8 0 6px rgba(44, 26, 26, 0.5) inset;
  height: 42px;
  margin: 8px;
  position: relative;
  width: 115px;
  display: inline-block;
}
.switch-check {
  position: absolute;
  visibility: hidden;
}
.switch-label {
  cursor: pointer;
  display: block;
  height: 42px;
  text-indent: -9999px;
  width: 115px;
}
.switch-label:before {
  background: #fff;
  background: -webkit-radial-gradient(
    45%,
    circle,
    rgb(116, 78, 78) 0%,
    rgb(255, 113, 113) 100%
  );
  border-radius: 10px;
  border: 1px solid #742323;
  box-shadow: 0 2px 5px rgba(255, 67, 48, 0.6),
    0 0 5px rgba(255, 159, 109, 0.5) inset;
  content: "";
  display: block;
  height: 10px;
  left: -20%;
  position: absolute;
  top: 16px;
  transition: all 0.2s;
  width: 10px;
  z-index: 12;
}
.switch-label:after {
  background: #fff;
  background: -moz-radial-gradient(
    45%,
    circle,
    rgba(60, 60, 60, 0.6) 0%,
    rgba(151, 151, 151, 0.6) 100%
  );
  border-radius: 10px;
  border: 1px solid #111;
  box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
  content: "";
  display: block;
  height: 10px;
  right: -20%;
  position: absolute;
  top: 16px;
  transition: all 0.2s;
  width: 10px;
  z-index: 12;
}
.switch-label span {
  background: linear-gradient(#4f4f4f, #2b2b2b);
  border-radius: 30px;
  border: 1px solid #1a1a1a;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5),
    0 1px 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 0 rgba(0, 0, 0, 0.2) inset;
  display: block;
  height: 38px;
  left: 1px;
  position: absolute;
  top: 1px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  width: 53px;
}
.switch-label span:before {
  background: #fff;
  background: -webkit-linear-gradient(
    left,
    rgba(48, 48, 48, 0.4),
    rgba(34, 34, 34, 0.4)
  );
  background: linear-gradient(
    left,
    rgba(48, 48, 48, 0.4),
    rgba(34, 34, 34, 0.4)
  );
  border-radius: 30px 10px 10px 30px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2) inset;
  content: "";
  display: block;
  height: 33px;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 21px;
}
.switch-label span:after {
  background: #fff;
  background: -webkit-linear-gradient(
    right,
    rgba(48, 48, 48, 0.4),
    rgba(34, 34, 34, 0.4)
  );
  border-radius: 10px 30px 30px 10px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2) inset;
  content: "";
  display: block;
  height: 33px;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 21px;
}
.switch-check:checked + .switch-label span {
  left: 59px;
}

</style>
    

================================================
FILE: Toggle-switches/vikramsinghnegi_green-monkey-99.html
================================================
<div class="onoffswitch">
  <input
    checked=""
    id="myonoffswitch"
    class="onoffswitch-checkbox"
    name="onoffswitch"
    type="checkbox"
  />
  <label for="myonoffswitch" class="onoffswitch-label">
    <div class="onoffswitch-inner"></div>
    <div class="onoffswitch-switch"></div>
  </label>
</div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: simple, button, switch */
.onoffswitch {
  position: relative;
  width: 90px;
  user-select: none;
}
.onoffswitch-checkbox {
  display: none;
}
.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #999999;
  border-radius: 20px;
}
.onoffswitch-inner {
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
  float: left;
  width: 50%;
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 14px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}
.onoffswitch-inner:before {
  content: "ON";
  padding-left: 10px;
  background-color: #212f33;
  color: #ffffff;
}
.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 10px;
  background-color: #eeeeee;
  color: #999999;
  text-align: right;
}
.onoffswitch-switch {
  width: 18px;
  margin: 6px;
  background: #ffffff;
  border: 2px solid #271616;
  border-radius: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 56px;
  transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  right: 0px;
}

</style>
    

================================================
FILE: Toggle-switches/vikramsinghnegi_shaggy-owl-31.html
================================================
<div class="toggle">
  <input type="checkbox" />
  <label></label>
</div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: switch, realistic, toggle */
.toggle {
  position: relative;
  box-sizing: border-box;
}
.toggle input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.toggle label {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.toggle label:before {
  content: "";
  width: 70px;
  height: 40px;
  background: #fff;
  border: 2px solid #ddd;
  box-shadow: inset -30px 0 0 #666;
  position: relative;
  display: inline-block;
  border-radius: 20px;
  box-sizing: border-box;
  transition: 0.25s ease-in;
}

.toggle label:after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 50%;
  background: #fffdfd;
  box-shadow: inset -8px -5px #333;
  transition: 0.2s ease-in-out;
}

.toggle input[type="checkbox"]:checked + label:before {
  box-shadow: inset 30px 0 0 #ffeb00;
}
.toggle input[type="checkbox"]:checked + label:after {
  box-shadow: inset 0 0 0 2px #fff;
  background: #ffbc00;
  left: 39px;
  top: 8px;
  border: 2px dashed #fff;
}

</style>
    

================================================
FILE: Toggle-switches/vikramsinghnegi_sharp-cheetah-12.html
================================================
<div class="switch demo3">
  <input type="checkbox" />
  <label><i></i></label>
</div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: material design, animation, gradient, switch, on, off, toggle, figma */
.switch {
  position: relative;
  margin: 25px 20px;
}

.switch input {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.switch.demo3 {
  width: 180px;
  height: 50px;
}

.switch.demo3 label {
  display: block;
  width: 100%;
  height: 100%;
  background: #d8ba5f;
  border-radius: 50px;
  box-shadow: inset 0 4px 8px 2px rgba(248, 6, 6, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.5);
}

.switch.demo3 label:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  border-radius: inherit;
  background: #ababab;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
  background: -webkit-linear-gradient(#f2f2f2, #ababab);
  background: linear-gradient(#f2f2f2, #ababab);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25);
}

.switch.demo3 label:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18px;
  right: -18px;
  bottom: -18px;
  left: -18px;
  border-radius: inherit;
  background: #eee;
  background: linear-gradient(#e5e7e6, #eee);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  filter: blur(1px);
}

.switch.demo3 label i {
  display: block;
  height: 100%;
  width: 60%;
  border-radius: inherit;
  background: silver;
  position: absolute;
  z-index: 2;
  right: 40%;
  top: 0;
  background: #b2ac9e;
  background: linear-gradient(#f7f2f6, #b2ac9e);
  box-shadow: inset 0 1px 0 white, 0 0 8px rgba(0, 0, 0, 0.3),
    0 5px 5px rgba(0, 0, 0, 0.2);
}

.switch.demo3 label i:after {
  content: "";
  position: absolute;
  left: 15%;
  top: 25%;
  width: 70%;
  height: 50%;
  background: #d2cbc3;
  background: linear-gradient(#cbc7bc, #d2cbc3);
  border-radius: inherit;
}

.switch.demo3 label i:before {
  content: "off";
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  right: -50%;
}

.switch.demo3 input:checked ~ label {
  background: #9abb82;
}

.switch.demo3 input:checked ~ label i {
  right: -1%;
}

.switch.demo3 input:checked ~ label i:before {
  content: "on";
  right: 115%;
  color: #82a06a;
  text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #111311;
}

</style>
    

================================================
FILE: Toggle-switches/vikramsinghnegi_sweet-cow-44.html
================================================
<div class="checkbox-wrap">
  <input name="slide" id="slide" type="checkbox" />
  <label for="slide">
    <div id="pinkliquid">
      <div id="shine-one" class="shine"></div>
      <div id="shine-two" class="shine"></div>
      <div id="bubbles"></div>
    </div>
    <div id="circle">
      <div id="inner-circle"></div>
      <div id="inner-circle-two"></div>
    </div>
  </label>
</div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: loading, active, switch, 2d button */
.checkbox-wrap {
  display: block;
  width: 106px;
  height: 51px;
  position: relative;
  margin: 1px auto;
}
#slide {
  display: block;
  width: 106px;
  height: 51px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  z-index: 2;
  opacity: 0;
}
#slide + label {
  display: block;
  width: 105px;
  height: 50px;
  margin: 0px;
  padding: 0px;
  z-index: 1;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
}
#pinkliquid {
  width: 88px;
  height: 36px;
  border-radius: 18px;
  margin: 7px 0 0 9px;
  overflow: hidden;
  background: #b4264a;
  background: linear-gradient(to bottom, #fe0744 0%, #ff0460 50%, #ff0082 100%);
  box-shadow: 0px 0px 9px 0px #ff1e00;
}
.shine {
  width: 100%;
  background: rgba(255, 255, 255, 0.23);
  margin: 6px 0 4px 0;
  transition: all 300ms ease;
}
.shine#shine-one {
  height: 12px;
}
.shine#shine-two {
  height: 3px;
}
#bubbles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
#bubbles i {
  display: block;
  border-radius: 20px;
  background: #3a3236;
  position: absolute;
  transition: all 600ms ease;
}
i#a {
  width: 4px;
  height: 4px;
  top: 35px;
  left: 19px;
}
i#b {
  width: 5px;
  height: 5px;
  top: 24px;
  left: 30px;
}
i#c {
  width: 3px;
  height: 3px;
  top: 15px;
  left: 26px;
}
i#d {
  width: 6px;
  height: 6px;
  top: 20px;
  left: 40px;
}
i#e {
  width: 5px;
  height: 5px;
  top: 30px;
  left: 33px;
}
i#f {
  width: 5px;
  height: 5px;
  top: 30px;
  right: 33px;
}
i#g {
  width: 6px;
  height: 6px;
  top: 20px;
  right: 40px;
}
i#h {
  width: 3px;
  height: 3px;
  top: 15px;
  right: 26px;
}
i#i {
  width: 4px;
  height: 4px;
  top: 35px;
  right: 19px;
}
i#j {
  width: 5px;
  height: 5px;
  top: 24px;
  right: 30px;
}
#circle {
  width: 37px;
  height: 37px;
  border-radius: 19px;
  background: #191919;
  position: absolute;
  top: 7px;
  left: 9px;
  border-right: 1px solid #e3006f;
  box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.24),
    0px 3px 4px 0px #000000;
  transition: all 300ms ease;
}
#inner-circle {
  width: 31px;
  height: 31px;
  margin: 3px;
  border-radius: 16px;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(255, 1, 122, 0.2) 100%
  );
}
#slide:checked + label #circle {
  left: 60px;
  border-right: 1px solid transparent;
  border-left: 1px solid #e3006f;
  background-color: #c27098;
}
#slide:checked + label #inner-circle {
  background: linear-gradient(
    to right,
    rgba(255, 1, 122, 0.2) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}
#slide:checked + label i#a {
  width: 4px;
  height: 4px;
  top: 26px;
  left: 19px;
}
#slide:checked + label i#b {
  width: 5px;
  height: 5px;
  top: 24px;
  left: 30px;
}
#slide:checked + label i#c {
  width: 3px;
  height: 3px;
  top: 24px;
  left: 26px;
}
#slide:checked + label i#d {
  width: 6px;
  height: 6px;
  top: 29px;
  left: 40px;
}
#slide:checked + label i#e {
  width: 5px;
  height: 5px;
  top: 21px;
  left: 33px;
}
#slide:checked + label i#f {
  width: 5px;
  height: 5px;
  top: 26px;
  right: 33px;
}
#slide:checked + label i#g {
  width: 6px;
  height: 6px;
  top: 28px;
  right: 40px;
}
#slide:checked + label i#h {
  width: 3px;
  height: 3px;
  top: 23px;
  right: 26px;
}
#slide:checked + label i#i {
  width: 4px;
  height: 4px;
  top: 25px;
  right: 19px;
}
#slide:checked + label i#j {
  width: 5px;
  height: 5px;
  top: 30px;
  right: 30px;
}
#slide:checked + label .shine#shine-one {
  height: 12px;
  margin-top: 12px;
}
#slide:checked + label .shine#shine-two {
  height: 3px;
  margin-top: -20px;
}

</style>
    

================================================
FILE: Toggle-switches/vinodjangid07_average-jellyfish-29.html
================================================
<input type="checkbox" id="checkboxInput">
    <label for="checkboxInput" class="toggleSwitch">

<div class="speaker"><svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 75 75">
<path d="M39.389,13.769 L22.235,28.606 L6,28.606 L6,47.699 L21.989,47.699 L39.389,62.75 L39.389,13.769z" style="stroke:#fff;stroke-width:5;stroke-linejoin:round;fill:#fff;"></path>
<path d="M48,27.6a19.5,19.5 0 0 1 0,21.4M55.1,20.5a30,30 0 0 1 0,35.6M61.6,14a38.8,38.8 0 0 1 0,48.6" style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"></path>
</svg></div>

<div class="mute-speaker"><svg version="1.0" viewBox="0 0 75 75" stroke="#fff" stroke-width="5">
<path d="m39,14-17,15H6V48H22l17,15z" fill="#fff" stroke-linejoin="round"></path>
<path d="m49,26 20,24m0-24-20,24" fill="#fff" stroke-linecap="round"></path>
</svg></div>

    </label>





<style>
/* From Uiverse.io by vinodjangid07 - Tags: switch, toggle, volume, click effect */
/* The switch - the box around the speaker*/
.toggleSwitch {
  width: 50px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(39, 39, 39);
  border-radius: 50%;
  cursor: pointer;
  transition-duration: .3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.13);
  overflow: hidden;
}

/* Hide default HTML checkbox */
#checkboxInput {
  display: none;
}

.bell {
  width: 18px;
}

.bell path {
  fill: white;
}

.speaker {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition-duration: .3s;
}

.speaker svg {
  width: 18px;
}

.mute-speaker {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 3;
  transition-duration: .3s;
}

.mute-speaker svg {
  width: 18px;
}

#checkboxInput:checked +.toggleSwitch .speaker {
  opacity: 0;
  transition-duration: .3s;
}

#checkboxInput:checked +.toggleSwitch .mute-speaker {
  opacity: 1;
  transition-duration: .3s;
}

#checkboxInput:active + .toggleSwitch {
  transform: scale(0.7);
}

#checkboxInput:hover + .toggleSwitch {
  background-color: rgb(61, 61, 61);
}
</style>


================================================
FILE: Toggle-switches/vinodjangid07_breezy-goose-71.html
================================================
<label for="checkboxInput" class="bookmark">
  <input type="checkbox" id="checkboxInput" />
  <svg
    width="15"
    viewBox="0 0 50 70"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="svgIcon"
  >
    <path
      d="M46 62.0085L46 3.88139L3.99609 3.88139L3.99609 62.0085L24.5 45.5L46 62.0085Z"
      stroke="black"
      stroke-width="7"
    ></path>
  </svg>
</label>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, switch, toggle, click, save, pin, bookmark */
#checkboxInput {
  display: none;
}
.bookmark {
  cursor: pointer;
  background-color: teal;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.svgIcon path {
  stroke-dasharray: 200 0;
  stroke-dashoffset: 0;
  stroke: white;
  fill: #dddddd00;
  transition-delay: 0s;
  transition-duration: 0.5s;
}

#checkboxInput:checked ~ .svgIcon path {
  fill: white;
  animation: bookmark 0.5s linear;
  transition-delay: 0.5s;
}

@keyframes bookmark {
  0% {
    stroke-dasharray: 0 200;
    stroke-dashoffset: 80;
  }
  100% {
    stroke-dasharray: 200 0;
  }
}

</style>
    

================================================
FILE: Toggle-switches/vinodjangid07_gentle-parrot-87.html
================================================
<input type="checkbox" id="checkbox" />
<label for="checkbox" class="switch">
  Start
  <svg
    class="slider"
    viewBox="0 0 512 512"
    height="1em"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V256c0 17.7 14.3 32 32 32s32-14.3 32-32V32zM143.5 120.6c13.6-11.3 15.4-31.5 4.1-45.1s-31.5-15.4-45.1-4.1C49.7 115.4 16 181.8 16 256c0 132.5 107.5 240 240 240s240-107.5 240-240c0-74.2-33.8-140.6-86.6-184.6c-13.6-11.3-33.8-9.4-45.1 4.1s-9.4 33.8 4.1 45.1c38.9 32.3 63.5 81 63.5 135.4c0 97.2-78.8 176-176 176s-176-78.8-176-176c0-54.4 24.7-103.1 63.5-135.4z"
    ></path>
  </svg>
</label>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: active, switch, toggle, toggle switch */
#checkbox {
  display: none;
}

.switch {
  position: relative;
  width: fit-content;
  padding: 10px 20px;
  background-color: rgb(46, 46, 46);
  border-radius: 50px;
  z-index: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: white;
  font-size: 0.9em;
  font-weight: 600;
  transition: all 0.3s;
}
.switch svg path {
  fill: white;
}
#checkbox:checked + .switch {
  background-color: rgb(174, 0, 255);
  box-shadow: 0px 0px 40px rgba(174, 0, 255, 0.438);
}

</style>
    

================================================
FILE: Toggle-switches/vinodjangid07_itchy-mule-52.html
================================================
 <input id="checkboxInput" type="checkbox">
    <label class="toggleSwitch" for="checkboxInput">
    </label>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: switch, neon, toggle switch */
/* To hide the checkbox */
#checkboxInput {
  display: none;
}

.toggleSwitch {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 50px;
  height: 17px;
  background-color: rgb(82, 82, 82);
  border-radius: 20px;
  cursor: pointer;
  transition-duration: .2s;
}

.toggleSwitch::after {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 0px;
  background-color: rgb(41, 41, 41);
  border-radius: 50%;
  transition-duration: .2s;
  border: 2px solid rgb(82, 82, 82);
}

#checkboxInput:checked+.toggleSwitch::after {
  transform: translateX(100%);
  transition-duration: .2s;
  border: 2px solid rgb(165, 255, 105);
}
/* Switch background change */
#checkboxInput:checked+.toggleSwitch {
  background-color: rgb(165, 255, 105);
  transition-duration: .2s;
}

</style>


================================================
FILE: Toggle-switches/vinodjangid07_lazy-cheetah-23.html
================================================
 <input id="checkboxInput" type="checkbox">
    <label class="toggleSwitch" for="checkboxInput">
    </label>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: switch, toggle switch, metallic */
/* To hide the checkbox */
#checkboxInput {
  display: none;
}

.toggleSwitch {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 90px;
  height: 30px;
  background-color: rgb(206, 206, 206);
  border-radius: 40px;
  cursor: pointer;
  transition-duration: .3s;
}

.toggleSwitch::after {
  content: "";
  position: absolute;
  height: 30px;
  width: 50%;
  left: 0px;
  background: conic-gradient(rgba(26, 26, 26, 0.555),white,rgba(26, 26, 26, 0.555),white,rgba(26, 26, 26, 0.555));
  border-radius: 40px;
  transition-duration: .3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.281);
}

#checkboxInput:checked+.toggleSwitch::after {
  transform: translateX(100%);
  transition-duration: .3s;
}
/* Switch background change */
#checkboxInput:checked+.toggleSwitch {
  background-color: rgb(124, 173, 206);
  transition-duration: .3s;
}
</style>


================================================
FILE: Toggle-switches/vinodjangid07_lucky-mole-65.html
================================================
 <input id="checkboxInput" type="checkbox">
    <label class="toggleSwitch" for="checkboxInput">
    </label>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: skeuomorphism, switch, metal */
/* To hide the checkbox */
#checkboxInput {
  display: none;
}

.toggleSwitch {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 80px;
  height: 40px;
  background-color: rgb(199, 199, 199);
  border-radius: 20px;
  cursor: pointer;
  transition-duration: .3s;
}

.toggleSwitch::after {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  left: 0px;
  background: conic-gradient(rgb(104, 104, 104),white,rgb(104, 104, 104),white,rgb(104, 104, 104));
  border-radius: 50%;
  transition-duration: .3s;
  box-shadow: 5px 2px 7px rgba(8, 8, 8, 0.308);
}

#checkboxInput:checked+.toggleSwitch::after {
  transform: translateX(100%);
  transition-duration: .3s;
}
/* Switch background change */
#checkboxInput:checked+.toggleSwitch {
  background-color: rgb(153, 197, 151);
  transition-duration: .3s;
}
</style>


================================================
FILE: Toggle-switches/vinodjangid07_moody-rabbit-65.html
================================================
 <input type="checkbox" id="checkboxInput">
    <label for="checkboxInput" class="toggleSwitch">
    </label>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: switch, toggle, click effect */
/* To hide the checkbox */
#checkboxInput {
  display: none;
}

.toggleSwitch {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 50px;
  height: 30px;
  background-color: rgb(82, 82, 82);
  border-radius: 20px;
  cursor: pointer;
  transition-duration: .2s;
}

.toggleSwitch::after {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  left: 5px;
  background-color: transparent;
  border-radius: 50%;
  transition-duration: .2s;
  box-shadow: 5px 2px 7px rgba(8, 8, 8, 0.26);
  border: 5px solid white;
}

#checkboxInput:checked+.toggleSwitch::after {
  transform: translateX(100%);
  transition-duration: .2s;
  background-color: white;
}
/* Switch background change */
#checkboxInput:checked+.toggleSwitch {
  background-color: rgb(148, 118, 255);
  transition-duration: .2s;
}

</style>


================================================
FILE: Toggle-switches/vinodjangid07_quick-moth-22.html
================================================
<input id="checkbox" type="checkbox" />
<label class="switch" for="checkbox">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="slider">
    <path
      d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V256c0 17.7 14.3 32 32 32s32-14.3 32-32V32zM143.5 120.6c13.6-11.3 15.4-31.5 4.1-45.1s-31.5-15.4-45.1-4.1C49.7 115.4 16 181.8 16 256c0 132.5 107.5 240 240 240s240-107.5 240-240c0-74.2-33.8-140.6-86.6-184.6c-13.6-11.3-33.8-9.4-45.1 4.1s-9.4 33.8 4.1 45.1c38.9 32.3 63.5 81 63.5 135.4c0 97.2-78.8 176-176 176s-176-78.8-176-176c0-54.4 24.7-103.1 63.5-135.4z"
    ></path>
  </svg>
</label>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: switch, neon, toggle, power on */
#checkbox {
  display: none;
}

.switch {
  position: relative;
  width: 70px;
  height: 70px;
  background-color: rgb(99, 99, 99);
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgb(126, 126, 126);
  box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;
}
.switch svg {
  width: 1.2em;
}
.switch svg path {
  fill: rgb(48, 48, 48);
}
#checkbox:checked + .switch {
  box-shadow: 0px 0px 1px rgb(151, 243, 255) inset,
    0px 0px 2px rgb(151, 243, 255) inset, 0px 0px 10px rgb(151, 243, 255) inset,
    0px 0px 40px rgb(151, 243, 255), 0px 0px 100px rgb(151, 243, 255),
    0px 0px 5px rgb(151, 243, 255);
  border: 2px solid rgb(255, 255, 255);
  background-color: rgb(146, 180, 184);
}
#checkbox:checked + .switch svg {
  filter: drop-shadow(0px 0px 5px rgb(151, 243, 255));
}
#checkbox:checked + .switch svg path {
  fill: rgb(255, 255, 255);
}

</style>
    

================================================
FILE: Toggle-switches/vinodjangid07_quick-squid-85.html
================================================
<input id="checkboxInput" type="checkbox" />
<label class="toggleSwitch" for="checkboxInput">
  <svg
    class="slider"
    viewBox="0 0 512 512"
    height="1em"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V256c0 17.7 14.3 32 32 32s32-14.3 32-32V32zM143.5 120.6c13.6-11.3 15.4-31.5 4.1-45.1s-31.5-15.4-45.1-4.1C49.7 115.4 16 181.8 16 256c0 132.5 107.5 240 240 240s240-107.5 240-240c0-74.2-33.8-140.6-86.6-184.6c-13.6-11.3-33.8-9.4-45.1 4.1s-9.4 33.8 4.1 45.1c38.9 32.3 63.5 81 63.5 135.4c0 97.2-78.8 176-176 176s-176-78.8-176-176c0-54.4 24.7-103.1 63.5-135.4z"
    ></path>
  </svg>
</label>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: slider, animation, switch, toggle, click effect */
/* To hide the checkbox */
#checkboxInput {
  display: none;
}

.toggleSwitch {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 50px;
  height: 30px;
  background-color: rgb(112, 112, 112);
  border-radius: 20px;
  cursor: pointer;
  transition-duration: 0.2s;
}

.slider {
  height: 20px;
  position: absolute;
  left: 5px;
  border-radius: 50%;
  transition-duration: 0.2s;
  border: 3px solid rgb(71, 71, 71);
  background-color: rgb(71, 71, 71);
  fill: rgb(255, 129, 129);
}

#checkboxInput:checked + .toggleSwitch .slider {
  transform: translateX(100%);
  transition-duration: 0.2s;
  fill: rgb(94, 255, 1);
}
/* Switch background change */
#checkboxInput:checked + .toggleSwitch {
  /* background-color: rgb(148, 118, 255); */
  transition-duration: 0.2s;
}

</style>
    

================================================
FILE: Toggle-switches/vinodjangid07_rare-duck-10.html
================================================
<input type="checkbox" id="lock" />
<label for="lock" class="lock-label">
  <span class="lock-wrapper">
    <span class="shackle"></span>
    <svg
      class="lock-body"
      width=""
      height=""
      viewBox="0 0 28 28"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M0 5C0 2.23858 2.23858 0 5 0H23C25.7614 0 28 2.23858 28 5V23C28 25.7614 25.7614 28 23 28H5C2.23858 28 0 25.7614 0 23V5ZM16 13.2361C16.6137 12.6868 17 11.8885 17 11C17 9.34315 15.6569 8 14 8C12.3431 8 11 9.34315 11 11C11 11.8885 11.3863 12.6868 12 13.2361V18C12 19.1046 12.8954 20 14 20C15.1046 20 16 19.1046 16 18V13.2361Z"
        fill="white"
      ></path>
    </svg>
  </span>
</label>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, active, switch, lock, toggle, toggle switch */
#lock {
  display: none;
}
.lock-label {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(80, 80, 80);
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s;
}
.lock-wrapper {
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(-10deg);
}
.shackle {
  background-color: transparent;
  height: 9px;
  width: 14px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top: 3px solid white;
  border-left: 3px solid white;
  border-right: 3px solid white;
  transition: all 0.3s;
}
.lock-body {
  width: 15px;
}
#lock:checked + .lock-label .lock-wrapper .shackle {
  transform: rotateY(150deg) translateX(3px);
  transform-origin: right;
}
#lock:checked + .lock-label {
  background-color: rgb(167, 71, 245);
}
.lock-label:active {
  transform: scale(0.9);
}

</style>
    

================================================
FILE: Toggle-switches/vinodjangid07_selfish-snail-81.html
================================================
<input id="checkbox" type="checkbox">
    <label class="Switch" for="checkbox">
    </label>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: switch */
#checkbox {
  display: none;
}

.Switch {
  position: relative;
  width: 50px;
  height: 100px;
  background-color: rgb(228, 228, 228);
  border-radius: 30px;
  z-index: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.274) inset,
    -2px 0px 5px rgba(255, 255, 255, 0.411) inset;
}

.Switch::before {
  content: "";
  background-color: rgb(39, 39, 39);
  position: absolute;
  height: 80%;
  width: 5px;
  border-radius: 5px;
}

.Switch::after {
  background-color: #5e5e5e;
  border: 1px solid rgb(35, 255, 35);
  content: "";
  position: absolute;
  height: 5px;
  width: 25px;
  top: 15px;
  transition-duration: .3s;
  box-shadow: 5px 2px 5px rgba(8, 8, 8, 0.288);
  border-radius: 5px;
}

#checkbox:checked+.Switch::after {
  transform: translateY(65px);
  transition-duration: .3s;
  border: 1px solid rgb(236, 0, 0);
}

</style>


================================================
FILE: Toggle-switches/vinodjangid07_soft-octopus-29.html
================================================
 <input type="checkbox" id="checkbox">
    <label for="checkbox" class="toggle">
        <div class="bars" id="bar1"></div>
        <div class="bars" id="bar2"></div>
        <div class="bars" id="bar3"></div>
    </label>
<style>
/* From Uiverse.io by vinodjangid07 - Tags: switch, hamburger */
#checkbox {
  display: none;
}

.toggle {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition-duration: .5s;
}

.bars {
  width: 100%;
  height: 4px;
  background-color: rgb(176, 92, 255);
  border-radius: 4px;
}

#bar2 {
  transition-duration: .8s;
}

#bar1,#bar3 {
  width: 70%;
}

#checkbox:checked + .toggle .bars {
  position: absolute;
  transition-duration: .5s;
}

#checkbox:checked + .toggle #bar2 {
  transform: scaleX(0);
  transition-duration: .5s;
}

#checkbox:checked + .toggle #bar1 {
  width: 100%;
  transform: rotate(45deg);
  transition-duration: .5s;
}

#checkbox:checked + .toggle #bar3 {
  width: 100%;
  transform: rotate(-45deg);
  transition-duration: .5s;
}

#checkbox:checked + .toggle {
  transition-duration: .5s;
  transform: rotate(180deg);
}
</style>


================================================
FILE: Toggle-switches/vinodjangid07_tame-eagle-29.html
================================================
 <input id="checkbox" type="checkbox">
    <label class="toggle" for="checkbox">
        <div id="bar1" class="bars"></div>
        <div id="bar2" class="bars"></div>
        <div id="bar3" class="bars"></div>
    </label>


<style>
/* From Uiverse.io by vinodjangid07 - Tags: switch, hamburger, click effect */
#checkbox {
  display: none;
}

.toggle {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition-duration: .3s;
}

.bars {
  width: 100%;
  height: 4px;
  background-color: rgb(253, 255, 243);
  border-radius: 5px;
  transition-duration: .3s;
}

/* #checkbox:checked + .toggle .bars {
  margin-left: 13px;
} */

#checkbox:checked + .toggle #bar2 {
  transform: translateY(14px) rotate(60deg);
  margin-left: 0;
  transform-origin: right;
  transition-duration: .3s;
  z-index: 2;
}

#checkbox:checked + .toggle #bar1 {
  transform: translateY(28px) rotate(-60deg);
  transition-duration: .3s;
  transform-origin: left;
  z-index: 1;
}

#checkbox:checked + .toggle {
  transform: rotate(-90deg);
}
/* #checkbox:checked + .toggle #bar3 {
  transform: rotate(90deg);
  transition-duration: .3s;
  transform-origin:right;
} */

</style>


================================================
FILE: Toggle-switches/vinodjangid07_tricky-turkey-48.html
================================================
    <input id="checkbox" type="checkbox">
    <label class="switch" for="checkbox">
        <svg viewBox="0 0 448 512" class="svg"><path d="M320 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM125.7 175.5c9.9-9.9 23.4-15.5 37.5-15.5c1.9 0 3.8 .1 5.6 .3L137.6 254c-9.3 28 1.7 58.8 26.8 74.5l86.2 53.9-25.4 88.8c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l28.7-100.4c5.9-20.6-2.6-42.6-20.7-53.9L238 299l30.9-82.4 5.1 12.3C289 264.7 323.9 288 362.7 288H384c17.7 0 32-14.3 32-32s-14.3-32-32-32H362.7c-12.9 0-24.6-7.8-29.5-19.7l-6.3-15c-14.6-35.1-44.1-61.9-80.5-73.1l-48.7-15c-11.1-3.4-22.7-5.2-34.4-5.2c-31 0-60.8 12.3-82.7 34.3L57.4 153.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l23.1-23.1zM91.2 352H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h69.6c19 0 36.2-11.2 43.9-28.5L157 361.6l-9.5-6c-17.5-10.9-30.5-26.8-37.9-44.9L91.2 352z"></path></svg>Start
    </label>

<style>
/* From Uiverse.io by vinodjangid07 - Tags: switch */
#checkbox {
  display: none;
}

.switch {
  position: relative;
  width: 90px;
  height: 90px;
  background-color: rgb(99, 99, 99);
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.9em;
  font-weight: 700;
  color: rgb(37, 37, 37);
  border: 2px solid rgb(126, 126, 126);
  box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;
}

.svg {
  position: relative;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg path {
  fill: rgb(37, 37, 37);
}

#checkbox:checked + .switch .svg {
  filter: drop-shadow(0px 0px 3px rgb(222, 151, 255));
}

#checkbox:checked + .switch .svg path {
  fill: rgb(255, 255, 255);
}

#checkbox:checked + .switch {
  box-shadow: 0px 0px 1px rgb(222, 151, 255) inset,
      0px 0px 2px rgb(222, 151, 255) inset,
      0px 0px 10px rgb(222, 151, 255) inset,
      0px 0px 40px rgb(222, 151, 255),
      0px 0px 100px rgb(222, 151, 255),
      0px 0px 5px rgb(222, 151, 255);
  border: 2px solid rgb(255, 255, 255);
  background-color: rgb(152, 107, 172);
  color: rgb(255, 255, 255);
}
  

</style>


================================================
FILE: Toggle-switches/vinodjangid07_unlucky-emu-32.html
================================================
 <input type="checkbox" id="checkbox">
    <label for="checkbox" class="toggle">
        <div class="bars" id="bar1"></div>
        <div class="bars" id="bar2"></div>
        <div class="bars" id="bar3"></div>
    </label>


<style>
/* From Uiverse.io by vinodjangid07 - Tags: switch, hamburger, toggle, click effect */
#checkbox {
  display: none;
}

.toggle {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition-duration: .3s;
}

.bars {
  width: 100%;
  height: 4px;
  background-color: rgb(76, 189, 151);
  border-radius: 5px;
  transition-duration: .3s;
}

#checkbox:checked + .toggle .bars {
  margin-left: 13px;
}

#checkbox:checked + .toggle #bar2 {
  transform: rotate(135deg);
  margin-left: 0;
  transform-origin: center;
  transition-duration: .3s;
}

#checkbox:checked + .toggle #bar1 {
  transform: rotate(45deg);
  transition-duration: .3s;
  transform-origin: left center;
}

#checkbox:checked + .toggle #bar3 {
  transform: rotate(-45deg);
  transition-duration: .3s;
  transform-origin: left center;
}

</style>


================================================
FILE: Toggle-switches/vk-uiux_lucky-owl-16.html
================================================
<div id="menuToggle">
  <input id="checkbox" type="checkbox">
  <label class="toggle" for="checkbox">
      <div class="bar bar--top"></div>
      <div class="bar bar--middle"></div>
      <div class="bar bar--bottom"></div>
  </label>
</div>
<style>
/* From Uiverse.io by vk-uiux - Tags: animation, switch, hamburger, toggle, css, click effect, toggle switch, css effect, click animation */
#checkbox {
  display: none;
}

.toggle {
  position: relative;
  width: 40px;
  cursor: pointer;
  margin: auto;
  display: block;
  height: calc(4px * 3 + 11px * 2);
}

.bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: calc(4px / 2);
  background: #7b52b9;
  color: inherit;
  opacity: 1;
  transition: none 0.35s cubic-bezier(.5,-0.35,.35,1.5) 0s;
}

/***** Collapse Animation *****/

.bar--top {
  bottom: calc(50% + 11px + 4px/ 2);
  transition-property: bottom,margin,transform;
  transition-delay: calc(0s + 0.35s),0s,0s;
}

.bar--middle {
  top: calc(50% - 4px/ 2);
  transition-property: top,opacity;
  transition-duration: 0.35s,0s;
  transition-delay: calc(0s + 0.35s * 1.3),calc(0s + 0.35s * 1.3);
}

.bar--bottom {
  top: calc(50% + 11px + 4px/ 2);
  transition-property: top,transform;
  transition-delay: 0s;
}

#checkbox:checked + .toggle .bar--top {
  bottom: calc(50% - 11px - 4px);
  margin-bottom: calc(11px + 4px/ 2);
  transform: rotate(45deg);
  transition-delay: calc(0s + 0.35s * .3),calc(0s + 0.35s * 1.3),calc(0s + 0.35s * 1.3);
}

#checkbox:checked + .toggle .bar--middle {
  top: calc(50% + 11px);
  opacity: 0;
  transition-duration: 0.35s,0s;
  transition-delay: 0s,calc(0s + 0.35s);
}

#checkbox:checked + .toggle .bar--bottom {
  top: calc(50% - 4px/ 2);
  transform: rotate(-45deg);
  transition-delay: calc(0s + 0.35s * 1.3),calc(0s + 0.35s * 1.3);
}
</style>


================================================
FILE: Toggle-switches/vk-uiux_mighty-quail-93.html
================================================
<input type="checkbox" id="checkbox">
<label for="checkbox" class="toggle">
  <div class="bar bar--top"></div>
  <div class="bar bar--middle"></div>
  <div class="bar bar--bottom"></div>
</label>

<style>
/* From Uiverse.io by vk-uiux - Tags: icon, animation, hamburger, bars, toggle, toggle switch, css effect, interactive */
#checkbox {
  display: none;
}

.toggle {
  position: relative;
  width: 40px;
  cursor: pointer;
  margin: auto;
  display: block;
  height: calc(4px * 3 + 11px * 2);
}

.bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: calc(4px / 2);
  background: #7b52b9;
  color: inherit;
  opacity: 1;
  transition: none 0.35s cubic-bezier(.5,-0.35,.35,1.5) 0s;
}

/***** Spin Animation *****/

.bar--top {
  bottom: calc(50% + 11px + 4px/ 2);
  transition-property: bottom,transform;
  transition-delay: calc(0s + 0.35s),0s;
}

.bar--middle {
  top: calc(50% - 4px/ 2);
  transition-property: opacity;
  transition-delay: calc(0s + 0.35s);
}

.bar--bottom {
  top: calc(50% + 11px + 4px/ 2);
  transition-property: top,transform;
  transition-delay: calc(0s + 0.35s),0s;
}

#checkbox:checked + .toggle .bar--top {
  bottom: calc(50% - 4px/ 2);
  transform: rotate(135deg);
  transition-delay: 0s,calc(0s + 0.35s);
}

#checkbox:checked + .toggle .bar--middle {
  opacity: 0;
  transition-duration: 0s;
  transition-delay: calc(0s + 0.35s);
}

#checkbox:checked + .toggle .bar--bottom {
  top: calc(50% - 4px/ 2);
  transform: rotate(225deg);
  transition-delay: 0s,calc(0s + 0.35s);
}
</style>


================================================
FILE: Toggle-switches/vk-uiux_serious-wasp-12.html
================================================
<div id="menuToggle">
  <input id="checkbox" type="checkbox">
  <label class="toggle" for="checkbox">
    <div class="bar bar--top"></div>
    <div class="bar bar--middle"></div>
    <div class="bar bar--bottom"></div>
  </label>
</div>
<style>
/* From Uiverse.io by vk-uiux - Tags: animation, switch, hamburger, bars, toggle, css, toggle switch, css effect, interactive, tornado */
#checkbox {
  display: none;
}

.toggle {
  position: relative;
  width: 40px;
  cursor: pointer;
  margin: auto;
  display: block;
  height: calc(4px * 3 + 11px * 2);
}

.bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: calc(4px / 2);
  background: #7b52b9;
  color: inherit;
  opacity: 1;
  transition: none 0.35s cubic-bezier(.5,-0.35,.35,1.5) 0s;
}

/***** Tornado Animation *****/

.bar--top {
  bottom: calc(50% + 11px + 4px/ 2);
  transition-property: bottom,transform;
  transition-delay: calc(0s + 0.35s) * .6;
}

.bar--middle {
  top: calc(50% - 4px/ 2);
  transition-property: opacity,transform;
  transition-delay: calc(0s + 0.35s * .3);
}

.bar--bottom {
  top: calc(50% + 11px + 4px/ 2);
  transition-property: top,transform;
  transition-delay: 0s;
}

#checkbox:checked + .toggle .bar--top {
  transform: rotate(-135deg);
  transition-delay: 0s;
  bottom: calc(50% - 4px/ 2);
}

#checkbox:checked + .toggle .bar--middle {
  opacity: 0;
  transform: rotate(-135deg);
  transition-delay: calc(0s + 0.35s * .3);
}

#checkbox:checked + .toggle .bar--bottom {
  top: calc(50% - 4px/ 2);
  transform: rotate(-225deg);
  transition-delay: calc(0s + 0.35s * .6);
}
</style>


================================================
FILE: Toggle-switches/zanina-yassine_afraid-eel-50.html
================================================
<p class="component-title">iOS Switch</p>

<div class="container">
  <input type="checkbox" class="checkbox" id="checkbox">
  <label class="switch" for="checkbox">
    <span class="slider"></span>
  </label>
</div>
<style>
/* From Uiverse.io by zanina-yassine - Tags: switch, ios */
/* Remove this container when use*/
.component-title {
  width: 100%;
  position: absolute;
  z-index: 999;
  top: 30px;
  left: 0;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #888;
  text-align: center;
}

/* The switch - the box around the slider */
.container {
  width: 51px;
  height: 31px;
  position: relative;
}

/* Hide default HTML checkbox */
.checkbox {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch {
  width: 100%;
  height: 100%;
  display: block;
  background-color: #e9e9eb;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

/* The slider */
.slider {
  width: 27px;
  height: 27px;
  position: absolute;
  left: calc(50% - 27px/2 - 10px);
  top: calc(50% - 27px/2);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15), 0px 3px 1px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease-out;
  cursor: pointer;
}

.checkbox:checked + .switch {
  background-color: #34C759;
}

.checkbox:checked + .switch .slider {
  left: calc(50% - 27px/2 + 10px);
  top: calc(50% - 27px/2);
}

</style>


================================================
FILE: Toggle-switches/zebra76966_black-mayfly-32.html
================================================
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by zebra76966 - Tags: switch, moon, sun, toggle, light&dark, emoji */
.switch {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 60px;
  padding: 2px;
  left: 50%;
  transform: translate(-50%,-50%);
}

.switch input {
  opacity: 0;
  height: 0;
  width: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.2);
  border-style: outset;
  background-color: white;
  transition: 0.4s;
}

.slider::before {
  content: "🌞";
  font-size: 22px;
  line-height: 15px;
  border-radius: 100%;
  position: absolute;
  left: -0.8px;
  top: 8px;
  background-color: transparent;
  transition: 0.4s;
}

.switch > input:checked + .slider {
  background-color: #000429;
}

.switch > input:checked + .slider:before {
  content: "🌑";
  font-size: 22px;
  line-height: 25px;
  background-color: transparent;
  transform: translateY(24px);
}
</style>


================================================
FILE: Toggle-switches/zjssun_friendly-sheep-29.html
================================================
<!-- From Uiverse.io by zjssun  - Tags: switch -->
<label class="switch relative cursor-pointer">
  <input class="sr-only peer" type="checkbox" />
  <div
    class="after:z-10 w-[144px] h-[74px] rounded-full bg-white border-black border-2 hover:bg-rose-50 peer-checked:bg-black transition-all duration-300 ease-in-out after:w-[58px] after:h-[58px] after:bg-black after:rounded-full after:absolute after:top-2 after:left-2 after:transition-all after:duration-500 after:ease-in-out after:peer-checked:translate-x-[72px] after:peer-checked:bg-rose-50"
  ></div>
  <svg
    class="absolute opacity-0 peer-checked:opacity-100 top-4 left-4 z-20 fill-black w-10 h-10 -rotate-90 peer-checked:rotate-0 peer-checked:translate-x-[72px] transition-all duration-500 ease-in-out"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    viewBox="0 0 100 100"
  >
    <path
      class="cls-1"
      d="M61.4,18c-5.5-1.6-11.3,1.6-12.9,7.1l-.8,2.9c-.5,1.9-1.5,3.6-2.8,5.1l-7.4,8.2c-1.3,1.4-1.2,3.6.2,4.9s3.6,1.2,4.9-.2l7.4-8.2c2-2.2,3.5-4.9,4.4-7.8l.8-2.9c.5-1.8,2.4-2.9,4.3-2.4s2.9,2.4,2.4,4.3l-.8,2.9c-.8,2.9-2.1,5.6-3.8,8-.8,1.1-.8,2.4-.2,3.6s1.8,1.9,3.1,1.9h19.3c1.3,0,2.3,1,2.3,2.3s-.6,1.8-1.5,2.2c-1.1.4-1.9,1.3-2.2,2.4s0,2.3.8,3.1c.4.4.6.9.6,1.5,0,1.1-.8,2.1-1.9,2.3-1.2.2-2.2,1.1-2.6,2.2s-.2,2.4.5,3.4c.3.4.5.9.5,1.4,0,1-.6,1.8-1.5,2.2-1.7.7-2.6,2.4-2.1,4.2,0,.2,0,.4,0,.6,0,1.3-1,2.3-2.3,2.3h-14.1c-1.8,0-3.6-.5-5.1-1.5l-8.9-5.9c-1.6-1.1-3.7-.6-4.8,1s-.6,3.7,1,4.8l8.9,5.9c2.7,1.8,5.8,2.7,9,2.7h14.1c5,0,9.1-4,9.3-9,2.1-1.7,3.5-4.3,3.5-7.2s0-1.3-.2-1.9c2.2-1.7,3.7-4.4,3.7-7.4s-.1-1.9-.4-2.7c1.7-1.7,2.7-4,2.7-6.6,0-5.1-4.1-9.3-9.3-9.3h-13.4c.7-1.5,1.3-3.1,1.7-4.7l.8-2.9c1.6-5.5-1.6-11.3-7.1-12.9h0ZM19.2,40.7c-2.6,0-4.6,2.1-4.6,4.6v32.4c0,2.6,2.1,4.6,4.6,4.6h9.3c2.6,0,4.6-2.1,4.6-4.6v-32.4c0-2.6-2.1-4.6-4.6-4.6h-9.3Z"
    ></path>
  </svg>
  <svg
    class="absolute opacity-100 peer-checked:opacity-0 transition-all duration-100 ease-in-out top-4 right-4 fill-black w-10 h-10"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    viewBox="0 0 100 100"
  >
    <path
      class="cls-1"
      d="M61.4,18c-5.5-1.6-11.3,1.6-12.9,7.1l-.8,2.9c-.5,1.9-1.5,3.6-2.8,5.1l-7.4,8.2c-1.3,1.4-1.2,3.6.2,4.9s3.6,1.2,4.9-.2l7.4-8.2c2-2.2,3.5-4.9,4.4-7.8l.8-2.9c.5-1.8,2.4-2.9,4.3-2.4s2.9,2.4,2.4,4.3l-.8,2.9c-.8,2.9-2.1,5.6-3.8,8-.8,1.1-.8,2.4-.2,3.6s1.8,1.9,3.1,1.9h19.3c1.3,0,2.3,1,2.3,2.3s-.6,1.8-1.5,2.2c-1.1.4-1.9,1.3-2.2,2.4s0,2.3.8,3.1c.4.4.6.9.6,1.5,0,1.1-.8,2.1-1.9,2.3-1.2.2-2.2,1.1-2.6,2.2s-.2,2.4.5,3.4c.3.4.5.9.5,1.4,0,1-.6,1.8-1.5,2.2-1.7.7-2.6,2.4-2.1,4.2,0,.2,0,.4,0,.6,0,1.3-1,2.3-2.3,2.3h-14.1c-1.8,0-3.6-.5-5.1-1.5l-8.9-5.9c-1.6-1.1-3.7-.6-4.8,1s-.6,3.7,1,4.8l8.9,5.9c2.7,1.8,5.8,2.7,9,2.7h14.1c5,0,9.1-4,9.3-9,2.1-1.7,3.5-4.3,3.5-7.2s0-1.3-.2-1.9c2.2-1.7,3.7-4.4,3.7-7.4s-.1-1.9-.4-2.7c1.7-1.7,2.7-4,2.7-6.6,0-5.1-4.1-9.3-9.3-9.3h-13.4c.7-1.5,1.3-3.1,1.7-4.7l.8-2.9c1.6-5.5-1.6-11.3-7.1-12.9h0ZM19.2,40.7c-2.6,0-4.6,2.1-4.6,4.6v32.4c0,2.6,2.1,4.6,4.6,4.6h9.3c2.6,0,4.6-2.1,4.6-4.6v-32.4c0-2.6-2.1-4.6-4.6-4.6h-9.3Z"
    ></path>
  </svg>
</label>


    

================================================
FILE: Tooltips/Cksunandh_afraid-snail-51.html
================================================
<div class="tooltip-container">
  <span class="tooltip">Hello</span>
  <span class="text">Let me Pop up</span>
</div>

<style>
/* From Uiverse.io by Cksunandh  - Tags: simple, tooltip, button, color, btn, html, css, simple button */
.tooltip-container {
  color: #ffffff;
  --background: #00a36d;
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  border-radius: 50px;
}

.tooltip {
  background-color: #00a36d;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  border-radius: 50px;
}

.tooltip::before {
  background-color: #00a36d;
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
}

.tooltip-container:hover .tooltip {
  top: -100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

================================================
FILE: Tooltips/Cobp_serious-termite-83.html
================================================
<!-- From Uiverse.io by Cobp  - Tags: tooltip, dark, hover effect, html, tailwind -->
<div class="bg-zinc-800 rounded-md">
  <div
    class="flex items-center justify-center p-2 cursor-pointer rounded-md text-neutral-500 hover:text-neutral-100 hover:bg-neutral-500 font-medium relative z-[9999999999] data-[tooltip]:after:content-[attr(data-tooltip)] data-[tooltip]:after:mt-2 data-[tooltip]:after:text-sm data-[tooltip]:after:invisible data-[tooltip]:after:scale-50 data-[tooltip]:after:origin-top data-[tooltip]:after:opacity-0 hover:data-[tooltip]:after:visible hover:data-[tooltip]:after:opacity-100 hover:data-[tooltip]:after:scale-100 data-[tooltip]:after:transition-all data-[tooltip]:after:absolute data-[tooltip]:after:bg-white data-[tooltip]:after:top-[calc(100%+4px)] data-[tooltip]:after:left-1/2 data-[tooltip]:after:-translate-x-1/2 data-[tooltip]:after:-z-[1] data-[tooltip]:after:px-2.5 data-[tooltip]:after:py-1 data-[tooltip]:after:min-h-fit data-[tooltip]:after:min-w-fit data-[tooltip]:after:rounded-md data-[tooltip]:after:drop-shadow data-[tooltip]:before:mt-2 data-[tooltip]:before:drop-shadow data-[tooltip]:after:text-center data-[tooltip]:after:text-zinc-800 data-[tooltip]:after:whitespace-nowrap data-[tooltip]:after:text-[10px] data-[tooltip]:before:invisible data-[tooltip]:before:opacity-0 hover:data-[tooltip]:before:visible hover:data-[tooltip]:before:opacity-100 data-[tooltip]:before:transition-all data-[tooltip]:before:bg-white data-[tooltip]:before:[clip-path:polygon(50%_0,0_100%,100%_100%)] data-[tooltip]:before:absolute data-[tooltip]:before:top-full data-[tooltip]:before:left-1/2 data-[tooltip]:before:-translate-x-1/2 data-[tooltip]:before:z-0 data-[tooltip]:before:w-3 data-[tooltip]:before:h-[4px]"
    data-tooltip="HTML"
  >
    <svg
      role="img"
      viewBox="0 0 24 24"
      class="w-6 h-6 fill-current stroke-current stroke-0"
    >
      <path
        d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z"
      ></path>
    </svg>
  </div>
</div>


    

================================================
FILE: Tooltips/Dyls00_afraid-newt-19.html
================================================
<div class="tooltip-container">
  <span class="tooltip">Uiverse.io</span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by Dyls00  - Tags: tooltip, smooth, cube, colorful, custom */
/* This is an example, feel free to delete this code */
.tooltip-container {
  --background: #ee6d22;
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 15px;
  font-size: 25px;
  padding: 0.7em 1.8em;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  border-radius: 15px;
  font-size: 50px;
  margin-top: 90%;
  background: black;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: 1.8em;
  left: 50%;
  transform: translate(-50%) rotate(180deg);
  background: var(--background);
}

.tooltip-container:hover .tooltip {
  top: -100%;
  opacity: 1;
  color: white;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

================================================
FILE: Tooltips/EcheverriaJesus_hot-fish-35.html
================================================
<!-- From Uiverse.io by EcheverriaJesus  - Tags: tooltip, icon, animation, hover, github, tailwind -->
<section class="flex justify-center items-center">
  <button
    class="group flex justify-center p-2 rounded-md drop-shadow-xl bg-gradient-to-r from-gray-800 to-black text-white font-semibold hover:translate-y-3 hover:rounded-[50%] transition-all duration-500 hover:from-[#331029] hover:to-[#310413]"
    href="/"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 15 15"
      class="w-5"
    >
      <path
        clip-rule="evenodd"
        fill-rule="evenodd"
        fill="currentColor"
        d="M7.49933 0.25C3.49635 0.25 0.25 3.49593 0.25 7.50024C0.25 10.703 2.32715 13.4206 5.2081 14.3797C5.57084 14.446 5.70302 14.2222 5.70302 14.0299C5.70302 13.8576 5.69679 13.4019 5.69323 12.797C3.67661 13.235 3.25112 11.825 3.25112 11.825C2.92132 10.9874 2.44599 10.7644 2.44599 10.7644C1.78773 10.3149 2.49584 10.3238 2.49584 10.3238C3.22353 10.375 3.60629 11.0711 3.60629 11.0711C4.25298 12.1788 5.30335 11.8588 5.71638 11.6732C5.78225 11.205 5.96962 10.8854 6.17658 10.7043C4.56675 10.5209 2.87415 9.89918 2.87415 7.12104C2.87415 6.32925 3.15677 5.68257 3.62053 5.17563C3.54576 4.99226 3.29697 4.25521 3.69174 3.25691C3.69174 3.25691 4.30015 3.06196 5.68522 3.99973C6.26337 3.83906 6.8838 3.75895 7.50022 3.75583C8.1162 3.75895 8.73619 3.83906 9.31523 3.99973C10.6994 3.06196 11.3069 3.25691 11.3069 3.25691C11.7026 4.25521 11.4538 4.99226 11.3795 5.17563C11.8441 5.68257 12.1245 6.32925 12.1245 7.12104C12.1245 9.9063 10.4292 10.5192 8.81452 10.6985C9.07444 10.9224 9.30633 11.3648 9.30633 12.0413C9.30633 13.0102 9.29742 13.7922 9.29742 14.0299C9.29742 14.2239 9.42828 14.4496 9.79591 14.3788C12.6746 13.4179 14.75 10.7025 14.75 7.50024C14.75 3.49593 11.5036 0.25 7.49933 0.25Z"
      ></path>
    </svg>
    <span
      class="absolute opacity-0 group-hover:opacity-100 group-hover:text-gray-700 group-hover:text-sm group-hover:-translate-y-10 duration-700"
    >
      GitHub
    </span>
  </button>
</section>


    

================================================
FILE: Tooltips/EcheverriaJesus_odd-seahorse-52.html
================================================
<!-- From Uiverse.io by EcheverriaJesus  - Tags: simple, tooltip, hover, tailwind, cool -->
<section class="relative flex justify-center items-center">
  <div
    class="group flex justify-center transition-all rounded-full bg-gray-200 p-1"
  >
    <svg viewBox="0 0 320 512" class="w-4 h-4">
      <path
        d="M80 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74V320c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"
      ></path>
    </svg>
    <span
      class="absolute opacity-0 group-hover:opacity-100 group-hover:-translate-y-7 duration-700 text-sm"
      >Information</span
    >
  </div>
</section>


    

================================================
FILE: Tooltips/G4b413l_dry-turtle-84.html
================================================
<div class="tooltip">
  Hover me
  <div class="tooltiptext">Hi there !</div>
</div>

<style>
/* From Uiverse.io by G4b413l  - Tags: tooltip, button, button hover effect  */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background-color: #282828;
  color: #f1f1f1;
  padding: 1em 3em;
  border-radius: 1em;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #28282817;
  color: #282828;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border-width: 8px;
  border-style: solid;
  border-color: #28282817 transparent transparent transparent;
  transform: translateX(-50%);
}

</style>
    

================================================
FILE: Tooltips/Invacui_smart-kangaroo-41.html
================================================
<div class="Social-Btn">
  <span class="svgContainer">
    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1 .9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2 .6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6 .4 19.5 .6 29.5 .6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8 .9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z"
      ></path>
    </svg>
  </span>
  <span class="BG">Help?</span>
</div>

<style>
/* From Uiverse.io by Invacui  - Tags: glassmorphism, tooltip, hover */
.Social-Btn {
  width: 4.5em;
  height: 2.5em;
  align-items: baseline;
  justify-content: center;
  border: none;

  /* overflow: hidden; */
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
  fill: white !important;
  position: relative;
}

.svgContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(0px);
  letter-spacing: 0.8px;
  border-radius: 10px;
  transition: all 0.3s;
  border: 1px solid rgba(156, 156, 156, 0.466);
  color: white;
  background: rgba(83, 69, 69, 0.562);
}

.svgContainer > svg {
  width: 1.5rem;
}

.BG {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 10px;
  pointer-events: none;
  transition: all 2s;

  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  color: transparent;
  filter: blur(4px);
  z-index: 4;
}
.BG::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: white;
  opacity: -1;
  z-index: -10;
  transition: 5s all;
}
.Social-Btn:hover .BG::before {
  opacity: 1;
}
.Social-Btn:hover .BG {
  transform: translateY(-130%);
  transform-origin: bottom;
  background: white;
  color: black;
  filter: blur(0px);
}

.Social-Btn:hover .svgContainer {
  z-index: 20;
  background-color: rgba(156, 156, 156, 0.466);
  filter: blur(0px);
  fill: black;
}

</style>
    

================================================
FILE: Tooltips/Javierrocadev_rude-seahorse-6.html
================================================
<div class="tooltip-container">
  <div class="tooltip">
    LET'S CREATE!
    <span class="tooltip-item">1 - Explore</span>
    <span class="tooltip-item">2 - Have fun!</span>
  </div>
  <button class="btn">uiverse</button>
</div>

<style>
/* From Uiverse.io by Javierrocadev  - Tags: tooltip, gradient, dark, hover effect, hover button */
.tooltip-container {
  --background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
  position: relative;
  color: aliceblue;

  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  border-radius: 16px;
}

.tooltip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100px;
  height: 120px;
  z-index: -1;
  top: 0;
  left: 50%;
  background-color: #212121;
  color: antiquewhite;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-weight: bold;
  font-size: 12px;
  overflow: hidden;
}

.tooltip-item {
  z-index: 5;
  background-color: #171717;
  border-radius: 4px;
  padding: 4px;
  font-weight: bolder;
  font-size: 6px;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.5em;
  width: 0.5em;
  top: 0.8em;
  left: 85%;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--background);
  animation: tooltipBeforeAnimation 4s infinite alternate;
}

.tooltip::after {
  position: absolute;
  content: "";
  height: 3.6em;
  width: 3.6em;
  bottom: -0.8em;
  border-radius: 999px;
  filter: blur(8px);
  right: -5%;
  background: var(--background);
  animation: tooltipAnimation 5s infinite alternate;
}

.btn {
  background: var(--background);
  border: none;
  color: aliceblue;
  cursor: pointer;
  background-size: 100%;
  transition: all 0.2s;
  font-size: 12px;
  padding: 0.7em 1.8em;
  border-radius: 16px;
  font-weight: 700;
}
.btn:hover {
  background-size: 150%;
  background-position-x: right;
}

@keyframes tooltipAnimation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.8);
  }
}
@keyframes tooltipBeforeAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.tooltip-container:hover .tooltip {
  transform: scale(2);
}

.tooltip-container:hover .tooltip {
  top: -210%;
  left: 43%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

================================================
FILE: Tooltips/JhaveLang_strange-wasp-98.html
================================================
<div class="tooltip-container">
  <span class="tooltip">Uiverse.io</span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by JhaveLang  - Tags: simple, tooltip, animation */
/* This is an example, feel free to delete this code */
.tooltip-container {
  --background: linear-gradient(45deg, #22d3ee, #1f9df5);
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #fff;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  transform-origin: bottom;
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background: var(--background);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: var(--background);
}

.tooltip-container:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}
.tooltip-container:hover {
  transform: scale(0.9);
}

</style>
    

================================================
FILE: Tooltips/Lakshay-art_sour-dragon-56.html
================================================
<div class="tooltip-container">
  <div class="tooltip">
    <div class="text">Save Trees</div>

    <div class="leaf leaf1"></div>
    <div class="leaf leaf2"></div>
    <div class="leaf leaf3"></div>
    <div class="leaf leaf4"></div>
  </div>
  <div class="leaf icon"></div>
</div>

<style>
/* From Uiverse.io by Lakshay-art  - Tags: simple, tooltip, animation, green, shadow, realistic, creative, savetrees */
/* This is an example, feel free to delete this code */
.tooltip-container {
  /* --background: #22d3ee; */
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  margin-bottom: -100px;
}

.bg {
  position: absolute;
  left: -30px;
  top: 0px;
  z-index: -2;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  width: 180px;
  height: 100px;
  transform: translateX(-50%);
  padding: 0.5em 1em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCACOARwDAREAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAQFBgEDBwL/xAAYAQEBAQEBAAAAAAAAAAAAAAAAAgEDBP/aAAwDAQACEAMQAAAAonLzyEprcbIg6MSq8ntm40pixTNySW5LHpQABmBsbqNelTAAANCGRAiCugXdFnnWZaNyVJ0rZf2rkOyEI08Hjdye8xgtKruS4GzdYPbcBk6xIVPAFbZRiOYGDIyLEoRhgBJmxWunsmBqVhbgitV4TzGS04BTdny/VsmRE4qTbdokzlJVk7C2KshIldOeptJ0RSZBESVtnR1T9Jo9FWllkyYwFX3OXCWmCyZs0VZlrLg3JCNhipojy1nRh1WChlPLkWwAE8RVVUsjsytrAFBXk18miIK8mILWrntF5lol8RJ1PSJV2wJ6zOolq2gwcrGS9io4RpCjWL/2qm5kdznobQFAJwcQJIvBJG49UqhzwgMnebsBubfOi45qPNM6ClkOXwCrGskSaPZgepzsr+MY0FzLkc2J3W+V82vIslkhiDJei1K9O12Z7z1tihio81WTKy5ynqKtoGDBkBk9CknOiyXXvURznnBXZXsut0jKlZMwNEES6rEMUzTYzjczO7nT66Zsc1fmeeyqqenqaNJz9NnLOtgdI0TYDJZuzxNI826sb6NjVObF4kLEpzYa50e9KQzj10cI5c7ErqnR5xRebnJ08hhAZOcpBlt1LkoPLNYEhSxVSHM70xjoJ0DcAFebDW+gFebXh3oj4c3TQonGGtropKAAHFk6jJgyPG6cxVdWbtJQZHapnsMAAAvzah3oMLyWk/0IycpU+MrktSOlgAwHIdmPJoQFTySzev1UlWJcy46SlU/2ZwABEczQDvQY8SjuZzowQso6ZCf6IyScgMFuWTMJK50qJdm+y3t9DWlQw2S+1I9gAAQ3NC85xoPYGDYbBUMBN9WiUXApubO2UnKrJg1D7QGBnWSUs8a4qU7AAAxKsc58YwaSX6NHNHGAM4f6EsZlrxJ0numrFY5ZgD0bTQGPdJzpskerK8ysbJ9HqgDQGaJQ3GYws17H0jueaZFADcWPorfNqJWmKRkDGDNNw6MmnG6kv00DS/MlGv8ARuoA0BmuSPM90eNxeUDOaJAABJU1C0m6ISyZNxs1uHLbzTzeqSfWgDXKO5G+hqwDQGapJckj3GAzk1/maprE4JGDcedeCY2pWlP5z6DAGsjZJ0letABKK5N/Q9YBoDNUkuaStGSjxPJ1AB6xgwAYsHR62lcf/8QAQxAAAgECAgYGBwUGBQUBAAAAAQIDAAQFERASITFBUQYTICIycRQjUmGBkaEkM0Ji0RVDU4KxwURykqLhNDVUc/Bj/9oACAEBAAE/AVcq2pJsI51G0iSB4iQw3EVd4pLd2ywOigg948/0psBufRUmTJyVzKcRVvd3Ni+SkjLxI1WN9HfRZrsceJdIQmhGONSXFvDskljT3Mwp8asE/fZ+Smj0hsh/FP8ALQx+yPtj+Wo8VsZfDcp/NspWDAFSCDx59vUOVEa2w00DAZjb29wzO6psVs4Nhk1zyTbUnSH+FB8Wb+1ft++VtdCieS1a9LLRoB6Trxy8QqZisbis5pc1+/8AxEbvjWyNAq79FpiNzZ7I37nsHdUuJWN+mV3CYpeEibcqtLlrS5WVeG8cxQx/Dub63LV21J0kgH3Vu589lS9Ibt/AqR/U1NiF3P47h8uQOVZ1rAca6xeda6n8Vb6imlgbWikZDzBq26Q3EeydRKvyNWmJ2t5sjkyf2G2HSqZ79lBQOw0avvFNbn8Jzoqy7xpvMYht+5F6yT6Cri+uLo+skOr7I3dlpOWhcOumtxMsRKH51lkciNulu5MG4V1y++uv5LSdfOcoo2c8kXOosCxSf/DOoPtkLVlgD3M0sM0whmjPg1cyffQ6Jxcbp/8ATlT9E0Pgu2+KZ1L0Wu0+5mjf/aansr6y++gcLz3j50sw47KB5GrPHbm3Gq/r0HM7fnVxj13N93lEvu21HjOIR+G5b4gGrfpPMv8A1EKuvNdhqzv7a+TOCQE8VOwjRcYnZ2pIluEBHAbf6UmN4c51fScv8wIqOWOZNaN1deanPRcNBDGZJiEUcTWJYubgmO21kh5ne2hI3lcJGpZjwFW3R64k++YRD5mosAsk8evJ5t+lLhVioyFsn9au5cJtZzEbZWI9mgCxAG0nlVlg00rq841I/ZO80Ng2bBU1rBcfexK3v40+BWzbUZ1+OdXOCLBA8vpOxRn3l/vVpZrfXcUDSamufFvqHopYJ42ml+P6VDg+HQeC0i82Gt/WgoUZAAD3aMVsZHK3tpsuYv8AeOVWGIxXqZZ6kw8UZ39i+wGzvO8F6mU/iTZ9KvsNusMfv7UPhcbjSzBtjVvqyxNYU6i6t0ng4ZjvL5UcJsL9C+G3Gq38Jv8A7OpYLvDLlddWikB7rDj8aixe5xTqrFNWGR/HKOWXCrPCbSyGxNd+LuMzU2EWM/itkB5p3f6UejnVP1lndyxPS9Ibq0MkFwiTOhK6+ertFXd7PfSa8z58hwHlosMDmucnm9VH9TVtawWqasMYXmeJ0EgDNjkKxPHPFDaeRk/SorK8uF6yKF3UnfzrDJ7LrOrtbeXW4uwGz459i5uorWPXlbLkKtsPuMbcT3WtDZjwpxasRg/ZeMsIxsRg6eW+opFmiSRD3XAI7N9g9teMZNsU3tpRhxmw8D+lRD5/rVliMV2jaw6qRPvEc5atXePww92BetPtblpukV2dyQr8P+aHpWLXahmMjHidyirvovA8f2Z+rcD4Grqxu8Ob1yELwYeE/GlmB37PfSsQQykgjcRwpsVu3t2glcSxn21zy+NI7IwZWIKnMGrXpHbG1+05rMN4Vc9ap+lH/j23xf8AQVcY3f3GYM+oOUeyuOfGkRpZFRBmzHIedYdg0drlJN6yX6LpJyBPAVi2LNduYYjqwA/6qw7B9fKa5GXKP9aACqANg4AbKtraK1i1Il2c+JrdU1/awZ68y58htNHErm77ljbn/wBjjdVvhYD9fdv183v3Cra5TUWNjkffXSqx6yJL1BtTuv5c66PYmup6FMcsvuyePu7WeqCScgKxa6S8xF5YvBsUHn76wXCkxHXeZ21E2ZLvNLgGHr+6ZvNzSWsNqNWGMIp5aAgkzDAFeINX3ReyuczD6h/y7vl+lXeBYhY7dTrU9qPb9KE4/EKEiHjW8aIopJ3CRIztyUZmrDotPLk943VJ7A2t/wAVfYJA+GdTaRBJE7yH83vNYdfC8h73dnTY6neNOP3pihW2TxSeLyrBrAP9qkHdHgH99P7KnHgxGYDkc/1r9il/vryR/wD7zqHCLSHbqa7Di9ABRkAAOWmKbJTFKNaJhkQaxTo9LCxmsl663PAeJaW7xGLuCa4XhkWNa2Izfiu3/wBRrrLu1cHWmibhnmKw7pJl6u92/wD6Df8AEU2K2Cx6/pcRHINmflWKY29/nFF3IOXFqwXBNX7Vdp3vwR/rX/Y8WL/4K43/AJWoEEAg5jnzphmKVCaAyq+xW3se63flO6Nd9LBiuJ964l9EgP7tdjGocAw0DU9GV+bNvqfophTcJov8j/rWJdGltbPr7N3fU8SNt2fCsH9B9PC36ayNsUncp99Q28NuurDEka8lXLTieDekS+l2j9Td/R/Ov2vc2TdXiNoyt7S8aixqxk/fap5MMqnkOJYoSufrH1V8qjRYo1jQZKoyHbjiL791TqF1chognaJua8RSOJF1lOzRNEkitHKgZDwI2ViHRxs9ey3fw24eRpcExFjl6Pq+8sBWGYDFaESz5SzDdyWlQtVxBHcwtFKuanfX2/BMxqm5svqtQY9YTD73q25OKfGLBF1jdJ8NtS4rc4g5gwyI++ZuFWGERWfrH9dcHaZG/toiHezqbxCotqZVj+D+gz9fCv2d/wDaeVYBjoyWzu22jZG5/oexfSCQ9VkCo31jSWyWw7iiZj3SBlViZYJBdrCXjjPeqCeO5jDxNmNDTRIcmlQH3tUeO3K+NEf6VaY3Yyff60TfMfShKJ19RkU5jjSQAeL5aLg5uBy0wzNC2Y3cqR1kUMp2VKua56ETW8q1F5aHj25ikiOebVPhFhcktLaoSeI2H6VHgOFxnNbRfiSf600aRKqRoqLyUZCo11jWovLRNvFQ8angjuYXilXWRxkRWLYTLhk/tQMe4/8AY++sH6SdQqwXnej/AAycR+tQ3ENymvDIsi81NXM3VRbPEd1Xd/DaqTI+bncg3mi0+KXoz8TfJRUECW8CxJ4VFXGFKXMlrIbeQ+zuNeg4o/de8AT3MaXA7fL1ju78Tu0wXM1s+vDKyH8pq06TOvduotf8yb/lUWK2tyvqJAW5E5GjmTmdDyJGus7BR76R1kQOjBgdxFW8xhf8p305BiJB2EaIvD8e3NwqHedM3CovFodEnDwzKHjbgaxHoq6kvYnXX+E2/wCdSRXFlJk6SQuOeyjdXB2GeU+bmrfD7q6PdjOqfxtsH/NWNhHZR5L3nPibsyp1Urx556rEaCMt+lL66j8M7/OjiV4wyNw9W0E2IXIUszcWZtuQqONYo1jQZKoyGi3mJQxfLRDuPbl8PxqHefLTKO5UZykFHYtJtkFO4jQs24VK5lck8aEaDcqj4VKgWziOW0nf2r7Zf3H/ALG0XUP2K1uBuYarfCraA3M3VKQHIOWfE8qIIbVIyI2EctFph895tVco+LndVnZ2NvAIkzRuJO816DntSTMcKlgaIbWU+RpWKsCKNx7K1bk8eI7S3ZRikw3cRTSxundcVDvOlhmpFDeKlPd86iXIEmrqbrH1V8I0mMz2cYXeNtXEXUlRx1dvYzrFYJI76VijBGOw5aETrujZHGMk/X9CaikMUqSDepzrFMNa4Zbm2XNmy1hz99WWCKmT3Peb2BuFABRkoyA5aGuZCMgdVeQrfv0Qx5nWO4VH4x2r2LdIPjpzrWbma1m5mtY8z86MkmzNmr0iXV1dfZ2LKXYYz5ir45zAchpSNpDkozpLSNVybaalMdvF1YVWc786fD7R99unwGVRW8UEXVRpkh4b6SytY/DBH55Z9oDM5AbahsydsmwcqkUK2zdQ3jtEZjI1cQmF/wAp3VHFrbTsWpHU91QMudAFjkBmajstmcp+AqSaNO7Cg/zUSScydIORzrqxOuvH4vxLQJR89zCncyOWO86IVgVNeUgngKXLU2DIU11EjZFq46QMzlnlTRMvvHu0jIEZjMcqt1jl/cavnSqq+FQPLRMNx0A5qO1KoaM5ipw2oNXdxrLaBVvAIU2+LjU0jXEnUx55VKqq5VduXHsxyGJwwrVjuUDEb+NSLqSMvI6LSEH1r+EVcXZfupsXn2MieFCKQ7o2+VRx3C7Cnd99Mg/EtdRHyqONFcZDsS+DRGe4O1J4DS+IVqJra2qM6lVmiKocjUcJhgOrtfKmikXxIe1aS6j6h8LVdD7S1Imu4Ucanl1vVx+BfrpByOf9a65uGqP5RXpUw/F9BQvZRvCn4Ul8n41Ip5EkUarZ6F8Q7DDNToh3EdqTwGk8Y8+y9o3WHvKF86Ftbhci4J561G0iPgkp7SVNuxh7qy0SSGQgnllSPqBuZGVbzkKhstmcvypYkUZBRSnXUHmM+zuqOc56rbaHDtQ+LtSfdmk8Y89E14Ijq6uZqS7m5geVGV23ux+PYDEcTWeZ29i1hVEEh3t9KkvVT8JNftD8lf/EACgQAQACAQMEAgMAAwEBAAAAAAEAESExQVFhcYGhEJEgscHR8PHhMP/aAAgBAQABPxBcSqmlI8MdYdoqEBAjqtDuhVT2nt42fUR3NhIPNjpPeax1OSd6gXoX2mzV3gi0rxVTJuC6J8F3HvWybT2AftmvpOq/tVxirnFv3qaHZg2djPvz+NW1vELV4JojpL0043iI046P5KJQDKuKjDRf9Tp7uax2f4mfcr1uH+TbdRzO/wCfqJcAaNrZv3e0W0kFZ1lq3fWU60bN+HHiVOwoRoa7NXs3LbW1J7Jsz5VTpbRMT3mfpctDxz7Mepb3VrQfRRLcuescJNcXHRrDYHuwTQj5udWCoiJzZ/cw/Uoit/xd/Fz98JrNMRc1TiUyHn4ou6L+CNzkgbQHDhjmc8fG3HeOpGY/9t3oRy7wYvqTb4ca9t5T/p/7CtMndmra9Vmj3SnI5riKwAaiUzT4rvDWJGLdIqsAd4anmFC9DAxNxekW/UomaXWcMlk/lx/pmjzt/oky326ekma/2XpZ7uLwReojnqWO8wP0BUe0JI3GhsndIGHSntEZRmgn+9YykRl/eR/iZvRxNeoVzO4GDwX/ALqgQlt2UPkxGk5IH+spX/YnWgcHe4OkrXrrGA9gLXxvKd4//Mwfc0x1aD9JeYOor2wT1logkuAAu/qVj/L3OAINBQGKIemL1GHnWPvR4B7zKFh9KdNspS0oFNhdVyxW+8VPoCT6XWX3ZhQYKAUHwFh4JuqCAMRFBNaN/EvnXXMxsEaREKSk5JZbMUBeuhhPF9ZPRpyPRlJgduP/ACFZGesC6JA8nLeGlHVfWcPZHSySmuzcfcDYunDpwNFpupjOpil7cE18Gxa+dFwvb37Kh2fo1is4pl59dHB9G37mrWrwb/5hL37e2bd2UvCcncd5tFVRLVaA/kEFc7M6QxfDvbsSSkfvQL1ObNdfitt4nGNjKvAQfF7k2/F+K3QFOrmzMsWJfRJdy/lGjNMS8WRtQ876tfRYqpuQcm3a4st03RPfKw9O0NfdJoyEl1TjTtA6h4jl4tN8K+xFEXWnRMrNFo9jtAYhQEuo1X5gPiAdE/sNKJrzgVjPDNc7DwCQXT+0z4uKrS9V5lAwSWrTQXD6329o3es7/AIIBa8HLEU+Wru9OnEUthp0l/g6TFHlIoHaDqg1VKcrvFBagcsPFdq1HcLT6jDwrSP4/faBU6gu+1pp9QtQ8DoTvFv8zuWzsHWDNm7xwXamdefc3rTv+CcqJW6o3zBmAbHUx/gSmw5aBHOrtU17rf5WMz5muXzrPBL50UGx7kRv+f5/5iNpYvHrrqPqpWCjqaTRD2l9Q2hz/ItWafcA2jpuvhToukIWfX1R5G5QDwOQwtazxXwxKZlpjoeZWDUrmd6dGOvw4217Hsg89z/qiZ1QX609Q6caAoJbrvzL29QRBjMUOsWxoc8VbclPUGfURNh6vozL21213vf9iVNOAPCFz6pT+lbChL67PldiDQbqQ0HcOq7ES3EpFtc1AKIWDTyh1bkQzgIRoz/YRc67Wna+PMqF6O0HDvp1gdbRKomndIj+rEJ/Kiq7lDTcjo2siidGjkfTNxuUrdcazrvzvEHaJew30qhP00r9RafDA9nvvC6r6jUUDkA0NdpSIAOD8O+nEC9LfGnwxYo78x/CsfihXbqbdoMY9GpMIm0vSbd5eIZ5tame8x4Yfb5CD7c+4j7FjV4aqpQ68/7vBfHobjsnCQvHz9fi6mTtt6eyz3EzPRr+guCnmh6B0vT2xsZQ5RF1ym92X0iutRMEA0XSUsZBcM0qP4fL2O0fXavoyRofrn4D3OGCksWXIeFs1zdbVKnlkGllZ8N+SHFf7OiQ8/WYj4uK/wBzGBmqZfZj1DVYa5fsi/sgzPaMJ5SkXdbIAABRxAsNGfkat2yt5nYPU6xNYYbMPTER4xuqBmA9WABQARdyO0oQqtma1GhW80Z9Lv8A6TDo3QoeCCquDWAOD9QAKADpBm6R6YBRxHHTrdMy4f8AYTSkV+6Z29FNkMvuza7wGaaI/sPgZUC3U2OsJtRQez068wlnAzqrqvVmRrSXPAaRb1+uJ4C/uGO9Lf0v55Ou0X0eSV5D2+90MzgxpA8OXwV1jVYq5aqZvf6jIf3YQdTNix8zkGkZYgsDzN2a8bfkMOPDyfIw9sx0zkhWsswiJWQP+orROiwkOurFF9xxfclmEdv8iC69SjadH+CWW3Ka9Dp86aY7fCqWXPNNfFrBGh8bMrZltjbZowkDhoLT3HnoD9Qnxdg8pzKGAB0PhCd4uKy4z+ZaP4EufRlh6xCLsS7DvNKY33YD96KdjiI2pyAlIXEZyKS/xHkH2r8c3VjZSD9Et1QOgC/tTFSlWDK6y9ekYFE7EduWPx1nU3enSIKFNSY+4SbraGokQ6BLeY8Mbsx+KKNNOhLmCqq9pFdvNhpKrmlY+ewFx0zySqpuikkXJ0ilqDXV3+VACjLoVNEyho3bf4Ycy4wF6DZzpHGv+JvQB8WYFBadzojLoN2OWn8Mvqax7Dl7QwAlBhR4g1Rtxz0gApFGGKq1by5no3ZVBXujpncr8rQbZg9NpXZfg3D7n/Sn/SleC7aHUwtMsXaS8aH71/AtyLt35IAVOF+7nebbQ+vk8eYTV3WUnHmBPM9vP4aj0DlWtr11mdM8ivtzHP1X4aRAQrQNY+X6pue8IACgAR03Wa/iC6CVFFamcS+MzfMDpjwywyhNAgGF30K7sYo63Fvi4qQr8oQqxEuLFIc/1IGyTfaJHesmnwCaerXfvDUnRdVVR5mkVUuXd+augO7H7TgY01w8Pw0urLL8wJa03yHywWgeBUr4DQO8uHIfjtCgk1zFgLtgSyAytA6suFFlp2jwUdXnrEbphwU1/Fo8jnqStFBo1HiCA3gHp8LoBlL0Uid/JufhPg0Ce0p7F73hoh6mSKP2ks/9sqRMygKorj4Yb6x+Luhh/Ne8RYKno1D0Juw1A6VHeLNHlDH5Z1pK7MYXmn1/mM2y6vjlggxFRW6fr4oQDW0Vt+L/AIIaAn+3E0od7yiKEeTSVtdnwqTr+FT+F7H5rR/Lp/I5EXaIe2VFGCc0RFJe4eLplwAG7/kUNIj1xDDcNsECTepYAzR0uAgFq0BrLAycH+sC0Z0lA43EULaxx8V8C5CjAgIdq7fO0o9MSmuIqZyTb/4Dqmdla0RVlHp/zD76Qwy/jQy7MXalXd/DMJiE2Qtsx2J0e8//xAAeEQACAgMBAQEBAAAAAAAAAAAAAQIREBIgMEBQYP/aAAgBAgEBPwD8JF/iX/GsjAaF8d4r1iyS+RIURofrsUUV6xGOInWEMfqhMor1iMTscRCw/dCZLEYmoyjU1NSUSMTXEiOGhOhMk/gTJYiy8VmyTIsvEiOE7HEbE/euIdyRFFCRJEcRG8sXohoeYdKQ2RZYmSZHCJPKJZXlZYkNEOpc11REnlRK8aKEhoj3LKEuUJcLF5ssssZE1NREhC5RLFCXgkSWEN8ampqajI8SELlEhCRXgpDeb4s2NjYZHh4jyiREiy8N4ortRK7ZHh4jyiQhPN4svlCxZ//EABsRAAIDAAMAAAAAAAAAAAAAAAABERJQAmCA/9oACAEDAQE/AMJci+HHf4y2LDQxMWHUksWwoII8T//Z");
  border-radius: 30px;
  background-size: cover;
  box-shadow: inset 0px 8px 9px #182218, 5px 8px 0px #314328;
  filter: drop-shadow(60px 60px 6px #18221888);
  border: 10px solid #3f5641ee;
  z-index: -1;
  animation: float 2s infinite;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  bottom: -22px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: #e9f6f4;
  border: 10px solid #3f5641ee;
  border-left: none;
  border-top: none;
  border-radius: 5px;
  box-shadow: 10px 4px 0px #314328;
}

.tooltip-container:hover .tooltip {
  top: -120px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.leaf1 {
  top: -30px;
  left: -60px;
}
.leaf2 {
  top: -30px;
  left: -60px;
}
.leaf3 {
  top: -30px;
  left: -60px;
}
.leaf4 {
  top: -30px;
  left: -60px;
}
.tooltip-container:hover .leaf1 {
  rotate: z 20deg;
}
/* .tooltip-container:hover .leaf2{
rotate: z 20deg;
} */
.tooltip-container:hover .leaf3 {
  rotate: z -20deg;
}
.tooltip-container:hover .leaf4 {
  rotate: z 40deg;
}

.leaf {
  width: 60px;
  height: 40px;
  position: absolute;
  transform-origin: 100% 100%;
  transition: rotate 0.5s 0.2s linear;
  /* border: px solid #314328; */
  border-radius: 0 100%;
  background-image: linear-gradient(to right, #b4c7b3, #314328);
}
.icon {
  /* box-shadow: 60px 60px 6px #18221888,120px 60px 6px #18221888; */
  transform: translateX(-50%);
  filter: drop-shadow(60px 60px 6px #18221888);
}
.text {
  z-index: 2;
  font-size: 22px;
  color: #3f5641;
  font-weight: bolder;
  margin: auto;
  width: fit-content;
  padding-top: 25px;
  filter: drop-shadow(0px 0px 3px #fff);
}
@keyframes float {
  0% {
    top: -120px;
  }
  50% {
    top: -125px;
  }
  100% {
    top: -120px;
  }
}

</style>
    

================================================
FILE: Tooltips/MRez321_nice-stingray-21.html
================================================
<div class="tooltip-container">
  <span class="tooltip">Hey There!</span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by MRez321  - Tags: tooltip, hover, transition */
.tooltip-container {
  --background: #7579e7;
  background: var(--background);
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  border-radius: 10px;
  width: 8em;

  display: flex;
  justify-content: center;
  align-items: center;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 30%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background: var(--background);
  border-radius: 5px;
  width: 7em;
  text-align: center;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: var(--background);
}

.tooltip-container:hover .tooltip {
  top: -100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: shake 500ms ease-in-out forwards;
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.text {
  position: relative;
  padding: 0.7em 1.8em;
  overflow: hidden;
}

.text::before {
  content: "(^_^)/";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: inherit;
  background-color: var(--background);
  transition: 0.3s;
}

.tooltip-container:hover .text::before {
  top: 0;
}

</style>
    

================================================
FILE: Tooltips/MohamedAboSeada_bitter-skunk-14.html
================================================
<div class="tooltip-container">
  <div class="tooltip">
    <p>This is a test</p>
    <button>Got It</button>
    <div class="line"></div>
  </div>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by MohamedAboSeada  - Tags: simple, tooltip, animation, minimalist, hover, rounded, cube, modern */
.tooltip-container {
  position: relative;
  height: 50px;
  display: flex;
  background-color: darkgray;
  border-radius: 5px;
  box-shadow: 0 3px 0 rgb(0 0 0 / 80%);
  width: 200px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.tooltip {
  position: absolute;
  top: -110px;
  left: 50%;
  opacity: 0;
  transition: 300ms ease;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  display: flex;
  gap: 10px 0;
  cursor: auto;
  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
  font-style: oblique;
  flex-direction: column;
  padding: 10px;
  width: 200px;
  animation: opacity;
  transform: translateX(-50%);
}
.tooltip button {
  outline: none;
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  width: 70px;
  height: 30px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 1rem;
  align-self: flex-end;
  cursor: pointer;
}
.line {
  position: absolute;
  width: 3px;
  height: 25px;
  background-color: #000;
  top: 100%;
  left: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translateX(-50%);
}
.line::before {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
}
.tooltip-container:hover > .tooltip {
  opacity: 1;
}
.tooltip-container:hover > .tooltip > .line {
  animation: HeightUP 400ms ease;
}
@keyframes HeightUP {
  0% {
    height: 0;
  }
  100% {
    height: 25px;
  }
}
@keyframes opcaityUp {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

</style>
    

================================================
FILE: Tooltips/Mohammad-Rahme-576_hard-starfish-64.html
================================================
<div class="tooltip-container">
  <div class="button-content">
    <span class="text">Share</span>
    <svg
      class="share-icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="24"
      height="24"
    >
      <path
        d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"
      ></path>
    </svg>
  </div>
  <div class="tooltip-content">
    <div class="social-icons">
      <a href="#" class="social-icon twitter">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path
            d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
          ></path>
        </svg>
      </a>
      <a href="#" class="social-icon facebook">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path
            d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
          ></path>
        </svg>
      </a>
      <a href="#" class="social-icon linkedin">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path
            d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
          ></path>
        </svg>
      </a>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Mohammad-Rahme-576  - Tags: tooltip */
/* Container Styles */
.tooltip-container {
  position: relative;
  display: inline-block;
  font-family: "Arial", sans-serif;
  overflow: visible;
}

/* Button Styles */
.button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  color: white;
  padding: 14px 28px;
  border-radius: 50px;
  cursor: pointer;
  transition:
    background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.3s ease,
    box-shadow 0.4s ease;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.button-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(110, 142, 251, 0.4),
    rgba(167, 119, 227, 0.4)
  );
  filter: blur(15px);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

.button-content::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: scale(0);
  transition: transform 0.6s ease-out;
  z-index: -1;
}

.button-content:hover::before {
  opacity: 1;
}

.button-content:hover::after {
  transform: scale(1);
}

.button-content:hover {
  background: linear-gradient(135deg, #a777e3, #6e8efb);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px) scale(1.03);
}

.button-content:active {
  transform: translateY(-2px) scale(0.98);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.text {
  font-size: 18px;
  font-weight: 600;
  margin-right: 12px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: letter-spacing 0.3s ease;
}

.button-content:hover .text {
  letter-spacing: 1px;
}

.share-icon {
  fill: white;
  transition:
    transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    fill 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.button-content:hover .share-icon {
  transform: rotate(180deg) scale(1.1);
  fill: #ffffff;
}

/* Tooltip Styles */
.tooltip-content {
  position: absolute;
  top: 102%;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  background: white;
  border-radius: 15px;
  padding: 22px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    visibility 0.5s ease;
  z-index: 100;
  pointer-events: none;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.9);
}

.tooltip-container:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

/* Social Icons Styles */
.social-icons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f0f0f0;
  transition:
    transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    background 0.3s ease,
    box-shadow 0.4s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.social-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.social-icon:hover::before {
  opacity: 1;
}

.social-icon svg {
  width: 24px;
  height: 24px;
  fill: #333;
  transition:
    transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    fill 0.3s ease;
  z-index: 1;
}

.social-icon:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.social-icon:active {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.social-icon:hover svg {
  transform: scale(1.2);
  fill: white;
}

.social-icon.twitter:hover {
  background: linear-gradient(135deg, #1da1f2, #1a91da);
}

.social-icon.facebook:hover {
  background: linear-gradient(135deg, #1877f2, #165ed0);
}

.social-icon.linkedin:hover {
  background: linear-gradient(135deg, #0077b5, #005e94);
}

/* Animation for Pulse Effect */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(110, 142, 251, 0.4);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(110, 142, 251, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(110, 142, 251, 0);
  }
}

.button-content {
  animation: pulse 3s infinite;
}

/* Hover Ripple Effect */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.button-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: inherit;
  transform: scale(0);
  opacity: 0;
}

.button-content:active::before {
  animation: ripple 0.6s linear;
}

/* Tooltip Arrow */
.tooltip-content::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent rgba(255, 255, 255, 0.9) transparent;
  filter: drop-shadow(0 -3px 3px rgba(0, 0, 0, 0.1));
}

/* Accessibility */
.button-content:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(110, 142, 251, 0.5),
    0 8px 15px rgba(0, 0, 0, 0.1);
}

.button-content:focus:not(:focus-visible) {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .button-content {
    padding: 12px 24px;
    border-radius: 40px;
  }

  .text {
    font-size: 16px;
  }

  .tooltip-content {
    width: 240px;
    padding: 18px;
  }

  .social-icon {
    width: 44px;
    height: 44px;
  }

  .social-icon svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .button-content {
    padding: 10px 20px;
  }

  .text {
    font-size: 14px;
  }

  .tooltip-content {
    width: 200px;
    padding: 15px;
  }

  .social-icon {
    width: 40px;
    height: 40px;
  }

  .social-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .tooltip-content {
    background: rgba(30, 30, 30, 0.9);
    color: white;
  }

  .tooltip-content::before {
    border-color: transparent transparent rgba(30, 30, 30, 0.9) transparent;
  }

  .social-icon {
    background: #2a2a2a;
  }

  .social-icon svg {
    fill: #e0e0e0;
  }
}

/* Print Styles */
@media print {
  .tooltip-container {
    display: none;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .button-content,
  .share-icon,
  .social-icon,
  .tooltip-content {
    transition: none;
  }

  .button-content {
    animation: none;
  }
}

/* Custom Scrollbar for Tooltip Content */
.tooltip-content::-webkit-scrollbar {
  width: 6px;
}

.tooltip-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.tooltip-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.tooltip-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

</style>
    

================================================
FILE: Tooltips/Pipo-13_ugly-swan-20.html
================================================
<div class="tooltip-container">
  <span class="tooltip">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="80"
      zoomAndPan="magnify"
      viewBox="0 0 60 44.999999"
      height="60"
      preserveAspectRatio="xMidYMid meet"
      version="1.0"
    >
      <defs>
        <clipPath id="e2947948d6">
          <path
            d="M 2.25 6.75 L 57.75 6.75 C 58.992188 6.75 60 7.757812 60 9 L 60 42.75 C 60 43.992188 58.992188 45 57.75 45 L 2.25 45 C 1.007812 45 0 43.992188 0 42.75 L 0 9 C 0 7.757812 1.007812 6.75 2.25 6.75 Z M 2.25 6.75"
            clip-rule="nonzero"
          ></path>
        </clipPath>
      </defs>
      <g clip-path="url(#e2947948d6)">
        <path
          fill="#ff914d"
          d="M 0 6.75 L 60.0625 6.75 L 60.0625 45 L 0 45 Z M 0 6.75"
          fill-opacity="1"
          fill-rule="nonzero"
        ></path>
        <text x="15" y="30" fill="white" style="font-size:12px">hello</text>
      </g>
      <path
        fill="#ff914d"
        d="M 38.988281 12.292969 C 38.988281 11.898438 38.820312 11.449219 38.496094 10.988281 L 31.664062 0.996094 C 31.226562 0.351562 30.625 0 29.992188 0 C 29.363281 0 28.757812 0.351562 28.324219 0.996094 L 21.488281 10.972656 C 21.167969 11.4375 21.011719 11.898438 21.011719 12.292969 C 21.011719 13.035156 21.613281 13.5 22.613281 13.5 L 37.386719 13.5 C 38.386719 13.5 38.988281 13.035156 38.988281 12.292969 Z M 38.988281 12.292969"
        fill-opacity="1"
        fill-rule="nonzero"
      ></path>
    </svg>
  </span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by Pipo-13  - Tags: simple, tooltip, svg */
.tooltip-container {
  --background: #d87639;
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  border-radius: 0.2rem;
}

.tooltip {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translateX(-50%) rotateX(90deg);
  padding: 0.6em;
  opacity: 0.6;
  transition: all 0.5s ease;
  background: transparent;
  height: 0px;
  cursor: default;
}

.tooltip-container:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  background: none;
  transform: translateX(-50%) rotateX(0deg);
}

</style>
    

================================================
FILE: Tooltips/PriyanshuGupta28_chilly-eagle-55.html
================================================
<ul class="example-2">
  <li class="icon-content">
    <a
      data-social="spotify"
      aria-label="Spotify"
      href="https://www.spotify.com/"
    >
      <div class="filled"></div>
      <svg viewBox="0 0 100 100" version="1.1">
        <path
          fill="currentColor"
          d="M50,4C24.7,4,4,24.7,4,50s20.6,46,46,46s46-20.6,46-46S75.4,4,50,4z M71.6,71.5c0,0,0,0.1-0.1,0.1c-0.8,1.2-2,1.8-3.2,1.8  c-0.7,0-1.4-0.2-2-0.6c-10.2-6.3-23.3-7.7-38.8-4.1c-2.1,0.6-4-0.9-4.5-2.7c-0.6-2.3,0.9-4.1,2.7-4.6c17.7-4,32.6-2.3,44.4,5  c0.9,0.4,1.5,1,1.8,1.9C72.2,69.3,72.1,70.5,71.6,71.5z M76.9,59.3L76.9,59.3c-0.8,1.1-1.9,1.9-3.2,2.1c-0.2,0-0.5,0.1-0.7,0.1  c-0.8,0-1.6-0.3-2.3-0.7c-12-7.3-30.1-9.4-43.9-5c-2.5,0.6-5-0.7-5.6-3c-0.6-2.5,0.7-4.9,3-5.5c16.5-5,37.2-2.5,51.4,6.2  c0.8,0.4,1.5,1.3,1.8,2.5C77.9,57,77.6,58.3,76.9,59.3z M83.2,45.6c-1,1.4-2.7,2.1-4.4,2.1c-0.9,0-1.9-0.2-2.7-0.7c0,0,0,0,0,0  c-13.9-8.3-37.8-9.3-51.4-5.1c-2.7,0.8-5.5-0.7-6.4-3.3c-0.8-2.7,0.7-5.6,3.3-6.4c16.2-4.8,43-3.8,59.8,6.2  C83.8,39.6,84.7,42.9,83.2,45.6C83.3,45.5,83.3,45.5,83.2,45.6z"
        ></path>
      </svg>
    </a>
    <div class="tooltip">Spotify</div>
  </li>
  <li class="icon-content">
    <a
      data-social="pinterest"
      aria-label="Pinterest"
      href="https://www.pinterest.com/"
    >
      <div class="filled"></div>
      <svg xml:space="preserve" viewBox="0 0 100 100" version="1.1">
        <path
          fill="currentColor"
          d="M83,17.8C74.5,8.9,63.4,4.3,50,4.1C37.7,4.2,26.8,8.6,17.9,17.3C8.9,26,4.3,37,4.1,50c0,0,0,0,0,0c0,9.1,2.5,17.4,7.4,24.9  c4.9,7.4,11.6,13.2,20.1,17.1c0.3,0.1,0.7,0.1,1-0.1c0.3-0.2,0.5-0.5,0.5-0.8l0-4.9c0.1-2.1,0.7-5.3,1.7-9.5c1-4,1.7-6.7,1.9-7.6  c0.7-3,1.7-7.2,3-12.6c0.1-0.2,0-0.5-0.1-0.7c-0.4-0.8-1-2.6-1.5-6.6c0.1-2.7,0.8-5.2,2.1-7.3c1.2-2,3.1-3.1,5.7-3.5  c2,0.1,4.7,0.8,5.1,5.9c-0.1,1.8-0.8,4.5-1.9,8.1c-1.2,3.8-1.9,6.3-2.1,7.6c-0.7,2.5-0.2,4.8,1.5,6.8c1.6,1.9,3.8,2.9,6.5,3.1  c4.3-0.1,8.1-2.6,11.2-7.5c1.7-3,2.9-6.3,3.5-9.7c0.7-3.4,0.7-7.1,0-10.8c-0.7-3.8-2.2-7.1-4.5-9.8c0,0-0.1-0.1-0.1-0.1  c-4.3-3.7-9.5-5.3-15.6-5c-6,0.4-11.3,2.6-15.9,6.6c-2.9,3.2-4.8,7.1-5.7,11.6c-0.9,4.6,0,9.1,2.6,13.3c0.3,0.5,0.5,0.8,0.6,1  c0,0.3,0,1-0.5,2.8c-0.5,1.8-0.9,2.2-0.9,2.2c0,0-0.1,0-0.1,0.1c0,0-0.2,0-0.4-0.1c-2.2-1-3.9-2.4-5.2-4.2c-1.3-1.9-2.1-4-2.5-6.3  c-0.3-2.5-0.4-5-0.3-7.5c0.2-2.5,0.7-5.1,1.4-7.7c3-6.9,8.5-11.9,16.3-14.8c7.8-2.9,16-3.2,24.3-0.8c6.5,2.8,11,7.4,13.6,13.7  c2.5,6.4,2.8,13.4,0.8,20.8c-2.2,7.1-6.4,12.4-12.1,15.7c-5.6,2.8-10.8,3-15.7,0.7c-1.8-1.1-3.1-2.3-3.9-3.5c-0.2-0.3-0.6-0.5-1-0.5  c-0.4,0.1-0.7,0.3-0.8,0.7c-0.7,2.7-1.3,4.7-1.6,6.2c-1.4,5.4-2.6,9.2-3.4,11c-0.8,1.6-1.6,3.1-2.4,4.3c-0.2,0.3-0.2,0.6-0.1,0.9  s0.3,0.5,0.6,0.6c4.3,1.3,8.7,2,13,2c12.4-0.1,23.2-4.6,32.1-13.4C91.1,73.9,95.8,62.9,96,50C95.9,37.5,91.5,26.7,83,17.8z"
        ></path>
      </svg>
    </a>
    <div class="tooltip">Pinterest</div>
  </li>
  <li class="icon-content">
    <a
      data-social="dribbble"
      aria-label="Dribbble"
      href="https://dribbble.com/"
    >
      <div class="filled"></div>
      <svg viewBox="0 0 100 100" version="1.1">
        <path
          fill="currentColor"
          d="M83.5,18.5C74.9,9.3,62.8,4,50.2,4c-6.1,0-12,1.1-17.6,3.4C15.2,14.5,4,31.3,4,50c0,13.9,6.2,26.9,17,35.7  C29.2,92.3,39.4,96,50,96c6.6,0,13.2-1.5,19.2-4.2c12.5-5.7,21.7-16.6,25.2-29.8C95.5,57.9,96,53.8,96,50  C96,38.3,91.6,27.1,83.5,18.5z M75,22.3c-0.7,0.9-1.4,1.8-2.1,2.6c-1.4,1.6-2.8,3-4.4,4.3c-0.3,0.3-0.6,0.6-1,0.8  c-1,0.9-2.1,1.7-3.2,2.5l-0.3,0.2c-1.1,0.7-2.2,1.5-3.5,2.2c-0.4,0.3-0.9,0.5-1.4,0.8c-0.8,0.5-1.7,0.9-2.7,1.4  c-0.6,0.3-1.2,0.5-1.8,0.8L54.3,38c-0.1,0-0.2,0.1-0.3,0.1c0,0,0,0,0,0c-1.3-2.6-2.4-4.9-3.5-7l-0.3-0.5c-1.1-2-2.2-4-3.3-6  l-0.7-1.3c-1.1-1.9-2.2-3.7-3.2-5.4l-0.7-1.1c-0.7-1.2-1.4-2.3-2.2-3.5c3.2-0.8,6.5-1.3,9.8-1.3c9.4,0,18.4,3.5,25.4,9.8  C75.3,21.9,75.2,22.1,75,22.3z M46.4,40.6c-1.4,0.4-2.9,0.8-4.4,1.1c-0.3,0-0.7,0.1-0.9,0.2c-6,1-12.5,1.4-19.4,1.1  c-0.3,0-0.6,0-0.9,0c-0.3,0-0.5,0-0.7,0c-2.5-0.2-4.9-0.4-7.2-0.7c2.3-11.2,9.6-20.9,19.8-26.1c2.1,3.3,4.2,6.7,6.3,10.3l0.4,0.7  c0.9,1.6,1.9,3.4,3.2,5.8l0.6,1.2C44.4,36.6,45.4,38.6,46.4,40.6z M24.4,51.1c2.2,0.1,4.2,0,6.2-0.1l0.7,0c0.4,0,0.9,0,1.3,0  c2.8-0.2,5.5-0.5,8.5-1c0.5-0.1,1-0.2,1.6-0.3l0.5-0.1c2.2-0.4,4.2-0.9,6.1-1.4c0.1,0,0.3-0.1,0.4-0.1l0.5,1.1  c1.2,2.8,2.3,5.5,3.3,8.1c0,0,0,0,0,0c-0.2,0.1-0.5,0.2-0.7,0.2c-2,0.6-4,1.4-5.9,2.2c-0.6,0.3-1.3,0.5-1.9,0.8  c-1.4,0.6-2.7,1.3-4.1,2.1l-0.3,0.2c-0.2,0.1-0.5,0.2-0.6,0.4c-1.5,0.9-3.1,1.9-4.7,3c-0.2,0.1-0.4,0.3-0.6,0.4  c-0.2,0.1-0.4,0.3-0.6,0.5c-1,0.7-2,1.5-3,2.3c-0.4,0.3-0.7,0.6-1.1,0.9l-0.3,0.3c-0.7,0.6-1.5,1.3-2.2,1.9l-0.2,0.2  c-0.4,0.4-0.7,0.7-1.1,1.1l-0.2,0.2c-0.6,0.6-1.3,1.3-2,2l-0.4,0.4c-0.2,0.2-0.4,0.4-0.5,0.6C16.1,69.9,12,60.2,12,50.3  c0,0,0.1,0,0.1,0c0.4,0,0.7,0,1.1,0.1c3.5,0.4,6.9,0.6,10.3,0.7C23.8,51,24.1,51.1,24.4,51.1z M29.5,81.9c0.2-0.2,0.3-0.4,0.5-0.5  c1-1.1,2-2.1,3-3c1.9-1.8,3.8-3.3,5.7-4.8c0.2-0.1,0.4-0.3,0.6-0.4c0.2-0.2,0.5-0.4,0.8-0.6c1.1-0.8,2.2-1.5,3.4-2.2  c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.1,0.3-0.2c1.4-0.8,2.9-1.6,4.5-2.3c0.3-0.1,0.6-0.2,0.8-0.4l0.6-0.3  c1.1-0.5,2.2-0.9,3.5-1.4c0.5-0.2,1.1-0.4,1.7-0.6l0.2-0.1c0.4-0.1,0.7-0.2,1.1-0.3c0,0,0,0,0,0c1.1,3.2,2.3,6.4,3.3,9.8l0.1,0.4  c1.1,3.6,2,7.3,2.9,10.8C51.7,89.8,39.3,88.3,29.5,81.9C29.4,81.9,29.4,81.9,29.5,81.9z M65.6,62.9c0.7-0.1,1.3-0.2,2-0.2  c2-0.2,4-0.2,5.9-0.2c0.2,0,0.4,0,0.6,0l0.2,0c2.2,0.1,4.6,0.3,6.9,0.6c0.4,0.1,0.9,0.1,1.3,0.2l0.6,0.1c0.7,0.1,1.5,0.3,2.2,0.4  c-3,7.6-8.3,14-15.2,18.3c-0.8-3.1-1.7-6.2-2.6-9.2l-0.1-0.4c-0.9-3-1.9-6.1-3.1-9.5C64.8,63.1,65.2,63,65.6,62.9z M81.6,55.2  C80,55,78.4,54.9,77,54.8l-0.9-0.1c-0.9-0.1-1.9-0.1-2.8-0.2c-0.2,0-0.3,0-0.5,0c-0.2,0-0.4,0-0.6,0c-2,0-3.9,0.1-5.9,0.3  c-0.2,0-0.3,0-0.5,0.1c-0.1,0-0.2,0-0.3,0c-1.3,0.1-2.6,0.3-3.9,0.5c-0.1-0.1-0.1-0.3-0.2-0.4c-0.1-0.2-0.2-0.5-0.3-0.7  c-1.1-2.9-2.3-5.7-3.2-7.8l-0.3-0.6c-0.1-0.1-0.1-0.3-0.2-0.4c0,0,0,0,0.1,0c0.2-0.1,0.5-0.2,0.7-0.3c0.6-0.2,1.2-0.5,1.8-0.8  c1.2-0.5,2.4-1.2,3.6-1.8c0.1-0.1,0.3-0.2,0.5-0.2c0.2-0.1,0.5-0.2,0.7-0.4c1.5-0.9,2.9-1.8,4.2-2.7l0.3-0.2  c0.2-0.1,0.4-0.3,0.6-0.4c0.9-0.6,1.9-1.4,2.8-2.2c1.5-1.2,2.9-2.5,4.3-4c0.8-0.8,1.5-1.6,2.2-2.4l0.4-0.5c0.5-0.5,0.9-1.1,1.3-1.6  C85.5,34.3,88,42.1,88,50c0,2-0.2,4.1-0.5,6.1c-0.3,0-0.6-0.1-0.8-0.1c-0.4-0.1-0.7-0.1-1.1-0.2l-1.1-0.2  C83.5,55.5,82.5,55.3,81.6,55.2z"
        ></path>
      </svg>
    </a>
    <div class="tooltip">Dribbble</div>
  </li>
  <li class="icon-content">
    <a
      data-social="telegram"
      aria-label="Telegram"
      href="https://telegram.org/"
    >
      <div class="filled"></div>
      <svg viewBox="0 0 100 100" version="1.1">
        <path
          fill="currentColor"
          d="M95,9.9c-1.3-1.1-3.4-1.2-7-0.1c0,0,0,0,0,0c-2.5,0.8-24.7,9.2-44.3,17.3c-17.6,7.3-31.9,13.7-33.6,14.5  c-1.9,0.6-6,2.4-6.2,5.2c-0.1,1.8,1.4,3.4,4.3,4.7c3.1,1.6,16.8,6.2,19.7,7.1c1,3.4,6.9,23.3,7.2,24.5c0.4,1.8,1.6,2.8,2.2,3.2  c0.1,0.1,0.3,0.3,0.5,0.4c0.3,0.2,0.7,0.3,1.2,0.3c0.7,0,1.5-0.3,2.2-0.8c3.7-3,10.1-9.7,11.9-11.6c7.9,6.2,16.5,13.1,17.3,13.9  c0,0,0.1,0.1,0.1,0.1c1.9,1.6,3.9,2.5,5.7,2.5c0.6,0,1.2-0.1,1.8-0.3c2.1-0.7,3.6-2.7,4.1-5.4c0-0.1,0.1-0.5,0.3-1.2  c3.4-14.8,6.1-27.8,8.3-38.7c2.1-10.7,3.8-21.2,4.8-26.8c0.2-1.4,0.4-2.5,0.5-3.2C96.3,13.5,96.5,11.2,95,9.9z M30,58.3l47.7-31.6  c0.1-0.1,0.3-0.2,0.4-0.3c0,0,0,0,0,0c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2-0.1c-0.1,0.1-0.2,0.4-0.4,0.6L66,38.1  c-8.4,7.7-19.4,17.8-26.7,24.4c0,0,0,0,0,0.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1-0.1,0.1c0,0.1,0,0.1-0.1,0.2c0,0,0,0.1,0,0.1  c0,0,0,0,0,0.1c-0.5,5.6-1.4,15.2-1.8,19.5c0,0,0,0,0-0.1C36.8,81.4,31.2,62.3,30,58.3z"
        ></path>
      </svg>
    </a>
    <div class="tooltip">Telegram</div>
  </li>
</ul>

<style>
/* From Uiverse.io by PriyanshuGupta28  - Tags: tooltip, animation, minimalist, spotify, hover effect, telegram, pintrest */
ul {
  list-style: none;
}

.example-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.example-2 .icon-content {
  margin: 0 10px;
  position: relative;
}
.example-2 .icon-content .tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.3s ease;
}
.example-2 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  top: -50px;
}
.example-2 .icon-content a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #4d4d4d;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-2 .icon-content a svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
}
.example-2 .icon-content a:hover {
  color: white;
}
.example-2 .icon-content a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
  height: 100%;
}
.example-2 .icon-content a[data-social="spotify"] .filled,
.example-2 .icon-content a[data-social="spotify"] ~ .tooltip {
  background-color: #1db954;
}
.example-2 .icon-content a[data-social="pinterest"] .filled,
.example-2 .icon-content a[data-social="pinterest"] ~ .tooltip {
  background-color: #bd081c;
}
.example-2 .icon-content a[data-social="dribbble"] .filled,
.example-2 .icon-content a[data-social="dribbble"] ~ .tooltip {
  background-color: #ea4c89;
}
.example-2 .icon-content a[data-social="telegram"] .filled,
.example-2 .icon-content a[data-social="telegram"] ~ .tooltip {
  background-color: #0088cc;
}

</style>
    

================================================
FILE: Tooltips/PriyanshuGupta28_dry-mole-12.html
================================================
<main>
  <ul class="example-1">
    <li class="icon-content">
      <a
        class="link"
        data-social="spotify"
        aria-label="Spotify"
        href="https://www.spotify.com/"
      >
        <svg viewBox="0 0 100 100" version="1.1">
          <path
            fill="currentColor"
            d="M50,4C24.7,4,4,24.7,4,50s20.6,46,46,46s46-20.6,46-46S75.4,4,50,4z M71.6,71.5c0,0,0,0.1-0.1,0.1c-0.8,1.2-2,1.8-3.2,1.8  c-0.7,0-1.4-0.2-2-0.6c-10.2-6.3-23.3-7.7-38.8-4.1c-2.1,0.6-4-0.9-4.5-2.7c-0.6-2.3,0.9-4.1,2.7-4.6c17.7-4,32.6-2.3,44.4,5  c0.9,0.4,1.5,1,1.8,1.9C72.2,69.3,72.1,70.5,71.6,71.5z M76.9,59.3L76.9,59.3c-0.8,1.1-1.9,1.9-3.2,2.1c-0.2,0-0.5,0.1-0.7,0.1  c-0.8,0-1.6-0.3-2.3-0.7c-12-7.3-30.1-9.4-43.9-5c-2.5,0.6-5-0.7-5.6-3c-0.6-2.5,0.7-4.9,3-5.5c16.5-5,37.2-2.5,51.4,6.2  c0.8,0.4,1.5,1.3,1.8,2.5C77.9,57,77.6,58.3,76.9,59.3z M83.2,45.6c-1,1.4-2.7,2.1-4.4,2.1c-0.9,0-1.9-0.2-2.7-0.7c0,0,0,0,0,0  c-13.9-8.3-37.8-9.3-51.4-5.1c-2.7,0.8-5.5-0.7-6.4-3.3c-0.8-2.7,0.7-5.6,3.3-6.4c16.2-4.8,43-3.8,59.8,6.2  C83.8,39.6,84.7,42.9,83.2,45.6C83.3,45.5,83.3,45.5,83.2,45.6z"
          ></path>
        </svg>
      </a>
      <div class="tooltip">Spotify</div>
    </li>
    <li class="icon-content">
      <a
        class="link"
        data-social="pinterest"
        aria-label="Pinterest"
        href="https://www.pinterest.com/"
      >
        <svg xml:space="preserve" viewBox="0 0 100 100" version="1.1">
          <path
            fill="currentColor"
            d="M83,17.8C74.5,8.9,63.4,4.3,50,4.1C37.7,4.2,26.8,8.6,17.9,17.3C8.9,26,4.3,37,4.1,50c0,0,0,0,0,0c0,9.1,2.5,17.4,7.4,24.9  c4.9,7.4,11.6,13.2,20.1,17.1c0.3,0.1,0.7,0.1,1-0.1c0.3-0.2,0.5-0.5,0.5-0.8l0-4.9c0.1-2.1,0.7-5.3,1.7-9.5c1-4,1.7-6.7,1.9-7.6  c0.7-3,1.7-7.2,3-12.6c0.1-0.2,0-0.5-0.1-0.7c-0.4-0.8-1-2.6-1.5-6.6c0.1-2.7,0.8-5.2,2.1-7.3c1.2-2,3.1-3.1,5.7-3.5  c2,0.1,4.7,0.8,5.1,5.9c-0.1,1.8-0.8,4.5-1.9,8.1c-1.2,3.8-1.9,6.3-2.1,7.6c-0.7,2.5-0.2,4.8,1.5,6.8c1.6,1.9,3.8,2.9,6.5,3.1  c4.3-0.1,8.1-2.6,11.2-7.5c1.7-3,2.9-6.3,3.5-9.7c0.7-3.4,0.7-7.1,0-10.8c-0.7-3.8-2.2-7.1-4.5-9.8c0,0-0.1-0.1-0.1-0.1  c-4.3-3.7-9.5-5.3-15.6-5c-6,0.4-11.3,2.6-15.9,6.6c-2.9,3.2-4.8,7.1-5.7,11.6c-0.9,4.6,0,9.1,2.6,13.3c0.3,0.5,0.5,0.8,0.6,1  c0,0.3,0,1-0.5,2.8c-0.5,1.8-0.9,2.2-0.9,2.2c0,0-0.1,0-0.1,0.1c0,0-0.2,0-0.4-0.1c-2.2-1-3.9-2.4-5.2-4.2c-1.3-1.9-2.1-4-2.5-6.3  c-0.3-2.5-0.4-5-0.3-7.5c0.2-2.5,0.7-5.1,1.4-7.7c3-6.9,8.5-11.9,16.3-14.8c7.8-2.9,16-3.2,24.3-0.8c6.5,2.8,11,7.4,13.6,13.7  c2.5,6.4,2.8,13.4,0.8,20.8c-2.2,7.1-6.4,12.4-12.1,15.7c-5.6,2.8-10.8,3-15.7,0.7c-1.8-1.1-3.1-2.3-3.9-3.5c-0.2-0.3-0.6-0.5-1-0.5  c-0.4,0.1-0.7,0.3-0.8,0.7c-0.7,2.7-1.3,4.7-1.6,6.2c-1.4,5.4-2.6,9.2-3.4,11c-0.8,1.6-1.6,3.1-2.4,4.3c-0.2,0.3-0.2,0.6-0.1,0.9  s0.3,0.5,0.6,0.6c4.3,1.3,8.7,2,13,2c12.4-0.1,23.2-4.6,32.1-13.4C91.1,73.9,95.8,62.9,96,50C95.9,37.5,91.5,26.7,83,17.8z"
          ></path>
        </svg>
      </a>
      <div class="tooltip">Pinterest</div>
    </li>
    <li class="icon-content">
      <a
        class="link"
        data-social="dribbble"
        aria-label="Dribbble"
        href="https://dribbble.com/"
      >
        <svg viewBox="0 0 100 100" version="1.1">
          <path
            fill="currentColor"
            d="M83.5,18.5C74.9,9.3,62.8,4,50.2,4c-6.1,0-12,1.1-17.6,3.4C15.2,14.5,4,31.3,4,50c0,13.9,6.2,26.9,17,35.7  C29.2,92.3,39.4,96,50,96c6.6,0,13.2-1.5,19.2-4.2c12.5-5.7,21.7-16.6,25.2-29.8C95.5,57.9,96,53.8,96,50  C96,38.3,91.6,27.1,83.5,18.5z M75,22.3c-0.7,0.9-1.4,1.8-2.1,2.6c-1.4,1.6-2.8,3-4.4,4.3c-0.3,0.3-0.6,0.6-1,0.8  c-1,0.9-2.1,1.7-3.2,2.5l-0.3,0.2c-1.1,0.7-2.2,1.5-3.5,2.2c-0.4,0.3-0.9,0.5-1.4,0.8c-0.8,0.5-1.7,0.9-2.7,1.4  c-0.6,0.3-1.2,0.5-1.8,0.8L54.3,38c-0.1,0-0.2,0.1-0.3,0.1c0,0,0,0,0,0c-1.3-2.6-2.4-4.9-3.5-7l-0.3-0.5c-1.1-2-2.2-4-3.3-6  l-0.7-1.3c-1.1-1.9-2.2-3.7-3.2-5.4l-0.7-1.1c-0.7-1.2-1.4-2.3-2.2-3.5c3.2-0.8,6.5-1.3,9.8-1.3c9.4,0,18.4,3.5,25.4,9.8  C75.3,21.9,75.2,22.1,75,22.3z M46.4,40.6c-1.4,0.4-2.9,0.8-4.4,1.1c-0.3,0-0.7,0.1-0.9,0.2c-6,1-12.5,1.4-19.4,1.1  c-0.3,0-0.6,0-0.9,0c-0.3,0-0.5,0-0.7,0c-2.5-0.2-4.9-0.4-7.2-0.7c2.3-11.2,9.6-20.9,19.8-26.1c2.1,3.3,4.2,6.7,6.3,10.3l0.4,0.7  c0.9,1.6,1.9,3.4,3.2,5.8l0.6,1.2C44.4,36.6,45.4,38.6,46.4,40.6z M24.4,51.1c2.2,0.1,4.2,0,6.2-0.1l0.7,0c0.4,0,0.9,0,1.3,0  c2.8-0.2,5.5-0.5,8.5-1c0.5-0.1,1-0.2,1.6-0.3l0.5-0.1c2.2-0.4,4.2-0.9,6.1-1.4c0.1,0,0.3-0.1,0.4-0.1l0.5,1.1  c1.2,2.8,2.3,5.5,3.3,8.1c0,0,0,0,0,0c-0.2,0.1-0.5,0.2-0.7,0.2c-2,0.6-4,1.4-5.9,2.2c-0.6,0.3-1.3,0.5-1.9,0.8  c-1.4,0.6-2.7,1.3-4.1,2.1l-0.3,0.2c-0.2,0.1-0.5,0.2-0.6,0.4c-1.5,0.9-3.1,1.9-4.7,3c-0.2,0.1-0.4,0.3-0.6,0.4  c-0.2,0.1-0.4,0.3-0.6,0.5c-1,0.7-2,1.5-3,2.3c-0.4,0.3-0.7,0.6-1.1,0.9l-0.3,0.3c-0.7,0.6-1.5,1.3-2.2,1.9l-0.2,0.2  c-0.4,0.4-0.7,0.7-1.1,1.1l-0.2,0.2c-0.6,0.6-1.3,1.3-2,2l-0.4,0.4c-0.2,0.2-0.4,0.4-0.5,0.6C16.1,69.9,12,60.2,12,50.3  c0,0,0.1,0,0.1,0c0.4,0,0.7,0,1.1,0.1c3.5,0.4,6.9,0.6,10.3,0.7C23.8,51,24.1,51.1,24.4,51.1z M29.5,81.9c0.2-0.2,0.3-0.4,0.5-0.5  c1-1.1,2-2.1,3-3c1.9-1.8,3.8-3.3,5.7-4.8c0.2-0.1,0.4-0.3,0.6-0.4c0.2-0.2,0.5-0.4,0.8-0.6c1.1-0.8,2.2-1.5,3.4-2.2  c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.1,0.3-0.2c1.4-0.8,2.9-1.6,4.5-2.3c0.3-0.1,0.6-0.2,0.8-0.4l0.6-0.3  c1.1-0.5,2.2-0.9,3.5-1.4c0.5-0.2,1.1-0.4,1.7-0.6l0.2-0.1c0.4-0.1,0.7-0.2,1.1-0.3c0,0,0,0,0,0c1.1,3.2,2.3,6.4,3.3,9.8l0.1,0.4  c1.1,3.6,2,7.3,2.9,10.8C51.7,89.8,39.3,88.3,29.5,81.9C29.4,81.9,29.4,81.9,29.5,81.9z M65.6,62.9c0.7-0.1,1.3-0.2,2-0.2  c2-0.2,4-0.2,5.9-0.2c0.2,0,0.4,0,0.6,0l0.2,0c2.2,0.1,4.6,0.3,6.9,0.6c0.4,0.1,0.9,0.1,1.3,0.2l0.6,0.1c0.7,0.1,1.5,0.3,2.2,0.4  c-3,7.6-8.3,14-15.2,18.3c-0.8-3.1-1.7-6.2-2.6-9.2l-0.1-0.4c-0.9-3-1.9-6.1-3.1-9.5C64.8,63.1,65.2,63,65.6,62.9z M81.6,55.2  C80,55,78.4,54.9,77,54.8l-0.9-0.1c-0.9-0.1-1.9-0.1-2.8-0.2c-0.2,0-0.3,0-0.5,0c-0.2,0-0.4,0-0.6,0c-2,0-3.9,0.1-5.9,0.3  c-0.2,0-0.3,0-0.5,0.1c-0.1,0-0.2,0-0.3,0c-1.3,0.1-2.6,0.3-3.9,0.5c-0.1-0.1-0.1-0.3-0.2-0.4c-0.1-0.2-0.2-0.5-0.3-0.7  c-1.1-2.9-2.3-5.7-3.2-7.8l-0.3-0.6c-0.1-0.1-0.1-0.3-0.2-0.4c0,0,0,0,0.1,0c0.2-0.1,0.5-0.2,0.7-0.3c0.6-0.2,1.2-0.5,1.8-0.8  c1.2-0.5,2.4-1.2,3.6-1.8c0.1-0.1,0.3-0.2,0.5-0.2c0.2-0.1,0.5-0.2,0.7-0.4c1.5-0.9,2.9-1.8,4.2-2.7l0.3-0.2  c0.2-0.1,0.4-0.3,0.6-0.4c0.9-0.6,1.9-1.4,2.8-2.2c1.5-1.2,2.9-2.5,4.3-4c0.8-0.8,1.5-1.6,2.2-2.4l0.4-0.5c0.5-0.5,0.9-1.1,1.3-1.6  C85.5,34.3,88,42.1,88,50c0,2-0.2,4.1-0.5,6.1c-0.3,0-0.6-0.1-0.8-0.1c-0.4-0.1-0.7-0.1-1.1-0.2l-1.1-0.2  C83.5,55.5,82.5,55.3,81.6,55.2z"
          ></path>
        </svg>
      </a>
      <div class="tooltip">Dribbble</div>
    </li>
    <li class="icon-content">
      <a
        class="link"
        data-social="telegram"
        aria-label="Telegram"
        href="https://telegram.org/"
      >
        <svg viewBox="0 0 100 100" version="1.1">
          <path
            fill="currentColor"
            d="M95,9.9c-1.3-1.1-3.4-1.2-7-0.1c0,0,0,0,0,0c-2.5,0.8-24.7,9.2-44.3,17.3c-17.6,7.3-31.9,13.7-33.6,14.5  c-1.9,0.6-6,2.4-6.2,5.2c-0.1,1.8,1.4,3.4,4.3,4.7c3.1,1.6,16.8,6.2,19.7,7.1c1,3.4,6.9,23.3,7.2,24.5c0.4,1.8,1.6,2.8,2.2,3.2  c0.1,0.1,0.3,0.3,0.5,0.4c0.3,0.2,0.7,0.3,1.2,0.3c0.7,0,1.5-0.3,2.2-0.8c3.7-3,10.1-9.7,11.9-11.6c7.9,6.2,16.5,13.1,17.3,13.9  c0,0,0.1,0.1,0.1,0.1c1.9,1.6,3.9,2.5,5.7,2.5c0.6,0,1.2-0.1,1.8-0.3c2.1-0.7,3.6-2.7,4.1-5.4c0-0.1,0.1-0.5,0.3-1.2  c3.4-14.8,6.1-27.8,8.3-38.7c2.1-10.7,3.8-21.2,4.8-26.8c0.2-1.4,0.4-2.5,0.5-3.2C96.3,13.5,96.5,11.2,95,9.9z M30,58.3l47.7-31.6  c0.1-0.1,0.3-0.2,0.4-0.3c0,0,0,0,0,0c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2-0.1c-0.1,0.1-0.2,0.4-0.4,0.6L66,38.1  c-8.4,7.7-19.4,17.8-26.7,24.4c0,0,0,0,0,0.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1-0.1,0.1c0,0.1,0,0.1-0.1,0.2c0,0,0,0.1,0,0.1  c0,0,0,0,0,0.1c-0.5,5.6-1.4,15.2-1.8,19.5c0,0,0,0,0-0.1C36.8,81.4,31.2,62.3,30,58.3z"
          ></path>
        </svg>
      </a>
      <div class="tooltip">Telegram</div>
    </li>
  </ul>
</main>

<style>
/* From Uiverse.io by PriyanshuGupta28  - Tags: tooltip, 3d tooltip, cool tooltip */
ul {
  list-style: none;
}

.example-1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.example-1 .icon-content {
  margin: 0 10px;
  position: relative;
}
.example-1 .icon-content .tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.3s ease;
}
.example-1 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  top: -50px;
}
.example-1 .icon-content .link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #4d4d4d;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.example-1 .icon-content .link:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-1 .icon-content .link svg {
  width: 30px;
  height: 30px;
}
.example-1 .icon-content .link[data-social="spotify"]:hover {
  color: #1db954;
}
.example-1 .icon-content .link[data-social="pinterest"]:hover {
  color: #bd081c;
}
.example-1 .icon-content .link[data-social="dribbble"]:hover {
  color: #ea4c89;
}
.example-1 .icon-content .link[data-social="telegram"]:hover {
  color: #0088cc;
}

</style>
    

================================================
FILE: Tooltips/Quezaquo_bitter-wolverine-27.html
================================================
<div class="container">
  <span class="hover-me">Hover me !</span>
  <div class="tooltip">
    <p>Heyy👋</p>
  </div>
</div>

<style>
/* From Uiverse.io by Quezaquo  - Tags: simple, tooltip, transition */
.container {
  font-size: 18px;
  color: #333;
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.hover-me {
  position: relative;
  z-index: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #333;
}

.tooltip {
  width: 100%;
  height: 10px;
  background: #ffffff;
  padding: 0.25em;
  text-align: center;
  position: absolute;
  top: 40px;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform-origin: center top;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  transition: opacity 0.3s ease-in-out;
}

.tooltip::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 80%;
  transform: translateX(-50%);
  border-width: 8px 7px 0;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}

.tooltip p {
  margin: 0;
  color: #333;
  font-weight: 600;
}

.container:hover .tooltip {
  top: -10px;
  opacity: 1;
  visibility: visible;
  animation: goPopup 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.container:hover .tooltip p {
  animation: bounce 2s ease-in-out infinite;
}

@keyframes goPopup {
  0% {
    transform: translateY(0) scaleY(0);
    opacity: 0;
  }
  50% {
    transform: translateY(-50%) scaleY(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%) scaleY(1);
    border-radius: 8px;
    opacity: 1;
    height: 40px;
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-2px);
  }
}

</style>
    

================================================
FILE: Tooltips/Sacha-PDV_angry-cat-58.html
================================================
<div class="tooltip">
  <span>Hover me</span>
  <div class="tooltip-text">
    Ceci est un tooltip moderne et animé avec des bulles autour.
  </div>
  <div class="tooltip-bubble"></div>
  <div class="tooltip-bubble"></div>
  <div class="tooltip-bubble"></div>
</div>

<style>
/* From Uiverse.io by Sacha-PDV  - Tags: simple, tooltip, circle */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.tooltip-text {
  visibility: hidden;
  width: 200px;
  background-color: #3498db;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  top: -65px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -60px);
}
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #3498db transparent transparent transparent;
}
.tooltip:hover .tooltip-bubble {
  display: block;
}
.tooltip-bubble {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #3498db;
  border-radius: 50%;
  display: none;
}
.tooltip-bubble:nth-child(3) {
  bottom: 170px;
  left: 43%;
}
.tooltip-bubble:nth-child(4) {
  bottom: 170px;
  left: 90%;
}
.tooltip-bubble:nth-child(5) {
  bottom: 170px;
  left: -10%;
}
.tooltip span {
  display: inline-block;
  padding: 5px 10px;
  background: #3498db;
  color: #fff;
  border-radius: 4px;
  transition: background 0.3s;
}
.tooltip:hover span {
  background: #ff6b6b;
}

</style>
    

================================================
FILE: Tooltips/SelfMadeSystem_neat-emu-37.html
================================================
<div class="tooltip-container">
  <span class="tooltip">
    <span>
      <svg
        class="tooltip-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <defs>
          <linearGradient y2="1" x2="0" id="gradient">
            <stop stop-color="#96a1e8" offset="0%"></stop>
            <stop stop-color="#5061be" offset="100%"></stop>
          </linearGradient>
        </defs>
        <path
          d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
          fill="url(#gradient)"
        ></path>
      </svg>
    </span>
    <span class="tooltip-lines">
      <span class="tooltip-line-1"></span>
      <span class="tooltip-line-2"></span>
    </span>
  </span>
  <span class="text">
    <span class="tooltip-lines">
      <span class="tooltip-line-1"></span>
      <span class="tooltip-line-2"></span>
    </span>
  </span>
</div>

<style>
/* From Uiverse.io by SelfMadeSystem  - Tags: tooltip, 3d, border */
/* This is very original.
I'm also too lazy to figure out how to add the arrow
without excessive SVG. I know I'm not going to win, so
why not just try to emulate the thing in the image */
.tooltip-container {
  --background: #fefbff;
  --inner-shadow: #9faef9;
  --inner-outline: #34217d;
  --inner-outline-bottom: #fafcfe;
  --inner-outline-middle: #8880d5;
  --inner-outline-outer-top: #fefcff;
  --inner-outline-outer-bottom-1: #29107b;
  --inner-outline-outer-bottom-2: #5b42c4;
  --inner-outline-outer-bottom-3: #200265;
  --line-1: #8676c9;
  --line-2: #5c69ca;
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  border-radius: 5px;
  box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),
    0px 2px 0px 0px var(--inner-outline-bottom),
    0px -2px 0px 0px var(--inner-outline),
    -2px -2px 0px 0px var(--inner-outline),
    2px -2px 0px 0px var(--inner-outline),
    0px 0px 0px 6px var(--inner-outline-middle),
    0px -2px 0px 7px var(--inner-outline-outer-top),
    0px 4px 0px 7px var(--inner-outline-outer-bottom-1);
}

.tooltip-icon {
  display: inline-block;
  vertical-align: top;
  width: 1.5em;
}

.tooltip-icon path {
  stroke-width: 2px;
  stroke: var(--inner-outline);
  stroke-linejoin: round;
}

.tooltip-lines {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.tooltip-line-1 {
  height: 0.2em;
  width: 4em;
  border-radius: 10em;
  display: inline-block;
  background: var(--line-1);
}

.tooltip-line-2 {
  height: 0.2em;
  width: 3em;
  border-radius: 10em;
  display: inline-block;
  background: var(--line-2);
}

.tooltip {
  position: absolute;
  display: flex;
  gap: 0.4em;
  align-items: center;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.6em 0.8em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background: var(--background);
  border-radius: 0.7em;

  box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),
    0px 2px 0px 0px var(--inner-outline-bottom),
    0px -2px 0px 0px var(--inner-outline),
    -2px -2px 0px 0px var(--inner-outline),
    2px -2px 0px 0px var(--inner-outline),
    0px 0px 0px 6px var(--inner-outline-middle),
    0px -2px 0px 7px var(--inner-outline-outer-top),
    0px 4px 0px 7px var(--inner-outline-outer-bottom-1),
    0px 7px 0px 7px var(--inner-outline-outer-bottom-2),
    0px 10px 0px 7px var(--inner-outline-outer-bottom-3);
}

/* .tooltip::before {
  content: "";
  position: absolute;
  height: 1em;
  width: 1em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) translateY(2px) rotate(45deg);
  background: var(--background);
  border-radius: 0.2em;
} */

.tooltip-container:hover .tooltip {
  top: -4.5em;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

================================================
FILE: Tooltips/Siyu1017_giant-catfish-51.html
================================================
<div class="tooltip-container">
  <span class="tooltip">Uiverse.io</span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by Siyu1017  - Tags: tooltip */
.tooltip-container {
  position: relative;
  transition: all 0.2s;
  font-size: 17px;
  padding: 1rem 0;
  width: fit-content;
  box-sizing: border-box;
  --bg: linear-gradient(135deg, #a940fd, #5b46e8);
  --color: #fff;
  --tooltip-bg: #303030;
  --tooltip-color: #fff;
  --margin: 0.5rem;
}

.text {
  z-index: 9;
  background: var(--bg);
  color: var(--color);
  padding: 0.7em 1.8em;
  border-radius: 0.75rem;
  height: fit-content;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.15);
}

.tooltip {
  position: absolute;
  top: calc(-1 * var(--margin));
  left: 50%;
  transform: translateX(-50%) translateY(0%) scale(0);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s;
  background: var(--tooltip-bg);
  color: var(--tooltip-color);
  border-radius: 0.5rem;
  z-index: 99999;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: var(--tooltip-bg);
  border-bottom-right-radius: 0.175rem;
}

.tooltip-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-100%) scale(1);
}

</style>
    

================================================
FILE: Tooltips/SmookyDev_itchy-newt-24.html
================================================
<!-- From Uiverse.io by SmookyDev  - Tags: tooltip, animation, transition, advanced, tailwind -->
<div class="flex flex-col items-center group cursor-pointer font-mono">
  <div
    class="relative px-6 py-2 after:absolute after:inset-0 z-50 w-full h-full after:bg-gradient-to-b after:from-rose-500 after:to-rose-500 after:hover:transition-all after:hover:translate-y-0 after:-z-10 after:-translate-y-[95%] after:hover:duration-[3s] text-center text-rose-300 overflow-hidden transition-all text-2xl"
  >
    Blink 😀
  </div>

  <div
    class="absolute group-hover:mb-10 -translate-y-[150%] group-hover:-translate-y-full flex-col items-center duration-1000 group-hover:duration-700 group-hover:flex group-hover:opacity-100 transition-all group-hover:transition-all"
  >
    <div
      class="transition-all h-10 duration-1000 grid grid-cols-12 grid-rows-4 group [&amp;_div]:w-full [&amp;_div]:text-transparent w-full [&amp;_div]:h-full [&amp;_div]:bg-rose-500 [&amp;_div]:text-center [&amp;_div]:flex [&amp;_div]:items-center [&amp;_div]:justify-center [&amp;_div]:text-[5px] [&amp;_div]:transition-all [&amp;_div]:duration-500 group-hover:[&amp;_div:nth-child(even)]:-skew-x-6 group-hover:[&amp;_div:nth-child(odd)]:bg-rose-700 group-hover:[&amp;_div:nth-child(even)]:bg-rose-700 group-hover:[&amp;_div:nth-child(odd)]:duration-500 group-hover:[&amp;_div:nth-child(even)]:duration-700 group-hover:[&amp;_div:nth-child(odd)]:animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite] group-hover:[&amp;_div:nth-child(even)]:animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite] group-hover:-translate-y-0 translate-y-[265%]"
    >
      <div class="group-hover:-mx-4 group-hover:scale-150 group-hover:rotate-6">
        1
      </div>
      <div class="group-hover:-my-3 group-hover:scale-110 group-hover:rotate-6">
        2
      </div>
      <div class="group-hover:-group-hover:rotate-6 group-hover:scale-75">
        3
      </div>
      <div class="group-hover:-my-3 group-hover:scale-125 group-hover:rotate-6">
        4
      </div>
      <div class="group-hover:-group-hover:rotate-45 group-hover:scale-90">
        5
      </div>
      <div
        class="group-hover:-my-3 group-hover:scale-110 group-hover:rotate-45"
      >
        6
      </div>
      <div class="group-hover:scale-125">7</div>
      <div class="group-hover:-my-3 group-hover:scale-150 group-hover:rotate-3">
        8
      </div>
      <div class="group-hover:-group-hover:rotate-45">9</div>
      <div class="group-hover:-my-3 group-hover:scale-95 group-hover:rotate-12">
        10
      </div>
      <div class="group-hover:scale-50">11</div>
      <div class="group-hover:-my-2 group-hover:scale-150 group-hover:rotate-6">
        12
      </div>
      <div
        class="group-hover:-my-3 group-hover:scale-95 group-hover:rotate-180"
      >
        13
      </div>
      <div class="group-hover:-mx-2 group-hover:-my-px group-hover:rotate-6">
        14
      </div>
      <div class="group-hover:opacity-0">15</div>
      <div
        class="group-hover:-my-1 group-hover:scale-95 group-hover:-group-hover:rotate-12"
      >
        16
      </div>
      <div class="group-hover:scale-50 group-hover:-group-hover:rotate-12">
        17
      </div>
      <div class="group-hover:scale-75 group-hover:rotate-3">18</div>
      <div class="group-hover:scale-75 group-hover:-group-hover:rotate-12">
        19
      </div>
      <div class="">20</div>
      <div class="group-hover:opacity-0">21</div>
      <div class="group-hover:rotate-45 group-hover:-my-1">22</div>
      <div
        class="group-hover:-my-1 group-hover:scale-95 group-hover:-group-hover:rotate-12"
      >
        23
      </div>
      <div class="">24</div>
      <div class="group-hover:-mx-5 group-hover:scale-150 group-hover:rotate-6">
        25
      </div>
      <div
        class="group-hover:-mx-2 group-hover:-group-hover:rotate-12 group-hover:scale-[0.5]"
      >
        26
      </div>
      <div class="group-hover:rotate-45 group-hover:-my-1">27</div>
      <div class="group-hover:scale-50 group-hover:rotate-12">28</div>
      <div class="group-hover:scale-x-110 group-hover:rotate-12">29</div>
      <div class="group-hover:scale-75">30</div>
      <div class="">31</div>
      <div class="group-hover:opacity-0">32</div>
      <div class="group-hover:-group-hover:rotate-45">33</div>
      <div class="">34</div>
      <div class="group-hover:scale-50 group-hover:rotate-12">35</div>
      <div class="">36</div>
      <div class="group-hover:-mx-1 group-hover:scale-125 group-hover:rotate-6">
        37
      </div>
      <div
        class="group-hover:-mx-y group-hover:scale-110 group-hover:rotate-45"
      >
        38
      </div>
      <div class="group-hover:scale-50 group-hover:rotate-12">39</div>
      <div class="group-hover:-group-hover:rotate-45">40</div>
      <div class="group-hover:opacity-0">41</div>
      <div class="">42</div>
      <div class="group-hover:scale-75 group-hover:rotate-12">43</div>
      <div
        class="group-hover:-mx-y group-hover:scale-110 group-hover:-group-hover:rotate-45"
      >
        44
      </div>
      <div class="group-hover:scale-50">45</div>
      <div
        class="group-hover:-mx-y group-hover:scale-110 group-hover:rotate-45"
      >
        46
      </div>
      <div class="group-hover:mx-1 group-hover:scale-150 group-hover:rotate-6">
        47
      </div>
      <div class="group-hover:mx-1 group-hover:scale-125 group-hover:rotate-6">
        48
      </div>
    </div>

    <span
      class="relative z-10 p-2 opacity-0 group-hover:opacity-100 leading-none whitespace-no-wrap bg-gradient-to-t from-rose-500 to-rose-700 text-sm shadow-lg transition-all text-rose-300 group-hover:text-lg"
      >Hope You Like It 😉</span
    >
    <div
      class="w-3 h-3 -z-20 -mt-2 opacity-0 group-hover:opacity-100 rotate-45 bg-rose-500 transition-all"
    ></div>
  </div>
</div>


    

================================================
FILE: Tooltips/SmookyDev_plastic-dragonfly-83.html
================================================
<div class="tooltip">
  <div class="icon">i</div>
  <div class="tooltiptext">This is a cool tooltip!</div>
</div>

<style>
/* From Uiverse.io by SmookyDev  - Tags: simple, neumorphism, skeuomorphism, flashy, tooltip, icon, hover effect, css */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-family: "Arial", sans-serif;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}

.tooltip .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #4caf50;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
}

</style>
    

================================================
FILE: Tooltips/SouravBandyopadhyay_rare-sloth-65.html
================================================
<div class="payment-button">
  <span class="label">Pay Now</span>
  <span class="price">$49.99</span>
</div>

<style>
/* From Uiverse.io by SouravBandyopadhyay  - Tags: simple, tooltip, animation, text animation, animated, transition, hover effect, hover button */
.payment-button {
  --background: #007bff;
  --text-color: #fff;
  --hover-background: #0056b3;
  --hover-text-color: #fff;
  --border-radius: 4px;
  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  display: inline-block;
  cursor: pointer;
  font-size: 18px;
  padding: 0.5em 1.5em;
  background: var(--background);
  color: var(--text-color);
  border: none;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  transition: transform 0.2s ease-in-out, background 0.3s ease-in-out,
    color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.label {
  z-index: 1;
}

.price {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform-origin: 100%;
  transform: scale(1);
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out,
    background 0.3s ease-in-out;
  color: var(--background);
  background: var(--text-color);
  border-radius: var(--border-radius);
  font-weight: bold;
  font-size: 14px;
  overflow: hidden;
}

.payment-button:hover {
  transform: scale(1.05);
  background: var(--hover-background);
  color: var(--hover-text-color);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.payment-button:hover .price {
  transform: scale(0);
}

</style>
    

================================================
FILE: Tooltips/SouravBandyopadhyay_ugly-pug-52.html
================================================
<div class="button" data-tooltip="PRICE $20">
  <div class="button-wrapper">
    <div class="text">Add To Cart</div>
    <span class="icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="bi bi-cart2"
        viewBox="0 0 16 16"
      >
        <path
          d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"
        ></path>
      </svg>
    </span>
  </div>
</div>

<style>
/* From Uiverse.io by SouravBandyopadhyay  - Tags: simple, tooltip, black, clean, submit, transition, hover effect, tailwind */
.button {
  --width: 100px;
  --height: 35px;
  --tooltip-height: 35px;
  --tooltip-width: 90px;
  --gap-between-tooltip-to-button: 18px;
  --button-color: #222;
  --tooltip-color: #fff;
  width: var(--width);
  height: var(--height);
  background: var(--button-color);
  position: relative;
  text-align: center;
  border-radius: 0.5em;
  font-family: "Arial";
  transition: background 0.7s;
}

.button::before {
  position: absolute;
  content: attr(data-tooltip);
  width: var(--tooltip-width);
  height: var(--tooltip-height);
  background-color: #555;
  font-size: 0.9rem;
  color: #fff;
  border-radius: 0.25em;
  line-height: var(--tooltip-height);
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px);
  left: calc(50% - var(--tooltip-width) / 2);
}

.button::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #555;
  left: calc(50% - 10px);
  bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px);
}

.button::after,
.button::before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-wrapper,
.text,
.icon {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  color: #fff;
}

.text {
  top: 0;
}

.text,
.icon {
  transition: top 0.5s;
}

.icon {
  color: #fff;
  top: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon svg {
  width: 24px;
  height: 24px;
}

.button:hover {
  background: #222;
}

.button:hover .text {
  top: -100%;
}

.button:hover .icon {
  top: 0;
}

.button:hover:before,
.button:hover:after {
  opacity: 1;
  visibility: visible;
}

.button:hover:after {
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px);
}

.button:hover:before {
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button));
}

</style>
    

================================================
FILE: Tooltips/SteveBloX_orange-fox-41.html
================================================
<div class="tooltip-container">
  <span class="tooltip">
    <p class="title">Title</p>
    <p class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
  </span>
  <span class="text">Material Design Tooltip</span>
</div>

<style>
/* From Uiverse.io by SteveBloX  - Tags: material design, tooltip, shadow, md, md3 */
/* Material Design 3 tooltip */
.tooltip-container {
  position: relative;
  background: #e8def8;
  color: #1d192b;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  font-family: Montserrat, sans-serif;
  border-radius: 50px;
}
.tooltip-container .text {
  font-weight: bold;
}

.tooltip {
  transform-origin: center left;
  scale: 0;
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translate(-50%, -10px);
  transition: all 0.25s;
  background: #f3edf7;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  padding: 17px;
  border-radius: 12px;
  color: #49454f;
  min-width: 312px;
}

.tooltip-container:hover .tooltip {
  scale: 1;
}

.tooltip .title {
  font-weight: bold;
  font-size: 1em;
}

.tooltip .content {
  font-size: 0.85em;
  font-weight: semibold;
}

</style>
    

================================================
FILE: Tooltips/TanimMahbub_white-fly-43.html
================================================
<div class="wrapper">
  <div>
    <a href="#" data-tooltip-content="Github" class="data-tooltip">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="currentColor"
        class="bi bi-github"
        viewBox="0 0 16 16"
      >
        <path
          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"
        ></path>
      </svg>
    </a>
    <p>Tooltip using HTML custom data attribute &amp; CSS content property</p>
  </div>

  <div>
    <a href="#" class="span-tooltip">
      <i>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
          class="bi bi-github"
          viewBox="0 0 16 16"
        >
          <path
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"
          ></path>
        </svg>
      </i>
      <span>Github</span>
    </a>
    <p>Tooltip using span tag</p>
  </div>
</div>

<style>
/* From Uiverse.io by TanimMahbub  - Tags: simple, tooltip, icon, black */
.wrapper {
  display: flex;
  gap: 10px;
  font-family: monospace;
}

.wrapper > div {
  text-align: center;
}

.wrapper > div + div {
  border-inline-start: 1px solid #d6cfcf;
  padding-inline-start: 15px;
}

.wrapper > div > p {
  margin-top: 15px;
  max-width: 200px;
}

.wrapper a {
  display: inline-flex;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  background-color: #191919;
  color: #d5ad72;
  position: relative;
}

.data-tooltip::before,
.data-tooltip::after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.2s ease;
}

.data-tooltip::before {
  content: attr(data-tooltip-content);
  width: fit-content;
  font-size: small;
  font-weight: 600;
  background-color: inherit;
  padding: 3px 10px;
  border-radius: 4px;
  bottom: calc(100% + 5px);
}

.data-tooltip::after {
  content: "";
  border-top: 5px solid #191919;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  bottom: calc(100% + 1px);
}

.data-tooltip:hover::before,
.data-tooltip:hover::after {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.span-tooltip > i {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.span-tooltip > span {
  position: absolute;
  width: fit-content;
  font-size: small;
  font-weight: 600;
  background-color: inherit;
  padding: 3px 10px;
  border-radius: 4px;
  bottom: 100%;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease;
}

.span-tooltip > span::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background-color: inherit;
  transform: rotate(45deg);
  top: calc(100% - 6px);
  left: 40%;
}

.span-tooltip > i:hover + span {
  visibility: visible;
  opacity: 1;
  bottom: calc(100% + 6px);
}

</style>
    

================================================
FILE: Tooltips/Tsiangana_honest-bobcat-61.html
================================================
<div class="tooltip-container">
  <span class="text">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="22"
      height="22"
      class="bi bi-send-fill"
      viewBox="0 0 16 16"
    >
      <path
        d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z"
      ></path>
    </svg>
  </span>
  <span class="tooltip1">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      class="bi bi-twitter"
      viewBox="0 0 16 16"
    >
      <path
        d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334q.002-.211-.006-.422A6.7 6.7 0 0 0 16 3.542a6.7 6.7 0 0 1-1.889.518 3.3 3.3 0 0 0 1.447-1.817 6.5 6.5 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.32 9.32 0 0 1-6.767-3.429 3.29 3.29 0 0 0 1.018 4.382A3.3 3.3 0 0 1 .64 6.575v.045a3.29 3.29 0 0 0 2.632 3.218 3.2 3.2 0 0 1-.865.115 3 3 0 0 1-.614-.057 3.28 3.28 0 0 0 3.067 2.277A6.6 6.6 0 0 1 .78 13.58a6 6 0 0 1-.78-.045A9.34 9.34 0 0 0 5.026 15"
      ></path>
    </svg>
  </span>
  <span class="tooltip2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      class="bi bi-facebook"
      viewBox="0 0 16 16"
    >
      <path
        d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"
      ></path>
    </svg>
  </span>
  <span class="tooltip3">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      class="bi bi-whatsapp"
      viewBox="0 0 16 16"
    >
      <path
        d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"
      ></path>
    </svg>
  </span>
  <span class="tooltip4">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      class="bi bi-discord"
      viewBox="0 0 16 16"
    >
      <path
        d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"
      ></path>
    </svg>
  </span>
  <span class="tooltip5">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      class="bi bi-pinterest"
      viewBox="0 0 16 16"
    >
      <path
        d="M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0"
      ></path>
    </svg>
  </span>
  <span class="tooltip6">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      viewBox="0 0 16 16"
    >
      <path
        fill-rule="evenodd"
        d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8c4.408 0 8-3.584 8-8s-3.592-8-8-8m5.284 3.688a6.8 6.8 0 0 1 1.545 4.251c-.226-.043-2.482-.503-4.755-.217-.052-.112-.096-.234-.148-.355-.139-.33-.295-.668-.451-.99 2.516-1.023 3.662-2.498 3.81-2.69zM8 1.18c1.735 0 3.323.65 4.53 1.718-.122.174-1.155 1.553-3.584 2.464-1.12-2.056-2.36-3.74-2.551-4A7 7 0 0 1 8 1.18m-2.907.642A43 43 0 0 1 7.627 5.77c-3.193.85-6.013.833-6.317.833a6.87 6.87 0 0 1 3.783-4.78zM1.163 8.01V7.8c.295.01 3.61.053 7.02-.971.199.381.381.772.555 1.162l-.27.078c-3.522 1.137-5.396 4.243-5.553 4.504a6.82 6.82 0 0 1-1.752-4.564zM8 14.837a6.8 6.8 0 0 1-4.19-1.44c.12-.252 1.509-2.924 5.361-4.269.018-.009.026-.009.044-.017a28.3 28.3 0 0 1 1.457 5.18A6.7 6.7 0 0 1 8 14.837m3.81-1.171c-.07-.417-.435-2.412-1.328-4.868 2.143-.338 4.017.217 4.251.295a6.77 6.77 0 0 1-2.924 4.573z"
      ></path>
    </svg>
  </span>
  <span class="tooltip7">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      class="bi bi-github"
      viewBox="0 0 16 16"
    >
      <path
        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"
      ></path>
    </svg>
  </span>
  <span class="tooltip8">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      class="bi bi-reddit"
      viewBox="0 0 16 16"
    >
      <path
        d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z"
      ></path>
      <path
        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165"
      ></path>
    </svg>
  </span>
  <span class="tooltip9"> </span>
</div>

<style>
/* From Uiverse.io by Tsiangana  - Tags: tooltip, hover, social media, creative, advanced */
/* This is an example, feel free to delete this code */
.tooltip-container {
  background: rgb(3, 169, 244);
  background: linear-gradient(
    138deg,
    rgba(3, 169, 244, 1) 15%,
    rgba(63, 180, 233, 1) 65%
  );
  position: relative;
  cursor: pointer;
  font-size: 17px;
  padding: 0.7em 0.7em;
  border-radius: 50px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.tooltip-container:hover {
  background: #fff;
  transition: all 0.6s;
}
.tooltip-container .text {
  display: flex;
  align-items: center;
  justify-content: center;
  fill: #fff;
  transition: all 0.2s;
}
.tooltip-container:hover .text {
  fill: rgb(3, 169, 244);
  transition: all 0.6s;
}

/* Inicio do tooltip twitter */
.tooltip1 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #03a9f4;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip1 {
  top: 150%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  border-radius: 50px;
  transform: translate(-50%, -5px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip1:hover {
  background: #03a9f4;
  fill: #fff;
}
/* Fim do tooltip twitter */

/* Inicio do tooltip facebook */
.tooltip2 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #0462df;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip2 {
  top: -120%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(-50%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tooltip-container:hover .tooltip2:hover {
  background: #0462df;
  fill: #fff;
}
/* Fim do tooltip facebook */

/* Inicio do tooltip whatsApp */
.tooltip3 {
  position: absolute;
  top: 100%;
  left: 60%;
  transform: translateX(80%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #1db954;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip3 {
  top: 10%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(85%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip3:hover {
  background: #1db954;
  fill: #fff;
}
/* Fim do tooltip whatsApp */

/* Inicio do tooltip Discord */
.tooltip4 {
  position: absolute;
  top: 100%;
  left: -190%;
  transform: translateX(70%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #8c9eff;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip4 {
  top: 10%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(70%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip4:hover {
  background: #8c9eff;
  fill: #fff;
}
/* Fim do tooltip Discord */

/* Inicio do tooltip pinterest */
.tooltip5 {
  position: absolute;
  top: 100%;
  left: -145%;
  transform: translateX(70%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #bd081c;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip5 {
  top: -78%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(70%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip5:hover {
  background: #bd081c;
  fill: #fff;
}
/* Fim do tooltip pinterest */

/* Inicio do tooltip dribbble */
.tooltip6 {
  position: absolute;
  top: 100%;
  left: 35%;
  transform: translateX(70%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #ea4c89;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip6 {
  top: -79%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(70%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip6:hover {
  background: #ea4c89;
  fill: #fff;
}
/* Fim do tooltip dribbble */

/* Inicio do tooltip github */
.tooltip7 {
  position: absolute;
  top: 100%;
  left: 39%;
  transform: translateX(70%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #000;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip7 {
  top: 104%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(70%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip7:hover {
  background: #000;
  fill: #fff;
}
/* Fim do tooltip github */

/* Inicio do tooltip reddit */
.tooltip8 {
  position: absolute;
  top: 100%;
  left: -150%;
  transform: translateX(70%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #ff4500;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip8 {
  top: 101%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(70%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip8:hover {
  background: #ff4500;
  fill: #fff;
}
/* Fim do tooltip reddit */

/* Inicio do tooltip fixo */
.tooltip9 {
  position: absolute;
  top: 0;
  left: -115%;
  opacity: 0;
  visibility: hidden;
  width: 150px;
  height: 150px;
  z-index: -1;
}

.tooltip-container:hover .tooltip9 {
  top: -110%;
  opacity: 1;
  visibility: visible;
  border-radius: 50%;
  z-index: -1;
}
/* Fim do tooltip fixo */
/* Por meio desse ultimo tooltip todos os outros podem
ficar fixos quando houver no principal, para vê-lo dê um
background black acima*/

</style>
    

================================================
FILE: Tooltips/Tsiangana_thin-cougar-23.html
================================================
<div class="tooltip-container">
  <span class="tooltip">Discover</span>
  <span class="text">
    <div class="borde-back">
      <div class="icon">
        <svg
          viewBox="0 0 16 16"
          class="bi bi-discord"
          height="23"
          width="23"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"
          ></path>
        </svg>
      </div>
    </div>
  </span>
</div>

<style>
/* From Uiverse.io by Tsiangana  - Tags: tooltip, gradient, hover, space, modern */
/* This is an example, feel free to delete this code */
.tooltip-container {
  position: relative;
  background-color: #ff3cac;
  background-image: linear-gradient(
    225deg,
    #ff3cac 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  /*padding: 0.7em 1.8em;*/
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  fill: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.tooltip-container .borde-back {
  width: 60px;
  height: 60px;
  background-color: #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: none;
}

.tooltip-container .icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background-color: #ff3cac;
  background-image: linear-gradient(
    225deg,
    #ff3cac 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
  cursor: pointer;
}

.tooltip {
  position: absolute;
  top: -2;
  left: -45px; /* Altere a posição inicial para a esquerda, fora da tela */
  transform: translateX(
    -32%
  ); /* Usando translateX para controlar a transição da esquerda para a direita */
  width: 160px;
  height: 52px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.6s;
  border-radius: 50px;
  background-color: #ff3cac;
  background-image: linear-gradient(
    225deg,
    #ff3cac 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
  display: flex;
  align-items: center;
  justify-content: right;
  padding-right: 16px;
  color: #fff;
  font-size: 18px;
  font-family: sans-serif;
  font-weight: 800px;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  right: -0.2em; /* Mude para a direita */
  top: 50%; /* Altere o topo para o meio da tooltip */
  transform: translateY(-50%) rotate(45deg); /* Use translateY para centralizar verticalmente */
  background: var(--background);
}

.tooltip-container:hover .tooltip {
  left: 100%; /* Altere para a posição desejada (a direita) */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: -10;
}
.tooltip-container:hover {
  transform: translateX(-50px);
  transition: 0.5s linear;
}

</style>
    

================================================
FILE: Tooltips/Yassin6up_rare-goose-44.html
================================================
<div class="tooltip-container">
  <span class="tooltip">Uiverse.io</span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by Yassin6up  - Tags: simple, material design, tooltip, subscription, 3d, action, black */
/* This is an example, feel free to delete this code */
.tooltip-container {
  --background: #22d3ee;
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  border-radius: 10px;
  color: white;
  box-shadow: 0 0 10px var(--background);
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background: var(--background);
  border-radius: 10px;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: var(--background);
}

.tooltip-container:hover .tooltip {
  top: -100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: 1s animated infinite alternate;
}

@keyframes animated {
  from {
    transform: translate(0) translateY(10px);
  }
  to {
    transform: translate(-100%) translateY(0);
  }
}

</style>
    

================================================
FILE: Tooltips/Yaya12085_average-earwig-11.html
================================================
<div class="tooltip-container">
  <span class="tooltip">Uiverse.io</span>
  <span class="text">@</span>
</div>

<style>
/* From Uiverse.io by Yaya12085  - Tags: tooltip, icon, message, custom */
.tooltip-container {
  height: 70px;
  width: 110px;
  border-radius: 5px;
  background-color: #fff;
  background-image: linear-gradient(
    to left bottom,
    #f2f5f8,
    #ecf1f2,
    #e7eceb,
    #e3e7e4,
    #e1e2de
  );
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.151);
  position: relative;
  transition: transform 0.3s ease;
}

.tooltip-container::before {
  position: absolute;
  content: "";
  top: -50%;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  border-radius: 5px;
  background-color: fff;
  background-image: linear-gradient(
    to left bottom,
    #f2f5f8,
    #e4eaec,
    #d8dfde,
    #cdd3cf,
    #c5c7c1
  );
  width: 100%;
  height: 50%;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(-150deg) translateY(-110%);
  transition: transform 0.3s ease;
}

.tooltip-container .text {
  color: rgb(32, 30, 30);
  font-weight: bold;
  font-size: 40px;
}

.tooltip {
  position: absolute;
  top: -20px;
  opacity: 0;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.05) 1px, white 1px),
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, white 1px),
    linear-gradient(-90deg, rgba(0, 0, 0, 0.04) 1px, white 1px),
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, white 1px),
    linear-gradient(white 3px, #f2f2f2 3px, #f2f2f2 78px, white 78px),
    linear-gradient(-90deg, #aaa 1px, white 1px),
    linear-gradient(-90deg, white 3px, #f2f2f2 3px, #f2f2f2 78px, white 78px),
    linear-gradient(#aaa 1px, white 1px), #f2f2f2;
  background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px,
    80px 80px, 80px 80px;
  padding: 5px 10px;
  border: 1px solid rgb(206, 204, 204);

  height: 70px;
  width: 110px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 0.2s;
  pointer-events: none;
  letter-spacing: 0.5px;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 10px salmon;
}
.tooltip-container:hover {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.tooltip-container:hover::before {
  transform: rotateY(0);
  background-image: none;
  background-color: white;
}

.tooltip-container:hover .tooltip {
  top: -90px;
  opacity: 1;
  transition-duration: 0.3s;
}

</style>
    

================================================
FILE: Tooltips/ahmedyasserdev_wise-newt-71.html
================================================
<!-- From Uiverse.io by ahmedyasserdev  - Tags: tooltip, tailwind, tailwindbutton, tailwindcss -->
<button
  class="group relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-blue-500 to-green-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800"
>
  <span
    class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0"
    >Hover For Tooltip</span
  >
  <div class="hidden group-hover:block">
    <div
      class="group absolute -top-12 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center rounded-sm text-center text-sm text-white bg-purple-800"
    >
      <div class="rounded-sm bg-black py-1 px-2">
        <p class="whitespace-nowrap">This is a fancy tooltip.</p>
      </div>
      <div
        class="h-0 w-fit border-l-8 border-r-8 border-t-8 border-transparent border-t-black"
      ></div>
    </div>
  </div>
</button>


    

================================================
FILE: Tooltips/akshat-patel28_cold-chicken-82.html
================================================
<div class="tooltip-container">
  <span class="tooltip-1">Create your own designs.</span>
  <span class="tooltip-2">Find creative elements.</span>
  <span class="tooltip-3">Participate in challenges.</span>
  <span>UIVERSE</span>
</div>

<style>
/* From Uiverse.io by akshat-patel28  - Tags: tooltip, colorful, color, html, css, css effect, multicolor, button hover effect  */
.tooltip-container {
  position: relative;
  background: #f80254;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 14px 26px;
  border-radius: 5px;
  text-align: center;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.62),
    inset 0px -2px 3px rgba(0, 0, 0, 0.48), inset 1px 1px 4px #ffffff,
    rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
}

.tooltip-1,
.tooltip-2,
.tooltip-3 {
  position: absolute;
  transform: translateX(-50%);
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  border-radius: 8px 8px 8px 8px;
  background: #ffdb0f;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.62),
    inset 0px -2px 3px rgba(0, 0, 0, 0.48), inset 1px 1px 4px #ffffff,
    rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  min-width: 180px;
  padding: 8px;
  color: #ac0039;
  font-size: 11px;
}
.tooltip-1 {
  top: 0%;
  left: 50%;
  width: 200px;
}
.tooltip-2 {
  left: 100%;
}

.tooltip-3 {
  left: 0;
}
.tooltip-container:hover .tooltip-1 {
  top: -100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.tooltip-container:hover .tooltip-2 {
  left: -100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.tooltip-container:hover .tooltip-3 {
  left: 200%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

================================================
FILE: Tooltips/andrew-demchenk0_bad-sloth-57.html
================================================
<div class="container">
  <input type="checkbox" id="showCheckbox" class="toggle-checkbox" />
  <label for="showCheckbox" class="toggle-label">Show Tooltip</label>

  <div id="popup" class="popup">
    <label for="showCheckbox" class="close-label"></label>
    <p>I am looking for a job. Trainee/junior React dev. <br />📍Ukraine.</p>
  </div>
</div>

<style>
/* From Uiverse.io by andrew-demchenk0  - Tags: tooltip, animation, action, green, button, hover, click, border */
.container {
  position: relative;
  --main-color: #19e68c;
  --dark-color: #222;
  --bg-light: #fff;
  --dark-alternative: #666;
}

.popup {
  display: none;
  padding: 10px 20px;
  position: absolute;
  width: 200px;
  top: -100%;
  left: -25%;
  background-color: var(--bg-light);
  border: 1.5px solid var(--dark-alternative);
  border-radius: 2px;
  animation: slideIn 1s;
}

.toggle-checkbox {
  display: none;
}

.toggle-label {
  position: relative;
  padding: 10px;
  background-color: var(--main-color);
  color: var(--dark-color);
  font-weight: 600;
  cursor: help;
  display: inline-block;
  border: 2px solid var(--dark-color);
  border-radius: 3px;
  box-shadow: 2px 2px var(--dark-color);
  transition: 0.5s;
}

.toggle-label::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: pulsate 0.7s infinite;
}

.toggle-label:hover::before {
  animation: none;
}

.toggle-label:active {
  transform: translate(2px, 2px);
  box-shadow: 0px 0px var(--dark-color);
}

.close-label {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
}
.close-label::before {
  content: "⊗";
  font-size: 22px;
  position: absolute;
  top: -7px;
  left: 0;
  color: var(--dark-alternative);
  cursor: pointer;
}
.toggle-checkbox:checked ~ .popup {
  display: block;
}
.toggle-checkbox:checked ~ .toggle-label {
  opacity: 0;
}

@keyframes slideIn {
  0% {
    transform: translateX(200%);
    opacity: 0;
  }
  50% {
    transform: translateX(200%);
    opacity: 0;
  }
  70% {
    transform: translateX(-10%);
    opacity: 0.5;
  }
  80% {
    transform: translateX(5%);
  }
  90% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pulsate {
  0% {
    box-shadow: 0 0 -5px rgba(255, 255, 255, 1);
  }
  50% {
    box-shadow: 0 0 10px var(--dark-color);
  }
  100% {
    box-shadow: 0 0 -5px rgb(255, 255, 255);
  }
}

</style>
    

================================================
FILE: Tooltips/ayman-ashine_curvy-starfish-3.html
================================================
<!-- From Uiverse.io by ayman-ashine  - Tags: tooltip, tailwind, tailwindbutton -->
<div
  class="group relative flex justify-center items-center text-zinc-600 text-sm font-bold"
>
  <div
    class="absolute opacity-0 group-hover:opacity-100 group-hover:-translate-y-[150%] -translate-y-[300%] duration-500 group-hover:delay-500 skew-y-[20deg] group-hover:skew-y-0 shadow-md"
  >
    <div class="bg-lime-200 flex items-center gap-1 p-2 rounded-md">
      <svg
        fill="none"
        viewBox="0 0 24 24"
        height="20px"
        width="20px"
        xmlns="http://www.w3.org/2000/svg"
        class="stroke-zinc-600"
      >
        <circle stroke-linejoin="round" r="9" cy="12" cx="12"></circle>
        <path
          stroke-linejoin="round"
          d="M12 3C12 3 8.5 6 8.5 12C8.5 18 12 21 12 21"
        ></path>
        <path
          stroke-linejoin="round"
          d="M12 3C12 3 15.5 6 15.5 12C15.5 18 12 21 12 21"
        ></path>
        <path stroke-linejoin="round" d="M3 12H21"></path>
        <path stroke-linejoin="round" d="M19.5 7.5H4.5"></path>
        <g filter="url(#filter0_d_15_556)">
          <path stroke-linejoin="round" d="M19.5 16.5H4.5"></path>
        </g>
        <defs>
          <filter
            color-interpolation-filters="sRGB"
            filterUnits="userSpaceOnUse"
            height="3"
            width="17"
            y="16"
            x="3.5"
            id="filter0_d_15_556"
          >
            <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
            <feColorMatrix
              result="hardAlpha"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
              type="matrix"
              in="SourceAlpha"
            ></feColorMatrix>
            <feOffset dy="1"></feOffset>
            <feGaussianBlur stdDeviation="0.5"></feGaussianBlur>
            <feColorMatrix
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
              type="matrix"
            ></feColorMatrix>
            <feBlend
              result="effect1_dropShadow_15_556"
              in2="BackgroundImageFix"
              mode="normal"
            ></feBlend>
            <feBlend
              result="shape"
              in2="effect1_dropShadow_15_556"
              in="SourceGraphic"
              mode="normal"
            ></feBlend>
          </filter>
        </defs>
      </svg>
      <span>Uiverse.io</span>
    </div>
    <div
      class="shadow-md bg-lime-200 absolute bottom-0 translate-y-1/2 left-1/2 translate-x-full rotate-45 p-1"
    ></div>
    <div
      class="rounded-md bg-white group-hover:opacity-0 group-hover:scale-[115%] group-hover:delay-700 duration-500 w-full h-full absolute top-0 left-0"
    >
      <div
        class="border-b border-r border-white bg-white absolute bottom-0 translate-y-1/2 left-1/2 translate-x-full rotate-45 p-1"
      ></div>
    </div>
  </div>

  <div
    class="shadow-md flex items-center group-hover:gap-2 bg-gradient-to-br from-lime-200 to-yellow-200 p-3 rounded-full cursor-pointer duration-300"
  >
    <svg
      fill="none"
      viewBox="0 0 24 24"
      height="20px"
      width="20px"
      xmlns="http://www.w3.org/2000/svg"
      class="fill-zinc-600"
    >
      <path
        stroke-linejoin="round"
        stroke-linecap="round"
        d="M15.4306 7.70172C7.55045 7.99826 3.43929 15.232 2.17021 19.3956C2.07701 19.7014 2.31139 20 2.63107 20C2.82491 20 3.0008 19.8828 3.08334 19.7074C6.04179 13.4211 12.7066 12.3152 15.514 12.5639C15.7583 12.5856 15.9333 12.7956 15.9333 13.0409V15.1247C15.9333 15.5667 16.4648 15.7913 16.7818 15.4833L20.6976 11.6784C20.8723 11.5087 20.8993 11.2378 20.7615 11.037L16.8456 5.32965C16.5677 4.92457 15.9333 5.12126 15.9333 5.61253V7.19231C15.9333 7.46845 15.7065 7.69133 15.4306 7.70172Z"
      ></path></svg
    ><span class="text-[0px] group-hover:text-sm duration-300"
      >Check Our Website</span
    >
  </div>
</div>


    

================================================
FILE: Tooltips/ayman-ashine_terrible-puma-8.html
================================================
<!-- From Uiverse.io by ayman-ashine  - Tags: tooltip, tailwindcss, flex-tooltip -->
<div class="flex flex-col items-center gap-2">
  <div class="group relative bg-zinc-300 p-2 rounded-full">
    <span>Top</span>
    <div
      class="bg-zinc-800 p-2 rounded-md group-hover:flex hidden absolute -top-2 -translate-y-full left-1/2 -translate-x-1/2"
    >
      <span class="text-zinc-400 whitespace-nowrap">Info</span>
      <div
        class="bg-inherit rotate-45 p-1 absolute bottom-0 translate-y-1/2 left-1/2 -translate-x-1/2"
      ></div>
    </div>
  </div>

  <div class="group relative bg-zinc-300 p-2 rounded-full">
    <span>Left</span>
    <div
      class="bg-zinc-800 p-2 rounded-md group-hover:flex hidden absolute top-1/2 -translate-y-1/2 -left-2 -translate-x-full"
    >
      <span class="text-zinc-400 whitespace-nowrap">Info</span>
      <div
        class="bg-inherit rotate-45 p-1 absolute top-1/2 -translate-y-1/2 right-0 translate-x-1/2"
      ></div>
    </div>
  </div>

  <div class="group relative bg-zinc-300 p-2 rounded-full">
    <span>Right</span>
    <div
      class="bg-zinc-800 p-2 rounded-md group-hover:flex hidden absolute top-1/2 -translate-y-1/2 -right-2 translate-x-full"
    >
      <span class="text-zinc-400 whitespace-nowrap">Info</span>
      <div
        class="bg-inherit rotate-45 p-1 absolute top-1/2 -translate-y-1/2 left-0 -translate-x-1/2"
      ></div>
    </div>
  </div>

  <div class="group relative bg-zinc-300 p-2 rounded-full">
    <span>Bottom</span>
    <div
      class="bg-zinc-800 p-2 rounded-md group-hover:flex hidden absolute -bottom-2 translate-y-full left-1/2 -translate-x-1/2"
    >
      <span class="text-zinc-400 whitespace-nowrap">Info</span>
      <div
        class="bg-inherit rotate-45 p-1 absolute top-0 -translate-y-1/2 left-1/2 -translate-x-1/2"
      ></div>
    </div>
  </div>
</div>


    

================================================
FILE: Tooltips/barisdogansutcu_plastic-dolphin-67.html
================================================
<div class="brick one"></div>
<div class="tooltip-mario-container">
  <div class="box"></div>
  <div class="mush"></div>
</div>
<div class="brick two"></div>

<style>
/* From Uiverse.io by barisdogansutcu  - Tags: tooltip, mario, super mario */
.brick {
  height: 2px;
  width: 2px;
  box-shadow: 2px 2px 0px #ff9999, 4px 2px 0px #ff9999, 6px 2px 0px #ff9999,
    8px 2px 0px #ff9999, 10px 2px 0px #ff9999, 12px 2px 0px #ff9999,
    14px 2px 0px #ff9999, 16px 2px 0px #ff9999, 18px 2px 0px #ff9999,
    20px 2px 0px #ff9999, 22px 2px 0px #ff9999, 24px 2px 0px #ff9999,
    26px 2px 0px #ff9999, 28px 2px 0px #ff9999, 30px 2px 0px #ff9999,
    32px 2px 0px #ff9999, 2px 4px 0px #cc3300, 4px 4px 0px #cc3300,
    6px 4px 0px #cc3300, 8px 4px 0px #cc3300, 10px 4px 0px #cc3300,
    12px 4px 0px #cc3300, 14px 4px 0px #cc3300, 16px 4px 0px #000,
    18px 4px 0px #cc3300, 20px 4px 0px #cc3300, 22px 4px 0px #cc3300,
    24px 4px 0px #cc3300, 26px 4px 0px #cc3300, 28px 4px 0px #cc3300,
    30px 4px 0px #cc3300, 32px 4px 0px #000, 2px 6px 0px #cc3300,
    4px 6px 0px #cc3300, 6px 6px 0px #cc3300, 8px 6px 0px #cc3300,
    10px 6px 0px #cc3300, 12px 6px 0px #cc3300, 14px 6px 0px #cc3300,
    16px 6px 0px #000, 18px 6px 0px #cc3300, 20px 6px 0px #cc3300,
    22px 6px 0px #cc3300, 24px 6px 0px #cc3300, 26px 6px 0px #cc3300,
    28px 6px 0px #cc3300, 30px 6px 0px #cc3300, 32px 6px 0px #000,
    2px 8px 0px #000, 4px 8px 0px #000, 6px 8px 0px #000, 8px 8px 0px #000,
    10px 8px 0px #000, 12px 8px 0px #000, 14px 8px 0px #000, 16px 8px 0px #000,
    18px 8px 0px #000, 20px 8px 0px #000, 22px 8px 0px #000, 24px 8px 0px #000,
    26px 8px 0px #000, 28px 8px 0px #000, 30px 8px 0px #000, 32px 8px 0px #000,
    2px 10px 0px #cc3300, 4px 10px 0px #cc3300, 6px 10px 0px #cc3300,
    8px 10px 0px #000, 10px 10px 0px #cc3300, 12px 10px 0px #cc3300,
    14px 10px 0px #cc3300, 16px 10px 0px #cc3300, 18px 10px 0px #cc3300,
    20px 10px 0px #cc3300, 22px 10px 0px #cc3300, 24px 10px 0px #000,
    26px 10px 0px #cc3300, 28px 10px 0px #cc3300, 30px 10px 0px #cc3300,
    32px 10px 0px #cc3300, 2px 12px 0px #cc3300, 4px 12px 0px #cc3300,
    6px 12px 0px #cc3300, 8px 12px 0px #000, 10px 12px 0px #cc3300,
    12px 12px 0px #cc3300, 14px 12px 0px #cc3300, 16px 12px 0px #cc3300,
    18px 12px 0px #cc3300, 20px 12px 0px #cc3300, 22px 12px 0px #cc3300,
    24px 12px 0px #000, 26px 12px 0px #cc3300, 28px 12px 0px #cc3300,
    30px 12px 0px #cc3300, 32px 12px 0px #cc3300, 2px 14px 0px #cc3300,
    4px 14px 0px #cc3300, 6px 14px 0px #cc3300, 8px 14px 0px #000,
    10px 14px 0px #cc3300, 12px 14px 0px #cc3300, 14px 14px 0px #cc3300,
    16px 14px 0px #cc3300, 18px 14px 0px #cc3300, 20px 14px 0px #cc3300,
    22px 14px 0px #cc3300, 24px 14px 0px #000, 26px 14px 0px #cc3300,
    28px 14px 0px #cc3300, 30px 14px 0px #cc3300, 32px 14px 0px #cc3300,
    2px 16px 0px #000, 4px 16px 0px #000, 6px 16px 0px #000, 8px 16px 0px #000,
    10px 16px 0px #000, 12px 16px 0px #000, 14px 16px 0px #000,
    16px 16px 0px #000, 18px 16px 0px #000, 20px 16px 0px #000,
    22px 16px 0px #000, 24px 16px 0px #000, 26px 16px 0px #000,
    28px 16px 0px #000, 30px 16px 0px #000, 32px 16px 0px #000,
    2px 18px 0px #cc3300, 4px 18px 0px #cc3300, 6px 18px 0px #cc3300,
    8px 18px 0px #cc3300, 10px 18px 0px #cc3300, 12px 18px 0px #cc3300,
    14px 18px 0px #cc3300, 16px 18px 0px #000, 18px 18px 0px #cc3300,
    20px 18px 0px #cc3300, 22px 18px 0px #cc3300, 24px 18px 0px #cc3300,
    26px 18px 0px #cc3300, 28px 18px 0px #cc3300, 30px 18px 0px #cc3300,
    32px 18px 0px #000, 2px 20px 0px #cc3300, 4px 20px 0px #cc3300,
    6px 20px 0px #cc3300, 8px 20px 0px #cc3300, 10px 20px 0px #cc3300,
    12px 20px 0px #cc3300, 14px 20px 0px #cc3300, 16px 20px 0px #000,
    18px 20px 0px #cc3300, 20px 20px 0px #cc3300, 22px 20px 0px #cc3300,
    24px 20px 0px #cc3300, 26px 20px 0px #cc3300, 28px 20px 0px #cc3300,
    30px 20px 0px #cc3300, 32px 20px 0px #000, 2px 22px 0px #cc3300,
    4px 22px 0px #cc3300, 6px 22px 0px #cc3300, 8px 22px 0px #cc3300,
    10px 22px 0px #cc3300, 12px 22px 0px #cc3300, 14px 22px 0px #cc3300,
    16px 22px 0px #000, 18px 22px 0px #cc3300, 20px 22px 0px #cc3300,
    22px 22px 0px #cc3300, 24px 22px 0px #cc3300, 26px 22px 0px #cc3300,
    28px 22px 0px #cc3300, 30px 22px 0px #cc3300, 32px 22px 0px #000,
    2px 24px 0px #000, 4px 24px 0px #000, 6px 24px 0px #000, 8px 24px 0px #000,
    10px 24px 0px #000, 12px 24px 0px #000, 14px 24px 0px #000,
    16px 24px 0px #000, 18px 24px 0px #000, 20px 24px 0px #000,
    22px 24px 0px #000, 24px 24px 0px #000, 26px 24px 0px #000,
    28px 24px 0px #000, 30px 24px 0px #000, 32px 24px 0px #000,
    2px 26px 0px #cc3300, 4px 26px 0px #cc3300, 6px 26px 0px #cc3300,
    8px 26px 0px #000, 10px 26px 0px #cc3300, 12px 26px 0px #cc3300,
    14px 26px 0px #cc3300, 16px 26px 0px #cc3300, 18px 26px 0px #cc3300,
    20px 26px 0px #cc3300, 22px 26px 0px #cc3300, 24px 26px 0px #000,
    26px 26px 0px #cc3300, 28px 26px 0px #cc3300, 30px 26px 0px #cc3300,
    32px 26px 0px #cc3300, 2px 28px 0px #cc3300, 4px 28px 0px #cc3300,
    6px 28px 0px #cc3300, 8px 28px 0px #000, 10px 28px 0px #cc3300,
    12px 28px 0px #cc3300, 14px 28px 0px #cc3300, 16px 28px 0px #cc3300,
    18px 28px 0px #cc3300, 20px 28px 0px #cc3300, 22px 28px 0px #cc3300,
    24px 28px 0px #000, 26px 28px 0px #cc3300, 28px 28px 0px #cc3300,
    30px 28px 0px #cc3300, 32px 28px 0px #cc3300, 2px 30px 0px #cc3300,
    4px 30px 0px #cc3300, 6px 30px 0px #cc3300, 8px 30px 0px #000,
    10px 30px 0px #cc3300, 12px 30px 0px #cc3300, 14px 30px 0px #cc3300,
    16px 30px 0px #cc3300, 18px 30px 0px #cc3300, 20px 30px 0px #cc3300,
    22px 30px 0px #cc3300, 24px 30px 0px #000, 26px 30px 0px #cc3300,
    28px 30px 0px #cc3300, 30px 30px 0px #cc3300, 32px 30px 0px #cc3300,
    2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000, 8px 32px 0px #000,
    10px 32px 0px #000, 12px 32px 0px #000, 14px 32px 0px #000,
    16px 32px 0px #000, 18px 32px 0px #000, 20px 32px 0px #000,
    22px 32px 0px #000, 24px 32px 0px #000, 26px 32px 0px #000,
    28px 32px 0px #000, 30px 32px 0px #000, 32px 32px 0px #000;
}
.brick.one {
  transform: translateX(-60px);
}
.mush {
  height: 2px;
  width: 2px;
  box-shadow: 14px 2px 0px #fc9838, 16px 2px 0px #fc9838, 18px 2px 0px #fc9838,
    20px 2px 0px #fc9838, 12px 4px 0px #fc9838, 14px 4px 0px #fc9838,
    16px 4px 0px #fc9838, 18px 4px 0px #fc9838, 20px 4px 0px #d82800,
    22px 4px 0px #d82800, 10px 6px 0px #fc9838, 12px 6px 0px #fc9838,
    14px 6px 0px #fc9838, 16px 6px 0px #fc9838, 18px 6px 0px #d82800,
    20px 6px 0px #d82800, 22px 6px 0px #d82800, 24px 6px 0px #d82800,
    8px 8px 0px #fc9838, 10px 8px 0px #fc9838, 12px 8px 0px #fc9838,
    14px 8px 0px #fc9838, 16px 8px 0px #fc9838, 18px 8px 0px #d82800,
    20px 8px 0px #d82800, 22px 8px 0px #d82800, 24px 8px 0px #d82800,
    26px 8px 0px #d82800, 6px 10px 0px #fc9838, 8px 10px 0px #fc9838,
    10px 10px 0px #fc9838, 12px 10px 0px #fc9838, 14px 10px 0px #fc9838,
    16px 10px 0px #fc9838, 18px 10px 0px #fc9838, 20px 10px 0px #d82800,
    22px 10px 0px #d82800, 24px 10px 0px #d82800, 26px 10px 0px #fc9838,
    28px 10px 0px #fc9838, 4px 12px 0px #fc9838, 6px 12px 0px #fc9838,
    8px 12px 0px #d82800, 10px 12px 0px #d82800, 12px 12px 0px #d82800,
    14px 12px 0px #fc9838, 16px 12px 0px #fc9838, 18px 12px 0px #fc9838,
    20px 12px 0px #fc9838, 22px 12px 0px #fc9838, 24px 12px 0px #fc9838,
    26px 12px 0px #fc9838, 28px 12px 0px #fc9838, 30px 12px 0px #fc9838,
    4px 14px 0px #fc9838, 6px 14px 0px #d82800, 8px 14px 0px #d82800,
    10px 14px 0px #d82800, 12px 14px 0px #d82800, 14px 14px 0px #d82800,
    16px 14px 0px #fc9838, 18px 14px 0px #fc9838, 20px 14px 0px #fc9838,
    22px 14px 0px #fc9838, 24px 14px 0px #fc9838, 26px 14px 0px #fc9838,
    28px 14px 0px #fc9838, 30px 14px 0px #fc9838, 2px 16px 0px #fc9838,
    4px 16px 0px #fc9838, 6px 16px 0px #d82800, 8px 16px 0px #d82800,
    10px 16px 0px #d82800, 12px 16px 0px #d82800, 14px 16px 0px #d82800,
    16px 16px 0px #fc9838, 18px 16px 0px #fc9838, 20px 16px 0px #fc9838,
    22px 16px 0px #fc9838, 24px 16px 0px #fc9838, 26px 16px 0px #d82800,
    28px 16px 0px #d82800, 30px 16px 0px #fc9838, 32px 16px 0px #fc9838,
    2px 18px 0px #fc9838, 4px 18px 0px #fc9838, 6px 18px 0px #d82800,
    8px 18px 0px #d82800, 10px 18px 0px #d82800, 12px 18px 0px #d82800,
    14px 18px 0px #d82800, 16px 18px 0px #fc9838, 18px 18px 0px #fc9838,
    20px 18px 0px #fc9838, 22px 18px 0px #fc9838, 24px 18px 0px #fc9838,
    26px 18px 0px #d82800, 28px 18px 0px #d82800, 30px 18px 0px #d82800,
    32px 18px 0px #fc9838, 2px 20px 0px #fc9838, 4px 20px 0px #fc9838,
    6px 20px 0px #fc9838, 8px 20px 0px #d82800, 10px 20px 0px #d82800,
    12px 20px 0px #d82800, 14px 20px 0px #fc9838, 16px 20px 0px #fc9838,
    18px 20px 0px #fc9838, 20px 20px 0px #fc9838, 22px 20px 0px #fc9838,
    24px 20px 0px #fc9838, 26px 20px 0px #fc9838, 28px 20px 0px #d82800,
    30px 20px 0px #d82800, 32px 20px 0px #fc9838, 2px 22px 0px #fc9838,
    4px 22px 0px #fc9838, 6px 22px 0px #fc9838, 8px 22px 0px #fc9838,
    10px 22px 0px #fc9838, 12px 22px 0px #fc9838, 14px 22px 0px #fc9838,
    16px 22px 0px #fc9838, 18px 22px 0px #fc9838, 20px 22px 0px #fc9838,
    22px 22px 0px #fc9838, 24px 22px 0px #fc9838, 26px 22px 0px #fc9838,
    28px 22px 0px #fc9838, 30px 22px 0px #fc9838, 32px 22px 0px #fc9838,
    4px 24px 0px #fc9838, 6px 24px 0px #d82800, 8px 24px 0px #d82800,
    10px 24px 0px #d82800, 12px 24px 0px #fff, 14px 24px 0px #fff,
    16px 24px 0px #fff, 18px 24px 0px #fff, 20px 24px 0px #fff,
    22px 24px 0px #fff, 24px 24px 0px #d82800, 26px 24px 0px #d82800,
    28px 24px 0px #d82800, 30px 24px 0px #fc9838, 10px 26px 0px #fff,
    12px 26px 0px #fff, 14px 26px 0px #fff, 16px 26px 0px #fff,
    18px 26px 0px #fff, 20px 26px 0px #fff, 22px 26px 0px #fff,
    24px 26px 0px #fff, 10px 28px 0px #fff, 12px 28px 0px #fff,
    14px 28px 0px #fff, 16px 28px 0px #fff, 18px 28px 0px #fff,
    20px 28px 0px #fff, 22px 28px 0px #fc9838, 24px 28px 0px #fff,
    10px 30px 0px #fff, 12px 30px 0px #fff, 14px 30px 0px #fff,
    16px 30px 0px #fff, 18px 30px 0px #fff, 20px 30px 0px #fff,
    22px 30px 0px #fc9838, 24px 30px 0px #fff, 12px 32px 0px #fff,
    14px 32px 0px #fff, 16px 32px 0px #fff, 18px 32px 0px #fff,
    20px 32px 0px #fc9838, 22px 32px 0px #fff;
  transform: translate(-0px, -0px);
  z-index: -1;
  opacity: 0;
}
.box {
  position: absolute;
  background-color: rgba(46, 37, 37, 0);
  z-index: 3;
  width: 34px;
  height: 34px;
}
.box:hover + .mush {
  animation: mush 0.5s linear forwards;
  opacity: 1;
}
@keyframes mush {
  0% {
    transform: scale(0.8) translate(-0px, -0px);
  }
  50% {
    transform: scale(1.1) translate(-0px, -80px);
  }
  100% {
    transform: scale(1.1) translate(-0px, -35px);
  }
}
.tooltip-mario-container {
  height: 2px;
  width: 2px;
  box-shadow: 4px 2px 0px #ce3100, 6px 2px 0px #ce3100, 8px 2px 0px #ce3100,
    10px 2px 0px #ce3100, 12px 2px 0px #ce3100, 14px 2px 0px #ce3100,
    16px 2px 0px #ce3100, 18px 2px 0px #ce3100, 20px 2px 0px #ce3100,
    22px 2px 0px #ce3100, 24px 2px 0px #ce3100, 26px 2px 0px #ce3100,
    28px 2px 0px #ce3100, 30px 2px 0px #ce3100, 2px 4px 0px #ce3100,
    4px 4px 0px #ff9c31, 6px 4px 0px #ff9c31, 8px 4px 0px #ff9c31,
    10px 4px 0px #ff9c31, 12px 4px 0px #ff9c31, 14px 4px 0px #ff9c31,
    16px 4px 0px #ff9c31, 18px 4px 0px #ff9c31, 20px 4px 0px #ff9c31,
    22px 4px 0px #ff9c31, 24px 4px 0px #ff9c31, 26px 4px 0px #ff9c31,
    28px 4px 0px #ff9c31, 30px 4px 0px #ff9c31, 32px 4px 0px #000,
    2px 6px 0px #ce3100, 4px 6px 0px #ff9c31, 6px 6px 0px #000,
    8px 6px 0px #ff9c31, 10px 6px 0px #ff9c31, 12px 6px 0px #ff9c31,
    14px 6px 0px #ff9c31, 16px 6px 0px #ff9c31, 18px 6px 0px #ff9c31,
    20px 6px 0px #ff9c31, 22px 6px 0px #ff9c31, 24px 6px 0px #ff9c31,
    26px 6px 0px #ff9c31, 28px 6px 0px #000, 30px 6px 0px #ff9c31,
    32px 6px 0px #000, 2px 8px 0px #ce3100, 4px 8px 0px #ff9c31,
    6px 8px 0px #ff9c31, 8px 8px 0px #ff9c31, 10px 8px 0px #ff9c31,
    12px 8px 0px #ce3100, 14px 8px 0px #ce3100, 16px 8px 0px #ce3100,
    18px 8px 0px #ce3100, 20px 8px 0px #ce3100, 22px 8px 0px #ff9c31,
    24px 8px 0px #ff9c31, 26px 8px 0px #ff9c31, 28px 8px 0px #ff9c31,
    30px 8px 0px #ff9c31, 32px 8px 0px #000, 2px 10px 0px #ce3100,
    4px 10px 0px #ff9c31, 6px 10px 0px #ff9c31, 8px 10px 0px #ff9c31,
    10px 10px 0px #ce3100, 12px 10px 0px #ce3100, 14px 10px 0px #000,
    16px 10px 0px #000, 18px 10px 0px #000, 20px 10px 0px #ce3100,
    22px 10px 0px #ce3100, 24px 10px 0px #ff9c31, 26px 10px 0px #ff9c31,
    28px 10px 0px #ff9c31, 30px 10px 0px #ff9c31, 32px 10px 0px #000,
    2px 12px 0px #ce3100, 4px 12px 0px #ff9c31, 6px 12px 0px #ff9c31,
    8px 12px 0px #ff9c31, 10px 12px 0px #ce3100, 12px 12px 0px #ce3100,
    14px 12px 0px #000, 16px 12px 0px #ff9c31, 18px 12px 0px #ff9c31,
    20px 12px 0px #ce3100, 22px 12px 0px #ce3100, 24px 12px 0px #000,
    26px 12px 0px #ff9c31, 28px 12px 0px #ff9c31, 30px 12px 0px #ff9c31,
    32px 12px 0px #000, 2px 14px 0px #ce3100, 4px 14px 0px #ff9c31,
    6px 14px 0px #ff9c31, 8px 14px 0px #ff9c31, 10px 14px 0px #ce3100,
    12px 14px 0px #ce3100, 14px 14px 0px #000, 16px 14px 0px #ff9c31,
    18px 14px 0px #ff9c31, 20px 14px 0px #ce3100, 22px 14px 0px #ce3100,
    24px 14px 0px #000, 26px 14px 0px #ff9c31, 28px 14px 0px #ff9c31,
    30px 14px 0px #ff9c31, 32px 14px 0px #000, 2px 16px 0px #ce3100,
    4px 16px 0px #ff9c31, 6px 16px 0px #ff9c31, 8px 16px 0px #ff9c31,
    10px 16px 0px #ff9c31, 12px 16px 0px #000, 14px 16px 0px #000,
    16px 16px 0px #ff9c31, 18px 16px 0px #ce3100, 20px 16px 0px #ce3100,
    22px 16px 0px #ce3100, 24px 16px 0px #000, 26px 16px 0px #ff9c31,
    28px 16px 0px #ff9c31, 30px 16px 0px #ff9c31, 32px 16px 0px #000,
    2px 18px 0px #ce3100, 4px 18px 0px #ff9c31, 6px 18px 0px #ff9c31,
    8px 18px 0px #ff9c31, 10px 18px 0px #ff9c31, 12px 18px 0px #ff9c31,
    14px 18px 0px #ff9c31, 16px 18px 0px #ce3100, 18px 18px 0px #ce3100,
    20px 18px 0px #000, 22px 18px 0px #000, 24px 18px 0px #000,
    26px 18px 0px #ff9c31, 28px 18px 0px #ff9c31, 30px 18px 0px #ff9c31,
    32px 18px 0px #000, 2px 20px 0px #ce3100, 4px 20px 0px #ff9c31,
    6px 20px 0px #ff9c31, 8px 20px 0px #ff9c31, 10px 20px 0px #ff9c31,
    12px 20px 0px #ff9c31, 14px 20px 0px #ff9c31, 16px 20px 0px #ce3100,
    18px 20px 0px #ce3100, 20px 20px 0px #000, 22px 20px 0px #ff9c31,
    24px 20px 0px #ff9c31, 26px 20px 0px #ff9c31, 28px 20px 0px #ff9c31,
    30px 20px 0px #ff9c31, 32px 20px 0px #000, 2px 22px 0px #ce3100,
    4px 22px 0px #ff9c31, 6px 22px 0px #ff9c31, 8px 22px 0px #ff9c31,
    10px 22px 0px #ff9c31, 12px 22px 0px #ff9c31, 14px 22px 0px #ff9c31,
    16px 22px 0px #ff9c31, 18px 22px 0px #000, 20px 22px 0px #000,
    22px 22px 0px #ff9c31, 24px 22px 0px #ff9c31, 26px 22px 0px #ff9c31,
    28px 22px 0px #ff9c31, 30px 22px 0px #ff9c31, 32px 22px 0px #000,
    2px 24px 0px #ce3100, 4px 24px 0px #ff9c31, 6px 24px 0px #ff9c31,
    8px 24px 0px #ff9c31, 10px 24px 0px #ff9c31, 12px 24px 0px #ff9c31,
    14px 24px 0px #ff9c31, 16px 24px 0px #ce3100, 18px 24px 0px #ce3100,
    20px 24px 0px #ff9c31, 22px 24px 0px #ff9c31, 24px 24px 0px #ff9c31,
    26px 24px 0px #ff9c31, 28px 24px 0px #ff9c31, 30px 24px 0px #ff9c31,
    32px 24px 0px #000, 2px 26px 0px #ce3100, 4px 26px 0px #ff9c31,
    6px 26px 0px #ff9c31, 8px 26px 0px #ff9c31, 10px 26px 0px #ff9c31,
    12px 26px 0px #ff9c31, 14px 26px 0px #ff9c31, 16px 26px 0px #ce3100,
    18px 26px 0px #ce3100, 20px 26px 0px #000, 22px 26px 0px #ff9c31,
    24px 26px 0px #ff9c31, 26px 26px 0px #ff9c31, 28px 26px 0px #ff9c31,
    30px 26px 0px #ff9c31, 32px 26px 0px #000, 2px 28px 0px #ce3100,
    4px 28px 0px #ff9c31, 6px 28px 0px #000, 8px 28px 0px #ff9c31,
    10px 28px 0px #ff9c31, 12px 28px 0px #ff9c31, 14px 28px 0px #ff9c31,
    16px 28px 0px #ff9c31, 18px 28px 0px #000, 20px 28px 0px #000,
    22px 28px 0px #ff9c31, 24px 28px 0px #ff9c31, 26px 28px 0px #ff9c31,
    28px 28px 0px #000, 30px 28px 0px #ff9c31, 32px 28px 0px #000,
    2px 30px 0px #ce3100, 4px 30px 0px #ff9c31, 6px 30px 0px #ff9c31,
    8px 30px 0px #ff9c31, 10px 30px 0px #ff9c31, 12px 30px 0px #ff9c31,
    14px 30px 0px #ff9c31, 16px 30px 0px #ff9c31, 18px 30px 0px #ff9c31,
    20px 30px 0px #ff9c31, 22px 30px 0px #ff9c31, 24px 30px 0px #ff9c31,
    26px 30px 0px #ff9c31, 28px 30px 0px #ff9c31, 30px 30px 0px #ff9c31,
    32px 30px 0px #000, 2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000,
    8px 32px 0px #000, 10px 32px 0px #000, 12px 32px 0px #000,
    14px 32px 0px #000, 16px 32px 0px #000, 18px 32px 0px #000,
    20px 32px 0px #000, 22px 32px 0px #000, 24px 32px 0px #000,
    26px 32px 0px #000, 28px 32px 0px #000, 30px 32px 0px #000,
    32px 32px 0px #000;
  position: absolute;
  transform: translate(-30px);
  z-index: 3;
}

</style>
    

================================================
FILE: Tooltips/bociKond_terrible-emu-64.html
================================================
<div class="tooltip-container">
  <span class="tooltip">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 64 64"
      height="64"
      width="64"
      class="svg"
    >
      <path
        d="M50.27 6.44997C47.2255 5.1936 43.8836 4.84045 40.6437 5.43274C37.4039 6.02503 34.4031 7.5377 32 9.78997C23.57 2.35997 13.8 4.63997 8.05998 10.14C2.05998 15.88 -0.590017 26.14 7.68998 35.14C8.22998 35.83 31 58.46 31 58.46C31.2829 58.7415 31.6658 58.8995 32.065 58.8995C32.4641 58.8995 32.847 58.7415 33.13 58.46L56.34 35.21C58.4116 33.1493 59.9346 30.603 60.7702 27.8031C61.6058 25.0032 61.7275 22.0387 61.1241 19.1797C60.5207 16.3207 59.2114 13.6582 57.3156 11.4348C55.4197 9.21134 52.9976 7.49768 50.27 6.44997V6.44997Z"
      ></path>
    </svg>
    <svg
      viewBox="0 0 48 48"
      xmlns="http://www.w3.org/2000/svg"
      data-name="Layer 1"
      id="Layer_1"
      class="svg"
    >
      <path
        d="M42.455,31.235l-2.267-2.266a5.274,5.274,0,0,0-7.459,0l-1.3,1.3a3.287,3.287,0,0,1-4.132.409A35.791,35.791,0,0,1,17.322,20.7a3.283,3.283,0,0,1,.409-4.132l1.3-1.3a5.274,5.274,0,0,0,0-7.459L16.765,5.545a5.279,5.279,0,0,0-7.459,0L6.8,8.054a9.535,9.535,0,0,0-2.769,7.484A21.294,21.294,0,0,0,8.232,26.7,65.334,65.334,0,0,0,21.3,39.769a21.3,21.3,0,0,0,11.162,4.2c.246.018.491.028.736.028a9.536,9.536,0,0,0,6.748-2.8l2.509-2.509a5.274,5.274,0,0,0,0-7.459Z"
      ></path>
    </svg>
    <svg
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      xml:space="preserve"
      viewBox="0 0 24 24"
      version="1.1"
      style="enable-background:new 0 0 24 24;"
      class="svg"
    >
      <g id="info"></g>
      <g id="icons">
        <path
          id="share"
          d="M21.7,10.2l-6.6-6C14.6,3.7,14,4.2,14,5v3c-4.7,0-8.7,2.9-10.6,6.8c-0.7,1.3-1.1,2.7-1.4,4.1   c-0.2,1,1.3,1.5,1.9,0.6C6.1,16,9.8,13.7,14,13.7V17c0,0.8,0.6,1.3,1.1,0.8l6.6-6C22.1,11.4,22.1,10.6,21.7,10.2z"
        ></path>
      </g>
    </svg>
  </span>
  <span class="text">+</span>
</div>

<style>
/* From Uiverse.io by bociKond  - Website: https://codepen.io/milanraring/pen/JjoamZx - Name: Milan Raring - Tags: simple, tooltip, social, notification */
.tooltip-container {
  --white: #f2f2f2;
  --background: #1f8392;
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 2rem;
  font-weight: 900;
  color: var(--white);
  width: 5rem;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  background: var(--background);
  transition: all 300ms;
  fill: white;

  display: flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 30rem;
}
.tooltip .svg {
  height: 3rem;
  aspect-ratio: 1/1;
  cursor: pointer;
}
.tooltip .svg:nth-child(2) {
  width: 4rem;
}
.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: var(--background);
}
.tooltip-container .text {
  transition: all 600ms;
}
.tooltip-container:hover .text {
  transform: rotate(225deg);
}
.tooltip-container:hover .tooltip {
  top: -100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

================================================
FILE: Tooltips/csemszepp_ordinary-owl-54.html
================================================
<div class="container">
  <div id="wrapper">
    <header>
      <div class="iconDiv" tabindex="0">
        <div class="iconSVG">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"
            ></path>
          </svg>
        </div>
        <span class="text">Load File</span>
      </div>
      <div class="iconDiv" tabindex="0">
        <div class="iconSVG">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
            ></path>
          </svg>
        </div>
        <span class="text">Download</span>
      </div>
      <div class="spacer"></div>
      <div class="divider"></div>
      <div class="iconDiv" tabindex="0">
        <div class="iconSVG">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
            ></path>
          </svg>
        </div>
        <span class="text">Notifications</span>
      </div>
      <div class="iconDiv" tabindex="0">
        <div class="iconSVG">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
            ></path>
          </svg>
        </div>
        <span class="text">Log out </span>
      </div>
    </header>
  </div>
</div>

<style>
/* From Uiverse.io by csemszepp  - Website: https://codepen.io/Adir-SL - Name: Adir - Tags: tooltip, animation, minimalist */
.container {
  background-color: black;
  color: rgb(132, 170, 218);
  font-family: "Inter", sans-serif;
  font-size: 14px;
}
.container::before {
  content: "Hover or tap the icons.";
  font-size: 14px;
  position: absolute;
  left: 50%;
  top: calc(50% - 100px);
  transform: translate(-50%, -50%);
}
.container::after {
  position: absolute;
  bottom: 36px;
  right: 36px;
}
#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
}
header {
  width: 340px;
  padding: 0 16px;
  display: flex;
  border: 1px solid rgb(83, 100, 124);
  border-radius: 16px;
}
.iconDiv {
  height: 36px;
  width: 36px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 4px;
  padding: 4px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: width 300ms ease-in-out 0s, background-color 300ms linear 200ms;
}
.iconSVG {
  height: 36px;
  aspect-ratio: 1 / 1;
}
.iconDiv:hover,
.iconDiv:focus-visible {
  width: 142px;
  background-color: rgb(34, 52, 77);
  transition: width 300ms ease-in-out 0s, background-color 100ms linear 0s;
}
.iconDiv:focus-visible {
  outline: 1px solid rgb(34, 52, 77);
  outline-offset: 4px;
}
.iconDiv:active {
  opacity: 0.9;
}
.iconDiv::after {
  content: attr(tooltip);
  margin-left: 12px;
  animation: fadeIn 600ms linear forwards;
}
.spacer {
  flex-grow: 1;
}
.divider {
  height: 36px;
  width: 1px;
  margin: 24px 18px;
  background-color: rgb(83, 100, 124);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.text {
  padding-left: 10px;
}

</style>
    

================================================
FILE: Tooltips/eduardojsc18_serious-seahorse-3.html
================================================
<!-- From Uiverse.io by eduardojsc18  - Tags: tooltip, tailwind, tailwindcss, attr, data-tooltip, information -->
<div class="flex flex-col gap-3 text-center items-center">
  <button
    class="px-3 py-2 rounded-md border border-neutral-300 bg-neutral-200 hover:bg-neutral-300 text-sm font-medium text-neutral-600 relative z-[9999999999] relative z-[9999999999] data-[tooltip]:after:content-[attr(data-tooltip)] data-[tooltip]:after:invisible data-[tooltip]:after:scale-50 data-[tooltip]:after:origin-bottom data-[tooltip]:after:opacity-0 hover:data-[tooltip]:after:visible hover:data-[tooltip]:after:opacity-100 hover:data-[tooltip]:after:scale-100 data-[tooltip]:after:transition-all data-[tooltip]:after:absolute data-[tooltip]:after:bg-black data-[tooltip]:after:bottom-[calc(100%+4px)] data-[tooltip]:after:left-1/2 data-[tooltip]:after:-translate-x-1/2 data-[tooltip]:after:-z-[1] data-[tooltip]:after:px-1.5 data-[tooltip]:after:py-1 data-[tooltip]:after:min-h-fit data-[tooltip]:after:min-w-fit data-[tooltip]:after:rounded-md data-[tooltip]:after:drop-shadow data-[tooltip]:before:drop-shadow data-[tooltip]:after:text-center data-[tooltip]:after:text-white data-[tooltip]:after:whitespace-nowrap data-[tooltip]:after:text-[10px] data-[tooltip]:before:invisible data-[tooltip]:before:opacity-0 hover:data-[tooltip]:before:visible hover:data-[tooltip]:before:opacity-100 data-[tooltip]:before:transition-all data-[tooltip]:before:bg-black data-[tooltip]:before:[clip-path:polygon(100%_0,0_0,50%_100%)] data-[tooltip]:before:absolute data-[tooltip]:before:bottom-full data-[tooltip]:before:left-1/2 data-[tooltip]:before:-translate-x-1/2 data-[tooltip]:before:z-0 data-[tooltip]:before:w-3 data-[tooltip]:before:h-[4px]"
    data-tooltip="👋🏻👽 Hi!"
  >
    Tooltip me 👀
  </button>
  tooltip using after:content-[attr()]
  <p>I recommend using it within tailwind's global css.</p>
</div>


    

================================================
FILE: Tooltips/elijahgummer_brown-moose-94.html
================================================
<div class="tooltip-container">
  <span class="tooltip">8 contributions on March 8th.</span>
  <span class="text"></span>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, tooltip, green, minimalist, github, clean, transition, hover effect */
.tooltip-container {
  --background-tooltip-container: #2ea44f; /* GitHub green color */
  position: relative;
  background: var(--background-tooltip-container);
  cursor: pointer;
  transition: all 0.2s;
  width: 16px;
  height: 16px;
  border-radius: 6px;
  font-size: 17px;
}

.tooltip {
  --background-tooltip: #6e7681; /* Default background color for tooltip */
  position: absolute;
  top: -39px; /* Adjusted top position */
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background: var(--background-tooltip);
  color: white; /* Text color */
  border-radius: 5px;
  width: 210px;
  height: 30px;
  font-size: 13px;
  text-align: center;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: var(
    --background-tooltip
  ); /* Use the same background color as the tooltip */
}

.tooltip-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

================================================
FILE: Tooltips/elijahgummer_slimy-bobcat-84.html
================================================
<div class="tooltip-container">
  <span class="tooltip">Uiverse.io</span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, tooltip, animation, blue, modern, transition */
.tooltip-container {
  --background: #22d3ee;
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: background 0.3s;
  font-size: 17px;
  padding: 0.7em 1.8em;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10%); /* Adjusted the initial position */
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  background: var(--background);
  color: #fff;
  border-radius: 0.3em;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-size: 14px;
  width: 120%; /* Adjusted the width */
  padding: 0.5em 1em; /* Adjusted padding */
  white-space: nowrap; /* Prevent text wrapping */
}

.tooltip-container:hover .tooltip {
  top: -100%; /* Adjusted the tooltip position */
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

</style>
    

================================================
FILE: Tooltips/escannord_spotty-jellyfish-36.html
================================================
<div class="tooltip-container">
  <span class="tooltip">Uiverse.io</span>
  <span class="text">Tooltip</span>
  <svg id="Calque_1" viewBox="0 0 377 270" xmlns="http://www.w3.org/2000/svg">
    <g id="phone">
      <g id="caractere_x5F_1">
        <g>
          <path
            id="right_x5F_hair"
            class="st1"
            d="M199,87.1c-0.9-2.6-1.2-5.3-1.2-8.2c0.2,0.4,0.3,0.8,0.5,1.1c1.4,3.1,2.9,5.8,4.4,8
				c-1.2-2.8-2.6-6.9-3.2-12.1c-0.4-4.6,0-8.5,0.5-11.3c2.2-10.3,4.6-21.2-1.6-31.5c-10.9-18.3-33.6-8.4-33.6-8.4L151,110.2
				c0,0,17.8,28.2,42,18.3C217.2,118.7,204.4,102.4,199,87.1z"
          ></path>
          <g id="neck_2_">
            <path
              id="neck_x5F_and_x5F_shoulder"
              class="st2"
              d="M175.4,146.4c-12.7,2.3-56.5-13-69.2-11c-1.1-8.3,6.2-16.7,9.8-19.2
					c10-6.9,28,4.2,27.3-17.8c-0.8-22.9-1.6-28.3-1.6-28.3l26.2,17.5c0,0-5.6,8.1,0,19.7c5.2,10.6,23-2,29.8,11
					C180.1,123.5,193.3,143.2,175.4,146.4z"
            ></path>
            <path
              id="shadow_x5F_head"
              class="st3"
              d="M166.8,104.9c-10.9,1.5-20.9-4.5-23.9-14.5c-0.7-16.2-1.2-20.4-1.2-20.4l26.2,17.5
					C167.8,87.6,163,94.6,166.8,104.9z"
            ></path>
          </g>
          <g id="face">
            <path
              id="face_4_"
              class="st2"
              d="M188.2,78c-0.5,4.5-2.8,7.9-4,9.8c-1.1,1.7-1,1.1-5.4,6.3c-3.8,4.5-4,5-5.2,5.5
					c-1.5,0.6-3.7,0.6-10.4-3.1c-4.9-2.7-8-4.4-11.8-8c-4.2-3.9-11.5-10.6-13.8-21.6c-0.9-4.2-3.3-16.1,23.3-31.2
					c0,0,10.4-4.1,18.5,1.2c7.5,5,8.5,14.4,8.7,16.2c0.6,6.2-1.8,8.2-1.1,15.2c0.1,0.5,0.1,1,0.2,1.6l0,0
					C187.8,73.4,188.6,74.8,188.2,78z"
            ></path>
            <g>
              <g id="nose">
                <path
                  class="st4"
                  d="M176.7,63.3c0.9,1.9,1.6,3.8,2.4,5.5c0.4,0.9,0.9,1.8,1.3,2.5c0.5,0.8,1.1,1.5,1.8,1.8l1.3,0.6l-1.2,0.6
							c-1.1,0.5-2.1,1-3.2,1.4c-1.1,0.4-2.2,0.8-3.4,0.9c0.5-0.2,1.1-0.5,1.6-0.8s1-0.6,1.5-0.9c1-0.6,2-1.2,2.9-1.8l0.1,1.2
							c-1.2-0.4-2-1.3-2.6-2.2c-0.6-0.9-1.1-1.9-1.4-2.9c-0.4-1-0.6-2-0.8-3C176.7,65.4,176.6,64.4,176.7,63.3z"
                ></path>
              </g>
              <g id="left_x5F_eyebrow">
                <path
                  class="st5"
                  d="M153.1,55.8c0.3-0.7,0.8-1.4,1.3-2s1.1-1.1,1.8-1.6c1.3-0.9,3-1.5,4.7-1.6c1.8-0.1,3.6,0.5,4.9,1.5
							c1.4,1,2.4,2.4,2.6,4.1c-1.5-0.7-2.8-1.2-4-1.4c-1.2-0.3-2.3-0.4-3.4-0.4c-1.1,0.1-2.3,0.2-3.6,0.5c-0.6,0.1-1.3,0.3-2,0.5
							C154.6,55.5,153.9,55.7,153.1,55.8z"
                ></path>
              </g>
              <g id="right_x5F_eyebrow">
                <path
                  class="st5"
                  d="M188.6,55.7c-1.2-0.8-2.2-1.3-3.1-1.5c-0.9-0.2-1.6-0.1-2.6,0h-0.3l-0.4,0.1l-0.7,0.2
							c-0.5,0.2-1,0.3-1.6,0.4c-0.6,0.2-1.1,0.3-1.8,0.5c-0.6,0.1-1.3,0.3-2,0.3c0.2-0.7,0.6-1.3,1-1.9c0.4-0.6,0.9-1,1.4-1.5
							s1.1-0.8,1.7-1.2c0.3-0.2,0.7-0.3,1-0.4l0.5-0.2l0.6-0.1c1.5-0.3,3.4,0,4.6,1.1C188.2,52.7,188.8,54.3,188.6,55.7z"
                ></path>
              </g>
            </g>
            <path
              id="mouth"
              class="st5"
              d="M159.1,79.6c0,0,0.3,3.2,2.5,5.8c0.3,0.4,0.7,0.8,1.1,1.1c1.9,1.6,4.7,2.7,9.1,2.1
					c0.5-0.1,0.9-0.2,1.3-0.4c0.4-0.2,0.9-0.4,1.2-0.6c3.4-2.1,3.9-6.4,3.9-6.4s-0.7,0.2-1.8,0.4c-2.8,0.6-8.5,1.1-14.8-1.1
					C160.7,80.3,159.9,80,159.1,79.6z"
            ></path>
            <path
              id="tongue"
              class="st6"
              d="M162.7,86.5c1.9,1.6,4.7,2.7,9.1,2.1c0.5-0.1,0.9-0.2,1.3-0.4c-0.3-1.5-2.9-2.7-6-2.7
					C165.3,85.5,163.8,85.9,162.7,86.5z"
            ></path>
            <path
              id="thoot"
              class="st7"
              d="M161.6,80.6c0,0.7,0.4,1.6,1.7,1.9c2.5,0.5,8.6,1.4,12.4,0.4c0,0,0.5-0.4,0.7-1.2
					C173.6,82.3,167.8,82.9,161.6,80.6z"
            ></path>
            <path
              id="eye_x5F_right"
              class="st5"
              d="M186,63.8c-1.2-0.5-2.1-0.9-3.2-0.9c-1-0.1-2.1,0.1-3.3,0.4c0.3-0.6,0.9-1,1.4-1.3
					c0.6-0.3,1.3-0.4,2-0.3C184.2,61.7,185.5,62.5,186,63.8z"
            ></path>
            <path
              id="eye_x5F_left"
              class="st5"
              d="M158.4,62.6c1-1.4,2.9-2.3,4.7-2.1c0.9,0.1,1.8,0.3,2.6,0.8s1.4,1.1,1.9,1.9
					c-0.8-0.4-1.5-0.8-2.3-1c-0.8-0.3-1.5-0.4-2.3-0.5s-1.5,0-2.3,0.2C160,62,159.2,62.3,158.4,62.6z"
            ></path>
          </g>
          <path
            id="hair_x5F_left"
            class="st5"
            d="M171.3,32.2c0.1-1.7-0.1-3.7-1.1-5.7c-4.5-8.2-21.3-6.8-29.6-5.2
				C107,27.8,120.4,92,120.4,92c-21.2,9.9-11.9,28.2-11.9,28.2c1.5-1.5,4-3.4,7.4-3.9c4.6-0.7,7.1,1.7,12.1,1.9
				c3.9,0.2,8.2-1.4,11.1-2.9c14.7-7.8-1-32.5,5.5-46.7c-0.1,1.2-0.1,2.4-0.2,3.7c-0.1,3.5,0.6,6.4,1.1,8.3
				c-0.2-2.1-0.6-9.3,4.2-15.8c1.9-2.5,3.9-4.1,5.7-5.2c0.3-0.2,0.6-0.3,0.9-0.5c0.1-0.1,0.2-0.1,0.3-0.2l0,0
				C173.4,48.2,171.3,32.2,171.3,32.2z"
          ></path>

          <ellipse
            id="left_x5F_cheek_2_"
            transform="matrix(8.249854e-02 -0.9966 0.9966 8.249854e-02 79.3047 221.9763)"
            class="st8"
            cx="160.2"
            cy="67.9"
            rx="1.3"
            ry="3.7"
          ></ellipse>
          <path
            id="right_x5F_cheeck"
            class="st8"
            d="M187.3,69.9L187.3,69.9c-0.6,0.1-1.3,0.2-2.1,0.1c-1.6-0.1-2.9-0.7-2.9-1.3
				c0.1-0.6,1.4-0.9,3.1-0.8c0.6,0.1,1.2,0.2,1.7,0.3C187.1,68.8,187.2,69.3,187.3,69.9z"
          ></path>
        </g>
        <g id="left_x5F_arm_2_">
          <path
            class="st3"
            d="M253.8,129.2c1.8-0.9,3.4-0.4,3.9,0.4c0.4,0.6-0.8,0.8-2.2,2.4c-1.4,1.7-3.4,5.2-3.4,5.2l-2.1-3.8
				C249.9,133.4,251.6,130.3,253.8,129.2z"
          ></path>
          <path
            class="st2"
            d="M252.4,140.8c-0.4,5.4-0.7,9.3-1.9,13.4c-0.2,0.7-0.8,2.7-1.6,5.1c-0.1,0.3-0.2,0.7-0.3,1
				c-0.4,1.1-0.7,2.1-0.9,2.7c0,0.1-0.1,0.2-0.1,0.3c-3.6-2.6-6.1-3-7.7-2.7c-0.4,0.1-1.6,0.3-2.8-0.2c-1-0.4-1.6-1.2-2-1.8
				c1.2-1.4,2.1-2.7,2.6-3.6c0.5-1,1.1-2.1,1.3-2.6c0.3-0.7,0.6-1.3,0.8-1.7c-0.1-1-0.3-2-0.4-2.9c-0.4-2.8-0.6-5.5-0.9-8.2
				c0,0-1.6-2.2-1.8-2.5c-0.2-0.2-0.7-0.4-0.9-0.9c-0.4-1.8,0.7-3.2,0.7-3.2s-0.4-0.9,0-2.1s1.3-2.2,1.3-2.2s-0.5-2.7,0-3.3
				c0.5-0.6,5.4-3.1,6.4-2.8c1,0.3,4.1,5.2,4.1,5.2s-0.3-2.2-0.8-3.4c-0.5-1.2-0.5-2.7-3.8-4.5c-3.8-2.1-3.8-3.7-3.3-4.3
				c0.5-0.5,2.9,0.8,4.5,1.6c1.6,0.8,3.1,2.3,5.1,4c2,1.6,1.5,3.1,1.9,4.9c0.5,1.8,0.2,3.6,0.6,4.7
				C252.8,131.3,252.9,134.4,252.4,140.8z"
          ></path>
          <path
            class="st3"
            d="M237.8,136c0.5,0.1,1.3,2.5,2.2,2.3c0.2-0.1,1.3-0.5,1.3-0.8c0,0-0.9-1.2-1.6-1.7c-0.7-0.5-1.4-1.2-2.1-1.4
				c-0.9-0.1-2,0.7-1.7,1.6c0.1,0.4,0,0.7,0.6,1.8c0.4,0.8,1.4,2.2,1.9,2.6c0.4,0.3,0.6-0.7,0.7-1.5
				C239.1,138.6,238.1,136.5,237.8,136z"
          ></path>
          <path
            class="st3"
            d="M243.3,135c0.4,0-1.6-2.7-1.9-3c-0.6-0.7-1.3-1.7-2.1-2.2c-0.9-0.5-2-0.2-2.5,0.7c-0.3,0.7-0.5,1.6-0.2,2.4
				c0.6-1.1,1.2-1.6,2.4-1C240.4,132.5,243.3,135,243.3,135z"
          ></path>
          <path
            class="st3"
            d="M244.9,127.7c-0.4-1.1-0.8-1.4-1.3-2.4c-0.2-0.4-0.4-0.9-0.9-0.9c-0.4,0-1.3,0.4-1.7,0.6
				c-1.3,0.6-2.9,0.9-3.1,1.1c-0.2,0.2-0.4,1.4,0,2.1c0.3-0.6,1-1.1,1.5-1.2c0.6-0.1,1.2,0.2,1.7,0.4c1,0.5,2,1.4,2.8,2.1
				c0.9,0.8,2.4,2.6,2.4,2.6C246.5,130.9,245.2,128.4,244.9,127.7z"
          ></path>
          <g>
            <path class="st9" d="M240.6,137.4h0.1l0,0H240.6z"></path>
            <path
              class="st3"
              d="M240.9,151.1c-0.2-0.6-1.9-7.6-0.1-12.6c0.1-0.4,0.5-1.1,0.5-1.1c-3.4,0.5-3,4.1-3,5.6
					c0.1,2.2,0.6,5.5,1.5,7.6c0.3,0.7,1.2,2.2,2,2.1C241.4,152.4,241.1,151.6,240.9,151.1z"
            ></path>
          </g>
          <path
            id="right_x5F_arm_4_"
            class="st2"
            d="M248.9,159.3c-0.1,0.7-0.3,1.5-0.6,2.2c0,0-0.2,0.6-0.6,1.5c-0.1,0.1-0.1,0.3-0.1,0.3
				c-0.1,0.4-14,34.6-27.3,35.5c-10.5,0.7-24.5-19-29.5-49.2c-1.3-7.7-2.6-15.3-3.9-23c0,0,17.1,2.4,22.2,15.5
				c7.1,18.2,12.2,34.6,12.2,34.6c7.4-7.6,10.5-11.9,11.9-14.5c0.6-1.2,1.3-2.4,2-3.6c1.2-1.4,2.1-2.7,2.6-3.6
				c0.5-1,1.1-2.1,1.3-2.6c1.6-1.3,4.5-2.2,6.7-1.2C248.1,152.3,249.6,155.6,248.9,159.3z"
          ></path>
          <path
            id="shadow_x5F_right_x5F_arm_2_"
            class="st3"
            d="M221.3,176.7l-3.3,2.8c0,0-1.1-16.2-2.6-20.4L221.3,176.7z"
          ></path>
        </g>
        <path
          id="skirt_2_"
          class="st10"
          d="M211.4,267.9H96.7c0.7-2.3,1.5-4.5,2.3-6.4c6.2-15.6,14.1-23.9,23.3-47.3
			c2.6-6.4,4.5-12.3,6.1-17.2c1.2-3.8,2.1-7.1,2.8-9.8c19.9,1.1,39.9,2.2,59.8,3.3c0.6,2.1,1.2,4.3,1.9,6.5
			c3.3,11.6,6.5,23.4,9.6,35.5C205.6,244.4,208.6,256.3,211.4,267.9z"
        ></path>
        <path
          id="back_x5F_left_x5F_arm_2_"
          class="st3"
          d="M111.4,188.1c3.9-2.5,6.7-13.2,10.4-37.9c1.2-8,1.7-11.5,1-16.5
			c-0.3-2.3-1.6-11.8-7-13.6c-3.6-1.2-7.3,0.8-8,1.2c-8,5.2-8.6,16.5-8.5,38.6c0.1,17.5,0.5,28.3,3.4,29.6
			C106.3,191.3,110.8,188.5,111.4,188.1z"
        ></path>
        <g id="chest_1_">
          <g id="chest_4_">
            <g>
              <path
                class="st11"
                d="M99.9,140.4c0-1.8,0.2-12.4,8.6-20.2c7.2-6.6,17.7-8.7,27.4-5.6c3.9,7.3,7.6,9.3,10.4,9.7
						c3.3,0.4,5.5-1.4,8.2,0.1c3.4,1.9,3.1,6.6,5.1,6.8c1.4,0.1,1.9-2.2,4.1-4.7c4.1-4.4,8.4-2.9,13.1-6.4c1.9-1.4,4.3-4,5.8-8.9
						c3.1-0.2,7.4-0.1,12.3,1.5c0,0,0.5,0.1,0.9,0.3c14.4,5.4,18.3,23.5,18.3,23.5c-4.4,5.7-10.2,10-15.1,12.9
						c2.7,20.4-8,41.1-8,41.1c-8,1.5-18,2.7-29.6,2.5c-12.2-0.2-22.6-1.9-30.8-3.9c-2.9-11.9-5.8-23.8-8.7-35.7L99.9,140.4z"
              ></path>
            </g>
          </g>
          <g id="shadow_x5F_chest_2_" class="st12">
            <g>
              <path
                class="st13"
                d="M141.3,169.8c9.2,4,19.3,6.2,29.2,7.7c8.2,1.2,16.8,2.5,25.1,1.7c-2.2,6.8-4.5,11.3-4.5,11.3
						c-10.4,1.9-23.9,3.3-39.5,2c-7.8-0.7-14.8-1.9-20.9-3.3c-2.7-11.2-5.4-22.4-8.1-33.7C126.8,162.2,134,166.6,141.3,169.8z"
              ></path>
            </g>
          </g>
        </g>
        <g id="right_x5F_arm_1_">
          <path
            class="st2"
            d="M111.6,147.8c1.3,8.4,2.2,8.5,3.4,18c0.8,6.5,0.2,10.7-1.2,15.1c-0.9,2.9-1.2,6-4.9,8
				c-0.6,0.3-3.4,2.3-7.5,0.7c-0.6-0.2-5.8-4.1-7.5-15.3c-0.9-6.1-0.6-21.9,2.7-35.2c4-16.7,3.4-14,4.9-19
				c1.5-4.9,1.9-13.4,7.3-14.6c1.8-0.4,3.7,1,4.6,2.4c1.2,1.9-0.2,4-0.7,7.3C110.3,128.8,110.3,139.2,111.6,147.8z"
          ></path>
          <path
            class="st3"
            d="M114.5,93.9c0.7-2.5,2.1-4.4,2.7-6.9c0-0.2,0.1-0.8,0.6-1.2c1.2-0.9,3.9-1.2,6.7-2.7
				c0.3-0.2,2.2-1.4,2.7-1.1c0.4,0.3,0.8,0.9,0.7,1.4c-0.1,0.3,0,1.5-1.5,2.5c-2.5,1.6-5.4,2.3-5.7,2.6c-0.6,0.5-0.1,2.4-0.1,3.2
				c-0.1,6-3.3,7.1-3,9.7c0.1,0.5,0.3,1.4,0.9,1.6c0.9,0.4,1.6,0.1,4.3-1c0.5-0.2,6.1-2.5,7.3-0.9c0.4,0.6-0.1,1.6-0.7,2
				c-0.5,0.3-2.3,1.3-4.1,2c-2.6,1.1-3.1,1.3-4.1,2c-1,0.8-0.8,0.4-1.9,1.7c-1.6,1.9-3.7,2.8-4.8,3.2c-1.9,0.7-4.5,0.6-5.8-0.5
				c-1.2-1.1-0.5-2.4,0.4-5.6C111.2,99.3,113.1,99.3,114.5,93.9z"
          ></path>
          <path
            class="st2"
            d="M126.2,96.5c0.3,0,0.8-0.1,1.4,0c0.6,0.1,1,0.4,1.9,0.8c2.1,1.2,1.9,0.9,2.3,1.2c1,0.8,0.8,1.2,1.9,2.1
				c0.5,0.4,1.9,1.1,3.3,0.2c0.5-0.3,0.2-1.1,0.2-1.2c-0.1-0.4-0.3-0.6-1.2-1.7c-0.7-0.8-0.9-1.1-0.8-1.2c0.1-0.1,1.2,0.2,1.2-0.8
				c0-0.5-0.3-0.9-0.8-1.4c-1.7-1.9-1.9-2.5-3.1-3.3c-0.2-0.1-0.7-0.5-1.9-0.8c-3.1-0.8-4.8-2.1-6.2-1.7c-1.4,0.4-10.4,3.2-11,3.5
				c-1.1,0.6-1.5,1.7-1.7,2.1c-1.4,3.5-2.6,4.4-5.8,11.6c-1.3,2.8-1.8,3.9-1.3,5c0.7,1.3,2.4,1.6,3.3,1.8c0.4,0.1,2.9,0.6,5-0.8
				c1-0.7,1.5-1.6,2.5-3.3c1.7-3.1,1.7-4.7,3.1-5.4c0.1-0.1,1-0.5,2.3-0.8c0.4-0.1,0.7-0.2,0.8-0.2c1.7-0.2,4.1,0.5,4.4,0.6
				c0.4,0.1,1.5,1.3,4.8,3.1c0.4,0.2,2.3,1.2,3.1,0.4c0.4-0.4,0.2-1,0.2-1c-0.2-0.7-1-1.1-1.7-1.4c-2-1.1-1.6-2-3.9-3.5
				c-0.7-0.5-1.4-0.9-2.3-1.2c-3.1-1.2-5.2-0.2-5.4-1C120.6,97.4,122.9,97,126.2,96.5z"
          ></path>
        </g>
      </g>
      <g id="white-shirt">
        <path
          id="shirt"
          class="st7"
          d="M191,190.5c-5.2,1-11.1,1.8-17.6,2.2c-0.7-9.1-1.3-18.1-2-27.2v-18.8l1.1-19.1l-4-8
			c-1.2,0.6-2.6,1.4-4.1,2.7c-0.7,0.6-1.3,1.2-1.8,1.8c-0.4,0.4-1,0.9-1.5,1.6c-0.8,1.1-1.3,2.2-1.5,3c-0.3-0.8-0.9-2-2-3.1
			c-0.6-0.6-1.2-1.1-1.7-1.4c-1.5-1.8-2.9-3.5-4.4-5.3l-3.3,7.5l4.9,22.1l0.8,18.6c-1.3,8.4-2.5,16.8-3.8,25.2c0.1,0,0.2,0,0.2,0
			l0,0c-7.2-0.7-13.8-1.9-19.6-3.2c-1.7,5.5-3.3,11-5,16.5c8.3,2.1,19.3,4.1,32.1,4.3c15.4,0.2,28.2-2.2,37.5-4.7
			C193.8,200.3,192.4,195.4,191,190.5z"
        ></path>
        <path
          id="left_x5F_shadow"
          class="st14"
          d="M135.7,107.1l4.3,6.8l3.7-0.4l-0.2-0.6c0,0,0.7-1.3,1.4-2.9c0.6-1.1,0.7-4.2,0.8-5.9
			L135.7,107.1z"
        ></path>
        <path
          id="shadow_x5F_right"
          class="st14"
          d="M179,104.9l-12.9-2.1c0,0,1.2,5.4,3.9,7.3c2,1.4,2.9,1.4,2.9,1.4L179,104.9z"
        ></path>
        <path
          id="right_x5F_collar"
          class="st7"
          d="M184.8,109.7c-1.9-1.6-3.9-3.2-5.8-4.8c-4.4,4.8-8.8,9.5-13.1,14.2l-1.9,9.5l4.5-4.5
			l4.2,7.9C176.7,124.6,180.8,117.1,184.8,109.7z"
        ></path>
        <path
          id="left_x5F_collar"
          class="st7"
          d="M135.6,107l-6.1,4.2l17.8,20.8c1.2-3,2.5-6,3.8-8.9c2.2,2,4.5,3.9,6.7,5.9
			c-2.1-3.4-4.2-6.8-6.3-10.1C146.2,114.9,140.9,111,135.6,107z"
        ></path>
        <path
          id="front_x5F_left_x5F_collar"
          class="st14"
          d="M147.4,132c1.4-4.4,2.8-8.8,4.1-13.1c2,2.2,4.1,4.5,6.1,6.7
			c-1.6-0.8-3.2-1.6-4.8-2.4c-0.6,0.8-1.2,1.7-1.9,2.6C149.5,128,148.3,130.1,147.4,132z"
        ></path>
        <path
          id="front_x5F_right_x5F_collar"
          class="st14"
          d="M172.7,132c-2.3-4.3-4.6-8.5-6.9-12.8c-1.6,2.1-3.1,4.3-4.7,6.4
			c1.5-0.6,2.9-1.3,4.4-2c1,0.7,2.1,1.6,3.1,2.8C170.5,128.5,171.8,130.4,172.7,132z"
        ></path>
      </g>
      <g id="headphone_2_">
        <path
          class="st7"
          d="M158.6,21.9c5.4-0.1,8.1,1.2,9.2,1.9l0,0l-0.1-0.1c-0.5-0.5-3.6-3.1-10.5-3.1c-16.4-0.2-28.7,13-30.1,30.8
			c-0.9,0.1-1.8,0.5-2.3,1.2c-2.5,3.3-2.9,8.6-2.9,13.2c0,4.2,1.8,12.4,3.4,13.6c1.9,1.4,4.7,0.8,5.1,0.6c0.5-0.2,0.9-0.5,1.3-0.9
			c3.3,7.9,9.8,13.1,17.1,13.1c1.2,0,2.3-0.1,3.3-0.4c0.7,0.6,1.8,1.1,3.2,1.1c2.1,0,3.8-1,3.8-2.3s-1.7-2.3-3.8-2.3s-3.8,1-3.8,2.3
			v0.1c-0.6,0.1-1.2,0.1-1.8,0.1c-7.1,0-13.3-6.8-15.8-15.8c0.8-2.4,1.2-5.5,1.2-9.2c0-7.3-1.7-12.9-4.2-14
			C132.5,35.9,144.9,22.1,158.6,21.9z"
        ></path>
        <ellipse class="st15" cx="127.2" cy="65.8" rx="4.1" ry="12.4"></ellipse>
      </g>
    </g>
  </svg>
</div>

<style>
/* From Uiverse.io by escannord  - Tags: tooltip, message, support */
/* This is an example, feel free to delete this code */
.tooltip-container {
  --background: #4132c9;
  --support-size: 50px;
  --tooltip-radius: 10px 10px 10px 0;
  --outline-border-color: #0096aa;
  position: relative;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  font-weight: bold;
  padding: 0.7em 1.8em;
  color: var(--background);
  border: solid 2px var(--background);
}

.tooltip-container::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  transition: all 0.5s linear;
  outline: 3px solid transparent;
  background: var(--background);
}
.tooltip-container:hover {
  color: white;
}
.tooltip-container:hover:before {
  width: 100%;
  height: 100%;
  border-radius: 0;
  outline-offset: 5px;
  outline-color: var(--outline-border-color);
}
.tooltip {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 50%;
  transform: translateX(-5%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background: var(--background);
  border-radius: var(--tooltip-radius);
  color: white;
  box-shadow: 3px 3px 0px var(--outline-border-color);
}

.tooltip::after {
  content: "Hello!👋";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--background);
  text-align: center;
  border-radius: var(--tooltip-radius);
}
.tooltip::before {
  position: absolute;
  content: "";
  bottom: 0;
  border-style: solid;
  border-width: 10px;
  left: 0;
  transform: translateX(-50%);
  border-color: transparent var(--background) var(--background) transparent;
  box-shadow: 0px 3px 0px var(--outline-border-color);
}

.tooltip-container:hover .tooltip::after {
  animation: hidden 0.5s 1.5s linear forwards;
}

.tooltip-container:hover .tooltip {
  top: calc(-100% - var(--support-size) * 0.5);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: shake 0.5s 1s linear;
  transition: all 0.3s 0.5s;
}

@keyframes hidden {
  50% {
    transform: translate(-50%, -50%) scale(0.5);
    background-color: #1ca0f5;
  }
  100% {
    transform: translate(0, -50%) scale(0.5);
    opacity: 0;
  }
}

@keyframes shake {
  0%,
  40%,
  80% {
    transform: translateX(-10%);
  }
  20%,
  60%,
  100% {
    transform: translateX(0);
  }
}

.st2 {
  fill: #f9c8a7;
}
.st3 {
  fill: #ff9e97;
}
.st6 {
  fill: #d72e48;
}
.st7 {
  fill: #ffffff;
}
.st8 {
  fill: #ff8d7f;
}
.st10 {
  fill: #3d3d3b;
}
.st11 {
  fill: #1ca0f5;
}
.st12 {
  opacity: 0.2;
}
.st14 {
  fill: #b7b7b7;
}
.st15 {
  fill: #ead9cf;
}
#Calque_1 {
  display: inline-block;
  height: var(--support-size);
  position: absolute;
  opacity: 0;
  transition: all 0.5s;
  z-index: -1;
  left: 0;
  top: 0;
}
#left_x5F_arm_2_ {
  transform: translateX(2px);
}

.tooltip-container:hover #Calque_1 {
  top: calc(var(--support-size) * -1);
  opacity: 1;
}

</style>
    

================================================
FILE: Tooltips/gharsh11032000_spotty-zebra-83.html
================================================
<div class="tooltip-container">
  <span class="tooltip">Uiverse.io</span>
  <span class="text">Tooltip 👆</span>
  <span>Hello! 👋</span>
</div>

<style>
/* From Uiverse.io by gharsh11032000  - Tags: tooltip, animation, hover, bounce */
/* This is an example, feel free to delete this code */
.tooltip-container {
  --background: #333333;
  --color: #e8e8e8;
  position: relative;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  font-size: 18px;
  font-weight: 600;
  color: var(--color);
  padding: 0.7em 1.8em;
  border-radius: 8px;
  text-transform: uppercase;
  height: 60px;
  width: 180px;
  display: grid;
  place-items: center;
  border: 2px solid var(--color);
}

.text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform-origin: -100%;
  transform: scale(1);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.tooltip-container span:last-child {
  position: absolute;
  top: 0%;
  left: 100%;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  opacity: 1;
  background-color: var(--background);
  z-index: -1;
  border: 2px solid var(--background);
  transform: scale(0);
  transform-origin: 0;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  display: grid;
  place-items: center;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--background);
  z-index: -1;
  border-radius: 8px;
  scale: 0;
  transform-origin: 0 0;
  text-transform: capitalize;
  font-weight: 400;
  font-size: 16px;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: var(--background);
}

.tooltip-container:hover .tooltip {
  top: -100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  scale: 1;
  animation: shake 0.5s ease-in-out both;
}

.tooltip-container:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  color: white;
  border-color: transparent;
}

.tooltip-container:hover span:last-child {
  transform: scale(1);
  left: 0;
}

.tooltip-container:hover .text {
  opacity: 0;
  top: 0%;
  left: 100%;
  transform: scale(0);
}

@keyframes shake {
  0% {
    rotate: 0;
  }

  25% {
    rotate: 7deg;
  }

  50% {
    rotate: -7deg;
  }

  75% {
    rotate: 1deg;
  }

  100% {
    rotate: 0;
  }
}

</style>
    

================================================
FILE: Tooltips/gouthamnetha02_strong-zebra-90.html
================================================
<div class="tooltip">
  <button>Hover Me!</button>
  <div class="tooltiptext">You Hovered Me!</div>
</div>

<style>
/* From Uiverse.io by gouthamnetha02  - Tags: tooltip, red, hover, color, hover effect, css, css effect */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip button {
  background-color: #db3434;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s ease-out;
}

.tooltip button:hover {
  background-color: #b92929;
  transform: scale(1.05);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltiptext {
  visibility: hidden;
  width: 160px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

</style>
    

================================================
FILE: Tooltips/iammar99_angry-dragonfly-22.html
================================================
<div class="wrapper">
  <input type="checkbox" />
  <div class="btn"></div>
  <div class="tooltip">
    <svg></svg>
    <svg></svg>
    <svg></svg>
  </div>
  <svg></svg>
</div>

<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-01" viewBox="0 0 26 22" xmlns="http://www.w3.org/2000/svg">
    <path
      transform="translate(0 -2)"
      d="M18.29,5.76l-.7-1.37A2.59,2.59,0,0,0,15.29,3H10.71a2.59,2.59,0,0,0-2.3,1.39l-.7,1.37a2.6,2.6,0,0,1-2.3,1.39H3.58A2.57,2.57,0,0,0,1,9.71V20.44A2.57,2.57,0,0,0,3.58,23H22.42A2.57,2.57,0,0,0,25,20.44V9.71a2.57,2.57,0,0,0-2.58-2.56H20.59A2.6,2.6,0,0,1,18.29,5.76Z"
    ></path>
    <ellipse ry="4.49" rx="4.52" cy="12.99" cx="13"></ellipse>
  </symbol>
  <symbol id="icon-02" viewBox="0 0 26 22" xmlns="http://www.w3.org/2000/svg">
    <line y2="9.42" x2="25" y1="12.58" x1="25"></line>
    <line y2="7.84" x2="21" y1="14.16" x1="21"></line>
    <line y2="6.26" x2="17" y1="15.74" x1="17"></line>
    <line y2="1" x2="13" y1="21" x1="13"></line>
    <line y2="4.68" x2="9" y1="17.32" x1="9"></line>
    <line y2="8.37" x2="5" y1="13.63" x1="5"></line>
    <line y2="10.47" x2="1" y1="11.53" x1="1"></line>
  </symbol>
  <symbol id="icon-03" viewBox="0 0 26 22" xmlns="http://www.w3.org/2000/svg">
    <polygon
      points="8.08 10 1 21 25 21 18.09 12.66 13.78 17.45 8.08 10"
    ></polygon>
    <circle r="3" cy="4" cx="8"></circle>
  </symbol>

  <symbol
    id="shape-01"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <polygon
      points="155.77 140.06 141.08 152.42 159.12 158.96 155.77 140.06"
      stroke="var(--shape-color-03)"
    ></polygon>
  </symbol>
  <symbol
    id="shape-02"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g stroke="var(--shape-color-02)">
      <line y2="152.29" x2="141.54" y1="146.73" x1="158.66"></line>
      <line y2="158.07" x2="152.88" y1="140.95" x1="147.32"></line>
    </g>
  </symbol>
  <symbol
    id="shape-03"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle
      r="13"
      cy="149.51"
      cx="150.1"
      stroke="var(--shape-color-01)"
    ></circle>
  </symbol>
  <symbol
    id="shape-04"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle r="4" cy="149.51" cx="150.1" fill="var(--shape-color-01)"></circle>
  </symbol>
  <symbol
    id="shape-05"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect
      transform="translate(40.44 -31.76) rotate(13.94)"
      height="18"
      width="18"
      y="140.51"
      x="141.1"
      stroke="var(--shape-color-03)"
    ></rect>
  </symbol>
  <symbol
    id="shape-06"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g stroke="var(--shape-color-02)">
      <line y2="146.24" x2="141.72" y1="152.78" x1="158.48"></line>
      <line y2="157.89" x2="146.83" y1="141.13" x1="153.37"></line>
    </g>
  </symbol>
  <symbol
    id="shape-07"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect
      transform="translate(-42.94 62.23) rotate(-20.56)"
      height="24"
      width="24"
      y="137.51"
      x="138.1"
      stroke="var(--shape-color-03)"
    ></rect>
  </symbol>

  <symbol
    id="shape-08"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle r="4" cy="149.51" cx="150.1" fill="var(--shape-color-01)"></circle>
  </symbol>
  <symbol
    id="shape-09"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle
      r="8"
      cy="149.51"
      cx="150.1"
      stroke="var(--shape-color-01)"
    ></circle>
  </symbol>
</svg>

<style>
/* From Uiverse.io by iammar99  - Website: https://codepen.io/milanraring/pen/JjoamZx - Name: Milan Raring - Tags: tooltip, button, click, menu, tooltip on click, animated tooltip */
.wrapper {
  --background: #62abff;
  --icon-color: #414856;
  --shape-color-01: #b8cbee;
  --shape-color-02: #7691e8;
  --shape-color-03: #fdd053;
  --width: 90px;
  --height: 90px;
  --border-radius: var(--height);
  width: var(--width);
  height: var(--height);
  position: relative;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .btn {
  background: var(--background);
  width: var(--width);
  height: var(--height);
  position: relative;
  z-index: 3;
  border-radius: var(--border-radius);
  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-animation: plus-animation-reverse 0.5s ease-out forwards;
  animation: plus-animation-reverse 0.5s ease-out forwards;
}
.wrapper .btn::before,
.wrapper .btn::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4px;
  background: #fff;
}
.wrapper .btn::before {
  width: 4px;
  height: 28px;
}
.wrapper .btn::after {
  width: 28px;
  height: 4px;
}
.wrapper .tooltip {
  width: 90px;
  height: 75px;
  border-radius: 70px;
  position: absolute;
  background: #fff;
  z-index: 2;
  padding: 0 15px;
  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
  opacity: 0;
  top: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  transition: opacity 0.15s ease-in, top 0.15s ease-in, width 0.15s ease-in;
}
.wrapper .tooltip > svg {
  width: 100%;
  height: 26px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
}
.wrapper .tooltip > svg .icon {
  fill: none;
  stroke: var(--icon-color);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.wrapper .tooltip > svg:hover .icon {
  opacity: 1;
}
.wrapper .tooltip::after {
  content: "";
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  margin-left: -10px;
  bottom: -8px;
  transform: rotate(45deg);
  z-index: 0;
}
.wrapper > svg {
  width: 300px;
  height: 300px;
  position: absolute;
  z-index: 1;
  transform: scale(0);
}
.wrapper > svg .shape {
  fill: none;
  stroke: none;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 20%;
}
.wrapper input {
  height: 100%;
  width: 100%;
  border-radius: var(--border-radius);
  cursor: pointer;
  position: absolute;
  z-index: 5;
  opacity: 0;
}
.wrapper input:checked ~ svg {
  -webkit-animation: pang-animation 1.2s ease-out forwards;
  animation: pang-animation 1.2s ease-out forwards;
}
.wrapper input:checked ~ svg .shape:nth-of-type(1) {
  transform: translate(3px, 30%) rotate(40deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(2) {
  transform: translate(-9px, 30%) rotate(80deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(3) {
  transform: translate(-2px, 30%) rotate(120deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(4) {
  transform: translate(25px, 30%) rotate(160deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(5) {
  transform: translate(12px, 30%) rotate(200deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(6) {
  transform: translate(-15px, 30%) rotate(240deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(7) {
  transform: translate(22px, 30%) rotate(280deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(8) {
  transform: translate(3px, 30%) rotate(320deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(9) {
  transform: translate(11px, 30%) rotate(360deg);
}
.wrapper input:checked ~ .btn {
  -webkit-animation: plus-animation 0.5s ease-out forwards;
  animation: plus-animation 0.5s ease-out forwards;
}
.wrapper input:checked ~ .tooltip {
  width: 190px;
  height: 70px;
  -webkit-animation: stretch-animation 1s ease-out forwards 0.15s;
  animation: stretch-animation 1s ease-out forwards 0.15s;
  top: -90px;
  opacity: 1;
}

@-webkit-keyframes pang-animation {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

@keyframes pang-animation {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}
@-webkit-keyframes plus-animation {
  0% {
    transform: rotate(0) scale(1);
  }
  20% {
    transform: rotate(60deg) scale(0.93);
  }
  55% {
    transform: rotate(35deg) scale(0.97);
  }
  80% {
    transform: rotate(48deg) scale(0.94);
  }
  100% {
    transform: rotate(45deg) scale(0.95);
  }
}
@keyframes plus-animation {
  0% {
    transform: rotate(0) scale(1);
  }
  20% {
    transform: rotate(60deg) scale(0.93);
  }
  55% {
    transform: rotate(35deg) scale(0.97);
  }
  80% {
    transform: rotate(48deg) scale(0.94);
  }
  100% {
    transform: rotate(45deg) scale(0.95);
  }
}
@-webkit-keyframes plus-animation-reverse {
  0% {
    transform: rotate(45deg) scale(0.95);
  }
  20% {
    transform: rotate(-15deg);
  }
  55% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}
@keyframes plus-animation-reverse {
  0% {
    transform: rotate(45deg) scale(0.95);
  }
  20% {
    transform: rotate(-15deg);
  }
  55% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}
@-webkit-keyframes stretch-animation {
  0% {
    transform: scale(1, 1);
  }
  10% {
    transform: scale(1.1, 0.9);
  }
  30% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.05, 0.95);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes stretch-animation {
  0% {
    transform: scale(1, 1);
  }
  10% {
    transform: scale(1.1, 0.9);
  }
  30% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.05, 0.95);
  }
  100% {
    transform: scale(1, 1);
  }
}

</style>
    

================================================
FILE: Tooltips/johnliter_clever-lizard-46.html
================================================
<div class="tooltip-container">
  <span class="tooltip">Uiverse.io</span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by johnliter  - Tags: simple, flashy, tooltip, button, theme-switch, code, gradients, light&dark */
/* Style for the tooltip container */
.tooltip-container {
  --background-light: #ff5555; /* Red */
  --background-dark: #000000; /* Black */
  --text-color-light: #ffffff;
  --text-color-dark: #ffffff;
  --bubble-size: 12px;
  --glow-color: rgba(255, 255, 255, 0.5); /* Brighter glow color */

  position: relative;
  background: var(--background-light);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  color: var(--text-color-light);
  border-radius: 8px; /* Rounded edges */
}

/* Style for the bubble tooltip */
.tooltip {
  position: absolute;
  top: -100%; /* Initially hidden above the container */
  left: 50%;
  transform: translateX(-50%);
  padding: 0.6em 1em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s;
  border-radius: var(--bubble-size);
  background: var(--background-light);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Triangle arrow for the bubble tooltip */
.tooltip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%);
  border-style: solid;
  border-width: 8px 8px 0;
  border-color: var(--background-light) transparent transparent;
}

/* Tooltip appearance on hover */
.tooltip-container:hover {
  background: var(--background-dark);
  color: var(--text-color-dark);
  box-shadow: 0 0 20px var(--glow-color); /* Brighter glow effect */
}

.tooltip-container:hover .tooltip {
  top: -120%; /* Adjusted position for the bubble tooltip */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

================================================
FILE: Tooltips/kyle1dev_quiet-cougar-91.html
================================================
<div class="tooltip-wrapper">
  <button class="tooltip-button">
    <span class="tooltip-text">Hover me</span>
  </button>
  <div class="tooltip-content">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M13 13h-2v-2h2v2zm0 4h-2v-2h2v2zm1-18h-8v2h8v-2zm0 20h-8v-2h8v2zm5.5-7h-2v-2h2v2zm-7 0h-2v-2h2v2zm1-10h-2v6h2v-6zm6.5 5.5h-1.5v1.5h1.5v-1.5zM4.5 16.5h1.5v1.5h-1.5v-1.5zm12-5h-2v-2h2v2zm-4 4h-2v-2h2v2zm5-3h-2v-2h2v2zm-7 0h-2v-2h2v2zm-3-5h-2v2h2v-2zm-4 8.5h1.5v1.5h-1.5v-1.5zm4.5-12h-2v2h2v-2zm10 1h-2v2h2v-2zm-7 3h-2v2h2v-2zm6 5h-2v-2h2v2zm-7-6h-2v-2h2v2zM6 13H4v-2h2v2zm12 6h-2v-2h2v2zM9 4H7v2h2V4zm11 0h-2v2h2V4z"
      ></path>
    </svg>
    Uiverse.io
  </div>
</div>

<style>
/* From Uiverse.io by kyle1dev  - Tags: tooltip */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}
.tooltip-wrapper .tooltip-content {
  visibility: hidden;
  background: linear-gradient(to right, #000, #333);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  transition:
    visibility 0s linear 0.4s,
    opacity 0.4s ease,
    transform 0.4s ease;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tooltip-wrapper:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.tooltip-wrapper:not(:hover) .tooltip-content {
  visibility: visible;
  transition-delay: 0s, 0.4s;
}
.tooltip-button {
  background: linear-gradient(to right, #333, #000);
  border: none;
  color: white;
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.tooltip-button:hover {
  background: linear-gradient(to right, #000, #333);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
}
.tooltip-button:active {
  background: #222;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
}
.tooltip-button .tooltip-text {
  position: relative;
  display: inline-block;
  transition: transform 0.4s ease;
}
.tooltip-button:hover .tooltip-text {
  transform: translateY(-10px);
}
.tooltip-content svg {
  fill: #fff;
  width: 16px;
  height: 16px;
}

</style>
    

================================================
FILE: Tooltips/lvloper_modern-ladybug-94.html
================================================
<!-- From Uiverse.io by lvloper  - Tags: tooltip -->
<div
  class="overflow-x-visible relative w-14 h-14 overflow-y-clip group text-center"
>
  <div
    class="flex justify-center items-center w-14 h-14 rounded-full bg-yellow-300 transition-all duration-300 absolute top-0 group-hover:scale-[.60] group-hover:origin-top text-white"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="26.463"
      height="26.647"
      viewBox="0 0 26.463 26.647"
    >
      <g id="Grupo_3793" data-name="Grupo 3793" transform="translate(1.5 1.5)">
        <path
          id="Trazado_28219"
          data-name="Trazado 28219"
          d="M7,10V24.188"
          transform="translate(-1.088 -0.541)"
          fill="none"
          stroke="#000"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="3"
        ></path>
        <path
          id="Trazado_28220"
          data-name="Trazado 28220"
          d="M17.37,6.587l-1.182,4.871h6.893a2.365,2.365,0,0,1,2.27,3.027L22.6,23.944a2.365,2.365,0,0,1-2.27,1.7H4.365A2.365,2.365,0,0,1,2,23.282V13.823a2.365,2.365,0,0,1,2.365-2.365H7.628a2.365,2.365,0,0,0,2.116-1.312L13.823,2A3.7,3.7,0,0,1,17.37,6.587Z"
          transform="translate(-2 -2)"
          fill="none"
          stroke="#000"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="3"
        ></path>
      </g>
    </svg>
  </div>
  <div
    class="absolute text-white font-bold -bottom-10 left-1/2 text-sm text-center text-black whitespace-nowrap transition-all duration-300 transform -translate-x-1/2 group-hover:bottom-0"
  >
    Like
  </div>
</div>


    

================================================
FILE: Tooltips/nabilbdt_new-robin-92.html
================================================
<div class="Tooltip">
  Tooltip
  <div class="Tip">Uiverse.io</div>
</div>

<style>
/* From Uiverse.io by nabilbdt  - Tags: simple, tooltip, action, alert, green, creative */
.Tooltip {
  color: #ebebeb;
  border-radius: 0.8em;
  padding: 1em 4em;
  position: relative;
  display: inline-block;
  cursor: pointer;
  background-color: #00641e;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
.Tooltip .Tip {
  color: #003b12;
  text-align: center;
  border-radius: 5px;
  visibility: hidden;
  width: 100px;
  left: 100%;
  transform: translateX(-50%);
  opacity: 0;
  background-color: #28282817;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  transition: opacity 0.3s;
}
.Tooltip:hover .Tip {
  opacity: 1;
  visibility: visible;
}
.Tooltip:hover {
  background-color: rgb(100, 100, 100);
}
.Tooltip .Tip::after {
  left: 10%;
  border-width: 8px;
  border-style: solid;
  content: "";
  position: absolute;
  top: 100%;
  border-color: #28282817 transparent transparent transparent;
}

</style>
    

================================================
FILE: Tooltips/neerajbaniwal_gentle-turkey-54.html
================================================
<div class="tooltip-container">
  <span class="tooltip">Uiverse.io</span>
  <span class="text">@</span>
</div>

<style>
/* From Uiverse.io by neerajbaniwal  - Tags: simple, neumorphism, glassmorphism, tooltip, hover, hover effect */
.tooltip-container {
  height: 70px;
  width: 110px;
  border-radius: 5px;
  background-color: #fff;
  background-image: linear-gradient(
    to left bottom,
    #f2f5f8,
    #ecf1f2,
    #e7eceb,
    #e3e7e4,
    #e1e2de
  );
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.151);
  position: relative;
  transition: transform 0.3s ease;
  z-index: 1;
}

.tooltip-container::before {
  position: absolute;
  content: "";
  top: -50%;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  border-radius: 5px;
  background-color: fff;
  background-image: linear-gradient(
    to left bottom,
    #1288ff,
    #e4eaec,
    #d8dfde,
    #cdd3cf,
    #c5c7c1
  );
  width: 100%;
  height: 50%;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(-150deg) translateY(-110%);
  transition: transform 0.3s ease;
  z-index: -1;
}

.tooltip-container .text {
  color: rgb(32, 30, 30);
  font-weight: bold;
  font-size: 40px;
}

.tooltip {
  position: absolute;
  top: -20px;
  opacity: 0;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.05) 1px, white 1px),
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, white 1px),
    linear-gradient(-90deg, rgba(0, 0, 0, 0.04) 1px, white 1px),
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, white 1px),
    linear-gradient(white 3px, #f2f2f2 3px, #f2f2f2 78px, white 78px),
    linear-gradient(-90deg, #aaa 1px, white 1px),
    linear-gradient(-90deg, white 3px, #f2f2f2 3px, #f2f2f2 78px, white 78px),
    linear-gradient(#aaa 1px, white 1px), #f2f2f2;
  background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px,
    80px 80px, 80px 80px;
  padding: 5px 10px;
  border: 1px solid rgb(206, 204, 204);

  height: 70px;
  width: 110px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 0.2s;
  pointer-events: none;
  letter-spacing: 0.5px;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 10px salmon;
  z-index: ;
}
.tooltip-container:hover {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.tooltip-container:hover::before {
  transform: rotateY(0);
  background-image: none;
  background-color: white;
}

.tooltip-container:hover .tooltip {
  top: -90px;
  opacity: 1;
  transition-duration: 0.3s;
}

</style>
    

================================================
FILE: Tooltips/neerajbaniwal_sweet-sloth-99.html
================================================
<div class="wrapper">
  <input type="checkbox" />
  <div class="btn"></div>
  <div class="tooltip">
    <svg></svg>
    <svg></svg>
    <svg></svg>
  </div>
  <svg></svg>
</div>

<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-01" viewBox="0 0 26 22" xmlns="http://www.w3.org/2000/svg">
    <path
      transform="translate(0 -2)"
      d="M18.29,5.76l-.7-1.37A2.59,2.59,0,0,0,15.29,3H10.71a2.59,2.59,0,0,0-2.3,1.39l-.7,1.37a2.6,2.6,0,0,1-2.3,1.39H3.58A2.57,2.57,0,0,0,1,9.71V20.44A2.57,2.57,0,0,0,3.58,23H22.42A2.57,2.57,0,0,0,25,20.44V9.71a2.57,2.57,0,0,0-2.58-2.56H20.59A2.6,2.6,0,0,1,18.29,5.76Z"
    ></path>
    <ellipse ry="4.49" rx="4.52" cy="12.99" cx="13"></ellipse>
  </symbol>
  <symbol id="icon-02" viewBox="0 0 26 22" xmlns="http://www.w3.org/2000/svg">
    <line y2="9.42" x2="25" y1="12.58" x1="25"></line>
    <line y2="7.84" x2="21" y1="14.16" x1="21"></line>
    <line y2="6.26" x2="17" y1="15.74" x1="17"></line>
    <line y2="1" x2="13" y1="21" x1="13"></line>
    <line y2="4.68" x2="9" y1="17.32" x1="9"></line>
    <line y2="8.37" x2="5" y1="13.63" x1="5"></line>
    <line y2="10.47" x2="1" y1="11.53" x1="1"></line>
  </symbol>
  <symbol id="icon-03" viewBox="0 0 26 22" xmlns="http://www.w3.org/2000/svg">
    <polygon
      points="8.08 10 1 21 25 21 18.09 12.66 13.78 17.45 8.08 10"
    ></polygon>
    <circle r="3" cy="4" cx="8"></circle>
  </symbol>

  <symbol
    id="shape-01"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <polygon
      points="155.77 140.06 141.08 152.42 159.12 158.96 155.77 140.06"
      stroke="var(--shape-color-03)"
    ></polygon>
  </symbol>
  <symbol
    id="shape-02"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g stroke="var(--shape-color-02)">
      <line y2="152.29" x2="141.54" y1="146.73" x1="158.66"></line>
      <line y2="158.07" x2="152.88" y1="140.95" x1="147.32"></line>
    </g>
  </symbol>
  <symbol
    id="shape-03"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle
      r="13"
      cy="149.51"
      cx="150.1"
      stroke="var(--shape-color-01)"
    ></circle>
  </symbol>
  <symbol
    id="shape-04"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle r="4" cy="149.51" cx="150.1" fill="var(--shape-color-01)"></circle>
  </symbol>
  <symbol
    id="shape-05"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect
      transform="translate(40.44 -31.76) rotate(13.94)"
      height="18"
      width="18"
      y="140.51"
      x="141.1"
      stroke="var(--shape-color-03)"
    ></rect>
  </symbol>
  <symbol
    id="shape-06"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g stroke="var(--shape-color-02)">
      <line y2="146.24" x2="141.72" y1="152.78" x1="158.48"></line>
      <line y2="157.89" x2="146.83" y1="141.13" x1="153.37"></line>
    </g>
  </symbol>
  <symbol
    id="shape-07"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect
      transform="translate(-42.94 62.23) rotate(-20.56)"
      height="24"
      width="24"
      y="137.51"
      x="138.1"
      stroke="var(--shape-color-03)"
    ></rect>
  </symbol>

  <symbol
    id="shape-08"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle r="4" cy="149.51" cx="150.1" fill="var(--shape-color-01)"></circle>
  </symbol>
  <symbol
    id="shape-09"
    viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle
      r="8"
      cy="149.51"
      cx="150.1"
      stroke="var(--shape-color-01)"
    ></circle>
  </symbol>
</svg>

<style>
/* From Uiverse.io by neerajbaniwal  - Tags: tooltip, animation, social media, animated, svg, buttons, bounce animation */
.wrapper {
  --background: #62abff;
  --icon-color: #414856;
  --shape-color-01: #b8cbee;
  --shape-color-02: #7691e8;
  --shape-color-03: #fdd053;
  --width: 90px;
  --height: 90px;
  --border-radius: var(--height);
  width: var(--width);
  height: var(--height);
  position: relative;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .btn {
  background: var(--background);
  width: var(--width);
  height: var(--height);
  position: relative;
  z-index: 3;
  border-radius: var(--border-radius);
  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-animation: plus-animation-reverse 0.5s ease-out forwards;
  animation: plus-animation-reverse 0.5s ease-out forwards;
}
.wrapper .btn::before,
.wrapper .btn::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4px;
  background: #fff;
}
.wrapper .btn::before {
  width: 4px;
  height: 28px;
}
.wrapper .btn::after {
  width: 28px;
  height: 4px;
}
.wrapper .tooltip {
  width: 90px;
  height: 75px;
  border-radius: 70px;
  position: absolute;
  background: #fff;
  z-index: 2;
  padding: 0 15px;
  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
  opacity: 0;
  top: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  transition: opacity 0.15s ease-in, top 0.15s ease-in, width 0.15s ease-in;
}
.wrapper .tooltip > svg {
  width: 100%;
  height: 26px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
}
.wrapper .tooltip > svg .icon {
  fill: none;
  stroke: var(--icon-color);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.wrapper .tooltip > svg:hover .icon {
  opacity: 1;
}
.wrapper .tooltip::after {
  content: "";
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  margin-left: -10px;
  bottom: -8px;
  transform: rotate(45deg);
  z-index: 0;
}
.wrapper > svg {
  width: 300px;
  height: 300px;
  position: absolute;
  z-index: 1;
  transform: scale(0);
}
.wrapper > svg .shape {
  fill: none;
  stroke: none;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 20%;
}
.wrapper input {
  height: 100%;
  width: 100%;
  border-radius: var(--border-radius);
  cursor: pointer;
  position: absolute;
  z-index: 5;
  opacity: 0;
}
.wrapper input:checked ~ svg {
  -webkit-animation: pang-animation 1.2s ease-out forwards;
  animation: pang-animation 1.2s ease-out forwards;
}
.wrapper input:checked ~ svg .shape:nth-of-type(1) {
  transform: translate(25px, 30%) rotate(40deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(2) {
  transform: translate(-4px, 30%) rotate(80deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(3) {
  transform: translate(12px, 30%) rotate(120deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(4) {
  transform: translate(8px, 30%) rotate(160deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(5) {
  transform: translate(21px, 30%) rotate(200deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(6) {
  transform: translate(0px, 30%) rotate(240deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(7) {
  transform: translate(17px, 30%) rotate(280deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(8) {
  transform: translate(-3px, 30%) rotate(320deg);
}
.wrapper input:checked ~ svg .shape:nth-of-type(9) {
  transform: translate(25px, 30%) rotate(360deg);
}
.wrapper input:checked ~ .btn {
  -webkit-animation: plus-animation 0.5s ease-out forwards;
  animation: plus-animation 0.5s ease-out forwards;
}
.wrapper input:checked ~ .tooltip {
  width: 190px;
  height: 70px;
  -webkit-animation: stretch-animation 1s ease-out forwards 0.15s;
  animation: stretch-animation 1s ease-out forwards 0.15s;
  top: -90px;
  opacity: 1;
}

@-webkit-keyframes pang-animation {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

@keyframes pang-animation {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}
@-webkit-keyframes plus-animation {
  0% {
    transform: rotate(0) scale(1);
  }
  20% {
    transform: rotate(60deg) scale(0.93);
  }
  55% {
    transform: rotate(35deg) scale(0.97);
  }
  80% {
    transform: rotate(48deg) scale(0.94);
  }
  100% {
    transform: rotate(45deg) scale(0.95);
  }
}
@keyframes plus-animation {
  0% {
    transform: rotate(0) scale(1);
  }
  20% {
    transform: rotate(60deg) scale(0.93);
  }
  55% {
    transform: rotate(35deg) scale(0.97);
  }
  80% {
    transform: rotate(48deg) scale(0.94);
  }
  100% {
    transform: rotate(45deg) scale(0.95);
  }
}
@-webkit-keyframes plus-animation-reverse {
  0% {
    transform: rotate(45deg) scale(0.95);
  }
  20% {
    transform: rotate(-15deg);
  }
  55% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}
@keyframes plus-animation-reverse {
  0% {
    transform: rotate(45deg) scale(0.95);
  }
  20% {
    transform: rotate(-15deg);
  }
  55% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}
@-webkit-keyframes stretch-animation {
  0% {
    transform: scale(1, 1);
  }
  10% {
    transform: scale(1.1, 0.9);
  }
  30% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.05, 0.95);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes stretch-animation {
  0% {
    transform: scale(1, 1);
  }
  10% {
    transform: scale(1.1, 0.9);
  }
  30% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.05, 0.95);
  }
  100% {
    transform: scale(1, 1);
  }
}

.socials {
  position: fixed;
  display: block;
  left: 20px;
  bottom: 20px;
}
.socials > a {
  display: block;
  width: 30px;
  opacity: 0.2;
  transform: scale(var(--scale, 0.8));
  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
}
.socials > a:hover {
  --scale: 1;
}

</style>
    

================================================
FILE: Tooltips/omriluz_heavy-emu-75.html
================================================
<!-- From Uiverse.io by omriluz  - Tags: simple, tooltip, icon, animation, hover effect, css -->
<div class="flex h-screen items-center justify-center">
  <div
    class="group relative flex h-40 w-40 items-center justify-center rounded-full border-[3px] border-purple-900 bg-gradient-to-bl from-amber-300 to-purple-500"
  >
    <div
      class="absolute inset-0 z-10 flex flex-col items-center justify-center text-center"
    >
      <span class="rounded-lg bg-white/50 p-2 text-xl font-bold text-gray-600"
        >Uiverse.io</span
      >
    </div>
    <svg
      class="absolute left-8 top-6 aspect-square w-10 text-amber-600 transition-all duration-1000 group-hover:-rotate-180"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      fill="currentColor"
      version="1.1"
      id="Capa_1"
      viewBox="0 0 45.973 45.973"
      xml:space="preserve"
    >
      <g>
        <g>
          <path
            d="M43.454,18.443h-2.437c-0.453-1.766-1.16-3.42-2.082-4.933l1.752-1.756c0.473-0.473,0.733-1.104,0.733-1.774    c0-0.669-0.262-1.301-0.733-1.773l-2.92-2.917c-0.947-0.948-2.602-0.947-3.545-0.001l-1.826,1.815    C30.9,6.232,29.296,5.56,27.529,5.128V2.52c0-1.383-1.105-2.52-2.488-2.52h-4.128c-1.383,0-2.471,1.137-2.471,2.52v2.607    c-1.766,0.431-3.38,1.104-4.878,1.977l-1.825-1.815c-0.946-0.948-2.602-0.947-3.551-0.001L5.27,8.205    C4.802,8.672,4.535,9.318,4.535,9.978c0,0.669,0.259,1.299,0.733,1.772l1.752,1.76c-0.921,1.513-1.629,3.167-2.081,4.933H2.501    C1.117,18.443,0,19.555,0,20.935v4.125c0,1.384,1.117,2.471,2.501,2.471h2.438c0.452,1.766,1.159,3.43,2.079,4.943l-1.752,1.763    c-0.474,0.473-0.734,1.106-0.734,1.776s0.261,1.303,0.734,1.776l2.92,2.919c0.474,0.473,1.103,0.733,1.772,0.733    s1.299-0.261,1.773-0.733l1.833-1.816c1.498,0.873,3.112,1.545,4.878,1.978v2.604c0,1.383,1.088,2.498,2.471,2.498h4.128    c1.383,0,2.488-1.115,2.488-2.498v-2.605c1.767-0.432,3.371-1.104,4.869-1.977l1.817,1.812c0.474,0.475,1.104,0.735,1.775,0.735    c0.67,0,1.301-0.261,1.774-0.733l2.92-2.917c0.473-0.472,0.732-1.103,0.734-1.772c0-0.67-0.262-1.299-0.734-1.773l-1.75-1.77    c0.92-1.514,1.627-3.179,2.08-4.943h2.438c1.383,0,2.52-1.087,2.52-2.471v-4.125C45.973,19.555,44.837,18.443,43.454,18.443z     M22.976,30.85c-4.378,0-7.928-3.517-7.928-7.852c0-4.338,3.55-7.85,7.928-7.85c4.379,0,7.931,3.512,7.931,7.85    C30.906,27.334,27.355,30.85,22.976,30.85z"
          ></path>
        </g>
      </g>
    </svg>
    <svg
      class="absolute left-[7px] top-[50px] aspect-square w-10 rotate-45 text-amber-400 transition-all duration-1000 group-hover:rotate-[225deg]"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      fill="currentColor"
      version="1.1"
      id="Capa_1"
      viewBox="0 0 576.048 576.047"
      xml:space="preserve"
    >
      <g>
        <g>
          <path
            d="M491.103,215.312c-8.841-24.651-22.222-47.73-39.651-67.984l41.965-73.324L368.537,2.532l-41.965,73.324    c-26.307-4.777-52.972-4.618-78.703,0.245L205.384,3.135L81.035,75.571l42.485,72.966c-8.394,9.89-16.105,20.572-22.807,32.28    c-6.683,11.677-11.989,23.736-16.282,36.013L0,217.154l0.529,143.909l84.45-0.318c8.822,24.68,22.194,47.711,39.636,67.979    l-41.965,73.32l124.878,71.473l41.965-73.324c26.292,4.768,52.954,4.648,78.672-0.264l42.501,72.979l124.349-72.434l-42.487-72.93    c8.394-9.932,16.138-20.633,22.821-32.311c6.701-11.707,11.989-23.779,16.298-36.043l84.4-0.303l-0.529-143.909L491.103,215.312z     M413.733,359.967c-39.734,69.426-128.229,93.496-197.655,53.762s-93.495-128.23-53.761-197.655    c39.734-69.425,128.229-93.495,197.654-53.761C429.397,202.047,453.468,290.542,413.733,359.967z"
          ></path>
        </g>
      </g>
    </svg>
    <div
      class="absolute h-full w-full bg-gradient-to-br from-amber-300 to-purple-500 opacity-0 group-hover:opacity-90 rounded-none group-hover:rounded-[100px] right-0 group-hover:-right-[50%] blur-md group-hover:blur-none z-40 transition-all duration-1000 flex justify-center items-center"
    >
      <span class="rounded-lg bg-white/50 p-2 text-xl font-bold text-gray-600"
        >Let's Create!</span
      >
    </div>
  </div>
</div>


    

================================================
FILE: Tooltips/original-lotfy_jolly-turkey-16.html
================================================
<div class="tooltip-container">
  <span class="tooltip">this is a test</span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by original-lotfy  - Tags: simple, material design, glassmorphism, flashy, tooltip, action, purple, pink */
/* thsi is a test */
.tooltip-container {
  --background: #053c85;
  position: relative;
  background: linear-gradient(100deg, #9b40fc, #0acbec);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  border-radius: 10px;
}

.tooltip-container > * {
  border-radius: 10px;
}

.tooltip {
  position: absolute;
  width: 8rem;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s;
  background: linear-gradient(-100deg, #9b40fc, #0acbec);
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.9em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: #4b5ef1;
  box-shadow: 0px 0px 7px #0acbec;
}

.tooltip-container:hover .tooltip {
  top: -120%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

================================================
FILE: Tooltips/piolho123_lazy-husky-91.html
================================================
<div class="tooltip-container">
  <span class="tooltip">Uiverse.io</span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by piolho123  - Tags: simple, tooltip, pink */
/* This is an example, feel free to delete this code */
.tooltip-container {
  border-radius: 20px;
  --background: #f1f;
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.tooltip {
  border: 1px solid #f1f;
  border-radius: 20px;
  position: absolute;
  top: 0;
  left: 10%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background: transparente;
  color: #f1f;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: var(--background);
}

.tooltip-container:hover .tooltip {
  top: -100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

================================================
FILE: Tooltips/sahilxkhadka_modern-snail-66.html
================================================
<!-- From Uiverse.io by sahilxkhadka  - Tags: simple, tooltip, button, hover effect, tailwind, tailwindbutton -->
<button
  class="group relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800"
>
  <span
    class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0"
  >
    Hover For Tooltip
  </span>
  <div class="hidden group-hover:block">
    <div
      class="group absolute -top-12 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center rounded-sm text-center text-sm text-slate-300 before:-top-2"
    >
      <div class="rounded-sm bg-black py-1 px-2">
        <p class="whitespace-nowrap">This is a tooltip.</p>
      </div>
      <div
        class="h-0 w-fit border-l-8 border-r-8 border-t-8 border-transparent border-t-black"
      ></div>
    </div>
  </div>
</button>


    

================================================
FILE: Tooltips/seyed-mohsen-mousavi_red-panda-0.html
================================================
<div class="tooltip-container">
  <span class="tooltip">
    <div class="table center">
      <div class="monitor-wrapper center">
        <div class="monitor center">
          <p>
            Uiverse.io :) Lorem ipsum dolor sit amet, consectetur adipiscing
            elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua.
          </p>
        </div>
      </div>
    </div>
  </span>
  <span class="text">Hover Me</span>
</div>

<style>
/* From Uiverse.io by seyed-mohsen-mousavi  - Tags: tooltip, hover, text animation */
/* This is an example, feel free to delete this code */
.tooltip-container {
  --background: #050321;
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  color: white;
  border: 5px solid #344151;
  -webkit-transition: border 0.3s ease;
  -moz-transition: border 0.1s ease;
  -o-transition: border 0.3s ease;
  -ms-transition: border 0.3s ease;
  font-family: monospace;
  border-radius: 1px;
}

.tooltip {
  position: absolute;
  top: 0;
  right: 135%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}

.tooltip-container:hover {
  border: 5px solid #cacdd0;
}
.text {
  font-weight: 600;
}
.tooltip-container:hover .tooltip {
  top: -100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* tooltip content */
.center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.table {
  width: 290px;
  height: 20px;
}

.table .monitor-wrapper {
  background: #050321;
  width: 270px;
  height: 30px;
  box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.table .monitor-wrapper .monitor {
  width: 200px;
  height: 22px;
  background-color: #344151;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: inset 0px 5px 10px 2px rgba(0, 0, 0, 0.3);
}

.table .monitor-wrapper .monitor p {
  font-family: "VT323", monospace;
  font-size: 18px;
  position: relative;
  display: inline-block;
  color: #ebb55f;
}

.tooltip-container:hover .table .monitor-wrapper .monitor p {
  animation: move 30s infinite linear;
}

@keyframes move {
  from {
    left: 250px;
  }

  to {
    left: -4800px;
  }
}

</style>
    

================================================
FILE: Tooltips/theleaderofenemy_rotten-liger-72.html
================================================
<div class="tooltip-container">
  <span class="text">Tooltip</span>
  <span class="tooltip">Uiverse.io</span>
</div>

<style>
/* From Uiverse.io by theleaderofenemy  - Tags: simple, tooltip, action, light */
.tooltip-container {
  position: relative;
  display: inline-block;
  margin: 20px;
}

.text {
  color: #333;
  font-size: 18px;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  background: #0b798a;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #0b798a transparent;
  transform: translateX(-50%);
}

.tooltip-container:hover .tooltip {
  top: 120%;
  opacity: 1;
  visibility: visible;
  background: #0e94a0;
  transform: translate(-50%, -5px);
}

</style>
    

================================================
FILE: Tooltips/themrsami_cold-horse-3.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: tooltip -->
<div
  class="flex justify-around gap-4 items-center px-4 py-1 bg-black rounded-[15px] ring-1 ring-white"
>
  <div
    class="relative group hover:cursor-pointer hover:bg-slate-800 p-2 rounded-full transition-all duration-500"
  >
    <svg
      width="20"
      height="20"
      viewBox="0 0 30 30"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M27.9167 30H20.4167C19.2658 30 18.3333 29.1392 18.3333 28.0769V21.1538C18.3333 20.3038 17.5875 19.6154 16.6667 19.6154H13.3333C12.4125 19.6154 11.6667 20.3038 11.6667 21.1538V28.0769C11.6667 29.1392 10.7342 30 9.58333 30H2.08333C0.9325 30 0 29.1392 0 28.0769V13.3946C0 11.6262 0.878334 9.95539 2.3825 8.86154L14.2258 0.246923C14.68 -0.0823077 15.32 -0.0823077 15.7733 0.246923L27.6183 8.86154C29.1225 9.95539 30 11.6254 30 13.3931V28.0769C30 29.1392 29.0675 30 27.9167 30Z"
        fill="white"
      ></path>
    </svg>

    <div
      class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-4 w-max px-2 py-1 text-white bg-black rounded-md opacity-0 scale-50 transition-all duration-500 group-hover:opacity-100 group-hover:scale-100"
    >
      Home
    </div>
  </div>

  <div
    class="relative group hover:cursor-pointer hover:bg-slate-800 p-2 rounded-full transition-all duration-500"
  >
    <svg
      width="20"
      height="20"
      viewBox="0 0 30 30"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M15.0013 0C10.482 0 6.81914 3.50348 6.81914 7.82609V9.13044C6.81914 13.453 10.482 16.9565 15.0013 16.9565C19.5206 16.9565 23.1835 13.453 23.1835 9.13044V7.82609C23.1835 3.50348 19.5206 0 15.0013 0ZM14.9987 20.8696C9.53569 20.8696 2.52628 23.6959 0.509366 26.2041C-0.737054 27.755 0.44947 30 2.49366 30H27.5063C29.5505 30 30.7371 27.755 29.4906 26.2041C27.4737 23.6972 20.4616 20.8696 14.9987 20.8696Z"
        fill="white"
      ></path>
    </svg>

    <div
      class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-4 w-max px-2 py-1 text-white bg-black rounded-md opacity-0 scale-50 transition-all duration-500 group-hover:opacity-100 group-hover:scale-100"
    >
      About
    </div>
  </div>

  <div
    class="relative group hover:cursor-pointer hover:bg-slate-800 p-2 rounded-full transition-all duration-500"
  >
    <svg
      width="20"
      height="20"
      viewBox="0 0 30 30"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M19.6641 0C19.4231 0 19.2178 0.171203 19.1738 0.408203L18.9531 1.58398C18.8961 1.88898 18.6546 2.11669 18.3496 2.17969C18.0656 2.23869 17.7857 2.31239 17.5137 2.40039C17.2187 2.49639 16.8973 2.42055 16.6953 2.18555L15.9199 1.2793C15.7629 1.0963 15.4981 1.05283 15.2891 1.17383L14.7109 1.50781C14.5029 1.62781 14.4083 1.88042 14.4883 2.10742L14.8848 3.23438C14.9878 3.52637 14.8931 3.84378 14.6621 4.05078C14.4471 4.24378 14.2438 4.44711 14.0508 4.66211C13.8438 4.89311 13.5264 4.98972 13.2344 4.88672L12.1055 4.48828C11.8785 4.40828 11.6278 4.50194 11.5078 4.71094L11.1719 5.29102C11.0519 5.49902 11.0973 5.76487 11.2793 5.92188L11.377 6.00586C12.56 6.02586 13.572 6.87206 13.791 8.03906L13.8516 8.35742L14.0605 8.11133C14.5195 7.57733 15.1622 7.28695 15.8262 7.25195C16.7222 5.89695 18.255 5 20 5C22.761 5 25 7.239 25 10C25 11.745 24.103 13.2779 22.748 14.1719C22.713 14.8359 22.4227 15.4795 21.8887 15.9375L21.6426 16.1465L21.9609 16.207C23.1279 16.426 23.9741 17.4381 23.9941 18.6211L24.0781 18.7188C24.2351 18.9017 24.5 18.9472 24.709 18.8262L25.2891 18.4902C25.4971 18.3702 25.5917 18.1196 25.5117 17.8926L25.1133 16.7637C25.0103 16.4717 25.1069 16.1543 25.3379 15.9473C25.5529 15.7543 25.7562 15.5509 25.9492 15.3359C26.1562 15.1049 26.4736 15.0103 26.7656 15.1133L27.8926 15.5098C28.1196 15.5898 28.3722 15.4961 28.4922 15.2871L28.8262 14.707C28.9462 14.499 28.9027 14.2351 28.7207 14.0781L27.8145 13.3008C27.5795 13.0988 27.5036 12.7774 27.5996 12.4824C27.6876 12.2104 27.7613 11.9324 27.8203 11.6484C27.8833 11.3444 28.111 11.1029 28.416 11.0449L29.5918 10.8223C29.8288 10.7813 30 10.5769 30 10.3359V9.66406C30 9.42306 29.8288 9.21783 29.5918 9.17383L28.416 8.95312C28.111 8.89612 27.8833 8.65461 27.8203 8.34961C27.7613 8.06561 27.6876 7.78567 27.5996 7.51367C27.5036 7.21867 27.5795 6.89731 27.8145 6.69531L28.7207 5.91992C28.9037 5.76292 28.9472 5.49806 28.8262 5.28906L28.4922 4.71094C28.3722 4.50294 28.1196 4.40828 27.8926 4.48828L26.7656 4.88477C26.4736 4.98777 26.1562 4.89311 25.9492 4.66211C25.7562 4.44711 25.5529 4.24378 25.3379 4.05078C25.1069 3.84378 25.0103 3.52637 25.1133 3.23438L25.5117 2.10547C25.5917 1.87847 25.4981 1.62781 25.2891 1.50781L24.709 1.17188C24.501 1.05188 24.2351 1.0973 24.0781 1.2793L23.3027 2.18555C23.1007 2.42055 22.7794 2.49639 22.4844 2.40039C22.2124 2.31239 21.9324 2.23869 21.6484 2.17969C21.3444 2.11669 21.1029 1.88703 21.0449 1.58203L20.8242 0.40625C20.7822 0.17025 20.5769 0 20.3359 0H19.6641ZM10.6641 8C10.4231 8 10.2178 8.17025 10.1738 8.40625L9.98828 9.39453C9.91128 9.80553 9.58383 10.1084 9.17383 10.1914C8.83283 10.2604 8.49788 10.3481 8.17188 10.4551C7.77588 10.5851 7.34131 10.4879 7.07031 10.1719L6.41992 9.41211C6.26292 9.23011 5.99706 9.18664 5.78906 9.30664L5.21094 9.64062C5.00194 9.76062 4.90828 10.0132 4.98828 10.2402L5.32422 11.1914C5.46222 11.5854 5.33053 12.0091 5.01953 12.2871C4.76253 12.5171 4.51806 12.7606 4.28906 13.0176C4.01106 13.3286 3.58736 13.4603 3.19336 13.3223L2.24023 12.9883C2.01323 12.9083 1.76258 13.0029 1.64258 13.2109L1.30664 13.7891C1.18564 13.9981 1.23106 14.2629 1.41406 14.4199L2.17383 15.0703C2.48983 15.3413 2.58703 15.7759 2.45703 16.1719C2.35003 16.4979 2.26236 16.8328 2.19336 17.1738C2.11036 17.5838 1.80748 17.9113 1.39648 17.9883L0.408203 18.1738C0.171203 18.2178 0 18.4231 0 18.6641V19.3359C0 19.5769 0.17025 19.7822 0.40625 19.8262L1.39453 20.0117C1.80553 20.0887 2.10841 20.4162 2.19141 20.8262C2.26041 21.1682 2.34808 21.5021 2.45508 21.8281C2.58508 22.2241 2.48788 22.6587 2.17188 22.9297L1.41211 23.5801C1.23011 23.7371 1.18664 24.0029 1.30664 24.2109L1.64062 24.7891C1.76062 24.9981 2.01323 25.0917 2.24023 25.0117L3.19141 24.6758C3.58541 24.5378 4.00911 24.6695 4.28711 24.9805C4.51711 25.2375 4.76058 25.4819 5.01758 25.7109C5.32858 25.9889 5.46027 26.4126 5.32227 26.8066L4.98828 27.7598C4.90828 27.9868 5.00294 28.2374 5.21094 28.3574L5.78906 28.6934C5.99806 28.8144 6.26292 28.7689 6.41992 28.5859L7.07031 27.8262C7.34131 27.5102 7.77588 27.413 8.17188 27.543C8.49788 27.65 8.83283 27.7376 9.17383 27.8066C9.58383 27.8896 9.91128 28.1925 9.98828 28.6035L10.1738 29.5918C10.2178 29.8288 10.4231 30 10.6641 30H11.3359C11.5769 30 11.7822 29.8287 11.8242 29.5938L12.0098 28.6055C12.0868 28.1945 12.4142 27.8916 12.8242 27.8086C13.1662 27.7396 13.5002 27.6519 13.8262 27.5449C14.2222 27.4149 14.6567 27.5121 14.9277 27.8281L15.5781 28.5879C15.7351 28.7699 15.999 28.8153 16.207 28.6953L16.7871 28.3594C16.9961 28.2394 17.0898 27.9887 17.0098 27.7617L16.6758 26.8086C16.5378 26.4146 16.6695 25.9909 16.9805 25.7129C17.2375 25.4829 17.4819 25.2394 17.7109 24.9824C17.9889 24.6714 18.4136 24.5397 18.8066 24.6777L19.7598 25.0117C19.9868 25.0917 20.2374 24.9971 20.3574 24.7891L20.6934 24.2109C20.8144 24.0019 20.7689 23.7371 20.5859 23.5801L19.8262 22.9297C19.5102 22.6587 19.413 22.2241 19.543 21.8281C19.65 21.5021 19.7376 21.1672 19.8066 20.8262C19.8896 20.4162 20.1925 20.0887 20.6035 20.0117L21.5918 19.8262C21.8288 19.7822 22 19.5769 22 19.3359V18.6641C22 18.4231 21.8287 18.2188 21.5938 18.1758L20.6055 17.9902C20.1945 17.9132 19.8916 17.5838 19.8086 17.1738C19.7396 16.8328 19.6519 16.4979 19.5449 16.1719C19.4149 15.7759 19.5121 15.3433 19.8281 15.0723L20.5879 14.4219C20.7699 14.2649 20.8153 13.999 20.6953 13.791L20.3594 13.2109C20.2394 13.0019 19.9887 12.9083 19.7617 12.9883L18.8086 13.3242C18.4146 13.4622 17.9909 13.3305 17.7129 13.0195C17.4829 12.7625 17.2394 12.5181 16.9824 12.2891C16.6714 12.0111 16.5397 11.5874 16.6777 11.1934L17.0117 10.2402C17.0917 10.0132 16.9971 9.76258 16.7891 9.64258L16.2109 9.30664C16.0019 9.18564 15.7371 9.23106 15.5801 9.41406L14.9297 10.1738C14.6587 10.4898 14.2241 10.587 13.8281 10.457C13.5021 10.35 13.1672 10.2624 12.8262 10.1934C12.4162 10.1104 12.0887 9.80748 12.0117 9.39648L11.8262 8.4082C11.7822 8.1712 11.5769 8 11.3359 8H10.6641ZM20 9C19.448 9 19 9.448 19 10C19 10.552 19.448 11 20 11C20.552 11 21 10.552 21 10C21 9.448 20.552 9 20 9ZM11 13C14.314 13 17 15.686 17 19C17 22.314 14.314 25 11 25C7.686 25 5 22.314 5 19C5 15.686 7.686 13 11 13ZM11 17C9.895 17 9 17.895 9 19C9 20.105 9.895 21 11 21C12.105 21 13 20.105 13 19C13 17.895 12.105 17 11 17Z"
        fill="white"
      ></path>
    </svg>

    <div
      class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-max px-2 py-1 text-white bg-black rounded-md opacity-0 transform scale-50 transition-all duration-500 group-hover:opacity-100 group-hover:scale-100"
    >
      Services
    </div>
  </div>

  <div
    class="relative group hover:cursor-pointer hover:bg-slate-800 p-2 rounded-full transition-all duration-500"
  >
    <svg
      width="20"
      height="20"
      viewBox="0 0 30 30"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12.6923 0C10.1547 0 8.07692 2.16563 8.07692 4.8V6H10.3846V4.8C10.3846 3.45938 11.4032 2.4 12.6923 2.4H17.3077C18.5968 2.4 19.6154 3.45938 19.6154 4.8V6H21.9231V4.8C21.9231 2.16563 19.8453 0 17.3077 0H12.6923ZM5.625 7.2C2.51953 7.2 0 9.82031 0 13.05V24.15C0 27.3797 2.51953 30 5.625 30H24.375C27.4805 30 30 27.3797 30 24.15V13.05C30 9.82031 27.4805 7.2 24.375 7.2H5.625ZM15 15.4875C16.3386 15.4875 17.4159 16.6078 17.4159 18C17.4159 19.3922 16.3386 20.5125 15 20.5125C13.6614 20.5125 12.5841 19.3922 12.5841 18C12.5841 16.6078 13.6614 15.4875 15 15.4875Z"
        fill="white"
      ></path>
    </svg>

    <div
      class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-max px-2 py-1 text-white bg-black rounded-md opacity-0 transform scale-50 transition-all duration-500 group-hover:opacity-100 group-hover:scale-100"
    >
      Portfolio
    </div>
  </div>

  <div
    class="relative group hover:cursor-pointer hover:bg-slate-800 p-2 rounded-full transition-all duration-500"
  >
    <svg
      width="20"
      height="20"
      viewBox="0 0 30 30"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M22.4672 19.4199C21.9377 19.1095 21.2868 19.116 20.7598 19.4291L18.0912 21.0191C17.4938 21.3751 16.7477 21.3334 16.1999 20.9056C15.2529 20.166 13.7282 18.9217 12.4016 17.5952C11.0751 16.2687 9.8308 14.7439 9.09124 13.7969C8.66342 13.2491 8.62168 12.503 8.97776 11.9057L10.5677 9.23697C10.8821 8.71002 10.8847 8.05394 10.5743 7.52438L6.65865 0.835732C6.27909 0.188781 5.52518 -0.129478 4.79606 0.0492166C4.0878 0.221389 3.16825 0.641386 2.20434 1.6066C-0.813896 4.62483 -2.41693 9.71567 8.93342 21.066C20.2838 32.4164 25.3733 30.8146 28.3928 27.7951C29.3593 26.8286 29.778 25.9077 29.9515 25.1982C30.1276 24.4703 29.8145 23.7216 29.1689 23.3434C27.5567 22.4004 24.0794 20.3643 22.4672 19.4199Z"
        fill="white"
      ></path>
    </svg>

    <div
      class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-max px-2 py-1 text-white bg-black rounded-md opacity-0 transform scale-50 transition-all duration-500 group-hover:opacity-100 group-hover:scale-100"
    >
      Contact
    </div>
  </div>
</div>


    

================================================
FILE: Tooltips/themrsami_quick-zebra-71.html
================================================
<!-- From Uiverse.io by themrsami  - Tags: tooltip -->
<div class="relative group inline-block">
  <div
    class="bg-white py-2 rounded-md shadow-lg hover:cursor-pointer flex justify-center items-center gap-4 px-4"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 18 14"
      height="25"
      width="25"
    >
      <path
        fill="#FFA000"
        d="M16.2 1.75H8.1L6.3 0H1.8C0.81 0 0 0.7875 0 1.75V12.25C0 13.2125 0.81 14 1.8 14H15.165L18 9.1875V3.5C18 2.5375 17.19 1.75 16.2 1.75Z"
      ></path>
      <path
        fill="#FFCA28"
        d="M16.2 2H1.8C0.81 2 0 2.77143 0 3.71429V12.2857C0 13.2286 0.81 14 1.8 14H16.2C17.19 14 18 13.2286 18 12.2857V3.71429C18 2.77143 17.19 2 16.2 2Z"
      ></path>
    </svg>
    <p>Project Structure</p>
  </div>

  <div
    class="absolute left-0 mt-2 w-64 bg-white border border-gray-200 rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-1000"
  >
    <ul class="p-4 space-y-1">
      <li class="py-1">📁 src</li>
      <li class="pl-4 py-1">📁 app</li>
      <li class="pl-8 py-1">📄 layout.js</li>
      <li class="pl-8 py-1">📄 page.js</li>
      <li class="pl-4 py-1">📁 components</li>
      <li class="pl-8 py-1">📄 header.js</li>
      <li class="pl-8 py-1">📄 footer.js</li>
      <li class="pl-4 py-1">📁 styles</li>
      <li class="pl-8 py-1">📄 globals.css</li>
    </ul>
  </div>
</div>


    

================================================
FILE: Tooltips/vikas7754_evil-mule-52.html
================================================
<div class="tooltip-container">
  <div class="tooltip">
    <div class="profile">
      <div class="user">
        <div class="img">Ui</div>
        <div class="details">
          <div class="name">User</div>
          <div class="username">@username</div>
        </div>
      </div>
      <div class="about">500+ Connections</div>
    </div>
  </div>
  <div class="text">
    <a class="icon" href="https://freecodez.com/">
      <div class="layer">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="fab fa-linkedin">
          <svg viewBox="0 0 448 512" height="1em">
            <path
              d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"
            ></path>
          </svg>
        </span>
      </div>
      <div class="text">LinkedIn</div>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by vikas7754  - Tags: neumorphism, tooltip, 3d, dark, modern */
.tooltip-container {
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  border-radius: 10px;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  border-radius: 15px;
  box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
    inset -5px -5px 15px rgba(255, 255, 255, 0.1),
    5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
}

.profile {
  background: #2a2b2f;
  border-radius: 10px 15px;
  padding: 10px;
  border: 1px solid rgba(11, 63, 95, 1);
}

.tooltip-container:hover .tooltip {
  top: -150px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.icon {
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;
}
.layer {
  width: 55px;
  height: 55px;
  transition: transform 0.3s;
}
.icon:hover .layer {
  transform: rotate(-35deg) skew(20deg);
}
.layer span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #fff;
  border-radius: 5px;
  transition: all 0.3s;
}

.layer span,
.text {
  color: #1da1f2;
  border-color: #1da1f2;
}

.icon:hover.layer span {
  box-shadow: -1px 1px 3px #1da1f2;
}
.icon .text {
  position: absolute;
  left: 50%;
  bottom: -5px;
  opacity: 0;
  font-weight: 500;
  transform: translateX(-50%);
  transition: bottom 0.3s ease, opacity 0.3s ease;
}
.icon:hover .text {
  bottom: -35px;
  opacity: 1;
}

.icon:hover .layer span:nth-child(1) {
  opacity: 0.2;
}
.icon:hover .layer span:nth-child(2) {
  opacity: 0.4;
  transform: translate(5px, -5px);
}
.icon:hover .layer span:nth-child(3) {
  opacity: 0.6;
  transform: translate(10px, -10px);
}
.icon:hover .layer span:nth-child(4) {
  opacity: 0.8;
  transform: translate(15px, -15px);
}
.icon:hover .layer span:nth-child(5) {
  opacity: 1;
  transform: translate(20px, -20px);
}

.layer span.fab {
  font-size: 30px;
  line-height: 64px;
  text-align: center;
  fill: #1da1f2;
  background: #000;
}
.user {
  display: flex;
  gap: 10px;
}
.img {
  width: 50px;
  height: 50px;
  font-size: 25px;
  font-weight: 700;
  border: 1px solid #1da1f2;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.name {
  font-size: 17px;
  font-weight: 700;
  color: #1da1f2;
}
.details {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: #fff;
}
.about {
  color: #ccc;
  padding-top: 5px;
}

</style>
    

================================================
FILE: Tooltips/vinodjangid07_mighty-elephant-52.html
================================================
<div class="tooltip-container">
  <span class="tooltip">45k</span>
  <span class="text">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 95 114"
      class="svgIcon"
    >
      <rect fill="black" rx="28.5" height="57" width="57" x="19"></rect>
      <path
        fill="black"
        d="M0 109.5C0 83.2665 21.2665 62 47.5 62V62C73.7335 62 95 83.2665 95 109.5V114H0V109.5Z"
      ></path>
    </svg>
    Follow</span
  >
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: tooltip, animation, social, hover, social media, follow, hover effect */
.tooltip-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s;
  background-color: rgb(255, 255, 255);
  padding: 11px 18px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid rgb(211, 211, 211);
}

.text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(0, 0, 0);
}
.svgIcon {
  width: 16px;
  height: auto;
}
.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background-color: rgb(255, 255, 255);
  border-radius: 12px;
  color: rgb(34, 34, 34);
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background-color: rgb(255, 255, 255);
}

.tooltip-container:hover .tooltip {
  top: -100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

================================================
FILE: Tooltips/vnuny_stale-mouse-74.html
================================================
<div class="item-hints">
  <div class="hint" data-position="4">
    <span class="hint-radius"></span>
    <span class="hint-dot">Tip</span>
    <div class="hint-content do--split-children">
      <p>Use Navbar to navigate the website quickly and easily.</p>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by vnuny  - Tags: simple, tooltip, animation, black, animated */
.item-hints {
  --purple: #720c8f;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  padding-right: 170px;
}
.item-hints .hint {
  margin: 150px auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-hints .hint-dot {
  z-index: 3;
  border: 1px solid #ffe4e4;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-transform: translate(-0%, -0%) scale(0.95);
  transform: translate(-0%, -0%) scale(0.95);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.item-hints .hint-radius {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -125px 0 0 -125px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.item-hints .hint[data-position="1"] .hint-content {
  top: 85px;
  left: 50%;
  margin-left: 56px;
}
.item-hints .hint-content {
  width: 300px;
  position: absolute;
  z-index: 5;
  padding: 35px 0;
  opacity: 0;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  color: #fff;
  visibility: hidden;
  pointer-events: none;
}
.item-hints .hint:hover .hint-content {
  position: absolute;
  z-index: 5;
  padding: 35px 0;
  opacity: 1;
  -webkit-transition: opacity 0.7s ease, visibility 0.7s ease;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  color: #fff;
  visibility: visible;
  pointer-events: none;
}
.item-hints .hint-content::before {
  width: 0px;
  bottom: 29px;
  left: 0;
  content: "";
  background-color: #fff;
  height: 1px;
  position: absolute;
  transition: width 0.4s;
}
.item-hints .hint:hover .hint-content::before {
  width: 180px;
  transition: width 0.4s;
}
.item-hints .hint-content::after {
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: rotate(-225deg);
  transform: rotate(-225deg);
  bottom: 29px;
  left: 0;
  width: 80px;
  content: "";
  background-color: #fff;
  height: 1px;
  position: absolute;
  opacity: 1;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.item-hints .hint:hover .hint-content::after {
  opacity: 1;
  visibility: visible;
}
.item-hints .hint[data-position="4"] .hint-content {
  bottom: 85px;
  left: 50%;
  margin-left: 56px;
}

</style>
    

================================================
FILE: loaders/0xnihilism_brown-puma-30.html
================================================
<div class="orwellian-container">
  <div class="orwellian-loader">
    <div class="eye">
      <div class="pupil"></div>
      <div class="eyelid"></div>
    </div>
    <div class="spotlight"></div>
    <div class="text">BIG BROTHER IS LOADING</div>
    <div class="scan-lines"></div>
    <div class="tv-effect"></div>
  </div>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: loading, loader, animated, light&dark, brutalism, orwellian */
.orwellian-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
}
.orwellian-container .orwellian-loader {
  width: 280px;
  height: 280px;
  background-color: #000;
  border: 10px solid #333;
  position: relative;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
}

.orwellian-container .eye {
  width: 160px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -60%);
  animation: pulse 2s infinite;
  overflow: hidden;
  z-index: 10;
}

.orwellian-container .pupil {
  width: 50px;
  height: 50px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: look-diagonal 4s infinite ease-in-out;
}

.orwellian-container .pupil::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, rgb(255, 0, 0) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.7;
}

.orwellian-container .eyelid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  animation: blink 4s infinite;
}

.orwellian-container .spotlight {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 47px;
  height: 200px;
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), transparent);
  filter: blur(8px);
  transform-origin: top;
  animation: spotlight-sweep-diagonal 4s infinite ease-in-out;
}

.orwellian-container .text {
  position: absolute;
  bottom: 20px;
  left: 10px;
  right: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #f8d17c;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: glitch 1s infinite;
  z-index: 20;
}

.orwellian-container .scan-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 0, 0, 0.3) 50%
  );
  background-size: 100% 4px;
  animation: scan 10s linear infinite;
  z-index: 30;
  opacity: 0.3;
  pointer-events: none;
}

.orwellian-container .tv-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  background-size: 100% 2px, 3px 100%;
  animation: tv-flicker 0.15s infinite;
  z-index: 35;
  pointer-events: none;
  opacity: 0.5;
}

.orwellian-container .orwellian-loader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 40;
}

.orwellian-container .orwellian-loader::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    transparent 30%,
    rgba(0, 0, 0, 0.5) 90%
  );
  z-index: 35;
  pointer-events: none;
}

@keyframes look-diagonal {
  0%,
  100% {
    transform: translateX(-50%) rotate(0deg);
  }
  25% {
    transform: translateX(-40%) rotate(-15deg);
  }
  75% {
    transform: translateX(-60%) rotate(15deg);
  }
}

@keyframes spotlight-sweep-diagonal {
  0%,
  100% {
    transform: translateX(-50%) rotate(0deg);
  }
  25% {
    transform: translateX(-40%) rotate(-15deg);
  }
  75% {
    transform: translateX(-60%) rotate(15deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: translate(-50%, -60%) scale(1);
  }
  50% {
    transform: translate(-50%, -60%) scale(1.05);
  }
}

@keyframes glitch {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  25% {
    transform: translate(-2px, 2px);
    opacity: 0.75;
  }
  50% {
    transform: translate(2px, -2px);
    opacity: 0.5;
  }
  75% {
    transform: translate(-2px, -2px);
    opacity: 0.75;
  }
}

@keyframes blink {
  0%,
  90%,
  100% {
    height: 0;
  }
  95% {
    height: 100%;
  }
}

@keyframes scan {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

@keyframes tv-flicker {
  0% {
    opacity: 0.27049;
  }
  5% {
    opacity: 0.34801;
  }
  10% {
    opacity: 0.23175;
  }
  15% {
    opacity: 0.40923;
  }
  20% {
    opacity: 0.29481;
  }
  25% {
    opacity: 0.38584;
  }
  30% {
    opacity: 0.24928;
  }
  35% {
    opacity: 0.32451;
  }
  40% {
    opacity: 0.37031;
  }
  45% {
    opacity: 0.26941;
  }
  50% {
    opacity: 0.35755;
  }
  55% {
    opacity: 0.29288;
  }
  60% {
    opacity: 0.31821;
  }
  65% {
    opacity: 0.39726;
  }
  70% {
    opacity: 0.25294;
  }
  75% {
    opacity: 0.36898;
  }
  80% {
    opacity: 0.28995;
  }
  85% {
    opacity: 0.3398;
  }
  90% {
    opacity: 0.38703;
  }
  95% {
    opacity: 0.24619;
  }
  100% {
    opacity: 0.35762;
  }
}

/* Additional styles to ensure full coverage */
.orwellian-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px; /* Ensures a minimum height for the container */
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .orwellian-container .orwellian-loader {
    width: 240px;
    height: 240px;
  }

  .orwellian-container .eye {
    width: 140px;
    height: 50px;
  }

  .orwellian-container .pupil {
    width: 40px;
    height: 40px;
  }

  .orwellian-container .spotlight {
    width: 40px;
    height: 160px;
  }

  .orwellian-container .text {
    font-size: 16px;
  }
}

/* Accessibility improvements */
.orwellian-container .text {
  user-select: none; /* Prevents text selection */
}

.orwellian-container .orwellian-loader:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.orwellian-container .orwellian-loader {
  animation: subtle-rotate 6s infinite ease-in-out;
}

/* Enhance TV effect */
.orwellian-container .tv-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 80%
    ),
    repeating-radial-gradient(
      circle at center,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 4px
    );
  background-size: 100% 100%, 3px 3px;
  pointer-events: none;
}

/* Improve text readability */
.orwellian-container .text {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5),
    0 0 10px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.2);
}

/* Enhance spotlight effect */
.orwellian-container .spotlight::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at top,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 70%
  );
  filter: blur(5px);
}

/* Add a pulsating glow to the eye */
@keyframes eye-glow {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
  }
}

.orwellian-container .eye {
  animation: pulse 2s infinite, eye-glow 4s infinite;
}

</style>
    

================================================
FILE: loaders/A-nshuman_fluffy-fox-90.html
================================================
<div class="blocks">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

<style>
/* From Uiverse.io by A-nshuman  - Tags: animation, loading, loader, creative, loading animation */
.blocks {
  border: 2px solid #2b83e2;
  max-width: 158px;
  padding: 4px;
  border-radius: 8px;
  gap: 4px;
  display: flex;
  flex-wrap: wrap;
}
.blocks .block {
  display: flex;
  flex: 1;
  border-radius: 4px;
  background: #2b83e2;
  width: 75px;
  height: 75px;
  animation: blockLoading 1s infinite;
}
.blocks .block:nth-child(1) {
  animation-delay: 0ms;
}
.blocks .block:nth-child(2) {
  animation-delay: 200ms;
}
.blocks .block:nth-child(3) {
  animation-delay: 400ms;
}
.blocks .block:nth-child(4) {
  animation-delay: 600ms;
}
@keyframes blockLoading {
  0%,
  100% {
    flex: 1;
  }
  50% {
    flex: 4;
  }
}

</style>
    

================================================
FILE: loaders/AHMED-MIT_cold-ape-73.html
================================================
<div class="spinner"></div>

<style>
/* From Uiverse.io by AHMED-MIT - Tags: loader */
.spinner {
  position: relative;
  width: 35.2px;
  height: 35.2px;
}

.spinner::before,
.spinner::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  animation: spinner-b4c8mmhg 0.5s backwards, spinner-49opz7hg 1.25s 0.5s infinite ease;
  border: 8.8px solid #000000;
  border-radius: 50%;
  box-shadow: 0 -52.8px 0 -8.8px #000000;
  position: absolute;
}

.spinner::after {
  animation-delay: 0s, 1.25s;
}

@keyframes spinner-b4c8mmhg {
  from {
    box-shadow: 0 0 0 -8.8px #000000;
  }
}

@keyframes spinner-49opz7hg {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/AHMED-MIT_curly-rabbit-4.html
================================================
<div class="spinner"></div>

<style>
/* From Uiverse.io by AHMED-MIT - Tags: loader */
.spinner {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4.5px solid #0000;
  border-radius: 50%;
  border-color: #dbdcef #0000;
  animation: spinner-e04l1k 1s infinite linear;
}

.spinner::before,
.spinner::after {
  content: "";
  grid-area: 1/1;
  margin: 2.2px;
  border: inherit;
  border-radius: 50%;
}

.spinner::before {
  border-color: #474bff #0000;
  animation: inherit;
  animation-duration: 0.5s;
  animation-direction: reverse;
}

.spinner::after {
  margin: 8.9px;
}

@keyframes spinner-e04l1k {
  100% {
    transform: rotate(1turn);
  }
}
</style>


================================================
FILE: loaders/AHMED-MIT_dry-wolverine-85.html
================================================
<div class="spinner">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
/* From Uiverse.io by AHMED-MIT - Tags: loader, accept, account */
.spinner {
  position: relative;
  width: 33.6px;
  height: 33.6px;
  perspective: 67.2px;
}

.spinner div {
  width: 100%;
  height: 100%;
  background: #474bff;
  position: absolute;
  left: 50%;
  transform-origin: left;
  animation: spinner-16s03x 2s infinite;
}

.spinner div:nth-child(1) {
  animation-delay: 0.15s;
}

.spinner div:nth-child(2) {
  animation-delay: 0.3s;
}

.spinner div:nth-child(3) {
  animation-delay: 0.45s;
}

.spinner div:nth-child(4) {
  animation-delay: 0.6s;
}

.spinner div:nth-child(5) {
  animation-delay: 0.75s;
}

@keyframes spinner-16s03x {
  0% {
    transform: rotateY(0deg);
  }

  50%, 80% {
    transform: rotateY(-180deg);
  }

  90%, 100% {
    opacity: 0;
    transform: rotateY(-180deg);
  }
}
</style>


================================================
FILE: loaders/AHMED-MIT_quick-dragonfly-5.html
================================================
<div class="spinner">
  <div></div>   
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
</div>


<style>
/* From Uiverse.io by AHMED-MIT - Tags: about me, css, 2FA */
.spinner {
  position: absolute;
  width: 9px;
  height: 9px;
}

.spinner div {
  position: absolute;
  width: 50%;
  height: 150%;
  background: #474bff;
  transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
  animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
}

.spinner div:nth-child(1) {
  --delay: 0.1;
  --rotation: 36;
  --translation: 150;
}

.spinner div:nth-child(2) {
  --delay: 0.2;
  --rotation: 72;
  --translation: 150;
}

.spinner div:nth-child(3) {
  --delay: 0.3;
  --rotation: 108;
  --translation: 150;
}

.spinner div:nth-child(4) {
  --delay: 0.4;
  --rotation: 144;
  --translation: 150;
}

.spinner div:nth-child(5) {
  --delay: 0.5;
  --rotation: 180;
  --translation: 150;
}

.spinner div:nth-child(6) {
  --delay: 0.6;
  --rotation: 216;
  --translation: 150;
}

.spinner div:nth-child(7) {
  --delay: 0.7;
  --rotation: 252;
  --translation: 150;
}

.spinner div:nth-child(8) {
  --delay: 0.8;
  --rotation: 288;
  --translation: 150;
}

.spinner div:nth-child(9) {
  --delay: 0.9;
  --rotation: 324;
  --translation: 150;
}

.spinner div:nth-child(10) {
  --delay: 1;
  --rotation: 360;
  --translation: 150;
}

@keyframes spinner-fzua35 {
  0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
  }

  50% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
  }
}

</style>


================================================
FILE: loaders/AHMED-MIT_serious-mule-65.html
================================================
<div class="spinner"></div>
<style>
/* From Uiverse.io by AHMED-MIT - Tags: loader, about me, accept call */
.spinner {
  --d: 24.6px;
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  color: #474bff;
  box-shadow: calc(1*var(--d))      calc(0*var(--d))     0 0,
          calc(0.707*var(--d))  calc(0.707*var(--d)) 0 1.1px,
          calc(0*var(--d))      calc(1*var(--d))     0 2.2px,
          calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3.4px,
          calc(-1*var(--d))     calc(0*var(--d))     0 4.5px,
          calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5.6px,
          calc(0*var(--d))      calc(-1*var(--d))    0 6.7px;
  animation: spinner-a90wxe 1s infinite steps(8);
}

@keyframes spinner-a90wxe {
  100% {
    transform: rotate(1turn);
  }
}
</style>


================================================
FILE: loaders/AbanoubMagdy1_evil-bullfrog-30.html
================================================
<div class="loader">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: loader */
.loader {
  --dim: 3rem;
  width: var(--dim);
  height: var(--dim);
  position: relative;
  animation: spin988 2s linear infinite;
}

.loader .circle {
  --color: #333;
  --dim: 1.2rem;
  width: var(--dim);
  height: var(--dim);
  background-color: var(--color);
  border-radius: 50%;
  position: absolute;
}

.loader .circle:nth-child(1) {
  top: 0;
  left: 0;
}

.loader .circle:nth-child(2) {
  top: 0;
  right: 0;
}

.loader .circle:nth-child(3) {
  bottom: 0;
  left: 0;
}

.loader .circle:nth-child(4) {
  bottom: 0;
  right: 0;
}

@keyframes spin988 {
  0% {
    transform: scale(1) rotate(0);
  }

  20%, 25% {
    transform: scale(1.3) rotate(90deg);
  }

  45%, 50% {
    transform: scale(1) rotate(180deg);
  }

  70%, 75% {
    transform: scale(1.3) rotate(270deg);
  }

  95%, 100% {
    transform: scale(1) rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/AbanoubMagdy1_hungry-elephant-87.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: loader */
.loader {
  --dim: 5rem;
  width: var(--dim);
  height: var(--dim);
  border: 7px solid #2596be;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: spin_51 1.5s infinite linear;
}

@keyframes spin_51 {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}
</style>


================================================
FILE: loaders/AbanoubMagdy1_tall-bobcat-75.html
================================================
<div class="loader">
  <svg class="loader-svg" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 47.94 47.94" style="enable-background:new 0 0 47.94 47.94;" xml:space="preserve">
<path style="fill:#fff;" d="M26.285,2.486l5.407,10.956c0.376,0.762,1.103,1.29,1.944,1.412l12.091,1.757
	c2.118,0.308,2.963,2.91,1.431,4.403l-8.749,8.528c-0.608,0.593-0.886,1.448-0.742,2.285l2.065,12.042
	c0.362,2.109-1.852,3.717-3.746,2.722l-10.814-5.685c-0.752-0.395-1.651-0.395-2.403,0l-10.814,5.685
	c-1.894,0.996-4.108-0.613-3.746-2.722l2.065-12.042c0.144-0.837-0.134-1.692-0.742-2.285l-8.749-8.528
	c-1.532-1.494-0.687-4.096,1.431-4.403l12.091-1.757c0.841-0.122,1.568-0.65,1.944-1.412l5.407-10.956
	C22.602,0.567,25.338,0.567,26.285,2.486z"></path>
</svg>
</div>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: loader */
.loader {
  --dim: 6rem;
  background-color: #ED8A19;
  width: var(--dim);
  height: var(--dim);
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: spin_412 5s infinite;
}

.loader .loader-svg {
  transform: translateY(-2px) scale(.7);
}

@keyframes spin_412 {
  0% {
    transform: rotate(0) scale(1);
  }

  50% {
    transform: rotate(720deg) scale(1.3);
  }

  100% {
    transform: rotate(0) scale(1);
  }
}
</style>


================================================
FILE: loaders/Abrar-Hussain1_lovely-rabbit-61.html
================================================
<div class="loader-container">
  <div class="loader"></div>
  <div class="loader-text">Loading...</div>
</div>

<style>
/* From Uiverse.io by Abrar-Hussain1  - Tags: animation, loading, loader, spinner, modern, circle, animated, circle loader */
.loader-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loader {
  width: 70px;
  height: 70px;
  position: relative;
}

.loader:before {
  content: "";
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 6px solid #007bff;
  position: absolute;
  top: 0;
  left: 0;
  animation: pulse 1s ease-in-out infinite;
}

.loader:after {
  content: "";
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 6px solid transparent;
  border-top-color: #007bff;
  position: absolute;
  top: 0;
  left: 0;
  animation: spin 2s linear infinite;
}

.loader-text {
  font-size: 24px;
  margin-top: 20px;
  color: #007bff;
  font-family: Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
}

@keyframes pulse {
  0% {
    transform: scale(0.6);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.content {
  display: none;
}

.loaded .loader-container {
  display: none;
}

.loaded .content {
  display: block;
}

</style>
    

================================================
FILE: loaders/Admin12121_black-sheep-17.html
================================================
<div class="loader">
  <div class="box box0">
    <div></div>
  </div>
  <div class="box box1">
    <div></div>
  </div>
  <div class="box box2">
    <div></div>
  </div>
  <div class="box box3">
    <div></div>
  </div>
  <div class="box box4">
    <div></div>
  </div>
  <div class="box box5">
    <div></div>
  </div>
  <div class="box box6">
    <div></div>
  </div>
  <div class="box box7">
    <div></div>
  </div>
  <div class="ground">
    <div></div>
  </div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: 3d, loader, effect loader, loading animation */
.loader {
  --duration: 3s;
  --primary: rgba(39, 94, 254, 1);
  --primary-light: #2f71ff;
  --primary-rgba: rgba(39, 94, 254, 0);
  width: 200px;
  height: 320px;
  position: relative;
  transform-style: preserve-3d;
}

@media (max-width: 480px) {
  .loader {
    zoom: 0.44;
  }
}

.loader:before, .loader:after {
  --r: 20.5deg;
  content: "";
  width: 320px;
  height: 140px;
  position: absolute;
  right: 32%;
  bottom: -11px;
/* change the back groung color on switching from light to dark mood */
  background: #e8e8e8;
  transform: translateZ(200px) rotate(var(--r));
  -webkit-animation: mask var(--duration) linear forwards infinite;
  animation: mask var(--duration) linear forwards infinite;
}

.loader:after {
  --r: -20.5deg;
  right: auto;
  left: 32%;
}

.loader .ground {
  position: absolute;
  left: -50px;
  bottom: -120px;
  transform-style: preserve-3d;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
}

.loader .ground div {
  transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  width: 200px;
  height: 200px;
  background: var(--primary);
  background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);
  transform-style: preserve-3d;
  -webkit-animation: ground var(--duration) linear forwards infinite;
  animation: ground var(--duration) linear forwards infinite;
}

.loader .ground div:before, .loader .ground div:after {
  --rx: 90deg;
  --ry: 0deg;
  --x: 44px;
  --y: 162px;
  --z: -50px;
  content: "";
  width: 156px;
  height: 300px;
  opacity: 0;
  background: linear-gradient(var(--primary), var(--primary-rgba));
  position: absolute;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
  -webkit-animation: ground-shine var(--duration) linear forwards infinite;
  animation: ground-shine var(--duration) linear forwards infinite;
}

.loader .ground div:after {
  --rx: 90deg;
  --ry: 90deg;
  --x: 0;
  --y: 177px;
  --z: 150px;
}

.loader .box {
  --x: 0;
  --y: 0;
  position: absolute;
  -webkit-animation: var(--duration) linear forwards infinite;
  animation: var(--duration) linear forwards infinite;
  transform: translate(var(--x), var(--y));
}

.loader .box div {
  background-color: var(--primary);
  width: 48px;
  height: 48px;
  position: relative;
  transform-style: preserve-3d;
  -webkit-animation: var(--duration) ease forwards infinite;
  animation: var(--duration) ease forwards infinite;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
}

.loader .box div:before, .loader .box div:after {
  --rx: 90deg;
  --ry: 0deg;
  --z: 24px;
  --y: -24px;
  --x: 0;
  content: "";
  position: absolute;
  background-color: inherit;
  width: inherit;
  height: inherit;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
  filter: brightness(var(--b, 1.2));
}

.loader .box div:after {
  --rx: 0deg;
  --ry: 90deg;
  --x: 24px;
  --y: 0;
  --b: 1.4;
}

.loader .box.box0 {
  --x: -220px;
  --y: -120px;
  left: 58px;
  top: 108px;
}

.loader .box.box1 {
  --x: -260px;
  --y: 120px;
  left: 25px;
  top: 120px;
}

.loader .box.box2 {
  --x: 120px;
  --y: -190px;
  left: 58px;
  top: 64px;
}

.loader .box.box3 {
  --x: 280px;
  --y: -40px;
  left: 91px;
  top: 120px;
}

.loader .box.box4 {
  --x: 60px;
  --y: 200px;
  left: 58px;
  top: 132px;
}

.loader .box.box5 {
  --x: -220px;
  --y: -120px;
  left: 25px;
  top: 76px;
}

.loader .box.box6 {
  --x: -260px;
  --y: 120px;
  left: 91px;
  top: 76px;
}

.loader .box.box7 {
  --x: -240px;
  --y: 200px;
  left: 58px;
  top: 87px;
}

.loader .box0 {
  -webkit-animation-name: box-move0;
  animation-name: box-move0;
}

.loader .box0 div {
  -webkit-animation-name: box-scale0;
  animation-name: box-scale0;
}

.loader .box1 {
  -webkit-animation-name: box-move1;
  animation-name: box-move1;
}

.loader .box1 div {
  -webkit-animation-name: box-scale1;
  animation-name: box-scale1;
}

.loader .box2 {
  -webkit-animation-name: box-move2;
  animation-name: box-move2;
}

.loader .box2 div {
  -webkit-animation-name: box-scale2;
  animation-name: box-scale2;
}

.loader .box3 {
  -webkit-animation-name: box-move3;
  animation-name: box-move3;
}

.loader .box3 div {
  -webkit-animation-name: box-scale3;
  animation-name: box-scale3;
}

.loader .box4 {
  -webkit-animation-name: box-move4;
  animation-name: box-move4;
}

.loader .box4 div {
  -webkit-animation-name: box-scale4;
  animation-name: box-scale4;
}

.loader .box5 {
  -webkit-animation-name: box-move5;
  animation-name: box-move5;
}

.loader .box5 div {
  -webkit-animation-name: box-scale5;
  animation-name: box-scale5;
}

.loader .box6 {
  -webkit-animation-name: box-move6;
  animation-name: box-move6;
}

.loader .box6 div {
  -webkit-animation-name: box-scale6;
  animation-name: box-scale6;
}

.loader .box7 {
  -webkit-animation-name: box-move7;
  animation-name: box-move7;
}

.loader .box7 div {
  -webkit-animation-name: box-scale7;
  animation-name: box-scale7;
}

@-webkit-keyframes box-move0 {
  12% {
    transform: translate(var(--x), var(--y));
  }

  25%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move0 {
  12% {
    transform: translate(var(--x), var(--y));
  }

  25%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale0 {
  6% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  14%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale0 {
  6% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  14%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move1 {
  16% {
    transform: translate(var(--x), var(--y));
  }

  29%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move1 {
  16% {
    transform: translate(var(--x), var(--y));
  }

  29%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale1 {
  10% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  18%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale1 {
  10% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  18%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move2 {
  20% {
    transform: translate(var(--x), var(--y));
  }

  33%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move2 {
  20% {
    transform: translate(var(--x), var(--y));
  }

  33%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale2 {
  14% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  22%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale2 {
  14% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  22%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move3 {
  24% {
    transform: translate(var(--x), var(--y));
  }

  37%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move3 {
  24% {
    transform: translate(var(--x), var(--y));
  }

  37%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale3 {
  18% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  26%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale3 {
  18% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  26%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move4 {
  28% {
    transform: translate(var(--x), var(--y));
  }

  41%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move4 {
  28% {
    transform: translate(var(--x), var(--y));
  }

  41%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale4 {
  22% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  30%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale4 {
  22% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  30%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move5 {
  32% {
    transform: translate(var(--x), var(--y));
  }

  45%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move5 {
  32% {
    transform: translate(var(--x), var(--y));
  }

  45%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale5 {
  26% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  34%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale5 {
  26% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  34%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move6 {
  36% {
    transform: translate(var(--x), var(--y));
  }

  49%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move6 {
  36% {
    transform: translate(var(--x), var(--y));
  }

  49%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale6 {
  30% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  38%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale6 {
  30% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  38%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move7 {
  40% {
    transform: translate(var(--x), var(--y));
  }

  53%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move7 {
  40% {
    transform: translate(var(--x), var(--y));
  }

  53%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale7 {
  34% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  42%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale7 {
  34% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  42%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes ground {
  0%, 65% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }

  75%, 90% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
  }

  100% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }
}

@keyframes ground {
  0%, 65% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }

  75%, 90% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
  }

  100% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }
}

@-webkit-keyframes ground-shine {
  0%, 70% {
    opacity: 0;
  }

  75%, 87% {
    opacity: 0.2;
  }

  100% {
    opacity: 0;
  }
}

@keyframes ground-shine {
  0%, 70% {
    opacity: 0;
  }

  75%, 87% {
    opacity: 0.2;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes mask {
  0%, 65% {
    opacity: 0;
  }

  66%, 100% {
    opacity: 1;
  }
}

@keyframes mask {
  0%, 65% {
    opacity: 0;
  }

  66%, 100% {
    opacity: 1;
  }
}

</style>


================================================
FILE: loaders/Admin12121_horrible-hound-96.html
================================================
<div class="con">
  <div class="side left"></div>
  <div class="side right"></div>
  <div class="side rightAbove"></div>
  <div class="side bottom"></div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: loader, animated, effect loader */
.con {
  width: 120px;
  height: 120px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: 60px 50px;
  -webkit-animation: spin 3s infinite;
  animation: spin 3s infinite;
}

.side {
  width: 110px;
  height: 30px;
  background: white;
  position: absolute;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.side:before, .side:after {
  content: "";
  display: block;
  position: absolute;
}

.side:before {
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 20px solid #fff;
  border-top: 35px solid #111;
  left: 0;
}

.side:after {
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 20px solid #111;
  border-bottom: 35px solid transparent;
  right: 0;
}

.left {
  left: 0px;
  transform: rotate(120deg);
  z-index: 2;
}

.right, .rightAbove {
  transform: rotate(-120deg);
  right: -30px;
  top: 50px;
}

.rightAbove {
  clip: rect(0px 90px 30px 0);
  z-index: 4;
}

.under {
  z-index: 1;
}

.bottom {
  left: -24px;
  bottom: 30px;
  z-index: 3;
}

@-webkit-keyframes spin {
  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(720deg);
  }
}

@keyframes spin {
  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(720deg);
  }
}
</style>


================================================
FILE: loaders/Admin12121_selfish-starfish-81.html
================================================
<div class="fire">
  <div class="fire-left">
    <div class="main-fire"></div>
    <div class="particle-fire"></div>
  </div>
  <div class="fire-center">
    <div class="main-fire"></div>
    <div class="particle-fire"></div>
  </div>
  <div class="fire-right">
    <div class="main-fire"></div>
    <div class="particle-fire"></div>
  </div>
  <div class="fire-bottom">
    <div class="main-fire"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: loader, animal, trending */
@keyframes scaleUpDown {
  0%, 100% {
    transform: scaleY(1) scaleX(1);
  }

  50%, 90% {
    transform: scaleY(1.1);
  }

  75% {
    transform: scaleY(0.95);
  }

  80% {
    transform: scaleX(0.95);
  }
}

@keyframes shake {
  0%, 100% {
    transform: skewX(0) scale(1);
  }

  50% {
    transform: skewX(5deg) scale(0.9);
  }
}

@keyframes particleUp {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    top: -100%;
    transform: scale(0.5);
  }
}

@keyframes glow {
  0%, 100% {
    background-color: #ef5a00;
  }

  50% {
    background-color: #ff7800;
  }
}

.fire {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
}

.fire-center {
  position: absolute;
  height: 100%;
  width: 100%;
  animation: scaleUpDown 3s ease-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-center .main-fire {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(farthest-corner at 10px 0, #d43300 0%, #ef5a00 95%);
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 60% 40%;
  filter: drop-shadow(0 0 10px #d43322);
}

.fire-center .particle-fire {
  position: absolute;
  top: 60%;
  left: 45%;
  width: 10px;
  height: 10px;
  background-color: #ef5a00;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px #d43322);
  animation: particleUp 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-right {
  height: 100%;
  width: 100%;
  position: absolute;
  animation: shake 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-right .main-fire {
  position: absolute;
  top: 15%;
  right: -25%;
  width: 80%;
  height: 80%;
  background-color: #ef5a00;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 60% 40%;
  filter: drop-shadow(0 0 10px #d43322);
}

.fire-right .particle-fire {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 15px;
  height: 15px;
  background-color: #ef5a00;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 50%;
  filter: drop-shadow(0 0 10px #d43322);
  animation: particleUp 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-left {
  position: absolute;
  height: 100%;
  width: 100%;
  animation: shake 3s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-left .main-fire {
  position: absolute;
  top: 15%;
  left: -20%;
  width: 80%;
  height: 80%;
  background-color: #ef5a00;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 60% 40%;
  filter: drop-shadow(0 0 10px #d43322);
}

.fire-left .particle-fire {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 10%;
  height: 10%;
  background-color: #ef5a00;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px #d43322);
  animation: particleUp 3s infinite ease-out 0;
  animation-fill-mode: both;
}

.fire-bottom .main-fire {
  position: absolute;
  top: 30%;
  left: 20%;
  width: 75%;
  height: 75%;
  background-color: #ff7800;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 100% 40%;
  filter: blur(10px);
  animation: glow 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
</style>


================================================
FILE: loaders/Admin12121_stupid-mouse-29.html
================================================
<div class="scene">
  <div class="forest">
    <div class="tree tree1">
      <div class="branch branch-top"></div>
      <div class="branch branch-middle"></div>
    </div>

    <div class="tree tree2">
      <div class="branch branch-top"></div>
      <div class="branch branch-middle"></div>
      <div class="branch branch-bottom"></div>
    </div>

    <div class="tree tree3">
      <div class="branch branch-top"></div>
      <div class="branch branch-middle"></div>
      <div class="branch branch-bottom"></div>
    </div>

    <div class="tree tree4">
      <div class="branch branch-top"></div>
      <div class="branch branch-middle"></div>
      <div class="branch branch-bottom"></div>
    </div>

    <div class="tree tree5">
      <div class="branch branch-top"></div>
      <div class="branch branch-middle"></div>
      <div class="branch branch-bottom"></div>
    </div>

    <div class="tree tree6">
      <div class="branch branch-top"></div>
      <div class="branch branch-middle"></div>
      <div class="branch branch-bottom"></div>
    </div>

    <div class="tree tree7">
      <div class="branch branch-top"></div>
      <div class="branch branch-middle"></div>
      <div class="branch branch-bottom"></div>
    </div>
  </div>
  
  <div class="tent">
      <div class="roof"></div>
      <div class="roof-border-left">
        <div class="roof-border roof-border1"></div>
        <div class="roof-border roof-border2"></div>
        <div class="roof-border roof-border3"></div>
      </div>
      <div class="entrance">
        <div class="door left-door">
          <div class="left-door-inner"></div>
        </div>
        <div class="door right-door">
          <div class="right-door-inner"></div>
        </div>
      </div>
    </div>

  <div class="floor">
      <div class="ground ground1"></div>
      <div class="ground ground2"></div>
    </div>
  
  <div class="fireplace">
    <div class="support"></div>
    <div class="support"></div>
    <div class="bar"></div>
    <div class="hanger"></div>
    <div class="smoke"></div>
    <div class="pan"></div>
    <div class="fire">
      <div class="line line1">
        <div class="particle particle1"></div>
        <div class="particle particle2"></div>
        <div class="particle particle3"></div>
        <div class="particle particle4"></div>
      </div>
      <div class="line line2">
        <div class="particle particle1"></div>
        <div class="particle particle2"></div>
        <div class="particle particle3"></div>
        <div class="particle particle4"></div>
      </div>
      <div class="line line3">
        <div class="particle particle1"></div>
        <div class="particle particle2"></div>
        <div class="particle particle3"></div>
        <div class="particle particle4"></div>
      </div>
    </div>
  </div>
  
  <div class="time-wrapper">
    <div class="time">
      <div class="day"></div>
      <div class="night">
        <div class="moon"></div>
        <div class="star star1 star-big"></div>
        <div class="star star2 star-big"></div>
        <div class="star star3 star-big"></div>
        <div class="star star4"></div>
        <div class="star star5"></div>
        <div class="star star6"></div>
        <div class="star star7"></div>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Admin12121 - Tags: loader, animated */
@keyframes stageBackground {
  0%, 10%, 90%, 100% {
    background-color: #00B6BB;
  }

  25%, 75% {
    background-color: #0094bd;
  }
}

@keyframes earthRotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes sunrise {
  0%, 10%, 90%, 100% {
    box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3);
  }

  25%, 75% {
    box-shadow: 0 0 0 0 #5ad6bd, 0 0 0 0 #4acead, 0 0 0 0 rgba(74, 206, 173, 0.6), 0 0 0 0 rgba(74, 206, 173, 0.3);
  }
}

@keyframes moonOrbit {
  25% {
    transform: rotate(-60deg);
  }

  50% {
    transform: rotate(-60deg);
  }

  75% {
    transform: rotate(-120deg);
  }

  0%, 100% {
    transform: rotate(-180deg);
  }
}

@keyframes nightTime {
  0%, 90% {
    opacity: 0;
  }

  50%, 75% {
    opacity: 1;
  }
}

@keyframes hotPan {
  0%, 90% {
    background-color: #74667e;
  }

  50%, 75% {
    background-color: #b2241c;
  }
}

@keyframes heat {
  0%, 90% {
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.3);
  }

  50%, 75% {
    box-shadow: inset 0 -2px 0 0 white;
  }
}

@keyframes smoke {
  0%, 50%, 90%, 100% {
    opacity: 0;
  }

  50%, 75% {
    opacity: 0.7;
  }
}

@keyframes fire {
  0%, 90%, 100% {
    opacity: 0;
  }

  50%, 75% {
    opacity: 1;
  }
}

@keyframes treeShake {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-2deg);
  }

  40% {
    transform: rotate(4deg);
  }

  50% {
    transform: rotate(-4deg);
  }

  60% {
    transform: rotate(6deg);
  }

  75% {
    transform: rotate(-6deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes fireParticles {
  0% {
    height: 30%;
    opacity: 1;
    top: 75%;
  }

  25% {
    height: 25%;
    opacity: 0.8;
    top: 40%;
  }

  50% {
    height: 15%;
    opacity: 0.6;
    top: 20%;
  }

  75% {
    height: 10%;
    opacity: 0.3;
    top: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fireLines {
  0%, 25%, 75%, 100% {
    bottom: 0;
  }

  50% {
    bottom: 5%;
  }
}

.scene {
  display: flex;
  margin: 0 auto 80px auto;
  justify-content: center;
  align-items: flex-end;
  width: 400px;
  height: 300px;
  position: relative;
}

.forest {
  display: flex;
  width: 75%;
  height: 90%;
  position: relative;
}

.tree {
  display: block;
  width: 50%;
  position: absolute;
  bottom: 0;
  opacity: 0.4;
}

.tree .branch {
  width: 80%;
  height: 0;
  margin: 0 auto;
  padding-left: 40%;
  padding-bottom: 50%;
  overflow: hidden;
}

.tree .branch:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -600px;
  border-left: 600px solid transparent;
  border-right: 600px solid transparent;
  border-bottom: 950px solid #000;
}

.tree .branch.branch-top {
  transform-origin: 50% 100%;
  animation: treeShake 0.5s linear infinite;
}

.tree .branch.branch-middle {
  width: 90%;
  padding-left: 45%;
  padding-bottom: 65%;
  margin: 0 auto;
  margin-top: -25%;
}

.tree .branch.branch-bottom {
  width: 100%;
  padding-left: 50%;
  padding-bottom: 80%;
  margin: 0 auto;
  margin-top: -40%;
}

.tree1 {
  width: 31%;
}

.tree1 .branch-top {
  transition-delay: 0.3s;
}

.tree2 {
  width: 39%;
  left: 9%;
}

.tree2 .branch-top {
  transition-delay: 0.4s;
}

.tree3 {
  width: 32%;
  left: 24%;
}

.tree3 .branch-top {
  transition-delay: 0.5s;
}

.tree4 {
  width: 37%;
  left: 34%;
}

.tree4 .branch-top {
  transition-delay: 0.6s;
}

.tree5 {
  width: 44%;
  left: 44%;
}

.tree5 .branch-top {
  transition-delay: 0.7s;
}

.tree6 {
  width: 34%;
  left: 61%;
}

.tree6 .branch-top {
  transition-delay: 0.2s;
}

.tree7 {
  width: 24%;
  left: 76%;
}

.tree7 .branch-top {
  transition-delay: 0.1s;
}

.tent {
  width: 60%;
  height: 25%;
  position: absolute;
  bottom: -0.5%;
  right: 15%;
  z-index: 1;
  text-align: right;
}

.roof {
  display: inline-block;
  width: 45%;
  height: 100%;
  margin-right: 10%;
  position: relative;
  /*bottom: 0;
  right: 9%;*/
  z-index: 1;
  border-top: 4px solid #4D4454;
  border-right: 4px solid #4D4454;
  border-left: 4px solid #4D4454;
  border-top-right-radius: 6px;
  transform: skew(30deg);
  box-shadow: inset -3px 3px 0px 0px #F7B563;
  /*background: linear-gradient(
    to bottom, 
    rgba(246,212,132,1) 0%,
    rgba(246,212,132,1) 24%,
    rgba(#F0B656,1) 25%,
    rgba(#F0B656,1) 74%,
    rgba(235,151,53,1) 75%,
    rgba(235,151,53,1) 100%
  );*/
  background: #f6d484;
}

.roof:before {
  content: "";
  width: 70%;
  height: 70%;
  position: absolute;
  top: 15%;
  left: 15%;
  z-index: 0;
  border-radius: 10%;
  background-color: #E78C20;
}

.roof:after {
  content: "";
  height: 75%;
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(231, 140, 32, 0.4) 0%, rgba(231, 140, 32, 0.4) 64%, rgba(231, 140, 32, 0.8) 65%, rgba(231, 140, 32, 0.8) 100%);
}

.roof-border-left {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 1%;
  height: 125%;
  position: absolute;
  top: 0;
  left: 35.7%;
  z-index: 1;
  transform-origin: 50% 0%;
  transform: rotate(35deg);
}

.roof-border-left .roof-border {
  display: block;
  width: 100%;
  border-radius: 2px;
  border: 2px solid #4D4454;
}

.roof-border-left .roof-border1 {
  height: 40%;
}

.roof-border-left .roof-border2 {
  height: 10%;
}

.roof-border-left .roof-border3 {
  height: 40%;
}

.door {
  width: 55px;
  height: 92px;
  position: absolute;
  bottom: 2%;
  overflow: hidden;
  z-index: 0;
  transform-origin: 0 105%;
}

.left-door {
  transform: rotate(35deg);
  position: absolute;
  left: 13.5%;
  bottom: -3%;
  z-index: 0;
}

.left-door .left-door-inner {
  width: 100%;
  height: 100%;
  transform-origin: 0 105%;
  transform: rotate(-35deg);
  position: absolute;
  top: 0;
  overflow: hidden;
  background-color: #EDDDC2;
}

.left-door .left-door-inner:before {
  content: "";
  width: 15%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: repeating-linear-gradient(#D4BC8B, #D4BC8B 4%, #E0D2A8 5%, #E0D2A8 10%);
}

.left-door .left-door-inner:after {
  content: "";
  width: 50%;
  height: 100%;
  position: absolute;
  top: 15%;
  left: 10%;
  transform: rotate(25deg);
  background-color: #fff;
}

.right-door {
  height: 89px;
  right: 21%;
  transform-origin: 0 105%;
  transform: rotate(-30deg) scaleX(-1);
  position: absolute;
  bottom: -3%;
  z-index: 0;
}

.right-door .right-door-inner {
  width: 100%;
  height: 100%;
  transform-origin: 0 120%;
  transform: rotate(-30deg);
  position: absolute;
  bottom: 0px;
  overflow: hidden;
  background-color: #EFE7CF;
}

.right-door .right-door-inner:before {
  content: "";
  width: 50%;
  height: 100%;
  position: absolute;
  top: 15%;
  right: -28%;
  z-index: 1;
  transform: rotate(15deg);
  background-color: #524A5A;
}

.right-door .right-door-inner:after {
  content: "";
  width: 50%;
  height: 100%;
  position: absolute;
  top: 15%;
  right: -20%;
  transform: rotate(20deg);
  background-color: #fff;
}

.floor {
  width: 80%;
  position: absolute;
  right: 10%;
  bottom: 0;
  z-index: 1;
}

.floor .ground {
  position: absolute;
  border-radius: 2px;
  border: 2px solid #4D4454;
}

.floor .ground.ground1 {
  width: 65%;
  left: 0;
}

.floor .ground.ground2 {
  width: 30%;
  right: 0;
}

.fireplace {
  display: block;
  width: 24%;
  height: 20%;
  position: absolute;
  left: 5%;
}

.fireplace:before {
  content: "";
  display: block;
  width: 8%;
  position: absolute;
  bottom: -4px;
  left: 2%;
  border-radius: 2px;
  border: 2px solid #4D4454;
  background: #4D4454;
}

.fireplace .support {
  display: block;
  height: 105%;
  width: 2px;
  position: absolute;
  bottom: -5%;
  left: 10%;
  border: 2px solid #4D4454;
}

.fireplace .support:before {
  content: "";
  width: 100%;
  height: 15%;
  position: absolute;
  top: -18%;
  left: -4px;
  border-radius: 2px;
  border: 2px solid #4D4454;
  transform-origin: 100% 100%;
  transform: rotate(45deg);
}

.fireplace .support:after {
  content: "";
  width: 100%;
  height: 15%;
  position: absolute;
  top: -18%;
  left: 0px;
  border-radius: 2px;
  border: 2px solid #4D4454;
  transform-origin: 0 100%;
  transform: rotate(-45deg);
}

.fireplace .support:nth-child(1) {
  left: 85%;
}

.fireplace .bar {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  border: 2px solid #4D4454;
}

.fireplace .hanger {
  display: block;
  width: 2px;
  height: 25%;
  margin-left: -4px;
  position: absolute;
  left: 50%;
  border: 2px solid #4D4454;
}

.fireplace .pan {
  display: block;
  width: 25%;
  height: 50%;
  border-radius: 50%;
  border: 4px solid #4D4454;
  position: absolute;
  top: 25%;
  left: 35%;
  overflow: hidden;
  animation: heat 5s linear infinite;
}

.fireplace .pan:before {
  content: "";
  display: block;
  height: 53%;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: -1;
  border-top: 4px solid #4D4454;
  background-color: #74667e;
  animation: hotPan 5s linear infinite;
}

.fireplace .smoke {
  display: block;
  width: 20%;
  height: 25%;
  position: absolute;
  top: 25%;
  left: 37%;
  background-color: white;
  filter: blur(5px);
  animation: smoke 5s linear infinite;
}

.fireplace .fire {
  display: block;
  width: 25%;
  height: 120%;
  position: absolute;
  bottom: 0;
  left: 33%;
  z-index: 1;
  animation: fire 5s linear infinite;
}

.fireplace .fire:before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: -4px;
  z-index: 1;
  border-radius: 2px;
  border: 1px solid #efb54a;
  background-color: #efb54a;
}

.fireplace .fire .line {
  display: block;
  width: 2px;
  height: 100%;
  position: absolute;
  bottom: 0;
  animation: fireLines 1s linear infinite;
}

.fireplace .fire .line2 {
  left: 50%;
  margin-left: -1px;
  animation-delay: 0.3s;
}

.fireplace .fire .line3 {
  right: 0;
  animation-delay: 0.5s;
}

.fireplace .fire .line .particle {
  height: 10%;
  position: absolute;
  top: 100%;
  z-index: 1;
  border-radius: 2px;
  border: 2px solid #efb54a;
  animation: fireParticles 0.5s linear infinite;
}

.fireplace .fire .line .particle1 {
  animation-delay: 0.1s;
}

.fireplace .fire .line .particle2 {
  animation-delay: 0.3s;
}

.fireplace .fire .line .particle3 {
  animation-delay: 0.6s;
}

.fireplace .fire .line .particle4 {
  animation-delay: 0.9s;
}

.time-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.time {
  display: block;
  width: 100%;
  height: 200%;
  position: absolute;
  transform-origin: 50% 50%;
  transform: rotate(270deg);
  animation: earthRotation 5s linear infinite;
}

.time .day {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 20%;
  left: 40%;
  border-radius: 50%;
  box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3);
  animation: sunrise 5s ease-in-out infinite;
  background-color: #ef9431;
}

.time .night {
  animation: nightTime 5s ease-in-out infinite;
}

.time .night .star {
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  bottom: 10%;
  border-radius: 50%;
  background-color: #fff;
}

.time .night .star-big {
  width: 6px;
  height: 6px;
}

.time .night .star1 {
  right: 23%;
  bottom: 25%;
}

.time .night .star2 {
  right: 35%;
  bottom: 18%;
}

.time .night .star3 {
  right: 47%;
  bottom: 25%;
}

.time .night .star4 {
  right: 22%;
  bottom: 20%;
}

.time .night .star5 {
  right: 18%;
  bottom: 30%;
}

.time .night .star6 {
  right: 60%;
  bottom: 20%;
}

.time .night .star7 {
  right: 70%;
  bottom: 23%;
}

.time .night .moon {
  display: block;
  width: 25px;
  height: 25px;
  position: absolute;
  bottom: 22%;
  right: 33%;
  border-radius: 50%;
  transform: rotate(-60deg);
  box-shadow: 9px 9px 3px 0 white;
  filter: blur(1px);
  animation: moonOrbit 5s ease-in-out infinite;
}

.time .night .moon:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -9px;
  left: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05), 0 0 0 15px rgba(255, 255, 255, 0.05), 0 0 0 25px rgba(255, 255, 255, 0.05), 0 0 0 35px rgba(255, 255, 255, 0.05);
  background-color: rgba(255, 255, 255, 0.2);
}
</style>


================================================
FILE: loaders/Admin12121_white-husky-41.html
================================================
<div class="content">
   <div class="planet">
      <div class="ring"></div>
         <div class="cover-ring"></div>
      <div class="spots">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>

      </div>
   </div>
   <p>loading</p>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: loader, 3d loader */
.content {
  width: 300px;
  height: 300px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content .planet {
  width: 65%;
  height: 65%;
  background-color: #546c8c;
  border-radius: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  transform-origin: center center;
  box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);
  animation: planet 5s ease infinite alternate;
  /* planet ring */
  /* to cover the back of the ring */
  /* planet spots */
}

@keyframes planet {
  0% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(-10deg);
  }
}

.content .planet .ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  background-color: #bacbd9;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 33% center;
  box-shadow: 2px -10px 0px rgba(0, 0, 0, 0.1), inset -5px -10px 0px rgba(0, 0, 0, 0.1);
  animation: ring 3s ease infinite;
  /* small ball */
  /* inner ring */
}

@keyframes ring {
  0% {
    transform: rotateX(110deg) rotateZ(0deg) translate(-50px, 5px);
  }

  100% {
    transform: rotateX(110deg) rotateZ(360deg) translate(-50px, 5px);
  }
}

.content .planet .ring:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 30px;
  border-radius: 100%;
  background-color: #7ea1bf;
  z-index: 2;
  left: calc(0px - 5px);
  box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.2);
}

.content .planet .ring:after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 100%;
  background-color: #7ea1bf;
  box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);
}

.content .planet .cover-ring {
  position: absolute;
  width: 100%;
  height: 50%;
  border-bottom-left-radius: 80%;
  border-bottom-right-radius: 80%;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  transform: translate(0px, -17px);
  background-color: #546c8c;
  z-index: 2;
  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.1);
}

.content .planet .spots {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 2;
}

.content .planet .spots span {
  width: 30px;
  height: 30px;
  background-color: #3c4359;
  position: absolute;
  border-radius: 100%;
  box-shadow: inset -2px 3px 0px rgba(0, 0, 0, 0.3);
  animation: dots 5s ease infinite alternate;
}

@keyframes dots {
  0% {
    box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.3);
  }

  100% {
    box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.3);
  }
}

.content .planet .spots span:nth-child(1) {
  top: 20px;
  right: 50px;
}

.content .planet .spots span:nth-child(2) {
  top: 40px;
  left: 50px;
  width: 15px;
  height: 15px;
}

.content .planet .spots span:nth-child(3) {
  top: 80px;
  left: 20px;
  width: 25px;
  height: 25px;
}

.content .planet .spots span:nth-child(4) {
  top: 80px;
  left: 90px;
  width: 40px;
  height: 40px;
}

.content .planet .spots span:nth-child(5) {
  top: 160px;
  left: 70px;
  width: 15px;
  height: 15px;
}

.content .planet .spots span:nth-child(6) {
  top: 165px;
  left: 125px;
  width: 10px;
  height: 10px;
}

.content .planet .spots span:nth-child(7) {
  top: 90px;
  left: 150px;
  width: 15px;
  height: 15px;
}

.content p {
  color: #bacbd9;
  font-size: 14px;
  z-index: 2;
  position: absolute;
  bottom: -20px;
  font-family: "Roboto Mono", monospace;
  animation: text 4s ease infinite;
  width: 100px;
  text-align: center;
}

@keyframes text {
  0% {
    transform: translateX(-30px);
    letter-spacing: 0px;
    color: #bacbd9;
  }

  25% {
    letter-spacing: 3px;
    color: #7ea1bf;
  }

  50% {
    transform: translateX(30px);
    letter-spacing: 0px;
    color: #bacbd9;
  }

  75% {
    letter-spacing: 3px;
    color: #7ea1bf;
  }

  100% {
    transform: translateX(-30px);
    letter-spacing: 0px;
    color: #bacbd9;
  }
}
</style>


================================================
FILE: loaders/AkshatDaxini_jolly-hound-16.html
================================================
<div class="main">
  <svg
    width="168"
    height="158"
    viewBox="0 0 168 158"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g id="pizza">
      <rect width="168" height="158" fill="none"></rect>
      <g id="slice6">
        <g id="slice">
          <mask id="path-1-inside-1_7_2" fill="white">
            <path
              d="M110 34.8997C118.513 39.4198 125.582 45.921 130.497 53.75C135.412 61.579 138 70.4598 138 79.5L82 79.5L110 34.8997Z"
            ></path>
          </mask>
          <path
            d="M110 34.8997C118.513 39.4198 125.582 45.921 130.497 53.75C135.412 61.579 138 70.4598 138 79.5L82 79.5L110 34.8997Z"
            fill="#FDDBA9"
            stroke="#EE9758"
            stroke-width="2"
            mask="url(#path-1-inside-1_7_2)"
          ></path>
        </g>
        <g id="pepperoni">
          <circle cx="114" cy="63" r="6" fill="#F12424"></circle>
          <circle cx="114" cy="63" r="6" fill="#F12424"></circle>
        </g>
        <g id="mushroom">
          <path
            d="M96.3127 75.3748C93.8388 74.3499 93.5395 72.1249 96.4349 66.9246C100.861 64.107 105.48 66.5248 103.603 67.4062C101.726 68.2876 101.517 69.215 101.78 69.3984C101.78 69.3984 105.126 71.2856 104.991 72.8193C104.856 74.353 103.753 74.1725 103.409 74.5483C103.066 74.9242 99.9579 71.3905 99.9579 71.3905C96.0194 74.1256 98.7867 76.3997 96.3127 75.3748Z"
            fill="#E3DDDD"
          ></path>
          <path
            d="M99.9579 71.3905C96.0194 74.1256 98.7867 76.3997 96.3127 75.3748C93.8388 74.3499 93.5395 72.1249 96.4349 66.9246C100.861 64.107 105.48 66.5248 103.603 67.4062C101.726 68.2876 101.517 69.215 101.78 69.3984M99.9579 71.3905C99.9579 71.3905 103.066 74.9242 103.409 74.5483C103.753 74.1725 104.856 74.353 104.991 72.8193C105.126 71.2856 101.78 69.3984 101.78 69.3984M99.9579 71.3905L101.78 69.3984"
            stroke="black"
          ></path>
        </g>
        <path
          id="onion"
          d="M129.841 65.2587C127.54 64.2211 127.021 63.5697 127.016 62.3249C127.666 61.9214 128.094 61.8629 129.071 62.3249C130.14 62.8474 130.783 63.5952 131.961 65.2587C131.313 66.9451 130.895 67.8704 129.392 69.2403C131.161 70.4193 131.537 72.3751 131.961 72.3837C132.384 72.3923 129.231 76.9243 129.071 77.9719C127.662 78.0881 127.229 77.8597 127.016 76.994C126.863 74.9998 127.829 74.044 129.841 72.3837C128.109 71.4403 127.329 70.8249 127.016 69.2403C126.968 67.7728 127.329 66.9206 129.841 65.2587Z"
          fill="#FFFBFB"
          stroke="black"
        ></path>
        <path
          id="pepper"
          d="M121.34 55.4341C123.716 54.3509 124.645 54.4077 125.824 55.2995C125.811 56.107 125.607 56.4894 124.578 56.9337C123.436 57.4079 122.34 57.3806 120.055 57.1194C118.855 55.39 118.235 54.3915 117.853 52.2096C115.667 52.7671 113.592 51.6583 113.327 51.9889C113.062 52.3195 110.695 46.5489 109.803 45.6669C110.547 44.4628 111.025 44.2833 111.972 44.7368C113.948 46.0515 114.265 47.5081 114.612 50.3036C116.554 49.6053 117.608 49.4283 119.294 50.32C120.708 51.3389 121.295 52.2392 121.34 55.4341Z"
          fill="#1EAA07"
          stroke="#FDDBA9"
        ></path>
      </g>
      <g id="slice5">
        <g id="slice_2">
          <mask id="path-7-inside-2_7_2" fill="white">
            <path
              d="M54 34.8997C62.5131 30.3796 72.1699 28 82 28C91.8301 28 101.487 30.3796 110 34.8997L82 79.5L54 34.8997Z"
            ></path>
          </mask>
          <path
            d="M54 34.8997C62.5131 30.3796 72.1699 28 82 28C91.8301 28 101.487 30.3796 110 34.8997L82 79.5L54 34.8997Z"
            fill="#FDDBA9"
            stroke="#EE9758"
            stroke-width="2"
            mask="url(#path-7-inside-2_7_2)"
          ></path>
        </g>
        <g id="pepperoni_2">
          <circle cx="82" cy="56" r="6" fill="#F12424"></circle>
          <circle cx="82" cy="56" r="6" fill="#F12424"></circle>
        </g>
        <g id="mushroom_2">
          <path
            d="M91.3127 43.3748C88.8388 42.3499 88.5395 40.1249 91.4349 34.9246C95.8614 32.107 100.48 34.5248 98.603 35.4062C96.7261 36.2876 96.5167 37.215 96.7805 37.3984C96.7805 37.3984 100.126 39.2856 99.9914 40.8193C99.8563 42.353 98.7534 42.1725 98.4095 42.5483C98.0656 42.9242 94.9579 39.3905 94.9579 39.3905C91.0194 42.1256 93.7867 44.3997 91.3127 43.3748Z"
            fill="#E3DDDD"
          ></path>
          <path
            d="M94.9579 39.3905C91.0194 42.1256 93.7867 44.3997 91.3127 43.3748C88.8388 42.3499 88.5395 40.1249 91.4349 34.9246C95.8614 32.107 100.48 34.5248 98.603 35.4062C96.7261 36.2876 96.5167 37.215 96.7805 37.3984M94.9579 39.3905C94.9579 39.3905 98.0656 42.9242 98.4095 42.5483C98.7534 42.1725 99.8563 42.353 99.9914 40.8193C100.126 39.2856 96.7805 37.3984 96.7805 37.3984M94.9579 39.3905L96.7805 37.3984"
            stroke="black"
          ></path>
        </g>
        <path
          id="pepper_2"
          d="M92.1727 48.6661C93.9594 46.7623 94.8409 46.462 96.27 46.8398C96.5642 47.5919 96.5204 48.0231 95.7373 48.8247C94.8608 49.6968 93.8366 50.0874 91.6233 50.713C89.857 49.5684 88.9042 48.8801 87.7226 47.0063C85.9121 48.3518 83.5712 48.1136 83.4516 48.52C83.3319 48.9264 78.9513 44.4862 77.7915 44.0087C78.0235 42.6121 78.3975 42.2646 79.4458 42.3247C81.7725 42.7912 82.6182 44.0187 84.0009 46.473C85.5319 45.0901 86.4399 44.5264 88.3386 44.7112C90.034 45.1171 90.918 45.7276 92.1727 48.6661Z"
          fill="#1EAA07"
          stroke="#FDDBA9"
        ></path>
        <path
          id="onion_2"
          d="M70.8415 37.2587C68.5397 36.2211 68.0212 35.5697 68.0156 34.3249C68.6658 33.9214 69.0936 33.8629 70.0708 34.3249C71.1402 34.8474 71.783 35.5952 72.9609 37.2587C72.3132 38.9451 71.8954 39.8704 70.3919 41.2403C72.1607 42.4193 72.5374 44.3751 72.9609 44.3837C73.3844 44.3923 70.2313 48.9243 70.0708 49.9719C68.6618 50.0881 68.2293 49.8597 68.0156 48.994C67.8631 46.9998 68.8294 46.044 70.8415 44.3837C69.109 43.4403 68.3292 42.8249 68.0156 41.2403C67.9682 39.7728 68.3287 38.9206 70.8415 37.2587Z"
          fill="#FFFBFB"
          stroke="black"
        ></path>
      </g>
      <g id="slice1">
        <g id="slice_3">
          <mask id="path-13-inside-3_7_2" fill="white">
            <path
              d="M138 79.5C138 88.5401 135.412 97.421 130.497 105.25C125.582 113.079 118.513 119.58 110 124.1L82 79.5H138Z"
            ></path>
          </mask>
          <path
            d="M138 79.5C138 88.5401 135.412 97.421 130.497 105.25C125.582 113.079 118.513 119.58 110 124.1L82 79.5H138Z"
            fill="#FDDBA9"
            stroke="#EE9758"
            stroke-width="2"
            mask="url(#path-13-inside-3_7_2)"
          ></path>
        </g>
        <g id="pepperoni_3">
          <circle cx="119" cy="99" r="6" fill="#F12424"></circle>
          <circle cx="119" cy="99" r="6" fill="#F12424"></circle>
        </g>
        <path
          id="pepper_3"
          d="M110.227 89.6851C111.587 87.456 112.388 86.9817 113.864 87.0589C114.306 87.7349 114.352 88.166 113.749 89.1109C113.07 90.1438 112.147 90.7358 110.109 91.8011C108.145 91.0423 107.072 90.5634 105.532 88.9712C104.035 90.6587 101.695 90.9046 101.661 91.3269C101.627 91.7492 96.4305 88.2994 95.1975 88.0694C95.1387 86.6549 95.4337 86.2382 96.4722 86.0825C98.8451 86.063 99.9241 87.0914 101.78 89.2108C102.995 87.5439 103.769 86.8063 105.665 86.5986C107.408 86.6489 108.398 87.0656 110.227 89.6851Z"
          fill="#1EAA07"
          stroke="#FDDBA9"
        ></path>
        <path
          id="onion_3"
          d="M108.882 106.032C106.425 106.612 105.617 106.411 104.854 105.427C105.124 104.711 105.427 104.404 106.484 104.175C107.65 103.938 108.615 104.139 110.563 104.741C111.077 106.473 111.309 107.461 110.951 109.463C113.072 109.321 114.563 110.642 114.904 110.391C115.245 110.14 115.505 115.655 116.016 116.583C114.97 117.534 114.488 117.616 113.791 117.06C112.455 115.571 112.639 114.225 113.223 111.682C111.274 111.99 110.281 111.977 109.067 110.911C108.135 109.776 107.902 108.881 108.882 106.032Z"
          fill="#FFFBFB"
          stroke="black"
        ></path>
      </g>
      <g id="slice2">
        <g id="slice_4">
          <mask id="path-17-inside-4_7_2" fill="white">
            <path
              d="M110 124.1C101.487 128.62 91.8301 131 82 131C72.1699 131 62.5131 128.62 54 124.1L82 79.5L110 124.1Z"
            ></path>
          </mask>
          <path
            d="M110 124.1C101.487 128.62 91.8301 131 82 131C72.1699 131 62.5131 128.62 54 124.1L82 79.5L110 124.1Z"
            fill="#FDDBA9"
            stroke="#EE9758"
            stroke-width="2"
            mask="url(#path-17-inside-4_7_2)"
          ></path>
        </g>
        <g id="pepperoni_4">
          <circle cx="78" cy="103" r="6" fill="#F12424"></circle>
          <circle cx="78" cy="103" r="6" fill="#F12424"></circle>
        </g>
        <g id="mushroom_3">
          <path
            d="M86.3127 117.375C83.8388 116.35 83.5395 114.125 86.4349 108.925C90.8614 106.107 95.48 108.525 93.603 109.406C91.7261 110.288 91.5167 111.215 91.7805 111.398C91.7805 111.398 95.1264 113.286 94.9914 114.819C94.8563 116.353 93.7534 116.172 93.4095 116.548C93.0656 116.924 89.9579 113.391 89.9579 113.391C86.0194 116.126 88.7867 118.4 86.3127 117.375Z"
            fill="#E3DDDD"
          ></path>
          <path
            d="M89.9579 113.391C86.0194 116.126 88.7867 118.4 86.3127 117.375C83.8388 116.35 83.5395 114.125 86.4349 108.925C90.8614 106.107 95.48 108.525 93.603 109.406C91.7261 110.288 91.5167 111.215 91.7805 111.398M89.9579 113.391C89.9579 113.391 93.0656 116.924 93.4095 116.548C93.7534 116.172 94.8563 116.353 94.9914 114.819C95.1264 113.286 91.7805 111.398 91.7805 111.398M89.9579 113.391L91.7805 111.398"
            stroke="black"
          ></path>
        </g>
        <path
          id="pepper_4"
          d="M78.1727 124.666C79.9594 122.762 80.8409 122.462 82.27 122.84C82.5642 123.592 82.5204 124.023 81.7373 124.825C80.8608 125.697 79.8366 126.087 77.6233 126.713C75.857 125.568 74.9042 124.88 73.7226 123.006C71.9121 124.352 69.5712 124.114 69.4516 124.52C69.3319 124.926 64.9513 120.486 63.7915 120.009C64.0235 118.612 64.3975 118.265 65.4458 118.325C67.7725 118.791 68.6182 120.019 70.0009 122.473C71.5319 121.09 72.4399 120.526 74.3386 120.711C76.034 121.117 76.918 121.728 78.1727 124.666Z"
          fill="#1EAA07"
          stroke="#FDDBA9"
        ></path>
        <path
          id="onion_4"
          d="M84.2386 90.8992C81.7811 91.4786 80.9731 91.2779 80.2103 90.2943C80.4801 89.5782 80.7837 89.2712 81.8401 89.0422C83.0065 88.805 83.9717 89.0064 85.9193 89.608C86.4331 91.3399 86.6654 92.3282 86.3078 94.3305C88.4286 94.1878 89.9189 95.5092 90.26 95.258C90.6011 95.0069 90.8618 100.522 91.3727 101.45C90.3261 102.401 89.844 102.483 89.1471 101.927C87.8112 100.438 87.9952 99.0916 88.5793 96.5492C86.6308 96.8566 85.6375 96.8437 84.4234 95.7782C83.4917 94.6433 83.2584 93.7479 84.2386 90.8992Z"
          fill="#FFFBFB"
          stroke="black"
        ></path>
      </g>
      <g id="slice4">
        <g id="slice_5">
          <mask id="path-23-inside-5_7_2" fill="white">
            <path
              d="M26 79.5C26 70.4599 28.5876 61.579 33.5026 53.75C38.4176 45.921 45.4869 39.4198 54 34.8997L82 79.5L26 79.5Z"
            ></path>
          </mask>
          <path
            d="M26 79.5C26 70.4599 28.5876 61.579 33.5026 53.75C38.4176 45.921 45.4869 39.4198 54 34.8997L82 79.5L26 79.5Z"
            fill="#FDDBA9"
            stroke="#EE9758"
            stroke-width="2"
            mask="url(#path-23-inside-5_7_2)"
          ></path>
        </g>
        <g id="pepperoni_5">
          <circle cx="64" cy="70" r="6" fill="#F12424"></circle>
          <circle cx="64" cy="70" r="6" fill="#F12424"></circle>
        </g>
        <g id="mushroom_4">
          <path
            d="M43.3127 61.3748C40.8388 60.3499 40.5395 58.1249 43.4349 52.9246C47.8614 50.107 52.48 52.5248 50.603 53.4062C48.7261 54.2876 48.5167 55.215 48.7805 55.3984C48.7805 55.3984 52.1264 57.2856 51.9914 58.8193C51.8563 60.353 50.7534 60.1725 50.4095 60.5483C50.0656 60.9242 46.9579 57.3905 46.9579 57.3905C43.0194 60.1256 45.7867 62.3997 43.3127 61.3748Z"
            fill="#E3DDDD"
          ></path>
          <path
            d="M46.9579 57.3905C43.0194 60.1256 45.7867 62.3997 43.3127 61.3748C40.8388 60.3499 40.5395 58.1249 43.4349 52.9246C47.8614 50.107 52.48 52.5248 50.603 53.4062C48.7261 54.2876 48.5167 55.215 48.7805 55.3984M46.9579 57.3905C46.9579 57.3905 50.0656 60.9242 50.4095 60.5483C50.7534 60.1725 51.8563 60.353 51.9914 58.8193C52.1264 57.2856 48.7805 55.3984 48.7805 55.3984M46.9579 57.3905L48.7805 55.3984"
            stroke="black"
          ></path>
        </g>
        <path
          id="pepper_5"
          d="M57.8415 50.8697C55.5397 49.6375 55.0212 48.864 55.0156 47.3859C55.6658 46.9067 56.0936 46.8372 57.0708 47.3859C58.1402 48.0063 58.783 48.8943 59.9609 50.8697C59.3132 52.8724 58.8954 53.9711 57.3919 55.5979C59.1607 56.9979 59.5374 59.3204 59.9609 59.3306C60.3844 59.3409 57.2313 64.7227 57.0708 65.9666C55.6618 66.1046 55.2293 65.8334 55.0156 64.8053C54.8631 62.4372 55.8294 61.3022 57.8415 59.3306C56.109 58.2104 55.3292 57.4796 55.0156 55.5979C54.9682 53.8552 55.3287 52.8432 57.8415 50.8697Z"
          fill="#1EAA07"
          stroke="#FDDBA9"
        ></path>
        <path
          id="onion_5"
          d="M34.5084 66.9457C32.7549 68.7623 31.9667 69.0306 30.7931 68.6159C30.6326 67.8677 30.7219 67.4452 31.4866 66.6812C32.3393 65.8508 33.2601 65.4981 35.2235 64.9506C36.5925 66.1293 37.3225 66.8349 38.1047 68.7124C39.8113 67.4452 41.7796 67.7506 41.9306 67.3548C42.0816 66.959 45.2839 71.4564 46.2158 71.9611C45.8497 73.3266 45.4888 73.6567 44.6017 73.5657C42.673 73.0364 42.0994 71.8042 41.2154 69.3499C39.7428 70.6625 38.9003 71.1888 37.3029 70.9494C35.9054 70.4988 35.2248 69.8719 34.5084 66.9457Z"
          fill="#FFFBFB"
          stroke="black"
        ></path>
      </g>
      <g id="slice3">
        <g id="slice_6">
          <mask id="path-29-inside-6_7_2" fill="white">
            <path
              d="M54 124.1C45.4869 119.58 38.4176 113.079 33.5026 105.25C28.5876 97.421 26 88.5401 26 79.5L82 79.5L54 124.1Z"
            ></path>
          </mask>
          <path
            d="M54 124.1C45.4869 119.58 38.4176 113.079 33.5026 105.25C28.5876 97.421 26 88.5401 26 79.5L82 79.5L54 124.1Z"
            fill="#FDDBA9"
            stroke="#EE9758"
            stroke-width="2"
            mask="url(#path-29-inside-6_7_2)"
          ></path>
        </g>
        <g id="pepperoni_6">
          <circle cx="42" cy="99" r="6" fill="#F12424"></circle>
          <circle cx="42" cy="99" r="6" fill="#F12424"></circle>
        </g>
        <g id="mushroom_5">
          <path
            d="M57.3127 93.3748C54.8388 92.3499 54.5395 90.1249 57.4349 84.9246C61.8614 82.107 66.48 84.5248 64.603 85.4062C62.7261 86.2876 62.5167 87.215 62.7805 87.3984C62.7805 87.3984 66.1264 89.2856 65.9914 90.8193C65.8563 92.353 64.7534 92.1725 64.4095 92.5483C64.0656 92.9242 60.9579 89.3905 60.9579 89.3905C57.0194 92.1256 59.7867 94.3997 57.3127 93.3748Z"
            fill="#E3DDDD"
          ></path>
          <path
            d="M60.9579 89.3905C57.0194 92.1256 59.7867 94.3997 57.3127 93.3748C54.8388 92.3499 54.5395 90.1249 57.4349 84.9246C61.8614 82.107 66.48 84.5248 64.603 85.4062C62.7261 86.2876 62.5167 87.215 62.7805 87.3984M60.9579 89.3905C60.9579 89.3905 64.0656 92.9242 64.4095 92.5483C64.7534 92.1725 65.8563 92.353 65.9914 90.8193C66.1264 89.2856 62.7805 87.3984 62.7805 87.3984M60.9579 89.3905L62.7805 87.3984"
            stroke="black"
          ></path>
        </g>
        <path
          id="pepper_6"
          d="M45.1727 88.6661C46.9594 86.7623 47.8409 86.462 49.27 86.8398C49.5642 87.5919 49.5204 88.0231 48.7373 88.8247C47.8608 89.6968 46.8366 90.0874 44.6233 90.713C42.857 89.5684 41.9042 88.8801 40.7226 87.0063C38.9121 88.3518 36.5712 88.1136 36.4516 88.52C36.3319 88.9264 31.9513 84.4862 30.7915 84.0087C31.0235 82.6121 31.3975 82.2646 32.4458 82.3247C34.7725 82.7912 35.6182 84.0187 37.0009 86.473C38.5319 85.0901 39.4399 84.5264 41.3386 84.7112C43.034 85.1171 43.918 85.7276 45.1727 88.6661Z"
          fill="#1EAA07"
          stroke="#FDDBA9"
        ></path>
        <path
          id="onion_6"
          d="M53.4224 96.617C50.9625 96.0481 50.3269 95.5103 50.0787 94.2906C50.6377 93.7681 51.0459 93.6272 52.0944 93.8898C53.2452 94.1938 54.0214 94.8018 55.5011 96.2038C55.1947 97.9841 54.9652 98.9731 53.7578 100.61C55.7225 101.421 56.4733 103.266 56.8904 103.192C57.3074 103.118 55.0986 108.178 55.1454 109.236C53.7861 109.625 53.3173 109.486 52.9389 108.678C52.4005 106.752 53.1619 105.626 54.8116 103.605C52.9285 103.018 52.0437 102.566 51.4271 101.073C51.0944 99.6431 51.2818 98.737 53.4224 96.617Z"
          fill="#FFFBFB"
          stroke="black"
        ></path>
      </g>
    </g>
  </svg>
</div>

<style>
/* From Uiverse.io by AkshatDaxini  - Tags: loader, github, share, rotate, animated, svg, custom, pizza */
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  scale: 1.6;
}

#pizza {
  background-color: transparent;
  transform-origin: center center;
  animation: rotate 45s linear infinite;
  -webkit-animation: rotate 45s linear infinite;
}

#slice1 {
  animation: slice1 4s ease-in-out infinite;
  -webkit-animation: slice1 4s ease-in-out infinite;
}

#slice2 {
  animation: slice2 4s ease-in-out infinite;
  animation-delay: 1s;
  -webkit-animation: slice2 4s ease-in-out infinite;
}

#slice3 {
  animation: slice3 4s ease-in-out infinite;
  animation-delay: 2s;
  -webkit-animation: slice3 4s ease-in-out infinite;
}

#slice4 {
  animation: slice4 4s ease-in-out infinite;
  animation-delay: 3s;
  -webkit-animation: slice4 4s ease-in-out infinite;
}

#slice5 {
  animation: slice5 4s ease-in-out infinite;
  animation-delay: 4s;
  -webkit-animation: slice5 4s ease-in-out infinite;
}

#slice6 {
  animation: slice6 4s ease-in-out infinite;
  animation-delay: 5s;
  -webkit-animation: slice6 4s ease-in-out infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}

@keyframes slice1 {
  0%,
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  50% {
    transform: translate(5%, 5%);
    -webkit-transform: translate(5%, 5%);
    -moz-transform: translate(5%, 5%);
    -ms-transform: translate(5%, 5%);
    -o-transform: translate(5%, 5%);
  }
}

@keyframes slice2 {
  0%,
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  50% {
    transform: translate(0%, 7%);
    -webkit-transform: translate(0%, 7%);
    -moz-transform: translate(0%, 7%);
    -ms-transform: translate(0%, 7%);
    -o-transform: translate(0%, 7%);
  }
}

@keyframes slice3 {
  0%,
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  50% {
    transform: translate(-5%, 5%);
    -webkit-transform: translate(-5%, 5%);
    -moz-transform: translate(-5%, 5%);
    -ms-transform: translate(-5%, 5%);
    -o-transform: translate(-5%, 5%);
  }
}

@keyframes slice4 {
  0%,
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  50% {
    transform: translate(-5%, 0%);
    -webkit-transform: translate(-5%, 0%);
    -moz-transform: translate(-5%, 0%);
    -ms-transform: translate(-5%, 0%);
    -o-transform: translate(-5%, 0%);
  }
}

@keyframes slice5 {
  0%,
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  50% {
    transform: translate(0%, -3%);
    -webkit-transform: translate(0%, -3%);
    -moz-transform: translate(0%, -3%);
    -ms-transform: translate(0%, -3%);
    -o-transform: translate(0%, -3%);
  }
}

@keyframes slice6 {
  0%,
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  50% {
    transform: translate(5%, 0%);
    -webkit-transform: translate(5%, 0%);
    -moz-transform: translate(5%, 0%);
    -ms-transform: translate(5%, 0%);
    -o-transform: translate(5%, 0%);
  }
}

</style>
    

================================================
FILE: loaders/Akshdeep74644_friendly-turtle-73.html
================================================
 <div class="loader">
     <div class="box-1">
     </div>
     <span>
         Loading.....
     </span>
 </div>
<style>
/* From Uiverse.io by Akshdeep74644 - Tags: loader */
.loader {
  position: relative;
}

.box-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 150px;
  width: 150px;
  background-color: #FFFFFF;
  background-image: linear-gradient(135deg, #FFFFFF 0%, #6284FF 34%, #FF0000 100%);
  border-radius: 50%;
  animation: rotate 3s linear infinite;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.box-1::before {
  content: '';
  position: absolute;
  inset: 15px;
  background: #f5f5f5;
  border-radius: 50%;
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

.loader span {
  text-align: center;
  position: absolute;
  top: 65px;
  left: 25px;
  color: black;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  letter-spacing: 2px;
  font-weight: 800;
  font-size: 1rem;
  animation: text-animate412 3s linear infinite;
}

@keyframes text-animate412 {

  10% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>


================================================
FILE: loaders/Alaner-xs_loud-lizard-23.html
================================================
<div class="shake">
<div class="loader"></div>
</div>
<style>
/* From Uiverse.io by Alaner-xs - Tags: loader */
.loader {
 --border-width: 10px;
 --size: 60px;
 border: var(--border-width) solid #f3f3f3;
 border-radius: 50%;
 border-top: var(--border-width) solid #1bbeff;
 border-bottom: var(--border-width) solid #1bbeff;
 border-left: var(--border-width) solid #147ec5;
 border-right: var(--border-width) solid #147ec5;
 width: var(--size);
 height: var(--size);
 animation: spin35112 2s linear infinite;
}

@keyframes spin35112 {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}

.shake {
 animation: shake61790 1s linear infinite;
}

@keyframes shake61790 {
 0% {
  transform: skewX(0deg);
 }

 50% {
  transform: skewX(20deg);
 }

 100% {
  transform: skewX(0deg);
 }
}
</style>


================================================
FILE: loaders/Ali-Tahmazi99_bad-wasp-77.html
================================================
<div class="loading">
    <div class="d1"></div>
    <div class="d2"></div>
</div>
<style>
/* From Uiverse.io by Ali-Tahmazi99 - Tags: loader */
.loading {
  width: 60px;
  height: 60px;
  position: relative;
}

.d1 , .d2 {
  border: 5px solid #6c757d;
  border-radius: 50px;
}

.loading .d1 {
  width: 55px;
  height: 55px;
  position: absolute;
  border-left-color: transparent;
  animation: load161 1s linear infinite;
}

.loading .d2 {
  width: 40px;
  height: 40px;
  border-top-color: transparent;
  border-right-color: transparent;
  margin: 7.5px;
  animation: load2812 1.5s linear infinite;
}

@keyframes load161 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes load2812 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}
</style>


================================================
FILE: loaders/Ali-Tahmazi99_breezy-squid-90.html
================================================
<div class="loader">
  <span class="hour"></span>
  <span class="min"></span>
  <span class="circel"></span>
</div>
<style>
/* From Uiverse.io by Ali-Tahmazi99 - Tags: loader */
.loader {
 width: 65px;
 height: 65px;
 border: 8px solid #ee9b00a6;
 border-radius: 50px;
 position: relative;
}

.loader span {
 display: block;
 background: #ee9b00;
}

.loader .hour ,
.loader .min {
 width: 6px;
 height: 22px;
 border-radius: 50px;
 position: absolute;
 top: 24.5px;
 left: 21px;
 animation: load9243 1.2s linear infinite;
 transform-origin: top center;
}

.loader .min {
 height: 17px;
 animation: load9243 4s linear infinite;
}

.loader .circel {
 width: 10px;
 height: 10px;
 border-radius: 50px;
 position: absolute;
 top: 19px;
 left: 19px;
}

@keyframes load9243 {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}
</style>


================================================
FILE: loaders/Ali-Tahmazi99_nervous-firefox-94.html
================================================
<div class="load-row">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<style>
/* From Uiverse.io by Ali-Tahmazi99 - Tags: loader */
.load-row {
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.load-row span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #f76002;
  border-radius: 50px;
  animation: up-down6 0.5s ease-in infinite alternate;
}

.load-row span:nth-child(2) {
  background: #e85b04c4;
  animation-delay: 0.16s;
}

.load-row span:nth-child(3) {
  background: #e85b0491;
  animation-delay: 0.32s;
}

.load-row span:nth-child(4) {
  background: #e85b0456;
  animation-delay: 0.48s;
}

@keyframes up-down6 {
  0% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(10px);
  }
}
</style>


================================================
FILE: loaders/Ali-Tahmazi99_smooth-donkey-70.html
================================================
<div class="loading">
    <div class="d1"></div>
    <div class="d2"></div>
</div>
<style>
/* From Uiverse.io by Ali-Tahmazi99 - Tags: loader */
.loading {
  width: 60px;
  height: 60px;
  position: relative;
}

.d1 ,
.d2 {
  border: 5px solid #64dfdf;
  border-radius: 50px;
}

.loading .d1 {
  width: 55px;
  height: 55px;
  position: absolute;
  top: -9px;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: load161 1s linear infinite;
}

.loading .d2 {
  width: 40px;
  height: 40px;
  border-top-color: transparent;
  border-bottom-color: transparent;
  margin: 7.5px;
  animation: load2812 2s linear infinite;
}

@keyframes load161 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes load2812 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}
</style>


================================================
FILE: loaders/AmIt-DasIT_white-termite-91.html
================================================
<div class="card">
  <div class="conic_back1"></div>
  <div class="conic_back2"></div>
</div>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: loader */
.card {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  transition: 1s;
  animation: rotate 1s linear infinite;
}

.card .conic_back1 {
  width: 150px;
  height: 150px;
  position: absolute;
  background: conic-gradient(transparent, transparent, transparent, crimson);
}

.card .conic_back2 {
  width: 150px;
  height: 150px;
  position: absolute;
  transform: rotate(180deg);
  background: conic-gradient(transparent, transparent, transparent, orange);
}

@keyframes rotate {
  0% {
    width: 0px;
    height: 0px;
    transform: rotate(0deg);
  }

  30% {
    width: 45px;
    height: 45px;
    transform: rotate(100deg);
  }

  60% {
    width: 35px;
    height: 35px;
    filter: blur(1px);
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(1240deg);
  }
}

</style>


================================================
FILE: loaders/Amerss_massive-robin-70.html
================================================
<!-- From Uiverse.io by Amerss  - Tags: loader, smooth, code, colorful -->
<div
  class="mx-auto w-[500px] bg-gray-950 rounded-xl overflow-hidden drop-shadow-xl"
>
  <div class="bg-[#333] flex items-center p-[5px] text-whitec relative">
    <div class="flex absolute left-3">
      <span class="h-3.5 w-3.5 bg-[#ff605c] rounded-xl mr-2"></span>
      <span class="h-3.5 w-3.5 bg-[#ffbd44] rounded-xl mr-2"></span>
      <span class="h-3.5 w-3.5 bg-[#00ca4e] rounded-xl"></span>
    </div>
    <div class="flex-1 text-center text-white">status</div>
  </div>
  <div class="p-2.5 text-[#0f0]">
    <div>
      <span class="mr-2">Loading</span>
      <span class="animate-[ping_1.5s_0.5s_ease-in-out_infinite]">.</span>
      <span class="animate-[ping_1.5s_0.7s_ease-in-out_infinite]">.</span>
      <span class="animate-[ping_1.5s_0.9s_ease-in-out_infinite]">.</span>
    </div>
  </div>
</div>


    

================================================
FILE: loaders/Ankesh2002_lucky-cobra-80.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Ankesh2002 - Tags: loader */
.loader {
  position: relative;
  width: 164px;
  height: 164px;
}

.loader::before , .loader::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #00bd26;
  left: 50%;
  top: 50%;
  animation: rotate 1s ease-in infinite;
}

.loader::after {
  width: 20px;
  height: 20px;
  background-color: #00bd26;
  animation: rotate 1s ease-in infinite, moveY 1s ease-in infinite;
}

@keyframes moveY {
  0% , 100% {
    top: 10%
  }

  45% , 55% {
    top: 59%
  }

  60% {
    top: 40%
  }
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -100%) rotate(0deg) scale(1 , 1)
  }

  25% {
    transform: translate(-50%, 0%) rotate(180deg) scale(1 , 1)
  }

  45% , 55% {
    transform: translate(-50%, 100%) rotate(180deg) scale(3 , 0.5)
  }

  60% {
    transform: translate(-50%, 100%) rotate(180deg) scale(1, 1)
  }

  75% {
    transform: translate(-50%, 0%) rotate(270deg) scale(1 , 1)
  }

  100% {
    transform: translate(-50%, -100%) rotate(360deg) scale(1 , 1)
  }
}
    
</style>


================================================
FILE: loaders/AqFox_clever-eel-67.html
================================================
<div class="spinner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style>
/* From Uiverse.io by AqFox - Tags: loader */
.spinner {
 position: relative;
 width: 56px;
 height: 56px;
 animation: spinner-3a5251 1.25s infinite linear;
}

.spinner div {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 0;
 height: 0;
 border-left: 3.6px solid transparent;
 border-right: 3.6px solid transparent;
 border-bottom: 10.8px solid #004dff;
 transform-origin: center 10.8px;
}

.spinner div:before,
.spinner div:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 display: block;
 border-left: 10.8px solid transparent;
 border-right: 10.8px solid transparent;
 border-bottom: 7.2px solid #004dff;
}

.spinner div:before {
 transform: translate(-10.8px, 7.2px) rotate(35deg);
}

.spinner div:after {
 transform: translate(-10.8px, 7.2px) rotate(-35deg);
}

.spinner div:nth-child(1) {
 transform: translate(-50%, -10.8px) rotate(51.42857deg) translate(0, 320%);
}

.spinner div:nth-child(2) {
 transform: translate(-50%, -10.8px) rotate(102.85714deg) translate(0, 320%);
}

.spinner div:nth-child(3) {
 transform: translate(-50%, -10.8px) rotate(154.28571deg) translate(0, 320%);
}

.spinner div:nth-child(4) {
 transform: translate(-50%, -10.8px) rotate(205.71429deg) translate(0, 320%);
}

.spinner div:nth-child(5) {
 transform: translate(-50%, -10.8px) rotate(257.14286deg) translate(0, 320%);
}

.spinner div:nth-child(6) {
 transform: translate(-50%, -10.8px) rotate(308.57143deg) translate(0, 320%);
}

.spinner div:nth-child(7) {
 transform: translate(-50%, -10.8px) rotate(360deg) translate(0, 320%);
}

@keyframes spinner-3a5251 {
 to {
  transform: rotate(360deg);
 }
}
</style>


================================================
FILE: loaders/AqFox_cuddly-turtle-6.html
================================================

<div class="spinner"></div>
<style>
/* From Uiverse.io by AqFox - Tags: loader */
.spinner {
 width: 56px;
 height: 56px;
 display: grid;
 color: #004dff;
 background: radial-gradient(farthest-side, currentColor calc(100% - 7px),#0000 calc(100% - 6px) 0);
 -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 15px),#000 calc(100% - 13px));
 border-radius: 50%;
 animation: spinner-sm4bhi 2s infinite linear;
}

.spinner::before,
.spinner::after {
 content: "";
 grid-area: 1/1;
 background: linear-gradient(currentColor 0 0) center,
          linear-gradient(currentColor 0 0) center;
 background-size: 100% 11px,11px 100%;
 background-repeat: no-repeat;
}

.spinner::after {
 transform: rotate(45deg);
}

@keyframes spinner-sm4bhi {
 100% {
  transform: rotate(1turn);
 }
}
</style>


================================================
FILE: loaders/AqFox_curly-cheetah-74.html
================================================

<div class="spinner"></div>
<style>
/* From Uiverse.io by AqFox - Tags: loader */
.spinner {
 width: 56px;
 height: 56px;
 border-radius: 50%;
 padding: 7px;
 background: conic-gradient(from 135deg at top,#004dff 90deg, #0000 0) 0 calc(50% - 4px)/19px 9.5px,
          radial-gradient(farthest-side at bottom left,#0000 calc(100% - 7px),#004dff calc(100% - 6px) 99%,#0000) top right/50%  50% content-box content-box,
          radial-gradient(farthest-side at top,#0000 calc(100% - 7px),#004dff calc(100% - 6px) 99%,#0000) bottom   /100% 50% content-box content-box;
 background-repeat: no-repeat;
 animation: spinner-v8og74 1s infinite linear;
}

@keyframes spinner-v8og74 {
 100% {
  transform: rotate(1turn);
 }
}
</style>


================================================
FILE: loaders/AqFox_fast-bat-33.html
================================================

<div class="spinner"></div>
<style>
/* From Uiverse.io by AqFox - Tags: loader */
.spinner {
 --R: 28px;
 --g1: #004dff 96%, #0000;
 --g2: #d6d6fc 96%, #0000;
 width: calc(2*var(--R));
 height: calc(2*var(--R));
 border-radius: 50%;
 display: grid;
 -webkit-mask: linear-gradient(#000 0 0);
 animation: spinner-maxc6n 2s infinite linear;
}

.spinner::before,
.spinner::after {
 content: "";
 grid-area: 1/1;
 width: 50%;
 background: radial-gradient(farthest-side,var(--g1)) calc(var(--R) + 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
        radial-gradient(farthest-side,var(--g1)) calc(var(--R) + 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
        radial-gradient(farthest-side,var(--g2)) calc(var(--R) + 0.5*var(--R)   - var(--R)) calc(var(--R) - 0.866*var(--R) - var(--R)),
        radial-gradient(farthest-side,var(--g1)) 0 calc(-1*var(--R)),
        radial-gradient(farthest-side,var(--g2)) calc(var(--R) - 0.5*var(--R)   - var(--R)) calc(var(--R) - 0.866*var(--R) - var(--R)),
        radial-gradient(farthest-side,var(--g1)) calc(var(--R) - 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
        radial-gradient(farthest-side,var(--g2)) calc(-1*var(--R))  0,
        radial-gradient(farthest-side,var(--g1)) calc(var(--R) - 0.866*var(--R) - var(--R)) calc(var(--R) + 0.5*var(--R)   - var(--R));
 background-size: calc(2*var(--R)) calc(2*var(--R));
 background-repeat: no-repeat;
}

.spinner::after {
 transform: rotate(180deg);
 transform-origin: right;
}

@keyframes spinner-maxc6n {
 100% {
  transform: rotate(-1turn);
 }
}
</style>


================================================
FILE: loaders/AqFox_little-skunk-97.html
================================================

<div class="spinner"></div>
<style>
/* From Uiverse.io by AqFox - Tags: loader */
.spinner {
 width: 56px;
 height: 56px;
 display: grid;
 border: 4px solid #0000;
 border-radius: 50%;
 border-right-color: #004dff;
 animation: spinner-a4dj62 1s infinite linear;
}

.spinner::before,
.spinner::after {
 content: "";
 grid-area: 1/1;
 margin: 2px;
 border: inherit;
 border-radius: 50%;
 animation: spinner-a4dj62 2s infinite;
}

.spinner::after {
 margin: 8px;
 animation-duration: 3s;
}

@keyframes spinner-a4dj62 {
 100% {
  transform: rotate(1turn);
 }
}
</style>


================================================
FILE: loaders/AqFox_silent-quail-21.html
================================================

<div class="spinner"></div>
<style>
/* From Uiverse.io by AqFox - Tags: loader */
.spinner {
 width: 6px;
 height: 6px;
 animation: spinner-xp626r 1.1s infinite;
 border-radius: 50%;
 box-shadow: 24px 0 0 6px #004dff, -24px 0 0 6px #004dff;
}

@keyframes spinner-xp626r {
 to {
  transform: rotate(360deg);
 }
}
</style>


================================================
FILE: loaders/AqFox_sour-robin-86.html
================================================
<div class="spinner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style>
/* From Uiverse.io by AqFox - Tags: loader */
.spinner {
 position: relative;
 width: 16px;
 height: 16px;
}

.spinner div {
 width: 100%;
 height: 100%;
 background-color: #004dff;
 border-radius: 50%;
 animation: spinner-4t3wzl 1.25s infinite backwards;
}

.spinner div:nth-child(1) {
 animation-delay: 0.15s;
 background-color: rgba(0,77,255,0.9);
}

.spinner div:nth-child(2) {
 animation-delay: 0.3s;
 background-color: rgba(0,77,255,0.8);
}

.spinner div:nth-child(3) {
 animation-delay: 0.45s;
 background-color: rgba(0,77,255,0.7);
}

.spinner div:nth-child(4) {
 animation-delay: 0.6s;
 background-color: rgba(0,77,255,0.6);
}

.spinner div:nth-child(5) {
 animation-delay: 0.75s;
 background-color: rgba(0,77,255,0.5);
}

@keyframes spinner-4t3wzl {
 0% {
  transform: rotate(0deg) translateY(-200%);
 }

 60%, 100% {
  transform: rotate(360deg) translateY(-200%);
 }
}
</style>


================================================
FILE: loaders/AqFox_tiny-jellyfish-70.html
================================================

<div class="spinner"></div>
<style>
/* From Uiverse.io by AqFox - Tags: loader */
.spinner {
 width: 56px;
 height: 56px;
 border: 11px #004dff double;
 border-left-style: solid;
 border-radius: 50%;
 animation: spinner-aib1d7 0.75s infinite linear;
}

@keyframes spinner-aib1d7 {
 to {
  transform: rotate(360deg);
 }
}

</style>


================================================
FILE: loaders/AqFox_tiny-wolverine-88.html
================================================

<div class="spinner"></div>
<style>
/* From Uiverse.io by AqFox - Tags: blue, loader, spinner, wheel */
.spinner {
 width: 56px;
 height: 56px;
 border-radius: 50%;
 color: #004dff;
 background: linear-gradient(currentColor 0 0) center/100% 4px,
          linear-gradient(currentColor 0 0) center/4px 100%,
          radial-gradient(farthest-side,#0000 calc(100% - 7px),currentColor calc(100% - 6px)),
          radial-gradient(circle 7px,currentColor 94%,#0000 0);
 background-repeat: no-repeat;
 animation: spinner-mu2ebf 1s infinite linear;
 position: relative;
}

.spinner::before {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: inherit;
 transform: rotate(45deg);
}

@keyframes spinner-mu2ebf {
 to {
  transform: rotate(.5turn);
 }
}
</style>


================================================
FILE: loaders/AqFox_young-dragon-29.html
================================================
<div class="spinner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style>
/* From Uiverse.io by AqFox - Tags: 3d, loader, cube */
.spinner {
 width: 44px;
 height: 44px;
 animation: spinner-y0fdc1 2s infinite ease;
 transform-style: preserve-3d;
}

.spinner > div {
 background-color: rgba(0,77,255,0.2);
 height: 100%;
 position: absolute;
 width: 100%;
 border: 2px solid #004dff;
}

.spinner div:nth-of-type(1) {
 transform: translateZ(-22px) rotateY(180deg);
}

.spinner div:nth-of-type(2) {
 transform: rotateY(-270deg) translateX(50%);
 transform-origin: top right;
}

.spinner div:nth-of-type(3) {
 transform: rotateY(270deg) translateX(-50%);
 transform-origin: center left;
}

.spinner div:nth-of-type(4) {
 transform: rotateX(90deg) translateY(-50%);
 transform-origin: top center;
}

.spinner div:nth-of-type(5) {
 transform: rotateX(-90deg) translateY(50%);
 transform-origin: bottom center;
}

.spinner div:nth-of-type(6) {
 transform: translateZ(22px);
}

@keyframes spinner-y0fdc1 {
 0% {
  transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
 }

 50% {
  transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
 }

 100% {
  transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
 }
}
</style>


================================================
FILE: loaders/ArnavK-09_shy-panther-83.html
================================================
<!-- From Uiverse.io by ArnavK-09  - Tags: simple, gradient, button, loader, minimal, cursor, vintage, sober -->
<div
  class="hover:scale-110 transition-all ease-in-out cursor-pointer hover:shadow-xl hover:shadow-neutral-700 delay-250 animate-spin delay-50 duration-1000 bg-gradient-to-br border-4 shadow-inner shadow-neutral-700 border-neutral-950 from-white/80 to-gray-600 rounded-full grid place-items-center z-0 h-20 w-20 relative"
>
  <div
    class="rounded-full bg-neutral-900 absolute rotate-[90deg] z-20 h-20 scale-50 w-2"
  ></div>
  <div
    class="rounded-full bg-neutral-900 absolute rotate-[180deg] z-20 h-20 scale-50 w-2"
  ></div>
</div>


    

================================================
FILE: loaders/ArnavK-09_swift-mule-33.html
================================================
<!-- From Uiverse.io by ArnavK-09  - Tags: simple, skeuomorphism, loader, spinner, shadow, glow, circle loader, multicolor -->
<div
  class="p-3 animate-spin drop-shadow-2xl bg-gradient-to-bl from-pink-400 via-purple-400 to-indigo-600 md:w-48 md:h-48 h-32 w-32 aspect-square rounded-full"
>
  <div
    class="rounded-full h-full w-full bg-slate-100 dark:bg-zinc-900 background-blur-md"
  ></div>
</div>


    

================================================
FILE: loaders/Avishek255874_weak-turtle-32.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Avishek255874 - Tags: loader */
.loader {
}

.loader {
  width: 48px;
  height: 48px;
  position: relative;
}

.loader::before , .loader::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50% , -50%);
  width: 48em;
  height: 48em;
  background-image: radial-gradient(circle 10px, #FFF 100%, transparent 0),
    radial-gradient(circle 10px, #FFF 100%, transparent 0),
    radial-gradient(circle 10px, #FFF 100%, transparent 0),
    radial-gradient(circle 10px, #FFF 100%, transparent 0),
    radial-gradient(circle 10px, #FFF 100%, transparent 0),
    radial-gradient(circle 10px, #FFF 100%, transparent 0),
    radial-gradient(circle 10px, #FFF 100%, transparent 0),
    radial-gradient(circle 10px, #FFF 100%, transparent 0);
  background-position: 0em -18em, 0em 18em, 18em 0em, -18em 0em,
                       13em -13em, -13em -13em, 13em 13em, -13em 13em;
  background-repeat: no-repeat;
  font-size: 0.5px;
  border-radius: 50%;
  animation: blast 1s ease-in infinite;
}

.loader::after {
  font-size: 1px;
  background: #fff;
  animation: bounce 1s ease-in infinite;
}

@keyframes bounce {
  0% , 100% {
    font-size: 0.75px
  }

  50% {
    font-size: 1.5px
  }
}

@keyframes blast {
  0% , 40% {
    font-size: 0.5px;
  }

  70% {
    opacity: 1;
    font-size: 4px;
  }

  100% {
    font-size: 6px;
    opacity: 0;
  }
}
</style>


================================================
FILE: loaders/Bethel-nz_honest-elephant-63.html
================================================
<svg class="pl" viewBox="0 0 128 128" width="128px" height="128px" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="pl-grad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="hsl(193,90%,55%)"></stop>
            <stop offset="100%" stop-color="hsl(223,90%,55%)"></stop>
        </linearGradient>
    </defs>
    <circle class="pl__ring" r="56" cx="64" cy="64" fill="none" stroke="hsla(0,10%,10%,0.1)" stroke-width="16" stroke-linecap="round"></circle>
    <path class="pl__worm" d="M92,15.492S78.194,4.967,66.743,16.887c-17.231,17.938-28.26,96.974-28.26,96.974L119.85,59.892l-99-31.588,57.528,89.832L97.8,19.349,13.636,88.51l89.012,16.015S81.908,38.332,66.1,22.337C50.114,6.156,36,15.492,36,15.492a56,56,0,1,0,56,0Z" fill="none" stroke="url(#pl-grad)" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="44 1111" stroke-dashoffset="10"></path>
</svg>
<style>
/* From Uiverse.io by Bethel-nz - Tags: loader */
.pl,
.pl__worm {
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.pl {
  animation-name: bump9;
  animation-timing-function: linear;
  width: 8em;
  height: 8em;
}

.pl__ring {
  stroke: hsla(var(--hue),10%,10%,0.1);
  transition: stroke 0.3s;
}

.pl__worm {
  animation-name: worm9;
  animation-timing-function: cubic-bezier(0.42,0.17,0.75,0.83);
}

/* Animations */
@keyframes bump9 {
  from,
  42%,
  46%,
  51%,
  55%,
  59%,
  63%,
  67%,
  71%,
  74%,
  78%,
  81%,
  85%,
  88%,
  92%,
  to {
    transform: translate(0,0);
  }

  44% {
    transform: translate(1.33%,6.75%);
  }

  53% {
    transform: translate(-16.67%,-0.54%);
  }

  61% {
    transform: translate(3.66%,-2.46%);
  }

  69% {
    transform: translate(-0.59%,15.27%);
  }

  76% {
    transform: translate(-1.92%,-4.68%);
  }

  83% {
    transform: translate(9.38%,0.96%);
  }

  90% {
    transform: translate(-4.55%,1.98%);
  }
}

@keyframes worm9 {
  from {
    stroke-dashoffset: 10;
  }

  25% {
    stroke-dashoffset: 295;
  }

  to {
    stroke-dashoffset: 1165;
  }
}
</style>


================================================
FILE: loaders/BlackisPlay_fast-lizard-14.html
================================================
<div id="timer">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
  <div id="div5"></div>
  <div id="div6"></div>
  <div id="div7"></div>
  <div id="div8"></div>
  <div id="div9"></div>
  <div id="div10"></div>
  <div id="div11"></div>
  <div id="div12"></div>
  <div id="div13"></div>
  <div id="div14"></div>
  <div id="div15"></div>
</div>

<style>
/* From Uiverse.io by BlackisPlay  - Tags: simple, animation, white, loading, loader, smooth, light */
#timer {
  display: grid;
  grid-template-columns: repeat(3, 25px);
  grid-template-rows: repeat(5, 25px);
  gap: 10px;
  position: absolute;
  grid-template-areas:
    "div1 div2 div3"
    "div4 div5 div6"
    "div7 div8 div9"
    "div10 div11 div12"
    "div13 div14 div15";
}

#div1,
#div2,
#div3,
#div4,
#div5,
#div6,
#div7,
#div8,
#div9,
#div10,
#div11,
#div12,
#div13,
#div14,
#div15 {
  background-color: rgb(243, 243, 243);
  border-radius: 5px;
}

#div1 {
  grid-area: div1;
  animation: div1 10s both infinite;
}

@keyframes div1 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(70px);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(0);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div2 {
  grid-area: div2;
  animation: div2 10s both infinite;
}

@keyframes div2 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(35px);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(35px);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(0);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div3 {
  grid-area: div3;
}

#div4 {
  grid-area: div4;
  animation: div4 10s both infinite;
}

@keyframes div4 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(70px);
  }

  20% {
    transform: translateX(70px);
  }

  30% {
    transform: translateX(70px);
  }

  40% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(70px);
  }

  70% {
    transform: translateX(70px);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div5 {
  grid-area: div5;
  display: none;
}

#div6 {
  grid-area: div6;
  animation: div6 10s both infinite;
}

@keyframes div6 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-70px);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(0);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div7 {
  grid-area: div7;
  animation: div7 10s both infinite;
}

@keyframes div7 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(70px);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(70px);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div8 {
  grid-area: div8;
  animation: div8 10s both infinite;
}

@keyframes div8 {
  0% {
    transform: translateX(35px);
  }

  10% {
    transform: translateX(35px);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(35px);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(35px);
  }
}

#div9 {
  grid-area: div9;
}

#div10 {
  grid-area: div10;
  animation: div10 10s both infinite;
}

@keyframes div10 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(70px);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(70px);
  }

  40% {
    transform: translateX(70px);
  }

  50% {
    transform: translateX(70px);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(70px);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(70px);
  }

  100% {
    transform: translateX(0);
  }
}

#div11 {
  grid-area: div11;
  display: none;
}

#div12 {
  grid-area: div12;
  animation: div12 10s both infinite;
}

@keyframes div12 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-70px);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(0);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div13 {
  grid-area: div13;
  animation: div13 10s both infinite;
}

@keyframes div13 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(70px);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(70px);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(70px);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div14 {
  grid-area: div14;
  animation: div14 10s both infinite;
}

@keyframes div14 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(35px);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(35px);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(35px);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div15 {
  grid-area: div15;
}

</style>
    

================================================
FILE: loaders/BlackisPlay_pretty-sloth-9.html
================================================
<div id="triangle">
  <svg id="Layer_1" data-name="Layer 1" version="1.1" viewBox="0 0 2000 2000">
    <polygon
      class="cls-1"
      points="928 781 1021 951 784.5 1371.97 1618 1371.97 1530.32 1544 509 1539 928 781"
    ></polygon>
    <polygon
      class="cls-3"
      points="1618 1371.97 784.5 1371.97 874.93 1211 1346 1211 923.1 456 1110.06 456 1618 1371.97"
    ></polygon>
    <g id="Layer_2" data-name="Layer 2">
      <polygon
        class="cls-2"
        points="418 1372.74 509 1539 928 781 1162.32 1211 1346 1211 923.1 456 418 1372.74"
      ></polygon>
    </g>
  </svg>
</div>

<style>
/* From Uiverse.io by BlackisPlay  - Tags: simple, icon, animation, 3d, loader */
.cls-1 {
  fill: #f15a24;
  animation: cls1 4s ease infinite both;
}

@keyframes cls1 {
  0% {
    fill: #f15a24;
  }

  34% {
    fill: #ed1c24;
  }

  66% {
    fill: #f7931e;
  }

  100% {
    fill: #f15a24;
  }
}

.cls-1,
.cls-2,
.cls-3 {
  stroke-width: 0px;
}

.cls-2 {
  fill: #f7931e;
  animation: cls2 4s ease infinite both;
}

@keyframes cls2 {
  0% {
    fill: #f7931e;
  }

  34% {
    fill: #f15a24;
  }

  66% {
    fill: #ed1c24;
  }

  100% {
    fill: #f7931e;
  }
}

.cls-3 {
  fill: #ed1c24;
  animation: cls3 4s ease infinite both;
}

@keyframes cls3 {
  0% {
    fill: #ed1c24;
  }

  34% {
    fill: #f7931e;
  }

  66% {
    fill: #f15a24;
  }

  100% {
    fill: #ed1c24;
  }
}

.cls-4 {
  display: none;
}

#triangle {
  height: 400px;
  width: 400px;
  padding-top: 30px;
  animation: triangle 4s both infinite;
}

@keyframes triangle {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(15px);
  }

  100% {
    transform: translateY(0px);
  }
}

</style>
    

================================================
FILE: loaders/BlackisPlay_tasty-otter-13.html
================================================
<div id="wholeThing">
  <div id="newtonsCradle">
    <svg
      id="svg1"
      version="1.1"
      viewBox="0 0 132.29166 132.29167"
      height="500"
      width="500"
    >
      <defs id="defs1">
        <linearGradient id="linearGradient20">
          <stop
            id="stop20"
            offset="0"
            style="stop-color:#444443;stop-opacity:1;"
          ></stop>
          <stop
            id="stop21"
            offset="1"
            style="stop-color:#5b5b5b;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <linearGradient id="linearGradient18">
          <stop
            id="stop18"
            offset="0"
            style="stop-color:#121212;stop-opacity:1;"
          ></stop>
          <stop
            id="stop19"
            offset="1"
            style="stop-color:#282828;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <linearGradient id="linearGradient16">
          <stop
            id="stop16"
            offset="0"
            style="stop-color:#000000;stop-opacity:1;"
          ></stop>
          <stop
            id="stop17"
            offset="1"
            style="stop-color:#1e1e1e;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <filter
          height="4.5998159"
          width="3.7954709"
          y="-1.799908"
          x="-1.3977355"
          id="filter10"
          style="color-interpolation-filters:sRGB"
        >
          <feGaussianBlur
            id="feGaussianBlur10"
            result="fbSourceGraphic"
            stdDeviation="0.41 0.41"
          ></feGaussianBlur>
          <feColorMatrix
            id="feColorMatrix10"
            values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
            in="fbSourceGraphic"
            result="fbSourceGraphicAlpha"
          ></feColorMatrix>
          <feGaussianBlur
            in="fbSourceGraphic"
            result="fbSourceGraphic"
            stdDeviation="0.41 0.41"
            id="feGaussianBlur11"
          ></feGaussianBlur>
          <feColorMatrix
            id="feColorMatrix16"
            values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
            in="fbSourceGraphic"
            result="fbSourceGraphicAlpha"
          ></feColorMatrix>
          <feGaussianBlur
            in="fbSourceGraphic"
            result="blur"
            stdDeviation="0.41 0.81"
            id="feGaussianBlur16"
          ></feGaussianBlur>
        </filter>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="90.117599"
          x2="109.67596"
          y1="90.117599"
          x1="26.060976"
          id="linearGradient17"
          xlink:href="#linearGradient16"
        ></linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="93.394592"
          x2="109.54661"
          y1="93.394592"
          x1="26.190332"
          id="linearGradient19"
          xlink:href="#linearGradient18"
        ></linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="65.54007"
          x2="106.7439"
          y1="65.54007"
          x1="29.165503"
          id="linearGradient21"
          xlink:href="#linearGradient20"
        ></linearGradient>
      </defs>
      <g style="display:none" transform="translate(-5.3466899)" id="g4">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect4"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="path4"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:inline" transform="translate(-19.737668)" id="g5">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect5"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle5"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:inline" transform="translate(-12.542179)" id="g6">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect6"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle6"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:inline" transform="translate(-26.933157)" id="g7">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect7"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle7"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-41.324135)" id="g8">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect8"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle8"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:inline" transform="translate(-34.128646)" id="g9">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect9"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle9"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="51.440331"
        id="path10"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="58.684235"
        id="circle11"
        style="display:inline;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="65.885017"
        id="circle12"
        style="display:inline;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="73.0858"
        id="circle13"
        style="display:inline;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="80.243469"
        id="circle14"
        style="display:inline;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="87.444252"
        id="circle15"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <rect
        ry="11.544399"
        y="35.930824"
        x="29.721762"
        height="59.218491"
        width="76.465881"
        id="rect2"
        style="display:inline;fill:#000000;fill-opacity:0;fill-rule:evenodd;stroke:url(#linearGradient21);stroke-width:1.11252;stroke-dashoffset:3.02929;stroke-opacity:1"
      ></rect>
      <g style="display:inline" id="g10">
        <rect
          ry="4.8292685"
          y="82.270035"
          x="26.560976"
          height="15.695122"
          width="82.614983"
          id="rect1"
          style="display:inline;fill:url(#linearGradient17);fill-rule:evenodd;stroke:#010101;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <rect
          ry="0"
          y="88.710266"
          x="26.576561"
          height="9.3686581"
          width="82.583817"
          id="rect3"
          style="display:inline;fill:url(#linearGradient19);fill-rule:evenodd;stroke:#010101;stroke-width:0.772457;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
      </g>
      <circle
        transform="matrix(0.79363708,-0.63832613,0.58845302,0.73162938,-28.434837,90.707112)"
        r="1.1935177"
        cy="85.014572"
        cx="105.61591"
        id="circle16"
        style="display:inline;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
    </svg>
  </div>
  <div id="newtonsCradleLeft">
    <svg
      id="svg1"
      version="1.1"
      viewBox="0 0 132 132.00001"
      height="132mm"
      width="132mm"
    >
      <defs id="defs1">
        <linearGradient id="linearGradient20">
          <stop
            id="stop20"
            offset="0"
            style="stop-color:#444443;stop-opacity:1;"
          ></stop>
          <stop
            id="stop21"
            offset="1"
            style="stop-color:#5b5b5b;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <linearGradient id="linearGradient18">
          <stop
            id="stop18"
            offset="0"
            style="stop-color:#121212;stop-opacity:1;"
          ></stop>
          <stop
            id="stop19"
            offset="1"
            style="stop-color:#282828;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <linearGradient id="linearGradient16">
          <stop
            id="stop16"
            offset="0"
            style="stop-color:#000000;stop-opacity:1;"
          ></stop>
          <stop
            id="stop17"
            offset="1"
            style="stop-color:#1e1e1e;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <filter
          height="4.5998159"
          width="3.7954709"
          y="-1.799908"
          x="-1.3977355"
          id="filter10"
          style="color-interpolation-filters:sRGB"
        >
          <feGaussianBlur
            id="feGaussianBlur10"
            result="fbSourceGraphic"
            stdDeviation="0.41 0.41"
          ></feGaussianBlur>
          <feColorMatrix
            id="feColorMatrix10"
            values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
            in="fbSourceGraphic"
            result="fbSourceGraphicAlpha"
          ></feColorMatrix>
          <feGaussianBlur
            in="fbSourceGraphic"
            result="fbSourceGraphic"
            stdDeviation="0.41 0.41"
            id="feGaussianBlur11"
          ></feGaussianBlur>
          <feColorMatrix
            id="feColorMatrix16"
            values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
            in="fbSourceGraphic"
            result="fbSourceGraphicAlpha"
          ></feColorMatrix>
          <feGaussianBlur
            in="fbSourceGraphic"
            result="blur"
            stdDeviation="0.41 0.81"
            id="feGaussianBlur16"
          ></feGaussianBlur>
        </filter>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="90.117599"
          x2="109.67596"
          y1="90.117599"
          x1="26.060976"
          id="linearGradient17"
          xlink:href="#linearGradient16"
        ></linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="93.394592"
          x2="109.54661"
          y1="93.394592"
          x1="26.190332"
          id="linearGradient19"
          xlink:href="#linearGradient18"
        ></linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="65.54007"
          x2="106.7439"
          y1="65.54007"
          x1="29.165503"
          id="linearGradient21"
          xlink:href="#linearGradient20"
        ></linearGradient>
      </defs>
      <g style="display:none" transform="translate(-5.3466899)" id="g4">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect4"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="path4"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-19.737668)" id="g5">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect5"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle5"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-12.542179)" id="g6">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect6"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle6"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-26.933157)" id="g7">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect7"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle7"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-41.324135)" id="g8">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect8"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle8"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="51.440331"
        id="path10"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="65.885017"
        id="circle12"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="73.0858"
        id="circle13"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="80.243469"
        id="circle14"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="87.444252"
        id="circle15"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <rect
        ry="11.544399"
        y="35.930824"
        x="29.721762"
        height="59.218491"
        width="76.465881"
        id="rect2"
        style="display:none;fill:#000000;fill-opacity:0;fill-rule:evenodd;stroke:url(#linearGradient21);stroke-width:1.11252;stroke-dashoffset:3.02929;stroke-opacity:1"
      ></rect>
      <g style="display:none" id="g10">
        <rect
          ry="4.8292685"
          y="82.270035"
          x="26.560976"
          height="15.695122"
          width="82.614983"
          id="rect1"
          style="display:inline;fill:url(#linearGradient17);fill-rule:evenodd;stroke:#010101;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <rect
          ry="0"
          y="88.710266"
          x="26.576561"
          height="9.3686581"
          width="82.583817"
          id="rect3"
          style="display:inline;fill:url(#linearGradient19);fill-rule:evenodd;stroke:#010101;stroke-width:0.772457;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
      </g>
      <circle
        transform="matrix(0.79363708,-0.63832613,0.58845302,0.73162938,-28.434837,90.707112)"
        r="1.1935177"
        cy="85.014572"
        cx="105.61591"
        id="circle16"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <g
        style="display:inline"
        transform="translate(-25.987986,30.001531)"
        id="g9"
      >
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect9"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle9"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <circle
        r="1.1935177"
        cy="91.844185"
        cx="66.824898"
        id="circle11"
        style="display:inline;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
    </svg>
  </div>
  <div id="newtonsCradleRight">
    <svg
      id="svg1"
      version="1.1"
      viewBox="0 0 132 132.00001"
      height="132mm"
      width="132mm"
    >
      <defs id="defs1">
        <linearGradient id="linearGradient20">
          <stop
            id="stop20"
            offset="0"
            style="stop-color:#444443;stop-opacity:1;"
          ></stop>
          <stop
            id="stop21"
            offset="1"
            style="stop-color:#5b5b5b;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <linearGradient id="linearGradient18">
          <stop
            id="stop18"
            offset="0"
            style="stop-color:#121212;stop-opacity:1;"
          ></stop>
          <stop
            id="stop19"
            offset="1"
            style="stop-color:#282828;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <linearGradient id="linearGradient16">
          <stop
            id="stop16"
            offset="0"
            style="stop-color:#000000;stop-opacity:1;"
          ></stop>
          <stop
            id="stop17"
            offset="1"
            style="stop-color:#1e1e1e;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <filter
          height="4.5998159"
          width="3.7954709"
          y="-1.799908"
          x="-1.3977355"
          id="filter10"
          style="color-interpolation-filters:sRGB"
        >
          <feGaussianBlur
            id="feGaussianBlur10"
            result="fbSourceGraphic"
            stdDeviation="0.41 0.41"
          ></feGaussianBlur>
          <feColorMatrix
            id="feColorMatrix10"
            values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
            in="fbSourceGraphic"
            result="fbSourceGraphicAlpha"
          ></feColorMatrix>
          <feGaussianBlur
            in="fbSourceGraphic"
            result="fbSourceGraphic"
            stdDeviation="0.41 0.41"
            id="feGaussianBlur11"
          ></feGaussianBlur>
          <feColorMatrix
            id="feColorMatrix16"
            values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
            in="fbSourceGraphic"
            result="fbSourceGraphicAlpha"
          ></feColorMatrix>
          <feGaussianBlur
            in="fbSourceGraphic"
            result="blur"
            stdDeviation="0.41 0.81"
            id="feGaussianBlur16"
          ></feGaussianBlur>
        </filter>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="90.117599"
          x2="109.67596"
          y1="90.117599"
          x1="26.060976"
          id="linearGradient17"
          xlink:href="#linearGradient16"
        ></linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="93.394592"
          x2="109.54661"
          y1="93.394592"
          x1="26.190332"
          id="linearGradient19"
          xlink:href="#linearGradient18"
        ></linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="65.54007"
          x2="106.7439"
          y1="65.54007"
          x1="29.165503"
          id="linearGradient21"
          xlink:href="#linearGradient20"
        ></linearGradient>
      </defs>
      <g style="display:none" transform="translate(-5.3466899)" id="g4">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect4"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="path4"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-19.737668)" id="g5">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect5"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle5"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-12.542179)" id="g6">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect6"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle6"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-26.933157)" id="g7">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect7"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle7"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-41.324135)" id="g8">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect8"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle8"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="51.440331"
        id="path10"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="65.885017"
        id="circle12"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="73.0858"
        id="circle13"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="80.243469"
        id="circle14"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="87.444252"
        id="circle15"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <rect
        ry="11.544399"
        y="35.930824"
        x="29.721762"
        height="59.218491"
        width="76.465881"
        id="rect2"
        style="display:none;fill:#000000;fill-opacity:0;fill-rule:evenodd;stroke:url(#linearGradient21);stroke-width:1.11252;stroke-dashoffset:3.02929;stroke-opacity:1"
      ></rect>
      <g style="display:none" id="g10">
        <rect
          ry="4.8292685"
          y="82.270035"
          x="26.560976"
          height="15.695122"
          width="82.614983"
          id="rect1"
          style="display:inline;fill:url(#linearGradient17);fill-rule:evenodd;stroke:#010101;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <rect
          ry="0"
          y="88.710266"
          x="26.576561"
          height="9.3686581"
          width="82.583817"
          id="rect3"
          style="display:inline;fill:url(#linearGradient19);fill-rule:evenodd;stroke:#010101;stroke-width:0.772457;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
      </g>
      <circle
        transform="matrix(0.79363708,-0.63832613,0.58845302,0.73162938,-28.434837,90.707112)"
        r="1.1935177"
        cy="85.014572"
        cx="105.61591"
        id="circle16"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <g
        style="display:inline"
        transform="translate(-25.987986,30.001531)"
        id="g9"
      >
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect9"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle9"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <circle
        r="1.1935177"
        cy="91.844185"
        cx="66.824898"
        id="circle11"
        style="display:inline;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by BlackisPlay  - Tags: material design, animation, 3d, minimalist, black, loading, loader */
#wholeThing {
  height: 700px;
  width: 500px;
  scale: 0.8;
}

#newtonsCradle,
#newtonsCradleLeft,
#newtonsCradleRight {
  position: absolute;
}

#newtonsCradle {
  top: 90px;
  left: -115px; /*Use top and left to change the position of the newton's cradle*/
}

#newtonsCradleRight {
  animation: swingRight 2s infinite both;
  animation-delay: 1s;
  rotate: -90deg;
  grid-area: right;
  top: -24px;
  left: -37px; /*Use top and left to change the position of the right swinging ball*/
}

@keyframes swingRight {
  0% {
    rotate: -90deg;
  }

  30% {
    rotate: 0deg;
  }

  75% {
    rotate: 0deg;
  }

  100% {
    rotate: -90deg;
  }
}

#newtonsCradleLeft {
  animation: swingLeft 2s infinite both ease-out;
  rotate: 90deg;
  grid-area: left;
  top: -24px;
  left: -173px; /*Use top and left to change the position of the left swinging ball*/
}

@keyframes swingLeft {
  0% {
    rotate: 90deg;
  }

  30% {
    rotate: 0deg;
  }

  75% {
    rotate: 0deg;
  }

  100% {
    rotate: 90deg;
  }
}

</style>
    

================================================
FILE: loaders/BlagaDavid74257_warm-walrus-89.html
================================================
<div class="loading-container">
  <div class="loader">
    <div class="spinner"></div>
  </div>
</div>

<style>
/* From Uiverse.io by BlagaDavid74257  - Tags: tooltip, icon, animation, loader, dark, theme */
.loading-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.loader {
  width: 100px;
  height: 100px;
  border: 10px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  animation: pulse 1.5s infinite alternate;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

</style>
    

================================================
FILE: loaders/Bodyhc_curly-bullfrog-98.html
================================================
<div class="wrapper">
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
    <div class="side left"></div>
    <div class="side right"></div>
  </div>
</div>

<style>
/* From Uiverse.io by Bodyhc  - Tags: loading, loader, cube, loading animation, 3d loader */
.wrapper {
  perspective: 1000px;
}
.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: animate 4s linear infinite;
}
.side {
  position: absolute;
  width: 200px;
  height: 200px;
  display: grid;
  background-color: #01b4f9;
  border-radius: 10px;
  place-content: center;
  border: 3px solid #fff;
}

.front {
  transform: translateZ(100px);
}
.back {
  transform: rotateY(180deg) translateZ(100px);
}
.top {
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}
.left {
  transform: rotateY(-90deg) translateZ(100px);
}
.right {
  transform: rotateY(90deg) translateZ(100px);
}

@keyframes animate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

</style>
    

================================================
FILE: loaders/Bodyhc_witty-robin-88.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Bodyhc - Tags: loader, car loader, 3d loader, 3d cude loader */
.loader {
  width: calc(90px / 0.707);
  height: 20px;
  background: repeating-linear-gradient(135deg, #766DF4 0 15px,#0000 0 20px) left top,
    repeating-linear-gradient( 45deg, #766DF4 0 15px,#0000 0 20px) left bottom;
  background-size: 300% 50%;
  background-repeat: no-repeat;
  animation: i4 2s infinite linear;
}

@keyframes i4 {
  100% {
    background-position: top right,bottom right
  }
}

</style>


================================================
FILE: loaders/Bodyhc_wonderful-panther-25.html
================================================
<div class="custom-loader"></div>
<style>
/* From Uiverse.io by Bodyhc - Tags: loading, loader, circle loader */
.custom-loader {
  width: 50px;
  height: 50px;
  display: grid;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side,#0000 40%,#000 41%);
  background: linear-gradient(0deg ,#766DF480 50%,#766DF4FF 0) center/4px 100%,
    linear-gradient(90deg,#766DF440 50%,#766DF4BF 0) center/100% 4px;
  background-repeat: no-repeat;
  animation: s3 1s infinite steps(12);
}

.custom-loader::before,
.custom-loader::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: inherit;
  opacity: 0.915;
  transform: rotate(30deg);
}

.custom-loader::after {
  opacity: 0.83;
  transform: rotate(60deg);
}

@keyframes s3 {
  100% {
    transform: rotate(1turn)
  }
}
</style>


================================================
FILE: loaders/Cebucoder_foolish-kangaroo-50.html
================================================
<div class="loader">
  <label>Redirecting...</label>
  <div class="loading"></div>
</div>

<style>
/* From Uiverse.io by Cebucoder  - Tags: white, loading, loader, shadow, modern, text animation, effect loader, loading animation */
.loader {
  width: 350px;
  height: 180px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 30px;
  box-shadow: 2px 2px 10px -5px lightgrey;
}
.loading {
  width: 100%;
  height: 10px;
  background: lightgrey;
  border-radius: 10px;
  position: relative;
}
.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 10px;
  background: #002;
  border-radius: 10px;
  z-index: 1;
  animation: loading 0.6s alternate infinite;
}
label {
  color: #002;
  font-size: 18px;
  animation: bit 0.6s alternate infinite;
}

@keyframes bit {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

@keyframes loading {
  0% {
    left: 25%;
  }
  100% {
    left: 50%;
  }
  0% {
    left: 0%;
  }
}

</style>
    

================================================
FILE: loaders/CharandeepSingh01_curly-husky-35.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by CharandeepSingh01 - Tags: loading, loader, loading animation, 3d loader */
/*View in dark mode for good effects*/
.loader {
  border: 4px solid red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border-right-color: transparent;
  animation: rot 1s linear infinite;
  box-shadow: 0px 0px 20px red inset;
}

@keyframes rot {
  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/Charly-T_swift-bulldog-26.html
================================================
<svg class="loader" viewBox="0 0 100 100">
    <circle class="moon moon-back"></circle>
    <circle class="planet"></circle>
    <circle class="moon moon-front"></circle>
</svg>
<style>
/* From Uiverse.io by Charly-T - Tags: loader */
.loader {
  --moon-r: 0.7em;
  --planet-r: 1.75em;
  --planet-stroke-width: 4;
  --center: 50;
  --moon-max: 80;
  --moon-min: 20;
  --animation-duration: 4000ms;
  --planet-stroke: black;
  --planet-fill: white;
  --moon-fill: #fecb00;
  width: 7em;
}

.planet {
  cx: var(--center);
  cy: var(--center);
  r: var(--planet-r);
  fill: var(--planet-fill);
  stroke: var(--planet-stroke);
  stroke-width: var(--planet-stroke-width);
}

.moon {
  fill: var(--moon-fill);
  r: var(--moon-r);
}

.moon-front {
  animation: orbit0234 var(--animation-duration) ease-in-out infinite,
    orbit-front var(--animation-duration) linear infinite;
}

.moon-back {
  animation: orbit0234 var(--animation-duration) ease-in-out infinite;
}

@keyframes orbit0234 {
  0% {
    cx: var(--moon-max);
    cy: var(--moon-min);
  }

  50% {
    cx: var(--moon-min);
    cy: var(--moon-max);
  }

  100% {
    cx: var(--moon-max);
    cy: var(--moon-min);
  }
}

@keyframes orbit-front {
  0% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

</style>


================================================
FILE: loaders/Charly-T_weak-panther-69.html
================================================
<div class="container">
    <svg width="100%" height="100" viewBox="-1 -1 22 22">
        <path style="--order: 7" class="eight e-8"></path>
        <path style="--order: 6" class="eight e-7"></path>
        <path style="--order: 5" class="eight e-6"></path>
        <path style="--order: 4" class="eight e-5"></path>
        <path style="--order: 3" class="eight e-4"></path>
        <path style="--order: 2" class="eight e-3"></path>
        <path style="--order: 1" class="eight e-2"></path>
        <path style="--order: 0" class="eight e-1"></path>
    </svg>
</div>
<style>
/* From Uiverse.io by Charly-T - Tags: loader */
.container {
  overflow: hidden;
}

.container svg {
  --spin-duration: 2000ms;
  --infinity-duration: 2000ms;
  --hsl-base-h: 5deg;
  --hsl-base-s: 70%;
  --hsl-base-l: 50%;
  animation: spin81213 var(--spin-duration) linear infinite;
}

.eight {
  --eight-length-px: 60.84563446044922px;
 /* As seen on getTotalLength */
  --offset: calc(var(--order) * 5px);
  animation: infinity8123 var(--infinity-duration) linear infinite;
  d: path("m5 5a1 1 0 0110 0c0 4-10 6-10 10a1 1 0 0010 0c0-4-10-6-10-10");
  fill: none;
  stroke: hsl(calc(var(--hsl-base-h) * var(--order)) var(--hsl-base-s) var(--hsl-base-l));
  stroke-dasharray: 6px calc(var(--eight-length-px) - 6px);
  stroke-linecap: round;
  stroke-width: calc(1 - var(--order) / 10);
}

@keyframes infinity8123 {
  0% {
    stroke-dashoffset: calc(var(--eight-length-px) + var(--offset));
  }

  100% {
    stroke-dashoffset: var(--offset);
  }
}

@keyframes spin81213 {
  0% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(360deg)
  }
}
</style>


================================================
FILE: loaders/ChaudaryHammad_horrible-ape-25.html
================================================

  <div class="loader">
    <div class="cube">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face left"></div>
      <div class="face right"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
    </div>
  </div>

<style>
/* From Uiverse.io by ChaudaryHammad - Tags: neumorphism, loader, spinner, circle loader, spin, css, cool loader, 3d loader */
.loader {
  perspective: 800px;
}

.cube {
  width: 40px;
  height: 40px;
  position: relative;
  transform-style: preserve-3d;
  animation: spin 3s linear infinite;
}

.face {
  width: 40px;
  height: 40px;
  position: absolute;
  opacity: 0.8;
}

.front {
  transform: translateZ(20px);
  background-color: #3498db;
}

.back {
  transform: translateZ(-20px);
  background-color: #e74c3c;
}

.left {
  transform: rotateY(90deg) translateZ(20px);
  background-color: #2ecc71;
}

.right {
  transform: rotateY(-90deg) translateZ(20px);
  background-color: #f39c12;
}

.top {
  transform: rotateX(90deg) translateZ(20px);
  background-color: #9b59b6;
}

.bottom {
  transform: rotateX(-90deg) translateZ(20px);
  background-color: #e67e22;
}

@keyframes spin {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

</style>


================================================
FILE: loaders/ChaudaryHammad_white-rat-90.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by ChaudaryHammad - Tags: loading, loader, cool loader */
.loader {
  width: 50px;
  aspect-ratio: 1.154;
  position: relative;
  background: conic-gradient(from 120deg at 50% 64%,#0000, #ff1919 1deg 120deg,#0000 121deg);
  animation: l27-0 1.5s infinite cubic-bezier(0.3,1,0,1);
}

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  transform-origin: 50% 66%;
  animation: l27-1 1.5s infinite;
}

.loader:after {
  --s: -1;
}

@keyframes l27-0 {
  0%,30% {
    transform: rotate(0)
  }

  70% {
    transform: rotate(120deg)
  }

  70.01%,100% {
    transform: rotate(360deg)
  }
}

@keyframes l27-1 {
  0% {
    transform: rotate(calc(var(--s,1)*120deg)) translate(0)
  }

  30%,70% {
    transform: rotate(calc(var(--s,1)*120deg)) translate(calc(var(--s,1)*-5px),10px)
  }

  100% {
    transform: rotate(calc(var(--s,1)*120deg)) translate(0)
  }
}



</style>


================================================
FILE: loaders/CheneyLin_lazy-goat-96.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by CheneyLin  - Tags: animation, progress bar, loader */
.loader {
  position: absolute;
  border-radius: 10px;
  height: 20px;
  width: 320px;
  background-color: #aaa;
  animation: move-arrows 0.5s linear infinite;
  -webkit-animation: move-arrows 0.5s linear infinite;
  transform-origin: left;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABDZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMS1jMDAxIDc5LjE0NjI4OTk3NzcsIDIwMjMvMDYvMjUtMjM6NTc6MTQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3Y2M3MzIzZC0xZjc3LTQ1MmYtOGFjZS1jY2JkZWIwNTMyZWIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTUzNjQwRkU3RDNBMTFFRTk5QTg4MkQ5REZCNTY1NzAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTUzNjQwRkQ3RDNBMTFFRTk5QTg4MkQ5REZCNTY1NzAiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjAgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTExLTE3VDE2OjU0OjA4KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0xMS0yMFQwNTozNDoxNyswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0xMS0yMFQwNTozNDoxNyswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDBDQjlDMjdENEIxMUVFOTU2MkVDNUVBMTUxNTUyMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDBDQjlDMzdENEIxMUVFOTU2MkVDNUVBMTUxNTUyMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pj38waoAAAFKSURBVHjanJbbSwJhEMV3pYTQIOgCPogEPQQZRBf6/18zbyiGRD0YRNEFMuwmuZ2BIwTZfuebAz92H2Y8rDtzvk2zLEuoA1BNwuqCURKhwq/7HhgLPftgzWvyDc7BVOg5BkWPiWkCOkLfCjgCqcfEdAeuhN4NsOs1MV2AZ6F/B1S8JjZyTfApGNlUlj0mpg/QomGelsAJr9EmpkcwFJ6mzCdymZguwb1QV+E7cpmY2uBNqLNp2/SaTLmos0Cd7c0h9yjaxPQC+kJdkUYuk0SYtLlGXpN1hmNI1+DGY1JiKIbqH8DA8+KXuWyh1J0wJbJYk/m0rArT1/jvmAiZ7IEtYRhsj149G18D28LfOQwlQiHnrKgLBreMneioVydpLJ6if37IJumU1zx9gTN+F0SZpDy3S4GeGXPs3fMhUV+UoAtk+fUUk0U/AgwAELo+LcAxjVoAAAAASUVORK5CYII=");
  background-size: auto 100%;
}

@keyframes move-arrows {
  100% {
    background-position: 20px 0;
  }
}
@-webkit-keyframes move-arrows {
  100% {
    background-position: 20px 0;
  }
}

</style>
    

================================================
FILE: loaders/Chriskoziol_bright-ladybug-86.html
================================================
<div class="spinnerContainer">
  <div class="spinner"></div>
  <div class="loader">
    <p>loading</p>
    <div class="words">
      <span class="word">posts</span>
      <span class="word">images</span>
      <span class="word">followers</span>
      <span class="word">hashtags</span>
      <span class="word">posts</span>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Chriskoziol - Tags: animation, loading, active, loader, circle, animated, clean */
.spinnerContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spinner {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #299fff;
  animation: tri-spinner 1s infinite linear;
}

.spinner::before,
.spinner::after {
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
  animation: tri-spinner 2s infinite;
}

.spinner::after {
  margin: 8px;
  animation-duration: 3s;
}

@keyframes tri-spinner {
  100% {
    transform: rotate(1turn);
  }
}

.loader {
  color: #4a4a4a;
  font-family: "Poppins",sans-serif;
  font-weight: 500;
  font-size: 25px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 8px;
}

.words {
  overflow: hidden;
}

.word {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: cycle-words 5s infinite;
}

@keyframes cycle-words {
  10% {
    -webkit-transform: translateY(-105%);
    transform: translateY(-105%);
  }

  25% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  35% {
    -webkit-transform: translateY(-205%);
    transform: translateY(-205%);
  }

  50% {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%);
  }

  60% {
    -webkit-transform: translateY(-305%);
    transform: translateY(-305%);
  }

  75% {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
  }

  85% {
    -webkit-transform: translateY(-405%);
    transform: translateY(-405%);
  }

  100% {
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%);
  }
}

</style>


================================================
FILE: loaders/Cksunandh_helpless-moose-39.html
================================================
<div class="orbital">
  <div class="ringOne"></div>
  <div class="ringTwo"></div>
  <div class="ringThree"></div>
  <div class="core"></div>
  <div class="spin"></div>
</div>

<style>
/* From Uiverse.io by Cksunandh  - Tags: loader */
.orbital {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 110px;
}
.ringOne {
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  border-radius: 200px;
  box-shadow: -5px -5px 15px rgba(15, 180, 231, 0.3);
}
.ringTwo {
  background: #161616; /* Old browsers */
  background: -moz-linear-gradient(top, #161616 0%, #3d3d3d 100%); /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #161616),
    color-stop(100%, #3d3d3d)
  ); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
    top,
    #161616 0%,
    #3d3d3d 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(
    top,
    #161616 0%,
    #3d3d3d 100%
  ); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #161616 0%, #3d3d3d 100%); /* IE10+ */
  background: linear-gradient(to bottom, #161616 0%, #3d3d3d 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161616', endColorstr='#3d3d3d',GradientType=0 ); /* IE6-9 */

  border: 1px solid #444;
  position: absolute;
  top: -25px;
  right: -25px;
  bottom: -25px;
  left: -25px;
  border-radius: 200px;
  z-index: -2;
}
.spin {
  margin: 0 auto;
  background: #91ffff; /* Old browsers */
  background: -moz-radial-gradient(
    20% 20%,
    ellipse cover,
    #91ffff 0%,
    #920a51 24%,
    #000000 74%,
    #000000 100%
  ); /* FF3.6+ */
  background: -webkit-gradient(
    radial,
    20% 20%,
    0px,
    20% 20%,
    100%,
    color-stop(0%, #91ffff),
    color-stop(24%, #0fb4e7),
    color-stop(74%, #000000),
    color-stop(100%, #000000)
  ); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(
    20% 20%,
    ellipse cover,
    #91ffff 0%,
    #0fb4e7 24%,
    #000000 74%,
    #000000 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(
    20% 20%,
    ellipse cover,
    #91ffff 0%,
    #0fb4e7 24%,
    #000000 74%,
    #000000 100%
  ); /* Opera 12+ */
  background: -ms-radial-gradient(
    20% 20%,
    ellipse cover,
    #91ffff 0%,
    #0fb4e7 24%,
    #000000 74%,
    #000000 100%
  ); /* IE10+ */
  background: radial-gradient(
    ellipse at 20% 20%,
    #91ffff 0%,
    #0fb4e7 24%,
    #000000 74%,
    #000000 100%
  ); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91ffff', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  border-radius: 110px;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
@-webkit-keyframes spinRotation {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinRotation {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinRotation {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.spin {
  -webkit-animation-name: spinRotation;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spinRotation;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  animation-name: spinRotation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.ringTwo {
  -webkit-animation-name: spinRotation;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spinRotation;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  animation-name: spinRotation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.ringThree {
  color: #fff;
  background-color: #ccc;
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: -1;
  border-radius: 110px;
  background: #575b60; /* Old browsers */
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    #575b60 1%,
    #000000 100%
  ); /* FF3.6+ */
  background: -webkit-gradient(
    radial,
    center center,
    0px,
    center center,
    100%,
    color-stop(1%, #575b60),
    color-stop(100%, #000000)
  ); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    #575b60 1%,
    #000000 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(
    center,
    ellipse cover,
    #575b60 1%,
    #000000 100%
  ); /* Opera 12+ */
  background: -ms-radial-gradient(
    center,
    ellipse cover,
    #575b60 1%,
    #000000 100%
  ); /* IE10+ */
  background: radial-gradient(
    ellipse at center,
    #575b60 1%,
    #000000 100%
  ); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575b60', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  box-shadow:
    -1px 0px 0px #333,
    0px -1px 0px #333;
}
.core {
  color: #ccc;
  background-color: #ccc;
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  z-index: 2;
  border-radius: 110px;
  background: #575b60; /* Old browsers */
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    #575b60 1%,
    #000000 100%
  ); /* FF3.6+ */
  background: -webkit-gradient(
    radial,
    center center,
    0px,
    center center,
    100%,
    color-stop(1%, #575b60),
    color-stop(100%, #000000)
  ); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    #575b60 1%,
    #000000 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(
    center,
    ellipse cover,
    #575b60 1%,
    #000000 100%
  ); /* Opera 12+ */
  background: -ms-radial-gradient(
    center,
    ellipse cover,
    #575b60 1%,
    #000000 100%
  ); /* IE10+ */
  background: radial-gradient(
    ellipse at center,
    #575b60 1%,
    #000000 100%
  ); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575b60', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  box-shadow:
    -1px 0px 0px #666,
    0px -1px 0px #666;
}
.core:active {
  color: #fff;
  background: #373a3d; /* Old browsers */
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    #373a3d 1%,
    #000000 100%
  ); /* FF3.6+ */
  background: -webkit-gradient(
    radial,
    center center,
    0px,
    center center,
    100%,
    color-stop(1%, #373a3d),
    color-stop(100%, #000000)
  ); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    #373a3d 1%,
    #000000 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(
    center,
    ellipse cover,
    #373a3d 1%,
    #000000 100%
  ); /* Opera 12+ */
  background: -ms-radial-gradient(
    center,
    ellipse cover,
    #373a3d 1%,
    #000000 100%
  ); /* IE10+ */
  background: radial-gradient(
    ellipse at center,
    #373a3d 1%,
    #000000 100%
  ); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373a3d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/* Button Container */
.orbital {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 110px;
  transition: transform 0.3s ease-in-out; /* Smooth hover effect */
}

.orbital:hover {
  transform: scale(1.1); /* Slightly increases size on hover */
}

/* Outer Ring */
.ringOne {
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  border-radius: 200px;
  box-shadow: -5px -5px 15px rgba(15, 180, 231, 0.3);
}

/* Middle Ring */
.ringTwo {
  border: 1px solid #444;
  position: absolute;
  top: -25px;
  right: -25px;
  bottom: -25px;
  left: -25px;
  border-radius: 200px;
  z-index: -2;
  background: linear-gradient(to bottom, #161616 0%, #3d3d3d 100%);
  animation: rotateClockwise 4s infinite linear; /* Rotate clockwise */
}

/* Core */
.core {
  color: #ccc;
  background-color: #ccc;
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  z-index: 2;
  border-radius: 110px;
  background: radial-gradient(ellipse at center, #575b60 1%, #000000 100%);
  box-shadow:
    -1px 0px 0px #666,
    0px -1px 0px #666;
  animation: pulse 2s infinite ease-in-out; /* Pulse animation */
}

.core:hover {
  background: radial-gradient(ellipse at center, #373a3d 1%, #000000 100%);
}

.core p {
  text-align: center;
  margin-top: 40%;
  font-size: 18px;
  font-family: sans-serif;
  font-weight: bolder;
  text-shadow: -1px -1px 0px #444;
}

/* Spin Animation */
.spin {
  background: radial-gradient(
    ellipse at 20% 20%,
    #91ffff 0%,
    #0fb4e7 24%,
    #000000 100%
  );
  border-radius: 110px;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation: rotateAntiClockwise 6s infinite linear; /* Rotate anticlockwise */
}

/* Animations */

/* Rotate clockwise */
@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Rotate anticlockwise */
@keyframes rotateAntiClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

/* Pulse animation for the core */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 5px #666;
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 15px #0fb4e7;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 5px #666;
  }
}

</style>
    

================================================
FILE: loaders/Cksunandh_nice-panda-34.html
================================================
<div class="cssloader">
  <div class="triangle1"></div>
  <div class="triangle2"></div>
  <p class="text">Please Wait</p>
</div>

<style>
/* From Uiverse.io by Cksunandh  - Tags: loader */
.triangle1 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 0;
  border-color: #8086e0 transparent transparent transparent;
  margin: 0 auto;
  animation: shk1 1s ease-in-out infinite normal;
}

.triangle2 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 50px;
  border-color: transparent transparent #6554b388 transparent;
  margin: -50px auto 0;
  animation: shk2 1s ease-in-out infinite alternate;
}
@keyframes shk1 {
  0% {
    transform: rotate(-360deg);
  }

  100% {
  }
}

@keyframes shk2 {
  0% {
    transform: rotate(360deg);
  }
  100% {
  }
}

.text {
  color: #949494;
  margin: 30px auto;
  text-align: center;
  font-weight: 500;
  letter-spacing: 4px;
}

</style>
    

================================================
FILE: loaders/Cksunandh_young-dragonfly-81.html
================================================
<div class="loader"><i></i></div>

<style>
/* From Uiverse.io by Cksunandh  - Tags: simple, loader, html, css */
.loader i {
  display: block;
  width: 2px;
  height: 85px;
  margin-top: 18px;
  background-color: rgba(61, 61, 61, 0.5);
  overflow: hidden;
  position: relative;
}
.loader i:before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  position: absolute;
  top: 0;
  left: 0;
  animation: loader-animation 2s infinite normal;
}
@keyframes loader-animation {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  15% {
    transform: translate3d(0, -98%, 0);
  }
  85% {
    transform: translate3d(0, 98%, 0);
  }
  100% {
    transform: translate3d(0, 100%, 0);
  }
}

</style>
    

================================================
FILE: loaders/ClawHack1_evil-panda-55.html
================================================
<div class="loader">
  <div class="loader__circle"></div>
  <div class="loader__circle"></div>
  <div class="loader__circle"></div>
  <div class="loader__circle"></div>
</div>

<style>
/* From Uiverse.io by ClawHack1 - Tags: loader */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.loader__circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin: 0 4px;
  animation: loader_901 1s ease-in-out infinite;
}

.loader__circle:nth-of-type(1) {
  background-color: #007aff;
  animation-delay: 0;
}

.loader__circle:nth-of-type(2) {
  background-color: #ff2d55;
  animation-delay: 0.25s;
}

.loader__circle:nth-of-type(3) {
  background-color: #34c759;
  animation-delay: 0.5s;
}

.loader__circle:nth-of-type(4) {
  background-color: #ff9500;
  animation-delay: 0.75s;
}

@keyframes loader_901 {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(1.2);
  }

  40% {
    transform: scale(1);
  }
}

</style>


================================================
FILE: loaders/ClawHack1_witty-ladybug-78.html
================================================
<div class="loader">
  <div class="loader-inner">
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
  </div>
</div>

<style>
/* From Uiverse.io by ClawHack1 - Tags: loader */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  position: relative;
}

.loader:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
}

.loader-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.loader-block {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 2px;
  background-color: #fff;
  box-shadow: 0 0 20px #fff;
  animation: loader_562 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.loader-block:nth-child(1) {
  animation-delay: 0.1s;
}

.loader-block:nth-child(2) {
  animation-delay: 0.2s;
}

.loader-block:nth-child(3) {
  animation-delay: 0.3s;
}

.loader-block:nth-child(4) {
  animation-delay: 0.4s;
}

.loader-block:nth-child(5) {
  animation-delay: 0.5s;
}

.loader-block:nth-child(6) {
  animation-delay: 0.6s;
}

.loader-block:nth-child(7) {
  animation-delay: 0.7s;
}

.loader-block:nth-child(8) {
  animation-delay: 0.8s;
}

@keyframes loader_562 {
  0% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  }

  20% {
    transform: scale(1, 2.5);
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.7);
  }

  40% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  }
}

</style>


================================================
FILE: loaders/Clemix37_young-bulldog-90.html
================================================

<div class="loader"></div>
<style>
/* From Uiverse.io by Clemix37 - Tags: loader */
.loader {
 width: 60px;
 height: 60px;
}

.loader::before {
 content: "";
 box-sizing: border-box;
 position: absolute;
 width: 60px;
 height: 60px;
 border-radius: 50%;
 border-top: 2px solid #8900FF;
 border-right: 2px solid transparent;
 animation: spinner8217 0.8s linear infinite;
}

@keyframes spinner8217 {
 to {
  transform: rotate(360deg);
 }
}
</style>


================================================
FILE: loaders/Codecite_mean-puma-17.html
================================================
<div class="spinner-container">
  <div class="spinner">
   <div class="spinner">
    <div class="spinner">
      <div class="spinner">
        <div class="spinner">
            <div class="spinner"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Codecite - Tags: animation, loading, loader, animated */
.spinner-container {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 30px auto;
  overflow: hidden;
}

.spinner {
  position: absolute;
  width: calc(100% - 9.9px);
  height: calc(100% - 9.9px);
  border: 5px solid transparent;
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 5s cubic-bezier(0.17, 0.49, 0.96, 0.79) infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/Codecite_witty-falcon-85.html
================================================
<div class="ld-ripple">
  <div></div>
  <div></div>
</div>
<style>
/* From Uiverse.io by Codecite - Tags: animation, loading, loader */
.ld-ripple {
  position: relative;
  width: 80px;
  height: 80px;
}

.ld-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: ld-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.ld-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes ld-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }

  4.9% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }

  5% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }

  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
</style>


================================================
FILE: loaders/Cornerstone-04_chilly-fish-82.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: loader */
.loader {
  width: 50px;
  height: 50px;
  position: relative;
  z-index: 1;
  transform: translateX(-50%);
}

.loader::before, 
.loader::after {
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  mix-blend-mode: multiply;
  animation: rotate92523 2s infinite cubic-bezier(0.77, 0, 0.175, 1);
}

.loader::before {
  background-color: #75e2ff;
}

.loader::after {
  background-color: #ff8496;
  animation-delay: 1s;
}

@keyframes rotate92523 {
  0%, 100% {
    left: 35px;
  }

  25% {
    transform: scale(.3);
  }

  50% {
    left: 0%;
  }

  75% {
    transform: scale(1);
  }
}
</style>


================================================
FILE: loaders/Cornerstone-04_little-mouse-69.html
================================================
<div class="loader">
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
</div>
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: loader */
.loader {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: 0.5s linear;
}

.ball {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: bounce6135 1s alternate infinite;
  transition: 0.5s linear;
}

.ball {
  background: #fff;
}

.ball:nth-child(2) {
  animation-delay: 0.25s;
}

.ball:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes bounce6135 {
  from {
    transform: scale(2);
  }

  to {
    transform: scale(1);
  }
}


</style>


================================================
FILE: loaders/Cornerstone-04_massive-impala-29.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: loader */
.loader {
  width: 60px;
  height: 60px;
  border: 10px solid #1cd42550;
  border-top-color: #1cd425;
  animation: spin013151 1s linear infinite;
  border-radius: 100%;
}

@keyframes spin013151 {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/Cornerstone-04_neat-dragon-24.html
================================================
<div class="loader">
    <div></div>
</div>
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: loader */
.loader {
  width: 50px;
  height: 50px;
  border: 7px double;
  border-color: #43cec7 transparent;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: spin13213 2s linear infinite;
}

.loader div {
  width: 50%;
  height: 50%;
  background-color: #43cec7;
  border-radius: 50%;
}

@keyframes spin13213 {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/Cornerstone-04_terrible-termite-49.html
================================================
<div class="loader">

</div>
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: loader */
.loader {
  display: inline-block;
  width: 190px;
  height: 10px;
  border-radius: 40px;
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  overflow: hidden;
}

.loader span {
  font: 700 22px monospace;
  text-transform: uppercase;
  margin: auto;
  color: #fff;
  letter-spacing: 5px;
}

.loader::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50px;
  width: 150%;
  height: 100%;
  background-image: linear-gradient(332deg, #6bff7f, #32ff3c);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
  animation: load5123 1s infinite;
}

@keyframes load5123 {
  50% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}
</style>


================================================
FILE: loaders/Cornerstone-04_ugly-rattlesnake-41.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: loader */
.loader {
  width: 150px;
  height: 150px;
  border-left: 5px solid #38ff8e;
  border-radius: 50%;
  animation: right5231 0.9s linear infinite;
}

.loader::before,
  .loader::after {
  content: "";
  width: 120px;
  height: 120px;
  display: block;
  position: absolute;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
  border-right: 5px solid #ffbe0b;
  border-radius: 50%;
  animation: left036 0.9s linear infinite;
}

.loader::after {
  width: 90px;
  height: 90px;
  top: calc(50% - 45px);
  left: calc(50% - 45px);
  border: 0;
  border-top: 5px solid #ff086e;
  animation: none;
}

@keyframes right5231 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes left036 {
  from {
    transform: rotate(720deg);
  }

  to {
    transform: rotate(0deg);
  }
}
</style>


================================================
FILE: loaders/Cybercom682_happy-mole-82.html
================================================
<!-- From Uiverse.io by Cybercom682  - Tags: loader, spinner, circle, clean, circle loader, spin -->
<div class="text-center">
  <div
    class="w-16 h-16 border-4 border-dashed rounded-full animate-spin border-yellow-500 mx-auto"
  ></div>
  <h2 class="text-zinc-900 dark:text-white mt-4">Loading...</h2>
  <p class="text-zinc-600 dark:text-zinc-400">
    Your adventure is about to begin
  </p>
</div>


    

================================================
FILE: loaders/Cybercom682_pink-shrimp-80.html
================================================
<div class="loader">
  <div class="eye"></div>
</div>
<style>
/* From Uiverse.io by Cybercom682 - Tags: loader, rotate, scale, eye */
.loader {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  position: relative;
}

.loader::before {
  content: "";
  height: 100%;
  width: 100%;
  border: 1px solid black;
  border-radius: 50%;
  position: absolute;
  animation: doitreverse 4s infinite;
}

.loader::after {
  content: "";
  height: 100%;
  width: 100%;
  border: 1px solid black;
  border-radius: 50%;
  position: absolute;
  animation: doit 4s infinite;
}

@keyframes doit {
  0% {
    transform: scale(1);
  }

  50% {
    border-radius: 20% 50%;
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes doitreverse {
  0% {
    transform: rotate(360deg);
  }

  50% {
    border-radius: 50% 20%;
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.eye {
  height: 50%;
  width: 50%;
  border-radius: 50%;
  border: 1px solid black;
  background-color: rgb(85, 0, 128);
  position: absolute;
  left: 25%;
  top: 25%;
  animation: showme 4s infinite;
}

.eye::before {
  content: "";
  height: 20%;
  width: 20%;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  top: 25%;
  left: 50%;
  animation: showme 4s infinite;
}

.eye::after {
  content: "";
  height: 10%;
  width: 10%;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  top: 60%;
  left: 50%;
  animation: showme 4s infinite;
}

@keyframes showme {
  0% {
    transform: scale(0.3);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.3);
  }
}
</style>


================================================
FILE: loaders/Cybercom682_slippery-bulldog-47.html
================================================
<div class="loader">
  <div class="magnetism"></div>
</div>

<style>
/* From Uiverse.io by Cybercom682  - Tags: animation, loader, magnet */
.loader {
  position: relative;
  background-color: red;
  height: 40px;
  width: 10px;
  border-radius: 6px 0px 0px 6px;
  animation: rotate 5s infinite;
}
.magnetism {
  position: absolute;
  color: rgb(0, 151, 252);
  bottom: 0;
  width: 80px;
  left: 0%;
  height: 40px;
  border: solid 2px currentColor;
  border-color: currentColor transparent transparent transparent;
  border-radius: 50%;
  transform: rotate(90deg);
  animation: go 0.5s ease-in-out infinite;
}

.loader::before {
  content: "";
  left: 10px;
  position: absolute;
  background: rgb(255, 0, 0);
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 0, 0, 1) 50%,
    rgba(158, 158, 158, 1) 50%,
    rgba(184, 184, 184, 1) 100%
  );
  height: 10px;
  width: 20px;
}
.loader::after {
  content: "";
  left: 10px;
  position: absolute;
  bottom: 0;
  background: rgb(255, 0, 0);
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 0, 0, 1) 50%,
    rgba(158, 158, 158, 1) 50%,
    rgba(184, 184, 184, 1) 100%
  );
  height: 10px;
  width: 20px;
}

@keyframes rotate {
  0% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}

@keyframes go {
  0% {
    left: 0%;
    width: 30px;
    opacity: 1;
  }
  50% {
    left: 100%;
    width: 60px;
    opacity: 0.5;
  }
  100% {
    width: 90px;
    left: 200%;
    opacity: 0;
  }
}

</style>
    

================================================
FILE: loaders/DSB2004_ugly-yak-77.html
================================================
<div id="Loading">
  <div id="loading_div">
    <div id="loading_bouncer"></div>
    <div id="shadow"></div>
  </div>
</div>

<style>
/* From Uiverse.io by DSB2004  - Tags: simple, gradient, loader */
#Loading {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
#loading_div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes shadow {
  0% {
    height: 50px;
    width: 50px;
  }
  50% {
    height: 10px;
    width: 10px;
  }
  100% {
    height: 50px;
    width: 50px;
  }
}
#loading_bouncer {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background: linear-gradient(
    to bottom,
    rgb(89, 0, 255),
    rgb(0, 110, 255),
    rgb(25, 0, 255)
  );
  animation: bounce 500ms ease-in-out infinite;
}
#shadow {
  position: absolute;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background: black;
  top: 30px;
  transform: rotateX(80deg);
  animation: shadow 500ms ease-in-out infinite;
}

</style>
    

================================================
FILE: loaders/DarrylNoakes_cuddly-falcon-18.html
================================================
<div class="loader">
    <span class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 100 100">
            <ellipse transform="rotate(-21.283 49.994 75.642)" cx="50" cy="75.651" rx="19.347" ry="16.432" fill="currentColor"></ellipse>
            <path fill="currentColor" d="M58.474 7.5h10.258v63.568H58.474z"></path>
        </svg>
    </span>
    <span class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 100 100">
            <ellipse transform="rotate(-21.283 49.994 75.642)" cx="50" cy="75.651" rx="19.347" ry="16.432" fill="currentColor"></ellipse>
            <path fill="currentColor" d="M58.474 7.5h10.258v63.568H58.474z"></path>
        </svg>
    </span>
    <span class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 100 100">
            <ellipse transform="rotate(-21.283 49.994 75.642)" cx="50" cy="75.651" rx="19.347" ry="16.432" fill="currentColor"></ellipse>
            <path fill="currentColor" d="M58.474 7.5h10.258v63.568H58.474z"></path>
        </svg>
    </span>
</div>
<style>
/* From Uiverse.io by DarrylNoakes - Tags: loader */
.loader {
  --icon-count: 3;
  --inner-height: 4em;
  --ratio: 2/3;
 /* Customizable */
  --period: 1s;
 /* Customizable */
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--inner-height);
  width: calc(var(--inner-height) * var(--ratio) * var(--icon-count));
}

.loader .icon {
  width: calc(100% / var(--icon-count));
  height: calc(100% * var(--ratio));
  animation: loader-bounce02 var(--period) infinite linear;
}

/*
 * animation delay = (n - 1) / steps * period
 */

.loader .icon:nth-of-type(2) {
  animation-delay: calc(1 / 5 * var(--period));
}

.loader .icon:nth-of-type(3) {
  animation-delay: calc(2 / 5 * var(--period));
}

@keyframes loader-bounce02 {
  20% {
    /* Raise */
    transform: translateY(calc(-50% * (1 - var(--ratio))));
  }

  40% {
    /* Lower */
    transform: translateY(calc(50% * (1 - var(--ratio))));
  }

  60% {
    /* Keep centered */
    transform: translateY(0);
  }

  80% {
    /* Keep centered */
    transform: translateY(0);
  }
}
</style>


================================================
FILE: loaders/Dennyhml_grumpy-squid-93.html
================================================
<div class="container">
    <div class="bubble">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="bubble">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="bubble">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="bubble">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="bubble">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
 </div>
<style>
/* From Uiverse.io by Dennyhml - Tags: loader */
.bubble {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: inset 0 0 25px rgba (255, 255, 255, 0.25);
  animation: animate_4010 8s ease-in-out infinite;
}

.bubble:nth-child(2) {
  position: relative;
  zoom: 0.45;
  left: -10px;
  top: -100px;
  animation-delay: -4s;
}

.bubble:nth-child(3) {
  position: relative;
  zoom: 0.45;
  right: -80px;
  top: -300px;
  animation-delay: -6s;
}

.bubble:nth-child(4) {
  position: relative;
  zoom: 0.35;
  left: -120px;
  bottom: -200px;
  animation-delay: -3s;
}

.bubble:nth-child(5) {
  position: relative;
  zoom: 0.5;
  left: 0px;
  top: 200px;
  animation-delay: -5s;
}

@keyframes animate_4010 {
  0%,100% {
    transform: translateY(-20px);
  }

  50% {
    transform: translateY(20px);
  }
}

.bubble::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 45px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  z-index: 10;
  filter: blur(2px);
}

.bubble::after {
  content: '';
  position: absolute;
  top: 80px;
  left: 80px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  z-index: 10;
  filter: blur(2px);
}

.bubble span {
  position: absolute;
  border-radius: 50%;
}

.bubble span:nth-child(1) {
  inset: 10px;
  border-left: 15px solid #0fb4ff;
  filter: blur(8px);
}

.bubble span:nth-child(2) {
  inset: 10px;
  border-right: 15px solid #ff4484;
  filter: blur(8px);
}

.bubble span:nth-child(3) {
  inset: 10px;
  border-top: 15px solid #ffeb3b;
  filter: blur(8px);
}

.bubble span:nth-child(4) {
  inset: 30px;
  border-left: 15px solid #ff4484;
  filter: blur(12px);
}

.bubble span:nth-child(5) {
  inset: 10px;
  border-bottom: 10px solid #fff;
  filter: blur(8px);
  transform: rotate(330deg);
}
</style>


================================================
FILE: loaders/Deri-Kurniawan_hot-bullfrog-96.html
================================================
<!-- From Uiverse.io by Deri-Kurniawan  - Tags: animation, minimalist, loading, loader, smooth, glow, animated, loading animation -->
<div class="flex flex-row gap-2">
  <div class="animate-pulse bg-gray-300 w-12 h-12 rounded-full"></div>
  <div class="flex flex-col gap-2">
    <div class="animate-pulse bg-gray-300 w-28 h-5 rounded-full"></div>
    <div class="animate-pulse bg-gray-300 w-36 h-5 rounded-full"></div>
  </div>
</div>


    

================================================
FILE: loaders/Deri-Kurniawan_tall-robin-6.html
================================================
<div class="loader">
    <div class="cube">
        <div class="face"></div>
        <div class="face"></div>
        <div class="face"></div>
        <div class="face"></div>
        <div class="face"></div>
        <div class="face"></div>
    </div>
</div>
<style>
/* From Uiverse.io by Deri-Kurniawan - Tags: animation, gradient, loading, loader, cube, rotate, box, loading animation */
.loader {
  perspective: 600px;
  width: 100px;
  height: 100px;
}

.cube {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate 4s linear infinite;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #3498db, #e74c3c);
  opacity: 0.8;
  border: 0.5px solid #fff;
}

.face:nth-child(1) {
  transform: rotateX(90deg) translateZ(50px);
}

.face:nth-child(2) {
  transform: rotateX(-90deg) translateZ(50px);
}

.face:nth-child(3) {
  transform: translateZ(50px);
}

.face:nth-child(4) {
  transform: rotateY(90deg) translateZ(50px);
}

.face:nth-child(5) {
  transform: rotateY(-90deg) translateZ(50px);
}

.face:nth-child(6) {
  transform: rotateY(180deg) translateZ(50px);
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

</style>


================================================
FILE: loaders/Deri-Kurniawan_young-wolverine-83.html
================================================
<!-- From Uiverse.io by Deri-Kurniawan  - Tags: loading, card, loader, glow, card animation, skeleton -->
<div
  class="flex flex-col bg-neutral-300 w-56 h-64 animate-pulse rounded-xl p-4 gap-4"
>
  <div class="bg-neutral-400/50 w-full h-32 animate-pulse rounded-md"></div>
  <div class="flex flex-col gap-2">
    <div class="bg-neutral-400/50 w-full h-4 animate-pulse rounded-md"></div>
    <div class="bg-neutral-400/50 w-4/5 h-4 animate-pulse rounded-md"></div>
    <div class="bg-neutral-400/50 w-full h-4 animate-pulse rounded-md"></div>
    <div class="bg-neutral-400/50 w-2/4 h-4 animate-pulse rounded-md"></div>
  </div>
</div>


    

================================================
FILE: loaders/DevPTG_chatty-bat-62.html
================================================
<div class="spinner-box">
  <div class="circle-border">
    <div class="circle-core"></div>
  </div>  
</div>
<style>
/* From Uiverse.io by DevPTG - Tags: loader */
@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(359deg);
  }
}

@keyframes spin3D {
  from {
    transform: rotate3d(.5,.5,.5, 360deg);
  }

  to {
    transform: rotate3d(0deg);
  }
}

@keyframes configure-clockwise {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes configure-xclockwise {
  0% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(-45deg);
  }

  50% {
    transform: rotate(-135deg);
  }

  75% {
    transform: rotate(-225deg);
  }

  100% {
    transform: rotate(-315deg);
  }
}

@keyframes pulse {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: .25;
    transform: scale(.75);
  }
}

.circle-border {
  width: 150px;
  height: 150px;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgb(63,249,220);
  background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgb(5, 255, 138) 100%);
  animation: spin .8s linear 0s infinite;
}

.circle-core {
  width: 100%;
  height: 100%;
  background-color: #04090e00;
  border-radius: 50%;
}

</style>


================================================
FILE: loaders/DevPTG_old-grasshopper-0.html
================================================
<div id="load">
  <div>G</div>
  <div>N</div>
  <div>I</div>
  <div>D</div>
  <div>A</div>
  <div>O</div>
  <div>L</div>
</div>
<style>
/* From Uiverse.io by DevPTG - Tags: loader */
#load {
  position: absolute;
  width: 600px;
  height: 36px;
  left: 50%;
  top: 40%;
  margin-left: -300px;
  overflow: visible;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

#load div {
  position: absolute;
  width: 20px;
  height: 36px;
  opacity: 0;
  font-family: Helvetica, Arial, sans-serif;
  animation: move 2s linear infinite;
  -o-animation: move 2s linear infinite;
  -moz-animation: move 2s linear infinite;
  -webkit-animation: move 2s linear infinite;
  transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  color: #35C4F0;
}

#load div:nth-child(2) {
  animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}

#load div:nth-child(3) {
  animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}

#load div:nth-child(4) {
  animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}

#load div:nth-child(5) {
  animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}

#load div:nth-child(6) {
  animation-delay: 1s;
  -o-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

#load div:nth-child(7) {
  animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
}

@keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }

  35% {
    left: 41%;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  65% {
    left: 59%;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  100% {
    left: 100%;
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    opacity: 0;
  }
}

@-moz-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }

  35% {
    left: 41%;
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  65% {
    left: 59%;
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  100% {
    left: 100%;
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
    opacity: 0;
  }
}

@-webkit-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }

  35% {
    left: 41%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  65% {
    left: 59%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  100% {
    left: 100%;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    opacity: 0;
  }
}

@-o-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }

  35% {
    left: 41%;
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  65% {
    left: 59%;
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  100% {
    left: 100%;
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    opacity: 0;
  }
}
</style>


================================================
FILE: loaders/DevVaradPatil_angry-dragonfly-63.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by DevVaradPatil  - Tags: black, gradient, loader, dark */
.loader {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);
  animation: glow 2s linear infinite;
}
@keyframes glow {
  0% {
    transform: rotate(0deg);
    filter: hue-rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    filter: hue-rotate(360deg);
  }
}
.loader::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background: #212121;
  border-radius: 50%;
  z-index: 1000;
}
.loader::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);
  border-radius: 50%;
  z-index: 1000;
  z-index: 1;
  filter: blur(30px);
}

</style>
    

================================================
FILE: loaders/Df12345677_honest-seahorse-42.html
================================================
<div class="loader"> 
  <span id="one"></span>
  <span id="two"></span>
  <span id="three"></span>
</div>
<style>
/* From Uiverse.io by Df12345677 - Tags: loader */
.loader {
  display: flex;
  gap: 10px;
}

.loader span {
  height: 20px;
  width: 20px;
  background-image: linear-gradient(to right , #333 , #233,#222,#122,#112,#111,#011,#001,#000);
  border-radius: 50%;
  animation-name: animar;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  box-shadow: 20px 20px 18px #666666,
             -20px -20px 18px #ffffff;
}

#one {
  animation-delay: 1s;
}

#two {
  animation-delay: 2s;
}

#three {
  animation-delay: 3s;
}

@keyframes animar {
  0% {
    transform: scale(1);
  }

  33% {
    transform: scale(.3);
  }

  66% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}
</style>


================================================
FILE: loaders/Diox221_silent-termite-64.html
================================================
<div class="loader">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
  <div class="circle circle-4"></div>
</div>

<style>
/* From Uiverse.io by Diox221 - Tags: loader, accept call */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.circle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 10px;
  box-shadow: inset 0 0 0 2px #fff;
  transform-origin: center;
  animation: fill 1.5s ease-in-out infinite;
}

.circle-1 {
  animation-delay: 0s;
}

.circle-2 {
  animation-delay: -0.4s;
}

.circle-3 {
  animation-delay: -0.8s;
}

.circle-4 {
  animation-delay: -1.2s;
}

@keyframes fill {
  0% {
    transform: scale(1);
  }

  50% {
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 6px #1c1c1e;
    transform: scale(1.5);
  }

  100% {
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 6px #fff;
    transform: scale(1);
  }
}

</style>


================================================
FILE: loaders/Donewenfu_massive-badger-47.html
================================================
<div class="loader">
  <div class="justify-content-center jimu-primary-loading"></div>
</div>
<style>
/* From Uiverse.io by Donewenfu - Tags: loader */
.loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.jimu-primary-loading:before,
.jimu-primary-loading:after {
  position: absolute;
  top: 0;
  content: '';
}

.jimu-primary-loading:before {
  left: -19.992px;
}

.jimu-primary-loading:after {
  left: 19.992px;
  -webkit-animation-delay: 0.32s !important;
  animation-delay: 0.32s !important;
}

.jimu-primary-loading:before,
.jimu-primary-loading:after,
.jimu-primary-loading {
  background: #076fe5;
  -webkit-animation: loading-keys-app-loading 0.8s infinite ease-in-out;
  animation: loading-keys-app-loading 0.8s infinite ease-in-out;
  width: 13.6px;
  height: 32px;
}

.jimu-primary-loading {
  text-indent: -9999em;
  margin: auto;
  position: absolute;
  right: calc(50% - 6.8px);
  top: calc(50% - 16px);
  -webkit-animation-delay: 0.16s !important;
  animation-delay: 0.16s !important;
}

@-webkit-keyframes loading-keys-app-loading {

  0%,
  80%,
  100% {
    opacity: .75;
    box-shadow: 0 0 #076fe5;
    height: 32px;
  }

  40% {
    opacity: 1;
    box-shadow: 0 -8px #076fe5;
    height: 40px;
  }
}

@keyframes loading-keys-app-loading {

  0%,
  80%,
  100% {
    opacity: .75;
    box-shadow: 0 0 #076fe5;
    height: 32px;
  }

  40% {
    opacity: 1;
    box-shadow: 0 -8px #076fe5;
    height: 40px;
  }
}
</style>


================================================
FILE: loaders/EddyBel_jolly-monkey-87.html
================================================
<div class="loader">
  <div class="loader__circle"></div>
  <div class="loader__circle"></div>
  <div class="loader__circle"></div>
  <div class="loader__circle"></div>
  <div class="loader__circle"></div>
</div>
<style>
/* From Uiverse.io by EddyBel - Tags: loader */
.loader {
  position: relative;
  display: flex;
  gap: 0.3em;
}

.loader::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2em;
  filter: blur(45px);
  background-color: #e299ff;
  background-image: radial-gradient(at 52% 57%, hsla(11,83%,72%,1) 0px, transparent 50%),
  radial-gradient(at 37% 57%, hsla(175,78%,66%,1) 0px, transparent 50%);
}

.loader__circle {
  --size__loader: 0.6em;
  width: var(--size__loader);
  height: var(--size__loader);
  border-radius: 50%;
  animation: loader__circle__jumping 2s infinite;
  background-color: #b499ff;
}

.loader__circle:nth-child(2n) {
  animation-delay: 300ms;
  background-color: #e499ff;
}

.loader__circle:nth-child(3n) {
  animation-delay: 600ms;
}

@keyframes loader__circle__jumping {
  0%, 100% {
    transform: translateY(0px);
  }

  25% {
    transform: translateY(-15px) scale(0.5);
  }

  50% {
    transform: translateY(0px);
  }

  75% {
    transform: translateY(5px) scale(0.9);
  }
}
</style>


================================================
FILE: loaders/EmmaxPlay_polite-husky-37.html
================================================

<div class="spinner"></div>
<style>
/* From Uiverse.io by EmmaxPlay - Tags: loader */
.spinner {
 position: relative;
 width: 60px;
 height: 60px;
 border-radius: 50%;
}

.spinner::before,
.spinner:after {
 content: "";
 position: absolute;
 border-radius: inherit;
}

.spinner:before {
 width: 100%;
 height: 100%;
 background-image: linear-gradient(0deg, #ff00cc 0%, #333399 100%);
 animation: spin8932 .5s infinite linear;
}

.spinner:after {
 width: 85%;
 height: 85%;
 background-color: #212121;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

@keyframes spin8932 {
 to {
  transform: rotate(360deg);
 }
}
</style>


================================================
FILE: loaders/FWDJc_empty-fish-42.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by FWDJc - Tags: simple, animation, loader, heart, bounce animation, css animation */
.loader {
  width: 7em;
  height: 5em;
  position: relative;
  animation: beat 1s infinite;
}

.loader::before,
.loader::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  border-radius: 5em 5em 0 0;
  animation: coldblue 1s infinite;
}

.loader::before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.loader::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

@keyframes beat {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes coldblue {
  0%, 100% {
    background-color: rgb(255, 255, 255);
  }

  50% {
    background-color: rgb(91, 91, 241);
  }
}
</style>


================================================
FILE: loaders/FWDJc_massive-badger-8.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by FWDJc - Tags: animated, colorful, dvd, keyframes, css animation */
.loader {
  width: 150px;
  height: 40px;
  border-radius: 50%;
  position: relative;
  animation: bounce 5s infinite;
}

.loader::before {
  content: 'DVD';
  position: absolute;
  display: block;
  left: 5%;
  bottom: 55%;
  color: green;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 4em;
  font-weight: 900;
  font-style: italic;
  animation: div-color-change 5s infinite;
}

.loader::after {
  content: 'FWDJC';
  position: absolute;
  top: 30%;
  left: 21%;
  color: #212121;
  font-size: .5em;
  font-weight: 800;
  letter-spacing: 10px;
  z-index: 1;
}

@keyframes bounce {
  0% {
    background-color: red;
    transform: translateX(0) translateY(60px);
  }

  25% {
    background-color: blue;
    transform: translateX(60px) translateY(0);
  }

  55% {
    background-color: green;
    transform: translateX(0) translateY(-60px);
  }

  75% {
    background-color: yellow;
    transform: translateX(-60px) translateY(0);
  }

  100% {
    background-color: purple;
    transform: translateX(0) translateY(60px);
  }
}

@keyframes div-color-change {
  0% {
    color: red;
  }

  25% {
    color: blue;
  }

  55% {
    color: green;
  }

  75% {
    color: yellow;
  }

  100% {
    color: purple;
  }
}
</style>


================================================
FILE: loaders/FWDJc_strong-mayfly-8.html
================================================
  <div class="eye-lid">
    <div class="eye">
      <div class="cornea">
        <div class="white-pupil"></div>
      </div>
    </div>
  </div>
<style>
/* From Uiverse.io by FWDJc - Tags: minimalist, loader, css, eye, loading animation, aesthetic, css animation */
.eye-lid {
  background-color: rgb(0, 0, 0);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 9px 0 2px rgba(0, 0, 0, 0.2);
  width: 150px;
  height: 150px;
}

.eye {
  background-color: #fffcf4;
  border-radius: 50%;
  transform: translate3d(0, 0, 0) rotate(90deg);
  width: 120px;
  height: 120px;
  animation: eye 5s infinite;
}

@keyframes eye {
  12%,
  25% {
    width: 100px;
    height: 110px;
  }

  37%, 
  50% {
    width: 60px;
    height: 130px;
  }

  63%, 
  75% {
    width: 100px;
    height: 103px;
  }

  87% {
    width: 100px;
    height: 100px;
  }
}

.cornea {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(0, 0, 0);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: eye-color 5s infinite;
}

@keyframes eye-color {
  63%, 75% {
    background-color: rgb(137, 1, 1);
  }
}

.white-pupil {
  position: absolute;
  top: 70%;
  left: 10%;
  border-radius: 50%;
  background-color: #fffcf4;
  width: 20px;
  height: 20px;
}
</style>


================================================
FILE: loaders/Fadhilmagass_bad-firefox-25.html
================================================
<div class="loader">
  <div class="dot dot-1"></div>
  <div class="dot dot-2"></div>
  <div class="dot dot-3"></div>
  <div class="dot dot-4"></div>
  <div class="dot dot-5"></div>
</div>

<style>
/* From Uiverse.io by Fadhilmagass - Tags: simple, animation, loader */
.loader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  -webkit-animation: dot-pulse2 1.5s ease-in-out infinite;
  animation: dot-pulse2 1.5s ease-in-out infinite;
}

.dot-1 {
  background-color: #4285f4;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.dot-2 {
  background-color: #34a853;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.dot-3 {
  background-color: #fbbc05;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.dot-4 {
  background-color: #ea4335;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.dot-5 {
  background-color: #4285f4;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

@keyframes dot-pulse2 {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0.5;
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0.5;
  }
}

</style>


================================================
FILE: loaders/Fareny_bad-snail-59.html
================================================
<div class="loader">
  <figure class="iconLoaderProgress">
    <svg class="iconLoaderProgressFirst" width="240" height="240">
      <circle cx="120" cy="120" r="100"></circle>
    </svg>

    <svg class="iconLoaderProgressSecond" width="240" height="240">
      <circle cx="120" cy="120" r="100"></circle>
    </svg>
  </figure>
</div>

<style>
/* From Uiverse.io by Fareny  - Tags: simple, purple, loader, like, circle, html, css */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141218;
}

.iconLoaderProgress {
  display: flex;
  align-items: center;
  justify-content: center;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: rotateLoader;
}

.iconLoaderProgress svg {
  stroke-width: 16px;
  fill: none;
  transform-origin: center;
  z-index: 999;
}

.iconLoaderProgressFirst circle,
.iconLoaderProgressSecond circle,
.iconLoaderProgressFirst,
.iconLoaderProgressSecond {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.iconLoaderProgressFirst circle,
.iconLoaderProgressSecond circle {
  animation-duration: 3s;
  border-radius: 15px;
}

.iconLoaderProgressFirst,
.iconLoaderProgressSecond {
  position: absolute;
  animation-duration: 6s;
}

.iconLoaderProgressFirst circle {
  animation-name: circleFirst;
  stroke-dasharray: 628, 628;
  stroke-dashoffset: 0;
  stroke: #7c57f4;
  stroke-linecap: round;
}

.iconLoaderProgressSecond {
  transform: rotate(-14deg);
}

.iconLoaderProgressSecond circle {
  animation-name: circleSecond;
  stroke-dasharray: 628, 628;
  stroke-dashoffset: 0;
  stroke: #bfb2f7;
  stroke-linecap: round;
}

@keyframes circleFirst {
  from,
  to {
    stroke-dashoffset: 50;
  }

  50% {
    stroke-dashoffset: 625;
  }
}

@keyframes circleSecond {
  from,
  to {
    stroke-dashoffset: -625;
  }

  50% {
    stroke-dashoffset: -50;
  }
}

@keyframes rotateLoader {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

</style>
    

================================================
FILE: loaders/Fernando-sv_quiet-zebra-41.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Fernando-sv - Tags: loader */
.loader {
  border: 4px solid rgba(0, 0, 0, .1);
  border-left-color: transparent;
  border-radius: 50%;
}

.loader {
  border: 4px solid rgba(0, 0, 0, .1);
  border-left-color: transparent;
  width: 36px;
  height: 36px;
}

.loader {
  border: 4px solid rgba(0, 0, 0, .1);
  border-left-color: transparent;
  width: 36px;
  height: 36px;
  animation: spin89345 1s linear infinite;
}

@keyframes spin89345 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/Flowelife_slippery-catfish-7.html
================================================
<div class="loader">Loading...</div>
<style>
/* From Uiverse.io by Flowelife - Tags: loader, connect, loop */
@keyframes load-loop {
  0% {
    background-position: 100%;
  }

  40% {
    background-position: 50%;
  }

  50% {
    background-position: 50%;
  }

  90% {
    background-position: 0%;
  }

  100% {
    background-position: 0%;
  }
}

.loader {
  position: relative;
  font-family: sans-serif;
  display: flex;
  height: auto;
  width: auto;
  letter-spacing: 3px;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font-size: 1.45em;
  color: transparent;
  background: linear-gradient(to right,#fff 33.3%,#008cdd 33.3%, #008cdd 66.6%, #fff 66.6%) no-repeat;
  background-size: 300%;
  background-position: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: infinite 1.4s load-loop ease;
}

.loader::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  background: linear-gradient(to right,#008cdd 33.3%, transparent 33.3% , transparent 66.6%, #008cdd 66.6%) no-repeat;
  background-size: 300%;
  background-position: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  animation: infinite 1.4s load-loop ease;
}
</style>


================================================
FILE: loaders/Fujitawa_neat-dodo-98.html
================================================
<div class="loader">
  <div class="blue">
</div></div>
<style>
/* From Uiverse.io by Fujitawa - Tags: loader */
.loader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 1),
    inset 10px 10px 10px rgba(0, 0, 0, 0.1);
}

.loader::before {
  content: "";
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: -10px -10px 15px rgba(255, 255, 255, 1),
    10px 10px 10px rgba(0, 0, 0, 0.1);
}

.blue {
  height: 186px;
  width: 220px;
  position: absolute;
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.blue::before {
  content: "";
  position: absolute;
  height: 30px;
  border-radius: 50%;
  width: 30px;
  background: linear-gradient(45deg, #336dff, #5c89ff);
  box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}
</style>


================================================
FILE: loaders/G27XLEO_spotty-chipmunk-84.html
================================================
<svg
  class="heart"
  viewBox="-5 -5 278 56"
  version="1.1"
  id="svg5"
  xmlns="http://www.w3.org/2000/svg"
>
  <filter>
    <feGaussianBlur stdDeviation="1.6"></feGaussianBlur>
  </filter>
  <g transform="translate(29.1 -127.42)" id="layer1">
    <path
      pathLength="1"
      d="M-28.73 167.2c26.43 9.21 68.46-9.46 85.45-12.03 18.45-2.78 32.82 4.86 28.75 9.83-3.82 4.66-25.77-21.18-14.81-31.5 9.54-8.98 17.64 10.64 16.42 17.06-1.51-6.2 2.95-26.6 14.74-22.11 11.7 4.46-4.33 49.03-15.44 44.08-6.97-3.1 15.44-16.26 26.1-16 23.03.56 55.6 27.51 126.63 3.36"
      id="line"
    ></path>
  </g>
  <g transform="translate(29.1 -127.42)" id="layer2">
    <path
      pathLength="1"
      d="M-28.73 167.2c26.43 9.21 68.46-9.46 85.45-12.03 18.45-2.78 32.82 4.86 28.75 9.83-3.82 4.66-25.77-21.18-14.81-31.5 9.54-8.98 17.64 10.64 16.42 17.06-1.51-6.2 2.95-26.6 14.74-22.11 11.7 4.46-4.33 49.03-15.44 44.08-6.97-3.1 15.44-16.26 26.1-16 23.03.56 55.6 27.51 126.63 3.36"
      id="point"
      filter="url(#blur)"
    ></path>
  </g>
</svg>

<style>
/* From Uiverse.io by G27XLEO  - Tags: loader */
.heart #line {
  fill: none;
  stroke: #e00000;
  stroke-width: 1.5;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-miterlimit: 4;
  stroke-opacity: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 3s linear infinite;
}
.heart #point {
  fill: none;
  stroke: #f00000;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 0.1;
  stroke-opacity: 1;
  stroke-dasharray: 0.0001, 0.9999;
  stroke-dashoffset: 1;
  animation: dash 3s linear infinite;
}
@keyframes dash {
  0% {
    stroke-dashoffset: 1;
  }
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

</style>
    

================================================
FILE: loaders/G4b413l_angry-snail-76.html
================================================
<div class="superballs">
    <div class="superballs__dot"></div>
    <div class="superballs__dot"></div>
</div>
<style>
/* From Uiverse.io by G4b413l - Tags: loader */
.superballs {
  --uib-size: 45px;
  --uib-speed: 1.1s;
  --uib-color: #3b3b23;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--uib-size);
  width: var(--uib-size);
}

.superballs__dot {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.superballs__dot::before {
  content: '';
  height: 30%;
  width: 30%;
  border-radius: 50%;
  background-color: var(--uib-color);
  will-change: transform;
  flex-shrink: 0;
}

.superballs__dot:nth-child(1) {
  transform: rotate(45deg);
}

.superballs__dot:nth-child(1)::before {
  animation: orbit82140 var(--uib-speed) linear calc(var(--uib-speed) * -0.143)
    infinite;
}

.superballs__dot:nth-child(2) {
  transform: rotate(-45deg);
}

.superballs__dot:nth-child(2)::before {
  animation: orbit82140 var(--uib-speed) linear calc(var(--uib-speed) / -2)
    infinite;
}

@keyframes orbit82140 {
  0% {
    transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684);
    opacity: 0.65;
  }

  5% {
    transform: translate(calc(var(--uib-size) * 0.4)) scale(0.684208);
    opacity: 0.58;
  }

  10% {
    transform: translate(calc(var(--uib-size) * 0.3)) scale(0.631576);
    opacity: 0.51;
  }

  15% {
    transform: translate(calc(var(--uib-size) * 0.2)) scale(0.578944);
    opacity: 0.44;
  }

  20% {
    transform: translate(calc(var(--uib-size) * 0.1)) scale(0.526312);
    opacity: 0.37;
  }

  25% {
    transform: translate(0%) scale(0.47368);
    opacity: 0.3;
  }

  30% {
    transform: translate(calc(var(--uib-size) * -0.1)) scale(0.526312);
    opacity: 0.37;
  }

  35% {
    transform: translate(calc(var(--uib-size) * -0.2)) scale(0.578944);
    opacity: 0.44;
  }

  40% {
    transform: translate(calc(var(--uib-size) * -0.3)) scale(0.631576);
    opacity: 0.51;
  }

  45% {
    transform: translate(calc(var(--uib-size) * -0.4)) scale(0.684208);
    opacity: 0.58;
  }

  50% {
    transform: translate(calc(var(--uib-size) * -0.5)) scale(0.73684);
    opacity: 0.65;
  }

  55% {
    transform: translate(calc(var(--uib-size) * -0.4)) scale(0.789472);
    opacity: 0.72;
  }

  60% {
    transform: translate(calc(var(--uib-size) * -0.3)) scale(0.842104);
    opacity: 0.79;
  }

  65% {
    transform: translate(calc(var(--uib-size) * -0.2)) scale(0.894736);
    opacity: 0.86;
  }

  70% {
    transform: translate(calc(var(--uib-size) * -0.1)) scale(0.947368);
    opacity: 0.93;
  }

  75% {
    transform: translate(0%) scale(1);
    opacity: 1;
  }

  80% {
    transform: translate(calc(var(--uib-size) * 0.1)) scale(0.947368);
    opacity: 0.93;
  }

  85% {
    transform: translate(calc(var(--uib-size) * 0.2)) scale(0.894736);
    opacity: 0.86;
  }

  90% {
    transform: translate(calc(var(--uib-size) * 0.3)) scale(0.842104);
    opacity: 0.79;
  }

  95% {
    transform: translate(calc(var(--uib-size) * 0.4)) scale(0.789472);
    opacity: 0.72;
  }

  100% {
    transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684);
    opacity: 0.65;
  }
}

</style>


================================================
FILE: loaders/G4b413l_big-bulldog-8.html
================================================

<div class="chaotic-orbit"></div>
<style>
/* From Uiverse.io by G4b413l - Tags: loader */
.chaotic-orbit {
 --uib-size: 25px;
 --uib-speed: 1.5s;
 --uib-color: black;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 height: var(--uib-size);
 width: var(--uib-size);
 animation: rotate936 calc(var(--uib-speed) * 1.667) infinite linear;
}

.chaotic-orbit::before,
.chaotic-orbit::after {
 content: '';
 position: absolute;
 height: 60%;
 width: 60%;
 border-radius: 50%;
 background-color: var(--uib-color);
 will-change: transform;
 flex-shrink: 0;
}

.chaotic-orbit::before {
 animation: orbit var(--uib-speed) linear infinite;
}

.chaotic-orbit::after {
 animation: orbit var(--uib-speed) linear calc(var(--uib-speed) / -2)
    infinite;
}

@keyframes rotate936 {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}

@keyframes orbit {
 0% {
  transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684);
  opacity: 0.65;
 }

 5% {
  transform: translate(calc(var(--uib-size) * 0.4)) scale(0.684208);
  opacity: 0.58;
 }

 10% {
  transform: translate(calc(var(--uib-size) * 0.3)) scale(0.631576);
  opacity: 0.51;
 }

 15% {
  transform: translate(calc(var(--uib-size) * 0.2)) scale(0.578944);
  opacity: 0.44;
 }

 20% {
  transform: translate(calc(var(--uib-size) * 0.1)) scale(0.526312);
  opacity: 0.37;
 }

 25% {
  transform: translate(0%) scale(0.47368);
  opacity: 0.3;
 }

 30% {
  transform: translate(calc(var(--uib-size) * -0.1)) scale(0.526312);
  opacity: 0.37;
 }

 35% {
  transform: translate(calc(var(--uib-size) * -0.2)) scale(0.578944);
  opacity: 0.44;
 }

 40% {
  transform: translate(calc(var(--uib-size) * -0.3)) scale(0.631576);
  opacity: 0.51;
 }

 45% {
  transform: translate(calc(var(--uib-size) * -0.4)) scale(0.684208);
  opacity: 0.58;
 }

 50% {
  transform: translate(calc(var(--uib-size) * -0.5)) scale(0.73684);
  opacity: 0.65;
 }

 55% {
  transform: translate(calc(var(--uib-size) * -0.4)) scale(0.789472);
  opacity: 0.72;
 }

 60% {
  transform: translate(calc(var(--uib-size) * -0.3)) scale(0.842104);
  opacity: 0.79;
 }

 65% {
  transform: translate(calc(var(--uib-size) * -0.2)) scale(0.894736);
  opacity: 0.86;
 }

 70% {
  transform: translate(calc(var(--uib-size) * -0.1)) scale(0.947368);
  opacity: 0.93;
 }

 75% {
  transform: translate(0%) scale(1);
  opacity: 1;
 }

 80% {
  transform: translate(calc(var(--uib-size) * 0.1)) scale(0.947368);
  opacity: 0.93;
 }

 85% {
  transform: translate(calc(var(--uib-size) * 0.2)) scale(0.894736);
  opacity: 0.86;
 }

 90% {
  transform: translate(calc(var(--uib-size) * 0.3)) scale(0.842104);
  opacity: 0.79;
 }

 95% {
  transform: translate(calc(var(--uib-size) * 0.4)) scale(0.789472);
  opacity: 0.72;
 }

 100% {
  transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684);
  opacity: 0.65;
 }
}


</style>


================================================
FILE: loaders/G4b413l_brave-wasp-99.html
================================================

<div class="line-wobble"></div>
<style>
/* From Uiverse.io by G4b413l - Tags: loader */
.line-wobble {
 --uib-size: 80px;
 --uib-speed: 1.55s;
 --uib-color: black;
 --uib-line-weight: 5px;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 height: var(--uib-line-weight);
 width: var(--uib-size);
 border-radius: calc(var(--uib-line-weight) / 2);
 overflow: hidden;
 transform: translate3d(0, 0, 0);
}

.line-wobble::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 background-color: var(--uib-color);
 opacity: 0.1;
}

.line-wobble::after {
 content: '';
 height: 100%;
 width: 100%;
 border-radius: calc(var(--uib-line-weight) / 2);
 animation: wobble var(--uib-speed) ease-in-out infinite;
 transform: translateX(-90%);
 background-color: var(--uib-color);
}

@keyframes wobble {
 0%,
  100% {
  transform: translateX(-90%);
 }

 50% {
  transform: translateX(90%);
 }
}

</style>


================================================
FILE: loaders/G4b413l_cuddly-turkey-4.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by G4b413l - Tags: loader, after */
.loader {
  position: relative;
  width: 300px;
  height: 3px;
  background: linear-gradient(to right, transparent, #28AE60, transparent);
  overflow: hidden;
}

.loader::after {
  content: '';
  position: absolute;
  translate: -200px 0;
  width: 150px;
  height: 100%;
  background: linear-gradient(to right, transparent, #212121, transparent);
  animation: slide 1s infinite;
}

@keyframes slide {
  100% {
    translate: 300px 0;
  }
}
</style>


================================================
FILE: loaders/G4b413l_heavy-otter-34.html
================================================
<div class="pulsar"></div>
<style>
/* From Uiverse.io by G4b413l - Tags: loader */
.pulsar {
  --uib-size: 40px;
  --uib-speed: 0.9s;
  --uib-color: white;
  position: relative;
  height: var(--uib-size);
  width: var(--uib-size);
}

.pulsar::before,
.pulsar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: var(--uib-color);
  animation: pulse9173412 var(--uib-speed) ease-in-out infinite;
  transform: scale(0);
}

.pulsar::after {
  animation-delay: calc(var(--uib-speed) / -2);
}

@keyframes pulse9173412 {
  0%,
  100% {
    transform: scale(0);
    opacity: 1;
  }

  50% {
    transform: scale(1);
    opacity: 0.25;
  }
}

</style>


================================================
FILE: loaders/G4b413l_hot-crab-48.html
================================================
<div class="loader">
  <div class="scanner">
    <span>Loading...</span>
  </div>
</div>
<style>
/* From Uiverse.io by G4b413l - Tags: animation, loading, loader, smooth */
.scanner span {
  color: transparent;
  font-size: 1.4rem;
  position: relative;
  overflow: hidden;
}

.scanner span::before {
  content: "Loading...";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-right: 4px solid #17FEFF;
  overflow: hidden;
  color: #17FEFF;
  animation: load91371 2s linear infinite;
}

@keyframes load91371 {
  0%, 10%, 100% {
    width: 0;
  }

  10%,20%,30%,40%,50%,60%,70%,80%,90%,100% {
    border-right-color: transparent;
  }

  11%,21%,31%,41%,51%,61%,71%,81%,91% {
    border-right-color: #17FEFF;
  }

  60%, 80% {
    width: 100%;
  }
}
</style>


================================================
FILE: loaders/G4b413l_jolly-kangaroo-36.html
================================================
<div class="newtons-cradle">
<div class="newtons-cradle__dot"></div>
<div class="newtons-cradle__dot"></div>
<div class="newtons-cradle__dot"></div>
<div class="newtons-cradle__dot"></div>
</div>
<style>
/* From Uiverse.io by G4b413l - Tags: loader */
.newtons-cradle {
 --uib-size: 50px;
 --uib-speed: 1.2s;
 --uib-color: #474554;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: var(--uib-size);
 height: var(--uib-size);
}

.newtons-cradle__dot {
 position: relative;
 display: flex;
 align-items: center;
 height: 100%;
 width: 25%;
 transform-origin: center top;
}

.newtons-cradle__dot::after {
 content: '';
 display: block;
 width: 100%;
 height: 25%;
 border-radius: 50%;
 background-color: var(--uib-color);
}

.newtons-cradle__dot:first-child {
 animation: swing var(--uib-speed) linear infinite;
}

.newtons-cradle__dot:last-child {
 animation: swing2 var(--uib-speed) linear infinite;
}

@keyframes swing {
 0% {
  transform: rotate(0deg);
  animation-timing-function: ease-out;
 }

 25% {
  transform: rotate(70deg);
  animation-timing-function: ease-in;
 }

 50% {
  transform: rotate(0deg);
  animation-timing-function: linear;
 }
}

@keyframes swing2 {
 0% {
  transform: rotate(0deg);
  animation-timing-function: linear;
 }

 50% {
  transform: rotate(0deg);
  animation-timing-function: ease-out;
 }

 75% {
  transform: rotate(-70deg);
  animation-timing-function: ease-in;
 }
}

</style>


================================================
FILE: loaders/G4b413l_kind-cougar-54.html
================================================
<div class="jelly"></div>
<svg width="0" height="0" class="jelly-maker">
  <defs>
    <filter id="uib-jelly-ooze">
      <feGaussianBlur in="SourceGraphic" stdDeviation="6.25" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="ooze"></feColorMatrix>
      <feBlend in="SourceGraphic" in2="ooze"></feBlend>
    </filter>
  </defs>
</svg>
<style>
/* From Uiverse.io by G4b413l - Tags: loader */
.jelly {
 --uib-size: 40px;
 --uib-speed: .8s;
 --uib-color: #2c2b2b;
 position: relative;
 height: calc(var(--uib-size) / 2);
 width: var(--uib-size);
 filter: url('#uib-jelly-ooze');
 animation: rotate72317 calc(var(--uib-speed) * 2) linear infinite;
}

.jelly::before,
.jelly::after {
 content: '';
 position: absolute;
 top: 0%;
 left: 25%;
 width: 50%;
 height: 100%;
 background: var(--uib-color);
 border-radius: 100%;
}

.jelly::before {
 animation: shift-left var(--uib-speed) ease infinite;
}

.jelly::after {
 animation: shift-right var(--uib-speed) ease infinite;
}

.jelly-maker {
 width: 0;
 height: 0;
 position: absolute;
}

@keyframes rotate72317 {
 0%,
  49.999%,
  100% {
  transform: none;
 }

 50%,
  99.999% {
  transform: rotate(90deg);
 }
}

@keyframes shift-left {
 0%,
  100% {
  transform: translateX(0%);
 }

 50% {
  transform: scale(0.65) translateX(-75%);
 }
}

@keyframes shift-right {
 0%,
  100% {
  transform: translateX(0%);
 }

 50% {
  transform: scale(0.65) translateX(75%);
 }
}

</style>


================================================
FILE: loaders/G4b413l_light-bobcat-34.html
================================================

<div class="momentum"></div>
<style>
/* From Uiverse.io by G4b413l - Tags: loader */
.momentum {
 --uib-size: 40px;
 --uib-speed: 1s;
 --uib-color: rgb(221, 255, 242);
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 height: var(--uib-size);
 width: var(--uib-size);
 animation: rotate01561 var(--uib-speed) linear infinite;
}

.momentum::before,
.momentum::after {
 content: '';
 height: 25%;
 width: 25%;
 border-radius: 50%;
 background-color: var(--uib-color);
}

.momentum::before {
 animation: wobble290123 calc(var(--uib-speed) * 1.25) ease-in-out infinite;
}

.momentum::after {
 animation: wobble9123 calc(var(--uib-speed) * 1.25) ease-in-out infinite;
}

.momentum::before {
 margin-right: 10%;
}

@keyframes wobble9123 {
 0%,
  100% {
  transform: translateX(0);
 }

 50% {
  transform: translateX(calc(var(--uib-size) * 0.2)) scale(1.1);
 }
}

@keyframes wobble290123 {
 0%,
  100% {
  transform: translateX(0);
 }

 50% {
  transform: translateX(calc(var(--uib-size) * -0.2)) scale(1.1);
 }
}

@keyframes rotate01561 {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}

</style>


================================================
FILE: loaders/G4b413l_lovely-kangaroo-88.html
================================================
<div class="jelly-triangle">
<div class="jelly-triangle__dot"></div>
<div class="jelly-triangle__traveler"></div>
</div>
<svg width="0" height="0" class="jelly-maker">
  <defs>
    <filter id="uib-jelly-triangle-ooze">
      <feGaussianBlur in="SourceGraphic" stdDeviation="7.3" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="ooze"></feColorMatrix>
      <feBlend in="SourceGraphic" in2="ooze"></feBlend>
    </filter>
  </defs>
</svg>
<style>
/* From Uiverse.io by G4b413l - Tags: loader */
.jelly-triangle {
 --uib-size: 42px;
 --uib-speed: 1.25s;
 --uib-color: #512727;
 position: relative;
 height: var(--uib-size);
 width: var(--uib-size);
 filter: url('#uib-jelly-triangle-ooze');
}

.jelly-triangle__dot,
.jelly-triangle::before,
.jelly-triangle::after {
 content: '';
 position: absolute;
 width: 33%;
 height: 33%;
 background: var(--uib-color);
 border-radius: 100%;
}

.jelly-triangle__dot {
 top: 6%;
 left: 30%;
 animation: grow0 var(--uib-speed) ease infinite;
}

.jelly-triangle::before {
 bottom: 6%;
 right: 0;
 animation: grow0 var(--uib-speed) ease calc(var(--uib-speed) * -0.666)
    infinite;
}

.jelly-triangle::after {
 bottom: 6%;
 left: 0;
 animation: grow0 var(--uib-speed) ease calc(var(--uib-speed) * -0.333)
    infinite;
}

.jelly-triangle__traveler {
 position: absolute;
 top: 6%;
 left: 30%;
 width: 33%;
 height: 33%;
 background: var(--uib-color);
 border-radius: 100%;
 animation: triangulate var(--uib-speed) ease infinite;
}

.jelly-maker {
 width: 0;
 height: 0;
 position: absolute;
}

@keyframes triangulate {
 0%,
  100% {
  transform: none;
 }

 33.333% {
  transform: translate(120%, 175%);
 }

 66.666% {
  transform: translate(-95%, 175%);
 }
}

@keyframes grow0 {
 0%,
  100% {
  transform: scale(1.5);
 }

 20%,
  70% {
  transform: none;
 }
}
</style>


================================================
FILE: loaders/G4b413l_massive-vampirebat-17.html
================================================
<div class="bar">
    <div class="ball"></div>
</div>
<style>
/* From Uiverse.io by G4b413l - Tags: loader, ball */
.ball {
  position: relative;
  bottom: 50px;
  left: calc(100% - 20px);
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  animation: ball-move8234 3s ease-in-out 1s infinite alternate;
}

.ball::after {
  position: absolute;
  content: '';
  top: 25px;
  right: 5px;
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 50%;
}

.bar {
  width: 200px;
  height: 12.5px;
  background: #FFDAAF;
  border-radius: 30px;
  transform: rotate(-15deg);
  animation: up-down6123 3s ease-in-out 1s infinite alternate;
}

@keyframes up-down6123 {
  from {
    transform: rotate(-15deg);
  }

  to {
    transform: rotate(15deg);
  }
}

@keyframes ball-move8234 {
  from {
    left: calc(100% - 40px);
    transform: rotate(360deg);
  }

  to {
    left: calc(0% - 20px);
    transform: rotate(0deg);
  }
}
</style>


================================================
FILE: loaders/G4b413l_nasty-yak-65.html
================================================
<div class="spinner"></div>
<style>
/* From Uiverse.io by G4b413l - Tags: loader */
.spinner {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.spinner::before,
.spinner::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

.spinner::before {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, #ff00cc 0%, #212121 50%);
  animation: spin .5s infinite linear;
}

.spinner::after {
  width: 85%;
  height: 85%;
  background-color: #212121;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/G4b413l_pretty-crab-95.html
================================================
<div class="leap-frog">
<div class="leap-frog__dot"></div>
<div class="leap-frog__dot"></div>
<div class="leap-frog__dot"></div>
</div>
<style>
/* From Uiverse.io by G4b413l - Tags: loader */
.leap-frog {
 --uib-size: 40px;
 --uib-speed: 2s;
 --uib-color: rgb(37, 37, 149);
 position: relative;
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: var(--uib-size);
 height: var(--uib-size);
}

.leap-frog__dot {
 position: absolute;
 top: 0;
 left: 0;
 display: flex;
 align-items: center;
 justify-content: flex-start;
 width: 100%;
 height: 100%;
}

.leap-frog__dot::before {
 content: '';
 display: block;
 height: calc(var(--uib-size) * 0.22);
 width: calc(var(--uib-size) * 0.22);
 border-radius: 50%;
 background-color: var(--uib-color);
 will-change: transform;
}

.leap-frog__dot:nth-child(1) {
 animation: leapFrog var(--uib-speed) ease infinite;
}

.leap-frog__dot:nth-child(2) {
 transform: translateX(calc(var(--uib-size) * 0.4));
 animation: leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -1.5)
    infinite;
}

.leap-frog__dot:nth-child(3) {
 transform: translateX(calc(var(--uib-size) * 0.8)) rotate(0deg);
 animation: leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -3)
    infinite;
}

@keyframes leapFrog {
 0% {
  transform: translateX(0) rotate(0deg);
 }

 33.333% {
  transform: translateX(0) rotate(180deg);
 }

 66.666% {
  transform: translateX(calc(var(--uib-size) * -0.4)) rotate(180deg);
 }

 99.999% {
  transform: translateX(calc(var(--uib-size) * -0.8)) rotate(180deg);
 }

 100% {
  transform: translateX(0) rotate(0deg);
 }
}

</style>


================================================
FILE: loaders/G4b413l_slimy-otter-89.html
================================================

<div class="ping"></div>
<style>
/* From Uiverse.io by G4b413l - Tags: loader */
.ping {
 --uib-size: 50px;
 --uib-speed: 1s;
 --uib-color: #3950cf;
 position: relative;
 height: var(--uib-size);
 width: var(--uib-size);
}

.ping::before,
.ping::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 border-radius: 50%;
 background-color: var(--uib-color);
 animation: pulse7132 var(--uib-speed) linear infinite;
 transform: scale(0);
 opacity: 0;
}

.ping::after {
 animation-delay: calc(var(--uib-speed) / -2);
}

@keyframes pulse7132 {
 0% {
  transform: scale(0);
  opacity: 1;
 }

 100% {
  transform: scale(1);
  opacity: 0;
 }
}

</style>


================================================
FILE: loaders/G4b413l_soft-jellyfish-12.html
================================================
<div class="pinwheel">
    <div class="pinwheel__line"></div>
    <div class="pinwheel__line"></div>
    <div class="pinwheel__line"></div>
    <div class="pinwheel__line"></div>
    <div class="pinwheel__line"></div>
    <div class="pinwheel__line"></div>
</div>
<style>
/* From Uiverse.io by G4b413l - Tags: loader */
.pinwheel {
  --uib-size: 45px;
  --uib-speed: 0.8s;
  --uib-color: #312f2b;
  --uib-line-weight: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--uib-size);
  width: var(--uib-size);
}

.pinwheel__line {
  position: absolute;
  top: calc(50% - var(--uib-line-weight) / 2);
  left: 0;
  height: var(--uib-line-weight);
  width: 100%;
  border-radius: calc(var(--uib-line-weight) / 2);
  background-color: var(--uib-color);
  animation: rotate81232 var(--uib-speed) ease-in-out infinite;
}

.pinwheel__line:nth-child(2) {
  animation-delay: calc(var(--uib-speed) * 0.075);
  opacity: 0.8;
}

.pinwheel__line:nth-child(3) {
  animation-delay: calc(var(--uib-speed) * 0.15);
  opacity: 0.6;
}

.pinwheel__line:nth-child(4) {
  animation-delay: calc(var(--uib-speed) * 0.225);
  opacity: 0.4;
}

.pinwheel__line:nth-child(5) {
  animation-delay: calc(var(--uib-speed) * 0.3);
  opacity: 0.2;
}

.pinwheel__line:nth-child(6) {
  animation-delay: calc(var(--uib-speed) * 0.375);
  opacity: 0.1;
}

@keyframes rotate81232 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

</style>


================================================
FILE: loaders/G4b413l_tidy-walrus-92.html
================================================
<div class="three-body">
<div class="three-body__dot"></div>
<div class="three-body__dot"></div>
<div class="three-body__dot"></div>
</div>
<style>
/* From Uiverse.io by G4b413l - Tags: loader */
.three-body {
 --uib-size: 35px;
 --uib-speed: 0.8s;
 --uib-color: #5D3FD3;
 position: relative;
 display: inline-block;
 height: var(--uib-size);
 width: var(--uib-size);
 animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
}

.three-body__dot {
 position: absolute;
 height: 100%;
 width: 30%;
}

.three-body__dot:after {
 content: '';
 position: absolute;
 height: 0%;
 width: 100%;
 padding-bottom: 100%;
 background-color: var(--uib-color);
 border-radius: 50%;
}

.three-body__dot:nth-child(1) {
 bottom: 5%;
 left: 0;
 transform: rotate(60deg);
 transform-origin: 50% 85%;
}

.three-body__dot:nth-child(1)::after {
 bottom: 0;
 left: 0;
 animation: wobble1 var(--uib-speed) infinite ease-in-out;
 animation-delay: calc(var(--uib-speed) * -0.3);
}

.three-body__dot:nth-child(2) {
 bottom: 5%;
 right: 0;
 transform: rotate(-60deg);
 transform-origin: 50% 85%;
}

.three-body__dot:nth-child(2)::after {
 bottom: 0;
 left: 0;
 animation: wobble1 var(--uib-speed) infinite
    calc(var(--uib-speed) * -0.15) ease-in-out;
}

.three-body__dot:nth-child(3) {
 bottom: -5%;
 left: 0;
 transform: translateX(116.666%);
}

.three-body__dot:nth-child(3)::after {
 top: 0;
 left: 0;
 animation: wobble2 var(--uib-speed) infinite ease-in-out;
}

@keyframes spin78236 {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}

@keyframes wobble1 {
 0%,
  100% {
  transform: translateY(0%) scale(1);
  opacity: 1;
 }

 50% {
  transform: translateY(-66%) scale(0.65);
  opacity: 0.8;
 }
}

@keyframes wobble2 {
 0%,
  100% {
  transform: translateY(0%) scale(1);
  opacity: 1;
 }

 50% {
  transform: translateY(66%) scale(0.65);
  opacity: 0.8;
 }
}

</style>


================================================
FILE: loaders/G4b413l_unlucky-stingray-83.html
================================================
<div class="dot-wave">
    <div class="dot-wave__dot"></div>
    <div class="dot-wave__dot"></div>
    <div class="dot-wave__dot"></div>
    <div class="dot-wave__dot"></div>
</div>
<style>
/* From Uiverse.io by G4b413l - Tags: loader */
.dot-wave {
  --uib-size: 50px;
  --uib-speed: 0.6s;
  --uib-color: #0d0909;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: var(--uib-size);
  height: calc(var(--uib-size) * 0.17);
  padding-top: calc(var(--uib-size) * 0.34);
}

.dot-wave__dot {
  flex-shrink: 0;
  width: calc(var(--uib-size) * 0.17);
  height: calc(var(--uib-size) * 0.17);
  border-radius: 50%;
  background-color: var(--uib-color);
  will-change: transform;
}

.dot-wave__dot:nth-child(1) {
  animation: jump824 var(--uib-speed) ease-in-out
    calc(var(--uib-speed) * -0.45) infinite;
}

.dot-wave__dot:nth-child(2) {
  animation: jump824 var(--uib-speed) ease-in-out
    calc(var(--uib-speed) * -0.3) infinite;
}

.dot-wave__dot:nth-child(3) {
  animation: jump824 var(--uib-speed) ease-in-out
    calc(var(--uib-speed) * -0.15) infinite;
}

.dot-wave__dot:nth-child(4) {
  animation: jump824 var(--uib-speed) ease-in-out infinite;
}

@keyframes jump824 {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-200%);
  }
}

</style>


================================================
FILE: loaders/Galahhad_cold-yak-10.html
================================================
<div class="ui-abstergo">
  <div class="abstergo-loader">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="ui-text">
    Synchronization
    <div class="ui-dot"></div>
    <div class="ui-dot"></div>
    <div class="ui-dot"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Galahhad - Tags: loader, assassin */
.ui-abstergo {
  --primary: #fff;
  --secondary: rgba(255, 255, 255, 0.3);
  --shadow-blur: 3px;
  --text-shadow-blur: 3px;
  --animation-duration: 2s;
  --size: 1;
}

.abstergo-loader * {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.ui-abstergo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  row-gap: 30px;
  scale: var(--size);
}

.ui-abstergo .ui-text {
  color: var(--primary);
  text-shadow: 0 0 var(--text-shadow-blur) var(--secondary);
  font-family: Menlo, sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-column-gap: 3px;
  -moz-column-gap: 3px;
  column-gap: 3px;
}

.ui-abstergo .ui-dot {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  -webkit-animation: dots var(--animation-duration) infinite linear;
  animation: dots var(--animation-duration) infinite linear;
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
  background-color: var(--primary);
}

.ui-abstergo .ui-dot:nth-child(2) {
  -webkit-animation-delay: .8s;
  animation-delay: .8s;
}

.ui-abstergo .ui-dot:nth-child(3) {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.ui-abstergo .ui-dot+.ui-dot {
  margin-left: 3px;
}

.abstergo-loader {
  width: 103px;
  height: 90px;
  position: relative;
}

.abstergo-loader div {
  width: 50px;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  border-top: 21px solid var(--primary);
  position: absolute;
  -webkit-filter: drop-shadow(0 0 var(--shadow-blur) var(--secondary));
  filter: drop-shadow(0 0 var(--shadow-blur) var(--secondary));
}

.abstergo-loader div:nth-child(1) {
  top: 27px;
  left: 7px;
  rotate: -60deg;
  -webkit-animation: line1 var(--animation-duration) linear infinite alternate;
  animation: line1 var(--animation-duration) linear infinite alternate;
}

.abstergo-loader div:nth-child(2) {
  bottom: 2px;
  left: 0;
  rotate: 180deg;
  -webkit-animation: line2 var(--animation-duration) linear infinite alternate;
  animation: line2 var(--animation-duration) linear infinite alternate;
}

.abstergo-loader div:nth-child(3) {
  bottom: 16px;
  right: -9px;
  rotate: 60deg;
  -webkit-animation: line3 var(--animation-duration) linear infinite alternate;
  animation: line3 var(--animation-duration) linear infinite alternate;
}

.abstergo-loader:hover div:nth-child(1) {
  top: 21px;
  left: 14px;
  rotate: 60deg;
}

.abstergo-loader:hover div:nth-child(2) {
  bottom: 5px;
  left: -8px;
  rotate: 300deg;
}

.abstergo-loader:hover div:nth-child(3) {
  bottom: 7px;
  right: -11px;
  rotate: 180deg;
}

@-webkit-keyframes line1 {
  0%,
  40% {
    top: 27px;
    left: 7px;
    rotate: -60deg;
  }

  60%,
  100% {
    top: 22px;
    left: 14px;
    rotate: 60deg;
  }
}

@keyframes line1 {
  0%,
  40% {
    top: 27px;
    left: 7px;
    rotate: -60deg;
  }

  60%,
  100% {
    top: 22px;
    left: 14px;
    rotate: 60deg;
  }
}

@-webkit-keyframes line2 {
  0%,
  40% {
    bottom: 2px;
    left: 0;
    rotate: 180deg;
  }

  60%,
  100% {
    bottom: 5px;
    left: -8px;
    rotate: 300deg;
  }
}

@keyframes line2 {
  0%,
  40% {
    bottom: 2px;
    left: 0;
    rotate: 180deg;
  }

  60%,
  100% {
    bottom: 5px;
    left: -8px;
    rotate: 300deg;
  }
}

@-webkit-keyframes line3 {
  0%,
  40% {
    bottom: 16px;
    right: -9px;
    rotate: 60deg;
  }

  60%,
  100% {
    bottom: 7px;
    right: -11px;
    rotate: 180deg;
  }
}

@keyframes line3 {
  0%,
  40% {
    bottom: 16px;
    right: -9px;
    rotate: 60deg;
  }

  60%,
  100% {
    bottom: 7px;
    right: -11px;
    rotate: 180deg;
  }
}

@-webkit-keyframes dots {
  0% {
    background-color: var(--secondary);
  }

  30% {
    background-color: var(--primary);
  }

  70%, 100% {
    background-color: var(--secondary);
  }
}

@keyframes dots {
  0% {
    background-color: var(--secondary);
  }

  30% {
    background-color: var(--primary);
  }

  70%, 100% {
    background-color: var(--secondary);
  }
}
</style>


================================================
FILE: loaders/Gautammsharma_polite-bat-25.html
================================================
<div class="loader-container">
  <div class="loader"></div>
</div>

<style>
/* From Uiverse.io by Gautammsharma - Tags: loader */
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20em;
}

.loader {
  position: relative;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-color: rgb(208, 208, 208);
  box-shadow: 0 0em 4em rgba(23, 190, 250, 0.5);
  animation: loader-rotate 1s linear infinite;
}

.loader::before,
.loader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1em solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.loader::before {
  animation: loader-pulse 1s ease-out infinite;
}

.loader::after {
  animation: loader-pulse 1s ease-out infinite 0.5s;
}

@keyframes loader-rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

</style>


================================================
FILE: loaders/Gianluks90_smart-otter-24.html
================================================
<div class="loader">
  <div class="red bar"></div>
  <div class="orange bar"></div>
  <div class="yellow bar"></div>
  <div class="green bar"></div>
  <div class="blue bar"></div>
  <div class="violet bar"></div>
</div>
<style>
/* From Uiverse.io by Gianluks90 - Tags: loader, rainbow */
.loader {
  height: 50px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.bar {
  height: 5px;
  width: 12px;
  animation-duration: 0.45s;
  animation-name: changeHeight;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.red {
  background-color: #E50000;
  box-shadow: 1px 1px 10px #E50000;
  animation-delay: 0.10s;
}

.orange {
  background-color: #FF8D00;
  box-shadow: 1px 1px 10px #FF8D00;
  animation-delay: 0.20s;
}

.yellow {
  background-color: #FFEE00;
  box-shadow: 1px 1px 10px #FFEE00;
  animation-delay: 0.25s;
}

.green {
  background-color: #008121;
  box-shadow: 1px 1px 10px #008121;
  animation-delay: 0.30s;
}

.blue {
  background-color: #004CFF;
  box-shadow: 1px 1px 10px #004CFF;
  animation-delay: 0.35s;
}

.violet {
  background-color: #760188;
  box-shadow: 1px 1px 10px #760188;
  animation-delay: 0.40s;
}

@keyframes changeHeight {
  from {
    height: 5px;
  }

  to {
    height: 40px;
  }
}
</style>


================================================
FILE: loaders/Hashir-Ahmed123_spotty-mouse-64.html
================================================
<div class="lava-lamp">
  <div class="bubble"></div>
  <div class="bubble1"></div>
  <div class="bubble2"></div>
  <div class="bubble3"></div>
</div>

<style>
/* From Uiverse.io by Hashir-Ahmed123  - Tags: animation, red, green, blue, purple, pink, gradient, smooth */
@keyframes drop {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(80px);
  }
  100% {
    transform: translateY(0px);
  }
}

.lava-lamp {
  position: relative;
  width: 50px;
  height: 100px;
  background: #000;
  border-radius: 25px;
  overflow: hidden;
}

.bubble {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(to bottom, #e64980, #ff8787);
  border-radius: 50%;
  left: 15px;
  animation: drop 5s ease-in-out infinite;
}
.bubble1 {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(to bottom, #82c91e, #3bc9db);
  border-radius: 50%;
  left: 1px;
  animation: drop 3s ease-in-out infinite;
}
.bubble2 {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(to bottom, #7950f2, #f783ac);
  border-radius: 50%;
  left: 30px;
  animation: drop 4s ease-in-out infinite;
}
.bubble3 {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(to bottom, #4481eb, #04befe);
  border-radius: 50%;
  left: 20px;
  animation: drop 6s ease-in-out infinite;
}

</style>
    

================================================
FILE: loaders/HyuOniichan_proud-rat-96.html
================================================
<div class="eye">
    <div class="up"></div>
    <div class="mid"></div> 
    <div class="down"></div> 
</div>
<style>
/* From Uiverse.io by HyuOniichan - Tags: loader */
.eye {
  width: 100px;
  height: 60px;
  position: relative;
  z-index: 1;
}

.up {
  position: absolute;
  top: 0px;
  height: 100px;
  width: 100px;
  border-width: 2px;
  border-style: solid;
  border-color: black transparent transparent transparent;
  border-radius: 50%;
  z-index: 1;
}

.down {
  position: absolute;
  top: -70px;
  height: 100px;
  width: 100px;
  border-width: 2px;
  border-style: solid;
  border-color: transparent transparent black transparent;
  border-radius: 50%;
  z-index: 1;
}

.mid {
  position: absolute;
  top: 1px;
  left: 39px;
  width: 27px;
  height: 27px;
  border: none;
  border-radius: 50%;
  background-color: black;
  z-index: 0;
  animation: eyemove 4s infinite;
}

@keyframes eyemove {
  0% {
    left: 30px;
    background-color: rgb(164, 213, 230);
  }

  50% {
    left: 43px;
    background-color: rgb(45, 187, 235);
  }

  100% {
    left: 30px;
    background-color: rgb(164, 213, 230);
  }
}


</style>


================================================
FILE: loaders/Iliasman2_tender-bulldog-74.html
================================================
<div class="lamp">
  <div class="glass">
    <div class="lava">
      <div class="blob"></div>
      <div class="blob"></div>
      <div class="blob"></div>
      <div class="blob top"></div>
      <div class="blob bottom"></div>
    </div>
  </div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo"></feColorMatrix>
      <feBlend in="SourceGraphic" in2="goo"></feBlend>
    </filter>
  </defs>
</svg>
<style>
/* From Uiverse.io by Iliasman2 - Tags: loader */
.lamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 30em;
  min-height: 300px;
  width: 13em;
  min-width: calc(300px * 3 / 7);
  background: #2b4353;
  clip-path: polygon(33% 0, 0 70%, 22% 88%, 0 100%, 100% 100%, 78% 88%, 100% 70%, 67% 0);
}

.glass {
  background: #b6e1e0;
  width: 100%;
  height: 60%;
  position: absolute;
  bottom: 30%;
  overflow: hidden;
}

.lava {
  filter: url("#goo");
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.blob {
  border-radius: 50%;
  background: #e8630a;
  position: absolute;
}

.blob.top {
  width: 100%;
  height: 4%;
  top: -3.7%;
  left: 0;
}

.blob.bottom {
  width: 100%;
  height: 4%;
  bottom: -3%;
  left: 0;
}

.blob:nth-child(1) {
  width: calc(15% * 1.4);
  height: 15%;
  left: 45%;
  bottom: -15%;
  animation: blob-one_2 ease-in-out 7s infinite;
}

.blob:nth-child(2) {
  width: calc(22% * 1.4);
  height: 22%;
  right: 14%;
  bottom: -15%;
  animation: blob-two_2 ease-in-out 11s infinite;
}

.blob:nth-child(3) {
  width: calc(32% * 1.4);
  height: 32%;
  bottom: -15%;
  left: 14%;
  animation: blob-three_2 ease-in-out 16s infinite;
}

@keyframes blob-one_2 {
  0%, 100% {
    transform: translatey(0);
  }

  50% {
    transform: translatey(-700%);
  }
}

@keyframes blob-two_2 {
  0%, 100% {
    transform: translatey(0);
  }

  50% {
    transform: translatey(-420%);
  }
}

@keyframes blob-three_2 {
  0%, 100% {
    transform: translatey(0);
  }

  50% {
    transform: translatey(-305%);
  }
}
</style>


================================================
FILE: loaders/IsaiahAltDelete_witty-deer-53.html
================================================
<div class="space-loader">
  <div id="stars" class="stars"></div>
  <div class="orbit"></div>
  <div class="ring"></div>
  <div class="planet"></div>
  <div class="satellite"></div>
</div>

<style>
/* From Uiverse.io by IsaiahAltDelete  - Tags: loader */
.space-loader {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #000;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

.planet {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 30% 30%, #fff, #888);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.ring {
  width: 120px;
  height: 120px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(75deg) rotateY(15deg);
  animation: rotate 12s linear infinite;
}

.orbit {
  width: 160px;
  height: 160px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.satellite {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: orbit 8s linear infinite;
}

.stars {
  width: 100%;
  height: 100%;
  position: absolute;
  animation: twinkle 4s ease-in-out infinite;
}

.star {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotateX(75deg) rotateY(15deg) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(75deg) rotateY(15deg)
      rotate(360deg);
  }
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(80px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(80px) rotate(-360deg);
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}

</style>
    

================================================
FILE: loaders/Itskrish01_modern-moth-47.html
================================================
<div class="loader">
  <div class="pattern-1">
    <div class="pattern-1-shade"></div>
  </div>
  <div class="pattern-2"></div>
</div>

<style>
/* From Uiverse.io by Itskrish01  - Tags: loader */
.loader {
  position: relative;
  width: 200px;
  height: 200px;
}

.loader .pattern-1 {
  position: absolute;
  background-color: #ff4c5a;
  width: 200px;
  height: 200px;
  clip-path: polygon(0 10%, 70% 90%, 40% 90%, 0 45%);
}

.loader .pattern-2 {
  position: absolute;
  background-color: #ff4c5a;
  width: 220px;
  height: 190px;
  clip-path: polygon(100% 10%, 100% 45%, 83% 65%, 55% 65%);
}

.loader .pattern-1 .pattern-1-shade {
  position: absolute;
  transform: translateX(-20px);
  opacity: 0.7;
  z-index: 10;
  background-color: white;
  width: 20px;
  height: 200px;
  animation: shiny 1s infinite;
}

@keyframes shiny {
  0% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(140px);
  }
}

</style>
    

================================================
FILE: loaders/Javierrocadev_hard-horse-30.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: blue, loader, bounce animation, tailwind -->
<div class="flex flex-row gap-2">
  <div class="w-4 h-4 rounded-full bg-blue-700 animate-bounce [animation-delay:.7s]"></div>
  <div class="w-4 h-4 rounded-full bg-blue-700 animate-bounce [animation-delay:.3s]"></div>
  <div class="w-4 h-4 rounded-full bg-blue-700 animate-bounce [animation-delay:.7s]"></div>
</div>



================================================
FILE: loaders/Javierrocadev_new-sloth-45.html
================================================
<!-- From Uiverse.io by Javierrocadev - Tags: blue, loader, rounded, bounce animation, tailwind -->
<div class="flex flex-row gap-2">
  <div class="w-4 h-4 rounded-full bg-blue-700 animate-bounce"></div>
  <div class="w-4 h-4 rounded-full bg-blue-700 animate-bounce [animation-delay:-.3s]"></div>
  <div class="w-4 h-4 rounded-full bg-blue-700 animate-bounce [animation-delay:-.5s]"></div>
</div>



================================================
FILE: loaders/JaydipPrajapati1910_bright-fox-47.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: red, loader, location  */
.loader {
  width: 44.8px;
  height: 44.8px;
  position: relative;
  transform: rotate(45deg);
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 0 50%;
  background: #0000;
  background-image: radial-gradient(circle 11.2px at 50% 50%,#0000 94%, #ff4747);
}

.loader:after {
  animation: pulse-ytk0dhmd 1s infinite;
  transform: perspective(336px) translateZ(0px);
}

@keyframes pulse-ytk0dhmd {
  to {
    transform: perspective(336px) translateZ(168px);
    opacity: 0;
  }
}
  

</style>


================================================
FILE: loaders/JaydipPrajapati1910_curly-monkey-15.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: animation, loader, infinite */
.loader {
  width: calc(160px / 0.707);
  height: 28px;
  background: repeating-linear-gradient(-45deg, #766DF4 0 30px,#0000 0 40px) left/200% 100%;
  animation: i3 2s infinite linear;
  border-radius: 10px;
  border: 1px solid #766DF4;
}

@keyframes i3 {
  100% {
    background-position: right
  }
}
  

</style>


================================================
FILE: loaders/JaydipPrajapati1910_good-starfish-60.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: red, loading, loader */
.loader {
  box-sizing: border-box;
  display: inline-block;
  width: 50px;
  height: 80px;
  border-top: 5px solid #fff;
  border-bottom: 5px solid #fff;
  position: relative;
  background: linear-gradient(#FF3D00 30px, transparent 0) no-repeat;
  background-size: 2px 40px;
  background-position: 50% 0px;
  animation: spinx 5s linear infinite;
}

.loader:before, .loader:after {
  content: "";
  width: 40px;
  left: 50%;
  height: 35px;
  position: absolute;
  top: 0;
  transform: translatex(-50%);
  background: rgba(255, 255, 255, 0.4);
  border-radius: 0 0 20px 20px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: 0 0px;
  animation: lqt 5s linear infinite;
}

.loader:after {
  top: auto;
  bottom: 0;
  border-radius: 20px 20px 0 0;
  animation: lqb 5s linear infinite;
}

@keyframes lqt {
  0%, 100% {
    background-image: linear-gradient(#FF3D00 40px, transparent 0);
    background-position: 0% 0px;
  }

  50% {
    background-image: linear-gradient(#FF3D00 40px, transparent 0);
    background-position: 0% 40px;
  }

  50.1% {
    background-image: linear-gradient(#FF3D00 40px, transparent 0);
    background-position: 0% -40px;
  }
}

@keyframes lqb {
  0% {
    background-image: linear-gradient(#FF3D00 40px, transparent 0);
    background-position: 0 40px;
  }

  100% {
    background-image: linear-gradient(#FF3D00 40px, transparent 0);
    background-position: 0 -40px;
  }
}

@keyframes spinx {
  0%, 49% {
    transform: rotate(0deg);
    background-position: 50% 36px;
  }

  51%, 98% {
    transform: rotate(180deg);
    background-position: 50% 4px;
  }

  100% {
    transform: rotate(360deg);
    background-position: 50% 36px;
  }
}
    
  

</style>


================================================
FILE: loaders/JaydipPrajapati1910_heavy-crab-98.html
================================================
<div class="loader">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: loader, circle, gold, golden effect  */
.loader {
  height: 30px;
  display: inline-block;
}

.loader > div {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  box-shadow: 0 0 10px orange;
  background: #FFECBA;
  float: left;
  margin: 5px;
  transform: scale(2);
}

.loader > div:nth-child(1) {
  animation: anm-BL-53-move1 1s infinite linear;
}

.loader > div:nth-child(2) {
  animation: anm-BL-53-move2 1s infinite linear;
  animation-delay: 0.2s;
}

.loader > div:nth-child(3) {
  animation: anm-BL-53-move3 1s infinite linear;
  animation-delay: 0.3s;
}

.loader > div:nth-child(4) {
  animation: anm-BL-53-move4 1s infinite linear;
  animation-delay: 0.4s;
}

.loader > div:nth-child(5) {
  animation: anm-BL-53-move5 1s infinite linear;
  animation-delay: 0.5s;
}

@keyframes anm-BL-53-move1 {
  50% {
    background: #FFBB00;
    transform: scale(1);
  }
}

@keyframes anm-BL-53-move2 {
  50% {
    background: #FFBB00;
    transform: scale(1);
  }
}

@keyframes anm-BL-53-move3 {
  50% {
    background: #FFBB00;
    transform: scale(1);
  }
}

@keyframes anm-BL-53-move4 {
  50% {
    background: #FFBB00;
    transform: scale(1);
  }
}

@keyframes anm-BL-53-move5 {
  50% {
    background: #FFBB00;
    transform: scale(1);
  }
}
  

</style>


================================================
FILE: loaders/JaydipPrajapati1910_lazy-lion-40.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: loading, loader, square */
.loader {
  width: 100px;
  height: 100px;
  display: grid;
  color: hsl(204, 86%, 69%);
}

.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  --c1: linear-gradient(90deg,rgb(247, 247, 247) calc(100%/3),currentColor 0 calc(2*100%/3),rgb(247, 247, 247) 0);
  --c2: linear-gradient( 0deg,rgb(247, 247, 247) calc(100%/3),currentColor 0 calc(2*100%/3),rgb(247, 247, 247) 0);
  background: var(--c1),
    var(--c2),
    var(--c1),
    var(--c2);
  background-size: 300% 8px,8px 300%;
  background-repeat: no-repeat;
  animation: l1 1s infinite linear;
}

.loader:after {
  margin: 10px;
  transform: scaleX(-1);
  animation-delay: -.25s;
}

@keyframes l1 {
  0% {
    background-position: 50%  0,100% 100%,0    100%,0 0
  }

  25% {
    background-position: 0    0,100% 50% ,0    100%,0 0
  }

  50% {
    background-position: 0    0,100% 0   ,50%  100%,0 0
  }

  75% {
    background-position: 0    0,100% 0   ,100% 100%,0 50%
  }

  75.01% {
    background-position: 100% 0,100% 0   ,100% 100%,0 50%
  }

  100% {
    background-position: 50%  0,100% 0   ,100% 100%,0 100%
  }
}
  

</style>


================================================
FILE: loaders/JaydipPrajapati1910_odd-ladybug-43.html
================================================
<div class="spinner">
  <div class="outer">
    <div class="inner tl"></div>
    <div class="inner tr"></div>
    <div class="inner br"></div>
    <div class="inner bl"></div>
  </div>
</div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: animation, loading, loader, animated, circle loader, loader circle */
.spinner {
  position: absolute;
  width: 128px;
  height: 128px;
  top: calc(50% - 64px);
  left: calc(50% - 64px);
  transform: perspective(206px) rotateX(45deg);
}

.outer {
  box-sizing: border-box;
  animation: spin 3s linear infinite;
  height: 100%;
}

.inner {
  position: absolute;
  border-radius: 50%;
  width: 64px;
  height: 64px;
}

.tl {
  top: 0;
  left: 0;
  border-top: 8px solid red;
  border-left: 10px solid red;
  animation: spin 1s ease-in-out infinite;
}

.tr {
  top: 0;
  right: 0;
  border-top: 8px solid #0575E6;
  border-right: 10px solid #0575E6;
  animation: spin 1s ease-in-out infinite;
}

.br {
  bottom: 0;
  right: 0;
  border-bottom: 8px solid  #00F260;
  border-right: 10px solid  #00F260;
  animation: spin 1s ease-in-out infinite;
}

.bl {
  bottom: 0;
  left: 0;
  border-bottom: 8px solid  #e9e93e;
  border-left: 10x solid #e9e93e;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/JaydipPrajapati1910_pink-octopus-20.html
================================================
<div class="loader">
        <div class="pencil">
            <p>Loading...</p>
            <div class="top"></div>
        </div>
        <div class="stroke">
        </div>
    </div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: loader, circle, circle loader, pen */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation: animate 8s linear infinite;
}

.pencil {
  width: 150px;
  background: #ffc334;
  border-top: 10px solid #ffd268;
  border-bottom: 10px solid #e3af38;
  overflow: hidden;
  transform-origin: top;
}

.pencil p {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 12px;
  line-height: 15px;
  text-transform: uppercase;
  font-weight: bold;
  color: #d09200;
}

.pencil:before {
  content: '';
  position: absolute;
  left: -80px;
  top: 0;
  border-style: solid;
  border-color: transparent #e29663 transparent transparent;
  border-width: 17px 40px 18px;
}

.pencil:after {
  content: '';
  position: absolute;
  left: -80px;
  top: 0;
  border-style: solid;
  border-color: transparent #262626 transparent transparent;
  border-width: 17px 40px 18px;
  transform: scale(.3);
}

.top {
  position: absolute;
  top: 0;
  right: 0;
  height: 35px;
  width: 35px;
  background: #ccc;
  border-top: 10px solid #dedede;
  border-bottom: 10px solid #b9bfbf;
}

.top:before {
  content: '';
  position: absolute;
  top: -10px;
  right: -100%;
  width: 150%;
  height: 100%;
  background: #d76f6e;
  border-top: 10px solid #da8e8d;
  border-bottom: 10px solid #c85957;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 2;
}

.stroke {
  position: absolute;
  top: 50%;
  left: calc(100% - 80px);
  transform: translate(-50%,-50%) rotate(45deg);
  border: 5px solid transparent;
  border-left-color: #000;
  border-top-color: #000;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  z-index: 1;
}

@keyframes animate {
  0% {
    transform: translate(-50%,-50%) rotate(360deg);
  }

  100% {
    transform: translate(-50%,-50%) rotate(0deg);
  }
}
</style>


================================================
FILE: loaders/JaydipPrajapati1910_smart-falcon-33.html
================================================
<div class="loader">
  <span></span>
</div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: loader, circle, colorful, circle loader */
.loader {
  position: relative;
  width: 160px;
  height: 160px;
  border: 4px solid #282828;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: -5px -5px 5px rgba(255, 255, 255, 0.1),
    10px 10px 10px rgba(0, 0, 0, 0.4),
    inset -5px -5px 5px rgba(255, 255, 255, 0.2),
    inset 10px 10px 10px rgba(0, 0, 0, 0.4);
}

.loader:before {
  content: "";
  position: absolute;
  top: 25px;
  left: 25px;
  right: 25px;
  bottom: 25px;
  z-index: 10;
  background: #212121;
  border-radius: 50%;
  border: 2px solid #292929;
  box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.2),
    inset 3px 3px 5px rgba(0, 0, 0, 0.5);
}

.loader span {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: linear-gradient(
    -225deg,
    #ff7402 0%,
    #ffe700 50%,
    #fff55e 100%
  );
  filter: blur(20px);
  z-index: -1;
  animation: animate 0.5s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

  

</style>


================================================
FILE: loaders/JaydipPrajapati1910_spicy-eel-83.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: animation, loader, ninja loader */
.loader {
  width: 160px;
  height: 160px;
  color: #0000F4;
  background: conic-gradient(from  165deg at top   ,#0000, currentColor 1deg 30deg,#0000 31deg) top,
    conic-gradient(from   75deg at left  ,#0000, currentColor 1deg 30deg,#0000 31deg) left,
    conic-gradient(from  -15deg at bottom,#0000, currentColor 1deg 30deg,#0000 31deg) bottom, 
    conic-gradient(from -105deg at right ,#0000, currentColor 1deg 30deg,#0000 31deg) right;
  background-size: 100% 50%,50% 100%;
  -webkit-mask: radial-gradient(circle 10px,#0000 90%,#000);
  background-repeat: no-repeat;
  animation: sh1 1.5s infinite linear;
}

@keyframes sh1 {
 
  100% {
    transform: rotate(1turn)
  }
}
  

</style>


================================================
FILE: loaders/JaydipPrajapati1910_stale-pug-89.html
================================================
<section class="container">
  <div>
  <div>
    <span class="one h6"></span>
    <span class="two h3"></span>
  </div>
</div>


<div>
  <div>
    <span class="one h1"></span>
    <span class="two h4"></span>
  </div>
</div>


<div>
  <div>
    <span class="one h5"></span>
    <span class="two h2"></span>
  </div>
</div>
</section>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: loading, loader, line, line loader */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container div {
  position: absolute;
  width: 90px;
  height: 51px;
}

.container div:nth-of-type(2) {
  transform: rotate(60deg)
}

.container div:nth-of-type(3) {
  transform: rotate(-60deg)
}

.container div div {
  width: 100%;
  height: 100%;
  position: relative
}

.container div div span {
  position: absolute;
  width: 4px;
  height: 0%;
  background: #053146;
  z-index: 999999;
}

.h1 {
  left: 0;
  animation: load1 7.2s ease infinite;
}

.h2 {
  right: 0;
  animation: load2 7.2s ease .6s infinite;
}

.h3 {
  right: 0;
  animation: load3 7.2s ease 1.2s infinite;
}

.h4 {
  right: 0;
  animation: load4 7.2s ease 1.8s infinite;
}

.h5 {
  left: 0;
  animation: load5 7.2s ease 2.4s infinite;
}

.h6 {
  left: 0;
  animation: load6 7.2s ease 3s infinite;
}

@keyframes load1 {
  0% {
    bottom: 0;
    height: 0
  }

  6.944444444% {
    bottom: 0;
    height: 100%
  }

  50% {
    top: 0;
    height: 100%
  }

  59.944444433% {
    top: 0;
    height: 0
  }
/*   91.6666667%{top:0;height:0%;} */
}

@keyframes load2 {
  0% {
    top: 0;
    height: 0
  }

  6.944444444% {
    top: 0;
    height: 100%
  }

  50% {
    bottom: 0;
    height: 100%
  }

  59.944444433% {
    bottom: 0;
    height: 0
  }
/*   91.6666667%{bottom:0;height:0%} */
}

@keyframes load3 {
  0% {
    top: 0;
    height: 0
  }

  6.944444444% {
    top: 0;
    height: 100%
  }

  50% {
    bottom: 0;
    height: 100%
  }

  59.94444443% {
    bottom: 0;
    height: 0
  }
/*   91.6666667%{bottom:0;height:0%;} */
}

@keyframes load4 {
  0% {
    top: 0;
    height: 0
  }

  6.944444444% {
    top: 0;
    height: 100%
  }

  50% {
    bottom: 0;
    height: 100%
  }

  59.94444443% {
    bottom: 0;
    height: 0
  }
/*   91.6666667%{bottom:0;height:0%;} */
}

@keyframes load5 {
  0% {
    bottom: 0;
    height: 0
  }

  6.944444444% {
    bottom: 0;
    height: 100%
  }

  50% {
    top: 0;
    height: 100%
  }

  59.94444443% {
    top: 0;
    height: 0
  }
/*   91.6666667%{top:0;height:0%;} */
}

@keyframes load6 {
  0% {
    bottom: 0;
    height: 0
  }

  6.944444444% {
    bottom: 0;
    height: 100%
  }

  50% {
    top: 0;
    height: 100%
  }

  59.94444443% {
    top: 0;
    height: 0
  }
/*   91.6666667%{top:0;height:0%;} */
}
  

</style>


================================================
FILE: loaders/JaydipPrajapati1910_strong-zebra-9.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: animation, loading, loader, battery */
.loader {
  width: 160px;
  height: 80px;
  border: 4px solid #00F45B;
  border-right-color: transparent;
  padding: 6px;
  background: repeating-linear-gradient(90deg,#00F45B 0 20px,#0000 0 30px) 
    left/0% 100% no-repeat content-box content-box;
  position: relative;
  animation: p5 2s infinite steps(6);
}

.loader::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 100%;
  width: 20px;
  background: linear-gradient(
        #0000   calc(50% - 14px),#00F45B 0 calc(50% - 10px),
        #0000 0 calc(50% + 10px),#00F45B 0 calc(50% + 14px),#0000 0) left /100% 100%,
    linear-gradient(#00F45B calc(50% - 10px),#0000        0 calc(50% + 10px),#00F45B 0) left /4px 100%,
    linear-gradient(#0000        calc(50% - 10px),#00F45B 0 calc(50% + 10px),#0000        0) right/4px 100%;
  background-repeat: no-repeat;
}

@keyframes p5 {
  100% {
    background-size: 120% 100%
  }
}
  

</style>


================================================
FILE: loaders/JaydipPrajapati1910_unlucky-wolverine-27.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: green, loader, circle loader, loader circle */
.loader {
  background: linear-gradient(to right, #2cc16f 50%, #fafafa 50%);
  border-radius: 100%;
  height: 70px;
  width: 70px;
  animation: loader-circle-time 8s steps(800, start) infinite;
}

.loader:after {
  content: "";
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 50%;
  animation: loader-circle-mask 8s steps(250, start) infinite;
  transform-origin: 100% 50%;
}

@keyframes loader-circle-time {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-circle-mask {
  0% {
    background: #fafafa;
    transform: rotate(0deg);
  }

  50% {
    background: #fafafa;
    transform: rotate(-180deg);
  }

  50.01% {
    background: #2cc16f;
    transform: rotate(0deg);
  }

  100% {
    background: #2cc16f;
    transform: rotate(-180deg);
  }
}

 

</style>


================================================
FILE: loaders/JesusRafaelNavaCruz_chilly-vampirebat-53.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by JesusRafaelNavaCruz - Source: Mr Frontend - https://instagram.com/mr__frontend?igshid=MzRlODBiNWFlZA== - Tags: loader, circle loader, loader circle */
.loader {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  box-sizing: border-box;
  border-top: 8px solid #fff;
  border-left: 8px solid #fff;
  border-right: 8px solid #ff00;
  animation: loader .7s infinite linear;
}

@keyframes loader {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/JkHuger_bad-parrot-46.html
================================================
<div class="moon">
  <div class="shadow"></div>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.moon, .shadow {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgb(216, 216, 216);
  border-radius: 50%;
  height: 50px;
  width: 50px;
}

.shadow {
  width: 50px;
  height: 50px;
  position: relative;
  background: #212121;
 /*Change these color to the bg of your website*/
  transition: all .3s ease;
  animation: move_4123 1.2s infinite alternate ease-in-out;
  transform: translate3d(8px, -8px, 0);
}

@keyframes move_4123 {
  100% {
    transform: translate3d(36px, -36px, 0);
  }
}
</style>


================================================
FILE: loaders/JkHuger_brown-dragon-7.html
================================================
<div class="triangle"></div>
<div class="triangle-shadow"></div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.triangle {
  background-color: transparent;
  height: 0px;
  width: 0px;
  border-style: solid;
  border-width: 50px 50px 50px 50px;
  border-radius: 2px;
  border-color: #00ff83 #00e676 #00cc69 #00e676;
  animation: animtrgl 3s infinite ease;
}

.text {
  font-family: 'Staatliches', cursive;
  color: white;
  font-size: 25px;
  width: 250px;
  text-align: center;
  display: block;
  height: 50px;
  position: absolute;
  animation: textload 3s infinite ease;
  text-shadow: 0 0 4px black;
}

@keyframes textload {
  0% {
    top: calc(50% + 100px);
  }

  25% {
    top: calc(50% + 85px);
  }

  50% {
    top: calc(50% + 100px);
  }

  75% {
    top: calc(50% + 85px);
  }

  100% {
    top: calc(50% + 100px);
  }
}

@keyframes animtrgl {
  0% {
    border-width: 50px 75px 50px 25px;
    transform: scale(2);
  }

  25% {
    border-width: 25px 50px 75px 50px;
    transform: scale(1.75);
  }

  50% {
    border-width: 50px 25px 50px 75px;
    transform: scale(2);
  }

  75% {
    border-width: 75px 50px 25px 50px;
    transform: scale(1.75);
  }

  100% {
    border-width: 50px 75px 50px 25px;
    transform: scale(2);
  }
}
</style>


================================================
FILE: loaders/JkHuger_dangerous-chipmunk-23.html
================================================
<div class="frame">
   <div class="center">
      <div class="dot-1"></div>
      <div class="dot-2"></div>
      <div class="dot-3"></div>
   </div>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -200px;
}

.center {
  position: absolute;
  width: 220px;
  height: 220px;
  top: 90px;
  left: 90px;
}

.dot-1 {
  position: absolute;
  z-index: 3;
  width: 30px;
  height: 30px;
  top: 95px;
  left: 95px;
  background: #fff;
  border-radius: 50%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
  animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
}

.dot-2 {
  position: absolute;
  z-index: 2;
  width: 60px;
  height: 60px;
  top: 80px;
  left: 80px;
  background: #fff;
  border-radius: 50%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
  animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
}

.dot-3 {
  position: absolute;
  z-index: 1;
  width: 90px;
  height: 90px;
  top: 65px;
  left: 65px;
  background: #fff;
  border-radius: 50%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
  animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
}

@keyframes jump-jump-1 {
  0%, 70% {
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jump-jump-2 {
  0%, 40% {
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jump-jump-3 {
  0%, 10% {
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

</style>


================================================
FILE: loaders/JkHuger_dangerous-dolphin-42.html
================================================

  <div class="rocket">
    <div class="rocket-body">
      <div class="body"></div>
      <div class="fin fin-left"></div>
      <div class="fin fin-right"></div>
      <div class="window"></div>
    </div>
    <div class="exhaust-flame"></div>
    <ul class="exhaust-fumes">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul class="star">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.rocket {
  position: absolute;
  top: 20%;
  width: 80px;
  left: calc(50% - 40px);
}

.rocket .rocket-body {
  width: 80px;
  left: calc(50% - 50px);
  animation: bounce 0.5s infinite;
}

.rocket .rocket-body .body {
  background-color: #dadada;
  height: 180px;
  left: calc(50% - 50px);
  border-top-right-radius: 100%;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top: 5px solid #f5f5f5;
}

.rocket .rocket-body:before {
  content: '';
  position: absolute;
  left: calc(50% - 24px);
  width: 48px;
  height: 13px;
  background-color: #554842;
  bottom: -13px;
  border-bottom-right-radius: 60%;
  border-bottom-left-radius: 60%;
}

.rocket .window {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #a75248;
  left: calc(50% - 25px);
  top: 40px;
  border: 5px solid #b4b2b2;
}

.rocket .fin {
  position: absolute;
  z-index: -100;
  height: 55px;
  width: 50px;
  background-color: #a75248;
}

.rocket .fin-left {
  left: -30px;
  top: calc(100% - 55px);
  border-top-left-radius: 80%;
  border-bottom-left-radius: 20%;
}

.rocket .fin-right {
  right: -30px;
  top: calc(100% - 55px);
  border-top-right-radius: 80%;
  border-bottom-right-radius: 20%;
}

.rocket .exhaust-flame {
  position: absolute;
  top: 90%;
  width: 28px;
  background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);
  height: 150px;
  left: calc(50% - 14px);
  animation: exhaust 0.2s infinite;
}

.rocket .exhaust-fumes li {
  width: 60px;
  height: 60px;
  background-color: #f5f5f5;
  list-style: none;
  position: absolute;
  border-radius: 100%;
}

.rocket .exhaust-fumes li:first-child {
  width: 200px;
  height: 200px;
  bottom: -300px;
  animation: fumes 5s infinite;
}

.rocket .exhaust-fumes li:nth-child(2) {
  width: 150px;
  height: 150px;
  left: -120px;
  top: 260px;
  animation: fumes 3.2s infinite;
}

.rocket .exhaust-fumes li:nth-child(3) {
  width: 120px;
  height: 120px;
  left: -40px;
  top: 330px;
  animation: fumes 3s 1s infinite;
}

.rocket .exhaust-fumes li:nth-child(4) {
  width: 100px;
  height: 100px;
  left: -170px;
  animation: fumes 4s 2s infinite;
  top: 380px;
}

.rocket .exhaust-fumes li:nth-child(5) {
  width: 130px;
  height: 130px;
  left: -120px;
  top: 350px;
  animation: fumes 5s infinite;
}

.rocket .exhaust-fumes li:nth-child(6) {
  width: 200px;
  height: 200px;
  left: -60px;
  top: 280px;
  animation: fumes2 10s infinite;
}

.rocket .exhaust-fumes li:nth-child(7) {
  width: 100px;
  height: 100px;
  left: -100px;
  top: 320px;
}

.rocket .exhaust-fumes li:nth-child(8) {
  width: 110px;
  height: 110px;
  left: 70px;
  top: 340px;
}

.rocket .exhaust-fumes li:nth-child(9) {
  width: 90px;
  height: 90px;
  left: 200px;
  top: 380px;
  animation: fumes 20s infinite;
}

.star li {
  list-style: none;
  position: absolute;
}

.star li:before, .star li:after {
  content: '';
  position: absolute;
  background-color: #f5f5f5;
}

.star li:before {
  width: 10px;
  height: 2px;
  border-radius: 50%;
}

.star li:after {
  height: 8px;
  width: 2px;
  left: 4px;
  top: -3px;
}

.star li:first-child {
  top: -30px;
  left: -210px;
  animation: twinkle 0.4s infinite;
}

.star li:nth-child(2) {
  top: 0;
  left: 60px;
  animation: twinkle 0.5s infinite;
}

.star li:nth-child(2):before {
  height: 1px;
  width: 5px;
}

.star li:nth-child(2):after {
  width: 1px;
  height: 5px;
  top: -2px;
  left: 2px;
}

.star li:nth-child(3) {
  left: 120px;
  top: 220px;
  animation: twinkle 1s infinite;
}

.star li:nth-child(4) {
  left: -100px;
  top: 200px;
  animation: twinkle 0.5s ease infinite;
}

.star li:nth-child(5) {
  left: 170px;
  top: 100px;
  animation: twinkle 0.4s ease infinite;
}

.star li:nth-child(6) {
  top: 87px;
  left: -79px;
  animation: twinkle 0.2s infinite;
}

.star li:nth-child(6):before {
  height: 1px;
  width: 5px;
}

.star li:nth-child(6):after {
  width: 1px;
  height: 5px;
  top: -2px;
  left: 2px;
}

@keyframes fumes {
  50% {
    transform: scale(1.5);
    background-color: transparent;
  }

  51% {
    transform: scale(0.8);
  }

  100% {
    background-color: #f5f5f5;
    transform: scale(1);
  }
}

@keyframes bounce {
  0% {
    transform: translate3d(0px, 0px, 0);
  }

  50% {
    transform: translate3d(0px, -4px, 0);
  }

  100% {
    transform: translate3d(0px, 0px, 0);
  }
}

@keyframes exhaust {
  0% {
    background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);
  }

  50% {
    background: linear-gradient(to bottom, transparent 8%, #f5f5f5 100%);
  }

  75% {
    background: linear-gradient(to bottom, transparent 12%, #f5f5f5 100%);
  }
}

@keyframes fumes2 {
  50% {
    transform: scale(1.1);
  }
}

@keyframes twinkle {
  80% {
    transform: scale(1.1);
    opacity: 0.7;
  }
}
 
</style>


================================================
FILE: loaders/JkHuger_fuzzy-mouse-64.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.loader {
  position: relative;
  margin: auto;
  box-sizing: border-box;
  background-clip: padding-box;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
  transform-origin: 50% 60%;
  transform: perspective(200px) rotateX(66deg);
  animation: spinner-wiggle 1.2s infinite;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  margin: -4px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: .05;
  border: inherit;
  border-color: transparent;
  animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
}

.loader:before {
  border-top-color: #66e6ff;
}

.loader:after {
  border-top-color: #f0db75;
  animation-delay: 0.3s;
}

@keyframes spinner-spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinner-fade {
  20% {
    opacity: .1;
  }

  40% {
    opacity: 1;
  }

  60% {
    opacity: .1;
  }
}
</style>


================================================
FILE: loaders/JkHuger_giant-dodo-93.html
================================================
<div class="loader">
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.loader {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: perspective(500px) rotateX(45deg);
}

.loader span {
  position: absolute;
  display: block;
  border: 15px solid #fff;
  box-sizing: border-box;
  border-radius: 50%;
  box-shadow: 0 10px 0 #e0e0e0, inset 0 10px 0 #e0e0e0;
  animation: animate_5013 4.5s ease-in-out infinite;
}

.loader span:nth-child(1) {
  animation-delay: 0s;
}

.loader span:nth-child(2) {
  animation-delay: 1.5s;
}

.loader span:nth-child(3) {
  animation-delay: 3s;
}

@keyframes animate_5013 {
  0% {
    transform: translateZ(-100px);
    width: 100%;
    height: 100%;
  }

  25% {
    transform: translateZ(100px);
    width: 100%;
    height: 100%;
  }

  50% {
    transform: translateZ(100px);
    width: 35%;
    height: 35%;
  }

  75% {
    transform: translateZ(-100px);
    width: 35%;
    height: 35%;
  }

  100% {
    transform: translateZ(-100px);
    width: 100%;
    height: 100%;
  }
}
</style>


================================================
FILE: loaders/JkHuger_heavy-walrus-48.html
================================================
<div class="loader">
  Loading
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.loader {
  font-size: 2rem;
  font-family: sans-serif;
  font-variant: small-caps;
  font-weight: 900;
  background: conic-gradient(
    #dff2ae 0 25%,
    #ff904f 25% 50%,
    #feefe7 50% 75%,
    #ffde2b 75%
  );
  background-size: 200% 200%;
  animation: animateBackground 4.5s ease-in-out infinite;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

@keyframes animateBackground {
  25% {
    background-position: 0 100%;
  }

  50% {
    background-position: 100% 100%;
  }

  75% {
    background-position: 100% 0%;
  }

  100% {
    background-position: 0 0;
  }
}

</style>


================================================
FILE: loaders/JkHuger_light-lion-86.html
================================================
			
	<div class="piggy-wrapper">
		<div class="piggy-wrap">
			<div class="piggy">
				<div class="nose"></div>
				<div class="mouth"></div>
				<div class="ear"></div>
				<div class="tail">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</div>
				<div class="eye"></div>
				<div class="hole"></div>
			</div>
		</div>
		<div class="coin-wrap">
			<div class="coin">$</div>
		</div>
		<div class="legs"></div>
		<div class="legs back"></div>
	</div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.piggy-wrapper {
  position: relative;
  width: 350px;
  height: 350px;
  display: block;
  margin: 0 auto;
  margin-top: 0px;
}

.piggy-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  transform-origin: bottom center;
  animation: trembling 5s linear infinite;
}

@keyframes trembling {
  0% {
    transform: scale(1);
  }

  19% {
    transform: scale(1);
  }

  21% {
    transform: scale(0.99);
  }

  22% {
    transform: scale(1);
  }

  23% {
    transform: scale(0.99);
  }

  24% {
    transform: scale(1);
  }

  25% {
    transform: scale(0.99);
  }

  26% {
    transform: scale(1);
  }

  25% {
    transform: scale(0.99);
  }

  26% {
    transform: scale(1);
  }

  27% {
    transform: scale(0.99);
  }

  28% {
    transform: scale(1);
  }

  29% {
    transform: scale(0.99);
  }

  30% {
    transform: scale(1);
  }

  60% {
    transform: scale(0.95);
  }

  61% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

.piggy {
  position: absolute;
  bottom: 40px;
  left: 50%;
  margin-left: -160px;
  width: 270px;
  height: 200px;
  display: block;
  border-radius: 100px;
  background-color: #d88fa0;
}

.nose {
  position: absolute;
  top: 80px;
  left: -25px;
  width: 40px;
  height: 60px;
  display: block;
  background-color: #d88fa0;
  z-index: 1;
  border-radius: 4px;
}

.mouth {
  position: absolute;
  top: 95px;
  left: -15px;
  width: 0;
  height: 0;
  z-index: 8;
  display: block;
  border-bottom: 60px solid #d88fa0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-radius: 4px;
}

.ear {
  position: absolute;
  top: -35px;
  left: 70px;
  width: 45px;
  height: 40px;
  display: block;
  border-top-right-radius: 60px;
  background-color: #d88fa0;
  z-index: 1;
}

.piggy:before {
  position: absolute;
  content: '';
  top: -25px;
  left: 55px;
  width: 60px;
  height: 60px;
  display: block;
  border-top-right-radius: 60px;
  background-color: #cb6980;
  z-index: -1;
}

.tail {
  position: absolute;
  left: 254px;
  top: 125px;
}

.tail span {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 5px;
  transform: rotate(30deg);
  background-color: #d88fa0;
}

.tail span:nth-child(2) {
  left: 3px;
  top: -38px;
  width: 50px;
  height: 50px;
  transform: rotate(-20deg);
  background-color: transparent;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #d88fa0 #d88fa0 transparent;
}

.tail span:nth-child(3) {
  left: 22px;
  top: -36px;
  width: 30px;
  height: 30px;
  transform: rotate(-40deg);
  background-color: transparent;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: #d88fa0 transparent transparent #d88fa0;
}

.tail span:nth-child(4) {
  left: 7px;
  top: -66px;
  width: 60px;
  height: 60px;
  transform: rotate(-40deg);
  background-color: transparent;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #d88fa0 transparent;
}

.eye {
  position: absolute;
  left: 35px;
  top: 75px;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  border-radius: 50%;
  border-width: 4px;
  border-style: solid;
  border-color: #555 transparent transparent #555;
  animation: blink 5s linear infinite;
}

@keyframes blink {
  0% {
    border-color: #555 transparent transparent #555;
  }

  19% {
    border-color: #555 transparent transparent #555;
  }

  20% {
    border-color: transparent #555 #555 transparent;
  }

  60% {
    border-color: transparent #555 #555 transparent;
  }

  61% {
    border-color: #555 transparent transparent #555;
  }

  100% {
    border-color: #555 transparent transparent #555;
  }
}

.hole {
  position: absolute;
  left: 121px;
  top: 0;
  width: 60px;
  height: 5px;
  background-color: #555;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.coin-wrap {
  position: absolute;
  top: 0;
  left: -8px;
  z-index: 9;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform-origin: bottom center;
  animation: trembling 5s linear infinite, moveCoin 5s linear infinite;
}

.coin {
  position: absolute;
  top: 110px;
  left: 143px;
  z-index: 9;
  width: 61.5px;
  height: 61.5px;
  border-radius: 50%;
  border: 6px solid #e67e22;
  background-color: #f39c12;
  text-align: center;
  line-height: 68px;
  font-size: 45px;
  font-weight: 500;
  color: rgba(32,32,32,0.5);
  box-shadow: inset 0 0 4px #777;
}

@keyframes moveCoin {
  0% {
    opacity: 0;
    top: 0;
  }

  19% {
    opacity: 1;
    top: 0;
  }

  21% {
    top: -7px;
  }

  22% {
    top: -7px;
  }

  23% {
    top: -14px;
  }

  24% {
    top: -14px;
  }

  25% {
    top: -21px;
  }

  26% {
    top: -21px;
  }

  27% {
    top: -28px;
  }

  28% {
    top: -28px;
  }

  29% {
    top: -35px;
  }

  30% {
    top: -35px;
  }

  60% {
    top: -35px;
  }

  66% {
    top: -220px;
    opacity: 1;
  }

  67% {
    top: -220px;
    opacity: 0;
  }

  99% {
    top: 0;
    opacity: 0;
  }

  100% {
    opacity: 0;
    top: 0;
  }
}

.legs {
  position: absolute;
  bottom: 14px;
  left: 96px;
  width: 40px;
  height: 60px;
  display: block;
  background-color: #cb6980;
  border-radius: 3px;
  z-index: 1;
}

.legs:after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 30px;
  height: 12px;
  display: block;
  background-color: #d88fa0;
  border-bottom-left-radius: 3px;
  border-top-right-radius: 3px;
  z-index: 1;
}

.legs.back {
  left: 206px;
}
</style>


================================================
FILE: loaders/JkHuger_light-monkey-24.html
================================================
<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.container {
  width: 80px;
  margin: 100px auto;
}

.block {
  position: relative;
  box-sizing: border-box;
  float: left;
  margin: 0 10px 10px 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #FFF;
}

.block:nth-child(4n+1) {
  animation: wave_23 2s ease .0s infinite;
}

.block:nth-child(4n+2) {
  animation: wave_23 2s ease .2s infinite;
}

.block:nth-child(4n+3) {
  animation: wave_23 2s ease .4s infinite;
}

.block:nth-child(4n+4) {
  animation: wave_23 2s ease .6s infinite;
  margin-right: 0;
}

@keyframes wave_23 {
  0% {
    top: 0;
    opacity: 1;
  }

  50% {
    top: 30px;
    opacity: .2;
  }

  100% {
    top: 0;
    opacity: 1;
  }
}
</style>


================================================
FILE: loaders/JkHuger_little-falcon-22.html
================================================
<div class="item">
    <div class="loader-pulse"></div>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.loader-pulse {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #8f44fd;
  animation: load-pulse 0.85s infinite linear;
}

@keyframes load-pulse {
  0% {
    transform: scale(0.15);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}
</style>


================================================
FILE: loaders/JkHuger_mean-bobcat-66.html
================================================
<div class="animation">Text writing!</div>
<style>
/* From Uiverse.io by JkHuger - Tags: animation, text, writing */
@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}
/* When you change the amount of characters in the h1, you have to change 
the with: 14ch and  steps(14, end), if there is 14 characters, put 14, 
if there is 20 put 20 */
.animation {
  font: bold 200% Consolas, Monaco, monospace;
  border-right: .1em solid black;
  width: 13.20ch;
  margin: 2em 2em;
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: typing 5s steps(13, end),
	           blink-caret .5s step-end infinite alternate;
}
</style>


================================================
FILE: loaders/JkHuger_moody-crab-18.html
================================================
<div id="col">
  <div id="img-wrap">
    <span class="loader"></span>
</div></div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
#col {
  width: 50%;
  margin: 0 auto;
}

.loader {
  content: ' ';
  border: 5px solid #333;
  border-radius: 30px;
  height: 30px;
  left: 50%;
  margin: -15px 0 0 -15px;
  opacity: 0;
  position: absolute;
  top: 50%;
  width: 30px;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
}

@keyframes pulsate {
  0% {
    transform: scale(.1);
    opacity: 0.0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
</style>


================================================
FILE: loaders/JkHuger_new-deer-97.html
================================================
<div class="box-of-star1">
    <div class="star star-position1"></div>
    <div class="star star-position2"></div>
    <div class="star star-position3"></div>
    <div class="star star-position4"></div>
    <div class="star star-position5"></div>
    <div class="star star-position6"></div>
    <div class="star star-position7"></div>
  </div>
  <div class="box-of-star2">
    <div class="star star-position1"></div>
    <div class="star star-position2"></div>
    <div class="star star-position3"></div>
    <div class="star star-position4"></div>
    <div class="star star-position5"></div>
    <div class="star star-position6"></div>
    <div class="star star-position7"></div>
  </div>
  <div class="box-of-star3">
    <div class="star star-position1"></div>
    <div class="star star-position2"></div>
    <div class="star star-position3"></div>
    <div class="star star-position4"></div>
    <div class="star star-position5"></div>
    <div class="star star-position6"></div>
    <div class="star star-position7"></div>
  </div>
  <div class="box-of-star4">
    <div class="star star-position1"></div>
    <div class="star star-position2"></div>
    <div class="star star-position3"></div>
    <div class="star star-position4"></div>
    <div class="star star-position5"></div>
    <div class="star star-position6"></div>
    <div class="star star-position7"></div>
  </div>
  <div data-js="astro" class="astronaut">
    <div class="head"></div>
    <div class="arm arm-left"></div>
    <div class="arm arm-right"></div>
    <div class="body">
      <div class="panel"></div>
    </div>
    <div class="leg leg-left"></div>
    <div class="leg leg-right"></div>
    <div class="schoolbag"></div>
  </div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader, astronaut */
@keyframes snow {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(650px);
  }
}

@keyframes astronaut {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.box-of-star1,
.box-of-star2,
.box-of-star3,
.box-of-star4 {
  width: 100%;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  transform: translateY(0px);
  height: 700px;
}

.box-of-star1 {
  animation: snow 5s linear infinite;
}

.box-of-star2 {
  animation: snow 5s -1.64s linear infinite;
}

.box-of-star3 {
  animation: snow 5s -2.30s linear infinite;
}

.box-of-star4 {
  animation: snow 5s -3.30s linear infinite;
}

.star {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  z-index: 10;
  opacity: 0.7;
}

.star:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  z-index: 10;
  top: 80px;
  left: 70px;
  opacity: .7;
}

.star:after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  z-index: 10;
  top: 8px;
  left: 170px;
  opacity: .9;
}

.star-position1 {
  top: 30px;
  left: 20px;
}

.star-position2 {
  top: 110px;
  left: 250px;
}

.star-position3 {
  top: 60px;
  left: 570px;
}

.star-position4 {
  top: 120px;
  left: 900px;
}

.star-position5 {
  top: 20px;
  left: 1120px;
}

.star-position6 {
  top: 90px;
  left: 1280px;
}

.star-position7 {
  top: 30px;
  left: 1480px;
}

.astronaut {
  width: 250px;
  height: 300px;
  position: absolute;
  z-index: 11;
  top: calc(50% - 150px);
  left: calc(50% - 125px);
  animation: astronaut 5s linear infinite;
}

.schoolbag {
  width: 100px;
  height: 150px;
  position: absolute;
  z-index: 1;
  top: calc(50% - 75px);
  left: calc(50% - 50px);
  background-color: #94b7ca;
  border-radius: 50px 50px 0 0 / 30px 30px 0 0;
}

.head {
  width: 97px;
  height: 80px;
  position: absolute;
  z-index: 3;
  background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
  border-radius: 50%;
  top: 34px;
  left: calc(50% - 47.5px);
}

.head:after {
  content: "";
  width: 60px;
  height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 30px);
  background: -webkit-linear-gradient(top, #15aece 0%, #15aece 50%, #0391bf 50%, #0391bf 100%);
  border-radius: 15px;
}

.head:before {
  content: "";
  width: 12px;
  height: 25px;
  position: absolute;
  top: calc(50% - 12.5px);
  left: -4px;
  background-color: #618095;
  border-radius: 5px;
  box-shadow: 92px 0px 0px #618095;
}

.body {
  width: 85px;
  height: 100px;
  position: absolute;
  z-index: 2;
  background-color: #fffbff;
  border-radius: 40px / 20px;
  top: 105px;
  left: calc(50% - 41px);
  background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
}

.panel {
  width: 60px;
  height: 40px;
  position: absolute;
  top: 20px;
  left: calc(50% - 30px);
  background-color: #b7cceb;
}

.panel:before {
  content: "";
  width: 30px;
  height: 5px;
  position: absolute;
  top: 9px;
  left: 7px;
  background-color: #fbfdfa;
  box-shadow: 0px 9px 0px #fbfdfa, 0px 18px 0px #fbfdfa;
}

.panel:after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 9px;
  right: 7px;
  background-color: #fbfdfa;
  border-radius: 50%;
  box-shadow: 0px 14px 0px 2px #fbfdfa;
}

.arm {
  width: 80px;
  height: 30px;
  position: absolute;
  top: 121px;
  z-index: 2;
}

.arm-left {
  left: 30px;
  background-color: #e3e8eb;
  border-radius: 0 0 0 39px;
}

.arm-right {
  right: 30px;
  background-color: #fbfdfa;
  border-radius: 0 0 39px 0;
}

.arm-left:before,
.arm-right:before {
  content: "";
  width: 30px;
  height: 70px;
  position: absolute;
  top: -40px;
}

.arm-left:before {
  border-radius: 50px 50px 0px 120px / 50px 50px 0 110px;
  left: 0;
  background-color: #e3e8eb;
}

.arm-right:before {
  border-radius: 50px 50px 120px 0 / 50px 50px 110px 0;
  right: 0;
  background-color: #fbfdfa;
}

.arm-left:after,
.arm-right:after {
  content: "";
  width: 30px;
  height: 10px;
  position: absolute;
  top: -24px;
}

.arm-left:after {
  background-color: #6e91a4;
  left: 0;
}

.arm-right:after {
  right: 0;
  background-color: #b6d2e0;
}

.leg {
  width: 30px;
  height: 40px;
  position: absolute;
  z-index: 2;
  bottom: 70px;
}

.leg-left {
  left: 76px;
  background-color: #e3e8eb;
  transform: rotate(20deg);
}

.leg-right {
  right: 73px;
  background-color: #fbfdfa;
  transform: rotate(-20deg);
}

.leg-left:before,
.leg-right:before {
  content: "";
  width: 50px;
  height: 25px;
  position: absolute;
  bottom: -26px;
}

.leg-left:before {
  left: -20px;
  background-color: #e3e8eb;
  border-radius: 30px 0 0 0;
  border-bottom: 10px solid #6d96ac;
}

.leg-right:before {
  right: -20px;
  background-color: #fbfdfa;
  border-radius: 0 30px 0 0;
  border-bottom: 10px solid #b0cfe4;
}
</style>


================================================
FILE: loaders/JkHuger_odd-insect-77.html
================================================
<div class="cube">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: 3d, loader, rotate, box */
.cube {
  top: -100px;
  margin: 200px auto 0;
  width: 100px;
  height: 100Px;
  position: relative;
  transform-style: preserve-3d;
  animation: spin 3s infinite cubic-bezier(0.16, 0.61, 0.49, 0.91);
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(67, 191, 207);
  border: 2px solid #fff;
  border-radius: 5px;
  box-shadow: 0 0 15px #fff;
}

.top {
  transform: rotateX(90deg) translateZ(50px);
  animation: shift-top 3s infinite ease-out;
}

.bottom {
  transform: rotateX(-90deg) translateZ(50px);
  animation: shift-bottom 3s infinite ease-out;
}

.right {
  transform: rotateY(90deg) translateZ(50px);
  animation: shift-right 3s infinite ease-out;
}

.left {
  transform: rotateY(-90deg) translateZ(50px);
  animation: shift-left 3s infinite ease-out;
}

.front {
  transform: translateZ(50px);
  animation: shift-front 3s infinite ease-out;
}

.back {
  transform: rotateY(-180deg) translateZ(50px);
  animation: shift-back 3s infinite ease-out;
}

@keyframes spin {
  33% {
    transform: rotateX(-36deg) rotateY(-405deg);
  }

  100% {
    transform: rotateX(-36deg) rotateY(-405deg);
  }
}

@keyframes shift-top {
  33% {
    transform: rotateX(90deg) translateZ(50px);
  }

  50% {
    transform: rotateX(90deg) translateZ(100px);
  }

  60% {
    transform: rotateX(90deg) translateZ(100px);
  }

  75% {
    transform: rotateX(90deg) translateZ(50px);
  }
}

@keyframes shift-bottom {
  33% {
    transform: rotateX(-90deg) translateZ(50px);
  }

  50% {
    transform: rotateX(-90deg) translateZ(100px);
  }

  60% {
    transform: rotateX(-90deg) translateZ(100px);
  }

  75% {
    transform: rotateX(-90deg) translateZ(50px);
  }
}

@keyframes shift-right {
  33% {
    transform: rotateY(90deg) translateZ(50px);
  }

  50% {
    transform: rotateY(90deg) translateZ(100px);
  }

  60% {
    transform: rotateY(90deg) translateZ(100px);
  }

  75% {
    transform: rotateY(90deg) translateZ(50px);
  }
}

@keyframes shift-left {
  33% {
    transform: rotateY(-90deg) translateZ(50px);
  }

  50% {
    transform: rotateY(-90deg) translateZ(100px);
  }

  60% {
    transform: rotateY(-90deg) translateZ(100px);
  }

  75% {
    transform: rotateY(-90deg) translateZ(50px);
  }
}

@keyframes shift-front {
  33% {
    transform: translateZ(50px);
  }

  50% {
    transform: translateZ(100px);
  }

  60% {
    transform: translateZ(100px);
  }

  75% {
    transform: translateZ(50px);
  }
}

@keyframes shift-back {
  33% {
    transform: rotateY(-180deg) translateZ(50px);
  }

  50% {
    transform: rotateY(-180deg) translateZ(100px);
  }

  60% {
    transform: rotateY(-180deg) translateZ(100px);
  }

  75% {
    transform: rotateY(-180deg) translateZ(50px);
  }
}
</style>


================================================
FILE: loaders/JkHuger_quick-elephant-91.html
================================================
<div class="mini-loader-content">
  <svg viewBox="0 0 500.00001 500.00001" height="100" width="100" xmlns="http://www.w3.org/2000/svg" id="mini-loader">
    <g>
      <path d="M66.734 66.734v366.533h366.532V66.734H66.734zm15 15h336.532v336.533H81.734V81.734z" id="b0">
      </path>
      <path d="M354.16 2.5v143.34H497.5V2.5H354.16zm10 10H487.5v123.34H364.16V12.5z" id="b2">
      </path>
      <path d="M0 2.5v143.34h143.34V2.5H0zm10 10h123.34v123.34H10V12.5z" id="b1">
      </path>
      <path d="M354.16 356.66V500H497.5V356.66H354.16zm10 10H487.5V490H364.16V366.66z" id="b3">
      </path>
      <path d="M0 356.66V500h143.34V356.66H0zm10 10h123.34V490H10V366.66z" id="b4">
      </path>
    </g>
  </svg>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
#b0 {
  animation: b0 4s infinite ease;
  transform-origin: 250px 250px;
}

#b1 {
  animation: b1 4s infinite ease;
}

#b2 {
  animation: b2 4s infinite ease;
}

#b3 {
  animation: b3 4s infinite ease;
}

#b4 {
  animation: b4 4s infinite ease;
}

@keyframes b0 {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(-90deg);
  }

  50% {
    transform: rotate(-180deg);
  }

  75% {
    transform: rotate(-270deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes b1 {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(0, 355px);
  }

  50% {
    transform: translate(355px, 355px);
  }

  75% {
    transform: translate(355px, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes b2 {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-355px, 0);
  }

  50% {
    transform: translate(-355px, 355px);
  }

  75% {
    transform: translate(0, 355px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes b3 {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(0, -355px);
  }

  50% {
    transform: translate(-355px, -355px);
  }

  75% {
    transform: translate(-355px, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes b4 {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(355px, 0);
  }

  50% {
    transform: translate(355px, -355px);
  }

  75% {
    transform: translate(0, -355px);
  }

  100% {
    transform: translate(0, 0);
  }
}
</style>


================================================
FILE: loaders/JkHuger_quick-rattlesnake-57.html
================================================
<div class="container">
  <div class="content">
    <div class="content__container">
      <p class="content__container__text">
        Hello
      </p>
    
      <ul class="content__container__list">
        <li class="content__container__list__item">world !</li>
        <li class="content__container__list__item">coder !</li>
        <li class="content__container__list__item">users !</li>
        <li class="content__container__list__item">uiverse</li>
      </ul>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: animation, loader, text */
.container {
  width: 307px;
  height: 50px;
}

.content {
  display: block;
  position: sticky;
  overflow: hidden;
  font-family: 'Lato', sans-serif;
  font-size: 35px;
  line-height: 40px;
  color: #ecf0f1;
}

.content__container {
  font-weight: 600;
  overflow: hidden;
  height: 40px;
  padding: 0 40px;
}

.content__container:before {
  content: '[';
  left: 0;
}

.content__container:after {
  content: ']';
  position: absolute;
  right: 0;
}

.content__container:after, .content__container:before {
  position: absolute;
  top: -2px;
  color: #16a085;
  font-size: 42px;
  line-height: 40px;
  -webkit-animation-name: opacity;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-name: opacity;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.content__container__text {
  display: inline;
  float: left;
  margin: 0;
}

.content__container__list {
  margin-top: 0;
  padding-left: 110px;
  text-align: left;
  list-style: none;
  -webkit-animation-name: change;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

.content__container__list__item {
  line-height: 40px;
  margin: 0;
}

@keyframes opacity {
  0%, 100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

@keyframes change {
  0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0);
  }

  16.66%, 29.32% {
    transform: translate3d(0, -25%, 0);
  }

  33.32%, 45.98% {
    transform: translate3d(0, -50%, 0);
  }

  49.98%, 62.64% {
    transform: translate3d(0, -75%, 0);
  }

  66.64%, 79.3% {
    transform: translate3d(0, -50%, 0);
  }

  83.3%, 95.96% {
    transform: translate3d(0, -25%, 0);
  }
}
 
</style>


================================================
FILE: loaders/JkHuger_rotten-baboon-90.html
================================================
<div class="loader">
        <span></span>
</div>

<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.loader {
  position: relative;
  overflow: hidden;
  box-shadow: -5px -5px -5px rgba(255, 255, 255, 0.1),
                10px 10px 10px rgba(0, 0, 0, 0.4),
                inset -5px -5px -5px rgba(255, 255, 255, 0.2),
                inset 10px 10px 10px rgba(0, 0, 0, 0.4);
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

.loader:before {
  position: absolute;
  content: '';
  z-index: 10;
  opacity: 10;
  top: 25px;
  left: 25px;
  right: 25px;
  bottom: 25px;
  background-color: #010113;
  border-radius: 50%;
  box-shadow: -5px -5px -5px rgba(255, 255, 255, 0.1),
    10px 10px 10px rgba(0, 0, 0, 0.4),
    inset -5px -5px -5px rgba(255, 255, 255, 0.2),
    inset 10px 10px 10px rgba(0, 0, 0, 0.4);
}

.loader span {
  position: absolute;
  height: 100%;
  width: 100%;
  filter: blur(20px);
  border-radius: 50%;
  background: linear-gradient(#0e11d4, #0b8f84, #d81587);
  animation: loader_41 0.6s linear infinite;
}

@keyframes loader_41 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/JkHuger_selfish-bulldog-36.html
================================================
<div class="section-center">
  <div class="section-path">
    <div class="globe">
      <div class="wrapper">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
 </div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.section-center {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 10;
  transform: translateY(-50%);
  width: 100%;
  margin: 0 auto;
  text-align: center;
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear;
}

.section-path {
  position: relative;
  width: 238px;
  height: 76px;
  border-radius: 35px;
  margin: 0 auto;
  text-align: center;
  background-color: #e6e6e6;
  box-shadow: inset -2px 20px 10px 0 rgba(0,0,0,.06),
		inset -2px 30px 10px 0 rgba(0,0,0,.04);
  border: 3px groove rgba(225,225,225,0.07);
  overflow: hidden;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.globe {
  position: relative;
  width: 66px;
  height: 66px;
  overflow: hidden;
  margin-top: 2px;
  margin-left: 2px;
  border-radius: 50%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.65);
  animation: rotateBall 4s ease infinite;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

@keyframes rotateBall {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(162px);
  }

  100% {
    transform: translateX(0);
  }
}

.globe:after {
  position: absolute;
  width: 5px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  content: '';
  left: 40px;
  top: 15px;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 14px 7px rgba(255, 255, 255, 0.1);
}

.globe:before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  left: 0;
  top: 0;
  border-radius: 50%;
  z-index: 1;
  box-shadow: inset 0 0 15px #1a252f;
  opacity: 0.4;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.globe .wrapper {
  position: absolute;
  width: 528px;
  height: 528px;
  top: 0;
  left: -462px;
  animation: moveBall 4s ease infinite;
}

@keyframes moveBall {
  0% {
    left: -462px;
  }

  50% {
    left: 0;
  }

  100% {
    left: -462px;
  }
}

.globe .wrapper span {
  position: absolute;
  width: 33px;
  height: 528px;
  top: 0;
  left: 0;
  background-color: #5c477d;
  box-shadow: inset 0 0 25px #5c487c;
}

.globe .wrapper span:nth-child(2) {
  left: 33px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(3) {
  left: 66px;
}

.globe .wrapper span:nth-child(4) {
  left: 99px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(5) {
  left: 132px;
}

.globe .wrapper span:nth-child(6) {
  left: 165px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(7) {
  left: 198px;
}

.globe .wrapper span:nth-child(8) {
  left: 231px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(9) {
  left: 264px;
}

.globe .wrapper span:nth-child(10) {
  left: 297px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(11) {
  left: 330px;
}

.globe .wrapper span:nth-child(12) {
  left: 363px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(13) {
  left: 396px;
}

.globe .wrapper span:nth-child(14) {
  left: 429px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(15) {
  left: 462px;
}

.globe .wrapper span:nth-child(16) {
  left: 495px;
  background-color: #503e6d;
}

#switch,
#circle {
  cursor: pointer;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

#switch {
  width: 70px;
  height: 8px;
  margin: 0 auto;
  text-align: center;
  border: 2px solid #8167a9;
  border-radius: 27px;
  background: #000;
  position: relative;
  display: inline-block;
  margin-top: 40px;
  margin-bottom: 20px;
}

#circle {
  position: absolute;
  top: -11px;
  left: 5px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 4px 4px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,53,71,0.07);
  background: #000;
}

.switched {
  border-color: #000 !important;
  background: #8167a9 !important;
}

.switched #circle {
  left: 35px;
  background: #fff;
}

.section-center p span {
  position: relative;
  padding: 4px 10px;
  margin: 0 5px;
}

.section-center p span:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #8167a9;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.section-center p span:after {
  position: absolute;
  content: '';
  width: calc(100% - 10px);
  height: 2px;
  border-radius: 4px;
  background-color: #fff;
  left: 5px;
  top: 50%;
  z-index: 1;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.section-center p span:nth-child(2):after {
  opacity: 0;
}
</style>


================================================
FILE: loaders/JkHuger_silly-termite-54.html
================================================
<div class="loader-pencil-content">
  <div class="btn">
    <svg id="loader-pencil" xmlns="http://www.w3.org/2000/svg" width="667" height="182" viewBox="0 0 677.34762 182.15429">
      <g>
        <path id="body-pencil" d="M128.273 0l-3.9 2.77L0 91.078l128.273 91.076 549.075-.006V.008L128.273 0zm20.852 30l498.223.006V152.15l-498.223.007V30zm-25 9.74v102.678l-49.033-34.813-.578-32.64 49.61-35.225z">
        </path>
        <path id="line" d="M134.482 157.147v25l518.57.008.002-25-518.572-.008z">
        </path>
      </g>
    </svg>
  </div>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.btn {
  align-items: center;
  background: #93e2cb;
  border-radius: 4px;
  display: flex;
  height: 80px;
  justify-content: center;
  padding: 1rem;
  width: 180px;
}

#line {
  animation: linePencil .8s infinite linear;
}

@keyframes linePencil {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-150px);
  }
}
</style>


================================================
FILE: loaders/JkHuger_strong-rat-28.html
================================================
<div class="spinner"></div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.spinner {
  box-shadow: 0 0 0 7px #42a5f5, inset 0 0 0 1px #42a5f5;
  position: relative;
  height: 50px;
  width: 230px;
  border-radius: 8px;
  overflow: hidden;
  animation: rotate_5132 6s linear infinite;
}

.spinner:before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #42a5f5;
  animation: load_5123 6s linear infinite;
}

@keyframes rotate_5132 {
  0%,
  42% {
    transform: rotate(0deg);
  }

  48%,
  92% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes load_5123 {
  0% {
    width: 0;
  }

  40%,
  50% {
    width: 100%;
  }

  90%,
  100% {
    width: 0;
  }
}

</style>


================================================
FILE: loaders/JkHuger_sweet-starfish-100.html
================================================
<ul class="wave-menu">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<style>
/* From Uiverse.io by JkHuger - Source: I've seen on a website and i recreated it but i don't remember. - Tags: animation, music, rhythm */
.wave-menu {
  border: 4px solid #545FE5;
  border-radius: 50px;
  width: 200px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: ease 0.2s;
  position: relative;
  background: #fff;
}

.wave-menu li {
  list-style: none;
  height: 30px;
  width: 4px;
  border-radius: 10px;
  background: #545FE5;
  margin: 0 6px;
  padding: 0;
  animation-name: wave1;
  animation-duration: 0.3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transition: ease 0.2s;
}

.wave-menu:hover > li {
  background: #fff;
}

.wave-menu:hover {
  background: #545FE5;
}

.wave-menu li:nth-child(2) {
  animation-name: wave2;
  animation-delay: 0.2s;
}

.wave-menu li:nth-child(3) {
  animation-name: wave3;
  animation-delay: 0.23s;
  animation-duration: 0.4s;
}

.wave-menu li:nth-child(4) {
  animation-name: wave4;
  animation-delay: 0.1s;
  animation-duration: 0.3s;
}

.wave-menu li:nth-child(5) {
  animation-delay: 0.5s;
}

.wave-menu li:nth-child(6) {
  animation-name: wave2;
  animation-duration: 0.5s;
}

.wave-menu li:nth-child(8) {
  animation-name: wave4;
  animation-delay: 0.4s;
  animation-duration: 0.25s;
}

.wave-menu li:nth-child(9) {
  animation-name: wave3;
  animation-delay: 0.15s;
}

@keyframes wave1 {
  from {
    transform: scaleY(1);
  }

  to {
    transform: scaleY(0.5);
  }
}

@keyframes wave2 {
  from {
    transform: scaleY(0.3);
  }

  to {
    transform: scaleY(0.6);
  }
}

@keyframes wave3 {
  from {
    transform: scaleY(0.6);
  }

  to {
    transform: scaleY(0.8);
  }
}

@keyframes wave4 {
  from {
    transform: scaleY(0.2);
  }

  to {
    transform: scaleY(0.5);
  }
}

</style>


================================================
FILE: loaders/JkHuger_tall-duck-98.html
================================================
<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.container {
  width: 80px;
  height: 100px;
}

.block {
  position: relative;
  box-sizing: border-box;
  float: left;
  margin: 0 10px 10px 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #FFF;
}

.block:nth-child(4n+1) {
  animation: wave_61 2s ease .0s infinite;
}

.block:nth-child(4n+2) {
  animation: wave_61 2s ease .2s infinite;
}

.block:nth-child(4n+3) {
  animation: wave_61 2s ease .4s infinite;
}

.block:nth-child(4n+4) {
  animation: wave_61 2s ease .6s infinite;
  margin-right: 0;
}

@keyframes wave_61 {
  0% {
    top: 0;
    opacity: 1;
  }

  50% {
    top: 30px;
    opacity: .2;
  }

  100% {
    top: 0;
    opacity: 1;
  }
}
</style>


================================================
FILE: loaders/JkHuger_tidy-skunk-55.html
================================================

    <main id="container">
        
        <div class="dots">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dots2">
            <div class="dot2"></div>
            <div class="dot2"></div>
            <div class="dot2"></div>
            <div class="dot2"></div>
            <div class="dot2"></div>
            <div class="dot2"></div>
            <div class="dot2"></div>
            <div class="dot2"></div>
            <div class="dot2"></div>
            <div class="dot2"></div>
        </div>
        <div class="circle"></div>
    </main>

<style>
/* From Uiverse.io by JkHuger - Tags: loader, pacman */
.circle {
  position: relative;
  left: -100px;
  width: 0;
  height: 0;
  border: 50px solid #FDD835;
  border-radius: 50%;
  border-right-color: transparent;
  animation: move 5s linear 0s infinite normal forwards;
}

.circle:before {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  width: 0;
  height: 0;
  border: 50px solid #FDD835;
  border-radius: 50%;
  border-right-color: transparent;
  animation: chomp1 .25s ease-in-out 0s infinite normal forwards;
}

.circle:after {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  width: 0;
  height: 0;
  border: 50px solid #FDD835;
  border-radius: 50%;
  border-right-color: transparent;
  animation: chomp2 .25s ease-in-out 0s infinite normal forwards;
}

.loader {
  position: relative;
  top: 50px;
  width: 300px;
  height: 0px;
  border-top: 10px dotted black;
  animation: loader_4013 5s ease-in-out 0s infinite normal forwards;
}

.dots {
  position: relative;
  top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot {
  position: relative;
  width: 10px;
  height: 10px;
  margin: 0 10px;
  border-radius: 50%;
  background: #1E88E5;
  animation: dot1 5s linear 0s infinite none normal;
}

.dot:nth-child(1) {
  animation-delay: 0s
}

.dot:nth-child(2) {
  animation-delay: 0.25s
}

.dot:nth-child(3) {
  animation-delay: 0.5s
}

.dot:nth-child(4) {
  animation-delay: 0.75s
}

.dot:nth-child(5) {
  animation-delay: 1s
}

.dot:nth-child(6) {
  animation-delay: 1.25s
}

.dot:nth-child(7) {
  animation-delay: 1.5s
}

.dot:nth-child(8) {
  animation-delay: 1.75s
}

.dot:nth-child(9) {
  animation-delay: 1.9s
}

.dot:nth-child(10) {
  animation-delay: 2.1s
}

.dots2 {
  position: relative;
  top: 50px;
  left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot2 {
  position: relative;
  left: -10px;
  width: 10px;
  height: 10px;
  margin: 0 10px;
  border-radius: 50%;
  background: #F44336;
  opacity: 0;
  animation: dot2 5s linear 0s infinite none normal;
}

.dot2:nth-child(10) {
  animation-delay: 2.5s
}

.dot2:nth-child(9) {
  animation-delay: 2.75s
}

.dot2:nth-child(8) {
  animation-delay: 3.0s
}

.dot2:nth-child(7) {
  animation-delay: 3.25s
}

.dot2:nth-child(6) {
  animation-delay: 3.5s
}

.dot2:nth-child(5) {
  animation-delay: 3.75s
}

.dot2:nth-child(4) {
  animation-delay: 4.0s
}

.dot2:nth-child(3) {
  animation-delay: 4.25s
}

.dot2:nth-child(2) {
  animation-delay: 4.5s
}

.dot2:nth-child(1) {
  animation-delay: 4.6s
}
/* #F44336;, #1E88E5, #FDD835; */
@keyframes chomp1 {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes chomp2 {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-45deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes move {
  0%, 100% {
    left: -100px;
  }

  0%, 48% {
    transform: rotateY(0deg);
  }

  50%, 100% {
    transform: rotateY(180deg);
  }

  50% {
    left: 100%;
  }
}

@keyframes loader_4013 {
  0%, 100% {
    border-top: 10px dotted #1E88E5;
  }

  0%, 48% {
    border-top: 10px dotted #1E88E5;
  }

  50%, 100% {
    border-top: 10px dotted #F44336;
  }

  50% {
    border-top: 10px dotted #F44336;
  }
}

@keyframes dot1 {
  0%,4% {
    background: #1E88E5;
    opacity: 1;
  }

  5%,94% {
    background: #F44336;
    opacity: 0;
  }

  95%,100% {
    background: #1E88E5;
    opacity: 1;
  }
}

@keyframes dot2 {
  0%,4% {
    background: #F44336;
    opacity: 1;
  }

  5%,94% {
    opacity: 0;
  }

  95%,100% {
    background: #F44336;
    opacity: 1;
  }
}
</style>


================================================
FILE: loaders/JkHuger_ugly-shrimp-50.html
================================================
<div class="loader">
  <div class="square" id="sq1"></div>
  <div class="square" id="sq2"></div>
  <div class="square" id="sq3"></div>
  <div class="square" id="sq4"></div>
  <div class="square" id="sq5"></div>
  <div class="square" id="sq6"></div>
  <div class="square" id="sq7"></div>
  <div class="square" id="sq8"></div>
  <div class="square" id="sq9"></div>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
@keyframes loader_5191 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.square {
  background: #ddd;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px;
}

#sq1 {
  margin-top: -25px;
  margin-left: -25px;
  animation: loader_5191 675ms ease-in-out 0s infinite alternate;
}

#sq2 {
  margin-top: -25px;
  animation: loader_5191 675ms ease-in-out 75ms infinite alternate;
}

#sq3 {
  margin-top: -25px;
  margin-left: 15px;
  animation: loader_5191 675ms ease-in-out 150ms infinite;
}

#sq4 {
  margin-left: -25px;
  animation: loader_5191 675ms ease-in-out 225ms infinite;
}

#sq5 {
  animation: loader_5191 675ms ease-in-out 300ms infinite;
}

#sq6 {
  margin-left: 15px;
  animation: loader_5191 675ms ease-in-out 375ms infinite;
}

#sq7 {
  margin-top: 15px;
  margin-left: -25px;
  animation: loader_5191 675ms ease-in-out 450ms infinite;
}

#sq8 {
  margin-top: 15px;
  animation: loader_5191 675ms ease-in-out 525ms infinite;
}

#sq9 {
  margin-top: 15px;
  margin-left: 15px;
  animation: loader_5191 675ms ease-in-out 600ms infinite;
}
</style>


================================================
FILE: loaders/JkHuger_unlucky-turkey-82.html
================================================
<div class="content">
  <svg id="loader" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 -10 261 355">
    <g>
      <path d="M230.023 80.02l-.023.03v15.044l-11.96.006v20.75l-19.354 9.142V95.107l-9.93-.04v34.6l-19.417 9.254-.003-43.777-14.146-.016v50.414l-19.354 9.146.002-59.55-9.93.027v59.434l-19.508-9.212V95.15l-13.774-.13-.002 43.766-19.332-9.053V95.12l-9.97.045v29.893l-19.398-9.187V95.177l-11.983.006v15.03l-17.122-8.09 17.078-6.983V80.22L.286 95.257 0 95.12v188.953l123.418 58.308 7.543 3.56 7.542-3.56 123.42-58.306V95.12l-.233.11-31.667-15.06zm-.002 15.076l17.126 7.002-17.125 8.09zM15.083 118.93l108.336 51.177v155.59L15.082 274.52zm231.756 0v155.59l-108.336 51.177v-155.59z">
      </path>
      <path id="pen1" d="M68.26.058L31.934 51.22l.002 58.06H43.9V59.536h19.423v49.742h9.97V59.536H92.62v49.742h11.967V51.22l-1.105-1.554L68.262.058zm6.43 29.72l14.047 19.788H47.784L61.67 30.01l13.02-.23z">
      </path>
      <path id="pen2" d="M130.808 13.936L94.48 65.098l.002 58.058h11.964V73.414h19.424v49.742h9.97V73.414h19.327v49.742h11.967V65.098l-1.105-1.555-35.222-49.607zm6.427 29.72l14.05 19.787H110.33l13.886-19.556 13.02-.23z">
      </path>
      <path id="pen3" d="M193.684.083l-36.328 51.162.002 58.058h11.965V59.56h19.424v49.743h9.97V59.56h19.326v49.743h11.967V51.245l-1.105-1.555L193.685.083zm6.428 29.72l14.05 19.787h-40.955l13.885-19.556 13.02-.23z">
      </path>
    </g>
  </svg>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
#pen1 {
  animation: pen1 2s infinite ease;
}

#pen2 {
  animation: pen2 2s infinite ease;
}

#pen3 {
  animation: pen3 2s infinite ease;
}

#loader {
  animation: loaderColor 5s infinite ease;
}

@keyframes pen1 {
  0% {
    transform: translateY(0px);
  }

  15% {
    transform: translateY(-10px);
  }

  30% {
    transform: translateY(0px);
  }
}

@keyframes pen2 {
  30% {
    transform: translateY(0px);
  }

  45% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(0px);
  }
}

@keyframes pen3 {
  60% {
    transform: translateY(0px);
  }

  75% {
    transform: translateY(-10px);
  }

  90% {
    transform: translateY(0px);
  }
}

@keyframes loaderColor {
  0% {
    fill: #513B56;
  }

  33% {
    fill: #348AA7;
  }

  66% {
    fill: #5DD39E;
  }

  100% {
    fill: #513B56;
  }
}
</style>


================================================
FILE: loaders/JorginoSerra_chatty-earwig-93.html
================================================
  <div id="js-preloader" class="js-preloader">
      <div class="preloader-inner">
          <span class="dot"></span>
          <div class="dots">
              <span></span>
              <span></span>
              <span></span>
          </div>
      </div>
  </div>
<style>
/* From Uiverse.io by JorginoSerra - Tags: loader */
/* 
---------------------------------------------
Loader Style
--------------------------------------------- 
*/

.js-preloader {
  /* You must change postion:relative; for position:fixed;  */
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes dot8567 {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@keyframes dots723423 {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #e75e8d;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot8567 2.8s infinite;
  animation: dot8567 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots723423 2.8s infinite;
  animation: dots723423 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #e75e8d;
  border-radius: 50%;
}

</style>


================================================
FILE: loaders/Juanes200122_fluffy-lizard-32.html
================================================
<div class="container_SevMini">
  <div class="SevMini">
    <svg
      width="74"
      height="90"
      viewBox="0 0 74 90"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M40 76.5L72 57V69.8615C72 70.5673 71.628 71.2209 71.0211 71.5812L40 90V76.5Z"
        fill="#396CAA"
      ></path>
      <path
        d="M34 75.7077L2 57V69.8615C2 70.5673 2.37203 71.2209 2.97892 71.5812L34 90V75.7077Z"
        fill="#396DAC"
      ></path>
      <path d="M34 76.5H40V90H34V76.5Z" fill="#396CAA"></path>
      <path
        d="M3.27905 55.593L35.2806 37.5438C36.3478 36.9419 37.6522 36.9419 38.7194 37.5438L70.721 55.593C71.7294 56.1618 71.7406 57.6102 70.7411 58.1945L39.2712 76.593C37.8682 77.4133 36.1318 77.4133 34.7288 76.593L3.25887 58.1945C2.25937 57.6102 2.27061 56.1618 3.27905 55.593Z"
        fill="#163C79"
        stroke="#396CAA"
      ></path>
      <path
        d="M40 79L72 60V70.4001C72 71.1151 71.6183 71.7758 70.9987 72.1329L40 90V79Z"
        fill="#173D7A"
      ></path>
      <path d="M34 79L3 61V71.5751L34 90V79Z" fill="#0665B2"></path>
      <path
        id="strobe_color1"
        d="M58 72.5L60.5 71V74L58 75.5V72.5Z"
        fill="#FF715E"
      ></path>
      <path
        id="strobe_color2"
        d="M63 69.5L65.5 68V71L63 72.5V69.5Z"
        fill="#17e300b4"
      ></path>
      <path d="M68 66.5L70.5 65V68L68 69.5V66.5Z" fill="#FF715E"></path>
      <path
        d="M40 58.5L72 39V51.8615C72 52.5673 71.628 53.2209 71.0211 53.5812L40 72V58.5Z"
        fill="#396CAA"
      ></path>
      <path
        d="M34 57.7077L2 39V51.8615C2 52.5673 2.37203 53.2209 2.97892 53.5812L34 72V57.7077Z"
        fill="#396DAC"
      ></path>
      <path d="M34 58.5H40V72H34V58.5Z" fill="#396CAA"></path>
      <path
        d="M3.27905 37.593L35.2806 19.5438C36.3478 18.9419 37.6522 18.9419 38.7194 19.5438L70.721 37.593C71.7294 38.1618 71.7406 39.6102 70.7411 40.1945L39.2712 58.593C37.8682 59.4133 36.1318 59.4133 34.7288 58.593L3.25887 40.1945C2.25937 39.6102 2.27061 38.1618 3.27905 37.593Z"
        fill="#163C79"
        stroke="#396CAA"
      ></path>
      <path
        d="M40 61L72 42V52.4001C72 53.1151 71.6183 53.7758 70.9987 54.1329L40 72V61Z"
        fill="#173D7A"
      ></path>
      <path d="M34 61L3 43V53.5751L34 72V61Z" fill="#0665B2"></path>
      <path d="M58 54.5L60.5 53V56L58 57.5V54.5Z" fill="#FF715E"></path>
      <path d="M63 51.5L65.5 50V53L63 54.5V51.5Z" fill="black"></path>
      <path
        id="strobe_color1"
        d="M63 51.5L65.5 50V53L63 54.5V51.5Z"
        fill="#FF715E"
      ></path>
      <path d="M68 48.5L70.5 47V50L68 51.5V48.5Z" fill="#FF715E"></path>
      <path
        d="M40 40.5L72 21V33.8615C72 34.5673 71.628 35.2209 71.0211 35.5812L40 54V40.5Z"
        fill="#396CAA"
      ></path>
      <path
        d="M34 39.7077L2 21V33.8615C2 34.5673 2.37203 35.2209 2.97892 35.5812L34 54V39.7077Z"
        fill="#396DAC"
      ></path>
      <path d="M34 40.5H40V54H34V40.5Z" fill="#396CAA"></path>
      <path
        d="M3.27905 19.593L35.2806 1.54381C36.3478 0.941872 37.6522 0.941872 38.7194 1.54381L70.721 19.593C71.7294 20.1618 71.7406 21.6102 70.7411 22.1945L39.2712 40.593C37.8682 41.4133 36.1318 41.4133 34.7288 40.593L3.25887 22.1945C2.25937 21.6102 2.27061 20.1618 3.27905 19.593Z"
        fill="#124E89"
        stroke="#396CAA"
      ></path>
      <path
        d="M40 43L72 24V34.4001C72 35.1151 71.6183 35.7758 70.9987 36.1329L40 54V43Z"
        fill="#173D7A"
      ></path>
      <path d="M34 43L3 25V35.5751L34 54V43Z" fill="#0665B2"></path>
      <path d="M68 30.5L70.5 29V32L68 33.5V30.5Z" fill="#FF715E"></path>
      <path
        id="strobe_color3"
        d="M58 36.5L60.5 35V38L58 39.5V36.5Z"
        fill="#FF715E"
      ></path>
      <path d="M63 33.5L65.5 32V35L63 36.5V33.5Z" fill="#FF715E"></path>
      <path
        d="M20.1902 22.0719C18.8101 21.3026 18.8252 19.3119 20.2168 18.5636L36.1054 10.0189C37.2884 9.3827 38.7116 9.3827 39.8946 10.0189L55.7832 18.5636C57.1748 19.3119 57.1899 21.3026 55.8098 22.0719L40.4345 30.6429C38.9211 31.4865 37.0789 31.4865 35.5655 30.6429L20.1902 22.0719Z"
        fill="#396CAA"
      ></path>
      <path
        d="M11 52.755C11 51.9801 11.8432 51.4997 12.5098 51.8947L23.5196 58.419C24.1273 58.7792 24.5 59.4332 24.5 60.1396V60.245C24.5 61.0199 23.6568 61.5003 22.9902 61.1053L11.9804 54.581C11.3727 54.2208 11 53.5668 11 52.8604V52.755Z"
        fill="#396CAA"
      ></path>
      <mask
        id="mask0_2_176"
        style="mask-type:alpha"
        maskUnits="userSpaceOnUse"
        x="11"
        y="51"
        width="14"
        height="11"
      >
        <path
          d="M11 52.755C11 51.9801 11.8432 51.4997 12.5098 51.8947L23.5196 58.419C24.1273 58.7792 24.5 59.4332 24.5 60.1396V60.245C24.5 61.0199 23.6568 61.5003 22.9902 61.1053L11.9804 54.581C11.3727 54.2208 11 53.5668 11 52.8604V52.755Z"
          fill="#396CAA"
        ></path>
      </mask>
      <g mask="url(#mask0_2_176)">
        <path
          d="M11.5 52.7417C11.5 51.9803 12.3349 51.5138 12.9833 51.9128L23.5482 58.4143C24.1397 58.7783 24.5 59.4231 24.5 60.1176V61.5L12.4598 54.4195C11.8651 54.0698 11.5 53.4315 11.5 52.7417V52.7417Z"
          fill="#163874"
        ></path>
      </g>
      <mask
        id="mask1_2_176"
        style="mask-type:alpha"
        maskUnits="userSpaceOnUse"
        x="19"
        y="9"
        width="38"
        height="23"
      >
        <path
          d="M20.1902 22.0719C18.8101 21.3026 18.8252 19.3119 20.2168 18.5636L36.1054 10.0189C37.2884 9.3827 38.7116 9.3827 39.8946 10.0189L55.7832 18.5636C57.1748 19.3119 57.1899 21.3026 55.8098 22.0719L40.4345 30.6429C38.9211 31.4865 37.0789 31.4865 35.5655 30.6429L20.1902 22.0719Z"
          fill="#396CAA"
        ></path>
      </mask>
      <g mask="url(#mask1_2_176)">
        <path
          d="M18 21.3115L36.167 11.9451C37.3171 11.3521 38.6829 11.3521 39.833 11.9451L58 21.3115L40.3567 30.7405C38.8841 31.5275 37.1159 31.5275 35.6433 30.7405L18 21.3115Z"
          fill="#173D7A"
        ></path>
      </g>
      <path
        d="M37.447 21.565L35 19.9799L37.6941 18.66L40.141 20.245L37.447 21.565Z"
        fill="#FF715E"
      ></path>
      <path
        d="M48.9738 30.8646L47.0741 29.7745L49.1792 28.684L51.0789 29.7741L48.9738 30.8646Z"
        fill="#173E7B"
      ></path>
      <path
        d="M52.0661 29.0093L50.1635 27.9242L52.2657 26.8282L54.1682 27.9133L52.0661 29.0093Z"
        fill="#173E7B"
      ></path>
      <path
        id="strobe_led1"
        d="M55.1521 27.1464L53.2538 26.054L55.3602 24.9661L57.2585 26.0586L55.1521 27.1464Z"
        fill="#3A6DAB"
      ></path>
    </svg>
  </div>
  <div class="Ghost">
    <svg
      width="60"
      height="36"
      viewBox="0 0 60 36"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M1.96545 19.4296C0.643777 18.6484 0.658726 16.7309 1.99242 15.9705L28.0186 1.12982C29.2467 0.429534 30.7533 0.429533 31.9814 1.12982L58.0076 15.9704C59.3413 16.7309 59.3562 18.6484 58.0346 19.4296L32.5442 34.4962C30.9749 35.4238 29.0251 35.4238 27.4558 34.4962L1.96545 19.4296Z"
        fill="#3C4F6D"
      ></path>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by Juanes200122  - Tags: 3d, loader, svg, creative, box, computer, server */
.container_SevMini {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.Ghost {
  transform: translate(0px, -25px);
  z-index: -1;
  animation: opacidad 4s infinite ease-in-out;
}

@keyframes opacidad {
  0% {
    opacity: 1;
    scale: 1;
  }

  50% {
    opacity: 0.5;
    scale: 0.9;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes estroboscopico {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  51% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes rebote {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes estroboscopico1 {
  0%,
  50%,
  100% {
    fill: rgb(255, 95, 74);
  }

  25%,
  75% {
    fill: rgb(16, 53, 115);
  }
}

@keyframes estroboscopico2 {
  0%,
  50%,
  100% {
    fill: #17e300;
  }

  25%,
  75% {
    fill: #17e300b4;
  }
}

.SevMini {
  animation: rebote 4s infinite ease-in-out;
}

#strobe_led1 {
  animation: estroboscopico 0.5s infinite;
}

#strobe_color1 {
  animation: estroboscopico2 0.8s infinite;
}

#strobe_color3 {
  animation: estroboscopico1 0.8s infinite;
  animation-delay: 3s;
}

</style>
    

================================================
FILE: loaders/Juanes200122_funny-frog-63.html
================================================
<span class="loader"></span>

<style>
/* From Uiverse.io by Juanes200122  - Website: https://cssloaders.github.io/ - Name: css-loader - Tags: simple, animation, red, loading, loader */
.loader {
  width: 48px;
  height: 48px;
  border: 3px dotted #fff;
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 2s linear infinite;
}
.loader::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px dotted #ff3d00;
  border-style: solid solid dotted;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: rotationBack 1s linear infinite;
  transform-origin: center center;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

</style>
    

================================================
FILE: loaders/Juanes200122_great-starfish-26.html
================================================
<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200">
  <g style="order: -1;">
    <polygon
      transform="rotate(45 100 100)"
      stroke-width="1"
      stroke="#d3a410"
      fill="none"
      points="70,70 148,50 130,130 50,150"
      id="bounce"
    ></polygon>
    <polygon
      transform="rotate(45 100 100)"
      stroke-width="1"
      stroke="#d3a410"
      fill="none"
      points="70,70 148,50 130,130 50,150"
      id="bounce2"
    ></polygon>
    <polygon
      transform="rotate(45 100 100)"
      stroke-width="2"
      stroke=""
      fill="#414750"
      points="70,70 150,50 130,130 50,150"
    ></polygon>
    <polygon
      stroke-width="2"
      stroke=""
      fill="url(#gradiente)"
      points="100,70 150,100 100,130 50,100"
    ></polygon>
    <defs>
      <linearGradient y2="100%" x2="10%" y1="0%" x1="0%" id="gradiente">
        <stop style="stop-color: #1e2026;stop-opacity:1" offset="20%"></stop>
        <stop style="stop-color:#414750;stop-opacity:1" offset="60%"></stop>
      </linearGradient>
    </defs>
    <polygon
      transform="translate(20, 31)"
      stroke-width="2"
      stroke=""
      fill="#b7870f"
      points="80,50 80,75 80,99 40,75"
    ></polygon>
    <polygon
      transform="translate(20, 31)"
      stroke-width="2"
      stroke=""
      fill="url(#gradiente2)"
      points="40,-40 80,-40 80,99 40,75"
    ></polygon>
    <defs>
      <linearGradient y2="100%" x2="0%" y1="-17%" x1="10%" id="gradiente2">
        <stop style="stop-color: #d3a51000;stop-opacity:1" offset="20%"></stop>
        <stop
          style="stop-color:#d3a51054;stop-opacity:1"
          offset="100%"
          id="animatedStop"
        ></stop>
      </linearGradient>
    </defs>
    <polygon
      transform="rotate(180 100 100) translate(20, 20)"
      stroke-width="2"
      stroke=""
      fill="#d3a410"
      points="80,50 80,75 80,99 40,75"
    ></polygon>
    <polygon
      transform="rotate(0 100 100) translate(60, 20)"
      stroke-width="2"
      stroke=""
      fill="url(#gradiente3)"
      points="40,-40 80,-40 80,85 40,110.2"
    ></polygon>
    <defs>
      <linearGradient y2="100%" x2="10%" y1="0%" x1="0%" id="gradiente3">
        <stop style="stop-color: #d3a51000;stop-opacity:1" offset="20%"></stop>
        <stop
          style="stop-color:#d3a51054;stop-opacity:1"
          offset="100%"
          id="animatedStop"
        ></stop>
      </linearGradient>
    </defs>
    <polygon
      transform="rotate(45 100 100) translate(80, 95)"
      stroke-width="2"
      stroke=""
      fill="#ffe4a1"
      points="5,0 5,5 0,5 0,0"
      id="particles"
    ></polygon>
    <polygon
      transform="rotate(45 100 100) translate(80, 55)"
      stroke-width="2"
      stroke=""
      fill="#ccb069"
      points="6,0 6,6 0,6 0,0"
      id="particles"
    ></polygon>
    <polygon
      transform="rotate(45 100 100) translate(70, 80)"
      stroke-width="2"
      stroke=""
      fill="#fff"
      points="2,0 2,2 0,2 0,0"
      id="particles"
    ></polygon>
    <polygon
      stroke-width="2"
      stroke=""
      fill="#292d34"
      points="29.5,99.8 100,142 100,172 29.5,130"
    ></polygon>
    <polygon
      transform="translate(50, 92)"
      stroke-width="2"
      stroke=""
      fill="#1f2127"
      points="50,50 120.5,8 120.5,35 50,80"
    ></polygon>
  </g>
</svg>

<style>
/* From Uiverse.io by Juanes200122  - Tags: loader, cube, dark, creative, css effect, bounce animation, card animation */
.container {
  background-color: #414141;
}
@keyframes bounce {
  0%,
  100% {
    translate: 0px 36px;
  }
  50% {
    translate: 0px 46px;
  }
}
@keyframes bounce2 {
  0%,
  100% {
    translate: 0px 46px;
  }
  50% {
    translate: 0px 56px;
  }
}

@keyframes umbral {
  0% {
    stop-color: #d3a5102e;
  }
  50% {
    stop-color: rgba(211, 165, 16, 0.519);
  }
  100% {
    stop-color: #d3a5102e;
  }
}
@keyframes partciles {
  0%,
  100% {
    translate: 0px 16px;
  }
  50% {
    translate: 0px 6px;
  }
}
#particles {
  animation: partciles 4s ease-in-out infinite;
}
#animatedStop {
  animation: umbral 4s infinite;
}
#bounce {
  animation: bounce 4s ease-in-out infinite;
  translate: 0px 36px;
}
#bounce2 {
  animation: bounce2 4s ease-in-out infinite;
  translate: 0px 46px;
  animation-delay: 0.5s;
}

</style>
    

================================================
FILE: loaders/Juanes200122_orange-bat-7.html
================================================
<div class="Buttons"></div>

<style>
/* From Uiverse.io by Juanes200122  - Tags: animation, loader, animated, transition */
.Buttons {
  color: #000;
  width: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l37-1 0.75s infinite linear alternate, l37-2 1.5s infinite linear;
}
@keyframes l37-1 {
  0%,
  20% {
    box-shadow: 30px 0 0 3px, 10px 0 0 3px, -10px 0 0 3px, -30px 0 0 3px;
  }
  60%,
  100% {
    box-shadow: 12px 0 0 3px, 14px 0 0 6px, -14px 0 0 6px, -12px 0 0 3px;
  }
}

@keyframes l37-2 {
  0%,
  25% {
    transform: rotate(0);
  }
  50%,
  100% {
    transform: rotate(0.5turn);
  }
}

</style>
    

================================================
FILE: loaders/Juanes200122_ugly-zebra-9.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Juanes200122 - Tags: simple, animation, loader, circle, html, css */
.loader {
  width: 15px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #000;
  box-shadow: -20px 0px,20px 0px;
  animation: l18 1s infinite;
}

@keyframes l18 {
 
  25% {
    box-shadow: -20px -20px, 20px 20px
  }

  50% {
    box-shadow: 0px -20px,  0px 20px
  }

  75% {
    box-shadow: 20px -20px,-20px 20px
  }

  100% {
    box-shadow: 20px   0px,-20px  0px
  }
}
</style>


================================================
FILE: loaders/JulioCodesSM_silly-grasshopper-43.html
================================================

<div class="loader"></div>
<style>
/* From Uiverse.io by JulioCodesSM - Tags: loader */
/* From uiverse.io by @JulioCodesSM */
.loader {
 width: 50px;
 height: 50px;
 position: relative;
 transform: translateX(-25px);
 /* Compensating for the left of 50px in the keyframe. */
}

.loader::before,
.loader::after {
 content: '';
 position: absolute;
 width: inherit;
 height: inherit;
 border-radius: 50%;
 mix-blend-mode: multiply;
 animation: rotate9 1s infinite cubic-bezier(0.77, 0, 0.175, 1);
}

.loader::before {
 background-color: #fc3f9e;
}

.loader::after {
 background-color: #50e8f3;
 animation-delay: .5s;
}

@keyframes rotate9 {
 0%,100% {
  left: 50px;
 }

 25% {
  transform: scale(.3);
 }

 50% {
  left: 0;
 }

 75% {
  transform: scale(1);
 }
}
</style>


================================================
FILE: loaders/K2-dev21_nervous-otter-12.html
================================================
    <div class="spinner">
    <div class="Spinner"></div>
    </div>
<style>
/* From Uiverse.io by K2-dev21 - Tags: loader */
.spinner {
  background-image: linear-gradient(#acb6e5 35%, #86fde8);
  width: 100px;
  height: 100px;
  animation: spinning21 1.7s linear infinite;
  text-align: center;
  border-radius: 50px;
  filter: blur(1px);
  box-shadow: 0px -5px 20px 0px rgb(186, 66, 255),
        0px 5px 20px 0px rgb(0, 225, 255);
}

.Spinner {
  background-color: rgb(36, 36, 36);
  width: 100px;
  height: 100px;
  border-radius: 50px;
  filter: blur(10px);
}

@keyframes spinning21 {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/KSAplay_helpless-moose-10.html
================================================
<div class="loader">LOADING</div>
<style>
/* From Uiverse.io by KSAplay - Tags: loader */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: bold;
  font-size: 12px;
  color: #f2df95;
  height: 150px;
  width: 250px;
  background-color: #907A24;
  border-style: solid;
  border-width: 50px 250px 50px 0px;
  border-color: #C9B656 #AD9531 #87621B #AD9531;
  animation: camera_effect 4s infinite linear;
}

@keyframes camera_effect {
  0% {
    border-width: 0px 250px 0px 0px;
  }

  10% {
    border-width: 45px 250px 45px 0px;
  }

  20% {
    border-width: 50px 160px 50px 0px;
  }

  30% {
    border-width: 50px 80px 50px 80px;
  }

  45% {
    border-width: 45px 75px 55px 85px;
  }

  55% {
    border-width: 55px 70px 45px 90px;
  }

  65% {
    border-width: 55px 85px 45px 75px;
  }

  70% {
    border-width: 50px 80px 50px 80px;
  }

  80% {
    border-width: 50px 0px 50px 160px;
  }

  90% {
    border-width: 45px 0px 45px 250px;
  }

  100% {
    border-width: 0px 0px 0px 250px;
  }
}
</style>


================================================
FILE: loaders/KSAplay_quiet-snake-78.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by KSAplay - Tags: loader */
.loader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader::before,
.loader::after {
  position: absolute;
  content: "";
  height: 8em;
  width: 8em;
  border: 1em solid #0060fa;
  border-radius: 50%;
  animation: loader_79178 2s linear infinite;
}

.loader::after {
  opacity: 0;
  animation-delay: 1s;
}

@keyframes loader_79178 {
  0% {
    border: 1em solid #0060fa;
    transform: scale(0);
    opacity: 1;
  }

  100% {
    border: 0 solid #0060fa;
    transform: scale(1);
    opacity: 0;
  }
}
</style>


================================================
FILE: loaders/Kemboi-Dun_big-dolphin-10.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Kemboi-Dun - Source: https://uiverse.io/Saiyed-Tanvir/old-mole-38 - Tags: simple, animation, blue, minimalist, loading, loader, cube, animated */
.loader {
  height: 5cm;
  width: 5cm;
  border-radius: 1rem;
  /* border: 1px solid #0a7cbe; */
  box-shadow: inset 0 0 0 #0a7cbe;
  animation: load 4s ease infinite;
}

@keyframes load {
  
  0% {
    box-shadow: inset -5cm -2.5cm 0 #0a7cbe;
  }

  25% {
    box-shadow: inset 5cm -2.5cm 0 #0a7cbe;
  }

  25.01% {
    box-shadow: inset 2.5cm -5cm 0 #0a7cbe;
  }

  50% {
    box-shadow: inset 2.5cm 5cm 0 #0a7cbe;
  }

  50.01% {
    box-shadow: inset 5cm 2.5cm 0 #0a7cbe;
  }

  75% {
    box-shadow: inset -5cm 2.5cm 0 #0a7cbe;
  }

  75.01% {
    box-shadow: inset -2.5cm 5cm 0 #0a7cbe;
  }

  100% {
    box-shadow: inset -2.5cm -5cm 0 #0a7cbe;
  }
}
</style>


================================================
FILE: loaders/KhaledMatalkah_modern-rattlesnake-33.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by KhaledMatalkah - Tags: animation, loader, circle loader, line loader */
.loader {
  width: 100px;
  height: 100px;
  border: 8px solid #ffcc00;
  border-radius: 50%;
  border-top-color: transparent;
  position: relative;
  animation: loaderAnimation 1.5s linear infinite;
}

.loader::before,
.loader::after {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 50%;
  top: 50%;
  background-color: #ffcc00;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.loader::before {
  animation: loaderAnimationBefore 1s linear infinite;
}

.loader::after {
  animation: loaderAnimationAfter 1s linear infinite;
}

@keyframes loaderAnimation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes loaderAnimationBefore {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes loaderAnimationAfter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
}

</style>


================================================
FILE: loaders/KhaledMatalkah_purple-mule-91.html
================================================
<div class="loader">
  <div class="loader-inner"></div>
</div>

<style>
/* From Uiverse.io by KhaledMatalkah - Tags: animation, 3d, loader, animated */
.loader {
  height: 60px;
  width: 60px;
  position: relative;
  animation: loaderAnimation 1.5s infinite linear;
}

.loader-inner {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-color: #3053c7;
  border-radius: 50%;
  animation: innerAnimation 1s infinite ease-in-out;
}

@keyframes loaderAnimation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes innerAnimation {
  0% {
    width: 0;
    opacity: 0;
  }

  50% {
    width: 100%;
    opacity: 1;
  }

  100% {
    width: 0;
    opacity: 0;
  }
}

</style>


================================================
FILE: loaders/Lanicet_fluffy-otter-43.html
================================================
<div id="myProgress">
  <div id="myBar"></div>
</div>
<style>
/* From Uiverse.io by Lanicet - Tags: loader */
#myProgress {
  width: 100px;
  max-width: 200px;
  background: #F4F4F4;
  box-shadow: inset -1px 1px 2px rgba(200, 200, 200, 0.2), inset 1px -1px 2px rgba(200, 200, 200, 0.2), inset -1px -1px 2px rgba(255, 255, 255, 0.9), inset 1px 1px 3px rgba(200, 200, 200, 0.9);
  border-radius: 28px;
  overflow: hidden;
}

#myBar {
  width: 10%;
  height: 30px;
  background: rgba(0, 209, 0, 0.35);
  border-radius: 28px;
  text-align: center;
  line-height: 30px;
  color: white;
  transition: 0.5s;
  animation: loading82341 10s ease infinite;
}

@keyframes loading82341 {
  0% {
    width: 0%;
  }

  10% {
    width: 10%;
  }

  50% {
    width: 40%;
  }

  60% {
    width: 60%;
  }

  100% {
    width: 100%;
  }
}
</style>


================================================
FILE: loaders/LeonKohli_ordinary-rat-31.html
================================================
<div class="loader">
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
</div>

<style>
/* From Uiverse.io by LeonKohli  - Tags: gradient, loader, rounded, gradients */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.bubble {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-image: linear-gradient(to right, #ff6b81, #ff9a44);
  margin: 0 5px;
  animation: bubbleAnimation 1.5s ease-in-out infinite;
}

@keyframes bubbleAnimation {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(2);
    opacity: 0.5;
  }
}

</style>
    

================================================
FILE: loaders/Leoodaviid_lazy-mole-28.html
================================================
<div class="loader-container">
  <div class="loader"></div>
</div>
<style>
/* From Uiverse.io by Leoodaviid - Tags: loader */
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
  }

  50% {
    transform: rotate(180deg);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
  }

  100% {
    transform: rotate(360deg);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
  }
}
</style>


================================================
FILE: loaders/Li-Deheng_bright-firefox-37.html
================================================
<div class="loader">
  <div class="circle">
    <div class="dot"></div>
    <div class="outline"></div>
  </div>
  <div class="circle">
    <div class="dot"></div>
    <div class="outline"></div>
  </div>
  <div class="circle">
    <div class="dot"></div>
    <div class="outline"></div>
  </div>
  <div class="circle">
    <div class="dot"></div>
    <div class="outline"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Li-Deheng - Tags: animation, loader, dots, animated, pulse, infinite, waves, dot loader */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  --color: hsl(0, 0%, 87%);
  --animation: 2s ease-in-out infinite;
}

.loader .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 20px;
  height: 20px;
  border: solid 2px var(--color);
  border-radius: 50%;
  margin: 0 10px;
  background-color: transparent;
  animation: circle-keys var(--animation);
}

.loader .circle .dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color);
  animation: dot-keys var(--animation);
}

.loader .circle .outline {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: outline-keys var(--animation);
}

.circle:nth-child(2) {
  animation-delay: 0.3s;
}

.circle:nth-child(3) {
  animation-delay: 0.6s;
}

.circle:nth-child(4) {
  animation-delay: 0.9s;
}

.circle:nth-child(5) {
  animation-delay: 1.2s;
}

.circle:nth-child(2) .dot {
  animation-delay: 0.3s;
}

.circle:nth-child(3) .dot {
  animation-delay: 0.6s;
}

.circle:nth-child(4) .dot {
  animation-delay: 0.9s;
}

.circle:nth-child(5) .dot {
  animation-delay: 1.2s;
}

.circle:nth-child(1) .outline {
  animation-delay: 0.9s;
}

.circle:nth-child(2) .outline {
  animation-delay: 1.2s;
}

.circle:nth-child(3) .outline {
  animation-delay: 1.5s;
}

.circle:nth-child(4) .outline {
  animation-delay: 1.8s;
}

.circle:nth-child(5) .outline {
  animation-delay: 2.1s;
}

@keyframes circle-keys {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes dot-keys {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes outline-keys {
  0% {
    transform: scale(0);
    outline: solid 20px var(--color);
    outline-offset: 0;
    opacity: 1;
  }

  100% {
    transform: scale(1);
    outline: solid 0 transparent;
    outline-offset: 20px;
    opacity: 0;
  }
}
</style>


================================================
FILE: loaders/LightAndy1_helpless-fireant-0.html
================================================
<div class="loader">
  <svg
    viewBox="0 0 256 256"
    class="star star1"
    height="32"
    width="32"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
    ></path>
  </svg>
  <svg
    viewBox="0 0 256 256"
    class="star star2"
    height="32"
    width="32"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
    ></path>
  </svg>
  <svg
    viewBox="0 0 256 256"
    class="star star3"
    height="32"
    width="32"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
    ></path>
  </svg>
</div>

<style>
/* From Uiverse.io by LightAndy1  - Tags: simple, icon, animation, yellow, loader, smooth, dark, stars */
.loader {
  user-select: none;
}

.star {
  opacity: 0;
  fill: #f8de7e;
  animation: loader 2s infinite alternate;
}

.star2 {
  height: 20px;
  margin-left: -10px;
  animation-delay: 0.25s;
}

.star3 {
  height: 16px;
  margin-left: -15px;
  animation-delay: 0.5s;
}

@keyframes loader {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(50px) rotate (0deg);
  }
  10% {
    opacity: 0;
    transform: translateY(0) translateX(50px) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translateY(-20px) translateX(0) rotate(360deg);
  }
}

</style>
    

================================================
FILE: loaders/Lissy2019_fat-wasp-24.html
================================================
<div class="loader">
  <svg height="0" width="0" viewBox="0 0 100 100" class="absolute">
    <defs class="s-xJBuHA073rTt" xmlns="http://www.w3.org/2000/svg">
      <linearGradient
        class="s-xJBuHA073rTt"
        gradientUnits="userSpaceOnUse"
        y2="2"
        x2="0"
        y1="62"
        x1="0"
        id="b"
      >
        <stop class="s-xJBuHA073rTt" stop-color="#0369a1"></stop>
        <stop class="s-xJBuHA073rTt" stop-color="#67e8f9" offset="1.5"></stop>
      </linearGradient>
      <linearGradient
        class="s-xJBuHA073rTt"
        gradientUnits="userSpaceOnUse"
        y2="0"
        x2="0"
        y1="64"
        x1="0"
        id="c"
      >
        <stop class="s-xJBuHA073rTt" stop-color="#0369a1"></stop>
        <stop class="s-xJBuHA073rTt" stop-color="#22d3ee" offset="1"></stop>
        <animateTransform
          repeatCount="indefinite"
          keySplines=".42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1"
          keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
          dur="8s"
          values="0 32 32;-270 32 32;-270 32 32;-540 32 32;-540 32 32;-810 32 32;-810 32 32;-1080 32 32;-1080 32 32"
          type="rotate"
          attributeName="gradientTransform"
        ></animateTransform>
      </linearGradient>
      <linearGradient
        class="s-xJBuHA073rTt"
        gradientUnits="userSpaceOnUse"
        y2="2"
        x2="0"
        y1="62"
        x1="0"
        id="d"
      >
        <stop class="s-xJBuHA073rTt" stop-color="#38bdf8"></stop>
        <stop class="s-xJBuHA073rTt" stop-color="#075985" offset="1.5"></stop>
      </linearGradient>
    </defs>
  </svg>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 100 100"
    width="100"
    height="100"
    class="inline-block"
  >
    <path
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="8"
      stroke="url(#b)"
      d="M 20,20 L 80,20 
      L 80,27 L 27,27 L 27,50
      L 70,50 L 70,57 
      L 25,57 L 25,80 
      L 80,80 L 80,87 L 20,87 Z"
      class="dash"
      id="E"
      pathLength="360"
    ></path>
  </svg>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    style="--rotation-duration:0ms; --rotation-direction:normal;"
    viewBox="0 0 100 100"
    width="100"
    height="100"
    class="inline-block"
  >
    <path
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="12"
      stroke="url(#d)"
      d="M 20,20 L 50,80 L 80,20"
      class="dash"
      id="v"
      pathLength="360"
    ></path>
  </svg>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 100 100"
    width="100"
    height="100"
    class="inline-block"
  >
    <path
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="11"
      stroke="url(#c)"
      d="M 50,15  
      A 35,35 0 0 1 85,50  
      A 35,35 0 0 1 50,85  
      A 35,35 0 0 1 15,50  
      A 35,35 0 0 1 50,15 Z"
      class="spin"
      id="o"
      pathLength="360"
    ></path>
  </svg>
</div>

<style>
/* From Uiverse.io by Lissy2019  - Website: https://uiverse.io/SelfMadeSystem/pretty-treefrog-77 - Name: SelfMadeSystem - Tags: animation, gradient, loader, spinner, text animation, animated, gradients, svg */
.absolute {
  position: absolute;
}

.inline-block {
  display: inline-block;
}

.loader {
  display: flex;
  margin: 0.25em 0;
}

.w-2 {
  width: 0.5em;
}

.dash {
  animation: dashArray 2s ease-in-out infinite, dashOffset 2s linear infinite;
}

.spin {
  animation: spinDashArray 2s ease-in-out infinite, spin 8s ease-in-out infinite,
    dashOffset 2s linear infinite;
  transform-origin: center;
}

@keyframes dashArray {
  0% {
    stroke-dasharray: 0 1 359 0;
  }

  50% {
    stroke-dasharray: 0 359 1 0;
  }

  100% {
    stroke-dasharray: 359 1 0 0;
  }
}

@keyframes spinDashArray {
  0% {
    stroke-dasharray: 270 90;
  }

  50% {
    stroke-dasharray: 0 360;
  }

  100% {
    stroke-dasharray: 250 90;
  }
}

@keyframes dashOffset {
  0% {
    stroke-dashoffset: 385;
  }

  100% {
    stroke-dashoffset: 5;
  }
}

@keyframes spin {
  0% {
    rotate: 0deg;
  }

  12.5%,
  25% {
    rotate: 270deg;
  }

  37.5%,
  50% {
    rotate: 540deg;
  }

  62.5%,
  75% {
    rotate: 810deg;
  }

  87.5%,
  100% {
    rotate: 1080deg;
  }
}

</style>
    

================================================
FILE: loaders/Lmickk2_giant-lion-94.html
================================================
<div class="loader">
  <div class="box-load1"></div>
  <div class="box-load2"></div>
  <div class="box-load3"></div>
</div>
<style>
/* From Uiverse.io by Lmickk2 - Tags: loader, light, animated */
.loader {
  display: flex;
  transition: all 0.4s;
}

.loader div {
  margin-left: 0.8rem;
  background-color: transparent;
  box-shadow: 0px 2px 2px black;
  border-radius: 3em;
  height: 1rem;
  width: 2rem;
}

.box-load1 {
  animation: brighten 1.5s infinite;
}

.box-load2 {
  animation: brighten 1.5s infinite;
  animation-delay: .3s;
}

.box-load3 {
  animation: brighten 1.5s infinite;
  animation-delay: .6s;
}

@keyframes brighten {
  100% {
    background-color: black;
    box-shadow: none;
  }
}

</style>


================================================
FILE: loaders/Lmickk2_lovely-fireant-30.html
================================================
<div class="loader">
  <div class="box-load1"></div>
  <div class="box-load2"></div>
  <div class="box-load3"></div>
</div>
<style>
/* From Uiverse.io by Lmickk2 - Tags: loading, loader, light&dark */
.loader {
  display: flex;
  transition: all 0.4s;
}

.loader div {
  margin-left: 0.8rem;
  background-color: rgb(34, 34, 34);
  box-shadow: inset 2px 2px 10px black;
  border-radius: 100%;
  height: 1rem;
  width: 1rem;
}

.box-load1 {
  animation: brighten 1.2s infinite;
}

.box-load2 {
  animation: brighten 1.2s infinite;
  animation-delay: .2s;
}

.box-load3 {
  animation: brighten 1.2s infinite;
  animation-delay: .4s;
}

@keyframes brighten {
  100% {
    background-color: rgb(165, 165, 165);
    box-shadow: none;
  }
}

</style>


================================================
FILE: loaders/Markoslc_gentle-termite-56.html
================================================
<div class="loader">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>
<style>
/* From Uiverse.io by Markoslc - Tags: loader */
.item1, .item2, .item3 {
  position: absolute;
  background-color: transparent;
  left: calc(50% - (var(--size) / 2));
  top: calc(50% - (var(--size) / 2));
  height: var(--size);
  width: var(--size);
  border-radius: 50%;
}

.loader .item1 {
  --size: 90px;
  animation: size1_1 2.5s infinite alternate;
  z-index: 1;
}

.loader .item2 {
  --size: 60px;
  animation: size1_2 2.5s infinite alternate;
  z-index: 2;
}

.loader .item3 {
  --size: 30px;
  animation: size1_3 2.5s infinite alternate;
  z-index: 3;
}

@keyframes size1_1 {
  0%,
  10% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
    box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;
  }
}

@keyframes size1_2 {
  0%,
  40% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
    box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;
  }
}

@keyframes size1_3 {
  0%,
  70% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
    box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;
  }
}
</style>


================================================
FILE: loaders/MbaziiraRonald_green-insect-40.html
================================================
 <div class="loader"></div>
<style>
/* From Uiverse.io by MbaziiraRonald - Tags: loader */
.loader {
  height: 50px;
  width: 50px;
  background: transparent;
  border: red 3px solid;
  border-top: transparent;
  border-radius: 50%;
  animation: animate81323 0.8s linear infinite;
}

@keyframes animate81323 {
  0% {
    border: 3px solid rgb(255, 75, 75);
    border-top: transparent;
    border-left: transparent;
    transform: rotate(0deg);
  }

  50% {
    border: 3px dashed rgb(240, 41, 240);
    border-top: transparent;
    border-left: transparent;
    transform: rotate(270deg);
  }

  100% {
    border: 3px dotted rgb(28, 228, 28);
    border-top: transparent;
    border-left: transparent;
    transform: rotate(360deg);
  }
}

</style>


================================================
FILE: loaders/Mhyar-nsi_lucky-chicken-20.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Mhyar-nsi - Tags: loader */
.loader {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin: 10px;
}

@keyframes loader-bubbles {
  0% {
    box-shadow: 0 -10px #3b82f6,
                3px 0 #3b82f6,
                5px 0 #3b82f6;
  }

  30% {
    box-shadow: 3px -20px rgba(239,223,255,0),
                5px -10px #3b82f6,
                5px 0 #3b82f6;
  }

  60% {
    box-shadow: 3px 0 rgba(239,223,255,0),
                4px -20px rgba(239,223,255,0),
                3px -10px #3b82f6;
  }

  61% {
    box-shadow: 3px 0 #3b82f6,
                4px -20px rgba(239,223,255,0),
                3px -10px #3b82f6;
  }

  100% {
    box-shadow: 0 -10px #3b82f6,
                4px -20px rgba(239,223,255,0),
                5px -20px rgba(239,223,255,0);
  }
}

.loader {
  width: 10px;
  height: 20px;
  margin-left: 20px;
  margin-right: 20px;
  background: #3b82f6;
}

.loader:before,
.loader:after {
  content: '';
  position: absolute;
}

.loader:before {
  top: -8px;
  left: -13px;
  width: 0;
  height: 0;
  border: 18px solid transparent;
  border-bottom: 20px solid #3b82f6;
  border-radius: 3px;
}

.loader:after {
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  background: #3b82f6;
  border-radius: 50%;
  animation: loader-bubbles 1s linear infinite forwards;
}
</style>


================================================
FILE: loaders/Mike11jr_ancient-mule-46.html
================================================
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
</div>
<style>
/* From Uiverse.io by Mike11jr - Tags: loader */
.spinner {
 flex-direction: row;
 display: flex;
 align-items: center;
 justify-content: center;
}

.dot1, .dot2, .dot3 {
 width: 15px;
 height: 15px;
 border: double;
 border-color: white;
 border-radius: 50%;
 margin: 10px;
}

.dot1 {
 animation: jump765 1.6s -0.32s linear infinite;
 background: #2495ff;
}

.dot2 {
 animation: jump765 1.6s -0.16s linear infinite;
 background: #2495ff;
}

.dot3 {
 animation: jump765 1.6s linear infinite;
 background: #2495ff;
}

@keyframes jump765 {
 0%, 80%, 100% {
  -webkit-transform: scale(0);
  transform: scale(0);
 }

 40% {
  -webkit-transform: scale(2.0);
  transform: scale(2.0);
 }
}


</style>


================================================
FILE: loaders/Mike11jr_fluffy-mule-69.html
================================================
<div class="spinner">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div></div>
<style>
/* From Uiverse.io by Mike11jr - Tags: loader */
.spinner {
 width: 60px;
 height: 60px;
 position: relative;
}

.spinner .dot {
 position: absolute;
 inset: 0;
 display: flex;
 justify-content: center;
}

.spinner .dot::after {
 content: "";
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background-color: rgb(12, 180, 231);
}

@keyframes spin {
 to {
  transform: rotate(360deg);
 }
}

.spinner .dot {
 animation: spin 2s infinite;
}

.spinner .dot:nth-child(2) {
 animation-delay: 100ms;
}

.spinner .dot:nth-child(3) {
 animation-delay: 200ms;
}

.spinner .dot:nth-child(4) {
 animation-delay: 300ms;
}

.spinner .dot:nth-child(5) {
 animation-delay: 400ms;
}
</style>


================================================
FILE: loaders/Mike11jr_nice-dog-2.html
================================================
<div class="loader-wrapper">
<div class="loader">
  <div class="loader loader-inner"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Mike11jr - Tags: loader */
.loader-wrapper {
 width: 60px;
 height: 60px;
}

.loader {
 box-sizing: border-box;
 width: 100%;
 height: 100%;
 border: 10px solid #162534;
 border-top-color: #4bc8eb;
 border-bottom-color: #f13a8f;
 border-radius: 50%;
 animation: rotate0925 5s linear infinite;
}

.loader-inner {
 border-top-color: #36f372;
 border-bottom-color: #fff;
 animation-duration: 2.5s;
}

@keyframes rotate0925 {
 0% {
  transform: scale(1) rotate(360deg);
 }

 50% {
  transform: scale(.8) rotate(-360deg);
 }

 100% {
  transform: scale(1) rotate(360deg);
 }
}
</style>


================================================
FILE: loaders/MikeAndrewDesigner_fluffy-dragonfly-21.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by MikeAndrewDesigner - Tags: animation, loader, circle loader, spin, loading animation */
.loader {
  width: 5.4em;
  height: 5.4em;
  border: 0.4em solid rgb(84, 84, 84);
  border-left-color: #a23ffc;
  border-radius: 45%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/MiniJohan_quick-otter-37.html
================================================
<div class="loader">
  <li class="orb"></li>
  <li class="orb"></li>
  <li class="orb"></li>
  <li class="orb"></li>
  <li class="orb"></li>
  <li class="orb"></li>
  <li class="orb"></li>
  <li class="orb"></li>
  <li class="orb"></li>
</div>

<style>
/* From Uiverse.io by MiniJohan  - Tags: simple, animation, white, loader */
.loader {
  display: flex;
  max-width: 350;
  position: relative;
  gap: 20px;
  justify-content: space-evenly;
  animation: rotate 3s linear infinite;
  color: white;
}

.loading {
}

.orb {
  width: 25px;
  height: 25px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  position: absolute;
}

.orb:nth-child(1) {
  top: 20px;
  left: 20px;
  animation: bounce2 1.5s ease 1s infinite;
}

.orb:nth-child(2) {
  top: 20px;
  right: 20px;
  animation: bounce2 1.5s ease 1s infinite;
}

.orb:nth-child(3) {
  bottom: 20px;
  left: 20px;
  animation: bounce2 1.5s ease 1s infinite;
}

.orb:nth-child(4) {
  bottom: 20px;
  right: 20px;
  animation: bounce2 1.5s ease 1s infinite;
}

.orb:nth-child(5) {
  top: 20px;
  animation: bounce2 1.5s ease 1s infinite;
}

.orb:nth-child(6) {
  bottom: 20px;
  animation: bounce2 1.5s ease 1s infinite;
}

.orb:nth-child(7) {
  left: 20px;
  top: -12.5px;
  animation: bounce2 1.5s ease 1s infinite;
}

.orb:nth-child(8) {
  right: 20px;
  top: -12.5px;
  animation: bounce2 1.5s ease 1s infinite;
}

.orb:nth-child(9) {
  top: -12.5px;
  animation: bounce 1.5s ease 1.5s infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.5);
  }
}

@keyframes bounce2 {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.5);
  }
}

</style>
    

================================================
FILE: loaders/MiniJohan_sweet-warthog-36.html
================================================
<div class="coin">
  <span class="engraving">$</span>
</div>

<style>
/* From Uiverse.io by MiniJohan  - Tags: animation, loader, flip, gold */
.body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  margin: 0;
  background-color: #f0f0f0;
}

.coin {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #d4af37; /* Coin color */
  border-radius: 50%;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); /* Coin shadow */
  background-image: radial-gradient(
    circle at 50% 120%,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 80%
  ); /* Coin texture */
  animation: flip 1s infinite;
}

.engraving {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.5); /* Engraving color */
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); /* Engraving shadow */
}

@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

</style>
    

================================================
FILE: loaders/MrLegendGaming_unlucky-goat-90.html
================================================
<div class="loading-screen">
  <div class="solid">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
</div>

<style>
/* From Uiverse.io by MrLegendGaming  - Website: https://codepen.io/mblase75/pen/BjBmzE - Name: M Blase - Tags: 3d, loader, colorful, creative, css, advanced, multicolor, 3d loader */
:root {
  --i: 0;
}

.loading-screen[move="1"] {
  animation: disappear 2s ease-in-out forwards;
}
.loading-screen[move="2"] {
  animation: reappear 2s ease-in-out forwards;
}

@keyframes disappear {
  0% {
    opacity: 100%;
    transform: translateY(0%);
  }
  50% {
    background-color: transparent;
    opacity: 0%;
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes reappear {
  0% {
    opacity: 0%;
    transform: translateY(100%);
    background-color: transparent;
  }
  50% {
    opacity: 100%;
  }
  100% {
    background-color: #d8e0d8;
    transform: translateY(0%);
  }
}

.solid {
  position: relative;
  width: 100px;
  height: 100px;
  animation: spin 16s infinite linear;
  transform-style: preserve-3d;
}
.solid .side {
  position: absolute;
  left: 0;
  bottom: 50%;
  border-bottom: 86.6px solid black;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  transform-origin: 50% 0%;
}
.solid .side:nth-child(1) {
  transform: translateY(-9.25px) rotateY(72deg) rotateX(52.62deg);
  border-bottom-color: rgba(134, 7, 147, 0.4);
}
.solid .side:nth-child(2) {
  transform: translateY(-9.25px) rotateY(144deg) rotateX(52.62deg);
  border-bottom-color: rgba(42, 160, 39, 0.4);
}
.solid .side:nth-child(3) {
  transform: translateY(-9.25px) rotateY(216deg) rotateX(52.62deg);
  border-bottom-color: rgba(209, 83, 84, 0.4);
}
.solid .side:nth-child(4) {
  transform: translateY(-9.25px) rotateY(288deg) rotateX(52.62deg);
  border-bottom-color: rgba(244, 202, 236, 0.4);
}
.solid .side:nth-child(5) {
  transform: translateY(-9.25px) rotateY(360deg) rotateX(52.62deg);
  border-bottom-color: rgba(73, 232, 200, 0.4);
}
.solid .side:nth-child(6) {
  transform: translateY(180.9px) rotateY(468deg) rotateX(127.38deg);
  border-bottom-color: rgba(105, 77, 3, 0.4);
}
.solid .side:nth-child(7) {
  transform: translateY(180.9px) rotateY(540deg) rotateX(127.38deg);
  border-bottom-color: rgba(255, 45, 71, 0.4);
}
.solid .side:nth-child(8) {
  transform: translateY(180.9px) rotateY(612deg) rotateX(127.38deg);
  border-bottom-color: rgba(177, 172, 3, 0.4);
}
.solid .side:nth-child(9) {
  transform: translateY(180.9px) rotateY(684deg) rotateX(127.38deg);
  border-bottom-color: rgba(175, 200, 228, 0.4);
}
.solid .side:nth-child(10) {
  transform: translateY(180.9px) rotateY(756deg) rotateX(127.38deg);
  border-bottom-color: rgba(187, 195, 141, 0.4);
}
.solid .side:nth-child(11) {
  transform: translateY(43.3px) rotateY(828deg) translateZ(85.05px)
    rotateX(-10.81deg);
  border-bottom-color: rgba(212, 249, 1, 0.4);
}
.solid .side:nth-child(12) {
  transform: translateY(43.3px) rotateY(900deg) translateZ(85.05px)
    rotateX(-10.81deg);
  border-bottom-color: rgba(85, 161, 43, 0.4);
}
.solid .side:nth-child(13) {
  transform: translateY(43.3px) rotateY(972deg) translateZ(85.05px)
    rotateX(-10.81deg);
  border-bottom-color: rgba(15, 209, 47, 0.4);
}
.solid .side:nth-child(14) {
  transform: translateY(43.3px) rotateY(1044deg) translateZ(85.05px)
    rotateX(-10.81deg);
  border-bottom-color: rgba(131, 69, 22, 0.4);
}
.solid .side:nth-child(15) {
  transform: translateY(43.3px) rotateY(1116deg) translateZ(85.05px)
    rotateX(-10.81deg);
  border-bottom-color: rgba(43, 13, 170, 0.4);
}
.solid .side:nth-child(16) {
  transform: translateY(128.35px) rotateY(1152deg) rotateZ(180deg)
    translateZ(85.05px) rotateX(-10.81deg);
  border-bottom-color: rgba(68, 85, 95, 0.4);
}
.solid .side:nth-child(17) {
  transform: translateY(128.35px) rotateY(1224deg) rotateZ(180deg)
    translateZ(85.05px) rotateX(-10.81deg);
  border-bottom-color: rgba(159, 76, 176, 0.4);
}
.solid .side:nth-child(18) {
  transform: translateY(128.35px) rotateY(1296deg) rotateZ(180deg)
    translateZ(85.05px) rotateX(-10.81deg);
  border-bottom-color: rgba(54, 95, 172, 0.4);
}
.solid .side:nth-child(19) {
  transform: translateY(128.35px) rotateY(1368deg) rotateZ(180deg)
    translateZ(85.05px) rotateX(-10.81deg);
  border-bottom-color: rgba(162, 92, 204, 0.4);
}
.solid .side:nth-child(20) {
  transform: translateY(128.35px) rotateY(1440deg) rotateZ(180deg)
    translateZ(85.05px) rotateX(-10.81deg);
  border-bottom-color: rgba(218, 1, 139, 0.4);
}

@keyframes spin {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
  }
}

</style>
    

================================================
FILE: loaders/MyNameJeremy_quick-turkey-64.html
================================================
<div class="neomorph-spinner">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
/* From Uiverse.io by MyNameJeremy - Tags: loader */
.neomorph-spinner {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin: auto;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
}

.neomorph-spinner > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #004dff;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
  animation: spin_5113 1s ease infinite;
}

.neomorph-spinner > div:nth-child(1) {
  transform: rotate(0deg);
}

.neomorph-spinner > div:nth-child(2) {
  transform: rotate(90deg);
}

.neomorph-spinner > div:nth-child(3) {
  transform: rotate(180deg);
}

.neomorph-spinner > div:nth-child(4) {
  transform: rotate(270deg);
}

@keyframes spin_5113 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
</style>


================================================
FILE: loaders/MyNameJeremy_silent-deer-42.html
================================================
<div class="spinner-container">
  <div class="spinner-inner">
    <div class="spinner-outer">
      <div class="spinner-inner-1"></div>
      <div class="spinner-inner-2"></div>
      <div class="spinner-inner-3"></div>
      <div class="spinner-inner-4"></div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by MyNameJeremy - Tags: loader */
.spinner-container {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.spinner-inner {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);
}

.spinner-outer {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: -10px -10px 20px 0px rgba(255, 255, 255, 0.5), 10px 10px 20px 0px rgba(0, 0, 0, 0.2);
  animation: spinner-rotate_51023 2s ease infinite;
}

.spinner-inner-1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0
  0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);
  z-index: 10;
  animation: spinner-rotate_51023 2s ease infinite;
}

.spinner-inner-2 {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);
  z-index: 10;
  animation: spinner-rotate_51023 2s ease infinite;
}

.spinner-inner-3 {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);
  z-index: 10;
  animation: spinner-rotate_51023 2s ease infinite;
}

.spinner-inner-4 {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);
  z-index: 10;
  animation: spinner-rotate_51023 2s ease infinite;
}

@keyframes spinner-rotate_51023 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/Nadabasuony_cowardly-lionfish-57.html
================================================
<div class="loader">
  <div class="l"></div>
  <div class="l"></div>
  <div class="l"></div>
  <div class="l"></div>
  <div class="l"></div>
  <div class="l"></div>
  <div class="l"></div>
  <div class="l"></div>
  <div class="l"></div>
</div>
<style>
/* From Uiverse.io by Nadabasuony - Tags: loader */
.loader {
  display: flex;
}

.l,.l:nth-child(9) {
  margin: 0.15em;
  border-radius: 5em;
  width: 0.4em;
  background-color: #f12711;
  height: 3em;
  box-shadow: 1px 1px 4px black;
  animation: load_5186 cubic-bezier(.41,.44,.72,.69) 2s infinite;
}

.l:nth-child(2), 
.l:nth-child(8) {
  background-color: #f24e13;
  animation-delay: .25s;
}

.l:nth-child(3), 
.l:nth-child(7) {
  background-color: #f36915;
  animation-delay: .5s;
}

.l:nth-child(4), 
.l:nth-child(6) {
  background-color: #f48c17;
  animation-delay: .75s;
}

.l:nth-child(5) {
  background-color: #f5af19;
  animation-delay: 1s;
}

@keyframes load_5186 {
  0% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(-1);
  }
}
</style>


================================================
FILE: loaders/Navarog21_little-falcon-37.html
================================================
<div class="loader">
    <div id="first">
        <div id="second">
            <div id="third">
            </div>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by Navarog21 - Tags: loader */
.loader {
  background-color: black;
  position: relative;
  width: 2.5em;
  height: 2.5em;
  transform-origin: center;
  transition: 1s;
  border-radius: 50px;
  box-shadow: inset 0px 0px 10px purple,
  inset 5px 5px 12px rgba(44, 0, 114, 0.8),
  inset 8px 8px 1px rgba(160, 120, 255, 0.7),
  0px 0px 1px rgba(160, 120, 255, 0.6);
  animation: 1.2s linear infinite 0s running first682;
}

.loader div {
  width: inherit;
  height: inherit;
  position: absolute;
}

#first {
  transform: rotate(90deg)
}

#first::before {
  --width: 1em;
  --height: 1em;
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - var(--width)/2);
  width: 1em;
  height: 1em;
  background-color: rgb(44, 0, 114);
  box-shadow: inset 5px 5px 10px rgb(160, 120, 255),
  0px 0px 2px white;
  border-radius: 50px;
  animation: 0.8s ease-in 0s infinite running jump2;
}

#second {
  transform: rotate(90deg);
}

#second::before {
  --width: 1em;
  --height: 1em;
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - var(--width)/2);
  width: 1em;
  height: 1em;
  background-color: rgb(44, 0, 114);
  box-shadow: inset 5px 5px 10px rgb(160, 120, 255),
  0px 0px 2px white;
  border-radius: 50px;
  animation: 1.5s ease-in 0s infinite running jump2;
}

#third {
  transform: rotate(90deg)
}

#third::before {
  --width: 1em;
  --height: 1em;
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - var(--width)/2);
  width: 1em;
  height: 1em;
  background-color: rgb(44, 0, 114);
  box-shadow: inset 5px 5px 10px rgb(160, 120, 255),
  0px 0px 2px white;
  border-radius: 50px;
  animation: 1.6s ease-in 0s infinite running jump2;
}

.loader::after {
  --width: 1em;
  --height: 1em;
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - var(--width)/2);
  width: 1em;
  height: 1em;
  background-color: rgb(44, 0, 114);
  box-shadow: inset 5px 5px 10px rgb(160, 120, 255),
  0px 0px 2px white;
  border-radius: 50px;
  animation: 1.2s ease-in 1s alternate infinite running jump2;
}

@keyframes first682 {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(0deg);
    transform: rotate(90deg)
  }

  50% {
    transform: rotate(90deg);
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(180deg);
    transform: rotate(270deg)
  }

  100% {
    transform: rotate(270deg);
    transform: rotate(360deg);
  }
}

@keyframes jump2 {
  0% {
    top: 100%;
  }

  25% {
    top: 230%
  }

  50% {
    top: 100%;
  }

  75% {
    height: 0.6em
  }

  100% {
    height: 1em
  }
}
</style>


================================================
FILE: loaders/Nawsome_ancient-yak-42.html
================================================
		<svg class="pl" viewBox="0 0 160 160" width="160px" height="160px" xmlns="http://www.w3.org/2000/svg">
			<defs>
				<linearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
					<stop offset="0%" stop-color="#000"></stop>
					<stop offset="100%" stop-color="#fff"></stop>
				</linearGradient>
				<mask id="mask1">
					<rect x="0" y="0" width="160" height="160" fill="url(#grad)"></rect>
				</mask>
				<mask id="mask2">
					<rect x="28" y="28" width="104" height="104" fill="url(#grad)"></rect>
				</mask>
			</defs>
			
			<g>
				<g class="pl__ring-rotate">
					<circle class="pl__ring-stroke" cx="80" cy="80" r="72" fill="none" stroke="hsl(223,90%,55%)" stroke-width="16" stroke-dasharray="452.39 452.39" stroke-dashoffset="452" stroke-linecap="round" transform="rotate(-45,80,80)"></circle>
				</g>
			</g>
			<g mask="url(#mask1)">
				<g class="pl__ring-rotate">
					<circle class="pl__ring-stroke" cx="80" cy="80" r="72" fill="none" stroke="hsl(193,90%,55%)" stroke-width="16" stroke-dasharray="452.39 452.39" stroke-dashoffset="452" stroke-linecap="round" transform="rotate(-45,80,80)"></circle>
				</g>
			</g>
			
			<g>
				<g stroke-width="4" stroke-dasharray="12 12" stroke-dashoffset="12" stroke-linecap="round" transform="translate(80,80)">
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(-135,0,0) translate(0,40)"></polyline>
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(-90,0,0) translate(0,40)"></polyline>
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(-45,0,0) translate(0,40)"></polyline>
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(0,0,0) translate(0,40)"></polyline>
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(45,0,0) translate(0,40)"></polyline>
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(90,0,0) translate(0,40)"></polyline>
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(135,0,0) translate(0,40)"></polyline>
					<polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(180,0,0) translate(0,40)"></polyline>
				</g>
			</g>
			<g mask="url(#mask1)">
				<g stroke-width="4" stroke-dasharray="12 12" stroke-dashoffset="12" stroke-linecap="round" transform="translate(80,80)">
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(-135,0,0) translate(0,40)"></polyline>
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(-90,0,0) translate(0,40)"></polyline>
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(-45,0,0) translate(0,40)"></polyline>
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(0,0,0) translate(0,40)"></polyline>
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(45,0,0) translate(0,40)"></polyline>
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(90,0,0) translate(0,40)"></polyline>
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(135,0,0) translate(0,40)"></polyline>
					<polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(180,0,0) translate(0,40)"></polyline>
				</g>
			</g>
			
			<g>
				<g transform="translate(64,28)">
					<g class="pl__arrows" transform="rotate(45,16,52)">
						<path fill="hsl(3,90%,55%)" d="M17.998,1.506l13.892,43.594c.455,1.426-.56,2.899-1.998,2.899H2.108c-1.437,0-2.452-1.473-1.998-2.899L14.002,1.506c.64-2.008,3.356-2.008,3.996,0Z"></path>
						<path fill="hsl(223,10%,90%)" d="M14.009,102.499L.109,58.889c-.453-1.421,.559-2.889,1.991-2.889H29.899c1.433,0,2.444,1.468,1.991,2.889l-13.899,43.61c-.638,2.001-3.345,2.001-3.983,0Z"></path>
					</g>
				</g>
			</g>
			<g mask="url(#mask2)">
				<g transform="translate(64,28)">
					<g class="pl__arrows" transform="rotate(45,16,52)">
						<path fill="hsl(333,90%,55%)" d="M17.998,1.506l13.892,43.594c.455,1.426-.56,2.899-1.998,2.899H2.108c-1.437,0-2.452-1.473-1.998-2.899L14.002,1.506c.64-2.008,3.356-2.008,3.996,0Z"></path>
						<path fill="hsl(223,90%,80%)" d="M14.009,102.499L.109,58.889c-.453-1.421,.559-2.889,1.991-2.889H29.899c1.433,0,2.444,1.468,1.991,2.889l-13.899,43.61c-.638,2.001-3.345,2.001-3.983,0Z"></path>
					</g>
				</g>
			</g>
		</svg>
<style>
/* From Uiverse.io by Nawsome - Tags: loader, compass */
.pl {
  display: block;
  width: 9.375em;
  height: 9.375em;
}

.pl__arrows,
.pl__ring-rotate,
.pl__ring-stroke,
.pl__tick {
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pl__arrows {
  animation-name: arrows42;
  transform: rotate(45deg);
  transform-origin: 16px 52px;
}

.pl__ring-rotate,
.pl__ring-stroke {
  transform-origin: 80px 80px;
}

.pl__ring-rotate {
  animation-name: ringRotate42;
}

.pl__ring-stroke {
  animation-name: ringStroke42;
  transform: rotate(-45deg);
}

.pl__tick {
  animation-name: tick42;
}

.pl__tick:nth-child(2) {
  animation-delay: -1.75s;
}

.pl__tick:nth-child(3) {
  animation-delay: -1.5s;
}

.pl__tick:nth-child(4) {
  animation-delay: -1.25s;
}

.pl__tick:nth-child(5) {
  animation-delay: -1s;
}

.pl__tick:nth-child(6) {
  animation-delay: -0.75s;
}

.pl__tick:nth-child(7) {
  animation-delay: -0.5s;
}

.pl__tick:nth-child(8) {
  animation-delay: -0.25s;
}

/* Animations */
@keyframes arrows42 {
  from {
    transform: rotate(45deg);
  }

  to {
    transform: rotate(405deg);
  }
}

@keyframes ringRotate42 {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(720deg);
  }
}

@keyframes ringStroke42 {
  from,
	to {
    stroke-dashoffset: 452;
    transform: rotate(-45deg);
  }

  50% {
    stroke-dashoffset: 169.5;
    transform: rotate(-180deg);
  }
}

@keyframes tick42 {
  from,
	3%,
	47%,
	to {
    stroke-dashoffset: -12;
  }

  14%,
	36% {
    stroke-dashoffset: 0;
  }
}
</style>


================================================
FILE: loaders/Nawsome_blue-dragon-70.html
================================================
<div class="banter-loader">
  <div class="banter-loader__box"></div>
  <div class="banter-loader__box"></div>
  <div class="banter-loader__box"></div>
  <div class="banter-loader__box"></div>
  <div class="banter-loader__box"></div>
  <div class="banter-loader__box"></div>
  <div class="banter-loader__box"></div>
  <div class="banter-loader__box"></div>
  <div class="banter-loader__box"></div>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.banter-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  margin-top: -36px;
}

.banter-loader__box {
  float: left;
  position: relative;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.banter-loader__box:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

.banter-loader__box:nth-child(3n) {
  margin-right: 0;
  margin-bottom: 6px;
}

.banter-loader__box:nth-child(1):before, .banter-loader__box:nth-child(4):before {
  margin-left: 26px;
}

.banter-loader__box:nth-child(3):before {
  margin-top: 52px;
}

.banter-loader__box:last-child {
  margin-bottom: 0;
}

@keyframes moveBox-1 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(0px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(26px, 0);
  }

  45.4545454545% {
    transform: translate(26px, 26px);
  }

  54.5454545455% {
    transform: translate(26px, 26px);
  }

  63.6363636364% {
    transform: translate(26px, 26px);
  }

  72.7272727273% {
    transform: translate(26px, 0px);
  }

  81.8181818182% {
    transform: translate(0px, 0px);
  }

  90.9090909091% {
    transform: translate(-26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(1) {
  animation: moveBox-1 4s infinite;
}

@keyframes moveBox-2 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(26px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(26px, 0);
  }

  45.4545454545% {
    transform: translate(26px, 26px);
  }

  54.5454545455% {
    transform: translate(26px, 26px);
  }

  63.6363636364% {
    transform: translate(26px, 26px);
  }

  72.7272727273% {
    transform: translate(26px, 26px);
  }

  81.8181818182% {
    transform: translate(0px, 26px);
  }

  90.9090909091% {
    transform: translate(0px, 26px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(2) {
  animation: moveBox-2 4s infinite;
}

@keyframes moveBox-3 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(-26px, 0);
  }

  45.4545454545% {
    transform: translate(-26px, 0);
  }

  54.5454545455% {
    transform: translate(-26px, 0);
  }

  63.6363636364% {
    transform: translate(-26px, 0);
  }

  72.7272727273% {
    transform: translate(-26px, 0);
  }

  81.8181818182% {
    transform: translate(-26px, -26px);
  }

  90.9090909091% {
    transform: translate(0px, -26px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(3) {
  animation: moveBox-3 4s infinite;
}

@keyframes moveBox-4 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(-26px, -26px);
  }

  36.3636363636% {
    transform: translate(0px, -26px);
  }

  45.4545454545% {
    transform: translate(0px, 0px);
  }

  54.5454545455% {
    transform: translate(0px, -26px);
  }

  63.6363636364% {
    transform: translate(0px, -26px);
  }

  72.7272727273% {
    transform: translate(0px, -26px);
  }

  81.8181818182% {
    transform: translate(-26px, -26px);
  }

  90.9090909091% {
    transform: translate(-26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(4) {
  animation: moveBox-4 4s infinite;
}

@keyframes moveBox-5 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(0, 0);
  }

  27.2727272727% {
    transform: translate(0, 0);
  }

  36.3636363636% {
    transform: translate(26px, 0);
  }

  45.4545454545% {
    transform: translate(26px, 0);
  }

  54.5454545455% {
    transform: translate(26px, 0);
  }

  63.6363636364% {
    transform: translate(26px, 0);
  }

  72.7272727273% {
    transform: translate(26px, 0);
  }

  81.8181818182% {
    transform: translate(26px, -26px);
  }

  90.9090909091% {
    transform: translate(0px, -26px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(5) {
  animation: moveBox-5 4s infinite;
}

@keyframes moveBox-6 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(-26px, 0);
  }

  36.3636363636% {
    transform: translate(0px, 0);
  }

  45.4545454545% {
    transform: translate(0px, 0);
  }

  54.5454545455% {
    transform: translate(0px, 0);
  }

  63.6363636364% {
    transform: translate(0px, 0);
  }

  72.7272727273% {
    transform: translate(0px, 26px);
  }

  81.8181818182% {
    transform: translate(-26px, 26px);
  }

  90.9090909091% {
    transform: translate(-26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(6) {
  animation: moveBox-6 4s infinite;
}

@keyframes moveBox-7 {
  9.0909090909% {
    transform: translate(26px, 0);
  }

  18.1818181818% {
    transform: translate(26px, 0);
  }

  27.2727272727% {
    transform: translate(26px, 0);
  }

  36.3636363636% {
    transform: translate(0px, 0);
  }

  45.4545454545% {
    transform: translate(0px, -26px);
  }

  54.5454545455% {
    transform: translate(26px, -26px);
  }

  63.6363636364% {
    transform: translate(0px, -26px);
  }

  72.7272727273% {
    transform: translate(0px, -26px);
  }

  81.8181818182% {
    transform: translate(0px, 0px);
  }

  90.9090909091% {
    transform: translate(26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(7) {
  animation: moveBox-7 4s infinite;
}

@keyframes moveBox-8 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(-26px, -26px);
  }

  36.3636363636% {
    transform: translate(0px, -26px);
  }

  45.4545454545% {
    transform: translate(0px, -26px);
  }

  54.5454545455% {
    transform: translate(0px, -26px);
  }

  63.6363636364% {
    transform: translate(0px, -26px);
  }

  72.7272727273% {
    transform: translate(0px, -26px);
  }

  81.8181818182% {
    transform: translate(26px, -26px);
  }

  90.9090909091% {
    transform: translate(26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(8) {
  animation: moveBox-8 4s infinite;
}

@keyframes moveBox-9 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(-26px, 0);
  }

  45.4545454545% {
    transform: translate(0px, 0);
  }

  54.5454545455% {
    transform: translate(0px, 0);
  }

  63.6363636364% {
    transform: translate(-26px, 0);
  }

  72.7272727273% {
    transform: translate(-26px, 0);
  }

  81.8181818182% {
    transform: translate(-52px, 0);
  }

  90.9090909091% {
    transform: translate(-26px, 0);
  }

  100% {
    transform: translate(0px, 0);
  }
}

.banter-loader__box:nth-child(9) {
  animation: moveBox-9 4s infinite;
}
</style>


================================================
FILE: loaders/Nawsome_brave-turtle-26.html
================================================

  <section class="loader">

    <div class="slider" style="--i:0">
    </div>
    <div class="slider" style="--i:1">
    </div>
    <div class="slider" style="--i:2">
    </div>
    <div class="slider" style="--i:3">
    </div>
    <div class="slider" style="--i:4">
    </div>
  </section>



<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.slider {
  overflow: hidden;
  background-color: white;
  margin: 0 15px;
  height: 80px;
  width: 20px;
  border-radius: 30px;
  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 30px #fff,
    inset -5px -5px 10px rgba(0, 0, 255, 0.1),
    inset 5px 5px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 420px 0 400px #2697f3,
    inset 0px 0px 0px rgba(0, 0, 0, 0.1);
  animation: animate_2 2.5s ease-in-out infinite;
  animation-delay: calc(-0.5s * var(--i));
}

@keyframes animate_2 {
  0% {
    transform: translateY(250px);
    filter: hue-rotate(0deg);
  }

  50% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(250px);
    filter: hue-rotate(180deg);
  }
}

</style>


================================================
FILE: loaders/Nawsome_breezy-ape-20.html
================================================
<div class="pl">
	<div class="pl__dot"></div>
	<div class="pl__dot"></div>
	<div class="pl__dot"></div>
	<div class="pl__dot"></div>
	<div class="pl__dot"></div>
	<div class="pl__dot"></div>
	<div class="pl__dot"></div>
	<div class="pl__dot"></div>
	<div class="pl__dot"></div>
	<div class="pl__dot"></div>
	<div class="pl__dot"></div>
	<div class="pl__dot"></div>
	<div class="pl__text">Loading…</div>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.pl {
  box-shadow: 2em 0 2em rgba(0, 0, 0, 0.2) inset, -2em 0 2em rgba(255, 255, 255, 0.1) inset;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotateX(30deg) rotateZ(45deg);
  width: 14em;
  height: 14em;
  color: white;
}

.pl, .pl__dot {
  border-radius: 50%;
}

.pl__dot {
  animation-name: shadow724;
  box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.5);
  top: calc(50% - 0.75em);
  left: calc(50% - 0.75em);
  width: 1.5em;
  height: 1.5em;
}

.pl__dot, .pl__dot:before, .pl__dot:after {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  position: absolute;
}

.pl__dot:before, .pl__dot:after {
  content: "";
  display: block;
  left: 0;
  width: inherit;
  transition: background-color var(--trans-dur);
}

.pl__dot:before {
  animation-name: pushInOut1724;
  background-color: var(--bg);
  border-radius: inherit;
  box-shadow: 0.05em 0 0.1em rgba(255, 255, 255, 0.2) inset;
  height: inherit;
  z-index: 1;
}

.pl__dot:after {
  animation-name: pushInOut2724;
  background-color: var(--primary1);
  border-radius: 0.75em;
  box-shadow: 0.1em 0.3em 0.2em rgba(255, 255, 255, 0.4) inset, 0 -0.4em 0.2em #2e3138 inset, 0 -1em 0.25em rgba(0, 0, 0, 0.3) inset;
  bottom: 0;
  clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
  height: 3em;
  transform: rotate(-45deg);
  transform-origin: 50% 2.25em;
}

.pl__dot:nth-child(1) {
  transform: rotate(0deg) translateX(5em) rotate(0deg);
  z-index: 5;
}

.pl__dot:nth-child(1), .pl__dot:nth-child(1):before, .pl__dot:nth-child(1):after {
  animation-delay: 0s;
}

.pl__dot:nth-child(2) {
  transform: rotate(-30deg) translateX(5em) rotate(30deg);
  z-index: 4;
}

.pl__dot:nth-child(2), .pl__dot:nth-child(2):before, .pl__dot:nth-child(2):after {
  animation-delay: -0.1666666667s;
}

.pl__dot:nth-child(3) {
  transform: rotate(-60deg) translateX(5em) rotate(60deg);
  z-index: 3;
}

.pl__dot:nth-child(3), .pl__dot:nth-child(3):before, .pl__dot:nth-child(3):after {
  animation-delay: -0.3333333333s;
}

.pl__dot:nth-child(4) {
  transform: rotate(-90deg) translateX(5em) rotate(90deg);
  z-index: 2;
}

.pl__dot:nth-child(4), .pl__dot:nth-child(4):before, .pl__dot:nth-child(4):after {
  animation-delay: -0.5s;
}

.pl__dot:nth-child(5) {
  transform: rotate(-120deg) translateX(5em) rotate(120deg);
  z-index: 1;
}

.pl__dot:nth-child(5), .pl__dot:nth-child(5):before, .pl__dot:nth-child(5):after {
  animation-delay: -0.6666666667s;
}

.pl__dot:nth-child(6) {
  transform: rotate(-150deg) translateX(5em) rotate(150deg);
  z-index: 1;
}

.pl__dot:nth-child(6), .pl__dot:nth-child(6):before, .pl__dot:nth-child(6):after {
  animation-delay: -0.8333333333s;
}

.pl__dot:nth-child(7) {
  transform: rotate(-180deg) translateX(5em) rotate(180deg);
  z-index: 2;
}

.pl__dot:nth-child(7), .pl__dot:nth-child(7):before, .pl__dot:nth-child(7):after {
  animation-delay: -1s;
}

.pl__dot:nth-child(8) {
  transform: rotate(-210deg) translateX(5em) rotate(210deg);
  z-index: 3;
}

.pl__dot:nth-child(8), .pl__dot:nth-child(8):before, .pl__dot:nth-child(8):after {
  animation-delay: -1.1666666667s;
}

.pl__dot:nth-child(9) {
  transform: rotate(-240deg) translateX(5em) rotate(240deg);
  z-index: 4;
}

.pl__dot:nth-child(9), .pl__dot:nth-child(9):before, .pl__dot:nth-child(9):after {
  animation-delay: -1.3333333333s;
}

.pl__dot:nth-child(10) {
  transform: rotate(-270deg) translateX(5em) rotate(270deg);
  z-index: 5;
}

.pl__dot:nth-child(10), .pl__dot:nth-child(10):before, .pl__dot:nth-child(10):after {
  animation-delay: -1.5s;
}

.pl__dot:nth-child(11) {
  transform: rotate(-300deg) translateX(5em) rotate(300deg);
  z-index: 6;
}

.pl__dot:nth-child(11), .pl__dot:nth-child(11):before, .pl__dot:nth-child(11):after {
  animation-delay: -1.6666666667s;
}

.pl__dot:nth-child(12) {
  transform: rotate(-330deg) translateX(5em) rotate(330deg);
  z-index: 6;
}

.pl__dot:nth-child(12), .pl__dot:nth-child(12):before, .pl__dot:nth-child(12):after {
  animation-delay: -1.8333333333s;
}

.pl__text {
  font-size: 0.75em;
  max-width: 5rem;
  position: relative;
  text-shadow: 0 0 0.1em var(--fg-t);
  transform: rotateZ(-45deg);
}

/* Animations */
@keyframes shadow724 {
  from {
    animation-timing-function: ease-in;
    box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.3);
  }

  25% {
    animation-timing-function: ease-out;
    box-shadow: 0.1em 0.1em 0 0.1em black, 0.8em 0 0.8em rgba(0, 0, 0, 0.5);
  }

  50%, to {
    box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.3);
  }
}

@keyframes pushInOut1724 {
  from {
    animation-timing-function: ease-in;
    background-color: var(--bg);
    transform: translate(0, 0);
  }

  25% {
    animation-timing-function: ease-out;
    background-color: var(--primary2);
    transform: translate(-71%, -71%);
  }

  50%, to {
    background-color: var(--bg);
    transform: translate(0, 0);
  }
}

@keyframes pushInOut2724 {
  from {
    animation-timing-function: ease-in;
    background-color: var(--bg);
    clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
  }

  25% {
    animation-timing-function: ease-out;
    background-color: var(--primary1);
    clip-path: polygon(0 25%, 100% 25%, 100% 100%, 0 100%);
  }

  50%, to {
    background-color: var(--bg);
    clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
  }
}
</style>


================================================
FILE: loaders/Nawsome_cold-liger-90.html
================================================
<div class="boxes">
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: 3d, loader */
.boxes {
  --size: 32px;
  --duration: 800ms;
  height: calc(var(--size) * 2);
  width: calc(var(--size) * 3);
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  margin-top: calc(var(--size) * 1.5 * -1);
  transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
}

.boxes .box {
  width: var(--size);
  height: var(--size);
  top: 0;
  left: 0;
  position: absolute;
  transform-style: preserve-3d;
}

.boxes .box:nth-child(1) {
  transform: translate(100%, 0);
  -webkit-animation: box1 var(--duration) linear infinite;
  animation: box1 var(--duration) linear infinite;
}

.boxes .box:nth-child(2) {
  transform: translate(0, 100%);
  -webkit-animation: box2 var(--duration) linear infinite;
  animation: box2 var(--duration) linear infinite;
}

.boxes .box:nth-child(3) {
  transform: translate(100%, 100%);
  -webkit-animation: box3 var(--duration) linear infinite;
  animation: box3 var(--duration) linear infinite;
}

.boxes .box:nth-child(4) {
  transform: translate(200%, 0);
  -webkit-animation: box4 var(--duration) linear infinite;
  animation: box4 var(--duration) linear infinite;
}

.boxes .box > div {
  --background: #5C8DF6;
  --top: auto;
  --right: auto;
  --bottom: auto;
  --left: auto;
  --translateZ: calc(var(--size) / 2);
  --rotateY: 0deg;
  --rotateX: 0deg;
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--background);
  top: var(--top);
  right: var(--right);
  bottom: var(--bottom);
  left: var(--left);
  transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
}

.boxes .box > div:nth-child(1) {
  --top: 0;
  --left: 0;
}

.boxes .box > div:nth-child(2) {
  --background: #145af2;
  --right: 0;
  --rotateY: 90deg;
}

.boxes .box > div:nth-child(3) {
  --background: #447cf5;
  --rotateX: -90deg;
}

.boxes .box > div:nth-child(4) {
  --background: #DBE3F4;
  --top: 0;
  --left: 0;
  --translateZ: calc(var(--size) * 3 * -1);
}

@-webkit-keyframes box1 {
  0%, 50% {
    transform: translate(100%, 0);
  }

  100% {
    transform: translate(200%, 0);
  }
}

@keyframes box1 {
  0%, 50% {
    transform: translate(100%, 0);
  }

  100% {
    transform: translate(200%, 0);
  }
}

@-webkit-keyframes box2 {
  0% {
    transform: translate(0, 100%);
  }

  50% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(100%, 0);
  }
}

@keyframes box2 {
  0% {
    transform: translate(0, 100%);
  }

  50% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(100%, 0);
  }
}

@-webkit-keyframes box3 {
  0%, 50% {
    transform: translate(100%, 100%);
  }

  100% {
    transform: translate(0, 100%);
  }
}

@keyframes box3 {
  0%, 50% {
    transform: translate(100%, 100%);
  }

  100% {
    transform: translate(0, 100%);
  }
}

@-webkit-keyframes box4 {
  0% {
    transform: translate(200%, 0);
  }

  50% {
    transform: translate(200%, 100%);
  }

  100% {
    transform: translate(100%, 100%);
  }
}

@keyframes box4 {
  0% {
    transform: translate(200%, 0);
  }

  50% {
    transform: translate(200%, 100%);
  }

  100% {
    transform: translate(100%, 100%);
  }
}
</style>


================================================
FILE: loaders/Nawsome_cowardly-squid-50.html
================================================
<div class="svg-frame">
	<svg style="--i:0;--j:0;">
		<g id="out1">
			<path d="M72 172C72 116.772 116.772 72 172 72C227.228 72 272 116.772 272 172C272 227.228 227.228 272 172 272C116.772 272 72 227.228 72 172ZM197.322 172C197.322 158.015 185.985 146.678 172 146.678C158.015 146.678 146.678 158.015 146.678 172C146.678 185.985 158.015 197.322 172 197.322C185.985 197.322 197.322 185.985 197.322 172Z"></path>
			<path mask="url(#path-1-inside-1_111_3212)" stroke-miterlimit="16" stroke-width="2" stroke="#00FFFF" d="M72 172C72 116.772 116.772 72 172 72C227.228 72 272 116.772 272 172C272 227.228 227.228 272 172 272C116.772 272 72 227.228 72 172ZM197.322 172C197.322 158.015 185.985 146.678 172 146.678C158.015 146.678 146.678 158.015 146.678 172C146.678 185.985 158.015 197.322 172 197.322C185.985 197.322 197.322 185.985 197.322 172Z"></path>
		</g>
	</svg>

	<svg style="--i:1;--j:1;">
		<g id="out2">
			<mask fill="white" id="path-2-inside-2_111_3212">
				<path d="M102.892 127.966C93.3733 142.905 88.9517 160.527 90.2897 178.19L94.3752 177.88C93.1041 161.1 97.3046 144.36 106.347 130.168L102.892 127.966Z"></path>
				<path d="M93.3401 194.968C98.3049 211.971 108.646 226.908 122.814 237.541L125.273 234.264C111.814 224.163 101.99 209.973 97.2731 193.819L93.3401 194.968Z"></path>
				<path d="M152.707 92.3592C140.33 95.3575 128.822 101.199 119.097 109.421L121.742 112.55C130.981 104.739 141.914 99.1897 153.672 96.3413L152.707 92.3592Z"></path>
				<path d="M253.294 161.699C255.099 175.937 253.132 190.4 247.59 203.639L243.811 202.057C249.075 189.48 250.944 175.74 249.23 162.214L253.294 161.699Z"></path>
				<path d="M172 90.0557C184.677 90.0557 197.18 92.9967 208.528 98.6474C219.875 104.298 229.757 112.505 237.396 122.621L234.126 125.09C226.869 115.479 217.481 107.683 206.701 102.315C195.921 96.9469 184.043 94.1529 172 94.1529V90.0557Z"></path>
				<path d="M244.195 133.235C246.991 138.442 249.216 143.937 250.83 149.623L246.888 150.742C245.355 145.34 243.242 140.12 240.586 135.174L244.195 133.235Z"></path>
				<path d="M234.238 225.304C223.932 237.338 210.358 246.126 195.159 250.604C179.961 255.082 163.79 255.058 148.606 250.534L149.775 246.607C164.201 250.905 179.563 250.928 194.001 246.674C208.44 242.42 221.335 234.071 231.126 222.639L234.238 225.304Z"></path>
			</mask>
			<path mask="url(#path-2-inside-2_111_3212)" fill="#00FFFF" d="M102.892 127.966L105.579 123.75L101.362 121.063L98.6752 125.28L102.892 127.966ZM90.2897 178.19L85.304 178.567L85.6817 183.553L90.6674 183.175L90.2897 178.19ZM94.3752 177.88L94.7529 182.866L99.7386 182.488L99.3609 177.503L94.3752 177.88ZM106.347 130.168L110.564 132.855L113.251 128.638L109.034 125.951L106.347 130.168ZM93.3401 194.968L91.9387 190.168L87.1391 191.569L88.5405 196.369L93.3401 194.968ZM122.814 237.541L119.813 241.54L123.812 244.541L126.813 240.542L122.814 237.541ZM125.273 234.264L129.272 237.265L132.273 233.266L128.274 230.265L125.273 234.264ZM97.2731 193.819L102.073 192.418L100.671 187.618L95.8717 189.02L97.2731 193.819ZM152.707 92.3592L157.567 91.182L156.389 86.3226L151.53 87.4998L152.707 92.3592ZM119.097 109.421L115.869 105.603L112.05 108.831L115.278 112.649L119.097 109.421ZM121.742 112.55L117.924 115.778L121.152 119.596L124.97 116.368L121.742 112.55ZM153.672 96.3413L154.849 101.201L159.708 100.023L158.531 95.1641L153.672 96.3413ZM253.294 161.699L258.255 161.07L257.626 156.11L252.666 156.738L253.294 161.699ZM247.59 203.639L245.66 208.251L250.272 210.182L252.203 205.569L247.59 203.639ZM243.811 202.057L239.198 200.126L237.268 204.739L241.88 206.669L243.811 202.057ZM249.23 162.214L248.601 157.253L243.641 157.882L244.269 162.842L249.23 162.214ZM172 90.0557V85.0557H167V90.0557H172ZM208.528 98.6474L206.299 103.123L206.299 103.123L208.528 98.6474ZM237.396 122.621L240.409 126.611L244.399 123.598L241.386 119.608L237.396 122.621ZM234.126 125.09L230.136 128.103L233.149 132.093L237.139 129.08L234.126 125.09ZM206.701 102.315L204.473 106.791L204.473 106.791L206.701 102.315ZM172 94.1529H167V99.1529H172V94.1529ZM244.195 133.235L248.601 130.87L246.235 126.465L241.83 128.83L244.195 133.235ZM250.83 149.623L252.195 154.433L257.005 153.067L255.64 148.257L250.83 149.623ZM246.888 150.742L242.078 152.107L243.444 156.917L248.254 155.552L246.888 150.742ZM240.586 135.174L238.22 130.768L233.815 133.134L236.181 137.539L240.586 135.174ZM234.238 225.304L238.036 228.556L241.288 224.759L237.491 221.506L234.238 225.304ZM195.159 250.604L196.572 255.4L196.572 255.4L195.159 250.604ZM148.606 250.534L143.814 249.107L142.386 253.899L147.178 255.326L148.606 250.534ZM149.775 246.607L151.203 241.816L146.411 240.388L144.983 245.18L149.775 246.607ZM194.001 246.674L195.415 251.47L195.415 251.47L194.001 246.674ZM231.126 222.639L234.379 218.841L230.581 215.589L227.329 219.386L231.126 222.639ZM98.6752 125.28C88.5757 141.13 83.8844 159.826 85.304 178.567L95.2754 177.812C94.0191 161.227 98.1709 144.681 107.109 130.653L98.6752 125.28ZM90.6674 183.175L94.7529 182.866L93.9976 172.895L89.912 173.204L90.6674 183.175ZM99.3609 177.503C98.1715 161.8 102.102 146.135 110.564 132.855L102.131 127.481C92.5071 142.585 88.0368 160.4 89.3895 178.258L99.3609 177.503ZM109.034 125.951L105.579 123.75L100.205 132.183L103.661 134.385L109.034 125.951ZM88.5405 196.369C93.8083 214.41 104.78 230.259 119.813 241.54L125.815 233.542C112.512 223.558 102.802 209.532 98.1397 193.566L88.5405 196.369ZM126.813 240.542L129.272 237.265L121.274 231.263L118.815 234.54L126.813 240.542ZM128.274 230.265C115.679 220.813 106.486 207.534 102.073 192.418L92.4735 195.221C97.493 212.412 107.948 227.513 122.272 238.263L128.274 230.265ZM95.8717 189.02L91.9387 190.168L94.7415 199.767L98.6745 198.619L95.8717 189.02ZM151.53 87.4998C138.398 90.681 126.188 96.8793 115.869 105.603L122.325 113.239C131.457 105.519 142.262 100.034 153.884 97.2187L151.53 87.4998ZM115.278 112.649L117.924 115.778L125.56 109.322L122.915 106.193L115.278 112.649ZM124.97 116.368C133.616 109.059 143.846 103.866 154.849 101.201L152.495 91.4818C139.981 94.5132 128.347 100.419 118.514 108.732L124.97 116.368ZM158.531 95.1641L157.567 91.182L147.848 93.5364L148.812 97.5185L158.531 95.1641ZM248.334 162.327C250.028 175.697 248.181 189.277 242.978 201.708L252.203 205.569C258.082 191.522 260.169 176.177 258.255 161.07L248.334 162.327ZM249.521 199.027L245.741 197.445L241.88 206.669L245.66 208.251L249.521 199.027ZM248.423 203.987C254.025 190.602 256.014 175.98 254.19 161.585L244.269 162.842C245.873 175.5 244.125 188.357 239.198 200.126L248.423 203.987ZM249.858 167.174L253.923 166.659L252.666 156.738L248.601 157.253L249.858 167.174ZM172 95.0557C183.903 95.0557 195.644 97.8172 206.299 103.123L210.757 94.1717C198.717 88.1761 185.45 85.0557 172 85.0557V95.0557ZM206.299 103.123C216.954 108.429 226.233 116.135 233.406 125.634L241.386 119.608C233.281 108.874 222.796 100.167 210.757 94.1717L206.299 103.123ZM234.383 118.631L231.113 121.1L237.139 129.08L240.409 126.611L234.383 118.631ZM238.116 122.077C230.393 111.849 220.403 103.552 208.93 97.8393L204.473 106.791C214.56 111.814 223.345 119.11 230.136 128.103L238.116 122.077ZM208.93 97.8393C197.458 92.1263 184.816 89.1529 172 89.1529V99.1529C183.269 99.1529 194.385 101.767 204.473 106.791L208.93 97.8393ZM177 94.1529V90.0557H167V94.1529H177ZM239.79 135.601C242.416 140.49 244.504 145.649 246.02 150.988L255.64 148.257C253.927 142.225 251.567 136.395 248.601 130.87L239.79 135.601ZM249.464 144.813L245.523 145.932L248.254 155.552L252.195 154.433L249.464 144.813ZM251.698 149.376C250.067 143.628 247.818 138.073 244.991 132.808L236.181 137.539C238.666 142.168 240.644 147.052 242.078 152.107L251.698 149.376ZM242.951 139.579L246.561 137.64L241.83 128.83L238.22 130.768L242.951 139.579ZM230.441 222.051C220.763 233.351 208.017 241.603 193.746 245.808L196.572 255.4C212.698 250.649 227.101 241.325 238.036 228.556L230.441 222.051ZM193.746 245.808C179.475 250.012 164.291 249.99 150.033 245.742L147.178 255.326C163.289 260.125 180.447 260.151 196.572 255.4L193.746 245.808ZM153.397 251.962L154.567 248.035L144.983 245.18L143.814 249.107L153.397 251.962ZM148.348 251.399C163.7 255.973 180.049 255.997 195.415 251.47L192.588 241.877C179.077 245.858 164.702 245.837 151.203 241.816L148.348 251.399ZM195.415 251.47C210.78 246.942 224.504 238.058 234.924 225.891L227.329 219.386C218.167 230.084 206.099 237.897 192.588 241.877L195.415 251.47ZM227.874 226.436L230.986 229.101L237.491 221.506L234.379 218.841L227.874 226.436Z"></path>
		</g>
	</svg>

	<svg style="--i:0;--j:2;">
		<g id="inner3">
			<path d="M195.136 135.689C188.115 131.215 179.948 128.873 171.624 128.946C163.299 129.019 155.174 131.503 148.232 136.099L148.42 136.382C155.307 131.823 163.368 129.358 171.627 129.286C179.886 129.213 187.988 131.537 194.954 135.975L195.136 135.689Z"></path>
			<path d="M195.136 208.311C188.115 212.784 179.948 215.127 171.624 215.054C163.299 214.981 155.174 212.496 148.232 207.901L148.42 207.618C155.307 212.177 163.368 214.642 171.627 214.714C179.886 214.786 187.988 212.463 194.954 208.025L195.136 208.311Z"></path>
			<path mask="url(#path-5-inside-3_111_3212)" fill="#00FFFF" d="M195.136 135.689L195.474 135.904L195.689 135.566L195.351 135.352L195.136 135.689ZM171.624 128.946L171.627 129.346L171.624 128.946ZM148.232 136.099L148.011 135.765L147.678 135.986L147.899 136.32L148.232 136.099ZM148.42 136.382L148.086 136.603L148.307 136.936L148.641 136.716L148.42 136.382ZM171.627 129.286L171.63 129.686L171.627 129.286ZM194.954 135.975L194.739 136.313L195.076 136.528L195.291 136.19L194.954 135.975ZM195.136 208.311L195.351 208.648L195.689 208.433L195.474 208.096L195.136 208.311ZM171.624 215.054L171.627 214.654L171.624 215.054ZM148.232 207.901L147.899 207.68L147.678 208.014L148.011 208.234L148.232 207.901ZM148.42 207.618L148.641 207.284L148.307 207.063L148.086 207.397L148.42 207.618ZM171.627 214.714L171.63 214.314L171.627 214.714ZM194.954 208.025L195.291 207.81L195.076 207.472L194.739 207.687L194.954 208.025ZM195.351 135.352C188.265 130.836 180.022 128.473 171.62 128.546L171.627 129.346C179.874 129.274 187.966 131.594 194.921 136.026L195.351 135.352ZM171.62 128.546C163.218 128.619 155.018 131.127 148.011 135.765L148.453 136.432C155.33 131.88 163.38 129.418 171.627 129.346L171.62 128.546ZM147.899 136.32L148.086 136.603L148.753 136.161L148.566 135.878L147.899 136.32ZM148.641 136.716C155.463 132.199 163.448 129.757 171.63 129.686L171.623 128.886C163.287 128.958 155.15 131.447 148.199 136.049L148.641 136.716ZM171.63 129.686C179.812 129.614 187.839 131.916 194.739 136.313L195.169 135.638C188.138 131.158 179.959 128.813 171.623 128.886L171.63 129.686ZM195.291 136.19L195.474 135.904L194.799 135.474L194.617 135.76L195.291 136.19ZM194.921 207.974C187.966 212.406 179.874 214.726 171.627 214.654L171.62 215.454C180.022 215.527 188.265 213.163 195.351 208.648L194.921 207.974ZM171.627 214.654C163.38 214.582 155.33 212.12 148.453 207.567L148.011 208.234C155.018 212.873 163.218 215.38 171.62 215.454L171.627 214.654ZM148.566 208.122L148.753 207.838L148.086 207.397L147.899 207.68L148.566 208.122ZM148.199 207.951C155.15 212.553 163.287 215.041 171.623 215.114L171.63 214.314C163.448 214.243 155.463 211.801 148.641 207.284L148.199 207.951ZM171.623 215.114C179.959 215.187 188.138 212.842 195.169 208.362L194.739 207.687C187.839 212.084 179.812 214.386 171.63 214.314L171.623 215.114ZM194.617 208.239L194.799 208.526L195.474 208.096L195.291 207.81L194.617 208.239Z"></path>
		</g>
		<path stroke="#00FFFF" d="M240.944 172C240.944 187.951 235.414 203.408 225.295 215.738C215.176 228.068 201.095 236.508 185.45 239.62C169.806 242.732 153.567 240.323 139.5 232.804C125.433 225.285 114.408 213.12 108.304 198.384C102.2 183.648 101.394 167.25 106.024 151.987C110.654 136.723 120.434 123.537 133.696 114.675C146.959 105.813 162.884 101.824 178.758 103.388C194.632 104.951 209.472 111.97 220.751 123.249" id="out3"></path>
	</svg>

	<svg style="--i:1;--j:3;">
		<g id="inner1">
			<path fill="#00FFFF" d="M145.949 124.51L148.554 129.259C156.575 124.859 165.672 122.804 174.806 123.331C183.94 123.858 192.741 126.944 200.203 132.236C207.665 137.529 213.488 144.815 217.004 153.261C220.521 161.707 221.59 170.972 220.09 179.997L224.108 180.665L224.102 180.699L229.537 181.607C230.521 175.715 230.594 169.708 229.753 163.795L225.628 164.381C224.987 159.867 223.775 155.429 222.005 151.179C218.097 141.795 211.628 133.699 203.337 127.818C195.045 121.937 185.266 118.508 175.118 117.923C165.302 117.357 155.525 119.474 146.83 124.037C146.535 124.192 146.241 124.349 145.949 124.51ZM224.638 164.522C224.009 160.091 222.819 155.735 221.082 151.563C217.246 142.352 210.897 134.406 202.758 128.634C194.62 122.862 185.021 119.496 175.06 118.922C165.432 118.367 155.841 120.441 147.311 124.914L148.954 127.91C156.922 123.745 165.876 121.814 174.864 122.333C184.185 122.87 193.166 126.019 200.782 131.421C208.397 136.822 214.339 144.257 217.928 152.877C221.388 161.188 222.526 170.276 221.23 179.173L224.262 179.677C224.998 174.671 225.35 169.535 224.638 164.522Z" clip-rule="evenodd" fill-rule="evenodd"></path>
			<path fill="#00FFFF" d="M139.91 220.713C134.922 217.428 130.469 213.395 126.705 208.758L130.983 205.286L130.985 205.288L134.148 202.721C141.342 211.584 151.417 217.642 162.619 219.839C173.821 222.036 185.438 220.232 195.446 214.742L198.051 219.491C197.759 219.651 197.465 219.809 197.17 219.963C186.252 225.693 173.696 227.531 161.577 225.154C154.613 223.789 148.041 221.08 142.202 217.234L139.91 220.713ZM142.752 216.399C148.483 220.174 154.934 222.833 161.769 224.173C173.658 226.504 185.977 224.704 196.689 219.087L195.046 216.09C185.035 221.323 173.531 222.998 162.427 220.82C151.323 218.643 141.303 212.747 134.01 204.122L131.182 206.5C134.451 210.376 138.515 213.607 142.752 216.399Z" clip-rule="evenodd" fill-rule="evenodd"></path>
		</g>
	</svg>

	<svg style="--i:2;--j:4;">
		<path fill="#00FFFF" d="M180.956 186.056C183.849 184.212 186.103 181.521 187.41 178.349C188.717 175.177 189.013 171.679 188.258 168.332C187.503 164.986 185.734 161.954 183.192 159.65C180.649 157.346 177.458 155.883 174.054 155.46C170.649 155.038 167.197 155.676 164.169 157.288C161.14 158.9 158.683 161.407 157.133 164.468C155.582 167.528 155.014 170.992 155.505 174.388C155.997 177.783 157.524 180.944 159.879 183.439L161.129 182.259C159.018 180.021 157.648 177.186 157.207 174.141C156.766 171.096 157.276 167.989 158.667 165.245C160.057 162.5 162.261 160.252 164.977 158.806C167.693 157.36 170.788 156.788 173.842 157.167C176.895 157.546 179.757 158.858 182.037 160.924C184.317 162.99 185.904 165.709 186.581 168.711C187.258 171.712 186.992 174.849 185.82 177.694C184.648 180.539 182.627 182.952 180.032 184.606L180.956 186.056Z" id="center1"></path>
		<path fill="#00FFFF" d="M172 166.445C175.068 166.445 177.556 168.932 177.556 172C177.556 175.068 175.068 177.556 172 177.556C168.932 177.556 166.444 175.068 166.444 172C166.444 168.932 168.932 166.445 172 166.445ZM172 177.021C174.773 177.021 177.021 174.773 177.021 172C177.021 169.227 174.773 166.979 172 166.979C169.227 166.979 166.979 169.227 166.979 172C166.979 174.773 169.227 177.021 172 177.021Z" id="center"></path>
	</svg>

</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.svg-frame {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-frame svg {
  position: absolute;
  transition: .5s;
  z-index: calc(1 - (0.2 * var(--j)));
  transform-origin: center;
  width: 344px;
  height: 344px;
  fill: none;
}

.svg-frame:hover svg {
  transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i)));
}

.svg-frame svg #center {
  transition: .5s;
  transform-origin: center;
}

.svg-frame:hover svg #center {
  transform: rotate(-30deg) translateX(45px) translateY(-3px);
}

#out2 {
  animation: rotate16 7s ease-in-out infinite alternate;
  transform-origin: center;
}

#out3 {
  animation: rotate16 3s ease-in-out infinite alternate;
  transform-origin: center;
  stroke: #ff0;
}

#inner3,
#inner1 {
  animation: rotate16 4s ease-in-out infinite alternate;
  transform-origin: center;
}

#center1 {
  fill: #ff0;
  animation: rotate16 2s ease-in-out infinite alternate;
  transform-origin: center;
}

@keyframes rotate16 {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/Nawsome_curly-goose-54.html
================================================
<div class="loader">
  <div>
    <ul>
      <li>
        <svg fill="currentColor" viewBox="0 0 90 120">
          <path d="M90,0 L90,120 L11,120 C4.92486775,120 0,115.075132 0,109 L0,11 C0,4.92486775 4.92486775,0 11,0 L90,0 Z M71.5,81 L18.5,81 C17.1192881,81 16,82.1192881 16,83.5 C16,84.8254834 17.0315359,85.9100387 18.3356243,85.9946823 L18.5,86 L71.5,86 C72.8807119,86 74,84.8807119 74,83.5 C74,82.1745166 72.9684641,81.0899613 71.6643757,81.0053177 L71.5,81 Z M71.5,57 L18.5,57 C17.1192881,57 16,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
        </svg>
      </li>
      <li>
        <svg fill="currentColor" viewBox="0 0 90 120">
          <path d="M90,0 L90,120 L11,120 C4.92486775,120 0,115.075132 0,109 L0,11 C0,4.92486775 4.92486775,0 11,0 L90,0 Z M71.5,81 L18.5,81 C17.1192881,81 16,82.1192881 16,83.5 C16,84.8254834 17.0315359,85.9100387 18.3356243,85.9946823 L18.5,86 L71.5,86 C72.8807119,86 74,84.8807119 74,83.5 C74,82.1745166 72.9684641,81.0899613 71.6643757,81.0053177 L71.5,81 Z M71.5,57 L18.5,57 C17.1192881,57 16,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
        </svg>
      </li>
      <li>
        <svg fill="currentColor" viewBox="0 0 90 120">
          <path d="M90,0 L90,120 L11,120 C4.92486775,120 0,115.075132 0,109 L0,11 C0,4.92486775 4.92486775,0 11,0 L90,0 Z M71.5,81 L18.5,81 C17.1192881,81 16,82.1192881 16,83.5 C16,84.8254834 17.0315359,85.9100387 18.3356243,85.9946823 L18.5,86 L71.5,86 C72.8807119,86 74,84.8807119 74,83.5 C74,82.1745166 72.9684641,81.0899613 71.6643757,81.0053177 L71.5,81 Z M71.5,57 L18.5,57 C17.1192881,57 16,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
        </svg>
      </li>
      <li>
        <svg fill="currentColor" viewBox="0 0 90 120">
          <path d="M90,0 L90,120 L11,120 C4.92486775,120 0,115.075132 0,109 L0,11 C0,4.92486775 4.92486775,0 11,0 L90,0 Z M71.5,81 L18.5,81 C17.1192881,81 16,82.1192881 16,83.5 C16,84.8254834 17.0315359,85.9100387 18.3356243,85.9946823 L18.5,86 L71.5,86 C72.8807119,86 74,84.8807119 74,83.5 C74,82.1745166 72.9684641,81.0899613 71.6643757,81.0053177 L71.5,81 Z M71.5,57 L18.5,57 C17.1192881,57 16,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
        </svg>
      </li>
      <li>
        <svg fill="currentColor" viewBox="0 0 90 120">
          <path d="M90,0 L90,120 L11,120 C4.92486775,120 0,115.075132 0,109 L0,11 C0,4.92486775 4.92486775,0 11,0 L90,0 Z M71.5,81 L18.5,81 C17.1192881,81 16,82.1192881 16,83.5 C16,84.8254834 17.0315359,85.9100387 18.3356243,85.9946823 L18.5,86 L71.5,86 C72.8807119,86 74,84.8807119 74,83.5 C74,82.1745166 72.9684641,81.0899613 71.6643757,81.0053177 L71.5,81 Z M71.5,57 L18.5,57 C17.1192881,57 16,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
        </svg>
      </li>
      <li>
        <svg fill="currentColor" viewBox="0 0 90 120">
          <path d="M90,0 L90,120 L11,120 C4.92486775,120 0,115.075132 0,109 L0,11 C0,4.92486775 4.92486775,0 11,0 L90,0 Z M71.5,81 L18.5,81 C17.1192881,81 16,82.1192881 16,83.5 C16,84.8254834 17.0315359,85.9100387 18.3356243,85.9946823 L18.5,86 L71.5,86 C72.8807119,86 74,84.8807119 74,83.5 C74,82.1745166 72.9684641,81.0899613 71.6643757,81.0053177 L71.5,81 Z M71.5,57 L18.5,57 C17.1192881,57 16,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
        </svg>
      </li>
    </ul>
  </div><span>Loading</span></div>
<style>
/* From Uiverse.io by Nawsome - Tags: blue, loader, book */
.loader {
  --background: linear-gradient(135deg, #23C4F8, #275EFE);
  --shadow: rgba(39, 94, 254, 0.28);
  --text: #6C7486;
  --page: rgba(255, 255, 255, 0.36);
  --page-fold: rgba(255, 255, 255, 0.52);
  --duration: 3s;
  width: 200px;
  height: 140px;
  position: relative;
}

.loader:before, .loader:after {
  --r: -6deg;
  content: "";
  position: absolute;
  bottom: 8px;
  width: 120px;
  top: 80%;
  box-shadow: 0 16px 12px var(--shadow);
  transform: rotate(var(--r));
}

.loader:before {
  left: 4px;
}

.loader:after {
  --r: 6deg;
  right: 4px;
}

.loader div {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  position: relative;
  z-index: 1;
  perspective: 600px;
  box-shadow: 0 4px 6px var(--shadow);
  background-image: var(--background);
}

.loader div ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.loader div ul li {
  --r: 180deg;
  --o: 0;
  --c: var(--page);
  position: absolute;
  top: 10px;
  left: 10px;
  transform-origin: 100% 50%;
  color: var(--c);
  opacity: var(--o);
  transform: rotateY(var(--r));
  -webkit-animation: var(--duration) ease infinite;
  animation: var(--duration) ease infinite;
}

.loader div ul li:nth-child(2) {
  --c: var(--page-fold);
  -webkit-animation-name: page-2;
  animation-name: page-2;
}

.loader div ul li:nth-child(3) {
  --c: var(--page-fold);
  -webkit-animation-name: page-3;
  animation-name: page-3;
}

.loader div ul li:nth-child(4) {
  --c: var(--page-fold);
  -webkit-animation-name: page-4;
  animation-name: page-4;
}

.loader div ul li:nth-child(5) {
  --c: var(--page-fold);
  -webkit-animation-name: page-5;
  animation-name: page-5;
}

.loader div ul li svg {
  width: 90px;
  height: 120px;
  display: block;
}

.loader div ul li:first-child {
  --r: 0deg;
  --o: 1;
}

.loader div ul li:last-child {
  --o: 1;
}

.loader span {
  display: block;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 20px;
  text-align: center;
  color: var(--text);
}

@keyframes page-2 {
  0% {
    transform: rotateY(180deg);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  35%, 100% {
    opacity: 0;
  }

  50%, 100% {
    transform: rotateY(0deg);
  }
}

@keyframes page-3 {
  15% {
    transform: rotateY(180deg);
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  50%, 100% {
    opacity: 0;
  }

  65%, 100% {
    transform: rotateY(0deg);
  }
}

@keyframes page-4 {
  30% {
    transform: rotateY(180deg);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  65%, 100% {
    opacity: 0;
  }

  80%, 100% {
    transform: rotateY(0deg);
  }
}

@keyframes page-5 {
  45% {
    transform: rotateY(180deg);
    opacity: 0;
  }

  65% {
    opacity: 1;
  }

  80%, 100% {
    opacity: 0;
  }

  95%, 100% {
    transform: rotateY(0deg);
  }
}

</style>


================================================
FILE: loaders/Nawsome_dull-penguin-97.html
================================================
<div class="loader JS_on">
	<span class="binary"></span>
	<span class="binary"></span>
	<span class="getting-there">LOADING STUFF...</span>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.loader {
  width: 130px;
  height: 170px;
  position: relative;
  font-family: inherit;
}

.loader::before, .loader::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 30px;
  left: 15px;
  z-index: 1;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 20px solid #1b2a33;
  transform: scale(0);
  transition: all 0.2s ease;
}

.loader::after {
  border-right: 15px solid transparent;
  border-bottom: 20px solid #162229;
}

.loader .getting-there {
  width: 120%;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: -7%;
  font-size: 12px;
  letter-spacing: 2px;
  color: white;
}

.loader .binary {
  width: 100%;
  height: 140px;
  display: block;
  color: white;
  position: absolute;
  top: 0;
  left: 15px;
  z-index: 2;
  overflow: hidden;
}

.loader .binary::before, .loader .binary::after {
  font-family: "Lato";
  font-size: 24px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.loader .binary:nth-child(1)::before {
  content: "0";
  animation: a 1.1s linear infinite;
}

.loader .binary:nth-child(1)::after {
  content: "0";
  animation: b 1.3s linear infinite;
}

.loader .binary:nth-child(2)::before {
  content: "1";
  animation: c 0.9s linear infinite;
}

.loader .binary:nth-child(2)::after {
  content: "1";
  animation: d 0.7s linear infinite;
}

.loader.JS_on::before, .loader.JS_on::after {
  transform: scale(1);
}

@keyframes a {
  0% {
    transform: translate(30px, 0) rotate(30deg);
    opacity: 0;
  }

  100% {
    transform: translate(30px, 150px) rotate(-50deg);
    opacity: 1;
  }
}

@keyframes b {
  0% {
    transform: translate(50px, 0) rotate(-40deg);
    opacity: 0;
  }

  100% {
    transform: translate(40px, 150px) rotate(80deg);
    opacity: 1;
  }
}

@keyframes c {
  0% {
    transform: translate(70px, 0) rotate(10deg);
    opacity: 0;
  }

  100% {
    transform: translate(60px, 150px) rotate(70deg);
    opacity: 1;
  }
}

@keyframes d {
  0% {
    transform: translate(30px, 0) rotate(-50deg);
    opacity: 0;
  }

  100% {
    transform: translate(45px, 150px) rotate(30deg);
    opacity: 1;
  }
}

</style>


================================================
FILE: loaders/Nawsome_fluffy-seahorse-28.html
================================================
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" height="128px" width="128px" class="pl">
	<circle stroke-dashoffset="-376.4" stroke-dasharray="377 377" stroke-linecap="round" transform="rotate(-90,64,64)" stroke-width="8" stroke="hsl(3,90%,55%)" fill="none" r="60" cy="64" cx="64" class="pl__ring1"></circle>
	<circle stroke-dashoffset="-329.3" stroke-dasharray="329.9 329.9" stroke-linecap="round" transform="rotate(-90,64,64)" stroke-width="7" stroke="hsl(13,90%,55%)" fill="none" r="52.5" cy="64" cx="64" class="pl__ring2"></circle>
	<circle stroke-dashoffset="-288.6" stroke-dasharray="289 289" stroke-linecap="round" transform="rotate(-90,64,64)" stroke-width="6" stroke="hsl(23,90%,55%)" fill="none" r="46" cy="64" cx="64" class="pl__ring3"></circle>
	<circle stroke-dashoffset="-254" stroke-dasharray="254.5 254.5" stroke-linecap="round" transform="rotate(-90,64,64)" stroke-width="5" stroke="hsl(33,90%,55%)" fill="none" r="40.5" cy="64" cx="64" class="pl__ring4"></circle>
	<circle stroke-dashoffset="-225.8" stroke-dasharray="226.2 226.2" stroke-linecap="round" transform="rotate(-90,64,64)" stroke-width="4" stroke="hsl(43,90%,55%)" fill="none" r="36" cy="64" cx="64" class="pl__ring5"></circle>
	<circle stroke-dashoffset="-203.9" stroke-dasharray="204.2 204.2" stroke-linecap="round" transform="rotate(-90,64,64)" stroke-width="3" stroke="hsl(53,90%,55%)" fill="none" r="32.5" cy="64" cx="64" class="pl__ring6"></circle>
</svg>

<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.pl {
  width: 8em;
  height: 8em;
}

.pl circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.pl__ring1 {
  animation: ring1_ 4s 0s ease-in-out infinite;
}

.pl__ring2 {
  animation: ring2_ 4s 0.04s ease-in-out infinite;
}

.pl__ring3 {
  animation: ring3_ 4s 0.08s ease-in-out infinite;
}

.pl__ring4 {
  animation: ring4_ 4s 0.12s ease-in-out infinite;
}

.pl__ring5 {
  animation: ring5_ 4s 0.16s ease-in-out infinite;
}

.pl__ring6 {
  animation: ring6_ 4s 0.2s ease-in-out infinite;
}

/* Animations */
@keyframes ring1_ {
  from {
    stroke-dashoffset: -376.237129776;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -94.247778;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -376.237129776;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -94.247778;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -376.237129776;
    transform: rotate(4.75turn);
  }
}

@keyframes ring2_ {
  from {
    stroke-dashoffset: -329.207488554;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -82.46680575;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -329.207488554;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -82.46680575;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -329.207488554;
    transform: rotate(4.75turn);
  }
}

@keyframes ring3_ {
  from {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -72.2566298;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -72.2566298;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(4.75turn);
  }
}

@keyframes ring4_ {
  from {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -63.61725015;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -63.61725015;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(4.75turn);
  }
}

@keyframes ring5_ {
  from {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -56.5486668;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -56.5486668;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(4.75turn);
  }
}

@keyframes ring6_ {
  from {
    stroke-dashoffset: -203.795111962;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -51.05087975;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%, 50% {
    stroke-dashoffset: -203.795111962;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -51.05087975;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%, to {
    stroke-dashoffset: -203.795111962;
    transform: rotate(4.75turn);
  }
}
</style>


================================================
FILE: loaders/Nawsome_fresh-panther-41.html
================================================

  <div class="gearbox">
  <div class="overlay"></div>
    <div class="gear one">
      <div class="gear-inner">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
    <div class="gear two">
      <div class="gear-inner">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
    <div class="gear three">
      <div class="gear-inner">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
    <div class="gear four large">
      <div class="gear-inner">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
  </div>

<style>
/* From Uiverse.io by Nawsome - Tags: loader, gears */
@keyframes clockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes counter-clockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.gearbox {
  background: #111;
  height: 150px;
  width: 200px;
  position: relative;
  border: none;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
}

.gearbox .overlay {
  border-radius: 6px;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  box-shadow: inset 0px 0px 20px black;
  transition: background 0.2s;
}

.gearbox .overlay {
  background: transparent;
}

.gear {
  position: absolute;
  height: 60px;
  width: 60px;
  box-shadow: 0px -1px 0px 0px #888888, 0px 1px 0px 0px black;
  border-radius: 30px;
}

.gear.large {
  height: 120px;
  width: 120px;
  border-radius: 60px;
}

.gear.large:after {
  height: 96px;
  width: 96px;
  border-radius: 48px;
  margin-left: -48px;
  margin-top: -48px;
}

.gear.one {
  top: 12px;
  left: 10px;
}

.gear.two {
  top: 61px;
  left: 60px;
}

.gear.three {
  top: 110px;
  left: 10px;
}

.gear.four {
  top: 13px;
  left: 128px;
}

.gear:after {
  content: "";
  position: absolute;
  height: 36px;
  width: 36px;
  border-radius: 36px;
  background: #111;
  top: 50%;
  left: 50%;
  margin-left: -18px;
  margin-top: -18px;
  z-index: 3;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1), inset 0px 2px 0px 0px #090909, inset 0px -1px 0px 0px #888888;
}

.gear-inner {
  position: relative;
  height: 100%;
  width: 100%;
  background: #555;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.large .gear-inner {
  border-radius: 60px;
}

.gear.one .gear-inner {
  animation: counter-clockwise 3s infinite linear;
}

.gear.two .gear-inner {
  animation: clockwise 3s infinite linear;
}

.gear.three .gear-inner {
  animation: counter-clockwise 3s infinite linear;
}

.gear.four .gear-inner {
  animation: counter-clockwise 6s infinite linear;
}

.gear-inner .bar {
  background: #555;
  height: 16px;
  width: 76px;
  position: absolute;
  left: 50%;
  margin-left: -38px;
  top: 50%;
  margin-top: -8px;
  border-radius: 2px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.large .gear-inner .bar {
  margin-left: -68px;
  width: 136px;
}

.gear-inner .bar:nth-child(2) {
  transform: rotate(60deg);
}

.gear-inner .bar:nth-child(3) {
  transform: rotate(120deg);
}

.gear-inner .bar:nth-child(4) {
  transform: rotate(90deg);
}

.gear-inner .bar:nth-child(5) {
  transform: rotate(30deg);
}

.gear-inner .bar:nth-child(6) {
  transform: rotate(150deg);
}
</style>


================================================
FILE: loaders/Nawsome_friendly-parrot-96.html
================================================
<div class="container">
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.container {
  width: 200px;
  height: 150px;
  margin: 0 auto;
}

.ball {
  width: 10px;
  height: 10px;
  margin: 10px auto;
  border-radius: 50px;
}

.ball:nth-child(1) {
  background: #ffffff;
  animation: right2 1s infinite ease-in-out;
}

.ball:nth-child(2) {
  background: #ffffff;
  animation: left2 1.1s infinite ease-in-out;
}

.ball:nth-child(3) {
  background: #ffffff;
  animation: right2 1.05s infinite ease-in-out;
}

.ball:nth-child(4) {
  background: #ffffff;
  animation: left2 1.15s infinite ease-in-out;
}

.ball:nth-child(5) {
  background: #ffffff;
  animation: right2 1.1s infinite ease-in-out;
}

.ball:nth-child(6) {
  background: #ffffff;
  animation: left2 1.05s infinite ease-in-out;
}

.ball:nth-child(7) {
  background: #ffffff;
  animation: right2 1s infinite ease-in-out;
}

@keyframes right2 {
  0% {
    transform: translate(-15px);
  }

  50% {
    transform: translate(15px);
  }

  100% {
    transform: translate(-15px);
  }
}

@keyframes left2 {
  0% {
    transform: translate(15px);
  }

  50% {
    transform: translate(-15px);
  }

  100% {
    transform: translate(15px);
  }
}
</style>


================================================
FILE: loaders/Nawsome_hungry-pig-72.html
================================================

  <svg class="svg_preloader" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 248 248" style="enable-background:new 0 0 248 248;" xml:space="preserve">
<filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 60 -20"></feColorMatrix>
</filter>
<circle stroke="#fff" fill="none" stroke-width="3" cx="124" cy="124" r="120"></circle>
<g id="shape" filter="url(#goo)">
	<circle stroke="#fff" fill="none" stroke-width="10" cx="124" cy="124" r="105"></circle>
	<circle fill="#fff" cx="0" cy="0" r="36" transform="translate(124 124)">
		<animateTransform attributeName="transform" type="scale" additive="sum" values="1.3;0.55;0.55;1.3" keyTimes="0;0.4;0.6;1" dur="2s" repeatCount="indefinite"></animateTransform> 
	</circle>
	<circle fill="#fff" cx="0" cy="0" r="22">
		<animateMotion path="M124.1,124l-14.9-14.9c-22.3-22.3-2.5-60.3,28.4-54.4c13.3,2.6,26.1,9,36.4,19.4
		c10.1,10.1,16.5,22.4,19.2,35.4c6.5,31.3-31.7,51.9-54.3,29.3L124.1,124z" dur="2s" repeatCount="indefinite"></animateMotion>
	</circle>
	<circle fill="#fff" cx="0" cy="0" r="22">
		<animateMotion path="M124.1,124l15.2,15.2c22.2,22.2,2.5,60-28.3,54.2c-13.5-2.5-26.4-9-36.8-19.4c-8.9-8.9-14.9-19.5-18-30.7
		c-9.1-32.5,31.4-55.7,55.2-31.8L124.1,124z" dur="2s" repeatCount="indefinite"></animateMotion>
	</circle>
</g>
</svg>

<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.svg_preloader {
  width: 170px;
  height: 170px;
}
</style>


================================================
FILE: loaders/Nawsome_kind-mole-87.html
================================================
<div class="typewriter">
    <div class="slide"><i></i></div>
    <div class="paper"></div>
    <div class="keyboard"></div>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.typewriter {
  --blue: #5C86FF;
  --blue-dark: #275EFE;
  --key: #fff;
  --paper: #EEF0FD;
  --text: #D3D4EC;
  --tool: #FBC56C;
  --duration: 3s;
  position: relative;
  -webkit-animation: bounce05 var(--duration) linear infinite;
  animation: bounce05 var(--duration) linear infinite;
}

.typewriter .slide {
  width: 92px;
  height: 20px;
  border-radius: 3px;
  margin-left: 14px;
  transform: translateX(14px);
  background: linear-gradient(var(--blue), var(--blue-dark));
  -webkit-animation: slide05 var(--duration) ease infinite;
  animation: slide05 var(--duration) ease infinite;
}

.typewriter .slide:before, .typewriter .slide:after,
.typewriter .slide i:before {
  content: "";
  position: absolute;
  background: var(--tool);
}

.typewriter .slide:before {
  width: 2px;
  height: 8px;
  top: 6px;
  left: 100%;
}

.typewriter .slide:after {
  left: 94px;
  top: 3px;
  height: 14px;
  width: 6px;
  border-radius: 3px;
}

.typewriter .slide i {
  display: block;
  position: absolute;
  right: 100%;
  width: 6px;
  height: 4px;
  top: 4px;
  background: var(--tool);
}

.typewriter .slide i:before {
  right: 100%;
  top: -2px;
  width: 4px;
  border-radius: 2px;
  height: 14px;
}

.typewriter .paper {
  position: absolute;
  left: 24px;
  top: -26px;
  width: 40px;
  height: 46px;
  border-radius: 5px;
  background: var(--paper);
  transform: translateY(46px);
  -webkit-animation: paper05 var(--duration) linear infinite;
  animation: paper05 var(--duration) linear infinite;
}

.typewriter .paper:before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 7px;
  border-radius: 2px;
  height: 4px;
  transform: scaleY(0.8);
  background: var(--text);
  box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
}

.typewriter .keyboard {
  width: 120px;
  height: 56px;
  margin-top: -10px;
  z-index: 1;
  position: relative;
}

.typewriter .keyboard:before, .typewriter .keyboard:after {
  content: "";
  position: absolute;
}

.typewriter .keyboard:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  transform: perspective(10px) rotateX(2deg);
  transform-origin: 50% 100%;
}

.typewriter .keyboard:after {
  left: 2px;
  top: 25px;
  width: 11px;
  height: 4px;
  border-radius: 2px;
  box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  -webkit-animation: keyboard05 var(--duration) linear infinite;
  animation: keyboard05 var(--duration) linear infinite;
}

@keyframes bounce05 {
  85%, 92%, 100% {
    transform: translateY(0);
  }

  89% {
    transform: translateY(-4px);
  }

  95% {
    transform: translateY(2px);
  }
}

@keyframes slide05 {
  5% {
    transform: translateX(14px);
  }

  15%, 30% {
    transform: translateX(6px);
  }

  40%, 55% {
    transform: translateX(0);
  }

  65%, 70% {
    transform: translateX(-4px);
  }

  80%, 89% {
    transform: translateX(-12px);
  }

  100% {
    transform: translateX(14px);
  }
}

@keyframes paper05 {
  5% {
    transform: translateY(46px);
  }

  20%, 30% {
    transform: translateY(34px);
  }

  40%, 55% {
    transform: translateY(22px);
  }

  65%, 70% {
    transform: translateY(10px);
  }

  80%, 85% {
    transform: translateY(0);
  }

  92%, 100% {
    transform: translateY(46px);
  }
}

@keyframes keyboard05 {
  5%, 12%, 21%, 30%, 39%, 48%, 57%, 66%, 75%, 84% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  9% {
    box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  18% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  27% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  36% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
  }

  45% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  54% {
    box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  63% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
  }

  72% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  81% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
}
</style>


================================================
FILE: loaders/Nawsome_light-husky-91.html
================================================
<div class="loader">
  <div class="wrapper">
    <div class="circle"></div>
    <div class="line-1"></div>
    <div class="line-2"></div>
    <div class="line-3"></div>
    <div class="line-4"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader, placeholder */
.loader {
  position: relative;
  width: 240px;
  height: 130px;
  margin-bottom: 10px;
  border: 1px solid #d3d3d3;
  padding: 15px;
  background-color: #e3e3e3;
  overflow: hidden;
}

.loader:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(110deg, rgba(227, 227, 227, 0) 0%, rgba(227, 227, 227, 0) 40%, rgba(227, 227, 227, 0.5) 50%, rgba(227, 227, 227, 0) 60%, rgba(227, 227, 227, 0) 100%);
  animation: gradient-animation_2 1.2s linear infinite;
}

.loader .wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.loader .wrapper > div {
  background-color: #cacaca;
}

.loader .circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.loader .button {
  display: inline-block;
  height: 32px;
  width: 75px;
}

.loader .line-1 {
  position: absolute;
  top: 11px;
  left: 58px;
  height: 10px;
  width: 100px;
}

.loader .line-2 {
  position: absolute;
  top: 34px;
  left: 58px;
  height: 10px;
  width: 150px;
}

.loader .line-3 {
  position: absolute;
  top: 57px;
  left: 0px;
  height: 10px;
  width: 100%;
}

.loader .line-4 {
  position: absolute;
  top: 80px;
  left: 0px;
  height: 10px;
  width: 92%;
}

@keyframes gradient-animation_2 {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}
</style>


================================================
FILE: loaders/Nawsome_moody-dingo-3.html
================================================
<svg height="0" width="0">
    <defs>
        <filter color-interpolation-filters="sRGB" height="200%" y="-50%" width="200%" x="-50%" id="goo">
            <feGaussianBlur result="blur" stdDeviation="8" in="SourceGraphic"></feGaussianBlur>
            <feColorMatrix result="cm" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7" mode="matrix" in="blur"></feColorMatrix>
        </filter>
    </defs>
</svg>

<svg height="180" width="320" viewBox="0 0 320 180">
    <g filter="url(#goo)">
        <circle cy="90" cx="160" r="24" fill="#275EFE" class="circle"></circle>
        <circle cy="90" cx="160" r="24" fill="#275EFE" class="circle right"></circle>
    </g>
</svg>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.circle {
  animation: move571 4s linear infinite;
}

.circle.right {
  animation-direction: reverse;
}

@keyframes move571 {
  25% {
    transform: translateX(-32px);
  }

  75% {
    transform: translateX(32px);
  }
}
</style>


================================================
FILE: loaders/Nawsome_new-snail-22.html
================================================
<div class="semicircle">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.semicircle,
.semicircle div {
  /*  Adjust the size of the entire animation here.
      (Remove max size below to go above 300px.) */
  width: 170px;
  height: 170px;
  /* Adjust the speed or timing function of the animation here. */
  animation: 6s rotate141 infinite linear;
  background-repeat: no-repeat;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.semicircle div {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
}

.semicircle:before,
.semicircle div:before {
  content: '';
  width: 100%;
  height: 50%;
  display: block;
  background: radial-gradient(transparent, transparent 65%, #000 65%, #000);
  background-size: 100% 200%;
}

@keyframes rotate141 {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/Nawsome_odd-rat-61.html
================================================
<div class="triangles">
  <div class="tri invert"></div>
  <div class="tri invert"></div>
  <div class="tri"></div>
  <div class="tri invert"></div>
  <div class="tri invert"></div>
  <div class="tri"></div>
  <div class="tri invert"></div>
  <div class="tri"></div>
  <div class="tri invert"></div>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.triangles {
  transform: translate(-50%, -50%);
  height: 81px;
  width: 90px;
  position: absolute;
  left: 50%;
  top: 50%;
}

.tri {
  position: absolute;
  animation: pulse_51 750ms ease-in infinite;
  border-top: 27px solid #215A6D;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 0px;
}

.tri.invert {
  border-top: 0px;
  border-bottom: 27px solid #215A6D;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

.tri:nth-child(1) {
  left: 30px;
}

.tri:nth-child(2) {
  left: 15px;
  top: 27px;
  animation-delay: -125ms;
}

.tri:nth-child(3) {
  left: 30px;
  top: 27px;
}

.tri:nth-child(4) {
  left: 45px;
  top: 27px;
  animation-delay: -625ms;
}

.tri:nth-child(5) {
  top: 54px;
  animation-delay: -250ms;
}

.tri:nth-child(6) {
  top: 54px;
  left: 15px;
  animation-delay: -250ms;
}

.tri:nth-child(7) {
  top: 54px;
  left: 30px;
  animation-delay: -375ms;
}

.tri:nth-child(8) {
  top: 54px;
  left: 45px;
  animation-delay: -500ms;
}

.tri:nth-child(9) {
  top: 54px;
  left: 60px;
  animation-delay: -500ms;
}

@keyframes pulse_51 {
  0% {
    opacity: 1;
  }

  16.666% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
</style>


================================================
FILE: loaders/Nawsome_purple-mule-73.html
================================================
<div class="spinner"></div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
/* Normal Usage */
.spinner:before {
  transform: rotateX(60deg) rotateY(45deg) rotateZ(45deg);
  animation: 750ms rotateBefore infinite linear reverse;
}

.spinner:after {
  transform: rotateX(240deg) rotateY(45deg) rotateZ(45deg);
  animation: 750ms rotateAfter infinite linear;
}

.spinner:before,
.spinner:after {
  box-sizing: border-box;
  content: '';
  display: block;
  position: absolute;
  margin-top: -5em;
  margin-left: -5em;
  width: 10em;
  height: 10em;
  transform-style: preserve-3d;
  transform-origin: 50%;
  transform: rotateY(50%);
  perspective-origin: 50% 50%;
  perspective: 340px;
  background-size: 10em 10em;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2NnB4IiBoZWlnaHQ9IjI5N3B4IiB2aWV3Qm94PSIwIDAgMjY2IDI5NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8dGl0bGU+c3Bpbm5lcjwvdGl0bGU+CiAgICA8ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8cGF0aCBkPSJNMTcxLjUwNzgxMywzLjI1MDAwMDM4IEMyMjYuMjA4MTgzLDEyLjg1NzcxMTEgMjk3LjExMjcyMiw3MS40OTEyODIzIDI1MC44OTU1OTksMTA4LjQxMDE1NSBDMjE2LjU4MjAyNCwxMzUuODIwMzEgMTg2LjUyODQwNSw5Ny4wNjI0OTY0IDE1Ni44MDA3NzQsODUuNzczNDM0NiBDMTI3LjA3MzE0Myw3NC40ODQzNzIxIDc2Ljg4ODQ2MzIsODQuMjE2MTQ2MiA2MC4xMjg5MDY1LDEwOC40MTAxNTMgQy0xNS45ODA0Njg1LDIxOC4yODEyNDcgMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IDE0NS4yNzczNDQsMjk2LjY2Nzk2OCBDMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IC0yNS40NDkyMTg3LDI1Ny4yNDIxOTggMy4zOTg0Mzc1LDEwOC40MTAxNTUgQzE2LjMwNzA2NjEsNDEuODExNDE3NCA4NC43Mjc1ODI5LC0xMS45OTIyOTg1IDE3MS41MDc4MTMsMy4yNTAwMDAzOCBaIiBpZD0iUGF0aC0xIiBmaWxsPSIjMDAwMDAwIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
}
/* sitNSpin.less */
@keyframes rotateBefore {
  from {
    transform: rotateX(60deg) rotateY(45deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(60deg) rotateY(45deg) rotateZ(-360deg);
  }
}

@keyframes rotateAfter {
  from {
    transform: rotateX(240deg) rotateY(45deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(240deg) rotateY(45deg) rotateZ(360deg);
  }
}
</style>


================================================
FILE: loaders/Nawsome_slimy-dodo-36.html
================================================
<div class="loading">
  <div class="side front"></div>
  <div class="side back"></div>
  <div class="side top"></div>
  <div class="side bottom"></div>
  <div class="side left"></div>
  <div class="side right"></div>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.loading {
  width: 100px;
  height: 100px;
  background: white;
  border-radius: 12px;
  position: relative;
  transform-style: preserve-3d;
  animation: loading_4123 2s linear infinite;
}

.side {
  background: white;
  border-radius: 12px;
}

.front, .back {
  width: 100px;
  height: 100px;
}

.front, .back {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.back {
  transform: translateZ(-10px);
}

.left, .right {
  width: 10px;
  height: calc(100% - 12px);
  top: 6px;
  position: absolute;
  background: #efefef;
}

.left {
  left: 0;
  transform-origin: 0;
  transform: rotateY(90deg);
}

.right {
  right: 0;
  transform-origin: 100%;
  transform: rotateY(-90deg);
}

.top, .bottom {
  width: calc(100% - 12px);
  height: 10px;
  position: absolute;
  left: 6px;
  background: #efefef;
}

.top {
  top: -10px;
  transform-origin: 0 100%;
  transform: rotateX(90deg);
}

.bottom {
  bottom: -10px;
  transform-origin: 0 0;
  transform: rotateX(-90deg);
}

@keyframes loading_4123 {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(180deg) rotateX(-180deg);
  }
}
</style>


================================================
FILE: loaders/Nawsome_slimy-tiger-93.html
================================================

<div class="loadingspinner">
  <div id="square1"></div>
  <div id="square2"></div>
  <div id="square3"></div>
  <div id="square4"></div>
  <div id="square5"></div>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.loadingspinner {
  --square: 26px;
  --offset: 30px;
  --duration: 2.4s;
  --delay: 0.2s;
  --timing-function: ease-in-out;
  --in-duration: 0.4s;
  --in-delay: 0.1s;
  --in-timing-function: ease-out;
  width: calc( 3 * var(--offset) + var(--square));
  height: calc( 2 * var(--offset) + var(--square));
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 30px;
  position: relative;
}

.loadingspinner div {
  display: inline-block;
  background: darkorange;
    /*background: var(--text-color);*/
    /*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);*/
  border: none;
  border-radius: 2px;
  width: var(--square);
  height: var(--square);
  position: absolute;
  padding: 0px;
  margin: 0px;
  font-size: 6pt;
  color: black;
}

.loadingspinner #square1 {
  left: calc( 0 * var(--offset) );
  top: calc( 0 * var(--offset) );
  animation: square1 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square2 {
  left: calc( 0 * var(--offset) );
  top: calc( 1 * var(--offset) );
  animation: square2 var(--duration) var(--delay) var(--timing-function) infinite,
              squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square3 {
  left: calc( 1 * var(--offset) );
  top: calc( 1 * var(--offset) );
  animation: square3 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square4 {
  left: calc( 2 * var(--offset) );
  top: calc( 1 * var(--offset) );
  animation: square4 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square5 {
  left: calc( 3 * var(--offset) );
  top: calc( 1 * var(--offset) );
  animation: square5 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;
}

@keyframes square1 {
  0% {
    left: calc( 0 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

  8.333% {
    left: calc( 0 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  100% {
    left: calc( 0 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }
}

@keyframes square2 {
  0% {
    left: calc( 0 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  8.333% {
    left: calc( 0 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

  16.67% {
    left: calc( 1 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

  25.00% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  83.33% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  91.67% {
    left: calc( 1 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

  100% {
    left: calc( 0 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }
}

@keyframes square3 {
  0%,100% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  16.67% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  25.00% {
    left: calc( 1 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

  33.33% {
    left: calc( 2 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

  41.67% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  66.67% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  75.00% {
    left: calc( 2 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

  83.33% {
    left: calc( 1 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

  91.67% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }
}

@keyframes square4 {
  0% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  33.33% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  41.67% {
    left: calc( 2 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

  50.00% {
    left: calc( 3 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

  58.33% {
    left: calc( 3 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  100% {
    left: calc( 3 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }
}

@keyframes square5 {
  0% {
    left: calc( 3 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  50.00% {
    left: calc( 3 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  58.33% {
    left: calc( 3 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

  66.67% {
    left: calc( 2 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

  75.00% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

  100% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }
}

@keyframes squarefadein {
  0% {
    transform: scale(0.75);
    opacity: 0.0;
  }

  100% {
    transform: scale(1.0);
    opacity: 1.0;
  }
}
</style>


================================================
FILE: loaders/Nawsome_sour-fly-72.html
================================================
<div class="cube">
  <div class="topD"></div>
  <div>
    <span style="--i:0"></span>
    <span style="--i:1"></span>
    <span style="--i:2"></span>
    <span style="--i:3"></span>
  </div>

  <div class="cube2">
    <div>
      <span style="--i:0"></span>
      <span style="--i:1"></span>
      <span style="--i:2"></span>
      <span style="--i:3"></span>
    </div>

    <div class="cube3">
      <div class="top3"></div>
      <div>
        <span style="--i:0"></span>
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
      </div>

    </div>

  </div>
</div>

<style>
/* From Uiverse.io by Nawsome - Tags: 3d, loader, cube */
.cube {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transform: rotateX(-30deg);
  animation: animateD 8s linear infinite;
}

@keyframes animateD {
  0% {
    transform: rotateX(-15deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(-15deg) rotateY(-360deg);
  }
}

.cube div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.cube2 {
  position: relative;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  animation: animateD2 5s ease-out infinite alternate;
}

@keyframes animateD2 {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(180deg) rotateY(-360deg);
  }
}

.cube2 div {
  position: absolute;
  top: 35px;
  left: 0;
  width: 65%;
  height: 65%;
  transform-style: preserve-3d;
}

.cube2 div span {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 65%;
  height: 65%;
  background: transparent;
  border: 2px solid #7dff99;
  transform: rotateY(calc(90deg * var(--i))) translateZ(62px);
}

.cube3 {
  position: absolute;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transform: rotateX(-30deg);
  animation: animateD3 1s ease-in-out infinite alternate;
}

@keyframes animateD3 {
  0% {
    transform: rotateX(-90deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(90deg) rotateY(45deg);
  }
}

.cube3 div {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 15%;
  height: 15%;
  transform-style: preserve-3d;
}

.cube3 div span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #7dff99;
  transform: rotateY(calc(90deg * var(--i))) translateZ(14px);
  box-shadow: 0px 0px 7px #7dff99;
}

.top3 {
  position: absolute;
  top: 0;
  left: 0;
  background: #7dff99;
  transform: rotateX(90deg) translateZ(14px);
  box-shadow: 0px 0px 10px #7dff99;
}


</style>


================================================
FILE: loaders/Nawsome_spicy-wolverine-85.html
================================================
<div class="loader">
  <div class="loader__bar"></div>
  <div class="loader__bar"></div>
  <div class="loader__bar"></div>
  <div class="loader__bar"></div>
  <div class="loader__bar"></div>
  <div class="loader__ball"></div>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.loader {
  position: relative;
  width: 75px;
  height: 100px;
}

.loader__bar {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 50%;
  background: rgb(0, 0, 0);
  transform-origin: center bottom;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.loader__bar:nth-child(1) {
  left: 0px;
  transform: scale(1, 0.2);
  -webkit-animation: barUp1 4s infinite;
  animation: barUp1 4s infinite;
}

.loader__bar:nth-child(2) {
  left: 15px;
  transform: scale(1, 0.4);
  -webkit-animation: barUp2 4s infinite;
  animation: barUp2 4s infinite;
}

.loader__bar:nth-child(3) {
  left: 30px;
  transform: scale(1, 0.6);
  -webkit-animation: barUp3 4s infinite;
  animation: barUp3 4s infinite;
}

.loader__bar:nth-child(4) {
  left: 45px;
  transform: scale(1, 0.8);
  -webkit-animation: barUp4 4s infinite;
  animation: barUp4 4s infinite;
}

.loader__bar:nth-child(5) {
  left: 60px;
  transform: scale(1, 1);
  -webkit-animation: barUp5 4s infinite;
  animation: barUp5 4s infinite;
}

.loader__ball {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 10px;
  height: 10px;
  background: rgb(44, 143, 255);
  border-radius: 50%;
  -webkit-animation: ball624 4s infinite;
  animation: ball624 4s infinite;
}

@keyframes ball624 {
  0% {
    transform: translate(0, 0);
  }

  5% {
    transform: translate(8px, -14px);
  }

  10% {
    transform: translate(15px, -10px);
  }

  17% {
    transform: translate(23px, -24px);
  }

  20% {
    transform: translate(30px, -20px);
  }

  27% {
    transform: translate(38px, -34px);
  }

  30% {
    transform: translate(45px, -30px);
  }

  37% {
    transform: translate(53px, -44px);
  }

  40% {
    transform: translate(60px, -40px);
  }

  50% {
    transform: translate(60px, 0);
  }

  57% {
    transform: translate(53px, -14px);
  }

  60% {
    transform: translate(45px, -10px);
  }

  67% {
    transform: translate(37px, -24px);
  }

  70% {
    transform: translate(30px, -20px);
  }

  77% {
    transform: translate(22px, -34px);
  }

  80% {
    transform: translate(15px, -30px);
  }

  87% {
    transform: translate(7px, -44px);
  }

  90% {
    transform: translate(0, -40px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@-webkit-keyframes barUp1 {
  0% {
    transform: scale(1, 0.2);
  }

  40% {
    transform: scale(1, 0.2);
  }

  50% {
    transform: scale(1, 1);
  }

  90% {
    transform: scale(1, 1);
  }

  100% {
    transform: scale(1, 0.2);
  }
}

@keyframes barUp1 {
  0% {
    transform: scale(1, 0.2);
  }

  40% {
    transform: scale(1, 0.2);
  }

  50% {
    transform: scale(1, 1);
  }

  90% {
    transform: scale(1, 1);
  }

  100% {
    transform: scale(1, 0.2);
  }
}

@-webkit-keyframes barUp2 {
  0% {
    transform: scale(1, 0.4);
  }

  40% {
    transform: scale(1, 0.4);
  }

  50% {
    transform: scale(1, 0.8);
  }

  90% {
    transform: scale(1, 0.8);
  }

  100% {
    transform: scale(1, 0.4);
  }
}

@keyframes barUp2 {
  0% {
    transform: scale(1, 0.4);
  }

  40% {
    transform: scale(1, 0.4);
  }

  50% {
    transform: scale(1, 0.8);
  }

  90% {
    transform: scale(1, 0.8);
  }

  100% {
    transform: scale(1, 0.4);
  }
}

@-webkit-keyframes barUp3 {
  0% {
    transform: scale(1, 0.6);
  }

  100% {
    transform: scale(1, 0.6);
  }
}

@keyframes barUp3 {
  0% {
    transform: scale(1, 0.6);
  }

  100% {
    transform: scale(1, 0.6);
  }
}

@-webkit-keyframes barUp4 {
  0% {
    transform: scale(1, 0.8);
  }

  40% {
    transform: scale(1, 0.8);
  }

  50% {
    transform: scale(1, 0.4);
  }

  90% {
    transform: scale(1, 0.4);
  }

  100% {
    transform: scale(1, 0.8);
  }
}

@keyframes barUp4 {
  0% {
    transform: scale(1, 0.8);
  }

  40% {
    transform: scale(1, 0.8);
  }

  50% {
    transform: scale(1, 0.4);
  }

  90% {
    transform: scale(1, 0.4);
  }

  100% {
    transform: scale(1, 0.8);
  }
}

@-webkit-keyframes barUp5 {
  0% {
    transform: scale(1, 1);
  }

  40% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1, 0.2);
  }

  90% {
    transform: scale(1, 0.2);
  }

  100% {
    transform: scale(1, 1);
  }
}

@keyframes barUp5 {
  0% {
    transform: scale(1, 1);
  }

  40% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1, 0.2);
  }

  90% {
    transform: scale(1, 0.2);
  }

  100% {
    transform: scale(1, 1);
  }
}
</style>


================================================
FILE: loaders/Nawsome_tall-monkey-16.html
================================================
<div class="loading">
  <svg xmlns="http://www.w3.org/2000/svg" width="124" height="124" viewBox="0 0 124 124">
    <circle class="circle-loading" cx="62" cy="62" r="59" fill="none" stroke="hsl(271, 76%, 74%)" stroke-width="6px"></circle>
    <circle class="circle" cx="62" cy="62" r="59" fill="none" stroke="hsl(271, 76%, 53%)" stroke-width="6px" stroke-linecap="round"></circle>
    <polyline class="check" points="73.56 48.63 57.88 72.69 49.38 62" fill="none" stroke="hsl(271, 76%, 53%)" stroke-width="6px" stroke-linecap="round"></polyline>
  </svg>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.loading {
  width: 124px;
  height: 124px;
}

.loading svg {
  display: block;
  width: 100%;
  height: 100%;
}

.circle {
  transform: rotate(-90deg);
  transform-origin: center;
  stroke-dasharray: 380;
  stroke-dashoffset: 380;
  animation: circle_4 2s ease-in-out forwards;
}

.check {
  stroke-dasharray: 45;
  stroke-dashoffset: 45;
  animation: check_4 0.2s 2s ease-in-out forwards;
}

@keyframes circle_4 {
  0% {
    stroke-dashoffset: 380;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes check_4 {
  0% {
    stroke-dashoffset: 45;
  }

  100% {
    stroke-dashoffset: 90;
  }
}
</style>


================================================
FILE: loaders/Nawsome_tender-swan-29.html
================================================

		<div class="socket">
			<div class="gel center-gel">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c1 r1">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c2 r1">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c3 r1">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c4 r1">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c5 r1">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c6 r1">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			
			<div class="gel c7 r2">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			
			<div class="gel c8 r2">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c9 r2">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c10 r2">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c11 r2">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c12 r2">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c13 r2">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c14 r2">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c15 r2">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c16 r2">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c17 r2">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c18 r2">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c19 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c20 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c21 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c22 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c23 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c24 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c25 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c26 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c28 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c29 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c30 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c31 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c32 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c33 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c34 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c35 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c36 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			<div class="gel c37 r3">
				<div class="hex-brick h1"></div>
				<div class="hex-brick h2"></div>
				<div class="hex-brick h3"></div>
			</div>
			
		</div>
	
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.socket {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  margin-top: -100px;
}

.hex-brick {
  background: #000000;
  width: 30px;
  height: 17px;
  position: absolute;
  top: 5px;
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

.h2 {
  transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
}

.h3 {
  transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
}

.gel {
  height: 30px;
  width: 30px;
  transition: all .3s;
  -webkit-transition: all .3s;
  position: absolute;
  top: 50%;
  left: 50%;
}

.center-gel {
  margin-left: -15px;
  margin-top: -15px;
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

.c1 {
  margin-left: -47px;
  margin-top: -15px;
}

.c2 {
  margin-left: -31px;
  margin-top: -43px;
}

.c3 {
  margin-left: 1px;
  margin-top: -43px;
}

.c4 {
  margin-left: 17px;
  margin-top: -15px;
}

.c5 {
  margin-left: -31px;
  margin-top: 13px;
}

.c6 {
  margin-left: 1px;
  margin-top: 13px;
}

.c7 {
  margin-left: -63px;
  margin-top: -43px;
}

.c8 {
  margin-left: 33px;
  margin-top: -43px;
}

.c9 {
  margin-left: -15px;
  margin-top: 41px;
}

.c10 {
  margin-left: -63px;
  margin-top: 13px;
}

.c11 {
  margin-left: 33px;
  margin-top: 13px;
}

.c12 {
  margin-left: -15px;
  margin-top: -71px;
}

.c13 {
  margin-left: -47px;
  margin-top: -71px;
}

.c14 {
  margin-left: 17px;
  margin-top: -71px;
}

.c15 {
  margin-left: -47px;
  margin-top: 41px;
}

.c16 {
  margin-left: 17px;
  margin-top: 41px;
}

.c17 {
  margin-left: -79px;
  margin-top: -15px;
}

.c18 {
  margin-left: 49px;
  margin-top: -15px;
}

.c19 {
  margin-left: -63px;
  margin-top: -99px;
}

.c20 {
  margin-left: 33px;
  margin-top: -99px;
}

.c21 {
  margin-left: 1px;
  margin-top: -99px;
}

.c22 {
  margin-left: -31px;
  margin-top: -99px;
}

.c23 {
  margin-left: -63px;
  margin-top: 69px;
}

.c24 {
  margin-left: 33px;
  margin-top: 69px;
}

.c25 {
  margin-left: 1px;
  margin-top: 69px;
}

.c26 {
  margin-left: -31px;
  margin-top: 69px;
}

.c27 {
  margin-left: -79px;
  margin-top: -15px;
}

.c28 {
  margin-left: -95px;
  margin-top: -43px;
}

.c29 {
  margin-left: -95px;
  margin-top: 13px;
}

.c30 {
  margin-left: 49px;
  margin-top: 41px;
}

.c31 {
  margin-left: -79px;
  margin-top: -71px;
}

.c32 {
  margin-left: -111px;
  margin-top: -15px;
}

.c33 {
  margin-left: 65px;
  margin-top: -43px;
}

.c34 {
  margin-left: 65px;
  margin-top: 13px;
}

.c35 {
  margin-left: -79px;
  margin-top: 41px;
}

.c36 {
  margin-left: 49px;
  margin-top: -71px;
}

.c37 {
  margin-left: 81px;
  margin-top: -15px;
}

.r1 {
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .2s;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .2s;
}

.r2 {
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .4s;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .4s;
}

.r3 {
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .6s;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .6s;
}

.r1 > .hex-brick {
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .2s;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .2s;
}

.r2 > .hex-brick {
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .4s;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .4s;
}

.r3 > .hex-brick {
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .6s;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .6s;
}

@keyframes pulse00 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.01);
    transform: scale(0.01);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes fade00 {
  0% {
    background: #252525;
  }

  50% {
    background: #000000;
  }

  100% {
    background: #353535;
  }
}

</style>


================================================
FILE: loaders/Nawsome_terrible-dog-7.html
================================================
<div class="blobs">
	<div class="blob-center"></div>
	<div class="blob"></div>
	<div class="blob"></div>
	<div class="blob"></div>
	<div class="blob"></div>
	<div class="blob"></div>
	<div class="blob"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo"></feColorMatrix>
      <feBlend in="SourceGraphic" in2="goo"></feBlend>
  	</filter>
  </defs>
</svg>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.blobs {
  width: 300px;
  height: 300px;
  position: absolute;
  overflow: hidden;
  border-radius: 70px;
  transform-style: preserve-3d;
}

.blobs .blob-center {
  transform-style: preserve-3d;
  position: absolute;
  background: #1d1d1d;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform-origin: left top;
  transform: scale(0.9) translate(-50%, -50%);
  animation: blob-grow_2 linear 3.4s infinite;
  border-radius: 50%;
  box-shadow: 0 -10px 40px -5px #1d1d1d;
}

.blob {
  position: absolute;
  background: #1d1d1d;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  animation: blobs_2 ease-out 3.4s infinite;
  transform: scale(0.9) translate(-50%, -50%);
  transform-origin: center top;
  opacity: 0;
}

.blob:nth-child(1) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.blob:nth-child(2) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.blob:nth-child(3) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.blob:nth-child(4) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.blob:nth-child(5) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@keyframes blobs_2 {
  0% {
    opacity: 0;
    transform: scale(0) translate(calc(-330px - 50%), -50%);
  }

  1% {
    opacity: 1;
  }

  35%, 65% {
    opacity: 1;
    transform: scale(0.9) translate(-50%, -50%);
  }

  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(0) translate(calc(330px - 50%), -50%);
  }
}

@keyframes blob-grow_2 {
  0%, 39% {
    transform: scale(0) translate(-50%, -50%);
  }

  40%, 42% {
    transform: scale(1, 0.9) translate(-50%, -50%);
  }

  43%, 44% {
    transform: scale(1.2, 1.1) translate(-50%, -50%);
  }

  45%, 46% {
    transform: scale(1.3, 1.2) translate(-50%, -50%);
  }

  47%, 48% {
    transform: scale(1.4, 1.3) translate(-50%, -50%);
  }

  52% {
    transform: scale(1.5, 1.4) translate(-50%, -50%);
  }

  54% {
    transform: scale(1.7, 1.6) translate(-50%, -50%);
  }

  58% {
    transform: scale(1.8, 1.7) translate(-50%, -50%);
  }

  68%, 70% {
    transform: scale(1.7, 1.5) translate(-50%, -50%);
  }

  78% {
    transform: scale(1.6, 1.4) translate(-50%, -50%);
  }

  80%, 81% {
    transform: scale(1.5, 1.4) translate(-50%, -50%);
  }

  82%, 83% {
    transform: scale(1.4, 1.3) translate(-50%, -50%);
  }

  84%, 85% {
    transform: scale(1.3, 1.2) translate(-50%, -50%);
  }

  86%, 87% {
    transform: scale(1.2, 1.1) translate(-50%, -50%);
  }

  90%, 91% {
    transform: scale(1, 0.9) translate(-50%, -50%);
  }

  92%, 100% {
    transform: scale(0) translate(-50%, -50%);
  }
}
</style>


================================================
FILE: loaders/Nawsome_tidy-panda-70.html
================================================
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg" class="loader">
<defs>
    <path id="move-path" d="M102.546 83.5C109.859 70.8333 128.141 70.8333 135.454 83.5L157.971 122.5C165.284 135.167 156.143 151 141.517 151H96.4833C81.8571 151 72.7158 135.167 80.0289 122.5L102.546 83.5Z" fill="#D9D9D9"></path>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 60 -32"></feColorMatrix>
    </filter>
</defs>
<g filter="url(#goo)">
    <circle cx="119" cy="74" r="20" stroke="#6f8191" stroke-width="8"></circle>
    <circle cx="79" cy="141" r="20" stroke="#6f8191" stroke-width="8"></circle>
    <circle cx="157" cy="141" r="20" stroke="#6f8191" stroke-width="8"></circle>
    <circle cx="0" cy="0" r="14" fill="#6f8191">
        <animateMotion path="M102.546 83.5C109.859 70.8333 128.141 70.8333 135.454 83.5L157.971 122.5C165.284 135.167 156.143 151 141.517 151H96.4833C81.8571 151 72.7158 135.167 80.0289 122.5L102.546 83.5Z" dur="2s" repeatCount="indefinite"></animateMotion>
    </circle> 
</g>
</svg>


<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.loader {
  height: 20vh;
  width: 20vh;
  max-height: 480px;
  min-width: 480px;
}
</style>


================================================
FILE: loaders/Nawsome_ugly-skunk-66.html
================================================
<div class="container">
	<div class="loader"></div>
	<div class="loader"></div>
	<div class="loader"></div>
</div>

<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 160px;
  height: 100px;
  margin-left: -80px;
  margin-top: -50px;
  border-radius: 5px;
  background: #1e3f57;
  animation: dot1_ 3s cubic-bezier(0.55,0.3,0.24,0.99) infinite;
}

.loader:nth-child(2) {
  z-index: 11;
  width: 150px;
  height: 90px;
  margin-top: -45px;
  margin-left: -75px;
  border-radius: 3px;
  background: #3c517d;
  animation-name: dot2_;
}

.loader:nth-child(3) {
  z-index: 12;
  width: 40px;
  height: 20px;
  margin-top: 50px;
  margin-left: -20px;
  border-radius: 0 0 5px 5px;
  background: #6bb2cd;
  animation-name: dot3_;
}

@keyframes dot1_ {
  3%,97% {
    width: 160px;
    height: 100px;
    margin-top: -50px;
    margin-left: -80px;
  }

  30%,36% {
    width: 80px;
    height: 120px;
    margin-top: -60px;
    margin-left: -40px;
  }

  63%,69% {
    width: 40px;
    height: 80px;
    margin-top: -40px;
    margin-left: -20px;
  }
}

@keyframes dot2_ {
  3%,97% {
    height: 90px;
    width: 150px;
    margin-left: -75px;
    margin-top: -45px;
  }

  30%,36% {
    width: 70px;
    height: 96px;
    margin-left: -35px;
    margin-top: -48px;
  }

  63%,69% {
    width: 32px;
    height: 60px;
    margin-left: -16px;
    margin-top: -30px;
  }
}

@keyframes dot3_ {
  3%,97% {
    height: 20px;
    width: 40px;
    margin-left: -20px;
    margin-top: 50px;
  }

  30%,36% {
    width: 8px;
    height: 8px;
    margin-left: -5px;
    margin-top: 49px;
    border-radius: 8px;
  }

  63%,69% {
    width: 16px;
    height: 4px;
    margin-left: -8px;
    margin-top: -37px;
    border-radius: 10px;
  }
}
</style>


================================================
FILE: loaders/Nawsome_wet-mayfly-23.html
================================================
<div aria-label="Orange and tan hamster running in a metal wheel" role="img" class="wheel-and-hamster">
	<div class="wheel"></div>
	<div class="hamster">
		<div class="hamster__body">
			<div class="hamster__head">
				<div class="hamster__ear"></div>
				<div class="hamster__eye"></div>
				<div class="hamster__nose"></div>
			</div>
			<div class="hamster__limb hamster__limb--fr"></div>
			<div class="hamster__limb hamster__limb--fl"></div>
			<div class="hamster__limb hamster__limb--br"></div>
			<div class="hamster__limb hamster__limb--bl"></div>
			<div class="hamster__tail"></div>
		</div>
	</div>
	<div class="spoke"></div>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader, hamster, wheel, svg, animal */
.wheel-and-hamster {
  --dur: 1s;
  position: relative;
  width: 12em;
  height: 12em;
  font-size: 14px;
}

.wheel,
.hamster,
.hamster div,
.spoke {
  position: absolute;
}

.wheel,
.spoke {
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wheel {
  background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);
  z-index: 2;
}

.hamster {
  animation: hamster var(--dur) ease-in-out infinite;
  top: 50%;
  left: calc(50% - 3.5em);
  width: 7em;
  height: 3.75em;
  transform: rotate(4deg) translate(-0.8em,1.85em);
  transform-origin: 50% 0;
  z-index: 1;
}

.hamster__head {
  animation: hamsterHead var(--dur) ease-in-out infinite;
  background: hsl(30,90%,55%);
  border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
  box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
		0.75em -1.55em 0 hsl(30,90%,90%) inset;
  top: 0;
  left: -2em;
  width: 2.75em;
  height: 2.5em;
  transform-origin: 100% 50%;
}

.hamster__ear {
  animation: hamsterEar var(--dur) ease-in-out infinite;
  background: hsl(0,90%,85%);
  border-radius: 50%;
  box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
  top: -0.25em;
  right: -0.25em;
  width: 0.75em;
  height: 0.75em;
  transform-origin: 50% 75%;
}

.hamster__eye {
  animation: hamsterEye var(--dur) linear infinite;
  background-color: hsl(0,0%,0%);
  border-radius: 50%;
  top: 0.375em;
  left: 1.25em;
  width: 0.5em;
  height: 0.5em;
}

.hamster__nose {
  background: hsl(0,90%,75%);
  border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
  top: 0.75em;
  left: 0;
  width: 0.2em;
  height: 0.25em;
}

.hamster__body {
  animation: hamsterBody var(--dur) ease-in-out infinite;
  background: hsl(30,90%,90%);
  border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
  box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
		0.15em -0.5em 0 hsl(30,90%,80%) inset;
  top: 0.25em;
  left: 2em;
  width: 4.5em;
  height: 3em;
  transform-origin: 17% 50%;
  transform-style: preserve-3d;
}

.hamster__limb--fr,
.hamster__limb--fl {
  clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
  top: 2em;
  left: 0.5em;
  width: 1em;
  height: 1.5em;
  transform-origin: 50% 0;
}

.hamster__limb--fr {
  animation: hamsterFRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
  transform: rotate(15deg) translateZ(-1px);
}

.hamster__limb--fl {
  animation: hamsterFLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
  transform: rotate(15deg);
}

.hamster__limb--br,
.hamster__limb--bl {
  border-radius: 0.75em 0.75em 0 0;
  clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
  top: 1em;
  left: 2.8em;
  width: 1.5em;
  height: 2.5em;
  transform-origin: 50% 30%;
}

.hamster__limb--br {
  animation: hamsterBRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
  transform: rotate(-25deg) translateZ(-1px);
}

.hamster__limb--bl {
  animation: hamsterBLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
  transform: rotate(-25deg);
}

.hamster__tail {
  animation: hamsterTail var(--dur) linear infinite;
  background: hsl(0,90%,85%);
  border-radius: 0.25em 50% 50% 0.25em;
  box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
  top: 1.5em;
  right: -0.5em;
  width: 1em;
  height: 0.5em;
  transform: rotate(30deg) translateZ(-1px);
  transform-origin: 0.25em 0.25em;
}

.spoke {
  animation: spoke var(--dur) linear infinite;
  background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
		linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;
}

/* Animations */
@keyframes hamster {
  from, to {
    transform: rotate(4deg) translate(-0.8em,1.85em);
  }

  50% {
    transform: rotate(0) translate(-0.8em,1.85em);
  }
}

@keyframes hamsterHead {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(8deg);
  }
}

@keyframes hamsterEye {
  from, 90%, to {
    transform: scaleY(1);
  }

  95% {
    transform: scaleY(0);
  }
}

@keyframes hamsterEar {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(12deg);
  }
}

@keyframes hamsterBody {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-2deg);
  }
}

@keyframes hamsterFRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(50deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-30deg) translateZ(-1px);
  }
}

@keyframes hamsterFLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-30deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(50deg);
  }
}

@keyframes hamsterBRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-60deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(20deg) translateZ(-1px);
  }
}

@keyframes hamsterBLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(20deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-60deg);
  }
}

@keyframes hamsterTail {
  from, 25%, 50%, 75%, to {
    transform: rotate(30deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(10deg) translateZ(-1px);
  }
}

@keyframes spoke {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(-1turn);
  }
}
</style>


================================================
FILE: loaders/Nawsome_young-eel-20.html
================================================
<figure class="loader">
    <div class="dot white"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</figure>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.loader {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 6.250em;
  height: 6.250em;
  animation: rotate5123 2.4s linear infinite;
}

.white {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  animation: flash 2.4s linear infinite;
  opacity: 0;
}

.dot {
  position: absolute;
  margin: auto;
  width: 2.4em;
  height: 2.4em;
  border-radius: 100%;
  transition: all 1s ease;
}

.dot:nth-child(2) {
  top: 0;
  bottom: 0;
  left: 0;
  background: #FF4444;
  animation: dotsY 2.4s linear infinite;
}

.dot:nth-child(3) {
  left: 0;
  right: 0;
  top: 0;
  background: #FFBB33;
  animation: dotsX 2.4s linear infinite;
}

.dot:nth-child(4) {
  top: 0;
  bottom: 0;
  right: 0;
  background: #99CC00;
  animation: dotsY 2.4s linear infinite;
}

.dot:nth-child(5) {
  left: 0;
  right: 0;
  bottom: 0;
  background: #33B5E5;
  animation: dotsX 2.4s linear infinite;
}

@keyframes rotate5123 {
  0% {
    transform: rotate( 0 );
  }

  10% {
    width: 6.250em;
    height: 6.250em;
  }

  66% {
    width: 2.4em;
    height: 2.4em;
  }

  100% {
    transform: rotate(360deg);
    width: 6.250em;
    height: 6.250em;
  }
}

@keyframes dotsY {
  66% {
    opacity: .1;
    width: 2.4em;
  }

  77% {
    opacity: 1;
    width: 0;
  }
}

@keyframes dotsX {
  66% {
    opacity: .1;
    height: 2.4em;
  }

  77% {
    opacity: 1;
    height: 0;
  }
}

@keyframes flash {
  33% {
    opacity: 0;
    border-radius: 0%;
  }

  55% {
    opacity: .6;
    border-radius: 100%;
  }

  66% {
    opacity: 0;
  }
}

</style>


================================================
FILE: loaders/Nawsome_young-goat-78.html
================================================
<svg class="pl" width="240" height="240" viewBox="0 0 240 240">
	<circle class="pl__ring pl__ring--a" cx="120" cy="120" r="105" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 660" stroke-dashoffset="-330" stroke-linecap="round"></circle>
	<circle class="pl__ring pl__ring--b" cx="120" cy="120" r="35" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 220" stroke-dashoffset="-110" stroke-linecap="round"></circle>
	<circle class="pl__ring pl__ring--c" cx="85" cy="120" r="70" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 440" stroke-linecap="round"></circle>
	<circle class="pl__ring pl__ring--d" cx="155" cy="120" r="70" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 440" stroke-linecap="round"></circle>
</svg>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.pl {
  width: 6em;
  height: 6em;
}

.pl__ring {
  animation: ringA 2s linear infinite;
}

.pl__ring--a {
  stroke: #f42f25;
}

.pl__ring--b {
  animation-name: ringB;
  stroke: #f49725;
}

.pl__ring--c {
  animation-name: ringC;
  stroke: #255ff4;
}

.pl__ring--d {
  animation-name: ringD;
  stroke: #f42582;
}

/* Animations */
@keyframes ringA {
  from, 4% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }

  12% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -335;
  }

  32% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -595;
  }

  40%, 54% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -660;
  }

  62% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -665;
  }

  82% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -925;
  }

  90%, to {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -990;
  }
}

@keyframes ringB {
  from, 12% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -110;
  }

  20% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -115;
  }

  40% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -195;
  }

  48%, 62% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  70% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  90% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -305;
  }

  98%, to {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }
}

@keyframes ringC {
  from {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  8% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  28% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  36%, 58% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  66% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  86% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  94%, to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}

@keyframes ringD {
  from, 8% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  16% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  36% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  44%, 50% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  58% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  78% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  86%, to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}
</style>


================================================
FILE: loaders/NlghtM4re_jolly-newt-35.html
================================================
<div class="container">
  <div class="tree">
    <div class="branch" style="--x:0">
      <span style="--i:0;"></span>
      <span style="--i:1;"></span>
      <span style="--i:2;"></span>
      <span style="--i:3;"></span>
    </div>
    <div class="branch" style="--x:1">
      <span style="--i:0;"></span>
      <span style="--i:1;"></span>
      <span style="--i:2;"></span>
      <span style="--i:3;"></span>
    </div>
    <div class="branch" style="--x:2">
      <span style="--i:0;"></span>
      <span style="--i:1;"></span>
      <span style="--i:2;"></span>
      <span style="--i:3;"></span>
    </div>
    <div class="branch" style="--x:3">
      <span style="--i:0;"></span>
      <span style="--i:1;"></span>
      <span style="--i:2;"></span>
      <span style="--i:3;"></span>
    </div>
    <div class="stem">
      <span style="--i:0;"></span>
      <span style="--i:1;"></span>
      <span style="--i:2;"></span>
      <span style="--i:3;"></span>
    </div>
    <span class="shadow"></span>
  </div>
</div>
<style>
/* From Uiverse.io by NlghtM4re - Tags: 3d, green, loader, smooth, tree */
.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tree {
  position: relative;
  width: 50px;
  height: 50px;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(30deg);
  animation: treeAnimate 5s linear infinite;
}

@keyframes treeAnimate {
  0% {
    transform: rotateX(-20deg) rotateY(360deg);
  }

  100% {
    transform: rotateX(-20deg) rotateY(0deg);
  }
}

.tree div {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateY(calc(25px * var(--x))) translateZ(0px);
}

.tree div.branch span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #69c069, #77dd77);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border-bottom: 5px solid #00000019;
  transform-origin: bottom;
  transform: rotateY(calc(90deg * var(--i))) rotateX(30deg) translateZ(28.5px);
}

.tree div.stem span {
  position: absolute;
  top: 110px;
 /* updated top value */
  left: calc(50% - 7.5px);
  width: 15px;
  height: 50%;
  background: linear-gradient(90deg, #bb4622, #df7214);
  border-bottom: 5px solid #00000019;
  transform-origin: bottom;
  transform: rotateY(calc(90deg * var(--i))) translateZ(7.5px);
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  filter: blur(20px);
  transform-style: preserve-3d;
  transform: rotateX(90deg) translateZ(-65px);
}

</style>


================================================
FILE: loaders/NlghtM4re_moody-fly-80.html
================================================
<div class="container">
  <div class="top">
    <div class="square">
      <div class="square">
        <div class="square">
          <div class="square">
            <div class="square"><div class="square">
            </div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="square">
      <div class="square">
        <div class="square">
          <div class="square">
            <div class="square"><div class="square">
            </div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="left">
    <div class="square">
      <div class="square">
        <div class="square">
          <div class="square">
            <div class="square"><div class="square">
            </div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="square">
      <div class="square">
        <div class="square">
          <div class="square">
            <div class="square"><div class="square">
            </div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by NlghtM4re - Tags: blue, loader, smooth, shadow, glow, neon */
.container {
  position: absolute;
  top: 45%;
  left: 48%;
}

.square {
  width: 8px;
  height: 30px;
  background: rgb(71, 195, 248);
  border-radius: 10px;
  display: block;
  /*margin:10px;*/
  -webkit-animation: turn 2.5s ease infinite;
  animation: turn 2.5s ease infinite;
  box-shadow: rgb(71, 195, 248) 0px 1px 15px 0px;
}

.top {
  position: absolute;
  left: 40%;
  top: 50%;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.bottom {
  position: absolute;
  left: 40%;
  top: 50%;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.left {
  position: absolute;
  left: 40%;
  top: 50%;
}

.right {
  position: absolute;
  left: 40%;
  top: 50%;
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

@-webkit-keyframes turn {
  0% {
    transform: translateX(0) translateY(0) rotate(0);
  }

  50% {
    transform: translateX(400%) translateY(100%) rotate(90deg);
  }

  100% {
    transform: translateX(0) translateY(0) rotate(0);
  }
}

@keyframes turn {
  0% {
    transform: translateX(0) translateY(0) rotate(0);
  }

  70% {
    transform: translateX(400%) translateY(100%) rotate(90deg);
  }

  100% {
    transform: translateX(0) translateY(0) rotate(0);
  }
}
</style>


================================================
FILE: loaders/NlghtM4re_new-seahorse-90.html
================================================
<div id="loader">
  <div class="ls-particles ls-part-1"></div>
  <div class="ls-particles ls-part-2"></div>
  <div class="ls-particles ls-part-3"></div>
  <div class="ls-particles ls-part-4"></div>
  <div class="ls-particles ls-part-5"></div>
  <div class="lightsaber ls-left ls-green"></div>
  <div class="lightsaber ls-right ls-red"></div>
</div>
<style>
/* From Uiverse.io by NlghtM4re - Tags: flashy, complex, red, green, loader, space, glow, neon */
#loader {
  width: 80px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px -40px;
  z-index: 1000;
}

.lightsaber {
  position: absolute;
  width: 4px;
  height: 12px;
  background-color: #666;
  border-radius: 1px;
  bottom: 0;
}

.lightsaber.ls-left {
  left: 0;
}

.lightsaber.ls-right {
  right: 0;
}

.lightsaber:before {
  position: absolute;
  content: ' ';
  display: block;
  width: 2px;
  height: 25px;
  max-height: 1px;
  left: 1px;
  top: 1px;
  background-color: #fff;
  border-radius: 1px;
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
  -webkit-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
}

.lightsaber:after {
  position: absolute;
  content: ' ';
  display: block;
  width: 2px;
  height: 2px;
  left: 1px;
  top: 4px;
  background-color: #fff;
  border-radius: 50%;
}

.ls-particles {
  position: absolute;
  left: 42px;
  top: 10px;
  width: 1px;
  height: 5px;
  background-color: rgb(51, 51, 51, 0);
  -webkit-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
}

.lightsaber.ls-green:before {
  -webkit-animation: showlightgreen 2s ease-in-out infinite 1s;
  animation: showlightgreen 2s ease-in-out infinite 1s;
}

.lightsaber.ls-red:before {
  -webkit-animation: showlightred 2s ease-in-out infinite 1s;
  animation: showlightred 2s ease-in-out infinite 1s;
}

.lightsaber.ls-left {
  -webkit-animation: fightleft 2s ease-in-out infinite 1s;
  animation: fightleft 2s ease-in-out infinite 1s;
}

.lightsaber.ls-right {
  -webkit-animation: fightright 2s ease-in-out infinite 1s;
  animation: fightright 2s ease-in-out infinite 1s;
}

.ls-particles.ls-part-1 {
  -webkit-animation: particles1 2s ease-out infinite 1s;
  animation: particles1 2s ease-out infinite 1s;
}

.ls-particles.ls-part-2 {
  -webkit-animation: particles2 2s ease-out infinite 1s;
  animation: particles2 2s ease-out infinite 1s;
}

.ls-particles.ls-part-3 {
  -webkit-animation: particles3 2s ease-out infinite 1s;
  animation: particles3 2s ease-out infinite 1s;
}

.ls-particles.ls-part-4 {
  -webkit-animation: particles4 2s ease-out infinite 1s;
  animation: particles4 2s ease-out infinite 1s;
}

.ls-particles.ls-part-5 {
  -webkit-animation: particles5 2s ease-out infinite 1s;
  animation: particles5 2s ease-out infinite 1s;
}

@-webkit-keyframes showlightgreen {
  0% {
    max-height: 0;
    box-shadow: 0 0 0 0 #87c054;
  }

  5% {
    box-shadow: 0 0 4px 2px #87c054;
  }

  10% {
    max-height: 22px;
  }

  80% {
    max-height: 22px;
  }

  85% {
    box-shadow: 0 0 4px 2px #87c054;
  }

  100% {
    max-height: 0;
    box-shadow: 0 0 0 0 #87c054;
  }
}

@-webkit-keyframes showlightred {
  0% {
    max-height: 0;
    box-shadow: 0 0 0 0 #f06363;
  }

  20% {
    box-shadow: 0 0 4px 2px #f06363;
  }

  25% {
    max-height: 22px;
  }

  80% {
    max-height: 22px;
  }

  85% {
    box-shadow: 0 0 4px 2px #f06363;
  }

  100% {
    max-height: 0;
    box-shadow: 0 0 0 0 #f06363;
  }
}

@-webkit-keyframes fightleft {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    left: 0;
    bottom: 0;
  }

  30% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    bottom: 0;
  }

  40% {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    left: 0;
    bottom: 2px;
  }

  45% {
    -webkit-transform: rotateZ(65deg);
    transform: rotateZ(65deg);
    left: 0;
  }

  65% {
    -webkit-transform: rotateZ(410deg);
    transform: rotateZ(410deg);
    left: 30px;
    bottom: 10px;
  }

  95% {
    -webkit-transform: rotateZ(410deg);
    transform: rotateZ(410deg);
    left: 0;
    bottom: 0;
  }

  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
    left: 0;
    bottom: 0;
  }
}

@-webkit-keyframes fightright {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    right: 0;
    bottom: 0;
  }

  30% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    bottom: 0;
  }

  45% {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    right: 0;
    bottom: 2px;
  }

  50% {
    -webkit-transform: rotateZ(-65deg);
    transform: rotateZ(-65deg);
    right: 0;
  }

  68% {
    -webkit-transform: rotateZ(-410deg);
    transform: rotateZ(-410deg);
    right: 27px;
    bottom: 13px;
  }

  95% {
    -webkit-transform: rotateZ(-410deg);
    transform: rotateZ(-410deg);
    right: 0;
    bottom: 0;
  }

  100% {
    -webkit-transform: rotateZ(-360deg);
    transform: rotateZ(-360deg);
    right: 0;
    bottom: 0;
  }
}

@-webkit-keyframes particles1 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(35deg) translateY(0px);
    transform: rotateZ(35deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(35deg) translateY(0px);
    transform: rotateZ(35deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(35deg) translateY(0px);
    transform: rotateZ(35deg) translateY(0px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(35deg) translateY(-30px);
    transform: rotateZ(35deg) translateY(-30px);
  }
}

@-webkit-keyframes particles2 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(0px);
    transform: rotateZ(-65deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(0px);
    transform: rotateZ(-65deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(-65deg) translateY(0px);
    transform: rotateZ(-65deg) translateY(0px);
  }

  95% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(-40px);
    transform: rotateZ(-65deg) translateY(-40px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(-40px);
    transform: rotateZ(-65deg) translateY(-40px);
  }
}

@-webkit-keyframes particles3 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(0px);
    transform: rotateZ(-75deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(0px);
    transform: rotateZ(-75deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(-75deg) translateY(0px);
    transform: rotateZ(-75deg) translateY(0px);
  }

  97% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(-35px);
    transform: rotateZ(-75deg) translateY(-35px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(-35px);
    transform: rotateZ(-75deg) translateY(-35px);
  }
}

@-webkit-keyframes particles4 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(0px);
    transform: rotateZ(-25deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(0px);
    transform: rotateZ(-25deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(-25deg) translateY(0px);
    transform: rotateZ(-25deg) translateY(0px);
  }

  97% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(-30px);
    transform: rotateZ(-25deg) translateY(-30px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(-30px);
    transform: rotateZ(-25deg) translateY(-30px);
  }
}

@-webkit-keyframes particles5 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(0px);
    transform: rotateZ(65deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(0px);
    transform: rotateZ(65deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(65deg) translateY(0px);
    transform: rotateZ(65deg) translateY(0px);
  }

  97% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(-35px);
    transform: rotateZ(65deg) translateY(-35px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(-35px);
    transform: rotateZ(65deg) translateY(-35px);
  }
}

@keyframes showlightgreen {
  0% {
    max-height: 0;
    box-shadow: 0 0 0 0 #87c054;
  }

  5% {
    box-shadow: 0 0 4px 2px #87c054;
  }

  10% {
    max-height: 22px;
  }

  80% {
    max-height: 22px;
  }

  85% {
    box-shadow: 0 0 4px 2px #87c054;
  }

  100% {
    max-height: 0;
    box-shadow: 0 0 0 0 #87c054;
  }
}

@keyframes showlightred {
  0% {
    max-height: 0;
    box-shadow: 0 0 0 0 #f06363;
  }

  20% {
    box-shadow: 0 0 4px 2px #f06363;
  }

  25% {
    max-height: 22px;
  }

  80% {
    max-height: 22px;
  }

  85% {
    box-shadow: 0 0 4px 2px #f06363;
  }

  100% {
    max-height: 0;
    box-shadow: 0 0 0 0 #f06363;
  }
}

@keyframes fightleft {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    left: 0;
    bottom: 0;
  }

  30% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    bottom: 0;
  }

  40% {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    left: 0;
    bottom: 2px;
  }

  45% {
    -webkit-transform: rotateZ(65deg);
    transform: rotateZ(65deg);
    left: 0;
  }

  65% {
    -webkit-transform: rotateZ(410deg);
    transform: rotateZ(410deg);
    left: 30px;
    bottom: 10px;
  }

  95% {
    -webkit-transform: rotateZ(410deg);
    transform: rotateZ(410deg);
    left: 0;
    bottom: 0;
  }

  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
    left: 0;
    bottom: 0;
  }
}

@keyframes fightright {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    right: 0;
    bottom: 0;
  }

  30% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    bottom: 0;
  }

  45% {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    right: 0;
    bottom: 2px;
  }

  50% {
    -webkit-transform: rotateZ(-65deg);
    transform: rotateZ(-65deg);
    right: 0;
  }

  68% {
    -webkit-transform: rotateZ(-410deg);
    transform: rotateZ(-410deg);
    right: 27px;
    bottom: 13px;
  }

  95% {
    -webkit-transform: rotateZ(-410deg);
    transform: rotateZ(-410deg);
    right: 0;
    bottom: 0;
  }

  100% {
    -webkit-transform: rotateZ(-360deg);
    transform: rotateZ(-360deg);
    right: 0;
    bottom: 0;
  }
}

@keyframes particles1 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(35deg) translateY(0px);
    transform: rotateZ(35deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(35deg) translateY(0px);
    transform: rotateZ(35deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(35deg) translateY(0px);
    transform: rotateZ(35deg) translateY(0px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(35deg) translateY(-30px);
    transform: rotateZ(35deg) translateY(-30px);
  }
}

@keyframes particles2 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(0px);
    transform: rotateZ(-65deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(0px);
    transform: rotateZ(-65deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(-65deg) translateY(0px);
    transform: rotateZ(-65deg) translateY(0px);
  }

  95% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(-40px);
    transform: rotateZ(-65deg) translateY(-40px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(-40px);
    transform: rotateZ(-65deg) translateY(-40px);
  }
}

@keyframes particles3 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(0px);
    transform: rotateZ(-75deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(0px);
    transform: rotateZ(-75deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(-75deg) translateY(0px);
    transform: rotateZ(-75deg) translateY(0px);
  }

  97% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(-35px);
    transform: rotateZ(-75deg) translateY(-35px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(-35px);
    transform: rotateZ(-75deg) translateY(-35px);
  }
}

@keyframes particles4 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(0px);
    transform: rotateZ(-25deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(0px);
    transform: rotateZ(-25deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(-25deg) translateY(0px);
    transform: rotateZ(-25deg) translateY(0px);
  }

  97% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(-30px);
    transform: rotateZ(-25deg) translateY(-30px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(-30px);
    transform: rotateZ(-25deg) translateY(-30px);
  }
}

@keyframes particles5 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(0px);
    transform: rotateZ(65deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(0px);
    transform: rotateZ(65deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(65deg) translateY(0px);
    transform: rotateZ(65deg) translateY(0px);
  }

  97% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(-35px);
    transform: rotateZ(65deg) translateY(-35px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(-35px);
    transform: rotateZ(65deg) translateY(-35px);
  }
}
</style>


================================================
FILE: loaders/NlghtM4re_ordinary-mouse-17.html
================================================
<div class="container">
      <div class="item" style="--i:0;"></div>
      <div class="item" style="--i:1;"></div>
      <div class="item" style="--i:2;"></div>
      <div class="item" style="--i:3;"></div>
      <div class="item" style="--i:4;"></div>
      <div class="item" style="--i:5;"></div>
      <div class="item" style="--i:6;"></div>
      <div class="item" style="--i:7;"></div>
      <div class="item" style="--i:8;"></div>
      <div class="item" style="--i:9;"></div>
      <div class="item" style="--i:10;"></div>
      <div class="item" style="--i:11;"></div>
      <div class="item" style="--i:12;"></div>
      <div class="item" style="--i:13;"></div>
      <div class="item" style="--i:14;"></div>
      <div class="item" style="--i:15;"></div>
      <div class="item" style="--i:16;"></div>
      <div class="item" style="--i:17;"></div>
      <div class="item" style="--i:18;"></div>
      <div class="item" style="--i:19;"></div>
      <div class="item" style="--i:20;"></div>
    </div>
<style>
/* From Uiverse.io by NlghtM4re - Tags: blue, purple, loader, smooth, glow */
.container {
  position: absolute;
  top: 40%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  position: absolute;
  background-color: transparent;
  width: calc(var(--i) * 2.5vmin);
  aspect-ratio: 1;
  border-radius: 50%;
  border: .9vmin solid rgb(0, 200, 255);
  transform-style: preserve-3d;
  transform: rotateX(70deg) translateZ(50px);
  animation: my-move 3s ease-in-out calc(var(--i) * 0.08s) infinite;
  box-shadow: 0px 0px 15px rgb(124, 124, 124),
    inset 0px 0px 15px rgb(124, 124, 124);
}

@keyframes my-move {
  0%,
  100% {
    transform: rotateX(70deg) translateZ(50px) translateY(0px);
    filter: hue-rotate(0deg);
  }

  50% {
    transform: rotateX(70deg) translateZ(50px) translateY(-50vmin);
    filter: hue-rotate(180deg);
  }
}
</style>


================================================
FILE: loaders/NlghtM4re_popular-crab-99.html
================================================
<div class="loader">
  <div></div> 
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
/* From Uiverse.io by NlghtM4re - Tags: loader, cube, shadow, glow, colorful */
.loader {
  height: 120px;
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.loader div {
  height: 30px;
  width: 30px;
  position: absolute;
  animation: move 4s infinite;
}

.loader div:nth-child(1) {
  background-color: rgb(158, 136, 246);
  box-shadow: rgb(158, 136, 246) 0px 7px 29px 0px;
  transform: translate(-30px,-30px);
  animation-delay: -1s;
}

.loader div:nth-child(2) {
  background-color: rgb(97, 183, 253);
  box-shadow: rgb(97, 183, 253) 0px 7px 29px 0px;
  transform: translate(30px,-30px);
  animation-delay: -2s;
}

.loader div:nth-child(3) {
  background-color: rgb(95, 249, 175);
  box-shadow: rgb(95, 249, 175) 0px 7px 29px 0px;
  transform: translate(30px,30px);
  animation-delay: -3s;
}

.loader div:nth-child(4) {
  background-color: rgb(243, 171, 89);
  box-shadow: rgb(243, 171, 89) 0px 7px 29px 0px;
  transform: translate(-30px,30px);
  animation-delay: -4s;
}

@keyframes move {
  0% {
    transform: translate(-30px, -30px);
  }

  25% {
    transform: translate(30px, -30px);
  }

  50% {
    transform: translate(30px, 30px);
  }

  75% {
    transform: translate(-30px, 30px);
  }

  100% {
    transform: translate(-30px, -30px);
  }
}

</style>


================================================
FILE: loaders/NlghtM4re_silent-husky-54.html
================================================
<div class="container">
  <div class="loader"></div>
</div>
<style>
/* From Uiverse.io by NlghtM4re - Tags: green, progress, progress bar, loader, shadow, download, neon, bars */
.loader {
  width: 60%;
  height: 10px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}

.loader::before {
  content: "";
  position: absolute;
  background-color: rgb(9, 188, 9);
  width: 0%;
  height: 100%;
  border-radius: 2px;
  animation: load 3.5s ease-in-out infinite;
  box-shadow: rgb(9, 188, 9) 0px 2px 29px 0px;
}

.container {
  display: flex;
  justify-content: center;
}

@keyframes load {
  50% {
    width: 100%;
  }

  100% {
    right: 0;
    left: unset;
  }
}
</style>


================================================
FILE: loaders/NlghtM4re_tasty-puma-74.html
================================================
<div class="loader">
  <div class="loader-inner"> 
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
    <div class="loader-block"></div>
  </div>
</div>

<style>
/* From Uiverse.io by NlghtM4re - Tags: progress, progress bar, loader, glow, bars, animated */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  position: relative;
}

.loader:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
}

.loader-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.loader-block {
  display: inline-block;
  width: 8px;
  height: 10px;
  margin: 2px;
  background-color: rgb(53, 143, 246);
  box-shadow: 0 0 30px rgb(53, 143, 246);
  animation: loader 5s infinite;
}

.loader-block:nth-child(1) {
  animation-delay: 0.2s;
}

.loader-block:nth-child(2) {
  animation-delay: 0.4s;
}

.loader-block:nth-child(3) {
  animation-delay: 0.6s;
}

.loader-block:nth-child(4) {
  animation-delay: 0.8s;
}

.loader-block:nth-child(5) {
  animation-delay: 1s;
}

.loader-block:nth-child(6) {
  animation-delay: 1.2s;
}

.loader-block:nth-child(7) {
  animation-delay: 1.4s;
}

.loader-block:nth-child(8) {
  animation-delay: 1.6s;
}

.loader-block:nth-child(9) {
  animation-delay: 1.8s;
}

.loader-block:nth-child(10) {
  animation-delay: 2s;
}

.loader-block:nth-child(11) {
  animation-delay: 2.2s;
}

.loader-block:nth-child(12) {
  animation-delay: 2.4s;
}

.loader-block:nth-child(13) {
  animation-delay: 2.6s;
}

.loader-block:nth-child(14) {
  animation-delay: 2.8s;
}

.loader-block:nth-child(15) {
  animation-delay: 3s;
}

.loader-block:nth-child(16) {
  animation-delay: 3.2s;
}

.loader-block:nth-child(17) {
  animation-delay: 3.4s;
}

.loader-block:nth-child(18) {
  animation-delay: 3.6s;
}

.loader-block:nth-child(19) {
  animation-delay: 3.8s;
}

.loader-block:nth-child(20) {
  animation-delay: 4s;
}

.loader-block:nth-child(21) {
  animation-delay: 4.2s;
}

.loader-block:nth-child(22) {
  animation-delay: 4.4s;
}

.loader-block:nth-child(23) {
  animation-delay: 4.6s;
}

.loader-block:nth-child(24) {
  animation-delay: 4.8s;
}

@keyframes loader {
  0% {
    transform: scale(1);
    box-shadow: 0 0 40px rgb(53, 143, 246);
  }

  13% {
    transform: scale(1, 4);
    box-shadow: 0 0 60px rgb(53, 143, 246);
  }

  26% {
    transform: scale(1);
    box-shadow: 0 0 40px rgb(53, 143, 246);
  }
}

</style>


================================================
FILE: loaders/NlghtM4re_young-swan-89.html
================================================
<div class="container">
  <div class="dash first"></div>
  <div class="dash seconde"></div>
  <div class="dash third"></div>
  <div class="dash fourth"></div>
</div>
<style>
/* From Uiverse.io by NlghtM4re - Tags: loader */
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}

.dash {
  margin: 0 15px;
  width: 35px;
  height: 15px;
  border-radius: 8px;
  background: rgb(82, 159, 246);
  box-shadow: rgb(82, 159, 246) 0 0 15px 0;
}

.first {
  margin-right: -18px;
  transform-origin: center left;
  animation: spin 3s linear infinite;
}

.seconde {
  transform-origin: center right;
  animation: spin2 3s linear infinite;
  animation-delay: .2s;
}

.third {
  transform-origin: center right;
  animation: spin3 3s linear infinite;
  animation-delay: .3s;
}

.fourth {
  transform-origin: center right;
  animation: spin4 3s linear infinite;
  animation-delay: .4s;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(360deg);
  }

  30% {
    transform: rotate(370deg);
  }

  35% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin2 {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(-180deg);
  }

  35% {
    transform: rotate(-190deg);
  }

  40% {
    transform: rotate(-180deg);
  }

  78% {
    transform: rotate(-180deg);
  }

  95% {
    transform: rotate(-360deg);
  }

  98% {
    transform: rotate(-370deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes spin3 {
  0% {
    transform: rotate(0deg);
  }

  27% {
    transform: rotate(0deg);
  }

  40% {
    transform: rotate(180deg);
  }

  45% {
    transform: rotate(190deg);
  }

  50% {
    transform: rotate(180deg);
  }

  62% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(360deg);
  }

  80% {
    transform: rotate(370deg);
  }

  85% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin4 {
  0% {
    transform: rotate(0deg);
  }

  38% {
    transform: rotate(0deg);
  }

  60% {
    transform: rotate(-360deg);
  }

  65% {
    transform: rotate(-370deg);
  }

  75% {
    transform: rotate(-360deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}
</style>


================================================
FILE: loaders/NourSafta_cold-rabbit-94.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by NourSafta - Tags: circle loader, cool loader */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.loader::after {
  content: "";
  width: 75px;
  height: 75px;
  border: 15px solid #dddddd;
  border-top-color: #46C380;
  border-radius: 50%;
  animation: loading 0.75s ease-out infinite;
}

@keyframes loading {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}
</style>


================================================
FILE: loaders/OMPRABHU8125_nice-sheep-25.html
================================================
<div class="loader">
  <div class="react-star">
    <div class="nucleus"></div>
    <div class="electron electron1"></div>
    <div class="electron electron2"></div>
    <div class="electron electron3"></div>
  </div>
</div>

<style>
/* From Uiverse.io by OMPRABHU8125  - Website: https://codepen.io/rahul-sahni/pen/YzOWmYy - Name: Rahul Sahni - Tags: animation, loader, cool, atom, sc-fi */
.loader {
  height: 20rem;
  width: 20rem;
  background-color: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
}

.react-star {
  position: relative;
  width: 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15rem;
  animation: rotate 3s infinite;
}

.nucleus {
  position: absolute;

  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(#0738e8, cyan);
  height: 2rem;
  width: 2rem;
  animation: rotate 1s linear infinite;
}

.electron {
  position: absolute;
  width: 15rem;
  height: 6rem;
  border-radius: 50%;
  border: 0.3rem solid #00ffff;
  animation: revolve 1s linear infinite;
}

.electron1::before,
.electron2::before,
.electron3::before {
  content: "";
  position: absolute;
  top: 60%;
  left: 100%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  background-color: cyan;
  border-radius: 50%;
  animation: moveElectron 1s infinite;
}
.electron2 {
  transform: rotate(60deg);
  animation-delay: -0.66s;
}
.electron2::before {
  animation-delay: -0.66s;
}

.electron3 {
  transform: rotate(-60deg);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg) scale3d(1.1, 1.1, 0);
  }
}

@keyframes revolve {
  0% {
    border-color: #00ffff9c;
    border-right: transparent;
  }
  25% {
    border-color: #00ffff9c;
    border-bottom-color: transparent;
  }
  50% {
    border-color: #00ffff9c;
    border-left-color: transparent;
  }
  75% {
    border-color: #00ffff9c;
    border-top-color: transparent;
  }
  100% {
    border-color: #00ffff9c;
    border-right-color: transparent;
  }
}

@keyframes moveElectron {
  0% {
    top: 60%;
    left: 100%;
  }
  25% {
    top: 100%;
    left: 60%;
  }
  50% {
    top: 60%;
    left: 0%;
  }
  75% {
    top: 0%;
    left: 60%;
  }
  100% {
    top: 60%;
    left: 100%;
  }
}

</style>
    

================================================
FILE: loaders/Peary74_foolish-sloth-23.html
================================================
<div class="loader">

  <div class="cercle">
  </div>
  <div class="cercle">
  </div>
  <div class="cercle">
  </div>
  <div class="cercle">
  </div>

</div>
<style>
/* From Uiverse.io by Peary74 - Tags: loader, animated, google */
.loader {
  position: absolute;
}

.cercle {
  position: absolute;
  background: #3f7ee8;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  top: -40px;
  left: -70px;
  animation: move-up6 .4s ease-in infinite alternate-reverse;
}

.cercle:nth-child(2) {
  width: 25px;
  height: 25px;
  top: -2px;
  left: -5px;
  background: #de4032;
  animation: move-down1 .4s ease-in infinite alternate-reverse;
}

.cercle:nth-child(3) {
  width: 30px;
  height: 30px;
  top: 35px;
  left: -7px;
  background: #eeb205;
  animation: move-updown1 .4s ease-in infinite alternate-reverse;
}

.cercle:nth-child(4) {
  width: 12px;
  height: 12px;
  top: -10px;
  left: 25px;
  background: #31aa52;
  animation: move-up6 .4s ease-in infinite alternate-reverse;
}

@keyframes move-up6 {
  to {
    transform: translateY(-5px);
  }
}

@keyframes move-down1 {
  to {
    transform: translateY(5px);
  }
}

@keyframes move-updown1 {
  to {
    transform: translateY(10px);
  }

  from {
    transform: translateY(-7px);
  }
}



</style>


================================================
FILE: loaders/PhilibertGentien_smart-pug-99.html
================================================
<svg xmlns="http://www.w3.org/2000/svg" height="128px" width="128px" viewBox="0 0 128 128" class="pl">
  <defs>
    <linearGradient y2="1" x2="0" y1="0" x1="0" id="pl-grad">
      <stop stop-color="hsl(193,90%,55%)" offset="0%"></stop>
      <stop stop-color="hsl(223,90%,55%)" offset="100%"></stop>
    </linearGradient>
  </defs>
  <circle stroke-linecap="round" stroke-width="16" stroke="hsla(0,10%,10%,0.1)" fill="none" cy="64" cx="64" r="56" class="pl__ring"></circle>
  <path stroke-dashoffset="10" stroke-dasharray="44 1111" stroke-linejoin="round" stroke-linecap="round" stroke-width="16" stroke="url(#pl-grad)" fill="none" d="M92,15.492S78.194,4.967,66.743,16.887c-17.231,17.938-28.26,96.974-28.26,96.974L119.85,59.892l-99-31.588,57.528,89.832L97.8,19.349,13.636,88.51l89.012,16.015S81.908,38.332,66.1,22.337C50.114,6.156,36,15.492,36,15.492a56,56,0,1,0,56,0Z" class="pl__worm"></path>
</svg>
<style>
/* From Uiverse.io by PhilibertGentien - Tags: loader */
.pl,
.pl__worm {
 animation-duration: 4s;
 animation-iteration-count: infinite;
}

.pl {
 animation-name: bump5;
 animation-timing-function: linear;
 width: 5em;
 height: 5em;
}

.pl__ring {
 stroke: hsla(var(--hue),10%,10%,0.1);
 transition: stroke 0.3s;
}

.pl__worm {
 animation-name: worm5;
 animation-timing-function: cubic-bezier(0.42,0.17,0.75,0.83);
}

/* Animations */
@keyframes bump5 {
 from,
  42%,
  46%,
  51%,
  55%,
  59%,
  63%,
  67%,
  71%,
  74%,
  78%,
  81%,
  85%,
  88%,
  92%,
  to {
  transform: translate(0,0);
 }

 44% {
  transform: translate(1.33%,6.75%);
 }

 53% {
  transform: translate(-16.67%,-0.54%);
 }

 61% {
  transform: translate(3.66%,-2.46%);
 }

 69% {
  transform: translate(-0.59%,15.27%);
 }

 76% {
  transform: translate(-1.92%,-4.68%);
 }

 83% {
  transform: translate(9.38%,0.96%);
 }

 90% {
  transform: translate(-4.55%,1.98%);
 }
}

@keyframes worm5 {
 from {
  stroke-dashoffset: 10;
 }

 25% {
  stroke-dashoffset: 295;
 }

 to {
  stroke-dashoffset: 1165;
 }
}
</style>


================================================
FILE: loaders/Praashoo7_black-bear-45.html
================================================
<div class="load">
  <div class="loader">
    <span class="l">L</span>
    <span class="l">L</span>
    <span class="l">L</span>
    <span class="l">L</span>
  </div>
  <div class="loader">
    <span class="l">O</span>
    <span class="l">O</span>
    <span class="l">O</span>
    <span class="l">O</span>
  </div>
  <div class="loader">
    <span class="l">A</span>
    <span class="l">A</span>
    <span class="l">A</span>
    <span class="l">A</span>
  </div>
  <div class="loader">
    <span class="l">D</span>
    <span class="l">D</span>
    <span class="l">D</span>
    <span class="l">D</span>
  </div>
  <div class="loader">
    <span class="l">I</span>
    <span class="l">I</span>
    <span class="l">I</span>
    <span class="l">I</span>
  </div>
  <div class="loader">
    <span class="l">N</span>
    <span class="l">N</span>
    <span class="l">N</span>
    <span class="l">N</span>
  </div>
  <div class="loader">
    <span class="l">G</span>
    <span class="l">G</span>
    <span class="l">G</span>
    <span class="l">G</span>
  </div>
</div>

<style>
/* From Uiverse.io by Praashoo7  - Tags: blue, loading, loader, smooth, text animation, wave, loading animation */
.load {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30em;
  height: 12em;
  margin-left: -1em;
}

.loader {
  width: 2.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

.loader .l {
  position: absolute;
  margin-top: -2em;
  font-size: 4em;
  color: white;
  text-shadow: 5px 0px 1px #000, 1px 1px 0 #000, 1px -1px 0 #000,
    -1px -1px 0 #000;
  animation: 2s float infinite ease-in-out;
}

.loader:nth-child(1) .l:nth-child(1) {
  animation-delay: 0.4s;
  margin-left: 0.3em;
  color: #105ee8;
}
.loader:nth-child(1) .l:nth-child(2) {
  animation-delay: 0.3s;
  margin-left: 0.2em;
  color: #579dff;
}
.loader:nth-child(1) .l:nth-child(3) {
  animation-delay: 0.2s;
  margin-left: 0.1em;
  color: #acd9f1;
}
.loader:nth-child(1) .l:nth-child(4) {
  animation-delay: 0.1s;
}

.loader:nth-child(2) .l:nth-child(1) {
  animation-delay: 0.5s;
  margin-left: 0.3em;
  color: #105ee8;
}
.loader:nth-child(2) .l:nth-child(2) {
  animation-delay: 0.4s;
  margin-left: 0.2em;
  color: #579dff;
}
.loader:nth-child(2) .l:nth-child(3) {
  animation-delay: 0.3s;
  margin-left: 0.1em;
  color: #acd9f1;
}
.loader:nth-child(2) .l:nth-child(4) {
  animation-delay: 0.2s;
}

.loader:nth-child(3) .l:nth-child(1) {
  animation-delay: 0.6s;
  margin-left: 0.3em;
  color: #105ee8;
}
.loader:nth-child(3) .l:nth-child(2) {
  animation-delay: 0.5s;
  margin-left: 0.2em;
  color: #579dff;
}
.loader:nth-child(3) .l:nth-child(3) {
  animation-delay: 0.4s;
  margin-left: 0.1em;
  color: #acd9f1;
}
.loader:nth-child(3) .l:nth-child(4) {
  animation-delay: 0.3s;
}

.loader:nth-child(4) .l:nth-child(1) {
  animation-delay: 0.7s;
  margin-left: 0.3em;
  color: #105ee8;
}
.loader:nth-child(4) .l:nth-child(2) {
  animation-delay: 0.6s;
  margin-left: 0.2em;
  color: #579dff;
}
.loader:nth-child(4) .l:nth-child(3) {
  animation-delay: 0.5s;
  margin-left: 0.1em;
  color: #acd9f1;
}
.loader:nth-child(4) .l:nth-child(4) {
  animation-delay: 0.4s;
}

.loader:nth-child(5) .l:nth-child(1) {
  animation-delay: 0.8s;
  margin-left: 0.3em;
  color: #105ee8;
}
.loader:nth-child(5) .l:nth-child(2) {
  animation-delay: 0.7s;
  margin-left: 0.2em;
  color: #579dff;
}
.loader:nth-child(5) .l:nth-child(3) {
  animation-delay: 0.6s;
  margin-left: 0.1em;
  color: #acd9f1;
}
.loader:nth-child(5) .l:nth-child(4) {
  animation-delay: 0.5s;
}

.loader:nth-child(6) .l:nth-child(1) {
  animation-delay: 0.9s;
  margin-left: 0.3em;
  color: #105ee8;
}
.loader:nth-child(6) .l:nth-child(2) {
  animation-delay: 0.8s;
  margin-left: 0.2em;
  color: #579dff;
}
.loader:nth-child(6) .l:nth-child(3) {
  animation-delay: 0.7s;
  margin-left: 0.1em;
  color: #acd9f1;
}
.loader:nth-child(6) .l:nth-child(4) {
  animation-delay: 0.6s;
}

.loader:nth-child(7) .l:nth-child(1) {
  animation-delay: 1s;
  margin-left: 0.3em;
  color: #105ee8;
}
.loader:nth-child(7) .l:nth-child(2) {
  animation-delay: 0.9s;
  margin-left: 0.2em;
  color: #579dff;
}
.loader:nth-child(7) .l:nth-child(3) {
  animation-delay: 0.8s;
  margin-left: 0.1em;
  color: #acd9f1;
}
.loader:nth-child(7) .l:nth-child(4) {
  animation-delay: 0.7s;
}

@keyframes float {
  0% {
    transform: translateY(0em);
  }
  50% {
    transform: translateY(2em);
  }
  100% {
    transform: translateY(0em);
  }
}

</style>
    

================================================
FILE: loaders/Praashoo7_funny-treefrog-32.html
================================================
<div class="loader">
  <span class="l">L</span>
  <span class="o">o</span>
  <span class="a">a</span>
  <span class="d">d</span>
  <span class="i">i</span>
  <span class="n">n</span>
  <span class="g">g</span>
  <span class="d1">.</span>
  <span class="d2">.</span>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: animation, loading, loader */
.l {
  color: black;
  opacity: 0;
  animation: pass 2s ease-in-out infinite;
  animation-delay: 0.2s;
  letter-spacing: 0.5em;
  text-shadow: 2px 2px 3px #919191;
}

.o {
  color: black;
  opacity: 0;
  animation: pass 2s ease-in-out infinite;
  animation-delay: 0.4s;
  letter-spacing: 0.5em;
  text-shadow: 2px 2px 3px #919191;
}

.a {
  color: black;
  opacity: 0;
  animation: pass 2s ease-in-out infinite;
  animation-delay: 0.6s;
  letter-spacing: 0.5em;
  text-shadow: 2px 2px 3px #919191;
}

.d {
  color: black;
  opacity: 0;
  animation: pass 2s ease-in-out infinite;
  animation-delay: 0.8s;
  letter-spacing: 0.5em;
  text-shadow: 2px 2px 3px #919191;
}

.i {
  color: black;
  opacity: 0;
  animation: pass 2s ease-in-out infinite;
  animation-delay: 1s;
  letter-spacing: 0.5em;
  text-shadow: 2px 2px 3px #919191;
}

.n {
  color: black;
  opacity: 0;
  animation: pass 2s ease-in-out infinite;
  animation-delay: 1.2s;
  letter-spacing: 0.5em;
  text-shadow: 2px 2px 3px #919191;
}

.g {
  color: black;
  opacity: 0;
  animation: pass 2s ease-in-out infinite;
  animation-delay: 1.4s;
  letter-spacing: 0.5em;
  text-shadow: 2px 2px 3px #919191;
}

.d1 {
  color: black;
  opacity: 0;
  animation: pass1 2s ease-in-out infinite;
  animation-delay: 1.6s;
  letter-spacing: 0.5em;
  text-shadow: 2px 2px 3px #919191;
}

.d2 {
  color: black;
  opacity: 0;
  animation: pass1 2s ease-in-out infinite;
  animation-delay: 2s;
  letter-spacing: 0.5em;
  text-shadow: 2px 2px 3px #919191;
}

@keyframes pass {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes pass1 {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>


================================================
FILE: loaders/Praashoo7_gentle-grasshopper-65.html
================================================
<div class="loader">
  <p class="heading">Loading</p>
  <div class="loading">
    <div class="load"></div>
    <div class="load"></div>
    <div class="load"></div>
    <div class="load"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: loader, smooth */
.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.heading {
  color: black;
  letter-spacing: 0.2em;
  margin-bottom: 1em;
}

.loading {
  display: flex;
  width: 5em;
  align-items: center;
  justify-content: center;
}

.load {
  width: 23px;
  height: 3px;
  background-color: limegreen;
  animation: 1s move_5011 infinite;
  border-radius: 5px;
  margin: 0.1em;
}

.load:nth-child(1) {
  animation-delay: 0.2s;
}

.load:nth-child(2) {
  animation-delay: 0.4s;
}

.load:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes move_5011 {
  0% {
    width: 0.2em;
  }

  25% {
    width: 0.7em;
  }

  50% {
    width: 1.5em;
  }

  100% {
    width: 0.2em;
  }
}
</style>


================================================
FILE: loaders/Praashoo7_giant-mole-65.html
================================================
<div class="loading">
<span class="l">L</span>
<span class="o">o</span>
<span class="a">a</span>
<span class="d">d</span>
<span class="i">i</span>
<span class="n">n</span>
<span class="g">g</span>
<span class="d1">.</span>
<span class="d2">.</span>
<div class="load">
    <div class="progress"></div>
    <div class="progress"></div>
    <div class="progress"></div>
    <div class="progress"></div>
</div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: animation, loading, loader */
.loading {
  transform: translate(0%, -50%);
}

.l {
  color: black;
  opacity: 0;
  animation: op 2s ease-in-out infinite;
  animation-delay: 0.2s;
}

.o {
  color: black;
  opacity: 0;
  animation: op 2s ease-in-out infinite;
  animation-delay: 0.4s;
}

.a {
  color: black;
  opacity: 0;
  animation: op 2s ease-in-out infinite;
  animation-delay: 0.6s;
}

.d {
  color: black;
  opacity: 0;
  animation: op 2s ease-in-out infinite;
  animation-delay: 0.8s;
}

.i {
  color: black;
  opacity: 0;
  animation: op 2s ease-in-out infinite;
  animation-delay: 1s;
}

.n {
  color: black;
  opacity: 0;
  animation: op 2s ease-in-out infinite;
  animation-delay: 1.2s;
}

.g {
  color: black;
  opacity: 0;
  animation: op 2s ease-in-out infinite;
  animation-delay: 1.4s;
}

.d1 {
  color: black;
  opacity: 0;
  animation: op1 2s ease-in-out infinite;
  animation-delay: 1.6s;
}

.d2 {
  color: black;
  opacity: 0;
  animation: op1 2s ease-in-out infinite;
  animation-delay: 2s;
}

.load {
  position: relative;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
}

.progress {
  top: 50%;
  left: -80%;
  position: absolute;
  margin-top: 2.2em;
  transform: translate(10%, -50%);
  content: '';
  width: 3.1em;
  height: 3.1em;
  background: transparent;
  border-radius: 50%;
  animation: load_37100 2s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes load_37100 {
  0% {
    background-color: #DB4437;
  }

  25% {
    background-color: #F4B400;
  }

  75% {
    background-color: #0F9D58;
  }

  100% {
    background-color: #4285F4;
  }
}

.progress:nth-child(2) {
  left: 50%;
  animation-delay: 1.3s;
}

.progress:nth-child(3) {
  left: 180%;
  animation-delay: 1.7s;
}

.progress:nth-child(4) {
  left: 300%;
  animation-delay: 2s;
}

@keyframes op {
  0% {
    color: black;
    opacity: 1;
  }

  50% {
    color: green;
    opacity: 1;
  }

  100% {
    color: black;
    opacity: 1;
  }
}

@keyframes op1 {
  0% {
    color: black;
    opacity: 1;
  }

  50% {
    color: green;
    opacity: 0;
  }

  100% {
    color: black;
    opacity: 1;
  }
}
</style>


================================================
FILE: loaders/Praashoo7_green-goat-59.html
================================================
<div class="load">
    <div class="progress"></div>
    <div class="progress"></div>
    <div class="progress"></div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: animation, loader, dots */
.load {
  display: flex;
  border-radius: 50%;
  flex-direction: row;
}

.progress {
  width: 2em;
  height: 2em;
  margin: 0.4em;
  scale: 0;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  animation: loading_492 2s ease infinite;
  animation-delay: 1s;
}

@keyframes loading_492 {
  50% {
    scale: 1;
  }
}

.progress:nth-child(2) {
  animation-delay: 1.3s;
}

.progress:nth-child(3) {
  animation-delay: 1.7s;
}
</style>


================================================
FILE: loaders/Praashoo7_happy-husky-85.html
================================================
<div class="loader2">
  <div class="load21"></div>
  <div class="load22"></div>
  <div class="load23"></div>
  <div class="load24"></div>
  <div class="load25"></div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: animation, loader */
.loader2 {
  display: flex;
  align-items: center;
}

.load21 {
  position: relative;
  content: "";
  height: 0.2em;
  width: 4em;
  border-radius: 5px;
  opacity: 0;
  background-color: white;
  box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  animation: 2s flow_21 infinite;
  animation-delay: 0.2s;
}

.load22 {
  position: absolute;
  content: "";
  height: 0.2em;
  width: 4em;
  opacity: 0;
  border-radius: 5px;
  background-color: white;
  animation: 2s flow_21 infinite;
  animation-delay: 0.4s;
}

.load23 {
  position: absolute;
  content: "";
  height: 0.2em;
  width: 4em;
  opacity: 0;
  border-radius: 5px;
  background-color: white;
  animation: 2s flow_21 infinite;
  animation-delay: 0.6s;
}

.load24 {
  position: absolute;
  content: "";
  height: 0.2em;
  width: 4em;
  opacity: 0;
  border-radius: 5px;
  background-color: white;
  animation: 2s flow_21 infinite;
  animation-delay: 0.8s;
}

.load25 {
  position: absolute;
  content: "";
  height: 0.2em;
  width: 4em;
  opacity: 0;
  border-radius: 5px;
  background-color: white;
  animation: 2s flow_21 infinite;
  animation-delay: 1s;
}

@keyframes flow_21 {
  0% {
    transform: translateY(1em);
    opacity: 1;
  }

  50% {
    transform: translateY(-1em);
    opacity: 1;
  }

  100% {
    transform: translateY(1em);
    opacity: 1;
  }
}
</style>


================================================
FILE: loaders/Praashoo7_itchy-jellyfish-43.html
================================================
<div class="main">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

<style>
/* From Uiverse.io by Praashoo7  - Tags: arrow, transition, cool checkbox, loader, arrow */
.main {
  display: flex;
  flex-wrap: wrap;
  width: 15em;
  align-items: center;
  justify-content: center;
}

.card {
  width: 40px;
  height: 40px;
  border-top-left-radius: 10px;
  background: lightgrey;
  transition: 0.4s ease-in-out, 0.2s background-color;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  margin: 0.2em;
  border-radius: 5px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: 2s loading90 infinite;
}

.card:nth-child(2) {
  animation-delay: 1s;
}

.card:nth-child(4) {
  animation-delay: 1s;
}

.card:nth-child(6) {
  animation-delay: 1s;
}

.card:nth-child(8) {
  animation-delay: 1s;
}

.card:nth-child(10) {
  animation-delay: 1s;
}

.card:nth-child(12) {
  animation-delay: 1s;
}

.card:nth-child(14) {
  animation-delay: 1s;
}

@keyframes loading90 {
  0% {
    background: rgba(255, 255, 255, 0.2);
  }

  50% {
    background: limegreen;
  }

  100% {
    background: rgba(255, 255, 255, 0.2);
  }
}

</style>
    

================================================
FILE: loaders/Praashoo7_lucky-hound-44.html
================================================
<div class="main">
  <div class="up">
    <div class="loaders">
      <div class="loader"></div>
      <div class="loader"></div>
      <div class="loader"></div>
      <div class="loader"></div>
      <div class="loader"></div>
      <div class="loader"></div>
      <div class="loader"></div>
      <div class="loader"></div>
      <div class="loader"></div>
      <div class="loader"></div>
    </div>
    <div class="loadersB">
      <div class="loaderA">
        <div class="ball0"></div>
      </div>
      <div class="loaderA">
        <div class="ball1"></div>
      </div>
      <div class="loaderA">
        <div class="ball2"></div>
      </div>
      <div class="loaderA">
        <div class="ball3"></div>
      </div>
      <div class="loaderA">
        <div class="ball4"></div>
      </div>
      <div class="loaderA">
        <div class="ball5"></div>
      </div>
      <div class="loaderA">
        <div class="ball6"></div>
      </div>
      <div class="loaderA">
        <div class="ball7"></div>
      </div>
      <div class="loaderA">
        <div class="ball8"></div>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Praashoo7  - Tags: neumorphism, animation, loader, smooth, shadow, realistic, circle loader, spin */
.main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loaders,
.loadersB {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  position: absolute;
  width: 1.15em;
  height: 13em;
  border-radius: 50px;
  background: #e0e0e0;
}
.loader:after {
  content: "";
  position: absolute;
  top: 0;
  width: 1.15em;
  height: 5em;
  background: #e0e0e0;
  border-radius: 50px;
  border: 1px solid #e2e2e2;
  box-shadow: inset 5px 5px 15px #d3d2d2ab, inset -5px -5px 15px #e9e9e9ab;
  mask-image: linear-gradient(
    to bottom,
    black calc(100% - 48px),
    transparent 100%
  );
}
.loader::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 1.15em;
  height: 4.5em;
  background: #e0e0e0;
  border-radius: 50px;
  border: 1px solid #e2e2e2;
  box-shadow: inset 5px 5px 15px #d3d2d2ab, inset -5px -5px 15px #e9e9e9ab;
  mask-image: linear-gradient(
    to top,
    black calc(100% - 48px),
    transparent 100%
  );
}
.loaderA {
  position: absolute;
  width: 1.15em;
  height: 13em;
  border-radius: 50px;
  background: transparent;
}
.ball0,
.ball1,
.ball2,
.ball3,
.ball4,
.ball5,
.ball6,
.ball7,
.ball8,
.ball9 {
  width: 1.15em;
  height: 1.15em;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -15px 15px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -40px 20px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px,
    0px -1px 15px -8px rgba(0, 0, 0, 0.09);
  border-radius: 50%;
  transition: transform 800ms cubic-bezier(1, -0.4, 0, 1.4);
  background-color: rgb(232, 232, 232, 1);
  animation: 3.63s move ease-in-out infinite;
}
.loader:nth-child(2) {
  transform: rotate(20deg);
}
.loader:nth-child(3) {
  transform: rotate(40deg);
}
.loader:nth-child(4) {
  transform: rotate(60deg);
}
.loader:nth-child(5) {
  transform: rotate(80deg);
}
.loader:nth-child(6) {
  transform: rotate(100deg);
}
.loader:nth-child(7) {
  transform: rotate(120deg);
}
.loader:nth-child(8) {
  transform: rotate(140deg);
}
.loader:nth-child(9) {
  transform: rotate(160deg);
}

.loaderA:nth-child(2) {
  transform: rotate(20deg);
}
.loaderA:nth-child(3) {
  transform: rotate(40deg);
}
.loaderA:nth-child(4) {
  transform: rotate(60deg);
}
.loaderA:nth-child(5) {
  transform: rotate(80deg);
}
.loaderA:nth-child(6) {
  transform: rotate(100deg);
}
.loaderA:nth-child(7) {
  transform: rotate(120deg);
}
.loaderA:nth-child(8) {
  transform: rotate(140deg);
}
.loaderA:nth-child(9) {
  transform: rotate(160deg);
}

.ball1 {
  animation-delay: 0.2s;
}
.ball2 {
  animation-delay: 0.4s;
}
.ball3 {
  animation-delay: 0.6s;
}
.ball4 {
  animation-delay: 0.8s;
}
.ball5 {
  animation-delay: 1s;
}
.ball6 {
  animation-delay: 1.2s;
}
.ball7 {
  animation-delay: 1.4s;
}
.ball8 {
  animation-delay: 1.6s;
}
.ball9 {
  animation-delay: 1.8s;
}

@keyframes move {
  0% {
    transform: translateY(0em);
  }
  50% {
    transform: translateY(12em);
  }
  100% {
    transform: translateY(0em);
  }
}

</style>
    

================================================
FILE: loaders/Praashoo7_odd-duck-54.html
================================================
<div class="loader">
  <div class="load1"></div>
  <div class="load2"></div>
  <div class="load3"></div>
  <div class="load4"></div>
  <div class="load5"></div>
  <div class="load6"></div>
  <div class="load7"></div>
  <div class="load8"></div>
  <div class="load9"></div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: animation, complex, loader */
.loader {
  display: flex;
  align-items: center;
  margin-left: -0.65em;
}

.load1 {
  position: absolute;
  content: "";
  margin-right: 1em;
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0 1px 7px rgba(0,0,0,0.3);
}

.load2 {
  position: absolute;
  margin-right: 1em;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 2s flow2 infinite;
}

.load3 {
  position: absolute;
  margin-right: 1em;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 2s flow3 infinite;
}

.load4 {
  position: absolute;
  margin-right: 1em;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 2s flow4 infinite;
}

.load5 {
  position: absolute;
  margin-right: 1em;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 2s flow5 infinite;
}

.load6 {
  position: absolute;
  margin-right: 1em;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 6s flow6 infinite;
}

.load7 {
  position: absolute;
  margin-right: 1em;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 6s flow7 infinite;
}

.load8 {
  position: absolute;
  margin-right: 1em;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 6s flow8 infinite;
}

.load9 {
  position: absolute;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 6s flow9 infinite;
}

@keyframes flow2 {
  50% {
    transform: translateX(3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateX(0em);
  }
}

@keyframes flow3 {
  50% {
    transform: translateX(-3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateX(0em);
  }
}

@keyframes flow4 {
  50% {
    transform: translateY(3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateY(0em);
  }
}

@keyframes flow5 {
  50% {
    transform: translateY(-3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateY(0em);
  }
}

@keyframes flow6 {
  30% {
    transform: translateX(3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  60% {
    transform: translateX(3em) translateY(-3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateX(0em) translateY(0em);
  }
}

@keyframes flow7 {
  30% {
    transform: translateX(-3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  60% {
    transform: translateX(-3em) translateY(3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateX(0em) translateY(0em);
  }
}

@keyframes flow8 {
  30% {
    transform: translateY(3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  60% {
    transform: translateY(3em) translateX(3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateX(0em) translateY(0em);
  }
}

@keyframes flow9 {
  30% {
    transform: translateY(-3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  60% {
    transform: translateY(-3em) translateX(-3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateX(0em) translateY(0em);
  }
}
</style>


================================================
FILE: loaders/Praashoo7_stale-bat-2.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: gradient, loader, circular, Infinite Spin */
/* 

   Design by Adrian Kuleszo
   Number of Keyframes can be increased or decreased based on the smoothness you require.
   
 */

.loader {
  width: 15em;
  height: 8em;
  border-radius: 15px;
  background: conic-gradient(from 0deg at 50% 50%, #FFFFFF, #1d3a3d);
  animation: 1.5s run infinite linear;
}

@keyframes run {
  0% {
    background: conic-gradient(from 0deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  0.277% {
    background: conic-gradient(from 1deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  0.554% {
    background: conic-gradient(from 2deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  0.831% {
    background: conic-gradient(from 3deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  1.108% {
    background: conic-gradient(from 4deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  1.385% {
    background: conic-gradient(from 5deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  1.662% {
    background: conic-gradient(from 6deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  1.939% {
    background: conic-gradient(from 7deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  2.216% {
    background: conic-gradient(from 8deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  2.493% {
    background: conic-gradient(from 9deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  2.770% {
    background: conic-gradient(from 10deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  3.047% {
    background: conic-gradient(from 11deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  3.324% {
    background: conic-gradient(from 12deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  3.601% {
    background: conic-gradient(from 13deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  3.878% {
    background: conic-gradient(from 14deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  4.155% {
    background: conic-gradient(from 15deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  4.432% {
    background: conic-gradient(from 16deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  4.709% {
    background: conic-gradient(from 17deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  4.986% {
    background: conic-gradient(from 18deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  5.263% {
    background: conic-gradient(from 19deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  5.540% {
    background: conic-gradient(from 20deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  5.817% {
    background: conic-gradient(from 21deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  6.094% {
    background: conic-gradient(from 22deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  6.371% {
    background: conic-gradient(from 23deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  6.648% {
    background: conic-gradient(from 24deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  6.925% {
    background: conic-gradient(from 25deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  7.202% {
    background: conic-gradient(from 26deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  7.479% {
    background: conic-gradient(from 27deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  7.756% {
    background: conic-gradient(from 28deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  8.033% {
    background: conic-gradient(from 29deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  8.310% {
    background: conic-gradient(from 30deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  8.587% {
    background: conic-gradient(from 31deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  8.864% {
    background: conic-gradient(from 32deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  9.141% {
    background: conic-gradient(from 33deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  9.418% {
    background: conic-gradient(from 34deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  9.695% {
    background: conic-gradient(from 35deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  9.972% {
    background: conic-gradient(from 36deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  10.249% {
    background: conic-gradient(from 37deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  10.526% {
    background: conic-gradient(from 38deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  10.803% {
    background: conic-gradient(from 39deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  11.080% {
    background: conic-gradient(from 40deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  11.357% {
    background: conic-gradient(from 41deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  11.634% {
    background: conic-gradient(from 42deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  11.911% {
    background: conic-gradient(from 43deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  12.188% {
    background: conic-gradient(from 44deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  12.465% {
    background: conic-gradient(from 45deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  12.742% {
    background: conic-gradient(from 46deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  13.019% {
    background: conic-gradient(from 47deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  13.296% {
    background: conic-gradient(from 48deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  13.573% {
    background: conic-gradient(from 49deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  13.850% {
    background: conic-gradient(from 50deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  14.127% {
    background: conic-gradient(from 51deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  14.404% {
    background: conic-gradient(from 52deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  14.681% {
    background: conic-gradient(from 53deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  14.958% {
    background: conic-gradient(from 54deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  15.235% {
    background: conic-gradient(from 55deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  15.512% {
    background: conic-gradient(from 56deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  15.789% {
    background: conic-gradient(from 57deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  16.066% {
    background: conic-gradient(from 58deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  16.343% {
    background: conic-gradient(from 59deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  16.620% {
    background: conic-gradient(from 60deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  16.897% {
    background: conic-gradient(from 61deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  17.174% {
    background: conic-gradient(from 62deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  17.451% {
    background: conic-gradient(from 63deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  17.728% {
    background: conic-gradient(from 64deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  18.005% {
    background: conic-gradient(from 65deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  18.282% {
    background: conic-gradient(from 66deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  18.559% {
    background: conic-gradient(from 67deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  18.836% {
    background: conic-gradient(from 68deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  19.113% {
    background: conic-gradient(from 69deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  19.390% {
    background: conic-gradient(from 70deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  19.667% {
    background: conic-gradient(from 71deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  19.944% {
    background: conic-gradient(from 72deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  20.221% {
    background: conic-gradient(from 73deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  20.498% {
    background: conic-gradient(from 74deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  20.775% {
    background: conic-gradient(from 75deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  21.052% {
    background: conic-gradient(from 76deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  21.329% {
    background: conic-gradient(from 77deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  21.606% {
    background: conic-gradient(from 78deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  21.883% {
    background: conic-gradient(from 79deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  22.160% {
    background: conic-gradient(from 80deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  22.437% {
    background: conic-gradient(from 81deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  22.714% {
    background: conic-gradient(from 82deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  22.991% {
    background: conic-gradient(from 83deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  23.268% {
    background: conic-gradient(from 84deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  23.545% {
    background: conic-gradient(from 85deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  23.822% {
    background: conic-gradient(from 86deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  24.099% {
    background: conic-gradient(from 87deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  24.376% {
    background: conic-gradient(from 88deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  24.653% {
    background: conic-gradient(from 89deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  24.930% {
    background: conic-gradient(from 90deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  25.207% {
    background: conic-gradient(from 91deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  25.484% {
    background: conic-gradient(from 92deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  25.761% {
    background: conic-gradient(from 93deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  26.038% {
    background: conic-gradient(from 94deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  26.315% {
    background: conic-gradient(from 95deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  26.592% {
    background: conic-gradient(from 96deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  26.869% {
    background: conic-gradient(from 97deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  27.146% {
    background: conic-gradient(from 98deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  27.423% {
    background: conic-gradient(from 99deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  27.700% {
    background: conic-gradient(from 100deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  27.977% {
    background: conic-gradient(from 101deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  28.254% {
    background: conic-gradient(from 102deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  28.531% {
    background: conic-gradient(from 103deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  28.808% {
    background: conic-gradient(from 104deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  29.085% {
    background: conic-gradient(from 105deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  29.362% {
    background: conic-gradient(from 106deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  29.639% {
    background: conic-gradient(from 107deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  29.916% {
    background: conic-gradient(from 108deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  30.193% {
    background: conic-gradient(from 109deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  30.470% {
    background: conic-gradient(from 110deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  30.747% {
    background: conic-gradient(from 111deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  31.024% {
    background: conic-gradient(from 112deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  31.301% {
    background: conic-gradient(from 113deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  31.578% {
    background: conic-gradient(from 114deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  31.855% {
    background: conic-gradient(from 115deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  32.132% {
    background: conic-gradient(from 116deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  32.409% {
    background: conic-gradient(from 117deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  32.686% {
    background: conic-gradient(from 118deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  32.963% {
    background: conic-gradient(from 119deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  33.240% {
    background: conic-gradient(from 120deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  33.517% {
    background: conic-gradient(from 121deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  33.794% {
    background: conic-gradient(from 122deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  34.071% {
    background: conic-gradient(from 123deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  34.348% {
    background: conic-gradient(from 124deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  34.625% {
    background: conic-gradient(from 125deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  34.902% {
    background: conic-gradient(from 126deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  35.179% {
    background: conic-gradient(from 127deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  35.456% {
    background: conic-gradient(from 128deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  35.733% {
    background: conic-gradient(from 129deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  36.010% {
    background: conic-gradient(from 130deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  36.287% {
    background: conic-gradient(from 131deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  36.564% {
    background: conic-gradient(from 132deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  36.841% {
    background: conic-gradient(from 133deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  37.118% {
    background: conic-gradient(from 134deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  37.395% {
    background: conic-gradient(from 135deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  37.672% {
    background: conic-gradient(from 136deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  37.949% {
    background: conic-gradient(from 137deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  38.226% {
    background: conic-gradient(from 138deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  38.503% {
    background: conic-gradient(from 139deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  38.780% {
    background: conic-gradient(from 140deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  39.057% {
    background: conic-gradient(from 141deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  39.334% {
    background: conic-gradient(from 142deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  39.611% {
    background: conic-gradient(from 143deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  39.888% {
    background: conic-gradient(from 144deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  40.165% {
    background: conic-gradient(from 145deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  40.442% {
    background: conic-gradient(from 146deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  40.719% {
    background: conic-gradient(from 147deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  40.996% {
    background: conic-gradient(from 148deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  41.273% {
    background: conic-gradient(from 149deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  41.550% {
    background: conic-gradient(from 150deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  41.827% {
    background: conic-gradient(from 151deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  42.104% {
    background: conic-gradient(from 152deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  42.381% {
    background: conic-gradient(from 153deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  42.658% {
    background: conic-gradient(from 154deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  42.935% {
    background: conic-gradient(from 155deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  43.212% {
    background: conic-gradient(from 156deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  43.489% {
    background: conic-gradient(from 157deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  43.766% {
    background: conic-gradient(from 158deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  44.043% {
    background: conic-gradient(from 159deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  44.320% {
    background: conic-gradient(from 160deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  44.597% {
    background: conic-gradient(from 161deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  44.874% {
    background: conic-gradient(from 162deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  45.151% {
    background: conic-gradient(from 163deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  45.428% {
    background: conic-gradient(from 164deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  45.705% {
    background: conic-gradient(from 165deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  45.982% {
    background: conic-gradient(from 166deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  46.259% {
    background: conic-gradient(from 167deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  46.536% {
    background: conic-gradient(from 168deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  46.813% {
    background: conic-gradient(from 169deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  47.090% {
    background: conic-gradient(from 170deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  47.367% {
    background: conic-gradient(from 171deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  47.644% {
    background: conic-gradient(from 172deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  47.921% {
    background: conic-gradient(from 173deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  48.198% {
    background: conic-gradient(from 174deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  48.475% {
    background: conic-gradient(from 175deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  48.752% {
    background: conic-gradient(from 176deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  49.029% {
    background: conic-gradient(from 177deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  49.306% {
    background: conic-gradient(from 178deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  49.583% {
    background: conic-gradient(from 179deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  49.860% {
    background: conic-gradient(from 180deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  50.137% {
    background: conic-gradient(from 181deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  50.414% {
    background: conic-gradient(from 182deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  50.691% {
    background: conic-gradient(from 183deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  50.968% {
    background: conic-gradient(from 184deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  51.245% {
    background: conic-gradient(from 185deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  51.522% {
    background: conic-gradient(from 186deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  51.799% {
    background: conic-gradient(from 187deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  52.076% {
    background: conic-gradient(from 188deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  52.353% {
    background: conic-gradient(from 189deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  52.630% {
    background: conic-gradient(from 190deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  52.907% {
    background: conic-gradient(from 191deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  53.184% {
    background: conic-gradient(from 192deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  53.461% {
    background: conic-gradient(from 193deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  53.738% {
    background: conic-gradient(from 194deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  54.015% {
    background: conic-gradient(from 195deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  54.292% {
    background: conic-gradient(from 196deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  54.569% {
    background: conic-gradient(from 197deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  54.846% {
    background: conic-gradient(from 198deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  55.123% {
    background: conic-gradient(from 199deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  55.400% {
    background: conic-gradient(from 200deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  55.677% {
    background: conic-gradient(from 201deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  55.954% {
    background: conic-gradient(from 202deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  56.231% {
    background: conic-gradient(from 203deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  56.508% {
    background: conic-gradient(from 204deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  56.785% {
    background: conic-gradient(from 205deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  57.062% {
    background: conic-gradient(from 206deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  57.339% {
    background: conic-gradient(from 207deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  57.616% {
    background: conic-gradient(from 208deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  57.893% {
    background: conic-gradient(from 209deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  58.170% {
    background: conic-gradient(from 210deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  58.447% {
    background: conic-gradient(from 211deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  58.724% {
    background: conic-gradient(from 212deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  59.001% {
    background: conic-gradient(from 213deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  59.278% {
    background: conic-gradient(from 214deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  59.555% {
    background: conic-gradient(from 215deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  59.832% {
    background: conic-gradient(from 216deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  60.109% {
    background: conic-gradient(from 217deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  60.386% {
    background: conic-gradient(from 218deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  60.663% {
    background: conic-gradient(from 219deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  60.940% {
    background: conic-gradient(from 220deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  61.217% {
    background: conic-gradient(from 221deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  61.494% {
    background: conic-gradient(from 222deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  61.771% {
    background: conic-gradient(from 223deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  62.048% {
    background: conic-gradient(from 224deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  62.325% {
    background: conic-gradient(from 225deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  62.602% {
    background: conic-gradient(from 226deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  62.879% {
    background: conic-gradient(from 227deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  63.156% {
    background: conic-gradient(from 228deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  63.433% {
    background: conic-gradient(from 229deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  63.710% {
    background: conic-gradient(from 230deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  63.987% {
    background: conic-gradient(from 231deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  64.264% {
    background: conic-gradient(from 232deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  64.541% {
    background: conic-gradient(from 233deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  64.818% {
    background: conic-gradient(from 234deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  65.095% {
    background: conic-gradient(from 235deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  65.372% {
    background: conic-gradient(from 236deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  65.649% {
    background: conic-gradient(from 237deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  65.926% {
    background: conic-gradient(from 238deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  66.203% {
    background: conic-gradient(from 239deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  66.480% {
    background: conic-gradient(from 240deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  66.757% {
    background: conic-gradient(from 241deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  67.034% {
    background: conic-gradient(from 242deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  67.311% {
    background: conic-gradient(from 243deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  67.588% {
    background: conic-gradient(from 244deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  67.865% {
    background: conic-gradient(from 245deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  68.142% {
    background: conic-gradient(from 246deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  68.419% {
    background: conic-gradient(from 247deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  68.696% {
    background: conic-gradient(from 248deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  68.973% {
    background: conic-gradient(from 249deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  69.250% {
    background: conic-gradient(from 250deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  69.527% {
    background: conic-gradient(from 251deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  69.804% {
    background: conic-gradient(from 252deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  70.081% {
    background: conic-gradient(from 253deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  70.358% {
    background: conic-gradient(from 254deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  70.635% {
    background: conic-gradient(from 255deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  70.912% {
    background: conic-gradient(from 256deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  71.189% {
    background: conic-gradient(from 257deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  71.466% {
    background: conic-gradient(from 258deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  71.743% {
    background: conic-gradient(from 259deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  72.020% {
    background: conic-gradient(from 260deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  72.297% {
    background: conic-gradient(from 261deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  72.574% {
    background: conic-gradient(from 262deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  72.851% {
    background: conic-gradient(from 263deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  73.128% {
    background: conic-gradient(from 264deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  73.405% {
    background: conic-gradient(from 265deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  73.682% {
    background: conic-gradient(from 266deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  73.959% {
    background: conic-gradient(from 267deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  74.236% {
    background: conic-gradient(from 268deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  74.513% {
    background: conic-gradient(from 269deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  74.790% {
    background: conic-gradient(from 270deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  75.067% {
    background: conic-gradient(from 271deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  75.344% {
    background: conic-gradient(from 272deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  75.621% {
    background: conic-gradient(from 273deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  75.898% {
    background: conic-gradient(from 274deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  76.175% {
    background: conic-gradient(from 275deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  76.452% {
    background: conic-gradient(from 276deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  76.729% {
    background: conic-gradient(from 277deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  77.006% {
    background: conic-gradient(from 278deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  77.283% {
    background: conic-gradient(from 279deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  77.560% {
    background: conic-gradient(from 280deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  77.837% {
    background: conic-gradient(from 281deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  78.114% {
    background: conic-gradient(from 282deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  78.391% {
    background: conic-gradient(from 283deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  78.668% {
    background: conic-gradient(from 284deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  78.945% {
    background: conic-gradient(from 285deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  79.222% {
    background: conic-gradient(from 286deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  79.499% {
    background: conic-gradient(from 287deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  79.776% {
    background: conic-gradient(from 288deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  80.053% {
    background: conic-gradient(from 289deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  80.330% {
    background: conic-gradient(from 290deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  80.607% {
    background: conic-gradient(from 291deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  80.884% {
    background: conic-gradient(from 292deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  81.161% {
    background: conic-gradient(from 293deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  81.438% {
    background: conic-gradient(from 294deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  81.715% {
    background: conic-gradient(from 295deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  81.992% {
    background: conic-gradient(from 296deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  82.269% {
    background: conic-gradient(from 297deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  82.546% {
    background: conic-gradient(from 298deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  82.823% {
    background: conic-gradient(from 299deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  83.100% {
    background: conic-gradient(from 300deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  83.377% {
    background: conic-gradient(from 301deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  83.654% {
    background: conic-gradient(from 302deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  83.931% {
    background: conic-gradient(from 303deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  84.208% {
    background: conic-gradient(from 304deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  84.485% {
    background: conic-gradient(from 305deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  84.762% {
    background: conic-gradient(from 306deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  85.039% {
    background: conic-gradient(from 307deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  85.316% {
    background: conic-gradient(from 308deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  85.593% {
    background: conic-gradient(from 309deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  85.870% {
    background: conic-gradient(from 310deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  86.147% {
    background: conic-gradient(from 311deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  86.424% {
    background: conic-gradient(from 312deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  86.701% {
    background: conic-gradient(from 313deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  86.978% {
    background: conic-gradient(from 314deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  87.255% {
    background: conic-gradient(from 315deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  87.532% {
    background: conic-gradient(from 316deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  87.809% {
    background: conic-gradient(from 317deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  88.086% {
    background: conic-gradient(from 318deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  88.363% {
    background: conic-gradient(from 319deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  88.640% {
    background: conic-gradient(from 320deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  88.917% {
    background: conic-gradient(from 321deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  89.194% {
    background: conic-gradient(from 322deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  89.471% {
    background: conic-gradient(from 323deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  89.748% {
    background: conic-gradient(from 324deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  90.025% {
    background: conic-gradient(from 325deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  90.302% {
    background: conic-gradient(from 326deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  90.579% {
    background: conic-gradient(from 327deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  90.856% {
    background: conic-gradient(from 328deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  91.133% {
    background: conic-gradient(from 329deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  91.410% {
    background: conic-gradient(from 330deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  91.687% {
    background: conic-gradient(from 331deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  91.964% {
    background: conic-gradient(from 332deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  92.241% {
    background: conic-gradient(from 333deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  92.518% {
    background: conic-gradient(from 334deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  92.795% {
    background: conic-gradient(from 335deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  93.072% {
    background: conic-gradient(from 336deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  93.349% {
    background: conic-gradient(from 337deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  93.626% {
    background: conic-gradient(from 338deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  93.903% {
    background: conic-gradient(from 339deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  94.180% {
    background: conic-gradient(from 340deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  94.457% {
    background: conic-gradient(from 341deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  94.734% {
    background: conic-gradient(from 342deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  95.011% {
    background: conic-gradient(from 343deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  95.288% {
    background: conic-gradient(from 344deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  95.565% {
    background: conic-gradient(from 345deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  95.842% {
    background: conic-gradient(from 346deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  96.119% {
    background: conic-gradient(from 347deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  96.396% {
    background: conic-gradient(from 348deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  96.673% {
    background: conic-gradient(from 349deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  96.950% {
    background: conic-gradient(from 350deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  97.227% {
    background: conic-gradient(from 351deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  97.504% {
    background: conic-gradient(from 352deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  97.781% {
    background: conic-gradient(from 353deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  98.058% {
    background: conic-gradient(from 354deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  98.335% {
    background: conic-gradient(from 355deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  98.612% {
    background: conic-gradient(from 356deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  98.889% {
    background: conic-gradient(from 357deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  99.166% {
    background: conic-gradient(from 358deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  99.443% {
    background: conic-gradient(from 359deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  99.720% {
    background: conic-gradient(from 360deg at 50% 50%, #FFFFFF, #1d3a3d);
  }

  100% {
    background: conic-gradient(from 0deg at 50% 50%, #FFFFFF, #1d3a3d);
  }
}
</style>


================================================
FILE: loaders/Praashoo7_young-turtle-98.html
================================================
<div class="loader">
  <svg xml:space="preserve" viewBox="0 0 80 80" height="80px" width="80px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" class="clock">  <image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAQAAAAkGDomAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfnAhAKEDpsFctQAAAHf0lEQVRo3u3aa4xV1RUH8N8wwzCDoICvKjATkRHB1AfVQYtftMZoLSqG1jZG2w9NUxVoNdYaY6ONxRIxqDQKoiStjxpEsOIjttXBB1atxihYYQZiHYY2aRgRjQSGS1n9wOFw72Vm7rl3ZmyT8r9fzj7nv9f537X3XnvvtQ8HcRAH8f+DY9yj6ct+aU0Z3Av8RKdfFd0da6pJJjjBoUY6BNt96jNtWq2z2uYv429M8bQmg01zSHqv2vkW2yBK/No84DyDBlbgz4TL88oN5tqcCNjqD253hdMdZ6RatUYa53RXuN3TtiasDnONHQhpx7pDo2onqUruNFmiSwjr3WJyCd9U+5pfaBVClweN72+B1wg3pqXh5ssJOQ87sxv2RTbrcGE3T87yiJywyzzD+kvc4erUuTw1ON1mIWeR4/JYg1Wn1x1C2JTnv8F5zHEWywkdLukPeUfY7vm0VOc+Iax2chFvjfd6FPh+3rO9OMXrQlhgSF8F1nnWTcl1g3eFHa5Oe+J+LLcivb5Qh00uSMsrPXkAv8q1dgjvGFO5uGP8UH1amqRDaHVKUq43XV3ZNutdkto8VZvQbmKlAu/KCyvNPhFaHJo+/akwu2ybhbUOs0rodEZlAhv9PBkak3QKTxb0mAZ39xjTXvdaD0+Ka9VZLnSW78Vm16fjskGH8GTeOC2F17yamVtthdBebl98Tvhq8h/fFVoS7w3pZoBUippkDVDnZeHt8kZ0kxmJlPuE1qTvDfEPf+w3gau0J6IOs0FYkLXi0a5MQ+t0YUc6cqu95L4KPHWbxm7uL/Ri2m1Os1O4OJvB36TU4TYLV/fRU98WPijJmilsyjYBTnBLsqCaL6zuc6/7i/DjkqxB3hDuLG1uZNpZm+TkDpjUysWZQqehGZin2W2X43snHe0LTyXXS4RFoM5MDRUKXCrM6ZXRaGYyJz0oLO7d3FAvuAE06JJLViwzhPkVyWuU0+XYXjn3CNPB8XK6skbEucLDyXW92RWuhO/Ks9ITGsxKZ/VHhTuyGB6kQ5hSkaj9GG6bcFoZNaYKm7PMWecLbX0ev9cJLWXWaRXOLU1bLNzSR3nVPsoefFPcKiwsTdtYZtN0hxlCW9lbzWZhfSnSWGGrQajx127Ww9mwWrg2M/spb6lGtW3C6MKHxf/ybLxqD6ocWrDlKccTU23128z8GsNV4d9eTRQUPCzERKwBOSdW6L/r8YDtmfnT0qu1phW/tdiDE9BaobC9GO0yOfdXVLc1UdCLwCa0VShtjGU+95HBlleYMmrFCb1T/i66XcFlkfdJmjD6l3EV2ThO+Kh3SqdwuN6SGD1hmfCM0UZ7VlhaRs397zpC2NI7uUuoVZgj6Hmnlo/P0xAxVvg0Q419dve/a4iws5CUJZjuERlYQd4Euaff7BZhXxMXJzFKY7nwrDHGeE54vIya+9+VoYkrHyQn6MzLq37gqApsdDNIipt4KxWZps0pnvC5rZb6m5O0VGDnKHzSO2WpcEVFAvNxpDXCOseUWe8q4feFt4o92E0srwBbfMNaJ2opU2I381ixwA9JNuuDtVrWB4nn+cCJ/pShoZ/wYbImOBnreifvXW5Vo8Z7ZYXbA3GUtcLakhKXe18Narpbbh2IDcLkPgnbj3198SuZ2FPEgf47MFC34KJ+Erivof/syAzsb2JVadp5oo8LrkLsbehFJXlVNgrnlDa4d9t5Vj9KPNLCDAmQqUJ7tn3MXOGR5HqomQNzhAUaXJsm1h8rmShJMVaXXLKiqzz1kQX3CJeB8XbbmYzg67xQyuP7Uzn1Zg2gBxvNSjy4JK+fPmW7o3uvON4uOacOmLBiTLZbV3rAVmtU6SrzhNf7MW3eGwZ5U5gLhro521Q7TEdZm+++YLbQnmR2LxXuzVbtEmFH2sw1WrLkTTJikZfSPNZkO+3xraRU6/sZ5x0sENochr3HEC/2m8AWm5N08wgbhbtBle+Ud+A9xDvCqiTFWFvGeVMpVKsFdV4R3kpKJwvPlGdojHZheRnSsu0A98lcIXycpomr3aC53P86UaewvOD4tcFdPcbGns/qGs0vyEHXWSFsScbsMDdUmqw/Q6fwshHpnesqPo6dlZZGeEXY4vSk/F1hXmUCmahd2JCmNetNzzvuzop6l6btMNlG4eO8iFfvmrJ3MHkY421hp5ndrDYetzK9Lk6YPFe8BcIgs+0U3kr73s1W9P0LhiEWCOGNA9LDa/JO44o/qljn3SL2ZG8Ke9ydjFx43hcO76tAuFiHsNtDBYdWg/OSoMUCawpytOMtsVtoT8PyIWaoMyTL3JsNw9xpl5DzqK93M1P3lDCpMtVjdgtdfp33/ddNwo/6S9w+jLM4+TRqg1s1l4iR1ab4pY1C2Jn3SVCVSao1mpdpt1I2xrjDpiQLs81Kc1yp2Tij1Ko1yjjNrjLHSp8lrHZzCjaU3xPJyeCAYZBzLbS+5Od5693vnLzRP8w0NZqszDZr9H3FN9rZJppgvFFGGIYvbLPVBq3We80/i/i3us0P/G5gvVcZbrRMrQnuLbWg/2/hBdv7J94NFOr/Vz13EAfRG/4DKjN4KDqpcokAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjMtMDItMTZUMTA6MTY6NTgrMDA6MDC/92EWAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIzLTAyLTE2VDEwOjE2OjU4KzAwOjAwzqrZqgAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMy0wMi0xNlQxMDoxNjo1OCswMDowMJm/+HUAAAAASUVORK5CYII=" y="0" x="0" height="80" width="80" id="image0"></image>
  </svg>
  <div class="stage"></div>
  <div class="hold">
    <div class="ball"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: loader, smooth, clock */
.loader {
  position: relative;
  background-color: white;
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-top: 3em;
  top: -0.4em;
  border-radius: 25px;
  z-index: -1;
  box-shadow: 5px 2px 0px #666666;
}

.clock {
  position: relative;
  top: -1.4em;
  left: 0.05em;
}

.stage {
  position: relative;
  left: 0.5em;
  background-color: black;
  width: 4em;
  height: .4em;
  border-radius: 15px;
  box-shadow: 2px 2px 0px #666666;
  z-index: 4;
}

.hold {
  position: relative;
  background-color: limegreen;
  width: 0.1em;
  height: 4em;
  left: 2.5em;
  top: -.25em;
  animation: 1.3s dangle infinite;
  box-shadow: 4px 4px 0px #666666;
  z-index: -1;
}

@keyframes dangle {
  0% {
    transform-origin: top center;
    transform: rotate(45deg);
  }

  50% {
    transform-origin: top center;
    transform: rotate(-45deg);
  }

  100% {
    transform-origin: top center;
    transform: rotate(45deg);
  }
}

.ball {
  display: inline-block;
  position: relative;
  top: 3em;
  left: -1.2em;
  width: 2.5em;
  height: 2.5em;
  margin: 0;
  border-radius: 50%;
  background: #171717;
  box-shadow: 1px 1px 0px #666666;
}
</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_breezy-grasshopper-79.html
================================================
<div class="loader">
  <div class="cubes">
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
    <div class="cube">
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    	<div class="side"></div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader */
/* The loader container */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  margin-top: -80px;
  margin-left: -80px;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.cubes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(-135deg);
  animation: cubes 8s cubic-bezier(0,0,1,1) infinite;
}


/* The cube */
.cube {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  opacity: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: cube 2s cubic-bezier(.64,.21,.42,.85) infinite;
}

@keyframes cube {
  0% {
    opacity: 0;
    transform: translateZ(100px);
  }

  40%, 60% {
    opacity: 1;
    transform: translateZ(10px);
  }

  100% {
    opacity: 0;
    transform: translateZ(-100px);
  }
}


/* The side */
.side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* back */
.side:nth-child(1) {
  transform: rotateX(-180deg) translateZ(10px);
  background-color: #1e3f57;
}

/* left side */
.side:nth-child(2) {
  transform: rotateY(-90deg) translateZ(10px);
  background-color: #6bb2cd;
}

/* right side */
.side:nth-child(3) {
  transform: rotateY(90deg) translateZ(10px);
  background-color: #6bb2cd;
}

/* top side */
.side:nth-child(4) {
  transform: rotateX(90deg) translateZ(10px);
  background-color: #3c617d;
}

/* bottom side */
.side:nth-child(5) {
  transform: rotateX(-90deg) translateZ(10px);
  background-color: #3c617d;
}

/* top */
.side:nth-child(6) {
  transform: translateZ(10px);
  background-color: #1e3f57;
}

.cube:nth-child(8n+1) {
  left: 20px;
}

.cube:nth-child(8n+2) {
  left: 40px;
}

.cube:nth-child(8n+3) {
  left: 60px;
}

.cube:nth-child(8n+4) {
  left: 80px;
}

.cube:nth-child(8n+5) {
  left: 100px;
}

.cube:nth-child(8n+6) {
  left: 120px;
}

.cube:nth-child(8n+7) {
  left: 140px;
}

.cube:nth-child(8),
.cube:nth-child(9),
.cube:nth-child(10),
.cube:nth-child(11),
.cube:nth-child(12),
.cube:nth-child(13),
.cube:nth-child(14),
.cube:nth-child(15) {
  top: 20px;
}

.cube:nth-child(16),
.cube:nth-child(17),
.cube:nth-child(18),
.cube:nth-child(19),
.cube:nth-child(20),
.cube:nth-child(21),
.cube:nth-child(22),
.cube:nth-child(23) {
  top: 40px;
}

.cube:nth-child(24),
.cube:nth-child(25),
.cube:nth-child(26),
.cube:nth-child(27),
.cube:nth-child(28),
.cube:nth-child(29),
.cube:nth-child(30),
.cube:nth-child(31) {
  top: 60px;
}

.cube:nth-child(32),
.cube:nth-child(33),
.cube:nth-child(34),
.cube:nth-child(35),
.cube:nth-child(36),
.cube:nth-child(37),
.cube:nth-child(38),
.cube:nth-child(39) {
  top: 80px;
}

.cube:nth-child(40),
.cube:nth-child(41),
.cube:nth-child(42),
.cube:nth-child(43),
.cube:nth-child(44),
.cube:nth-child(45),
.cube:nth-child(46),
.cube:nth-child(47) {
  top: 100px;
}

.cube:nth-child(48),
.cube:nth-child(49),
.cube:nth-child(50),
.cube:nth-child(51),
.cube:nth-child(52),
.cube:nth-child(53),
.cube:nth-child(54),
.cube:nth-child(55) {
  top: 120px;
}

.cube:nth-child(56),
.cube:nth-child(57),
.cube:nth-child(58),
.cube:nth-child(59),
.cube:nth-child(60),
.cube:nth-child(61),
.cube:nth-child(62),
.cube:nth-child(63) {
  top: 140px;
}

/* keyframe delays */
.cube:nth-child(1),
.cube:nth-child(8) {
  animation-delay: 50ms;
}

.cube:nth-child(2),
.cube:nth-child(9),
.cube:nth-child(16) {
  animation-delay: 100ms;
}

.cube:nth-child(3),
.cube:nth-child(10),
.cube:nth-child(17),
.cube:nth-child(24) {
  animation-delay: 150ms;
}

.cube:nth-child(4),
.cube:nth-child(11),
.cube:nth-child(18),
.cube:nth-child(25),
.cube:nth-child(32) {
  animation-delay: 200ms;
}

.cube:nth-child(5),
.cube:nth-child(12),
.cube:nth-child(19),
.cube:nth-child(26),
.cube:nth-child(33),
.cube:nth-child(40) {
  animation-delay: 250ms;
}

.cube:nth-child(6),
.cube:nth-child(13),
.cube:nth-child(20),
.cube:nth-child(27),
.cube:nth-child(34),
.cube:nth-child(41),
.cube:nth-child(48) {
  animation-delay: 300ms;
}

.cube:nth-child(7),
.cube:nth-child(14),
.cube:nth-child(21),
.cube:nth-child(28),
.cube:nth-child(35),
.cube:nth-child(42),
.cube:nth-child(49),
.cube:nth-child(56) {
  animation-delay: 350ms;
}

.cube:nth-child(15),
.cube:nth-child(22),
.cube:nth-child(29),
.cube:nth-child(36),
.cube:nth-child(43),
.cube:nth-child(50),
.cube:nth-child(57) {
  animation-delay: 400ms;
}

.cube:nth-child(23),
.cube:nth-child(30),
.cube:nth-child(37),
.cube:nth-child(44),
.cube:nth-child(51),
.cube:nth-child(58) {
  animation-delay: 450ms;
}

.cube:nth-child(31),
.cube:nth-child(38),
.cube:nth-child(45),
.cube:nth-child(52),
.cube:nth-child(59) {
  animation-delay: 500ms;
}

.cube:nth-child(39),
.cube:nth-child(46),
.cube:nth-child(53),
.cube:nth-child(60) {
  animation-delay: 550ms;
}

.cube:nth-child(47),
.cube:nth-child(54),
.cube:nth-child(61) {
  animation-delay: 600ms;
}

.cube:nth-child(55),
.cube:nth-child(62) {
  animation-delay: 650ms;
}

.cube:nth-child(63) {
  animation-delay: 700ms;
}
</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_chatty-bird-86.html
================================================
<div class="circ">
  <div class="load">Loading . . . </div>
  <div class="hands"></div>
  <div class="body"></div>
  <div class="head">
    <div class="eye"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader */
.eye {
  width: 20px;
  height: 8px;
  background-color: rgba(240,220,220,1);
  border-radius: 0px 0px 20px 20px;
  position: relative;
  left: 10px;
  top: 40px;
  box-shadow: 40px 0px 0px 0px rgba(240,220,220,1);
}

.head {
  backface-visibility: hidden;
  position: relative;
  margin: -250px auto;
  width: 80px;
  height: 80px;
  background-color: #111;
  border-radius: 50px;
  box-shadow: inset -4px 2px 0px 0px rgba(240,220,220,1);
  animation: headAnim 1.5s infinite alternate;
  animation-timing-function: ease-out;
}

.body {
  position: relative;
  margin: 90px auto;
  width: 140px;
  height: 120px;
  background-color: #111;
  border-radius: 50px/25px;
  box-shadow: inset -5px 2px 0px 0px rgba(240,220,220,1);
  animation: bodyAnim 1.5s infinite alternate;
  animation-timing-function: ease-out;
}

@keyframes headAnim {
  0% {
    top: 0px;
  }

  50% {
    top: 10px;
  }

  100% {
    top: 0px;
  }
}

@keyframes bodyAnim {
  0% {
    top: -5px;
  }

  50% {
    top: 10px;
  }

  100% {
    top: -5px;
  }
}

.circ {
  backface-visibility: hidden;
  margin: 60px auto;
  width: 180px;
  height: 180px;
  border-radius: 0px 0px 50px 50px;
  position: relative;
  z-index: -1;
  left: 0%;
  top: 20%;
  overflow: hidden;
}

.hands {
  margin-top: 140px;
  width: 120px;
  height: 120px;
  position: absolute;
  background-color: #111;
  border-radius: 20px;
  box-shadow: -1px -4px 0px 0px rgba(240,220,220,1);
  transform: rotate(45deg);
  top: 75%;
  left: 16%;
  z-index: 1;
  animation: bodyAnim 1.5s infinite alternate;
  animation-timing-function: ease-out;
}

.load {
  position: absolute;
  width: 7ch;
  height: 32px;
  text-align: left;
  line-height: 32px;
  margin: -10px auto;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: rgb(155, 152, 152);
  left: 2%;
  top: 5%;
  animation: fontAnim 3.75s infinite;
  animation-timing-function: ease-out;
  word-wrap: break-word;
  display: block;
  overflow: hidden;
}

@keyframes fontAnim {
  0% {
    width: 7ch;
  }

  16% {
    width: 8ch;
  }

  32% {
    width: 9ch;
  }

  48% {
    width: 10ch;
  }

  64% {
    width: 11ch;
  }

  80% {
    width: 12ch;
  }

  100% {
    width: 13ch;
  }
}
</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_curly-wasp-39.html
================================================
<div class="loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader */
/* The loader */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  perspective: 600px;
  transform-style: perserve-3d;
}

/* The dot */
.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  border-radius: 100px;
  border: 20px solid #1e3f57;
  transform-style: perserve-3d;
  transform: scale(0) rotateX(60deg);
  animation: dot 3s cubic-bezier(.67,.08,.46,1.5) infinite;
}

.dot:nth-child(2) {
  animation-delay: 200ms;
}

.dot:nth-child(3) {
  animation-delay: 400ms;
}

.dot:nth-child(4) {
  animation-delay: 600ms;
}

.dot:nth-child(5) {
  animation-delay: 800ms;
}

.dot:nth-child(6) {
  animation-delay: 1000ms;
}

.dot:nth-child(7) {
  animation-delay: 1200ms;
}

.dot:nth-child(8) {
  animation-delay: 1400ms;
}

@keyframes dot {
  0% {
    opacity: 0;
    border-color: #6bb2cd;
    transform: rotateX(60deg) rotateY(45deg) translateZ(-100px) scale(0.1);
  }

  40% {
    opacity: 1;
    transform: rotateX(0deg) rotateY(20deg) translateZ(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: rotateX(60deg) rotateY(-45deg) translateZ(-100px) scale(0.1);
  }
}
</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_dangerous-horse-50.html
================================================
<div class="loader">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

<div class="loader loader--reflect">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader */
/* The loader container */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-top: -100px;
  margin-left: -100px;
  perspective: 1000px;
  transform-style: preserv3d;
}

.loader--reflect {
  margin-top: 0;
}

.loader--reflect:after {
  content: '';
  position: absolute;
  top: 0;
  left: -25%;
  width: 150%;
  height: 110%;
  background: linear-gradient(0deg, rgba(238, 238, 238, 1), rgba(238, 238, 238, 1) 20%, rgba(238, 238, 238, 0.3));
}


/* The bar */
.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 100px;
  background-color: #1e3f57;
  transform: scaleY(0);
  transform-style: preserve3d;
  animation: bar 3s cubic-bezier(.81,.04,.4,.7) infinite;
}

.bar:nth-child(2) {
  left: 20px;
  background-color: #264a63;
  animation-delay: 50ms;
}

.bar:nth-child(3) {
  left: 40px;
  background-color: #2d566f;
  animation-delay: 100ms;
}

.bar:nth-child(4) {
  left: 60px;
  background-color: #35617a;
  animation-delay: 150ms;
}

.bar:nth-child(5) {
  left: 80px;
  background-color: #3d6d86;
  animation-delay: 200ms;
}

.bar:nth-child(6) {
  left: 100px;
  background-color: #447892;
  animation-delay: 250ms;
}

.bar:nth-child(7) {
  left: 120px;
  background-color: #4c849e;
  animation-delay: 300ms;
}

.bar:nth-child(8) {
  left: 140px;
  background-color: #548fa9;
  animation-delay: 350ms;
}

.bar:nth-child(9) {
  left: 160px;
  background-color: #5c9bb5;
  animation-delay: 400ms;
}

.bar:nth-child(10) {
  left: 180px;
  background-color: #63a6c1;
  animation-delay: 450ms;
}

.loader--reflect .bar {
  animation-name: bar-reflect;
}

@keyframes bar {
  0% {
    transform: rotateZ(-180deg) rotateX(-360deg);
  }

  75%,100% {
    transform: rotateZ(0) rotateX(0);
  }
}

@keyframes bar-reflect {
  0% {
    transform: rotateZ(180deg) rotateX(360deg);
  }

  75%,100% {
    transform: rotateZ(0) rotateX(0);
  }
}
</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_fast-cobra-20.html
================================================
<div class="loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader */
/* The loader container */
.loader {
  width: 200px;
  height: 200px;
  perspective: 200px;
}


/* The dot */
.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 100px;
  border: 40px outset #1e3f57;
  transform-origin: 50% 50%;
  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  background-color: transparent;
  animation: dot1 1000ms cubic-bezier(.49,.06,.43,.85) infinite;
}

.dot:nth-child(2) {
  width: 140px;
  height: 140px;
  margin-top: -70px;
  margin-left: -70px;
  border-width: 30px;
  border-color: #447891;
  animation-name: dot2;
  animation-delay: 75ms;
  box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
}

.dot:nth-child(3) {
  width: 160px;
  height: 160px;
  margin-top: -80px;
  margin-left: -80px;
  border-width: 20px;
  border-color: #6bb2cd;
  animation-name: dot3;
  animation-delay: 150ms;
  box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
}

@keyframes dot1 {
  0% {
    border-color: #1e3f57;
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }

  50% {
    border-color: #1e574f;
    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
  }

  100% {
    border-color: #1e3f57;
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
}

@keyframes dot2 {
  0% {
    border-color: #447891;
    box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }

  50% {
    border-color: #449180;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
  }

  100% {
    border-color: #447891;
    box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
}

@keyframes dot3 {
  0% {
    border-color: #6bb2cd;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }

  50% {
    border-color: #6bcdb2;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
  }

  100% {
    border-color: #6bb2cd;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
}
</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_fast-frog-4.html
================================================
<div>
<div class="loader"></div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader */
.loader {
  animation: rotate 1s infinite;
  height: 50px;
  width: 50px;
}

.loader:before,
.loader:after {
  border-radius: 50%;
  content: '';
  display: block;
  height: 20px;
  width: 20px;
}

.loader:before {
  animation: ball1 1s infinite;
  background-color: #cb2025;
  box-shadow: 30px 0 0 #f8b334;
  margin-bottom: 10px;
}

.loader:after {
  animation: ball2 1s infinite;
  background-color: #00a096;
  box-shadow: 30px 0 0 #97bf0d;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(0.8);
    -moz-transform: rotate(0deg) scale(0.8);
  }

  50% {
    -webkit-transform: rotate(360deg) scale(1.2);
    -moz-transform: rotate(360deg) scale(1.2);
  }

  100% {
    -webkit-transform: rotate(720deg) scale(0.8);
    -moz-transform: rotate(720deg) scale(0.8);
  }
}

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 #f8b334;
  }

  50% {
    box-shadow: 0 0 0 #f8b334;
    margin-bottom: 0;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px, 15px);
  }

  100% {
    box-shadow: 30px 0 0 #f8b334;
    margin-bottom: 10px;
  }
}

@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 #97bf0d;
  }

  50% {
    box-shadow: 0 0 0 #97bf0d;
    margin-top: -20px;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px, 15px);
  }

  100% {
    box-shadow: 30px 0 0 #97bf0d;
    margin-top: 0;
  }
}
</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_fuzzy-newt-54.html
================================================
<ul class="loader">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader */
@keyframes pound {
  to {
    transform: scale(1.2);
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45)
  }
}

ul.loader {
  display: block;
  position: relative;
  width: 5em;
}

.loader li {
  list-style: none;
  display: block;
  float: left;
  width: 0.5em;
  height: 3em;
  margin: 0 0.5em 0 0;
  background: #635863;
  background: -moz-linear-gradient(top, #635863 0%, #3d353b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#635863),  color-stop(100%,#3d353b));
  background: -webkit-linear-gradient(top, #635863 0%,#3d353b 100%);
  background: -o-linear-gradient(top, #635863 0%,#3d353b 100%);
  background: -ms-linear-gradient(top, #635863 0%,#3d353b 100%);
  background: linear-gradient(to bottom, #635863 0%,#3d353b 100%);
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.0), 1px 1px 1px 0 rgba(0, 0, 0, 0.0), 1px 1px 1px 0 rgba(0, 0, 0, 0.0);
  animation: pound .7s ease-in-out infinite alternate;
  animation-delay: 0.05s;
  transform-origin: center;
}

.loader li:nth-child(2) {
  animation-delay: 0.20s;
}

.loader li:nth-child(3) {
  animation-delay: 0.35s;
}

.loader li:nth-child(4) {
  animation-delay: 0.50s;
}

.loader li:nth-child(5) {
  animation-delay: 0.65s;
}

</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_neat-swan-21.html
================================================
<div class="window">
  <div class="logo">
    <p class="top">Microsoft</p>
    <p class="mid">Windows<span>XP</span></p>
    <p class="bottom">Professional</p>
  </div>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader, retro, windows, xp */
.container {
  width: 150px;
  height: 10px;
  border: 2px solid #b2b2b2;
  border-radius: 7px;
  margin: 0 auto;
  padding: 2px 1px;
  overflow: hidden;
  font-size: 0;
}

.box {
  width: 9px;
  height: 100%;
  background: linear-gradient(to bottom, #2838c7 0%,#5979ef 17%,#869ef3 32%,#869ef3 45%,#5979ef 59%,#2838c7 100%);
  display: inline-block;
  margin-right: 2px;
  animation: loader 2s infinite;
  animation-timing-function: linear;
}

.logo {
  width: 220px;
  margin: 50px auto;
  margin-top: 20px;
}

.logo p {
  margin: 0;
  padding: 0;
}

.top {
  font-size: 16px;
  font-weight: 300;
  line-height: 16px;
}

.top:after {
  content: "\00a9";
  font-size: 10px;
  position: relative;
  top: -5px;
  margin-left: 2px;
}

.mid {
  font-size: 46px;
  font-weight: 700;
  line-height: 36px;
}

.mid span {
  font-size: 22px;
  display: inline-block;
  vertical-align: top;
  color: #FF6821;
  margin-top: -8px;
}

.logo .bottom {
  font-size: 30px;
  font-weight: 300;
  line-height: 30px;
  margin-left: 5px;
}

@keyframes loader {
  0% {
    transform: translate(-30px);
  }

  100% {
    transform: translate(150px);
  }
}

</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_nervous-starfish-15.html
================================================
<div class="loader">
  <div class="cube">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: 3d, loader, cube */
/* The loader container */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  perspective: 1000px;
  transform-type: preserve-3d;
}


/* The cube */
.cube {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  transform-style: preserve-3d;
  transform: translateZ(-50px);
  animation: cube 4s cubic-bezier(.18,.56,.64,1) infinite;
}

@keyframes cube {
  0% {
    top: 0%;
    left: 0%;
    transform: translateZ(-50px);
  }

  25% {
    top: 50%;
    left: 50%;
    transform: translateZ(-50px) rotateX(-90deg) rotateZ(90deg);
  }

  50% {
    top: 0%;
    left: 50%;
    transform: translateZ(-50px) rotateX(0deg) rotateZ(180deg);
  }

  75% {
    top: 50%;
    left: 0%;
    transform: translateZ(-50px) rotateX(-90deg) rotateZ(-90deg);
  }
}


/* The side */
.side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* back */
.side:nth-child(1) {
  transform: rotateX(-180deg) translateZ(50px);
  background-color: #1e3f57;
}

/* left side */
.side:nth-child(2) {
  transform: rotateY(-90deg) translateZ(50px);
  background-color: #6bb2cd;
}

/* right side */
.side:nth-child(3) {
  transform: rotateY(90deg) translateZ(50px);
  background-color: #6bb2cd;
}

/* top side */
.side:nth-child(4) {
  transform: rotateX(90deg) translateZ(50px);
  background-color: #3c617d;
}

/* bottom side */
.side:nth-child(5) {
  transform: rotateX(-90deg) translateZ(50px);
  background-color: #3c617d;
}

/* top */
.side:nth-child(6) {
  transform: translateZ(50px);
  background-color: #1e3f57;
}

</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_plastic-tiger-87.html
================================================
<div class="loader">
  <div class="cubes">
    <div class="cube">
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
    </div>
    <div class="cube">
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
    </div>
    <div class="cube">
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
    </div>
    <div class="cube">
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader */
/* The loader container */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  perspective: 1000px;
  transform-style: preserve-3d;
}


/* The cubes */
.cubes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(45deg) rotateZ(45deg);
}


/* The cube */
.cube {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transform: translateZ(-50px);
  animation: cube 2500ms cubic-bezier(.66,.14,.56,.75) infinite;
}

.cube:nth-child(2) {
  top: 0;
  left: 50%;
  animation-delay: 50ms;
}

.cube:nth-child(3) {
  top: 50%;
  left: 0;
  animation-delay: 100ms;
}

.cube:nth-child(4) {
  top: 50%;
  left: 50%;
  animation-delay: 150ms;
}

@keyframes cube {
  0%, 75%, 100% {
    transform: translate3d(0px, 0px, 50px) rotateY(0deg) scale3d(0.9, 0.9, 0.1);
  }

  25%, 50% {
    transform: translate3d(0px, 0px, -50px) rotateY(180deg) scale3d(0.9, 0.9, 0.1);
  }
}





/* The side */
.side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* back */
.side:nth-child(1) {
  transform: rotateX(-180deg) translateZ(50px);
  background-color: #1e3f57;
}

/* left side */
.side:nth-child(2) {
  transform: rotateY(-90deg) translateZ(50px);
  background-color: #6bb2cd;
}

/* right side */
.side:nth-child(3) {
  transform: rotateY(90deg) translateZ(50px);
  background-color: #6bb2cd;
}

/* top side */
.side:nth-child(4) {
  transform: rotateX(90deg) translateZ(50px);
  background-color: #3c617d;
}

/* bottom side */
.side:nth-child(5) {
  transform: rotateX(-90deg) translateZ(50px);
  background-color: #3c617d;
}

/* top */
.side:nth-child(6) {
  transform: translateZ(50px);
  background-color: #1e3f57;
}

</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_rude-vampirebat-100.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader */
.loader {
  --s: 5px;
 /* control the size */
  width: calc(10*var(--s));
  display: grid;
  aspect-ratio: 1;
  border-radius: 50%;
  -webkit-mask: radial-gradient(50% 50%,#0000 calc(99% - 2*var(--s)),#000 calc(101% - 2*var(--s)));
  animation: r 4s linear infinite;
}

.loader:before {
  content: "";
  /* adjust the colors below */
  background: conic-gradient(from 25deg,#f8a201 25%,#fa2402 0 50%,#fdb3b0 0 75%,#02dde1 0);
  -webkit-mask: repeating-conic-gradient(#0000 0 25deg,#000 23% 25%),
    radial-gradient(var(--s) at var(--s) 50%,#000 97%,#0000) 
      left/calc(100% - 2*var(--s)) 100% repeat-x,
    radial-gradient(var(--s) at 50% var(--s),#000 97%,#0000) 
      top /100% calc(100% - 2*var(--s)) repeat-y;
}

@keyframes r {
  to {
    transform: rotate(1turn)
  }
}

</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_soft-turkey-91.html
================================================
<div class="preloader" style="opacity: 1;">
  <svg version="1.1" id="sun" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 10 10" xml:space="preserve" style="opacity: 1; margin-left: 0px; margin-top: 0px;">
    <g>
      <path fill="none" d="M6.942,3.876c-0.4-0.692-1.146-1.123-1.946-1.123c-0.392,0-0.779,0.104-1.121,0.301c-1.072,0.619-1.44,1.994-0.821,3.067C3.454,6.815,4.2,7.245,5,7.245c0.392,0,0.779-0.104,1.121-0.301C6.64,6.644,7.013,6.159,7.167,5.581C7.321,5,7.243,4.396,6.942,3.876z M6.88,5.505C6.745,6.007,6.423,6.427,5.973,6.688C5.676,6.858,5.34,6.948,5,6.948c-0.695,0-1.343-0.373-1.69-0.975C2.774,5.043,3.093,3.849,4.024,3.312C4.32,3.14,4.656,3.05,4.996,3.05c0.695,0,1.342,0.374,1.69,0.975C6.946,4.476,7.015,5,6.88,5.505z"></path>
      <path fill="none" d="M8.759,2.828C8.718,2.757,8.626,2.732,8.556,2.774L7.345,3.473c-0.07,0.041-0.094,0.132-0.053,0.202C7.319,3.723,7.368,3.75,7.419,3.75c0.025,0,0.053-0.007,0.074-0.02l1.211-0.699C8.774,2.989,8.8,2.899,8.759,2.828z"></path>
      <path fill="none" d="M1.238,7.171c0.027,0.047,0.077,0.074,0.128,0.074c0.025,0,0.051-0.008,0.074-0.02l1.211-0.699c0.071-0.041,0.095-0.133,0.054-0.203S2.574,6.228,2.503,6.269l-1.21,0.699C1.221,7.009,1.197,7.101,1.238,7.171z"></path>
      <path fill="none" d="M6.396,2.726c0.052,0,0.102-0.026,0.13-0.075l0.349-0.605C6.915,1.976,6.89,1.885,6.819,1.844c-0.07-0.042-0.162-0.017-0.202,0.054L6.269,2.503C6.228,2.574,6.251,2.666,6.322,2.706C6.346,2.719,6.371,2.726,6.396,2.726z"></path>
		  <path fill="none" d="M3.472,7.347L3.123,7.952c-0.041,0.07-0.017,0.162,0.054,0.203C3.2,8.169,3.226,8.175,3.25,8.175c0.052,0,0.102-0.027,0.129-0.074l0.349-0.605c0.041-0.07,0.017-0.16-0.054-0.203C3.603,7.251,3.513,7.276,3.472,7.347z"></path>
		  <path fill="none" d="M3.601,2.726c0.025,0,0.051-0.007,0.074-0.02C3.746,2.666,3.77,2.574,3.729,2.503l-0.35-0.604C3.338,1.828,3.248,1.804,3.177,1.844C3.106,1.886,3.082,1.976,3.123,2.047l0.35,0.604C3.5,2.7,3.549,2.726,3.601,2.726z"></path>
		  <path fill="none" d="M6.321,7.292c-0.07,0.043-0.094,0.133-0.054,0.203l0.351,0.605c0.026,0.047,0.076,0.074,0.127,0.074c0.025,0,0.051-0.006,0.074-0.02c0.072-0.041,0.096-0.133,0.055-0.203l-0.35-0.605C6.483,7.276,6.393,7.253,6.321,7.292z"></path>
		  <path fill="none" d="M2.202,5.146c0.082,0,0.149-0.065,0.149-0.147S2.284,4.851,2.202,4.851H1.503c-0.082,0-0.148,0.066-0.148,0.148s0.066,0.147,0.148,0.147H2.202z"></path>
		  <path fill="none" d="M8.493,4.851H7.794c-0.082,0-0.148,0.066-0.148,0.148s0.066,0.147,0.148,0.147l0,0h0.699c0.082,0,0.148-0.065,0.148-0.147S8.575,4.851,8.493,4.851L8.493,4.851z"></path>
		  <path fill="none" d="M5.146,2.203V0.805c0-0.082-0.066-0.148-0.148-0.148c-0.082,0-0.148,0.066-0.148,0.148v1.398c0,0.082,0.066,0.149,0.148,0.149C5.08,2.352,5.146,2.285,5.146,2.203z"></path>
		  <path fill="none" d="M4.85,7.796v1.396c0,0.082,0.066,0.15,0.148,0.15c0.082,0,0.148-0.068,0.148-0.15V7.796c0-0.082-0.066-0.148-0.148-0.148C4.917,7.647,4.85,7.714,4.85,7.796z"></path>
		  <path fill="none" d="M2.651,3.473L1.44,2.774C1.369,2.732,1.279,2.757,1.238,2.828C1.197,2.899,1.221,2.989,1.292,3.031l1.21,0.699c0.023,0.013,0.049,0.02,0.074,0.02c0.051,0,0.101-0.026,0.129-0.075C2.747,3.604,2.722,3.514,2.651,3.473z"></path>
		  <path fill="none" d="M8.704,6.968L7.493,6.269c-0.07-0.041-0.162-0.016-0.201,0.055c-0.041,0.07-0.018,0.162,0.053,0.203l1.211,0.699c0.023,0.012,0.049,0.02,0.074,0.02c0.051,0,0.102-0.027,0.129-0.074C8.8,7.101,8.776,7.009,8.704,6.968z"></path>
	  </g>
  </svg>

  <svg version="1.1" id="cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 10 10" xml:space="preserve">
    <path fill="none" d="M8.528,5.624H8.247c-0.085,0-0.156-0.068-0.156-0.154c0-0.694-0.563-1.257-1.257-1.257c-0.098,0-0.197,0.013-0.3,0.038C6.493,4.259,6.45,4.252,6.415,4.229C6.38,4.208,6.356,4.172,6.348,4.131C6.117,3.032,5.135,2.235,4.01,2.235c-1.252,0-2.297,0.979-2.379,2.23c-0.004,0.056-0.039,0.108-0.093,0.13C1.076,4.793,0.776,5.249,0.776,5.752c0,0.693,0.564,1.257,1.257,1.257h6.495c0.383,0,0.695-0.31,0.695-0.692S8.911,5.624,8.528,5.624z"></path>
  </svg>

  <div class="rain">
    <span class="drop"></span>
    <span class="drop"></span>
    <span class="drop"></span>
    <span class="drop"></span>
    <span class="drop"></span>
    <span class="drop"></span>
    <span class="drop"></span>
    <span class="drop"></span>
    <span class="drop"></span>
    <span class="drop"></span>
  </div>
  
  <div class="text">
    LOADING...
  </div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader */
.preloader {
  position: absolute;
  margin-left: -55px;
  margin-top: -100px;
  height: 110px;
  width: 110px;
  left: 50%;
  top: 50%;
}

svg {
  width: 110px;
  height: 110px;
}

path {
  stroke: #9ea1a4;
  stroke-width: 0.25;
  fill: #241E20;
}

#cloud {
  position: relative;
  z-index: 2;
}

#cloud path {
  fill: #efefef;
}

#sun {
  margin-left: -10px;
  margin-top: 6px;
  opacity: 0;
  width: 60px;
  height: 60px;
  position: absolute;
  left: 45px;
  top: 15px;
  z-index: 1;
  animation-name: rotate;
  animation-duration: 16000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#sun path {
  stroke-width: 0.18;
  fill: #9ea1a4;
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

/* Rain */
.rain {
  position: absolute;
  width: 70px;
  height: 70px;
  margin-top: -32px;
  margin-left: 19px;
}

.drop {
  opacity: 1;
  background: #9ea1a4;
  display: block;
  float: left;
  width: 3px;
  height: 10px;
  margin-left: 4px;
  border-radius: 0px 0px 6px 6px;
  animation-name: drop;
  animation-duration: 350ms;
  animation-iteration-count: infinite;
}

.drop:nth-child(1) {
  animation-delay: -130ms;
}

.drop:nth-child(2) {
  animation-delay: -240ms;
}

.drop:nth-child(3) {
  animation-delay: -390ms;
}

.drop:nth-child(4) {
  animation-delay: -525ms;
}

.drop:nth-child(5) {
  animation-delay: -640ms;
}

.drop:nth-child(6) {
  animation-delay: -790ms;
}

.drop:nth-child(7) {
  animation-delay: -900ms;
}

.drop:nth-child(8) {
  animation-delay: -1050ms;
}

.drop:nth-child(9) {
  animation-delay: -1130ms;
}

.drop:nth-child(10) {
  animation-delay: -1300ms;
}

@keyframes drop {
  50% {
    height: 45px;
    opacity: 0;
  }

  51% {
    opacity: 0;
  }

  100% {
    height: 1px;
    opacity: 0;
  }
}

.text {
  font-family: Helvetica, 'Helvetica Neue', sans-serif;
  letter-spacing: 1px;
  text-align: center;
  margin-left: -43px;
  font-weight: bold;
  margin-top: 20px;
  font-size: 11px;
  color: #a0a0a0;
  width: 200px;
}

</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_tall-fish-38.html
================================================
<div class="🤚">
	<div class="👉"></div>
	<div class="👉"></div>
	<div class="👉"></div>
	<div class="👉"></div>
	<div class="🌴"></div>		
	<div class="👍"></div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: animation, loader, hand */
.🤚 {
  --skin-color: #E4C560;
  --tap-speed: 0.6s;
  --tap-stagger: 0.1s;
  position: relative;
  width: 80px;
  height: 60px;
  margin-left: 80px;
}

.🤚:before {
  content: '';
  display: block;
  width: 180%;
  height: 75%;
  position: absolute;
  top: 70%;
  right: 20%;
  background-color: black;
  border-radius: 40px 10px;
  filter: blur(10px);
  opacity: 0.3;
}

.🌴 {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--skin-color);
  border-radius: 10px 40px;
}

.👍 {
  position: absolute;
  width: 120%;
  height: 38px;
  background-color: var(--skin-color);
  bottom: -18%;
  right: 1%;
  transform-origin: calc(100% - 20px) 20px;
  transform: rotate(-20deg);
  border-radius: 30px 20px 20px 10px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  border-left: 2px solid rgba(0, 0, 0, 0.1);
}

.👍:after {
  width: 20%;
  height: 60%;
  content: '';
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  bottom: -8%;
  left: 5px;
  border-radius: 60% 10% 10% 30%;
  border-right: 2px solid rgba(0, 0, 0, 0.05);
}

.👉 {
  position: absolute;
  width: 80%;
  height: 35px;
  background-color: var(--skin-color);
  bottom: 32%;
  right: 64%;
  transform-origin: 100% 20px;
  animation-duration: calc(var(--tap-speed) * 2);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform: rotate(10deg);
}

.👉:before {
  content: '';
  position: absolute;
  width: 140%;
  height: 30px;
  background-color: var(--skin-color);
  bottom: 8%;
  right: 65%;
  transform-origin: calc(100% - 20px) 20px;
  transform: rotate(-60deg);
  border-radius: 20px;
}

.👉:nth-child(1) {
  animation-delay: 0;
  filter: brightness(70%);
  animation-name: tap-upper-1;
}

.👉:nth-child(2) {
  animation-delay: var(--tap-stagger);
  filter: brightness(80%);
  animation-name: tap-upper-2;
}

.👉:nth-child(3) {
  animation-delay: calc(var(--tap-stagger) * 2);
  filter: brightness(90%);
  animation-name: tap-upper-3;
}

.👉:nth-child(4) {
  animation-delay: calc(var(--tap-stagger) * 3);
  filter: brightness(100%);
  animation-name: tap-upper-4;
}

@keyframes tap-upper-1 {
  0%, 50%, 100% {
    transform: rotate(10deg) scale(0.4);
  }

  40% {
    transform: rotate(50deg) scale(0.4);
  }
}

@keyframes tap-upper-2 {
  0%, 50%, 100% {
    transform: rotate(10deg) scale(0.6);
  }

  40% {
    transform: rotate(50deg) scale(0.6);
  }
}

@keyframes tap-upper-3 {
  0%, 50%, 100% {
    transform: rotate(10deg) scale(0.8);
  }

  40% {
    transform: rotate(50deg) scale(0.8);
  }
}

@keyframes tap-upper-4 {
  0%, 50%, 100% {
    transform: rotate(10deg) scale(1);
  }

  40% {
    transform: rotate(50deg) scale(1);
  }
}

</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_tall-snail-83.html
================================================
<div class="loader">
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader */
/* The loader */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  perspective: 1000px;
  transform-style: perserve-3d;
}

/* The dots */
.dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 200px;
  transform-style: perserve-3d;
  animation: dots 10000ms linear infinite;
}

.dots:nth-child(1) {
  animation-name: dots;
}

.dots:nth-child(2) {
  animation-name: dots2;
}

.dots:nth-child(3) {
  animation-name: dots3;
}

.dots:nth-child(4) {
  animation-name: dots4;
}

.dots:nth-child(5) {
  animation-name: dots5;
}

.dots:nth-child(6) {
  animation-name: dots6;
}

@keyframes dots {
  0% {
    transform: rotateX(30deg) rotateZ(0deg) translateZ(-50px);
  }

  50% {
    transform: rotateX(60deg) rotateZ(5760deg) translateZ(-100px);
  }

  100% {
    transform: rotateX(30deg) rotateZ(11520deg) translateZ(-50px);
  }
}

@keyframes dots2 {
  0% {
    transform: rotateX(30deg) rotateZ(0deg) translateZ(-36px);
  }

  50% {
    transform: rotateX(60deg) rotateZ(2880deg) translateZ(-72px);
  }

  100% {
    transform: rotateX(30deg) rotateZ(5760deg) translateZ(-36px);
  }
}

@keyframes dots3 {
  0% {
    transform: rotateX(30deg) rotateZ(0deg) translateZ(-24px);
  }

  50% {
    transform: rotateX(60deg) rotateZ(1440deg) translateZ(-48px);
  }

  100% {
    transform: rotateX(30deg) rotateZ(2880deg) translateZ(-24px);
  }
}

@keyframes dots4 {
  0% {
    transform: rotateX(30deg) rotateZ(0deg) translateZ(-14px);
  }

  50% {
    transform: rotateX(60deg) rotateZ(720deg) translateZ(-28px);
  }

  100% {
    transform: rotateX(30deg) rotateZ(1440deg) translateZ(-14px);
  }
}

@keyframes dots5 {
  0% {
    transform: rotateX(30deg) rotateZ(0deg) translateZ(-6px);
  }

  50% {
    transform: rotateX(60deg) rotateZ(360deg) translateZ(-12px);
  }

  100% {
    transform: rotateX(30deg) rotateZ(720deg) translateZ(-6px);
  }
}

@keyframes dots6 {
  0% {
    transform: rotateX(30deg) rotateZ(0deg) translateZ(0px);
  }

  50% {
    transform: rotateX(60deg) rotateZ(180deg) translateZ(-3px);
  }

  100% {
    transform: rotateX(30deg) rotateZ(360deg) translateZ(0px);
  }
}

/* The dot */
.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 100px;
  background-color: #1e3f57;
  transform-style: perserve-3d;
  transform: rotateZ(0) translateY(0);
}

.dots:nth-child(6) .dot {
  background-color: #1e3f57;
}

.dots:nth-child(1) .dot:nth-child(1) {
  transform: rotateZ(0) translateY(-10px);
}

.dots:nth-child(1) .dot:nth-child(2) {
  transform: rotateZ(90deg) translateY(-10px) translateZ(-140px);
}

.dots:nth-child(1) .dot:nth-child(3) {
  transform: rotateZ(180deg) translateY(-10px);
}

.dots:nth-child(1) .dot:nth-child(4) {
  transform: rotateZ(270deg) translateY(-10px) translateZ(-140px);
}

.dots:nth-child(5) .dot {
  background-color: #295068;
}

.dots:nth-child(2) .dot:nth-child(1) {
  transform: rotateZ(0) translateY(-22px);
}

.dots:nth-child(2) .dot:nth-child(2) {
  transform: rotateZ(45deg) translateY(-22px) translateZ(-120px);
}

.dots:nth-child(2) .dot:nth-child(3) {
  transform: rotateZ(90deg) translateY(-22px);
}

.dots:nth-child(2) .dot:nth-child(4) {
  transform: rotateZ(135deg) translateY(-22px) translateZ(-120px);
}

.dots:nth-child(2) .dot:nth-child(5) {
  transform: rotateZ(180deg) translateY(-22px);
}

.dots:nth-child(2) .dot:nth-child(6) {
  transform: rotateZ(225deg) translateY(-22px) translateZ(-120px);
}

.dots:nth-child(2) .dot:nth-child(7) {
  transform: rotateZ(270deg) translateY(-22px);
}

.dots:nth-child(2) .dot:nth-child(8) {
  transform: rotateZ(315deg) translateY(-22px) translateZ(-120px);
}

.dots:nth-child(4) .dot {
  background-color: #3b6a83;
}

.dots:nth-child(3) .dot:nth-child(1) {
  transform: rotateZ(0) translateY(-34px);
}

.dots:nth-child(3) .dot:nth-child(2) {
  transform: rotateZ(30deg) translateY(-34px) translateZ(-100px);
}

.dots:nth-child(3) .dot:nth-child(3) {
  transform: rotateZ(60deg) translateY(-34px);
}

.dots:nth-child(3) .dot:nth-child(4) {
  transform: rotateZ(90deg) translateY(-34px) translateZ(-100px);
}

.dots:nth-child(3) .dot:nth-child(5) {
  transform: rotateZ(120deg) translateY(-34px);
}

.dots:nth-child(3) .dot:nth-child(6) {
  transform: rotateZ(150deg) translateY(-34px) translateZ(-100px);
}

.dots:nth-child(3) .dot:nth-child(7) {
  transform: rotateZ(180deg) translateY(-34px);
}

.dots:nth-child(3) .dot:nth-child(8) {
  transform: rotateZ(210deg) translateY(-34px) translateZ(-100px);
}

.dots:nth-child(3) .dot:nth-child(9) {
  transform: rotateZ(240deg) translateY(-34px);
}

.dots:nth-child(3) .dot:nth-child(10) {
  transform: rotateZ(270deg) translateY(-34px) translateZ(-100px);
}

.dots:nth-child(3) .dot:nth-child(11) {
  transform: rotateZ(300deg) translateY(-34px);
}

.dots:nth-child(3) .dot:nth-child(12) {
  transform: rotateZ(330deg) translateY(-34px) translateZ(-100px);
}

.dots:nth-child(3) .dot {
  background-color: #4d86a0;
}

.dots:nth-child(4) .dot:nth-child(1) {
  transform: rotateZ(0) translateY(-46px);
}

.dots:nth-child(4) .dot:nth-child(2) {
  transform: rotateZ(20deg) translateY(-46px) translateZ(-80px);
}

.dots:nth-child(4) .dot:nth-child(3) {
  transform: rotateZ(40deg) translateY(-46px);
}

.dots:nth-child(4) .dot:nth-child(4) {
  transform: rotateZ(60deg) translateY(-46px) translateZ(-80px);
}

.dots:nth-child(4) .dot:nth-child(5) {
  transform: rotateZ(80deg) translateY(-46px);
}

.dots:nth-child(4) .dot:nth-child(6) {
  transform: rotateZ(100deg) translateY(-46px) translateZ(-80px);
}

.dots:nth-child(4) .dot:nth-child(7) {
  transform: rotateZ(120deg) translateY(-46px);
}

.dots:nth-child(4) .dot:nth-child(8) {
  transform: rotateZ(140deg) translateY(-46px) translateZ(-80px);
}

.dots:nth-child(4) .dot:nth-child(9) {
  transform: rotateZ(160deg) translateY(-46px);
}

.dots:nth-child(4) .dot:nth-child(10) {
  transform: rotateZ(180deg) translateY(-46px) translateZ(-80px);
}

.dots:nth-child(4) .dot:nth-child(11) {
  transform: rotateZ(200deg) translateY(-46px);
}

.dots:nth-child(4) .dot:nth-child(12) {
  transform: rotateZ(220deg) translateY(-46px) translateZ(-80px);
}

.dots:nth-child(4) .dot:nth-child(13) {
  transform: rotateZ(240deg) translateY(-46px);
}

.dots:nth-child(4) .dot:nth-child(14) {
  transform: rotateZ(260deg) translateY(-46px) translateZ(-80px);
}

.dots:nth-child(4) .dot:nth-child(15) {
  transform: rotateZ(280deg) translateY(-46px);
}

.dots:nth-child(4) .dot:nth-child(16) {
  transform: rotateZ(300deg) translateY(-46px) translateZ(-80px);
}

.dots:nth-child(4) .dot:nth-child(17) {
  transform: rotateZ(320deg) translateY(-46px);
}

.dots:nth-child(4) .dot:nth-child(18) {
  transform: rotateZ(340deg) translateY(-46px) translateZ(-80px);
}

.dots:nth-child(2) .dot {
  background-color: #5ea0ba;
}

.dots:nth-child(5) .dot:nth-child(1) {
  transform: rotateZ(0) translateY(-58px);
}

.dots:nth-child(5) .dot:nth-child(2) {
  transform: rotateZ(15deg) translateY(-58px) translateZ(-40px);
}

.dots:nth-child(5) .dot:nth-child(3) {
  transform: rotateZ(30deg) translateY(-58px);
}

.dots:nth-child(5) .dot:nth-child(4) {
  transform: rotateZ(45deg) translateY(-58px) translateZ(-40px);
}

.dots:nth-child(5) .dot:nth-child(5) {
  transform: rotateZ(60deg) translateY(-58px);
}

.dots:nth-child(5) .dot:nth-child(6) {
  transform: rotateZ(75deg) translateY(-58px) translateZ(-40px);
}

.dots:nth-child(5) .dot:nth-child(7) {
  transform: rotateZ(90deg) translateY(-58px);
}

.dots:nth-child(5) .dot:nth-child(8) {
  transform: rotateZ(105deg) translateY(-58px) translateZ(-40px);
}

.dots:nth-child(5) .dot:nth-child(9) {
  transform: rotateZ(120deg) translateY(-58px);
}

.dots:nth-child(5) .dot:nth-child(10) {
  transform: rotateZ(135deg) translateY(-58px) translateZ(-40px);
}

.dots:nth-child(5) .dot:nth-child(11) {
  transform: rotateZ(150deg) translateY(-58px);
}

.dots:nth-child(5) .dot:nth-child(12) {
  transform: rotateZ(165deg) translateY(-58px) translateZ(-40px);
}

.dots:nth-child(5) .dot:nth-child(13) {
  transform: rotateZ(180deg) translateY(-58px);
}

.dots:nth-child(5) .dot:nth-child(14) {
  transform: rotateZ(195deg) translateY(-58px) translateZ(-40px);
}

.dots:nth-child(5) .dot:nth-child(15) {
  transform: rotateZ(210deg) translateY(-58px);
}

.dots:nth-child(5) .dot:nth-child(16) {
  transform: rotateZ(225deg) translateY(-58px) translateZ(-40px);
}

.dots:nth-child(5) .dot:nth-child(17) {
  transform: rotateZ(240deg) translateY(-58px);
}

.dots:nth-child(5) .dot:nth-child(18) {
  transform: rotateZ(255deg) translateY(-58px) translateZ(-40px);
}

.dots:nth-child(5) .dot:nth-child(19) {
  transform: rotateZ(270deg) translateY(-58px);
}

.dots:nth-child(5) .dot:nth-child(20) {
  transform: rotateZ(285deg) translateY(-58px) translateZ(-40px);
}

.dots:nth-child(5) .dot:nth-child(21) {
  transform: rotateZ(300deg) translateY(-58px);
}

.dots:nth-child(5) .dot:nth-child(22) {
  transform: rotateZ(315deg) translateY(-58px) translateZ(-40px);
}

.dots:nth-child(5) .dot:nth-child(23) {
  transform: rotateZ(330deg) translateY(-58px);
}

.dots:nth-child(5) .dot:nth-child(24) {
  transform: rotateZ(345deg) translateY(-58px) translateZ(-40px);
}

.dots:nth-child(1) .dot {
  background-color: #6bb1cd;
}

.dots:nth-child(6) .dot:nth-child(1) {
  transform: rotateZ(0deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(2) {
  transform: rotateZ(10deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(3) {
  transform: rotateZ(20deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(4) {
  transform: rotateZ(30deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(5) {
  transform: rotateZ(40deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(6) {
  transform: rotateZ(50deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(7) {
  transform: rotateZ(60deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(8) {
  transform: rotateZ(70deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(9) {
  transform: rotateZ(80deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(10) {
  transform: rotateZ(90deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(11) {
  transform: rotateZ(100deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(12) {
  transform: rotateZ(110deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(13) {
  transform: rotateZ(120deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(14) {
  transform: rotateZ(130deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(15) {
  transform: rotateZ(140deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(16) {
  transform: rotateZ(150deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(17) {
  transform: rotateZ(160deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(18) {
  transform: rotateZ(170deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(19) {
  transform: rotateZ(180deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(20) {
  transform: rotateZ(190deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(21) {
  transform: rotateZ(200deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(22) {
  transform: rotateZ(210deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(23) {
  transform: rotateZ(220deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(24) {
  transform: rotateZ(230deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(25) {
  transform: rotateZ(240deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(26) {
  transform: rotateZ(250deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(27) {
  transform: rotateZ(260deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(28) {
  transform: rotateZ(270deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(29) {
  transform: rotateZ(280deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(30) {
  transform: rotateZ(290deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(31) {
  transform: rotateZ(300deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(32) {
  transform: rotateZ(310deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(33) {
  transform: rotateZ(320deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(34) {
  transform: rotateZ(330deg) translateY(-70px) translateZ(-20px);
}

.dots:nth-child(6) .dot:nth-child(35) {
  transform: rotateZ(340deg) translateY(-70px);
}

.dots:nth-child(6) .dot:nth-child(36) {
  transform: rotateZ(350deg) translateY(-70px) translateZ(-20px);
}
</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_tricky-catfish-63.html
================================================
<div class="code-loader">
  <span>{</span><span>}</span>
</div>
<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader */
.code-loader {
  color: #fff;
  font-family: Consolas, Menlo, Monaco, monospace;
  font-weight: bold;
  font-size: 100px;
  opacity: 0.8;
}

.code-loader span {
  display: inline-block;
  animation: pulse_414 0.4s alternate infinite ease-in-out;
}

.code-loader span:nth-child(odd) {
  animation-delay: 0.4s;
}

@keyframes pulse_414 {
  to {
    transform: scale(0.8);
    opacity: 0.5;
  }
}
</style>


================================================
FILE: loaders/Pradeepsaranbishnoi_witty-chipmunk-68.html
================================================
<div class="loader">
  <div class="cube">
    <div class="face1"></div>
    <div class="face2"></div>
    <div class="face3"></div>
    <div class="face4"></div>
    <div class="face5"></div>
    <div class="face6"></div>
  </div>
</div>

<style>
/* From Uiverse.io by Pradeepsaranbishnoi - Tags: loader */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.cube {
  position: relative;
  width: 50px;
  height: 50px;
  transform-style: preserve-3d;
  animation: rotate-cube 2s infinite;
}

.face1,
.face2,
.face3,
.face4,
.face5,
.face6 {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 2px solid #00BFFF;
  box-sizing: border-box;
}

.face1 {
  transform: rotateY(0deg) translateZ(25px);
  animation: change-color 2s infinite;
}

.face2 {
  transform: rotateX(90deg) translateZ(25px);
}

.face3 {
  transform: rotateY(90deg) translateZ(25px);
  animation: change-color 2s infinite;
}

.face4 {
  transform: rotateY(180deg) translateZ(25px);
  animation: change-color 2s infinite;
}

.face5 {
  transform: rotateX(-90deg) translateZ(25px);
}

.face6 {
  transform: rotateY(-90deg) translateZ(25px);
  animation: change-color 2s infinite;
}

@keyframes rotate-cube {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }

  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

@keyframes change-color {
  0% {
    background-color: #00BFFF;
  }

  25% {
    background-color: #FF1493;
  }

  50% {
    background-color: #32CD32;
  }

  75% {
    background-color: #FFA500;
  }

  100% {
    background-color: #00BFFF;
  }
}

</style>


================================================
FILE: loaders/PriyanshuGupta28_calm-earwig-94.html
================================================
<div class="spinner">
  <div></div>   
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
</div>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: loader, 3d loader */
.spinner {
  position: absolute;
  width: 9px;
  height: 9px;
}

.spinner div {
  position: absolute;
  width: 50%;
  height: 150%;
  background: #000000;
  transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
  animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
}

.spinner div:nth-child(1) {
  --delay: 0.1;
  --rotation: 36;
  --translation: 150;
}

.spinner div:nth-child(2) {
  --delay: 0.2;
  --rotation: 72;
  --translation: 150;
}

.spinner div:nth-child(3) {
  --delay: 0.3;
  --rotation: 108;
  --translation: 150;
}

.spinner div:nth-child(4) {
  --delay: 0.4;
  --rotation: 144;
  --translation: 150;
}

.spinner div:nth-child(5) {
  --delay: 0.5;
  --rotation: 180;
  --translation: 150;
}

.spinner div:nth-child(6) {
  --delay: 0.6;
  --rotation: 216;
  --translation: 150;
}

.spinner div:nth-child(7) {
  --delay: 0.7;
  --rotation: 252;
  --translation: 150;
}

.spinner div:nth-child(8) {
  --delay: 0.8;
  --rotation: 288;
  --translation: 150;
}

.spinner div:nth-child(9) {
  --delay: 0.9;
  --rotation: 324;
  --translation: 150;
}

.spinner div:nth-child(10) {
  --delay: 1;
  --rotation: 360;
  --translation: 150;
}

@keyframes spinner-fzua35 {
  0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
  }

  50% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
  }
}
</style>


================================================
FILE: loaders/PriyanshuGupta28_chilly-lion-59.html
================================================
<div class="custom-loader"></div>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: loader */
.custom-loader {
  width: 50px;
  height: 50px;
  --c: radial-gradient(farthest-side,#000000 92%,#0000);
  background: var(--c) 50%  0, 
    var(--c) 50%  100%, 
    var(--c) 100% 50%, 
    var(--c) 0    50%;
  background-size: 10px 10px;
  background-repeat: no-repeat;
  animation: s8 1s infinite;
  position: relative;
}

.custom-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: 3px;
  background: repeating-conic-gradient(#0000 0 35deg,#000000 0 90deg);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 0);
  border-radius: 50%;
}

@keyframes s8 {
 
  100% {
    transform: rotate(.5turn)
  }
}
</style>


================================================
FILE: loaders/PriyanshuGupta28_green-rat-73.html
================================================
<div class="loader-container">
    <div class="loader">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
  </div>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: loader, car loader, 3d loader */
.loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%
}

.loader {
  width: 80px;
  height: 80px;
  position: relative;
}

.loader .circle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: pulse 1.2s infinite ease-in-out;
}

.loader .circle:nth-child(1) {
  top: 0;
  left: 30px;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.loader .circle:nth-child(2) {
  top: 30px;
  left: 60px;
  background-color: #0093E9;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  animation-delay: 0.4s;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.loader .circle:nth-child(3) {
  top: 60px;
  left: 30px;
  background-color: #00DBDE;
  background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
  animation-delay: 0.8s;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.loader .circle:nth-child(4) {
  top: 30px;
  left: 0;
  background-color: #3EECAC;
  background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);
  animation-delay: 1.2s;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.2);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
  }
}
</style>


================================================
FILE: loaders/PriyanshuGupta28_little-zebra-36.html
================================================
<div class="loader">
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
    <div class="side left"></div>
    <div class="side right"></div>
  </div>

</div>
 
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: loader, 3d loader, 3d cude loader */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: spin 2s infinite linear;
}

.side {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.8;
}

.front {
  transform: translateZ(50px);
  background: linear-gradient(45deg, #ff4e50, #f9d423);
}

.back {
  transform: translateZ(-50px);
  background: linear-gradient(45deg, #40e0d0, #ff8c00);
}

.top {
  transform: rotateX(90deg) translateZ(50px);
  background: linear-gradient(45deg, #800080, #00bfff);
}

.bottom {
  transform: rotateX(90deg) translateZ(-50px);
  background: linear-gradient(45deg, #008000, #ffff00);
}

.left {
  transform: rotateY(90deg) translateZ(50px);
  background: linear-gradient(45deg, #0000ff, #ff1493);
}

.right {
  transform: rotateY(90deg) translateZ(-50px);
  background: linear-gradient(45deg, #00ffff, #ff0000);
}

@keyframes spin {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
</style>


================================================
FILE: loaders/PriyanshuGupta28_popular-cobra-49.html
================================================
<div class="spinner"></div>


<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: loader, 3d loader */
.spinner {
  width: 56px;
  height: 56px;
  display: grid;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side,#0000 40%,#6121d1 41%);
  background: linear-gradient(0deg ,rgba(97,33,209,0.5) 50%,rgba(97,33,209,1) 0) center/4.5px 100%,
        linear-gradient(90deg,rgba(97,33,209,0.25) 50%,rgba(97,33,209,0.75) 0) center/100% 4.5px;
  background-repeat: no-repeat;
  animation: spinner-d3o0rx 1s infinite steps(12);
}

.spinner::before,
.spinner::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: inherit;
  opacity: 0.915;
  transform: rotate(30deg);
}

.spinner::after {
  opacity: 0.83;
  transform: rotate(60deg);
}

@keyframes spinner-d3o0rx {
  100% {
    transform: rotate(1turn);
  }
}
</style>


================================================
FILE: loaders/PriyanshuGupta28_rare-panda-30.html
================================================
<div class="custom-loader"></div>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: loader, simple loader */
.custom-loader {
  width: 50px;
  height: 50px;
  display: grid;
}

.custom-loader::before,
.custom-loader::after {
  content: "";
  grid-area: 1/1;
  --c: radial-gradient(farthest-side,#1692f8 92%,rgba(179, 53, 53, 0));
  background: var(--c) 50%  0, 
      var(--c) 50%  100%, 
      var(--c) 100% 50%, 
      var(--c) 0    50%;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation: s2 1s infinite;
}

.custom-loader::before {
  margin: 4px;
  filter: hue-rotate(45deg);
  background-size: 8px 8px;
  animation-timing-function: linear
}

@keyframes s2 {
 
  100% {
    transform: rotate(.5turn)
  }
}
</style>


================================================
FILE: loaders/PriyanshuGupta28_strong-monkey-50.html
================================================
<div class="loader">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: loader, circle loader, cool loader, 3d loader */
.loader {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle {
  width: 20px;
  height: 20px;
  background-color: #8BC6EC;
  background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
  border-radius: 50%;
  margin-right: 1rem;
  animation: pulse 1.2s ease-in-out infinite;
}

.circle:nth-child(2) {
  animation-delay: 0.2s;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

.circle:nth-child(3) {
  animation-delay: 0.4s;
  background-color: #0093E9;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.circle:nth-child(4) {
  animation-delay: 0.6s;
  background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}

.circle:nth-child(5) {
  animation-delay: 0.8s;
  background-color: #00DBDE;
  background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.8);
    opacity: 0.7;
  }
}
</style>


================================================
FILE: loaders/PriyanshuGupta28_tricky-wolverine-48.html
================================================
 <div class="loader-container">
    <div class="loader">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face left"></div>
      <div class="face right"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
    </div>
  </div>
<style>
/* From Uiverse.io by PriyanshuGupta28 - Tags: loader, 3d loader, 3d cude loader */
.loader-container {
  perspective: 800px;
}

.loader {
  position: relative;
  width: 80px;
  height: 80px;
  transform-style: preserve-3d;
  animation: spin 3s linear infinite;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #2196F3;
  border: 2px solid #1976D2;
}

.front {
  transform: translateZ(40px);
}

.back {
  transform: rotateY(180deg) translateZ(40px);
}

.left {
  transform: rotateY(-90deg) translateZ(40px);
}

.right {
  transform: rotateY(90deg) translateZ(40px);
}

.top {
  transform: rotateX(90deg) translateZ(40px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(40px);
}

@keyframes spin {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

</style>


================================================
FILE: loaders/RafaM-dev_rude-panther-60.html
================================================
<section class="loader">
      <div>
        <div>
          <span class="one h6"></span>
          <span class="two h3"></span>
        </div>
      </div>

      <div>
        <div>
          <span class="one h1"></span>
        </div>
      </div>

      <div>
        <div>
          <span class="two h2"></span>
        </div>
      </div>
      <div>
        <div>
          <span class="one h4"></span>
        </div>
      </div>
    </section>
<style>
/* From Uiverse.io by RafaM-dev - Source: Jaydip Prajapati - https://uiverse.io/JaydipPrajapati1910/stale-pug-89 - Tags: loader, mxb, house */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Add these properties to position the loader properly */
  position: relative;
  width: 90px;
  height: 103px;
 /* Adjust the height to accommodate the "h4" span */
}

.loader div {
  position: absolute;
  width: 50px;
  height: 31px;
}

.rot {
  transform: rotate(150deg);
}

.rot2 {
  transform: rotate(20deg);
}

.loader div:nth-of-type(2) {
  transform: rotate(60deg);
}

.loader div:nth-of-type(3) {
  transform: rotate(-60deg);
}

.loader div div {
  width: 100%;
  height: 100%;
  position: relative;
}

.loader div div span {
  position: absolute;
  width: 4px;
  height: 0%;
  background: #053146;
  z-index: 999999;
}

.h1 {
  left: 0;
  animation: load1 3.2s ease infinite;
}

.h2 {
  right: 0;
  animation: load2 3.2s ease 0.4s infinite;
}

.h3 {
  right: 0;
  animation: load3 3.2s ease 0.8s infinite;
}

.h4 {
  top: 10px;
  left: 23px;
  animation: load4 3.2s ease 1s infinite;
  transform: rotate(90deg);
}

.h5 {
  bottom: 0;
  animation: load5 3.2s ease 1.2s infinite;
}

.h6 {
  left: 0;
  animation: load6 3.2s ease 1.3s infinite;
}

@keyframes load1 {
  0% {
    bottom: 0;
    height: 0;
  }

  6.944444444% {
    bottom: 0;
    height: 100%;
  }

  50% {
    top: 0;
    height: 100%;
  }

  59.944444433% {
    top: 0;
    height: 0;
  }
  /*   91.6666667%{top:0;height:0%;} */
}

@keyframes load2 {
  0% {
    top: 0;
    height: 0;
  }

  6.944444444% {
    top: 0;
    height: 100%;
  }

  50% {
    bottom: 0;
    height: 100%;
  }

  59.944444433% {
    bottom: 0;
    height: 0;
  }
  /*   91.6666667%{bottom:0;height:0%} */
}

@keyframes load3 {
  0% {
    top: 0;
    height: 0;
  }

  6.944444444% {
    top: 0;
    height: 100%;
  }

  50% {
    bottom: 0;
    height: 100%;
  }

  59.94444443% {
    bottom: 0;
    height: 0;
  }
  /*   91.6666667%{bottom:0;height:0%;} */
}

@keyframes load4 {
  0% {
    top: 37px;
    left: 23px;
    height: 134%;
  }

  6.944444444% {
    top: 10px;
    height: 134%;
  }

  50% {
    bottom: 10px;
    height: 134%;
  }

  59.94444443% {
    bottom: 0;
    height: 0;
  }
  /*   91.6666667%{bottom:0;height:0%;} */
}

@keyframes load5 {
  0% {
    bottom: 0;
    height: 0;
  }

  6.944444444% {
    bottom: 0;
    height: 100%;
  }

  50% {
    top: 0;
    height: 100%;
  }

  59.94444443% {
    top: 0;
    height: 0;
  }
  /*   91.6666667%{top:0;height:0%;} */
}

@keyframes load6 {
  0% {
    bottom: 0;
    height: 0;
  }

  6.944444444% {
    bottom: 0;
    height: 100%;
  }

  50% {
    top: 0;
    height: 100%;
  }

  59.94444443% {
    top: 0;
    height: 0;
  }
  /*   91.6666667%{top:0;height:0%;} */
}
</style>


================================================
FILE: loaders/Rajan1092_helpless-newt-19.html
================================================
<div class="spinner"></div>
<style>
/* From Uiverse.io by Rajan1092 - Tags: 3d loader, dotted loader */
.spinner {
  width: 56px;
  height: 56px;
  display: grid;
}

.spinner::before,
.spinner::after {
  content: "";
  grid-area: 1/1;
  background: var(--c) 50%  0, 
        var(--c) 50%  100%, 
        var(--c) 100% 50%, 
        var(--c) 0    50%;
  background-size: 13.4px 13.4px;
  background-repeat: no-repeat;
  animation: spinner-3hs4a3 1s infinite;
}

.spinner::before {
  --c: radial-gradient(farthest-side,#2b55a0 92%,#0000);
  margin: 4.5px;
  background-size: 9px 9px;
  animation-timing-function: linear;
}

.spinner::after {
  --c: radial-gradient(farthest-side,#2b55a0 92%,#0000);
}

@keyframes spinner-3hs4a3 {
  100% {
    transform: rotate(.5turn);
  }
}
</style>


================================================
FILE: loaders/Ratinax_hard-chipmunk-89.html
================================================

<div class="loader">
      <div class="intern">
      </div>
  <div class="external-shadow">
    <div class="central">
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Ratinax - Tags: loader, colorful, circle loader, color, multicolor */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: not-allowed;
  scale: 0.7;
}

.central {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 10em;
  height: 10em;
  border-radius: 50%;
  box-shadow: 0.5em 1em 1em red,
    -0.5em 0.5em 1em lime,
    0.5em -0.5em 1em purple,
    -0.5em -0.5em 1em yellow;
}

.external-shadow {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0.5em 0.5em 3em red,
    -0.5em 0.5em 3em lime,
    0.5em -0.5em 3em purple,
    -0.5em -0.5em 3em yellow;
  z-index: 999;
  animation: rotate 3s linear infinite;
  background-color: #212121;
}

.intern {
  position: absolute;
  color: white;
  z-index: 9999;
}

.intern::before {
  content: "100%";
  animation: percent 2s ease-in-out infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes percent {
  0% {
    content: '0%';
  }

  25% {
    content: '25%';
  }

  33% {
    content: '33%';
  }

  42% {
    content: '42%';
  }

  51% {
    content: '51%';
  }

  67% {
    content: '67%';
  }

  74% {
    content: '74%';
  }

  75% {
    content: '75%';
  }

  86% {
    content: '86%';
  }

  95% {
    content: '95%';
  }

  98% {
    content: '98%';
  }

  99% {
    content: '99%';
  }
}
</style>


================================================
FILE: loaders/Ratinax_wonderful-dingo-30.html
================================================
<div class="sun">
  <div class="center"></div>
  <div class="ray r-1"></div>
  <div class="ray r-2"></div>
  <div class="ray r-3"></div>
  <div class="ray r-4"></div>
  <div class="ray r-5"></div>
  <div class="ray r-6"></div>
  <div class="ray r-7"></div>
  <div class="ray r-8"></div>
</div>
<style>
/* From Uiverse.io by Ratinax - Tags: loader, sun, rotate */
.sun {
  position: relative;
  animation: rotate 4s linear infinite;
  --color: yellow;
  --scale: 0.4;
}

.center {
  height: calc(var(--scale) * 10em);
  width: calc(var(--scale) * 10em);
  transition: background-color 2s linear, box-shadow 2s linear;
  background-color: var(--color);
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--scale) * 3em) var(--color);
}

.ray {
  position: absolute;
  height: calc(var(--scale) * 3em);
  width: calc(var(--scale) * 0.5em);
  transition: background-color 2s ease-in-out, box-shadow 2s ease-in-out;
  box-shadow: 0 0 calc(var(--scale) * 1em) var(--color);
  background-color: var(--color);
}

.r-1 {
  margin-left: calc(var(--scale) * 4.75em);
  margin-top: calc(var(--scale) * 1em);
}

.r-2 {
  margin-left: calc(var(--scale) * 12.25em);
  margin-top: calc(var(--scale) * -6.25em);
  transform: rotate(90deg);
}

.r-3 {
  margin-left: calc(var(--scale) * 4.75em);
  margin-top: calc(var(--scale) * -14em);
}

.r-4 {
  margin-left: calc(var(--scale) * -2.75em);
  margin-top: calc(var(--scale) * -6.25em);
  transform: rotate(90deg);
}

.r-5 {
  margin-left: calc(var(--scale) * -0.5em);
  margin-top: calc(var(--scale) * -1em);
  transform: rotate(45deg);
}

.r-6 {
  margin-left: calc(var(--scale) * 9.75em);
  margin-top: calc(var(--scale) * -1em);
  transform: rotate(-45deg);
}

.r-7 {
  margin-left: calc(var(--scale) * 10.25em);
  margin-top: calc(var(--scale) * -11.75em);
  transform: rotate(45deg);
}

.r-8 {
  margin-left: calc(var(--scale) * -0.5em);
  margin-top: calc(var(--scale) * -11.75em);
  transform: rotate(-45deg);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
    --color: yellow;
  }

  100% {
    transform: rotate(360deg);
    --color: orange;
  }
}
</style>


================================================
FILE: loaders/Rkyz_strange-wombat-76.html
================================================
<div class="loader">
 <div class="dot-one"></div> 
 <div class="dot-two">-  -</div> 
 <div class="dot-three"></div> 
</div>
<style>
/* From Uiverse.io by Rkyz - Tags: animation, loader, animal */
.loader {
  height: 50px;
  width: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.dot-two {
  background-color: black;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  padding: 4px;
  color: white;
}

.dot-one,
.dot-three {
  background-color: black;
  height: 30px;
  width: 20px;
  border-radius: 50%;
  text-align: center;
  animation: flap-wings 1s infinite ease-in-out;
}

.dot-two {
  position: relative;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: black;
  animation: flap-wings 1s infinite ease-in-out;
  animation-delay: 0.1s;
}

.dot-two::before,
.dot-two::after {
  content: "";
  position: absolute;
  background-color: black;
}

.dot-two::before {
  height: 20px;
  width: 10px;
  bottom: 20px;
  left: 1px;
  border-radius: 50% 50% 0 0;
  transform: rotate(-20deg);
}

.dot-two::after {
  height: 20px;
  width: 10px;
  bottom: 20px;
  left: 19px;
  transform: rotate(20deg);
  border-radius: 50% 50% 0 0;
}

.dot-one::before,
.dot-one::after,
.dot-three::before,
.dot-three::after {
  content: "";
  position: absolute;
  background-color: white;
}

.dot-one::before,
.dot-three::before {
  height: 30px;
  width: 20px;
  top: 10px;
  left: 0;
  background-color: #e8e8e8;
 /*chnage this if u need dark mode to #212121 if need light mode #e8e8e8*/
  border-radius: 50% 50% 0 0;
}

@keyframes flap-wings {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}
</style>


================================================
FILE: loaders/Rodrypaladin_evil-goat-39.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Rodrypaladin - Tags: animation, red, loading, loader, modern, creative, multicolor, bounce animation */
.loader {
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 50%;
  box-shadow: -15px -15px 15px #ff6600, 15px -15px 15px #ff9100, 15px 15px 15px #ff5500, -15px 15px 15px #ffa600, -15px 0 15px #ff6600, 15px 0 15px #ffcc00;
  animation: rotate 1s infinite;
  transform: rotate(0) scale(0.8);
}

@keyframes rotate {
  0% {
    transform: rotate(360deg) scale(0.8);
  }

  50% {
    transform: rotate(0) scale(1.2);
  }
}
</style>


================================================
FILE: loaders/Rodrypaladin_lazy-starfish-57.html
================================================
<div class="loader">
  <div class="loader-circle"></div>
  <div class="loader-circle"></div>
  <div class="loader-circle"></div>
</div>
<style>
/* From Uiverse.io by Rodrypaladin - Tags: animation, loader, animated, colorful, color, multicolor */
.loader {
  width: 70px;
  height: 190px;
  background-image: linear-gradient(to right bottom, #000000, #141414, #202020, #2d2d2d, #3a3a3a);
  border: 5px solid black;
  border-radius: 18px;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}

.loader:after {
  content: "";
  position: absolute;
  top: 100%;
  right: 50%;
  transform: translate(50%, -50%);
  width: 10px;
  height: 200px;
  background-color: rgb(20, 20, 20);
  z-index: -1000;
  border: 5px solid black;
}

.loader-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
}

.loader-circle::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  height: 80%;
  width: 80%;
  background-image: linear-gradient(
  to right bottom,
  rgba(255, 255, 255, 0.05),
  rgba(255, 255, 255, 0.1),
  rgba(255, 255, 255, 0.2),
  rgba(255, 255, 255, 0.3),
  rgba(255, 255, 255, 0.4),
  rgba(255, 255, 255, 0.5)
  );
  border-radius: 50%;
}

.loader-circle:nth-child(1) {
  background-color: red;
  animation: changeGrayscale 1s linear infinite;
  animation-delay: 0.15s;
}

.loader-circle:nth-child(2) {
  background-color: rgb(255, 200, 0);
  animation: changeGrayscale 1s linear infinite;
  animation-delay: 0.3s;
}

.loader-circle:nth-child(3) {
  background-color: rgb(36, 182, 0);
  animation: changeGrayscale 1s linear infinite;
  animation-delay: 0.45s;
}

@keyframes changeGrayscale {
  0%, 100% {
    filter: brightness(0);
 /* En grayscale al principio y al final */
  }

  50% {
    filter: grayscale(0);
 /* Sin grayscale en la mitad de la animación */
  }
}


</style>


================================================
FILE: loaders/RoninLJY_angry-jellyfish-76.html
================================================
<div class="loader">
  <span class="item"></span>
  <span class="item"></span>
  <span class="item"></span>
  <span class="item"></span>
</div>
<style>
/* From Uiverse.io by RoninLJY - Tags: loader, css, easy to use */
.loader {
  width: 85px;
  height: 85px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  animation: loading-rotate 3s linear infinite;
}

.item {
  width: 40px;
  height: 40px;
  display: block;
  box-sizing: border-box;
}

.item:nth-of-type(1) {
  background-color: #50DE68;
  border-radius: 20px 20px 0 20px;
  border-left: #ffffff 4px solid;
  border-top: #f7f7f7 4px solid;
}

.item:nth-of-type(2) {
  background-color: rgb(32, 80, 46);
  border-radius: 20px 20px 20px 0;
  border-right: #ffffff 4px solid;
  border-top: #f7f7f7 4px solid;
}

.item:nth-of-type(3) {
  background-color: rgb(0, 255, 55);
  border-radius: 20px 0 20px 20px;
  border-left: #ffffff 4px solid;
  border-bottom: #f7f7f7 4px solid;
}

.item:nth-of-type(4) {
  background-color: rgb(32, 182, 32);
  border-radius: 0 20px 20px 20px;
  border-right: #ffffff 4px solid;
  border-bottom: #f7f7f7 4px solid;
}

@keyframes loading-rotate {
  0% {
    transform: scale(1) rotate(0);
  }

  20% {
    transform: scale(1) rotate(72deg);
  }

  40% {
    transform: scale(0.5) rotate(144deg);
  }

  60% {
    transform: scale(0.5) rotate(216deg);
  }

  80% {
    transform: scale(1) rotate(288deg);
  }

  100% {
    transform: scale(1) rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/S4tyendra_fast-frog-87.html
================================================
<div class="container">
  <div class="preloader">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="shadow"></div>
</div>

<style>
/* From Uiverse.io by S4tyendra - Tags: loader, fly, ball, animated, love */
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container .preloader {
  animation: rotate 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}

@keyframes rotate {
  50% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(720deg);
  }
}

.preloader span {
  --c: #f23f3f;
  position: absolute;
  display: block;
  height: 64px;
  width: 64px;
  background: var(--c);
  border: 1px solid var(--c);
  border-radius: 100%;
}

.preloader span:nth-child(1) {
  transform: translate(-28px, -28px);
  animation: shape_1 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}

@keyframes shape_1 {
  60% {
    transform: scale(0.4);
  }
}

.preloader span:nth-child(2) {
  transform: translate(28px, -28px);
  animation: shape_2 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}

@keyframes shape_2 {
  40% {
    transform: scale(0.4);
  }
}

.preloader span:nth-child(3) {
  position: relative;
  border-radius: 0px;
  transform: scale(0.98) rotate(-45deg);
  animation: shape_3 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}

@keyframes shape_3 {
  50% {
    border-radius: 100%;
    transform: scale(0.5) rotate(-45deg);
  }

  100% {
    transform: scale(0.98) rotate(-45deg);
  }
}

.shadow {
  position: relative;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  height: 16px;
  width: 64px;
  border-radius: 50%;
  background-color: #d9d9d9;
  border: 1px solid #d9d9d9;
  animation: shadow 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}

@keyframes shadow {
  50% {
    transform: translateX(-50%) scale(0.5);
    border-color: #f2f2f2;
  }
}

</style>


================================================
FILE: loaders/SHABANA7422_honest-dodo-28.html
================================================
<div class="container">
  <div class="half"></div>
  <div class="half"></div>
</div>

<style>
/* From Uiverse.io by SHABANA7422  - Tags: loader */
.container {
  --uib-size: 45px;
  --uib-color: black;
  --uib-speed: 1.75s;
  --uib-bg-opacity: 0.1;
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--uib-size);
  width: var(--uib-size);
  transform: rotate(45deg);
  animation: rotate calc(var(--uib-speed) * 2) ease-in-out infinite;
}

.half {
  --uib-half-size: calc(var(--uib-size) * 0.435);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--uib-half-size);
  height: var(--uib-half-size);
  overflow: hidden;
  isolation: isolate;

  &:first-child {
    top: 8.25%;
    left: 8.25%;
    border-radius: 50% 50% calc(var(--uib-size) / 15);
  }

  &:last-child {
    bottom: 8.25%;
    right: 8.25%;
    transform: rotate(180deg);
    align-self: flex-end;
    border-radius: 50% 50% calc(var(--uib-size) / 15);

    &::after {
      animation-delay: calc(var(--uib-speed) * -1);
    }
  }

  &::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--uib-color);
    opacity: var(--uib-bg-opacity);
    transition: background-color 0.3s ease;
  }

  &::after {
    content: "";
    position: relative;
    z-index: 1;
    display: block;
    background-color: var(--uib-color);
    height: 100%;
    transform: rotate(45deg) translate(-3%, 50%) scaleX(1.2);
    width: 100%;
    transform-origin: bottom right;
    border-radius: 0 0 calc(var(--uib-size) / 20) 0;
    animation: flow calc(var(--uib-speed) * 2) linear infinite both;
    transition: background-color 0.3s ease;
  }
}

@keyframes flow {
  0% {
    transform: rotate(45deg) translate(-3%, 50%) scaleX(1.2);
  }
  30% {
    transform: rotate(45deg) translate(115%, 50%) scaleX(1.2);
  }

  30.001%,
  50% {
    transform: rotate(0deg) translate(-85%, -85%) scaleX(1);
  }

  80%,
  100% {
    transform: rotate(0deg) translate(0%, 0%) scaleX(1);
  }
}

@keyframes rotate {
  0%,
  30% {
    transform: rotate(45deg);
  }

  50%,
  80% {
    transform: rotate(225deg);
  }

  100% {
    transform: rotate(405deg);
  }
}

</style>
    

================================================
FILE: loaders/Saiyed-Tanvir_blue-tiger-12.html
================================================
<div class="box"></div>
<style>
/* From Uiverse.io by Saiyed-Tanvir - Tags: loader, box, blocky, box-shadow */
.box {
  height: 5cm;
  width: 5cm;
  border: 5px solid #ffa600;
  box-shadow: inset 0 0 0 #ffa600;
  animation: load 2s ease-in-out infinite;
}

@keyframes load {
  0% {
    box-shadow: inset -2.5cm -2.5cm 0 #ffa600;
  }

  25% {
    box-shadow: inset 2.5cm -2.5cm 0 #ffa600;
  }

  50% {
    box-shadow: inset 2.5cm 2.5cm 0 #ffa600;
  }

  75% {
    box-shadow: inset -2.5cm 2.5cm 0 #ffa600;
  }

  100% {
    box-shadow: inset -2.5cm -2.5cm 0 #ffa600;
  }
}
</style>


================================================
FILE: loaders/Saiyed-Tanvir_terrible-bird-13.html
================================================
<div class="loader">
    <div class="quater i"></div>
    <div class="quater ii"></div>
</div>
<style>
/* From Uiverse.io by Saiyed-Tanvir - Tags: loader, animated, circle loader, circular */
.quater {
  height: 1.5cm;
  width: 1.5cm;
  background-color: skyblue;
  float: left;
  position: relative;
  bottom: 1.25cm;
}

.i {
  border-top-left-radius: 100%;
  animation: spin1 2s ease-in-out infinite;
  transform-origin: 1.5cm 1.5cm;
}

.ii {
  border-top-right-radius: 100%;
  animation: spin2 2s ease-in-out infinite;
  transform-origin: 0 1.5cm;
}

@keyframes spin1 {
  0% {
    transform: rotateZ(0deg);
  }

  25% {
    transform: rotateZ(0deg);
  }

  50% {
    transform: rotateZ(180deg);
  }

  75% {
    transform: rotateZ(180deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes spin2 {
  0% {
    transform: rotateZ(0deg);
  }

  25% {
    transform: rotateZ(180deg);
  }

  50% {
    transform: rotateZ(180deg);
  }

  75% {
    transform: rotateZ(360deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}
</style>


================================================
FILE: loaders/Salem795_fluffy-cat-65.html
================================================
<div class="loader">
  <div class="truckWrapper">
    <div class="truckBody">
      <svg
        class="trucksvg"
        viewBox="0 0 198 93"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M135 22.5H177.264C178.295 22.5 179.22 23.133 179.594 24.0939L192.33 56.8443C192.442 57.1332 192.5 57.4404 192.5 57.7504V89C192.5 90.3807 191.381 91.5 190 91.5H135C133.619 91.5 132.5 90.3807 132.5 89V25C132.5 23.6193 133.619 22.5 135 22.5Z"
          fill="#F83D3D"
          stroke="#282828"
          stroke-width="3"
        ></path>
        <path
          d="M146 33.5H181.741C182.779 33.5 183.709 34.1415 184.078 35.112L190.538 52.112C191.16 53.748 189.951 55.5 188.201 55.5H146C144.619 55.5 143.5 54.3807 143.5 53V36C143.5 34.6193 144.619 33.5 146 33.5Z"
          fill="#7D7C7C"
          stroke="#282828"
          stroke-width="3"
        ></path>
        <path
          d="M150 65C150 65.39 149.763 65.8656 149.127 66.2893C148.499 66.7083 147.573 67 146.5 67C145.427 67 144.501 66.7083 143.873 66.2893C143.237 65.8656 143 65.39 143 65C143 64.61 143.237 64.1344 143.873 63.7107C144.501 63.2917 145.427 63 146.5 63C147.573 63 148.499 63.2917 149.127 63.7107C149.763 64.1344 150 64.61 150 65Z"
          fill="#282828"
          stroke="#282828"
          stroke-width="2"
        ></path>
        <rect
          x="187"
          y="63"
          width="5"
          height="7"
          rx="1"
          fill="#FFFCAB"
          stroke="#282828"
          stroke-width="2"
        ></rect>
        <rect
          x="193"
          y="81"
          width="4"
          height="11"
          rx="1"
          fill="#282828"
          stroke="#282828"
          stroke-width="2"
        ></rect>
        <rect
          x="6.5"
          y="1.5"
          width="121"
          height="90"
          rx="2.5"
          fill="#DFDFDF"
          stroke="#282828"
          stroke-width="3"
        ></rect>
        <rect
          x="1"
          y="84"
          width="6"
          height="4"
          rx="2"
          fill="#DFDFDF"
          stroke="#282828"
          stroke-width="2"
        ></rect>
      </svg>
    </div>
    <div class="truckTires">
      <svg
        class="tiresvg"
        viewBox="0 0 30 30"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="15"
          cy="15"
          r="13.5"
          fill="#282828"
          stroke="#282828"
          stroke-width="3"
        ></circle>
        <circle cx="15" cy="15" r="7" fill="#DFDFDF"></circle>
      </svg>
      <svg
        class="tiresvg"
        viewBox="0 0 30 30"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="15"
          cy="15"
          r="13.5"
          fill="#282828"
          stroke="#282828"
          stroke-width="3"
        ></circle>
        <circle cx="15" cy="15" r="7" fill="#DFDFDF"></circle>
      </svg>
    </div>
    <div class="road"></div>

    <svg
      class="lampPost"
      fill="#000000"
      version="1.1"
      id="Capa_1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 453.459 453.459"
      xml:space="preserve"
    >
      <path
        d="M252.882,0c-37.781,0-68.686,29.953-70.245,67.358h-6.917v8.954c-26.109,2.163-45.463,10.011-45.463,19.366h9.993
c-1.65,5.146-2.507,10.54-2.507,16.017c0,28.956,23.558,52.514,52.514,52.514c28.956,0,52.514-23.558,52.514-52.514
c0-5.478-0.856-10.872-2.506-16.017h9.992c0-9.354-19.352-17.204-45.463-19.366v-8.954h-6.149C200.189,38.779,223.924,16,252.882,16
c29.952,0,54.32,24.368,54.32,54.32c0,28.774-11.078,37.009-25.105,47.437c-17.444,12.968-37.216,27.667-37.216,78.884v113.914
h-0.797c-5.068,0-9.174,4.108-9.174,9.177c0,2.844,1.293,5.383,3.321,7.066c-3.432,27.933-26.851,95.744-8.226,115.459v11.202h45.75
v-11.202c18.625-19.715-4.794-87.527-8.227-115.459c2.029-1.683,3.322-4.223,3.322-7.066c0-5.068-4.107-9.177-9.176-9.177h-0.795
V196.641c0-43.174,14.942-54.283,30.762-66.043c14.793-10.997,31.559-23.461,31.559-60.277C323.202,31.545,291.656,0,252.882,0z
M232.77,111.694c0,23.442-19.071,42.514-42.514,42.514c-23.442,0-42.514-19.072-42.514-42.514c0-5.531,1.078-10.957,3.141-16.017
h78.747C231.693,100.736,232.77,106.162,232.77,111.694z"
      ></path>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by Salem795  - Tags: 3d, loader, modern */
.loader {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

.truckWrapper {
  width: 200px;
  height: 100px;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: flex-end;
  overflow-x: hidden;
}
/* truck upper body */
.truckBody {
  width: 130px;
  height: fit-content;
  margin-bottom: 6px;
  animation: motion 1s linear infinite;
}
/* truck suspension animation*/
@keyframes motion {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(0px);
  }
}
/* truck's tires */
.truckTires {
  width: 130px;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px 0px 15px;
  position: absolute;
  bottom: 0;
}
.truckTires svg {
  width: 24px;
}

.road {
  width: 100%;
  height: 1.5px;
  background-color: #282828;
  position: relative;
  bottom: 0;
  align-self: flex-end;
  border-radius: 3px;
}
.road::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 100%;
  background-color: #282828;
  right: -50%;
  border-radius: 3px;
  animation: roadAnimation 1.4s linear infinite;
  border-left: 10px solid white;
}
.road::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 100%;
  background-color: #282828;
  right: -65%;
  border-radius: 3px;
  animation: roadAnimation 1.4s linear infinite;
  border-left: 4px solid white;
}

.lampPost {
  position: absolute;
  bottom: 0;
  right: -90%;
  height: 90px;
  animation: roadAnimation 1.4s linear infinite;
}

@keyframes roadAnimation {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-350px);
  }
}

</style>
    

================================================
FILE: loaders/SalladShooter_mean-fireant-26.html
================================================
<div class="loader">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

<style>
/* From Uiverse.io by SalladShooter  - Tags: loader */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.circle {
  background: rgba(50, 120, 180, 1);
  width: 15px;
  height: 15px;
  position: absolute;
  border-radius: 50%;
  animation: figureEight 1.5s linear infinite;
}

.circle:nth-child(2) {
  animation-delay: 0.1s;
  width: 12px;
  height: 12px;
  background: rgba(50, 120, 180, 0.5);
}

.circle:nth-child(3) {
  animation-delay: 0.2s;
  width: 10px;
  height: 10px;
  background: rgba(50, 120, 180, 0.35);
}

.circle:nth-child(4) {
  animation-delay: 0.3s;
  width: 10px;
  height: 10px;
  background: rgba(50, 120, 180, 0.15);
}

.circle:nth-child(5) {
  animation-delay: 0.4s;
  width: 10px;
  height: 10px;
  background: rgba(50, 120, 180, 0.15);
}

.circle:nth-child(6) {
  animation-delay: 0.5s;
  width: 10px;
  height: 10px;
  background: rgba(50, 120, 180, 0.15);
}

.circle:nth-child(7) {
  animation-delay: 0.6s;
  width: 10px;
  height: 10px;
  background: rgba(50, 120, 180, 0.15);
}

.circle:nth-child(8) {
  animation-delay: 0.7s;
  width: 10px;
  height: 10px;
  background: rgba(50, 120, 180, 0.15);
}

@keyframes figureEight {
  0%,
  100% {
    transform: translate(0, 0);
  }
  12.5% {
    transform: translate(50px, -25px);
  }
  25% {
    transform: translate(100px, 0);
  }
  37.5% {
    transform: translate(50px, 25px);
  }
  50% {
    transform: translate(0, 0);
  }
  62.5% {
    transform: translate(-50px, -25px);
  }
  75% {
    transform: translate(-100px, 0);
  }
  87.5% {
    transform: translate(-50px, 25px);
  }
}

</style>
    

================================================
FILE: loaders/SanthoshSJ-Dev_big-parrot-60.html
================================================
<div class="bg">
  <div class="loader"></div>
</div>
<style>
/* From Uiverse.io by SanthoshSJ-Dev - Tags: loader, spinner, gears, small, two */
.bg {
  padding: 20px;
  border-radius: 10px;
  background-color: var(--base-color);
  --base-color: #212121;
 /*use your base color*/
}

.loader {
  width: 60px;
  height: 40px;
  position: relative;
  display: inline-block;
  background-color: var(--base-color);
}

.loader::before {
  content: '';
  left: 0;
  top: 0;
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #FFF;
  background-image: radial-gradient(circle 8px at 18px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, var(--base-color) 100%, transparent 0);
  background-repeat: no-repeat;
  box-sizing: border-box;
  animation: rotationBack 3s linear infinite;
}

.loader::after {
  content: '';
  left: 35px;
  top: 15px;
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #FFF;
  background-image: radial-gradient(circle 5px at 12px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, var(--base-color) 100%, transparent 0);
  background-repeat: no-repeat;
  box-sizing: border-box;
  animation: rotationBack 4s linear infinite reverse;
}

@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}  
</style>


================================================
FILE: loaders/SanthoshSJ-Dev_slippery-eel-89.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by SanthoshSJ-Dev - Tags: loader, big, battery, mobile, charger */
.loader {
  position: relative;
  width: 92px;
  height: 180px;
  border-radius: 8px;
  transform: translateY(-30px);
  background-color: #000;
  background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),
    linear-gradient(#111, #111);
  background-repeat: no-repeat;
  background-size: 10px 10px , 84px 162px;
  background-position: center 2px, 4px 8px;
  animation: lightUp 6s linear infinite alternate;
}

.loader:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 190px;
  transform: translateX(-50%);
  width: 32px;
  height: 75px;
  background-image: linear-gradient(#fff, #fff),
  linear-gradient(#bbb, #bbb),
  linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: center 4px , center top, center 5px;
  background-size: 11px 11px , 7px 4px ,  2px 100%;
  animation: plugin 6s linear infinite alternate;
}

.loader:after {
  content: '';
  width: 30px;
  height: 60px;
  background-image: linear-gradient(#888, #888),
  linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.1) 100%),
  linear-gradient(#15ff00, #15ff00),
  linear-gradient(#888, #888);
  background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;
  background-position: center 0 , center 6px , center bottom , center 4px;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50% , -50%);
  animation: charging 6s linear infinite alternate;
}

@keyframes charging {
  0%  , 25% {
    opacity: 0;
    background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;
  }

  26% ,  75% {
    opacity: 1;
    background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;
  }

  50% , 100% {
    opacity: 1;
    background-size: 12px 4px, 30px 52px , 30px 56px , 30px 56px
  }
}

@keyframes lightUp {
  0%  , 25% {
    background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),
      linear-gradient(#111, #111);
  }

  26% , 100% {
    background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),
      linear-gradient(#DDD, #DDD);
  }
}

@keyframes plugin {
  0% , 25% {
    top: 190px;
    background-position: center 4px , center top, center 5px;
  }

  26%  , 100% {
    background-position: center 0 , center top, center 5px;
    top: 180px;
  }
}
  
</style>


================================================
FILE: loaders/Satwinder04_afraid-treefrog-79.html
================================================
<div class="loader">
  <div class="loader-text">Loading...</div>
  <div class="loader-bar"></div>
</div>

<style>
/* From Uiverse.io by Satwinder04 - Tags: loader */
.loader {
  /* background-color: blue; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.loader-text {
  font-size: 24px;
  color: rgb(0, 0, 0);
  margin-bottom: 20px;
  align-self: center;
}

.loader-bar {
  width: 30%;
  height: 10px;
  border-radius: 5px;
  background-color: rgb(0, 0, 0);
  animation: loader-bar-animation 2s ease-in-out infinite;
}

@keyframes loader-bar-animation {
  0% {
    /* transform: translateX(-100%) rotate(270deg); */
    transform: translateX(-100%);
  }

  50% {
    /* transform: translateX(100%) rotate(-90deg); */
    transform: translateX(100%);
  }

  100% {
    /* transform: translateX(-100%) rotate(270deg); */
    transform: translateX(-100%);
  }
}
</style>


================================================
FILE: loaders/Satwinder04_cowardly-wasp-94.html
================================================
<div class="loader-container">
  <div class="loader">
    <div class="loader-inner"></div>
    <div class="loader-inner"></div>
    <div class="loader-inner"></div>
    <div class="loader-inner"></div>
    <div class="loader-inner"></div>
    <div class="loader-inner"></div>
    <div class="loader-inner"></div>
    <div class="loader-inner"></div>
  </div>
</div>

<style>
/* From Uiverse.io by Satwinder04 - Tags: loader */
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transform: rotate(45deg);
}

.loader-inner {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #db3434;
  animation: loader_05101 1.2s linear infinite;
}

.loader-inner:nth-child(1) {
  top: 0;
  left: 0;
  animation-delay: 0s;
}

.loader-inner:nth-child(2) {
  top: 0;
  left: 1.5rem;
  animation-delay: 0.1s;
}

.loader-inner:nth-child(3) {
  top: 0;
  left: 3rem;
  animation-delay: 0.2s;
}

.loader-inner:nth-child(4) {
  top: 1.5rem;
  left: 0;
  animation-delay: 0.3s;
}

.loader-inner:nth-child(5) {
  top: 1.5rem;
  left: 1.5rem;
  animation-delay: 0.4s;
}

.loader-inner:nth-child(6) {
  top: 1.5rem;
  left: 3rem;
  animation-delay: 0.5s;
}

.loader-inner:nth-child(7) {
  top: 3rem;
  left: 0;
  animation-delay: 0.6s;
}

.loader-inner:nth-child(8) {
  top: 3rem;
  left: 1.5rem;
  animation-delay: 0.7s;
}

.loader-inner:nth-child(9) {
  top: 3rem;
  left: 3rem;
  animation-delay: 0.8s;
}

@keyframes loader_05101 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

</style>


================================================
FILE: loaders/Satwinder04_new-mayfly-72.html
================================================
<div class="loader3">
  <div class="circle1"></div>
  <div class="circle1"></div>
  <div class="circle1"></div>
  <div class="circle1"></div>
  <div class="circle1"></div>
</div>

<style>
/* From Uiverse.io by Satwinder04 - Tags: loader */
.loader3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle1 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 10px;
  background-color: #333;
  animation: circle1 1s ease-in-out infinite;
}

.circle1:nth-child(2) {
  animation-delay: 0.2s;
}

.circle1:nth-child(3) {
  animation-delay: 0.4s;
}

.circle1:nth-child(4) {
  animation-delay: 0.6s;
}

.circle1:nth-child(5) {
  animation-delay: 0.8s;
}

@keyframes circle1 {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

</style>


================================================
FILE: loaders/Satwinder04_swift-donkey-38.html
================================================
<div class="loader3">
  <div class="bars bar1"></div>
  <div class="bars bar2"></div>
  <div class="bars bar3"></div>
  <div class="bars bar4"></div>
  <div class="bars bar5"></div>
  <div class="bars bar6"></div>
  <div class="bars bar7"></div>
  <div class="bars bar8"></div>
  <div class="bars bar9"></div>
  <div class="bars bar10"></div>
</div>

<style>
/* From Uiverse.io by Satwinder04 - Tags: loader */
.loader3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bars {
  width: 10px;
  height: 20px;
  margin: 0 2px;
  border-radius: 4px;
  animation: loader3 3s ease-in-out infinite;
}

.bar1 {
  background-color: #4285F4;
  animation-delay: -0.8s;
}

.bar2 {
  background-color: #4285F4;
  animation-delay: -0.7s;
}

.bar3 {
  background-color: #4285F4;
  animation-delay: -0.6s;
}

.bar4 {
  background-color: #4285F4;
  animation-delay: -0.5s;
}

.bar5 {
  background-color: #4285F4;
  animation-delay: -0.4s;
}

.bar6 {
  background-color: #4285F4;
  animation-delay: -0.3s;
}

.bar7 {
  background-color: #4285F4;
  animation-delay: -0.2s;
}

.bar8 {
  background-color: #4285F4;
  animation-delay: -0.1s;
}

.bar9 {
  background-color: #4285F4;
  animation-delay: 0s;
}

.bar10 {
  background-color: #4285F4;
  animation-delay: 0.1s;
}

@keyframes loader3 {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(1, 2.32);
  }

  40% {
    transform: scale(1);
  }
}
</style>


================================================
FILE: loaders/Satwinder04_witty-starfish-81.html
================================================
 <div class="loader">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
                <div class="bar4"></div>
                <div class="bar5"></div>
                <div class="bar6"></div>
                <div class="bar7"></div>
                <div class="bar8"></div>
                <div class="bar9"></div>
            </div>
<style>
/* From Uiverse.io by Satwinder04 - Tags: loader */
.loader {
  position: relative;
  width: 164px;
  height: 100px;
  margin: 50px auto;
}

.loader div {
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: #ff6a00;
  border-radius: 5px;
  animation: loader_51899 1.5s ease-in-out infinite;
}

.loader .bar1 {
  left: 0px;
  animation-delay: 0s;
}

.loader .bar2 {
  left: 20px;
  animation-delay: 0.15s;
}

.loader .bar3 {
  left: 40px;
  animation-delay: 0.3s;
}

.loader .bar4 {
  left: 60px;
  animation-delay: 0.45s;
}

.loader .bar5 {
  left: 80px;
  animation-delay: 0.6s;
}

.loader .bar6 {
  left: 100px;
  animation-delay: 0.75s;
}

.loader .bar7 {
  left: 120px;
  animation-delay: 0.9s;
}

.loader .bar8 {
  left: 140px;
  animation-delay: 1.05s;
}

.loader .bar9 {
  left: 160px;
  animation-delay: 1.2s;
}

@keyframes loader_51899 {
  0% {
    height: 30px;
    transform: translate(0, 0);
  }

  50% {
    height: 70px;
    transform: translate(0, 35px);
  }

  100% {
    height: 30px;
    transform: translate(0, 0);
  }
}
</style>


================================================
FILE: loaders/SchawnnahJ_tough-baboon-87.html
================================================

<div class="loader"></div>
<style>
/* From Uiverse.io by SchawnnahJ - Tags: loader */
.loader {
 position: relative;
 width: 2.5em;
 height: 2.5em;
 transform: rotate(165deg);
}

.loader:before, .loader:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 display: block;
 width: 0.5em;
 height: 0.5em;
 border-radius: 0.25em;
 transform: translate(-50%, -50%);
}

.loader:before {
 animation: before8 2s infinite;
}

.loader:after {
 animation: after6 2s infinite;
}

@keyframes before8 {
 0% {
  width: 0.5em;
  box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }

 35% {
  width: 2.5em;
  box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
 }

 70% {
  width: 0.5em;
  box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
 }

 100% {
  box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }
}

@keyframes after6 {
 0% {
  height: 0.5em;
  box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }

 35% {
  height: 2.5em;
  box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
 }

 70% {
  height: 0.5em;
  box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
 }

 100% {
  box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }
}

.loader {
 position: absolute;
 top: calc(50% - 1.25em);
 left: calc(50% - 1.25em);
}
</style>


================================================
FILE: loaders/SelfMadeSystem_black-yak-68.html
================================================
<div style="--size: 64px; --dot-size: 6px; --dot-count: 6; --color: #fff; --speed: 1s; --spread: 60deg;" class="dots">
  <div style="--i: 0;" class="dot"></div>
  <div style="--i: 1;" class="dot"></div>
  <div style="--i: 2;" class="dot"></div>
  <div style="--i: 3;" class="dot"></div>
  <div style="--i: 4;" class="dot"></div>
  <div style="--i: 5;" class="dot"></div>
</div>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: loader, windows */
.dots {
  width: var(--size);
  height: var(--size);
  position: relative;
}

.dot {
  width: var(--size);
  height: var(--size);
  animation: dwl-dot-spin calc(var(--speed) * 5) infinite linear both;
  animation-delay: calc(var(--i) * var(--speed) / (var(--dot-count) + 2) * -1);
  rotate: calc(var(--i) * var(--spread) / (var(--dot-count) - 1));
  position: absolute;
}

.dot::before {
  content: "";
  display: block;
  width: var(--dot-size);
  height: var(--dot-size);
  background-color: var(--color);
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  bottom: 0;
  left: 50%;
}

@keyframes dwl-dot-spin {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
    opacity: 1;
  }

  2% {
    transform: rotate(20deg);
    animation-timing-function: linear;
    opacity: 1;
  }

  30% {
    transform: rotate(180deg);
    animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    opacity: 1;
  }

  41% {
    transform: rotate(380deg);
    animation-timing-function: linear;
    opacity: 1;
  }

  69% {
    transform: rotate(520deg);
    animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    opacity: 1;
  }

  76% {
    opacity: 1;
  }

  76.1% {
    opacity: 0;
  }

  80% {
    transform: rotate(720deg);
  }

  100% {
    opacity: 0;
  }
}
</style>


================================================
FILE: loaders/SelfMadeSystem_giant-bird-69.html
================================================
<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="loader">
  <path pathLength="360" d="M 56.3752 2 H 7.6248 C 7.2797 2 6.9999 2.268 6.9999 2.5985 V 61.4015 C 6.9999 61.7321 7.2797 62 7.6248 62 H 56.3752 C 56.7203 62 57.0001 61.7321 57.0001 61.4015 V 2.5985 C 57.0001 2.268 56.7203 2 56.3752 2 Z"></path>
  <path pathLength="360" d="M 55.7503 60.803 H 8.2497 V 3.1971 H 55.7503 V 60.803 Z"></path>
  <path pathLength="360" d="M 29.7638 47.6092 C 29.4971 47.3997 29.1031 47.4368 28.8844 47.6925 C 28.6656 47.9481 28.7046 48.3253 28.9715 48.5348 L 32.8768 51.6023 C 32.9931 51.6936 33.1333 51.738 33.2727 51.738 C 33.4533 51.738 33.6328 51.6634 33.7562 51.519 C 33.975 51.2634 33.936 50.8862 33.6692 50.6767 L 29.7638 47.6092 Z"></path>
  <path pathLength="360" d="M 42.3557 34.9046 C 38.4615 34.7664 36.9617 37.6749 36.7179 39.2213 L 35.8587 44.2341 C 35.8029 44.5604 36.0335 44.8681 36.374 44.9218 C 36.4084 44.9272 36.4424 44.9299 36.476 44.9299 C 36.7766 44.9299 37.0415 44.7214 37.0918 44.4281 L 37.9523 39.4076 C 37.9744 39.2673 38.544 35.9737 42.311 36.1007 C 42.6526 36.1124 42.9454 35.8544 42.9577 35.524 C 42.9702 35.1937 42.7006 34.9164 42.3557 34.9046 Z"></path>
  <path pathLength="360" d="M 13.1528 55.5663 C 13.1528 55.8968 13.4326 56.1648 13.7777 56.1648 H 50.2223 C 50.5674 56.1648 50.8472 55.8968 50.8472 55.5663 V 8.4339 C 50.8472 8.1034 50.5674 7.8354 50.2223 7.8354 H 13.7777 C 13.4326 7.8354 13.1528 8.1034 13.1528 8.4339 V 55.5663 Z"></path>
  <path pathLength="360" d="M 25.3121 26.5567 C 24.9717 27.4941 25.0042 28.8167 25.0634 29.5927 C 23.6244 29.8484 20.3838 31.0913 18.9478 37.0352 C 18.5089 37.5603 17.8746 38.1205 17.2053 38.7114 C 16.2598 39.546 15.2351 40.4515 14.4027 41.5332 V 20.5393 H 23.7222 C 23.7178 22.6817 24.1666 25.4398 25.3121 26.5567 Z"></path>
  <path pathLength="360" d="M 49.5975 43.4819 C 48.3838 39.1715 46.3138 33.6788 43.4709 29.7736 C 42.6161 28.5995 40.7095 27.0268 39.6852 26.1818 L 39.6352 26.1405 C 39.4176 24.783 39.1158 22.5803 38.8461 20.5394 H 49.5976 V 43.4819 Z"></path>
  <path pathLength="360" d="M 29.8161 45.151 C 29.0569 44.7516 28.3216 44.4344 27.6455 44.185 C 27.6488 44.0431 27.6397 43.8917 27.6478 43.7715 C 27.9248 39.7036 30.4491 36.2472 35.1502 33.4979 C 38.7221 31.4091 42.2682 30.5427 42.3036 30.5341 C 42.3563 30.5213 42.416 30.5119 42.4781 30.5037 C 42.6695 30.7681 42.8577 31.0407 43.0425 31.3217 C 42.1523 31.4917 39.6591 32.0721 37.0495 33.6188 C 34.2273 35.2912 30.7775 38.4334 29.9445 44.0105 C 29.9025 44.2924 29.8211 45.0524 29.8161 45.151 Z"></path>
  <path pathLength="360" d="M 32.2021 33.6346 C 29.1519 33.8959 26.6218 32.5634 25.6481 31.4461 C 25.9518 30.3095 28.4436 28.4847 30.2282 27.4911 C 30.436 27.3755 30.5563 27.1556 30.5372 26.9261 L 30.4311 25.6487 C 30.5264 25.6565 30.622 25.6621 30.7181 25.6642 L 30.8857 25.6672 C 32.0645 25.6912 33.2094 25.302 34.1059 24.5658 L 34.112 24.5607 L 34.4024 32.5344 C 33.8302 32.8724 33.2863 33.2227 32.7728 33.5852 C 32.5227 33.6032 32.3068 33.6258 32.2021 33.6346 Z"></path>
  <path pathLength="360" d="M 27.8056 17.9207 C 27.8041 17.9207 27.8025 17.9207 27.8012 17.9207 L 27.0155 17.9259 L 26.8123 15.4718 C 26.8174 15.4609 26.8238 15.4501 26.8282 15.4389 C 27.2218 15.0856 28.158 14.3463 29.1923 14.252 C 31.0985 14.0778 33.442 14.3386 33.8213 16.5565 L 34.0564 23.0299 L 33.2927 23.6566 C 32.6306 24.2004 31.7888 24.4889 30.9118 24.4703 L 30.7437 24.4673 C 29.7977 24.4473 28.8841 24.0555 28.2376 23.3933 C 27.9671 23.1152 27.748 22.7967 27.5871 22.4474 C 27.426 22.0961 27.3292 21.7272 27.2989 21.3494 L 27.1145 19.1223 L 27.8097 19.1178 C 28.1548 19.1154 28.4327 18.8457 28.4303 18.5152 C 28.4278 18.186 28.1487 17.9207 27.8056 17.9207 Z"></path>
  <path pathLength="360" d="M 38.4358 26.5433 C 38.4589 26.6829 38.5326 26.8101 38.6443 26.9026 L 38.8697 27.0889 C 39.5266 27.6307 40.6931 28.5938 41.5811 29.4829 C 40.6409 29.7428 38.2545 30.4762 35.6283 31.8516 L 35.3161 23.281 C 35.316 23.2777 35.3158 23.2743 35.3157 23.271 L 35.0692 16.4785 C 35.0682 16.455 35.0659 16.4316 35.0621 16.4082 C 34.6703 13.9692 32.4875 12.7498 29.0741 13.0603 C 28.5659 13.1067 28.0885 13.255 27.6614 13.4468 C 28.321 12.6324 29.4568 11.8605 31.3984 11.8605 C 32.892 11.8605 34.2086 12.4323 35.3118 13.5599 C 36.3478 14.6187 36.9981 15.9821 37.1923 17.5023 C 37.5097 19.987 38.0932 24.4655 38.4358 26.5433 Z"></path>
  <path pathLength="360" d="M 25.6994 17.1716 L 26.053 21.4425 C 26.094 21.9536 26.225 22.4539 26.4434 22.93 C 26.6613 23.403 26.9574 23.8335 27.3242 24.2106 C 27.833 24.7317 28.4641 25.128 29.1549 25.3746 L 29.2609 26.6526 C 28.8063 26.9219 27.959 27.4459 27.0978 28.0926 C 26.7982 28.3177 26.5261 28.5365 26.2766 28.7503 C 26.2677 27.9385 26.3477 27.0941 26.6128 26.699 C 26.7087 26.5561 26.7368 26.3807 26.6898 26.2168 C 26.6428 26.0528 26.5253 25.9159 26.3667 25.8398 C 25.2812 25.3198 24.639 20.7943 25.134 18.7283 C 25.2757 18.1366 25.4822 17.6126 25.6994 17.1716 Z"></path>
  <path pathLength="360" d="M 14.4025 54.9677 V 43.9616 C 15.1297 42.1745 16.6798 40.8031 18.052 39.5917 C 18.5756 39.1296 19.0771 38.6852 19.5054 38.243 C 20.1455 38.2763 21.8243 38.4721 22.2856 39.611 C 22.526 40.696 22.9861 41.6387 23.6573 42.3985 C 23.7809 42.5383 23.9573 42.6104 24.1347 42.6104 C 24.2773 42.6104 24.4206 42.5639 24.5381 42.4688 C 24.8014 42.2553 24.8343 41.8776 24.6115 41.6252 C 22.2978 39.0062 23.8504 34.5445 23.8663 34.4997 C 23.9782 34.1872 23.8046 33.8471 23.4785 33.7397 C 23.1507 33.6321 22.7964 33.7986 22.6843 34.1111 C 22.6657 34.1631 22.2262 35.4024 22.1149 37.0253 C 22.0992 37.2529 22.0927 37.476 22.0916 37.6958 C 21.4663 37.3478 20.7678 37.1827 20.215 37.1057 C 21.266 32.9598 23.2109 31.5061 24.4867 30.9973 C 24.4164 31.2001 24.3769 31.3974 24.3692 31.5894 C 24.3639 31.7208 24.404 31.8501 24.4831 31.9575 C 25.0708 32.7551 26.1363 33.5207 27.4065 34.0584 C 28.2686 34.4232 29.5576 34.8194 31.1457 34.861 C 28.2499 37.3877 26.6257 40.39 26.4009 43.6936 C 26.3992 43.7195 26.3962 43.7461 26.3928 43.7729 C 25.1023 43.399 24.2167 43.2969 24.1252 43.2873 C 23.9888 43.2728 23.8487 43.3023 23.7304 43.3716 C 23.0495 43.7702 22.591 44.3922 22.4046 45.1703 C 22.2331 45.8868 22.3106 46.6885 22.6019 47.3807 C 22.0046 47.6438 21.3269 47.7784 20.7914 47.848 C 19.4939 45.6912 20.8219 44.6351 20.989 44.5146 C 21.2655 44.3207 21.3274 43.9492 21.1268 43.6822 C 20.9253 43.4139 20.5346 43.3533 20.2546 43.5462 C 19.4539 44.0983 18.406 45.6195 19.3656 47.7888 C 18.685 47.5329 17.6255 46.8145 17.8055 44.832 C 17.8836 43.9718 18.1884 43.3352 18.7117 42.9403 C 19.5815 42.2834 20.8198 42.451 20.8366 42.4537 C 21.1748 42.503 21.4952 42.2819 21.5494 41.9563 C 21.6037 41.6297 21.3713 41.3231 21.0306 41.2712 C 20.9582 41.2599 19.2558 41.0142 17.9494 41.9917 C 17.1375 42.5992 16.6703 43.5199 16.5605 44.7282 C 16.1991 48.7092 19.7376 49.1126 19.7732 49.116 C 19.7951 49.1182 22.2326 49.1079 23.7782 48.1211 C 23.8053 48.1039 24.4158 47.7528 24.4158 47.7528 C 24.5214 47.8841 24.6624 48.0532 24.8294 48.2438 L 22.3598 49.4874 C 22.1544 49.5908 22.0257 49.7949 22.0257 50.0171 V 51.8127 C 22.0257 52.1432 22.3054 52.4112 22.6505 52.4112 S 23.2754 52.1432 23.2754 51.8127 V 50.3786 L 25.6987 49.1582 C 26.021 49.4709 26.3894 49.7985 26.7963 50.1188 L 24.6627 50.7144 C 24.4768 50.7663 24.3269 50.8977 24.2559 51.0702 L 23.3968 53.1651 C 23.2704 53.4729 23.4286 53.8202 23.7498 53.9409 C 23.8248 53.9694 23.9023 53.9825 23.9782 53.9825 C 24.2277 53.9825 24.4632 53.8384 24.5599 53.6028 L 25.307 51.7814 L 28.0879 51.0053 C 28.5412 51.2713 29.0239 51.51 29.5341 51.6979 C 29.6079 51.7252 29.6836 51.738 29.7582 51.738 C 30.0092 51.738 30.246 51.592 30.3415 51.3542 C 30.4653 51.0457 30.3048 50.6994 29.9825 50.5808 C 27.1642 49.5423 25.2952 46.9394 25.2771 46.9138 C 25.1245 46.6979 24.8439 46.6013 24.5831 46.6746 L 23.7537 46.9082 C 23.5672 46.4465 23.5125 45.8992 23.623 45.4377 C 23.7168 45.046 23.9138 44.7341 24.21 44.508 C 25.267 44.6734 29.863 45.5842 33.2732 49.2905 C 33.3967 49.4247 33.569 49.4932 33.7423 49.4932 C 33.889 49.4932 34.0364 49.444 34.1551 49.3437 C 34.414 49.1251 34.439 48.747 34.2108 48.4989 C 33.9947 48.2641 33.7738 48.0421 33.5507 47.8278 L 38.211 47.0175 C 38.3595 47.0014 40.1672 46.8356 41.295 48.2161 C 41.4182 48.3671 41.6019 48.4458 41.7875 48.4458 C 41.9222 48.4458 42.0578 48.4043 42.1721 48.3186 C 42.4439 48.1148 42.4919 47.7386 42.2791 47.4784 C 40.6703 45.5094 38.1379 45.8184 38.0305 45.8327 C 38.0218 45.8339 38.0132 45.8353 38.0043 45.8368 L 32.3855 46.8136 C 31.945 46.4667 31.4998 46.1528 31.0557 45.8697 C 31.0618 45.5534 31.0651 45.1775 31.0836 44.9842 C 31.1138 44.6713 31.1524 44.3635 31.1997 44.0606 C 31.8329 40.0032 34.0061 36.8432 37.6695 34.6587 C 40.6334 32.8915 43.5195 32.4536 43.5682 32.4464 C 43.604 32.4413 43.663 32.4341 43.7302 32.4251 C 47.2229 38.3378 49.3982 46.7588 49.5976 49.5158 V 54.9673 H 14.4025 Z"></path>
  <path pathLength="360" d="M 49.5975 9.0325 V 19.3422 H 38.689 C 38.5937 18.6105 38.5061 17.9301 38.4329 17.3569 C 38.2063 15.5828 37.4422 13.9868 36.2237 12.7413 C 34.8748 11.3624 33.2514 10.6633 31.3984 10.6633 C 27.3688 10.6633 25.8233 13.5309 25.556 15.0901 C 25.1526 15.5932 24.3175 16.7856 23.916 18.46 C 23.8568 18.7069 23.8106 19.0066 23.7778 19.3421 H 14.4025 V 9.0323 H 49.5975 Z"></path>
  <path pathLength="360" d="M 30.2223 21.2875 C 30.5674 21.2875 30.8471 21.0195 30.8471 20.6889 V 18.92 L 31.9916 18.9675 C 32.3376 18.9833 32.628 18.7259 32.643 18.3956 C 32.658 18.0654 32.3907 17.786 32.0459 17.7717 L 30.2495 17.6969 C 30.077 17.6889 29.9133 17.7497 29.7902 17.8624 C 29.6671 17.9753 29.5976 18.1315 29.5976 18.2948 V 20.6889 C 29.5974 21.0195 29.8772 21.2875 30.2223 21.2875 Z"></path>

</svg>

<style>
/* From Uiverse.io by SelfMadeSystem - Tags: animation, loader, svg, mona lisa, painting */
.loader {
  width: 12em;
  height: 12em;
}

.loader path {
  stroke: #000;
  stroke-width: 0.6px;
  animation: dashArray 4s ease-in-out infinite,
    dashOffset 4s linear infinite;
}

@keyframes dashArray {
  0% {
    stroke-dasharray: 0 1 359 0;
  }

  50% {
    stroke-dasharray: 0 359 1 0;
  }

  100% {
    stroke-dasharray: 359 1 0 0;
  }
}

@keyframes dashOffset {
  0% {
    stroke-dashoffset: 365;
  }

  100% {
    stroke-dashoffset: 5;
  }
}

</style>


================================================
FILE: loaders/SelfMadeSystem_giant-bobcat-72.html
================================================
<svg style="position: absolute; width: 0; height: 0;">
  <filter id="goo">
  <feGaussianBlur in="SourceGraphic" stdDeviation="12"></feGaussianBlur>
  <feColorMatrix values="0 0 0 0 0 
            0 0 0 0 0 
            0 0 0 0 0 
            0 0 0 48 -7"></feColorMatrix>
</filter>
</svg>

<div class="loader"></div>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: loader */
.loader {
  width: 12em;
  height: 3em;
  position: relative;
  overflow: hidden;
  border-bottom: 8px solid #000;
  filter: url(#goo);
}

.loader::before {
  content: '';
  width: 22em;
  height: 18em;
  background: #f00;
  position: absolute;
  border-radius: 50%;
  left: -2em;
  bottom: -18em;
  animation: wee1 2s linear infinite;
}

.loader::after {
  content: '';
  width: 16em;
  height: 12em;
  background: #0ff;
  position: absolute;
  border-radius: 50%;
  left: -4em;
  bottom: -12em;
  animation: wee2 2s linear infinite 0.75s;
}

@keyframes wee1 {
  0% {
    transform: translateX(-10em) rotate(0deg);
  }

  100% {
    transform: translateX(7em) rotate(180deg);
  }
}

@keyframes wee2 {
  0% {
    transform: translateX(-8em) rotate(0deg);
  }

  100% {
    transform: translateX(8em) rotate(180deg);
  }
}
</style>


================================================
FILE: loaders/SelfMadeSystem_jolly-pig-52.html
================================================
<svg class="loader" viewBox="0 0 384 384" xmlns="http://www.w3.org/2000/svg">
  <circle
    class="active"
    pathLength="360"
    fill="transparent"
    stroke-width="32"
    cx="192"
    cy="192"
    r="176"
  ></circle>
  <circle
    class="track"
    pathLength="360"
    fill="transparent"
    stroke-width="32"
    cx="192"
    cy="192"
    r="176"
  ></circle>
</svg>

<style>
/* From Uiverse.io by SelfMadeSystem  - Tags: material design, loader, spinner, smooth, spin */
/* Inspired by: m3.material.io/components/progress-indicators/overview */

.loader {
  width: 48px;
  /* Subpixels get cut off */
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: center;

  --active: #7627a3;
  --track: #f2d4fe;

  --duration: 8s;

  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 360deg;
  }
}

.active {
  stroke: var(--active);
  stroke-linecap: round;
  stroke-dashoffset: 360;
  animation: active-animation var(--duration) ease-in-out infinite;
}

@keyframes active-animation {
  0% {
    stroke-dasharray: 0 0 0 360 0 360;
  }
  12.5% {
    stroke-dasharray: 0 0 270 90 270 90;
  }
  25% {
    stroke-dasharray: 0 270 0 360 0 360;
  }
  37.5% {
    stroke-dasharray: 0 270 270 90 270 90;
  }
  50% {
    stroke-dasharray: 0 540 0 360 0 360;
  }
  50.001% {
    stroke-dasharray: 0 180 0 360 0 360;
  }
  62.5% {
    stroke-dasharray: 0 180 270 90 270 90;
  }
  75% {
    stroke-dasharray: 0 450 0 360 0 360;
  }
  87.5% {
    stroke-dasharray: 0 450 270 90 270 90;
  }
  87.501% {
    stroke-dasharray: 0 90 270 90 270 90;
  }
  100% {
    stroke-dasharray: 0 360 1 360 0 360;
  }
}

.track {
  stroke: var(--track);
  stroke-linecap: round;
  stroke-dashoffset: 360;
  animation: track-animation var(--duration) ease-in-out infinite;
}

@keyframes track-animation {
  0% {
    stroke-dasharray: 0 20 320 40 320 40;
  }
  12.5% {
    stroke-dasharray: 0 290 50 310 50 310;
  }
  25% {
    stroke-dasharray: 0 290 320 40 320 40;
  }
  37.5% {
    stroke-dasharray: 0 560 50 310 50 310;
  }
  37.501% {
    stroke-dasharray: 0 200 50 310 50 310;
  }
  50% {
    stroke-dasharray: 0 200 320 40 320 40;
  }
  62.5% {
    stroke-dasharray: 0 470 50 310 50 310;
  }
  62.501% {
    stroke-dasharray: 0 110 50 310 50 310;
  }
  75% {
    stroke-dasharray: 0 110 320 40 320 40;
  }
  87.5% {
    stroke-dasharray: 0 380 50 310 50 310;
  }
  100% {
    stroke-dasharray: 0 380 320 40 320 40;
  }
}

</style>
    

================================================
FILE: loaders/SelfMadeSystem_mean-dragonfly-42.html
================================================
<svg xmlns="://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="24" width="24">
  <g id="a">
    <g style="--c1: 120; --c2: 0; --delay: -0.5s">
      <path id="b">
      </path>
      <path id="c">
      </path>
    </g>
    <g style="--c1: 210; --c2: 60" transform="rotate(180 12 12)">
      <path id="b">
      </path>
      <path id="c">
      </path>
    </g>
  </g>
</svg>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: animation, loader, animated, google */
/* Google flip animation thing */

#a {
  transform-origin: center;
  animation: a 2s step-end infinite;
}

@keyframes a {
  0% {
    transform: rotate(90deg);
  }

  25% {
    transform: rotate(180deg);
  }

  50% {
    transform: rotate(270deg);
  }

  75% {
    transform: rotate(360deg);
  }
}

#b {
  animation: b1 1s linear infinite, b2 2s step-end infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes b1 {
  0%,
    100% {
    d: path("M 0 12 a 12 12 0 0 1 24 0 a 12 12 0 0 0 -24 0");
  }

  25%,
    75% {
    d: path("M 0 12 a 12 12 0 0 1 24 0 a 12 0 0 0 0 -24 0");
  }
}

@keyframes b2 {
  0% {
    fill: hsl(var(--c1), 100%, 43%);
  }

  50% {
    fill: hsl(var(--c2), 100%, 43%);
  }
}

#c {
  animation: c1 1s linear infinite, c2 2s linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes c1 {
  0%,
    25%,
    75%,
    100% {
    d: path("M 0 12 h 24 a 12 0  0 0 1 -24 0");
  }

  50% {
    d: path("M 0 12 h 24 a 12 12 0 0 1 -24 0");
  }
}

@keyframes c2 {
  0%,
    25% {
    fill: hsl(var(--c1), 100%, 43%);
  }

  12.5%,
    37.5% {
    fill: hsl(var(--c1), 100%, 25%);
  }

  50%,
    75% {
    fill: hsl(var(--c2), 100%, 43%);
  }

  62.5%,
    87.5% {
    fill: hsl(var(--c2), 100%, 25%);
  }
}
</style>


================================================
FILE: loaders/SelfMadeSystem_orange-crab-82.html
================================================
<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="loader">
  <g class="dash">
    <path style="--sped: 4s;" pathLength="360" d="M 31.9463 1 C 15.6331 1 2.2692 13.6936 1 29.8237 L 17.644 36.7682 C 19.0539 35.794 20.7587 35.2264 22.5909 35.2264 C 22.7563 35.2264 22.9194 35.231 23.0803 35.2399 L 30.4828 24.412 L 30.4828 24.2601 C 30.4828 17.7446 35.7359 12.4423 42.1933 12.4423 C 48.6507 12.4423 53.9038 17.7446 53.9038 24.2601 C 53.9038 30.7756 48.6507 36.08 42.1933 36.08 C 42.104 36.08 42.0168 36.0778 41.9275 36.0755 L 31.3699 43.6747 C 31.3766 43.8155 31.3811 43.9562 31.3811 44.0947 C 31.3811 48.9881 27.4374 52.9675 22.5909 52.9675 C 18.3367 52.9675 14.7773 49.902 13.9729 45.8443 L 2.068 40.8772 C 5.7548 54.0311 17.7312 63.6748 31.9463 63.6748 C 49.0976 63.6748 63 49.6428 63 32.3374 C 63 15.0297 49.0976 1 31.9463 1 Z" class="big"></path>
    <path pathLength="360" d="M 20.4603 48.5493 L 16.6461 46.9584 C 17.3209 48.3794 18.4917 49.5682 20.0447 50.2206 C 23.4007 51.6328 27.2707 50.0262 28.6694 46.6367 C 29.3464 44.9966 29.3509 43.1867 28.6806 41.5422 C 28.0103 39.8977 26.7434 38.6151 25.119 37.9315 C 23.5035 37.2544 21.7741 37.279 20.2547 37.8576 L 24.1961 39.5022 C 26.6719 40.5434 27.8427 43.4124 26.8104 45.9105 C 25.7803 48.4085 22.936 49.5905 20.4603 48.5493 Z" class="aaa"></path>
    <path pathLength="360" d="M 49.9968 24.2603 C 49.9968 19.9188 46.4954 16.384 42.1943 16.384 C 37.8908 16.384 34.3894 19.9188 34.3894 24.2603 C 34.3894 28.6017 37.8908 32.1343 42.1943 32.1343 C 46.4954 32.1343 49.9968 28.6017 49.9968 24.2603 Z"></path>
    <path pathLength="360" d="M 36.3446 24.2469 C 36.3446 20.9802 38.97 18.3324 42.2054 18.3324 C 45.4431 18.3324 48.0685 20.9802 48.0685 24.2469 C 48.0685 27.5135 45.4431 30.1613 42.2054 30.1613 C 38.97 30.1613 36.3446 27.5135 36.3446 24.2469 Z"></path>
  </g>
  <path pathLength="360" d="M 31.9463 1 C 15.6331 1 2.2692 13.6936 1 29.8237 L 17.644 36.7682 C 19.0539 35.794 20.7587 35.2264 22.5909 35.2264 C 22.7563 35.2264 22.9194 35.231 23.0803 35.2399 L 30.4828 24.412 L 30.4828 24.2601 C 30.4828 17.7446 35.7359 12.4423 42.1933 12.4423 C 48.6507 12.4423 53.9038 17.7446 53.9038 24.2601 C 53.9038 30.7756 48.6507 36.08 42.1933 36.08 C 42.104 36.08 42.0168 36.0778 41.9275 36.0755 L 31.3699 43.6747 C 31.3766 43.8155 31.3811 43.9562 31.3811 44.0947 C 31.3811 48.9881 27.4374 52.9675 22.5909 52.9675 C 18.3367 52.9675 14.7773 49.902 13.9729 45.8443 L 2.068 40.8772 C 5.7548 54.0311 17.7312 63.6748 31.9463 63.6748 C 49.0976 63.6748 63 49.6428 63 32.3374 C 63 15.0297 49.0976 1 31.9463 1 Z" fill="#212121"></path>
  <path class="fill" pathLength="360" d="M 31.9463 1 C 15.6331 1 2.2692 13.6936 1 29.8237 L 17.644 36.7682 C 19.0539 35.794 20.7587 35.2264 22.5909 35.2264 C 22.7563 35.2264 22.9194 35.231 23.0803 35.2399 L 30.4828 24.412 L 30.4828 24.2601 C 30.4828 17.7446 35.7359 12.4423 42.1933 12.4423 C 48.6507 12.4423 53.9038 17.7446 53.9038 24.2601 C 53.9038 30.7756 48.6507 36.08 42.1933 36.08 C 42.104 36.08 42.0168 36.0778 41.9275 36.0755 L 31.3699 43.6747 C 31.3766 43.8155 31.3811 43.9562 31.3811 44.0947 C 31.3811 48.9881 27.4374 52.9675 22.5909 52.9675 C 18.3367 52.9675 14.7773 49.902 13.9729 45.8443 L 2.068 40.8772 C 5.7548 54.0311 17.7312 63.6748 31.9463 63.6748 C 49.0976 63.6748 63 49.6428 63 32.3374 C 63 15.0297 49.0976 1 31.9463 1 Z"></path>
</svg>

<style>
/* From Uiverse.io by SelfMadeSystem - Tags: animation, loader, animated, svg, steam, valve */
.loader {
  display: block;
  width: 12em;
  height: 12em;
  overflow: visible;
}

.loader path.fill {
  fill: #2Af2;
  animation: fill 4s ease-in-out infinite;
}

.loader .dash path {
  stroke: #2AF;
  stroke-width: 1px;
  stroke-linecap: round;
  animation: dashArray var(--sped, 2s) ease-in-out infinite,
    dashOffset var(--sped, 2s) linear infinite;
}

.loader .dash path.aaa {
  stroke-width: 2px;
  stroke-linecap: butt;
  clip-path: path('M 20.4603 48.5493 L 16.6461 46.9584 C 17.3209 48.3794 18.4917 49.5682 20.0447 50.2206 C 23.4007 51.6328 27.2707 50.0262 28.6694 46.6367 C 29.3464 44.9966 29.3509 43.1867 28.6806 41.5422 C 28.0103 39.8977 26.7434 38.6151 25.119 37.9315 C 23.5035 37.2544 21.7741 37.279 20.2547 37.8576 L 24.1961 39.5022 C 26.6719 40.5434 27.8427 43.4124 26.8104 45.9105 C 25.7803 48.4085 22.936 49.5905 20.4603 48.5493 Z');
}

.loader .dash path.big {
  stroke-width: 2px;
  filter: drop-shadow(0 0 2px #2AF);
}

@keyframes dashArray {
  0% {
    stroke-dasharray: 0 1 359 0;
  }

  50% {
    stroke-dasharray: 0 359 1 0;
  }

  100% {
    stroke-dasharray: 359 1 0 0;
  }
}

@keyframes dashOffset {
  0% {
    stroke-dashoffset: -5;
  }

  100% {
    stroke-dashoffset: -365;
  }
}

@keyframes fill {
  30%,
  55% {
    fill: #2AF0;
  }
}


</style>


================================================
FILE: loaders/SelfMadeSystem_pretty-treefrog-77.html
================================================
<div class="loader">
  <svg height="0" width="0" viewBox="0 0 64 64" class="absolute">
    <defs class="s-xJBuHA073rTt" xmlns="http://www.w3.org/2000/svg">
      <linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="b">
        <stop class="s-xJBuHA073rTt" stop-color="#973BED"></stop>
        <stop class="s-xJBuHA073rTt" stop-color="#007CFF" offset="1"></stop>
      </linearGradient>
      <linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="0" x2="0" y1="64" x1="0" id="c">
        <stop class="s-xJBuHA073rTt" stop-color="#FFC800"></stop>
        <stop class="s-xJBuHA073rTt" stop-color="#F0F" offset="1"></stop>
        <animateTransform repeatCount="indefinite" keySplines=".42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1" keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1" dur="8s" values="0 32 32;-270 32 32;-270 32 32;-540 32 32;-540 32 32;-810 32 32;-810 32 32;-1080 32 32;-1080 32 32" type="rotate" attributeName="gradientTransform"></animateTransform>
      </linearGradient>
      <linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="d">
        <stop class="s-xJBuHA073rTt" stop-color="#00E0ED"></stop>
        <stop class="s-xJBuHA073rTt" stop-color="#00DA72" offset="1"></stop>
      </linearGradient>
    </defs>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" class="inline-block">
    <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 54.722656,3.9726563 A 2.0002,2.0002 0 0 0 54.941406,4 h 5.007813 C 58.955121,17.046124 49.099667,27.677057 36.121094,29.580078 a 2.0002,2.0002 0 0 0 -1.708985,1.978516 V 60 H 29.587891 V 31.558594 A 2.0002,2.0002 0 0 0 27.878906,29.580078 C 14.900333,27.677057 5.0448787,17.046124 4.0507812,4 H 9.28125 c 1.231666,11.63657 10.984383,20.554048 22.6875,20.734375 a 2.0002,2.0002 0 0 0 0.02344,0 c 11.806958,0.04283 21.70649,-9.003371 22.730469,-20.7617187 z" class="dash" id="y" pathLength="360"></path>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="--rotation-duration:0ms; --rotation-direction:normal;" viewBox="0 0 64 64" height="64" width="64" class="inline-block">
    <path stroke-linejoin="round" stroke-linecap="round" stroke-width="10" stroke="url(#c)" d="M 32 32
        m 0 -27
        a 27 27 0 1 1 0 54
        a 27 27 0 1 1 0 -54" class="spin" id="o" pathLength="360"></path>
  </svg>
  <div class="w-2"></div>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="--rotation-duration:0ms; --rotation-direction:normal;" viewBox="0 0 64 64" height="64" width="64" class="inline-block">
    <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,4 h 4.6230469 v 25.919922 c -0.00276,11.916203 9.8364941,21.550422 21.7500001,21.296875 11.616666,-0.240651 21.014356,-9.63894 21.253906,-21.25586 a 2.0002,2.0002 0 0 0 0,-0.04102 V 4 H 56.25 v 25.919922 c 0,14.33873 -11.581192,25.919922 -25.919922,25.919922 a 2.0002,2.0002 0 0 0 -0.0293,0 C 15.812309,56.052941 3.998433,44.409961 4,29.919922 Z" class="dash" id="u" pathLength="360"></path>
  </svg>
</div>

<style>
/* From Uiverse.io by SelfMadeSystem - Tags: animation, gradient, loader, spinner, text animation, animated, gradients, svg */
.absolute {
  position: absolute;
}

.inline-block {
  display: inline-block;
}

.loader {
  display: flex;
  margin: 0.25em 0;
}

.w-2 {
  width: 0.5em;
}

.dash {
  animation: dashArray 2s ease-in-out infinite,
    dashOffset 2s linear infinite;
}

.spin {
  animation: spinDashArray 2s ease-in-out infinite,
    spin 8s ease-in-out infinite,
    dashOffset 2s linear infinite;
  transform-origin: center;
}

@keyframes dashArray {
  0% {
    stroke-dasharray: 0 1 359 0;
  }

  50% {
    stroke-dasharray: 0 359 1 0;
  }

  100% {
    stroke-dasharray: 359 1 0 0;
  }
}

@keyframes spinDashArray {
  0% {
    stroke-dasharray: 270 90;
  }

  50% {
    stroke-dasharray: 0 360;
  }

  100% {
    stroke-dasharray: 270 90;
  }
}

@keyframes dashOffset {
  0% {
    stroke-dashoffset: 365;
  }

  100% {
    stroke-dashoffset: 5;
  }
}

@keyframes spin {
  0% {
    rotate: 0deg;
  }

  12.5%,
  25% {
    rotate: 270deg;
  }

  37.5%,
  50% {
    rotate: 540deg;
  }

  62.5%,
  75% {
    rotate: 810deg;
  }

  87.5%,
  100% {
    rotate: 1080deg;
  }
}

</style>


================================================
FILE: loaders/Sendung_average-firefox-33.html
================================================
<div class="spinner"></div>
<style>
/* From Uiverse.io by Sendung - Tags: loader */
.spinner {
  --s: 9px;
  width: 56px;
  height: 56px;
  background: #e73535;
  border-radius: 20%;
  animation: spinner-ehcge9 1.5s infinite linear;
  clip-path: polygon(0 0,calc(50% - var(--s)) 0,50% var(--s),calc(50% + var(--s)) 0,100% 0,100% calc(50% - var(--s)),calc(100% - var(--s)) 50%,100% calc(50% + var(--s)),100% 100%,calc(50% + var(--s)) 100%, 50% calc(100% - var(--s)),calc(50% - var(--s)) 100%,0 100%,0 calc(50% + var(--s)), var(--s) 50%, 0 calc(50% - var(--s)));
}

@keyframes spinner-ehcge9 {
  100% {
    transform: rotate(1turn);
  }
}
</style>


================================================
FILE: loaders/ShYnGySYes_young-moose-57.html
================================================
<div class="spinner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>


<style>
/* From Uiverse.io by ShYnGySYes - Tags: loader */
.spinner {
  width: 44px;
  height: 44px;
  animation: spinner-y0fdc1 2s infinite ease;
  transform-style: preserve-3d;
}

.spinner > div {
  background-color: rgb(255, 254, 254);
  height: 100%;
  position: absolute;
  width: 100%;
  border: 2px solid #ff0000;
}

.spinner div:nth-of-type(1) {
  transform: translateZ(-22px) rotateY(180deg);
}

.spinner div:nth-of-type(2) {
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
}

.spinner div:nth-of-type(3) {
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
}

.spinner div:nth-of-type(4) {
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
}

.spinner div:nth-of-type(5) {
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
}

.spinner div:nth-of-type(6) {
  transform: translateZ(22px);
}

@keyframes spinner-y0fdc1 {
  0% {
    transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
  }

  50% {
    transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
  }

  100% {
    transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
  }
}
</style>


================================================
FILE: loaders/Shoh2008_ancient-lionfish-38.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  transform: translateZ(1px);
}

.loader:after {
  content: '$';
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 32px;
  font-weight: bold;
  background: #FFD700;
  color: #DAA520;
  border: 4px double;
  box-sizing: border-box;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .1);
  animation: coin-flip 4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes coin-flip {
  0%, 100% {
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
  }

  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(1800deg);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }

  100% {
    transform: rotateY(3600deg);
  }
}
      
</style>


================================================
FILE: loaders/Shoh2008_ancient-lionfish-44.html
================================================
<span class="loader">Loading</span>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  font-size: 48px;
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #FFF;
  letter-spacing: 2px;
  position: relative;
  box-sizing: border-box;
}

.loader::after {
  content: 'Loading';
  position: absolute;
  left: 0;
  top: 0;
  color: #263238;
  text-shadow: 0 0 2px #FFF, 0 0 1px #FFF, 0 0 1px #FFF;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  animation: animloader 6s linear infinite;
}

@keyframes animloader {
  0% {
    height: 100%;
  }

  100% {
    height: 0%;
  }
}
</style>


================================================
FILE: loaders/Shoh2008_bad-earwig-19.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
  background: #FFF;
  box-sizing: border-box;
  animation: zeroRotation 1s ease infinite alternate-reverse;
}

@keyframes zeroRotation {
  0% {
    transform: scale(1) rotate(0deg);
  }

  100% {
    transform: scale(0.3) rotate(360deg);
  }
}
    
</style>


================================================
FILE: loaders/Shoh2008_bad-lionfish-99.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5) inset,
      0 5px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.loader:before,
  .loader:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 45%;
  top: -40%;
  background-color: #2e2e2e;
  animation: wave 5s linear infinite;
}

.loader:before {
  border-radius: 30%;
  background: rgba(122, 122, 122, 0.4);
  animation: wave 5s linear infinite;
}

@keyframes wave {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/Shoh2008_bitter-moth-36.html
================================================
<span class="loader"></span>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 48px;
  height: 48px;
  display: block;
  margin: 15px auto;
  position: relative;
  color: #FFF;
  box-sizing: border-box;
  animation: rotation_19 1s linear infinite;
}

.loader::after,
.loader::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 0;
  background-color: #FFF;
  border-radius: 50%;
  animation: scale50 1s infinite ease-in-out;
}

.loader::before {
  top: auto;
  bottom: 0;
  background-color: #FF3D00;
  animation-delay: 0.5s;
}

@keyframes rotation_19 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes scale50 {
  0%, 100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
} 
</style>


================================================
FILE: loaders/Shoh2008_calm-fish-83.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 48px;
  height: 48px;
  display: block;
  margin: 20px auto;
  box-sizing: border-box;
  position: relative;
}

.loader::after {
  content: '';
  width: 48px;
  height: 48px;
  left: 0;
  bottom: 0;
  position: absolute;
  border-radius: 50% 50% 0;
  border: 15px solid red;
  transform: rotate(45deg) translate(0, 0);
  box-sizing: border-box;
  animation: animMarker 0.4s ease-in-out infinite alternate;
}

.loader::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 150%;
  width: 24px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  animation: animShadow 0.4s ease-in-out infinite alternate;
}

@keyframes animMarker {
  0% {
    transform: rotate(45deg) translate(5px, 5px);
  }

  100% {
    transform: rotate(45deg) translate(-5px, -5px);
  }
}

@keyframes animShadow {
  0% {
    transform: scale(0.5);
  }

  100% {
    transform: scale(1);
  }
}
    
</style>


================================================
FILE: loaders/Shoh2008_clever-goose-73.html
================================================
<span class="loader"></span>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 6rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.loader:before,
  .loader:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation: pulsOut 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
}

.loader:before {
  width: 100%;
  padding-bottom: 100%;
  box-shadow: inset 0 0 0 1rem #fff;
  animation-name: pulsIn;
}

.loader:after {
  width: calc(100% - 2rem);
  padding-bottom: calc(100% - 2rem);
  box-shadow: 0 0 0 0 #fff;
}

@keyframes pulsIn {
  0% {
    box-shadow: inset 0 0 0 1rem #fff;
    opacity: 1;
  }

  50%, 100% {
    box-shadow: inset 0 0 0 0 #fff;
    opacity: 0;
  }
}

@keyframes pulsOut {
  0%, 50% {
    box-shadow: 0 0 0 0 #fff;
    opacity: 0;
  }

  100% {
    box-shadow: 0 0 0 1rem #fff;
    opacity: 1;
  }
}
      
</style>


================================================
FILE: loaders/Shoh2008_cold-walrus-85.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  position: relative;
  font-size: 16px;
  width: 5.5em;
  height: 5.5em;
}

.loader:before {
  content: '';
  position: absolute;
  transform: translate(-50%, -50%) rotate(45deg);
  height: 100%;
  width: 4px;
  background: #fff;
  left: 50%;
  top: 50%;
}

.loader:after {
  content: '';
  position: absolute;
  left: 0.2em;
  bottom: 0.18em;
  width: 1em;
  height: 1em;
  background-color: orange;
  border-radius: 15%;
  animation: rollingRock 2.5s cubic-bezier(.79, 0, .47, .97) infinite;
}

@keyframes rollingRock {
  0% {
    transform: translate(0, -1em) rotate(-45deg)
  }

  5% {
    transform: translate(0, -1em) rotate(-50deg)
  }

  20% {
    transform: translate(1em, -2em) rotate(47deg)
  }

  25% {
    transform: translate(1em, -2em) rotate(45deg)
  }

  30% {
    transform: translate(1em, -2em) rotate(40deg)
  }

  45% {
    transform: translate(2em, -3em) rotate(137deg)
  }

  50% {
    transform: translate(2em, -3em) rotate(135deg)
  }

  55% {
    transform: translate(2em, -3em) rotate(130deg)
  }

  70% {
    transform: translate(3em, -4em) rotate(217deg)
  }

  75% {
    transform: translate(3em, -4em) rotate(220deg)
  }

  100% {
    transform: translate(0, -1em) rotate(-225deg)
  }
}
      
</style>


================================================
FILE: loaders/Shoh2008_curly-wombat-86.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  margin: -64px auto 0;
  background-color: #ccc;
  background-image: radial-gradient(#fff 4px, #0000  0),
                    radial-gradient(#fff 4px, #0000  0),
                    radial-gradient(#fff 4px, #0000  0),
                    radial-gradient(#fff 4px, #0000  0);
  background-position: 24px center, 8px center, -8px center, -24px center;
  position: relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15) inset;
  animation: flash 1s linear infinite;
}

.loader::before , .loader::after {
  content: '';
  position: absolute;
  border: 1px solid #ccc;
  border-top-color: #0000;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 16px;
  height: 18px;
  background: #fff;
}

.loader::before {
  width: 0px;
  height: 64px;
  transform: translate(-50% , 18px);
}

@keyframes flash {
  0% {
    background-image: radial-gradient(#DDD 4px, #0000  0),
        radial-gradient(#DDD 4px, #0000  0),
        radial-gradient(#DDD 4px, #0000  0),
        radial-gradient(#DDD 4px, #0000  0);
  }

  25% {
    background-image: radial-gradient(#DDD 4px, #0000  0),
      radial-gradient(#DDD 4px, #0000  0),
      radial-gradient(#DDD 4px, #0000  0),
      radial-gradient(#fff 4px, #0000  0);
  }

  50% {
    background-image: radial-gradient(#DDD 4px, #0000  0),
      radial-gradient(#DDD 4px, #0000  0),
      radial-gradient(#fff 4px, #0000  0),
      radial-gradient(#fff 4px, #0000  0);
  }

  75% {
    background-image: radial-gradient(#DDD 4px, #0000  0),
        radial-gradient(#fff 4px, #0000  0),
        radial-gradient(#fff 4px, #0000  0),
        radial-gradient(#fff 4px, #0000  0);
  }

  100% {
    background-image: radial-gradient(#fff 4px, #0000  0),
        radial-gradient(#fff 4px, #0000  0),
        radial-gradient(#fff 4px, #0000  0),
        radial-gradient(#fff 4px, #0000  0);
  }
}
</style>


================================================
FILE: loaders/Shoh2008_curvy-bulldog-27.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 120px;
  height: 150px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-image: linear-gradient(#ddd 50%, #bbb 51%),
    linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd),
    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%);
  background-position: 0 20px, 45px 0, 8px 6px, 55px 3px, 75px 3px, 95px 3px;
  background-size: 100% 4px, 1px 23px, 30px 8px, 15px 15px, 15px 15px, 15px 15px;
  position: relative;
  border-radius: 6%;
  animation: shake 3s ease-in-out infinite;
  transform-origin: 60px 180px;
}

.loader:before {
  content: "";
  position: absolute;
  left: 5px;
  top: 100%;
  width: 7px;
  height: 5px;
  background: #aaa;
  border-radius: 0 0 4px 4px;
  box-shadow: 102px 0 #aaa;
}

.loader:after {
  content: "";
  position: absolute;
  width: 95px;
  height: 95px;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 20px;
  background-color: #bbdefb;
  background-image: linear-gradient( to right, #0004 0%, #0004 49%, #0000 50%, #0000 100% ),
    linear-gradient(135deg, #64b5f6 50%, #607d8b 51%);
  background-size: 30px 100%, 90px 80px;
  border-radius: 50%;
  background-repeat: repeat, no-repeat;
  background-position: 0 0;
  box-sizing: border-box;
  border: 10px solid #DDD;
  box-shadow: 0 0 0 4px #999 inset, 0 0 6px 6px #0004 inset;
  animation: spin 3s ease-in-out infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg)
  }

  50% {
    transform: rotate(360deg)
  }

  75% {
    transform: rotate(750deg)
  }

  100% {
    transform: rotate(1800deg)
  }
}

@keyframes shake {
  65%, 80%, 88%, 96% {
    transform: rotate(0.5deg)
  }

  50%, 75%, 84%, 92% {
    transform: rotate(-0.5deg)
  }

  0%, 50%, 100% {
    transform: rotate(0)
  }
}
</style>


================================================
FILE: loaders/Shoh2008_dangerous-sheep-53.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  display: block;
  position: relative;
  height: 32px;
  width: 140px;
  border: 3px solid #fff;
  border-radius: 20px;
  box-sizing: border-box;
  animation: balancing 2s linear infinite alternate;
  transform-origin: center center;
}

.loader:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 26px;
  border-radius: 20px;
  background: gold;
  animation: ballbns 2s linear infinite alternate;
}

@keyframes ballbns {
  0% {
    left: 0;
    transform: translateX(0%);
  }

  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

@keyframes balancing {
  0% {
    transform: rotate(-25deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(25deg);
  }
}
  
</style>


================================================
FILE: loaders/Shoh2008_dull-cheetah-34.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 48px;
  height: 48px;
  display: flex;
  transform-origin: 50% 125%;
  animation: mov-y 1s infinite linear;
}

.loader:before,
      .loader:after {
  content: "";
  flex: 1;
  background: #fff;
  transform-origin: 0% 100%;
  animation: rtr-x 1s infinite linear;
}

.loader:before {
  transform-origin: 100% 100%;
  animation-name: rtr-rx;
}

@keyframes mov-y {
  0%,25% {
    transform: translateY(0)     scaleY(1)
  }

  49% {
    transform: translateY(-75%)  scaleY(1)
  }

  50% {
    transform: translateY(-75%)  scaleY(-1)
  }

  75%,100% {
    transform: translateY(-150%) scaleY(-1)
  }
}

@keyframes rtr-x {
  25%,75% {
    transform: rotate(0deg)
  }

  50% {
    transform: rotate(90deg)
  }
}

@keyframes rtr-rx {
  25%,75% {
    transform: rotate(0deg)
  }

  50% {
    transform: rotate(-90deg)
  }
}
    
</style>


================================================
FILE: loaders/Shoh2008_fuzzy-tiger-54.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader, pong */
.loader {
  position: relative;
  height: 40px;
  width: 6px;
  color: #FFF;
  animation: paddles 0.75s ease-out infinite;
}

.loader:before {
  content: "";
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 15px;
  width: 12px;
  height: 12px;
  background-color: greenyellow;
  border-radius: 50%;
  animation: ballbounce 0.6s ease-out infinite;
}

@keyframes paddles {
  0% {
    box-shadow: -25px -10px, 25px 10px
  }

  50% {
    box-shadow: -25px 8px, 25px -10px
  }

  100% {
    box-shadow: -25px -10px, 25px 10px
  }
}

@keyframes ballbounce {
  0% {
    transform: translateX(-20px) scale(1, 1.2)
  }

  25% {
    transform: scale(1.2, 1)
  }

  50% {
    transform: translateX(15px) scale(1, 1.2)
  }

  75% {
    transform: scale(1.2, 1)
  }

  100% {
    transform: translateX(-20px)
  }
}
      
</style>


================================================
FILE: loaders/Shoh2008_great-pug-66.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 16px;
  height: 16px;
  box-shadow: 0 30px, 0 -30px;
  border-radius: 4px;
  background: currentColor;
  display: block;
  position: relative;
  transform: translate(-150%, -20px);
  color: #FFF;
  box-sizing: border-box;
  animation: animloader 2s ease infinite;
}

.loader::after,
.loader::before {
  content: '';
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  box-shadow: 0 30px, 0 -30px;
  border-radius: 4px;
  background: currentColor;
  color: #FFF;
  position: absolute;
  left: 30px;
  top: 0;
  animation: animloader 2s 0.2s ease infinite;
}

.loader::before {
  animation-delay: 0.4s;
  left: 60px;
}

@keyframes animloader {
  0% {
    top: 0;
    color: white;
  }

  50% {
    top: 30px;
    color: rgba(255, 255, 255, 0.2);
  }

  100% {
    top: 0;
    color: white;
  }
}

</style>


================================================
FILE: loaders/Shoh2008_hot-dragonfly-11.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #fff;
  border: 8px solid #131a1d;
  overflow: hidden;
  box-sizing: border-box;
}

.loader::after {
  content: '';
  position: absolute;
  left: 0;
  top: -50%;
  width: 100%;
  height: 100%;
  background: #263238;
  z-index: 5;
  border-bottom: 8px solid #131a1d;
  box-sizing: border-box;
  animation: eyeShade 3s infinite;
}

.loader::before {
  content: '';
  position: absolute;
  left: 20px;
  bottom: 15px;
  width: 32px;
  z-index: 2;
  height: 32px;
  background: #111;
  border-radius: 50%;
  animation: eyeMove 3s infinite;
}

@keyframes eyeShade {
  0% {
    transform: translateY(0)
  }

  20% {
    transform: translateY(5px)
  }

  40% , 50% {
    transform: translateY(-5px)
  }

  60% {
    transform: translateY( -8px)
  }

  75% {
    transform: translateY( 5px)
  }

  100% {
    transform: translateY(10px)
  }
}

@keyframes eyeMove {
  0% {
    transform: translate(0 , 0)
  }

  20% {
    transform: translate(0px , 5px)
  }

  40% , 50% {
    transform: translate(0px , -5px)
  }

  60% {
    transform: translate(-10px , -5px)
  }

  75% {
    transform: translate(-20px , 5px)
  }

  100% {
    transform: translate(0 , 10px)
  }
}
</style>


================================================
FILE: loaders/Shoh2008_hot-hound-11.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  position: relative;
  height: 200px;
  width: 200px;
  border-bottom: 3px solid #ff3d00;
  box-sizing: border-box;
  animation: drawLine 4s linear infinite;
}

.loader:before {
  content: "";
  position: absolute;
  left: calc(100% + 14px);
  bottom: -6px;
  width: 16px;
  height: 100px;
  border-radius: 20px 20px 50px 50px;
  background-repeat: no-repeat;
  background-image: linear-gradient(#ff3d00 6px, transparent 0),
    linear-gradient(45deg, rgba(0, 0, 0, 0.02) 49%, white 51%),
    linear-gradient(315deg, rgba(0, 0, 0, 0.02) 49%, white 51%),
    linear-gradient( to bottom, #ffffff 10%, #ff3d00 10%, #ff3d00 90%, #ffffff 90% );
  background-size: 3px 3px, 8px 8px, 8px 8px, 16px 88px;
  background-position: center bottom, left 88px, right 88px, left top;
  transform: rotate(25deg);
  animation: pencilRot 4s linear infinite;
}

@keyframes drawLine {
  0%, 100% {
    width: 0px
  }

  45%, 55% {
    width: 200px
  }
}

@keyframes pencilRot {
  0%, 45% {
    bottom: -6px;
    left: calc(100% + 14px);
    transform: rotate(25deg);
  }

  55%,
  100% {
    bottom: -12px;
    left: calc(100% + 16px);
    transform: rotate(220deg);
  }
}
</style>


================================================
FILE: loaders/Shoh2008_hot-skunk-36.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 10px solid;
  box-sizing: border-box;
  animation: animloader 1s linear infinite alternate;
}

@keyframes animloader {
  0% {
    border-color: white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
  }

  33% {
    border-color: white white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
  }

  66% {
    border-color: white white white rgba(255, 255, 255, 0);
  }

  100% {
    border-color: white white white white;
  }
} 
</style>


================================================
FILE: loaders/Shoh2008_kind-baboon-47.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  position: relative;
  border: 24px solid;
  border-color: red  transparent red transparent;
  animation: rotate_000 2s linear infinite;
}

.loader:before,
      .loader:after {
  content: "";
  display: block;
  border: 24px solid transparent;
  border-left-color: red;
  position: absolute;
  left: -24px;
  top: -24px;
  animation: prix 1s infinite ease-in;
  transform-origin: 0% 100%;
}

.loader:before {
  border-color: transparent red transparent transparent;
  transform-origin: 100% 0%;
  animation-delay: 0.5s;
}

@keyframes rotate_000 {
  100% {
    transform: rotate(360deg)
  }
}

@keyframes prix {
  20% , 80% {
    transform: rotate(0)
  }

  50% {
    transform: rotate(-90deg)
  }
}
    
</style>


================================================
FILE: loaders/Shoh2008_loud-warthog-69.html
================================================
<div class="lds-ellipsis"><div></div><div></div><div></div></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}

</style>


================================================
FILE: loaders/Shoh2008_lucky-emu-65.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader, bear */
.loader {
  width: 160px;
  height: 185px;
  position: relative;
  background: #fff;
  border-radius: 100px 100px 0 0;
}

.loader:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 125px;
  left: 50%;
  top: 25px;
  transform: translateX(-50%);
  background-image: radial-gradient(circle, #000 48%, transparent 55%),
    radial-gradient(circle, #000 48%, transparent 55%),
    radial-gradient(circle, #fff 30%, transparent 45%),
    radial-gradient(circle, #000 48%, transparent 51%),
    linear-gradient(#000 20px, transparent 0),
    linear-gradient(#cfecf9 60px, transparent 0),
    radial-gradient(circle, #cfecf9 50%, transparent 51%),
    radial-gradient(circle, #cfecf9 50%, transparent 51%);
  background-repeat: no-repeat;
  background-size: 16px 16px, 16px 16px, 10px 10px, 42px 42px, 12px 3px,
    50px 25px, 70px 70px, 70px 70px;
  background-position: 25px 10px, 55px 10px, 36px 44px, 50% 30px, 50% 85px,
    50% 50px, 50% 22px, 50% 45px;
  animation: faceLift 3s linear infinite alternate;
}

.loader:before {
  content: "";
  position: absolute;
  width: 140%;
  height: 125px;
  left: -20%;
  top: 0;
  background-image: radial-gradient(circle, #fff 48%, transparent 50%),
    radial-gradient(circle, #fff 48%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 65px 65px;
  background-position: 0px 12px, 145px 12px;
  animation: earLift 3s linear infinite alternate;
}

@keyframes faceLift {
  0% {
    transform: translateX(-60%);
  }

  100% {
    transform: translateX(-30%);
  }
}

@keyframes earLift {
  0% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(0px);
  }
}
  
</style>


================================================
FILE: loaders/Shoh2008_lucky-quail-40.html
================================================
<span class="loader"></span>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 48px;
  height: 48px;
  border: 2px solid #FFF;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation_35 1s linear infinite;
}

.loader::after,
.loader::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  background: greenyellow;
  width: 6px;
  height: 6px;
  transform: translate(150%, 150%);
  border-radius: 50%;
}

.loader::before {
  left: auto;
  top: auto;
  right: 0;
  bottom: 0;
  transform: translate(-150%, -150%);
}

@keyframes rotation_35 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
} 
</style>


================================================
FILE: loaders/Shoh2008_modern-falcon-64.html
================================================
<div class="lds-roller"><div></div><div></div><div></div><div></div></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}

.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: yellow;
  margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}

.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}

.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}

.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}

.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}

.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}

.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}

.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}

@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

</style>


================================================
FILE: loaders/Shoh2008_nervous-lizard-11.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 48px;
  height: 48px;
  background: #353535;
  display: block;
  margin: 20px auto;
  position: relative;
  box-sizing: border-box;
  animation: rotationBack 1s ease-in-out infinite reverse;
}

.loader::before {
  content: '';
  box-sizing: border-box;
  left: 0;
  top: 0;
  transform: rotate(45deg);
  position: absolute;
  width: 48px;
  height: 48px;
  background: #2e2e2e;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.loader::after {
  content: '';
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgb(0, 0, 0);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}
</style>


================================================
FILE: loaders/Shoh2008_new-lion-60.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 84px;
  height: 84px;
  position: relative;
  overflow: hidden;
}

.loader:before , .loader:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: yellow;
  transform: translate(-50% , 100%)  scale(0);
  animation: push_4051 2s infinite ease-in;
}

.loader:after {
  animation-delay: 1s;
}

@keyframes push_4051 {
  0% {
    transform: translate(-50% , 100%)  scale(1);
  }

  15% , 25% {
    transform: translate(-50% , 50%)  scale(1);
  }

  50% , 75% {
    transform: translate(-50%, -30%) scale(0.5);
  }

  80%,  100% {
    transform: translate(-50%, -50%) scale(0);
  }
}
  
</style>


================================================
FILE: loaders/Shoh2008_orange-mouse-40.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 96px;
  height: 48px;
  display: inline-block;
  position: relative;
  background: #5e5e5e;
  border-radius: 48px 48px 0 0;
  box-sizing: border-box;
  overflow: hidden;
}

.loader::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  width: 24px;
  height: 12px;
  border-radius: 24px 24px 0 0;
  background: yellow;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.loader::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 32px;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  background: yellow;
  transform-origin: 50% 100%;
  box-sizing: border-box;
  animation: animloader 2s linear infinite alternate;
}

@keyframes animloader {
  0% {
    transform: rotate(-70deg);
  }

  10% {
    transform: rotate(-40deg);
  }

  20%, 45%, 35% {
    transform: rotate(-10deg);
  }

  40%, 30% {
    transform: rotate(-30deg);
  }

  50%, 60% {
    transform: rotate(20deg);
  }

  55%, 65%, 75% {
    transform: rotate(40deg);
  }

  70% {
    transform: rotate(45deg);
  }

  85%, 90% {
    transform: rotate(50deg);
  }

  95% {
    transform: rotate(75deg);
  }

  100%, 93% {
    transform: rotate(70deg);
  }
}
</style>


================================================
FILE: loaders/Shoh2008_perfect-bird-26.html
================================================
<span class="loader"></span>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  position: relative;
  width: 120px;
  height: 140px;
  background-image: radial-gradient(circle 30px, #fff 100%, transparent 0),
    radial-gradient(circle 5px, #fff 100%, transparent 0),
    radial-gradient(circle 5px, #fff 100%, transparent 0),
    linear-gradient(#FFF 20px, transparent 0);
  background-position: center 127px , 94px 102px , 16px 18px, center 114px;
  background-size: 60px 60px, 10px 10px , 10px 10px , 4px 14px;
  background-repeat: no-repeat;
  z-index: 10;
  perspective: 500px;
}

.loader::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%) rotate(-45deg);
  border-right-color: transparent;
  box-sizing: border-box;
}

.loader::after {
  content: '';
  position: absolute;
  height: 80px;
  width: 80px;
  transform: translate(-50%, -55%) rotate(-45deg) rotateY(0deg);
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  border: 7px solid #FF3D00;
  border-radius: 50%;
  animation: rotate_4191 0.5s linear infinite;
}

@keyframes rotate_4191 {
  to {
    transform: translate(-50%, -55%) rotate(-45deg) rotateY(360deg)
  }
}
</style>


================================================
FILE: loaders/Shoh2008_perfect-fireant-0.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 16px;
  height: 16px;
  position: relative;
  left: -32px;
  border-radius: 50%;
  color: #fff;
  background: currentColor;
  box-shadow: 32px 0 , -32px 0 ,  64px 0;
}

.loader::after {
  content: '';
  position: absolute;
  left: -32px;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  background: #FF3D00;
  animation: move_351 3s linear infinite alternate;
}

@keyframes move_351 {
  0% , 5% {
    left: -32px;
    width: 16px;
  }

  15% , 20% {
    left: -32px;
    width: 48px;
  }

  30% , 35% {
    left: 0px;
    width: 16px;
  }

  45% , 50% {
    left: 0px;
    width: 48px;
  }

  60% , 65% {
    left: 32px;
    width: 16px;
  }

  75% , 80% {
    left: 32px;
    width: 48px;
  }

  95%, 100% {
    left: 64px;
    width: 16px;
  }
}
</style>


================================================
FILE: loaders/Shoh2008_perfect-monkey-20.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  position: relative;
  border-style: solid;
  box-sizing: border-box;
  border-width: 40px 60px 30px 60px;
  border-color: #3760C9 #96DDFC #96DDFC #36BBF7;
  animation: envFloating 1s ease-in infinite alternate;
}

.loader:after {
  content: "";
  position: absolute;
  right: 62px;
  top: -40px;
  height: 70px;
  width: 50px;
  background-image: linear-gradient(#fff 45px, transparent 0),
            linear-gradient(#fff 45px, transparent 0),
            linear-gradient(#fff 45px, transparent 0);
  background-repeat: no-repeat;
  background-size: 30px 4px;
  background-position: 0px 11px , 8px 35px, 0px 60px;
  animation: envDropping 0.75s linear infinite;
}

@keyframes envFloating {
  0% {
    transform: translate(-2px, -5px)
  }

  100% {
    transform: translate(0, 5px)
  }
}

@keyframes envDropping {
  0% {
    background-position: 100px 11px , 115px 35px, 105px 60px;
    opacity: 1;
  }

  50% {
    background-position: 0px 11px , 20px 35px, 5px 60px;
  }

  60% {
    background-position: -30px 11px , 0px 35px, -10px 60px;
  }

  75%, 100% {
    background-position: -30px 11px , -30px 35px, -30px 60px;
    opacity: 0;
  }
}
      
</style>


================================================
FILE: loaders/Shoh2008_quick-fox-3.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 8px;
  height: 8px;
  position: relative;
  border-radius: 50%;
  background: #fff;
  animation: wave_14 1s ease-in infinite;
}

@keyframes wave_14 {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 255,255, 1),
  0 0 0 20px rgba(255, 255,255, 0.2),
  0 0 0 40px rgba(255, 255,255, 0.6),
  0 0 0 60px rgba(255, 255,255, 0.4),
  0 0 0 80px rgba(255, 255,255, 0.2)
  }

  100% {
    box-shadow: 0 0 0 80px rgba(255, 255,255, 0),
    0 0 0 60px rgba(255, 255,255, 0.2),
    0 0 0 40px rgba(255, 255,255, 0.4),
    0 0 0 20px rgba(255, 255,255, 0.6),
    0 0 0 0px rgba(255, 255,255, 1)
  }
}


  
</style>


================================================
FILE: loaders/Shoh2008_red-mouse-25.html
================================================
<div class="lds-hourglass"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.lds-hourglass {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 8px;
  box-sizing: border-box;
  border: 32px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-hourglass 1.2s infinite;
}

@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  100% {
    transform: rotate(1800deg);
  }
}

</style>


================================================
FILE: loaders/Shoh2008_selfish-crab-11.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader, image */
.loader {
  width: 64px;
  height: 64px;
  position: relative;
  background: #FFF;
  border-radius: 4px;
  overflow: hidden;
}

.loader:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  transform: rotate(45deg) translate(30%, 40%);
  background: #ff9371;
  box-shadow: 32px -34px 0 5px #ff3d00;
  animation: slide 2s infinite ease-in-out alternate;
}

.loader:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff3d00;
  transform: rotate(0deg);
  transform-origin: 35px 145px;
  animation: rotate 2s infinite ease-in-out;
}

@keyframes slide {
  0% , 100% {
    bottom: -35px
  }

  25% , 75% {
    bottom: -2px
  }

  20% , 80% {
    bottom: 2px
  }
}

@keyframes rotate {
  0% {
    transform: rotate(-15deg)
  }

  25% , 75% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(25deg)
  }
}
  
</style>


================================================
FILE: loaders/Shoh2008_shaggy-tiger-17.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  margin: auto;
  width: 100px;
  height: 30px;
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  box-shadow: 0px 35px 0 -5px #aaa, 0 -5px 0 0px #ddd, 0 -25px 0 -5px #fff,
    -25px -30px 0 0px #ddd, -25px 30px 0 0px #ddd, 25px -30px 0 0px #ddd,
    25px 30px 0 0px #ddd, 20px 10px 0 5px #ddd, 20px -10px 0 5px #ddd,
    -20px -10px 0 5px #ddd, -20px 10px 0 5px #ddd;
}

.loader:after,
.loader:before {
  content: "";
  border-radius: 100%;
  width: 35px;
  height: 35px;
  display: block;
  position: absolute;
  border: 4px dashed #fff;
  bottom: -4px;
  transform: rotate(0deg);
  box-sizing: border-box;
  animation: tape 4s linear infinite;
}

.loader:before {
  right: 0;
  box-shadow: 0 0 0 4px #fff, 0 0 0 34px #000;
}

.loader:after {
  left: 0;
  box-shadow: 0 0 0 4px #fff, 0 0 0 65px #000;
}

@keyframes tape {
  0% {
    transform: rotate(0deg) scale(0.4);
  }

  100% {
    transform: rotate(-360deg) scale(0.4);
  }
}
      
</style>


================================================
FILE: loaders/Shoh2008_stale-panda-35.html
================================================
<span class="loader"></span>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 106px;
  height: 56px;
  display: block;
  margin: 30px auto;
  background-image: linear-gradient(#e1e1e1 50px, transparent 0), linear-gradient(#e1e1e1 50px, transparent 0), linear-gradient(#e1e1e1 50px, transparent 0), linear-gradient(#e1e1e1 50px, transparent 0), radial-gradient(circle 14px, #e1e1e1 100%, transparent 0);
  background-size: 48px 15px , 15px 35px, 15px 35px, 25px 15px, 28px 28px;
  background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
  background-repeat: no-repeat;
  position: relative;
  transform: rotate(-45deg);
  box-sizing: border-box;
}

.loader::after,
.loader::before {
  content: '';
  position: absolute;
  width: 56px;
  height: 56px;
  border: 6px solid #e1e1e1;
  border-radius: 50%;
  left: -45px;
  top: -10px;
  background-repeat: no-repeat;
  background-image: linear-gradient(#e1e1e1 64px, transparent 0), linear-gradient(#e1e1e1 66px, transparent 0), radial-gradient(circle 4px, #e1e1e1 100%, transparent 0);
  background-size: 40px 1px , 1px 40px, 8px 8px;
  background-position: center center;
  box-sizing: border-box;
  animation: bike 0.3s linear infinite;
}

.loader::before {
  left: 25px;
  top: 60px;
}

@keyframes bike {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
} 
</style>


================================================
FILE: loaders/Shoh2008_strange-crab-54.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  position: relative;
  width: 92px;
  height: 180px;
  border-radius: 8px;
  transform: translateY(-30px);
  background-color: #000;
  background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),
    linear-gradient(#111, #111);
  background-repeat: no-repeat;
  background-size: 10px 10px , 84px 162px;
  background-position: center 2px, 4px 8px;
  animation: lightUp 6s linear infinite alternate;
}

.loader:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 190px;
  transform: translateX(-50%);
  width: 32px;
  height: 75px;
  background-image: linear-gradient(#fff, #fff),
  linear-gradient(#bbb, #bbb),
  linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: center 4px , center top, center 5px;
  background-size: 11px 11px , 7px 4px ,  2px 100%;
  animation: plugin 6s linear infinite alternate;
}

.loader:after {
  content: '';
  width: 30px;
  height: 60px;
  background-image: linear-gradient(#888, #888),
  linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.1) 100%),
  linear-gradient(#15ff00, #15ff00),
  linear-gradient(#888, #888);
  background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;
  background-position: center 0 , center 6px , center bottom , center 4px;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50% , -50%);
  animation: charging 6s linear infinite alternate;
}

@keyframes charging {
  0%  , 25% {
    opacity: 0;
    background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;
  }

  26% ,  75% {
    opacity: 1;
    background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;
  }

  50% , 100% {
    opacity: 1;
    background-size: 12px 4px, 30px 52px , 30px 56px , 30px 56px
  }
}

@keyframes lightUp {
  0%  , 25% {
    background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),
      linear-gradient(#111, #111);
  }

  26% , 100% {
    background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),
      linear-gradient(#DDD, #DDD);
  }
}

@keyframes plugin {
  0% , 25% {
    top: 190px;
    background-position: center 4px , center top, center 5px;
  }

  26%  , 100% {
    background-position: center 0 , center top, center 5px;
    top: 180px;
  }
}
  
</style>


================================================
FILE: loaders/Shoh2008_terrible-fireant-25.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 100px;
  height: 46px;
  position: relative;
  border-bottom: 5px solid #FFF;
  border-top: 5px solid #FFF;
  box-sizing: border-box;
}

.loader:before , .loader:after {
  content: "";
  position: absolute;
  left: 0;
  top: -20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: orange;
  border: 5px solid #FFF;
  box-sizing: border-box;
  animation: slide_391 1s infinite ease-in-out alternate;
}

.loader:after {
  top: 20px;
  animation-direction: alternate-reverse;
}

@keyframes slide_391 {
  0% , 20% {
    transform: translateX(70px)
  }

  80% , 100% {
    transform: translateX(-1px)
  }
}
  
</style>


================================================
FILE: loaders/Shoh2008_thin-turkey-8.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 70px;
  height: 35px;
  position: relative;
  overflow: hidden;
}

.loader:before {
  content: "";
  width: 70px;
  height: 70px;
  position: absolute;
  left: 0;
  top: 0;
  border: 5px solid #0000;
  border-color: #fff #fff #0000 #0000;
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotate_5131 3s ease-in-out infinite;
  transform: rotate(-200deg);
}

@keyframes rotate_5131 {
  0% {
    border-width: 10px;
  }

  25% {
    border-width: 3px;
  }

  50% {
    transform: rotate(115deg);
    border-width: 10px;
  }

  75% {
    border-width: 3px;
  }

  100% {
    border-width: 10px;
  }
}
      
</style>


================================================
FILE: loaders/Shoh2008_thin-walrus-48.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 215px;
  height: 215px;
  display: block;
  margin: auto;
  position: relative;
  background: #FFF;
  box-sizing: border-box;
  border-radius: 10px;
}

.loader::after {
  content: '';
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  top: 15px;
  left: 15px;
  position: absolute;
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
   radial-gradient(circle 50px , #DDD 100%, transparent 0),
   linear-gradient(#DDD 16px, transparent 0),
   linear-gradient(#DDD 24px, transparent 0);
  background-repeat: no-repeat;
  background-size: 75px 175px, 100% 100px, 80% 16px, 80% 16px;
  background-position: -185px 0, center 10px, center 125px, center 155px;
  box-sizing: border-box;
  animation: animloader 1s linear infinite;
}

@keyframes animloader {
  to {
    background-position: 185px 0, center 10px, center 125px, center 155px;
  }
}
  
</style>


================================================
FILE: loaders/Shoh2008_ugly-elephant-80.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 45px;
  height: 40px;
  background: linear-gradient(#0000 calc(1*100%/6),#fff 0 calc(3*100%/6),#0000 0),
            linear-gradient(#0000 calc(2*100%/6),#fff 0 calc(4*100%/6),#0000 0),
            linear-gradient(#0000 calc(3*100%/6),#fff 0 calc(5*100%/6),#0000 0);
  background-size: 10px 400%;
  background-repeat: no-repeat;
  animation: matrix 1s infinite linear;
}

@keyframes matrix {
  0% {
    background-position: 0% 100%, 50% 100%, 100% 100%
  }

  100% {
    background-position: 0% 0%, 50% 0%, 100% 0%
  }
}
    
</style>


================================================
FILE: loaders/Shoh2008_weak-chipmunk-86.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  height: 150px;
  width: 100px;
  border-radius: 55px 55px 10px 10px;
  position: relative;
  background: #FF3D00;
  background-image: linear-gradient(0deg,
    #f63a99 25%,
    #30dcf6 25%,
    #30dcf6 25%,
    #30dcf6 50%,
    #f2d200 50%,
    #f2d200 50%,
    #f2d200 75%,
    #70ca5c 75%);
  background-position: 0px 0px;
  background-size: auto 175px;
  background-repeat: repeat-y;
  animation: colorShift 6s linear infinite;
}

.loader:before {
  content: '';
  position: absolute;
  left: 10px;
  bottom: 15px;
  width: 15px;
  height: 100px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.5);
}

.loader:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50% , 0);
  box-shadow: 0 15px 2px rgba(0, 0, 0, 0.25) inset;
  width: 32px;
  height: 45px;
  background: #E09C5F;
  border-radius: 0 0 12px 12px;
}

@keyframes colorShift {
  to {
    background-position: 0 175px
  }
}

  
</style>


================================================
FILE: loaders/Shoh2008_white-kangaroo-0.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 175px;
  height: 80px;
  display: block;
  margin: auto;
  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
  background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
  background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
  background-repeat: no-repeat;
  position: relative;
  box-sizing: border-box;
}

.loader::before {
  content: '';
  left: 60px;
  bottom: 18px;
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #FF3D00;
  background-image: radial-gradient(circle 8px at 18px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, #FFF 100%, transparent 0);
  background-repeat: no-repeat;
  box-sizing: border-box;
  animation: rotationBack 3s linear infinite;
}

.loader::after {
  content: '';
  left: 94px;
  bottom: 15px;
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #FF3D00;
  background-image: radial-gradient(circle 5px at 12px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, #FFF 100%, transparent 0);
  background-repeat: no-repeat;
  box-sizing: border-box;
  animation: rotationBack 4s linear infinite reverse;
}

@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}
</style>


================================================
FILE: loaders/Shoh2008_yellow-dolphin-16.html
================================================
<span class="loader"></span>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  display: block;
  width: 84px;
  height: 84px;
  position: relative;
}

.loader:before , .loader:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #FFF;
  transform: translate(-50% , -100%)  scale(0);
  animation: push_401 2s infinite linear;
}

.loader:after {
  animation-delay: 1s;
}

@keyframes push_401 {
  0% , 50% {
    transform: translate(-50% , 0%)  scale(1)
  }

  100% {
    transform: translate(-50%, -100%) scale(0)
  }
}
</style>


================================================
FILE: loaders/Shoh2008_yellow-hound-47.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 0;
  height: 4.8px;
  display: inline-block;
  position: relative;
  background: #FFF;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  animation: animFw 8s linear infinite;
}

.loader::after,
  .loader::before {
  content: '';
  width: 10px;
  height: 1px;
  background: #FFF;
  position: absolute;
  top: 9px;
  right: -2px;
  opacity: 0;
  transform: rotate(-45deg) translateX(0px);
  box-sizing: border-box;
  animation: coli1 0.3s linear infinite;
}

.loader::before {
  top: -4px;
  transform: rotate(45deg);
  animation: coli2 0.3s linear infinite;
}

@keyframes animFw {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes coli1 {
  0% {
    transform: rotate(-45deg) translateX(0px);
    opacity: 0.7;
  }

  100% {
    transform: rotate(-45deg) translateX(-45px);
    opacity: 0;
  }
}

@keyframes coli2 {
  0% {
    transform: rotate(45deg) translateX(0px);
    opacity: 1;
  }

  100% {
    transform: rotate(45deg) translateX(-45px);
    opacity: 0.7;
  }
}
  
</style>


================================================
FILE: loaders/SilasRodrigues19_sweet-monkey-41.html
================================================
<div class="loader">
    <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
            <path fill="#470BA9" d="M158 77c6 23-8 48-28 63-21 16-49 21-68 8-19-12-28-43-20-68s33-45 58-45c26 0 52 20 58 42z"></path>
        </svg></span>
    <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
            <path fill="#470BA9" d="M158 77c6 23-8 48-28 63-21 16-49 21-68 8-19-12-28-43-20-68s33-45 58-45c26 0 52 20 58 42z"></path>
        </svg></span>
    <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
            <path fill="#470BA9" d="M158 77c6 23-8 48-28 63-21 16-49 21-68 8-19-12-28-43-20-68s33-45 58-45c26 0 52 20 58 42z"></path>
        </svg></span>
</div>
<style>
/* From Uiverse.io by SilasRodrigues19 - Tags: loader */
.loader {
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.loader span {
  width: 50px;
  height: 50px;
  margin: -5px;
  animation: dots_411 1.5s infinite ease-in-out;
}

.loader span:nth-child(1) {
  -webkit-animation-delay: -.40s;
  animation-delay: -.40s;
}

.loader span:nth-child(2) {
  -webkit-animation-delay: -.25s;
  animation-delay: -.25s;
}

.loader span:nth-child(3) {
  -webkit-animation-delay: -.10s;
  animation-delay: -.10s;
}

@keyframes dots_411 {
  5% {
    opacity: 0;
  }

  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(.8);
    transform: scale(.8);
  }
}

</style>


================================================
FILE: loaders/Smit-Prajapati_nice-duck-87.html
================================================
<div class="loader">
    <div class="dots-container">
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="dot-row">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
    <div class="center-div">
        <svg class="svg" viewBox="0 0 94 94" xmlns="http://www.w3.org/2000/svg">
            <path d="M38.0481 4.82927C38.0481 2.16214 40.018 0 42.4481 0H51.2391C53.6692 0 55.6391 2.16214 55.6391 4.82927V40.1401C55.6391 48.8912 53.2343 55.6657 48.4248 60.4636C43.6153 65.2277 36.7304 67.6098 27.7701 67.6098C18.8099 67.6098 11.925 65.2953 7.11548 60.6663C2.37183 56.0036 3.8147e-06 49.2967 3.8147e-06 40.5456V4.82927C3.8147e-06 2.16213 1.96995 0 4.4 0H13.2405C15.6705 0 17.6405 2.16214 17.6405 4.82927V39.1265C17.6405 43.7892 18.4805 47.2018 20.1605 49.3642C21.8735 51.5267 24.4759 52.6079 27.9678 52.6079C31.4596 52.6079 34.0127 51.5436 35.6268 49.4149C37.241 47.2863 38.0481 43.8399 38.0481 39.0758V4.82927Z">
            </path>
            <path d="M86.9 61.8682C86.9 64.5353 84.9301 66.6975 82.5 66.6975H73.6595C71.2295 66.6975 69.2595 64.5353 69.2595 61.8682V4.82927C69.2595 2.16214 71.2295 0 73.6595 0H82.5C84.9301 0 86.9 2.16214 86.9 4.82927V61.8682Z">
            </path>
            <path d="M2.86102e-06 83.2195C2.86102e-06 80.5524 1.96995 78.3902 4.4 78.3902H83.6C86.0301 78.3902 88 80.5524 88 83.2195V89.1707C88 91.8379 86.0301 94 83.6 94H4.4C1.96995 94 0 91.8379 0 89.1707L2.86102e-06 83.2195Z">
            </path>
        </svg>
    </div>
    <div class="glass"></div>
</div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: loader, circle loader, cool loader, dotted loader */
.loader {
  width: 120px;
  aspect-ratio: 1;
  background: #bcbcbc;
  border-radius: 50%;
  position: relative;
  padding: 4px;
  box-shadow: 2px 2px 5px 0px rgb(255, 255, 255), -2px -2px 5px -2px rgb(0, 0, 0);
}

.loader .dots-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.loader .dots-container .dot-row {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: right center;
  width: 50%;
  height: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.loader .dots-container .dot-row > * {
  animation: blink 5s linear infinite;
}

.loader .dots-container .dot-row .dot {
  width: 4%;
  aspect-ratio: 1;
  background: #8b8b8b;
  border-radius: 50%;
}

.loader .dots-container .dot-row:nth-child(1) {
  transform: translateY(-50%) rotate(0deg);
}

.loader .dots-container .dot-row:nth-child(1) .dot {
  animation-delay: 0s;
}

.loader .dots-container .dot-row:nth-child(2) {
  transform: translateY(-50%) rotate(8deg);
}

.loader .dots-container .dot-row:nth-child(2) .dot {
  animation-delay: 0.1111111111s;
}

.loader .dots-container .dot-row:nth-child(3) {
  transform: translateY(-50%) rotate(16deg);
}

.loader .dots-container .dot-row:nth-child(3) .dot {
  animation-delay: 0.2222222222s;
}

.loader .dots-container .dot-row:nth-child(4) {
  transform: translateY(-50%) rotate(24deg);
}

.loader .dots-container .dot-row:nth-child(4) .dot {
  animation-delay: 0.3333333333s;
}

.loader .dots-container .dot-row:nth-child(5) {
  transform: translateY(-50%) rotate(32deg);
}

.loader .dots-container .dot-row:nth-child(5) .dot {
  animation-delay: 0.4444444444s;
}

.loader .dots-container .dot-row:nth-child(6) {
  transform: translateY(-50%) rotate(40deg);
}

.loader .dots-container .dot-row:nth-child(6) .dot {
  animation-delay: 0.5555555556s;
}

.loader .dots-container .dot-row:nth-child(7) {
  transform: translateY(-50%) rotate(48deg);
}

.loader .dots-container .dot-row:nth-child(7) .dot {
  animation-delay: 0.6666666667s;
}

.loader .dots-container .dot-row:nth-child(8) {
  transform: translateY(-50%) rotate(56deg);
}

.loader .dots-container .dot-row:nth-child(8) .dot {
  animation-delay: 0.7777777778s;
}

.loader .dots-container .dot-row:nth-child(9) {
  transform: translateY(-50%) rotate(64deg);
}

.loader .dots-container .dot-row:nth-child(9) .dot {
  animation-delay: 0.8888888889s;
}

.loader .dots-container .dot-row:nth-child(10) {
  transform: translateY(-50%) rotate(72deg);
}

.loader .dots-container .dot-row:nth-child(10) .dot {
  animation-delay: 1s;
}

.loader .dots-container .dot-row:nth-child(11) {
  transform: translateY(-50%) rotate(80deg);
}

.loader .dots-container .dot-row:nth-child(11) .dot {
  animation-delay: 1.1111111111s;
}

.loader .dots-container .dot-row:nth-child(12) {
  transform: translateY(-50%) rotate(88deg);
}

.loader .dots-container .dot-row:nth-child(12) .dot {
  animation-delay: 1.2222222222s;
}

.loader .dots-container .dot-row:nth-child(13) {
  transform: translateY(-50%) rotate(96deg);
}

.loader .dots-container .dot-row:nth-child(13) .dot {
  animation-delay: 1.3333333333s;
}

.loader .dots-container .dot-row:nth-child(14) {
  transform: translateY(-50%) rotate(104deg);
}

.loader .dots-container .dot-row:nth-child(14) .dot {
  animation-delay: 1.4444444444s;
}

.loader .dots-container .dot-row:nth-child(15) {
  transform: translateY(-50%) rotate(112deg);
}

.loader .dots-container .dot-row:nth-child(15) .dot {
  animation-delay: 1.5555555556s;
}

.loader .dots-container .dot-row:nth-child(16) {
  transform: translateY(-50%) rotate(120deg);
}

.loader .dots-container .dot-row:nth-child(16) .dot {
  animation-delay: 1.6666666667s;
}

.loader .dots-container .dot-row:nth-child(17) {
  transform: translateY(-50%) rotate(128deg);
}

.loader .dots-container .dot-row:nth-child(17) .dot {
  animation-delay: 1.7777777778s;
}

.loader .dots-container .dot-row:nth-child(18) {
  transform: translateY(-50%) rotate(136deg);
}

.loader .dots-container .dot-row:nth-child(18) .dot {
  animation-delay: 1.8888888889s;
}

.loader .dots-container .dot-row:nth-child(19) {
  transform: translateY(-50%) rotate(144deg);
}

.loader .dots-container .dot-row:nth-child(19) .dot {
  animation-delay: 2s;
}

.loader .dots-container .dot-row:nth-child(20) {
  transform: translateY(-50%) rotate(152deg);
}

.loader .dots-container .dot-row:nth-child(20) .dot {
  animation-delay: 2.1111111111s;
}

.loader .dots-container .dot-row:nth-child(21) {
  transform: translateY(-50%) rotate(160deg);
}

.loader .dots-container .dot-row:nth-child(21) .dot {
  animation-delay: 2.2222222222s;
}

.loader .dots-container .dot-row:nth-child(22) {
  transform: translateY(-50%) rotate(168deg);
}

.loader .dots-container .dot-row:nth-child(22) .dot {
  animation-delay: 2.3333333333s;
}

.loader .dots-container .dot-row:nth-child(23) {
  transform: translateY(-50%) rotate(176deg);
}

.loader .dots-container .dot-row:nth-child(23) .dot {
  animation-delay: 2.4444444444s;
}

.loader .dots-container .dot-row:nth-child(24) {
  transform: translateY(-50%) rotate(184deg);
}

.loader .dots-container .dot-row:nth-child(24) .dot {
  animation-delay: 2.5555555556s;
}

.loader .dots-container .dot-row:nth-child(25) {
  transform: translateY(-50%) rotate(192deg);
}

.loader .dots-container .dot-row:nth-child(25) .dot {
  animation-delay: 2.6666666667s;
}

.loader .dots-container .dot-row:nth-child(26) {
  transform: translateY(-50%) rotate(200deg);
}

.loader .dots-container .dot-row:nth-child(26) .dot {
  animation-delay: 2.7777777778s;
}

.loader .dots-container .dot-row:nth-child(27) {
  transform: translateY(-50%) rotate(208deg);
}

.loader .dots-container .dot-row:nth-child(27) .dot {
  animation-delay: 2.8888888889s;
}

.loader .dots-container .dot-row:nth-child(28) {
  transform: translateY(-50%) rotate(216deg);
}

.loader .dots-container .dot-row:nth-child(28) .dot {
  animation-delay: 3s;
}

.loader .dots-container .dot-row:nth-child(29) {
  transform: translateY(-50%) rotate(224deg);
}

.loader .dots-container .dot-row:nth-child(29) .dot {
  animation-delay: 3.1111111111s;
}

.loader .dots-container .dot-row:nth-child(30) {
  transform: translateY(-50%) rotate(232deg);
}

.loader .dots-container .dot-row:nth-child(30) .dot {
  animation-delay: 3.2222222222s;
}

.loader .dots-container .dot-row:nth-child(31) {
  transform: translateY(-50%) rotate(240deg);
}

.loader .dots-container .dot-row:nth-child(31) .dot {
  animation-delay: 3.3333333333s;
}

.loader .dots-container .dot-row:nth-child(32) {
  transform: translateY(-50%) rotate(248deg);
}

.loader .dots-container .dot-row:nth-child(32) .dot {
  animation-delay: 3.4444444444s;
}

.loader .dots-container .dot-row:nth-child(33) {
  transform: translateY(-50%) rotate(256deg);
}

.loader .dots-container .dot-row:nth-child(33) .dot {
  animation-delay: 3.5555555556s;
}

.loader .dots-container .dot-row:nth-child(34) {
  transform: translateY(-50%) rotate(264deg);
}

.loader .dots-container .dot-row:nth-child(34) .dot {
  animation-delay: 3.6666666667s;
}

.loader .dots-container .dot-row:nth-child(35) {
  transform: translateY(-50%) rotate(272deg);
}

.loader .dots-container .dot-row:nth-child(35) .dot {
  animation-delay: 3.7777777778s;
}

.loader .dots-container .dot-row:nth-child(36) {
  transform: translateY(-50%) rotate(280deg);
}

.loader .dots-container .dot-row:nth-child(36) .dot {
  animation-delay: 3.8888888889s;
}

.loader .dots-container .dot-row:nth-child(37) {
  transform: translateY(-50%) rotate(288deg);
}

.loader .dots-container .dot-row:nth-child(37) .dot {
  animation-delay: 4s;
}

.loader .dots-container .dot-row:nth-child(38) {
  transform: translateY(-50%) rotate(296deg);
}

.loader .dots-container .dot-row:nth-child(38) .dot {
  animation-delay: 4.1111111111s;
}

.loader .dots-container .dot-row:nth-child(39) {
  transform: translateY(-50%) rotate(304deg);
}

.loader .dots-container .dot-row:nth-child(39) .dot {
  animation-delay: 4.2222222222s;
}

.loader .dots-container .dot-row:nth-child(40) {
  transform: translateY(-50%) rotate(312deg);
}

.loader .dots-container .dot-row:nth-child(40) .dot {
  animation-delay: 4.3333333333s;
}

.loader .dots-container .dot-row:nth-child(41) {
  transform: translateY(-50%) rotate(320deg);
}

.loader .dots-container .dot-row:nth-child(41) .dot {
  animation-delay: 4.4444444444s;
}

.loader .dots-container .dot-row:nth-child(42) {
  transform: translateY(-50%) rotate(328deg);
}

.loader .dots-container .dot-row:nth-child(42) .dot {
  animation-delay: 4.5555555556s;
}

.loader .dots-container .dot-row:nth-child(43) {
  transform: translateY(-50%) rotate(336deg);
}

.loader .dots-container .dot-row:nth-child(43) .dot {
  animation-delay: 4.6666666667s;
}

.loader .dots-container .dot-row:nth-child(44) {
  transform: translateY(-50%) rotate(344deg);
}

.loader .dots-container .dot-row:nth-child(44) .dot {
  animation-delay: 4.7777777778s;
}

.loader .dots-container .dot-row:nth-child(45) {
  transform: translateY(-50%) rotate(352deg);
}

.loader .dots-container .dot-row:nth-child(45) .dot {
  animation-delay: 4.8888888889s;
}

.loader .center-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  background: linear-gradient(135deg, rgb(130, 130, 130) 0%, rgb(73, 73, 73) 100%);
  box-shadow: rgba(39, 39, 39, 0.3) 8px 8px 5px -5px, rgba(39, 39, 39, 0.5) 8px 8px 10px 0px;
  border-right: 1px solid rgb(63, 63, 63);
  border-bottom: 1px solid rgb(63, 63, 63);
}

.loader .center-div .svg {
  width: 15px;
  aspect-ratio: 1;
  fill: rgba(0, 0, 0, 0.293);
}

.loader .glass {
  position: absolute;
  height: 50%;
  width: 80%;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  transform-origin: bottom center;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.879) 100%);
  border-radius: inherit;
  border-radius: 51% 49% 51% 49%/59% 60% 40% 41%;
}

@keyframes blink {
  0% {
    background: white;
    box-shadow: 0px 0px 2px rgb(255, 255, 255);
  }

  10% {
    background: white;
    box-shadow: 0px 0px 2px rgb(255, 255, 255);
  }

  20% {
    background: white;
    box-shadow: 0px 0px 2px rgb(255, 255, 255);
  }

  21% {
    background: grey;
  }
}
</style>


================================================
FILE: loaders/Smit-Prajapati_soft-donkey-32.html
================================================
<div class="loader">
  <div class="light"></div>
  <div class="black_overlay"></div>
</div>

<style>
/* From Uiverse.io by Smit-Prajapati  - Tags: blue, loader, light, neon */
.loader {
  height: 2px;
  width: 300px;
  background: rgb(44, 44, 44);
  position: relative;
  overflow: hidden;
}
.loader .black_overlay {
  background: linear-gradient(
    87deg,
    rgb(0, 0, 0) 0%,
    rgba(0, 0, 0, 0.14) 30%,
    rgba(0, 0, 0, 0.14) 70%,
    rgb(0, 0, 0) 100%
  );
  position: absolute;
  inset: 0px;
}
.loader .light {
  width: 70px;
  height: 100%;
  position: absolute;
  left: -20%;
  top: 0px;
  background: linear-gradient(
    87deg,
    rgba(0, 0, 0, 0) 0%,
    rgb(0, 204, 255) 40%,
    rgb(0, 204, 255) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  animation: light 2s infinite ease-in-out;
}

@keyframes light {
  from {
    left: -30%;
  }
  to {
    left: 100%;
  }
}

</style>
    

================================================
FILE: loaders/Smit-Prajapati_tricky-turtle-16.html
================================================
<div class="loader">
  <div class="box">
    <div class="logo">
      <svg
        class="svg"
        viewBox="0 0 94 94"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M38.0481 4.82927C38.0481 2.16214 40.018 0 42.4481 0H51.2391C53.6692 0 55.6391 2.16214 55.6391 4.82927V40.1401C55.6391 48.8912 53.2343 55.6657 48.4248 60.4636C43.6153 65.2277 36.7304 67.6098 27.7701 67.6098C18.8099 67.6098 11.925 65.2953 7.11548 60.6663C2.37183 56.0036 3.8147e-06 49.2967 3.8147e-06 40.5456V4.82927C3.8147e-06 2.16213 1.96995 0 4.4 0H13.2405C15.6705 0 17.6405 2.16214 17.6405 4.82927V39.1265C17.6405 43.7892 18.4805 47.2018 20.1605 49.3642C21.8735 51.5267 24.4759 52.6079 27.9678 52.6079C31.4596 52.6079 34.0127 51.5436 35.6268 49.4149C37.241 47.2863 38.0481 43.8399 38.0481 39.0758V4.82927Z"
        ></path>
        <path
          d="M86.9 61.8682C86.9 64.5353 84.9301 66.6975 82.5 66.6975H73.6595C71.2295 66.6975 69.2595 64.5353 69.2595 61.8682V4.82927C69.2595 2.16214 71.2295 0 73.6595 0H82.5C84.9301 0 86.9 2.16214 86.9 4.82927V61.8682Z"
        ></path>
        <path
          d="M2.86102e-06 83.2195C2.86102e-06 80.5524 1.96995 78.3902 4.4 78.3902H83.6C86.0301 78.3902 88 80.5524 88 83.2195V89.1707C88 91.8379 86.0301 94 83.6 94H4.4C1.96995 94 0 91.8379 0 89.1707L2.86102e-06 83.2195Z"
        ></path>
      </svg>
    </div>
  </div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<style>
/* From Uiverse.io by Smit-Prajapati  - Tags: loader, dark, animated, loader, black, minimalist, circle, modern, symbol, geometric, ripple */
.loader {
  --size: 250px;
  --duration: 2s;
  --logo-color: grey;
  --background: linear-gradient(
    0deg,
    rgba(50, 50, 50, 0.2) 0%,
    rgba(100, 100, 100, 0.2) 100%
  );
  height: var(--size);
  aspect-ratio: 1;
  background: black;
  position: relative;
}

.loader .box {
  position: absolute;
  background: rgba(100, 100, 100, 0.15);
  background: var(--background);
  border-radius: 50%;
  border-top: 1px solid rgba(100, 100, 100, 1);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;
  backdrop-filter: blur(5px);
  animation: ripple var(--duration) infinite ease-in-out;
}

.loader .box:nth-child(1) {
  inset: 40%;
  z-index: 99;
}

.loader .box:nth-child(2) {
  inset: 30%;
  z-index: 98;
  border-color: rgba(100, 100, 100, 0.8);
  animation-delay: 0.2s;
}

.loader .box:nth-child(3) {
  inset: 20%;
  z-index: 97;
  border-color: rgba(100, 100, 100, 0.6);
  animation-delay: 0.4s;
}

.loader .box:nth-child(4) {
  inset: 10%;
  z-index: 96;
  border-color: rgba(100, 100, 100, 0.4);
  animation-delay: 0.6s;
}

.loader .box:nth-child(5) {
  inset: 0%;
  z-index: 95;
  border-color: rgba(100, 100, 100, 0.2);
  animation-delay: 0.8s;
}

.loader .logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 30%;
}

.loader .logo svg {
  fill: var(--logo-color);
  width: 100%;
  animation: color-change var(--duration) infinite ease-in-out;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;
  }
  50% {
    transform: scale(1.3);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 30px 20px -0px;
  }
  100% {
    transform: scale(1);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;
  }
}

@keyframes color-change {
  0% {
    fill: var(--logo-color);
  }
  50% {
    fill: white;
  }
  100% {
    fill: var(--logo-color);
  }
}

</style>
    

================================================
FILE: loaders/SmookyDev_shaggy-donkey-90.html
================================================
<div class="center_div">
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
</div>

<style>
/* From Uiverse.io by SmookyDev  - Tags: flashy, loader, smooth, gradients, wave, css effect, loading animation */
.center_div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}

.wave {
  width: 1.8rem;
  height: 150px;
  background-color: #ff6b6b;
  margin: 0 4px;
  border-radius: 0.4rem;
  animation: wave 1.5s linear infinite;
  transform-origin: center;
}

@keyframes wave {
  0% {
    transform: scale(0);
    filter: hue-rotate(90deg) blur(100px);
  }
  25% {
    transform: scale(0);
    filter: hue-rotate(120deg) blur(50px);
  }
  50% {
    transform: scale(1);
    filter: hue-rotate(180deg) blur(25px);
  }
  25% {
    transform: scale(0);
    filter: hue-rotate(360deg) blur(2px);
  }
  100% {
    transform: scale(0);
    filter: hue-rotate(0deg) blur(0);
  }
}

.wave:nth-child(2) {
  animation-delay: 0.1s;
}

.wave:nth-child(3) {
  animation-delay: 0.2s;
}

.wave:nth-child(4) {
  animation-delay: 0.3s;
}

.wave:nth-child(5) {
  animation-delay: 0.4s;
}

.wave:nth-child(6) {
  animation-delay: 0.5s;
}

.wave:nth-child(7) {
  animation-delay: 0.6s;
}

.wave:nth-child(8) {
  animation-delay: 0.7s;
}

.wave:nth-child(9) {
  animation-delay: 0.8s;
}

.wave:nth-child(10) {
  animation-delay: 0.9s;
}

</style>
    

================================================
FILE: loaders/SmookyDev_tiny-quail-64.html
================================================
<!-- From Uiverse.io by SmookyDev - Tags: animation, loader, circle loader, effect loader, loading animation, tailwind -->
<div
  class="w-32 aspect-square rounded-full relative flex justify-center items-center animate-[spin_3s_linear_infinite] z-40 bg-[conic-gradient(white_0deg,white_300deg,transparent_270deg,transparent_360deg)] before:animate-[spin_2s_linear_infinite] before:absolute before:w-[60%] before:aspect-square before:rounded-full before:z-[80] before:bg-[conic-gradient(white_0deg,white_270deg,transparent_180deg,transparent_360deg)] after:absolute after:w-3/4 after:aspect-square after:rounded-full after:z-[60] after:animate-[spin_3s_linear_infinite] after:bg-[conic-gradient(#065f46_0deg,#065f46_180deg,transparent_180deg,transparent_360deg)]"
>
  <span
    class="absolute w-[85%] aspect-square rounded-full z-[60] animate-[spin_5s_linear_infinite] bg-[conic-gradient(#34d399_0deg,#34d399_180deg,transparent_180deg,transparent_360deg)]"
  >
  </span>
</div>




================================================
FILE: loaders/SouravBandyopadhyay_fresh-squid-60.html
================================================
<div class="cssload-main">
	<div class="cssload-heart">
		<span class="cssload-heartL"></span>
		<span class="cssload-heartR"></span>
		<span class="cssload-square"></span>
	</div>
	<div class="cssload-shadow"></div>
</div>
<style>
/* From Uiverse.io by SouravBandyopadhyay - Tags: loading, loader, heart, rotate, love, box-shadow, Infinite Spin */
.cssload-main {
  position: absolute;
  content: '';
  left: 50%;
  transform: translate(-100%, -240%);
  -o-transform: translate(-100%, -240%);
  -ms-transform: translate(-100%, -240%);
  -webkit-transform: translate(-100%, -240%);
  -moz-transform: translate(-100%, -240%);
}

.cssload-main * {
  font-size: 62px;
}

.cssload-heart {
  animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -o-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -ms-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -webkit-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -moz-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  top: 50%;
  content: '';
  left: 50%;
  position: absolute;
}

.cssload-heartL {
  width: 1em;
  height: 1em;
  border: 1px solid rgb(252, 0, 101);
  background-color: rgb(252, 0, 101);
  content: '';
  position: absolute;
  display: block;
  border-radius: 100%;
  animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -o-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -ms-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -webkit-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -moz-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  transform: translate(-28px, -27px);
  -o-transform: translate(-28px, -27px);
  -ms-transform: translate(-28px, -27px);
  -webkit-transform: translate(-28px, -27px);
  -moz-transform: translate(-28px, -27px);
}

.cssload-heartR {
  width: 1em;
  height: 1em;
  border: 1px solid rgb(252, 0, 101);
  background-color: rgb(252, 0, 101);
  content: '';
  position: absolute;
  display: block;
  border-radius: 100%;
  transform: translate(28px, -27px);
  -o-transform: translate(28px, -27px);
  -ms-transform: translate(28px, -27px);
  -webkit-transform: translate(28px, -27px);
  -moz-transform: translate(28px, -27px);
  animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -o-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -ms-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -webkit-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -moz-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
}

.cssload-square {
  width: 1em;
  height: 1em;
  border: 1px solid rgb(252, 0, 101);
  background-color: rgb(252, 0, 101);
  position: relative;
  display: block;
  content: '';
  transform: scale(1) rotate(-45deg);
  -o-transform: scale(1) rotate(-45deg);
  -ms-transform: scale(1) rotate(-45deg);
  -webkit-transform: scale(1) rotate(-45deg);
  -moz-transform: scale(1) rotate(-45deg);
  animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -o-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -ms-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -webkit-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -moz-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
}

.cssload-shadow {
  top: 97px;
  left: 50%;
  content: '';
  position: relative;
  display: block;
  bottom: -.5em;
  width: 1em;
  height: .24em;
  background-color: rgb(215,215,215);
  border: 1px solid rgb(215,215,215);
  border-radius: 50%;
  animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -o-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -ms-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -webkit-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
  -moz-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
}

@keyframes cssload-square {
  50% {
    border-radius: 100%;
    transform: scale(0.5) rotate(-45deg);
  }

  100% {
    transform: scale(1) rotate(-45deg);
  }
}

@-o-keyframes cssload-square {
  50% {
    border-radius: 100%;
    -o-transform: scale(0.5) rotate(-45deg);
  }

  100% {
    -o-transform: scale(1) rotate(-45deg);
  }
}

@-ms-keyframes cssload-square {
  50% {
    border-radius: 100%;
    -ms-transform: scale(0.5) rotate(-45deg);
  }

  100% {
    -ms-transform: scale(1) rotate(-45deg);
  }
}

@-webkit-keyframes cssload-square {
  50% {
    border-radius: 100%;
    -webkit-transform: scale(0.5) rotate(-45deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(-45deg);
  }
}

@-moz-keyframes cssload-square {
  50% {
    border-radius: 100%;
    -moz-transform: scale(0.5) rotate(-45deg);
  }

  100% {
    -moz-transform: scale(1) rotate(-45deg);
  }
}

@keyframes cssload-heart {
  50% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(720deg);
  }
}

@-o-keyframes cssload-heart {
  50% {
    -o-transform: rotate(360deg);
  }

  100% {
    -o-transform: rotate(720deg);
  }
}

@-ms-keyframes cssload-heart {
  50% {
    -ms-transform: rotate(360deg);
  }

  100% {
    -ms-transform: rotate(720deg);
  }
}

@-webkit-keyframes cssload-heart {
  50% {
    -webkit-transform: rotate(360deg);
  }

  100% {
    -webkit-transform: rotate(720deg);
  }
}

@-moz-keyframes cssload-heart {
  50% {
    -moz-transform: rotate(360deg);
  }

  100% {
    -moz-transform: rotate(720deg);
  }
}

@keyframes cssload-heartL {
  60% {
    transform: scale(0.4);
  }
}

@-o-keyframes cssload-heartL {
  60% {
    -o-transform: scale(0.4);
  }
}

@-ms-keyframes cssload-heartL {
  60% {
    -ms-transform: scale(0.4);
  }
}

@-webkit-keyframes cssload-heartL {
  60% {
    -webkit-transform: scale(0.4);
  }
}

@-moz-keyframes cssload-heartL {
  60% {
    -moz-transform: scale(0.4);
  }
}

@keyframes cssload-heartR {
  40% {
    transform: scale(0.4);
  }
}

@-o-keyframes cssload-heartR {
  40% {
    -o-transform: scale(0.4);
  }
}

@-ms-keyframes cssload-heartR {
  40% {
    -ms-transform: scale(0.4);
  }
}

@-webkit-keyframes cssload-heartR {
  40% {
    -webkit-transform: scale(0.4);
  }
}

@-moz-keyframes cssload-heartR {
  40% {
    -moz-transform: scale(0.4);
  }
}

@keyframes cssload-shadow {
  50% {
    transform: scale(0.5);
    border-color: rgb(228,228,228);
  }
}

@-o-keyframes cssload-shadow {
  50% {
    -o-transform: scale(0.5);
    border-color: rgb(228,228,228);
  }
}

@-ms-keyframes cssload-shadow {
  50% {
    -ms-transform: scale(0.5);
    border-color: rgb(228,228,228);
  }
}

@-webkit-keyframes cssload-shadow {
  50% {
    -webkit-transform: scale(0.5);
    border-color: rgb(228,228,228);
  }
}

@-moz-keyframes cssload-shadow {
  50% {
    -moz-transform: scale(0.5);
    border-color: rgb(228,228,228);
  }
}
</style>


================================================
FILE: loaders/SouravBandyopadhyay_rude-sloth-38.html
================================================
 <div class="hourglassBackground">
      <div class="hourglassContainer">
        <div class="hourglassCurves"></div>
        <div class="hourglassCapTop"></div>
        <div class="hourglassGlassTop"></div>
        <div class="hourglassSand"></div>
        <div class="hourglassSandStream"></div>
        <div class="hourglassCapBottom"></div>
        <div class="hourglassGlass"></div>
      </div>
    </div>
<style>
/* From Uiverse.io by SouravBandyopadhyay - Tags: loader, spinner, glass from, sandglass, hourglass */
.hourglassBackground {
  position: relative;
  background-color: rgb(71, 60, 60);
  height: 130px;
  width: 130px;
  border-radius: 50%;
  margin: 30px auto;
}

.hourglassContainer {
  position: absolute;
  top: 30px;
  left: 40px;
  width: 50px;
  height: 70px;
  -webkit-animation: hourglassRotate 2s ease-in 0s infinite;
  animation: hourglassRotate 2s ease-in 0s infinite;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.hourglassContainer div,
.hourglassContainer div:before,
.hourglassContainer div:after {
  transform-style: preserve-3d;
}

@-webkit-keyframes hourglassRotate {
  0% {
    transform: rotateX(0deg);
  }

  50% {
    transform: rotateX(180deg);
  }

  100% {
    transform: rotateX(180deg);
  }
}

@keyframes hourglassRotate {
  0% {
    transform: rotateX(0deg);
  }

  50% {
    transform: rotateX(180deg);
  }

  100% {
    transform: rotateX(180deg);
  }
}

.hourglassCapTop {
  top: 0;
}

.hourglassCapTop:before {
  top: -25px;
}

.hourglassCapTop:after {
  top: -20px;
}

.hourglassCapBottom {
  bottom: 0;
}

.hourglassCapBottom:before {
  bottom: -25px;
}

.hourglassCapBottom:after {
  bottom: -20px;
}

.hourglassGlassTop {
  transform: rotateX(90deg);
  position: absolute;
  top: -16px;
  left: 3px;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  background-color: #999999;
}

.hourglassGlass {
  perspective: 100px;
  position: absolute;
  top: 32px;
  left: 20px;
  width: 10px;
  height: 6px;
  background-color: #999999;
  opacity: 0.5;
}

.hourglassGlass:before,
.hourglassGlass:after {
  content: '';
  display: block;
  position: absolute;
  background-color: #999999;
  left: -17px;
  width: 44px;
  height: 28px;
}

.hourglassGlass:before {
  top: -27px;
  border-radius: 0 0 25px 25px;
}

.hourglassGlass:after {
  bottom: -27px;
  border-radius: 25px 25px 0 0;
}

.hourglassCurves:before,
.hourglassCurves:after {
  content: '';
  display: block;
  position: absolute;
  top: 32px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #333;
  animation: hideCurves 2s ease-in 0s infinite;
}

.hourglassCurves:before {
  left: 15px;
}

.hourglassCurves:after {
  left: 29px;
}

@-webkit-keyframes hideCurves {
  0% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  30% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes hideCurves {
  0% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  30% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.hourglassSandStream:before {
  content: '';
  display: block;
  position: absolute;
  left: 24px;
  width: 3px;
  background-color: white;
  -webkit-animation: sandStream1 2s ease-in 0s infinite;
  animation: sandStream1 2s ease-in 0s infinite;
}

.hourglassSandStream:after {
  content: '';
  display: block;
  position: absolute;
  top: 36px;
  left: 19px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  animation: sandStream2 2s ease-in 0s infinite;
}

@-webkit-keyframes sandStream1 {
  0% {
    height: 0;
    top: 35px;
  }

  50% {
    height: 0;
    top: 45px;
  }

  60% {
    height: 35px;
    top: 8px;
  }

  85% {
    height: 35px;
    top: 8px;
  }

  100% {
    height: 0;
    top: 8px;
  }
}

@keyframes sandStream1 {
  0% {
    height: 0;
    top: 35px;
  }

  50% {
    height: 0;
    top: 45px;
  }

  60% {
    height: 35px;
    top: 8px;
  }

  85% {
    height: 35px;
    top: 8px;
  }

  100% {
    height: 0;
    top: 8px;
  }
}

@-webkit-keyframes sandStream2 {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  51% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  91% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes sandStream2 {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  51% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  91% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.hourglassSand:before,
.hourglassSand:after {
  content: '';
  display: block;
  position: absolute;
  left: 6px;
  background-color: white;
  perspective: 500px;
}

.hourglassSand:before {
  top: 8px;
  width: 39px;
  border-radius: 3px 3px 30px 30px;
  animation: sandFillup 2s ease-in 0s infinite;
}

.hourglassSand:after {
  border-radius: 30px 30px 3px 3px;
  animation: sandDeplete 2s ease-in 0s infinite;
}

@-webkit-keyframes sandFillup {
  0% {
    opacity: 0;
    height: 0;
  }

  60% {
    opacity: 1;
    height: 0;
  }

  100% {
    opacity: 1;
    height: 17px;
  }
}

@keyframes sandFillup {
  0% {
    opacity: 0;
    height: 0;
  }

  60% {
    opacity: 1;
    height: 0;
  }

  100% {
    opacity: 1;
    height: 17px;
  }
}

@-webkit-keyframes sandDeplete {
  0% {
    opacity: 0;
    top: 45px;
    height: 17px;
    width: 38px;
    left: 6px;
  }

  1% {
    opacity: 1;
    top: 45px;
    height: 17px;
    width: 38px;
    left: 6px;
  }

  24% {
    opacity: 1;
    top: 45px;
    height: 17px;
    width: 38px;
    left: 6px;
  }

  25% {
    opacity: 1;
    top: 41px;
    height: 17px;
    width: 38px;
    left: 6px;
  }

  50% {
    opacity: 1;
    top: 41px;
    height: 17px;
    width: 38px;
    left: 6px;
  }

  90% {
    opacity: 1;
    top: 41px;
    height: 0;
    width: 10px;
    left: 20px;
  }
}

@keyframes sandDeplete {
  0% {
    opacity: 0;
    top: 45px;
    height: 17px;
    width: 38px;
    left: 6px;
  }

  1% {
    opacity: 1;
    top: 45px;
    height: 17px;
    width: 38px;
    left: 6px;
  }

  24% {
    opacity: 1;
    top: 45px;
    height: 17px;
    width: 38px;
    left: 6px;
  }

  25% {
    opacity: 1;
    top: 41px;
    height: 17px;
    width: 38px;
    left: 6px;
  }

  50% {
    opacity: 1;
    top: 41px;
    height: 17px;
    width: 38px;
    left: 6px;
  }

  90% {
    opacity: 1;
    top: 41px;
    height: 0;
    width: 10px;
    left: 20px;
  }
}

</style>


================================================
FILE: loaders/SouravBandyopadhyay_stupid-eagle-66.html
================================================
<svg style="left: 50%;
        top: 50%;
        position: absolute;
        transform: translate(-50%, -50%) matrix(1, 0, 0, 1, 0, 0);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 187.3 93.7" height="300px" width="400px">
      <path d="M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 				c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" stroke-width="4" fill="none" id="outline" stroke="#4E4FEB"></path>
      <path d="M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 				c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" stroke-width="4" stroke="#4E4FEB" fill="none" opacity="0.05" id="outline-bg"></path>
    </svg>
<style>
/* From Uiverse.io by SouravBandyopadhyay - Tags: loading, loader, spinner, spin, loading animation, Infinite Spin */
#outline {
  stroke-dasharray: 2.42777px, 242.77666px;
  stroke-dashoffset: 0;
  -webkit-animation: anim 1.6s linear infinite;
  animation: anim 1.6s linear infinite;
}

@-webkit-keyframes anim {
  12.5% {
    stroke-dasharray: 33.98873px, 242.77666px;
    stroke-dashoffset: -26.70543px;
  }

  43.75% {
    stroke-dasharray: 84.97183px, 242.77666px;
    stroke-dashoffset: -84.97183px;
  }

  100% {
    stroke-dasharray: 2.42777px, 242.77666px;
    stroke-dashoffset: -240.34889px;
  }
}

@keyframes anim {
  12.5% {
    stroke-dasharray: 33.98873px, 242.77666px;
    stroke-dashoffset: -26.70543px;
  }

  43.75% {
    stroke-dasharray: 84.97183px, 242.77666px;
    stroke-dashoffset: -84.97183px;
  }

  100% {
    stroke-dasharray: 2.42777px, 242.77666px;
    stroke-dashoffset: -240.34889px;
  }
}

</style>


================================================
FILE: loaders/SouravBandyopadhyay_terrible-dingo-32.html
================================================
<div class="loader">
  <div class="circle outer"></div>
  <div class="circle inner"></div>
</div>

<style>
/* From Uiverse.io by SouravBandyopadhyay - Tags: loader, spinner, colorful */
.loader {
  width: 8em;
  height: 4em;
  position: relative;
  margin: 0 auto;
}

.circle {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  border: 0.4em solid transparent;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.outer {
  border-top-color: #ff0080;
  border-right-color: #ffbf00;
  border-bottom-color: #00bfff;
  border-left-color: #80ff00;
  animation-name: rotate-outer;
}

.inner {
  border-top-color: #80ff00;
  border-right-color: #00bfff;
  border-bottom-color: #ffbf00;
  border-left-color: #ff0080;
  animation-name: rotate-inner;
}

@keyframes rotate-outer {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-inner {
  0% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(0);
  }
}

</style>


================================================
FILE: loaders/Sourcesketch_shy-walrus-51.html
================================================
<div class="cell">
  <div class="card">
    <span class="flower-loader">Loading…</span>
  </div>
</div>

<style>
/* From Uiverse.io by Sourcesketch  - Tags: glassmorphism, green, loader, loading animation */
.flower-loader {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #e96;
  border-radius: 100%;
  -moz-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px,
    #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px;
  -webkit-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px,
    #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px;
  box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, #485 12px -12px 0 4px,
    #485 12px 12px 0 4px, #485 -12px 12px 0 4px;
  -moz-animation: flower-loader 5s infinite ease-in-out;
  -webkit-animation: flower-loader 5s infinite ease-in-out;
  animation: flower-loader 5s infinite ease-in-out;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

@-moz-keyframes flower-loader {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px,
      #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px;
    box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, #485 12px -12px 0 4px,
      #485 12px 12px 0 4px, #485 -12px 12px 0 4px;
  }
  50% {
    -moz-transform: rotate(1080deg);
    transform: rotate(1080deg);
    -moz-box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px,
      #485 -12px 12px 0 4px, #485 -12px -12px 0 4px, #485 12px -12px 0 4px;
    box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px, #485 -12px 12px 0 4px,
      #485 -12px -12px 0 4px, #485 12px -12px 0 4px;
  }
}
@-webkit-keyframes flower-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px,
      #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px;
    box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, #485 12px -12px 0 4px,
      #485 12px 12px 0 4px, #485 -12px 12px 0 4px;
  }
  50% {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
    -webkit-box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px,
      #485 -12px 12px 0 4px, #485 -12px -12px 0 4px, #485 12px -12px 0 4px;
    box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px, #485 -12px 12px 0 4px,
      #485 -12px -12px 0 4px, #485 12px -12px 0 4px;
  }
}
@keyframes flower-loader {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px,
      #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px;
    -webkit-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px,
      #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px;
    box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, #485 12px -12px 0 4px,
      #485 12px 12px 0 4px, #485 -12px 12px 0 4px;
  }
  50% {
    -moz-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
    -moz-box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px,
      #485 -12px 12px 0 4px, #485 -12px -12px 0 4px, #485 12px -12px 0 4px;
    -webkit-box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px,
      #485 -12px 12px 0 4px, #485 -12px -12px 0 4px, #485 12px -12px 0 4px;
    box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px, #485 -12px 12px 0 4px,
      #485 -12px -12px 0 4px, #485 12px -12px 0 4px;
  }
}

</style>
    

================================================
FILE: loaders/Sourcesketch_strange-catfish-68.html
================================================
<div class="container">
  <div class="dot dot-1"></div>
  <div class="dot dot-2"></div>
  <div class="dot dot-3"></div>
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="goo">
      <feGaussianBlur
        result="blur"
        stdDeviation="10"
        in="SourceGraphic"
      ></feGaussianBlur>
      <feColorMatrix
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7"
        mode="matrix"
        in="blur"
      ></feColorMatrix>
    </filter>
  </defs>
</svg>

<style>
/* From Uiverse.io by Sourcesketch  - Tags: neumorphism, loader, spinner, circle loader, creative, effect loader, loading animation */
.container {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  filter: url("#goo");
  animation: rotate-move 2s ease-in-out infinite;
}

.dot {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.dot-3 {
  background-color: #ff1717;
  animation: dot-3-move 2s ease infinite, index 6s ease infinite;
}

.dot-2 {
  background-color: #0051ff;
  animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
}

.dot-1 {
  background-color: #ffc400;
  animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
}

@keyframes dot-3-move {
  20% {
    transform: scale(1);
  }
  45% {
    transform: translateY(-18px) scale(0.45);
  }
  60% {
    transform: translateY(-90px) scale(0.45);
  }
  80% {
    transform: translateY(-90px) scale(0.45);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}

@keyframes dot-2-move {
  20% {
    transform: scale(1);
  }
  45% {
    transform: translate(-16px, 12px) scale(0.45);
  }
  60% {
    transform: translate(-80px, 60px) scale(0.45);
  }
  80% {
    transform: translate(-80px, 60px) scale(0.45);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}

@keyframes dot-1-move {
  20% {
    transform: scale(1);
  }
  45% {
    transform: translate(16px, 12px) scale(0.45);
  }
  60% {
    transform: translate(80px, 60px) scale(0.45);
  }
  80% {
    transform: translate(80px, 60px) scale(0.45);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}

@keyframes rotate-move {
  55% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  80% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes index {
  0%,
  100% {
    z-index: 3;
  }
  33.3% {
    z-index: 2;
  }
  66.6% {
    z-index: 1;
  }
}

</style>
    

================================================
FILE: loaders/Srivatsajbhat_tidy-parrot-17.html
================================================

  <div id="loader">
    <div class="ls-particles ls-part-1"></div>
    <div class="ls-particles ls-part-2"></div>
    <div class="ls-particles ls-part-3"></div>
    <div class="ls-particles ls-part-4"></div>
    <div class="ls-particles ls-part-5"></div>
    <div class="lightsaber ls-left ls-green"></div>
    <div class="lightsaber ls-right ls-red"></div>
  </div>  

<style>
/* From Uiverse.io by Srivatsajbhat - Tags: loader, animated, star wars, lightsaber */
#loader {
  width: 80px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px -40px;
  z-index: 1000;
}

.lightsaber {
  position: absolute;
  width: 4px;
  height: 12px;
  background-color: #666;
  border-radius: 1px;
  bottom: 0;
}

.lightsaber.ls-left {
  left: 0;
}

.lightsaber.ls-right {
  right: 0;
}

.lightsaber:before {
  position: absolute;
  content: ' ';
  display: block;
  width: 2px;
  height: 25px;
  max-height: 1px;
  left: 1px;
  top: 1px;
  background-color: #fff;
  border-radius: 1px;
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
  -webkit-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
}

.lightsaber:after {
  position: absolute;
  content: ' ';
  display: block;
  width: 2px;
  height: 2px;
  left: 1px;
  top: 4px;
  background-color: #fff;
  border-radius: 50%;
}

.ls-particles {
  position: absolute;
  left: 42px;
  top: 10px;
  width: 1px;
  height: 5px;
  background-color: rgb(51, 51, 51, 0);
  -webkit-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
}

.lightsaber.ls-green:before {
  -webkit-animation: showlightgreen 2s ease-in-out infinite 1s;
  animation: showlightgreen 2s ease-in-out infinite 1s;
}

.lightsaber.ls-red:before {
  -webkit-animation: showlightred 2s ease-in-out infinite 1s;
  animation: showlightred 2s ease-in-out infinite 1s;
}

.lightsaber.ls-left {
  -webkit-animation: fightleft 2s ease-in-out infinite 1s;
  animation: fightleft 2s ease-in-out infinite 1s;
}

.lightsaber.ls-right {
  -webkit-animation: fightright 2s ease-in-out infinite 1s;
  animation: fightright 2s ease-in-out infinite 1s;
}

.ls-particles.ls-part-1 {
  -webkit-animation: particles1 2s ease-out infinite 1s;
  animation: particles1 2s ease-out infinite 1s;
}

.ls-particles.ls-part-2 {
  -webkit-animation: particles2 2s ease-out infinite 1s;
  animation: particles2 2s ease-out infinite 1s;
}

.ls-particles.ls-part-3 {
  -webkit-animation: particles3 2s ease-out infinite 1s;
  animation: particles3 2s ease-out infinite 1s;
}

.ls-particles.ls-part-4 {
  -webkit-animation: particles4 2s ease-out infinite 1s;
  animation: particles4 2s ease-out infinite 1s;
}

.ls-particles.ls-part-5 {
  -webkit-animation: particles5 2s ease-out infinite 1s;
  animation: particles5 2s ease-out infinite 1s;
}

@-webkit-keyframes showlightgreen {
  0% {
    max-height: 0;
    box-shadow: 0 0 0 0 #87c054;
  }

  5% {
    box-shadow: 0 0 4px 2px #87c054;
  }

  10% {
    max-height: 22px;
  }

  80% {
    max-height: 22px;
  }

  85% {
    box-shadow: 0 0 4px 2px #87c054;
  }

  100% {
    max-height: 0;
    box-shadow: 0 0 0 0 #87c054;
  }
}

@-webkit-keyframes showlightred {
  0% {
    max-height: 0;
    box-shadow: 0 0 0 0 #f06363;
  }

  20% {
    box-shadow: 0 0 4px 2px #f06363;
  }

  25% {
    max-height: 22px;
  }

  80% {
    max-height: 22px;
  }

  85% {
    box-shadow: 0 0 4px 2px #f06363;
  }

  100% {
    max-height: 0;
    box-shadow: 0 0 0 0 #f06363;
  }
}

@-webkit-keyframes fightleft {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    left: 0;
    bottom: 0;
  }

  30% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    bottom: 0;
  }

  40% {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    left: 0;
    bottom: 2px;
  }

  45% {
    -webkit-transform: rotateZ(65deg);
    transform: rotateZ(65deg);
    left: 0;
  }

  65% {
    -webkit-transform: rotateZ(410deg);
    transform: rotateZ(410deg);
    left: 30px;
    bottom: 10px;
  }

  95% {
    -webkit-transform: rotateZ(410deg);
    transform: rotateZ(410deg);
    left: 0;
    bottom: 0;
  }

  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
    left: 0;
    bottom: 0;
  }
}

@-webkit-keyframes fightright {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    right: 0;
    bottom: 0;
  }

  30% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    bottom: 0;
  }

  45% {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    right: 0;
    bottom: 2px;
  }

  50% {
    -webkit-transform: rotateZ(-65deg);
    transform: rotateZ(-65deg);
    right: 0;
  }

  68% {
    -webkit-transform: rotateZ(-410deg);
    transform: rotateZ(-410deg);
    right: 27px;
    bottom: 13px;
  }

  95% {
    -webkit-transform: rotateZ(-410deg);
    transform: rotateZ(-410deg);
    right: 0;
    bottom: 0;
  }

  100% {
    -webkit-transform: rotateZ(-360deg);
    transform: rotateZ(-360deg);
    right: 0;
    bottom: 0;
  }
}

@-webkit-keyframes particles1 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(35deg) translateY(0px);
    transform: rotateZ(35deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(35deg) translateY(0px);
    transform: rotateZ(35deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(35deg) translateY(0px);
    transform: rotateZ(35deg) translateY(0px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(35deg) translateY(-30px);
    transform: rotateZ(35deg) translateY(-30px);
  }
}

@-webkit-keyframes particles2 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(0px);
    transform: rotateZ(-65deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(0px);
    transform: rotateZ(-65deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(-65deg) translateY(0px);
    transform: rotateZ(-65deg) translateY(0px);
  }

  95% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(-40px);
    transform: rotateZ(-65deg) translateY(-40px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(-40px);
    transform: rotateZ(-65deg) translateY(-40px);
  }
}

@-webkit-keyframes particles3 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(0px);
    transform: rotateZ(-75deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(0px);
    transform: rotateZ(-75deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(-75deg) translateY(0px);
    transform: rotateZ(-75deg) translateY(0px);
  }

  97% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(-35px);
    transform: rotateZ(-75deg) translateY(-35px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(-35px);
    transform: rotateZ(-75deg) translateY(-35px);
  }
}

@-webkit-keyframes particles4 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(0px);
    transform: rotateZ(-25deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(0px);
    transform: rotateZ(-25deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(-25deg) translateY(0px);
    transform: rotateZ(-25deg) translateY(0px);
  }

  97% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(-30px);
    transform: rotateZ(-25deg) translateY(-30px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(-30px);
    transform: rotateZ(-25deg) translateY(-30px);
  }
}

@-webkit-keyframes particles5 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(0px);
    transform: rotateZ(65deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(0px);
    transform: rotateZ(65deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(65deg) translateY(0px);
    transform: rotateZ(65deg) translateY(0px);
  }

  97% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(-35px);
    transform: rotateZ(65deg) translateY(-35px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(-35px);
    transform: rotateZ(65deg) translateY(-35px);
  }
}

@keyframes showlightgreen {
  0% {
    max-height: 0;
    box-shadow: 0 0 0 0 #87c054;
  }

  5% {
    box-shadow: 0 0 4px 2px #87c054;
  }

  10% {
    max-height: 22px;
  }

  80% {
    max-height: 22px;
  }

  85% {
    box-shadow: 0 0 4px 2px #87c054;
  }

  100% {
    max-height: 0;
    box-shadow: 0 0 0 0 #87c054;
  }
}

@keyframes showlightred {
  0% {
    max-height: 0;
    box-shadow: 0 0 0 0 #f06363;
  }

  20% {
    box-shadow: 0 0 4px 2px #f06363;
  }

  25% {
    max-height: 22px;
  }

  80% {
    max-height: 22px;
  }

  85% {
    box-shadow: 0 0 4px 2px #f06363;
  }

  100% {
    max-height: 0;
    box-shadow: 0 0 0 0 #f06363;
  }
}

@keyframes fightleft {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    left: 0;
    bottom: 0;
  }

  30% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    bottom: 0;
  }

  40% {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    left: 0;
    bottom: 2px;
  }

  45% {
    -webkit-transform: rotateZ(65deg);
    transform: rotateZ(65deg);
    left: 0;
  }

  65% {
    -webkit-transform: rotateZ(410deg);
    transform: rotateZ(410deg);
    left: 30px;
    bottom: 10px;
  }

  95% {
    -webkit-transform: rotateZ(410deg);
    transform: rotateZ(410deg);
    left: 0;
    bottom: 0;
  }

  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
    left: 0;
    bottom: 0;
  }
}

@keyframes fightright {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    right: 0;
    bottom: 0;
  }

  30% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    bottom: 0;
  }

  45% {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    right: 0;
    bottom: 2px;
  }

  50% {
    -webkit-transform: rotateZ(-65deg);
    transform: rotateZ(-65deg);
    right: 0;
  }

  68% {
    -webkit-transform: rotateZ(-410deg);
    transform: rotateZ(-410deg);
    right: 27px;
    bottom: 13px;
  }

  95% {
    -webkit-transform: rotateZ(-410deg);
    transform: rotateZ(-410deg);
    right: 0;
    bottom: 0;
  }

  100% {
    -webkit-transform: rotateZ(-360deg);
    transform: rotateZ(-360deg);
    right: 0;
    bottom: 0;
  }
}

@keyframes particles1 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(35deg) translateY(0px);
    transform: rotateZ(35deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(35deg) translateY(0px);
    transform: rotateZ(35deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(35deg) translateY(0px);
    transform: rotateZ(35deg) translateY(0px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(35deg) translateY(-30px);
    transform: rotateZ(35deg) translateY(-30px);
  }
}

@keyframes particles2 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(0px);
    transform: rotateZ(-65deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(0px);
    transform: rotateZ(-65deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(-65deg) translateY(0px);
    transform: rotateZ(-65deg) translateY(0px);
  }

  95% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(-40px);
    transform: rotateZ(-65deg) translateY(-40px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-65deg) translateY(-40px);
    transform: rotateZ(-65deg) translateY(-40px);
  }
}

@keyframes particles3 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(0px);
    transform: rotateZ(-75deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(0px);
    transform: rotateZ(-75deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(-75deg) translateY(0px);
    transform: rotateZ(-75deg) translateY(0px);
  }

  97% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(-35px);
    transform: rotateZ(-75deg) translateY(-35px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-75deg) translateY(-35px);
    transform: rotateZ(-75deg) translateY(-35px);
  }
}

@keyframes particles4 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(0px);
    transform: rotateZ(-25deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(0px);
    transform: rotateZ(-25deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(-25deg) translateY(0px);
    transform: rotateZ(-25deg) translateY(0px);
  }

  97% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(-30px);
    transform: rotateZ(-25deg) translateY(-30px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(-25deg) translateY(-30px);
    transform: rotateZ(-25deg) translateY(-30px);
  }
}

@keyframes particles5 {
  0% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(0px);
    transform: rotateZ(65deg) translateY(0px);
  }

  63% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(0px);
    transform: rotateZ(65deg) translateY(0px);
  }

  64% {
    background-color: rgba(51, 51, 51,1);
    -webkit-transform: rotateZ(65deg) translateY(0px);
    transform: rotateZ(65deg) translateY(0px);
  }

  97% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(-35px);
    transform: rotateZ(65deg) translateY(-35px);
  }

  100% {
    background-color: rgba(51, 51, 51,0);
    -webkit-transform: rotateZ(65deg) translateY(-35px);
    transform: rotateZ(65deg) translateY(-35px);
  }
}




</style>


================================================
FILE: loaders/StealthWorm_chatty-zebra-11.html
================================================
<div class="loader">
  <div class="container">
    <div class="carousel">
      <div class="love"></div>
      <div class="love"></div>
      <div class="love"></div>
      <div class="love"></div>
      <div class="love"></div>
      <div class="love"></div>
      <div class="love"></div>
    </div> 
  </div>
  <div class="container">
    <div class="carousel">
      <div class="death"></div>
      <div class="death"></div>
      <div class="death"></div>
      <div class="death"></div>
      <div class="death"></div>
      <div class="death"></div>
      <div class="death"></div>
    </div> 
  </div>
  <div class="container">
    <div class="carousel">
        <div class="robots"></div>
        <div class="robots"></div>
        <div class="robots"></div>
        <div class="robots"></div>
        <div class="robots"></div>
        <div class="robots"></div>
        <div class="robots"></div>
    </div> 
  </div>
</div>

  
<style>
/* From Uiverse.io by StealthWorm - Tags: loader, love, death, robots */
.loader {
  display: flex;
  position: relative;
  justify-items: center;
  align-items: center;
  gap: 1rem;
  height: 55px;
  width: 200px;
  overflow: hidden;
}

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 200px;
  position: relative;
  align-items: center;
}

.carousel {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  position: absolute;
  width: 100%;
  transform-origin: center;
  animation-delay: 2s;
}

.loader .container:nth-child(3) {
  justify-content: flex-start;
  justify-items: flex-start;
  animation: scroll-up 4s infinite ease-in-out;
  animation-delay: 3s;
}

.loader .container:nth-child(2) {
  justify-content: flex-end;
  justify-items: flex-end;
  animation: scroll-down 4s infinite ease-in-out;
  animation-delay: 3s;
}

.loader .container:nth-child(1) {
  justify-content: flex-end;
  justify-items: flex-end;
  animation: scroll-down 3s infinite ease-in-out;
  animation-delay: 3s;
}

.love {
  background: red;
  display: flex;
  width: 30px;
  height: 30px;
  position: relative;
  align-items: center;
  justify-content: center;
  left: 8px;
  margin: 0.8rem 4px;
  transform: rotate(45deg);
  animation-delay: 2s;
}

.love::before, .love::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: red;
}

.love::before {
  left: -16px;
}

.love::after {
  top: -16px;
}

.death {
  display: flex;
  width: 100%;
  height: 55px;
  position: relative;
  align-items: center;
  justify-content: center;
  animation: rotation 3s infinite ease-in-out;
  animation-delay: 1s;
}

.death:after {
  content: '';
  height: 63px;
  position: absolute;
  border-left: 12px solid red;
  transform: rotate(45deg);
  border-radius: 8px;
  top: -4px;
}

.death:before {
  content: '';
  height: 60px;
  position: absolute;
  border-left: 12px solid red;
  transform: rotate(-45deg);
}

.loader:hover {
  animation: none;
}

.robots {
  display: flex;
  width: 100%;
  height: 55px;
  justify-content: space-between;
  background-color: #ff0000;
  border-radius: 0 8px 8px;
  padding: 8px;
  animation-delay: 5s;
}

.robots::after {
  content: '';
  width: 12px;
  height: 12px;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-radius: 50%;
  animation-delay: 2s;
  animation: blink 0.5s 2 forwards;
}

.robots::before {
  content: '';
  width: 12px;
  height: 12px;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-radius: 50%;
  animation-delay: 2s;
  animation: blink 0.5s 2 forwards;
}

@keyframes scroll-up {
  0% {
    transform: translateY(0);
    filter: blur(0);
  }

  30% {
    transform: translateY(-150%);
    filter: blur(10px);
  }

  60% {
    transform: translateY(0);
    filter: blur(0px);
  }
}

@keyframes scroll-down {
  0% {
    transform: translateY(0);
    filter: blur(0);
  }

  30% {
    transform: translateY(150%);
    filter: blur(10px);
  }

  60% {
    transform: translateY(0);
    filter: blur(0px);
  }
}

@keyframes rotation {
  20%, 100% {
    transform: rotate(180deg);
  }
}

@keyframes blink {
  0% {
    height: 0;
  }

  20% {
    height: 12px;
  }

  100% {
    height: 12px;
  }
}
</style>


================================================
FILE: loaders/StealthWorm_cuddly-wasp-46.html
================================================
    <div class="loader">
      <div class="tars">
        <div class="container 1">
          <div class="shape">
            <div class="f"></div>
            <div class="b"></div>
            <div class="l"></div>
            <div class="r"></div>
            <div class="t"></div>
            <div class="bot"></div>
          </div>
        </div>
        <div class="container 2">
          <div class="shape">
            <div class="f"></div>
            <div class="b"></div>
            <div class="l"></div>
            <div class="r"></div>
            <div class="t"></div>
            <div class="bot"></div>
          </div>
        </div>
        <div class="container 3">
          <div class="shape">
            <div class="f"></div>
            <div class="b"></div>
            <div class="l"></div>
            <div class="r"></div>
            <div class="t"></div>
            <div class="bot"></div>
          </div>
        </div>
        <div class="container 4">
          <div class="shape">
            <div class="f"></div>
            <div class="b"></div>
            <div class="l"></div>
            <div class="r"></div>
            <div class="t"></div>
            <div class="bot"></div>
          </div>
        </div>
      </div>
    </div>
<style>
/* From Uiverse.io by StealthWorm - Tags: loader, interstellar, tars */
.loader {
  margin: 0 auto;
  display: flex;
  width: 12rem;
  height: 12rem;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  border: 0.4rem solid #52c5ff;
}

.container[class*="1"] {
  animation-delay: 1s;
}

.container[class*="2"] {
  animation-delay: 1.3s;
}

.container[class*="3"] {
  animation-delay: 1.6s;
}

.container[class*="4"] {
  animation-delay: 1.9s;
}

.tars {
  z-index: 0;
  position: absolute;
  height: 100px;
  width: 130px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  transform-style: preserve-3d;
  animation: rotateX3D 6s ease-in-out infinite;
  animation-delay: 1s;
}

.container {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotateY3D 3s ease-in infinite both;
}

.shape {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  position: relative;
  z-index: -1;
}

.shape div {
  display: block;
  position: absolute;
  text-align: center;
}

.container:nth-child(2) .f::after,
.container:nth-child(3) .f::after {
  position: absolute;
  content: '';
  width: 100%;
  z-index: -1;
  height: 20px;
  background-image: radial-gradient(#54ff6e 2px, transparent 1%);
  background-size: 20px 5px;
  left: 0;
  top: 20%;
  border: 0;
  animation: animMove 2s linear infinite alternate-reverse;
  overflow: hidden;
}

.container:nth-child(2) .f::before,
.container:nth-child(3) .f::before {
  position: absolute;
  content: '';
  width: 85%;
  z-index: -1;
  height: 20px;
  left: 0;
  top: 20%;
  border: 0;
  background: #181818;
  border: 2px solid #52c5ff;
  overflow: hidden;
}

.container:nth-child(1),
.container:nth-child(4) {
  & .f: :before,
  & .r::before,
  & .l::before {
    position: absolute;
  content: '';
  width: 95%;
  height: 5px;
  left: 0;
  top: 25%;
  border: 1px solid #52c5ff;
  overflow: hidden;
}
}

.container:nth-child(1) .b::before,
.container:nth-child(4) .b::before {
  position: absolute;
  content: '';
  width: 95%;
  z-index: -1;
  height: 5px;
  left: 0;
  top: 69%;
  border: 0;
  border: 1px solid #52c5ff;
  overflow: hidden;
}

.f {
  transform: rotateY(0deg) translateZ(15px);
  border-radius: 2px;
  overflow: hidden;
  transform-style: preserve-3d;
}

.b {
  transform: rotateX(180deg) translateZ(15px);
  border-radius: 2px;
}

.f,.b {
  width: 30px;
  height: 100px;
  background: #212121;
  box-shadow: inset 0 0 0 2px #52c5ff;
  border: 2px solid #52c5ff;
}

.l {
  transform: rotateY(-90deg) translateZ(0px);
  border-radius: 2px;
}

.r {
  transform: rotateY(90deg) translateZ(-30px);
  border-radius: 2px;
}

.l,.r {
  width: 30px;
  height: 100px;
  left: 15px;
  position: relative;
  z-index: -1;
  background: #212121;
  box-shadow: inset 0 0 0 2px #52c5ff;
  border: 2px solid #52c5ff;
}

.t {
  transform: rotateX(90deg) translateZ(40px);
  border-radius: 2px;
}

.bot {
  transform: rotateX(-90deg) translateZ(60px);
  border-radius: 2px;
}

.t,.bot {
  width: 30px;
  height: 30px;
  top: 25px;
  position: relative;
  z-index: -1;
  background: #212121;
  box-shadow: inset 0 0 0 2px #52c5ff;
  border: 2px solid #52c5ff;
}

@keyframes rotateY3D {
  0% {
    transform: translateZ(0px) rotateX(0);
  }

  50% {
    transform: translateZ(0px) rotateX(-360deg);
  }

  100% {
    transform: translateZ(0px) rotateX(-360deg);
  }
}

@keyframes rotateX3D {
  0% {
    transform: translateX(0px) rotateY(0);
  }

  50% {
    transform: translateX(0px) rotateY(180deg);
  }

  100% {
    transform: translateX(0px) rotateY(360deg);
  }
}

@keyframes animMove {
  0% {
    transform: translateX(20px);
  }

  100% {
    transform: translateX(-10px);
  }
}
</style>


================================================
FILE: loaders/StealthWorm_mighty-bear-58.html
================================================
<div class="loader">
  <div class="head"></div>
  
  <div class="flames">
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
  </div>
  
  <div class="eye"></div>
</div>
<style>
/* From Uiverse.io by StealthWorm - Tags: loader, bobby, dead cells */
.loader {
  display: flex;
  width: 8rem;
  height: 8rem;
  justify-items: center;
  justify-content: center;
  align-items: center;
}

.head {
  width: 100%;
  height: 100%;
  background-color: #FA95FB;
  border-radius: 50%;
  animation: move 3s linear infinite;
  box-shadow: 0 1rem 1rem #E220B8;
  filter: blur(.3rem);
  z-index: 1;
}

.eye {
  display: flex;
  position: absolute;
  width: 4rem;
  height: 4rem;
  background-color: #EFFFC8;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 1rem #F752F7;
  animation: move 5s alternate infinite;
}

.eye::before {
  content: "";
  display: flex;
  width: 1rem;
  height: 2rem;
  background-color: #000;
  border-radius: 50%;
  animation: blink 4s ease-in-out alternate infinite;
}

.flames {
  display: flex;
  position: absolute;
  z-index: 0;
}

.particle {
  display: flex;
  position: absolute;
  background-color: #FA95FB;
  border-radius: 50%;
  filter: blur(.3rem);
  border-top: 5px solid #E220B8;
  border-left: 5px solid #E220B8;
}

.flames::before {
  content: "";
  position: absolute;
  width: 8rem;
  height: 8rem;
  background: #f865d8;
  filter: blur(5rem);
  opacity: 0.5;
  border-radius: 50%;
  top: -8rem;
  left: -4rem;
  z-index: 4;
  animation: pulse 3s linear infinite;
}

.particle:nth-child(1) {
  width: 4rem;
  height: 4rem;
  top: -6rem;
  animation: move 7s alternate-reverse infinite;
}

.particle:nth-child(2) {
  width: 1.5rem;
  height: 1.5rem;
  top: -8rem;
  left: -5rem;
  animation: move 1.5s  ease-in-out reverse infinite;
}

.particle:nth-child(3) {
  width: 4rem;
  height: 4rem;
  top: -5rem;
  left: -4rem;
  animation: move 8s alternate-reverse infinite;
}

.particle:nth-child(4) {
  width: 3rem;
  height: 3rem;
  top: -7.5rem;
  animation: move 4s alternate-reverse infinite;
}

.particle:nth-child(5) {
  width: 2rem;
  height: 2rem;
  top: -9rem;
  left: 1rem;
  animation: move 2.5s alternate-reverse infinite;
}

.particle:nth-child(6) {
  width: 2rem;
  height: 2rem;
  top: -6.8rem;
  left: -1.5rem;
  animation: move 5s alternate-reverse infinite;
}

.particle:nth-child(7) {
  width: 1rem;
  height: 1rem;
  top: -10rem;
  left: -1rem;
  animation: move 1.2s alternate-reverse infinite;
}

.particle:nth-child(8) {
  width: 1.3rem;
  height: 1.3rem;
  top: -7.5rem;
  left: -2rem;
  animation: move 2.5s alternate-reverse infinite;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(4px, 6px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes blink {
  20% {
    transform: translate(0, 0);
    height: 2rem;
  }

  30% {
    height: 0;
  }

  40% {
    transform: translate(5px, 10px);
    height: 0;
  }

  50% {
    height: 2rem;
  }

  70% {
    transform: translate(-10px, -10px);
  }

  90% {
    transform: translate(0, 0);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
  }
}

</style>


================================================
FILE: loaders/StealthWorm_pink-duck-62.html
================================================
<div class="loader">
  <div class="blackhole">
    <div class="blackhole-circle"></div>
    <div class="blackhole-disc"></div>
  </div>

  <div class="curve">
    <svg viewBox="0 0 500 500">
      <path id="loading" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97"></path>
      <text width="500">
        <textPath xlink:href="#loading">
          loading...
        </textPath>
      </text>
    </svg>
  </div>
</div>
<style>
/* From Uiverse.io by StealthWorm - Tags: loading, interstellar, black hole */
.loader {
  display: flex;
  width: 8rem;
  height: 8rem;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-direction: column;
}

.curve {
  width: 180%;
  height: 180%;
  position: absolute;
  animation: rotate 8s linear infinite;
  fill: transparent;
}

.curve text {
  letter-spacing: 20px;
  text-transform: uppercase;
  font: 1.5em "Fira Sans", sans-serif;
  fill: white;
  filter: drop-shadow(0 2px 8px black);
}

.blackhole {
  z-index: -1;
  display: flex;
  position: absolute;
  width: 8rem;
  height: 8rem;
  align-items: center;
  justify-content: center;
}

.blackhole-circle {
  z-index: 0;
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at center, black 25%, white 35%, white 100%);
  box-shadow: 0px 0px 2rem #c2babb;
  align-items: center;
  justify-content: center;
}

.blackhole-circle::after {
  z-index: 0;
  position: absolute;
  content: "";
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid white;
  background: radial-gradient(circle at center, black 35%, white 60%, white 100%);
  box-shadow: 0px 0px 5rem #c2babb;
  align-items: center;
  justify-content: center;
  filter: blur(4px);
  animation: pulseAnimation linear infinite 2s alternate-reverse;
}

.blackhole-circle::before {
  z-index: 1;
  content: "";
  display: flex;
  width: 4rem;
  height: 4rem;
  border: 2px solid #ffffff;
  box-shadow: 3px 3px 10px #c2babb, inset 0 0 1rem #ffffff;
  border-radius: 50%;
  top: 5rem;
  filter: blur(0.5px);
  animation: rotate linear infinite 3s;
}

.blackhole-disc {
  position: absolute;
  z-index: 0;
  display: flex;
  width: 5rem;
  height: 10rem;
  border-radius: 50%;
  background: radial-gradient(circle at center, #ffffff 80%, #353535 90%, white 100%);
  filter: blur(1rem) brightness(130%);
  border: 1rem solid white;
  box-shadow: 0px 0px 3rem #d7c4be;
  transform: rotate3d(1, 1, 1, 220deg);
  animation: pulseAnimation2 linear infinite 2s alternate-reverse;
  justify-content: center;
  align-items: center;
}

.blackhole-disc::before {
  content: "";
  position: absolute;
  z-index: 0;
  display: flex;
  width: 5rem;
  height: 10rem;
  border-radius: 50%;
  background: radial-gradient(circle at center, #ffffff 80%, #353535 90%, white 100%);
  filter: blur(3rem);
  border: 1rem solid white;
  box-shadow: 0px 0px 6rem #d7c4be;
  animation: pulseAnimation linear infinite 2s alternate-reverse;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulseAnimation {
  0% {
    box-shadow: 0px 0px 3rem #c2babb;
    transform: scale(1);
  }

  100% {
    box-shadow: 0px 0px 5rem #c2babb;
    transform: scale(1.09);
  }
}

@keyframes pulseAnimation2 {
  0% {
    box-shadow: 0px 0px 3rem #c2babb;
    transform: rotate3d(1, 1, 1, 220deg) scale(1);
  }

  100% {
    box-shadow: 0px 0px 5rem #c2babb;
    transform: rotate3d(1, 1, 1, 220deg)  scale(.95);
  }
}

</style>


================================================
FILE: loaders/SteveBloX_happy-emu-33.html
================================================
<div class="wrapper">
  <div class="blue ball"></div>
  <div class="red ball"></div>
  <div class="yellow ball"></div>
  <div class="green ball"></div>
</div>

<style>
/* From Uiverse.io by SteveBloX  - Website: https://codepen.io/travishorn/pen/YyGVRG - Name: Google / Travis Horn - Tags: loader, google, color */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.ball {
  --size: 16px;
  width: var(--size);
  height: var(--size);
  border-radius: 11px;
  margin: 0 10px;

  animation: 2s bounce ease infinite;
}

.blue {
  background-color: #4285f5;
}

.red {
  background-color: #ea4436;
  animation-delay: 0.25s;
}

.yellow {
  background-color: #fbbd06;
  animation-delay: 0.5s;
}

.green {
  background-color: #34a952;
  animation-delay: 0.75s;
}

@keyframes bounce {
  50% {
    transform: translateY(25px);
  }
}

</style>
    

================================================
FILE: loaders/SteveBloX_wise-moose-53.html
================================================
<div class="progress-loader">
  <div class="progress"></div>
</div>

<style>
/* From Uiverse.io by SteveBloX  - Tags: loading, progress, progress bar, loader, dark, animated, loader, background, gray, white, minimal, bar, progress, horizontal */
.progress-loader {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 150px;
  background: rgba(236, 236, 238, 0.253);
  height: 10px;
  border-radius: 7px;
  overflow: hidden;
}

.progress {
  width: 1px;
  height: 10px;
  border-radius: 7px;
  background: rgb(255, 255, 255);
  transition: 0.5s;
  animation: loading_44 5s cubic-bezier(0.4, 1.01, 1, 1) infinite;
}

@keyframes loading_44 {
  0% {
    width: 0%;
  }

  50% {
    width: 100%;
  }

  100% {
    width: 0%;
  }
}

</style>
    

================================================
FILE: loaders/Subaashbala_ancient-lizard-57.html
================================================
<div class="loaderViewPort">
  <div class="loader">
    <div class="side front">
      <div class="dot"></div>
    </div>
    <div class="side back">
      <div class="dotContainer">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
    </div>
    <div class="side left">
      <div class="dotContainer">
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
    </div>
    <div class="side right">
      <div class="dotContainer">
        <div class="subDotContainer">
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="subDotContainer">
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
    </div>
    <div class="side top">
      <div class="dotContainer">
        <div class="subDotContainer">
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="subDotContainer">
          <div class="dot"></div>
        </div>
        <div class="subDotContainer">
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
    </div>
    <div class="side bottom">
      <div class="dotContainer">
        <div class="subDotContainer">
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="subDotContainer">
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="subDotContainer">
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Subaashbala  - Tags: 3d, loader, dice, loading animation, 3d loader */
.loaderViewPort {
  width: 15rem; /* Background circle around the dice */
  aspect-ratio: 1;
  border-radius: 50%;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid black;
  animation: changeColor 5s ease infinite;
}
.loader {
  /* Container for the dice*/
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateX(90deg);
  transform-style: preserve-3d;
  animation: revolve 5s ease infinite;
}
.dot {
  width: 1rem;
  aspect-ratio: 1;
  background-color: black;
  border-radius: 50%;
}
.dotContainer {
  /* Flexbox to arrange dots horizontally */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.subDotContainer {
  /* Flexbox to arrange dots vertically */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.left .dotContainer {
  transform: rotate(45deg);
}
.side {
  /* Actual sides of the dice */
  background-color: rgba(255, 255, 255, 1);
  padding: 1rem;
  position: absolute;
  width: 6em; /* Varying this will vary the Dice's size */
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid black;
}
.front {
  transform: translateZ(3rem);
}
.back {
  transform: translateZ(-3rem);
}
.back .dotContainer {
  transform: rotate(-45deg);
}
.left {
  transform: rotateY(90deg) translateZ(3rem);
}
.right {
  transform: rotateY(90deg) translateZ(-3rem);
}
.bottom {
  transform: translateY(3rem) rotateX(90deg);
}
.top {
  transform: translateY(-3rem) rotateX(90deg);
}
@keyframes revolve {
  0% {
    transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg)
      rotate3d(0, 0, 1, 0deg);
  }
  20% {
    transform: rotate3d(1, 0, 0, 72deg) rotate3d(0, 1, 0, 72deg)
      rotate3d(0, 0, 1, 72deg);
  }
  40% {
    transform: rotate3d(1, 0, 0, 148deg) rotate3d(0, 1, 0, 148deg)
      rotate3d(0, 0, 1, 148deg);
  }
  60% {
    transform: rotate3d(1, 0, 0, 216deg) rotate3d(0, 1, 0, 216deg)
      rotate3d(0, 0, 1, 216deg);
  }
  80% {
    transform: rotate3d(1, 0, 0, 288deg) rotate3d(0, 1, 0, 288deg)
      rotate3d(0, 0, 1, 288deg);
  }
  100% {
    transform: rotate3d(1, 0, 0, 360deg) rotate3d(0, 1, 0, 360deg)
      rotate3d(0, 0, 1, 360deg);
  }
}
@keyframes changeColor {
  0% {
    background-color: #00dfa2;
  }
  20% {
    background-color: #f72798;
  }
  40% {
    background-color: #f57d1f;
  }
  60% {
    background-color: #16ff00;
  }
  80% {
    background-color: #ff004d;
  }
  100% {
    background-color: #00dfa2;
  }
}

</style>
    

================================================
FILE: loaders/Subaashbala_average-horse-18.html
================================================
<div class="loader">
  <span class="l">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 11 18"
      height="18"
      width="11"
      class="letter"
    >
      <path
        fill="black"
        d="M0.28 16.14V0.94L3.7 0.64L5.7 1.64V12.3L8.5 12.06L10.5 13.06V16.44L2.28 17.14L0.28 16.14ZM3.5 12.7V0.859999L0.48 1.12V15.94L8.3 15.26V12.28L3.5 12.7Z"
      ></path>
    </svg>
  </span>
  <span class="o">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 16 18"
      height="18"
      width="16"
      class="letter"
    >
      <path
        fill="black"
        d="M8.94 17.24C8.84667 17.2533 8.74667 17.26 8.64 17.26C8.54667 17.26 8.45333 17.26 8.36 17.26C7.66667 17.26 7.02667 17.16 6.44 16.96C5.86667 16.7733 5.30667 16.5533 4.76 16.3C3.33333 15.5933 2.28667 14.6 1.62 13.32C0.966667 12.0267 0.64 10.4933 0.64 8.72C0.64 7.68 0.766667 6.67333 1.02 5.7C1.28667 4.71333 1.68 3.82667 2.2 3.04C2.72 2.24 3.36667 1.58667 4.14 1.08C4.92667 0.573332 5.84667 0.273333 6.9 0.18C7.00667 0.166666 7.10667 0.159999 7.2 0.159999C7.29333 0.159999 7.38667 0.159999 7.48 0.159999C8.14667 0.159999 8.74 0.246666 9.26 0.419999C9.78 0.579999 10.3067 0.766666 10.84 0.979999C11.8 1.36667 12.6 1.94 13.24 2.7C13.88 3.46 14.36 4.35333 14.68 5.38C15 6.39333 15.16 7.48 15.16 8.64C15.16 9.72 15.0333 10.7533 14.78 11.74C14.5267 12.7267 14.14 13.62 13.62 14.42C13.1133 15.2067 12.4667 15.8467 11.68 16.34C10.9067 16.8467 9.99333 17.1467 8.94 17.24ZM6.92 16.04C7.94667 15.96 8.84 15.68 9.6 15.2C10.36 14.7067 10.9867 14.0733 11.48 13.3C11.9733 12.5133 12.34 11.64 12.58 10.68C12.8333 9.70667 12.96 8.69333 12.96 7.64C12.96 6.68 12.8467 5.76667 12.62 4.9C12.4067 4.02 12.0733 3.24 11.62 2.56C11.1667 1.88 10.5933 1.34667 9.9 0.959999C9.22 0.559999 8.41333 0.359999 7.48 0.359999C7.38667 0.359999 7.29333 0.359999 7.2 0.359999C7.12 0.359999 7.02667 0.366666 6.92 0.38C5.89333 0.473333 5 0.766666 4.24 1.26C3.48 1.74 2.84667 2.37333 2.34 3.16C1.83333 3.93333 1.45333 4.8 1.2 5.76C0.96 6.70667 0.84 7.69333 0.84 8.72C0.84 9.72 0.953333 10.6667 1.18 11.56C1.40667 12.44 1.74667 13.22 2.2 13.9C2.65333 14.5667 3.22667 15.0933 3.92 15.48C4.61333 15.8667 5.42 16.06 6.34 16.06C6.44667 16.06 6.54667 16.06 6.64 16.06C6.73333 16.06 6.82667 16.0533 6.92 16.04ZM6.92 12.94C6.86667 12.94 6.81333 12.9467 6.76 12.96C6.72 12.96 6.67333 12.96 6.62 12.96C5.82 12.96 5.18667 12.6133 4.72 11.92C4.26667 11.2267 4.04 10.0667 4.04 8.44C4.04 7.28 4.16667 6.34667 4.42 5.64C4.67333 4.93333 5.02 4.41333 5.46 4.08C5.9 3.73333 6.38667 3.54 6.92 3.5C6.97333 3.5 7.02667 3.5 7.08 3.5C7.13333 3.48667 7.18667 3.48 7.24 3.48C8.02667 3.48 8.64 3.82 9.08 4.5C9.52 5.16667 9.74 6.31333 9.74 7.94C9.74 9.67333 9.47333 10.9267 8.94 11.7C8.42 12.46 7.74667 12.8733 6.92 12.94ZM6.86 12.74C7.64667 12.6733 8.28667 12.2733 8.78 11.54C9.28667 10.8067 9.54 9.60667 9.54 7.94C9.54 7.18 9.49333 6.53333 9.4 6C9.30667 5.46667 9.16667 5.03333 8.98 4.7C8.91333 4.68667 8.84667 4.68 8.78 4.68C8.71333 4.66667 8.64667 4.66 8.58 4.66C7.79333 4.66 7.20667 5.07333 6.82 5.9C6.43333 6.71333 6.24 7.89333 6.24 9.44C6.24 10.2133 6.29333 10.8733 6.4 11.42C6.50667 11.9533 6.66 12.3933 6.86 12.74Z"
      ></path>
    </svg>
  </span>
  <span class="a">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 15 18"
      height="18"
      width="15"
      class="letter"
    >
      <path
        fill="black"
        d="M9.28 15.76L8.54 13.38L6.96 13.52L5.98 17.02L2.58 17.32L0.58 16.32L4.96 0.699999L8.26 0.419999L10.26 1.42L14.72 16.48L11.28 16.76L9.28 15.76ZM5.12 0.899999L0.88 16.08L3.8 15.84L4.8 12.34L8.36 12.02L9.42 15.56L12.44 15.3L8.1 0.64L5.12 0.899999ZM5.5 9.42C5.75333 8.59333 5.96 7.80667 6.12 7.06C6.29333 6.31333 6.44 5.56667 6.56 4.82H6.64C6.74667 5.55333 6.88 6.27333 7.04 6.98C7.21333 7.67333 7.42 8.42 7.66 9.22L5.5 9.42Z"
      ></path>
    </svg>
  </span>
  <span class="d">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 14 18"
      height="18"
      width="14"
      class="letter"
    >
      <path
        fill="black"
        d="M0.28 16.24V1.04L4.44 0.679999C4.61333 0.666666 4.78 0.66 4.94 0.66C5.1 0.646666 5.24667 0.64 5.38 0.64C6.11333 0.64 6.76667 0.726666 7.34 0.899999C7.92667 1.07333 8.56667 1.32667 9.26 1.66C10.1933 2.08667 10.9533 2.61333 11.54 3.24C12.1267 3.85333 12.56 4.61333 12.84 5.52C13.12 6.41333 13.26 7.50667 13.26 8.8C13.26 10.4933 12.9733 11.92 12.4 13.08C11.84 14.24 11.0667 15.1333 10.08 15.76C9.09333 16.3733 7.95333 16.74 6.66 16.86L2.28 17.24L0.28 16.24ZM4.64 15.68C5.89333 15.5733 7 15.2133 7.96 14.6C8.93333 13.9867 9.69333 13.1133 10.24 11.98C10.7867 10.8467 11.06 9.45333 11.06 7.8C11.06 5.53333 10.5733 3.80667 9.6 2.62C8.64 1.43333 7.21333 0.84 5.32 0.84C5.18667 0.84 5.04667 0.846666 4.9 0.859999C4.75333 0.859999 4.60667 0.866666 4.46 0.879999L0.48 1.22V16.02L4.64 15.68ZM3.5 3.9L4.08 3.86C4.22667 3.84667 4.36 3.84 4.48 3.84C4.61333 3.82667 4.74667 3.82 4.88 3.82C5.57333 3.82 6.14 3.94667 6.58 4.2C7.03333 4.45333 7.36667 4.88667 7.58 5.5C7.80667 6.11333 7.92 6.97333 7.92 8.08C7.92 9.65333 7.59333 10.8067 6.94 11.54C6.28667 12.26 5.4 12.6667 4.28 12.76L3.5 12.82V3.9ZM5.7 12.2C6.38 11.9067 6.88667 11.4333 7.22 10.78C7.55333 10.1133 7.72 9.21333 7.72 8.08C7.72 6.66667 7.52 5.65333 7.12 5.04C7.06667 5.02667 7.01333 5.02 6.96 5.02C6.90667 5.02 6.85333 5.02 6.8 5.02C6.68 5.02 6.56 5.02667 6.44 5.04C6.33333 5.04 6.22 5.04667 6.1 5.06L5.7 5.08V12.2Z"
      ></path>
    </svg>
  </span>
  <span class="ispan">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 6 17"
      height="18"
      width="6"
      class="letter i"
    >
      <path
        fill="black"
        d="M0.38 15.96V0.76L3.86 0.439999L5.86 1.44V16.64L2.38 16.94L0.38 15.96ZM0.58 0.94V15.74L3.66 15.46V0.66L0.58 0.94Z"
      ></path>
    </svg>
  </span>
  <span class="n">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 13 18"
      height="18"
      width="13"
      class="letter"
    >
      <path
        fill="black"
        d="M7.22 15.82L5.72 12.44V16.92L2.28 17.22L0.28 16.22V1.02L3.52 0.74L5.52 1.74L7 4.94V0.64L10.48 0.319999L12.48 1.32V16.54L9.22 16.82L7.22 15.82ZM7.2 0.819999V6.42C7.2 6.56667 7.20667 6.80667 7.22 7.14C7.23333 7.46 7.24667 7.8 7.26 8.16C7.28667 8.50667 7.30667 8.80667 7.32 9.06C7.33333 9.3 7.34 9.42 7.34 9.42L7.28 9.46C7.28 9.46 7.26 9.38667 7.22 9.24C7.19333 9.09333 7.14667 8.92 7.08 8.72C7.01333 8.50667 6.94 8.31333 6.86 8.14L3.4 0.959999L0.48 1.2V16L3.52 15.76V10.52C3.52 10.36 3.51333 10.0867 3.5 9.7C3.48667 9.31333 3.47333 8.90667 3.46 8.48C3.46 8.05333 3.45333 7.69333 3.44 7.4C3.42667 7.09333 3.42 6.94 3.42 6.94L3.48 6.92C3.48 6.92 3.51333 7.05333 3.58 7.32C3.66 7.57333 3.76667 7.84 3.9 8.12L7.4 15.62L10.28 15.36V0.539999L7.2 0.819999Z"
      ></path>
    </svg>
  </span>
  <span class="g">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 15 18"
      height="18"
      width="15"
      class="letter"
    >
      <path
        fill="black"
        d="M14.04 13.72C13.64 14.6533 12.9933 15.44 12.1 16.08C11.22 16.72 10.1333 17.0933 8.84 17.2C8.72 17.2133 8.6 17.22 8.48 17.22C8.36 17.22 8.24 17.22 8.12 17.22C7.12 17.22 6.16667 17.0467 5.26 16.7C4.36667 16.3533 3.57333 15.8333 2.88 15.14C2.18667 14.4333 1.64 13.54 1.24 12.46C0.84 11.38 0.64 10.1 0.64 8.62C0.64 7.48667 0.78 6.42667 1.06 5.44C1.34 4.44 1.74667 3.55333 2.28 2.78C2.82667 2.00667 3.48667 1.38667 4.26 0.92C5.03333 0.453333 5.90667 0.179999 6.88 0.0999997C6.96 0.0866657 7.04 0.0799987 7.12 0.0799987C7.2 0.0799987 7.28 0.0799987 7.36 0.0799987C8.33333 0.0799987 9.28 0.299999 10.2 0.74C11.1333 1.18 11.9467 1.78 12.64 2.54C13.3467 3.3 13.8467 4.16 14.14 5.12L11.76 6.46L12.04 6.44L14.04 7.44V13.72ZM5.9 7.16V10L8.98 9.74V11.46C8.80667 11.8067 8.52667 12.1067 8.14 12.36C7.76667 12.6 7.37333 12.7333 6.96 12.76C6.90667 12.7733 6.84667 12.78 6.78 12.78C6.72667 12.78 6.66667 12.78 6.6 12.78C5.73333 12.78 5.08 12.4333 4.64 11.74C4.2 11.0467 3.98 9.92 3.98 8.36C3.98 6.94667 4.20667 5.82 4.66 4.98C5.11333 4.14 5.84 3.68 6.84 3.6H7.06C7.60667 3.6 8.07333 3.76 8.46 4.08C8.86 4.4 9.14667 4.86667 9.32 5.48L11.9 4.02C11.6733 3.38 11.36 2.78 10.96 2.22C10.5733 1.64667 10.0867 1.18 9.5 0.819999C8.91333 0.459999 8.2 0.28 7.36 0.28C7.29333 0.28 7.22 0.28 7.14 0.28C7.06 0.28 6.98 0.286666 6.9 0.299999C5.63333 0.406666 4.54667 0.846666 3.64 1.62C2.73333 2.38 2.04 3.37333 1.56 4.6C1.08 5.81333 0.84 7.15333 0.84 8.62C0.84 10.14 1.06 11.4533 1.5 12.56C1.94 13.6667 2.56667 14.52 3.38 15.12C4.19333 15.72 5.16 16.02 6.28 16.02C6.37333 16.02 6.46 16.02 6.54 16.02C6.63333 16.02 6.72667 16.0133 6.82 16C8.07333 15.8933 9.12667 15.54 9.98 14.94C10.8467 14.3267 11.4733 13.5733 11.86 12.68V6.66L5.9 7.16ZM9.2 5.78C9.14667 5.59333 9.08667 5.42 9.02 5.26C8.95333 5.08667 8.88 4.93333 8.8 4.8C8.2 4.85333 7.70667 5.06667 7.32 5.44C6.94667 5.8 6.66667 6.29333 6.48 6.92L10.8 6.56L9.2 5.78ZM7.8 11.26L6.24 10.46C6.26667 10.9933 6.32 11.4133 6.4 11.72C6.49333 12.0133 6.62667 12.3 6.8 12.58C6.84 12.5667 6.88667 12.56 6.94 12.56C7.28667 12.5333 7.63333 12.4267 7.98 12.24C8.32667 12.04 8.59333 11.8067 8.78 11.54V11.14L7.8 11.26Z"
      ></path>
    </svg>
  </span>
</div>

<style>
/* From Uiverse.io by Subaashbala  - Tags: loader */
/* Prior to using this loader, please ensure that you have set a background image or background color, as the text is transparent and not designed with a solid color. */
.loader {
  --ANIMATION-DELAY-MULTIPLIER: 70ms;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.loader span {
  padding: 0;
  margin: 0;
  letter-spacing: -5rem;
  animation-delay: 0s;
  transform: translateY(4rem);
  animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
}
.loader .l {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 0);
}
.loader .o {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 1);
}
.loader .a {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 2);
}
.loader .d {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 3);
}
.loader .ispan {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 4);
}
.loader .n {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 5);
}
.loader .g {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 6);
}
.letter {
  width: fit-content;
  height: 3rem;
}
.i {
  margin-inline: 5px;
}
@keyframes hideAndSeek {
  0% {
    transform: translateY(4rem);
  }
  100% {
    transform: translateY(0rem);
  }
}

</style>
    

================================================
FILE: loaders/Subaashbala_itchy-husky-37.html
================================================
<div class="loader">
  <div class="shape">
    <div class="numRowContainer">
      <div class="numRow">0 1 0 1 1 0 0 1</div>
      <div class="numRow">0 1 0 1 1 0 0 1</div>
      <div class="numRow">0 1 0 1 1 0 0 1</div>
      <div class="numRow">0 1 0 1 1 0 0 1</div>
      <div class="numRow">0 1 0 1 1 0 0 1</div>
      <div class="numRow">0 1 0 1 1 0 0 1</div>
      <div class="numRow">0 1 0 1 1 0 0 1</div>
      <div class="numRow">0 1 0 1 1 0 0 1</div>
      <div class="numRow">0 1 0 1 1 0 0 1</div>
      <div class="numRow">0 1 0 1 1 0 0 1</div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Subaashbala  - Tags: animation, minimalist, loader, rotate, loading animation */
.shape {
  --BG-COLOR: #59d5e0;
  --OUTLINE-COLOR: #068b97;
  --OUTLINE-SIZE: 15px;
  width: 7rem;
  aspect-ratio: 1;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  outline: var(--OUTLINE-SIZE) solid var(--OUTLINE-COLOR);
  background: var(--BG-COLOR);
  box-shadow: 0px 0px calc(var(--OUTLINE-SIZE) + 25px) rgba(0, 0, 0, 0.438);
  animation: morph 2.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.numRowContainer {
  height: fit-content;
  animation: infiniteScroll 2.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
@keyframes infiniteScroll {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, -50%);
  }
}
@keyframes morph {
  50% {
    --BG-COLOR: PINK;
    --OUTLINE-COLOR: #ff407d;
    transform: rotate(150deg);
    border-radius: 20%;
  }
  100% {
    transform: rotate(360deg);
  }
}

</style>
    

================================================
FILE: loaders/Subaashbala_massive-moth-6.html
================================================
<div class="loaderContainer">
  <div class="particleContainer">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="particleContainer">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<style>
/* From Uiverse.io by Subaashbala  - Tags: loader, animated, loading animation */
.loaderContainer {
  display: flex;
  width: 9em;
  overflow: hidden;
  gap: 0.5em;
}
.particleContainer {
  display: flex;
  gap: 0.5em;
  animation: slide 2000ms linear infinite;
}
.particleContainer div {
  width: 2.5em;
  aspect-ratio: 1;
  border-radius: 5px;
  background: whitesmoke;
  transform-origin: left bottom;
  animation: squeeze 750ms ease-in-out infinite;
}
.particleContainer div:nth-child(2) {
  animation-delay: 50ms;
}
.particleContainer div:last-child {
  animation-delay: 100ms;
}
@keyframes squeeze {
  0% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(0.75);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: sclae(1);
  }
}
@keyframes slide {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(calc(-50% + 1.25em));
  }
}

</style>
    

================================================
FILE: loaders/Subaashbala_polite-newt-9.html
================================================
<div class="loader">
  <div class="modelViewPort">
    <div class="eva">
      <div class="head">
        <div class="eyeChamber">
          <div class="eye"></div>
          <div class="eye"></div>
        </div>
      </div>
      <div class="body">
        <div class="hand"></div>
        <div class="hand"></div>
        <div class="scannerThing"></div>
        <div class="scannerOrigin"></div>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Subaashbala  - Tags: loader, animated, loading animation, 3d loader */
.modelViewPort {
  /* The black circle background around the model*/
  perspective: 1000px;
  width: 20rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow: hidden;
}
.eva {
  --EVA-ROTATION-DURATION: 4s;
  transform-style: preserve-3d;
  animation: rotateRight var(--EVA-ROTATION-DURATION) linear infinite alternate;
}
.head {
  position: relative;
  width: 6rem;
  height: 4rem;
  border-radius: 48% 53% 45% 55% / 79% 79% 20% 22%;
  background: linear-gradient(to right, white 45%, gray);
}
.eyeChamber {
  width: 4.5rem;
  height: 2.75rem;
  position: relative;
  left: 50%;
  top: 55%;
  border-radius: 45% 53% 45% 48% / 62% 59% 35% 34%;
  background-color: #0c203c;
  box-shadow: 0px 0px 2px 2px white, inset 0px 0px 0px 2px black;
  transform: translate(-50%, -50%);
  animation: moveRight var(--EVA-ROTATION-DURATION) linear infinite alternate;
}
.eye {
  width: 1.2rem;
  height: 1.5rem;
  position: absolute;
  border-radius: 50%;
}
.eye:first-child {
  left: 12px;
  top: 50%;
  background: repeating-linear-gradient(
    65deg,
    #9bdaeb 0px,
    #9bdaeb 1px,
    white 2px
  );
  box-shadow: inset 0px 0px 5px #04b8d5, 0px 0px 15px 1px #0bdaeb;
  transform: translate(0, -50%) rotate(-65deg);
}
.eye:nth-child(2) {
  right: 12px;
  top: 50%;
  background: repeating-linear-gradient(
    -65deg,
    #9bdaeb 0px,
    #9bdaeb 1px,
    white 2px
  );
  box-shadow: inset 0px 0px 5px #04b8d5, 0px 0px 15px 1px #0bdaeb;
  transform: translate(0, -50%) rotate(65deg);
}
.body {
  width: 6rem;
  height: 8rem;
  position: relative;
  margin-block-start: 0.25rem;
  border-radius: 47% 53% 45% 55% / 12% 9% 90% 88%;
  background: linear-gradient(to right, white 35%, gray);
}
.hand {
  position: absolute;
  left: -1.5rem;
  top: 0.75rem;
  width: 2rem;
  height: 5.5rem;
  border-radius: 40%;
  background: linear-gradient(to left, white 15%, gray);
  box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.25);
  transform: rotateY(55deg) rotateZ(10deg);
}
.hand:first-child {
  animation: compensateRotation var(--EVA-ROTATION-DURATION) linear infinite
    alternate;
}
.hand:nth-child(2) {
  left: 92%;
  background: linear-gradient(to right, white 15%, gray);
  transform: rotateY(55deg) rotateZ(-10deg);
  animation: compensateRotationRight var(--EVA-ROTATION-DURATION) linear
    infinite alternate;
}
.scannerThing {
  width: 0;
  height: 0;
  position: absolute;
  left: 60%;
  top: 10%;
  border-top: 180px solid #9bdaeb;
  border-left: 250px solid transparent;
  border-right: 250px solid transparent;
  transform-origin: top left;
  mask: linear-gradient(to right, white, transparent 35%);
  animation: glow 2s cubic-bezier(0.86, 0, 0.07, 1) infinite;
}
.scannerOrigin {
  position: absolute;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  left: 60%;
  top: 10%;
  background: #9bdaeb;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5);
  animation: moveRight var(--EVA-ROTATION-DURATION) linear infinite;
}
@keyframes rotateRight {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(25deg);
  }
}
@keyframes moveRight {
  from {
    transform: translate(-50%, -50%);
  }
  to {
    transform: translate(-40%, -50%);
  }
}
@keyframes compensateRotation {
  from {
    transform: rotateY(55deg) rotateZ(10deg);
  }
  to {
    transform: rotatey(30deg) rotateZ(10deg);
  }
}
@keyframes compensateRotationRight {
  from {
    transform: rotateY(55deg) rotateZ(-10deg);
  }
  to {
    transform: rotateY(70deg) rotateZ(-10deg);
  }
}
@keyframes glow {
  from {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  45% {
    transform: rotate(-25deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    opacity: 0;
  }
}

</style>
    

================================================
FILE: loaders/Subaashbala_red-baboon-28.html
================================================
<div class="loader">
  <span>&lt;</span>
  <span>LOADING</span>
  <span>/&gt;</span>
</div>

<style>
/* From Uiverse.io by Subaashbala  - Tags: loader, smooth, loading animation */
.loader {
  font-size: 2em;
  font-weight: 900;
}
.loader > * {
  color: black;
}
.loader span {
  display: inline-flex;
}
.loader span:nth-child(2) {
  letter-spacing: -1em;
  overflow: hidden;
  animation: reveal 1500ms cubic-bezier(0.645, 0.045, 0.355, 1) infinite
    alternate;
}
@keyframes reveal {
  0%,
  100% {
    opacity: 0.5;
    letter-spacing: -1em;
  }
  50% {
    opacity: 1;
    letter-spacing: 0em;
  }
}

</style>
    

================================================
FILE: loaders/Subaashbala_tender-baboon-47.html
================================================
<div class="loader">
  <svg
    width="115"
    height="81"
    viewBox="0 0 115 81"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    id="bird"
  >
    <rect x="41" y="47" width="20" height="7" fill="#FFEB3B"></rect>
    <rect x="35" y="67" width="33" height="7" fill="#FFC107"></rect>
    <rect x="21" y="54" width="40" height="14" fill="#FFC107"></rect>
    <rect x="48" y="40" width="20" height="7" fill="#FFEB3B"></rect>
    <rect x="48" y="33" width="20" height="7" fill="#FFEB3B"></rect>
    <rect x="41" y="27" width="20" height="7" fill="#FFEB3B"></rect>
    <rect x="34" y="20" width="20" height="7" fill="#FFEB3B"></rect>
    <rect x="28" y="14" width="20" height="7" fill="#FFEB3B"></rect>
    <rect x="40" y="7" width="21" height="7" fill="#FFEB3B"></rect>
    <rect x="41" y="34" width="7" height="13" fill="black"></rect>
    <rect x="21" y="14" width="7" height="7" fill="black"></rect>
    <rect x="41" width="40" height="7" fill="black"></rect>
    <rect x="28" y="7" width="13" height="7" fill="black"></rect>
    <rect x="7" y="27" width="34" height="27" fill="#FFFFCC"></rect>
    <rect x="61" y="12" width="34" height="28" fill="white"></rect>
    <rect x="7" y="20" width="27" height="7" fill="black"></rect>
    <rect x="34" y="27" width="7" height="7" fill="black"></rect>
    <rect x="7" y="40" width="7" height="7" fill="#FFEB3B"></rect>
    <rect x="34" y="40" width="7" height="7" fill="#FFEB3B"></rect>
    <rect x="48" y="14" width="7" height="7" fill="#FFEB3B"></rect>
    <rect x="7" y="47" width="7" height="7" fill="black"></rect>
    <rect x="14" y="47" width="20" height="7" fill="#FFEB3B"></rect>
    <rect
      y="47"
      width="20"
      height="7"
      transform="rotate(-90 0 47)"
      fill="black"
    ></rect>
    <rect x="34" y="47" width="7" height="7" fill="black"></rect>
    <rect x="88" y="13" width="7" height="7" fill="black"></rect>
    <rect x="81" y="6" width="7" height="7" fill="black"></rect>
    <rect
      x="95"
      y="40"
      width="20"
      height="7"
      transform="rotate(-90 95 40)"
      fill="black"
    ></rect>
    <rect
      x="81"
      y="33"
      width="13"
      height="7"
      transform="rotate(-90 81 33)"
      fill="black"
    ></rect>
    <rect
      x="81"
      y="13"
      width="13"
      height="7"
      transform="rotate(-180 81 13)"
      fill="white"
    ></rect>
    <rect x="61" y="33" width="7" height="7" fill="black"></rect>
    <rect x="61" y="6" width="7" height="7" fill="black"></rect>
    <rect
      x="54"
      y="33"
      width="20"
      height="7"
      transform="rotate(-90 54 33)"
      fill="black"
    ></rect>
    <rect x="14" y="60" width="7" height="7" fill="black"></rect>
    <rect x="21" y="67" width="14" height="7" fill="black"></rect>
    <rect x="35" y="74" width="33" height="7" fill="black"></rect>
    <rect x="14" y="54" width="20" height="7" fill="black"></rect>
    <rect x="108" y="47" width="7" height="7" fill="black"></rect>
    <rect x="68" y="53" width="33" height="7" fill="black"></rect>
    <rect x="68" y="46" width="40" height="7" fill="#F44336"></rect>
    <rect x="65" y="60" width="40" height="7" fill="#F44336"></rect>
    <rect
      x="101"
      y="67"
      width="14"
      height="7"
      transform="rotate(-90 101 67)"
      fill="black"
    ></rect>
    <rect x="61" y="46" width="7" height="7" fill="black"></rect>
    <rect x="68" y="40" width="40" height="7" fill="black"></rect>
    <rect x="68" y="67" width="33" height="7" fill="black"></rect>
    <rect x="54" y="53" width="7" height="7" fill="black"></rect>
    <rect x="61" y="53" width="7" height="7" fill="#F44336"></rect>
    <rect x="61" y="60" width="7" height="7" fill="black"></rect>
  </svg>

  <div class="sceneTop">
    <div class="flappyBirdScene">
      <div class="birdObs1" id="birdObstacle"></div>
      <div class="birdObs2" id="birdObstacle"></div>
      <div class="birdObs3" id="birdObstacle"></div>
      <div class="birdObs4" id="birdObstacle"></div>
    </div>
    <div class="flappyBirdScene">
      <div class="birdObs1" id="birdObstacle"></div>
      <div class="birdObs2" id="birdObstacle"></div>
      <div class="birdObs3" id="birdObstacle"></div>
      <div class="birdObs4" id="birdObstacle"></div>
    </div>
  </div>
  <div class="sceneBottom">
    <div class="flappyBirdSceneBottom">
      <div class="birdObs1" id="birdObstacle"></div>
      <div class="birdObs2" id="birdObstacle"></div>
      <div class="birdObs3" id="birdObstacle"></div>
      <div class="birdObs4" id="birdObstacle"></div>
    </div>
    <div class="flappyBirdSceneBottom">
      <div class="birdObs1" id="birdObstacle"></div>
      <div class="birdObs2" id="birdObstacle"></div>
      <div class="birdObs3" id="birdObstacle"></div>
      <div class="birdObs4" id="birdObstacle"></div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Subaashbala  - Tags: loader, game, animated, bounce animation */
.loader {
  position: relative;
  width: 18rem; /* Reposition the obstacles and the bird if the width is changed */
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(to bottom, #6ccee7 60%, white);
}
#bird {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-80%, -50%);
  width: 3rem;
  height: auto;
  animation: flap 500ms linear infinite;
}
.flappyBirdScene,
.flappyBirdSceneBottom {
  display: flex;
  width: 20rem;
  top: -23%;
  position: relative;
}
.sceneTop {
  display: flex;
  width: fit-content;
  animation: flow 5s linear infinite;
}
.sceneBottom {
  display: flex;
  width: fit-content;
  animation: flowBottom 5s linear infinite;
}
#birdObstacle {
  height: 8rem;
  width: 2rem;
  background: linear-gradient(
    to right,
    #9de558 0px,
    #9de558 3px,
    #e7ff8d 3px,
    #e7ff8d 5px,
    #9de858 5px,
    #9de858 10px,
    #74c029 10px,
    #74c029 13px,
    #9de558 13px,
    #9de558 15px,
    #74c029 22px,
    #74c029 28px,
    #59811a 28px,
    #59811a 100%
  );
  border: solid;
  position: relative;
}
.flappyBirdSceneBottom {
  bottom: -25%;
  left: 0;
}
#birdObstacle::after {
  content: "";
  position: absolute;
  width: 135%;
  height: 1.25rem;
  top: 100%;
  left: 50%;
  border: solid;
  transform: translate(-50%, 0);
  background: linear-gradient(
    to right,
    #9de558 0px,
    #9de558 3px,
    #e7ff8d 3px,
    #e7ff8d 5px,
    #9de858 5px,
    #9de858 10px,
    #74c029 10px,
    #74c029 13px,
    #9de558 13px,
    #9de558 15px,
    #74c029 22px,
    #74c029 28px,
    #59811a 28px,
    #59811a 100%
  );
}
.birdObs2 {
  transform: translate(0%, 15%);
  left: 15%;
}
.birdObs3 {
  transform: translate(0, 18%);
  left: 30%;
}
.birdObs4 {
  transform: translate(0, 15%);
  left: 45%;
}
@keyframes flap {
  from {
    transform: translate(-80%, -50%);
  }
  25% {
    transform: translate(-80%, -50%) rotate(-15deg);
  }
  50% {
    transform: translate(-80%, -12%) rotate(5deg);
  }
  100% {
    transform: translate(-80%, -50%);
  }
}
@keyframes flow {
  from {
    transform: translate(0, -43%);
  }
  to {
    transform: translate(-50%, -43%);
  }
}
@keyframes flowBottom {
  from {
    transform: translate(0, 75%) rotateX(180deg);
  }
  to {
    transform: translate(-50%, 75%) rotateX(180deg);
  }
}

</style>
    

================================================
FILE: loaders/Subaashbala_ugly-lizard-47.html
================================================
<div class="loader">
  <div class="clockLoader">
    <div class="clockHand minuteHand"></div>
    <div class="clockHand hourHand"></div>
  </div>
  <div class="decorativeElementContainer">
    <div class="decorativeElement decorativeElement1"></div>
    <div class="decorativeElement decorativeElement2"></div>
  </div>
</div>

<style>
/* From Uiverse.io by Subaashbala  - Tags: glassmorphism, animation, loader, circle loader, box-shadow, loading animation */
.loader {
  position: relative;
  --duration: 1500ms; /* minute hand's rotation time duration */
}
.clockLoader {
  width: 15em;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.25em solid black;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.171);
  backdrop-filter: blur(10px);
  z-index: 100;
  animation: floatEffect 15s linear infinite alternate;
}
.clockLoader::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -65%);
  width: 0.5em;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: black;
}
.clockHand {
  position: absolute;
  background-color: black;
  border-radius: 5em;
  width: 0.25em;
  transform-origin: bottom;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
}
.hourHand {
  height: 20%;
  animation: rotateHand calc(12 * var(--duration)) linear infinite;
}
.minuteHand {
  height: 30%;
  animation: rotateHand var(--duration) linear infinite;
}
.decorativeElementContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  animation: rotate calc(50 * var(--duration)) linear infinite;
  z-index: -1;
  transform: translate(-50%, -50%);
}
.decorativeElement {
  position: relative;
  width: 7em;
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: -1;
}
.decorativeElement1 {
  left: 50% !important;
  background: orangered;
  animation: floatEffect 16ss linear infinite;
}
.decorativeElement2 {
  right: 55%;
  background: hotpink;
}
@keyframes rotateHand {
  to {
    transform: translate(-50%, -100%) rotate(360deg);
  }
}
@keyframes rotate {
  to {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}
@keyframes floatEffect {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(0, 2em);
  }
}

</style>
    

================================================
FILE: loaders/TamaniPhiri_tidy-newt-97.html
================================================
<!-- From Uiverse.io by TamaniPhiri - Tags: loader -->
<div class="flex-col gap-4 w-full flex items-center justify-center">
  <div class="w-28 h-28 border-8 text-blue-400 text-4xl animate-spin border-gray-300 flex items-center justify-center border-t-blue-400 rounded-full">
    <svg viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em" class="animate-ping">
      <path d="M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z"></path>
    </svg>
  </div>
</div>



================================================
FILE: loaders/TechByElijah_ugly-termite-49.html
================================================
<div class="container center">
  <div class="rope center">
    <div class="legs center">
      <div class="boot-l"></div>
      <div class="boot-r"></div>
    </div>
    <div class="costume center">
      <div class="spider">
        <div class="s1 center"></div>
        <div class="s2 center"></div>
        <div class="s3"></div>
        <div class="s4"></div>
      </div>
      <div class="belt center"></div>
      <div class="hand-r"></div>
      <div class="hand-l"></div>
      <div class="neck center"></div>
      <div class="mask center">
        <div class="eye-l"></div>
        <div class="eye-r"></div>
      </div>
      <div class="cover center"></div>
    </div>
</div></div>
<style>
/* From Uiverse.io by TechByElijah - Tags: loader, animated, superhero, webstorm, comicbook, spiderman */
.center {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
}

.container {
  height: 31.25em;
  width: 21.87em;
  margin-top: -325px;
}

.rope {
  height: 13.62em;
  width: 0.15em;
  background-color: #ffffff;
  animation: swing 2s infinite;
}

@keyframes swing {
  50% {
    transform: translateY(-4em);
  }
}

.legs {
  height: 1.12em;
  width: 7.5em;
  background-color: transparent;
  box-shadow: 0 0 0 0.12em #140243, 0 0 0 1.06em #1b1676, 0 0 0 1.18em #140243;
  top: 12.5em;
  border-radius: 3.12em;
}

.boot-l,
.boot-r {
  height: 1.25em;
  width: 2.5em;
  background-color: #e32832;
  position: absolute;
  border: 0.12em solid #140243;
  bottom: 1.12em;
}

.boot-l {
  left: 1em;
}

.boot-r {
  transform: rotateY(180deg);
  left: 3.81em;
}

.boot-l:before,
.boot-r:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 1.12em solid #140243;
  border-left: 1.18em solid transparent;
  bottom: 1.31em;
  left: 1.46em;
}

.boot-l:after,
.boot-r:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 1.12em solid #e32832;
  border-left: 1em solid transparent;
  right: 0;
  top: -0.93em;
}

.costume {
  height: 6.25em;
  width: 5.62em;
  background: linear-gradient(
    to right,
    #1b1676 20%,
    #e32832 20%,
    #e32832 80%,
    #1b1676 80%
  );
  border: 0.12em solid #140243;
  top: 14.68em;
}

.spider {
  height: 1.87em;
  width: 0.93em;
  background-color: #140243;
  border-radius: 45%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: calc(50% + 0.93em);
  left: 50%;
}

.s1,
.s3 {
  height: 7.5em;
  width: 2.5em;
  border-radius: 0 0 1.37em 1.37em;
  border-bottom: 0.12em solid #140243;
  position: absolute;
}

.s2,
.s4 {
  height: 7.5em;
  width: 3.12em;
  border-radius: 0 0 1.56em 1.56em;
  border-bottom: 0.12em solid #140243;
  position: absolute;
}

.s1,
.s2,
.s3,
.s4 {
  left: 50%;
}

.s1 {
  bottom: 1.43em;
}

.s2 {
  bottom: 0.93em;
}

.s3,
.s4 {
  transform: translateX(-50%) rotateX(180deg);
}

.s3 {
  top: 1.43em;
}

.s4 {
  top: 0.93em;
}

.belt {
  height: 0.43em;
  width: 5.87em;
  background-color: #e32832;
  border: 0.12em solid #140243;
  top: -0.12em;
}

.hand-r,
.hand-l {
  height: 8.12em;
  background: linear-gradient(
    #e32832 4.6em,
    #140243 4.6em,
    #140243 4.75em,
    #1b1676 4.75em,
    #1b1676 8.12em
  );
  width: 1.12em;
  border: 0.12em solid #140243;
  border-radius: 1.25em;
  position: absolute;
  transform-origin: bottom;
  bottom: -0.12em;
}

.hand-r {
  right: -0.75em;
  transform: rotate(-22deg);
}

.hand-l {
  left: -0.75em;
  transform: rotate(22deg);
}

.neck {
  height: 0.37em;
  width: 1.25em;
  background-color: #e32832;
  bottom: -0.62em;
  border: 0.12em solid #140243;
}

.mask {
  height: 4.65em;
  width: 4.06em;
  background-color: #e32832;
  border-radius: 50% 50% 50% 50% / 54% 54% 46% 46%;
  border: 0.12em solid #140243;
  top: 6.56em;
}

.eye-l,
.eye-r {
  height: 0.68em;
  width: 1.37em;
  background-color: #ffffff;
  border-radius: 1.37em 1.37em 0 0;
  border: 0.12em solid #140243;
  position: absolute;
  top: 2.1em;
}

.eye-l {
  left: 0.3em;
}

.eye-r {
  right: 0.3em;
}

.cover {
  height: 3.12em;
  width: 0.15em;
  background-color: #ffffff;
  bottom: 8.12em;
}

@media screen and (min-width: 600px) {
  .container {
    font-size: 20px;
  }
}
</style>


================================================
FILE: loaders/TemRevil_green-lion-91.html
================================================
<div class="loading">
  <div class="loading-box">
    <div class="WH color l1"></div>
    <div class="ball color"></div>
    <div class="WH color l2"></div>
  </div>
</div>

<style>
/* From Uiverse.io by TemRevil  - Tags: simple, blue, loading, loader, game, circle loader, effect loader, loading animation */
loading {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-box {
  width: 250px;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.color {
  background-color: #3395ff;
}
.WH {
  width: 10px;
  height: 70px;
  position: absolute;
}

.l1 {
  left: 0;
  animation: l1 4s infinite linear;
}
.l2 {
  right: 0;
  animation: l2 4s infinite linear;
}
.ball {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  animation: ball 4s infinite linear;
}

@keyframes l1 {
  0% {
    top: 0%;
  }
  10% {
    top: -20%;
  }
  20% {
    top: 0%;
  }
  30% {
    top: 40%;
  }
  40% {
    top: 0%;
  }
  50% {
    top: 30%;
  }
  60% {
    top: 40%;
  }
  70% {
    top: 60%;
  }
  80% {
    top: -10%;
  }
  90% {
    top: 10%;
  }
  100% {
    top: 0%;
  }
}
@keyframes l2 {
  0% {
    bottom: 0%;
  }
  10% {
    bottom: -20%;
  }
  20% {
    bottom: 40%;
  }
  30% {
    bottom: 60%;
  }
  40% {
    bottom: 20%;
  }
  50% {
    bottom: 30%;
  }
  60% {
    bottom: 40%;
  }
  70% {
    bottom: 60%;
  }
  80% {
    bottom: -10%;
  }
  90% {
    bottom: 10%;
  }
  100% {
    bottom: 0%;
  }
}
@keyframes ball {
  0% {
    top: 80%;
    left: 96%;
  }
  10% {
    top: 10%;
    left: 3%;
  }
  20% {
    top: 10%;
    left: 90%;
  }
  30% {
    top: 60%;
    left: 3%;
  }
  40% {
    top: 10%;
    left: 90%;
  }
  50% {
    top: 50%;
    left: 3%;
  }
  60% {
    top: 10%;
    left: 90%;
  }
  70% {
    top: 93%;
    left: 3%;
  }
  80% {
    top: 83%;
    left: 90%;
  }
  90% {
    top: 10%;
    left: 3%;
  }
  100% {
    top: 80%;
    left: 90%;
  }
}

</style>
    

================================================
FILE: loaders/TemRevil_little-duck-0.html
================================================
<div class="loading">
  <div class="loading-wide">
    <div class="l1 color"></div>
    <div class="l2 color"></div>
    <div class="e1 color animation-effect-light"></div>
    <div class="e2 color animation-effect-light-d"></div>
    <div class="e3 animation-effect-rot">X</div>
    <div class="e4 color animation-effect-light"></div>
    <div class="e5 color animation-effect-light-d"></div>
    <div class="e6 animation-effect-scale">*</div>
    <div class="e7 color"></div>
    <div class="e8 color"></div>
  </div>
</div>

<style>
/* From Uiverse.io by TemRevil  - Tags: simple, animation, blue, loading, loader, spinner, smooth, space */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-wide {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.color {
  background-color: #3395ff;
}

.l1 {
  width: 15px;
  height: 65px;
  position: absolute;
  animation: move-h 1.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

.l2 {
  width: 15px;
  height: 60px;
  position: absolute;
  transform: rotate(90deg);
  animation: move-v 1.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@keyframes move-h {
  0% {
    top: 0;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    top: 30%;
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
@keyframes move-v {
  0% {
    left: 0;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    left: 45%;
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.animation-effect-light {
  animation: effect 0.2s 0.1s infinite linear;
}
.animation-effect-light-d {
  animation: effect 0.3s 0.2s infinite linear;
}
.animation-effect-rot {
  animation: rot 0.8s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}
.animation-effect-scale {
  animation: scale 0.8s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@keyframes effect {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes scale {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.9;
  }
  100% {
    scale: 1;
  }
}
.e1 {
  width: 1px;
  height: 40px;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 8%;
}
.e2 {
  width: 60px;
  height: 1px;
  opacity: 0.8;
  position: absolute;
  top: 8%;
  left: 0;
}
.e3 {
  position: absolute;
  top: 10%;
  left: 12%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: #3395ff;
}
.e4 {
  width: 1px;
  height: 40px;
  opacity: 0.3;
  position: absolute;
  top: 90%;
  right: 10%;
}
.e5 {
  width: 40px;
  height: 1px;
  opacity: 0.3;
  position: absolute;
  top: 100%;
  right: 0;
}
.e6 {
  position: absolute;
  top: 100%;
  right: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 32px;
  color: #3395ff;
}
.e7 {
  width: 1px;
  height: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotate(45deg);
  animation: height 1s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}
@keyframes height {
  0% {
    bottom: 0%;
    left: 0%;
    height: 0px;
  }
  25% {
    height: 90px;
  }
  50% {
    bottom: 100%;
    left: 100%;
    height: 90px;
  }
  75% {
    height: 0px;
  }
  100% {
    bottom: 0%;
    left: 0%;
    height: 0px;
  }
}
.e8 {
  width: 20px;
  height: 1px;
  position: absolute;
  bottom: 50%;
  left: 0;
  animation: width 1.5s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}
@keyframes width {
  0% {
    left: 0%;
    width: 0px;
  }
  50% {
    left: 100%;
    width: 90px;
  }
  100% {
    left: 0%;
    width: 0px;
  }
}

</style>
    

================================================
FILE: loaders/TemRevil_mean-panda-76.html
================================================
<div class="loading">
  <div class="loading-box">
    <div class="grid">
      <div class="color l1"></div>
      <div class="color l2"></div>
      <div class="color l3"></div>
      <div class="color l4"></div>
      <div class="color l5"></div>
      <div class="color l6"></div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by TemRevil  - Tags:  */
.loading {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-box {
  width: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: relative;
}
.color {
  background-color: #eee;
  border-radius: 5px;
}
.grid {
  width: 100%;
  display: grid;
  grid-template-rows: 120px 120px 120px;
  grid-template-areas:
    "l1 l2 l3"
    "l1 l2 l4"
    "l6 l6 l5";
  gap: 10px;
}

.l1 {
  grid-area: l1;
  animation: Loading 6s 0s infinite linear;
}
.l2 {
  grid-area: l2;
  animation: Loading 5s 1s infinite linear;
}
.l3 {
  grid-area: l3;
  animation: Loading 4s 2s infinite linear;
}
.l4 {
  grid-area: l4;
  animation: Loading 3s 3s infinite linear;
}
.l5 {
  grid-area: l5;
  animation: Loading 2s 4s infinite linear;
}
.l6 {
  grid-area: l6;
  animation: Loading 1s 5s infinite linear;
}

@keyframes Loading {
  0% {
    background-color: #eee;
  }
  50% {
    background-color: #333;
  }
  100% {
    background-color: #eee;
  }
}

@media (max-width: 500px) {
  .loading-box {
    width: 90%;
  }
}
@media (max-width: 400px) {
  .grid {
    grid-template-rows: 80px 80px 80px;
  }
}

</style>
    

================================================
FILE: loaders/TemRevil_rude-moth-53.html
================================================
<div class="loading-box">
  <div class="WH animation color"></div>
  <div class="WH animation color"></div>
  <div class="WH animation color"></div>
</div>

<style>
/* From Uiverse.io by TemRevil  - Tags: simple, action, loading, loader, smooth, code, neon, game */
.loading-box {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.WH {
  width: 20px;
  height: 70px;
}
.color {
  background-color: #ff5100;
}
.animation {
  animation: Loading 1s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes Loading {
  0% {
    height: 0;
  }
  25% {
    height: 70px;
  }
  50% {
    height: 70px;
    transform: rotate(10deg);
  }
  75% {
    height: 70px;
    transform: rotate(0deg);
  }
  100% {
    height: 0;
  }
}

</style>
    

================================================
FILE: loaders/TheAbieza_nasty-vampirebat-71.html
================================================
<div class="container">
    <div class="plate">
        <div class="black">
            <div class="border">
                <div class="white">
                    <div class="center"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="player">
        <div class="rect"></div>
        <div class="circ"></div>
    </div>
</div>
<style>
/* From Uiverse.io by TheAbieza - Tags: flat design, loader, github, rotate, animated, vscode, music, box-shadow */
.container {
  width: 175px;
  height: 175px;
  background-color: #ABC4AA;
  border-radius: 10px;
  position: relative;
  box-shadow: 5px 5px 0 0 #675D50;
}

.plate {
  width: fit-content;
}

.plate .black,
.plate .white,
.plate .center,
.plate .border {
  border-radius: 100%;
}

.container,
.plate .black,
.plate .white,
.plate .border {
  display: flex;
  align-items: center;
  justify-content: center;
}

.plate .black {
  width: 150px;
  height: 150px;
  background-color: #675D50;
  animation: rotation 2s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

.plate .white {
  width: 70px;
  height: 70px;
  background-color: #F3DEBA;
}

.plate .center {
  width: 20px;
  height: 20px;
  background-color: #675D50;
}

.plate .border {
  width: 111px;
  height: 111px;
  border-top: 3px solid #F3DEBA;
  border-bottom: 3px solid #F3DEBA;
  border-left: 3px solid #675D50;
  border-right: 3px solid #675D50;
}

.player {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: fit-content;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: 8px;
  margin-right: 8px;
  rotate: -45deg;
}

.player .circ {
  width: 25px;
  height: 25px;
  background-color: #F3DEBA;
  border-radius: 100%;
  z-index: 1;
}

.player .rect {
  width: 10px;
  height: 55px;
  background-color: #F3DEBA;
  position: absolute;
  bottom: 0;
  margin-bottom: 5px;
}

</style>


================================================
FILE: loaders/TheAbieza_short-swan-12.html
================================================
<div class="container">
  <div class="folder">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
  <div class="title">getting files ready...</div>
</div>
<style>
/* From Uiverse.io by TheAbieza - Tags: flat design, loading, loader, vscode, floating, box-shadow */
.container {
  width: fit-content;
  gap: 10px
}

.folder {
  width: min-content;
  margin: auto;
  animation: float 2s infinite linear;
}

.folder .top {
  background-color: #FF8F56;
  width: 60px;
  height: 12px;
  border-top-right-radius: 10px;
}

.folder .bottom {
  background-color: #FFCE63;
  width: 100px;
  height: 70px;
  box-shadow: 5px 5px 0 0 #283149;
  border-top-right-radius: 8px;
}

.container .title {
  font-size: .9em;
  color: #283149;
  text-align: center;
  margin-top: 15px;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-25px);
  }

  100% {
    transform: translatey(0px);
  }
}


</style>


================================================
FILE: loaders/TimTrayler_chilly-turtle-66.html
================================================
<div class="spinner">
  <span class="spinner-part-0"></span>
  <span class="spinner-part-1"></span>
  <span class="spinner-part-2"></span>
  <span class="spinner-part-3"></span>
  <span class="spinner-part-0"></span>
  <span class="spinner-part-1"></span>
  <span class="spinner-part-2"></span>
  <span class="spinner-part-3"></span>
</div>
<style>
/* From Uiverse.io by TimTrayler - Tags: loader */
.spinner {
 --accent: fuchsia;
 --max-scale: 4;
 --speed: 0.2;
 display: flex;
 gap: 0.3em;
 transform: skew(15deg, 10deg);
}

.spinner span {
 display: block;
 background-color: var(--accent);
 box-shadow: 1px 1px 5px 0.2px var(--accent);
 width: 0.7px;
 height: 0.6em;
}

.spinner .spinner-part-0 {
 animation: load432 calc(1s/var(--speed)) linear infinite;
}

.spinner .spinner-part-1 {
 animation: load432 calc(0.16s/var(--speed)) linear infinite;
}

.spinner .spinner-part-2 {
 animation: load432 calc(0.4s/var(--speed)) linear infinite;
}

.spinner .spinner-part-3 {
 animation: load432 calc(0.5s/var(--speed)) linear infinite;
}

@keyframes load432 {
 50% {
  transform: scaleY(var(--max-scale));
 }
}

</style>


================================================
FILE: loaders/Tsiangana_mighty-grasshopper-37.html
================================================
<div class="loader">
  <svg width="200" height="200">
    <circle
      class="traco"
      cx="100"
      cy="100"
      r="70"
      fill="transparent"
      stroke="#ffe71c"
      stroke-width="9"
      stroke-dasharray="35 20"
      transform="rotate(31 100 100)"
    ></circle>
  </svg>
  <div class="p1"></div>
  <div class="p2"></div>
  <div class="p3"></div>
  <div class="p4"></div>
  <div class="p5"></div>
  <div class="p6"></div>
  <div class="p7"></div>
  <div class="p8"></div>
  <div class="circle">
    <div class="content">
      <div class="eyes">
        <div class="eye-left"></div>
        <div class="eye-right"></div>
      </div>
      <div class="nouse"></div>
      <div class="mouth"></div>
      <div class="teeth">
        <div class="tooth"></div>
        <div class="tooth"></div>
        <div class="tooth"></div>
        <div class="tooth"></div>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Tsiangana  - Tags: animation, loader, loading animation, anime */
.loader {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.loader:before {
  content: "";
  width: 10px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.9);
  position: absolute;
  bottom: -9px;
  animation: shadow046 2s alternate infinite ease;
}
@keyframes shadow046 {
  0% {
    transform: scaleX(1);
  }
  40% {
    transform: scaleX(15);
    opacity: 0.7;
  }
}

.circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}
.loader .p1 {
  height: 20px;
  width: 7px;
  background-color: #ffe71c;
  position: absolute;
  margin-top: -118px;
  margin-left: 3px;
}
.loader .p2 {
  height: 20px;
  width: 7px;
  background-color: #ffe71c;
  position: absolute;
  margin-top: 118px;
  margin-left: 3px;
}

.loader .p3 {
  height: 20px;
  width: 7px;
  background-color: #ffe71c;
  position: absolute;
  transform: rotate(90deg);
  margin-right: -120px;
}
.loader .p4 {
  height: 20px;
  width: 7px;
  background-color: #ffe71c;
  position: absolute;
  transform: rotate(90deg);
  margin-right: 119px;
}
.loader .p5 {
  height: 25px;
  width: 7px;
  background-color: #ffe71c;
  position: absolute;
  margin-top: -84px;
  margin-right: -89px;
  transform: rotate(45deg);
}
.loader .p6 {
  height: 23px;
  width: 7px;
  background-color: #ffe71c;
  position: absolute;
  margin-top: 88px;
  margin-right: 84px;
  transform: rotate(45deg);
}
.loader .p7 {
  height: 23px;
  width: 7px;
  background-color: #ffe71c;
  position: absolute;
  margin-top: -86px;
  margin-right: 80px;
  transform: rotate(-45deg);
}
.loader .p8 {
  height: 23px;
  width: 7px;
  background-color: #ffe71c;
  position: absolute;
  margin-top: 80px;
  margin-right: -83px;
  transform: rotate(-45deg);
}
.circle .traco {
  position: absolute;
  z-index: -99;
}
.loader .content {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #ffe71c;
  overflow: hidden;
}
.content .eyes {
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px auto 0px;
  padding: 3.5px 10px;
}
.eyes .eye-left {
  width: 22px;
  height: 100%;
  background-color: #ffe71c;
  border-radius: 50%;
}
.eyes .eye-right {
  width: 22px;
  height: 100%;
  background-color: #ffe71c;
  border-radius: 50%;
}

.content .nouse {
  margin: -4px auto;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background-color: #ffe71c;
}
.content .mouth {
  margin: 9px auto 0;
  height: 3px;
  width: 100%;
  background-color: #ffe71c;
}
.content .teeth {
  margin: 0 auto;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}
.teeth .tooth {
  height: 100%;
  width: 4px;
  background-color: #ffe71c;
}

</style>
    

================================================
FILE: loaders/Tsiangana_new-owl-29.html
================================================
<div class="loader"> 
      <span class="ani">L</span> 
      <span class="ani">o</span>
      <span class="ani">a</span>
      <span class="ani">d</span> 
      <span class="ani">i</span> 
      <span class="ani">n</span> 
      <span class="ani">g</span>
</div>
<style>
/* From Uiverse.io by Tsiangana - Tags: simple, animation, loading, loader, text animation */
.loader {
  font-family: Roboto, sans-serif;
  font-size: 25px;
  font-weight: 600;
}

.ani:nth-child(1) {
  animation: ani1 2.1s ease-in-out 14s infinite;
}

@keyframes ani1 {
  50% {
    font-size: 40px;
  }
}

.ani:nth-child(2) {
  animation: ani2 2.1s ease-in-out 12s infinite;
}

@keyframes ani2 {
  50% {
    font-size: 40px;
  }
}

.ani:nth-child(3) {
  animation: ani3 2.1s ease-in-out 10s infinite;
}

@keyframes ani3 {
  50% {
    font-size: 40px;
  }
}

.ani:nth-child(4) {
  animation: ani4 2.1s ease-in-out 8s infinite;
}

@keyframes ani4 {
  50% {
    font-size: 40px;
  }
}

.ani:nth-child(5) {
  animation: ani5 2.1s ease-in-out 6s infinite;
}

@keyframes ani5 {
  50% {
    font-size: 40px;
  }
}

.ani:nth-child(6) {
  animation: ani6 2.1s ease-in-out 4s infinite;
}

@keyframes ani6 {
  50% {
    font-size: 40px;
  }
}

.ani:nth-child(7) {
  animation: ani7 2.1s ease-in-out 2s infinite;
}

@keyframes ani7 {
  50% {
    font-size: 40px;
  }
}
</style>


================================================
FILE: loaders/Tsiangana_purple-fly-11.html
================================================
<div class="loader">
  <svg
    viewBox="0 0 16 16"
    class="light bi bi-lightning-charge-fill"
    fill="currentColor"
    height="28"
    width="28"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"
    ></path>
  </svg>
</div>

<style>
/* From Uiverse.io by Tsiangana  - Tags: animation, loader, animated, creative, loading animation */
.light {
  position: absolute;
  left: 22px;
  fill: rgba(37, 37, 37, 0.774);
}

.loader {
  width: 80px;
  height: 40px;
  border: 2px solid #22f49e;
  border-right-color: transparent;
  padding: 3px;
  background: repeating-linear-gradient(90deg, #22f49e 0 10px, #0000 0 15px)
    left/0% 100% no-repeat content-box content-box;
  position: relative;
  animation: p5 2s infinite steps(6);
}
.loader::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 100%;
  width: 10px;
  background: linear-gradient(
        #0000 calc(50% - 7px),
        #22f49e 0 calc(50% - 5px),
        #0000 0 calc(50% + 5px),
        #22f49e 0 calc(50% + 7px),
        #0000 0
      )
      left / 100% 100%,
    linear-gradient(#22f49e calc(50% - 5px), #0000 0 calc(50% + 5px), #22f49e 0)
      left / 2px 100%,
    linear-gradient(#0000 calc(50% - 5px), #22f49e 0 calc(50% + 5px), #0000 0)
      right/2px 100%;
  background-repeat: no-repeat;
}
@keyframes p5 {
  100% {
    background-size: 120% 100%;
  }
}

</style>
    

================================================
FILE: loaders/Tsiangana_tall-duck-28.html
================================================

<div class="dot-spinner">
    <div class="dot-spinner__dot"></div>
    <div class="dot-spinner__dot"></div>
    <div class="dot-spinner__dot"></div>
    <div class="dot-spinner__dot"></div>
    <div class="dot-spinner__dot"></div>
    <div class="dot-spinner__dot"></div>
    <div class="dot-spinner__dot"></div>
    <div class="dot-spinner__dot"></div>
</div>
<style>
/* From Uiverse.io by Tsiangana - Tags: simple, loader, space */
.dot-spinner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  --uib-speed: 0.9s;
  height: 2.8rem;
  width: 2.8rem;
  /*animation: float 3s linear infinite;*/
}

@keyframes float {
  0% {
    transform: rotate(0deg) translate(100px) rotate(0deg);
  }

  100% {
    transform: rotate(360deg) translate(100px) rotate(-360deg);
  }
}

.dot-spinner__dot::before {
  content: '';
  height: 20%;
  width: 20%;
  border-radius: 50%;
  background-color: #fff;
  filter: drop-shadow(0 0 10px rgb(95, 150, 202));
  box-shadow: -6px -6px 11px #c1c1c1,
             6px 6px 11px #ffffff;
  transform: scale(0);
  opacity: 0.5;
  animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;
  box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
}

.dot-spinner__dot {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
}

.dot-spinner__dot:nth-child(2) {
  transform: rotate(45deg);
}

.dot-spinner__dot:nth-child(2)::before {
  animation-delay: calc(var(--uib-speed) * -0.875);
}

.dot-spinner__dot:nth-child(3) {
  transform: rotate(90deg);
}

.dot-spinner__dot:nth-child(3)::before {
  animation-delay: calc(var(--uib-speed) * -0.75);
}

.dot-spinner__dot:nth-child(4) {
  transform: rotate(135deg);
}

.dot-spinner__dot:nth-child(4)::before {
  animation-delay: calc(var(--uib-speed) * -0.625);
}

.dot-spinner__dot:nth-child(5) {
  transform: rotate(180deg);
}

.dot-spinner__dot:nth-child(5)::before {
  animation-delay: calc(var(--uib-speed) * -0.5);
}

.dot-spinner__dot:nth-child(6) {
  transform: rotate(225deg);
}

.dot-spinner__dot:nth-child(6)::before {
  animation-delay: calc(var(--uib-speed) * -0.375);
}

.dot-spinner__dot:nth-child(7) {
  transform: rotate(270deg);
}

.dot-spinner__dot:nth-child(7)::before {
  animation-delay: calc(var(--uib-speed) * -0.25);
}

.dot-spinner__dot:nth-child(8) {
  transform: rotate(315deg);
}

.dot-spinner__dot:nth-child(8)::before {
  animation-delay: calc(var(--uib-speed) * -0.125);
}

@keyframes pulse0112 {
  0%,
  100% {
    transform: scale(0);
    opacity: 0.5;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>


================================================
FILE: loaders/Uncannypotato69_dull-wolverine-48.html
================================================
<div class="textWrapper">
  <p class="text">Loading...</p>
  <div class="invertbox"></div>
</div>

<style>
/* From Uiverse.io by Uncannypotato69  - Tags: simple, animation, white, black, loading, loader, text animation, css */
.textWrapper {
  height: fit-content;
  min-width: 3rem;
  width: fit-content;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.25ch;
  position: relative;
  z-index: 0;
  color: white;
}

.invertbox {
  position: absolute;
  height: 100%;
  aspect-ratio: 1/1;
  left: 0;
  top: 0;
  border-radius: 20%;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: invert(100%);
  animation: move 2s ease-in-out infinite;
}

@keyframes move {
  50% {
    left: calc(100% - 3rem);
  }
}

</style>
    

================================================
FILE: loaders/Uncannypotato69_shaggy-emu-40.html
================================================
<div class="wrapper">
  <span class="letter letter1">L</span>
  <span class="letter letter2">o</span>
  <span class="letter letter3">a</span>
  <span class="letter letter4">d</span>
  <span class="letter letter5">i</span>
  <span class="letter letter6">n</span>
  <span class="letter letter7">g</span>
  <span class="letter letter8">.</span>
  <span class="letter letter9">.</span>
  <span class="letter letter10">.</span>
</div>

<style>
/* From Uiverse.io by Uncannypotato69  - Tags: simple, animation, loading, loader, text, css, loading animation */
.wrapper {
  min-height: 3rem;
  min-width: 14rem;
  font-size: 2rem;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 30%,
    rgba(0, 0, 0, 1) 70%,
    rgba(0, 0, 0, 0)
  );
  font-family: monospace;
}

.letter {
  width: 1ch;
  position: absolute;
  top: 50%;
  transform: translate(0px, -50%);
  left: 100%;
  animation: scroll 2.5s linear infinite;
}

@keyframes scroll {
  to {
    left: -1ch;
  }
}

.letter1 {
  animation-delay: calc(2.5s / 10 * (10 - 1) * -1);
}
.letter2 {
  animation-delay: calc(2.5s / 10 * (10 - 2) * -1);
}
.letter3 {
  animation-delay: calc(2.5s / 10 * (10 - 3) * -1);
}
.letter4 {
  animation-delay: calc(2.5s / 10 * (10 - 4) * -1);
}
.letter5 {
  animation-delay: calc(2.5s / 10 * (10 - 5) * -1);
}
.letter6 {
  animation-delay: calc(2.5s / 10 * (10 - 6) * -1);
}
.letter7 {
  animation-delay: calc(2.5s / 10 * (10 - 7) * -1);
}
.letter8 {
  animation-delay: calc(2.5s / 10 * (10 - 8) * -1);
}
.letter9 {
  animation-delay: calc(2.5s / 10 * (10 - 9) * -1);
}
.letter10 {
  animation-delay: calc(2.5s / 10 * (10 - 10) * -1);
}

</style>
    

================================================
FILE: loaders/VashonG_clever-bullfrog-59.html
================================================
<div class="macbook">
  <div class="inner">
    <div class="screen">
      <div class="face-one">
        <div class="camera"></div>
        <div class="display">
          <div class="shade"></div>
        </div>
        <span>MacBook Air</span>
      </div>
  <title>Layer 1</title>
  </div>
    <div class="macbody">
      <div class="face-one">
        <div class="touchpad">
        </div>
        <div class="keyboard">
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key space"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
        </div>
      </div>
      <div class="pad one"></div>
      <div class="pad two"></div>
      <div class="pad three"></div>
      <div class="pad four"></div>
    </div>
  </div>
  <div class="shadow"></div>
</div>

<style>
/* From Uiverse.io by VashonG - Tags: animation, loader, flip, realistic, mac, computer */
.macbook {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -85px 0 0 -78px;
  perspective: 500px;
}

.shadow {
  position: absolute;
  width: 60px;
  height: 0px;
  left: 40px;
  top: 160px;
  transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
  box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  animation: shadow infinite 7s ease;
}

.inner {
  z-index: 20;
  position: absolute;
  width: 150px;
  height: 96px;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
  animation: rotate infinite 7s ease;
}

.screen {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #ddd;
  transform-style: preserve-3d;
  transform-origin: 50% 93px;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  animation: lid-screen infinite 7s ease;
  background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);
  background-position: left bottom;
  background-size: 300px 300px;
  box-shadow: inset 0 3px 7px rgba(255,255,255,0.5);
}

.screen .logo {
  position: absolute;
  width: 20px;
  height: 24px;
  left: 50%;
  top: 50%;
  margin: -12px 0 0 -10px;
  transform: rotateY(180deg) translateZ(0.1px);
}

.screen .face-one {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #d3d3d3;
  transform: translateZ(2px);
  background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}

.screen .face-one .camera {
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background: #000;
  position: absolute;
  left: 50%;
  top: 4px;
  margin-left: -1.5px;
}

.screen .face-one .display {
  width: 130px;
  height: 74px;
  margin: 10px;
  background-color: #000;
  background-size: 100% 100%;
  border-radius: 1px;
  position: relative;
  box-shadow: inset 0 0 2px rgba(0,0,0,1);
}

.screen .face-one .display .shade {
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  height: 74px;
  background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);
  animation: screen-shade infinite 7s ease;
  background-size: 300px 200px;
  background-position: 0px 0px;
}

.screen .face-one span {
  position: absolute;
  top: 85px;
  left: 57px;
  font-size: 6px;
  color: #666
}

.macbody {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #cbcbcb;
  transform-style: preserve-3d;
  transform-origin: 50% bottom;
  transform: rotateX(-90deg);
  animation: lid-macbody infinite 7s ease;
  background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}

.macbody .face-one {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  transform-style: preserve-3d;
  background: #dfdfdf;
  animation: lid-keyboard-area infinite 7s ease;
  transform: translateZ(-2px);
  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}

.macbody .touchpad {
  width: 40px;
  height: 31px;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 4px;
  margin: -44px 0 0 -18px;
  background: #cdcdcd;
  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
  box-shadow: inset 0 0 3px #888;
}

.macbody .keyboard {
  width: 130px;
  height: 45px;
  position: absolute;
  left: 7px;
  top: 41px;
  border-radius: 4px;
  transform-style: preserve-3d;
  background: #cdcdcd;
  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
  box-shadow: inset 0 0 3px #777;
  padding: 0 0 0 2px;
}

.keyboard .key {
  width: 6px;
  height: 6px;
  background: #444;
  float: left;
  margin: 1px;
  transform: translateZ(-2px);
  border-radius: 2px;
  box-shadow: 0 -2px 0 #222;
  animation: keys infinite 7s ease;
}

.key.space {
  width: 45px;
}

.key.f {
  height: 3px;
}

.macbody .pad {
  width: 5px;
  height: 5px;
  background: #333;
  border-radius: 100%;
  position: absolute;
}

.pad.one {
  left: 20px;
  top: 20px;
}

.pad.two {
  right: 20px;
  top: 20px;
}

.pad.three {
  right: 20px;
  bottom: 20px;
}

.pad.four {
  left: 20px;
  bottom: 20px;
}

@keyframes rotate {
  0% {
    transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
  }

  5% {
    transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);
  }

  20% {
    transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);
  }

  25% {
    transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);
  }

  60% {
    transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);
  }

  65% {
    transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);
  }

  80% {
    transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);
  }

  85% {
    transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);
  }

  87% {
    transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
  }
}

@keyframes lid-screen {
  0% {
    transform: rotateX(0deg);
    background-position: left bottom;
  }

  5% {
    transform: rotateX(50deg);
    background-position: left bottom;
  }

  20% {
    transform: rotateX(-90deg);
    background-position: -150px top;
  }

  25% {
    transform: rotateX(15deg);
    background-position: left bottom;
  }

  30% {
    transform: rotateX(-5deg);
    background-position: right top;
  }

  38% {
    transform: rotateX(5deg);
    background-position: right top;
  }

  48% {
    transform: rotateX(0deg);
    background-position: right top;
  }

  90% {
    transform: rotateX(0deg);
    background-position: right top;
  }

  100% {
    transform: rotateX(0deg);
    background-position: right center;
  }
}

@keyframes lid-macbody {
  0% {
    transform: rotateX(-90deg);
  }

  50% {
    transform: rotateX(-90deg);
  }

  100% {
    transform: rotateX(-90deg);
  }
}

@keyframes lid-keyboard-area {
  0% {
    background-color: #dfdfdf;
  }

  50% {
    background-color: #bbb;
  }

  100% {
    background-color: #dfdfdf;
  }
}

@keyframes screen-shade {
  0% {
    background-position: -20px 0px;
  }

  5% {
    background-position: -40px 0px;
  }

  20% {
    background-position: 200px 0;
  }

  50% {
    background-position: -200px 0;
  }

  80% {
    background-position: 0px 0px;
  }

  85% {
    background-position: -30px 0;
  }

  90% {
    background-position: -20px 0;
  }

  100% {
    background-position: -20px 0px;
  }
}

@keyframes keys {
  0% {
    box-shadow: 0 -2px 0 #222;
  }

  5% {
    box-shadow: 1 -1px 0 #222;
  }

  20% {
    box-shadow: -1px 1px 0 #222;
  }

  25% {
    box-shadow: -1px 1px 0 #222;
  }

  60% {
    box-shadow: -1px 1px 0 #222;
  }

  80% {
    box-shadow: 0 -2px 0 #222;
  }

  85% {
    box-shadow: 0 -2px 0 #222;
  }

  87% {
    box-shadow: 0 -2px 0 #222;
  }

  100% {
    box-shadow: 0 -2px 0 #222;
  }
}

@keyframes shadow {
  0% {
    transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }

  5% {
    transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }

  20% {
    transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);
    box-shadow: 0 0 50px 30px rgba(0,0,0,0.3);
  }

  25% {
    transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);
    box-shadow: 0 0 35px 15px rgba(0,0,0,0.1);
  }

  60% {
    transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }

  100% {
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }
}

</style>


================================================
FILE: loaders/VashonG_hard-sheep-18.html
================================================
<div class="orbit">
  
  <ul class="orbit-wrap">
    
    <li class="orbit-center">
      <i class="orbit-center__icon fa fa-code"></i>
    </li>

    <li>
      <ul class="ring-0">
        <li><i class="orbit-icon fa fa-git"></i></li>
        <li><i class="orbit-icon fa fa-free-code-camp"></i></li>
        <li><i class="orbit-icon fa fa-meetup"></i></li>
        <li><i class="orbit-icon fa fa-codepen"></i></li>
      </ul>
    </li>

    <li>
      <ul class="ring-1">
        <li><i class="orbit-icon fa fa-podcast"></i></li>
        <li><i class="orbit-icon fa fa-css3"></i></li>
        <li><i class="orbit-icon fa fa-html5"></i></li>
      </ul>
    </li>
    <li>
      <ul class="ring-2">
        <li><i class="orbit-icon fa fa-windows"></i></li>
        <li><i class="orbit-icon fa fa-safari"></i></li>
        <li><i class="orbit-icon fa fa-edge"></i></li>
        <li><i class="orbit-icon fa fa-linux"></i></li>
        <li><i class="orbit-icon fa fa-apple"></i></li>
        <li><i class="orbit-icon fa fa-chrome"></i></li>
        <li><i class="orbit-icon fa fa-android"></i></li>
        <li><i class="orbit-icon fa fa-firefox"></i></li>
      </ul>
    </li>
    <li>
      <ul class="ring-3">
        <li><i class="orbit-icon fa fa-coffee"></i></li>
        <li><i class="orbit-icon fa fa-terminal"></i></li>
        <li><i class="orbit-icon fa fa-heart-o"></i></li>
      </ul>
    </li>

  </ul>
  
</div>
<style>
/* From Uiverse.io by VashonG - Tags: loader, orbit */
.orbit {
  float: left;
  width: 100%;
  min-width: 100px;
  min-height: 100px;
}

.orbit-icon {
  width: 1.6em;
  height: 1.6em;
  line-height: 1.6em;
  font-size: 1.2em;
  border-radius: 50%;
  background: #ccc;
  color: #fff;
  text-align: center;
  display: block;
}

.orbit-wrap {
  height: 40em;
  list-style: none;
  font-size: 1.3em;
}

.orbit-wrap > li {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.orbit-wrap > li:hover ul {
  border-width: 2px;
  border-color: #fff;
}

.orbit-wrap > li:hover ~ li ul {
  border-color: rgba(255, 255, 255, 0.2);
}

.orbit-wrap > li:hover ~ li ul li {
  opacity: 0.4;
}

ul[class^=ring] {
  transition: all 300ms ease-in-out;
}

ul[class^=ring] li {
  transition: all 300ms ease-in-out;
}

.ring-0 {
  width: 25em;
  height: 25em;
  animation: clockwiseRotate 35s linear infinite;
}

.ring-0 i {
  animation: counterClockwiseRotate 35s linear infinite;
}

.ring-0 > *:nth-of-type(1) {
  transform: rotate(95deg) translate(12.5em) rotate(-95deg);
}

.ring-0 > *:nth-of-type(2) {
  transform: rotate(190deg) translate(12.5em) rotate(-190deg);
}

.ring-0 > *:nth-of-type(3) {
  transform: rotate(285deg) translate(12.5em) rotate(-285deg);
}

.ring-0 > *:nth-of-type(4) {
  transform: rotate(380deg) translate(12.5em) rotate(-380deg);
}

.ring-1 {
  width: 20em;
  height: 20em;
  animation: clockwiseRotate 30s linear infinite;
}

.ring-1 i {
  animation: counterClockwiseRotate 30s linear infinite;
}

.ring-1 > *:nth-of-type(1) {
  transform: rotate(126.6666666667deg) translate(10em) rotate(-126.6666666667deg);
}

.ring-1 > *:nth-of-type(2) {
  transform: rotate(253.3333333333deg) translate(10em) rotate(-253.3333333333deg);
}

.ring-1 > *:nth-of-type(3) {
  transform: rotate(380deg) translate(10em) rotate(-380deg);
}

.ring-2 {
  width: 15em;
  height: 15em;
  animation: clockwiseRotate 25s linear infinite;
}

.ring-2 i {
  animation: counterClockwiseRotate 25s linear infinite;
}

.ring-2 > *:nth-of-type(1) {
  transform: rotate(47.5deg) translate(7.5em) rotate(-47.5deg);
}

.ring-2 > *:nth-of-type(2) {
  transform: rotate(95deg) translate(7.5em) rotate(-95deg);
}

.ring-2 > *:nth-of-type(3) {
  transform: rotate(142.5deg) translate(7.5em) rotate(-142.5deg);
}

.ring-2 > *:nth-of-type(4) {
  transform: rotate(190deg) translate(7.5em) rotate(-190deg);
}

.ring-2 > *:nth-of-type(5) {
  transform: rotate(237.5deg) translate(7.5em) rotate(-237.5deg);
}

.ring-2 > *:nth-of-type(6) {
  transform: rotate(285deg) translate(7.5em) rotate(-285deg);
}

.ring-2 > *:nth-of-type(7) {
  transform: rotate(332.5deg) translate(7.5em) rotate(-332.5deg);
}

.ring-2 > *:nth-of-type(8) {
  transform: rotate(380deg) translate(7.5em) rotate(-380deg);
}

.ring-3 {
  width: 10em;
  height: 10em;
  animation: clockwiseRotate 20s linear infinite;
}

.ring-3 i {
  animation: counterClockwiseRotate 20s linear infinite;
}

.ring-3 > *:nth-of-type(1) {
  transform: rotate(126.6666666667deg) translate(5em) rotate(-126.6666666667deg);
}

.ring-3 > *:nth-of-type(2) {
  transform: rotate(253.3333333333deg) translate(5em) rotate(-253.3333333333deg);
}

.ring-3 > *:nth-of-type(3) {
  transform: rotate(380deg) translate(5em) rotate(-380deg);
}

ul[class^=ring] {
  border: solid 1px rgba(33, 150, 243, 0.8);
  position: relative;
  padding: 0;
  border-radius: 50%;
  list-style: none;
  box-sizing: content-box;
}

ul[class^=ring] li {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6em;
  height: 1.6em;
  margin: -0.8em;
}
/*
 center;
 */
.orbit-center {
  z-index: 5;
  font-size: 2em;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  text-align: center;
  background: hotpink;
  border-radius: 50%;
}

.orbit-center:hover .orbit-center__icon {
  transform: rotateZ(0deg);
}

.orbit-center__icon {
  transform: rotateZ(-360deg);
  transition: all 300ms ease-in-out;
}

.orbit-wrap > li.orbit-center:hover ~ li > ul {
  width: 0;
  height: 0;
}

.orbit-wrap > li.orbit-center:hover ~ li > ul * {
  transform: translate(0, 0);
}
/* 
 animations 
 */
@keyframes clockwiseRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes counterClockwiseRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}
/* 
 icons 
 */
.fa-heart-o {
  background: #b71c1c;
  color: white;
}

.fa-coffee {
  background: #4CAF50;
  color: #CDDC39;
}

.fa-safari {
  background: white;
  color: darkslateblue;
}

.fa-firefox {
  background: #1565c0;
  color: #ff8f00;
}

.fa-chrome {
  background: #fbc02d;
  color: #ef6c00;
}

.fa-edge {
  background: #03a9f4;
  color: white;
}

.fa-android {
  background: snow;
  color: limegreen;
}

.fa-apple {
  background: #444;
  color: white;
}

.fa-linux {
  background: white;
  color: #222;
}

.fa-windows {
  background: white;
  color: #03a9f4;
}

.fa-terminal {
  background: #222;
  color: #fff;
}

.fa-html5 {
  background: white;
  color: #e65100;
}

.fa-css3 {
  background: white;
  color: #2196f3;
}

.fa-git {
  background: #222;
  color: white;
}

.fa-free-code-camp {
  background: green;
  color: white;
}

.fa-meetup {
  background: red;
  color: white;
}

.fa-podcast {
  background: red;
  color: white;
}

.fa-codepen {
  background: #333;
  color: white;
}



</style>


================================================
FILE: loaders/VashonG_jolly-yak-23.html
================================================
<div aria-live="assertive" role="alert" class="loader"></div>

<style>
/* From Uiverse.io by VashonG - Tags: loader, disney, magical, wand */
.loader {
  --hue: 210;
  --size: 100px;
  --border: 10px;
  --speed: 1s;
  --blur: var(--border);
}

.loader {
  width: var(--border);
  aspect-ratio: 1;
  background: white;
  border-radius: 50%;
  position: absolute;
  --y: calc((var(--size) * -0.5) + (var(--border) * 0.5));
  transform: rotate(0deg) translateY(var(--y));
  animation: spin var(--speed) infinite linear;
}

.loader::before {
  content: "";
  position: absolute;
  inset: calc(var(--border) * -0.5);
  border-radius: 50%;
  background: white;
  filter: blur(var(--blur));
  z-index: -1;
}

.loader::after {
  content: "";
  width: var(--size);
  aspect-ratio: 1;
  position: absolute;
  top: 0%;
  left: 50%;
  translate: -50% 0;
  background: conic-gradient(
    white,
    hsl(var(--hue), 100%, 70%),
    hsl(var(--hue), 100%, 10%),
    transparent 65%
  );
  border-radius: 50%;
  mask: radial-gradient(
    transparent calc(((var(--size) * 0.5) - var(--border)) - 1px),
    white calc((var(--size) * 0.5) - var(--border))
  );
}

@keyframes spin {
  to {
    transform: rotate(-360deg) translateY(var(--y));
  }
}

</style>


================================================
FILE: loaders/VashonG_sour-bat-79.html
================================================
<svg viewBox="0 0 128 128" height="128" width="128" class="star">
  <defs>
    <filter id="star-glow">
      <feGaussianBlur stdDeviation="1.5" result="coloredBlur"></feGaussianBlur>
      <feMerge>
        <feMergeNode in="coloredBlur"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
    <linearGradient y2="1" x2="0" y1="0" x1="0" id="star-grad">
      <stop stop-color="#000" offset="0%"></stop>
      <stop stop-color="#fff" offset="100%"></stop>
    </linearGradient>
    <mask id="star-mask">
      <rect fill="url(#star-grad)" height="128" width="128" y="0" x="0"></rect>
    </mask>
  </defs>
  <g
    stroke-width="2"
    stroke-linejoin="round"
    stroke-linecap="round"
    fill="none"
  >
    <g stroke="hsla(223,90%,50%,0.2)">
      <polygon
        points="64 49 66.322 58.992 71.071 56.929 69.008 61.678 79 64 69.008 66.322 71.071 71.071 66.322 69.008 64 79 61.678 69.008 56.929 71.071 58.992 66.322 49 64 58.992 61.678 56.929 56.929 61.678 58.992 64 49"
      ></polygon>
      <polygon
        points="64 34 68.644 53.983 78.142 49.858 74.017 59.356 94 64 74.017 68.644 78.142 78.142 68.644 74.017 64 94 59.356 74.017 49.858 78.142 53.983 68.644 34 64 53.983 59.356 49.858 49.858 59.356 53.983 64 34"
      ></polygon>
      <polygon
        points="64 19 70.966 48.975 85.213 42.787 79.025 57.034 109 64 79.025 70.966 85.213 85.213 70.966 79.025 64 109 57.034 79.025 42.787 85.213 48.975 70.966 19 64 48.975 57.034 42.787 42.787 57.034 48.975 64 19"
      ></polygon>
      <polygon
        points="64 4 73.287 43.966 92.284 35.716 84.034 54.713 124 64 84.034 73.287 92.284 92.284 73.287 84.034 64 124 54.713 84.034 35.716 92.284 43.966 73.287 4 64 43.966 54.713 35.716 35.716 54.713 43.966 64 4"
      ></polygon>
    </g>
    <g filter="url(#star-glow)">
      <g stroke="hsl(223,90%,50%)">
        <polygon
          points="64 49 66.322 58.992 71.071 56.929 69.008 61.678 79 64 69.008 66.322 71.071 71.071 66.322 69.008 64 79 61.678 69.008 56.929 71.071 58.992 66.322 49 64 58.992 61.678 56.929 56.929 61.678 58.992 64 49"
          stroke-dasharray="31 93"
          class="star__stroke"
        ></polygon>
        <polygon
          points="64 34 68.644 53.983 78.142 49.858 74.017 59.356 94 64 74.017 68.644 78.142 78.142 68.644 74.017 64 94 59.356 74.017 49.858 78.142 53.983 68.644 34 64 53.983 59.356 49.858 49.858 59.356 53.983 64 34"
          stroke-dasharray="62 186"
          class="star__stroke star__stroke--2"
        ></polygon>
        <polygon
          points="64 19 70.966 48.975 85.213 42.787 79.025 57.034 109 64 79.025 70.966 85.213 85.213 70.966 79.025 64 109 57.034 79.025 42.787 85.213 48.975 70.966 19 64 48.975 57.034 42.787 42.787 57.034 48.975 64 19"
          stroke-dasharray="93 279"
          class="star__stroke star__stroke--3"
        ></polygon>
        <polygon
          points="64 4 73.287 43.966 92.284 35.716 84.034 54.713 124 64 84.034 73.287 92.284 92.284 73.287 84.034 64 124 54.713 84.034 35.716 92.284 43.966 73.287 4 64 43.966 54.713 35.716 35.716 54.713 43.966 64 4"
          stroke-dasharray="124 372"
          class="star__stroke star__stroke--4"
        ></polygon>
      </g>
      <g mask="url(#star-mask)" stroke="hsl(283,90%,50%)">
        <polygon
          points="64 49 66.322 58.992 71.071 56.929 69.008 61.678 79 64 69.008 66.322 71.071 71.071 66.322 69.008 64 79 61.678 69.008 56.929 71.071 58.992 66.322 49 64 58.992 61.678 56.929 56.929 61.678 58.992 64 49"
          stroke-dasharray="31 93"
          class="star__stroke"
        ></polygon>
        <polygon
          points="64 34 68.644 53.983 78.142 49.858 74.017 59.356 94 64 74.017 68.644 78.142 78.142 68.644 74.017 64 94 59.356 74.017 49.858 78.142 53.983 68.644 34 64 53.983 59.356 49.858 49.858 59.356 53.983 64 34"
          stroke-dasharray="62 186"
          class="star__stroke star__stroke--2"
        ></polygon>
        <polygon
          points="64 19 70.966 48.975 85.213 42.787 79.025 57.034 109 64 79.025 70.966 85.213 85.213 70.966 79.025 64 109 57.034 79.025 42.787 85.213 48.975 70.966 19 64 48.975 57.034 42.787 42.787 57.034 48.975 64 19"
          stroke-dasharray="93 279"
          class="star__stroke star__stroke--3"
        ></polygon>
        <polygon
          points="64 4 73.287 43.966 92.284 35.716 84.034 54.713 124 64 84.034 73.287 92.284 92.284 73.287 84.034 64 124 54.713 84.034 35.716 92.284 43.966 73.287 4 64 43.966 54.713 35.716 35.716 54.713 43.966 64 4"
          stroke-dasharray="124 372"
          class="star__stroke star__stroke--4"
        ></polygon>
      </g>
    </g>
  </g>
</svg>

<style>
/* From Uiverse.io by VashonG  - Tags: purple, loader, star */
.star {
  margin: auto;
  width: 16em;
  height: 16em;
}
.star__stroke {
  --dur: 2s;
  animation: stroke1 var(--dur) linear infinite;
}
.star__stroke--2 {
  animation-name: stroke2;
  animation-delay: calc(var(--dur) / -2);
}
.star__stroke--3 {
  animation-name: stroke3;
  animation-direction: reverse;
}
.star__stroke--4 {
  animation-name: stroke4;
  animation-delay: calc(var(--dur) / -2);
  animation-direction: reverse;
}

@keyframes stroke1 {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 124;
  }
}
@keyframes stroke2 {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 248;
  }
}
@keyframes stroke3 {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 372;
  }
}
@keyframes stroke4 {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 496;
  }
}

</style>
    

================================================
FILE: loaders/VashonG_spicy-crab-68.html
================================================


<figure>
  <div style="--i: 1"></div>
  <div style="--i: 2"></div>
  <div style="--i: 3"></div>
  <div style="--i: 4"></div>
  <div style="--i: 5"></div>
  <div style="--i: 6"></div>
  <div style="--i: 7"></div>
  <div style="--i: 8"></div>
  <div style="--i: 9"></div>
  <div style="--i: 10"></div>
  <div style="--i: 11"></div>
  <div style="--i: 12"></div>
</figure>


<style>
/* From Uiverse.io by VashonG - Tags: blue, loader, diamond */
@media (prefers-reduced-motion) {
}

figure {
  --size: 15vmin;
  --duration: 4s;
  --direction: 1;
  --pull: -1.25;
  perspective: 30rem;
  display: grid;
  grid-template-areas: "figure";
  place-items: center;
  inline-size: var(--size);
  aspect-ratio: 1;
  animation: spin var(--duration) ease-in-out infinite;
}

figure > * {
  --radius: calc(var(--size) / 2);
  --deg: calc(var(--i) * (360deg / 12));
  --hs: 225 100%;
  --transform-start: translate3d(
      calc(cos(var(--deg)) * var(--radius)),
      calc(sin(var(--deg)) * var(--radius)),
      0
    )
    rotate(calc(var(--deg)));
  grid-area: figure;
  background-color: hsl(var(--hs) var(--l, 60%));
  inline-size: calc(var(--size) / 4);
  aspect-ratio: 1;
  clip-path: polygon(25% 25%, 100% 50%, 25% 75%, 0% 50%);
  transform: var(--transform-start);
  transform-style: preserve-3d;
  animation: diamonds var(--duration) cubic-bezier(0.87, 0, 0.13, 1) infinite;
}

figure:nth-child(2) {
  --size: 30vmin;
  --direction: -1;
  --l: 70%;
}

figure:nth-child(3) {
  --size: 55vmin;
  --pull: -1.125;
  --l: 80%;
}

@keyframes spin {
  0%,
  25% {
    transform: scaleX(var(--direction)) rotate(0);
  }

  75%,
  100% {
    transform: scaleX(var(--direction)) rotate(1turn);
  }
}

@keyframes diamonds {
  0%,
  20% {
    transform: var(--transform-start);
  }

  50% {
    clip-path: polygon(75% 25%, 100% 50%, 75% 75%, 0% 50%);
    transform: translate3d(
        calc(cos(var(--deg)) * var(--radius) * var(--pull)),
        calc(sin(var(--deg)) * var(--radius) * var(--pull)),
        5rem
      )
      rotate(calc(var(--deg) + 90deg));
  }
}

</style>


================================================
FILE: loaders/VashonG_unlucky-crab-35.html
================================================
<div class="virtual-card">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 111 84"
    height="84"
    width="111"
  >
    <rect
      stroke-dasharray="4 4"
      stroke-width="2"
      stroke="black"
      fill="white"
      transform="matrix(-1.31134e-07 1 1 1.31134e-07 -1.31134e-07 40.7759)"
      rx="3.40064"
      height="65.6552"
      width="41.2241"
      y="1"
      x="1"
    ></rect>
    <rect
      fill="black"
      transform="rotate(-180 65.7758 58.6293)"
      height="10.3362"
      width="63.8966"
      y="58.6293"
      x="65.7758"
    ></rect>
    <path
      class="plus-one"
      stroke-width="2"
      stroke="black"
      d="M70.8334 15L70.8334 19.6954M70.8334 19.6954H66.1379M70.8334 19.6954H75.5288M70.8334 19.6954V24.3909"
    ></path>
    <path
      class="plus-two"
      stroke-width="2"
      stroke="black"
      d="M93.955 39L93.955 45.8171M93.955 45.8171H87.1379M93.955 45.8171H100.772M93.955 45.8171V52.6341"
    ></path>
    <path
      class="plus-three"
      stroke-width="2"
      stroke="black"
      d="M99.9622 0L99.9622 10.8242M99.9622 10.8242H89.1379M99.9622 10.8242H110.786M99.9622 10.8242V21.6484"
    ></path>
    <path
      class="plus-four"
      stroke-width="2"
      stroke="black"
      d="M87.4913 22L87.4913 26.3535M87.4913 26.3535H83.1379M87.4913 26.3535H91.8448M87.4913 26.3535V30.7069"
    ></path>
    <path
      class="plus-five"
      stroke-width="2"
      stroke="black"
      d="M77.8447 1V3.70685M77.8447 3.70685H75.1379M77.8447 3.70685H80.5516M77.8447 3.70685V6.4137"
    ></path>
    <path
      class="plus"
      stroke-width="2"
      stroke="black"
      d="M76.8447 40V42.7068M76.8447 42.7068H74.1379M76.8447 42.7068H79.5516M76.8447 42.7068V45.4137"
    ></path>
  </svg>
</div>

<style>
/* From Uiverse.io by VashonG  - Tags: icon, fintech, credit */
.virtual-card,
.physical-card,
.tokenized-card {
  margin: 0 50px;
}

.plus {
  animation: plus 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.plus-one {
  animation: plus 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.plus-two {
  animation: plus 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.plus-three {
  animation: plus 3.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.plus-four {
  animation: plus 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.plus-five {
  animation: plus 4.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes plus {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

</style>
    

================================================
FILE: loaders/Victan78_serious-gecko-84.html
================================================
<div class="loader"></div>
<div class="loader2"></div>
<style>
/* From Uiverse.io by Victan78 - Tags: loader */
.loader {
  width: 100px;
  height: 100px;
  border: solid 4px rgba(231, 231, 231, 0);
  border-top: solid 5px rgb(241, 68, 68);
  border-radius: 50%;
  transition: all 0.5s;
  animation: rotation_51512 1.2s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

@keyframes rotation_51512 {
  70% {
    box-shadow: 0px 0px 10px 50px rgba(241, 57, 57, 0.526);
  }

  90% {
    box-shadow: 0px 0px 10px 50px rgba(241, 57, 57, 0.04);
  }

  100% {
    opacity: 0.5;
    transform: rotate(360deg);
  }
}

</style>


================================================
FILE: loaders/WerlynRodriguez_hard-fox-45.html
================================================
<div class="loader">
        
        <svg viewBox="0 0 18.528 35.424" version="1.1" y="0" x="0" height="369" width="193" xmlns="http://www.w3.org/2000/svg">
        <path d="M3.358 35.05c.435-.175.646-.408.861-.95.374-.94.698-1.52 1.145-2.05.78-.92 1.757-1.638 2.666-1.957.603-.212.9-.204 1.505.041.843.343 1.597.25 2.062-.254.95-1.029 3.95-6.873 5.841-11.376.869-2.07.831-1.882.797-3.962-.034-2.106-.024-2.064-.927-3.887-1.639-3.31-4.426-6.582-7.147-8.392C8.71 1.298 6.715.504 5.296.328c-.718-.09-2.465-.001-3.183.16C.943.752.279 1.268.279 1.917c0 .119.437 1.136.97 2.26.533 1.126 1.044 2.291 1.135 2.591.334 1.106.776 3.567.945 5.27.065.652.357 1.286.751 1.633.419.367 1.351.786 1.964.883.286.044.534.096.553.115.018.018-.129.128-.327.244-.761.446-1.432 1.439-1.74 2.574-.216.802-.194 2.914.045 4.121.24 1.212.575 2.318 1.031 3.403.46 1.092.535 1.458.439 2.135-.223 1.575-1.958 4.03-3.489 4.937-.693.41-.885.587-1.066.98-.173.375-.185.535-.069.953.223.802 1.206 1.326 1.937 1.033z" fill="#000"></path>
        </svg>

        
        <svg viewBox="0 0 2.4 14.4" version="1.1" y="0" x="0" height="150" width="25" xmlns="http://www.w3.org/2000/svg">
        <path d="M2.2 13c0 .641-.447 1.16-1 1.16-.553 0-1-.519-1-1.16V1.4C.2.759.647.24 1.2.24c.553 0 1 .519 1 1.16z" fill="#000"></path>
        </svg>

        
        <svg viewBox="0 0 18.528 35.424" version="1.1" y="0" x="0" height="369" width="193" xmlns="http://www.w3.org/2000/svg">
        <path d="M15.105 35.155c-.42-.196-.627-.482-.902-1.253-.544-1.517-2.145-3.126-3.636-3.652-.69-.243-.887-.242-1.486.01-.617.26-1.342.278-1.798.045-.555-.283-1.76-2.262-3.476-5.708C2.628 22.232.984 18.575.455 17.144c-.236-.637-.237-.655-.237-2.485 0-2.164.01-2.209.9-4.013 1.011-2.049 2.53-4.189 4.185-5.9C7.679 2.293 9.783.995 12.49.313c.782-.197 1.554-.236 2.695-.137 1.619.14 2.38.38 2.882.909.21.22.246.321.243.684-.002.373-.122.67-.959 2.395-1.277 2.63-1.59 3.806-2.035 7.63-.111.951-.316 1.426-.809 1.87-.52.47-1.306.807-2.165.928l-.391.054.35.224c.897.574 1.58 1.674 1.834 2.956.193.969.12 2.791-.164 4.15-.222 1.061-.696 2.518-1.12 3.443-.336.735-.411 1.584-.203 2.3.505 1.738 2.056 3.692 3.736 4.705.693.417.938.83.874 1.476-.104 1.071-1.193 1.706-2.153 1.256z" fill="#000"></path>
        </svg>
    </div>
<style>
/* From Uiverse.io by WerlynRodriguez - Tags: loader, butterfly */
/* Butterfly loader created by WerlynDev in Uiverse.io*/

.loader {
  --sizeLoader: 60px;
  --sizeLoaderHalf: calc(var(--sizeLoader) / 2);
  --stepBtf: calc(var(--sizeLoader) / 10);
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: var(--sizeLoader);
  height: var(--sizeLoader);
}

.loader:hover {
  cursor: progress;
}

.loader[anim1] {
  animation: anim1 0.3s alternate ease-in-out infinite;
}

.loader:not([anim1]) {
  right: var(--sizeLoaderHalf);
  transform-origin: center right;
  animation: moveAround 2s linear infinite;
}

.loader[showShadow] {
  filter: drop-shadow(0 10px 10px #060606de);
}

.loader svg:nth-child(1) {
  position: relative;
  height: 100%;
  left: 2%;
  transform-origin: center right;
  animation: wing 0.5s ease-in-out infinite;
}

.loader svg:nth-child(2) {
  height: 50%;
}

.loader svg:nth-child(3) {
  position: relative;
  height: 100%;
  left: -2%;
  transform-origin: center left;
  animation: wing 0.5s ease-in-out infinite;
}

@keyframes wing {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(60deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

@keyframes moveAround {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes anim1 {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(var(--stepBtf));
  }
}

/* @media (prefers-color-scheme: dark) {
  .loader[showShadow]{
    filter: drop-shadow(0 10px 10px #dbdbdbde);
  }
} */
</style>


================================================
FILE: loaders/YarikZhukovDesigner_neat-mole-44.html
================================================
<div class="container">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
/* From Uiverse.io by YarikZhukovDesigner - Tags: loader */
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  height: 96px;
  width: 96px;
  animation: rotate_3922 1.2s linear infinite;
  background-color: #CB0000;
  background-image: linear-gradient(#CB0000, #FFC700, #c79c00);
}

.container span {
  position: absolute;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  background-color: #cb0000;
  background-image: linear-gradient(#ff0000, #ffc800, #ffc800);
}

.container span:nth-of-type(1) {
  filter: blur(5px);
}

.container span:nth-of-type(2) {
  filter: blur(10px);
}

.container span:nth-of-type(3) {
  filter: blur(25px);
}

.container span:nth-of-type(4) {
  filter: blur(50px);
}

.container::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: #fff;
  border: solid 5px #ffffff;
  border-radius: 50%;
}

@keyframes rotate_3922 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/Yaya12085_gentle-robin-36.html
================================================
<div class="container">
<div class="loader">
<div class="shadow"></div>
</div>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: loader, moon */
.container {
  background-color: #212121;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: #e8e8e8;
  border: 4px solid #e8e8e8;
  box-shadow: 0 0 3px #e8e8e8;
  filter: blur(.4px);
}

.shadow {
  height: 120px;
  width: 120px;
  border-radius: 50%;
  background-color: #212121;
  top: -5px;
  left: 0;
  animation: animate 3s infinite 1.5s;
}

@keyframes animate {
  0% {
    transform: translateX(150px);
    background-color: #212121;
  }

  50% {
    transform: translateX(-10px);
    background-color: #212121;
  }

  100% {
    transform: translateX(-170px);
    background-color: #212121;
  }
}


</style>


================================================
FILE: loaders/Yaya12085_giant-shrimp-51.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: loader, pulse */
.loader {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #69ffa8;
  animation: 1.5s pulse infinite ease-in-out;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #69ffa8;
  }

  100% {
    box-shadow: 0 0 0 14px #69ffa800;
  }
}
</style>


================================================
FILE: loaders/Yaya12085_loud-bullfrog-54.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: loading, loader, colorful */
.loader ,.loader::before,.loader::after {
  border-width: 2px;
  border-style: solid;
  border-radius: 10px;
  animation: rotate 5s linear infinite;
}

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  border-color: #5a4ff3;
}

.loader::before,.loader::after {
  position: absolute;
  content: "";
}

.loader::before {
  border-color: #35a2d2;
  width: 110%;
  height: 110%;
  animation-delay: .5s
}

.loader::after {
  border-color: #9c40fc;
  width: 120%;
  height: 120%;
  animation-delay: .10s;
}

@keyframes rotate {
  to {
    transform: rotate(360deg)
  }
}
</style>


================================================
FILE: loaders/Yaya12085_purple-bullfrog-80.html
================================================
<div aria-label="Loading..." role="status" class="loader">
  <svg class="icon" viewBox="0 0 256 256">
    <line x1="128" y1="32" x2="128" y2="64" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line>
    <line x1="195.9" y1="60.1" x2="173.3" y2="82.7" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line>
    <line x1="224" y1="128" x2="192" y2="128" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line>
    <line x1="195.9" y1="195.9" x2="173.3" y2="173.3" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line>
    <line x1="128" y1="224" x2="128" y2="192" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line>
    <line x1="60.1" y1="195.9" x2="82.7" y2="173.3" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line>
    <line x1="32" y1="128" x2="64" y2="128" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line>
    <line x1="60.1" y1="60.1" x2="82.7" y2="82.7" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line>
  </svg>
  <span class="loading-text">Loading...</span>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: loader */
.loader {
  display: flex;
  align-items: center;
}

.icon {
  height: 1.5rem;
  width: 1.5rem;
  animation: spin 1s linear infinite;
  stroke: rgba(107, 114, 128, 1);
}

.loading-text {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: rgba(107, 114, 128, 1);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/Yaya12085_short-swan-83.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by Yaya12085 - Tags: loading, progress bar, loader, colorful */
.loader {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 60px;
  height: 22px;
  border: 2px solid;
  border-radius: 3px;
  margin-left: -3px
}

.loader::after,
.loader::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  height: 12px;
  background: currentColor;
  top: 3px
}

.loader::before {
  right: -4px;
  border-radius: 3px;
  width: 4px
}

.loader::after {
  width: 1px;
  left: 3px;
  animation: full 2s ease-in-out infinite;
}

@keyframes full {
  20% {
    background-color: red
  }

  45% {
    background-color: yellow;
  }

  to {
    width: 50px;
    background-color: greenyellow;
  }
}
</style>


================================================
FILE: loaders/Yaya12085_strange-puma-7.html
================================================
<!-- From Uiverse.io by Yaya12085 - Tags: loading, loader, tailwind -->
<div class="flex items-center space-x-2">
  <div class="animate-pulse rounded-full bg-gray-500 h-12 w-12 rounded-full"></div>
  <div class="space-y-2">
    <div class="animate-pulse rounded-md bg-gray-500 h-4 w-[200px]"> </div>
    <div class="animate-pulse rounded-md bg-gray-500 h-4 w-[170px]"> </div>
  </div>
</div>
    



================================================
FILE: loaders/Yogeshawghad0477_angry-ladybug-53.html
================================================
<div class="div">
  <p id="h2">Loading....<span id="lol"></span></p>
</div>

<style>
/* From Uiverse.io by Yogeshawghad0477  - Tags: animation, loader, animated, light&dark */
#h2 {
  color: white;
  mix-blend-mode: difference; /* this will change color of loading  text      */
  text-align: center;
  margin: 0;
  font-size: 12px;
  line-height: 30px;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 0 0 3px;
  padding: 0;
  letter-spacing: 5px;
}

.div {
  position: relative;
  top: 0px;
  left: 0%;
  max-width: 200px; /* Use viewport width for responsive width */
  width: 100%;
  height: 30px;
  background: linear-gradient(to right, white, black);
  background-size: 200% 100%;
  animation-delay: 2s;
  border-radius: 10px;
  box-shadow: 0 0 3px;
  -webkit-box-reflect: below 1px
    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  animation: gradientAnimation 10s linear infinite reverse;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* Use media queries for responsiveness */
@media (max-width: 768px) {
  .div {
    width: 500px; /* Adjust width for smaller screens */
    left: 10%;
  }
}

</style>
    

================================================
FILE: loaders/Yogeshawghad0477_blue-otter-69.html
================================================
<div id="div1">
  <div id="l" style="margin: 33px">
    <div class="pupil">
      <div class="p5">
        <div class="pupl2">
          <div class="pupil3"></div>
          <div class="pupil4"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="m" style="margin: 33px">
    <div class="pupil">
      <div class="p5">
        <div class="pupl2">
          <div class="pupil3"></div>
          <div class="pupil4"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Yogeshawghad0477  - Tags: simple, animation, loader, html, css */
#div1 {
  width: 100%;
  background: transparent;

  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes animateHeight {
  0% {
    height: 0px;
  }
  50% {
    height: 50px;
  }
}

#l,
#m {
  width: 150px;
  height: 70px;
  position: relative;
  overflow: hidden;
  background-color: black;
  border-radius: 0px 200px 0px 200px;
  -moz-border-radius: 0px 200px 0px 200px;
  -webkit-border-radius: 0px 200px 0px 200px;
  border: 1px solid transparent;
  animation: animateHeight 1s infinite alternate-reverse;
}
#m {
  border-radius: 200px 0px 200px 0px;
  -moz-border-radius: 200px 0px 200px 0px;
  -webkit-border-radius: 200px 0px 200px 0px;
}
.pupil,
.pupl2,
.pupil3,
.pupil4,
.p5 {
  overflow: hidden;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.158);
}
.pupil3,
.pupil4 {
  width: 18px;
  height: 3.5px;
  overflow: visible;
}

.pupil {
  width: 60px;
  height: 60px;
  background: linear-gradient(
    rgb(255, 105, 105),
    rgb(129, 249, 129),
    rgb(96, 96, 255),
    rgb(71, 71, 71)
  );
}
.pupl2 {
  width: 25px;
  height: 25px;
  background: linear-gradient(
    rgb(255, 2, 2),
    rgb(0, 255, 0),
    rgb(0, 0, 255),
    rgb(0, 0, 0)
  );
}
.p5 {
  width: 42px;
  height: 42px;
  background: linear-gradient(
    rgb(252, 71, 71),
    rgb(70, 249, 70),
    rgb(63, 63, 254),
    rgb(48, 47, 47)
  );
}
.pupil3 {
  width: 5px;
  height: 18px;
}

</style>
    

================================================
FILE: loaders/Z4drus_average-lizard-53.html
================================================
<div class="container">
  <div class="loader">
    <div class="crystal"></div>
    <div class="crystal"></div>
    <div class="crystal"></div>
    <div class="crystal"></div>
    <div class="crystal"></div>
    <div class="crystal"></div>
  </div>
</div>

<style>
/* From Uiverse.io by Z4drus  - Tags: simple, animation, blue, loading, loader, dark, animated, gradients */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 800px;
}

.crystal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  opacity: 0;
  transform-origin: bottom center;
  transform: translate(-50%, -50%) rotateX(45deg) rotateZ(0deg);
  animation: spin 4s linear infinite, emerge 2s ease-in-out infinite alternate,
    fadeIn 0.3s ease-out forwards;
  border-radius: 10px;
  visibility: hidden;
}

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotateX(45deg) rotateZ(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotateX(45deg) rotateZ(360deg);
  }
}

@keyframes emerge {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes fadeIn {
  to {
    visibility: visible;
    opacity: 0.8;
  }
}

.crystal:nth-child(1) {
  background: linear-gradient(45deg, #003366, #336699);
  animation-delay: 0s;
}

.crystal:nth-child(2) {
  background: linear-gradient(45deg, #003399, #3366cc);
  animation-delay: 0.3s;
}

.crystal:nth-child(3) {
  background: linear-gradient(45deg, #0066cc, #3399ff);
  animation-delay: 0.6s;
}

.crystal:nth-child(4) {
  background: linear-gradient(45deg, #0099ff, #66ccff);
  animation-delay: 0.9s;
}

.crystal:nth-child(5) {
  background: linear-gradient(45deg, #33ccff, #99ccff);
  animation-delay: 1.2s;
}

.crystal:nth-child(6) {
  background: linear-gradient(45deg, #66ffff, #ccffff);
  animation-delay: 1.5s;
}

</style>
    

================================================
FILE: loaders/Z4drus_cowardly-deer-31.html
================================================
<div class="loader">
  <svg
    preserveAspectRatio="xMidYMid meet"
    width="40"
    height="40"
    viewBox="0 0 40 40"
    y="0px"
    x="0px"
    class="container"
  >
    <path
      d="M29.760000000000005 18.72 c0 7.28 -3.9200000000000004 13.600000000000001 -9.840000000000002 16.96 c -2.8800000000000003 1.6800000000000002 -6.24 2.64 -9.840000000000002 2.64 c -3.6 0 -6.88 -0.96 -9.76 -2.64 c0 -7.28 3.9200000000000004 -13.52 9.840000000000002 -16.96 c2.8800000000000003 -1.6800000000000002 6.24 -2.64 9.76 -2.64 S26.880000000000003 17.040000000000003 29.760000000000005 18.72 c5.84 3.3600000000000003 9.76 9.68 9.840000000000002 16.96 c -2.8800000000000003 1.6800000000000002 -6.24 2.64 -9.76 2.64 c -3.6 0 -6.88 -0.96 -9.840000000000002 -2.64 c -5.84 -3.3600000000000003 -9.76 -9.68 -9.76 -16.96 c0 -7.28 3.9200000000000004 -13.600000000000001 9.76 -16.96 C25.84 5.120000000000001 29.760000000000005 11.440000000000001 29.760000000000005 18.72z"
      pathLength="100"
      stroke-width="4"
      fill="none"
      class="track"
    ></path>
    <path
      d="M29.760000000000005 18.72 c0 7.28 -3.9200000000000004 13.600000000000001 -9.840000000000002 16.96 c -2.8800000000000003 1.6800000000000002 -6.24 2.64 -9.840000000000002 2.64 c -3.6 0 -6.88 -0.96 -9.76 -2.64 c0 -7.28 3.9200000000000004 -13.52 9.840000000000002 -16.96 c2.8800000000000003 -1.6800000000000002 6.24 -2.64 9.76 -2.64 S26.880000000000003 17.040000000000003 29.760000000000005 18.72 c5.84 3.3600000000000003 9.76 9.68 9.840000000000002 16.96 c -2.8800000000000003 1.6800000000000002 -6.24 2.64 -9.76 2.64 c -3.6 0 -6.88 -0.96 -9.840000000000002 -2.64 c -5.84 -3.3600000000000003 -9.76 -9.68 -9.76 -16.96 c0 -7.28 3.9200000000000004 -13.600000000000001 9.76 -16.96 C25.84 5.120000000000001 29.760000000000005 11.440000000000001 29.760000000000005 18.72z"
      pathLength="100"
      stroke-width="4"
      fill="none"
      class="car"
    ></path>
  </svg>
</div>

<style>
/* From Uiverse.io by Z4drus  - Tags: loader */
.container {
  --uib-size: 100px;
  --uib-color: rgb(51, 172, 241);
  --uib-speed: 1.4s;
  --uib-bg-opacity: 0.1;
  height: var(--uib-size);
  width: var(--uib-size);
  transform-origin: center;
  overflow: visible;
}

.car {
  fill: none;
  stroke: var(--uib-color);
  stroke-dasharray: 15, 85;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: travel var(--uib-speed) linear infinite;
  will-change: stroke-dasharray, stroke-dashoffset;
  transition: stroke 0.5s ease;
}

.track {
  stroke: var(--uib-color);
  opacity: var(--uib-bg-opacity);
  transition: stroke 0.5s ease;
}

@keyframes travel {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -100;
  }
}

</style>
    

================================================
FILE: loaders/Z4drus_grumpy-bird-12.html
================================================
<div class="meteor"></div>

<style>
/* From Uiverse.io by Z4drus  - Tags: simple, glassmorphism, minimalist, white, black, loading, loader, loading animation */
@keyframes spin {
  0% {
    transform: rotateY(0deg) translateZ(0);
  }
  100% {
    transform: rotateY(360deg) translateZ(0);
  }
}

body,
html {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.meteor {
  width: 150px;
  height: 150px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  border-radius: 50%;
  position: relative;
  animation: spin 3s linear infinite;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  transform-style: preserve-3d;
}

.meteor::before,
.meteor::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: inherit;
}

.meteor::before {
  transform: translateZ(-15px);
}

.meteor::after {
  transform: translateZ(15px);
}

</style>
    

================================================
FILE: loaders/Z4drus_orange-rattlesnake-68.html
================================================
<div class="container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<style>
/* From Uiverse.io by Z4drus  - Tags: loader */
.container {
  --uib-size: 150px;
  --uib-speed: 1.2s;
  --uib-dot-size: calc(var(--uib-size) * 0.1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: calc(var(--uib-size) * 0.64);
  width: calc(var(--uib-size) * 0.64);
}

@keyframes jump {
  0%,
  100% {
    transform: translateY(120%);
  }

  50% {
    transform: translateY(-120%);
  }
}

.dot {
  --uib-d1: -0.48;
  --uib-d2: -0.4;
  --uib-d3: -0.32;
  --uib-d4: -0.24;
  --uib-d5: -0.16;
  --uib-d6: -0.08;
  --uib-d7: -0;
  position: absolute;
  bottom: calc(var(--uib-bottom) + var(--uib-dot-size) / 2);
  right: calc(var(--uib-right) + var(--uib-dot-size) / 2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--uib-dot-size);
  width: var(--uib-dot-size);
  animation: jump var(--uib-speed) ease-in-out infinite;
  opacity: var(--uib-scale);
  will-change: transform;
  backface-visibility: hidden;
}

.dot::before {
  content: "";
  height: 100%;
  width: 100%;
  background-color: var(--uib-color);
  border-radius: 50%;
  transform: scale(var(--uib-scale));
  transition: background-color 0.3s ease;
}

.dot:nth-child(1) {
  --uib-bottom: 24%;
  --uib-right: -35%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d1));
}

.dot:nth-child(2) {
  --uib-bottom: 16%;
  --uib-right: -6%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d2));
}

.dot:nth-child(3) {
  --uib-bottom: 8%;
  --uib-right: 23%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d3));
}

.dot:nth-child(4) {
  --uib-bottom: -1%;
  --uib-right: 51%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d4));
}

.dot:nth-child(5) {
  --uib-bottom: 38%;
  --uib-right: -17.5%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d2));
}

.dot:nth-child(6) {
  --uib-bottom: 30%;
  --uib-right: 10%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d3));
}

.dot:nth-child(7) {
  --uib-bottom: 22%;
  --uib-right: 39%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d4));
}

.dot:nth-child(8) {
  --uib-bottom: 14%;
  --uib-right: 67%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d5));
}

.dot:nth-child(9) {
  --uib-bottom: 53%;
  --uib-right: -0.8%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d3));
}

.dot:nth-child(10) {
  --uib-bottom: 44.5%;
  --uib-right: 27%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d4));
}

.dot:nth-child(11) {
  --uib-bottom: 36%;
  --uib-right: 55.7%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d5));
}

.dot:nth-child(12) {
  --uib-bottom: 28.7%;
  --uib-right: 84.3%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d6));
}

.dot:nth-child(13) {
  --uib-bottom: 66.8%;
  --uib-right: 15%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d4));
}

.dot:nth-child(14) {
  --uib-bottom: 58.8%;
  --uib-right: 43%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d5));
}

.dot:nth-child(15) {
  --uib-bottom: 50%;
  --uib-right: 72%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d6));
}

.dot:nth-child(16) {
  --uib-bottom: 42%;
  --uib-right: 100%;
  animation-delay: calc(var(--uib-speed) * var(--uib-d7));
}

.dot:nth-child(3) {
  --uib-scale: 0.98;
}

.dot:nth-child(2),
.dot:nth-child(8) {
  --uib-scale: 0.96;
}

.dot:nth-child(1),
.dot:nth-child(7) {
  --uib-scale: 0.94;
}

.dot:nth-child(6),
.dot:nth-child(12) {
  --uib-scale: 0.92;
}

.dot:nth-child(5),
.dot:nth-child(11) {
  --uib-scale: 0.9;
}

.dot:nth-child(10),
.dot:nth-child(16) {
  --uib-scale: 0.88;
}

.dot:nth-child(9),
.dot:nth-child(15) {
  --uib-scale: 0.86;
}

.dot:nth-child(14) {
  --uib-scale: 0.84;
}

.dot:nth-child(13) {
  --uib-scale: 0.82;
}

.dot:nth-child(1) {
  --uib-color: #334dff;
}

.dot:nth-child(2) {
  --uib-color: #3348ff;
}

.dot:nth-child(3) {
  --uib-color: #3343ff;
}

.dot:nth-child(4) {
  --uib-color: #333eff;
}

.dot:nth-child(5) {
  --uib-color: #3339ff;
}

.dot:nth-child(6) {
  --uib-color: #3334ff;
}

.dot:nth-child(7) {
  --uib-color: #4433ff;
}

.dot:nth-child(8) {
  --uib-color: #5533ff;
}

.dot:nth-child(9) {
  --uib-color: #6633ff;
}

.dot:nth-child(10) {
  --uib-color: #7733ff;
}

.dot:nth-child(11) {
  --uib-color: #8833ff;
}

.dot:nth-child(12) {
  --uib-color: #9933ff;
}

.dot:nth-child(13) {
  --uib-color: #a433ff;
}

.dot:nth-child(14) {
  --uib-color: #af33ff;
}

.dot:nth-child(15) {
  --uib-color: #ba33ff;
}

.dot:nth-child(16) {
  --uib-color: #c533ff;
}

</style>
    

================================================
FILE: loaders/Z4drus_polite-seahorse-77.html
================================================
<div class="container">
  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>
</div>

<style>
/* From Uiverse.io by Z4drus  - Tags: loader */
.container {
  --uib-size: 150px;
  --uib-speed: 2.5s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--uib-size);
  width: var(--uib-size);
}

.slice {
  position: relative;
  height: calc(var(--uib-size) / 6);
  width: 100%;
}

.slice::before,
.slice::after {
  --uib-a: calc(var(--uib-speed) / -2);
  --uib-b: calc(var(--uib-speed) / -6);
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - var(--uib-size) / 12);
  height: 100%;
  width: calc(100% / 6);
  border-radius: 50%;
  background-color: var(--uib-color);
  flex-shrink: 0;
  animation: orbit var(--uib-speed) linear infinite;
  transition: background-color 0.3s ease;
}

.slice:nth-child(1)::after {
  animation-delay: var(--uib-a);
}

.slice:nth-child(2)::before {
  animation-delay: var(--uib-b);
}

.slice:nth-child(2)::after {
  animation-delay: calc(var(--uib-a) + var(--uib-b));
}

.slice:nth-child(3)::before {
  animation-delay: calc(var(--uib-b) * 2);
}

.slice:nth-child(3)::after {
  animation-delay: calc(var(--uib-a) + var(--uib-b) * 2);
}

.slice:nth-child(4)::before {
  animation-delay: calc(var(--uib-b) * 3);
}

.slice:nth-child(4)::after {
  animation-delay: calc(var(--uib-a) + var(--uib-b) * 3);
}

.slice:nth-child(5)::before {
  animation-delay: calc(var(--uib-b) * 4);
}

.slice:nth-child(5)::after {
  animation-delay: calc(var(--uib-a) + var(--uib-b) * 4);
}

.slice:nth-child(6)::before {
  animation-delay: calc(var(--uib-b) * 5);
}

.slice:nth-child(6)::after {
  animation-delay: calc(var(--uib-a) + var(--uib-b) * 5);
}

@keyframes orbit {
  0% {
    transform: translateX(calc(var(--uib-size) * 0.25)) scale(0.73684);
    opacity: 0.65;
  }

  5% {
    transform: translateX(calc(var(--uib-size) * 0.235)) scale(0.684208);
    opacity: 0.58;
  }

  10% {
    transform: translateX(calc(var(--uib-size) * 0.182)) scale(0.631576);
    opacity: 0.51;
  }

  15% {
    transform: translateX(calc(var(--uib-size) * 0.129)) scale(0.578944);
    opacity: 0.44;
  }

  20% {
    transform: translateX(calc(var(--uib-size) * 0.076)) scale(0.526312);
    opacity: 0.37;
  }

  25% {
    transform: translateX(0%) scale(0.47368);
    opacity: 0.3;
  }

  30% {
    transform: translateX(calc(var(--uib-size) * -0.076)) scale(0.526312);
    opacity: 0.37;
  }

  35% {
    transform: translateX(calc(var(--uib-size) * -0.129)) scale(0.578944);
    opacity: 0.44;
  }

  40% {
    transform: translateX(calc(var(--uib-size) * -0.182)) scale(0.631576);
    opacity: 0.51;
  }

  45% {
    transform: translateX(calc(var(--uib-size) * -0.235)) scale(0.684208);
    opacity: 0.58;
  }

  50% {
    transform: translateX(calc(var(--uib-size) * -0.25)) scale(0.73684);
    opacity: 0.65;
  }

  55% {
    transform: translateX(calc(var(--uib-size) * -0.235)) scale(0.789472);
    opacity: 0.72;
  }

  60% {
    transform: translateX(calc(var(--uib-size) * -0.182)) scale(0.842104);
    opacity: 0.79;
  }

  65% {
    transform: translateX(calc(var(--uib-size) * -0.129)) scale(0.894736);
    opacity: 0.86;
  }

  70% {
    transform: translateX(calc(var(--uib-size) * -0.076)) scale(0.947368);
    opacity: 0.93;
  }

  75% {
    transform: translateX(0%) scale(1);
    opacity: 1;
  }

  80% {
    transform: translateX(calc(var(--uib-size) * 0.076)) scale(0.947368);
    opacity: 0.93;
  }

  85% {
    transform: translateX(calc(var(--uib-size) * 0.129)) scale(0.894736);
    opacity: 0.86;
  }

  90% {
    transform: translateX(calc(var(--uib-size) * 0.182)) scale(0.842104);
    opacity: 0.79;
  }

  95% {
    transform: translateX(calc(var(--uib-size) * 0.235)) scale(0.789472);
    opacity: 0.72;
  }

  100% {
    transform: translateX(calc(var(--uib-size) * 0.25)) scale(0.73684);
    opacity: 0.65;
  }
}

.slice:nth-child(1)::before,
.slice:nth-child(1)::after {
  background-color: #334dff;
}

.slice:nth-child(2)::before,
.slice:nth-child(2)::after {
  background-color: #333eff;
}

.slice:nth-child(3)::before,
.slice:nth-child(3)::after {
  background-color: #3334ff;
}

.slice:nth-child(4)::before,
.slice:nth-child(4)::after {
  background-color: #4433ff;
}

.slice:nth-child(5)::before,
.slice:nth-child(5)::after {
  background-color: #6633ff;
}

.slice:nth-child(6)::before,
.slice:nth-child(6)::after {
  background-color: #9933ff;
}

</style>
    

================================================
FILE: loaders/ZacharyCrespin_grumpy-stingray-26.html
================================================
<div class="loader">
<div class="loader-square"></div>
<div class="loader-square"></div>
<div class="loader-square"></div>
<div class="loader-square"></div>
<div class="loader-square"></div>
<div class="loader-square"></div>
<div class="loader-square"></div>
</div>
<style>
/* From Uiverse.io by ZacharyCrespin - Tags: loader */
@keyframes square-animation {
 0% {
  left: 0;
  top: 0;
 }

 10.5% {
  left: 0;
  top: 0;
 }

 12.5% {
  left: 32px;
  top: 0;
 }

 23% {
  left: 32px;
  top: 0;
 }

 25% {
  left: 64px;
  top: 0;
 }

 35.5% {
  left: 64px;
  top: 0;
 }

 37.5% {
  left: 64px;
  top: 32px;
 }

 48% {
  left: 64px;
  top: 32px;
 }

 50% {
  left: 32px;
  top: 32px;
 }

 60.5% {
  left: 32px;
  top: 32px;
 }

 62.5% {
  left: 32px;
  top: 64px;
 }

 73% {
  left: 32px;
  top: 64px;
 }

 75% {
  left: 0;
  top: 64px;
 }

 85.5% {
  left: 0;
  top: 64px;
 }

 87.5% {
  left: 0;
  top: 32px;
 }

 98% {
  left: 0;
  top: 32px;
 }

 100% {
  left: 0;
  top: 0;
 }
}

.loader {
 position: relative;
 width: 96px;
 height: 96px;
 transform: rotate(45deg);
}

.loader-square {
 position: absolute;
 top: 0;
 left: 0;
 width: 28px;
 height: 28px;
 margin: 2px;
 border-radius: 0px;
 background: white;
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
 animation: square-animation 10s ease-in-out infinite both;
}

.loader-square:nth-of-type(0) {
 animation-delay: 0s;
}

.loader-square:nth-of-type(1) {
 animation-delay: -1.4285714286s;
}

.loader-square:nth-of-type(2) {
 animation-delay: -2.8571428571s;
}

.loader-square:nth-of-type(3) {
 animation-delay: -4.2857142857s;
}

.loader-square:nth-of-type(4) {
 animation-delay: -5.7142857143s;
}

.loader-square:nth-of-type(5) {
 animation-delay: -7.1428571429s;
}

.loader-square:nth-of-type(6) {
 animation-delay: -8.5714285714s;
}

.loader-square:nth-of-type(7) {
 animation-delay: -10s;
}
</style>


================================================
FILE: loaders/Zadrus_bad-penguin-12.html
================================================
<div class="container">
  <div class="loader"></div>
  <div class="loader"></div>
  <div class="loader"></div>
  <div class="loader"></div>
  <div class="loader"></div>
</div>

<style>
/* From Uiverse.io by Zadrus  - Tags: simple, material design, animation, green, minimalist, loader, colorful, clean */
.container {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.loader {
  width: 20px;
  height: 40px;
  border-radius: 10px 50px;
  box-shadow: 0px 0px 5px black;
  animation: dominos 1s ease infinite;
}

.loader:nth-child(1) {
  --left: 80px;
  animation-delay: 0.325s;
  background-color: #5d9960;
}

.loader:nth-child(2) {
  --left: 70px;
  animation-delay: 0.5s;
  background-color: #82a587;
}

.loader:nth-child(3) {
  left: 60px;
  animation-delay: 0.625s;
  background-color: #8bac74;
}

.loader:nth-child(4) {
  animation-delay: 0.74s;
  left: 50px;
  background-color: #b9bf90;
}

.loader:nth-child(5) {
  animation-delay: 0.865s;
  left: 40px;
  background-color: #e7d2ab;
}

@keyframes dominos {
  50% {
    opacity: 0.7;
  }

  75% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  80% {
    opacity: 1;
  }
}

</style>
    

================================================
FILE: loaders/Zadrus_sweet-dragon-8.html
================================================
<div class="loading">
  <div class="diamond"></div>
  <div class="diamond middle"></div>
  <div class="diamond"></div>
</div>

<style>
/* From Uiverse.io by Zadrus  - Tags: simple, red, minimalist, gradient, loader, spinner, animated, gradients */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

.diamond {
  width: 50px;
  height: 50px;
  background-color: orange;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  margin: 5px;
  opacity: 0;
  animation: fade-in-out 1.5s ease-in-out infinite;
}

.diamond.middle {
  transform: rotateY(180deg);
}

@keyframes fade-in-out {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.diamond {
  background: linear-gradient(45deg, #ffba00, #ff6c00);
}

.diamond:nth-child(1) {
  animation-delay: 0s;
}

.diamond.middle {
  animation-delay: 0.5s;
}

.diamond:nth-child(3) {
  animation-delay: 1s;
}

</style>
    

================================================
FILE: loaders/aadil-01_rude-moth-27.html
================================================
<div id="box-outer">
  <div id="box-inner">
    <div id="box"></div>
  </div>
</div>
<style>
/* From Uiverse.io by aadil-01 - Tags: loader */
#box-outer {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  animation: rotate_29 5s infinite;
  background-color: #5ACEF2;
}

#box-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  rotate: 45deg;
  animation: revolve_29 5s infinite;
  background-color: #FF8062;
}

#box {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  animation: rotate_29 5s infinite;
  background-color: #FEFEFE;
}

@keyframes revolve_29 {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateY(100%);
  }

  50% {
    transform: translateX(100%) translateY(100%);
  }

  75% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes rotate_29 {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(90deg);
  }

  40% {
    transform: rotate(180deg);
  }

  60% {
    transform: rotate(270deg);
  }

  80% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
</style>


================================================
FILE: loaders/aadium_bright-lion-66.html
================================================
<div class="loader">
  <div class="cover"></div>
</div>
<style>
/* From Uiverse.io by aadium - Tags: loader, glow, neon */
.loader {
  width: 100px;
  height: 100px;
  background-image: #212121;
  box-shadow: 0px 5px 10px #7fe8ff, 0px -5px 10px #99ff33, 5px 0px 10px#4cffb4, -5px 0px 10px #4cffb4,
  inset 0px 5px 10px #99ff33, inset 0px -5px 10px #7fe8ff, inset 5px 0px 10px#4cffb4, inset -5px 0px 10px #4cffb4;
  border-radius: 7em;
  position: relative;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

</style>


================================================
FILE: loaders/aadium_friendly-puma-64.html
================================================
<div class="loader">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66" height="100px" width="100px" class="spinner">
    <circle stroke="url(#gradient)" r="20" cy="33" cx="33" stroke-width="1" fill="transparent" class="path"></circle>
      <linearGradient id="gradient">
        <stop stop-opacity="1" stop-color="#fe0000" offset="0%"></stop>
        <stop stop-opacity="0" stop-color="#af3dff" offset="100%"></stop>
      </linearGradient>
    
  </svg> 
</div>
<style>
/* From Uiverse.io by aadium - Tags: gradient, loader */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  width: 250px;
  height: 150px;
  position: relative;
  animation: rotation 0.75s linear infinite;
  border-radius: 100em;
}

.path {
  stroke-dasharray: 100;
  stroke-dashoffset: 20;
  stroke-linecap: round;
}

@keyframes rotation {
  to {
    transform: rotate(360deg);
  }
}

</style>


================================================
FILE: loaders/aadium_purple-panda-57.html
================================================
<div class="loader">
	<svg class="wheel" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 254.532 254.532" xml:space="preserve">
		<g>
			<path id="tire" d="M127.267,0C57.092,0,0,57.091,0,127.266s57.092,127.266,127.267,127.266c70.174,0,127.266-57.091,127.266-127.266
				S197.44,0,127.267,0z M127.267,217.656c-49.922,0-90.391-40.468-90.391-90.39s40.469-90.39,90.391-90.39
				c49.92,0,90.39,40.468,90.39,90.39S177.186,217.656,127.267,217.656z"></path>
			<path id="rim" d="M127.267,48.578c-43.39,0-78.689,35.299-78.689,78.688c0,43.389,35.3,78.688,78.689,78.688
				c43.389,0,78.688-35.299,78.688-78.688C205.955,83.877,170.655,48.578,127.267,48.578z M195.878,122.249h-38.18
				c-0.78-4.825-2.686-9.275-5.435-13.079l26.954-26.954C188.679,93.112,194.771,106.996,195.878,122.249z M132.204,58.648
				c15.244,1.087,29.123,7.156,40.025,16.591l-26.948,26.949c-3.804-2.748-8.253-4.653-13.077-5.433V58.648z M122.329,58.648v38.106
				c-4.824,0.78-9.274,2.685-13.078,5.434L82.302,75.24C93.204,65.805,107.085,59.735,122.329,58.648z M75.313,82.217l26.955,26.954
				c-2.749,3.803-4.654,8.253-5.434,13.077h-38.18C59.761,106.996,65.853,93.113,75.313,82.217z M58.643,132.123h38.192
				c0.779,4.824,2.685,9.274,5.434,13.078l-27.029,27.029C65.788,161.308,59.714,147.398,58.643,132.123z M122.329,195.884
				c-15.285-1.09-29.197-7.188-40.113-16.666l27.035-27.035c3.804,2.749,8.254,4.654,13.078,5.434V195.884z M122.329,147.459v0.072
				c-2.131-0.518-4.131-1.36-5.953-2.474l0.047-0.047c-2.85-1.738-5.244-4.132-6.982-6.983l-0.046,0.046
				c-1.114-1.822-1.956-3.821-2.474-5.952h0.071c-0.385-1.585-0.611-3.233-0.611-4.937c0-1.704,0.227-3.352,0.611-4.937h-0.071
				c0.518-2.13,1.359-4.129,2.474-5.951l0.046,0.046c1.738-2.85,4.133-5.245,6.982-6.982l-0.047-0.047
				c1.822-1.114,3.822-1.957,5.953-2.474v0.072c1.586-0.385,3.233-0.612,4.938-0.612s3.352,0.227,4.938,0.612v-0.072
				c2.131,0.518,4.13,1.359,5.951,2.473l-0.047,0.047c2.851,1.737,5.245,4.132,6.983,6.982l0.046-0.046
				c1.115,1.822,1.957,3.822,2.475,5.953h-0.071c0.385,1.585,0.611,3.233,0.611,4.937c0,1.704-0.227,3.352-0.611,4.937h0.071
				c-0.518,2.131-1.359,4.131-2.475,5.953l-0.046-0.046c-1.738,2.85-4.133,5.244-6.983,6.982l0.047,0.046
				c-1.821,1.114-3.82,1.956-5.951,2.474v-0.072c-1.586,0.385-3.233,0.612-4.938,0.612S123.915,147.845,122.329,147.459z
				M132.204,195.884v-38.267c4.824-0.78,9.273-2.685,13.077-5.433l27.034,27.034C161.4,188.696,147.488,194.794,132.204,195.884z
				M179.292,172.23l-27.028-27.028c2.749-3.804,4.654-8.254,5.435-13.079h38.191C194.818,147.398,188.745,161.308,179.292,172.23z"></path>
		</g>
		</svg>
	<div class="road"></div>
</div>
<style>
/* From Uiverse.io by aadium - Tags: loader, wheel, car */
.loader {
}

.wheel {
  fill: rgb(128, 128, 128);
  font-size: 100px;
  width: 100px;
  height: 100px;
  border-radius: 6em;
  text-align: center;
  animation: rolling 1s linear infinite;
}

#rim {
  fill: rgb(126, 126, 126);
}

#tire {
  fill: rgb(55, 55, 55);
}

.road {
  position: absolute;
  margin-top: -4px;
  width: 100%;
  height: 10px;
  border-radius: 5em;
  background-color: rgb(55, 55, 55);
  animation: road-move 2s linear infinite;
}

@keyframes rolling {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes road-move {
  from {
    transform: translateX(-140%);
  }

  to {
    transform: translateX(100%);
  }
}
</style>


================================================
FILE: loaders/aadium_wonderful-otter-43.html
================================================
<div class="cloader">
  <div class="clface">
    <div class="clsface">
      <div id="h2" class="hand"></div>
    </div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div id="sub" class="pin"></div>
    <div id="h1" class="hand"></div>
    <div id="main" class="pin"></div>
  </div>
</div>

<style>
/* From Uiverse.io by aadium - Tags: loader, clock, timer */
.cloader {
  width: 10em;
  height: 10em;
  border: 4px solid white;
  border-radius: 50%;
  margin: 50px auto;
  position: relative;
  padding: 2rem;
}

.clface {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-3px);
}

.top {
  height: 10px;
  width: 4px;
  content: '';
  background-color: white;
  border-radius: 5em;
  margin-top: -30px;
  margin-left: 42px;
}

.bottom {
  height: 10px;
  width: 4px;
  content: '';
  background-color: white;
  border-radius: 5em;
  margin-top: 135px;
  margin-left: 42px;
}

.left {
  height: 4px;
  width: 10px;
  content: '';
  background-color: white;
  border-radius: 5em;
  margin-top: -82px;
  margin-left: 112px;
}

.right {
  height: 4px;
  width: 10px;
  content: '';
  background-color: white;
  border-radius: 5em;
  margin-top: -4px;
  margin-left: -35px;
}

.clsface {
  position: absolute;
  width: 40px;
  height: 40px;
  margin-left: 24px;
  margin-top: 15px;
  border-radius: 6em;
  border: 2px solid #636363;
}

.hand {
  width: 65%;
  height: 4px;
  background-color: white;
  border-radius: 3em;
  border: none;
  position: absolute;
  top: 85%;
  left: -15%;
  transform-origin: 100%;
  transform: rotate(90deg);
}

.pin {
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 86%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#sub {
  width: 10%;
  height: 10%;
  border-radius: 50%;
  background: #636363;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#h1 {
  animation: rotate 4s linear infinite;
}

#h2 {
  width: 45%;
  left: 5%;
  top: 45%;
  background-color: #636363;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(90deg);
  }

  to {
    transform: rotate(450deg);
  }
}
</style>


================================================
FILE: loaders/abrahamcalsin_breezy-panther-14.html
================================================
<div class="loaderRectangle">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style>
/* From Uiverse.io by abrahamcalsin - Tags: loader */
.loaderRectangle {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 0 3px;
}

.loaderRectangle div {
 width: 10px;
 height: 16px;
 animation: .9s ease-in-out infinite;
 background: #183153;
 box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
}

.loaderRectangle div:nth-child(1) {
 animation-name: rectangleOneAnim;
 animation-delay: 1s;
}

@keyframes rectangleOneAnim {
 0% {
  height: 15px;
 }

 40% {
  height: 30px;
 }

 100% {
  height: 15px;
 }
}

.loaderRectangle div:nth-child(2) {
 animation-name: rectangleTwoAnim;
 animation-delay: 1.1s;
}

@keyframes rectangleTwoAnim {
 0% {
  height: 15px;
 }

 40% {
  height: 40px;
 }

 100% {
  height: 15px;
 }
}

.loaderRectangle div:nth-child(3) {
 animation-name: rectangleThreeAnim;
 animation-delay: 1.2s;
}

@keyframes rectangleThreeAnim {
 0% {
  height: 15px;
 }

 40% {
  height: 50px;
 }

 100% {
  height: 15px;
 }
}

.loaderRectangle div:nth-child(4) {
 animation-name: rectangleFourAnim;
 animation-delay: 1.3s;
}

@keyframes rectangleFourAnim {
 0% {
  height: 15px;
 }

 40% {
  height: 40px;
 }

 100% {
  height: 15px;
 }
}

.loaderRectangle div:nth-child(5) {
 animation-name: rectangleFiveAnim;
 animation-delay: 1.4s;
}

@keyframes rectangleFiveAnim {
 0% {
  height: 15px;
 }

 40% {
  height: 30px;
 }

 100% {
  height: 15px;
 }
}
</style>


================================================
FILE: loaders/abrahamcalsin_hot-lionfish-16.html
================================================
<div class="jelly-triangle">
    <div class="jelly-triangle__dot"></div>
    <div class="jelly-triangle__traveler"></div>
</div>

<svg width="0" height="0" class="jelly-maker">
    <defs>
        <filter id="uib-jelly-triangle-ooze">
            <feGaussianBlur in="SourceGraphic" stdDeviation="7.3" result="blur"></feGaussianBlur>
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="ooze"></feColorMatrix>
            <feBlend in="SourceGraphic" in2="ooze"></feBlend>
        </filter>
    </defs>
</svg>
<style>
/* From Uiverse.io by abrahamcalsin - Tags: loader */
.jelly-triangle {
  --uib-size: 2.8rem;
  --uib-speed: 1.75s;
  --uib-color: #183153;
  position: relative;
  height: var(--uib-size);
  width: var(--uib-size);
  filter: url('#uib-jelly-triangle-ooze');
}

.jelly-triangle__dot,
.jelly-triangle::before,
.jelly-triangle::after {
  content: '';
  position: absolute;
  width: 33%;
  height: 33%;
  background: var(--uib-color);
  border-radius: 100%;
  box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
}

.jelly-triangle__dot {
  top: 6%;
  left: 30%;
  animation: grow7132 var(--uib-speed) ease infinite;
}

.jelly-triangle::before {
  bottom: 6%;
  right: 0;
  animation: grow7132 var(--uib-speed) ease calc(var(--uib-speed) * -0.666)
    infinite;
}

.jelly-triangle::after {
  bottom: 6%;
  left: 0;
  animation: grow7132 var(--uib-speed) ease calc(var(--uib-speed) * -0.333)
    infinite;
}

.jelly-triangle__traveler {
  position: absolute;
  top: 6%;
  left: 30%;
  width: 33%;
  height: 33%;
  background: var(--uib-color);
  border-radius: 100%;
  animation: triangulate6214 var(--uib-speed) ease infinite;
}

.jelly-maker {
  width: 0;
  height: 0;
  position: absolute;
}

@keyframes triangulate6214 {
  0%,
  100% {
    transform: none;
  }

  33.333% {
    transform: translate(120%, 175%);
  }

  66.666% {
    transform: translate(-95%, 175%);
  }
}

@keyframes grow7132 {
  0%,
  100% {
    transform: scale(1.5);
  }

  20%,
  70% {
    transform: none;
  }
}
</style>


================================================
FILE: loaders/abrahamcalsin_serious-turkey-52.html
================================================
<div class="dot-spinner">
    <div class="dot-spinner__dot"></div>
    <div class="dot-spinner__dot"></div>
    <div class="dot-spinner__dot"></div>
    <div class="dot-spinner__dot"></div>
    <div class="dot-spinner__dot"></div>
    <div class="dot-spinner__dot"></div>
    <div class="dot-spinner__dot"></div>
    <div class="dot-spinner__dot"></div>
</div>
<style>
/* From Uiverse.io by abrahamcalsin - Tags: loader, spinner, dots */
.dot-spinner {
  --uib-size: 2.8rem;
  --uib-speed: .9s;
  --uib-color: #183153;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--uib-size);
  width: var(--uib-size);
}

.dot-spinner__dot {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
}

.dot-spinner__dot::before {
  content: '';
  height: 20%;
  width: 20%;
  border-radius: 50%;
  background-color: var(--uib-color);
  transform: scale(0);
  opacity: 0.5;
  animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;
  box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
}

.dot-spinner__dot:nth-child(2) {
  transform: rotate(45deg);
}

.dot-spinner__dot:nth-child(2)::before {
  animation-delay: calc(var(--uib-speed) * -0.875);
}

.dot-spinner__dot:nth-child(3) {
  transform: rotate(90deg);
}

.dot-spinner__dot:nth-child(3)::before {
  animation-delay: calc(var(--uib-speed) * -0.75);
}

.dot-spinner__dot:nth-child(4) {
  transform: rotate(135deg);
}

.dot-spinner__dot:nth-child(4)::before {
  animation-delay: calc(var(--uib-speed) * -0.625);
}

.dot-spinner__dot:nth-child(5) {
  transform: rotate(180deg);
}

.dot-spinner__dot:nth-child(5)::before {
  animation-delay: calc(var(--uib-speed) * -0.5);
}

.dot-spinner__dot:nth-child(6) {
  transform: rotate(225deg);
}

.dot-spinner__dot:nth-child(6)::before {
  animation-delay: calc(var(--uib-speed) * -0.375);
}

.dot-spinner__dot:nth-child(7) {
  transform: rotate(270deg);
}

.dot-spinner__dot:nth-child(7)::before {
  animation-delay: calc(var(--uib-speed) * -0.25);
}

.dot-spinner__dot:nth-child(8) {
  transform: rotate(315deg);
}

.dot-spinner__dot:nth-child(8)::before {
  animation-delay: calc(var(--uib-speed) * -0.125);
}

@keyframes pulse0112 {
  0%,
  100% {
    transform: scale(0);
    opacity: 0.5;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }
}

</style>


================================================
FILE: loaders/abuayaan01_quiet-gecko-53.html
================================================
<!-- From Uiverse.io by abuayaan01  - Tags: gradient, loading, loader, spinner, colorful, circle loader, spin, loading animation -->
<div class="flex flex-row gap-2">
  <div
    style="background-image: conic-gradient(from 0deg, violet, indigo 30%, blue 50%, green 60%, yellow 70%, orange 80%, red 100%);"
    class="w-14 h-14 rounded-full bg-radial bg-gradient-to-tr animate-spin [animation-delay:.7s]"
  ></div>
</div>


    

================================================
FILE: loaders/adamgiebl_thin-lionfish-5.html
================================================
<section class="dots-container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</section>

<style>
/* From Uiverse.io by adamgiebl - Tags: blue, loader, dots, pulse */
.dots-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.dot {
  height: 20px;
  width: 20px;
  margin-right: 10px;
  border-radius: 10px;
  background-color: #b3d4fc;
  animation: pulse 1.5s infinite ease-in-out;
}

.dot:last-child {
  margin-right: 0;
}

.dot:nth-child(1) {
  animation-delay: -0.3s;
}

.dot:nth-child(2) {
  animation-delay: -0.1s;
}

.dot:nth-child(3) {
  animation-delay: 0.1s;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    background-color: #b3d4fc;
    box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
  }

  50% {
    transform: scale(1.2);
    background-color: #6793fb;
    box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
  }

  100% {
    transform: scale(0.8);
    background-color: #b3d4fc;
    box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
  }
}
</style>


================================================
FILE: loaders/adilsarfraz02_tough-seahorse-89.html
================================================
<div class="custom-loader"></div>

<style>
/* From Uiverse.io by adilsarfraz02  - Tags: loader, spinner, smooth, custom, transition, effect loader, loading animation */
.custom-loader {
  width: 40px;
  height: 10px;
  color: #f000b4;
  background: radial-gradient(farthest-side, currentColor 90%, #0000) left /
      10px 10px,
    radial-gradient(farthest-side, currentColor 90%, #0000) center/10px 10px,
    radial-gradient(farthest-side, currentColor 90%, #0000) right / 10px 10px,
    linear-gradient(currentColor 0 0) center/100% 4px;
  background-repeat: no-repeat;
  position: relative;
  animation: s6 2s infinite linear;
}
.custom-loader:before,
.custom-loader:after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  animation: inherit;
  --s: calc(50% - 5px);
  animation-direction: reverse;
}
.custom-loader:after {
  --s: calc(5px - 50%);
}

@keyframes s6 {
  0% {
    transform: translate(var(--s, 0)) rotate(0);
  }
  100% {
    transform: translate(var(--s, 0)) rotate(1turn);
  }
}

</style>
    

================================================
FILE: loaders/ahmed150up_old-moose-46.html
================================================
<div class="loader">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>


<style>
/* From Uiverse.io by ahmed150up - Tags: loader */
.loader {
  display: flex;
  justify-content: center;
}

.bar {
  width: 7px;
  height: 18px;
  margin: 0 9px;
  border-radius: 10px;
  animation: loading_5192 1s ease-in-out infinite;
  background-color: aqua;
}

.bar:nth-child(1) {
  animation-delay: 0.01s;
}

.bar:nth-child(2) {
  animation-delay: 0.09s;
}

.bar:nth-child(3) {
  animation-delay: 0.19s;
}

.bar:nth-child(4) {
  animation-delay: 0.29s;
}

@keyframes loading_5192 {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(1, 2.5);
  }

  40% {
    transform: scale(1);
  }
}

</style>


================================================
FILE: loaders/akshat-patel28_cold-impala-14.html
================================================
<div class="loader">
<span class="loader-text">Loading...</span>
</div>
<style>
/* From Uiverse.io by akshat-patel28 - Tags: animation, loader, text animation, animated, typewriter */
.loader {
  position: relative;
  overflow: hidden;
  border-right: 3px solid;
  width: 0px;
  animation: typewriter 2s steps(10)  infinite alternate , blink 0.5s steps(10) infinite;
}

.loader-text {
  font-size: 40px;
  font-weight: 700;
  background: linear-gradient(to right,#159957, #155799);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes typewriter {
  0% {
    width: 0px;
  }

  100% {
    width: 240px;
  }
}

@keyframes blink {
  0% {
    border-right-color: rgba(255,255,255,.75);
    ;
  }

  100% {
    border-right-color: transparent;
  }
}
</style>


================================================
FILE: loaders/akshat-patel28_rare-turtle-53.html
================================================
<div class="loader">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
</div>
<style>
/* From Uiverse.io by akshat-patel28 - Tags: animation, loader, animated, box */
.loader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.box-1,.box-2,.box-3 {
  width: 1px;
  height: 115px;
  border: 1px solid #e9e9e9;
  background-color: transparent;
  box-sizing: border-box;
}

.box-1 {
  animation: box1animation 4s  forwards ease-in-out infinite;
}

@keyframes box1animation {
  0% {
    width: 1px;
  }

  12.5% {
    width: 60px;
  }

  25% {
    width: 60px;
  }

  37.5% {
    width: 1px;
  }

  50% {
    width: 1px;
  }

  62.5% {
    width: 1px;
  }

  75% {
    width: 1px;
  }

  100% {
    width: 1px;
  }
}

.box-2 {
  animation: box2animation 4s forwards ease-in-out infinite;
}

@keyframes box2animation {
  0% {
    width: 1px;
  }

  12.5% {
    width: 1px;
  }

  25% {
    width: 1px;
  }

  37.5% {
    width: 60px;
  }

  50% {
    width: 60px;
  }

  62.5% {
    width: 1px;
  }

  75% {
    width: 1px;
  }

  100% {
    width: 1px;
  }
}

.box-3 {
  animation: box3animation 4s  forwards ease-in-out infinite;
}

@keyframes box3animation {
  0% {
    width: 1px;
  }

  12.5% {
    width: 1px;
  }

  25% {
    width: 1px;
  }

  37.5% {
    width: 1px;
  }

  50% {
    width: 1px;
  }

  62.5% {
    width: 60px;
  }

  75% {
    width: 60px;
  }

  100% {
    width: 1px;
  }
}
</style>


================================================
FILE: loaders/alexruix_big-octopus-60.html
================================================

  <div class="loader">
    <span class="loader-text">loading</span>
      <span class="load"></span>
  </div>

<style>
/* From Uiverse.io by alexruix - Tags: loader */
.loader {
  width: 80px;
  height: 50px;
  position: relative;
}

.loader-text {
  position: absolute;
  top: 0;
  padding: 0;
  margin: 0;
  color: #C8B6FF;
  animation: text_713 3.5s ease both infinite;
  font-size: .8rem;
  letter-spacing: 1px;
}

.load {
  background-color: #9A79FF;
  border-radius: 50px;
  display: block;
  height: 16px;
  width: 16px;
  bottom: 0;
  position: absolute;
  transform: translateX(64px);
  animation: loading_713 3.5s ease both infinite;
}

.load::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #D1C2FF;
  border-radius: inherit;
  animation: loading2_713 3.5s ease both infinite;
}

@keyframes text_713 {
  0% {
    letter-spacing: 1px;
    transform: translateX(0px);
  }

  40% {
    letter-spacing: 2px;
    transform: translateX(26px);
  }

  80% {
    letter-spacing: 1px;
    transform: translateX(32px);
  }

  90% {
    letter-spacing: 2px;
    transform: translateX(0px);
  }

  100% {
    letter-spacing: 1px;
    transform: translateX(0px);
  }
}

@keyframes loading_713 {
  0% {
    width: 16px;
    transform: translateX(0px);
  }

  40% {
    width: 100%;
    transform: translateX(0px);
  }

  80% {
    width: 16px;
    transform: translateX(64px);
  }

  90% {
    width: 100%;
    transform: translateX(0px);
  }

  100% {
    width: 16px;
    transform: translateX(0px);
  }
}

@keyframes loading2_713 {
  0% {
    transform: translateX(0px);
    width: 16px;
  }

  40% {
    transform: translateX(0%);
    width: 80%;
  }

  80% {
    width: 100%;
    transform: translateX(0px);
  }

  90% {
    width: 80%;
    transform: translateX(15px);
  }

  100% {
    transform: translateX(0px);
    width: 16px;
  }
}
 
 


</style>


================================================
FILE: loaders/alexruix_fast-tiger-58.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by alexruix - Tags: loader */
.loader {
  --ballcolor: #f2f2f2;
  --shadow: 0px 0 #ffffff00;
  --shadowcolor: #ffffff00;
  width: 10px;
  height: 10px;
  left: -120px;
  border-radius: 50%;
  position: relative;
  color: var(--ballcolor);
  animation: shadowRolling 2s linear infinite;
}

@keyframes shadowRolling {
  
  0% {
    box-shadow: var(--shadow),
        var(--shadow),
        var(--shadow),
        var(--shadow);
  }

  12% {
    box-shadow: 100px 0 var(--ballcolor),
        var(--shadow),
        var(--shadow), 
        var(--shadow);
  }

  25% {
    box-shadow: 110px 0 var(--ballcolor),
        100px 0 var(--ballcolor),
        var(--shadow), 
        var(--shadow);
  }

  36% {
    box-shadow: 120px 0 var(--ballcolor), 
        110px 0 var(--ballcolor), 
        100px 0 var(--ballcolor), 
         var(--shadow);
  }

  50% {
    box-shadow: 130px 0 var(--ballcolor),
        120px 0 var(--ballcolor),
        110px 0 var(--ballcolor),
        100px 0 var(--ballcolor);
  }

  62% {
    box-shadow: 200px 0 var(--shadowcolor),
         130px 0 var(--ballcolor), 
         120px 0 var(--ballcolor), 
         110px 0 var(--ballcolor);
  }

  75% {
    box-shadow: 200px 0 var(--shadowcolor),
        200px 0 var(--shadowcolor),
        130px 0 var(--ballcolor), 
        120px 0 var(--ballcolor);
  }

  87% {
    box-shadow: 200px 0 var(--shadowcolor), 
        200px 0 var(--shadowcolor), 
        200px 0 var(--shadowcolor), 
        130px 0 var(--ballcolor);
  }

  100% {
    box-shadow: 200px 0 var(--shadowcolor), 
        200px 0 var(--shadowcolor),
        200px 0 var(--shadowcolor),
        200px 0 var(--shadowcolor);
  }
}
</style>


================================================
FILE: loaders/alexruix_fluffy-starfish-52.html
================================================
<div class="loader">
  <div class="cell d-0"></div>
  <div class="cell d-1"></div>
  <div class="cell d-2"></div>

  <div class="cell d-1"></div>
  <div class="cell d-2"></div>
  
  
  <div class="cell d-2"></div>
  <div class="cell d-3"></div>
  
  
  <div class="cell d-3"></div>
  <div class="cell d-4"></div>
  
  
</div>
<style>
/* From Uiverse.io by alexruix - Tags: loader */
.loader {
  --cell-size: 52px;
  --cell-spacing: 1px;
  --cells: 3;
  --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));
  display: flex;
  flex-wrap: wrap;
  width: var(--total-size);
  height: var(--total-size);
}

.cell {
  flex: 0 0 var(--cell-size);
  margin: var(--cell-spacing);
  background-color: transparent;
  box-sizing: border-box;
  border-radius: 4px;
  animation: 1.5s ripple ease infinite;
}

.cell.d-1 {
  animation-delay: 100ms;
}

.cell.d-2 {
  animation-delay: 200ms;
}

.cell.d-3 {
  animation-delay: 300ms;
}

.cell.d-4 {
  animation-delay: 400ms;
}

.cell:nth-child(1) {
  --cell-color: #00FF87;
}

.cell:nth-child(2) {
  --cell-color: #0CFD95;
}

.cell:nth-child(3) {
  --cell-color: #17FBA2;
}

.cell:nth-child(4) {
  --cell-color: #23F9B2;
}

.cell:nth-child(5) {
  --cell-color: #30F7C3;
}

.cell:nth-child(6) {
  --cell-color: #3DF5D4;
}

.cell:nth-child(7) {
  --cell-color: #45F4DE;
}

.cell:nth-child(8) {
  --cell-color: #53F1F0;
}

.cell:nth-child(9) {
  --cell-color: #60EFFF;
}

/*Animation*/
@keyframes ripple {
  0% {
    background-color: transparent;
  }

  30% {
    background-color: var(--cell-color);
  }

  60% {
    background-color: transparent;
  }

  100% {
    background-color: transparent;
  }
}
</style>


================================================
FILE: loaders/alexruix_fuzzy-yak-91.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by alexruix - Tags: loader, circle */
.loader {
  position: relative;
  margin: auto;
  box-sizing: border-box;
  background-clip: padding-box;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.1);
  -webkit-mask: linear-gradient(rgba(24, 24, 24, 0.2), rgba(24, 24, 24,0.9) 90%);
  transform-origin: 50% 60%;
  transform: perspective(200px) rotateX(66deg);
}

.loader:before, .loader:after {
  content: "";
  position: absolute;
  margin: -4px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 0.05;
  border: inherit;
  border-color: transparent;
  animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
}

.loader:before {
  border-top-color: #66e6ff;
}

.loader:after {
  border-top-color: #f0db75;
  animation-delay: 0.3s;
}

@keyframes spinner-spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinner-fade {
  20% {
    opacity: 0.1;
  }

  40% {
    opacity: 1;
  }

  60% {
    opacity: 0.1;
  }
}
 
</style>


================================================
FILE: loaders/alexruix_neat-tiger-82.html
================================================
<div class="loader">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>
<style>
/* From Uiverse.io by alexruix - Tags: loader */
.loader {
  width: 112px;
  height: 112px;
}

.box1,
.box2,
.box3 {
  border: 16px solid #f5f5f5;
  box-sizing: border-box;
  position: absolute;
  display: block;
}

.box1 {
  width: 112px;
  height: 48px;
  margin-top: 64px;
  margin-left: 0px;
  animation: abox1 4s 1s forwards ease-in-out infinite;
}

.box2 {
  width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 0px;
  animation: abox2 4s 1s forwards ease-in-out infinite;
}

.box3 {
  width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 64px;
  animation: abox3 4s 1s forwards ease-in-out infinite;
}

@keyframes abox1 {
  0% {
    width: 112px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }

  12.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }

  25% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }

  37.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }

  50% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }

  62.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }

  75% {
    width: 48px;
    height: 112px;
    margin-top: 0px;
    margin-left: 0px;
  }

  87.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }

  100% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
}

@keyframes abox2 {
  0% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }

  12.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }

  25% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }

  37.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }

  50% {
    width: 112px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }

  62.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }

  75% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }

  87.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }

  100% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }
}

@keyframes abox3 {
  0% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }

  12.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }

  25% {
    width: 48px;
    height: 112px;
    margin-top: 0px;
    margin-left: 64px;
  }

  37.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }

  50% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }

  62.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }

  75% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }

  87.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }

  100% {
    width: 112px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
}

</style>


================================================
FILE: loaders/alexruix_nervous-sheep-18.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by alexruix - Tags: loader, bars */
.loader {
  width: 8px;
  height: 40px;
  border-radius: 4px;
  display: block;
  background-color: currentColor;
  margin: 20px auto;
  position: relative;
  color: #f2f2f2;
  animation: animloader 0.3s 0.3s linear infinite alternate;
}

.loader::after,
.loader::before {
  content: '';
  width: 8px;
  height: 40px;
  border-radius: 4px;
  background: currentColor;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  animation: animloader 0.3s 0.45s linear infinite alternate;
}

.loader::before {
  left: -20px;
  animation-delay: 0s;
}

@keyframes animloader {
  0% {
    height: 48px;
  }

  100% {
    height: 4px;
  }
}
</style>


================================================
FILE: loaders/alexruix_tame-fly-42.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by alexruix - Tags: loader */
.loader {
  position: relative;
  width: 120px;
  height: 90px;
  margin: 0 auto;
}

.loader:before {
  content: "";
  position: absolute;
  bottom: 30px;
  left: 50px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #2a9d8f;
  animation: loading-bounce 0.5s ease-in-out infinite alternate;
}

.loader:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 7px;
  width: 45px;
  border-radius: 4px;
  box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2;
  animation: loading-step 1s ease-in-out infinite;
}

@keyframes loading-bounce {
  0% {
    transform: scale(1, 0.7);
  }

  40% {
    transform: scale(0.8, 1.2);
  }

  60% {
    transform: scale(1, 1);
  }

  100% {
    bottom: 140px;
  }
}

@keyframes loading-step {
  0% {
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0),
            0 10px 0 #f2f2f2,
            -35px 50px 0 #f2f2f2,
            -70px 90px 0 #f2f2f2;
  }

  100% {
    box-shadow: 0 10px 0 #f2f2f2,
            -35px 50px 0 #f2f2f2,
            -70px 90px 0 #f2f2f2,
            -70px 90px 0 rgba(0, 0, 0, 0);
  }
}
</style>


================================================
FILE: loaders/alexruix_white-cat-50.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by alexruix - Tags: loader */
.loader {
  width: 48px;
  height: 48px;
  margin: auto;
  position: relative;
}

.loader:before {
  content: '';
  width: 48px;
  height: 5px;
  background: #f0808050;
  position: absolute;
  top: 60px;
  left: 0;
  border-radius: 50%;
  animation: shadow324 0.5s linear infinite;
}

.loader:after {
  content: '';
  width: 100%;
  height: 100%;
  background: #f08080;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  animation: jump7456 0.5s linear infinite;
}

@keyframes jump7456 {
  15% {
    border-bottom-right-radius: 3px;
  }

  25% {
    transform: translateY(9px) rotate(22.5deg);
  }

  50% {
    transform: translateY(18px) scale(1, .9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }

  75% {
    transform: translateY(9px) rotate(67.5deg);
  }

  100% {
    transform: translateY(0) rotate(90deg);
  }
}

@keyframes shadow324 {

  0%,
    100% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1.2, 1);
  }
}
</style>


================================================
FILE: loaders/aliaypov1_smooth-hound-6.html
================================================
  <div class="loader">
    <div class="loaders"></div>
    <div class="loaders"></div>
    <div class="loaders"></div>
    <div class="loaders"></div>
    <div class="loaders"></div>
    <div class="loaders"></div>
    <div class="loaders"></div>
    <div class="loaders"></div>
</div>
<style>
/* From Uiverse.io by aliaypov1 - Tags: loader */
.loader {
  --uib-size: 2.8rem;
  --uib-speed: .9s;
  --uib-color: #183153;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--uib-size);
  width: var(--uib-size);
}

.loaders {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
}

.loaders::before {
  content: '';
  height: 20%;
  width: 20%;
  border-radius: 50%;
  background-color: var(--uib-color);
  transform: scale(0);
  opacity: 0.5;
  animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;
  box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
  padding-bottom: 222px;
}

.loaders:nth-child(2) {
  transform: rotate(45deg);
}

.loaders:nth-child(2)::before {
  animation-delay: calc(var(--uib-speed) * -0.875);
}

.loaders:nth-child(3) {
  transform: rotate(90deg);
}

.loaders:nth-child(3)::before {
  animation-delay: calc(var(--uib-speed) * -0.75);
}

.loaders:nth-child(4) {
  transform: rotate(135deg);
}

.loaders:nth-child(4)::before {
  animation-delay: calc(var(--uib-speed) * -0.625);
}

.loaders:nth-child(5) {
  transform: rotate(180deg);
}

.loaders:nth-child(5)::before {
  animation-delay: calc(var(--uib-speed) * -0.5);
}

.loaders:nth-child(6) {
  transform: rotate(225deg);
}

.loaders:nth-child(6)::before {
  animation-delay: calc(var(--uib-speed) * -0.375);
}

.dot-spinner__dot:nth-child(7) {
  transform: rotate(270deg);
}

.loaders:nth-child(7)::before {
  animation-delay: calc(var(--uib-speed) * -0.25);
}

.loaders:nth-child(8) {
  transform: rotate(315deg);
}

.loaders:nth-child(8)::before {
  animation-delay: calc(var(--uib-speed) * -0.125);
}

@keyframes pulse0112 {
  0%,
  100% {
    transform: scale(0);
    opacity: 0.5;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }
}

</style>


================================================
FILE: loaders/andrew-demchenk0_kind-ladybug-7.html
================================================
<div class="loader-wrapper">
  <div class="packman"></div>
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: loader, pacman */
.loader-wrapper {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.loader-wrapper .packman::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 25px;
  background-color: #EFF107;
  border-radius: 100px 100px 0 0;
  transform: translate(-50%, -50%);
  animation: pac-top 0.5s linear infinite;
  transform-origin: center bottom;
}

.loader-wrapper .packman::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 25px;
  background-color: #EFF107;
  border-radius: 0 0 100px 100px;
  transform: translate(-50%, 50%);
  animation: pac-bot 0.5s linear infinite;
  transform-origin: center top;
}

@keyframes pac-top {
  0% {
    transform: translate(-50%, -50%) rotate(0)
  }

  50% {
    transform: translate(-50%, -50%) rotate(-30deg)
  }

  100% {
    transform: translate(-50%, -50%) rotate(0)
  }
}

@keyframes pac-bot {
  0% {
    transform: translate(-50%, 50%) rotate(0)
  }

  50% {
    transform: translate(-50%, 50%) rotate(30deg)
  }

  100% {
    transform: translate(-50%, 50%) rotate(0)
  }
}

.dots .dot {
  position: absolute;
  z-index: -1;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}

.dots .dot:nth-child(1) {
  left: 90px;
  animation: dot-stage1 0.5s infinite;
}

.dots .dot:nth-child(2) {
  left: 60px;
  animation: dot-stage1 0.5s infinite;
}

.dots .dot:nth-child(3) {
  left: 30px;
  animation: dot-stage1 0.5s infinite;
}

.dots .dot:nth-child(4) {
  left: 10px;
  animation: dot-stage2 0.5s infinite;
}

@keyframes dot-stage1 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-24px, 0);
  }
}

@keyframes dot-stage2 {
  0% {
    transform: scale(1);
  }

  5%, 100% {
    transform: scale(0);
  }
}



</style>


================================================
FILE: loaders/andrew-demchenk0_new-kangaroo-60.html
================================================
<div class="cube-loader">
  <div class="cube-top"></div>
  <div class="cube-wrapper">
    <span style="--i:0" class="cube-span"></span>
    <span style="--i:1" class="cube-span"></span>
    <span style="--i:2" class="cube-span"></span>
    <span style="--i:3" class="cube-span"></span>
  </div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: 3d, loader, cube */
.cube-loader {
  position: relative;
/* u can choose any size */
  width: 75px;
  height: 75px;
  transform-style: preserve-3d;
  transform: rotateX(-30deg);
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotateX(-30deg) rotateY(0);
  }

  100% {
    transform: rotateX(-30deg) rotateY(360deg);
  }
}

.cube-loader .cube-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  /* top: 0;
  left: 0; */
  transform-style: preserve-3d;
}

.cube-loader .cube-wrapper .cube-span {
  position: absolute;
  width: 100%;
  height: 100%;
  /* top: 0;
  left: 0; */
                                     /* width 75px / 2 = 37.5px */
  transform: rotateY(calc(90deg * var(--i))) translateZ(37.5px);
  background: linear-gradient(
    to bottom,
    hsl(330, 3.13%, 25.1%) 0%,
    hsl(177.27, 21.71%, 32.06%) 5.5%,
    hsl(176.67, 34.1%, 36.88%) 12.1%,
    hsl(176.61, 42.28%, 40.7%) 19.6%,
    hsl(176.63, 48.32%, 43.88%) 27.9%,
    hsl(176.66, 53.07%, 46.58%) 36.6%,
    hsl(176.7, 56.94%, 48.91%) 45.6%,
    hsl(176.74, 62.39%, 50.91%) 54.6%,
    hsl(176.77, 69.86%, 52.62%) 63.4%,
    hsl(176.8, 76.78%, 54.08%) 71.7%,
    hsl(176.83, 83.02%, 55.29%) 79.4%,
    hsl(176.85, 88.44%, 56.28%) 86.2%,
    hsl(176.86, 92.9%, 57.04%) 91.9%,
    hsl(176.88, 96.24%, 57.59%) 96.3%,
    hsl(176.88, 98.34%, 57.93%) 99%,
    hsl(176.89, 99.07%, 58.04%) 100%
  );
}

.cube-top {
  position: absolute;
  width: 75px;
  height: 75px;
  background: hsl(330, 3.13%, 25.1%) 0%;
                      /* width 75px / 2 = 37.5px */
  transform: rotateX(90deg) translateZ(37.5px);
  transform-style: preserve-3d;
}

.cube-top::before {
  content: '';
  position: absolute;
/* u can choose any size */
  width: 75px;
  height: 75px;
  background: hsl(176.61, 42.28%, 40.7%) 19.6%;
  transform: translateZ(-90px);
  filter: blur(10px);
  box-shadow: 0 0 10px #323232,
              0 0 20px hsl(176.61, 42.28%, 40.7%) 19.6%,
              0 0 30px #323232,
              0 0 40px hsl(176.61, 42.28%, 40.7%) 19.6%;
}

</style>


================================================
FILE: loaders/andrew-demchenk0_orange-monkey-2.html
================================================
<div class="pyramid-loader">
  <div class="wrapper">
    <span class="side side1"></span>
    <span class="side side2"></span>
    <span class="side side3"></span>
    <span class="side side4"></span>
    <span class="shadow"></span>
  </div>  
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: loader */
.pyramid-loader {
  position: relative;
  width: 300px;
  height: 300px;
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(-20deg);
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotateY(360deg);
  }
}

.pyramid-loader .wrapper .side {
  width: 70px;
  height: 70px;
/* you can choose any gradient or color you want */
  /* background: radial-gradient( #2F2585 10%, #F028FD 70%, #2BDEAC 120%); */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform-origin: center top;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.pyramid-loader .wrapper .side1 {
  transform: rotateZ(-30deg) rotateY(90deg);
  background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);
}

.pyramid-loader .wrapper .side2 {
  transform: rotateZ(30deg) rotateY(90deg);
  background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);
}

.pyramid-loader .wrapper .side3 {
  transform: rotateX(30deg);
  background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);
}

.pyramid-loader .wrapper .side4 {
  transform: rotateX(-30deg);
  background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);
}

.pyramid-loader .wrapper .shadow {
  width: 60px;
  height: 60px;
  background: #8B5AD5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform: rotateX(90deg) translateZ(-40px);
  filter: blur(12px);
}
</style>


================================================
FILE: loaders/andrew-demchenk0_silent-earwig-10.html
================================================
<div class="loader">
   <div data-glitch="Loading..." class="glitch">Loading...</div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: loader, glitch, animated, colorful */
.glitch {
  position: relative;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  letter-spacing: 5px;
  z-index: 1;
  animation: shift 1s ease-in-out infinite alternate;
}

.glitch:before,
.glitch:after {
  display: block;
  content: attr(data-glitch);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
}

.glitch:before {
  animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  color: #8b00ff;
  z-index: -1;
}

.glitch:after {
  animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
  color: #00e571;
  z-index: -2;
}

@keyframes glitch {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-3px, 3px);
  }

  40% {
    transform: translate(-3px, -3px);
  }

  60% {
    transform: translate(3px, 3px);
  }

  80% {
    transform: translate(3px, -3px);
  }

  to {
    transform: translate(0);
  }
}

@keyframes shift {
  0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
    transform: skewX(0deg);
  }

  41% {
    transform: skewX(10deg);
  }

  42% {
    transform: skewX(-10deg);
  }

  59% {
    transform: skewX(40deg) skewY(10deg);
  }

  60% {
    transform: skewX(-40deg) skewY(-10deg);
  }

  63% {
    transform: skewX(10deg) skewY(-5deg);
  }

  70% {
    transform: skewX(-50deg) skewY(-20deg);
  }

  71% {
    transform: skewX(10deg) skewY(-10deg);
  }
}

</style>


================================================
FILE: loaders/andrew-demchenk0_white-robin-100.html
================================================
<div class="loader">
  <div style="--i:1" class="loader_item"></div>
  <div style="--i:2" class="loader_item"></div>
  <div style="--i:3" class="loader_item"></div>
  <div style="--i:4" class="loader_item"></div>
  <div style="--i:5" class="loader_item"></div> 
  <div style="--i:6" class="loader_item"></div>
  <div style="--i:7" class="loader_item"></div>
  <div style="--i:8" class="loader_item"></div>
  <div style="--i:9" class="loader_item"></div>
  <div style="--i:10" class="loader_item"></div>
  <div style="--i:11" class="loader_item"></div>
  <div style="--i:12" class="loader_item"></div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: loader */
.loader {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.loader .loader_item {
  transform-origin: 40px 40px;
  animation: spinner 1.2s linear infinite;
}

.loader .loader_item:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  /* try any color u want (yellow, red, lightskyblue ect...) */
  background: green;
}

.loader .loader_item:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.loader .loader_item:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}

.loader .loader_item:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}

.loader .loader_item:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.loader .loader_item:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}

.loader .loader_item:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}

.loader .loader_item:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}

.loader .loader_item:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}

.loader .loader_item:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}

.loader .loader_item:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}

.loader .loader_item:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}

.loader .loader_item:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes spinner {
  0% {
    opacity: 1;
    filter: hue-rotate(0deg);
  }

  100% {
    opacity: 0;
    filter: hue-rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/angelo2004-mateus_neat-owl-38.html
================================================
<div class="loader">
  <span></span>
</div>
<style>
/* From Uiverse.io by angelo2004-mateus - Tags: material design, neumorphism, animation, loader, animated, gradients */
.loader {
  width: 10rem;
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 50%;
  box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94, 104, 121, 0.137);
}

.loader:before {
  height: 4rem;
  width: 4rem;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: #ececec;
  border-radius: 50%;
  border: 2px solid #e2e1e1;
  box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94,104,121,0.3);
}

.loader span {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgb(89, 92, 252), rgb(226, 57, 241));
  animation: rotate 1s infinite linear;
}

@keyframes rotate {

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/arshshaikh06_purple-sheep-4.html
================================================
<div id="container">
  <div id="square" class="shimmer"></div>
  <div id="content">
    <div id="content-title" class="shimmer"></div>
    <div id="content-desc">
      <div class="line shimmer"></div>
      <div class="line shimmer"></div>
      <div class="line shimmer"></div>
      <div class="line shimmer"></div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by arshshaikh06 - Source: https://codepen.io/arsh-shaikh/pen/JjEQYmW - Tags: loader, dark, shimmer */
.shimmer {
  position: relative;
  background: #3a3a3a;
  background-image: linear-gradient(to right, #3a3a3a 0%, #3f3f3f 10%, #4a4a4a 20%, #3f3f3f 30%, #3a3a3a 50%, #3a3a3a 100%);
  background-repeat: no-repeat;
  background-size: 800px 200px;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: shimmer;
  -webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

#container {
  width: 400px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#square {
  width: 135px;
  height: 135px;
}

#content {
  flex: 1;
  height: 150px;
  width: 100%;
  padding: 0.5rem 1rem 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

#content-title {
  width: 100%;
  height: 30px;
  margin-bottom: 1rem;
}

#content-desc {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-end;
}

.line {
  width: 100%;
  height: 10px;
}
</style>


================================================
FILE: loaders/aryamitra06_silent-lion-21.html
================================================
<div class="loader">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</div>
<style>
/* From Uiverse.io by aryamitra06 - Tags: loader */
.loader {
  display: flex;
  align-items: center;
}

.bar {
  display: inline-block;
  width: 3px;
  height: 20px;
  background-color: rgba(255, 255, 255, .5);
  border-radius: 10px;
  animation: scale-up4 1s linear infinite;
}

.bar:nth-child(2) {
  height: 35px;
  margin: 0 5px;
  animation-delay: .25s;
}

.bar:nth-child(3) {
  animation-delay: .5s;
}

@keyframes scale-up4 {
  20% {
    background-color: #ffff;
    transform: scaleY(1.5);
  }

  40% {
    transform: scaleY(1);
  }
}
</style>


================================================
FILE: loaders/asgardOP_ancient-cow-78.html
================================================
<ul>
  <li>
    <div class="loader">
      <div class="child"></div>
    </div>
  </li>

  <li>
    <div class="text"></div>
  </li>
</ul>

<style>
/* From Uiverse.io by asgardOP  - Tags: simple, purple, loading, loader, modern, css, effect loader, loading animation */
.loader {
  width: 100px;
  height: 3px;
  background-color: rgb(15, 15, 15);
  border-radius: 20px;
  overflow: hidden;
}

.child {
  width: 60px;
  height: 3px;
  background-color: rgb(107, 27, 255);
  border-radius: 20px;
  z-index: 0;
  margin-left: -60px;
  animation: go 1s 0s infinite;
}

@keyframes go {
  from {
    margin-left: -100px;
    width: 80px;
  }
  to {
    width: 30px;
    margin-left: 110px;
  }
}

ul {
  list-style: none;
}

.text {
  width: 100px;
  height: 30px;
  background-color: transparent;
  margin-top: 20px;
  text-align: center;
}

.text::before {
  content: "Loading";
  color: white;
  animation: text 1s 0s infinite;
}

@keyframes text {
  0% {
    content: "Loading";
  }

  30% {
    content: "Loading.";
  }

  60% {
    content: "Loading..";
  }

  100% {
    content: "Loading...";
  }
}

</style>
    

================================================
FILE: loaders/asgardOP_little-cougar-80.html
================================================
<div class="loader l1"></div>
<div class="loader l2"></div>
<div class="loader l3"></div>
<div class="loader l4"></div>
<div class="loader l5"></div>
<div class="loader l6"></div>
<div class="loader l7"></div>

<style>
/* From Uiverse.io by asgardOP  - Tags: green, loading, loader, smooth, modern, css, css effect, loading animation */
.loader {
  width: 5px;
  margin-left: 3px;
  height: 35px;
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  background-color: rgb(53, 235, 29);
  position: relative;
}

.l1 {
  animation: l1 1s 0s infinite ease;
}

.l2 {
  animation: l1 1s 0.1s infinite ease;
}

.l3 {
  animation: l1 1s 0.2s infinite ease;
}

.l4 {
  animation: l1 1s 0.3s infinite ease;
}

.l5 {
  animation: l1 1s 0.4s infinite ease;
}

.l6 {
  animation: l1 1s 0.5s infinite ease;
}

.l7 {
  animation: l1 1s 0.6s infinite ease;
}

@keyframes l1 {
  0% {
    height: 35px;
  }
  50% {
    height: 5px;
    background-color: rgba(0, 190, 16, 0);
  }

  100% {
    height: 35px;
  }
}

</style>
    

================================================
FILE: loaders/asgardOP_sour-mayfly-20.html
================================================
<div class="loader">
  <svg
    viewBox="0 0 24 24"
    fill="none"
    height="24"
    width="24"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    class="w-6 h-6 text-gray-800 dark:text-white"
  >
    <path
      d="M12 5.365V3m0 2.365a5.338 5.338 0 0 1 5.133 5.368v1.8c0 2.386 1.867 2.982 1.867 4.175 0 .593 0 1.292-.538 1.292H5.538C5 18 5 17.301 5 16.708c0-1.193 1.867-1.789 1.867-4.175v-1.8A5.338 5.338 0 0 1 12 5.365ZM8.733 18c.094.852.306 1.54.944 2.112a3.48 3.48 0 0 0 4.646 0c.638-.572 1.236-1.26 1.33-2.112h-6.92Z"
      stroke-width="2"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke="currentColor"
    ></path>
  </svg>
  <div class="point"></div>
</div>

<style>
/* From Uiverse.io by asgardOP  - Tags: animation, alert, notification, loading, loader, dark, wave, css */
.loader {
  width: fit-content;
  height: fit-content;
  background-color: rgb(58, 58, 58);
  border-radius: 7px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: 0.2s;
}

.loader:hover {
  background-color: rgb(26, 26, 26);
}

.loader:hover svg {
  color: white;
}

.loader svg {
  color: rgba(255, 255, 255, 0.651);
  transform: scale(1.2);
  transition: 0.2s;
}

.point {
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 6px;
  height: 6px;
  background-color: rgb(0, 255, 0);
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.point::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  background-color: rgb(0, 255, 0);
  border-radius: 25px;
  animation: loop 1s 0s infinite;
}

@keyframes loop {
  0% {
    background-color: rgb(0, 255, 0);
    width: 1px;
    height: 1px;
  }
  100% {
    background-color: rgba(0, 255, 0, 0);
    width: 30px;
    height: 30px;
  }
}

</style>
    

================================================
FILE: loaders/ashish-yadv_heavy-walrus-26.html
================================================
<div class="loader">
  <li class="ball"></li>
  <li class="ball"></li>
  <li class="ball"></li>
</div>
<style>
/* From Uiverse.io by ashish-yadv - Tags: animation, loader, loading animation, bouncing animation, bounce animation */
.loader {
  width: 60px;
  display: flex;
  justify-content: space-evenly;
}

.ball {
  list-style: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #fff;
}

.ball:nth-child(1) {
  animation: bounce-1 2.1s ease-in-out infinite;
}

@keyframes bounce-1 {
  50% {
    transform: translateY(-18px);
  }
}

.ball:nth-child(2) {
  animation: bounce-3 2.1s ease-in-out 0.3s infinite;
}

@keyframes bounce-2 {
  50% {
    transform: translateY(-18px);
  }
}

.ball:nth-child(3) {
  animation: bounce-3 2.1s ease-in-out 0.6s infinite;
}

@keyframes bounce-3 {
  50% {
    transform: translateY(-18px);
  }
}
</style>


================================================
FILE: loaders/ashish-yadv_hungry-otter-20.html
================================================
<div class="loader">
        <li class="dots" id="dot-1"></li>
        <li class="dots" id="dot-2"></li>
        <li class="dots" id="dot-3"></li>
    </div>
<style>
/* From Uiverse.io by ashish-yadv - Tags: loader, simple loader, dot loader */
.loader {
  display: flex;
  gap: 0.6em;
  list-style: none;
}

.dots {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffffff;
}

#dot-1 {
  animation: loader-1 0.6s infinite ease-in-out;
}

@keyframes loader-1 {
  50% {
    opacity: 0;
    transform: translateY(-0.3em);
  }
}

#dot-2 {
  animation: loader-2 0.6s 0.3s infinite ease-in-out;
}

@keyframes loader-2 {
  50% {
    opacity: 0;
    transform: translateY(-0.3em);
  }
}

#dot-3 {
  animation: loader-3 0.6s 0.6s infinite ease-in-out;
}

@keyframes loader-3 {
  50% {
    opacity: 0;
    transform: translateY(-0.3em);
  }
}
</style>


================================================
FILE: loaders/ayman-ashine_rare-otter-33.html
================================================
<div class="loader">
  <div class="layer">loading</div>
  <div class="layer">loading</div>
</div>

<style>
/* From Uiverse.io by ayman-ashine  - Tags: loader, animated, multicolor */
.loader {
  --c-1: #a2ff37;
  --c-2: #5bb2ff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.layer {
  font-size: 25px;
  font-family: "Segoe UI", Tahoma;
  font-weight: 800;
  text-transform: uppercase;
  position: absolute;
}

.layer:nth-child(1) {
  color: var(--c-1);
  animation: kfs-3412 0.5s infinite;
}

.layer:nth-child(2) {
  color: var(--c-2);
  animation: kfs-3412 0.5s 0.25s infinite;
}

@keyframes kfs-3412 {
  0% {
    text-shadow: 0 0 30px var(--c-1);
    transform: scaleY(0);
    z-index: 2;
  }
  50% {
    transform: scaleY(1.5);
    z-index: 2;
  }
  100% {
    transform: scaleY(1.5);
    z-index: 0;
  }
}

</style>
    

================================================
FILE: loaders/barisdogansutcu_light-rat-32.html
================================================
<svg viewBox="25 25 50 50">
  <circle r="20" cy="50" cx="50"></circle>
</svg>
<style>
/* From Uiverse.io by barisdogansutcu - Tags: loader, spinner */
svg {
 width: 3.25em;
 transform-origin: center;
 animation: rotate4 2s linear infinite;
}

circle {
 fill: none;
 stroke: hsl(214, 97%, 59%);
 stroke-width: 2;
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
 stroke-linecap: round;
 animation: dash4 1.5s ease-in-out infinite;
}

@keyframes rotate4 {
 100% {
  transform: rotate(360deg);
 }
}

@keyframes dash4 {
 0% {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
 }

 50% {
  stroke-dasharray: 90, 200;
  stroke-dashoffset: -35px;
 }

 100% {
  stroke-dashoffset: -125px;
 }
}

</style>


================================================
FILE: loaders/bek_uz_time_old-dodo-74.html
================================================
<div class="loader">
  <span></span>
</div>

<style>
/* From Uiverse.io by bek_uz_time  - Tags: red, loader, css */
.loader {
  position: relative;
  width: 150px;
  height: 150px;
  background: transparent;
  border-radius: 30%;
  box-shadow: 25px 25px 75px rgba(0, 0, 0, 1.55);
  border: 1px solid #ecc904;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.loader::before {
  content: "";
  position: absolute;
  inset: 20px;
  background: transparent;
  border: 1px dashed #b0a1a1;
  border-radius: 30%;
  box-shadow: inset -5px -5px 25px rgba(0, 10, 10, 15),
    inset 5px 5px 35px rgba(10, 0, 10, 2);
}

.loader::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 30%;
  border: 1px dashed #d6d3d3;
  box-shadow: inset -5px -5px 25px rgba(10, 10, 10, 2.25),
    inset 5px 5px 35px rgba(10, 10, 10, 10.45);
}

.loader span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 100%;
  background: transparent;
  transform-origin: top left;
  animation: radar81 1s linear infinite;
  border-top: 1px dashed #c1bdbd;
}

.loader span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f20303;
  /* pink */
  transform-origin: top left;
  transform: rotate(-55deg);
  filter: blur(30px) drop-shadow(20px 20px 20px #ff0241);
  /* pink */
}

@keyframes radar81 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

</style>
    

================================================
FILE: loaders/benjimich_shy-newt-25.html
================================================
<div class="loader">
  <div class="inner_loader"></div>
</div>
<style>
/* From Uiverse.io by benjimich - Tags: loader, color */
.loader {
  width: 200px;
  height: 10px;
  background: #004643;
  border-radius: 50px;
  overflow: hidden;
}

.inner_loader {
  width: 60%;
  height: 100%;
  background: #f9bc60;
  border-radius: 50px;
  animation: moveLeftRight 3s ease-in-out infinite;
}

@keyframes moveLeftRight {
  0% {
    transform: translateX(calc(-100% + 10px));
  }

  50% {
    transform: translateX(calc(200px - 10px));
  }

  100% {
    transform: translateX(calc(-100% + 10px));
  }
}
</style>


================================================
FILE: loaders/bernethe_breezy-bullfrog-65.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by bernethe - Tags: loader */
.loader {
  border-radius: 50%;
  border-top: 16px rgba(0,0,0,0.75) solid;
  border-left: 16px rgba(0,0,0,0.25) solid;
  border-bottom: 16px rgba(0,0,0,0.25) solid;
  border-right: 16px rgba(0,0,0,0.25) solid;
  animation: spSlices 1s infinite linear;
}

@keyframes spSlices {
  0% {
    border-top: 16px rgba(0,0,0,0.75) solid;
    border-right: 16px rgba(0,0,0,0.25) solid;
    border-bottom: 16px rgba(0,0,0,0.25) solid;
    border-left: 16px rgba(0,0,0,0.25) solid;
  }

  25% {
    border-top: 16px rgba(0,0,0,0.25) solid;
    border-right: 16px rgba(0,0,0,0.75) solid;
    border-bottom: 16px rgba(0,0,0,0.25) solid;
    border-left: 16px rgba(0,0,0,0.25) solid;
  }

  50% {
    border-top: 16px rgba(0,0,0,0.25) solid;
    border-right: 16px rgba(0,0,0,0.25) solid;
    border-bottom: 16px rgba(0,0,0,0.75) solid;
    border-left: 16px rgba(0,0,0,0.25) solid;
  }

  75% {
    border-top: 16px rgba(0,0,0,0.25) solid;
    border-right: 16px rgba(0,0,0,0.25) solid;
    border-bottom: 16px rgba(0,0,0,0.25) solid;
    border-left: 16px rgba(0,0,0,0.75) solid;
  }

  100% {
    border-top: 16px rgba(0,0,0,0.75) solid;
    border-right: 16px rgba(0,0,0,0.25) solid;
    border-bottom: 16px rgba(0,0,0,0.25) solid;
    border-left: 16px rgba(0,0,0,0.25) solid;
  }
}


</style>


================================================
FILE: loaders/bernethe_fat-impala-67.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by bernethe - Tags: loader */
.loader {
  clear: both;
  width: 2rem;
  height: 2rem;
  margin: 1rem auto;
  border: 0.0625rem #000 solid;
  border-radius: 0.25rem;
  position: relative;
  background: linear-gradient(45deg, transparent 49%, #000 50%, #000 50%, transparent 51%, transparent),
				linear-gradient(-45deg, transparent 49%, #000 50%, #000 50%, transparent 51%, transparent);
  background-size: 1rem 1rem;
  background-position: 0% 0%;
  -webkit-animation: spTexture 1s infinite linear;
  animation: spTexture 1s infinite linear;
}

@keyframes spTexture {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -1rem 0;
  }
}
</style>


================================================
FILE: loaders/bernethe_friendly-termite-42.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by bernethe - Tags: loader */
.loader {
  width: 2rem;
  height: 2rem;
  clear: both;
  margin: 1rem auto;
  border: 0.0625rem #000 solid;
  border-radius: .25rem;
  overflow: hidden;
  position: relative;
}

.loader:after, .loader:before {
  content: '';
  border-radius: 50%;
  position: absolute;
  width: inherit;
  height: inherit;
  animation: spVortex 2s infinite linear;
}

.loader:before {
  border-top: 0.375rem #000 solid;
  top: -0.1875rem;
  left: calc( -50% - 0.1875rem );
  transform-origin: right center;
}

.loader:after {
  border-bottom: 0.375rem #000 solid;
  top: 0.1875rem;
  right: calc( -50% - 0.1875rem );
  transform-origin: left center;
}

@keyframes spVortex {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}
</style>


================================================
FILE: loaders/bernethe_modern-dolphin-97.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by bernethe - Tags: loader */
.loader {
  width: 2rem;
  height: 2rem;
  clear: both;
  margin: 1rem auto;
  border-radius: 50%;
  border-left: 0 #000 solid;
  border-right: 0 #000 solid;
  animation: spSphere 1s infinite linear;
}

@keyframes spSphere {
  0% {
    border-left: 0 #000 solid;
    border-right: 0 #000 solid;
  }

  33% {
    border-left: 2rem #000 solid;
    border-right: 0 #000 solid;
  }

  34% {
    border-left: 0 #000 solid;
    border-right: 2rem #000 solid;
  }

  66% {
    border-left: 0 #000 solid;
    border-right: 0 #000 solid;
  }
}

</style>


================================================
FILE: loaders/bernethe_purple-snail-8.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by bernethe - Tags: loader */
.loader {
  clear: both;
  margin: 1rem auto;
  width: 3.125rem;
  height: 1.125rem;
  border: 1px #000 solid;
  border-radius: 4px;
  background: linear-gradient(-60deg, transparent 0%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);
  background-size: 20px 30px;
  background-position: 0px 0px;
  animation: spLoadBar 0.8s infinite linear;
}

@keyframes spLoadBar {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -20px 0px;
  }
}
</style>


================================================
FILE: loaders/bhaveshxrawat_silly-panda-37.html
================================================
<section class="area">
  <div class="ball"></div>
</section>
<style>
/* From Uiverse.io by bhaveshxrawat - Tags: loader */
.ball {
 position: relative;
 height: 15px;
 width: 15px;
 background-color: rgb(255, 44, 44);
 border-radius: 50%;
 animation: bounce 0.5s ease-in-out infinite both;
}

@keyframes bounce {
 0%, 100% {
  transform: translate(0px, 0px);
 }

 50% {
  transform: translate(0px, 50px) scale(1, 0.77);
 }
}
</style>


================================================
FILE: loaders/bhaveshxrawat_unlucky-wolverine-79.html
================================================
<div class="loader">
<div class="bar" id="red"></div>
<div class="bar" id="mint"></div>
<div class="bar" id="grey"></div>
<div class="bar" id="purple"></div>
</div>
<style>
/* From Uiverse.io by bhaveshxrawat - Tags: loader */
.loader {
 display: flex;
 justify-content: center;
 align-content: center;
 align-items: center;
 gap: 5px;
 height: 80px;
 width: 80px;
}

.bar {
 width: 7px;
 height: 50px;
 border-radius: 10em;
 background-image: linear-gradient(60deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
 background-size: 390%;
 animation: live 2s linear infinite;
}

@keyframes live {
 0%, 50%, 100% {
  transform: scaleY(1);
 }

 30%, 70% {
  background-position: right;
  transform: scaleY(1.15);
 }
}
</style>


================================================
FILE: loaders/bociKond_breezy-sloth-97.html
================================================
<div class="phone">
  <span class="loader"></span>
  <span class="text">Loading...</span>
</div>
<style>
/* From Uiverse.io by bociKond - Source: https://uiverse.io/Nawsome/ugly-skunk-66 - Tags: loading, phone, loader, circle loader, shake, camera, iphone */
/* phone */
.phone {
  --screen-clr: #0d85aa;
  --border-clr: #29536d;
  --loader-clr: #CCE3DE;
  background-color: var(--screen-clr);
  height: 13rem;
  aspect-ratio: 10/16;
  border-radius: .5rem;
  border: 5px solid var(--border-clr);
  border-top: 10px solid var(--border-clr);
  border-bottom: 10px solid var(--border-clr);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  animation: shake .5s infinite linear;
  position: relative;
}

/* camera */
.phone::after {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 1rem;
  height: 5px;
  background-color: var(--loader-clr);
  border-radius: .5rem;
}

/* loader */
.loader {
  border: 10px dashed var(--loader-clr);
  width: 2rem;
  height: 2rem;
  padding: 1.7rem;
  border-radius: 50%;
  animation: loading 2s infinite ease-in-out;
}

/* loading text */
.text {
  color: var(--loader-clr);
}

/* loader spinning */
@keyframes loading {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 360deg;
  }
}

/* phone shaking */
@keyframes shake {
  0% {
    rotate: 0deg;
  }

  10% {
    rotate: .5deg;
  }

  20% {
    rotate: 0deg;
  }

  30% {
    rotate: -.5deg;
  }

  50% {
    rotate: 0deg;
  }

  100% {
    rotate: 0deg;
  }
}
</style>


================================================
FILE: loaders/bociKond_foolish-sloth-24.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by bociKond - Tags: minimalist, loading, loader, animated, color, minimal */
.loader {
  /* color of choise */
  --clr: #05A8AA;
  /* loading time of choice */
  --load-time: 2s;
  outline: 5px solid var(--clr);
  outline-offset: 5px;
  position: relative;
  overflow: hidden;
  border-radius: 5rem;
  /* width: 10rem; */
  /* height: 2rem; */
  padding: 1rem 5rem;
  /* use either padding or width + height*/
  /* I prefer the padding one */
  /* rotate: -90deg; */
  /* rotate if you want/need vertical loader */
}

.loader::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--clr);
  z-index: 2;
  animation: loading var(--load-time) ease-in-out infinite;
}

@keyframes loading {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}
</style>


================================================
FILE: loaders/bociKond_green-mayfly-76.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by bociKond - Source: https://10015.io/ - Tags: simple, flashy, loader */
.loader {
  width: 44.8px;
  height: 44.8px;
  color: #554cb5;
  position: relative;
  background: radial-gradient(11.2px,currentColor 94%,#0000);
}

.loader:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(10.08px at bottom right,#0000 94%,currentColor) top    left,
          radial-gradient(10.08px at bottom left ,#0000 94%,currentColor) top    right,
          radial-gradient(10.08px at top    right,#0000 94%,currentColor) bottom left,
          radial-gradient(10.08px at top    left ,#0000 94%,currentColor) bottom right;
  background-size: 22.4px 22.4px;
  background-repeat: no-repeat;
  animation: loader 1.5s infinite cubic-bezier(0.3,1,0,1);
}

@keyframes loader {
  33% {
    inset: -11.2px;
    transform: rotate(0deg);
  }

  66% {
    inset: -11.2px;
    transform: rotate(90deg);
  }

  100% {
    inset: 0;
    transform: rotate(90deg);
  }
}
</style>


================================================
FILE: loaders/bociKond_red-dingo-74.html
================================================
<div class="spinner">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
/* From Uiverse.io by bociKond - Source: https://10015.io - Tags: green, loader, spinner, custom, variables */
.spinner {
  position: relative;
  width: 24.6px;
  height: 24.6px;
  animation-name: rotateSpin;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
  --clr: #3E885B;
}

@keyframes rotateSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.spinner div {
  width: 100%;
  height: 100%;
  background-color: var(--clr);
  border-radius: 50%;
  animation: spinnerAni 1s infinite backwards;
}

.spinner div:nth-child(1) {
  animation-delay: 0.12s;
  background-color: var(--clr);
  opacity: .9;
}

.spinner div:nth-child(2) {
  animation-delay: 0.24s;
  background-color: var(--clr);
  opacity: .8;
}

.spinner div:nth-child(3) {
  animation-delay: 0.36s;
  background-color: var(--clr);
  opacity: .7;
}

.spinner div:nth-child(4) {
  animation-delay: 0.48s;
  background-color: var(--clr);
  opacity: .6;
}

.spinner div:nth-child(5) {
  animation-delay: 0.60s;
  background-color: var(--clr);
  opacity: .5;
}

@keyframes spinnerAni {
  0% {
    transform: rotate(0deg) translateY(-200%);
  }

  60%, 100% {
    transform: rotate(360deg) translateY(-200%);
  }
}
</style>


================================================
FILE: loaders/bociKond_wise-bat-13.html
================================================
<div class="spinner">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
/* From Uiverse.io by bociKond - Source: https://10015.io - Tags: animation, loader, spinner, rotate, custom, opacity, color, spin, click animation */
.spinner {
  width: 70.4px;
  height: 70.4px;
  --clr: rgb(247, 197, 159);
  --clr-alpha: rgb(247, 197, 159,.1);
  animation: spinner 1.6s infinite ease;
  transform-style: preserve-3d;
}

.spinner > div {
  background-color: var(--clr-alpha);
  height: 100%;
  position: absolute;
  width: 100%;
  border: 3.5px solid var(--clr);
}

.spinner div:nth-of-type(1) {
  transform: translateZ(-35.2px) rotateY(180deg);
}

.spinner div:nth-of-type(2) {
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
}

.spinner div:nth-of-type(3) {
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
}

.spinner div:nth-of-type(4) {
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
}

.spinner div:nth-of-type(5) {
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
}

.spinner div:nth-of-type(6) {
  transform: translateZ(35.2px);
}

@keyframes spinner {
  0% {
    transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
  }

  50% {
    transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
  }

  100% {
    transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
  }
}
</style>


================================================
FILE: loaders/boryanakrasteva_ancient-quail-68.html
================================================
<div class="honeycomb">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: loader */
@-webkit-keyframes honeycomb {
  0%,
  20%,
  80%,
  100% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  30%,
  70% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes honeycomb {
  0%,
  20%,
  80%,
  100% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  30%,
  70% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.honeycomb {
  height: 24px;
  position: relative;
  width: 24px;
}

.honeycomb div {
  -webkit-animation: honeycomb 2.1s infinite backwards;
  animation: honeycomb 2.1s infinite backwards;
  background: #f3f3f3;
  height: 12px;
  margin-top: 6px;
  position: absolute;
  width: 24px;
}

.honeycomb div:after, .honeycomb div:before {
  content: '';
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  position: absolute;
  left: 0;
  right: 0;
}

.honeycomb div:after {
  top: -6px;
  border-bottom: 6px solid #f3f3f3;
}

.honeycomb div:before {
  bottom: -6px;
  border-top: 6px solid #f3f3f3;
}

.honeycomb div:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  left: -28px;
  top: 0;
}

.honeycomb div:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
  left: -14px;
  top: 22px;
}

.honeycomb div:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  left: 14px;
  top: 22px;
}

.honeycomb div:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  left: 28px;
  top: 0;
}

.honeycomb div:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  left: 14px;
  top: -22px;
}

.honeycomb div:nth-child(6) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  left: -14px;
  top: -22px;
}

.honeycomb div:nth-child(7) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  left: 0;
  top: 0;
}
</style>


================================================
FILE: loaders/boryanakrasteva_fast-eagle-21.html
================================================
<div class="loader">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: loader */
.loader {
  position: relative;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0px;
  height: 0px;
  border-radius: 100%;
  opacity: 0;
  animation: pulse_4923 4s infinite linear;
  border: 0.5px solid #f3f3f3;
  box-shadow: 0px 0px 5px #eef0e5;
}

.circle:nth-child(1) {
  animation-delay: .2s;
}

.circle:nth-child(2) {
  animation-delay: .4s;
}

.circle:nth-child(3) {
  animation-delay: .8s;
}

.circle:nth-child(4) {
  animation-delay: 1s;
}

@keyframes pulse_4923 {
  0% {
    opacity: 0.0;
    width: 0px;
    height: 0px;
    transform: translate(-50%, -50%) scale(1);
  }

  10% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(2);
  }

  100% {
    opacity: 0.0;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%) scale(1);
  }
}

</style>


================================================
FILE: loaders/boryanakrasteva_shy-treefrog-52.html
================================================
<div class="follow-the-leader-line">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
/* From Uiverse.io by boryanakrasteva - Tags: loader */
@-webkit-keyframes follow-the-leader {
  0% {
    -webkit-transform: rotate(0deg) translateY(-200%);
    transform: rotate(0deg) translateY(-200%);
  }

  60%,
  100% {
    -webkit-transform: rotate(360deg) translateY(-200%);
    transform: rotate(360deg) translateY(-200%);
  }
}

@keyframes follow-the-leader {
  0% {
    -webkit-transform: rotate(0deg) translateY(-200%);
    transform: rotate(0deg) translateY(-200%);
  }

  60%,
  100% {
    -webkit-transform: rotate(360deg) translateY(-200%);
    transform: rotate(360deg) translateY(-200%);
  }
}

.follow-the-leader-line {
  height: 14px;
  position: relative;
  width: 14px;
}

.follow-the-leader-line div {
  -webkit-animation: follow-the-leader 1.25s infinite backwards;
  animation: follow-the-leader 1.25s infinite backwards;
  background-color: #ffffff;
  border-radius: 100%;
  height: 100%;
  width: 100%;
}

.follow-the-leader-line div:nth-child(1) {
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
  background-color: rgba(255, 255, 255, 0.9);
}

.follow-the-leader-line div:nth-child(2) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  background-color: rgba(255, 255, 255, 0.8);
}

.follow-the-leader-line div:nth-child(3) {
  -webkit-animation-delay: 0.45s;
  animation-delay: 0.45s;
  background-color: rgba(255, 255, 255, 0.7);
}

.follow-the-leader-line div:nth-child(4) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  background-color: rgba(255, 255, 255, 0.6);
}

.follow-the-leader-line div:nth-child(5) {
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
  background-color: rgba(255, 255, 255, 0.5);
}
</style>


================================================
FILE: loaders/bundui_fat-jellyfish-70.html
================================================
<!-- From Uiverse.io by bundui  - Tags: card, loader, placeholder, card template, card animation, tailwindcss, skeleton -->
<div
  class="max-w-sm p-4 border border-gray-200 rounded shadow animate-pulse md:p-6 dark:border-gray-400"
>
  <div
    class="flex items-center justify-center h-48 mb-4 bg-gray-300 rounded dark:bg-gray-400"
  >
    <svg
      viewBox="0 0 16 20"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      class="w-10 h-10 text-gray-200 dark:text-gray-600"
    >
      <path
        d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"
      ></path>
      <path
        d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"
      ></path>
    </svg>
  </div>
  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-400 w-48 mb-4"></div>
  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-400 mb-2.5"></div>
  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-400 mb-2.5"></div>
  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-400"></div>
  <div class="flex items-center mt-4">
    <svg
      viewBox="0 0 20 20"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      class="w-10 h-10 me-3 text-gray-200 dark:text-gray-400"
    >
      <path
        d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"
      ></path>
    </svg>
    <div>
      <div
        class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-400 w-32 mb-2"
      ></div>
      <div class="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-400"></div>
    </div>
  </div>
  <span class="sr-only">Loading...</span>
</div>


    

================================================
FILE: loaders/carhtube_happy-puma-68.html
================================================
<div class="loader">
  <div class="worm"></div>
  <div class="circleMiddle"></div>
</div>

<style>
/* From Uiverse.io by carhtube  - Tags: animation, loading, loader, circle loader, click animation, effect loader, bounce animation, 3d loader */
.loader {
  background: linear-gradient(
    90deg,
    #6f22ff,
    #00aaff,
    #2cc92c,
    #00aaff,
    #6f22ff
  );
  background-size: 600% 600%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: neonRotate 10s linear infinite;
  position: relative;
}
.circleMiddle {
  background-color: rgb(255, 255, 255);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  z-index: 99;
}
.worm {
  position: absolute;
  width: 20px;
  height: 105px;
  background-color: hsl(0, 0%, 100%);
  border-radius: 5px;
  animation: rotateWorm 4s linear infinite;
  z-index: 80;
}
@keyframes neonRotate {
  0%,
  100% {
    background-position: 0% 0%;
  }
  25%,
  75% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 0% 100%;
  }
}
@keyframes rotateWorm {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

</style>
    

================================================
FILE: loaders/carlosepcc_purple-starfish-41.html
================================================
<!-- From Uiverse.io by carlosepcc - Tags: simple, skeuomorphism, animation, yellow, loader, game, circle, coin -->
<div class="loader border-t-2 rounded-full border-yellow-500 bg-yellow-300 animate-spin
aspect-square w-8 flex justify-center items-center text-yellow-700">$</div>



================================================
FILE: loaders/catraco_green-crab-61.html
================================================
<div class="loader">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 32C28.7 32 0 60.7 0 96v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm280 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm48 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM64 288c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V352c0-35.3-28.7-64-64-64H64zm280 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm56 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"></path></svg>
  <span></span>
</div>
<style>
/* From Uiverse.io by catraco - Tags: icon, loader, animated, light&dark */
.loader {
  --color: #a5a5b0;
  --size: 40px;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.loader span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--color);
  border-bottom: 1px solid transparent;
  border-radius: 100%;
  animation: keyframes-rotate .8s infinite linear;
}

.loader svg {
  width: 100%;
  height: 100%;
  padding: 25%;
  fill: var(--color);
  animation: keyframes-blink .8s infinite ease-in-out;
}

@keyframes keyframes-rotate {
  0% {
    transform: rotate(360deg);
  }
}

@keyframes keyframes-blink {
  50% {
    opacity: 0.8;
  }
}
</style>


================================================
FILE: loaders/catraco_strong-bat-45.html
================================================
<div class="loader">
  <span></span>
</div>
<style>
/* From Uiverse.io by catraco - Tags: loader, circle, animated */
.loader {
  --eye: #212121;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border: 5px solid var(--eye);
  border-radius: 100%;
  animation: translate-keyframes 2s infinite linear;
}

.loader span {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border-top: 12px solid var(--eye);
  border-bottom: 5px solid var(--eye);
  outline: 2px solid var(--eye);
}

.loader span {
  animation: rotate-keyframes 2s infinite linear;
}

@keyframes translate-keyframes {
  0% {
    transform: translate(-100%, -50%);
  }

  95% {
    transform: translate(50%, -50%);
  }

  96% {
    transform: translate(-50%, -50%);
  }

  100% {
    transform: translate(-100%, -50%);
  }
}

@keyframes rotate-keyframes {
  90% {
    height: 40px;
  }

  95% {
    height: 0px;
  }

  100% {
    height: 40px;
  }
}
</style>


================================================
FILE: loaders/choudhary-usman_swift-hound-29.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by choudhary-usman  - Tags: simple, material design, icon, animation, loader, animated */
.loader {
  --s: 15px;
  width: calc(var(--s) * 2.33);
  aspect-ratio: 1;
  display: flex;
  justify-content: space-between;
}
.loader::before,
.loader::after {
  content: "";
  width: var(--s);
  --_g: no-repeat radial-gradient(farthest-side, #000 94%, #0000);
  background: var(--_g) top, var(--_g) bottom;
  background-size: 100% var(--s);
  transform-origin: 50% calc(100% - var(--s) / 2);
  animation: l30 1s infinite;
}
.loader::after {
  transform-origin: 50% calc(var(--s) / 2);
}
@keyframes l30 {
  70%,
  100% {
    transform: rotate(-270deg);
  }
}

</style>
    

================================================
FILE: loaders/choudhary-usman_yellow-grasshopper-30.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by choudhary-usman  - Tags: simple, material design, icon, animation, loader, animated */
.loader {
  width: 40px;

  aspect-ratio: 1;
  --c: linear-gradient(#000 0 0);
  --m: radial-gradient(farthest-side, #000 90%, #0000);
  background: var(--c), var(--m), var(--c);
  background-size: 16px 8px, 10px 10px;
  background-repeat: no-repeat;
  animation: l20-1 1s infinite linear, l20-2 4s infinite linear -0.4s;
}
@keyframes l20-1 {
  0%,
  10% {
    background-position: calc(50% - 8px) 50%, 50% -15px, calc(50% + 8px) 50%;
  }
  33% {
    background-position: -20px 50%, 50% 50%, calc(100% + 20px) 50%;
  }
  66% {
    background-position: -20px 50%, 50% calc(100% + 15px), calc(100% + 20px) 50%;
  }
  80%,
  100% {
    background-position: calc(50% - 8px) 50%, 50% calc(100% + 15px),
      calc(50% + 8px) 50%;
  }
}
@keyframes l20-2 {
  0%,
  24.99% {
    transform: rotate(0);
  }
  25%,
  49.99% {
    transform: rotate(90deg);
  }
  50%,
  74.99% {
    transform: rotate(180deg);
  }
  75%,
  100% {
    transform: rotate(270deg);
  }
}

</style>
    

================================================
FILE: loaders/codebykay101_dull-shrimp-28.html
================================================
<div class="container">
  <div class="square">
    <span style="--i:0;"></span>
    <span style="--i:1;"></span>
    <span style="--i:2;"></span>
    <span style="--i:3;"></span>
  </div>
  <div class="square">
    <span style="--i:0;"></span>
    <span style="--i:1;"></span>
    <span style="--i:2;"></span>
    <span style="--i:3;"></span>
  </div>
  <div class="square">
    <span style="--i:0;"></span>
    <span style="--i:1;"></span>
    <span style="--i:2;"></span>
    <span style="--i:3;"></span>
  </div>
</div>
<style>
/* From Uiverse.io by codebykay101 - Tags: animation, neon, css, effects */
.container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .square {
  position: absolute;
  width: 200px;
  height: 200px;
}

.container .square:nth-child(2) {
  transform: translate(-25%, -25%) rotateX(180deg);
  filter: hue-rotate(60deg);
}

.container .square:nth-child(3) {
  transform: translate(25%, 25%) rotate(180deg);
  filter: hue-rotate(180deg);
}

.container .square::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #0f0;
  box-shadow: 0 0 0 8px #0f03, 0 0 0 15px #0f01;
  animation: animateSquare 4s linear infinite;
}

@keyframes animateSquare {
  0% {
    transform: translate(2px,2px);
  }

  25% {
    transform: translate(178px,2px);
  }

  50% {
    transform: translate(178px,178px);
  }

  75% {
    transform: translate(2px,178px);
  }

  100% {
    transform: translate(2px,2px);
  }
}

.container .square span {
  position: absolute;
  inset: 10px;
  overflow: hidden;
  transform: rotate(calc(90deg * var(--i)));
}

.container .square span::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  background: #0f0;
  transform: translateX(-100%);
  animation: animate 4s linear infinite;
  animation-delay: calc(1s * var(--i));
}

@keyframes animate {
  0% {
    transform: translateX(-100%);
  }

  50%,100% {
    transform: translateX(100%);
  }
}
</style>


================================================
FILE: loaders/coding-masala_shaggy-vampirebat-38.html
================================================
<div class="loader">
  <div class="loader-bar"></div>
  <div class="loader-bar"></div>
  <div class="loader-bar"></div>
  <div class="loader-bar"></div>
</div>

<style>
/* From Uiverse.io by coding-masala - Tags: loader */
.loader {
  display: flex;
  justify-content: center;
}

.loader-bar {
  width: 4px;
  height: 18px;
  margin: 0 8px;
  border-radius: 4px;
  animation: loading_3194 1s ease-in-out infinite;
  background-color: #333;
}

@keyframes loading_3194 {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scaleY(3);
  }

  40% {
    transform: scale(1);
  }
}

</style>


================================================
FILE: loaders/coding-masala_smooth-hound-73.html
================================================
<div class="loader">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<style>
/* From Uiverse.io by coding-masala - Tags: loader */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.box {
  width: 20px;
  height: 20px;
  margin: 0 8px;
  border-radius: 50%;
  animation: jump_4123 1s ease-in-out infinite;
}

.box:nth-child(1) {
  background-color: #4e4e4e;
  animation-delay: 0.2s;
}

.box:nth-child(2) {
  background-color: #bdbdbd;
  animation-delay: 0.4s;
}

.box:nth-child(3) {
  background-color: #4e4e4e;
  animation-delay: 0.6s;
}

.box:nth-child(4) {
  background-color: #bdbdbd;
  animation-delay: 0.8s;
}

@keyframes jump_4123 {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }
}

</style>


================================================
FILE: loaders/coding-masala_strong-fox-19.html
================================================
<div class="loading-spinner">
  <div class="loading-spinner-inner">
    <div class="loading-spinner-circle"></div>
    <div class="loading-spinner-circle"></div>
    <div class="loading-spinner-circle"></div>
    <div class="loading-spinner-circle"></div>
    <div class="loading-spinner-circle"></div>
  </div>
</div>

<style>
/* From Uiverse.io by coding-masala - Tags: loader */
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8em;
}

.loading-spinner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner-circle {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #db9334;
  margin: 0 5px;
  animation: loading-spinner 1s ease-in-out infinite;
}

.loading-spinner-circle:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-spinner-circle:nth-child(3) {
  animation-delay: 0.4s;
}

.loading-spinner-circle:nth-child(4) {
  animation-delay: 0.6s;
}

.loading-spinner-circle:nth-child(5) {
  animation-delay: 0.8s;
}

@keyframes loading-spinner {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  20% {
    transform: scale(1.5);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

</style>


================================================
FILE: loaders/cohencoo_dry-rat-94.html
================================================
<div class="custom-loader"></div>
<style>
/* From Uiverse.io by cohencoo - Tags: loader */
.custom-loader {
  width: 70px;
  height: 70px;
  background: #ffa600;
  border-radius: 50px;
  -webkit-mask: radial-gradient(circle 31px at 50% calc(100% + 13px),#000 95%,#0000) top 4px left 50%,
    radial-gradient(circle 31px,#000 95%,#0000) center,
    radial-gradient(circle 31px at 50% -13px,#000 95%,#0000) bottom 4px left 50%,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-repeat: no-repeat;
  animation: cu10 1.5s infinite;
}

@keyframes cu10 {
  0% {
    -webkit-mask-size: 0    18px,0    18px,0    18px,auto
  }

  16.67% {
    -webkit-mask-size: 100% 18px,0    18px,0    18px,auto
  }

  33.33% {
    -webkit-mask-size: 100% 18px,100% 18px,0    18px,auto
  }

  50% {
    -webkit-mask-size: 100% 18px,100% 18px,100% 18px,auto
  }

  66.67% {
    -webkit-mask-size: 0    18px,100% 18px,100% 18px,auto
  }

  83.33% {
    -webkit-mask-size: 0    18px,0    18px,100% 18px,auto
  }

  100% {
    -webkit-mask-size: 0    18px,0    18px,0    18px,auto
  }
}
</style>


================================================
FILE: loaders/cohencoo_ordinary-kangaroo-82.html
================================================
<div class="custom-loader"></div>
<style>
/* From Uiverse.io by cohencoo - Tags: loading, loader, download, downloading */
.custom-loader {
  width: 120px;
  height: 22px;
  border-radius: 20px;
  color: #F4BF00;
  border: 2px solid;
  position: relative;
}

.custom-loader::before {
  content: "";
  position: absolute;
  margin: 2px;
  inset: 0 100% 0 0;
  border-radius: inherit;
  background: #F4BF00;
  animation: p6 2s infinite;
}

@keyframes p6 {
  100% {
    inset: 0
  }
}
</style>


================================================
FILE: loaders/csemszepp_bright-vampirebat-35.html
================================================
<svg viewBox="0 0 100 100" class="loader">
<g class="points"> 
  <circle fill="#fff" r="50" cy="50" cx="50" class="ciw"></circle>
<circle r="4" cy="50" cx="5" class="ci2"></circle>
<circle r="4" cy="50" cx="95" class="ci1"></circle>
</g>
</svg>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/uchardon/pen/VEBbdw - Tags: loader, animated */
.loader {
  width: 200px;
  max-height: 900px;
  transform-origin: 50% 50%;
  overflow: visible;
}

.ci1 {
  fill: var(--higru);
  animation: toBig 3s infinite -1.5s;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.ciw {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: breath 3s infinite;
}

.ci2 {
  fill: var(--higru);
  animation: toBig2 3s infinite;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.points {
  animation: rot 3s infinite;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(360deg);
  }

  50% {
    transform: rotate(360deg);
  }

  80% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes toBig {
  0% {
    transform: scale(1) translateX(0px);
  }

  30% {
    transform: scale(1) translateX(0px);
  }

  50% {
    transform: scale(10) translateX(-4.5px);
  }

  80% {
    transform: scale(10) translateX(-4.5px);
  }

  100% {
    transform: scale(1) translateX(0px);
  }
}

@keyframes toBig2 {
  0% {
    transform: scale(1) translateX(0px);
  }

  30% {
    transform: scale(1) translateX(0px);
  }

  50% {
    transform: scale(10) translateX(4.5px);
  }

  80% {
    transform: scale(10) translateX(4.5px);
  }

  100% {
    transform: scale(1) translateX(0px);
  }
}

@keyframes breath {
  15% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.1);
  }

  65% {
    transform: scale(1);
  }

  90% {
    transform: scale(1.1);
  }
}

.dwf, .share {
  position: fixed;
  bottom: 4px;
  right: 10px;
  background-color: #0003;
  padding: 3px;
  border-radius: 3px;
}
</style>


================================================
FILE: loaders/csemszepp_happy-dog-58.html
================================================
<div class="vader">
<div class="shadow"></div>
<div class="head"><div class="helmet"><span class="left"></span><span class="right"></span></div><div class="eyes"><span class="left"></span><span class="right"></span></div><span class="grill"><span class="left"></span><span class="center"></span><span class="right"></span></span><span class="mask"><span class="top"></span><span class="left"></span><span class="center"></span><span class="right"></span></span><span class="line"></span></div>
<div class="torso"><span class="neck"><span class="left"></span><span class="center"></span><span class="right"></span><span class="bottom"></span></span><span class="belt"><span class="center"></span></span><div class="plate"><span class="red_top"></span><span class="red_center"></span><span class="red_bottom"></span><span class="blue"></span><span class="gray"></span></div></div>
<div class="hand left"><span class="hand"></span></div>
<div class="hand right animation-right"><span class="hand"></span></div>
<div class="legs"><span class="left"></span><span class="right"></span></div>
<div class="boots"><span class="left"></span><span class="right"></span></div>
<div class="sword animation-left"><span class="handle"></span><span class="light"></span></div>
</div>
<p class="text">Darth Vader By <a href="https://codepen.io/poziomq">qpoziomek</a></p>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/poziomq/details/Lbyomj - Tags: loader, animated, #darthvader */
::-moz-selection {
  background: #2D3363;
  color: #FAEECF
}

::selection {
  background: #2D3363;
  color: #FAEECF
}

.text {
  position: absolute;
  bottom: 20px;
  left: 25px;
  color: black;
  font-family: Arial,sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 28px;
  font-weight: bold;
  letter-spacing: 2px;
  z-index: 99
}

a {
  color: #6172BA;
  text-decoration: none;
  cursor: pointer
}

a:hover {
  text-decoration: underline
}

.vader {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%)
}

.vader .head {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: -10px;
  z-index: 1
}

.vader .helmet {
  position: absolute;
  top: 0;
  left: 5px;
  width: 90px;
  height: 80px;
  background: #222222;
  border-radius: 80px 80px 0 0
}

.vader .helmet::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 50px;
  height: 8px;
  margin-left: -25px;
  background: #040507;
  border-radius: 25px 25px 0 0 / 8px 8px 0 0
}

.vader .helmet::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: -25px;
  height: 0;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 24px solid #040507
}

.vader .helmet span {
  position: absolute;
  top: 50%;
  width: 35px;
  height: 55px;
  background: #040507
}

.vader .helmet .left {
  left: -6px;
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg)
}

.vader .helmet .right {
  right: -6px;
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg)
}

.vader .helmet span::before {
  content: '';
  position: absolute;
  top: -5px;
  width: 8px;
  height: 55px;
  background: #222222
}

.vader .helmet .left::before {
  left: 0
}

.vader .helmet .right::before {
  right: 0
}

.vader .line {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 38px;
  margin-left: -3px;
  background: #343434
}

.vader .line::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: -4px;
  bottom: 0;
  width: 4px;
  height: 12px;
  background: #040507
}

.vader .line::after {
  content: '';
  display: inline-block;
  position: absolute;
  right: -4px;
  bottom: 0;
  width: 4px;
  height: 12px;
  background: #040507
}

.vader .mask {
  position: absolute;
  bottom: 19px;
  left: 50%
}

.vader .mask span {
  position: absolute;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #C6C6C6
}

.vader .mask .top {
  left: 50%;
  margin-top: -16px;
  margin-left: -2px
}

.vader .mask .top::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: -7px;
  top: -2px;
  width: 4px;
  height: 24px;
  background: #040507;
  border-radius: 4px;
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg)
}

.vader .mask .top::after {
  content: '';
  display: inline-block;
  position: absolute;
  right: -7px;
  top: -2px;
  width: 4px;
  height: 24px;
  background: #040507;
  border-radius: 4px;
  -webkit-transform: rotate(-40deg);
  transform: rotate(-40deg)
}

.vader .mask .left {
  left: 12px
}

.vader .mask .center {
  left: 50%;
  margin-top: -16px;
  margin-left: -2px
}

.vader .mask .right {
  right: 12px
}

.vader .grill {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 20px;
  margin-left: -10px
}

.vader .grill span {
  position: absolute;
  bottom: -5px;
  width: 2px;
  margin-left: -1px;
  background: #C6C6C6
}

.vader .grill .left {
  left: 4px;
  height: 10px
}

.vader .grill .center {
  left: 50%;
  height: 17px
}

.vader .grill .right {
  right: 2px;
  height: 10px
}

.vader .eyes {
  position: absolute;
  top: 35px;
  left: 10px;
  width: 80px;
  height: 40px;
  border-radius: 40px;
  background: #343434
}

.vader .eyes::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 33px;
  left: 5px;
  height: 0;
  width: 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-top: 30px solid #343434
}

.vader .eyes span {
  position: absolute;
  top: 5px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background: #010000;
  -webkit-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out
}

.vader .eyes .left {
  left: 7px
}

.vader .eyes .right {
  right: 7px
}

.vader .torso {
  position: relative;
  width: 60px;
  height: 80px;
  border-radius: 50px 50px 0 0;
  margin: 0 auto;
  background: #222222
}

.vader .torso::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: -20px;
  top: -15px;
  width: 100px;
  height: 115px;
  border-radius: 50px 50px 0 0;
  margin: 0 auto;
  background: #040507;
  z-index: -1
}

.vader .belt {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: #040507
}

.vader .belt span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 20px;
  height: 10px;
  border-radius: 10px;
  margin-left: -10px;
  background: #C6C6C6
}

.vader .neck {
  position: absolute;
  left: 6px;
  top: 3px;
  width: 48px;
  height: 8px;
  background: #010000;
  z-index: 5
}

.vader .neck::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 8px;
  width: 32px;
  height: 10px;
  background: #222222;
  border-radius: 0 0 4px 4px
}

.vader .neck::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 8px;
  width: 32px;
  height: 1px;
  background: #666666
}

.vader .neck span {
  position: absolute;
  top: 0;
  width: 6px;
  height: 125%;
  margin-left: -3px;
  background: #434343
}

.vader .neck .left {
  left: 6px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  border-radius: 5px 0 0 0
}

.vader .neck .center {
  left: 50%;
  top: 2px
}

.vader .neck .right {
  right: 3px;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  border-radius: 0 5px 0 0
}

.vader .neck .bottom {
  position: absolute;
  top: 8px;
  left: 4px;
  width: 46px;
  height: 5px;
  background: #222222
}

.vader .plate {
  position: absolute;
  left: 15px;
  top: 25px;
  width: 30px;
  height: 32px;
  background: #343434
}

.vader .plate .red_top {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 12px;
  height: 18px;
  background: #d81f27
}

.vader .plate .red_top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: rgba(0,0,0,0.2)
}

.vader .plate .red_top::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #343434
}

.vader .plate .red_center {
  position: absolute;
  right: 2px;
  top: 12px;
  width: 12px;
  height: 8px;
  background: #d81f27
}

.vader .plate .red_center::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,0.2)
}

.vader .plate .red_center::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  width: 2px;
  height: 100%;
  background: #343434
}

.vader .plate .red_bottom {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 4px;
  height: 8px;
  background: #d81f27
}

.vader .plate .blue {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 12px;
  height: 8px;
  background: #455caa
}

.vader .plate .blue::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #343434
}

.vader .plate .gray {
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: 20px;
  height: 8px;
  background: #9f9fa1
}

.vader .plate .gray::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  width: 2px;
  height: 100%;
  background: #343434
}

.vader .plate .gray::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: rgba(0,0,0,0.2)
}

.vader .legs {
  position: relative;
  width: 50px;
  height: 20px;
  margin: 0 auto;
  background: #222222
}

.vader .legs::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 20px;
  height: 100%;
  margin-left: -10px;
  background: #040507
}

.vader .boots {
  position: absolute;
  bottom: 0;
  left: 50%
}

.vader .boots span {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  width: 30px;
  height: 10px;
  background: #040507
}

.vader .boots .left {
  left: 10px;
  border-radius: 0 15px 0 0
}

.vader .boots .right {
  right: 10px;
  border-radius: 15px 0 0 0
}

.vader .hand {
  position: absolute;
  top: 60%;
  z-index: 2
}

.vader .hand.left {
  left: -2px;
  top: 82%
}

.vader .hand.right {
  right: -20px
}

.vader .hand .hand {
  position: absolute;
  top: 0;
  width: 11px;
  height: 22px;
  margin-top: -12px;
  margin-left: -12px;
  background: #040507
}

.vader .hand.left .hand {
  left: 0;
  border-radius: 22px 0 0 22px
}

.vader .hand.right .hand {
  right: 0;
  width: 22px;
  border-radius: 22px
}

.vader .sword {
  position: absolute;
  top: 50%;
  left: -20px;
  z-index: 10
}

.vader .sword .handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 30px;
  margin-left: -3px;
  background: #343434
}

.vader .sword .handle::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 100%;
  height: 5px;
  background: #888888
}

.vader .sword .handle::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 5px;
  width: 4px;
  height: 5px;
  background: #343434
}

.vader .sword .light {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 120px;
  margin-left: -10px;
  background: rgba(248,80,50,0);
  background: -moz-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);
  background: -webkit-gradient(left top, right top, color-stop(10%, rgba(248,80,50,0)), color-stop(20%, rgba(247,67,37,0)), color-stop(40%, rgba(246,41,12,0.67)), color-stop(50%, rgba(255,176,166,1)), color-stop(60%, rgba(246,41,12,0.67)), color-stop(80%, rgba(236,51,30,0)), color-stop(90%, rgba(231,56,39,0)));
  background: -webkit-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);
  background: -o-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);
  background: -ms-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);
  background: linear-gradient(to right, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);
}

.vader .sword .light::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 3px;
  height: 120px;
  margin-left: -1px;
  background: rgba(248,80,50,1);
  z-index: -1
}

.vader .shadow {
  position: absolute;
  bottom: -17px;
  left: -25px;
  display: block;
  width: 150px;
  height: 14px;
  background: rgba(0,0,0,0.15);
  border-radius: 50%
}

.animation-right {
  -webkit-animation: animationHandRight 1.5s linear infinite;
  animation: animationHandRight 1.5s linear infinite
}

@-webkit-keyframes animationHandRight {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes animationHandRight {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

.animation-left {
  -webkit-animation: animationHandLeft 3s ease-in-out infinite;
  animation: animationHandLeft 3s ease-in-out infinite
}

@-webkit-keyframes animationHandLeft {
  0%, 100% {
    -webkit-transform: translateX(0) rotate(-25deg);
    transform: translateX(0) rotate(-25deg)
  }

  50% {
    -webkit-transform: translateX(150px) rotate(25deg);
    transform: translateX(150px) rotate(25deg)
  }
}

@keyframes animationHandLeft {
  0%, 100% {
    -webkit-transform: translateX(0) rotate(-25deg);
    transform: translateX(0) rotate(-25deg)
  }

  50% {
    -webkit-transform: translateX(150px) rotate(25deg);
    transform: translateX(150px) rotate(25deg)
  }
}

.vader:hover .eyes .left {
  background: #d81f27
}

.vader:hover .eyes .right {
  background: #455caa
}
</style>


================================================
FILE: loaders/csemszepp_helpless-tiger-5.html
================================================
<div class="loader">
  <div class="inner">
  </div>
</div>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/dfitzy/pen/XdaoWg - Tags: loader, revolver */
.loader {
  animation: spin 1.5s linear alternate infinite;
  background: #B73F41;
  border-radius: 50%;
  height: 120px;
  width: 120px;
}

.loader:before {
  background: #B73F41;
  border-radius: 50%;
  content: '';
  display: block;
  height: 0.5em;
  width: 0.5em;
  z-index: 2;
}

.loader:after {
  background: #262E2A;
  border-radius: 50%;
  box-shadow: 0em -2.60em #262E2A,
    2.25em -4.02em #e5e7eb,
    2.25em -1.25em #262E2A,
    4.60em 0em #e5e7eb,
    2.25em 1.25em #262E2A,
    2.25em 4.02em #e5e7eb,
    0em 2.60em #262E2A,
    -2.25em 4.02em #e5e7eb,
    -2.25em 1.25em #262E2A,
    -4.60em 0em #e5e7eb,
    -2.25em -1.25em #262E2A,
    -2.25em -4.02em #e5e7eb;
  content: '';
  display: block;
  height: 2em;
  width: 2em;
}

.inner {
  animation: load 1.5s linear alternate infinite;
  border: solid 1px #B73F41;
  border-radius: 50%;
  height: 1.75em;
  width: 1.75em;
  z-index: 1;
}

.loader, .loader:before, .loader:after, .inner {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

@keyframes load {
  0% {
    box-shadow: 0em -2.60em #262E2A,
      2.25em -1.25em #262E2A,
      2.25em 1.25em #262E2A,
      0em 2.60em #262E2A,
      -2.25em 1.25em #262E2A,
      -2.25em -1.25em #262E2A;
  }

  15% {
    box-shadow: 0em -2.60em #262E2A,
      2.25em -1.25em #262E2A,
      2.25em 1.25em #262E2A,
      0em 2.60em #262E2A,
      -2.25em 1.25em #262E2A,
      -2.25em -1.25em #B73F41;
  }

  30% {
    box-shadow: 0em -2.60em #262E2A,
      2.25em -1.25em #262E2A,
      2.25em 1.25em #262E2A,
      0em 2.60em #262E2A,
      -2.25em 1.25em #B73F41,
      -2.25em -1.25em #B73F41;
  }

  45% {
    box-shadow: 0em -2.60em #262E2A,
      2.25em -1.25em #262E2A,
      2.25em 1.25em #262E2A,
      0em 2.60em #B73F41,
      -2.25em 1.25em #B73F41,
      -2.25em -1.25em #B73F41;
  }

  60% {
    box-shadow: 0em -2.60em #262E2A,
      2.25em -1.25em #262E2A,
      2.25em 1.25em #B73F41,
      0em 2.60em #B73F41,
      -2.25em 1.25em #B73F41,
      -2.25em -1.25em #B73F41;
  }

  75% {
    box-shadow: 0em -2.60em #262E2A,
      2.25em -1.25em #B73F41,
      2.25em 1.25em #B73F41,
      0em 2.60em #B73F41,
      -2.25em 1.25em #B73F41,
      -2.25em -1.25em #B73F41;
  }

  90% {
    box-shadow: 0em -2.60em #B73F41,
      2.25em -1.25em #B73F41,
      2.25em 1.25em #B73F41,
      0em 2.60em #B73F41,
      -2.25em 1.25em #B73F41,
      -2.25em -1.25em #B73F41;
  }

  100% {
    box-shadow: 0em -2.60em #B73F41,
      2.25em -1.25em #B73F41,
      2.25em 1.25em #B73F41,
      0em 2.60em #B73F41,
      -2.25em 1.25em #B73F41,
      -2.25em -1.25em #B73F41;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(60deg);
  }

  30% {
    transform: rotate(120deg);
  }

  45% {
    transform: rotate(180deg);
  }

  60% {
    transform: rotate(240deg);
  }

  75% {
    transform: rotate(300deg);
  }

  90% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
</style>


================================================
FILE: loaders/csemszepp_nice-liger-66.html
================================================

<div class="ball"></div>
<div class="shape"></div>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/cobra_winfrey/pen/xyRaeK - Tags: loader, cool loader */
.ball {
  position: absolute;
  width: 20px;
  height: 20px;
  top: calc(50% - 25px);
  animation: bounce 3s cubic-bezier(1, 0, 0, 1) infinite;
}

.ball:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 100%;
  animation: bounce2 3s ease-in-out infinite;
  transform-origin: bottom;
}

@keyframes bounce2 {
  0% {
    transform: scaleY(0.75) scaleX(1.25);
  }

  14.25% {
    transform: scaleY(1);
  }

  28.5% {
    transform: scaleY(0.75) scaleX(1.25);
  }

  42.75% {
    transform: scaleY(1);
  }

  57% {
    transform: scaleY(0.75) scaleX(1.25);
  }

  71.25% {
    transform: scaleY(1);
  }

  80% {
    transform: scaleY(0.75) scaleX(1.25);
  }

  90% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(0.75) scaleX(1.25);
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }

  14.25% {
    transform: translateY(-150px);
  }

  28.5% {
    transform: translateY(-7.5px);
  }

  42.75% {
    transform: translateY(-170px);
  }

  57% {
    transform: translateY(-27.5px);
  }

  71.25% {
    transform: translateY(-180px);
  }

  80% {
    transform: translateY(-35px);
  }

  90% {
    transform: translateY(-200px);
  }

  100% {
    transform: translateY(0px);
  }
}

.shape {
  width: 300px;
  height: 300px;
  position: absolute;
  left: calc(50% - 150px);
  top: calc(50% - 75px);
  animation: shapes2 3s ease-in-out infinite;
}

@keyframes shapes2 {
  0% {
    transform: rotate(90deg) translateX(-20px);
  }

  14.25% {
    transform: rotate(90deg) translateX(-20px);
  }

  28.5% {
    transform: rotate(135deg);
  }

  42.75% {
    transform: rotate(162deg);
  }

  57% {
    transform: rotate(180deg);
  }

  71.25% {
    transform: rotate(245.5deg);
  }

  80% {
    transform: rotate(336.5deg);
  }

  100% {
    transform: rotate(90deg) translateX(-20px);
  }
}

.shape:before, .shape:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #fdb20f;
  animation: shapes 3s ease-in-out infinite;
  clip-path: polygon(20% 21%, 50% 8%, 80% 21%, 90% 50%, 80% 80%, 50% 91%, 21% 79%, 8% 51%);
}

.shape:after {
  width: 90%;
  height: 90%;
  background: repeating-linear-gradient(to right, #fff, #fff 2px, #fdb20f 2px, #fdb20f 5px);
  top: 5%;
  left: 5%;
  background-position: 20px 30px;
}

@keyframes shapes {
  0% {
    clip-path: polygon(91% 50%, 91% 50%, 29% 86%, 30% 86%, 30% 86%, 30% 86%, 30% 14%, 30% 14%);
    background-position: 20px 30px;
  }

  14.25% {
    clip-path: polygon(91% 50%, 91% 50%, 29% 86%, 30% 86%, 30% 86%, 30% 86%, 30% 14%, 30% 14%);
    background-position: 120px 30px;
  }

  28.5% {
    clip-path: polygon(91% 50%, 91% 50%, 50% 91%, 50% 91%, 50% 91%, 50% 91%, 9% 50%, 50% 9%);
    background-position: 20px 30px;
  }

  42.75% {
    clip-path: polygon(63% 11%, 91% 50%, 63% 89%, 63% 89%, 63% 89%, 63% 89%, 16% 74%, 16% 26%);
    background-position: -120px 30px;
  }

  57% {
    clip-path: polygon(29% 14%, 71% 14%, 91% 50%, 91% 50%, 71% 86%, 71% 86%, 30% 86%, 9% 50%);
    background-position: 20px 30px;
  }

  71.25% {
    clip-path: polygon(13% 32%, 41% 10%, 76% 18%, 91% 50%, 76% 83%, 76% 83%, 41% 90%, 13% 68%);
    background-position: 120px 30px;
  }

  80% {
    clip-path: polygon(20% 21%, 50% 8%, 80% 21%, 90% 50%, 80% 80%, 50% 91%, 21% 79%, 8% 51%);
    background-position: 20px 30px;
  }

  83% {
    clip-path: polygon(13% 32%, 41% 10%, 76% 18%, 91% 50%, 76% 83%, 76% 83%, 41% 90%, 13% 68%);
    background-position: 20px 30px;
  }

  86% {
    clip-path: polygon(29% 14%, 71% 14%, 91% 50%, 91% 50%, 71% 86%, 71% 86%, 30% 86%, 9% 50%);
    background-position: 20px 30px;
  }

  89% {
    clip-path: polygon(63% 11%, 91% 50%, 63% 89%, 63% 89%, 63% 89%, 63% 89%, 16% 74%, 16% 26%);
    background-position: 20px 30px;
  }

  92% {
    clip-path: polygon(91% 50%, 91% 50%, 50% 91%, 50% 91%, 50% 91%, 50% 91%, 9% 50%, 50% 9%);
  }

  95% {
    clip-path: polygon(91% 50%, 91% 50%, 29% 86%, 30% 86%, 30% 86%, 30% 86%, 30% 14%, 30% 14%);
  }

  100% {
    clip-path: polygon(91% 50%, 91% 50%, 29% 86%, 30% 86%, 30% 86%, 30% 86%, 30% 14%, 30% 14%);
  }
}
</style>


================================================
FILE: loaders/csemszepp_nice-octopus-57.html
================================================

  <div class="loader">
      <span>L</span>
      <span>O</span>
      <span>A</span>
      <span>D</span>
      <span>I</span>
      <span>N</span>
      <span>G</span>
    </div>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/SandipDust/pen/LYPOGLQ - Tags:  */
.loader {
  -webkit-perspective: 700px;
  perspective: 700px;
  background: red;
  padding: 10px 20px;
}

.loader>span {
  font-size: 60px;
  font-family: "franklin gothic medium",sans-serif;
  display: inline-block;
  animation: flip 2.6s infinite linear;
  transform-origin: 0 70%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

@keyframes flip {
  35% {
    transform: rotatex(360deg);
  }

  100% {
    transform: rotatex(360deg);
  }
}

.loader>span:nth-child(even) {
  color: white;
}

.loader>span:nth-child(2) {
  animation-delay: 0.3s;
}

.loader>span:nth-child(3) {
  animation-delay: 0.6s;
}

.loader>span:nth-child(4) {
  animation-delay: 0.9s;
}

.loader>span:nth-child(5) {
  animation-delay: 1.2s;
}

.loader>span:nth-child(6) {
  animation-delay: 1.5s
}

.loader>span:nth-child(7) {
  animation-delay: 1.8s
}
</style>


================================================
FILE: loaders/csemszepp_quick-sloth-23.html
================================================

	<div class="wrapper">
		<div class="hoop"></div>
		<div class="sphere1"></div>
		<div class="sphere2"></div>	
	</div>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/pcameron/pen/jENMKG - Tags: loader, animated */
@-webkit-keyframes sphere1Move {
  0% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }

  10% {
    width: 40px;
    height: 40px;
  }

  20% {
    width: 30px;
    height: 30px;
  }

  30% {
    width: 40px;
    height: 40px;
  }

  45% {
    left: 15px;
  }

  49% {
    z-index: 0;
  }

  50% {
    width: 50px;
    height: 50px;
    left: 20px;
    top: 116px;
    z-index: 10;
  }
	/*55%{left:15px;}*/
  60% {
    width: 60px;
    height: 60px;
  }

  80% {
    width: 70px;
    height: 70px;
  }

  90% {
    width: 60px;
    height: 60px;
  }

  99% {
    z-index: 10;
  }

  100% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }
}

@keyframes sphere1Move {
  0% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }

  10% {
    width: 40px;
    height: 40px;
  }

  20% {
    width: 30px;
    height: 30px;
  }

  30% {
    width: 40px;
    height: 40px;
  }

  45% {
    left: 15px;
  }

  49% {
    z-index: 0;
  }

  50% {
    width: 50px;
    height: 50px;
    left: 20px;
    top: 116px;
    z-index: 10;
  }
/*	55%{left:15px;}*/
  60% {
    width: 60px;
    height: 60px;
  }

  80% {
    width: 70px;
    height: 70px;
  }

  90% {
    width: 60px;
    height: 60px;
  }

  99% {
    z-index: 10;
  }

  100% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }
}

@-webkit-keyframes sphere2Move {
  0% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }

  10% {
    width: 40px;
    height: 40px;
  }

  20% {
    width: 30px;
    height: 30px;
  }

  30% {
    width: 40px;
    height: 40px;
  }

  45% {
    left: 217px;
  }

  49% {
    z-index: 0;
  }

  50% {
    width: 50px;
    height: 50px;
    left: 222px;
    top: 116px;
    z-index: 10;
  }
	/*55%{left:15px;}*/
  60% {
    width: 60px;
    height: 60px;
  }

  80% {
    width: 70px;
    height: 70px;
  }

  90% {
    width: 60px;
    height: 60px;
  }

  99% {
    z-index: 10;
  }

  100% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }
}

@keyframes sphere2Move {
  0% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }

  10% {
    width: 40px;
    height: 40px;
  }

  20% {
    width: 30px;
    height: 30px;
  }

  30% {
    width: 40px;
    height: 40px;
  }

  45% {
    left: 217px;
  }

  49% {
    z-index: 0;
  }

  50% {
    width: 50px;
    height: 50px;
    left: 222px;
    top: 116px;
    z-index: 10;
  }
	/*55%{left:15px;}*/
  60% {
    width: 60px;
    height: 60px;
  }

  80% {
    width: 70px;
    height: 70px;
  }

  90% {
    width: 60px;
    height: 60px;
  }

  99% {
    z-index: 10;
  }

  100% {
    width: 50px;
    height: 50px;
    left: 116px;
    top: 116px;
    z-index: 0;
  }
}

.wrapper {
  width: 300px;
  height: 300px;
	/*border:1px solid red;*/
  margin: 0 auto;
  margin-top: 5%;
  position: relative;
}

.hoop {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 6px #96281B, 0 0 0 26px #D64541;
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 5;
}

.sphere1 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #22A7F0;
  position: absolute;
  left: 116px;
  top: 116px;
  box-shadow: -7px -7px 0 #1E8BC3 inset;
  -webkit-animation: sphere1Move 1.2s linear infinite;
  animation: sphere1Move 1.2s linear infinite;
}

.sphere2 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #22A7F0;
  position: absolute;
  left: 116px;
  top: 116px;
  box-shadow: -7px -7px 0 #1E8BC3 inset;
  -webkit-animation: sphere2Move 1.2s linear 0.6s infinite;
  animation: sphere2Move 1.2s linear 0.6s infinite;
}
</style>


================================================
FILE: loaders/csemszepp_spotty-sloth-98.html
================================================

  <div class="loader"></div>

<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/Sanmi-Akinwunmi/pen/VwqjXKg - Tags: simple, animation, loader */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: flex;
  color: orange;
  background: linear-gradient(currentColor 0 0) right / 51% 100%,
    linear-gradient(currentColor 0 0) bottom / 100% 51%;
  background-repeat: no-repeat;
  animation: l16-0 2s infinite linear 0.25s;
}

.loader::before {
  content: "";
  width: 50%;
  height: 50%;
  background: currentColor;
  animation: l16-1 0.5s infinite linear;
}

@keyframes l16-0 {
  0%,
  12.49% {
    transform: rotate(0deg);
  }

  12.5%,
  37.49% {
    transform: rotate(90deg);
  }

  37.5%,
  62.49% {
    transform: rotate(180deg);
  }

  62.5%,
  87.49% {
    transform: rotate(270deg);
  }

  87.5%,
  100% {
    transform: rotate(360deg);
  }
}

@keyframes l16-1 {
  0% {
    transform: perspective(80px) rotate3d(-1, -1, 0, 0);
  }

  80%,
  100% {
    transform: perspective(80px) rotate3d(-1, -1, 0, -180deg);
  }
}

</style>


================================================
FILE: loaders/csemszepp_ugly-crab-22.html
================================================
<div class="centered">
	<div class="blob-1"></div>
	<div class="blob-2"></div>
</div>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/megatroncoder/pen/Xqeyva - Tags: loader, animated */
.centered {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgb(33 33 33 / var(--tw-bg-opacity))!important;
  ;
	filter: blur(10px) contrast(20);
}

.blob-1,.blob-2 {
  width: 70px;
  height: 70px;
  position: absolute;
  background: #fff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.blob-1 {
  left: 20%;
  animation: osc-l 2.5s ease infinite;
}

.blob-2 {
  left: 80%;
  animation: osc-r 2.5s ease infinite;
  background: #0ff;
}

@keyframes osc-l {
  0% {
    left: 20%;
  }

  50% {
    left: 50%;
  }

  100% {
    left: 20%;
  }
}

@keyframes osc-r {
  0% {
    left: 80%;
  }

  50% {
    left: 50%;
  }

  100% {
    left: 80%;
  }
}
</style>


================================================
FILE: loaders/csozidev_afraid-rattlesnake-67.html
================================================
<div class="loader">
  <div class="square">
    <div class="mini_square sq-1"></div>
    <div class="mini_square sq-2"></div>
    <div class="mini_square"></div>
    <div class="mini_square sq-4"></div>
  </div>
</div>
<style>
/* From Uiverse.io by csozidev - Tags: simple, animation, loader */
/* Simple loader made by: csozi | Website: www.csozi.hu*/

.square {
  display: flex;
  flex-wrap: wrap;
  width: 100px;
  height: 100px;
  box-sizing: content-box;
  animation: load-big 4s infinite;
  transform-origin: 0px 100px;
}

.mini_square {
  box-sizing: border-box;
  height: 50px;
  width: 50px;
  background-color: darkcyan;
}

.sq-1 {
  animation: load-left-top 4s infinite;
}

.sq-2 {
  animation: load-right-top 4s infinite;
}

.sq-4 {
  animation: load-right-bottom 4s infinite;
}

@keyframes load-right-bottom {
  0% {
    translate: -50px 0px;
  }

  25% {
    translate: 0px 0px;
  }

  100% {
    translate: 0px 0px;
  }
}

@keyframes load-right-top {
  0% {
    translate: -50px 50px;
  }

  25% {
    translate: 0px 50px;
  }

  50% {
    translate: 0px 0px;
  }

  100% {
    translate: 0px 0px;
  }
}

@keyframes load-left-top {
  0% {
    translate: 0px 50px;
  }

  25% {
    translate: 50px 50px;
  }

  50% {
    translate: 50px 0px;
  }

  75% {
    translate: 0px 0px;
  }

  100% {
    translate: 0px 0px;
  }
}

@keyframes load-big {
  0% {
    scale: 1;
    background-color: rgba(0, 0, 0, 0);
  }

  74% {
    scale: 1;
    background-color: rgba(0, 0, 0, 0);
  }

  75% {
    scale: 1;
    background-color: darkcyan;
  }

  100% {
    scale: 0.5;
    background-color: darkcyan;
  }
}
</style>


================================================
FILE: loaders/csozidev_curly-crab-48.html
================================================
<p class="text">Works with any svg logo</p>
<div class="loader">
  <svg
    class="logo"
    xmlns="http://www.w3.org/2000/svg"
    width="150"
    height="150"
    fill="currentColor"
    viewBox="-1 -1 18 18"
  >
    <path
      d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"
    ></path>
  </svg>
</div>

<style>
/* From Uiverse.io by csozidev  - Tags: simple, loader, animated, svg, loop, custom */
/* SVG loader made by: csozi | Website: www.csozi.hu*/

/*You dont need this "p" style*/
.text {
  font-weight: bolder;
  font-size: 17px;
  color: black;
  position: absolute;
  translate: -50% 0px;
  top: 20px;
  left: 50%;
  text-align: center;
}

.loader {
  overflow: visible;
  height: fit-content;
  width: fit-content;
  padding: 20px;
  display: flex;
}

.logo {
  fill: none;
  stroke-dasharray: 20px;
  /*<-- Play with this number until it look cool */
  stroke: black;
  animation: load 15s infinite linear;
}

@keyframes load {
  0% {
    stroke-dashoffset: 0px;
  }

  100% {
    stroke-dashoffset: 200px;
    /* <-- This number should always be 10 times the number up there*/
  }
}

</style>
    

================================================
FILE: loaders/csozidev_fat-eagle-48.html
================================================
<div class="loader">
  <p class="text">
  <span class="letter letter1">L</span>
  <span class="letter letter2">o</span>
  <span class="letter letter3">a</span>
  <span class="letter letter4">d</span>
  <span class="letter letter5">i</span>
  <span class="letter letter6">n</span>
  <span class="letter letter7">g</span>
  <span class="letter letter8">.</span>
  <span class="letter letter9">.</span>
  <span class="letter letter10">.</span>
  </p>
</div>
<style>
/* From Uiverse.io by csozidev - Tags: loading, loader, smooth, text animation, animated, wave, text, infinite */
/* Wave text loader made by: csozi | Website: english.csozi.hu*/

.text {
  color: black;
  font-weight: bolder;
}

@keyframes letter {
  0% {
    font-size: 30px;
  }

  50% {
    font-size: 40px;
  }

  100% {
    font-size: 30px;
  }
}

.letter {
  animation: letter 1s infinite;
}

.letter1 {
  animation-delay: 0s;
}

.letter2 {
  animation-delay: -0.9s;
}

.letter3 {
  animation-delay: -0.8s;
}

.letter4 {
  animation-delay: -0.7s;
}

.letter5 {
  animation-delay: -0.6s;
}

.letter6 {
  animation-delay: -0.5s;
}

.letter7 {
  animation-delay: -0.4s;
}

.letter8 {
  animation-delay: -0.3s;
}

.letter9 {
  animation-delay: -0.2s;
}

.letter10 {
  animation-delay: -0.1s;
}
</style>


================================================
FILE: loaders/csozidev_jolly-termite-4.html
================================================
<div class="spinner-box">
  <div class="configure-border-1">  
    <div class="configure-core"></div>
  </div>  
  <div class="configure-border-2">
    <div class="configure-core"></div>
  </div> 
</div>
<style>
/* From Uiverse.io by csozidev - Source: https://codepen.io/AlexWarnes/pen/jXYYKL - Tags: simple, loader, modern, animated, repost */
/*
 I DID NOT MAKE THIS! THIS IS JUST A REPOST FROM: 
 codepen.io/AlexWarnes/pen/jXYYKL 
 My website: english.csozi.hu*/

.configure-border-1 {
  width: 50px;
  height: 50px;
  padding: 3px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fb5b53;
  animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
}

.configure-border-2 {
  width: 50px;
  height: 50px;
  padding: 3px;
  left: -50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(63,249,220);
  transform: rotate(45deg);
  animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
}

.configure-core {
  width: 100%;
  height: 100%;
  background-color: #1d2630;
}

@keyframes configure-clockwise {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes configure-xclockwise {
  0% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(-45deg);
  }

  50% {
    transform: rotate(-135deg);
  }

  75% {
    transform: rotate(-225deg);
  }

  100% {
    transform: rotate(-315deg);
  }
}
</style>


================================================
FILE: loaders/csozidev_popular-ape-6.html
================================================
<div class="loader">
  <div class="block b_1"></div>
  <div class="block b_2"></div>
  <div class="block b_3"></div>
  <div class="block b_4"></div>
  <div class="block b_5"></div>
  <div class="block b_6"></div>
  <div class="block b_7"></div>
  <div class="block b_8"></div>
</div>
<style>
/* From Uiverse.io by csozidev - Tags: simple, black, loader, loop */
/* Simple loader made by: csozi | Website: www.csozi.hu*/

.loader {
  height: 50px;
  width: 50px;
  position: relative;
}

.block {
  height: 10px;
  width: 10px;
  background-color: black;
  position: absolute;
  opacity: 0;
}

.b_1 {
  top: 0;
  left: 0;
  animation: load 2s infinite;
  animation-delay: 0;
}

.b_2 {
  top: 0;
  left: 20px;
  animation: load 2s infinite;
  animation-delay: 0.25s;
}

.b_3 {
  top: 0;
  right: 0;
  animation: load 2s infinite;
  animation-delay: 0.5s;
}

.b_4 {
  top: 20px;
  right: 0;
  animation: load 2s infinite;
  animation-delay: 0.75s;
}

.b_5 {
  bottom: 0;
  right: 0;
  animation: load 2s infinite;
  animation-delay: 1s;
}

.b_6 {
  bottom: 0;
  left: 20px;
  animation: load 2s infinite;
  animation-delay: 1.25s;
}

.b_7 {
  bottom: 0;
  left: 0;
  animation: load 2s infinite;
  animation-delay: 1.5s;
}

.b_8 {
  top: 20px;
  left: 0;
  animation: load 2s infinite;
  animation-delay: 1.75s;
}

@keyframes load {
  0% {
    opacity: 1;
  }

  85% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>


================================================
FILE: loaders/csozidev_weak-bulldog-22.html
================================================
<div class="loader">
  <div class="box box-1">
    <div class="side-left"></div>
    <div class="side-right"></div>
    <div class="side-top"></div>
  </div>
  <div class="box box-2">
    <div class="side-left"></div>
    <div class="side-right"></div>
    <div class="side-top"></div>
  </div>
  <div class="box box-3">
    <div class="side-left"></div>
    <div class="side-right"></div>
    <div class="side-top"></div>
  </div>
  <div class="box box-4">
    <div class="side-left"></div>
    <div class="side-right"></div>
    <div class="side-top"></div>
  </div>
</div>
<style>
/* From Uiverse.io by csozidev - Tags: simple, 3d, loader */
/* 3D tower loader made by: csozi | Website: www.csozi.hu*/

.loader {
  scale: 3;
  height: 50px;
  width: 40px;
}

.box {
  position: relative;
  opacity: 0;
  left: 10px;
}

.side-left {
  position: absolute;
  background-color: #286cb5;
  width: 19px;
  height: 5px;
  transform: skew(0deg, -25deg);
  top: 14px;
  left: 10px;
}

.side-right {
  position: absolute;
  background-color: #2f85e0;
  width: 19px;
  height: 5px;
  transform: skew(0deg, 25deg);
  top: 14px;
  left: -9px;
}

.side-top {
  position: absolute;
  background-color: #5fa8f5;
  width: 20px;
  height: 20px;
  rotate: 45deg;
  transform: skew(-20deg, -20deg);
}

.box-1 {
  animation: from-left 4s infinite;
}

.box-2 {
  animation: from-right 4s infinite;
  animation-delay: 1s;
}

.box-3 {
  animation: from-left 4s infinite;
  animation-delay: 2s;
}

.box-4 {
  animation: from-right 4s infinite;
  animation-delay: 3s;
}

@keyframes from-left {
  0% {
    z-index: 20;
    opacity: 0;
    translate: -20px -6px;
  }

  20% {
    z-index: 10;
    opacity: 1;
    translate: 0px 0px;
  }

  40% {
    z-index: 9;
    translate: 0px 4px;
  }

  60% {
    z-index: 8;
    translate: 0px 8px;
  }

  80% {
    z-index: 7;
    opacity: 1;
    translate: 0px 12px;
  }

  100% {
    z-index: 5;
    translate: 0px 30px;
    opacity: 0;
  }
}

@keyframes from-right {
  0% {
    z-index: 20;
    opacity: 0;
    translate: 20px -6px;
  }

  20% {
    z-index: 10;
    opacity: 1;
    translate: 0px 0px;
  }

  40% {
    z-index: 9;
    translate: 0px 4px;
  }

  60% {
    z-index: 8;
    translate: 0px 8px;
  }

  80% {
    z-index: 7;
    opacity: 1;
    translate: 0px 12px;
  }

  100% {
    z-index: 5;
    translate: 0px 30px;
    opacity: 0;
  }
}
</style>


================================================
FILE: loaders/csozidev_young-bat-70.html
================================================
<div class="loader">
  <div class="square-1 square"></div>
  <div class="square-2 square"></div>
</div>
<style>
/* From Uiverse.io by csozidev - Tags: loader */
/* Discord loader made by: csozi | Website: www.csozi.hu*/

.loader {
  position: relative;
  height: 60px;
  width: 60px;
  box-sizing: content-box;
  padding: 10px;
}

.square {
  background-color: #7289DA;
  height: 20px;
  width: 20px;
  position: absolute;
}

.square-1 {
  animation: load 2s infinite;
}

.square-2 {
  animation: load 2s infinite;
  animation-delay: 1s;
}

@keyframes load {
  0% {
    translate: 0px 0px;
    scale: 1;
    rotate: 0deg;
  }

  25% {
    translate: 40px 0px;
    scale: 0.5;
    rotate: -90deg;
  }

  50% {
    translate: 40px 40px;
    scale: 1;
    rotate: 180deg;
  }

  75% {
    translate: 0px 40px;
    scale: 0.5;
    rotate: 90deg;
  }
}
</style>


================================================
FILE: loaders/d4niz_bitter-seahorse-2.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by d4niz - Tags: loader */
.loader {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4.6px solid #0000;
  border-radius: 100%;
  border-color: #008cff #0000;
  animation: spinner-e04l1k 1.5s infinite linear;
}

.loader::before, .loader::after {
  content: "";
  grid-area: 1/1;
  margin: 8px;
  border: inherit;
  border-radius: 50%;
}

.loader::before {
  border-color: #048be6 #0000;
  animation: inherit;
  animation-duration: 0.1s;
}

.loader::after {
  margin: 2.9px;
}

@keyframes spinner-e04l1k {
  100% {
    transform: rotate(1turn);
  }
}
</style>


================================================
FILE: loaders/david-mohseni_breezy-penguin-47.html
================================================
<div class="arrow">
    <span></span>
    <span></span>
    <span></span>
</div>
<style>
/* From Uiverse.io by david-mohseni - Tags: loader */
.arrow {
  transform: rotate(90deg);
  cursor: pointer;
}

.arrow span {
  display: block;
  width: 15px;
  height: 15px;
  border-bottom: 5px solid red;
  border-right: 5px solid red;
  transform: rotate(45deg);
  margin: -15px;
  animation: animate28797 2s infinite;
}

.arrow span:nth-child(2) {
  animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
  animation-delay: -0.4s;
}

@keyframes animate28797 {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-20px, -20px);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: rotate(45deg) translate(20px, 20px);
  }
}
</style>


================================================
FILE: loaders/david-mohseni_smart-cow-19.html
================================================
<div class="ball"></div>
<div class="shadow"></div>
<style>
/* From Uiverse.io by david-mohseni - Tags: loader */
.ball {
  animation: float612 2.4s ease-in-out infinite;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  position: relative;
  background: radial-gradient( circle at 75% 30%, white 5px, #DF00FF 8%, #DB9EDF 60%, #DF00FF 100%);
  box-shadow: inset 0 0 20px #C1AAC6, inset 10px 0 46px #DF00FF, inset 88px 0px 60px #DB9EDF, inset -20px -60px 100px #fde9ea, inset 0 50px 140px #fde9ea, 0 0 90px #fff;
}

@keyframes float612 {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-50px);
  }

  100% {
    transform: translatey(0px);
  }
}

.shadow {
  background: #DB9EDF;
  width: 80px;
  height: 25px;
  top: 65%;
  animation: expand6234 2.4s ease-in-out infinite;
  position: absolute;
  border-radius: 50%;
}

@keyframes expand6234 {
  0%,
            100% {
    transform: scale(0.6);
  }

  50% {
    transform: scale(0.3);
    filter: blur(5px);
  }
}

</style>


================================================
FILE: loaders/david-mohseni_yellow-cat-24.html
================================================
<div class="loader">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    <div class="bar4"></div>
    <div class="bar5"></div>
    <div class="bar6"></div>
    <div class="bar7"></div>
    <div class="bar8"></div>
    <div class="bar9"></div>
    <div class="bar10"></div>
    <div class="bar11"></div>
    <div class="bar12"></div>
</div>
<style>
/* From Uiverse.io by david-mohseni - Tags: loader */
.loader {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 10px;
}

.loader div {
  width: 8%;
  height: 24%;
  background: rgb(128, 128, 128);
  position: absolute;
  left: 50%;
  top: 30%;
  opacity: 0;
  border-radius: 50px;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  animation: fade458 1s linear infinite;
}

@keyframes fade458 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.25;
  }
}

.loader .bar1 {
  transform: rotate(0deg) translate(0, -130%);
  animation-delay: 0s;
}

.loader .bar2 {
  transform: rotate(30deg) translate(0, -130%);
  animation-delay: -1.1s;
}

.loader .bar3 {
  transform: rotate(60deg) translate(0, -130%);
  animation-delay: -1s;
}

.loader .bar4 {
  transform: rotate(90deg) translate(0, -130%);
  animation-delay: -0.9s;
}

.loader .bar5 {
  transform: rotate(120deg) translate(0, -130%);
  animation-delay: -0.8s;
}

.loader .bar6 {
  transform: rotate(150deg) translate(0, -130%);
  animation-delay: -0.7s;
}

.loader .bar7 {
  transform: rotate(180deg) translate(0, -130%);
  animation-delay: -0.6s;
}

.loader .bar8 {
  transform: rotate(210deg) translate(0, -130%);
  animation-delay: -0.5s;
}

.loader .bar9 {
  transform: rotate(240deg) translate(0, -130%);
  animation-delay: -0.4s;
}

.loader .bar10 {
  transform: rotate(270deg) translate(0, -130%);
  animation-delay: -0.3s;
}

.loader .bar11 {
  transform: rotate(300deg) translate(0, -130%);
  animation-delay: -0.2s;
}

.loader .bar12 {
  transform: rotate(330deg) translate(0, -130%);
  animation-delay: -0.1s;
}

</style>


================================================
FILE: loaders/davidhbt_spicy-eagle-12.html
================================================
<div class="loader">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
<style>
/* From Uiverse.io by davidhbt - Tags: loader */
@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.loader {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle {
  width: 20px;
  height: 20px;
  background-color: rgb(83, 82, 82);
  border-radius: 50%;
  margin: 2px;
  animation: bounce 1.2s infinite ease-in-out;
}

.circle:nth-child(2) {
  animation-delay: -0.1s;
}

.circle:nth-child(3) {
  animation-delay: -0.2s;
}

.circle:nth-child(4) {
  animation-delay: -0.3s;
}

.circle:nth-child(5) {
  animation-delay: -0.4s;
}

.circle:nth-child(6) {
  animation-delay: -0.5s;
}

.circle:nth-child(7) {
  animation-delay: -0.6s;
}

.circle:nth-child(8) {
  animation-delay: -0.7s;
}

.circle:nth-child(9) {
  animation-delay: -0.8s;
}

.circle:nth-child(10) {
  animation-delay: -0.9s;
}
</style>


================================================
FILE: loaders/devAaus_funny-catfish-94.html
================================================
<!-- From Uiverse.io by devAaus  - Tags: loading, loader, spinner, colorful, circle loader, spin, multicolor, loading animation -->
<div class="flex-col gap-4 w-full flex items-center justify-center">
  <div
    class="w-20 h-20 border-4 border-transparent text-blue-400 text-4xl animate-spin flex items-center justify-center border-t-blue-400 rounded-full"
  >
    <div
      class="w-16 h-16 border-4 border-transparent text-red-400 text-2xl animate-spin flex items-center justify-center border-t-red-400 rounded-full"
    ></div>
  </div>
</div>


    

================================================
FILE: loaders/dhruv465_stupid-starfish-42.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by dhruv465 - Tags: loader, animated, circle loader */
.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

/* Add some glow effect */
.loader::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  box-shadow: inset 0px 0px 20px #3498db;
}

/* Rotate the circle */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/dimasptrautmaa_kind-eel-48.html
================================================
<div id="page">
        <div id="container">
            <div id="ring"></div>
            <div id="ring"></div>
            <div id="ring"></div>
            <div id="ring"></div>
            <div id="h3">loading</div>
        </div>
</div>
<style>
/* From Uiverse.io by dimasptrautmaa - Tags: 3d, loader, colorful */
#page {
  display: flex;
  justify-content: center;
  align-items: center;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#h3 {
  color: white;
}

#ring {
  width: 190px;
  height: 190px;
  border: 1px solid transparent;
  border-radius: 50%;
  position: absolute;
}

#ring:nth-child(1) {
  border-bottom: 8px solid rgb(255, 141, 249);
  animation: rotate1 2s linear infinite;
}

@keyframes rotate1 {
  from {
    transform: rotateX(50deg) rotateZ(110deg);
  }

  to {
    transform: rotateX(50deg) rotateZ(470deg);
  }
}

#ring:nth-child(2) {
  border-bottom: 8px solid rgb(255,65,106);
  animation: rotate2 2s linear infinite;
}

@keyframes rotate2 {
  from {
    transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);
  }

  to {
    transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);
  }
}

#ring:nth-child(3) {
  border-bottom: 8px solid rgb(0,255,255);
  animation: rotate3 2s linear infinite;
}

@keyframes rotate3 {
  from {
    transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);
  }

  to {
    transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);
  }
}

#ring:nth-child(4) {
  border-bottom: 8px solid rgb(252, 183, 55);
  animation: rotate4 2s linear infinite;
}

@keyframes rotate4 {
  from {
    transform: rotateX(70deg) rotateZ(270deg);
  }

  to {
    transform: rotateX(70deg) rotateZ(630deg);
  }
}
</style>


================================================
FILE: loaders/doniaskima_big-bear-52.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: simple, material design, neumorphism, loader */
/* HTML: <div class="loader"></div> */
.loader {
  display: inline-flex;
  border: 2px solid #000;
  --c: no-repeat linear-gradient(#000 0 0) 50%;
  background: var(--c) calc(50% - 5px)/5px 5px,
    var(--c) calc(50% + 5px)/5px 5px;
}

.loader::before,
.loader::after {
  content: "12 00 23 40 31 45 60 17 45 32 29 42 50 08 14 07 46 11 03 55";
  font-size: 30px;
  font-family: monospace;
  font-weight: bold;
  line-height: 1em;
  height: 1em;
  width: 2ch;
  color: #0000;
  text-shadow: 0 0 0 #000;
  overflow: hidden;
  margin: 5px 10px;
  animation: l3 1s steps(20) infinite;
}

.loader::before {
  animation-duration: 1.5s;
}

@keyframes l3 {
  100% {
    text-shadow: 0 -20em 0 #000
  }
}
</style>


================================================
FILE: loaders/doniaskima_calm-yak-25.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: simple, material design, loader */
/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  --g: #0000 calc(100% - 5px),#000 calc(100% - 3px) 93%,#0000;
  background: radial-gradient(farthest-side at bottom,var(--g)) top                  /100% 50%,
    radial-gradient(farthest-side at top   ,var(--g)) bottom 18% right  0  /80%  40%,
    radial-gradient(farthest-side at bottom,var(--g)) left   50% top    30%/60%  30%,
    radial-gradient(farthest-side at top   ,var(--g)) right  34% bottom 37%/40%  20%,
    radial-gradient(farthest-side at bottom,var(--g)) left   52% top    43%/24%  12%;
  background-repeat: no-repeat;
  animation: l20 1s infinite linear;
}

@keyframes l20 {
  100% {
    transform: rotate(1turn)
  }
}
</style>


================================================
FILE: loaders/doniaskima_clever-wombat-14.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: simple, neumorphism, flashy, loader */
/* HTML: <div class="loader"></div> */
.loader {
  width: 100px;
  height: 45px;
  position: relative;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  box-shadow: 0 0 0 50px;
  clip-path: polygon(-50px -20px,10% -12px,20% 0,calc(50% - 15px) 0,calc(50% - 10px) -20px,calc(50% - 8px) -15px,calc(50% + 8px) -15px,calc(50% + 10px) -20px,calc(50% + 15px) 0,80% 0,90% -12px,calc(100% + 50px) -20px,100% 80%,calc(100% + 10px) calc(100% + 10px),60% 100%,50% calc(100% + 15px),40% 100%,-10px calc(100% + 10px),0 80%);
}

.loader:after {
  animation: l9 1s infinite;
  transform: perspective(300px) translateZ(0px)
}

@keyframes l9 {
  to {
    transform: perspective(300px) translateZ(100px);
    opacity: 0
  }
}
</style>


================================================
FILE: loaders/doniaskima_cowardly-frog-28.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: simple, material design, neumorphism, skeuomorphism, glassmorphism, flashy, loader */
/* HTML: <div class="loader"></div> */
.loader {
  width: 100px;
  height: 60px;
  display: flex;
  animation: l12-0 2s infinite linear;
}

.loader::before,
.loader::after {
  content: "";
  flex: 4;
  background: radial-gradient(at 50% 20%,#0000,#000a) bottom left/20px 20px repeat-x,
    linear-gradient(red 0 0) bottom/100% 20px no-repeat
    #ddd;
  -webkit-mask: repeating-linear-gradient(90deg,#000 0 4px,#0000 0 20px) 8px 0,
    radial-gradient(farthest-side,#000 90%,#0000) left bottom/20px 20px repeat-x;
}

.loader::after {
  flex: 1;
  transform-origin: top;
  animation: l12-1 1s cubic-bezier(0,20,1,20) infinite;
}

@keyframes l12-0 {
 
  0%,49.9% {
    transform: scaleX(1)
  }

  50%,100% {
    transform: scaleX(-1)
  }
}

@keyframes l12-1 {
 
  100% {
    transform: rotate(-2deg)
  }
}
</style>


================================================
FILE: loaders/doniaskima_fresh-panther-60.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: simple, material design, loader */
/* HTML: <div class="loader"></div> */
.loader {
  width: 80px;
  height: 40px;
  border-radius: 100px 100px 0 0;
  position: relative;
  overflow: hidden;
}

.loader:before {
  content: "";
  position: absolute;
  inset: 0 0 -100%;
  background: radial-gradient(farthest-side,#ffd738 80%,#0000) left 70% top    20%/15px 15px,
    radial-gradient(farthest-side,#020308 92%,#0000) left 65% bottom 19%/12px 12px,
    radial-gradient(farthest-side,#ecfefe 92%,#0000) left 70% bottom 20%/15px 15px,
    linear-gradient(#9eddfe 50%,#020308 0);
  background-repeat: no-repeat;
  animation: l5 2s infinite;
}

@keyframes l5 {
  0%,20% {
    transform: rotate(0)
  }

  40%,60% {
    transform: rotate(.5turn)
  }

  80%,100% {
    transform: rotate(1turn)
  }
}

</style>


================================================
FILE: loaders/doniaskima_hard-rattlesnake-83.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: material design, neumorphism, loader */
/* HTML: <div class="loader"></div> */
.loader {
  height: 80px;
  width: 20px;
  color: #514b82;
  background: radial-gradient(farthest-side,currentColor 94%,#0000 ) top/8px 8px,
    linear-gradient(currentColor 0 0) top/4px 70%,
    conic-gradient(from -30deg at bottom,#0000,currentColor 2deg 58deg,#0000 60deg) bottom            /100% 20px,
    conic-gradient(from 150deg at top   ,#0000,currentColor 2deg 58deg,#0000 60deg) bottom 20px left 0/100% 20px;
  background-repeat: no-repeat;
  transform-origin: 50% 4px;
  animation: l15 2s infinite cubic-bezier(0.5,300,0.5,-300);
}

@keyframes l15 {
 
  100% {
    transform: rotate(0.5deg)
  }
}
</style>


================================================
FILE: loaders/doniaskima_itchy-baboon-21.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: material design, neumorphism, flashy, loader */
.loader {
  width: 80px;
  height: 40px;
  color: #000;
  border: 2px solid currentColor;
  border-right-color: transparent;
  padding: 3px;
  background: repeating-linear-gradient(90deg,currentColor 0 10px,#0000 0 15px) 
    0/0% no-repeat content-box content-box;
  position: relative;
  animation: l5 2s infinite steps(6);
}

.loader::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 100%;
  width: 10px;
  background: linear-gradient(
        #0000   calc(50% - 7px),currentColor 0 calc(50% - 5px),
        #0000 0 calc(50% + 5px),currentColor 0 calc(50% + 7px),#0000 0) left /100% 100%,
    linear-gradient(currentColor calc(50% - 5px),#0000        0 calc(50% + 5px),currentColor 0) left /2px 100%,
    linear-gradient(#0000        calc(50% - 5px),currentColor 0 calc(50% + 5px),#0000        0) right/2px 100%;
  background-repeat: no-repeat;
}

@keyframes l5 {
  100% {
    background-size: 120%
  }
}
</style>


================================================
FILE: loaders/doniaskima_jolly-fireant-35.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: simple, neumorphism, success, loader */
.loader {
  display: inline-flex;
  gap: 10px;
}

.loader:before,
.loader:after {
  content: "";
  height: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side,#000 95%,#0000) 35% 35%/6px 6px no-repeat
    #fff;
  transform: scaleX(var(--s,1)) rotate(0deg);
  animation: l6 1s infinite linear;
}

.loader:after {
  --s: -1;
  animation-delay: -0.1s;
}

@keyframes l6 {
  100% {
    transform: scaleX(var(--s,1)) rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/doniaskima_light-dog-59.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: simple, material design, loader, code, modern */
.loader {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  background: radial-gradient(circle closest-side,#000 94%,#0000) right/calc(200% - 1em) 100%;
  animation: l24 1s infinite alternate linear;
}

.loader::before {
  content: "Loading...";
  line-height: 1em;
  color: #0000;
  background: inherit;
  background-image: radial-gradient(circle closest-side,#fff 94%,#000);
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes l24 {
  100% {
    background-position: left
  }
}
</style>


================================================
FILE: loaders/doniaskima_neat-fox-67.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: simple, neumorphism, skeuomorphism, glassmorphism, flashy, icon, animation, loader */
/* HTML: <div class="loader"></div> */
.loader {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  background: linear-gradient(90deg,#000 50%,#0000 0) right/200% 100%;
  animation: l21 2s infinite linear;
}

.loader::before {
  content: "Loading...";
  color: #0000;
  padding: 0 5px;
  background: inherit;
  background-image: linear-gradient(90deg,#fff 50%,#000 0);
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes l21 {
  100% {
    background-position: left
  }
}
</style>


================================================
FILE: loaders/doniaskima_pretty-dolphin-47.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: simple, material design, neumorphism, loader */
/* HTML: <div class="loader"></div> */
.loader {
  height: 60px;
  aspect-ratio: 1;
  position: relative;
}

.loader::before,
.loader::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-origin: bottom;
}

.loader::after {
  background: radial-gradient(at 75% 15%,#fffb,#0000 35%),
    radial-gradient(at 80% 40%,#0000,#0008),
    radial-gradient(circle  5px,#fff 94%,#0000),
    radial-gradient(circle 10px,#000 94%,#0000),
    linear-gradient(#F93318 0 0) top   /100% calc(50% - 5px),
    linear-gradient(#fff    0 0) bottom/100% calc(50% - 5px)
    #000;
  background-repeat: no-repeat;
  animation: l20 1s infinite cubic-bezier(0.5,120,0.5,-120);
}

.loader::before {
  background: #ddd;
  filter: blur(8px);
  transform: scaleY(0.4) translate(-13px, 0px);
}

@keyframes l20 {
 
  30%,70% {
    transform: rotate(0deg)
  }

  49.99% {
    transform: rotate(0.2deg)
  }

  50% {
    transform: rotate(-0.2deg)
  }
}
</style>


================================================
FILE: loaders/doniaskima_pretty-mouse-82.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by doniaskima - Tags: simple, material design, skeuomorphism, glassmorphism, animation, loader */
/* HTML: <div class="loader"></div> */
.loader {
  width: 35px;
  height: 80px;
  position: relative;
}

.loader:after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px 5px;
  border-top: 1px solid #bbb6aa;
  border-bottom: 4px solid #bbb6aa;
  background: linear-gradient(#612329 0 0) bottom no-repeat content-box, 
    #e4e0d7;
  mix-blend-mode: darken;
  animation: l1 1.5s infinite linear;
}

.loader:before {
  content: "";
  position: absolute;
  inset: -18px calc(50% - 2px) 8px;
  background: #eb6b3e;
  transform-origin: bottom;
  transform: rotate(8deg);
}

@keyframes l1 {
  0% {
    background-size: 100% 100%
  }

  100% {
    background-size: 100% 5%
  }
}
</style>


================================================
FILE: loaders/doniaskima_rare-falcon-68.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: simple, material design, loader */
/* HTML: <div class="loader"></div> */
.loader {
  --c1: #673b14;
  --c2: #f8b13b;
  width: 40px;
  height: 80px;
  border-top: 4px solid var(--c1);
  border-bottom: 4px solid var(--c1);
  background: linear-gradient(90deg, var(--c1) 2px, var(--c2) 0 5px,var(--c1) 0) 50%/7px 8px no-repeat;
  display: grid;
  overflow: hidden;
  animation: l5-0 2s infinite linear;
}

.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  width: 75%;
  height: calc(50% - 4px);
  margin: 0 auto;
  border: 2px solid var(--c1);
  border-top: 0;
  box-sizing: content-box;
  border-radius: 0 0 40% 40%;
  -webkit-mask: linear-gradient(#000 0 0) bottom/4px 2px no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  background: linear-gradient(var(--d,0deg),var(--c2) 50%,#0000 0) bottom /100% 205%,
    linear-gradient(var(--c2) 0 0) center/0 100%;
  background-repeat: no-repeat;
  animation: inherit;
  animation-name: l5-1;
}

.loader::after {
  transform-origin: 50% calc(100% + 2px);
  transform: scaleY(-1);
  --s: 3px;
  --d: 180deg;
}

@keyframes l5-0 {
  80% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(0.5turn)
  }
}

@keyframes l5-1 {
  10%,70% {
    background-size: 100% 205%,var(--s,0) 100%
  }

  70%,100% {
    background-position: top,center
  }
}
</style>


================================================
FILE: loaders/doniaskima_rare-newt-29.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: simple, material design, neumorphism, loader */
.loader {
  width: fit-content;
  font-size: 17px;
  font-family: monospace;
  line-height: 1.4;
  font-weight: bold;
  background: linear-gradient(#000 0 0) left ,
    linear-gradient(#000 0 0) right;
  background-repeat: no-repeat;
  border-right: 5px solid #0000;
  border-left: 5px solid #0000;
  background-origin: border-box;
  position: relative;
  animation: l9-0 2s infinite;
}

.loader::before {
  content: "Loading";
}

.loader::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 22px;
  height: 60px;
  background: linear-gradient(90deg,#000 4px,#0000 0 calc(100% - 4px),#000 0) bottom            /22px 20px,
   linear-gradient(90deg,red  4px,#0000 0 calc(100% - 4px),red  0) bottom 10px left 0/22px 6px,
   linear-gradient(#000 0 0) bottom 3px left 0  /22px 8px,
   linear-gradient(#000 0 0) bottom 0   left 50%/8px  16px;
  background-repeat: no-repeat;
  animation: l9-1 2s infinite;
}

@keyframes l9-0 {
  0%,25% {
    background-size: 50% 100%
  }

  25.1%,75% {
    background-size: 0 0,50% 100%
  }

  75.1%,100% {
    background-size: 0 0,0 0
  }
}

@keyframes l9-1 {
  25% {
    background-position: bottom, bottom 54px left 0,bottom 3px left 0,bottom 0 left 50%;
    left: 0
  }

  25.1% {
    background-position: bottom, bottom 10px left 0,bottom 3px left 0,bottom 0 left 50%;
    left: 0
  }

  50% {
    background-position: bottom, bottom 10px left 0,bottom 3px left 0,bottom 0 left 50%;
    left: calc(100% - 22px)
  }

  75% {
    background-position: bottom, bottom 54px left 0,bottom 3px left 0,bottom 0 left 50%;
    left: calc(100% - 22px)
  }

  75.1% {
    background-position: bottom, bottom 10px left 0,bottom 3px left 0,bottom 0 left 50%;
    left: calc(100% - 22px)
  }
}
</style>


================================================
FILE: loaders/doniaskima_sharp-sheep-24.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: simple, material design, loader */
/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  height: 30px;
  display: grid;
  --c: #0000 calc(100% - 5px),#000 calc(100% - 4px) 96%,#0000;
  background: radial-gradient(farthest-side at bottom,var(--c)) 0 0,
    radial-gradient(farthest-side at top   ,var(--c)) 100% 100%;
  background-size: calc(50% + 2px) 50%;
  background-repeat: no-repeat;
  animation: l14 1.5s infinite linear;
}

.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  background: inherit;
  animation: inherit;
  animation-duration: 2s;
}

.loader:after {
  --s: -1;
}

@keyframes l14 {
  100% {
    transform: rotate(calc(var(--s,1)*1turn))
  }
}
</style>


================================================
FILE: loaders/doniaskima_silent-skunk-22.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: neumorphism, 3d, action, loader, image, flip, jelly, realistic */
.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side,#000 98%,#0000) 55% 20%/8px 8px no-repeat,  
    #ffcc00;
  box-shadow: 2px -6px 12px 0px inset rgba(0, 0, 0, 0.7);
  animation: l4 .5s infinite steps(5) alternate;
}

@keyframes l4 {
 
  0% {
    clip-path: polygon(50% 50%,100%   0,100% 0,0 0,0 100%,100% 100%,100% 100%)
  }

  100% {
    clip-path: polygon(50% 50%,100% 65%,100% 0,0 0,0 100%,100% 100%,100%  35%)
  }
}
</style>


================================================
FILE: loaders/doniaskima_sweet-gecko-35.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: neumorphism, skeuomorphism, loader */
.loader {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  white-space: pre;
  font-size: 30px;
  line-height: 1.2em;
  height: 1.2em;
  overflow: hidden;
}

.loader:before {
  content: "Loading...\A⌰oading...\A⌰⍜ading...\A⌰⍜⏃ding...\A⌰⍜⏃⎅ing...\A⌰⍜⏃⎅⟟ng...\A⌰⍜⏃⎅⟟⋏g...\A⌰⍜⏃⎅⟟⋏☌...\A⌰⍜⏃⎅⟟⋏☌⟒..\A⌰⍜⏃⎅⟟⋏☌⟒⏁.\A⌰⍜⏃⎅⟟⋏☌⟒⏁⋔";
  white-space: pre;
  display: inline-block;
  animation: l39 1s infinite steps(11) alternate;
}

@keyframes l39 {
  100% {
    transform: translateY(-100%)
  }
}
</style>


================================================
FILE: loaders/doniaskima_wet-parrot-70.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: simple, material design, loader */
/* HTML: <div class="loader"></div> */
.loader {
  width: 80px;
  height: 70px;
  border: 5px solid #000;
  padding: 0 8px;
  box-sizing: border-box;
  background: linear-gradient(#fff 0 0) 0    0/8px 20px,
    linear-gradient(#fff 0 0) 100% 0/8px 20px,
    radial-gradient(farthest-side,#fff 90%,#0000) 0 5px/8px 8px content-box,
    #000;
  background-repeat: no-repeat;
  animation: l3 2s infinite linear;
}

@keyframes l3 {
  25% {
    background-position: 0 0   ,100% 100%,100% calc(100% - 5px)
  }

  50% {
    background-position: 0 100%,100% 100%,0    calc(100% - 5px)
  }

  75% {
    background-position: 0 100%,100%    0,100% 5px
  }
}
</style>


================================================
FILE: loaders/doniaskima_yellow-deer-12.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by doniaskima - Tags: simple, material design, loader */
/* HTML: <div class="loader"></div> */
.loader {
  width: 120px;
  height: 20px;
  background: linear-gradient(#000 50%,#0000 0),
    linear-gradient(#0000 50%,#000 0),
    linear-gradient(#000 50%,#0000 0),
    linear-gradient(#0000 50%,#000 0),
    linear-gradient(#000 50%,#0000 0),
    linear-gradient(#0000 50%,#000 0)
    #ddd;
  background-size: calc(100%/6 + 1px) 200%;
  background-repeat: no-repeat;
  animation: l12 2s infinite;
}

@keyframes l12 {
  0% {
    background-position: calc(0*100%/5) 100%,calc(1*100%/5)   0%,calc(2*100%/5) 100%,calc(3*100%/5)   0%,calc(4*100%/5) 100%,calc(5*100%/5)   0%
  }

  16.67% {
    background-position: calc(0*100%/5)   0%,calc(1*100%/5)   0%,calc(2*100%/5) 100%,calc(3*100%/5)   0%,calc(4*100%/5) 100%,calc(5*100%/5)   0%
  }

  33.33% {
    background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5) 100%,calc(3*100%/5)   0%,calc(4*100%/5) 100%,calc(5*100%/5)   0%
  }

  50% {
    background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5)   0%,calc(3*100%/5)   0%,calc(4*100%/5) 100%,calc(5*100%/5)   0%
  }

  66.67% {
    background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5)   0%,calc(3*100%/5) 100%,calc(4*100%/5) 100%,calc(5*100%/5)   0%
  }

  83.33% {
    background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5)   0%,calc(3*100%/5) 100%,calc(4*100%/5)   0%,calc(5*100%/5)   0%
  }

  100% {
    background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5)   0%,calc(3*100%/5) 100%,calc(4*100%/5)   0%,calc(5*100%/5) 100%
  }
}
</style>


================================================
FILE: loaders/dvhoang2106_orange-fox-63.html
================================================
<div class="spinner">
<div></div>
</div>
<style>
/* From Uiverse.io by dvhoang2106 - Tags: loader */
.spinner {
 display: inline-block;
 transform: translateZ(1px);
}

.spinner > div {
 display: inline-block;
 width: 64px;
 height: 64px;
 margin: 8px;
 border-radius: 50%;
 background: #fff;
 animation: spinner8344 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes spinner8344 {
 0%,
  100% {
  animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
 }

 0% {
  transform: rotateY(0deg);
 }

 50% {
  transform: rotateY(1800deg);
  animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
 }

 100% {
  transform: rotateY(3600deg);
 }
}
</style>


================================================
FILE: loaders/dylanharriscameron_ancient-falcon-18.html
================================================
<div class="loaderBar"></div>
<style>
/* From Uiverse.io by dylanharriscameron - Tags: loading, loader, infinite */
.loaderBar {
  width: calc(160px / 0.707);
  height: 10px;
  background: #F9F9F9;
  border-radius: 10px;
  border: 1px solid #006DFE;
  position: relative;
  overflow: hidden;
}

.loaderBar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 5px;
  background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px) right/200% 100%;
  animation: fillProgress 6s ease-in-out infinite, lightEffect 1s infinite linear;
  animation-fill-mode: forwards;
}

@keyframes fillProgress {
  0% {
    width: 0;
  }

  33% {
    width: 33.333%;
  }

  66% {
    width: 66.67%;
  }

  100% {
    width: 100%;
  }
}

@keyframes lightEffect {
  0%, 20%, 40%, 60%, 80%, 100% {
    background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px) right/200% 100%;
  }

  10%, 30%, 50%, 70%, 90% {
    background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px, rgba(255, 255, 255, 0.3) 0 40px) right/200% 100%;
  }
}
</style>


================================================
FILE: loaders/e-coders_honest-dingo-15.html
================================================
<div class="loadingio-spinner-spinner-977el9wwy2v"><div class="ldio-4j5ay0xf86g">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div></div>
<style>
/* From Uiverse.io by e-coders - Tags: loader */
@keyframes ldio-4j5ay0xf86g {
 0% {
  opacity: 1
 }

 100% {
  opacity: 0
 }
}

.ldio-4j5ay0xf86g div {
 left: 94px;
 top: 48px;
 position: absolute;
 animation: ldio-4j5ay0xf86g linear 1s infinite;
 background: #fe718d;
 width: 12px;
 height: 24px;
 border-radius: 6px / 12px;
 transform-origin: 6px 52px;
}

.ldio-4j5ay0xf86g div:nth-child(1) {
 transform: rotate(0deg);
 animation-delay: -0.9166666666666666s;
 background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(2) {
 transform: rotate(30deg);
 animation-delay: -0.8333333333333334s;
 background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(3) {
 transform: rotate(60deg);
 animation-delay: -0.75s;
 background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(4) {
 transform: rotate(90deg);
 animation-delay: -0.6666666666666666s;
 background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(5) {
 transform: rotate(120deg);
 animation-delay: -0.5833333333333334s;
 background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(6) {
 transform: rotate(150deg);
 animation-delay: -0.5s;
 background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(7) {
 transform: rotate(180deg);
 animation-delay: -0.4166666666666667s;
 background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(8) {
 transform: rotate(210deg);
 animation-delay: -0.3333333333333333s;
 background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(9) {
 transform: rotate(240deg);
 animation-delay: -0.25s;
 background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(10) {
 transform: rotate(270deg);
 animation-delay: -0.16666666666666666s;
 background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(11) {
 transform: rotate(300deg);
 animation-delay: -0.08333333333333333s;
 background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(12) {
 transform: rotate(330deg);
 animation-delay: 0s;
 background: #fe718d;
}

.loadingio-spinner-spinner-977el9wwy2v {
 width: 200px;
 height: 200px;
 display: inline-block;
 overflow: hidden;
}

.ldio-4j5ay0xf86g {
 width: 100%;
 height: 100%;
 position: relative;
 transform: translateZ(0) scale(1);
 backface-visibility: hidden;
 transform-origin: 0 0;
 /* see note above */
}

.ldio-4j5ay0xf86g div {
 box-sizing: content-box;
}
</style>


================================================
FILE: loaders/edwardytb_serious-cat-43.html
================================================
<div class="loader">
  <div class="box"></div>
  <div class="circle"></div>
  <div class="triangle"></div>
</div>



<style>
/* From Uiverse.io by edwardytb - Tags: loader */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.box {
  width: 50px;
  height: 50px;
  border: 4px solid #3498db;
  animation: box-expand 1s ease-in-out infinite alternate;
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #f1c40f;
  animation: circle-rotate 1s linear infinite;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 30px solid #e74c3c;
  animation: triangle-expand 1s ease-in-out infinite alternate;
}

@keyframes box-expand {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.2);
  }
}

@keyframes circle-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes triangle-expand {
  0% {
    width: 0;
    height: 0;
  }

  100% {
    width: 30px;
    height: 60px;
  }
}

</style>


================================================
FILE: loaders/elijahgummer_chatty-rattlesnake-90.html
================================================
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="loader">
  <g
    stroke-linejoin="round"
    stroke-linecap="round"
    fill-rule="evenodd"
    fill="none"
    stroke-width="1"
    stroke="none"
  >
    <line y2="6" x2="24" y1="2" x1="24"></line>
    <line
      transform="translate(34, 6.679) rotate(30) translate(-34, -6.679)"
      y2="8.679"
      x2="34"
      y1="4.679"
      x1="34"
    ></line>
    <line
      transform="translate(41.321, 14) rotate(60) translate(-41.321, -14)"
      y2="16"
      x2="41.321"
      y1="12"
      x1="41.321"
    ></line>
    <line
      transform="translate(44, 24) rotate(90) translate(-44, -24)"
      y2="26"
      x2="44"
      y1="22"
      x1="44"
    ></line>
    <line
      transform="translate(41.321, 34) rotate(120) translate(-41.321, -34)"
      y2="36"
      x2="41.321"
      y1="32"
      x1="41.321"
    ></line>
    <line
      transform="translate(34, 41.321) rotate(150) translate(-34, -41.321)"
      y2="43.321"
      x2="34"
      y1="39.321"
      x1="34"
    ></line>
    <line
      transform="translate(24, 44) rotate(180) translate(-24, -44)"
      y2="46"
      x2="24"
      y1="42"
      x1="24"
    ></line>
    <line
      transform="translate(14, 41.321) rotate(210) translate(-14, -41.321)"
      y2="43.321"
      x2="14"
      y1="39.321"
      x1="14"
    ></line>
    <line
      transform="translate(6.679, 34) rotate(240) translate(-6.679, -34)"
      y2="36"
      x2="6.679"
      y1="32"
      x1="6.679"
    ></line>
    <line
      transform="translate(4, 24) rotate(270) translate(-4, -24)"
      y2="26"
      x2="4"
      y1="22"
      x1="4"
    ></line>
    <line
      transform="translate(6.679, 14) rotate(300) translate(-6.679, -14)"
      y2="16"
      x2="6.679"
      y1="12"
      x1="6.679"
    ></line>
    <line
      transform="translate(14, 6.679) rotate(330) translate(-14, -6.679)"
      y2="8.679"
      x2="14"
      y1="4.679"
      x1="14"
    ></line>
  </g>
</svg>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, white, loader, dots, circle, svg, minimal, dashofset */
.loader {
  width: 48px;
  height: 48px;
  transform: rotate(0deg);
  animation: spin 2.4s linear infinite;
}

.loader line {
  stroke: #ffffff; /* White color for better visibility */
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.8;
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  animation: dash 2.4s ease-in-out infinite;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 10;
    opacity: 0.8;
  }
  50% {
    stroke-dashoffset: 0;
    opacity: 0.4;
  }
  100% {
    stroke-dashoffset: 10;
    opacity: 0.8;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

</style>
    

================================================
FILE: loaders/elijahgummer_hungry-moth-59.html
================================================
<div class="main">
  <div class="dog">
    <div class="dog__paws">
      <div class="dog__bl-leg leg">
        <div class="dog__bl-paw paw"></div>
        <div class="dog__bl-top top"></div>
      </div>
      <div class="dog__fl-leg leg">
        <div class="dog__fl-paw paw"></div>
        <div class="dog__fl-top top"></div>
      </div>
      <div class="dog__fr-leg leg">
        <div class="dog__fr-paw paw"></div>
        <div class="dog__fr-top top"></div>
      </div>
    </div>

    <div class="dog__body">
      <div class="dog__tail"></div>
    </div>

    <div class="dog__head">
      <div class="dog__snout">
        <div class="dog__nose"></div>
        <div class="dog__eyes">
          <div class="dog__eye-l"></div>
          <div class="dog__eye-r"></div>
        </div>
      </div>
    </div>

    <div class="dog__head-c">
      <div class="dog__ear-l"></div>
      <div class="dog__ear-r"></div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Website: https://codepen.io/ruijadom/pen/jObpqNb - Name: ruijadom - Tags: loading, loader, animated, svg, dog */
.main {
  position: relative;
  width: 23.5vmax;
  height: 23.5vmax;
  display: flex;
  justify-content: center;
  align-items: center;
}

.leg {
  position: absolute;
  bottom: 0;
  width: 2vmax;
  height: 2.125vmax;
}

.paw {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1.95vmax;
  height: 1.875vmax;
  overflow: hidden;
}

.paw::before {
  content: "";
  position: absolute;
  width: 3.75vmax;
  height: 3.75vmax;
  border-radius: 50%;
}

.top {
  position: absolute;
  bottom: 0;
  left: 0.75vmax;
  height: 4.5vmax;
  width: 2.625vmax;
  border-top-left-radius: 1.425vmax;
  border-top-right-radius: 1.425vmax;
  transform-origin: bottom right;
  transform: rotateZ(90deg) translateX(-0.1vmax) translateY(1.5vmax);
  z-index: -1;
  background-image: linear-gradient(70deg, transparent 20%, #ff8b56 20%);
}

.dog {
  position: relative;
  width: 22.5vmax;
  height: 8.25vmax;
}

.dog::before {
  content: "";
  position: absolute;
  bottom: -0.75vmax;
  right: -0.15vmax;
  width: 100%;
  height: 1.5vmax;
  background-color: rgba(28, 49, 48, 0.1);
  border-radius: 50%;
  z-index: -1000;
  animation: shadow 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__head {
  position: absolute;
  left: 4.5vmax;
  bottom: 0;
  width: 9.75vmax;
  height: 8.25vmax;
  border-top-left-radius: 4.05vmax;
  border-top-right-radius: 4.05vmax;
  border-bottom-right-radius: 3.3vmax;
  border-bottom-left-radius: 3.3vmax;
  background-color: #ff8147;
  animation: head 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__head-c {
  position: absolute;
  left: 1.5vmax;
  bottom: 0;
  width: 9.75vmax;
  height: 8.25vmax;
  animation: head 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
  z-index: -1;
}

.dog__snout {
  position: absolute;
  left: -1.5vmax;
  bottom: 0;
  width: 7.5vmax;
  height: 3.75vmax;
  border-top-right-radius: 3vmax;
  border-bottom-right-radius: 3vmax;
  border-bottom-left-radius: 4.5vmax;
  background-color: #d7dbd2;
  animation: snout 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__snout::before {
  content: "";
  position: absolute;
  left: -0.1125vmax;
  top: -0.15vmax;
  width: 1.875vmax;
  height: 1.125vmax;
  border-top-right-radius: 3vmax;
  border-bottom-right-radius: 3vmax;
  border-bottom-left-radius: 4.5vmax;
  background-color: #1c3130;
  animation: snout-b 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__nose {
  position: absolute;
  top: -1.95vmax;
  left: 40%;
  width: 0.75vmax;
  height: 2.4vmax;
  border-radius: 0.525vmax;
  transform-origin: bottom;
  transform: rotateZ(10deg);
  background-color: #d7dbd2;
}

.dog__eye-l,
.dog__eye-r {
  position: absolute;
  top: -0.9vmax;
  width: 0.675vmax;
  height: 0.375vmax;
  border-radius: 50%;
  background-color: #1c3130;
  animation: eye 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__eye-l {
  left: 27%;
}

.dog__eye-r {
  left: 65%;
}

.dog__ear-l,
.dog__ear-r {
  position: absolute;
  width: 10.5vmax;
  height: 3.375vmax;
  border-top-left-radius: 0vmax;
  border-top-right-radius: 0vmax;
  border-bottom-right-radius: 3.3vmax;
  border-bottom-left-radius: 3.3vmax;
  background-color: #e26538;
}

.dog__ear-l {
  top: 1.5vmax;
  left: 6vmax;
  transform-origin: bottom left;
  transform: rotateZ(-50deg);
  z-index: -1;
  animation: ear-l 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__ear-r {
  top: 1.5vmax;
  right: 3vmax;
  transform-origin: bottom right;
  transform: rotateZ(20deg);
  z-index: -2;
  animation: ear-r 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__body {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  bottom: 0.3vmax;
  left: 3.75vmax;
  width: 18.75vmax;
  height: 7.2vmax;
  border-top-left-radius: 3vmax;
  border-top-right-radius: 6vmax;
  border-bottom-right-radius: 1.5vmax;
  border-bottom-left-radius: 6vmax;
  background-color: #ff702e;
  z-index: -2;
  animation: body 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}

.dog__tail {
  position: absolute;
  right: -3vmax;
  height: 1.5vmax;
  width: 4.5vmax;
  background-color: #e96839;
  border-radius: 1.5vmax;
}

.dog__paws {
  position: absolute;
  bottom: 0;
  left: 7.5vmax;
  width: 12vmax;
  height: 3vmax;
}

.dog__bl-leg {
  left: -3vmax;
  z-index: -10;
}

.dog__bl-paw::before {
  background-color: #bec4b6;
}

.dog__bl-top {
  background-image: linear-gradient(80deg, transparent 20%, #e96839 20%);
}

.dog__fl-leg {
  z-index: 10;
  left: 0;
}

.dog__fl-paw::before {
  background-color: #d7dbd2;
}

.dog__fr-leg {
  right: 0;
}

.dog__fr-paw::before {
  background-color: #d7dbd2;
}

/*==============================*/

@keyframes head {
  0%,
  10%,
  20%,
  26%,
  28%,
  90%,
  100% {
    height: 8.25vmax;
    bottom: 0;
    transform-origin: bottom right;
    transform: rotateZ(0);
  }
  5%,
  15%,
  22%,
  24%,
  30% {
    height: 8.1vmax;
  }
  32%,
  50% {
    height: 8.25vmax;
  }
  55%,
  60% {
    bottom: 0.75vmax;
    transform-origin: bottom right;
    transform: rotateZ(0);
  }
  70%,
  80% {
    bottom: 0.75vmax;
    transform-origin: bottom right;
    transform: rotateZ(10deg);
  }
}

@keyframes body {
  0%,
  10%,
  20%,
  26%,
  28%,
  32%,
  100% {
    height: 7.2vmax;
  }
  5%,
  15%,
  22%,
  24%,
  30% {
    height: 7.05vmax;
  }
}

@keyframes ear-l {
  0%,
  10%,
  20%,
  26%,
  28%,
  82%,
  100% {
    transform: rotateZ(-50deg);
  }
  5%,
  15%,
  22%,
  24% {
    transform: rotateZ(-48deg);
  }
  30%,
  31% {
    transform: rotateZ(-30deg);
  }
  32%,
  80% {
    transform: rotateZ(-60deg);
  }
}

@keyframes ear-r {
  0%,
  10%,
  20%,
  26%,
  28% {
    transform: rotateZ(20deg);
  }
  5%,
  15%,
  22%,
  24% {
    transform: rotateZ(18deg);
  }
  30%,
  31% {
    transform: rotateZ(10deg);
  }
  32% {
    transform: rotateZ(25deg);
  }
}

@keyframes snout {
  0%,
  10%,
  20%,
  26%,
  28%,
  82%,
  100% {
    height: 3.75vmax;
  }
  5%,
  15%,
  22%,
  24% {
    height: 3.45vmax;
  }
}

@keyframes snout-b {
  0%,
  10%,
  20%,
  26%,
  28%,
  98%,
  100% {
    width: 1.875vmax;
  }
  5%,
  15%,
  22%,
  24% {
    width: 1.8vmax;
  }
  34%,
  98% {
    width: 1.275vmax;
  }
}

@keyframes shadow {
  0%,
  10%,
  20%,
  26%,
  28%,
  30%,
  84%,
  100% {
    width: 99%;
  }
  5%,
  15%,
  22%,
  24% {
    width: 101%;
  }
  34%,
  81% {
    width: 96%;
  }
}

@keyframes eye {
  0%,
  30% {
    width: 0.675vmax;
    height: 0.3vmax;
  }
  32%,
  59%,
  90%,
  100% {
    width: 0.525vmax;
    height: 0.525vmax;
    transform: translateY(0);
  }
  60%,
  75% {
    transform: translateY(-0.3vmax);
  }
  80%,
  85% {
    transform: translateY(0.15vmax);
  }
}

</style>
    

================================================
FILE: loaders/elijahgummer_new-fly-30.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: loader */
.loader {
  width: 35px;
  height: 80px;
  position: relative;
}
.loader:after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px 5px;
  border-top: 1px solid #bbb6aa;
  border-bottom: 4px solid #bbb6aa;
  background:
    linear-gradient(#77d4d4 0 0) bottom no-repeat content-box,
    #e4e0d7;
  mix-blend-mode: darken;
  animation: drink 1.5s infinite linear;
}
.loader:before {
  content: "";
  position: absolute;
  inset: -18px calc(50% - 2px) 8px;
  background: #eb6b3e;
  transform-origin: bottom;
  transform: rotate(8deg);
}
@keyframes drink {
  0% {
    background-size: 100% 100%;
  }
  100% {
    background-size: 100% 5%;
  }
}

</style>
    

================================================
FILE: loaders/elijahgummer_sharp-squid-77.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: loading, loader, star, circle, waiting, point */
.loader {
  display: inline-grid;
  width: 80px;
  aspect-ratio: 1;
  animation: l12-0 3s linear infinite;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
}
.loader:before {
  clip-path: polygon(
    100% 50%,
    83.81% 59.06%,
    93.3% 75%,
    74.75% 74.75%,
    75% 93.3%,
    59.06% 83.81%,
    50% 100%,
    40.94% 83.81%,
    25% 93.3%,
    25.25% 74.75%,
    6.7% 75%,
    16.19% 59.06%,
    0% 50%,
    16.19% 40.94%,
    6.7% 25%,
    25.25% 25.25%,
    25% 6.7%,
    40.94% 16.19%,
    50% 0%,
    59.06% 16.19%,
    75% 6.7%,
    74.75% 25.25%,
    93.3% 25%,
    83.81% 40.94%
  );
  background: #1c1d1e;
  transform: rotate(0turn) translate(-12.5%) rotate(0turn);
  animation:
    l12-1 2s linear infinite,
    l12-2 4s linear infinite alternate;
}
.loader:after {
  margin: 12.5%;
  clip-path: polygon(
    100% 50%,
    78.19% 60.26%,
    88.3% 82.14%,
    65% 75.98%,
    58.68% 99.24%,
    44.79% 79.54%,
    25% 93.3%,
    27.02% 69.28%,
    3.02% 67.1%,
    20% 50%,
    3.02% 32.9%,
    27.02% 30.72%,
    25% 6.7%,
    44.79% 20.46%,
    58.68% 0.76%,
    65% 24.02%,
    88.3% 17.86%,
    78.19% 39.74%
  );
  background: #edf0f2;
  animation: l12-3 4s linear infinite alternate;
}
@keyframes l12-0 {
  to {
    rotate: 1turn;
  }
}
@keyframes l12-1 {
  to {
    transform: rotate(-1turn) translate(-12.5%) rotate(0.75turn);
  }
}
@keyframes l12-2 {
  90%,
  to {
    clip-path: polygon(
      100% 50%,
      98.3% 62.94%,
      93.3% 75%,
      85.36% 85.36%,
      75% 93.3%,
      62.94% 98.3%,
      50% 100%,
      37.06% 98.3%,
      25% 93.3%,
      14.64% 85.36%,
      6.7% 75%,
      1.7% 62.94%,
      0% 50%,
      1.7% 37.06%,
      6.7% 25%,
      14.64% 14.64%,
      25% 6.7%,
      37.06% 1.7%,
      50% 0%,
      62.94% 1.7%,
      75% 6.7%,
      85.36% 14.64%,
      93.3% 25%,
      98.3% 37.06%
    );
  }
}
@keyframes l12-3 {
  90%,
  to {
    clip-path: polygon(
      100% 50%,
      96.98% 67.1%,
      88.3% 82.14%,
      75% 93.3%,
      58.68% 99.24%,
      41.32% 99.24%,
      25% 93.3%,
      11.7% 82.14%,
      3.02% 67.1%,
      0% 50%,
      3.02% 32.9%,
      11.7% 17.86%,
      25% 6.7%,
      41.32% 0.76%,
      58.68% 0.76%,
      75% 6.7%,
      88.3% 17.86%,
      96.98% 32.9%
    );
  }
}

</style>
    

================================================
FILE: loaders/elijahgummer_slippery-puma-80.html
================================================
<div class="analyze">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    height="54"
    width="54"
  >
    <rect height="24" width="24"></rect>
    <path
      stroke-linecap="round"
      stroke-width="1.5"
      stroke="white"
      d="M19.25 9.25V5.25C19.25 4.42157 18.5784 3.75 17.75 3.75H6.25C5.42157 3.75 4.75 4.42157 4.75 5.25V18.75C4.75 19.5784 5.42157 20.25 6.25 20.25H12.25"
      class="board"
    ></path>
    <path
      d="M9.18748 11.5066C9.12305 11.3324 8.87677 11.3324 8.81234 11.5066L8.49165 12.3732C8.47139 12.428 8.42823 12.4711 8.37348 12.4914L7.50681 12.8121C7.33269 12.8765 7.33269 13.1228 7.50681 13.1872L8.37348 13.5079C8.42823 13.5282 8.47139 13.5714 8.49165 13.6261L8.81234 14.4928C8.87677 14.6669 9.12305 14.6669 9.18748 14.4928L9.50818 13.6261C9.52844 13.5714 9.5716 13.5282 9.62634 13.5079L10.493 13.1872C10.6671 13.1228 10.6671 12.8765 10.493 12.8121L9.62634 12.4914C9.5716 12.4711 9.52844 12.428 9.50818 12.3732L9.18748 11.5066Z"
      class="star-2"
    ></path>
    <path
      d="M11.7345 6.63394C11.654 6.41629 11.3461 6.41629 11.2656 6.63394L10.8647 7.71728C10.8394 7.78571 10.7855 7.83966 10.717 7.86498L9.6337 8.26585C9.41605 8.34639 9.41605 8.65424 9.6337 8.73478L10.717 9.13565C10.7855 9.16097 10.8394 9.21493 10.8647 9.28335L11.2656 10.3667C11.3461 10.5843 11.654 10.5843 11.7345 10.3667L12.1354 9.28335C12.1607 9.21493 12.2147 9.16097 12.2831 9.13565L13.3664 8.73478C13.5841 8.65424 13.5841 8.34639 13.3664 8.26585L12.2831 7.86498C12.2147 7.83966 12.1607 7.78571 12.1354 7.71728L11.7345 6.63394Z"
      class="star-1"
    ></path>
    <path
      class="stick"
      stroke-linejoin="round"
      stroke-width="1.5"
      stroke="white"
      d="M17 14L21.2929 18.2929C21.6834 18.6834 21.6834 19.3166 21.2929 19.7071L20.7071 20.2929C20.3166 20.6834 19.6834 20.6834 19.2929 20.2929L15 16M17 14L15.7071 12.7071C15.3166 12.3166 14.6834 12.3166 14.2929 12.7071L13.7071 13.2929C13.3166 13.6834 13.3166 14.3166 13.7071 14.7071L15 16M17 14L15 16"
    ></path>
  </svg>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: loading, loader, star, svg, magic, wand, analyser */
.analyze svg path.stick {
  transform: translate(0);
  animation: stick 2s ease infinite;
  /* Change wand color */
}

.analyze svg path.star-1 {
  fill: #ff4500; /* OrangeRed color */
  animation: sparkles 2s ease infinite, scaleStars 2s ease infinite,
    colorChange 2s ease infinite;
  animation-delay: 150ms;
}

.analyze svg path.star-2 {
  fill: #00ff00; /* Lime color */
  animation: sparkles 2s ease infinite, scaleStars 2s ease infinite,
    colorChange 2s ease infinite;
}

.board {
  animation: bounce 2s ease infinite;
}

@keyframes sparkles {
  0% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes stick {
  0% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  25% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  50% {
    transform: translate3d(3px, -2px, 0) rotate(8deg);
  }
  75% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
}

@keyframes scaleStars {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes colorChange {
  0% {
    fill: #ff4500; /* OrangeRed */
  }
  25% {
    fill: #ffd700; /* Gold */
  }
  50% {
    fill: #00ff00; /* Lime */
  }
  75% {
    fill: #1e90ff; /* DodgerBlue */
  }
  100% {
    fill: #ff4500; /* OrangeRed */
  }
}

</style>
    

================================================
FILE: loaders/elijahgummer_sour-earwig-21.html
================================================
<svg class="container"><rect class="boxes"></rect></svg>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, green, loader, smooth, modern, animated, css */
.container {
  width: 50px;
  height: 50px;
}

.container .boxes {
  width: 50px;
  height: 50px;
  fill: none;
  stroke-width: 50px;
  stroke: #43cb85;
  stroke-dasharray: 50;
  stroke-dashoffset: 50%;
  animation: animate 2s linear infinite;
}

@keyframes animate {
  to {
    stroke-dashoffset: 250%;
  }
}

</style>
    

================================================
FILE: loaders/elijahgummer_stale-panda-59.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, red, loader, diamond, fade, mitsubishi, appear */
.loader {
  width: 50px;
  height: calc(50px * 0.866);
  background: #fd135a;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  --c: at 50% 66%, #000 60deg, #0000 0;
  -webkit-mask:
    conic-gradient(from 30deg var(--c)) right,
    conic-gradient(from 150deg var(--c)) bottom,
    conic-gradient(from -90deg var(--c)) left,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-repeat: no-repeat;
  animation: appear 1.5s infinite;
}
@keyframes appear {
  0% {
    -webkit-mask-size:
      0 0,
      0 0,
      0 0,
      auto;
  }
  13.33% {
    -webkit-mask-size:
      100% 100%,
      0 0,
      0 0,
      auto;
  }
  26.67% {
    -webkit-mask-size:
      100% 100%,
      100% 100%,
      0 0,
      auto;
  }
  40%,
  60% {
    -webkit-mask-size:
      100% 100%,
      100% 100%,
      100% 100%,
      auto;
  }
  73.33% {
    -webkit-mask-size:
      0 0,
      100% 100%,
      100% 100%,
      auto;
  }
  86.67% {
    -webkit-mask-size:
      0 0,
      0 0,
      100% 100%,
      auto;
  }
  100% {
    -webkit-mask-size:
      0 0,
      0 0,
      0 0,
      auto;
  }
}

</style>
    

================================================
FILE: loaders/elijahgummer_sweet-earwig-47.html
================================================
<div class="middle">
  <div class="bar bar1"></div>
  <div class="bar bar2"></div>
  <div class="bar bar3"></div>
  <div class="bar bar4"></div>
  <div class="bar bar5"></div>
  <div class="bar bar6"></div>
  <div class="bar bar7"></div>
  <div class="bar bar8"></div>
</div>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, red, minimalist, gradient, loading, loader, shadow */
.middle {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.bar {
  width: 10px;
  height: 70px;
  display: inline-block;
  transform-origin: bottom center;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  box-shadow: 5px 10px 20px inset rgba(255, 23, 25.2);
  animation: loader 1.2s linear infinite;
}

.bar1 {
  animation-delay: 0.1s;
}
.bar2 {
  animation-delay: 0.2s;
}
.bar3 {
  animation-delay: 0.3s;
}
.bar4 {
  animation-delay: 0.4s;
}
.bar5 {
  animation-delay: 0.5s;
}
.bar6 {
  animation-delay: 0.6s;
}
.bar7 {
  animation-delay: 0.7s;
}
.bar8 {
  animation-delay: 0.8s;
}

@keyframes loader {
  0% {
    transform: scaleY(0.1);
    background: transparent; /* Change background to transparent */
  }
  50% {
    transform: scaleY(1);
    background: #e74c3c; /* Change background to a shade of red */
  }
  100% {
    transform: scaleY(0.1);
    background: transparent; /* Change background to transparent */
  }
}

</style>
    

================================================
FILE: loaders/ercnersoy_massive-mouse-48.html
================================================
<div class="bulb">
      <svg width="60pt" height="60pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
 <g>
  <path d="m930 552.86h-660c-6.9297 0-13.191-4.168-15.836-10.582-2.6602-6.4102-1.1875-13.777 3.7148-18.684l289.72-289.7c4.1367-4.1367 10.078-5.875 15.836-4.6211 5.707 1.2734 10.379 5.375 12.387 10.883 3.7031 10.164 13.43 16.996 24.176 16.996s20.473-6.832 24.191-17.008c2.0078-5.5078 6.6797-9.5938 12.406-10.863 5.6602-1.2539 11.668 0.48437 15.82 4.6211l289.7 289.7c4.9062 4.9062 6.3789 12.27 3.7148 18.684-2.6445 6.4062-8.9062 10.574-15.836 10.574zm-618.62-34.285h577.23l-245.5-245.51c-11.102 11.469-26.586 18.367-43.109 18.367-16.539 0-32.008-6.8984-43.109-18.348z"></path>
  <path d="m986.48 1028.6h-772.97c-23.203 0-42.086-18.883-42.086-42.086v-425.82c0-23.203 18.883-42.09 42.086-42.09h772.97c23.203 0 42.086 18.887 42.086 42.09v425.82c0 23.203-18.883 42.086-42.086 42.086zm-772.97-475.71c-4.3008 0-7.8008 3.5-7.8008 7.8047v425.82c0 4.3008 3.5 7.8008 7.8008 7.8008h772.97c4.3008 0 7.8008-3.5 7.8008-7.8008v-425.82c0-4.3047-3.5-7.8047-7.8008-7.8047z"></path>
  <path d="m599.92 935.74c-89.332 0-162-72.758-162-162.17 0-89.414 72.672-162.17 162-162.17 89.414 0 162.17 72.758 162.17 162.17-0.003906 89.414-72.758 162.17-162.17 162.17zm0-290.05c-70.43 0-127.72 57.371-127.72 127.89 0 70.512 57.289 127.89 127.72 127.89 70.512 0 127.89-57.371 127.89-127.89-0.003907-70.516-57.375-127.89-127.89-127.89z"></path>
  <path d="m576.71 838.07c-4.5547 0-8.9062-1.8086-12.121-5.0234l-48.113-48.129c-6.6953-6.6953-6.6953-17.543 0-24.242 6.6953-6.6953 17.543-6.6953 24.242 0l35.992 36.012 82.582-82.582c6.6953-6.6953 17.543-6.6953 24.242 0 6.6953 6.6953 6.6953 17.543 0 24.242l-94.703 94.703c-3.2148 3.2109-7.5703 5.0195-12.121 5.0195z"></path>
  <path d="m600 291.43c-25.113 0-47.777-15.887-56.383-39.559-2.3633-6.1445-3.6172-13.125-3.6172-20.441 0-33.082 26.918-60 60-60s60 26.918 60 60c0 7.3477-1.2383 14.312-3.6992 20.727-8.5391 23.387-31.207 39.273-56.301 39.273zm0-85.715c-14.18 0-25.715 11.535-25.715 25.715 0 3.0625 0.50391 5.9766 1.4414 8.4375 3.8008 10.445 13.527 17.277 24.273 17.277s20.473-6.832 24.191-17.008c1.0391-2.6992 1.5234-5.6094 1.5234-8.707 0-14.18-11.535-25.715-25.715-25.715z"></path>
 </g>
</svg>
</div>
<style>
/* From Uiverse.io by ercnersoy - Tags: loader */
.bulb svg {
  display: block;
  height: 90px;
  transform-origin: center top;
  animation: swing_31 1.3s ease-in-out infinite alternate;
}

@keyframes swing_31 {
  0% {
    transform: rotate(18deg);
  }

  100% {
    transform: rotate(-18deg);
  }
}
</style>


================================================
FILE: loaders/escannord_fast-bear-97.html
================================================
<div class="loader">
  <span style="--delay:1" class="ball"></span>
  <span style="--delay:2" class="ball"></span>
  <span style="--delay:3" class="ball"></span>
  <span style="--delay:4" class="ball"></span>
  <span style="--delay:5" class="ball"></span>
  <span style="--delay:6" class="ball"></span>
  <span style="--delay:7" class="ball"></span>
  <span style="--delay:8" class="ball"></span>
</div>

<style>
/* From Uiverse.io by escannord  - Tags: 3d, black, loading, loader, realistic */
.loader {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  position: relative;
  border: solid 5px transparent;
  box-shadow: 5px 5px 5px rgb(88, 87, 87), inset 5px 5px 5px rgb(85, 80, 80),
    inset -1px -1px 10px rgba(0, 0, 0, 0.432),
    -1px -1px 10px rgba(0, 0, 0, 0.281);
}

.loader::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 5px 5px 20px black, -2px -2px 40px black;
  background: repeating-conic-gradient(
    rgb(61, 59, 59) 0%,
    rgb(248, 248, 246) 15%,
    rgb(54, 52, 52) 33.33%
  );
}

.ball {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: radial-gradient(
    circle at 8px 5px,
    white 5%,
    rgba(54, 53, 53, 0.685)
  );
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(97.5px);
  animation: rotate 5s calc(var(--delay) * 0.2s) infinite linear;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(97.5px);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(97.5px);
  }
}

</style>
    

================================================
FILE: loaders/escannord_strange-falcon-84.html
================================================
<div class="loader">
  <span class="ball ball1"></span>
  <span class="ball"></span>
  <span class="ball"></span>
  <span class="ball"></span>
  <span class="ball"></span>
</div>

<style>
/* From Uiverse.io by escannord  - Tags: animation, 3d, loader, light */
.loader {
  text-align: center;
  position: relative;
  display: flex;
}

.loader .ball {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.ball {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 8px 5px, white 5%, black);
  position: relative;
  transform-origin: 50% -100px;
}

.ball:last-child {
  animation: balance-right 1.2s infinite linear;
}

.ball:first-child {
  animation: balance-left 1.2s infinite linear;
}

@keyframes balance-right {
  0% {
    transform: rotate(0deg);
    animation-timing-function: linear;
  }

  50% {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }

  75% {
    transform: rotate(-30deg);
    animation-timing-function: ease-in;
  }
}

@keyframes balance-left {
  0% {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }

  25% {
    transform: rotate(30deg);
    animation-timing-function: ease-in;
  }

  50% {
    transform: rotate(0deg);
    animation-timing-function: linear;
  }
}

</style>
    

================================================
FILE: loaders/escannord_ugly-octopus-60.html
================================================
<div class="loader">
  <span style="--i:1px" class="load"></span>
  <span style="--i:2px" class="load"></span>
  <span style="--i:3px" class="load"></span>
  <span style="--i:4px" class="load"></span>
  <span style="--i:5px" class="load"></span>
  <span style="--i:6px" class="load"></span>
  <span style="--i:7px" class="load"></span>
  <span style="--i:8px" class="load"></span>
  <span style="--i:9px" class="load"></span>
  <span style="--i:10px" class="load"></span>
</div>

<style>
/* From Uiverse.io by escannord  - Tags: animation, loader, spinner */
.loader {
  position: relative;
}
.load {
  display: inline-block;
  height: calc(var(--i) * 15);
  width: calc(var(--i) * 15);
  background-color: transparent;
  position: absolute;
  border: 5px rgb(47, 0, 255) solid;
  border-top: none;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: turn 2s infinite linear;
}

.load:nth-child(odd) {
  animation: turn 2s infinite linear reverse;
}

@keyframes turn {
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

</style>
    

================================================
FILE: loaders/eslam-hany_afraid-stingray-62.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by eslam-hany - Tags: loader, circle loader */
.loader {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  animation: rotate 2.0s infinite linear;
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

</style>


================================================
FILE: loaders/exyreams_mean-dragon-22.html
================================================
<div class="cssload-container">
   <ul class="cssload-flex-container">
      <li>
         <span class="cssload-loading cssload-one"></span>
         <span class="cssload-loading cssload-two"></span>
         <span class="cssload-loading-center"></span>
      </li>
   </ul>
</div>
<style>
/* From Uiverse.io by exyreams - Source: MichaelRyanSmith - Tags: loading, loader, loading animation */
.cssload-container * {
  box-sizing: border-box;
}

.cssload-container {
  margin: 38px auto 0 auto;
  max-width: 1048px;
}

.cssload-container ul li {
  list-style: none;
}

.cssload-flex-container {
  display: flex;
  display: -o-flex;
  display: -ms-flex;
  display: -webkit-flex;
  display: -moz-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.cssload-flex-container li {
  padding: 19px;
  height: 188px;
  width: 188px;
  margin: 56px 38px;
  position: relative;
  text-align: center;
}

.cssload-loading-center {
  display: inline-block;
  position: absolute;
    /* The color can be custmized, This color is for center cube.*/
  background: #ff0000;
  height: 56px;
  width: 56px;
  left: 68px;
  top: 69px;
  transform: rotate(45deg);
  border-radius: 6px;
  animation: pulse 1.3s ease infinite;
}

.cssload-loading {
  display: inline-block;
  position: relative;
  width: 141px;
  height: 141px;
  margin-top: 6px;
  transform: rotate(45deg);
}

.cssload-loading:after, .cssload-loading:before {
  position: absolute;
  content: '';
  height: 19px;
  width: 19px;
  display: block;
  top: 0;
    /* The color can be custmized, This color is for 4 cubes.*/
  background: #ff5252;
  border-radius: 6px;
}

.cssload-loading:after {
  right: 0;
  animation: square-tr 2.6s ease infinite;
  animation-delay: .162.5s;
}

.cssload-loading:before {
  animation: square-tl 2.6s ease infinite;
  animation-delay: .162.5s;
}

.cssload-loading.cssload-two {
  position: relative;
  top: -150px;
}

.cssload-loading.cssload-two:after, .cssload-loading.cssload-two:before {
  bottom: 0;
  top: initial;
}

.cssload-loading.cssload-two:after {
  animation: square-br 2.6s ease infinite;
  animation-direction: reverse;
}

.cssload-loading.cssload-two:before {
  animation: square-bl 2.6s ease infinite;
  animation-direction: reverse;
}

@keyframes square-tl {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(0, 117.5px);
  }

  50% {
    transform: translate(117.5px, 117.5px);
  }

  75% {
    transform: translate(117.5px, 0);
  }
}

@keyframes square-bl {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(0, -117.5px);
  }

  50% {
    transform: translate(117.5px, -117.5px);
  }

  75% {
    transform: translate(117.5px, 0);
  }
}

@keyframes square-tr {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-117.5px, 0);
  }

  50% {
    transform: translate(-117.5px, 117.5px);
  }

  75% {
    transform: translate(0, 117.5px);
  }
}

@keyframes square-br {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-117.5px, 0);
  }

  50% {
    transform: translate(-117.5px, -117.5px);
  }

  75% {
    transform: translate(0, -117.5px);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(inherit) rotate(45deg);
  }

  75% {
    transform: scale(0.25) rotate(45deg);
  }
}
</style>


================================================
FILE: loaders/exyreams_pretty-eel-31.html
================================================
<div class="spinner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style>
/* From Uiverse.io by exyreams - Tags: loading, loader, loading animation */
.spinner {
  position: relative;
  width: 80px;
 /* Adjust the width accordingly */
  height: 16px;
 /* Keep the height the same */
}

.spinner div {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #004dff;
  border-radius: 50%;
  animation: spinner-4t3wzl 2s infinite linear;
}

.spinner div:nth-child(1) {
  left: 0;
  animation-delay: 0.15s;
  background-color: rgba(0, 77, 255, 0.9);
}

.spinner div:nth-child(2) {
  left: 25%;
  animation-delay: 0.3s;
  background-color: rgba(0, 77, 255, 0.8);
}

.spinner div:nth-child(3) {
  left: 50%;
  animation-delay: 0.45s;
  background-color: rgba(0, 77, 255, 0.7);
}

.spinner div:nth-child(4) {
  left: 75%;
  animation-delay: 0.6s;
  background-color: rgba(0, 77, 255, 0.6);
}

.spinner div:nth-child(5) {
  left: 100%;
  animation-delay: 0.75s;
  background-color: rgba(0, 77, 255, 0.5);
}

@keyframes spinner-4t3wzl {
  0% {
    transform: rotate(0deg) translateX(-100%);
  }

  100% {
    transform: rotate(360deg) translateX(-100%);
  }
}
</style>


================================================
FILE: loaders/fanishah_bitter-dragonfly-93.html
================================================
<div class="center">
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
</div>
<style>
/* From Uiverse.io by fanishah - Tags: loader */
.center {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wave {
  width: 6px;
  height: 50px;
  background: linear-gradient(45deg, cyan, #fff);
  margin: 10px;
  animation: wave 1s linear infinite;
  border-radius: 20px;
}

.wave:nth-child(2) {
  animation-delay: 0.1s;
}

.wave:nth-child(3) {
  animation-delay: 0.2s;
}

.wave:nth-child(4) {
  animation-delay: 0.3s;
}

.wave:nth-child(5) {
  animation-delay: 0.4s;
}

.wave:nth-child(6) {
  animation-delay: 0.5s;
}

.wave:nth-child(7) {
  animation-delay: 0.6s;
}

.wave:nth-child(8) {
  animation-delay: 0.7s;
}

.wave:nth-child(9) {
  animation-delay: 0.8s;
}

.wave:nth-child(10) {
  animation-delay: 0.9s;
}

@keyframes wave {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

</style>


================================================
FILE: loaders/fanishah_calm-dingo-24.html
================================================
<div>
  <svg class="loader" viewBox="0 0 48 30" width="48px" height="30px">
  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
    <g transform="translate(9.5,19)">
      <circle class="loader_tire" r="9" stroke-dasharray="56.549 56.549"></circle>
      <g class="loader_spokes-spin" stroke-dasharray="31.416 31.416" stroke-dashoffset="-23.562">
        <circle class="loader_spokes" r="5"></circle>
        <circle class="loader_spokes" r="5" transform="rotate(180,0,0)"></circle>
      </g>
    </g>
    <g transform="translate(24,19)">
      <g class="loader_pedals-spin" stroke-dasharray="25.133 25.133" stroke-dashoffset="-21.991" transform="rotate(67.5,0,0)">
        <circle class="loader_pedals" r="4"></circle>
        <circle class="loader_pedals" r="4" transform="rotate(180,0,0)"></circle>
      </g>
    </g>
    <g transform="translate(38.5,19)">
      <circle class="loader_tire" r="9" stroke-dasharray="56.549 56.549"></circle>
      <g class="loader_spokes-spin" stroke-dasharray="31.416 31.416" stroke-dashoffset="-23.562">
        <circle class="loader_spokes" r="5"></circle>
        <circle class="loader_spokes" r="5" transform="rotate(180,0,0)"></circle>
      </g>
    </g>
    <polyline class="loader_seat" points="14 3,18 3" stroke-dasharray="5 5"></polyline>
    <polyline class="loader_body" points="16 3,24 19,9.5 19,18 8,34 7,24 19" stroke-dasharray="79 79"></polyline>
    <path class="loader_handlebars" d="m30,2h6s1,0,1,1-1,1-1,1" stroke-dasharray="10 10"></path>
    <polyline class="loader_front" points="32.5 2,38.5 19" stroke-dasharray="19 19"></polyline>
  </g>
</svg>
</div>
<style>
/* From Uiverse.io by fanishah - Tags: loading, loader, bicycle */
.loader {
  display: block;
  width: 150px;
  height: auto;
}

.loader_body,
  .loader_front,
  .loader_handlebars,
  .loader_pedals,
  .loader_pedals-spin,
  .loader_seat,
  .loader_spokes,
  .loader_spokes-spin,
  .loader_tire {
  animation: bikeBody 3s ease-in-out infinite;
  stroke: var(--primary);
  transition: stroke var(--trans-dur);
}

.loader_front {
  animation-name: bikeFront;
}

.loader_handlebars {
  animation-name: bikeHandlebars;
}

.loader_pedals {
  animation-name: bikePedals;
}

.loader_pedals-spin {
  animation-name: bikePedalsSpin;
}

.loader_seat {
  animation-name: bikeSeat;
}

.loader_spokes,
  .loader_tire {
  stroke: currentColor;
}

.loader_spokes {
  animation-name: bikeSpokes;
}

.loader_spokes-spin {
  animation-name: bikeSpokesSpin;
}

.loader_tire {
  animation-name: bikeTire;
}

  /* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue), 90%, 10%);
    --fg: hsl(var(--hue), 90%, 90%);
  }
}

  /* Animations */
@keyframes bikeBody {
  from {
    stroke-dashoffset: 79;
  }

  33%,
    67% {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -79;
  }
}

@keyframes bikeFront {
  from {
    stroke-dashoffset: 19;
  }

  33%,
    67% {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -19;
  }
}

@keyframes bikeHandlebars {
  from {
    stroke-dashoffset: 10;
  }

  33%,
    67% {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -10;
  }
}

@keyframes bikePedals {
  from {
    animation-timing-function: ease-in;
    stroke-dashoffset: -25.133;
  }

  33%,
    67% {
    animation-timing-function: ease-out;
    stroke-dashoffset: -21.991;
  }

  to {
    stroke-dashoffset: -25.133;
  }
}

@keyframes bikePedalsSpin {
  from {
    transform: rotate(0.1875turn);
  }

  to {
    transform: rotate(3.1875turn);
  }
}

@keyframes bikeSeat {
  from {
    stroke-dashoffset: 5;
  }

  33%,
    67% {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -5;
  }
}

@keyframes bikeSpokes {
  from {
    animation-timing-function: ease-in;
    stroke-dashoffset: -31.416;
  }

  33%,
    67% {
    animation-timing-function: ease-out;
    stroke-dashoffset: -23.562;
  }

  to {
    stroke-dashoffset: -31.416;
  }
}

@keyframes bikeSpokesSpin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(3turn);
  }
}

@keyframes bikeTire {
  from {
    animation-timing-function: ease-in;
    stroke-dashoffset: 56.549;
    transform: rotate(0);
  }

  33% {
    stroke-dashoffset: 0;
    transform: rotate(0.33turn);
  }

  67% {
    animation-timing-function: ease-out;
    stroke-dashoffset: 0;
    transform: rotate(0.67turn);
  }

  to {
    stroke-dashoffset: -56.549;
    transform: rotate(1turn);
  }
}
</style>


================================================
FILE: loaders/fanishah_dull-vampirebat-56.html
================================================
<div class="loader">
    <div class="bar bar1"></div>
    <div class="bar bar2"></div>
    <div class="bar bar3"></div>
    <div class="bar bar4"></div>
    <div class="bar bar5"></div>
    <div class="bar bar6"></div>
    <div class="bar bar7"></div>
    <div class="bar bar8"></div>
</div>
<style>
/* From Uiverse.io by fanishah - Tags: loader */
.loader {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.bar {
  width: 10px;
  height: 70px;
  background: hsl(0, 100%, 50%);
  display: inline-block;
  transform-origin: bottom center;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  animation: loader8913 1.2s linear infinite;
}

.bar1 {
  animation-delay: 0.1s;
}

.bar2 {
  animation-delay: 0.2s;
}

.bar3 {
  animation-delay: 0.3s;
}

.bar4 {
  animation-delay: 0.4s;
}

.bar5 {
  animation-delay: 0.5s;
}

.bar6 {
  animation-delay: 0.6s;
}

.bar7 {
  animation-delay: 0.7s;
}

.bar8 {
  animation-delay: 0.8s;
}

@keyframes loader8913 {
  0% {
    transform: scaleY(0.1);
  }

  50% {
    transform: scaleY(1);
    background: yellowgreen;
  }

  100% {
    transform: scaleY(0.1);
    background: transparent;
  }
}

</style>


================================================
FILE: loaders/fanishah_fat-dodo-89.html
================================================
<div>
  <svg height="108px" width="108px" viewBox="0 0 128 128" class="loader">
    <defs>
      <clipPath id="loader-eyes">
        <circle transform="rotate(-40,64,64) translate(0,-56)" r="8" cy="64" cx="64" class="loader__eye1"></circle>
        <circle transform="rotate(40,64,64) translate(0,-56)" r="8" cy="64" cx="64" class="loader__eye2"></circle>
      </clipPath>
      <linearGradient y2="1" x2="0" y1="0" x1="0" id="loader-grad">
        <stop stop-color="#000" offset="0%"></stop>
        <stop stop-color="#fff" offset="100%"></stop>
      </linearGradient>
      <mask id="loader-mask">
        <rect fill="url(#loader-grad)" height="128" width="128" y="0" x="0"></rect>
      </mask>
    </defs>
    <g stroke-dasharray="175.93 351.86" stroke-width="12" stroke-linecap="round">
      <g>
        <rect clip-path="url(#loader-eyes)" height="64" width="128" fill="hsl(193,90%,50%)"></rect>
        <g stroke="hsl(193,90%,50%)" fill="none">
          <circle transform="rotate(180,64,64)" r="56" cy="64" cx="64" class="loader__mouth1"></circle>
          <circle transform="rotate(0,64,64)" r="56" cy="64" cx="64" class="loader__mouth2"></circle>
        </g>
      </g>
      <g mask="url(#loader-mask)">
        <rect clip-path="url(#loader-eyes)" height="64" width="128" fill="hsl(223,90%,50%)"></rect>
        <g stroke="hsl(223,90%,50%)" fill="none">
          <circle transform="rotate(180,64,64)" r="56" cy="64" cx="64" class="loader__mouth1"></circle>
          <circle transform="rotate(0,64,64)" r="56" cy="64" cx="64" class="loader__mouth2"></circle>
        </g>
      </g>
    </g>
  </svg>
</div>
<style>
/* From Uiverse.io by fanishah - Tags: loading, loader */
.loader {
  width: 8em;
  height: 8em;
}

.loader__eye1,
  .loader__eye2,
  .loader__mouth1,
  .loader__mouth2 {
  animation: eye1 3s ease-in-out infinite;
}

.loader__eye1,
  .loader__eye2 {
  transform-origin: 64px 64px;
}

.loader__eye2 {
  animation-name: eye2;
}

.loader__mouth1 {
  animation-name: mouth1;
}

.loader__mouth2 {
  animation-name: mouth2;
  visibility: hidden;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue), 90%, 10%);
    --fg: hsl(var(--hue), 90%, 90%);
  }
}

@keyframes eye1 {
  from {
    transform: rotate(-260deg) translate(0, -56px);
  }

  50%,
    60% {
    animation-timing-function: cubic-bezier(0.17, 0, 0.58, 1);
    transform: rotate(-40deg) translate(0, -56px) scale(1);
  }

  to {
    transform: rotate(225deg) translate(0, -56px) scale(0.35);
  }
}

@keyframes eye2 {
  from {
    transform: rotate(-260deg) translate(0, -56px);
  }

  50% {
    transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1);
  }

  52.5% {
    transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1, 0);
  }

  55%,
    70% {
    animation-timing-function: cubic-bezier(0, 0, 0.28, 1);
    transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1);
  }

  to {
    transform: rotate(150deg) translate(0, -56px) scale(0.4);
  }
}

@keyframes eyeBlink {
  from,
    25%,
    75%,
    to {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(0);
  }
}

@keyframes mouth1 {
  from {
    animation-timing-function: ease-in;
    stroke-dasharray: 0 351.86;
    stroke-dashoffset: 0;
  }

  25% {
    animation-timing-function: ease-out;
    stroke-dasharray: 175.93 351.86;
    stroke-dashoffset: 0;
  }

  50% {
    animation-timing-function: steps(1, start);
    stroke-dasharray: 175.93 351.86;
    stroke-dashoffset: -175.93;
    visibility: visible;
  }

  75%,
    to {
    visibility: hidden;
  }
}

@keyframes mouth2 {
  from {
    animation-timing-function: steps(1, end);
    visibility: hidden;
  }

  50% {
    animation-timing-function: ease-in-out;
    visibility: visible;
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -351.86;
  }
}


</style>


================================================
FILE: loaders/fanishah_funny-cow-54.html
================================================
<div class="container">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
    <div class="item item-4"></div>
</div>
<style>
/* From Uiverse.io by fanishah - Tags: loader */
.container {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.item {
  width: 50px;
  height: 50px;
  position: absolute;
}

.item-1 {
  background-color: rgb(250, 87, 103);
  top: 0;
  left: 0;
  z-index: 1;
  animation: item-1_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.item-2 {
  background-color: rgb(121, 68, 228);
  top: 0;
  right: 0;
  animation: item-2_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.item-3 {
  background-color: rgb(27, 145, 247);
  bottom: 0;
  right: 0;
  z-index: 1;
  animation: item-3_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.item-4 {
  background-color: rgb(250, 194, 76);
  bottom: 0;
  left: 0;
  animation: item-4_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

@keyframes item-1_move {
  0%, 100% {
    transform: translate(0, 0)
  }

  25% {
    transform: translate(0, 50px)
  }

  50% {
    transform: translate(50px, 50px)
  }

  75% {
    transform: translate(50px, 0)
  }
}

@keyframes item-2_move {
  0%, 100% {
    transform: translate(0, 0)
  }

  25% {
    transform: translate(-50px, 0)
  }

  50% {
    transform: translate(-50px, 50px)
  }

  75% {
    transform: translate(0, 50px)
  }
}

@keyframes item-3_move {
  0%, 100% {
    transform: translate(0, 0)
  }

  25% {
    transform: translate(0, -50px)
  }

  50% {
    transform: translate(-50px, -50px)
  }

  75% {
    transform: translate(-50px, 0)
  }
}

@keyframes item-4_move {
  0%, 100% {
    transform: translate(0, 0)
  }

  25% {
    transform: translate(50px, 0)
  }

  50% {
    transform: translate(50px, -50px)
  }

  75% {
    transform: translate(0, -50px)
  }
}
</style>


================================================
FILE: loaders/fanishah_quick-deer-33.html
================================================
<div class="spinner">
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="200" height="200" fill="none">
    <path stroke="#E91E63" stroke-width="1.5" d="M9.743 10.25c3.213 1.96 5.017 4.676 7.248 4.676 2.588 0 2.791-4.8.518-5.668-3.107-1.187-5.178 3.719-8.284 5.03-1.415.677-3.41 1.014-4.09-1.14-.251-.797-.13-1.65.133-2.442v0c.425-1.278 2.132-1.66 3.35-1.081.304.144.668.346 1.125.625z" stroke-dashoffset="100" stroke-dasharray="100" class="path">
    </path>
  </svg>
</div>
<style>
/* From Uiverse.io by fanishah - Tags: loader */
.spinner .path {
 animation: infinity-load 1.5s infinite cubic-bezier(.65,.05,.36,1)
}

@keyframes infinity-load {
 to {
  stroke-dashoffset: 10
 }
}
</style>


================================================
FILE: loaders/fanishah_selfish-goose-88.html
================================================
<div class="loading-bar">
    Loading
</div>
<style>
/* From Uiverse.io by fanishah - Tags: loading, loader */
.loading-bar {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 110px;
  height: 110px;
  background: transparent;
  border: px solid #3c3c3c;
  border-radius: 50%;
  text-align: center;
  line-height: 111px;
  font-family: sans-serif;
  font-size: 15px;
  color: #fff000;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 0 20px #fff000;
  box-shadow: 0 0 20px rgba(0,0,0,.5);
}

.loading-bar:before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top: 5px solid #fff000;
  border-right: 5px solid #fff000;
  border-radius: 50%;
  animation: animateC 2s linear infinite;
}

@keyframes animateC {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate {
  0% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(405deg);
  }
}
</style>


================================================
FILE: loaders/fanishah_tender-bat-85.html
================================================
<div class="container">
    <div class="top-left"></div>
    <div class="top-right"></div>
    <div class="bottom-left"></div>
    <div class="bottom-right"></div>
</div>
<style>
/* From Uiverse.io by fanishah - Tags: loader */
.container {
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
}

.container div {
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
  display: block;
  position: absolute;
}

.top-left {
  animation: tl 7.5s ease infinite
}

.top-right {
  animation: tr 7.5s ease infinite
}

.bottom-left {
  animation: bl 7.5s ease infinite
}

.bottom-right {
  animation: br 7.5s ease infinite
}

.container div:before,
.container div:after {
  display: block;
  position: absolute;
  content: ""
}

.container div:before {
  width: 50px;
  height: 50px
}

.top-left:before {
  background: rgb(251, 189, 4);
  top: 0;
  left: 0;
  border-radius: 100% 0 0 0
}

.top-right:before {
  background: rgb(234, 67, 52);
  top: 0;
  right: 0;
  border-radius: 0 100% 0 0
}

.bottom-left:before {
  background: rgb(52, 168, 83);
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 100%
}

.bottom-right:before {
  background: rgb(67, 135, 244);
  bottom: 0;
  right: 0;
  border-radius: 0 0 100% 0
}

.container div:after {
  background: rgb(33, 33, 33);
  width: 25px;
  height: 25px;
  z-index: 1
}

.top-left:after {
  top: 25px;
  left: 25px;
  border-radius: 100% 0 0 0
}

.top-right:after {
  top: 25px;
  right: 25px;
  border-radius: 0 100% 0 0
}

.bottom-left:after {
  bottom: 25px;
  left: 25px;
  border-radius: 0 0 0 100%
}

.bottom-right:after {
  bottom: 25px;
  right: 25px;
  border-radius: 0 0 100% 0
}

@keyframes tl {
  0%,96%,100% {
    transform: rotate(0deg)
  }

  12% {
    transform: rotate(-45deg)
  }

  24% {
    transform: rotate(-90deg)
  }

  36% {
    transform: rotate(-135deg)
  }

  48% {
    left: 50px;
    transform: rotate(-180deg)
  }

  60% {
    left: 125px;
    opacity: 1;
    transform: rotate(-135deg)
  }

  61%,95% {
    opacity: 0
  }
}

@keyframes tr {
  0% {
    transform: rotate(0deg)
  }

  12% {
    transform: rotate(-45deg)
  }

  24% {
    transform: rotate(-90deg)
  }

  36% {
    transform: rotate(-135deg)
  }

  48% {
    transform: rotate(-180deg)
  }

  60% {
    transform: rotate(-225deg)
  }

  72% {
    transform: rotate(-270deg)
  }

  84% {
    transform: rotate(-315deg)
  }

  96%,100% {
    transform: rotate(-360deg)
  }
}

@keyframes bl {
  0%,100% {
    transform: rotate(0deg)
  }

  12% {
    transform: rotate(-45deg)
  }

  24% {
    left: 50px;
    transform: rotate(-90deg)
  }

  36% {
    left: 125px;
    opacity: 1;
    transform: rotate(-45deg)
  }

  37%,83% {
    opacity: 0
  }

  84% {
    left: -25px;
    opacity: 1;
    transform: rotate(-45deg)
  }

  96% {
    left: 50px;
    transform: rotate(0deg)
  }
}

@keyframes br {
  0%,96%,100% {
    transform: rotate(0deg)
  }

  12% {
    left: 125px;
    opacity: 1;
    transform: rotate(45deg)
  }

  13%,59% {
    opacity: 0
  }

  60% {
    left: -25px;
    opacity: 1;
    transform: rotate(45deg)
  }

  72% {
    left: 50px;
    transform: rotate(90deg)
  }

  84% {
    transform: rotate(45deg)
  }
}
</style>


================================================
FILE: loaders/fanishah_terrible-goose-14.html
================================================
<div class="planet">
</div>
<style>
/* From Uiverse.io by fanishah - Tags: loader */
.planet {
  display: block;
  width: 125px;
  height: 125px;
  position: relative;
  transform-style: preserve-3d;
  border-radius: 50%;
  background: #fcc96b;
  background: #fcc96b;
  background: linear-gradient(
    180deg,
    #fcc96b 0%,
    #fcc96b 15%,
    #f7ae01 15%,
    #f7ae01 19%,
    #fcc96b 19%,
    #fcc96b 22%,
    #f7ae01 22%,
    #f7ae01 28%,
    #fcc96b 28%,
    #fcc96b 31%,
    #fcc96b 33%,
    #fcc96b 36%,
    #f7ae01 36%,
    #f7ae01 48%,
    #fcc96b 48%,
    #fcc96b 55%,
    #f7ae01 55%,
    #f7ae01 66%,
    #fcc96b 66%,
    #fcc96b 70%,
    #f7ae01 70%,
    #f7ae01 73%,
    #fcc96b 73%,
    #fcc96b 82%,
    #f7ae01 82%,
    #c7ba9d 86%,
    #fcc96b 86%
  );
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.25),
    inset 8px -4px 6px rgba(199, 128, 0, 0.5),
    inset -8px 4px 8px rgba(255, 235, 199, 0.5), inset 20px -5px 12px #f7ae01,
    0 0 100px #ffffff59;
  transform: rotateZ(-15deg);
}

.planet::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 16px solid #e1a519;
  border-top-width: 0;
  border-radius: 50%;
  box-shadow: 0 -2px 0 #c18620;
  animation: rings1 0.8s infinite linear;
}

.planet::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 8px solid #d48b0c;
  border-top-width: 0;
  border-radius: 50%;
  box-shadow: 0 -2px 0 #b99309;
  animation: rings2 0.8s infinite linear;
}

@keyframes rings1 {
  0% {
    transform: rotateX(65deg) rotateZ(0deg) scale(1.75);
  }

  100% {
    transform: rotateX(65deg) rotateZ(360deg) scale(1.75);
  }
}

@keyframes rings2 {
  0% {
    transform: rotateX(65deg) rotateZ(0deg) scale(1.7);
  }

  100% {
    transform: rotateX(65deg) rotateZ(360deg) scale(1.7);
  }
}
</style>


================================================
FILE: loaders/fanishah_terrible-snake-34.html
================================================
<div>
    <svg class="loader" viewBox="0 0 128 128" width="128px" height="128px" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="grad1" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#000"></stop>
          <stop offset="40%" stop-color="#fff"></stop>
          <stop offset="100%" stop-color="#fff"></stop>
        </linearGradient>
        <linearGradient id="grad2" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#000"></stop>
          <stop offset="60%" stop-color="#000"></stop>
          <stop offset="100%" stop-color="#fff"></stop>
        </linearGradient>
        <mask id="mask1">
          <rect x="0" y="0" width="128" height="128" fill="url(#grad1)"></rect>
        </mask>
        <mask id="mask2">
          <rect x="0" y="0" width="128" height="128" fill="url(#grad2)"></rect>
        </mask>
      </defs>
      <g fill="none" stroke-linecap="round" stroke-width="16">
        <circle class="loader_ring" r="56" cx="64" cy="64" stroke="#ddd"></circle>
        <g stroke="hsl(223,90%,50%)">
          <path class="loader_worm1" d="M120,64c0,30.928-25.072,56-56,56S8,94.928,8,64" stroke="hsl(343,90%,50%)" stroke-dasharray="43.98 307.87"></path>
          <g transform="translate(42,42)">
            <g class="loader_worm2" transform="translate(-42,0)">
              <path class="loader_worm2-1" d="M8,22c0-7.732,6.268-14,14-14s14,6.268,14,14" stroke-dasharray="43.98 175.92"></path>
            </g>
          </g>
        </g>
        <g stroke="hsl(283,90%,50%)" mask="url(#mask1)">
          <path class="loader_worm1" d="M120,64c0,30.928-25.072,56-56,56S8,94.928,8,64" stroke-dasharray="43.98 307.87"></path>
          <g transform="translate(42,42)">
            <g class="loader_worm2" transform="translate(-42,0)">
              <path class="loader_worm2-1" d="M8,22c0-7.732,6.268-14,14-14s14,6.268,14,14" stroke-dasharray="43.98 175.92"></path>
            </g>
          </g>
        </g>
        <g stroke="hsl(343,90%,50%)" mask="url(#mask2)">
          <path class="loader_worm1" d="M120,64c0,30.928-25.072,56-56,56S8,94.928,8,64" stroke-dasharray="43.98 307.87"></path>
          <g transform="translate(42,42)">
            <g class="loader_worm2" transform="translate(-42,0)">
              <path class="loader_worm2-1" d="M8,22c0-7.732,6.268-14,14-14s14,6.268,14,14" stroke-dasharray="43.98 175.92"></path>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </div>
  
<style>
/* From Uiverse.io by fanishah - Tags: loading, loader */
.loader {
  display: block;
  width: 8em;
  height: 8em;
}

.loader_ring {
  stroke: hsla(var(--hue), 90%, 5%, 0.1);
  transition: stroke 0.3s;
}

.loader_worm1,
  .loader_worm2,
  .loader_worm2-1 {
  animation: worm1 5s ease-in infinite;
}

.loader_worm1 {
  transform-origin: 64px 64px;
}

.loader_worm2,
  .loader_worm2-1 {
  transform-origin: 22px 22px;
}

.loader_worm2 {
  animation-name: worm2;
  animation-timing-function: linear;
}

.loader_worm2-1 {
  animation-name: worm2-1;
  stroke-dashoffset: 175.92;
}

  /* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue), 90%, 5%);
    --fg: hsl(var(--hue), 90%, 95%);
  }

  .loader_ring {
    stroke: hsla(var(--hue), 90%, 95%, 0.1);
  }
}

  /* Animations */
@keyframes worm1 {
  from,
    to {
    stroke-dashoffset: 0;
  }

  12.5% {
    animation-timing-function: ease-out;
    stroke-dashoffset: -175.91;
  }

  25% {
    animation-timing-function: cubic-bezier(0, 0, 0.43, 1);
    stroke-dashoffset: -307.88;
  }

  50% {
    animation-timing-function: ease-in;
    stroke-dashoffset: -483.8;
  }

  62.5% {
    animation-timing-function: ease-out;
    stroke-dashoffset: -307.88;
  }

  75% {
    animation-timing-function: cubic-bezier(0, 0, 0.43, 1);
    stroke-dashoffset: -175.91;
  }
}

@keyframes worm2 {
  from,
    12.5%,
    75%,
    to {
    transform: rotate(0) translate(-42px, 0);
  }

  25%,
    62.5% {
    transform: rotate(0.5turn) translate(-42px, 0);
  }
}

@keyframes worm2-1 {
  from {
    stroke-dashoffset: 175.91;
    transform: rotate(0);
  }

  12.5% {
    animation-timing-function: cubic-bezier(0, 0, 0.42, 1);
    stroke-dashoffset: 0;
    transform: rotate(0);
  }

  25% {
    animation-timing-function: linear;
    stroke-dashoffset: 0;
    transform: rotate(1.5turn);
  }

  37.5%,
    50% {
    stroke-dashoffset: -175.91;
    transform: rotate(1.5turn);
  }

  62.5% {
    animation-timing-function: cubic-bezier(0, 0, 0.42, 1);
    stroke-dashoffset: 0;
    transform: rotate(1.5turn);
  }

  75% {
    animation-timing-function: linear;
    stroke-dashoffset: 0;
    transform: rotate(0);
  }

  87.5%,
    to {
    stroke-dashoffset: 175.92;
    transform: rotate(0);
  }
}
</style>


================================================
FILE: loaders/fanishah_wicked-wasp-20.html
================================================
<svg class="gegga">
    <defs>
        <filter id="gegga">
            <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"></feGaussianBlur>
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="inreGegga"></feColorMatrix>
            <feComposite in="SourceGraphic" in2="inreGegga" operator="atop"></feComposite>
        </filter>
    </defs>
</svg>
<svg class="snurra" width="200" height="200" viewBox="0 0 200 200">
    <defs>
        <linearGradient id="linjärGradient">
            <stop class="stopp1" offset="0"></stop>
            <stop class="stopp2" offset="1"></stop>
        </linearGradient>
        <linearGradient y2="160" x2="160" y1="40" x1="40" gradientUnits="userSpaceOnUse" id="gradient" xlink:href="#linjärGradient"></linearGradient>
    </defs>
    <path class="halvan" d="m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64"></path>
    <circle class="strecken" cx="100" cy="100" r="64"></circle>
</svg>
<svg class="skugga" width="200" height="200" viewBox="0 0 200 200">
    <path class="halvan" d="m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64"></path>
    <circle class="strecken" cx="100" cy="100" r="64"></circle>
</svg>
<style>
/* From Uiverse.io by fanishah - Tags: loader */
.gegga {
  width: 0;
}

.snurra {
  filter: url(#gegga);
}

.stopp1 {
  stop-color: #f700a8;
}

.stopp2 {
  stop-color: #ff8000;
}

.halvan {
  animation: Snurra1 10s infinite linear;
  stroke-dasharray: 180 800;
  fill: none;
  stroke: url(#gradient);
  stroke-width: 23;
  stroke-linecap: round;
}

.strecken {
  animation: Snurra1 3s infinite linear;
  stroke-dasharray: 26 54;
  fill: none;
  stroke: url(#gradient);
  stroke-width: 23;
  stroke-linecap: round;
}

.skugga {
  filter: blur(5px);
  opacity: 0.3;
  position: absolute;
  transform: translate(3px, 3px);
}

@keyframes Snurra1 {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -403px;
  }
}

</style>


================================================
FILE: loaders/fateself_tricky-crab-38.html
================================================
<div class="loader">
    <span style="--i:1"></span>
    <span style="--i:2"></span>
    <span style="--i:3"></span>
    <span style="--i:4"></span>
    <span style="--i:5"></span>
    <span style="--i:6"></span>
    <span style="--i:7"></span>
    <span style="--i:8"></span>
    <span style="--i:9"></span>
    <span style="--i:10"></span>
    <span style="--i:11"></span>
    <span style="--i:12"></span>
    <span style="--i:13"></span>
    <span style="--i:14"></span>
    <span style="--i:15"></span>
    <span style="--i:16"></span>
    <span style="--i:17"></span>
    <span style="--i:18"></span>
    <span style="--i:19"></span>
    <span style="--i:20"></span>
</div>
<style>
/* From Uiverse.io by fateself - Tags: loader */
.loader {
  position: relative;
  width: 120px;
  height: 120px;
}

.loader span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(calc(18deg * var(--i)));
}

.loader span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00ff0a;
  box-shadow: 0 0 10px #00ff0a, 0 0 20px #00ff0a, 0 0 40px #00ff0a,
    0 0 60px #00ff0a, 0 0 80px #00ff0a, 0 0 100px #00ff0a;
  animation: animate34 2s linear infinite;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes animate34 {
  0% {
    transform: scale(1);
  }

  80%,
  100% {
    transform: scale(0);
  }
}
</style>


================================================
FILE: loaders/felipesntr_odd-wasp-90.html
================================================
<div class="loader">
<div class="in"></div>
<div class="out-1"></div>
<div class="out-2"></div>
<div class="out-3"></div>
</div>
<style>
/* From Uiverse.io by felipesntr - Tags: loader */
.loader {
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
}

.out-1 {
 position: absolute;
 width: 4em;
 height: 4em;
 border-radius: 100%;
 border: 0.2em solid transparent;
 border-top-color: rgb(43, 226, 83);
 animation: rec 2s infinite;
 transition: all ease-in-out 0.3s;
}

.out-2 {
 position: absolute;
 width: 4em;
 height: 4em;
 border-radius: 100%;
 border: 0.2em solid transparent;
 border-left-color: rgb(226, 223, 43);
 animation: rec 2s infinite;
 transition: all ease-in-out 0.3s;
}

.out-3 {
 position: absolute;
 width: 4em;
 height: 4em;
 border-radius: 100%;
 border: 0.2em solid transparent;
 border-bottom-color: rgb(51, 105, 252);
 animation: rec 2s infinite;
 transition: all ease-in-out 0.3s;
}

.in {
 position: absolute;
 border-radius: 100%;
 border: 0.2em solid rgba(43, 226, 83, 0.11);
 width: 4em;
 height: 4em;
 transition: all ease-in-out 0.3s;
}

@keyframes rec {
 0% {
  transform: rotate(360deg);
 }
}
</style>


================================================
FILE: loaders/forgingdestiny_brave-fireant-72.html
================================================
<div class="loader">
  <div class="circle" tabindex="0"></div>
  <div class="circle" tabindex="0"></div>
  <div class="circle" tabindex="0"></div>
  <div class="circle" tabindex="0"></div>
  <div class="circle" tabindex="0"></div>
</div>
<style>
/* From Uiverse.io by forgingdestiny - Tags: simple, minimalist, loader, wave, css effect */
/* Container for the loader */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10em;
}

/* Circle elements */
.circle {
  width: 1em;
  height: 1em;
  margin: 0 0.25em;
  border-radius: 50%;
  background-color: #a8d5e2;
  animation: wave 1.5s infinite ease-in-out;
  transition: background-color 0.3s ease;
}

/* Animation */
@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1em);
  }
}

/* Delay for each circle */
.circle:nth-child(1) {
  animation-delay: 0s;
}

.circle:nth-child(2) {
  animation-delay: 0.2s;
}

.circle:nth-child(3) {
  animation-delay: 0.4s;
}

.circle:nth-child(4) {
  animation-delay: 0.6s;
}

.circle:nth-child(5) {
  animation-delay: 0.8s;
}
  
</style>


================================================
FILE: loaders/fox-tech0_proud-grasshopper-33.html
================================================
<div aria-busy="true" aria-label="Loading" role="progressbar" class="container">
    <div class="swing">
        <div class="swing-l"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="swing-r"></div>
    </div>
    <div class="shadow">
        <div class="shadow-l"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="shadow-r"></div>
    </div>
</div>
<style>
/* From Uiverse.io by fox-tech0 - Tags: loader */
.container {
  left: 50%;
  margin: auto -50px;
  position: absolute;
  top: 50%;
}

.swing div {
  border-radius: 50%;
  float: left;
  height: 1em;
  width: 1em;
}

.swing div:nth-of-type(1) {
  background: -webkit-linear-gradient(left, #385c78 0%, #325774 100%);
  background: linear-gradient(to right, #385c78 0%, #325774 100%);
}

.swing div:nth-of-type(2) {
  background: -webkit-linear-gradient(left, #325774 0%, #47536a 100%);
  background: linear-gradient(to right, #325774 0%, #47536a 100%);
}

.swing div:nth-of-type(3) {
  background: -webkit-linear-gradient(left, #4a5369 0%, #6b4d59 100%);
  background: linear-gradient(to right, #4a5369 0%, #6b4d59 100%);
}

.swing div:nth-of-type(4) {
  background: -webkit-linear-gradient(left, #744c55 0%, #954646 100%);
  background: linear-gradient(to right, #744c55 0%, #954646 100%);
}

.swing div:nth-of-type(5) {
  background: -webkit-linear-gradient(left, #9c4543 0%, #bb4034 100%);
  background: linear-gradient(to right, #9c4543 0%, #bb4034 100%);
}

.swing div:nth-of-type(6) {
  background: -webkit-linear-gradient(left, #c33f31 0%, #d83b27 100%);
  background: linear-gradient(to right, #c33f31 0%, #d83b27 100%);
}

.swing div:nth-of-type(7) {
  background: -webkit-linear-gradient(left, #da3b26 0%, #db412c 100%);
  background: linear-gradient(to right, #da3b26 0%, #db412c 100%);
}

.shadow {
  clear: left;
  padding-top: 1.5em;
}

.shadow div {
  -webkit-filter: blur(1px);
  filter: blur(1px);
  float: left;
  width: 1em;
  height: .25em;
  border-radius: 50%;
  background: #e3dbd2;
}

.shadow .shadow-l {
  background: #d5d8d6;
}

.shadow .shadow-r {
  background: #eed3ca;
}

@-webkit-keyframes ball-l53 {
  0%, 50% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
  }

  100% {
    -webkit-transform: rotate(50deg) translateX(-2.5em);
    transform: rotate(50deg) translateX(-2.5em);
  }
}

@keyframes ball-l53 {
  0%, 50% {
    -webkit-transform: rotate(0) translate(0);
    transform: rotate(0) translateX(0);
  }

  100% {
    -webkit-transform: rotate(50deg) translateX(-2.5em);
    transform: rotate(50deg) translateX(-2.5em);
  }
}

@-webkit-keyframes ball-r53 {
  0% {
    -webkit-transform: rotate(-50deg) translateX(2.5em);
    transform: rotate(-50deg) translateX(2.5em);
  }

  50%,
  100% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
  }
}

@keyframes ball-r53 {
  0% {
    -webkit-transform: rotate(-50deg) translateX(2.5em);
    transform: rotate(-50deg) translateX(2.5em);
  }

  50%,
  100% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0)
  }
}

@-webkit-keyframes shadow-l-n53 {
  0%, 50% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: .125;
    -webkit-transform: translateX(-1.57em);
    transform: translateX(-1.75em);
  }
}

@keyframes shadow-l-n53 {
  0%, 50% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: .125;
    -webkit-transform: translateX(-1.75);
    transform: translateX(-1.75em);
  }
}

@-webkit-keyframes shadow-r-n53 {
  0% {
    opacity: .125;
    -webkit-transform: translateX(1.75em);
    transform: translateX(1.75em);
  }

  50%,
  100% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes shadow-r-n53 {
  0% {
    opacity: .125;
    -webkit-transform: translateX(1.75em);
    transform: translateX(1.75em);
  }

  50%,
  100% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.swing-l {
  -webkit-animation: ball-l53 .425s ease-in-out infinite alternate;
  animation: ball-l53 .425s ease-in-out infinite alternate;
}

.swing-r {
  -webkit-animation: ball-r53 .425s ease-in-out infinite alternate;
  animation: ball-r53 .425s ease-in-out infinite alternate;
}

.shadow-l {
  -webkit-animation: shadow-l-n53 .425s ease-in-out infinite alternate;
  animation: shadow-l-n53 .425s ease-in-out infinite alternate;
}

.shadow-r {
  -webkit-animation: shadow-r-n53 .425s ease-in-out infinite alternate;
  animation: shadow-r-n53 .425s ease-in-out infinite alternate;
}
</style>


================================================
FILE: loaders/funkyjuice213_chilly-fireant-79.html
================================================
<div class="loader">
  <div class="loader-bar bar-1"></div>
  <div class="loader-bar bar-2"></div>
  <div class="loader-bar bar-3"></div>
  <div class="loader-bar bar-4"></div>
</div>

<style>
/* From Uiverse.io by funkyjuice213 - Tags: loader, glow */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.loader-bar {
  height: 25px;
  width: 6px;
  margin: 0 3px;
  border-radius: 20px;
  animation: loader 2s ease-in-out infinite;
}

.bar-1 {
  background: linear-gradient(to right, #00e6e6, #00ccff, #0099ff, #0066ff);
  animation-delay: 0s;
  box-shadow: 0px 0px 15px 3px #00e6e6;
}

.bar-2 {
  background: linear-gradient(to right, #00ccff, #0099ff, #0066ff, #00e6e6);
  animation-delay: 0.1s;
  box-shadow: 0px 0px 15px 3px #00ccff;
}

.bar-3 {
  background: linear-gradient(to right, #0099ff, #0066ff, #00e6e6, #00ccff);
  animation-delay: 0.2s;
  box-shadow: 0px 0px 15px 3px #0099ff;
}

.bar-4 {
  background: linear-gradient(to right, #0066ff, #00e6e6, #00ccff, #0099ff);
  animation-delay: 0.3s;
  box-shadow: 0px 0px 15px 3px #0066ff;
}

@keyframes loader {
  0% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(2);
  }

  100% {
    transform: scaleY(1);
  }
}

</style>


================================================
FILE: loaders/gagan-gv_brave-chipmunk-25.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by gagan-gv - Tags: loader */
.loader {
  width: 60px;
  height: 60px;
  background: #4285f4;
  border-radius: 10%;
  animation: dice3 7s ease-in-out infinite;
  filter: drop-shadow(2px 3px 40px #444);
}

@keyframes dice3 {
  from, to {
    transform: translateX(-50px) rotateX(0deg);
  }

  25% {
    background: #db4437;
  }

  50% {
    background: #f4b400;
    transform: translateX(50px) rotate(360deg);
  }

  75% {
    background: #0f9d58;
  }
}
</style>


================================================
FILE: loaders/gagan-gv_nervous-wasp-20.html
================================================
<div class="spinner">
  <span>L</span>
  <span>O</span>
  <span>A</span>
  <span>D</span>
  <span>I</span>
  <span>N</span>
  <span>G</span>
</div>
<style>
/* From Uiverse.io by gagan-gv - Tags: loading, loader, glow */
.spinner {
 height: 50px;
 width: max-content;
 font-size: 18px;
 font-weight: 600;
 font-family: monospace;
 letter-spacing: 1em;
 color: #f5f5f5;
 filter: drop-shadow(0 0 10px);
 display: flex;
 justify-content: center;
 align-items: center;
}

.spinner span {
 animation: loading6454 1.75s ease infinite;
}

.spinner span:nth-child(2) {
 animation-delay: 0.25s;
}

.spinner span:nth-child(3) {
 animation-delay: 0.5s;
}

.spinner span:nth-child(4) {
 animation-delay: 0.75s;
}

.spinner span:nth-child(5) {
 animation-delay: 1s;
}

.spinner span:nth-child(6) {
 animation-delay: 1.25s;
}

.spinner span:nth-child(7) {
 animation-delay: 1.5s;
}

@keyframes loading6454 {
 0%, 100% {
  transform: translateY(0);
 }

 50% {
  transform: translateY(-10px);
 }
}
</style>


================================================
FILE: loaders/gagan-gv_stupid-walrus-23.html
================================================

<div class="loader"></div>
<style>
/* From Uiverse.io by gagan-gv - Tags: loader */
.loader {
 border: 0 solid transparent;
 border-radius: 50%;
 width: 100px;
 height: 100px;
}

.loader::before,
.loader::after {
 content: '';
 border: 7px solid #ccc;
 border-radius: 50%;
 width: inherit;
 height: inherit;
 position: absolute;
 animation: loader 2s linear infinite;
 opacity: 0;
}

.loader::before {
 animation-delay: 1s;
}

@keyframes loader {
 0% {
  transform: scale(1);
  opacity: 0;
 }

 50% {
  opacity: 1;
 }

 100% {
  transform: scale(0);
  opacity: 0;
 }
}
</style>


================================================
FILE: loaders/gagan-gv_wet-dolphin-100.html
================================================
<div class="loader">
  <span>L</span>
  <span>O</span>
  <span>A</span>
  <span>D</span>
  <span>I</span>
  <span>N</span>
  <span>G</span>
</div>
<style>
/* From Uiverse.io by gagan-gv - Tags: loader */
.loader span {
 font-size: 22px;
 font-family: 'Courier New', Courier, monospace;
 font-weight: 600;
 animation: blur 3s linear infinite;
 line-height: 20px;
 transition: all 0.5s;
 letter-spacing: 0.2em;
}

@keyframes blur {
 0%, 90% {
  filter: blur(0);
 }

 50% {
  filter: blur(10px);
 }
}
</style>


================================================
FILE: loaders/gagan-gv_witty-lizard-19.html
================================================
<div class="spinner">
<div class="loader l1"></div>
<div class="loader l2"></div>
</div>
<style>
/* From Uiverse.io by gagan-gv - Tags: loader */
.spinner {
 border: 0 solid transparent;
 border-radius: 50%;
 width: 50px;
 height: 50px;
}

.loader {
 width: inherit;
 height: inherit;
 position: absolute;
}

.loader::before,
.loader::after {
 content: '';
 border: 3px solid #505065;
 border-radius: 50%;
 width: inherit;
 height: inherit;
 position: absolute;
 opacity: 1;
}

.l1::before,
.l1::after {
 animation: clockwiseZ 2.5s infinite;
}

.l2::after,
.l2::before {
 animation: anticlockwiseZ 2.5s infinite;
}

@keyframes clockwiseZ {
 0%, 100% {
  transform: rotateY(0);
 }

 50% {
  transform: rotateY(180deg) skew(-10deg, -5deg);
 }
}

@keyframes anticlockwiseZ {
 0%, 100% {
  transform: rotateX(0);
 }

 50% {
  transform: rotateX(-180deg) skew(10deg, 5deg);
 }
}
</style>


================================================
FILE: loaders/gagan-gv_yellow-panther-46.html
================================================
<div class="loader">
    <div></div>
</div>
<style>
/* From Uiverse.io by gagan-gv - Tags: animation, progress, loader, smooth */
.loader {
  width: 12em;
  height: 1em;
  border-radius: 8px;
  background-color: #47a7ff44;
}

.loader div {
  height: 100%;
  width: 100%;
  border-radius: 8px;
  background-color: #47a7ff;
  animation: width7435 5s linear infinite;
  transition: all;
}

@keyframes width7435 {
  from {
    /*width: 0;*/
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}
</style>


================================================
FILE: loaders/garerim_loud-ape-6.html
================================================
<div class="anim-box">
        <div class="anim-interieur">
            <div class="rect rect1"></div>
            <div class="rect rect2"></div>
            <div class="rect rect3"></div>
            <div class="rect rect4"></div>
            <div class="rect rect5"></div>
        </div>
    </div>
<style>
/* From Uiverse.io by garerim - Tags: loader */
.anim-box {
  width: 200px;
  height: 200px;
  border: 5px solid #333;
  margin: 100px auto;
  position: relative;
}

.anim-interieur {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    /* background-color: orange; */
  text-align: center;
}

.rect {
  background-color: #333;
  display: inline-block;
  height: 60px;
  width: 6px;
  margin: 0px  1px;
  animation: etire 1.2s infinite ease-in-out;
}

@keyframes etire {
  0% {
    transform: scaleY(0.4);
  }

  20% {
    transform: scaleY(1);
  }

  40% {
    transform: scaleY(0.4);
  }

  100% {
    transform: scaleY(0.4);
  }
}

.rect2 {
  animation-delay: -1.1s;
}

.rect3 {
  animation-delay: -1s;
}

.rect4 {
  animation-delay: -0.9s;
}

.rect5 {
  animation-delay: -0.8s;
}
</style>


================================================
FILE: loaders/gharsh11032000_lucky-horse-98.html
================================================
<div class="loader">
  <div class="loader-small"></div>
  <div class="loader-large"></div>
</div>

<style>
/* From Uiverse.io by gharsh11032000 - Tags:  */
.loader {
  position: relative;
  width: 70px;
  height: 70px;
}

.loader-large {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: #D4ADFC;
  border-radius: 10px;
  animation: loading 2s infinite;
}

.loader-small {
  position: absolute;
  width: 50%;
  height: 50%;
  inset: 0;
  margin: auto;
  background-color: #5C469C;
  z-index: 2;
  border-radius: 6px;
  animation: loading 2s infinite reverse;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateX(180deg);
  }
}

</style>


================================================
FILE: loaders/gharsh11032000_slimy-donkey-39.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: gradient, loader, circle loader */
.loader {
  width: 5em;
  height: 5em;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
  animation: spin 3s infinite;
}

.loader::before {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

@keyframes spin {
  0% {
    transform: rotate(-45deg);
  }

  50% {
    transform: rotate(-360deg);
    border-radius: 50%;
  }

  100% {
    transform: rotate(-45deg);
  }
}
</style>


================================================
FILE: loaders/gharsh11032000_tall-impala-21.html
================================================
<label class="loader">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: animation, loader, rolling */
.loader {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 8em;
  height: 2em;
}

.slider {
  position: absolute;
  inset: 0;
  background: #0974f1;
  box-shadow: 0 0px 20px rgba(9, 117, 241, 0.4);
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  animation: move 1.5s cubic-bezier(0.23, 1, 0.320, 1) infinite alternate;
}

@keyframes move {
  0% {
    transform: translateX(0em) rotate(0deg);
  }

  100% {
    transform: translateX(6em) rotate(270deg);
  }
}
</style>


================================================
FILE: loaders/gsperandio_shaggy-kangaroo-12.html
================================================
<div class="loop cubes">
    <div class="item cubes"></div>
    <div class="item cubes"></div>
    <div class="item cubes"></div>
    <div class="item cubes"></div>
    <div class="item cubes"></div>
    <div class="item cubes"></div>
</div>
<style>
/* From Uiverse.io by gsperandio - Tags: simple, 3d, loader */
.cubes {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.loop {
  transform: rotateX(-35deg) rotateY(-45deg) translateZ(1.5625em);
}

@keyframes s {
  to {
    transform: scale3d(0.2, 0.2, 0.2);
  }
}

.item {
  margin: -1.5625em;
  width: 3.125em;
  height: 3.125em;
  transform-origin: 50% 50% -1.5625em;
  box-shadow: 0 0 0.125em currentColor;
  background: currentColor;
  animation: s 0.6s cubic-bezier(0.45, 0.03, 0.51, 0.95) infinite alternate;
}

.item:before,
.item:after {
  position: absolute;
  width: inherit;
  height: inherit;
  transform-origin: 0 100%;
  box-shadow: inherit;
  background: currentColor;
  content: "";
}

.item:before {
  bottom: 100%;
  transform: rotateX(90deg);
}

.item:after {
  left: 100%;
  transform: rotateY(90deg);
}

.item:nth-child(1) {
  margin-top: 6.25em;
  color: #fe1e52;
  animation-delay: -1.2s;
}

.item:nth-child(1):before {
  color: #ff6488;
}

.item:nth-child(1):after {
  color: #ff416d;
}

.item:nth-child(2) {
  margin-top: 3.125em;
  color: #fe4252;
  animation-delay: -1s;
}

.item:nth-child(2):before {
  color: #ff8892;
}

.item:nth-child(2):after {
  color: #ff6572;
}

.item:nth-child(3) {
  margin-top: 0em;
  color: #fe6553;
  animation-delay: -0.8s;
}

.item:nth-child(3):before {
  color: #ffa499;
}

.item:nth-child(3):after {
  color: #ff8476;
}

.item:nth-child(4) {
  margin-top: -3.125em;
  color: #fe8953;
  animation-delay: -0.6s;
}

.item:nth-child(4):before {
  color: #ffb999;
}

.item:nth-child(4):after {
  color: #ffa176;
}

.item:nth-child(5) {
  margin-top: -6.25em;
  color: #feac54;
  animation-delay: -0.4s;
}

.item:nth-child(5):before {
  color: #ffce9a;
}

.item:nth-child(5):after {
  color: #ffbd77;
}

.item:nth-child(6) {
  margin-top: -9.375em;
  color: #fed054;
  animation-delay: -0.2s;
}

.item:nth-child(6):before {
  color: #ffe49a;
}

.item:nth-child(6):after {
  color: #ffda77;
}
</style>


================================================
FILE: loaders/guilhermeyohan_bright-pug-33.html
================================================
  <div class="loader">     
         <div class="shape"></div>
  </div>
<style>
/* From Uiverse.io by guilhermeyohan - Tags: loader */
.loader {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  animation: loader_513 2s linear infinite;
}

.shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  border-radius: 15px;
}

.shape {
  background-color: rgb(31, 1, 164);
  animation: rectangle_513 4s linear infinite;
  animation-delay: 2s;
}

@keyframes loader_513 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rectangle_513 {
  0% {
    transform: scale(1, 1);
    border-radius: 15px;
  }

  25% {
    border-radius: 30px;
    box-shadow: 0px 0px 5px rgba(133, 133, 133, 0.523);
    background-color: rgb(13, 60, 189);
    transform: scale(0.9);
  }

  50% {
    border-radius: 20px;
    transform: scale(1.4);
    box-shadow: 2px 5px 50px rgba(90, 90, 90, 0.206);
  }
}
  
</style>


================================================
FILE: loaders/guilhermeyohan_fluffy-turtle-93.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by guilhermeyohan - Tags: loader */
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}

.loader {
  color: #ffffff;
  font-size: 11px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.loader:before,
.loader:after {
  position: absolute;
  content: '';
}

.loader:before {
  width: 5.2em;
  height: 10.2em;
  background: #0011ff;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.1em 5.1em;
  transform-origin: 5.1em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}

.loader:after {
  width: 5.2em;
  height: 10.2em;
  background: #0011ff;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 4.9em;
  -webkit-transform-origin: 0.1em 5.1em;
  transform-origin: 0.1em 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}

@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

</style>


================================================
FILE: loaders/gustavofusco_rare-pug-90.html
================================================
<svg xmlns="http://www.w3.org/2000/svg" height="200px" width="200px" viewBox="0 0 200 200" class="pencil">
	<defs>
		<clipPath id="pencil-eraser">
			<rect height="30" width="30" ry="5" rx="5"></rect>
		</clipPath>
	</defs>
	<circle transform="rotate(-113,100,100)" stroke-linecap="round" stroke-dashoffset="439.82" stroke-dasharray="439.82 439.82" stroke-width="2" stroke="currentColor" fill="none" r="70" class="pencil__stroke"></circle>
	<g transform="translate(100,100)" class="pencil__rotate">
		<g fill="none">
			<circle transform="rotate(-90)" stroke-dashoffset="402" stroke-dasharray="402.12 402.12" stroke-width="30" stroke="hsl(223,90%,50%)" r="64" class="pencil__body1"></circle>
			<circle transform="rotate(-90)" stroke-dashoffset="465" stroke-dasharray="464.96 464.96" stroke-width="10" stroke="hsl(223,90%,60%)" r="74" class="pencil__body2"></circle>
			<circle transform="rotate(-90)" stroke-dashoffset="339" stroke-dasharray="339.29 339.29" stroke-width="10" stroke="hsl(223,90%,40%)" r="54" class="pencil__body3"></circle>
		</g>
		<g transform="rotate(-90) translate(49,0)" class="pencil__eraser">
			<g class="pencil__eraser-skew">
				<rect height="30" width="30" ry="5" rx="5" fill="hsl(223,90%,70%)"></rect>
				<rect clip-path="url(#pencil-eraser)" height="30" width="5" fill="hsl(223,90%,60%)"></rect>
				<rect height="20" width="30" fill="hsl(223,10%,90%)"></rect>
				<rect height="20" width="15" fill="hsl(223,10%,70%)"></rect>
				<rect height="20" width="5" fill="hsl(223,10%,80%)"></rect>
				<rect height="2" width="30" y="6" fill="hsla(223,10%,10%,0.2)"></rect>
				<rect height="2" width="30" y="13" fill="hsla(223,10%,10%,0.2)"></rect>
			</g>
		</g>
		<g transform="rotate(-90) translate(49,-30)" class="pencil__point">
			<polygon points="15 0,30 30,0 30" fill="hsl(33,90%,70%)"></polygon>
			<polygon points="15 0,6 30,0 30" fill="hsl(33,90%,50%)"></polygon>
			<polygon points="15 0,20 10,10 10" fill="hsl(223,10%,10%)"></polygon>
		</g>
	</g>
</svg>
<style>
/* From Uiverse.io by gustavofusco - Tags: loader, pen */
.pencil {
  display: block;
  width: 10em;
  height: 10em;
}

.pencil__body1,
.pencil__body2,
.pencil__body3,
.pencil__eraser,
.pencil__eraser-skew,
.pencil__point,
.pencil__rotate,
.pencil__stroke {
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pencil__body1,
.pencil__body2,
.pencil__body3 {
  transform: rotate(-90deg);
}

.pencil__body1 {
  animation-name: pencilBody1;
}

.pencil__body2 {
  animation-name: pencilBody2;
}

.pencil__body3 {
  animation-name: pencilBody3;
}

.pencil__eraser {
  animation-name: pencilEraser;
  transform: rotate(-90deg) translate(49px,0);
}

.pencil__eraser-skew {
  animation-name: pencilEraserSkew;
  animation-timing-function: ease-in-out;
}

.pencil__point {
  animation-name: pencilPoint;
  transform: rotate(-90deg) translate(49px,-30px);
}

.pencil__rotate {
  animation-name: pencilRotate;
}

.pencil__stroke {
  animation-name: pencilStroke;
  transform: translate(100px,100px) rotate(-113deg);
}

/* Animations */
@keyframes pencilBody1 {
  from,
	to {
    stroke-dashoffset: 351.86;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 150.8;
 /* 3/8 of diameter */
    transform: rotate(-225deg);
  }
}

@keyframes pencilBody2 {
  from,
	to {
    stroke-dashoffset: 406.84;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 174.36;
    transform: rotate(-225deg);
  }
}

@keyframes pencilBody3 {
  from,
	to {
    stroke-dashoffset: 296.88;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 127.23;
    transform: rotate(-225deg);
  }
}

@keyframes pencilEraser {
  from,
	to {
    transform: rotate(-45deg) translate(49px,0);
  }

  50% {
    transform: rotate(0deg) translate(49px,0);
  }
}

@keyframes pencilEraserSkew {
  from,
	32.5%,
	67.5%,
	to {
    transform: skewX(0);
  }

  35%,
	65% {
    transform: skewX(-4deg);
  }

  37.5%, 
	62.5% {
    transform: skewX(8deg);
  }

  40%,
	45%,
	50%,
	55%,
	60% {
    transform: skewX(-15deg);
  }

  42.5%,
	47.5%,
	52.5%,
	57.5% {
    transform: skewX(15deg);
  }
}

@keyframes pencilPoint {
  from,
	to {
    transform: rotate(-90deg) translate(49px,-30px);
  }

  50% {
    transform: rotate(-225deg) translate(49px,-30px);
  }
}

@keyframes pencilRotate {
  from {
    transform: translate(100px,100px) rotate(0);
  }

  to {
    transform: translate(100px,100px) rotate(720deg);
  }
}

@keyframes pencilStroke {
  from {
    stroke-dashoffset: 439.82;
    transform: translate(100px,100px) rotate(-113deg);
  }

  50% {
    stroke-dashoffset: 164.93;
    transform: translate(100px,100px) rotate(-113deg);
  }

  75%,
	to {
    stroke-dashoffset: 439.82;
    transform: translate(100px,100px) rotate(112deg);
  }
}
</style>


================================================
FILE: loaders/harman-kanda_purple-falcon-85.html
================================================
<svg class="pl" width="128px" height="128px" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
  <circle class="pl__ring1" cx="64" cy="64" r="60" fill="none" stroke="hsl(3,90%,55%)" stroke-width="8" transform="rotate(-90,64,64)" stroke-linecap="round" stroke-dasharray="377 377" stroke-dashoffset="-376.4"></circle>
  <circle class="pl__ring2" cx="64" cy="64" r="52.5" fill="none" stroke="hsl(13,90%,55%)" stroke-width="7" transform="rotate(-90,64,64)" stroke-linecap="round" stroke-dasharray="329.9 329.9" stroke-dashoffset="-329.3"></circle>
  <circle class="pl__ring3" cx="64" cy="64" r="46" fill="none" stroke="hsl(23,90%,55%)" stroke-width="6" transform="rotate(-90,64,64)" stroke-linecap="round" stroke-dasharray="289 289" stroke-dashoffset="-288.6"></circle>
  <circle class="pl__ring4" cx="64" cy="64" r="40.5" fill="none" stroke="hsl(33,90%,55%)" stroke-width="5" transform="rotate(-90,64,64)" stroke-linecap="round" stroke-dasharray="254.5 254.5" stroke-dashoffset="-254"></circle>
  <circle class="pl__ring5" cx="64" cy="64" r="36" fill="none" stroke="hsl(43,90%,55%)" stroke-width="4" transform="rotate(-90,64,64)" stroke-linecap="round" stroke-dasharray="226.2 226.2" stroke-dashoffset="-225.8"></circle>
  <circle class="pl__ring6" cx="64" cy="64" r="32.5" fill="none" stroke="hsl(53,90%,55%)" stroke-width="3" transform="rotate(-90,64,64)" stroke-linecap="round" stroke-dasharray="204.2 204.2" stroke-dashoffset="-203.9"></circle>
</svg>
<style>
/* From Uiverse.io by harman-kanda - Tags: loader */
/* From cssbuttons.io by @harmankanda.github.io/New */

.pl {
 width: 5em;
 height: 5em;
}

.pl circle {
 transform-box: fill-box;
 transform-origin: 50% 50%;
}

.pl__ring1 {
 animation: ring1 4s 0s ease-in-out infinite;
}

.pl__ring2 {
 animation: ring2 4s 0.04s ease-in-out infinite;
}

.pl__ring3 {
 animation: ring3 4s 0.08s ease-in-out infinite;
}

.pl__ring4 {
 animation: ring4 4s 0.12s ease-in-out infinite;
}

.pl__ring5 {
 animation: ring5 4s 0.16s ease-in-out infinite;
}

.pl__ring6 {
 animation: ring6 4s 0.2s ease-in-out infinite;
}

/* Animations */
@keyframes ring1 {
 from {
  stroke-dashoffset: -376.237129776;
  transform: rotate(-0.25turn);
  animation-timing-function: ease-in;
 }

 23% {
  stroke-dashoffset: -94.247778;
  transform: rotate(1turn);
  animation-timing-function: ease-out;
 }

 46%, 50% {
  stroke-dashoffset: -376.237129776;
  transform: rotate(2.25turn);
  animation-timing-function: ease-in;
 }

 73% {
  stroke-dashoffset: -94.247778;
  transform: rotate(3.5turn);
  animation-timing-function: ease-out;
 }

 96%, to {
  stroke-dashoffset: -376.237129776;
  transform: rotate(4.75turn);
 }
}

@keyframes ring2 {
 from {
  stroke-dashoffset: -329.207488554;
  transform: rotate(-0.25turn);
  animation-timing-function: ease-in;
 }

 23% {
  stroke-dashoffset: -82.46680575;
  transform: rotate(1turn);
  animation-timing-function: ease-out;
 }

 46%, 50% {
  stroke-dashoffset: -329.207488554;
  transform: rotate(2.25turn);
  animation-timing-function: ease-in;
 }

 73% {
  stroke-dashoffset: -82.46680575;
  transform: rotate(3.5turn);
  animation-timing-function: ease-out;
 }

 96%, to {
  stroke-dashoffset: -329.207488554;
  transform: rotate(4.75turn);
 }
}

@keyframes ring3 {
 from {
  stroke-dashoffset: -288.4484661616;
  transform: rotate(-0.25turn);
  animation-timing-function: ease-in;
 }

 23% {
  stroke-dashoffset: -72.2566298;
  transform: rotate(1turn);
  animation-timing-function: ease-out;
 }

 46%, 50% {
  stroke-dashoffset: -288.4484661616;
  transform: rotate(2.25turn);
  animation-timing-function: ease-in;
 }

 73% {
  stroke-dashoffset: -72.2566298;
  transform: rotate(3.5turn);
  animation-timing-function: ease-out;
 }

 96%, to {
  stroke-dashoffset: -288.4484661616;
  transform: rotate(4.75turn);
 }
}

@keyframes ring4 {
 from {
  stroke-dashoffset: -253.9600625988;
  transform: rotate(-0.25turn);
  animation-timing-function: ease-in;
 }

 23% {
  stroke-dashoffset: -63.61725015;
  transform: rotate(1turn);
  animation-timing-function: ease-out;
 }

 46%, 50% {
  stroke-dashoffset: -253.9600625988;
  transform: rotate(2.25turn);
  animation-timing-function: ease-in;
 }

 73% {
  stroke-dashoffset: -63.61725015;
  transform: rotate(3.5turn);
  animation-timing-function: ease-out;
 }

 96%, to {
  stroke-dashoffset: -253.9600625988;
  transform: rotate(4.75turn);
 }
}

@keyframes ring5 {
 from {
  stroke-dashoffset: -225.7422778656;
  transform: rotate(-0.25turn);
  animation-timing-function: ease-in;
 }

 23% {
  stroke-dashoffset: -56.5486668;
  transform: rotate(1turn);
  animation-timing-function: ease-out;
 }

 46%, 50% {
  stroke-dashoffset: -225.7422778656;
  transform: rotate(2.25turn);
  animation-timing-function: ease-in;
 }

 73% {
  stroke-dashoffset: -56.5486668;
  transform: rotate(3.5turn);
  animation-timing-function: ease-out;
 }

 96%, to {
  stroke-dashoffset: -225.7422778656;
  transform: rotate(4.75turn);
 }
}

@keyframes ring6 {
 from {
  stroke-dashoffset: -203.795111962;
  transform: rotate(-0.25turn);
  animation-timing-function: ease-in;
 }

 23% {
  stroke-dashoffset: -51.05087975;
  transform: rotate(1turn);
  animation-timing-function: ease-out;
 }

 46%, 50% {
  stroke-dashoffset: -203.795111962;
  transform: rotate(2.25turn);
  animation-timing-function: ease-in;
 }

 73% {
  stroke-dashoffset: -51.05087975;
  transform: rotate(3.5turn);
  animation-timing-function: ease-out;
 }

 96%, to {
  stroke-dashoffset: -203.795111962;
  transform: rotate(4.75turn);
 }
}
</style>


================================================
FILE: loaders/hoi-du_dull-stingray-6.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by hoi-du - Tags: white, loading, loader, spinner, spin, css */
<!DOCTYPE html>
<html>
<head>
    <title>loading forever</title>
    <meta charset="utf-8">
    <style>
        body {
  background-color: black;
}

.loading {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: white;
  margin: 10px;
  border-radius: 0%;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: loadingAnimation;
}

@keyframes loadingAnimation {
  0% {
    border-radius: 50% 50% 50% 50%;
    transform: rotate(0deg);
  }

  12.5% {
    border-radius: 0% 50% 50% 50%;
  }

  25% {
    border-radius: 0% 0% 50% 50%;
    transform: rotate(90deg);
  }

  37.5% {
    border-radius: 0% 0% 0% 50%;
  }

  50% {
    border-radius: 0% 0% 0% 0%;
    transform: rotate(180deg);
  }

  62.5% {
    border-radius: 50% 0% 0% 0%;
  }

  75% {
    border-radius: 50% 50% 0% 0%;
    transform: rotate(270deg);
  }

  87.5% {
    border-radius: 50% 50% 50% 0%;
  }

  100% {
    border-radius: 50% 50% 50% 50%;
    transform: rotate(360deg);
  }
}

    </style>
</head>
<body>
    <span class="loading">

</body>
</html>
</style>


================================================
FILE: loaders/htwarriors108_massive-dodo-50.html
================================================
<div class="cube">
                <div class="cube__face" id="cube__face--front">
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                </div>

                <div class="cube__face" id="cube__face--back">
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                </div>

                <div class="cube__face" id="cube__face--right">
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                </div>

                <div class="cube__face" id="cube__face--left">
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                </div>

                <div class="cube__face" id="cube__face--top">
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                </div>

                <div class="cube__face" id="cube__face--bottom">
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                    <span class="faceBox"></span>
                </div>
            </div>
<style>
/* From Uiverse.io by htwarriors108 - Tags: animation, 3d, loader, cube, rotate, animated, color, hover effect, css effect, rubik's cube */
.cube {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  animation: animate 4s linear infinite;
  cursor: pointer;
  transition: 0.5s;
}

.cube:hover {
  scale: 1.2;
  animation: animate 3s linear infinite;
}

.cube__face {
  position: absolute;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.faceBox {
  border: calc(100px / 1000) solid rgba(0, 0, 0, 0.8);
  width: calc(100px / 3);
  height: calc(100px / 3);
  opacity: 1;
}

#cube__face--front span {
  background-color: #FF4949;
}

#cube__face--right span {
  background-color: #13CE66;
}

#cube__face--left span {
  background-color: #2D8EFF;
}

#cube__face--top span {
  background-color: #FFCC3D;
}

#cube__face--bottom span {
  background-color: #fefefe;
}

#cube__face--back span {
  background-color: #f1f03e;
}

#cube__face--front {
  transform: rotateY(0deg) translateZ(calc(100px / 2));
}

#cube__face--right {
  transform: rotateY(90deg) translateZ(calc(100px / 2));
}

#cube__face--back {
  transform: rotateY(180deg) translateZ(calc(100px / 2));
}

#cube__face--left {
  transform: rotateY(-90deg) translateZ(calc(100px / 2));
}

#cube__face--top {
  transform: rotateX(90deg) translateZ(calc(100px / 2));
}

#cube__face--bottom {
  transform: rotateX(-90deg) translateZ(calc(100px / 2));
}

@keyframes animate {
  0% {
    transform: rotateX(-30deg) rotateY(0deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(-30deg) rotateY(360deg) rotateZ(360deg);
  }
}
</style>


================================================
FILE: loaders/iamrippon_quiet-hound-73.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by iamrippon  - Tags: loader */
.loader {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, #03dac6, #6200ea);
  border: 8px solid transparent;
  border-top-color: #03dac6;
  border-bottom-color: #6200ea;
  animation: spin 2s linear infinite;
}

.loader::before {
  content: "1";
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  color: white;
  animation: count 10s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes count {
  0% {
    content: "1";
  }
  1% {
    content: "2";
  }
  2% {
    content: "3";
  }
  3% {
    content: "4";
  }
  4% {
    content: "5";
  }
  5% {
    content: "6";
  }
  6% {
    content: "7";
  }
  7% {
    content: "8";
  }
  8% {
    content: "9";
  }
  9% {
    content: "10";
  }
  10% {
    content: "11";
  }
  11% {
    content: "12";
  }
  12% {
    content: "13";
  }
  13% {
    content: "14";
  }
  14% {
    content: "15";
  }
  15% {
    content: "16";
  }
  16% {
    content: "17";
  }
  17% {
    content: "18";
  }
  18% {
    content: "19";
  }
  19% {
    content: "20";
  }
  20% {
    content: "21";
  }
  21% {
    content: "22";
  }
  22% {
    content: "23";
  }
  23% {
    content: "24";
  }
  24% {
    content: "25";
  }
  25% {
    content: "26";
  }
  26% {
    content: "27";
  }
  27% {
    content: "28";
  }
  28% {
    content: "29";
  }
  29% {
    content: "30";
  }
  30% {
    content: "31";
  }
  31% {
    content: "32";
  }
  32% {
    content: "33";
  }
  33% {
    content: "34";
  }
  34% {
    content: "35";
  }
  35% {
    content: "36";
  }
  36% {
    content: "37";
  }
  37% {
    content: "38";
  }
  38% {
    content: "39";
  }
  39% {
    content: "40";
  }
  40% {
    content: "41";
  }
  41% {
    content: "42";
  }
  42% {
    content: "43";
  }
  43% {
    content: "44";
  }
  44% {
    content: "45";
  }
  45% {
    content: "46";
  }
  46% {
    content: "47";
  }
  47% {
    content: "48";
  }
  48% {
    content: "49";
  }
  49% {
    content: "50";
  }
  50% {
    content: "51";
  }
  51% {
    content: "52";
  }
  52% {
    content: "53";
  }
  53% {
    content: "54";
  }
  54% {
    content: "55";
  }
  55% {
    content: "56";
  }
  56% {
    content: "57";
  }
  57% {
    content: "58";
  }
  58% {
    content: "59";
  }
  59% {
    content: "60";
  }
  60% {
    content: "61";
  }
  61% {
    content: "62";
  }
  62% {
    content: "63";
  }
  63% {
    content: "64";
  }
  64% {
    content: "65";
  }
  65% {
    content: "66";
  }
  66% {
    content: "67";
  }
  67% {
    content: "68";
  }
  68% {
    content: "69";
  }
  69% {
    content: "70";
  }
  70% {
    content: "71";
  }
  71% {
    content: "72";
  }
  72% {
    content: "73";
  }
  73% {
    content: "74";
  }
  74% {
    content: "75";
  }
  75% {
    content: "76";
  }
  76% {
    content: "77";
  }
  77% {
    content: "78";
  }
  78% {
    content: "79";
  }
  79% {
    content: "80";
  }
  80% {
    content: "81";
  }
  81% {
    content: "82";
  }
  82% {
    content: "83";
  }
  83% {
    content: "84";
  }
  84% {
    content: "85";
  }
  85% {
    content: "86";
  }
  86% {
    content: "87";
  }
  87% {
    content: "88";
  }
  88% {
    content: "89";
  }
  89% {
    content: "90";
  }
  90% {
    content: "91";
  }
  91% {
    content: "92";
  }
  92% {
    content: "93";
  }
  93% {
    content: "94";
  }
  94% {
    content: "95";
  }
  95% {
    content: "96";
  }
  96% {
    content: "97";
  }
  97% {
    content: "98";
  }
  98% {
    content: "99";
  }
  99% {
    content: "100";
  }
  100% {
    content: "1";
  }
}

</style>
    

================================================
FILE: loaders/ibrahimjlidi_tasty-impala-53.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by ibrahimjlidi - Source: alexruix/white-cat-50 - Tags: loader, 3d loader */
.loader {
  width: 48px;
  height: 48px;
  margin: auto;
  position: relative;
}

.loader:before {
  content: '';
  width: 48px;
  height: 5px;
  background: #253050;
  position: absolute;
  top: 60px;
  left: 0;
  border-radius: 50%;
  animation: shadow324 0.5s linear infinite;
}

.loader:after {
  content: '';
  width: 100%;
  height: 100%;
  background: #044080;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 40px;
  animation: jump7456 0.5s linear infinite;
}

@keyframes jump7456 {
  15% {
    border-bottom-right-radius: px;
  }

  25% {
    transform: translateY(15px) rotate(22.5deg);
  }

  50% {
    transform: translateY(17px) scale(1, .9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }

  75% {
    transform: translateY(4px) rotate(50.5deg);
  }

  100% {
    transform: translateY(4) rotate(90deg);
  }
}

@keyframes shadow324 {

  0%,
    100% {
    transform: scale(2, 2);
  }

  50% {
    transform: scale(2, );
  }
}
</style>


================================================
FILE: loaders/isfan4ik_fuzzy-badger-100.html
================================================


   <div class="loader">
      <div class="container">
      <div class="coffee-header">
        <div class="coffee-header__buttons coffee-header__button-one"></div>
        <div class="coffee-header__buttons coffee-header__button-two"></div>
        <div class="coffee-header__display"></div>
        <div class="coffee-header__details"></div>
      </div>
      <div class="coffee-medium">
        <div class="coffe-medium__exit"></div>
        <div class="coffee-medium__arm"></div>
        <div class="coffee-medium__liquid"></div>
        <div class="coffee-medium__smoke coffee-medium__smoke-one"></div>
        <div class="coffee-medium__smoke coffee-medium__smoke-two"></div>
        <div class="coffee-medium__smoke coffee-medium__smoke-three"></div>
        <div class="coffee-medium__smoke coffee-medium__smoke-for"></div>
        <div class="coffee-medium__cup"></div>
      </div>
      <div class="coffee-footer"></div>
    </div>
   </div>


<style>
/* From Uiverse.io by isfan4ik - Tags: material design, animation, login, loader */
.loader {
}

.container {
  width: 300px;
  height: 280px;
  position: absolute;
  top: calc(50% - 140px);
  left: calc(50% - 150px);
}

.coffee-header {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ddcfcc;
  border-radius: 10px;
}

.coffee-header__buttons {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 25px;
  background-color: #282323;
  border-radius: 50%;
}

.coffee-header__buttons::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: -8px;
  left: calc(50% - 4px);
  background-color: #615e5e;
}

.coffee-header__button-one {
  left: 15px;
}

.coffee-header__button-two {
  left: 50px;
}

.coffee-header__display {
  width: 50px;
  height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  border-radius: 50%;
  background-color: #9acfc5;
  border: 5px solid #43beae;
  box-sizing: border-box;
}

.coffee-header__details {
  width: 8px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #9b9091;
  box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091;
}

.coffee-medium {
  width: 90%;
  height: 160px;
  position: absolute;
  top: 80px;
  left: calc(50% - 45%);
  background-color: #bcb0af;
}

.coffee-medium:before {
  content: "";
  width: 90%;
  height: 100px;
  background-color: #776f6e;
  position: absolute;
  bottom: 0;
  left: calc(50% - 45%);
  border-radius: 20px 20px 0 0;
}

.coffe-medium__exit {
  width: 60px;
  height: 20px;
  position: absolute;
  top: 0;
  left: calc(50% - 30px);
  background-color: #231f20;
}

.coffe-medium__exit::before {
  content: "";
  width: 50px;
  height: 20px;
  border-radius: 0 0 50% 50%;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 25px);
  background-color: #231f20;
}

.coffe-medium__exit::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: -30px;
  left: calc(50% - 5px);
  background-color: #231f20;
}

.coffee-medium__arm {
  width: 70px;
  height: 20px;
  position: absolute;
  top: 15px;
  right: 25px;
  background-color: #231f20;
}

.coffee-medium__arm::before {
  content: "";
  width: 15px;
  height: 5px;
  position: absolute;
  top: 7px;
  left: -15px;
  background-color: #9e9495;
}

.coffee-medium__cup {
  width: 80px;
  height: 47px;
  position: absolute;
  bottom: 0;
  left: calc(50% - 40px);
  background-color: #FFF;
  border-radius: 0 0 70px 70px / 0 0 110px 110px;
}

.coffee-medium__cup::after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 6px;
  right: -13px;
  border: 5px solid #FFF;
  border-radius: 50%;
}

@keyframes liquid {
  0% {
    height: 0px;
    opacity: 1;
  }

  5% {
    height: 0px;
    opacity: 1;
  }

  20% {
    height: 62px;
    opacity: 1;
  }

  95% {
    height: 62px;
    opacity: 1;
  }

  100% {
    height: 62px;
    opacity: 0;
  }
}

.coffee-medium__liquid {
  width: 6px;
  height: 63px;
  opacity: 0;
  position: absolute;
  top: 50px;
  left: calc(50% - 3px);
  background-color: #74372b;
  animation: liquid 4s 4s linear infinite;
}

.coffee-medium__smoke {
  width: 8px;
  height: 20px;
  position: absolute;
  border-radius: 5px;
  background-color: #b3aeae;
}

@keyframes smokeOne {
  0% {
    bottom: 20px;
    opacity: 0;
  }

  40% {
    bottom: 50px;
    opacity: .5;
  }

  80% {
    bottom: 80px;
    opacity: .3;
  }

  100% {
    bottom: 80px;
    opacity: 0;
  }
}

@keyframes smokeTwo {
  0% {
    bottom: 40px;
    opacity: 0;
  }

  40% {
    bottom: 70px;
    opacity: .5;
  }

  80% {
    bottom: 80px;
    opacity: .3;
  }

  100% {
    bottom: 80px;
    opacity: 0;
  }
}

.coffee-medium__smoke-one {
  opacity: 0;
  bottom: 50px;
  left: 102px;
  animation: smokeOne 3s 4s linear infinite;
}

.coffee-medium__smoke-two {
  opacity: 0;
  bottom: 70px;
  left: 118px;
  animation: smokeTwo 3s 5s linear infinite;
}

.coffee-medium__smoke-three {
  opacity: 0;
  bottom: 65px;
  right: 118px;
  animation: smokeTwo 3s 6s linear infinite;
}

.coffee-medium__smoke-for {
  opacity: 0;
  bottom: 50px;
  right: 102px;
  animation: smokeOne 3s 5s linear infinite;
}

.coffee-footer {
  width: 95%;
  height: 15px;
  position: absolute;
  bottom: 25px;
  left: calc(50% - 47.5%);
  background-color: #41bdad;
  border-radius: 10px;
}

.coffee-footer::after {
  content: "";
  width: 106%;
  height: 26px;
  position: absolute;
  bottom: -25px;
  left: -8px;
  background-color: #000;
}
 
}
</style>


================================================
FILE: loaders/isfan4ik_nice-mouse-77.html
================================================

   <svg class="svg">
      <path class="path"></path>
   </svg>
   <svg>
      <path></path>
   </svg>


<style>
/* From Uiverse.io by isfan4ik - Tags: red, green, pink, loader, effect loader, loading animation */
.body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg {
  position: absolute;
  width: 400px;
  fill: none;
}

.svg:nth-child(2) {
  filter: blur(40px);
}

.svg path {
  d: path("M0,25 C150,110 150, -60 300,25");
  stroke: #ff0092;
  stroke-width: 50;
  stroke-linecap: round;
  transform: translate(50px,50%);
  animation: animate 2s ease-in-out infinite;
}

@keyframes animate {
  0% {
    stroke: greenyellow;
    stroke: #ff0092;
    d: path("M0,25 C150,110 150, -60 300,25");
  }

  50% {
    stroke: dodgerblue;
    stroke: #00ff00;
    d: path("M0,25 C160,-50 140, 110 300,25");
  }
}
</style>


================================================
FILE: loaders/jack0237_modern-quail-99.html
================================================
<div class="loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<style>
/* From Uiverse.io by jack0237  - Tags:  */
.loader {
  display: flex;
}

.loader .dot {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid #e8e8e8;
  background: #16b0c1;
  animation: jump 0.8s ease-in-out infinite alternate;
}

@keyframes jump {
  100% {
    background: #661e92;
    transform: translateY(-3rem) scale(1.9);
  }
}

.loader .dot:nth-child(1) {
  animation-delay: 0.1s;
}

.loader .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.loader .dot:nth-child(3) {
  animation-delay: 0.3s;
}

.loader .dot:nth-child(4) {
  animation-delay: 0.4s;
}

.loader .dot:nth-child(5) {
  animation-delay: 0.5s;
}

</style>
    

================================================
FILE: loaders/jamik-dev_giant-duck-87.html
================================================
<div class="cube">
  <div class="cube_item cube_x"></div>
  <div class="cube_item cube_y"></div>
  <div class="cube_item cube_y"></div>
  <div class="cube_item cube_x"></div>
</div>

<style>
/* From Uiverse.io by jamik-dev  - Tags: loader, smooth, cube, modern, animated */
.cube {
  height: 80px;
  width: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cube_item {
  height: 40px;
  width: 40px;
  border-radius: 10px;
  transition: all 0.2s ease-in;
}

.cube_x {
  background-color: blueviolet;
  animation: animateLoaders 1s infinite;
}

.cube_y {
  background-color: aqua;
  animation: animateLoaders 1s 0.5s infinite;
}

@keyframes animateLoaders {
  0% {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(0.8);
  }
}

</style>
    

================================================
FILE: loaders/jeremyssocial_curvy-walrus-79.html
================================================
<div class="hacker-loader">
  <div class="loader-text">
    <span data-text="Initializing..." class="text-glitch">Initializing...</span>
  </div>
  <div class="loader-bar">
    <div class="bar-fill"></div>
    <div class="bar-glitch"></div>
  </div>
  <div class="particles">
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
  </div>
</div>

<style>
/* From Uiverse.io by jeremyssocial  - Tags: animation, green, black, loader, animated, css effect, cool card, loading animation */
.hacker-loader {
  position: relative;
  width: 24em;
  height: 6em;
  background-color: #0a0a0a;
  border: 0.2em solid #00ff00;
  border-radius: 0.5em;
  padding: 1em;
  overflow: hidden;
  box-shadow: 0 0 1em rgba(0, 255, 0, 0.3);
}

.loader-text {
  text-align: center;
  margin-bottom: 1em;
}

.text-glitch {
  color: #00ff00;
  font-family: monospace;
  font-size: 1.5em;
  position: relative;
  display: inline-block;
}

.text-glitch::before,
.text-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0a0a0a;
  clip: rect(0, 0, 0, 0);
}

.text-glitch::before {
  left: -0.1em;
  text-shadow: 0.1em 0 #ff00ff;
  animation: glitch-effect 3s infinite linear alternate-reverse;
}

.text-glitch::after {
  left: 0.1em;
  text-shadow: -0.1em 0 #00ffff;
  animation: glitch-effect 2s infinite linear alternate-reverse;
}

.loader-bar {
  width: 100%;
  height: 0.5em;
  background-color: #003300;
  border-radius: 0.25em;
  position: relative;
  overflow: hidden;
}

.bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #00ff00;
  animation: bar-fill-animation 2s infinite ease-in-out;
}

.bar-glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(0, 255, 0, 0.2),
    transparent
  );
  background-size: 200% 200%;
  animation: bar-glitch-animation 2s infinite linear;
}

.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 0.2em;
  height: 0.2em;
  background-color: #00ff00;
  border-radius: 50%;
  opacity: 0;
  animation: particle-animation 2s infinite linear;
}

.particle:nth-child(1) {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.particle:nth-child(2) {
  top: 30%;
  left: 60%;
  animation-delay: 0.5s;
}

.particle:nth-child(3) {
  top: 70%;
  left: 30%;
  animation-delay: 1s;
}

.particle:nth-child(4) {
  top: 90%;
  left: 90%;
  animation-delay: 1.5s;
}

.particle:nth-child(5) {
  top: 50%;
  left: 50%;
  animation-delay: 2s;
}

@keyframes glitch-effect {
  0% {
    clip: rect(42px, 9999px, 44px, 0);
  }
  5% {
    clip: rect(12px, 9999px, 59px, 0);
  }
  10% {
    clip: rect(48px, 9999px, 29px, 0);
  }
  15.0% {
    clip: rect(42px, 9999px, 73px, 0);
  }
  20% {
    clip: rect(63px, 9999px, 27px, 0);
  }
  25% {
    clip: rect(34px, 9999px, 55px, 0);
  }
  30.0% {
    clip: rect(86px, 9999px, 73px, 0);
  }
  35% {
    clip: rect(20px, 9999px, 20px, 0);
  }
  40% {
    clip: rect(26px, 9999px, 60px, 0);
  }
  45% {
    clip: rect(25px, 9999px, 66px, 0);
  }
  50% {
    clip: rect(57px, 9999px, 98px, 0);
  }
  55.0% {
    clip: rect(5px, 9999px, 46px, 0);
  }
  60.0% {
    clip: rect(82px, 9999px, 31px, 0);
  }
  65% {
    clip: rect(54px, 9999px, 27px, 0);
  }
  70% {
    clip: rect(28px, 9999px, 99px, 0);
  }
  75% {
    clip: rect(45px, 9999px, 69px, 0);
  }
  80% {
    clip: rect(23px, 9999px, 85px, 0);
  }
  85.0% {
    clip: rect(54px, 9999px, 84px, 0);
  }
  90% {
    clip: rect(45px, 9999px, 47px, 0);
  }
  95% {
    clip: rect(37px, 9999px, 20px, 0);
  }
  100% {
    clip: rect(4px, 9999px, 91px, 0);
  }
}

@keyframes bar-fill-animation {
  0%,
  100% {
    width: 0;
  }
  50% {
    width: 100%;
  }
}

@keyframes bar-glitch-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes particle-animation {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(2em, 2em);
  }
}

</style>
    

================================================
FILE: loaders/jeremyssocial_great-horse-35.html
================================================
<div class="loader-container">
  <div class="loader-cube">
    <div class="loader-side front"></div>
    <div class="loader-side back"></div>
    <div class="loader-side left"></div>
    <div class="loader-side right"></div>
    <div class="loader-side top"></div>
    <div class="loader-side bottom"></div>
  </div>
</div>

<style>
/* From Uiverse.io by jeremyssocial  - Tags: 3d, hover, loader, cube, click, hover effect, click effect, 3d loader */
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10em;
  perspective: 800px;
}

.loader-cube {
  position: relative;
  width: 5em;
  height: 5em;
  transform-style: preserve-3d;
  animation: rotateCube 2s infinite linear;
}

.loader-side {
  position: absolute;
  width: 5em;
  height: 5em;
  background: #333; /* Custom property for theming */
  border: 0.1em solid #fff; /* Relative sizing for border */
}

.front {
  transform: translateZ(2.5em);
}
.back {
  transform: rotateY(180deg) translateZ(2.5em);
}
.right {
  transform: rotateY(90deg) translateZ(2.5em);
}
.left {
  transform: rotateY(-90deg) translateZ(2.5em);
}
.top {
  transform: rotateX(90deg) translateZ(2.5em);
}
.bottom {
  transform: rotateX(-90deg) translateZ(2.5em);
}

/* Keyframes for continuous rotation */
@keyframes rotateCube {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/* Interactive states using pseudo-classes */
.loader-side:hover {
  background: #555; /* Darker shade on hover */
}

.loader-side:focus {
  border: 0.1em solid #999; /* Different border color on focus */
}

.loader-side:active {
  opacity: 0.8; /* Slight transparency on active */
}

</style>
    

================================================
FILE: loaders/jeremyssocial_helpless-chipmunk-98.html
================================================
<div class="cube-loader">
  <div class="cube cube1"></div>
  <div class="cube cube2"></div>
  <div class="cube cube3"></div>
  <div class="cube cube4"></div>
</div>

<style>
/* From Uiverse.io by jeremyssocial  - Tags: animation, loader, cube, light&dark, loading animation, 3d loader */
.cube-loader {
  position: relative;
  width: 40px;
  height: 40px;
  margin: auto;
}

.cube {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #333;
  border: 2px solid #fff;
  animation: foldCube 2.4s infinite linear;
}

/* Individual cube positioning */
.cube1 {
  top: 0;
  left: 0;
  transform-origin: 100% 100%;
}
.cube2 {
  top: 0;
  right: 0;
  transform-origin: 0 100%;
}
.cube3 {
  bottom: 0;
  right: 0;
  transform-origin: 0 0;
}
.cube4 {
  bottom: 0;
  left: 0;
  transform-origin: 100% 0;
}

/* Keyframes for the folding animation */
@keyframes foldCube {
  0%,
  10% {
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

/* Animation delay for each cube */
.cube1 {
  animation-delay: 0.3s;
}
.cube2 {
  animation-delay: 0.6s;
}
.cube3 {
  animation-delay: 0.9s;
}
.cube4 {
  animation-delay: 1.2s;
}

</style>
    

================================================
FILE: loaders/jeremyssocial_ordinary-baboon-49.html
================================================
<div class="terminal">
  <div class="terminal-header">
    <div class="buttons">
      <span class="close"></span>
      <span class="minimize"></span>
      <span class="maximize"></span>
    </div>
    <div class="title">Status</div>
  </div>
  <div class="terminal-body">
    <div class="terminal-loader">
      <span class="loader-text">Loading</span>
      <span id="dot1" class="dot">.</span>
      <span id="dot2" class="dot">.</span>
      <span id="dot3" class="dot">.</span>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by jeremyssocial  - Tags: loader, dark, code */
/* Terminal Window */
.terminal {
  width: 500px;
  background-color: #000;
  color: #0f0;
  font-family: "Courier New", Courier, monospace;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

/* Terminal Header */
.terminal-header {
  background-color: #333;
  padding: 5px;
  display: flex;
  align-items: center;
  color: #fff;
}

.buttons {
  display: flex;
  margin-right: 15px;
}

.buttons span {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.close {
  background-color: #ff605c;
}
.minimize {
  background-color: #ffbd44;
}
.maximize {
  background-color: #00ca4e;
}

.title {
  flex-grow: 1;
  text-align: center;
}

/* Terminal Body */
.terminal-body {
  padding: 10px;
}

.terminal-loader {
  display: inline-flex;
  align-items: center;
}

.loader-text {
  margin-right: 5px;
}

.dot {
  opacity: 0;
  animation: dotFadeInOut 1.5s infinite;
}

@keyframes dotFadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

#dot1 {
  animation-delay: 0.5s;
}

#dot2 {
  animation-delay: 0.6s;
}

#dot3 {
  animation-delay: 0.7s;
}

</style>
    

================================================
FILE: loaders/jeremyssocial_rude-shrimp-72.html
================================================
<div class="milk-loader">
  <div class="glass">
    <div class="milk"></div>
  </div>
</div>

<style>
/* From Uiverse.io by jeremyssocial  - Tags: animation, white, loader, effect loader */
.milk-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.glass {
  position: relative;
  width: 100px;
  height: 150px;
  background-color: transparent;
  border: 3px solid #666;
  border-radius: 10px 10px 35px 35px;
  overflow: hidden;
}

.milk {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0;
  background-color: #fff;
  border-radius: 5px 5px 30px 30px;
  animation: fillMilk 2s ease-in-out infinite;
}

/* Keyframes to animate the milk in a non-uniform way, simulating a filling glass */
@keyframes fillMilk {
  0%,
  100% {
    height: 10%;
    border-radius: 5px 5px 30px 30px;
  }
  50% {
    height: 80%;
    border-radius: 25px;
  }
}

</style>
    

================================================
FILE: loaders/jeremyssocial_ugly-bullfrog-62.html
================================================
<div class="terminal-loader">
  <div class="terminal-header">
    <div class="terminal-title">Status</div>
    <div class="terminal-controls">
      <div class="control close"></div>
      <div class="control minimize"></div>
      <div class="control maximize"></div>
    </div>
  </div>
  <div class="text">Loading...</div>
</div>

<style>
/* From Uiverse.io by jeremyssocial  - Tags: animation, loader, code, text animation, animated, light&dark, loading animation */
@keyframes blinkCursor {
  50% {
    border-right-color: transparent;
  }
}

@keyframes typeAndDelete {
  0%,
  10% {
    width: 0;
  }
  45%,
  55% {
    width: 6.2em;
  } /* adjust width based on content */
  90%,
  100% {
    width: 0;
  }
}

.terminal-loader {
  border: 0.1em solid #333;
  background-color: #1a1a1a;
  color: #0f0;
  font-family: "Courier New", Courier, monospace;
  font-size: 1em;
  padding: 1.5em 1em;
  width: 12em;
  margin: 100px auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.terminal-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5em;
  background-color: #333;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 0 0.4em;
  box-sizing: border-box;
}

.terminal-controls {
  float: right;
}

.control {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.4em;
  border-radius: 50%;
  background-color: #777;
}

.control.close {
  background-color: #e33;
}

.control.minimize {
  background-color: #ee0;
}

.control.maximize {
  background-color: #0b0;
}

.terminal-title {
  float: left;
  line-height: 1.5em;
  color: #eee;
}

.text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 0.2em solid green; /* Cursor */
  animation: typeAndDelete 4s steps(11) infinite,
    blinkCursor 0.5s step-end infinite alternate;
  margin-top: 1.5em;
}

</style>
    

================================================
FILE: loaders/kennyotsu_fresh-lizard-20.html
================================================
<div class="card">
  <div class="loader">
    <p>loading</p>
    <div class="words">
      <span class="word">buttons</span>
      <span class="word">forms</span>
      <span class="word">switches</span>
      <span class="word">cards</span>
      <span class="word">buttons</span>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by kennyotsu - Tags: simple */
.card {
  /* color used to softly clip top and bottom of the .words container */
  --bg-color: #212121;
  background-color: var(--bg-color);
  padding: 1rem 2rem;
  border-radius: 1.25rem;
}
.loader {
  color: rgb(124, 124, 124);
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 8px;
}

.words {
  overflow: hidden;
  position: relative;
}
.words::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--bg-color) 10%,
    transparent 30%,
    transparent 70%,
    var(--bg-color) 90%
  );
  z-index: 20;
}

.word {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #956afa;
  animation: spin_4991 4s infinite;
}

@keyframes spin_4991 {
  10% {
    -webkit-transform: translateY(-102%);
    transform: translateY(-102%);
  }

  25% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  35% {
    -webkit-transform: translateY(-202%);
    transform: translateY(-202%);
  }

  50% {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%);
  }

  60% {
    -webkit-transform: translateY(-302%);
    transform: translateY(-302%);
  }

  75% {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
  }

  85% {
    -webkit-transform: translateY(-402%);
    transform: translateY(-402%);
  }

  100% {
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%);
  }
}

</style>


================================================
FILE: loaders/kerolos23_ancient-lizard-27.html
================================================
<div class="loader">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
/* From Uiverse.io by kerolos23 - Tags: loader */
.loader {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.loader div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #c517f0;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loader div:nth-child(1) {
  left: 8px;
  animation: flip1 0.6s infinite;
}

.loader div:nth-child(2) {
  left: 8px;
  animation: flip2 0.6s infinite;
}

.loader div:nth-child(3) {
  left: 32px;
  animation: flip2 0.6s infinite;
}

.loader div:nth-child(4) {
  left: 56px;
  animation: flip3 0.6s infinite;
}

@keyframes flip1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes flip3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes flip2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}

</style>


================================================
FILE: loaders/kerolos23_curvy-dingo-26.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by kerolos23 - Tags: loader */
.loader {
  width: 53px;
  height: 53px;
  border: 5px dotted #000;
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 2s linear infinite;
}

.loader::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 4px dotted #F00;
  border-style: solid solid dotted;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  animation: rotationBack 1s linear infinite;
  transform-origin: center center;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
} 
</style>


================================================
FILE: loaders/kerolos23_smooth-wombat-54.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by kerolos23 - Tags: loader, animated, circle loader */
.loader {
  transform: rotateZ(45deg);
  perspective: 1000px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: #91ff00;
}

.loader:before,
.loader:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: 1s spin linear infinite;
}

.loader:after {
  color: #FF3D00;
  transform: rotateY(70deg);
  animation-delay: .4s;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

@keyframes rotateccw {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes spin {
  0%,
  100% {
    box-shadow: .2em 0px 0 0px currentcolor;
  }

  12% {
    box-shadow: .2em .2em 0 0 currentcolor;
  }

  25% {
    box-shadow: 0 .2em 0 0px currentcolor;
  }

  37% {
    box-shadow: -.2em .2em 0 0 currentcolor;
  }

  50% {
    box-shadow: -.2em 0 0 0 currentcolor;
  }

  62% {
    box-shadow: -.2em -.2em 0 0 currentcolor;
  }

  75% {
    box-shadow: 0px -.2em 0 0 currentcolor;
  }

  87% {
    box-shadow: .2em -.2em 0 0 currentcolor;
  }
}
   
</style>


================================================
FILE: loaders/krlozCJ_horrible-fish-14.html
================================================
<div class="loader">
    <div class="orbe" style="--index: 0"></div>
    <div class="orbe" style="--index: 1"></div>
    <div class="orbe" style="--index: 2"></div>
    <div class="orbe" style="--index: 3"></div>
    <div class="orbe" style="--index: 4"></div>
</div>
<style>
/* From Uiverse.io by krlozCJ - Tags: loader */
.loader {
  --size-loader: 50px;
  --size-orbe: 10px;
  width: var(--size-loader);
  height: var(--size-loader);
  position: relative;
  transform: rotate(45deg);
}

.orbe {
  position: absolute;
  width: 100%;
  height: 100%;
  --delay: calc(var(--index) * 0.1s);
  animation: orbit7456 ease-in-out 1.5s var(--delay) infinite;
  opacity: calc(1 - calc(0.2 * var(--index)));
}

.orbe::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: var(--size-orbe);
  height: var(--size-orbe);
  background-color: #3ae374;
  box-shadow: 0px 0px 20px 2px #3ae374;
  border-radius: 50%;
}

@keyframes orbit7456 {
  0% {
  }

  80% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/lenin55_sour-chipmunk-96.html
================================================
<div class="ui-loader loader-blk">
    <svg viewBox="22 22 44 44" class="multiColor-loader">
        <circle cx="44" cy="44" r="20.2" fill="none" stroke-width="3.6" class="loader-circle loader-circle-animation"></circle>
    </svg>
</div>
<style>
/* From Uiverse.io by lenin55 - Tags: material design, loader */
/* //codelessly loader style */
.ui-loader {
  display: inline-block;
  width: 50px;
  height: 50px;
}

.loader-blk {
  color: #3f51b5;
  animation: rotate-outer08 1.4s linear infinite;
}

.multiColor-loader {
  display: block;
  animation: color-anim08 1.4s infinite;
}

.loader-circle {
  stroke: currentColor;
}

.MuiCircularProgress-circleStatic {
  transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

.loader-circle-animation {
  animation: rotate-inner08 1.4s ease-in-out
    infinite;
  stroke-dasharray: 80px, 200px;
  stroke-dashoffset: 0;
}

@keyframes rotate-outer08 {
  0% {
    transform-origin: 50% 50%;
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-inner08 {
  0% {
    stroke-dasharray: 1px, 200px;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -15px;
  }

  100% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -125px;
  }
}

@keyframes color-anim08 {
  0% {
    color: #4285f4;
  }

  25% {
    color: #ea4335;
  }

  50% {
    color: #f9bb2d;
  }

  75% {
    color: #34a853;
  }
}

</style>


================================================
FILE: loaders/lesimpleliott_purple-dragon-56.html
================================================
<div class="loader">
  <div class="loader__balls">
    <div class="loader__balls__group">
      <div class="ball item1"></div>
      <div class="ball item1"></div>
      <div class="ball item1"></div>
    </div>
    <div class="loader__balls__group">
      <div class="ball item2"></div>
      <div class="ball item2"></div>
      <div class="ball item2"></div>
    </div>
    <div class="loader__balls__group">
      <div class="ball item3"></div>
      <div class="ball item3"></div>
      <div class="ball item3"></div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by lesimpleliott  - Tags: loader, ball, funny, jump */
.loader__balls {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.loader__balls__group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  height: 100px;
  width: 40px;
}
.ball {
  height: 30px;
  width: 30px;
  border-radius: 15px;
  position: absolute;
  transform-origin: bottom;
}

/* ANIMATION BALL 1*/
.loader__balls__group :nth-child(1) {
  background-color: #99e2d0;
  animation-name: jumpinBallAnimation1;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
}
@keyframes jumpinBallAnimation1 {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  10% {
    transform: translateY(0) scale(1.3, 0.8);
  }
  11% {
    transform: translateY(0) scale(0.7, 1.2);
    animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
  }
  39% {
    transform: translateY(-75px) scale(1);
    animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
  }
  40% {
    transform: translateY(-75px) scale(1);
  }
  41% {
    transform: translateY(-75px) scale(1);
    animation-timing-function: cubic-bezier(1, 0, 1, 0);
  }
  69% {
    transform: translateY(0px) scale(1, 1);
    animation-timing-function: cubic-bezier(1, 0, 1, 0);
  }
  70% {
    transform: translateY(0) scale(1.5, 0.4);
  }
  80% {
    transform: translateY(0) scale(0.8, 1.2);
  }
  90% {
    transform: translateY(0) scale(1.1, 0.8);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

/* ANIMATION BALL 2*/
.loader__balls__group :nth-child(2) {
  background-color: #ff79da;
  animation-name: jumpinBallAnimation2;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
}
@keyframes jumpinBallAnimation2 {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  10% {
    transform: translateY(0) scale(1.3, 0.8);
  }
  11% {
    transform: translateY(0) scale(0.7, 1.2);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
  39% {
    transform: translateY(-75px) scale(1);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
  40% {
    transform: translateY(-75px) scale(1);
  }
  41% {
    transform: translateY(-75px) scale(1);
    animation-timing-function: cubic-bezier(1, 0, 1, 0.5);
  }
  69% {
    transform: translateY(0px) scale(1, 1);
    animation-timing-function: cubic-bezier(1, 0, 1, 0.5);
  }
  70% {
    transform: translateY(0) scale(1.5, 0.4);
  }
  80% {
    transform: translateY(0) scale(0.8, 1.2);
  }
  90% {
    transform: translateY(0) scale(1.1, 0.8);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

/* ANIMATION BALL 3*/
.loader__balls__group :nth-child(3) {
  background-color: #9356dc;
  animation-name: jumpinBallAnimation3;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
}
@keyframes jumpinBallAnimation3 {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  10% {
    transform: translateY(0) scale(1.3, 0.8);
  }
  11% {
    transform: translateY(0) scale(0.7, 1.2);
    animation-timing-function: cubic-bezier(0, 1, 0.5, 1);
  }
  39% {
    transform: translateY(-75px) scale(1);
    animation-timing-function: cubic-bezier(0, 1, 0.5, 1);
  }
  40% {
    transform: translateY(-75px) scale(1);
  }
  41% {
    transform: translateY(-75px) scale(1);
    animation-timing-function: cubic-bezier(1, 0, 1, 1);
  }
  69% {
    transform: translateY(0px) scale(1, 1);
    animation-timing-function: cubic-bezier(1, 0, 1, 1);
  }
  70% {
    transform: translateY(0) scale(1.5, 0.4);
  }
  80% {
    transform: translateY(0) scale(0.8, 1.2);
  }
  90% {
    transform: translateY(0) scale(1.1, 0.8);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
.loader__balls__group .item1 {
  animation-delay: 0ms;
}
.loader__balls__group .item2 {
  animation-delay: 100ms;
}
.loader__balls__group .item3 {
  animation-delay: 200ms;
}

</style>
    

================================================
FILE: loaders/lukepadiachy_funny-moose-89.html
================================================
<div class="my-loader">
  <div class="rubiks-cube">
    <div class="face front">
      <div style="background: #ff3d00;" class="cube"></div>
      <div style="background: #ffeb3b;" class="cube"></div>
      <div style="background: #4caf50;" class="cube"></div>
      <div style="background: #2196f3;" class="cube"></div>
      <div style="background: #ffffff;" class="cube"></div>
      <div style="background: #ffeb3b;" class="cube"></div>
      <div style="background: #4caf50;" class="cube"></div>
      <div style="background: #2196f3;" class="cube"></div>
      <div style="background: #ff3d00;" class="cube"></div>
    </div>

    <div class="face back">
      <div style="background: #4caf50;" class="cube"></div>
      <div style="background: #ff3d00;" class="cube"></div>
      <div style="background: #ffeb3b;" class="cube"></div>
      <div style="background: #2196f3;" class="cube"></div>
      <div style="background: #ffffff;" class="cube"></div>
      <div style="background: #ff3d00;" class="cube"></div>
      <div style="background: #ffeb3b;" class="cube"></div>
      <div style="background: #4caf50;" class="cube"></div>
      <div style="background: #2196f3;" class="cube"></div>
    </div>
    <div class="face left">
      <div style="background: #ffeb3b;" class="cube"></div>
      <div style="background: #4caf50;" class="cube"></div>
      <div style="background: #2196f3;" class="cube"></div>
      <div style="background: #ff3d00;" class="cube"></div>
      <div style="background: #ffffff;" class="cube"></div>
      <div style="background: #4caf50;" class="cube"></div>
      <div style="background: #2196f3;" class="cube"></div>
      <div style="background: #ffeb3b;" class="cube"></div>
      <div style="background: #ff3d00;" class="cube"></div>
    </div>
    <div class="face right">
      <div style="background: #4caf50;" class="cube"></div>
      <div style="background: #ff3d00;" class="cube"></div>
      <div style="background: #ffeb3b;" class="cube"></div>
      <div style="background: #2196f3;" class="cube"></div>
      <div style="background: #ffffff;" class="cube"></div>
      <div style="background: #ff3d00;" class="cube"></div>
      <div style="background: #ffeb3b;" class="cube"></div>
      <div style="background: #4caf50;" class="cube"></div>
      <div style="background: #2196f3;" class="cube"></div>
    </div>
    <div class="face top">
      <div style="background: #2196f3;" class="cube"></div>
      <div style="background: #ffeb3b;" class="cube"></div>
      <div style="background: #ff3d00;" class="cube"></div>
      <div style="background: #4caf50;" class="cube"></div>
      <div style="background: #ffffff;" class="cube"></div>
      <div style="background: #ffeb3b;" class="cube"></div>
      <div style="background: #ff3d00;" class="cube"></div>
      <div style="background: #4caf50;" class="cube"></div>
      <div style="background: #2196f3;" class="cube"></div>
    </div>
    <div class="face bottom">
      <div style="background: #ffffff;" class="cube"></div>
      <div style="background: #4caf50;" class="cube"></div>
      <div style="background: #2196f3;" class="cube"></div>
      <div style="background: #ff3d00;" class="cube"></div>
      <div style="background: #ffeb3b;" class="cube"></div>
      <div style="background: #4caf50;" class="cube"></div>
      <div style="background: #2196f3;" class="cube"></div>
      <div style="background: #ffffff;" class="cube"></div>
      <div style="background: #ff3d00;" class="cube"></div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by lukepadiachy  - Tags: simple, form, loader, cube, animated, pattern */
.my-loader {
  width: 200px;
  height: 200px;
  perspective: 1000px;
  margin: 100px auto;
}

.rubiks-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: my-rotateCube 5s infinite linear;
}

.my-loader .face {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.my-loader .face.front {
  transform: translateZ(100px);
}
.my-loader .face.back {
  transform: rotateY(180deg) translateZ(100px);
}
.my-loader .face.left {
  transform: rotateY(-90deg) translateZ(100px);
}
.my-loader .face.right {
  transform: rotateY(90deg) translateZ(100px);
}
.my-loader .face.top {
  transform: rotateX(90deg) translateZ(100px);
}
.my-loader .face.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

.my-loader .cube {
  width: calc(100% / 3);
  height: calc(100% / 3);
  box-sizing: border-box;
  border: 1px solid #000;
}

@keyframes my-rotateCube {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

</style>
    

================================================
FILE: loaders/mahendrameghwal_heavy-shrimp-48.html
================================================
<!-- From Uiverse.io by mahendrameghwal  - Tags: animation, loading, loader, circle loader, loading animation, tailwind, tailwindcss -->
<div class="w-full min-h-screen gap-x-2 flex justify-center items-center">
  <div
    class="w-5 bg-[#d991c2] animate-pulse h-5 rounded-full animate-bounce"
  ></div>
  <div
    class="w-5 animate-pulse h-5 bg-[#9869b8] rounded-full animate-bounce"
  ></div>
  <div
    class="w-5 h-5 animate-pulse bg-[#6756cc] rounded-full animate-bounce"
  ></div>
</div>


    

================================================
FILE: loaders/milley69_chilly-swan-51.html
================================================
<div class="loading">
  <svg width="64px" height="48px">
      <polyline points="0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24" id="back"></polyline>
    <polyline points="0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24" id="front"></polyline>
  </svg>
</div>
<style>
/* From Uiverse.io by milley69 - Tags: loader */
.loading svg polyline {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loading svg polyline#back {
  fill: none;
  stroke: #ff4d5033;
}

.loading svg polyline#front {
  fill: none;
  stroke: #ff4d4f;
  stroke-dasharray: 48, 144;
  stroke-dashoffset: 192;
  animation: dash_682 1.4s linear infinite;
}

@keyframes dash_682 {
  72.5% {
    opacity: 0;
  }

  to {
    stroke-dashoffset: 0;
  }
}

</style>


================================================
FILE: loaders/mobineshaghi_happy-duck-88.html
================================================

    <div class="loader">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

<style>
/* From Uiverse.io by mobineshaghi - Tags: loading, loader, mobile */
.loader {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transform: perspective(500px) rotateX(60deg);
}

.loader span {
  position: absolute;
  display: block;
  border: 5px solid #fff;
  box-shadow: 0 5px 0 #ccc;
  inset: 0 5px 0 #ccc;
  box-sizing: border-box;
  border-radius: 50%;
  animation: animate 3s ease-in-out infinite;
}

@keyframes animate {
  0%,100% {
    transform: translateZ(-100px);
  }

  50% {
    transform: translateZ(100px);
  }
}

.loader span:nth-child(1) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  animation-delay: 1.4s;
}

.loader span:nth-child(2) {
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  animation-delay: 1.3s;
}

.loader span:nth-child(3) {
  top: 20px;
  left: 20px;
  bottom: 20px;
  right: 20px;
  animation-delay: 1.2s;
}

.loader span:nth-child(4) {
  top: 30px;
  left: 30px;
  bottom: 30px;
  right: 30px;
  animation-delay: 1.1s;
}

.loader span:nth-child(5) {
  top: 40px;
  left: 40px;
  bottom: 40px;
  right: 40px;
  animation-delay: 1s;
}

.loader span:nth-child(6) {
  top: 50px;
  left: 50px;
  bottom: 50px;
  right: 50px;
  animation-delay: 0.9s;
}

.loader span:nth-child(7) {
  top: 60px;
  left: 60px;
  bottom: 60px;
  right: 60px;
  animation-delay: 0.8s;
}

.loader span:nth-child(8) {
  top: 70px;
  left: 70px;
  bottom: 70px;
  right: 70px;
  animation-delay: 0.7s;
}

.loader span:nth-child(9) {
  top: 80px;
  left: 80px;
  bottom: 80px;
  right: 80px;
  animation-delay: 0.6s;
}

.loader span:nth-child(10) {
  top: 90px;
  left: 90px;
  bottom: 90px;
  right: 90px;
  animation-delay: 0.5s;
}

.loader span:nth-child(11) {
  top: 100px;
  left: 100px;
  bottom: 100px;
  right: 100px;
  animation-delay: 0.4s;
}

.loader span:nth-child(12) {
  top: 110px;
  left: 110px;
  bottom: 110px;
  right: 110px;
  animation-delay: 0.3s;
}

.loader span:nth-child(13) {
  top: 120px;
  left: 120px;
  bottom: 120px;
  right: 120px;
  animation-delay: 0.2s;
}

.loader span:nth-child(14) {
  top: 130px;
  left: 130px;
  bottom: 130px;
  right: 130px;
  animation-delay: 0.1s;
}

.loader span:nth-child(15) {
  top: 140px;
  left: 140px;
  bottom: 140px;
  right: 140px;
  animation-delay: 0s;
}
</style>


================================================
FILE: loaders/mobinkakei_bright-wolverine-29.html
================================================
<div class="loader-3">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<style>
/* From Uiverse.io by mobinkakei - Tags: loader */
.loader-3 {
  width: 10em;
  display: flex;
  justify-content: space-evenly;
}

.circle {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
}

.circle:nth-child(1) {
  background-color: #90be6d;
}

.circle:nth-child(2) {
  background-color: #f9c74f;
}

.circle:nth-child(3) {
  background-color: #f8961e;
}

.circle:nth-child(4) {
  background-color: #f3722c;
}

.circle:nth-child(5) {
  background-color: #f94346;
}

.circle::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  animation: animateLoader38 2s ease-out infinite;
}

.circle:nth-child(1)::before {
  background-color: #90be6d;
}

.circle:nth-child(2)::before {
  background-color: #f9c74f;
  animation-delay: 0.2s;
}

.circle:nth-child(3)::before {
  background-color: #f8961e;
  animation-delay: 0.4s;
}

.circle:nth-child(4)::before {
  background-color: #f3722c;
  animation-delay: 0.6s;
}

.circle:nth-child(5)::before {
  background-color: #f94346;
  animation-delay: 0.8s;
}

@keyframes animateLoader38 {
  0% {
    transform: scale(1);
  }

  50%,
  75% {
    transform: scale(2.5);
  }

  80%,
  100% {
    opacity: 0;
  }
}
</style>


================================================
FILE: loaders/mobinkakei_curly-fish-45.html
================================================
<span class="loader"></span>

<style>
/* From Uiverse.io by mobinkakei  - Tags: loading, loader, creative */
.loader {
  width: 54px;
  height: 54px;
  position: relative;
  border-radius: 4px;
  background-color: #fff;
  background-image: radial-gradient(circle 5px, #19191a 100%, transparent 0),
    radial-gradient(circle 5px, #19191a 100%, transparent 0),
    radial-gradient(circle 5px, #19191a 100%, transparent 0),
    radial-gradient(circle 5px, #19191a 100%, transparent 0),
    radial-gradient(circle 5px, #19191a 100%, transparent 0),
    radial-gradient(circle 5px, #19191a 100%, transparent 0);
  background-repeat: no-repeat;
  animation: move 4s linear infinite, rotate 2s linear infinite;
}

@keyframes rotate {
  0%,
  20% {
    transform: rotate(0deg);
  }
  30%,
  40% {
    transform: rotate(90deg);
  }
  50%,
  60% {
    transform: rotate(180deg);
  }
  70%,
  80% {
    transform: rotate(270deg);
  }
  90%,
  100% {
    transform: rotate(360deg);
  }
}
@keyframes move {
  0%,
  9% {
    background-position: -12px -15px, -12px 0px, -12px 15px, 12px -15px,
      12px 0px, 12px 15px;
  }
  10%,
  25% {
    background-position: 0px -15px, -12px 0px, -12px 15px, 34px -15px, 12px 0px,
      12px 15px;
  }
  30%,
  45% {
    background-position: 0px -34px, -12px -10px, -12px 12px, 34px -15px,
      12px -10px, 12px 12px;
  }
  50%,
  65% {
    background-position: 0px -34px, -12px -34px, -12px 12px, 34px -12px,
      0px -10px, 12px 12px;
  }
  70%,
  85% {
    background-position: 0px -34px, -12px -34px, 0px 12px, 34px -12px, 0px -10px,
      34px 12px;
  }
  90%,
  100% {
    background-position: 0px -34px, -12px -34px, 0px 0px, 34px -12px, 0px 0px,
      34px 12px;
  }
}

</style>
    

================================================
FILE: loaders/mobinkakei_dry-insect-94.html
================================================
<span class="loader"></span>

<style>
/* From Uiverse.io by mobinkakei  - Tags: loading, loader, space */
.loader {
  position: relative;
  width: 60px;
  height: 60px;
  background: #a19dad;
  transform: rotateX(65deg) rotate(45deg);
  // remove bellows command for perspective change
  //transform: perspective(200px) rotateX(65deg) rotate(45deg);
  color: #fff;
  animation: layers1 1s linear infinite alternate;
}
.loader:after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  animation: layerTr 1s linear infinite alternate;
}

@keyframes layers1 {
  0% {
    box-shadow: 0px 0px 0 0px;
  }
  90%,
  100% {
    box-shadow: 20px 20px 0 -4px;
  }
}
@keyframes layerTr {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-25px, -25px) scale(1);
  }
}

</style>
    

================================================
FILE: loaders/mobinkakei_fuzzy-fish-86.html
================================================
<div class="loader">
  <div class="loader_cube loader_cube--color"></div>
   <div class="loader_cube loader_cube--glowing"></div>
</div>
<style>
/* From Uiverse.io by mobinkakei - Tags: gradient, loader, blur filter */
.loader {
  width: 150px;
  height: 150px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader_cube {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 30px;
}

.loader_cube--glowing {
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.loader_cube--color {
  z-index: 1;
  filter: blur(2px);
  background: linear-gradient(135deg, #1afbf0, #da00ff);
  animation: loadtwo 2.5s ease-in-out infinite;
}

@keyframes loadtwo {
  50% {
    transform: rotate(-80deg);
  }
}
</style>


================================================
FILE: loaders/mobinkakei_grumpy-turtle-41.html
================================================
<div class="wrapper">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
    <div class="shadow"></div>
</div>
<style>
/* From Uiverse.io by mobinkakei - Tags: loader, bounce */
.wrapper {
  width: 200px;
  height: 60px;
  position: relative;
  z-index: 1;
}

.circle {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
  left: 15%;
  transform-origin: 50%;
  animation: circle7124 .5s alternate infinite ease;
}

@keyframes circle7124 {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
  }

  40% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1);
  }

  100% {
    top: 0%;
  }
}

.circle:nth-child(2) {
  left: 45%;
  animation-delay: .2s;
}

.circle:nth-child(3) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
}

.shadow {
  width: 20px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.9);
  position: absolute;
  top: 62px;
  transform-origin: 50%;
  z-index: -1;
  left: 15%;
  filter: blur(1px);
  animation: shadow046 .5s alternate infinite ease;
}

@keyframes shadow046 {
  0% {
    transform: scaleX(1.5);
  }

  40% {
    transform: scaleX(1);
    opacity: .7;
  }

  100% {
    transform: scaleX(.2);
    opacity: .4;
  }
}

.shadow:nth-child(4) {
  left: 45%;
  animation-delay: .2s
}

.shadow:nth-child(5) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
}

</style>


================================================
FILE: loaders/mobinkakei_pink-deer-76.html
================================================
<div id="wifi-loader">
    <svg class="circle-outer" viewBox="0 0 86 86">
        <circle class="back" cx="43" cy="43" r="40"></circle>
        <circle class="front" cx="43" cy="43" r="40"></circle>
        <circle class="new" cx="43" cy="43" r="40"></circle>
    </svg>
    <svg class="circle-middle" viewBox="0 0 60 60">
        <circle class="back" cx="30" cy="30" r="27"></circle>
        <circle class="front" cx="30" cy="30" r="27"></circle>
    </svg>
    <svg class="circle-inner" viewBox="0 0 34 34">
        <circle class="back" cx="17" cy="17" r="14"></circle>
        <circle class="front" cx="17" cy="17" r="14"></circle>
    </svg>
    <div class="text" data-text="Searching"></div>
</div>
<style>
/* From Uiverse.io by mobinkakei - Tags: loader, wifi */
#wifi-loader {
  --background: #62abff;
  --front-color: #4f29f0;
  --back-color: #c3c8de;
  --text-color: #414856;
  width: 64px;
  height: 64px;
  border-radius: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#wifi-loader svg {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

#wifi-loader svg circle {
  position: absolute;
  fill: none;
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-100deg);
  transform-origin: center;
}

#wifi-loader svg circle.back {
  stroke: var(--back-color);
}

#wifi-loader svg circle.front {
  stroke: var(--front-color);
}

#wifi-loader svg.circle-outer {
  height: 86px;
  width: 86px;
}

#wifi-loader svg.circle-outer circle {
  stroke-dasharray: 62.75 188.25;
}

#wifi-loader svg.circle-outer circle.back {
  animation: circle-outer135 1.8s ease infinite 0.3s;
}

#wifi-loader svg.circle-outer circle.front {
  animation: circle-outer135 1.8s ease infinite 0.15s;
}

#wifi-loader svg.circle-middle {
  height: 60px;
  width: 60px;
}

#wifi-loader svg.circle-middle circle {
  stroke-dasharray: 42.5 127.5;
}

#wifi-loader svg.circle-middle circle.back {
  animation: circle-middle6123 1.8s ease infinite 0.25s;
}

#wifi-loader svg.circle-middle circle.front {
  animation: circle-middle6123 1.8s ease infinite 0.1s;
}

#wifi-loader svg.circle-inner {
  height: 34px;
  width: 34px;
}

#wifi-loader svg.circle-inner circle {
  stroke-dasharray: 22 66;
}

#wifi-loader svg.circle-inner circle.back {
  animation: circle-inner162 1.8s ease infinite 0.2s;
}

#wifi-loader svg.circle-inner circle.front {
  animation: circle-inner162 1.8s ease infinite 0.05s;
}

#wifi-loader .text {
  position: absolute;
  bottom: -40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: lowercase;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.2px;
}

#wifi-loader .text::before, #wifi-loader .text::after {
  content: attr(data-text);
}

#wifi-loader .text::before {
  color: var(--text-color);
}

#wifi-loader .text::after {
  color: var(--front-color);
  animation: text-animation76 3.6s ease infinite;
  position: absolute;
  left: 0;
}

@keyframes circle-outer135 {
  0% {
    stroke-dashoffset: 25;
  }

  25% {
    stroke-dashoffset: 0;
  }

  65% {
    stroke-dashoffset: 301;
  }

  80% {
    stroke-dashoffset: 276;
  }

  100% {
    stroke-dashoffset: 276;
  }
}

@keyframes circle-middle6123 {
  0% {
    stroke-dashoffset: 17;
  }

  25% {
    stroke-dashoffset: 0;
  }

  65% {
    stroke-dashoffset: 204;
  }

  80% {
    stroke-dashoffset: 187;
  }

  100% {
    stroke-dashoffset: 187;
  }
}

@keyframes circle-inner162 {
  0% {
    stroke-dashoffset: 9;
  }

  25% {
    stroke-dashoffset: 0;
  }

  65% {
    stroke-dashoffset: 106;
  }

  80% {
    stroke-dashoffset: 97;
  }

  100% {
    stroke-dashoffset: 97;
  }
}

@keyframes text-animation76 {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  50% {
    clip-path: inset(0);
  }

  100% {
    clip-path: inset(0 0 0 100%);
  }
}
 
</style>


================================================
FILE: loaders/mobinkakei_pretty-fireant-78.html
================================================
<div class="loader">
    <span>Loading...</span>
</div>
<style>
/* From Uiverse.io by mobinkakei - Tags: loader */
.loader {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border-radius: 50%;
  border-top: 5px solid #e74c3c;
  position: relative;
  animation: load 2s linear infinite;
}

.loader::before,.loader::after {
  content: '';
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border-radius: 50%;
}

.loader::before {
  border-top: 5px solid #e67e22;
  transform: rotate(120deg);
}

.loader::after {
  border-top: 5px solid #3498db;
  transform: rotate(240deg);
}

.loader span {
  position: absolute;
  font-size: small;
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
  line-height: 100px;
  animation: a2 2s linear infinite;
}

@keyframes load {
  to {
    transform: rotate(360deg);
  }
}

@keyframes a2 {
  to {
    transform: rotate(-360deg);
  }
}
</style>


================================================
FILE: loaders/mobinkakei_proud-ladybug-46.html
================================================
<div class="loader">
  <svg viewBox="0 0 80 80">
    <circle r="32" cy="40" cx="40" id="test"></circle>
  </svg>
</div>

<div class="loader triangle">
  <svg viewBox="0 0 86 80">
    <polygon points="43 8 79 72 7 72"></polygon>
  </svg>
</div>

<div class="loader">
  <svg viewBox="0 0 80 80">
    <rect height="64" width="64" y="8" x="8"></rect>
  </svg>
</div>

<style>
/* From Uiverse.io by mobinkakei  - Website: https://codepen.io/aaroniker/pen/omvYNZ - Name: Aaron Iker - Tags: loader, square, triangle, loader, square */
.loader {
  --path: #2f3545;
  --dot: #5628ee;
  --duration: 3s;
  width: 44px;
  height: 44px;
  position: relative;
}

.loader:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  display: block;
  background: var(--dot);
  top: 37px;
  left: 19px;
  transform: translate(-18px, -18px);
  animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)
    infinite;
}

.loader svg {
  display: block;
  width: 100%;
  height: 100%;
}

.loader svg rect,
.loader svg polygon,
.loader svg circle {
  fill: none;
  stroke: var(--path);
  stroke-width: 10px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.loader svg polygon {
  stroke-dasharray: 145 76 145 76;
  stroke-dashoffset: 0;
  animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)
    infinite;
}

.loader svg rect {
  stroke-dasharray: 192 64 192 64;
  stroke-dashoffset: 0;
  animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.loader svg circle {
  stroke-dasharray: 150 50 150 50;
  stroke-dashoffset: 75;
  animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)
    infinite;
}

.loader.triangle {
  width: 48px;
}

.loader.triangle:before {
  left: 21px;
  transform: translate(-10px, -18px);
  animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)
    infinite;
}

@keyframes pathTriangle {
  33% {
    stroke-dashoffset: 74;
  }

  66% {
    stroke-dashoffset: 147;
  }

  100% {
    stroke-dashoffset: 221;
  }
}

@keyframes dotTriangle {
  33% {
    transform: translate(0, 0);
  }

  66% {
    transform: translate(10px, -18px);
  }

  100% {
    transform: translate(-10px, -18px);
  }
}

@keyframes pathRect {
  25% {
    stroke-dashoffset: 64;
  }

  50% {
    stroke-dashoffset: 128;
  }

  75% {
    stroke-dashoffset: 192;
  }

  100% {
    stroke-dashoffset: 256;
  }
}

@keyframes dotRect {
  25% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(18px, -18px);
  }

  75% {
    transform: translate(0, -36px);
  }

  100% {
    transform: translate(-18px, -18px);
  }
}

@keyframes pathCircle {
  25% {
    stroke-dashoffset: 125;
  }

  50% {
    stroke-dashoffset: 175;
  }

  75% {
    stroke-dashoffset: 225;
  }

  100% {
    stroke-dashoffset: 275;
  }
}

.loader {
  display: inline-block;
  margin: 0 16px;
}

</style>
    

================================================
FILE: loaders/mobinkakei_tall-robin-8.html
================================================
<div class="loader-1">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div></div>
<style>
/* From Uiverse.io by mobinkakei - Tags: loader */
.loader-1 {
 width: 7em;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 font-size: 13px;
}

.dot {
 width: 0.7em;
 height: 0.7em;
 border-radius: 50%;
 background-color: #a52a2a;
 margin: 0.4rem;
 opacity: 0.6;
 font-size: 15px;
}

.dot:nth-child(1) {
 animation: animateLoader1 1.5s infinite;
}

.dot:nth-child(2) {
 animation: animateLoader1 1.3s infinite;
}

.dot:nth-child(3) {
 animation: animateLoader1 1.7s infinite;
}

.dot:nth-child(4) {
 animation: animateLoader1 1.1s infinite;
}

.dot:nth-child(5) {
 animation: animateLoader1 0.9s infinite;
}

.dot:nth-child(6) {
 animation: animateLoader1 0.7s infinite;
}

.dot:nth-child(7) {
 animation: animateLoader1 0.5s infinite;
}

.dot:nth-child(8) {
 animation: animateLoader1 1.3s infinite;
}

.dot:nth-child(9) {
 animation: animateLoader1 1.5s infinite;
}

@keyframes animateLoader1 {
 0% {
  transform: scale(1);
 }

 50% {
  transform: scale(1.5);
  opacity: 1;
 }

 100% {
  transform: scale(1);
  opacity: 0.6;
 }
}

</style>


================================================
FILE: loaders/mobinkakei_tricky-duck-12.html
================================================
<span class="loader"></span>

<style>
/* From Uiverse.io by mobinkakei  - Tags: loader, creative, eye, loading animation */
.loader {
  position: relative;
  width: 108px;
  display: flex;
  justify-content: space-between;
}
.loader::after,
.loader::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  background-color: #fff;
  background-image: radial-gradient(circle 14px, #0d161b 100%, transparent 0);
  background-repeat: no-repeat;
  border-radius: 50%;
  animation: eyeMove 10s infinite, blink 10s infinite;
}
@keyframes eyeMove {
  0%,
  10% {
    background-position: 0px 0px;
  }
  13%,
  40% {
    background-position: -15px 0px;
  }
  43%,
  70% {
    background-position: 15px 0px;
  }
  73%,
  90% {
    background-position: 0px 15px;
  }
  93%,
  100% {
    background-position: 0px 0px;
  }
}
@keyframes blink {
  0%,
  10%,
  12%,
  20%,
  22%,
  40%,
  42%,
  60%,
  62%,
  70%,
  72%,
  90%,
  92%,
  98%,
  100% {
    height: 48px;
  }
  11%,
  21%,
  41%,
  61%,
  71%,
  91%,
  99% {
    height: 18px;
  }
}

</style>
    

================================================
FILE: loaders/mrhyddenn_angry-goat-2.html
================================================
<div class="loader">
    <div class="waves"></div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
  height: 80px;
  width: 80px;
  border: 1px solid transparent;
  box-shadow: 0 0 0 2px rgb(25, 116, 253);
  border-radius: 50%;
}

.waves {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgb(30, 146, 255);
  box-shadow: inset 0 0 50px rgb(0,0,0,.3);
}

.waves::before,
.waves::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
  background: #000;
}

.waves::before {
  border-radius: 45%;
  background: rgb(248, 248, 248);
  animation: wave91234 5s linear infinite;
}

.waves::after {
  border-radius: 40%;
  background: rgb(255,255,255,.5);
  animation: wave91234 10s linear infinite;
}

@keyframes wave91234 {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_average-dodo-53.html
================================================
<div class="loader">
    <div class="circle"></div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
.loader {
  background: transparent;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 80px;
  height: 80px;
  border: 2px solid #ccc;
  position: absolute;
  border-radius: 50%;
  animation: circle14512 2s linear infinite;
}

.circle::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9ae932;
  box-shadow: 0 0 20px #9ae932, 0 0 60px #9ae932;
}

@keyframes circle14512 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_black-bullfrog-16.html
================================================
<div class="spinner center">
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
.spinner {
  font-size: 28px;
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
}

.spinner.center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.spinner .spinner-blade {
  position: absolute;
  left: 0.4629em;
  bottom: 0;
  width: 0.074em;
  height: 0.2777em;
  border-radius: 0.0555em;
  background-color: transparent;
  -webkit-transform-origin: center -0.2222em;
  -ms-transform-origin: center -0.2222em;
  transform-origin: center -0.2222em;
  animation: spinner-fade9234 1s infinite linear;
}

.spinner .spinner-blade:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.spinner .spinner-blade:nth-child(2) {
  -webkit-animation-delay: 0.083s;
  animation-delay: 0.083s;
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.spinner .spinner-blade:nth-child(3) {
  -webkit-animation-delay: 0.166s;
  animation-delay: 0.166s;
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.spinner .spinner-blade:nth-child(4) {
  -webkit-animation-delay: 0.249s;
  animation-delay: 0.249s;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.spinner .spinner-blade:nth-child(5) {
  -webkit-animation-delay: 0.332s;
  animation-delay: 0.332s;
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}

.spinner .spinner-blade:nth-child(6) {
  -webkit-animation-delay: 0.415s;
  animation-delay: 0.415s;
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}

.spinner .spinner-blade:nth-child(7) {
  -webkit-animation-delay: 0.498s;
  animation-delay: 0.498s;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.spinner .spinner-blade:nth-child(8) {
  -webkit-animation-delay: 0.581s;
  animation-delay: 0.581s;
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}

.spinner .spinner-blade:nth-child(9) {
  -webkit-animation-delay: 0.664s;
  animation-delay: 0.664s;
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}

.spinner .spinner-blade:nth-child(10) {
  -webkit-animation-delay: 0.747s;
  animation-delay: 0.747s;
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.spinner .spinner-blade:nth-child(11) {
  -webkit-animation-delay: 0.83s;
  animation-delay: 0.83s;
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}

.spinner .spinner-blade:nth-child(12) {
  -webkit-animation-delay: 0.913s;
  animation-delay: 0.913s;
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}

@keyframes spinner-fade9234 {
  0% {
    background-color: #69717d;
  }

  100% {
    background-color: transparent;
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_calm-snail-67.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader, spinner */
.loader {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 5px solid rgb(255, 17, 0);
  border-radius: 50%;
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: rot5 1s infinite;
}

@keyframes rot5 {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(180deg);
    border-top-color: rgb(139, 46, 46);
    border-bottom-color: rgb(243, 92, 33);
    border-right-color: transparent;
    border-left-color: transparent;
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_cowardly-ladybug-61.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
.loader {
  width: 50px;
  height: 50px;
  border: 5px solid rgb(0,0,0,0.11);
  border-radius: 50%;
  border-top-color: rgb(235, 169, 47);
  border-left-color: rgb(43, 145, 87);
  border-right-color: rgb(20, 102, 226);
  border-bottom-color: rgb(224, 71, 71);
  animation: loader1776 2s linear infinite;
}

@keyframes loader1776 {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_curly-husky-77.html
================================================
<div class="loader">
    <div class="dot"></div>
</div>
<div class="loader">
    <div class="dot"></div>
</div>
<div class="loader">
    <div class="dot"></div>
</div>
<div class="loader">
    <div class="dot"></div>
</div>
<div class="loader">
    <div class="dot"></div>
</div>
<div class="loader">
    <div class="dot"></div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
.loader {
  height: 5px;
  width: 1px;
  position: absolute;
  animation: rotate0234 3.5s linear infinite;
}

.loader .dot {
  top: 30px;
  height: 7px;
  width: 7px;
  background: #268fe4;
  border-radius: 50%;
  position: relative;
}

.text {
  position: absolute;
  bottom: -85px;
  font-size: 25px;
  font-weight: 400;
  color: #26aee4;
}

@keyframes rotate0234 {
  30% {
    transform: rotate(220deg);
  }

  40% {
    transform: rotate(450deg);
    opacity: 1;
  }

  75% {
    transform: rotate(720deg);
    opacity: 1;
  }

  76% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    transform: rotate(0deg);
  }
}

.loader:nth-child(1) {
  animation-delay: 0.15s;
}

.loader:nth-child(2) {
  animation-delay: 0.3s;
}

.loader:nth-child(3) {
  animation-delay: 0.45s;
}

.loader:nth-child(4) {
  animation-delay: 0.6s;
}

.loader:nth-child(5) {
  animation-delay: 0.75s;
}

.loader:nth-child(6) {
  animation-delay: 0.9s;
}
</style>


================================================
FILE: loaders/mrhyddenn_curly-zebra-89.html
================================================
<div class="loader loader_bubble"></div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
.loader {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  font-size: 15px;
  box-shadow: 9px 9px 33px #d1d1d1, -9px -9px 33px #ffffff;
}

.loader::before,
.loader::after {
  content: '';
  position: absolute;
  display: block;
}

.loader_bubble::before {
  top: 10px;
  left: 10px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
}

.loader_bubble {
  background: linear-gradient(180deg, rgb(0, 91, 228) 10%, rgb(75, 127, 240) 100%);
  border-radius: 50%;
  transform-origin: 50% 50%;
  animation: bubble7234 1200ms cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

@keyframes bubble7234 {
  0% {
    transform: translate3d(0,0,0) rotate(0);
  }

  100% {
    transform: translate3d(0,0,0) rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_curvy-insect-3.html
================================================
<div class="loader">
    <div class="snow">
        <span style="--i:11"></span>
        <span style="--i:12"></span>
        <span style="--i:15"></span>
        <span style="--i:17"></span>
        <span style="--i:18"></span>
        <span style="--i:13"></span>
        <span style="--i:14"></span>
        <span style="--i:19"></span>
        <span style="--i:20"></span>
        <span style="--i:10"></span>
        <span style="--i:18"></span>
        <span style="--i:13"></span>
        <span style="--i:14"></span>
        <span style="--i:19"></span>
        <span style="--i:20"></span>
        <span style="--i:10"></span>
        <span style="--i:18"></span>
        <span style="--i:13"></span>
        <span style="--i:14"></span>
        <span style="--i:19"></span>
        <span style="--i:20"></span>
        <span style="--i:10"></span>
    </div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
.loader {
  position: relative;
  width: 110px;
  height: 30px;
  background: #fff;
  border-radius: 100px;
}

.loader::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 10px;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 40px 0 0 20px #fff;
}

.snow {
  position: relative;
  display: flex;
  z-index: 1;
}

.snow span {
  position: relative;
  width: 3px;
  height: 3px;
  background: #fff;
  margin: 0 2px;
  border-radius: 50%;
  animation: snowing 5s linear infinite;
  animation-duration: calc(15s / var(--i));
  transform-origin: bottom;
}

@keyframes snowing {
  0% {
    transform: translateY(0px);
  }

  70% {
    transform: translateY(100px) scale(1);
  }

  100% {
    transform: translateY(100px) scale(0);
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_fast-bear-60.html
================================================
<div class="mover"></div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
.mover {
  background: rgba(248, 25, 25, 0.979);
  height: 10px;
  width: 80px;
  border-radius: 10px;
  position: relative;
  animation: mover5 2s ease-in-out infinite;
}

.mover::before,
.mover::after {
  content: '';
  position: absolute;
  height: 10px;
  border-radius: 10px;
  left: 20px;
  animation: mover5 2s ease-in-out infinite;
}

.mover::before {
  background: rgb(201, 1, 1);
  top: 20px;
  width: 50px;
}

.mover::after {
  background: rgb(255, 116, 106);
  top: -20px;
  width: 60px;
}

@keyframes mover5 {
  0% {
    transform: translateX(30px) scale(1);
  }

  50% {
    transform: translateX(-30px) scale(1.1);
  }

  100% {
    transform: translateX(30px) scale(1);
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_giant-lion-34.html
================================================
<div class="loader">
    <span></span>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
.loader {
  position: relative;
  width: 150px;
  height: 150px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 25px 25px 75px rgba(0,0,0,0.55);
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.loader::before {
  content: '';
  position: absolute;
  inset: 20px;
  background: transparent;
  border: 1px dashed#444;
  border-radius: 50%;
  box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25),
  inset 5px 5px 35px rgba(0,0,0,0.25);
}

.loader::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px dashed#444;
  box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25),
  inset 5px 5px 35px rgba(0,0,0,0.25);
}

.loader span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 100%;
  background: transparent;
  transform-origin: top left;
  animation: radar81 2s linear infinite;
  border-top: 1px dashed #fff;
}

.loader span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: seagreen;
  transform-origin: top left;
  transform: rotate(-55deg);
  filter: blur(30px) drop-shadow(20px 20px 20px seagreen);
}

@keyframes radar81 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_massive-newt-28.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader, spinner */
.loader {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgb(255,255,255,.2);
  border-top-color: transparent;
  animation: rot1 1.2s linear infinite;
}

@keyframes rot1 {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_new-walrus-45.html
================================================
<div class="spinner">
    <div class="spinnerin"></div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: gradient, loader */
.spinner {
  width: 3em;
  height: 3em;
  cursor: not-allowed;
  border-radius: 50%;
  border: 2px solid #444;
  box-shadow: -10px -10px 10px #6359f8, 0px -10px 10px 0px #9c32e2, 10px -10px 10px #f36896, 10px 0 10px #ff0b0b, 10px 10px 10px 0px#ff5500, 0 10px 10px 0px #ff9500, -10px 10px 10px 0px #ffb700;
  animation: rot55 0.7s linear infinite;
}

.spinnerin {
  border: 2px solid #444;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes rot55 {
  to {
    transform: rotate(360deg);
  }
}

</style>


================================================
FILE: loaders/mrhyddenn_nice-swan-72.html
================================================
<div class="loader-box">
    <div class="loading-wrapper">
        <div class="loader">
            <div class="loader-inner">
            </div>
        </div>
    </div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
loader-box {
  background: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.loading-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.loading-wrapper .loader {
  height: 80px;
  width: 80px;
  border: 3px solid #e5e5e5;
  border-radius: 50%;
  -webkit-animation: pulse1572 1200ms ease-in-out;
  animation: pulse1572 1200ms ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.loading-wrapper .loader .loader-inner {
  display: block;
  height: 40px;
  width: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: linear-gradient(180deg, rgb(0, 140, 255) 0%, rgb(218, 67, 218) 100%);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  border-radius: 50%;
  -webkit-animation: innerPulse934 1200ms ease-in-out;
  animation: innerPulse934 1200ms ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

@keyframes pulse1572 {
  0% {
    border: 3px solid #fff;
  }

  50% {
    border: 40px solid #fff;
  }

  100% {
    border: 3px solid #fff;
  }
}

@keyframes innerPulse934 {
  0% {
    height: 30px;
    width: 30px;
  }

  50% {
    height: 53.33333px;
    width: 53.33333px;
  }

  100% {
    height: 30px;
    width: 30px;
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_ordinary-wolverine-98.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
.loader {
  position: relative;
  transform: scale(2);
  border-radius: 50%;
  border: 1px solid;
  width: 30px;
  height: 30px;
  color: white;
}

.loader::after {
  position: absolute;
  width: 0px;
  height: 10px;
  display: block;
  border-left: 1px solid #fff;
  content: '';
  left: 14px;
  border-radius: 1px;
  top: 4px;
  animation-duration: 1s;
}

.loader::before {
  position: absolute;
  width: 0px;
  height: 10px;
  display: block;
  border-left: 1px solid #fff;
  content: '';
  left: 14px;
  border-radius: 1px;
  top: 4px;
  animation-duration: 40s;
}

.loader::before,.loader::after {
  transform-origin: bottom;
  animation-name: dial;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes dial {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_plastic-panther-51.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: gradient, loader, spinner */
.loader {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.loader::before,
.loader::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

.loader::before {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, #ff00cc 0%, #333399 100%);
  animation: load012323 .5s infinite linear;
}

.loader::after {
  width: 85%;
  height: 85%;
  background-color: #222;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes load012323 {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_spicy-dolphin-98.html
================================================
<div class="loader">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
.loader {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(#ee280e, #15a0f7, #6ed15a);
  animation: animate7712 1.2s linear infinite;
}

@keyframes animate7712 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loader span {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(#ee280e, #15a0f7, #5ad15a);
}

.loader:after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: #333;
  border: solid #333 10px;
  border-radius: 50%;
}

.loader span:nth-child(1) {
  filter: blur(5px);
}

.loader span:nth-child(2) {
  filter: blur(10px);
}

.loader span:nth-child(3) {
  filter: blur(25px);
}

.loader span:nth-child(4) {
  filter: blur(50px);
}
</style>


================================================
FILE: loaders/mrhyddenn_sweet-fish-92.html
================================================
<div class="loader">
    <div class="loader-in"></div>
    <div class="loader-dot"></div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
.loader,
.loader-in {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  position: relative;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.001) 0%, rgba(0, 0, 0, 0.4) 50%);
  box-shadow: 0 0 60px 0px rgba(0, 0, 0, 0.3);
  animation: circle41 1.2s infinite alternate;
}

.loader-in {
  width: 78%;
  height: 78%;
  border-radius: 50%;
  animation: circle 1.2s infinite alternate;
  animation-delay: calc(1.2s / 4);
}

.loader-in::after {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #6E2E8E 0%, #0B9FBD 100%);
  border-radius: 50%;
  animation: rot122 2.4s infinite linear;
}

.loader-dot {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55%;
  height: 55%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.001) 0%, rgba(0, 0, 0, 0.4) 50%);
  background-size: 120%;
  background-position: center;
}

.loader-dot::after {
  content: '';
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
  animation: circle41 1.2s infinite alternate;
  animation-delay: calc(1.2s / 4);
}

@keyframes rot122 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes circle41 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_tasty-crab-98.html
================================================
<div class="progress-loader">
    <div class="progress"></div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: progress, progress bar, loader */
.progress-loader {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.progress-loader {
  width: 150px;
  background: rgba(236, 236, 238, 0.253);
  height: 3px;
  border-radius: 7px;
}

.progress {
  content: '';
  width: 1px;
  height: 3px;
  border-radius: 7px;
  background: rgb(255, 255, 255);
  transition: 0.5s;
  animation: loading1274 2s ease infinite;
}

@keyframes loading1274 {
  0% {
    width: 0%;
  }

  10% {
    width: 10%;
  }

  50% {
    width: 40%;
  }

  60% {
    width: 60%;
  }

  100% {
    width: 100%;
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_thin-earwig-32.html
================================================
<div class="loader">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  animation: mac0123 1s linear infinite;
}

.loader span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f00;
  left: 50%;
  border-radius: 50%;
  transform-origin: left;
}

.loader span:nth-child(1) {
  background: #0fa503;
  transform: rotate(0deg);
  z-index: 2;
}

.loader span:nth-child(2) {
  background: #ffd203;
  transform: rotate(60deg);
  z-index: 3;
}

.loader span:nth-child(3) {
  background: #54cd28;
  transform: rotate(120deg);
  z-index: 4;
}

.loader span:nth-child(4) {
  background: #129cf5;
  transform: rotate(180deg);
  z-index: 5;
}

.loader span:nth-child(5) {
  background: #bb5ed3;
  transform: rotate(240deg);
  z-index: 6;
}

.loader span:nth-child(6) {
  background: #ff4f45;
  transform: rotate(300deg);
  z-index: 7;
  overflow: hidden;
}

.loader span:nth-child(6):before {
  content: '';
  position: absolute;
  top: 45px;
  left: -72px;
  width: 100%;
  height: 100%;
  background: #ffd203;
  border-radius: 50%;
  z-index: 2;
}

.loader span:nth-child(6):after {
  content: '';
  position: absolute;
  top: 42px;
  left: -23px;
  width: 100%;
  height: 100%;
  background: #fea503;
  border-radius: 50%;
}

@keyframes mac0123 {
  0% {
    transform: translate(-50%, -50%) rotate(359deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_wise-fox-44.html
================================================
<div class="loader">
    <div class="face">
        <div class="circle"></div>
    </div>
    <div class="face">
        <div class="circle"></div>
    </div>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader */
.loader {
  width: 6em;
  height: 6em;
  font-size: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader .face {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  animation: animate023845 3s linear infinite;
}

.loader .face:nth-child(1) {
  width: 100%;
  height: 100%;
  color: gold;
  border-color: currentColor transparent transparent currentColor;
  border-width: 0.2em 0.2em 0em 0em;
  --deg: -45deg;
  animation-direction: normal;
}

.loader .face:nth-child(2) {
  width: 70%;
  height: 70%;
  color: lime;
  border-color: currentColor currentColor transparent transparent;
  border-width: 0.2em 0em 0em 0.2em;
  --deg: -135deg;
  animation-direction: reverse;
}

.loader .face .circle {
  position: absolute;
  width: 50%;
  height: 0.1em;
  top: 50%;
  left: 50%;
  background-color: transparent;
  transform: rotate(var(--deg));
  transform-origin: left;
}

.loader .face .circle::before {
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  content: '';
  width: 1em;
  height: 1em;
  background-color: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 2em,
                0 0 4em,
                0 0 6em,
                0 0 8em,
                0 0 10em,
                0 0 0 0.5em rgba(255, 255, 0, 0.1);
}

@keyframes animate023845 {
  to {
    transform: rotate(1turn);
  }
}
</style>


================================================
FILE: loaders/mrhyddenn_witty-deer-83.html
================================================
<div class="loader">
    <span>uiverse</span>
    <span>uiverse</span>
</div>
<style>
/* From Uiverse.io by mrhyddenn - Tags: loader, fluid, water */
.loader {
  position: relative;
}

.loader span {
  position: absolute;
  color: #fff;
  transform: translate(-50%, -50%);
  font-size: 38px;
  letter-spacing: 5px;
}

.loader span:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 0.3px rgb(128, 198, 255);
}

.loader span:nth-child(2) {
  color: rgb(128, 198, 255);
  -webkit-text-stroke: 1px rgb(128, 198, 255);
  animation: uiverse723 3s ease-in-out infinite;
}

@keyframes uiverse723 {
  0%, 100% {
    clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 
     54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
  }

  50% {
    clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 
     51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
  }
}
</style>


================================================
FILE: loaders/mrpumps31232_strange-dragonfly-94.html
================================================
<div class="loading-wave">
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
</div>

<style>
/* From Uiverse.io by mrpumps31232 - Tags: loader, wave */
.loading-wave {
  width: 300px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.loading-bar {
  width: 20px;
  height: 10px;
  margin: 0 5px;
  background-color: #3498db;
  border-radius: 5px;
  animation: loading-wave-animation 1s ease-in-out infinite;
}

.loading-bar:nth-child(2) {
  animation-delay: 0.1s;
}

.loading-bar:nth-child(3) {
  animation-delay: 0.2s;
}

.loading-bar:nth-child(4) {
  animation-delay: 0.3s;
}

@keyframes loading-wave-animation {
  0% {
    height: 10px;
  }

  50% {
    height: 50px;
  }

  100% {
    height: 10px;
  }
}

</style>


================================================
FILE: loaders/mrpumps31232_swift-mule-62.html
================================================
<div class="loading">
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
    <div class="side left"></div>
    <div class="side right"></div>
  </div>
</div>

<style>
/* From Uiverse.io by mrpumps31232 - Tags: 3d, loader, cube, modern, animated, clean, fun */
.loading {
  width: 100px;
  height: 100px;
  perspective: 1000px;
  margin: 50px auto;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 2s infinite linear;
}

.side {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid rgb(255, 255, 255);
}

.front {
  background: linear-gradient(45deg, #f00, #0ff);
  transform: translateZ(50px);
}

.back {
  background: linear-gradient(45deg, #0ff, #f00);
  transform: translateZ(-50px) rotateY(180deg);
}

.top {
  background: linear-gradient(45deg, #f0f, #ff0);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: linear-gradient(45deg, #ff0, #f0f);
  transform: rotateX(-90deg) translateZ(50px);
}

.left {
  background: linear-gradient(45deg, #0f0, #00f);
  transform: rotateY(-90deg) translateZ(50px);
}

.right {
  background: linear-gradient(45deg, #00f, #0f0);
  transform: rotateY(90deg) translateZ(50px);
}

@keyframes rotate {
  from {
    transform: rotateY(0deg) rotateX(0deg);
  }

  to {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

</style>


================================================
FILE: loaders/myselfvenky_giant-impala-58.html
================================================
<div class="spinner">
  <div class="inner">
  </div>
</div>
<style>
/* From Uiverse.io by myselfvenky - Tags: loader */
.spinner {
 width: 40px;
 height: 40px;
 border-radius: 100%;
 background-color: aqua;
 display: grid;
 place-items: center;
 animation: zoomin 1.5s infinite alternate-reverse;
 position: relative;
}

.inner {
 background-color: #212121;
 width: 80%;
 height: 80%;
 border-radius: 100%;
}

@keyframes zoomin {
 0% {
  transform: scale(1);
  box-shadow: 0 0 100px 20px rgb(16, 71, 71);
 }

 100% {
  transform: scale(1.5);
  box-shadow: 0 0 100px 20px #000;
 }
}
</style>


================================================
FILE: loaders/omar-alghaish_grumpy-bobcat-32.html
================================================
<div class="loader-1">
  <div class="loader-2"></div>
  <div class="loader-3"></div>
  <div class="loader-4"></div>
</div>
<style>
/* From Uiverse.io by omar-alghaish - Tags: loader */
.loader-1 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid rgb(218, 203, 4);
  border-left-color: transparent;
  animation: animate_681 3s linear infinite;
  position: relative;
}

.loader-2 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 5px solid rgb(0, 119, 255);
  border-top-color: transparent;
  animation: animate_6810 .9s linear infinite;
  position: absolute;
  margin: 5px;
}

.loader-3 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 5px solid rgb(30, 255, 0);
  border-right-color: transparent;
  animation: animate_681 2s linear  infinite;
  position: absolute;
  margin: 15px;
}

.loader-4 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 5px solid rgb(194, 3, 92);
  border-bottom-color: transparent;
  animation: animate_6810 .7s linear  infinite;
  position: absolute;
  margin: 25px;
}

@keyframes animate_6810 {
  0% {
    transform: rotate(360deg);
  }
}

@keyframes animate_681 {
  0% {
    transform: rotate(-360deg);
  }
}
</style>


================================================
FILE: loaders/omar-alghaish_moody-wombat-53.html
================================================
<div class="loading">
    <div class="i"></div>
    <div class="a"></div>
    <div class="u"></div>
</div>
<style>
/* From Uiverse.io by omar-alghaish - Tags: loader */
.loading {
  background-color: rgba(255, 0, 0, 0);
  align-items: center;
  justify-content: center;
  display: flex;
}

.loading div {
  background-color: rgb(255, 217, 0);
  width: 20px;
  height: 20px;
  margin: 20px;
  border-radius: 50px;
  animation-name: load912355;
  animation-duration: .9s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  text-align: center;
  justify-content: center;
}

.loading .a {
  animation-delay: .3s;
}

.loading .u {
  animation-delay: .6s;
}

@keyframes load912355 {
  0% {
    transform: translateY(50px) scale(1);
  }

  100% {
    transform: translateY(10px) scale(1.8) rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/omar-alghaish_wicked-seahorse-54.html
================================================
<div class="loader">loading...</div>
<style>
/* From Uiverse.io by omar-alghaish - Tags: loader */
@keyframes animate8345 {
  0%,100% {
    filter: hue-rotate(0deg);
  }

  50% {
    filter: hue-rotate(360deg);
  }
}

.loader {
  color: rgb(0, 0, 0);
  background: linear-gradient(to right, #2d60ec, #3ccfda);
  font-size: 30px;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: animate8345 9s linear infinite;
  font-weight: bold;
}
</style>


================================================
FILE: loaders/omriluz_black-panda-47.html
================================================
<div class="container">
  <div class="road">
    <div class="police">
      <div class="light_beam"></div>
      <p>Police</p>
      <article>Police</article>
      <div class="side_mirror"></div>
      <span>
        <b></b>
        <i></i>
      </span>
    </div>
    <div class="police">
      <div class="light_beam"></div>
      <p>Police</p>
      <article>Police</article>
      <div class="side_mirror"></div>
      <span>
        <b></b>
        <i></i>
      </span>
    </div>
    <div class="taxi">
      <div class="light_beam"></div>
      <div class="side_mirror"></div>
      <span>
        <b></b>
        <i></i>
      </span>
    </div>
  </div>
  <span class="loading">Loading..</span>
</div>

<style>
/* From Uiverse.io by omriluz  - Website: https://www.youtube.com/watch?v=3sQupmAMUhs&ab_channel=OnlineTutorials - Name: online tutorials - Tags: flashy, animation, red, blue, loader */
.container {
  background-color: #355463;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.road {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: rotate(-15deg);
}

.road::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    #fff,
    #fff 50%,
    transparent 50%,
    transparent 100%
  );
  background-size: 50px;
  animation: animate_road 0.07s linear infinite;
}

@keyframes animate_road {
  0% {
    background-position: 50px 0;
  }
  100% {
    background-position: 0px 0;
  }
}

.police {
  position: absolute;
  left: -100px;
  width: 200px;
  height: 80px;
  background-color: #3f4c54;
  border-radius: 10px;
  box-shadow: -10px 10px rgba(0, 0, 0, 0.05);
  transform-style: preserve-3d;
  perspective: 800px;
  z-index: 10;
  animation: animate_police_car 5s linear infinite;
}

.police:nth-child(2) {
  left: 200px;
  animation-delay: -2.5s;
}

@keyframes animate_police_car {
  0% {
    transform: translateX(20px) translateY(-50px);
  }
  25% {
    transform: translateX(-10px) translateY(0);
  }
  50% {
    transform: translateX(20px) translateY(50px);
  }
  75% {
    transform: translateX(-10px) translateY(0px);
  }
  100% {
    transform: translateX(20px) translateY(-50px);
  }
}

.police::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 3px;
  width: 5px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 42px #fc3c25;
  background-color: #fc3c25;
}

.police::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 2px;
  width: 6px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 44px #fff;
  background-color: #fff;
}

.police span {
  position: absolute;
  inset: 5px 10px;
  background-color: #475b66;
  border-radius: 10px;
  overflow: hidden;
}

.police span::before {
  content: "911";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  color: #333;
  font-size: 1.15em;
  font-weight: 1000;
  letter-spacing: 0.1em;
  z-index: 10;
}

.police span::after {
  content: "";
  position: absolute;
  top: 35%;
  left: 60%;
  transform: translate(-50%, 50%);
  z-index: 100;
  width: 6px;
  height: 10px;
  background: #29282b;
  box-shadow: 0 -10px #1f5fff, 0 10px #df1b25;
}

.police span b {
  position: absolute;
  inset: 0 30px;
  background-color: #344650;
  border-radius: 10px;
}

.police span b::before {
  content: "";
  position: absolute;
  inset: 6px 25px;
  background: #ebebeb;
  border-radius: 5px;
}

.police span b::after {
  content: "";
  position: absolute;
  inset: 0 58px;
  background: #ebebeb;
}

.police span i {
  position: absolute;
  inset: 0;
}

.police span i::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 20px;
  width: 40px;
  height: 5px;
  background-color: #ebebeb;
  transform-origin: right;
  transform: rotate(15deg);
  box-shadow: 100px 34px #ebebeb;
}

.police span i::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 20px;
  width: 40px;
  height: 5px;
  background-color: #ebebeb;
  transform-origin: right;
  transform: rotate(-15deg);
  box-shadow: 100px -34px #ebebeb;
}

.light_beam {
  position: absolute;
  top: 5px;
  right: -2px;
  width: 10px;
  height: 70px;
  background-color: #0002;
  border-radius: 15px;
  transform-style: preserve-3d;
}

.light_beam::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 150px;
  height: 16px;
  background: linear-gradient(90deg, #fff6, transparent);
  transform-origin: left;
  transform: perspective(500px) rotateY(-50degkk);
}

.light_beam::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 150px;
  height: 16px;
  background: linear-gradient(90deg, #fff6, transparent);
  transform-origin: left;
  transform: perspective(500px) rotateY(-50deg);
}

.police p {
  position: absolute;
  top: 50%;
  left: -5px;
  color: #fff;
  text-transform: uppercase;
  z-index: 10;
  transform: translateY(-50%) rotate(90deg) scale(0.75);
}

.police article {
  position: absolute;
  top: 50%;
  right: -5%;
  color: #fff;
  text-transform: uppercase;
  z-index: 10;
  transform: translateY(-50%) rotate(270deg) scale(0.75);
}

.police .side_mirror {
  position: absolute;
  inset: 0;
}

.police .side_mirror::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 40px;
  width: 5px;
  height: 10px;
  background-color: #ebebeb;
  border-top-right-radius: 10px;
}

.police .side_mirror::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 40px;
  width: 5px;
  height: 10px;
  background-color: #ebebeb;
  border-bottom-right-radius: 10px;
}

.taxi {
  position: absolute;
  right: 200px;
  width: 200px;
  height: 80px;
  background-color: #f4b503;
  border-radius: 10px;
  box-shadow: -10px 10px rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
  perspective: 800px;
  z-index: 10;
  animation: animate_taxi 5s linear infinite;
  animation-delay: -5s;
}

@keyframes animate_taxi {
  0% {
    transform: translateX(20px) translateY(20px);
  }
  25% {
    transform: translateX(-50px) translateY(0px);
  }
  50% {
    transform: translateX(20px) translateY(-20px);
  }
  75% {
    transform: translateX(50px) translateY(0px);
  }
  100% {
    transform: translateX(20px) translateY(20px);
  }
}

.taxi::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 3px;
  width: 5px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 42px #fc3c25;
  background-color: #fc3c25;
}

.taxi::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 2px;
  width: 6px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 44px #fff;
  background-color: #fff;
}
.taxi span {
  position: absolute;
  inset: 5px 10px;
  background-color: #fdd206;
  border-radius: 10px;
  overflow: hidden;
}

.taxi span::before {
  content: "Taxi";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  background-color: #fff;
  padding: 2px;
  font: 0.75em;
  font-weight: 1000;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #0005;
  z-index: 1000;
}

.taxi span b {
  position: absolute;
  inset: 0 30px;
  background-color: #111;
  border-radius: 10px;
}

.taxi span b::before {
  content: "";
  position: absolute;
  inset: 6px 25px;
  background: #fdd206;
  border-radius: 5px;
}

.taxi span b::after {
  content: "";
  position: absolute;
  inset: 0 58px;
  background: #fdd206;
}

.taxi span i {
  position: absolute;
  inset: 0;
}

.taxi span i::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 20px;
  width: 40px;
  height: 5px;
  background-color: #fdd206;
  transform-origin: right;
  transform: rotate(15deg);
  box-shadow: 100px 34px #fdd206;
}

.taxi span i::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 20px;
  width: 40px;
  height: 5px;
  background-color: #fdd206;
  transform-origin: right;
  transform: rotate(-15deg);
  box-shadow: 100px -34px #fdd206;
}

.loading {
  position: absolute;
  left: 50%;
  bottom: 30%;
  background-color: black;
  padding: 10px;
  font-size: 1.25rem;
  color: #fff;
  font-weight: 1000;
  border-radius: 10px;
  animation: animate_loading 5s infinite linear;
}

@keyframes animate_loading {
  0% {
    transform: translateX(-20px) translateY(-20px);
  }
  25% {
    transform: translateX(50px) translateY(10px);
  }
  50% {
    transform: translateX(-20px) translateY(20px);
  }
  75% {
    transform: translateX(70px) translateY(-30px);
  }
  100% {
    transform: translateX(-20px) translateY(-20px);
  }
}

</style>
    

================================================
FILE: loaders/omriluz_spotty-mule-31.html
================================================
    <div class="container">
        <div class="loader"><span></span></div>
        <div class="loader"><span></span></div>
        <div class="loader"><i></i></div>
        <div class="loader"><i></i></div>
    </div>
<style>
/* From Uiverse.io by omriluz - Source: online tutorials - https://www.youtube.com/watch?v=n6ojK2HmROE&list=PL5e68lK9hEzeeXtsQCQYd9SAzj6u6wZpi&index=153&ab_channel=OnlineTutorials - Tags: flashy, animation, loader, colorful, multicolor */
.container {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, #0005);
}

.container .loader {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation: animate 2s linear infinite;
}

.container .loader:nth-child(2),
.container .loader:nth-child(4) {
  animation-delay: -1s;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
    filter: hue-rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
    filter: hue-rotate(0deg);
  }
}

.container .loader:nth-child(1)::before,
.container .loader:nth-child(2)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to top, transparent, rgba(0,255,249, 0.4));
  background-size: 100px 180px;
  background-repeat: no-repeat;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}

.container .loader i {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: #00fff9;
  border-radius: 50%;
  z-index: 100;
  box-shadow: 0 0 10px #00fff9,
    0 0 30px #00fff9,
    0 0 40px #00fff9,
    0 0 50px #00fff9,
    0 0 60px #00fff9,
    0 0 70px #00fff9,
    0 0 80px #00fff9,
    0 0 90px #00fff9,
    0 0 100px #00fff9;
}

.container .loader span {
  position: absolute;
  inset: 20px;
  background: #e8e8e8;
  border-radius: 50%;
  z-index: 1;
}
</style>


================================================
FILE: loaders/ozgeozkaraa01_strong-dragonfly-81.html
================================================
<!-- From Uiverse.io by ozgeozkaraa01 - Tags: loader, 3d loader -->
<div class="relative">
    <div class="w-20 h-20 border-lime-200 border-2 rounded-full"></div>
    <div class="w-20 h-20 border-lime-700 border-t-2 animate-spin rounded-full absolute left-0 top-0"></div>
</div>

<div class="relative">
    <div class="w-10 h-10 border-lime-200 border-2 rounded-full"></div>
    <div class="w-10 h-10 border-lime-700 border-t-2 animate-spin rounded-full absolute left-0 top-0"></div>
</div>

<div class="relative">
    <div class="w-5 h-5 border-lime-200 border-2 rounded-full"></div>
    <div class="w-5 h-5 border-lime-700 border-t-2 animate-spin rounded-full absolute left-0 top-0"></div>
</div>



================================================
FILE: loaders/pasha43_funny-shrimp-71.html
================================================
<div class="loader">
    <div class="loader-cube">
      <div class="face"></div>
      <div class="face"></div>
      <div class="face"></div>
      <div class="face"></div>
      <div class="face"></div>
      <div class="face"></div>
    </div>
  </div>

<style>
/* From Uiverse.io by pasha43 - Tags: loader, cube, effect loader, loading animation */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 800px;
}

.loader-cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  animation: rotate 4s infinite linear;
}

.loader-cube:before,
.loader-cube:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.loader-cube:before {
  transform: rotateX(90deg) translateZ(50px);
}

.loader-cube:after {
  transform: rotateY(90deg) translateZ(50px);
}

.loader-cube .face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgb(252, 248, 248);
  opacity: 0.8;
  border: 2px solid rgb(252, 250, 250);
}

.loader-cube .face:nth-child(1) {
  transform: rotateY(0deg) translateZ(50px);
  background-color: #e74c3c;
}

.loader-cube .face:nth-child(2) {
  transform: rotateX(90deg) translateZ(50px);
  background-color: #3498db;
}

.loader-cube .face:nth-child(3) {
  transform: rotateY(180deg) translateZ(50px);
  background-color: #2ecc71;
}

.loader-cube .face:nth-child(4) {
  transform: rotateX(-90deg) translateZ(50px);
  background-color: #f1c40f;
}

.loader-cube .face:nth-child(5) {
  transform: rotateY(90deg) translateZ(50px);
  background-color: #9b59b6;
}

.loader-cube .face:nth-child(6) {
  transform: rotateY(0deg) translateZ(-50px);
  background-color: #1abc9c;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }

  100% {
    transform: rotateY(1turn) rotateX(1turn);
  }
}

</style>


================================================
FILE: loaders/pedertanberg_helpless-sheep-31.html
================================================

<div class="loader"><div></div></div>
<style>
/* From Uiverse.io by pedertanberg - Tags: loader */
.loader {
 display: inline-block;
 position: relative;
 width: 80px;
 height: 80px;
 transform: rotate(45deg);
 transform-origin: 40px 40px;
}

.loader div {
 top: 32px;
 left: 32px;
 position: absolute;
 width: 32px;
 height: 32px;
 background: red;
 animation: loader45 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.loader div:after,
.loader div:before {
 content: " ";
 position: absolute;
 display: block;
 width: 32px;
 height: 32px;
 background: red;
}

.loader div:before {
 left: -24px;
 border-radius: 50% 0 0 50%;
}

.loader div:after {
 top: -24px;
 border-radius: 50% 50% 0 0;
}

@keyframes loader45 {
 0% {
  transform: scale(0.95);
 }

 5% {
  transform: scale(1.1);
 }

 39% {
  transform: scale(0.85);
 }

 45% {
  transform: scale(1);
 }

 60% {
  transform: scale(0.95);
 }

 100% {
  transform: scale(0.9);
 }
}
</style>


================================================
FILE: loaders/pierregirou_grumpy-cow-45.html
================================================
<div class="loader">
  <div class="form1">
    <div class="square"></div>
    <div class="square"></div>
  </div>
  <div class="form2">
    <div class="square"></div>
    <div class="square"></div>
  </div>
</div>
<style>
/* From Uiverse.io by pierregirou - Tags: 3d cude loader, css animation */
.loader {
  --color-success-300: #4bdf80;
  --color-success-500: #1ed760;
  --color-success-700: #18ac4d;
  display: block;
  justify-content: center;
  align-items: center;
  transform: rotate(5deg);
}

.loader .form1,
.loader .form2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.square {
  width: 50px;
  height: 50px;
  margin: 2px;
  background-color: rgba(150, 150, 150, 0.253);
  border-radius: 5px;
  animation: blinking 0.8s ease-in-out infinite;
  opacity: 0;
}

@keyframes blinking {
  0% {
    opacity: 0.25;
    background-color: rgba(4, 160, 30, 0.589);
  }

  50% {
    opacity: 0.5;
    background-color: var(--color-success-300);
  }

  75% {
    opacity: 0.75;
    background-color: var(--color-success-500);
  }

  100% {
    opacity: 1;
    background-color: var(--color-success-700);
  }
}

.form1 .square:nth-child(1) {
  animation-delay: 0.2s;
}

.form1 .square:nth-child(2) {
  animation-delay: 0.4s;
}

.form2 .square:nth-child(2) {
  animation-delay: 0.6s;
}

.form2 .square:nth-child(1) {
  animation-delay: 0.8s;
}
</style>


================================================
FILE: loaders/polidahiya_sharp-cow-38.html
================================================
<div class="loadingtext">
  <p>Loading</p>
</div>

<style>
/* From Uiverse.io by polidahiya  - Tags: simple, loading, loader, download, downloading */
.loadingtext p {
  color: white;
  position: relative;
}

.loadingtext p::after {
  position: absolute;
  animation: b 3s infinite linear;
  color: white;
  content: "";
  left: 105%;
}

@keyframes b {
  0% {
    content: "";
  }

  10% {
    content: ".";
  }

  40% {
    content: "..";
  }

  70% {
    content: "...";
  }

  100% {
    content: "";
  }
}

</style>
    

================================================
FILE: loaders/pradipkaityuiux_mean-yak-69.html
================================================
<div class="loader">Loading
  <span></span>
</div>
<style>
/* From Uiverse.io by pradipkaityuiux - Tags: loading, loader, circle loader, click animation, line loader, loading animation, bounce animation */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: transparent;
  border: 3px solid rgba(0, 102, 255, 0.1);
  border-radius: 50%;
  text-align: center;
  line-height: 150px;
  font-family: sans-serif;
  font-size: 20px;
  color: #0066ff;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 10px #0066ff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .15);
}

.loader::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top: 3px solid #0066ff;
  border-right: 3px solid #0066ff;
  border-radius: 50%;
  animation: animateC 2s linear infinite;
}

.loader span {
  display: block;
  position: absolute;
  top: calc(50% - 2px);
  left: 50%;
  width: 50%;
  height: 4px;
  background: transparent;
  transform-origin: left;
  animation: animate 2s linear infinite;
}

.loader span::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00aeff;
  top: -6px;
  right: -8px;
  box-shadow: 0 0 20px 5px #0066ff;
}

@keyframes animateC {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate {
  0% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(405deg);
  }
}
</style>


================================================
FILE: loaders/pravusagar_tidy-zebra-16.html
================================================
<div class="container">
  <div class="loader-container">
    <div class="loader"></div>
    <div class="loading-text">Loading...</div>
  </div>
</div>

<style>
/* From Uiverse.io by pravusagar  - Tags: loader, smooth, dark, light, neon, game, circle, text animation */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 0.6em;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    #3498db,
    #2ecc71,
    #e74c3c,
    #f39c12,
    #3498db
  );
  background-size: 900% 900%;
  animation: changeGradient 10s ease infinite; /* 10s duration, ease timing function, infinite loop */
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

@keyframes changeGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background-color: #ffffff87;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.loader {
  border: 8px solid #ffffff;
  border-top: 8px solid #0000005f;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

.loading-text {
  font-size: 20px;
  color: #121212;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

</style>
    

================================================
FILE: loaders/preshpi_friendly-donkey-60.html
================================================
<div class="spinner"></div>

<style>
/* From Uiverse.io by preshpi  - Website: https://10015.io/tools/css-loader-generator - Name: 10015 - Tags: loader, spinner, css */
.spinner {
  width: 46px;
  height: 46px;
  display: grid;
  animation: spinner-plncf9 3s infinite;
}

.spinner::before,
.spinner::after {
  content: "";
  grid-area: 1/1;
  border: 9px solid;
  border-radius: 50%;
  border-color: #474bff #474bff #0000 #0000;
  mix-blend-mode: darken;
  animation: spinner-plncf9 1s infinite linear;
}

.spinner::after {
  border-color: #0000 #0000 #dbdcef #dbdcef;
  animation-direction: reverse;
}

@keyframes spinner-plncf9 {
  100% {
    transform: rotate(1turn);
  }
}

</style>
    

================================================
FILE: loaders/r7chardgh_helpless-elephant-82.html
================================================
<div class="loader">
  <div class="leaf"></div>
  <div class="leaf"></div>
  <div class="leaf"></div>
</div>
<style>
/* From Uiverse.io by r7chardgh - Tags: loading, loader, adidas */
.loader {
  display: flex;
  gap: .5em;
}

.leaf {
  width: 1em;
  height: 3em;
  background-color: rgb(0, 0, 0,.3);
  clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 81%);
  transform: rotate(-30deg);
  animation: color 1200ms infinite;
  animation-delay: 800ms;
}

.leaf:nth-child(2) {
  clip-path: polygon(0% 35%,100% 35%,100% 100%,0% 81%);
  animation-delay: 400ms;
}

.leaf:nth-child(1) {
  clip-path: polygon(0% 70%,100% 70%,100% 100%,0% 81%);
  animation-delay: 0ms;
}

@keyframes color {
  from {
    background-color: lightblue;
  }

  to {
  }
}
</style>


================================================
FILE: loaders/radwakhalil22_spotty-pug-7.html
================================================
<div class="cube div">
    <div class="top div"></div>
    <div class="div">
      <span class="span" style="--i: 0">
        <p>loading..</p>
        <p>loading..</p>
      </span>
      <span class="span" style="--i: 1">
        <p>loading..</p>
        <p>loading..</p>
      </span>
      <span class="span" style="--i: 2">
        <p>loading..</p>
        <p>loading..</p>
      </span>
      <span class="span" style="--i: 3">
        <p>loading..</p>
        <p>loading..</p>
      </span>
    </div>
</div>
        
<style>
/* From Uiverse.io by radwakhalil22 - Tags: loader, box */
.cube {
  position: relative;
  height: 100px;
  width: 100px;
  transform-style: preserve-3d;
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotateX(-30deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(-30deg) rotateY(360deg);
  }
}

.cube .div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.cube .div .span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(calc(90deg * var(--i))) translateZ(50px);
  background-image: linear-gradient(
    -45deg,
    #000000,
    #13273f,
    #0d1729,
    #6a6a8d);
  background-size: 1200% 1200%;
  animation: AnimationName 30s ease infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

.cube .div .span p {
  position: absolute;
  font-size: 1em;
  color: white;
  transform: translateZ(20px);
}

.cube .div .span p:nth-child(1) {
  transform: translateZ(0) translateY(20px);
  color: rgba(0,0,0,0.1);
  filter: blur(2px);
}

@keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.top {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background-image: linear-gradient(
    -45deg,
    #000000,
    #13273f,
    #0d1729,
    #6a6a8d);
  transform: rotateX(90deg) translateZ(50px);
  background-size: 1200% 1200%;
  animation: AnimationName 30s ease infinite;
}

.top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-image: linear-gradient(
    -45deg,
    #000000,
    #0d0d0e,
    #030303,
    #000000);
  background-size: 1200% 1200%;
  animation: AnimationName 30s ease infinite;
  box-shadow: 0 0 120px #3d413e,0 0 120px #302f2f,0 0 120px #413f3f;
  transition: box-shadow 3s;
  transform: translateZ(-200px);
  filter: blur(40px);
}

@keyframes AnimationName2 {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


</style>


================================================
FILE: loaders/roroland_curly-stingray-36.html
================================================
<div class="loader">
  <p class="text">
    loading...
  </p>
</div>

<style>
/* From Uiverse.io by roroland - Tags: 3d, gradient, loader, text animation, particles */
.loader {
  --col1: rgba(228, 19, 141, 0.925);
  --col2: rgb(255, 179, 80);
  font-size: 2em;
  font-weight: 600;
  perspective: 800px;
  position: relative;
}

.loader::after,
.loader::before,
.loader .text::after,
.loader .text::before {
  perspective: 800px;
  animation: anim 2s ease-in-out infinite, dotMove 10s ease-out alternate infinite, move 10s linear infinite 1s;
  ;
  content: '●';
  color: var(--col1);
  position: absolute;
  translate: -60px 500px;
  width: 5px;
  height: 5px;
}

.loader::before {
  animation-delay: 3s;
  color: var(--col1);
}

.loader .text::before {
  color: var(--col2);
  animation-delay: 2s;
}

.loader .text::after {
  color: var(--col2);
}

.loader .text {
  animation: anim 20s linear infinite, move 10s linear infinite 1s;
  color: transparent;
  background-image: linear-gradient(90deg, 
  var(--col1) 0%,
  var(--col2) 100%);
  background-clip: text;
  background-size: 100%;
  background-repeat: no-repeat;
  transform: skew(5deg, -5deg);
  -webkit-background-clip: text;
  position: relative;
}

@keyframes anim {
  0%, 100% {
    text-shadow: 2px 0px 2px rgba(179, 158, 158, .5);
  }

  50% {
    background-size: 0%;
    background-position-x: left;
    text-shadow: 2px 10px 6px rgba(179, 158, 158, 1);
  }
}

@keyframes move {
  50% {
    translate: 0px 0px;
    rotate: x 60deg;
    transform: skew(-5deg, 5deg);
  }
}

@keyframes dotMove {
  0%, 100% {
    translate: -60px 300px;
  }

  50% {
    translate: 160px -250px;
    scale: .5;
    opacity: .85;
  }
}
</style>


================================================
FILE: loaders/sabbircoder07_fresh-tiger-75.html
================================================
<div class="progress">
      <div class="inner"></div>
</div>
<style>
/* From Uiverse.io by sabbircoder07 - Tags: loader, animated, css3 */
.progress {
  background-color: #ffffff;
  width: 220px;
  height: 20px;
  border-radius: 100px;
  overflow: hidden;
  backface-visibility: hidden;
}

.inner {
  background-image: linear-gradient(to left, #00cdac, #00c2c9, #00b4e3, #00a2f1, #008cef, #0088eb, #0085e6, #0081e2, #0090de, #009bd2, #00a3c1, #02aab0);
  height: 100%;
  transform-origin: left;
  animation: progress 2s infinite;
}

@keyframes progress {
  0% {
    transform: scaleX(10%) translateX(-10%);
  }

  100% {
    transform: scaleX(80%) translateX(150%);
  }
}

</style>


================================================
FILE: loaders/sahilxkhadka_proud-octopus-27.html
================================================
<!-- From Uiverse.io by sahilxkhadka - Tags: loader, message, animated, skeleton loading  -->
<div class="relative flex w-64 animate-pulse gap-2 p-4">
  <div class="h-12 w-12 rounded-full bg-slate-400"></div>
  <div class="flex-1">
    <div class="mb-1 h-5 w-3/5 rounded-lg bg-slate-400 text-lg"></div>
    <div class="h-5 w-[90%] rounded-lg bg-slate-400 text-sm"></div>
  </div>
  <div class="absolute bottom-5 right-0 h-4 w-4 rounded-full bg-slate-400"></div>
</div>



================================================
FILE: loaders/sahilxkhadka_quiet-monkey-96.html
================================================
<!-- From Uiverse.io by sahilxkhadka - Tags: loading, form, loader, animated, skeleton loading  -->
<div class="animate-pulse flex flex-col items-center gap-4 w-60">
  <div>
    <div class="w-48 h-6 bg-slate-400 rounded-md"></div>
    <div class="w-28 h-4 bg-slate-400 mx-auto mt-3 rounded-md"></div>
  </div>
  <div class="h-7 bg-slate-400 w-full rounded-md"></div>
  <div class="h-7 bg-slate-400 w-full rounded-md"></div>
  <div class="h-7 bg-slate-400 w-full rounded-md"></div>
  <div class="h-7 bg-slate-400 w-1/2 rounded-md"></div>
</div>



================================================
FILE: loaders/satyamchaudharydev_afraid-horse-51.html
================================================

<div class="spinner"></div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.spinner {
 --size: 30px;
 --first-block-clr: #005bba;
 --second-block-clr: #fed500;
 --clr: #111;
 width: 100px;
 height: 100px;
 position: relative;
}

.spinner::after,.spinner::before {
 box-sizing: border-box;
 position: absolute;
 content: "";
 width: var(--size);
 height: var(--size);
 top: 50%;
 animation: up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
 left: 50%;
 background: var(--first-block-clr);
}

.spinner::after {
 background: var(--second-block-clr);
 top: calc(50% - var(--size));
 left: calc(50% - var(--size));
 animation: down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}

@keyframes down {
 0%, 100% {
  transform: none;
 }

 25% {
  transform: translateX(100%);
 }

 50% {
  transform: translateX(100%) translateY(100%);
 }

 75% {
  transform: translateY(100%);
 }
}

@keyframes up {
 0%, 100% {
  transform: none;
 }

 25% {
  transform: translateX(-100%);
 }

 50% {
  transform: translateX(-100%) translateY(-100%);
 }

 75% {
  transform: translateY(-100%);
 }
}

</style>


================================================
FILE: loaders/satyamchaudharydev_clever-earwig-74.html
================================================
<div class="spinner">
    <svg viewBox="25 25 50 50" class="circular">
        <circle stroke-miterlimit="10" stroke-width="3" fill="none" r="20" cy="50" cx="50" class="path"></circle>
    </svg>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.spinner {
  --red: #d62d20;
  --blue: #0057e7;
  --green: #008744;
  --yellow: #ffa700;
  position: relative;
  width: 60px;
}

.spinner:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.circular {
  animation: rotate73451 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash0175 1.5s ease-in-out infinite, color7123 6s ease-in-out infinite;
  stroke-linecap: round;
}

@keyframes rotate73451 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash0175 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes color7123 {
  100%, 0% {
    stroke: var(--red);
  }

  40% {
    stroke: var(--blue);
  }

  66% {
    stroke: var(--green);
  }

  80%, 90% {
    stroke: var(--yellow);
  }
}



</style>


================================================
FILE: loaders/satyamchaudharydev_fresh-frog-39.html
================================================
<div class="spinner">
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.spinner {
 --clr: rgb(0, 113, 128);
 --gap: 6px;
   /* gap between each circle */
 width: 100px;
 height: 100px;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: var(--gap);
}

.spinner span {
 width: 20px;
 height: 20px;
 border-radius: 100%;
 background-color: var(--clr);
 opacity: 0;
}

.spinner span:nth-child(1) {
 animation: fade 1s ease-in-out infinite;
}

.spinner span:nth-child(2) {
 animation: fade 1s ease-in-out 0.33s infinite;
}

.spinner span:nth-child(3) {
 animation: fade 1s ease-in-out 0.66s infinite;
}

@keyframes fade {
 0%, 100% {
  opacity: 1;
 }

 60% {
  opacity: 0;
 }
}

</style>


================================================
FILE: loaders/satyamchaudharydev_horrible-snake-35.html
================================================
<div class="loader">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.loader {
 --loader: rgb(49, 180, 255);
 --loader-size: 30px;
 position: relative;
 width: 100px;
 height: 40px;
 overflow: hidden;
 transition: .5s;
 letter-spacing: 2px
}

.loader span {
 position: absolute;
}

.loader span:nth-child(1) {
 top: 0;
 left: -100%;
 width: 100%;
 height: var(--loader-size);
 background: linear-gradient(90deg, transparent, var(--loader));
 animation: loader-anim1 1s linear infinite;
}

@keyframes loader-anim1 {
 0% {
  left: -100%;
 }

 50%,100% {
  left: 100%;
 }
}

.loader  span:nth-child(2) {
 top: -100%;
 right: 0;
 width: var(--loader-size);
 height: 100%;
 background: linear-gradient(180deg, transparent, var(--loader));
 animation: loader-anim2 1s linear infinite;
 animation-delay: .25s
}

@keyframes loader-anim2 {
 0% {
  top: -100%;
 }

 50%,100% {
  top: 100%;
 }
}

.loader span:nth-child(3) {
 bottom: 0;
 right: -100%;
 width: 100%;
 height: var(--loader-size);
 background: linear-gradient(270deg, transparent, var(--loader));
 animation: loader-anim3 1s linear infinite;
 animation-delay: .5s
}

@keyframes loader-anim3 {
 0% {
  right: -100%;
 }

 50%,100% {
  right: 100%;
 }
}

.loader span:nth-child(4) {
 bottom: -100%;
 left: 0;
 width: var(--loader-size);
 height: 100%;
 background: linear-gradient(360deg, transparent, var(--loader));
 animation: loader-anim4 1s linear infinite;
 animation-delay: .75s
}

@keyframes loader-anim4 {
 0% {
  bottom: -100%;
 }

 50%,100% {
  bottom: 100%;
 }
}
</style>


================================================
FILE: loaders/satyamchaudharydev_popular-snake-36.html
================================================
<div class="loader">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.loader {
 --size: 40px;
 display: flex;
 gap: 0.6rem;
}

.box {
 width: var(--size);
 height: var(--size);
 background: #0270e1;
 animation: rotate 2s infinite;
}

.box:nth-child(2) {
 animation-delay: 0.25s;
}

.box:nth-child(3) {
 animation-delay: 0.5s;
}

@keyframes rotate {
 50% {
  transform: rotate(180deg)
 }
}
</style>


================================================
FILE: loaders/satyamchaudharydev_red-cow-21.html
================================================

<div class="loader"></div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.loader {
  display: block;
  --height-of-loader: 4px;
  --loader-color: #0071e2;
  width: 130px;
  height: var(--height-of-loader);
  border-radius: 30px;
  background-color: rgba(0,0,0,0.2);
  position: relative;
}

.loader::before {
  content: "";
  position: absolute;
  background: var(--loader-color);
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  border-radius: 30px;
  animation: moving 1s ease-in-out infinite;
  ;
}

@keyframes moving {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}
</style>


================================================
FILE: loaders/satyamchaudharydev_silent-owl-69.html
================================================
<div class="loader">
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.loader {
 --clr: #3498db;
 /* color of spining  */
 width: 50px;
 height: 50px;
 position: relative;
}

.loader:before, .loader:after {
 content: "";
 position: absolute;
 top: -10px;
 left: -10px;
 width: 100%;
 height: 100%;
 border-radius: 100%;
 border: 10px solid transparent;
 border-top-color: var(--clr);
}

.loader:before {
 z-index: 100;
 animation: spin 1s infinite;
}

.loader:after {
 border: 10px solid #ccc;
}

@keyframes spin {
 0% {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
 }

 100% {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
 }
}

</style>


================================================
FILE: loaders/satyamchaudharydev_spicy-warthog-11.html
================================================

<div class="spinner"></div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.spinner {
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 width: 100px;
 height: 100px;
}

.spinner::after {
 content: "";
 position: absolute;
 width: 50px;
 height: 50px;
 background-color: var(--blue);
 animation: flip 1s infinite;
}

@keyframes flip {
 0% {
  transform: rotate(0);
 }

 50% {
  transform: rotateY(180deg);
 }

 100% {
  transform: rotateY(180deg)  rotateX(180deg);
 }
}
</style>


================================================
FILE: loaders/satyamchaudharydev_splendid-husky-54.html
================================================
<div class="spinner">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.spinner {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin-left: -75px;
}

.spinner span {
  position: absolute;
  top: 50%;
  left: var(--left);
  width: 35px;
  height: 7px;
  background: #ffff;
  animation: dominos 1s ease infinite;
  box-shadow: 2px 2px 3px 0px black;
}

.spinner span:nth-child(1) {
  --left: 80px;
  animation-delay: 0.125s;
}

.spinner span:nth-child(2) {
  --left: 70px;
  animation-delay: 0.3s;
}

.spinner span:nth-child(3) {
  left: 60px;
  animation-delay: 0.425s;
}

.spinner span:nth-child(4) {
  animation-delay: 0.54s;
  left: 50px;
}

.spinner span:nth-child(5) {
  animation-delay: 0.665s;
  left: 40px;
}

.spinner span:nth-child(6) {
  animation-delay: 0.79s;
  left: 30px;
}

.spinner span:nth-child(7) {
  animation-delay: 0.915s;
  left: 20px;
}

.spinner span:nth-child(8) {
  left: 10px;
}

@keyframes dominos {
  50% {
    opacity: 0.7;
  }

  75% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  80% {
    opacity: 1;
  }
}

</style>


================================================
FILE: loaders/satyamchaudharydev_strange-turkey-17.html
================================================
<div class="loader">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
/* From cssbuttons.io by @satyamchaudharydev */
.loader {
 --loader: rgb(221, 65, 226);
 --loader-size: 3px;
 position: relative;
 width: 40px;
 height: 40px;
 overflow: hidden;
 transition: .5s;
 letter-spacing: 2px
}

.loader span {
 position: absolute;
}

.loader span:nth-child(1) {
 top: 0;
 left: -100%;
 width: 100%;
 height: var(--loader-size);
 background: linear-gradient(90deg, transparent, var(--loader));
 animation: loader-anim1 1s linear infinite;
}

@keyframes loader-anim1 {
 0% {
  left: -100%;
 }

 50%,100% {
  left: 100%;
 }
}

.loader  span:nth-child(2) {
 top: -100%;
 right: 0;
 width: var(--loader-size);
 height: 100%;
 background: linear-gradient(180deg, transparent, var(--loader));
 animation: loader-anim2 1s linear infinite;
 animation-delay: .25s
}

@keyframes loader-anim2 {
 0% {
  top: -100%;
 }

 50%,100% {
  top: 100%;
 }
}

.loader span:nth-child(3) {
 bottom: 0;
 right: -100%;
 width: 100%;
 height: var(--loader-size);
 background: linear-gradient(270deg, transparent, var(--loader));
 animation: loader-anim3 1s linear infinite;
 animation-delay: .5s
}

@keyframes loader-anim3 {
 0% {
  right: -100%;
 }

 50%,100% {
  right: 100%;
 }
}

.loader span:nth-child(4) {
 bottom: -100%;
 left: 0;
 width: var(--loader-size);
 height: 100%;
 background: linear-gradient(360deg, transparent, var(--loader));
 animation: loader-anim4 1s linear infinite;
 animation-delay: .75s
}

@keyframes loader-anim4 {
 0% {
  bottom: -100%;
 }

 50%,100% {
  bottom: 100%;
 }
}
</style>


================================================
FILE: loaders/satyamchaudharydev_tough-baboon-84.html
================================================

<div class="ball"></div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.ball {
 --size: 20px;
 --timing: 0.7s;
 --displace: 70px;
 border-radius: 50%;
 width: var(--size);
 height: var(--size);
 background: #000;
 margin-right: var(--displace);
 animation: animation321 var(--timing) infinite alternate
    cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes animation321 {
 0% {
  background: #4284f3;
  transform: translateX(var(--displace));
 }

 100% {
  background: #ea4335;
  transform: translateX(00px);
 }
}

</style>


================================================
FILE: loaders/satyamchaudharydev_ugly-bulldog-75.html
================================================
<div class="loading">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.loading {
 --speed-of-animation: 0.9s;
 --gap: 6px;
 --first-color: #4c86f9;
 --second-color: #49a84c;
 --third-color: #f6bb02;
 --fourth-color: #f6bb02;
 --fifth-color: #2196f3;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100px;
 gap: 6px;
 height: 100px;
}

.loading span {
 width: 4px;
 height: 50px;
 background: var(--first-color);
 animation: scale var(--speed-of-animation) ease-in-out infinite;
}

.loading span:nth-child(2) {
 background: var(--second-color);
 animation-delay: -0.8s;
}

.loading span:nth-child(3) {
 background: var(--third-color);
 animation-delay: -0.7s;
}

.loading span:nth-child(4) {
 background: var(--fourth-color);
 animation-delay: -0.6s;
}

.loading span:nth-child(5) {
 background: var(--fifth-color);
 animation-delay: -0.5s;
}

@keyframes scale {
 0%, 40%, 100% {
  transform: scaleY(0.05);
 }

 20% {
  transform: scaleY(1);
 }
}
</style>


================================================
FILE: loaders/satyamchaudharydev_yellow-dragon-0.html
================================================
<div class="spinner">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.spinner {
 --gap: 5px;
 --clr: #d62d20;
 --height: 23px;
 width: 100px;
 height: 100px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: var(--gap);
}

.spinner span {
 background: var(--clr);
 width: 6px;
 height: var(--height);
 animation: grow 1s ease-in-out infinite;
}

.spinner span:nth-child(2) {
 animation: grow 1s ease-in-out 0.15s infinite;
}

.spinner span:nth-child(3) {
 animation: grow 1s ease-in-out 0.3s infinite;
}

.spinner span:nth-child(4) {
 animation: grow 1s ease-in-out 0.475s infinite;
}

@keyframes grow {
 0%,100% {
  transform: scaleY(1);
 }

 50% {
  transform: scaleY(1.8);
 }
}
</style>


================================================
FILE: loaders/satyamchaudharydev_young-puma-4.html
================================================
<div class="spinner">
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.spinner {
 --size-of-spinner: 50px;
 --spinner-border-width: 4px;
 --spinner-color: #08c18a;
 --circle-color: #8bc34a24;
 --speed-of-animation: 2s;
 --scale: 1.3;
 width: var(--size-of-spinner);
 height: var(--size-of-spinner);
 background: var(--circle-color);
 border-radius: 50%;
 position: relative;
}

.spinner::after {
 content: "";
 display: block;
 position: absolute;
 border-radius: 50%;
 inset: 0;
 border: var(--spinner-border-width) solid var(--spinner-color);
 border-left-color: transparent;
 border-right-color: transparent;
 animation: spinny var(--speed-of-animation) linear infinite;
}

@keyframes spinny {
 0% {
  transform: rotate(0deg) scale(1)
 }

 50% {
  transform: rotate(45deg) scale(var(--scale))
 }

 100% {
  transform: rotate(360deg) scale(1)
 }
}
</style>


================================================
FILE: loaders/seyed-mohsen-mousavi_tough-termite-47.html
================================================
<button class="loader__btn">
  <div class="loader"></div>
  Loading ...
</button>

<style>
/* From Uiverse.io by seyed-mohsen-mousavi  - Tags: loading, loader, btn, loading animation */
.loader__btn {
  border: none;
  background-color: white;
  padding: 10px 20px 10px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 15px;
  border-radius: 12px;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
    0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  cursor: wait;
}

.loader {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: transparent;
  border-radius: 50%;
}

.loader {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: transparent;
  width: 23px;
  height: 23px;
  animation: spin89345 1s linear infinite;
}

@keyframes spin89345 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

</style>
    

================================================
FILE: loaders/shadowfax29_silly-octopus-9.html
================================================
<div class="container">
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
</div>
<style>
/* From Uiverse.io by shadowfax29 - Source: @satyamchaudharydev - Tags: simple, loader, falldown */
.container {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.loader {
  width: 10px;
  height: 30px;
  left: var(--left);
  border-radius: 10px 50px;
  box-shadow: 0px 0px 5px black;
  animation: dominos 1s ease infinite;
}

.loader:nth-child(1) {
  --left: 80px;
  animation-delay: 0.325s;
  background-color: red;
}

.loader:nth-child(3) {
  left: 60px;
  animation-delay: 0.625s;
  background-color: blue;
}

.loader:nth-child(5) {
  animation-delay: 0.865s;
  left: 40px;
  background-color: green;
}

.loader:nth-child(2) {
  --left: 70px;
  animation-delay: 0.5s;
  background-color: yellow;
}

.loader:nth-child(4) {
  animation-delay: 0.74s;
  left: 50px;
  background-color: orange;
}

@keyframes dominos {
  50% {
    opacity: 0.7;
  }

  75% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  80% {
    opacity: 1;
  }
}





</style>


================================================
FILE: loaders/shadowfax29_slippery-bullfrog-20.html
================================================
<div class="sharingon">
  <div class="ring">
  <div class="to"></div>
<div class="to"></div>
<div class="to"></div>
<div class="circle"></div>
</div>
</div>
<style>
/* From Uiverse.io by shadowfax29 - Source: shadowfax29 - Tags: circle loader, aesthetic, sharingon  */
.sharingon {
  width: 6em;
  height: 6em;
  background-color: red;
  border: 6px solid black;
  animation: rot 1s ease-in-out infinite;
}

.ring {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  width: 3.5em;
  height: 3.5em;
  border: 4px solid rgb(110, 13 ,13 ,0.5);
  transform: translate(-50%,-50%);
}

.sharingon, .ring, .to,.circle {
  border-radius: 50%;
}

.to,.circle {
  position: absolute;
  content: "";
  width: 0.9em;
  height: 0.9em;
  background-color: black;
}

.to:nth-child(1) {
  top: -0.5em;
  left: 50%;
  transform: translate(-40%);
}

.to::before {
  content: "";
  position: absolute;
  top: -0.5em;
  right: -0.2em;
  width: 1.1em;
  height: 0.9em;
  box-sizing: border-box;
  border-left: 16px solid black;
  border-radius: 100% 0 0;
}

.to:nth-child(2) {
  bottom: 0.5em;
  left: -0.35em;
  transform: rotate(-120deg);
}

.to:nth-child(3) {
  bottom: 0.5em;
  right: -0.35em;
  transform: rotate(120deg);
}

.circle {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 20px 1px;
  width: 1em;
  height: 1em;
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/shadowfax29_stupid-lionfish-35.html
================================================
<div class="loading">
 <svg viewBox="0 0 187.3 93.7" height="200px" width="300px" class="svgbox">
  <defs>
    <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="gradient">
      <stop stop-color="pink" offset="0%"></stop>
      
         <stop stop-color="blue" offset="100%"></stop>
    </linearGradient>
  </defs>

  <path stroke="url(#gradient)" d="M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z"></path>
</svg>

</div>
<style>
/* From Uiverse.io by shadowfax29 - Tags: loader, infinitity, Infinite Spin */
.svgbox {
  --blue: rgb(148, 66, 63);
  stroke: var(--blue);
  stroke-width: 5;
  fill: none;
  stroke-dasharray: 50, 14;
  stroke-dashoffset: 192;
  animation: dash_682 1.4s linear infinite;
}

@keyframes dash_682 {
  72.5% {
    opacity: 1;
  }

  to {
    stroke-dashoffset: 1;
  }
}



</style>


================================================
FILE: loaders/shadowmurphy_big-lionfish-7.html
================================================
<main>
	<svg height="128px" width="128px" viewBox="0 0 128 128" class="pl1">
		<defs>
			<linearGradient y2="1" x2="1" y1="0" x1="0" id="pl-grad">
				<stop stop-color="#000" offset="0%"></stop>
				<stop stop-color="#fff" offset="100%"></stop>
			</linearGradient>
			<mask id="pl-mask">
				<rect fill="url(#pl-grad)" height="128" width="128" y="0" x="0"></rect>
			</mask>
		</defs>
		<g fill="var(--primary)">
			<g class="pl1__g">
				<g transform="translate(20,20) rotate(0,44,44)">
					<g class="pl1__rect-g">
						<rect height="40" width="40" ry="8" rx="8" class="pl1__rect"></rect>
						<rect transform="translate(0,48)" height="40" width="40" ry="8" rx="8" class="pl1__rect"></rect>
					</g>
					<g transform="rotate(180,44,44)" class="pl1__rect-g">
						<rect height="40" width="40" ry="8" rx="8" class="pl1__rect"></rect>
						<rect transform="translate(0,48)" height="40" width="40" ry="8" rx="8" class="pl1__rect"></rect>
					</g>
				</g>
			</g>
		</g>
		<g mask="url(#pl-mask)" fill="hsl(343,90%,50%)">
			<g class="pl1__g">
				<g transform="translate(20,20) rotate(0,44,44)">
					<g class="pl1__rect-g">
						<rect height="40" width="40" ry="8" rx="8" class="pl1__rect"></rect>
						<rect transform="translate(0,48)" height="40" width="40" ry="8" rx="8" class="pl1__rect"></rect>
					</g>
					<g transform="rotate(180,44,44)" class="pl1__rect-g">
						<rect height="40" width="40" ry="8" rx="8" class="pl1__rect"></rect>
						<rect transform="translate(0,48)" height="40" width="40" ry="8" rx="8" class="pl1__rect"></rect>
					</g>
				</g>
			</g>
		</g>
	</svg>
</main>
<style>
/* From Uiverse.io by shadowmurphy - Tags: simple, material design, neumorphism, skeuomorphism, loader */
.pl1 {
  display: block;
  width: 8em;
  height: 8em;
}

.pl1__g,
  .pl1__rect {
  animation: pl1-a 1.5s cubic-bezier(0.65,0,0.35,1) infinite;
}

.pl1__g {
  transform-origin: 64px 64px;
}

.pl1__rect:first-child {
  animation-name: pl1-b;
}

.pl1__rect:nth-child(2) {
  animation-name: pl1-c;
}

@keyframes pl1-a {
  from {
    transform: rotate(0);
  }

  80%,
      to {
    animation-timing-function: steps(1,start);
    transform: rotate(90deg);
  }
}

@keyframes pl1-b {
  from {
    animation-timing-function: cubic-bezier(0.33,0,0.67,0);
    width: 40px;
    height: 40px;
  }

  20% {
    animation-timing-function: steps(1,start);
    width: 40px;
    height: 0;
  }

  60% {
    animation-timing-function: cubic-bezier(0.65,0,0.35,1);
    width: 0;
    height: 40px;
  }

  80%,
      to {
    width: 40px;
    height: 40px;
  }
}

@keyframes pl1-c {
  from {
    animation-timing-function: cubic-bezier(0.33,0,0.67,0);
    width: 40px;
    height: 40px;
    transform: translate(0,48px);
  }

  20% {
    animation-timing-function: cubic-bezier(0.33,1,0.67,1);
    width: 40px;
    height: 88px;
    transform: translate(0,0);
  }

  40% {
    animation-timing-function: cubic-bezier(0.33,0,0.67,0);
    width: 40px;
    height: 40px;
    transform: translate(0,0);
  }

  60% {
    animation-timing-function: cubic-bezier(0.33,1,0.67,1);
    width: 88px;
    height: 40px;
    transform: translate(0,0);
  }

  80%,
      to {
    width: 40px;
    height: 40px;
    transform: translate(48px,0);
  }
}
</style>


================================================
FILE: loaders/shadowmurphy_ordinary-snake-31.html
================================================
<div class="loader">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
  <div class="circle circle-4"></div>
</div>

<style>
/* From Uiverse.io by shadowmurphy - Tags: green, loader, circle loader */
.loader {
  position: relative;
  width: 600px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  position: absolute;
  border-radius: 50%;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.circle-1 {
  width: 60px;
  height: 60px;
  background: linear-gradient(109.8deg, rgba(52, 248, 35, 0.1855) 0%, rgba(68, 253, 38, 0.196) 100%);
  animation-name: circle-1-animation;
}

.circle-3 {
  width: 40px;
  height: 40px;
  background: linear-gradient(109.8deg, rgba(52, 248, 35, 0.265) 0%, rgba(68, 253, 38, 0.28) 100%);
  animation-name: circle-3-animation;
}

.circle-4 {
  width: 20px;
  height: 20px;
  background: linear-gradient(109.8deg, rgba(52, 248, 35, 0.265) 0%, rgba(68, 253, 38, 0.28) 100%);
  animation-name: circle-4-animation;
}

@keyframes circle-1-animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes circle-2-animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes circle-3-animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes circle-4-animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

</style>


================================================
FILE: loaders/shadowmurphy_wicked-fish-61.html
================================================
<div class="loader">
  <div class="shape"></div>
</div>
<style>
/* From Uiverse.io by shadowmurphy - Tags: gradient, loader, animated */
.loader {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 200px;
  height: 15px;
  background-color: rgb(2, 2, 17);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-top: 15px;
}

.shape {
  width: 50px;
  height: 15px;
  background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);
  border-radius: 25px;
  position: absolute;
  animation: slide 1.9s linear infinite;
  background-size: 200%;
}

@keyframes slide {
  0% {
    left: 0;
  }

  50% {
    left: calc(100% - 50px);
  }

  100% {
    left: 0;
  }
}

@keyframes gradientChange {
  0%, 100% {
    background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);
  }

  50% {
    background-image: linear-gradient(144deg, #00DDEB, #5B42F3 50%, #AF40FF);
  }
}
</style>


================================================
FILE: loaders/shadowmurphy_yellow-lizard-30.html
================================================
<svg viewBox="0 0 205 615" class="cola">
  <path d="M47 595c-8 0-26-6-26-34V261c0-17 9-29 16-38s16-28 16-28L68 59l-4-5s3-30 7-36 14-6 32-6 28 0 32 6 7 36 7 36l-4 5 15 136s9 19 16 28 16 21 16 38v300c0 28-18 34-26 34H47z"></path>
</svg>
<style>
/* From Uiverse.io by shadowmurphy - Tags: loader, bottle, cola */
.cola {
  --pathlength: 1384;
  width: 45px;
  fill: transparent;
  stroke: black;
  stroke-linecap: round;
  stroke-width: 15px;
  stroke-dashoffset: var(--pathlength);
  stroke-dasharray: 0 var(--pathlength);
  animation: loader 8s cubic-bezier(.5,.1,.5,1) infinite both;
}

@keyframes loader {
  90%, 100% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--pathlength) 0;
  }
}
</style>


================================================
FILE: loaders/sonex-ICB_hungry-cougar-91.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by sonex-ICB  - Tags: simple, animation, loader, rotate, animated, creative, spin, loading animation */
.loader {
  border: 10px inset tomato;
  padding: 12px;
  transform: rotate(45deg);
  animation: loader1 1s ease-in-out infinite;
}
@keyframes loader1 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
  }
}

</style>
    

================================================
FILE: loaders/terenceodonoghue_friendly-pug-5.html
================================================
<div class="container">
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
/* From Uiverse.io by terenceodonoghue - Tags: loader */
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  gap: 0.625em;
  transform: translate(-50%, -50%);
}

.container span {
  border-radius: 50%;
  height: 1.5em;
  width: 1.5em;
}

.container span::before {
  content: "";
  display: block;
  border-radius: inherit;
  height: inherit;
  width: inherit;
  background-color: inherit;
  animation: ripple 1.8s ease-out infinite;
  animation-delay: inherit;
  z-index: -1;
}

.container span:nth-of-type(1) {
  background-color: #84cdfa;
}

.container span:nth-of-type(2) {
  background-color: #5ad1cd;
  animation-delay: 0.2s;
}

.container span:nth-of-type(3) {
  background-color: #9b59b6;
  animation-delay: 0.4s;
}

@keyframes ripple {
  from {
    opacity: 1;
    transform: scale(0);
  }

  to {
    opacity: 0;
    transform: scale(3);
  }
}
</style>


================================================
FILE: loaders/terenceodonoghue_rare-cow-16.html
================================================
<div class="container">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
/* From Uiverse.io by terenceodonoghue - Tags: loader */
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  height: 96px;
  width: 96px;
  animation: rotate_3922 1.2s linear infinite;
  background-color: #9b59b6;
  background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
}

.container span {
  position: absolute;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  background-color: #9b59b6;
  background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
}

.container span:nth-of-type(1) {
  filter: blur(5px);
}

.container span:nth-of-type(2) {
  filter: blur(10px);
}

.container span:nth-of-type(3) {
  filter: blur(25px);
}

.container span:nth-of-type(4) {
  filter: blur(50px);
}

.container::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: #fff;
  border: solid 5px #ffffff;
  border-radius: 50%;
}

@keyframes rotate_3922 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

</style>


================================================
FILE: loaders/themrsami_heavy-puma-9.html
================================================
<!-- From Uiverse.io by themrsami - Tags: loader, tailwind, tailwindcss, themrsami -->
<div class="flex justify-center items-center h-screen">
  <div class="animate-spin ease-linear rounded-full w-10 h-10 border-t-2 border-b-2 border-purple-500"></div>
  <div class="animate-spin ease-linear rounded-full w-10 h-10 border-t-2 border-b-2 border-red-500 ml-3"></div>
  <div class="animate-spin ease-linear rounded-full w-10 h-10 border-t-2 border-b-2 border-blue-500 ml-3"></div>
</div>




================================================
FILE: loaders/themrsami_weak-kangaroo-79.html
================================================
<!-- From Uiverse.io by themrsami - Tags: material design, blue, loading, loader, spinner, smooth, dark, glitch -->
<div class="flex justify-center items-center">
  <div class="animate-spin rounded-full h-12 w-32 border-t-2 border-b-2 border-blue-900"></div>
</div>




================================================
FILE: loaders/tilakjain123_shy-yak-36.html
================================================
<div class="loader">
    <div></div>

    <div></div>
</div>
<style>
/* From Uiverse.io by tilakjain123 - Tags: loader */
.loader {
  position: relative;
  width: 64px;
  height: 64px;
}

.loader div {
  position: absolute;
  border: 4px solid #454ade;
  border-radius: 50%;
  animation: loader8435 1s ease-out infinite;
}

.loader div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes loader8435 {
  0% {
    top: 32px;
    left: 32px;
    width: 0;
    height: 0;
    opacity: 1;
  }

  100% {
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    opacity: 0;
  }
}

</style>


================================================
FILE: loaders/timlmit_average-fish-52.html
================================================
<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<style>
/* From Uiverse.io by timlmit - Tags: loader */
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #fff;
}

.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}

.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}

.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}

.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}

.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes lds-spinner {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

</style>


================================================
FILE: loaders/timlmit_stupid-mouse-79.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by timlmit - Tags: loader */
.loader {
  display: block;
  position: relative;
  height: 32px;
  width: 200px;
  background: #fff;
  border: 2px solid #fff;
  color: rgb(223, 60, 60);
  overflow: hidden;
}

.loader::before {
  content: '';
  background: rgb(223, 60, 60);
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  animation: loading_302 10s linear infinite;
}

.loader:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 18px;
  line-height: 32px;
  color: rgb(0,255,255);
  mix-blend-mode: difference;
  animation: percentage_302 10s linear infinite;
}

@keyframes loading_302 {
  0% {
    width: 0
  }

  100% {
    width: 100%
  }
}

@keyframes percentage_302 {
  0% {
    content: "0%"
  }

  5% {
    content: "5%"
  }

  10% {
    content: "10%"
  }

  20% {
    content: "20%"
  }

  30% {
    content: "30%"
  }

  40% {
    content: "40%"
  }

  50% {
    content: "50%"
  }

  60% {
    content: "60%"
  }

  70% {
    content: "70%"
  }

  80% {
    content: "80%"
  }

  90% {
    content: "90%"
  }

  95% {
    content: "95%"
  }

  96% {
    content: "96%"
  }

  97% {
    content: "97%"
  }

  98% {
    content: "98%"
  }

  99% {
    content: "99%"
  }

  100% {
    content: "100%"
  }
}
  
  
</style>


================================================
FILE: loaders/usmonovdev_thin-snake-96.html
================================================
<div class="spinner">
<div></div>
<div></div>
</div>
<style>
/* From Uiverse.io by usmonovdev - Tags: loader */
.spinner {
 position: relative;
 width: 56px;
 height: 56px;
}

.spinner > div {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 border: 13px solid rgba(181, 126, 16, 0.196);
 position: absolute;
 top: 0;
 left: 0;
 animation: spinner-g7vlvwmd 0.65s linear infinite;
 z-index: 0;
}

.spinner > div::before {
 content: '';
 height: 13px;
 width: 13px;
 border-radius: 50%;
 background: #ff8a23;
 position: absolute;
 top: 50%;
 animation: spinner-h1vps1md 1.3s infinite reverse steps(1);
 transform: translate(calc(2 * var(--translate-2)), calc(var(--translate) * 1%));
 z-index: 1;
}

.spinner > div:nth-of-type(1) {
 --translate: -50;
 --translate-2: calc(56px / 8);
}

.spinner > div:nth-of-type(1)::before {
 right: 0;
}

.spinner > div:nth-of-type(2) {
 --translate: 50;
 --translate-2: calc(-56px / 8);
 animation-delay: 0.65s;
 animation-direction: reverse;
 transform: translate(21.5px, 0);
}

.spinner > div:nth-of-type(2)::before {
 left: 0;
 transform: translate(calc(-56px / 4), -50%);
 animation-direction: normal;
}

@keyframes spinner-h1vps1md {
 0% {
  opacity: 0;
 }

 50% {
  opacity: 1;
 }
}

@keyframes spinner-g7vlvwmd {
 from {
  transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2)), 0) rotate(0deg);
 }

 to {
  transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2)), 0) rotate(360deg);
 }
}
</style>


================================================
FILE: loaders/vikas7754_sour-goose-62.html
================================================
<div class="glowing-cube">
  <div class="top">❤</div>
  <div>
    <span style="--i:0;"></span>
    <span style="--i:1;"></span>
    <span style="--i:2;"></span>
    <span style="--i:3;"></span>
  </div>
</div>

<style>
/* From Uiverse.io by vikas7754 - Source: https://freecodez.com/post/iiygefu - Tags: 3d, loader, 3d cube */
.glowing-cube {
  position: relative;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  animation: cube-rotate 4s linear infinite;
}

@keyframes cube-rotate {
  0% {
    transform: rotatex(-30deg) rotatey(0deg);
  }

  100% {
    transform: rotatex(-30deg) rotatey(360deg);
  }
}

.glowing-cube div {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.glowing-cube div span {
  position: absolute;
  inset: 0;
  background: linear-gradient(#151515, #3aff5e);
  transform: rotatey(calc(90deg * var(--i))) translatez(calc(150px / 2));
}

.glowing-cube .top {
  position: absolute;
  inset: 0;
  background: #222;
  transform: rotatex(90deg) translatez(calc(150px / 2));
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--top-font-color);
  font-size: 7rem;
}

.glowing-cube .top::before {
  content: '';
  position: absolute;
  background: #3aff5e;
  inset: 0;
  transform: translatez(calc(0px - calc(150px + 100px)));
  filter: blur(30px);
  box-shadow: 0 0 120px rgba(58, 134, 255, 0.2),
    0 0 200px rgba(58, 134, 255, 0.4),
    0 0 300px #00ff2f,
    0 0 400px #51fd71,
    0 0 500px #3aff5e;
}
</style>


================================================
FILE: loaders/vikramsinghnegi_curly-mole-58.html
================================================
<div class="blob"></div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: simple, loader, blob */
.blob {
  width: 112px;
  height: 112px;
  display: grid;
  background: #fff;
  filter: blur(5.6px) contrast(10);
  padding: 11.2px;
  mix-blend-mode: darken;
}

.blob:before,
.blob:after {
  content: "";
  grid-area: 1/1;
  width: 44.8px;
  height: 44.8px;
  background: #474bff;
  animation: blob-rhf26m 2s infinite;
}

.blob:after {
  animation-delay: -1s;
}

@keyframes blob-rhf26m {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(100%, 0);
  }

  50% {
    transform: translate(100%, 100%);
  }

  75% {
    transform: translate(0, 100%);
  }

  100% {
    transform: translate(0, 0);
  }
}

</style>
    

================================================
FILE: loaders/vikramsinghnegi_dangerous-fireant-25.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: loader, LOADING, LOADER */
/* HTML: <div class="loader"></div> */
.loader {
  width: fit-content;
  font-size: 17px;
  font-family: monospace;
  line-height: 1.4;
  font-weight: bold;
  padding: 30px 2px 50px;
  background: linear-gradient(#000 0 0) 0 0/100% 100% content-box padding-box
    no-repeat;
  position: relative;
  overflow: hidden;
  animation: l10-0 2s infinite cubic-bezier(1, 175, 0.5, 175);
}
.loader::before {
  content: "Loading";
  display: inline-block;
  animation: l10-2 2s infinite;
}
.loader::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 28px;
  top: 110%;
  left: calc(50% - 16px);
  background: linear-gradient(
        90deg,
        #0000 12px,
        #f92033 0 22px,
        #0000 0 26px,
        #fdc98d 0 32px,
        #0000
      )
      bottom 26px left 50%,
    linear-gradient(90deg, #0000 10px, #f92033 0 28px, #fdc98d 0 32px, #0000 0)
      bottom 24px left 50%,
    linear-gradient(
        90deg,
        #0000 10px,
        #643700 0 16px,
        #fdc98d 0 20px,
        #000 0 22px,
        #fdc98d 0 24px,
        #000 0 26px,
        #f92033 0 32px,
        #0000 0
      )
      bottom 22px left 50%,
    linear-gradient(
        90deg,
        #0000 8px,
        #643700 0 10px,
        #fdc98d 0 12px,
        #643700 0 14px,
        #fdc98d 0 20px,
        #000 0 22px,
        #fdc98d 0 28px,
        #f92033 0 32px,
        #0000 0
      )
      bottom 20px left 50%,
    linear-gradient(
        90deg,
        #0000 8px,
        #643700 0 10px,
        #fdc98d 0 12px,
        #643700 0 16px,
        #fdc98d 0 22px,
        #000 0 24px,
        #fdc98d 0 30px,
        #f92033 0 32px,
        #0000 0
      )
      bottom 18px left 50%,
    linear-gradient(
        90deg,
        #0000 8px,
        #643700 0 12px,
        #fdc98d 0 20px,
        #000 0 28px,
        #f92033 0 30px,
        #0000 0
      )
      bottom 16px left 50%,
    linear-gradient(90deg, #0000 12px, #fdc98d 0 26px, #f92033 0 30px, #0000 0)
      bottom 14px left 50%,
    linear-gradient(
        90deg,
        #fdc98d 6px,
        #f92033 0 14px,
        #222a87 0 16px,
        #f92033 0 22px,
        #222a87 0 24px,
        #f92033 0 28px,
        #0000 0 32px,
        #643700 0
      )
      bottom 12px left 50%,
    linear-gradient(
        90deg,
        #fdc98d 6px,
        #f92033 0 16px,
        #222a87 0 18px,
        #f92033 0 24px,
        #f92033 0 26px,
        #0000 0 30px,
        #643700 0
      )
      bottom 10px left 50%,
    linear-gradient(
        90deg,
        #0000 10px,
        #f92033 0 16px,
        #222a87 0 24px,
        #feee49 0 26px,
        #222a87 0 30px,
        #643700 0
      )
      bottom 8px left 50%,
    linear-gradient(
        90deg,
        #0000 12px,
        #222a87 0 18px,
        #feee49 0 20px,
        #222a87 0 30px,
        #643700 0
      )
      bottom 6px left 50%,
    linear-gradient(90deg, #0000 8px, #643700 0 12px, #222a87 0 30px, #643700 0)
      bottom 4px left 50%,
    linear-gradient(90deg, #0000 6px, #643700 0 14px, #222a87 0 26px, #0000 0)
      bottom 2px left 50%,
    linear-gradient(90deg, #0000 6px, #643700 0 10px, #0000 0) bottom 0px left
      50%;
  background-size: 34px 2px;
  background-repeat: no-repeat;
  animation: inherit;
  animation-name: l10-1;
}
@keyframes l10-0 {
  0%,
  30% {
    background-position: 0 0px;
  }
  50%,
  100% {
    background-position: 0 -0.1px;
  }
}
@keyframes l10-1 {
  50%,
  100% {
    top: 109.5%;
  }
}
@keyframes l10-2 {
  0%,
  30% {
    transform: translateY(0);
  }
  80%,
  100% {
    transform: translateY(-260%);
  }
}

</style>
    

================================================
FILE: loaders/vikramsinghnegi_fast-parrot-71.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: loader, svg, ice cream */
.loader {
  height: 150px;
  width: 100px;
  border-radius: 55px 55px 10px 10px;
  position: relative;
  background: #f0744f;

  background-image: linear-gradient(
    0deg,
    #f63a99 25%,
    #30dcf6 20%,
    #30dcf6 20%,
    #668c92 50%,
    #85782a 40%,
    #f2d200 50%,
    #f2d200 75%,
    #70ca5c 75%
  );
  background-position: 0px 0px;
  background-size: auto 175px;
  background-repeat: repeat-y;
  animation: colorShift 2s linear infinite;
}
.loader:before {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 15px;
  width: 15px;
  height: 100px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.5);
}

.loader:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  box-shadow: 0 15px 2px rgba(0, 0, 0, 0.25) inset;
  width: 32px;
  height: 45px;
  background: #534b44;
  border-radius: 0 0 12px 12px;
}

@keyframes colorShift {
  to {
    background-position: 0 175px;
  }
}

</style>
    

================================================
FILE: loaders/vikramsinghnegi_little-sheep-43.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: loader, LOADER, TIME */
/* HTML: <div class="loader"></div> */
.loader {
  display: inline-flex;
  border: 10px solid #000;
  border-radius: 5px;
}
.loader::before,
.loader::after {
  content: "0 1 2 3 4 5 6 7 8 9 0";
  font-size: 30px;
  font-family: monospace;
  font-weight: bold;
  line-height: 1em;
  height: 1em;
  width: 1.2ch;
  text-align: center;
  outline: 1px solid #000;
  color: #0000;
  text-shadow: 0 0 0 #000;
  overflow: hidden;
  animation: l4 2s infinite linear;
}
.loader::before {
  animation-duration: 4s;
}
@keyframes l4 {
  100% {
    text-shadow: 0 var(--t, -10em) 0 #000;
  }
}

</style>
    

================================================
FILE: loaders/vikramsinghnegi_moody-mole-33.html
================================================
<span class="loader"></span>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: loader, heart, smooth */
.loader {
  position: relative;
  width: 40px;
  height: 60px;
  animation: heartBeat 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.loader:before,
.loader:after {
  content: "";
  background: red;
  width: 40px;
  height: 60px;
  border-radius: 50px 50px 0 0;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: rotate(45deg);
  transform-origin: 50% 68%;
  box-shadow: 5px 4px 5px #0004 inset;
}
.loader:after {
  transform: rotate(-45deg);
}
@keyframes heartBeat {
  0% {
    transform: scale(0.95);
  }
  5% {
    transform: scale(1.1);
  }
  39% {
    transform: scale(0.85);
  }
  45% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(0.9);
  }
}

</style>
    

================================================
FILE: loaders/vikramsinghnegi_serious-owl-38.html
================================================
<div class="bars"></div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: loading, loader, bar */
.bars {
  width: 50.5px;
  height: 60.599999999999994px;
  --c: repeating-linear-gradient(90deg, #474bff 0 10.1px, #0000 0 20.2px);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 100% 21%;
  background-repeat: no-repeat;
  animation: bars-yrfh98 0.75s infinite alternate;
}

@keyframes bars-yrfh98 {
  0%,
  10% {
    background-position: 0 0, 0 25%, 0 50%, 0 75%;
  }

  25% {
    background-position: 0 0, 0 25%, 0 50%, 0 100%;
  }

  50% {
    background-position: 0 0, 0 25%, 0 75%, 0 100%;
  }

  75% {
    background-position: 0 0, 0 50%, 0 75%, 0 100%;
  }

  90%,
  100% {
    background-position: 0 25%, 0 50%, 0 75%, 0 100%;
  }
}

</style>
    

================================================
FILE: loaders/vikramsinghnegi_smooth-fox-31.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: animation, loader, refresh loading */
/* HTML: <div class="loader"></div> */
.loader {
  font-weight: bold;
  font-family: monospace;
  display: inline-grid;
  font-size: 30px;
}
.loader:before,
.loader:after {
  content: "Refresh....";
  grid-area: 1/1;
  -webkit-mask-size: 1.5ch 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: l36-1 1s infinite;
}
.loader:before {
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
}
.loader:after {
  -webkit-mask-image: linear-gradient(#000 0 0);
  animation: l36-1 1s infinite,
    l36-2 0.2s infinite cubic-bezier(0.5, 200, 0.5, -200);
}

@keyframes l36-1 {
  0% {
    -webkit-mask-position: 0 0, 0 0;
  }
  20% {
    -webkit-mask-position: 0.5ch 0, 0 0;
  }
  40% {
    -webkit-mask-position: 100% 0, 0 0;
  }
  60% {
    -webkit-mask-position: 4.5ch 0, 0 0;
  }
  80% {
    -webkit-mask-position: 6.5ch 0, 0 0;
  }
  100% {
    -webkit-mask-position: 2.5ch 0, 0 0;
  }
}
@keyframes l36-2 {
  100% {
    transform: translateY(0.2px);
  }
}

</style>
    

================================================
FILE: loaders/vikramsinghnegi_smooth-lionfish-6.html
================================================
<div class="loader"></div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: animation, loader, factory */
/* HTML: <div class="loader"></div> */
.loader {
  width: 90px;
  height: 14px;
  box-shadow: 0 3px 0 #c74d4d;
  position: relative;
  clip-path: inset(-40px 0 -5px);
}
.loader:before {
  content: "";
  position: absolute;
  inset: auto calc(50% - 17px) 0;
  height: 50px;
  --g: no-repeat linear-gradient(#d2d3e0 0 0);
  background: var(--g), var(--g), var(--g), var(--g);
  background-size: 16px 14px;
  animation: l7-1 2s infinite linear, l7-2 2s infinite linear;
}
@keyframes l7-1 {
  0%,
  100% {
    background-position: 0 -50px, 100% -50px;
  }
  17.5% {
    background-position: 0 100%, 100% -50px, 0 -50px, 100% -50px;
  }
  35% {
    background-position: 0 100%, 100% 100%, 0 -50px, 100% -50px;
  }
  52.5% {
    background-position: 0 100%, 100% 100%, 0 calc(100% - 16px), 100% -50px;
  }
  70%,
  98% {
    background-position: 0 100%, 100% 100%, 0 calc(100% - 16px),
      100% calc(100% - 16px);
  }
}
@keyframes l7-2 {
  0%,
  70% {
    transform: translate(0);
  }
  100% {
    transform: translate(200%);
  }
}

</style>
    

================================================
FILE: loaders/vikramsinghnegi_soft-moth-67.html
================================================
<div class="center-body">
  <div class="loader-circle-9">
    Loading
    <span></span>
  </div>
</div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: loading, loader, effect loader */
.center-body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #262626;
}

.loader-circle-9 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: transparent;
  border: 3px solid #3c3c3c;
  border-radius: 50%;
  text-align: center;
  line-height: 70px;
  font-family: sans-serif;
  font-size: 12px;
  color: #00eaff;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.loader-circle-9:before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top: 3px solid #00eaff;
  border-right: 3px solid #00eaff;
  border-radius: 50%;
  animation: animateC 2s linear infinite;
}

.loader-circle-9 span {
  display: block;
  position: absolute;
  top: calc(50% - 2px);
  left: 50%;
  width: 50%;
  height: 4px;
  background: transparent;
  transform-origin: left;
  animation: animate 2s linear infinite;
}

.loader-circle-9 span:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00eaff;
  top: -6px;
  right: -8px;
  box-shadow: 0 0 20px #00eaff;
}

@keyframes animateC {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

</style>
    

================================================
FILE: loaders/vikramsinghnegi_swift-penguin-59.html
================================================
<div class="center-body">
  <div class="loader-spanne-20">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: loading, loader, html, css */
.loader-spanne-20 {
  position: relative;
  width: 100px;
  height: 30px;
  padding: 0;
}
.loader-spanne-20 > span {
  position: absolute;
  right: 0;
  width: 3px;
  height: 30px;
  background-color: rgb(116, 204, 197);
  display: block;
  border-radius: 3px;
  transform-origin: 50% 100%;
  animation: move 2.8s linear infinite;
}
.loader-spanne-20 > span:nth-child(1) {
  animation-delay: -0.4s;
}
.loader-spanne-20 > span:nth-child(2) {
  animation-delay: -0.8s;
}
.loader-spanne-20 > span:nth-child(3) {
  animation-delay: -1.2s;
}
.loader-spanne-20 > span:nth-child(4) {
  animation-delay: -1.6s;
}
.loader-spanne-20 > span:nth-child(5) {
  animation-delay: -2s;
}
.loader-spanne-20 > span:nth-child(6) {
  animation-delay: -2.4s;
}
.loader-spanne-20 > span:nth-child(7) {
  animation-delay: -2.8s;
}
@keyframes move {
  0% {
    opacity: 0;
    transform: translateX(0px) rotate(0deg);
  }
  20% {
    opacity: 1;
  }
  40% {
    transform: translateX(-40px) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: translateX(-50px) rotate(22deg);
  }
  85% {
    opacity: 1;
    transform: translateX(-85px) rotate(60deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-100px) rotate(65deg);
  }
}

</style>
    

================================================
FILE: loaders/vikramsinghnegi_witty-skunk-89.html
================================================
<div class="center-body">
  <div class="loader-shape-3"></div>
</div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: loader, effect loader, location, map */
.center-body {
  background: #202628;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
body {
}
.loader-shape-3 {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
}
.loader-shape-3:after {
  width: 30px;
  height: 20px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 15px;
}
.loader-shape-3:before {
  width: 20px;
  height: 20px;
  border-radius: 100% 100% 100% 0;
  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1);
  animation: anm-SL-3-move 1s linear infinite;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-46deg);
  margin-top: 20px;
}
.loader-shape-3:before,
.loader-shape-3:after {
  position: absolute;
  content: "";
}
@keyframes anm-SL-3-move {
  0% {
    top: 0;
  }
  50% {
    top: -5px;
  }
  100% {
    top: 0;
  }
}

</style>
    

================================================
FILE: loaders/vinodjangid07_good-cow-5.html
================================================
<div class="loader">
  <div class="book">
    <div class="page"></div>
    <div class="page page2"></div>
  </div>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, loading, loader, book, flip, loading animation */
.loader {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  --book-color: #f1775b;
  --book-cover-color: #506c86;
}
.book {
  width: 150px;
  height: 13px;
  background-color: var(--book-color);
  border-bottom: 2px solid var(--book-cover-color);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
}
.page {
  width: 50%;
  height: 2px;
  background-color: var(--book-color);
  animation: paging 0.7s ease-out infinite;
  transform-origin: left;
}
.page2 {
  width: 50%;
  height: 2px;
  background-color: var(--book-color);
  animation: paging 0.8s ease-out infinite;
  transform-origin: left;
  position: absolute;
}
@keyframes paging {
  10% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-180deg);
  }
}

</style>
    

================================================
FILE: loaders/vinodjangid07_heavy-cheetah-84.html
================================================
<div class="loader">
  <div class="loaderMiniContainer">
    <div class="barContainer">
      <span class="bar"></span>
      <span class="bar bar2"></span>
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 101 114"
      class="svgIcon"
    >
      <circle
        stroke-width="7"
        stroke="black"
        transform="rotate(36.0692 46.1726 46.1727)"
        r="29.5497"
        cy="46.1727"
        cx="46.1726"
      ></circle>
      <line
        stroke-width="7"
        stroke="black"
        y2="111.784"
        x2="97.7088"
        y1="67.7837"
        x1="61.7089"
      ></line>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, purple, loading, loader, search */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loaderMiniContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 130px;
  height: fit-content;
}
.barContainer {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  background-position: left;
}
.bar {
  width: 100%;
  height: 8px;
  background: linear-gradient(
    to right,
    rgb(161, 94, 255),
    rgb(217, 190, 255),
    rgb(161, 94, 255)
  );
  background-size: 200% 100%;
  border-radius: 10px;
  animation: bar ease-in-out 3s infinite alternate-reverse;
}
@keyframes bar {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
.bar2 {
  width: 50%;
}
.svgIcon {
  position: absolute;
  left: -25px;
  margin-top: 18px;
  z-index: 2;
  width: 70%;
  animation: search ease-in-out 3s infinite alternate-reverse;
}
@keyframes search {
  0% {
    transform: translateX(0%) rotate(70deg);
  }

  100% {
    transform: translateX(100px) rotate(10deg);
  }
}
.svgIcon circle,
line {
  stroke: rgb(162, 55, 255);
}
.svgIcon circle {
  fill: rgba(98, 65, 142, 0.238);
}

</style>
    

================================================
FILE: loaders/vinodjangid07_odd-cow-41.html
================================================
<div class="loader">
  <div class="wrapper">
    <div class="text">LOADING</div>
    <div class="box"></div>
  </div>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, loading, loader, multicolor, loading animation */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper {
  width: 180px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.text {
  z-index: 3;
  font-family: Whitney, -apple-system, Helvetica;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 20px;
  color: white;
  filter: drop-shadow(2px 2px 0px #ff9e02);
}
.box {
  width: 100%;
  height: 100%;
  background-color: #ef5d2e;
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: loading ease-in-out 0.9s infinite alternate-reverse;
}
@keyframes loading {
  0% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(20px);
  }
}
.box::before {
  content: "";
  width: 20px;
  height: 170%;
  background-color: #ff9d0089;
  position: absolute;
  z-index: 1;
  animation: loading2 ease-in-out 0.9s infinite alternate-reverse;
}
@keyframes loading2 {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(50px);
  }
}

</style>
    

================================================
FILE: loaders/vinodjangid07_polite-rat-20.html
================================================
<div class="loader">
  <div class="panWrapper">
    <div class="pan">
      <div class="food"></div>
      <div class="panBase"></div>
      <div class="panHandle"></div>
    </div>
    <div class="panShadow"></div>
  </div>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, loading, loader, flip, loading animation */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
}
.panWrapper {
  width: 200px;
  height: fit-content;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
  gap: 20px;
}

.pan {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: fit-content;
  animation: cooking 1.7s infinite;
}
@keyframes cooking {
  0% {
    transform: rotate(0deg);
    transform-origin: top right;
  }
  10% {
    transform: rotate(-4deg);
    transform-origin: top right;
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.food {
  position: absolute;
  width: 40%;
  height: 6px;
  background: linear-gradient(to bottom, rgb(82, 33, 33), rgb(200, 106, 106));
  left: 10px;
  border-radius: 50%;
  animation: flip 1.7s infinite;
  z-index: 2;
}
@keyframes flip {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-100px) rotate(180deg);
  }
  100% {
    transform: translateY(0px) rotate(360deg);
  }
}
.panBase {
  z-index: 3;
  width: 50%;
  height: 22px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  background: linear-gradient(to top, rgb(3, 156, 156), rgb(10, 191, 191));
}
.panHandle {
  width: 40%;
  background: linear-gradient(to bottom, rgb(18, 18, 18), rgb(74, 74, 74));
  height: 10px;
  border-radius: 10px;
}
.panShadow {
  width: 70px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.21);
  margin-left: 15px;
  border-radius: 10px;
  animation: shadow 1.7s infinite;
  filter: blur(5px);
}
@keyframes shadow {
  0% {
    transform: scaleX(0.7);
  }
  50% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0.7);
  }
}

</style>
    

================================================
FILE: loaders/vinodjangid07_popular-owl-27.html
================================================
<div class="loader">
  <div class="truckWrapper">
    <div class="truckBody">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 198 93"
        class="trucksvg"
      >
        <path
          stroke-width="3"
          stroke="#282828"
          fill="#F83D3D"
          d="M135 22.5H177.264C178.295 22.5 179.22 23.133 179.594 24.0939L192.33 56.8443C192.442 57.1332 192.5 57.4404 192.5 57.7504V89C192.5 90.3807 191.381 91.5 190 91.5H135C133.619 91.5 132.5 90.3807 132.5 89V25C132.5 23.6193 133.619 22.5 135 22.5Z"
        ></path>
        <path
          stroke-width="3"
          stroke="#282828"
          fill="#7D7C7C"
          d="M146 33.5H181.741C182.779 33.5 183.709 34.1415 184.078 35.112L190.538 52.112C191.16 53.748 189.951 55.5 188.201 55.5H146C144.619 55.5 143.5 54.3807 143.5 53V36C143.5 34.6193 144.619 33.5 146 33.5Z"
        ></path>
        <path
          stroke-width="2"
          stroke="#282828"
          fill="#282828"
          d="M150 65C150 65.39 149.763 65.8656 149.127 66.2893C148.499 66.7083 147.573 67 146.5 67C145.427 67 144.501 66.7083 143.873 66.2893C143.237 65.8656 143 65.39 143 65C143 64.61 143.237 64.1344 143.873 63.7107C144.501 63.2917 145.427 63 146.5 63C147.573 63 148.499 63.2917 149.127 63.7107C149.763 64.1344 150 64.61 150 65Z"
        ></path>
        <rect
          stroke-width="2"
          stroke="#282828"
          fill="#FFFCAB"
          rx="1"
          height="7"
          width="5"
          y="63"
          x="187"
        ></rect>
        <rect
          stroke-width="2"
          stroke="#282828"
          fill="#282828"
          rx="1"
          height="11"
          width="4"
          y="81"
          x="193"
        ></rect>
        <rect
          stroke-width="3"
          stroke="#282828"
          fill="#DFDFDF"
          rx="2.5"
          height="90"
          width="121"
          y="1.5"
          x="6.5"
        ></rect>
        <rect
          stroke-width="2"
          stroke="#282828"
          fill="#DFDFDF"
          rx="2"
          height="4"
          width="6"
          y="84"
          x="1"
        ></rect>
      </svg>
    </div>
    <div class="truckTires">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 30 30"
        class="tiresvg"
      >
        <circle
          stroke-width="3"
          stroke="#282828"
          fill="#282828"
          r="13.5"
          cy="15"
          cx="15"
        ></circle>
        <circle fill="#DFDFDF" r="7" cy="15" cx="15"></circle>
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 30 30"
        class="tiresvg"
      >
        <circle
          stroke-width="3"
          stroke="#282828"
          fill="#282828"
          r="13.5"
          cy="15"
          cx="15"
        ></circle>
        <circle fill="#DFDFDF" r="7" cy="15" cx="15"></circle>
      </svg>
    </div>
    <div class="road"></div>

    <svg
      xml:space="preserve"
      viewBox="0 0 453.459 453.459"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      id="Capa_1"
      version="1.1"
      fill="#000000"
      class="lampPost"
    >
      <path
        d="M252.882,0c-37.781,0-68.686,29.953-70.245,67.358h-6.917v8.954c-26.109,2.163-45.463,10.011-45.463,19.366h9.993
c-1.65,5.146-2.507,10.54-2.507,16.017c0,28.956,23.558,52.514,52.514,52.514c28.956,0,52.514-23.558,52.514-52.514
c0-5.478-0.856-10.872-2.506-16.017h9.992c0-9.354-19.352-17.204-45.463-19.366v-8.954h-6.149C200.189,38.779,223.924,16,252.882,16
c29.952,0,54.32,24.368,54.32,54.32c0,28.774-11.078,37.009-25.105,47.437c-17.444,12.968-37.216,27.667-37.216,78.884v113.914
h-0.797c-5.068,0-9.174,4.108-9.174,9.177c0,2.844,1.293,5.383,3.321,7.066c-3.432,27.933-26.851,95.744-8.226,115.459v11.202h45.75
v-11.202c18.625-19.715-4.794-87.527-8.227-115.459c2.029-1.683,3.322-4.223,3.322-7.066c0-5.068-4.107-9.177-9.176-9.177h-0.795
V196.641c0-43.174,14.942-54.283,30.762-66.043c14.793-10.997,31.559-23.461,31.559-60.277C323.202,31.545,291.656,0,252.882,0z
M232.77,111.694c0,23.442-19.071,42.514-42.514,42.514c-23.442,0-42.514-19.072-42.514-42.514c0-5.531,1.078-10.957,3.141-16.017
h78.747C231.693,100.736,232.77,106.162,232.77,111.694z"
      ></path>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, loading, loader, truck, delivery, motion, loading animaton */
.loader {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

.truckWrapper {
  width: 200px;
  height: 100px;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: flex-end;
  overflow-x: hidden;
}
/* truck upper body */
.truckBody {
  width: 130px;
  height: fit-content;
  margin-bottom: 6px;
  animation: motion 1s linear infinite;
}
/* truck suspension animation*/
@keyframes motion {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(0px);
  }
}
/* truck's tires */
.truckTires {
  width: 130px;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px 0px 15px;
  position: absolute;
  bottom: 0;
}
.truckTires svg {
  width: 24px;
}

.road {
  width: 100%;
  height: 1.5px;
  background-color: #282828;
  position: relative;
  bottom: 0;
  align-self: flex-end;
  border-radius: 3px;
}
.road::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 100%;
  background-color: #282828;
  right: -50%;
  border-radius: 3px;
  animation: roadAnimation 1.4s linear infinite;
  border-left: 10px solid white;
}
.road::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 100%;
  background-color: #282828;
  right: -65%;
  border-radius: 3px;
  animation: roadAnimation 1.4s linear infinite;
  border-left: 4px solid white;
}

.lampPost {
  position: absolute;
  bottom: 0;
  right: -90%;
  height: 90px;
  animation: roadAnimation 1.4s linear infinite;
}

@keyframes roadAnimation {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-350px);
  }
}

</style>
    

================================================
FILE: loaders/vinodjangid07_sweet-jellyfish-62.html
================================================
<div class="loader">
  <div class="wrapper">
    <div class="catContainer">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 733 673"
        class="catbody"
      >
        <path
          fill="#212121"
          d="M111.002 139.5C270.502 -24.5001 471.503 2.4997 621.002 139.5C770.501 276.5 768.504 627.5 621.002 649.5C473.5 671.5 246 687.5 111.002 649.5C-23.9964 611.5 -48.4982 303.5 111.002 139.5Z"
        ></path>
        <path fill="#212121" d="M184 9L270.603 159H97.3975L184 9Z"></path>
        <path fill="#212121" d="M541 0L627.603 150H454.397L541 0Z"></path>
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 158 564"
        class="tail"
      >
        <path
          fill="#191919"
          d="M5.97602 76.066C-11.1099 41.6747 12.9018 0 51.3036 0V0C71.5336 0 89.8636 12.2558 97.2565 31.0866C173.697 225.792 180.478 345.852 97.0691 536.666C89.7636 553.378 73.0672 564 54.8273 564V564C16.9427 564 -5.4224 521.149 13.0712 488.085C90.2225 350.15 87.9612 241.089 5.97602 76.066Z"
        ></path>
      </svg>
      <div class="text">
        <span class="bigzzz">Z</span>
        <span class="zzz">Z</span>
      </div>
    </div>
    <div class="wallContainer">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 500 126"
        class="wall"
      >
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="3"
          x2="450"
          y1="3"
          x1="50"
        ></line>
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="85"
          x2="400"
          y1="85"
          x1="100"
        ></line>
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="122"
          x2="375"
          y1="122"
          x1="125"
        ></line>
        <line stroke-width="6" stroke="#7C7C7C" y2="43" x2="500" y1="43"></line>
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="1.99391"
          x2="115.5"
          y1="43.0061"
          x1="115.5"
        ></line>
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="2.00002"
          x2="189"
          y1="43.0122"
          x1="189"
        ></line>
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="2.00612"
          x2="262.5"
          y1="43.0183"
          x1="262.5"
        ></line>
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="2.01222"
          x2="336"
          y1="43.0244"
          x1="336"
        ></line>
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="2.01833"
          x2="409.5"
          y1="43.0305"
          x1="409.5"
        ></line>
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="43"
          x2="153"
          y1="84.0122"
          x1="153"
        ></line>
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="43"
          x2="228"
          y1="84.0122"
          x1="228"
        ></line>
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="43"
          x2="303"
          y1="84.0122"
          x1="303"
        ></line>
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="43"
          x2="378"
          y1="84.0122"
          x1="378"
        ></line>
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="84"
          x2="192"
          y1="125.012"
          x1="192"
        ></line>
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="84"
          x2="267"
          y1="125.012"
          x1="267"
        ></line>
        <line
          stroke-width="6"
          stroke="#7C7C7C"
          y2="84"
          x2="342"
          y1="125.012"
          x1="342"
        ></line>
      </svg>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, loading, loader */
.loader {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper {
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.catContainer {
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.catbody {
  width: 80px;
}
.tail {
  position: absolute;
  width: 17px;
  top: 50%;
  animation: tail 0.5s ease-in infinite alternate-reverse;
  transform-origin: top;
}
@keyframes tail {
  0% {
    transform: rotateZ(60deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-20deg);
  }
}
.wall {
  width: 300px;
}
.text {
  display: flex;
  flex-direction: column;
  width: 50px;
  position: absolute;
  margin: 0px 0px 100px 120px;
}
.zzz {
  color: black;
  font-weight: 700;
  font-size: 15px;
  animation: zzz 2s linear infinite;
}
.bigzzz {
  color: black;
  font-weight: 700;
  font-size: 25px;
  margin-left: 10px;
  animation: zzz 2.3s linear infinite;
}
@keyframes zzz {
  0% {
    color: transparent;
  }
  50% {
    color: black;
  }
  100% {
    color: transparent;
  }
}

</style>
    

================================================
FILE: loaders/vinodjangid07_tall-termite-75.html
================================================
<div class="loader">
  <div class="book-wrapper">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="white"
      viewBox="0 0 126 75"
      class="book"
    >
      <rect
        stroke-width="5"
        stroke="#e05452"
        rx="7.5"
        height="70"
        width="121"
        y="2.5"
        x="2.5"
      ></rect>
      <line
        stroke-width="5"
        stroke="#e05452"
        y2="75"
        x2="63.5"
        x1="63.5"
      ></line>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#c18949"
        d="M25 20H50"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#c18949"
        d="M101 20H76"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#c18949"
        d="M16 30L50 30"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#c18949"
        d="M110 30L76 30"
      ></path>
    </svg>

    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="#ffffff74"
      viewBox="0 0 65 75"
      class="book-page"
    >
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#c18949"
        d="M40 20H15"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#c18949"
        d="M49 30L15 30"
      ></path>
      <path
        stroke-width="5"
        stroke="#e05452"
        d="M2.5 2.5H55C59.1421 2.5 62.5 5.85786 62.5 10V65C62.5 69.1421 59.1421 72.5 55 72.5H2.5V2.5Z"
      ></path>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, loading, loader, book, loading animation */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-wrapper {
  width: 150px;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.book {
  width: 100%;
  height: auto;
  filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.137));
}
.book-wrapper .book-page {
  width: 50%;
  height: auto;
  position: absolute;
  animation: paging 0.15s linear infinite;
  transform-origin: left;
}
@keyframes paging {
  0% {
    transform: rotateY(0deg) skewY(0deg);
  }
  50% {
    transform: rotateY(90deg) skewY(-20deg);
  }
  100% {
    transform: rotateY(180deg) skewY(0deg);
  }
}

</style>
    

================================================
FILE: loaders/vishnu1100_brave-dog-13.html
================================================
<div class="spooky-house">
  <div class="content-circle">
    <div class="house">
      <div class="porch"></div>
      <div class="first-floor"></div>
      <div class="second-floor"></div>
      <div class="roof"></div>
      <div class="door"></div>
      <div class="small-windows"></div>
      <div class="big-window"></div>
      <div class="frames"></div>
    </div>
    <div class="moon"></div>
    <div class="rain">
      <div class="dropOne"></div>
      <div class="dropTwo"></div>
      <div class="dropThree"></div>
      <div class="dropFour"></div>
      <div class="dropFive"></div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by vishnu1100  - Tags: dark, animated, loader, rain, moon, night, windows, house, haunted, spooky */
.spooky-house {
  position: relative;
}

.content-circle {
  position: relative;
  width: 450px;
  height: 450px;
  overflow: hidden;
  background-color: #212f3c;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

.content-circle:before {
  content: "";
  position: absolute;
  width: 450px;
  height: 200px;
  top: 300px;
  border-radius: 50% 50% 0 0;
  background-color: #000;
}

.house {
  position: absolute;
  width: 120px;
  height: 150px;
  background-color: black;
  left: 180px;
  top: 160px;
  transform: rotate(5deg);
  z-index: 2;
}

.house:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 30px solid black;
  border-right: 50px solid transparent;
  left: 115px;
  top: 70px;
  transform: rotate(5deg);
}

.house:after {
  content: "";
  position: absolute;
  width: 5px;
  height: 65px;
  background-color: black;
  left: 145px;
  top: 95px;
}

.porch {
  position: absolute;
  width: 30px;
  height: 100px;
  background-color: black;
  left: -20px;
  top: 55px;
  transform: rotate(-10deg);
}
.porch:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 20px solid black;
  border-left: 40px solid transparent;
  left: -35px;
  top: 45px;
}

.porch:after {
  content: "";
  position: absolute;
  position: absolute;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid black;
  left: -5px;
  top: -25px;
}

.first-floor {
  position: absolute;
  transform: rotate(-10deg);
  background-color: black;
  width: 5px;
  height: 45px;
  left: -37px;
  top: 125px;
}

.first-floor:before {
  content: "";
  position: absolute;
  background-color: #000;
  width: 85px;
  height: 90px;
  top: -150px;
  left: 50px;
}

.first-floor:after {
  content: "";
  position: absolute;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  border-bottom: 50px solid black;
  top: -199px;
  left: 40px;
}

.second-floor {
  position: absolute;
  background-color: black;
  width: 35px;
  height: 100px;
  transform: rotate(3deg);
  top: -70px;
  left: 70px;
}

.second-floor:before {
  content: "";
  position: absolute;
  background-color: black;
  width: 20px;
  height: 100px;
  left: 33px;
  top: 40px;
  transform: rotate(-3deg);
}

.second-floor:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 30px solid black;
  top: 12px;
  left: 15px;
}

.roof {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 30px solid black;
  left: 65px;
  top: -95px;
}

.roof:before {
  content: "";
  position: absolute;
  width: 6px;
  height: 20px;
  background-color: black;
  top: 5px;
  left: 10px;
  box-shadow: 20px 35px black;
}

.roof:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 20px;
  background-color: black;
  transform: rotate(-10deg);
  left: -110px;
  top: 35px;
  box-shadow: -27px 97px black;
}

.door {
  position: absolute;
  background-color: #ffd166;
  width: 30px;
  height: 50px;
  transform: rotate(-5deg);
  border-radius: 30px 30px 0 0;
  box-shadow: inset -10px 5px rgba(0, 0, 0, 0.5);
  top: 90px;
  left: 40px;
}

.door:before {
  content: "";
  position: absolute;
  background-color: #ffd166;
  border-radius: 30px 30px 0 0;
  box-shadow: inset -5px 2px rgba(0, 0, 0, 0.5);
  width: 20px;
  height: 30px;
  left: -40px;
  transform: rotate(-3deg);
}

.door:after {
  content: "";
  position: absolute;
  background-color: #ffd166;
  box-shadow: inset -5px 2px rgba(0, 0, 0, 0.5);
  border-radius: 30px 30px 0 0;
  width: 20px;
  height: 30px;
  left: 45px;
  transform: rotate(3deg);
}

.small-windows {
  position: absolute;
  background-color: #ffd166;
  border-radius: 30px 30px 0 0;
  width: 13px;
  height: 25px;
  left: 100px;
  top: -20px;
  box-shadow: -19px -40px #ffd166, inset -4px 2px rgba(0, 0, 0, 0.5);
}

.small-windows:before {
  content: "";
  position: absolute;
  background-color: #ffd166;
  border-radius: 30px 30px 0 0;
  width: 13px;
  height: 25px;
  transform: rotate(-7deg);
  left: -60px;
  top: 50px;
  box-shadow: -60px 20px #ffd166;
}

.big-window {
  position: absolute;
  background-color: #ffd166;
  border-radius: 30px 30px 0 0;
  transform: rotate(-7deg);
  width: 30px;
  height: 40px;
  top: -35px;
  left: 10px;
}

.big-window:before,
.big-window:after {
  content: "";
  position: absolute;
  background-color: black;
}

.big-window:before {
  height: 40px;
  width: 2px;
  left: 15px;
  box-shadow: 13px 55px black, -47px 80px black, -32px 120px black;
}

.big-window:after {
  height: 2px;
  width: 40px;
  top: 22px;
  box-shadow: 10px 58px black, -45px 78px black, -30px 120px black;
}

.frames {
  position: absolute;
  width: 2px;
  height: 40px;
  background-color: black;
  top: -65px;
  left: 86.5px;
  box-shadow: 19px 40px black, 7px 150px black;
}

.frames:before {
  content: "";
  position: absolute;
  height: 2px;
  width: 30px;
  background-color: black;
  top: 17px;
  left: -10px;
  box-shadow: 10px 40px black, 5px 150px black;
}

.moon {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #95a5a6;
  z-index: 1;
  left: 80px;
  top: 40px;
  box-shadow: inset 7px -7px 0 rgba(0, 0, 0, 0.09);
}

.moon:before,
.moon:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.09);
  box-shadow: inset -5px 5px 0 rgba(0, 0, 0, 0.09);
}
.moon:before {
  width: 30px;
  height: 30px;
  top: 50px;
  left: 45px;
}

.moon:after {
  width: 40px;
  height: 40px;
  top: 100px;
  left: 30px;
}

.rain {
  position: absolute;
  z-index: 5;
}

.rain:before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  background: #fff;
  opacity: 0;
  animation: lighting 3s linear infinite;
}

.dropOne,
.dropTwo,
.dropThree,
.dropFour,
.dropFive {
  position: absolute;
  background-color: rgba(211, 211, 211, 0.3);
  height: 10px;
  width: 1px;
  top: 0;
  box-shadow: 0 -270px rgba(211, 211, 211, 0.3),
    -50px -50px rgba(211, 211, 211, 0.3), -50px -150px rgba(211, 211, 211, 0.3),
    50px -395px rgba(211, 211, 211, 0.3), 50px -200px rgba(211, 211, 211, 0.3),
    50px -100px rgba(211, 211, 211, 0.3), 100px -400px rgba(211, 211, 211, 0.3),
    100px -320px rgba(211, 211, 211, 0.3), 100px -150px rgba(211, 211, 211, 0.3),
    150px -200px rgba(211, 211, 211, 0.3), 200px -100px rgba(211, 211, 211, 0.3),
    200px -370px rgba(211, 211, 211, 0.3), 250px -330px rgba(211, 211, 211, 0.3),
    250px -220px rgba(211, 211, 211, 0.3), 300px -70px rgba(211, 211, 211, 0.3),
    300px -140px rgba(211, 211, 211, 0.3), 300px -300px rgba(211, 211, 211, 0.3);
}

.dropOne {
  animation: rain 1.5s linear infinite;
  left: 100px;
}

.dropTwo {
  left: -50px;
  animation: rain 1.2s linear infinite;
}

.dropThree {
  left: 50px;
  animation: rain 1.7s linear infinite;
}

.dropFour {
  left: 150px;
  animation: rain 1.4s linear infinite;
}

.dropFive {
  left: 80px;
  animation: rain 1.3s linear infinite;
}

@keyframes rain {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(1000px);
  }
}

@keyframes lighting {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  14% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  21% {
    opacity: 1;
  }
  24% {
    opacity: 0;
  }
  104% {
    opacity: 0;
  }
}

</style>
    

================================================
FILE: loaders/vishnu1100_ordinary-cow-49.html
================================================
<div class="easter-animation">
  <div class="egg">
    <div class="eyes"></div>
  </div>
  <div class="shadow"></div>
  <div class="clouds">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
  </div>
</div>

<style>
/* From Uiverse.io by vishnu1100  - Tags: minimalist, loader, realistic, circle loader, css effect, hover button, bounce animation, pattern */
.easter-animation {
  position: relative;
}

.egg {
  position: relative;
  width: 150px;
  height: 200px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(
    295deg,
    #ff595e 15%,
    #8ac926 15%,
    #8ac926 30%,
    #ff595e 30%,
    #ff595e 49%,
    #8ac926 49%,
    #8ac926 70%,
    #ff595e 70%
  );
  overflow: hidden;
  animation: bounce 1s linear infinite;
}

.egg:before,
.egg:after {
  position: absolute;
  content: "";
}

.egg:before {
  width: 200px;
  height: 100px;
  background-color: #1982c4;
  top: 160px;
  box-shadow: 0 -50px #ffca3a, 0 -65px #8ac926, 0 -90px #6a4c93, 0 -95px #ffca3a;
}

.egg:after {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background-color: #ffca3a;
  left: 90px;
  top: 75px;
  box-shadow: -40px 0 #ffca3a, 40px 0 #ffca3a, -80px 0 #ffca3a, -120px 0 #ffca3a;
}

.eyes {
  position: absolute;
  background-color: #333;
  border-radius: 50%;
  width: 20px;
  height: 30px;
  left: 90px;
  top: 120px;
  box-shadow: 20px 0 #333;
}

.eyes:before {
  position: absolute;
  content: "";
  background-color: #fff;
  width: 5px;
  height: 12px;
  border-radius: 50%;
  left: 12px;
  top: 10px;
  box-shadow: 20px 0 #fff;
}

.eyes:after {
  content: "";
  position: absolute;
  width: 200px;
  height: 30px;
  background-color: #1982c4;
  top: -130px;
  left: -100px;
}

@keyframes bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(1.1, 0.9) translateY(0);
  }
  30% {
    transform: scale(0.9, 1.1) translateY(-70px) translateX(30px);
  }
  50% {
    transform: scale(1.05, 0.95) translateY(0) translateX(30px) rotate(-10deg);
  }
  58% {
    transform: scale(1, 1) translateY(-7px) translateX(0);
  }
  65% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}

.shadow {
  position: absolute;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100px;
  height: 20px;
  border-radius: 50%;
  left: 20px;
  top: 190px;
  animation: move 1s linear infinite;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(0) scale(0.8);
  }
  30% {
    transform: translateX(0) scale(0.8);
  }
  50% {
    transform: translateX(30px) scale(0.7);
  }
  58% {
    transform: translateX(20px);
  }
  65% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

.clouds {
  position: absolute;
  width: 500px;
}

.cloud1,
.cloud2,
.cloud3 {
  position: absolute;
  background-color: white;
  width: 100px;
  height: 25px;
  border-radius: 100px;
}

.cloud1:before,
.cloud2:before,
.cloud3:before {
  position: absolute;
  content: "";
  width: 40px;
  height: 40px;
  top: -20px;
  left: 20px;
  background-color: white;
  border-radius: 50%;
}

.cloud1 {
  top: -150px;
  z-index: -1;
  animation: clouds 2s linear infinite;
}

.cloud2 {
  top: -70px;
  opacity: 0.5;
  transform: scale(0.7);
  animation: clouds 1.8s linear infinite;
}

.cloud3 {
  top: -100px;
  opacity: 0.5;
  transform: scale(0.9);
  animation: clouds 1.5s linear infinite;
  z-index: -2;
}

@keyframes clouds {
  from {
    left: 500px;
  }
  to {
    left: -500px;
  }
}

</style>
    

================================================
FILE: loaders/vishnu1100_popular-dingo-38.html
================================================
<section>
  <div class="container">
    <div class="content">
      <div class="heart-rate">
        <svg
          xml:space="preserve"
          viewBox="0 0 150 73"
          height="73px"
          width="150px"
          y="0px"
          x="0px"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg"
          version="1.0"
        >
          <polyline
            points="0,45.486 38.514,45.486 44.595,33.324 50.676,45.486 57.771,45.486 62.838,55.622 71.959,9 80.067,
    63.729 84.122,45.486 97.297,45.486 103.379,40.419 110.473,45.486 150,45.486"
            stroke-miterlimit="10"
            stroke-width="3"
            stroke="#009B9E"
            fill="none"
          ></polyline>
        </svg>

        <div class="fade-in"></div>

        <div class="fade-out"></div>
      </div>
    </div>
  </div>
</section>

<style>
/* From Uiverse.io by vishnu1100  - Tags: button, loader, input, dark, theme, download, sign-up, stars */
/* Specific styles for .container */
.container {
  background: #e8e8e8 none repeat scroll 0 0;
  color: #999;
  font-size: 100%;
  line-height: 24px;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/* Specific styles for .heart-rate container */
.container .heart-rate {
  width: 150px;
  height: 73px;
  position: relative;
  margin: 20px auto;
}

/* Styles for the fade-in animation */
.container .heart-rate .fade-in {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #e8e8e8;
  top: 0;
  right: 0;
  animation: heartRateIn 2.5s linear infinite;
}

/* Styles for the fade-out animation */
.container .heart-rate .fade-out {
  position: absolute;
  width: 120%; /* Adjusted width to ensure animation space */
  height: 100%;
  background-color: #e8e8e8;
  top: 0;
  right: -120%;
  animation: heartRateOut 2.5s linear infinite;
}

/* Keyframes for the heartRateIn animation */
@keyframes heartRateIn {
  0% {
    width: 100%;
  }
  50% {
    width: 0;
  }
  100% {
    width: 0;
  }
}

/* Keyframes for the heartRateOut animation */
@keyframes heartRateOut {
  0% {
    left: -120%;
  }
  30% {
    left: -120%;
  }
  100% {
    left: 0;
  }
}

</style>
    

================================================
FILE: loaders/vk-uiux_grumpy-dolphin-30.html
================================================
<div class="loader">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
/* From Uiverse.io by vk-uiux - Source: vk-uiux - Tags: animation, loader, spinner, book, animated, css, css effect */
.loader {
  position: relative;
  width: 33px;
  height: 33px;
  perspective: 67px;
}

.loader div {
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 50%;
  transform-origin: left;
  animation: loader 2s infinite;
}

.loader div:nth-child(1) {
  animation-delay: 0.15s;
}

.loader div:nth-child(2) {
  animation-delay: 0.3s;
}

.loader div:nth-child(3) {
  animation-delay: 0.45s;
}

.loader div:nth-child(4) {
  animation-delay: 0.6s;
}

.loader div:nth-child(5) {
  animation-delay: 0.75s;
}

@keyframes loader {
  0% {
    transform: rotateY(0deg);
  }

  50%, 80% {
    transform: rotateY(-180deg);
  }

  90%, 100% {
    opacity: 0;
    transform: rotateY(-180deg);
  }
}
</style>


================================================
FILE: loaders/vk-uiux_light-vampirebat-28.html
================================================
<div class="loader">
  <div class="loader-inner">
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by vk-uiux - Tags: animation, loader, animated, circle loader, rainbow, html, css, css effect, multicolor */
.loader-inner {
  width: 100px;
  height: 60px;
  margin: auto;
  position: absolute;
  inset: 0;
}

.loader-line-wrap {
  animation: spin 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
  width: 100px;
  height: 50px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform-origin: 50% 100%;
}

.loader-line {
  border: 4px solid transparent;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  position: absolute;
  inset: 0;
}

.loader-line-wrap:nth-child(1) {
  animation-delay: -50ms;
}

.loader-line-wrap:nth-child(2) {
  animation-delay: -100ms;
}

.loader-line-wrap:nth-child(3) {
  animation-delay: -150ms;
}

.loader-line-wrap:nth-child(4) {
  animation-delay: -200ms;
}

.loader-line-wrap:nth-child(5) {
  animation-delay: -250ms;
}

.loader-line-wrap:nth-child(1) .loader-line {
  border-color: #eb4747;
  height: 90px;
  width: 90px;
  top: 7px;
}

.loader-line-wrap:nth-child(2) .loader-line {
  border-color: #ebeb47;
  height: 76px;
  width: 76px;
  top: 14px;
}

.loader-line-wrap:nth-child(3) .loader-line {
  border-color: #47eb47;
  height: 62px;
  width: 62px;
  top: 21px;
}

.loader-line-wrap:nth-child(4) .loader-line {
  border-color: #47ebeb;
  height: 48px;
  width: 48px;
  top: 28px;
}

.loader-line-wrap:nth-child(5) .loader-line {
  border-color: #4747eb;
  height: 34px;
  width: 34px;
  top: 35px;
}

@keyframes spin {
  0%,
  15% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/vk-uiux_neat-goat-26.html
================================================
<div class="card">
  <div class="card__skeleton card__title"></div>
  <div class="card__skeleton card__description">         </div>
</div>
<style>
/* From Uiverse.io by vk-uiux - Tags: animation, loading, card, loader, placeholder, animated, css, css effect, skeleton loading  */
.card {
  width: 18rem;
  padding: 1rem;
  text-align: center;
  border-radius: .8rem;
  background-color: white;
}

.card__skeleton {
  background-image: linear-gradient(
		90deg,
		#ccc 0px,
		rgb(229 229 229 / 90%) 40px,
		#ccc 80px
	);
  background-size: 300%;
  background-position: 100% 0;
  border-radius: inherit;
  animation: shimmer 1.5s infinite;
}

.card__title {
  height: 15px;
  margin-bottom: 15px;
}

.card__description {
  height: 100px;
}

@keyframes shimmer {
  to {
    background-position: -100% 0;
  }
}
</style>


================================================
FILE: loaders/wztd_old-bullfrog-32.html
================================================

<div class="loader"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"></feGaussianBlur><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo"></feColorMatrix><feBlend in="SourceGraphic" in2="goo"></feBlend></filter></defs></svg></div>

<style>
/* From Uiverse.io by wztd - Source: wztd - Tags: effect loader */
.loader {
  position: relative;
  width: 1.5em;
  aspect-ratio: 1/2;
  filter: url(#goo);
}

#goo {
  display: none
}

.loader:before, .loader:after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  aspect-ratio: 1/1;
  animation: 1.5s ease-out infinite loader;
  border-radius: 50%;
}

.loader:before {
  background: linear-gradient(rgb(255, 206, 58), rgb(66, 181, 73))
}

.loader:after {
  animation-delay: 0.75s;
  background: linear-gradient(to top, rgb(114, 223, 231), rgb(66, 181, 73))
}

@keyframes loader {
  0%, 50%, 100% {
    transform: translateY(0)
  }

  25% {
    transform: translateY(70%)
  }

  75% {
    transform: translateY(-70%)
  }
}
</style>


================================================
FILE: loaders/xXJollyHAKERXx_lucky-falcon-75.html
================================================
<div class="spinner">
    <div class="spinner1"></div>
</div>
<style>
/* From Uiverse.io by xXJollyHAKERXx - Tags: loader */
.spinner {
  background-image: linear-gradient(rgb(186, 66, 255) 35%,rgb(0, 225, 255));
  width: 100px;
  height: 100px;
  animation: spinning82341 1.7s linear infinite;
  text-align: center;
  border-radius: 50px;
  filter: blur(1px);
  box-shadow: 0px -5px 20px 0px rgb(186, 66, 255), 0px 5px 20px 0px rgb(0, 225, 255);
}

.spinner1 {
  background-color: rgb(36, 36, 36);
  width: 100px;
  height: 100px;
  border-radius: 50px;
  filter: blur(10px);
}

@keyframes spinning82341 {
  to {
    transform: rotate(360deg);
  }
}
</style>


================================================
FILE: loaders/xopc333_wise-fish-34.html
================================================
<div class="loader">
  <svg class="svg-wrap" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle stroke-linecap="round" stroke-width="2" class="svg-stroke" cy="25" cx="50" r="15"></circle>
    <circle class="circle circle-one" cy="25" cx="35" r="1"></circle>
    <circle class="circle circle-two" cy="25" cx="45" r="1"></circle>
    <circle class="circle circle-three" cy="25" cx="55" r="1"></circle>
  </svg>  
</div>
<style>
/* From Uiverse.io by xopc333 - Tags: animation, loader, svg, creative, css, loading animation */
.loader {
  width: 500px;
  height: 250px;
}

.circle {
  fill: #F25A33;
}

.circle-one {
  opacity: 0;
}

.svg-stroke {
  fill: transparent;
  stroke-dasharray: 46.82, 93.64;
  stroke-dashoffset: 46.82;
  stroke: #F25A33;
  opacity: 1;
}

.svg-wrap .svg-stroke {
  animation: stroke-start 1.6s linear, stroke-end 1.6s 0.8s linear infinite;
}

.svg-wrap .circle-one {
  animation: dot-one 0s 0.8s, move-dot 1.6s 0.8s linear infinite;
}

.svg-wrap .circle-two,
.svg-wrap .circle-three {
  animation: move-dot 1.6s 0.8s linear infinite;
}

@keyframes dot-one {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes stroke-start {
  50% {
    stroke-dashoffset: 46.82;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes stroke-end {
  50% {
    stroke-dasharray: 46.82, 93.64;
    stroke-dashoffset: 0;
    transform: translateX(0);
  }

  100% {
    stroke-dasharray: 0, 93.64;
    stroke-dashoffset: -46.82;
    transform: translateX(10px);
  }
}

@keyframes move-dot {
  50% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(10px);
  }
}
</style>


================================================
FILE: loaders/youngjid_gentle-dragonfly-99.html
================================================
<div class="glitch" data-text="Loading ...">Loading ...</div>

<style>
/* From Uiverse.io by youngjid  - Tags: loader, dark, glitch, text animation, css effect, glitch Effect */
.glitch {
  position: relative;
  font-size: 60px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 3px;
  z-index: 1;
}

.glitch:before,
.glitch:after {
  display: block;
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
}

.glitch:before {
  animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  color: #00ffff;
  z-index: -1;
}

.glitch:after {
  animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both
    infinite;
  color: #ff00ff;
  z-index: -2;
}

@keyframes glitch-it {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  to {
    transform: translate(0);
  }
}

</style>
    

================================================
FILE: loaders/youranonone10_tough-moth-23.html
================================================
 <div class="holder">
        <div class="candle">
          <div class="blinking-glow"></div>
          <div class="thread"></div>
          <div class="glow"></div>
          <div class="flame"></div>
        </div>
    </div>
      
<style>
/* From Uiverse.io by youranonone10 - Tags: loader */
.holder {
  margin: 12rem auto 0;
  width: 150px;
  height: 400px;
  position: relative;
}

.holder *, .holder *:before, .holder *:after {
  position: absolute;
  content: "";
}

.candle {
  bottom: 0;
  width: 150px;
  height: 300px;
  border-radius: 150px / 40px;
  -webkit-box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0 50px 0 rgba(0, 0, 0, 0.4);
  box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0 50px 0 rgba(0, 0, 0, 0.4);
  background: #190f02;
  background: -webkit-gradient(linear, left top, left bottom, from(#e48825), color-stop(#e78e0e), color-stop(#833c03), color-stop(50%, #4c1a03), to(#1c0900));
  background: linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
}

.candle:before {
  width: 100%;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #d47401;
  background: #b86409;
  background: radial-gradient(#ffef80, #b86409 60%);
  background: radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
}

.candle:after {
  width: 34px;
  height: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 50%;
  top: 14px;
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
}

.thread {
  width: 6px;
  height: 36px;
  top: -17px;
  left: 50%;
  z-index: 1;
  border-radius: 40% 40% 0 0;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background: #121212;
  background: -webkit-gradient(linear, left top, left bottom, from(#d6994a), color-stop(#4b232c), color-stop(#121212), color-stop(black), color-stop(90%, #e8bb31));
  background: linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
}

.flame {
  width: 24px;
  height: 120px;
  left: 50%;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 100%;
  border-radius: 50% 50% 20% 20%;
  background: rgba(255, 255, 255, 1);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, white), to(transparent));
  background: linear-gradient(white 80%, transparent);
  -webkit-animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;
  animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;
}

.flame:before {
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 20% 20%;
  -webkit-box-shadow: 0 0 15px 0 rgba(247, 93, 0, .4), 0 -6px 4px 0 rgba(247, 128, 0, .7);
  box-shadow: 0 0 15px 0 rgba(247, 93, 0, .4), 0 -6px 4px 0 rgba(247, 128, 0, .7);
}

@-webkit-keyframes moveFlame {
  0%, 100% {
    -webkit-transform: translateX(-50%) rotate(-2deg);
    transform: translateX(-50%) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(-50%) rotate(2deg);
    transform: translateX(-50%) rotate(2deg);
  }
}

@keyframes moveFlame {
  0%, 100% {
    -webkit-transform: translateX(-50%) rotate(-2deg);
    transform: translateX(-50%) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(-50%) rotate(2deg);
    transform: translateX(-50%) rotate(2deg);
  }
}

@-webkit-keyframes enlargeFlame {
  0%, 100% {
    height: 120px;
  }

  50% {
    height: 140px;
  }
}

@keyframes enlargeFlame {
  0%, 100% {
    height: 120px;
  }

  50% {
    height: 140px;
  }
}

.glow {
  width: 26px;
  height: 60px;
  border-radius: 50% 50% 35% 35%;
  left: 50%;
  top: -48px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background: rgba(0, 133, 255, .7);
  -webkit-box-shadow: 0 -40px 30px 0 #dc8a0c, 0 40px 50px 0 #dc8a0c, inset 3px 0 2px 0 rgba(0, 133, 255, .6), inset -3px 0 2px 0 rgba(0, 133, 255, .6);
  box-shadow: 0 -40px 30px 0 #dc8a0c, 0 40px 50px 0 #dc8a0c, inset 3px 0 2px 0 rgba(0, 133, 255, .6), inset -3px 0 2px 0 rgba(0, 133, 255, .6);
}

.glow:before {
  width: 70%;
  height: 60%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}

.blinking-glow {
  width: 100px;
  height: 180px;
  left: 50%;
  top: -55%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ff6000;
  -webkit-filter: blur(50px);
  -moz-filter: blur(60px);
  -o-filter: blur(60px);
  -ms-filter: blur(60px);
  filter: blur(60px);
  -webkit-animation: blinkIt .1s infinite;
  animation: blinkIt .1s infinite;
}

@-webkit-keyframes blinkIt {
  50% {
    opacity: .8;
  }
}

@keyframes blinkIt {
  50% {
    opacity: .8;
  }
}



</style>


================================================
FILE: loaders/youranonone10_young-otter-44.html
================================================
<div class="wrapper">
  <div class="cloud">
    <div class="cloud_left"></div>
    <div class="cloud_right"></div>
  </div>
  <div class="rain">
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
  </div>
  <div class="surface">
    <div class="hit"></div>
    <div class="hit"></div>
    <div class="hit"></div>
    <div class="hit"></div>
    <div class="hit"></div>
  </div>
</div>
<style>
/* From Uiverse.io by youranonone10  - Tags: animation, minimalist, loader */
.wrapper {
  height: 200px;
}

.cloud {
  overflow: hidden;
  padding: 5px;
  height: 50px;
}

.cloud_left {
  position: relative;
  float: left;
  background-color: #234;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75);
}

.cloud_right {
  position: relative;
  float: left;
  background-color: #203040;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  top: 15px;
  left: -30px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75);
}

.rain {
  width: 180px;
  height: 140px;
}

.drop {
  position: relative;
  float: left;
  width: 2px;
  margin: 10px;
  left: 20px;
  background: #789;
  box-shadow: 1px 0.5px 1px 0.5px rgba(0, 0, 0, 0.75);
  animation: rain_401 0.8s infinite ease-out;
}

.drop:nth-child(1) {
  height: 15px;
  top: 5px;
  animation-delay: -1.0s;
}

.drop:nth-child(2) {
  height: 20px;
  animation-delay: -1.4s;
}

.drop:nth-child(3) {
  height: 15px;
  top: 5px;
  animation-delay: -1.6s;
}

.drop:nth-child(4) {
  height: 10px;
  top: 10px;
  animation-delay: -1.2s;
}

.drop:nth-child(5) {
  height: 5px;
  top: 15px;
  animation-delay: -1.6s;
}

@keyframes rain_401 {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }

  100% {
    opacity: 0.2;
    transform: translate(0, 100px);
  }
}

.surface {
  position: relative;
  width: 180px;
  height: 140px;
  top: -140px;
}

.hit {
  position: absolute;
  width: 3px;
  height: 1px;
  margin: 10px;
  bottom: -5px;
  border: 1px solid #456;
  border-radius: 50%;
  animation: hit_401 0.8s infinite ease;
}

.hit:nth-child(1) {
  left: 19px;
  animation-delay: -0.3s;
}

.hit:nth-child(2) {
  left: 41px;
  animation-delay: -0.7s;
}

.hit:nth-child(3) {
  left: 63px;
  animation-delay: -0.9s;
}

.hit:nth-child(4) {
  left: 85px;
  animation-delay: -0.5s;
}

.hit:nth-child(5) {
  left: 107px;
  animation-delay: -0.9s;
}

@keyframes hit_401 {
  0% {
    opacity: 0.75;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}
</style>
    

================================================
FILE: loaders/zanina-yassine_short-seahorse-54.html
================================================
<div id="container">
  <label class="loading-title">Loading ...</label>
  <span class="loading-circle sp1">
    <span class="loading-circle sp2">
      <span class="loading-circle sp3"></span>
    </span>
  </span>
</div>
<style>
/* From Uiverse.io by zanina-yassine - Tags: loader */
#container {
  width: 100px;
  height: 125px;
  margin: auto auto;
}

.loading-title {
  display: block;
  text-align: center;
  font-size: 20;
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  padding-bottom: 15px;
  color: #888;
}

.loading-circle {
  display: block;
  border-left: 5px solid;
  border-top-left-radius: 100%;
  border-top: 5px solid;
  margin: 5px;
  animation-name: Loader_611;
  animation-duration: 1500ms;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

.sp1 {
  border-left-color: #F44336;
  border-top-color: #F44336;
  width: 40px;
  height: 40px;
}

.sp2 {
  border-left-color: #FFC107;
  border-top-color: #FFC107;
  width: 30px;
  height: 30px;
}

.sp3 {
  width: 20px;
  height: 20px;
  border-left-color: #8bc34a;
  border-top-color: #8bc34a;
}

@keyframes Loader_611 {
  0% {
    transform: rotate(0deg);
    transform-origin: right bottom;
  }

  25% {
    transform: rotate(90deg);
    transform-origin: right bottom;
  }

  50% {
    transform: rotate(180deg);
    transform-origin: right bottom;
  }

  75% {
    transform: rotate(270deg);
    transform-origin: right bottom;
  }

  100% {
    transform: rotate(360deg);
    transform-origin: right bottom;
  }
}
</style>


================================================
FILE: loaders/zanina-yassine_tame-wolverine-39.html
================================================
<div class="master-container">
  <div class="container">
  <div class="crescent">
    <span></span><span></span>
  </div>
  <div class="star s1">
    <span></span><span></span>
  </div>
  <div class="star s2">
    <span></span><span></span>
  </div>
  <div class="star s3">
    <span></span><span></span>
  </div>
  <div class="star s4">
    <span></span><span></span>
  </div>
  <div class="star s5">
    <span></span><span></span>
  </div>
  <div class="small-star ss1">
    <span></span><span></span>
  </div>
  <div class="small-star ss2">
    <span></span><span></span>
  </div>
  <div class="small-star ss3">
    <span></span><span></span>
  </div>
  <div class="small-star ss4">
    <span></span><span></span>
  </div>
  <div class="small-star ss5">
    <span></span><span></span>
  </div>
  <div class="small-star ss6">
    <span></span><span></span>
  </div>
  <div class="small-star ss7">
    <span></span><span></span>
  </div>
  <div class="small-star ss8">
    <span></span><span></span>
  </div>
  <div class="hut">
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <div class="doorway">
      <hr class="split">
    </div>
  </div>
  <div class="fire-pit">
    <div class="fire">
  <div class="inner-fire">
</div>
</div>
    <hr class="log1">
    <hr class="log2">
  </div>
  <div class="tree one">
    <hr class="trunc">
    <hr class="leaves">
    <hr class="leaves">
    <hr class="leaves">
    <hr class="leaves">
  </div>
  <div class="tree two">
    <hr class="trunc">
    <hr class="leaves">
    <hr class="leaves">
    <hr class="leaves">
    <hr class="leaves">
  </div>
  <div class="tree three">
    <hr class="trunc">
    <hr class="leaves">
    <hr class="leaves">
    <hr class="leaves">
    <hr class="leaves">
  </div>
  <div class="tree four">
    <hr class="trunc">
    <hr class="leaves">
    <hr class="leaves">
    <hr class="leaves">
    <hr class="leaves">
  </div>
  <div class="hill"></div>
</div>
<span class="loading-text">Loading Page.. Please Wait!</span>
</div>
<style>
/* From Uiverse.io by zanina-yassine - Tags: loader */
.master-container {
  margin: 0;
  padding: 20px 40px;
  background-color: #131516;
  display: grid;
  border-radius: 13px;
  border: 1px solid #2c2d2e;
  transform: scale(0.7);
}

.container {
  width: 300px;
  height: 300px;
  position: relative;
  margin: auto;
  border-radius: 50%;
  border: 2px solid white;
  overflow: hidden;
}

.crescent {
  position: relative;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  left: calc(50% - 25px);
  top: 12px;
  overflow: hidden;
  animation: rotate 3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

.crescent span:nth-child(2) {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 2px white;
  border-radius: 50%;
}

.crescent span:nth-child(1) {
  background-color: #131516;
  position: absolute;
  left: 40%;
  display: block;
  width: calc(70% - 6px);
  height: calc(70% - 6px);
  box-shadow: inset 0 0 0 2px white;
  border-radius: 50%;
  z-index: 9;
}

.star {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  height: 20px;
  width: 20px;
}

.star span:nth-child(1)::before {
  content: "";
  border: 2px solid white;
  height: 50%;
  width: 50%;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0% 0% 100% 10%;
  display: block;
  left: -3px;
  top: -3px;
  position: absolute;
}

.star span:nth-child(1)::after {
  content: "";
  border: 2px solid white;
  height: 50%;
  width: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 0% 100% 0% 0%;
  display: block;
  left: -3px;
  bottom: -3px;
  position: absolute;
}

.star span:nth-child(2)::before {
  content: "";
  border: 2px solid white;
  height: 50%;
  width: 50%;
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: 0% 0% 0% 100%;
  display: block;
  right: -3px;
  top: -3px;
  position: absolute;
}

.star span:nth-child(2)::after {
  content: "";
  border: 2px solid white;
  height: 50%;
  width: 50%;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-radius: 100% 0% 0% 0%;
  display: block;
  right: -3px;
  bottom: -3px;
  position: absolute;
}

.small-star {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  height: 12px;
  width: 12px;
}

.small-star span:nth-child(1)::before {
  content: "";
  border: 1.5px solid white;
  height: 50%;
  width: 50%;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0% 0% 100% 10%;
  display: block;
  left: -2px;
  top: -2px;
  position: absolute;
}

.small-star span:nth-child(1)::after {
  content: "";
  border: 1.5px solid white;
  height: 50%;
  width: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 0% 100% 0% 0%;
  display: block;
  left: -2px;
  bottom: -2px;
  position: absolute;
}

.small-star span:nth-child(2)::before {
  content: "";
  border: 1.5px solid white;
  height: 50%;
  width: 50%;
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: 0% 0% 0% 100%;
  display: block;
  right: -2px;
  top: -2px;
  position: absolute;
}

.small-star span:nth-child(2)::after {
  content: "";
  border: 1.5px solid white;
  height: 50%;
  width: 50%;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-radius: 100% 0% 0% 0%;
  display: block;
  right: -2px;
  bottom: -2px;
  position: absolute;
}

.s1 {
  left: 60px;
  top: 50px;
  animation: glow 1.1s 0.9s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

.s2 {
  right: 35px;
  bottom: 155px;
  animation: glow 1.3s 0.5s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

.s3 {
  left: calc(50% - 10px);
  top: 75px;
  animation: glow 1.5s 0.3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

.s4 {
  left: 35px;
  bottom: 155px;
  animation: glow 3s 0.7s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

.s5 {
  right: 60px;
  top: 50px;
  animation: glow 2s 1.2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

.ss1 {
  right: 15px;
  bottom: 130px;
  animation: glow 2s 1s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

.ss2 {
  left: 15px;
  bottom: 130px;
  animation: glow 1s 0s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

.ss3 {
  left: 35px;
  bottom: 195px;
  animation: glow 1.9s 0.1s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

.ss4 {
  right: 35px;
  bottom: 195px;
  animation: glow 1.6s 0.9s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

.ss5 {
  left: 100px;
  bottom: 180px;
  animation: glow 1s 0.5s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

.ss6 {
  right: 100px;
  bottom: 180px;
  animation: glow 1.7s 0.6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

.ss7 {
  right: 90px;
  top: 30px;
  animation: glow 0.8s 0.8s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

.ss8 {
  left: 90px;
  top: 30px;
  animation: glow 1.8s 0.3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

.hill {
  display: block;
  width: 140%;
  height: 100%;
  border: 2px solid white;
  border-radius: 50%;
  bottom: -40%;
  position: relative;
  left: -20%;
  background-size: 3%;
  background-repeat: repeat;
  opacity: 0.7;
}

.fire-pit {
  width: 18px;
  height: 30px;
  position: absolute;
  left: calc(50% - 9px);
  bottom: 25px;
  z-index: 99;
}

.fire {
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-bottom: 18px solid #ffffff;
  position: relative;
  top: -9px;
}

.fire:after {
  content: "";
  position: absolute;
  left: -9px;
  top: 18px;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-top: 9px solid #ffffff;
}

.inner-fire {
  width: 0;
  height: 0;
  border: 4.5px solid transparent;
  border-bottom: 9px solid #131516;
  top: 4.5px;
  position: absolute;
  z-index: 9;
  left: -4.5px;
}

.inner-fire:after {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 9px;
  width: 0;
  height: 0;
  border: 4.5px solid transparent;
  border-top: 6px solid #131516;
}

.log1 {
  background-color: white;
  height: 2px;
  transform: rotate(35deg);
  transform-origin: center;
  position: relative;
  left: -3px;
  bottom: -1.5px;
}

.log2 {
  background-color: white;
  height: 2px;
  transform: rotate(-35deg);
  transform-origin: center;
  left: 3px;
  position: relative;
  bottom: -0px;
}

.hut {
  width: 0;
  height: 0;
  border-left: 38px solid transparent;
  border-right: 38px solid transparent;
  border-bottom: 75px solid #131516;
  position: absolute;
  left: calc(50% - 37.6px);
  z-index: 11;
  bottom: 80px;
  transform: scale(1.3);
}

.hut hr:nth-child(1) {
  height: 0px;
  position: absolute;
  width: 75px;
  bottom: -75px;
  left: calc(50% - 37.6px);
}

.hut hr:nth-child(2) {
  height: 0px;
  position: absolute;
  width: 96px;
  bottom: -32px;
  left: -32px;
  transform: rotate(63.5deg);
  border: 1px solid white;
}

.hut hr:nth-child(3) {
  height: 0px;
  position: absolute;
  width: 96px;
  bottom: -32px;
  right: -32px;
  transform: rotate(-63.5deg);
  border: 1px solid white;
}

.hut hr:nth-child(4) {
  height: 0px;
  position: absolute;
  width: 60px;
  bottom: -60px;
  left: -30px;
  border: 0.5px solid white;
}

.hut hr:nth-child(5) {
  height: 0px;
  position: absolute;
  width: 55px;
  bottom: -55px;
  left: -27.5px;
  border: 0.5px solid white;
}

.hut hr:nth-child(6) {
  height: 0px;
  position: absolute;
  width: 50px;
  bottom: -50px;
  left: -25px;
  border: 0.5px solid white;
}

.doorway {
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 42px solid #131516;
  position: relative;
  left: -22px;
  bottom: -32px;
}

.doorway::before {
  content: "";
  border-left: 1px solid white;
  width: 0px;
  height: 48px;
  display: inline-block;
  transform: rotate(-27deg);
  left: 11px;
  position: absolute;
  bottom: -45px;
}

.doorway::after {
  content: "";
  border-left: 1px solid white;
  width: 0px;
  height: 48px;
  display: inline-block;
  transform: rotate(27deg);
  left: -11px;
  position: absolute;
  bottom: -45px;
}

.doorway > hr.split {
  height: 44px;
  width: 1px;
  position: absolute;
  left: 0px;
  top: 0;
  display: inline-block;
  background-color: white;
  border: 0;
}

/* Trees */
.tree {
  position: absolute;
  width: 25px;
  height: 48px;
  z-index: 21;
  transform: scale(1.3);
}

.tree .trunc {
  height: 48px;
  width: 1px;
  background-color: white;
  left: 12.5px;
  position: absolute;
  margin-top: 1.5px;
}

.tree .leaves {
  height: 18px;
  width: 18px;
  transform: rotate(45deg);
  border-left: 1.5px solid white;
  border-top: 1.5px solid white;
  border-bottom: 0;
  border-right: 0;
  margin-bottom: -15px;
  margin-top: 5px;
  left: 4px;
  position: relative;
}

.one {
  left: 30px;
  bottom: 90px;
}

.two {
  right: 30px;
  bottom: 90px;
}

.three {
  left: 80px;
  bottom: 115px;
}

.four {
  right: 80px;
  bottom: 115px;
}

.loading-text {
  color: white;
  font-family: 'Inter', sans-serif;
  display: block;
  text-align: center;
  padding: 20px 0 0 0;
  opacity: 0.8;
}

@keyframes glow {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(10deg);
  }

  100% {
    transform: rota(0);
  }
}
</style>


================================================
FILE: loaders/zanina-yassine_weak-bobcat-68.html
================================================
<div class="container">
  <div class="cloud front">
    <span class="left-front"></span>
    <span class="right-front"></span>
  </div>
  <span class="sun sunshine"></span>
  <span class="sun"></span>
  <div class="cloud back">
    <span class="left-back"></span>
    <span class="right-back"></span>
  </div>
</div>
<style>
/* From Uiverse.io by zanina-yassine - Tags: loader */
.container {
  width: 250px;
  height: 250px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cloud {
  width: 250px;
}

.front {
  padding-top: 45px;
  margin-left: 25px;
  display: inline;
  position: absolute;
  z-index: 11;
  animation: clouds 8s infinite;
  animation-timing-function: ease-in-out;
}

.back {
  margin-top: -30px;
  margin-left: 150px;
  z-index: 12;
  animation: clouds 12s infinite;
  animation-timing-function: ease-in-out;
}

.right-front {
  width: 45px;
  height: 45px;
  border-radius: 50% 50% 50% 0%;
  background-color: #4c9beb;
  display: inline-block;
  margin-left: -25px;
  z-index: 5;
}

.left-front {
  width: 65px;
  height: 65px;
  border-radius: 50% 50% 0% 50%;
  background-color: #4c9beb;
  display: inline-block;
  z-index: 5;
}

.right-back {
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 50% 0%;
  background-color: #4c9beb;
  display: inline-block;
  margin-left: -20px;
  z-index: 5;
}

.left-back {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 0% 50%;
  background-color: #4c9beb;
  display: inline-block;
  z-index: 5;
}

.sun {
  width: 120px;
  height: 120px;
  background: -webkit-linear-gradient(to right, #fcbb04, #fffc00);
  background: linear-gradient(to right, #fcbb04, #fffc00);
  border-radius: 60px;
  display: inline;
  position: absolute;
}

.sunshine {
  animation: sunshines 2s infinite;
}

@keyframes sunshines {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes clouds {
  0% {
    transform: translateX(15px);
  }

  50% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(15px);
  }
}

</style>


================================================
FILE: loaders/zebra76966_quiet-rat-63.html
================================================
<div class="loader"></div>
<style>
/* From Uiverse.io by zebra76966 - Tags: loader, multicolor */
.loader {
  border-top: 8px solid hotpink;
  border-bottom: 8px solid #f55951;
  border-left: 8px solid #3a9efd;
  border-right: 8px solid #1fff7c;
  border-radius: 100%;
  height: 100px;
  width: 100px;
  animation: looper 5s infinite ease-in-out;
}

@keyframes looper {
  0% {
    border-radius: 100% 100% 100% 100%;
    border-color: hotpink #3a9efd #1fff7c #f55951;
  }

  10% {
    border-radius: 0% 100% 0% 0%;
    border-color: #f55951;
    transform: rotate(150deg);
  }

  20% {
    border-radius: 0% 0% 0% 0%;
    border-color: #3a9efd;
  }

  30% {
    border-radius: 0% 0% 0% 0%;
    border-color: #1fff7c;
  }

  40% {
    border-radius: 0% 0% 0% 0%;
    border-color: #3a9efd;
  }

  50% {
    border-radius: 100%;
    border-color: #f55951;
  }

  90% {
    border-radius: 100%;
    transform: rotate(360deg);
    border-style: dashed;
  }

  100% {
    transform: rotate(0deg);
    border-radius: 100% 100% 100% 100%;
    border-color: hotpink #3a9efd #1fff7c #f55951;
  }
}





</style>


================================================
FILE: loaders/zombie223_foolish-insect-45.html
================================================
<div class="lds-spinner">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
/* From Uiverse.io by zombie223 - Tags: loader */
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  animation: color_5881 1.2s ease-in-out infinite;
}

.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}

.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}

.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}

.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}

.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

.lds-spinner div:nth-child(1)::after {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2)::after {
  transform: rotate(30deg);
  animation-delay: -1s;
}

.lds-spinner div:nth-child(3)::after {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4)::after {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5)::after {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6)::after {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7)::after {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8)::after {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9)::after {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}

.lds-spinner div:nth-child(10)::after {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}

.lds-spinner div:nth-child(11)::after {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}

.lds-spinner div:nth-child(12)::after {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes lds-spinner {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes color_5881 {
  0% {
    background-color: rgb(86, 255, 7);
  }

  25% {
    background-color: rgb(0, 247, 255);
  }

  50% {
    background-color: rgb(86, 255, 7);
  }

  75% {
    background-color: rgb(0, 247, 255);
  }

  100% {
    background-color: rgb(86, 255, 7);
  }
}
</style>


================================================
FILE: loaders/zombie223_stale-badger-47.html
================================================
<div class="container">
  <div class="lds-spinner">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<style>
/* From Uiverse.io by zombie223 - Tags: loader */
.lds-spinner {
  height: 250px;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 50px;
  padding-bottom: 20px;
}

.lds-spinner div {
  transform-origin: 30px 20px;
}

.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 2px;
  left: 37px;
  width: 6px;
  height: 19px;
  border-radius: 20%;
  animation: color 1.2s ease-in-out infinite;
}

.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}

.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}

.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}

.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}

.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

.lds-spinner div:nth-child(12)::after {
  animation-delay: 0s;
}

.lds-spinner div:nth-child(1)::after {
  animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2)::after {
  animation-delay: -1s;
}

.lds-spinner div:nth-child(3)::after {
  animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4)::after {
  animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5)::after {
  animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6)::after {
  animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7)::after {
  animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8)::after {
  animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9)::after {
  animation-delay: -0.3s;
}

.lds-spinner div:nth-child(10)::after {
  animation-delay: -0.2s;
}

.lds-spinner div:nth-child(11)::after {
  animation-delay: -0.1s;
}

@keyframes color {
  0% {
    background-color: darkcyan;
  }

  100% {
    background-color: white;
  }
}
</style>